Sha256: 8a45e51aacdb6ae4470104adfe70f1440b9794525608d570a757f7df3c5de1ee
Contents?: true
Size: 1.92 KB
Versions: 39
Compression:
Stored size: 1.92 KB
Contents
@mixin button-filled($button-color, $focus-color, $outline-color: null) {
$border-color: darken($button-color, 10%);
$active-color: darken($button-color, 15%);
background: linear-gradient(to bottom, lighten($button-color, 2%), darken($button-color, 2%));
border-color: $border-color;
box-shadow:
inset 0 1px 0 0 lighten($button-color, 3%),
shadow(faint),
0 0 0 0 transparent;
color: color(white);
&:hover {
background: linear-gradient(to bottom, $button-color, darken($button-color, 5%));
border-color: $border-color;
}
&:focus {
border-color: $focus-color;
box-shadow:
inset 0 1px 0 0 lighten($button-color, 5%),
shadow(faint),
0 0 0 1px $focus-color;
}
&:active {
background: linear-gradient(to bottom, $border-color, $border-color);
border-color: $active-color;
box-shadow:
inset 0 0 0 0 transparent,
shadow(faint),
0 0 1px 0 $active-color;
}
}
@mixin button-outline($outline-color) {
background: transparent;
border-color: rgba($outline-color, 0.4);
box-shadow: none;
color: darken($outline-color, 20%);
&:hover {
background: rgba($outline-color, 0.05);
border-color: rgba($outline-color, 0.4);
}
&:focus {
border-color: rgba($outline-color, 0.8);
box-shadow: 0 0 0 1px rgba($outline-color, 0.8);
}
&:active {
background: rgba($outline-color, 0.1);
box-shadow: none;
}
}
@function plain-button-background() {
@return rgba(color(ink), 0.1);
}
@mixin plain-button-backdrop() {
position: absolute;
top: -2px;
bottom: -2px;
left: -5px;
right: -5px;
display: block;
background: plain-button-background();
border-radius: border-radius();
transition: opacity duration() easing();
}
@mixin unstyled-button() {
appearance: none;
margin: 0;
padding: 0;
background: none;
border: none;
font-size: inherit;
line-height: inherit;
cursor: pointer;
&:focus {
outline: none;
}
}
Version data entries
39 entries across 39 versions & 1 rubygems