@utahdts/utah-design-system-header
Version:
Utah Header for the Utah Design System
1,804 lines (1,803 loc) • 173 kB
CSS
@charset "UTF-8";@import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,400;0,600;0,700;1,400;1,700&display=swap");
/*
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
*/
/*
############ _settings-index.scss ############
variables and settings
*/
/*
############ _class-vars.scss ############
CSS Classes - SCSS Variables
*/
/*
############ _settings-index.scss ############
variables and settings
*/
/*
############ _settings-index.scss ############
variables and settings
*/
/*
############ _spacing.scss ############
8px horizontal spacing
*/
.utah-design-system {
--spacing-3xs: 2px;
--spacing-2xs: 4px;
--spacing-xs: 8px;
--spacing-s: 12px;
--spacing: 16px;
--spacing-l: 24px;
--spacing-xl: 32px;
--spacing-2xl: 40px;
--spacing-3xl: 48px;
--spacing-4xl: 64px;
--spacing-5xl: 80px;
--spacing-6xl: 96px;
}
.utah-design-system .m-spacing {
margin: var(--spacing);
}
.utah-design-system .mt-spacing {
margin-top: var(--spacing);
}
.utah-design-system .mr-spacing {
margin-right: var(--spacing);
}
.utah-design-system .mb-spacing {
margin-bottom: var(--spacing);
}
.utah-design-system .ml-spacing {
margin-left: var(--spacing);
}
.utah-design-system .mx-spacing {
margin-left: var(--spacing);
margin-right: var(--spacing);
}
.utah-design-system .my-spacing {
margin-top: var(--spacing);
margin-bottom: var(--spacing);
}
.utah-design-system .m-spacing-l {
margin: var(--spacing-l);
}
.utah-design-system .mt-spacing-l {
margin-top: var(--spacing-l);
}
.utah-design-system .mr-spacing-l {
margin-right: var(--spacing-l);
}
.utah-design-system .mb-spacing-l {
margin-bottom: var(--spacing-l);
}
.utah-design-system .ml-spacing-l {
margin-left: var(--spacing-l);
}
.utah-design-system .mx-spacing-l {
margin-left: var(--spacing-l);
margin-right: var(--spacing-l);
}
.utah-design-system .my-spacing-l {
margin-top: var(--spacing-l);
margin-bottom: var(--spacing-l);
}
.utah-design-system .m-spacing-xl {
margin: var(--spacing-xl);
}
.utah-design-system .mt-spacing-xl {
margin-top: var(--spacing-xl);
}
.utah-design-system .mr-spacing-xl {
margin-right: var(--spacing-xl);
}
.utah-design-system .mb-spacing-xl {
margin-bottom: var(--spacing-xl);
}
.utah-design-system .ml-spacing-xl {
margin-left: var(--spacing-xl);
}
.utah-design-system .mx-spacing-xl {
margin-left: var(--spacing-xl);
margin-right: var(--spacing-xl);
}
.utah-design-system .my-spacing-xl {
margin-top: var(--spacing-xl);
margin-bottom: var(--spacing-xl);
}
.utah-design-system .m-spacing-s {
margin: var(--spacing-s);
}
.utah-design-system .mt-spacing-s {
margin-top: var(--spacing-s);
}
.utah-design-system .mr-spacing-s {
margin-right: var(--spacing-s);
}
.utah-design-system .mb-spacing-s {
margin-bottom: var(--spacing-s);
}
.utah-design-system .ml-spacing-s {
margin-left: var(--spacing-s);
}
.utah-design-system .mx-spacing-s {
margin-left: var(--spacing-s);
margin-right: var(--spacing-s);
}
.utah-design-system .my-spacing-s {
margin-top: var(--spacing-s);
margin-bottom: var(--spacing-s);
}
.utah-design-system .m-spacing-xs {
margin: var(--spacing-xs);
}
.utah-design-system .mt-spacing-xs {
margin-top: var(--spacing-xs);
}
.utah-design-system .mr-spacing-xs {
margin-right: var(--spacing-xs);
}
.utah-design-system .mb-spacing-xs {
margin-bottom: var(--spacing-xs);
}
.utah-design-system .ml-spacing-xs {
margin-left: var(--spacing-xs);
}
.utah-design-system .mx-spacing-xs {
margin-left: var(--spacing-xs);
margin-right: var(--spacing-xs);
}
.utah-design-system .my-spacing-xs {
margin-top: var(--spacing-xs);
margin-bottom: var(--spacing-xs);
}
.utah-design-system .p-spacing {
padding: var(--spacing);
}
.utah-design-system .pt-spacing {
padding-top: var(--spacing);
}
.utah-design-system .pr-spacing {
padding-right: var(--spacing);
}
.utah-design-system .pb-spacing {
padding-bottom: var(--spacing);
}
.utah-design-system .pl-spacing {
padding-left: var(--spacing);
}
.utah-design-system .px-spacing {
padding-left: var(--spacing);
padding-right: var(--spacing);
}
.utah-design-system .py-spacing {
padding-top: var(--spacing);
padding-bottom: var(--spacing);
}
.utah-design-system .p-spacing-l {
padding: var(--spacing-l);
}
.utah-design-system .pt-spacing-l {
padding-top: var(--spacing-l);
}
.utah-design-system .pr-spacing-l {
padding-right: var(--spacing-l);
}
.utah-design-system .pb-spacing-l {
padding-bottom: var(--spacing-l);
}
.utah-design-system .pl-spacing-l {
padding-left: var(--spacing-l);
}
.utah-design-system .px-spacing-l {
padding-left: var(--spacing-l);
padding-right: var(--spacing-l);
}
.utah-design-system .py-spacing-l {
padding-top: var(--spacing-l);
padding-bottom: var(--spacing-l);
}
.utah-design-system .p-spacing-xl {
padding: var(--spacing-xl);
}
.utah-design-system .pt-spacing-xl {
padding-top: var(--spacing-xl);
}
.utah-design-system .pr-spacing-xl {
padding-right: var(--spacing-xl);
}
.utah-design-system .pb-spacing-xl {
padding-bottom: var(--spacing-xl);
}
.utah-design-system .pl-spacing-xl {
padding-left: var(--spacing-xl);
}
.utah-design-system .px-spacing-xl {
padding-left: var(--spacing-xl);
padding-right: var(--spacing-xl);
}
.utah-design-system .py-spacing-xl {
padding-top: var(--spacing-xl);
padding-bottom: var(--spacing-xl);
}
.utah-design-system .p-spacing-s {
padding: var(--spacing-s);
}
.utah-design-system .pt-spacing-s {
padding-top: var(--spacing-s);
}
.utah-design-system .pr-spacing-s {
padding-right: var(--spacing-s);
}
.utah-design-system .pb-spacing-s {
padding-bottom: var(--spacing-s);
}
.utah-design-system .pl-spacing-s {
padding-left: var(--spacing-s);
}
.utah-design-system .px-spacing-s {
padding-left: var(--spacing-s);
padding-right: var(--spacing-s);
}
.utah-design-system .py-spacing-s {
padding-top: var(--spacing-s);
padding-bottom: var(--spacing-s);
}
.utah-design-system .p-spacing-xs {
padding: var(--spacing-xs);
}
.utah-design-system .pt-spacing-xs {
padding-top: var(--spacing-xs);
}
.utah-design-system .pr-spacing-xs {
padding-right: var(--spacing-xs);
}
.utah-design-system .pb-spacing-xs {
padding-bottom: var(--spacing-xs);
}
.utah-design-system .pl-spacing-xs {
padding-left: var(--spacing-xs);
}
.utah-design-system .px-spacing-xs {
padding-left: var(--spacing-xs);
padding-right: var(--spacing-xs);
}
.utah-design-system .py-spacing-xs {
padding-top: var(--spacing-xs);
padding-bottom: var(--spacing-xs);
}
.utah-design-system .m-auto {
margin: auto;
}
.utah-design-system .mt-auto {
margin-top: auto;
}
.utah-design-system .mr-auto {
margin-right: auto;
}
.utah-design-system .mb-auto {
margin-bottom: auto;
}
.utah-design-system .ml-auto {
margin-left: auto;
}
.utah-design-system .mx-auto {
margin-left: auto;
margin-right: auto;
}
.utah-design-system .my-auto {
margin-top: auto;
margin-bottom: auto;
}
/*
############ _settings-index.scss ############
variables and settings
*/
/*
############ _font-size.scss ############
Grid variables
*/
.utah-design-system {
--grid-fixed: var(--content-width);
--grid-fixed-half: calc(var(--grid-fixed) / 2);
--grid-fixed-form: calc(var(--grid-fixed) / 2.3);
--grid-fixed-third: calc(var(--grid-fixed) / 3);
--grid-fixed-fourth: calc(var(--grid-fixed) / 4);
}
.utah-design-system .grid-wrapper {
display: flex;
justify-content: center;
}
.utah-design-system .grid-fixed {
max-width: var(--grid-fixed);
width: 100%;
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-l);
}
.utah-design-system .grid-fixed--2col {
grid-template-columns: 1fr 1fr;
}
.utah-design-system .grid-fixed--3col {
grid-template-columns: 1fr 1fr 1fr;
}
.utah-design-system .grid-fixed--4col {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.utah-design-system .grid-fixed .grid-column-span-2 {
grid-column: span 2;
}
/*
############ _settings-index.scss ############
variables and settings
*/
/*
############ _font-size.scss ############
Font size variables
*/
.utah-design-system {
--normal-font-family: 'Source Sans 3', 'Source Sans Pro', 'Helvetica Neue', Helvetica, sans-serif;
--fixed-width-font-family: 'Source Code Pro', monospace;
--font-size-2xs: .8125rem;
--font-size-xs: .875rem;
--font-size-s: .9375rem;
--font-size: 1rem;
--font-size-m: 1.125rem;
--font-size-l: 1.25rem;
--font-size-xl: 1.5rem;
--font-size-2xl: 1.75rem;
--font-size-3xl: 2rem;
--font-size-4xl: 2.5rem;
--font-size-5xl: 3rem;
--font-size-6xl: 3.5rem;
--font-size-7xl: 4.5rem;
--font-weight-extra-light: 200;
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-semi-bold: 600;
--font-weight-bold: 700;
--font-weight-black: 900;
}
.utah-design-system .font-size-2xs {
font-size: var(--font-size-2xs);
}
.utah-design-system .font-size-xs {
font-size: var(--font-size-xs);
}
.utah-design-system .font-size-s {
font-size: var(--font-size-s);
}
.utah-design-system .font-size {
font-size: var(--font-size);
}
.utah-design-system .font-size-m {
font-size: var(--font-size-m);
}
.utah-design-system .font-size-l {
font-size: var(--font-size-l);
}
.utah-design-system .font-size-xl {
font-size: var(--font-size-xl);
}
.utah-design-system .font-size-2xl {
font-size: var(--font-size-2xl);
}
.utah-design-system .font-size-3xl {
font-size: var(--font-size-3xl);
}
.utah-design-system .font-size-4xl {
font-size: var(--font-size-4xl);
}
.utah-design-system .font-size-5xl {
font-size: var(--font-size-5xl);
}
.utah-design-system .font-size-6xl {
font-size: var(--font-size-6xl);
}
.utah-design-system .font-size-7xl {
font-size: var(--font-size-7xl);
}
.utah-design-system .font-extra-light {
font-weight: var(--font-weight-extra-light);
}
.utah-design-system .font-light {
font-weight: var(--font-weight-light);
}
.utah-design-system .font-normal {
font-weight: var(--font-weight-normal);
}
.utah-design-system .font-semi-bold {
font-weight: var(--font-weight-semi-bold);
}
.utah-design-system .font-bold {
font-weight: var(--font-weight-bold);
}
.utah-design-system .font-black {
font-weight: var(--font-weight-black);
}
/*
############ _color-swatches.scss ############
base color swatches for the design system
*/
/*
############ _settings-index.scss ############
variables and settings
*/
@font-face {
font-family: "utah design system";
src: url("https://cdn.utah.gov/design-system/fonts/v2/utah-design-system.woff") format("woff"), url("https://cdn.utah.gov/design-system/fonts/v2/utah-design-system.ttf") format("truetype"), url("https://cdn.utah.gov/design-system/fonts/v2/utah-design-system.svg#utah-design-system") format("svg");
font-weight: normal;
font-style: normal;
font-display: block;
}
.utah-design-system {
--icon-check-mark-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12.15'%3E%3Cg%3E%3Cpath d='M6.185,12.15L0,5.966,2.335,3.631l3.85,3.849L13.665,0l2.335,2.335L6.185,12.15Z' style='fill: %23fff;'/%3E%3C/g%3E%3C/svg%3E");
--icon-chevron-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg%3E%3Crect width='14' height='14' style='fill: none;'/%3E%3Cpath d='M3.142,5l3.716,3.71,3.717-3.71,1.142,1.142-4.859,4.858L2,6.142l1.142-1.142Z' style='fill: %23474747;'/%3E%3C/g%3E%3C/svg%3E");
}
.utah-design-system .uds-icon {
font-family: "utah design system";
}
.utah-design-system [class*=utds-icon-before-],
.utah-design-system [class*=utds-icon-after-] {
display: inline-flex;
align-items: center;
}
.utah-design-system [class*=utds-icon-after-]::after {
display: inline-block;
font-family: "utah design system";
font-style: normal;
font-weight: normal;
font-size: 1em;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin-left: var(--spacing-2xs);
}
.utah-design-system [class*=utds-icon-before-]::before {
display: inline-block;
font-family: "utah design system";
font-style: normal;
font-weight: normal;
font-size: 1em;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin-right: var(--spacing-2xs);
}
.utah-design-system .utds-icon-before-external-link::before,
.utah-design-system .utds-icon-after-external-link::after {
content: "\e900";
font-size: 0.65em;
}
.utah-design-system .utds-icon-before-waffle::before,
.utah-design-system .utds-icon-after-waffle::after {
content: "\e901";
}
.utah-design-system .utds-icon-before-alert::before,
.utah-design-system .utds-icon-after-alert::after {
content: "\e902";
}
.utah-design-system .utds-icon-before-help::before,
.utah-design-system .utds-icon-after-help::after {
content: "\e903";
}
.utah-design-system .utds-icon-before-bookmark::before,
.utah-design-system .utds-icon-after-bookmark::after {
content: "\e904";
}
.utah-design-system .utds-icon-before-search::before,
.utah-design-system .utds-icon-after-search::after {
content: "\e905";
}
.utah-design-system .utds-icon-before-check::before,
.utah-design-system .utds-icon-after-check::after {
content: "\e906";
}
.utah-design-system .utds-icon-before-star::before,
.utah-design-system .utds-icon-after-star::after {
content: "\e907";
}
.utah-design-system .utds-icon-before-info::before,
.utah-design-system .utds-icon-after-info::after {
content: "\e908";
}
.utah-design-system .utds-icon-before-unfold-less::before,
.utah-design-system .utds-icon-after-unfold-less::after {
content: "\e909";
}
.utah-design-system .utds-icon-before-unfold-more::before,
.utah-design-system .utds-icon-after-unfold-more::after {
content: "\e90a";
}
.utah-design-system .utds-icon-before-circle-chevron-down::before,
.utah-design-system .utds-icon-after-circle-chevron-down::after {
content: "\e90b";
}
.utah-design-system .utds-icon-before-circle-chevron-up::before,
.utah-design-system .utds-icon-after-circle-chevron-up::after {
content: "\e90c";
}
.utah-design-system .utds-icon-before-chevron-up::before,
.utah-design-system .utds-icon-after-chevron-up::after {
content: "\e90d";
}
.utah-design-system .utds-icon-before-chevron-right::before,
.utah-design-system .utds-icon-after-chevron-right::after {
content: "\e90e";
}
.utah-design-system .utds-icon-before-chevron-down::before,
.utah-design-system .utds-icon-after-chevron-down::after {
content: "\e90f";
}
.utah-design-system .utds-icon-before-chevron-left::before,
.utah-design-system .utds-icon-after-chevron-left::after {
content: "\e910";
}
.utah-design-system .utds-icon-before-arrow-up::before,
.utah-design-system .utds-icon-after-arrow-up::after {
content: "\e911";
}
.utah-design-system .utds-icon-before-arrow-right::before,
.utah-design-system .utds-icon-after-arrow-right::after {
content: "\e912";
}
.utah-design-system .utds-icon-before-arrow-down::before,
.utah-design-system .utds-icon-after-arrow-down::after {
content: "\e913";
}
.utah-design-system .utds-icon-before-arrow-left::before,
.utah-design-system .utds-icon-after-arrow-left::after {
content: "\e914";
}
.utah-design-system .utds-icon-before-plus::before,
.utah-design-system .utds-icon-after-plus::after {
content: "\e915";
}
.utah-design-system .utds-icon-before-minus::before,
.utah-design-system .utds-icon-after-minus::after {
content: "\e916";
}
.utah-design-system .utds-icon-before-x-icon::before,
.utah-design-system .utds-icon-after-x-icon::after {
content: "\e917";
}
.utah-design-system .utds-icon-before-edit::before,
.utah-design-system .utds-icon-after-edit::after {
content: "\e918";
}
.utah-design-system .utds-icon-before-edit-box::before,
.utah-design-system .utds-icon-after-edit-box::after {
content: "\e919";
}
.utah-design-system .utds-icon-before-verified::before,
.utah-design-system .utds-icon-after-verified::after {
content: "\e91a";
}
.utah-design-system .utds-icon-before-gear::before,
.utah-design-system .utds-icon-after-gear::after {
content: "\e91b";
}
.utah-design-system .utds-icon-before-doc::before,
.utah-design-system .utds-icon-after-doc::after {
content: "\e91c";
}
.utah-design-system .utds-icon-before-doc-square::before,
.utah-design-system .utds-icon-after-doc-square::after {
content: "\e91d";
}
.utah-design-system .utds-icon-before-warning::before,
.utah-design-system .utds-icon-after-warning::after {
content: "\e91e";
}
.utah-design-system .utds-icon-before-error::before,
.utah-design-system .utds-icon-after-error::after {
content: "\e91f";
}
.utah-design-system .utds-icon-before-copy::before,
.utah-design-system .utds-icon-after-copy::after {
content: "\e920";
}
.utah-design-system .utds-icon-before-home-menu::before,
.utah-design-system .utds-icon-after-home-menu::after {
content: "\e921";
}
.utah-design-system .utds-icon-before-hamburger::before,
.utah-design-system .utds-icon-after-hamburger::after {
content: "\e922";
}
.utah-design-system .utds-icon-before-account::before,
.utah-design-system .utds-icon-after-account::after {
content: "\e923";
}
.utah-design-system .utds-icon-before-lock::before,
.utah-design-system .utds-icon-after-lock::after {
content: "\e924";
}
.utah-design-system .utds-icon-before-more-vertical::before,
.utah-design-system .utds-icon-after-more-vertical::after {
content: "\e925";
}
.utah-design-system .utds-icon-before-more-horizontal::before,
.utah-design-system .utds-icon-after-more-horizontal::after {
content: "\e926";
}
.utah-design-system .utds-icon-before-download::before,
.utah-design-system .utds-icon-after-download::after {
content: "\e927";
}
.utah-design-system .utds-icon-before-upload::before,
.utah-design-system .utds-icon-after-upload::after {
content: "\e928";
}
.utah-design-system .utds-icon-before-favorite::before,
.utah-design-system .utds-icon-after-favorite::after {
content: "\e929";
}
.utah-design-system .utds-icon-before-visibility::before,
.utah-design-system .utds-icon-after-visibility::after {
content: "\e92a";
}
.utah-design-system .utds-icon-before-visibility-off::before,
.utah-design-system .utds-icon-after-visibility-off::after {
content: "\e92b";
}
.utah-design-system .utds-icon-before-trash::before,
.utah-design-system .utds-icon-after-trash::after {
content: "\e92c";
}
.utah-design-system .utds-icon-before-calendar::before,
.utah-design-system .utds-icon-after-calendar::after {
content: "\e92d";
}
.utah-design-system .utds-icon-before-clock::before,
.utah-design-system .utds-icon-after-clock::after {
content: "\e92e";
}
.utah-design-system .utds-icon-before-double-arrow-up::before,
.utah-design-system .utds-icon-after-double-arrow-up::after {
content: "\e92f";
}
.utah-design-system .utds-icon-before-double-arrow-right::before,
.utah-design-system .utds-icon-after-double-arrow-right::after {
content: "\e930";
}
.utah-design-system .utds-icon-before-double-arrow-down::before,
.utah-design-system .utds-icon-after-double-arrow-down::after {
content: "\e931";
}
.utah-design-system .utds-icon-before-double-arrow-left::before,
.utah-design-system .utds-icon-after-double-arrow-left::after {
content: "\e932";
}
.utah-design-system .utds-icon-before-filter::before,
.utah-design-system .utds-icon-after-filter::after {
content: "\e933";
}
.utah-design-system .utds-icon-before-restart::before,
.utah-design-system .utds-icon-after-restart::after {
content: "\e934";
}
.utah-design-system .utds-icon-before-sync::before,
.utah-design-system .utds-icon-after-sync::after {
content: "\e935";
}
.utah-design-system .utds-icon-before-refresh::before,
.utah-design-system .utds-icon-after-refresh::after {
content: "\e936";
}
.utah-design-system .utds-icon-before-light-mode::before,
.utah-design-system .utds-icon-after-light-mode::after {
content: "\e937";
}
.utah-design-system .utds-icon-before-dark-mode::before,
.utah-design-system .utds-icon-after-dark-mode::after {
content: "\e938";
}
.utah-design-system .utds-icon-before-mail::before,
.utah-design-system .utds-icon-after-mail::after {
content: "\e939";
}
.utah-design-system .utds-icon-before-share::before,
.utah-design-system .utds-icon-after-share::after {
content: "\e93a";
}
.utah-design-system .utds-icon-before-policy::before,
.utah-design-system .utds-icon-after-policy::after {
content: "\e93b";
}
.utah-design-system .utds-icon-before-login::before,
.utah-design-system .utds-icon-after-login::after {
content: "\e93c";
}
.utah-design-system .utds-icon-before-logout::before,
.utah-design-system .utds-icon-after-logout::after {
content: "\e93d";
}
.utah-design-system .utds-icon-before-circle-check::before,
.utah-design-system .utds-icon-after-circle-check::after {
content: "\e93e";
}
.utah-design-system .utds-icon-before-mail-open::before,
.utah-design-system .utds-icon-after-mail-open::after {
content: "\e93f";
}
/*
############ _media-size-vars.scss ############
Media Sizes - SCSS Variables
*/
.utah-design-system {
/* color */
/* ######## Pick these colors to match your desired style ######## */
--primary-color: #b2441e;
--primary-color-dark: #71321c;
--primary-color-light: #f9f0ed;
--gray-on-primary-color: #474747;
--secondary-color: #1f89ad;
--secondary-color-dark: #27424b;
--secondary-color-light: #edf5f8;
--gray-on-secondary-color: #474747;
--accent-color: #ffb612;
--accent-color-dark: #463d29;
--accent-color-light: #fff9ec;
--gray-on-accent-color: #474747;
--form-ele-color: #2765e4;
--form-ele-color-light: #9bb8f2;
--form-ele-disabled-color: #949494;
--form-ele-placeholder-color: #757575;
/* ######## --------------------------------------------- ######## */
--gray-color: #474747;
--gray-medium-color: #616161;
--gray-3-1-contrast: #949494;
--gray-medium-light-color: #d7d7d7;
--gray-light-color: #f1f1f1;
--gray-dark-color: #333333;
--disabled-gray: rgba(0, 0, 0, 0.05);
--hover-gray-color: rgba(0, 0, 0, 0.07);
--hover-gray-color-opaque: rgba(233, 233, 233);
--code-color: #f1f1f1;
--gray-border: #d7d7d7;
--danger-color: #ba0000;
--warning-color: #ba6300;
--info-color: var(--secondary-color);
--success-color: #2f8700;
--badge-color: var(--danger-color);
/* transition timings */
--timing-xquick: 100ms;
--timing-quick: 200ms;
--timing-medium: 400ms;
--timing-slow: 600ms;
/* rounded corners */
--radius-small1x: 3px;
--radius-small: 6px;
--radius-medium: 9px;
--radius-large: 12px;
--radius-circle: 999px;
/* form element sizes */
--form-ele-small4x: 0.75rem;
--form-ele-small3x: 1rem;
--form-ele-small2x: 1.25rem;
--form-ele-small1x: 1.5rem;
--form-ele-small: 1.875rem;
--form-ele-medium: 2.25rem;
--form-ele-large: 2.5rem;
--form-ele-large1x: 3.125rem;
--form-checkbox-small: 0.875rem;
--form-checkbox-medium: 1.125rem;
--form-checkbox-large: 1.375rem;
/* content layout sizes */
--content-width-narrow: 808px;
--content-width-medium: 1016px;
--content-width: 1224px;
--content-width-wide: 1432px;
--documentation-width: 700px;
--documentation-left-width: 200px;
--documentation-right-width: 200px;
--documentation-padding: var(--spacing-2xl) var(--spacing-xl);
--documentation-padding-small: var(--spacing-xl) var(--spacing);
/* elevation box shadows */
--drop-shadow-color: rgba(0, 0, 0, 0.3);
--drop-shadow-color-top: rgba(0, 0, 0, 0.15);
--elevation-small: 0 3px 6px var(--drop-shadow-color);
--elevation-medium: 0 6px 12px var(--drop-shadow-color);
--elevation-large: 0 12px 16px var(--drop-shadow-color);
--elevation-small-borderless: 0 3px 6px var(--drop-shadow-color), 0 -3px 3px var(--drop-shadow-color-top);
--elevation-medium-borderless: 0 6px 12px var(--drop-shadow-color), 0 -3px 6px var(--drop-shadow-color-top);
--elevation-large-borderless: 0 12px 16px var(--drop-shadow-color), 0 -3px 12px var(--drop-shadow-color-top);
/* color utility classes */
}
.utah-design-system .primary-color-background {
background-color: var(--primary-color);
}
.utah-design-system .primary-color-dark-background {
background-color: var(--primary-color-dark);
}
.utah-design-system .primary-color-light-background {
background-color: var(--primary-color-light);
}
.utah-design-system .gray-on-primary-background {
background-color: var(--gray-on-primary-color);
}
.utah-design-system .primary-color {
color: var(--primary-color);
}
.utah-design-system .primary-color-border {
border-color: var(--primary-color);
}
.utah-design-system .secondary-color-background {
background-color: var(--secondary-color);
}
.utah-design-system .secondary-color-dark-background {
background-color: var(--secondary-color-dark);
}
.utah-design-system .secondary-color-light-background {
background-color: var(--secondary-color-light);
}
.utah-design-system .gray-on-secondary-background {
background-color: var(--gray-on-secondary-color);
}
.utah-design-system .secondary-color {
color: var(--secondary-color);
}
.utah-design-system .secondary-color-border {
border-color: var(--secondary-color);
}
.utah-design-system .accent-color-background {
background-color: var(--accent-color);
}
.utah-design-system .accent-color-dark-background {
background-color: var(--accent-color-dark);
}
.utah-design-system .accent-color-light-background {
background-color: var(--accent-color-light);
}
.utah-design-system .gray-on-accent-background {
background-color: var(--gray-on-accent-color);
}
.utah-design-system .accent-color {
color: var(--accent-color);
}
.utah-design-system .accent-color-border {
border-color: var(--accent-color);
}
.utah-design-system .white-color-background {
background-color: white;
}
.utah-design-system .gray-color-background {
background-color: var(--gray-color);
}
.utah-design-system .gray-color-light-background {
background-color: var(--gray-light-color);
}
.utah-design-system .white-color {
color: white;
}
.utah-design-system .background-frosted-dark {
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(16px) brightness(1.5);
-webkit-backdrop-filter: blur(16px) brightness(1.5);
}
.utah-design-system .background-frosted-light {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.utah-design-system .backdrop-dark {
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(6px) brightness(60%);
}
/*
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
*/
/*
############ _tools-index.scss ############
scss mixins and functions
*/
/*
############ _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.
*/
}
.utah-design-system main {
display: block;
}
.utah-design-system {
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
}
.utah-design-system h1 {
font-size: 2em;
margin: 0.67em 0;
}
.utah-design-system {
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
}
.utah-design-system hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
.utah-design-system {
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
}
.utah-design-system pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
.utah-design-system {
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
}
.utah-design-system a {
background-color: transparent;
}
.utah-design-system {
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
}
.utah-design-system abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
.utah-design-system {
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
}
.utah-design-system b,
.utah-design-system strong {
font-weight: bolder;
}
.utah-design-system {
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
}
.utah-design-system code,
.utah-design-system kbd,
.utah-design-system samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
.utah-design-system {
/**
* Add the correct font size in all browsers.
*/
}
.utah-design-system small {
font-size: 80%;
}
.utah-design-system {
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
}
.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 {
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
}
.utah-design-system img {
border-style: none;
}
.utah-design-system {
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
}
.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 {
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
}
.utah-design-system button,
.utah-design-system input { /* 1 */
overflow: visible;
}
.utah-design-system {
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
}
.utah-design-system button,
.utah-design-system select { /* 1 */
text-transform: none;
}
.utah-design-system {
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
}
.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 {
/**
* Remove the inner border and padding in Firefox.
*/
}
.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 {
/**
* Correct the padding in Firefox.
*/
}
.utah-design-system fieldset {
padding: 0.35em 0.75em 0.625em;
}
.utah-design-system {
/**
* 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.
*/
}
.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 {
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
}
.utah-design-system progress {
vertical-align: baseline;
}
.utah-design-system {
/**
* Remove the default vertical scrollbar in IE 10+.
*/
}
.utah-design-system textarea {
overflow: auto;
}
.utah-design-system {
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
}
.utah-design-system [type=checkbox],
.utah-design-system [type=radio] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
.utah-design-system {
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
}
.utah-design-system [type=number]::-webkit-inner-spin-button,
.utah-design-system [type=number]::-webkit-outer-spin-button {
height: auto;
}
.utah-design-system {
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
}
.utah-design-system [type=search] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
.utah-design-system {
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
}
.utah-design-system [type=search]::-webkit-search-decoration {
-webkit-appearance: none;
}
.utah-design-system {
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
}
.utah-design-system ::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
.utah-design-system {
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
}
.utah-design-system details {
display: block;
}
.utah-design-system {
/*
* Add the correct display in all browsers.
*/
}
.utah-design-system summary {
display: list-item;
}
.utah-design-system {
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
}
.utah-design-system template {
display: none;
}
.utah-design-system {
/**
* Add the correct display in IE 10.
*/
}
.utah-design-system [hidden] {
display: none;
}
/*
############ _elements-index.scss ############
elemental html: h1, h2, h3, ul, li, etc.
*/
.utah-design-system {
margin: 0;
font-family: var(--normal-font-family);
font-size: 16px;
line-height: 1.4;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: var(--gray-color);
}
.utah-design-system h1 {
font-size: var(--font-size-4xl);
margin: 0;
line-height: 1.1;
}
.utah-design-system h2 {
font-size: var(--font-size-3xl);
margin: 0;
line-height: 1.2;
}
.utah-design-system h3 {
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-semi-bold);
margin: 0;
line-height: 1.3;
}
.utah-design-system h4 {
font-size: var(--font-size-l);
font-weight: var(--font-weight-semi-bold);
margin: 0;
}
.utah-design-system h5 {
font-size: var(--font-size);
margin: 0;
}
.utah-design-system h6 {
font-size: var(--font-size);
margin: 0;
}
.utah-design-system p {
margin: 0 0 var(--spacing-l);
}
.utah-design-system code {
font-family: var(--fixed-width-font-family);
font-size: 0.95rem;
background: var(--code-color);
padding: var(--spacing-3xs) var(--spacing-2xs);
border-radius: var(--radius-small1x);
}
.utah-design-system code.primary-color {
color: var(--primary-color);
background: var(--primary-color-light);
}
.utah-design-system ul,
.utah-design-system ol {
padding: 0 0 0 var(--spacing-2xl);
margin: 0;
line-height: 1.7;
}
.utah-design-system hr {
height: 0;
width: 100%;
border: none;
border-top: 1px solid var(--gray-border);
}
.utah-design-system a[href]:not(.button, .action-card) {
color: var(--primary-color);
}
.utah-design-system a[href]:not(.button, .action-card):hover {
box-shadow: -3px -1px 0 0px var(--hover-gray-color-opaque), 3px -1px 0 0px var(--hover-gray-color-opaque), 3px 1px 0 0px var(--hover-gray-color-opaque), -3px 1px 0 0px var(--hover-gray-color-opaque), inset 0 0 0 1000px var(--hover-gray-color-opaque);
color: var(--primary-color-dark);
}
.utah-design-system dialog {
border: none;
}
/*
############ _objects-index.scss ############
containers and general design patterns, 2up, 3up, layout grids, etc.
*/
.lead-in {
font-size: var(--font-size-m);
line-height: 1.6rem;
}
/*
############ _components-index.scss ############
component specific, BEM (Block, Element, Modifier)
@media for each component should be contained with the component.
*/
/* ---- Base Components ---- */
.utah-design-system .accordion {
width: 100%;
}
.utah-design-system .accordion__header, .utah-design-system .accordion__header.button {
border-radius: var(--radius-small);
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
padding: var(--spacing-s) var(--spacing);
border: none;
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
box-sizing: border-box;
}
.utah-design-system .accordion__header [class*=utds-icon-before-]::before, .utah-design-system .accordion__header.button [class*=utds-icon-before-]::before {
margin-right: 0;
font-size: 1.5rem;
}
.utah-design-system .accordion__header--open {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.utah-design-system .accordion .accordion__header h1 {
margin: 0;
}
.utah-design-system .accordion__content {
background: var(--gray-light-color);
padding: 0;
box-sizing: border-box;
height: 0;
overflow: hidden;
border-bottom-left-radius: var(--radius-small);
border-bottom-right-radius: var(--radius-small);
}
.utah-design-system .accordion__content--open, .utah-design-system .accordion__content:focus-within {
height: auto;
padding: var(--spacing);
}
.utah-design-system .accordion__content--open.accordion__content--bordered, .utah-design-system .accordion__content:focus-within.accordion__content--bordered {
background: transparent;
border: 1px solid var(--gray-3-1-contrast);
border-top: 0;
}
/*
############ _action-card.scss ############
*/
.utah-design-system .action-card {
border: 2px solid var(--gray-color);
border-radius: var(--radius-small);
padding: var(--spacing);
text-decoration: none;
color: var(--gray-color);
transition: all 200ms ease-in-out, outline-offset 0ms ease;
box-sizing: border-box;
}
.utah-design-system .action-card:hover {
box-shadow: none;
background: var(--gray-color);
color: white;
}
.utah-design-system .action-card:focus-visible {
outline-offset: var(--spacing-2xs);
}
.utah-design-system .action-card--primary-color {
border: 2px solid var(--primary-color);
color: var(--primary-color);
}
.utah-design-system .action-card--primary-color:hover {
background: var(--primary-color);
}
.utah-design-system .action-card--secondary-color {
border: 2px solid var(--secondary-color);
color: var(--secondary-color);
}
.utah-design-system .action-card--secondary-color:hover {
background: var(--secondary-color);
}
.utah-design-system .action-card--accent-color {
border: 2px solid var(--accent-color);
color: var(--accent-color);
}
.utah-design-system .action-card--accent-color:hover {
background: var(--accent-color);
}
.utah-design-system .action-card--solid {
background: var(--gray-color);
color: white;
}
.utah-design-system .action-card--solid.action-card--primary-color {
background: var(--primary-color);
}
.utah-design-system .action-card--solid.action-card--primary-color:hover {
color: var(--primary-color);
background: white;
}
.utah-design-system .action-card--solid.action-card--secondary-color {
background: var(--secondary-color);
}
.utah-design-system .action-card--solid.action-card--secondary-color:hover {
color: var(--secondary-color);
background: white;
}
.utah-design-system .action-card--solid.action-card--accent-color {
background: var(--accent-color);
}
.utah-design-system .action-card--solid.action-card--accent-color:hover {
color: var(--accent-color);
background: white;
}
.utah-design-system .action-card__title {
display: flex;
justify-content: space-between;
}
/*
############ _action-card.scss ############
*/
.utah-design-system .card {
background: white;
border: 1px solid var(--gray-color);
}
.utah-design-system .card__title {
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-bold);
box-sizing: border-box;
}
.utah-design-system .card--solid {
border: none;
}
.utah-design-system .card__image {
object-fit: cover;
max-height: 175px;
width: 100%;
}
.utah-design-system .card__icon {
font-size: var(--font-size-4xl);
font-weight: 100;
margin-bottom: var(--spacing-s);
line-height: 1;
}
.utah-design-system .card--horizontal {
display: flex;
}
.utah-design-system .card--horizontal .card__image {
max-height: 100%;
max-width: 33%;
}
@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);
}
}
@keyframes skeleton {
0% {
opacity: 1;
}
50% {
opacity: 0.4;
}
100% {
opacity: 1;
}
}
/*
############ _drawer.scss ############
*/
.utah-design-system .drawer-wrapper {
height: 100vh;
position: fixed;
right: 0;
top: 0;
width: 100vw;
z-index: 9999;
}
.utah-design-system .drawer__backdrop {
animation: 200ms ease-in-out 100ms fade-in both;
height: 100%;
width: 100%;
}
.utah-design-system .drawer__inner {
background: white;
display: inline-block;
height: 100%;
overflow-y: auto;
padding: var(--spacing);
}
.utah-design-system .drawer__inner.drawer--right {
animation: 200ms ease-in-out 100ms right-in both;
margin-left: auto;
margin-right: 0;
}
.utah-design-system .drawer__inner.drawer--left {
animation: 200ms ease-in-out 100ms left-in both;
margin-left: 0;
margin-right: auto;
}
.utah-design-system .drawer__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 .drawer__content, .utah-design-system .drawer__footer {
line-height: 1.6rem;
padding: var(--spacing-xs) var(--spacing-l);
}
.utah-design-system .drawer__close-button {
top: var(--spacing-2xs);
right: var(--spacing-2xs);
}
.utah-design-system .drawer__close-button.button {
position: absolute;
}
.utah-design-system .drawer__close-button.icon-button--small [class*=utds-icon-before-]::before {
font-size: 0.7rem;
}
.utah-design-system .tab-group__list {
display: flex;
justify-content: space-evenly;
}
.utah-design-system .tab-group__list.tab-group--small-text .tab-group__tab-button {
font-size: var(--font-size);
}
.utah-design-system .tab-group__tab {
flex: 1 1 auto;
display: flex;
justify-content: center;
position: relative;
}
.utah-design-system .tab-group__tab::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background: var(--gray-color);
}
.utah-design-system .tab-group__tab--selected::after {
height: 5px;
bottom: -2px;
border-radius: var(--radius-circle);
background-color: var(--primary-color);
}
.utah-design-system .tab-group__tab-button {
border: none;
font-size: var(--font-size-l);
font-weight: var(--font-weight-semi-bold);
background-color: transparent;
margin: var(--spacing-xs) 0;
}
.utah-design-system .tab-group__tab-button:hover {
background-color: var(--hover-gray-color);
color: inherit;
}
.utah-design-system .tab-group__tab-button--selected {
color: var(--primary-color);
}
.utah-design-system .tab-group__panel {
padding-top: var(--spacing);
}
.utah-design-system .tab-group__panel--selected {
display: block;
}
.utah-design-system .tab-group--vertical {
display: flex;
}
.utah-design-system .tab-group--vertical .tab-group__list {
flex-direction: column;
margin-right: var(--spacing-l);
justify-content: flex-start;
padding-top: var(--spacing);
position: relative;
flex-shrink: 0;
}
.utah-design-system .tab-group--vertical .tab-group__list:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 1px;
height: calc(100% - var(--spacing));
background: var(--gray-color);
}
.utah-design-system .tab-group--vertical .tab-group__tab {
flex: 0;
}
.utah-design-system .tab-group--vertical .tab-group__tab:after {
z-index: 2;
width: 1px;
height: 100%;
}
.utah-design-system .tab-group--vertical .tab-group__tab--selected:after {
bottom: 0;
left: -2px;
width: 5px;
height: 100%;
}
/*
############ _button.scss ############
*/
.utah-design-system button, .utah-design-system .button {
background: white;
border-radius: 999px;
border: 2px solid var(--gray-color);
font-size: 1rem;
min-height: var(--form-ele-medium);
padding: 0 var(--spacing-xl);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 200ms ease-in-out, scale 100ms ease, box-shadow 100ms ease;
color: var(--gray-color);
text-decoration: none;
position: relative;
-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 {
fill: currentColor;
}
.utah-design-system button:hover, .utah-design-system .button:hover {
background: var(--gray-color);
color: white;
text-shadow: none;
box-shadow: none;
}
.utah-design-system button[disabled], .utah-design-system button[disable]:hover, .utah-design-system .button[disabled], .utah-design-system .button[disable]:hover {
cursor: not-allowed;
background: white !important;
color: var(--form-ele-disabled-color) !important;
border-color: var(--form-ele-disabled-color) !important;
}
.utah-design-system button[disabled]:active, .utah-design-system button[disabled].active, .utah-design-system button[disable]:hover:active, .utah-design-system button[disable]:hover.active, .utah-design-system .button[disabled]:active, .utah-design-system .button[disabled].active, .utah-design-system .button[disable]:hover:active, .utah-design-system .button[disable]:hover.active {
transform: none;
box-shadow: none;
}
.utah-design-system button:active, .utah-design-system button--active, .utah-design-system .button:active, .utah-design-system .button--active {
scale: 0.96;
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.5);
}
.utah-design-system button:focus-visible, .utah-design-system .button:focus-visible {
outline: 2px solid var(--form-ele-color);
outline-offset: 2px;
transition: none;
}
.utah-design-system .button {
/* ------------ SIZES ------------ */
}
.utah-design-system .button--small1x {
font-size: 0.85rem;
min-height: var(--form-ele-small1x);
padding: 0 var(--spacing-xs);
border-width: 1px;
}
.utah-design-system .button--small {
font-size: 0.938rem;
min-height: var(--form-ele-small);
padding: 0 var(--spacing);
}
.utah-design-system .button--large {
font-size: 1.25rem;
min-height: var(--form-ele-large);
}
.utah-design-system .button--large1x {
font-size: 1.5rem;
min-height: var(--form-ele-large1x);
padding: 0 var(--spacing-2xl);
}
.utah-design-system .button--icon {
display: flex;
align-items: center;
}
.utah-design-system .button--icon svg {
height: 0.8rem;
width: 0.8rem;
fill: currentColor;
}
.utah-design-system .button--icon [class*=utds-icon-after-]::after,
.utah-design-system .button--icon [class*=utds-icon-before-]::before {
font-size: 0.9em;
line-height: 0;
}
.utah-design-system .button--icon-left {
margin-right: var(--spacing-xs);
}
.utah-design-system .button--icon-right {
margin-left: var(--spacing-xs);
}
.utah-design-system .button--primary-color {
border-color: var(--primary-color);
color: var(--primary-color);
}
.utah-design-system .button--primary-color:hover {
background-color: var(--primary-color);
color: white;
}
.utah-design-system .button--primary-color:hover svg {
fill: white;
}
.primary-color-is-light.utah-design-system .button--primary-color {
border-color: var(--primary-color-dark);
color: var(--primary-color-dark);
}
.primary-color-is-light.utah-design-system .button--primary-color:hover {
background-color: var(--primary-color-dark);
color: white;
}
.utah-design-system .button--secondary-color {
border-color: var(--secondary-color);
color: var(--secondary-color);
}
.utah-design-system .button--secondary-color:hover {
background-color: var(--secondary-color);
color: white;
}
.secondary-color-is-light.utah-design-system .button--secondary-color {
border-color: var(--secondary-color-dark);
color: var(--secondary-color-dark);
}
.secondary-color-is-light.utah-design-system .button--secondary-color:hover {
ba