From 9e9914373b7333ed7bc5c62515e1e527fe2b7f96 Mon Sep 17 00:00:00 2001 From: Matthew Spiel Date: Mon, 8 Aug 2016 10:38:36 -0500 Subject: [PATCH 01/20] adding in initial alrt banner files --- README.md | 6 +++--- _sass/leap/modules/_flash-banner.sass | 0 2 files changed, 3 insertions(+), 3 deletions(-) create mode 100644 _sass/leap/modules/_flash-banner.sass diff --git a/README.md b/README.md index 9dec910..4ddc530 100644 --- a/README.md +++ b/README.md @@ -357,12 +357,12 @@ Library Sprint List --- We are going to take 2 weeks to try and build out the library page as a proof of concept. -* [ ] Alert Banners +* [ ] Flash Banners * [ ] Control Bar * [ ] Welcome Banners * [ ] Cards * [ ] Tool Tips -* [ ] Coming soon Pills (add to buttons Atom) +* [ ] Coming-Soon Pills (add to buttons Atom) * [ ] Modals * [ ] Topic Icons @@ -371,7 +371,7 @@ Extensive Lists Starting off by building a list of components that are found in the app. We can get more detailed as we dig into the parts and variations of each. * [ ] Boxes (Header, Content, Footer) -* [ ] Alert Banners +* [ ] Flash Banners * [ ] Welcome Banners * [ ] Cards * [ ] Modals diff --git a/_sass/leap/modules/_flash-banner.sass b/_sass/leap/modules/_flash-banner.sass new file mode 100644 index 0000000..e69de29 From ba6dcc0b7039b13d9b611cc8c359887697756017 Mon Sep 17 00:00:00 2001 From: Matthew Spiel Date: Mon, 8 Aug 2016 10:46:03 -0500 Subject: [PATCH 02/20] adding in module sass structure --- _sass/leap/_leap.sass | 1 + 1 file changed, 1 insertion(+) diff --git a/_sass/leap/_leap.sass b/_sass/leap/_leap.sass index 2262b55..2e88da0 100644 --- a/_sass/leap/_leap.sass +++ b/_sass/leap/_leap.sass @@ -5,3 +5,4 @@ @import reset @import global @import atoms/all +@import modules/all From f6814696c40f0db23cc671aab1d6bff1ff86608c Mon Sep 17 00:00:00 2001 From: Matthew Spiel Date: Mon, 8 Aug 2016 10:46:17 -0500 Subject: [PATCH 03/20] adding in all file for modules --- _sass/leap/modules/_all.sass | 1 + 1 file changed, 1 insertion(+) create mode 100644 _sass/leap/modules/_all.sass diff --git a/_sass/leap/modules/_all.sass b/_sass/leap/modules/_all.sass new file mode 100644 index 0000000..2570791 --- /dev/null +++ b/_sass/leap/modules/_all.sass @@ -0,0 +1 @@ +@import flash-banners From 6c7609efb4782c4ca49db4a3839ed6e606dec359 Mon Sep 17 00:00:00 2001 From: Matthew Spiel Date: Mon, 8 Aug 2016 16:34:01 -0500 Subject: [PATCH 04/20] renaming files and committing iniitial designs --- _sass/leap/modules/_alert-banners.sass | 37 ++++++++++++++++++++++++++ _sass/leap/modules/_all.sass | 2 +- _sass/leap/modules/_flash-banner.sass | 0 alert-banners.html | 35 ++++++++++++++++++++++++ 4 files changed, 73 insertions(+), 1 deletion(-) create mode 100644 _sass/leap/modules/_alert-banners.sass delete mode 100644 _sass/leap/modules/_flash-banner.sass create mode 100644 alert-banners.html diff --git a/_sass/leap/modules/_alert-banners.sass b/_sass/leap/modules/_alert-banners.sass new file mode 100644 index 0000000..a676756 --- /dev/null +++ b/_sass/leap/modules/_alert-banners.sass @@ -0,0 +1,37 @@ +.alert + &-banner + background-color: gray-color(gray) + border-radius: $border-radius + padding: 1rem + position: relative + &-success + background-color: ui-color(green) + &-warning + background-color: ui-color(yellow) + &-error + background-color: ui-color(red) + &-icon + width: 1.5rem + height: 1.5rem + vertical-align: middle + display: inline-block + background-color: #fff + position: absolute + top: 50% + transform: translateY(-50%) + + + & + .alert-message + padding-left: 2.5rem + + &-message + display: inline-block + color: text-color(dark) + &-action + +appearance(none) + background-color: transparent + border: none + position: absolute + top: 0 + right: 0 + bottom: 0 diff --git a/_sass/leap/modules/_all.sass b/_sass/leap/modules/_all.sass index 2570791..57dd62b 100644 --- a/_sass/leap/modules/_all.sass +++ b/_sass/leap/modules/_all.sass @@ -1 +1 @@ -@import flash-banners +@import alert-banners diff --git a/_sass/leap/modules/_flash-banner.sass b/_sass/leap/modules/_flash-banner.sass deleted file mode 100644 index e69de29..0000000 diff --git a/alert-banners.html b/alert-banners.html new file mode 100644 index 0000000..91f94e1 --- /dev/null +++ b/alert-banners.html @@ -0,0 +1,35 @@ +--- +layout: default +title: Alert Banners +navigation_weight: 12 +--- + +
+ + +

Alert Banners

+

Alerts are used to give feedback to users on actions they may have taken, their account status in the app, etc. They are meant to deliver short, useful messages.

+ +
+

This is an alert banner with no status

+ +
+ +
+ +

This is a success alert banner.

+ +
+
+ +

This is a warning alert banner with an icon.

+ +
+
+ +

This is an error alert banner that can be dismissed. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit doloremque explicabo ex quam animi, neque quasi veniam aspernatur.

+ +
+ + +
From 6c17edbe3a46c2c309141df21233de50a5352c3d Mon Sep 17 00:00:00 2001 From: Matthew Spiel Date: Tue, 9 Aug 2016 09:18:21 -0500 Subject: [PATCH 05/20] adding in more styling --- _sass/leap/modules/_alert-banners.sass | 26 ++++++++++++++++++++------ alert-banners.html | 15 ++++++--------- 2 files changed, 26 insertions(+), 15 deletions(-) diff --git a/_sass/leap/modules/_alert-banners.sass b/_sass/leap/modules/_alert-banners.sass index a676756..0eacaea 100644 --- a/_sass/leap/modules/_alert-banners.sass +++ b/_sass/leap/modules/_alert-banners.sass @@ -27,11 +27,25 @@ &-message display: inline-block color: text-color(dark) + padding-right: 5rem + .alert-banner-success &, + .alert-banner-error & + color: #fff + .alert-banner-warning & + color: darken(ui-color(yellow), 45%) + // Styling if there is an action + // This can either be a close icon, or a normal button &-action - +appearance(none) - background-color: transparent - border: none position: absolute - top: 0 - right: 0 - bottom: 0 + top: 50% + right: 1rem + transform: translateY(-50%) + display: block + &-close + background-color: transparent + border: none + position: absolute + top: 0 + right: 0 + bottom: 0 + display: block diff --git a/alert-banners.html b/alert-banners.html index 91f94e1..eb1b130 100644 --- a/alert-banners.html +++ b/alert-banners.html @@ -10,25 +10,22 @@

Alert Banners

Alerts are used to give feedback to users on actions they may have taken, their account status in the app, etc. They are meant to deliver short, useful messages.

-
+

This is an alert banner with no status

-
-
- +

This is a success alert banner.

-
-
+

This is a warning alert banner with an icon.

- + Close
-
+

This is an error alert banner that can be dismissed. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit doloremque explicabo ex quam animi, neque quasi veniam aspernatur.

- + Close
From 05244fd0fbd421275717e274e97b23889ef218b1 Mon Sep 17 00:00:00 2001 From: Matthew Spiel Date: Tue, 9 Aug 2016 09:29:52 -0500 Subject: [PATCH 06/20] moving over to the proper BEM name scheme --- _sass/leap/modules/_alert-banners.sass | 34 ++++++++++++++++---------- alert-banners.html | 24 +++++++++--------- 2 files changed, 33 insertions(+), 25 deletions(-) diff --git a/_sass/leap/modules/_alert-banners.sass b/_sass/leap/modules/_alert-banners.sass index 0eacaea..30ddeaa 100644 --- a/_sass/leap/modules/_alert-banners.sass +++ b/_sass/leap/modules/_alert-banners.sass @@ -1,16 +1,16 @@ .alert - &-banner + &__banner background-color: gray-color(gray) border-radius: $border-radius padding: 1rem position: relative - &-success + &--success background-color: ui-color(green) - &-warning + &--warning background-color: ui-color(yellow) - &-error + &--error background-color: ui-color(red) - &-icon + &__icon width: 1.5rem height: 1.5rem vertical-align: middle @@ -21,27 +21,34 @@ transform: translateY(-50%) - & + .alert-message + & + .alert__message padding-left: 2.5rem - &-message + &__message display: inline-block color: text-color(dark) padding-right: 5rem - .alert-banner-success &, - .alert-banner-error & + max-width: 900px + .alert__banner--success &, + .alert__banner--error & color: #fff - .alert-banner-warning & + .alert__banner--warning & color: darken(ui-color(yellow), 45%) // Styling if there is an action // This can either be a close icon, or a normal button - &-action + &__action position: absolute top: 50% - right: 1rem + right: 1.5rem transform: translateY(-50%) display: block - &-close + .alert-banner-success &, + .alert-banner-error & + color: #fff + .alert-banner-warning & + color: darken(ui-color(yellow), 45%) + // Styling for Close Icon + &--close background-color: transparent border: none position: absolute @@ -49,3 +56,4 @@ right: 0 bottom: 0 display: block + vertical-align: middle diff --git a/alert-banners.html b/alert-banners.html index eb1b130..d4a4eff 100644 --- a/alert-banners.html +++ b/alert-banners.html @@ -10,22 +10,22 @@

Alert Banners

Alerts are used to give feedback to users on actions they may have taken, their account status in the app, etc. They are meant to deliver short, useful messages.

-
-

This is an alert banner with no status

+
+

This is an alert banner with no status

-
-

This is a success alert banner.

+
+

This is a success alert banner.

-
- -

This is a warning alert banner with an icon.

- Close +
+ +

This is a warning alert banner with an icon.

+ Close
-
- -

This is an error alert banner that can be dismissed. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit doloremque explicabo ex quam animi, neque quasi veniam aspernatur.

- Close +
+ +

This is an error alert banner that can be dismissed. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit doloremque explicabo ex quam animi, neque quasi veniam aspernatur.

+ Text Action
From 5a59f4521b063081c3ebb246df265c8f541cbb88 Mon Sep 17 00:00:00 2001 From: Matthew Spiel Date: Tue, 9 Aug 2016 11:20:41 -0500 Subject: [PATCH 07/20] reworking the fixed action style and updating our UI green to not be so saturated --- _sass/leap/_variables.scss | 4 +- _sass/leap/modules/_alert-banners.sass | 51 +++++++++++++++++--------- alert-banners.html | 8 ++-- 3 files changed, 40 insertions(+), 23 deletions(-) diff --git a/_sass/leap/_variables.scss b/_sass/leap/_variables.scss index 5c467d6..dd71c79 100644 --- a/_sass/leap/_variables.scss +++ b/_sass/leap/_variables.scss @@ -1,6 +1,6 @@ // Brand Colors $brand-colors: ( - "green": #5fcf80, + "green": #5fcf80, "gray": #3e474f ); @@ -24,7 +24,7 @@ $gray-colors: ( // UI Colors $ui-colors: ( "blue": #3f8abf, - "green": #36b55c, + "green": #5cc17a, "yellow": #ffd466, "orange": #ff9f1f, "red": #ed5a5a diff --git a/_sass/leap/modules/_alert-banners.sass b/_sass/leap/modules/_alert-banners.sass index 30ddeaa..a690f6c 100644 --- a/_sass/leap/modules/_alert-banners.sass +++ b/_sass/leap/modules/_alert-banners.sass @@ -19,16 +19,13 @@ position: absolute top: 50% transform: translateY(-50%) - - & + .alert__message padding-left: 2.5rem - &__message display: inline-block color: text-color(dark) - padding-right: 5rem - max-width: 900px + padding-right: 200px + max-width: 1100px .alert__banner--success &, .alert__banner--error & color: #fff @@ -37,16 +34,37 @@ // Styling if there is an action // This can either be a close icon, or a normal button &__action - position: absolute - top: 50% - right: 1.5rem - transform: translateY(-50%) - display: block - .alert-banner-success &, - .alert-banner-error & - color: #fff - .alert-banner-warning & - color: darken(ui-color(yellow), 45%) + &--fixed + position: absolute + top: 0 + bottom: 0 + right: 0 + width: 160px + &:before + content: '' + position: absolute + top: 0 + bottom: 0 + left: -1px + width: 2px + background-color: darken(gray-color(gray), 10%) + .alert__banner--success & + background-color: desaturate(darken(ui-color(green), 5%), 5%) + .alert__banner--warning & + background-color: desaturate(darken(ui-color(yellow), 10%), 20%) + .alert__banner--error & + background-color: desaturate(darken(ui-color(red), 10%), 20%) + &--text + top: 50% + position: absolute + transform: translateY(-50%) + width: 100% + text-align: center + .alert__banner--success &, + .alert__banner--error & + color: #fff + .alert__banner--warning & + color: darken(ui-color(yellow), 45%) // Styling for Close Icon &--close background-color: transparent @@ -54,6 +72,3 @@ position: absolute top: 0 right: 0 - bottom: 0 - display: block - vertical-align: middle diff --git a/alert-banners.html b/alert-banners.html index d4a4eff..4da83bd 100644 --- a/alert-banners.html +++ b/alert-banners.html @@ -20,12 +20,14 @@

Alert Banners

This is a warning alert banner with an icon.

- Close + X
-
+

This is an error alert banner that can be dismissed. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit doloremque explicabo ex quam animi, neque quasi veniam aspernatur.

- Text Action + + Text Action +
From d7cabee4dda878900785c7a08ae68c09707abf10 Mon Sep 17 00:00:00 2001 From: Matthew Spiel Date: Tue, 9 Aug 2016 14:27:02 -0500 Subject: [PATCH 08/20] adding in all state examples for leap page --- _sass/leap/modules/_alert-banners.sass | 53 +++++++++++++++++++++----- alert-banners.html | 21 ++++++++++ 2 files changed, 65 insertions(+), 9 deletions(-) diff --git a/_sass/leap/modules/_alert-banners.sass b/_sass/leap/modules/_alert-banners.sass index a690f6c..2be6749 100644 --- a/_sass/leap/modules/_alert-banners.sass +++ b/_sass/leap/modules/_alert-banners.sass @@ -1,9 +1,34 @@ +// Alert Default Colors +$alert-default-background: gray-color(gray) +$alert-default-text: text-color(dark) +$alert-default-background-active: darken(gray-color(gray), 8%) + +// Alert Success Colors +$alert-success-background: ui-color(green) +$alert-success-text: #fff +$alert-success-background-active: desaturate(darken(ui-color(green), 7%), 5%) + +// Alert Warning Colors +$alert-warning-background: ui-color(yellow) +$alert-warning-text: darken(ui-color(yellow), 45%) +$alert-warning-background-active: desaturate(darken(ui-color(yellow), 10%), 20%) + +// Alert Error Colors +$alert-error-background: ui-color(red) +$alert-error-text: #fff +$alert-error-background-active: desaturate(darken(ui-color(red), 10%), 20%) + +// Alert States +$alert-states: success, warning, error + + .alert &__banner background-color: gray-color(gray) border-radius: $border-radius padding: 1rem position: relative + overflow: hidden &--success background-color: ui-color(green) &--warning @@ -23,14 +48,14 @@ padding-left: 2.5rem &__message display: inline-block - color: text-color(dark) + color: $alert-default-text padding-right: 200px max-width: 1100px .alert__banner--success &, .alert__banner--error & - color: #fff + color: $alert-success-text .alert__banner--warning & - color: darken(ui-color(yellow), 45%) + color: $alert-warning-text // Styling if there is an action // This can either be a close icon, or a normal button &__action @@ -40,6 +65,15 @@ bottom: 0 right: 0 width: 160px + transition: .2s + &:hover + background-color: $alert-default-background-active + .alert__banner--success & + background-color: $alert-success-background-active + .alert__banner--warning & + background-color: $alert-warning-background-active + .alert__banner--error & + background-color: $alert-error-background-active &:before content: '' position: absolute @@ -47,14 +81,15 @@ bottom: 0 left: -1px width: 2px - background-color: darken(gray-color(gray), 10%) + background-color: $alert-default-background-active .alert__banner--success & - background-color: desaturate(darken(ui-color(green), 5%), 5%) + background-color: $alert-success-background-active .alert__banner--warning & - background-color: desaturate(darken(ui-color(yellow), 10%), 20%) + background-color: $alert-warning-background-active .alert__banner--error & - background-color: desaturate(darken(ui-color(red), 10%), 20%) + background-color: $alert-error-background-active &--text + color: $alert-default-text top: 50% position: absolute transform: translateY(-50%) @@ -62,9 +97,9 @@ text-align: center .alert__banner--success &, .alert__banner--error & - color: #fff + color: $alert-success-text .alert__banner--warning & - color: darken(ui-color(yellow), 45%) + color: $alert-warning-text // Styling for Close Icon &--close background-color: transparent diff --git a/alert-banners.html b/alert-banners.html index 4da83bd..78a757f 100644 --- a/alert-banners.html +++ b/alert-banners.html @@ -22,6 +22,13 @@

Alert Banners

This is a warning alert banner with an icon.

X
+
+ +

This is an error alert banner that can be dismissed. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit doloremque explicabo ex quam animi, neque quasi veniam aspernatur.

+ + Text Action + +

This is an error alert banner that can be dismissed. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit doloremque explicabo ex quam animi, neque quasi veniam aspernatur.

@@ -29,6 +36,20 @@

Alert Banners

Text Action
+
+ +

This is an error alert banner that can be dismissed. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit doloremque explicabo ex quam animi, neque quasi veniam aspernatur.

+ + Text Action + +
+
+ +

This is an error alert banner that can be dismissed. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit doloremque explicabo ex quam animi, neque quasi veniam aspernatur.

+ + Text Action + +
From a6ac9b466c271bb3e6d129b759fca1b939552788 Mon Sep 17 00:00:00 2001 From: Matthew Spiel Date: Tue, 9 Aug 2016 14:44:03 -0500 Subject: [PATCH 09/20] adding in code examples --- alert-banners.html | 63 +++++++++++++++++++++++----------------------- 1 file changed, 32 insertions(+), 31 deletions(-) diff --git a/alert-banners.html b/alert-banners.html index 78a757f..0fc3e65 100644 --- a/alert-banners.html +++ b/alert-banners.html @@ -8,48 +8,49 @@

Alert Banners

-

Alerts are used to give feedback to users on actions they may have taken, their account status in the app, etc. They are meant to deliver short, useful messages.

+

Alerts are used to give deliver success, warning, or error messages to users on a page. They are designed to deliver short, useful messages. The .alert__action--close and .alert__action--fixed are optional elements that can be used.

-
-

This is an alert banner with no status

+

The .alert__message element is set with a right padding of 200px to allow space for the close and fixed actions. You can use Leap's Atom classes to expand the width of the fixed action and right padding if necessary.

+ +
+

Alert! This is an alert banner with no status set.

+ 
<div class="alert__banner">
+  <p class="alert__message"><strong>Alert!</strong> This is an alert banner with no status set.</p>
+</div>
-
-

This is a success alert banner.

+
+

Success! This alert is green to communicate success!

-
+ 
<div class="alert__banner alert__banner--success">
+  <p class="alert__message"><strong>Success!</strong> This alert is green to communicate success!</p>
+</div>
+ +
-

This is a warning alert banner with an icon.

+

Warning! This yellow to communicate caution. It has the close action.

X
-
- -

This is an error alert banner that can be dismissed. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit doloremque explicabo ex quam animi, neque quasi veniam aspernatur.

- - Text Action - -
-
- -

This is an error alert banner that can be dismissed. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit doloremque explicabo ex quam animi, neque quasi veniam aspernatur.

- - Text Action - -
-
- -

This is an error alert banner that can be dismissed. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit doloremque explicabo ex quam animi, neque quasi veniam aspernatur.

- - Text Action - -
-
+ 
<div class="alert__banner alert__banner--warning">
+  <span class="alert__icon"></span>
+  <p class="alert__message"><strong>Warning!</strong> This yellow to communicate caution. It has the close action.</p>
+  <a class="alert__action--close">X</a>
+</div>
+ +
-

This is an error alert banner that can be dismissed. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit doloremque explicabo ex quam animi, neque quasi veniam aspernatur.

+

Error! This is an error alert to communicate failure. It also has a fixed action and has text that will span multiple lines to demonstrate how the alert breaks down.

- Text Action + Alert Action
+ 
<div class="alert__banner alert__banner--error">
+  <span class="alert__icon circle"></span>
+  <p class="alert__message"><strong>Error!</strong> This is an error alert to communicate failure. It also has a fixed action and has text that will span multiple lines to demonstrate how the alert breaks down.</p>
+  <a class="alert__action--fixed">
+    <span class="alert__action--text">Alert Action</span>
+  </a>
+</div>
From 003fed19e09ca93ea1de1365c91ddcae122bbded Mon Sep 17 00:00:00 2001 From: Matthew Spiel Date: Tue, 9 Aug 2016 16:45:23 -0500 Subject: [PATCH 10/20] cleaning up margings on examples --- alert-banners.html | 29 ++++++++++++++++++++++------- 1 file changed, 22 insertions(+), 7 deletions(-) diff --git a/alert-banners.html b/alert-banners.html index 0fc3e65..6a9bab9 100644 --- a/alert-banners.html +++ b/alert-banners.html @@ -7,36 +7,49 @@
-

Alert Banners

Alerts are used to give deliver success, warning, or error messages to users on a page. They are designed to deliver short, useful messages. The .alert__action--close and .alert__action--fixed are optional elements that can be used.

-

The .alert__message element is set with a right padding of 200px to allow space for the close and fixed actions. You can use Leap's Atom classes to expand the width of the fixed action and right padding if necessary.

+

The .alert__message element has by default a right padding of 200px to allow space for the close and fixed actions. You can use Leap's Atom classes to expand the width of the fixed action and the message element's right padding when necessary.

+

Default Alert

+

To get Leap's default alert style use the .alert__banner class.

Alert! This is an alert banner with no status set.

- 
<div class="alert__banner">
-  <p class="alert__message"><strong>Alert!</strong> This is an alert banner with no status set.</p>
-</div>
+
+ 
<div class="alert__banner">
+    <p class="alert__message"><strong>Alert!</strong> This is an alert banner with no status set.</p>
+  </div>
+
+

Success Alert

+

Use the .alert__banner--success to get the styles for Leap's alert success state.

Success! This alert is green to communicate success!

- 
<div class="alert__banner alert__banner--success">
+  

+    
<div class="alert__banner alert__banner--success">
   <p class="alert__message"><strong>Success!</strong> This alert is green to communicate success!</p>
 </div>

+  

 
+  
Warning Alert

+  
Use the .alert__banner--warning to get the styles for Leap's alert warning state. You can prepend the message with .alert__icon to add an icon to the banner.

   

     
     
Warning! This yellow to communicate caution. It has the close action.

     X
   

-  
<div class="alert__banner alert__banner--warning">
+  

+    
<div class="alert__banner alert__banner--warning">
   <span class="alert__icon"></span>
   <p class="alert__message"><strong>Warning!</strong> This yellow to communicate caution. It has the close action.</p>
   <a class="alert__action--close">X</a>
 </div>

+  

 
+  
Error Alert

+  
Use the .alert__banner--warning to get the styles for Leap's alert error state.

   

     
     
Error! This is an error alert to communicate failure. It also has a fixed action and has text that will span multiple lines to demonstrate how the alert breaks down.

@@ -44,6 +57,7 @@ 
Alert Banners

       Alert Action
     
   

+  

   
<div class="alert__banner alert__banner--error">
   <span class="alert__icon circle"></span>
   <p class="alert__message"><strong>Error!</strong> This is an error alert to communicate failure. It also has a fixed action and has text that will span multiple lines to demonstrate how the alert breaks down.</p>
@@ -51,6 +65,7 @@ 
Alert Banners

     <span class="alert__action--text">Alert Action</span>
   </a>
 </div>

+
From 0c0fd1a1eee85a347fcf5ec4ad4a998622a8b24a Mon Sep 17 00:00:00 2001 From: Matthew Spiel Date: Wed, 10 Aug 2016 09:09:59 -0500 Subject: [PATCH 11/20] adding in control bar files --- _sass/leap/modules/_all.sass | 1 + _sass/leap/modules/_control-bars.sass | 0 control-bars.html | 19 +++++++++++++++++++ 3 files changed, 20 insertions(+) create mode 100644 _sass/leap/modules/_control-bars.sass create mode 100644 control-bars.html diff --git a/_sass/leap/modules/_all.sass b/_sass/leap/modules/_all.sass index 57dd62b..305d34f 100644 --- a/_sass/leap/modules/_all.sass +++ b/_sass/leap/modules/_all.sass @@ -1 +1,2 @@ @import alert-banners +@import control-bars diff --git a/_sass/leap/modules/_control-bars.sass b/_sass/leap/modules/_control-bars.sass new file mode 100644 index 0000000..e69de29 diff --git a/control-bars.html b/control-bars.html new file mode 100644 index 0000000..b0e5d70 --- /dev/null +++ b/control-bars.html @@ -0,0 +1,19 @@ +--- +layout: default +title: Control Bar +navigation_weight: 11 +--- + +
+ + +

+ +

+

+
+
+
+ + +
From a297be8ce2d9e6737359ab331a5dd9aa4a9c0819 Mon Sep 17 00:00:00 2001 From: Matthew Spiel Date: Wed, 10 Aug 2016 11:46:17 -0500 Subject: [PATCH 12/20] still hashing out the control bar styling --- _sass/leap/modules/_control-bars.sass | 63 +++++++++++++++++++++++ control-bars.html | 74 ++++++++++++++++++++++++++- 2 files changed, 135 insertions(+), 2 deletions(-) diff --git a/_sass/leap/modules/_control-bars.sass b/_sass/leap/modules/_control-bars.sass index e69de29..e3df7d2 100644 --- a/_sass/leap/modules/_control-bars.sass +++ b/_sass/leap/modules/_control-bars.sass @@ -0,0 +1,63 @@ +// Control Bar +.control-bar + background-color: #fff + border-radius: $border-radius + box-shadow: 0 2px 0 rgba(#000,.1) + position: relative + padding: 0 1.5rem + display: table + +// Search +.search + display: table-cell + width: 100% + &__form + position: absolute + left: 1.25rem + top: .5rem + bottom: .5rem + width: 100% + display: table + &__label + margin-right: .5rem + display: table-cell + &__icon + width: 16px + height: 16px + display: inline-block + vertical-align: middle + background-color: gray-color(gray-light) + &--search + &--loading + display: none + &__input + border: none + outline: none + line-height: 2.4rem + width: 100% + display: table-cell + + +//Filters +.filter + position: relative + display: inline-block + &__container + list-style: none + padding: 0 + text-align: right + display: table-cell + &__label + display: block + font-size: 1rem + padding: 1rem .5rem + &__items + display: none + padding: 0 + list-style: none + position: absolute + top: 100% + left: 0 + &__item + &__value + &--selected diff --git a/control-bars.html b/control-bars.html index b0e5d70..0629ef8 100644 --- a/control-bars.html +++ b/control-bars.html @@ -1,7 +1,7 @@ --- layout: default -title: Control Bar -navigation_weight: 11 +title: Control Bars +navigation_weight: 13 ---
@@ -11,6 +11,76 @@

+ +
+
+
+ + +
+
+ + +
+
From 34cecac9bd59b8f62dc61a7613af994726f8a94d Mon Sep 17 00:00:00 2001 From: Matthew Spiel Date: Wed, 10 Aug 2016 13:55:27 -0500 Subject: [PATCH 13/20] moving over to flex box layout --- _sass/leap/modules/_control-bars.sass | 26 +++++++++++++++++--------- 1 file changed, 17 insertions(+), 9 deletions(-) diff --git a/_sass/leap/modules/_control-bars.sass b/_sass/leap/modules/_control-bars.sass index e3df7d2..f3aec24 100644 --- a/_sass/leap/modules/_control-bars.sass +++ b/_sass/leap/modules/_control-bars.sass @@ -5,25 +5,27 @@ box-shadow: 0 2px 0 rgba(#000,.1) position: relative padding: 0 1.5rem - display: table + display: flex + flex-direction: row + flex-wrap: nowrap + justify-content: space-between + width: 100% // Search .search - display: table-cell - width: 100% + flex-grow: 2 &__form - position: absolute - left: 1.25rem - top: .5rem - bottom: .5rem - width: 100% display: table + width: 100% + margin: .5rem 0 &__label - margin-right: .5rem display: table-cell + width: 16px + height: 16px &__icon width: 16px height: 16px + margin-right: .5rem display: inline-block vertical-align: middle background-color: gray-color(gray-light) @@ -33,9 +35,11 @@ &__input border: none outline: none + padding-right: 3rem line-height: 2.4rem width: 100% display: table-cell + color: text-color(base) //Filters @@ -51,6 +55,10 @@ display: block font-size: 1rem padding: 1rem .5rem + color: text-color(base) + transition: .2s + &:hover + color: text-color(medium) &__items display: none padding: 0 From e531abd9a766eb2aad13157ab5341a4437e03241 Mon Sep 17 00:00:00 2001 From: Matthew Spiel Date: Thu, 11 Aug 2016 16:46:29 -0500 Subject: [PATCH 14/20] building out responsive styles for the control bar --- _sass/leap/modules/_control-bars.sass | 78 ++++++++++++++++++++++----- control-bars.html | 41 +++++--------- 2 files changed, 78 insertions(+), 41 deletions(-) diff --git a/_sass/leap/modules/_control-bars.sass b/_sass/leap/modules/_control-bars.sass index f3aec24..75f4431 100644 --- a/_sass/leap/modules/_control-bars.sass +++ b/_sass/leap/modules/_control-bars.sass @@ -6,14 +6,19 @@ position: relative padding: 0 1.5rem display: flex - flex-direction: row - flex-wrap: nowrap - justify-content: space-between width: 100% + @media screen + flex-direction: column + +media (min-width $md) + flex-direction: row + // Search .search - flex-grow: 2 + @media screen + flex-grow: 1 + +media (min-width $md) + flex-grow: 2 &__form display: table width: 100% @@ -35,37 +40,86 @@ &__input border: none outline: none - padding-right: 3rem line-height: 2.4rem width: 100% display: table-cell color: text-color(base) - + +placeholder-style + color: text-color(light) + +media(min-width $md) + padding-right: 3rem //Filters .filter position: relative - display: inline-block + @media screen + display: block + border-top: 1px solid $border-color-light + +media (min-width $md) + display: inline-block &__container list-style: none padding: 0 - text-align: right - display: table-cell + +media (min-width $md) + display: table-cell + text-align: right &__label display: block font-size: 1rem - padding: 1rem .5rem + font-weight: $bold color: text-color(base) transition: .2s + @media screen + padding: 1rem 0 + +media (min-width $md) + padding: 1rem .5rem + margin-left: .5rem &:hover color: text-color(medium) + .filter__label--icon + fill: text-color(medium) + &--icon + width: 12px + height: auto + fill: gray-color(gray) + vertical-align: middle + margin: 0 .25rem + transition: .2s + position: relative + top: -1px + &__item + text-align: left + .topic__circle + margin-right: 1rem &__items display: none padding: 0 list-style: none position: absolute top: 100% - left: 0 - &__item + right: 0 + background-color: #fff + border: 1px solid $border-color-light + border-radius: $border-radius + padding: .25rem 0 + width: auto + min-width: 120px + max-width: 300px &__value + display: block + color: text-color(base) + padding: .25rem 1.5rem .25rem 2.5rem + white-space: nowrap + &:hover + background-color: gray-color(gray-lighter) + color: text-color(base) &--selected + + +// Topic Circles +.topic + &__circle + &--small + display: inline-block + width: .5rem + height: .5rem diff --git a/control-bars.html b/control-bars.html index 0629ef8..968a2a2 100644 --- a/control-bars.html +++ b/control-bars.html @@ -26,31 +26,14 @@

  • - Filter Label - -
    • - -
  • - Filter Label + Filter Label {% include icon.html icon="chevron" class="filter__label--icon rotate-180-xs" %} +
    • Filter Item
    • - Filter Item + Filter Item
    • Filter Item @@ -62,19 +45,19 @@

    • - Filter Label + Filter Label {% include icon.html icon="chevron" class="filter__label--icon rotate-180-xs" %}
      • From d1350bdca8cd62ea5888eb670064239e7df76ac7 Mon Sep 17 00:00:00 2001 From: Matthew Spiel Date: Fri, 12 Aug 2016 15:48:46 -0500 Subject: [PATCH 15/20] adding in markup and comments for the default control bar styles --- _sass/leap/modules/_control-bars.sass | 95 ++++++++++++++++++++------- control-bars.html | 63 +++++++++++++++--- 2 files changed, 128 insertions(+), 30 deletions(-) diff --git a/_sass/leap/modules/_control-bars.sass b/_sass/leap/modules/_control-bars.sass index 75f4431..8a7be5b 100644 --- a/_sass/leap/modules/_control-bars.sass +++ b/_sass/leap/modules/_control-bars.sass @@ -7,34 +7,57 @@ padding: 0 1.5rem display: flex width: 100% + // using flex-direction to switch between + // a stacked and side-by-side layout @media screen flex-direction: column - +media (min-width $md) + +media (min-width $lg) flex-direction: row - // Search .search @media screen flex-grow: 1 - +media (min-width $md) + +media (min-width $lg) + // using flex-grow to make the width of the search on larger screens + // area fill out evenly based on what filters are used flex-grow: 2 + margin-right: 3rem &__form display: table width: 100% margin: .5rem 0 + position: relative + // using a gradient to visually fade out the long placeholder text + &:before + content: '' + display: block + position: absolute + right: 0 + top: 0 + bottom: 0 + width: 20px + background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%) + background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,255,255,0)), color-stop(100%, rgba(255,255,255,1))) + background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%) + background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%) + background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%) + background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%) + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1 ) + z-index: 1 &__label + // using table-cell to get the label and input to play nice display: table-cell width: 16px height: 16px &__icon - width: 16px - height: 16px margin-right: .5rem display: inline-block vertical-align: middle - background-color: gray-color(gray-light) &--search + width: 16px + height: 16px + fill: text-color(light) &--loading display: none &__input @@ -44,10 +67,10 @@ width: 100% display: table-cell color: text-color(base) + position: relative + top: 1px +placeholder-style color: text-color(light) - +media(min-width $md) - padding-right: 3rem //Filters .filter @@ -55,48 +78,76 @@ @media screen display: block border-top: 1px solid $border-color-light - +media (min-width $md) + +media (min-width $lg) display: inline-block + border-top: none &__container list-style: none padding: 0 - +media (min-width $md) + // getting the filter-container to play nice + +media (min-width $lg) display: table-cell text-align: right + // Have to apply the hover styles here in order to + // keep them active when selecting items in the drop down + &:hover + .filter__label + color: text-color(medium) + .filter__label--icon + fill: text-color(medium) &__label display: block font-size: 1rem font-weight: $bold - color: text-color(base) + color: text-color(light) transition: .2s @media screen padding: 1rem 0 - +media (min-width $md) + +media (min-width $lg) padding: 1rem .5rem margin-left: .5rem - &:hover - color: text-color(medium) - .filter__label--icon - fill: text-color(medium) &--icon width: 12px height: auto fill: gray-color(gray) - vertical-align: middle - margin: 0 .25rem transition: .2s - position: relative - top: -1px + @media screen + position: absolute + top: 21px + right: 5px + +media (min-width $lg) + vertical-align: middle + margin: 0 .25rem + position: relative + top: -1px + right: 0 &__item text-align: left + position: relative .topic__circle - margin-right: 1rem + margin-right: .75rem + position: relative + top: -1px + &--selected + &:before + content: '' + width: 14px + height: 12px + display: block + position: absolute + top: 10px + left: 16px + // Using Data URI to add the checkmark for the selected state. + background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20fill%3D%22%235cc17a%22%20d%3D%22M6.4%2C13.4a1.6%2C1.6%2C0%2C0%2C1-1.13-.47L.47%2C8.13A1.6%2C1.6%2C0%2C1%2C1%2C2.73%2C5.87L6.29%2C9.43l6.88-8.25a1.6%2C1.6%2C0%2C0%2C1%2C2.46%2C2l-8%2C9.6a1.6%2C1.6%2C0%2C0%2C1-1.16.57Z%22%2F%3E%3C%2Fsvg%3E") + background-repeat: no-repeat + background-position: center center &__items display: none padding: 0 list-style: none position: absolute - top: 100% + top: 80% + z-index: 100 right: 0 background-color: #fff border: 1px solid $border-color-light diff --git a/control-bars.html b/control-bars.html index 968a2a2..61bcbcc 100644 --- a/control-bars.html +++ b/control-bars.html @@ -7,16 +7,14 @@
      -

      +

      A control bar is used to give users the ability to search and filter through a collection of content. The collection can be in card, grid, or table form. It is built to be modular. The .search and .filter elements are designed to be able to live outside the .control-bar elements can be used in tandem, or on their own. Additionally, you can change the style of a control bar so that it appears to be attached to the element directly after it by using the class .control-bar--attached

      -

      -

      @@ -27,7 +25,6 @@

    • Filter Label {% include icon.html icon="chevron" class="filter__label--icon rotate-180-xs" %} -
      • -
      -
      + 
      <div class="control-bar">
+  <!-- Search -->
+  <div class="search">
+    <form action="" class="search__form">
+      <label for="" class="search__label">
+        <!-- Use Treehouse's Native Icon Helper -->
+        {% include icon.html icon="search" class="search__icon search__icon--search" %}
+      </label>
+      <input type="text" class="search__input" placeholder="Search Courses, Conferences and Teachers...">
+    </form>
+  </div>
+
+  <!-- Filters -->
+  <ul class="filter__container">
+    <!-- Filter -->
+    <li class="filter">
+      <a href="" class="filter__label">Filter Label {% include icon.html icon="chevron" class="filter__label--icon rotate-180-xs" %}</a>
+      <ul class="filter__items">
+        <li class="filter__item">
+          <a href="" class="filter__value">Filter Item</a>
+        </li>
+        <li class="filter__item">
+          <a href="" class="filter__value filter__value--selected">Filter Item</a>
+        </li>
+        <li class="filter__item">
+          <a href="" class="filter__value">Filter Item</a>
+        </li>
+        <li class="filter__item">
+          <a href="" class="filter__value">Filter Item</a>
+        </li>
+      </ul>
+    </li>
+    <!-- Filter -->
+    <li class="filter">
+      <a href="" class="filter__label">Filter Label {% include icon.html icon="chevron" class="filter__label--icon rotate-180-xs" %}</a>
+      <ul class="filter__items">
+        <li class="filter__item filter__item--topic">
+          <a href="" class="filter__value"><span class="topic__circle topic__circle--small topic-bg-android-base circle"></span>Android</a>
+        </li>
+        <li class="filter__item filter__item--topic">
+          <a href="" class="filter__value"><span class="topic__circle topic__circle--small topic-bg-html-base circle"></span>HTML</a>
+        </li>
+        <li class="filter__item filter__item--active filter__item--topic">
+          <a href="" class="filter__value"><span class="topic__circle topic__circle--small topic-bg-css-base circle"></span>CSS</a>
+        </li>
+        <li class="filter__item filter__item--topic">
+          <a href="" class="filter__value"><span class="topic__circle topic__circle--small topic-bg-js-base circle"></span>JavaScript</a>
+        </li>
+      </ul>
+    </li>
+  </ul>
+</div>
      From b3c51c0e2dbe603445913846fe220e47eab04bfd Mon Sep 17 00:00:00 2001 From: Matthew Spiel Date: Fri, 12 Aug 2016 15:48:56 -0500 Subject: [PATCH 16/20] adding in checkmark svg file --- img/icons/checkmark.svg | 1 + 1 file changed, 1 insertion(+) create mode 100644 img/icons/checkmark.svg diff --git a/img/icons/checkmark.svg b/img/icons/checkmark.svg new file mode 100644 index 0000000..3913685 --- /dev/null +++ b/img/icons/checkmark.svg @@ -0,0 +1 @@ + From 64f00078938d46ba6b2fcf908ac74261ef6cb3bc Mon Sep 17 00:00:00 2001 From: Matthew Spiel Date: Mon, 15 Aug 2016 09:43:21 -0500 Subject: [PATCH 17/20] adding in checkmark on hover for filter itmes --- _sass/leap/modules/_control-bars.sass | 41 +++++++++++++++++---------- 1 file changed, 26 insertions(+), 15 deletions(-) diff --git a/_sass/leap/modules/_control-bars.sass b/_sass/leap/modules/_control-bars.sass index 8a7be5b..cfeeb53 100644 --- a/_sass/leap/modules/_control-bars.sass +++ b/_sass/leap/modules/_control-bars.sass @@ -123,26 +123,12 @@ right: 0 &__item text-align: left - position: relative .topic__circle margin-right: .75rem position: relative top: -1px - &--selected - &:before - content: '' - width: 14px - height: 12px - display: block - position: absolute - top: 10px - left: 16px - // Using Data URI to add the checkmark for the selected state. - background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20fill%3D%22%235cc17a%22%20d%3D%22M6.4%2C13.4a1.6%2C1.6%2C0%2C0%2C1-1.13-.47L.47%2C8.13A1.6%2C1.6%2C0%2C1%2C1%2C2.73%2C5.87L6.29%2C9.43l6.88-8.25a1.6%2C1.6%2C0%2C0%2C1%2C2.46%2C2l-8%2C9.6a1.6%2C1.6%2C0%2C0%2C1-1.16.57Z%22%2F%3E%3C%2Fsvg%3E") - background-repeat: no-repeat - background-position: center center &__items - display: none + // display: none padding: 0 list-style: none position: absolute @@ -161,10 +147,35 @@ color: text-color(base) padding: .25rem 1.5rem .25rem 2.5rem white-space: nowrap + position: relative &:hover background-color: gray-color(gray-lighter) color: text-color(base) + &:before + content: '' + width: 14px + height: 12px + display: block + position: absolute + top: 10px + left: 16px + // Using Data URI to add the checkmark for the selected state. + background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20fill%3D%22%23c6ccd2%22%20d%3D%22M6.4%2C13.4a1.6%2C1.6%2C0%2C0%2C1-1.13-.47L.47%2C8.13A1.6%2C1.6%2C0%2C1%2C1%2C2.73%2C5.87L6.29%2C9.43l6.88-8.25a1.6%2C1.6%2C0%2C0%2C1%2C2.46%2C2l-8%2C9.6a1.6%2C1.6%2C0%2C0%2C1-1.16.57Z%22%2F%3E%3C%2Fsvg%3E") + background-repeat: no-repeat + background-position: center center &--selected + &:before + content: '' + width: 14px + height: 12px + display: block + position: absolute + top: 10px + left: 16px + // Using Data URI to add the checkmark for the selected state. + background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20fill%3D%22%235cc17a%22%20d%3D%22M6.4%2C13.4a1.6%2C1.6%2C0%2C0%2C1-1.13-.47L.47%2C8.13A1.6%2C1.6%2C0%2C1%2C1%2C2.73%2C5.87L6.29%2C9.43l6.88-8.25a1.6%2C1.6%2C0%2C0%2C1%2C2.46%2C2l-8%2C9.6a1.6%2C1.6%2C0%2C0%2C1-1.16.57Z%22%2F%3E%3C%2Fsvg%3E") + background-repeat: no-repeat + background-position: center center // Topic Circles From d079c54c124f01be0e2861f03e77cc24b2a91d1a Mon Sep 17 00:00:00 2001 From: Chris Michel Date: Mon, 15 Aug 2016 13:09:28 -0700 Subject: [PATCH 18/20] added subnav info --- _includes/footer.html | 4 ++-- alert-banners.html | 14 +++++++++----- control-bars.html | 7 ++++--- 3 files changed, 15 insertions(+), 10 deletions(-) diff --git a/_includes/footer.html b/_includes/footer.html index 63f02fc..c6cad8b 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -45,8 +45,8 @@ pageName == "forms" || pageName == "icons" || pageName == "tables"; - var isModule = pageName == "alert-banner" || - pageName == "control-bar"; + var isModule = pageName == "alert-banners" || + pageName == "control-bars"; if (isAtom) { nav[0].classList.toggle('guide-navigation-item-parent--active'); diff --git a/alert-banners.html b/alert-banners.html index 6a9bab9..d406c78 100644 --- a/alert-banners.html +++ b/alert-banners.html @@ -1,7 +1,11 @@ --- layout: default title: Alert Banners -navigation_weight: 12 +subnav: + - Default + - Success + - Warning + - Error ---
      @@ -11,7 +15,7 @@

      The .alert__message element has by default a right padding of 200px to allow space for the close and fixed actions. You can use Leap's Atom classes to expand the width of the fixed action and the message element's right padding when necessary.

      -

      Default Alert

      +

      Default Alert

      To get Leap's default alert style use the .alert__banner class.

      Alert! This is an alert banner with no status set.

      @@ -22,7 +26,7 @@

      Default Alert

      </div>
      -

      Success Alert

      +

      Success Alert

      Use the .alert__banner--success to get the styles for Leap's alert success state.

      Success! This alert is green to communicate success!

      @@ -33,7 +37,7 @@

      Success Alert

      </div>
      -

      Warning Alert

      +

      Warning Alert

      Use the .alert__banner--warning to get the styles for Leap's alert warning state. You can prepend the message with .alert__icon to add an icon to the banner.

      @@ -48,7 +52,7 @@

      Warning Alert

      </div>
      -

      Error Alert

      +

      Error Alert

      Use the .alert__banner--warning to get the styles for Leap's alert error state.

      diff --git a/control-bars.html b/control-bars.html index 61bcbcc..c739ae1 100644 --- a/control-bars.html +++ b/control-bars.html @@ -1,13 +1,14 @@ --- layout: default title: Control Bars -navigation_weight: 13 +subnav: + - Default --- -
      +
      -

      A control bar is used to give users the ability to search and filter through a collection of content. The collection can be in card, grid, or table form. It is built to be modular. The .search and .filter elements are designed to be able to live outside the .control-bar elements can be used in tandem, or on their own. Additionally, you can change the style of a control bar so that it appears to be attached to the element directly after it by using the class .control-bar--attached

      +

      A control bar is used to give users the ability to search and filter through a collection of content. The collection can be in card, grid, or table form. It is built to be modular. The .search and .filter elements are designed to be able to live outside the .control-bar elements can be used in tandem, or on their own. Additionally, you can change the style of a control bar so that it appears to be attached to the element directly after it by using the class .control-bar--attached

      From 8c9504e713145f21bff6141a4364d7b2adc1fa4f Mon Sep 17 00:00:00 2001 From: Chris Michel Date: Mon, 15 Aug 2016 13:16:02 -0700 Subject: [PATCH 19/20] added close icon --- _sass/leap/modules/_alert-banners.sass | 13 +++++++++++-- alert-banners.html | 2 +- 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/_sass/leap/modules/_alert-banners.sass b/_sass/leap/modules/_alert-banners.sass index 2be6749..74df985 100644 --- a/_sass/leap/modules/_alert-banners.sass +++ b/_sass/leap/modules/_alert-banners.sass @@ -105,5 +105,14 @@ $alert-states: success, warning, error background-color: transparent border: none position: absolute - top: 0 - right: 0 + top: 18px + right: 15px + .icon-add + fill: rgba(#fff, 0.8) + width: 18px + height: 18px + transition: fill 200ms ease-in-out + &:hover, + &:active + .icon-add + fill: #fff diff --git a/alert-banners.html b/alert-banners.html index d406c78..89b4d63 100644 --- a/alert-banners.html +++ b/alert-banners.html @@ -42,7 +42,7 @@

      Warning Alert

      Warning! This yellow to communicate caution. It has the close action.

      - X + {% include icon.html icon="add" class="rotate-45-xs" %} 
      <div class="alert__banner alert__banner--warning">

From 2e5001fb981024663fa97da4ab1a180a8d0983ad Mon Sep 17 00:00:00 2001
From: Chris Michel 
Date: Mon, 15 Aug 2016 13:19:31 -0700
Subject: [PATCH 20/20] udpated docs code for close icon in alerts

---
 alert-banners.html | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/alert-banners.html b/alert-banners.html
index 89b4d63..cf6519d 100644
--- a/alert-banners.html
+++ b/alert-banners.html
@@ -48,7 +48,10 @@ 
      Warning Alert
      
     
      <div class="alert__banner alert__banner--warning">
   <span class="alert__icon"></span>
   <p class="alert__message"><strong>Warning!</strong> This yellow to communicate caution. It has the close action.</p>
-  <a class="alert__action--close">X</a>
+  <a class="alert__action--close">
+    <!-- Make sure to use the in-app rails helper instead -->
+    {% include icon.html icon="add" class="rotate-45-xs" %}
+  </a>
 </div>