StarCitizenTools/mediawiki-skins-Citizen
1
0
Fork 0
mirror of https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git synced 2024-11-24 14:34:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: convert drawer menu to overlay menu

Browse source
This commit is contained in:
alistair3149 2021-01-29 11:47:33 -05:00
parent 044e36eb9a
commit 538202f2b2
No known key found for this signature in database
GPG key ID: 94D081060FD3DD9C
3 changed files with 45 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
resources/skins.citizen.styles/Drawer.less
View file

@ -2,19 +2,18 @@
position: fixed;
z-index: 4;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
width: @drawer-width;
max-width: 100vw; // in case if someone has super small screen
height: 100%;
flex-direction: column;
background-color: var( --background-color-dp-16 );
border-radius: 0 @border-radius-large @border-radius-large 0;
transform: translate3d( -110%, 0, 0 ); // shadow bleeding with 100%
align-items: center;
background-color: var( --background-color-overlay );
transform: translate3d( 0, -100%, 0 );
transform-origin: 0 0;
transition: @transition-transform;
user-select: none;
will-change: transform; // help with performance
.boxshadow(3);
&-checkbox {
&:checked {
@ -146,6 +145,12 @@
}
}
}
ul {
display: grid;
max-width: var( --width-layout );
grid-template-columns: repeat( 2, 1fr );
}
}
}
@ -172,3 +177,28 @@
filter: invert( 1 );
}
}
@media ( min-width: @width-breakpoint-tablet ) {
#mw-drawer-menu ul {
grid-template-columns: repeat( 3, 1fr );
}
}
@media ( min-width: @width-breakpoint-desktop ) {
#mw-drawer-menu ul {
grid-template-columns: repeat( 4, 1fr );
}
}
@media ( min-width: @width-breakpoint-desktop-wide ) {
#mw-drawer-menu ul {
max-width: none;
grid-template-columns: repeat( 5, 1fr );
}
}
@media ( min-width: @width-breakpoint-desktop-wider ) {
#mw-drawer-menu ul {
grid-template-columns: repeat( 6, 1fr );
}
}

4
resources/skins.citizen.styles/common/rootvariables.less
View file

@ -21,6 +21,8 @@
--background-color-dp-16: @background-color-dp-16;
--background-color-dp-24: @background-color-dp-24;
--background-color-overlay: @background-color-overlay;
--background-color-framed: @background-color-framed;
--background-color-framed--hover: @background-color-framed--hover;
--background-color-framed--active: @background-color-framed--active;
@ -95,6 +97,8 @@ html {
--background-color-dp-16: @dark-background-color-dp-16;
--background-color-dp-24: @dark-background-color-dp-24;
--background-color-overlay: @dark-background-color-overlay;
--background-color-framed: @dark-background-color-framed;
--background-color-framed--hover: @dark-background-color-framed--hover;
--background-color-framed--active: @dark-background-color-framed--active;

4
resources/variables.less
View file

@ -83,6 +83,8 @@
@background-color-dp-16: @color-base100;
@background-color-dp-24: @color-base100;
@background-color-overlay: rgba( 255, 255, 255, 0.95 ); //base100 95% opacity
@background-color-framed: @color-base90;
@background-color-framed--hover: @color-base100;
@background-color-framed--active: @color-base70;
@ -172,6 +174,8 @@
@dark-background-color-dp-16: @dark-color-base80;
@dark-background-color-dp-24: @dark-color-base90;
@dark-background-color-overlay: rgba( 19, 26, 33, 0.95 ); //base0 95% opacity
@dark-background-color-framed: @dark-color-base10;
@dark-background-color-framed--hover: @dark-color-base30;
@dark-background-color-framed--active: @dark-color-base0;