nav-button-mobile.pcss.css

Nav Button Mobile.

File

core/themes/olivero/css/components/navigation/nav-button-mobile.pcss.css

View source 
  1. /**

  2.  * @file

  3.  * Nav Button Mobile.

  4.  */

  5. 

  6. @import "../../base/media-queries.pcss.css";

  7. 

  8. .mobile-nav-button {

  9.   position: relative;

  10.   z-index: 505; /* Appear above mobile nav. */

  11.   display: flex;

  12.   align-items: center;

  13.   align-self: center;

  14.   width: var(--sp2);

  15.   height: var(--sp2);

  16.   margin-inline-start: auto;

  17.   margin-inline-end: -6px;

  18.   padding-block: 0;

  19.   padding-inline-start: 6px;

  20.   padding-inline-end: 6px;

  21.   cursor: pointer;

  22.   border: none;

  23.   background: transparent;

  24.   appearance: none;

  25. 

  26.   &:focus {

  27.     outline: solid 2px var(--color--primary-40);

  28.   }

  29. 

  30.   &:active {

  31.     color: inherit; /* Override Safari's default UA styles. */

  32.   }

  33. 

  34.   @media (--sm) {

  35.     display: inline-flex;

  36.     width: auto;

  37.     padding-inline-start: var(--sp);

  38.   }

  39. }

  40. 

  41. /* Text that says "menu". */

  42. .mobile-nav-button__label {

  43.   position: absolute;

  44.   display: block;

  45.   overflow: hidden;

  46.   clip: rect(1px, 1px, 1px, 1px);

  47.   width: 1px;

  48.   height: 1px;

  49.   word-wrap: normal;

  50. 

  51.   @media (--sm) {

  52.     position: static;

  53.     overflow: visible;

  54.     clip: auto;

  55.     width: auto;

  56.     height: auto;

  57.     margin-inline-end: 12px;

  58.     letter-spacing: 0.05em;

  59.     font-size: 14px;

  60.     font-weight: 600;

  61.   }

  62. }

  63. 

  64. .mobile-nav-button__icon {

  65.   position: relative;

  66.   display: block;

  67.   width: var(--sp2);

  68.   height: 0;

  69.   border-top: solid 3px var(--color--primary-50);

  70. 

  71.   &::before,

  72.   &::after {

  73.     position: absolute;

  74.     inset-block-start: 0;

  75.     inset-inline-start: 0;

  76.     width: 100%;

  77.     height: 0;

  78.     content: "";

  79.     transition: transform 0.2s;

  80.     border-top: solid 3px var(--color--primary-50);

  81.   }

  82. 

  83.   &::before {

  84.     transform: translateY(-11px);

  85.   }

  86. 

  87.   &::after {

  88.     transform: translateY(5px);

  89.   }

  90. }

  91. 

  92. .mobile-nav-button[aria-expanded="true"] .mobile-nav-button__icon {

  93.   border-top-color: transparent;

  94. 

  95.   &::before {

  96.     transform: translateY(-3px) rotate(-45deg);

  97.   }

  98. 

  99.   &::after {

  100.     transform: translateY(-3px) rotate(45deg);

  101.   }

  102. }