feat(core): ✨ update menu transition styles and implementation

Same as the previous commit, the transition is now accessible as a CSS variable (transition-menu)
StarCitizenTools · Jul 7, 2023 · c7e4517 · c7e4517
1 parent a7f9c55
commit c7e4517
Show file tree

Hide file tree

Showing 21 changed files with 39 additions and 73 deletions.
diff --git a/resources/mixins.less b/resources/mixins.less
@@ -52,14 +52,16 @@
 // But GTFO instantly when they close the menu
 .citizen-card-content-show() {
 	opacity: 1;
-	transition: @transition-opacity--transform;
+	transition: var( --transition-menu );
+	transition-property: opacity;
 	will-change: opacity;
 }
 
 // Transition animation
 .citizen-card-transition() {
-	transition: @transition-transform, @transition-opacity--transform, @transition-visibility--transform;
-	will-change: transform, opacity, opacity;
+	transition: var( --transition-menu );
+	transition-property: transform, opacity, visibility;
+	will-change: transform, opacity, visibility;
 }
 
 // Header card popups
@@ -78,6 +80,7 @@
 	user-select: none;
 	.citizen-card();
 	.citizen-card-hide( bottom @position );
+	.citizen-card-transition();
 
 	@media ( min-width: @width-breakpoint-tablet ) {
 		& when ( @position = left ) {

diff --git a/resources/skins.citizen.preferences/skins.citizen.preferences.less b/resources/skins.citizen.preferences/skins.citizen.preferences.less
@@ -72,7 +72,6 @@
 	// TODO: unify the dropdown menu style somewhere
 	&-panel {
 		.citizen-header-card( right );
-		.citizen-card-transition();
 
 		&.citizen-pref-panel--active {
 			.citizen-card-show;

diff --git a/resources/skins.citizen.search/skins.citizen.search.less b/resources/skins.citizen.search/skins.citizen.search.less
@@ -1,6 +1,3 @@
-@import '../variables.less';
-@import '../mixins.less';
-
 .citizen-typeahead {
 	position: absolute;
 	overflow: auto;

diff --git a/resources/skins.citizen.styles/common/content.less b/resources/skins.citizen.styles/common/content.less
@@ -5,7 +5,8 @@
 		vertical-align: top; // get rid of that weird bottom gap from inline block
 
 		> img {
-			transition: @transition-transform;
+			transition: var( --transition-hover );
+			transition-property: transform;
 		}
 
 		// Add affordance to replace magnify icon

diff --git a/resources/skins.citizen.styles/common/cssvariables.less b/resources/skins.citizen.styles/common/cssvariables.less
@@ -178,3 +178,8 @@ html {
 		--header-card-maxheight: ~'calc( 100vh - var( --space-sm ) * 2 )';
 	}
 }
+
+.citizen-animations-ready {
+	/* Only apply transition when page is ready for it */
+	--transition-menu: @transition-menu;
+}
diff --git a/resources/skins.citizen.styles/common/theme.less b/resources/skins.citizen.styles/common/theme.less
@@ -1,5 +1,3 @@
-@import '../../variables.less';
-
 /**
  * Base theme
  */

diff --git a/resources/skins.citizen.styles/components/Drawer.less b/resources/skins.citizen.styles/components/Drawer.less
@@ -53,13 +53,6 @@
 	}
 }
 
-// Wait for first paint before animating
-.citizen-animations-ready {
-	.citizen-drawer__card {
-		.citizen-card-transition();
-	}
-}
-
 @media ( min-width: @width-breakpoint-tablet ) {
 	.citizen-drawer {
 		&__logo img {

diff --git a/resources/skins.citizen.styles/components/Header.less b/resources/skins.citizen.styles/components/Header.less
@@ -182,7 +182,8 @@
 /* Hide header when scroll down on smaller screen sizes */
 @media ( max-width: @width-breakpoint-tablet ) {
 	.citizen-header {
-		transition: @transition-transform;
+		transition: var( --transition-menu );
+		transition-property: transform;
 	}
 
 	.citizen-scroll--down .citizen-header {

diff --git a/resources/skins.citizen.styles/components/Pagetools.less b/resources/skins.citizen.styles/components/Pagetools.less
@@ -47,6 +47,7 @@
 		font-size: 0.875rem;
 		.citizen-card;
 		.citizen-card-hide( top right );
+		.citizen-card-transition();
 	}
 
 	// Visible page tools styles
@@ -239,12 +240,6 @@
 	}
 }
 
-.citizen-animations-ready {
-	.page-actions__card {
-		.citizen-card-transition();
-	}
-}
-
 // To avoid more menu from overflow in narrow screen
 @media ( max-width: @width-breakpoint-tablet ) {
 	.page-actions {

diff --git a/resources/skins.citizen.styles/components/Search.less b/resources/skins.citizen.styles/components/Search.less
@@ -17,6 +17,7 @@
 		gap: 0.25rem;
 		.citizen-card();
 		.citizen-card-hide( top center, '', false );
+		.citizen-card-transition();
 
 		.citizen-ui-icon {
 			width: var( --height-search-bar );
@@ -104,12 +105,6 @@
 	}
 }
 
-.citizen-animations-ready {
-	.citizen-search__card {
-		.citizen-card-transition();
-	}
-}
-
 @media ( max-width: @width-breakpoint-desktop ) {
 	.citizen-search__card {
 		z-index: 1; // So that overlay does not cover card

diff --git a/resources/skins.citizen.styles/components/StickyHeader.less b/resources/skins.citizen.styles/components/StickyHeader.less
@@ -63,7 +63,8 @@
 @media ( max-width: @width-breakpoint-tablet ) {
 	.citizen-body-header--sticky {
 		.mw-body-header {
-			transition: @transition-transform;
+			transition: var( --transition-menu );
+			transition-property: transform;
 		}
 
 		&.citizen-scroll--down {

diff --git a/resources/skins.citizen.styles/components/TableOfContents.less b/resources/skins.citizen.styles/components/TableOfContents.less
@@ -134,7 +134,8 @@
 // Move down when site header is hidden
 @media ( max-width: ( @width-breakpoint-tablet ) ) {
 	.citizen-toc {
-		transition: @transition-transform;
+		transition: var( --transition-menu );
+		transition-property: transform;
 		will-change: transform;
 	}
 
@@ -164,6 +165,7 @@
 			user-select: none;
 			.citizen-card;
 			.citizen-card-hide( bottom right, '', false );
+			.citizen-card-transition();
 		}
 	}
 
@@ -189,7 +191,8 @@
 			pointer-events: auto;
 			transform: none;
 			transform-origin: bottom right;
-			transition: @transition-transform;
+			transition: var( --transition-menu );
+			transition-property: transform;
 
 			.citizen-ui-icon {
 				width: 1rem;
@@ -226,13 +229,6 @@
 			}
 		}
 	}
-
-	// Wait for first paint before animating
-	.citizen-animations-ready {
-		.citizen-toc__card {
-			.citizen-card-transition();
-		}
-	}
 }
 
 @media ( min-width: @width-breakpoint-desktop ) {

diff --git a/resources/skins.citizen.styles/components/Usermenu.less b/resources/skins.citizen.styles/components/Usermenu.less
@@ -121,9 +121,3 @@
 		.citizen-card-show();
 	}
 }
-
-.citizen-animations-ready {
-	.citizen-userMenu__card {
-		.citizen-card-transition();
-	}
-}
diff --git a/resources/skins.citizen.styles/skinning/content.media-screen.less b/resources/skins.citizen.styles/skinning/content.media-screen.less
@@ -18,7 +18,8 @@ figure[ typeof~='mw:File/Frame' ] {
 			max-width: 100%;
 			height: auto;
 			contain: strict;
-			transition: @transition-transform;
+			transition: var( --transition-hover );
+			transition-property: transform;
 
 			// Prevent constraining image width in tables
 			table & {

diff --git a/resources/skins.citizen.styles/skinning/content.thumbnails-screen.less b/resources/skins.citizen.styles/skinning/content.thumbnails-screen.less
@@ -32,7 +32,8 @@
 		&.new {
 			padding: var( --space-sm );
 			border: 1px dashed var( --border-color-base--darker );
-			transition: @transition-background, @transition-color;
+			transition: var( --transition-hover );
+			transition-property: background, color;
 
 			&:hover {
 				background-color: var( --color-destructive--hover );

diff --git a/resources/variables.less b/resources/variables.less
@@ -224,22 +224,7 @@
 
 /* Transitions */
 @transition-hover: 150ms cubic-bezier( 0.215,0.61,0.355,1 );
-
-@transition-timing-fast: 100ms;
-@transition-timing-slow: 250ms;
-
-@transition-color: color @transition-timing-fast ease;
-@transition-background: background @transition-timing-fast ease;
-@transition-border-color: border-color @transition-timing-fast ease;
-@transition-opacity: opacity @transition-timing-fast ease;
-
-@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 ease;
+@transition-menu: 250ms ease;
 
 /* Shadow */
 /* Box shadow */

diff --git a/skinStyles/extensions/Cite/ext.cite.styles.less b/skinStyles/extensions/Cite/ext.cite.styles.less
@@ -3,8 +3,6 @@
  * https://starcitizen.tools
 */
 
-@import '../../../resources/variables.less';
-
 .mw-references-wrap {
 	margin-top: var( --space-md );
 	color: var( --color-base );

diff --git a/skinStyles/extensions/DiscussionTools/ext.discussionTools.init.styles.less b/skinStyles/extensions/DiscussionTools/ext.discussionTools.init.styles.less
@@ -8,8 +8,6 @@
  * Date: 2023-06-24
  */
 
-@import '../../../resources/variables.less';
-
 .ext-discussiontools-init-replylink-buttons {
 	.ext-discussiontools-init-replylink {
 		&-bracket {

diff --git a/skinStyles/extensions/MediaSearch/mediasearch.styles.less b/skinStyles/extensions/MediaSearch/mediasearch.styles.less
@@ -629,7 +629,8 @@
 	}
 
 	img {
-		transition: @transition-transform;
+		transition: var( --transition-hover );
+		transition-property: transform;
 	}
 }
 
@@ -677,7 +678,8 @@
 
 	&__thumbnail {
 		border-radius: var( --border-radius--small );
-		transition: @transition-transform;
+		transition: var( --transition-hover );
+		transition-property: transform;
 	}
 
 	&__duration {

diff --git a/skinStyles/extensions/MultimediaViewer/mmv.less b/skinStyles/extensions/MultimediaViewer/mmv.less
@@ -512,7 +512,8 @@
 	grid-template-areas: 'desc links'
 		'about about';
 	grid-template-columns: 2fr 1fr;
-	transition: @transition-background;
+	transition: var( --transition-menu );
+	transition-property: background;
 
 	.mw-mmv-untruncated & {
 		background-color: transparent;
@@ -607,7 +608,8 @@
 	border-top-left-radius: var( --border-radius--large );
 	border-top-right-radius: var( --border-radius--large );
 	color: #fff;
-	transition: @transition-background, @transition-color;
+	transition: var( --transition-menu );
+	transition-property: background, color;
 
 	&.mw-mmv-untruncated {
 		background-color: var( --color-surface-1 );

diff --git a/skinStyles/mediawiki/action/mediawiki.action.view.filepage.less b/skinStyles/mediawiki/action/mediawiki.action.view.filepage.less
@@ -95,7 +95,8 @@
 		max-width: 100%;
 		height: auto;
 		background-color: var( --color-surface-2 );
-		transition: @transition-transform;
+		transition: var( --transition-hover );
+		transition-property: transform;
 	}
 
 	// Add affordance for full res image