@utahdts/utah-design-system 1.11.1 → 1.12.0

package/dist/style.css

@@ -2654,6 +2654,10 @@ base color swatches for the design system
   width: 0.65rem;
 }
 
+.utah-design-system .tag--small .tag--icon [class*=utds-icon-before-]::before {
+  font-size: 0.7rem;
+}
+
 .utah-design-system .tag--large {
   font-size: var(--font-size-m);
 }
@@ -2663,6 +2667,10 @@ base color swatches for the design system
   width: 1rem;
 }
 
+.utah-design-system .tag--large .tag--icon [class*=utds-icon-before-]::before {
+  font-size: 1rem;
+}
+
 .utah-design-system .tag--icon {
   display: flex;
   align-items: center;
@@ -2673,6 +2681,11 @@ base color swatches for the design system
   width: 0.8rem;
 }
 
+.utah-design-system .tag--icon [class*=utds-icon-before-]::before {
+  font-size: 0.8rem;
+  margin: 0;
+}
+
 .utah-design-system .tag--icon-left {
   margin-right: var(--spacing-2xs);
 }
@@ -2804,10 +2817,12 @@ base color swatches for the design system
 }
 
 .utah-design-system .input-wrapper__error-message {
+  margin-top: var(--spacing-3xs);
   color: var(--danger-color);
 }
 
-.utah-design-system .input-wrapper input, .utah-design-system .input-wrapper textarea {
+.utah-design-system .input-wrapper input,
+.utah-design-system .input-wrapper textarea {
   display: block;
 }
 
@@ -2939,6 +2954,96 @@ base color swatches for the design system
   transform: translateY(-50%);
 }
 
+.utah-design-system .combo-box-input[type=text] {
+  padding: 0 var(--spacing-xl) 0 var(--spacing-xs);
+}
+
+.utah-design-system .combo-box-input[type=text].text-input--clear-icon-visible {
+  padding: 0 var(--spacing-4xl) 0 var(--spacing-xs);
+}
+
+.utah-design-system .combo-box-input__chevron {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: var(--spacing-xs);
+  font-weight: var(--font-weight-normal);
+}
+
+.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 {
+  color: var(--form-ele-disabled-color);
+}
+
+.utah-design-system .combo-box-input__inner-wrapper .text-input__clear-button {
+  right: var(--spacing-xl);
+}
+
+.utah-design-system .combo-box-input__inner-wrapper .input-wrapper--text-input {
+  margin: 0;
+}
+
+.utah-design-system .combo-box-input__list-box {
+  background: white;
+  border-radius: var(--radius-small);
+  border: 1px solid var(--gray-3-1-contrast);
+  box-sizing: border-box;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  z-index: 2000;
+}
+
+.utah-design-system .combo-box-input__option {
+  padding: var(--spacing-2xs) var(--spacing-s);
+}
+
+.utah-design-system .combo-box-input__option:hover {
+  background: var(--hover-gray-color);
+  cursor: default;
+  color: black;
+}
+
+.utah-design-system .combo-box-input__option--selected {
+  background: var(--form-ele-color);
+  color: white;
+}
+
+.utah-design-system .combo-box-input__option--highlighted {
+  background: var(--hover-gray-color);
+  color: black;
+}
+
+.utah-design-system .combo-box-input__option:focus-visible {
+  outline: 2px solid var(--form-ele-color);
+  outline-offset: 2px;
+  transition: none;
+}
+
+.utah-design-system .combo-box-input__option:focus-visible {
+  outline-offset: -2px;
+  border-radius: var(--radius-small1x);
+}
+
+.utah-design-system .combo-box-input__group-wrapper ul {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+.utah-design-system .combo-box-input__group-wrapper ul li.combo-box-input__option {
+  padding: var(--spacing-2xs) var(--spacing-s) var(--spacing-2xs) var(--spacing);
+}
+
+.utah-design-system .combo-box-input__group-title {
+  padding: var(--spacing-2xs) var(--spacing-s);
+  font-weight: var(--font-weight-bold);
+}
+
 .character-count {
   text-align: right;
   font-size: var(--font-size-s);
@@ -4741,6 +4846,249 @@ variables and settings
   backdrop-filter: blur(6px) brightness(60%);
 }
 
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes drop-in {
+  0% {
+    opacity: 0;
+    transform: translate(-50%, -100px);
+  }
+  100% {
+    opacity: 1;
+    transform: translate(-50%, 0);
+  }
+}
+@keyframes pop-in {
+  0% {
+    opacity: 0;
+    transform: scale(0.7);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes pop-in-center {
+  0% {
+    opacity: 0;
+    transform: scale(0.7) translateX(-50%);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1) translateX(-50%);
+  }
+}
+@keyframes left-in {
+  0% {
+    opacity: 0;
+    transform: translate(-100%, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate(0, 0);
+  }
+}
+@keyframes right-in {
+  0% {
+    opacity: 0;
+    transform: translate(100%, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate(0, 0);
+  }
+}
+.utah-design-system .banner__wrapper {
+  display: inline-flex;
+  border-radius: var(--radius-small);
+  background: white;
+  box-shadow: var(--elevation-small-borderless);
+  margin: var(--spacing);
+}
+
+.utah-design-system .banner__wrapper:not(.banner--inline) {
+  position: fixed;
+  z-index: 3000;
+}
+
+.utah-design-system .banner__wrapper.banner--bottom-left, .utah-design-system .banner__wrapper.banner--top-left {
+  animation: left-in 1s;
+}
+
+.utah-design-system .banner__wrapper.banner--bottom-right, .utah-design-system .banner__wrapper.banner--top-right {
+  animation: right-in 1s;
+}
+
+.utah-design-system .banner__wrapper.banner--bottom, .utah-design-system .banner__wrapper.banner--top {
+  animation: fade-in 0.5s;
+}
+
+.utah-design-system .banner__wrapper.banner--bottom {
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.utah-design-system .banner__wrapper.banner--bottom-left {
+  bottom: 0;
+  left: 0;
+}
+
+.utah-design-system .banner__wrapper.banner--bottom-right {
+  bottom: 0;
+  right: 0;
+}
+
+.utah-design-system .banner__wrapper.banner--top {
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.utah-design-system .banner__wrapper.banner--top-left {
+  top: 0;
+  left: 0;
+}
+
+.utah-design-system .banner__wrapper.banner--top-right {
+  top: 0;
+  right: 0;
+}
+
+.utah-design-system .banner__wrapper.banner--info, .utah-design-system .banner__wrapper.banner--warning, .utah-design-system .banner__wrapper.banner--danger, .utah-design-system .banner__wrapper.banner--success {
+  color: white;
+}
+
+.utah-design-system .banner__wrapper.banner--info .banner__close-button button, .utah-design-system .banner__wrapper.banner--warning .banner__close-button button, .utah-design-system .banner__wrapper.banner--danger .banner__close-button button, .utah-design-system .banner__wrapper.banner--success .banner__close-button button {
+  color: white;
+}
+
+.utah-design-system .banner__wrapper.banner--info {
+  background-color: var(--info-color);
+}
+
+.utah-design-system .banner__wrapper.banner--warning {
+  background-color: var(--warning-color);
+}
+
+.utah-design-system .banner__wrapper.banner--danger {
+  background-color: var(--danger-color);
+}
+
+.utah-design-system .banner__wrapper.banner--success {
+  background-color: var(--success-color);
+}
+
+.utah-design-system .banner__message {
+  display: flex;
+  align-items: center;
+  padding: var(--spacing-s) var(--spacing-xs) var(--spacing-s) var(--spacing);
+}
+
+.utah-design-system .banner__icon {
+  padding: var(--spacing-s);
+  background-color: rgba(0, 0, 0, 0.3);
+  display: flex;
+  border-radius: var(--radius-small) 0 0 var(--radius-small);
+}
+
+.utah-design-system .banner__icon span {
+  color: white;
+}
+
+.utah-design-system .banner__icon span[class*=utds-icon-before-]::before {
+  margin-right: 0;
+}
+
+.utah-design-system .banner__close-button {
+  padding: var(--spacing-xs);
+}
+
+.utah-design-system.banner-global__wrapper {
+  z-index: 4000;
+  position: fixed;
+}
+
+.utah-design-system.banner-global__wrapper .banner-global__zone {
+  position: fixed;
+  display: flex;
+  flex-direction: column-reverse;
+}
+
+.utah-design-system.banner-global__wrapper .banner-global__bottom {
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  flex-direction: column;
+}
+
+.utah-design-system.banner-global__wrapper .banner-global__bottom-left {
+  bottom: 0;
+  left: 0;
+  flex-direction: column;
+}
+
+.utah-design-system.banner-global__wrapper .banner-global__bottom-right {
+  bottom: 0;
+  right: 0;
+  flex-direction: column;
+}
+
+.utah-design-system.banner-global__wrapper .banner-global__top {
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.utah-design-system.banner-global__wrapper .banner-global__top-left {
+  top: 0;
+  left: 0;
+}
+
+.utah-design-system.banner-global__wrapper .banner-global__top-right {
+  top: 0;
+  right: 0;
+}
+
+.utah-design-system.banner-global__wrapper .banner-global__bottom .banner__wrapper, .utah-design-system.banner-global__wrapper .banner-global__top .banner__wrapper {
+  align-self: baseline;
+}
+
+.utah-design-system.banner-global__wrapper .banner-global__top-right .banner__wrapper, .utah-design-system.banner-global__wrapper .banner-global__bottom-right .banner__wrapper {
+  align-self: flex-end;
+}
+
+.utah-design-system.banner-global__wrapper .banner-global__top-left .banner__wrapper, .utah-design-system.banner-global__wrapper .banner-global__bottom-left .banner__wrapper {
+  align-self: flex-start;
+}
+
+.utah-design-system.banner-global__wrapper .banner__wrapper {
+  position: relative;
+}
+
+/*
+BEM standard: Block, Element, Modifier
+   Block: use dashes to separate words:
+     - my-react-component
+     - super-list
+     - cats-r-great
+  Element: use two underscores for elements
+    Elements are children at any level of the Block:
+    - my-react-component__block
+    - super-list__name
+    - super-list__info
+    - cats-r-great__whiskers
+  Modifier: use two dashes for modifiers
+    - my-react-component--alt
+    - super-list--flat
+    - cats-r-great--black
+ */
 .utah-design-system .popup__wrapper {
   position: absolute;
   z-index: 100;
@@ -5317,7 +5665,7 @@ BEM standard: Block, Element, Modifier
   }
 }
 .utah-design-system .table__wrapper {
-  overflow-x: scroll;
+  overflow-x: auto;
 }
 
 .utah-design-system table {
@@ -5627,10 +5975,6 @@ BEM standard: Block, Element, Modifier
   color: black;
 }
 
-/*
-############     _utilities.scss      ############
-utility classes, atomic css
-*/
 @keyframes fade-in {
   0% {
     opacity: 0;
@@ -5669,6 +6013,30 @@ utility classes, atomic css
     transform: scale(1) translateX(-50%);
   }
 }
+@keyframes left-in {
+  0% {
+    opacity: 0;
+    transform: translate(-100%, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate(0, 0);
+  }
+}
+@keyframes right-in {
+  0% {
+    opacity: 0;
+    transform: translate(100%, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate(0, 0);
+  }
+}
+/*
+############     _utilities.scss      ############
+utility classes, atomic css
+*/
 .content-width {
   width: 100%;
   max-width: var(--content-width);