From dba1ddf82b30d743882ec7d12fb168f36019066d Mon Sep 17 00:00:00 2001 From: Hope Armstrong Date: Fri, 23 Feb 2018 11:05:40 -0800 Subject: [PATCH 01/17] Made it so long labels for radio and checkbox inputs left align when wrapped --- README.md | 2 +- _includes/footer.html | 2 +- _sass/leap/_variables.scss | 2 +- _sass/leap/atoms/_forms.sass | 5 ++++- release-notes.html | 12 ++++++++++++ 5 files changed, 19 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 3195c49..ad54cd5 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ 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.7.zip) +* [Download the latest release](https://github.com/treehouse/project-leap/archive/v0.8.8.zip) * Clone the repo: `git clone https://github.com/treehouse/project-leap.git` * Install with [Bower](http://bower.io) diff --git a/_includes/footer.html b/_includes/footer.html index 8548209..7f2287e 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -7,7 +7,7 @@ diff --git a/_sass/leap/_variables.scss b/_sass/leap/_variables.scss index edcd210..b22c6d0 100644 --- a/_sass/leap/_variables.scss +++ b/_sass/leap/_variables.scss @@ -1,4 +1,4 @@ -$leap-version: "0.8.7"; +$leap-version: "0.8.8"; // Brand Colors $brand-colors: ( diff --git a/_sass/leap/atoms/_forms.sass b/_sass/leap/atoms/_forms.sass index 608d58f..b3a8dd0 100644 --- a/_sass/leap/atoms/_forms.sass +++ b/_sass/leap/atoms/_forms.sass @@ -147,6 +147,7 @@ $form-states: success, warning, error font-weight: normal color: $form-color-inactive padding: .25rem 0 + margin-left: 29px // Building stylized elements to replace defaults &:before content: '' @@ -174,6 +175,7 @@ $form-states: success, warning, error &+.form-label:before border-radius: 50% border: 1px solid $border-color-mid + margin-left: -29px // Selected Radio Styles &:checked+.form-label:before border: 5px solid ui-color(blue) @@ -186,7 +188,8 @@ $form-states: success, warning, error height: 1rem border-radius: $border-radius border: 1px solid $border-color-mid - // Slected Checkbox Styles + margin-left: -29px + // Selected Checkbox Styles &:checked+.form-label:before border: none background-color: ui-color(blue) diff --git a/release-notes.html b/release-notes.html index 3dc5212..adc7911 100644 --- a/release-notes.html +++ b/release-notes.html @@ -239,4 +239,16 @@ +
+
+

0.8.8

+
+
+

Wrapping Long Lables Nicely

+

February 23, 2018

+
    +
  • Now when radio and checkbox labels wrap into multiple lines, the text left aligns.
    • +
+
+
From 9247cef39712a7adcbe7ee8313ba8e364dfb6163 Mon Sep 17 00:00:00 2001 From: Hope Armstrong Date: Fri, 23 Feb 2018 12:21:36 -0800 Subject: [PATCH 02/17] Tweaked form label positioning --- _sass/leap/atoms/_forms.sass | 6 +++--- forms.html | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/_sass/leap/atoms/_forms.sass b/_sass/leap/atoms/_forms.sass index b3a8dd0..5ab27af 100644 --- a/_sass/leap/atoms/_forms.sass +++ b/_sass/leap/atoms/_forms.sass @@ -147,7 +147,7 @@ $form-states: success, warning, error font-weight: normal color: $form-color-inactive padding: .25rem 0 - margin-left: 29px + margin-left: 25px // Building stylized elements to replace defaults &:before content: '' @@ -175,7 +175,7 @@ $form-states: success, warning, error &+.form-label:before border-radius: 50% border: 1px solid $border-color-mid - margin-left: -29px + margin-left: -25px // Selected Radio Styles &:checked+.form-label:before border: 5px solid ui-color(blue) @@ -188,7 +188,7 @@ $form-states: success, warning, error height: 1rem border-radius: $border-radius border: 1px solid $border-color-mid - margin-left: -29px + margin-left: -25px // Selected Checkbox Styles &:checked+.form-label:before border: none diff --git a/forms.html b/forms.html index 5909852..0f5f993 100644 --- a/forms.html +++ b/forms.html @@ -115,7 +115,7 @@

Radios

- + @@ -136,7 +136,7 @@

Checkboxes

- + From 6dba41d9ca6edae4f8cd7925f7ea77d84e72d7d6 Mon Sep 17 00:00:00 2001 From: Hope Armstrong Date: Mon, 26 Feb 2018 10:45:07 -0800 Subject: [PATCH 03/17] Made margin left immutable --- _sass/leap/atoms/_forms.sass | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_sass/leap/atoms/_forms.sass b/_sass/leap/atoms/_forms.sass index 5ab27af..349c8bd 100644 --- a/_sass/leap/atoms/_forms.sass +++ b/_sass/leap/atoms/_forms.sass @@ -147,7 +147,7 @@ $form-states: success, warning, error font-weight: normal color: $form-color-inactive padding: .25rem 0 - margin-left: 25px + margin-left: 25px !important // Building stylized elements to replace defaults &:before content: '' @@ -188,7 +188,7 @@ $form-states: success, warning, error height: 1rem border-radius: $border-radius border: 1px solid $border-color-mid - margin-left: -25px + margin-left: -25px !important // Selected Checkbox Styles &:checked+.form-label:before border: none From 357f30e7f3492c1c4ff3b4ef9aac9c911d5b1ffb Mon Sep 17 00:00:00 2001 From: Hope Armstrong Date: Mon, 26 Feb 2018 13:34:10 -0800 Subject: [PATCH 04/17] Fixed inline button to be in line with form inputs --- _sass/leap/atoms/_button.sass | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_sass/leap/atoms/_button.sass b/_sass/leap/atoms/_button.sass index 6543b7d..c82642b 100644 --- a/_sass/leap/atoms/_button.sass +++ b/_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 From bb216880d8cdaa2773313a1639f3d551ccfc76c2 Mon Sep 17 00:00:00 2001 From: Hope Armstrong Date: Mon, 9 Apr 2018 09:55:57 -0700 Subject: [PATCH 05/17] Tweaking copy to forms page and updating release notes --- forms.html | 8 ++++---- release-notes.html | 7 ++++--- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/forms.html b/forms.html index 0f5f993..5a9d86d 100644 --- a/forms.html +++ b/forms.html @@ -115,10 +115,10 @@

Radios

- + - + 
<form>
@@ -136,10 +136,10 @@ 
Checkboxes

 
   

     
-    
+    
 
     
-    
+    
   

   

   
<form>
diff --git a/release-notes.html b/release-notes.html
index adc7911..23c676c 100644
--- a/release-notes.html
+++ b/release-notes.html
@@ -244,10 +244,11 @@
        
0.8.8

      

      

-       
Wrapping Long Lables Nicely

-       
February 23, 2018

+       
Wrapping Long Lables Nicely & Aligning Inline Buttons

+       
April 9, 2018

        
    
-         
  • Now when radio and checkbox labels wrap into multiple lines, the text left aligns.
    • 
+         
  • Added support for radio and checkbox labels which wrap into multiple lines; now the labels left align with the inputs.
    • 
+         
  • Improved inline buttons so they are now aligned with input fields.
    •
From 053a8e88da4344be11ce5698b97d6609aae460dc Mon Sep 17 00:00:00 2001 From: Hope Armstrong Date: Mon, 9 Apr 2018 11:30:25 -0700 Subject: [PATCH 06/17] Added white background for radio buttons. This helps them show up on colored backgrounds --- _sass/leap/atoms/_forms.sass | 1 + 1 file changed, 1 insertion(+) diff --git a/_sass/leap/atoms/_forms.sass b/_sass/leap/atoms/_forms.sass index 349c8bd..c778bce 100644 --- a/_sass/leap/atoms/_forms.sass +++ b/_sass/leap/atoms/_forms.sass @@ -170,6 +170,7 @@ $form-states: success, warning, error color: $form-color-active &:before border: 2px solid $form-border-active + background-color: #fff // Default Radio Styles &-radio &+.form-label:before From e81898ea22f462554dcebb164899645577a060f8 Mon Sep 17 00:00:00 2001 From: Hope Armstrong Date: Mon, 9 Apr 2018 11:43:27 -0700 Subject: [PATCH 07/17] Added white background for radio buttons. This helps them show up on colored backgrounds --- _sass/leap/atoms/_forms.sass | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_sass/leap/atoms/_forms.sass b/_sass/leap/atoms/_forms.sass index c778bce..83d409f 100644 --- a/_sass/leap/atoms/_forms.sass +++ b/_sass/leap/atoms/_forms.sass @@ -170,7 +170,6 @@ $form-states: success, warning, error color: $form-color-active &:before border: 2px solid $form-border-active - background-color: #fff // Default Radio Styles &-radio &+.form-label:before @@ -180,6 +179,7 @@ $form-states: success, warning, error // Selected Radio Styles &:checked+.form-label:before border: 5px solid ui-color(blue) + background-color: #fff // Default Checkbox Styles &-checkbox &+.form-label:before From d179d0f18b11e02a492b69ab7de1b3ca77ffb40f Mon Sep 17 00:00:00 2001 From: Hope Armstrong Date: Wed, 11 Apr 2018 10:25:54 -0700 Subject: [PATCH 08/17] Adding white background to inputs --- _sass/leap/atoms/_forms.sass | 1 + 1 file changed, 1 insertion(+) diff --git a/_sass/leap/atoms/_forms.sass b/_sass/leap/atoms/_forms.sass index 83d409f..e609840 100644 --- a/_sass/leap/atoms/_forms.sass +++ b/_sass/leap/atoms/_forms.sass @@ -170,6 +170,7 @@ $form-states: success, warning, error color: $form-color-active &:before border: 2px solid $form-border-active + background-color: #fff // Default Radio Styles &-radio &+.form-label:before From d637b96f15b94981a22c0fa2768642c0d33257e2 Mon Sep 17 00:00:00 2001 From: Hope Armstrong Date: Tue, 17 Apr 2018 17:48:14 -0700 Subject: [PATCH 09/17] Added white background to checkboxes. --- _sass/leap/atoms/_forms.sass | 1 + 1 file changed, 1 insertion(+) diff --git a/_sass/leap/atoms/_forms.sass b/_sass/leap/atoms/_forms.sass index e609840..9a01d4f 100644 --- a/_sass/leap/atoms/_forms.sass +++ b/_sass/leap/atoms/_forms.sass @@ -191,6 +191,7 @@ $form-states: success, warning, error border-radius: $border-radius border: 1px solid $border-color-mid margin-left: -25px !important + background-color: #fff // Selected Checkbox Styles &:checked+.form-label:before border: none From e9708e4633671d3d221fbb9dd8bf0ae624b92eb2 Mon Sep 17 00:00:00 2001 From: Hope Armstrong Date: Tue, 17 Apr 2018 18:11:47 -0700 Subject: [PATCH 10/17] Thickened radio and checkboxes to 2px borders --- _sass/leap/atoms/_forms.sass | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/_sass/leap/atoms/_forms.sass b/_sass/leap/atoms/_forms.sass index 9a01d4f..e13d1fd 100644 --- a/_sass/leap/atoms/_forms.sass +++ b/_sass/leap/atoms/_forms.sass @@ -175,7 +175,7 @@ $form-states: success, warning, error &-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 @@ -189,9 +189,8 @@ $form-states: success, warning, error width: 1rem height: 1rem border-radius: $border-radius - border: 1px solid $border-color-mid + border: 2px solid $border-color-mid margin-left: -25px !important - background-color: #fff // Selected Checkbox Styles &:checked+.form-label:before border: none From 28261fe5fa3d93ea71ff55a22280d6ec09891264 Mon Sep 17 00:00:00 2001 From: Hope Armstrong Date: Tue, 17 Apr 2018 18:34:38 -0700 Subject: [PATCH 11/17] Updated release notes to capture all the things. --- release-notes.html | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/release-notes.html b/release-notes.html index 23c676c..13d23f8 100644 --- a/release-notes.html +++ b/release-notes.html @@ -244,10 +244,12 @@

0.8.8

-

Wrapping Long Lables Nicely & Aligning Inline Buttons

-

April 9, 2018

+

Improving Form Elements

+

April 18, 2018

    -
  • Added support for radio and checkbox labels which wrap into multiple lines; now the labels left align with the inputs.
    • +
  • Added support for radio and checkbox labels that wrap into multiple lines; now the labels left align with the inputs.
    • +
  • 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).
    • +
  • Thickened border from 1px to 2px to match other inputs and stand out more.
  • Improved inline buttons so they are now aligned with input fields.
From 20721377a7c1fa24ac814f465630e995f1b5cef3 Mon Sep 17 00:00:00 2001 From: Hope Armstrong Date: Thu, 19 Apr 2018 11:18:38 -0700 Subject: [PATCH 12/17] Added hover states for radio, checkbox, and select inputs. Updated the release notes. --- _sass/leap/atoms/_forms.sass | 12 ++++++++++++ release-notes.html | 3 ++- 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/_sass/leap/atoms/_forms.sass b/_sass/leap/atoms/_forms.sass index e13d1fd..809da05 100644 --- a/_sass/leap/atoms/_forms.sass +++ b/_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, @@ -171,6 +177,12 @@ $form-states: success, warning, error &:before border: 2px solid $form-border-active background-color: #fff + // Hover states for radio and checkboxes + &:hover+.form-label + &:before + border: 2px solid $form-border-active + background-color: #fff + cursor: pointer // Default Radio Styles &-radio &+.form-label:before diff --git a/release-notes.html b/release-notes.html index 13d23f8..1193895 100644 --- a/release-notes.html +++ b/release-notes.html @@ -249,7 +249,8 @@
  • Added support for radio and checkbox labels that wrap into multiple lines; now the labels left align with the inputs.
  • 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).
    • -
  • Thickened border from 1px to 2px to match other inputs and stand out more.
    • +
  • Added hover and focus states for radio, checkbox, and select inputs.
    • +
  • Thickened radio and checkbox borders from 1px to 2px to match other inputs and stand out more.
  • Improved inline buttons so they are now aligned with input fields.
From 26b2ecb72704ecde916bfd2e67ec11907d48abea Mon Sep 17 00:00:00 2001 From: Hope Armstrong Date: Thu, 19 Apr 2018 11:37:33 -0700 Subject: [PATCH 13/17] Removing white bg from hover and focus states for radio and checkboxes since it looks confusing on dark bgs --- _sass/leap/atoms/_forms.sass | 2 -- 1 file changed, 2 deletions(-) diff --git a/_sass/leap/atoms/_forms.sass b/_sass/leap/atoms/_forms.sass index 809da05..dca1c5c 100644 --- a/_sass/leap/atoms/_forms.sass +++ b/_sass/leap/atoms/_forms.sass @@ -176,12 +176,10 @@ $form-states: success, warning, error color: $form-color-active &:before border: 2px solid $form-border-active - background-color: #fff // Hover states for radio and checkboxes &:hover+.form-label &:before border: 2px solid $form-border-active - background-color: #fff cursor: pointer // Default Radio Styles &-radio From a7ef8e24f4155c259b03a012fd076cc5783a067d Mon Sep 17 00:00:00 2001 From: Hope Armstrong Date: Thu, 19 Apr 2018 12:06:46 -0700 Subject: [PATCH 14/17] Added hover states to documentation --- _sass/leap/atoms/_forms.sass | 4 ++++ forms.html | 39 +++++++++++++++++++++++++++++++++++- release-notes.html | 2 +- 3 files changed, 43 insertions(+), 2 deletions(-) diff --git a/_sass/leap/atoms/_forms.sass b/_sass/leap/atoms/_forms.sass index dca1c5c..8c99440 100644 --- a/_sass/leap/atoms/_forms.sass +++ b/_sass/leap/atoms/_forms.sass @@ -181,6 +181,10 @@ $form-states: success, warning, error &:before border: 2px solid $form-border-active cursor: pointer + // Making the hover state stand out on forms over dark backgrounds + &:hover+.text-color-white + &:before + border: 2px solid #fff // Default Radio Styles &-radio &+.form-label:before diff --git a/forms.html b/forms.html index 5a9d86d..b974bb1 100644 --- a/forms.html +++ b/forms.html @@ -114,12 +114,13 @@

Radios

Use .form-radio immediately following a label to get Leap's default radio button style.

- +
+ 
<form>
   <input type="radio" id="form-radio-1" class="form-radio" name="radio" checked="checked">
@@ -129,6 +130,24 @@ 
Radios

 </form>
+

Forms with white text on dark backgrounds have a lighter hover state. To enable this, .text-color-white must be a class alongside .form-label.

+ +
+ + + + +
+ +
+ 
<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>
+
+

Checkboxes

@@ -141,6 +160,7 @@

Checkboxes

+ 
<form>
   <input type="checkbox" id="form-checkbox-1" class="form-checkbox">
@@ -150,6 +170,23 @@ 
Checkboxes

 </form>
+

Forms with white text on dark backgrounds have a lighter hover state. To enable this, .text-color-white must be a class alongside .form-label.

+ +
+ + + + +
+ +
+ 
<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>
+

Uploads

diff --git a/release-notes.html b/release-notes.html index 1193895..909f49b 100644 --- a/release-notes.html +++ b/release-notes.html @@ -249,7 +249,7 @@
  • Added support for radio and checkbox labels that wrap into multiple lines; now the labels left align with the inputs.
  • 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).
    • -
  • Added hover and focus states for radio, checkbox, and select inputs.
    • +
  • Added hover and focus states for radio, checkbox, and select inputs. Included an option for light forms on dark backgrounds.
  • Thickened radio and checkbox borders from 1px to 2px to match other inputs and stand out more.
  • Improved inline buttons so they are now aligned with input fields.
From 4c08669d5551cc92562155b703ac2f78b1ef4548 Mon Sep 17 00:00:00 2001 From: Hope Armstrong Date: Thu, 19 Apr 2018 14:53:10 -0700 Subject: [PATCH 15/17] Added white border focus state for inverted radio and checkboxes --- _sass/leap/atoms/_forms.sass | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_sass/leap/atoms/_forms.sass b/_sass/leap/atoms/_forms.sass index 8c99440..3f82e1f 100644 --- a/_sass/leap/atoms/_forms.sass +++ b/_sass/leap/atoms/_forms.sass @@ -182,7 +182,7 @@ $form-states: success, warning, error border: 2px solid $form-border-active cursor: pointer // Making the hover state stand out on forms over dark backgrounds - &:hover+.text-color-white + &:hover+.text-color-white, &:focus+.text-color-white &:before border: 2px solid #fff // Default Radio Styles From 78a7f76b3a47570ca124fae761be73ca15a9024f Mon Sep 17 00:00:00 2001 From: Hope Armstrong <00spacetime10@gmail.com> Date: Thu, 19 Apr 2018 15:06:04 -0700 Subject: [PATCH 16/17] Fixed version number in release notes --- release-notes.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/release-notes.html b/release-notes.html index 51c02db..bc35742 100644 --- a/release-notes.html +++ b/release-notes.html @@ -266,7 +266,7 @@
-

0.8.8

+

0.9.0

Improving Form Elements

From eb5099f658b356983220fcf09cfc7298549ab4bf Mon Sep 17 00:00:00 2001 From: Hope Armstrong Date: Thu, 19 Apr 2018 15:08:45 -0700 Subject: [PATCH 17/17] Updated zip version in index --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index a02bcf0..0b2d6e2 100644 --- a/index.html +++ b/index.html @@ -34,7 +34,7 @@

Installation

In your project directory: bower install leap --save

Download

- Source Files + Source Files Compiled CSS Compiled CSS (minified)