bootstrap-italia 2.11.1 → 2.12.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 {

package/src/scss/custom/_forms.scss

@@ -48,7 +48,7 @@ fieldset {
     padding: 0 $input-spacing-x;
     z-index: 1;
     &.active {
-      transform: translateY(-75%);
+      transform: translateY(-85%);
       font-weight: 600;
       font-size: $small-font-size;
       color: $input-label-color;
@@ -131,6 +131,9 @@ textarea {
   background-size: 45px 45% !important;
   border-radius: 0 !important;
   min-height: 2.5rem;
+  &.form-control-lg {
+    border-radius: 0;
+  }
   &:disabled,
   &[readonly] {
     cursor: not-allowed;
@@ -140,7 +143,6 @@ textarea {
       cursor: not-allowed;
     }
   }
-  &:focus,
   &:active {
     box-shadow: none !important;
   }
@@ -223,11 +225,7 @@ textarea {
       padding-bottom: 0;
       border-bottom: 1px solid $input-border;
       border-radius: 0 4px 4px 0;
-      box-shadow: none;
       height: 100%;
-      &:focus:not(.focus--mouse) {
-        box-shadow: inset 0 0 0 2px $focus-outline-color;
-      }
     }
   }
 }
@@ -449,17 +447,17 @@ textarea {
 
       &::after,
       &::before {
-        right: 15px;
+        right: 0px;
         left: auto;
       }
     }
 
     [type='checkbox']:checked + label::before {
-      right: 26px;
+      right: 11px;
     }
 
     [type='radio']:checked + label::before {
-      right: 15px;
+      right: 0px;
     }
 
     .form-text {
@@ -468,12 +466,8 @@ textarea {
       margin-bottom: 0.5rem;
     }
 
-    // label {
-    //   font-weight: 600;
-    // }
-
     input.semi-checked:not(:checked) + label::before {
-      right: 19px;
+      right: 4px;
       left: auto;
     }
   }
@@ -497,3 +491,19 @@ textarea {
     z-index: 0;
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  fieldset legend,
+  .form-group label,
+  textarea,
+  .form-check [type='checkbox'],
+  .form-check [type='radio'],
+  .form-check [type='checkbox'] + label::after,
+  .form-check [type='checkbox'] + label::before,
+  .form-check [type='radio'] + label::after,
+  .form-check [type='radio'] + label::before,
+  .toggles label input[type='checkbox'] + .lever::before,
+  .toggles label input[type='checkbox'] + .lever::after {
+    transition: none !important;
+  }
+}

package/src/scss/custom/_navscroll.scss

@@ -16,7 +16,9 @@
       z-index: 10;
       visibility: hidden;
       opacity: 0;
-      transition: opacity 0.3s 0s, visibility 0s 0.3s;
+      transition:
+        opacity 0.3s 0s,
+        visibility 0s 0.3s;
       i {
         transform: scale(0.8);
         transform-origin: center;
@@ -24,7 +26,9 @@
         margin-right: $v-gap;
       }
       &.show {
-        transition: opacity 0.3s 0s, visibility 0s 0s;
+        transition:
+          opacity 0.3s 0s,
+          visibility 0s 0s;
         visibility: visible;
         opacity: 1;
       }

package/src/scss/custom/_version.scss

@@ -1,3 +1,3 @@
 :root {
-  --bootstrap-italia-version: '2.11.1';
+  --bootstrap-italia-version: '2.12.0';
 }

package/src/scss/custom/mixins/_buttons.scss

@@ -11,16 +11,8 @@
   border-color: $border;
   @include box-shadow($btn-box-shadow);
 
-  &:focus,
-  &.focus {
-    // Avoid using mixin so we can pass custom focus shadow properly
-    @if $enable-shadows {
-      box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba($border, 0.5);
-    } @else {
-      box-shadow: 0 0 0 $btn-focus-width rgba($border, 0.5);
-    }
-  }
-  &:hover {
+  &:hover,
+  &:focus-visible {
     background-color: $hover-background;
     color: color-contrast($background);
     border-color: $hover-border;
@@ -37,22 +29,11 @@
 
   &:not(:disabled):not(.disabled):active,
   &:not(:disabled):not(.disabled).active,
+  &.dropdown-toggle.show,
   .show > &.dropdown-toggle {
-    color: color-contrast($active-background);
-    background-color: $active-background;
-    @if $enable-gradients {
-      background-image: none; // Remove the gradient for the pressed/active state
-    }
-    border-color: $active-border;
-
-    &:focus {
-      // Avoid using mixin so we can pass custom focus shadow properly
-      @if $enable-shadows {
-        box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($border, 0.5);
-      } @else {
-        box-shadow: 0 0 0 $btn-focus-width rgba($border, 0.5);
-      }
-    }
+    background-color: $hover-background;
+    color: color-contrast($background);
+    border-color: $hover-border;
   }
 }
 
@@ -62,16 +43,12 @@
   background-image: none;
   box-shadow: inset 0 0 0 2px $color;
 
-  &:hover {
+  &:hover,
+  &:focus-visible {
     color: $color-hover;
     box-shadow: inset 0 0 0 2px color-hover($color);
   }
 
-  &:focus,
-  &.focus {
-    box-shadow: inset 0 0 0 1px $active-border, 0 0 0 $btn-focus-width rgba($color, 0.5);
-  }
-
   &.disabled,
   &:disabled {
     color: $color;
@@ -80,19 +57,11 @@
 
   &:not(:disabled):not(.disabled):active,
   &:not(:disabled):not(.disabled).active,
+  &.dropdown-toggle.show,
   .show > &.dropdown-toggle {
-    color: $active-border;
+    color: $color-hover;
     background-color: transparent;
     background-image: none;
-    box-shadow: inset 0 0 0 2px $active-border;
-
-    &:focus {
-      // Avoid using mixin so we can pass custom focus shadow properly
-      @if $enable-shadows and $btn-active-box-shadow != none {
-        box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, 0.5);
-      } @else {
-        box-shadow: 0 0 0 $btn-focus-width rgba($color, 0.5);
-      }
-    }
+    box-shadow: inset 0 0 0 2px $color-hover;
   }
 }

package/src/scss/utilities/colors_vars.scss

@@ -396,6 +396,7 @@ $neutral-2-a7: hsb($neutral-2-h, $neutral-2-s + 4, $neutral-2-b - 85) !default;
 // Backgrounds
 $color-background-emphasis: hsl(210, 54%, 20%); // color-slate-20
 $color-background-primary-lighter: hsl(210, 62%, 97%); // color-blue-97
+$color-background-primary-hover: hsl(210, 100, 30); // color-blue-30
 $color-background-secondary-hover: hsl(210, 33%, 28%); // color-slate-28
 $color-background-secondary-lighter: hsl(210, 3%, 85%); // color-slate-85
 $color-background-muted: $gray-100; // color-gray-96

package/src/scss/utilities/focus.scss

@@ -1,8 +1,16 @@
 :focus:not(.focus--mouse),
-%focus {
-  border-color: $focus-outline-color !important;
-  box-shadow: 0 0 0 2px $focus-outline-color !important;
-  outline: none !important;
+%focus,
+.it-carousel-wrapper .splide__pagination button:focus:not(.focus--mouse),
+.upload:focus:not(.focus--mouse) + label,
+.upload-dragdrop-input:focus[type='file']:not(.focus--mouse) + label,
+.avatar-upload:focus-within:not(.focus--mouse),
+.rating input:focus:not(.focus--mouse) + label svg {
+  border-color: $focus-outline-color-out !important;
+  box-shadow:
+    0 0 0 2px $focus-outline-color-in,
+    0 0 0 5px $focus-outline-color-out;
+  outline: 3px solid transparent;
+  outline-offset: 3px;
 }
 
 [tabindex='-1']:focus:not(:focus-visible) {
@@ -15,3 +23,67 @@
   box-shadow: none !important;
   outline: none !important;
 }
+
+p a {
+  &:focus:not(.focus--mouse, .btn) {
+    outline-offset: 0px;
+    outline: 3px $focus-outline-color-out solid;
+    background: $focus-outline-color-in;
+    box-shadow: none;
+    color: $link-color !important;
+  }
+}
+
+.shadow,
+.shadow-none,
+.shadow-sm,
+.shadow-lg {
+  &:focus:not(.focus--mouse) {
+    box-shadow:
+      0 0 0 2px $focus-outline-color-in,
+      0 0 0 5px $focus-outline-color-out !important;
+  }
+}
+
+.chip {
+  button {
+    &:focus:not(.focus--mouse) {
+      border-radius: 50%;
+    }
+  }
+}
+
+.form-check {
+  .toggles label:has(input[type='checkbox']:focus:not(.focus--mouse)) {
+    @extend %focus;
+
+    input,
+    .lever {
+      border-color: inherit !important;
+      box-shadow: none !important;
+      outline: none !important;
+    }
+  }
+
+  .toggles label:has(input[type='checkbox']:focus.focus--mouse) {
+    @extend %focusmouse;
+  }
+
+  &.form-check-group {
+    :focus:not(.focus--mouse),
+    [type='checkbox']:focus + label,
+    [type='radio']:focus + label {
+      width: 100%;
+    }
+  }
+}
+
+.bg-dark .btn,
+.back-to-top.dark {
+  &:focus:not(.focus--mouse),
+  &%focus {
+    box-shadow:
+      0 0 0 2px $focus-outline-color-out,
+      0 0 0 5px $focus-outline-color-in;
+  }
+}