bootstrap-italia 2.17.2 → 3.0.0-alpha.0

package/src/scss/components/_headercentertheme.scss

@@ -1,3 +1,17 @@
+// Component: headercentertheme
+//
+// Description: Component styles for headercentertheme
+//
+
+// Variables
+//
+
+// Properties
+//
+
+// Styles
+//
+
 //mobile
 .it-header-center-wrapper {
   &.theme-light {

package/src/scss/components/_headernavbar.scss

@@ -1,26 +1,34 @@
-//mobile
+// Component: headernavbar
+//
+// Description: Component styles for headernavbar
+//
+
+// Variables
+//
+
+// Properties
+//
+
+// Styles
+//
+
 .it-header-navbar-wrapper {
   nav {
     background: transparent;
   }
-}
 
-//Tablet horizontal / small desktop
-@include media-breakpoint-up(lg) {
-  .it-header-navbar-wrapper {
-    background: $header-center-bg-color;
-    .nav-item.megamenu > a.dropdown-toggle:before,
-    .nav-item.megamenu > button.dropdown-toggle:before {
-      bottom: -$header-nav-icon-arrow-megamenu-distance;
-    }
-    nav {
-      a {
+  @include media-breakpoint-up(lg) {
+    background: var(--#{$prefix}header-nav-background);
+
+    .navbar {
+      .nav-link {
+        color: var(--#{$prefix}header-nav-text-color);
         text-decoration: none;
       }
+
       .navbar-collapsable {
         .menu-wrapper {
           background: transparent;
-
           display: flex;
           justify-content: space-between;
           align-items: flex-end;
@@ -34,7 +42,7 @@
 
               a {
                 font-size: 0.875rem;
-                line-height: 1.6;
+                line-height: var(--#{$prefix}label-leading);
               }
             }
           }

package/src/scss/components/_headernavbartheme.scss

@@ -1,7 +1,21 @@
+// Component: headernavbartheme
+//
+// Description: Component styles for headernavbartheme
+//
+
+// Variables
+//
+
+// Properties
+//
+
+// Styles
+//
+
 @media (max-width: #{map-get($grid-breakpoints, lg)}) {
   .it-header-center-wrapper.theme-light + .it-header-navbar-wrapper {
     .custom-navbar-toggler .icon {
-      fill: $navigation-light-text-color;
+      fill: var(--#{$primar}icon-primary);
     }
   }
   .it-header-navbar-wrapper {
@@ -11,7 +25,7 @@
         .navbar-collapsable {
           // menu vrapper
           .menu-wrapper {
-            background: $navigation-dark-bg-color;
+            background: var(--#{$header-nav-background});
           }
           /*lista menu*/
           .navbar-nav {

package/src/scss/components/_headerslim.scss

@@ -1,164 +1,160 @@
+// Component: headerslim
+//
+// Description: Component styles for headerslim
+//
+
+// Variables
+//
+
+// Properties
+//
+
+// Styles
+//
+
 //mobile
 .it-header-slim-wrapper {
-  /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */
+  background: var(--#{$prefix}header-slim-background);
   @extend .nav;
-  background: $header-slim-bg-color;
-  padding: ($header-slim-v-padding-mob $header-general-padding - ($grid-columns * 0.5));
+
+  // Header slim sticky
+  @include media-breakpoint-up(lg) {
+    .is-sticky {
+      .it-user-wrapper .dropdown-menu.show {
+        padding-bottom: 0.5rem;
+        transform: translate3d(0, 6px, 0);
+      }
+    }
+  }
+
+  &.theme-light {
+    border-bottom: 1px solid var(--#{$prefix}header-slim-border-color);
+  }
+
+  // Text decoration for links inside header slim except buttons
+  a:not(.btn):hover {
+    text-decoration: underline;
+  }
+
   .it-header-slim-wrapper-content {
     display: flex;
-    justify-content: space-between;
     align-items: center;
-    .dropdown-menu {
-      top: -$header-slim-dropdown-distance-mob !important;
-      @include media-breakpoint-down(md) {
-        top: 0 !important;
-      }
-    }
-    a {
-      color: $header-slim-text-color;
-      text-decoration: none;
-      &:hover:not(.active) {
-        text-decoration: underline;
-      }
-      .icon {
-        width: $header-slim-icon-size;
-        height: $header-slim-icon-size;
-        transition: all 0.3s;
-        transform-origin: center;
-        // set default text color to icon
-        fill: $header-slim-text-color;
-      }
-      &.dropdown-toggle {
-        text-transform: uppercase;
-        font-size: $header-slim-brand-text-size;
-        text-decoration: underline;
-        display: flex;
-        align-items: center;
-        &[aria-expanded='true'] {
-          & > .icon:last-of-type {
-            transform: scaleY(-1);
-          }
-        }
-      }
-      &.it-opener {
-        font-size: $header-slim-brand-text-size;
-        padding: 0.5rem 0;
-        display: block;
-        text-decoration: none;
-        &[aria-expanded='true'] {
-          & > .icon:last-of-type {
-            transform: scaleY(-1);
-          }
-        }
-      }
-    }
-    .navbar-brand {
-      color: $header-slim-text-color;
-      font-size: $header-slim-brand-text-size;
-      padding: 0;
+    justify-content: space-between;
+    @include media-breakpoint-up(lg) {
+      padding: 0 var(--#{$prefix}header-spacing-inset);
     }
-    .it-header-slim-right-zone,
-    .header-slim-right-zone {
-      // .header-slim-right-zone is .it-header-slim-right-zone now. We're keeping old class here for retrocompatibility
+
+    // Language dropdown
+    .dropdown-toggle {
       display: flex;
       align-items: center;
-      align-self: flex-start;
-      button,  // We're keeping the button's selector here for retrocompatibility
-      .it-access-top-wrapper > a {
-        background: $header-slim-button-color;
-        padding-top: $header-slim-button-v-padding;
-        padding-bottom: $header-slim-button-v-padding;
-        &:hover {
-          background: $header-slim-button-hover-color;
+      color: var(--#{$prefix}header-slim-text-color);
+      font-size: var(--#{$prefix}header-slim-font-size);
+      text-transform: uppercase;
+
+      &[aria-expanded='true'] {
+        & > .icon:last-of-type {
+          transform: scaleY(-1);
         }
       }
     }
 
-    .nav-mobile {
-      ul.link-list {
-        margin-top: $v-gap * 2;
-        margin-bottom: $v-gap * 3;
-        a.list-item {
-          &.active {
-            color: $white;
-            cursor: default;
-            text-decoration: none;
-          }
-          &:hover:not(.active) {
-            text-decoration: underline;
-          }
+    // Secondary nav opener
+    .it-opener {
+      display: block;
+      padding: 0.5rem 0;
+      color: var(--#{$prefix}header-slim-text-color);
+      font-size: var(--#{$prefix}header-slim-font-size);
+      text-decoration: none;
+      &[aria-expanded='true'] {
+        & > .icon:last-of-type {
+          transform: scaleY(-1);
         }
       }
     }
   }
-}
 
-//Tablet horizontal / small desktop
-@include media-breakpoint-up(lg) {
-  .it-header-slim-wrapper {
-    height: $header-slim-height;
-    .it-header-slim-wrapper-content {
-      padding: 0 $header-slim-h-padding;
-      height: $header-slim-height;
-      align-items: center;
-      .dropdown-menu {
-        top: -$header-slim-dropdown-distance !important;
+  // Overrides default navbar styles located in '_navbar.scss'
+  .navbar-brand {
+    padding: 0;
+    color: var(--#{$prefix}header-slim-text-color);
+    font-size: var(--#{$prefix}header-slim-font-size);
+  }
+
+  .it-header-slim-right-zone,
+  .header-slim-right-zone {
+    display: flex;
+    align-items: center;
+  }
+
+  // Secondary nav
+  .nav-mobile {
+    @include media-breakpoint-up(lg) {
+      flex-grow: 2; // Take all available space
+
+      .link-list-wrapper.collapse:not(.show) {
+        display: flex;
+        justify-content: flex-end; // Align to the right
       }
-      .nav-mobile {
-        flex-grow: 2;
-        ul.link-list {
-          margin: 0;
-          display: flex;
-          padding: 0 $v-gap * 3;
-          margin-right: $v-gap * 2;
-          border-left: 1px solid rgba($header-slim-text-color, 0.2);
-          border-right: 1px solid rgba($header-slim-text-color, 0.2);
-          height: $header-slim-height;
-          a {
-            padding-top: $header-slim-links-padding;
-            padding-bottom: $header-slim-links-padding;
-            &.active {
-              border-bottom: 2px solid $header-slim-text-color;
-              text-decoration: none;
-            }
-          }
-        }
+    }
+
+    .link-list {
+      margin-bottom: 0;
+      @include media-breakpoint-up(lg) {
+        display: flex;
+        align-items: center;
+        padding: 0 var(--#{$prefix}spacing-xxs);
+        border-right: 1px solid var(--#{$prefix}header-slim-border-color);
+        border-left: 1px solid var(--#{$prefix}header-slim-border-color);
       }
-      a {
-        &.dropdown-toggle {
-          padding-top: $header-slim-lang-v-padding;
-          padding-bottom: $header-slim-lang-v-padding;
-          text-decoration: none;
-          .icon {
-            margin-left: $v-gap * 0.5;
-          }
-        }
-        &.navbar-brand {
-          padding-top: $header-slim-brand-padding;
-          padding-bottom: $header-slim-brand-padding;
-        }
+    }
+
+    .list-item {
+      padding: var(--#{$prefix}spacing-s) 0;
+      color: var(--#{$prefix}header-slim-text-color);
+      @include media-breakpoint-up(lg) {
+        display: flex;
+        align-items: center;
+        padding: var(--#{$prefix}spacing-s);
+        text-decoration: none;
+      }
+      &:hover {
+        color: var(--#{$prefix}header-slim-text-color);
       }
-      .it-header-slim-right-zone,
-      .header-slim-right-zone {
-        // .header-slim-right-zone is .it-header-slim-right-zone now. We're keeping old class here for retrocompatibility
-        height: $header-slim-height;
+      &.active {
+        box-shadow: inset 0 -2px 0 var(--#{$prefix}header-slim-text-color);
+        color: var(--#{$prefix}header-slim-text-color);
       }
     }
+  }
 
-    padding: 0;
-    .collapse:not(.show) {
-      display: flex;
-      justify-content: flex-end;
-    }
+  // Style for the dropdown and opener icon inside header slim
+  .dropdown-toggle .icon,
+  .it-opener .icon {
+    width: var(--#{$prefix}icon-size-xs);
+    height: var(--#{$prefix}icon-size-xs);
+    margin-left: var(--#{$prefix}icon-spacing);
+    fill: currentColor; // set default text color to icon
+    transform-origin: center;
+    transition: transform var(--#{$prefix}transition-instant);
   }
-  .is-sticky {
-    .it-user-wrapper .dropdown-menu.show {
-      transform: translate3d(0, 6px, 0) !important;
-      padding-bottom: 0.5rem;
-    }
-    .link-list-wrapper ul li a .icon {
-      width: $header-slim-icon-size;
-      height: $header-slim-icon-size;
-    }
+}
+
+// Header slim right zone height
+.it-header-slim-right-zone,
+.header-slim-right-zone {
+  height: var(--#{$prefix}header-slim-height);
+}
+
+// Spacing between language dropdown and login button
+.it-header-slim-right-zone,
+.header-slim-right-zone,
+.it-access-top-wrapper {
+  margin-left: var(--#{$prefix}spacing-m);
+}
+
+.it-header-slim-right-zone {
+  .btn-primary:hover {
+    --#{$prefix}btn-background: var(--#{$prefix}color-background-primary-deep); // Override default hover color
   }
 }

package/src/scss/components/_headerslimtheme.scss

@@ -1,3 +1,17 @@
+// Component: headerslimtheme
+//
+// Description: Component styles for headerslimtheme
+//
+
+// Variables
+//
+
+// Properties
+//
+
+// Styles
+//
+
 .it-header-slim-wrapper {
   &.theme-light {
     background: $header-slim-theme-light-bg-color;