From 2007774cdd687a9b886df0c7186a260eac98cd3f Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Wed, 13 Nov 2013 08:53:31 -0600 Subject: [PATCH] remove primary/secondary/tertiary colours --- dist/css/ionic.css | 413 +++++++++------------------------------- scss/_action-sheet.scss | 2 +- scss/_badge.scss | 17 +- scss/_bar.scss | 43 +---- scss/_button.scss | 34 +--- scss/_items.scss | 7 +- scss/_scaffolding.scss | 2 +- scss/_tabs.scss | 34 +--- scss/_util.scss | 79 ++------ scss/_variables.scss | 120 +++--------- test/button-bar.html | 28 +-- test/buttons.html | 128 ++++++------- 12 files changed, 241 insertions(+), 666 deletions(-) diff --git a/dist/css/ionic.css b/dist/css/ionic.css index ef5a161aad..011ab91611 100644 --- a/dist/css/ionic.css +++ b/dist/css/ionic.css @@ -2552,26 +2552,19 @@ a.subdued‎ { color: #fff; } .bar.bar-clear .title { color: #fff; } - .bar.bar-primary { - background-color: #4a87ee; - border-color: #1b68ea; - background-image: linear-gradient(0deg, #1b68ea, #1b68ea 50%, transparent 50%); - color: white; } - .bar.bar-primary .title { - color: white; } - .bar.bar-secondary { + .bar.bar-light { background-color: white; - border-color: #d9d9d9; - background-image: linear-gradient(0deg, #d9d9d9, #d9d9d9 50%, transparent 50%); + border-color: #b2b2b2; + background-image: linear-gradient(0deg, #b2b2b2, #b2b2b2 50%, transparent 50%); color: #444444; } - .bar.bar-secondary .title { + .bar.bar-light .title { color: #444444; } - .bar.bar-tertiary { - background-color: whitesmoke; - border-color: #b5b5b5; - background-image: linear-gradient(0deg, #b5b5b5, #b5b5b5 50%, transparent 50%); + .bar.bar-stable { + background-color: #f8f8f8; + border-color: #bbbbbb; + background-image: linear-gradient(0deg, #bbbbbb, #bbbbbb 50%, transparent 50%); color: #444444; } - .bar.bar-tertiary .title { + .bar.bar-stable .title { color: #444444; } .bar.bar-positive { background-color: #4a87ee; @@ -2615,20 +2608,6 @@ a.subdued‎ { color: white; } .bar.bar-royal .title { color: white; } - .bar.bar-light { - background-color: white; - border-color: #dddddd; - background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%); - color: #444444; } - .bar.bar-light .title { - color: #444444; } - .bar.bar-stable { - background-color: #f8f8f8; - border-color: #bbbbbb; - background-image: linear-gradient(0deg, #bbbbbb, #bbbbbb 50%, transparent 50%); - color: #444444; } - .bar.bar-stable .title { - color: #444444; } .bar.bar-dark { background-color: #444444; border-color: #444444; @@ -2677,52 +2656,35 @@ a.subdued‎ { right: 5px; bottom: 5px; } -.bar-primary .button { - color: white; - background-color: #4a87ee; - border-color: #1b68ea; } - .bar-primary .button:hover { - color: white; - text-decoration: none; } - .bar-primary .button.active, .bar-primary .button:active { - background-color: #3378ec; - box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); - border-color: #1b68ea; } - .bar-primary .button.button-clear { - color: white; - background: none; - box-shadow: none; - font-size: 18px; } - -.bar-secondary .button { +.bar-light .button { color: #444444; background-color: white; - border-color: #d9d9d9; } - .bar-secondary .button:hover { + border-color: #b2b2b2; } + .bar-light .button:hover { color: #444444; text-decoration: none; } - .bar-secondary .button.active, .bar-secondary .button:active { - background-color: white; + .bar-light .button.active, .bar-light .button:active { + background-color: #222222; box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); - border-color: #cccccc; } - .bar-secondary .button.button-clear { - color: #444444; + border-color: black; } + .bar-light .button.button-clear { + color: white; background: none; box-shadow: none; font-size: 18px; } -.bar-tertiary .button { +.bar-stable .button { color: #444444; - background-color: whitesmoke; - border-color: #b5b5b5; } - .bar-tertiary .button:hover { + background-color: #f8f8f8; + border-color: #bbbbbb; } + .bar-stable .button:hover { color: #444444; text-decoration: none; } - .bar-tertiary .button.active, .bar-tertiary .button:active { - background-color: white; + .bar-stable .button.active, .bar-stable .button:active { + background-color: #222222; box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); - border-color: #cfcfcf; } - .bar-tertiary .button.button-clear { + border-color: black; } + .bar-stable .button.button-clear { color: white; background: none; box-shadow: none; @@ -2830,40 +2792,6 @@ a.subdued‎ { box-shadow: none; font-size: 18px; } -.bar-light .button { - color: #444444; - background-color: white; - border-color: #dddddd; } - .bar-light .button:hover { - color: #444444; - text-decoration: none; } - .bar-light .button.active, .bar-light .button:active { - background-color: #222222; - box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); - border-color: black; } - .bar-light .button.button-clear { - color: white; - background: none; - box-shadow: none; - font-size: 18px; } - -.bar-stable .button { - color: #444444; - background-color: #f8f8f8; - border-color: #bbbbbb; } - .bar-stable .button:hover { - color: #444444; - text-decoration: none; } - .bar-stable .button.active, .bar-stable .button:active { - background-color: #222222; - box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); - border-color: black; } - .bar-stable .button.button-clear { - color: white; - background: none; - box-shadow: none; - font-size: 18px; } - .bar-dark .button { color: white; background-color: #444444; @@ -2933,20 +2861,15 @@ a.subdued‎ { border-top-width: 1px; background-size: 0; line-height: 49px; } - .tabs.tabs-primary { - background-color: #4a87ee; - background-image: linear-gradient(0deg, #1b68ea, #1b68ea 50%, transparent 50%); - border-color: #1b68ea; - color: white; } - .tabs.tabs-secondary { + .tabs.tabs-light { background-color: white; - background-image: linear-gradient(0deg, #d9d9d9, #d9d9d9 50%, transparent 50%); - border-color: #d9d9d9; + background-image: linear-gradient(0deg, #b2b2b2, #b2b2b2 50%, transparent 50%); + border-color: #b2b2b2; color: #444444; } - .tabs.tabs-tertiary { - background-color: whitesmoke; - background-image: linear-gradient(0deg, #b5b5b5, #b5b5b5 50%, transparent 50%); - border-color: #b5b5b5; + .tabs.tabs-stable { + background-color: #f8f8f8; + background-image: linear-gradient(0deg, #bbbbbb, #bbbbbb 50%, transparent 50%); + border-color: #bbbbbb; color: #444444; } .tabs.tabs-positive { background-color: #4a87ee; @@ -2978,16 +2901,6 @@ a.subdued‎ { background-image: linear-gradient(0deg, #552bdf, #552bdf 50%, transparent 50%); border-color: #552bdf; color: white; } - .tabs.tabs-light { - background-color: white; - background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%); - border-color: #dddddd; - color: #444444; } - .tabs.tabs-stable { - background-color: #f8f8f8; - background-image: linear-gradient(0deg, #bbbbbb, #bbbbbb 50%, transparent 50%); - border-color: #bbbbbb; - color: #444444; } .tabs.tabs-dark { background-color: #444444; background-image: linear-gradient(0deg, #444444, #444444 50%, transparent 50%); @@ -3055,12 +2968,10 @@ a.subdued‎ { /* Active state for tab */ .tab-item.active, .tab-item:active { opacity: 1; } - .tab-item.active.tab-item-primary, .tab-item:active.tab-item-primary { - color: #4a87ee; } - .tab-item.active.tab-item-secondary, .tab-item:active.tab-item-secondary { + .tab-item.active.tab-item-light, .tab-item:active.tab-item-light { color: white; } - .tab-item.active.tab-item-tertiary, .tab-item:active.tab-item-tertiary { - color: whitesmoke; } + .tab-item.active.tab-item-stable, .tab-item:active.tab-item-stable { + color: #f8f8f8; } .tab-item.active.tab-item-positive, .tab-item:active.tab-item-positive { color: #4a87ee; } .tab-item.active.tab-item-calm, .tab-item:active.tab-item-calm { @@ -3073,10 +2984,6 @@ a.subdued‎ { color: #f0b840; } .tab-item.active.tab-item-royal, .tab-item:active.tab-item-royal { color: #8a6de9; } - .tab-item.active.tab-item-light, .tab-item:active.tab-item-light { - color: white; } - .tab-item.active.tab-item-stable, .tab-item:active.tab-item-stable { - color: #f8f8f8; } .tab-item.active.tab-item-dark, .tab-item:active.tab-item-dark { color: #444444; } @@ -3233,29 +3140,21 @@ a.subdued‎ { .item.active .item-heading, .item.active:hover .item-heading, .item.active:focus .item-heading { color: inherit; } -.item-primary.active { +.item-light.active { color: white; - background-color: #4a87ee; - border-color: #444444; } - .item-primary.active .item-content { - background-color: #4a87ee; - color: white; } - -.item-secondary.active { - color: #444444; background-color: white; border-color: #444444; } - .item-secondary.active .item-content { + .item-light.active .item-content { background-color: white; - color: #444444; } + color: white; } -.item-tertiary.active { - color: #444444; - background-color: whitesmoke; +.item-stable.active { + color: white; + background-color: #f8f8f8; border-color: #444444; } - .item-tertiary.active .item-content { - background-color: whitesmoke; - color: #444444; } + .item-stable.active .item-content { + background-color: #f8f8f8; + color: white; } .item-positive.active { color: white; @@ -3297,22 +3196,6 @@ a.subdued‎ { background-color: #8a6de9; color: white; } -.item-light.active { - color: white; - background-color: white; - border-color: #444444; } - .item-light.active .item-content { - background-color: white; - color: white; } - -.item-stable.active { - color: white; - background-color: #f8f8f8; - border-color: #444444; } - .item-stable.active .item-content { - background-color: #f8f8f8; - color: white; } - .item-dark.active { color: white; background-color: #444444; @@ -3837,14 +3720,11 @@ button.item-button-right:after { position: relative; top: -1px; } -.badge-primary { - background-color: #4a87ee; } - -.badge-secondary { +.badge-light { background-color: white; } -.badge-tertiary { - background-color: whitesmoke; } +.badge-stable { + background-color: #f8f8f8; } .badge-positive { background-color: #4a87ee; } @@ -3864,12 +3744,6 @@ button.item-button-right:after { .badge-royal { background-color: #8a6de9; } -.badge-light { - background-color: white; } - -.badge-stable { - background-color: #f8f8f8; } - .badge-dark { background-color: #444444; } @@ -4413,73 +4287,50 @@ input[type="range"] { .button.block, .button.button-full { margin-top: 10px; margin-bottom: 10px; } - .button.button-primary { - color: white; - background-color: #4a87ee; - border-color: #1b68ea; } - .button.button-primary:hover { - color: white; - text-decoration: none; } - .button.button-primary.active, .button.button-primary:active { - background-color: #3378ec; - box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); - border-color: #1b68ea; } - .button.button-primary.button-clear { - color: #4a87ee; - background: none; - box-shadow: none; } - .button.button-primary.button-outline { - background: transparent; - border-color: #4a87ee; - color: #4a87ee; } - .button.button-primary.button-outline.active, .button.button-primary.button-outline:active { - background-color: #4a87ee; - color: #fff; - box-shadow: none; } - .button.button-secondary { + .button.button-light { color: #444444; background-color: white; - border-color: #d9d9d9; } - .button.button-secondary:hover { + border-color: #b2b2b2; } + .button.button-light:hover { color: #444444; text-decoration: none; } - .button.button-secondary.active, .button.button-secondary:active { - background-color: white; + .button.button-light.active, .button.button-light:active { + background-color: #222222; box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); - border-color: #cccccc; } - .button.button-secondary.button-clear { - color: #d9d9d9; + border-color: black; } + .button.button-light.button-clear { + color: white; background: none; box-shadow: none; } - .button.button-secondary.button-outline { + .button.button-light.button-outline { background: transparent; - border-color: #d9d9d9; - color: #444444; } - .button.button-secondary.button-outline.active, .button.button-secondary.button-outline:active { - background-color: #d9d9d9; + border-color: white; + color: white; } + .button.button-light.button-outline.active, .button.button-light.button-outline:active { + background-color: white; color: #fff; box-shadow: none; } - .button.button-tertiary { + .button.button-stable { color: #444444; - background-color: whitesmoke; - border-color: #b5b5b5; } - .button.button-tertiary:hover { + background-color: #f8f8f8; + border-color: #bbbbbb; } + .button.button-stable:hover { color: #444444; text-decoration: none; } - .button.button-tertiary.active, .button.button-tertiary:active { - background-color: white; + .button.button-stable.active, .button.button-stable:active { + background-color: #222222; box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); - border-color: #cfcfcf; } - .button.button-tertiary.button-clear { - color: whitesmoke; + border-color: black; } + .button.button-stable.button-clear { + color: #f8f8f8; background: none; box-shadow: none; } - .button.button-tertiary.button-outline { + .button.button-stable.button-outline { background: transparent; - border-color: whitesmoke; - color: whitesmoke; } - .button.button-tertiary.button-outline.active, .button.button-tertiary.button-outline:active { - background-color: whitesmoke; + border-color: #f8f8f8; + color: #f8f8f8; } + .button.button-stable.button-outline.active, .button.button-stable.button-outline:active { + background-color: #f8f8f8; color: #fff; box-shadow: none; } .button.button-positive { @@ -4620,52 +4471,6 @@ input[type="range"] { background-color: #8a6de9; color: #fff; box-shadow: none; } - .button.button-light { - color: #444444; - background-color: white; - border-color: #dddddd; } - .button.button-light:hover { - color: #444444; - text-decoration: none; } - .button.button-light.active, .button.button-light:active { - background-color: #222222; - box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); - border-color: black; } - .button.button-light.button-clear { - color: white; - background: none; - box-shadow: none; } - .button.button-light.button-outline { - background: transparent; - border-color: white; - color: white; } - .button.button-light.button-outline.active, .button.button-light.button-outline:active { - background-color: white; - color: #fff; - box-shadow: none; } - .button.button-stable { - color: #444444; - background-color: #f8f8f8; - border-color: #bbbbbb; } - .button.button-stable:hover { - color: #444444; - text-decoration: none; } - .button.button-stable.active, .button.button-stable:active { - background-color: #222222; - box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); - border-color: black; } - .button.button-stable.button-clear { - color: #f8f8f8; - background: none; - box-shadow: none; } - .button.button-stable.button-outline { - background: transparent; - border-color: #f8f8f8; - color: #f8f8f8; } - .button.button-stable.button-outline.active, .button.button-stable.button-outline:active { - background-color: #f8f8f8; - color: #fff; - box-shadow: none; } .button.button-dark { color: white; background-color: #444444; @@ -5263,6 +5068,24 @@ a.button { * notice we purposely do not use words like "red" or "blue", but * instead have colors which represent an emotion or generic theme. */ +.light { + color: white; } + +.light-bg { + background-color: white; } + +.light-border { + border-color: #b2b2b2; } + +.stable { + color: #f8f8f8; } + +.stable-bg { + background-color: #f8f8f8; } + +.stable-border { + border-color: #bbbbbb; } + .positive { color: #4a87ee; } @@ -5317,24 +5140,6 @@ a.button { .royal-border { border-color: #552bdf; } -.light { - color: white; } - -.light-bg { - background-color: white; } - -.light-border { - border-color: #dddddd; } - -.stable { - color: #f8f8f8; } - -.stable-bg { - background-color: #f8f8f8; } - -.stable-border { - border-color: #bbbbbb; } - .dark { color: #444444; } @@ -5344,40 +5149,6 @@ a.button { .dark-border { border-color: #444444; } -/** - * Brand Colors - * -------------------------------------------------- - * Brand colors are your brand's colors...override the defaults to - * your app's theme! Throughout Ionic's CSS we use brand-primary, - * brand-secondary and brand-tertiary (ter·tia·ry: of third rank, importance, or value). - */ -.primary { - color: #4a87ee; } - -.primary-bg { - background-color: #4a87ee; } - -.primary-border { - border-color: #1b68ea; } - -.secondary { - color: white; } - -.secondary-bg { - background-color: white; } - -.secondary-border { - border-color: #d9d9d9; } - -.tertiary { - color: whitesmoke; } - -.tertiary-bg { - background-color: whitesmoke; } - -.tertiary-border { - border-color: #b5b5b5; } - /** * Platform * -------------------------------------------------- diff --git a/scss/_action-sheet.scss b/scss/_action-sheet.scss index e388a226b8..705fa5687f 100644 --- a/scss/_action-sheet.scss +++ b/scss/_action-sheet.scss @@ -21,7 +21,7 @@ border-radius: none; background-color: transparent; - color: $primary; + color: $positive; font-size: 18px; &.destructive { diff --git a/scss/_badge.scss b/scss/_badge.scss index e6a910958b..400cf8745c 100644 --- a/scss/_badge.scss +++ b/scss/_badge.scss @@ -29,14 +29,11 @@ top: -1px; } -.badge-primary { - background-color: $primary; +.badge-light { + background-color: $light; } -.badge-secondary { - background-color: $secondary; -} -.badge-tertiary { - background-color: $tertiary; +.badge-stable { + background-color: $stable; } .badge-positive { background-color: $positive; @@ -56,12 +53,6 @@ .badge-royal { background-color: $royal; } -.badge-light { - background-color: $light; -} -.badge-stable { - background-color: $stable; -} .badge-dark { background-color: $dark; } diff --git a/scss/_bar.scss b/scss/_bar.scss index 956a58ba5d..19ad53b0de 100644 --- a/scss/_bar.scss +++ b/scss/_bar.scss @@ -50,14 +50,11 @@ } } - &.bar-primary { - @include bar-style($bar-primary-bg, $bar-primary-border, $bar-primary-text); + &.bar-light { + @include bar-style($bar-light-bg, $bar-light-border, $bar-light-text); } - &.bar-secondary { - @include bar-style($bar-secondary-bg, $bar-secondary-border, $bar-secondary-text); - } - &.bar-tertiary { - @include bar-style($bar-tertiary-bg, $bar-tertiary-border, $bar-tertiary-text); + &.bar-stable { + @include bar-style($bar-stable-bg, $bar-stable-border, $bar-stable-text); } &.bar-positive { @include bar-style($bar-positive-bg, $bar-positive-border, $bar-positive-text); @@ -77,12 +74,6 @@ &.bar-royal { @include bar-style($bar-royal-bg, $bar-royal-border, $bar-royal-text); } - &.bar-light { - @include bar-style($bar-light-bg, $bar-light-border, $bar-light-text); - } - &.bar-stable { - @include bar-style($bar-stable-bg, $bar-stable-border, $bar-stable-text); - } &.bar-dark { @include bar-style($bar-dark-bg, $bar-dark-border, $bar-dark-text); } @@ -153,21 +144,15 @@ } // Default styles for buttons inside of styled bars -.bar-primary { +.bar-light { .button { - @include button-style($bar-primary-bg, $bar-primary-border, $bar-primary-active-bg, $bar-primary-active-border, $bar-primary-text); + @include button-style($bar-light-bg, $bar-light-border, $bar-light-active-bg, $bar-light-active-border, $bar-light-text); @include button-clear(#fff, $bar-title-font-size); } } -.bar-secondary { +.bar-stable { .button { - @include button-style($bar-secondary-bg, $bar-secondary-border, $bar-secondary-active-bg, $bar-secondary-active-border, $bar-secondary-text); - @include button-clear($dark, $bar-title-font-size); - } -} -.bar-tertiary { - .button { - @include button-style($bar-tertiary-bg, $bar-tertiary-border, $bar-tertiary-active-bg, $bar-tertiary-active-border, $bar-tertiary-text); + @include button-style($bar-stable-bg, $bar-stable-border, $bar-stable-active-bg, $bar-stable-active-border, $bar-stable-text); @include button-clear(#fff, $bar-title-font-size); } } @@ -207,18 +192,6 @@ @include button-clear(#fff, $bar-title-font-size); } } -.bar-light { - .button { - @include button-style($bar-light-bg, $bar-light-border, $bar-light-active-bg, $bar-light-active-border, $bar-light-text); - @include button-clear(#fff, $bar-title-font-size); - } -} -.bar-stable { - .button { - @include button-style($bar-stable-bg, $bar-stable-border, $bar-stable-active-bg, $bar-stable-active-border, $bar-stable-text); - @include button-clear(#fff, $bar-title-font-size); - } -} .bar-dark { .button { @include button-style($bar-dark-bg, $bar-dark-border, $bar-dark-active-bg, $bar-dark-active-border, $bar-dark-text); diff --git a/scss/_button.scss b/scss/_button.scss index d2cf89266e..fd68861a8e 100644 --- a/scss/_button.scss +++ b/scss/_button.scss @@ -43,22 +43,16 @@ margin-bottom: $button-block-margin; } - &.button-primary { - @include button-style($button-primary-bg, $button-primary-border, $button-primary-active-bg, $button-primary-active-border, $button-primary-text); - @include button-clear($button-primary-bg); - @include button-outline($button-primary-bg); + &.button-light { + @include button-style($button-light-bg, $button-light-border, $button-light-active-bg, $button-light-active-border, $button-light-text); + @include button-clear($button-light-bg); + @include button-outline($button-light-bg); } - &.button-secondary { - @include button-style($button-secondary-bg, $button-secondary-border, $button-secondary-active-bg, $button-secondary-active-border, $button-secondary-text); - @include button-clear($button-secondary-border); - @include button-outline($button-secondary-border, $dark); - } - - &.button-tertiary { - @include button-style($button-tertiary-bg, $button-tertiary-border, $button-tertiary-active-bg, $button-tertiary-active-border, $button-tertiary-text); - @include button-clear($button-tertiary-bg); - @include button-outline($button-tertiary-bg); + &.button-stable { + @include button-style($button-stable-bg, $button-stable-border, $button-stable-active-bg, $button-stable-active-border, $button-stable-text); + @include button-clear($button-stable-bg); + @include button-outline($button-stable-bg); } &.button-positive { @@ -97,18 +91,6 @@ @include button-outline($button-royal-bg); } - &.button-light { - @include button-style($button-light-bg, $button-light-border, $button-light-active-bg, $button-light-active-border, $button-light-text); - @include button-clear($button-light-bg); - @include button-outline($button-light-bg); - } - - &.button-stable { - @include button-style($button-stable-bg, $button-stable-border, $button-stable-active-bg, $button-stable-active-border, $button-stable-text); - @include button-clear($button-stable-bg); - @include button-outline($button-stable-bg); - } - &.button-dark { @include button-style($button-dark-bg, $button-dark-border, $button-dark-active-bg, $button-dark-active-border, $button-dark-text); @include button-clear($button-dark-bg); diff --git a/scss/_items.scss b/scss/_items.scss index 21f3b070e0..1515b4ed0b 100644 --- a/scss/_items.scss +++ b/scss/_items.scss @@ -75,16 +75,13 @@ } // Different themes for list items -.item-primary { @include item-style-active($primary, $dark, #fff); } -.item-secondary { @include item-style-active($secondary, $dark, $dark); } -.item-tertiary { @include item-style-active($tertiary, $dark, $dark); } +.item-light { @include item-style-active($light, $dark, #fff); } +.item-stable { @include item-style-active($stable, $dark, #fff); } .item-positive { @include item-style-active($positive, $dark, #fff); } .item-calm { @include item-style-active($calm, $dark, #fff); } .item-balanced { @include item-style-active($balanced, $dark, #fff); } .item-energized { @include item-style-active($energized, $dark, #fff); } .item-royal { @include item-style-active($royal, $dark, #fff); } -.item-light { @include item-style-active($light, $dark, #fff); } -.item-stable { @include item-style-active($stable, $dark, #fff); } .item-dark { @include item-style-active($dark, $dark, #fff); } // Handle text overflow diff --git a/scss/_scaffolding.scss b/scss/_scaffolding.scss index a44415b200..c6549c3c7b 100644 --- a/scss/_scaffolding.scss +++ b/scss/_scaffolding.scss @@ -133,7 +133,7 @@ body, .ionic-body { width: 10px; height: 10px; border-radius: 50%; - background-color: $primary; + background-color: $positive; position: absolute; left: 50%; margin-left: -5px; diff --git a/scss/_tabs.scss b/scss/_tabs.scss index 64d8dfeecb..453e5d9249 100644 --- a/scss/_tabs.scss +++ b/scss/_tabs.scss @@ -22,14 +22,11 @@ background-size: 0; line-height: $tabs-height; - &.tabs-primary { - @include tab-style($tabs-primary-bg, $tabs-primary-border-color, $tabs-primary-text); + &.tabs-light { + @include tab-style($tabs-light-bg, $tabs-light-border-color, $tabs-light-text); } - &.tabs-secondary { - @include tab-style($tabs-secondary-bg, $tabs-secondary-border-color, $tabs-secondary-text); - } - &.tabs-tertiary { - @include tab-style($tabs-tertiary-bg, $tabs-tertiary-border-color, $tabs-tertiary-text); + &.tabs-stable { + @include tab-style($tabs-stable-bg, $tabs-stable-border-color, $tabs-stable-text); } &.tabs-positive { @include tab-style($tabs-positive-bg, $tabs-positive-border-color, $tabs-positive-text); @@ -49,12 +46,6 @@ &.tabs-royal { @include tab-style($tabs-royal-bg, $tabs-royal-border-color, $tabs-royal-text); } - &.tabs-light { - @include tab-style($tabs-light-bg, $tabs-light-border-color, $tabs-light-text); - } - &.tabs-stable { - @include tab-style($tabs-stable-bg, $tabs-stable-border-color, $tabs-stable-text); - } &.tabs-dark { @include tab-style($tabs-dark-bg, $tabs-dark-border-color, $tabs-dark-text); } @@ -135,14 +126,11 @@ .tab-item.active, .tab-item:active { opacity: 1; - &.tab-item-primary { - color: $primary; + &.tab-item-light { + color: $light; } - &.tab-item-secondary { - color: $secondary; - } - &.tab-item-tertiary { - color: $tertiary; + &.tab-item-stable { + color: $stable; } &.tab-item-positive { color: $positive; @@ -162,12 +150,6 @@ &.tab-item-royal { color: $royal; } - &.tab-item-light { - color: $light; - } - &.tab-item-stable { - color: $stable; - } &.tab-item-dark { color: $dark; } diff --git a/scss/_util.scss b/scss/_util.scss index c06e7fe47b..3f1081012a 100644 --- a/scss/_util.scss +++ b/scss/_util.scss @@ -81,6 +81,26 @@ * instead have colors which represent an emotion or generic theme. */ +.light { + color: $light; +} +.light-bg { + background-color: $light; +} +.light-border { + border-color: $button-light-border; +} + +.stable { + color: $stable; +} +.stable-bg { + background-color: $stable; +} +.stable-border { + border-color: $button-stable-border; +} + .positive { color: $positive; } @@ -141,26 +161,6 @@ border-color: $button-royal-border; } -.light { - color: $light; -} -.light-bg { - background-color: $light; -} -.light-border { - border-color: $button-light-border; -} - -.stable { - color: $stable; -} -.stable-bg { - background-color: $stable; -} -.stable-border { - border-color: $button-stable-border; -} - .dark { color: $dark; } @@ -170,42 +170,3 @@ .dark-border { border-color: $button-dark-border; } - - -/** - * Brand Colors - * -------------------------------------------------- - * Brand colors are your brand's colors...override the defaults to - * your app's theme! Throughout Ionic's CSS we use brand-primary, - * brand-secondary and brand-tertiary (ter·tia·ry: of third rank, importance, or value). - */ - -.primary { - color: $primary; -} -.primary-bg { - background-color: $primary; -} -.primary-border { - border-color: $button-primary-border; -} - -.secondary { - color: $secondary; -} -.secondary-bg { - background-color: $secondary; -} -.secondary-border { - border-color: $button-secondary-border; -} - -.tertiary { - color: $tertiary; -} -.tertiary-bg { - background-color: $tertiary; -} -.tertiary-border { - border-color: $button-tertiary-border; -} diff --git a/scss/_variables.scss b/scss/_variables.scss index fd05f24ea9..c46e09332c 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1,27 +1,19 @@ -// Brand Colors -// ------------------------------- - -$primary: #4a87ee !default; -$secondary: #ffffff !default; -$tertiary: #f5f5f5 !default; - - -// Utility Colors +// Colors // ------------------------------- +$light: #ffffff !default; +$stable: #f8f8f8 !default; $positive: #4a87ee !default; $calm: #43cee6 !default; $balanced: #66cc33 !default; $energized: #f0b840 !default; $assertive: #ef4e3a !default; $royal: #8a6de9 !default; - -$light: #ffffff !default; -$stable: #f8f8f8 !default; $dark: #444444 !default; + // Base // ------------------------------- @@ -45,7 +37,7 @@ $headings-line-height: 1.1 !default; $base-background-color: #fff; $base-color: #000; -$link-color: $primary !default; +$link-color: $positive !default; $link-hover-color: darken($link-color, 15%) !default; $content-padding: 10px !default; @@ -73,8 +65,6 @@ $border-radius-small: 3px !default; $caret-width-base: 4px !default; $caret-width-large: 5px !default; -$component-active-bg: $primary !default; - // Forms // ------------------------------- @@ -178,23 +168,17 @@ $button-default-border: darken($stable, 15%); $button-default-active-bg: lighten($stable, 5%); $button-default-active-border: darken($stable, 25%); -$button-primary-bg: $primary; -$button-primary-text: #fff; -$button-primary-border: darken($primary, 10%); -$button-primary-active-bg: darken($primary, 5%); -$button-primary-active-border: darken($primary, 10%); +$button-light-bg: $light; +$button-light-text: #444; +$button-light-border: #B2B2B2; +$button-light-active-bg: #222; +$button-light-active-border: #000; -$button-secondary-bg: $secondary; -$button-secondary-text: #444; -$button-secondary-border: darken($secondary, 15%); -$button-secondary-active-bg: lighten($secondary, 10%); -$button-secondary-active-border: darken($secondary, 20%); - -$button-tertiary-bg: $tertiary; -$button-tertiary-text: #444; -$button-tertiary-border: darken($tertiary, 25%); -$button-tertiary-active-bg: lighten($tertiary, 10%); -$button-tertiary-active-border: darken($tertiary, 15%); +$button-stable-bg: $stable; +$button-stable-text: #444; +$button-stable-border: #bbb; +$button-stable-active-bg: #222; +$button-stable-active-border: #000; $button-positive-bg: $positive; $button-positive-text: #fff; @@ -232,18 +216,6 @@ $button-royal-border: darken($royal, 15%); $button-royal-active-bg: darken($royal, 15%); $button-royal-active-border: darken($royal, 15%); -$button-light-bg: $light; -$button-light-text: #444; -$button-light-border: #ddd; -$button-light-active-bg: #222; -$button-light-active-border: #000; - -$button-stable-bg: $stable; -$button-stable-text: #444; -$button-stable-border: #bbb; -$button-stable-active-bg: #222; -$button-stable-active-border: #000; - $button-dark-bg: $dark; $button-dark-text: #fff; $button-dark-border: #444; @@ -266,23 +238,17 @@ $bar-default-border: #444; $bar-default-active-bg: #fff; $bar-default-active-border: #444; -$bar-primary-bg: rgba($button-primary-bg, $bar-transparency); -$bar-primary-text: $button-primary-text; -$bar-primary-border: $button-primary-border; -$bar-primary-active-bg: $button-primary-active-bg; -$bar-primary-active-border: $button-primary-active-border; +$bar-light-bg: rgba($button-light-bg, $bar-transparency); +$bar-light-text: $button-light-text; +$bar-light-border: $button-light-border; +$bar-light-active-bg: $button-light-active-bg; +$bar-light-active-border: $button-light-active-border; -$bar-secondary-bg: rgba($button-secondary-bg, $bar-transparency); -$bar-secondary-text: $button-secondary-text; -$bar-secondary-border: $button-secondary-border; -$bar-secondary-active-bg: $button-secondary-active-bg; -$bar-secondary-active-border: $button-secondary-active-border; - -$bar-tertiary-bg: rgba($button-tertiary-bg, $bar-transparency); -$bar-tertiary-text: $button-tertiary-text; -$bar-tertiary-border: $button-tertiary-border; -$bar-tertiary-active-bg: $button-tertiary-active-bg; -$bar-tertiary-active-border: $button-tertiary-active-border; +$bar-stable-bg: rgba($button-stable-bg, $bar-transparency); +$bar-stable-text: $button-stable-text; +$bar-stable-border: $button-stable-border; +$bar-stable-active-bg: $button-stable-active-bg; +$bar-stable-active-border: $button-stable-active-border; $bar-positive-bg: rgba($button-positive-bg, $bar-transparency); $bar-positive-text: $button-positive-text; @@ -320,18 +286,6 @@ $bar-royal-border: $button-royal-border; $bar-royal-active-bg: $button-royal-active-bg; $bar-royal-active-border: $button-royal-active-border; -$bar-light-bg: rgba($button-light-bg, $bar-transparency); -$bar-light-text: $button-light-text; -$bar-light-border: $button-light-border; -$bar-light-active-bg: $button-light-active-bg; -$bar-light-active-border: $button-light-active-border; - -$bar-stable-bg: rgba($button-stable-bg, $bar-transparency); -$bar-stable-text: $button-stable-text; -$bar-stable-border: $button-stable-border; -$bar-stable-active-bg: $button-stable-active-bg; -$bar-stable-active-border: $button-stable-active-border; - $bar-dark-bg: rgba($button-dark-bg, $bar-transparency); $bar-dark-text: $button-dark-text; $bar-dark-border: $button-dark-border; @@ -351,17 +305,13 @@ $tabs-default-bg: $button-stable-bg; $tabs-default-border-color: $button-stable-border; $tabs-default-text: $button-stable-text; -$tabs-primary-bg: $button-primary-bg; -$tabs-primary-border-color: $button-primary-border; -$tabs-primary-text: $button-primary-text; +$tabs-light-bg: $button-light-bg; +$tabs-light-border-color: $button-light-border; +$tabs-light-text: $button-light-text; -$tabs-secondary-bg: $button-secondary-bg; -$tabs-secondary-border-color: $button-secondary-border; -$tabs-secondary-text: $button-secondary-text; - -$tabs-tertiary-bg: $button-tertiary-bg; -$tabs-tertiary-border-color: $button-tertiary-border; -$tabs-tertiary-text: $button-tertiary-text; +$tabs-stable-bg: $button-stable-bg; +$tabs-stable-border-color: $button-stable-border; +$tabs-stable-text: $button-stable-text; $tabs-positive-bg: $button-positive-bg; $tabs-positive-border-color: $button-positive-border; @@ -387,14 +337,6 @@ $tabs-royal-bg: $button-royal-bg; $tabs-royal-border-color: $button-royal-border; $tabs-royal-text: $button-royal-text; -$tabs-light-bg: $button-light-bg; -$tabs-light-border-color: $button-light-border; -$tabs-light-text: $button-light-text; - -$tabs-stable-bg: $button-stable-bg; -$tabs-stable-border-color: $button-stable-border; -$tabs-stable-text: $button-stable-text; - $tabs-dark-bg: $button-dark-bg; $tabs-dark-border-color: $button-dark-border; $tabs-dark-text: $button-dark-text; diff --git a/test/button-bar.html b/test/button-bar.html index 2560f6cc23..c15621522c 100644 --- a/test/button-bar.html +++ b/test/button-bar.html @@ -24,7 +24,7 @@

-

+
One Two Three @@ -32,15 +32,7 @@

-

- One - Two - Three -
-

- -

-

+
One Two Three @@ -95,22 +87,6 @@

-

-

- One - Two - Three -
-

- -

-

- One - Two - Three -
-

-

One diff --git a/test/buttons.html b/test/buttons.html index 0f16266990..7c49e517d6 100644 --- a/test/buttons.html +++ b/test/buttons.html @@ -31,9 +31,9 @@

a.button default

Default - .button-primary - - .button-tertiary + .button-balanced + + .button-energized .button-positive .button-calm .button-assertive @@ -45,9 +45,9 @@

button.button default

- - - + + + @@ -59,9 +59,9 @@

a.button.button-large default

Default - .button-primary - - + .button-balanced + + .button-positive .button-calm .button-assertive @@ -73,9 +73,9 @@

button.button. button-large default

- - - + + + @@ -87,9 +87,9 @@

a.button.button-small default

Default - .button-primary - - + .button-balanced + + .button-positive .button-calm .button-assertive @@ -101,9 +101,9 @@

button.button.button-small

- - - + + + @@ -115,9 +115,9 @@

a.button.button-clear (Mixed in with others)

Default - .button-primary - - + .button-balanced + + .button-positive .button-calm .button-assertive @@ -129,9 +129,9 @@

button.button.button-clear default

- - - + + + @@ -143,9 +143,9 @@

a.block (parent w/ padding)

Default - .button-primary - .button-secondary - .button-tertiary + .button-balanced + .button-assertive + .button-energized .button-positive .button-calm .button-assertive @@ -162,9 +162,9 @@

button.block (parent w/ padding)

- - - + + + @@ -204,9 +204,9 @@

a.button-outline

Default - .button-primary - .button-secondary - .button-tertiary + .button-balanced + .button-assertive + .button-energized .button-positive .button-calm .button-assertive @@ -218,9 +218,9 @@

button.button-outline

- - - + + + @@ -232,9 +232,9 @@

a.block.button-outline (parent w/ padding)

Default - .button-primary - .button-secondary - .button-tertiary + .button-balanced + .button-assertive + .button-energized .button-positive .button-calm .button-assertive @@ -246,9 +246,9 @@

button.block.button-outline (parent w/ padding)

- - - + + + @@ -260,9 +260,9 @@

a.button-clear

Default - .button-primary - .button-secondary - .button-tertiary + .button-balanced + .button-assertive + .button-energized .button-positive .button-calm .button-assertive @@ -274,9 +274,9 @@

button.button-clear

- - - + + + @@ -288,9 +288,9 @@

a.block.button-clear (parent w/ padding)

Default - .button-primary - .button-secondary - .button-tertiary + .button-balanced + .button-assertive + .button-energized .button-positive .button-calm .button-assertive @@ -302,9 +302,9 @@

button.block.button-clear (parent w/ padding)

- - - + + + @@ -318,9 +318,9 @@

a.block (parent w/out padding)

Default - .button-primary - .button-secondary - .button-tertiary + .button-balanced + .button-assertive + .button-energized .button-positive .button-calm .button-assertive @@ -332,9 +332,9 @@

a.block (.button-full on the parent)

Default - .button-primary - .button-secondary - .button-tertiary + .button-balanced + .button-assertive + .button-energized .button-positive .button-calm .button-assertive @@ -346,9 +346,9 @@

button.block.button-full on each button and nothing on the parent

- - - + + + @@ -358,7 +358,7 @@

- Homepage + Homepage