v-eris 1.0.294 → 1.0.295
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/release/assets/styles/functions.scss +10 -1
- package/release/assets/styles/themes.scss +1 -1
- package/release/cjs/components/AutoComplete/index.scss +7 -7
- package/release/cjs/components/Button/button.scss +10 -10
- package/release/cjs/components/Card/index.scss +4 -4
- package/release/cjs/components/Divider/index.scss +3 -3
- package/release/cjs/components/Editable/index.scss +8 -8
- package/release/cjs/components/Icons/index.scss +1 -1
- package/release/cjs/components/Input/index.scss +10 -10
- package/release/cjs/components/List/index.scss +7 -7
- package/release/cjs/components/Modal/modal.scss +3 -3
- package/release/cjs/components/MultiSelect/multiselect.scss +19 -19
- package/release/cjs/components/Select/index.scss +8 -8
- package/release/cjs/components/Toggle/toggle.scss +7 -7
- package/release/cjs/components/Tooltip/index.scss +6 -6
- package/release/cjs/components/Typography/index.scss +1 -1
package/package.json
CHANGED
|
@@ -1,8 +1,17 @@
|
|
|
1
|
-
@function
|
|
1
|
+
@function cmix( $a, $b, $percent: 0, $opacity: 100 ){
|
|
2
2
|
$opacity: ( ($opacity) );
|
|
3
3
|
$percent: ( ($percent) );
|
|
4
4
|
@return color-mix( in srgb, #{'rgb(from ' + $a + ' r g b / ' + $opacity + ')'}, #{'rgb(from ' + $b + ' r g b / ' + $opacity + ')'} $percent );
|
|
5
5
|
}
|
|
6
|
+
@function color2( $color, $opacity ){
|
|
7
|
+
$percent: ( ($opacity) + "%" );
|
|
8
|
+
@return color-mix( in srgb, $color $percent, transparent );
|
|
9
|
+
}
|
|
10
|
+
@function color3( $color, $opacity ){
|
|
11
|
+
$percent: ( ($opacity * 100) + "%" );
|
|
12
|
+
$percentInverse: ( (100 - ($opacity * 100)) + "%" );
|
|
13
|
+
@return color-mix( in srgb, $color $percent, transparent );
|
|
14
|
+
}
|
|
6
15
|
@function color( $color, $opacity ){
|
|
7
16
|
@return #{'rgb(from ' + $color + ' r g b / ' + $opacity + '%)'};
|
|
8
17
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@
|
|
1
|
+
@use "../../../assets/styles/functions.scss";
|
|
2
2
|
|
|
3
3
|
.autocomplete{
|
|
4
4
|
position: relative;
|
|
@@ -39,8 +39,8 @@
|
|
|
39
39
|
//border-top: 1px solid #f9f9f9;
|
|
40
40
|
z-index: 2;
|
|
41
41
|
display: none;
|
|
42
|
-
background-color:
|
|
43
|
-
color:
|
|
42
|
+
background-color: cmix( var( --element-bg ), var( --element-accent ), 0% );
|
|
43
|
+
color: cmix( var( --element-text ), var( --element-accent ), calc(50% * var(--element-text-multi-text)), 100% );
|
|
44
44
|
}
|
|
45
45
|
&-expanded > &-suggestions{
|
|
46
46
|
display: flex;
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
cursor: pointer;
|
|
58
58
|
}
|
|
59
59
|
&-item .icon{
|
|
60
|
-
color:
|
|
60
|
+
color: cmix( var( --element-text ), var( --element-accent ), calc(50% * var(--element-text-multi-text)), 100% );
|
|
61
61
|
margin-right: 8px;
|
|
62
62
|
}
|
|
63
63
|
|
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
background-color: inherit;
|
|
66
66
|
}
|
|
67
67
|
&-selected{
|
|
68
|
-
background-color:
|
|
68
|
+
background-color: cmix( var( --element-bg ), var( --element-accent ), calc(5% * var(--element-text-multi-sub)) );
|
|
69
69
|
}
|
|
70
70
|
&-selected.autocomplete-hovered{
|
|
71
71
|
//background-color: #f2f6ff;
|
|
@@ -82,12 +82,12 @@
|
|
|
82
82
|
padding: 3px 5px 2px;
|
|
83
83
|
border-radius: 4px;
|
|
84
84
|
//background-color: #3f376b;
|
|
85
|
-
background-color:
|
|
85
|
+
background-color: cmix( var( --element-bg ), var( --element-accent ), calc(14% * var(--element-text-multi-sub)) );
|
|
86
86
|
}
|
|
87
87
|
|
|
88
88
|
}
|
|
89
89
|
&-selected &-value-length{
|
|
90
|
-
background-color:
|
|
90
|
+
background-color: cmix( var( --element-bg ), var( --element-accent ), calc(25% * var(--element-text-multi-sub)) );
|
|
91
91
|
}
|
|
92
92
|
|
|
93
93
|
&-stretch{
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@
|
|
1
|
+
@use "../../../assets/styles/functions.scss";
|
|
2
2
|
|
|
3
3
|
@keyframes ButtonAnimation{
|
|
4
4
|
from {
|
|
@@ -42,9 +42,9 @@
|
|
|
42
42
|
border-radius: inherit;
|
|
43
43
|
position: relative;
|
|
44
44
|
border-radius: inherit;
|
|
45
|
-
color:
|
|
46
|
-
background-color:
|
|
47
|
-
border: 1px solid
|
|
45
|
+
color: cmix( var( --element-text ), var( --element-accent ), calc(50% * var(--element-text-multi-text)), 100% );
|
|
46
|
+
background-color: cmix( var( --element-bg ), var( --element-accent ), calc(90% * var(--element-text-multi-main)), 10% );
|
|
47
|
+
border: 1px solid cmix( var( --element-bg ), var( --element-accent ), calc(30% * var(--element-text-multi-sub)), 10% );
|
|
48
48
|
}
|
|
49
49
|
|
|
50
50
|
&:hover > .button-wrap{
|
|
@@ -57,20 +57,20 @@
|
|
|
57
57
|
}
|
|
58
58
|
|
|
59
59
|
&-disabled > .button-wrap{
|
|
60
|
-
background-color:
|
|
61
|
-
color:
|
|
60
|
+
background-color: cmix( var( --bg ), var( --element-bg ), calc(30% * var(--element-text-multi-main)), 100% );
|
|
61
|
+
color: cmix( var( --bg ), var( --element-text ), calc(50% * var(--element-text-multi-text)), 100% );
|
|
62
62
|
cursor: default;
|
|
63
63
|
}
|
|
64
64
|
&-disabled:hover > .button-wrap{
|
|
65
65
|
opacity: 1;
|
|
66
66
|
}
|
|
67
67
|
&-warning > .button-wrap{
|
|
68
|
-
background-color:
|
|
69
|
-
color:
|
|
68
|
+
background-color: cmix( var( --element-bg ), var( --element-warning ), calc(35% * var(--element-text-multi-main)), 100% );
|
|
69
|
+
color: cmix( var( --element-accent ), var( --element-warning ), calc(50% * var(--element-text-multi-text)), 100% );
|
|
70
70
|
}
|
|
71
71
|
&-danger > .button-wrap{
|
|
72
|
-
background-color:
|
|
73
|
-
color:
|
|
72
|
+
background-color: cmix( var( --element-bg ), var( --element-alert ), calc(35% * var(--element-text-multi-main)), 100% );
|
|
73
|
+
color: cmix( var( --element-accent ), var( --element-alert ), calc(50% * var(--element-text-multi-text)), 100% );
|
|
74
74
|
}
|
|
75
75
|
|
|
76
76
|
&-animation{
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@
|
|
1
|
+
@use "../../../assets/styles/functions.scss";
|
|
2
2
|
|
|
3
3
|
.card{
|
|
4
4
|
padding: 0px;
|
|
@@ -10,17 +10,17 @@
|
|
|
10
10
|
background: var( --gloss );
|
|
11
11
|
border: 0px;
|
|
12
12
|
margin: 8px 8px 0px 8px;
|
|
13
|
-
box-shadow: 0 0 10px
|
|
13
|
+
box-shadow: 0 0 10px cmix( var( --element-shadow ), var( --element-accent ), calc(0% * var(--element-text-multi-shadow)), 14% );
|
|
14
14
|
|
|
15
15
|
|
|
16
16
|
&-header{
|
|
17
17
|
padding: 14px 11px 0px 11px;
|
|
18
|
-
color:
|
|
18
|
+
color: cmix( var( --element-text-flat ), var( --element-accent ), calc(7.5% * var(--element-text-multi-text)), 100% );
|
|
19
19
|
background: transparent;
|
|
20
20
|
}
|
|
21
21
|
&-body{
|
|
22
22
|
padding: 6px 11px;
|
|
23
|
-
color:
|
|
23
|
+
color: cmix( var( --element-text-flat ), var( --element-accent ), calc(7.5% * var(--element-text-multi-text)), 70% );
|
|
24
24
|
}
|
|
25
25
|
|
|
26
26
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@
|
|
1
|
+
@use "../../../assets/styles/functions.scss";
|
|
2
2
|
|
|
3
3
|
.divider{
|
|
4
4
|
display: flex;
|
|
@@ -8,8 +8,8 @@
|
|
|
8
8
|
white-space: nowrap;
|
|
9
9
|
text-align: center;
|
|
10
10
|
border-top: 0;
|
|
11
|
-
border-top-color:
|
|
12
|
-
color:
|
|
11
|
+
border-top-color: cmix( var( --element-bg ), var( --element-accent ), calc(90% * var(--element-text-multi-main)), 13% );
|
|
12
|
+
color: cmix( var( --element-text ), var( --element-accent ), calc(50% * var(--element-text-multi-text)), 100% );
|
|
13
13
|
}
|
|
14
14
|
.divider > div{
|
|
15
15
|
padding: 0px 18px;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@
|
|
1
|
+
@use "../../../assets/styles/functions.scss";
|
|
2
2
|
|
|
3
3
|
.typography-editable{
|
|
4
4
|
position: relative;
|
|
@@ -7,8 +7,8 @@
|
|
|
7
7
|
width: 240px;
|
|
8
8
|
min-width: 240px;
|
|
9
9
|
border: none;
|
|
10
|
-
background-color:
|
|
11
|
-
color:
|
|
10
|
+
background-color: cmix( var( --element-bg ), var( --element-accent ), calc(90% * var(--element-text-multi-main)), 13% );
|
|
11
|
+
color: cmix( var( --element-text ), var( --element-accent ), calc(50% * var(--element-text-multi-text)), 100% );
|
|
12
12
|
border-radius: 4px;
|
|
13
13
|
min-height: 28px;
|
|
14
14
|
}
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
top: 7px;
|
|
26
26
|
position: absolute;
|
|
27
27
|
right: -21px;
|
|
28
|
-
color:
|
|
28
|
+
color: cmix( var( --element-bg ), var( --element-accent ), calc(90% * var(--element-text-multi-main)), 60% );
|
|
29
29
|
}
|
|
30
30
|
.typography-editable > textarea{
|
|
31
31
|
position: absolute;
|
|
@@ -47,13 +47,13 @@
|
|
|
47
47
|
margin: 0px 0px 0px 0px;
|
|
48
48
|
width: calc(100% + 0px);
|
|
49
49
|
background-color: transparent;
|
|
50
|
-
color:
|
|
50
|
+
color: cmix( var( --element-text ), var( --element-accent ), calc(50% * var(--element-text-multi-text)), 100% );
|
|
51
51
|
border: 0px solid transparent;
|
|
52
52
|
border-radius: 4px;
|
|
53
53
|
}
|
|
54
54
|
.typography-editable > textarea:focus{
|
|
55
55
|
border-color: transparent;
|
|
56
|
-
box-shadow: 0 0 0 1px
|
|
56
|
+
box-shadow: 0 0 0 1px cmix( var( --element-bg ), var( --element-accent ), calc(90% * var(--element-text-multi-sub)), 50% );
|
|
57
57
|
border-right-width: 0px !important;
|
|
58
58
|
outline: 0;
|
|
59
59
|
}
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
.typography-inactive{
|
|
62
62
|
border-color: transparent;
|
|
63
63
|
box-shadow: 0 0 0px 0px transparent;
|
|
64
|
-
background-color:
|
|
64
|
+
background-color: cmix( var( --element-bg ), var( --element-accent ), calc(90% * var(--element-text-multi-main)), 4% );
|
|
65
65
|
user-select: text;
|
|
66
66
|
|
|
67
67
|
& > .icon{
|
|
@@ -71,7 +71,7 @@
|
|
|
71
71
|
}
|
|
72
72
|
.typography-alert{
|
|
73
73
|
border-color: #ff3535;
|
|
74
|
-
box-shadow: 0 0 0px 2px
|
|
74
|
+
box-shadow: 0 0 0px 2px cmix( var( --element-bg ), var( --element-alert ), calc(20% * var(--element-text-multi-shadow)), 100% );
|
|
75
75
|
}
|
|
76
76
|
.typography-stretch{
|
|
77
77
|
width: 100%;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@
|
|
1
|
+
@use "../../../assets/styles/functions.scss";
|
|
2
2
|
|
|
3
3
|
.input{
|
|
4
4
|
box-sizing: border-box;
|
|
@@ -18,8 +18,8 @@
|
|
|
18
18
|
min-height: 28px;
|
|
19
19
|
padding: 0px;
|
|
20
20
|
transition: box-shadow 140ms;
|
|
21
|
-
background-color:
|
|
22
|
-
color:
|
|
21
|
+
background-color: cmix( var( --element-bg ), var( --element-accent ), calc(90% * var(--element-text-multi-main)), 13% );
|
|
22
|
+
color: cmix( var( --element-text ), var( --element-accent ), calc(50% * var(--element-text-multi-text)), 100% );
|
|
23
23
|
outline: none;
|
|
24
24
|
|
|
25
25
|
& > input{
|
|
@@ -30,10 +30,10 @@
|
|
|
30
30
|
flex-basis: 100%;
|
|
31
31
|
background: transparent;
|
|
32
32
|
padding: 0px;
|
|
33
|
-
color:
|
|
33
|
+
color: cmix( var( --element-text ), var( --element-accent ), calc(50% * var(--element-text-multi-text)), 100% );
|
|
34
34
|
}
|
|
35
35
|
& > input::placeholder{
|
|
36
|
-
color:
|
|
36
|
+
color: cmix( var( --element-text ), var( --element-text-flat ), calc(80% * var(--element-text-multi-text)), 50% );
|
|
37
37
|
}
|
|
38
38
|
&-focus{
|
|
39
39
|
//border-color: $accent;
|
|
@@ -55,11 +55,11 @@
|
|
|
55
55
|
flex-wrap: nowrap;
|
|
56
56
|
}
|
|
57
57
|
& .icon{
|
|
58
|
-
color:
|
|
58
|
+
color: cmix( var( --element-text ), var( --element-accent ), calc(50% * var(--element-text-multi-text)), 100% );
|
|
59
59
|
}
|
|
60
60
|
|
|
61
61
|
&-tool:hover, &-tool:hover{
|
|
62
|
-
background-color:
|
|
62
|
+
background-color: cmix( var( --element-bg ), var( --element-accent ), calc(5% * var(--element-text-multi-sub)) );
|
|
63
63
|
}
|
|
64
64
|
|
|
65
65
|
&-tool{
|
|
@@ -70,16 +70,16 @@
|
|
|
70
70
|
}
|
|
71
71
|
&-alert{
|
|
72
72
|
border-color: #ff3535;
|
|
73
|
-
box-shadow: 0 0 0px 2px
|
|
73
|
+
box-shadow: 0 0 0px 2px cmix( var( --element-bg ), var( --element-alert ), calc(20% * var(--element-text-multi-shadow)), 100% );
|
|
74
74
|
}
|
|
75
75
|
&-inactive{
|
|
76
76
|
border-color: transparent;
|
|
77
77
|
box-shadow: 0 0 0px 0px transparent;
|
|
78
|
-
background-color:
|
|
78
|
+
background-color: cmix( var( --element-bg ), var( --element-accent ), calc(90% * var(--element-text-multi-main)), 4% );
|
|
79
79
|
user-select: text;
|
|
80
80
|
}
|
|
81
81
|
&-alert > input{
|
|
82
|
-
color:
|
|
82
|
+
color: cmix( var( --element-alert-color ), var( --element-alert ), calc(30% * var(--element-text-multi-sub)), 100% );
|
|
83
83
|
}
|
|
84
84
|
&-conditions{
|
|
85
85
|
padding: 6px 0px;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@
|
|
1
|
+
@use "../../../assets/styles/functions.scss";
|
|
2
2
|
|
|
3
3
|
.list{
|
|
4
4
|
display: flex;
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
padding-left: 0px;
|
|
12
12
|
border-right: 0px;
|
|
13
13
|
padding-top: 8px;
|
|
14
|
-
color:
|
|
14
|
+
color: cmix( var( --element-text-flat ), var( --element-accent ), calc(7.5% * var(--element-text-multi-text)), 70% );
|
|
15
15
|
}
|
|
16
16
|
.list-item{
|
|
17
17
|
display: flex;
|
|
@@ -49,15 +49,15 @@
|
|
|
49
49
|
display: block;
|
|
50
50
|
}
|
|
51
51
|
&-title:hover{
|
|
52
|
-
color:
|
|
52
|
+
color: cmix( var( --element-text ), var( --element-accent ), calc(50% * var(--element-text-multi-text)), 100% ) !important;
|
|
53
53
|
}
|
|
54
54
|
&-chain > &-title{
|
|
55
|
-
color:
|
|
55
|
+
color: cmix( var( --element-text ), var( --element-accent ), calc(50% * var(--element-text-multi-text)), 100% ) !important;
|
|
56
56
|
}
|
|
57
57
|
&-selected > &-title{
|
|
58
|
-
color:
|
|
59
|
-
background-color:
|
|
60
|
-
border-right: 2px solid
|
|
58
|
+
color: cmix( var( --element-text ), var( --element-accent ), calc(50% * var(--element-text-multi-text)), 100% ) !important;
|
|
59
|
+
background-color: cmix( var( --element-bg ), var( --element-accent ), calc(90% * var(--element-text-multi-main)), 13% ) !important;
|
|
60
|
+
border-right: 2px solid cmix( var( --element-bg ), var( --element-accent ), calc(90% * var(--element-text-multi-sub)), 40% ) !important;
|
|
61
61
|
}
|
|
62
62
|
|
|
63
63
|
&-content > &-title{
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@
|
|
1
|
+
@use "../../../assets/styles/functions.scss";
|
|
2
2
|
|
|
3
3
|
.modal{
|
|
4
4
|
position: fixed;
|
|
@@ -12,8 +12,8 @@
|
|
|
12
12
|
z-index: 21;
|
|
13
13
|
top: 0px;
|
|
14
14
|
left: 0px;
|
|
15
|
-
//background-color:
|
|
16
|
-
color:
|
|
15
|
+
//background-color: cmix( var( --element-bg ), var( --element-accent ), 5% );
|
|
16
|
+
color: cmix( var( --element-text-flat ), var( --element-accent ), calc(7.5% * var(--element-text-multi-text)), 100% );
|
|
17
17
|
background: var(--gloss);
|
|
18
18
|
background-color: var(--bg);
|
|
19
19
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@
|
|
1
|
+
@use "../../../assets/styles/functions.scss";
|
|
2
2
|
|
|
3
3
|
.multiselect{
|
|
4
4
|
min-width: 240px;
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
flex-direction: row;
|
|
13
13
|
flex-wrap: nowrap;
|
|
14
14
|
border: none;
|
|
15
|
-
background-color:
|
|
15
|
+
background-color: cmix( var( --element-bg ), var( --element-accent ), calc(90% * var(--element-text-multi-main)), 13% );
|
|
16
16
|
border-radius: 4px;
|
|
17
17
|
transition: none;
|
|
18
18
|
user-select: none;
|
|
@@ -28,8 +28,8 @@
|
|
|
28
28
|
flex-direction: row;
|
|
29
29
|
flex-wrap: nowrap;
|
|
30
30
|
align-items: center;
|
|
31
|
-
background-color:
|
|
32
|
-
color:
|
|
31
|
+
background-color: cmix( var( --element-bg ), var( --element-accent ), calc(90% * var(--element-text-multi-main)), 10% );
|
|
32
|
+
color: cmix( var( --element-text ), var( --element-accent ), calc(50% * var(--element-text-multi-text)), 100% );
|
|
33
33
|
border-radius: 3px;
|
|
34
34
|
padding: 2px 4px 2px 6px;
|
|
35
35
|
margin: 4px 0px 4px 4px;
|
|
@@ -46,8 +46,8 @@
|
|
|
46
46
|
right: 0px;
|
|
47
47
|
bottom: 0px;
|
|
48
48
|
top: 50%;
|
|
49
|
-
border: 1px solid
|
|
50
|
-
box-shadow: inset 0px -4px 6px
|
|
49
|
+
border: 1px solid cmix( var( --element-bg ), var( --element-default-border ), calc(100% * var(--element-text-multi-main)), 100% );
|
|
50
|
+
box-shadow: inset 0px -4px 6px cmix( var( --element-bg ), var( --element-default-shadow ), calc(90% * var(--element-text-multi-main)), 20% );
|
|
51
51
|
border-top: none;
|
|
52
52
|
border-radius: inherit;
|
|
53
53
|
border-top-left-radius: 0px;
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
}
|
|
57
57
|
|
|
58
58
|
&-dragged{
|
|
59
|
-
outline: 1px dotted
|
|
59
|
+
outline: 1px dotted cmix( var( --element-bg ), var( --element-drag-border ), calc(90% * var(--element-text-multi-main)), 100% );
|
|
60
60
|
}
|
|
61
61
|
&-dragged > *{
|
|
62
62
|
opacity: 0.5;
|
|
@@ -83,7 +83,7 @@
|
|
|
83
83
|
padding: 0px 4px 2px 4px;
|
|
84
84
|
|
|
85
85
|
&:hover{
|
|
86
|
-
background-color:
|
|
86
|
+
background-color: cmix( var( --element-bg ), var( --element-accent ), calc(90% * var(--element-text-multi-main)), 15% );
|
|
87
87
|
}
|
|
88
88
|
|
|
89
89
|
}
|
|
@@ -99,11 +99,11 @@
|
|
|
99
99
|
flex: 1;
|
|
100
100
|
width: 60px;
|
|
101
101
|
min-width: 60px;
|
|
102
|
-
color:
|
|
102
|
+
color: cmix( var( --element-text ), var( --element-accent ), calc(50% * var(--element-text-multi-text)), 100% );
|
|
103
103
|
min-height: 32px;
|
|
104
104
|
}
|
|
105
105
|
&-input::placeholder{
|
|
106
|
-
color:
|
|
106
|
+
color: cmix( var( --element-text ), var( --element-text-flat ), calc(80% * var(--element-text-multi-text)), 50% );
|
|
107
107
|
}
|
|
108
108
|
|
|
109
109
|
&-active{
|
|
@@ -128,8 +128,8 @@
|
|
|
128
128
|
border-color: transparent;
|
|
129
129
|
z-index: 2;
|
|
130
130
|
display: none;
|
|
131
|
-
background-color:
|
|
132
|
-
color:
|
|
131
|
+
background-color: cmix( var( --element-bg ), var( --element-accent ), 0% );
|
|
132
|
+
color: cmix( var( --element-text ), var( --element-accent ), calc(50% * var(--element-text-multi-text)), 100% );
|
|
133
133
|
|
|
134
134
|
&-expanded{
|
|
135
135
|
display: flex;
|
|
@@ -173,7 +173,7 @@
|
|
|
173
173
|
-webkit-font-smoothing: antialiased;
|
|
174
174
|
-moz-osx-font-smoothing: grayscale;
|
|
175
175
|
font-size: 16px;
|
|
176
|
-
border-color:
|
|
176
|
+
border-color: cmix( var( --element-bg ), var( --element-accent ), calc(24% * var(--element-text-multi-main)), 80% );
|
|
177
177
|
margin-right: 8px;
|
|
178
178
|
flex-shrink: 0;
|
|
179
179
|
}
|
|
@@ -230,14 +230,14 @@
|
|
|
230
230
|
|
|
231
231
|
}
|
|
232
232
|
&-item-selected > &-item-checkbox, &-item-isDefault > &-item-default{
|
|
233
|
-
background-color:
|
|
234
|
-
color:
|
|
233
|
+
background-color: cmix( var( --element-bg ), var( --element-accent ), calc(90% * var(--element-text-multi-main)), 15% );
|
|
234
|
+
color: cmix( var( --element-text ), var( --element-accent ), calc(60% * var(--element-text-multi-main)), 100% );
|
|
235
235
|
}
|
|
236
236
|
&-item:hover{
|
|
237
237
|
//background-color: #f4f4f4;
|
|
238
238
|
}
|
|
239
239
|
&-item-focused{
|
|
240
|
-
background-color:
|
|
240
|
+
background-color: cmix( var( --element-bg ), var( --element-accent ), calc(5% * var(--element-text-multi-sub)) );
|
|
241
241
|
}
|
|
242
242
|
&-item-prefix{
|
|
243
243
|
flex-grow: 0 !important;
|
|
@@ -269,14 +269,14 @@
|
|
|
269
269
|
max-height: none;
|
|
270
270
|
border-radius: 4px;
|
|
271
271
|
box-shadow: none;
|
|
272
|
-
background-color:
|
|
273
|
-
color:
|
|
272
|
+
background-color: cmix( var( --element-bg ), var( --element-accent ), calc(90% * var(--element-text-multi-main)), 13% );
|
|
273
|
+
color: cmix( var( --element-text ), var( --element-accent ), calc(50% * var(--element-text-multi-text)), 100% );
|
|
274
274
|
}
|
|
275
275
|
.multiselect-headerless .multiselect-suggestions-item-focused{
|
|
276
276
|
background-color: transparent;
|
|
277
277
|
}
|
|
278
278
|
.multiselect-headerless .multiselect-suggestions-item-selected{
|
|
279
|
-
//background-color:
|
|
279
|
+
//background-color: cmix( var( --element-bg ), var( --element-accent ), calc(90% * var(--element-text-multi-main)), 6% );
|
|
280
280
|
}
|
|
281
281
|
.multiselect-stretch{
|
|
282
282
|
width: 100%;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@
|
|
1
|
+
@use "../../../assets/styles/functions.scss";
|
|
2
2
|
|
|
3
3
|
.select{
|
|
4
4
|
|
|
@@ -18,8 +18,8 @@
|
|
|
18
18
|
transition: all 240ms;
|
|
19
19
|
overflow: hidden;
|
|
20
20
|
border: none;
|
|
21
|
-
background-color:
|
|
22
|
-
color:
|
|
21
|
+
background-color: cmix( var( --element-bg ), var( --element-accent ), calc(90% * var(--element-text-multi-main)), 13% );
|
|
22
|
+
color: cmix( var( --element-text ), var( --element-accent ), calc(50% * var(--element-text-multi-text)), 100% );
|
|
23
23
|
outline: none;
|
|
24
24
|
}
|
|
25
25
|
|
|
@@ -69,7 +69,7 @@
|
|
|
69
69
|
.select-inactive{
|
|
70
70
|
border-color: transparent;
|
|
71
71
|
box-shadow: 0 0 0px 0px transparent;
|
|
72
|
-
background-color:
|
|
72
|
+
background-color: cmix( var( --element-bg ), var( --element-accent ), calc(90% * var(--element-text-multi-main)), 4% );
|
|
73
73
|
user-select: text;
|
|
74
74
|
|
|
75
75
|
& > .icon{
|
|
@@ -107,14 +107,14 @@
|
|
|
107
107
|
display: flex !important;
|
|
108
108
|
border-radius: 4px;
|
|
109
109
|
box-shadow: none;
|
|
110
|
-
background-color:
|
|
111
|
-
color:
|
|
110
|
+
background-color: cmix( var( --element-bg ), var( --element-accent ), calc(90% * var(--element-text-multi-main)), 13% );
|
|
111
|
+
color: cmix( var( --element-text ), var( --element-accent ), calc(50% * var(--element-text-multi-text)), 100% );
|
|
112
112
|
}
|
|
113
113
|
.autocomplete-headerless .autocomplete-hovered{
|
|
114
114
|
background-color: transparent;
|
|
115
115
|
}
|
|
116
116
|
.autocomplete-headerless .autocomplete-selected{
|
|
117
|
-
background-color:
|
|
117
|
+
background-color: cmix( var( --element-bg ), var( --element-accent ), calc(90% * var(--element-text-multi-main)), 10% );
|
|
118
118
|
}
|
|
119
119
|
.autocomplete-headerless .input{
|
|
120
120
|
display: none;
|
|
@@ -137,7 +137,7 @@
|
|
|
137
137
|
}
|
|
138
138
|
|
|
139
139
|
.autocomplete-row *::-webkit-scrollbar-thumb{
|
|
140
|
-
background-color:
|
|
140
|
+
background-color: cmix( var( --element-bg ), var( --element-accent ), calc(90% * var(--element-text-multi-main)), 10% );
|
|
141
141
|
border-radius: inherit;
|
|
142
142
|
}
|
|
143
143
|
.autocomplete-row > .autocomplete-scrollLeft, .autocomplete-row > .autocomplete-scrollRight{
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
@
|
|
1
|
+
@use "../../../assets/styles/functions.scss";
|
|
2
2
|
|
|
3
3
|
.toggle{
|
|
4
4
|
position: relative;
|
|
5
5
|
width: 40px;
|
|
6
6
|
height: 21px;
|
|
7
7
|
box-sizing: border-box;
|
|
8
|
-
background:
|
|
8
|
+
background: cmix( var( --element-bg ), var( --element-accent ), calc(90% * var(--element-text-multi-main)), 14% );
|
|
9
9
|
border-radius: 4px;
|
|
10
10
|
padding: 4px;
|
|
11
11
|
flex-shrink: 0;
|
|
@@ -15,12 +15,12 @@
|
|
|
15
15
|
|
|
16
16
|
&-active{
|
|
17
17
|
position: relative;
|
|
18
|
-
background:
|
|
18
|
+
background: cmix( var( --element-bg ), var( --element-accent ), calc(90% * var(--element-text-multi-main)), 20% );
|
|
19
19
|
}
|
|
20
20
|
|
|
21
21
|
& > div{
|
|
22
22
|
position: relative;
|
|
23
|
-
background-color:
|
|
23
|
+
background-color: cmix( var( --element-bg ), var( --element-accent ), calc(90% * var(--element-text-multi-main)), 14% );
|
|
24
24
|
width: 50%;
|
|
25
25
|
height: 100%;
|
|
26
26
|
border-radius: 3px;
|
|
@@ -30,18 +30,18 @@
|
|
|
30
30
|
&-active > div{
|
|
31
31
|
position: relative;
|
|
32
32
|
left: 50%;
|
|
33
|
-
background:
|
|
33
|
+
background: cmix( var( --element-bg ), var( --element-accent ), calc(90% * var(--element-text-multi-main)), 80% );
|
|
34
34
|
}
|
|
35
35
|
|
|
36
36
|
|
|
37
37
|
&-inactive{
|
|
38
38
|
border-color: transparent;
|
|
39
39
|
box-shadow: 0 0 0px 0px transparent;
|
|
40
|
-
background-color:
|
|
40
|
+
background-color: cmix( var( --element-bg ), var( --element-accent ), calc(90% * var(--element-text-multi-main)), 14% );
|
|
41
41
|
user-select: text;
|
|
42
42
|
|
|
43
43
|
& > div{
|
|
44
|
-
background:
|
|
44
|
+
background: cmix( var( --element-bg ), var( --element-accent ), calc(90% * var(--element-text-multi-main)), 40% );
|
|
45
45
|
}
|
|
46
46
|
|
|
47
47
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@
|
|
1
|
+
@use "../../../assets/styles/functions.scss";
|
|
2
2
|
|
|
3
3
|
.tooltip{
|
|
4
4
|
position: fixed;
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
transition: all .2s 0.05s ease-in-out, left 0s, top 0s, height 0s;
|
|
9
9
|
transform: scale(0.7);
|
|
10
10
|
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.22);
|
|
11
|
-
background-color:
|
|
11
|
+
background-color: cmix( var( --element-bg ), var( --element-accent ), 0% );
|
|
12
12
|
padding: 6px 8px;
|
|
13
13
|
border-radius: 8px;
|
|
14
14
|
z-index: 99;
|
|
@@ -31,19 +31,19 @@
|
|
|
31
31
|
}
|
|
32
32
|
|
|
33
33
|
& > div > .typography{
|
|
34
|
-
color:
|
|
34
|
+
color: cmix( var( --element-text-flat ), var( --element-accent ), calc(60% * var(--element-text-multi-text)), 80% );
|
|
35
35
|
}
|
|
36
36
|
& .input-condition-success{
|
|
37
|
-
color:
|
|
37
|
+
color: cmix( var( --element-text-flat ), var( --element-success ), calc(100% * var(--element-text-multi-text)), 80% );
|
|
38
38
|
}
|
|
39
39
|
|
|
40
40
|
& .tooltip-arrow{
|
|
41
|
-
border-top-color:
|
|
41
|
+
border-top-color: cmix( var( --element-bg ), var( --element-accent ), 0% );
|
|
42
42
|
}
|
|
43
43
|
&.tooltip-reverseY .tooltip-arrow{
|
|
44
44
|
border-top: 0px solid transparent;
|
|
45
45
|
top: -7px;
|
|
46
|
-
border-bottom-color:
|
|
46
|
+
border-bottom-color: cmix( var( --element-bg ), var( --element-accent ), 0% );
|
|
47
47
|
}
|
|
48
48
|
&.tooltip-hidden{
|
|
49
49
|
padding: 0px;
|