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(core): toggle visbility in CSS when menu is show/hidden

Browse source 
* Better performance as browser would not render element when it is hidden
* Better accessbility support for screen readers
This commit is contained in:
alistair3149 2022-05-01 21:46:30 -04:00
parent 60d57dea85
commit e2a6a0355c
2 changed files with 8 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
resources/mixins.less
View file

@ -15,6 +15,7 @@
// Collaspe animation setup
.citizen-card-hide( @position, @axis: '' ) {
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: ~'scale@{axis}( 0 )';
transform-origin: @position;
@ -23,13 +24,16 @@
// Expand animiation setup
.citizen-card-show() {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: none;
// HACK: So that visiblity won't wait 250ms to become visible
transition-delay: 0ms;
}
// Transition animation
.citizen-card-transition() {
transition: @transition-transform, @transition-opacity--transform;
transition: @transition-transform, @transition-opacity--transform, @transition-visibility--transform;
}
// To hide objects, but keep them accessible for screen-readers

3
resources/variables.less
View file

@ -227,6 +227,9 @@
@transition-transform: transform @transition-timing-slow cubic-bezier(0.215,0.61,0.355,1);
// Only used with transform
@transition-opacity--transform: opacity @transition-timing-slow ease;
// Execute after every transition is done
// Need to use with transition-delay: 0ms
@transition-visibility--transform: visibility 0ms linear @transition-timing-slow;
@transition-height: height @transition-timing-slow cubic-bezier(0.215,0.61,0.355,1);
/* Box shadow */