@explorer-1/vue 0.2.104 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @explorer-1/vue
 
+## 0.3.0
+
+### Minor Changes
+
+- fb2e39d: Moving SCSS to dedicated files in packages/common
+
+### Patch Changes
+
+- Updated dependencies [fb2e39d]
+  - @explorer-1/common@1.2.0
+
 ## 0.2.104
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.2.104",
+  "version": "0.3.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -31,7 +31,7 @@
     "vue-bind-once": "^0.2.1",
     "vue3-compare-image": "^1.2.5",
     "vue3-observe-visibility": "^1.0.1",
-    "@explorer-1/common": "1.1.24"
+    "@explorer-1/common": "1.2.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",

package/src/components/AsteroidWatchWidget/AsteroidWatchWidget.vue

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

package/src/components/BaseAudio/BaseAudio.vue

@@ -338,52 +338,5 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-.BaseAudio {
-  @apply relative w-full;
-
-  .BaseAudio__stage {
-    @apply flex flex-row w-full;
-  }
-
-  .BaseAudio__playback-time-total {
-    @apply text-sm md:text-base pl-1 md:pl-3 text-right;
-  }
-
-  .BaseAudio__playback-time-current,
-  .BaseAudio__playback-time-total {
-    @screen sm {
-      min-width: 7ch;
-    }
-  }
-
-  .BaseAudio__rewind-forward {
-    @apply hidden sm:flex flex-row w-25 lg:w-35 mx-auto justify-between;
-
-    > button {
-      @apply opacity-100 hover:opacity-80;
-
-      svg {
-        @apply w-6 text-white;
-      }
-    }
-  }
-
-  .BaseAudio__playback-time-indicator {
-    &::after {
-      @apply h-4 bg-white block absolute w-1 -top-1 -right-1;
-
-      content: '';
-    }
-  }
-
-  .BaseAudio__extern-wrapper {
-    > button {
-      @apply mr-1 sm:-mt-2 lg:-mt-2.5 ml-2.5 opacity-100 hover:opacity-80;
-
-      svg {
-        @apply w-6;
-      }
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/BaseAudio';
 </style>

package/src/components/BaseCarousel/BaseCarousel.vue

@@ -107,46 +107,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-@import 'swiper/swiper-bundle.css';
-.BaseCarousel {
-  .swiper {
-    .swiper-prev {
-      @apply mr-px;
-    }
-
-    .swiper-prev,
-    .swiper-next {
-      &.swiper-button-disabled {
-        @apply opacity-75 cursor-default bg-none;
-      }
-    }
-  }
-
-  .swiper-nav {
-    padding-top: 56.25%;
-  }
-
-  // .swiper-dots {
-  //   padding-top: 56.25%;
-  //   @apply pointer-events-none;
-
-  //   .swiper-dot {
-  //     @apply inline-block px-1 py-3 cursor-pointer pointer-events-auto;
-
-  //     &:focus {
-  //       @apply outline-none ring-1;
-  //     }
-
-  //     > span {
-  //       @apply inline-block w-3 h-3 rounded-full bg-gray-light-mid;
-  //     }
-
-  //     &.swiper-dot-active {
-  //       > span {
-  //         @apply bg-primary;
-  //       }
-  //     }
-  //   }
-  // }
-}
+@import '@explorer-1/common/src/scss/components/BaseCarousel';
 </style>

package/src/components/BaseImagePlaceholder/BaseImagePlaceholder.vue

@@ -85,6 +85,6 @@ export default defineComponent({
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @import '@explorer-1/common/src/scss/components/BaseImagePlaceholder';
 </style>

package/src/components/BaseLightboxCloseButton/BaseLightboxCloseButton.vue

@@ -36,10 +36,5 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-.BaseLightboxCloseButton {
-  @apply bg-black z-50 px-px text-right w-full mb-auto;
-  @screen 2xl {
-    @apply w-auto -mr-20 -mt-5;
-  }
-}
+@import '@explorer-1/common/src/scss/components/BaseLightboxCloseButton';
 </style>

package/src/components/BaseLightboxOpenButton/BaseLightboxOpenButton.vue

@@ -35,12 +35,5 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-.BaseLightboxOpenButton {
-  // scoped styles for Lightbox Opener button
-  @apply relative lg:absolute lg:inset-0 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/BaseLightboxOpenButton';
 </style>

package/src/components/BaseModal/BaseModal.vue

@@ -49,6 +49,6 @@ export default defineComponent({
   }
 })
 </script>
-<style lang="scss" scoped>
+<style lang="scss">
 // styles go here
 </style>

package/src/components/BaseSwimlane/BaseSwimlane.vue

@@ -161,44 +161,6 @@ export default defineComponent({
 })
 </script>
 
-<style lang="scss" scoped>
-.BaseSwimlane {
-  @apply overflow-hidden;
-
-  -webkit-mask-image: -webkit-gradient(
-    linear,
-    left top,
-    left bottom,
-    color-stop(0, transparent),
-    color-stop(0.05, rgba(0, 0, 0, 0.35)),
-    color-stop(0.1, black),
-    color-stop(0.5, black),
-    color-stop(0.9, rgba(0, 0, 0, 0.15)),
-    color-stop(1, transparent)
-  );
-  @screen lg {
-    -webkit-mask-image: -webkit-gradient(
-      linear,
-      left top,
-      left bottom,
-      color-stop(0, transparent),
-      color-stop(0.1, rgba(0, 0, 0, 0.15)),
-      color-stop(0.35, black),
-      color-stop(0.65, black),
-      color-stop(0.9, rgba(0, 0, 0, 0.15)),
-      color-stop(1, transparent)
-    );
-  }
-
-  ul {
-    @apply list-none overflow-hidden transition-transform;
-
-    li {
-      @apply text-center p-0 m-0;
-      @screen lg {
-        @apply text-left font-medium;
-      }
-    }
-  }
-}
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/BaseSwimlane';
 </style>

package/src/components/BaseTimer/BaseTimer.vue

@@ -244,24 +244,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.BaseTimer {
-  .unit {
-    // Make the units dimmer than the numbers, regardless of which color it’s displayed with.
-    --text-opacity: 0.84;
-  }
-
-  &.-inline {
-    .text-stats-separator {
-      @apply hidden;
-    }
-
-    .text-seconds {
-      width: 2ch;
-    }
-
-    > span span {
-      @apply inline-block;
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/BaseTimer';
 </style>

package/src/components/BaseUnitToggle/BaseUnitToggle.vue

@@ -224,32 +224,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.BaseUnitToggle {
-  .unit {
-    // - Make the clickable areas much bigger than they appear for ease of interaction.
-    // - Hide the un-selected units from text selection, so copy-pasted text shows the correct unit.
-    @apply inline-block pt-3 pb-2 px-1 -my-2 -mx-1 leading-relaxed select-none;
-
-    // Make the units dimmer than the numbers, regardless of which color it’s displayed with.
-    --text-opacity: 0.84;
-  }
-
-  label:first-of-type .unit {
-    @apply pl-3 -ml-3;
-  }
-
-  label:last-of-type .unit {
-    @apply pr-3 -mr-3;
-  }
-
-  [type='radio']:focus + .unit {
-    @apply underline;
-  }
-
-  [type='radio']:checked + .unit {
-    @apply font-bold select-text;
-
-    --text-opacity: 1;
-  }
-}
+@import '@explorer-1/common/src/scss/components/BaseUnitToggle';
 </style>

package/src/components/BaseVideo/BaseVideo.vue

@@ -62,12 +62,5 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-.BaseVideo {
-  video {
-    min-width: 100%;
-    left: 0;
-    right: 0;
-    max-height: 901px;
-  }
-}
+@import '@explorer-1/common/src/scss/components/BaseVideo';
 </style>

package/src/components/BlockAccordion/BlockAccordion.vue

@@ -103,11 +103,5 @@ const remappedAccordionItems = computed((): AccordionItemObject[] | undefined =>
   </div>
 </template>
 <style lang="scss">
-.BlockAccordion {
-  .AccordionItemImage {
-    div.p-4 {
-      @apply px-0 #{!important};
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/BlockAccordion';
 </style>

package/src/components/BlockAnchor/BlockAnchor.vue

@@ -21,18 +21,5 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-// makes sure anchor links align with navigation's fixed overlay
-.BlockAnchor {
-  &::before {
-    @apply block invisible pointer-events-none;
-
-    content: ' ';
-    margin-top: -83px;
-    height: 83px;
-    @screen lg {
-      margin-top: -182px;
-      height: 182px;
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/BlockAnchor';
 </style>

package/src/components/BlockAudio/BlockAudio.vue

@@ -65,14 +65,5 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-.BlockAudio {
-  max-height: 480px;
-
-  .BlockAudio-thumbnail {
-    @apply hidden;
-    @media only screen and (min-width: 345px) {
-      @apply block;
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/BlockAudio';
 </style>

package/src/components/BlockCircleImageCard/BlockCircleImageCard.vue

@@ -99,22 +99,4 @@ export default defineComponent({
 </script>
 <style lang="scss">
 @import '@explorer-1/common/src/scss/components/BlockCircleImageCard';
-
-@media (forced-colors: active) {
-  .BlockCircleImageCard {
-    border: 1px solid;
-  }
-}
-
-.BlockCircleImageCard {
-  @apply md:z-40;
-}
-
-.BlockCircleImageCard .IconExternal {
-  @apply w-6 h-6 text-gray-mid-dark;
-}
-
-.BlockCircleImageCard .IconPlay {
-  @apply w-7 h-7 bg-jpl-red text-white;
-}
 </style>

package/src/components/BlockCsrTable/BlockCsrTable.vue

@@ -252,47 +252,6 @@ const onFilterTextBoxChanged = () => {
     </div>
   </client-only>
 </template>
-<style type="scss">
-.BlockCsrTable {
-  .MainCsrTable .ag-root {
-    @apply overflow-x-auto;
-    min-height: 75rem;
-    .ag-body {
-      min-width: 40rem;
-    }
-    .ag-header,
-    .ag-header-viewport {
-      @apply overflow-visible;
-    }
-  }
-  .ag-cell {
-    padding-left: 0.6rem;
-    padding-right: 0.6rem;
-    @screen lg {
-      padding-left: 1.2rem;
-      padding-right: 1.2rem;
-    }
-  }
-  .ag-root-wrapper,
-  .ag-cell,
-  .ag-theme-params-1 {
-    @apply font-primary;
-  }
-  .ag-cell-wrap-text {
-    line-height: 1.25rem;
-    padding-top: 0.75rem;
-    padding-bottom: 0.75rem;
-  }
-  .ag-filter-filter {
-    .ag-wrapper::before {
-      @apply hidden;
-    }
-    .ag-input-field-input {
-      @apply text-xs;
-    }
-  }
-  .ag-paging-row-summary-panel {
-    @apply whitespace-nowrap;
-  }
-}
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/BlockCsrTable';
 </style>

package/src/components/BlockCsrTable/CsrTestLimitsTable.vue

@@ -72,19 +72,5 @@ const defaultcolDef = {
   </ag-grid-vue>
 </template>
 <style lang="scss">
-.CsrTestLimitsTable {
-  .ag-root {
-    @apply min-h-12 overflow-x-auto;
-    .ag-body {
-      min-width: 40rem;
-    }
-    .ag-header,
-    .ag-header-viewport {
-      @apply overflow-visible;
-    }
-  }
-  .ag-root-wrapper {
-    @apply overflow-visible;
-  }
-}
+@import '@explorer-1/common/src/scss/components/CsrTestLimitsTable';
 </style>

package/src/components/BlockDialog/BlockDialog.vue

@@ -102,30 +102,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.BlockDialog {
-  // Make sure the dialog container and all its descendants are not visible and not focusable when it is hidden.
-  &[aria-hidden='true'] {
-    display: none;
-  }
-
-  @media (forced-colors: active) {
-    .dialog-box {
-      border: 1px solid;
-    }
-  }
-
-  .dialog-overlay,
-  .dialog-box {
-    @apply animate-fadeIn;
-
-    @media (prefers-reduced-motion: reduce) {
-      animation: none;
-    }
-  }
-
-  // Offset by the size of the icon.
-  .button-close {
-    top: -2rem;
-  }
-}
+@import '@explorer-1/common/src/scss/components/BlockDialog';
 </style>

package/src/components/BlockGist/BlockGist.vue

@@ -102,29 +102,6 @@ watch(
   </div>
 </template>
 
-<style scoped lang="scss">
-.BlockGist {
-  .GitHubIcon {
-    @apply h-5 pb-0.5 flex flex-row items-baseline flex-grow-0;
-  }
-
-  iframe {
-    @apply border border-gray-light-mid border-t-8 rounded-none;
-  }
-}
-body.ThemeVariantLight {
-  .BlockGist {
-    iframe {
-      @apply border-gray-light-mid;
-    }
-  }
-}
-
-body.ThemeVariantDark {
-  .BlockGist {
-    iframe {
-      @apply border-gray-mid-dark bg-gray-light;
-    }
-  }
-}
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/BlockGist';
 </style>

package/src/components/BlockHeading/BlockHeading.vue

@@ -53,12 +53,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.BlockHeading {
-  &:target {
-    @apply scroll-mt-14;
-    @screen lg {
-      @apply scroll-mt-[7rem];
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/BlockHeading';
 </style>

package/src/components/BlockLinkCard/BlockLinkCard.vue

@@ -405,33 +405,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.BlockLinkCard {
-  .text-subtitle.divide-x {
-    @apply leading-none #{!important};
-  }
-  .ThemeVariantDark & {
-    @apply bg-white;
-    .BlockLinkCard__CardContent,
-    .BlockLinkCard__CardArrow {
-      @apply px-6;
-      @apply print:px-0;
-    }
-    .BaseImagePlaceholder {
-      @apply bg-gray-mid-dark;
-    }
-  }
-  .MetadataEvent,
-  .MetadataEduResource {
-    &.-compact {
-      .MetadataEventItem,
-      .MetadataEduResourceItem {
-        @apply mr-2.5;
-      }
-    }
-    .MetadataEventIcon,
-    .MetadataEduResourceIcon {
-      @apply mr-1;
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/BlockLinkCard';
 </style>

package/src/components/BlockLinkCard/BlockLinkCardCollectionLg.vue

@@ -119,14 +119,5 @@ const isSmall = computed(() => {
   </BaseLink>
 </template>
 <style lang="scss">
-.BlockLinkCardCollectionLg {
-  .MetadataEduResource .MetadataEduResourceItem {
-    .MetadataEduResourceIcon {
-      @apply text-white;
-    }
-    span {
-      @apply text-white;
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/BlockLinkCardCollectionLg';
 </style>

package/src/components/BlockLinkCardList/BlockLinkCardList.vue

@@ -23,11 +23,5 @@ const props = withDefaults(defineProps<BlockLinkCardListProps>(), {
   </div>
 </template>
 <style lang="scss">
-.BlockLinkCardList {
-  .BlockLinkCard {
-    div.bg-gray-dark.relative.mb-6 {
-      @apply mb-3 #{!important};
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/BlockLinkCardList';
 </style>

package/src/components/BlockLinkTile/BlockLinkTile.vue

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

package/src/components/BlockNewsletterSignup/BlockNewsletterSignup.vue

@@ -162,16 +162,6 @@ export default defineComponent({
   }
 })
 </script>
-<style type="scss">
-.BlockNewsletterSignup {
-  fieldset > div {
-    column-count: 2;
-  }
-  .email-container input {
-    @apply mt-0 -mr-1;
-  }
-  .BaseRadioGroup label {
-    @apply text-base text-left;
-  }
-}
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/BlockNewsletterSignup';
 </style>

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>