bootstrap-italia 2.17.2 → 3.0.0-alpha.0

package/src/scss/components/_header.scss

@@ -1,150 +1,167 @@
-//mobile
-@use 'sass:math';
+// Component: header
+//
+// Description: Component styles for header
+//
+
+// Variables
+//
+
+// Properties
+//
+
+.it-header-wrapper,
+.it-header-slim-wrapper,
+.it-header-center-wrapper,
+.it-header-navbar-wrapper {
+  --#{$prefix}header-brand-color: var(--#{$prefix}color-text-inverse); // Controls the brand color for the header, using color tokens.
+  --#{$prefix}header-brand-icon-color: var(--#{$prefix}icon-inverse); // Controls the brand icon color for the header, using icon tokens.
+  --#{$prefix}header-brand-size: 2.5rem; // Controls the brand size for the header.
+  --#{$prefix}header-brand-spacing: var(--it-spacing-14x); // Controls the brand spacing for the header, using spacing tokens.
+  --#{$prefix}header-brand-tagline-size: var(--#{$prefix}body-font-size); // Controls the brand tagline size for the header, using font tokens.
+  --#{$prefix}header-brand-title-size: var(--#{$prefix}heading-5-font-size); // Controls the brand title size for the header, using font tokens.
+  --#{$prefix}header-center-background: var(--#{$prefix}color-background-primary); // Controls the center background for the header, using color tokens.
+  --#{$prefix}header-center-font-size: var(--#{$prefix}label-font-size-s); // Controls the center font size for the header, using font tokens.
+  --#{$prefix}header-center-height: 4.5rem; // Controls the center height for the header.
+  --#{$prefix}header-center-text-color: var(--#{$prefix}color-text-inverse); // Controls the center text color for the header, using color tokens.
+  --#{$prefix}header-nav-background: var(--#{$prefix}color-background-primary); // Controls the nav background for the header, using color tokens.
+  --#{$prefix}header-nav-secondary-font-size: var(--#{$prefix}label-font-size); // Controls the nav secondary font size for the header, using font tokens.
+  --#{$prefix}header-nav-text-color: var(--#{$prefix}color-link); // Controls the nav text color for the header, using color tokens.
+  --#{$prefix}header-search-button-background: var(
+    --#{$prefix}color-background-inverse
+  ); // Controls the search button background for the header, using color tokens.
+  --#{$prefix}header-search-button-color: var(--#{$prefix}icon-inverse); // Controls the search button color for the header, using icon tokens.
+  --#{$prefix}header-search-button-size: 3rem; // Controls the search button size for the header.
+  --#{$prefix}header-search-icon-color: var(--#{$prefix}icon-inverse); // Controls the search icon color for the header, using icon tokens.
+  --#{$prefix}header-search-icon-size: 1.5rem; // Controls the search icon size for the header.
+  --#{$prefix}header-slim-background: var(--it-color-blue-30); // Controls the slim background for the header. // TODO: use variable when ready
+  --#{$prefix}header-slim-border-color: hsla(0, 0%, 100%, 0.2); // Controls the slim border color for the header.
+  --#{$prefix}header-slim-font-size: var(--#{$prefix}label-font-size-s); // Controls the slim font size for the header, using font tokens.
+  --#{$prefix}header-slim-height: 3rem; // Controls the slim height for the header.
+  --#{$prefix}header-slim-text-color: var(--#{$prefix}color-text-inverse); // Controls the slim text color for the header, using color tokens.
+  --#{$prefix}header-social-color: var(--#{$prefix}icon-inverse); // Controls the social color for the header, using icon tokens.
+  --#{$prefix}header-spacing-inset: var(--#{$prefix}spacing-xxs); // Controls the inset spacing for the header, using spacing tokens.
+  @include media-breakpoint-up(md) {
+    --#{$prefix}header-brand-size: 3.5rem; // 56px
+    --#{$prefix}header-search-icon-color: var(--#{$prefix}icon-primary);
+  }
+  @include media-breakpoint-up(lg) {
+    --#{$prefix}header-brand-size: 4.5rem; // 72px
+    --#{$prefix}header-brand-title-size: var(--#{$prefix}heading-3-font-size);
+    --#{$prefix}header-center-height: 7.5rem; // 120px
+    --#{$prefix}header-nav-text-color: var(--#{$prefix}color-text-inverse);
+  }
+}
+
+// Styles
+//
+
+// Light theme
+.it-header-slim-wrapper.theme-light,
+.it-header-center-wrapper.theme-light,
+.it-header-navbar-wrapper.theme-light,
+.it-header-navbar-wrapper.theme-light-desk {
+  --#{$prefix}header-brand-color: var(--#{$prefix}color-text-primary);
+  --#{$prefix}header-brand-icon-color: var(--#{$prefix}icon-primary);
+  --#{$prefix}header-center-background: var(--#{$prefix}color-background-inverse);
+  --#{$prefix}header-center-text-color: var(--#{$prefix}color-link);
+  --#{$prefix}header-nav-background: var(--#{$prefix}color-background-inverse);
+  --#{$prefix}header-nav-text-color: var(--#{$prefix}color-link);
+  --#{$prefix}header-search-button-background: var(--#{$prefix}color-background-primary);
+  --#{$prefix}header-search-icon-color: var(--#{$prefix}icon-primary);
+  --#{$prefix}header-slim-background: var(--#{$prefix}color-background-inverse);
+  --#{$prefix}header-slim-border-color: hsla(210, 100%, 40%, 0.2);
+  --#{$prefix}header-slim-text-color: var(--#{$prefix}color-link);
+  --#{$prefix}header-social-color: var(--#{$prefix}icon-primary);
+  @include media-breakpoint-up(md) {
+    --#{$prefix}header-search-icon-color: var(--#{$prefix}icon-inverse);
+  }
+}
 
 .it-header-wrapper {
   position: relative;
   z-index: 5;
 
-  .it-nav-wrapper {
-    position: relative;
-    z-index: auto;
+  &.it-header-sticky.is-sticky {
+    width: 100%;
 
-    // se ha un menu
-    .it-brand-wrapper {
-      padding-left: $v-gap * 4;
+    .it-nav-wrapper {
+      top: 0;
+      z-index: 10;
+      width: 100%;
     }
 
-    .it-header-navbar-wrapper {
-      transition: padding-top 0.3s ease;
-      position: absolute;
-      z-index: 3;
-      left: 0;
-      top: 50%;
-      margin-top: -$header-nav-button-distance;
-
-      nav {
-        padding-left: $header-general-padding - ($grid-columns * 0.5);
-        padding-right: $header-general-padding - ($grid-columns * 0.5);
-
-        .custom-navbar-toggler {
-          padding: 0;
-          transform: translateX(-2px);
-          cursor: pointer;
-        }
-      }
+    .it-header-slim-wrapper {
+      display: none;
     }
-  }
-
-  &.it-header-sticky {
-    &.is-sticky {
-      width: 100%;
-
-      .it-nav-wrapper {
-        //position: fixed;
-        top: 0;
-        width: 100%;
-        z-index: 10; //livello +10 del it-navscroll
-      }
 
-      .it-header-slim-wrapper {
+    @include media-breakpoint-up(lg) {
+      .it-header-slim-wrapper,
+      .it-header-center-wrapper {
         display: none;
       }
 
-      @include media-breakpoint-up(lg) {
-        .it-header-slim-wrapper,
-        .it-header-center-wrapper {
-          display: none;
-        }
+      .it-header-navbar-wrapper {
+        top: 0;
+        width: 100%;
 
-        .it-header-navbar-wrapper {
-          //position: fixed;
-          width: 100%;
-          top: 0;
+        .menu-wrapper {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          justify-content: flex-start;
 
-          .menu-wrapper {
-            display: flex;
-            flex-direction: row;
-            justify-content: flex-start;
-            align-items: center;
+          .it-brand-wrapper {
+            align-self: center;
 
-            .it-brand-wrapper {
-              align-self: center;
+            &.cloned-element {
+              .it-brand-text {
+                display: none;
+              }
 
-              &.cloned-element {
-                .it-brand-text {
-                  display: none;
+              a {
+                color: var(--#{$prefix}header-brand-color);
+                &:hover {
+                  text-decoration: none;
                 }
 
-                a {
-                  color: $header-center-text-color;
-
-                  &:hover {
-                    text-decoration: none;
-                  }
-
-                  .icon {
-                    fill: $header-center-text-color;
-                    width: $header-center-icon-size * 0.5;
-                    height: $header-center-icon-size * 0.5;
-                    margin-right: $header-center-icon-margin;
-                    flex-shrink: 0;
-                  }
+                .icon {
+                  flex-shrink: 0;
+                  width: var(--#{$prefix}header-brand-size);
+                  height: var(--#{$prefix}header-brand-size);
+                  margin-right: var(--#{$prefix}spacing-xxs);
+                  fill: var(--#{$prefix}header-brand-icon-color);
                 }
               }
             }
+          }
 
-            .it-search-wrapper {
-              display: flex;
-              align-items: center;
-              align-self: center;
-              margin-left: math.div($header-center-search-distance, 3);
-              font-size: $header-center-text-size;
-              color: $header-center-text-color;
+          .it-search-wrapper {
+            display: flex;
+            align-items: center;
+            align-self: center;
+            margin-left: 4rem;
+            color: var(--#{$prefix}header-center-text-color);
+            font-size: var(--#{$prefix}header-center-font-size);
 
+            &.cloned-element {
               a {
-                &.rounded-icon {
-                  width: $header-center-search-size;
-                  height: $header-center-search-size;
-                  border-radius: $header-center-search-radius;
-                  background: $header-center-text-color;
-                  display: flex;
-                  justify-content: center;
-                  align-items: center;
-                  margin-left: $v-gap * 2;
-                  transition: all 0.3s;
-
-                  &:hover {
-                    background: shade-color($header-center-text-color, 5%);
-                  }
-
-                  svg {
-                    fill: $header-center-bg-color;
-                    width: $header-center-search-icon-size;
-                    height: $header-center-search-icon-size;
-                  }
-                }
-              }
+                width: 35px;
+                height: 35px;
 
-              &.cloned-element {
-                a {
-                  width: 35px;
-                  height: 35px;
-
-                  svg {
-                    width: 20px;
-                    height: 20px;
-                  }
+                svg {
+                  width: 20px;
+                  height: 20px;
                 }
               }
             }
+          }
 
-            .navbar-nav {
-              flex: 1;
+          .navbar-nav {
+            flex: 1;
 
-              // hide navbar-secondary if header is sticky
-              &.navbar-secondary {
-                display: none;
-              }
+            // hide navbar-secondary if header is sticky
+            &.navbar-secondary {
+              display: none;
             }
           }
         }
@@ -153,32 +170,23 @@
   }
 }
 
-//Tablet horizontal / small desktop
-@include media-breakpoint-up(lg) {
-  .it-header-wrapper {
-    .it-nav-wrapper {
-      .it-brand-wrapper {
-        padding-left: 0;
-      }
-
-      position: relative;
-
-      .it-header-navbar-wrapper {
-        position: inherit;
-        left: auto;
-        top: inherit;
-        margin-top: 0;
-
-        nav {
-          padding-left: $header-general-padding - ($grid-columns * 0.5);
-          padding-right: $header-general-padding - ($grid-columns * 0.5);
-        }
-      }
-    }
+.it-nav-wrapper {
+  position: relative;
+  z-index: auto;
+}
 
-    .navbar .navbar-collapsable .menu-wrapper .nav-item.megamenu .dropdown-menu {
-      left: 0;
-      right: 0;
-    }
+.it-header-navbar-wrapper {
+  position: absolute;
+  top: 50%;
+  left: 8px;
+  z-index: 3;
+  margin-top: -20px;
+  transition: padding-top var(--#{$prefix}transition-instant) ease;
+  @include media-breakpoint-up(lg) {
+    position: inherit;
+    top: inherit;
+    left: auto;
+    margin-top: 0;
+    background: var(--#{$prefix}header-nav-background);
   }
 }

package/src/scss/components/_headercenter.scss

@@ -1,219 +1,155 @@
-//mobile
+// Component: headercenter
+//
+// Description: Component styles for headercenter
+//
+
+// Variables
+//
+
+// Properties
+//
+
+// Styles
+//
+
 .it-header-center-wrapper {
-  background: $header-center-bg-color;
-  height: $header-center-max-height-mob;
   display: flex;
   align-items: center;
-  padding-left: $header-general-padding - ($grid-columns * 0.5);
-  padding-right: $header-general-padding - ($grid-columns * 0.5);
+  height: var(--#{$prefix}header-center-height);
+  background: var(--#{$prefix}header-center-background);
+
+  // Header Center Small
   &.it-small-header {
-    height: $header-center-small-mob-height;
+    --#{$prefix}header-center-height: 4rem; // 64px
+    @include media-breakpoint-up(lg) {
+      --#{$prefix}header-center-height: 6.5rem; // 104px
+    }
   }
+}
 
-  .it-header-center-content-wrapper {
-    display: flex;
+.it-header-center-content-wrapper {
+  display: flex;
+  flex-basis: 100%;
+  align-items: center;
+  justify-content: space-between;
+  @include media-breakpoint-up(lg) {
+    padding: 0 var(--#{$prefix}header-spacing-inset);
+  }
+}
+
+// Right zone
+.it-right-zone {
+  display: flex;
+  align-items: center;
+  color: var(--#{$prefix}header-center-text-color);
+
+  .it-socials {
     align-items: center;
-    justify-content: space-between;
-    flex-basis: 100%;
-    .it-brand-wrapper {
-      .it-brand-text {
-        padding-right: $v-gap * 3;
-      }
-      a {
-        display: flex;
-        color: $header-center-text-color;
-        align-items: center;
-        text-decoration: none;
-        h2,
-        .it-brand-title {
-          font-size: $header-center-h2-size-mob;
-          margin-bottom: 0;
-          font-weight: $header-center-h2-weight;
-          letter-spacing: unset;
-          line-height: 1.1;
-        }
-        h3,
-        .it-brand-tagline {
-          font-size: $header-center-h3-size;
-          font-weight: normal;
-          margin-bottom: 0;
-        }
-        &:hover {
-          text-decoration: none;
-        }
-        .icon {
-          fill: $header-center-text-color;
-          width: $header-center-icon-size-mob;
-          height: $header-center-icon-size-mob;
-          margin-right: $header-center-icon-margin-mob;
-          flex-shrink: 0;
-        }
-      }
-    }
+    font-size: var(--#{$prefix}header-center-font-size);
 
-    //right zone
-    .it-right-zone {
-      color: $header-center-text-color;
+    ul {
       display: flex;
-      align-items: center;
-      .it-socials {
-        align-items: center;
-        font-size: $header-center-text-size;
-        ul {
-          list-style-type: none;
-          margin: 0;
-          padding: 0;
-          display: flex;
-          .icon {
-            fill: $header-center-text-color;
-            width: $header-center-social-size;
-            height: $header-center-social-size;
-            margin-left: $header-center-social-distance;
-          }
-        }
-      }
+      margin: 0;
+      padding: 0;
+      list-style-type: none;
     }
-    //-search
-    .it-search-wrapper {
-      display: flex;
-      align-items: center;
-      font-size: $header-center-text-size;
-      a {
-        &.rounded-icon {
-          width: $header-center-search-size * 0.5;
-          height: $header-center-search-size * 0.5;
-          display: block;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          svg {
-            fill: $header-center-text-color;
-            width: $header-center-search-icon-size;
-            height: $header-center-search-icon-size;
-          }
-        }
+
+    .icon {
+      width: var(--#{$prefix}icon-size-s);
+      height: var(--#{$prefix}icon-size-s);
+      margin-left: var(--#{$prefix}spacing-s);
+      fill: var(--#{$prefix}header-social-color);
+      &:hover {
+        --#{$prefix}header-social-color: var(--#{$prefix}color-background-inverse-hover);
       }
     }
   }
 }
 
-//Tablet vertical
-@media (min-width: #{map-get($grid-breakpoints, md)}) {
-  .it-header-center-wrapper .it-header-center-content-wrapper .it-search-wrapper {
-    margin-left: $header-center-search-distance * 0.5;
+// Search
+.it-search-wrapper {
+  display: flex;
+  align-items: center;
+  font-size: var(--#{$prefix}header-center-font-size);
+  @include media-breakpoint-up(md) {
+    margin-left: 3rem; // 48px
   }
-  .it-header-center-wrapper .it-header-center-content-wrapper .it-search-wrapper a.rounded-icon {
-    margin-left: $v-gap;
+
+  a.rounded-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--#{$prefix}header-search-button-size);
+    height: var(--#{$prefix}header-search-button-size);
+    border-radius: var(--#{$prefix}radius-rounded);
+    background-color: transparent;
+    @include media-breakpoint-up(md) {
+      margin-left: var(--#{$prefix}icon-spacing);
+      background-color: var(--#{$prefix}header-search-button-background);
+    }
+    @include media-breakpoint-up(lg) {
+      width: 3.5rem; // 56px
+      height: 3.5rem; // 56px
+      &:hover {
+        background: var(--#{$prefix}color-background-inverse-hover);
+      }
+    }
+
+    svg {
+      width: var(--#{$prefix}header-search-icon-size);
+      height: var(--#{$prefix}header-search-icon-size);
+      fill: var(--#{$prefix}header-search-icon-color);
+    }
   }
 }
 
-//Tablet horizontal / small desktop
-@media (min-width: #{map-get($grid-breakpoints, lg)}) {
-  .it-header-center-wrapper {
-    height: $header-center-max-height;
+// Brand
+.it-brand-wrapper {
+  padding-left: var(--#{$prefix}header-brand-spacing);
+
+  @include media-breakpoint-up(lg) {
     padding-left: 0;
-    padding-right: 0;
-    padding-top: 6px;
-    &.it-small-header {
-      height: $header-center-small-height;
-      .it-header-center-content-wrapper .it-brand-wrapper a h2 {
-        font-size: $header-center-small-h2-size;
-      }
-      .it-header-center-content-wrapper .it-brand-wrapper a h3 {
-        font-size: $header-center-small-h3-size;
-        margin-top: $v-gap * 0.5;
-      }
+  }
+
+  .it-brand-text {
+    margin-right: var(--#{$prefix}spacing-xxs);
+  }
+
+  a {
+    display: flex;
+    align-items: center;
+    color: var(--#{$prefix}header-brand-color);
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: none;
     }
-    .it-header-center-content-wrapper {
-      padding-left: $header-general-padding - ($grid-columns * 0.5);
-      padding-right: $header-general-padding - ($grid-columns * 0.5);
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      flex-basis: 100%;
-      .it-brand-wrapper {
-        margin-left: 0;
-        a {
-          display: flex;
-          align-items: center;
-          h2,
-          .it-brand-title {
-            font-size: $header-center-h2-size;
-            margin-bottom: 0;
-            font-weight: $header-center-h2-weight;
-          }
-          h3,
-          .it-brand-tagline {
-            font-size: $header-center-h3-size;
-            font-weight: normal;
-            margin-bottom: 0;
-          }
-          &:hover {
-            text-decoration: none;
-          }
-          .icon {
-            width: $header-center-icon-size;
-            height: $header-center-icon-size;
-            margin-right: $header-center-icon-margin;
-          }
-        }
-      }
 
-      //right zone
-      .it-right-zone {
-        display: flex;
-        align-items: center;
-        .it-socials {
-          align-items: center;
-          font-size: $header-center-text-size;
-          ul {
-            list-style-type: none;
-            margin: 0;
-            padding: 0;
-            display: flex;
-            .icon {
-              width: $header-center-social-size;
-              height: $header-center-social-size;
-              margin-left: $header-center-social-distance;
-            }
-            a {
-              &:hover {
-                svg {
-                  fill: darken($header-center-text-color, 5%);
-                }
-              }
-            }
-          }
-        }
-      }
-      //-search
-      .it-search-wrapper {
-        display: flex;
-        align-items: center;
-        margin-left: $header-center-search-distance;
-        font-size: $header-center-text-size;
-        a {
-          &.rounded-icon {
-            width: $header-center-search-size;
-            height: $header-center-search-size;
-            border-radius: $header-center-search-radius;
-            background: $header-center-text-color;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            margin-left: $v-gap * 2;
-            transition: all 0.3s;
-            &:hover {
-              background: darken($header-center-text-color, 5%);
-            }
-            svg {
-              fill: $header-center-bg-color;
-              width: $header-center-search-icon-size;
-              height: $header-center-search-icon-size;
-            }
-          }
-        }
+    h2,
+    .it-brand-title {
+      margin-bottom: 0;
+      font-size: var(--#{$prefix}header-brand-title-size);
+      font-weight: var(--#{$prefix}heading-font-weight);
+      letter-spacing: unset;
+      line-height: var(--#{$prefix}heading-line-height);
+      @include media-breakpoint-up(lg) {
+        margin-bottom: var(--#{$prefix}spacing-3xs);
       }
     }
+
+    h3,
+    .it-brand-tagline {
+      margin-bottom: 0;
+      font-size: var(--#{$prefix}header-brand-tagline-size);
+      font-weight: var(--#{$prefix}body-font-weight);
+    }
+  }
+
+  // Brand icon
+  .icon {
+    width: var(--#{$prefix}header-brand-size);
+    height: var(--#{$prefix}header-brand-size);
+    margin-right: var(--#{$prefix}spacing-xxs);
+    fill: var(--#{$prefix}header-brand-icon-color);
   }
 }