@utahdts/utah-design-system 1.12.1 → 1.13.1

package/css/3-generic/_generic-index.scss

@@ -1,4 +1,338 @@
 /*
 ############     _generic-index.scss      ############
 css resets, etc.
-*/
+*/
+
+/* Borrowed from: */
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+@use "../1-settings/class-vars";
+
+#{class-vars.$base-class} {
+  // 2. Prevent adjustments of font size after orientation changes in iOS.
+  -webkit-text-size-adjust: 100%; /* 2 */
+
+  /**
+  * Render the `main` element consistently in IE.
+  */
+
+  main {
+    display: block;
+  }
+
+  /**
+  * Correct the font size and margin on `h1` elements within `section` and
+  * `article` contexts in Chrome, Firefox, and Safari.
+  */
+
+  h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+  }
+
+  /* Grouping content
+    ========================================================================== */
+
+  /**
+  * 1. Add the correct box sizing in Firefox.
+  * 2. Show the overflow in Edge and IE.
+  */
+
+  hr {
+    box-sizing: content-box; /* 1 */
+    height: 0; /* 1 */
+    overflow: visible; /* 2 */
+  }
+
+  /**
+  * 1. Correct the inheritance and scaling of font size in all browsers.
+  * 2. Correct the odd `em` font sizing in all browsers.
+  */
+
+  pre {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+  }
+
+  /* Text-level semantics
+    ========================================================================== */
+
+  /**
+  * Remove the gray background on active links in IE 10.
+  */
+
+  a {
+    background-color: transparent;
+  }
+
+  /**
+  * 1. Remove the bottom border in Chrome 57-
+  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+  */
+
+  abbr[title] {
+    border-bottom: none; /* 1 */
+    text-decoration: underline; /* 2 */
+    text-decoration: underline dotted; /* 2 */
+  }
+
+  /**
+  * Add the correct font weight in Chrome, Edge, and Safari.
+  */
+
+  b,
+  strong {
+    font-weight: bolder;
+  }
+
+  /**
+  * 1. Correct the inheritance and scaling of font size in all browsers.
+  * 2. Correct the odd `em` font sizing in all browsers.
+  */
+
+  code,
+  kbd,
+  samp {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+  }
+
+  /**
+  * Add the correct font size in all browsers.
+  */
+
+  small {
+    font-size: 80%;
+  }
+
+  /**
+  * Prevent `sub` and `sup` elements from affecting the line height in
+  * all browsers.
+  */
+
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+
+  sub {
+    bottom: -0.25em;
+  }
+
+  sup {
+    top: -0.5em;
+  }
+
+  /* Embedded content
+    ========================================================================== */
+
+  /**
+  * Remove the border on images inside links in IE 10.
+  */
+
+  img {
+    border-style: none;
+  }
+
+  /* Forms
+    ========================================================================== */
+
+  /**
+  * 1. Change the font styles in all browsers.
+  * 2. Remove the margin in Firefox and Safari.
+  */
+
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    font-family: inherit; /* 1 */
+    font-size: 100%; /* 1 */
+    line-height: 1.15; /* 1 */
+    margin: 0; /* 2 */
+  }
+
+  /**
+  * Show the overflow in IE.
+  * 1. Show the overflow in Edge.
+  */
+
+  button,
+  input { /* 1 */
+    overflow: visible;
+  }
+
+  /**
+  * Remove the inheritance of text transform in Edge, Firefox, and IE.
+  * 1. Remove the inheritance of text transform in Firefox.
+  */
+
+  button,
+  select { /* 1 */
+    text-transform: none;
+  }
+
+  /**
+  * Correct the inability to style clickable types in iOS and Safari.
+  */
+
+  button,
+  [type="button"],
+  [type="reset"],
+  [type="submit"] {
+    -webkit-appearance: button;
+  }
+
+  /**
+  * Remove the inner border and padding in Firefox.
+  */
+
+  button::-moz-focus-inner,
+  [type="button"]::-moz-focus-inner,
+  [type="reset"]::-moz-focus-inner,
+  [type="submit"]::-moz-focus-inner {
+    border-style: none;
+    padding: 0;
+  }
+
+  /**
+  * Restore the focus styles unset by the previous rule.
+  */
+
+  button:-moz-focusring,
+  [type="button"]:-moz-focusring,
+  [type="reset"]:-moz-focusring,
+  [type="submit"]:-moz-focusring {
+    outline: 1px dotted ButtonText;
+  }
+
+  /**
+  * Correct the padding in Firefox.
+  */
+
+  fieldset {
+    padding: 0.35em 0.75em 0.625em;
+  }
+
+  /**
+  * 1. Correct the text wrapping in Edge and IE.
+  * 2. Correct the color inheritance from `fieldset` elements in IE.
+  * 3. Remove the padding so developers are not caught out when they zero out
+  *    `fieldset` elements in all browsers.
+  */
+
+  legend {
+    box-sizing: border-box; /* 1 */
+    color: inherit; /* 2 */
+    display: table; /* 1 */
+    max-width: 100%; /* 1 */
+    padding: 0; /* 3 */
+    white-space: normal; /* 1 */
+  }
+
+  /**
+  * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+  */
+
+  progress {
+    vertical-align: baseline;
+  }
+
+  /**
+  * Remove the default vertical scrollbar in IE 10+.
+  */
+
+  textarea {
+    overflow: auto;
+  }
+
+  /**
+  * 1. Add the correct box sizing in IE 10.
+  * 2. Remove the padding in IE 10.
+  */
+
+  [type="checkbox"],
+  [type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+  }
+
+  /**
+  * Correct the cursor style of increment and decrement buttons in Chrome.
+  */
+
+  [type="number"]::-webkit-inner-spin-button,
+  [type="number"]::-webkit-outer-spin-button {
+    height: auto;
+  }
+
+  /**
+  * 1. Correct the odd appearance in Chrome and Safari.
+  * 2. Correct the outline style in Safari.
+  */
+
+  [type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    outline-offset: -2px; /* 2 */
+  }
+
+  /**
+  * Remove the inner padding in Chrome and Safari on macOS.
+  */
+
+  [type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+
+  /**
+  * 1. Correct the inability to style clickable types in iOS and Safari.
+  * 2. Change font properties to `inherit` in Safari.
+  */
+
+  ::-webkit-file-upload-button {
+    -webkit-appearance: button; /* 1 */
+    font: inherit; /* 2 */
+  }
+
+  /* Interactive
+    ========================================================================== */
+
+  /*
+  * Add the correct display in Edge, IE 10+, and Firefox.
+  */
+
+  details {
+    display: block;
+  }
+
+  /*
+  * Add the correct display in all browsers.
+  */
+
+  summary {
+    display: list-item;
+  }
+
+  /* Misc
+    ========================================================================== */
+
+  /**
+  * Add the correct display in IE 10+.
+  */
+
+  template {
+    display: none;
+  }
+
+  /**
+  * Add the correct display in IE 10.
+  */
+
+  [hidden] {
+    display: none;
+  }
+}

package/css/4-elements/_elements-index.scss

@@ -96,4 +96,8 @@ elemental html: h1, h2, h3, ul, li, etc.
 
     display: inline-block;
   }
+
+  dialog {
+    border: none;
+  }
 }

package/css/6-components/_components-index.scss

@@ -17,6 +17,7 @@ component specific, BEM (Block, Element, Modifier)
 @use "base-components/forms/text-area";
 @use "base-components/forms/text-input";
 @use "base-components/forms/combo-box-input";
+@use "base-components/forms/multi-select-input";
 @use "base-components/forms/character-count";
 @use "base-components/forms/checkbox";
 @use "base-components/forms/select-input";

package/css/6-components/base-components/buttons/_button.scss

@@ -23,6 +23,7 @@
     -webkit-tap-highlight-color: rgba(0,0,0,0);
     scale: 1;
     text-shadow: none;
+    box-shadow: none;
 
     svg {
       fill: currentColor;

package/css/6-components/base-components/buttons/_tag.scss

@@ -2,12 +2,12 @@
 
 #{class-vars.$base-class} {
   .tag {
-    padding: var(--spacing-2xs) var(--spacing-xs);
+    padding: 0 var(--spacing-s);
     display: flex;
     align-items: center;
     border-radius: var(--radius-small);
-    background-color: var(--gray-light-color);
-    min-height: var(--form-ele-small1x);
+    min-height: var(--form-ele-small);
+    line-height: 1;
 
     &__button[type="button"] {
       border: 1px solid var(--gray-medium-color);
@@ -17,17 +17,6 @@
       height: 100%;
       line-height: 1.4;
 
-      &.tag--small {
-        padding: var(--spacing-3xs) var(--spacing-2xs);
-        min-height: 28px;
-        font-size: var(--font-size-xs);
-      }
-
-      &.tag--large {
-        min-height: var(--form-ele-small);
-        font-size: var(--font-size-m);
-      }
-
       &.tag--selected {
         background-color: var(--gray-color);
         color: white;
@@ -41,33 +30,27 @@
     }
 
     &__clear-button {
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-      right: var(--spacing-3xs);
       font-weight: var(--font-weight-normal);
       transition: transform;
 
       [class*=utds-icon-before-]::before {
         font-size: .7rem;
       }
-
-      &[disabled]:active {
-        transform: translateY(-50%);
-      }
     }
 
     &__wrapper {
       border-radius: var(--radius-small);
       display: flex;
       align-items: center;
-      line-height: 1.4;
       position: relative;
+      background-color: var(--gray-light-color);
     }
 
     &--small {
       font-size: var(--font-size-xs);
-      padding: var(--spacing-3xs) var(--spacing-2xs);
+      padding: 0 var(--spacing-xs);
+      min-height: var(--form-ele-small2x);
+
 
       .tag--icon {
         svg {
@@ -119,8 +102,12 @@
 
     &--clearable {
       .tag {
-        padding: var(--spacing-2xs) var(--spacing-xl) var(--spacing-2xs) var(--spacing-xs);
+        padding: 0 0 0 var(--spacing-xs);
+      }
+      .tag--small {
+        padding: 0 0 0 var(--spacing-xs);
       }
     }
+
   }
 }

package/css/6-components/base-components/forms/_combo-box-input.scss

@@ -16,9 +16,8 @@
       transform: translateY(-50%);
       right: var(--spacing-xs);
       font-weight: var(--font-weight-normal);
-      &[class*="utds-icon-before-"]::before {
+      [class*="utds-icon-before-"]::before {
         font-size: 0.9rem;
-        line-height: 0;
       }
       &--is-disabled {
         color: var(--form-ele-disabled-color);
@@ -31,6 +30,9 @@
       .input-wrapper--text-input {
         margin: 0;
       }
+      .tooltip__wrapper {
+        z-index: 2001;
+      }
     }
     &__list-box {
       background: white;

package/css/6-components/base-components/forms/_multi-select-input.scss

@@ -0,0 +1,95 @@
+@use "../../../2-tools/tools-index";
+
+@use "../../../1-settings/class-vars";
+
+#{class-vars.$base-class} {
+  .multi-select {
+    background: white;
+    color: var(--gray-color);
+    min-height: var(--form-ele-medium);
+    border-radius: var(--radius-small);
+    box-sizing: border-box;
+    border: 1px solid var(--gray-color);
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: start;
+    gap: var(--spacing-2xs);
+    padding: var(--spacing-2xs) var(--spacing-xl) var(--spacing-2xs) var(--spacing-2xs);
+
+    &__wrapper {
+      position: relative;
+
+      .tooltip__wrapper {
+        z-index: 2001;
+      }
+    }
+
+    @include tools-index.form-ele-hover-medium;
+
+    &__combo-box {
+      flex: 1;
+      min-width: 25%;
+
+      .combo-box-input {
+        border: none;
+        min-height: var(--form-ele-small1x);
+        padding: 0;
+        flex: 1;
+
+        &__chevron {
+          display: none;
+        }
+
+        &:hover {
+          box-shadow: none;
+        }
+
+        &:focus-visible {
+          outline: none;
+        }
+      }
+    }
+
+    &__chevron, &__clear-button {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      right: var(--spacing-xs);
+      font-weight: var(--font-weight-normal);
+      [class*="utds-icon-before-"]::before {
+        font-size: 0.9rem;
+      }
+      &[disabled]:active {
+        transform: translateY(-50%);
+      }
+    }
+    &__clear-button {
+      right: var(--spacing-xl);
+      [class*="utds-icon-before-"]::before {
+        font-size: .7rem;
+      }
+    }
+
+    &--clear-icon-visible {
+      padding: var(--spacing-2xs) var(--spacing-4xl) var(--spacing-2xs) var(--spacing-2xs);
+    }
+
+    &--disabled {
+      background-color: var(--disabled-gray);
+      cursor: not-allowed;
+      input[type=text] {
+        background: transparent;
+      }
+    }
+
+    &--focused {
+      outline: 2px solid var(--form-ele-color);
+      outline-offset: 2px;
+      transition: none;
+      &.multi-select--disabled {
+        outline: none;
+      }
+    }
+  }
+}

package/css/6-components/base-components/popups/_modal.scss

@@ -1,15 +1,69 @@
 @use "../../../1-settings/settings-index";
 @use "../../../1-settings/class-vars";
 @use "../../../1-settings/spacing";
-
+@use "../../../7-utilities/animation";
 
 #{class-vars.$base-class} {
-  .modal-backdrop {
-    position: fixed;
-    width: 100vw;
-    height: 100vh;
-    top: 0;
-    left: 0;
-    z-index: 4000;
+  .modal{
+    &-backdrop {
+      position: fixed;
+      width: 100vw;
+      height: 100vh;
+      top: 0;
+      left: 0;
+      z-index: 4000;
+    }
+
+    &__wrapper {
+      animation: 400ms ease-in-out 100ms drop-in both;
+      background: #fff;
+      display: inline-block;
+      max-width: 660px;
+      width: calc(100% - var(--spacing-3xl));
+      border-radius: var(--radius-medium);
+      left: 50%;
+      margin: var(--spacing-4xl) var(--spacing) var(--spacing-4xl) 0;
+      overflow: hidden;
+      padding: 0;
+      position: absolute;
+      top: 0;
+      transform: translateX(-50%);
+      z-index: 5000;
+    }
+
+    &__title {
+      font-weight: var(--font-weight-bold);
+      font-size: var(--font-size-2xl);
+      padding: var(--spacing-xs) calc(var(--spacing) + 1.4rem) var(--spacing-xs) var(--spacing-l);
+    }
+
+    &__content {
+      line-height: 1.6rem;
+      padding: var(--spacing-xs) var(--spacing-l);
+    }
+
+    &__footer {
+      padding: var(--spacing-xs) var(--spacing-l) var(--spacing);
+    }
+
+    &__close-button {
+      position: absolute;
+      top: var(--spacing-2xs);
+      right: var(--spacing-2xs);
+
+      .utds-icon-before-x-icon::before {
+        font-size: 0.7rem;
+      }
+    }
+
+    &--small {
+      max-width: 440px;
+      border-radius: var(--radius-small);
+    }
+
+    &--large {
+      max-width: 990px;
+      border-radius: var(--radius-large);
+    }
   }
 }