From 627605fdfd8d5ab935fd9624a9d6baa577aba746 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Thu, 19 Oct 2017 17:41:35 -0400
Subject: [PATCH] Sketch out custom select form example

---
 docs/source/styles/forms.blade.md | 33 +++++++++++++++++++++++++++++++
 docs/source/styles/forms.md       | 18 -----------------
 2 files changed, 33 insertions(+), 18 deletions(-)
 create mode 100644 docs/source/styles/forms.blade.md
 delete mode 100644 docs/source/styles/forms.md

diff --git a/docs/source/styles/forms.blade.md b/docs/source/styles/forms.blade.md
new file mode 100644
index 000000000..8810bd344
--- /dev/null
+++ b/docs/source/styles/forms.blade.md
@@ -0,0 +1,33 @@
+---
+extends: _layouts.markdown
+title: "Forms"
+---
+
+# Forms
+
+<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>
+
+Include documentation around:
+
+- `input-reset` helper
+- Creating input groups/custom selects and using `pointer-events-none`
+- The placeholder text styling in our base styles
+
+### Custom Select
+
+@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center'])
+<div class="inline-block relative w-64">
+    <select class="block input-reset w-full bg-white border border-smoke-dark hover:border-slate-light px-4 py-2 pr-8 rounded shadow">
+        <option>Really long option that will likely overlap the chevron</option>
+        <option>Option 2</option>
+        <option>Option 3</option>
+    </select>
+    <div class="pointer-events-none absolute pin-y pin-r flex items-center px-2 text-slate">
+        <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
+    </div>
+</div>
+@endcomponent
diff --git a/docs/source/styles/forms.md b/docs/source/styles/forms.md
deleted file mode 100644
index 809b3f084..000000000
--- a/docs/source/styles/forms.md
+++ /dev/null
@@ -1,18 +0,0 @@
----
-extends: _layouts.markdown
-title: "Forms"
----
-
-# Forms
-
-<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>
-
-Include documentation around:
-
-- `input-reset` helper
-- Creating input groups/custom selects and using `pointer-events-none`
-- The placeholder text styling in our base styles