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

Made buttons slightly better.

Browse Source
This commit is contained in:
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; $primary900: $sea900;
$primary: $sea; $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; $success: $sea;
$danger: $red; $danger: $red;

27
src/buttons.scss
View File

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