mediawiki-skins-Citizen/resources/skins.citizen.styles/components/Drawer.less
alistair3149 c47531a28b
feat(wordmark): implement wordmark in drawer
Also simplify existing styles for wordmark
2024-06-24 14:05:21 -04:00

65 lines
1.3 KiB
Plaintext

.citizen-drawer {
&__card {
.citizen-header-card( start );
transform-origin: var( --transform-origin-offset-start ) var( --transform-origin-offset-end );
@media ( min-width: @min-width-breakpoint-desktop ) {
transform-origin: var( --transform-origin-offset-start ) var( --transform-origin-offset-start );
}
}
&__header {
display: flex;
gap: var( --space-md );
align-items: center;
justify-content: center;
padding: 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-xs );
}
&__menu {
--size-icon: 1rem;
display: grid;
grid-template-columns: repeat( auto-fit, minmax( 15rem, auto ) );
gap: var( --space-sm );
justify-content: center;
max-width: 92vw;
padding: var( --space-xs );
margin-bottom: var( --space-xs );
font-size: var( --font-size-small ); // TODO: Make this a variable
.mw-list-item a {
border-radius: var( --border-radius--small );
}
}
}
@media ( min-width: @min-width-breakpoint-tablet ) {
.citizen-drawer {
&__logo img {
// Bigger logo
height: 5rem;
}
}
}
@media ( min-width: @min-width-breakpoint-desktop ) {
.citizen-drawer {
&__header {
justify-content: flex-start;
}
}
}