@phillips/seldon 1.279.2 → 1.280.0

package/dist/scss/components/Divider/_divider.scss

@@ -1,17 +1,20 @@
 @use '../../allPartials' as *;
+@use '../../layers';
 
-.#{$px}-divider {
-  margin: $spacing-sm 0;
+@layer seldon.components {
+  .#{$px}-divider {
+    margin: $spacing-sm 0;
 
-  &-line {
-    background-color: $bg-border;
-    border: none;
-    border-top: 1px solid $bg-border;
-    color: $bg-border;
-    display: block;
-    height: 1px;
-    margin: 1em 0;
-    padding: 0;
-    width: 100%;
+    &-line {
+      background-color: $bg-border;
+      border: none;
+      border-top: 1px solid $bg-border;
+      color: $bg-border;
+      display: block;
+      height: 1px;
+      margin: 1em 0;
+      padding: 0;
+      width: 100%;
+    }
   }
 }

package/dist/scss/components/Drawer/_drawer.scss

@@ -1,248 +1,251 @@
 @use '../../allPartials' as *;
+@use '../../layers';
 
-.#{$px}-drawer {
-  align-items: center;
-  background-color: $white-100;
-  display: flex;
-  flex-direction: column;
-  height: 100dvh;
-  max-width: 480px;
-  position: fixed;
-  right: 0;
-  top: 0;
-  width: 100%;
-  z-index: 10;
-
-  &:focus {
-    outline: none;
-  }
-
-  @media (max-width: $breakpoint-sm) {
-    max-width: 100%;
-  }
-
-  @media (max-width: $breakpoint-md) {
-    padding-bottom: $padding-sm;
-  }
-
-  &__close {
+@layer seldon.components {
+  .#{$px}-drawer {
     align-items: center;
-    border-radius: $radius-3xl;
-    color: $pure-black;
-    display: inline-flex;
-    justify-content: center;
-    position: absolute;
-    right: 10px;
-    top: 10px;
-    z-index: 10;
-  }
-
-  &__overlay {
-    background-color: $black-75;
-    inset: 0;
+    background-color: $white-100;
+    display: flex;
+    flex-direction: column;
+    height: 100dvh;
+    max-width: 480px;
     position: fixed;
+    right: 0;
+    top: 0;
+    width: 100%;
     z-index: 10;
-  }
 
-  // Bottom sheet modifier
-  &--bottom {
-    border-radius: $radius-md $radius-md 0 0;
-    box-shadow: 0 -2px 16px rgba($pure-black, 0.08);
-    height: auto;
-    inset: auto 0 0;
-    max-width: 100%;
-    min-height: 30vh;
-    width: 100%;
+    &:focus {
+      outline: none;
+    }
 
     @media (max-width: $breakpoint-sm) {
       max-width: 100%;
     }
-  }
-
-  &__bottom-content {
-    align-items: center;
-    border-bottom: 1px solid $medium-gray;
-    display: flex;
-    margin-bottom: $spacing-sm;
-    width: 100%;
 
-    &--label {
-      flex: 1;
-      font-variation-settings: 'wght' 600;
-      margin: $spacing-md;
-      padding-right: $spacing-xxxl;
-      text-align: center;
-      width: fit-content;
+    @media (max-width: $breakpoint-md) {
+      padding-bottom: $padding-sm;
     }
-  }
-
-  &__content {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    overflow: hidden;
-    overflow-y: auto;
-    padding-top: $snowflake-menu-padding;
-    width: 100%;
-
-    // different designs require different padding (ep = extra padding). more info in the component.
 
-    &--ep0 {
-      padding-top: 0;
+    &__close {
+      align-items: center;
+      border-radius: $radius-3xl;
+      color: $pure-black;
+      display: inline-flex;
+      justify-content: center;
+      position: absolute;
+      right: 10px;
+      top: 10px;
+      z-index: 10;
     }
 
-    &--ep1 {
-      padding: 1rem;
-      padding-top: $snowflake-menu-padding;
+    &__overlay {
+      background-color: $black-75;
+      inset: 0;
+      position: fixed;
+      z-index: 10;
     }
 
-    &--ep2 {
-      padding: 2rem;
+    // Bottom sheet modifier
+    &--bottom {
+      border-radius: $radius-md $radius-md 0 0;
+      box-shadow: 0 -2px 16px rgba($pure-black, 0.08);
+      height: auto;
+      inset: auto 0 0;
+      max-width: 100%;
+      min-height: 30vh;
+      width: 100%;
+
+      @media (max-width: $breakpoint-sm) {
+        max-width: 100%;
+      }
     }
 
-    &--ep3 {
-      padding: 3rem;
-      padding-top: $snowflake-menu-padding;
+    &__bottom-content {
+      align-items: center;
+      border-bottom: 1px solid $medium-gray;
+      display: flex;
+      margin-bottom: $spacing-sm;
+      width: 100%;
+
+      &--label {
+        flex: 1;
+        font-variation-settings: 'wght' 600;
+        margin: $spacing-md;
+        padding-right: $spacing-xxxl;
+        text-align: center;
+        width: fit-content;
+      }
     }
 
-    // make the children scroll in their little children box
-    > * {
+    &__content {
+      align-items: center;
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      overflow: hidden;
       overflow-y: auto;
-    }
-  }
-}
+      padding-top: $snowflake-menu-padding;
+      width: 100%;
 
-// Drawer open/close animations
-.#{$px}-drawer[data-state='open'] {
-  animation: content-show $drawer-content-transition;
-}
+      // different designs require different padding (ep = extra padding). more info in the component.
 
-.#{$px}-drawer[data-state='closed'] {
-  animation: content-close $drawer-content-transition;
-}
+      &--ep0 {
+        padding-top: 0;
+      }
 
-// Overlay animations
-.#{$px}-drawer__overlay[data-state='open'] {
-  animation: overlay-show $default-overlay-transition;
-}
+      &--ep1 {
+        padding: 1rem;
+        padding-top: $snowflake-menu-padding;
+      }
 
-.#{$px}-drawer__overlay[data-state='closed'] {
-  animation: overlay-close $default-overlay-transition;
-}
+      &--ep2 {
+        padding: 2rem;
+      }
 
-// Drawer left side
-.#{$px}-drawer[data-side='left'][data-state='open'] {
-  animation: content-show-left $drawer-content-transition;
-}
+      &--ep3 {
+        padding: 3rem;
+        padding-top: $snowflake-menu-padding;
+      }
 
-.#{$px}-drawer[data-side='left'][data-state='closed'] {
-  animation: content-close-left $drawer-content-transition;
-}
-
-.#{$px}-drawer[data-side='left'] {
-  left: 0;
-  right: auto;
-}
-
-// Drawer bottom sheet animations
-.#{$px}-drawer--bottom[data-state='open'] {
-  animation: bottom-sheet-content-show $drawer-content-transition;
-}
+      // make the children scroll in their little children box
+      > * {
+        overflow-y: auto;
+      }
+    }
+  }
 
-.#{$px}-drawer--bottom[data-state='closed'] {
-  animation: bottom-sheet-content-close $drawer-content-transition;
-}
+  // Drawer open/close animations
+  .#{$px}-drawer[data-state='open'] {
+    animation: content-show $drawer-content-transition;
+  }
 
-// Keyframes
-@keyframes content-show {
-  from {
-    opacity: 0;
-    transform: translateX(100%);
+  .#{$px}-drawer[data-state='closed'] {
+    animation: content-close $drawer-content-transition;
   }
 
-  to {
-    opacity: 1;
-    transform: translateX(0);
+  // Overlay animations
+  .#{$px}-drawer__overlay[data-state='open'] {
+    animation: overlay-show $default-overlay-transition;
   }
-}
 
-@keyframes content-close {
-  from {
-    opacity: 1;
-    transform: translateX(0);
+  .#{$px}-drawer__overlay[data-state='closed'] {
+    animation: overlay-close $default-overlay-transition;
   }
 
-  to {
-    opacity: 0;
-    transform: translateX(100%);
+  // Drawer left side
+  .#{$px}-drawer[data-side='left'][data-state='open'] {
+    animation: content-show-left $drawer-content-transition;
   }
-}
 
-@keyframes content-show-left {
-  from {
-    opacity: 0;
-    transform: translateX(-100%);
+  .#{$px}-drawer[data-side='left'][data-state='closed'] {
+    animation: content-close-left $drawer-content-transition;
   }
 
-  to {
-    opacity: 1;
-    transform: translateX(0);
+  .#{$px}-drawer[data-side='left'] {
+    left: 0;
+    right: auto;
   }
-}
 
-@keyframes content-close-left {
-  from {
-    opacity: 1;
-    transform: translateX(0);
+  // Drawer bottom sheet animations
+  .#{$px}-drawer--bottom[data-state='open'] {
+    animation: bottom-sheet-content-show $drawer-content-transition;
   }
 
-  to {
-    opacity: 0;
-    transform: translateX(-100%);
+  .#{$px}-drawer--bottom[data-state='closed'] {
+    animation: bottom-sheet-content-close $drawer-content-transition;
   }
-}
 
-@keyframes bottom-sheet-content-show {
-  from {
-    opacity: 0;
-    transform: translateY(100%);
+  // Keyframes
+  @keyframes content-show {
+    from {
+      opacity: 0;
+      transform: translateX(100%);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
   }
 
-  to {
-    opacity: 1;
-    transform: translateY(0);
+  @keyframes content-close {
+    from {
+      opacity: 1;
+      transform: translateX(0);
+    }
+
+    to {
+      opacity: 0;
+      transform: translateX(100%);
+    }
   }
-}
 
-@keyframes bottom-sheet-content-close {
-  from {
-    opacity: 1;
-    transform: translateY(0);
+  @keyframes content-show-left {
+    from {
+      opacity: 0;
+      transform: translateX(-100%);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
   }
 
-  to {
-    opacity: 0;
-    transform: translateY(100%);
+  @keyframes content-close-left {
+    from {
+      opacity: 1;
+      transform: translateX(0);
+    }
+
+    to {
+      opacity: 0;
+      transform: translateX(-100%);
+    }
   }
-}
 
-@keyframes overlay-show {
-  from {
-    opacity: 0;
+  @keyframes bottom-sheet-content-show {
+    from {
+      opacity: 0;
+      transform: translateY(100%);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
   }
 
-  to {
-    opacity: 1;
+  @keyframes bottom-sheet-content-close {
+    from {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    to {
+      opacity: 0;
+      transform: translateY(100%);
+    }
   }
-}
 
-@keyframes overlay-close {
-  from {
-    opacity: 1;
+  @keyframes overlay-show {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
   }
 
-  to {
-    opacity: 0;
+  @keyframes overlay-close {
+    from {
+      opacity: 1;
+    }
+
+    to {
+      opacity: 0;
+    }
   }
 }

package/dist/scss/components/Drawer/_drawerHeader.scss

@@ -1,38 +1,41 @@
 @use '../../allPartials' as *;
+@use '../../layers';
 
-.#{$px}-drawer-header {
-  align-items: center;
-  display: flex;
-  padding: $margin-sm $margin-xsm;
-  width: 100%;
-
-  &__bookend {
+@layer seldon.components {
+  .#{$px}-drawer-header {
+    align-items: center;
     display: flex;
-    flex: 1 1 0;
+    padding: $margin-sm $margin-xsm;
+    width: 100%;
 
-    &-right {
-      justify-content: flex-end;
-    }
+    &__bookend {
+      display: flex;
+      flex: 1 1 0;
 
-    &-left {
-      justify-content: flex-start;
+      &-right {
+        justify-content: flex-end;
+      }
+
+      &-left {
+        justify-content: flex-start;
+      }
     }
-  }
 
-  &__hr {
-    border-bottom: 2px solid $light-gray;
-    width: 100%;
-  }
+    &__hr {
+      border-bottom: 2px solid $light-gray;
+      width: 100%;
+    }
 
-  &__title {
-    font-variation-settings: 'wght' 600;
-    overflow: hidden;
-    text-align: center;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
+    &__title {
+      font-variation-settings: 'wght' 600;
+      overflow: hidden;
+      text-align: center;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
 
-  .#{$px}-icon-close-x:hover {
-    color: $white-100;
+    .#{$px}-icon-close-x:hover {
+      color: $white-100;
+    }
   }
 }