bootstrap-italia 2.17.3 → 3.0.0-alpha.0

package/src/scss/forms/_input-group.scss

@@ -9,6 +9,11 @@
   align-items: stretch;
   width: 100%;
 
+  // Reset border
+  > input {
+    border-left-width: 0;
+  }
+
   > .form-control,
   > .form-select,
   > .form-floating {
@@ -46,44 +51,26 @@
 .input-group-text {
   display: flex;
   align-items: center;
-  padding: $input-group-addon-padding-y $input-group-addon-padding-x;
-  @include font-size($input-font-size); // Match inputs
-  font-weight: $input-group-addon-font-weight;
-  line-height: $input-line-height;
-  color: $input-group-addon-color;
+  padding: var(--#{$prefix}form-control-spacing) 0 var(--#{$prefix}form-control-spacing) var(--#{$prefix}form-control-spacing);
+  font-size: var(--#{$prefix}body-font-size);
+  font-weight: var(--#{$prefix}font-weight-solid);
+  color: var(--#{$prefix}form-inpunt-text-color);
+  background-color: var(--#{$prefix}form-control-background-color);
   text-align: center;
   white-space: nowrap;
-  background-color: $input-group-addon-bg;
-  border: $input-border-width solid $input-group-addon-border-color;
-  @include border-radius($input-border-radius);
-}
-
-// Sizing
-//
-// Remix the default form control sizing classes into new ones for easier
-// manipulation.
-
-.input-group-lg > .form-control,
-.input-group-lg > .form-select,
-.input-group-lg > .input-group-text,
-.input-group-lg > .btn {
-  padding: $input-padding-y-lg $input-padding-x-lg;
-  @include font-size($input-font-size-lg);
-  @include border-radius($input-border-radius-lg);
-}
-
-.input-group-sm > .form-control,
-.input-group-sm > .form-select,
-.input-group-sm > .input-group-text,
-.input-group-sm > .btn {
-  padding: $input-padding-y-sm $input-padding-x-sm;
-  @include font-size($input-font-size-sm);
-  @include border-radius($input-border-radius-sm);
-}
-
-.input-group-lg > .form-select,
-.input-group-sm > .form-select {
-  padding-right: $form-select-padding-x + $form-select-indicator-padding;
+  border-top-width: 1px;
+  border-left-width: 1px;
+  border-right-width: 0;
+  border-bottom-width: 1px;
+  border-style: solid;
+  border-color: var(--#{$prefix}form-control-border-color);
+  border-radius: var(--#{$prefix}form-control-border-radius);
+
+  .disabled & {
+    background-color: var(--#{$prefix}color-background-disabled);
+    border-color: var(--#{$prefix}color-border-disabled);
+    color: var(--#{$prefix}color-text-disabled);
+  }
 }
 
 // Rounded corners

package/src/scss/forms/_just-validate.scss

@@ -1,10 +1,10 @@
 .form-feedback {
-  margin-left: 0.5rem;
   width: 100%;
   margin-top: 0.25rem;
   font-size: 0.75rem;
+
   &.just-validate-error-label {
-    color: #d9364f;
+    color: var(--#{$prefix}color-text-danger);
   }
 }
 
@@ -22,23 +22,24 @@ button:has(~ [data-focus-mouse='true']:not(.btn)),
 .is-invalid ~ .input-group-text,
 button:has(~ .is-invalid),
 .is-invalid + button {
-  border-color: #d9364f;
+  border-color: var(--#{$prefix}color-border-danger) !important;
 }
 
 .sr-only-justvalidate-bi {
   display: none;
 }
+
 .just-validate-success-field {
-  border-color: #008758 !important;
+  border-color: var(--#{$prefix}color-border-success) !important;
   padding-right: calc(1.5em + 0.75rem) !important;
-  background: 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");
+  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");
 }
 
 .input-group-text:has(~ .just-validate-success-field),
 .just-validate-success-field ~ .input-group-text,
 button:has(~ .just-validate-success-field),
 .just-validate-success-field + button {
-  border-color: #008758;
+  border-color: var(--#{$prefix}color-border-success);
 }
 
 //move buttons to make validation icon visible
@@ -74,18 +75,16 @@ textarea {
 
 input[type='checkbox'],
 input[type='radio'] {
-  &.just-validate-success-field {
-    + label {
-      color: #008758;
-    }
+  &.is-invalid {
+    --#{$prefix}form-checkbox-border-color: var(--#{$prefix}color-border-danger);
   }
 }
 
 select {
   &.is-invalid {
-    border-bottom: 1px solid #d9364f;
+    border: 1px solid var(--#{$prefix}color-border-danger);
   }
   &.just-validate-success-field {
-    border-bottom: 1px solid #008758;
+    border: 1px solid var(--#{$prefix}color-border-success);
   }
 }

package/src/scss/utilities/focus.scss

@@ -1,27 +1,18 @@
 :focus:not([data-focus-mouse='true']),
-%focus,
 .it-carousel-wrapper .splide__pagination button:focus:not([data-focus-mouse='true']),
 .upload:focus:not([data-focus-mouse='true']) + label,
 .upload-dragdrop-input:focus[type='file']:not([data-focus-mouse='true']) + label,
 .avatar-upload:focus-within:not([data-focus-mouse='true']),
 .rating input:focus:not([data-focus-mouse='true']) + 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 !important;
-  outline: 3px solid transparent !important;
-  outline-offset: 3px !important;
+  @extend %focus;
 }
 
 [tabindex='-1']:focus:not(:focus-visible) {
   box-shadow: none !important;
 }
 
-[data-focus-mouse='true']:not(.btn),
-%focusmouse {
-  border-color: inherit !important;
-  box-shadow: none !important;
-  outline: none !important;
+[data-focus-mouse='true']:not(.btn) {
+  @extend %focusmouse;
 }
 
 p a,

package/src/scss/utilities/icons.scss

@@ -1,34 +1,51 @@
+// Icon Colors Map - TODO: Leave it here or move to _maps.scss?
+$icon-colors: (
+  primary: var(--#{$prefix}icon-primary),
+  secondary: var(--#{$prefix}icon-secondary),
+  success: var(--#{$prefix}icon-success),
+  warning: var(--#{$prefix}icon-warning),
+  danger: var(--#{$prefix}icon-danger),
+  inverse: var(--#{$prefix}icon-inverse),
+  disabled: var(--#{$prefix}icon-disabled),
+);
+
 .icon {
-  width: 32px;
-  height: 32px;
+  width: var(--#{$prefix}icon-size-m);
+  height: var(--#{$prefix}icon-size-m);
+  fill: var(--#{$prefix}icon-default);
   vertical-align: middle;
+
   &.icon-padded {
     margin: 8px;
   }
+
   &.icon-xs {
-    width: 16px;
-    height: 16px;
+    width: var(--#{$prefix}icon-size-xs);
+    height: var(--#{$prefix}icon-size-xs);
     &.icon-padded {
       margin: 4px;
     }
   }
+
   &.icon-sm {
-    width: 24px;
-    height: 24px;
+    width: var(--#{$prefix}icon-size-s);
+    height: var(--#{$prefix}icon-size-s);
     &.icon-padded {
       margin: 6px;
     }
   }
+
   &.icon-lg {
-    width: 48px;
-    height: 48px;
+    width: var(--#{$prefix}icon-size-l);
+    height: var(--#{$prefix}icon-size-l);
     &.icon-padded {
       margin: 12px;
     }
   }
+
   &.icon-xl {
-    width: 64px;
-    height: 64px;
+    width: var(--#{$prefix}icon-size-xl);
+    height: var(--#{$prefix}icon-size-xl);
     &.icon-padded {
       margin: 16px;
     }
@@ -36,8 +53,37 @@
 }
 
 // Force color when icon-color class is explicitly used
-@each $color, $value in $theme-colors {
-  .icon-#{$color} {
-    fill: $value !important;
+@each $icon-color, $icon-color-value in $icon-colors {
+  .icon-#{$icon-color} {
+    fill: $icon-color-value;
+  }
+}
+
+// Rounded icon
+// This is a utility class for icons that are used in a rounded background.
+// It is used in the buttons.
+//
+:root {
+  --#{$prefix}rounded-icon-size: var(--it-icon-size-s);
+}
+
+.rounded-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--#{$prefix}rounded-icon-size);
+  height: var(--#{$prefix}rounded-icon-size);
+  background-color: var(--#{$prefix}icon-inverse);
+  border-radius: var(--#{$prefix}radius-circle);
+
+  // TODO: remove this when we have a proper icon color map
+  @each $color, $value in $icon-colors {
+    &.rounded-#{$color} {
+      background-color: $value;
+    }
+  }
+
+  .icon {
+    margin-right: 0;
   }
 }

package/src/scss/components/_pager.scss

@@ -1,166 +0,0 @@
-//mobile
-nav.pagination-wrapper {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-
-  a {
-    text-decoration: none;
-  }
-
-  //total number version
-  &.pagination-total {
-    display: inline-flex;
-    flex-wrap: wrap;
-    flex-direction: column;
-    justify-content: center;
-    ul {
-      margin-bottom: $pager-margin-bottom;
-    }
-    p {
-      font-size: $pager-font-size;
-      color: $pager-font-color;
-      margin-bottom: $pager-margin-bottom * 2;
-      font-weight: $pager-font-weight;
-      text-align: center;
-    }
-    &.justify-content-end {
-      display: grid;
-    }
-    &.justify-content-center {
-      width: 100%;
-      .pagination {
-        justify-content: center;
-      }
-    }
-  }
-
-  //jump to page
-  .form-group {
-    margin-left: $pager-item-size-mobile;
-    width: $pager-jump-to-width;
-    margin-top: 0;
-    label {
-      font-size: $pager-font-size;
-      color: $pager-jump-to-color;
-    }
-    &.active {
-      label {
-        font-size: 0.875rem;
-      }
-    }
-  }
-
-  //page changer dropdown button
-  .btn.dropdown-toggle {
-    font-size: $pager-font-size;
-    color: $pager-font-color;
-    font-weight: $pager-font-weight;
-    padding: $pager-page-changer-padding;
-    border-bottom: $pager-page-changer-border-bottom;
-    height: $pager-item-size-mobile;
-    border: none;
-    width: 100%;
-    &:after {
-      color: $pager-icon-color;
-      margin-left: 0.5rem;
-    }
-  }
-}
-
-.pagination {
-  flex-wrap: wrap;
-  .page-item {
-    margin-right: $pager-item-margin-right;
-
-    // disabled version
-    &.disabled {
-      a.page-link {
-        color: $pager-disabled-color;
-        .icon {
-          fill: $pager-disabled-color !important;
-        }
-      }
-    }
-
-    //text only
-    span.page-link {
-      pointer-events: none;
-    }
-
-    .page-link {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      //border
-      height: $pager-item-size-mobile;
-      min-width: $pager-item-size-mobile;
-      border-radius: $pager-item-border-radius;
-      border: none;
-
-      //text
-      font-size: $pager-font-size;
-      font-weight: $pager-font-weight;
-      color: $pager-font-color;
-      background-color: transparent;
-
-      //current page version
-      &[aria-current] {
-        border: $pager-item-current-border;
-        color: $pager-item-current-color;
-        pointer-events: none;
-      }
-
-      // icon & text prev/next
-      &.text {
-        color: $pager-icon-color;
-      }
-
-      span.d-inline-block {
-        margin-right: 0.5rem;
-      }
-
-      //hover state
-      &:hover {
-        color: $pager-hover-color;
-        background-color: transparent;
-        // icon
-        .icon {
-          fill: $pager-hover-color;
-        }
-      }
-    }
-  }
-}
-
-//small - tablet
-@include media-breakpoint-up(sm) {
-  //items size
-  .pagination {
-    .page-item {
-      .page-link {
-        height: $pager-item-size-tablet;
-        min-width: $pager-item-size-tablet;
-      }
-    }
-  }
-
-  //page changer toggle
-  nav.pagination-wrapper {
-    .btn.dropdown-toggle {
-      height: $pager-item-size-tablet;
-    }
-  }
-}
-
-//Tablet vertical
-@include media-breakpoint-up(md) {
-  nav.pagination-wrapper {
-    justify-content: flex-start;
-    //page changer
-    .dropdown {
-      margin-left: $pager-item-size-tablet;
-    }
-  }
-}

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

@@ -1,11 +0,0 @@
-//
-// Form text
-//
-
-.form-text {
-  margin-top: $form-text-margin-top;
-  @include font-size($form-text-font-size);
-  font-style: $form-text-font-style;
-  font-weight: $form-text-font-weight;
-  color: $form-text-color;
-}