mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-07 23:16:52 +08:00
40 lines
1.1 KiB
SCSS
40 lines
1.1 KiB
SCSS
@mixin button-style($bgColor, $borderColor, $color) {
|
|
color: $color;
|
|
background-color: $bgColor;
|
|
border-color: $borderColor;
|
|
|
|
// Give desktop users something to play with
|
|
&:hover {
|
|
color: $color;
|
|
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, 8%);
|
|
box-shadow: inset 0px 1px 3px rgba(0,0,0,0.12);
|
|
border-color: darken($borderColor, 10%);
|
|
}
|
|
}
|
|
|
|
// Single side border-radius
|
|
@mixin border-top-radius($radius) {
|
|
border-top-right-radius: $radius;
|
|
border-top-left-radius: $radius;
|
|
}
|
|
@mixin border-right-radius($radius) {
|
|
border-bottom-right-radius: $radius;
|
|
border-top-right-radius: $radius;
|
|
}
|
|
@mixin border-bottom-radius($radius) {
|
|
border-bottom-right-radius: $radius;
|
|
border-bottom-left-radius: $radius;
|
|
}
|
|
@mixin border-left-radius($radius) {
|
|
border-bottom-left-radius: $radius;
|
|
border-top-left-radius: $radius;
|
|
}
|