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

Better buttons

Browse Source
This commit is contained in:
Max Lynch
2013-08-23 17:52:26 -05:00
parent 628703969b
commit 66b91187df
3 changed files with 55 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
dist/framework-with-theme.css vendored
View File

@ -193,74 +193,100 @@ a.list-item:hover, a.list-item:focus {
padding: 10px 15px; } padding: 10px 15px; }
.button-default { .button-default {
color: #333333;
background-color: white; background-color: white;
border-color: #dddddd; } border-color: #dddddd; }
.button-default:hover { .button-default:hover {
background-color: white; } color: #333333;
background-color: white;
text-decoration: none; }
.button-default:active { .button-default:active {
background-color: #e6e6e6; } background-color: #e6e6e6;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); }
.button-secondary { .button-secondary {
color: #333333;
background-color: whitesmoke; background-color: whitesmoke;
border-color: #cccccc; } border-color: #cccccc; }
.button-secondary:hover { .button-secondary:hover {
background-color: white; } color: #333333;
background-color: white;
text-decoration: none; }
.button-secondary:active { .button-secondary:active {
background-color: gainsboro; } background-color: gainsboro;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); }
.button-primary { .button-primary {
color: white; color: white;
background-color: #6999e9; background-color: #6999e9;
border-color: #5981c5; } border-color: #5981c5; }
.button-primary:hover { .button-primary:hover {
background-color: #95b7f0; } color: white;
background-color: #95b7f0;
text-decoration: none; }
.button-primary:active { .button-primary:active {
background-color: #3d7be2; } background-color: #3d7be2;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); }
.button-info { .button-info {
color: white; color: white;
background-color: #60d2e6; background-color: #60d2e6;
border-color: #51b3c4; } border-color: #51b3c4; }
.button-info:hover { .button-info:hover {
background-color: #8cdeed; } color: white;
background-color: #8cdeed;
text-decoration: none; }
.button-info:active { .button-info:active {
background-color: #34c6df; } background-color: #34c6df;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); }
.button-success { .button-success {
color: white; color: white;
background-color: #89c163; background-color: #89c163;
border-color: #71a052; } border-color: #71a052; }
.button-success:hover { .button-success:hover {
background-color: #a5d087; } color: white;
background-color: #a5d087;
text-decoration: none; }
.button-success:active { .button-success:active {
background-color: #6fac45; } background-color: #6fac45;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); }
.button-warning { .button-warning {
color: white; color: white;
background-color: #f0b840; background-color: #f0b840;
border-color: #cf9a29; } border-color: #cf9a29; }
.button-warning:hover { .button-warning:hover {
background-color: #f4ca6f; } color: white;
background-color: #f4ca6f;
text-decoration: none; }
.button-warning:active { .button-warning:active {
background-color: #eba612; } background-color: #eba612;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); }
.button-danger { .button-danger {
color: white; color: white;
background-color: #de5645; background-color: #de5645;
border-color: #bc4435; } border-color: #bc4435; }
.button-danger:hover { .button-danger:hover {
background-color: #e67d70; } color: white;
background-color: #e67d70;
text-decoration: none; }
.button-danger:active { .button-danger:active {
background-color: #cc3724; } background-color: #cc3724;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); }
.button-dark { .button-dark {
color: white; color: white;
background-color: #444444; background-color: #444444;
border-color: #111111; } border-color: #111111; }
.button-dark:hover { .button-dark:hover {
background-color: #5e5e5e; } color: white;
background-color: #5e5e5e;
text-decoration: none; }
.button-dark:active { .button-dark:active {
background-color: #2b2b2b; } background-color: #2b2b2b;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); }
.list-divider { .list-divider {
background-color: whitesmoke; background-color: whitesmoke;

6
scss/framework/structure/_mixins.scss
View File

@ -1,12 +1,16 @@
@mixin button-style($bgColor, $borderColor) { @mixin button-style($bgColor, $borderColor, $color) {
color: $color;
background-color: $bgColor; background-color: $bgColor;
border-color: $borderColor; border-color: $borderColor;
// Give desktop users something to play with // Give desktop users something to play with
&:hover { &:hover {
color: $color;
background-color: lighten($bgColor, 10%); background-color: lighten($bgColor, 10%);
text-decoration: none;
} }
&:active { &:active {
background-color: darken($bgColor, 10%); background-color: darken($bgColor, 10%);
box-shadow: inset 0px 1px 3px rgba(0,0,0,0.15);
} }
} }

22
scss/framework/theme/default/_button.scss
View File

@ -8,32 +8,26 @@
} }
.button-default { .button-default {
@include button-style($buttonDefaultBackground, $buttonDefaultBorder); @include button-style($buttonDefaultBackground, $buttonDefaultBorder, $darkColor);
} }
.button-secondary { .button-secondary {
@include button-style($buttonSecondaryBackground, $buttonSecondaryBorder); @include button-style($buttonSecondaryBackground, $buttonSecondaryBorder, $darkColor);
} }
.button-primary { .button-primary {
color: $lightColor; @include button-style($buttonPrimaryBackground, $buttonPrimaryBorder, $lightColor);
@include button-style($buttonPrimaryBackground, $buttonPrimaryBorder);
} }
.button-info { .button-info {
color: $lightColor; @include button-style($buttonInfoBackground, $buttonInfoBorder, $lightColor);
@include button-style($buttonInfoBackground, $buttonInfoBorder);
} }
.button-success { .button-success {
color: $lightColor; @include button-style($buttonSuccessBackground, $buttonSuccessBorder, $lightColor);
@include button-style($buttonSuccessBackground, $buttonSuccessBorder);
} }
.button-warning { .button-warning {
color: $lightColor; @include button-style($buttonWarningBackground, $buttonWarningBorder, $lightColor);
@include button-style($buttonWarningBackground, $buttonWarningBorder);
} }
.button-danger { .button-danger {
color: $lightColor; @include button-style($buttonDangerBackground, $buttonDangerBorder, $lightColor);
@include button-style($buttonDangerBackground, $buttonDangerBorder);
} }
.button-dark { .button-dark {
color: $lightColor; @include button-style($buttonDarkBackground, $buttonDarkBorder, $lightColor);
@include button-style($buttonDarkBackground, $buttonDarkBorder);
} }