@onemrvapublic/design-system 20.11.3 → 21.0.0-develop.2

package/theme/overrides/_progress-bar.scss

@@ -0,0 +1,29 @@
+@use '@angular/material' as mat;
+@use '../utilities/palettes' as palettes;
+
+@mixin override() {
+  @include mat.progress-bar-overrides(
+    (
+      track-height: 0.25rem,
+    )
+  );
+  //
+  //.mat-mdc-progress-bar {
+  //  border-radius: var(--button-border-radius);
+  //
+  //  .mdc-linear-progress__bar-inner {
+  //    border-radius: var(--button-border-radius);
+  //  }
+  //  &[aria-valuenow='100'] {
+  //    .mdc-linear-progress__bar-inner {
+  //      @include mat.theme(
+  //          (
+  //            color: (
+  //              primary: palettes.$success-palette,
+  //            ),
+  //          )
+  //      );
+  //    }
+  //  }
+  //}
+}

package/theme/overrides/_radio.scss

@@ -0,0 +1,16 @@
+@use '@angular/material' as mat;
+
+@mixin override() {
+  @include mat.radio-overrides(
+    (
+      selected-icon-color: var(--mat-sys-tertiary),
+      selected-hover-icon-color: var(--mat-sys-tertiary),
+      selected-focus-icon-color: var(--mat-sys-tertiary),
+      label-text-size: var(--mat-sys-label-large-size),
+      label-text-weight: var(--mat-sys-label-large-weight),
+    )
+  );
+  .mat-radio-inner-circle {
+    background: var(--background-gradient);
+  }
+}

package/theme/overrides/_select.scss

@@ -0,0 +1,124 @@
+@use '@angular/material' as mat;
+@use 'sass:map';
+
+@mixin override() {
+  @include mat.select-overrides(
+    (
+      panel-background-color: var(--mat-sys-surface),
+      trigger-text-font: var(--mat-sys-body-medium-font),
+      trigger-text-size: var(--mat-sys-body-medium-size),
+      trigger-text-weight: var(--mat-sys-body-medium-weight),
+    )
+  );
+
+  mat-select {
+    &.mat-mdc-select-multiple {
+      .mat-mdc-select-value-text {
+        padding-right: calc(7 * var(--spacer));
+        display: block;
+      }
+    }
+  }
+
+  .onemrva-readonly {
+    .mat-mdc-select-value-text,
+    .mat-mdc-select-value {
+      white-space: unset;
+    }
+  }
+
+  .cdk-overlay-pane {
+    .mat-mdc-select-panel {
+      overflow: hidden;
+      padding: 0;
+      .selection-choice {
+        font: var(--mat-sys-title-small);
+        width: 98%;
+        a {
+          text-decoration: underline;
+        }
+        span {
+          &.grey {
+            color: var(--mat-sys-neutral10);
+          }
+        }
+        .mat-disabled {
+          pointer-events: none;
+          font-weight: 400;
+          cursor: default;
+          // color: var(--mat-sys-neutral10);
+          text-decoration: none;
+        }
+      }
+      .option-list {
+        overflow-y: auto;
+        height: auto;
+        max-height: 226px;
+      }
+    }
+    .mat-mdc-option[aria-disabled='true'].contains-mat-select-search {
+      position: sticky;
+      top: 0;
+      z-index: 1;
+      opacity: 1;
+      margin-top: calc(-1 * var(--spacer));
+      pointer-events: all;
+
+      .mat-icon {
+        margin-right: 0;
+        margin-left: 0;
+      }
+      mat-pseudo-checkbox {
+        display: none;
+      }
+      .mdc-list-item__primary-text {
+        opacity: 1;
+      }
+    }
+    .mat-select-search-toggle-all-checkbox {
+      padding-left: var(--half-spacer);
+    }
+  }
+
+  .xlarge {
+    @include mat.dialog-overrides(
+      (
+        container-max-width: 1280px,
+        container-min-width: 996px,
+      )
+    );
+  }
+  .large {
+    @include mat.dialog-overrides(
+      (
+        container-max-width: 996px,
+        container-min-width: 812px,
+      )
+    );
+  }
+  .medium {
+    @include mat.dialog-overrides(
+      (
+        container-max-width: 812px,
+        container-min-width: 628px,
+      )
+    );
+  }
+  .small {
+    @include mat.dialog-overrides(
+      (
+        container-max-width: 628px,
+        container-min-width: 444px,
+      )
+    );
+  }
+
+  //.mat-mdc-select {
+  //  padding: 0;
+  //  --mat-select-invalid-arrow-color: #{µ.error($theme, 500)};
+  //  //.mat-mdc-text-field-wrapper.mdc-text-field--outlined
+  //  //  .mat-mdc-form-field-infix {
+  //  //  padding: 12px 0;
+  //  //}
+  //}
+}

package/theme/overrides/_sidenav.scss

@@ -0,0 +1,13 @@
+@use '@angular/material' as mat;
+@use 'sass:map';
+
+@mixin override() {
+  @include mat.sidenav-overrides(
+    (
+      container-elevation-shadow: var(--mat-sys-level2),
+    )
+  );
+  .mat-drawer-inner-container {
+    overflow: hidden;
+  }
+}

package/theme/overrides/_slide-toggle.scss

@@ -0,0 +1,53 @@
+@use '@angular/material' as mat;
+
+@mixin override() {
+  $size: 24px;
+  $handleSize: calc($size - 4px);
+  $margin: 0 4px;
+
+  @include mat.slide-toggle-overrides(
+    (
+      //unselected-track-color: var(--mat-sys-outline),
+      unselected-icon-color: white,
+      track-outline-color: var(--mat-sys-surface-variant),
+      selected-track-outline-color: var(--mat-sys-secondary),
+      label-text-font: var(--mat-sys-body-medium-font),
+      label-text-size: var(--mat-sys-body-medium-size),
+      label-text-weight: var(--mat-sys-body-medium-weight),
+      label-text-line-height: var(--mat-sys-body-medium-line-height),
+      track-height: $size,
+      handle-height: $size,
+
+      touch-target-size: $size,
+      state-layer-size: $size,
+      handle-width: $size,
+      track-width: 42px,
+
+      selected-icon-size: $handleSize,
+      pressed-handle-size: $handleSize,
+      unselected-handle-size: $handleSize,
+      with-icon-handle-size: $handleSize,
+
+      selected-handle-horizontal-margin: $margin,
+      unselected-pressed-handle-horizontal-margin: $margin,
+      selected-with-icon-handle-horizontal-margin: 0,
+      selected-pressed-handle-horizontal-margin: 0,
+      unselected-handle-horizontal-margin: $margin,
+      unselected-with-icon-handle-horizontal-margin: $margin,
+
+      track-outline-width: 0,
+      selected-track-outline-width: 0,
+      disabled-unselected-track-outline-width: 0
+    )
+  );
+
+  .mat-mdc-slide-toggle {
+    .mdc-switch:enabled:hover:not(:active),
+    .mdc-switch:enabled:focus:not(:active),
+    .mdc-switch:enabled {
+      .mdc-switch__track:after {
+        background: var(--background-gradient);
+      }
+    }
+  }
+}

package/theme/overrides/_stepper.scss

@@ -0,0 +1,196 @@
+@use '@angular/material' as mat;
+@use 'sass:map';
+
+@mixin override() {
+  @include mat.stepper-overrides(
+    (
+      header-icon-foreground-color: var(--mat-sys-outline-variant),
+      header-icon-background-color: var(--mat-sys-background),
+      header-selected-state-icon-background-color: var(--mat-sys-primary),
+      header-done-state-icon-background-color: var(--mat-sys-primary),
+      header-edit-state-icon-background-color: var(--mat-sys-primary),
+      header-selected-state-icon-foreground-color: var(--mat-sys-on-primary),
+      header-done-state-icon-foreground-color: var(--mat-sys-on-primary),
+      header-edit-state-icon-foreground-color: var(--mat-sys-on-primary),
+    )
+  );
+
+  mat-stepper,
+  mat-vertical-stepper,
+  onemrva-mat-vertical-stepper {
+    .mat-vertical-stepper-header {
+      .mat-step-icon {
+        border: 2px solid var(--mat-sys-outline-variant);
+        height: 2.5rem;
+        width: 2.5rem;
+        margin-right: 1rem;
+        .mat-step-icon-content {
+          mat-icon {
+            height: 1.6rem;
+            width: 1.6rem;
+            line-height: 1.6rem;
+            font-size: 1.6rem;
+          }
+          span {
+            font-size: 1.2rem;
+          }
+        }
+      }
+      .mat-step-icon-selected {
+        border: 2px solid var(--mat-sys-background);
+        outline: 2px solid var(--mat-sys-primary);
+      }
+      .mat-step-icon-state-done {
+        border: 2px solid var(--mat-sys-primary);
+      }
+      .mat-step-icon-state-error {
+        border: 2px solid var(--mat-sys-error);
+      }
+    }
+
+    .mat-vertical-content-container {
+      .mat-vertical-stepper-content {
+        .mat-vertical-content {
+          margin: var(--spacer);
+          padding: 0 1.5rem 1.5rem 1.5rem;
+
+          .mat-step-summary {
+            height: auto;
+            opacity: 1;
+            overflow: inherit;
+            transition:
+              height 0s 1s,
+              opacity 1s linear;
+          }
+
+          .mat-step-form {
+            height: 0;
+            opacity: 0;
+            overflow: hidden;
+            transition: none;
+
+            mat-form-field {
+              opacity: 0;
+            }
+          }
+        }
+
+        &[aria-expanded='true'] {
+          .mat-vertical-content {
+            .mat-step-summary {
+              height: 0;
+              opacity: 0;
+              overflow: hidden;
+              transition: none;
+            }
+
+            .mat-step-form {
+              height: auto;
+              opacity: 1;
+              transition:
+                height 0s 1s,
+                opacity 1s linear;
+              overflow: inherit;
+
+              mat-form-field {
+                opacity: 1;
+              }
+            }
+          }
+        }
+      }
+      &.mat-stepper-vertical-line {
+        &:before {
+          --mat-stepper-header-height: 3rem;
+          left: var(--spacer);
+        }
+      }
+    }
+  }
+
+  //mat-stepper,
+  //mat-vertical-stepper,
+  //onemrva-mat-vertical-stepper {
+  //  .mat-step-header {
+  //    .mat-step-icon {
+  //      background-color: white;
+  //      border: 2px solid white;
+  //      color: var(--mat-sys-background);
+  //      height: 38px;
+  //      width: 38px;
+  //
+  //      &:not(.mat-step-icon-state-done):not(.mat-step-icon-state-edit):not(
+  //          .mat-step-icon-selected
+  //        ):not(.mat-step-icon-state-error) {
+  //        //border: 2px solid µ.grayscale($theme);
+  //      }
+  //
+  //      .mat-icon {
+  //        height: inherit;
+  //      }
+  //    }
+  //    .mat-step-icon-selected,
+  //    .mat-step-icon-state-done,
+  //    .mat-step-icon-state-edit {
+  //      //background-color: µ.primary($theme);
+  //      color: white;
+  //      border: none;
+  //      border: 2px solid white;
+  //    }
+  //
+  //    .mat-step-icon-selected {
+  //      border: 2px solid white;
+  //      //outline: 2px solid µ.primary($theme);
+  //    }
+  //    .mat-step-icon-state-error {
+  //      //background-color: µ.warn($theme, 600);
+  //      color: white;
+  //      outline: none;
+  //      border: none;
+  //      mat-icon {
+  //        font-size: 16px;
+  //        height: 16px;
+  //        width: 16px;
+  //      }
+  //    }
+  //
+  //    .mat-step-label.mat-step-label-error {
+  //      //color: µ.warn($theme, 600);
+  //    }
+  //  }
+  //  .mat-step-icon-state-done + .mat-stepper-horizontal-line {
+  //    //border-top-color: µ.primary($theme);
+  //  }
+  //
+  //  .mat-stepper-horizontal-line {
+  //    margin: unset;
+  //  }
+  //
+  //  .mat-stepper-vertical-line:before {
+  //    top: 0;
+  //    bottom: 0;
+  //  }
+  //
+  //  .mat-step-text-label {
+  //    font-weight: 600;
+  //    font-family: 'Source Sans Pro';
+  //  }
+  //
+  //  .mat-horizontal-content-container {
+  //    padding-top: var(--spacer);
+  //  }
+  //
+  //  .mat-horizontal-stepper-header {
+  //    padding: 0 16px;
+  //    height: 58px;
+  //  }
+  //
+  //  .mat-vertical-stepper-header {
+  //    padding: 16px;
+  //  }
+  //}
+  //
+  //.mat-step-icon-content {
+  //  font-family: 'Source Sans Pro';
+  //}
+}

package/theme/overrides/_stickers.scss

@@ -0,0 +1,13 @@
+@use '@angular/material' as mat;
+@mixin override() {
+  onemrva-mat-sticker {
+    .mat-icon {
+      $font-size: 0.8rem;
+      $icon-size: 1rem;
+      margin-right: var(--half-spacer);
+      height: $icon-size;
+      width: $icon-size;
+      font-size: $icon-size;
+    }
+  }
+}

package/theme/overrides/_table.scss

@@ -0,0 +1,115 @@
+@use '@angular/material' as mat;
+@use '../utilities/variables' as variables;
+@mixin override() {
+  @include mat.table-overrides(
+    (
+      header-headline-size: 1rem,
+      header-headline-weight: 600,
+      row-item-label-text-size: 1rem,
+      footer-supporting-text-size: 1rem,
+      header-headline-font: var(--brand-font),
+    )
+  );
+
+  .mat-mdc-table {
+    .mat-mdc-table-sticky-border-elem-left {
+      border-right: 1px solid var(--mat-sys-outline, rgba(0, 0, 0, 0.12));
+    }
+
+    &:not(.mat-card-table) {
+      tbody tr,
+      mat-row {
+        &:nth-child(even) {
+          background-color: var(--mat-sys-primary-container);
+          // a {
+          //   color: var(--mat-sys-on-primary-container);
+          // }
+        }
+      }
+    }
+    th,
+    mat-header-row {
+      &.cdk-column-check {
+        width: 50px;
+        .mat-mdc-checkbox {
+          .mdc-checkbox {
+            padding: var(--spacer);
+          }
+        }
+      }
+      &.mat-mdc-header-cell {
+        vertical-align: bottom;
+        padding-bottom: var(--spacer);
+      }
+    }
+    tr,
+    mat-row {
+      transition: background-color 400ms ease-out;
+      &.onemrva-notice-row {
+        background: var(--mat-sys-surface-bright);
+      }
+      &.onemrva-clickable-row {
+        background: var(--mat-sys-primary-container);
+        color: var(--mat-sys-on-surface);
+        border-radius: var(--half-border-radius);
+        td:first-child {
+          border-radius: var(--half-border-radius) 0 0 var(--half-border-radius);
+        }
+        td:last-child {
+          border-radius: 0 var(--half-border-radius) var(--half-border-radius) 0;
+          padding-right: var(--spacer);
+        }
+        td:only-child {
+          border-radius: var(--half-border-radius);
+        }
+
+        &.clickable:hover,
+        &.clickable:active {
+          box-shadow: var(--mat-sys-level2);
+        }
+      }
+    }
+
+    &.mat-card-table {
+      border-spacing: 0 var(--spacer) !important;
+      .mat-divider {
+        color: var(--mat-sys-surface-bright);
+        &.mat-divider-vertical {
+          display: inline-flex;
+          height: 1.5em;
+        }
+      }
+    }
+    tr {
+      padding: var(--double-spacer);
+    }
+    tr,
+    mat-row {
+      &:not(.cdk-drag-preview) {
+        transition: background-color 400ms ease-out;
+
+        td,
+        mat-cell {
+          &.mat-mdc-cell {
+            line-height: 1.5rem;
+            padding-top: var(--spacer);
+            padding-bottom: var(--spacer);
+            border-bottom: 1px solid var(--mat-sys-outline-variant);
+            &:not(:last-child) {
+              padding-right: var(--spacer-and-half);
+            }
+            mat-error {
+              line-height: 3rem;
+              color: var(--mat-sys-error);
+              mat-icon {
+                float: left;
+                margin-top: var(--spacer-and-half);
+                color: var(--mat-sys-error);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/theme/overrides/_tabs.scss

@@ -0,0 +1,20 @@
+@use '@angular/material' as mat;
+
+@mixin override() {
+  @include mat.tabs-overrides(
+    (
+      active-indicator-color: var(--mat-sys-tertiary),
+      active-focus-indicator-color: var(--mat-sys-tertiary),
+      active-hover-indicator-color: var(--mat-sys-tertiary),
+      active-indicator-height: 3px,
+      label-text-font: var(--mat-sys-title-medium-font),
+      label-text-size: var(--mat-sys-title-medium-size),
+      //label-text-weight: var(--mat-sys-title-medium-weight),
+      label-text-line-height: var(--mat-sys-title-medium-height),
+    )
+  );
+
+  .mdc-tab-indicator--active {
+    font-weight: 600;
+  }
+}

package/theme/overrides/_toast.scss

@@ -0,0 +1,16 @@
+@use '@angular/material' as mat;
+
+@mixin override() {
+  //@include mat.snack-bar-overrides((
+  //  container-color: orange,
+  //  supporting-text-color: red,
+  //));
+
+  //.mat-mdc-tab-link {
+  //  &.mdc-tab--active {
+  //    .mdc-tab__text-label {
+  //      //text-shadow: 0 0 2px var(--mat-sys-on-surface); // THC HACK
+  //    }
+  //  }
+  //}
+}

package/theme/overrides/_toc.scss

@@ -0,0 +1,26 @@
+@use '@angular/material' as mat;
+
+@mixin override() {
+  .toc-content {
+    display: block;
+    padding-left: clamp(
+      var(--double-spacer),
+      var(--toc-width) - (100vw - 2200px),
+      var(--toc-width)
+    );
+
+    .onemrva-mat-toc-anchor {
+      scroll-margin-top: calc(
+        var(--layout-header-height) + var(--double-spacer)
+      );
+    }
+    mat-list-item {
+      &.onemrva-anchor-for-subsection {
+        .mdc-list-item__primary-text {
+          font-weight: 400;
+          padding-left: var(--double-spacer);
+        }
+      }
+    }
+  }
+}

package/theme/overrides/_toolbar.scss

@@ -0,0 +1,26 @@
+@use '@angular/material' as mat;
+@mixin override() {
+  mat-toolbar {
+    &.sticky {
+      @include mat.toolbar-overrides(
+        (
+          container-background-color: var(--mat-sys-primary-container),
+        )
+      );
+      position: sticky !important;
+      bottom: 0 !important;
+      top: var(--layout-header-height, 0);
+      .spacer {
+        flex: 1 1 auto;
+      }
+    }
+    &.mat-accent {
+      @include mat.toolbar-overrides(
+        (
+          container-background-color: var(--background-gradient),
+          container-text-color: var(--on-background-gradient),
+        )
+      );
+    }
+  }
+}

package/theme/overrides/_tooltip.scss

@@ -0,0 +1,19 @@
+@use '@angular/material' as mat;
+
+@mixin override() {
+  @include mat.tooltip-overrides(
+    (
+      supporting-text-font: var(--mat-sys-label-small-font),
+      supporting-text-size: var(--mat-sys-label-small-size),
+      container-color: var(--mat-sys-surface),
+      supporting-text-color: var(--mat-sys-on-surface),
+      supporting-text-line-height: var(--mat-sys-label-small-line-height),
+      supporting-text-weight: var(--mat-sys-label-small-weight),
+    )
+  );
+
+  .mat-mdc-tooltip-surface {
+    padding: var(--spacer);
+    box-shadow: var(--mat-sys-level3) !important;
+  }
+}