@utahdts/utah-design-system 1.12.1 → 1.13.1

package/dist/style.css

@@ -1668,9 +1668,307 @@ Media Sizes - SCSS Variables
 scss mixins and functions
 */
 /*
+############     _class-vars.scss      ############
+CSS Classes - SCSS Variables
+*/
+/*
 ############     _generic-index.scss      ############
 css resets, etc.
 */
+/* Borrowed from: */
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+.utah-design-system {
+  -webkit-text-size-adjust: 100%; /* 2 */
+  /**
+  * Render the `main` element consistently in IE.
+  */
+  /**
+  * Correct the font size and margin on `h1` elements within `section` and
+  * `article` contexts in Chrome, Firefox, and Safari.
+  */
+  /* Grouping content
+    ========================================================================== */
+  /**
+  * 1. Add the correct box sizing in Firefox.
+  * 2. Show the overflow in Edge and IE.
+  */
+  /**
+  * 1. Correct the inheritance and scaling of font size in all browsers.
+  * 2. Correct the odd `em` font sizing in all browsers.
+  */
+  /* Text-level semantics
+    ========================================================================== */
+  /**
+  * Remove the gray background on active links in IE 10.
+  */
+  /**
+  * 1. Remove the bottom border in Chrome 57-
+  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+  */
+  /**
+  * Add the correct font weight in Chrome, Edge, and Safari.
+  */
+  /**
+  * 1. Correct the inheritance and scaling of font size in all browsers.
+  * 2. Correct the odd `em` font sizing in all browsers.
+  */
+  /**
+  * Add the correct font size in all browsers.
+  */
+  /**
+  * Prevent `sub` and `sup` elements from affecting the line height in
+  * all browsers.
+  */
+  /* Embedded content
+    ========================================================================== */
+  /**
+  * Remove the border on images inside links in IE 10.
+  */
+  /* Forms
+    ========================================================================== */
+  /**
+  * 1. Change the font styles in all browsers.
+  * 2. Remove the margin in Firefox and Safari.
+  */
+  /**
+  * Show the overflow in IE.
+  * 1. Show the overflow in Edge.
+  */
+  /**
+  * Remove the inheritance of text transform in Edge, Firefox, and IE.
+  * 1. Remove the inheritance of text transform in Firefox.
+  */
+  /**
+  * Correct the inability to style clickable types in iOS and Safari.
+  */
+  /**
+  * Remove the inner border and padding in Firefox.
+  */
+  /**
+  * Restore the focus styles unset by the previous rule.
+  */
+  /**
+  * Correct the padding in Firefox.
+  */
+  /**
+  * 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.
+  */
+  /**
+  * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+  */
+  /**
+  * Remove the default vertical scrollbar in IE 10+.
+  */
+  /**
+  * 1. Add the correct box sizing in IE 10.
+  * 2. Remove the padding in IE 10.
+  */
+  /**
+  * Correct the cursor style of increment and decrement buttons in Chrome.
+  */
+  /**
+  * 1. Correct the odd appearance in Chrome and Safari.
+  * 2. Correct the outline style in Safari.
+  */
+  /**
+  * Remove the inner padding in Chrome and Safari on macOS.
+  */
+  /**
+  * 1. Correct the inability to style clickable types in iOS and Safari.
+  * 2. Change font properties to `inherit` in Safari.
+  */
+  /* Interactive
+    ========================================================================== */
+  /*
+  * Add the correct display in Edge, IE 10+, and Firefox.
+  */
+  /*
+  * Add the correct display in all browsers.
+  */
+  /* Misc
+    ========================================================================== */
+  /**
+  * Add the correct display in IE 10+.
+  */
+  /**
+  * Add the correct display in IE 10.
+  */
+}
+
+.utah-design-system main {
+  display: block;
+}
+
+.utah-design-system h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+.utah-design-system hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+.utah-design-system pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+.utah-design-system a {
+  background-color: transparent;
+}
+
+.utah-design-system abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+.utah-design-system b,
+.utah-design-system strong {
+  font-weight: bolder;
+}
+
+.utah-design-system code,
+.utah-design-system kbd,
+.utah-design-system samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+.utah-design-system small {
+  font-size: 80%;
+}
+
+.utah-design-system sub,
+.utah-design-system sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+.utah-design-system sub {
+  bottom: -0.25em;
+}
+
+.utah-design-system sup {
+  top: -0.5em;
+}
+
+.utah-design-system img {
+  border-style: none;
+}
+
+.utah-design-system button,
+.utah-design-system input,
+.utah-design-system optgroup,
+.utah-design-system select,
+.utah-design-system textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+.utah-design-system button,
+.utah-design-system input { /* 1 */
+  overflow: visible;
+}
+
+.utah-design-system button,
+.utah-design-system select { /* 1 */
+  text-transform: none;
+}
+
+.utah-design-system button,
+.utah-design-system [type=button],
+.utah-design-system [type=reset],
+.utah-design-system [type=submit] {
+  -webkit-appearance: button;
+}
+
+.utah-design-system button::-moz-focus-inner,
+.utah-design-system [type=button]::-moz-focus-inner,
+.utah-design-system [type=reset]::-moz-focus-inner,
+.utah-design-system [type=submit]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.utah-design-system button:-moz-focusring,
+.utah-design-system [type=button]:-moz-focusring,
+.utah-design-system [type=reset]:-moz-focusring,
+.utah-design-system [type=submit]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+.utah-design-system fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+.utah-design-system legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+.utah-design-system progress {
+  vertical-align: baseline;
+}
+
+.utah-design-system textarea {
+  overflow: auto;
+}
+
+.utah-design-system [type=checkbox],
+.utah-design-system [type=radio] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+.utah-design-system [type=number]::-webkit-inner-spin-button,
+.utah-design-system [type=number]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+.utah-design-system [type=search] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+.utah-design-system [type=search]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+.utah-design-system ::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+.utah-design-system details {
+  display: block;
+}
+
+.utah-design-system summary {
+  display: list-item;
+}
+
+.utah-design-system template {
+  display: none;
+}
+
+.utah-design-system [hidden] {
+  display: none;
+}
+
 /*
 ############     _class-vars.scss      ############
 CSS Classes - SCSS Variables
@@ -1773,6 +2071,10 @@ elemental html: h1, h2, h3, ul, li, etc.
   display: inline-block;
 }
 
+.utah-design-system dialog {
+  border: none;
+}
+
 /*
 ############     _objects-index.scss      ############
 containers and general design patterns, 2up, 3up, layout grids, etc.
@@ -2016,6 +2318,7 @@ scss mixins and functions
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   scale: 1;
   text-shadow: none;
+  box-shadow: none;
 }
 
 .utah-design-system button svg, .utah-design-system .button svg {
@@ -2580,12 +2883,12 @@ base color swatches for the design system
 }
 
 .utah-design-system .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;
 }
 
 .utah-design-system .tag__button[type=button] {
@@ -2597,17 +2900,6 @@ base color swatches for the design system
   line-height: 1.4;
 }
 
-.utah-design-system .tag__button[type=button].tag--small {
-  padding: var(--spacing-3xs) var(--spacing-2xs);
-  min-height: 28px;
-  font-size: var(--font-size-xs);
-}
-
-.utah-design-system .tag__button[type=button].tag--large {
-  min-height: var(--form-ele-small);
-  font-size: var(--font-size-m);
-}
-
 .utah-design-system .tag__button[type=button].tag--selected {
   background-color: var(--gray-color);
   color: white;
@@ -2620,10 +2912,6 @@ base color swatches for the design system
 }
 
 .utah-design-system .tag__clear-button {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  right: var(--spacing-3xs);
   font-weight: var(--font-weight-normal);
   transition: transform;
 }
@@ -2632,21 +2920,18 @@ base color swatches for the design system
   font-size: 0.7rem;
 }
 
-.utah-design-system .tag__clear-button[disabled]:active {
-  transform: translateY(-50%);
-}
-
 .utah-design-system .tag__wrapper {
   border-radius: var(--radius-small);
   display: flex;
   align-items: center;
-  line-height: 1.4;
   position: relative;
+  background-color: var(--gray-light-color);
 }
 
 .utah-design-system .tag--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);
 }
 
 .utah-design-system .tag--small .tag--icon svg {
@@ -2695,7 +2980,11 @@ base color swatches for the design system
 }
 
 .utah-design-system .tag--clearable .tag {
-  padding: var(--spacing-2xs) var(--spacing-xl) var(--spacing-2xs) var(--spacing-xs);
+  padding: 0 0 0 var(--spacing-xs);
+}
+
+.utah-design-system .tag--clearable .tag--small {
+  padding: 0 0 0 var(--spacing-xs);
 }
 
 .utah-design-system .footer-agency-information {
@@ -2970,9 +3259,8 @@ base color swatches for the design system
   font-weight: var(--font-weight-normal);
 }
 
-.utah-design-system .combo-box-input__chevron[class*=utds-icon-before-]::before {
+.utah-design-system .combo-box-input__chevron [class*=utds-icon-before-]::before {
   font-size: 0.9rem;
-  line-height: 0;
 }
 
 .utah-design-system .combo-box-input__chevron--is-disabled {
@@ -2987,6 +3275,10 @@ base color swatches for the design system
   margin: 0;
 }
 
+.utah-design-system .combo-box-input__inner-wrapper .tooltip__wrapper {
+  z-index: 2001;
+}
+
 .utah-design-system .combo-box-input__list-box {
   background: white;
   border-radius: var(--radius-small);
@@ -3044,6 +3336,107 @@ base color swatches for the design system
   font-weight: var(--font-weight-bold);
 }
 
+.utah-design-system .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);
+  box-shadow: var(--hover-gray-color) 0 0 0 0;
+  transition: box-shadow var(--timing-xquick) ease-in-out;
+}
+
+.utah-design-system .multi-select__wrapper {
+  position: relative;
+}
+
+.utah-design-system .multi-select__wrapper .tooltip__wrapper {
+  z-index: 2001;
+}
+
+.utah-design-system .multi-select:hover {
+  box-shadow: var(--hover-gray-color) 0 0 0 5px;
+  border-color: black;
+}
+
+.utah-design-system .multi-select__combo-box {
+  flex: 1;
+  min-width: 25%;
+}
+
+.utah-design-system .multi-select__combo-box .combo-box-input {
+  border: none;
+  min-height: var(--form-ele-small1x);
+  padding: 0;
+  flex: 1;
+}
+
+.utah-design-system .multi-select__combo-box .combo-box-input__chevron {
+  display: none;
+}
+
+.utah-design-system .multi-select__combo-box .combo-box-input:hover {
+  box-shadow: none;
+}
+
+.utah-design-system .multi-select__combo-box .combo-box-input:focus-visible {
+  outline: none;
+}
+
+.utah-design-system .multi-select__chevron, .utah-design-system .multi-select__clear-button {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: var(--spacing-xs);
+  font-weight: var(--font-weight-normal);
+}
+
+.utah-design-system .multi-select__chevron [class*=utds-icon-before-]::before, .utah-design-system .multi-select__clear-button [class*=utds-icon-before-]::before {
+  font-size: 0.9rem;
+}
+
+.utah-design-system .multi-select__chevron[disabled]:active, .utah-design-system .multi-select__clear-button[disabled]:active {
+  transform: translateY(-50%);
+}
+
+.utah-design-system .multi-select__clear-button {
+  right: var(--spacing-xl);
+}
+
+.utah-design-system .multi-select__clear-button [class*=utds-icon-before-]::before {
+  font-size: 0.7rem;
+}
+
+.utah-design-system .multi-select--clear-icon-visible {
+  padding: var(--spacing-2xs) var(--spacing-4xl) var(--spacing-2xs) var(--spacing-2xs);
+}
+
+.utah-design-system .multi-select--disabled {
+  background-color: var(--disabled-gray);
+  cursor: not-allowed;
+}
+
+.utah-design-system .multi-select--disabled input[type=text] {
+  background: transparent;
+}
+
+.utah-design-system .multi-select--focused {
+  outline: 2px solid var(--form-ele-color);
+  outline-offset: 2px;
+  transition: none;
+}
+
+.utah-design-system .multi-select--focused.multi-select--disabled {
+  outline: none;
+}
+
 .character-count {
   text-align: right;
   font-size: var(--font-size-s);
@@ -5363,6 +5756,58 @@ BEM standard: Block, Element, Modifier
   z-index: 4000;
 }
 
+.utah-design-system .modal__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;
+}
+
+.utah-design-system .modal__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);
+}
+
+.utah-design-system .modal__content {
+  line-height: 1.6rem;
+  padding: var(--spacing-xs) var(--spacing-l);
+}
+
+.utah-design-system .modal__footer {
+  padding: var(--spacing-xs) var(--spacing-l) var(--spacing);
+}
+
+.utah-design-system .modal__close-button {
+  position: absolute;
+  top: var(--spacing-2xs);
+  right: var(--spacing-2xs);
+}
+
+.utah-design-system .modal__close-button .utds-icon-before-x-icon::before {
+  font-size: 0.7rem;
+}
+
+.utah-design-system .modal--small {
+  max-width: 440px;
+  border-radius: var(--radius-small);
+}
+
+.utah-design-system .modal--large {
+  max-width: 990px;
+  border-radius: var(--radius-large);
+}
+
 /*
 BEM standard: Block, Element, Modifier
    Block: use dashes to separate words: