Merge pull request #28 from treehouse/label-wrap

Improving form elements

Author: hopearmstrong

README.md

@@ -4,7 +4,8 @@ Leap is an internal CSS library made for Treehouse. It contains immutable utilit
 ## Quick Start
 Several options are available for installing Leap into your project.
 
-* [Download the latest release](https://github.com/treehouse/project-leap/archive/v0.8.9.zip)
+* [Download the latest release](https://github.com/treehouse/project-leap/archive/v0.9.0.zip)
+
 * Clone the repo: `git clone https://github.com/treehouse/project-leap.git`
 * Install with [Bower](http://bower.io)
 

_includes/footer.html

@@ -7,7 +7,7 @@
 </div>
 
 <footer class="guide-contentinfo" role="contentinfo">
-  <p class="guide-contentinfo-copy">Copyright &copy; 2016 Treehouse. All rights reserved.</p>
+  <p class="guide-contentinfo-copy">Copyright &copy; 2018 Treehouse. All rights reserved.</p>
 </footer>
 
 <script src="js/prism.js"></script>

_sass/leap/_variables.scss

@@ -1,4 +1,4 @@
-$leap-version: "0.8.9";
+$leap-version: "0.9.0";
 
 // Brand Colors
 $brand-colors: (

_sass/leap/atoms/_button.sass

@@ -136,7 +136,7 @@
 
   // Inline buttons next to input fields
   &--inline
-    margin-top: 24px !important
+    margin-top: 28px !important
     padding: 0 26px !important
     height: 47px !important
     line-height: 43px !important

_sass/leap/atoms/_forms.sass

@@ -128,9 +128,15 @@ $form-states: success, warning, error
     .ff &
       padding: .688rem 1rem
       padding-right: 2rem
+    // Adding in focus & hover states
     &:focus
       background-color: $form-background-active
       border: 2px solid $form-border-active
+    &:hover
+      background-color: $form-background-active
+      border: 2px solid $form-border-active
+      color: $form-color-active
+
 
   // Radio & Checkboxes
   &-radio,
@@ -147,6 +153,7 @@ $form-states: success, warning, error
       font-weight: normal
       color: $form-color-inactive
       padding: .25rem 0
+      margin-left: 25px !important
       // Building stylized elements to replace defaults
       &:before
         content: ''
@@ -169,14 +176,25 @@ $form-states: success, warning, error
       color: $form-color-active
       &:before
         border: 2px solid $form-border-active
+    // Hover states for radio and checkboxes
+    &:hover+.form-label
+      &:before
+        border: 2px solid $form-border-active
+        cursor: pointer
+    // Making the hover state stand out on forms over dark backgrounds
+    &:hover+.text-color-white, &:focus+.text-color-white
+      &:before
+        border: 2px solid #fff
   // Default Radio Styles
   &-radio
     &+.form-label:before
       border-radius: 50%
-      border: 1px solid $border-color-mid
+      border: 2px solid $border-color-mid
+      margin-left: -25px
     // Selected Radio Styles
     &:checked+.form-label:before
       border: 5px solid ui-color(blue)
+      background-color: #fff
   // Default Checkbox Styles
   &-checkbox
     &+.form-label:before
@@ -185,8 +203,9 @@ $form-states: success, warning, error
       width: 1rem
       height: 1rem
       border-radius: $border-radius
-      border: 1px solid $border-color-mid
-    // Slected Checkbox Styles
+      border: 2px solid $border-color-mid
+      margin-left: -25px !important
+    // Selected Checkbox Styles
     &:checked+.form-label:before
       border: none
       background-color: ui-color(blue)

forms.html

@@ -114,12 +114,13 @@ <h2 id="Radios" class="m-b-1-xs">Radios</h2>
   <p class="m-b-1-xs">Use <code>.form-radio</code> immediately following a <code>label</code> to get Leap's default radio button style.</p>
 
   <form class="m-b-2-xs">
-    <input type="radio" id="form-radio-1" class="form-radio" name="radio">
-    <label for="form-radio-1" class="form-label">Radio Label 1</label>
+    <input type="radio" id="form-radio-1" class="form-radio" name="radio" checked="checked">
+    <label for="form-radio-1" class="form-label">A really long radio label that goes on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on.</label>
 
     <input type="radio" id="form-radio-2" class="form-radio" name="radio">
-    <label for="form-radio-2" class="form-label">Radio Label 2</label>
+    <label for="form-radio-2" class="form-label">A short radio label.</label>
   </form>
+
   <div class="guide-code m-b-4-xs">
   <pre><code class="language-html">&lt;form&gt;
   &lt;input type="radio" id="form-radio-1" class="form-radio" name="radio" checked="checked"&gt;
@@ -129,18 +130,37 @@ <h2 id="Radios" class="m-b-1-xs">Radios</h2>
 &lt;/form&gt;</code></pre>
   </div>
 
+  <p class="m-b-1-xs">Forms with white text on dark backgrounds have a lighter hover state. To enable this, <code>.text-color-white</code> must be a class alongside <code>.form-label</code>.</p>
+
+  <form class="p-2-xs m-b-2-xs bg-gray-darker round">
+    <input type="radio" id="form-radio-3" class="form-radio" name="radio" checked="checked">
+    <label for="form-radio-3" class="form-label text-color-white">A radio label on a dark background.</label>
+    <input type="radio" id="form-radio-4" class="form-radio" name="radio">
+    <label for="form-radio-4" class="form-label text-color-white m-b-0-xs">Another radio label on a dark background.</label>
+  </form>
+
+  <div class="guide-code m-b-4-xs">
+  <pre><code class="language-html">&lt;form class="p-2-xs m-b-2-xs bg-gray-darker round"&gt;
+  &lt;input type="radio" id="form-radio-3" class="form-radio" name="radio" checked="checked"&gt;
+  &lt;label for="form-radio-3" class="form-label text-color-white"&gt;A radio label on a dark background.&lt;/label&gt;
+  &lt;input type="radio" id="form-radio-4" class="form-radio" name="radio"&gt;
+  &lt;label for="form-radio-4" class="form-label text-color-white m-b-0-xs"&gt;Another radio label on a dark background.&lt;/label&gt;
+&lt;/form&gt;</code></pre>
+  </div>
+
 
   <!-- Checkboxes -->
   <h2 id="Checkboxes" class="m-b-1-xs">Checkboxes</h2>
   <p class="m-b-1-xs">Use <code>.form-checkbox</code> immediately following a <code>label</code> to get Leap's default checkbox style.</p>
 
   <form class="m-b-2-xs">
     <input type="checkbox" id="form-checkbox-1" class="form-checkbox">
-    <label for="form-checkbox-1" class="form-label">Checkbox Label 1</label>
+    <label for="form-checkbox-1" class="form-label">A really long checkbox label that goes on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on.</label>
 
     <input type="checkbox" id="form-checkbox-2" class="form-checkbox">
-    <label for="form-checkbox-2" class="form-label">Checkbox Label 2</label>
+    <label for="form-checkbox-2" class="form-label">A short checkbox label.</label>
   </form>
+
   <div class="guide-code m-b-4-xs">
   <pre><code class="language-html">&lt;form&gt;
   &lt;input type="checkbox" id="form-checkbox-1" class="form-checkbox"&gt;
@@ -150,6 +170,23 @@ <h2 id="Checkboxes" class="m-b-1-xs">Checkboxes</h2>
 &lt;/form&gt;</code></pre>
   </div>
 
+<p class="m-b-1-xs">Forms with white text on dark backgrounds have a lighter hover state. To enable this, <code>.text-color-white</code> must be a class alongside <code>.form-label</code>.</p>
+
+  <form class="p-2-xs m-b-2-xs bg-gray-darker round">
+    <input type="checkbox" id="form-checkbox-3" class="form-checkbox">
+    <label for="form-checkbox-3" class="form-label text-color-white">A checkbox label on a dark background.</label>
+    <input type="checkbox" id="form-checkbox-4" class="form-checkbox">
+    <label for="form-checkbox-4" class="form-label text-color-white m-b-0-xs">Another checkbox label on a dark background.</label>
+  </form>
+
+  <div class="guide-code m-b-4-xs">
+  <pre><code class="language-html">&lt;form class="p-2-xs m-b-2-xs bg-gray-darker round"&gt;
+  &lt;input type="checkbox" id="form-checkbox-3" class="form-checkbox"&gt;
+  &lt;label for="form-checkbox-3" class="form-label text-color-white"&gt;A checkbox label on a dark background.&lt;/label&gt;
+  &lt;input type="checkbox" id="form-checkbox-4" class="form-checkbox"&gt;
+  &lt;label for="form-checkbox-4" class="form-label text-color-white m-b-0-xs"&gt;Another checkbox label on a dark background.&lt;/label&gt;
+&lt;/form&gt;</code></pre>
+  </div>
 
   <!-- Uploads -->
   <h2 id="Uploads" class="m-b-1-xs">Uploads</h2>

index.html

@@ -34,7 +34,7 @@ <h2 class="m-b-1-xs">Installation</h2>
   <p class="m-b-4-xs">In your project directory: <code>bower install leap --save</code></p>
 
   <h2 class="m-b-1-xs">Download</h2>
-  <a href="https://github.com/treehouse/project-leap/archive/v0.8.9.zip" class="button button--large-xs w-full-xs w-auto-lg">Source Files</a>
+  <a href="https://github.com/treehouse/project-leap/archive/v0.9.0.zip" class="button button--large-xs w-full-xs w-auto-lg">Source Files</a>
   <a href="http://treehouse.github.io/project-leap/css/leap.css" class="button button--large-xs w-full-xs w-auto-lg">Compiled CSS</a>
   <a href="http://treehouse.github.io/project-leap/css/leap.min.css" class="button button--large-xs w-full-xs w-auto-lg">Compiled CSS (minified)</a>
 

release-notes.html

@@ -264,4 +264,20 @@
        </ul>
      </div>
   </div>
+  <div class="col-container border-b-xs p-b-2-xs m-t-2-xs">
+     <div class="col col-10-md">
+       <p class="text-color-light">0.9.0</p>
+     </div>
+     <div class="col col-90-md">
+       <p class="bold">Improving Form Elements</p>
+       <p class="text-6-xs text-color-light">April 18, 2018</p>
+       <ul class="m-t-1-xs text-6-xs">
+         <li>Added support for radio and checkbox labels that wrap into multiple lines; now the labels left align with the inputs.</li>
+         <li>Explicitly made radio buttons have a white background color. This solves a readability issue that occured when a radio button was placed on a non-white background (the center was rendering as transparent).</li>
+         <li>Added hover and focus states for radio, checkbox, and select inputs. Included an option for light forms on dark backgrounds.</li>
+         <li>Thickened radio and checkbox borders from 1px to 2px to match other inputs and stand out more.</li>
+         <li>Improved inline buttons so they are now aligned with input fields.</li>
+       </ul>
+     </div>
+  </div>
 </section>