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);
border-color: #bbbbbb; }
.button.button-default.button-clear {
color: #333333;
color: #dddddd;
background: 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 {
color: #333333;
background-color: whitesmoke;
@ -1635,9 +1642,16 @@ input[type="checkbox"][readonly] {
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: #999999; }
.button.button-secondary.button-clear {
color: #333333;
color: #bbbbbb;
background: 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 {
color: white;
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);
border-color: #bbbbbb; }
.ionic .button.button-default.button-clear {
color: #333333;
color: #dddddd;
background: 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 {
color: #333333;
background-color: whitesmoke;
@ -2262,9 +2269,16 @@
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: #999999; }
.ionic .button.button-secondary.button-clear {
color: #333333;
color: #bbbbbb;
background: 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 {
color: white;
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);
border-color: #bbbbbb; }
.button.button-default.button-clear {
color: #333333;
color: #dddddd;
background: 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 {
color: #333333;
background-color: whitesmoke;
@ -2753,9 +2760,16 @@ input[type="checkbox"][readonly] {
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: #999999; }
.button.button-secondary.button-clear {
color: #333333;
color: #bbbbbb;
background: 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 {
color: white;
background-color: #4a87ee;

6
scss/ionic/_button.scss
View File

@ -46,11 +46,13 @@
&.button-default {
@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 {
@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 {
@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 {
border-color: $color;
color: $color;
@if $textColor == "" {
$textColor: $color;
}
color: $textColor;
&.active, &:active {
background-color: $color;
color: #fff;

60
scss/ionic/_variables.scss
View File

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