@explorer-1/vue 0.2.103 → 0.3.0

package/src/components/BlockStreamfield/BlockStreamfield.vue

@@ -391,32 +391,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.BlockStreamfield {
-  // makes everything appear equal width
-  &.-fluid {
-    .LayoutHelper {
-      @apply block;
-      &.container {
-        @apply px-0;
-      }
-      > div.lg\:px-0.px-4 {
-        @apply px-0;
-      }
-    }
-
-    .BlockInlineImage {
-      .col-start-3 {
-        @apply col-start-1 col-span-7;
-      }
-
-      .col-start-6.col-span-5 {
-        @apply col-span-7;
-      }
-    }
-
-    .p-4.caption-area {
-      @apply px-0;
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/BlockStreamfield';
 </style>

package/src/components/FormNewsletterSignup/FormNewsletterSignup.vue

@@ -86,15 +86,6 @@
                 :options="emailGroups"
               />
             </div>
-            <div class="mt-8">
-              <BaseCheckboxGroup
-                heading="JPL Education Updates"
-                sub-heading="The JPL Education Office also offers email updates about classroom activities and workshops for educators, projects and competitons for K-12 students and internship opportunities at JPL and NASA."
-                group="education"
-                title="Education Email Groups"
-                :options="eduEmailGroups"
-              />
-            </div>
           </div>
           <div class="mt-4 lg:mt-8 submit-container">
             <BaseButton
@@ -131,7 +122,6 @@ import LayoutHelper from './../LayoutHelper/LayoutHelper.vue'
 import BaseHeading from './../BaseHeading/BaseHeading.vue'
 import BaseButton from './../BaseButton/BaseButton.vue'
 import BaseRadioGroup from './../BaseRadioGroup/BaseRadioGroup.vue'
-import BaseCheckboxGroup from './../BaseCheckboxGroup/BaseCheckboxGroup.vue'
 import TextInput from './../TextInput/TextInput.vue'
 
 const iContactForm =
@@ -177,48 +167,12 @@ const emailGroups = [
   }
 ]
 
-const eduEmailGroups = [
-  {
-    id: 'educators',
-    title: 'Educators',
-    text: null,
-    value: '21583',
-    alt: 'Lists',
-    name: 'data[listGroups][]'
-  },
-  {
-    id: 'educator-workshop',
-    title: 'Educators Workshops',
-    text: 'Southern California',
-    value: '51343',
-    alt: 'Lists',
-    name: 'data[listGroups][]'
-  },
-  {
-    id: 'students',
-    title: 'Students K-12',
-    text: null,
-    value: '29483',
-    alt: 'Lists',
-    name: 'data[listGroups][]'
-  },
-  {
-    id: 'internships',
-    title: 'Internships',
-    text: null,
-    value: '29484',
-    alt: 'Lists',
-    name: 'data[listGroups][]'
-  }
-]
-
 export default defineComponent({
   name: 'FormNewsletterSignup',
   components: {
     LayoutHelper,
     BaseHeading,
     BaseButton,
-    BaseCheckboxGroup,
     BaseRadioGroup,
     TextInput
   },
@@ -229,8 +183,7 @@ export default defineComponent({
       iContactForm,
       iContactTrackingGif,
       captchaKey,
-      emailGroups,
-      eduEmailGroups
+      emailGroups
     }
   },
   mounted() {
@@ -302,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>