Sha256: 771e8f5dc5236ac0ec84348489f906bfece68519af59b79e9e21f36d42e96e01
Contents?: true
Size: 1.61 KB
Versions: 11
Compression:
Stored size: 1.61 KB
Contents
@mixin button($color) {
transition: box-shadow 0.2s;
cursor: pointer;
display: inline-block;
border-radius: 2px;
border: 1px solid $color;
padding: 0.4rem 0.8rem;
background-color: $color;
color: mix($secondary-text, white, 50%);
font-weight: bold;
box-shadow: 0 3px 3px transparentize($secondary-text, 0.25);
&:hover {
color: mix($secondary-text, white, 50%);
cursor: pointer;
position: relative;
box-shadow: 0 3px 3px 3px transparentize($secondary-text, 0);
background-color: mix($color, white, 80%);
border: 1px solid mix($color, white, 80%);
top: -1px;
}
&:active {
outline: none;
}
&[disabled] {
transition: box-shadow 0.2s;
cursor: not-allowed;
display: inline-block;
border-radius: 2px;
padding: 0.4rem 0.8rem;
background-color: mix($color, white, 30%);
border: 1px solid mix($color, white, 30%);
color: mix($secondary-text, white, 50%);
font-weight: bold;
box-shadow: 0 3px 3px transparentize($secondary-text, 0.25);
}
&[disabled]:hover {
color: mix($secondary-text, white, 50%);
cursor: not-allowed;
position: relative;
box-shadow: 0 3px 3px transparentize($secondary-text, 0.25);
background-color: mix($color, white, 30%);
border: 1px solid mix($color, white, 30%);
top: 0;
}
}
@mixin badge($color) {
$accent-size: 4px;
padding: 0.25rem 0.5rem 0.25rem calc(0.5rem - #{$accent-size});
border-radius: 0 6px 6px 6px;
border-left: $accent-size solid mix($color, white, 80%);
color: $secondary-text-light;
background-color: mix($color, white, 50%);
font-weight: bold;
font-size: 0.8rem;
}
Version data entries
11 entries across 11 versions & 1 rubygems