bootstrap-italia 2.17.3 → 3.0.0-alpha.0

package/src/scss/components/_calendar.scss

@@ -1,9 +1,23 @@
+// Component: calendar
+//
+// Description: Component styles for calendar
+//
+
+// Variables
+//
+
+// Properties
+//
+
+// Styles
+//
+
 .it-calendar-wrapper {
   .it-header-block-title {
-    background-color: $primary;
-    color: $white;
     padding: 0.5em 0;
     border-radius: 4px 4px 0 0;
+    background-color: $primary;
+    color: $white;
   }
 
   .card-wrapper {
@@ -13,37 +27,37 @@
   .card {
     .card-title,
     .card-text {
-      border-bottom: 1px solid $color-border-subtle;
       padding-bottom: 16px;
+      border-bottom: 1px solid $color-border-subtle;
     }
 
     .card-body {
       .card-title {
+        padding-top: 16px;
         font-family: $font-family-sans-serif;
         font-size: 3rem;
         font-weight: 400;
-        padding-top: 16px;
 
         span {
-          font-size: 0.3em;
           display: block;
           padding-top: 1em;
           padding-left: 1em;
           font-family: $font-family-monospace;
+          font-size: 0.3em;
         }
       }
     }
 
     .card-text {
       a {
-        text-decoration: none;
         color: $color-text-base;
         font-family: $font-family-sans-serif;
-        font-size: $link-list-font-size-l;
+        font-size: var(--#{$prefix}body-font-size)-l;
+        text-decoration: none;
 
         &:hover {
-          text-decoration: underline;
           color: $link-color;
+          text-decoration: underline;
         }
       }
     }

package/src/scss/components/_callout.scss

@@ -1,33 +1,132 @@
+// Component: callout
+//
+// Description: Component styles for callout
+//
+
+// Variables
+//
+
+// Properties
+//
+
+.callout {
+  --#{$prefix}callout-background-color: var(--#{$prefix}page-background-color);
+  --#{$prefix}callout-border-color: var(--#{$prefix}color-border-secondary);
+  --#{$prefix}callout-border-size: 2px;
+  --#{$prefix}callout-font-family: var(--#{$prefix}font-sans);
+  --#{$prefix}callout-icon-color: var(--#{$prefix}icon-secondary);
+  --#{$prefix}callout-inner-spacing: var(--#{$prefix}spacing-m);
+  --#{$prefix}callout-outer-spacing: var(--#{$prefix}spacing-l);
+  --#{$prefix}callout-text-color: var(--#{$prefix}color-text-secondary);
+  --#{$prefix}callout-text-font-size: var(--#{$prefix}body-font-size);
+  --#{$prefix}callout-title-color: var(--#{$prefix}color-text-secondary);
+  --#{$prefix}callout-title-font-size: var(--#{$prefix}heading-6-font-size);
+  --#{$prefix}callout-title-font-weight: var(--#{$prefix}heading-font-weight-weak);
+}
+
+// Styles
+//
+/* stylelint-disable-next-line no-duplicate-selectors */
 .callout {
   position: relative;
   overflow: hidden;
+  background-color: var(--#{$prefix}callout-background-color);
+  color: var(--#{$prefix}callout-text-color);
 
   .callout-inner {
-    padding: 1.5rem;
-    border: 2px solid $color-border-secondary;
-    margin: 2rem 0;
+    padding: var(--#{$prefix}callout-inner-spacing);
+    border: var(--#{$prefix}callout-border-size) solid var(--#{$prefix}callout-border-color);
+    margin: var(--#{$prefix}callout-outer-spacing) 0;
   }
 
   &.callout-highlight {
     border: none;
-    border-left: 2px solid $color-border-secondary;
+    border-left: var(--#{$prefix}callout-border-size) solid var(--#{$prefix}callout-border-color);
     border-radius: 0;
-    padding: 0 1.5rem;
+    padding: 0 var(--#{$prefix}callout-inner-spacing);
   }
 
-  &.callout-more {
-    background: #f9f9f5;
+  p {
+    color: var(--#{$prefix}callout-text-color);
+    font-family: var(--#{$prefix}callout-font-family);
+    font-size: var(--#{$prefix}callout-text-font-size);
+
+    &.callout-big-text {
+      font-size: var(--it-body-font-size-l);
+    }
+
+    &:last-child {
+      margin: 0; // Remove margin from last paragraph, even if it's the only one
+    }
+  }
+
+  .callout-title {
+    display: flex;
+    align-items: center;
+    margin-bottom: var(--#{$prefix}spacing-s);
+    color: var(--#{$prefix}callout-title-color);
+    font-family: var(--#{$prefix}callout-font-family);
+    font-size: var(--#{$prefix}callout-title-font-size);
+    font-weight: var(--#{$prefix}callout-title-font-weight);
+    text-transform: uppercase;
+  }
+
+  .icon {
+    fill: var(--#{$prefix}callout-icon-color);
+    margin-right: var(--#{$prefix}icon-spacing);
+  }
+
+  // Color Variants
+  &-primary {
+    --#{$prefix}callout-border-color: var(--#{$prefix}color-border-primary);
+    --#{$prefix}callout-title-color: var(--#{$prefix}color-text-primary);
+    --#{$prefix}callout-icon-color: var(--#{$prefix}icon-primary);
+  }
+
+  &-success {
+    --#{$prefix}callout-border-color: var(--#{$prefix}color-border-success);
+    --#{$prefix}callout-title-color: var(--#{$prefix}color-text-success);
+    --#{$prefix}callout-icon-color: var(--#{$prefix}icon-success);
+  }
+
+  &-warning {
+    --#{$prefix}callout-border-color: var(--#{$prefix}color-border-warning);
+    --#{$prefix}callout-title-color: var(--#{$prefix}color-text-warning);
+    --#{$prefix}callout-icon-color: var(--#{$prefix}icon-warning);
+  }
+
+  &-danger {
+    --#{$prefix}callout-border-color: var(--#{$prefix}color-border-danger);
+    --#{$prefix}callout-title-color: var(--#{$prefix}color-text-danger);
+    --#{$prefix}callout-icon-color: var(--#{$prefix}icon-danger);
+  }
+
+  // Highlight Variant
+  &-highlight {
+    --#{$prefix}callout-border-radius: 0;
+    padding: 0 var(--#{$prefix}spacing-m);
     border: none;
-    border-radius: 0;
-    padding: 2.222rem;
+    border-left: var(--#{$prefix}callout-border-size) solid var(--#{$prefix}callout-border-color);
+
+    .callout-title {
+      margin-bottom: var(--#{$prefix}spacing-s);
+    }
+  }
+
+  // In Depth Variant
+  &-more {
     position: relative;
+    padding: var(--#{$prefix}spacing-l);
+    border: none;
+    border-radius: 0;
+    background: #f9f9f5;
 
     &:before,
     &:after {
-      content: '';
       position: absolute;
       top: 0;
       right: 0;
+      content: '';
       width: 0;
       height: 0;
       border-style: solid;
@@ -35,7 +134,7 @@
 
     &:before {
       border-width: 0 48px 48px 0;
-      border-color: transparent $white transparent transparent;
+      border-color: transparent var(--#{$prefix}page-background) transparent transparent;
     }
 
     &:after {
@@ -44,13 +143,12 @@
     }
 
     p {
+      color: var(--#{$prefix}color-text-secondary);
       font-size: 1rem;
       line-height: 1.5rem;
-      color: $color-text-secondary;
     }
 
     .callout-title {
-      display: flex;
       align-items: flex-start;
       margin-bottom: 2.222rem;
 
@@ -59,97 +157,13 @@
       }
 
       span {
-        border-bottom: 2px solid $body-color;
-        padding-bottom: 0.1rem;
         display: inline-block;
         margin-top: -0.111rem;
+        padding-bottom: 0.1rem;
       }
     }
   }
 
-  @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);
-      }
-
-      .callout-title {
-        color: $color-value;
-
-        .icon {
-          fill: $color-value;
-        }
-
-        span {
-          border-color: $color-value;
-        }
-      }
-
-      .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;
-          }
-        }
-      }
-
-      a {
-        color: $color-value;
-      }
-
-      .icon {
-        fill: $color-value;
-      }
-    }
-  }
-
-  .callout-title {
-    display: flex;
-    align-items: center;
-    margin-bottom: 1rem;
-    font-weight: 600;
-    text-transform: uppercase;
-    font-size: 1rem;
-    color: $color-text-secondary;
-    @include media-breakpoint-up(lg) {
-      font-size: 1.125rem;
-    }
-
-    .icon {
-      fill: $color-text-secondary;
-      margin-right: 0.5rem;
-    }
-  }
-
-  p {
-    font-family: $font-family-serif;
-    font-size: 1rem;
-    color: $color-text-secondary;
-    @include media-breakpoint-up(lg) {
-      font-size: 1.125rem;
-    }
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-
-    &.callout-big-text {
-      font-size: 1.125rem;
-    }
-  }
-
   .collapse-div {
     display: flex;
     flex-direction: column-reverse;
@@ -158,19 +172,19 @@
     .collapse-header {
       display: flex;
       justify-content: space-between;
-      border-top: 1px solid $gray-border-disabled;
-      padding: 1.333rem 0 0;
       margin-top: 0;
+      padding: var(--#{$prefix}spacing-m) 0 0;
+      border-top: 1px solid var(--#{$prefix}color-border-subtle);
 
       .callout-more-toggle {
-        padding: 0;
-        border: none;
-        width: auto;
-        font-weight: normal;
         display: flex;
         align-items: center;
-        color: $primary;
+        width: auto;
+        padding: 0;
+        border: none;
         background-color: transparent;
+        color: var(--#{$prefix}color-link);
+        font-weight: normal;
 
         &:hover,
         &:focus,
@@ -179,20 +193,20 @@
         }
 
         &:hover {
-          color: $link-hover-color;
+          color: var(--#{$prefix}color-link-hover);
 
           span {
-            border-color: $link-hover-color;
+            border-color: var(--#{$prefix}color-link-hover);
 
             &:before,
             &:after {
-              background: $link-hover-color;
+              background: var(--#{$prefix}color-link-hover);
             }
           }
         }
 
         &:active {
-          color: $primary;
+          color: var(--#{$prefix}color-link-active);
         }
 
         &:before,
@@ -202,33 +216,33 @@
 
         span {
           position: relative;
-          height: 15px;
+          display: inline-block;
           width: 15px;
-          margin-left: 0.444rem;
+          height: 15px;
           margin-top: 0.111rem;
-          border: 1px solid $primary;
+          margin-left: 0.444rem;
+          border: 1px solid var(--#{$prefix}color-text-primary);
           border-radius: 50%;
-          display: inline-block;
 
           &:before,
           &:after {
-            content: '';
             position: absolute;
-            background: $primary;
+            content: '';
+            background: var(--#{$prefix}color-background-primary);
           }
 
           &:before {
-            width: 9px;
-            height: 1px;
             top: 6px;
             left: 2px;
+            width: 9px;
+            height: 1px;
           }
 
           &:after {
-            height: 9px;
-            width: 1px;
             top: 0;
             left: 6px;
+            width: 1px;
+            height: 9px;
             transform: translateY(2px);
             transition: transform 0.2s;
           }
@@ -254,9 +268,3 @@
     }
   }
 }
-
-@media (min-width: 768px) {
-  .callout .callout-more p {
-    font-size: 0.775rem;
-  }
-}

package/src/scss/components/_card-old.scss

@@ -1,3 +1,17 @@
+// Component: card old
+//
+// Description: Component styles for card old
+//
+
+// Variables
+//
+
+// Properties
+//
+
+// Styles
+//
+
 @use 'sass:math';
 
 // Keep till next major? (.card is deprecated)