bootstrap-italia 2.17.3 → 3.0.0-alpha.0

package/src/scss/components/_sections.scss

@@ -1,37 +1,65 @@
-//mobile
+// Component: sections
+//
+// Description: Component styles for sections
+//
+
+// Variables
+//
+
+// Properties
+//
+
 .section {
-  padding: #{map-get($grid-gutter-widths, sm) * 4} #{map-get($grid-gutter-widths, sm) * 2};
+  --#{$prefix}section-background-color: transparent; // Controls the background color for the section.
+  --#{$prefix}section-image-overlay: hsla(0, 0%, 0%, 0.5); // Controls the image overlay for the section.
+  --#{$prefix}section-padding-y: var(--#{$prefix}spacing-xxl); // Controls the vertical padding for the section, using spacing tokens.
+  @include media-breakpoint-up(xl) {
+    --#{$prefix}section-padding-y: var(--#{$prefix}spacing-3xl);
+  }
+}
+
+// Styles
+//
+/* stylelint-disable-next-line no-duplicate-selectors */
+.section {
+  // Set `--#{$prefix}section-padding-x` only when extra horizontal padding is needed
+  padding: var(--#{$prefix}section-padding-y) var(--#{$prefix}section-padding-x, 0);
+  background-color: var(--#{$prefix}section-background-color);
 
-  //section content
   .section-content {
-    margin: 0 auto;
     position: relative;
+    margin: 0 auto;
   }
 
   // color and image variants
   &.section-muted {
-    background: $color-background-muted;
+    --#{$prefix}section-padding-x: var(--#{$prefix}spacing-2xl);
+    --#{$prefix}section-background-color: var(--#{$prefix}color-background-muted);
   }
+
   &.section-primary {
-    background: $primary;
+    --#{$prefix}section-background-color: var(--#{$prefix}color-background-primary);
   }
-  &.section-neutral {
-    // TODO: Consider updating class name to match the variable
-    background: $color-background-emphasis;
+
+  &.section-emphasis {
+    --#{$prefix}section-background-color: var(--#{$prefix}color-background-emphasis);
   }
+
+  // TODO: Check if this is needed
   &.section-image {
-    background-size: cover;
-    background-position: center center;
     position: relative;
+    background-position: center center;
+    background-size: cover;
+
     &::before {
-      content: '';
       position: absolute;
       top: 0;
       left: 0;
+      content: '';
+      display: block;
       width: 100%;
       height: 100%;
-      display: block;
-      background: rgba(0, 0, 0, 0.5);
+      background: var(--#{$prefix}section-image-overlay);
     }
   }
 
@@ -39,23 +67,25 @@
     box-shadow: inset 0 1rem 1rem -1rem rgba(0, 0, 0, 0.3);
   }
 
+  // TODO: Check if this is needed
   &.section-background-header {
     position: relative;
     background-size: cover;
 
     &::before {
-      content: '';
       position: absolute;
       top: 0;
       left: 0;
+      z-index: -1;
+      content: '';
       width: 100%;
       height: 300px;
-      z-index: -1;
+      background-color: $section-header-background-color;
       background-repeat: no-repeat;
       background-position: top center;
-      background-color: $section-header-background-color;
     }
 
+    // TODO: Check if this is needed
     &.section-user-header {
       &::before {
         content: '';
@@ -68,6 +98,7 @@
 
         a {
           text-decoration: none;
+
           &:hover {
             text-decoration: underline;
           }
@@ -81,24 +112,16 @@
   }
 }
 
-//Tablet vertical
-@include media-breakpoint-up(md) {
-  .section {
-    padding: #{map-get($grid-gutter-widths, md) * 4} #{map-get($grid-gutter-widths, md) * 2};
-  }
-}
-
-//Tablet horizontal / small desktop
+// TODO: Check if this is needed
 @include media-breakpoint-up(lg) {
   .section {
-    padding: #{map-get($grid-gutter-widths, lg) * 4};
-
     &.section-background-header {
       &.section-user-header {
         &::before {
           content: '';
           min-height: 550px;
         }
+
         .user-settings {
           font-size: 0.875rem;
         }
@@ -107,11 +130,9 @@
   }
 }
 
-//Desktop
+// TODO: Check if this is needed
 @include media-breakpoint-up(xl) {
   .section {
-    padding: #{map-get($grid-gutter-widths, xl) * 4};
-
     &.section-background-header {
       &.section-user-header {
         .user-settings {

package/src/scss/components/_sidebar.scss

@@ -1,135 +1,133 @@
-//mobile
+// Component: sidebar
+//
+// Description: Component styles for sidebar
+//
+
+// Variables
+//
+
+// Properties
+//
+
 .sidebar-wrapper {
-  padding: $v-gap * 3 0;
+  --#{$prefix}sidebar-padding: var(--#{$prefix}spacing-m); // Controls the padding for the sidebar, using spacing tokens.
+  --#{$prefix}sidebar-background-color: transparent; // Controls the background color for the sidebar.
+  --#{$prefix}sidebar-heading-font-size: var(--#{$prefix}heading-6-font-size); // Controls the heading font size for the sidebar, using font tokens.
+  --#{$prefix}sidebar-heading-color: var(--#{$prefix}color-text-secondary); // Controls the heading color for the sidebar, using color tokens.
+  --#{$prefix}sidebar-link-padding-x: var(--#{$prefix}spacing-s); // Controls the link horizontal padding for the sidebar, using spacing tokens.
+  --#{$prefix}sidebar-link-padding-y: var(--#{$prefix}spacing-xs); // Controls the link vertical padding for the sidebar, using spacing tokens.
+  --#{$prefix}sidebar-link-sublist-indent: var(--#{$prefix}spacing-m); // Controls the sublist indent for the sidebar, using spacing tokens.
+  --#{$prefix}sidebar-link-font-size: var(--#{$prefix}label-font-size); // Controls the link font size for the sidebar, using font tokens.
+  --#{$prefix}sidebar-link-line-height: var(--#{$prefix}body-line-height); // Controls the link line height for the sidebar, using font tokens.
+  --#{$prefix}sidebar-link-active-line-width: 4px; // Controls the active line width for the sidebar.
+  --#{$prefix}sidebar-divider-color: var(--#{$prefix}color-border-subtle); // Controls the divider color for the sidebar, using color tokens.
+  --#{$prefix}sidebar-link-active-border-color: var(--#{$prefix}color-border-primary); // Controls the active border color for the sidebar, using color tokens.
+}
+
+// Styles
+//
+/* stylelint-disable-next-line no-duplicate-selectors */
+.sidebar-wrapper {
+  padding: var(--#{$prefix}sidebar-padding) 0;
+  background: var(--#{$prefix}sidebar-background-color);
+
   h3 {
-    font-weight: $sidebar-heading-font-weight;
-    margin-bottom: $sidebar-heading-bottom-margin;
-    font-size: $sidebar-heading-text-size;
-    margin-top: $sidebar-heading-margin-top;
-    letter-spacing: $sidebar-heading-letter-spacing;
+    margin-bottom: var(--#{$prefix}spacing-m);
+    padding-right: var(--#{$prefix}spacing-s);
+    padding-left: var(--#{$prefix}spacing-s);
+    font-size: var(--#{$prefix}sidebar-heading-font-size);
+    font-weight: var(--#{$prefix}font-weight-solid);
     text-transform: uppercase;
-    padding-left: $v-gap * 3;
-    padding-right: $v-gap * 3;
+    color: var(--#{$prefix}sidebar-heading-color);
   }
-  .sidebar-linklist-wrapper {
-    .link-list-wrapper {
-      h3 {
-        font-weight: $sidebar-heading-font-weight;
-        margin-bottom: $sidebar-heading-bottom-margin;
-        font-size: $sidebar-heading-text-size;
-        margin-top: $sidebar-heading-margin-top;
-        letter-spacing: $sidebar-heading-letter-spacing;
-        text-transform: uppercase;
-      }
-      ul {
-        li {
-          a {
-            line-height: $sidebar-linklist-link-line-height;
-            padding-top: $sidebar-linklist-link-v-padding;
-            padding-bottom: $sidebar-linklist-link-v-padding;
-            font-size: $sidebar-link-size;
-            cursor: pointer;
-            i.it-expand {
-              font-size: $sidebar-dropdown-icon-size;
-              top: 50%;
-              transform: translateY(-50%);
-            }
-            &[aria-expanded='true'] {
-              i {
-                transform: translateY(-50%) scaleY(-1);
-              }
-            }
-            &[data-bs-toggle='collapse'] {
-              &.active {
-                span,
-                i {
-                  color: $primary;
-                  text-decoration: none;
-                }
-              }
-            }
-            &.active {
-              text-decoration: none;
-              span {
-                color: $color-text-base;
-                text-decoration: underline;
-              }
-              &:after {
-                content: '';
-                display: block;
-                width: $sidebar-dropdown-line-selection-width;
-                position: absolute;
-                left: 0;
-                top: 0;
-                bottom: 0;
-                background-color: $sidebar-dropdown-line-selection-color;
-              }
-            }
-            &.icon-right {
-              padding: 0.55em 24px;
-            }
-          }
-        }
-        &.link-sublist {
-          li {
-            a {
-              font-size: $sidebar-submenu-font-size;
-              padding-top: $sidebar-submenu-link-v-padding;
-              padding-bottom: $sidebar-submenu-link-v-padding;
-              &.active {
-                span {
-                  color: $color-text-base;
-                  text-decoration: underline;
-                }
-                // &::after {
-                //   display: none;
-                // }
-              }
-            }
-          }
-        }
-      }
-    }
-    &.linklist-secondary {
-      &:before {
+
+  .sidebar-linklist-wrapper .link-list-wrapper ul li a {
+    width: 100%;
+    position: relative;
+    padding: var(--#{$prefix}sidebar-link-padding-y) var(--#{$prefix}sidebar-link-padding-x);
+    font-size: var(--#{$prefix}sidebar-link-font-size);
+    line-height: var(--#{$prefix}sidebar-link-line-height);
+    text-transform: var(--#{$prefix}sidebar-text-transform, none); // Default to none if not set
+
+    // Active indicator: support both .active class and semantic aria-current
+    &.active,
+    &[aria-current='page'] {
+      &::after {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        inset-inline-start: 0;
         content: '';
-        width: $sidebar-link-small-line-width;
-        height: 1px;
-        background: $color-border-subtle;
         display: block;
-        margin-left: $v-gap * 3;
-        margin-top: $v-gap * 3;
+        width: var(--#{$prefix}sidebar-link-active-line-width);
+        background-color: var(--#{$prefix}sidebar-link-active-border-color);
       }
     }
+
+    span {
+      text-decoration: none;
+    }
+
+    &.active span,
+    &[aria-current='page'] span {
+      text-decoration: underline;
+    }
   }
-  // linea destra
-  &.it-line-right-side {
-    border-right: 1px solid $sidebar-border-color;
-    .sidebar-linklist-wrapper {
-      .link-list-wrapper {
-        ul {
-          li {
-            a {
-              &[data-bs-toggle='collapse'] {
-                &.active {
-                  border-right: $sidebar-dropdown-line-selection-width solid $sidebar-dropdown-line-selection-color;
-                  border-left: none;
-                }
-              }
-              &.active {
-                &:after {
-                  left: auto;
-                  right: 0;
-                }
-              }
-            }
-          }
-        }
-      }
+
+  .sidebar-linklist-wrapper .link-list-wrapper ul.link-sublist {
+    padding-inline-start: 0; // Reset padding for sublist from _link-list.scss
+
+    li a {
+      padding-inline-start: var(--#{$prefix}sidebar-link-sublist-indent);
+      text-transform: none; // No text transform for sublist items
     }
   }
-  // linea sinistra
+
+  .icon {
+    margin-right: var(--#{$prefix}icon-spacing);
+  }
+
+  // Divider between link lists
+  .sidebar-linklist-wrapper.linklist-secondary:before {
+    content: '';
+    display: block;
+    height: 1px;
+    margin: var(--#{$prefix}sidebar-link-padding-y) var(--#{$prefix}sidebar-link-padding-y) var(--#{$prefix}sidebar-link-padding-y) 0;
+    background: var(--#{$prefix}sidebar-divider-color);
+  }
+
+  &.it-line-left-side,
+  &.it-line-right-side {
+    border-color: var(--#{$prefix}sidebar-divider-color);
+  }
+
+  &.it-line-right-side {
+    // Use logical property for RTL support
+    border-inline-end-width: 1px;
+    border-inline-end-style: solid;
+  }
+
+  // Active indicator and collapse state
+  &.it-line-right-side .sidebar-linklist-wrapper .link-list-wrapper a[data-bs-toggle='collapse'].active {
+    border-inline-end: var(--#{$prefix}sidebar-link-active-line-width) solid var(--#{$prefix}sidebar-link-active-border-color);
+    border-inline-start: none;
+  }
+
+  &.it-line-right-side .sidebar-linklist-wrapper .link-list-wrapper a.active::after {
+    inset-inline-end: 0;
+    inset-inline-start: auto;
+  }
+
   &.it-line-left-side {
-    border-left: 1px solid $sidebar-border-color;
+    // Use logical property for RTL support
+    border-inline-start-width: 1px;
+    border-inline-start-style: solid;
   }
 }
+
+.sidebar-wrapper.theme-dark {
+  --#{$prefix}sidebar-background-color: var(--#{$prefix}color-background-secondary);
+  --#{$prefix}sidebar-divider-color: var(--#{$prefix}color-border-subtle);
+  --#{$prefix}sidebar-heading-color: var(--#{$prefix}color-text-inverse);
+  --#{$prefix}sidebar-link-active-border-color: var(--#{$prefix}color-border-inverse);
+}

package/src/scss/components/_sidebarthemes.scss

@@ -1,3 +1,17 @@
+// Component: sidebarthemes
+//
+// Description: Component styles for sidebarthemes
+//
+
+// Variables
+//
+
+// Properties
+//
+
+// Styles
+//
+
 .sidebar-wrapper {
   &.theme-dark {
     background: $sidebar-dark-bg-color;

package/src/scss/components/_skiplinks.scss

@@ -1,3 +1,17 @@
+// Component: skiplinks
+//
+// Description: Component styles for skiplinks
+//
+
+// Variables
+//
+
+// Properties
+//
+
+// Styles
+//
+
 //mobile
 .skiplinks {
   background-color: $skiplinks-bg;

package/src/scss/components/_steppers.scss

@@ -1,3 +1,17 @@
+// Component: steppers
+//
+// Description: Component styles for steppers
+//
+
+// Variables
+//
+
+// Properties
+//
+
+// Styles
+//
+
 //mobile
 .steppers {
   // steppers

package/src/scss/components/_sticky.scss

@@ -1,3 +1,17 @@
+// Component: sticky
+//
+// Description: Component styles for sticky
+//
+
+// Variables
+//
+
+// Properties
+//
+
+// Styles
+//
+
 .bs-is-sticky {
   position: sticky !important;
   z-index: $zindex-sticky !important;

package/src/scss/components/_tab.scss

@@ -1,3 +1,17 @@
+// Component: tab
+//
+// Description: Component styles for tab
+//
+
+// Variables
+//
+
+// Properties
+//
+
+// Styles
+//
+
 .nav-tabs {
   position: relative;
   background-color: $white;

package/src/scss/components/_tables.scss

@@ -1,3 +1,17 @@
+// Component: tables
+//
+// Description: Component styles for tables
+//
+
+// Variables
+//
+
+// Properties
+//
+
+// Styles
+//
+
 //
 // Basic Bootstrap table
 //

package/src/scss/components/_thumbnav.scss

@@ -1,3 +1,17 @@
+// Component: thumbnav
+//
+// Description: Component styles for thumbnav
+//
+
+// Variables
+//
+
+// Properties
+//
+
+// Styles
+//
+
 .thumb-nav {
   padding: 0;
   margin: 0 -8px;

package/src/scss/components/_timeline.scss

@@ -1,3 +1,17 @@
+// Component: timeline
+//
+// Description: Component styles for timeline
+//
+
+// Variables
+//
+
+// Properties
+//
+
+// Styles
+//
+
 //mobile
 .it-timeline-wrapper {
   .it-now-label {

package/src/scss/components/_toasts.scss

@@ -1,3 +1,17 @@
+// Component: toasts
+//
+// Description: Component styles for toasts
+//
+
+// Variables
+//
+
+// Properties
+//
+
+// Styles
+//
+
 .toast {
   // scss-docs-start toast-css-vars
   --#{$prefix}toast-zindex: #{$zindex-toast};

package/src/scss/components/_toolbar.scss

@@ -1,3 +1,17 @@
+// Component: toolbar
+//
+// Description: Component styles for toolbar
+//
+
+// Variables
+//
+
+// Properties
+//
+
+// Styles
+//
+
 .toolbar {
   width: 100%;
   height: 96px;

package/src/scss/components/_tooltip.scss

@@ -1,18 +1,32 @@
+// Component: tooltip
+//
+// Description: Component styles for tooltip
+//
+
+// Variables
+//
+
+// Properties
+//
+
+// Styles
+//
+
 // Base class
 .tooltip {
   // scss-docs-start tooltip-css-vars
-  --#{$prefix}tooltip-zindex: #{$zindex-tooltip};
-  --#{$prefix}tooltip-max-width: #{$tooltip-max-width};
-  --#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
-  --#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
-  --#{$prefix}tooltip-margin: #{$tooltip-margin};
-  @include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
-  --#{$prefix}tooltip-color: #{$tooltip-color};
+  --#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};
+  --#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
   --#{$prefix}tooltip-bg: #{$tooltip-bg};
   --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
+  --#{$prefix}tooltip-color: #{$tooltip-color};
+  @include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
+  --#{$prefix}tooltip-margin: #{$tooltip-margin};
+  --#{$prefix}tooltip-max-width: #{$tooltip-max-width};
   --#{$prefix}tooltip-opacity: #{$tooltip-opacity};
-  --#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
-  --#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};
+  --#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
+  --#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
+  --#{$prefix}tooltip-zindex: #{$zindex-tooltip};
   // scss-docs-end tooltip-css-vars
 
   z-index: var(--#{$prefix}tooltip-zindex);