70 lines
1.3 KiB
CSS
70 lines
1.3 KiB
CSS
.menu-mobile-brand {
|
|
@apply bg-primary text-white pb-8;
|
|
|
|
@screen lg {
|
|
@apply hidden;
|
|
}
|
|
|
|
#mobile-menu-toggle {
|
|
@apply underline underline-offset-4 flex gap-2 items-center;
|
|
&[aria-expanded] {
|
|
&::after {
|
|
@apply block w-4 h-4;
|
|
content: '';
|
|
background-image: url('../resources/img/close_menu_icon.svg');
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
}
|
|
}
|
|
&__inner-elements {
|
|
@apply flex justify-between items-center px-6 gap-12;
|
|
}
|
|
|
|
.website_logo {
|
|
@apply shrink;
|
|
}
|
|
.tools-container {
|
|
@apply flex w-fit gap-2;
|
|
|
|
.search-button,
|
|
.subscribe-button {
|
|
@apply w-6 h-6 border-2 flex border-white rounded-full p-2 justify-center items-center shrink-0;
|
|
box-sizing: content-box;
|
|
}
|
|
}
|
|
}
|
|
.secondary-menu-container {
|
|
@apply w-full;
|
|
}
|
|
|
|
body:has(.menu-mobile-brand) {
|
|
@screen lg {
|
|
/* @apply hidden; */
|
|
}
|
|
}
|
|
|
|
header.nav-open {
|
|
.secondary-menu-container,
|
|
.primary-menu-container,
|
|
#primary-menu {
|
|
@apply !block opacity-100;
|
|
}
|
|
.menus-wrapper {
|
|
@apply bg-primary;
|
|
min-height: calc(100vh - 100px);
|
|
@screen lg {
|
|
min-height: auto;
|
|
}
|
|
}
|
|
|
|
#primary-menu {
|
|
@apply w-full;
|
|
|
|
ul {
|
|
@apply mx-0;
|
|
}
|
|
}
|
|
}
|