javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 15:07:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

colour name changes

Browse Source
This commit is contained in:
Adam Bradley
2013-11-12 13:40:29 -06:00
parent 6fa24cbf5a
commit b3966d87e0
13 changed files with 221 additions and 481 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
scss/_badge.scss
View File

@ -56,17 +56,11 @@
.badge-royal {
background-color: $royal;
}
.badge-pure {
background-color: $pure;
.badge-light {
background-color: $light;
}
.badge-subdued-light {
background-color: $subdued-light;
}
.badge-subdued {
background-color: $subdued;
}
.badge-subdued-dark {
background-color: $subdued-dark;
.badge-stable {
background-color: $stable;
}
.badge-dark {
background-color: $dark;

36
scss/_bar.scss
View File

@ -77,17 +77,11 @@
&.bar-royal {
@include bar-style($bar-royal-bg, $bar-royal-border, $bar-royal-text);
}
&.bar-pure {
@include bar-style($bar-pure-bg, $bar-pure-border, $bar-pure-text);
&.bar-light {
@include bar-style($bar-light-bg, $bar-light-border, $bar-light-text);
}
&.bar-subdued-light {
@include bar-style($bar-subdued-light-bg, $bar-subdued-light-border, $bar-subdued-light-text);
}
&.bar-subdued {
@include bar-style($bar-subdued-bg, $bar-subdued-border, $bar-subdued-text);
}
&.bar-subdued-dark {
@include bar-style($bar-subdued-dark-bg, $bar-subdued-dark-border, $bar-subdued-dark-text);
&.bar-light {
@include bar-style($bar-light-bg, $bar-light-border, $bar-light-text);
}
&.bar-dark {
@include bar-style($bar-dark-bg, $bar-dark-border, $bar-dark-text);
@ -168,7 +162,7 @@
.bar-secondary {
.button {
@include button-style($bar-secondary-bg, $bar-secondary-border, $bar-secondary-active-bg, $bar-secondary-active-border, $bar-secondary-text);
@include button-clear($subdued-dark, $bar-title-font-size);
@include button-clear($dark, $bar-title-font-size);
}
}
.bar-tertiary {
@ -213,27 +207,15 @@
@include button-clear(#fff, $bar-title-font-size);
}
}
.bar-pure {
.bar-light {
.button {
@include button-style($bar-pure-bg, $bar-pure-border, $bar-pure-active-bg, $bar-pure-active-border, $bar-pure-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-subdued-light {
.bar-light {
.button {
@include button-style($bar-subdued-light-bg, $bar-subdued-light-border, $bar-subdued-light-active-bg, $bar-subdued-light-active-border, $bar-subdued-light-text);
@include button-clear(#fff, $bar-title-font-size);
}
}
.bar-subdued {
.button {
@include button-style($bar-subdued-bg, $bar-subdued-border, $bar-subdued-active-bg, $bar-subdued-active-border, $bar-subdued-text);
@include button-clear(#fff, $bar-title-font-size);
}
}
.bar-subdued-dark {
.button {
@include button-style($bar-subdued-dark-bg, $bar-subdued-dark-border, $bar-subdued-dark-active-bg, $bar-subdued-dark-active-border, $bar-subdued-dark-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);
}
}

32
scss/_button.scss
View File

@ -42,7 +42,7 @@
margin-top: $button-block-margin;
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);
@ -52,7 +52,7 @@
&.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, $subdued-dark);
@include button-outline($button-secondary-border, $dark);
}
&.button-tertiary {
@ -97,28 +97,16 @@
@include button-outline($button-royal-bg);
}
&.button-pure {
@include button-style($button-pure-bg, $button-pure-border, $button-pure-active-bg, $button-pure-active-border, $button-pure-text);
@include button-clear($button-pure-bg);
@include button-outline($button-pure-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-subdued-light {
@include button-style($button-subdued-light-bg, $button-subdued-light-border, $button-subdued-light-active-bg, $button-subdued-light-active-border, $button-subdued-light-text);
@include button-clear($button-subdued-light-bg);
@include button-outline($button-subdued-light-bg);
}
&.button-subdued {
@include button-style($button-subdued-bg, $button-subdued-border, $button-subdued-active-bg, $button-subdued-active-border, $button-subdued-text);
@include button-clear($button-subdued-bg);
@include button-outline($button-subdued-bg);
}
&.button-subdued-dark {
@include button-style($button-subdued-dark-bg, $button-subdued-dark-border, $button-subdued-dark-active-bg, $button-subdued-dark-active-border, $button-subdued-dark-text);
@include button-clear($button-subdued-dark-bg);
@include button-outline($button-subdued-dark-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 {

6
scss/_form.scss
View File

@ -17,13 +17,13 @@ legend {
width: 100%;
border: 0;
border-bottom: 1px solid #e5e5e5;
color: $subdued-dark;
color: $dark;
font-size: $font-size-base * 1.5;
line-height: $line-height-base * 2;
// Small
small {
color: $subdued-light;
color: $stable;
font-size: $line-height-base * .75;
}
}
@ -134,7 +134,7 @@ input[type="tel"],
input[type="color"] {
display: inline-block;
height: $line-height-computed + $font-size-base;
color: $subdued;
color: $stable;
vertical-align: middle;
font-size: $font-size-base;
line-height: $line-height-computed;

26
scss/_items.scss
View File

@ -5,7 +5,7 @@
*/
.item {
@include item-style-active($secondary, $subdued-dark, $subdued-dark);
@include item-style-active($light, $dark, $dark);
position: relative;
z-index: 2; // Make sure the borders and stuff don't get hidden by children
@ -75,19 +75,17 @@
}
// Different themes for list items
.item-primary { @include item-style-active($primary, $subdued-dark, #fff); }
.item-secondary { @include item-style-active($secondary, $subdued-dark, $subdued-dark); }
.item-tertiary { @include item-style-active($tertiary, $subdued-dark, $subdued-dark); }
.item-positive { @include item-style-active($positive, $subdued-dark, #fff); }
.item-calm { @include item-style-active($calm, $subdued-dark, #fff); }
.item-balanced { @include item-style-active($balanced, $subdued-dark, #fff); }
.item-energized { @include item-style-active($energized, $subdued-dark, #fff); }
.item-royal { @include item-style-active($royal, $subdued-dark, #fff); }
.item-pure { @include item-style-active($pure, $subdued-dark, #fff); }
.item-subdued-light { @include item-style-active($subdued-light, $subdued-dark, #fff); }
.item-subdued { @include item-style-active($subdued, $subdued-dark, #fff); }
.item-subdued-dark { @include item-style-active($subdued-dark, $subdued-dark, #fff); }
.item-dark { @include item-style-active($dark, $subdued-dark, #fff); }
.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-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
.item,

28
scss/_tabs.scss
View File

@ -49,17 +49,11 @@
&.tabs-royal {
@include tab-style($tabs-royal-bg, $tabs-royal-border-color, $tabs-royal-text);
}
&.tabs-pure {
@include tab-style($tabs-pure-bg, $tabs-pure-border-color, $tabs-pure-text);
&.tabs-light {
@include tab-style($tabs-light-bg, $tabs-light-border-color, $tabs-light-text);
}
&.tabs-subdued-light {
@include tab-style($tabs-subdued-light-bg, $tabs-subdued-light-border-color, $tabs-subdued-light-text);
}
&.tabs-subdued {
@include tab-style($tabs-subdued-bg, $tabs-subdued-border-color, $tabs-subdued-text);
}
&.tabs-subdued-dark {
@include tab-style($tabs-subdued-dark-bg, $tabs-subdued-dark-border-color, $tabs-subdued-dark-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);
@ -168,17 +162,11 @@
&.tab-item-royal {
color: $royal;
}
&.tab-item-pure {
color: $pure;
&.tab-item-light {
color: $light;
}
&.tab-item-subdued-light {
color: $subdued-light;
}
&.tab-item-subdued {
color: $subdued;
}
&.tab-item-subdued-dark {
color: $subdued-dark;
&.tab-item-stable {
color: $stable;
}
&.tab-item-dark {
color: $dark;

2
scss/_type.scss
View File

@ -160,7 +160,7 @@ address {
a.subdued‎ {
padding-right:10px;
color: $subdued;
color: $stable;
text-decoration: none;
&:hover {

44
scss/_util.scss
View File

@ -141,44 +141,24 @@
border-color: $button-royal-border;
}
.pure {
color: $pure;
.light {
color: $light;
}
.pure-bg {
background-color: $pure;
.light-bg {
background-color: $light;
}
.pure-border {
border-color: $button-pure-border;
.light-border {
border-color: $button-light-border;
}
.subdued-light {
color: $subdued-light;
.stable {
color: $stable;
}
.subdued-light-bg {
background-color: $subdued-light;
.stable-bg {
background-color: $stable;
}
.subdued-light-border {
border-color: $button-subdued-light-border;
}
.subdued {
color: $subdued;
}
.subdued-bg {
background-color: $subdued;
}
.subdued-border {
border-color: $button-subdued-border;
}
.subdued-dark {
color: $subdued-dark;
}
.subdued-dark-bg {
background-color: $subdued-dark;
}
.subdued-dark-border {
border-color: $button-subdued-dark-border;
.stable-border {
border-color: $button-stable-border;
}
.dark {

128
scss/_variables.scss
View File

@ -3,7 +3,7 @@
// -------------------------------
$primary: #4a87ee !default;
$secondary: #fff !default;
$secondary: #ffffff !default;
$tertiary: #f5f5f5 !default;
@ -17,11 +17,9 @@ $energized: #f0b840 !default;
$assertive: #ef4e3a !default;
$royal: #8a6de9 !default;
$pure: #fff !default;
$subdued-light: #eee !default;
$subdued: #ccc !default;
$subdued-dark: #888 !default;
$dark: #444 !default;
$light: #ffffff !default;
$stable: #f8f8f8 !default;
$dark: #444444 !default;
// Base
@ -85,12 +83,12 @@ $input-height-base: ($line-height-computed + ($padding-base-vertic
$input-height-large: (floor($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2) !default;
$input-height-small: (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2) !default;
$input-bg: $pure;
$input-bg-disabled: $subdued-light;
$input-bg: $light;
$input-bg-disabled: $stable;
$input-color: $subdued-dark;
$input-color: $dark;
$input-label-color: $dark;
$input-color-placeholder: $subdued;
$input-color-placeholder: $stable;
// Toggle
@ -111,7 +109,7 @@ $toggle-off-border-color: #E5E5E5;
$toggle-on-bg-color: #4A87EE;
$toggle-on-border-color: $toggle-on-bg-color;
$toggle-handle-off-bg-color: $pure;
$toggle-handle-off-bg-color: $light;
$toggle-handle-on-bg-color: $toggle-handle-off-bg-color;
$toggle-transition-duration: .1s;
@ -174,11 +172,11 @@ $button-bar-button-height: 32px;
$button-bar-button-padding: 8px !default;
$button-bar-button-icon-size: 24px;
$button-default-bg: $subdued-light;
$button-default-bg: $stable;
$button-default-text: #444;
$button-default-border: darken($subdued-light, 15%);
$button-default-active-bg: lighten($subdued-light, 5%);
$button-default-active-border: darken($subdued-light, 25%);
$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;
@ -234,29 +232,17 @@ $button-royal-border: darken($royal, 15%);
$button-royal-active-bg: darken($royal, 15%);
$button-royal-active-border: darken($royal, 15%);
$button-pure-bg: $pure;
$button-pure-text: #444;
$button-pure-border: #ddd;
$button-pure-active-bg: #222;
$button-pure-active-border: #000;
$button-light-bg: $light;
$button-light-text: #444;
$button-light-border: #ddd;
$button-light-active-bg: #222;
$button-light-active-border: #000;
$button-subdued-light-bg: $subdued-light;
$button-subdued-light-text: #444;
$button-subdued-light-border: #ddd;
$button-subdued-light-active-bg: #222;
$button-subdued-light-active-border: #000;
$button-subdued-bg: $subdued;
$button-subdued-text: #444;
$button-subdued-border: #bbb;
$button-subdued-active-bg: #222;
$button-subdued-active-border: #000;
$button-subdued-dark-bg: $subdued-dark;
$button-subdued-dark-text: #fff;
$button-subdued-dark-border: darken($subdued-dark, 10%);
$button-subdued-dark-active-bg: #222;
$button-subdued-dark-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;
@ -334,29 +320,17 @@ $bar-royal-border: $button-royal-border;
$bar-royal-active-bg: $button-royal-active-bg;
$bar-royal-active-border: $button-royal-active-border;
$bar-pure-bg: rgba($button-pure-bg, $bar-transparency);
$bar-pure-text: $button-pure-text;
$bar-pure-border: $button-pure-border;
$bar-pure-active-bg: $button-pure-active-bg;
$bar-pure-active-border: $button-pure-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-subdued-light-bg: rgba($button-subdued-light-bg, $bar-transparency);
$bar-subdued-light-text: $button-subdued-light-text;
$bar-subdued-light-border: $button-subdued-light-border;
$bar-subdued-light-active-bg: $button-subdued-light-active-bg;
$bar-subdued-light-active-border: $button-subdued-light-active-border;
$bar-subdued-bg: rgba($button-subdued-bg, $bar-transparency);
$bar-subdued-text: $button-subdued-text;
$bar-subdued-border: $button-subdued-border;
$bar-subdued-active-bg: $button-subdued-active-bg;
$bar-subdued-active-border: $button-subdued-active-border;
$bar-subdued-dark-bg: rgba($button-subdued-dark-bg, $bar-transparency);
$bar-subdued-dark-text: $button-subdued-dark-text;
$bar-subdued-dark-border: $button-subdued-dark-border;
$bar-subdued-dark-active-bg: $button-subdued-dark-active-bg;
$bar-subdued-dark-active-border: $button-subdued-dark-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;
@ -373,9 +347,9 @@ $tabs-text-font-size: 14px !default;
$tabs-text-with-icon-font-size: 10px !default;
$tabs-icon-size: 32px !default;
$tabs-default-bg: $button-subdued-light-bg;
$tabs-default-border-color: $button-subdued-light-border;
$tabs-default-text: $button-subdued-light-text;
$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;
@ -413,21 +387,13 @@ $tabs-royal-bg: $button-royal-bg;
$tabs-royal-border-color: $button-royal-border;
$tabs-royal-text: $button-royal-text;
$tabs-pure-bg: $button-pure-bg;
$tabs-pure-border-color: $button-pure-border;
$tabs-pure-text: $button-pure-text;
$tabs-light-bg: $button-light-bg;
$tabs-light-border-color: $button-light-border;
$tabs-light-text: $button-light-text;
$tabs-subdued-light-bg: $button-subdued-light-bg;
$tabs-subdued-light-border-color: $button-subdued-light-border;
$tabs-subdued-light-text: $button-subdued-light-text;
$tabs-subdued-bg: $button-subdued-bg;
$tabs-subdued-border-color: $button-subdued-border;
$tabs-subdued-text: $button-subdued-text;
$tabs-subdued-dark-bg: $button-subdued-dark-bg;
$tabs-subdued-dark-border-color: $button-subdued-dark-border;
$tabs-subdued-dark-text: $button-subdued-dark-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;
@ -444,7 +410,7 @@ $list-header-color: #222;
$list-header-padding: 5px 15px;
$list-header-margin-top: 20px !default;
$list-bg: $pure;
$list-bg: $light;
$list-border-color: #ddd;
@ -528,12 +494,12 @@ $sheet-border-radius: 3px !default;
// Badges
// -------------------------
$badge-color: $pure !default;
$badge-link-hover-color: $pure !default;
$badge-bg: $subdued !default;
$badge-color: $light !default;
$badge-link-hover-color: $light !default;
$badge-bg: $stable !default;
$badge-active-color: $link-color !default;
$badge-active-bg: $pure !default;
$badge-active-bg: $light !default;
$badge-font-size: 14px !default;
$badge-line-height: 16px !default;