D10 theme for Island Lives. This is a clone of drupals core theme Olivero. Notice this theme is named Olivera not Olivero :)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

113 lines
2.3 KiB

/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Nav Button Mobile.
*/
.mobile-nav-button {
position: relative;
z-index: 505; /* Appear above mobile nav. */
display: flex;
align-items: center;
align-self: center;
width: var(--sp2);
height: var(--sp2);
margin-inline-start: auto;
margin-inline-end: -0.375rem;
padding-block: 0;
padding-inline-start: 0.375rem;
padding-inline-end: 0.375rem;
cursor: pointer;
border: none;
background: transparent;
-webkit-appearance: none;
appearance: none;
}
.mobile-nav-button:focus {
outline: solid 2px var(--color--primary-40);
}
.mobile-nav-button:active {
color: inherit; /* Override Safari's default UA styles. */
}
@media (min-width: 31.25rem) {
.mobile-nav-button {
display: inline-flex;
width: auto;
padding-inline-start: var(--sp);
}
}
/* Text that says "menu". */
.mobile-nav-button__label {
position: absolute;
display: block;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
width: 1px;
height: 1px;
word-wrap: normal;
}
@media (min-width: 31.25rem) {
.mobile-nav-button__label {
position: static;
overflow: visible;
clip: auto;
width: auto;
height: auto;
margin-inline-end: 0.75rem;
letter-spacing: 0.05em;
font-size: 0.875rem;
font-weight: 600;
}
}
.mobile-nav-button__icon {
position: relative;
display: block;
width: var(--sp2);
height: 0;
border-top: solid 3px var(--color--primary-50);
}
.mobile-nav-button__icon::before,
.mobile-nav-button__icon::after {
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
width: 100%;
height: 0;
content: "";
transition: transform 0.2s;
border-top: solid 3px var(--color--primary-50);
}
.mobile-nav-button__icon::before {
transform: translateY(-0.6875rem);
}
.mobile-nav-button__icon::after {
transform: translateY(0.3125rem);
}
.mobile-nav-button[aria-expanded="true"] .mobile-nav-button__icon {
border-top-color: transparent;
}
.mobile-nav-button[aria-expanded="true"] .mobile-nav-button__icon::before {
transform: translateY(-0.1875rem) rotate(-45deg);
}
.mobile-nav-button[aria-expanded="true"] .mobile-nav-button__icon::after {
transform: translateY(-0.1875rem) rotate(45deg);
}