diff --git a/README.md b/README.md index ad82ae8..f7d8b8c 100644 --- a/README.md +++ b/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) 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 9de002b..d3aabdc 100644 --- a/_sass/leap/_variables.scss +++ b/_sass/leap/_variables.scss @@ -1,4 +1,4 @@ -$leap-version: "0.8.9"; +$leap-version: "0.9.0"; // Brand Colors $brand-colors: ( 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 diff --git a/_sass/leap/atoms/_forms.sass b/_sass/leap/atoms/_forms.sass index 608d58f..3f82e1f 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, @@ -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) diff --git a/forms.html b/forms.html index 5909852..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

@@ -136,11 +155,12 @@

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/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) diff --git a/release-notes.html b/release-notes.html index 393ddab..bc35742 100644 --- a/release-notes.html +++ b/release-notes.html @@ -264,4 +264,20 @@ +
+
+

0.9.0

+
+
+

Improving Form Elements

+

April 18, 2018

+ +
+