bootstrap-italia 2.17.2 → 3.0.0-alpha.0

package/src/scss/components/_accordion.scss

@@ -1,5 +1,42 @@
+// Component: Accordion
 //
-// Base styles
+// Description: Styles for the Accordion component.
+
+// Properties
+//
+
+.accordion {
+  --#{$prefix}accordion-active-bg: var(
+    --#{$prefix}color-background-primary
+  ); // Controls the active background color for the accordion button, using color tokens.
+  --#{$prefix}accordion-active-color: var(
+    --#{$prefix}color-text-primary-active
+  ); // Controls the active text color for the accordion button, using color tokens.
+  --#{$prefix}accordion-background: var(--#{$prefix}page-background); // Controls the background color for the accordion item, using color tokens.
+  --#{$prefix}accordion-border-color: var(--#{$prefix}color-border-subtle); // Controls the border color for the accordion, using color tokens.
+  --#{$prefix}accordion-border-radius: var(--#{$prefix}radius-smooth); // Controls the border radius for the accordion, using radius tokens.
+  --#{$prefix}accordion-border-width: 0; // Controls the border width for the accordion wrapper.
+  --#{$prefix}accordion-body-padding-x: var(--#{$prefix}spacing-m); // Controls the horizontal padding for the accordion body, using spacing tokens.
+  --#{$prefix}accordion-body-padding-y: var(--#{$prefix}spacing-s); // Controls the vertical padding for the accordion body, using spacing tokens.
+  --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)}; // Controls the icon for the active accordion button.
+  --#{$prefix}accordion-btn-bg: var(--#{$prefix}accordion-background); // Controls the background color for the accordion button.
+  --#{$prefix}accordion-btn-color: var(--#{$prefix}color-text-primary); // Controls the text color for the accordion button, using color tokens.
+  --#{$prefix}accordion-btn-focus-border-color: #{$accordion-button-focus-border-color}; // Controls the border color for the accordion button on focus.
+  --#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow}; // Controls the box shadow for the accordion button on focus.
+  --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)}; // Controls the icon for the accordion button.
+  --#{$prefix}accordion-btn-icon-transform: rotate(-180deg); // Controls the transform for the accordion button icon when active.
+  --#{$prefix}accordion-btn-icon-transition: transform 0.2s ease-in-out; // Controls the transition for the accordion button icon.
+  --#{$prefix}accordion-btn-icon-width: 1.25rem; // Controls the width of the accordion button icon.
+  --#{$prefix}accordion-btn-line-height: var(--#{$prefix}font-line-height-1); // Controls the line height for the accordion button, using font tokens.
+  --#{$prefix}accordion-btn-padding-x: var(--#{$prefix}spacing-m); // Controls the horizontal padding for the accordion button, using spacing tokens.
+  --#{$prefix}accordion-btn-padding-y: var(--#{$prefix}spacing-s); // Controls the vertical padding for the accordion button, using spacing tokens.
+  --#{$prefix}accordion-color: var(--#{$prefix}color-text-base); // Controls the text color for the accordion item, using color tokens.
+  --#{$prefix}accordion-inner-border-radius: var(--#{$prefix}radius-smooth); // Controls the inner border radius for the accordion button, using radius tokens.
+  --#{$prefix}accordion-item-border-width: 1px; // Controls the border width for the accordion item.
+  --#{$prefix}accordion-transition: var(--#{$prefix}transition-instant); // Controls the transition timing for the accordion button, using transition tokens.
+}
+
+// Styles
 //
 
 .accordion-button {
@@ -8,19 +45,20 @@
   align-items: center;
   width: 100%;
   padding: var(--#{$prefix}accordion-btn-padding-y) var(--#{$prefix}accordion-btn-padding-x);
-  @include font-size($font-size-base);
+  border: 0; // Reset button style
+  line-height: var(--#{$prefix}accordion-btn-line-height);
+  background-color: var(--#{$prefix}accordion-btn-bg);
   color: var(--#{$prefix}accordion-btn-color);
   text-align: left; // Reset button style
-  background-color: var(--#{$prefix}accordion-btn-bg);
-  border: 0;
-  @include border-radius(0);
   overflow-anchor: none;
+  // @include font-size($font-size-base);
+  @include border-radius(0);
   @include transition(var(--#{$prefix}accordion-transition));
 
   &:not(.collapsed) {
-    color: var(--#{$prefix}accordion-active-color);
     background-color: var(--#{$prefix}accordion-active-bg);
-    box-shadow: inset 0 calc(-1 * var(--#{$prefix}accordion-border-width)) 0 var(--#{$prefix}accordion-border-color); // stylelint-disable-line function-disallowed-list
+    // box-shadow: inset 0 calc(-1 * var(--#{$prefix}accordion-border-width)) 0 var(--#{$prefix}accordion-border-color);
+    color: var(--#{$prefix}accordion-active-color);
 
     &::after {
       background-image: var(--#{$prefix}accordion-btn-active-icon);
@@ -30,11 +68,11 @@
 
   // Accordion icon
   &::after {
+    content: '';
     flex-shrink: 0;
     width: var(--#{$prefix}accordion-btn-icon-width);
     height: var(--#{$prefix}accordion-btn-icon-width);
     margin-left: auto;
-    content: '';
     background-image: var(--#{$prefix}accordion-btn-icon);
     background-repeat: no-repeat;
     background-size: var(--#{$prefix}accordion-btn-icon-width);
@@ -83,50 +121,34 @@
   }
 }
 
-$arrow-size: $font-size-base * 0.5;
-
-//collapse wrapper
+// Accordion Wrapper
+/* stylelint-disable-next-line no-duplicate-selectors */
 .accordion {
-  // scss-docs-start accordion-css-vars
-  --#{$prefix}accordion-color: #{$accordion-color};
-  --#{$prefix}accordion-bg: #{$accordion-bg};
-  --#{$prefix}accordion-transition: #{$accordion-transition};
-  --#{$prefix}accordion-border-color: #{$accordion-border-color};
-  --#{$prefix}accordion-border-width: #{$accordion-border-width};
-  --#{$prefix}accordion-border-radius: #{$accordion-border-radius};
-  --#{$prefix}accordion-inner-border-radius: #{$accordion-inner-border-radius};
-  --#{$prefix}accordion-btn-padding-x: #{$accordion-button-padding-x};
-  --#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y};
-  --#{$prefix}accordion-btn-color: #{$accordion-button-color};
-  --#{$prefix}accordion-btn-bg: #{$accordion-button-bg};
-  --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)};
-  --#{$prefix}accordion-btn-icon-width: #{$accordion-icon-width};
-  --#{$prefix}accordion-btn-icon-transform: #{$accordion-icon-transform};
-  --#{$prefix}accordion-btn-icon-transition: #{$accordion-icon-transition};
-  --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)};
-  --#{$prefix}accordion-btn-focus-border-color: #{$accordion-button-focus-border-color};
-  --#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow};
-  --#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x};
-  --#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y};
-  --#{$prefix}accordion-active-color: #{$accordion-button-active-color};
-  --#{$prefix}accordion-active-bg: #{$accordion-button-active-bg};
-  // scss-docs-end accordion-css-vars
-  border-bottom: 1px solid $gray-border; // UI kit;
+  border-left-width: var(--#{$prefix}accordion-border-width);
+  border-right-width: var(--#{$prefix}accordion-border-width);
+  border-top-width: var(--#{$prefix}accordion-border-width);
+  border-bottom: 0;
+  border-color: var(--#{$prefix}accordion-border-color);
+  border-style: solid;
+
+  // Nested Accordion
   .accordion {
-    border: 1px solid $gray-border; // UI kit;
-    border-top: 0;
+    border-left: 1px solid var(--#{$prefix}accordion-border-color);
+    border-right: 1px solid var(--#{$prefix}accordion-border-color);
   }
 
-  //background active version
+  // Background active version
   &.accordion-background-active {
     .accordion-header {
       .accordion-button[aria-expanded='true'] {
-        background-color: $primary;
-        color: $white;
-        border-color: $primary;
+        // border-color: var(--#{$prefix}color-border-primary);
+        background-color: var(--#{$prefix}color-background-primary);
+        color: var(--#{$prefix}color-text-inverse);
+
         &:before {
-          color: $white;
+          color: var(--#{$prefix}color-text-inverse);
         }
+
         &:after {
           content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 24 24' %3E%3Cg%3E%3Cpath fill='#{url-friendly-color($white)}' d='M12,10.3l4.8,4.8c0.3,0.3,0.8,0.3,1.1,0c0.3-0.3,0.3-0.8,0-1c0,0,0,0,0,0l-4.8-4.8c-0.6-0.6-1.5-0.6-2.1,0L6.2,14c-0.3,0.3-0.3,0.8,0,1c0,0,0,0,0,0c0.3,0.3,0.8,0.3,1.1,0L12,10.3z'/%3E%3C/g%3E%3C/svg%3E");
         }
@@ -134,15 +156,15 @@ $arrow-size: $font-size-base * 0.5;
     }
   }
 
-  //background hover version
+  // background hover version
   &.accordion-background-hover {
     .accordion-header {
       .accordion-button:hover {
-        background-color: $primary;
-        color: $white;
-        border-color: $primary;
+        // border-color: $primary;
+        background-color: var(--#{$prefix}color-background-primary);
+        color: var(--#{$prefix}color-text-inverse);
         &:before {
-          color: $white;
+          color: var(--#{$prefix}color-text-inverse);
         }
         &:after {
           content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 24 24' %3E%3Cg%3E%3Cpath fill='#{url-friendly-color($white)}' d='M12,10.3l4.8,4.8c0.3,0.3,0.8,0.3,1.1,0c0.3-0.3,0.3-0.8,0-1c0,0,0,0,0,0l-4.8-4.8c-0.6-0.6-1.5-0.6-2.1,0L6.2,14c-0.3,0.3-0.3,0.8,0,1c0,0,0,0,0,0c0.3,0.3,0.8,0.3,1.1,0L12,10.3z'/%3E%3C/g%3E%3C/svg%3E");
@@ -151,25 +173,27 @@ $arrow-size: $font-size-base * 0.5;
     }
   }
 
-  //left icon version
+  // left icon version
   &.accordion-left-icon {
     .accordion-header {
       .accordion-button {
         &:after {
           content: none;
         }
+
         &:before {
-          font-weight: 300;
           content: '-';
-          float: left;
-          margin: 0 1rem 0.3333333333333333rem 0;
           width: 1.5rem;
-          font-size: 1.5rem;
-          line-height: 1.2rem;
-          font-family: $font-family-sans-serif;
-          transform: none;
+          margin: 0 var(--#{$prefix}spacing-s) 0 0;
+          float: left;
           overflow: hidden;
+          font-family: var(--#{$prefix}font-serif);
+          font-size: var(--#{$prefix}heading-5-font-size);
+          font-weight: 300;
+          line-height: var(--#{$prefix}--#{$prefix}accordion-btn-line-height);
+          transform: none;
         }
+
         &[aria-expanded='false'] {
           &:before {
             content: '+';
@@ -180,11 +204,14 @@ $arrow-size: $font-size-base * 0.5;
   }
 }
 
-//item
+// Accordion item
+//
+
 .accordion-item {
+  border-top: var(--#{$prefix}accordion-item-border-width) solid var(--#{$prefix}accordion-border-color);
+  border-bottom: var(--#{$prefix}accordion-item-border-width) solid var(--#{$prefix}accordion-border-color);
+  background-color: var(--#{$prefix}accordion-background);
   color: var(--#{$prefix}accordion-color);
-  background-color: var(--#{$prefix}accordion-bg);
-  border: var(--#{$prefix}accordion-border-width) solid var(--#{$prefix}accordion-border-color);
 
   &:first-of-type {
     @include border-top-radius(var(--#{$prefix}accordion-border-radius));
@@ -212,7 +239,7 @@ $arrow-size: $font-size-base * 0.5;
       @include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
     }
   }
-  border: none;
+  // border: none;
   &:first-of-type,
   &:last-of-type {
     border-radius: 0;
@@ -222,76 +249,72 @@ $arrow-size: $font-size-base * 0.5;
   }
 }
 
-//header
+// Accordion header
+//
 .accordion-header {
-  margin-bottom: 0;
   position: relative;
+  margin-bottom: 0;
 
   .accordion-button {
     width: 100%;
-    text-align: left;
     border: 0;
     background-color: transparent;
-    border-top: 1px solid $gray-border; // UI kit;
     box-shadow: none;
-    padding: 14px 24px;
+    color: var(--#{$prefix}accordion-btn-color);
+    font-size: var(--#{$prefix}body-font-size);
+    font-weight: var(--#{$prefix}font-weight-solid);
     cursor: pointer;
-    color: $primary;
-    font-size: 1rem;
-    font-weight: 600;
-    line-height: 1.5rem;
-    @include media-breakpoint-up(lg) {
-      font-size: 1.125rem;
+
+    &:hover {
+      background: none;
+      text-decoration: underline;
+
+      &:after {
+        text-decoration: none;
+      }
     }
+
+    &:active,
+    &:hover,
+    &:focus {
+      border-top-color: var(--#{$prefix}accordion-border-color);
+    }
+
+    // Rotate icon
     &:not(.collapsed) {
-      color: $gray-secondary;
       &:after {
         transform: scaleY(1);
       }
     }
+
     &:not(.collapsed):hover:before,
     &[aria-expanded='true']:hover:before {
       text-decoration: none;
     }
+
     &:after {
       content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 24 24' %3E%3Cg%3E%3Cpath fill='#{url-friendly-color($primary)}' d='M12,10.3l4.8,4.8c0.3,0.3,0.8,0.3,1.1,0c0.3-0.3,0.3-0.8,0-1c0,0,0,0,0,0l-4.8-4.8c-0.6-0.6-1.5-0.6-2.1,0L6.2,14c-0.3,0.3-0.3,0.8,0,1c0,0,0,0,0,0c0.3,0.3,0.8,0.3,1.1,0L12,10.3z'/%3E%3C/g%3E%3C/svg%3E");
-      float: right;
       width: 1.5rem;
       height: auto;
-      line-height: 0.1rem;
-      color: $primary; // UI kit
-      transition: transform 0.3s;
+      float: right;
       background-image: none;
+      color: var(--#{$prefix}accordion-btn-color); // UI kit
+      line-height: 0.1rem;
       transform: scaleY(-1);
-    }
-    &:hover {
-      background: none;
-      text-decoration: underline;
-      &:after {
-        text-decoration: none;
-      }
-    }
-    &:active,
-    &:hover,
-    &:focus {
-      border-top-color: $gray-border; // UI kit !important;
+      transition: transform 0.3s;
     }
   }
 }
 
-// body
+// Accordion body
+//
 .accordion-body {
   padding: var(--#{$prefix}accordion-body-padding-y) var(--#{$prefix}accordion-body-padding-x);
-  padding: 12px 24px 42px;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  @include media-breakpoint-up(lg) {
-    font-size: 1.125rem;
-    line-height: 1.75rem;
-  }
+  font-size: var(--#{$prefix}body-font-size);
+  line-height: var(--#{$prefix}body-line-height);
 
   .accordion-header button[aria-expanded='true']:before {
-    height: 0;
     width: 0;
+    height: 0;
   }
 }

package/src/scss/components/_affix.scss

@@ -1,3 +1,17 @@
+// Component: affix
+//
+// Description: Component styles for affix
+//
+
+// Variables
+//
+
+// Properties
+//
+
+// Styles
+//
+
 .affix-top {
   position: sticky;
   top: 0;

package/src/scss/components/_alert.scss

@@ -1,69 +1,84 @@
-// Base styles
+// Component: alert
+//
+// Description: Component styles for alert
+//
+
+// Variables
+//
+
+// Properties
+//
+
+.alert {
+  --#{$prefix}alert-background-color: var(--#{$prefix}color-background-inverse); // Controls the background color for the alert, using color tokens.
+  --#{$prefix}alert-border-color: var(--#{$prefix}color-border-secondary); // Controls the external border color for the alert, using color tokens.
+  --#{$prefix}alert-border-size: 0.5rem; // Controls the border size for the alert.
+  --#{$prefix}alert-heading-color: var(--#{$prefix}color-text-base); // Controls the heading color for the alert, using color tokens.
+  --#{$prefix}alert-icon-spacing: var(--#{$prefix}icon-spacing); // Controls the icon spacing for the alert, using spacing tokens.
+  --#{$prefix}alert-spacing-inset: var(--#{$prefix}spacing-s); // Controls the inset spacing for the alert, using spacing tokens.
+  --#{$prefix}alert-spacing-inset-extra: var(--#{$prefix}spacing-16x); // Controls the extra inset spacing for the alert, using spacing tokens.
+  --#{$prefix}alert-spacing-outside: var(--#{$prefix}spacing-m); // Controls the outside spacing for the alert, using spacing tokens.
+  --#{$prefix}alert-text-color: var(--#{$prefix}color-text-base); // Controls the text color for the alert, using color tokens.
+}
+
+// Styles
+//
+/* stylelint-disable-next-line no-duplicate-selectors */
 .alert {
   position: relative;
-  padding: $alert-padding-y $alert-padding-x;
-  margin-bottom: $alert-margin-bottom;
-  border: 1px solid $color-border-secondary;
-  padding-left: 4em;
-  background-color: $white;
-  border-radius: 0;
-  color: $color-text-base; // UI kit
-  background-position: 20px 12px;
-  background-repeat: no-repeat;
-  background-size: 32px 32px;
+  margin-bottom: var(--#{$prefix}alert-margin);
+  padding: var(--#{$prefix}alert-spacing-inset);
+  border: 1px solid var(--#{$prefix}alert-border-color);
+  background-color: var(--#{$prefix}alert-background-color);
+  color: var(--#{$prefix}alert-text-color);
+
+  @include media-breakpoint-up(lg) {
+    --#{$prefix}alert-spacing-inset: var(-#{$prefix}spacing-inset-m);
+    padding-left: var(--#{$prefix}alert-spacing-inset);
+  }
+}
+
+// Alternate styles
+// Generate contextual modifier classes for colorizing the alert.
+// Loop through theme colors to generate contextual modifier classes for colorizing the alert
+@each $color, $value in $colors-palette {
+  @if index(('danger', 'warning', 'success', 'secondary', 'primary'), $color) {
+    .alert-#{$color} {
+      border-left: var(--#{$prefix}alert-border-size) solid #{$value};
+    }
+
+    .alert-#{$color} .alert-icon {
+      fill: #{$value};
+    }
+  }
 }
 
 // Headings for larger alerts
 .alert-heading {
   // Specified to prevent conflicts of changing $headings-color
-  color: $color-text-base; // UI kit
-  line-height: 1;
+  color: var(--#{$prefix}alert-heading-color);
+}
+
+.alert-icon {
+  margin-right: var(--#{$prefix}alert-icon-spacing);
 }
 
 // Provide class for links that match alerts
 .alert-link {
-  color: $link-color;
-  font-weight: $font-weight-semibold;
-  text-decoration: underline;
+  font-weight: var(--#{$prefix}font-weight-solid);
 }
 
 // Dismissible alerts
 // Expand the right padding and account for the close button's positioning.
 .alert-dismissible {
-  padding-right: ($alert-padding-x * 2);
+  padding-right: var(--#{$prefix}alert-spacing-inset);
   // Adjust close link position
   .btn-close {
     position: absolute;
     top: 50%;
     right: 0;
-    transform: translateY(-50%);
-    padding: $alert-padding-x;
+    padding: var(--#{$prefix}alert-spacing-inset);
     color: inherit;
+    transform: translateY(-50%);
   }
 }
-
-// Alternate styles
-// Generate contextual modifier classes for colorizing the alert.
-@each $color, $value in $theme-colors {
-  @if ($color == 'danger' or $color == 'warning' or $color == 'success' or $color == 'info' or $color == 'primary') {
-    .alert-#{$color} {
-      border-left: 8px solid #{$value};
-    }
-  }
-}
-
-.alert-danger {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='#{url-friendly-color($danger)}' d='M11.5 14.2V5.7h1.2v8.5zm-.1 4.1h1.2v-1.8h-1.2zM22 7.9v8.3L16.1 22H7.9L2 16.2V7.9L7.9 2h8.2zm-1 .4L15.7 3H8.3L3 8.3v7.5L8.3 21h7.4l5.3-5.2z'%3E%3C/path%3E%3C/svg%3E");
-}
-.alert-warning {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='#{url-friendly-color($warning)}' d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 19a9 9 0 1 1 9-9 9 9 0 0 1-9 9zm-.5-6.8V5.7h1.2v8.5zm-.1 2.3h1.2v1.8h-1.2z'%3E%3C/path%3E%3C/svg%3E");
-}
-.alert-success {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='#{url-friendly-color($success)}' d='M17.1 7.9l.7.7-7.8 7.6-4.7-4.6.7-.7 4 3.9zM22 12A10 10 0 1 1 12 2a10 10 0 0 1 10 10zm-1 0a9 9 0 1 0-9 9 9 9 0 0 0 9-9z'%3E%3C/path%3E%3C/svg%3E");
-}
-.alert-info {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='#{url-friendly-color($info)}' d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 19a9 9 0 1 1 9-9 9 9 0 0 1-9 9zm-.7-15h1.5v2h-1.5zm0 3h1.5v9h-1.5z'%3E%3C/path%3E%3C/svg%3E");
-}
-.alert-primary {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='#{url-friendly-color($primary)}' d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 19a9 9 0 1 1 9-9 9 9 0 0 1-9 9zm-.7-15h1.5v2h-1.5zm0 3h1.5v9h-1.5z'%3E%3C/path%3E%3C/svg%3E");
-}

package/src/scss/components/_anchor.scss

@@ -1,3 +1,17 @@
+// Component: anchor
+//
+// Description: Component styles for anchor
+//
+
+// Variables
+//
+
+// Properties
+//
+
+// Styles
+//
+
 // Allows to give anchors an offset to be positioned below the sticky header
 .anchor-offset:before {
   content: '';