javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 23:16:52 +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;