Lenaisten/advent22
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

scss color scheme improvements

Browse source
This commit is contained in:
Jörn-Michael Miehe 2023-11-06 00:03:23 +00:00
parent e613ead635
commit f9583571ed
4 changed files with 45 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
ui/src/bulma-scheme.scss Normal file
View file

@ -0,0 +1,22 @@
@charset "utf-8";
@use "sass:map";
//=====================
// custom color scheme
//=====================
$advent22-colors: (
"primary": #945DE1,
"link": #64B4BD,
"info": #8C4E80,
"success": #7E8E2B,
"warning": #F6CA6B,
"danger": #C5443B,
);
$primary: map.get($advent22-colors, "primary");
$link: map.get($advent22-colors, "link");
$info: map.get($advent22-colors, "info");
$success: map.get($advent22-colors, "success");
$warning: map.get($advent22-colors, "warning");
$danger: map.get($advent22-colors, "danger");

20
ui/src/bulma-vars.scss
View file

@ -1,20 +0,0 @@
@charset "utf-8";
//=====================
// custom color scheme
//=====================
$primary: #945DE1;
$link: #64B4BD;
$info: #8C4E80;
$success: #7E8E2B;
$warning: #F6CA6B;
$danger: #C5443B;
// Sass variables (bulma)
@import "~bulma/sass/utilities/initial-variables.sass";
@import "~bulma/sass/utilities/derived-variables.sass";
// Sass variables (bulma-prefers-dark)
@import "~bulma-prefers-dark/sass/utilities/initial-variables.sass";
@import "~bulma-prefers-dark/sass/utilities/derived-variables.sass";

33
ui/src/components/calendar/SVGRect.vue
View file

@ -56,7 +56,7 @@ export default class extends Vue {
</script>
<style lang="scss" scoped>
@import "@/bulma-vars";
@import "@/bulma-scheme";
rect {
fill: transparent;
@ -64,34 +64,11 @@ rect {
stroke-opacity: 0.9;
stroke-width: 1;
&.primary {
fill: $primary;
stroke: $primary;
@each $name, $color in $advent22-colors {
&.#{$name} {
fill: $color;
stroke: $color;
}
&.link {
fill: $link;
stroke: $link;
}
&.info {
fill: $info;
stroke: $info;
}
&.success {
fill: $success;
stroke: $success;
}
&.warning {
fill: $warning;
stroke: $warning;
}
&.danger {
fill: $danger;
stroke: $danger;
}
}
</style>

18
ui/src/main.scss
View file

@ -1,6 +1,19 @@
@charset "utf-8";
@import "@/bulma-vars";
//===========
// variables
//===========
// custom color scheme
@import "@/bulma-scheme";
// Sass variables (bulma)
@import "~bulma/sass/utilities/initial-variables.sass";
@import "~bulma/sass/utilities/derived-variables.sass";
// Sass variables (bulma-prefers-dark)
@import "~bulma-prefers-dark/sass/utilities/initial-variables.sass";
@import "~bulma-prefers-dark/sass/utilities/derived-variables.sass";
//=================
// variable tweaks
@ -9,7 +22,10 @@
$modal-card-body-background-color-dark: $body-background-dark;
$card-background-color-dark: $background-dark;
//==============
// main imports
//==============
@import "~bulma/bulma";
@import "~bulma-prefers-dark/bulma-prefers-dark";