mediawiki-skins-Citizen/resources/skins.citizen.styles/components/Drawer.less
alistair3149 60999eb1d9
feat(core): replace breakpoint LESS variables with Codex tokens
Codex tokens are a better implementation and this should ensure consistency across the MW ecosystem.
We have to keep a copy for now as they are introduced in 1.41.

Related: #735
2023-11-16 17:55:59 -05:00

80 lines
1.4 KiB
Plaintext

.citizen-drawer {
&__card {
padding: var( --space-xs ) 0;
.citizen-header-card( left );
}
&__header {
display: flex;
gap: var( --space-md );
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
.mw-list-item a {
border-radius: var( --border-radius--small );
}
}
}
// Checkbox hack
#citizen-drawer__checkbox:checked {
~ .citizen-drawer__card {
.citizen-card-show;
}
}
@media ( min-width: @min-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: @min-width-breakpoint-desktop ) {
.citizen-drawer {
&__header {
justify-content: flex-start;
}
}
}