Sha256: de3da189fd26b3c4103cb9241d8f55a16758c15c4710c59c25d4c2c5ee8118c7
Contents?: true
Size: 1.9 KB
Versions: 22
Compression:
Stored size: 1.9 KB
Contents
@import "settings.global";
@mixin button-color($background-color: $button-background-color, $color: $button-color) {
border: $button-border;
background-color: $background-color;
color: $color;
&.c-button--active {
background-color: darken($background-color, $color-tint);
}
&:not(:disabled) {
&:hover {
background-color: lighten($background-color, $color-tint);
}
&:focus {
border-color: $button-focus-border-color;
box-shadow: $button-focus-box-shadow;
}
&:active {
background-color: darken($background-color, $color-tint);
}
}
}
@mixin button-ghost($color: $button-ghost-color, $color-hover: $button-ghost-hover-color) {
border: $button-ghost-border-width $button-ghost-border-style $color;
background-color: transparent;
color: $color;
&.c-button--active {
border-color: darken($color, $color-tint);
background-color: darken($color, $color-tint);
color: $color-hover;
}
&:not(:disabled) {
&:hover {
background-color: $color;
color: $color-hover;
}
&:focus {
border-color: $button-focus-border-color;
box-shadow: $button-focus-box-shadow;
}
&:active {
border-color: darken($color, $color-tint);
background-color: darken($color, $color-tint);
color: $color-hover;
}
}
}
@mixin button {
@include button-color;
display: inline;
max-width: 100%;
margin: $button-margin;
padding: $button-padding;
border-radius: $button-border-radius;
outline: 0;
font-family: $button-font-family;
font-size: $button-font-size;
line-height: $button-line-height;
text-align: $button-text-align;
text-decoration: none;
text-overflow: ellipsis;
white-space: $button-white-space;
cursor: pointer;
overflow: hidden;
vertical-align: middle;
appearance: none;
user-select: none;
&:disabled {
cursor: not-allowed;
opacity: $button-disabled-opacity;
}
}
Version data entries
22 entries across 22 versions & 2 rubygems