From c3b42a6499e23be507fe348694417869948ba5a6 Mon Sep 17 00:00:00 2001
From: Jonathan Reinink <jonathan@reinink.ca>
Date: Mon, 21 Aug 2017 11:22:02 -0400
Subject: [PATCH] Add .mask and .overflow-scroll-y utilities, and overflow
 docs.

---
 docs/source/_layouts/master.blade.php |  1 +
 docs/source/overflow.md               | 50 +++++++++++++++++++++++++++
 src/utilities/overflow.less           |  9 ++---
 3 files changed, 56 insertions(+), 4 deletions(-)
 create mode 100644 docs/source/overflow.md

diff --git a/docs/source/_layouts/master.blade.php b/docs/source/_layouts/master.blade.php
index 906f62195..63a3fcd2a 100644
--- a/docs/source/_layouts/master.blade.php
+++ b/docs/source/_layouts/master.blade.php
@@ -57,6 +57,7 @@
                                 <li class="mb-2"><a class="{{ $page->getUrl() === '/flexbox' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/flexbox">Flexbox</a></li>
                                 <li class="mb-2"><a class="{{ $page->getUrl() === '/grid' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/grid">Grid</a></li>
                                 <li class="mb-2"><a class="{{ $page->getUrl() === '/images' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/images">Images</a></li>
+                                <li class="mb-2"><a class="{{ $page->getUrl() === '/overflow' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/overflow">Overflow</a></li>
                                 <li class="mb-2"><a class="{{ $page->getUrl() === '/position' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/position">Position</a></li>
                                 <li class="mb-2"><a class="{{ $page->getUrl() === '/shadows' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/shadows">Shadows</a></li>
                                 <li class="mb-2"><a class="{{ $page->getUrl() === '/spacing' ? 'text-dark text-medium' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/spacing">Spacing</a></li>
diff --git a/docs/source/overflow.md b/docs/source/overflow.md
new file mode 100644
index 000000000..2f42e7317
--- /dev/null
+++ b/docs/source/overflow.md
@@ -0,0 +1,50 @@
+---
+extends: _layouts.markdown
+title: "Overflow"
+---
+
+# Overflow
+
+The overflow utilities are simply `overflow` property helpers.
+
+```html
+<div class="overflow-auto"></div>
+<div class="overflow-hidden"></div>
+<div class="overflow-visible"></div>
+<div class="overflow-scroll"></div>
+<div class="overflow-scroll-x"></div>
+<div class="overflow-scroll-y"></div>
+<div class="mask"></div>
+```
+
+```less
+
+
+div {
+  .overflow-auto;
+  .overflow-hidden;
+  .overflow-visible;
+  .overflow-scroll;
+  .overflow-scroll-x;
+  .overflow-scroll-y;
+  .mask;
+}
+```
+
+Note that `.overflow-hidden` is available in a shorthand called `.mask`.
+
+## Responsive
+
+The display utitlies can also be used with <a href="/responsive">responsive</a> prefixes:
+
+```html
+<div class="overflow-auto sm:overflow-hidden md:overflow-visible lg:overflow-scroll"></div>
+```
+
+```less
+div {
+  .screen(lg, {
+    .overflow-scroll;
+  });
+}
+```
diff --git a/src/utilities/overflow.less b/src/utilities/overflow.less
index c31350e98..cb6ff923b 100644
--- a/src/utilities/overflow.less
+++ b/src/utilities/overflow.less
@@ -1,16 +1,17 @@
 .overflow-auto { overflow: auto; }
 .overflow-hidden { overflow: hidden; }
+.mask { overflow: hidden; }
 .overflow-visible { overflow: visible; }
 .overflow-scroll { overflow: scroll; }
-.overflow-scroll-x {
-  overflow-x: auto;
-  -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057
-}
+.overflow-scroll-x { overflow-x: auto; -ms-overflow-style: -ms-autohiding-scrollbar; }
+.overflow-scroll-y { overflow-y: auto; -ms-overflow-style: -ms-autohiding-scrollbar; }
 
 .responsive({
   &overflow-auto { .overflow-auto; }
   &overflow-hidden { .overflow-hidden; }
+  &mask { .mask; }
   &overflow-visible { .overflow-visible; }
   &overflow-scroll { .overflow-scroll; }
   &overflow-scroll-x { .overflow-scroll-x; }
+  &overflow-scroll-y { .overflow-scroll-y; }
 });