@phillips/seldon 1.279.2 → 1.280.0

package/dist/scss/patterns/SaleCard/_saleCard.scss

@@ -1,85 +1,89 @@
 @use '../../allPartials' as *;
+@use '../../layers';
 
 // Focus ring when the entire card acts as a link (wrapped in <a>)
-a:focus-visible > .#{$px}-sale-card {
-  @include focus-ring($border-radius: $radius-xs);
-}
 
-// Remove default browser outline from the link so only the card focus ring shows
-a:has(> .#{$px}-sale-card) {
-  &:focus {
-    outline: none;
+@layer seldon.patterns {
+  a:focus-visible > .#{$px}-sale-card {
+    @include focus-ring($border-radius: $radius-xs);
   }
-}
 
-.#{$px}-sale-card {
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-  gap: $spacing-md;
-
-  &--image-left {
-    @include media($breakpoint-snw-mobile) {
-      flex-direction: row;
+  // Remove default browser outline from the link so only the card focus ring shows
+  a:has(> .#{$px}-sale-card) {
+    &:focus {
+      outline: none;
     }
   }
 
-  &--image-right {
-    @include media($breakpoint-snw-mobile) {
-      flex-direction: row-reverse;
-    }
-  }
+  .#{$px}-sale-card {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-md;
 
-  &__ctas {
-    flex: 0 0 0%;
+    &--image-left {
+      @include media($breakpoint-snw-mobile) {
+        flex-direction: row;
+      }
+    }
 
-    @include media($breakpoint-snw-mobile) {
-      flex-basis: 250px;
+    &--image-right {
+      @include media($breakpoint-snw-mobile) {
+        flex-direction: row-reverse;
+      }
     }
-  }
 
-  &__modal-link .#{$px}-button {
-    @include text($linkSmall);
-  }
+    &__ctas {
+      flex: 0 0 0%;
 
-  &__cta-button {
-    padding: $spacing-sm $spacing-lg;
-    white-space: nowrap;
-    width: 100%;
-  }
+      @include media($breakpoint-snw-mobile) {
+        flex-basis: 250px;
+      }
+    }
 
-  &__pdf-link {
-    align-items: center;
-    align-self: stretch;
-    display: flex;
-    gap: $spacing-micro;
-    justify-content: center;
+    &__modal-link .#{$px}-button {
+      @include text($linkSmall);
+    }
 
-    a {
-      text-decoration: none;
+    &__cta-button {
+      padding: $spacing-sm $spacing-lg;
+      white-space: nowrap;
+      width: 100%;
     }
-  }
 
-  &--relatedSaleTile {
-    align-items: flex-start;
-    gap: $spacing-sm;
+    &__pdf-link {
+      align-items: center;
+      align-self: stretch;
+      display: flex;
+      gap: $spacing-micro;
+      justify-content: center;
 
-    @include media($size-snw-mobile, 'max') {
-      &.#{$px}-sale-card--image-left {
-        flex-direction: row;
+      a {
+        text-decoration: none;
       }
+    }
 
-      &.#{$px}-sale-card--image-right {
-        flex-direction: row-reverse;
+    &--relatedSaleTile {
+      align-items: flex-start;
+      gap: $spacing-sm;
+
+      @include media($size-snw-mobile, 'max') {
+        &.#{$px}-sale-card--image-left {
+          flex-direction: row;
+        }
+
+        &.#{$px}-sale-card--image-right {
+          flex-direction: row-reverse;
+        }
       }
-    }
 
-    > .#{$px}-card__image {
-      max-width: $spacing-xxxl;
-      min-width: 94px;
+      > .#{$px}-card__image {
+        max-width: $spacing-xxxl;
+        min-width: 94px;
 
-      @include media($size-xl) {
-        max-width: calc($spacing-xxxl * 1.25);
+        @include media($size-xl) {
+          max-width: calc($spacing-xxxl * 1.25);
+        }
       }
     }
   }

package/dist/scss/patterns/SaleCard/_saleCardActions.scss

@@ -1,12 +1,15 @@
 @use '../../allPartials' as *;
+@use '../../layers';
 
-.#{$px}-sale-card-actions {
-  &__ctas {
-    align-items: flex-start;
-    display: flex;
-    flex-direction: column;
-    gap: $spacing-sm;
-    justify-content: center;
-    min-width: 200px;
+@layer seldon.patterns {
+  .#{$px}-sale-card-actions {
+    &__ctas {
+      align-items: flex-start;
+      display: flex;
+      flex-direction: column;
+      gap: $spacing-sm;
+      justify-content: center;
+      min-width: 200px;
+    }
   }
 }

package/dist/scss/patterns/SaleHeaderBanner/_saleHeaderBanner.scss

@@ -1,98 +1,101 @@
 @use '../../allPartials' as *;
+@use '../../layers';
 
-.#{$px}-sale-header-banner {
-  border-bottom: 1px solid $light-gray;
-  margin-bottom: $spacing-md;
+@layer seldon.patterns {
+  .#{$px}-sale-header-banner {
+    border-bottom: 1px solid $light-gray;
+    margin-bottom: $spacing-md;
 
-  @include media($breakpoint-md, $type: 'max') {
-    .#{$px}-banner__inner {
-      gap: 0;
-    }
+    @include media($breakpoint-md, $type: 'max') {
+      .#{$px}-banner__inner {
+        gap: 0;
+      }
 
-    &__stack {
-      padding: $spacing-md 0;
+      &__stack {
+        padding: $spacing-md 0;
+      }
     }
-  }
 
-  &__header-label {
-    margin-bottom: $spacing-xsm;
-  }
-
-  &__title {
-    &.#{$px}-text {
-      text-transform: uppercase;
+    &__header-label {
+      margin-bottom: $spacing-xsm;
     }
-  }
 
-  .#{$px}-countdown {
-    padding-top: var(--spacing-sm);
-  }
-
-  &__stack {
-    align-items: start;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    justify-content: center;
-
-    &__countdown {
-      display: flex;
-      width: 100%;
+    &__title {
+      &.#{$px}-text {
+        text-transform: uppercase;
+      }
     }
 
-    .#{$px}-text--badge {
-      margin-bottom: $spacing-xsm;
+    .#{$px}-countdown {
+      padding-top: var(--spacing-sm);
     }
-  }
-
-  &__location {
-    font-variation-settings: 'wght' 600;
-    margin: $spacing-xsm 0 $spacing-md 0;
-  }
-
-  &__badge {
-    border: 1px solid $badge-blue;
-    color: $badge-blue;
-    margin: $spacing-xsm 0;
-    padding: $spacing-micro $spacing-xsm;
-  }
-
-  &__occurrence-details {
-    align-items: center;
-    display: flex;
-    margin-bottom: $spacing-xsm;
 
-    &-text {
-      align-items: flex-start;
+    &__stack {
+      align-items: start;
       display: flex;
       flex-direction: column;
-      gap: $spacing-micro;
+      height: 100%;
+      justify-content: center;
 
-      &::after {
-        content: '';
-        display: block;
+      &__countdown {
+        display: flex;
+        width: 100%;
       }
 
-      &:first-child {
-        padding-right: $spacing-sm;
+      .#{$px}-text--badge {
+        margin-bottom: $spacing-xsm;
       }
+    }
 
-      &:not(:first-child) {
-        border-left: 1px solid $keyline-gray;
-        padding-left: $spacing-sm;
+    &__location {
+      font-variation-settings: 'wght' 600;
+      margin: $spacing-xsm 0 $spacing-md 0;
+    }
+
+    &__badge {
+      border: 1px solid $badge-blue;
+      color: $badge-blue;
+      margin: $spacing-xsm 0;
+      padding: $spacing-micro $spacing-xsm;
+    }
+
+    &__occurrence-details {
+      align-items: center;
+      display: flex;
+      margin-bottom: $spacing-xsm;
+
+      &-text {
+        align-items: flex-start;
+        display: flex;
+        flex-direction: column;
+        gap: $spacing-micro;
+
+        &::after {
+          content: '';
+          display: block;
+        }
+
+        &:first-child {
+          padding-right: $spacing-sm;
+        }
+
+        &:not(:first-child) {
+          border-left: 1px solid $keyline-gray;
+          padding-left: $spacing-sm;
+        }
       }
     }
-  }
 
-  &__browse-auctions-text {
-    gap: $spacing-micro;
-  }
+    &__browse-auctions-text {
+      gap: $spacing-micro;
+    }
 
-  &__date {
-    font-variation-settings: 'wght' 600;
-  }
+    &__date {
+      font-variation-settings: 'wght' 600;
+    }
 
-  &__cta {
-    margin: $spacing-sm 0;
+    &__cta {
+      margin: $spacing-sm 0;
+    }
   }
 }

package/dist/scss/patterns/Social/_social.scss

@@ -1,84 +1,87 @@
 @use '../../allPartials' as *;
+@use '../../layers';
 
-$icon_width: 1.75rem;
-$icon_gap: 2rem;
-$num_icons: 5;
+@layer seldon.patterns {
+  $icon_width: 1.75rem;
+  $icon_gap: 2rem;
+  $num_icons: 5;
 
-.#{$px}-social {
-  align-items: center;
-  display: inline-flex;
-  flex-direction: column;
-  margin-top: $spacing-md;
-  padding: 0;
-  width: 100%;
-
-  @include media($size-md) {
-    margin-top: $spacing-sm;
-  }
-
-  @include media($size-lg) {
-    margin-top: 0;
-  }
-
-  .#{$px}-text {
-    margin-bottom: $spacing-sm;
+  .#{$px}-social {
+    align-items: center;
+    display: inline-flex;
+    flex-direction: column;
+    margin-top: $spacing-md;
+    padding: 0;
+    width: 100%;
 
     @include media($size-md) {
-      margin-bottom: $spacing-sm;
+      margin-top: $spacing-sm;
     }
-  }
-
-  @include media($size-md) {
-    align-items: flex-start;
-  }
 
-  &__button {
-    @include text($linkMedium);
+    @include media($size-lg) {
+      margin-top: 0;
+    }
 
-    border: 0;
-    height: auto;
-    margin-bottom: $spacing-sm;
-    margin-top: $spacing-xsm;
-    padding: 0;
-    text-align: left;
-    text-decoration: underline;
+    .#{$px}-text {
+      margin-bottom: $spacing-sm;
 
-    &.#{$px}-social__button {
-      text-transform: none;
+      @include media($size-md) {
+        margin-bottom: $spacing-sm;
+      }
     }
 
-    &:hover {
-      background-color: unset;
-      color: unset;
+    @include media($size-md) {
+      align-items: flex-start;
     }
 
-    &:focus-visible {
-      border-radius: $radius-xs;
+    &__button {
+      @include text($linkMedium);
+
+      border: 0;
+      height: auto;
+      margin-bottom: $spacing-sm;
+      margin-top: $spacing-xsm;
       padding: 0;
-    }
-  }
+      text-align: left;
+      text-decoration: underline;
 
-  &.#{$px}-social {
-    ul {
-      align-items: center;
-      border-top: 1px solid $grey-50;
-      display: flex;
-      flex-direction: row;
-      gap: 0 $icon_gap;
-      justify-content: flex-start;
-      list-style: none;
-      margin: $spacing-md 0 0;
-      max-width: calc($num_icons * $icon_width + ($num_icons - 1) * $icon_gap);
-      padding: $spacing-sm 0 0;
-      width: 100%;
+      &.#{$px}-social__button {
+        text-transform: none;
+      }
 
-      li {
-        cursor: pointer;
+      &:hover {
+        background-color: unset;
+        color: unset;
+      }
+
+      &:focus-visible {
+        border-radius: $radius-xs;
+        padding: 0;
       }
     }
 
-    a {
-      display: inline-block;
+    &.#{$px}-social {
+      ul {
+        align-items: center;
+        border-top: 1px solid $grey-50;
+        display: flex;
+        flex-direction: row;
+        gap: 0 $icon_gap;
+        justify-content: flex-start;
+        list-style: none;
+        margin: $spacing-md 0 0;
+        max-width: calc($num_icons * $icon_width + ($num_icons - 1) * $icon_gap);
+        padding: $spacing-sm 0 0;
+        width: 100%;
+
+        li {
+          cursor: pointer;
+        }
+      }
+
+      a {
+        display: inline-block;
+      }
     }
   }
 }

package/dist/scss/patterns/Subscribe/_subscribe.scss

@@ -1,20 +1,23 @@
 @use '../../allPartials' as *;
+@use '../../layers';
 
-.#{$px}-subscribe {
-  max-width: 600px;
-  width: 100%;
+@layer seldon.patterns {
+  .#{$px}-subscribe {
+    max-width: 600px;
+    width: 100%;
 
-  &__title {
-    margin-bottom: $spacing-xsm;
-  }
+    &__title {
+      margin-bottom: $spacing-xsm;
+    }
 
-  &__input__wrapper {
-    margin-top: $spacing-md;
-  }
+    &__input__wrapper {
+      margin-top: $spacing-md;
+    }
 
-  &__button {
-    margin: 0.25rem 0 $spacing-sm;
-    max-width: 240px;
-    width: 100%;
+    &__button {
+      margin: 0.25rem 0 $spacing-sm;
+      max-width: 240px;
+      width: 100%;
+    }
   }
 }

package/dist/scss/patterns/TextBanner/_textBanner.scss

@@ -1,44 +1,47 @@
 @use '../../allPartials' as *;
+@use '../../layers';
 
-.#{$px}-text-banner {
-  &__header-text {
-    // To center the header on the description
-    align-items: center;
-    display: flex;
-    text-transform: none;
-  }
-
-  &__content-wrapper {
-    align-items: flex-start;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    max-width: none;
-    padding: $spacing-lg 0;
-
-    h1 {
-      white-space: nowrap;
-    }
-
-    h1,
-    p,
-    span {
-      color: $pure-black;
-      margin: 0;
-      max-width: 100%;
-      min-height: 48px;
-      text-align: left;
+@layer seldon.patterns {
+  .#{$px}-text-banner {
+    &__header-text {
+      // To center the header on the description
+      align-items: center;
+      display: flex;
       text-transform: none;
     }
 
-    @include media($breakpoint-md) {
-      flex-direction: row;
+    &__content-wrapper {
+      align-items: flex-start;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      max-width: none;
+      padding: $spacing-lg 0;
+
+      h1 {
+        white-space: nowrap;
+      }
 
       h1,
       p,
       span {
-        max-width: 50%;
-        width: 50%;
+        color: $pure-black;
+        margin: 0;
+        max-width: 100%;
+        min-height: 48px;
+        text-align: left;
+        text-transform: none;
+      }
+
+      @include media($breakpoint-md) {
+        flex-direction: row;
+
+        h1,
+        p,
+        span {
+          max-width: 50%;
+          width: 50%;
+        }
       }
     }
   }