anki/ts/sass/button_mixins.scss

83 lines
2.0 KiB
SCSS

@mixin btn-day($with-disabled: true) {
$base-color: white;
.btn-day {
color: var(--text-fg);
background-color: $base-color;
border-color: var(--medium-border) !important;
@content ($base-color);
&:hover {
background-color: darken($base-color, 8%);
}
&:active,
&.active {
@include impressed-shadow(0.25);
}
&:active.active {
box-shadow: none;
}
@if ($with-disabled) {
&[disabled] {
background-color: $base-color !important;
box-shadow: none !important;
}
}
}
}
@mixin btn-night($with-disabled: true) {
$base-color: #666;
.btn-night {
color: var(--text-fg);
background-color: $base-color;
border-color: $base-color;
@content ($base-color);
&:hover {
background-color: lighten($base-color, 8%);
border-color: lighten($base-color, 8%);
}
&:active,
&.active {
@include impressed-shadow(0.35);
border-color: darken($base-color, 8%);
}
&:active.active {
box-shadow: none;
border-color: $base-color;
}
@if ($with-disabled) {
&[disabled] {
background-color: $base-color !important;
box-shadow: none !important;
border-color: $base-color !important;
}
}
}
}
@mixin impressed-shadow($intensity) {
box-shadow: inset 0 calc(var(--toolbar-size) / 15) calc(var(--toolbar-size) / 5)
rgba(black, $intensity);
}
@mixin rainbow($base) {
background: content-box
linear-gradient(217deg, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0) 70.71%),
content-box
linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%),
content-box
linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%),
border-box $base;
}