bootstrap-italia 2.17.2 → 3.0.0-alpha.0

package/src/scss/components/_type.scss

@@ -1,145 +1,171 @@
+// Component: type
 //
-// Headings
+// Description: Component styles for type
 //
-.h1 {
-  @extend h1;
-}
 
-.h2 {
-  @extend h2;
+// Variables
+//
+
+// Properties
+//
+
+// Styles
+//
+
+//
+// Global typography elements
+
+body {
+  font-family: var(--#{$prefix}font-sans);
 }
 
-.h3 {
-  @extend h3;
+p,
+ul,
+ol,
+dl {
+  font-size: var(--#{$prefix}body-font-size);
+  line-height: var(--#{$prefix}body-line-height);
 }
 
-.h4 {
-  @extend h4;
+caption,
+figcaption {
+  font-size: var(--#{$prefix}caption-font-size);
+  line-height: var(--#{$prefix}caption-line-height);
 }
 
-.h5 {
-  @extend h5;
+b,
+strong {
+  font-weight: var(--#{$prefix}font-weight-strong);
 }
 
-.h6 {
-  @extend h6;
+mark,
+code {
+  padding: 0 var(--#{$prefix}spacing-3xs);
 }
 
-// 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;
-  }
+mark {
+  background-color: var(--#{$prefix}highlight-background);
 }
 
-//
-// Emphasis
-//
-.small {
-  @extend small;
+pre,
+code,
+kbd,
+samp {
+  border-radius: var(--#{$prefix}radius-smooth);
+  font-family: var(--#{$prefix}font-mono);
 }
 
-.mark {
-  @extend mark;
+ins,
+del {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: var(--#{$prefix}spacing-3xs) var(--#{$prefix}spacing-m);
+  font: var(--#{$prefix}body-font-size);
+  text-decoration: none;
 }
 
-//
-// Lists
-//
+ins {
+  background-color: var(--#{$prefix}ins-background);
+  text-decoration: none;
+}
 
-.list-unstyled {
-  @include list-unstyled();
+del {
+  background-color: var(--#{$prefix}del-background);
 }
 
-// Inline turns list items into inline-block
-.list-inline {
-  @include list-unstyled();
+del::before,
+ins::before {
+  position: absolute;
+  left: 0.5rem;
 }
-.list-inline-item {
-  display: inline-block;
 
-  &:not(:last-child) {
-    margin-right: $list-inline-padding;
-  }
+del::before {
+  content: '−';
 }
 
-//
-// Misc
-//
+ins::before {
+  content: '+';
+}
 
-// Blockquotes
-.blockquote {
-  margin-bottom: $blockquote-margin-y;
-  @include font-size($blockquote-font-size);
+kbd {
+  margin: 0 2px;
+  padding: 2px var(--#{$prefix}spacing-3xs);
+  border: var(--#{$prefix}border-base) solid var(--#{$prefix}color-border-subtle);
+  background-color: var(--#{$prefix}color-background-secondary-lighter);
+  box-shadow:
+    var(--#{$prefix}elevation-low),
+    0 2px 0 0 hsla(255, 0%, 100%, 0.7) inset;
+  color: var(--#{$prefix}color-text-secondary);
+  font-size: var(--#{$prefix}font-size-1);
+  font-weight: var(--#{$prefix}font-weight-solid);
+  white-space: nowrap;
 
-  > :last-child {
-    margin-bottom: 0;
+  kbd {
+    padding: 0;
+    font-size: var(--#{$prefix}code-font-size);
   }
 }
 
-// Headings
+small,
+.small {
+  font-size: var(--#{$prefix}caption-font-size);
+}
+
+.x-small {
+  font-size: var(--#{$prefix}font-size-1);
+}
 
 h1,
 .h1 {
-  font-size: 2.5rem;
-  line-height: 3rem;
-  letter-spacing: -1px;
-  @include media-breakpoint-up(sm) {
-    font-size: 3rem;
-    line-height: 3.5rem;
-  }
+  font-size: var(--#{$prefix}heading-1-font-size);
 }
 
 h2,
 .h2 {
-  font-size: 2rem;
-  line-height: 2.5rem;
-  @include media-breakpoint-up(sm) {
-    font-size: 2.5rem;
-    line-height: 3rem;
-  }
+  font-size: var(--#{$prefix}heading-2-font-size);
 }
 
 h3,
 .h3 {
-  font-size: 1.75rem;
-  line-height: 2rem;
-  @include media-breakpoint-up(sm) {
-    font-size: 2rem;
-    line-height: 2.5rem;
-  }
+  font-size: var(--#{$prefix}heading-3-font-size);
 }
 
 h4,
 .h4 {
-  font-size: 1.5rem;
-  line-height: 2rem;
-  @include media-breakpoint-up(sm) {
-    font-size: 1.75rem;
-    line-height: 2rem;
-  }
+  font-size: var(--#{$prefix}heading-4-font-size);
 }
 
 h5,
 .h5 {
-  font-size: 1.25rem;
-  line-height: 1.5rem;
-  @include media-breakpoint-up(sm) {
-    font-size: 1.5rem;
-    line-height: 2rem;
-  }
+  font-size: var(--#{$prefix}heading-5-font-size);
 }
 
 h6,
 .h6 {
-  font-size: 1rem;
-  line-height: 1.5rem;
-  @include media-breakpoint-up(sm) {
-    font-size: 1.125rem;
+  font-size: var(--#{$prefix}heading-6-font-size);
+}
+
+h1,
+.h1,
+h2,
+.h2,
+h3,
+.h3,
+h4,
+.h4,
+h5,
+.h5,
+h6,
+.h6 {
+  margin-top: 0;
+  margin-bottom: var(--#{$prefix}heading-spacing);
+  line-height: var(--#{$prefix}heading-line-height);
+
+  // Adds top spacing when two heading tags or classes are adiacent or follow a paragraph
+  :is(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) + &,
+  p + & {
+    padding-top: var(--#{$prefix}spacing-s); // Use the paragraph spacing variable when available
   }
 }
 
@@ -149,7 +175,7 @@ h3,
 .h1,
 .h2,
 .h3 {
-  font-weight: 700;
+  font-weight: var(--#{$prefix}heading-font-weight);
 }
 
 h4,
@@ -158,70 +184,80 @@ h6,
 .h4,
 .h5,
 .h6 {
-  font-weight: 600;
+  font-weight: var(--#{$prefix}heading-font-weight-weak);
 }
 
-// Display heading
-
+h1,
+.h1,
 .display-1 {
-  font-size: 3rem;
-  font-weight: 700;
+  letter-spacing: -1px; // Reduce letter spacing on first or display headings
+}
 
-  @include media-breakpoint-up(sm) {
-    font-size: 3.5rem;
-    line-height: 1.25;
-  }
+//
+// Font Family
+// Use !important to override the default font-family
+
+.font-serif {
+  font-family: var(--#{$prefix}font-serif) !important;
 }
 
-// Text elements
+.font-sans-serif {
+  font-family: var(--#{$prefix}font-sans) !important;
+}
 
-p,
-ul,
-ol,
-dl {
-  font-size: 1rem;
-  line-height: 1.5rem;
-  @include media-breakpoint-up(sm) {
-    font-size: 1.125rem;
-    line-height: 1.75rem;
-  }
+.font-monospace {
+  font-family: var(--#{$prefix}font-mono) !important;
+}
+
+//
+// Misc
+
+// Display heading
+.display-1 {
+  font-size: var(--#{$prefix}display-font-size);
+  font-weight: var(--#{$prefix}heading-font-weight);
+  line-height: var(--#{$prefix}heading-line-height);
 }
 
+// Lead
 .lead {
-  @include font-size($lead-font-size);
-  font-weight: $lead-font-weight;
-  font-size: 1.25rem;
-  line-height: 2rem;
-  @include media-breakpoint-up(sm) {
-    font-size: 1.5rem;
-  }
+  font-size: var(--#{$prefix}lead-font-size);
+  font-weight: var(--#{$prefix}lead-font-weight);
+  line-height: var(--#{$prefix}lead-line-height);
 }
 
 // Blockquote
-
 blockquote,
 .blockquote {
-  font-size: 1.125rem;
-  line-height: 1.5rem;
-  margin: 1.5rem 0;
-  margin-left: calc($spacer / 2);
-  border-left: 4px solid $analogue-2;
-  padding: calc($spacer / 4) $spacer;
+  margin: var(--#{$prefix}spacing-m) 0;
+  margin-left: var(--#{$prefix}spacin-inline-xs);
+  padding: var(--#{$prefix}spacing-s);
+  border-left: var(--#{$prefix}border-thick) solid var(--#{$prefix}border-color-secondary);
+  font-size: var(--#{$prefix}body-font-size);
+  line-height: var(--#{$prefix}body-line-height);
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+
   &.text-end {
-    margin-right: calc($spacer / 2);
-    border-right: 4px solid $analogue-2;
+    margin-right: var(--#{$prefix}spacin-inline-xs);
+    border-right: var(--#{$prefix}border-thick) solid var(--#{$prefix}border-color-secondary);
   }
+
   &.text-center,
   &.text-end,
   &.blockquote-simple {
     margin-left: 0;
-    border-left: none;
     border-right: none;
+    border-left: none;
   }
+
   &.text-center,
   &.blockquote-simple {
     padding: 0;
   }
+
   &.blockquote-simple {
     font-style: italic;
   }
@@ -229,79 +265,43 @@ blockquote,
   // Card version
   &.blockquote-card {
     margin-left: 0;
-    padding: 16px 40px 24px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    padding: var(--#{$prefix}spacing-m);
+    background-color: var(--#{$prefix}color-background-inverse);
+    box-shadow: var(--#{$prefix}elevation-low);
+
     .blockquote-footer {
       font-size: inherit;
       &:before {
         content: none;
       }
     }
+
     &.dark {
-      background-color: $primary;
       border-left: none;
-      color: $white;
-      padding: 40px;
+      background-color: var(--#{$prefix}color-background-primary);
+      color: var(--#{$prefix}color-text-inverse);
       .blockquote-footer {
-        color: $white;
+        color: var(--#{$prefix}color-text-inverse);
       }
     }
   }
 }
 
 .blockquote-footer {
-  margin-bottom: $blockquote-margin-y;
-  @include font-size($blockquote-footer-font-size);
+  margin-top: 0;
+  margin-bottom: var(--#{$prefix}spacing-s);
+  color: var(--#{$prefix}color-text-secondary);
+  font-size: var(--#{$prefix}label-font-size);
   &::before {
     content: '\2014\00A0'; // em dash, nbsp
   }
-  color: $blockquote-small-color;
-  margin-top: 0;
   .bg-dark & {
-    color: $blockquote-small-color-dark;
+    color: var(--#{$prefix}color-text-muted);
   }
 }
 
-// Global typography elements
-
-caption,
-figcaption {
-  font-size: 0.875rem;
-  line-height: 1rem;
-}
-
-b,
-strong {
-  font-weight: 700;
-}
-
-small,
-.small {
-  font-size: 0.875rem;
-}
-
-.x-small {
-  font-size: 0.75rem;
-}
-
-// Font Family
-
-.font-serif {
-  font-family: $font-family-serif !important;
-}
-
-.font-sans-serif {
-  font-family: $font-family-sans-serif !important;
-}
-
-.font-monospace {
-  font-family: $font-family-monospace !important;
-}
-
 // Abbreviations
-
 .initialism {
-  @include font-size($initialism-font-size);
+  font-size: var(--#{$prefix}label-font-size-s);
   text-transform: uppercase;
-  font-size: 90%;
 }

package/src/scss/components/_videoplayer.scss

@@ -1,18 +1,35 @@
+// Component: videoplayer
+//
+// Description: Component styles for videoplayer
+//
+
+// Variables
+//
+
+// Properties
+//
+
+// Styles
+//
+
 /* stylelint-disable */
 @import 'video.js/src/css/video-js';
 /* stylelint-enable */
 
 .vjs-theme-bootstrap-italia {
-  .vjs-big-play-button {
-    background-color: $primary;
-  }
+  --#{$prefix}videoplayer-button-background: var(--#{$prefix}color-background-primary);
+  --#{$prefix}videoplayer-control-background: var(--#{$prefix}color-background-primary);
+
+  .vjs-big-play-button,
   &:hover .vjs-big-play-button,
   &.vjs-big-play-button:focus {
-    background-color: $primary;
+    background-color: var(--#{$prefix}videoplayer-button-background);
   }
+
   .vjs-control-bar {
-    background-color: $primary;
+    background-color: var(--#{$prefix}videoplayer-control-background);
     font-size: 1rem;
+
     @include media-breakpoint-up(lg) {
       min-height: 48px;
     }
@@ -27,11 +44,14 @@
   display: flex;
   justify-content: center;
   border: none;
+
   .accordion-button {
     border: none;
   }
+
   .accordion-item {
     width: 100%;
+
     @include media-breakpoint-up(lg) {
       width: 75ch;
     }

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

@@ -1,21 +1,9 @@
-.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 {
   position: relative;
 }
 
 .autocomplete__hint {
-  color: #505a5f;
+  // color: #505a5f;
   position: absolute;
 }
 
@@ -23,11 +11,11 @@
   padding: 5px;
 }
 
-.autocomplete__input--focused {
-  outline: 3px solid #fd0;
-  outline-offset: 0;
-  box-shadow: inset 0 0 0 2px;
-}
+// .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. */
@@ -45,7 +33,7 @@
 }
 
 .autocomplete__menu {
-  background-color: #ffffff;
+  background-color: var(--#{$prefix}color-background-inverse);
   border: 2px solid #0b0c0c;
   border-top: 0;
   color: #0b0c0c;
@@ -54,7 +42,7 @@
   overflow-x: hidden;
   padding: 0;
   width: 100%;
-  width: calc(100% - 4px);
+  // width: calc(100% - 4px);
 }
 
 .autocomplete__menu--visible {
@@ -66,7 +54,7 @@
 }
 
 .autocomplete__menu--overlay {
-  box-shadow: rgba(0, 0, 0, 0.256863) 0px 2px 6px;
+  box-shadow: rgba(0, 0, 0, 0.256863) 0 2px 6px;
   left: 0;
   position: absolute;
   top: 100%;
@@ -144,25 +132,35 @@
 
 .autocomplete__wrapper {
   position: relative;
+
   .autocomplete__menu {
-    border: $autocomplete-border;
+    border: 1px solid var(--#{$prefix}color-border-subtle);
     border-top: none;
     width: 100%;
     position: absolute;
     top: 100%;
     z-index: 10;
-    box-shadow: $autocomplete-box-shadow;
+    box-shadow: var(--#{$prefix}elevation-low);
+
     .autocomplete__hint,
     .autocomplete__option {
-      padding: 12px 24px;
-      background-color: #fff;
+      padding: var(--#{$prefix}spacing-xs) var(--#{$prefix}spacing-m);
+      background-color: var(--#{$prefix}color-background-inverse);
       border: none;
+      font-size: 0.875rem;
+      font-weight: var(--#{$prefix}font-weight-solid);
+
       &:hover,
       &:focus {
-        color: $primary;
+        color: var(--#{$prefix}color-text-primary);
       }
+
+      &:hover {
+        background-color: var(--#{$prefix}color-background-primary-lighter);
+      }
+
       &:focus {
-        border: 2px solid $focus-outline-color;
+        border: 2px solid var(--#{$prefix}color-outline-focus);
       }
     }
   }