bootstrap-italia 2.11.2 → 2.12.1

package/src/scss/custom/_avatar.scss

@@ -12,7 +12,7 @@
   color: $color-text-secondary; // UI kit
   box-sizing: content-box;
   transition: background-color 0.2s;
-  // image
+
   img {
     width: 100%;
     height: 100%;
@@ -21,7 +21,7 @@
     transition: filter 0.2s;
     border-radius: 50%;
   }
-  // text
+
   p {
     font-size: 1rem; // default size equals to md
     margin: 0;
@@ -29,28 +29,32 @@
     line-height: 1em;
     position: absolute;
   }
-  // icon
+
   .icon {
     height: 16px; // default size equals to md
     width: 16px;
   }
 
-  //color variants----------------------------------------- START
   &.avatar-primary {
     background: $primary;
   }
+
   &.avatar-secondary {
     background: $secondary;
   }
+
   &.avatar-green {
     background: $green;
   }
+
   &.avatar-orange {
     background: $orange;
   }
+
   &.avatar-red {
     background: $red;
   }
+
   &.avatar-primary,
   &.avatar-secondary,
   &.avatar-green,
@@ -58,12 +62,11 @@
   &.avatar-red {
     color: $white;
   }
-  //color variants----------------------------------------- END
 
-  //dropdown variant--------------------------------------- START
   &.avatar-dropdown {
     overflow: visible;
     position: relative;
+
     .dropdown {
       position: absolute;
       top: 0;
@@ -75,200 +78,239 @@
       align-items: center;
       height: 100%;
     }
+
     .btn-dropdown {
       color: inherit;
       padding: 0;
       line-height: 0;
       font-size: 0.75rem;
     }
+
     .list-item {
       display: flex;
       align-items: center;
       padding: 0 16px;
       font-size: 0.875rem;
     }
+
     .link-list {
+      white-space: nowrap;
+
       span {
         line-height: 1em;
       }
+
       li {
         margin-bottom: 16px;
         &:last-child {
           margin-bottom: 0;
         }
       }
-      white-space: nowrap;
+
       .avatar {
         margin-right: 16px;
+
         &.size-sm {
           margin-right: 12px;
         }
+
         p {
           color: $white !important;
         }
       }
     }
+
     .dropdown-menu {
       margin-left: -27px !important;
     }
   }
-  //dropdown variant-------------------------------------- END
 
-  //size variants----------------------------------------- START
   &.size-xs {
     width: $avatar-base-size * 2;
     height: $avatar-base-size * 2;
+
     p {
       font-size: 0.625rem;
     }
+
     .icon {
       height: 10px;
       width: 10px;
     }
   }
+
   &.size-sm {
     width: $avatar-base-size * 3;
     height: $avatar-base-size * 3;
+
     p {
       font-size: 0.875rem;
     }
+
     .icon {
       height: 12px;
       width: 12px;
     }
   }
+
   &.size-md {
     width: $avatar-base-size * 4;
     height: $avatar-base-size * 4;
+
     p {
       font-size: 1rem;
     }
+
     .icon {
       height: 16px;
       width: 16px;
     }
+
     .avatar-presence,
     .avatar-status {
       border-width: 1px;
+
       .icon {
         display: none;
       }
     }
   }
+
   &.size-lg {
     width: $avatar-base-size * 5;
     height: $avatar-base-size * 5;
+
     p {
       font-size: 1.125rem;
     }
+
     .icon {
       height: 20px;
       width: 20px;
     }
+
     .avatar-presence,
     .avatar-status {
       right: -2px;
       width: 15px;
       height: 15px;
     }
+
     .avatar-status {
       top: math.div($avatar-base-size, 48);
     }
   }
+
   &.size-xl {
     width: $avatar-base-size * 10;
     height: $avatar-base-size * 10;
+
     p {
       font-size: 2.25rem;
     }
+
     .icon {
       height: 40px;
       width: 40px;
     }
+
     .avatar-presence,
     .avatar-status {
       right: 6px;
       width: 18px;
       height: 18px;
     }
+
     .avatar-presence {
       bottom: $avatar-base-size;
     }
+
     .avatar-status {
       top: $avatar-base-size * 0.25;
     }
   }
+
   &.size-xxl {
     width: $avatar-base-size * 16;
     height: $avatar-base-size * 16;
+
     p {
       font-size: 58px;
     }
+
     .icon {
       height: 62px;
       width: 62px;
     }
+
     .avatar-presence,
     .avatar-status {
       right: 4px;
       width: 24px;
       height: 24px;
+
       .icon {
         width: 20px;
         height: 20px;
       }
     }
+
     .avatar-presence {
       bottom: $avatar-base-size * 2;
     }
+
     .avatar-status {
       top: $avatar-base-size;
     }
   }
-  //size variants----------------------------------------- END
 }
 
-//hover & focus states
 a.avatar {
   filter: brightness(100%);
-  //position: relative;
+
   &:hover {
+    background: shade-color($color-background-secondary-lighter, 5%);
+
     img {
       filter: brightness(90%);
     }
-    background: shade-color($color-background-secondary-lighter, 5%);
+
     &.avatar-primary {
       background: shade-color($primary, 5%);
     }
+
     &.avatar-secondary {
       background: shade-color($secondary, 5%);
     }
+
     &.avatar-green {
       background: shade-color($green, 5%);
     }
+
     &.avatar-orange {
       background: shade-color($orange, 5%);
     }
+
     &.avatar-red {
       background: shade-color($red, 12%);
     }
   }
 }
+
 .avatar-dropdown {
   &:hover,
   &:focus-within {
     background: shade-color($color-background-secondary-lighter, 5%);
   }
+
   .btn-dropdown:focus {
     box-shadow: none;
   }
 }
 
-//wrapper for status, presence and extra text -------------- START
 .avatar-wrapper {
   position: relative;
 
-  //presence and status - common properties
   .avatar-presence,
   .avatar-status {
     position: absolute;
@@ -282,7 +324,7 @@ a.avatar {
     display: flex;
     justify-content: center;
     align-items: center;
-    //icon
+
     .icon {
       width: 18px;
       height: 18px;
@@ -291,15 +333,17 @@ a.avatar {
     }
   }
 
-  //presence
   .avatar-presence {
     bottom: $avatar-base-size;
+
     &.active {
       background: $green;
     }
+
     &.busy {
       background: $red;
     }
+
     &.hidden {
       &:after {
         content: '';
@@ -315,21 +359,22 @@ a.avatar {
     }
   }
 
-  //status
   .avatar-status {
     top: 0;
+
     &.approved {
       background: $green;
     }
+
     &.declined {
       background: $red;
     }
+
     &.notify {
       background: $primary-b1;
     }
   }
 
-  //extra text version
   &.avatar-extra-text {
     display: inline-flex;
     justify-content: flex-start;
@@ -340,27 +385,21 @@ a.avatar {
       flex-shrink: 0;
     }
 
-    a {
-      text-decoration: none;
-    }
-
-    //text
     .extra-text {
       line-height: 1.2em;
       margin-left: 16px;
+
       h3,
       h4 {
         font-weight: 600;
         margin: 0;
         font-size: 1.125rem;
+
         a {
           display: inline-block;
-          text-decoration: none;
-          &:hover {
-            text-decoration: underline;
-          }
         }
       }
+
       p,
       time {
         margin: 0;
@@ -370,9 +409,7 @@ a.avatar {
     }
   }
 }
-//wrapper for status, presence and extra text -------------- START
 
-// inline group -------------------------------------------- START
 .avatar-group {
   & > li {
     margin-bottom: 16px;
@@ -380,7 +417,7 @@ a.avatar {
     &:last-child {
       margin-bottom: 0;
     }
-    // link
+
     .list-item {
       display: inline-flex;
       align-items: center;
@@ -388,10 +425,11 @@ a.avatar {
       line-height: 1em;
       .avatar {
         margin-right: 12px;
-        //reset color & font size for avatar
+
         p {
           font-size: 1rem;
         }
+
         &.avatar-primary,
         &.avatar-secondary,
         &.avatar-green,
@@ -403,17 +441,20 @@ a.avatar {
           }
         }
       }
+
       span {
         margin: 0;
         font-size: 0.875rem;
         font-weight: 600;
       }
     }
+
+    a.list-item span {
+      text-decoration: underline;
+    }
   }
 }
-// inline group -------------------------------------------- END
 
-// stacked group ------------------------------------------- START
 .avatar-group-stacked {
   display: flex;
   justify-content: flex-start;
@@ -430,4 +471,3 @@ a.avatar {
     }
   }
 }
-// stacked group ------------------------------------------- END

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

@@ -12,7 +12,11 @@
   visibility: hidden;
   opacity: 0;
   text-align: 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;
+  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;
@@ -20,7 +24,11 @@
   &.back-to-top-show {
     visibility: visible;
     opacity: 1;
-    transition: $transition-base, transform 0.05s ease-out, visibility 0s linear, opacity 0.1s ease-in-out;
+    transition:
+      $transition-base,
+      transform 0.05s ease-out,
+      visibility 0s linear,
+      opacity 0.1s ease-in-out;
     transform: scale(1);
   }
   &:hover {

package/src/scss/custom/_badge.scss

@@ -1,7 +1,11 @@
 .badge {
   --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;
+  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;

package/src/scss/custom/_buttons.scss

@@ -1,7 +1,7 @@
 .btn {
   //btn-css-vars
-  --bs-btn-color: #06c;
-  --bs-btn-hover-color: #004d99; // TODO change with tokens when available
+  --bs-btn-color: $primary;
+  --bs-btn-hover-color: $color-background-primary-hover;
   --bs-btn-active-color: #003366; // TODO change with tokens when available
   //btn-css-vars-end
   padding: 12px 24px;
@@ -224,15 +224,6 @@
     &:hover {
       box-shadow: inset 0 0 0 2px color-hover($white);
     }
-    &:focus,
-    &.focus {
-      box-shadow: inset 0 0 0 2px $white, 0 0 0 $btn-focus-width rgba($white, 0.5);
-    }
-    &:not(:disabled):not(.disabled).active,
-    &:not(:disabled):not(.disabled):active,
-    .show > &.dropdown-toggle {
-      box-shadow: inset 0 0 0 2px $white;
-    }
   }
   .btn-secondary {
     @include button-variant($primary, $white, tint-color($primary, 7.5%), shade-color($white, 10%), tint-color($primary, 10%), shade-color($white, 12.5%));
@@ -240,14 +231,5 @@
   }
   .btn-outline-secondary {
     @include button-outline-variant($white, color-hover($white), transparent, color-hover($white));
-    &:focus,
-    &.focus {
-      box-shadow: 0 0 0 $btn-focus-width rgba($white, 0.5);
-    }
-    &:not(:disabled):not(.disabled).active,
-    &:not(:disabled):not(.disabled):active,
-    .show > &.dropdown-toggle {
-      box-shadow: none;
-    }
   }
 }

package/src/scss/custom/_card.scss

@@ -220,9 +220,15 @@
       margin-top: -$v-gap * 2;
     }
     a {
+      display: inline-block;
       h5.card-title {
         color: $card-link-color;
       }
+      &:hover {
+        h5.card-title {
+          color: var(--bs-link-hover-color);
+        }
+      }
     }
     .card-text {
       font-family: $font-family-serif;
@@ -354,7 +360,9 @@
     width: 80px;
     border-radius: 4px;
     background-color: $white;
-    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.1);
+    box-shadow:
+      0 1px 4px 0 rgba(0, 0, 0, 0.1),
+      0 4px 8px 0 rgba(0, 0, 0, 0.1);
     position: absolute;
     right: 32px;
     top: 10%;
@@ -427,11 +435,13 @@
         font-weight: normal;
       }
     }
+    h5.card-title {
+      color: $card-link-color;
+    }
     &:hover {
-      text-decoration: none;
-      h5 {
-        text-decoration: underline;
-        color: $primary;
+      text-decoration: underline;
+      h5.card-title {
+        color: var(--bs-link-hover-color);
       }
       .img-responsive-wrapper {
         &:before {

package/src/scss/custom/_carousel.scss

@@ -261,3 +261,9 @@
     }
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .it-carousel-wrapper .splide__pagination button {
+    transition: none !important;
+  }
+}

package/src/scss/custom/_chips.scss

@@ -8,7 +8,7 @@
   border-radius: $v-gap * 1.5;
   height: $v-gap * 3;
   min-width: 100px;
-  padding: 0 $v-gap * 2 2px $v-gap;
+  padding: 0 $v-gap / 2 2px $v-gap;
   transition: all 0.05s;
   margin-top: $v-gap * 0.5;
   margin-bottom: $v-gap;
@@ -35,8 +35,8 @@
     background: transparent;
     border: none;
     margin-left: auto;
-    width: $v-gap;
-    height: $v-gap;
+    width: 24px;
+    height: 24px;
     position: relative;
     &:hover:not([disabled]) {
       cursor: pointer;
@@ -48,9 +48,6 @@
       width: 22px;
       height: 22px;
       fill: $gray-secondary;
-      position: absolute;
-      top: -6px;
-      left: 0;
       transition: fill 0.05s;
     }
   }
@@ -70,7 +67,7 @@
     height: $v-gap * 4;
     min-width: 120px;
     border-radius: $v-gap * 2;
-    padding: 2px $v-gap * 3 0 $v-gap * 2;
+    padding: 2px $v-gap / 2 0 $v-gap * 2;
     //label
     .chip-label {
       font-size: $chips-label-font-size-l;
@@ -79,11 +76,11 @@
     }
     //close button
     button {
+      width: 32px;
+      height: 32px;
       .icon {
         width: 28px;
         height: 28px;
-        top: -12px;
-        left: 0;
       }
     }
     //left icon

package/src/scss/custom/_form-datepicker.scss

@@ -186,7 +186,6 @@ a.datepicker-button {
     .datepicker-month:focus,
     .datepicker-month:hover {
       background-color: #eee;
-      border-color: #999;
       border: none;
       margin: 0;
       padding: 0;

package/src/scss/custom/_form-input-file.scss

@@ -27,7 +27,6 @@ input[type='file'] + label {
     z-index: 5;
     &::before {
       background-color: $white;
-      border-color: $primary;
       bottom: -1px;
       color: $primary;
       content: 'Sfoglia';

package/src/scss/custom/_form-input-upload.scss

@@ -37,14 +37,6 @@
       margin-right: 10px;
     }
   }
-
-  //focus state
-  &:focus {
-    & + label {
-      background-color: shade-color($primary, 10%);
-      outline: auto 5px -webkit-focus-ring-color;
-    }
-  }
 }
 
 //pictures wall version
@@ -198,7 +190,7 @@
       overflow: hidden;
       .upload-file-weight {
         color: $neutral-1-a7;
-        font-size: 0.75em;
+        // font-size: 0.75em;
         margin-left: 10px;
         display: none;
       }
@@ -478,7 +470,9 @@
     align-items: center;
     opacity: 0;
     transform: scale(0.6);
-    transition: opacity 0.2s, transform 0.5s cubic-bezier(0.75, -0.5, 0, 1.75);
+    transition:
+      opacity 0.2s,
+      transform 0.5s cubic-bezier(0.75, -0.5, 0, 1.75);
 
     svg {
       fill: $white;

package/src/scss/custom/_form-toggles.scss

@@ -48,7 +48,10 @@
         border-radius: 50%;
         top: -5px;
         left: -3px;
-        transition: left 0.3s ease, background 0.1s ease, transform 0.1s ease;
+        transition:
+          left 0.3s ease,
+          background 0.1s ease,
+          transform 0.1s ease;
       }
 
       &:before {