qpp-style 2.1.13 → 2.2.0-sm.0

package/styles/components/_wells.scss

@@ -1,13 +1,40 @@
+.measure-item {
+	align-content: center;
+	align-items: center;
+	border-top: 1px solid #eee;
+	-webkit-box-align: center;
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
+	-ms-flex-align: center;
+	-ms-flex-line-pack: center;
+	padding: 10px 0;
+
+	p {
+		display: inline;
+		margin: 0;
+		width: 85%;
+	}
+
+	a {
+		margin-left: auto;
+	}
+
+	.remove-self {
+		text-decoration: none;
+	}
+}
+
 .well {
-	margin-bottom: 2em;
 	background-color: #f5f5f5;
 	border: 1px solid #eaeaea;
-	box-shadow: none;
 	border-radius: 0;
+	box-shadow: none;
+	margin-bottom: 2em;
 
 	h3 {
-		margin-bottom: 1.5em;
 		color: #333;
+		margin-bottom: 1.5em;
 	}
 
 	p {
@@ -20,9 +47,12 @@
 .well-search {
 	background-color: $color-navy;
 	color: $color-white;
-	label, legend {
+
+	label,
+	legend {
 		color: $color-white;
 	}
+
 	.measures-search {
 		.btn-tertiary {
 			background-color: $color-white;
@@ -32,23 +62,27 @@
 			padding-right: 2.5rem;
 		}
 	}
+
 	.js-label-filter-box {
 		background-color: $color-white;
 		border-color: $color-white;
 		font-weight: 400;
 		margin-bottom: 1rem;
+
 		&:hover {
 			background-color: $color-gray-light;
 			border-color: $color-gray-light;
 		}
 	}
+
 	#search {
 		background-color: $color-green-medium;
 		border-color: $color-green-medium;
 		color: $color-white;
-		text-transform: uppercase;
 		font-size: 0.9rem;
 		height: 50px;
+		text-transform: uppercase;
+
 		&:hover {
 			background-color: $color-green;
 			border-color: $color-green;
@@ -56,27 +90,3 @@
 		}
 	}
 }
-
-.measure-item {
-	display: -webkit-box;
-	display: -ms-flexbox;
-	display: flex;
-	-ms-flex-line-pack: center;
-	align-content: center;
-	-webkit-box-align: center;
-	-ms-flex-align: center;
-	align-items: center;
-	border-top: 1px solid #eee;
-	padding: 10px 0;
-	p {
-		width: 85%;
-		display: inline;
-		margin: 0;
-	}
-	a {
-		margin-left: auto;
-	}
-	.remove-self {
-		text-decoration: none;
-	}
-}

package/styles/qppds/base/_backgrounds.scss

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

package/styles/qppds/base/_fonts.scss

@@ -0,0 +1,50 @@
+@use '../../paths' as v;
+
+@font-face {
+  font-family: Rubik;
+  font-style: normal;
+  font-weight: 300;
+  src: url('#{v.$font-path}Rubik-Light.ttf');
+}
+@font-face {
+  font-family: Rubik;
+  font-style: normal;
+  font-weight: 400;
+  src: url('#{v.$font-path}Rubik-Regular.ttf');
+}
+@font-face {
+  font-family: Rubik;
+  font-style: normal;
+  font-weight: 500;
+  src: url('#{v.$font-path}Rubik-Medium.ttf');
+}
+@font-face {
+  font-family: Rubik;
+  font-style: normal;
+  font-weight: 700;
+  src: url('#{v.$font-path}Rubik-Bold.ttf');
+}
+@font-face {
+  font-family: 'Public Sans Web';
+  font-style: normal;
+  font-weight: 300;
+  src: url('#{v.$font-path}PublicSans-Light.ttf');
+}
+@font-face {
+  font-family: 'Public Sans Web';
+  font-style: normal;
+  font-weight: 400;
+  src: url('#{v.$font-path}PublicSans-Regular.ttf');
+}
+@font-face {
+  font-family: 'Public Sans Web';
+  font-style: normal;
+  font-weight: 500;
+  src: url('#{v.$font-path}PublicSans-Medium.ttf');
+}
+@font-face {
+  font-family: 'Public Sans Web';
+  font-style: normal;
+  font-weight: 700;
+  src: url('#{v.$font-path}PublicSans-Bold.ttf');
+}

package/styles/qppds/base/_icon.scss

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

package/styles/qppds/base/_layout.scss

@@ -0,0 +1,5 @@
+@use '../settings/mixins' as m;
+
+.qpp-raised-border {
+  @include m.raised-border;
+}

package/styles/qppds/base/_typography.scss

@@ -0,0 +1,97 @@
+@use '../settings' as s;
+
+// 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 s.input-label;
+  }
+
+  @for $i from 1 through length(s.$headings) {
+    $heading: nth(s.$headings, $i);
+
+    h#{$i},
+    .h#{$i} {
+      @include s.heading($heading);
+    }
+  }
+
+  p,
+  .p1 {
+    @include s.p1;
+  }
+
+  .p2 {
+    @include s.p2;
+  }
+
+  .l1 {
+    @include s.l1;
+  }
+
+  .l2 {
+    @include s.l2;
+  }
+  //}
+}
+
+// prefixed, single-use global classes for typography styles that can
+// be used outside a .qppds wrapper.
+.qpp-label {
+  @include s.input-label;
+}
+
+.qpp-legend {
+  @include s.input-label;
+  margin-top: s.$spacing-8;
+  // override legacy globals for legend
+  margin-bottom: 0;
+  border: 0;
+  border-bottom: 0;
+  padding: 0;
+  line-height: inherit;
+  width: auto;
+}
+
+@for $i from 1 through length(s.$headings) {
+  $heading: nth(s.$headings, $i);
+
+  .qpp-h#{$i} {
+    @include s.heading($heading);
+  }
+}
+
+.qpp-p,
+.qpp-p1 {
+  @include s.p1;
+}
+
+.qpp-p2 {
+  @include s.p2;
+}
+
+.qpp-l1 {
+  @include s.l1;
+}
+
+.qpp-l2 {
+  @include s.l2;
+}
+
+.qpp-error-message {
+  color: s.$red-50;
+  display: block;
+  font-size: s.$font-size-14;
+  font-weight: 400;
+}
+
+.qpp-hint-message {
+  color: s.$gray-60;
+  display: block;
+  font-size: s.$font-size-14;
+  font-weight: 400;
+}

package/styles/qppds/base/index.scss

@@ -0,0 +1,8 @@
+// TODO: see if this conflicts with legacy qpp-style fonts
+// comment out until we're ready to replace old font-face definitions
+// @forward './fonts';
+
+@forward './typography';
+@forward './backgrounds';
+@forward './layout';
+@forward './icon';

package/styles/qppds/components/_alert.scss

@@ -0,0 +1,101 @@
+@use '../settings/variables' as v;
+
+.qpp-c-alert {
+  font-family: v.$font-rubik;
+  font-size: v.$font-size-14;
+  line-height: v.$line-height-lg;
+  box-sizing: border-box;
+  background-color: v.$gray-10;
+  background-repeat: no-repeat;
+  background-size: v.$spacing-32;
+  padding: v.$spacing-16;
+  position: relative;
+  border-left: 4px solid v.$gray-60;
+  border-radius: 3px;
+
+  .qpp-c-alert__body {
+    vertical-align: top;
+    margin-left: v.$spacing-40;
+    max-width: 600px;
+  }
+
+  .qpp-c-alert__heading {
+    font-size: v.$font-size-16;
+    margin-top: 0;
+    margin-bottom: v.$spacing-8;
+    line-height: v.$line-height-md;
+  }
+
+  .qpp-c-alert__text {
+    margin: 0;
+  }
+
+  &::before {
+    background-color: transparent;
+    background-repeat: no-repeat;
+    content: '';
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: v.$spacing-24;
+    margin: v.$spacing-16;
+  }
+
+  &.qpp-c-alert--info {
+    background-color: v.$blue-05;
+    color: v.$black;
+    border-left: 4px solid v.$blue-60;
+
+    &::before {
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' width='24' height='24'%3E%3Cpath fill='currentColor' d='M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z' class=''%3E%3C/path%3E%3C/svg%3E");
+    }
+  }
+
+  &.qpp-c-alert--warning {
+    background-color: v.$gold-05;
+    color: v.$black;
+    border-left: 4px solid v.$gold-20;
+
+    &::before {
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' width='24' height='24'%3E%3Cpath fill='currentColor' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z' class=''%3E%3C/path%3E%3C/svg%3E");
+    }
+  }
+
+  &.qpp-c-alert--error {
+    background-color: v.$red-10;
+    color: v.$black;
+    border-left: 4px solid v.$red-50;
+
+    &::before {
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' width='24' height='24'%3E%3Cpath fill='currentColor' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z' class=''%3E%3C/path%3E%3C/svg%3E");
+    }
+  }
+
+  &.qpp-c-alert--success {
+    background-color: v.$green-05;
+    color: v.$black;
+    border-left: 4px solid v.$green-30;
+
+    &::before {
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' width='24' height='24'%3E%3Cpath fill='currentColor' d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z' class=''%3E%3C/path%3E%3C/svg%3E");
+    }
+  }
+
+  &.qpp-c-alert--calendar {
+    &::before {
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V10h14v10zm0-12H5V6h14v2zM9 14H7v-2h2v2zm4 0h-2v-2h2v2zm4 0h-2v-2h2v2zm-8 4H7v-2h2v2zm4 0h-2v-2h2v2zm4 0h-2v-2h2v2z'/%3E%3C/svg%3E");
+    }
+  }
+}
+
+.qppds .qpp-c-alert a,
+.qpp-c-alert .qpp-c-link {
+  color: v.$blue-80;
+}
+
+.qppds .qpp-c-alert p {
+  font-family: v.$font-rubik;
+  font-size: v.$font-size-14;
+  line-height: v.$line-height-lg;
+}

package/styles/qppds/components/_breadcrumbs.scss

@@ -0,0 +1,93 @@
+@use '../settings/variables' as v;
+@use '../settings/mixins' as m;
+@use '../settings/functions' as f;
+
+.qpp-c-breadcrumbs {
+  line-height: v.$line-height-lg;
+  font-size: v.$font-size-14;
+  font-family: v.$font-rubik;
+  color: v.$gray-80;
+
+  .qpp-c-breadcrumbs__list {
+    @include m.unstyled-list;
+    margin-left: 0;
+    display: block;
+  }
+
+  .qpp-c-breadcrumbs__list-item {
+    display: inline-block;
+    white-space: nowrap;
+
+    &::after {
+      display: inline-block;
+      margin-left: v.$spacing-8;
+      margin-right: v.$spacing-8;
+      transform: translateY(3px) rotate(20deg);
+      border-right: 0.1em solid fade-out(v.$gray-80, 0.7);
+      height: 0.9em;
+      content: '';
+    }
+
+    &.qpp-c-breadcrumbs__list-item--current::after {
+      content: '';
+      margin-left: v.$spacing-0;
+      margin-right: v.$spacing-0;
+    }
+  }
+
+  .qpp-c-breadcrumbs__link {
+    color: v.$gray-80;
+    text-decoration: none;
+    text-underline-offset: f.rem(4px);
+    text-decoration-thickness: f.rem(1px);
+
+    &:not(.qpp-c-button) {
+      &:focus {
+        @include m.link-focus;
+      }
+    }
+
+    &:hover {
+      > span {
+        text-decoration-thickness: f.rem(2px);
+      }
+    }
+
+    > span {
+      text-decoration: underline;
+    }
+  }
+
+  &--return {
+    .qpp-c-breadcrumbs__link {
+      color: v.$blue-60;
+      font-weight: v.$font-medium;
+      > svg {
+        @include m.inline-icon-lg;
+        display: inline-block;
+        margin-left: -0.7em;
+        margin-right: -0.1em;
+        margin-top: -0.415em;
+        height: 1.715em;
+        width: 1.715em;
+      }
+      > span {
+        text-decoration: none;
+      }
+    }
+  }
+}
+
+.qpp-c-breadcrumbs--light {
+  color: v.$white;
+
+  .qpp-c-breadcrumbs__link {
+    color: v.$white;
+  }
+
+  .qpp-c-breadcrumbs__list-item {
+    &::after {
+      border-right: 0.1em solid fade-out(v.$white, 0.6);
+    }
+  }
+}