@orangesk/orange-design-system 3.3.0 → 3.4.0

package/src/components/Megamenu/styles/mixins.scss

@@ -15,6 +15,7 @@
 @use "../../Tag/styles/mixins" as tag;
 @use "../../Tag/styles/config" as tagConfig;
 @use "../../Button/styles/mixins" as button;
+@use "../../Card/styles/mixins" as card;
 @use "../../../styles/typography/mixins" as typography;
 
 @use "./config";
@@ -153,7 +154,7 @@
   }
 
   // Scroll hide functionality
-  &.is-sticky {
+  &:not(.non-sticky) {
     position: fixed;
 
     body.has-modal & {
@@ -233,8 +234,22 @@
 }
 
 @mixin nav-mobile-locale {
+  position: relative;
   padding: convert.to-rem(15px) 0 !important;
   margin-bottom: 0px !important;
+
+  &::before {
+    content: "";
+    position: absolute;
+    left: 50%;
+    width: 100vw;
+    border-top: 1px solid var(--color-border-subtle);
+    transform: translateX(-50%);
+  }
+
+  &::before {
+    top: 0;
+  }
 }
 
 @mixin nav-item {
@@ -402,6 +417,35 @@
   }
 }
 
+@mixin nav-link-cta {
+  display: inline-flex;
+  align-items: center;
+  gap: convert.to-rem(6px);
+  height: max-content;
+  align-self: center;
+  text-wrap: nowrap;
+  padding: convert.to-rem(10px);
+  border-radius: convert.to-rem(5px);
+  background-color: var(--color-surface-accent);
+  color: var(--color-text-default);
+  font-size: convert.to-rem(16px) !important;
+  line-height: convert.to-rem(18px);
+
+  &:hover,
+  &:focus,
+  &:active,
+  &.is-active {
+    color: var(--color-text-default) !important;
+    outline: solid 2px var(--color-border-accent);
+    outline-offset: -2px;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--color-border-accent);
+    outline-offset: 2px;
+  }
+}
+
 @mixin divider {
   margin-top: convert.to-rem(30px);
   margin-bottom: convert.to-rem(30px);
@@ -418,14 +462,23 @@
   position: relative;
 
   &:after {
-    content: attr(data-items-in-cart);
+    content: "";
     position: absolute;
-    right: -25%;
-    top: -25%;
+    right: -2px;
+    top: -2px;
+    width: convert.to-rem(8px);
+    height: convert.to-rem(8px);
+    background-color: var(--color-icon-brand);
+    border-radius: 50%;
+  }
+
+  &[data-items-in-cart]::after {
+    content: attr(data-items-in-cart);
     width: convert.to-rem(18px);
     height: convert.to-rem(18px);
     background-color: var(--color-icon-information);
-    border-radius: 50%;
+    right: -25%;
+    top: -25%;
     font-size: convert.to-rem(14px);
     color: color.$white;
     display: flex;
@@ -476,6 +529,7 @@
 }
 
 @mixin nav-button-indicator {
+  width: fit-content;
   padding: 0 convert.to-rem(20px) 0 0;
 
   &:after {
@@ -490,6 +544,7 @@
     border-style: solid;
     border-width: 7px 7px 0;
     transition: transform 0.1s ease-out;
+    pointer-events: none;
   }
 
   &.is-active:after {
@@ -497,9 +552,48 @@
   }
 }
 
+@mixin nav-select-wrapper {
+  &:hover,
+  &:focus,
+  &:active,
+  &.is-active {
+    box-shadow: none;
+  }
+}
+
+@mixin nav-select {
+  appearance: none;
+  -webkit-appearance: none;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  width: fit-content;
+  field-sizing: content;
+  color: inherit;
+  background: transparent;
+  font: inherit;
+  line-height: inherit;
+  cursor: pointer;
+  outline: none !important;
+
+  &:focus,
+  &:focus-visible {
+    outline: none !important;
+    border: 0 !important;
+    box-shadow: none !important;
+  }
+}
+
 @mixin nav-icon {
   display: flex;
   margin-right: convert.to-rem(5px);
+  flex-shrink: 0;
+}
+
+@mixin nav-icon-cta {
+  margin-right: 0;
+  color: var(--color-text-accent);
+  flex: 0 0 auto;
 }
 
 @mixin nav-icon-no-gap-md-down {
@@ -527,6 +621,16 @@
   gap: convert.to-rem(10px);
   margin-bottom: convert.to-rem(10px) !important;
 
+  a {
+    &:hover,
+    &:focus,
+    &:focus-visible,
+    &:active {
+      color: var(--color-text-default) !important;
+      text-decoration: underline;
+    }
+  }
+
   &:last-child {
     margin-bottom: 0 !important;
   }
@@ -652,7 +756,30 @@
 }
 
 @mixin mobile-body {
+  display: flex;
+  flex-direction: column;
+  row-gap: convert.to-rem(30px);
   padding: convert.to-rem(15px) 0 convert.to-rem(30px);
+
+  @include breakpoint.get("md", "down") {
+    row-gap: convert.to-rem(20px);
+  }
+
+  #{config.$class-root}__nav--vertical {
+    margin-top: convert.to-rem(10px);
+    margin-bottom: convert.to-rem(10px) !important;
+  }
+}
+
+@mixin mobile-cta {
+  a {
+    width: 100%;
+    justify-content: flex-start;
+    padding: convert.to-rem(13px) convert.to-rem(10px);
+    font-size: convert.to-rem(16px) !important;
+    line-height: convert.to-rem(18px);
+    text-decoration: none;
+  }
 }
 
 @mixin mobile-account {
@@ -664,23 +791,16 @@
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  margin-bottom: convert.to-rem(12px);
+  margin-bottom: convert.to-rem(10px);
 }
 
-@mixin mobile-account-name {
+@mixin mobile-account-phone {
   @include generate.css-map(typographyConfig.$caption, "large");
   margin-top: 0;
-  margin-bottom: convert.to-rem(5px);
+  margin-bottom: convert.to-rem(10px);
   font-weight: 700;
 }
 
-@mixin mobile-account-phone {
-  font-size: convert.to-rem(16px);
-  line-height: convert.to-rem(18px);
-  margin-top: 0;
-  margin-bottom: convert.to-rem(5px);
-}
-
 @mixin mobile-account-logout {
   display: inline-block;
   text-decoration: underline;
@@ -688,9 +808,11 @@
   text-decoration-thickness: auto;
   margin-bottom: convert.to-rem(20px);
   font-weight: 400 !important;
+  font-size: convert.to-rem(14px) !important;
+  line-height: convert.to-rem(16px);
 }
 
-@mixin mobile-account-cta {
+@mixin mobile-account-button {
   @include button.base();
   @include button.layout();
   @include button.size("default");
@@ -699,7 +821,7 @@
   color: color.$white !important;
   width: 100%;
   justify-content: center;
-  margin-bottom: convert.to-rem(40px);
+  margin-bottom: convert.to-rem(10px);
   text-decoration: none !important;
 
   &:hover {
@@ -715,12 +837,24 @@
   }
 }
 
+@mixin mobile-account-button-secondary {
+  @include button.color("default");
+  color: inherit !important;
+  border-color: currentColor !important;
+}
+
 @mixin mobile-account-links {
-  margin-top: convert.to-rem(30px);
+  margin: convert.to-rem(20px) 0 !important;
+
+  @include breakpoint.get("md", "down") {
+    margin: convert.to-rem(15px) 0 !important;
+  }
 }
 
 @mixin mobile-account-link {
   text-decoration: none !important;
+  font-size: convert.to-rem(16px) !important;
+  line-height: convert.to-rem(18px) !important;
 
   &:hover,
   &:focus,
@@ -731,6 +865,61 @@
   }
 }
 
+@mixin mobile-app-card {
+  @include card.card-base;
+  border: 1px solid var(--color-border-subtle);
+  border-radius: convert.to-rem(20px);
+  overflow: hidden;
+  background-color: var(--color-fill-subtle);
+
+  @include breakpoint.get("md", "down") {
+    border-radius: convert.to-rem(10px);
+  }
+}
+
+@mixin mobile-app-card-section {
+  @include card.card-section(space.get("large"));
+
+  @include breakpoint.get("md", "down") {
+    padding: convert.to-rem(20px);
+  }
+}
+
+@mixin mobile-app-card-title {
+  margin: 0;
+  margin-bottom: convert.to-rem(10px);
+  font-size: convert.to-rem(18px);
+  line-height: convert.to-rem(22px);
+  font-weight: 700;
+}
+
+@mixin mobile-app-card-stores {
+  display: flex;
+  align-items: center;
+  gap: convert.to-rem(10px);
+}
+
+@mixin mobile-app-card-store {
+  display: inline-flex;
+  align-items: center;
+  height: convert.to-rem(40px);
+
+  img {
+    display: block;
+    width: auto;
+    max-width: convert.to-rem(52px);
+    max-height: convert.to-rem(40px);
+    margin: 0;
+  }
+}
+
+@mixin mobile-app-card-image {
+  display: block;
+  width: 100%;
+  height: auto;
+  margin: 0;
+}
+
 @mixin container {
   @include container.base;
   display: flex;
@@ -740,13 +929,11 @@
 
 @mixin grid {
   display: grid;
-  grid-auto-flow: column;
-  grid-auto-columns: 1fr;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: convert.to-rem(20px);
 
   @include breakpoint.get("md", "down") {
-    grid-auto-flow: row;
-    grid-auto-columns: 100%;
+    grid-template-columns: 1fr;
   }
 }
 
@@ -763,6 +950,22 @@
 
   @include breakpoint.get("md", "down") {
     padding: convert.to-rem(15px);
+    border-radius: convert.to-rem(10px);
+
+    &.is-highlighted {
+      font-size: convert.to-rem(16px);
+      line-height: convert.to-rem(20px);
+
+      a {
+        font-size: inherit;
+        line-height: inherit;
+      }
+
+      .megamenu__text--large {
+        font-size: inherit !important;
+        line-height: inherit;
+      }
+    }
 
     &:not(.is-highlighted) {
       padding: 0;
@@ -770,6 +973,72 @@
   }
 }
 
+@mixin tiles {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  margin-inline: auto;
+  margin-top: convert.to-rem(20px);
+  gap: convert.to-rem(20px);
+  padding: convert.to-rem(30px) 0 convert.to-rem(10px);
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 50%;
+    width: 100vw;
+    border-top: 1px solid var(--color-border-subtle);
+    transform: translateX(-50%);
+  }
+
+  @include breakpoint.get("md", "down") {
+    width: 100%;
+    justify-content: flex-start;
+    overflow-x: auto;
+    flex-wrap: nowrap;
+    gap: convert.to-rem(10px);
+    overscroll-behavior-x: contain;
+    scrollbar-width: none;
+    margin-top: 0;
+    padding: 0;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    &::before {
+      display: none;
+    }
+  }
+}
+
+@mixin tile-content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: convert.to-rem(5px);
+}
+
+@mixin tile {
+  flex: 0 1 auto;
+  width: fit-content;
+  max-width: 100%;
+  border-radius: convert.to-rem(10px);
+  color: var(--color-text-default);
+  text-decoration: none;
+
+  @include breakpoint.get("md", "down") {
+    flex: 0 0 auto;
+  }
+
+  &:hover,
+  &:focus-visible {
+    text-decoration: none;
+  }
+}
+
 @mixin text-large {
   font-size: convert.to-rem(28px) !important;
   line-height: convert.to-rem(32px);
@@ -860,12 +1129,12 @@
   height: 0;
   transition: height 0.2s ease-in-out;
 
-  .megamenu.is-sticky + & {
+  .megamenu:not(.non-sticky) + & {
     height: var(--header-height, #{convert.to-rem(118px)});
   }
 
   @include breakpoint.get("md", "down") {
-    .megamenu.is-sticky + & {
+    .megamenu:not(.non-sticky) + & {
       height: convert.to-rem(58px);
     }
   }
@@ -875,12 +1144,12 @@
   height: 0;
   transition: height 0.2s ease-in-out;
 
-  .megamenu.is-sticky + & {
+  .megamenu:not(.non-sticky) + & {
     height: var(--header-height, #{convert.to-rem(78px)});
   }
 
   @include breakpoint.get("md", "down") {
-    .megamenu.is-sticky + & {
+    .megamenu:not(.non-sticky) + & {
       height: convert.to-rem(58px);
     }
   }
@@ -907,17 +1176,20 @@
   background: none;
   border: none;
   font-weight: 700;
-  font-size: convert.to-rem(18px);
+  font-size: convert.to-rem(16px);
+  line-height: convert.to-rem(18px);
   color: var(--color-text-default);
 
   &[aria-expanded="true"] {
+    color: var(--color-text-default) !important;
     border-bottom: 2px solid var(--color-border-accent);
   }
 }
 
 @mixin accordion-title {
   @include accordion.title;
-  font-size: convert.to-rem(18px);
+  font-size: convert.to-rem(16px);
+  line-height: convert.to-rem(18px);
   font-weight: 700;
 }
 
@@ -928,6 +1200,7 @@
   [aria-expanded="true"] > &,
   &.is-active {
     @include accordion.icon-active;
+    color: var(--color-text-default) !important;
     transform: rotate(270deg);
   }
 }
@@ -1108,6 +1381,12 @@
   }
 }
 
+@mixin hide-lg-only {
+  @include breakpoint.get("lg", "only") {
+    display: none !important;
+  }
+}
+
 @mixin hide-lg-up {
   @include breakpoint.get("lg") {
     display: none !important;

package/src/components/Megamenu/styles/style.scss

@@ -1,6 +1,8 @@
 @use "../../Container/styles/mixins" as container;
 @use "../../Accordion/styles/mixins" as accordion;
+@use "../../Tile/styles/mixins" as tile;
 @use "../../../styles/typography/mixins" as typography;
+@use "../../../styles/tools/convert";
 
 @use "./mixins";
 @use "./config";
@@ -70,6 +72,10 @@
       &--no-line {
         @include mixins.nav-link-no-line;
       }
+
+      &--cta {
+        @include mixins.nav-link-cta;
+      }
     }
 
     &-cart-icon {
@@ -82,6 +88,14 @@
       &--indicator {
         @include mixins.nav-button-indicator;
       }
+
+      &--select {
+        @include mixins.nav-select-wrapper;
+      }
+    }
+
+    &-select {
+      @include mixins.nav-select;
     }
 
     &-icon {
@@ -90,6 +104,10 @@
       &--no-gap-md-down {
         @include mixins.nav-icon-no-gap-md-down;
       }
+
+      &--cta {
+        @include mixins.nav-icon-cta;
+      }
     }
 
     &-spacer {
@@ -140,6 +158,10 @@
       @include mixins.mobile-body;
     }
 
+    &-cta {
+      @include mixins.mobile-cta;
+    }
+
     &-account {
       @include mixins.mobile-account;
 
@@ -147,10 +169,6 @@
         @include mixins.mobile-account-avatar;
       }
 
-      &-name {
-        @include mixins.mobile-account-name;
-      }
-
       &-phone {
         @include mixins.mobile-account-phone;
       }
@@ -159,10 +177,6 @@
         @include mixins.mobile-account-logout;
       }
 
-      &-cta {
-        @include mixins.mobile-account-cta;
-      }
-
       &-links {
         @include mixins.mobile-account-links;
       }
@@ -171,6 +185,39 @@
         @include mixins.mobile-account-link;
       }
     }
+
+    &-app-card {
+      @include mixins.mobile-app-card;
+
+      &-section {
+        @include mixins.mobile-app-card-section;
+      }
+
+      &-title {
+        @include mixins.mobile-app-card-title;
+      }
+
+      &-stores {
+        @include mixins.mobile-app-card-stores;
+      }
+
+      &-store {
+        @include mixins.mobile-app-card-store;
+      }
+
+      &-image {
+        @include mixins.mobile-app-card-image;
+      }
+    }
+  }
+
+  &__button {
+    @include mixins.mobile-account-button;
+
+    &--secondary {
+      @include mixins.mobile-account-button-secondary;
+      margin-bottom: 0;
+    }
   }
 
   &__container {
@@ -185,6 +232,38 @@
     @include mixins.card;
   }
 
+  &__tiles {
+    @include mixins.tiles;
+  }
+
+  &__tile {
+    @include tile.tile-base;
+    @include mixins.tile;
+
+    &-body {
+      display: flex;
+      @include tile.tile-body-compact;
+      @include tile.tile-body-icon-ratio;
+      flex-direction: row;
+      justify-content: flex-start;
+      background-color: var(--color-background-primary);
+    }
+
+    &-content {
+      @include mixins.tile-content;
+    }
+
+    &:hover,
+    &:focus,
+    &:focus-visible,
+    &:active {
+      color: var(--color-text-default) !important;
+      border-color: var(--color-border-accent);
+      outline: 2px solid var(--color-border-accent);
+      outline-offset: -2px;
+    }
+  }
+
   &__text--large {
     @include mixins.text-large;
   }
@@ -273,6 +352,10 @@
     @include mixins.hide-md-down;
   }
 
+  &--hide-lg-only {
+    @include mixins.hide-lg-only;
+  }
+
   &--hide-lg-up {
     @include mixins.hide-lg-up;
   }