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

removed "brand-" prefix from colors

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

66
dist/css/ionic.css vendored
View File

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

4
dist/css/themes/ionic-ios7.css vendored
View File

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

2
scss/_action-sheet.scss
View File

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

6
scss/_badge.scss
View File

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

8
scss/_items.scss
View File

@ -70,13 +70,13 @@
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
.item-primary { @include item-style-active($brand-primary, $subdued-dark, #fff); }
.item-secondary { @include item-style-active($brand-secondary, $subdued-dark, $subdued-dark); }
.item-tertiary { @include item-style-active($brand-tertiary, $subdued-dark, $subdued-dark); }
.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); }

2
scss/_scaffolding.scss
View File

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

6
scss/_tabs.scss
View File

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

66
scss/_util.scss
View File

@ -87,6 +87,9 @@
.positive-bg {
background-color: $positive;
}
.positive-border {
border-color: $button-positive-border;
}
.calm {
color: $calm;
@ -94,6 +97,9 @@
.calm-bg {
background-color: $calm;
}
.calm-border {
border-color: $button-calm-border;
}
.assertive {
color: $assertive;
@ -101,6 +107,9 @@
.assertive-bg {
background-color: $assertive;
}
.assertive-border {
border-color: $button-assertive-border;
}
.balanced {
color: $balanced;
@ -108,6 +117,9 @@
.balanced-bg {
background-color: $balanced;
}
.balanced-border {
border-color: $button-balanced-border;
}
.energized {
color: $energized;
@ -115,6 +127,9 @@
.energized-bg {
background-color: $energized;
}
.energized-border {
border-color: $button-energized-border;
}
.royle {
color: $royle;
@ -122,6 +137,9 @@
.royle-bg {
background-color: $royle;
}
.royle-border {
border-color: $button-royle-border;
}
.pure {
color: $pure;
@ -129,6 +147,9 @@
.pure-bg {
background-color: $pure;
}
.pure-border {
border-color: $button-pure-border;
}
.subdued-light {
color: $subdued-light;
@ -136,6 +157,9 @@
.subdued-light-bg {
background-color: $subdued-light;
}
.subdued-light-border {
border-color: $button-subdued-light-border;
}
.subdued {
color: $subdued;
@ -143,6 +167,9 @@
.subdued-bg {
background-color: $subdued;
}
.subdued-border {
border-color: $button-subdued-border;
}
.subdued-dark {
color: $subdued-dark;
@ -150,6 +177,9 @@
.subdued-dark-bg {
background-color: $subdued-dark;
}
.subdued-dark-border {
border-color: $button-subdued-dark-border;
}
.dark {
color: $dark;
@ -157,6 +187,9 @@
.dark-bg {
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-primary {
color: $brand-primary;
.primary {
color: $primary;
}
.brand-primary-bg {
background-color: $brand-primary;
.primary-bg {
background-color: $primary;
}
.primary-border {
border-color: $button-primary-border;
}
.brand-secondary {
color: $brand-secondary;
.secondary {
color: $secondary;
}
.brand-secondary-bg {
background-color: $brand-secondary;
.secondary-bg {
background-color: $secondary;
}
.secondary-border {
border-color: $button-secondary-border;
}
.brand-tertiary {
color: $brand-tertiary;
.tertiary {
color: $tertiary;
}
.brand-tertiary-bg {
background-color: $brand-tertiary;
.tertiary-bg {
background-color: $tertiary;
}
.tertiary-border {
border-color: $button-tertiary-border;
}

34
scss/_variables.scss
View File

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