danbarber/julep
1
0
Fork 0
mirror of https://github.com/danbee/julep synced 2025-03-04 08:59:10 +00:00
Code Issues Releases Wiki Activity

Move button styles around and add comments.

Browse Source
This commit is contained in:
Dan Barber 2013-02-12 12:58:13 +00:00
parent 466d5282b1
commit 039fb0fcce
1 changed files with 3 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
includes/_buttons.scss
View File

@ -1,3 +1,4 @@
// define some global button styles.
.button { .button {
border-radius: 0.3em; border-radius: 0.3em;
@include box-shadow(0 1px 1px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.4)); @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.4));
@ -10,6 +11,7 @@
} }
} }
// extend global style and add color information.
@mixin button($color) { @mixin button($color) {
border: { border: {
style: solid; style: solid;
@ -18,11 +20,11 @@
}; };
background: $color; background: $color;
@include linear-gradient(lighten($color, 10%), darken($color, 10%)); @include linear-gradient(lighten($color, 10%), darken($color, 10%));
@extend .button;
&:hover, &:focus { &:hover, &:focus {
@include linear-gradient(lighten($color, 15%), darken($color, 5%)); @include linear-gradient(lighten($color, 15%), darken($color, 5%));
} }
&:active { &:active {
@include linear-gradient($color, darken($color, 10%)); @include linear-gradient($color, darken($color, 10%));
} }
@extend .button;
} }