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

button outline colors

Browse Source
This commit is contained in:
Adam Bradley
2013-10-15 12:59:58 -05:00
parent 55b270bffe
commit e3984cdf1e
6 changed files with 87 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
dist/css/ionic-ios7.css vendored
View File

@ -1620,9 +1620,16 @@ input[type="checkbox"][readonly] {
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: #bbbbbb; } border-color: #bbbbbb; }
.button.button-default.button-clear { .button.button-default.button-clear {
color: #333333; color: #dddddd;
background: none; background: none;
box-shadow: none; } box-shadow: none; }
.button.button-default.button-outline {
border-color: #dddddd;
color: #333333; }
.button.button-default.button-outline.active, .button.button-default.button-outline:active {
background-color: #dddddd;
color: #fff;
box-shadow: none; }
.button.button-secondary { .button.button-secondary {
color: #333333; color: #333333;
background-color: whitesmoke; background-color: whitesmoke;
@ -1635,9 +1642,16 @@ input[type="checkbox"][readonly] {
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: #999999; } border-color: #999999; }
.button.button-secondary.button-clear { .button.button-secondary.button-clear {
color: #333333; color: #bbbbbb;
background: none; background: none;
box-shadow: none; } box-shadow: none; }
.button.button-secondary.button-outline {
border-color: #bbbbbb;
color: #333333; }
.button.button-secondary.button-outline.active, .button.button-secondary.button-outline:active {
background-color: #bbbbbb;
color: #fff;
box-shadow: none; }
.button.button-primary { .button.button-primary {
color: white; color: white;
background-color: #4a87ee; background-color: #4a87ee;

18
dist/css/ionic-scoped.css vendored
View File

@ -2247,9 +2247,16 @@
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: #bbbbbb; } border-color: #bbbbbb; }
.ionic .button.button-default.button-clear { .ionic .button.button-default.button-clear {
color: #333333; color: #dddddd;
background: none; background: none;
box-shadow: none; } box-shadow: none; }
.ionic .button.button-default.button-outline {
border-color: #dddddd;
color: #333333; }
.ionic .button.button-default.button-outline.active, .ionic .button.button-default.button-outline:active {
background-color: #dddddd;
color: #fff;
box-shadow: none; }
.ionic .button.button-secondary { .ionic .button.button-secondary {
color: #333333; color: #333333;
background-color: whitesmoke; background-color: whitesmoke;
@ -2262,9 +2269,16 @@
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: #999999; } border-color: #999999; }
.ionic .button.button-secondary.button-clear { .ionic .button.button-secondary.button-clear {
color: #333333; color: #bbbbbb;
background: none; background: none;
box-shadow: none; } box-shadow: none; }
.ionic .button.button-secondary.button-outline {
border-color: #bbbbbb;
color: #333333; }
.ionic .button.button-secondary.button-outline.active, .ionic .button.button-secondary.button-outline:active {
background-color: #bbbbbb;
color: #fff;
box-shadow: none; }
.ionic .button.button-primary { .ionic .button.button-primary {
color: white; color: white;
background-color: #4a87ee; background-color: #4a87ee;

18
dist/css/ionic.css vendored
View File

@ -2738,9 +2738,16 @@ input[type="checkbox"][readonly] {
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: #bbbbbb; } border-color: #bbbbbb; }
.button.button-default.button-clear { .button.button-default.button-clear {
color: #333333; color: #dddddd;
background: none; background: none;
box-shadow: none; } box-shadow: none; }
.button.button-default.button-outline {
border-color: #dddddd;
color: #333333; }
.button.button-default.button-outline.active, .button.button-default.button-outline:active {
background-color: #dddddd;
color: #fff;
box-shadow: none; }
.button.button-secondary { .button.button-secondary {
color: #333333; color: #333333;
background-color: whitesmoke; background-color: whitesmoke;
@ -2753,9 +2760,16 @@ input[type="checkbox"][readonly] {
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: #999999; } border-color: #999999; }
.button.button-secondary.button-clear { .button.button-secondary.button-clear {
color: #333333; color: #bbbbbb;
background: none; background: none;
box-shadow: none; } box-shadow: none; }
.button.button-secondary.button-outline {
border-color: #bbbbbb;
color: #333333; }
.button.button-secondary.button-outline.active, .button.button-secondary.button-outline:active {
background-color: #bbbbbb;
color: #fff;
box-shadow: none; }
.button.button-primary { .button.button-primary {
color: white; color: white;
background-color: #4a87ee; background-color: #4a87ee;

6
scss/ionic/_button.scss
View File

@ -46,11 +46,13 @@
&.button-default { &.button-default {
@include button-style($button-default-bg, $button-default-border, $button-default-active-bg, $button-default-active-border, $gray-dark); @include button-style($button-default-bg, $button-default-border, $button-default-active-bg, $button-default-active-border, $gray-dark);
@include button-clear($gray-dark); @include button-clear($button-default-border);
@include button-outline($button-default-border, $gray-dark);
} }
&.button-secondary { &.button-secondary {
@include button-style($button-secondary-bg, $button-secondary-border, $button-secondary-active-bg, $button-secondary-active-border, $gray-dark); @include button-style($button-secondary-bg, $button-secondary-border, $button-secondary-active-bg, $button-secondary-active-border, $gray-dark);
@include button-clear($gray-dark); @include button-clear($button-secondary-border);
@include button-outline($button-secondary-border, $gray-dark);
} }
&.button-primary { &.button-primary {
@include button-style($button-primary-bg, $button-primary-border, $button-primary-active-bg, $button-primary-active-border, $white); @include button-style($button-primary-bg, $button-primary-border, $button-primary-active-bg, $button-primary-active-border, $white);

7
scss/ionic/_mixins.scss
View File

@ -36,10 +36,13 @@
} }
} }
@mixin button-outline($color) { @mixin button-outline($color, $textColor:"") {
&.button-outline { &.button-outline {
border-color: $color; border-color: $color;
color: $color; @if $textColor == "" {
$textColor: $color;
}
color: $textColor;
&.active, &:active { &.active, &:active {
background-color: $color; background-color: $color;
color: #fff; color: #fff;

60
scss/ionic/_variables.scss
View File

@ -226,45 +226,45 @@ $button-font-size: 16px;
// Button block that has spacing // Button block that has spacing
$button-block-margin: 10px 0 10px 0; $button-block-margin: 10px 0 10px 0;
$button-default-bg: $brand-default; $button-default-bg: $brand-default;
$button-default-border: #ddd; $button-default-border: #ddd;
$button-default-active-bg: #fafafa; $button-default-active-bg: #fafafa;
$button-default-active-border: #bbb; $button-default-active-border: #bbb;
$button-secondary-bg: $brand-secondary; $button-secondary-bg: $brand-secondary;
$button-secondary-border: #bbb; $button-secondary-border: #bbb;
$button-secondary-active-bg: #e5e5e5; $button-secondary-active-bg: #e5e5e5;
$button-secondary-active-border: #999; $button-secondary-active-border: #999;
$button-primary-bg: $brand-primary; $button-primary-bg: $brand-primary;
$button-primary-border: #3b6dc2; $button-primary-border: #3b6dc2;
$button-primary-active-bg: #4175ce; $button-primary-active-bg: #4175ce;
$button-primary-active-border: #32599c; $button-primary-active-border: #32599c;
$button-info-bg: $brand-info; $button-info-bg: $brand-info;
$button-info-border: #3bb3c8; $button-info-border: #3bb3c8;
$button-info-active-bg: #3db8cd; $button-info-active-bg: #3db8cd;
$button-info-active-border: #3293a4; $button-info-active-border: #3293a4;
$button-success-bg: $brand-success; $button-success-bg: $brand-success;
$button-success-border: #5bb22f; $button-success-border: #5bb22f;
$button-success-active-bg: #55aa2b; $button-success-active-bg: #55aa2b;
$button-success-active-border: #448922; $button-success-active-border: #448922;
$button-warning-bg: $brand-warning; $button-warning-bg: $brand-warning;
$button-warning-border: #d29f31; $button-warning-border: #d29f31;
$button-warning-active-bg: #e2a114; $button-warning-active-bg: #e2a114;
$button-warning-active-border: #b88517; $button-warning-active-border: #b88517;
$button-danger-bg: $brand-danger; $button-danger-bg: $brand-danger;
$button-danger-border: #c73927; $button-danger-border: #c73927;
$button-danger-active-bg: #ce4331; $button-danger-active-bg: #ce4331;
$button-danger-active-border: #9f3527; $button-danger-active-border: #9f3527;
$button-dark-bg: $brand-dark; $button-dark-bg: $brand-dark;
$button-dark-border: #111; $button-dark-border: #111;
$button-dark-active-bg: #222; $button-dark-active-bg: #222;
$button-dark-active-border: #000; $button-dark-active-border: #000;
// Bars // Bars