@utahdts/utah-design-system-header/src/css/media-queries.css

Utah Header for the Utah Design System

/* @media is never in scope for --variables, so this is the only way to solve this. :-( */

@media screen and (max-width: media-size__tablet-landscape__PLACEHOLDER) {
  /* put your media query here for tablet landscape */
  .utah-design-system .search-modal__input[type=text] {
    width: 75vw;
  }
}

@media screen and (max-width: media-size__tablet-portrait__PLACEHOLDER) {
  .utds-header-desktop--hidden {
    display: flex !important;
  }
  .utds-header-mobile--hidden {
    display: none !important;
  }
  .utds-header {
    height: 60px;
    padding: var(--spacing-xs) var(--spacing);
  }
  .utds-title-wrapper {
    font-size: var(--font-size-xl);
  }
  .utds-citizen-experience-wrapper {
    display: none;
  }
  .utds-citizen-experience-wrapper--mobile {
    display: flex;
  }
  .utah-design-system .main-menu__wrapper {
    padding: 0 var(--spacing);
    /* The utah id button is this tall, but without it, the menu doesn't fill the space up to the mobile menu content popup */
    min-height: 46px;
  }
  .utah-design-system .main-menu__nav {
    display: none;
  }
  .utah-design-system.utds-header-mobile-menu,
  .utah-design-system .utds-header-mobile__utah-id-wrapper {
    display: block;
  }
  .utah-design-system .icon-button.main-menu__hamburger,
  .utah-design-system .utds-header-mobile__vip-action-items--left,
  .utah-design-system .utds-header-mobile__vip-action-items--right,
  .utah-design-system .main-menu__search-placeholder {
    display: flex;
  }

  .utah-design-system .search-modal__input[type=text] {
    width: 80vw;
    padding: var(--spacing) var(--spacing) var(--spacing) var(--spacing-3xl);
  }
  .utah-design-system .search-modal__button-wrapper {
    right: unset;
    left: 50%;
    transform: translateX(-50%) translateY(110%);
  }
  .utah-design-system .search-modal__button.button--solid.button--primary-color {
    border-color: white;
    width: max-content;
  }

  .utah-design-system .utds-official-website-popup__content {
    flex-wrap: wrap;
    gap: var(--spacing-l);
  }
  .utah-design-system .utds-official-website-popup__col {
    width: 100%;
  }
  .utah-design-system .utds-official-website-popup__address-bar {
    width: auto;
    background-size: contain;
    background-repeat: no-repeat;
  }

  .color-example {
    flex-direction: column;
  }
  .color-example > div:not(:last-child) {
    margin-bottom: var(--spacing-l);
  }

  .search-page {
    .search-modal__form {
      margin-bottom: var(--spacing-4xl);
    }
    .search-modal__input[type=text] {
      padding: var(--spacing) var(--spacing) var(--spacing) var(--spacing-3xl);
    }
  }
}

@media screen and (max-width: media-size__mobile__PLACEHOLDER) {
  /* put your media query here for mobile */
}