@explorer-1/vue 0.2.104 → 0.3.0

package/src/components/FormNewsletterSignup/FormNewsletterSignup.vue

@@ -255,8 +255,6 @@ export default defineComponent({
 })
 </script>
 
-<style lang="css">
-html {
-  scroll-padding-top: 150px;
-}
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/FormNewsletterSignup';
 </style>

package/src/components/HeroLarge/HeroLarge.vue

@@ -133,6 +133,6 @@ export default defineComponent({
   }
 })
 </script>
-<style lang="scss" scoped>
+<style lang="scss">
 @import '@explorer-1/common/src/scss/components/HeroLarge';
 </style>

package/src/components/HomepageCarousel/HomepageCarousel.vue

@@ -344,42 +344,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-@import 'swiper/swiper-bundle.css';
-
-.HomepageCarousel {
-  .HomepageCarouselSlider {
-    .swiper-pagination {
-      @apply relative text-left mx-auto pl-3;
-
-      span {
-        @apply py-2 pl-1 pr-2 h-auto w-auto bg-transparent m-0 opacity-100;
-
-        &::before {
-          content: '';
-          width: 0.65rem;
-          height: 0.65rem;
-          @apply block rounded-full bg-white bg-opacity-40;
-        }
-
-        &.swiper-pagination-bullet-active {
-          &::before {
-            @apply bg-jpl-red;
-          }
-        }
-      }
-    }
-  }
-
-  .load-enter-active {
-    transition: transform 500ms linear;
-  }
-
-  .load-leave-active {
-    transition: none;
-  }
-
-  .load-enter-to {
-    @apply translate-x-0;
-  }
-}
+@import '@explorer-1/common/src/scss/components/HomepageCarousel';
 </style>

package/src/components/HomepageCarouselItem/HomepageCarouselItem.vue

@@ -141,36 +141,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.HomepageCarouselItem,
-.HomepageCarouselItem.swiper-slide {
-  // somewhat arbitrary heights
-  // portrait on small screens
-  //height: 500px;
-  min-height: 500px;
-  // landscape on larger screens
-  @screen lg {
-    height: 800px;
-    min-height: 800px;
-  }
-}
-
-.HomepageCarouselItem {
-  img {
-    @apply transition-transform duration-1000 ease-out transform scale-100;
-  }
-
-  .IconArrow {
-    @apply -ml-5 transition-all duration-500 ease-in opacity-0;
-  }
-
-  &.swiper-slide-active {
-    img {
-      @apply scale-105;
-    }
-
-    .IconArrow {
-      @apply ml-0 opacity-100;
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/HomepageCarouselItem';
 </style>

package/src/components/HomepageMissionsCarousel/HomepageMissionsCarousel.vue

@@ -190,77 +190,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-@import 'swiper/swiper-bundle.css';
-
-.HomepageMissionsCarousel {
-  // container styles
-  .swiper {
-    @apply overflow-visible #{!important};
-
-    .swiper-navigation {
-      top: 20%;
-    }
-
-    .swiper-prev,
-    .swiper-next {
-      @apply -mt-1 w-auto h-auto transform -translate-y-1/2;
-
-      &.swiper-button-disabled {
-        @apply invisible;
-      }
-      // shared styles for the arrow animation
-      &.BaseButton {
-        @apply transition-none #{!important};
-      }
-
-      &.BaseButton > .label {
-        @apply flex overflow-hidden;
-
-        > .arrow-wrapper {
-          @apply block relative w-full h-full overflow-hidden;
-
-          > .arrow {
-            @apply block;
-          }
-
-          > .arrow-fixed {
-            @apply absolute top-0 left-0 block;
-          }
-        }
-        &:hover {
-          > .arrow-wrapper > .arrow,
-          > .arrow-wrapper > .arrow-fixed {
-            animation-delay: 50ms !important; // hover intent
-          }
-        }
-      }
-    }
-    @screen lg {
-      // specific directional animation
-      .swiper-next.BaseButton > .label {
-        &:hover {
-          > .arrow-wrapper > .arrow {
-            animation: arrow-carousel-next-anim 0.1s linear normal;
-          }
-
-          > .arrow-wrapper > .arrow-fixed {
-            animation: arrow-carousel-next-fixed-anim 0.1s linear normal;
-          }
-        }
-      }
-
-      .swiper-prev.BaseButton > .label {
-        &:hover {
-          > .arrow-wrapper > .arrow {
-            animation: arrow-carousel-prev-anim 0.1s linear normal;
-          }
-
-          > .arrow-wrapper > .arrow-fixed {
-            animation: arrow-carousel-prev-fixed-anim 0.1s linear normal;
-          }
-        }
-      }
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/HomepageMissionsCarousel';
 </style>

package/src/components/HomepageMissionsCarousel/HomepageMissionsCarouselItem.vue

@@ -86,61 +86,5 @@ export default defineComponent({
 </template>
 
 <style lang="scss">
-.HomepageMissionsCarouselItem {
-  .text-wrapper {
-    border-width: 1px;
-    border-style: solid;
-    border-image: linear-gradient(to top, #6f6f6f, rgba(0, 0, 0, 0)) 1 20%; // border-gray-mid-dark
-    border-top-width: 0;
-    border-right-width: 0;
-    border-bottom-width: 0;
-  }
-  // styling based on slide visibility
-  &.swiper-slide,
-  &.swiper-slide-duplicate {
-    @apply opacity-50 transition-all duration-500 ease-in-out h-auto;
-
-    .slide-image {
-      @apply transition-transform duration-500 ease-in-out transform scale-90;
-    }
-
-    .text-wrapper {
-      @apply opacity-0 transition-opacity duration-500 ease-in-out;
-    }
-    // on mobile, only the active slide should be fully visible
-    &.swiper-slide-active,
-    &:focus,
-    &:focus-within {
-      @apply opacity-100;
-
-      .text-wrapper {
-        @apply opacity-100;
-
-        .shifted-text {
-          @apply -mt-3 #{!important};
-        }
-
-        .explore-text {
-          @apply opacity-100 ml-0 #{!important};
-        }
-      }
-
-      .slide-image {
-        @apply scale-105;
-      }
-    }
-    @screen lg {
-      // &.swiper-slide-visible, &.swiper-slide-duplicate-visible
-      &.swiper-slide-prev,
-      &.swiper-slide-active,
-      &.swiper-slide-next {
-        @apply opacity-100;
-
-        .text-wrapper {
-          @apply opacity-100;
-        }
-      }
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/HomepageMissionsCarouselItem';
 </style>

package/src/components/HomepageStats/HomepageStats.vue

@@ -329,34 +329,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.HomepageStats {
-  .BaseTimer {
-    .text-stats-xl {
-      @apply leading-none;
-
-      @screen lg {
-        font-size: 2.125rem; // 34px
-      }
-      @screen xl {
-        font-size: 2.25rem; // 36px
-      }
-    }
-
-    .unit {
-      @apply text-gray-mid-dark;
-    }
-  }
-
-  .BaseUnitToggle {
-    @apply flex items-center;
-
-    fieldset {
-      @apply pl-3;
-    }
-
-    .unit {
-      @apply -mt-3;
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/HomepageStats';
 </style>

package/src/components/Icons/IconSlideshow.vue

@@ -22,9 +22,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-// @import '@explorer-1/common/src/scss/components/IconSlideshow';
-.IconSlideshow {
-  width: 1em;
-  height: 1em;
-}
+@import '@explorer-1/common/src/scss/components/IconSlideshow';
 </style>

package/src/components/ImageDetailContextImage/ImageDetailContextImage.vue

@@ -83,43 +83,6 @@ export default defineComponent({
 })
 </script>
 
-<style lang="scss" scoped>
-.ContextImageButton {
-  @apply select-none;
-
-  cursor: pointer;
-
-  .ContextImage {
-    @apply mx-auto w-full;
-
-    max-width: 640px;
-  }
-
-  @screen sm {
-    svg.IconDropdown {
-      @apply transform rotate-180;
-    }
-
-    min-width: 100px;
-
-    .ContextImage {
-      min-width: 150px;
-    }
-  }
-  @screen md {
-    .ContextImage {
-      min-width: 200px;
-    }
-  }
-  @screen lg {
-    .ContextImage {
-      min-width: 250px;
-    }
-  }
-  @screen xl {
-    .ContextImage {
-      min-width: 300px;
-    }
-  }
-}
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/ImageDetailContextImage';
 </style>

package/src/components/LoadingTransition/LoadingTransition.vue

@@ -28,21 +28,6 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
-.loading-page {
-  @apply fixed top-0 left-0 block w-full h-full bg-white opacity-75;
-
-  z-index: 99999;
-
-  .loading-wrapper {
-    @apply w-full h-full min-h-full min-w-full flex flex-col justify-center items-center;
-
-    .loading {
-      @apply animate-rotate bg-transparent p-0 z-50 rounded-full h-14 w-14 opacity-75;
-
-      border: 4px solid #888888;
-      border-bottom-color: #ffffff;
-    }
-  }
-}
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/LoadingTransition';
 </style>

package/src/components/LogoCaltech/LogoCaltech.vue

@@ -22,8 +22,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.LogoCaltech {
-  width: 8.375em; // 134px wide at .text-base
-  height: auto;
-}
+@import '@explorer-1/common/src/scss/components/LogoCaltech';
 </style>

package/src/components/LogoTribrand/LogoTribrand.vue

@@ -67,27 +67,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-$logo-text-dark: #1b1a19;
-
-.LogoTribrand {
-  width: 20.25em; // 324x72 px at .text-base
-  height: auto;
-
-  .logo-path-jpl-caltech {
-    color: $logo-text-dark;
-  }
-
-  .-transparent.-scrolled & {
-    .logo-path-jpl-caltech {
-      color: $logo-text-dark;
-    }
-  }
-
-  .-transparent &,
-  &.-invert {
-    .logo-path-jpl-caltech {
-      color: #ffffff;
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/LogoTribrand';
 </style>

package/src/components/MetaPanel/MetaPanel.vue

@@ -234,9 +234,5 @@ const standardsIste = computed(() => {
   </section>
 </template>
 <style lang="scss">
-.MetaPanel {
-  .MetaPanel-button {
-    @apply border-[1px] font-primary normal-case tracking-normal font-bold text-lg py-2 bg-white;
-  }
-}
+@import '@explorer-1/common/src/scss/components/MetaPanel';
 </style>

package/src/components/MetaPanelAccordion/MetaPanelAccordion.vue

@@ -40,25 +40,5 @@ const { standards } = reactive(props)
   </div>
 </template>
 <style lang="scss">
-.MetaPanelAccordion {
-  .BaseAccordionItem {
-    .BaseAccordionHeader {
-      @apply bg-white;
-      > div {
-        @apply border-none;
-      }
-      button.BaseAccordion-trigger {
-        @apply py-2 px-3;
-        @apply can-hover:hover:no-underline;
-      }
-    }
-    &.-open {
-      .BaseAccordionHeader {
-        button.BaseAccordion-trigger {
-          @apply pb-0;
-        }
-      }
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/MetaPanelAccordion';
 </style>

package/src/components/MetaPanelItems/MetaPanelItems.vue

@@ -170,21 +170,5 @@ const themeVariant = computed(() => {
   </div>
 </template>
 <style lang="scss">
-.MetaPanelItems {
-  .MetaPanelItem {
-    @apply flex w-full items-start mb-4 md:mb-0 w-auto;
-    &:last-of-type {
-      @apply mb-0;
-    }
-    .MetaPanelItem-icon {
-      @apply mr-1 w-10 md:w-12;
-    }
-    .MetaPanelItem-heading {
-      @apply text-subtitle text-base md:mb-[.2em] whitespace-nowrap;
-    }
-    .MetaPanelItem-content {
-      @apply font-primary font-bold lg:text-xl;
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/MetaPanelItems';
 </style>

package/src/components/MetadataEduResource/MetadataEduResource.vue

@@ -84,38 +84,5 @@ const time = computed(() => {
   </div>
 </template>
 <style lang="scss">
-.MetadataEduResource {
-  @apply lg:flex lg:flex-grow;
-  .MetadataEduResourceItem {
-    @apply flex;
-    @apply items-start;
-    @apply mr-4 md:mr-4 xl:mr-8;
-    @apply mb-5 lg:mb-7;
-    @apply lg:min-w-[10rem];
-
-    span {
-      @apply text-gray-dark;
-    }
-
-    svg {
-      min-width: 1.25rem;
-      @apply top-0.5;
-    }
-    .MetadataEduResourceIcon {
-      @apply relative mr-3 lg:mr-2 xl:mr-3;
-    }
-  }
-
-  &.-compact {
-    @apply flex flex-grow flex-wrap;
-    .MetadataEduResourceItem {
-      @apply whitespace-nowrap;
-      @apply max-w-none min-w-[4em];
-      @apply mr-6 mb-0;
-      &.-xlScreensOnly {
-        @apply hidden xl:flex;
-      }
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/MetadataEduResource';
 </style>

package/src/components/MetadataEvent/MetadataEvent.vue

@@ -150,38 +150,5 @@ const location = computed(() => {
   </div>
 </template>
 <style lang="scss">
-.MetadataEvent {
-  @apply lg:flex lg:flex-grow;
-  .MetadataEventItem {
-    @apply flex;
-    @apply items-start;
-    @apply mr-4 md:mr-4 xl:mr-8;
-    @apply mb-5 lg:mb-7;
-    @apply lg:min-w-[10rem];
-
-    span {
-      @apply text-gray-dark;
-    }
-
-    svg {
-      min-width: 1.25rem;
-      @apply top-0.5;
-    }
-    .MetadataEventIcon {
-      @apply text-primary relative mr-3 lg:mr-2 xl:mr-3;
-    }
-  }
-
-  &.-compact {
-    @apply flex flex-grow flex-wrap;
-    .MetadataEventItem {
-      @apply whitespace-nowrap;
-      @apply max-w-none min-w-[4em];
-      @apply mr-6 mb-0;
-    }
-    &.-allow-break {
-      @apply block lg:flex;
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/MetadataEvent';
 </style>

package/src/components/MissionDetailAbout/MissionDetailAbout.vue

@@ -123,78 +123,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.MissionDetailAbout {
-  @apply text-gray-dark; // fallback if no theme
-  li.instrument {
-    @apply mb-3;
-    @apply flex;
-    @apply max-w-full;
-
-    span {
-      @apply opacity-0;
-      @screen lg {
-        max-width: 20ch;
-      }
-    }
-
-    &::before {
-      @apply bg-jpl-red-light;
-      @apply inline-block;
-      @apply relative;
-      @apply mr-3;
-      @apply flex-shrink-0;
-
-      content: '';
-      transform: scale(0);
-      margin-top: 0.65rem;
-      width: 30px;
-      height: 2px;
-    }
-
-    &.lifeless {
-      span {
-        @apply opacity-100;
-      }
-
-      &::before {
-        transform: scale(1);
-      }
-    }
-
-    &.animated {
-      span {
-        @apply animate-fadeIn;
-        @screen lg {
-          max-width: 20ch;
-        }
-
-        -webkit-animation-delay: inherit;
-        animation-delay: inherit;
-      }
-      @for $i from 1 through 20 {
-        &:nth-child(#{$i}) {
-          -webkit-animation-delay: (#{$i * 300ms});
-          animation-delay: (#{$i * 300ms});
-        }
-      }
-
-      &::before {
-        @apply animate-scaleIn;
-
-        -webkit-animation-delay: inherit;
-        animation-delay: inherit;
-        transform-origin: 0% 50%;
-      }
-    }
-  }
-
-  // dark and light treatments
-  .ThemeVariantLight & {
-    @apply text-gray-dark;
-  }
-
-  .ThemeVariantDark & {
-    @apply text-white;
-  }
-}
+@import '@explorer-1/common/src/scss/components/MissionDetailAbout';
 </style>

package/src/components/MissionDetailHero/MissionDetailHero.vue

@@ -244,50 +244,6 @@ export default defineComponent({
   }
 })
 </script>
-<style lang="scss" scoped>
-.MissionDetailHero {
-  .content-wrapper {
-    @screen lg {
-      min-height: 80vh;
-    }
-  }
-
-  .content {
-    // fallback text color
-    @apply text-black;
-  }
-
-  .foreground {
-    @screen lg {
-      width: 55%;
-    }
-
-    img {
-      max-height: 300px;
-      @apply w-auto;
-      @screen lg {
-        max-height: 550px;
-      }
-    }
-  }
-
-  &.ThemeVariantLight {
-    .content {
-      @apply text-black;
-    }
-  }
-
-  &.ThemeVariantDark {
-    .background {
-      &::before {
-        content: '';
-        @apply absolute inset-x-0 bottom-0 min-h-1/2 z-20 bg-gradient-to-b from-transparent to-black;
-      }
-    }
-
-    .content {
-      @apply text-white;
-    }
-  }
-}
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/MissionDetailHero';
 </style>

package/src/components/MissionDetailHighlights/MissionDetailHighlights.vue

@@ -313,16 +313,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.MissionDetailHighlights {
-  &.min-h-mission-highlights {
-    min-height: 38rem;
-  }
-
-  .mission-highlights-lines.-filler {
-    padding-top: 60%;
-    @screen lg {
-      @apply pt-0;
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/MissionDetailHighlights';
 </style>