feature(fade): Added fade-in and fade-out placeholders

superbrave · Jun 1, 2021 · a1ec5b2 · a1ec5b2
1 parent a807bb6
commit a1ec5b2
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 0 deletions.
diff --git a/src/scss/style.scss b/src/scss/style.scss
@@ -8,6 +8,7 @@
 @import 'utilities/contain';
 @import 'utilities/container';
 @import 'utilities/display';
+@import 'utilities/fade-in-out';
 @import 'utilities/flexembed';
 @import 'utilities/font-sizes';
 @import 'utilities/hidden';

diff --git a/src/scss/utilities/_fade-in-out.scss b/src/scss/utilities/_fade-in-out.scss
@@ -0,0 +1,17 @@
+// FadeInOut extends
+@each $breakpoint in map-keys($global-breakpoints) {
+  @include break($breakpoint) {
+    $responsive-modifier: breakpoint-infix($breakpoint, $global-breakpoints);
+
+    %hide-for-fade-in#{$responsive-modifier} {
+      opacity: 0;
+      visibility: hidden;
+      transition: opacity 0.2s, visibility 0.2s;
+    }
+
+    %show-for-fade-in#{$responsive-modifier} {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+}