bootstrap-italia 2.2.0 → 2.3.1

package/src/scss/custom/_forms.scss

@@ -23,7 +23,7 @@ fieldset {
   }
 }
 .form-text {
-  color: $neutral-1-a7;
+  color: $color-text-secondary;
 }
 .form-group {
   position: relative;
@@ -33,7 +33,7 @@ fieldset {
   input,
   optgroup,
   textarea {
-    color: $dark;
+    color: $color-text-muted;
   }
 
   label {
@@ -45,6 +45,7 @@ fieldset {
     top: 0;
     font-size: 1rem;
     cursor: text;
+    color: $input-color-placeholder;
     display: block;
     max-width: 100%;
     width: auto;
@@ -56,6 +57,7 @@ fieldset {
     &.active {
       transform: translateY(-75%);
       font-size: $small-font-size;
+      color: $input-label-color;
     }
   }
 
@@ -73,7 +75,7 @@ fieldset {
 
 ::placeholder {
   font-weight: 600;
-  color: $neutral-1-a7;
+  color: $input-color-placeholder;
 }
 
 input[type='date'],
@@ -88,7 +90,7 @@ input[type='time'],
 input[type='url'],
 textarea {
   border: none;
-  border-bottom: 1px solid $neutral-1-a7;
+  border-bottom: 1px solid $input-border;
   border-radius: 0;
   padding: $input-spacing-y $input-spacing-x;
   outline: 0;
@@ -100,13 +102,13 @@ textarea {
   -webkit-appearance: none;
   -webkit-border-radius: 0;
   &::placeholder {
-    color: $neutral-1-a7;
+    color: $input-color-placeholder;
     font-weight: 600;
   }
 }
 
 textarea {
-  border: 1px solid $neutral-1-a7;
+  border: 1px solid $input-border;
   height: auto;
 }
 
@@ -180,7 +182,7 @@ textarea {
 .input-group {
   .input-group-text {
     padding: $input-spacing-y $input-spacing-x;
-    border-bottom: 1px solid $neutral-1-a7;
+    border-bottom: 1px solid $input-border;
     height: 100%;
   }
 
@@ -188,7 +190,7 @@ textarea {
     margin-right: 0;
 
     .icon {
-      fill: $neutral-1-a7;
+      fill: $icon-secondary;
     }
 
     & ~ label {
@@ -206,7 +208,7 @@ textarea {
     .btn {
       padding-top: 0;
       padding-bottom: 0;
-      border-bottom: 1px solid $neutral-1-a7;
+      border-bottom: 1px solid $input-border;
       border-radius: 0 4px 4px 0;
       box-shadow: none;
       height: 100%;
@@ -368,7 +370,7 @@ textarea {
     &:not(:checked) + label {
       &::after,
       &::before {
-        border-color: $neutral-1-a7;
+        border-color: $input-border;
       }
 
       &:after {
@@ -398,18 +400,18 @@ textarea {
       &:not(:checked) + label {
         &::after,
         &::before {
-          border-color: #e6e9f2;
+          border-color: $gray-border-disabled;
         }
       }
 
       &:checked + label {
         &::after {
-          border-color: #e6e9f2;
-          background-color: #e6e9f2;
+          border-color: $gray-border-disabled;
+          background-color: $gray-disabled;
         }
 
         &::before {
-          border-color: #e6e9f2;
+          border-color: $gray-border-disabled;
         }
       }
     }
@@ -468,12 +470,12 @@ textarea {
     transform: none;
     backface-visibility: hidden;
     opacity: 1;
-    background: #fff;
+    background: $white;
   }
 
   input.semi-checked:not(:checked) + label::after {
-    border-color: $primary-a5;
-    background-color: $primary-a5;
+    border-color: $primary-a5; // TODO: Not found
+    background-color: $primary-a5; // TODO: Not found
     z-index: 0;
   }
 }

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

@@ -15,6 +15,13 @@
   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");
 }
+textarea {
+  &.just-validate-success-field {
+    background-position: right 0.2rem !important;
+    background-repeat: no-repeat !important;
+    background-size: 28px 16px !important;
+  }
+}
 input[type='date'],
 input[type='file'],
 input[type='text'] {

package/src/scss/custom/_linklist.scss

@@ -2,7 +2,7 @@
 .link-list-wrapper {
   .link-list-heading {
     font-size: $link-list-heading-size;
-    color: $neutral-1;
+    color: $color-text-base;
     padding: 0 $link-list-h-pad;
     font-weight: 600;
     margin-bottom: $link-list-divider-distance;
@@ -18,7 +18,7 @@
   }
   h3 {
     font-size: $link-list-heading-size;
-    color: $neutral-1-a10;
+    color: $color-text-base;
     padding: 0 $link-list-h-pad;
     font-weight: 600;
     a {
@@ -76,7 +76,7 @@
             text-decoration: underline;
           }
           p {
-            color: $neutral-1-a7;
+            color: $color-text-secondary;
             text-decoration: none;
           }
           .icon {
@@ -117,7 +117,7 @@
           .icon {
             transition: transform $dropdown-menu-animation-speed;
             &.secondary {
-              color: $neutral-2-b3;
+              color: $icon-secondary;
             }
           }
         }
@@ -129,22 +129,22 @@
         }
         &.active {
           span {
-            color: $neutral-1-a10;
+            color: $color-text-primary-active;
             text-decoration: underline;
           }
           .icon {
-            color: $neutral-1-a10;
+            color: $color-text-primary-active;
           }
         }
         &.disabled {
           cursor: not-allowed;
           span {
-            color: $neutral-1-a4;
+            color: $gray-label-disabled;
           }
           svg {
-            fill: $neutral-1-a4;
+            fill: $gray-disabled;
             &.secondary {
-              fill: $neutral-1-a4;
+              fill: $gray-disabled;
             }
           }
         }
@@ -155,7 +155,7 @@
         p {
           font-size: $link-list-paragraph-size;
           line-height: initial;
-          color: $neutral-1-a7;
+          color: $color-text-secondary;
         }
         //avatar
         &.avatar {
@@ -191,7 +191,7 @@
     .divider {
       display: block;
       height: $link-list-divider-height;
-      background: $neutral-1-a1;
+      background: $color-border-subtle;
       margin: $link-list-divider-distance 0;
     }
     //toggles
@@ -229,7 +229,7 @@
           }
         }
         [type='checkbox'][disabled] + label {
-          color: $neutral-1-a4;
+          color: $color-text-secondary;
         }
       }
     }
@@ -297,7 +297,7 @@
         position: relative;
         padding: 1rem;
         margin-top: 0;
-        border-bottom: 4px solid $border-color;
+        border-bottom: 4px solid $color-border-subtle;
         &:after {
           content: '';
           position: absolute;

package/src/scss/custom/_list.scss

@@ -56,7 +56,7 @@
           text-decoration: none;
         }
         svg {
-          fill: $primary-a5;
+          fill: $primary;
           width: $v-gap * 3;
           height: $v-gap * 3;
         }
@@ -100,9 +100,9 @@
       }
       // active
       &.active {
-        color: $neutral-1-a10;
+        color: $color-text-base;
         .text {
-          color: $neutral-1-a10;
+          color: $color-text-base;
         }
       }
     }
@@ -175,9 +175,9 @@
         &.list-item {
           &:hover {
             box-shadow: $card-shadow;
-            color: $primary-a5;
+            color: $color-text-primary-hover;
             text-decoration: none;
-            background: #fff;
+            background: $white;
             position: relative;
             z-index: 1;
             transition: none;

package/src/scss/custom/_masonry-loader.scss

@@ -6,5 +6,5 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: #fff;
+  background-color: $white;
 }

package/src/scss/custom/_megamenu.scss

@@ -9,7 +9,7 @@
           .dropdown-menu {
             .it-vertical {
               width: 100%;
-              background: $lightgrey-c2;
+              background: $color-background-primary-lighter;
               padding-top: $v-gap * 2;
               padding-bottom: $v-gap * 2;
               margin-top: $v-gap * 2;
@@ -44,7 +44,7 @@
                     display: block;
                     height: 1px;
                     width: $megamenu-link-small-line-width;
-                    background: $neutral-2;
+                    background: $color-border-subtle;
                     margin-bottom: $megamenu-link-small-line-margin-bottom * 2;
                   }
                   img {
@@ -62,7 +62,7 @@
             // asymettrical column
             .it-heading-megacolumn-wrapper {
               .it-heading-megacolumn {
-                color: $neutral-1-a10;
+                color: $color-text-base;
                 margin: $megamenu-linklist-link-v-padding $link-list-h-pad;
                 padding-left: $link-list-h-pad;
                 padding-bottom: $megamenu-linklist-link-v-padding;
@@ -85,7 +85,7 @@
                     display: block;
                     height: 1px;
                     width: $megamenu-link-small-line-width;
-                    background: $neutral-2;
+                    background: $color-border-subtle;
                     margin-bottom: $megamenu-link-small-line-margin-bottom;
                   }
                 }
@@ -145,7 +145,7 @@
               display: block;
               height: 1px;
               width: $megamenu-link-small-line-width;
-              background: $neutral-2;
+              background: $color-border-subtle;
               margin-bottom: $megamenu-link-small-line-margin-bottom;
             }
           }
@@ -197,7 +197,7 @@
                     display: block;
                     height: 1px;
                     width: $megamenu-link-small-line-width;
-                    background: $neutral-2;
+                    background: $color-border-subtle;
                     margin-bottom: $megamenu-link-small-line-margin-bottom;
                   }
                 }
@@ -215,7 +215,7 @@
                         display: block;
                         height: 1px;
                         width: $megamenu-link-small-line-width;
-                        background: $neutral-2;
+                        background: $color-border-subtle;
                         margin-bottom: $megamenu-link-small-line-margin-bottom;
                       }
                     }
@@ -276,7 +276,7 @@
             display: block;
             height: 1px;
             width: $megamenu-link-small-line-width;
-            background: $neutral-2;
+            background: $color-border-subtle;
             margin-bottom: $megamenu-link-small-line-margin-bottom;
           }
         }
@@ -298,7 +298,7 @@
                   font-size: $megamenu-heading-text-size;
                   font-weight: $megamenu-heading-font-weight;
                   letter-spacing: $megamenu-heading-letter-spacing;
-                  border-bottom: 1px solid $neutral-2;
+                  border-bottom: 1px solid $color-border-subtle;
                   padding-bottom: $megamenu-linklist-link-v-padding;
                   padding-left: 0;
                   line-height: 1.2em;
@@ -366,7 +366,7 @@
                   line-height: $megamenu-heading-line-height;
                   font-size: $megamenu-heading-text-size;
                   text-transform: uppercase;
-                  border-bottom: 1px solid $neutral-2;
+                  border-bottom: 1px solid $color-border-subtle;
                   padding-bottom: $megamenu-linklist-link-v-padding;
                 }
               }
@@ -383,7 +383,7 @@
                   line-height: $megamenu-heading-line-height;
                   font-size: $megamenu-heading-text-size;
                   text-transform: uppercase;
-                  border-bottom: 1px solid $neutral-2;
+                  border-bottom: 1px solid $color-border-subtle;
                   padding-bottom: $megamenu-linklist-link-v-padding;
                 }
               }
@@ -420,7 +420,7 @@
                       .divider {
                         height: 1px;
                         display: block;
-                        background: $neutral-1-a2;
+                        background: $color-border-subtle;
                         margin: 0 0 0 $megamenu-linklist-vertical-link-padding;
                         width: $megamenu-link-small-line-width;
                         margin-top: $megamenu-liklist-vertical-margin-top;

package/src/scss/custom/_modal.scss

@@ -4,7 +4,7 @@
 }
 
 .modal-body {
-  color: $neutral-1-a7;
+  color: $color-text-base;
 }
 
 .modal-footer {

package/src/scss/custom/_notifications.scss

@@ -9,13 +9,13 @@
   bottom: 0;
   right: 0;
   display: none;
-  border-top: 4px solid $secondary;
+  border-top: 4px solid $color-border-secondary;
 
   //title
   h5 {
     font-size: 0.938rem;
     text-transform: uppercase;
-    color: $neutral-1;
+    color: $color-text-base;
     letter-spacing: 0;
     margin: 0;
     position: relative;
@@ -26,11 +26,11 @@
   p {
     font-size: 0.875rem;
     margin: 1.5rem 0 0 0;
-    color: $secondary;
+    color: $color-text-secondary;
   }
   //icon version
   &.with-icon {
-    border-top: 4px solid $secondary;
+    border-top: 4px solid $color-border-secondary;
     h5 {
       .icon {
         position: absolute;
@@ -81,11 +81,11 @@
       padding: 0;
       background: none;
       .icon {
-        fill: $neutral-1;
+        fill: $icon-secondary;
       }
       &:hover {
         .icon {
-          fill: $primary;
+          fill: $icon-primary;
         }
       }
       &:active {

package/src/scss/custom/_point-list.scss

@@ -11,9 +11,7 @@
       justify-content: center;
       align-items: center;
       padding: 0.5rem 1rem;
-
       color: $primary;
-
       border-right-width: 1px;
       border-right-style: solid;
       border-color: $primary;

package/src/scss/custom/_popover.scss

@@ -46,7 +46,7 @@
     background: none;
     border: none;
     text-transform: uppercase;
-    color: $dark;
+    color: $color-text-base;
     font-size: 0.938rem;
     padding: $v-gap * 2 $v-gap * 3 0;
     letter-spacing: 0.05em;
@@ -63,7 +63,7 @@
   .popover-body {
     font-size: 0.875rem;
     line-height: 1.5em;
-    color: $gray-tertiary;
+    color: $color-text-secondary; // UI Kit
     padding: $v-gap * 2 $v-gap * 3;
     //inner bottom link
     a.popover-inner-link {

package/src/scss/custom/_progress-bars.scss

@@ -18,9 +18,8 @@
 .progress {
   height: 4px;
   box-shadow: none;
-  background-color: tint-color($primary-a1, 4);
   &.progress-color {
-    background-color: $neutral-2;
+    background-color: $color-background-secondary-lighter; // UI Kit
   }
   &.progress-indeterminate {
     position: relative;
@@ -36,14 +35,14 @@
 
 //progress bar
 .progress-bar {
-  background-color: $primary;
+  background-color: $secondary; // UI Kit
 }
 
 //label
 .progress-bar-label {
   text-align: right;
   font-size: 0.75rem;
-  color: $dark;
+  color: $color-text-base;
   font-weight: 500;
 }
 

package/src/scss/custom/_progress-donuts.scss

@@ -4,7 +4,7 @@
   height: 128px;
   position: relative;
   .progressbar-text {
-    color: #000 !important;
+    color: $color-text-base !important;
     font-weight: 700;
     z-index: 3;
   }
@@ -16,7 +16,7 @@
   }
   &:after {
     content: '';
-    background: #fff;
+    background: $white;
     width: 67px;
     height: 67px;
     left: 50%;
@@ -28,7 +28,7 @@
   }
   &:before {
     content: '';
-    background: #d4e9ff;
+    background: $color-background-secondary-lighter; // UI Kit
     width: 110px;
     height: 110px;
     left: 50%;

package/src/scss/custom/_progress-spinners.scss

@@ -34,15 +34,15 @@
   width: $v-gap * 6;
   height: $v-gap * 6;
   border-radius: 50%;
-  border: 4px solid tint-color($primary-a1, 4);
+  border: 4px solid $color-background-secondary-lighter; // UI Kit
   //spinner active state
   &.progress-spinner-active {
     animation: spinnerAnim 0.75s linear infinite;
   }
   //standard spinner active state
   &.progress-spinner-active:not(.progress-spinner-double) {
-    border-color: $primary;
-    border-bottom-color: tint-color($primary-a1, 4);
+    border-color: $secondary;
+    border-bottom-color: $color-background-secondary-lighter;
   }
   //small size
   &.size-sm {
@@ -92,7 +92,7 @@
         display: inline-block;
         transform: rotate(45deg);
         border-radius: 50%;
-        border: 4px solid $primary;
+        border: 4px solid $secondary;
         border-right: 4px solid transparent;
         border-bottom: 4px solid transparent;
         width: 100%;

package/src/scss/custom/_sections.scss

@@ -10,13 +10,14 @@
 
   // color and image variants
   &.section-muted {
-    background: $lightgrey-a3;
+    background: $color-background-muted;
   }
   &.section-primary {
     background: $primary;
   }
   &.section-neutral {
-    background: $neutral-1;
+    // TODO: Consider updating class name to match the variable
+    background: $color-background-emphasis;
   }
   &.section-image {
     background-size: cover;

package/src/scss/custom/_sidebar.scss

@@ -77,7 +77,7 @@
               padding-bottom: $sidebar-submenu-link-v-padding;
               &.active {
                 span {
-                  color: $neutral-1-a10;
+                  color: $color-text-base;
                   text-decoration: underline;
                 }
                 &::after {
@@ -94,7 +94,7 @@
         content: '';
         width: $sidebar-link-small-line-width;
         height: 1px;
-        background: $neutral-2;
+        background: $color-border-subtle;
         display: block;
         margin-left: $v-gap * 3;
         margin-top: $v-gap * 3;