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

#mw-drawer {
	position: fixed;
	z-index: 4;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	overflow: auto;
	flex-direction: column;
	align-items: center;
	margin: var( --margin-header-item ) var( --margin-header-item--corner );
	opacity: 0;
	overscroll-behavior: contain;
	pointer-events: none;
	transform: scale( 0 );
	transform-origin: 0 0;
	user-select: none;
	will-change: transform;
	.citizen-card();

	&-checkbox {
		&:checked {
			// Transform all the slices of the button into a crossmark
			~ #mw-drawer-button-icon {
				#mw-drawer-button-icon {
					&-1 {
						opacity: 0;
						/* @noflip */
						transform: rotate( 0deg ) scale( 0.2, 0.2 );
					}
					// Reflect line
					&-2 {
						/* @noflip */
						transform: rotate( -45deg ) translate3d( -2px, 6px, 0 );
					}

					// Hide line
					&-3 {
						/* @noflip */
						transform: rotate( 45deg ) translate3d( -5px, -7px, 0 );
					}
				}
			}

			// Show drawer
			~ #mw-drawer {
				opacity: 1;
				pointer-events: auto;
				transform: scale( 1 );

				#mw-drawer {
					&-header,
					&-menu {
						opacity: 1;
						// Fade content when users open the menu
						// And GTFO instantly when they close the menu
						transition: @transition-opacity--transform;
					}
				}
			}
		}
	}

	&-button {
		position: absolute;
		z-index: 8;
		margin-right: var( --margin-header-item--corner );
		// Need to align with page padding
		margin-left: var( --margin-header-item--corner );

		&-icon {
			display: flex;
			overflow: hidden;
			width: var( --size-icon );
			height: var( --size-icon );
			flex-direction: column;
			flex-shrink: 0;
			align-items: center;
			justify-content: center;
			// Don't use padding as margin is needed to hide overflow
			margin: ~'calc( var( --padding-header-icon ) + var( --margin-header-item ) )' var( --padding-page );

			&-1 {
				transform-origin: 0 0;
			}

			&-2 {
				transform-origin: 0 100%;
			}
		}

		&:hover {
			~ #mw-drawer-button-icon {
				#mw-drawer-button-icon {
					&-1 {
						transform: translate3d( -50%, 0, 0 );
					}
				}

				.mw-drawer-button-icon {
					&-div {
						background-color: var( --background-color-icon--hover );
					}
				}
			}
		}

		&:active {
			~ #mw-drawer-button-icon {
				.mw-drawer-button-icon {
					&-div {
						background-color: var( --background-color-icon--active );
					}
				}
			}
		}
	}

	// For transition purpose
	&-header,
	&-menu {
		opacity: 0;
	}

	&-header {
		display: flex;
		width: 100%;
		box-sizing: border-box;
		align-items: center;
		padding: ~'calc( var( --padding-page ) + 20px )' var( --padding-page ) 15px var( --padding-page );
		border-bottom: 1px solid var( --border-color-base );
	}

	&-logo {
		.mw-logo-icon {
			width: auto;
			height: 48px;
		}
	}

	&-siteinfo {
		margin: 0 20px;

		.mw-logo-wordmark {
			margin-top: 5px;
			color: var( --color-base--emphasized );
			font-size: 1.5rem;
		}
	}

	&-search {
		margin-top: 10px;

		&-input {
			width: 200px;
			padding: 8px;
			background: var( --color-surface-1 );
			border-radius: var( --border-radius--small );
			box-shadow: var( --box-shadow-card );
			text-align: center;
			transition: @transition-background;
		}
	}

	&-menu {
		display: grid;
		max-width: ~'calc( 100vw - var( --padding-page ) * 4 )';
		padding: ~'calc( var(--padding-page) / 2 ) calc( var(--padding-page) / 2 ) var( --padding-page ) calc( var(--padding-page) / 2 )';
		font-size: @ui-menu-text;
		gap: ~'calc( var(--padding-page) / 4 )';
		grid-template-columns: repeat( auto-fit, 240px );

		a {
			.menu-item-link;
			align-items: center;
			justify-content: space-between;
			padding: @padding-menu-item-big;
			border-radius: var( --border-radius--small );

			&:after {
				.resource-loader-list-icon;
				display: block;
				margin-left: @icon-padding;
				background-size: contain;
				opacity: var( --opacity-icon-base );
				transition: @transition-opacity;
			}

			&:hover {
				.menu-item-link-hover;

				&:after {
					opacity: var( --opacity-icon-base--hover );
				}
			}

			&:active {
				.menu-item-link-active;

				&:after {
					opacity: var( --opacity-icon-base--active );
				}
			}
		}
	}
}

.mw-drawer {
	&-button {
		&-icon {
			&-div {
				z-index: 5;
				display: block;
				width: @icon-size;
				height: 2px;
				margin: 1.5px 0;
				background-color: var( --background-color-icon );
				border-radius: var( --border-radius--large );
				transform-origin: 4px 0;
				transition: @transition-transform, @transition-background, @transition-opacity;
			}
		}
	}
}

.client-nojs {
	#mw-drawer-search {
		// Hide search when client has no JS
		// Since the function does not work without script
		display: none;
	}
}

.citizen-animations-ready {
	#mw-drawer {
		transition: @transition-transform, @transition-opacity--transform;
	}
}

.skin-citizen-dark {
	#mw-drawer-menu a:after {
		filter: invert( 1 );
	}
}

// RTL
.rtl {
	#mw-drawer-button:hover {
		~ #mw-drawer-button-icon {
			#mw-drawer-button-icon-1 {
				transform: translate3d( 50%, 0, 0 );
			}
		}
	}
}

@media ( min-width: @width-breakpoint-tablet ) {
	#mw-drawer {
		right: unset;
		bottom: unset;
		max-height: ~'calc(100vh - var(--margin-header-item) * 2 )';
		align-items: flex-start;

		&-header {
			justify-content: left;
		}

		&-siteinfo {
			.mw-logo-wordmark {
				font-size: 2rem;
			}
		}

		&-logo {
			.mw-logo-icon {
				width: auto;
				height: 80px;
			}
		}
	}
}

@media ( min-width: @width-breakpoint-desktop-wide ) {
	#mw-drawer-menu {
		max-width: 1200px;
	}
}