From e60d1fc0c562aacceee3145db7501f1c6e73f4d4 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Thu, 14 Nov 2013 09:32:13 -0600 Subject: [PATCH] badge colours --- dist/css/ionic.css | 70 +++++++++++++++++++++--------------------- scss/_badge.scss | 73 ++++++++++++++++++++++---------------------- scss/_mixins.scss | 9 ++++++ scss/_variables.scss | 41 +++++++++++++++++++------ test/lists.html | 46 ++++++++++++++++------------ 5 files changed, 138 insertions(+), 101 deletions(-) diff --git a/dist/css/ionic.css b/dist/css/ionic.css index a399e698d3..db0147365f 100644 --- a/dist/css/ionic.css +++ b/dist/css/ionic.css @@ -3779,52 +3779,52 @@ button.item-button-right:after { * -------------------------------------------------- */ .badge { + background-color: transparent; + color: #aaaaaa; display: inline-block; - min-width: 10px; padding: 3px 8px; - font-size: 14px; - font-weight: bold; - color: white; - line-height: 16px; + min-width: 10px; + border-radius: 10px; vertical-align: baseline; - white-space: nowrap; text-align: center; - background-color: #f8f8f8; - border-radius: 10px; } + white-space: nowrap; + font-weight: bold; + font-size: 14px; + line-height: 16px; } .badge:empty { display: none; } + .badge.badge-light { + background-color: white; + color: #444444; } + .badge.badge-stable { + background-color: #f8f8f8; + color: #444444; } + .badge.badge-positive { + background-color: #4a87ee; + color: white; } + .badge.badge-calm { + background-color: #43cee6; + color: white; } + .badge.badge-assertive { + background-color: #ef4e3a; + color: white; } + .badge.badge-balanced { + background-color: #66cc33; + color: white; } + .badge.badge-energized { + background-color: #f0b840; + color: white; } + .badge.badge-royal { + background-color: #8a6de9; + color: white; } + .badge.badge-dark { + background-color: #444444; + color: white; } .button .badge { position: relative; top: -1px; } -.badge-light { - background-color: white; } - -.badge-stable { - background-color: #f8f8f8; } - -.badge-positive { - background-color: #4a87ee; } - -.badge-calm { - background-color: #43cee6; } - -.badge-assertive { - background-color: #ef4e3a; } - -.badge-balanced { - background-color: #66cc33; } - -.badge-energized { - background-color: #f0b840; } - -.badge-royal { - background-color: #8a6de9; } - -.badge-dark { - background-color: #444444; } - /** * Slide Box * -------------------------------------------------- diff --git a/scss/_badge.scss b/scss/_badge.scss index 400cf8745c..d3b266f455 100644 --- a/scss/_badge.scss +++ b/scss/_badge.scss @@ -5,22 +5,49 @@ */ .badge { + @include badge-style($badge-default-bg, $badge-default-text); display: inline-block; - min-width: 10px; padding: 3px 8px; - font-size: $badge-font-size; - font-weight: $badge-font-weight; - color: $badge-color; - line-height: $badge-line-height; - vertical-align: baseline; - white-space: nowrap; - text-align: center; - background-color: $badge-bg; + min-width: 10px; border-radius: $badge-border-radius; + vertical-align: baseline; + text-align: center; + white-space: nowrap; + font-weight: $badge-font-weight; + font-size: $badge-font-size; + line-height: $badge-line-height; &:empty { display: none; } + + &.badge-light { + @include badge-style($badge-light-bg, $badge-light-text); + } + &.badge-stable { + @include badge-style($badge-stable-bg, $badge-stable-text); + } + &.badge-positive { + @include badge-style($badge-positive-bg, $badge-positive-text); + } + &.badge-calm { + @include badge-style($badge-calm-bg, $badge-calm-text); + } + &.badge-assertive { + @include badge-style($badge-assertive-bg, $badge-assertive-text); + } + &.badge-balanced { + @include badge-style($badge-balanced-bg, $badge-balanced-text); + } + &.badge-energized { + @include badge-style($badge-energized-bg, $badge-energized-text); + } + &.badge-royal { + @include badge-style($badge-royal-bg, $badge-royal-text); + } + &.badge-dark { + @include badge-style($badge-dark-bg, $badge-dark-text); + } } // Quick fix for labels/badges in buttons @@ -28,31 +55,3 @@ position: relative; top: -1px; } - -.badge-light { - background-color: $light; -} -.badge-stable { - background-color: $stable; -} -.badge-positive { - background-color: $positive; -} -.badge-calm { - background-color: $calm; -} -.badge-assertive { - background-color: $assertive; -} -.badge-balanced { - background-color: $balanced; -} -.badge-energized { - background-color: $energized; -} -.badge-royal { - background-color: $royal; -} -.badge-dark { - background-color: $dark; -} diff --git a/scss/_mixins.scss b/scss/_mixins.scss index e1c8765b59..d61848490c 100644 --- a/scss/_mixins.scss +++ b/scss/_mixins.scss @@ -91,6 +91,15 @@ } +// Badge Mixins +// -------------------------------------------------- + +@mixin badge-style($bg-color, $color) { + background-color: $bg-color; + color: $color; +} + + // Utility Mixins // -------------------------------------------------- diff --git a/scss/_variables.scss b/scss/_variables.scss index 7e574545b1..5f0aa1f047 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -488,17 +488,40 @@ $sheet-border-radius-bottom: 0px 0px 3px 3px !default; // Badges // ------------------------- -$badge-color: $light !default; -$badge-link-hover-color: $light !default; -$badge-bg: $stable !default; +$badge-font-size: 14px !default; +$badge-line-height: 16px !default; +$badge-font-weight: bold !default; +$badge-border-radius: 10px !default; -$badge-active-color: $link-color !default; -$badge-active-bg: $light !default; +$badge-light-bg: $button-light-bg; +$badge-light-text: $button-light-text; -$badge-font-size: 14px !default; -$badge-line-height: 16px !default; -$badge-font-weight: bold !default; -$badge-border-radius: 10px !default; +$badge-stable-bg: $button-stable-bg; +$badge-stable-text: $button-stable-text; + +$badge-positive-bg: $button-positive-bg; +$badge-positive-text: $button-positive-text; + +$badge-calm-bg: $button-calm-bg; +$badge-calm-text: $button-calm-text; + +$badge-balanced-bg: $button-balanced-bg; +$badge-balanced-text: $button-balanced-text; + +$badge-assertive-bg: $button-assertive-bg; +$badge-assertive-text: $button-assertive-text; + +$badge-energized-bg: $button-energized-bg; +$badge-energized-text: $button-energized-text; + +$badge-royal-bg: $button-royal-bg; +$badge-royal-text: $button-royal-text; + +$badge-dark-bg: $button-dark-bg; +$badge-dark-text: $button-dark-text; + +$badge-default-bg: transparent !default; +$badge-default-text: #AAAAAA !default; // Z-Indexes diff --git a/test/lists.html b/test/lists.html index 5b1c7074d0..602afb334e 100644 --- a/test/lists.html +++ b/test/lists.html @@ -48,28 +48,28 @@ - + Check mail - 5 + 5 Call Ma - - Me Button - + Record album Grammy @@ -77,7 +77,7 @@ - + Breaking Bad Blue, yellow, pink @@ -89,7 +89,7 @@ - + Games Super Mario @@ -97,7 +97,7 @@ - + Music JT @@ -105,7 +105,7 @@ - + Shopping Bag @@ -113,9 +113,9 @@ - + Friends - 0 + 0 @@ -170,9 +170,15 @@
Multiple Badges - 62 - 4 - 143 + 1 + 2 + 3 + 4 + 7 + 5 + 6 + 8 + 9
@@ -252,12 +258,12 @@
- + Madison, WI - + Driving Directions @@ -273,7 +279,7 @@
- + Madison, WI
@@ -281,7 +287,7 @@
- + Driving Directions
@@ -308,14 +314,14 @@
- + Icon is filled!!
- + .fill-icon