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:57:01 -05:00
parent 66b91187df
commit 3a4bd924a5
2 changed files with 5 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -198,7 +198,6 @@ a.list-item:hover, a.list-item:focus {
border-color: #dddddd; } border-color: #dddddd; }
.button-default:hover { .button-default:hover {
color: #333333; color: #333333;
background-color: white;
text-decoration: none; } text-decoration: none; }
.button-default:active { .button-default:active {
background-color: #e6e6e6; background-color: #e6e6e6;
@ -210,7 +209,6 @@ a.list-item:hover, a.list-item:focus {
border-color: #cccccc; } border-color: #cccccc; }
.button-secondary:hover { .button-secondary:hover {
color: #333333; color: #333333;
background-color: white;
text-decoration: none; } text-decoration: none; }
.button-secondary:active { .button-secondary:active {
background-color: gainsboro; background-color: gainsboro;
@ -222,7 +220,6 @@ a.list-item:hover, a.list-item:focus {
border-color: #5981c5; } border-color: #5981c5; }
.button-primary:hover { .button-primary:hover {
color: white; color: white;
background-color: #95b7f0;
text-decoration: none; } text-decoration: none; }
.button-primary:active { .button-primary:active {
background-color: #3d7be2; background-color: #3d7be2;
@ -234,7 +231,6 @@ a.list-item:hover, a.list-item:focus {
border-color: #51b3c4; } border-color: #51b3c4; }
.button-info:hover { .button-info:hover {
color: white; color: white;
background-color: #8cdeed;
text-decoration: none; } text-decoration: none; }
.button-info:active { .button-info:active {
background-color: #34c6df; background-color: #34c6df;
@ -246,7 +242,6 @@ a.list-item:hover, a.list-item:focus {
border-color: #71a052; } border-color: #71a052; }
.button-success:hover { .button-success:hover {
color: white; color: white;
background-color: #a5d087;
text-decoration: none; } text-decoration: none; }
.button-success:active { .button-success:active {
background-color: #6fac45; background-color: #6fac45;
@ -258,7 +253,6 @@ a.list-item:hover, a.list-item:focus {
border-color: #cf9a29; } border-color: #cf9a29; }
.button-warning:hover { .button-warning:hover {
color: white; color: white;
background-color: #f4ca6f;
text-decoration: none; } text-decoration: none; }
.button-warning:active { .button-warning:active {
background-color: #eba612; background-color: #eba612;
@ -270,7 +264,6 @@ a.list-item:hover, a.list-item:focus {
border-color: #bc4435; } border-color: #bc4435; }
.button-danger:hover { .button-danger:hover {
color: white; color: white;
background-color: #e67d70;
text-decoration: none; } text-decoration: none; }
.button-danger:active { .button-danger:active {
background-color: #cc3724; background-color: #cc3724;
@ -282,7 +275,6 @@ a.list-item:hover, a.list-item:focus {
border-color: #111111; } border-color: #111111; }
.button-dark:hover { .button-dark:hover {
color: white; color: white;
background-color: #5e5e5e;
text-decoration: none; } text-decoration: none; }
.button-dark:active { .button-dark:active {
background-color: #2b2b2b; background-color: #2b2b2b;

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

@ -6,8 +6,12 @@
// Give desktop users something to play with // Give desktop users something to play with
&:hover { &:hover {
color: $color; color: $color;
background-color: lighten($bgColor, 10%);
text-decoration: none; text-decoration: none;
// TODO: Verify if we should keep this or not. Feels weird on Safari
// Since the button shows the hover state after clicking, but we only
// want it on desktop
//background-color: lighten($bgColor, 10%);
} }
&:active { &:active {
background-color: darken($bgColor, 10%); background-color: darken($bgColor, 10%);