refactor: refactoring transition usage

openedx · Dec 29, 2022 · 0016478 · 0016478
1 parent 48c66c5
commit 0016478
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 17 deletions.
diff --git a/src/Badge/Badge.scss b/src/Badge/Badge.scss
@@ -13,9 +13,9 @@
   text-align: center;
   white-space: nowrap;
   vertical-align: baseline;
+  transition: $badge-transition;
 
   @include border-radius($badge-border-radius);
-  @include transition($badge-transition);
 
   @at-root a#{&} {
     &:hover,

diff --git a/src/Button/Button.scss b/src/Button/Button.scss
@@ -25,9 +25,9 @@
   border: $btn-border-width solid var(--pgn-btn-border-color, transparent);
   color: var(--pgn-btn-color, #{$body-color});
   background-color: var(--pgn-btn-bg, transparent);
+  transition: $btn-transition;
 
   @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
-  @include transition($btn-transition);
 
   &:hover {
     color: var(--pgn-btn-hover-color, #{$body-color});

diff --git a/src/Carousel/carousel-bootstrap.scss b/src/Carousel/carousel-bootstrap.scss
@@ -21,8 +21,7 @@
   width: 100%;
   margin-right: -100%;
   backface-visibility: hidden;
-
-  @include transition($carousel-transition);
+  transition: $carousel-transition;
 }
 
 .carousel-item.active,
@@ -60,8 +59,7 @@
   .active.carousel-item-right {
     z-index: 0;
     opacity: 0;
-
-    @include transition(opacity 0s $carousel-transition);
+    transition: opacity 0s $carousel-transition;
   }
 }
 
@@ -83,8 +81,7 @@
   background: none;
   border: 0;
   opacity: $carousel-control-opacity;
-
-  @include transition($carousel-control-transition);
+  transition: $carousel-control-transition;
 
   @include hover-focus() {
     color: var(--pgn-carousel-control-color);
@@ -160,8 +157,7 @@
     border-top: $carousel-indicator-hit-area-height solid transparent;
     border-bottom: $carousel-indicator-hit-area-height solid transparent;
     opacity: .5;
-
-    @include transition($carousel-indicator-transition);
+    transition: $carousel-indicator-transition;
   }
 
   .active {

diff --git a/src/Form/_bootstrap-custom-forms.scss b/src/Form/_bootstrap-custom-forms.scss
@@ -203,8 +203,7 @@
       background-color: $custom-control-indicator-border-color;
       // stylelint-disable-next-line property-disallowed-list
       border-radius: $custom-switch-indicator-border-radius;
-
-      @include transition(transform .15s ease-in-out, $custom-forms-transition);
+      transition: transform .15s ease-in-out, $custom-forms-transition;
     }
   }
 
@@ -429,11 +428,11 @@
     margin-top: calc((#{$custom-range-track-height} - #{$custom-range-thumb-height}) * .5); // Webkit specific
     border: $custom-range-thumb-border;
     appearance: none;
+    transition: $custom-forms-transition;
 
     @include gradient-bg($custom-range-thumb-bg);
     @include border-radius($custom-range-thumb-border-radius);
     @include box-shadow($custom-range-thumb-box-shadow);
-    @include transition($custom-forms-transition);
 
     &:active {
       @include gradient-bg($custom-range-thumb-active-bg);
@@ -457,11 +456,11 @@
     height: $custom-range-thumb-height;
     border: $custom-range-thumb-border;
     appearance: none;
+    transition: $custom-forms-transition;
 
     @include gradient-bg($custom-range-thumb-bg);
     @include border-radius($custom-range-thumb-border-radius);
     @include box-shadow($custom-range-thumb-box-shadow);
-    @include transition($custom-forms-transition);
 
     &:active {
       @include gradient-bg($custom-range-thumb-active-bg);
@@ -488,11 +487,11 @@
     margin-left: $custom-range-thumb-focus-box-shadow-width;  // Workaround that overflowed box-shadow is hidden.
     border: $custom-range-thumb-border;
     appearance: none;
+    transition: $custom-forms-transition;
 
     @include gradient-bg($custom-range-thumb-bg);
     @include border-radius($custom-range-thumb-border-radius);
     @include box-shadow($custom-range-thumb-box-shadow);
-    @include transition($custom-forms-transition);
 
     &:active {
       @include gradient-bg($custom-range-thumb-active-bg);
@@ -550,5 +549,5 @@
 .custom-control-label::before,
 .custom-file-label,
 .custom-select {
-  @include transition($custom-forms-transition);
+  transition: $custom-forms-transition;
 }
diff --git a/src/Form/_bootstrap-forms.scss b/src/Form/_bootstrap-forms.scss
@@ -20,11 +20,11 @@
   background-color: $input-bg;
   background-clip: padding-box;
   border: $input-border-width solid $input-border-color;
+  transition: $input-transition;
 
   // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
   @include border-radius($input-border-radius, 0);
   @include box-shadow($input-box-shadow);
-  @include transition($input-transition);
 
   // Unstyle the caret on `<select>`s in IE10+.
   &::-ms-expand {