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

Added border color darken for active state on buttons, made buttons by default block

Browse Source
This commit is contained in:
Ben Sperry
2013-08-26 11:01:34 -05:00
parent d160ca6117
commit a3b45c3c02
4 changed files with 31 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -2,3 +2,6 @@
*.sw[mpcod] *.sw[mpcod]
.sass-cache/ .sass-cache/
framework.sublime-project
framework.sublime-workspace

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

@ -1,3 +1,4 @@
@charset "UTF-8";
html { html {
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%; } -ms-text-size-adjust: 100%; }
@ -44,11 +45,13 @@ main > * {
.button { .button {
position: relative; position: relative;
display: inline-block; display: block;
vertical-align: middle; vertical-align: middle;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
margin: 0; } margin: 0; }
.button.button-inline {
display: inline-block; }
.button.button-borderless { .button.button-borderless {
border: none; } border: none; }
@ -331,7 +334,8 @@ a.list-item {
text-decoration: none; } text-decoration: none; }
.button-default.active, .button-default:active { .button-default.active, .button-default:active {
background-color: #e6e6e6; background-color: #e6e6e6;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); } box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: #c4c4c4; }
.button-secondary { .button-secondary {
color: #333333; color: #333333;
@ -342,7 +346,8 @@ a.list-item {
text-decoration: none; } text-decoration: none; }
.button-secondary.active, .button-secondary:active { .button-secondary.active, .button-secondary:active {
background-color: gainsboro; background-color: gainsboro;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); } box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: #b3b3b3; }
.button-primary { .button-primary {
color: white; color: white;
@ -353,7 +358,8 @@ a.list-item {
text-decoration: none; } text-decoration: none; }
.button-primary.active, .button-primary:active { .button-primary.active, .button-primary:active {
background-color: #3d7be2; background-color: #3d7be2;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); } box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: #3d67ae; }
.button-info { .button-info {
color: white; color: white;
@ -364,7 +370,8 @@ a.list-item {
text-decoration: none; } text-decoration: none; }
.button-info.active, .button-info:active { .button-info.active, .button-info:active {
background-color: #34c6df; background-color: #34c6df;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); } box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: #3998a9; }
.button-success { .button-success {
color: white; color: white;
@ -375,7 +382,8 @@ a.list-item {
text-decoration: none; } text-decoration: none; }
.button-success.active, .button-success:active { .button-success.active, .button-success:active {
background-color: #6fac45; background-color: #6fac45;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); } box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: #597e41; }
.button-warning { .button-warning {
color: white; color: white;
@ -386,7 +394,8 @@ a.list-item {
text-decoration: none; } text-decoration: none; }
.button-warning.active, .button-warning:active { .button-warning.active, .button-warning:active {
background-color: #eba612; background-color: #eba612;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); } box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: #a47a21; }
.button-danger { .button-danger {
color: white; color: white;
@ -397,7 +406,8 @@ a.list-item {
text-decoration: none; } text-decoration: none; }
.button-danger.active, .button-danger:active { .button-danger.active, .button-danger:active {
background-color: #cc3724; background-color: #cc3724;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); } box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: #94362a; }
.button-dark { .button-dark {
color: white; color: white;
@ -408,7 +418,8 @@ a.list-item {
text-decoration: none; } text-decoration: none; }
.button-dark.active, .button-dark:active { .button-dark.active, .button-dark:active {
background-color: #2b2b2b; background-color: #2b2b2b;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); } box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: black; }
.list-divider { .list-divider {
background-color: whitesmoke; background-color: whitesmoke;

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

@ -1,11 +1,15 @@
.button { .button {
position: relative; position: relative;
display: inline-block; display: block;
vertical-align: middle; vertical-align: middle;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
margin: 0; margin: 0;
&.button-inline {
display: inline-block;
}
&.button-borderless { &.button-borderless {
border: none; border: none;
} }

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

@ -16,6 +16,7 @@
&.active, &:active { &.active, &:active {
background-color: darken($bgColor, 10%); background-color: darken($bgColor, 10%);
box-shadow: inset 0px 1px 3px rgba(0,0,0,0.15); box-shadow: inset 0px 1px 3px rgba(0,0,0,0.15);
border-color: darken($borderColor, 10%);
} }
} }