bootstrap-italia 2.8.8-rc5 → 2.9.0

package/src/scss/custom/_callout.scss

@@ -1,57 +1,44 @@
 .callout {
   position: relative;
-  max-width: 60ch;
   overflow: hidden;
 
   .callout-inner {
     padding: 2rem;
-    border: 2px solid;
+    border: 2px solid $color-border-secondary;
     border-top: 0;
-    border-color: $color-border-secondary;
     margin: 2.5rem 0;
   }
 
-  // Highlights version
   &.callout-highlight {
     border: none;
     border-left: 2px solid $color-border-secondary;
     border-radius: 0;
     padding: 0 2.222rem;
-    p {
-      &:last-child {
-        margin: 0;
-      }
+
+    p:last-child {
+      margin: 0;
     }
+
     .callout-title {
       margin-bottom: 1.556rem;
     }
-    // color versions
-    &.success {
-      border-color: rgba($success, 1);
-    }
-    &.warning {
-      border-color: $color-border-warning;
-    }
-    &.danger {
-      border-color: rgba($danger, 1);
-    }
-    &.important {
-      border-color: $success;
-    }
-    &.note {
-      border-color: $primary;
+
+    @each $color-name, $color-value in (success: $success, warning: $color-border-warning, danger: $danger, important: $success, note: $primary) {
+      &.#{$color-name} {
+        border-color: $color-value;
+      }
     }
   }
 
-  // More version
   &.callout-more {
     background: #f9f9f5;
     border: none;
     border-radius: 0;
-    padding: 2.222rem 2.222rem;
+    padding: 2.222rem;
     position: relative;
-    // top triangle
-    &:before {
+
+    &:before,
+    &:after {
       content: '';
       position: absolute;
       top: 0;
@@ -59,34 +46,33 @@
       width: 0;
       height: 0;
       border-style: solid;
+    }
+
+    &:before {
       border-width: 0 48px 48px 0;
       border-color: transparent $white transparent transparent;
     }
+
     &:after {
-      content: '';
-      position: absolute;
-      top: 0;
-      right: 0;
-      width: 0;
-      height: 0;
-      border-style: solid;
       border-width: 48px 0 0 48px;
       border-color: transparent transparent transparent #e4e4db;
     }
-    // text
+
     p {
       font-size: 1rem;
       line-height: 1.5rem;
-      color: $color-text-secondary; // UI kit
+      color: $color-text-secondary;
     }
-    // title
+
     .callout-title {
       display: flex;
       align-items: flex-start;
       margin-bottom: 2.222rem;
+
       i {
         font-size: 1.25rem;
       }
+
       span {
         border-bottom: 2px solid $body-color;
         padding-bottom: 0.1rem;
@@ -96,148 +82,97 @@
     }
   }
 
-  // color versions
-  &.success {
-    border-color: $success;
-    .callout-inner {
-      border-color: rgba($success, 1);
-    }
-    .callout-title {
-      color: $success;
-      .icon {
-        fill: $success;
-      }
-      span {
-        border-color: $success;
-      }
-      .text:after {
-        border-color: $success;
-      }
-      &:before {
-        border-color: $success;
-      }
-    }
-  }
-  &.warning {
-    border-color: $warning;
-    .callout-inner {
-      border-color: $color-border-warning;
-    }
-    .callout-title {
-      color: $color-text-warning;
-      .icon {
-        fill: $warning;
-      }
-      span {
-        border-color: $warning;
-      }
-    }
-  }
-  &.danger {
-    border-color: $danger;
-    .callout-inner {
-      border-color: rgba($danger, 1);
-    }
-    .callout-title {
-      color: $danger;
-      .icon {
-        fill: $danger;
+  @each $color-name, $color-value in (success: $success, warning: $warning, danger: $danger, important: $success, note: $primary) {
+    &.#{$color-name} {
+      border-color: $color-value;
+
+      .callout-inner {
+        border-color: rgba($color-value, 1);
       }
-      span {
-        border-color: $danger;
+
+      .callout-title {
+        color: $color-value;
+
+        .icon {
+          fill: $color-value;
+        }
+
+        span {
+          border-color: $color-value;
+        }
       }
-    }
-  }
-  &.important {
-    border-color: $success;
-    .callout-inner {
-      border-color: $success;
-    }
-    .callout-title {
-      color: $success;
-      .icon {
-        fill: $success;
+
+      .collapse-div .collapse-header .callout-more-toggle {
+        color: $color-value;
+
+        &:active,
+        &:hover {
+          color: $color-value;
+        }
+
+        span {
+          border-color: $color-value;
+
+          &:before,
+          &:after {
+            background: $color-value;
+          }
+        }
       }
-      span {
-        border-color: $success;
+
+      a {
+        color: $color-value;
       }
-    }
-  }
-  &.note {
-    border-color: $primary;
-    .callout-inner {
-      border-color: $primary;
-    }
-    .callout-title {
-      color: $primary;
+
       .icon {
-        fill: $primary;
+        fill: $color-value;
       }
-      span {
-        border-color: $primary;
-      }
-    }
-    .collapse-div .collapse-header .callout-more-toggle {
-      color: $primary;
-      &:active,
-      &:hover {
-        color: $primary;
-      }
-      span {
-        border-color: $primary;
-        &:before,
-        &:after {
-          background: $primary;
-        }
-      }
-    }
-    a {
-      color: $primary;
-    }
-    .icon {
-      fill: $primary;
     }
   }
 
-  //title
   .callout-title {
     font-weight: 600;
     text-transform: uppercase;
     font-size: 1rem;
-    color: $color-text-secondary; // UI kit
+    color: $color-text-secondary;
+
     @include media-breakpoint-up(lg) {
       font-size: 1.125rem;
     }
+
     .icon {
-      fill: $color-text-secondary; // UI kit
+      fill: $color-text-secondary;
       margin-right: 0.5rem;
     }
   }
 
-  // standard title
   &:not(.callout-highlight):not(.callout-more) {
     .callout-title {
       position: relative;
       padding-left: 1.5rem;
       top: -3rem;
+
       .text {
         position: relative;
         overflow: hidden;
         width: 100%;
         font-size: 0.875rem;
         padding-right: 1.5rem;
+
         @include media-breakpoint-up(md) {
           font-size: 1.15rem;
         }
+
+        &:after {
+          content: '';
+          top: 0.875em;
+          border-top: 2px solid;
+          position: absolute;
+          width: calc(100vw - 100% - 20px);
+          left: 100%;
+        }
       }
-      .text:after {
-        content: '';
-        top: 0.875em;
-        border-top: 2px solid;
-        position: absolute;
-        width: 250%;
-        left: 100%;
-      }
+
       &:before {
         content: '';
         top: 0.875em;
@@ -249,31 +184,32 @@
     }
   }
 
-  //text
   p {
     font-family: $font-family-serif;
     font-size: 1rem;
-    color: $color-text-secondary; // UI kit
+    color: $color-text-secondary;
+
     @include media-breakpoint-up(lg) {
       font-size: 1.125rem;
     }
+
     &.callout-big-text {
       font-size: 1.125rem;
     }
   }
 
-  //collapse
   .collapse-div {
     display: flex;
     flex-direction: column-reverse;
     border-bottom: none;
+
     .collapse-header {
       display: flex;
       justify-content: space-between;
       border-top: 1px solid $gray-border-disabled;
       padding: 1.333rem 0 0;
       margin-top: 0;
-      // toggle restyle
+
       .callout-more-toggle {
         padding: 0;
         border: none;
@@ -283,30 +219,35 @@
         align-items: center;
         color: $primary;
         background-color: transparent;
+
         &:hover,
         &:focus,
         &:active {
           background: none;
         }
+
         &:hover {
           color: $link-hover-color;
-          // plus sign
+
           span {
             border-color: $link-hover-color;
+
             &:before,
             &:after {
               background: $link-hover-color;
             }
           }
         }
+
         &:active {
           color: $primary;
         }
+
         &:before,
         &:after {
           display: none;
         }
-        // plus sign
+
         span {
           position: relative;
           height: 15px;
@@ -316,20 +257,21 @@
           border: 1px solid $primary;
           border-radius: 50%;
           display: inline-block;
+
           &:before,
           &:after {
             content: '';
             position: absolute;
             background: $primary;
           }
-          // plus h
+
           &:before {
             width: 9px;
             height: 1px;
             top: 6px;
             left: 2px;
           }
-          // plus v
+
           &:after {
             height: 9px;
             width: 1px;
@@ -339,11 +281,9 @@
             transition: transform 0.2s;
           }
         }
-        // expanded version
-        &[aria-expanded='true'] {
-          span:after {
-            transform: translateY(2px) rotate(90deg);
-          }
+
+        &[aria-expanded='true'] span:after {
+          transform: translateY(2px) rotate(90deg);
         }
       }
 
@@ -352,8 +292,10 @@
         font-weight: normal;
       }
     }
+
     .collapse-body {
       padding: 0;
+
       p:last-child {
         margin-bottom: 1rem;
       }
@@ -361,25 +303,14 @@
   }
 }
 
-//fix IE max width ch value (substitute with rem)
-/* stylelint-disable */
-_:-ms-fullscreen,
-.callout {
-  max-width: 32rem;
-}
-/* stylelint-enable */
-//Tablet vertical
-@include media-breakpoint-up(md) {
+@media (min-width: 768px) {
   .callout {
-    // Highlights version
     &.callout-highlight {
       padding: 0 0 0 2.222rem;
     }
-    // More version
-    &.callout-more {
-      p {
-        font-size: 0.875rem;
-      }
+
+    &.callout-more p {
+      font-size: 0.775rem;
     }
   }
 }

package/src/scss/custom/_dimmer.scss

@@ -6,8 +6,7 @@
 
 .dimmer {
   display: flex;
-  background-color: $color-background-emphasis;
-  opacity: 0.92;
+  background-color: hsla(210, 54%, 20%, 0.9);
   position: absolute;
   top: 0;
   bottom: 0;
@@ -26,7 +25,7 @@
   &.dimmer-primary {
     background-color: $primary;
     &.show {
-      opacity: 0.9;
+      background-color: hsla(210, 100%, 40%, 0.9);
     }
   }
 

package/src/scss/custom/_forms.scss

@@ -11,9 +11,6 @@ fieldset {
     display: block;
     max-width: 100%;
     width: auto;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
     padding: 0 $input-spacing-x;
     z-index: 1;
     font-size: $small-font-size;
@@ -48,9 +45,6 @@ fieldset {
     display: block;
     max-width: 100%;
     width: auto;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
     padding: 0 $input-spacing-x;
     z-index: 1;
     &.active {
@@ -245,8 +239,14 @@ textarea {
 
 .form-check {
   padding-left: 0;
-  margin-top: 0.5rem;
   position: relative;
+  margin-bottom: 0.5rem;
+
+  // add vertical spacing for consequential elements
+  & + & {
+    margin-top: 0.5rem;
+  }
+
   [type='checkbox'],
   [type='radio'] {
     position: absolute;
@@ -258,14 +258,12 @@ textarea {
 
     + label {
       position: relative;
-      padding-left: 36px;
+      padding-left: 2rem;
       cursor: pointer;
       display: inline-block;
-      height: 32px;
-      line-height: 32px;
       font-size: 1rem;
+      font-weight: $font-weight-semibold;
       user-select: none;
-      margin-bottom: 0.5rem;
       @include media-breakpoint-up(sm) {
         font-size: 1.125rem;
       }
@@ -299,7 +297,7 @@ textarea {
       height: 17px;
       border: 1px solid #e6e9f2;
       border-radius: 1px;
-      margin: 2px 5px;
+      margin: 2px 4px;
       transform: rotateZ(37deg);
       transform-origin: 100% 100%;
     }
@@ -308,12 +306,12 @@ textarea {
       border-radius: 4px;
       height: 20px;
       width: 20px;
-      margin: 6px 5px;
+      margin: 4px;
       top: 0;
     }
 
     &:checked + label::before {
-      top: 6px;
+      top: 4px;
       left: 1px;
       width: 8px;
       height: 13px;
@@ -373,8 +371,8 @@ textarea {
         left: 0;
         top: 0;
         margin: 5px;
-        width: 22px;
-        height: 22px;
+        width: 20px;
+        height: 20px;
         z-index: 0;
         border-radius: 50%;
         border-style: solid;
@@ -435,15 +433,15 @@ textarea {
 
   // gruppi
   &.form-check-group {
-    padding: 0 0 8px 0;
-    margin-bottom: 16px;
+    padding: 0 0 1rem 0;
+    margin-bottom: 1rem;
     box-shadow: inset 0 -1px 0 0 rgba(1, 1, 1, 0.1);
 
     [type='checkbox'] + label,
     [type='radio'] + label {
       position: static;
       padding-left: 0;
-      padding-right: 52px;
+      padding-right: 3.25rem;
 
       &::after,
       &::before {
@@ -461,22 +459,22 @@ textarea {
     }
 
     .form-text {
-      margin: 0;
-      padding-right: 52px;
       display: block;
-      margin-bottom: $v-gap * 2;
+      padding-right: 3.25rem;
+      margin-bottom: 0.5rem;
     }
 
-    label {
-      font-weight: 600;
-    }
+    // label {
+    //   font-weight: 600;
+    // }
+
     input.semi-checked:not(:checked) + label::before {
       right: 19px;
       left: auto;
     }
   }
   input.semi-checked:not(:checked) + label::before {
-    top: 13px;
+    top: 11px;
     left: 4px;
     width: 12px;
     height: 2px;