bootstrap-italia 2.17.2 → 3.0.0-alpha.0

package/src/scss/forms/_autocomplete.scss

@@ -1,219 +1,174 @@
-//mobile
-
-//search field
+// Autocomplete input field
 .autocomplete {
-  padding: 0.375rem $v-gap * 6 0.375rem $v-gap * 3;
+  padding-left: var(--#{$prefix}spacing-xl);
 
-  &::placeholder {
-    color: $color-text-muted; // UI kit
-  }
-
-  &:disabled {
-    background-color: #cacacc;
-
-    &::placeholder {
-      color: $gray-secondary;
-    }
+  @include media-breakpoint-up(sm) {
+    padding-left: var(--#{$prefix}spacing-xxl);
   }
 }
 
-//search icon
+// Autocomplete input icon
 .autocomplete-icon {
   position: absolute;
-  right: 0;
-  top: 0.5rem;
-  padding: 0 $spacer * 0.5;
-  background-color: $white;
-  .icon {
-    fill: $gray-secondary;
-  }
+  top: var(--#{$prefix}spacing-xxs);
+  left: var(--#{$prefix}spacing-3xs);
+  padding: 0 var(--#{$prefix}form-control-spacing);
 }
 
-//results list
+// Aucomplete result list
 .autocomplete-list {
+  --#{$prefix}autocomplete-list-spacing: 0;
+  --#{$prefix}autocomplete-list-background-color: var(--#{$prefix}color-background-inverse);
+  --#{$prefix}autocomplete-list-border-color: transparent; // change to show border
+  --#{$prefix}autocomplete-list-border-size: 0; // change to 1px to show border
+  --#{$prefix}autocomplete-list-radius: var(--#{$prefix}radius-smooth);
+  --#{$prefix}autocomplete-list-shadow: var(--#{$prefix}elevation-high);
+  --#{$prefix}autocomplete-item-color: var(--#{$prefix}color-text-secondary);
+  --#{$prefix}autocomplete-item-hover-color: var(--#{$prefix}color-text-primary);
+  --#{$prefix}autocomplete-item-hover-background-color: var(--#{$prefix}color-background-primary-lighter);
+  --#{$prefix}autocomplete-item-hover-icon-color: var(--#{$prefix}icon-primary);
+  --#{$prefix}autocomplete-item-text-size: var(--#{$prefix}body-font-size);
+  --#{$prefix}autocomplete-item-spacing: var(--#{$prefix}spacing-xs) var(--#{$prefix}spacing-s);
+  --#{$prefix}autocomplete-text-highlight: var(--#{$prefix}color-text-primary);
+
   position: absolute;
-  left: 0;
   right: 0;
-  width: 100%;
-  background-color: $white;
-  padding: $v-gap 0;
-  box-shadow: $dropdown-box-shadow;
-  border-top: 1px solid $gray-secondary;
-  transition: opacity 0.3s;
+  left: 0;
   display: none;
+  width: 100%;
+  padding: var(--#{$prefix}autocomplete-list-spacing);
+  border-bottom-right-radius: var(--#{$prefix}autocomplete-list-radius);
+  border-bottom-left-radius: var(--#{$prefix}autocomplete-list-radius);
+  border-color: var(--#{$prefix}autocomplete-list-border-color);
+  border-style: solid;
+  border-top-width: 0;
+  border-left-width: var(--#{$prefix}autocomplete-list-border-size);
+  border-right-width: var(--#{$prefix}autocomplete-list-border-size);
+  border-bottom-width: var(--#{$prefix}autocomplete-list-border-size);
+  background-color: var(--#{$prefix}autocomplete-list-background-color);
+  box-shadow: var(--#{$prefix}autocomplete-list-shadow);
+  transition: opacity var(--#{$prefix}transition-instant);
 
   &.autocomplete-list-show {
-    display: block;
     z-index: 10;
+    display: block;
   }
 
   li {
-    list-style-type: none;
     padding: 0;
+    list-style-type: none;
   }
 
-  //single item
   a {
-    padding: 12px $v-gap * 3;
     display: flex;
+    align-items: center;
     justify-content: flex-start;
-    align-items: flex-start;
-    color: $gray-primary;
+    padding: var(--#{$prefix}autocomplete-item-spacing);
+    color: var(--#{$prefix}autocomplete-item-color);
+    font-size: var(--#{$prefix}autocomplete-item-text-size);
     line-height: 1.2;
-    font-size: 1rem;
     text-decoration: none;
-    //hover state
+
     &:hover {
-      color: $primary;
+      background-color: var(--#{$prefix}color-background-primary-lighter);
+      color: var(--#{$prefix}color-text-primary);
       text-decoration: none;
 
       .icon {
-        fill: $primary;
+        fill: var(--#{$prefix}icon-primary);
       }
 
       .autocomplete-list-text {
-        //item text
         span {
           text-decoration: underline;
         }
 
         //item label
         em {
-          color: $primary;
+          color: var(--#{$prefix}color-link-hover);
         }
       }
-
-      //search highlight
-      mark {
-        color: $primary;
-      }
     }
 
-    //item icon + avatar
+    // List item icon and avatar
     .icon,
     .avatar {
-      margin-right: $v-gap * 2;
       flex-shrink: 0;
+      margin-right: $v-gap * 2;
     }
 
-    .icon {
-      fill: $gray-primary;
-    }
-
-    //item text
+    // List item text
     .autocomplete-list-text {
-      margin-top: 2px;
-      //item label
+      // margin-top: 2px;
+      margin-left: 0;
+      display: flex;
+      align-items: center;
+      gap: var(--#{$prefix}spacing-s);
+
       em {
+        color: var(--#{$prefix}color-text-secondary);
+        font-size: var(--#{$prefix}label-font-size-xs);
         font-style: normal;
+        font-weight: var(--#{$prefix}font-weight-solid);
         text-transform: uppercase;
-        font-size: 0.75rem;
-        color: $color-text-secondary; // UI kit
-        font-weight: 600;
-        letter-spacing: 0.1em;
-        display: block;
-        margin-top: $v-gap * 0.5;
       }
     }
   }
 
-  //search highlight
+  // Autocomplete search highlight
   mark {
     padding: 0;
     background: transparent;
-    font-weight: bold;
+    color: var(--#{$prefix}autocomplete-text-highlight);
+    font-weight: var(--#{$prefix}font-weight-strong);
   }
 }
 
-//big version
+// Variant Big
 .autocomplete-wrapper-big {
-  //search field
-  .autocomplete {
-    height: $v-gap * 7;
-    font-size: 1.5rem;
-    font-weight: normal;
-    padding-left: $spacer * 4;
-    padding-right: $v-gap * 3;
-  }
+  --#{$prefix}autocomplete-item-text-size: var(--#{$prefix}body-font-size-l);
 
-  //search icon
-  .autocomplete-icon {
-    position: absolute;
-    left: 0.5rem;
-    right: auto;
-    top: 1rem;
-
-    .icon {
-      fill: $primary;
-      width: 24px;
-      height: 24px;
-    }
-  }
-
-  //results list
-  .autocomplete-list {
-    a {
-      font-size: 1.125rem;
-
-      .autocomplete-list-text {
-        margin-top: 0;
-      }
-    }
+  .autocomplete {
+    @extend .form-control-lg;
   }
-}
-
-//small - tablet
-@include media-breakpoint-up(sm) {
-  //results list
-  .autocomplete-list {
-    a {
-      font-size: 0.875rem;
-      align-items: flex-start;
-
-      .autocomplete-list-text {
-        //item text
-        span {
-          margin-right: $v-gap;
-        }
 
-        //item label
-        em {
-          display: inline-block;
-          font-size: 0.75rem;
-          margin-top: 0;
-        }
-      }
-    }
+  .autocomplete-list .autocomplete-list-text {
+    margin-top: 0;
   }
 
-  //big version
-  .autocomplete-wrapper-big {
-    //search field
-    .autocomplete {
-      height: $v-gap * 9;
-      font-size: 2.25rem;
-      padding-left: $v-gap * 8;
-    }
-
-    //search icon
+  @include media-breakpoint-up(sm) {
     .autocomplete-icon {
-      .icon {
-        width: 40px;
-        height: 40px;
-      }
+      top: var(--#{$prefix}spacing-xs);
+      left: var(--#{$prefix}spacing-3xs);
+      padding: 0 var(--#{$prefix}form-control-spacing);
     }
 
-    //results list
-    .autocomplete-list {
-      a {
-        font-size: 1.125rem;
-        //item text
-        .autocomplete-list-text {
-          span {
-            margin-right: $v-gap * 2;
-          }
-        }
-      }
+    .autocomplete-list-text span {
+      margin-right: var(--#{$prefix}spacing-s);
     }
   }
 }
+
+// @include media-breakpoint-up(sm) {
+
+//   //results list
+//   .autocomplete-list {
+//     a {
+//       font-size: var(--#{$prefix}label-font-size);
+
+//       .autocomplete-list-text {
+//         span {
+//           margin-right: var(--#{$prefix}spacing-xxs);
+//         }
+
+//         //item label
+//         em {
+//           display: inline-block;
+//           margin-top: 0;
+//           font-size: var(--#{$prefix}label-font-size-xs);
+//         }
+//       }
+//     }
+//   }
+
+// }

package/src/scss/forms/_form-control.scss

@@ -4,136 +4,69 @@
 
 @import '../base/mixins';
 
-.form-control {
-  display: block;
-  width: 100%;
-  padding: $input-padding-y $input-padding-x;
-  font-family: $input-font-family;
-  @include font-size($input-font-size);
-  font-weight: $input-font-weight;
-  line-height: $input-line-height;
-  color: $input-color;
-  background-color: $input-bg;
-  background-clip: padding-box;
-  border: $input-border-width solid $input-border-color;
-  appearance: none; // Fix appearance for date inputs in Safari
-
-  // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
-  @include border-radius($input-border-radius, 0);
-
-  @include box-shadow($input-box-shadow);
-  @include transition($input-transition);
-
-  &[type='file'] {
-    overflow: hidden; // prevent pseudo element button overlap
-
-    &:not(:disabled):not([readonly]) {
-      cursor: pointer;
-    }
-  }
-
-  // Customize the `:focus` state to imitate native WebKit styles.
-  &:focus {
-    color: $input-focus-color;
-    background-color: $input-focus-bg;
-    border-color: $input-focus-border-color;
-    outline: 0;
-    @if $enable-shadows {
-      @include box-shadow($input-box-shadow, $input-focus-box-shadow);
-    } @else {
-      // Avoid using mixin so we can pass custom focus shadow properly
-      box-shadow: $input-focus-box-shadow;
-    }
-  }
-
-  // Add some height to date inputs on iOS
-  // https://github.com/twbs/bootstrap/issues/23307
-  // TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved
-  &::-webkit-date-and-time-value {
-    // Multiply line-height by 1em if it has no unit
-    height: if(unit($input-line-height) == '', $input-line-height * 1em, $input-line-height);
-  }
-
-  // Placeholder
-  &::placeholder {
-    color: $input-placeholder-color;
-    // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
-    opacity: 1;
-  }
-
-  // Disabled inputs
-  //
-  // HTML5 says that controls under a fieldset > legend:first-child won't be
-  // disabled if the fieldset is disabled. Due to implementation difficulty, we
-  // don't honor that edge case; we style them as disabled anyway.
-  &:disabled {
-    color: $input-disabled-color;
-    background-color: $input-disabled-bg;
-    border-color: $input-disabled-border-color;
-    // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
-    opacity: 1;
-  }
-
-  // File input buttons theming
-  &::file-selector-button {
-    padding: $input-padding-y $input-padding-x;
-    margin: (-$input-padding-y) (-$input-padding-x);
-    margin-inline-end: $input-padding-x;
-    color: $form-file-button-color;
-    @include gradient-bg($form-file-button-bg);
-    pointer-events: none;
-    border-color: inherit;
-    border-style: solid;
-    border-width: 0;
-    border-inline-end-width: $input-border-width;
-    border-radius: 0; // stylelint-disable-line property-disallowed-list
-    @include transition($btn-transition);
-  }
-
-  &:hover:not(:disabled):not([readonly])::file-selector-button {
-    background-color: $form-file-button-hover-bg;
-  }
-}
-
 // Readonly controls as plain text
 //
 // Apply class to a readonly input to make it appear like regular plain
 // text (without any border, background color, focus indicator)
 
 .form-control-plaintext {
-  display: block;
-  width: 100%;
-  padding: $input-padding-y 0;
-  margin-bottom: 0; // match inputs if this class comes on inputs with default margins
-  line-height: $input-line-height;
-  color: $input-plaintext-color;
-  background-color: transparent;
-  border: solid transparent;
-  border-width: $input-border-width 0;
+  border: 0;
+  --#{$prefix}form-control-border-color: transparent;
+  --#{$prefix}form-control-border-radius: 0;
+  --#{$prefix}form-control-background-color: transparent;
+  --#{$prefix}form-control-spacing: 0;
 
   &:focus {
     outline: 0;
+    box-shadow: none !important;
   }
 
-  &.form-control-sm,
-  &.form-control-lg {
-    padding-right: 0;
-    padding-left: 0;
+  & + label {
+    cursor: text;
+  }
+}
+
+// BI form control
+.form-control {
+  background-repeat: no-repeat;
+  background-position: center right;
+  background-size: 45px 30%;
+
+  &:disabled {
+    cursor: not-allowed;
+    background: var(--#{$prefix}color-background-disabled);
+    border: 0;
+    color: var(--#{$prefix}color-text-disabled);
+  }
+
+  .was-validated &:valid,
+  &.is-valid {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23008055' viewBox='0 0 192 512'%3E%3Cpath d='M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z'/%3E%3C/svg%3E");
+  }
+
+  .was-validated &:invalid,
+  &.is-invalid {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23cc334d' viewBox='0 0 384 512'%3E%3Cpath d='M231.6 256l130.1-130.1c4.7-4.7 4.7-12.3 0-17l-22.6-22.6c-4.7-4.7-12.3-4.7-17 0L192 216.4 61.9 86.3c-4.7-4.7-12.3-4.7-17 0l-22.6 22.6c-4.7 4.7-4.7 12.3 0 17L152.4 256 22.3 386.1c-4.7 4.7-4.7 12.3 0 17l22.6 22.6c4.7 4.7 12.3 4.7 17 0L192 295.6l130.1 130.1c4.7 4.7 12.3 4.7 17 0l22.6-22.6c4.7-4.7 4.7-12.3 0-17L231.6 256z'/%3E%3C/svg%3E");
+    border-color: var(--#{$prefix}color-border-danger);
+  }
+
+  &.warning {
+    background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M2%2012C2%206.47715%206.47715%202%2012%202C14.6522%202%2017.1957%203.05357%2019.0711%204.92893C20.9464%206.8043%2022%209.34784%2022%2012C22%2017.5228%2017.5228%2022%2012%2022C6.47715%2022%202%2017.5228%202%2012ZM3%2012C3%2016.9706%207.02944%2021%2012%2021C16.9706%2021%2021%2016.9706%2021%2012C21%207.02944%2016.9706%203%2012%203C7.02944%203%203%207.02944%203%2012ZM11.5%2014.2V5.7H12.7V14.2H11.5ZM12.6%2018.3V16.5H11.4V18.3H12.6Z%22/%3E%0A%3C/svg%3E')
+      no-repeat;
+    border-color: var(--#{$prefix}color-border-warning);
+  }
+
+  &.is-valid ~ .warning-feedback {
+    display: block;
   }
 }
 
 // Form control sizing
 //
-// Build on `.form-control` with modifier classes to decrease or increase the
-// height and font-size of form controls.
-//
-// Repeated in `_input_group.scss` to avoid Sass extend issues.
 
 .form-control-sm {
-  min-height: $input-height-sm;
-  padding: $input-padding-y-sm $input-padding-x-sm;
-  @include font-size($input-font-size-sm);
-  @include border-radius($input-border-radius-sm);
+  --#{$prefix}form-control-spacing: var(--#{$prefix}spacing-xxs) var(--#{$prefix}spacing-3xs);
+  --#{$prefix}form-control-font-size: var(--#{$prefix}label-font-size);
 
   &::file-selector-button {
     padding: $input-padding-y-sm $input-padding-x-sm;
@@ -143,10 +76,7 @@
 }
 
 .form-control-lg {
-  min-height: $input-height-lg;
-  padding: $input-padding-y-lg $input-padding-x-lg;
-  @include font-size($input-font-size-lg);
-  @include border-radius($input-border-radius-lg);
+  --#{$prefix}form-control-font-size: var(--#{$prefix}lead-font-size);
 
   &::file-selector-button {
     padding: $input-padding-y-lg $input-padding-x-lg;
@@ -158,6 +88,7 @@
 // Make sure textareas don't shrink too much when resized
 // https://github.com/twbs/bootstrap/pull/29124
 // stylelint-disable selector-no-qualifying-type
+
 textarea {
   &.form-control {
     min-height: $input-height;

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

@@ -9,11 +9,12 @@ input[type='file'] + label {
     max-width: 100%;
     opacity: 0;
   }
+
   .form-file-name {
-    background-color: $white;
+    background-color: var(--#{$prefix}color-background-inverse);
     border-bottom: 1px solid rgba(0, 0, 0, 0.15);
     border-radius: 0;
-    color: $color-text-secondary;
+    color: var(--#{$prefix}color-text-secondary);
     left: 0;
     line-height: 1.7;
     overflow: hidden;
@@ -26,15 +27,15 @@ input[type='file'] + label {
     user-select: none;
     z-index: 5;
     &::before {
-      background-color: $white;
+      background-color: var(--#{$prefix}color-background-inverse);
       bottom: -1px;
-      color: $primary;
+      color: var(--#{$prefix}color-text-primary);
       content: 'Sfoglia';
       display: block;
-      height: $input-height;
+      height: 2.5rem;
       line-height: 1.7;
       padding: 0.4rem 1rem 1.5rem;
-      border: 1px solid $primary;
+      border: 1px solid var(--#{$prefix}color-border-primnary);
       position: absolute;
       right: 0;
       top: 0;

package/src/scss/forms/_form-input-number.scss

@@ -5,13 +5,16 @@
     width: fit-content;
     input[type='number'] {
       width: auto;
-      transition: all 0.3s;
+      transition: all va(--#{$prefix}transition-instant);
     }
   }
 
   //reset input style
   input[type='number'] {
     appearance: textfield;
+    border-top-right-radius: var(--#{$prefix}form-control-border-radius) !important;
+    border-bottom-right-radius: var(--#{$prefix}form-control-border-radius) !important;
+
     &::-webkit-inner-spin-button,
     &::-webkit-outer-spin-button {
       -webkit-appearance: none;
@@ -20,31 +23,26 @@
       display: none;
     }
 
-    // color: $color-text-muted;
+    // Apply the border when not disabled - avoid specific styling for disabled inputs
+    &:not(:disabled) {
+      border-left: 1px solid var(--#{$prefix}form-control-border-color);
+    }
 
-    &:focus {
-      color: $color-text-base;
+    &[readonly] ~ .input-group-text {
+      .input-number-add,
+      .input-number-sub {
+        display: none;
+      }
     }
   }
 
   //disabled version
   &.disabled {
-    input[type='number'] {
-      background-color: $gray-disabled;
-      color: $gray-800;
+    button {
+      display: none;
+      pointer-events: none;
       &:hover {
         cursor: not-allowed;
-        color: $gray-label-disabled;
-      }
-    }
-    .input-group-text {
-      background-color: $gray-disabled;
-      color: $gray-800;
-      button {
-        pointer-events: none;
-        &:hover {
-          cursor: not-allowed;
-        }
       }
     }
   }
@@ -56,7 +54,18 @@
     bottom: 0;
     right: 0;
     z-index: 10;
+
+    padding-right: var(--#{$prefix}form-control-spacing);
+    // border-left: 0;
+    // border-right-width: 1px;
+    border: none;
+    background: transparent;
+
+    .is-invalid + & {
+      bottom: 0;
+    }
   }
+
   .input-group-text button {
     position: relative;
     transition: opacity 0.1s;
@@ -79,12 +88,12 @@
     &:hover {
       &.input-number-add {
         &:after {
-          border-color: transparent transparent $dark transparent; // TODO Check if still necessary
+          border-color: transparent transparent var(--#{$prefix}form-control-border-color) transparent;
         }
       }
       &.input-number-sub {
         &:after {
-          border-color: $dark transparent transparent transparent; // TODO Check if still necessary
+          border-color: var(--#{$prefix}form-control-border-color) transparent transparent transparent;
         }
       }
     }
@@ -95,13 +104,13 @@
     &.input-number-add {
       &:after {
         border-width: 0 5px 6px 5px;
-        border-color: transparent transparent $neutral-1-a7 transparent; // TODO Check if still necessary
+        border-color: transparent transparent var(--#{$prefix}form-control-border-color) transparent;
       }
     }
     &.input-number-sub {
       &:after {
         border-width: 6px 5px 0 5px;
-        border-color: $neutral-1-a7 transparent transparent transparent; // TODO Check if still necessary
+        border-color: var(--#{$prefix}form-control-border-color) transparent transparent transparent;
       }
     }
     &:hover {
@@ -110,6 +119,13 @@
   }
 }
 
+// Reset border when input is prepended with input-group-text
+input[type='number'] {
+  .input-number .input-group-text + & {
+    border-left: 0;
+  }
+}
+
 //Desktop
 @include media-breakpoint-up(xl) {
   .input-number {