nw-style-guide 17.0.1 → 17.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nw-style-guide",
-  "version": "17.0.1",
+  "version": "17.0.2",
   "license": "MIT",
   "author": {
     "email": "garethdn@gmail.com",

package/sass/src/_badges.scss

@@ -1,3 +1,4 @@
+@use './variables';
 //
 // Badges
 // --------------------------------------------------
@@ -8,15 +9,15 @@
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
-  font-size: $font-size-small;
-  font-weight: $badge-font-weight;
-  line-height: $badge-line-height;
-  color: $badge-color;
+  font-size: variables.$font-size-small;
+  font-weight: variables.$badge-font-weight;
+  line-height: variables.$badge-line-height;
+  color: variables.$badge-color;
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
-  background-color: $badge-bg;
-  border-radius: $badge-border-radius;
+  background-color: variables.$badge-bg;
+  border-radius: variables.$badge-border-radius;
 
   // Empty badges collapse automatically (not available in IE8)
   &:empty {
@@ -40,8 +41,8 @@
   // Account for badges in navs
   .list-group-item.active > &,
   .nav-pills > .active > a > & {
-    color: $badge-active-color;
-    background-color: $badge-active-bg;
+    color: variables.$badge-active-color;
+    background-color: variables.$badge-active-bg;
   }
 
   .list-group-item > & {
@@ -61,7 +62,7 @@
 a.badge {
   &:hover,
   &:focus {
-    color: $badge-link-hover-color;
+    color: variables.$badge-link-hover-color;
     text-decoration: none;
     cursor: pointer;
   }

package/sass/src/_button-groups.scss

@@ -1,3 +1,5 @@
+@use './mixins/border-radius' as br;
+@use './variables';
 //
 // Button groups
 // --------------------------------------------------
@@ -38,13 +40,13 @@
 .btn-group > .btn:first-child {
   margin-left: 0;
   &:not(:last-child):not(.dropdown-toggle) {
-    @include border-right-radius(0);
+    @include br.border-right-radius(0);
   }
 }
 // Need .dropdown-toggle since :last-child doesn't apply, given that a .dropdown-menu is used immediately after it
 .btn-group > .btn:last-child:not(:first-child),
 .btn-group > .dropdown-toggle:not(:first-child) {
-  @include border-left-radius(0);
+  @include br.border-left-radius(0);
 }
 
 // Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group)
@@ -57,11 +59,11 @@
 .btn-group > .btn-group:first-child:not(:last-child) {
   > .btn:last-child,
   > .dropdown-toggle {
-    @include border-right-radius(0);
+    @include br.border-right-radius(0);
   }
 }
 .btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
-  @include border-left-radius(0);
+  @include br.border-left-radius(0);
 }
 
 // On active and open, don't show outline
@@ -101,12 +103,12 @@
 }
 // Carets in other button sizes
 .btn-lg .caret {
-  border-width: $caret-width-large $caret-width-large 0;
+  border-width: variables.$caret-width-large variables.$caret-width-large 0;
   border-bottom-width: 0;
 }
 // Upside down carets for .dropup
 .dropup .btn-lg .caret {
-  border-width: 0 $caret-width-large $caret-width-large;
+  border-width: 0 variables.$caret-width-large variables.$caret-width-large;
 }
 
 .btn-group-responsive {
@@ -124,15 +126,15 @@
 	}
 }
 .btn-group-responsive-xl {
-  height: ceil($font-size-xl * $line-height-xl) + ($padding-xl-vertical * 2) + 2;
+  height: ceil(variables.$font-size-xl * variables.$line-height-xl) + (variables.$padding-xl-vertical * 2) + 2;
 }
 .btn-group-responsive-lg {
-  height: ceil($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2;
+  height: ceil(variables.$font-size-large * variables.$line-height-large) + (variables.$padding-large-vertical * 2) + 2;
 }
 .btn-group-responsive-md {
-  height: ceil(14px * $line-height-base) + ($padding-base-vertical * 2) + 2;
+  height: ceil(14px * variables.$line-height-base) + (variables.$padding-base-vertical * 2) + 2;
 }
 .btn-group-responsive-sm {
-  height: ceil($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2;
+  height: ceil(variables.$font-size-small * variables.$line-height-small) + (variables.$padding-small-vertical * 2) + 2;
 }
 

package/sass/src/_buttons.scss

@@ -1,14 +1,17 @@
+@use './variables';
+@use './mixins/buttons' as buttons;
+
 .btn {
     display: inline-block;
     margin-bottom: 0; // For input.btn
-    font-weight: $btn-font-weight;
+    font-weight: variables.$btn-font-weight;
     text-align: center;
     vertical-align: middle;
     touch-action: manipulation;
     cursor: pointer;
     background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
     white-space: nowrap;
-    @include button-size($padding-base-vertical, $padding-base-horizontal, 14px, $line-height-base, $btn-border-radius-base);
+    @include buttons.button-size(variables.$padding-base-vertical, variables.$padding-base-horizontal, 14px, variables.$line-height-base, variables.$btn-border-radius-base);
     user-select: none;
     border-style: solid;
     border-width: 1px;
@@ -34,7 +37,7 @@
     &.disabled,
     &[disabled],
     fieldset[disabled] & {
-        cursor: $cursor-disabled;
+        cursor: variables.$cursor-disabled;
         opacity: .50;
         box-shadow: none;
     }
@@ -55,69 +58,69 @@ a.btn {
 // Alternate buttons
 // --------------------------------------------------
 .btn-primary {
-    @include button-variant(
+    @include buttons.button-variant(
         #ffffff,
         #ffffff,
-        get-color('primary'),
-        get-color('primary', light));
+        variables.get-color('primary'),
+        variables.get-color('primary', light));
 }
 .btn-secondary {
-    @include button-variant(
-        $text-color,
-        $text-color,
-        rgba($text-color, 0.15),
-        rgba($text-color, 0.20));
+    @include buttons.button-variant(
+        variables.$text-color,
+        variables.$text-color,
+        rgba(variables.$text-color, 0.15),
+        rgba(variables.$text-color, 0.20));
 }
 .btn-secondary-inverse {
-    @include button-variant(
-        get-color("gray", base),
-        get-color("gray", base),
-        get-color("gray", 6x-light),
-        get-color("gray", 5x-light));
+    @include buttons.button-variant(
+        variables.get-color("gray", base),
+        variables.get-color("gray", base),
+        variables.get-color("gray", 6x-light),
+        variables.get-color("gray", 5x-light));
 }
 .btn-danger {
-    @include button-variant(
+    @include buttons.button-variant(
         #ffffff,
         #ffffff,
-        get-color('tertiary'),
-        get-color('tertiary', light));
+        variables.get-color('tertiary'),
+        variables.get-color('tertiary', light));
 }
 .btn-alt {
-    @include button-variant(
-        $text-color,
-        get-color('primary', 2x-light),
+    @include buttons.button-variant(
+        variables.$text-color,
+        variables.get-color('primary', 2x-light),
         transparent,
         transparent,
-        $text-color,
-        get-color('primary', 2x-light));
+        variables.$text-color,
+        variables.get-color('primary', 2x-light));
 }
 .btn-ghost {
-    @include button-variant(
-        $text-color-secondary,
-        $text-color,
+    @include buttons.button-variant(
+        variables.$text-color-secondary,
+        variables.$text-color,
         transparent,
-        rgba($text-color, 0.1));
+        rgba(variables.$text-color, 0.1));
 }
 .btn-ghost-alt {
-    @include button-variant(
-        $text-color-secondary,
-        get-color('primary', 2x-light),
+    @include buttons.button-variant(
+        variables.$text-color-secondary,
+        variables.get-color('primary', 2x-light),
         transparent,
         transparent);
 }
 .btn-activate {
-    @include button-variant(
-        $text-color,
-        $text-color,
-        get-color("secondary", base),
-        get-color("secondary", light));
+    @include buttons.button-variant(
+        variables.$text-color,
+        variables.$text-color,
+        variables.get-color("secondary", base),
+        variables.get-color("secondary", light));
 }
 // applying sizes to this element will not do anything
 // as currently this button has a fixed size
 .btn-carousel {
-    @include button-variant(
-        $text-color-secondary,
-        get-color('primary', light),
+    @include buttons.button-variant(
+        variables.$text-color-secondary,
+        variables.get-color('primary', light),
         transparent,
         transparent);
 
@@ -152,58 +155,58 @@ a.btn {
 // --------------------------------------------------
 
 .btn-xl {
-    @include button-size($padding-xl-vertical, $padding-xl-horizontal, $font-size-xl, $line-height-xl, $btn-border-radius-xl);
+    @include buttons.button-size(variables.$padding-xl-vertical, variables.$padding-xl-horizontal, variables.$font-size-xl, variables.$line-height-xl, variables.$btn-border-radius-xl);
 
     &.btn-round {
-        @include button-round($font-size-xl, $line-height-xl, $padding-xl-vertical);
+        @include buttons.button-round(variables.$font-size-xl, variables.$line-height-xl, variables.$padding-xl-vertical);
     }
 
     &.btn-close {
-        @include button-close($font-size-xl, $line-height-xl, $padding-xl-vertical)
+        @include buttons.button-close(variables.$font-size-xl, variables.$line-height-xl, variables.$padding-xl-vertical)
     }
 }
 .btn-lg {
-    @include button-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $btn-border-radius-large);
+    @include buttons.button-size(variables.$padding-large-vertical, variables.$padding-large-horizontal, variables.$font-size-large, variables.$line-height-large, variables.$btn-border-radius-large);
 
     &.btn-round {
-        @include button-round($font-size-large, $line-height-large, $padding-large-vertical);
+        @include buttons.button-round(variables.$font-size-large, variables.$line-height-large, variables.$padding-large-vertical);
     }
 
     &.btn-close {
-        @include button-close($font-size-large, $line-height-large, $padding-large-vertical)
+        @include buttons.button-close(variables.$font-size-large, variables.$line-height-large, variables.$padding-large-vertical)
     }
 }
 .btn-md {
-    @include button-size($padding-base-vertical, $padding-base-horizontal, 14px, $line-height-base, $btn-border-radius-base);
+    @include buttons.button-size(variables.$padding-base-vertical, variables.$padding-base-horizontal, 14px, variables.$line-height-base, variables.$btn-border-radius-base);
 
     &.btn-round {
-        @include button-round(14px, $line-height-base, $padding-base-vertical);
+        @include buttons.button-round(14px, variables.$line-height-base, variables.$padding-base-vertical);
     }
 
     &.btn-close {
-        @include button-close(14px, $line-height-base, $padding-base-vertical)
+        @include buttons.button-close(14px, variables.$line-height-base, variables.$padding-base-vertical)
     }
 }
 .btn-sm {
-    @include button-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $btn-border-radius-small);
+    @include buttons.button-size(variables.$padding-small-vertical, variables.$padding-small-horizontal, variables.$font-size-small, variables.$line-height-small, variables.$btn-border-radius-small);
 
     &.btn-round {
-        @include button-round($font-size-small, $line-height-small, $padding-small-vertical);
+        @include buttons.button-round(variables.$font-size-small, variables.$line-height-small, variables.$padding-small-vertical);
     }
 
     &.btn-close {
-        @include button-close($font-size-small, $line-height-small, $padding-small-vertical)
+        @include buttons.button-close(variables.$font-size-small, variables.$line-height-small, variables.$padding-small-vertical)
     }
 }
 .btn-xs {
-    @include button-size(0, 7px, 12px, 1.333333333333, 9px);
+    @include buttons.button-size(0, 7px, 12px, 1.333333333333, 9px);
 
     &.btn-round {
-        @include button-round(12px, 1.333333333333, 0);
+        @include buttons.button-round(12px, 1.333333333333, 0);
     }
 
     &.btn-close {
-        @include button-close(12px, 1.333333333333, 0)
+        @include buttons.button-close(12px, 1.333333333333, 0)
     }
 }
 .btn-slim {

package/sass/src/_close.scss

@@ -1,3 +1,4 @@
+  @use './buttons';
   // todo: This is to be removed in the future
 
   // Additional properties for button version	

package/sass/src/_code.scss

@@ -1,4 +1,6 @@
 @use "sass:math";
+@use "variables";
+
 //
 // Code (inline and block)
 // --------------------------------------------------
@@ -9,25 +11,25 @@ code,
 kbd,
 pre,
 samp {
-  font-family: $font-family-monospace;
+  font-family: variables.$font-family-monospace;
 }
 
 // Inline code
 code {
   padding: 2px 4px;
   font-size: 90%;
-  color: $code-color;
-  background-color: $code-bg;
-  border-radius: $border-radius-base;
+  color: variables.$code-color;
+  background-color: variables.$code-bg;
+  border-radius: variables.$border-radius-base;
 }
 
 // User input typically entered via keyboard
 kbd {
   padding: 2px 4px;
   font-size: 90%;
-  color: $kbd-color;
-  background-color: $kbd-bg;
-  border-radius: $border-radius-small;
+  color: variables.$kbd-color;
+  background-color: variables.$kbd-bg;
+  border-radius: variables.$border-radius-small;
   box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25);
 
   kbd {
@@ -41,16 +43,16 @@ kbd {
 // Blocks of code
 pre {
   display: block;
-  padding: math.div(($line-height-computed - 1), 2);
-  margin: 0 0 math.div($line-height-computed, 2);
-  font-size: ($font-size-base - 1); // 14px to 13px
-  line-height: $line-height-base;
-  color: $pre-color;
+  padding: math.div((variables.$line-height-computed - 1), 2);
+  margin: 0 0 math.div(variables.$line-height-computed, 2);
+  font-size: (variables.$font-size-base - 1); // 14px to 13px
+  line-height: variables.$line-height-base;
+  color: variables.$pre-color;
   word-break: break-all;
   word-wrap: break-word;
-  background-color: $pre-bg;
-  border: 1px solid $pre-border-color;
-  border-radius: $border-radius-base;
+  background-color: variables.$pre-bg;
+  border: 1px solid variables.$pre-border-color;
+  border-radius: variables.$border-radius-base;
 
   // Account for some code outputs that place code tags in pre tags
   code {
@@ -65,6 +67,6 @@ pre {
 
 // Enable scrollable blocks of code
 .pre-scrollable {
-  max-height: $pre-scrollable-max-height;
+  max-height: variables.$pre-scrollable-max-height;
   overflow-y: scroll;
 }

package/sass/src/_dropdowns.scss

@@ -1,3 +1,6 @@
+@use "./variables";
+@use "./mixins/nav-divider";
+@use "./mixins/dropdowns";
 //
 // Dropdown menus
 // --------------------------------------------------
@@ -10,9 +13,9 @@
     margin-top: -1px;
     margin-left: 2px;
     vertical-align: middle;
-    border-top:   $caret-width-base dashed;
-    border-right: $caret-width-base solid transparent;
-    border-left:  $caret-width-base solid transparent;
+    border-top:   variables.$caret-width-base dashed;
+    border-right: variables.$caret-width-base solid transparent;
+    border-left:  variables.$caret-width-base solid transparent;
 }
 
 // The dropdown wrapper (div)
@@ -31,7 +34,7 @@
     position: absolute;
     top: 100%;
     left: 0;
-    z-index: $zindex-dropdown;
+    z-index: variables.$zindex-dropdown;
     display: none; // none by default, but block on "open" of the menu
     float: left;
     min-width: 160px;
@@ -40,15 +43,15 @@
     list-style: none;
     font-size: 14px;
     text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
-    background-color: $dropdown-bg;
-    border: 1px solid $dropdown-border;
-    border-radius: $border-radius-base;
+    background-color: variables.$dropdown-bg;
+    border: 1px solid variables.$dropdown-border;
+    border-radius: variables.$border-radius-base;
     box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);
     background-clip: padding-box;
 
     // // Dividers (basically an hr) within the dropdown
     .divider {
-        @include nav-divider($dropdown-divider-bg);
+        @include nav-divider.nav-divider(variables.$dropdown-divider-bg);
     }
 
     &.dropdown-menu-arrow {
@@ -64,12 +67,12 @@
             pointer-events: none;
         }
         &:after {
-            border-bottom-color: $dropdown-bg;
+            border-bottom-color: variables.$dropdown-bg;
             border-width: 7px;
             margin-left: -7px;
         }
         &:before {
-            border-bottom-color: $dropdown-border;
+            border-bottom-color: variables.$dropdown-border;
             border-width: 8px;
             margin-left: -8px;
         }
@@ -133,7 +136,7 @@
 .dropdown-submenu {
     > li > a {
         // Links within the dropdown menu
-        @include dropdown-menu-link;
+        @include dropdowns.dropdown-menu-link;
     }
 }
 
@@ -141,7 +144,7 @@
 .dropdown-menu,
 .dropdown-submenu {
     > .active > a {
-        @include dropdown-menu-link-active;
+        @include dropdowns.dropdown-menu-link-active;
     }
 }
 
@@ -153,7 +156,7 @@
     &,
     &:hover,
     &:focus {
-        @include dropdown-menu-link-disabled;
+        @include dropdowns.dropdown-menu-link-disabled;
     }
 }
 
@@ -200,9 +203,9 @@
     display: block;
     padding: 3px 16px;
     padding-top: 8px;
-    font-size: $font-size-base;
-    line-height: $line-height-base;
-    color: $dropdown-header-color;
+    font-size: variables.$font-size-base;
+    line-height: variables.$line-height-base;
+    color: variables.$dropdown-header-color;
     white-space: nowrap; // as with > li > a
     text-transform: uppercase;
 }
@@ -214,7 +217,7 @@
     right: 0;
     bottom: 0;
     top: 0;
-    z-index: ($zindex-dropdown - 10);
+    z-index: (variables.$zindex-dropdown - 10);
     display: none;
 }
 
@@ -222,7 +225,7 @@
     // Reverse the caret
     .caret {
         border-top: 0;
-        border-bottom: $caret-width-base dashed;
+        border-bottom: variables.$caret-width-base dashed;
         content: "";
     }
     // Different positioning for bottom up menu
@@ -246,12 +249,12 @@
 }
 
 .dropdown-menu-inverse {
-    $dropdown-inverse-link-color: $level1;
-    $dropdown-inverese-link-active-bg: get-color("primary", 3x-light);
+    $dropdown-inverse-link-color: variables.$level1;
+    $dropdown-inverese-link-active-bg: variables.get-color("primary", 3x-light);
 
     background-color: #ffffff;
     .dropdown-header {
-        color: get-color("gray", x-light);
+        color: variables.get-color("gray", x-light);
     }
     > li > a {
         color: $dropdown-inverse-link-color;
@@ -280,7 +283,7 @@
         }
     }
     .divider {
-        background: rgba($level0, 0.4);
+        background: rgba(variables.$level0, 0.4);
     }
 }
 // Custom popover styling for dropdowns appended to body

package/sass/src/_feature-alerts.scss

@@ -1,3 +1,5 @@
+@use './variables';
+
 .feature-alert .btn-primary{
     margin-top: 16px;
     width: 127px;
@@ -9,7 +11,7 @@
     width: $hotspot-size;
     height: $hotspot-size;
     padding: 6px;
-    border: 2px solid get-color("tertiary", base);
+    border: 2px solid variables.get-color("tertiary", base);
     border-radius: 50%;
     
     animation-duration: 1s;
@@ -24,7 +26,7 @@
         height: 100%;
         display: block;
         border-radius: 50%;
-        background: get-color("tertiary", base);
+        background: variables.get-color("tertiary", base);
     }
 
     &,

package/sass/src/_fonts.scss

@@ -1,24 +1,26 @@
+@use "./variables";
+
 // Regular / default
 @font-face {
     font-family: 'ProximaNova';
-    src: url('#{$nw-font-path}/proxima-nova-regular-webfont.woff2') format('woff2'),
-         url('#{$nw-font-path}/proxima-nova-regular-webfont.woff') format('woff');
+    src: url('#{variables.$nw-font-path}/proxima-nova-regular-webfont.woff2') format('woff2'),
+         url('#{variables.$nw-font-path}/proxima-nova-regular-webfont.woff') format('woff');
     font-weight: normal;
     font-style: normal;
 }
 // Bold
 @font-face {
     font-family: 'ProximaNova';
-    src: url('#{$nw-font-path}/proxima-nova-bold-webfont.woff2') format('woff2'),
-         url('#{$nw-font-path}/proxima-nova-bold-webfont.woff') format('woff');
+    src: url('#{variables.$nw-font-path}/proxima-nova-bold-webfont.woff2') format('woff2'),
+         url('#{variables.$nw-font-path}/proxima-nova-bold-webfont.woff') format('woff');
     font-weight: bold;
     font-style: normal;
 }
 // Semibold
 @font-face {
     font-family: 'ProximaNova';
-    src: url('#{$nw-font-path}/proxima-nova-semibold-webfont.woff2') format('woff2'),
-         url('#{$nw-font-path}/proxima-nova-semibold-webfont.woff') format('woff');
+    src: url('#{variables.$nw-font-path}/proxima-nova-semibold-webfont.woff2') format('woff2'),
+         url('#{variables.$nw-font-path}/proxima-nova-semibold-webfont.woff') format('woff');
     font-weight: 600;
     font-style: normal;
 }