From 7a1540a95353ed4286339c9c5517410ae80e24d9 Mon Sep 17 00:00:00 2001
From: sandippoddar <sandip.poddar@innoraft.com>
Date: Fri, 14 Feb 2025 11:17:42 +0530
Subject: [PATCH 1/3] Issue #3506341: Respect operating system settings for
reduced motion.
---
dist/css/components/ajax.css | 8 +++++++-
dist/css/components/autocomplete.css | 8 +++++++-
dist/css/components/layout_paragraphs.css | 8 +++++++-
dist/css/components/more_actions.css | 8 +++++++-
dist/css/components/tableselect.css | 8 +++++++-
styles/components/ajax.scss | 4 +++-
styles/components/autocomplete.scss | 4 +++-
styles/components/layout_paragraphs.scss | 4 +++-
styles/components/more_actions.scss | 4 +++-
styles/components/tableselect.scss | 4 +++-
10 files changed, 50 insertions(+), 10 deletions(-)
diff --git a/dist/css/components/ajax.css b/dist/css/components/ajax.css
index eac8ef78f..cd850c03c 100644
--- a/dist/css/components/ajax.css
+++ b/dist/css/components/ajax.css
@@ -61,7 +61,13 @@
border: 2px solid var(--gin-color-primary);
border-inline-end: 2px dotted transparent;
border-radius: 50%;
- animation: gin-throbber .75s linear infinite;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ .ui-dialog .ajax-progress-throbber::before,
+ .contextual-links .ajax-progress-throbber::before {
+ animation: gin-throbber .75s linear infinite;
+ }
}
.gin--dark-mode .ui-dialog .ajax-progress,
diff --git a/dist/css/components/autocomplete.css b/dist/css/components/autocomplete.css
index 57b44f49c..65d23a73c 100644
--- a/dist/css/components/autocomplete.css
+++ b/dist/css/components/autocomplete.css
@@ -67,7 +67,13 @@ div.autocomplete-deluxe-container div.autocomplete-deluxe-throbber.autocomplete-
border-block-start: 2px solid var(--gin-color-primary);
width: 14px;
height: 14px;
- animation: gin-throbber 1s linear infinite;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ .form-autocomplete.is-autocompleting + .claro-autocomplete__message::after,
+ div.autocomplete-deluxe-container div.autocomplete-deluxe-throbber.autocomplete-deluxe-open::after {
+ animation: gin-throbber 1s linear infinite;
+ }
}
div.autocomplete-deluxe-container div.autocomplete-deluxe-throbber.autocomplete-deluxe-open::after {
diff --git a/dist/css/components/layout_paragraphs.css b/dist/css/components/layout_paragraphs.css
index 0ca4777d2..328b759b2 100644
--- a/dist/css/components/layout_paragraphs.css
+++ b/dist/css/components/layout_paragraphs.css
@@ -479,12 +479,18 @@
.erl-loading div.spinner {
width: 1.125rem;
height: 1.125rem;
- animation: gin-throbber .75s linear infinite;
border: 2px solid var(--gin-color-primary);
border-inline-end: 2px dotted transparent;
border-radius: 50%;
}
+@media (prefers-reduced-motion: no-preference) {
+ .layout-paragraphs-loading div.spinner,
+ .erl-loading div.spinner {
+ animation: gin-throbber .75s linear infinite;
+ }
+}
+
.layout-paragraphs-add-content:focus,
.erl-add-content:focus {
outline: none;
diff --git a/dist/css/components/more_actions.css b/dist/css/components/more_actions.css
index 1cc4a5cfd..10db68e35 100644
--- a/dist/css/components/more_actions.css
+++ b/dist/css/components/more_actions.css
@@ -187,7 +187,6 @@ body:has([data-drupal-selector=edit-save] + .ajax-progress) :where([data-drupal-
body:has([data-drupal-selector=edit-preview] + .ajax-progress) :where([data-drupal-selector=gin-sticky-edit-preview]),
body:has([data-drupal-selector=edit-delete] + .ajax-progress) :where([data-drupal-selector=gin-sticky-edit-delete]) {
background-image: url("../../media/sprite.svg#loader-view");
- animation: gin-pseudo-throbber 1s linear infinite;
}
[dir="ltr"] body:has([data-drupal-selector=edit-save] + .ajax-progress) :where([data-drupal-selector=gin-sticky-edit-save]),
@@ -202,3 +201,10 @@ body:has([data-drupal-selector=edit-delete] + .ajax-progress) :where([data-drupa
padding-inline-end: var(--gin-spacing-xl);
}
+@media (prefers-reduced-motion: no-preference) {
+ body:has([data-drupal-selector=edit-save] + .ajax-progress) :where([data-drupal-selector=gin-sticky-edit-save]),
+ body:has([data-drupal-selector=edit-preview] + .ajax-progress) :where([data-drupal-selector=gin-sticky-edit-preview]),
+ body:has([data-drupal-selector=edit-delete] + .ajax-progress) :where([data-drupal-selector=gin-sticky-edit-delete]) {
+ animation: gin-pseudo-throbber 1s linear infinite;
+ }
+}
diff --git a/dist/css/components/tableselect.css b/dist/css/components/tableselect.css
index fdc187a3d..af49a205d 100644
--- a/dist/css/components/tableselect.css
+++ b/dist/css/components/tableselect.css
@@ -63,7 +63,13 @@
.block-system > .views-form [data-drupal-selector*=edit-header].is-sticky,
.view-content .views-form [data-drupal-selector*=edit-header].is-sticky {
z-index: 4;
- animation: fadeInBottom 320ms 1 forwards;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ .block-system > .views-form [data-drupal-selector*=edit-header].is-sticky,
+ .view-content .views-form [data-drupal-selector*=edit-header].is-sticky {
+ animation: fadeInBottom 320ms 1 forwards;
+ }
}
.block-system > .views-form [data-drupal-selector*=edit-header],
diff --git a/styles/components/ajax.scss b/styles/components/ajax.scss
index 56b42534f..d0b16f202 100644
--- a/styles/components/ajax.scss
+++ b/styles/components/ajax.scss
@@ -68,7 +68,9 @@
border: 2px solid var(--gin-color-primary);
border-inline-end: 2px dotted transparent;
border-radius: 50%;
- animation: gin-throbber 0.75s linear infinite;
+ @media (prefers-reduced-motion: no-preference) {
+ animation: gin-throbber 0.75s linear infinite;
+ }
}
}
diff --git a/styles/components/autocomplete.scss b/styles/components/autocomplete.scss
index 29e968377..586106dbf 100644
--- a/styles/components/autocomplete.scss
+++ b/styles/components/autocomplete.scss
@@ -62,7 +62,9 @@ div.autocomplete-deluxe-container div.autocomplete-deluxe-throbber.autocomplete-
border-block-start: 2px solid var(--gin-color-primary);
width: 14px;
height: 14px;
- animation: gin-throbber 1s linear infinite;
+ @media (prefers-reduced-motion: no-preference) {
+ animation: gin-throbber 1s linear infinite;
+ }
}
}
diff --git a/styles/components/layout_paragraphs.scss b/styles/components/layout_paragraphs.scss
index da27caedd..8735babb1 100644
--- a/styles/components/layout_paragraphs.scss
+++ b/styles/components/layout_paragraphs.scss
@@ -379,7 +379,9 @@
.erl-loading div.spinner {
width: 1.125rem;
height: 1.125rem;
- animation: gin-throbber 0.75s linear infinite;
+ @media (prefers-reduced-motion: no-preference) {
+ animation: gin-throbber 0.75s linear infinite;
+ }
border: 2px solid var(--gin-color-primary);
border-inline-end: 2px dotted transparent;
border-radius: 50%;
diff --git a/styles/components/more_actions.scss b/styles/components/more_actions.scss
index 9848322a8..390508aa4 100644
--- a/styles/components/more_actions.scss
+++ b/styles/components/more_actions.scss
@@ -179,5 +179,7 @@ body:has([data-drupal-selector="edit-preview"] + .ajax-progress) :where([data-dr
body:has([data-drupal-selector="edit-delete"] + .ajax-progress) :where([data-drupal-selector="gin-sticky-edit-delete"]) {
padding-left: var(--gin-spacing-xl);
background-image: icon('loader');
- animation: gin-pseudo-throbber 1s linear infinite;
+ @media (prefers-reduced-motion: no-preference) {
+ animation: gin-pseudo-throbber 1s linear infinite;
+ }
}
diff --git a/styles/components/tableselect.scss b/styles/components/tableselect.scss
index 1e885d02c..c872a03d3 100644
--- a/styles/components/tableselect.scss
+++ b/styles/components/tableselect.scss
@@ -54,7 +54,9 @@
&.is-sticky {
z-index: 4;
- animation: fadeInBottom 320ms 1 forwards;
+ @media (prefers-reduced-motion: no-preference) {
+ animation: fadeInBottom 320ms 1 forwards;
+ }
}
}
--
GitLab
From 301cfc70be3e064cf272e5e7555dfccc4883a3de Mon Sep 17 00:00:00 2001
From: sandippoddar <sandip.poddar@innoraft.com>
Date: Fri, 14 Feb 2025 11:27:33 +0530
Subject: [PATCH 2/3] Issue #3506341: Fix pipeline issue.
---
dist/css/components/more_actions.css | 1 +
1 file changed, 1 insertion(+)
diff --git a/dist/css/components/more_actions.css b/dist/css/components/more_actions.css
index 10db68e35..2002664b4 100644
--- a/dist/css/components/more_actions.css
+++ b/dist/css/components/more_actions.css
@@ -208,3 +208,4 @@ body:has([data-drupal-selector=edit-delete] + .ajax-progress) :where([data-drupa
animation: gin-pseudo-throbber 1s linear infinite;
}
}
+
--
GitLab
From 0fe44257dd90fc7f2242fb58eca3e56abe4dcacb Mon Sep 17 00:00:00 2001
From: sandippoddar <sandip.poddar@innoraft.com>
Date: Wed, 19 Feb 2025 17:54:17 +0530
Subject: [PATCH 3/3] Issue #3506341: Perfrom prefers-reduced-motion:
no-preference media for Transition properties.
---
dist/css/base/gin.css | 70 +++++++++++++++++++---
dist/css/components/autocomplete.css | 13 +++-
dist/css/components/edit_form.css | 11 +++-
dist/css/components/more_actions.css | 14 ++++-
dist/css/components/node_preview.css | 7 ++-
dist/css/components/project_browser.css | 7 ++-
dist/css/components/responsive_preview.css | 7 ++-
dist/css/components/sidebar.css | 27 +++++++--
dist/css/components/tabs.css | 9 ++-
dist/css/components/tooltip.css | 7 ++-
dist/css/layout/navigation.css | 27 +++++++--
dist/css/layout/toolbar.css | 40 ++++++++++++-
dist/css/theme/dialog.css | 42 +++++++++++--
styles/base/_button.scss | 8 ++-
styles/base/_form.scss | 12 +++-
styles/base/_messages.scss | 8 ++-
styles/base/_regions.scss | 4 +-
styles/base/_title.scss | 4 +-
styles/components/autocomplete.scss | 8 ++-
styles/components/edit_form.scss | 8 ++-
styles/components/more_actions.scss | 8 ++-
styles/components/node_preview.scss | 4 +-
styles/components/project_browser.scss | 4 +-
styles/components/responsive_preview.scss | 4 +-
styles/components/sidebar.scss | 16 +++--
styles/components/tabs.scss | 4 +-
styles/components/tooltip.scss | 4 +-
styles/layout/navigation.scss | 8 ++-
styles/layout/toolbar.scss | 25 ++++++--
styles/navigation/admin-toolbar.scss | 4 +-
styles/navigation/toolbar-link.scss | 4 +-
31 files changed, 347 insertions(+), 71 deletions(-)
diff --git a/dist/css/base/gin.css b/dist/css/base/gin.css
index 57dd6a2d2..14b08d07f 100644
--- a/dist/css/base/gin.css
+++ b/dist/css/base/gin.css
@@ -161,7 +161,12 @@ button.link:active,
min-height: var(--gin-height-sticky);
background: var(--gin-bg-app);
box-sizing: border-box;
- transition: var(--gin-transition);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ .region-sticky {
+ transition: var(--gin-transition);
+ }
}
.gin--edit-form .region-sticky {
@@ -553,7 +558,12 @@ body:not(.toolbar-tray-open) .layout-container {
text-overflow: ellipsis;
padding-inline-end: .25em;
max-width: 90%;
- transition: font-size .25s ease;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ .page-title {
+ transition: font-size .25s ease;
+ }
}
@media (min-width: 64em) {
@@ -1652,7 +1662,12 @@ table .views-field.views-field-operations {
border: 1px solid var(--gin-border-color-form-element);
border-radius: var(--gin-border-m);
box-sizing: border-box;
- transition: var(--gin-transition);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ .form-element {
+ transition: var(--gin-transition);
+ }
}
.form-element:hover {
@@ -1809,7 +1824,6 @@ table .views-field.views-field-operations {
height: 100%;
background-color: #fff;
border-radius: 21px;
- transition: transform .3s;
}
[dir="ltr"] :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content):not(.ajax-new-content):not(.tablesaw-cell-content) > .form-type--checkbox input::before {
@@ -1820,6 +1834,12 @@ table .views-field.views-field-operations {
transform: translateX(16px);
}
+@media (prefers-reduced-motion: no-preference) {
+ :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content):not(.ajax-new-content):not(.tablesaw-cell-content) > .form-type--checkbox input::before {
+ transition: transform .3s;
+ }
+}
+
.gin--dark-mode :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content):not(.ajax-new-content):not(.tablesaw-cell-content) > .form-type--checkbox input::before {
background-color: var(--gin-border-color-form-element);
}
@@ -1845,7 +1865,6 @@ table .views-field.views-field-operations {
mask-position: 17px 2px;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
- transition: transform .3s;
}
[dir="ltr"] :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content):not(.ajax-new-content):not(.tablesaw-cell-content) > .form-type--checkbox input::after {
@@ -1857,6 +1876,12 @@ table .views-field.views-field-operations {
}
}
+@media (forced-colors: active) and (prefers-reduced-motion: no-preference) {
+ :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content):not(.ajax-new-content):not(.tablesaw-cell-content) > .form-type--checkbox input::after {
+ transition: transform .3s;
+ }
+}
+
:not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content):not(.ajax-new-content):not(.tablesaw-cell-content) > .form-type--checkbox input:disabled {
cursor: not-allowed;
}
@@ -2190,7 +2215,15 @@ tr .form-item {
color: var(--gin-color-primary);
background-color: transparent;
box-shadow: none;
- transition: var(--gin-transition);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ .button,
+ .project__action_button,
+ .dropbutton__item:first-of-type > *,
+ .dropbutton__toggle {
+ transition: var(--gin-transition);
+ }
}
@media (min-width: 80em) {
@@ -2243,7 +2276,16 @@ tr .form-item {
border: 2px solid var(--gin-color-primary) !important;
border-radius: var(--gin-border-m);
box-shadow: 0 1px 2px var(--gin-color-primary-light);
- transition: var(--gin-transition);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ .button,
+ .button:not(:focus),
+ .form-actions .button,
+ .project__action_button,
+ .action-link--icon-trash.action-link {
+ transition: var(--gin-transition);
+ }
}
.button:hover,
@@ -2998,10 +3040,15 @@ a.button--primary.button--danger,
padding: var(--gin-spacing-m);
border: 2px solid transparent;
border-radius: var(--gin-border-l);
- transition: opacity var(--gin-transition-fast);
opacity: 1;
}
+@media (prefers-reduced-motion: no-preference) {
+ .messages {
+ transition: opacity var(--gin-transition-fast);
+ }
+}
+
.gin--dark-mode .messages {
box-shadow: 0 6px 16px var(--gin-border-color-layer);
}
@@ -3061,10 +3108,15 @@ a.button--primary.button--danger,
text-indent: -99999px;
border-radius: var(--gin-border-m);
border-color: transparent !important;
- transition: var(--gin-transition);
box-shadow: none;
}
+@media (prefers-reduced-motion: no-preference) {
+ .messages .button--dismiss {
+ transition: var(--gin-transition);
+ }
+}
+
.messages .button--dismiss:hover:not(:focus) {
color: transparent;
background-color: transparent;
diff --git a/dist/css/components/autocomplete.css b/dist/css/components/autocomplete.css
index 65d23a73c..b1be0b057 100644
--- a/dist/css/components/autocomplete.css
+++ b/dist/css/components/autocomplete.css
@@ -39,8 +39,10 @@ a.ui-button:active,
border: 1px solid var(--gin-border-color);
}
-.js .form-autocomplete {
- transition: var(--gin-transition), background-position none;
+@media (prefers-reduced-motion: no-preference) {
+ .js .form-autocomplete {
+ transition: var(--gin-transition), background-position none;
+ }
}
.js .form-autocomplete.is-autocompleting,
@@ -86,7 +88,12 @@ div.autocomplete-deluxe-multiple {
border: 1px solid var(--gin-border-color-form-element);
border-radius: var(--gin-border-m);
box-sizing: border-box;
- transition: var(--gin-transition);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ div.autocomplete-deluxe-multiple {
+ transition: var(--gin-transition);
+ }
}
.autocomplete-deluxe-container input.autocomplete-deluxe-form {
diff --git a/dist/css/components/edit_form.css b/dist/css/components/edit_form.css
index cca21c59f..67c15fcb7 100644
--- a/dist/css/components/edit_form.css
+++ b/dist/css/components/edit_form.css
@@ -2,11 +2,15 @@
.gin--edit-form {
padding-inline-end: var(--gin-sidebar-offset);
}
+}
+@media (min-width: 64em) and (prefers-reduced-motion: no-preference) {
.gin--edit-form .dialog-off-canvas-main-canvas {
transition: padding-inline-start var(--gin-transition-fast);
}
+}
+@media (min-width: 64em) {
.gin--edit-form.js-off-canvas-dialog-open {
padding-inline-end: 0;
}
@@ -103,7 +107,12 @@
-webkit-overflow-scrolling: touch;
background: var(--gin-bg-layer);
border-inline-start: 1px solid var(--gin-border-color-layer);
- transition: all var(--gin-transition-fast);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ .gin--edit-form .page-wrapper__node-edit-form .layout-region-node-secondary {
+ transition: all var(--gin-transition-fast);
+ }
}
.gin--dark-mode .gin--edit-form .page-wrapper__node-edit-form .layout-region-node-secondary {
diff --git a/dist/css/components/more_actions.css b/dist/css/components/more_actions.css
index 2002664b4..108bc2600 100644
--- a/dist/css/components/more_actions.css
+++ b/dist/css/components/more_actions.css
@@ -32,7 +32,12 @@
border-radius: var(--gin-border-l);
box-sizing: border-box;
box-shadow: var(--gin-shadow-l2);
- transition: opacity var(--gin-transition-fast);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ .gin-sticky-form-actions .gin-more-actions__menu {
+ transition: opacity var(--gin-transition-fast);
+ }
}
.gin-sticky-form-actions .gin-more-actions__menu .action-link.action-link,
@@ -93,7 +98,12 @@
width: 32px;
margin-inline: calc(var(--gin-spacing-xxs) * -1);
border-radius: var(--gin-border-m);
- transition: background var(--gin-transition-fast);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ .gin-sticky-form-actions .gin-more-actions__trigger {
+ transition: background var(--gin-transition-fast);
+ }
}
.gin-sticky-form-actions .gin-more-actions__trigger::before {
diff --git a/dist/css/components/node_preview.css b/dist/css/components/node_preview.css
index affe992b5..9d72101a6 100644
--- a/dist/css/components/node_preview.css
+++ b/dist/css/components/node_preview.css
@@ -131,7 +131,12 @@
border: 1px solid var(--gin-border-color-form-element);
border-radius: var(--gin-border-s);
box-sizing: border-box;
- transition: var(--gin-transition);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ .node-preview-container.node-preview-container .form-element {
+ transition: var(--gin-transition);
+ }
}
.node-preview-container.node-preview-container .js-hide {
diff --git a/dist/css/components/project_browser.css b/dist/css/components/project_browser.css
index 6839ab663..8b0ba6470 100644
--- a/dist/css/components/project_browser.css
+++ b/dist/css/components/project_browser.css
@@ -152,7 +152,12 @@
background-color: var(--gin-bg-input);
border: 1px solid var(--gin-border-color-form-element);
border-radius: var(--gin-border-m);
- transition: var(--gin-transition);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ #project-browser .search__filter__toggle.form-element, #project-browser .search__sort-select.form-element {
+ transition: var(--gin-transition);
+ }
}
#project-browser .search__checkbox-label {
diff --git a/dist/css/components/responsive_preview.css b/dist/css/components/responsive_preview.css
index d01494a54..fe555c26f 100644
--- a/dist/css/components/responsive_preview.css
+++ b/dist/css/components/responsive_preview.css
@@ -37,7 +37,12 @@
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
box-sizing: border-box;
- transition: transform .2s var(--gin-easing);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ .toolbar .toolbar-tab-responsive-preview.toolbar-tab .responsive-preview-trigger::after {
+ transition: transform .2s var(--gin-easing);
+ }
}
.toolbar .toolbar-tab-responsive-preview.toolbar-tab .responsive-preview-options {
diff --git a/dist/css/components/sidebar.css b/dist/css/components/sidebar.css
index 641098cb6..6a650eaec 100644
--- a/dist/css/components/sidebar.css
+++ b/dist/css/components/sidebar.css
@@ -8,7 +8,12 @@
display: block;
width: 2px;
height: 100%;
- transition: var(--gin-transition-fast);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ #gin-sidebar-draggable {
+ transition: var(--gin-transition-fast);
+ }
}
#gin-sidebar-draggable:hover {
@@ -19,8 +24,10 @@
background-color: var(--gin-border-color);
}
-.layout-region-node-secondary {
- transition: transform var(--gin-transition-fast);
+@media (prefers-reduced-motion: no-preference) {
+ .layout-region-node-secondary {
+ transition: transform var(--gin-transition-fast);
+ }
}
@media (max-width: 60.99em) {
@@ -62,7 +69,12 @@ body[data-meta-sidebar=closed] .layout-region-node-secondary {
height: 32px;
width: 32px;
border-radius: var(--gin-border-m);
- transition: background var(--gin-transition-fast);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ .meta-sidebar__close {
+ transition: background var(--gin-transition-fast);
+ }
}
.meta-sidebar__close::before {
@@ -100,7 +112,12 @@ body[data-meta-sidebar=closed] .layout-region-node-secondary {
width: 32px;
height: 32px;
border-radius: var(--gin-border-m);
- transition: background var(--gin-transition-fast);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ .meta-sidebar__trigger {
+ transition: background var(--gin-transition-fast);
+ }
}
.meta-sidebar__trigger::before {
diff --git a/dist/css/components/tabs.css b/dist/css/components/tabs.css
index 42484d001..b2ea97de0 100644
--- a/dist/css/components/tabs.css
+++ b/dist/css/components/tabs.css
@@ -118,7 +118,14 @@
width: 100%;
max-width: calc(100% + var(--gin-spacing-xs));
border-block-end: 1px solid var(--gin-border-color);
- transition: var(--gin-transition);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ .is-horizontal .tabs--primary::after,
+ .is-horizontal .tabs--secondary::after,
+ .horizontal-tabs ul.horizontal-tabs-list::after {
+ transition: var(--gin-transition);
+ }
}
@media (min-width: 48em) {
diff --git a/dist/css/components/tooltip.css b/dist/css/components/tooltip.css
index bee5ec866..27eafcdcc 100644
--- a/dist/css/components/tooltip.css
+++ b/dist/css/components/tooltip.css
@@ -19,7 +19,12 @@
.gin-tooltip {
visibility: hidden;
opacity: 0;
- transition: var(--gin-transition-fast);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ .gin-tooltip {
+ transition: var(--gin-transition-fast);
+ }
}
[data-gin-tooltip]:hover + .gin-tooltip,
diff --git a/dist/css/layout/navigation.css b/dist/css/layout/navigation.css
index 476a766b5..c6baf4e59 100644
--- a/dist/css/layout/navigation.css
+++ b/dist/css/layout/navigation.css
@@ -96,6 +96,11 @@ body {
@media (min-width: 61em) {
.admin-toolbar ~ .dialog-off-canvas-main-canvas {
margin-inline-start: var(--drupal-displace-offset-left, var(--sidebar-width));
+ }
+}
+
+@media (min-width: 61em) and (prefers-reduced-motion: no-preference) {
+ .admin-toolbar ~ .dialog-off-canvas-main-canvas {
transition: margin-inline-start .2s linear;
}
}
@@ -651,7 +656,12 @@ html:not(.admin-toolbar-expanded) .toolbar-menu__item--to-title > button.toolbar
.toolbar-link--has-icon span {
opacity: 1;
- transition: opacity .4s ease;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ .toolbar-link--has-icon span {
+ transition: opacity .4s ease;
+ }
}
.toolbar-link--has-icon::before {
@@ -732,9 +742,11 @@ html:not(.admin-toolbar-expanded) .toolbar-menu__item--to-title > button.toolbar
margin-inline-start: var(--gin-toolbar-x-offset);
}
-.admin-toolbar ~ .dialog-off-canvas-main-canvas,
-.gin--navigation .gin-secondary-toolbar--frontend {
- transition: margin-inline-start var(--gin-transition-fast), margin-inline-start var(--gin-transition-fast);
+@media (prefers-reduced-motion: no-preference) {
+ .admin-toolbar ~ .dialog-off-canvas-main-canvas,
+ .gin--navigation .gin-secondary-toolbar--frontend {
+ transition: margin-inline-start var(--gin-transition-fast), margin-inline-start var(--gin-transition-fast);
+ }
}
.gin--navigation {
@@ -1031,7 +1043,12 @@ button.toolbar-link--sidebar-toggle::before {
position: relative;
-webkit-mask-size: var(--space-s) var(--space-s);
mask-size: var(--space-s) var(--space-s);
- transition: transform var(--gin-transition);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ button.toolbar-link--sidebar-toggle::before {
+ transition: transform var(--gin-transition);
+ }
}
button.toolbar-link--sidebar-toggle:hover::before, button.toolbar-link--sidebar-toggle:active::before, button.toolbar-link--sidebar-toggle:focus::before {
diff --git a/dist/css/layout/toolbar.css b/dist/css/layout/toolbar.css
index 978a443e5..8a05cdc04 100644
--- a/dist/css/layout/toolbar.css
+++ b/dist/css/layout/toolbar.css
@@ -108,6 +108,11 @@
.toolbar .toolbar-bar #toolbar-item-administration-tray a.toolbar-icon-admin-toolbar-tools-help.toolbar-icon-default {
height: 74px;
margin-block-end: 6px;
+ }
+}
+
+@media (min-width: 61em) and (prefers-reduced-motion: no-preference) {
+ .toolbar .toolbar-bar #toolbar-item-administration-tray a.toolbar-icon-admin-toolbar-tools-help.toolbar-icon-default {
transition: top var(--gin-transition);
}
}
@@ -207,11 +212,15 @@ a.toolbar-menu__trigger,
.toolbar .toolbar-menu .toolbar-menu {
background: var(--gin-bg-app);
}
+}
+@media (min-width: 61em) and (prefers-reduced-motion: no-preference) {
.toolbar-fixed {
transition: var(--gin-transition);
}
+}
+@media (min-width: 61em) {
.toolbar .toolbar-box {
position: static;
}
@@ -234,10 +243,17 @@ a.toolbar-menu__trigger,
padding-block: var(--gin-spacing-m);
padding-inline: var(--gin-toolbar-width-collapsed) 0;
margin: 0;
- transition: width var(--gin-transition);
overflow: hidden;
}
+}
+@media (min-width: 61em) and (prefers-reduced-motion: no-preference) {
+ .toolbar-menu-administration a.toolbar-menu__trigger {
+ transition: width var(--gin-transition);
+ }
+}
+
+@media (min-width: 61em) {
.toolbar-menu-administration a.toolbar-menu__trigger, .toolbar-menu-administration a.toolbar-menu__trigger:active, .toolbar-menu-administration a.toolbar-menu__trigger:focus {
background-color: transparent;
}
@@ -257,6 +273,11 @@ a.toolbar-menu__trigger,
border: 1px solid var(--gin-border-color);
background: var(--gin-bg-layer) url("data:image/svg+xml,%3Csvg width='9' height='14' viewBox='0 0 9 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 1.7109375,0.31445312 0.2890625,1.7226562 5.5917969,7.0761719 0.2890625,12.429688 1.7109375,13.837891 8.4082031,7.0761719 Z' fill='%23999999'/%3E%3C/svg%3E") no-repeat center center;
background-size: 11px 11px;
+ }
+}
+
+@media (min-width: 61em) and (prefers-reduced-motion: no-preference) {
+ .toolbar-menu-administration a.toolbar-menu__trigger::before {
transition: transform var(--gin-transition);
}
}
@@ -380,9 +401,17 @@ a.toolbar-menu__trigger,
margin-inline: var(--gin-spacing-xs);
border-radius: var(--gin-border-m);
overflow: hidden;
+ }
+}
+
+@media (min-width: 61em) and (prefers-reduced-motion: no-preference) {
+ .toolbar-menu-administration > .toolbar-menu > .menu-item > .toolbar-icon,
+ .toolbar-menu-administration > .toolbar-menu > .menu-item > .toolbar-box > .toolbar-icon {
transition: width var(--gin-transition);
}
+}
+@media (min-width: 61em) {
.toolbar-menu-administration > .toolbar-menu > .menu-item > .toolbar-icon:hover,
.toolbar-menu-administration > .toolbar-menu > .menu-item > .toolbar-box > .toolbar-icon:hover {
color: var(--gin-color-primary);
@@ -418,11 +447,18 @@ a.toolbar-menu__trigger,
max-width: calc(100% - var(--gin-toolbar-height));
box-shadow: none;
border-inline-start: 1px solid var(--gin-border-color-layer);
- transition: margin-inline-start var(--gin-transition);
overflow-y: auto;
overflow-x: hidden;
}
+}
+
+@media (min-width: 61em) and (prefers-reduced-motion: no-preference) {
+ .toolbar-menu-administration > .toolbar-menu > .menu-item .toolbar-menu {
+ transition: margin-inline-start var(--gin-transition);
+ }
+}
+@media (min-width: 61em) {
.toolbar-menu-administration > .toolbar-menu > .menu-item .toolbar-menu, [dir] .toolbar-menu-administration > .toolbar-menu > .menu-item .toolbar-menu {
position: fixed;
width: var(--gin-toolbar-width);
diff --git a/dist/css/theme/dialog.css b/dist/css/theme/dialog.css
index f26f49868..ebde88013 100644
--- a/dist/css/theme/dialog.css
+++ b/dist/css/theme/dialog.css
@@ -98,7 +98,15 @@
color: var(--gin-color-primary);
background-color: transparent;
box-shadow: none;
- transition: var(--gin-transition);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ .ui-dialog .button,
+ .ui-dialog .project__action_button,
+ .ui-dialog .dropbutton__item:first-of-type > *,
+ .ui-dialog .dropbutton__toggle {
+ transition: var(--gin-transition);
+ }
}
@media (min-width: 80em) {
@@ -151,7 +159,16 @@
border: 2px solid var(--gin-color-primary) !important;
border-radius: var(--gin-border-m);
box-shadow: 0 1px 2px var(--gin-color-primary-light);
- transition: var(--gin-transition);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ .ui-dialog .button,
+ .ui-dialog .button:not(:focus),
+ .ui-dialog .form-actions .button,
+ .ui-dialog .project__action_button,
+ .ui-dialog .action-link--icon-trash.action-link {
+ transition: var(--gin-transition);
+ }
}
.ui-dialog .button:hover,
@@ -323,7 +340,12 @@
border: 1px solid var(--gin-border-color-form-element);
border-radius: var(--gin-border-m);
box-sizing: border-box;
- transition: var(--gin-transition);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ .ui-dialog .form-element {
+ transition: var(--gin-transition);
+ }
}
.ui-dialog .form-element:hover {
@@ -480,7 +502,6 @@
height: 100%;
background-color: #fff;
border-radius: 21px;
- transition: transform .3s;
}
[dir="ltr"] .ui-dialog :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content):not(.ajax-new-content):not(.tablesaw-cell-content) > .form-type--checkbox input::before {
@@ -491,6 +512,12 @@
transform: translateX(16px);
}
+@media (prefers-reduced-motion: no-preference) {
+ .ui-dialog :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content):not(.ajax-new-content):not(.tablesaw-cell-content) > .form-type--checkbox input::before {
+ transition: transform .3s;
+ }
+}
+
.gin--dark-mode .ui-dialog :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content):not(.ajax-new-content):not(.tablesaw-cell-content) > .form-type--checkbox input::before {
background-color: var(--gin-border-color-form-element);
}
@@ -516,7 +543,6 @@
mask-position: 17px 2px;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
- transition: transform .3s;
}
[dir="ltr"] .ui-dialog :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content):not(.ajax-new-content):not(.tablesaw-cell-content) > .form-type--checkbox input::after {
@@ -528,6 +554,12 @@
}
}
+@media (forced-colors: active) and (prefers-reduced-motion: no-preference) {
+ .ui-dialog :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content):not(.ajax-new-content):not(.tablesaw-cell-content) > .form-type--checkbox input::after {
+ transition: transform .3s;
+ }
+}
+
.ui-dialog :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content):not(.ajax-new-content):not(.tablesaw-cell-content) > .form-type--checkbox input:disabled {
cursor: not-allowed;
}
diff --git a/styles/base/_button.scss b/styles/base/_button.scss
index f492cc9b3..b0845e485 100644
--- a/styles/base/_button.scss
+++ b/styles/base/_button.scss
@@ -7,7 +7,9 @@
color: var(--gin-color-primary);
background-color: transparent;
box-shadow: none;
- transition: var(--gin-transition);
+ @media (prefers-reduced-motion: no-preference) {
+ transition: var(--gin-transition);
+ }
@include mq(wide) {
font-size: var(--gin-font-size);
@@ -37,7 +39,9 @@
border: 2px solid var(--gin-color-primary) !important;
border-radius: var(--gin-border-m);
box-shadow: 0 1px 2px var(--gin-color-primary-light);
- transition: var(--gin-transition);
+ @media (prefers-reduced-motion: no-preference) {
+ transition: var(--gin-transition);
+ }
&:hover {
background-color: var(--gin-color-primary-hover);
diff --git a/styles/base/_form.scss b/styles/base/_form.scss
index b46bd5b6d..296c32db5 100644
--- a/styles/base/_form.scss
+++ b/styles/base/_form.scss
@@ -8,7 +8,9 @@
border: 1px solid var(--gin-border-color-form-element);
border-radius: var(--gin-border-m);
box-sizing: border-box;
- transition: var(--gin-transition);
+ @media (prefers-reduced-motion: no-preference) {
+ transition: var(--gin-transition);
+ }
&:hover {
border-color: var(--gin-color-text);
@@ -169,7 +171,9 @@
background-color: #fff;
border-radius: 21px;
transform: translateX(-16px);
- transition: transform .3s;
+ @media (prefers-reduced-motion: no-preference) {
+ transition: transform .3s;
+ }
.gin--dark-mode & {
background-color: var(--gin-border-color-form-element);
@@ -192,7 +196,9 @@
mask-position: 17px 2px;
mask-repeat: no-repeat;
transform: translateX(-16px);
- transition: transform .3s;
+ @media (prefers-reduced-motion: no-preference) {
+ transition: transform .3s;
+ }
}
}
diff --git a/styles/base/_messages.scss b/styles/base/_messages.scss
index e40531c04..a253ea7ac 100644
--- a/styles/base/_messages.scss
+++ b/styles/base/_messages.scss
@@ -3,7 +3,9 @@
padding: var(--gin-spacing-m);
border: 2px solid transparent;
border-radius: var(--gin-border-l);
- transition: opacity var(--gin-transition-fast);
+ @media (prefers-reduced-motion: no-preference) {
+ transition: opacity var(--gin-transition-fast);
+ }
opacity: 1;
.gin--dark-mode & {
@@ -68,7 +70,9 @@
text-indent: -99999px;
border-radius: var(--gin-border-m);
border-color: transparent !important;
- transition: var(--gin-transition);
+ @media (prefers-reduced-motion: no-preference) {
+ transition: var(--gin-transition);
+ }
box-shadow: none;
&:hover:not(:focus) {
diff --git a/styles/base/_regions.scss b/styles/base/_regions.scss
index b8e82f213..cd22375e2 100644
--- a/styles/base/_regions.scss
+++ b/styles/base/_regions.scss
@@ -9,7 +9,9 @@
min-height: var(--gin-height-sticky);
background: var(--gin-bg-app);
box-sizing: border-box;
- transition: var(--gin-transition);
+ @media (prefers-reduced-motion: no-preference) {
+ transition: var(--gin-transition);
+ }
.gin--edit-form & {
inset-block-start: calc(var(--gin-toolbar-y-offset) - var(--gin-spacing-xxl) - var(--gin-spacing-xxs));
diff --git a/styles/base/_title.scss b/styles/base/_title.scss
index 4534adbf6..76a5376fa 100644
--- a/styles/base/_title.scss
+++ b/styles/base/_title.scss
@@ -15,7 +15,9 @@
text-overflow: ellipsis;
padding-inline-end: .25em;
max-width: 90%;
- transition: font-size 0.25s ease;
+ @media (prefers-reduced-motion: no-preference) {
+ transition: font-size 0.25s ease;
+ }
@include mq(large) {
.region-sticky--is-sticky & {
diff --git a/styles/components/autocomplete.scss b/styles/components/autocomplete.scss
index 586106dbf..9ea107f01 100644
--- a/styles/components/autocomplete.scss
+++ b/styles/components/autocomplete.scss
@@ -37,7 +37,9 @@ a.ui-button:active,
}
.js .form-autocomplete {
- transition: var(--gin-transition), background-position none;
+ @media (prefers-reduced-motion: no-preference) {
+ transition: var(--gin-transition), background-position none;
+ }
}
.js .form-autocomplete.is-autocompleting,
@@ -81,7 +83,9 @@ div.autocomplete-deluxe-multiple {
border: 1px solid var(--gin-border-color-form-element);
border-radius: var(--gin-border-m);
box-sizing: border-box;
- transition: var(--gin-transition);
+ @media (prefers-reduced-motion: no-preference) {
+ transition: var(--gin-transition);
+ }
}
.autocomplete-deluxe-container {
diff --git a/styles/components/edit_form.scss b/styles/components/edit_form.scss
index 41adcac44..a9dd6efd1 100644
--- a/styles/components/edit_form.scss
+++ b/styles/components/edit_form.scss
@@ -5,7 +5,9 @@
padding-inline-end: var(--gin-sidebar-offset);
.dialog-off-canvas-main-canvas {
- transition: padding-inline-start var(--gin-transition-fast);
+ @media (prefers-reduced-motion: no-preference) {
+ transition: padding-inline-start var(--gin-transition-fast);
+ }
}
// If off-canvas dialog is shown
@@ -109,7 +111,9 @@
-webkit-overflow-scrolling: touch;
background:var(--gin-bg-layer);
border-inline-start: 1px solid var(--gin-border-color-layer);
- transition: all var(--gin-transition-fast);
+ @media (prefers-reduced-motion: no-preference) {
+ transition: all var(--gin-transition-fast);
+ }
.gin--dark-mode & {
box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
diff --git a/styles/components/more_actions.scss b/styles/components/more_actions.scss
index 390508aa4..c1bb4f7e6 100644
--- a/styles/components/more_actions.scss
+++ b/styles/components/more_actions.scss
@@ -31,7 +31,9 @@
border-radius: var(--gin-border-l);
box-sizing: border-box;
box-shadow: var(--gin-shadow-l2);
- transition: opacity var(--gin-transition-fast);
+ @media (prefers-reduced-motion: no-preference) {
+ transition: opacity var(--gin-transition-fast);
+ }
// Increase order.
.action-link.action-link,
@@ -87,7 +89,9 @@
width: 32px;
margin-inline: calc(var(--gin-spacing-xxs) * -1);
border-radius: var(--gin-border-m);
- transition: background var(--gin-transition-fast);
+ @media (prefers-reduced-motion: no-preference) {
+ transition: background var(--gin-transition-fast);
+ }
&::before {
display: inline-block;
diff --git a/styles/components/node_preview.scss b/styles/components/node_preview.scss
index c2b4c4a6a..a52b66bba 100644
--- a/styles/components/node_preview.scss
+++ b/styles/components/node_preview.scss
@@ -118,7 +118,9 @@
border: 1px solid var(--gin-border-color-form-element);
border-radius: var(--gin-border-s);
box-sizing: border-box;
- transition: var(--gin-transition);
+ @media (prefers-reduced-motion: no-preference) {
+ transition: var(--gin-transition);
+ }
}
.js-hide {
diff --git a/styles/components/project_browser.scss b/styles/components/project_browser.scss
index 500b390db..f7ef3e501 100644
--- a/styles/components/project_browser.scss
+++ b/styles/components/project_browser.scss
@@ -146,7 +146,9 @@
background-color: var(--gin-bg-input);
border: 1px solid var(--gin-border-color-form-element);
border-radius: var(--gin-border-m);
- transition: var(--gin-transition);
+ @media (prefers-reduced-motion: no-preference) {
+ transition: var(--gin-transition);
+ }
}
&__checkbox-label {
diff --git a/styles/components/responsive_preview.scss b/styles/components/responsive_preview.scss
index b05151691..6c16cc622 100644
--- a/styles/components/responsive_preview.scss
+++ b/styles/components/responsive_preview.scss
@@ -37,7 +37,9 @@
mask-position: center center;
mask-repeat: no-repeat;
box-sizing: border-box;
- transition: transform .2s var(--gin-easing);
+ @media (prefers-reduced-motion: no-preference) {
+ transition: transform .2s var(--gin-easing);
+ }
}
}
diff --git a/styles/components/sidebar.scss b/styles/components/sidebar.scss
index ebaa58aea..4f0668ce5 100644
--- a/styles/components/sidebar.scss
+++ b/styles/components/sidebar.scss
@@ -8,7 +8,9 @@
display: block;
width: 2px;
height: 100%;
- transition: var(--gin-transition-fast);
+ @media (prefers-reduced-motion: no-preference) {
+ transition: var(--gin-transition-fast);
+ }
&:hover {
background-color: var(--gin-border-color-table);
@@ -20,7 +22,9 @@
}
.layout-region-node-secondary {
- transition: transform var(--gin-transition-fast);
+ @media (prefers-reduced-motion: no-preference) {
+ transition: transform var(--gin-transition-fast);
+ }
@include mq($to: medium) {
--gin-sidebar-width: var(--gin-sidebar-small-width);
@@ -64,7 +68,9 @@ body[data-meta-sidebar=open] {
height: 32px;
width: 32px;
border-radius: var(--gin-border-m);
- transition: background var(--gin-transition-fast);
+ @media (prefers-reduced-motion: no-preference) {
+ transition: background var(--gin-transition-fast);
+ }
&::before {
content: "";
@@ -100,7 +106,9 @@ body[data-meta-sidebar=open] {
width: 32px;
height: 32px;
border-radius: var(--gin-border-m);
- transition: background var(--gin-transition-fast);
+ @media (prefers-reduced-motion: no-preference) {
+ transition: background var(--gin-transition-fast);
+ }
&::before {
display: inline-block;
diff --git a/styles/components/tabs.scss b/styles/components/tabs.scss
index a702040f5..70c19c59b 100644
--- a/styles/components/tabs.scss
+++ b/styles/components/tabs.scss
@@ -120,7 +120,9 @@
width: 100%;
max-width: calc(100% + var(--gin-spacing-xs));
border-block-end: 1px solid var(--gin-border-color);
- transition: var(--gin-transition);
+ @media (prefers-reduced-motion: no-preference) {
+ transition: var(--gin-transition);
+ }
@include mq(small) {
inset-inline-start: var(--gin-spacing-xs);
diff --git a/styles/components/tooltip.scss b/styles/components/tooltip.scss
index db1a97238..39ab58e68 100644
--- a/styles/components/tooltip.scss
+++ b/styles/components/tooltip.scss
@@ -19,7 +19,9 @@
.gin-tooltip {
visibility: hidden;
opacity: 0;
- transition: var(--gin-transition-fast);
+ @media (prefers-reduced-motion: no-preference) {
+ transition: var(--gin-transition-fast);
+ }
}
[data-gin-tooltip]:hover + .gin-tooltip,
diff --git a/styles/layout/navigation.scss b/styles/layout/navigation.scss
index 1c2a0ac1b..b6e4139d7 100644
--- a/styles/layout/navigation.scss
+++ b/styles/layout/navigation.scss
@@ -51,7 +51,9 @@ body.gin--navigation {
// Set transtion to Gin's to avoid different speeds.
.admin-toolbar ~ .dialog-off-canvas-main-canvas,
.gin--navigation .gin-secondary-toolbar--frontend {
- transition: margin-inline-start var(--gin-transition-fast), margin-inline-start var(--gin-transition-fast);
+ @media (prefers-reduced-motion: no-preference) {
+ transition: margin-inline-start var(--gin-transition-fast), margin-inline-start var(--gin-transition-fast);
+ }
}
// ----------
@@ -325,7 +327,9 @@ button.toolbar-link--sidebar-toggle {
opacity: .75;
position: relative;
mask-size: var(--space-s) var(--space-s);
- transition: transform var(--gin-transition);
+ @media (prefers-reduced-motion: no-preference) {
+ transition: transform var(--gin-transition);
+ }
}
&:hover::before,
diff --git a/styles/layout/toolbar.scss b/styles/layout/toolbar.scss
index ec6acb56a..fadf0f6dd 100644
--- a/styles/layout/toolbar.scss
+++ b/styles/layout/toolbar.scss
@@ -112,7 +112,9 @@
@include mq(medium) {
height: 74px;
margin-block-end: 6px;
- transition: top var(--gin-transition);
+ @media (prefers-reduced-motion: no-preference) {
+ transition: top var(--gin-transition);
+ }
}
&::before {
@@ -217,7 +219,9 @@ a.toolbar-menu__trigger,
}
.toolbar-fixed {
- transition: var(--gin-transition);
+ @media (prefers-reduced-motion: no-preference) {
+ transition: var(--gin-transition);
+ }
}
.toolbar .toolbar-box {
@@ -244,7 +248,9 @@ a.toolbar-menu__trigger,
padding-block: var(--gin-spacing-m);
padding-inline: var(--gin-toolbar-width-collapsed) 0;
margin: 0;
- transition: width var(--gin-transition);
+ @media (prefers-reduced-motion: no-preference) {
+ transition: width var(--gin-transition);
+ }
overflow: hidden;
&, &:active, &:focus {
@@ -269,7 +275,10 @@ a.toolbar-menu__trigger,
border: 1px solid var(--gin-border-color);
background: var(--gin-bg-layer) url("data:image/svg+xml,%3Csvg width='9' height='14' viewBox='0 0 9 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 1.7109375,0.31445312 0.2890625,1.7226562 5.5917969,7.0761719 0.2890625,12.429688 1.7109375,13.837891 8.4082031,7.0761719 Z' fill='%23999999'/%3E%3C/svg%3E") no-repeat center center;
background-size: 11px 11px;
- transition: transform var(--gin-transition);
+
+ @media (prefers-reduced-motion: no-preference) {
+ transition: transform var(--gin-transition);
+ }
@media (forced-colors: active) {
background: var(--gin-bg-layer) url("data:image/svg+xml,%3Csvg width='9' height='14' viewBox='0 0 9 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 1.7109375,0.31445312 0.2890625,1.7226562 5.5917969,7.0761719 0.2890625,12.429688 1.7109375,13.837891 8.4082031,7.0761719 Z' fill='linkText'/%3E%3C/svg%3E") no-repeat center center;
@@ -391,7 +400,9 @@ a.toolbar-menu__trigger,
margin-inline: var(--gin-spacing-xs);
border-radius: var(--gin-border-m);
overflow: hidden;
- transition: width var(--gin-transition);
+ @media (prefers-reduced-motion: no-preference) {
+ transition: width var(--gin-transition);
+ }
&:hover {
color: var(--gin-color-primary);
@@ -424,7 +435,9 @@ a.toolbar-menu__trigger,
max-width: calc(100% - var(--gin-toolbar-height));
box-shadow: none;
border-inline-start: 1px solid var(--gin-border-color-layer);
- transition: margin-inline-start var(--gin-transition);
+ @media (prefers-reduced-motion: no-preference) {
+ transition: margin-inline-start var(--gin-transition);
+ }
overflow-y: auto;
overflow-x: hidden;
diff --git a/styles/navigation/admin-toolbar.scss b/styles/navigation/admin-toolbar.scss
index f6545a339..9097fef74 100644
--- a/styles/navigation/admin-toolbar.scss
+++ b/styles/navigation/admin-toolbar.scss
@@ -54,7 +54,9 @@
// Gin Custom start ---------------------
@include mq(medium) {
margin-inline-start: var(--drupal-displace-offset-left, var(--sidebar-width));
- transition: margin-inline-start 0.2s linear;
+ @media (prefers-reduced-motion: no-preference) {
+ transition: margin-inline-start 0.2s linear;
+ }
}
// Gin Custom end ------------------------
}
diff --git a/styles/navigation/toolbar-link.scss b/styles/navigation/toolbar-link.scss
index 8b83b78d3..0feab637d 100644
--- a/styles/navigation/toolbar-link.scss
+++ b/styles/navigation/toolbar-link.scss
@@ -140,7 +140,9 @@ html:not(.admin-toolbar-expanded) {
& span {
opacity: 1;
- transition: opacity .4s ease;
+ @media (prefers-reduced-motion: no-preference) {
+ transition: opacity .4s ease;
+ }
}
&::before {
--
GitLab