BurnyLlama
/
nebulosa-css
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Made buttons slightly better.

main
BurnyLlama 2023-03-29 10:30:34 +02:00
parent 21210d288c
commit 2d75452ece
2 changed files with 24 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/_palette.scss
View File

@ -172,6 +172,17 @@ $primary800: $sea800;
$primary900: $sea900;
$primary: $sea;
$accent50: $purple50;
$accent100: $purple100;
$accent200: $purple200;
$accent300: $purple300;
$accent400: $purple400;
$accent500: $purple500;
$accent600: $purple600;
$accent700: $purple700;
$accent800: $purple800;
$accent900: $purple900;
$accent: $purple;
$success: $sea;
$danger: $red;

27
src/buttons.scss
View File

@ -1,4 +1,5 @@
// FIXME: All secondary buttons should maybe use a secondary colour!
// FIXME: Actually, some should maybe just be black...
@use "palette";
@ -31,19 +32,18 @@
background-color: palette.$primary;
}
// TODO: This looks really bad. :)
&.secondary {
@if lightness(palette.$primary50) < 50 {
@if lightness(palette.$accent) < 50 {
color: palette.$grey50
} @else {
color: palette.$grey900
}
background-color: palette.$primary200;
border-color: palette.$primary200;
box-shadow: 0 .3rem 0 0 palette.$primary400;
background-color: palette.$accent;
border-color: palette.$accent;
box-shadow: 0 .3rem 0 0 palette.$accent600;
&:hover {
box-shadow: 0 0 0 0 palette.$primary;
box-shadow: 0 0 0 0 palette.$accent600;
}
}
@ -71,18 +71,18 @@
background-color: palette.$primary;
}
// TODO: This looks really bad. :)
&.secondary {
@if lightness(palette.$primary200) < 50 {
@if lightness(palette.$accent) < 50 {
color: palette.$grey50
} @else {
color: palette.$grey900
}
background-color: palette.$primary200;
border-color: palette.$primary200;
background-color: palette.$accent;
border-color: palette.$accent;
}
&:hover {
color: palette.$grey900;
background-color: transparent;
}
@ -109,18 +109,17 @@
}
}
// TODO: This looks really bad. :)
&.secondary {
@if lightness(palette.$primary200) < 50 {
@if lightness(palette.$accent) < 50 {
color: palette.$grey50
} @else {
color: palette.$grey900
}
background-color: transparent;
border-color: palette.$primary200;
border-color: palette.$accent;
&:hover {
background-color: palette.$primary200;
background-color: palette.$accent;
}
}