qpp-style 0.0.8 → 0.0.10

package/styles/qppds/settings/mixins/_borders.scss

@@ -0,0 +1,6 @@
+@import '../variables/index';
+
+@mixin raised-border {
+  border-radius: 3px;
+  box-shadow: 0 rem(2px) rem(8px) rgba(0, 0, 0, 0.1);
+}

package/styles/qppds/settings/mixins/_focus.scss

@@ -0,0 +1,28 @@
+$none: none;
+
+@mixin focus-ring {
+  border: 1px solid $blue-70;
+  border-radius: 3px;
+  box-shadow: 0 0 0 4px $blue-10;
+  outline: none;
+}
+
+@mixin link-focus {
+  border: 1px solid $blue-70;
+  border-radius: 3px;
+  box-shadow: 0 0 0 4px $blue-10;
+  outline: none;
+  padding: 2px;
+  margin-left: -3px;
+  margin-right: -3px;
+
+  @media screen and (-ms-high-contrast: $none) {
+    // IE10+ specific styles go here
+    border: 0 solid transparent;
+    border-radius: 0;
+    outline: 1px solid $blue-70;
+    margin-left: 0;
+    margin-right: 0;
+    padding: 0;
+  }
+}

package/styles/qppds/settings/mixins/_icons.scss

@@ -1,8 +1,43 @@
 @mixin inline-icon {
-  stroke: currentColor;
-  margin-bottom: -0.1em; // apply negative margin so icon doesn't affect height
-  margin-top: -0.1em;
   position: relative;
-  top: -0.1em;
   vertical-align: middle;
+  margin-bottom: -0.1em; // apply negative margin so icon doesn't affect height
+  margin-top: -0.1em;
+  height: 1em;
+  width: 1em;
+}
+
+@mixin inline-icon-md {
+  @include inline-icon;
+  margin-bottom: -0.2em;
+  margin-top: -0.3em;
+  height: 1.25em;
+  width: 1.25em;
+}
+
+@mixin inline-icon-lg {
+  @include inline-icon;
+  margin-bottom: -0.3em;
+  margin-top: -0.4em;
+  height: 1.5em;
+  width: 1.5em;
+}
+
+@mixin mat-icon {
+  fill: currentColor;
+}
+
+@mixin mat-icon-regular {
+  stroke: currentColor;
+  stroke-width: 0;
+}
+
+@mixin mat-icon-medium {
+  stroke: currentColor;
+  stroke-width: 0.5;
+}
+
+@mixin feather-icon {
+  stroke: currentColor;
+  fill: none;
 }

package/styles/qppds/settings/mixins/_index.scss

@@ -2,3 +2,7 @@
 @import './icons';
 @import './lists';
 @import './layout';
+@import './focus';
+@import './table';
+@import './borders';
+@import './type';

package/styles/qppds/settings/mixins/_layout.scss

@@ -1,35 +1,74 @@
 @import '../variables/layout';
 
+$at-media-error-message: 'breakpoint mixin supports: xxs, xs, sm, md, lg, xl';
+
 /*
 NOTE: named this "media-breakpoint" so as not to conflict with existing qpp-style
 mixin "breakpoint" used for legacy css.
 */
 @mixin media-breakpoint($class) {
   @if $class == xxs {
-    @media (min-width: $width-xxs) {
+    @media all and (min-width: $width-xxs) {
       @content;
     }
   } @else if $class == xs {
-    @media (min-width: $width-xs) {
+    @media all and (min-width: $width-xs) {
       @content;
     }
   } @else if $class == sm {
-    @media (min-width: $width-sm) {
+    @media all and (min-width: $width-sm) {
       @content;
     }
   } @else if $class == md {
-    @media (min-width: $width-md) {
+    @media all and (min-width: $width-md) {
       @content;
     }
   } @else if $class == lg {
-    @media (min-width: $width-lg) {
+    @media all and (min-width: $width-lg) {
       @content;
     }
   } @else if $class == xl {
-    @media (min-width: $width-xl) {
+    @media all and (min-width: $width-xl) {
+      @content;
+    }
+  } @else {
+    @warn $at-media-error-message;
+  }
+}
+
+// alias to old mixin name, updated to match uswds
+@mixin at-media($bp) {
+  @include media-breakpoint($bp) {
+    @content;
+  }
+}
+
+@mixin at-media-max($bp) {
+  @if $bp == xxs {
+    @media all and (max-width: $width-xxs) {
+      @content;
+    }
+  } @else if $bp == xs {
+    @media all and (max-width: $width-xs) {
+      @content;
+    }
+  } @else if $bp == sm {
+    @media all and (max-width: $width-sm) {
+      @content;
+    }
+  } @else if $bp == md {
+    @media all and (max-width: $width-md) {
+      @content;
+    }
+  } @else if $bp == lg {
+    @media all and (max-width: $width-lg) {
+      @content;
+    }
+  } @else if $bp == xl {
+    @media all and (max-width: $width-xl) {
       @content;
     }
   } @else {
-    @warn 'media-breakpoint mixin supports: xxs, xs, sm, md, lg, xl';
+    @warn $at-media-error-message;
   }
 }

package/styles/qppds/settings/mixins/_table.scss

@@ -0,0 +1,91 @@
+@import '../variables/index';
+
+@mixin table-stacked-styles {
+  thead {
+    display: none;
+  }
+
+  th,
+  td {
+    border-bottom-width: 0;
+    display: block;
+    width: 100%;
+    padding: $spacing-8 $spacing-16 $spacing-8;
+  }
+
+  th:first-child,
+  td:first-child {
+    padding: $spacing-16 $spacing-16 $spacing-8;
+  }
+
+  th:last-child,
+  td:last-child {
+    padding: $spacing-8 $spacing-16 $spacing-16;
+  }
+
+  th:only-child,
+  td:only-child {
+    padding: $spacing-16;
+  }
+
+  tr {
+    border-bottom: rem(1px) solid $gray-10;
+    border-top-width: 0;
+    display: block;
+    width: 100%;
+    th:first-child,
+    td:first-child {
+      border-top-width: 0;
+    }
+    &:nth-child(odd) {
+      td,
+      th {
+        background-color: inherit;
+      }
+    }
+
+    &:first-child {
+      th:first-child,
+      td:first-child {
+        border-top: rem(1px) solid $gray-10;
+      }
+    }
+  }
+
+  /* stylelint-disable selector-no-qualifying-type */
+  th[data-label],
+  td[data-label] {
+    font-weight: $font-regular;
+
+    &::before {
+      content: attr(data-label);
+      display: block;
+      font-weight: $font-medium;
+    }
+  }
+  /* stylelint-enable selector-no-qualifying-type */
+}
+
+@mixin table-stacked-header-styles {
+  tr {
+    border-bottom: 0;
+
+    td:first-child,
+    th:first-child {
+      font-family: $font-rubik;
+      font-size: $font-size-16;
+      line-height: $line-height-subheading;
+      background-color: $gray-04;
+      color: $gray-80;
+      font-weight: $font-medium;
+      padding: $spacing-16;
+      &::before {
+        display: none;
+      }
+    }
+  }
+
+  tr:last-child {
+    border-bottom: rem(1px) solid $gray-10;
+  }
+}

package/styles/qppds/settings/mixins/_type.scss

@@ -0,0 +1,89 @@
+@import '../variables/index';
+
+@mixin input-label {
+  color: $gray-80;
+  font-size: $font-size-14;
+  font-weight: $font-medium;
+  text-transform: none;
+  display: block;
+}
+
+// uses heading objects defined in src/variables/_type
+@mixin heading($heading) {
+  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);
+  }
+}
+
+@mixin h1 {
+  @include heading(nth($headings, 1));
+}
+
+@mixin h2 {
+  @include heading(nth($headings, 2));
+}
+
+@mixin h3 {
+  @include heading(nth($headings, 3));
+}
+
+@mixin h4 {
+  @include heading(nth($headings, 4));
+}
+
+@mixin h5 {
+  @include heading(nth($headings, 5));
+}
+
+@mixin h6 {
+  @include heading(nth($headings, 6));
+}
+
+@mixin p1 {
+  font-family: $font-rubik;
+  font-size: $font-size-18;
+  line-height: $line-height-base;
+
+  @include media-breakpoint(xxs) {
+    font-size: $font-size-16;
+  }
+  @include media-breakpoint(xs) {
+    font-size: $font-size-18;
+  }
+}
+
+@mixin p2 {
+  font-family: $font-rubik;
+  font-size: $font-size-14;
+  line-height: $line-height-base;
+
+  @include media-breakpoint(xxs) {
+    font-size: $font-size-14;
+  }
+  @include media-breakpoint(xs) {
+    font-size: $font-size-14;
+  }
+}
+
+@mixin l1 {
+  font-family: $font-rubik;
+  font-size: $font-size-18;
+  line-height: $line-height-md;
+}
+
+@mixin l2 {
+  font-family: $font-rubik;
+  font-size: $font-size-14;
+  line-height: $line-height-md;
+  text-transform: uppercase;
+}

package/styles/qppds/settings/variables/_color.scss

@@ -1,8 +1,9 @@
 $white: #ffffff;
 $black: #000000;
 
+$blue-05: #e6f5ff;
 $blue-10: #cbe4ff;
-$blue-30: #2eb1ed;
+$blue-30: #2eb1ed; // deprecated
 $blue-40: #009bff;
 $blue-60: #0073c8;
 $blue-70: #125496;
@@ -38,3 +39,48 @@ $cost-green: #54a12a;
 $ia-gold: #ffa202;
 $pi-magenta: #ea5f92;
 $quality-blue: $blue-60;
+
+/* stylelint-disable property-case */
+:export {
+  white: $white;
+  black: $black;
+
+  blue05: $blue-05;
+  blue10: $blue-10;
+  blue30: $blue-30; // deprecated
+  blue40: $blue-40;
+  blue60: $blue-60;
+  blue70: $blue-70;
+  blue80: $blue-80;
+
+  cyan20: $cyan-20;
+  cyan40: $cyan-40;
+  cyan50: $cyan-50;
+
+  green05: $green-05;
+  green30: $green-30;
+  green50: $green-50;
+
+  gold05: $gold-05;
+  gold20: $gold-20;
+  gold40: $gold-40;
+
+  red10: $red-10;
+  red50: $red-50;
+  red60: $red-60;
+
+  gray02: $gray-02;
+  gray04: $gray-04;
+  gray10: $gray-10;
+  gray20: $gray-20;
+  gray60: $gray-60;
+  gray70: $gray-70;
+  gray80: $gray-80;
+  gray90: $gray-90;
+
+  costGreen: $cost-green;
+  iaGold: $ia-gold;
+  piMagenta: $pi-magenta;
+  qualityBlue: $quality-blue;
+}
+/* stylelint-enable property-case */

package/styles/qppds/settings/variables/_index.scss

@@ -1,3 +1,4 @@
 @import './color';
-@import './type';
 @import './layout';
+@import './type';
+@import './z-index';

package/styles/qppds/settings/variables/_layout.scss

@@ -7,6 +7,7 @@ $spacers: (
   '8': rem(8px),
   '12': rem(12px),
   '16': rem(16px),
+  '20': rem(20px),
   '24': rem(24px),
   '32': rem(32px),
   '40': rem(40px),
@@ -15,10 +16,11 @@ $spacers: (
 );
 
 $spacing-0: map-get($spacers, '0');
-$spacing-4: map-get($spacers, '4');
+$spacing-4: map-get($spacers, '4'); // deprecated
 $spacing-8: map-get($spacers, '8');
-$spacing-12: map-get($spacers, '12');
+$spacing-12: map-get($spacers, '12'); // deprecated
 $spacing-16: map-get($spacers, '16');
+$spacing-20: map-get($spacers, '20');
 $spacing-24: map-get($spacers, '24');
 $spacing-32: map-get($spacers, '32');
 $spacing-40: map-get($spacers, '40');
@@ -26,12 +28,12 @@ $spacing-48: map-get($spacers, '48');
 $spacing-96: map-get($spacers, '96');
 
 // Breakpoint widths
-$width-xxs: 0 !default;
-$width-xs: 544px !default;
-$width-sm: 768px !default;
-$width-md: 992px !default;
-$width-lg: 1200px !default;
-$width-xl: 1400px !default;
+$width-xxs: 0;
+$width-xs: 544px;
+$width-sm: 768px;
+$width-md: 992px;
+$width-lg: 1200px;
+$width-xl: 1400px;
 
 // Breakpoints
 $breakpoints: (
@@ -41,4 +43,27 @@ $breakpoints: (
   md: $width-md,
   lg: $width-lg,
   xl: $width-xl,
-) !default;
+);
+
+// JS Variable Exports
+/* stylelint-disable property-case */
+:export {
+  // spacing variables
+  spacing0: $spacing-0;
+  spacing8: $spacing-8;
+  spacing16: $spacing-16;
+  spacing24: $spacing-24;
+  spacing32: $spacing-32;
+  spacing40: $spacing-40;
+  spacing48: $spacing-48;
+  spacing96: $spacing-96;
+
+  // breakpoints
+  breakpointXXS: $width-xxs;
+  breakpointXS: $width-xs;
+  breakpointSM: $width-sm;
+  breakpointMD: $width-md;
+  breakpointLG: $width-lg;
+  breakpointXL: $width-xl;
+}
+/* stylelint-enable property-case */

package/styles/qppds/settings/variables/_type.scss

@@ -40,6 +40,10 @@ $letter-spacing-lg: 0.5;
 
 // Font Family
 $font-rubik: Rubik, Arial, 'Helvetica Neue', Helvetica, sans-serif;
+$font-public-sans: 'Public Sans Web', -apple-system, BlinkMacSystemFont,
+  'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji',
+  'Segoe UI Emoji', 'Segoe UI Symbol';
+$font-monospace: monospace;
 
 // Font Weight
 $font-regular: 400;
@@ -92,3 +96,40 @@ $headings: (
     $font-medium
   )
 );
+
+/* stylelint-disable property-case */
+:export {
+  // Font Sizes (in rem units)
+  fontSize12: $font-size-12;
+  fontSize14: $font-size-14;
+  fontSize16: $font-size-16;
+  fontSize18: $font-size-18;
+  fontSize20: $font-size-20;
+  fontSize24: $font-size-24;
+  fontSize32: $font-size-32;
+  fontSize40: $font-size-40;
+  fontSize48: $font-size-48;
+
+  // Line Heights (unitless)
+  lineHeightXS: $line-height-xs;
+  lineHeightSM: $line-height-sm;
+  lineHeightMD: $line-height-md;
+  lineHeightLG: $line-height-lg;
+  lineHeightReset: $line-height-reset;
+  lineHeightBase: $line-height-base;
+  lineHeightHeading: $line-height-heading;
+  lineHeightSubheading: $line-height-subheading;
+
+  // Letter Spacing
+  letterSpacingSM: $letter-spacing-sm;
+  letterSpacingMD: $letter-spacing-md;
+  letterSpacingLG: $letter-spacing-lg;
+
+  // Font Family
+  fontRubik: $font-rubik;
+
+  // Font Weight
+  fontRegular: $font-regular;
+  fontMedium: $font-medium;
+}
+/* stylelint-enable property-case */

package/styles/qppds/settings/variables/_z-index.scss

@@ -0,0 +1,8 @@
+$zIndexTopNavClosed: 1;
+$zIndexTopNavOpen: 999;
+// to further populate, thus consolidating all z-indexes
+
+:export {
+  zIndexTopNavClosed: $zIndexTopNavClosed;
+  zIndexTopNavOpen: $zIndexTopNavOpen;
+}

package/styles/qppds/utilities/_background-color.scss

@@ -41,6 +41,10 @@
   background-color: $gray-90 !important;
 }
 
+.qpp-u-fill--blue-05 {
+  background-color: $blue-05 !important;
+}
+
 .qpp-u-fill--blue-10 {
   background-color: $blue-10 !important;
 }

package/styles/qppds/utilities/_color.scss

@@ -9,4 +9,32 @@
   color: $black !important;
 }
 
+.qpp-u-color--gray-60 {
+  color: $gray-60 !important;
+}
+
+.qpp-u-color--gray-80 {
+  color: $gray-80 !important;
+}
+
+.qpp-u-color--gray-90 {
+  color: $gray-90 !important;
+}
+
+.qpp-u-color--blue-60 {
+  color: $blue-60 !important;
+}
+
+.qpp-u-color--blue-70 {
+  color: $blue-70 !important;
+}
+
+.qpp-u-color--red-50 {
+  color: $red-50 !important;
+}
+
+.qpp-u-color--red-60 {
+  color: $red-60 !important;
+}
+
 // TODO: determine all colors that are intended to be used for text in design

package/styles/qppds/utilities/{_display-visability.scss → _display-visibility.scss}

@@ -17,6 +17,10 @@
   display: flex !important;
 }
 
+.qpp-u-display--inline-flex {
+  display: inline-flex !important;
+}
+
 .qpp-u-display--none {
   display: none !important;
 }
@@ -49,6 +53,10 @@
       display: flex !important;
     }
 
+    .qpp-u-#{$breakpoint}-display--inline-flex {
+      display: inline-flex !important;
+    }
+
     .qpp-u-#{$breakpoint}-display--none {
       display: none !important;
     }