Issue #3443866 by finnsky, markusVJH: The toggle button flickers on page load (20d5c8ad) · Commits · project / drupal

core/modules/navigation/css/base/variables.css

+6 −5

Original line number	Diff line number	Diff line
		@@ -148,11 +148,6 @@ We need it root to calculate the size of the displace in .dialog-off-canvas-main
		--admin-toolbar-letter-spacing-0-8: var(--drupal-admin-letter-spacing-0-8, calc(0.05 * var(--admin-toolbar-rem))); /* 0.8px */
		--admin-toolbar-letter-spacing-0-06: var(--drupal-admin-letter-spacing-0-06, calc(0.00375 * var(--admin-toolbar-rem))); /* 0.06px */

		/**
		* Transitions.
		*/
		--admin-toolbar-transition: 150ms ease-out;

		/**
		* Z-index.
		*
		@@ -168,6 +163,12 @@ We need it root to calculate the size of the displace in .dialog-off-canvas-main
		--admin-toolbar-z-index-footer: var(--drupal-admin-z-index-footer, 701);
		--admin-toolbar-z-index-tooltip: var(--drupal-admin-z-index-tooltip, 801);
		}
		/**
		* Transitions.
		*/
		[data-admin-toolbar-transitions] {
		--admin-toolbar-transition: 150ms ease-out;
		}
		@media (prefers-reduced-motion) {
		[data-drupal-admin-styles] {
		--admin-toolbar-transition: 0s linear;

core/modules/navigation/css/base/variables.pcss.css

+7 −5

Original line number	Diff line number	Diff line
		@@ -145,11 +145,6 @@ We need it root to calculate the size of the displace in .dialog-off-canvas-main
		--admin-toolbar-letter-spacing-0-8: var(--drupal-admin-letter-spacing-0-8, calc(0.05 * var(--admin-toolbar-rem))); /* 0.8px */
		--admin-toolbar-letter-spacing-0-06: var(--drupal-admin-letter-spacing-0-06, calc(0.00375 * var(--admin-toolbar-rem))); /* 0.06px */

		/**
		* Transitions.
		*/
		--admin-toolbar-transition: 150ms ease-out;

		/**
		* Z-index.
		*
		@@ -166,6 +161,13 @@ We need it root to calculate the size of the displace in .dialog-off-canvas-main
		--admin-toolbar-z-index-tooltip: var(--drupal-admin-z-index-tooltip, 801);
		}

		/**
		* Transitions.
		*/
		[data-admin-toolbar-transitions] {
		--admin-toolbar-transition: 150ms ease-out;
		}

		@media (--admin-toolbar-reduced-motion) {
		[data-drupal-admin-styles] {
		--admin-toolbar-transition: 0s linear;

core/modules/navigation/css/components/admin-toolbar.css

+7 −1

Original line number	Diff line number	Diff line
		@@ -156,7 +156,10 @@ body {
		width: calc(1 * var(--admin-toolbar-rem));
		height: calc(1 * var(--admin-toolbar-rem));
		content: "";
		transition: transform var(--admin-toolbar-transition);
		transition:
		opacity var(--admin-toolbar-transition),
		transform var(--admin-toolbar-transition);
		opacity: 0;
		background-color: currentColor;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		@@ -167,6 +170,9 @@ body {
		-webkit-mask-image: url("data:image/svg+xml,%3csvg viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M5.7653 4.2653L3.2653 6.7653C3.19485 6.83575 3.0993 6.87532 2.99967 6.87532C2.90005 6.87532 2.8045 6.83575 2.73405 6.7653C2.6636 6.69485 2.62402 6.5993 2.62402 6.49967C2.62402 6.40005 2.6636 6.3045 2.73405 6.23405L4.96874 3.99999L2.73467 1.7653C2.69979 1.73042 2.67212 1.68901 2.65324 1.64343C2.63436 1.59785 2.62465 1.54901 2.62465 1.49967C2.62465 1.45034 2.63436 1.40149 2.65324 1.35592C2.67212 1.31034 2.69979 1.26893 2.73467 1.23405C2.76956 1.19917 2.81097 1.1715 2.85654 1.15262C2.90212 1.13374 2.95097 1.12402 3.0003 1.12402C3.04963 1.12402 3.09848 1.13374 3.14405 1.15262C3.18963 1.1715 3.23104 1.19917 3.26592 1.23405L5.76592 3.73405C5.80084 3.76893 5.82853 3.81036 5.84741 3.85596C5.86628 3.90157 5.87597 3.95045 5.87591 3.9998C5.87585 4.04916 5.86605 4.09802 5.84707 4.14358C5.82809 4.18914 5.8003 4.2305 5.7653 4.2653Z'/%3e%3c/svg%3e");
		mask-image: url("data:image/svg+xml,%3csvg viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M5.7653 4.2653L3.2653 6.7653C3.19485 6.83575 3.0993 6.87532 2.99967 6.87532C2.90005 6.87532 2.8045 6.83575 2.73405 6.7653C2.6636 6.69485 2.62402 6.5993 2.62402 6.49967C2.62402 6.40005 2.6636 6.3045 2.73405 6.23405L4.96874 3.99999L2.73467 1.7653C2.69979 1.73042 2.67212 1.68901 2.65324 1.64343C2.63436 1.59785 2.62465 1.54901 2.62465 1.49967C2.62465 1.45034 2.63436 1.40149 2.65324 1.35592C2.67212 1.31034 2.69979 1.26893 2.73467 1.23405C2.76956 1.19917 2.81097 1.1715 2.85654 1.15262C2.90212 1.13374 2.95097 1.12402 3.0003 1.12402C3.04963 1.12402 3.09848 1.13374 3.14405 1.15262C3.18963 1.1715 3.23104 1.19917 3.26592 1.23405L5.76592 3.73405C5.80084 3.76893 5.82853 3.81036 5.84741 3.85596C5.86628 3.90157 5.87597 3.95045 5.87591 3.9998C5.87585 4.04916 5.86605 4.09802 5.84707 4.14358C5.82809 4.18914 5.8003 4.2305 5.7653 4.2653Z'/%3e%3c/svg%3e");
		}
		[data-admin-toolbar-transitions] .admin-toolbar__expand-button::before {
		opacity: 1;
		}
		[dir="rtl"] .admin-toolbar__expand-button::before {
		transform: rotate(180deg);
		}

core/modules/navigation/css/components/admin-toolbar.pcss.css

+6 −1

Original line number	Diff line number	Diff line
		@@ -163,13 +163,18 @@ body {
		width: calc(1 * var(--admin-toolbar-rem));
		height: calc(1 * var(--admin-toolbar-rem));
		content: '';
		transition: transform var(--admin-toolbar-transition);
		transition: opacity var(--admin-toolbar-transition), transform var(--admin-toolbar-transition);
		opacity: 0;
		background-color: currentColor;
		mask-repeat: no-repeat;
		mask-position: center center;
		mask-size: 100% auto;
		mask-image: url(../../assets/icons/chevron.svg);

		[data-admin-toolbar-transitions] & {
		opacity: 1;
		}

		[dir='rtl'] & {
		transform: rotate(180deg);
		}

core/modules/navigation/js/admin-toolbar-wrapper.js

+2 −0

Original line number	Diff line number	Diff line
		@@ -46,7 +46,9 @@

		// This is special attribute which added to apply css
		// with animations and avoid layout shift.
		setTimeout(() => {
		doc.setAttribute('data-admin-toolbar-transitions', true);
		}, 200);

		doc.addEventListener(HTML_TRIGGER_EVENT, (e) => {
		// Prevents multiple triggering while transitioning.