qpp-style 2.1.13 → 2.2.0-sm.0

package/styles/components/_spinner.scss

@@ -0,0 +1,7 @@
+.ds-c-spinner::after {
+	color: $color-teal;
+}
+
+.ds-c-spinner::before {
+	color: $color-gray-very-light;
+}

package/styles/components/_tables.scss

@@ -1,87 +1,111 @@
 /* Tables */
+
+.thead-inverse th {
+  background-color: $table-primary-color;
+  color: $color-white; // Bootstrap 3
+}
+
 .table {
-	font-size: 1.1rem;
-	th {
-		font-weight: 500;
-		border-top: none;
-	}
-	th,
-	td {
-		padding: 1.2rem 1.4rem !important; // Impotant Bootstrap 3
-		border-color: $table-border-color !important; // Impotant Bootstrap 3
-	}
-	thead {
-		tr {
-			th {
-				vertical-align: middle;
-				border-bottom: none;
-			}
-		}
-	}
-	tbody {
-		tr {
-			&:first-of-type {
-				td {
-					border-top: 0;
-				}
-			}
-		}
-	}
+  font-size: 1.1rem;
+
+  th {
+    border-top: none;
+    font-weight: 500;
+  }
+
+  th,
+  td {
+    border-color: $table-border-color !important; // Impotant Bootstrap 3
+    padding: 1.2rem 1.4rem !important; // Impotant Bootstrap 3
+  }
 }
 
-.thead-inverse th {
-	background-color: $table-primary-color;
-	color: $color-white; // Bootstrap 3
+.table-bordered {
+  border: none;
+
+  thead {
+    th {
+      border-bottom: none !important; // Impotant Bootstrap 3
+    }
+  }
+}
+
+.table thead {
+  tr {
+    th {
+      border-bottom: none;
+      vertical-align: middle;
+    }
+  }
+}
+
+.table-bordered thead th:first-of-type {
+  border-left: none;
+}
+
+.table-bordered thead th:last-of-type {
+  border-right-color: $table-primary-color;
+}
+
+.table tbody {
+  tr {
+    &:first-of-type {
+      td {
+        border-top: 0;
+      }
+    }
+  }
 }
 
 .table-striped tbody tr:nth-of-type(odd) {
-	background-color: transparent;
+  background-color: transparent;
 }
 
 .table-striped tbody tr:nth-of-type(even) {
-	background-color: $table-stripe-color;
+  background-color: $table-stripe-color;
 }
 
-.table-bordered {
-	border: none;
-	thead {
-		th {
-			border-bottom: none !important; // Impotant Bootstrap 3
-			&:first-of-type {
-				border-left: none;
-			}
-			&:last-of-type {
-				border-right-color: $table-primary-color;
-			}
-		}
-	}
-}
 // Mobile table fixes
+
 .table-container {
-	width: 100%;
-	overflow-y: auto;
-	margin: 0 0 1em;
-	&::-webkit-scrollbar {
-		-webkit-appearance: none;
-		width: 14px;
-		height: 14px;
-	}
-	&::-webkit-scrollbar-thumb {
-		border-radius: 8px;
-		border: 3px solid $color-white;
-		background-color: rgba(0, 0, 0, 0.3);
-	}
-	.table {
-		@include breakpoint(xs) {
-			position: relative;
-			margin-bottom: 2rem;
-			&::after {
-				content: 'Scroll to view table \2192';
-				position: absolute;
-				bottom: -32px;
-				font-size: 0.9rem;
-				font-weight: 100;
-			}
-		}
-	}
+  margin: 0 0 1em;
+  overflow-y: auto;
+  width: 100%;
+
+  &::-webkit-scrollbar {
+    -webkit-appearance: none;
+    height: 14px;
+    width: 14px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.3);
+    border: 3px solid $color-white;
+    border-radius: 8px;
+  }
+
+  .table {
+    @include breakpoint(xs) {
+      margin-bottom: 2rem;
+      position: relative;
+
+      &::after {
+        bottom: -32px;
+        content: 'Scroll to view table \2192';
+        font-size: 0.9rem;
+        font-weight: 100;
+        position: absolute;
+      }
+    }
+  }
+}
+
+.no-scroll-table-container {
+  overflow-y: inherit !important;
+  overflow: inherit !important;
+  .table {
+    &::after {
+      content: '' !important;
+    }
+  }
 }

package/styles/components/_tabs.scss

@@ -0,0 +1,69 @@
+.react-tabs {
+	position: relative;
+
+	.ds-c-tabs {
+		border-bottom: 1px solid $color-gray-very-light;
+		display: flex;
+		list-style-type: none;
+		margin-bottom: 0;
+		padding-left: 0;
+	}
+
+	.react-tabs__tab-rule {
+		background: $color-gray-very-light;
+		height: 1px;
+		margin-top: -1px;
+		position: absolute;
+		z-index: -1;
+	}
+
+	.ds-c-tabs__item {
+		border-color: $color-gray-very-light;
+		border-style: solid;
+		border-top-left-radius: 3px;
+		border-top-right-radius: 3px;
+		border-width: 1px;
+		color: $link-color;
+		cursor: pointer;
+		display: inline-block;
+		margin-left: 0.625rem;
+		padding: 1.25rem;
+		padding-bottom: 0.9375rem;
+		text-decoration: none;
+		text-transform: uppercase;
+
+		&[aria-selected='true'] {
+			border-bottom-color: $color-white;
+			color: $color-text-main;
+			font-weight: $rubik-medium;
+		}
+
+		&[aria-disabled='true'] {
+			background: $color-gray-very-light;
+			color: $color-gray-darker-medium;
+			cursor: not-allowed;
+		}
+	}
+
+	.ds-c-tabs__panel {
+		margin-top: 2.5rem;
+
+		&:empty {
+			display: none;
+		}
+
+		&[aria-hidden='true'] {
+			display: none;
+		}
+	}
+
+	.react-tabs__full-width {
+		.ds-c-tabs {
+			border-bottom: 0 none;
+		}
+
+		.ds-c-tabs__item:first-child {
+			margin-left: 0;
+		}
+	}
+}

package/styles/components/_text.scss

@@ -1,84 +1,150 @@
 /* Base Styles */
 
 html {
-	font-size: $font-size-base;
+  font-size: $font-size-base;
 }
 
 body {
-	font-size: $font-size-base * 1.125;
-	font-family: $font-family-base;
-	color: $text-color;
-	line-height: 1.7;
-	font-weight: 400;
+  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-top: -25px;
-		margin-bottom: 30px;
-	}
+  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;
-	&:hover {
-		color: $link-hover-color;
-		text-decoration: $link-hover-decoration;
-	}
+  color: $link-color;
+  text-decoration: $link-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 */
 
+$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;
+    }
+  }
+}
+
 @for $i from 1 through length($headings) {
-	$heading: nth($headings, $i);
-
-	h#{$i}, .h#{$i} {
-		font-size: nth($heading, 1);
-		line-height: 1.2;
-		font-weight: nth($heading, 3);
-		text-transform: nth($heading, 4);
-		color: $headings-color;
-		margin-bottom: 10px;
-		@include breakpoint(xs) {
-			font-size: nth($heading, 2);
-		}
-		& + .lead {
-			margin-top: 30px;
-		}
-	}
+  $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;
+    }
+  }
+}
+
+.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;
+    }
+  }
+}
+
+@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;
+    }
+  }
 }

package/styles/components/_tooltip.scss

@@ -0,0 +1,23 @@
+[data-reach-tooltip] {
+	border: none;
+	border-radius: 4px;
+	padding: 10px;
+	box-shadow: 0 4px 8px 6px rgba(0, 0, 0, 0.1);
+	white-space: normal;
+	z-index: 1;
+	pointer-events: none;
+	position: absolute;
+	font-size: 85%;
+}
+
+@media only screen and (max-width: 339px) {
+	/* For small screens */
+	[data-reach-tooltip] {
+		max-width: 90%;
+	}
+}
+@media only screen and (min-width: 340px) {
+	[data-reach-tooltip] {
+		max-width: 340px;
+	}
+}

package/styles/components/_variables.scss

@@ -1,71 +1,75 @@
 // ============================================================================= QPP COLOR DEFINITIONS
 // primary
-$color-navy:              #036;
-$color-teal:              #04838a;
-$color-green:             #689f38;
-$color-orange:            #df711c;
+$color-navy: #036;
+$color-teal: #04838a;
+$color-green: #689f38;
+$color-orange: #df711c;
 
 // tones
-$color-navy-medium:       #125496;
-$color-navy-dark:         darken($color-navy, 7%);
-$color-teal-medium:       #209fa6;
-$color-teal-dark:         #106970;
-$color-green-medium:      #7cb342;
-$color-orange-medium:     #ffb300;
-
-$color-navy-light:        #3f7dba;
-$color-teal-light:        #80cbc4;
-$color-green-light:       #aed581;
-$color-orange-light:      #ffcc80;
+$color-navy-medium: #125496;
+$color-navy-dark: darken($color-navy, 7%);
+$color-teal-medium: #209fa6;
+$color-teal-dark: #106970;
+$color-green-medium: #7cb342;
+$color-orange-medium: #ffb300;
+
+$color-navy-light: #3f7dba;
+$color-teal-light: #80cbc4;
+$color-green-light: #aed581;
+$color-orange-light: #ffcc80;
 
 // data
-$color-blue:              #0288d1;
-$color-blue-medium:       #2eb1ed;
-$color-blue-light:        #81d4fa;
+$color-blue: #0288d1;
+$color-blue-medium: #2eb1ed;
+$color-blue-light: #81d4fa;
 
-$color-magenta:           #ad1457;
-$color-magenta-medium:    #f06292;
-$color-magenta-light:     #f8bbd0;
+$color-magenta: #ad1457;
+$color-magenta-medium: #f06292;
+$color-magenta-light: #f8bbd0;
 
-$color-chartreuse:        #c0ca33;
+$color-chartreuse: #c0ca33;
 $color-chartreuse-medium: #cddc39;
-$color-chartreuse-light:  #e6ee9c;
+$color-chartreuse-light: #e6ee9c;
 
-$color-green-data:        #507d29;
+$color-green-data: #507d29;
 $color-green-data-medium: #70a03d;
-$color-green-data-light:  #aed581;
+$color-green-data-light: #aed581;
 
-$color-orange-data:       #e47500;
-$color-orange-data-medium:#ffa200;
+$color-orange-data: #e47500;
+$color-orange-data-medium: #ffa200;
 $color-orange-data-light: #ffc438;
 
 // Side Navigation
-$color-slate:             #21344c;
-$color-slate-light:       #3b5c82;
-$color-slate-dark:        #0f2138;
+$color-slate: #21344c;
+$color-slate-light: #3b5c82;
+$color-slate-dark: #0f2138;
 
 // neutral
-$color-white:             #fff;
-$color-gray-light:        #f8f8f8;
-$color-gray-very-light:   #ddd;
-$color-gray-medium:       #b0b0b0;
-$color-gray-dark:         #686868;
-$color-gray-darker-medium:#767676;
-$color-gray-darker:       #242424;
-$color-black:             #000;
+$color-white: #fff;
+$color-gray-light: #f8f8f8;
+$color-gray-very-light: #ddd;
+$color-gray-medium: #b0b0b0;
+$color-gray-dark: #686868;
+$color-gray-darker-medium: #767676;
+$color-gray-darker: #242424;
+$color-black: #000;
 
 // Error and Progress
-$color-red:               #bc2828;
-$color-red-highlight:     #f2dede;
-$color-warning:           #ffc438;
-$color-success:           #507d29;
-$color-disabled:          #999999;
+$color-red: #bc2828;
+$color-red-highlight: #f2dede;
+$color-warning: #ffc438;
+$color-success: #507d29;
+$color-disabled: #ddd;
 
 // MIPS Category Colors
-$color-quality:           #0288d1;
-$color-aci:               #f06292;
-$color-ia:                #ffa200;
-$color-cost:              #70a03d;
+$color-quality: #0288d1;
+$color-aci: #f06292;
+$color-ia: #ffa200;
+$color-cost: #70a03d;
+
+//  Notification Banner
+$notification-banner-background: #f7f7f7;
+$notification-banner-label-color: #515151;
 
 // ============================================================================= COLOR VARIABLES
 $brand-primary-dark: $color-navy;
@@ -96,7 +100,7 @@ $form-field-color: $color-gray-medium;
 $form-check-color: $brand-secondary-dark;
 $form-error-color: $color-red;
 // ============================================================================= LINKS
-$link-color: $color-teal-dark;
+$link-color: $color-teal;
 $link-decoration: underline;
 $link-hover-color: $color-navy-medium;
 $link-hover-decoration: none;
@@ -114,18 +118,40 @@ $nav-color-secondary-light: $brand-secondary-light;
 $nav-text-color: $color-white;
 // ============================================================================= HEADINGS
 $headings-font-family: $font-family-base;
-$headings-color: $brand-primary-dark;
-
+$headings-color: $color-gray-darker;
+$headings-color-content: $color-navy;
+// ============================================================================= SIDE NAV
+$side-nav-horizontal-padding: 22px;
+$side-nav-expanded-width: 300px;
+$side-nav-closed-width: 90px;
+
+// Font weights based on /styles/components/_fonts.scss
+$rubik-light: 300;
+$rubik-regular: 400;
+$rubik-medium: 500;
+$rubik-bold: 700;
+
+// Text style based on https://confluence.cms.gov/pages/viewpage.action?spaceKey=QPPPRACTICE&title=Design+Specifications
+// Structure: (font-size(desktop), font-size(mobile), line-height(desktop), line-height(mobile), font-weight)
 $headings: (
-	// Desktop, Mobile, Weight, Transform
-	(3.5rem, 2.125rem, 300, initial),
-	(2.25rem, 1.75rem, 400, initial),
-	(1.5rem, 1.5rem, 500, initial),
-	(1.25rem, 1.25rem, 500, initial),
-	(1.125rem, 1.125rem, 500, initial),
-	(1rem, 1rem, 500, uppercase),
+  (44, 32, 48, 38, $rubik-regular),
+  (32, 26, 38, 30, $rubik-regular),
+  (24, 20, 29, 24, $rubik-medium),
+  (18, 18, 22, 22, $rubik-medium),
+  (16, 16, 21, 21, $rubik-medium),
+  (14, 14, 19, 19, $rubik-medium)
+);
+
+// Structure: (Desktop (px), Tablet(px), Mobile(px), Font Weight, Transform)
+$content-headings: (
+  (56, 34, 34, $rubik-light, initial),
+  (46, 28, 28, $rubik-light, initial),
+  (36, 24, 24, $rubik-regular, initial),
+  (30, 20, 20, $rubik-medium, initial),
+  (24, 18, 18, $rubik-medium, initial),
+  (18, 18, 16, $rubik-bold, uppercase)
 );
 // ============================================================================= SCREEN SIZE
 $screen-sm: 768px;
 $screen-md: 992px;
-$screen-lg:  1200px;
+$screen-lg: 1200px;