From 7d8559b8fd811e56bf41b950eb0abcd2e05033d7 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Sun, 6 Aug 2017 08:13:33 -0400
Subject: [PATCH] Add shadow utilities

---
 src/generators.less         |  1 +
 src/generators/shadows.less | 16 ++++++++++++++++
 src/utilities.less          |  1 +
 src/utilities/shadows.less  |  9 +++++++++
 4 files changed, 27 insertions(+)
 create mode 100644 src/generators/shadows.less
 create mode 100644 src/utilities/shadows.less

diff --git a/src/generators.less b/src/generators.less
index 959d466ab..5d65c8762 100644
--- a/src/generators.less
+++ b/src/generators.less
@@ -8,6 +8,7 @@
 @import "generators/border-widths";
 @import "generators/constrain";
 @import "generators/grid";
+@import "generators/shadows";
 @import "generators/sizing";
 @import "generators/spacing-padding";
 @import "generators/spacing-margin";
diff --git a/src/generators/shadows.less b/src/generators/shadows.less
new file mode 100644
index 000000000..250fae0df
--- /dev/null
+++ b/src/generators/shadows.less
@@ -0,0 +1,16 @@
+.define-shadow-utilities(@variants) {
+  .generate-utility-variants('shadow'; @variants; {
+    box-shadow: extract(@__variant-value, 2);
+  });
+}
+
+.define-shadow-utilities(@variants; none) {
+  .define-shadow-utilities(@variants);
+}
+
+.define-shadow-utilities(@variants; @screens) when not (@screens = none) {
+  .define-shadow-utilities(@variants);
+  .generate-responsive-utility-variants('shadow'; @variants; @screens; {
+    box-shadow: extract(@__variant-value, 2);
+  });
+}
diff --git a/src/utilities.less b/src/utilities.less
index 9b6648adf..8aae6aa05 100644
--- a/src/utilities.less
+++ b/src/utilities.less
@@ -11,6 +11,7 @@
 @import "utilities/images";
 @import "utilities/misc";
 @import "utilities/position";
+@import "utilities/shadows";
 @import "utilities/sizing";
 @import "utilities/spacing";
 @import "utilities/text";
diff --git a/src/utilities/shadows.less b/src/utilities/shadows.less
new file mode 100644
index 000000000..ddb5afd97
--- /dev/null
+++ b/src/utilities/shadows.less
@@ -0,0 +1,9 @@
+@shadows:
+  '1' ~"0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)",
+  '2' ~"0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)",
+  '3' ~"0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)",
+  '4' ~"0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)",
+  '5' ~"0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22)",
+;
+
+.define-shadow-utilities(@shadows; @screens);