fix: transitions unify to use @media: prefers-reduced-motion

tabler · Oct 24, 2021 · d1e2282 · d1e2282
1 parent 52fe2d7
commit d1e2282
Show file tree

Hide file tree

Showing 15 changed files with 31 additions and 29 deletions.
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
@@ -259,7 +259,7 @@ $container-variations: (
 
 $content-padding-y: 1.25rem !default;
 
-
+// Acpect ratios
 $aspect-ratios: (
   "1x1": 100%,
   "4x3": calc(3 / 4 * 100%),
@@ -270,7 +270,10 @@ $aspect-ratios: (
   "9x21": calc(21 / 9 * 100%),
 ) !default;
 
-// overlay
+// Transitions
+$transition-time: .3s !default;
+
+// Overlay
 $overlay-gradient: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .6) 100%) !default;
 
 //accordion
@@ -308,7 +311,6 @@ $badge-font-weight: $font-weight-medium !default;
 $badge-empty-size: .5rem !default;
 
 //buttons
-$input-color: $body-color !default;
 $input-btn-line-height: $line-height-base !default;
 $input-btn-font-size: $font-size-base !default;
 $input-btn-padding-y: .5rem - .0625rem !default;

diff --git a/src/scss/layout/_navbar.scss b/src/scss/layout/_navbar.scss
@@ -291,7 +291,7 @@ Navbar toggler
   width: 1.25em;
   background: currentColor;
   border-radius: 10px;
-  transition: $navbar-toggler-animation-time $navbar-toggler-animation-time top, $navbar-toggler-animation-time $navbar-toggler-animation-time bottom, $navbar-toggler-animation-time transform, 0s $navbar-toggler-animation-time opacity;
+  @include transition(top $navbar-toggler-animation-time $navbar-toggler-animation-time, bottom $navbar-toggler-animation-time $navbar-toggler-animation-time, transform $navbar-toggler-animation-time, opacity 0s $navbar-toggler-animation-time);
   position: relative;
 
   &:before,
@@ -304,7 +304,7 @@ Navbar toggler
     background: inherit;
     position: absolute;
     left: 0;
-    transition: inherit;
+    @include transition(inherit);
   }
 
   &:before {
@@ -317,7 +317,7 @@ Navbar toggler
 
   .navbar-toggler[aria-expanded="true"] & {
     transform: rotate(45deg);
-    transition: .3s top, .3s bottom, .3s .3s transform, 0s .3s opacity;
+    @include transition(top $transition-time, bottom $transition-time, transform $transition-time $transition-time, opacity 0s $transition-time);
 
     &:before {
       top: 0;
@@ -390,7 +390,7 @@ Navbar vertical
             bottom: 0;
             z-index: $zindex-fixed;
             align-items: flex-start;
-            transition: .3s transform;
+            @include transition(transform $transition-time);
             overflow-x: auto;
 
             &.navbar-right {

diff --git a/src/scss/mixins/_mixins.scss b/src/scss/mixins/_mixins.scss
@@ -17,7 +17,7 @@
   &::-webkit-scrollbar {
     width: 6px;
     height: 6px;
-    transition: .3s background;
+    @include transition(background $transition-time);
   }
 
   &::-webkit-scrollbar-thumb {

diff --git a/src/scss/ui/_avatars.scss b/src/scss/ui/_avatars.scss
@@ -89,7 +89,7 @@
   border: 1px dashed $border-color;
   background: $form-check-input-bg;
   flex-direction: column;
-  transition: .3s color, .3s background-color;
+  @include transition(color $transition-time, background-color $transition-time);
 
   svg {
     width: 1.5rem;

diff --git a/src/scss/ui/_calendars.scss b/src/scss/ui/_calendars.scss
@@ -55,7 +55,7 @@
     border: 1px solid transparent;
     border-radius: $border-radius-pill;
     outline: 0;
-    transition: background .3s, border .3s, box-shadow .32s, color .3s;
+    @include transition(background $transition-time, border $transition-time, box-shadow .32s, color $transition-time);
 
     &:hover {
       color: $primary;

diff --git a/src/scss/ui/_cards.scss b/src/scss/ui/_cards.scss
@@ -21,7 +21,7 @@
 
   @at-root a#{&} {
     color: inherit;
-    transition: .3s box-shadow;
+    @include transition(box-shadow $transition-time);
 
     &:hover {
       text-decoration: none;
@@ -94,7 +94,7 @@
   justify-content: center;
   padding: $card-spacer-y $card-spacer-x;
   text-align: center;
-  transition: .3s background;
+  @include transition(background $transition-time);
   border-top: 1px solid $border-color;
   flex: 1;
   color: inherit;

diff --git a/src/scss/ui/_forms.scss b/src/scss/ui/_forms.scss
@@ -153,7 +153,7 @@ Form help
   user-select: none;
   background: $min-white;
   border-radius: $border-radius-pill;
-  transition: .3s background-color, .3s color;
+  @include transition(background-color $transition-time, color $transition-time);
 
   &:hover,
   &[aria-describedby] {
@@ -199,7 +199,7 @@ Input group
 
   .input-group-text {
     background: transparent;
-    transition: $input-transition;
+    @include transition($input-transition);
 
     &:first-child {
       padding-right: 0;

diff --git a/src/scss/ui/_lists.scss b/src/scss/ui/_lists.scss
@@ -34,7 +34,7 @@
 .list-group-hoverable {
   .list-group-item-actions {
     opacity: 0;
-    transition: .3s opacity;
+    @include transition(opacity $transition-time);
   }
 
   .list-group-item:hover .list-group-item-actions,

diff --git a/src/scss/ui/_nav.scss b/src/scss/ui/_nav.scss
@@ -63,14 +63,14 @@
 
 .nav-link {
   display: flex;
-  transition: .3s color;
+  @include transition(color $transition-time);
   align-items: center;
 }
 
 .nav-link-toggle {
   margin-left: auto;
   padding: 0 .25rem;
-  transition: .3s transform;
+  @include transition(transform $transition-time);
   @include caret();
 
   &:after {

diff --git a/src/scss/ui/_switch-icon.scss b/src/scss/ui/_switch-icon.scss
@@ -57,15 +57,15 @@
 .switch-icon-fade {
   .switch-icon-a,
   .switch-icon-b {
-    transition: opacity .5s;
+    @include transition(opacity .5s);
   }
 }
 
 // Scale variant
 .switch-icon-scale {
   .switch-icon-a,
   .switch-icon-b {
-    transition: opacity .5s, transform .0s .5s;
+    @include transition(opacity .5s, transform .0s .5s);
   }
 
   .switch-icon-b {
@@ -75,7 +75,7 @@
   &.active {
     .switch-icon-a,
     .switch-icon-b {
-      transition: opacity .0s, transform .5s;
+      @include transition(opacity .0s, transform .5s);
     }
 
     .switch-icon-b {
@@ -92,7 +92,7 @@
   .switch-icon-b {
     backface-visibility: hidden;
     transform-style: preserve-3d;
-    transition: opacity 0s .2s, transform .4s ease-in-out;
+    @include transition(opacity 0s .2s, transform .4s ease-in-out);
   }
 
   .switch-icon-a {
@@ -127,7 +127,7 @@
 
   .switch-icon-a,
   .switch-icon-b {
-    transition: opacity .3s, transform .3s;
+    @include transition(opacity $transition-time, transform $transition-time);
   }
 
   .switch-icon-a {

diff --git a/src/scss/ui/forms/_form-check.scss b/src/scss/ui/forms/_form-check.scss
@@ -14,7 +14,7 @@ Form check
   margin-top: ($form-check-min-height - $form-check-input-width) * .5;
 
   .form-switch & {
-    transition: .3s background-color, .3s background-position;
+    @include transition(background-color$transition-time, background-position $transition-time);
   }
 }
 

diff --git a/src/scss/ui/forms/_form-colorinput.scss b/src/scss/ui/forms/_form-colorinput.scss
@@ -34,7 +34,7 @@ Color Input
     background: no-repeat center center/$form-check-input-checked-bg-size;
     background-image: escape-svg($form-check-input-checked-bg-image);
     opacity: 0;
-    transition: .3s opacity;
+    @include transition(opacity $transition-time);
 
     .form-colorinput-input:checked ~ & {
       opacity: 1;

diff --git a/src/scss/ui/forms/_form-imagecheck.scss b/src/scss/ui/forms/_form-imagecheck.scss
@@ -45,7 +45,7 @@ Image check
     background: $white;
     border: 1px solid $border-color;
     border-radius: 3px;
-    transition: .3s opacity;
+    @include transition(opacity $transition-time);
 
     .form-imagecheck-input:checked ~ & {
       background-color: $form-check-input-checked-bg-color;
@@ -62,7 +62,7 @@ Image check
   max-width: 100%;
   display: block;
   opacity: .64;
-  transition: .3s opacity;
+  @include transition(opacity $transition-time);
 
   &:first-child {
     border-top-left-radius: 2px;
@@ -86,7 +86,7 @@ Image check
   font-size: $font-size-sm;
   color: $text-muted;
   text-align: center;
-  transition: .3s color;
+  @include transition(color $transition-time);
 
   .form-imagecheck:hover &,
   .form-imagecheck-input:focus ~ .form-imagecheck-figure &,

diff --git a/src/scss/ui/forms/_form-selectgroup.scss b/src/scss/ui/forms/_form-selectgroup.scss
@@ -43,7 +43,7 @@ Select group
   user-select: none;
   border: 1px solid $input-border-color;
   border-radius: 3px;
-  transition: border-color .3s, background .3s, color .3s;
+  @include transition(border-color $transition-time, background $transition-time, color $transition-time);
 
   .icon:only-child {
     margin: 0 -.25rem;

diff --git a/src/scss/vendor/_litepicker.scss b/src/scss/vendor/_litepicker.scss
@@ -41,7 +41,7 @@
     .day-item {
       cursor: pointer !important;
       padding: .5rem 0 !important;
-      transition: .3s color, .3s background-color, .3s border-color;
+      @include transition(color $transition-time, background-color $transition-time, border-color $transition-time);
     }
   }