qpp-style 9.16.0 → 9.16.2

package/styles/components/sidebar/_sidebar.scss

@@ -0,0 +1,141 @@
+/*
+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;
+	}
+
+	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/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/components/_gov-banner.scss

@@ -43,8 +43,7 @@ $gov-banner-button-text-hover-color: #1a4480;
   padding-top: $spacing-4;
   max-width: 64rem;
   width: 100%;
-  margin-left: auto;
-  margin-right: auto;
+  margin-left: 1rem;
 
   @include at-media(xs) {
     padding-top: $spacing-24;
@@ -94,8 +93,6 @@ $gov-banner-button-text-hover-color: #1a4480;
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
-  margin-left: auto;
-  margin-right: auto;
   padding-left: $spacing-16;
   padding-right: 0;
   max-width: 64rem;
@@ -234,10 +231,6 @@ $gov-banner-button-text-hover-color: #1a4480;
 
   .qpp-c-gov-banner__inner {
     margin-left: 0;
-
-    @include at-media(xs) {
-      margin-left: auto;
-    }
   }
 
   .qpp-c-gov-banner__header-action {

package/styles/qppds/components/_step-indicator.scss

@@ -0,0 +1,190 @@
+@import '../settings/index';
+
+.qpp-c-step-indicator {
+  font-family: $font-rubik;
+  font-size: $font-size-16;
+  background-color: transparent;
+  margin-bottom: $spacing-24;
+  margin-left: -1px;
+  margin-right: -1px;
+
+  @include at-media(xs) {
+    margin-left: 0;
+    margin-right: 0;
+  }
+}
+
+.qpp-c-step-indicator__segments {
+  counter-reset: qpp-c-step-indicator;
+  display: flex;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.qpp-c-step-indicator__segment {
+  flex: 1 1 0%;
+  counter-increment: qpp-c-step-indicator;
+  margin-left: 1px;
+  margin-right: 1px;
+  max-width: 15rem;
+  min-height: rem(4px);
+  position: relative;
+
+  // Add segment
+  &::after {
+    background-color: $gray-10;
+    content: '';
+    display: block;
+    // Use a fixed segment height for mobile regardless of settings
+    height: rem(4px);
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+}
+
+.qpp-c-step-indicator__segment--complete {
+  &::after {
+    background-color: $blue-80;
+  }
+  .usa-step-indicator__segment-label {
+    color: $blue-80;
+  }
+}
+
+.qpp-c-step-indicator__segment--current {
+  &::after {
+    background-color: $blue-60;
+  }
+  .usa-step-indicator__segment-label {
+    color: $blue-60;
+    font-weight: $font-medium;
+  }
+}
+
+.qpp-c-step-indicator__segment-label {
+  display: none;
+  // Show labels only at the min-width
+  @include at-media(xs) {
+    color: $gray-80;
+    display: block;
+    font-size: $font-size-14;
+    // Add margin based on segment size
+    margin-top: $spacing-16;
+    padding-right: $spacing-12;
+    text-align: left;
+  }
+}
+
+.qpp-c-step-indicator__header {
+  align-items: baseline;
+  display: flex;
+}
+
+.qpp-c-step-indicator__heading {
+  color: $gray-80;
+  font-family: $font-rubik;
+  font-size: $font-size-24;
+  font-weight: $font-medium;
+  margin: $spacing-24 0 0;
+  @include at-media(xs) {
+    font-size: $font-size-20;
+    margin-top: $spacing-24;
+  }
+}
+
+.qpp-c-step-indicator__heading-counter {
+  display: block;
+  font-size: $font-size-14;
+  letter-spacing: rem(0.5px);
+  padding-bottom: $spacing-8;
+}
+
+// TODO: qpp designs don't use seperate styling for current step like uswds does, but
+// keep this class just in case we'd like to in future.
+// .qpp-c-step-indicator__current-step {
+// }
+// .qpp-c-step-indicator__total-steps {
+// }
+
+.qpp-c-step-indicator__heading-text {
+  font-weight: $font-regular;
+  font-size: $font-size-24;
+}
+
+.qpp-c-step-indicator--counters {
+  .qpp-c-step-indicator__segment {
+    @include at-media(xs) {
+      margin-left: 0;
+      margin-right: 0;
+      margin-top: $spacing-16;
+
+      // Add counter
+      &::before {
+        font-size: $font-size-14;
+        height: rem(28px);
+        border-radius: 99rem;
+        width: rem(28px);
+        font-feature-settings: 'tnum' 1, 'kern' 1;
+        background-color: $white;
+        box-shadow: inset 0 0 0 rem(3px) $gray-10, 0 0 0 $spacing-4 $white;
+        color: $gray-80;
+        content: counter(qpp-c-step-indicator);
+        display: block;
+        font-weight: $font-medium;
+        left: 0;
+        line-height: 1.5;
+        // Magic number circle centering
+        padding: calc((#{$spacing-24} - (2ex * #{$line-height-sm})) * 0.5);
+        position: absolute;
+        text-align: center;
+        top: calc((#{$spacing-24} - #{$spacing-4}) / -2);
+        z-index: 100;
+      }
+
+      &:last-child {
+        // Don't show the last segment when counters appear
+        // stylelint-disable-next-line max-nesting-depth
+        &::after {
+          display: none;
+        }
+      }
+    }
+  }
+
+  .qpp-c-step-indicator__segment--complete {
+    &::before {
+      background-color: $blue-80;
+      box-shadow: 0 0 0 $spacing-4 $white;
+      color: $white;
+      height: $spacing-24;
+      width: $spacing-24;
+      line-height: $line-height-md;
+    }
+  }
+
+  .qpp-c-step-indicator__segment--current {
+    &::before {
+      background-color: $blue-60;
+      box-shadow: 0 0 0 $spacing-4 $white;
+      color: $white;
+      height: $spacing-24;
+      width: $spacing-24;
+      line-height: $line-height-md;
+    }
+
+    .qpp-c-step-indicator__segment-label {
+      font-weight: $font-medium;
+      color: $blue-60;
+    }
+  }
+
+  .qpp-c-step-indicator__segment-label {
+    @include at-media(xs) {
+      // Add counter margin
+      margin-top: rem(20px);
+    }
+  }
+}

package/styles/qppds/components/_table.scss

@@ -27,6 +27,23 @@ $table-margin: 0;
     }
   }
 
+  tr {
+    &.qpp-c-table--primary-header {
+      color: $white;
+      th,
+      td {
+        background-color: $blue-80;
+      }
+    }
+
+    &.qpp-c-table--secondary-header {
+      th,
+      td {
+        background-color: $gray-04;
+      }
+    }
+  }
+
   th {
     font-weight: $font-medium;
   }
@@ -84,7 +101,8 @@ $table-margin: 0;
     }
   }
 
-  &--secondary {
+  &--secondary,
+  &--alt {
     caption {
       background-color: $gray-04;
       color: $gray-90;

package/styles/qppds/components/index.scss

@@ -17,3 +17,4 @@
 @import './dropdown-menu';
 @import './circular-loader';
 @import './gov-banner';
+@import './step-indicator';

package/styles/qppds/utilities/_vertical-align.scss

@@ -0,0 +1,72 @@
+// stylelint-disable declaration-no-important
+@import '../settings/index.scss';
+
+.qpp-u-vertical-align--baseline {
+  vertical-align: baseline !important;
+}
+
+.qpp-u-vertical-align--sub {
+  vertical-align: sub !important;
+}
+
+.qpp-u-vertical-align--super {
+  vertical-align: super !important;
+}
+
+.qpp-u-vertical-align--text-top {
+  vertical-align: text-top !important;
+}
+
+.qpp-u-vertical-align--text-bottom {
+  vertical-align: text-bottom !important;
+}
+
+.qpp-u-vertical-align--middle {
+  vertical-align: middle !important;
+}
+
+.qpp-u-vertical-align--top {
+  vertical-align: top !important;
+}
+
+.qpp-u-vertical-align--bottom {
+  vertical-align: bottom !important;
+}
+
+@each $breakpoint in map-keys($breakpoints) {
+  $viewport: map-get($breakpoints, $breakpoint);
+
+  @media (min-width: $viewport) {
+    .qpp-u-#{$breakpoint}-vertical-align--baseline {
+      vertical-align: baseline !important;
+    }
+
+    .qpp-u-#{$breakpoint}-vertical-align--sub {
+      vertical-align: sub !important;
+    }
+
+    .qpp-u-#{$breakpoint}-vertical-align--super {
+      vertical-align: super !important;
+    }
+
+    .qpp-u-vertical-align--text-top {
+      vertical-align: text-top !important;
+    }
+
+    .qpp-u-#{$breakpoint}-vertical-align--text-bottom {
+      vertical-align: text-bottom !important;
+    }
+
+    .qpp-u-#{$breakpoint}-vertical-align--middle {
+      vertical-align: middle !important;
+    }
+
+    .qpp-u-#{$breakpoint}-vertical-align--top {
+      vertical-align: top !important;
+    }
+
+    .qpp-u-#{$breakpoint}-vertical-align--bottom {
+      vertical-align: bottom !important;
+    }
+  }
+}

package/styles/qppds/utilities/index.scss

@@ -13,3 +13,4 @@
 @import './text-align';
 @import './text-transform';
 @import './height';
+@import './vertical-align';