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

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; }
.button-default {
color: #333333;
background-color: white;
border-color: #dddddd; }
.button-default:hover {
background-color: white; }
color: #333333;
background-color: white;
text-decoration: none; }
.button-default:active {
background-color: #e6e6e6; }
background-color: #e6e6e6;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); }
.button-secondary {
color: #333333;
background-color: whitesmoke;
border-color: #cccccc; }
.button-secondary:hover {
background-color: white; }
color: #333333;
background-color: white;
text-decoration: none; }
.button-secondary:active {
background-color: gainsboro; }
background-color: gainsboro;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); }
.button-primary {
color: white;
background-color: #6999e9;
border-color: #5981c5; }
.button-primary:hover {
background-color: #95b7f0; }
color: white;
background-color: #95b7f0;
text-decoration: none; }
.button-primary:active {
background-color: #3d7be2; }
background-color: #3d7be2;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); }
.button-info {
color: white;
background-color: #60d2e6;
border-color: #51b3c4; }
.button-info:hover {
background-color: #8cdeed; }
color: white;
background-color: #8cdeed;
text-decoration: none; }
.button-info:active {
background-color: #34c6df; }
background-color: #34c6df;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); }
.button-success {
color: white;
background-color: #89c163;
border-color: #71a052; }
.button-success:hover {
background-color: #a5d087; }
color: white;
background-color: #a5d087;
text-decoration: none; }
.button-success:active {
background-color: #6fac45; }
background-color: #6fac45;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); }
.button-warning {
color: white;
background-color: #f0b840;
border-color: #cf9a29; }
.button-warning:hover {
background-color: #f4ca6f; }
color: white;
background-color: #f4ca6f;
text-decoration: none; }
.button-warning:active {
background-color: #eba612; }
background-color: #eba612;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); }
.button-danger {
color: white;
background-color: #de5645;
border-color: #bc4435; }
.button-danger:hover {
background-color: #e67d70; }
color: white;
background-color: #e67d70;
text-decoration: none; }
.button-danger:active {
background-color: #cc3724; }
background-color: #cc3724;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); }
.button-dark {
color: white;
background-color: #444444;
border-color: #111111; }
.button-dark:hover {
background-color: #5e5e5e; }
color: white;
background-color: #5e5e5e;
text-decoration: none; }
.button-dark:active {
background-color: #2b2b2b; }
background-color: #2b2b2b;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); }
.list-divider {
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;
border-color: $borderColor;
// Give desktop users something to play with
&:hover {
color: $color;
background-color: lighten($bgColor, 10%);
text-decoration: none;
}
&:active {
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 {
@include button-style($buttonDefaultBackground, $buttonDefaultBorder);
@include button-style($buttonDefaultBackground, $buttonDefaultBorder, $darkColor);
}
.button-secondary {
@include button-style($buttonSecondaryBackground, $buttonSecondaryBorder);
@include button-style($buttonSecondaryBackground, $buttonSecondaryBorder, $darkColor);
}
.button-primary {
color: $lightColor;
@include button-style($buttonPrimaryBackground, $buttonPrimaryBorder);
@include button-style($buttonPrimaryBackground, $buttonPrimaryBorder, $lightColor);
}
.button-info {
color: $lightColor;
@include button-style($buttonInfoBackground, $buttonInfoBorder);
@include button-style($buttonInfoBackground, $buttonInfoBorder, $lightColor);
}
.button-success {
color: $lightColor;
@include button-style($buttonSuccessBackground, $buttonSuccessBorder);
@include button-style($buttonSuccessBackground, $buttonSuccessBorder, $lightColor);
}
.button-warning {
color: $lightColor;
@include button-style($buttonWarningBackground, $buttonWarningBorder);
@include button-style($buttonWarningBackground, $buttonWarningBorder, $lightColor);
}
.button-danger {
color: $lightColor;
@include button-style($buttonDangerBackground, $buttonDangerBorder);
@include button-style($buttonDangerBackground, $buttonDangerBorder, $lightColor);
}
.button-dark {
color: $lightColor;
@include button-style($buttonDarkBackground, $buttonDarkBorder);
@include button-style($buttonDarkBackground, $buttonDarkBorder, $lightColor);
}