bootstrap-italia 2.17.2 → 3.0.0-alpha.0

package/src/scss/components/_back-to-top.scss

@@ -1,102 +1,118 @@
-/*back to top*/
+// Component: back to top
+//
+// Description: Component styles for back to top
+//
+
+// Variables
+//
+
+// Properties
+//
+
+.back-to-top {
+  --#{$prefix}backtop-background: var(--#{$prefix}color-background-primary); // Controls the background color of the button, using color tokens
+  --#{$prefix}backtop-position: 1rem; // Controls the distance from the bottom and right edges
+  --#{$prefix}backtop-radius: var(--#{$prefix}radius-circle); // Controls the border radius of the button, using radius tokens
+  --#{$prefix}backtop-sizing: 2.5rem; // Controls the width and height of the button
+}
+
+// Styles
+//
+/* stylelint-disable-next-line no-duplicate-selectors */
 .back-to-top {
   position: fixed;
-  bottom: 16px;
-  right: 16px;
-  background: $primary;
-  width: 40px;
-  height: 40px;
-  text-decoration: none;
-  border-radius: 50%;
+  right: var(--#{$prefix}backtop-position);
+  bottom: var(--#{$prefix}backtop-position);
+  z-index: 1;
   display: block;
   visibility: hidden;
+  width: var(--#{$prefix}backtop-sizing);
+  height: var(--#{$prefix}backtop-sizing);
+  border-radius: var(--#{$prefix}backtop-radius);
   opacity: 0;
+  background: var(--#{$prefix}backtop-background);
   text-align: center;
+  text-decoration: none;
+  transform: scale(0.7);
+  transform-origin: center center;
   transition:
     $transition-base,
     transform 0.25s cubic-bezier(0.75, -0.5, 0, 1.75),
     visibility 0.3s linear,
     opacity 0.3s ease-in-out;
-  z-index: 1;
-  transform: scale(0.7);
-  transform-origin: center center;
-  //fade in
+
+  // Tablet vertical
+  @include media-breakpoint-up(md) {
+    --#{$prefix}backtop-sizing: 3.5rem; // 56px
+  }
+
+  // Desktop
+  @include media-breakpoint-up(xl) {
+    --#{$prefix}backtop-position: 2rem; // 32px
+  }
+
+  &:hover {
+    --backtop-background: var(--#{$prefix}color-background-primary-hover);
+    text-decoration: none;
+  }
+
+  // Fade in
   &.back-to-top-show {
     visibility: visible;
     opacity: 1;
+    transform: scale(1);
     transition:
       $transition-base,
       transform 0.05s ease-out,
       visibility 0s linear,
       opacity 0.1s ease-in-out;
-    transform: scale(1);
-  }
-  &:hover {
-    background: shade-color($primary, 10%);
-    text-decoration: none;
   }
-  //caret
+
+  // Icon
   .icon {
-    margin: 0;
     position: relative;
-    transform: scale(0.75);
     top: 4px;
+    margin: 0;
+    transform: scale(0.75);
+
+    @include media-breakpoint-up(md) {
+      top: 10px;
+      transform: scale(1);
+    }
+
     &:before {
       margin: 0;
-      color: $white;
+      color: var(--#{$prefix}icon-inverse);
     }
   }
 
-  //shadow
+  // Shadow
   &.shadow {
     &:hover {
       box-shadow: 0 0.3rem 0.75rem rgba(0, 0, 0, 0.3) !important;
     }
   }
 
-  //dark version
+  // Dark version
   &.dark {
-    background: #fff;
+    --#{$prefix}backtop-background: var(--#{$prefix}color-background-inverse);
     &:hover {
-      background: $neutral-1-a1; // TODO Missing in the UI kit
+      --#{$prefix}backtop-background: var(--#{$prefix}color-background-inverse-hover);
     }
 
-    //caret
     .icon {
       &:before {
-        color: $neutral-1-a8; // TODO Missing in the UI kit
+        color: var(--#{$prefix}icon-secondary);
       }
     }
   }
-}
 
-//Tablet vertical
-@include media-breakpoint-up(md) {
-  /*back to top*/
-  .back-to-top {
-    width: 56px;
-    height: 56px;
+  // Small version
+  &.back-to-top-small {
+    --#{$prefix}backtop-sizing: 2.5rem; // 40px
     .icon {
-      transform: scale(1);
-      top: 10px;
+      top: 4px;
+      transform: scale(0.75);
     }
-    //small version
-    &.back-to-top-small {
-      width: 40px;
-      height: 40px;
-      //caret
-      .icon {
-        transform: scale(0.75);
-        top: 4px;
-      }
-    }
-  }
-}
-
-//Desktop
-@include media-breakpoint-up(xl) {
-  .back-to-top {
-    bottom: 32px;
-    right: 32px;
   }
 }

package/src/scss/components/_badge.scss

@@ -1,60 +1,93 @@
+// Component: badge
+//
+// Description: Component styles for badge
+//
+
+// Variables
+//
+
+// Properties
+//
+
 .badge {
-  // scss-docs-start badge-css-vars
-  --#{$prefix}badge-padding-x: #{$badge-padding-x};
-  --#{$prefix}badge-padding-y: #{$badge-padding-y};
-  @include rfs($badge-font-size, --#{$prefix}badge-font-size);
-  --#{$prefix}badge-font-weight: #{$badge-font-weight};
-  --#{$prefix}badge-color: #{$badge-color};
-  --#{$prefix}badge-border-radius: #{$badge-border-radius};
-  // scss-docs-end badge-css-vars
+  --#{$prefix}badge-border-radius: var(--#{$prefix}radius-smooth); // Controls the border radius for the badge, using radius tokens.
+  --#{$prefix}badge-font-size: var(--#{$prefix}label-font-size-s); // Controls the font size for the badge, using font tokens.
+  --#{$prefix}badge-font-size-relative: 0.75em; // Controls the relative font size for the badge.
+  --#{$prefix}badge-font-weight: var(--#{$prefix}font-weight-solid); // Controls the font weight for the badge, using font tokens.
+  --#{$prefix}badge-padding-x: var(--#{$prefix}spacing-xs); // Controls the horizontal padding for the badge, using spacing tokens.
+  --#{$prefix}badge-padding-y: var(--#{$prefix}spacing-3xs); // Controls the vertical padding for the badge, using spacing tokens.
+  --#{$prefix}badge-text-color: var(--#{$prefix}color-text-inverse); // Controls the text color for the badge, using color tokens.
+}
 
+// Styles
+//
+/* stylelint-disable-next-line no-duplicate-selectors */
+.badge {
   display: inline-block;
   padding: var(--#{$prefix}badge-padding-y) var(--#{$prefix}badge-padding-x);
-  @include font-size(var(--#{$prefix}badge-font-size));
+  color: var(--#{$prefix}badge-text-color);
+  // font-size: var(--#{$prefix}badge-font-size-relative);
   font-weight: var(--#{$prefix}badge-font-weight);
   line-height: 1;
-  color: var(--#{$prefix}badge-color);
   text-align: center;
-  white-space: nowrap;
   vertical-align: baseline;
+  white-space: nowrap;
+  transition:
+    color var(--#{$prefix}transition-instant) ease-in-out,
+    background-color var(--#{$prefix}transition-instant) ease-in-out,
+    border-color var(--#{$prefix}transition-instant) ease-in-out,
+    box-shadow var(--#{$prefix}transition-instant) ease-in-out;
+  @include rfs($badge-font-size, --#{$prefix}badge-font-size);
   @include border-radius(var(--#{$prefix}badge-border-radius));
-  @include gradient-bg();
 
   // Empty badges collapse automatically
   &:empty {
     display: none;
   }
-  --bs-badge-font-size: 0.875em;
-  --bs-badge-font-weight: #{$font-weight-semibold};
-  transition:
-    color 0.15s ease-in-out,
-    background-color 0.15s ease-in-out,
-    border-color 0.15s ease-in-out,
-    box-shadow 0.15s ease-in-out;
-  @each $color, $value in $theme-colors {
-    &.badge-outline-#{$color} {
-      background-color: transparent !important;
-      color: $value;
-      border: 1px solid $value;
+
+  // Add a small padding to badges in buttons
+  &-sm {
+    --#{$prefix}badge-padding-x: var(--#{$prefix}spacing-3xs);
+  }
+
+  // Color Variants
+  @each $color, $value in $colors-palette {
+    &.badge-#{$color} {
+      background-color: #{$value};
     }
   }
-  &.rounded-pill {
-    padding-left: 0.6em;
-    padding-right: 0.6em;
+
+  // Inverse Variant
+  &-inverse {
+    background-color: var(--#{$prefix}color-background-inverse);
+    color: var(--#{$prefix}color-text-primary);
   }
-}
 
-// Quick fix for badges in buttons
-.btn .badge {
-  position: relative;
-  top: -1px;
+  // Quick fix for badges in buttons
+  .btn & {
+    position: relative;
+    top: -1px;
+  }
 }
 
+// Hover state
 a.badge:hover {
-  color: $white;
-  @each $color, $value in $theme-colors {
-    &.bg-#{$color} {
-      background-color: shade-color($value, 20%) !important;
+  color: var(--#{$prefix}badge-text-color);
+
+  // Loop through theme colors to generate contextual modifier classes for colorizing the badge
+  @each $color, $value in $colors-palette {
+    &.badge-#{$color} {
+      @if $color == 'primary' {
+        background-color: var(--#{$prefix}color-background-primary-hover);
+      } @else if $color == 'secondary' {
+        background-color: var(--#{$prefix}color-background-secondary-hover);
+      } @else if $color == 'success' {
+        background-color: var(--#{$prefix}color-background-success-hover);
+      } @else if $color == 'warning' {
+        background-color: var(--#{$prefix}color-background-warning-hover);
+      } @else if $color == 'danger' {
+        background-color: var(--#{$prefix}color-background-danger-hover);
+      }
     }
   }
 }

package/src/scss/components/_bottomnav.scss

@@ -1,3 +1,17 @@
+// Component: bottomnav
+//
+// Description: Component styles for bottomnav
+//
+
+// Variables
+//
+
+// Properties
+//
+
+// Styles
+//
+
 .bottom-nav {
   position: fixed;
   bottom: 0;

package/src/scss/components/_breadcrumb.scss

@@ -1,95 +1,102 @@
+// Component: breadcrumb
+//
+// Description: Component styles for breadcrumb
+//
+
+// Variables
+//
+
+// Properties
+//
+
 .breadcrumb {
-  // scss-docs-start breadcrumb-css-vars
-  --#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};
-  --#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y};
-  --#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
-  @include rfs($breadcrumb-font-size, --#{$prefix}breadcrumb-font-size);
-  --#{$prefix}breadcrumb-bg: #{$breadcrumb-bg};
-  --#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius};
-  --#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color};
-  --#{$prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};
-  --#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color};
-  // scss-docs-end breadcrumb-css-vars
+  --#{$prefix}breadcrumb-background: transparent; // Controls the background for the breadcrumb.
+  --#{$prefix}breadcrumb-border-radius: 0; // Controls the border radius for the breadcrumb.
+  --#{$prefix}breadcrumb-divider: '/'; // Controls the divider character for the breadcrumb.
+  --#{$prefix}breadcrumb-divider-color: var(--#{$prefix}color-border-secondary); // Controls the divider color for the breadcrumb, using color tokens.
+  --#{$prefix}breadcrumb-divider-flipped: var(--#{$prefix}breadcrumb-divider); // Controls the flipped divider for the breadcrumb.
+  --#{$prefix}breadcrumb-font-size: var(--#{$prefix}label-font-size); // Controls the font size for the breadcrumb, using font tokens.
+  --#{$prefix}breadcrumb-item-padding-x: var(--#{$prefix}spacing-xs); // Controls the horizontal padding for breadcrumb items, using spacing tokens.
+  --#{$prefix}breadcrumb-link-color: var(--#{$prefix}color-text-secondary); // Controls the link color for the breadcrumb, using color tokens.
+  --#{$prefix}breadcrumb-link-font-weight: var(--#{$prefix}font-weight-solid); // Controls the link font weight for the breadcrumb, using font tokens.
+  --#{$prefix}breadcrumb-margin: var(--#{$prefix}spacing-s); // Controls the margin for the breadcrumb, using spacing tokens.
+  --#{$prefix}breadcrumb-padding: var(--#{$prefix}spacing-3xs); // Controls the padding for the breadcrumb, using spacing tokens.
+  --#{$prefix}breadcrumb-separator-color: var(--#{$prefix}color-background-secondary); // Controls the separator color for the breadcrumb, using color tokens.
+  --#{$prefix}breadcrumb-separator-spacing: var(--#{$prefix}spacing-xxs); // Controls the separator spacing for the breadcrumb, using spacing tokens.
+}
 
+// Styles
+//
+/* stylelint-disable-next-line no-duplicate-selectors */
+.breadcrumb {
   display: flex;
   flex-wrap: wrap;
-  padding: var(--#{$prefix}breadcrumb-padding-y) var(--#{$prefix}breadcrumb-padding-x);
-  margin-bottom: var(--#{$prefix}breadcrumb-margin-bottom);
-  @include font-size(var(--#{$prefix}breadcrumb-font-size));
+  margin-bottom: var(--#{$prefix}breadcrumb-margin);
+  padding: var(--#{$prefix}breadcrumb-padding);
+  background-color: var(--#{$prefix}breadcrumb-background, transparent);
   list-style: none;
-  background-color: var(--#{$prefix}breadcrumb-bg);
-  @include border-radius(var(--#{$prefix}breadcrumb-border-radius));
+  font-size: var(--#{$prefix}breadcrumb-font-size);
+
+  // Variant on dark background
+
+  &.dark {
+    --#{$prefix}breadcrumb-background: var(--#{$prefix}color-background-emphasis);
+    --#{$prefix}breadcrumb-link-color: var(--#{$prefix}color-text-inverse);
+    --#{$prefix}breadcrumb-item-active-color: var(--#{$prefix}color-text-inverse);
+    --#{$prefix}breadcrumb-divider-color: var(--#{$prefix}color-text-inverse);
+
+    .breadcrumb-item {
+      a:hover {
+        --#{$prefix}breadcrumb-link-color: var(--#{$prefix}color-text-inverse);
+      }
+
+      .separator {
+        color: var(--#{$prefix}breadcrumb-link-color);
+      }
+    }
+  }
 }
 
 .breadcrumb-item {
+  padding-left: 0;
+
   // The separator between breadcrumbs (by default, a forward-slash: "/")
   + .breadcrumb-item {
-    padding-left: var(--#{$prefix}breadcrumb-item-padding-x);
-
     &::before {
-      float: left; // Suppress inline spacings and underlining of the separator
-      padding-right: var(--#{$prefix}breadcrumb-item-padding-x);
-      color: var(--#{$prefix}breadcrumb-divider-color);
       content: var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{'/* rtl:'} var(
           --#{$prefix}breadcrumb-divider,
           escape-svg($breadcrumb-divider-flipped)
         ) #{'*/'};
+      padding-right: var(--#{$prefix}breadcrumb-item-padding-x);
+      float: left; // Suppress inline spacings and underlining of the separator
+      color: var(--#{$prefix}breadcrumb-divider-color);
     }
   }
 
+  & + .breadcrumb-item:before {
+    display: none;
+  }
+
+  // The breadcrumb item link
+  a {
+    color: var(--#{$prefix}breadcrumb-link-color);
+    font-weight: var(--#{$prefix}breadcrumb-link-font-weight);
+    &:hover {
+      --#{$prefix}breadcrumb-link-color: var(--#{$prefix}color-link-secondary-hover);
+    }
+  }
+
+  // The breadcrumb item text with no link
   &.active {
     color: var(--#{$prefix}breadcrumb-item-active-color);
+    font-weight: var(--#{$prefix}font-weight-regular);
+    pointer-events: none;
   }
-}
 
-.breadcrumb-container {
-  --bs-breadcrumb-font-size: 1rem;
-  .breadcrumb {
-    padding: $breadcrumb-padding 0;
-    border-radius: $breadcrumb-border-radius;
-    .breadcrumb-item {
-      padding-left: 0;
-      & + .breadcrumb-item:before {
-        display: none;
-      }
-      i {
-        padding-right: $breadcrumb-link-x-padding;
-      }
-      a {
-        color: $breadcrumb-link-color;
-        font-weight: $breadcrumb-link-font-weight;
-      }
-      &.active {
-        a {
-          font-weight: 400;
-          pointer-events: none;
-        }
-      }
-      span.separator {
-        color: $secondary;
-        display: inline-block;
-        font-weight: $breadcrumb-link-font-weight;
-        padding: 0 $breadcrumb-link-x-padding;
-      }
-    }
-    // dark version
-    &.dark {
-      background: $breadcrumb-bg-dark;
-      color: $breadcrumb-link-color-dark;
-      .breadcrumb-item {
-        a {
-          color: $breadcrumb-link-color-dark;
-        }
-        span.separator {
-          color: $breadcrumb-link-color-dark;
-        }
-        i {
-          color: $breadcrumb-icon-color-dark;
-        }
-        &.active {
-          color: $breadcrumb-link-color-dark;
-        }
-      }
-    }
+  // The separator between breadcrumb items
+  .separator {
+    display: inline-block;
+    padding: 0 var(--#{$prefix}breadcrumb-separator-spacing);
+    color: var(--#{$prefix}breadcrumb-separator-color);
   }
 }

package/src/scss/components/_button-group.scss

@@ -1,3 +1,17 @@
+// Component: button group
+//
+// Description: Component styles for button group
+//
+
+// Variables
+//
+
+// Properties
+//
+
+// Styles
+//
+
 // Make the div behave like a button
 .btn-group,
 .btn-group-vertical {
@@ -34,7 +48,7 @@
 }
 
 .btn-group {
-  @include border-radius($btn-border-radius);
+  border-radius: var(--#{$prefix}radius-smooth);
 
   // Prevent double borders when buttons are next to each other
   > :not(.btn-check:first-child) + .btn,
@@ -76,8 +90,8 @@
 //
 
 .dropdown-toggle-split {
-  padding-right: $btn-padding-x * 0.75;
-  padding-left: $btn-padding-x * 0.75;
+  padding-right: var(--#{$prefix}spacing-xxs);
+  padding-left: var(--#{$prefix}spacing-xxs);
 
   &::after,
   .dropup &::after,
@@ -91,13 +105,13 @@
 }
 
 .btn-sm + .dropdown-toggle-split {
-  padding-right: $btn-padding-x-sm * 0.75;
-  padding-left: $btn-padding-x-sm * 0.75;
+  padding-right: var(--#{$prefix}spacing-xxs);
+  padding-left: var(--#{$prefix}spacing-xxs);
 }
 
 .btn-lg + .dropdown-toggle-split {
-  padding-right: $btn-padding-x-lg * 0.75;
-  padding-left: $btn-padding-x-lg * 0.75;
+  padding-right: var(--#{$prefix}spacing-xs);
+  padding-left: var(--#{$prefix}spacing-xs);
 }
 
 // The clickable button for toggling the menu