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

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