nav-button-mobile.css

Nav Button Mobile.

File

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

View source 
  1. /*

  2.  * DO NOT EDIT THIS FILE.

  3.  * See the following change record for more information,

  4.  * https://www.drupal.org/node/3084859

  5.  * @preserve

  6.  */

  7. 

  8. /**

  9.  * @file

  10.  * Nav Button Mobile.

  11.  */

  12. 

  13. .mobile-nav-button {

  14.   position: relative;

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

  16.   display: flex;

  17.   align-items: center;

  18.   align-self: center;

  19.   width: var(--sp2);

  20.   height: var(--sp2);

  21.   margin-inline-start: auto;

  22.   margin-inline-end: -0.375rem;

  23.   padding-block: 0;

  24.   padding-inline-start: 0.375rem;

  25.   padding-inline-end: 0.375rem;

  26.   cursor: pointer;

  27.   border: none;

  28.   background: transparent;

  29.   appearance: none;

  30. }

  31. 

  32. .mobile-nav-button:focus {

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

  34. }

  35. 

  36. .mobile-nav-button:active {

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

  38. }

  39. 

  40. @media (min-width: 31.25rem) {

  41.   .mobile-nav-button {

  42.     display: inline-flex;

  43.     width: auto;

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

  45.   }

  46. }

  47. 

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

  49. 

  50. .mobile-nav-button__label {

  51.   position: absolute;

  52.   display: block;

  53.   overflow: hidden;

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

  55.   width: 1px;

  56.   height: 1px;

  57.   word-wrap: normal;

  58. }

  59. 

  60. @media (min-width: 31.25rem) {

  61.   .mobile-nav-button__label {

  62.     position: static;

  63.     overflow: visible;

  64.     clip: auto;

  65.     width: auto;

  66.     height: auto;

  67.     margin-inline-end: 0.75rem;

  68.     letter-spacing: 0.05em;

  69.     font-size: 0.875rem;

  70.     font-weight: 600;

  71.   }

  72. }

  73. 

  74. .mobile-nav-button__icon {

  75.   position: relative;

  76.   display: block;

  77.   width: var(--sp2);

  78.   height: 0;

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

  80. }

  81. 

  82. .mobile-nav-button__icon::before,

  83. .mobile-nav-button__icon::after {

  84.   position: absolute;

  85.   inset-block-start: 0;

  86.   inset-inline-start: 0;

  87.   width: 100%;

  88.   height: 0;

  89.   content: "";

  90.   transition: transform 0.2s;

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

  92. }

  93. 

  94. .mobile-nav-button__icon::before {

  95.   transform: translateY(-0.6875rem);

  96. }

  97. 

  98. .mobile-nav-button__icon::after {

  99.   transform: translateY(0.3125rem);

  100. }

  101. 

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

  103.   border-top-color: transparent;

  104. }

  105. 

  106. .mobile-nav-button[aria-expanded="true"] .mobile-nav-button__icon::before {

  107.   transform: translateY(-0.1875rem) rotate(-45deg);

  108. }

  109. 

  110. .mobile-nav-button[aria-expanded="true"] .mobile-nav-button__icon::after {

  111.   transform: translateY(-0.1875rem) rotate(45deg);

  112. }