@explorer-1/vue 0.2.104 → 0.3.0

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

@@ -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>

package/src/components/TopicDetailMissionSpotlight/TopicDetailMissionSpotlight.vue

@@ -92,21 +92,6 @@ export default defineComponent({
   }
 })
 </script>
-<style lang="scss" scoped>
-.TopicDetailMissionSpotlight {
-  .content-wrapper {
-    @screen lg {
-      min-height: 548px; // maintains 1440x770 aspect ratio
-    }
-    @screen xl {
-      min-height: 684px; // maintains 1440x770 aspect ratio
-    }
-    @screen 2xl {
-      min-height: 770px; // 1440x770
-    }
-    @screen 3xl {
-      min-height: 963px; // maintains 1440x770 aspect ratio
-    }
-  }
-}
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/TopicDetailMissionSpotlight';
 </style>

package/src/components/TopicDetailMoreItem/TopicDetailMoreItem.vue

@@ -126,9 +126,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.TopicDetailMoreItem {
-  .text-subtitle.divide-x {
-    @apply leading-none #{!important};
-  }
-}
+@import '@explorer-1/common/src/scss/components/TopicDetailMoreItem';
 </style>

package/src/components/YearTicker/YearTicker.vue

@@ -54,87 +54,5 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-.YearTicker {
-  @apply sticky transform text-gray-light-mid translate-x-0.5 md:translate-x-0 ml-7 md:ml-8 lg:ml-30 pt-10 md:pt-5;
-
-  // Unitless 0 isn’t supported in a `calc` operation.
-  // stylelint-disable-next-line length-zero-no-unit
-  --top-offset: 0px;
-
-  font-variant-numeric: tabular-nums;
-  font-weight: 900;
-  line-height: 1;
-  font-size: min(5rem, 25vw);
-  // Secondary nav minus gap.
-  top: calc(theme('spacing.16') - 1px + var(--top-offset));
-  z-index: 50;
-
-  @screen md {
-    --top-offset: theme('spacing.20');
-
-    z-index: -20;
-    font-size: min(8rem, 20vw);
-  }
-
-  @screen lg {
-    font-size: min(11.25rem, 10vw);
-  }
-
-  @screen xl {
-    font-size: min(11.25rem, 25vw);
-  }
-
-  .header-sticky-showing & {
-    // For the mobile viewport, offset by the height of the top header and NavSecondary combined.
-    top: calc(theme('spacing.18') + theme('spacing.16') + var (--top-offset));
-  }
-
-  &::after {
-    @apply md:hidden;
-
-    content: '';
-    position: absolute;
-    z-index: -10;
-    top: 2px;
-    left: 0;
-    width: 100%;
-    height: 140px;
-    pointer-events: none;
-    background-image: linear-gradient(to bottom, white 90%, transparent);
-  }
-
-  > span {
-    display: inline-grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr;
-    overflow: hidden;
-  }
-
-  .Digit {
-    grid-area: 1 / 1 / 1 / 1;
-    transition: transform var(--duration);
-    transform: translateY(0);
-
-    @media (prefers-reduced-motion: reduce) {
-      transition-duration: 0.1ms;
-    }
-  }
-
-  // transitions
-  .digits-decrement-enter-active {
-    transform: translateY(100%);
-  }
-
-  .digits-decrement-leave-active {
-    transform: translateY(-100%);
-  }
-
-  .digits-increment-enter-active {
-    transform: translateY(-100%);
-  }
-
-  .digits-increment-leave-active {
-    transform: translateY(100%);
-  }
-}
+@import '@explorer-1/common/src/scss/components/YearTicker';
 </style>