Add Fadable component

2017-02-25 23:34:25 +01:00
parent 5e57c9caae
commit 5f20c00bec
9 changed files with 163 additions and 46 deletions
--- a/styles/components/fadeable.css
+++ b/styles/components/fadeable.css
@@ -0,0 +1,23 @@
+.fadable {
+  position: relative;
+
+  &::after {
+    transition: opacity 0.2s cubic-bezier(0.54, 0, 0.28, 1);
+    content: '';
+    display: block;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    opacity: 0;
+    background: var(--color-gray-dark);
+    pointer-events: none;
+  }
+
+  &.is-faded {
+    &::after {
+      opacity: 1;
+    }
+  }
+}