From b7f03e685bc7e9c55ec11c768a7bee390de885c8 Mon Sep 17 00:00:00 2001
From: Cleop <cleo.pearson@hotmail.co.uk>
Date: Fri, 26 May 2017 10:44:31 +0100
Subject: [PATCH] Creates form section, #16

---
 web/templates/page/index.html.eex | 261 ++++++++++++++++++++++++++++--
 1 file changed, 249 insertions(+), 12 deletions(-)

diff --git a/web/templates/page/index.html.eex b/web/templates/page/index.html.eex
index 9d5c378..40ec72d 100644
--- a/web/templates/page/index.html.eex
+++ b/web/templates/page/index.html.eex
@@ -1,15 +1,252 @@
-<section class="sans-serif w-50 center">
+<!-- BUTTONS -->
+<section class="sans-serif w-70 center mb5">
   <p class="f4">
     Welcome to the Tachyons Bootstrap Standard Components Library.
     This resource has been created to showcase the potential of
     <a href="http://tachyons.io/" class="link underline green hover-blue">Tachyons</a>, functional css.
     As well as to provide a selection of useful components for people to use.
   </p>
+</section>
+
+<!-- FORMS  -->
+<article class="sans-serif w-70 center">
+  <h1 class="bb b--black-10">Forms</h1>
+  <h2>Basic example</h2>
+  <div class="ba br2 b--black-10 shadow-1 pa3">
+    <p class="mt0 f6 fw6 silver">EXAMPLE</p>
+    <form>
+      <div class="mv3">
+        <label class="fw7 f6" for="exampleInputEmail1">Email address</label>
+        <input type="email" class="db w-100 pa2 mt2 br2 b--black-20 f6" id="exampleInputEmail1" placeholder="Email">
+      </div>
+      <div class="mv3">
+        <label class="fw7 f6" for="exampleInputPassword1">Password</label>
+        <input type="password" class="db w-100 pa2 mt2 br2 b--black-20 f6" id="exampleInputPassword1" placeholder="Password">
+      </div>
+      <div class="mv3">
+        <label class="fw7 f6" for="exampleInputFile">File input</label>
+        <input class="mt2 f7" type="file" id="exampleInputFile">
+        <p class="gray f6 mt2">Example block-level help text here.</p>
+      </div>
+      <div class="mv3">
+        <label class="f6 pointer">
+          <input type="checkbox"> Check me out
+        </label>
+      </div>
+      <button type="submit" class="pointer br2 ba b--black-20 bg-white pa2 ml1 mv1 bg-animate hover-bg-light-gray f6">Submit</button>
+    </form>
+  </div>
+  <h2>Inline example</h2>
+  <div class="ba br2 b--black-10 shadow-1 pa3">
+    <p class="mt0 f6 fw6 silver">EXAMPLE</p>
+    <form>
+      <div class="mv3 dib">
+        <label class="fw7 f6" for="exampleInputName1">Name</label>
+        <input type="text" class="pa2 mt2 br2 b--black-20 f6" id="exampleInputName1" placeholder="Jane Doe">
+      </div>
+      <div class="mv3 dib">
+        <label class="fw7 f6" for="exampleInputEmail2">Email</label>
+        <input type="email" class="pa2 mt2 br2 b--black-20 f6" id="exampleInputEmail2" placeholder="jane.doe@example.com">
+      </div>
+      <button type="submit" class="pointer br2 ba b--black-20 bg-white pa2 ml1 mv1 bg-animate hover-bg-light-gray f6">Send invitation</button>
+    </form>
+  </div>
+  <div class="ba br2 b--black-10 shadow-1 pa3 mv3">
+    <p class="mt0 f6 fw6 silver">EXAMPLE</p>
+    <form>
+      <div class="mv3 dib">
+        <label class="absolute pa0 ma0 o-0" for="exampleInputEmail3">Email address</label>
+        <input type="email" class="pa2 mt2 br2 b--black-20 f6" id="exampleInputEmail3" placeholder="Email">
+      </div>
+      <div class="mv3 dib">
+        <label class="absolute pa0 ma0 o-0" for="exampleInputPassword3">Password</label>
+        <input type="password" class="pa2 mt2 br2 b--black-20 f6" id="exampleInputPassword3" placeholder="Password">
+      </div>
+      <div class="mv3 dib">
+        <label class="f6 pointer">
+          <input type="checkbox"> Remember me
+        </label>
+      </div>
+      <button type="submit" class="pointer br2 ba b--black-20 bg-white pa2 ml1 mv1 bg-animate hover-bg-light-gray f6">Sign in</button>
+    </form>
+  </div>
+  <div class="ba br2 b--black-10 shadow-1 pa3 mv3">
+    <p class="mt0 f6 fw6 silver">EXAMPLE</p>
+    <form class="db">
+      <div class="mv3 dib ">
+        <label class="absolute pa0 ma0 o-0" for="exampleInputAmount">Amount (in dollars)</label>
+        <div class=" relative mv3 dt dib">
+          <div class="bg-light-gray b--black-20 bb bt bl pa2 br2 br--left dtc dib">$</div>
+          <input type="text" class="dtc pa2 b--black-20 dib bt bb bw1 w-100" id="exampleInputAmount" placeholder="Amount">
+          <div class="bg-light-gray b--black-20 ba bl-0 pa2 br2 br--right dtc dib">.00</div>
+        </div>
+      </div>
+      <button type="submit" class=" dib pointer br2 ba b--navy bg-dark-blue white pa2 ml1 mt4 bg-animate hover-bg-navy v-top">Transfer cash</button>
+    </form>
+  </div>
+
+  <h2>Horizontal example</h2>
+  <div class="ba br2 b--black-10 shadow-1 pa3 mv3">
+    <p class="mt0 f6 fw6 silver">EXAMPLE</p>
+    <form>
+      <div class="mv3">
+        <label for="inputEmail3" class="fw7 f6">Email</label>
+        <input type="email" class="db w-100 pa2 mt2 br2 b--black-20 f6" id="inputEmail3" placeholder="Email">
+      </div>
+      <div class="mv3">
+        <label for="inputPassword3" class="fw7 f6">Password</label>
+        <input type="password" class="db w-100 pa2 mt2 br2 b--black-20 f6" id="inputPassword3" placeholder="Password">
+      </div>
+      <label class="f6 pointer">
+        <input type="checkbox"> Remember me
+      </label>
+      <div class="form-group">
+          <button type="submit" class="pointer br2 ba b--black-20 bg-white pa2 mv3 bg-animate hover-bg-light-gray f6">Sign in</button>
+      </div>
+    </form>
+  </div>
+
+  <h2>Supported controls</h2>
+  <h3>Inputs</h3>
+
+  <div class="ba br2 b--black-10 shadow-1 pa3 mv3">
+    <p class="mt0 f6 fw6 silver">EXAMPLE</p>
+    <input type="text" class="db w-100 pa2 mt2 br2 b--black-20 f6" placeholder="Text input">
+  </div>
+
+  <h3>Textarea</h3>
+  <div class="ba br2 b--black-10 shadow-1 pa3 mv3">
+    <p class="mt0 f6 fw6 silver">EXAMPLE</p>
+    <textarea class="db w-100 pa2 mt2 br2 b--black-20 f6" rows="3" placeholder="Textarea"></textarea>
+  </div>
+
+  <h3>Checkboxes and radios</h3>
+  <div class="ba br2 b--black-10 shadow-1 pa3 mv3">
+    <p class="mt0 f6 fw6 silver">EXAMPLE</p>
+    <div class="mv2 f6">
+      <label>
+        <input type="checkbox" value="">
+        Option one is this and that&mdash;be sure to include why it's great
+      </label>
+    </div>
+    <div class="mv2 f6">
+      <label>
+        <input type="checkbox" value="" class="cursor-not-allowed" disabled>
+        Option two is disabled
+      </label>
+    </div>
+
+    <div class="mv2 f6">
+      <label>
+        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
+        Option one is this and that&mdash;be sure to include why it's great
+      </label>
+    </div>
+    <div class="mv2 f6">
+      <label>
+        <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
+        Option two can be something else and selecting it will deselect option one
+      </label>
+    </div>
+    <div class="mv2 f6">
+      <label>
+        <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" class="cursor-not-allowed" disabled>
+        Option three is disabled
+      </label>
+    </div>
+  </div>
+
+  <h3>Inline checkboxes and radios</h3>
+  <div class="ba br2 b--black-10 shadow-1 pa3 mv3">
+    <p class="mt0 f6 fw6 silver">EXAMPLE</p>
+    <form>
+      <label class="dib">
+        <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
+      </label>
+      <label class="dib">
+        <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
+      </label>
+      <label class="dib">
+        <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
+      </label>
+    </form>
+    <br>
+    <form>
+      <label>
+        <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
+      </label>
+      <label>
+        <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
+      </label>
+      <label>
+        <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
+      </label>
+    </form>
+  </div>
+
+  <h3>Checkboxes and radios without label text</h3>
+  <div class="ba br2 b--black-10 shadow-1 pa3 mv3">
+    <p class="mt0 f6 fw6 silver">EXAMPLE</p>
+    <div class="db mv3">
+      <label>
+        <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
+      </label>
+    </div>
+    <div class="db mv3">
+      <label>
+        <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
+      </label>
+    </div>
+  </div>
+
+  <h3>Selects</h3>
+  <div class="ba br2 b--black-10 shadow-1 pa3 mv3">
+    <p class="mt0 f6 fw6 silver">EXAMPLE</p>
+    <select class="w-100 f6 h2 bg-white ma1 b--black-20 ">
+      <option>1</option>
+      <option>2</option>
+      <option>3</option>
+      <option>4</option>
+      <option>5</option>
+    </select>
+  </div>
 
+  <div class="ba br2 b--black-10 shadow-1 pa3 mv3">
+    <p class="mt0 f6 fw6 silver">EXAMPLE</p>
+    <select multiple class="w-100 br2 b--black-20 ph3 pv1 f6">
+      <option>1</option>
+      <option>2</option>
+      <option>3</option>
+      <option>4</option>
+      <option>5</option>
+    </select>
+  </div>
+
+  <h3>Static control</h3>
+  <div class="ba br2 b--black-10 shadow-1 pa3 mv3">
+    <p class="mt0 f6 fw6 silver">EXAMPLE</p>
+    <form class="w-100">
+        <label class="fw7 f6 tr w-20 dib mr2">Email</label>
+        <p class="f6 dib">email@example.com</p>
+        <br>
+        <label for="inputPassword" class="fw7 f6 tr w-20 dib mr2">Password</label>
+        <div class="w-70 mt2">
+          <input type="password" class="pa2 br2 b--black-20 f6 w-100" id="inputPassword" placeholder="Password">
+        </div>
+    </form>
+  </div>
+
+  <div class="ba br2 b--black-10 shadow-1 pa3 mv3">
+    <p class="mt0 f6 fw6 silver">EXAMPLE</p>
+  </div>
+
+</article>
+
+<article class="sans-serif w-70 center mb5">
   <h1 class="bb b--black-10">Buttons</h1>
   <h2>Button tags</h2>
 
-  <button type="button" class="pointer br2 ba b--black-30 bg-white pa2 ml1 mv1 bg-animate hover-bg-light-gray">Default</button>
+  <button type="button" class="pointer br2 ba b--black-20 bg-white pa2 ml1 mv1 bg-animate hover-bg-light-gray">Default</button>
   <button type="button" class="pointer br2 ba b--navy bg-dark-blue white pa2 ml1 mv1 bg-animate hover-bg-navy">Primary</button>
   <button type="button" class="pointer br2 ba b--dark-green bg-green white pa2 ml1 mv1 bg-animate hover-bg-dark-green">Success</button>
   <button type="button" class="pointer br2 ba b--dark-blue bg-blue white pa2 ml1 mv1 bg-animate hover-bg-dark-blue">Info</button>
@@ -22,42 +259,42 @@
   <h2>Sizes</h2>
   <p>
     <button type="button" class="pointer br2 ba b--navy bg-dark-blue white pa3 ml1 mv1 f4 shadow-hover bg-animate hover-bg-navy">Large button</button>
-    <button type="button" class="pointer br2 ba b--black-30 bg-white pa3 ml1 mv1 f4 bg-animate hover-bg-light-gray">Large button</button>
+    <button type="button" class="pointer br2 ba b--black-20 bg-white pa3 ml1 mv1 f4 bg-animate hover-bg-light-gray">Large button</button>
   </p>
   <p>
     <button type="button" class="pointer br2 ba b--navy bg-dark-blue white pa2 ml1 mv1 bg-animate hover-bg-navy">Default button</button>
-    <button type="button" class="pointer br2 ba b--black-30 bg-white pa2 ml1 mv1 hover-bg-light-gray">Default button</button>
+    <button type="button" class="pointer br2 ba b--black-20 bg-white pa2 ml1 mv1 hover-bg-light-gray">Default button</button>
   </p>
   <p>
     <button type="button" class="pointer br2 ba b--navy bg-dark-blue white pa2 ml1 mv1 f6 bg-animate hover-bg-navy">Small button</button>
-    <button type="button" class="pointer br2 ba b--black-30 bg-white pa2 ml1 mv1 f6 hover-bg-light-gray">Small button</button>
+    <button type="button" class="pointer br2 ba b--black-20 bg-white pa2 ml1 mv1 f6 hover-bg-light-gray">Small button</button>
   </p>
   <p>
     <button type="button" class="pointer br2 ba b--navy bg-dark-blue white pa1 ml1 mv1 f7 lh-title bg-animate hover-bg-navy">Extra small button</button>
-    <button type="button" class="pointer br2 ba b--black-30 bg-white pa1 ml1 mv1 f7 lh-title bg-animate hover-bg-light-gray">Extra small button</button>
+    <button type="button" class="pointer br2 ba b--black-20 bg-white pa1 ml1 mv1 f7 lh-title bg-animate hover-bg-light-gray">Extra small button</button>
   </p>
 
   <h3>Block level button</h3>
   <div class="db tc w5 bg-light-gray pa3 br2 ba b--black-10">
     <button type="button" class="pointer br2 ba b--navy bg-dark-blue white pa2 db w-100 bg-animate hover-bg-navy">Block level button</button>
-    <button type="button" class="pointer br2 ba b--black-30 bg-white pa2 mt2 db w-100 bg-animate hover-bg-light-gray">Block level button</button>
+    <button type="button" class="pointer br2 ba b--black-20 bg-white pa2 mt2 db w-100 bg-animate hover-bg-light-gray">Block level button</button>
   </div>
 
   <h2>Active State</h2>
   <h3>Button element</h3>
   <button type="button" class="pointer br2 ba b--dark-gray bg-navy white pa2 ml1 mv1 shadow-1 bg-animate hover-bg-near-black">Primary button</button>
-  <button type="button" class="pointer br2 ba b--black-30 bg-light-gray pa2 ml1 mv1 shadow-1 bg-animate hover-bg-moon-gray">Button</button>
+  <button type="button" class="pointer br2 ba b--black-20 bg-light-gray pa2 ml1 mv1 shadow-1 bg-animate hover-bg-moon-gray">Button</button>
   <h3>Anchor element</h3>
   <a href="#" class="pointer br2 ba b--dark-gray bg-navy white pa2 ml1 mv1 shadow-1 bg-animate hover-bg-near-black link">Primary Link</a>
-  <a href="#" class="pointer br2 ba b--black-30 bg-light-gray black pa2 ml1 mv1 shadow-1 bg-animate hover-bg-moon-gray link">Link</a>
+  <a href="#" class="pointer br2 ba b--black-20 bg-light-gray black pa2 ml1 mv1 shadow-1 bg-animate hover-bg-moon-gray link">Link</a>
 
   <h2>Disabled State</h2>
   <h3>Button element</h3>
   <button type="button" disabled="disabled" class="br2 ba b--navy bg-dark-blue white pa2 ml1 mv1 cursor-not-allowed o-60">Primary button</button>
-  <button type="button" disabled="disabled" class="br2 ba b--black-30 bg-white pa2 ml1 mv1 cursor-not-allowed o-60">Button</button>
+  <button type="button" disabled="disabled" class="br2 ba b--black-20 bg-white pa2 ml1 mv1 cursor-not-allowed o-60">Button</button>
   <h3>Anchor element</h3>
   <a href="#" class="br2 ba b--navy bg-dark-blue white pa2 ml1 mv1 link cursor-not-allowed o-60">Primary Link</a>
-  <a href="#" class="br2 ba b--black-30 bg-white black pa2 ml1 mv1 link cursor-not-allowed o-60">Link</a>
+  <a href="#" class="br2 ba b--black-20 bg-white black pa2 ml1 mv1 link cursor-not-allowed o-60">Link</a>
 
   <!-- Should I use border box for buttons? -->
-</section>
+</article>