Added scrollable ability.

sjohnsonaz · Aug 2, 2018 · 88830d9 · 88830d9
1 parent 93d043d
commit 88830d9
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 0 deletions.
diff --git a/src/styl/abilities/scrollable.styl b/src/styl/abilities/scrollable.styl
@@ -0,0 +1,34 @@
+.scrollable
+    &:not([data-scroll])
+    &[data-scroll="auto"]
+        overflow: auto
+
+    &[data-scroll="both"]
+        overflow: scroll
+
+    &[data-scroll="none"]
+        overflow: hidden
+
+    &[data-scroll="x"]
+        overflow-x: auto
+
+    &[data-scroll="y"]
+        overflow-y: auto
+
+    &[data-scroll="x-always"]
+        overflow-x: scroll
+
+    &[data-scroll="y-always"]
+        overflow-y: scroll
+
+    &[data-scroll="x-never"]
+        overflow-x: hidden
+
+    &[data-scroll="y-never"]
+        overflow-y: hidden
+
+.scrollable-y
+    overflow-y: auto
+
+.scrollable-x
+    overflow-x: auto
diff --git a/src/styl/main.styl b/src/styl/main.styl
@@ -11,6 +11,7 @@
 @require "core/align.styl";
 @require "abilities/closeable.styl";
 @require "abilities/fillable.styl";
+@require "abilities/scrollable.styl";
 @require "animation/animation.styl";
 @require "animation/transition.styl";
 @require "badge/badge.styl";

diff --git a/test/views/abilities.hbs b/test/views/abilities.hbs
@@ -24,5 +24,9 @@
                 </div>
             </div>
         </div>
+
+        <h3>Scrollable</h3>
+        <div class="scrollable" id="scrollable" data-scroll="y">
+        </div>
     </div>
 </section>