removed "brand-" prefix from colors

This commit is contained in:
Adam Bradley
2013-11-12 09:26:16 -06:00
parent d1e6f2e3ec
commit 656499d755
9 changed files with 139 additions and 55 deletions

66
dist/css/ionic.css vendored
View File

@ -4,7 +4,7 @@
* -------------------------------------------------- * --------------------------------------------------
* Useful utilities and mixins for SCSS files. * Useful utilities and mixins for SCSS files.
*/ */
/* /*!
Ionicons, v1.3.3 Ionicons, v1.3.3
Created by Ben Sperry for the Ionic Framework, http://ionicons.com/ Created by Ben Sperry for the Ionic Framework, http://ionicons.com/
https://twitter.com/helloimben https://twitter.com/ionicframework https://twitter.com/helloimben https://twitter.com/ionicframework
@ -2046,7 +2046,7 @@ sub {
fieldset { fieldset {
margin: 0 2px; margin: 0 2px;
padding: 0.35em 0.625em 0.75em; padding: 0.35em 0.625em 0.75em;
border: 1px solid silver; } border: 1px solid #c0c0c0; }
/** /**
* 1. Correct `color` not being inherited in IE 8/9. * 1. Correct `color` not being inherited in IE 8/9.
@ -4193,7 +4193,7 @@ input[type="file"] {
line-height: 34px; } line-height: 34px; }
select { select {
border: 1px solid #cccccc; border: 1px solid #ccc;
background-color: white; } background-color: white; }
select[multiple], select[multiple],
@ -4252,7 +4252,7 @@ input[type="checkbox"][readonly] {
border-radius: 50%; border-radius: 50%;
background: white; background: white;
content: ' '; content: ' ';
transition: background-color 0.1s ease-in-out; } transition: background-color .1s ease-in-out; }
/* the checkmark within the box */ /* the checkmark within the box */
.checkbox input:after { .checkbox input:after {
@ -4267,7 +4267,7 @@ input[type="checkbox"][readonly] {
border-right: 0; border-right: 0;
content: ' '; content: ' ';
opacity: 0; opacity: 0;
transition: opacity 0.05s ease-in-out; transition: opacity .05s ease-in-out;
-webkit-transform: rotate(-45deg); -webkit-transform: rotate(-45deg);
transform: rotate(-45deg); } transform: rotate(-45deg); }
@ -4533,7 +4533,7 @@ input[type="range"] {
.button-icon:active, .button-icon.active { .button-icon:active, .button-icon.active {
background: none; background: none;
box-shadow: none; box-shadow: none;
text-shadow: 0px 0px 10px white; } text-shadow: 0px 0px 10px #fff; }
.button-primary { .button-primary {
color: white; color: white;
@ -5386,66 +5386,99 @@ a.button {
.positive-bg { .positive-bg {
background-color: #4a87ee; } background-color: #4a87ee; }
.positive-border {
border-color: #145dd7; }
.calm { .calm {
color: #43cee6; } color: #43cee6; }
.calm-bg { .calm-bg {
background-color: #43cee6; } background-color: #43cee6; }
.calm-border {
border-color: #1aaac3; }
.assertive { .assertive {
color: #ef4e3a; } color: #ef4e3a; }
.assertive-bg { .assertive-bg {
background-color: #ef4e3a; } background-color: #ef4e3a; }
.assertive-border {
border-color: #cc2511; }
.balanced { .balanced {
color: #66cc33; } color: #66cc33; }
.balanced-bg { .balanced-bg {
background-color: #66cc33; } background-color: #66cc33; }
.balanced-border {
border-color: #478f24; }
.energized { .energized {
color: #f0b840; } color: #f0b840; }
.energized-bg { .energized-bg {
background-color: #f0b840; } background-color: #f0b840; }
.energized-border {
border-color: #d39511; }
.royle { .royle {
color: #8a6de9; } color: #8a6de9; }
.royle-bg { .royle-bg {
background-color: #8a6de9; } background-color: #8a6de9; }
.royle-border {
border-color: #552bdf; }
.pure { .pure {
color: white; } color: white; }
.pure-bg { .pure-bg {
background-color: white; } background-color: white; }
.pure-border {
border-color: #dddddd; }
.subdued-light { .subdued-light {
color: #eeeeee; } color: #eeeeee; }
.subdued-light-bg { .subdued-light-bg {
background-color: #eeeeee; } background-color: #eeeeee; }
.subdued-light-border {
border-color: #dddddd; }
.subdued { .subdued {
color: #cccccc; } color: #cccccc; }
.subdued-bg { .subdued-bg {
background-color: #cccccc; } background-color: #cccccc; }
.subdued-border {
border-color: #bbbbbb; }
.subdued-dark { .subdued-dark {
color: #888888; } color: #888888; }
.subdued-dark-bg { .subdued-dark-bg {
background-color: #888888; } background-color: #888888; }
.subdued-dark-border {
border-color: #6f6f6f; }
.dark { .dark {
color: #444444; } color: #444444; }
.dark-bg { .dark-bg {
background-color: #444444; } background-color: #444444; }
.dark-border {
border-color: #444444; }
/** /**
* Brand Colors * Brand Colors
* -------------------------------------------------- * --------------------------------------------------
@ -5453,24 +5486,33 @@ a.button {
* your app's theme! Throughout Ionic's CSS we use brand-primary, * 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). * brand-secondary and brand-tertiary (ter·tia·ry: of third rank, importance, or value).
*/ */
.brand-primary { .primary {
color: #4a87ee; } color: #4a87ee; }
.brand-primary-bg { .primary-bg {
background-color: #4a87ee; } background-color: #4a87ee; }
.brand-secondary { .primary-border {
border-color: #1b68ea; }
.secondary {
color: white; } color: white; }
.brand-secondary-bg { .secondary-bg {
background-color: white; } background-color: white; }
.brand-tertiary { .secondary-border {
border-color: #d9d9d9; }
.tertiary {
color: whitesmoke; } color: whitesmoke; }
.brand-tertiary-bg { .tertiary-bg {
background-color: whitesmoke; } background-color: whitesmoke; }
.tertiary-border {
border-color: #b5b5b5; }
/** /**
* Platform * Platform
* -------------------------------------------------- * --------------------------------------------------

View File

@ -123,7 +123,7 @@
right: 20px; right: 20px;
transition: 0.2s ease; transition: 0.2s ease;
transition-property: left, right; transition-property: left, right;
transition-delay: 0s, 0.05s; } transition-delay: 0s, .05s; }
.toggle :checked + .track { .toggle :checked + .track {
/* When the toggle is "on" */ /* When the toggle is "on" */
@ -138,4 +138,4 @@
right: 0; right: 0;
left: 20px; left: 20px;
-webkit-transform: none; -webkit-transform: none;
transition-delay: 0.05s, 0s; } transition-delay: .05s, 0s; }

View File

@ -21,7 +21,7 @@
border-radius: none; border-radius: none;
background-color: transparent; background-color: transparent;
color: $brand-primary; color: $primary;
font-size: 18px; font-size: 18px;
&.destructive { &.destructive {

View File

@ -30,13 +30,13 @@
} }
.badge-primary { .badge-primary {
background-color: $brand-primary; background-color: $primary;
} }
.badge-secondary { .badge-secondary {
background-color: $brand-secondary; background-color: $secondary;
} }
.badge-tertiary { .badge-tertiary {
background-color: $brand-tertiary; background-color: $tertiary;
} }
.badge-positive { .badge-positive {
background-color: $positive; background-color: $positive;

View File

@ -70,13 +70,13 @@
color: inherit; color: inherit;
} }
} }
@include item-style-active($brand-secondary, $subdued-dark, $subdued-dark); @include item-style-active($secondary, $subdued-dark, $subdued-dark);
} }
// Different themes for list items // Different themes for list items
.item-primary { @include item-style-active($brand-primary, $subdued-dark, #fff); } .item-primary { @include item-style-active($primary, $subdued-dark, #fff); }
.item-secondary { @include item-style-active($brand-secondary, $subdued-dark, $subdued-dark); } .item-secondary { @include item-style-active($secondary, $subdued-dark, $subdued-dark); }
.item-tertiary { @include item-style-active($brand-tertiary, $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-positive { @include item-style-active($positive, $subdued-dark, #fff); }
.item-calm { @include item-style-active($calm, $subdued-dark, #fff); } .item-calm { @include item-style-active($calm, $subdued-dark, #fff); }
.item-balanced { @include item-style-active($balanced, $subdued-dark, #fff); } .item-balanced { @include item-style-active($balanced, $subdued-dark, #fff); }

View File

@ -133,7 +133,7 @@ body, .ionic-body {
width: 10px; width: 10px;
height: 10px; height: 10px;
border-radius: 50%; border-radius: 50%;
background-color: $brand-primary; background-color: $primary;
position: absolute; position: absolute;
left: 50%; left: 50%;
margin-left: -5px; margin-left: -5px;

View File

@ -142,13 +142,13 @@
opacity: 1; opacity: 1;
&.tab-item-primary { &.tab-item-primary {
color: $brand-primary; color: $primary;
} }
&.tab-item-secondary { &.tab-item-secondary {
color: $brand-secondary; color: $secondary;
} }
&.tab-item-tertiary { &.tab-item-tertiary {
color: $brand-tertiary; color: $tertiary;
} }
&.tab-item-positive { &.tab-item-positive {
color: $positive; color: $positive;

View File

@ -87,6 +87,9 @@
.positive-bg { .positive-bg {
background-color: $positive; background-color: $positive;
} }
.positive-border {
border-color: $button-positive-border;
}
.calm { .calm {
color: $calm; color: $calm;
@ -94,6 +97,9 @@
.calm-bg { .calm-bg {
background-color: $calm; background-color: $calm;
} }
.calm-border {
border-color: $button-calm-border;
}
.assertive { .assertive {
color: $assertive; color: $assertive;
@ -101,6 +107,9 @@
.assertive-bg { .assertive-bg {
background-color: $assertive; background-color: $assertive;
} }
.assertive-border {
border-color: $button-assertive-border;
}
.balanced { .balanced {
color: $balanced; color: $balanced;
@ -108,6 +117,9 @@
.balanced-bg { .balanced-bg {
background-color: $balanced; background-color: $balanced;
} }
.balanced-border {
border-color: $button-balanced-border;
}
.energized { .energized {
color: $energized; color: $energized;
@ -115,6 +127,9 @@
.energized-bg { .energized-bg {
background-color: $energized; background-color: $energized;
} }
.energized-border {
border-color: $button-energized-border;
}
.royle { .royle {
color: $royle; color: $royle;
@ -122,6 +137,9 @@
.royle-bg { .royle-bg {
background-color: $royle; background-color: $royle;
} }
.royle-border {
border-color: $button-royle-border;
}
.pure { .pure {
color: $pure; color: $pure;
@ -129,6 +147,9 @@
.pure-bg { .pure-bg {
background-color: $pure; background-color: $pure;
} }
.pure-border {
border-color: $button-pure-border;
}
.subdued-light { .subdued-light {
color: $subdued-light; color: $subdued-light;
@ -136,6 +157,9 @@
.subdued-light-bg { .subdued-light-bg {
background-color: $subdued-light; background-color: $subdued-light;
} }
.subdued-light-border {
border-color: $button-subdued-light-border;
}
.subdued { .subdued {
color: $subdued; color: $subdued;
@ -143,6 +167,9 @@
.subdued-bg { .subdued-bg {
background-color: $subdued; background-color: $subdued;
} }
.subdued-border {
border-color: $button-subdued-border;
}
.subdued-dark { .subdued-dark {
color: $subdued-dark; color: $subdued-dark;
@ -150,6 +177,9 @@
.subdued-dark-bg { .subdued-dark-bg {
background-color: $subdued-dark; background-color: $subdued-dark;
} }
.subdued-dark-border {
border-color: $button-subdued-dark-border;
}
.dark { .dark {
color: $dark; color: $dark;
@ -157,6 +187,9 @@
.dark-bg { .dark-bg {
background-color: $dark; background-color: $dark;
} }
.dark-border {
border-color: $button-dark-border;
}
/** /**
@ -167,23 +200,32 @@
* brand-secondary and brand-tertiary (ter·tia·ry: of third rank, importance, or value). * brand-secondary and brand-tertiary (ter·tia·ry: of third rank, importance, or value).
*/ */
.brand-primary { .primary {
color: $brand-primary; color: $primary;
} }
.brand-primary-bg { .primary-bg {
background-color: $brand-primary; background-color: $primary;
}
.primary-border {
border-color: $button-primary-border;
} }
.brand-secondary { .secondary {
color: $brand-secondary; color: $secondary;
} }
.brand-secondary-bg { .secondary-bg {
background-color: $brand-secondary; background-color: $secondary;
}
.secondary-border {
border-color: $button-secondary-border;
} }
.brand-tertiary { .tertiary {
color: $brand-tertiary; color: $tertiary;
} }
.brand-tertiary-bg { .tertiary-bg {
background-color: $brand-tertiary; background-color: $tertiary;
}
.tertiary-border {
border-color: $button-tertiary-border;
} }

View File

@ -2,9 +2,9 @@
// Brand Colors // Brand Colors
// ------------------------------- // -------------------------------
$brand-primary: #4a87ee !default; $primary: #4a87ee !default;
$brand-secondary: #fff !default; $secondary: #fff !default;
$brand-tertiary: #f5f5f5 !default; $tertiary: #f5f5f5 !default;
// Utility Colors // Utility Colors
@ -47,7 +47,7 @@ $headings-line-height: 1.1 !default;
$base-background-color: #fff; $base-background-color: #fff;
$base-color: #000; $base-color: #000;
$link-color: $brand-primary !default; $link-color: $primary !default;
$link-hover-color: darken($link-color, 15%) !default; $link-hover-color: darken($link-color, 15%) !default;
$content-padding: 10px !default; $content-padding: 10px !default;
@ -75,7 +75,7 @@ $border-radius-small: 3px !default;
$caret-width-base: 4px !default; $caret-width-base: 4px !default;
$caret-width-large: 5px !default; $caret-width-large: 5px !default;
$component-active-bg: $brand-primary !default; $component-active-bg: $primary !default;
// Forms // Forms
@ -180,23 +180,23 @@ $button-default-border: darken($subdued-light, 15%);
$button-default-active-bg: lighten($subdued-light, 5%); $button-default-active-bg: lighten($subdued-light, 5%);
$button-default-active-border: darken($subdued-light, 25%); $button-default-active-border: darken($subdued-light, 25%);
$button-primary-bg: $brand-primary; $button-primary-bg: $primary;
$button-primary-text: #fff; $button-primary-text: #fff;
$button-primary-border: darken($brand-primary, 10%); $button-primary-border: darken($primary, 10%);
$button-primary-active-bg: darken($brand-primary, 5%); $button-primary-active-bg: darken($primary, 5%);
$button-primary-active-border: darken($brand-primary, 10%); $button-primary-active-border: darken($primary, 10%);
$button-secondary-bg: $brand-secondary; $button-secondary-bg: $secondary;
$button-secondary-text: #444; $button-secondary-text: #444;
$button-secondary-border: darken($brand-secondary, 15%); $button-secondary-border: darken($secondary, 15%);
$button-secondary-active-bg: lighten($brand-secondary, 10%); $button-secondary-active-bg: lighten($secondary, 10%);
$button-secondary-active-border: darken($brand-secondary, 20%); $button-secondary-active-border: darken($secondary, 20%);
$button-tertiary-bg: $brand-tertiary; $button-tertiary-bg: $tertiary;
$button-tertiary-text: #444; $button-tertiary-text: #444;
$button-tertiary-border: darken($brand-tertiary, 25%); $button-tertiary-border: darken($tertiary, 25%);
$button-tertiary-active-bg: lighten($brand-tertiary, 10%); $button-tertiary-active-bg: lighten($tertiary, 10%);
$button-tertiary-active-border: darken($brand-tertiary, 15%); $button-tertiary-active-border: darken($tertiary, 15%);
$button-positive-bg: $positive; $button-positive-bg: $positive;
$button-positive-text: #fff; $button-positive-text: #fff;