@utahdts/utah-design-system-header 3.0.3 → 3.0.4

package/dist/style.css

@@ -1,4 +1,5 @@
 @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:
@@ -20,7 +21,6 @@ BEM standard: Block, Element, Modifier
 ############     _settings-index.scss      ############
 variables and settings
 */
-
 /*
 ############     _class-vars.scss      ############
 CSS Classes - SCSS Variables
@@ -304,7 +304,6 @@ variables and settings
   margin-top: auto;
   margin-bottom: auto;
 }
-
 /*
 ############     _settings-index.scss      ############
 variables and settings
@@ -343,7 +342,6 @@ Grid variables
 .utah-design-system .grid-fixed .grid-column-span-2 {
   grid-column: span 2;
 }
-
 /*
 ############     _settings-index.scss      ############
 variables and settings
@@ -432,7 +430,6 @@ Font size variables
 .utah-design-system .font-black {
   font-weight: var(--font-weight-black);
 }
-
 /*
 ############     _color-swatches.scss      ############
 base color swatches for the design system
@@ -729,7 +726,6 @@ variables and settings
 .utah-design-system .utds-icon-after-logout::after {
   content: "5";
 }
-
 /*
 ############     _media-size-vars.scss      ############
 Media Sizes - SCSS Variables
@@ -894,7 +890,6 @@ Media Sizes - SCSS Variables
   background: rgba(0, 0, 0, 0.6);
   backdrop-filter: blur(6px) brightness(60%);
 }
-
 /*
 BEM standard: Block, Element, Modifier
   Block: use dashes to separate words:
@@ -1181,7 +1176,6 @@ css resets, etc.
 .utah-design-system [hidden] {
   display: none;
 }
-
 /*
 ############     _elements-index.scss      ############
 elemental html: h1, h2, h3, ul, li, etc.
@@ -1260,7 +1254,6 @@ elemental html: h1, h2, h3, ul, li, etc.
 .utah-design-system dialog {
   border: none;
 }
-
 /*
 ############     _objects-index.scss      ############
 containers and general design patterns, 2up, 3up, layout grids, etc.
@@ -1269,7 +1262,6 @@ containers and general design patterns, 2up, 3up, layout grids, etc.
   font-size: var(--font-size-m);
   line-height: 1.6rem;
 }
-
 /*
 ############     _components-index.scss      ############
 component specific, BEM (Block, Element, Modifier)
@@ -1320,7 +1312,6 @@ component specific, BEM (Block, Element, Modifier)
   border: 1px solid var(--gray-3-1-contrast);
   border-top: 0;
 }
-
 /*
 ############     _action-card.scss      ############
 */
@@ -1391,7 +1382,6 @@ component specific, BEM (Block, Element, Modifier)
   display: flex;
   justify-content: space-between;
 }
-
 /*
 ############     _action-card.scss      ############
 */
@@ -1425,7 +1415,6 @@ component specific, BEM (Block, Element, Modifier)
   max-height: 100%;
   max-width: 33%;
 }
-
 @keyframes fade-in {
   0% {
     opacity: 0;
@@ -1495,7 +1484,6 @@ component specific, BEM (Block, Element, Modifier)
     opacity: 1;
   }
 }
-
 /*
 ############     _drawer.scss      ############
 */
@@ -1548,7 +1536,6 @@ component specific, BEM (Block, Element, Modifier)
 .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;
@@ -1631,7 +1618,6 @@ component specific, BEM (Block, Element, Modifier)
   width: 5px;
   height: 100%;
 }
-
 /*
 ############     _button.scss      ############
 */
@@ -1750,7 +1736,6 @@ component specific, BEM (Block, Element, Modifier)
   background-color: var(--primary-color-dark);
   color: white;
 }
-
 .utah-design-system .button--secondary-color {
   border-color: var(--secondary-color);
   color: var(--secondary-color);
@@ -1767,7 +1752,6 @@ component specific, BEM (Block, Element, Modifier)
   background-color: var(--secondary-color-dark);
   color: white;
 }
-
 .utah-design-system .button--accent-color {
   border-color: var(--accent-color);
   color: var(--accent-color);
@@ -1784,7 +1768,6 @@ component specific, BEM (Block, Element, Modifier)
   background-color: var(--accent-color-dark);
   color: white;
 }
-
 .utah-design-system .button--solid {
   background: var(--gray-color);
   color: white;
@@ -1810,7 +1793,6 @@ component specific, BEM (Block, Element, Modifier)
   color: white;
   border-color: var(--primary-color-dark);
 }
-
 .utah-design-system .button--solid.button--primary-color.contrast-border-dark {
   border-color: var(--gray-on-primary-color);
 }
@@ -1831,7 +1813,6 @@ component specific, BEM (Block, Element, Modifier)
   color: white;
   border-color: var(--secondary-color-dark);
 }
-
 .utah-design-system .button--solid.button--secondary-color.contrast-border-dark {
   border-color: var(--gray-on-secondary-color);
 }
@@ -1852,7 +1833,6 @@ component specific, BEM (Block, Element, Modifier)
   color: white;
   border-color: var(--accent-color-dark);
 }
-
 .utah-design-system .button--solid.button--accent-color.contrast-border-dark {
   border-color: var(--gray-on-accent-color);
 }
@@ -1903,7 +1883,6 @@ component specific, BEM (Block, Element, Modifier)
   background: var(--primary-color);
   color: var(--gray-color);
 }
-
 .utah-design-system .dark-background-color .button.button--secondary-color {
   border-color: var(--secondary-color);
   background: white;
@@ -1923,7 +1902,6 @@ component specific, BEM (Block, Element, Modifier)
   background: var(--secondary-color);
   color: var(--gray-color);
 }
-
 .utah-design-system .dark-background-color .button.button--accent-color {
   border-color: var(--accent-color);
   background: white;
@@ -1943,7 +1921,6 @@ component specific, BEM (Block, Element, Modifier)
   background: var(--accent-color);
   color: var(--gray-color);
 }
-
 .utah-design-system .dark-background-color .button--solid {
   border-color: white;
   background: white;
@@ -1973,7 +1950,6 @@ component specific, BEM (Block, Element, Modifier)
   background: var(--primary-color-dark);
   color: white;
 }
-
 .utah-design-system .dark-background-color .button--solid.button--secondary-color {
   border-color: white;
   background: var(--secondary-color);
@@ -1993,7 +1969,6 @@ component specific, BEM (Block, Element, Modifier)
   background: var(--secondary-color-dark);
   color: white;
 }
-
 .utah-design-system .dark-background-color .button--solid.button--accent-color {
   border-color: white;
   background: var(--accent-color);
@@ -2013,7 +1988,6 @@ component specific, BEM (Block, Element, Modifier)
   background: var(--accent-color-dark);
   color: white;
 }
-
 /*
 ############     _icon-button.scss      ############
 */
@@ -2054,7 +2028,6 @@ component specific, BEM (Block, Element, Modifier)
   color: var(--primary-color-dark);
   background: var(--hover-gray-color);
 }
-
 .secondary-color-is-light.utah-design-system .icon-button--borderless.button--secondary-color {
   border-color: transparent;
 }
@@ -2062,7 +2035,6 @@ component specific, BEM (Block, Element, Modifier)
   color: var(--secondary-color-dark);
   background: var(--hover-gray-color);
 }
-
 .accent-color-is-light.utah-design-system .icon-button--borderless.button--accent-color {
   border-color: transparent;
 }
@@ -2070,7 +2042,6 @@ component specific, BEM (Block, Element, Modifier)
   color: var(--accent-color-dark);
   background: var(--hover-gray-color);
 }
-
 .utah-design-system .icon-button--borderless[disabled], .utah-design-system .icon-button--borderless[disable]:hover {
   background: transparent !important;
   border-color: transparent !important;
@@ -2126,7 +2097,6 @@ component specific, BEM (Block, Element, Modifier)
   padding: 0 var(--spacing-s);
   gap: var(--spacing-xs);
 }
-
 .utah-design-system .tag {
   padding: 0 var(--spacing-s);
   display: flex;
@@ -2287,7 +2257,6 @@ component specific, BEM (Block, Element, Modifier)
 .utah-design-system .tag--clearable .tag--small {
   padding: 0 0 0 var(--spacing-xs);
 }
-
 .utah-design-system .footer-agency-information {
   background: var(--gray-color);
   color: white;
@@ -2339,7 +2308,6 @@ component specific, BEM (Block, Element, Modifier)
   box-shadow: none;
   text-decoration: underline;
 }
-
 .utah-design-system .footer-social-media-bar {
   background: var(--primary-color);
   padding: 0 var(--spacing-xl);
@@ -2378,7 +2346,6 @@ component specific, BEM (Block, Element, Modifier)
   box-shadow: none;
   background: var(--primary-color-dark);
 }
-
 .utah-design-system .input-wrapper {
   margin: 0 0 var(--spacing-s) 0;
 }
@@ -2410,7 +2377,6 @@ component specific, BEM (Block, Element, Modifier)
   font-size: var(--font-size-l);
   line-height: 0.5;
 }
-
 .utah-design-system textarea {
   color: var(--gray-color);
   min-height: var(--form-ele-medium);
@@ -2462,7 +2428,6 @@ component specific, BEM (Block, Element, Modifier)
 .utah-design-system .text-area__label {
   display: block;
 }
-
 .utah-design-system input[type=text],
 .utah-design-system input[type=email],
 .utah-design-system input[type=password],
@@ -2528,7 +2493,6 @@ component specific, BEM (Block, Element, Modifier)
 .utah-design-system .text-input__clear-button[disabled]:active {
   transform: translateY(-50%);
 }
-
 .utah-design-system .combo-box-input[type=text] {
   padding: 0 var(--spacing-xl) 0 var(--spacing-xs);
 }
@@ -2637,7 +2601,6 @@ component specific, BEM (Block, Element, Modifier)
   position: absolute;
   top: 50%;
 }
-
 .utah-design-system .multi-select {
   background: white;
   color: var(--gray-color);
@@ -2727,7 +2690,6 @@ component specific, BEM (Block, Element, Modifier)
 .utah-design-system .multi-select--focused.multi-select--disabled {
   outline: none;
 }
-
 .utah-design-system .date-input[type=text] {
   padding: 0 var(--spacing-xl) 0 var(--spacing-xs);
 }
@@ -2780,7 +2742,6 @@ component specific, BEM (Block, Element, Modifier)
 .utah-design-system .date-input__popup .input-wrapper--calendar-input {
   margin: 0;
 }
-
 .utah-design-system .calendar-input__grid {
   display: grid;
   grid-auto-rows: 1fr;
@@ -2860,7 +2821,6 @@ component specific, BEM (Block, Element, Modifier)
 .utah-design-system .date-input__popup .calendar-input__grid:not(:has(+ .calendar-input__today)) {
   border-bottom: 0;
 }
-
 .utah-design-system .time-input__wrapper [class*=utds-icon-before-clock]::before {
   font-size: 1.1rem;
 }
@@ -2879,7 +2839,6 @@ component specific, BEM (Block, Element, Modifier)
 .utah-design-system .time-input__clock-icon--is-disabled {
   color: var(--form-ele-disabled-color);
 }
-
 .character-count {
   text-align: right;
   font-size: var(--font-size-s);
@@ -2888,7 +2847,6 @@ component specific, BEM (Block, Element, Modifier)
 .character-count--over-limit {
   color: var(--danger-color);
 }
-
 .utah-design-system input[type=checkbox] {
   width: var(--form-checkbox-medium);
   height: var(--form-checkbox-medium);
@@ -2964,7 +2922,6 @@ component specific, BEM (Block, Element, Modifier)
   position: relative;
   z-index: 1;
 }
-
 .utah-design-system select {
   color: var(--gray-color);
   min-height: var(--form-ele-medium);
@@ -3015,7 +2972,6 @@ component specific, BEM (Block, Element, Modifier)
 .utah-design-system .select-input__clear-button[disabled]:active {
   transform: translateY(-50%);
 }
-
 .utah-design-system .info-box {
   display: flex;
   align-items: center;
@@ -3061,7 +3017,6 @@ component specific, BEM (Block, Element, Modifier)
 .utah-design-system .info-box__success::before {
   background-color: var(--success-color);
 }
-
 .utah-design-system input[type=radio] {
   appearance: none;
   border-radius: var(--radius-circle);
@@ -3139,7 +3094,6 @@ component specific, BEM (Block, Element, Modifier)
   position: relative;
   z-index: 1;
 }
-
 .utah-design-system input[type=checkbox].switch {
   border: 0;
   clip: rect(0 0 0 0);
@@ -3283,7 +3237,6 @@ component specific, BEM (Block, Element, Modifier)
 .utah-design-system .input-wrapper--switch label {
   padding: var(--spacing-3xs) var(--spacing-xs);
 }
-
 .utah-design-system fieldset {
   border: none;
   padding: 0;
@@ -3294,7 +3247,6 @@ component specific, BEM (Block, Element, Modifier)
 .utah-design-system fieldset .input-wrapper:last-of-type {
   margin: 0 0 var(--spacing-xs) 0;
 }
-
 .utah-design-system .file-input__box {
   border: 1px dashed var(--gray-color);
   position: relative;
@@ -3371,7 +3323,6 @@ component specific, BEM (Block, Element, Modifier)
   width: 100%;
   z-index: 2;
 }
-
 .utah-design-system.main-menu__outer {
   position: relative;
   z-index: 2500;
@@ -3446,7 +3397,6 @@ component specific, BEM (Block, Element, Modifier)
   outline: none;
   outline-offset: 0;
 }
-
 .utah-design-system .menu-item__title {
   display: flex;
   flex-direction: row;
@@ -3513,7 +3463,6 @@ component specific, BEM (Block, Element, Modifier)
 .utah-design-system .menu-item__plain .menu-item__title-blank {
   font-size: var(--font-size-xs);
 }
-
 .utah-design-system .pagination ul {
   display: flex;
   list-style-type: none;
@@ -3574,7 +3523,6 @@ component specific, BEM (Block, Element, Modifier)
 .utah-design-system .pagination__next [class*=utds-icon-before-]::before, .utah-design-system .pagination__prev [class*=utds-icon-before-]::before {
   font-size: 0.9rem;
 }
-
 .utah-design-system .menu-side-panel {
   margin: var(--spacing) 0 0 0;
   font-size: var(--font-size-xs);
@@ -3650,7 +3598,6 @@ component specific, BEM (Block, Element, Modifier)
 .utah-design-system .menu-side-panel .menu-item__chevron svg {
   transition: transform var(--timing-quick) ease;
 }
-
 @media screen and (max-width: 1024px) {
   .utah-design-system .menu-side-panel .menu-item__title a.menu-item--selected::after {
     left: 0;
@@ -3685,7 +3632,6 @@ component specific, BEM (Block, Element, Modifier)
   pointer-events: all;
   margin: var(--spacing) var(--spacing-l);
 }
-
 .utah-design-system ul.vertical-menu {
   list-style-type: none;
   margin: 0;
@@ -3807,7 +3753,6 @@ component specific, BEM (Block, Element, Modifier)
 .utah-design-system .menu-item--mega-menu .vertical-menu li > ul {
   margin-left: 0;
 }
-
 .utah-design-system .menu-item--mega-menu .popup__content {
   padding: var(--spacing) var(--spacing-l);
 }
@@ -3823,7 +3768,6 @@ component specific, BEM (Block, Element, Modifier)
   font-size: var(--font-size);
   font-weight: var(--font-weight-semi-bold);
 }
-
 /*
 BEM standard: Block, Element, Modifier
   Block: use dashes to separate words:
@@ -4014,7 +3958,6 @@ BEM standard: Block, Element, Modifier
 .utah-design-system.banner-global__wrapper .banner__wrapper {
   position: relative;
 }
-
 /*
 BEM standard: Block, Element, Modifier
   Block: use dashes to separate words:
@@ -4134,7 +4077,6 @@ BEM standard: Block, Element, Modifier
 .utah-design-system .menu-item--mega-menu .popup__content {
   max-width: 720px;
 }
-
 /*
 BEM standard: Block, Element, Modifier
   Block: use dashes to separate words:
@@ -4223,7 +4165,6 @@ BEM standard: Block, Element, Modifier
 .utah-design-system .tooltip__wrapper[data-popper-placement^=right] .tooltip__arrow {
   left: -3px;
 }
-
 /*
 BEM standard: Block, Element, Modifier
   Block: use dashes to separate words:
@@ -4293,7 +4234,6 @@ BEM standard: Block, Element, Modifier
   max-width: 990px;
   border-radius: var(--radius-large);
 }
-
 /*
 BEM standard: Block, Element, Modifier
   Block: use dashes to separate words:
@@ -4353,7 +4293,6 @@ BEM standard: Block, Element, Modifier
   display: block;
   font-size: 1.3rem;
 }
-
 .utah-design-system .documentation-template {
   display: flex;
   flex-direction: row;
@@ -4410,7 +4349,6 @@ BEM standard: Block, Element, Modifier
   max-height: 100vh;
   overflow: auto;
 }
-
 @media screen and (max-width: 1300px) {
   .utah-design-system .documentation-template__right-group {
     max-width: calc(100% - 2 * var(--spacing-xl) - (var(--documentation-left-width) + 2px));
@@ -4465,7 +4403,6 @@ BEM standard: Block, Element, Modifier
   padding: 0 var(--spacing-2xl);
   box-sizing: border-box;
 }
-
 @media screen and (max-width: 640px) {
   .utah-design-system .landing-page-template .content-width {
     padding: 0 var(--spacing-l);
@@ -4501,7 +4438,6 @@ BEM standard: Block, Element, Modifier
   right: var(--spacing);
   background-color: transparent;
 }
-
 .utah-design-system .pre-code__wrapper {
   position: relative;
   width: 100%;
@@ -4540,7 +4476,6 @@ BEM standard: Block, Element, Modifier
   max-height: 200px;
   overflow: scroll;
 }
-
 .utah-design-system input.input--height-small,
 .utah-design-system .input--height-small {
   min-height: var(--form-ele-small);
@@ -4549,7 +4484,6 @@ BEM standard: Block, Element, Modifier
 .utah-design-system .input--height-small1x {
   min-height: var(--form-ele-small1x);
 }
-
 .utah-design-system .badge {
   background-color: var(--badge-color);
   border-radius: var(--radius-circle);
@@ -4575,7 +4509,6 @@ BEM standard: Block, Element, Modifier
   width: 9px;
   height: 9px;
 }
-
 .utah-design-system .skeleton {
   animation: skeleton 2s ease-in-out 0.5s infinite;
   background-color: var(--gray-3-1-contrast);
@@ -4594,7 +4527,6 @@ BEM standard: Block, Element, Modifier
   min-width: calc(2 * var(--spacing-6xl));
   min-height: var(--spacing-l);
 }
-
 .utah-design-system .spinner {
   display: flex;
   align-items: center;
@@ -4640,7 +4572,6 @@ BEM standard: Block, Element, Modifier
     animation: spinner-animation 2s linear 4;
   }
 }
-
 .utah-design-system .table__wrapper {
   overflow-x: auto;
 }
@@ -4885,7 +4816,6 @@ BEM standard: Block, Element, Modifier
   margin: var(--spacing);
   border-radius: var(--radius-small);
 }
-
 .utah-design-system .on-this-page {
   font-size: var(--font-size-xs);
 }
@@ -4914,7 +4844,6 @@ BEM standard: Block, Element, Modifier
   box-shadow: inset 0 0 0 1000px var(--hover-gray-color);
   color: var(--primary-color);
 }
-
 /* ---- Project Components ---- */
 /*
 ############     _popup.scss      ############
@@ -4962,21 +4891,17 @@ BEM standard: Block, Element, Modifier
 .utah-design-system .color-family button .utds-icon-before-check.is-light {
   color: black;
 }
-
 /* ---- Utah Header ---- */
 .utds-citizen-experience-wrapper, .utds-citizen-experience-wrapper--mobile {
   justify-content: flex-end;
   flex: 1;
 }
-
 .utds-citizen-experience-wrapper {
   display: flex;
 }
-
 .utds-citizen-experience-wrapper--mobile {
   display: none;
 }
-
 .utah-design-system .utds-action-items-wrapper {
   display: flex;
   gap: var(--spacing);
@@ -5012,7 +4937,6 @@ BEM standard: Block, Element, Modifier
 .utah-design-system .utds-header-action-item__title {
   margin-left: var(--spacing-xs);
 }
-
 .utds-header {
   padding: var(--spacing-s) var(--spacing-l);
   border-bottom: 1px solid #d7d7d7 !important;
@@ -5032,11 +4956,9 @@ BEM standard: Block, Element, Modifier
 .utds-header--small {
   height: 60px;
 }
-
 .utds-header-desktop--hidden {
   display: none !important;
 }
-
 .utah-design-system .utds-logo-wrapper {
   position: relative;
   height: 100%;
@@ -5135,7 +5057,6 @@ BEM standard: Block, Element, Modifier
 .utah-design-system a[href].utds-title-wrapper {
   text-decoration: none;
 }
-
 @media screen and (max-width: 768px) {
   .utah-design-system .utds-title-wrapper {
     font-size: var(--font-size-xl);
@@ -5206,7 +5127,6 @@ BEM standard: Block, Element, Modifier
 .utah-design-system .utds-official-website-popup__copyright {
   font-size: var(--font-size-s);
 }
-
 .utds-badge__wrapper {
   align-items: center;
   background-color: var(--danger-color);
@@ -5236,11 +5156,9 @@ BEM standard: Block, Element, Modifier
   top: 2px;
   width: 9px;
 }
-
 .utah-design-system .main-menu__hamburger.icon-button .utds-icon-before-x-icon::before {
   font-size: 0.9rem;
 }
-
 .utah-design-system.utds-header-mobile-menu,
 .utah-design-system .utds-header-mobile__utah-id-wrapper,
 .utah-design-system .icon-button.main-menu__hamburger,
@@ -5249,7 +5167,6 @@ BEM standard: Block, Element, Modifier
 .utah-design-system .main-menu__search-placeholder {
   display: none;
 }
-
 .utds-header-mobile-menu {
   opacity: 0;
   pointer-events: none;
@@ -5319,7 +5236,6 @@ BEM standard: Block, Element, Modifier
 .utah-design-system .utds-header-mobile-menu__action-item .icon-button [class*=utds-icon-before-home]::before {
   font-size: 1.4rem;
 }
-
 .utds-header-mobile-menu__content {
   padding: var(--spacing-s) var(--spacing);
 }
@@ -5332,14 +5248,12 @@ BEM standard: Block, Element, Modifier
 .utds-header-mobile-menu__content-item.is-open {
   display: block;
 }
-
 .utds-header-mobile__utah-id-wrapper {
   padding: var(--spacing-xs) 0;
 }
 .utds-header-mobile__utah-id-wrapper button.utds-utah-id__button {
   min-height: var(--form-ele-small);
 }
-
 .utah-design-system.utds-footer {
   background: var(--gray-color);
   padding: var(--spacing-xl);
@@ -5351,7 +5265,6 @@ BEM standard: Block, Element, Modifier
   box-sizing: border-box;
   width: 100%;
 }
-
 .utds-footer__horizontal-divider {
   position: absolute;
   width: calc(100% - 2 * var(--spacing-xl));
@@ -5419,7 +5332,6 @@ BEM standard: Block, Element, Modifier
   display: block;
   margin-left: var(--spacing-s);
 }
-
 @media screen and (max-width: 768px) {
   .utah-design-system.utds-footer {
     flex-wrap: wrap;
@@ -5691,7 +5603,6 @@ utility classes, atomic css
 .utah-design-system .radius-circle {
   border-radius: var(--radius-circle);
 }
-
 /*
 ############     _super-index.scss      ############
 Overall overrides, @media, themes, etc. that supersede styles higher in the pyramid