qpp-style 2.1.13 → 2.2.0-sm.0

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

@@ -0,0 +1,185 @@
+@use 'sass:math';
+@use '../settings/variables' as v;
+@use '../settings/mixins' as m;
+
+/* 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: v.$white;
+
+  &__label {
+    font-size: v.$font-size-16;
+    line-height: v.$line-height-lg;
+    &::before,
+    &::after {
+      width: v.$spacing-20;
+      height: v.$spacing-20;
+    }
+  }
+
+  &--small {
+    .qpp-c-radio__label {
+      font-size: v.$font-size-14;
+      line-height: v.$line-height-md;
+      &::before,
+      &::after {
+        width: v.$spacing-16;
+        height: v.$spacing-16;
+      }
+    }
+  }
+
+  &__input {
+    // The actual input element is only visible to screen readers, because
+    // all visual styling is done via the label.
+    @include m.visually-hidden;
+    background-color: v.$white;
+
+    &:focus {
+      outline: none;
+
+      + [class*='__label']::before {
+        @include m.focus-ring;
+        border: 0;
+        border-radius: 99rem;
+        box-shadow: 0 0 0 2px v.$blue-70, 0 0 0 4px v.$blue-10;
+        background-color: v.$white;
+      }
+
+      &:checked {
+        + [class*='__label']::before {
+          box-shadow: 0 0 0 2px v.$blue-70, inset 0 0 0 3px v.$white,
+            0 0 0 5px v.$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 v.$gray-20, inset 0 0 0 3px v.$white;
+        }
+      }
+    }
+
+    &:hover:not(:disabled) {
+      + [class*='__label']::before {
+        box-shadow: 0 0 0 2px v.$blue-80, inset 0 0 0 3px v.$white;
+      }
+
+      &:checked {
+        + [class*='__label']::before {
+          box-shadow: 0 0 0 2px v.$blue-80, inset 0 0 0 3px v.$white;
+          background-color: v.$blue-80;
+        }
+
+        &:focus {
+          + [class*='__label']::before {
+            box-shadow: 0 0 0 2px v.$blue-80, inset 0 0 0 3px v.$white,
+              0 0 0 5px v.$blue-10;
+          }
+        }
+      }
+
+      &:not(:checked) {
+        + [class*='__label']::before {
+          box-shadow: 0 0 0 2px v.$gray-80;
+          background-color: v.$gray-04;
+        }
+      }
+    }
+
+    &:active:not(:disabled, :checked) {
+      + [class*='__label'] {
+        &::after {
+          box-shadow: 0 0 0 0.5rem v.$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: v.$white;
+        border: 2px solid rgba(27, 27, 27, 0.3);
+        color: #1b1b1b;
+        border-radius: 0.25rem;
+        margin-top: v.$spacing-8;
+        padding: v.$spacing-12 v.$spacing-16 v.$spacing-12 v.$spacing-40;
+
+        &::before {
+          left: v.$spacing-8;
+        }
+      }
+    }
+
+    &:checked + [class*='__label']::before {
+      background-color: v.$blue-60;
+      box-shadow: 0 0 0 2px v.$blue-60, inset 0 0 0 3px v.$white;
+      @media print {
+        box-shadow: 0 0 0 2px v.$blue-60, inset 0 0 0 3px v.$white;
+      }
+    }
+
+    &:checked:disabled + [class*='__label']::before,
+    &:checked[aria-disabled='true'] + [class*='__label']::before {
+      background-color: v.$gray-20;
+      box-shadow: 0 0 0 2px v.$gray-20, inset 0 0 0 3px v.$white;
+    }
+  }
+
+  &__label,
+  .qppds .qpp-c-radio__label,
+  .qpp-prose .qpp-c-radio_label {
+    cursor: pointer;
+    display: inherit;
+    font-weight: v.$font-regular;
+    margin-top: v.$spacing-12;
+    padding-left: v.$spacing-32;
+    position: relative;
+
+    &::before {
+      content: ' ';
+      background: v.$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 v.$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: v.$font-size-base;
+    margin-top: v.$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,163 @@
+@use '../settings/variables' as v;
+@use '../settings/mixins' as m;
+@use '../settings/functions' as f;
+
+@mixin _search-icon {
+  background: transparent;
+  border: f.rem(1px) solid transparent;
+  position: absolute;
+  margin: f.rem(4px);
+  padding: f.rem(5px);
+  line-height: 0;
+  color: v.$gray-80;
+  border-radius: 50%;
+
+  > svg {
+    margin-top: 0;
+    margin-bottom: 0;
+    width: f.rem(20px);
+    height: f.rem(20px);
+  }
+}
+
+@mixin _search-icon-button {
+  @include _search-icon;
+
+  &:disabled {
+    color: v.$gray-70;
+  }
+
+  &:hover {
+    color: v.$gray-80;
+    background-color: rgba(0, 0, 0, 0.05);
+  }
+
+  &:active {
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+
+  &:focus {
+    @include m.focus-ring;
+    box-shadow: 0 0 0 3px v.$blue-10;
+    border-radius: 50%;
+    color: v.$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: v.$spacing-40;
+    margin-right: 0;
+
+    &:placeholder-shown ~ button,
+    &:placeholder-shown ~ .qpp-c-search__icon {
+      color: v.$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: v.$spacing-12;
+
+    .qpp-c-text-input {
+      display: inline-block;
+      margin-right: 0;
+    }
+  }
+
+  &.qpp-c-search--global {
+    position: relative;
+
+    .qpp-c-text-input {
+      padding-left: 1rem;
+      border-radius: 3px 0 0 3px;
+    }
+
+    .qpp-c-search__wrap {
+      margin-right: 0;
+      flex: 100%;
+      z-index: 1;
+
+      > .qpp-c-text-input {
+        width: 100%;
+      }
+    }
+
+    .qpp-c-search__submit {
+      position: relative;
+      border-radius: 0 3px 3px 0;
+      margin-left: -1px;
+      color: v.$blue-60;
+
+      &:focus {
+        z-index: 1;
+        /* stylelint-disable-next-line max-nesting-depth */
+        ~ * {
+          z-index: 0;
+        }
+      }
+
+      &:hover {
+        /* stylelint-disable-next-line declaration-no-important */
+        color: v.$blue-70 !important;
+      }
+
+      @include m.media-breakpoint(xs) {
+        padding: 0.75rem 1.5rem;
+      }
+    }
+  }
+}
+
+.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: v.$spacing-16;
+    padding-right: v.$spacing-40;
+    margin-right: 0;
+  }
+}

package/styles/qppds/components/_sidebar.scss

@@ -0,0 +1,10 @@
+// Import the sidebar styles
+@import '../settings/index';
+@import 'sidebar/animations';
+@import 'sidebar/sidebar';
+@import 'sidebar/links';
+@import 'sidebar/details';
+@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,193 @@
+@use '../settings/variables' as v;
+@use '../settings/mixins' as m;
+@use '../settings/functions' as f;
+
+.qpp-c-step-indicator {
+  font-family: v.$font-rubik;
+  font-size: v.$font-size-16;
+  background-color: transparent;
+  margin-bottom: v.$spacing-24;
+  margin-left: -1px;
+  margin-right: -1px;
+
+  @include m.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: f.rem(4px);
+  position: relative;
+
+  // Add segment
+  &::after {
+    background-color: v.$gray-10;
+    content: '';
+    display: block;
+    // Use a fixed segment height for mobile regardless of settings
+    height: f.rem(4px);
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+}
+
+.qpp-c-step-indicator__segment--complete {
+  &::after {
+    background-color: v.$blue-80;
+  }
+  .usa-step-indicator__segment-label {
+    color: v.$blue-80;
+  }
+}
+
+.qpp-c-step-indicator__segment--current {
+  &::after {
+    background-color: v.$blue-60;
+  }
+  .usa-step-indicator__segment-label {
+    color: v.$blue-60;
+    font-weight: v.$font-medium;
+  }
+}
+
+.qpp-c-step-indicator__segment-label {
+  display: none;
+  // Show labels only at the min-width
+  @include m.at-media(xs) {
+    color: v.$gray-80;
+    display: block;
+    font-size: v.$font-size-14;
+    // Add margin based on segment size
+    margin-top: v.$spacing-16;
+    padding-right: v.$spacing-12;
+    text-align: left;
+  }
+}
+
+.qpp-c-step-indicator__header {
+  align-items: baseline;
+  display: flex;
+}
+
+.qpp-c-step-indicator__heading {
+  color: v.$gray-80;
+  font-family: v.$font-rubik;
+  font-size: v.$font-size-24;
+  font-weight: v.$font-medium;
+  margin: v.$spacing-24 0 0;
+  @include m.at-media(xs) {
+    font-size: v.$font-size-20;
+    margin-top: v.$spacing-24;
+  }
+}
+
+.qpp-c-step-indicator__heading-counter {
+  display: block;
+  font-size: v.$font-size-14;
+  letter-spacing: f.rem(0.5px);
+  padding-bottom: v.$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: v.$font-regular;
+  font-size: v.$font-size-24;
+}
+
+.qpp-c-step-indicator--counters {
+  .qpp-c-step-indicator__segment {
+    @include m.at-media(xs) {
+      margin-left: 0;
+      margin-right: 0;
+      margin-top: v.$spacing-16;
+
+      // Add counter
+      &::before {
+        font-size: v.$font-size-14;
+        height: f.rem(28px);
+        border-radius: 99rem;
+        width: f.rem(28px);
+        font-feature-settings: 'tnum' 1, 'kern' 1;
+        background-color: v.$white;
+        box-shadow: inset 0 0 0 f.rem(3px) v.$gray-10,
+          0 0 0 v.$spacing-4 v.$white;
+        color: v.$gray-80;
+        content: counter(qpp-c-step-indicator);
+        display: block;
+        font-weight: v.$font-medium;
+        left: 0;
+        line-height: 1.5;
+        // Magic number circle centering
+        padding: calc((#{v.$spacing-24} - (2ex * #{v.$line-height-sm})) * 0.5);
+        position: absolute;
+        text-align: center;
+        top: calc((#{v.$spacing-24} - #{v.$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: v.$blue-80;
+      box-shadow: 0 0 0 v.$spacing-4 v.$white;
+      color: v.$white;
+      height: v.$spacing-24;
+      width: v.$spacing-24;
+      line-height: v.$line-height-md;
+    }
+  }
+
+  .qpp-c-step-indicator__segment--current {
+    &::before {
+      background-color: v.$blue-60;
+      box-shadow: 0 0 0 v.$spacing-4 v.$white;
+      color: v.$white;
+      height: v.$spacing-24;
+      width: v.$spacing-24;
+      line-height: v.$line-height-md;
+    }
+
+    .qpp-c-step-indicator__segment-label {
+      font-weight: v.$font-medium;
+      color: v.$blue-60;
+    }
+  }
+
+  .qpp-c-step-indicator__segment-label {
+    @include m.at-media(xs) {
+      // Add counter margin
+      margin-top: f.rem(20px);
+    }
+  }
+}

package/styles/qppds/components/_table.scss

@@ -0,0 +1,159 @@
+@use '../settings/variables' as v;
+@use '../settings/mixins' as m;
+@use '../settings/functions' as f;
+
+$-table-margin: 0;
+
+.qpp-c-table {
+  color: v.$gray-80;
+  box-sizing: border-box;
+
+  &::after,
+  &::before {
+    box-sizing: inherit;
+  }
+
+  border-collapse: collapse;
+  border-spacing: 0;
+
+  font-family: v.$font-rubik;
+  font-size: v.$font-size-16;
+  font-weight: v.$font-regular;
+  line-height: v.$line-height-lg;
+  margin: $-table-margin;
+
+  thead {
+    th,
+    td {
+      background-color: v.$gray-04;
+    }
+  }
+
+  tr {
+    &.qpp-c-table--primary-header {
+      color: v.$white;
+      th,
+      td {
+        background-color: v.$blue-80;
+      }
+    }
+
+    &.qpp-c-table--secondary-header {
+      th,
+      td {
+        background-color: v.$gray-04;
+      }
+    }
+  }
+
+  th {
+    font-weight: v.$font-medium;
+  }
+
+  td {
+    font-weight: v.$font-regular;
+  }
+
+  th,
+  td {
+    border-bottom: f.rem(1px) solid v.$gray-10;
+    background-color: v.$white;
+    padding: v.$spacing-16 v.$spacing-12;
+    text-align: left;
+    vertical-align: top;
+  }
+
+  th:first-child,
+  td:first-child {
+    padding-left: v.$spacing-16;
+  }
+
+  th:last-child,
+  td:last-child {
+    padding-right: v.$spacing-16;
+  }
+
+  caption {
+    background-color: v.$blue-80;
+    color: v.$white;
+    font-size: v.$font-size-20;
+    font-weight: v.$font-regular;
+    padding: v.$spacing-16;
+    text-align: left;
+  }
+
+  ol,
+  ul {
+    margin: v.$spacing-8 0;
+  }
+
+  @include m.media-breakpoint(xs) {
+    th:first-child,
+    td:first-child {
+      padding-left: v.$spacing-40;
+    }
+
+    th:last-child,
+    td:last-child {
+      padding-right: v.$spacing-40;
+    }
+
+    caption {
+      padding: v.$spacing-24 v.$spacing-40;
+    }
+  }
+
+  &--secondary,
+  &--alt {
+    caption {
+      background-color: v.$gray-04;
+      color: v.$gray-90;
+      border-bottom: f.rem(1px) solid v.$gray-10;
+
+      @include m.media-breakpoint(xs) {
+        padding: v.$spacing-16 v.$spacing-40;
+      }
+    }
+  }
+
+  /* stylelint-disable selector-no-qualifying-type */
+  &--stacked {
+    @include m.at-media-max(xs) {
+      @include m.table-stacked-styles;
+    }
+
+    @include m.at-media(xs) {
+      th[data-label] {
+        font-weight: v.$font-regular;
+      }
+    }
+  }
+
+  &--stacked-header {
+    @include m.at-media-max(xs) {
+      @include m.table-stacked-styles;
+      @include m.table-stacked-header-styles;
+    }
+
+    @include m.at-media(xs) {
+      th[data-label] {
+        font-weight: v.$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;
+  }
+}