fix(Mixins.Loading): added the ability to provide a custom path

salte-io · Aug 21, 2021 · da0b3ed · da0b3ed
1 parent 2b752d5
commit da0b3ed
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 15 deletions.
diff --git a/stories/Button.scss b/stories/Button.scss
@@ -29,6 +29,7 @@ a.button {
 
 .button {
   @include transition(color, background-color);
+  @include loading(false, '> .content');
 
   display: inline-block;
   white-space: nowrap;
@@ -62,14 +63,4 @@ a.button {
   &.disabled {
     @include disabled();
   }
-
-  > .content {
-    @include transition(opacity);
-
-    opacity: 1;
-  }
-
-  &.loading > .content {
-    opacity: 0;
-  }
 }
diff --git a/stories/_mixins.scss b/stories/_mixins.scss
@@ -35,23 +35,23 @@
   transition-property: $properties;
 }
 
-@mixin loading($visibleWhenLoading: false) {
+@mixin loading($visibleWhenLoading: false, $path: '') {
   @include transition(opacity);
 
   @if $visibleWhenLoading {
-    &:not(.loading) {
+    &:not(.loading) #{$path} {
       opacity: 0;
     }
 
-    &.loading {
+    &.loading #{$path} {
       opacity: 1;
     }
   } @else {
-    &:not(.loading) {
+    &:not(.loading) #{$path} {
       opacity: 1;
     }
 
-    &.loading {
+    &.loading #{$path} {
       opacity: 0;
     }
   }