bootstrap-italia 2.17.2 → 3.0.0-alpha.0

package/src/scss/base/_variables.scss

@@ -1,6 +1,3 @@
-// Import Design Tokens Italia
-// @import '../../node_modules/design-tokens-italia/scss/variables';
-
 @use 'sass:map';
 
 // Color vars
@@ -467,9 +464,7 @@ $enable-deprecation-messages: true !default;
 $enable-important-utilities: true !default;
 
 // Prefix for :root CSS variables
-
-$variable-prefix: bs- !default; // Deprecated in v5.2.0 for the shorter `$prefix`
-$prefix: $variable-prefix !default;
+$prefix: bsi- !default;
 
 // Spacing
 //
@@ -682,7 +677,7 @@ $aspect-ratios: (
 
 // Text
 $font-family-serif: 'Lora', Georgia, serif !default;
-$font-family-sans-serif: 'Titillium Web', Geneva, Tahoma, sans-serif !default;
+$font-family-sans-serif: 'Titillium Web', 'Titillium Sans Pro', Geneva, Tahoma, sans-serif !default;
 $font-family-monospace: 'Roboto Mono', monospace !default;
 $text-color: $gray-700 !default;
 $text-muted: $color-text-muted !default;
@@ -801,8 +796,8 @@ $btn-transition:
   border-color 0.15s ease-in-out,
   box-shadow 0.15s ease-in-out !default;
 
-$btn-link-color: var(--#{$prefix}link-color) !default;
-$btn-link-hover-color: var(--#{$prefix}link-hover-color) !default;
+$btn-link-color: var(--#{$prefix}color-link) !default;
+$btn-link-hover-color: var(--#{$prefix}color-link-hover) !default;
 $btn-link-disabled-color: $gray-600 !default;
 
 // Forms
@@ -1167,7 +1162,7 @@ $btn-primary-border: $primary !default;
 $link-color: $primary !default;
 $link-shade-percentage: 20% !default;
 $link-hover-color: shift-color($link-color, $link-shade-percentage) !default;
-$link-hover-decoration: null !default;
+$link-hover-decoration: underline !default;
 
 $stretched-link-pseudo-element: after !default;
 $stretched-link-z-index: 1 !default;
@@ -1236,7 +1231,7 @@ $tooltip-font-size: $font-size-sm !default;
 $tooltip-color: $white !default;
 $tooltip-bg: $black !default;
 $tooltip-border-radius: $border-radius !default;
-$tooltip-margin: null !default; // TODO: remove this in v6
+$tooltip-margin: null !default;
 $tooltip-arrow-width: 0.8rem !default;
 $tooltip-arrow-height: 0.4rem !default;
 // fusv-disable
@@ -1272,28 +1267,28 @@ $modal-backdrop-opacity: 0.8 !default;
 $modal-max-width: 32rem !default;
 $modal-dialog-margin: 0.5rem !default;
 $modal-dialog-margin-y-sm-up: 1.5rem !default;
-$modal-inner-padding: 1.5rem !default;
+// $modal-inner-padding: 1.5rem !default;
 
-$modal-header-border-color: var(--#{$prefix}border-color) !default;
-$modal-header-border-width: 0 !default;
-$modal-header-padding-y: $modal-inner-padding !default;
-$modal-header-padding-x: $modal-inner-padding !default;
-$modal-header-padding: 1.5rem !default;
+// $modal-header-border-color: var(--#{$prefix}border-color) !default;
+// $modal-header-border-width: 0 !default;
+// $modal-header-padding-y: $modal-inner-padding !default;
+// $modal-header-padding-x: $modal-inner-padding !default;
+// $modal-header-padding: 1.5rem !default;
 $modal-show-transform: none !default;
 $modal-fade-transform: translate(0, -50px) !default;
 $modal-transition: transform 0.3s ease-out !default;
 $modal-scale-transform: scale(1.02) !default;
 $modal-title-line-height: $line-height-base !default;
 
-$modal-footer-bg: null !default;
-$modal-footer-border-color: $modal-header-border-color !default;
+// $modal-footer-bg: null !default;
+// $modal-footer-border-color: $modal-header-border-color !default;
 $modal-footer-margin-between: 0.5rem !default;
-$modal-footer-border-width: 0 !default;
+// $modal-footer-border-width: 0 !default;
 
 $modal-backdrop-bg: $black !default;
 
 // Carousel
-$carousel-bg: #444e57 !default; // TODO: not used, consider to remove
+$carousel-bg: #444e57 !default;
 $carousel-padding: 3em !default;
 $carousel-control-color: $secondary !default;
 $carousel-control-width: auto !default;
@@ -1339,19 +1334,19 @@ $pagination-padding-x-lg: 1.5rem !default;
 
 $pagination-font-size: $font-size-base !default;
 
-$pagination-color: var(--#{$prefix}link-color) !default;
+$pagination-color: var(--#{$prefix}color-link) !default;
 $pagination-bg: $white !default;
 $pagination-border-radius: $border-radius !default;
 $pagination-border-width: $border-width !default;
 $pagination-margin-start: ($pagination-border-width * -1) !default;
 $pagination-border-color: $gray-300 !default;
 
-$pagination-focus-color: var(--#{$prefix}link-hover-color) !default;
+$pagination-focus-color: var(--#{$prefix}color-link-hover) !default;
 $pagination-focus-bg: $gray-200 !default;
 $pagination-focus-box-shadow: $input-btn-focus-box-shadow !default;
 $pagination-focus-outline: 0 !default;
 
-$pagination-hover-color: var(--#{$prefix}link-hover-color) !default;
+$pagination-hover-color: var(--#{$prefix}color-link-hover) !default;
 $pagination-hover-bg: $gray-200 !default;
 $pagination-hover-border-color: $gray-300 !default;
 
@@ -1563,8 +1558,8 @@ $nav-link-padding-y: 0.5rem !default;
 $nav-link-padding-x: 1rem !default;
 $nav-link-font-size: null !default;
 $nav-link-font-weight: null !default;
-$nav-link-color: var(--#{$prefix}link-color) !default;
-$nav-link-hover-color: var(--#{$prefix}link-hover-color) !default;
+$nav-link-color: var(--#{$prefix}color-link) !default;
+$nav-link-hover-color: var(--#{$prefix}color-link-hover) !default;
 $nav-link-transition:
   color 0.15s ease-in-out,
   background-color 0.15s ease-in-out,
@@ -1668,25 +1663,6 @@ $navigation-light-megamenu-separator-color: $gray-border !default; // UI kit
 $inline-menu-line-width: 2px;
 $inline-menu-linklist-v-padding: 0.59em;
 
-// Linklist
-$link-list-font-size: 1rem;
-$link-list-font-size-l: 1.125rem;
-$link-list-line-height: 2rem;
-$link-list-heading-size: 1.125rem;
-$link-list-divider-height: 1px;
-$link-list-divider-distance: 8px;
-$link-list-h-pad: 24px;
-$link-list-v-pad: 0.25em;
-$link-list-paragraph-size: 0.875rem;
-$link-list-left-icon-space: 8px;
-$link-list-avatar-radius: 50px;
-$link-list-avatar-margin: 8px;
-$link-list-checkbox-icon-right: 35px;
-$link-list-toggle-margin: 8px;
-$link-list-icon-v-padding: 5px;
-$link-list-v-padding-l: 0.45em;
-$link-list-hover-color: $primary-a5 !default; // TODO: Not used, consider to remove it
-
 // Megamenu
 $megamenu-padding-top-desktop: $v-gap * 4;
 $megamenu-column-gap: $v-gap * 3;
@@ -1881,7 +1857,7 @@ $card-big-h5-l-h: 1.5rem;
 $card-big-p-size: 1.125rem;
 $card-big-p-l-h: 1.5rem;
 $card-big-top-icon-size: $v-gap * 10;
-$card-img-heading-size: 1.1111111111111112rem; // FIXME
+$card-img-heading-size: 1.1111111111111112rem;
 $card-img-heading-l-h: 1.5555555555555556rem;
 $special-card-img-width: 174px;
 // flag icon
@@ -1906,7 +1882,7 @@ $select-dd-small-separator-width: 65px;
 $select-dd-small-separator-bg: $gray-border !default; // UI kit
 $select-dd-icon-size: $v-gap * 3;
 $select-dd-icon-flag-top: 10px;
-$select-dd-pill-font-size: 0.7777777777777778rem; // FIXME
+$select-dd-pill-font-size: 0.7777777777777778rem;
 $select-dd-pill-distance: $v-gap;
 $select-dd-pill-font-w: 700;
 $select-dd-header-size: 0.875rem;
@@ -1915,7 +1891,7 @@ $select-dd-check-height: 30px;
 
 //date picker
 $dp-label-color: $color-text-base !default;
-$dp-border-bottom: 1px solid $dp-label-color !default; // TODO Not found - need more attention
+$dp-border-bottom: 1px solid $dp-label-color !default;
 $dp-shadow: $dialog-shadow;
 $dp-arrow-size: $v-gap * 2;
 $dp-month-size: 0.875rem;
@@ -1923,7 +1899,7 @@ $dp-month-l-spacing: 0.1px;
 $dp-grid-size: 0.75rem;
 $dp-current-size: $v-gap * 4;
 
-//hero
+// hero
 $hero-bg-color: $primary !default;
 $hero-height-desk: 400px;
 $hero-height-mob: 300px;
@@ -1994,10 +1970,10 @@ $stepper-spacing-h: 24px;
 $stepper-spacing-v: 16px;
 
 // transfer
-$transfer-border: 1px solid $neutral-1-a3 !default; // TODO Not found
+$transfer-border: 1px solid $neutral-1-a3 !default;
 $transfer-descr-size: 0.75rem;
-$transfer-descr-color: $neutral-1-a8 !default; // TODO Not found
-$transfer-header-line-color: $neutral-1-a3 !default; // TODO Not found
+$transfer-descr-color: $neutral-1-a8 !default;
+$transfer-header-line-color: $neutral-1-a3 !default;
 $transfer-header-line-w: 65px;
 $transfer-height: 240px;
 
@@ -2028,9 +2004,10 @@ $grid-breakpoints: (
   xxl: 1400px,
 ) !default;
 
-// Hover states breackpoint
+// Hover states breakpoint
 // Define minimum dimension for over states activation
 $grid-breakpoints-hover: 1025px;
+
 // Grid containers
 // Define the maximum width of `.container` for different screen sizes.
 $container-max-widths: (
@@ -2110,8 +2087,8 @@ $autocomplete-box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.05) !default;
 
 // Offcanvas
 
-$offcanvas-padding-y: $modal-inner-padding !default;
-$offcanvas-padding-x: $modal-inner-padding !default;
+$offcanvas-padding-y: 1.5rem !default;
+$offcanvas-padding-x: 1.5rem !default;
 $offcanvas-horizontal-width: 400px !default;
 $offcanvas-vertical-height: 30vh !default;
 $offcanvas-transition-duration: 0.3s !default;
@@ -2123,3 +2100,15 @@ $offcanvas-color: $modal-content-color !default;
 $offcanvas-box-shadow: $modal-content-box-shadow-xs !default;
 $offcanvas-backdrop-bg: $modal-backdrop-bg !default;
 $offcanvas-backdrop-opacity: $modal-backdrop-opacity !default;
+// ============================================================
+
+// NEW VARIABLES
+
+// Global colors used inside sass loops and maps
+$color-primary: var(--#{$prefix}theme-primary);
+$color-secondary: var(--#{$prefix}color-background-secondary);
+$color-accent: var(--#{$prefix}color-background-accent);
+$color-success: var(--#{$prefix}color-background-success);
+$color-warning: var(--#{$prefix}color-background-warning);
+$color-danger: var(--#{$prefix}color-background-danger);
+$color-inverse: var(--#{$prefix}color-background-inverse);

package/src/scss/base/_version.scss

@@ -1,3 +1,3 @@
 :root {
-  --bootstrap-italia-version: '2.17.2';
+  --bootstrap-italia-version: '3.0.0-alpha.0';
 }

package/src/scss/base/mixins/_banner.scss

@@ -1,11 +1,9 @@
 @mixin bsBanner($file) {
-  /*!
-   * Bootstrap Italia #{$file} (https://italia.github.io/bootstrap-italia/)
-   * Authors: https://github.com/italia/bootstrap-italia/blob/main/AUTHORS
-   * Licensed under BSD-3-Clause license (https://github.com/italia/bootstrap-italia/blob/main/LICENSE)
-   * This a fork of Bootstrap: Initial license below
-   * Bootstrap #{$file} v5.2.3 (https://getbootstrap.com/)
-   * Copyright 2011-2022 The Bootstrap Authors- Copyright 2011-2022 Twitter, Inc.
-   * Licensed under MIT license (https://github.com/twbs/bootstrap/blob/main/LICENSE)
-   */
+  /* Bootstrap Italia #{$file} (https://italia.github.io/bootstrap-italia/) */
+  /* Authors: https://github.com/italia/bootstrap-italia/blob/main/AUTHORS */
+  /* Licensed under BSD-3-Clause license (https://github.com/italia/bootstrap-italia/blob/main/LICENSE) */
+  /* This a fork of Bootstrap: Initial license below */
+  /* Bootstrap #{$file} v5.2.3 (https://getbootstrap.com/) */
+  /* Copyright 2011-2022 The Bootstrap Authors- Copyright 2011-2022 Twitter, Inc. */
+  /* Licensed under MIT license (https://github.com/twbs/bootstrap/blob/main/LICENSE) */
 }

package/src/scss/base/mixins/_focus.scss

@@ -0,0 +1,14 @@
+%focus {
+  border-color: $focus-outline-color-out !important;
+  box-shadow:
+    0 0 0 2px var(--#{$prefix}color-border-inverse),
+    0 0 0 5px var(--#{$prefix}color-outline-focus) !important;
+  outline: 3px solid transparent !important;
+  outline-offset: 3px !important;
+}
+
+%focusmouse {
+  border-color: inherit !important;
+  box-shadow: none !important;
+  outline: none !important;
+}

package/src/scss/bootstrap-italia.scss

@@ -1,3 +1,5 @@
+@import 'design-tokens-italia/dist/css/variables';
+
 @import 'base/mixins/banner';
 @include bsBanner('');
 
@@ -15,6 +17,7 @@
 
 // Functions, maps and mixins
 @import 'base/mixins';
+@import 'base/mixins/focus';
 @import 'base/maps';
 @import 'base/utilities';
 // ------------------------------
@@ -40,53 +43,56 @@
 // Nav & Header
 @import 'components/nav';
 @import 'components/navbar';
+@import 'components/header';
 @import 'components/headerslim';
-@import 'components/headerslimtheme';
+// @import 'components/headerslimtheme';
 @import 'components/headercenter';
-@import 'components/headercentertheme';
-@import 'components/headernavbar';
-@import 'components/headernavbartheme';
-@import 'components/header';
-@import 'components/navigationtheme';
+// @import 'components/headercentertheme';
+// @import 'components/headernavbar';
+// @import 'components/headernavbartheme';
+// @import 'components/navigationtheme';
 // ------------------------------
 
 // Components
-@import 'components/type';
+@import 'components/avatar';
+@import 'components/code';
+@import 'components/figcaption';
 @import 'components/grid';
+@import 'components/gridlist';
+@import 'components/images';
+@import 'components/linklist';
+@import 'components/list';
+@import 'components/list-group';
+@import 'components/dropdown';
+@import 'components/megamenu';
 @import 'components/tables';
+@import 'components/type';
 @import 'components/breadcrumb';
 @import 'components/modal';
 @import 'components/accordion';
 @import 'components/carousel';
-@import 'components/calendar';
+// @import 'components/calendar'; Temporarily disabled because not used across the library
 @import 'components/alert';
 @import 'components/button-group';
 @import 'components/buttons';
 @import 'components/font';
-@import 'components/dropdown';
-@import 'components/pager';
 @import 'components/tab';
 @import 'components/cookiebar';
 @import 'components/hero';
 @import 'components/forward';
 @import 'components/back-to-top';
-@import 'components/list-group';
-@import 'components/linklist';
 @import 'components/offcanvas'; // Keep?
 @import 'components/navigation';
 @import 'components/skiplinks';
 @import 'components/affix';
 @import 'components/sidebar';
-@import 'components/sidebarthemes';
-@import 'components/megamenu';
 @import 'components/bottomnav';
 @import 'components/navscroll';
-@import 'components/navscrolltheme';
+// @import 'components/navscrolltheme';
 @import 'components/callout';
 @import 'components/toolbar';
 @import 'components/sections';
 @import 'components/notifications';
-@import 'components/avatar';
 @import 'components/thumbnav';
 @import 'components/steppers';
 @import 'components/card';
@@ -96,11 +102,9 @@
 @import 'components/progress-donuts';
 @import 'components/progress-bars';
 @import 'components/progress-spinners';
-@import 'components/gridlist';
 @import 'components/popover';
 @import 'components/tooltip';
 @import 'components/videoplayer';
-@import 'components/list';
 @import 'components/chips';
 @import 'components/rating';
 @import 'components/dimmer';
@@ -111,11 +115,9 @@
 @import 'components/point-list';
 @import 'components/rating-list';
 @import 'components/badge';
-@import 'components/figcaption';
 @import 'components/sticky';
 @import 'components/print';
-@import 'components/code';
-@import 'components/images';
+@import 'components/footer';
 @import 'components/page-scroll';
 @import 'components/pagination';
 @import 'components/placeholders'; // Keep?
@@ -124,26 +126,21 @@
 
 // Form
 @import 'forms/forms';
-@import 'forms/labels';
-@import 'forms/form-text';
+// @import 'forms/labels';
 @import 'forms/form-control';
-@import 'forms/form-check';
-@import 'forms/form-range';
-@import 'forms/floating-labels';
+// @import 'forms/form-check';
+// @import 'forms/form-range';
+// @import 'forms/floating-labels';
 @import 'forms/input-group';
-@import 'forms/validation';
+// @import 'forms/validation';
 @import 'forms/form-input-file';
 @import 'forms/form-input-number';
 @import 'forms/form-input-upload';
 @import 'forms/form-toggles';
 @import 'forms/form-password';
-@import 'forms/form-select';
+// @import 'forms/form-select';
 @import 'forms/form-transfer';
 @import 'forms/accessible-autocomplete';
 @import 'forms/autocomplete';
 @import 'forms/just-validate';
 // ------------------------------
-
-// Footer
-@import 'components/footer';
-// ------------------------------

package/src/scss/components/_accept-overlay.scss

@@ -1,31 +1,57 @@
-//mobile
+// Component: accept overlay
+//
+// Description: Component styles for accept overlay
+//
 
-.acceptoverlayable {
-  position: relative;
-  &.show {
-    min-height: 450px;
-  }
-}
+// Variables
+//
 
+// Properties
+//
+.acceptoverlay {
+  --#{$prefix}acceptoverlay-color-background: var(--#{$prefix}color-background-inverse);
+  --#{$prefix}acceptoverlay-color-text: var(--#{$prefix}color-text);
+  --#{$prefix}acceptoverlay-label-color: var(--#{$prefix}color-text-secondary);
+  --#{$prefix}acceptoverlay-label-border-color: var(--#{$prefix}color-border-subtle);
+  --#{$prefix}acceptoverlay-opacity: 0.9;
+  --#{$prefix}acceptoverlay-spacing-inset: var(--#{$prefix}spacing-s);
+  --#{$prefix}acceptoverlay-primary-opacity: 0.95;
+  --#{$prefix}acceptoverlay-inner-width: 600px;
+  --#{$prefix}acceptoverlay-icon-spacing: var(--#{$prefix}spacing-s);
+  --#{$prefix}acceptoverlay-icon-fill: var(--#{$prefix}icon-primary);
+  --#{$prefix}acceptoverlay-buttons-spacing: var(--#{$prefix}spacing-s);
+}
+// Styles
+//
+/* stylelint-disable-next-line no-duplicate-selectors */
 .acceptoverlay {
-  display: flex;
-  background-color: $color-background-emphasis;
-  opacity: 0.92;
   position: absolute;
   top: 0;
+  right: 0;
   bottom: 0;
   left: 0;
-  right: 0;
   z-index: 1;
-  padding: $v-gap * 4;
-  justify-content: center;
+
+  display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
+  justify-content: center;
+  padding: var(--#{$prefix}acceptoverlay-spacing-inset);
+  opacity: var(--#{$prefix}acceptoverlay-opacity);
+  background-color: var(--#{$prefix}acceptoverlay-background-color);
+  // Change spacing on medium devices
+  @include media-breakpoint-up(md) {
+    --#{$prefix}acceptoverlay-spacing-inset: var(--#{$prefix}spacing-m);
+  }
+  // Change alignment on large devices
+  @include media-breakpoint-up(lg) {
+    align-items: center;
+  }
 
   label {
-    color: $white;
+    color: var(--#{$prefix}acceptoverlay-label-color);
     &::after {
-      border-color: $white !important;
+      border-color: var(--#{$prefix}acceptoverlay-label-border-color) !important;
     }
   }
 
@@ -34,9 +60,9 @@
   }
 
   &.acceptoverlay-primary {
-    background-color: $primary;
+    --#{$prefix}acceptoverlay-background-color: var(--#{$prefix}color-background-primary);
     &.show {
-      opacity: 0.97;
+      opacity: var(--#{$prefix}acceptoverlay-primary-opacity);
     }
   }
 
@@ -47,47 +73,51 @@
   h5,
   h6,
   p {
-    color: $white;
     margin-bottom: 0;
+    color: var(--#{$prefix}acceptoverlay-color-text);
   }
 
   h4 {
     text-align: center;
-    font-size: 2.25rem;
   }
 
   p {
     text-align: justify;
-    font-family: $font-family-serif;
-    font-size: 1rem;
   }
 
   .acceptoverlay-inner {
     width: 100%;
-    max-width: 480px;
+    max-width: var(--#{$prefix}acceptoverlay-inner-width);
   }
 
   .acceptoverlay-icon {
+    margin-bottom: var(--#{$prefix}acceptoverlay-icon-spacing);
     text-align: center;
-    margin-bottom: $v-gap * 3;
+    @include media-breakpoint-up(md) {
+      --#{$prefix}acceptoverlay-icon-margin-bottom: var(--#{$prefix}spacing-xxl);
+    }
+
     .icon {
-      fill: $white;
+      fill: var(--#{$prefix}acceptoverlay-icon-fill);
     }
   }
 
   .acceptoverlay-buttons {
-    background-color: transparent !important;
-    margin-top: $v-gap * 4;
     display: flex;
     align-items: center;
     gap: 1rem;
     flex-wrap: wrap;
+    justify-content: space-between;
+    margin-top: var(--#{$prefix}acceptoverlay-buttons-spacing);
+    background-color: transparent !important;
+
     button {
       width: 100%;
       &:last-child {
-        margin-top: $v-gap * 2;
+        --#{$prefix}acceptoverlay-buttons-spacing: var(--#{$prefix}spacing-xxs);
       }
     }
+
     &.single-button {
       button {
         margin-top: 0;
@@ -97,35 +127,29 @@
 }
 //Tablet vertical
 @include media-breakpoint-up(md) {
-  .acceptoverlay {
-    padding: $v-gap * 3;
-    .acceptoverlay-icon {
-      margin-bottom: $v-gap * 6;
+  .acceptoverlay-buttons {
+    flex-wrap: nowrap;
+    button {
+      width: 50%;
+      margin-top: 0 !important;
+      &:last-child {
+        margin-left: var(--#{$prefix}spacing-m);
+      }
     }
-    .acceptoverlay-buttons {
-      flex-wrap: nowrap;
+    &.single-button {
+      //text-align: center;
       button {
-        width: 50%;
-        margin-top: 0 !important;
-        &:last-child {
-          margin-left: $v-gap * 3;
-        }
-      }
-      &.single-button {
-        //text-align: center;
-        button {
-          width: auto;
-          min-width: 50%;
-          margin: 0 auto;
-        }
+        width: auto;
+        min-width: 50%;
+        margin: 0 auto;
       }
     }
   }
 }
 
-//Tablet horizontal / small desktop
-@include media-breakpoint-up(lg) {
-  .acceptoverlay {
-    align-items: center;
+.acceptoverlayable {
+  position: relative;
+  &.show {
+    min-height: 450px;
   }
 }