From 5516e70f3037767fc34effb1e1fc3e45d922267a Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Wed, 13 Nov 2013 11:52:57 -0600 Subject: [PATCH] component defaults based off of light or stable --- dist/css/ionic.css | 10 ++++----- scss/_tabs.scss | 20 +++++++++--------- scss/_variables.scss | 50 ++++++++++++++++++++++---------------------- 3 files changed, 40 insertions(+), 40 deletions(-) diff --git a/dist/css/ionic.css b/dist/css/ionic.css index 2e64813a1e..d29c49413e 100644 --- a/dist/css/ionic.css +++ b/dist/css/ionic.css @@ -2620,14 +2620,14 @@ a.subdued‎ { border-width: 0; border-style: solid; border-top: 1px solid transparent; - border-bottom: 1px solid #444444; + border-bottom: 1px solid #b2b2b2; background-color: white; background-size: 0; } @media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) { .bar { border-top: none !important; border-bottom: none !important; - background-image: linear-gradient(0deg, #444444, #444444 50%, transparent 50%); + background-image: linear-gradient(0deg, #b2b2b2, #b2b2b2 50%, transparent 50%); background-position: bottom; background-size: 100% 1px; background-repeat: no-repeat; } } @@ -4354,7 +4354,7 @@ input[type="range"] { border-radius: 2px; color: #444444; background-color: #f8f8f8; - border-color: #d2d2d2; + border-color: #bbbbbb; vertical-align: top; text-align: center; text-overflow: ellipsis; @@ -4365,9 +4365,9 @@ input[type="range"] { color: #444444; text-decoration: none; } .button.active, .button:active { - background-color: white; + background-color: #222222; box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); - border-color: #b8b8b8; } + border-color: black; } .button .icon { display: inline-block; padding: 0 0 1px 0; diff --git a/scss/_tabs.scss b/scss/_tabs.scss index 453e5d9249..02b299022d 100644 --- a/scss/_tabs.scss +++ b/scss/_tabs.scss @@ -9,7 +9,7 @@ @include display-flex(); @include flex-direction(horizontal); - @include tab-style($tabs-default-bg, $tabs-default-border-color, $tabs-default-text); + @include tab-style($tabs-default-bg, $tabs-default-border, $tabs-default-text); position: absolute; bottom: 0; z-index: 5; @@ -23,31 +23,31 @@ line-height: $tabs-height; &.tabs-light { - @include tab-style($tabs-light-bg, $tabs-light-border-color, $tabs-light-text); + @include tab-style($tabs-light-bg, $tabs-light-border, $tabs-light-text); } &.tabs-stable { - @include tab-style($tabs-stable-bg, $tabs-stable-border-color, $tabs-stable-text); + @include tab-style($tabs-stable-bg, $tabs-stable-border, $tabs-stable-text); } &.tabs-positive { - @include tab-style($tabs-positive-bg, $tabs-positive-border-color, $tabs-positive-text); + @include tab-style($tabs-positive-bg, $tabs-positive-border, $tabs-positive-text); } &.tabs-calm { - @include tab-style($tabs-calm-bg, $tabs-calm-border-color, $tabs-calm-text); + @include tab-style($tabs-calm-bg, $tabs-calm-border, $tabs-calm-text); } &.tabs-assertive { - @include tab-style($tabs-assertive-bg, $tabs-assertive-border-color, $tabs-assertive-text); + @include tab-style($tabs-assertive-bg, $tabs-assertive-border, $tabs-assertive-text); } &.tabs-balanced { - @include tab-style($tabs-balanced-bg, $tabs-balanced-border-color, $tabs-balanced-text); + @include tab-style($tabs-balanced-bg, $tabs-balanced-border, $tabs-balanced-text); } &.tabs-energized { - @include tab-style($tabs-energized-bg, $tabs-energized-border-color, $tabs-energized-text); + @include tab-style($tabs-energized-bg, $tabs-energized-border, $tabs-energized-text); } &.tabs-royal { - @include tab-style($tabs-royal-bg, $tabs-royal-border-color, $tabs-royal-text); + @include tab-style($tabs-royal-bg, $tabs-royal-border, $tabs-royal-text); } &.tabs-dark { - @include tab-style($tabs-dark-bg, $tabs-dark-border-color, $tabs-dark-text); + @include tab-style($tabs-dark-bg, $tabs-dark-border, $tabs-dark-text); } @media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), diff --git a/scss/_variables.scss b/scss/_variables.scss index 2d1716d00a..c121dad8f7 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -162,12 +162,6 @@ $button-bar-button-height: 32px; $button-bar-button-padding: 8px !default; $button-bar-button-icon-size: 24px; -$button-default-bg: $stable; -$button-default-text: #444; -$button-default-border: darken($stable, 15%); -$button-default-active-bg: lighten($stable, 5%); -$button-default-active-border: darken($stable, 25%); - $button-light-bg: $light; $button-light-text: #444; $button-light-border: #B2B2B2; @@ -222,6 +216,12 @@ $button-dark-border: #444; $button-dark-active-bg: #222; $button-dark-active-border: #000; +$button-default-bg: $button-stable-bg; +$button-default-text: $button-stable-text; +$button-default-border: $button-stable-border; +$button-default-active-bg: $button-stable-active-bg; +$button-default-active-border: $button-stable-active-border; + // Bars // ------------------------------- @@ -232,12 +232,6 @@ $bar-padding-portrait: 5px; $bar-padding-landscape: 5px; $bar-transparency: 1; -$bar-default-bg: #fff; -$bar-default-text: #444; -$bar-default-border: #444; -$bar-default-active-bg: #fff; -$bar-default-active-border: #444; - $bar-light-bg: rgba($button-light-bg, $bar-transparency); $bar-light-text: $button-light-text; $bar-light-border: $button-light-border; @@ -292,6 +286,12 @@ $bar-dark-border: $button-dark-border; $bar-dark-active-bg: $button-dark-active-bg; $bar-dark-active-border: $button-dark-active-border; +$bar-default-bg: $bar-light-bg; +$bar-default-text: $bar-light-text; +$bar-default-border: $bar-light-border; +$bar-default-active-bg: $bar-light-active-bg; +$bar-default-active-border: $bar-light-active-border; + // Tabs // ------------------------------- @@ -301,46 +301,46 @@ $tabs-text-font-size: 14px !default; $tabs-text-with-icon-font-size: 10px !default; $tabs-icon-size: 32px !default; -$tabs-default-bg: $button-stable-bg; -$tabs-default-border-color: $button-stable-border; -$tabs-default-text: $button-stable-text; - $tabs-light-bg: $button-light-bg; -$tabs-light-border-color: $button-light-border; +$tabs-light-border: $button-light-border; $tabs-light-text: $button-light-text; $tabs-stable-bg: $button-stable-bg; -$tabs-stable-border-color: $button-stable-border; +$tabs-stable-border: $button-stable-border; $tabs-stable-text: $button-stable-text; $tabs-positive-bg: $button-positive-bg; -$tabs-positive-border-color: $button-positive-border; +$tabs-positive-border: $button-positive-border; $tabs-positive-text: $button-positive-text; $tabs-calm-bg: $button-calm-bg; -$tabs-calm-border-color: $button-calm-border; +$tabs-calm-border: $button-calm-border; $tabs-calm-text: $button-calm-text; $tabs-assertive-bg: $button-assertive-bg; -$tabs-assertive-border-color: $button-assertive-border; +$tabs-assertive-border: $button-assertive-border; $tabs-assertive-text: $button-assertive-text; $tabs-balanced-bg: $button-balanced-bg; -$tabs-balanced-border-color: $button-balanced-border; +$tabs-balanced-border: $button-balanced-border; $tabs-balanced-text: $button-balanced-text; $tabs-energized-bg: $button-energized-bg; -$tabs-energized-border-color: $button-energized-border; +$tabs-energized-border: $button-energized-border; $tabs-energized-text: $button-energized-text; $tabs-royal-bg: $button-royal-bg; -$tabs-royal-border-color: $button-royal-border; +$tabs-royal-border: $button-royal-border; $tabs-royal-text: $button-royal-text; $tabs-dark-bg: $button-dark-bg; -$tabs-dark-border-color: $button-dark-border; +$tabs-dark-border: $button-dark-border; $tabs-dark-text: $button-dark-text; +$tabs-default-bg: $tabs-stable-bg; +$tabs-default-border: $tabs-stable-border; +$tabs-default-text: $tabs-stable-text; + // Lists // -------------------------------