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

Updated button styles to Ben's taste

Browse Source
This commit is contained in:
Max Lynch
2013-09-25 11:33:29 -05:00
parent a8a2217182
commit 02db453c70
6 changed files with 147 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
scss/_mixins.scss
View File

@ -2,7 +2,7 @@
//
// Useful utilities and mixins for SCSS files.
@mixin button-style($bgColor, $borderColor, $color) {
@mixin button-style($bgColor, $borderColor, $activeBgColor, $activeBorderColor, $color) {
color: $color;
background-color: $bgColor;
border-color: $borderColor;
@ -18,9 +18,9 @@
//background-color: lighten($bgColor, 10%);
}
&.active, &:active {
background-color: darken($bgColor, 8%);
box-shadow: inset 0px 1px 3px rgba(0,0,0,0.12);
border-color: darken($borderColor, 10%);
background-color: $activeBgColor;
box-shadow: inset 0px 1px 3px rgba(0,0,0,0.15);
border-color: $activeBorderColor;
}
}

64
scss/_variables.scss
View File

@ -4,11 +4,11 @@
$brand-default: #fff;
$brand-secondary: #f5f5f5;
$brand-primary: #6999e9;
$brand-success: #89c163;
$brand-primary: #4a87ee;
$brand-info: #43cee6;
$brand-success: #66cc33;
$brand-warning: #f0b840;
$brand-danger: #de5645;
$brand-info: #60d2e6;
$brand-danger: #ef4e3a;
$brand-dark: #444;
@ -204,37 +204,45 @@ $button-font-size: 16px;
// Button block that has spacing
$button-block-margin: 10px 0 10px 0;
$button-default-bg: #fff;
$button-default-bg-active: #eee;
$buttonDefaultBorder: #ddd;
$button-default-bg: $brand-default;
$button-default-border: #ddd;
$button-default-active-bg: #fafafa;
$button-default-active-border: #bbb;
$button-secondary-bg: #f5f5f5;
$button-secondary-bg-active: #eee;
$button-secondary-border: #ccc;
$button-secondary-bg: $brand-secondary;
$button-secondary-border: #bbb;
$button-secondary-active-bg: #e5e5e5;
$button-secondary-active-border: #999;
$button-primary-bg: #6999e9;
$button-primary-bg-active: #eee;
$button-primary-border: #5981c5;
$button-primary-bg: $brand-primary;
$button-primary-border: #3b6dc2;
$button-primary-active-bg: #4175ce;
$button-primary-active-border: #32599c;
$button-info-bg: #60d2e6;
$button-info-bg-active: #eee;
$button-info-border: #51b3c4;
$button-info-bg: $brand-info;
$button-info-border: #3bb3c8;
$button-info-active-bg: #3db8cd;
$button-info-active-border: #3293a4;
$button-success-bg: #89c163;
$button-success-bg-active: #eee;
$button-success-border: #71a052;
$button-success-bg: $brand-success;
$button-success-border: #5bb22f;
$button-success-active-bg: #55aa2b;
$button-success-active-border: #448922;
$button-warning-bg: #f0b840;
$button-warning-bg-active: #eee;
$button-warning-border: #cf9a29;
$button-warning-bg: $brand-warning;
$button-warning-border: #d29f31;
$button-warning-active-bg: #e2a114;
$button-warning-active-border: #b88517;
$button-danger-bg: #de5645;
$button-danger-bg-active: #eee;
$buttonDangerBorder: #bc4435;
$button-danger-bg: $brand-danger;
$button-danger-border: #c73927;
$button-danger-active-bg: #ce4331;
$button-danger-active-border: #9f3527;
$button-dark-bg: #444;
$button-dark-bg-active: #eee;
$button-dark-bg: $brand-dark;
$button-dark-border: #111;
$button-dark-active-bg: #222;
$button-dark-active-border: #000;
// Bars
@ -283,7 +291,7 @@ $tabs-default-bg: #fff;
$tabs-default-border-color: #ddd;
$tabs-secondary-bg: #f5f5f5;
$tabs-secondary-border-color: #ccc;
$tabs-secondary-border-color: #bbb;
$tabs-primary-bg: #6999e9;
$tabs-primary-border-color: #5981c5;

16
scss/ionic/_bar.scss
View File

@ -118,45 +118,45 @@
.bar-default {
.button {
@include button-style($button-default-bg, $buttonDefaultBorder, $gray-dark);
@include button-style($button-default-bg, $button-default-border, $button-default-active-bg, $button-default-active-border, $gray-dark);
}
}
.bar-secondary {
.button {
@include button-style($button-secondary-bg, $button-secondary-border, $gray-dark);
@include button-style($button-secondary-bg, $button-secondary-border, $button-secondary-active-bg, $button-secondary-active-border, $gray-dark);
}
}
.bar-primary {
.button {
@include button-style($button-primary-bg, $button-primary-border, $white);
@include button-style($button-primary-bg, $button-primary-border, $button-primary-active-bg, $button-primary-active-border, $white);
}
}
.bar-info {
.button {
@include button-style($button-info-bg, $button-info-border, $white);
@include button-style($button-info-bg, $button-info-border, $button-info-active-bg, $button-info-active-border, $white);
}
}
.bar-success {
.button {
@include button-style($button-success-bg, $button-success-border, $white);
@include button-style($button-success-bg, $button-success-border, $button-success-active-bg, $button-success-active-border, $white);
}
}
.bar-warning {
.button {
@include button-style($button-warning-bg, $button-warning-border, $white);
@include button-style($button-warning-bg, $button-warning-border, $button-warning-active-bg, $button-warning-active-border, $white);
}
}
.bar-danger {
.button {
@include button-style($button-danger-bg, $buttonDangerBorder, $white);
@include button-style($button-danger-bg, $button-danger-border, $button-danger-active-bg, $button-danger-active-border, $white);
}
}
.bar-dark {
// A default style for buttons
.button {
@include button-style($button-dark-bg, $button-dark-border, $white);
@include button-style($button-dark-bg, $button-dark-border, $button-dark-active-bg, $button-dark-active-border, $white);
}
}

18
scss/ionic/_button.scss
View File

@ -29,28 +29,28 @@
}
&.button-default {
@include button-style($button-default-bg, $buttonDefaultBorder, $gray-dark);
@include button-style($button-default-bg, $button-default-border, $button-default-active-bg, $button-default-active-border, $gray-dark);
}
&.button-secondary {
@include button-style($button-secondary-bg, $button-secondary-border, $gray-dark);
@include button-style($button-secondary-bg, $button-secondary-border, $button-secondary-active-bg, $button-secondary-active-border, $gray-dark);
}
&.button-primary {
@include button-style($button-primary-bg, $button-primary-border, $white);
@include button-style($button-primary-bg, $button-primary-border, $button-primary-active-bg, $button-primary-active-border, $white);
}
&.button-info {
@include button-style($button-info-bg, $button-info-border, $white);
@include button-style($button-info-bg, $button-info-border, $button-info-active-bg, $button-info-active-border, $white);
}
&.button-success {
@include button-style($button-success-bg, $button-success-border, $white);
@include button-style($button-success-bg, $button-success-border, $button-success-active-bg, $button-success-active-border, $white);
}
&.button-warning {
@include button-style($button-warning-bg, $button-warning-border, $white);
@include button-style($button-warning-bg, $button-warning-border, $button-warning-active-bg, $button-warning-active-border, $white);
}
&.button-danger {
@include button-style($button-danger-bg, $buttonDangerBorder, $white);
@include button-style($button-danger-bg, $button-danger-border, $button-danger-active-bg, $button-danger-active-border, $white);
}
&.button-dark {
@include button-style($button-dark-bg, $button-dark-border, $white);
@include button-style($button-dark-bg, $button-dark-border, $button-dark-active-bg, $button-dark-active-border, $white);
}
&.button-icon {
@ -72,6 +72,6 @@ a.button {
background: transparent;
}
.button-borderless [class^="icon-"] {
.button-clear [class^="icon-"] {
font-size: 24px;
}