bootstrap-italia 2.17.2 → 3.0.0-alpha.0

package/src/scss/components/_footer.scss

@@ -1,97 +1,140 @@
+// Component: footer
+//
+// Description: Component styles for footer
+//
+
+// Variables
+//
+
+// Properties
+//
+
 .it-footer {
-  h4,
+  --#{$prefix}footer-bottom-background: var(--#{$prefix}color-background-primary-deep); // Controls the bottom background for the footer, using color tokens.
+  --#{$prefix}footer-brand-icon-color: var(--#{$prefix}icon-inverse); // Controls the brand icon color for the footer, using icon tokens.
+  --#{$prefix}footer-brand-icon-size: 3rem; // Controls the brand icon size for the footer.
+  --#{$prefix}footer-top-background: var(--#{$prefix}color-background-primary-muted); // Controls the top background for the footer, using color tokens.
+  @include media-breakpoint-up(lg) {
+    --#{$prefix}footer-brand-icon-size: 3.5rem; // 56px
+  }
+}
+
+// Styles
+//
+
+/* stylelint-disable-next-line no-duplicate-selectors */
+.it-footer {
+  h4 {
+    margin-bottom: var(--#{$prefix}spacing-s);
+    font-size: var(--#{$prefix}label-font-size);
+    text-transform: uppercase;
+  }
+
   ul,
   li,
   p {
-    font-size: 1rem;
+    font-size: var(--#{$prefix}label-font-size);
+    line-height: var(--#{$prefix}body-line-height);
   }
 
-  a {
-    color: $white;
-    &:hover {
-      color: color-hover($white);
-    }
+  // Links color and decoration
+  a,
+  a:hover,
+  .link-list-wrapper li a:not(.disabled) {
+    color: var(--#{$prefix}color-text-inverse);
+    text-decoration-color: hsla(0, 0%, 100%, 0.5);
+    text-decoration-thickness: 1px;
+    text-underline-offset: 3px;
+  }
+
+  a:hover,
+  .link-list-wrapper li a:hover {
+    text-decoration-color: var(--#{$prefix}color-text-inverse);
+  }
+
+  // Override default hover color
+  .btn-primary:hover {
+    --#{$prefix}btn-background: var(--#{$prefix}color-background-primary-deep);
   }
 }
 
 .it-footer-main {
-  --bs-border-opacity: 0.5;
-  background-color: $footer-top-background;
-  color: $white;
-  font-size: 1rem;
+  background-color: var(--#{$prefix}footer-top-background);
+  color: var(--#{$prefix}color-text-inverse);
+  font-size: var(--#{$prefix}body-font-size);
+  padding-top: var(--#{$prefix}spacing-l);
+  padding-bottom: var(--#{$prefix}spacing-l);
 
-  h4 {
-    text-transform: uppercase;
+  section {
+    margin: 0 var(--#{$prefix}spacing-xs);
   }
 
-  .link-list-wrapper ul li {
-    a:not(.disabled) {
-      padding: 0;
-      line-height: 2rem;
-      text-decoration: underline;
-    }
+  label {
+    font-weight: var(--#{$prefix}font-weight-solid);
   }
 
-  .it-brand-wrapper {
-    padding: $v-gap * 4 0;
+  .link-list-wrapper ul li:not(:last-child) {
+    margin-bottom: var(--#{$prefix}spacing-xs);
+  }
+
+  // Override the default .link-list styles - /components/_linklist.scss
+  .link-list-wrapper .list-item {
+    padding: 0;
+    text-decoration: underline;
+  }
 
+  .it-brand-wrapper {
     .it-brand-text {
-      padding-right: $v-gap * 3;
+      padding-right: var(--#{$prefix}spacing-m);
     }
 
     a {
       display: flex;
       align-items: center;
       text-decoration: none;
+    }
 
-      h2 {
-        font-size: $header-center-h2-size-mob;
-        margin-bottom: 0;
-        font-weight: $header-center-h2-weight;
-        letter-spacing: unset;
-        line-height: 1.1;
-      }
-
-      h3 {
-        font-size: $header-center-h3-size;
-        font-weight: normal;
-        margin-bottom: 0;
-      }
-
-      &:hover {
-        text-decoration: none;
-      }
+    h2 {
+      margin-bottom: var(--#{$prefix}spacing-3xs);
+      font-size: var(--#{$prefix}heading-5-font-size);
+      font-weight: var(--#{$prefix}heading-font-weight-weak);
+    }
 
-      .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;
-      }
+    h3 {
+      padding-top: 0;
+      font-size: var(--#{$prefix}body-font-size);
+      font-weight: var(--#{$prefix}body-font-weight);
     }
-  }
 
-  section {
-    padding: 0 $v-gap * 2;
+    .icon {
+      flex-shrink: 0;
+      width: var(--#{$prefix}footer-brand-icon-size);
+      height: var(--#{$prefix}footer-brand-icon-size);
+      margin-right: var(--#{$prefix}spacing-xs);
+      fill: var(--#{$prefix}footer-brand-icon-color);
+    }
   }
 
-  label {
-    font-weight: 600;
+  // Override the utility '.border-white' opacity - /utilities/colors.scss
+  .border-white {
+    --#{$prefix}border-opacity: 0.5;
   }
 }
 
 .it-footer-small-prints {
-  background-color: $footer-bottom-background;
+  background-color: var(--#{$prefix}footer-bottom-background);
 
   ul.it-footer-small-prints-list {
-    padding: 1.5rem 1rem;
+    padding: var(--#{$prefix}spacing-m) var(--#{$prefix}spacing-xs);
 
     li {
-      padding: 0.5rem 0;
+      padding: var(--#{$prefix}spacing-xs) 0;
+      font-size: var(--#{$prefix}label-font-size-s);
+
       &:first-child {
         padding-top: 0;
       }
+
       &:last-child {
         padding-bottom: 0;
       }
@@ -99,36 +142,17 @@
   }
 }
 
-.form-newsletter {
-  input[type='email'] {
-    font-size: 1rem;
-    & ~ * {
-      margin-top: 1em;
-    }
-  }
-
-  button {
-    display: block;
-    width: 100%;
-  }
-
-  @include media-breakpoint-up(lg) {
-    button {
-      display: inline-block;
-      width: auto;
-    }
-  }
-}
 //Tablet vertical
 @include media-breakpoint-up(md) {
   .it-footer-small-prints {
     ul.it-footer-small-prints-list {
       li {
-        padding: 0 1rem;
+        padding: 0 var(--#{$prefix}spacing-xs);
 
         &:first-child {
           padding-left: 0;
         }
+
         &:last-child {
           padding-right: 0;
         }

package/src/scss/components/_forward.scss

@@ -1,3 +1,17 @@
+// Component: forward
+//
+// Description: Component styles for forward
+//
+
+// Variables
+//
+
+// Properties
+//
+
+// Styles
+//
+
 .forward {
   display: block;
   text-align: center;

package/src/scss/components/_grid.scss

@@ -1,3 +1,17 @@
+// Component: grid
+//
+// Description: Component styles for grid
+//
+
+// Variables
+//
+
+// Properties
+//
+
+// Styles
+//
+
 @use 'sass:math';
 
 // Row
@@ -67,9 +81,9 @@
 .row {
   &.row-column-border {
     & > [class^='col-'] {
-      padding-top: 2rem;
-      padding-bottom: 2rem;
-      border-top: 1px solid $border-color;
+      padding-top: var(--#{$prefix}spacing-l);
+      padding-bottom: var(--#{$prefix}spacing-l);
+      border-top: var(--#{$prefix}border-base) solid var(--#{$prefix}color-border-subtle);
 
       &:first-child {
         border: none;
@@ -89,30 +103,30 @@
 
   &.row-column-menu-left {
     & > [class^='col-']:first-child {
-      padding: 1rem 0;
+      padding: var(--#{$prefix}spacing-s) 0;
     }
   }
 
   &.row-column-menu-right {
     & > [class^='col-']:last-child {
-      padding: 1rem 0;
+      padding: var(--#{$prefix}spacing-s) 0;
     }
   }
 
   &.row-card {
-    background-color: $white;
+    background-color: var(--#{$prefix}color-background-inverse);
   }
 
   // Desktop
   @include media-breakpoint-up(lg) {
     &.row-column-border {
       margin-top: 1rem;
-      border-top: 1px solid $border-color;
+      border-top: var(--#{$prefix}border-base) solid var(--#{$prefix}color-border-subtle);
 
       & > [class^='col-'] {
         padding: 3rem 3rem;
         border-top: none;
-        border-left: 1px solid $border-color;
+        border-left: var(--#{$prefix}border-base) solid var(--#{$prefix}color-border-subtle);
 
         &:first-child {
           border: none;
@@ -175,16 +189,16 @@
   &.row-border {
     @for $i from 1 through 6 {
       h#{$i} {
-        border-bottom: 1px solid $border-color;
-        padding-bottom: 1rem;
-        margin-bottom: 1rem;
+        border-bottom: var(--#{$prefix}border-base) solid var(--#{$prefix}color-border-subtle);
+        padding-bottom: var(--#{$prefix}spacing-s);
+        margin-bottom: var(--#{$prefix}spacing-s);
       }
     }
 
     @include media-breakpoint-up(sm) {
-      border-bottom: 1px solid $border-color;
-      padding-bottom: 1rem;
-      margin-bottom: 1rem;
+      border-bottom: var(--#{$prefix}border-base) solid var(--#{$prefix}color-border-subtle);
+      padding-bottom: var(--#{$prefix}spacing-s);
+      margin-bottom: var(--#{$prefix}spacing-s);
 
       @for $i from 1 through 6 {
         h#{$i} {
@@ -214,14 +228,9 @@
       width: auto;
 
       .navbar {
-        padding-top: 1rem;
-        padding-bottom: 1rem;
-        // border-bottom: 1px solid $border-color;
-
-        // &.it-bottom-navscroll {
-        border-top: 1px solid $border-color;
-        // border-bottom: none;
-        // }
+        padding-top: var(--#{$prefix}spacing-s);
+        padding-bottom: var(--#{$prefix}spacing-s);
+        border-top: var(--#{$prefix}border-base) solid var(--#{$prefix}color-border-subtle);
       }
 
       &.sticky-expanded {

package/src/scss/components/_gridlist.scss

@@ -1,10 +1,38 @@
-//mobile
+// Component: gridlist
+//
+// Description: Component styles for gridlist
+//
+
+// Variables
+//
+
+// Properties
+//
+
+// Styles
+//
+
+// Gridlist variables
+//
+
+$grid-item-df-proportion: 66.81222707423581%;
+$grid-item-df-double-proportion: 33.4061135371179%;
+$grid-item-text-size: 0.75rem;
+$grid-list-default-gap: 2px;
+$grid-list-text-gap: 8px;
+$grid-item-sm-col: 50%;
+$grid-item-lg-col: 33.333333%;
+$grid-item-icon-size: 1.5rem;
+$grid-item-overlay: hsla(210%, 54%, 20, 0.85);
+
+// ---------------------------------------- //
+
 .it-grid-item-wrapper {
   position: relative;
 
   // img default proportion
   .img-responsive-wrapper {
-    border-radius: $border-radius;
+    border-radius: var(--#{$prefix}radius-smooth);
 
     .img-responsive {
       padding-bottom: $grid-item-df-proportion;
@@ -19,13 +47,13 @@
 
     .it-griditem-text {
       font-size: $grid-item-text-size;
-      font-weight: $font-weight-semibold;
+      font-weight: var(--#{$prefix}font-weight-solid);
     }
 
     .icon {
       flex-shrink: 0;
       position: relative;
-      fill: $primary;
+      fill: var(--#{$prefix}icon-primary);
       width: $grid-item-icon-size;
       height: $grid-item-icon-size;
     }
@@ -56,7 +84,7 @@
       right: 0;
       bottom: 0;
       background: transparent;
-      padding: $v-gap $v-gap * 2;
+      padding: var(--#{$prefix}spacing-xxs) calc(var(--#{$prefix}spacing-xxs) * 2);
       color: $white;
       text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
       .it-griditem-text {
@@ -80,14 +108,8 @@
 
   a {
     display: block;
-    text-decoration: none;
-    color: $grid-item-text-color;
-  }
-  // hover
-  a:hover {
-    .it-griditem-text {
-      text-decoration: underline;
-    }
+    text-decoration: underline;
+    color: var(--#{$prefix}color-text-secondary);
   }
   // double
   &.it-grid-item-double-w {
@@ -99,12 +121,12 @@
   }
 }
 
-// grid default
+// Grid default
 .it-grid-list-wrapper {
   padding-left: $grid-list-default-gap * 2;
   padding-right: $grid-list-default-gap * 2;
 
-  // grid changes
+  // Grid changes
   div[class^='col-'] {
     padding: 0 $grid-list-default-gap $grid-list-default-gap * 2 $grid-list-default-gap;
   }
@@ -116,7 +138,7 @@
     flex-wrap: wrap;
   }
 
-  // grid with label
+  // Grid with label
   &.it-image-label-grid {
     padding-left: $grid-list-text-gap * 2;
     padding-right: $grid-list-text-gap * 2;
@@ -140,7 +162,7 @@
   }
 }
 
-//small - tablet
+// Device small - tablet
 @include media-breakpoint-up(sm) {
   .it-masonry {
     .it-grid-item-wrapper {
@@ -165,12 +187,12 @@
   }
 }
 
-//Tablet horizontal / small desktop
+// Device Tablet horizontal / small desktop
 @include media-breakpoint-up(lg) {
   .it-grid-item-wrapper {
     &.it-grid-item-overlay {
       .it-griditem-text-wrapper {
-        padding: $v-gap * 2 $v-gap * 3;
+        padding: var(--#{$prefix}spacing-s) var(--#{$prefix}spacing-m);
 
         .it-griditem-text {
           font-size: $grid-item-text-size;