qpp-style 9.16.2 → 9.16.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qpp-style",
-  "version": "9.16.2",
+  "version": "9.16.5",
   "description": "Shared style guide across the QPP program.",
   "main": "dist/index.js",
   "homepage": "https://cmsgov.github.io/qpp-style",

package/styles/components/_text.scss

@@ -1,68 +1,68 @@
 /* Base Styles */
 
 html {
-	font-size: $font-size-base;
+  font-size: $font-size-base;
 }
 
 body {
-	color: $text-color;
-	font-family: $font-family-base;
-	font-size: $font-size-base * 1.125;
-	font-weight: 400;
-	line-height: 1.7;
+  color: $text-color;
+  font-family: $font-family-base;
+  font-size: $font-size-base * 1.125;
+  font-weight: 400;
+  line-height: 1.7;
 }
 
 ::-moz-selection {
-	background: $text-selection-color;
+  background: $text-selection-color;
 }
 
 ::selection {
-	background: $text-selection-color;
+  background: $text-selection-color;
 }
 
 p {
-	margin-bottom: 30px;
-
-	&.lead {
-		color: $lead-color;
-		font-size: 1.5rem;
-		font-weight: 400;
-	}
-
-	& ~ ul,
-	& ~ ol {
-		margin-bottom: 30px;
-		margin-top: -25px;
-	}
+  margin-bottom: 30px;
+
+  &.lead {
+    color: $lead-color;
+    font-size: 1.5rem;
+    font-weight: 400;
+  }
+
+  & ~ ul,
+  & ~ ol {
+    margin-bottom: 30px;
+    margin-top: -25px;
+  }
 }
 
 a {
-	color: $link-color;
-	text-decoration: $link-decoration;
+  color: $link-color;
+  text-decoration: $link-decoration;
 
-	&:hover {
-		color: $link-hover-color;
-		text-decoration: $link-hover-decoration;
-	}
+  &:hover {
+    color: $link-hover-color;
+    text-decoration: $link-hover-decoration;
+  }
 }
 
 strong {
-	font-weight: 500;
+  font-weight: 500;
 }
 
 small {
-	font-size: 1rem;
-	line-height: 1.5;
+  font-size: 1rem;
+  line-height: 1.5;
 }
 
 hr {
-	margin-bottom: 35px;
+  margin-bottom: 35px;
 }
 
 #panel {
-	section:first-of-type {
-		margin-top: 2rem;
-	}
+  section:first-of-type {
+    margin-top: 2rem;
+  }
 }
 
 /* Header Styles */
@@ -70,81 +70,81 @@ hr {
 $default-font-size: 16;
 
 h1 {
-	.subtitle {
-		font-size: 18px; // Fallback in pixels
-		font-size: (18 / $default-font-size) + rem;
-		font-weight: $rubik-regular;
-
-		@include breakpoint(xs) {
-			font-size: 16px; // Fallback in pixels
-			font-size: (16 / $default-font-size) + rem;
-		}
-	}
+  .subtitle {
+    font-size: 18px; // Fallback in pixels
+    font-size: calc(18 / $default-font-size) + rem;
+    font-weight: $rubik-regular;
+
+    @include breakpoint(xs) {
+      font-size: 16px; // Fallback in pixels
+      font-size: calc(16 / $default-font-size) + rem;
+    }
+  }
 }
 
 @for $i from 1 through length($headings) {
-	$heading: nth($headings, $i);
-
-	h#{$i},
-	.h#{$i} {
-		color: $headings-color;
-		font-weight: nth($heading, 5);
-		margin-bottom: 10px;
-
-		@include breakpoint(xs) {
-			font-size: nth($heading, 2) + px; // Fallback in pixels
-			font-size: (nth($heading, 2) / $default-font-size) + rem;
-			line-height: nth($heading, 4) + px;
-		}
-		@include breakpoint(sm) {
-			font-size: nth($heading, 2) + px; // Fallback in pixels
-			font-size: (nth($heading, 2) / $default-font-size) + rem;
-			line-height: nth($heading, 4) + px;
-		}
-		@include breakpoint(md) {
-			font-size: nth($heading, 1) + px; // Fallback in pixels
-			font-size: (nth($heading, 1) / $default-font-size) + rem;
-			line-height: nth($heading, 3) + px;
-		}
-	}
+  $heading: nth($headings, $i);
+
+  h#{$i},
+  .h#{$i} {
+    color: $headings-color;
+    font-weight: nth($heading, 5);
+    margin-bottom: 10px;
+
+    @include breakpoint(xs) {
+      font-size: nth($heading, 2) + px; // Fallback in pixels
+      font-size: calc(nth($heading, 2) / $default-font-size) + rem;
+      line-height: nth($heading, 4) + px;
+    }
+    @include breakpoint(sm) {
+      font-size: nth($heading, 2) + px; // Fallback in pixels
+      font-size: calc(nth($heading, 2) / $default-font-size) + rem;
+      line-height: nth($heading, 4) + px;
+    }
+    @include breakpoint(md) {
+      font-size: nth($heading, 1) + px; // Fallback in pixels
+      font-size: calc(nth($heading, 1) / $default-font-size) + rem;
+      line-height: nth($heading, 3) + px;
+    }
+  }
 }
 
 .content-page h1 {
-	.subtitle {
-		font-size: 24px; // Fallback in pixels
-		font-size: (24 / $default-font-size) + rem;
-		font-weight: $rubik-light;
-
-		@include breakpoint(xs) {
-			font-size: 20px; // Fallback in pixels
-			font-size: (20 / $default-font-size) + rem;
-		}
-	}
+  .subtitle {
+    font-size: 24px; // Fallback in pixels
+    font-size: calc(24 / $default-font-size) + rem;
+    font-weight: $rubik-light;
+
+    @include breakpoint(xs) {
+      font-size: 20px; // Fallback in pixels
+      font-size: calc(20 / $default-font-size) + rem;
+    }
+  }
 }
 
 @for $i from 1 through length($content-headings) {
-	$heading: nth($content-headings, $i);
-
-	.content-page h#{$i},
-	.content-page .h#{$i} {
-		color: $headings-color-content;
-		font-size: nth($heading, 1) + px; // Fallback in pixels
-		font-size: (nth($heading, 1) / $default-font-size) + rem;
-		font-weight: nth($heading, 4);
-		line-height: 1.2;
-		margin-bottom: 10px;
-		text-transform: nth($heading, 5);
-		@include breakpoint(xs) {
-			font-size: nth($heading, 3) + px; // Fallback in pixels
-			font-size: (nth($heading, 3) / $default-font-size) + rem;
-		}
-		@include breakpoint(sm) {
-			font-size: nth($heading, 2) + px; // Fallback in pixels
-			font-size: (nth($heading, 2) / $default-font-size) + rem;
-		}
-		@include breakpoint(md) {
-			font-size: nth($heading, 1) + px; // Fallback in pixels
-			font-size: (nth($heading, 1) / $default-font-size) + rem;
-		}
-	}
+  $heading: nth($content-headings, $i);
+
+  .content-page h#{$i},
+  .content-page .h#{$i} {
+    color: $headings-color-content;
+    font-size: nth($heading, 1) + px; // Fallback in pixels
+    font-size: calc(nth($heading, 1) / $default-font-size) + rem;
+    font-weight: nth($heading, 4);
+    line-height: 1.2;
+    margin-bottom: 10px;
+    text-transform: nth($heading, 5);
+    @include breakpoint(xs) {
+      font-size: nth($heading, 3) + px; // Fallback in pixels
+      font-size: calc(nth($heading, 3) / $default-font-size) + rem;
+    }
+    @include breakpoint(sm) {
+      font-size: nth($heading, 2) + px; // Fallback in pixels
+      font-size: calc(nth($heading, 2) / $default-font-size) + rem;
+    }
+    @include breakpoint(md) {
+      font-size: nth($heading, 1) + px; // Fallback in pixels
+      font-size: calc(nth($heading, 1) / $default-font-size) + rem;
+    }
+  }
 }

package/styles/qppds/components/_gov-banner.scss

@@ -79,7 +79,7 @@ $gov-banner-button-text-hover-color: #1a4480;
 .qpp-c-gov-banner__lock-image {
   $lock-h: 64; // unitless height of svg
   $lock-w: 52; // unitless width of svg
-  $lock-aspect: $lock-w / $lock-h;
+  $lock-aspect: calc($lock-w / $lock-h);
   $icon-height: 1.5ex; // height of the lock icon; use ex for resilience
 
   height: $icon-height;

package/styles/qppds/components/_pagination.scss

@@ -71,8 +71,8 @@
   height: $spacing-40;
   justify-content: center;
   line-height: 1;
-  margin-left: $spacing-8 / 2;
-  margin-right: $spacing-8 / 2;
+  margin-left: calc($spacing-8 / 2);
+  margin-right: calc($spacing-8 / 2);
   min-width: $spacing-40;
   max-width: $spacing-40;
 
@@ -176,7 +176,7 @@
 
 .qpp-c-pagination__previous {
   @include at-media(sm) {
-    margin-right: $spacing-40 / 2;
+    margin-right: calc($spacing-40 / 2);
   }
   border: rem(1px) solid transparent;
   svg {
@@ -188,21 +188,21 @@
 .qpp-c-pagination button.qpp-c-pagination__previous {
   &:focus {
     border: rem(1px) solid $blue-70;
-    margin-right: $spacing-40 / 2;
+    margin-right: calc($spacing-40 / 2);
   }
 }
 
 .qpp-c-pagination__item a.qpp-c-pagination__previous {
   &:focus {
     border: rem(1px) solid $blue-70;
-    margin-right: ($spacing-40 / 2);
+    margin-right: calc($spacing-40 / 2);
     margin-left: 0;
   }
 }
 
 .qpp-c-pagination__next {
   @include at-media(sm) {
-    margin-left: $spacing-40 / 2;
+    margin-left: calc($spacing-40 / 2);
   }
   border: rem(1px) solid transparent;
   svg {
@@ -221,7 +221,7 @@
 .qpp-c-pagination__item a.qpp-c-pagination__next {
   &:focus {
     border: rem(1px) solid $blue-70;
-    margin-left: $spacing-40 / 2;
+    margin-left: calc($spacing-40 / 2);
     margin-right: 0;
   }
 }

package/styles/qppds/settings/_functions.scss

@@ -1,4 +1,4 @@
 // Convert PX to REM units
 @function rem($size) {
-  @return ($size / 16px) * 1rem;
+  @return calc($size / 16px) * 1rem;
 }

package/styles/third-party/legacy-bootstrap/_forms.scss

@@ -505,6 +505,6 @@ textarea.form-control {
   // Reposition the icon because it's now within a grid column and columns have
   // `position: relative;` on them. Also accounts for the grid gutter padding.
   .has-feedback .form-control-feedback {
-    right: floor(($grid-gutter-width / 2));
+    right: floor(calc($grid-gutter-width / 2));
   }
 }

package/styles/third-party/legacy-bootstrap/_navbar.scss

@@ -214,7 +214,7 @@
 // Builds on top of the `.nav` components with its own modifier class to make
 // the nav the full height of the horizontal nav (above 768px).
 .navbar-nav {
-  margin: ($navbar-padding-vertical / 2) (-$navbar-padding-horizontal);
+  margin: calc($navbar-padding-vertical / 2) (-$navbar-padding-horizontal);
 
   > li > a {
     padding-top: 10px;
@@ -318,7 +318,7 @@
   }
 
   &.btn-xs {
-    @include navbar-vertical-align(22);
+    @include navbar-vertical-align(22px);
   }
 }
 

package/styles/third-party/legacy-bootstrap/_variables.scss

@@ -363,8 +363,8 @@ $container-lg: $container-large-desktop !default;
 $navbar-height: 50px !default;
 $navbar-margin-bottom: $line-height-computed !default;
 $navbar-border-radius: $border-radius-base !default;
-$navbar-padding-horizontal: floor(($grid-gutter-width / 2)) !default;
-$navbar-padding-vertical: (
+$navbar-padding-horizontal: floor(calc($grid-gutter-width / 2)) !default;
+$navbar-padding-vertical: calc(
   ($navbar-height - $line-height-computed) / 2
 ) !default;
 $navbar-collapse-max-height: 340px !default;

package/styles/third-party/legacy-bootstrap/mixins/_grid-framework.scss

@@ -16,8 +16,8 @@
     // Prevent columns from collapsing when empty
     min-height: 1px;
     // Inner gutter via padding
-    padding-left: ceil(($grid-gutter-width / 2));
-    padding-right: floor(($grid-gutter-width / 2));
+    padding-left: ceil(calc($grid-gutter-width / 2));
+    padding-right: floor(calc($grid-gutter-width / 2));
   }
 }
 
@@ -34,13 +34,13 @@
 @mixin calc-grid-column($index, $class, $type) {
   @if ($type == width) and ($index > 0) {
     .col-#{$class}-#{$index} {
-      width: percentage(($index / $grid-columns));
+      width: percentage(calc($index / $grid-columns));
     }
   }
 
   @if ($type == push) and ($index > 0) {
     .col-#{$class}-push-#{$index} {
-      left: percentage(($index / $grid-columns));
+      left: percentage(calc($index / $grid-columns));
     }
   }
 
@@ -52,7 +52,7 @@
 
   @if ($type == pull) and ($index > 0) {
     .col-#{$class}-pull-#{$index} {
-      right: percentage(($index / $grid-columns));
+      right: percentage(calc($index / $grid-columns));
     }
   }
 
@@ -64,7 +64,7 @@
 
   @if ($type == offset) {
     .col-#{$class}-offset-#{$index} {
-      margin-left: percentage(($index / $grid-columns));
+      margin-left: percentage(calc($index / $grid-columns));
     }
   }
 }

package/styles/third-party/legacy-bootstrap/mixins/_grid.scss

@@ -3,8 +3,8 @@
 // Generate semantic grid columns with these mixins.
 // Creates a wrapper for a series of columns
 @mixin make-row($gutter: $grid-gutter-width) {
-  margin-right: floor(($gutter / -2));
-  margin-left: ceil(($gutter / -2));
+  margin-right: floor(calc($gutter / -2));
+  margin-left: ceil(calc($gutter / -2));
   @include clearfix;
 }
 
@@ -14,44 +14,44 @@
   float: left;
   width: percentage(($columns / $grid-columns));
   min-height: 1px;
-  padding-right: ($gutter / 2);
-  padding-left: ($gutter / 2);
+  padding-right: calc($gutter / 2);
+  padding-left: calc($gutter / 2);
 }
 @mixin make-xs-column-offset($columns) {
-  margin-left: percentage(($columns / $grid-columns));
+  margin-left: percentage(calc($columns / $grid-columns));
 }
 @mixin make-xs-column-push($columns) {
-  left: percentage(($columns / $grid-columns));
+  left: percentage(calc($columns / $grid-columns));
 }
 @mixin make-xs-column-pull($columns) {
-  right: percentage(($columns / $grid-columns));
+  right: percentage(calc($columns / $grid-columns));
 }
 
 // Generate the small columns
 @mixin make-sm-column($columns, $gutter: $grid-gutter-width) {
   position: relative;
   min-height: 1px;
-  padding-right: ($gutter / 2);
-  padding-left: ($gutter / 2);
+  padding-right: calc($gutter / 2);
+  padding-left: calc($gutter / 2);
 
   @media (min-width: $screen-sm-min) {
     float: left;
-    width: percentage(($columns / $grid-columns));
+    width: percentage(calc($columns / $grid-columns));
   }
 }
 @mixin make-sm-column-offset($columns) {
   @media (min-width: $screen-sm-min) {
-    margin-left: percentage(($columns / $grid-columns));
+    margin-left: percentage(calc($columns / $grid-columns));
   }
 }
 @mixin make-sm-column-push($columns) {
   @media (min-width: $screen-sm-min) {
-    left: percentage(($columns / $grid-columns));
+    left: percentage(calc($columns / $grid-columns));
   }
 }
 @mixin make-sm-column-pull($columns) {
   @media (min-width: $screen-sm-min) {
-    right: percentage(($columns / $grid-columns));
+    right: percentage(calc($columns / $grid-columns));
   }
 }
 
@@ -59,27 +59,27 @@
 @mixin make-md-column($columns, $gutter: $grid-gutter-width) {
   position: relative;
   min-height: 1px;
-  padding-right: ($gutter / 2);
-  padding-left: ($gutter / 2);
+  padding-right: calc($gutter / 2);
+  padding-left: calc($gutter / 2);
 
   @media (min-width: $screen-md-min) {
     float: left;
-    width: percentage(($columns / $grid-columns));
+    width: percentage(calc($columns / $grid-columns));
   }
 }
 @mixin make-md-column-offset($columns) {
   @media (min-width: $screen-md-min) {
-    margin-left: percentage(($columns / $grid-columns));
+    margin-left: percentage(calc($columns / $grid-columns));
   }
 }
 @mixin make-md-column-push($columns) {
   @media (min-width: $screen-md-min) {
-    left: percentage(($columns / $grid-columns));
+    left: percentage(calc($columns / $grid-columns));
   }
 }
 @mixin make-md-column-pull($columns) {
   @media (min-width: $screen-md-min) {
-    right: percentage(($columns / $grid-columns));
+    right: percentage(calc($columns / $grid-columns));
   }
 }
 
@@ -87,8 +87,8 @@
 @mixin make-lg-column($columns, $gutter: $grid-gutter-width) {
   position: relative;
   min-height: 1px;
-  padding-right: ($gutter / 2);
-  padding-left: ($gutter / 2);
+  padding-right: calc($gutter / 2);
+  padding-left: calc($gutter / 2);
 
   @media (min-width: $screen-lg-min) {
     float: left;

package/styles/third-party/legacy-bootstrap/mixins/_nav-divider.scss

@@ -4,7 +4,7 @@
 
 @mixin nav-divider($color: #e5e5e5) {
   height: 1px;
-  margin: (($line-height-computed / 2) - 1) 0;
+  margin: (calc($line-height-computed / 2) - 1) 0;
   overflow: hidden;
   background-color: $color;
 }

package/styles/third-party/legacy-bootstrap/mixins/_nav-vertical-align.scss

@@ -4,6 +4,6 @@
 // Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin.
 
 @mixin navbar-vertical-align($element-height) {
-  margin-top: (($navbar-height - $element-height) / 2);
-  margin-bottom: (($navbar-height - $element-height) / 2);
+  margin-top: calc(($navbar-height - $element-height) / 2);
+  margin-bottom: calc(($navbar-height - $element-height) / 2);
 }

package/test/components/Infotip.test.js

@@ -32,7 +32,7 @@ describe('Infotip', () => {
     });
     const paths = container.querySelectorAll('path');
     expect(paths[1].getAttribute('fill')).to.equal('#FFF');
-    expect(paths[2].getAttribute('fill')).to.equal('#04838A');
+    expect(paths[2].getAttribute('fill')).to.equal('#0073C8');
   });
 
   it('overrides "touchstart" events for button', () => {