bootstrap-italia 2.17.2 → 3.0.0-alpha.0

package/src/scss/forms/_forms.scss

@@ -1,109 +1,186 @@
-label {
-  color: $input-label-color;
+// Form properties are :root scoped to allow for easy customization of form elements.
+:root {
+  --#{$prefix}form-control-height: 2.5rem;
+  --#{$prefix}form-control-spacing: var(--#{$prefix}spacing-xxs);
+  --#{$prefix}form-control-background-color: var(--#{$prefix}color-background-inverse);
+  --#{$prefix}form-control-border-color: var(--#{$prefix}color-border-secondary);
+  --#{$prefix}form-control-border-radius: var(--#{$prefix}radius-smooth);
+  --#{$prefix}form-control-placeholder-color: var(--#{$prefix}color-text-muted);
+  --#{$prefix}form-control-label-color: var(--#{$prefix}color-text-base);
+  --#{$prefix}form-control-text-color: var(--#{$prefix}color-text-secondary);
+  --#{$prefix}form-control-font-size: var(--#{$prefix}body-font-size);
+  --#{$prefix}form-group-spacing-y: var(--#{$prefix}spacing-m);
+  --#{$prefix}form-checkbox-border-color: var(--#{$prefix}color-border-secondary);
+  --#{$prefix}form-checkbox-border-radius: var(--#{$prefix}radius-smooth);
+  --#{$prefix}form-checked-color: var(--#{$prefix}color-background-primary);
 }
-fieldset {
-  legend {
-    background-color: transparent;
-    font-weight: 700;
-    line-height: calc(#{$input-height} - 1px);
-    transition: 0.2s ease-out;
-    cursor: text;
-    display: block;
-    max-width: 100%;
-    width: auto;
-    padding: 0 $input-spacing-x;
-    z-index: 1;
-    font-size: $small-font-size;
-    color: $input-label-color;
-    margin-bottom: 0;
-    float: none;
+
+input[readonly],
+textarea[readonly],
+select[readonly] {
+  --#{$prefix}form-control-border-color: var(--#{$prefix}color-border-subtle);
+  --#{$prefix}form-control-background-color: var(--#{$prefix}color-background-muted);
+  cursor: not-allowed;
+}
+
+input,
+textarea,
+select {
+  display: block;
+  width: 100%;
+  padding: var(--#{$prefix}form-control-spacing);
+  border: 1px solid var(--#{$prefix}form-control-border-color);
+  // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
+  border-radius: var(--#{$prefix}form-control-border-radius);
+  background-color: var(--#{$prefix}form-control-background-color);
+  color: var(--#{$prefix}form-control-text-color);
+  font-size: var(--#{$prefix}form-control-font-size);
+
+  &.disabled,
+  &:disabled {
+    border-color: var(--#{$prefix}color-border-disabled);
+    // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
+    opacity: 1;
+    background-color: var(--#{$prefix}color-background-disabled);
+    color: var(--#{$prefix}color-text-disabled);
   }
 }
-.form-text {
-  color: $color-text-secondary;
+/* stylelint-disable-next-line no-duplicate-selectors */
+input,
+textarea {
+  &:focus {
+    outline: 3px solid transparent;
+    outline-offset: 3px;
+    box-shadow:
+      0 0 0 2px var(--#{$prefix}color-border-inverse),
+      0 0 0 5px var(--#{$prefix}color-outline-focus) !important;
+  }
 }
-.form-group {
-  position: relative;
-  margin-bottom: $form-group-margin-bottom;
-  margin-top: $form-group-margin-top;
 
-  input,
-  optgroup,
-  textarea {
-    color: $color-text-base;
+input {
+  // File input buttons theming //TODO: CHECK
+  &::file-selector-button {
+    margin: (-$input-padding-y) (-$input-padding-x);
+    padding: $input-padding-y $input-padding-x;
+    border-width: 0;
+    border-style: solid;
+    border-radius: 0; // stylelint-disable-line property-disallowed-list
+    border-color: inherit;
+    color: $form-file-button-color;
+    pointer-events: none;
+    margin-inline-end: $input-padding-x;
+    border-inline-end-width: $input-border-width;
+    @include gradient-bg($form-file-button-bg);
+    @include transition($btn-transition);
   }
 
-  label {
-    background-color: transparent;
-    position: absolute;
-    line-height: calc(#{$input-height} - 1px);
-    transition: 0.2s ease-out;
-    top: 0;
-    font-size: 1rem;
-    cursor: text;
-    color: $input-color-placeholder;
-    display: block;
-    max-width: 100%;
-    width: auto;
-    padding: 0 $input-spacing-x;
-    z-index: 2;
-    &.active {
-      transform: translateY(-85%);
-      font-weight: 600;
-      font-size: $small-font-size;
-      color: $input-label-color;
+  //TODO: CHECK
+  &:hover:not(:disabled):not([readonly])::file-selector-button {
+    background-color: $form-file-button-hover-bg;
+  }
+
+  &[type='file'] {
+    overflow: hidden; // prevent pseudo element button overlap
+
+    &:not(:disabled):not([readonly]) {
+      cursor: pointer;
     }
-    &.input-symbol-label {
-      &:not(.active) {
-        left: 2.25rem;
-      }
+  }
+
+  // Add some height to date inputs on iOS
+  // https://github.com/twbs/bootstrap/issues/23307
+  &::-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);
+  }
+}
+
+select {
+  // padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x;
+  // -moz-padding-start: subtract($form-select-padding-x, 3px); // See https://github.com/twbs/bootstrap/issues/32636
+  // font-family: $form-select-font-family;
+  // @include font-size($form-select-font-size);
+  // font-weight: $form-select-font-weight;
+  // line-height: $form-select-line-height;
+  // color: $form-select-color;
+  // background-color: $form-select-bg;
+  background-image: escape-svg($form-select-indicator);
+  background-repeat: no-repeat;
+  background-position: right var(--#{$prefix}form-control-spacing) center;
+  background-size: 16px 12px;
+  // border: $form-select-border-width solid $form-select-border-color;
+  // @include border-radius($form-select-border-radius, 0);
+  // @include box-shadow($form-select-box-shadow);
+  // @include transition($form-select-transition);
+  appearance: none;
+
+  &:focus {
+    border-color: $form-select-focus-border-color;
+    outline: 0;
+
+    @if $enable-shadows {
+      @include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
+    } @else {
+      // Avoid using mixin so we can pass custom focus shadow properly
+      box-shadow: $form-select-focus-box-shadow;
     }
   }
 
-  input:is([type='radio']),
-  input:is([type='checkbox']) {
-    & + label.active {
-      transform: translateY(0%);
+  &[multiple],
+  &[size]:not([size='1']) {
+    padding-right: $form-select-padding-x;
+    background-image: none;
+  }
+
+  &:disabled {
+    border-color: $form-select-disabled-border-color;
+    background-color: $form-select-disabled-bg;
+    color: $form-select-disabled-color;
+
+    &:hover {
+      cursor: not-allowed;
     }
   }
 
-  small.form-text {
-    margin: 0;
-    padding: $input-spacing-x * 0.5 $input-spacing-x;
-    font-size: $small-font-size;
+  // Remove outline from select box in FF
+  &:-moz-focusring {
+    color: transparent;
+    text-shadow: 0 0 0 $form-select-color;
   }
 
-  input[type='time'] ~ label {
-    transform: translateY(-75%);
-    font-size: $small-font-size;
+  option {
+    font-weight: normal;
+  }
+  /* stylelint-disable-next-line no-duplicate-selectors */ /* TO DO check these styles */
+  &:disabled {
+    opacity: 1;
+    background-color: $input-disabled-bg;
   }
 }
 
-::placeholder {
-  color: $input-color-placeholder;
+textarea {
+  height: auto;
+  font-size: var(--#{$prefix}body-font-size);
+  line-height: 1.5;
 }
 
-input[type='date'],
-input[type='datetime-local'],
-input[type='email'],
-input[type='number'],
-input[type='password'],
-input[type='search'],
-input[type='tel'],
-input[type='text'],
-input[type='time'],
-input[type='url'],
+label {
+  display: inline-block;
+  width: auto;
+  max-width: 100%;
+  margin-bottom: var(--#{$prefix}spacing-xxs);
+  color: var(--#{$prefix}form-control-label-color);
+  font-size: var(--#{$prefix}label-font-size-s);
+  font-weight: var(--#{$prefix}font-weight-solid);
+  line-height: var(--#{$prefix}label-leading);
+}
+/* stylelint-disable-next-line no-duplicate-selectors */
+input,
 textarea {
-  border: none;
-  border-bottom: 1px solid $input-border;
-  padding: $input-spacing-y $input-spacing-x;
   outline: 0;
   box-shadow: none;
   transition: none;
-  -webkit-appearance: none;
-  &::placeholder {
-    color: $input-color-placeholder;
-  }
+  appearance: none;
 }
 
 input[type='date'],
@@ -112,74 +189,69 @@ input[type='time'] {
   display: flex;
 }
 
-textarea {
-  border: 1px solid $input-border;
-  height: auto;
-  font-size: 1rem;
+fieldset {
+  legend {
+    margin-bottom: var(--#{$prefix}spacing-s);
+    padding: 0 var(--#{$prefix}form-input-spacing-x);
+    background-color: transparent;
+    color: var(--#{$prefix}form-control-text-color);
+    font-size: var(--#{$prefix}label-sm);
+    font-weight: var(--#{$prefix}font-weight-solid);
+  }
 }
 
-.form-control {
-  background-position: center right !important;
-  background-repeat: no-repeat !important;
-  background-size: 45px 45% !important;
-  border-radius: 0 !important;
-  min-height: 2.5rem;
-  &.form-control-lg {
-    border-radius: 0;
-  }
-  &:disabled,
-  &[readonly] {
-    cursor: not-allowed;
+::placeholder {
+  color: var(--#{$prefix}form-control-placeholder-color);
+}
 
-    & + label {
-      background-color: transparent;
-      cursor: not-allowed;
-    }
-  }
-  &:active {
-    box-shadow: none !important;
-  }
-  .was-validated &:valid,
-  &.is-valid {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2300cc85' 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");
-  }
+// WebKit datetime edit fields
+input::-webkit-datetime-edit {
+  background-color: var(--#{$prefix}color-background-primary-lighter);
+  color: var(--#{$prefix}form-contro-text-color);
+}
+
+//
+// Form Group
+
+.form-group {
+  position: relative;
+  margin-bottom: var(--#{$prefix}form-group-spacing-y);
 
-  .was-validated &:invalid,
-  &.is-invalid {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f73e5a' 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");
+  label.input-symbol-label:not(.active) {
+    left: 2.25rem;
   }
 
-  &.warning {
-    background-size: 25px 45% !important;
-    border-color: $warning;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ff9900' viewBox='0 0 192 512'%3E%3Cpath d='M176 432c0 44.112-35.888 80-80 80s-80-35.888-80-80 35.888-80 80-80 80 35.888 80 80zM25.26 25.199l13.6 272C39.499 309.972 50.041 320 62.83 320h66.34c12.789 0 23.331-10.028 23.97-22.801l13.6-272C167.425 11.49 156.496 0 142.77 0H49.23C35.504 0 24.575 11.49 25.26 25.199z'/%3E%3C/svg%3E");
+  small.form-text {
+    margin: 0;
+    font-size: $small-font-size;
   }
 
-  &.is-valid ~ .warning-feedback {
-    display: block;
+  input[type='time'] ~ label {
+    font-size: $small-font-size;
   }
 }
 
-.form-group.active .form-file-name {
-  padding-bottom: 1.95rem;
+//
+// Form text
+
+.form-text {
+  margin: var(--#{$prefix}spacing-xxs) 0;
+  color: var(--#{$prefix}color-text-secondary);
 }
 
-.form-control-plaintext {
-  padding: $input-spacing-y $input-spacing-x;
-  background-color: $white !important;
-  cursor: not-allowed;
+//
+// Form Group
 
-  & + label {
-    cursor: not-allowed;
-  }
+.form-group.active .form-file-name {
+  padding-bottom: 1.95rem;
 }
 
 .warning-feedback {
   display: none;
   width: 100%;
   margin-top: 0.25rem;
+  color: var(--#{$prefix}color-text-warning);
   font-size: 0.75rem;
-  color: $warning;
 }
 
 .valid-feedback,
@@ -190,85 +262,63 @@ textarea {
 
 // Input group
 .input-group {
-  .input-group-text {
-    padding: $input-spacing-y $input-spacing-x;
-    border-bottom: 1px solid $input-border;
-    border-radius: 0;
-    min-height: 2.5rem;
-    min-width: 40px;
-    margin-right: 0;
-
-    .icon {
-      fill: $icon-secondary;
-    }
-
-    & ~ label {
-      &:not(.active) {
-        left: 2.25rem;
-      }
-      max-width: calc(100% - 2.25rem);
-    }
-
-    .btn {
-      border-radius: 4px 0 0 4px;
-    }
+  .input-group-text .btn {
+    border-radius: var(--#{$prefix}form-control-border-radius) 0 0 var(--#{$prefix}form-control-border-radius);
   }
 
   .input-group-append {
     margin-left: 0;
+
     .btn {
+      height: 100%;
       padding-top: 0;
       padding-bottom: 0;
       border-bottom: 1px solid $input-border;
-      border-radius: 0 4px 4px 0;
-      height: 100%;
+      border-radius: 0 var(--#{$prefix}form-control-border-radius) var(--#{$prefix}form-control-border-radius) 0;
     }
   }
 }
 
-.input-group-lg {
-  & > .form-control,
-  & > .input-group-append > .input-group-text,
-  & > .input-group-append > .btn {
-    padding: 0 1rem;
-    border-radius: 0;
-  }
-}
+//
+// Form check class valid for checkbox and radio
 
 .form-check {
-  padding-left: 0;
   position: relative;
-  margin-bottom: 0.5rem;
 
-  // add vertical spacing for consequential elements
+  // &:not(:last-child),
+  // &:not(.form-check-inline) {
+  //   margin-bottom: var(--#{$prefix}spacing-s);
+  // }
+
+  // Add vertical spacing for consequential elements
   & + & {
-    margin-top: 0.5rem;
+    margin-top: var(--#{$prefix}spacing-s);
   }
 
   [type='checkbox'],
   [type='radio'] {
     position: absolute;
-    opacity: 0;
-    left: 9px;
     top: 9px;
-    margin-left: 0;
+    left: 9px;
+    width: auto;
     margin-top: 0;
+    margin-left: 0;
+    opacity: 0;
 
     + label {
       position: relative;
-      padding-left: 2rem;
+      margin-bottom: 0; // reset default label margin
+      padding-left: 28px; // checkbox size + left padding - not using variable because of the pseudo element
+      font-size: var(--#{$prefix}label-font-size);
+      font-weight: var(--#{$prefix}font-weight-solid);
       cursor: pointer;
-      display: inline-block;
-      font-size: 1rem;
-      font-weight: $font-weight-semibold;
-      line-height: var(--bs-body-line-height);
       user-select: none;
+
       @include media-breakpoint-up(sm) {
-        font-size: 1.125rem;
+        font-size: var(--#{$prefix}label-font-size-l);
       }
     }
 
-    //focus
     &:focus + label {
       @extend %focus;
     }
@@ -278,112 +328,102 @@ textarea {
     }
   }
 
-  [type='checkbox'] {
+  input[type='checkbox'] {
     + label::after,
     + label::before {
-      content: '';
-      left: 0;
       position: absolute;
-      transition: 0.2s ease-out;
+      left: 0;
       z-index: 1;
-      border-style: solid;
+      content: '';
       border-width: 2px;
+      border-style: solid;
+      transition: all var(--#{$prefix}transition-instant) ease-out;
     }
 
-    + label::before {
-      top: 0;
-      width: 17px;
-      height: 17px;
-      border: 1px solid #e6e9f2;
-      border-radius: 1px;
-      margin: 2px 4px;
-      transform: rotateZ(37deg);
-      transform-origin: 100% 100%;
-    }
-
+    // Checkbox shape
     + label::after {
-      border-radius: 4px;
-      height: 20px;
-      width: 20px;
-      margin: 4px;
       top: 0;
+      width: 20px;
+      height: 20px;
+      border-radius: var(--#{$prefix}form-control-border-radius);
     }
 
     &:checked + label::before {
-      top: 4px;
-      left: 1px;
-      width: 8px;
-      height: 13px;
-      border-style: solid;
+      top: 3px;
+      left: 3px;
+      width: 6px;
+      height: 12px;
       border-width: 2px;
-      border-color: transparent #fff #fff transparent;
+      border-style: solid;
+      border-color: transparent var(--#{$prefix}color-border-inverse) var(--#{$prefix}color-border-inverse) transparent;
+      opacity: 1;
       transform: rotate(40deg);
-      backface-visibility: hidden;
       transform-origin: 100% 100%;
-      opacity: 0.8;
+      backface-visibility: hidden;
     }
 
     &:checked + label::after {
-      border-color: $primary;
-      background-color: $primary;
       z-index: 0;
+      border-color: var(--#{$prefix}form-checked-color);
+      background-color: var(--#{$prefix}form-checked-color);
     }
 
     &:not(:checked) + label::after {
-      background-color: transparent;
-      border-color: $neutral-1-a7;
       z-index: 0;
+      border-color: var(--#{$prefix}form-checkbox-border-color);
+      background-color: transparent;
     }
 
     &:not(:checked) + label::before {
+      top: 10px;
+      left: 6px;
       width: 0;
       height: 0;
       border-color: transparent;
-      left: 6px;
-      top: 10px;
     }
 
     &:disabled + label {
-      cursor: not-allowed;
       opacity: 1;
+      cursor: not-allowed;
     }
 
     &:disabled:not(:checked) + label::after {
-      border-color: #e6e9f2;
-      background-color: #fff;
+      border-color: var(--#{$prefix}color-border-disabled);
+      background-color: transparent;
     }
 
     &:disabled:checked + label::after {
-      background-color: #e6e9f2;
-      border-color: #e6e9f2;
+      border-color: var(--#{$prefix}color-border-disabled);
+      background-color: var(--#{$prefix}color-border-disabled);
     }
   }
 
-  [type='radio'] {
-    + label {
-      transition: 0.2s ease-out;
+  //
+  // Radio button
 
+  input[type='radio'] {
+    + label {
+      // Radio button shape
       &::after,
       &::before {
-        content: '';
         position: absolute;
-        left: 0;
         top: 0;
-        margin: 5px;
+        left: 0;
+        z-index: 0;
+        content: '';
         width: 20px;
         height: 20px;
-        z-index: 0;
-        border-radius: 50%;
-        border-style: solid;
         border-width: 2px;
-        transition: 0.2s ease-out;
+        border-style: solid;
+        border-radius: var(--#{$prefix}radius-rounded);
+        transition: all var(--#{$prefix}transition-instant) ease-out;
       }
     }
 
     &:not(:checked) + label {
       &::after,
       &::before {
-        border-color: $input-border;
+        border-color: var(--#{$prefix}form-checkbox-border-color);
       }
 
       &:after {
@@ -394,14 +434,14 @@ textarea {
 
     &:checked + label {
       &::after {
-        border-color: $primary;
-        background-color: $primary;
         z-index: 0;
+        border-color: var(--#{$prefix}form-checked-color);
+        background-color: var(--#{$prefix}form-checked-color);
         transform: scale(0.64);
       }
 
       &::before {
-        border-color: $primary;
+        border-color: var(--#{$prefix}form-checked-color);
       }
     }
 
@@ -413,54 +453,56 @@ textarea {
       &:not(:checked) + label {
         &::after,
         &::before {
-          border-color: $gray-border-disabled;
+          border-color: var(--#{$prefix}color-border-disabled);
         }
       }
 
       &:checked + label {
         &::after {
-          border-color: $gray-border-disabled;
-          background-color: $gray-disabled;
+          border-color: var(--#{$prefix}color-border-disabled);
+          background-color: var(--#{$prefix}color-border-disabled);
         }
 
         &::before {
-          border-color: $gray-border-disabled;
+          border-color: var(--#{$prefix}color-border-disabled);
         }
       }
     }
   }
 
-  // gruppi
+  //
+  // Checkbox group
+
   &.form-check-group {
-    padding: 0 0 1rem 0;
     margin-bottom: 1rem;
+    padding: 0 0 1rem 0;
     box-shadow: inset 0 -1px 0 0 rgba(1, 1, 1, 0.1);
 
-    [type='checkbox'] + label,
-    [type='radio'] + label {
+    input[type='checkbox'] + label,
+    input[type='radio'] + label {
       position: static;
-      padding-left: 0;
       padding-right: 3.25rem;
+      padding-left: 0;
 
       &::after,
       &::before {
-        right: 0px;
+        right: 0;
         left: auto;
       }
     }
 
-    [type='checkbox']:checked + label::before {
+    input[type='checkbox']:checked + label::before {
       right: 11px;
     }
 
-    [type='radio']:checked + label::before {
-      right: 0px;
+    input[type='radio']:checked + label::before {
+      right: 0;
     }
 
     .form-text {
       display: block;
-      padding-right: 3.25rem;
       margin-bottom: 0.5rem;
+      padding-right: 3.25rem;
     }
 
     input.semi-checked:not(:checked) + label::before {
@@ -468,27 +510,42 @@ textarea {
       left: auto;
     }
   }
+
   input.semi-checked:not(:checked) + label::before {
-    top: 11px;
+    top: 12px;
     left: 4px;
     width: 12px;
     height: 2px;
-    border-style: none;
     border-width: 0;
+    border-style: none;
     border-color: transparent;
+    opacity: 1;
+    background: var(--#{$prefix}color-background-inverse);
     transform: none;
     backface-visibility: hidden;
-    opacity: 1;
-    background: $white;
   }
 
   input.semi-checked:not(:checked) + label::after {
-    border-color: $primary-a5; // TODO: Not found
-    background-color: $primary-a5; // TODO: Not found
     z-index: 0;
+    border-color: var(--#{$prefix}form-checked-color);
+    background-color: var(--#{$prefix}form-checked-color);
+  }
+}
+
+.form-check-inline {
+  display: inline-block;
+  // margin-right: $form-check-inline-margin-end;
+
+  &:not(:last-child) {
+    margin-right: var(--#{$prefix}spacing-m);
   }
 }
 
+//
+// Form check reduce motion
+// This is a workaround for the fact that the transition property is not inherited
+// by pseudo-elements. This means that if the user has set the prefers-reduced-motion
+// media query, the transition will not be applied to the pseudo-elements.
 @media (prefers-reduced-motion: reduce) {
   fieldset legend,
   .form-group label,