@orangesk/orange-design-system 2.0.0-beta.8 → 2.0.0

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

@@ -1,15 +1,20 @@
+@use "sass:map";
 @use "../../../styles/tools/convert";
 @use "../../../styles/tokens/color";
+@use "../../../styles/tokens/tag-colors";
 @use "../../../styles/tokens/base";
 @use "../../../styles/tokens/breakpoint";
 @use "../../../styles/tools/generate";
+@use "../../../styles/tokens/space";
 @use "../../../styles/tools/visibility" as visibility;
+@use "../../../styles/typography/config" as typographyConfig;
 @use "../../Container/styles/mixins" as container;
 @use "../../Accordion/styles/mixins" as accordion;
 @use "../../Forms/TextInput/styles/mixins" as input;
 @use "../../Forms/TextInput/styles/config" as inputConfig;
 @use "../../Tag/styles/mixins" as tag;
 @use "../../Tag/styles/config" as tagConfig;
+@use "../../Button/styles/mixins" as button;
 @use "../../../styles/typography/mixins" as typography;
 
 @use "./config";
@@ -27,6 +32,14 @@
     display: none !important;
   }
 
+  .mt-none {
+    margin-top: 0 !important;
+  }
+
+  .no-underline {
+    text-decoration: none !important;
+  }
+
   ul {
     @include typography.list-unstyled();
     margin-bottom: convert.to-rem(30px);
@@ -43,14 +56,15 @@
   a {
     color: var(--color-text-default);
     font-weight: 700;
-    text-decoration: none;
     font-size: inherit;
+    text-decoration: underline;
+    text-underline-offset: convert.to-rem(2px);
+    text-decoration-thickness: auto;
 
     &:hover,
     &:focus,
     &:active {
-      text-decoration: underline;
-      text-underline-offset: convert.to-rem(4px);
+      color: var(--color-text-accent);
     }
 
     &:focus-visible {
@@ -72,6 +86,19 @@
     @include base.focusring;
   }
 
+  hr {
+    margin-top: convert.to-rem(30px);
+    margin-bottom: convert.to-rem(30px);
+    border: 0;
+    border-top: 1px solid var(--color-border-subtle);
+    width: 100%;
+
+    @include breakpoint.get("xs", "down") {
+      margin-top: convert.to-rem(15px);
+      margin-bottom: convert.to-rem(15px);
+    }
+  }
+
   * {
     box-sizing: border-box;
     letter-spacing: convert.to-rem(-0.1px);
@@ -88,15 +115,27 @@
   @each $name, $value in color.$colors-light {
     --color-#{$name}: #{$value};
   }
+
+  // Megamenu ships as a standalone bundle and cannot rely on global tag token variables.
+  @each $name, $value in tag-colors.$tag-colors-light {
+    --#{$name}: #{$value};
+  }
 }
 
 @mixin dark-vars {
   @each $name, $value in color.$colors-dark {
     --color-#{$name}: #{$value};
   }
+
+  // Keep tag colors available in dark mode as well.
+  @each $name, $value in tag-colors.$tag-colors-dark {
+    --#{$name}: #{$value};
+  }
 }
 
 @mixin base {
+  --megamenu-main-height: #{convert.to-rem(80px)};
+
   top: 0;
   left: 0;
   width: 100%;
@@ -107,10 +146,20 @@
   box-sizing: border-box;
   font-family: #{base.$font-family};
 
+  @include breakpoint.get("lg") {
+    &:has(.megamenu__nav-logo > [data-megamenu-brand-mark]):not(.top-hidden) {
+      --megamenu-main-height: #{convert.to-rem(107px)};
+    }
+  }
+
   // Scroll hide functionality
   &.is-sticky {
     position: fixed;
 
+    body.has-modal & {
+      padding-right: var(--ods-modal-scrollbar-width, 0px);
+    }
+
     #{config.$class-root}__main {
       position: sticky;
       top: 0;
@@ -121,37 +170,21 @@
     @include breakpoint.get("lg") {
       #{config.$class-root}__top[data-hide-when-sticky="true"] {
         transition:
+          height 0.2s ease-in-out,
           transform 0.2s ease-in-out,
           opacity 0.2s ease-in-out;
 
         &.is-hidden {
+          height: 0;
           transform: translateY(-100%);
           opacity: 0;
           pointer-events: none;
+          overflow: hidden;
         }
       }
 
       #{config.$class-root}__main {
-        transition: transform 0.2s ease-in-out;
-      }
-
-      // When top is hidden, main should move up
-      #{config.$class-root}__top[data-hide-when-sticky="true"].is-hidden
-        ~ #{config.$class-root}__main {
-        transform: translateY(-#{convert.to-rem(40px)});
-      }
-
-      // When top is hidden, reduce the overall container height by the top bar height
-      #{config.$class-root}__top[data-hide-when-sticky="true"].is-hidden {
-        height: #{convert.to-rem(40px)};
-        overflow: hidden;
-      }
-    }
-
-    // Adjust container height when top is hidden
-    &.top-hidden {
-      @include breakpoint.get("lg") {
-        height: #{convert.to-rem(80px)} !important;
+        transition: min-height 0.2s ease-in-out;
       }
     }
   }
@@ -167,6 +200,10 @@
   align-items: center;
   gap: convert.to-rem(30px);
 
+  a {
+    text-decoration: none;
+  }
+
   @include breakpoint.get("md", "down") {
     gap: convert.to-rem(20px);
   }
@@ -195,11 +232,20 @@
   gap: convert.to-rem(15px);
 }
 
+@mixin nav-mobile-locale {
+  padding: convert.to-rem(15px) 0 !important;
+  margin-bottom: 0px !important;
+}
+
 @mixin nav-item {
   display: flex;
   height: 100%;
 }
 
+@mixin nav-item-lead {
+  margin-right: convert.to-rem(10px);
+}
+
 @mixin nav-dropdown {
   position: absolute;
   top: calc(100% + 1px);
@@ -210,20 +256,21 @@
   display: none;
   opacity: 0;
   z-index: 15;
+
+  &.is-spaced {
+    padding-top: convert.to-rem(50px);
+    padding-bottom: convert.to-rem(50px);
+  }
 }
 
 @mixin nav-logo {
   display: flex;
   align-items: center;
 
-  > svg,
-  > img {
+  svg,
+  img {
     width: convert.to-rem(40px);
-    height: convert.to-rem(40px);
-
-    & + * {
-      margin-left: convert.to-rem(20px);
-    }
+    height: auto;
   }
 
   > * {
@@ -231,21 +278,86 @@
     line-height: convert.to-rem(40px);
   }
 
+  > svg + span,
+  > img + span,
+  > [data-megamenu-brand-mark] + span {
+    margin-left: convert.to-rem(20px);
+  }
+
+  > [data-megamenu-brand-mark] {
+    display: grid;
+    align-items: center;
+    justify-items: start;
+  }
+
+  > [data-megamenu-brand-mark] > [data-megamenu-logo-full],
+  > [data-megamenu-brand-mark] > [data-megamenu-logo-compact] {
+    display: flex;
+    align-items: center;
+    grid-area: 1 / 1;
+  }
+
+  @include breakpoint.get("lg") {
+    .megamenu:not(.top-hidden)
+      &
+      > [data-megamenu-brand-mark]
+      > [data-megamenu-logo-full] {
+      visibility: visible;
+      pointer-events: auto;
+    }
+
+    .megamenu:not(.top-hidden)
+      &
+      > [data-megamenu-brand-mark]
+      > [data-megamenu-logo-compact] {
+      visibility: hidden;
+      pointer-events: none;
+    }
+
+    .megamenu.top-hidden
+      &
+      > [data-megamenu-brand-mark]
+      > [data-megamenu-logo-full] {
+      visibility: hidden;
+      pointer-events: none;
+    }
+
+    .megamenu.top-hidden
+      &
+      > [data-megamenu-brand-mark]
+      > [data-megamenu-logo-compact] {
+      visibility: visible;
+      pointer-events: auto;
+    }
+  }
+
   @include breakpoint.get("md", "down") {
-    > svg,
-    > img {
+    svg,
+    img {
       width: convert.to-rem(30px);
-      height: convert.to-rem(30px);
-
-      & + * {
-        margin-left: convert.to-rem(10px);
-      }
+      height: auto;
     }
 
     > * {
       font-size: convert.to-rem(20px);
       line-height: convert.to-rem(30px);
     }
+
+    > svg + span,
+    > img + span,
+    > [data-megamenu-brand-mark] + span {
+      margin-left: convert.to-rem(10px);
+    }
+
+    > [data-megamenu-brand-mark] > [data-megamenu-logo-full] {
+      display: none;
+    }
+
+    > [data-megamenu-brand-mark] > [data-megamenu-logo-compact] {
+      display: flex;
+      visibility: visible;
+      pointer-events: auto;
+    }
   }
 }
 
@@ -261,9 +373,45 @@
   &:focus,
   &:active,
   &.is-active {
+    color: var(--color-text-default) !important;
     box-shadow: config.$active-line;
+  }
+}
+
+@mixin nav-link-locale {
+  &:hover,
+  &:focus,
+  &:active,
+  &.is-active {
+    box-shadow: none;
     text-decoration: none !important;
   }
+
+  &.is-active {
+    color: var(--color-border-accent);
+  }
+}
+
+@mixin nav-link-no-line {
+  &:hover,
+  &:focus,
+  &:active,
+  &.is-active {
+    color: var(--color-text-accent) !important;
+    box-shadow: none;
+  }
+}
+
+@mixin divider {
+  margin-top: convert.to-rem(30px);
+  margin-bottom: convert.to-rem(30px);
+  border: 0;
+  border-top: 1px solid var(--color-border-subtle);
+
+  @include breakpoint.get("xs", "down") {
+    margin-top: convert.to-rem(15px);
+    margin-bottom: convert.to-rem(15px);
+  }
 }
 
 @mixin nav-cart-icon {
@@ -309,6 +457,22 @@
     outline: 2px solid var(--color-border-accent);
     outline-offset: 2px;
   }
+
+  &--toggle {
+    .megamenu__nav-button-icon-close {
+      display: none;
+    }
+
+    &.is-active {
+      .megamenu__nav-button-icon-open {
+        display: none;
+      }
+
+      .megamenu__nav-button-icon-close {
+        display: inline-flex;
+      }
+    }
+  }
 }
 
 @mixin nav-button-indicator {
@@ -318,7 +482,7 @@
     content: "";
     position: absolute;
     right: 0;
-    bottom: convert.to-rem(36px);
+    transform: translateY(1px);
     width: 0;
     height: 0;
     margin-left: 0.5em;
@@ -338,6 +502,12 @@
   margin-right: convert.to-rem(5px);
 }
 
+@mixin nav-icon-no-gap-md-down {
+  @include breakpoint.get("md", "down") {
+    margin-right: 0;
+  }
+}
+
 @mixin nav-spacer {
   display: flex;
   flex: 1 0 1px;
@@ -353,23 +523,26 @@
 }
 
 @mixin subnav-item {
+  display: flex;
+  gap: convert.to-rem(10px);
   margin-bottom: convert.to-rem(10px) !important;
 
   &:last-child {
-    margin-bottom: 0;
+    margin-bottom: 0 !important;
   }
 }
 
 @mixin top {
   display: flex;
   border-bottom: 1px solid var(--color-border-subtle);
-  min-height: convert.to-rem(40px);
+  height: convert.to-rem(40px);
+  overflow: hidden;
 }
 
 @mixin main {
   display: flex;
   border-bottom: 1px solid var(--color-border-subtle);
-  min-height: convert.to-rem(80px);
+  min-height: var(--megamenu-main-height);
 
   @include breakpoint.get("md", "down") {
     min-height: convert.to-rem(60px);
@@ -429,8 +602,10 @@
   }
 
   #{config.$class-root}__container {
-    padding-left: convert.to-rem(20px);
-    padding-right: convert.to-rem(20px);
+    @include breakpoint.get("md") {
+      padding-left: convert.to-rem(20px);
+      padding-right: convert.to-rem(20px);
+    }
   }
 }
 
@@ -468,12 +643,92 @@
 
 @mixin mobile-header {
   display: flex;
-  min-height: convert.to-rem(60px);
+  height: convert.to-rem(80px);
   border-bottom: 1px solid var(--color-border-subtle);
+
+  @include breakpoint.get("md", "down") {
+    height: convert.to-rem(60px);
+  }
 }
 
 @mixin mobile-body {
-  padding-top: convert.to-rem(15px);
+  padding: convert.to-rem(15px) 0 convert.to-rem(30px);
+}
+
+@mixin mobile-account {
+  text-align: center;
+  padding-top: convert.to-rem(10px);
+}
+
+@mixin mobile-account-avatar {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: convert.to-rem(12px);
+}
+
+@mixin mobile-account-name {
+  @include generate.css-map(typographyConfig.$caption, "large");
+  margin-top: 0;
+  margin-bottom: convert.to-rem(5px);
+  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;
+  text-underline-offset: convert.to-rem(2px);
+  text-decoration-thickness: auto;
+  margin-bottom: convert.to-rem(20px);
+  font-weight: 400 !important;
+}
+
+@mixin mobile-account-cta {
+  @include button.base();
+  @include button.layout();
+  @include button.size("default");
+  @include button.color("primary");
+  font-size: convert.to-rem(18px) !important;
+  color: color.$white !important;
+  width: 100%;
+  justify-content: center;
+  margin-bottom: convert.to-rem(40px);
+  text-decoration: none !important;
+
+  &:hover {
+    color: var(--color-text-inverse) !important;
+    background-color: var(--color-fill-contrast) !important;
+    border-color: transparent !important;
+  }
+
+  &:active {
+    color: var(--color-fill-contrast) !important;
+    background-color: transparent !important;
+    border-color: var(--color-border-contrast) !important;
+  }
+}
+
+@mixin mobile-account-links {
+  margin-top: convert.to-rem(30px);
+}
+
+@mixin mobile-account-link {
+  text-decoration: none !important;
+
+  &:hover,
+  &:focus,
+  &:active {
+    text-decoration: underline !important;
+    text-underline-offset: convert.to-rem(2px);
+    text-decoration-thickness: auto;
+  }
 }
 
 @mixin container {
@@ -499,20 +754,37 @@
   border-radius: convert.to-rem(20px);
   padding: convert.to-rem(30px);
 
+  a:hover,
+  a:focus {
+    text-decoration: underline;
+    text-underline-offset: convert.to-rem(2px);
+    text-decoration-thickness: auto;
+  }
+
   @include breakpoint.get("md", "down") {
     padding: convert.to-rem(15px);
+
+    &:not(.is-highlighted) {
+      padding: 0;
+    }
   }
 }
 
 @mixin text-large {
   font-size: convert.to-rem(28px) !important;
-  font-weight: 700;
   line-height: convert.to-rem(32px);
+  font-weight: 700;
+}
 
-  @include breakpoint.get("md", "down") {
-    font-size: convert.to-rem(24px) !important;
-    line-height: convert.to-rem(28px);
-  }
+@mixin caption {
+  @include generate.css-map(typographyConfig.$caption, "default");
+  margin-top: 0;
+  margin-bottom: convert.to-rem(20px);
+}
+
+@mixin caption-large {
+  @include generate.css-map(typographyConfig.$caption, "large");
+  margin-top: 0;
 }
 
 @mixin icon {
@@ -579,40 +851,54 @@
     height: 100vh;
   }
 
-  @include breakpoint.get("lg", "down") {
+  @include breakpoint.get("md", "down") {
     display: none;
   }
 }
 
 @mixin spacer {
-  height: convert.to-rem(118px);
+  height: 0;
+  transition: height 0.2s ease-in-out;
+
+  .megamenu.is-sticky + & {
+    height: var(--header-height, #{convert.to-rem(118px)});
+  }
 
   @include breakpoint.get("md", "down") {
-    height: convert.to-rem(58px);
+    .megamenu.is-sticky + & {
+      height: convert.to-rem(58px);
+    }
   }
 }
 
 @mixin spacer-small {
-  height: convert.to-rem(78px);
+  height: 0;
+  transition: height 0.2s ease-in-out;
+
+  .megamenu.is-sticky + & {
+    height: var(--header-height, #{convert.to-rem(78px)});
+  }
 
   @include breakpoint.get("md", "down") {
-    height: convert.to-rem(58px);
+    .megamenu.is-sticky + & {
+      height: convert.to-rem(58px);
+    }
   }
 }
 
 @mixin accordion {
   @include accordion.base;
-  margin-bottom: convert.to-rem(20px);
+  margin-bottom: 0px !important;
+
+  a {
+    text-decoration: none !important;
+  }
 }
 
 @mixin accordion-item {
   @include accordion.item;
-  border-top: none;
-  border-bottom: 1px solid var(--color-border-subtle);
-
-  &:last-child {
-    border-bottom: none;
-  }
+  border-top: none !important;
+  border-bottom: 1px solid var(--color-border-subtle) !important;
 }
 
 @mixin accordion-button {
@@ -650,6 +936,7 @@
   @include accordion.body;
   display: none;
   margin-bottom: 0;
+  margin-top: 0;
   padding: convert.to-rem(20px) 0 convert.to-rem(30px) 0;
 
   &.is-visible {
@@ -668,10 +955,12 @@
 @mixin input {
   @include input.base();
   @include input.states();
+  max-width: unset !important;
   margin-bottom: convert.to-rem(30px);
 
-  @include breakpoint.get("md", "down") {
-    margin-bottom: convert.to-rem(15px);
+  &:focus-visible {
+    outline-width: 2px !important;
+    outline-offset: -2px !important;
   }
 
   @each $size, $values in inputConfig.$sizes {
@@ -685,14 +974,48 @@
       @include input.width($width);
     }
   }
+}
+
+@mixin input-wrapper {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  margin-bottom: convert.to-rem(30px);
 
   &--search-icon-with-placeholder {
-    @include input.search-icon-with-placeholder();
+    isolation: isolate;
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: 50%;
+      left: convert.to-rem(8px);
+      width: convert.to-rem(20px);
+      height: convert.to-rem(20px);
+      transform: translateY(-50%);
+      background-image: inputConfig.$background-image-search-icon;
+      background-repeat: no-repeat;
+      pointer-events: none;
+      z-index: 2;
+    }
+
+    #{config.$class-root}__input {
+      background-image: none !important;
+      padding-left: convert.to-rem(40px);
+      margin-bottom: 0;
+    }
+  }
+
+  &--search-responsive {
+    @include breakpoint.get("lg") {
+      width: 50%;
+    }
   }
 }
 
 @mixin tag {
   @include tag.base;
+  text-decoration: none !important;
 
   @each $name, $props in tagConfig.$sizes {
     &#{generate.variant-name($name)} {
@@ -705,6 +1028,21 @@
       @include tag.color($variant);
     }
   }
+
+  // Interactive styles for button and anchor tags
+  &:not(&--transparent):where(button) {
+    @include tag.button();
+    z-index: 2;
+  }
+
+  &:not(&--transparent):where(a) {
+    @include tag.button();
+    z-index: 2;
+  }
+
+  &:not(&--transparent) {
+    @include tag.buttton-disabled();
+  }
 }
 
 @mixin tag-transparent {
@@ -726,11 +1064,38 @@
     &.is-active {
       text-decoration: none !important;
     }
+
+    &:hover,
+    &:focus {
+      color: inherit !important;
+    }
+
+    &:active,
+    &.is-active {
+      color: color.$white !important;
+    }
   }
 
   @include tag.button-transparent-disabled();
 }
 
+@mixin tag-orange {
+  @include tag.color("orange");
+
+  &:where(button) {
+    @include tag.button();
+    z-index: 2;
+  }
+
+  &:where(a) {
+    @include tag.button();
+    z-index: 2;
+    text-decoration: none !important;
+  }
+
+  @include tag.buttton-disabled();
+}
+
 @mixin list-gap-small {
   display: flex;
   flex-direction: column;