diff --git a/README.md b/README.md index e0b68ec..6f294ab 100644 --- a/README.md +++ b/README.md @@ -361,12 +361,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 @@ -375,7 +375,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/_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/_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 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 new file mode 100644 index 0000000..74df985 --- /dev/null +++ b/_sass/leap/modules/_alert-banners.sass @@ -0,0 +1,118 @@ +// 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 + 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: $alert-default-text + padding-right: 200px + max-width: 1100px + .alert__banner--success &, + .alert__banner--error & + color: $alert-success-text + .alert__banner--warning & + color: $alert-warning-text + // Styling if there is an action + // This can either be a close icon, or a normal button + &__action + &--fixed + position: absolute + top: 0 + 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 + top: 0 + bottom: 0 + left: -1px + width: 2px + 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 + &--text + color: $alert-default-text + top: 50% + position: absolute + transform: translateY(-50%) + width: 100% + text-align: center + .alert__banner--success &, + .alert__banner--error & + color: $alert-success-text + .alert__banner--warning & + color: $alert-warning-text + // Styling for Close Icon + &--close + background-color: transparent + border: none + position: absolute + 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/_sass/leap/modules/_all.sass b/_sass/leap/modules/_all.sass new file mode 100644 index 0000000..305d34f --- /dev/null +++ b/_sass/leap/modules/_all.sass @@ -0,0 +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..cfeeb53 --- /dev/null +++ b/_sass/leap/modules/_control-bars.sass @@ -0,0 +1,187 @@ +// 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: flex + width: 100% + // using flex-direction to switch between + // a stacked and side-by-side layout + @media screen + flex-direction: column + +media (min-width $lg) + flex-direction: row + +// Search +.search + @media screen + flex-grow: 1 + +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 + margin-right: .5rem + display: inline-block + vertical-align: middle + &--search + width: 16px + height: 16px + fill: text-color(light) + &--loading + display: none + &__input + border: none + outline: none + line-height: 2.4rem + width: 100% + display: table-cell + color: text-color(base) + position: relative + top: 1px + +placeholder-style + color: text-color(light) + +//Filters +.filter + position: relative + @media screen + display: block + border-top: 1px solid $border-color-light + +media (min-width $lg) + display: inline-block + border-top: none + &__container + list-style: none + padding: 0 + // 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(light) + transition: .2s + @media screen + padding: 1rem 0 + +media (min-width $lg) + padding: 1rem .5rem + margin-left: .5rem + &--icon + width: 12px + height: auto + fill: gray-color(gray) + transition: .2s + @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 + .topic__circle + margin-right: .75rem + position: relative + top: -1px + &__items + // display: none + padding: 0 + list-style: none + position: absolute + top: 80% + z-index: 100 + 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 + 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 +.topic + &__circle + &--small + display: inline-block + width: .5rem + height: .5rem diff --git a/alert-banners.html b/alert-banners.html new file mode 100644 index 0000000..cf6519d --- /dev/null +++ b/alert-banners.html @@ -0,0 +1,78 @@ +--- +layout: default +title: Alert Banners +subnav: + - Default + - Success + - Warning + - Error +--- + +
+ + +

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

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

+ {% include icon.html icon="add" class="rotate-45-xs" %} +
+
+ 
<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">
+    <!-- Make sure to use the in-app rails helper instead -->
+    {% include icon.html icon="add" class="rotate-45-xs" %}
+  </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.

+ + 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>
+
+ + +
diff --git a/control-bars.html b/control-bars.html new file mode 100644 index 0000000..c739ae1 --- /dev/null +++ b/control-bars.html @@ -0,0 +1,120 @@ +--- +layout: default +title: Control Bars +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

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