mirror of
https://github.com/danbee/julep
synced 2025-03-04 08:59:10 +00:00
32 lines
934 B
SCSS
32 lines
934 B
SCSS
// define some global button styles.
|
|
.button {
|
|
font-size: 1em;
|
|
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));
|
|
padding: 0.3em 0.7em 0.4em;
|
|
color: white;
|
|
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
|
|
&:active {
|
|
padding: 0.4em 0.7em 0.3em;
|
|
@include box-shadow(0 1px 1px rgba(0, 0, 0, 0.3), inset 0 2px 2px rgba(0, 0, 0, 0.4));
|
|
}
|
|
}
|
|
|
|
// extend global style and add color information.
|
|
@mixin button($color) {
|
|
border: {
|
|
style: solid;
|
|
width: 1px;
|
|
color: darken($color, 10%) darken($color, 25%) darken($color, 40%);
|
|
};
|
|
background: $color;
|
|
@include linear-gradient(lighten($color, 10%), darken($color, 10%));
|
|
&:hover, &:focus {
|
|
@include linear-gradient(lighten($color, 15%), darken($color, 5%));
|
|
}
|
|
&:active {
|
|
@include linear-gradient($color, darken($color, 10%));
|
|
}
|
|
@extend .button;
|
|
}
|