qpp-style 9.6.13 → 9.7.3

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/base/_icon.scss

@@ -0,0 +1,21 @@
+@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-feather {
+  @include feather-icon;
+}

package/styles/qppds/base/index.scss

@@ -10,3 +10,4 @@
 
 @import './backgrounds';
 @import './layout';
+@import './icon';

package/styles/qppds/components/_button.scss

@@ -276,7 +276,7 @@
 // TODO: Text buttons (https://zeroheight.com/079543162/p/56ad70-button/t/17855d)
 
 .qpp-c-button > svg {
-  @include inline-icon;
+  @include inline-icon-md;
   height: 1rem;
   width: 1rem;
 }

package/styles/qppds/components/_dropdown.scss

@@ -49,3 +49,7 @@
   background: none;
   color: $gray-80;
 }
+
+.qpp-c-dropdown--big {
+  padding: $spacing-16 $spacing-40 $spacing-16 $spacing-16;
+}

package/styles/qppds/components/_pagination.scss

@@ -0,0 +1,227 @@
+// stylelint-disable declaration-no-important
+// stylelint-disable selector-no-qualifying-type
+
+.qpp-c-pagination {
+  margin: $spacing-8 0;
+  font-family: $font-rubik;
+  display: flex;
+  justify-content: center;
+}
+
+.qpp-c-pagination svg {
+  margin-bottom: -0.1em !important;
+  margin-top: -0.1em !important;
+  height: 1em !important;
+  width: 1em !important;
+}
+
+.qpp-c-pagination button,
+.qppds .qpp-c-pagination button {
+  background-color: $white;
+  border-radius: rem(3px);
+  padding: rem(2px);
+
+  &:focus {
+    border: rem(1px) solid $blue-70;
+    border-radius: rem(3px);
+    box-shadow: 0 0 0 rem(4px) $blue-10;
+    outline: none;
+  }
+}
+
+.qpp-c-pagination a,
+.qppds .qpp-c-pagination a {
+  text-decoration: none;
+  padding: rem(2px);
+
+  &:focus {
+    @include link-focus;
+    padding: rem(2px);
+    margin-left: 0;
+    margin-right: 0;
+    color: $blue-60;
+  }
+
+  &:hover {
+    color: $blue-60;
+  }
+}
+
+.qpp-c-pagination__list {
+  margin-top: 0;
+  margin-bottom: 0;
+  list-style-type: none;
+  padding-left: 0;
+
+  align-items: center;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  width: auto;
+
+  > li {
+    margin-bottom: 0;
+  }
+}
+
+// Pagination nav items
+// 1. Prevents chromium browsers from adding additional vertical whitespace
+.qpp-c-pagination__item {
+  display: inline-flex; // 1
+  height: $spacing-40;
+  justify-content: center;
+  line-height: 1;
+  margin-left: $spacing-8 / 2;
+  margin-right: $spacing-8 / 2;
+  min-width: $spacing-40;
+  max-width: $spacing-40;
+
+  @include at-media(sm) {
+    flex: 1 0 auto; // flex: 1 won't work in IE11
+  }
+
+  > a,
+  > button {
+    &:disabled {
+      background-color: $gray-10;
+      color: $gray-60;
+    }
+  }
+}
+
+// Don't show previous and next at mobile.
+// Functionality exists with page buttons.
+.qpp-c-pagination__arrow {
+  display: none;
+  max-width: unset;
+  @include at-media(sm) {
+    display: inherit;
+  }
+}
+
+.qpp-c-pagination__link {
+  align-items: center;
+  color: $blue-60;
+  display: inline-flex;
+  text-decoration: none;
+
+  &[disabled] {
+    opacity: 0.4 !important;
+    pointer-events: none;
+  }
+
+  &:hover,
+  &:focus,
+  &:active {
+    text-decoration: underline !important;
+  }
+
+  &:visited {
+    color: $blue-60;
+  }
+}
+
+.qpp-c-pagination__button {
+  align-items: center;
+  border-color: $gray-10;
+  border-radius: rem(3px);
+  border-style: solid;
+  border-width: rem(1px);
+  color: $blue-60;
+  display: inline-flex;
+  justify-content: center;
+  padding: $spacing-16;
+  text-decoration: none;
+  width: 100%;
+
+  &:hover,
+  &.qpp-c-button--hover {
+    background-color: $gray-04;
+  }
+
+  &:active,
+  &.qpp-c-button--active {
+    background-color: darken($gray-04, 3%);
+  }
+}
+
+.qppds .qpp-c-pagination__link,
+.qppds .qpp-c-pagination__button {
+  color: $blue-60;
+}
+
+.qpp-c-pagination .qpp-c-pagination__current,
+.qppds .qpp-c-pagination .qpp-c-pagination__current {
+  background-color: $blue-60;
+  border-color: transparent;
+  color: $white;
+
+  &:hover,
+  &:focus,
+  &:active {
+    background-color: $blue-60;
+    color: $white;
+  }
+}
+
+.qpp-c-pagination__overflow {
+  align-items: center;
+  align-self: stretch;
+  display: inherit;
+  user-select: none;
+  padding: $spacing-16;
+  opacity: 0.5;
+  color: $blue-60;
+}
+
+.qpp-c-pagination__previous {
+  @include at-media(sm) {
+    margin-right: $spacing-40 / 2;
+  }
+  border: rem(1px) solid transparent;
+  svg {
+    margin-right: rem(6px) !important;
+    margin-left: 0 !important;
+  }
+}
+
+.qpp-c-pagination button.qpp-c-pagination__previous {
+  &:focus {
+    border: rem(1px) solid $blue-70;
+    margin-right: $spacing-40 / 2;
+  }
+}
+
+.qpp-c-pagination__item a.qpp-c-pagination__previous {
+  &:focus {
+    border: rem(1px) solid $blue-70;
+    margin-right: ($spacing-40 / 2);
+    margin-left: 0;
+  }
+}
+
+.qpp-c-pagination__next {
+  @include at-media(sm) {
+    margin-left: $spacing-40 / 2;
+  }
+  border: rem(1px) solid transparent;
+  svg {
+    margin-left: rem(6px) !important;
+    margin-right: 0 !important;
+  }
+}
+
+.qpp-c-pagination button.qpp-c-pagination__next {
+  border: 1px solid transparent;
+  &:focus {
+    border: rem(1px) solid $blue-70;
+  }
+}
+
+.qpp-c-pagination__item a.qpp-c-pagination__next {
+  &:focus {
+    border: rem(1px) solid $blue-70;
+    margin-left: $spacing-40 / 2;
+    margin-right: 0;
+  }
+}

package/styles/qppds/components/index.scss

@@ -13,3 +13,4 @@
 @import './footer';
 @import './header';
 @import './sidebar';
+@import './pagination';

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

@@ -63,12 +63,18 @@ Inline and back links
 		padding: 10px $side-nav-horizontal-padding;
 		width: $side-nav-expanded-width;
 
+		&.highlight {
+			color: $color-white;
+			border-left: solid 3px $color-teal-light;
+		}
+
 		.left-icon {
 			height: 25px;
 			margin-right: 15px;
 			min-height: 25px;
 			min-width: 25px;
 			width: 25px;
+			fill: $color-white;
 		}
 
 		&.stroke-based-icon {
@@ -227,8 +233,8 @@ Inline and back links
 				fill: $color-white;
 			}
 
-			&.highlight {
-				color: $color-white;
+			&.left-border-disabled {
+				border-left: 0;
 			}
 		}
 
@@ -249,6 +255,10 @@ Inline and back links
 			flex-grow: 1;
 		}
 
+		.hidden-nav-link-item {
+			display: none;
+		}
+
 		.right-icon {
 			height: 12px;
 			transition: transform 0.6s;
@@ -280,6 +290,10 @@ Inline and back links
 			.parent-link {
 				line-height: 1.3;
 				margin-left: 35px;
+
+				&.larger-item-spacing:not(:last-child) {
+					padding-bottom: 12px;
+				}
 			}
 
 			.child-link {
@@ -296,6 +310,14 @@ Inline and back links
 			&.currentPage {
 				background: $color-slate-dark;
 			}
+
+			&.background-highlight {
+				background-color: $color-slate-dark;
+			}
+
+			&.larger-drawer-bottom-padding {
+				padding: 0 30px 24px 30px;
+			}
 		}
 	}
 

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

@@ -37,6 +37,10 @@ $detailsMaxHeight: 130px;
 	transition: opacity 0.5s ease-in-out;
 	opacity: 0;
 	overflow: hidden;
+
+	&.background-highlight {
+		background-color: $color-slate-dark;
+	}
 }
 
 .animation-group-enter {

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

@@ -31,6 +31,10 @@ General sidebar styles
     height: 1px;
     margin: 25px $side-nav-horizontal-padding;
     width: auto;
+
+    &.hr-smaller-vertical-spacing {
+      margin: 0px 22px 14px;
+    }
   }
 
   ul {

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

@@ -1,6 +1,33 @@
 @mixin inline-icon {
-  margin-bottom: -0.1em; // apply negative margin so icon doesn't affect height
-  margin-top: -0.1em;
   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/utilities/_display-visability.scss

@@ -0,0 +1,83 @@
+// stylelint-disable declaration-no-important
+@import '../settings/index.scss';
+
+.qpp-u-display--block {
+  display: block !important;
+}
+
+.qpp-u-display--inline-block {
+  display: inline-block !important;
+}
+
+.qpp-u-display--inline {
+  display: inline !important;
+}
+
+.qpp-u-display--flex {
+  display: flex !important;
+}
+
+.qpp-u-display--inline-flex {
+  display: inline-flex !important;
+}
+
+.qpp-u-display--none {
+  display: none !important;
+}
+
+.qpp-u-visibility--hidden {
+  visibility: hidden !important;
+}
+
+.qpp-u-visibility--visible {
+  visibility: visible !important;
+}
+
+@each $breakpoint in map-keys($breakpoints) {
+  $viewport: map-get($breakpoints, $breakpoint);
+
+  @media (min-width: $viewport) {
+    .qpp-u-#{$breakpoint}-display--block {
+      display: block !important;
+    }
+
+    .qpp-u-#{$breakpoint}-display--inline-block {
+      display: inline-block !important;
+    }
+
+    .qpp-u-#{$breakpoint}-display--inline {
+      display: inline !important;
+    }
+
+    .qpp-u-#{$breakpoint}-display--flex {
+      display: flex !important;
+    }
+
+    .qpp-u-#{$breakpoint}-display--inline-flex {
+      display: inline-flex !important;
+    }
+
+    .qpp-u-#{$breakpoint}-display--none {
+      display: none !important;
+    }
+
+    .qpp-u-#{$breakpoint}-visibility--hidden {
+      visibility: hidden !important;
+    }
+
+    .qpp-u-#{$breakpoint}-visibility--visible {
+      visibility: visible !important;
+    }
+  }
+}
+
+.qpp-u-visually-hidden,
+.qpp-u-visually-hidden-focusable:not(:focus) {
+  @include visually-hidden;
+}
+
+@media print {
+  .qpp-u-visibility--hidden-print {
+    display: none !important;
+  }
+}