vassili/seitime-frappe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

fix: Indicator dot colors in dark mode

Browse source
This commit is contained in:
Suraj Shetty 2023-01-20 14:16:04 +05:30
parent 2971fcf657
commit dcbc9e54ca
3 changed files with 42 additions and 121 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
frappe/public/scss/common/css_variables.scss
View file

@ -165,8 +165,10 @@ $input-height: 28px !default;
--bg-orange: var(--orange-50);
--bg-red: var(--red-50);
--bg-gray: var(--gray-200);
--bg-grey: var(--gray-200);
--bg-light-gray: var(--gray-100);
--bg-dark-gray: var(--gray-900);
--bg-dark-gray: var(--gray-400);
--bg-darkgrey: var(--gray-400);
--bg-purple: var(--purple-100);
--bg-pink: var(--pink-50);
--bg-cyan: var(--cyan-50);
@ -189,6 +191,9 @@ $input-height: 28px !default;
--text-on-orange: var(--orange-600);
--text-on-red: var(--red-600);
--text-on-gray: var(--gray-600);
--text-on-grey: var(--gray-600);
--text-on-darkgrey: var(--gray-700);
--text-on-dark-gray: var(--gray-700);
--text-on-light-gray: var(--gray-800);
--text-on-purple: var(--purple-700);
--text-on-pink: var(--pink-600);

141
frappe/public/scss/common/indicator.scss
View file

@ -1,19 +1,3 @@
@mixin indicator-pill-color($color) {
background: var(--bg-#{$color});
color: var(--text-on-#{$color});
&::before,
&::after {
background: var(--text-on-#{$color});
}
}
@mixin indicator-color($color) {
&::before,
&::after {
background: var(--text-on-#{$color});
}
}
.indicator,
.indicator-pill,
.indicator-pill-right,
@ -67,111 +51,30 @@
margin: 0 0 0 4px;
}
.indicator.green {
@include indicator-color('green');
$indicator-colors: green, cyan, blue, orange, yellow, gray, grey, red, pink, darkgrey, purple, light-blue;
@each $color in $indicator-colors {
.indicator.#{"" + $color} {
&::before,
&::after {
background: var(--indicator-dot-#{$color});
}
}
.indicator-pill.#{"" + $color},
.indicator-pill-right.#{"" + $color},
.indicator-pill-round.#{"" + $color} {
background: var(--bg-#{$color});
color: var(--text-on-#{$color});
&::before,
&::after {
background: var(--text-on-#{$color});
}
}
.indicator {
--indicator-dot-#{"" + $color}: var(--text-on-#{$color});
}
}
.indicator-pill.green,
.indicator-pill-right.green,
.indicator-pill-round.green {
@include indicator-pill-color('green');
}
.indicator.cyan {
@include indicator-color('cyan');
}
.indicator-pill.cyan,
.indicator-pill-right.cyan,
.indicator-pill-round.cyan {
@include indicator-pill-color('cyan');
}
.indicator.blue {
@include indicator-color('blue');
}
.indicator-pill.blue,
.indicator-pill-right.blue,
.indicator-pill-round.blue {
@include indicator-pill-color('blue');
}
.indicator.orange {
@include indicator-color('orange');
}
.indicator-pill.orange,
.indicator-pill-right.orange
.indicator-pill-round.orange {
@include indicator-pill-color('orange');
}
.indicator.yellow {
@include indicator-color('yellow');
}
.indicator-pill.yellow,
.indicator-pill-right.yellow
.indicator-pill-round.yellow {
@include indicator-pill-color('yellow');
}
.indicator.gray,
.indicator.grey {
@include indicator-color('gray');
}
.indicator-pill.gray,
.indicator-pill-right.gray,
.indicator-pill-round.gray,
.indicator-pill.grey,
.indicator-pill-right.grey,
.indicator-pill-round.grey {
@include indicator-pill-color('light-gray');
}
.indicator.red {
@include indicator-color('red');
}
.indicator-pill.red,
.indicator-pill-right.red,
.indicator-pill-round.red {
@include indicator-pill-color('red');
}
.indicator.pink {
@include indicator-color('pink');
}
.indicator-pill.pink,
.indicator-pill-right.pink,
.indicator-pill-round.pink {
@include indicator-pill-color('pink');
}
.indicator-pill.darkgrey,
.indicator-pill-right.darkgrey,
.indicator-pill-round.darkgrey {
@include indicator-pill-color('gray');
}
.indicator-pill.purple,
.indicator-pill-right.purple,
.indicator-pill-round.purple {
@include indicator-pill-color('purple');
}
.indicator.light-blue {
@include indicator-color('light-blue');
}
.indicator-pill.light-blue,
.indicator-pill-right.light-blue,
.indicator-pill-round.light-blue {
@include indicator-pill-color('light-blue');
}
.indicator.blink {
animation: blink 1s linear infinite;

15
frappe/public/scss/desk/dark.scss
View file

@ -54,6 +54,9 @@
--bg-orange: var(--orange-500);
--bg-red: var(--red-500);
--bg-gray: var(--gray-600);
--bg-grey: var(--gray-600);
--bg-darkgrey: var(--gray-800);
--bg-dark-gray: var(--gray-800);
--bg-light-gray: var(--gray-700);
--bg-dark-gray: var(--gray-300);
--bg-purple: var(--purple-600);
@ -65,7 +68,10 @@
--text-on-yellow: var(--yellow-50);
--text-on-orange: var(--orange-100);
--text-on-red: var(--red-50);
--text-on-gray: var(--gray-300);
--text-on-gray: var(--gray-200);
--text-on-grey: var(--gray-200);
--text-on-darkgrey: var(--gray-200);
--text-on-dark-gray: var(--gray-200);
--text-on-light-gray: var(--gray-100);
--text-on-purple: var(--purple-100);
@ -190,4 +196,11 @@
color: var(--text-color);
background: var(--gray-500);
}
$indicator-colors: green, cyan, blue, orange, yellow, gray, grey, red, pink, darkgrey, purple, light-blue;
@each $color in $indicator-colors {
.indicator {
--indicator-dot-#{"" + $color}: var(--bg-#{$color});
}
}
}