qpp-style 0.0.9 → 0.0.10

package/styles/qppds/base/index.scss

@@ -2,10 +2,7 @@
 // comment out until we're ready to replace old font-face definitions
 // @import './fonts';
 
-// scope all base (global) styles nested under .qppds selector
-// this can help avoid conflicts between new qppds styles and legacy styles
-.qppds {
-  @import './typography';
-}
-
+@import './typography';
 @import './backgrounds';
+@import './layout';
+@import './icon';

package/styles/qppds/components/_alert.scss

@@ -0,0 +1,101 @@
+@import '../settings/index';
+
+.qpp-c-alert {
+  font-family: $font-rubik;
+  font-size: $font-size-14;
+  line-height: $line-height-lg;
+  box-sizing: border-box;
+  background-color: $gray-10;
+  background-repeat: no-repeat;
+  background-size: $spacing-32;
+  padding: $spacing-16;
+  position: relative;
+  border-left: 4px solid $gray-60;
+  border-radius: 3px;
+
+  .qpp-c-alert__body {
+    vertical-align: top;
+    margin-left: $spacing-40;
+    max-width: 600px;
+  }
+
+  .qpp-c-alert__heading {
+    font-size: $font-size-16;
+    margin-top: 0;
+    margin-bottom: $spacing-8;
+    line-height: $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: $spacing-24;
+    margin: $spacing-16;
+  }
+
+  &.qpp-c-alert--info {
+    background-color: $blue-05;
+    color: $black;
+    border-left: 4px solid $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: $gold-05;
+    color: $black;
+    border-left: 4px solid $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: $red-10;
+    color: $black;
+    border-left: 4px solid $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: $green-05;
+    color: $black;
+    border-left: 4px solid $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: $blue-80;
+}
+
+.qppds .qpp-c-alert p {
+  font-family: $font-rubik;
+  font-size: $font-size-14;
+  line-height: $line-height-lg;
+}

package/styles/qppds/components/_breadcrumbs.scss

@@ -13,14 +13,17 @@
   }
 
   .qpp-c-breadcrumbs__list-item {
-    display: inline;
+    display: inline-block;
     white-space: nowrap;
 
     &::after {
-      content: '/';
-      margin-left: $spacing-4;
-      margin-right: $spacing-4;
-      color: fade-out($gray-80, 0.7);
+      display: inline-block;
+      margin-left: $spacing-8;
+      margin-right: $spacing-8;
+      transform: translateY(3px) rotate(20deg);
+      border-right: 0.1em solid fade-out($gray-80, 0.7);
+      height: 0.9em;
+      content: '';
     }
 
     &.qpp-c-breadcrumbs__list-item--current::after {
@@ -30,30 +33,59 @@
     }
   }
 
-  .qpp-c-breadcrumbs__link:not(.qpp-c-button) {
+  .qpp-c-breadcrumbs__link {
     color: $gray-80;
     text-decoration: none;
+    text-underline-offset: rem(4px);
+    text-decoration-thickness: rem(1px);
+
+    &:not(.qpp-c-button) {
+      &:focus {
+        @include link-focus;
+      }
+    }
 
-    &:focus {
-      @include link-focus;
+    &:hover {
+      > span {
+        text-decoration-thickness: rem(2px);
+      }
     }
 
     > span {
       text-decoration: underline;
     }
   }
+
+  &--return {
+    .qpp-c-breadcrumbs__link {
+      color: $blue-60;
+      font-weight: $font-medium;
+      > svg {
+        @include 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: $white;
 
-  .qpp-c-breadcrumbs__link:not(.qpp-c-button) {
+  .qpp-c-breadcrumbs__link {
     color: $white;
   }
 
   .qpp-c-breadcrumbs__list-item {
     &::after {
-      color: fade-out($white, 0.7);
+      border-right: 0.1em solid fade-out($white, 0.6);
     }
   }
 }

package/styles/qppds/components/_button.scss

@@ -1,8 +1,12 @@
 @import '../settings/index';
 
+/* stylelint-disable selector-max-specificity */
+
 // Default / Primary Button
 .qpp-c-button,
-.qpp-c-button:visited {
+.qpp-c-button:visited,
+.qppds .qpp-c-button,
+.qppds .qpp-c-button:visited {
   background-color: $blue-60;
   border: 1px solid $blue-60;
   border-radius: 3px;
@@ -12,7 +16,7 @@
   display: inline-block;
   font-family: $font-rubik;
   font-size: $font-size-14;
-  font-weight: $font-regular;
+  font-weight: $font-medium;
   letter-spacing: $letter-spacing-sm;
   line-height: $line-height-xs;
   padding: $spacing-12 $spacing-16;
@@ -29,10 +33,14 @@
   &:focus,
   &.qpp-c-button--focus {
     border: 1px solid $blue-70;
+    border-radius: 3px;
     box-shadow: 0 0 0 4px $blue-10;
     outline: none;
     text-decoration: none;
     color: $white;
+    padding: $spacing-12 $spacing-16;
+    margin-left: 0;
+    margin-right: 0;
   }
 
   &:active,
@@ -165,8 +173,8 @@
   // Danger / Destructive Button
   &.qpp-c-button--danger {
     background-color: transparent;
-    border: 1px solid $red-60;
-    color: $red-60;
+    border: 1px solid $red-50;
+    color: $red-50;
     font-size: $font-size-14;
 
     &:disabled,
@@ -179,6 +187,7 @@
     &:hover,
     &.qpp-c-button--hover {
       background-color: fade-out($red-50, 0.9);
+      color: $red-60;
     }
 
     &:active,
@@ -202,7 +211,8 @@
   }
 }
 
-.qpp-c-button.qpp-c-button--text {
+.qpp-c-button.qpp-c-button--text,
+.qppds .qpp-c-button.qpp-c-button--text {
   color: $blue-60;
 
   &:disabled,
@@ -210,14 +220,15 @@
     color: $gray-60;
   }
 
-  &:hover,
-  &.qpp-c-button--hover {
-    color: $blue-70;
-  }
-
   &:focus,
   &.qpp-c-button--focus {
     border: 1px solid $blue-60;
+    color: $blue-60;
+  }
+
+  &:hover,
+  &.qpp-c-button--hover {
+    color: $blue-70;
   }
 
   &.qpp-c-button--danger {
@@ -266,11 +277,24 @@
 // TODO: Text buttons (https://zeroheight.com/079543162/p/56ad70-button/t/17855d)
 
 .qpp-c-button > svg {
+  @include inline-icon-md;
+  font-size: inherit;
+
+  &.qpp-icon-mat {
+    @include mat-icon-medium;
+  }
+}
+
+/* stylelint-disable selector-no-qualifying-type */
+.qpp-c-button > svg.qpp-icon-inline {
   @include inline-icon;
-  height: 1rem;
-  width: 1rem;
 }
 
+.qpp-c-button > svg.qpp-icon-inline--lg {
+  @include inline-icon-lg;
+}
+/* stylelint-enable selector-no-qualifying-type */
+
 .qpp-c-button--icon-before > svg {
   margin-right: $spacing-8;
 }
@@ -278,3 +302,5 @@
 .qpp-c-button--icon-after > svg {
   margin-left: $spacing-8;
 }
+
+/* stylelint-enable selector-max-specificity */

package/styles/qppds/components/_card.scss

@@ -0,0 +1,175 @@
+@import '../settings/index';
+
+.qpp-c-card {
+  flex-direction: column;
+  display: flex;
+  position: relative;
+
+  .qpp-c-card__content {
+    flex-direction: column;
+    display: flex;
+    position: relative;
+  }
+
+  .qpp-c-card__header {
+    border-top: 4px solid $blue-60;
+    box-shadow: none;
+    height: auto;
+    background: transparent;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    z-index: 0;
+    padding: 0;
+  }
+
+  .qpp-c-card__eyebrow {
+    color: $gray-80;
+    padding: $spacing-16 0 0;
+    margin: 0;
+    display: block;
+    order: -1;
+  }
+
+  .qpp-c-card__title {
+    color: $gray-80;
+    padding: $spacing-16 0 $spacing-8;
+    margin: 0;
+    font-weight: $font-regular;
+  }
+
+  .qpp-c-card__body {
+    display: block;
+    padding: 0 0 $spacing-8;
+    margin: 0;
+
+    p {
+      color: $gray-80;
+      font-size: $font-size-16;
+      padding: 0;
+      margin: 0;
+    }
+  }
+
+  .qpp-c-card__cta {
+    display: block;
+    margin: 0;
+    padding-top: rem(7px);
+    line-height: $line-height-xs;
+
+    .qpp-c-button {
+      margin: -1px;
+    }
+  }
+
+  .qpp-c-card__media {
+    display: block;
+    width: 100%;
+    order: -1;
+    padding: 0 0 $spacing-8;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    [role='img'] {
+      width: 100%;
+      height: 100%;
+      background-size: cover;
+      background-position: center;
+      background-repeat: no-repeat;
+      position: relative;
+    }
+  }
+
+  &.qpp-c-card--image {
+    .qpp-c-card__header {
+      border-top: 0;
+    }
+  }
+
+  &.qpp-c-card--flag {
+    flex-direction: row;
+
+    .qpp-c-card__media {
+      flex: 0 50%;
+      padding: 0 $spacing-24 0 0;
+    }
+
+    .qpp-c-card__content {
+      flex: 0 50%;
+    }
+  }
+
+  /* stylelint-disable max-nesting-depth */
+  @each $breakpoint in map-keys($breakpoints) {
+    $value: map-get($breakpoints, $breakpoint);
+
+    @media (min-width: $value) {
+      &.qpp-c-#{$breakpoint}-card--flag {
+        flex-direction: row;
+
+        .qpp-c-card__media {
+          flex: 0 50%;
+          padding: 0 $spacing-24 0 0;
+        }
+
+        .qpp-c-card__content {
+          flex: 0 50%;
+        }
+      }
+      &.qpp-c-#{$breakpoint}-card--default {
+        flex-direction: column;
+
+        .qpp-c-card__media {
+          flex: 0 1 auto;
+          padding: 0 0 $spacing-8;
+        }
+
+        .qpp-c-card__content {
+          flex: 0 1 auto;
+        }
+      }
+    }
+  }
+  /* stylelint-enable max-nesting-depth */
+
+  // "fixed image height" helper variants to match existing FE design.
+  // Required when using "background-image" cards, but not for img element media cards
+  &.qpp-c-card--small {
+    .qpp-c-card__media {
+      > img,
+      > [role='img'] {
+        height: 175px;
+      }
+    }
+
+    .qpp-c-card__title {
+      font-size: $font-size-18;
+
+      @media (min-width: $width-xs) {
+        font-size: $font-size-20;
+      }
+    }
+  }
+
+  &.qpp-c-card--medium {
+    .qpp-c-card__media {
+      > img,
+      > [role='img'] {
+        height: 220px;
+      }
+    }
+  }
+
+  &.qpp-c-card--large {
+    .qpp-c-card__media {
+      > img,
+      > [role='img'] {
+        height: 286px;
+      }
+    }
+  }
+}

package/styles/qppds/components/_checkbox.scss

@@ -0,0 +1,199 @@
+@use 'sass:math';
+@import '../settings/index';
+
+$forced-color-active: active;
+
+/* stylelint-disable selector-max-specificity, max-nesting-depth, selector-max-compound-selectors, value-list-comma-newline-after */
+.qpp-c-checkbox,
+.qppds .qpp-c-checkbox,
+.qpp-prose .qpp-c-checkbox {
+  background: $white;
+
+  .qpp-c-checkbox__label {
+    font-size: $font-size-16;
+    line-height: $line-height-lg;
+    &::before,
+    &::after {
+      width: $spacing-20;
+      height: $spacing-20;
+    }
+  }
+
+  &--small {
+    .qpp-c-checkbox__label {
+      font-size: $font-size-14;
+      line-height: $line-height-md;
+      &::before,
+      &::after {
+        width: $spacing-16;
+        height: $spacing-16;
+      }
+    }
+  }
+
+  &--indeterminate {
+    .qpp-c-checkbox__input {
+      &:checked + [class*='__label']::before,
+      &:checked:disabled + [class*='__label']::before,
+      &:checked[aria-disabled='true'] + [class*='__label']::before {
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' role='img' stroke='transparent' fill='white' viewBox='1.5 1.5 21 21'%3E%3Cpath fill-rule='evenodd' d='M4 11h16v2H4z'/%3E%3C/svg%3E"),
+          linear-gradient(transparent, transparent);
+      }
+    }
+  }
+}
+
+.qpp-c-checkbox__input {
+  // The actual input element is only visible to screen readers, because
+  // all visual styling is done via the label.
+  @include visually-hidden;
+  + [class*='__label'] {
+    &:hover {
+      &::before {
+        background-color: $gray-04;
+      }
+    }
+
+    &:active {
+      &::after {
+        box-shadow: 0 0 0 0.5rem $blue-10;
+        transition: box-shadow 0.08s ease;
+      }
+    }
+  }
+
+  &:focus {
+    outline: none;
+
+    + [class*='__label']::before {
+      @include focus-ring;
+    }
+  }
+
+  &:disabled,
+  &[aria-disabled='true'] {
+    + [class*='__label'] {
+      color: rgba(27, 27, 27, 0.3); // TODO: DS styles
+
+      &:active {
+        &::after {
+          box-shadow: 0 0 0 0 transparent;
+        }
+      }
+    }
+    + [class*='__label'],
+    + [class*='__label']::before {
+      cursor: not-allowed;
+    }
+    + [class*='__label']::before {
+      background-color: $gray-10;
+      border: rem(1px) solid $gray-10;
+    }
+  }
+
+  // Checkboxes with tap-friendly targets
+  &--tile {
+    // TODO: designs and styles for "tile" mode to support friendler
+    // mobile tap targets for checkboxes and radios (USWDS feature).
+    + [class*='__label'] {
+      background-color: $white;
+      border: 2px solid rgba(27, 27, 27, 0.3);
+      color: #1b1b1b;
+      border-radius: 0.25rem;
+      margin-top: $spacing-8;
+      padding: $spacing-12 $spacing-16 $spacing-12 $spacing-40;
+
+      &::before {
+        left: $spacing-8;
+      }
+    }
+  }
+
+  &:checked + [class*='__label']::before,
+  &:checked:disabled + [class*='__label']::before,
+  &:checked[aria-disabled='true'] + [class*='__label']::before {
+    background-position: center center;
+    background-size: contain;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' role='img' stroke='transparent' fill='white' viewBox='1.5 1.5 21 21'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E"),
+      linear-gradient(transparent, transparent);
+    background-repeat: no-repeat;
+    @media print {
+      background-image: none;
+      background-color: $white;
+      content: '\2714';
+      text-align: center;
+    }
+
+    @media (forced-colors: $forced-color-active) {
+      background-color: ButtonText;
+
+      &--tile {
+        background-color: ButtonText;
+      }
+    }
+  }
+
+  &:checked:not(:disabled, [aria-disabled='true']) {
+    + [class*='__label']::before {
+      background-color: $blue-60;
+      border: rem(1px) solid $blue-60;
+    }
+  }
+
+  &:checked:not(:disabled, [aria-disabled='true']) + [class*='__label'] {
+    &:hover {
+      &::before {
+        background-color: $blue-70;
+      }
+    }
+  }
+}
+
+.qpp-c-checkbox__label,
+.qppds .qpp-c-checkbox__label,
+.qpp-prose .qpp-c-checkbox__label {
+  cursor: pointer;
+  display: inherit;
+  font-weight: $font-regular;
+  margin-top: $spacing-12;
+  padding-left: $spacing-32;
+  position: relative;
+
+  &::before {
+    content: ' ';
+    background: $white;
+    border: 1px solid $gray-80;
+    border-radius: 3px;
+    box-sizing: border-box;
+    display: block;
+    top: 0;
+    left: 0;
+    margin-left: 0;
+    margin-top: 0;
+    position: absolute;
+    z-index: 1;
+  }
+
+  &::after {
+    content: ' ';
+    background: none;
+    border-radius: 1rem;
+    box-sizing: border-box;
+    display: block;
+    top: 0;
+    left: 0;
+    margin-left: 0;
+    margin-top: 0;
+    position: absolute;
+    z-index: 0;
+    box-shadow: 0 0 0 0 transparent;
+    transition: box-shadow 0.5s ease 0.04s;
+  }
+}
+
+.qpp-c-checkbox__label-description {
+  display: block;
+  //font-size: $font-size-base;
+  margin-top: $spacing-16;
+}
+/* stylelint-enable selector-max-specificity, max-nesting-depth, selector-max-compound-selectors, value-list-comma-newline-after */