qpp-style 0.0.8 → 0.0.10

package/styles/components/_tables.scss

@@ -1,101 +1,111 @@
 /* Tables */
 
 .thead-inverse th {
-	background-color: $table-primary-color;
-	color: $color-white; // Bootstrap 3
+  background-color: $table-primary-color;
+  color: $color-white; // Bootstrap 3
 }
 
 .table {
-	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
-	}
+  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
+  }
 }
 
 .table-bordered {
-	border: none;
+  border: none;
 
-	thead {
-		th {
-			border-bottom: none !important; // Impotant Bootstrap 3
-		}
-	}
+  thead {
+    th {
+      border-bottom: none !important; // Impotant Bootstrap 3
+    }
+  }
 }
 
 .table thead {
-	tr {
-		th {
-			border-bottom: none;
-			vertical-align: middle;
-		}
-	}
+  tr {
+    th {
+      border-bottom: none;
+      vertical-align: middle;
+    }
+  }
 }
 
 .table-bordered thead th:first-of-type {
-	border-left: none;
+  border-left: none;
 }
 
 .table-bordered thead th:last-of-type {
-	border-right-color: $table-primary-color;
+  border-right-color: $table-primary-color;
 }
 
 .table tbody {
-	tr {
-		&:first-of-type {
-			td {
-				border-top: 0;
-			}
-		}
-	}
+  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;
 }
 
 // Mobile table fixes
 
 .table-container {
-	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;
-			}
-		}
-	}
+  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/_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: (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} {
-		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: (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;
-		}
-	}
+  .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;
-		}
-	}
+  $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/_variables.scss

@@ -134,22 +134,22 @@ $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: (
-	(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)
+  (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)
+  (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;

package/styles/qppds/base/_backgrounds.scss

@@ -0,0 +1,7 @@
+// stylelint-disable declaration-no-important
+@import '../settings/index';
+
+.qpp-dark-background {
+  background-color: $blue-80;
+  color: $white;
+}

package/styles/qppds/base/_fonts.scss

@@ -24,3 +24,27 @@
   font-weight: 700;
   src: url('#{$font-path}Rubik-Bold.ttf');
 }
+@font-face {
+  font-family: 'Public Sans Web';
+  font-style: normal;
+  font-weight: 300;
+  src: url('#{$font-path}PublicSans-Light.ttf');
+}
+@font-face {
+  font-family: 'Public Sans Web';
+  font-style: normal;
+  font-weight: 400;
+  src: url('#{$font-path}PublicSans-Regular.ttf');
+}
+@font-face {
+  font-family: 'Public Sans Web';
+  font-style: normal;
+  font-weight: 500;
+  src: url('#{$font-path}PublicSans-Medium.ttf');
+}
+@font-face {
+  font-family: 'Public Sans Web';
+  font-style: normal;
+  font-weight: 700;
+  src: url('#{$font-path}PublicSans-Bold.ttf');
+}

package/styles/qppds/base/_icon.scss

@@ -0,0 +1,31 @@
+@import '../settings/variables/index';
+
+.qpp-icon-inline {
+  @include inline-icon;
+}
+
+.qpp-icon-inline--md {
+  @include inline-icon-md;
+}
+
+.qpp-icon-inline--lg {
+  @include inline-icon-lg;
+}
+
+.qpp-icon-mat {
+  @include mat-icon;
+
+  &.qpp-icon-regular {
+    @include mat-icon-regular;
+  }
+
+  &.qpp-icon-medium {
+    @include mat-icon-medium;
+  }
+}
+
+// Deprecated.  Will be removed once feather icons are
+// no longer used by applications.
+.qpp-icon-feather {
+  @include feather-icon;
+}

package/styles/qppds/base/_layout.scss

@@ -0,0 +1,5 @@
+@import '../settings/index';
+
+.qpp-raised-border {
+  @include raised-border;
+}

package/styles/qppds/base/_typography.scss

@@ -1,63 +1,97 @@
 @import '../settings/index';
 
-// Override legacy qpp-style label styles
-// TODO: reevaluate this when we get to forms and fieldsets
-label {
-  color: $gray-80;
-  font-weight: $font-medium;
-  text-transform: none;
+// scope all base (global) styles nested under .qppds selector
+// this can help avoid conflicts between new qppds styles and legacy styles
+.qppds,
+.qpp-prose {
+  // *:not() { // TODO: ignore component classes
+  // Override legacy qpp-style label styles
+  // TODO: reevaluate this when we get to forms and fieldsets
+  label {
+    @include input-label;
+  }
+
+  @for $i from 1 through length($headings) {
+    $heading: nth($headings, $i);
+
+    h#{$i},
+    .h#{$i} {
+      @include heading($heading);
+    }
+  }
+
+  p,
+  .p1 {
+    @include p1;
+  }
+
+  .p2 {
+    @include p2;
+  }
+
+  .l1 {
+    @include l1;
+  }
+
+  .l2 {
+    @include l2;
+  }
+  //}
+}
+
+// prefixed, single-use global classes for typography styles that can
+// be used outside a .qppds wrapper.
+.qpp-label {
+  @include input-label;
+}
+
+.qpp-legend {
+  @include input-label;
+  margin-top: $spacing-8;
+  // override legacy globals for legend
   margin-bottom: 0;
-  display: block;
+  border: 0;
+  border-bottom: 0;
+  padding: 0;
+  line-height: inherit;
+  width: auto;
 }
 
 @for $i from 1 through length($headings) {
   $heading: nth($headings, $i);
 
-  h#{$i},
-  .h#{$i} {
-    font-family: $font-rubik;
-    font-weight: nth($heading, 5);
-    font-size: nth($heading, 1);
-    line-height: nth($heading, 3);
-
-    @include media-breakpoint(xxs) {
-      font-size: nth($heading, 2);
-      line-height: nth($heading, 4);
-    }
-    @include media-breakpoint(xs) {
-      font-size: nth($heading, 1);
-      line-height: nth($heading, 3);
-    }
+  .qpp-h#{$i} {
+    @include heading($heading);
   }
 }
 
-p,
-.p1 {
-  font-family: $font-rubik;
-  font-size: $font-size-18;
-  line-height: $line-height-base;
+.qpp-p,
+.qpp-p1 {
+  @include p1;
+}
 
-  @include media-breakpoint(xxs) {
-    font-size: $font-size-16;
-  }
-  @include media-breakpoint(xs) {
-    font-size: $font-size-18;
-  }
+.qpp-p2 {
+  @include p2;
 }
 
-.p2 {
-  font-size: $font-size-14;
+.qpp-l1 {
+  @include l1;
 }
 
-.l1 {
-  font-family: $font-rubik;
-  font-size: $font-size-18;
-  line-height: $line-height-md;
+.qpp-l2 {
+  @include l2;
 }
 
-.l2 {
-  font-family: $font-rubik;
-  font-size: $font-size-12;
-  line-height: $line-height-md;
-  text-transform: uppercase;
+.qpp-error-message {
+  color: $red-50;
+  display: block;
+  font-size: $font-size-14;
+  font-weight: 400;
+}
+
+.qpp-hint-message {
+  color: $gray-60;
+  display: block;
+  font-size: $font-size-14;
+  font-weight: 400;
 }