Add focus and disabled state subsections #16

dwyl · Jun 2, 2017 · dcc2700 · dcc2700
1 parent 2a12296
commit dcc2700
Showing 1 changed file with 34 additions and 0 deletions.
diff --git a/components/form.html b/components/form.html
@@ -235,4 +235,38 @@ <h3>Static control</h3>
     </form>
   </div>
 
+  <h3>Focus state</h3>
+  <p class="mt0 f6 fw6 silver">EXAMPLE</p>
+  <form class="w-100 mt2">
+    <input type="text" class="pa2 br2 b--light-blue f6 w-60 shadow-2" placeholder="Demonstrative focus state">
+  </form>
+
+  <h3>Disabled state</h3>
+  <p class="mt0 f6 fw6 silver">EXAMPLE</p>
+  <form class="w-100 mt2">
+    <input type="text" class="pa2 br2 b--black-20 bg-black-10 f6 w-60" placeholder="Disabled input here..." disabled>
+  </form>
+
+  <h4>Disable fieldsets</h4>
+  <p class="mt0 f6 fw6 silver">EXAMPLE</p>
+  <fieldset class="w-100 mt2" disabled>
+    <div class="mv3">
+      <label class="fw7 f6" for="disabled-input">Disabled input</label>
+      <input id="disabled-input" type="text" class="db w-100 pa2 mt2 br2 b--black-20 f6 bg-black-10" placeholder="Disabled input">
+    </div>
+
+    <div class="mv3">
+      <label class="fw7 f6" for="disabled-select">Disabled select</label>
+      <select id="disabled-select" class="w-100 f6 h2 mv1 ba b--black-20 bg-black-10">
+        <option>Disabled select</option>
+        <option>Can't see this</option>
+      </select>
+    </div>
+
+    <div class="mv3">
+      <label class="f6">
+        <input type="checkbox"> Can't check this
+      </label>
+    </div>
+  </fieldset>
 </article>