qpp-style 0.0.8 → 0.0.10

package/styles/qppds/components/_radio-button.scss

@@ -0,0 +1,184 @@
+@use 'sass:math';
+@import '../settings/index';
+
+/* stylelint-disable selector-max-specificity, max-nesting-depth, selector-max-compound-selectors, value-list-comma-newline-after */
+.qpp-c-radio,
+.qppds .qpp-c-radio,
+.qpp-prose .qpp-c-radio {
+  background: $white;
+
+  &__label {
+    font-size: $font-size-16;
+    line-height: $line-height-lg;
+    &::before,
+    &::after {
+      width: $spacing-20;
+      height: $spacing-20;
+    }
+  }
+
+  &--small {
+    .qpp-c-radio__label {
+      font-size: $font-size-14;
+      line-height: $line-height-md;
+      &::before,
+      &::after {
+        width: $spacing-16;
+        height: $spacing-16;
+      }
+    }
+  }
+
+  &__input {
+    // The actual input element is only visible to screen readers, because
+    // all visual styling is done via the label.
+    @include visually-hidden;
+    background-color: $white;
+
+    &:focus {
+      outline: none;
+
+      + [class*='__label']::before {
+        @include focus-ring;
+        border: 0;
+        border-radius: 99rem;
+        box-shadow: 0 0 0 2px $blue-70, 0 0 0 4px $blue-10;
+        background-color: $white;
+      }
+
+      &:checked {
+        + [class*='__label']::before {
+          box-shadow: 0 0 0 2px $blue-70, inset 0 0 0 3px $white,
+            0 0 0 5px $blue-10;
+        }
+      }
+    }
+
+    &:disabled,
+    &[aria-disabled='true'] {
+      + [class*='__label'] {
+        cursor: not-allowed;
+        color: rgba(27, 27, 27, 0.3);
+        &::before {
+          box-shadow: 0 0 0 2px $gray-20, inset 0 0 0 3px $white;
+        }
+      }
+    }
+
+    &:hover:not(:disabled) {
+      + [class*='__label']::before {
+        box-shadow: 0 0 0 2px $blue-80, inset 0 0 0 3px $white;
+      }
+
+      &:checked {
+        + [class*='__label']::before {
+          box-shadow: 0 0 0 2px $blue-80, inset 0 0 0 3px $white;
+          background-color: $blue-80;
+        }
+
+        &:focus {
+          + [class*='__label']::before {
+            box-shadow: 0 0 0 2px $blue-80, inset 0 0 0 3px $white,
+              0 0 0 5px $blue-10;
+          }
+        }
+      }
+
+      &:not(:checked) {
+        + [class*='__label']::before {
+          box-shadow: 0 0 0 2px $gray-80;
+          background-color: $gray-04;
+        }
+      }
+    }
+
+    &:active:not(:disabled, :checked) {
+      + [class*='__label'] {
+        &::after {
+          box-shadow: 0 0 0 0.5rem $blue-10;
+          transition: box-shadow 0.08s ease;
+        }
+      }
+    }
+
+    // Radios 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 {
+      background-color: $blue-60;
+      box-shadow: 0 0 0 2px $blue-60, inset 0 0 0 3px $white;
+      @media print {
+        box-shadow: 0 0 0 2px $blue-60, inset 0 0 0 3px $white;
+      }
+    }
+
+    &:checked:disabled + [class*='__label']::before,
+    &:checked[aria-disabled='true'] + [class*='__label']::before {
+      background-color: $gray-20;
+      box-shadow: 0 0 0 2px $gray-20, inset 0 0 0 3px $white;
+    }
+  }
+
+  &__label,
+  .qppds .qpp-c-radio__label,
+  .qpp-prose .qpp-c-radio_label {
+    cursor: pointer;
+    display: inherit;
+    font-weight: $font-regular;
+    margin-top: $spacing-12;
+    padding-left: $spacing-32;
+    position: relative;
+
+    &::before {
+      content: ' ';
+      background: $white;
+      display: block;
+      // top: 0;
+      left: 0;
+      margin-left: 0;
+      margin-top: 0;
+      position: absolute;
+      z-index: 1;
+      border-radius: 99rem;
+      box-shadow: 0 0 0 2px $gray-80;
+    }
+
+    &::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;
+    }
+  }
+
+  &__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 */

package/styles/qppds/components/_search.scss

@@ -0,0 +1,118 @@
+@import '../settings/index';
+
+@mixin search-icon {
+  background: transparent;
+  border: rem(1px) solid transparent;
+  position: absolute;
+  margin: rem(4px);
+  padding: rem(5px);
+  line-height: 0;
+  color: $gray-80;
+  border-radius: 50%;
+
+  > svg {
+    margin-top: 0;
+    margin-bottom: 0;
+    width: rem(20px);
+    height: rem(20px);
+  }
+}
+
+@mixin search-icon-button {
+  @include search-icon;
+
+  &:disabled {
+    color: $gray-70;
+  }
+
+  &:hover {
+    color: $gray-80;
+    background-color: rgba(0, 0, 0, 0.05);
+  }
+
+  &:active {
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+
+  &:focus {
+    @include focus-ring;
+    box-shadow: 0 0 0 3px $blue-10;
+    border-radius: 50%;
+    color: $gray-80;
+  }
+}
+
+.qpp-c-search {
+  position: relative;
+
+  .qpp-c-search__submit {
+    display: inline-block;
+    margin-top: 0;
+  }
+
+  .qpp-c-text-input {
+    display: inline-block;
+    padding-left: $spacing-40;
+    margin-right: $spacing-12;
+
+    &:placeholder-shown ~ button,
+    &:placeholder-shown ~ .qpp-c-search__icon {
+      color: $gray-70;
+    }
+
+    &:placeholder-shown ~ .qpp-c-search__clear {
+      display: none;
+    }
+
+    &::-webkit-search-cancel-button {
+      display: none;
+      appearance: none;
+      height: 16px;
+      width: 16px;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
+    }
+
+    &::-ms-clear {
+      display: none;
+    }
+  }
+
+  .qpp-c-search__icon {
+    @include search-icon;
+    display: inline-block;
+    top: 0;
+    left: 0;
+  }
+
+  .qpp-c-search__wrap {
+    position: relative;
+    display: inline-block;
+    margin-right: $spacing-12;
+
+    .qpp-c-text-input {
+      display: inline-block;
+      margin-right: 0;
+    }
+  }
+}
+
+.qpp-c-search.qpp-c-search--compact {
+  .qpp-c-search__submit {
+    @include search-icon-button;
+    top: 0;
+    right: 0;
+
+    &.qpp-c-button {
+      > .qpp-icon-mat {
+        stroke-width: 0;
+      }
+    }
+  }
+
+  .qpp-c-text-input {
+    display: inline-block;
+    padding-left: $spacing-16;
+    padding-right: $spacing-40;
+    margin-right: 0;
+  }
+}

package/styles/{components → qppds/components}/_sidebar.scss

@@ -1,4 +1,5 @@
 // Import the sidebar styles
+@import '../settings/index';
 @import 'sidebar/animations';
 @import 'sidebar/sidebar';
 @import 'sidebar/links';
@@ -6,3 +7,4 @@
 @import 'sidebar/sidebar-animation';
 @import 'sidebar/project-specific/wi';
 @import 'sidebar/sidebar-tooltip';
+@import 'sidebar/select-role-dropdown'

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

@@ -0,0 +1,157 @@
+@import '../settings/index';
+
+$table-margin: 0;
+
+.qpp-c-table {
+  color: $gray-80;
+  box-sizing: border-box;
+
+  &::after,
+  &::before {
+    box-sizing: inherit;
+  }
+
+  border-collapse: collapse;
+  border-spacing: 0;
+
+  font-family: $font-rubik;
+  font-size: $font-size-16;
+  font-weight: $font-regular;
+  line-height: $line-height-lg;
+  margin: $table-margin;
+
+  thead {
+    th,
+    td {
+      background-color: $gray-04;
+    }
+  }
+
+  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;
+  }
+
+  td {
+    font-weight: $font-regular;
+  }
+
+  th,
+  td {
+    border-bottom: rem(1px) solid $gray-10;
+    background-color: $white;
+    padding: $spacing-16 $spacing-12;
+    text-align: left;
+    vertical-align: top;
+  }
+
+  th:first-child,
+  td:first-child {
+    padding-left: $spacing-16;
+  }
+
+  th:last-child,
+  td:last-child {
+    padding-right: $spacing-16;
+  }
+
+  caption {
+    background-color: $blue-80;
+    color: $white;
+    font-size: $font-size-20;
+    font-weight: $font-regular;
+    padding: $spacing-16;
+    text-align: left;
+  }
+
+  ol,
+  ul {
+    margin: $spacing-8 0;
+  }
+
+  @include media-breakpoint(xs) {
+    th:first-child,
+    td:first-child {
+      padding-left: $spacing-40;
+    }
+
+    th:last-child,
+    td:last-child {
+      padding-right: $spacing-40;
+    }
+
+    caption {
+      padding: $spacing-24 $spacing-40;
+    }
+  }
+
+  &--secondary,
+  &--alt {
+    caption {
+      background-color: $gray-04;
+      color: $gray-90;
+      border-bottom: rem(1px) solid $gray-10;
+
+      @include media-breakpoint(xs) {
+        padding: $spacing-16 $spacing-40;
+      }
+    }
+  }
+
+  /* stylelint-disable selector-no-qualifying-type */
+  &--stacked {
+    @include at-media-max(xs) {
+      @include table-stacked-styles;
+    }
+
+    @include at-media(xs) {
+      th[data-label] {
+        font-weight: $font-regular;
+      }
+    }
+  }
+
+  &--stacked-header {
+    @include at-media-max(xs) {
+      @include table-stacked-styles;
+      @include table-stacked-header-styles;
+    }
+
+    @include at-media(xs) {
+      th[data-label] {
+        font-weight: $font-regular;
+      }
+    }
+  }
+  /* stylelint-enable selector-no-qualifying-type */
+}
+
+.qpp-c-table-container--scrollable {
+  overflow-y: hidden;
+  margin: $table-margin; // swap global margin to container
+
+  .qpp-c-table {
+    margin: 0;
+  }
+
+  th,
+  td {
+    white-space: nowrap;
+  }
+}