diff --git a/resources/assets/stylesheets/less/files.less b/resources/assets/stylesheets/less/files.less
index b604da9bfd6b73e75fab16e3f144f5f37bf538f7..c3868503ced343b6ad4815fcf8f68474b615ff97 100644
--- a/resources/assets/stylesheets/less/files.less
+++ b/resources/assets/stylesheets/less/files.less
@@ -42,7 +42,7 @@
display: flex;
justify-content: space-between;
- transition: right 200ms;
+ transition: right var(--transition-duration);
img {
background-color: var(--base-color);
@@ -421,7 +421,7 @@ form.default {
> label {
cursor: pointer;
border: 1px solid var(--content-color-40);
- transition: background-color 200ms;
+ transition: background-color var(--transition-duration);
display: flex;
justify-content: space-between;
align-items: center;
@@ -452,7 +452,7 @@ form.default {
}
> input[type=radio]:checked + label {
background-color: var(--content-color-20);
- transition: background-color 200ms;
+ transition: background-color var(--transition-duration);
> .arrow {
display: none;
}
diff --git a/resources/assets/stylesheets/scss/article.scss b/resources/assets/stylesheets/scss/article.scss
index 64ccff82e2a60228ed2b9912543e41fef4b8695f..9abb0bd80cb6fc2a73145fe8312fdf26f337234c 100644
--- a/resources/assets/stylesheets/scss/article.scss
+++ b/resources/assets/stylesheets/scss/article.scss
@@ -5,7 +5,7 @@ article.studip {
margin-bottom: $article-padding;
padding: $article-padding;
- transition: all 300ms ease 0s;
+ transition: all var(--transition-duration) ease 0s;
&:last-child {
margin-bottom: 0;
@@ -92,7 +92,7 @@ article.studip {
&::before {
flex: 0 0 auto;
margin-right: 5px;
- transition: all 200ms ease 0s;
+ transition: all var(--transition-duration) ease 0s;
}
width: 100%;
}
diff --git a/resources/assets/stylesheets/scss/blubber.scss b/resources/assets/stylesheets/scss/blubber.scss
index 4f1fb0a2787f7f2aab94d9cf96cab505f037e04a..c103e2c0b97068fe0d7fa3d663459db0df2cae64 100644
--- a/resources/assets/stylesheets/scss/blubber.scss
+++ b/resources/assets/stylesheets/scss/blubber.scss
@@ -94,7 +94,7 @@
> li {
display: none;
&.new {
- animation: blubber-scaling 300ms ease-out;
+ animation: blubber-scaling var(--transition-duration) ease-out;
}
align-items: flex-end;
justify-content: flex-start;
diff --git a/resources/assets/stylesheets/scss/consultation.scss b/resources/assets/stylesheets/scss/consultation.scss
index eca483838bdfc96e4abb31d7261d696e62f569c6..b521c26f5f3eab99737fa7faa9a2f9f4075e15ce 100644
--- a/resources/assets/stylesheets/scss/consultation.scss
+++ b/resources/assets/stylesheets/scss/consultation.scss
@@ -16,7 +16,7 @@
&.shortened {
@include icon(before, info-circle, info, 12px, 5px);
- transition: opacity 300ms;
+ transition: opacity var(--transition-duration);
&:not(:hover)::after {
opacity: 0.5;
}
diff --git a/resources/assets/stylesheets/scss/content_box.scss b/resources/assets/stylesheets/scss/content_box.scss
index c8e1a2ab9d01059cfb4c849ce1d75181cc41cd93..300b91a65f76addec2ac1c1d49992f662db8163b 100644
--- a/resources/assets/stylesheets/scss/content_box.scss
+++ b/resources/assets/stylesheets/scss/content_box.scss
@@ -3,7 +3,7 @@ section.contentbox {
border-style: solid;
border-width: 1px;
margin-bottom: 10px;
- transition: all 300ms ease 0s;
+ transition: all var(--transition-duration) ease 0s;
header {
display: flex;
@@ -98,7 +98,7 @@ section.contentbox {
max-height: 0;
opacity: 0;
overflow: auto;
- transition: opacity $transition-duration;
+ transition: opacity var(--transition-duration);
}
@@ -147,8 +147,8 @@ section.contentbox {
h1 a {
@include icon(before, arr_1right, clickable);
- &:before {
- transition: all 200ms ease 0s;
+ &::before {
+ transition: all var(--transition-duration) ease 0s;
margin-right: 2px;
}
@@ -218,14 +218,14 @@ section.contentbox {
max-height: 0;
opacity: 0;
overflow: auto;
- transition: opacity $transition-duration;
+ transition: opacity var(--transition-duration);
}
&.open {
> p, > section, > footer, > div {
max-height: none;
opacity: 1;
- transition: opacity $transition-duration;
+ transition: opacity var(--transition-duration);
}
footer {
diff --git a/resources/assets/stylesheets/scss/courseware.scss b/resources/assets/stylesheets/scss/courseware.scss
index 8c158f80496bd9ca508ef4d65dfc598044d16d46..7b98933c5942111247bd51028300b6439d9dd669 100644
--- a/resources/assets/stylesheets/scss/courseware.scss
+++ b/resources/assets/stylesheets/scss/courseware.scss
@@ -1696,7 +1696,7 @@ $icons: (
content: '';
border-bottom: solid 3px var(--dark-gray-color-75);
transform: scaleX(0);
- transition: transform 300ms ease-in-out;
+ transition: transform var(--transition-duration) ease-in-out;
}
&.is-active,
@@ -5248,7 +5248,7 @@ text block end
width: 40%;
background: var(--white);
padding: 20px;
- transition: all $transition-duration ease;
+ transition: all var(--transition-duration) ease;
h3 {
padding: 15px;
diff --git a/resources/assets/stylesheets/scss/css_tree.scss b/resources/assets/stylesheets/scss/css_tree.scss
index 39d9073616badc480399256ea6449747559323a9..69cc50ee372b115303c6acac6d517c499c836d6d 100644
--- a/resources/assets/stylesheets/scss/css_tree.scss
+++ b/resources/assets/stylesheets/scss/css_tree.scss
@@ -1,4 +1,3 @@
-$css-tree-delay: 300ms;
$css-tree-distance: 8px;
$css-tree-border: 1px solid var(--light-gray-color-80);
@@ -57,7 +56,7 @@ $css-tree-border: 1px solid var(--light-gray-color-80);
cursor: pointer;
&:before {
- transition: transform $css-tree-delay;
+ transition: transform var(--transition-duration);
vertical-align: baseline;
}
}
@@ -65,7 +64,7 @@ $css-tree-border: 1px solid var(--light-gray-color-80);
max-height: 0;
opacity: 0;
- transition: all $css-tree-delay;
+ transition: all var(--transition-duration);
}
~ input[type=radio] + label {
margin-left: 0;
diff --git a/resources/assets/stylesheets/scss/dates.scss b/resources/assets/stylesheets/scss/dates.scss
index f5e83a24a06f05cd5abb3a1ac91fa21f7a7e2e94..751dc01c3eb8a271f3324f19aeb485f75cc2697b 100644
--- a/resources/assets/stylesheets/scss/dates.scss
+++ b/resources/assets/stylesheets/scss/dates.scss
@@ -4,7 +4,7 @@ table.dates {
background-color: transparent;
}
tr.ausfall {
- transition: opacity 300ms;
+ transition: opacity var(--transition-duration);
opacity: 0.5;
&:hover {
diff --git a/resources/assets/stylesheets/scss/dialog.scss b/resources/assets/stylesheets/scss/dialog.scss
index 98df9687eef987ec771fc4fc3e5bb7957d2661bf..0d21773fd8c3b55268e11817845264ce7b61ef34 100644
--- a/resources/assets/stylesheets/scss/dialog.scss
+++ b/resources/assets/stylesheets/scss/dialog.scss
@@ -197,7 +197,7 @@
.next,
.previous {
- transition: opacity 300ms;
+ transition: opacity var(--transition-duration);
background-repeat: no-repeat;
display: block;
opacity: 0.1;
diff --git a/resources/assets/stylesheets/scss/forms.scss b/resources/assets/stylesheets/scss/forms.scss
index 1f94d1fbd956da4b5e40c47a796923687f8bb356..45cfc8467d331cde54f7a3a2f3e25622c10486a5 100644
--- a/resources/assets/stylesheets/scss/forms.scss
+++ b/resources/assets/stylesheets/scss/forms.scss
@@ -48,7 +48,7 @@ form.default {
padding: 5px;
vertical-align: middle;
width: 100%;
- transition: all $transition-duration ease-out;
+ transition: all var(--transition-duration) ease-out;
&:focus {
border-color: var(--brand-color-dark);
@@ -288,7 +288,7 @@ form.default {
width: calc(100% - 2em);
display: inline-block;
- transition: all $transition-duration ease-out;
+ transition: all var(--transition-duration) ease-out;
&:focus {
border-color: var(--brand-color-dark);
diff --git a/resources/assets/stylesheets/scss/fullscreen.scss b/resources/assets/stylesheets/scss/fullscreen.scss
index 256540c8c11b35b3999618163cd550ed9e9d5831..6ecdf0e5ec9693c6b289291966776fa154891832 100644
--- a/resources/assets/stylesheets/scss/fullscreen.scss
+++ b/resources/assets/stylesheets/scss/fullscreen.scss
@@ -30,13 +30,13 @@ html:not(.is-fullscreen-immediately) {
#top-bar,
#navigation-level-1,
#navigation-level-2 {
- transition: top $transition-duration, margin-bottom $transition-duration, opacity $transition-duration;
+ transition: top var(--transition-duration), margin-bottom var(--transition-duration), opacity var(--transition-duration);
}
#sidebar {
- transition: left $transition-duration, margin-right $transition-duration, opacity $transition-duration;
+ transition: left var(--transition-duration), margin-right var(--transition-duration), opacity var(--transition-duration);
}
#main-footer {
- transition: opacity $transition-duration, max-height $transition-duration, padding $transition-duration;
+ transition: opacity var(--transition-duration), max-height var(--transition-duration), padding var(--transition-duration);
}
}
diff --git a/resources/assets/stylesheets/scss/globalsearch.scss b/resources/assets/stylesheets/scss/globalsearch.scss
index 7c0b33bcd44038e4372861d12b1200357b0f48c5..4faee5feabd8cf621ef34c5252b7058a295a93e5 100644
--- a/resources/assets/stylesheets/scss/globalsearch.scss
+++ b/resources/assets/stylesheets/scss/globalsearch.scss
@@ -4,7 +4,6 @@
#globalsearch-searchbar {
$width: 423px;
$hidden-width: 215px;
- $transition-duration: 300ms;
position: relative;
top: 4px;
@@ -30,7 +29,7 @@
height: 29px;
padding-left: 5px;
width: $hidden-width;
- transition: width $transition-duration;
+ transition: width var(--transition-duration);
}
&.is-visible #globalsearch-input {
width: $width;
@@ -180,7 +179,7 @@
padding: 6px 6px 6px 0;
border-top: 1px solid var(--content-color-40);
- transition: background-color $transition-duration;
+ transition: background-color var(--transition-duration);
&:hover {
background-color: var(--dark-gray-color-20);
diff --git a/resources/assets/stylesheets/scss/layouts.scss b/resources/assets/stylesheets/scss/layouts.scss
index 7dfda47f09092dfcfe8b4c54669d84f6c51bda12..72ff2e7c01c370de64399fc51c224452c35dd0da 100644
--- a/resources/assets/stylesheets/scss/layouts.scss
+++ b/resources/assets/stylesheets/scss/layouts.scss
@@ -138,7 +138,7 @@ body {
flex: 1;
padding-left: $page-margin;
transition: margin-left;
- transition-duration: 300ms;
+ transition-duration: var(--transition-duration);
transition-delay: 500ms;
}
@@ -310,7 +310,7 @@ body {
#tabs { // row 1 of layout_page
padding-left: $page-margin;
transition: margin-left;
- transition-duration: 300ms;
+ transition-duration: var(--transition-duration);
transition-delay: 500ms;
}
diff --git a/resources/assets/stylesheets/scss/links.scss b/resources/assets/stylesheets/scss/links.scss
index f239ed960db478aba18334871cd27886afb50862..b92e1ccc509d8b9d27553e321e8f1e083288ac8a 100644
--- a/resources/assets/stylesheets/scss/links.scss
+++ b/resources/assets/stylesheets/scss/links.scss
@@ -12,9 +12,7 @@ a, a:link, a:visited {
}
}
a[href] {
- @media not prefers-reduced-motion {
- transition: color $transition-duration;
- }
+ transition: color var(--transition-duration);
}
a[disabled] {
pointer-events: none;
diff --git a/resources/assets/stylesheets/scss/navigation-hoverborder.scss b/resources/assets/stylesheets/scss/navigation-hoverborder.scss
index 2a4b6b3c6f9126db7f8534ebe7a9744ac14e9770..cf0fab2c254ce2b4e24fce4f1c735837e1076631 100644
--- a/resources/assets/stylesheets/scss/navigation-hoverborder.scss
+++ b/resources/assets/stylesheets/scss/navigation-hoverborder.scss
@@ -15,11 +15,9 @@
height: $height;
margin-top: $margin;
- @media not prefers-reduced-motion {
- transition: left $transition-duration,
- right $transition-duration,
- opacity $transition-duration;
- }
+ transition: left var(--transition-duration),
+ right var(--transition-duration),
+ opacity var(--transition-duration);
}
}
@mixin border-shrink() {
diff --git a/resources/assets/stylesheets/scss/navigation.scss b/resources/assets/stylesheets/scss/navigation.scss
index 4e5a46f0990db3fa0651893734e6f846869e9f09..d51c76d598cd60bd8a3f60a25c05230fdbafb874 100644
--- a/resources/assets/stylesheets/scss/navigation.scss
+++ b/resources/assets/stylesheets/scss/navigation.scss
@@ -84,9 +84,7 @@ body:not(.fixed) #navigation-level-1-items {
// Hide all navigation item title on hover and display only the currently
// hovered one
.navtitle {
- @media not prefers-reduced-motion {
- transition: opacity 300ms; // Smooth change when entering
- }
+ transition: opacity var(--transition-duration); // Smooth change when entering
}
&:hover {
> li.active .navtitle {
@@ -94,9 +92,7 @@ body:not(.fixed) #navigation-level-1-items {
}
> li:hover .navtitle {
opacity: 1;
- @media not prefers-reduced-motion {
- transition: opacity 0ms; // Quick change when leaving
- }
+ transition: opacity 0ms; // Quick change when leaving
}
}
@@ -129,17 +125,13 @@ body:not(.fixed) #navigation-level-1-items {
// Rotate icon
> label img {
- @media not prefers-reduced-motion {
- transition: transform 300ms;
- }
+ transition: transform var(--transition-duration);
transform: rotate(90deg);
}
// Define transition duration for possible badge on overflow
> label > a[data-badge]::before {
- @media not prefers-reduced-motion {
- transition: opacity 300ms;
- }
+ transition: opacity var(--transition-duration);
}
// Display menu on activation
diff --git a/resources/assets/stylesheets/scss/oer.scss b/resources/assets/stylesheets/scss/oer.scss
index 27919f414d20ab6cc5805188ef5426a832a24057..4fcb1801f1a240b7c81571d3028fea77f9d55ff4 100644
--- a/resources/assets/stylesheets/scss/oer.scss
+++ b/resources/assets/stylesheets/scss/oer.scss
@@ -183,7 +183,7 @@ ul.reviews, ol.reviews {
max-width: 270px;
box-sizing: border-box;
border: solid 1px var(--base-color-60);
- transition: all 300ms ease 0s;
+ transition: all var(--transition-duration) ease 0s;
position: relative;
header {
diff --git a/resources/assets/stylesheets/scss/opengraph.scss b/resources/assets/stylesheets/scss/opengraph.scss
index fbd3e31246fafc106186235175c0a26e1bfb93eb..2e529df86ba65a1de8dd6de86f2a9d31fd20ba38 100644
--- a/resources/assets/stylesheets/scss/opengraph.scss
+++ b/resources/assets/stylesheets/scss/opengraph.scss
@@ -73,7 +73,7 @@
background-size: 100% auto;
.play {
border-radius: 100px;
- transition: background-color 300ms;
+ transition: background-color var(--transition-duration);
background-color: rgba(0, 0, 0, 0.7);
padding: 10px;
}
diff --git a/resources/assets/stylesheets/scss/personal-notifications.scss b/resources/assets/stylesheets/scss/personal-notifications.scss
index a832f46aed808baa4ec770319ab047a5a6ca49b2..9f61e5f46b74b68c1142ee2047cbddd07e6895bf 100644
--- a/resources/assets/stylesheets/scss/personal-notifications.scss
+++ b/resources/assets/stylesheets/scss/personal-notifications.scss
@@ -228,7 +228,7 @@
margin: 0;
// Create blind effect to hide/display this links smoothly
- transition: all 300ms;
+ transition: all var(--transition-duration);
}
a.enable-desktop-notifications {
@include background-icon('notification', 'clickable');
diff --git a/resources/assets/stylesheets/scss/raumzeit.scss b/resources/assets/stylesheets/scss/raumzeit.scss
index 8db05f06972317c72444187f88f98607b9b9af96..c14e01114074c5db4729136fb13baedc7941e981 100644
--- a/resources/assets/stylesheets/scss/raumzeit.scss
+++ b/resources/assets/stylesheets/scss/raumzeit.scss
@@ -31,21 +31,21 @@ div.at_least_one_teacher {
max-height: 0;
opacity: 0;
padding: 0;
- transition: opacity $transition-duration;
+ transition: opacity var(--transition-duration);
}
&:not(.open) header ~ * {
max-height: 0;
opacity: 0;
overflow: auto;
- transition: opacity $transition-duration;
+ transition: opacity var(--transition-duration);
}
&.open {
> p, > section, > footer, > div {
max-height: none;
opacity: 1;
- transition: opacity $transition-duration;
+ transition: opacity var(--transition-duration);
}
footer {
diff --git a/resources/assets/stylesheets/scss/responsive.scss b/resources/assets/stylesheets/scss/responsive.scss
index 1c2d2f10d547a770bf95b4cf6b9d40b67d8f29ec..a1f2a6750795cbc5ab59c6b0a4b7e8181f245721 100644
--- a/resources/assets/stylesheets/scss/responsive.scss
+++ b/resources/assets/stylesheets/scss/responsive.scss
@@ -47,19 +47,14 @@ $sidebarOut: -330px;
.menu-closed {
cursor: pointer;
transform: rotate(0deg);
-
- @media not prefers-reduced-motion {
- transition: $transition-duration ease-in-out;
- }
+ transition: var(--transition-duration) ease-in-out;
}
.menu-open {
cursor: pointer;
transform: rotate(90deg);
- @media not prefers-reduced-motion {
- transition: $transition-duration ease-in-out;
- }
+ transition: var(--transition-duration) ease-in-out;
}
}
@@ -89,9 +84,7 @@ $sidebarOut: -330px;
width: $responsive-menu-width;
- @media not prefers-reduced-motion {
- transition: all $transition-duration ease-in-out;
- }
+ transition: all var(--transition-duration) ease-in-out;
header {
background-image: url("#{$image-path}/sidebar/noicon-sidebar.png");
@@ -328,15 +321,11 @@ $sidebarOut: -330px;
z-index: 100;
&.responsive-hide {
- @media not prefers-reduced-motion {
- animation: slide-out $transition-duration backwards;
- }
+ animation: slide-out var(--transition-duration) backwards;
}
&.responsive-show {
- @media not prefers-reduced-motion {
- animation: slide-in $transition-duration forwards;
- }
+ animation: slide-in var(--transition-duration) forwards;
position: sticky;
top: 100px;
visibility: visible;
@@ -936,7 +925,7 @@ html:not(.responsive-display):not(.fullscreen-mode) {
justify-content: flex-end;
.quicksearchbox {
- transition: all 300ms;
+ transition: all var(--transition-duration);
opacity: 0;
max-width: 0;
}
diff --git a/resources/assets/stylesheets/scss/search.scss b/resources/assets/stylesheets/scss/search.scss
index 7cc147472da2ff4c8bcfe5de2f590b1a22b45acb..9b6bf4548c8faf6d6d2a7ea9bba25ff07d8a698a 100644
--- a/resources/assets/stylesheets/scss/search.scss
+++ b/resources/assets/stylesheets/scss/search.scss
@@ -78,7 +78,7 @@ label.inactive-settings-category {
flex-wrap: nowrap;
padding: 8px;
- transition: background-color $transition-duration;
+ transition: background-color var(--transition-duration);
&.search-is-subcourse {
padding-left: 30px;
diff --git a/resources/assets/stylesheets/scss/skiplinks.scss b/resources/assets/stylesheets/scss/skiplinks.scss
index 40c5126f07cf069e94889413e70909f86ea47fbe..6968b63e9af83570ba0b8b5c8872a1c1b8ebb167 100644
--- a/resources/assets/stylesheets/scss/skiplinks.scss
+++ b/resources/assets/stylesheets/scss/skiplinks.scss
@@ -41,9 +41,7 @@ button.skiplink {
color: var(--active-color);
}
- @media not prefers-reduced-motion {
- transition: color $transition-duration;
- }
+ transition: color var(--transition-duration);
}
#skiplink_list {
diff --git a/resources/assets/stylesheets/scss/start.scss b/resources/assets/stylesheets/scss/start.scss
index 43bde3a5523d2f91171ef27f3745a4f967f7357a..29f2162e800a475b0c8416953b5c99a703e8b8dc 100644
--- a/resources/assets/stylesheets/scss/start.scss
+++ b/resources/assets/stylesheets/scss/start.scss
@@ -18,7 +18,7 @@
.studip-widget {
border: 1px solid var(--base-color-20);
- transition: border-color 300ms ease-in-out;
+ transition: border-color var(--transition-duration) ease-in-out;
.widget-header {
box-sizing: border-box;
@@ -55,8 +55,7 @@
.studip-widget:hover {
border: 1px solid var(--brand-color-darker);
- transition: border-color 300ms ease-in-out;
-
+ transition: border-color var(--transition-duration) ease-in-out;
}
#widget_choices{
border-right: 1px dashed var(--brand-color-darker);
diff --git a/resources/assets/stylesheets/scss/studip-overlay.scss b/resources/assets/stylesheets/scss/studip-overlay.scss
index 519ed8fe654cdc3183c9b9028637d6bdb7918157..6670768ffbf58e3014ec06d013414285c2da2e8b 100644
--- a/resources/assets/stylesheets/scss/studip-overlay.scss
+++ b/resources/assets/stylesheets/scss/studip-overlay.scss
@@ -66,7 +66,7 @@
&::-moz-progress-bar,
&::-webkit-progress-value {
background-color: var(--yellow-40);
- transition: all $transition-duration;
+ transition: all var(--transition-duration);
}
}
diff --git a/resources/assets/stylesheets/scss/studip-selection.scss b/resources/assets/stylesheets/scss/studip-selection.scss
index 83282daacee67c2ade76dc637f6b80893e219cb6..615c53308995942972dce63bd0a65beaf681ff84 100644
--- a/resources/assets/stylesheets/scss/studip-selection.scss
+++ b/resources/assets/stylesheets/scss/studip-selection.scss
@@ -54,7 +54,7 @@
// Selected and selectable lists
.studip-selection-image img {
- transition: opacity 300ms;
+ transition: opacity var(--transition-duration);
}
.studip-selection-selected .studip-selection-label {
diff --git a/resources/assets/stylesheets/scss/table_of_contents.scss b/resources/assets/stylesheets/scss/table_of_contents.scss
index 63b0b969c3b14bb72f13cbed1998c8d0c408b9bc..ec3049d32118afdd92aacd6a8a803760e69f2b18 100644
--- a/resources/assets/stylesheets/scss/table_of_contents.scss
+++ b/resources/assets/stylesheets/scss/table_of_contents.scss
@@ -77,10 +77,8 @@ ul.numberedchapters {
margin-bottom: unset;
}
-@media not prefers-reduced-motion {
- .toc_transform {
- transition: all 0.8s ease;
- }
+.toc_transform {
+ transition: all var(--transition-duration) ease;
}
#main_content {
diff --git a/resources/assets/stylesheets/scss/variables.scss b/resources/assets/stylesheets/scss/variables.scss
index f801eb8227d04cd8f8c9b61a19331e8782764ad4..f82da12bfa1d7300879d56181418a00e4e376e82 100644
--- a/resources/assets/stylesheets/scss/variables.scss
+++ b/resources/assets/stylesheets/scss/variables.scss
@@ -150,4 +150,10 @@ $transition-duration: .3s;
#{"--"}group-color-6: $dark-green;
#{"--"}group-color-7: $petrol;
#{"--"}group-color-8: $brown;
+
+ #{"--"}transition-duration: $transition-duration;
+
+ @media (prefers-reduced-motion) {
+ #{"--"}transition-duration: 0s;
+ }
}
diff --git a/resources/assets/stylesheets/studip.scss b/resources/assets/stylesheets/studip.scss
index edbc2e12fe92ac8603f96776e1bb373f0e3e6d6c..1ec3573cc1b68251a0cf5718d678679f42cc07d9 100644
--- a/resources/assets/stylesheets/studip.scss
+++ b/resources/assets/stylesheets/studip.scss
@@ -103,7 +103,6 @@
@import "scss/wiki";
@import "scss/multi_person_search";
-
// Class for DOM elements that should only be visible to Screen readers
.sr-only {
border: 0;
diff --git a/resources/vue/components/ContentModulesEditTiles.vue b/resources/vue/components/ContentModulesEditTiles.vue
index 2edd43939683e3d5598cfac1ba08e7d0b4f8b9c5..70f7da5f3bb527f524b15a5e7839b42cc0033d06 100644
--- a/resources/vue/components/ContentModulesEditTiles.vue
+++ b/resources/vue/components/ContentModulesEditTiles.vue
@@ -109,7 +109,7 @@ export default {
flex-direction: row;
background-color: var(--white);
border-left: 1px solid var(--dark-gray-color-60);
- transition: all 500ms ease, border-left-color 300ms ease;
+ transition: all var(--transition-duration) ease;
&.visibility-visible {
border-left-color: var(--green);
> div {
@@ -126,7 +126,7 @@ export default {
display: flex;
flex-direction: column;
justify-content: space-between;
- transition: all 500ms ease, border-left-color 300ms ease;
+ transition: all var(--transition-duration) ease;
border-left: 10px solid var(--dark-gray-color-60);
min-height: 150px;
width: 100%;
diff --git a/resources/vue/components/responsive/ResponsiveNavigation.vue b/resources/vue/components/responsive/ResponsiveNavigation.vue
index eda2bfa86ee0ce6f27214f022ece89318c928482..8068addcf988facfc5b1f7dea199023786a17162 100644
--- a/resources/vue/components/responsive/ResponsiveNavigation.vue
+++ b/resources/vue/components/responsive/ResponsiveNavigation.vue
@@ -606,39 +606,37 @@ export default {
</script>
<style lang="scss">
-@media not prefers-reduced-motion {
- .slide-enter-active,
- .slide-leave-active {
- transition: all .3s ease;
- }
+.slide-enter-active,
+.slide-leave-active {
+ transition: all var(--transition-duration) ease;
+}
- .slide-enter-to,
- .slide-leave-from,
- .slide-leave {
- margin-left: -3px;
- }
+.slide-enter-to,
+.slide-leave-from,
+.slide-leave {
+ margin-left: -3px;
+}
- .slide-enter,
- .slide-enter-from,
- .slide-leave-to {
- margin-left: -50px;
- }
+.slide-enter,
+.slide-enter-from,
+.slide-leave-to {
+ margin-left: -50px;
+}
- .appear-enter-active,
- .appear-leave-active {
- transition: opacity .3s ease;
- }
+.appear-enter-active,
+.appear-leave-active {
+ transition: opacity var(--transition-duration) ease;
+}
- .appear-leave,
- .appear-leave-from,
- .appear-enter-to {
- opacity: 1;
- }
+.appear-leave,
+.appear-leave-from,
+.appear-enter-to {
+ opacity: 1;
+}
- .appear-enter,
- .appear-enter-from,
- .appear-leave-to {
- opacity: 0;
- }
+.appear-enter,
+.appear-enter-from,
+.appear-leave-to {
+ opacity: 0;
}
</style>