@explorer-1/vue 0.2.104 → 0.3.0

package/src/components/MissionDetailHighlights/MissionDetailHighlightsCarousel.vue

@@ -141,20 +141,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-@import 'swiper/swiper-bundle.css';
-
-.MissionHighlightsCarousel {
-  .swiper {
-    .swiper-prev {
-      @apply mr-px;
-    }
-
-    .swiper-prev,
-    .swiper-next {
-      &.swiper-button-disabled {
-        @apply opacity-75 cursor-default bg-none;
-      }
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/MissionDetailHighlightsCarousel';
 </style>

package/src/components/MissionDetailHighlights/MissionDetailHighlightsCarouselItem.vue

@@ -112,12 +112,6 @@ export default defineComponent({
   }
 })
 </script>
-<style lang="scss" scoped>
-.slide-link {
-  @apply invisible;
-
-  .swiper-slide-active & {
-    @apply visible;
-  }
-}
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/MissionDetailHighlightsCarouselItem';
 </style>

package/src/components/MissionDetailInlineImage/MissionDetailInlineImage.vue

@@ -87,11 +87,5 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-.MissionDetailInlineImage {
-  .ThemeVariantDark & {
-    > div {
-      @apply text-white;
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/MissionDetailInlineImage';
 </style>

package/src/components/MissionDetailStats/MissionDetailStats.vue

@@ -155,33 +155,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.MissionDetailStats {
-  .adaptive-stats-grid div:nth-child(3) {
-    @apply col-span-3;
-  }
-
-  .theme {
-    @apply bg-gray-light text-gray-dark;
-  }
-
-  .ThemeVariantDark & .theme {
-    @apply bg-jpl-blue-darker bg-opacity-75 text-white;
-  }
-
-  .label {
-    @apply font-semibold mb-3 text-jpl-red-dark;
-  }
-
-  .ThemeVariantDark & .label {
-    @apply text-jpl-blue-light;
-  }
-
-  .legend {
-    @apply text-gray-mid-dark;
-  }
-
-  .ThemeVariantDark & .legend {
-    @apply text-white;
-  }
-}
+@import '@explorer-1/common/src/scss/components/MissionDetailStats';
 </style>

package/src/components/MissionDetailStats/MissionDetailStatsMicro.vue

@@ -33,20 +33,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.MissionDetailStatsMicro {
-  .text-stats-xl {
-    @apply text-base leading-none;
-
-    @screen sm {
-      @apply text-4xl;
-    }
-  }
-
-  .legend {
-    @apply text-sm;
-    @screen sm {
-      @apply text-base;
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/MissionDetailStatsMicro';
 </style>

package/src/components/MissionDetailStats/MissionDetailStatsMini.vue

@@ -79,31 +79,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.MissionDetailStatsMini {
-  .theme,
-  .theme-inner {
-    @apply bg-jpl-blue-darker bg-opacity-75 text-white;
-  }
-  // different padding left for first child, which is dynamic
-  .theme-inner {
-    @apply pl-10 pb-10;
-    @screen lg {
-      @apply py-10 pl-0;
-    }
-
-    &:first-child {
-      @apply pt-10;
-      @screen lg {
-        @apply pl-10;
-      }
-      @screen 2xl {
-        @apply pl-0;
-      }
-    }
-  }
-
-  .legend {
-    @apply text-white;
-  }
-}
+@import '@explorer-1/common/src/scss/components/MissionDetailStatsMini';
 </style>

package/src/components/MissionDetailStreamfield/MissionDetailStreamfield.vue

@@ -69,27 +69,6 @@ export default {
   }
 }
 </script>
-<style lang="scss" scoped>
-.ThemeVariantDark {
-  .MissionDetailStreamfield-heading,
-  .BlockText {
-    @apply text-white;
-  }
-}
-
-.MissionDetailStreamfield {
-  .MissionDetailInlineImage {
-    .featured-image {
-      max-width: 700px;
-      width: auto;
-      position: relative;
-      display: block;
-    }
-    @media screen and (min-width: 1024px) {
-      .BlockText p {
-        max-width: 30ch;
-      }
-    }
-  }
-}
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/MissionDetailStreamfield';
 </style>

package/src/components/MixinFancybox/MixinFancybox.vue

@@ -307,100 +307,5 @@ export default defineComponent({
 </template>
 
 <style lang="scss">
-.MixinFancybox {
-  @apply relative;
-
-  &:active {
-    outline: none;
-  }
-
-  .MixinFancyboxOpenButton {
-    @apply can-hover:opacity-0 opacity-70 transition-opacity duration-300 block top-px right-px z-10;
-  }
-
-  &:hover {
-    .MixinFancyboxOpenButton {
-      @apply can-hover:opacity-100 duration-200;
-    }
-  }
-
-  &:focus {
-    .MixinFancyboxOpenButton {
-      @apply can-hover:opacity-100;
-    }
-  }
-
-  img {
-    @apply min-w-full h-auto block;
-  }
-}
-
-// Fancybox overrides for various themes
-.fancybox-theme-dark.fancybox__container {
-  z-index: 9999;
-
-  --fancybox-color: rgba(255, 255, 255, var(--tw-text-opacity));
-  --fancybox-bg: #000000;
-  --fancybox-accent-color: #ffffff;
-  --fancybox-thumbs-width: 100px;
-  --fancybox-thumbs-border-radius: 0;
-  --fancybox-thumbs-ratio: 1 / 1;
-  --carousel-button-bg: rgba(0, 0, 0, 0.9);
-  --carousel-button-border-radius: 0;
-  --carousel-button-svg-width: 30px;
-  --carousel-button-svg-height: 30px;
-  --carousel-button-svg-stroke-width: 3;
-  --carousel-button-svg-filter: none;
-
-  .fancybox__content {
-    @apply z-50;
-  }
-
-  .fancybox__nav {
-    @apply hidden;
-
-    @screen sm {
-      @apply block;
-    }
-  }
-
-  .fancybox__caption {
-    @apply z-40 text-left relative inline-block pt-3 lg:pt-4 w-full;
-
-    h1 {
-      text-overflow: ellipsis;
-    }
-
-    p {
-      @apply inline;
-    }
-  }
-
-  .fancybox__slide.has-image.has-caption.is-draggable {
-    .fancybox__caption {
-      @apply opacity-0 transition-opacity duration-200;
-    }
-  }
-
-  .fancybox__slide.has-image:not(.is-draggable),
-  .fancybox__slide.has-image.has-caption.can-zoom_in,
-  .fancybox__slide.has-image.has-caption.is-selected:not(.is-draggable) {
-    .fancybox__caption {
-      @apply opacity-100 transition-opacity duration-200;
-    }
-  }
-
-  .caption-width {
-    background: rgba(0, 0, 0, 0.95);
-    -webkit-transition: max-width 0.15s ease;
-    transition: max-width 0.15s ease;
-    width: 100%;
-  }
-
-  @screen lg {
-    .fancybox__toolbar {
-      padding: 25px;
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/MixinFancybox';
 </style>

package/src/components/MixinFancybox/MixinFancyboxOpenButton.vue

@@ -24,12 +24,5 @@ export default defineComponent({
 </template>
 
 <style lang="scss">
-.MixinFancyboxOpenButton {
-  // scoped styles for Fancybox Opener button
-  @apply relative pointer-events-none cursor-pointer z-10;
-
-  .BaseButton {
-    @apply -top-px -right-px absolute focus:outline-none xl:text-xl inline-block;
-  }
-}
+@import '@explorer-1/common/src/scss/components/MixinFancyboxOpenButton';
 </style>

package/src/components/NavDesktop/NavDesktop.vue

@@ -299,61 +299,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.NavDesktop {
-  @apply border-b border-transparent;
-  // styles for default vs transparent header
-  // underline color and logo inversion styles handled within their respective components
-  > .header-bg {
-    @apply bg-white;
-
-    .main-navigation {
-      > * {
-        @apply text-gray-dark;
-      }
-    }
-  }
-
-  &.-transparent {
-    @apply bg-transparent;
-
-    > .header-bg {
-      @apply bg-gradient-to-b from-transparent-black-75 to-transparent bg-transparent;
-    }
-
-    .main-navigation {
-      > * {
-        @apply text-white;
-
-        .NavDesktopDropdown > button {
-          // mimics .text-contrast class
-          text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
-        }
-      }
-    }
-  }
-
-  &.-scrolled {
-    @apply border-b border-gray-mid border-opacity-50 bg-white;
-
-    &.-transparent {
-      > .header-bg {
-        @apply opacity-0 bg-white;
-      }
-
-      .main-navigation {
-        > * {
-          @apply text-gray-dark;
-
-          .NavDesktopDropdown > button {
-            text-shadow: none;
-          }
-        }
-      }
-    }
-
-    &.-hasSecondary {
-      @apply border-0 border-transparent;
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/NavDesktop';
 </style>

package/src/components/NavDesktop/NavDesktopDropdown.vue

@@ -107,93 +107,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.NavDesktopDropdown {
-  // pushes the dropdown below the closest parent div that has position:relative (e.g. the header)
-  > div {
-    &::before {
-      content: '';
-      @apply relative z-0 w-full h-full block;
-    }
-  }
-
-  > button {
-    > span {
-      @apply border-transparent;
-    }
-
-    &.-open {
-      > span {
-        @apply border-primary edu:border-white;
-
-        .-transparent & {
-          @apply border-white;
-        }
-
-        .-transparent.-scrolled & {
-          @apply border-primary edu:border-white;
-        }
-      }
-    }
-    &:hover {
-      > span {
-        @apply border-primary edu:border-white;
-
-        .-transparent & {
-          @apply border-white;
-        }
-
-        .-transparent.-scrolled & {
-          @apply border-primary edu:border-white;
-        }
-      }
-    }
-  }
-  // parent div is active
-  &.-active {
-    > button {
-      > span {
-        @apply border-primary edu:border-white font-bold;
-
-        .-transparent & {
-          @apply border-white;
-        }
-
-        .-transparent.-scrolled & {
-          @apply border-primary edu:border-white;
-        }
-
-        &.hasSecondary {
-          @apply border-transparent #{!important};
-        }
-      }
-    }
-  }
-
-  // transitions
-  .navfade-enter-to,
-  .navfade-enter-active {
-    @apply transition-all ease-out transform duration-500;
-  }
-
-  .navfade-leave-active,
-  .navfade-leave-to {
-    @apply transition-all ease-out transform duration-100;
-  }
-
-  .navfade-enter-active {
-    @apply opacity-0 translate-y-2;
-  }
-
-  .navfade-enter-to {
-    @apply opacity-100 translate-y-0;
-  }
-
-  .navfade-leave-to {
-    @apply opacity-100; // translate-y-0
-  }
-
-  .navfade-leave-active {
-    @apply opacity-0; // -translate-y-2
-  }
-}
+@import '@explorer-1/common/src/scss/components/NavDesktopDropdown';
 </style>

package/src/components/NavDesktopEdu/NavDesktopEdu.vue

@@ -304,17 +304,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.NavDesktopEdu {
-  @apply border-none;
-
-  > .header-bg {
-    @apply bg-gradient-to-r from-black to-primary bg-transparent to-90%;
-  }
-
-  .main-navigation {
-    > * {
-      @apply text-white;
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/NavDesktopEdu';
 </style>

package/src/components/NavJumpMenu/NavJumpMenu.vue

@@ -180,23 +180,5 @@ watch(
 )
 </script>
 <style lang="scss">
-.NavJumpMenu {
-  @apply invisible transition-all overflow-visible -mb-[3.7rem] z-30 fixed #{!important};
-  &.-ready {
-    @apply visible #{!important};
-  }
-  &.-at-top {
-    @apply invisible #{!important};
-  }
-  .NavSecondaryLink.secondary-root {
-    span {
-      @apply border-primary #{!important};
-    }
-    &.-invert {
-      span {
-        @apply border-white #{!important};
-      }
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/NavJumpMenu';
 </style>

package/src/components/NavJumpMenu/NavJumpMenuContent.vue

@@ -61,19 +61,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.NavJumpMenuContent {
-  a {
-    @apply block pl-18 pr-6 lg:pl-6 text-gray-dark;
-
-    > span {
-      @apply border-b border-transparent pb-2px;
-    }
-
-    &:hover {
-      > span {
-        @apply border-gray-dark text-gray-dark;
-      }
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/NavJumpMenuContent';
 </style>

package/src/components/NavLinkList/NavLinkList.vue

@@ -1,6 +1,9 @@
 <template>
   <div v-if="data">
-    <NavHeading :data="data" />
+    <NavHeading
+      :data="data"
+      class="NavLinkList"
+    />
     <div
       v-if="data.links"
       :class="{ 'auto-col': autoCol }"
@@ -57,10 +60,6 @@ export default defineComponent({
   }
 })
 </script>
-<style lang="scss" scoped>
-.auto-col {
-  @screen lg {
-    column-count: 2;
-  }
-}
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/NavLinkList';
 </style>

package/src/components/NavLogoLinks/NavLogoLinks.vue

@@ -41,16 +41,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-// In Windows high contrast mode, gives the logo a "link color" background to convey it’s clickable.
-@media (forced-colors: active) {
-  .NavLogoLinks img {
-    position: relative;
-    z-index: 1;
-    pointer-events: none;
-  }
-
-  .NavLogoLinks a {
-    background-color: linktext;
-  }
-}
+@import '@explorer-1/common/src/scss/components/NavLogoLinks';
 </style>

package/src/components/NavMobile/NavMobile.vue

@@ -298,41 +298,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.NavMobile {
-  @apply absolute top-0 z-50 inset-x-0;
-  // styles for default vs transparent header
-  // underline color and logo inversion styles handled within their respective components
-  &.-scrolled {
-    @media not print {
-      @apply fixed;
-    }
-  }
-}
-// vue-transition classes
-// may scope this wider if mobile uses the same transition
-.headerMobileReveal-enter-to,
-.headerMobileReveal-enter-active {
-  @apply transition-transform transform ease-in-out duration-200;
-}
-
-.headerMobileReveal-leave-active,
-.headerMobileReveal-leave-to {
-  @apply transition-transform transform ease-out duration-200;
-}
-
-.headerMobileReveal-enter-active {
-  @apply -translate-y-full;
-}
-
-.headerMobileReveal-enter-to {
-  @apply translate-y-0;
-}
-
-.headerMobileReveal-leave-to {
-  @apply translate-y-0;
-}
-
-.headerMobileReveal-leave-active {
-  @apply -translate-y-full;
-}
+@import '@explorer-1/common/src/scss/components/NavMobile';
 </style>

package/src/components/NavMobile/NavMobileDropdown.vue

@@ -147,33 +147,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.NavDropdownMobile {
-  // pushes the dropdown below the closest parent div that has position:relative (e.g. the header)
-  > div {
-    &::before {
-      content: '';
-      @apply relative z-0 w-full h-full block;
-    }
-  }
-
-  > button {
-    > span {
-      @apply border-transparent;
-    }
-
-    &.-open {
-      > span {
-        @apply border-primary font-bold;
-      }
-    }
-  }
-  // parent div is active
-  &.-active {
-    > button {
-      > span {
-        @apply border-primary font-bold;
-      }
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/NavMobileDropdown';
 </style>

package/src/components/NavMobile/NavMobileLink.vue

@@ -55,15 +55,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.NavMobileLink {
-  span {
-    @apply border-b border-transparent;
-  }
-
-  .nuxt-link-active {
-    span {
-      @apply font-medium border-primary #{!important};
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/NavMobileLink';
 </style>

package/src/components/NavMobile/NavMobileSecondaryDropdown.vue

@@ -105,23 +105,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.NavMobileSecondaryDropdown {
-  .NavDropdownToggle {
-    span {
-      @apply border-b border-transparent;
-    }
-
-    &.-open {
-      span {
-        @apply border-gray-dark font-normal;
-      }
-    }
-
-    &.-active {
-      span {
-        @apply font-medium border-primary #{!important};
-      }
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/NavMobileSecondaryDropdown';
 </style>