bootstrap-italia 2.17.2 → 3.0.0-alpha.0

package/src/scss/components/_navscroll.scss

@@ -1,224 +1,226 @@
-//mobile
-.navbar {
-  &.it-navscroll-wrapper {
-    background: $navscroll-bg-color;
-
-    .it-back-button {
-      padding: $navscroll-backbutton-padding;
-      font-weight: $navscroll-backbutton-weight;
-      box-shadow: $navscroll-bottom-box-shadow;
-      text-decoration: none;
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      background: $navscroll-bg-color;
-      z-index: 10;
-      visibility: hidden;
-      opacity: 0;
+// Component: navscroll
+//
+// Description: Component styles for navscroll
+//
+
+// Variables
+//
+
+// Properties
+//
+
+.it-navscroll-wrapper {
+  --#{$prefix}navscroll-background: var(--#{$prefix}page-background); // Controls the background for the navscroll, using color tokens.
+  --#{$prefix}navscroll-backbutton-padding: var(--#{$prefix}spacing-xs); // Controls the backbutton padding for the navscroll, using spacing tokens.
+  --#{$prefix}navscroll-bottom-box-shadow: 0 0px 30px 5px rgba(0, 0, 0, 0.05); // Controls the bottom box shadow for the navscroll.
+  --#{$prefix}navscroll-backbutton-weight: var(--#{$prefix}font-weight-solid); // Controls the backbutton font weight for the navscroll, using font tokens.
+  --#{$prefix}navscroll-item-spacing: var(--#{$prefix}spacing-xs) var(--#{$prefix}spacing-m); // Controls the item spacing for the navscroll, using spacing tokens.
+  --#{$prefix}navscroll-item-font-size: var(--#{$prefix}label-font-size); // Controls the item font size for the navscroll, using font tokens.
+  --#{$prefix}navscroll-item-font-color: var(--#{$prefix}color-text-primary); // Controls the item font color for the navscroll, using color tokens.
+  --#{$prefix}navscroll-item-border-color: transparent; // Controls the item border color for the navscroll.
+  --#{$prefix}navscroll-heading-spacing-top: var(--#{$prefix}spacing-s); // Controls the heading spacing top for the navscroll, using spacing tokens.
+  --#{$prefix}navscroll-heading-spacing-bottom: var(--#{$prefix}spacing-xs); // Controls the heading spacing bottom for the navscroll, using spacing tokens.
+  --#{$prefix}navscroll-heading-spacing-x: var(--#{$prefix}spacing-m); // Controls the heading spacing x for the navscroll, using spacing tokens.
+  --#{$prefix}navscroll-heading-font-size: var(--#{$prefix}heading-6-font-size); // Controls the heading font size for the navscroll, using font tokens.
+  --#{$prefix}navscroll-heading-font-weight: var(--#{$prefix}heading-font-weight); // Controls the heading font weight for the navscroll, using font tokens.
+  --#{$prefix}navscroll-toggler-color: var(--#{$prefix}color-text-primary); // Controls the toggler color for the navscroll, using color tokens.
+  --#{$prefix}navscroll-divider-color: var(--#{$prefix}color-border-subtle); // Controls the divider color for the navscroll, using color tokens.
+}
+
+// Styles
+//
+
+.navbar.it-navscroll-wrapper {
+  background: var(--#{$prefix}navscroll-background);
+
+  .it-back-button {
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+    z-index: 10;
+    visibility: hidden;
+    padding: var(--#{$prefix}spacing-s) var(--#{$prefix}spacing-m);
+    border-radius: 0;
+    opacity: 0;
+    background: var(--#{$prefix}navscroll-background);
+    box-shadow: var(--#{$prefix}navscroll-bottom-box-shadow);
+    color: var(--#{$prefix}navscroll-toggler-color);
+    font-weight: var(--#{$prefix}navscroll-backbutton-weight);
+    text-decoration: none;
+    transition:
+      opacity 0.3s 0s,
+      visibility 0s 0.3s;
+
+    &.show {
+      visibility: visible;
+      opacity: 1;
       transition:
         opacity 0.3s 0s,
-        visibility 0s 0.3s;
-      i {
-        transform: scale(0.8);
-        transform-origin: center;
-        display: inline-block;
-        margin-right: $v-gap;
-      }
-      &.show {
-        transition:
-          opacity 0.3s 0s,
-          visibility 0s 0s;
-        visibility: visible;
-        opacity: 1;
-      }
-    }
-    .link-list-wrapper {
-      ul {
-        li {
-          a {
-            font-size: $navscroll-font-size;
-            font-weight: $navscroll-primary-font-weight;
-            line-height: $navscroll-font-size;
-            padding-top: $navscroll-links-padding;
-            padding-bottom: $navscroll-links-padding;
-            &.active {
-              border-left: $navscroll-selection-link-left;
-              span {
-                color: $primary;
-                text-decoration: none;
-              }
-            }
-          }
-          ul {
-            li {
-              padding-top: 0;
-              padding-bottom: 0;
-              a {
-                font-weight: 400;
-                &.active {
-                  font-weight: normal;
-                  border-left: none;
-                  span {
-                    text-decoration: underline;
-                    color: $navscroll-secondary-active-color;
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-    h3 {
-      font-weight: $sidebar-heading-font-weight;
-      margin-bottom: $sidebar-heading-bottom-margin;
-      font-size: $sidebar-heading-text-size;
-      margin-top: $sidebar-heading-margin-top;
-      letter-spacing: $sidebar-heading-letter-spacing;
-      text-transform: uppercase;
-      padding-left: $v-gap * 3;
-      padding-right: $v-gap * 3;
+        visibility 0s 0s;
     }
-    .custom-navbar-toggler {
-      display: flex;
-      color: $navscroll-toggler-color;
-      align-items: center;
-      font-weight: $navscroll-button-text-weight;
-      cursor: pointer;
-      span.it-list {
-        color: $navscroll-toggler-color;
-        margin-right: $v-gap;
-      }
-    }
-    .custom-navbar-progressbar {
-      position: absolute;
-      left: 0;
-      right: 0;
-      bottom: 0;
+
+    i {
+      display: inline-block;
+      margin-right: var(--#{$prefix}spacing-xxs);
+      transform: scale(0.8);
+      transform-origin: center;
     }
-    .menu-wrapper {
-      padding: $v-gap * 10 0 $v-gap * 3;
-      right: 0;
+  }
+
+  .link-list-wrapper ul li span {
+    font-size: var(--#{$prefix}navscroll-item-font-size);
+  }
+
+  .link-list-wrapper ul li a {
+    padding: var(--#{$prefix}navscroll-item-spacing);
+    border-left: var(--#{$prefix}border-thick) solid var(--#{$prefix}navscroll-item-border-color);
+    color: var(--#{$prefix}navscroll-item-font-color);
+  }
+
+  .link-list-wrapper ul li a.active {
+    --#{$prefix}navscroll-item-border-color: var(--#{$prefix}color-border-primary);
+    --#{$prefix}navscroll-item-font-color: var(--#{$prefix}color-link-active);
+  }
+
+  .link-list-wrapper ul li ul li a {
+    font-weight: var(--#{$prefix}font-weight-base);
+  }
+
+  .link-list-wrapper ul li ul li a.active {
+    --#{$prefix}navscroll-item-border-color: transparent;
+    text-decoration: underline;
+  }
+
+  // Navscroll Heading
+  h3 {
+    margin-top: var(--#{$prefix}navscroll-heading-spacing-top);
+    margin-bottom: var(--#{$prefix}navscroll-heading-spacing-bottom);
+    padding-right: var(--#{$prefix}navscroll-heading-spacing-x);
+    padding-left: var(--#{$prefix}navscroll-heading-spacing-x);
+    color: var(--#{$prefix}navscroll-heading-color);
+    font-size: var(--#{$prefix}navscroll-heading-font-size);
+    font-weight: var(--#{$prefix}navscroll-heading-font-weight);
+    text-transform: uppercase;
+  }
+
+  // Menu Wrapper
+  .menu-wrapper {
+    z-index: 5;
+    @include media-breakpoint-down(md) {
+      padding-top: 56px; // to avoid overlap with navscroll toggler - value must match navscroll toggler height
     }
+    background: var(--#{$prefix}navscroll-background);
   }
-  // bottom position
-  &.it-bottom-navscroll {
-    box-shadow: $navscroll-bottom-box-shadow;
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    top: auto;
-    z-index: 99999;
+
+  // Navscroll Toggler
+  .custom-navbar-toggler {
+    display: flex;
+    align-items: center;
+    margin-top: 0;
+    padding: var(--#{$prefix}spacing-s) var(--#{$prefix}spacing-m);
+    color: var(--#{$prefix}navscroll-toggler-color);
+    font-weight: var(--#{$prefix}font-weight-solid);
+    cursor: pointer;
   }
-  // top position
-  &.it-top-navscroll {
-    box-shadow: $navscroll-top-box-shadow;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: auto;
-    z-index: 8;
+
+  .custom-navbar-toggler span.it-list {
+    margin-right: var(--#{$prefix}spacing-xxs);
+    color: var(--#{$prefix}navscroll-toggler-color);
   }
 }
-//Tablet horizontal / small desktop
-@include media-breakpoint-up(lg) {
-  .navbar {
-    &.it-navscroll-wrapper {
-      background: $navscroll-bg-color-desk;
-      .it-back-button {
-        display: none !important;
-      }
-      .custom-navbar-progressbar {
-        display: none !important;
-      }
-      .link-list-wrapper {
-        ul {
-          li {
-            a {
-              font-size: $navscroll-font-size;
-              font-weight: $navscroll-primary-font-weight;
-              line-height: $navscroll-font-size;
-              padding-top: $navscroll-links-padding;
-              padding-bottom: $navscroll-links-padding;
-              &.active {
-                border-left: $navscroll-selection-link-left;
-                span {
-                  color: $primary;
-                  text-decoration: none;
-                }
-              }
-            }
-            ul {
-              li {
-                padding-top: 0;
-                padding-bottom: 0;
-                a {
-                  font-weight: 400;
-                  &.active {
-                    font-weight: normal;
-                    border-left: none;
-                    span {
-                      text-decoration: underline;
-                      color: $navscroll-secondary-active-color;
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-      h3 {
-        font-weight: $sidebar-heading-font-weight;
-        margin-bottom: $sidebar-heading-bottom-margin;
-        font-size: $sidebar-heading-text-size;
-        margin-top: $sidebar-heading-margin-top;
-        letter-spacing: $sidebar-heading-letter-spacing;
-        text-transform: uppercase;
-        padding-left: $v-gap * 3;
-        padding-right: $v-gap * 3;
-      }
-      .custom-navbar-toggler {
-        display: none;
-      }
-      .menu-wrapper {
-        padding: $v-gap * 2 0 $v-gap * 3;
-        background: $navscroll-bg-color-desk;
-      }
+
+.navbar.it-bottom-navscroll,
+.navbar.it-top-navscroll {
+  position: fixed;
+  right: 0;
+  left: 0;
+  box-shadow: var(--#{$prefix}navscroll-bottom-box-shadow);
+}
+
+.navbar.it-bottom-navscroll {
+  bottom: 0;
+  z-index: 9999;
+}
+
+.navbar.it-top-navscroll {
+  top: 0;
+  z-index: 8;
+}
+
+.navbar.it-left-side {
+  border-left: 1px solid var(--#{$prefix}navscroll-divider-color);
+}
+
+.navbar.it-right-side {
+  border-right: 1px solid var(--#{$prefix}navscroll-divider-color);
+}
+
+// Theme Dark Mobile
+@include media-breakpoint-down(lg) {
+  .it-navscroll-wrapper.theme-dark-mobile {
+    --#{$prefix}navscroll-background: var(--#{$prefix}color-background-secondary);
+    --#{$prefix}navscroll-heading-color: var(--#{$prefix}color-text-inverse);
+    --#{$prefix}navscroll-toggler-color: var(--#{$prefix}color-text-inverse);
+
+    .link-list-wrapper ul li a,
+    .link-list-wrapper ul li a.active {
+      --#{$prefix}navscroll-item-font-color: var(--#{$prefix}color-text-inverse);
     }
-    // bottom position
-    &.it-bottom-navscroll {
-      box-shadow: none;
-      position: inherit;
-      z-index: 9;
-      &.affix-top {
-        position: sticky;
-        top: 0;
-        left: inherit;
-        right: inherit;
-      }
+
+    .link-list-wrapper ul li a.active {
+      --#{$prefix}navscroll-item-border-color: var(--#{$prefix}color-border-inverse);
     }
-    // top position
-    &.it-top-navscroll {
-      box-shadow: none;
-      position: inherit;
-      &.affix-top {
-        position: sticky;
-        top: 0;
-        left: inherit;
-        right: inherit;
-      }
+  }
+}
+
+// Theme Dark Desktop
+@include media-breakpoint-up(lg) {
+  .it-navscroll-wrapper.theme-dark-desk {
+    --#{$prefix}navscroll-background: var(--#{$prefix}color-background-secondary);
+    --#{$prefix}navscroll-heading-color: var(--#{$prefix}color-text-inverse);
+    --#{$prefix}navscroll-toggler-color: var(--#{$prefix}color-text-inverse);
+
+    .link-list-wrapper ul li a,
+    .link-list-wrapper ul li a.active {
+      --#{$prefix}navscroll-item-font-color: var(--#{$prefix}color-text-inverse);
     }
-    // left line
-    &.it-left-side {
-      border-left: 1px solid $navscroll-line-color;
+
+    .custom-navbar-toggler,
+    .custom-navbar-toggler span.it-list {
+      --#{$prefix}navscroll-toggler-color: var(--#{$prefix}color-text-inverse);
     }
-    // right line
-    &.it-right-side {
-      border-right: 1px solid $navscroll-line-color;
+
+    .link-list-wrapper ul li a.active {
+      --#{$prefix}navscroll-item-border-color: var(--#{$prefix}color-border-inverse);
     }
   }
 }
+
+// Desktop Only
+@include media-breakpoint-up(lg) {
+  .navbar.it-navscroll-wrapper .it-back-button,
+  .navbar.it-navscroll-wrapper .custom-navbar-progressbar,
+  .navbar.it-navscroll-wrapper .custom-navbar-toggler {
+    display: none !important;
+  }
+
+  .navbar.it-navscroll-wrapper .menu-wrapper {
+    display: block;
+    /* padding: var(--#{$prefix}spacing-s) 0 var(--#{$prefix}spacing-m); */
+    background: var(--#{$prefix}navscroll-background);
+  }
+
+  .navbar.it-bottom-navscroll,
+  .navbar.it-top-navscroll {
+    position: inherit;
+    z-index: 9;
+    box-shadow: none;
+  }
+
+  .navbar.it-bottom-navscroll.affix-top,
+  .navbar.it-top-navscroll.affix-top {
+    position: sticky;
+    top: 0;
+  }
+}

package/src/scss/components/_navscrolltheme.scss

@@ -1,3 +1,17 @@
+// Component: navscrolltheme
+//
+// Description: Component styles for navscrolltheme
+//
+
+// Variables
+//
+
+// Properties
+//
+
+// Styles
+//
+
 @media (max-width: #{map-get($grid-breakpoints, lg)}) {
   .navbar {
     &.it-navscroll-wrapper {

package/src/scss/components/_notifications.scss

@@ -1,3 +1,17 @@
+// Component: notifications
+//
+// Description: Component styles for notifications
+//
+
+// Variables
+//
+
+// Properties
+//
+
+// Styles
+//
+
 //mobile
 .notification {
   width: 100%;

package/src/scss/components/_offcanvas.scss

@@ -1,3 +1,17 @@
+// Component: offcanvas
+//
+// Description: Component styles for offcanvas
+//
+
+// Variables
+//
+
+// Properties
+//
+
+// Styles
+//
+
 // stylelint-disable function-disallowed-list
 
 %offcanvas-css-vars {

package/src/scss/components/_overlay-panel.scss

@@ -1,3 +1,17 @@
+// Component: overlay panel
+//
+// Description: Component styles for overlay panel
+//
+
+// Variables
+//
+
+// Properties
+//
+
+// Styles
+//
+
 //overlay wrapper
 .overlay-wrapper {
   position: relative;

package/src/scss/components/_page-scroll.scss

@@ -1,3 +1,17 @@
+// Component: page scroll
+//
+// Description: Component styles for page scroll
+//
+
+// Variables
+//
+
+// Properties
+//
+
+// Styles
+//
+
 .pagescroll-scroll-disabled {
   scroll-behavior: auto !important;
 }