@madie/madie-design-system 1.0.0

package/styles/qppds/components/sidebar/_sidebar.scss

@@ -0,0 +1,146 @@
+/*
+General sidebar styles
+ */
+
+.sidebar {
+  background: $color-slate;
+  box-shadow: 4px 0 10px 0 transparentize($color-black, 0.7);
+  color: $color-white;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+  transition: width 0.6s ease-in-out;
+  width: $side-nav-expanded-width;
+
+  a {
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: none;
+    }
+
+    &.unstyled {
+      color: inherit;
+    }
+  }
+
+  hr {
+    border-top: 1px solid transparentize($color-white, 0.8);
+    height: 1px;
+    margin: 25px $side-nav-horizontal-padding;
+    width: auto;
+
+    &.hr-smaller-vertical-spacing {
+      padding: 0px 22px 14px;
+      margin: 0;
+    }
+  }
+
+  ul {
+    line-height: 1.7;
+    list-style-type: none;
+    margin: 0;
+    padding: 2px 0;
+  }
+
+  svg {
+    position: relative;
+  }
+
+  .SVGInline {
+    display: none;
+  }
+
+  &.closed {
+    width: $side-nav-closed-width;
+  }
+
+  .alt-style {
+    background: $color-slate-dark;
+
+    .alt-style-header {
+      background: $color-slate;
+      padding-bottom: 25px;
+    }
+
+    .alt-style-nav {
+      padding-bottom: 25px;
+    }
+  }
+
+  /* Sidebar content */
+
+  .sidebar-content {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    overflow-x: hidden;
+    transition: overflow-x 0.6s;
+
+    .label {
+      @include typography('Rubik', 20px, 26px, $color-white);
+      display: block;
+      font-weight: normal;
+      padding: 30px 25px 20px;
+      text-align: left;
+      white-space: inherit;
+    }
+
+    .level-one-nav {
+      background-color: $color-slate;
+    }
+  }
+
+  /* Sidebar chart */
+
+  .chart-title {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    p {
+      margin: 0;
+    }
+
+    .title {
+      @include typography('Rubik', 16px, 22px, $color-white);
+      text-transform: uppercase;
+    }
+
+    .disclaimer {
+      @include typography(
+        'Rubik',
+        14px,
+        20px,
+        transparentize($color-white, 0.2)
+      );
+      align-items: center;
+      display: flex;
+      padding: 5px 0 10px;
+
+      svg {
+        height: 20px;
+        width: 20px;
+      }
+
+      .left-icon {
+        fill: transparentize($color-white, 0.2);
+        margin-right: 10px;
+      }
+
+      .right-icon {
+        fill: $color-teal-light;
+        margin-left: 10px;
+      }
+    }
+
+    .timestamp {
+      @include typography('Rubik', 13px, 20px, $color-white);
+      padding: 5px 0 20px;
+      text-transform: uppercase;
+    }
+  }
+}

package/styles/qppds/components/sidebar/project-specific/_wi.scss

@@ -0,0 +1,42 @@
+/*
+	WI specific styles
+ */
+
+ .sidebar {
+	&.sidebar-wi-nav .sidebar-content {
+		> .animation-group > a.link-back {
+			background: $color-slate;
+			padding-bottom: 25px;
+		}
+
+		> .animation-group:nth-child(2) {
+			background: $color-slate;
+
+			> hr {
+				margin-bottom: 0;
+				margin-top: 0;
+			}
+		}
+
+		> .animation-group:nth-child(3) {
+			background: $color-slate;
+			padding-bottom: 25px;
+			padding-top: 25px;
+		}
+
+		> .animation-group:nth-child(4) {
+			padding: 25px $side-nav-horizontal-padding 0;
+
+			.quality-title {
+				@include typography('Rubik', 14px, 16px, $color-white);
+				font-weight: 500;
+				text-transform: uppercase;
+			}
+
+			.quality-subtitle {
+				@include typography('Rubik', 14px, 16px, $color-white);
+				padding: 10px 0 0;
+			}
+		}
+	}
+}

package/styles/qppds/index.scss

@@ -0,0 +1,4 @@
+@import './settings/index';
+@import './base/index';
+@import './utilities/index';
+@import './components/index';

package/styles/qppds/settings/_functions.scss

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

package/styles/qppds/settings/_index.scss

@@ -0,0 +1,3 @@
+@import './functions';
+@import './variables/index';
+@import './mixins/index';

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

@@ -0,0 +1,33 @@
+@mixin inline-icon {
+  position: relative;
+  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 feather-icon {
+  stroke: currentColor;
+  fill: none;
+}

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

@@ -0,0 +1,8 @@
+@import './visually-hidden';
+@import './icons';
+@import './lists';
+@import './layout';
+@import './focus';
+@import './table';
+@import './borders';
+@import './type';

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

@@ -0,0 +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 all and (min-width: $width-xxs) {
+      @content;
+    }
+  } @else if $class == xs {
+    @media all and (min-width: $width-xs) {
+      @content;
+    }
+  } @else if $class == sm {
+    @media all and (min-width: $width-sm) {
+      @content;
+    }
+  } @else if $class == md {
+    @media all and (min-width: $width-md) {
+      @content;
+    }
+  } @else if $class == lg {
+    @media all and (min-width: $width-lg) {
+      @content;
+    }
+  } @else if $class == 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 $at-media-error-message;
+  }
+}

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

@@ -0,0 +1,12 @@
+// Unstyled list helper
+@mixin unstyled-list() {
+  margin-top: 0;
+  margin-bottom: 0;
+  list-style-type: none;
+  padding-left: 0;
+
+  > li {
+    margin-bottom: 0;
+    max-width: unset;
+  }
+}

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,65 @@
+@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 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/mixins/_visually-hidden.scss

@@ -0,0 +1,30 @@
+// stylelint-disable declaration-no-important
+
+// Copied from Bootstrap v 4.5.2
+
+// Hide content visually while keeping it accessible to assistive technologies
+//
+// See: https://a11yproject.com/posts/how-to-hide-content/
+// See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
+
+@mixin visually-hidden() {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important; // Fix for https://github.com/twbs/bootstrap/issues/25686
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
+// Use to only display content when it's focused.
+//
+// Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
+
+@mixin visually-hidden-focusable() {
+  &:not(:focus) {
+    @include visually-hidden;
+  }
+}

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

@@ -0,0 +1,86 @@
+$white: #ffffff;
+$black: #000000;
+
+$blue-05: #e6f5ff;
+$blue-10: #cbe4ff;
+$blue-30: #2eb1ed; // deprecated
+$blue-40: #009bff;
+$blue-60: #0073c8;
+$blue-70: #125496;
+$blue-80: #003366;
+
+$cyan-20: #bbede9;
+$cyan-40: #209fa6;
+$cyan-50: #048087;
+
+$green-05: #eff5eb;
+$green-30: #7cb342;
+$green-50: #4d7e23;
+
+$gold-05: #fff9eb;
+$gold-20: #ffc438;
+$gold-40: #df711c;
+
+$red-10: #fde7ea;
+$red-50: #d92f2f;
+$red-60: #ae1c1c;
+
+$gray-02: #fafafa;
+$gray-04: #f7f7f7;
+$gray-10: #dddddd;
+$gray-20: #b0b0b0;
+$gray-60: #717171;
+$gray-70: #515151;
+$gray-80: #333333;
+$gray-90: #242424;
+
+// Performance Category Colors
+$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

@@ -0,0 +1,3 @@
+@import './color';
+@import './type';
+@import './layout';