mediawiki-skins-Citizen/resources/skins.citizen.styles/components/Drawer.less

80 lines
1.4 KiB
Plaintext
Raw Normal View History

.citizen-drawer {
&__card {
padding: var( --space-xs ) 0;
.citizen-header-card( left );
}
&__header {
2021-02-03 20:47:32 +00:00
display: flex;
gap: var( --space-md );
2021-02-03 20:47:32 +00:00
align-items: center;
justify-content: center;
padding: var( --space-sm ) var( --space-md ) var( --space-md );
border-bottom: 1px solid var( --border-color-base );
}
// Keep aspect ratio
&__logo img {
width: auto;
height: 3rem;
}
&__siteinfo {
display: flex;
flex-direction: column;
gap: var( --space-xxs );
.mw-logo-wordmark {
font-size: 1.5rem;
color: var( --color-base--emphasized );
}
}
&__menu {
--size-icon: 1rem;
display: grid;
grid-template-columns: repeat( auto-fit, 15rem );
gap: var( --space-sm );
justify-content: center;
max-width: 92vw;
padding: var( --space-xs );
font-size: 0.875rem; // TODO: Make this a variable
2021-01-27 20:05:31 +00:00
.mw-list-item a {
border-radius: var( --border-radius--small );
}
}
}
// Checkbox hack
#citizen-drawer__checkbox:checked {
~ .citizen-drawer__card {
.citizen-card-show;
2021-02-03 20:52:25 +00:00
}
}
@media ( min-width: @width-breakpoint-tablet ) {
.citizen-drawer {
&__logo img {
// Bigger logo
height: 5rem;
}
&__siteinfo {
.mw-logo-wordmark {
font-size: 2rem;
// Sometimes long wiki name will wrap when the menu is too small
white-space: nowrap;
}
}
}
}
@media ( min-width: @width-breakpoint-desktop ) {
.citizen-drawer {
&__header {
justify-content: flex-start;
}
}
}