99 lines
2.2 KiB
SCSS
99 lines
2.2 KiB
SCSS
@use "sass:color";
|
|
@use "scheme";
|
|
@use "font";
|
|
|
|
$scale: 0.068rem;
|
|
@function s($value: 1) {
|
|
@return $value * $scale;
|
|
}
|
|
|
|
@mixin rounded($all, $tl: $all, $tr: $all, $br: $all, $bl: $all) {
|
|
border-radius: s($tl) s($tr) s($br) s($bl);
|
|
-gtk-outline-radius: s($tl) s($tr) s($br) s($bl);
|
|
}
|
|
|
|
@mixin border($colour, $alpha: 1, $width: 1, $style: solid) {
|
|
border: s($width) $style color.change($colour, $alpha: $alpha);
|
|
}
|
|
|
|
@mixin shadow($colour: black, $alpha: 0.64, $x: 0, $y: 0, $blur: 3, $spread: 0) {
|
|
box-shadow: s($x) s($y) s($blur) s($spread) color.change($colour, $alpha: $alpha);
|
|
}
|
|
|
|
@mixin spacing($val: 5, $vertical: false) {
|
|
$dir: if($vertical, bottom, right);
|
|
|
|
& > *:not(:last-child) {
|
|
margin-#{$dir}: s($val);
|
|
}
|
|
}
|
|
|
|
@mixin element-decel($duration: 200ms) {
|
|
transition: $duration cubic-bezier(0, 0.55, 0.45, 1);
|
|
}
|
|
|
|
@mixin fluent-decel($duration: 200ms) {
|
|
transition: $duration cubic-bezier(0.1, 1, 0, 1);
|
|
}
|
|
|
|
@mixin overshot {
|
|
transition-timing-function: cubic-bezier(0.05, 0.9, 0.1, 1.1);
|
|
}
|
|
|
|
@mixin ease-in-out {
|
|
transition-timing-function: cubic-bezier(0.85, 0, 0.15, 1);
|
|
}
|
|
|
|
@mixin popdown-window($colour) {
|
|
@include rounded(8);
|
|
@include border($colour, 0.4, 2);
|
|
@include shadow;
|
|
@include font.mono;
|
|
|
|
background-color: scheme.$mantle;
|
|
color: $colour;
|
|
padding: s(10) s(12);
|
|
font-size: s(14);
|
|
|
|
.header {
|
|
@include spacing(8);
|
|
|
|
padding: 0 s(5);
|
|
margin-bottom: s(8);
|
|
font-size: s(15);
|
|
|
|
button {
|
|
@include rounded(5);
|
|
@include element-decel;
|
|
|
|
padding: s(3) s(8);
|
|
|
|
&:hover,
|
|
&:focus {
|
|
background-color: scheme.$surface0;
|
|
}
|
|
|
|
&:active {
|
|
background-color: scheme.$surface1;
|
|
}
|
|
|
|
&.enabled {
|
|
background-color: $colour;
|
|
color: scheme.$base;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
background-color: color.mix($colour, scheme.$base, 80%);
|
|
}
|
|
|
|
&:active {
|
|
background-color: color.mix($colour, scheme.$base, 70%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.icon {
|
|
font-size: s(32);
|
|
}
|
|
}
|