@explorer-1/vue 0.2.103 → 0.3.0

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>

package/src/components/NavSearchForm/NavSearchForm.vue

@@ -55,43 +55,5 @@ const submitSearch = () => {
   </form>
 </template>
 <style lang="scss">
-.NavSearchForm {
-  ::placeholder {
-    @apply text-gray-dark;
-  }
-
-  .-transparent & {
-    ::placeholder {
-      @apply text-white;
-    }
-  }
-
-  .-transparent.-scrolled & {
-    ::placeholder {
-      @apply text-gray-dark;
-    }
-  }
-  @screen lg {
-    // remove the default styling of search field
-    input[type='search']::-ms-clear {
-      display: none;
-      width: 0;
-      height: 0;
-    }
-
-    input[type='search']::-ms-reveal {
-      display: none;
-      width: 0;
-      height: 0;
-    }
-
-    /* clears the 'X' from Chrome */
-    input[type='search']::-webkit-search-decoration,
-    input[type='search']::-webkit-search-cancel-button,
-    input[type='search']::-webkit-search-results-button,
-    input[type='search']::-webkit-search-results-decoration {
-      display: none;
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/NavSearchForm';
 </style>

package/src/components/NavSecondary/NavSecondary.vue

@@ -187,60 +187,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.NavSecondary {
-  top: -1px; // for intersection observer to work
-  @apply sticky z-40 w-full bg-white border-b border-gray-mid border-opacity-0 transition-border-opacity duration-150 edu:duration-300 ease-in;
-  @apply hidden;
-  @screen lg {
-    @apply block;
-  }
-
-  &.has-intro {
-    .nav-secondary-container {
-      @apply border-gray-mid border-opacity-0;
-    }
-  }
-
-  &.-is-sticky {
-    @apply border-gray-mid border-opacity-50;
-  }
-
-  .secondary-root {
-    .nuxt-link-exact-active {
-      span {
-        @apply text-primary font-semibold #{!important};
-      }
-    }
-  }
-
-  // for that nice horizontal scroll on mobile
-  .overflow-x-auto {
-    scrollbar-width: thin;
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
-  }
-
-  // change sticky point if global nav is showing
-  .header-sticky-showing & {
-    @apply top-18;
-    @screen lg {
-      @apply top-28;
-    }
-
-    &.-scrolled-up {
-      @apply border-gray-mid border-opacity-50;
-      .nav-secondary-container {
-        @apply border-gray-mid border-opacity-50;
-      }
-    }
-  }
-}
-// since we depend on a body class, the edu: prefix won't work as usual and requires the below line
-body.header-sticky-showing .ThemeEdu .NavSecondary {
-  @screen lg {
-    @apply top-[4.45rem];
-  }
-}
+@import '@explorer-1/common/src/scss/components/NavSecondary';
 </style>

package/src/components/NavSecondary/NavSecondaryDropdown.vue

@@ -143,73 +143,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.NavSecondaryDropdown {
-  .NavDropdownToggle {
-    &.-open {
-      > span {
-        @apply border-black text-gray-dark #{!important};
-      }
-      &.-invert {
-        > span {
-          @apply border-white text-white #{!important};
-        }
-      }
-    }
-
-    &.-active {
-      > span {
-        @apply font-bold text-gray-dark;
-        @apply border-primary #{!important};
-      }
-      &.-invert {
-        > span {
-          @apply text-white;
-          @apply border-white #{!important};
-        }
-      }
-    }
-    &:hover {
-      &.-active {
-        > span {
-          @apply text-gray-mid-dark;
-        }
-        &.-invert {
-          > span {
-            @apply text-white;
-          }
-        }
-      }
-    }
-  }
-  // transitions
-  .navfade-enter-to,
-  .navfade-enter-active {
-    @apply transition-all ease-out transform duration-200;
-  }
-
-  .navfade-leave-active,
-  .navfade-leave-to {
-    @apply transition-all ease-out transform duration-200;
-  }
-
-  .navfade-enter-active {
-    @apply opacity-0;
-    @apply -translate-y-2;
-  }
-
-  .navfade-enter-to {
-    @apply opacity-100;
-    @apply translate-y-0;
-  }
-
-  .navfade-leave-to {
-    @apply opacity-100;
-    @apply translate-y-0;
-  }
-
-  .navfade-leave-active {
-    @apply opacity-0;
-    @apply -translate-y-2;
-  }
-}
+@import '@explorer-1/common/src/scss/components/NavSecondaryDropdown';
 </style>

package/src/components/NavSecondary/NavSecondaryDropdownContent.vue

@@ -122,25 +122,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.NavSecondaryDropdownContent {
-  a {
-    @apply block pl-18 pr-6 lg:pl-6 text-black;
-
-    > span {
-      @apply border-b border-transparent pb-2px;
-    }
-
-    &:hover {
-      > span {
-        @apply border-black text-black;
-      }
-    }
-
-    &.nuxt-link-active {
-      > span {
-        @apply border-primary font-medium;
-      }
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/NavSecondaryDropdownContent';
 </style>

package/src/components/NavSecondary/NavSecondaryLink.vue

@@ -72,20 +72,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.NavSecondaryLink {
-  .nuxt-link-exact-active {
-    span {
-      @apply font-bold text-gray-dark;
-      @apply border-primary #{!important};
-    }
-  }
-  &.-invert {
-    .nuxt-link-exact-active {
-      span {
-        @apply font-bold text-white;
-        @apply border-white #{!important};
-      }
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/NavSecondaryLink.scss';
 </style>

package/src/components/NavSocial/NavSocial.vue

@@ -107,19 +107,6 @@ export default defineComponent({
   }
 })
 </script>
-<style lang="scss" scoped>
-.BaseButton {
-  @apply relative;
-  &:hover {
-    @apply z-10;
-  }
-  // we have to define these here to override the extracted border styles native to BaseButton
-  &.-dark {
-    @apply border-l-0 #{!important};
-
-    &:first-child {
-      @apply border-l #{!important};
-    }
-  }
-}
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/NavSocial';
 </style>

package/src/components/PodcastEpisodeCard/PodcastEpisodeCard.vue

@@ -240,12 +240,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.PodcastEpisodeCard {
-  .PodcastEpisodeCard-thumbnail {
-    @apply hidden;
-    @media only screen and (min-width: 325px) {
-      @apply block;
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/PodcastEpisodeCard';
 </style>

package/src/components/RoboticsDetailStats/RoboticsDetailStats.vue

@@ -209,9 +209,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.RoboticsDetailStats {
-  .label {
-    @apply font-semibold mb-4 text-jpl-red-dark;
-  }
-}
+@import '@explorer-1/common/src/scss/components/RoboticsDetailStats';
 </style>

package/src/components/RoboticsDetailStats/RoboticsDetailStatsMini.vue

@@ -174,9 +174,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.RoboticsDetailStatsMini {
-  > .stat {
-    min-width: 5ch;
-  }
-}
+@import '@explorer-1/common/src/scss/components/RoboticsDetailStatsMini';
 </style>

package/src/components/SearchFilterGroupAccordionItem/SearchFilterGroupAccordionItem.vue

@@ -81,9 +81,5 @@ const emit = defineEmits(['filterGroupAccordionItemOpened', 'filterGroupAccordio
   </div>
 </template>
 <style lang="scss">
-.SearchFilterGroupAccordionItemContent {
-  input.mt-px {
-    @apply mt-0 #{!important};
-  }
-}
+@import '@explorer-1/common/src/scss/components/SearchFilterGroupAccordionItem';
 </style>

package/src/components/SearchInput/SearchInput.vue

@@ -42,7 +42,7 @@ onMounted(() => {
       * on pages (such as the search page and listing pages)
       * for site-wide search -->
   <div
-    class="relative flex items-center"
+    class="relative flex items-center SearchInput"
     :class="{
       'border border-gray-mid': defaultColors && !underlinedInput,
       'custom-focus': underlinedInput
@@ -94,11 +94,6 @@ onMounted(() => {
     </button>
   </div>
 </template>
-<style lang="scss" scoped>
-.custom-focus {
-  input {
-    outline: none;
-    box-shadow: none;
-  }
-}
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/SearchInput';
 </style>

package/src/components/SearchPagination/SearchPagination.vue

@@ -161,13 +161,5 @@ export default {
 }
 </script>
 <style lang="scss">
-.SearchPagination {
-  .-current {
-    @apply font-medium;
-
-    span {
-      @apply border-primary border-b-2;
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/SearchPagination';
 </style>

package/src/components/ShareButtons/ShareButtons.vue

@@ -120,13 +120,6 @@ export default defineComponent({
   }
 })
 </script>
-<style lang="scss" scoped>
-.ShareButtons {
-  .BaseButton {
-    @apply relative;
-    &:hover {
-      @apply z-10;
-    }
-  }
-}
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/ShareButtons';
 </style>

package/src/components/ShareButtonsEdu/ShareButtonsEdu.vue

@@ -198,23 +198,5 @@ const buttonClass = computed(() => {
   </div>
 </template>
 <style lang="scss">
-.ShareButtonsEdu {
-  .BaseButton {
-    @apply relative focus:z-20;
-    &:hover {
-      @apply z-20;
-    }
-  }
-  .share-buttons-list {
-    .BaseButton.-social {
-      @apply h-10 xl:h-11 py-0 px-2 lg:px-3 #{!important};
-      span.text-xs {
-        @apply whitespace-nowrap;
-      }
-      .label {
-        @apply justify-start xl:justify-center;
-      }
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/ShareButtonsEdu';
 </style>

package/src/components/SwimlaneCTA/SwimlaneCTA.vue

@@ -255,38 +255,5 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-// SwimlaneCTA Scoped Styles
-.SwimlaneCTA {
-  @apply max-w-screen-3xl animate-fadeIn relative items-center justify-center object-cover w-full mx-auto bg-center bg-no-repeat bg-cover select-none;
-
-  min-height: 245px;
-
-  @screen lg {
-    min-height: 595px;
-  }
-
-  * {
-    @apply animate-fadeInSlow;
-  }
-
-  &.light-theme {
-    @apply bg-gray-light text-gray-dark;
-
-    ul {
-      li {
-        @apply text-gray-dark;
-      }
-    }
-  }
-
-  &.dark-theme {
-    @apply bg-black text-white;
-
-    ul {
-      li {
-        @apply text-white;
-      }
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/SwimlaneCTA';
 </style>

package/src/components/TheFooter/TheFooter.vue

@@ -46,7 +46,7 @@
       <div class="footer-extras lg:col-span-3 col-span-12">
         <!-- email sign up -->
         <div class="text-subtitle text-blue edu:text-white lg:mb-5 mb-3">
-          {{ `Get the Latest from JPL ${themeStore.isEdu ? 'Education' : ''} ` }}
+          Get the Latest from JPL
         </div>
         <TheFooterSignUp class="lg:mb-10 mb-8" />
         <!-- social media -->
@@ -236,23 +236,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.TheFooter {
-  .auto-col-2 {
-    @screen sm {
-      column-count: 2;
-    }
-  }
-
-  .auto-col-4 {
-    @screen sm {
-      column-count: 2;
-    }
-    @screen lg {
-      column-count: 3;
-    }
-    @screen 2xl {
-      column-count: 4;
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/TheFooter';
 </style>

package/src/components/TheFooter/TheFooterSignUp.vue

@@ -53,9 +53,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.TheFooterSignup {
-  .EmailInput::placeholder {
-    @apply text-white text-opacity-40;
-  }
-}
+@import '@explorer-1/common/src/scss/components/TheFooterSignUp';
 </style>

package/src/components/ThumbnailCarousel/ThumbnailCarousel.vue

@@ -48,29 +48,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.ThumbnailCarousel {
-  &.-cards {
-    .swiper {
-      .swiper-navigation {
-        padding-top: 29.5%;
-
-        .swiper-prev,
-        .swiper-next {
-          @apply transform -translate-y-1/2;
-        }
-      }
-    }
-  }
-
-  .nuxt-link-exact-active {
-    > p {
-      @apply font-semibold;
-
-      span {
-        padding-bottom: 0.2rem;
-        @apply border-b-2 border-jpl-red;
-      }
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/ThumbnailCarousel';
 </style>

package/src/components/TimelineDialog/TimelineDialog.vue

@@ -122,24 +122,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.Dialog {
-  .dialog-main {
-    max-height: 55vh;
-
-    /* Fade effect */
-    mask-image: linear-gradient(
-      to bottom,
-      transparent 0%,
-      black 1rem,
-      black calc(100% - 1rem),
-      transparent 100%
-    );
-  }
-
-  @media (forced-colors: active) {
-    hr {
-      border: 1px solid;
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/TimelineDialog';
 </style>