From 2241dc971248d44c1ec313e875a454957e9415df Mon Sep 17 00:00:00 2001
From: Jonathan Reinink <jonathan@reinink.ca>
Date: Fri, 27 Oct 2017 09:51:39 -0400
Subject: [PATCH] Add opacity documentation

Also adds a new "customized config" Blade component
---
 .../_partials/customized-config.blade.php     |  12 +++
 docs/source/styles/opacity.blade.md           | 101 ++++++++++++++++++
 docs/source/styles/opacity.md                 |  12 ---
 3 files changed, 113 insertions(+), 12 deletions(-)
 create mode 100644 docs/source/_partials/customized-config.blade.php
 create mode 100644 docs/source/styles/opacity.blade.md
 delete mode 100644 docs/source/styles/opacity.md

diff --git a/docs/source/_partials/customized-config.blade.php b/docs/source/_partials/customized-config.blade.php
new file mode 100644
index 000000000..760ccbcef
--- /dev/null
+++ b/docs/source/_partials/customized-config.blade.php
@@ -0,0 +1,12 @@
+<div class="border-2 border-smoke rounded mb-8">
+    <div class="md:flex">
+        <div class="flex-1 bg-smoke-lighter border-b-2 md:border-b-0 md:border-r-2 border-smoke">
+            <div class="px-4 pt-4 pb-2 bg-white font-semibold border-b-2 border-smoke-light text-smoke-darker">Default values</div>
+            <pre class="bg-smoke markdown language-js"><code>{{ $default }}</code></pre>
+        </div>
+        <div class="flex-1 bg-smoke-lighter">
+            <div class="px-4 pt-4 pb-2 bg-white font-semibold border-b-2 border-smoke-light text-smoke-darker">Customized example</div>
+            <pre class="bg-smoke markdown language-js"><code>{{ $customized }}</code></pre>
+        </div>
+    </div>
+</div>
diff --git a/docs/source/styles/opacity.blade.md b/docs/source/styles/opacity.blade.md
new file mode 100644
index 000000000..c26c9f001
--- /dev/null
+++ b/docs/source/styles/opacity.blade.md
@@ -0,0 +1,101 @@
+---
+extends: _layouts.markdown
+title: "Opacity"
+---
+
+# Opacity
+
+<div class="subnav">
+    <a class="subnav-link" href="#responsive">Responsive</a>
+    <a class="subnav-link" href="#customizing">Customizing</a>
+</div>
+
+Control the opacity of an element in Tailwind using the `.opacity` utilities.
+
+@component('_partials.code-sample')
+<div class="flex -mx-2">
+@foreach ($page->config['opacity'] as $name => $value)
+    <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 mx-2 opacity-{{ $name }}">.opacity-{{ $name }}</div>
+@endforeach
+</div>
+@slot('code')
+@foreach ($page->config['opacity'] as $name => $value)
+<div class="opacity-{{ $name }}">.opacity-{{ $name }}</div>
+@endforeach
+@endslot
+@endcomponent
+
+## Responsive
+
+To apply an opacity utility only at a specific breakpoint, add a `{breakpoint}:` prefix to the existing class name. For example, adding the class `md:opacity-50` to an element would apply the `opacity-50` utility at medium screen sizes and above.
+
+For more information about Tailwind's responsive design features, check out the [Responsive Design](/workflow/responsive-design) documentation.
+
+@component('_partials.responsive-code-sample')
+@slot('none')
+<div class="text-center">
+    <div class="px-4 py-2 bg-smoke opacity-100 w-24 h-24 rounded-pill inline-block"></div>
+</div>
+@endslot
+@slot('sm')
+<div class="text-center">
+    <div class="px-4 py-2 bg-smoke opacity-75 w-24 h-24 rounded-pill inline-block"></div>
+</div>
+@endslot
+@slot('md')
+<div class="text-center">
+    <div class="px-4 py-2 bg-smoke opacity-50 w-24 h-24 rounded-pill inline-block"></div>
+</div>
+@endslot
+@slot('lg')
+<div class="text-center">
+    <div class="px-4 py-2 bg-smoke opacity-25 w-24 h-24 rounded-pill inline-block"></div>
+</div>
+@endslot
+@slot('xl')
+<div class="text-center">
+    <div class="px-4 py-2 bg-smoke opacity-0 w-24 h-24 rounded-pill inline-block"></div>
+</div>
+@endslot
+@slot('code')
+<div class="none:opacity-100 sm:opacity-75 md:opacity-50 lg:opacity-25 xl:opacity-0 ...">
+    <!-- ... -->
+</div>
+@endslot
+@endcomponent
+
+## Customizing
+
+By default Tailwind provides a sensible numeric opacity scale. You can, of course, modify these values as needed. This is done in the `opacity` section of your Tailwind config.
+
+@component('_partials.customized-config')
+@slot('default')
+{
+  // ...
+  opacity: {
+    '0': '0',
+    '25': '.25',
+    '50': '.5',
+    '75': '.75',
+    '100': '1',
+  }
+@endslot
+@slot('customized')
+{
+  // ...
+  opacity: {
+    'none': '0',
+    '10': '.1',
+    '20': '.2',
+    '30': '.3',
+    '40': '.4',
+    '50': '.5',
+    '60': '.6',
+    '70': '.7',
+    '80': '.8',
+    '90': '.9',
+    '100': '1',
+  },
+}
+@endslot
+@endcomponent
diff --git a/docs/source/styles/opacity.md b/docs/source/styles/opacity.md
deleted file mode 100644
index 61910d60b..000000000
--- a/docs/source/styles/opacity.md
+++ /dev/null
@@ -1,12 +0,0 @@
----
-extends: _layouts.markdown
-title: "Opacity"
----
-
-# Opacity
-
-<div class="subnav">
-    <a class="subnav-link" href="#usage">Usage</a>
-    <a class="subnav-link" href="#responsive">Responsive</a>
-    <a class="subnav-link" href="#customizing">Customizing</a>
-</div>