bootstrap-italia 2.12.0 → 2.13.0

package/src/scss/{custom → components}/_toolbar.scss

@@ -16,7 +16,7 @@
     & > ul {
       height: 100%;
       flex-direction: column;
-      width: 64px;
+      width: 72px;
       & > li {
         margin: 8px 0;
         display: flex;
@@ -44,12 +44,12 @@
     &.toolbar-medium {
       width: 84px;
       & > ul {
-        width: 48px;
+        width: 56px;
       }
 
       // badge
       .toolbar-badge {
-        right: -4px;
+        right: 0px;
       }
 
       // dropdown
@@ -68,12 +68,12 @@
     &.toolbar-small {
       width: 72px;
       & > ul {
-        width: 40px;
+        width: 48px;
       }
 
       // badge
       .toolbar-badge {
-        right: -4px;
+        right: 0px;
       }
 
       // dropdown
@@ -91,6 +91,7 @@
 
     // dropdown
     .btn-dropdown {
+      padding: 0;
       &:after {
         right: -12px;
         transform: rotate(-90deg);
@@ -128,7 +129,11 @@
     }
 
     .toolbar-badge {
-      right: -10px;
+      right: 0px;
+    }
+
+    .badge-wrapper {
+      width: 100%;
     }
   }
   // toolbar vertical ----------------- END
@@ -165,8 +170,8 @@
       height: 10px;
       width: 10px;
       min-width: 10px;
-      right: 8px;
-      top: 4px;
+      right: 0px;
+      top: -2px;
       padding: 0;
     }
   }
@@ -198,7 +203,7 @@
       height: 8px;
       width: 8px;
       min-width: 8px;
-      right: 10px;
+      right: 0px;
       top: 2px;
       padding: 0;
     }
@@ -238,7 +243,6 @@
       list-style-type: none;
       margin: 0 8px;
       text-align: center;
-      flex: 1 100%;
       // divider
       &.toolbar-divider {
         margin: 0;
@@ -308,6 +312,8 @@
     padding: 0;
     width: 100%;
     position: relative;
+    padding-left: 10px;
+    padding-right: 10px;
     &.toolbar-more {
       &:after {
         display: none;
@@ -362,6 +368,7 @@
 
   // icon badges ------------------
   .badge-wrapper {
+    // width: calc(50% + 28px);
     position: relative;
   }
 
@@ -375,8 +382,8 @@
 
   // icon badge
   .toolbar-badge {
-    top: 0;
-    right: 6px;
+    top: -4px;
+    right: 0px;
     min-width: 18px;
     height: 18px;
     padding: 0 4px;

package/src/scss/components/_tooltip.scss

@@ -0,0 +1,139 @@
+// Base class
+.tooltip {
+  // scss-docs-start tooltip-css-vars
+  --#{$prefix}tooltip-zindex: #{$zindex-tooltip};
+  --#{$prefix}tooltip-max-width: #{$tooltip-max-width};
+  --#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
+  --#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
+  --#{$prefix}tooltip-margin: #{$tooltip-margin};
+  @include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
+  --#{$prefix}tooltip-color: #{$tooltip-color};
+  --#{$prefix}tooltip-bg: #{$tooltip-bg};
+  --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
+  --#{$prefix}tooltip-opacity: #{$tooltip-opacity};
+  --#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
+  --#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};
+  // scss-docs-end tooltip-css-vars
+
+  z-index: var(--#{$prefix}tooltip-zindex);
+  display: block;
+  padding: var(--#{$prefix}tooltip-arrow-height);
+  margin: var(--#{$prefix}tooltip-margin);
+  @include deprecate('`$tooltip-margin`', 'v5', 'v5.x', true);
+  // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
+  // So reset our font and text properties to avoid inheriting weird values.
+  @include reset-text();
+  @include font-size(var(--#{$prefix}tooltip-font-size));
+  // Allow breaking very long words so they don't overflow the tooltip's bounds
+  word-wrap: break-word;
+  opacity: 0;
+
+  &.show {
+    opacity: var(--#{$prefix}tooltip-opacity);
+  }
+
+  .tooltip-arrow {
+    display: none;
+  }
+  border-radius: $border-radius;
+  font-size: 0.75rem;
+
+  //text
+  .tooltip-inner {
+    padding: 7px $v-gap * 2;
+    background-color: $color-background-emphasis;
+    @include media-breakpoint-up(md) {
+      .tooltip-inner {
+        padding: 4.5px $v-gap;
+      }
+    }
+    a {
+      color: $white;
+      text-decoration: underline;
+    }
+  }
+  //padding
+  &.bs-tooltip-top,
+  &.bs-tooltip-bottom {
+    padding: $v-gap 0;
+  }
+  &.bs-tooltip-left,
+  &.bs-tooltip-right {
+    padding: 0 $v-gap;
+  }
+}
+
+.bs-tooltip-top .tooltip-arrow {
+  bottom: 0;
+
+  &::before {
+    top: -1px;
+    border-width: var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * 0.5) 0; // stylelint-disable-line function-disallowed-list
+    border-top-color: var(--#{$prefix}tooltip-bg);
+  }
+}
+
+/* rtl:begin:ignore */
+.bs-tooltip-end .tooltip-arrow {
+  left: 0;
+  width: var(--#{$prefix}tooltip-arrow-height);
+  height: var(--#{$prefix}tooltip-arrow-width);
+
+  &::before {
+    right: -1px;
+    border-width: calc(var(--#{$prefix}tooltip-arrow-width) * 0.5) var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * 0.5) 0; // stylelint-disable-line function-disallowed-list
+    border-right-color: var(--#{$prefix}tooltip-bg);
+  }
+}
+
+/* rtl:end:ignore */
+
+.bs-tooltip-bottom .tooltip-arrow {
+  top: 0;
+
+  &::before {
+    bottom: -1px;
+    border-width: 0 calc(var(--#{$prefix}tooltip-arrow-width) * 0.5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
+    border-bottom-color: var(--#{$prefix}tooltip-bg);
+  }
+}
+
+/* rtl:begin:ignore */
+.bs-tooltip-start .tooltip-arrow {
+  right: 0;
+  width: var(--#{$prefix}tooltip-arrow-height);
+  height: var(--#{$prefix}tooltip-arrow-width);
+
+  &::before {
+    left: -1px;
+    border-width: calc(var(--#{$prefix}tooltip-arrow-width) * 0.5) 0 calc(var(--#{$prefix}tooltip-arrow-width) * 0.5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
+    border-left-color: var(--#{$prefix}tooltip-bg);
+  }
+}
+
+/* rtl:end:ignore */
+
+.bs-tooltip-auto {
+  &[data-popper-placement^='top'] {
+    @extend .bs-tooltip-top;
+  }
+  &[data-popper-placement^='right'] {
+    @extend .bs-tooltip-end;
+  }
+  &[data-popper-placement^='bottom'] {
+    @extend .bs-tooltip-bottom;
+  }
+  &[data-popper-placement^='left'] {
+    @extend .bs-tooltip-start;
+  }
+}
+
+// Wrapper for the tooltip content
+.tooltip-inner {
+  max-width: var(--#{$prefix}tooltip-max-width);
+  padding: var(--#{$prefix}tooltip-padding-y) var(--#{$prefix}tooltip-padding-x);
+  color: var(--#{$prefix}tooltip-color);
+  text-align: center;
+  background-color: var(--#{$prefix}tooltip-bg);
+  @include border-radius(var(--#{$prefix}tooltip-border-radius));
+}

package/src/scss/{custom → components}/_type.scss

@@ -1,3 +1,86 @@
+//
+// Headings
+//
+.h1 {
+  @extend h1;
+}
+
+.h2 {
+  @extend h2;
+}
+
+.h3 {
+  @extend h3;
+}
+
+.h4 {
+  @extend h4;
+}
+
+.h5 {
+  @extend h5;
+}
+
+.h6 {
+  @extend h6;
+}
+
+// Type display classes
+@each $display, $font-size in $display-font-sizes {
+  .display-#{$display} {
+    @include font-size($font-size);
+    font-family: $display-font-family;
+    font-style: $display-font-style;
+    font-weight: $display-font-weight;
+    line-height: $display-line-height;
+  }
+}
+
+//
+// Emphasis
+//
+.small {
+  @extend small;
+}
+
+.mark {
+  @extend mark;
+}
+
+//
+// Lists
+//
+
+.list-unstyled {
+  @include list-unstyled();
+}
+
+// Inline turns list items into inline-block
+.list-inline {
+  @include list-unstyled();
+}
+.list-inline-item {
+  display: inline-block;
+
+  &:not(:last-child) {
+    margin-right: $list-inline-padding;
+  }
+}
+
+//
+// Misc
+//
+
+// Blockquotes
+.blockquote {
+  margin-bottom: $blockquote-margin-y;
+  @include font-size($blockquote-font-size);
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+}
+
 // Headings
 
 h1,
@@ -105,6 +188,8 @@ dl {
 }
 
 .lead {
+  @include font-size($lead-font-size);
+  font-weight: $lead-font-weight;
   font-size: 1.25rem;
   line-height: 2rem;
   @include media-breakpoint-up(sm) {
@@ -165,6 +250,11 @@ blockquote,
 }
 
 .blockquote-footer {
+  margin-bottom: $blockquote-margin-y;
+  @include font-size($blockquote-footer-font-size);
+  &::before {
+    content: '\2014\00A0'; // em dash, nbsp
+  }
   color: $blockquote-small-color;
   margin-top: 0;
   .bg-dark & {
@@ -211,5 +301,7 @@ small,
 // Abbreviations
 
 .initialism {
+  @include font-size($initialism-font-size);
+  text-transform: uppercase;
   font-size: 90%;
 }

package/src/scss/forms/_accessible-autocomplete.scss

@@ -0,0 +1,188 @@
+.autocomplete__hint,
+.autocomplete__input {
+  appearance: none;
+  border: 2px solid #0b0c0c;
+  border-radius: 0; /* Safari 10 on iOS adds implicit border rounding. */
+  box-sizing: border-box;
+  margin-bottom: 0; /* BUG: Safari 10 on macOS seems to add an implicit margin. */
+  line-height: 1.25;
+  height: 2.5rem;
+  width: 100%;
+}
+
+.autocomplete__input {
+  background-color: transparent;
+  position: relative;
+}
+
+.autocomplete__hint {
+  color: #505a5f;
+  position: absolute;
+}
+
+.autocomplete__input--default {
+  padding: 5px;
+}
+
+.autocomplete__input--focused {
+  outline: 3px solid #fd0;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 2px;
+}
+
+.autocomplete__input--show-all-values {
+  padding: 5px 35px 5px 5px; /* Space for arrow. Other padding should match .autocomplete__input--default. */
+  cursor: pointer;
+}
+
+.autocomplete__dropdown-arrow-down {
+  z-index: -1;
+  display: inline-block;
+  position: absolute;
+  right: 8px;
+  width: 24px;
+  height: 24px;
+  top: 10px;
+}
+
+.autocomplete__menu {
+  background-color: #ffffff;
+  border: 2px solid #0b0c0c;
+  border-top: 0;
+  color: #0b0c0c;
+  margin: 0;
+  max-height: 342px;
+  overflow-x: hidden;
+  padding: 0;
+  width: 100%;
+  width: calc(100% - 4px);
+}
+
+.autocomplete__menu--visible {
+  display: block;
+}
+
+.autocomplete__menu--hidden {
+  display: none;
+}
+
+.autocomplete__menu--overlay {
+  box-shadow: rgba(0, 0, 0, 0.256863) 0px 2px 6px;
+  left: 0;
+  position: absolute;
+  top: 100%;
+  z-index: 100;
+}
+
+.autocomplete__menu--inline {
+  position: relative;
+}
+
+.autocomplete__option {
+  border-bottom: solid #b1b4b6;
+  border-width: 1px 0;
+  cursor: pointer;
+  display: block;
+  position: relative;
+}
+
+.autocomplete__option > * {
+  pointer-events: none;
+}
+
+.autocomplete__option:first-of-type {
+  border-top-width: 0;
+}
+
+.autocomplete__option:last-of-type {
+  border-bottom-width: 0;
+}
+
+.autocomplete__option--odd {
+  background-color: #f3f2f1;
+}
+
+.autocomplete__option--focused,
+.autocomplete__option:hover {
+  background-color: #1d70b8;
+  border-color: #1d70b8;
+  color: white;
+  outline: none;
+}
+
+@media (-ms-high-contrast: active), (forced-colors: active) {
+  .autocomplete__menu {
+    border-color: FieldText;
+  }
+
+  .autocomplete__option {
+    background-color: Field;
+    color: FieldText;
+  }
+
+  .autocomplete__option--focused,
+  .autocomplete__option:hover {
+    forced-color-adjust: none; /* prevent backplate from obscuring text */
+
+    /* Prefer SelectedItem / SelectedItemText in browsers that support it */
+    background-color: SelectedItem;
+    border-color: SelectedItem;
+    color: SelectedItemText;
+    outline-color: SelectedItemText;
+  }
+}
+
+.autocomplete__option--no-results {
+  background-color: #f3f2f1;
+  color: #505a5f;
+  cursor: not-allowed;
+}
+
+.autocomplete__hint,
+.autocomplete__input,
+.autocomplete__option {
+  font-size: 1rem;
+  font-weight: 400;
+}
+
+.autocomplete__hint,
+.autocomplete__option {
+  padding: 5px;
+}
+
+@media (min-width: 641px) {
+  .autocomplete__hint,
+  .autocomplete__input,
+  .autocomplete__option {
+    font-size: 1.1875rem;
+    line-height: 1.3157894737;
+  }
+}
+
+.autocomplete__wrapper {
+  position: relative;
+  .autocomplete__menu {
+    border: $autocomplete-border;
+    border-top: none;
+    width: 100%;
+    position: absolute;
+    top: 100%;
+    z-index: 10;
+    box-shadow: $autocomplete-box-shadow;
+    .autocomplete__hint,
+    .autocomplete__option {
+      padding: 12px 24px;
+      background-color: #fff;
+      border: none;
+      font-size: 0.875rem;
+      font-weight: 600;
+      &:hover,
+      &:focus {
+        color: $primary;
+      }
+      &:focus {
+        border: 2px solid $focus-outline-color;
+      }
+    }
+  }
+}

package/src/scss/forms/_floating-labels.scss

@@ -0,0 +1,75 @@
+.form-floating {
+  position: relative;
+
+  > .form-control,
+  > .form-control-plaintext,
+  > .form-select {
+    height: $form-floating-height;
+    line-height: $form-floating-line-height;
+  }
+
+  > label {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%; // allow textareas
+    padding: $form-floating-padding-y $form-floating-padding-x;
+    overflow: hidden;
+    text-align: start;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    pointer-events: none;
+    border: $input-border-width solid transparent; // Required for aligning label's text with the input as it affects inner box model
+    transform-origin: 0 0;
+    @include transition($form-floating-transition);
+  }
+
+  > .form-control,
+  > .form-control-plaintext {
+    padding: $form-floating-padding-y $form-floating-padding-x;
+
+    &::placeholder {
+      color: transparent;
+    }
+
+    &:focus,
+    &:not(:placeholder-shown) {
+      padding-top: $form-floating-input-padding-t;
+      padding-bottom: $form-floating-input-padding-b;
+    }
+    // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
+    &:-webkit-autofill {
+      padding-top: $form-floating-input-padding-t;
+      padding-bottom: $form-floating-input-padding-b;
+    }
+  }
+
+  > .form-select {
+    padding-top: $form-floating-input-padding-t;
+    padding-bottom: $form-floating-input-padding-b;
+  }
+
+  > .form-control:focus,
+  > .form-control:not(:placeholder-shown),
+  > .form-control-plaintext,
+  > .form-select {
+    ~ label {
+      opacity: $form-floating-label-opacity;
+      transform: $form-floating-label-transform;
+    }
+  }
+  // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
+  > .form-control:-webkit-autofill {
+    ~ label {
+      opacity: $form-floating-label-opacity;
+      transform: $form-floating-label-transform;
+    }
+  }
+
+  > .form-control-plaintext {
+    ~ label {
+      border-width: $input-border-width 0; // Required to properly position label text - as explained above
+    }
+  }
+}