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

.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;
		}
	}
}
refactor(core): clean up drawer implementation This is a part of the site header refactor * Use relative units * Add title to toggle button * Remove unnessecary CSS * Rewrite HTML classes * Temporary remove drawer subsearch, it will be re-explored in a later patch 2022-05-10 00:23:42 +00:00			`.citizen-drawer {`
			`&__card {`
perf(core): ⚡️ consolidate citizen-menu card shared styles 2024-05-28 02:47:46 +00:00			`.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 );`
			`}`
Refactor header DOM structure - Reduced unnessecary HTML elements - Stanardized class and IDs - Switch to fix header due to performance concern - Rewrote over-qualified CSS selectors - Started rework on file organizations 2020-06-07 05:30:54 +00:00			`}`

refactor(core): clean up drawer implementation This is a part of the site header refactor * Use relative units * Add title to toggle button * Remove unnessecary CSS * Rewrite HTML classes * Temporary remove drawer subsearch, it will be re-explored in a later patch 2022-05-10 00:23:42 +00:00			`&__header {`
feat: add drawer subsearch part 2 2021-02-03 20:47:32 +00:00			`display: flex;`
style: 🎨 apply recess order to styles 2023-07-28 01:19:27 +00:00			`gap: var( --space-md );`
feat: add drawer subsearch part 2 2021-02-03 20:47:32 +00:00			`align-items: center;`
feat(core): redesign site header (#521) Change header into vertical header for large screen and bottom header for small screen. 2022-09-29 23:12:56 +00:00			`justify-content: center;`
refactor(core): ♻️ simplify drawer header styles 2024-05-03 21:18:21 +00:00			`padding: var( --space-md );`
feat: show article stats in menu on mobile viewport 2021-07-30 18:05:25 +00:00			`border-bottom: 1px solid var( --border-color-base );`
refactor: clean up header structure and styles 2021-01-16 00:56:59 +00:00			`}`
Refactor header DOM structure - Reduced unnessecary HTML elements - Stanardized class and IDs - Switch to fix header due to performance concern - Rewrote over-qualified CSS selectors - Started rework on file organizations 2020-06-07 05:30:54 +00:00
refactor(core): clean up drawer implementation This is a part of the site header refactor * Use relative units * Add title to toggle button * Remove unnessecary CSS * Rewrite HTML classes * Temporary remove drawer subsearch, it will be re-explored in a later patch 2022-05-10 00:23:42 +00:00			`// Keep aspect ratio`
			`&__logo img {`
			`width: auto;`
			`height: 3rem;`
feat: revamp drawer header * wgLogo is always visible in the drawer * Increase the size of wiki name * Sitestats will now format large numbers into human readable formats (e.g. 12.2K, 3M, etc.) * Sitestats now use icons instead of text as labels * Remove wordmark for now, will revisit later 2022-04-23 05:06:07 +00:00			`}`
feat: tweak header and drawer logo styles 2021-03-05 16:37:27 +00:00
refactor(core): clean up drawer implementation This is a part of the site header refactor * Use relative units * Add title to toggle button * Remove unnessecary CSS * Rewrite HTML classes * Temporary remove drawer subsearch, it will be re-explored in a later patch 2022-05-10 00:23:42 +00:00			`&__siteinfo {`
feat(core): ✨ use space unit for drawer 2022-09-30 21:40:30 +00:00			`display: flex;`
			`flex-direction: column;`
feat(wordmark): ✨ implement wordmark in drawer Also simplify existing styles for wordmark 2024-06-24 18:05:21 +00:00			`gap: var( --space-xs );`
feat: tweak header and drawer logo styles 2021-03-05 16:37:27 +00:00			`}`

refactor(core): clean up drawer implementation This is a part of the site header refactor * Use relative units * Add title to toggle button * Remove unnessecary CSS * Rewrite HTML classes * Temporary remove drawer subsearch, it will be re-explored in a later patch 2022-05-10 00:23:42 +00:00			`&__menu {`
feat(core): ✨ tweak drawer menu icon size 2022-11-07 22:46:08 +00:00			`--size-icon: 1rem;`
feat: change menu into a modal instead of overlay 2021-07-30 17:48:57 +00:00			`display: grid;`
feat(core): ✨ allow drawer menu to expand in smaller screen 2024-05-02 02:12:19 +00:00			`grid-template-columns: repeat( auto-fit, minmax( 15rem, auto ) );`
style: 🎨 apply recess order to styles 2023-07-28 01:19:27 +00:00			`gap: var( --space-sm );`
refactor(core): clean up drawer implementation This is a part of the site header refactor * Use relative units * Add title to toggle button * Remove unnessecary CSS * Rewrite HTML classes * Temporary remove drawer subsearch, it will be re-explored in a later patch 2022-05-10 00:23:42 +00:00			`justify-content: center;`
style: 🎨 apply recess order to styles 2023-07-28 01:19:27 +00:00			`max-width: 92vw;`
feat(core): ✨ use consistent spacing for menu elements 2023-07-06 04:55:42 +00:00			`padding: var( --space-xs );`
refactor(core): ♻️ simplify drawer header styles 2024-05-03 21:18:21 +00:00			`margin-bottom: var( --space-xs );`
feat(core): ✨ use CSS variables for small font sizes 2024-02-26 22:16:07 +00:00			`font-size: var( --font-size-small ); // TODO: Make this a variable`
refactor: clean up portal styles 2021-01-27 20:05:31 +00:00
refactor(core): ♻️ unify Citizen menu styles 2023-07-07 19:26:31 +00:00			`.mw-list-item a {`
feat: convert border radius to CSS variable 2021-05-27 14:35:21 +00:00			`border-radius: var( --border-radius--small );`
Refactor header DOM structure - Reduced unnessecary HTML elements - Stanardized class and IDs - Switch to fix header due to performance concern - Rewrote over-qualified CSS selectors - Started rework on file organizations 2020-06-07 05:30:54 +00:00			`}`
			`}`
			`}`

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 22:55:23 +00:00			`@media ( min-width: @min-width-breakpoint-tablet ) {`
refactor(core): clean up drawer implementation This is a part of the site header refactor * Use relative units * Add title to toggle button * Remove unnessecary CSS * Rewrite HTML classes * Temporary remove drawer subsearch, it will be re-explored in a later patch 2022-05-10 00:23:42 +00:00			`.citizen-drawer {`
			`&__logo img {`
			`// Bigger logo`
			`height: 5rem;`
feat: revamp drawer header * wgLogo is always visible in the drawer * Increase the size of wiki name * Sitestats will now format large numbers into human readable formats (e.g. 12.2K, 3M, etc.) * Sitestats now use icons instead of text as labels * Remove wordmark for now, will revisit later 2022-04-23 05:06:07 +00:00			`}`
fix: portal should be centered in single col layout 2021-02-20 20:23:59 +00:00			`}`
			`}`

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 22:55:23 +00:00			`@media ( min-width: @min-width-breakpoint-desktop ) {`
feat(core): redesign site header (#521) Change header into vertical header for large screen and bottom header for small screen. 2022-09-29 23:12:56 +00:00			`.citizen-drawer {`
			`&__header {`
			`justify-content: flex-start;`
			`}`
			`}`
			`}`