qpp-style 0.0.8 → 0.0.10

package/styles/qppds/base/index.scss

@@ -2,8 +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 {
@@ -33,11 +36,44 @@
   .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;
+      }
+    }
+
+    &: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 {
@@ -49,7 +85,7 @@
 
   .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,10 +1,14 @@
 @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: 0;
+  border: 1px solid $blue-60;
   border-radius: 3px;
   box-sizing: border-box;
   color: $white;
@@ -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;
@@ -22,25 +26,34 @@
   &:hover,
   &.qpp-c-button--hover {
     background-color: $blue-70;
+    border: 1px solid $blue-70;
     color: $white;
   }
 
   &:focus,
   &.qpp-c-button--focus {
-    box-shadow: 0 0 0 4px fade-out($blue-60, 0.6);
+    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,
   &.qpp-c-button--active {
     background-color: darken($blue-70, 3%);
+    border: 1px solid darken($blue-70, 3%);
     color: $white;
   }
 
   &:disabled,
   &.qpp-c-button--disabled {
     background-color: $gray-10;
+    border: 1px solid $gray-10;
     color: $gray-60;
     pointer-events: none;
   }
@@ -49,6 +62,12 @@
     padding: $spacing-16 $spacing-24;
   }
 
+  &.qpp-c-button--text {
+    background-color: transparent;
+    border: 1px solid transparent;
+    padding: 1px;
+  }
+
   // Secondary Button
   &.qpp-c-button--secondary {
     background-color: $white;
@@ -73,6 +92,11 @@
       background-color: $gray-10;
       color: $gray-60;
     }
+
+    &:focus,
+    &.qpp-c-button--focus {
+      border: 1px solid $blue-60;
+    }
   }
 
   // White Button
@@ -97,7 +121,8 @@
 
     &:focus,
     &.qpp-c-button--focus {
-      box-shadow: 0 0 0 4px fade-out($white, 0.5);
+      border: 1px solid $blue-60;
+      box-shadow: 0 0 0 4px $blue-10;
     }
 
     &:disabled,
@@ -106,6 +131,12 @@
       color: $gray-60;
       border-color: $gray-10;
     }
+
+    &.qpp-c-button--text {
+      background-color: transparent;
+      border: 1px solid transparent;
+      padding: 1px;
+    }
   }
 
   // Outline Button
@@ -134,15 +165,16 @@
 
     &:focus,
     &.qpp-c-button--focus {
-      box-shadow: 0 0 0 4px fade-out($white, 0.5);
+      border: 1px solid $blue-60;
+      box-shadow: 0 0 0 4px $blue-10;
     }
   }
 
   // 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,
@@ -155,6 +187,7 @@
     &:hover,
     &.qpp-c-button--hover {
       background-color: fade-out($red-50, 0.9);
+      color: $red-60;
     }
 
     &:active,
@@ -164,21 +197,104 @@
 
     &:focus,
     &.qpp-c-button--focus {
-      box-shadow: 0 0 0 4px fade-out($red-50, 0.6);
+      border: 1px solid $red-50;
+      box-shadow: 0 0 0 4px $red-10;
       outline: none;
       text-decoration: none;
     }
+
+    &.qpp-c-button--text {
+      background-color: transparent;
+      border: 1px solid transparent;
+      padding: 1px;
+    }
+  }
+}
+
+.qpp-c-button.qpp-c-button--text,
+.qppds .qpp-c-button.qpp-c-button--text {
+  color: $blue-60;
+
+  &:disabled,
+  &.qpp-c-button--disabled {
+    color: $gray-60;
+  }
+
+  &: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 {
+    color: $red-50;
+
+    &:disabled,
+    &.qpp-c-button--disabled {
+      background-color: transparent;
+      color: $gray-60;
+    }
+
+    &:hover,
+    &.qpp-c-button--hover {
+      color: $red-60;
+    }
+
+    &:focus,
+    &.qpp-c-button--focus {
+      background-color: transparent;
+      border: 1px solid $red-50;
+    }
+  }
+
+  &.qpp-c-button--white {
+    color: $white;
+
+    &:disabled,
+    &.qpp-c-button--disabled {
+      background-color: transparent;
+      color: $gray-10;
+    }
+
+    &:hover,
+    &.qpp-c-button--hover {
+      color: $gray-10;
+    }
+
+    &:focus,
+    &.qpp-c-button--focus {
+      background-color: transparent;
+      border: 1px solid $blue-60;
+    }
   }
 }
 
 // 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;
 }
@@ -186,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;
+      }
+    }
+  }
+}