@syncfusion/ej2-base 26.1.35-806029 → 26.1.35-8139

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.
Files changed (169) hide show
  1. package/.eslintrc.json +261 -0
  2. package/{ReadMe.md → README.md} +100 -100
  3. package/bin/syncfusion-license.js +1 -104
  4. package/dist/ej2-base.min.js +10 -1
  5. package/dist/ej2-base.umd.min.js +10 -1
  6. package/dist/ej2-base.umd.min.js.map +1 -1
  7. package/dist/es6/ej2-base.es2015.js +67 -74
  8. package/dist/es6/ej2-base.es2015.js.map +1 -1
  9. package/dist/es6/ej2-base.es5.js +117 -124
  10. package/dist/es6/ej2-base.es5.js.map +1 -1
  11. package/dist/global/ej2-base.min.js +10 -1
  12. package/dist/global/ej2-base.min.js.map +1 -1
  13. package/dist/global/index.d.ts +9 -0
  14. package/e2e/crypto.js +16 -16
  15. package/e2e/index.d.ts +27 -27
  16. package/e2e/m.protractor.config.js +286 -286
  17. package/e2e/modified-protractor/protractor.config.js +316 -316
  18. package/e2e/protractor.config.js +389 -389
  19. package/helpers/e2e/index.js +3 -3
  20. package/license +10 -10
  21. package/package.json +225 -225
  22. package/src/animation-model.d.ts +41 -41
  23. package/src/animation.js +19 -19
  24. package/src/browser.js +0 -4
  25. package/src/component-model.d.ts +16 -16
  26. package/src/component.js +19 -19
  27. package/src/draggable-model.d.ts +113 -113
  28. package/src/draggable.js +72 -35
  29. package/src/droppable-model.d.ts +23 -23
  30. package/src/droppable.js +19 -19
  31. package/src/intl/number-formatter.js +1 -8
  32. package/src/keyboard-model.d.ts +16 -16
  33. package/src/keyboard.js +19 -19
  34. package/src/touch-model.d.ts +39 -39
  35. package/src/touch.js +19 -19
  36. package/src/validate-lic.js +1 -1
  37. package/styles/_all.scss +2 -2
  38. package/styles/_bds-dark-definition.scss +15 -16
  39. package/styles/_bds-definition.scss +15 -16
  40. package/styles/_bootstrap-dark-definition.scss +42 -42
  41. package/styles/_bootstrap-definition.scss +42 -42
  42. package/styles/_bootstrap4-definition.scss +11 -11
  43. package/styles/_bootstrap5-dark-definition.scss +9 -9
  44. package/styles/_bootstrap5-definition.scss +8 -8
  45. package/styles/_bootstrap5.3-dark-definition.scss +8 -8
  46. package/styles/_bootstrap5.3-definition.scss +8 -8
  47. package/styles/_fabric-dark-definition.scss +42 -42
  48. package/styles/_fabric-definition.scss +42 -42
  49. package/styles/_fluent-dark-definition.scss +9 -9
  50. package/styles/_fluent-definition.scss +9 -9
  51. package/styles/_fluent2-dark-definition.scss +9 -9
  52. package/styles/_fluent2-definition.scss +9 -9
  53. package/styles/_fluent2-highcontrast-definition.scss +9 -9
  54. package/styles/_fusionnew-dark-definition.scss +8 -8
  55. package/styles/_fusionnew-definition.scss +8 -8
  56. package/styles/_highcontrast-definition.scss +42 -42
  57. package/styles/_highcontrast-light-definition.scss +42 -42
  58. package/styles/_material-dark-definition.scss +48 -49
  59. package/styles/_material-definition.scss +49 -50
  60. package/styles/_material3-dark-definition.scss +14 -15
  61. package/styles/_material3-definition.scss +15 -16
  62. package/styles/_tailwind-dark-definition.scss +15 -16
  63. package/styles/_tailwind-definition.scss +15 -16
  64. package/styles/animation/_all.scss +559 -535
  65. package/styles/bootstrap-dark.css +51 -235
  66. package/styles/bootstrap.css +51 -235
  67. package/styles/bootstrap4.css +51 -223
  68. package/styles/bootstrap5-dark.css +53 -228
  69. package/styles/bootstrap5.css +51 -226
  70. package/styles/common/_all.scss +2 -2
  71. package/styles/common/_core.scss +113 -111
  72. package/styles/common/_mixin.scss +9 -11
  73. package/styles/definition/_bds-dark.scss +1067 -1193
  74. package/styles/definition/_bds.scss +1327 -1488
  75. package/styles/definition/_bootstrap-dark.scss +207 -213
  76. package/styles/definition/_bootstrap.scss +202 -208
  77. package/styles/definition/_bootstrap4.scss +153 -159
  78. package/styles/definition/_bootstrap5-dark.scss +475 -481
  79. package/styles/definition/_bootstrap5.3-dark.scss +853 -1232
  80. package/styles/definition/_bootstrap5.3.scss +1486 -1579
  81. package/styles/definition/_bootstrap5.scss +475 -481
  82. package/styles/definition/_fabric-dark.scss +188 -194
  83. package/styles/definition/_fabric.scss +186 -192
  84. package/styles/definition/_fluent-dark.scss +488 -494
  85. package/styles/definition/_fluent.scss +488 -494
  86. package/styles/definition/_fluent2-dark.scss +1506 -1523
  87. package/styles/definition/_fluent2-highcontrast.scss +1506 -1523
  88. package/styles/definition/_fluent2.scss +2266 -2295
  89. package/styles/definition/_fusionnew-dark.scss +324 -330
  90. package/styles/definition/_fusionnew.scss +324 -331
  91. package/styles/definition/_highcontrast-light.scss +183 -189
  92. package/styles/definition/_highcontrast.scss +183 -189
  93. package/styles/definition/_material-dark.scss +187 -193
  94. package/styles/definition/_material.scss +180 -186
  95. package/styles/definition/_material3-dark.scss +654 -660
  96. package/styles/definition/_material3.scss +723 -729
  97. package/styles/definition/_tailwind-dark.scss +439 -445
  98. package/styles/definition/_tailwind.scss +437 -443
  99. package/styles/fabric-dark.css +51 -235
  100. package/styles/fabric.css +51 -235
  101. package/styles/fluent-dark.css +51 -226
  102. package/styles/fluent.css +51 -226
  103. package/styles/fluent2.css +82 -274
  104. package/styles/highcontrast-light.css +51 -235
  105. package/styles/highcontrast.css +51 -235
  106. package/styles/material-dark.css +51 -235
  107. package/styles/material.css +51 -235
  108. package/styles/material3-dark.css +51 -226
  109. package/styles/material3.css +51 -226
  110. package/styles/offline-theme/material-dark.css +51 -235
  111. package/styles/offline-theme/material.css +51 -235
  112. package/styles/offline-theme/tailwind-dark.css +51 -226
  113. package/styles/offline-theme/tailwind.css +51 -226
  114. package/styles/tailwind-dark.css +51 -226
  115. package/styles/tailwind.css +51 -226
  116. package/tslint.json +111 -0
  117. package/dist/ts/undefined +0 -67
  118. package/styles/_tailwind3-dark-definition.scss +0 -15
  119. package/styles/_tailwind3-definition.scss +0 -15
  120. package/styles/bds-lite.css +0 -3408
  121. package/styles/bds-lite.scss +0 -3
  122. package/styles/bds.css +0 -3408
  123. package/styles/bds.scss +0 -3
  124. package/styles/bootstrap-dark-lite.css +0 -3749
  125. package/styles/bootstrap-dark-lite.scss +0 -3
  126. package/styles/bootstrap-lite.css +0 -3749
  127. package/styles/bootstrap-lite.scss +0 -3
  128. package/styles/bootstrap4-lite.css +0 -3390
  129. package/styles/bootstrap4-lite.scss +0 -3
  130. package/styles/bootstrap5-dark-lite.css +0 -2966
  131. package/styles/bootstrap5-dark-lite.scss +0 -3
  132. package/styles/bootstrap5-lite.css +0 -2966
  133. package/styles/bootstrap5-lite.scss +0 -3
  134. package/styles/bootstrap5.3-lite.css +0 -3559
  135. package/styles/bootstrap5.3-lite.scss +0 -3
  136. package/styles/bootstrap5.3.css +0 -3559
  137. package/styles/bootstrap5.3.scss +0 -3
  138. package/styles/definition/_tailwind3-dark.scss +0 -1622
  139. package/styles/definition/_tailwind3.scss +0 -2093
  140. package/styles/fabric-dark-lite.css +0 -3734
  141. package/styles/fabric-dark-lite.scss +0 -3
  142. package/styles/fabric-lite.css +0 -3734
  143. package/styles/fabric-lite.scss +0 -3
  144. package/styles/fluent-dark-lite.css +0 -2966
  145. package/styles/fluent-dark-lite.scss +0 -3
  146. package/styles/fluent-lite.css +0 -2966
  147. package/styles/fluent-lite.scss +0 -3
  148. package/styles/fluent2-lite.css +0 -4017
  149. package/styles/fluent2-lite.scss +0 -3
  150. package/styles/highcontrast-light-lite.css +0 -3725
  151. package/styles/highcontrast-light-lite.scss +0 -3
  152. package/styles/highcontrast-lite.css +0 -3725
  153. package/styles/highcontrast-lite.scss +0 -3
  154. package/styles/material-dark-lite.css +0 -3702
  155. package/styles/material-dark-lite.scss +0 -3
  156. package/styles/material-lite.css +0 -3702
  157. package/styles/material-lite.scss +0 -3
  158. package/styles/material3-dark-lite.css +0 -3021
  159. package/styles/material3-dark-lite.scss +0 -3
  160. package/styles/material3-lite.css +0 -3077
  161. package/styles/material3-lite.scss +0 -3
  162. package/styles/tailwind-dark-lite.css +0 -2967
  163. package/styles/tailwind-dark-lite.scss +0 -3
  164. package/styles/tailwind-lite.css +0 -2967
  165. package/styles/tailwind-lite.scss +0 -3
  166. package/styles/tailwind3-lite.css +0 -3775
  167. package/styles/tailwind3-lite.scss +0 -3
  168. package/styles/tailwind3.css +0 -3775
  169. package/styles/tailwind3.scss +0 -3
package/styles/definition/_bootstrap5.3-dark.scss CHANGED
@@ -1,1232 +1,853 @@
1
- @use 'sass:color';
2
- @use 'sass:meta';
3
- @use 'sass:list';
4
- @import '../common/mixin.scss';
5
-
6
- @function mapcolorvariable($pallete-name){
7
- @return var(#{'--color-sf-'+ $pallete-name});
8
- }
9
-
10
- @function shade-color($color, $percentage) {
11
- @return mix($black, $color, $percentage);
12
- }
13
-
14
- @function tint-color($color, $percentage) {
15
- @return mix($white, $color, $percentage);
16
- }
17
-
18
- :root{
19
- --color-sf-content-bg-color: #212529;
20
- --color-sf-content-bg-color-alt1: #2b3035;
21
- --color-sf-content-bg-color-alt2: #343a40;
22
- --color-sf-content-bg-color-alt3: #495057;
23
- --color-sf-content-bg-color-alt4: #1a1d20;
24
- --color-sf-content-bg-color-alt5: #adb5bd;
25
- --color-sf-content-bg-color-hover: #2b3035;
26
- --color-sf-content-bg-color-pressed: var(--color-sf-content-bg-color-alt2);
27
- --color-sf-content-bg-color-focus: var(--color-sf-content-bg-color-hover);
28
- --color-sf-content-bg-color-selected: #0d6efd;
29
- --color-sf-content-bg-color-dragged: #343a40;
30
- --color-sf-content-bg-color-disabled: var(--color-sf-content-bg-color-alt2);
31
- --color-sf-flyout-bg-color: #212529;
32
- --color-sf-flyout-bg-color-hover: #2b3035;
33
- --color-sf-flyout-bg-color-pressed: #0d6efd;
34
- --color-sf-flyout-bg-color-focus: #2b3035;
35
- --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
36
- --color-sf-table-bg-color-hover: rgba(255, 255, 255, .07);
37
- --color-sf-table-bg-color-pressed: var(--color-sf-content-bg-color-alt3);
38
- --color-sf-table-bg-color-selected: rgba(255, 255, 255, .1);
39
-
40
- // text-color
41
- --color-sf-content-text-color: #dee2e6;
42
- --color-sf-content-text-color-alt1: rgba(222, 226, 230, .75);
43
- --color-sf-content-text-color-alt2: rgba(222, 226, 230, .5);
44
- --color-sf-content-text-color-alt3: rgba(222, 226, 230, .25);
45
- --color-sf-content-text-color-hover: #fff;
46
- --color-sf-content-text-color-pressed: var(--color-sf-content-text-color);
47
- --color-sf-content-text-color-focus: #fff;
48
- --color-sf-content-text-color-selected: var(--color-sf-primary-text-color);
49
- --color-sf-content-text-color-dragged: #fff;
50
- --color-sf-content-text-color-disabled: rgba(222, 226, 230, .75);
51
- --color-sf-placeholder-text-color: #6c757d;
52
- --color-sf-flyout-text-color: var(--color-sf-content-text-color);
53
- --color-sf-flyout-text-color-hover: var(--color-sf-content-text-color);
54
- --color-sf-flyout-text-color-pressed: var(--color-sf-primary-text-color);
55
- --color-sf-flyout-text-color-focus: var(--color-sf-content-text-color);
56
- --color-sf-flyout-text-color-disabled: rgba(222, 226, 230, .5);
57
- --color-sf-table-text-color-hover: var(--color-sf-content-text-color);
58
- --color-sf-table-text-color-pressed: var(--color-sf-content-text-color);
59
- --color-sf-table-text-color-selected: var(--color-sf-content-text-color);
60
-
61
- // icon-color
62
- --color-sf-icon-color: #adb5bd;
63
- --color-sf-icon-color-hover: #dee2e6;
64
- --color-sf-icon-color-pressed: #f8f9fa;
65
- --color-sf-icon-color-disabled: #adb5bd;
66
-
67
- // close-icon-color
68
- --color-sf-close-icon-color: rgba(255, 255, 255, .5);
69
- --color-sf-close-icon-color-hover: rgba(255, 255, 255, .75);
70
- --color-sf-close-icon-color-pressed: rgba(255, 255, 255, 1);
71
- --color-sf-close-icon-color-disabled: rgba(255, 255, 255, .25);
72
-
73
- // border-color
74
- --color-sf-border-light: #495057;
75
- --color-sf-border: #495057;
76
- --color-sf-border-dark: #6c757d;
77
- --color-sf-border-hover: #495057;
78
- --color-sf-border-pressed: #495057;
79
- --color-sf-border-focus: #86d7fe;
80
- --color-sf-border-selected: #86d7fe;
81
- --color-sf-border-dragged: #495057;
82
- --color-sf-border-disabled: #495057;
83
- --color-sf-border-warning: #ffda6a;
84
- --color-sf-border-error: #ea868f;
85
- --color-sf-border-success: #75b798;
86
- --color-sf-spreadsheet-gridline: #dee2e6;
87
- --color-sf-flyout-border: rgba(255, 255, 255, .15);
88
-
89
- //sf Variables
90
- --color-sf-primary: rgba(13, 110, 253, 1);
91
- --color-sf-primary-text-color: #fff;
92
- --color-sf-primary-light: #86b7fe;
93
- --color-sf-primary-lighter: #031633;
94
- --color-sf-primary-dark: #073ba6;
95
- --color-sf-primary-darker: #6ea8fe;
96
- --color-sf-secondary: rgba(108, 117, 125, 1);
97
- --color-sf-success: rgba(25, 135, 84, 1);
98
- --color-sf-info: rgba(13, 202, 240, 1);
99
- --color-sf-warning: rgba(255, 193, 7, 1);
100
- --color-sf-danger: rgba(220, 53, 69, 1);
101
- --color-sf-success-light: #75b798;
102
- --color-sf-info-light: #6edff6;
103
- --color-sf-warning-light: #ffda6a;
104
- --color-sf-danger-light: #ea868f;
105
- --color-sf-success-dark: #75b798;
106
- --color-sf-info-dark: #6edff6;
107
- --color-sf-warning-dark: #ffda6a;
108
- --color-sf-danger-dark: #ea868f;
109
- --color-sf-success-light-alt: #051b11;
110
- --color-sf-info-light-alt: #032830;
111
- --color-sf-warning-light-alt: #332701;
112
- --color-sf-danger-light-alt: #2c0b0e;
113
- --color-sf-primary-shadow: 13, 110, 253;
114
- --color-sf-secondary-shadow: 108, 117, 125;
115
- --color-sf-success-shadow: 25, 135, 84;
116
- --color-sf-info-shadow: 13, 202, 240;
117
- --color-sf-warning-shadow: 255, 193, 7;
118
- --color-sf-danger-shadow: 220, 53, 69;
119
- --color-sf-black: 0, 0, 0;
120
- --color-sf-white: 255, 255, 255;
121
-
122
- // Primary-button
123
- --color-sf-primary-bg-color: var(--color-sf-primary);
124
- --color-sf-primary-border-color: var(--color-sf-primary);
125
- --color-sf-primary-text: var(--color-sf-primary-text-color);
126
- --color-sf-primary-bg-color-hover: #0b5ed7;
127
- --color-sf-primary-border-color-hover: #0a58ca;
128
- --color-sf-primary-text-hover: var(--color-sf-primary-text-color);
129
- --color-sf-primary-bg-color-pressed: #0a58ca;
130
- --color-sf-primary-border-color-pressed: #0a58ca;
131
- --color-sf-primary-text-pressed: var(--color-sf-primary-text-color);
132
- --color-sf-primary-bg-color-focus: var(--color-sf-primary-bg-color-hover);
133
- --color-sf-primary-border-color-focus: var(--color-sf-primary-border-color-hover);
134
- --color-sf-primary-text-focus: var(--color-sf-primary-text-hover);
135
- --color-sf-primary-bg-color-disabled: rgba(13, 110, 253, .65);
136
- --color-sf-primary-border-color-disabled: var(--color-sf-primary-bg-color-disabled);
137
- --color-sf-primary-text-disabled: rgba(255, 255, 255, .65);
138
-
139
- // Secondary-button
140
- --color-sf-secondary-bg-color: var(--color-sf-secondary);
141
- --color-sf-secondary-border-color: var(--color-sf-secondary-bg-color);
142
- --color-sf-secondary-text-color: #fff;
143
- --color-sf-secondary-bg-color-hover: #5c636a;
144
- --color-sf-secondary-border-color-hover: #565e64;
145
- --color-sf-secondary-text-color-hover: var(--color-sf-secondary-text-color);
146
- --color-sf-secondary-bg-color-pressed: #565e64;
147
- --color-sf-secondary-border-color-pressed: #51585e;
148
- --color-sf-secondary-text-color-pressed: var(--color-sf-secondary-text-color);
149
- --color-sf-secondary-bg-color-focus: var(--color-sf-secondary-bg-color-hover);
150
- --color-sf-secondary-border-color-focus: var(--color-sf-secondary-border-color-hover);
151
- --color-sf-secondary-text-color-focus: var(--color-sf-secondary-text-color-hover);
152
- --color-sf-secondary-bg-color-disabled: rgba(108, 117, 125, .65);
153
- --color-sf-secondary-border-color-disabled: var(--color-sf-secondary-bg-color-disabled);
154
- --color-sf-secondary-text-color-disabled: rgba(255, 255, 255, .65);
155
-
156
- // Success-button
157
- --color-sf-success-bg-color: var(--color-sf-success);
158
- --color-sf-success-border-color: var(--color-sf-success-bg-color);
159
- --color-sf-success-text: #fff;
160
- --color-sf-success-bg-color-hover: #157347;
161
- --color-sf-success-border-color-hover: #146c43;
162
- --color-sf-success-text-hover: var(--color-sf-success-text);
163
- --color-sf-success-bg-color-pressed: #146c43;
164
- --color-sf-success-border-color-pressed: #15803d;
165
- --color-sf-success-text-pressed: var(--color-sf-success-text);
166
- --color-sf-success-bg-color-focus: var(--color-sf-success-bg-color-hover);
167
- --color-sf-success-border-color-focus: var(--color-sf-success-bg-color-focus);
168
- --color-sf-success-text-focus: var(--color-sf-success-text);
169
- --color-sf-success-bg-color-disabled: rgba(25, 135, 84, .65);
170
- --color-sf-success-border-color-disabled: var(--color-sf-success-bg-color-disabled);
171
- --color-sf-success-text-disabled: rgba(255, 255, 255, .65);
172
-
173
- // Warning-button
174
- --color-sf-warning-bg-color: var(--color-sf-warning);
175
- --color-sf-warning-border-color: var(--color-sf-warning-bg-color);
176
- --color-sf-warning-text: #000;
177
- --color-sf-warning-bg-color-hover: #ffca2c;
178
- --color-sf-warning-border-color-hover: #ffc720;
179
- --color-sf-warning-text-hover: var(--color-sf-warning-text);
180
- --color-sf-warning-bg-color-pressed: #ffcd39;
181
- --color-sf-warning-border-color-pressed: #ffc720;
182
- --color-sf-warning-text-pressed: var(--color-sf-warning-text);
183
- --color-sf-warning-bg-color-focus: var(--color-sf-warning-bg-color-hover);
184
- --color-sf-warning-border-color-focus: var(--color-sf-warning-bg-color-focus);
185
- --color-sf-warning-text-focus: var(--color-sf-warning-text);
186
- --color-sf-warning-bg-color-disabled: rgba(255, 193, 7, .65);
187
- --color-sf-warning-border-color-disabled: var(--color-sf-warning-bg-color-disabled);
188
- --color-sf-warning-text-disabled: rgba(0, 0, 0, .65);
189
-
190
- // Info-button
191
- --color-sf-info-bg-color: var(--color-sf-info);
192
- --color-sf-info-border-color: var(--color-sf-info-bg-color);
193
- --color-sf-info-text: #000;
194
- --color-sf-info-bg-color-hover: #31d2f2;
195
- --color-sf-info-border-color-hover: #25cff2;
196
- --color-sf-info-text-hover: var(--color-sf-info-text);
197
- --color-sf-info-bg-color-pressed: #3dd5f3;
198
- --color-sf-info-border-color-pressed: #25cff2;
199
- --color-sf-info-text-pressed: var(--color-sf-info-text);
200
- --color-sf-info-bg-color-focus: var(--color-sf-info-bg-color-hover);
201
- --color-sf-info-border-color-focus: var(--color-sf-info-bg-color-focus);
202
- --color-sf-info-text-focus: var(--color-sf-info-text-hover);
203
- --color-sf-info-bg-color-disabled: rgba(13, 202, 240, .65);
204
- --color-sf-info-border-color-disabled: var(--color-sf-info-bg-color-disabled);
205
- --color-sf-info-text-disabled: rgba(0, 0, 0, .65);
206
-
207
- // danger-button
208
- --color-sf-danger-bg-color: var(--color-sf-danger);
209
- --color-sf-danger-border-color: var(--color-sf-danger-bg-color);
210
- --color-sf-danger-text: #fff;
211
- --color-sf-danger-bg-color-hover: #bb2d3b;
212
- --color-sf-danger-border-color-hover: #b02a37;
213
- --color-sf-danger-text-hover: var(--color-sf-danger-text);
214
- --color-sf-danger-bg-color-pressed: #b02a37;
215
- --color-sf-danger-border-color-pressed: #a52834;
216
- --color-sf-danger-text-pressed: var(--color-sf-danger-text);
217
- --color-sf-danger-bg-color-focus: var(--color-sf-danger-bg-color-hover);
218
- --color-sf-danger-border-color-focus: var(--color-sf-danger-bg-color-focus);
219
- --color-sf-danger-text-focus: var(--color-sf-danger-text-hover);
220
- --color-sf-danger-bg-color-disabled: rgba(220, 53, 69, .65);
221
- --color-sf-danger-border-color-disabled: var(--color-sf-danger-bg-color-disabled);
222
- --color-sf-danger-text-disabled: rgba(255, 255, 255, .65);
223
-
224
- //Outline button
225
- --color-sf-primary-outline: var(--color-sf-primary-bg-color);
226
- --color-sf-secondary-outline: var(--color-sf-secondary-bg-color);
227
- --color-sf-warning-outline: var(--color-sf-warning-bg-color);
228
- --color-sf-danger-outline: var(--color-sf-danger-bg-color);
229
- --color-sf-success-outline: var(--color-sf-success-bg-color);
230
- --color-sf-info-outline: var(--color-sf-info-bg-color);
231
-
232
- // Tooltip
233
- --color-sf-tooltip-bg-color: rgba(255, 255, 255, .9);
234
- --color-sf-tooltip-border: var(--color-sf-tooltip-bg-color);
235
- --color-sf-tooltip-text-color: #212529;
236
-
237
- //Light
238
- --color-sf-appbar-bg-color-alt1: var(--color-sf-content-bg-color-alt1);
239
- --color-sf-appbar-color-alt1: var(--color-sf-content-text-color);
240
- --color-sf-appbar-border-color-alt1: var(--color-sf-appbar-bg-color-alt1);
241
- --color-sf-appbar-hover-bg-color-alt1: transparent;
242
-
243
- //dark
244
- --color-sf-appbar-bg-color-alt2: #dee2e6;
245
- --color-sf-appbar-color-alt2: #212529;
246
- --color-sf-appbar-border-color-alt2: var(--color-sf-appbar-bg-color-alt2);
247
- --color-sf-appbar-hover-bg-color-alt2: transparent;
248
-
249
- //diagram Palette color
250
- --color-sf-diagram-palette-background: #dee2e6;
251
- --color-sf-diagram-palette-hover-background: #ced4da;
252
- --color-sf-diagram-palette-selected-color: #abb5bd;
253
-
254
- //rating
255
- --color-sf-rating-selected-color: var(--color-sf-primary);
256
- --color-sf-rating-unrated-color: #adb5bd;
257
- --color-sf-rating-selected-disabled-color: #6c757d;
258
- --color-sf-rating-unrated-disabled-color: #495057;
259
- --color-sf-rating-selected-hover-color: #adb5bd;
260
- --color-sf-rating-unrated-hover-color: var(--color-sf-primary);
261
- --color-sf-rating-pressed-color: #599bfe;
262
-
263
- //Message default
264
- --color-sf-msg-color: #a7acb1;
265
- --color-sf-msg-bg-color: #161719;
266
- --color-sf-msg-border-color: #41464b;
267
- --color-sf-msg-color-alt1: var(--color-sf-msg-color);
268
- --color-sf-msg-bg-color-alt1: transparent;
269
- --color-sf-msg-border-color-alt1: var(--color-sf-msg-border-color);
270
- --color-sf-msg-color-alt2: #fff;
271
- --color-sf-msg-bg-color-alt2: #6c757d;
272
- --color-sf-msg-border-color-alt2: var(--color-sf-msg-bg-color-alt2);
273
- --color-sf-msg-icon-color: var(--color-sf-msg-color);
274
- --color-sf-msg-icon-color-alt1: var(--color-sf-msg-color);
275
- --color-sf-msg-icon-color-alt2: #fff;
276
- --color-sf-msg-close-icon-color: var(--color-sf-close-icon-color);
277
- --color-sf-msg-close-icon-color-alt1: var(--color-sf-close-icon-color);
278
- --color-sf-msg-close-icon-color-alt2: #fff;
279
-
280
- //Message danger
281
- --color-sf-msg-danger-color: #ea868f;
282
- --color-sf-msg-danger-bg-color: #2c0b0e;
283
- --color-sf-msg-danger-border-color: #842029;
284
- --color-sf-msg-danger-color-alt1: var(--color-sf-msg-danger-color);
285
- --color-sf-msg-danger-bg-color-alt1: transparent;
286
- --color-sf-msg-danger-border-color-alt1: var(--color-sf-msg-danger-border-color);
287
- --color-sf-msg-danger-color-alt2: #fff;
288
- --color-sf-msg-danger-bg-color-alt2: #dc3545;
289
- --color-sf-msg-danger-border-color-alt2: var(--color-sf-msg-danger-bg-color-alt2);
290
- --color-sf-msg-danger-icon-color: var(--color-sf-msg-danger-color);
291
- --color-sf-msg-danger-icon-color-alt1: var(--color-sf-msg-danger-color);
292
- --color-sf-msg-danger-icon-color-alt2: #fff;
293
- --color-sf-msg-danger-close-icon-color: var(--color-sf-close-icon-color);
294
- --color-sf-msg-danger-close-icon-color-alt1: var(--color-sf-close-icon-color);
295
- --color-sf-msg-danger-close-icon-color-alt2: #fff;
296
-
297
- //Message success
298
- --color-sf-msg-success-color: #75b798;
299
- --color-sf-msg-success-bg-color: #051b11;
300
- --color-sf-msg-success-border-color: #0f5132;
301
- --color-sf-msg-success-color-alt1: var(--color-sf-msg-success-color);
302
- --color-sf-msg-success-bg-color-alt1: transparent;
303
- --color-sf-msg-success-border-color-alt1: var(--color-sf-msg-success-border-color);
304
- --color-sf-msg-success-color-alt2: #fff;
305
- --color-sf-msg-success-bg-color-alt2: #198754;
306
- --color-sf-msg-success-border-color-alt2: var(--color-sf-msg-success-bg-color-alt2);
307
- --color-sf-msg-success-icon-color: var(--color-sf-msg-success-color);
308
- --color-sf-msg-success-icon-color-alt1: var(--color-sf-msg-success-color);
309
- --color-sf-msg-success-icon-color-alt2: #fff;
310
- --color-sf-msg-success-close-icon-color: var(--color-sf-close-icon-color);
311
- --color-sf-msg-success-close-icon-color-alt1: var(--color-sf-close-icon-color);
312
- --color-sf-msg-success-close-icon-color-alt2: #fff;
313
-
314
- //Message warning
315
- --color-sf-msg-warning-color: #ffda6a;
316
- --color-sf-msg-warning-bg-color: #332701;
317
- --color-sf-msg-warning-border-color: #997404;
318
- --color-sf-msg-warning-color-alt1: var(--color-sf-msg-warning-color);
319
- --color-sf-msg-warning-bg-color-alt1: transparent;
320
- --color-sf-msg-warning-border-color-alt1: var(--color-sf-msg-warning-border-color);
321
- --color-sf-msg-warning-color-alt2: #212529;
322
- --color-sf-msg-warning-bg-color-alt2: #ffc107;
323
- --color-sf-msg-warning-border-color-alt2: var(--color-sf-msg-warning-bg-color-alt2);
324
- --color-sf-msg-warning-icon-color: var(--color-sf-msg-warning-color);
325
- --color-sf-msg-warning-icon-color-alt1: var(--color-sf-msg-warning-color);
326
- --color-sf-msg-warning-icon-color-alt2: #212529;
327
- --color-sf-msg-warning-close-icon-color: var(--color-sf-close-icon-color);
328
- --color-sf-msg-warning-close-icon-color-alt1: var(--color-sf-close-icon-color);
329
- --color-sf-msg-warning-close-icon-color-alt2: #212529;
330
-
331
- //Message info
332
- --color-sf-msg-info-color: #6edff6;
333
- --color-sf-msg-info-bg-color: #032830;
334
- --color-sf-msg-info-border-color: #087990;
335
- --color-sf-msg-info-color-alt1: var(--color-sf-msg-info-color);
336
- --color-sf-msg-info-bg-color-alt1: transparent;
337
- --color-sf-msg-info-border-color-alt1: var(--color-sf-msg-info-border-color);
338
- --color-sf-msg-info-color-alt2: #212529;
339
- --color-sf-msg-info-bg-color-alt2: #0dcaf0;
340
- --color-sf-msg-info-border-color-alt2: var(--color-sf-msg-info-bg-color-alt2);
341
- --color-sf-msg-info-icon-color: var(--color-sf-msg-info-color);
342
- --color-sf-msg-info-icon-color-alt1: var(--color-sf-msg-info-color);
343
- --color-sf-msg-info-icon-color-alt2: #212529;
344
- --color-sf-msg-info-close-icon-color: var(--color-sf-close-icon-color);
345
- --color-sf-msg-info-close-icon-color-alt1: var(--color-sf-close-icon-color);
346
- --color-sf-msg-info-close-icon-color-alt2: #212529;
347
-
348
- //badge
349
- --color-sf-badge-light-bg-color: #faf9fa;
350
- --color-sf-badge-light-border-color: #faf9fa;
351
- --color-sf-badge-light-text-color: #000;
352
- --color-sf-badge-dark-bg-color: #212529;
353
- --color-sf-badge-dark-border-color: #212529;
354
- --color-sf-badge-dark-text-color: #fff;
355
-
356
- //tab
357
- --color-sf-tab-border: #343a40;
358
-
359
- //stepper
360
- --color-sf-stepper: #212529;
361
-
362
- --color-sf-shadow-color: #{#fff};
363
- --color-sf-shadow-color1: #{#000};
364
- }
365
-
366
- // backgroundcolor
367
- $content-bg-color: mapcolorvariable('content-bg-color') !default;
368
- $content-bg-color-alt1: mapcolorvariable('content-bg-color-alt1') !default;
369
- $content-bg-color-alt2: mapcolorvariable('content-bg-color-alt2') !default;
370
- $content-bg-color-alt3: mapcolorvariable('content-bg-color-alt3') !default;
371
- $content-bg-color-alt4: mapcolorvariable('content-bg-color-alt4') !default;
372
- $content-bg-color-alt5: mapcolorvariable('content-bg-color-alt5') !default;
373
- $content-bg-color-hover: mapcolorvariable('content-bg-color-hover') !default;
374
- $content-bg-color-pressed: mapcolorvariable('content-bg-color-pressed') !default;
375
- $content-bg-color-focus: mapcolorvariable('content-bg-color-focus') !default;
376
- $content-bg-color-selected: mapcolorvariable('content-bg-color-selected') !default;
377
- $content-bg-color-dragged: mapcolorvariable('content-bg-color-dragged') !default;
378
- $content-bg-color-disabled: mapcolorvariable('content-bg-color-disabled') !default;
379
- $flyout-bg-color: mapcolorvariable('flyout-bg-color') !default;
380
- $flyout-bg-color-hover: mapcolorvariable('flyout-bg-color-hover') !default;
381
- $flyout-bg-color-pressed: mapcolorvariable('flyout-bg-color-pressed') !default;
382
- $flyout-bg-color-focus: mapcolorvariable('flyout-bg-color-focus') !default;
383
- $overlay-bg: mapcolorvariable('overlay-bg-color');
384
- $table-bg-color-hover: mapcolorvariable('table-bg-color-hover') !default;
385
- $table-bg-color-pressed: mapcolorvariable('table-bg-color-pressed') !default;
386
- $table-bg-color-selected: mapcolorvariable('table-bg-color-selected') !default;
387
-
388
- // text-color
389
- $content-text-color: mapcolorvariable('content-text-color') !default;
390
- $content-text-color-alt1: mapcolorvariable('content-text-color-alt1') !default;
391
- $content-text-color-alt2: mapcolorvariable('content-text-color-alt2') !default;
392
- $content-text-color-alt3: mapcolorvariable('content-text-color-alt3') !default;
393
- $content-text-color-hover: mapcolorvariable('content-text-color-hover') !default;
394
- $content-text-color-pressed: mapcolorvariable('content-text-color-pressed') !default;
395
- $content-text-color-focus: mapcolorvariable('content-text-color-focus') !default;
396
- $content-text-color-selected: mapcolorvariable('content-text-color-selected') !default;
397
- $content-text-color-dragged: mapcolorvariable('content-text-color-dragged') !default;
398
- $content-text-color-disabled: mapcolorvariable('content-text-color-disabled') !default;
399
- $placeholder-text-color: mapcolorvariable('placeholder-text-color') !default;
400
- $flyout-text-color: mapcolorvariable('flyout-text-color') !default;
401
- $flyout-text-color-hover: mapcolorvariable('flyout-text-color-hover') !default;
402
- $flyout-text-color-pressed: mapcolorvariable('flyout-text-color-pressed') !default;
403
- $flyout-text-color-focus: mapcolorvariable('flyout-text-color-focus') !default;
404
- $table-text-color-hover: mapcolorvariable('table-text-color-hover') !default;
405
- $table-text-color-pressed: mapcolorvariable('table-text-color-pressed') !default;
406
- $table-text-color-selected: mapcolorvariable('table-text-color-selected') !default;
407
-
408
- // icon-color
409
- $icon-color: mapcolorvariable('icon-color') !default;
410
- $icon-color-hover: mapcolorvariable('icon-color-hover') !default;
411
- $icon-color-pressed: mapcolorvariable('icon-color-pressed') !default;
412
- $icon-color-disabled: mapcolorvariable('icon-color-disabled') !default;
413
-
414
- // border-color
415
- $border-light: mapcolorvariable('border-light') !default;
416
- $border: mapcolorvariable('border') !default;
417
- $border-dark: mapcolorvariable('border-dark') !default;
418
- $border-hover: mapcolorvariable('border-hover') !default;
419
- $border-pressed: mapcolorvariable('border-pressed') !default;
420
- $border-focus: mapcolorvariable('border-focus') !default;
421
- $border-selected: mapcolorvariable('border-selected') !default;
422
- $border-dragged:mapcolorvariable('border-dragged') !default;
423
- $border-disabled: mapcolorvariable('border-disabled') !default;
424
- $border-warning: mapcolorvariable('border-warning') !default;
425
- $border-error: mapcolorvariable('border-error') !default;
426
- $border-success: mapcolorvariable('border-success') !default;
427
- $spreadsheet-gridline: mapcolorvariable('spreadsheet-gridline') !default;
428
- $flyout-border: mapcolorvariable('flyout-border') !default;
429
-
430
- //sf Variables
431
- $primary: mapcolorvariable('primary') !default;
432
- $secondary: mapcolorvariable('secondary') !default;
433
- $primary-text-color: mapcolorvariable('primary-text-color') !default;
434
- $primary-light: mapcolorvariable('primary-light') !default;
435
- $primary-lighter: mapcolorvariable('primary-lighter') !default;
436
- $success: mapcolorvariable('success') !default;
437
- $info: mapcolorvariable('info') !default;
438
- $warning: mapcolorvariable('warning') !default;
439
- $danger: mapcolorvariable('danger') !default;
440
- $success-light: mapcolorvariable('success-light') !default;
441
- $info-light: mapcolorvariable('info-light') !default;
442
- $warning-light: mapcolorvariable('warning-light') !default;
443
- $danger-light: mapcolorvariable('danger-light') !default;
444
- $success-dark: mapcolorvariable('success-dark') !default;
445
- $info-dark: mapcolorvariable('info-dark') !default;
446
- $warning-dark: mapcolorvariable('warning-dark') !default;
447
- $danger-dark: mapcolorvariable('danger-dark') !default;
448
- $success-light-alt: mapcolorvariable('success-light-alt') !default;
449
- $info-light-alt: mapcolorvariable('info-light-alt') !default;
450
- $warning-light-alt: mapcolorvariable('warning-light-alt') !default;
451
- $danger-light-alt: mapcolorvariable('danger-light-alt') !default;
452
-
453
- // Primary-button
454
- $primary-bg-color: mapcolorvariable('primary-bg-color') !default;
455
- $primary-border-color: mapcolorvariable('primary-border-color') !default;
456
- $primary-text: mapcolorvariable('primary-text') !default;
457
- $primary-bg-color-hover: mapcolorvariable('primary-bg-color-hover') !default;
458
- $primary-border-color-hover: mapcolorvariable('primary-border-color-hover') !default;
459
- $primary-text-hover: mapcolorvariable('primary-text-hover') !default;
460
- $primary-bg-color-pressed: mapcolorvariable('primary-bg-color-pressed') !default;
461
- $primary-border-color-pressed: mapcolorvariable('primary-border-color-pressed') !default;
462
- $primary-text-pressed: mapcolorvariable('primary-text-pressed') !default;
463
- $primary-bg-color-focus: mapcolorvariable('primary-bg-color-focus') !default;
464
- $primary-border-color-focus: mapcolorvariable('primary-border-color-focus') !default;
465
- $primary-text-focus: mapcolorvariable('primary-text-focus') !default;
466
- $primary-bg-color-disabled: mapcolorvariable('primary-bg-color-disabled') !default;
467
- $primary-border-color-disabled: mapcolorvariable('primary-border-color-disabled') !default;
468
- $primary-text-disabled: mapcolorvariable('primary-text-disabled') !default;
469
-
470
- // Secondary-button
471
- $secondary-bg-color: mapcolorvariable('secondary-bg-color') !default;
472
- $secondary-border-color: mapcolorvariable('secondary-border-color') !default;
473
- $secondary-text-color: mapcolorvariable('secondary-text-color') !default;
474
- $secondary-bg-color-hover: mapcolorvariable('secondary-bg-color-hover') !default;
475
- $secondary-border-color-hover: mapcolorvariable('secondary-border-color-hover') !default;
476
- $secondary-text-color-hover: mapcolorvariable('secondary-text-color-hover') !default;
477
- $secondary-bg-color-pressed: mapcolorvariable('secondary-bg-color-pressed') !default;
478
- $secondary-border-color-pressed: mapcolorvariable('secondary-border-color-pressed') !default;
479
- $secondary-text-color-pressed: mapcolorvariable('secondary-text-color-pressed') !default;
480
- $secondary-bg-color-focus: mapcolorvariable('secondary-bg-color-focus') !default;
481
- $secondary-border-color-focus: mapcolorvariable('secondary-border-color-focus') !default;
482
- $secondary-text-color-focus: mapcolorvariable('secondary-text-color-focus') !default;
483
- $secondary-bg-color-disabled: mapcolorvariable('secondary-bg-color-disabled') !default;
484
- $secondary-border-color-disabled: mapcolorvariable('secondary-border-color-disabled') !default;
485
- $secondary-text-color-disabled: mapcolorvariable('secondary-text-color-disabled') !default;
486
-
487
- // Success-button
488
- $success-bg-color: mapcolorvariable('success-bg-color') !default;
489
- $success-border-color: mapcolorvariable('success-border-color') !default;
490
- $success-text: mapcolorvariable('success-text') !default;
491
- $success-bg-color-hover: mapcolorvariable('success-bg-color-hover') !default;
492
- $success-border-color-hover: mapcolorvariable('success-border-color-hover') !default;
493
- $success-text-hover: mapcolorvariable('success-text-hover') !default;
494
- $success-bg-color-pressed: mapcolorvariable('success-bg-color-pressed') !default;
495
- $success-border-color-pressed: mapcolorvariable('success-border-color-pressed') !default;
496
- $success-text-pressed: mapcolorvariable('success-text-pressed') !default;
497
- $success-bg-color-focus: mapcolorvariable('success-bg-color-focus') !default;
498
- $success-border-color-focus: mapcolorvariable('success-border-color-focus') !default;
499
- $success-text-focus: mapcolorvariable('success-text-focus') !default;
500
- $success-bg-color-disabled: mapcolorvariable('success-bg-color-disabled') !default;
501
- $success-border-color-disabled: mapcolorvariable('success-border-color-disabled') !default;
502
- $success-text-disabled: mapcolorvariable('success-text-disabled') !default;
503
-
504
- // Warning-button
505
- $warning-bg-color: mapcolorvariable('warning-bg-color') !default;
506
- $warning-border-color: mapcolorvariable('warning-border-color') !default;
507
- $warning-text: mapcolorvariable('warning-text') !default;
508
- $warning-bg-color-hover: mapcolorvariable('warning-bg-color-hover') !default;
509
- $warning-border-color-hover: mapcolorvariable('warning-border-color-hover') !default;
510
- $warning-text-hover: mapcolorvariable('warning-text-hover') !default;
511
- $warning-bg-color-pressed: mapcolorvariable('warning-bg-color-pressed') !default;
512
- $warning-border-color-pressed: mapcolorvariable('warning-border-color-pressed') !default;
513
- $warning-text-pressed: mapcolorvariable('warning-text-pressed') !default;
514
- $warning-bg-color-focus: mapcolorvariable('warning-bg-color-focus') !default;
515
- $warning-border-color-focus: mapcolorvariable('warning-border-color-focus') !default;
516
- $warning-text-focus: mapcolorvariable('warning-text-focus') !default;
517
- $warning-bg-color-disabled: mapcolorvariable('warning-bg-color-disabled') !default;
518
- $warning-border-color-disabled: mapcolorvariable('warning-border-color-disabled') !default;
519
- $warning-text-disabled: mapcolorvariable('warning-text-disabled') !default;
520
-
521
- // Info-button
522
- $info-bg-color: mapcolorvariable('info-bg-color') !default;
523
- $info-border-color: mapcolorvariable('info-border-color') !default;
524
- $info-text: mapcolorvariable('info-text') !default;
525
- $info-bg-color-hover: mapcolorvariable('info-bg-color-hover') !default;
526
- $info-border-color-hover: mapcolorvariable('info-border-color-hover') !default;
527
- $info-text-hover: mapcolorvariable('info-text-hover') !default;
528
- $info-bg-color-pressed: mapcolorvariable('info-bg-color-pressed') !default;
529
- $info-border-color-pressed: mapcolorvariable('info-border-color-pressed') !default;
530
- $info-text-pressed: mapcolorvariable('info-text-pressed') !default;
531
- $info-bg-color-focus: mapcolorvariable('info-bg-color-focus') !default;
532
- $info-border-color-focus: mapcolorvariable('info-border-color-focus') !default;
533
- $info-text-focus: mapcolorvariable('info-text-focus') !default;
534
- $info-bg-color-disabled: mapcolorvariable('info-bg-color-disabled') !default;
535
- $info-border-color-disabled: mapcolorvariable('info-border-color-disabled') !default;
536
- $info-text-disabled: mapcolorvariable('info-text-disabled') !default;
537
-
538
- // danger-button
539
- $danger-bg-color: mapcolorvariable('danger-bg-color') !default;
540
- $danger-border-color: mapcolorvariable('danger-border-color') !default;
541
- $danger-text: mapcolorvariable('danger-text') !default;
542
- $danger-bg-color-hover: mapcolorvariable('danger-bg-color-hover') !default;
543
- $danger-border-color-hover: mapcolorvariable('danger-border-color-hover') !default;
544
- $danger-text-hover: mapcolorvariable('danger-text-hover') !default;
545
- $danger-bg-color-pressed: mapcolorvariable('danger-bg-color-pressed') !default;
546
- $danger-border-color-pressed: mapcolorvariable('danger-border-color-pressed') !default;
547
- $danger-text-pressed: mapcolorvariable('danger-text-pressed') !default;
548
- $danger-bg-color-focus: mapcolorvariable('danger-bg-color-focus') !default;
549
- $danger-border-color-focus: mapcolorvariable('danger-border-color-focus') !default;
550
- $danger-text-focus: mapcolorvariable('danger-text-focus') !default;
551
- $danger-bg-color-disabled: mapcolorvariable('danger-bg-color-disabled') !default;
552
- $danger-border-color-disabled: mapcolorvariable('danger-border-color-disabled') !default;
553
- $danger-text-disabled: mapcolorvariable('danger-text-disabled') !default;
554
-
555
- //Outline button
556
- $primary-outline: mapcolorvariable('primary-outline') !default;
557
- $secondary-outline: mapcolorvariable('secondary-outline') !default;
558
- $warning-outline: mapcolorvariable('warning-outline') !default;
559
- $danger-outline: mapcolorvariable('danger-outline') !default;
560
- $success-outline: mapcolorvariable('success-outline') !default;
561
- $info-outline: mapcolorvariable('info-outline') !default;
562
-
563
- // Tooltip
564
- $tooltip-bg-color: mapcolorvariable('tooltip-bg-color') !default;
565
- $tooltip-border: mapcolorvariable('tooltip-border') !default;
566
- $tooltip-text-color: mapcolorvariable('tooltip-text-color') !default;
567
-
568
- //appbar
569
- //Light
570
- $appbar-bg-color-alt1: mapcolorvariable('appbar-bg-color-alt1') !default;
571
- $appbar-color-alt1:mapcolorvariable('appbar-color-alt1') !default;
572
- $appbar-border-color-alt1: mapcolorvariable('appbar-border-color-alt1') !default;
573
- $appbar-hover-bg-color-alt1: mapcolorvariable('appbar-hover-bg-color-alt1') !default;
574
-
575
- //dark
576
- $appbar-bg-color-alt2: mapcolorvariable('appbar-bg-color-alt2') !default;
577
- $appbar-color-alt2: mapcolorvariable('appbar-color-alt2') !default;
578
- $appbar-border-color-alt2: mapcolorvariable('appbar-border-color-alt2') !default;
579
- $appbar-hover-bg-color-alt2: mapcolorvariable('appbar-hover-bg-color-alt2') !default;
580
-
581
- //diagram Palette color
582
- $diagram-palette-background: mapcolorvariable('diagram-palette-background') !default;
583
- $diagram-palette-hover-background: mapcolorvariable('diagram-palette-hover-background') !default;
584
- $diagram-palette-selected-background: mapcolorvariable('diagram-palette-selected-background') !default;
585
-
586
- //rating
587
- $rating-selected-color:mapcolorvariable('rating-selected-color') !default;
588
- $rating-unrated-color: mapcolorvariable('rating-unrated-color') !default;
589
- $rating-selected-disabled-color: mapcolorvariable('rating-selected-disabled-color') !default;
590
- $rating-unrated-disabled-color: mapcolorvariable('rating-unrated-disabled-color') !default;
591
- $rating-selected-hover-color: mapcolorvariable('rating-selected-hover-color') !default;
592
- $rating-unrated-hover-color: mapcolorvariable('rating-unrated-hover-color') !default;
593
- $rating-pressed-color: mapcolorvariable('rating-pressed-color') !default;
594
-
595
- //Message component
596
-
597
- //Message default
598
- $msg-color: mapcolorvariable('msg-color') !default;
599
- $msg-bg-color: mapcolorvariable('msg-bg-color') !default;
600
- $msg-border-color:mapcolorvariable('msg-border-color') !default;
601
- $msg-color-alt1: mapcolorvariable('msg-color-alt1') !default;
602
- $msg-bg-color-alt1: mapcolorvariable('msg-bg-color-alt1') !default;
603
- $msg-border-color-alt1: mapcolorvariable('msg-border-color-alt1') !default;
604
- $msg-color-alt2: mapcolorvariable('msg-color-alt2') !default;
605
- $msg-bg-color-alt2: mapcolorvariable('msg-bg-color-alt2') !default;
606
- $msg-border-color-alt2: mapcolorvariable('msg-border-color-alt2') !default;
607
- $msg-icon-color: mapcolorvariable('msg-icon-color') !default;
608
- $msg-icon-color-alt1: mapcolorvariable('msg-icon-color-alt1') !default;
609
- $msg-icon-color-alt2: mapcolorvariable('msg-icon-color-alt2') !default;
610
- $msg-close-icon-color: mapcolorvariable('msg-close-icon-color') !default;
611
- $msg-close-icon-color-alt1: mapcolorvariable('msg-close-icon-color-alt21') !default;
612
- $msg-close-icon-color-alt2: mapcolorvariable('msg-close-icon-color-alt2') !default;
613
-
614
- //Message success
615
- $msg-success-color: mapcolorvariable('msg-success-color') !default;
616
- $msg-success-bg-color: mapcolorvariable('msg-success-bg-color') !default;
617
- $msg-success-border-color: mapcolorvariable('msg-success-border-color') !default;
618
- $msg-success-color-alt1: mapcolorvariable('msg-success-color-alt1') !default;
619
- $msg-success-bg-color-alt1: mapcolorvariable('msg-success-bg-color-alt1') !default;
620
- $msg-success-border-color-alt1: mapcolorvariable('msg-success-border-color-alt1') !default;
621
- $msg-success-color-alt2: mapcolorvariable('msg-success-color-alt2') !default;
622
- $msg-success-bg-color-alt2: mapcolorvariable('msg-success-bg-color-alt2') !default;
623
- $msg-success-border-color-alt2: mapcolorvariable('msg-success-border-color-alt2') !default;
624
- $msg-success-icon-color: mapcolorvariable('msg-success-icon-color') !default;
625
- $msg-success-icon-color-alt1:mapcolorvariable('msg-success-icon-color-alt1') !default;
626
- $msg-success-icon-color-alt2: mapcolorvariable('msg-success-icon-color-alt2') !default;
627
- $msg-success-close-icon-color: mapcolorvariable('msg-success-close-icon-color') !default;
628
- $msg-success-close-icon-color-alt1: mapcolorvariable('msg-success-close-icon-color-alt1') !default;
629
- $msg-success-close-icon-color-alt2: mapcolorvariable('msg-success-close-icon-color-alt2') !default;
630
-
631
- //Message danger
632
- $msg-danger-color: mapcolorvariable('msg-danger-color') !default;
633
- $msg-danger-bg-color: mapcolorvariable('msg-danger-bg-color') !default;
634
- $msg-danger-border-color: mapcolorvariable('msg-danger-border-color') !default;
635
- $msg-danger-color-alt1: mapcolorvariable('msg-danger-color-alt1') !default;
636
- $msg-danger-bg-color-alt1: mapcolorvariable('msg-danger-bg-color-alt1') !default;
637
- $msg-danger-border-color-alt1: mapcolorvariable('msg-danger-border-color-alt1') !default;
638
- $msg-danger-color-alt2: mapcolorvariable('msg-danger-color-alt2') !default;
639
- $msg-danger-bg-color-alt2: mapcolorvariable('msg-danger-bg-color-alt2') !default;
640
- $msg-danger-border-color-alt2: mapcolorvariable('msg-danger-border-color-alt2') !default;
641
- $msg-danger-icon-color: mapcolorvariable('msg-danger-icon-color') !default;
642
- $msg-danger-icon-color-alt1: mapcolorvariable('msg-danger-icon-color-alt1') !default;
643
- $msg-danger-icon-color-alt2: mapcolorvariable('msg-danger-icon-color-alt2') !default;
644
- $msg-danger-close-icon-color: mapcolorvariable('msg-danger-close-icon-color') !default;
645
- $msg-danger-close-icon-color-alt1: mapcolorvariable('msg-danger-close-icon-color-alt1') !default;
646
- $msg-danger-close-icon-color-alt2: mapcolorvariable('msg-danger-close-icon-color-alt2') !default;
647
-
648
- //Message Info
649
- $msg-info-color: mapcolorvariable('msg-info-color') !default;
650
- $msg-info-bg-color: mapcolorvariable('msg-info-bg-color') !default;
651
- $msg-info-border-color: mapcolorvariable('msg-info-border-color') !default;
652
- $msg-info-color-alt1: mapcolorvariable('msg-info-color-alt1') !default;
653
- $msg-info-bg-color-alt1: mapcolorvariable('msg-info-bg-color-alt1') !default;
654
- $msg-info-border-color-alt1: mapcolorvariable('msg-info-border-color-alt1') !default;
655
- $msg-info-color-alt2: mapcolorvariable('msg-info-color-alt2') !default;
656
- $msg-info-bg-color-alt2: mapcolorvariable('msg-info-bg-color-alt2') !default;
657
- $msg-info-border-color-alt2: mapcolorvariable('msg-info-border-color-alt2') !default;
658
- $msg-info-icon-color: mapcolorvariable('msg-info-icon-color') !default;
659
- $msg-info-icon-color-alt1: mapcolorvariable('msg-info-icon-color-alt1') !default;
660
- $msg-info-icon-color-alt2:mapcolorvariable('msg-info-icon-color-alt2') !default;
661
- $msg-info-close-icon-color: mapcolorvariable('msg-info-close-icon-color') !default;
662
- $msg-info-close-icon-color-alt1: mapcolorvariable('msg-info-close-icon-color-alt1') !default;
663
- $msg-info-close-icon-color-alt2: mapcolorvariable('msg-info-close-icon-color-alt2') !default;
664
-
665
- //Message Warning
666
- $msg-warning-color: mapcolorvariable('msg-warning-color') !default;
667
- $msg-warning-bg-color: mapcolorvariable('msg-warning-bg-color') !default;
668
- $msg-warning-border-color: mapcolorvariable('msg-warning-border-color') !default;
669
- $msg-warning-color-alt1: mapcolorvariable('msg-warning-color-alt1') !default;
670
- $msg-warning-bg-color-alt1: mapcolorvariable('msg-warning-bg-color-alt1') !default;
671
- $msg-warning-border-color-alt1: mapcolorvariable('msg-warning-border-color-alt1') !default;
672
- $msg-warning-color-alt2: mapcolorvariable('msg-warning-color-alt2') !default;
673
- $msg-warning-bg-color-alt2: mapcolorvariable('msg-warning-bg-color-alt2') !default;
674
- $msg-warning-border-color-alt2: mapcolorvariable('msg-warning-border-color-alt2') !default;
675
- $msg-warning-icon-color: mapcolorvariable('msg-warning-icon-color') !default;
676
- $msg-warning-icon-color-alt1: mapcolorvariable('msg-warning-icon-color-alt1') !default;
677
- $msg-warning-icon-color-alt2: mapcolorvariable('msg-warning-icon-color-alt2') !default;
678
- $msg-warning-close-icon-color: mapcolorvariable('msg-warning-close-icon-color') !default;
679
- $msg-warning-close-icon-color-alt1: mapcolorvariable('msg-warning-close-icon-color-alt1') !default;
680
- $msg-warning-close-icon-color-alt2: mapcolorvariable('msg-warning-close-icon-color-alt2') !default;
681
-
682
- //badge
683
- $badge-primary-bg-color-darken: mapcolorvariable('badge-primary-bg-color-darken') !default;
684
- $badge-secondary-bg-color-darken: mapcolorvariable('badge-secondary-bg-color-darken') !default;
685
- $badge-success-bg-color-darken: mapcolorvariable('badge-success-bg-color-darken') !default;
686
- $badge-danger-bg-color-darken: mapcolorvariable('badge-danger-bg-color-darken') !default;
687
- $badge-warning-bg-color-darken: mapcolorvariable('badge-warning-bg-color-darken') !default;
688
- $badge-info-bg-color-darken: mapcolorvariable('badge-info-bg-color-darken') !default;
689
- $badge-light-bg-color-darken: mapcolorvariable('badge-light-bg-color-darken') !default;
690
- $badge-dark-bg-color-darken: mapcolorvariable('badge-dark-bg-color-darken') !default;
691
-
692
- //breadcrumb
693
- $breadcrumb-item-hover-color: mapcolorvariable('breadcrumb-item-hover-color') !default;
694
- $breadcrumb-item-active-color: mapcolorvariable('breadcrumb-item-active-color') !default;
695
- $breadcrumb-item-focus-border-color: mapcolorvariable('breadcrumb-item-focus-border-color') !default;
696
-
697
- //tab
698
- $tab-alt-wrap-hover-color: mapcolorvariable('tab-alt-wrap-hover-color') !default;
699
-
700
- //treeview
701
- $treeview-item-active-hover-bg: mapcolorvariable('treeview-item-active-hover-bg') !default;
702
-
703
- //document editor
704
- $de-style-btn-bg-color: mapcolorvariable('de-style-btn-bg-color') !default;
705
- $de-toggle-border-color: mapcolorvariable('de-toggle-border-color') !default;
706
- $de-toggle-hover-color: mapcolorvariable('de-toggle-hover-color') !default;
707
- $de-toggle-border-hover-color: mapcolorvariable('de-toggle-border-hover-color') !default;
708
- $de-toggle-disabled-color: mapcolorvariable('de-toggle-disabled-color') !default;
709
- $connector-point-hover-color: mapcolorvariable('connector-point-hover-color') !default;
710
- $gantt-connected-task: mapcolorvariable('gantt-connected-task') !default;
711
- $gantt-active-parent-task: mapcolorvariable('gantt-active-parent-task') !default;
712
- $timepicker-active-border-color: mapcolorvariable('timepicker-active-border-color') !default;
713
- $hdr-selection-border-color: mapcolorvariable('hdr-selection-border-color') !default;
714
-
715
- $primary-dark: mapcolorvariable('primary-dark') !default;
716
- $primary-darker: mapcolorvariable('primary-darker') !default;
717
- $flyout-text-color-disabled: mapcolorvariable('flyout-text-color-disabled') !default;
718
- $close-icon-color: mapcolorvariable('close-icon-color') !default;
719
- $close-icon-color-hover: mapcolorvariable('close-icon-color-hover') !default;
720
- $close-icon-color-pressed: mapcolorvariable('close-icon-color-pressed') !default;
721
- $close-icon-color-disabled: mapcolorvariable('close-icon-color-disabled') !default;
722
-
723
- //badge
724
- $badge-light-bg-color: mapcolorvariable('badge-light-bg-color') !default;
725
- $badge-light-border-color: mapcolorvariable('badge-light-border-color') !default;
726
- $badge-light-text-color: mapcolorvariable('badge-light-text-color') !default;
727
- $badge-dark-bg-color: mapcolorvariable('badge-dark-bg-color') !default;
728
- $badge-dark-border-color: mapcolorvariable('badge-dark-border-color') !default;
729
- $badge-dark-text-color: mapcolorvariable('badge-dark-text-color') !default;
730
-
731
- $tab-border: mapcolorvariable('tab-border') !default;
732
- $stepper: mapcolorvariable('stepper') !default;
733
-
734
- $primary-shadow: mapcolorvariable('primary-shadow') !default;
735
- $secondary-shadow: mapcolorvariable('secondary-shadow') !default;
736
- $success-shadow: mapcolorvariable('success-shadow') !default;
737
- $danger-shadow: mapcolorvariable('danger-shadow') !default;
738
- $info-shadow: mapcolorvariable('info-shadow') !default;
739
- $warning-shadow: mapcolorvariable('warning-shadow') !default;
740
-
741
- $shadow-color: mapcolorvariable('shadow-color') !default;
742
- $shadow-color1: mapcolorvariable('shadow-color1') !default;
743
-
744
- // black
745
- $black: mapcolorvariable('black') !default;
746
-
747
- // White
748
- $white: mapcolorvariable('white') !default;
749
-
750
- // Transparent
751
- $transparent: transparent;
752
-
753
- // scss-docs-start gray-color-variables
754
- $gray-100: #f8f9fa !default;
755
- $gray-200: #e9ecef !default;
756
- $gray-300: #dee2e6 !default;
757
- $gray-400: #ced4da !default;
758
- $gray-500: #adb5bd !default;
759
- $gray-600: #6c757d !default;
760
- $gray-700: #495057 !default;
761
- $gray-800: #343a40 !default;
762
- $gray-900: #212529 !default;
763
-
764
- // scss-docs-start color-variables
765
- $blue: #0d6efd !default;
766
- $indigo: #6610f2 !default;
767
- $purple: #6f42c1 !default;
768
- $pink: #d63384 !default;
769
- $red: #dc3545 !default;
770
- $orange: #fd7e14 !default;
771
- $yellow: #ffc107 !default;
772
- $green: #198754 !default;
773
- $teal: #20c997 !default;
774
- $cyan: #0dcaf0 !default;
775
-
776
- $primary: $primary !default;
777
- $secondary: $secondary !default;
778
- $success: $success !default;
779
- $info: $info !default;
780
- $warning: $warning !default;
781
- $danger: $danger !default;
782
- $success-light: $success-light !default;
783
- $info-light: $info-light !default;
784
- $warning-light: $warning-light !default;
785
- $danger-light: $danger-light !default;
786
- $primary-text-color: $primary-text-color !default;
787
- $primary-light: $primary-light !default;
788
- $primary-lighter: $primary-lighter !default;
789
- $success-dark: $success-dark !default;
790
- $info-dark: $info-dark !default;
791
- $warning-dark: $warning-dark !default;
792
- $danger-dark: $danger-dark !default;
793
- $success-light-alt: $success-light-alt !default;
794
- $info-light-alt: $info-light-alt !default;
795
- $warning-light-alt: $warning-light-alt !default;
796
- $danger-light-alt: $danger-light-alt !default;
797
-
798
- // backgroundcolor
799
- $content-bg-color: $content-bg-color !default;
800
- $content-bg-color-alt1: $content-bg-color-alt1 !default;
801
- $content-bg-color-alt2: $content-bg-color-alt2 !default;
802
- $content-bg-color-alt3: $content-bg-color-alt3 !default;
803
- $content-bg-color-alt4: $content-bg-color-alt4 !default;
804
- $content-bg-color-alt5: $content-bg-color-alt5 !default;
805
- $content-bg-color-hover: $content-bg-color-hover !default;
806
- $content-bg-color-pressed: $content-bg-color-pressed !default;
807
- $content-bg-color-focus: $content-bg-color-focus !default;
808
- $content-bg-color-selected: $content-bg-color-selected !default;
809
- $content-bg-color-dragged: $content-bg-color-dragged !default;
810
- $content-bg-color-disabled: $content-bg-color-disabled !default;
811
- $flyout-bg-color: $flyout-bg-color !default;
812
- $flyout-bg-color-hover: $flyout-bg-color-hover !default;
813
- $flyout-bg-color-pressed: $flyout-bg-color-pressed !default;
814
- $flyout-bg-color-focus: $flyout-bg-color-focus !default;
815
- $overlay-bg-color: rgba($black, .4) !default;
816
- $table-bg-color-hover: $table-bg-color-hover !default;
817
- $table-bg-color-pressed: $table-bg-color-pressed !default;
818
- $table-bg-color-selected: $table-bg-color-selected !default;
819
-
820
- // all theme common color
821
- $colorpicker-gradient-1: #f00 !default;
822
- $colorpicker-gradient-2: #ff0 !default;
823
- $ccolorpicker-gradient-3: #0f0 !default;
824
- $colorpicker-gradient-4: #0ff !default;
825
- $colorpicker-gradient-5: #00f !default;
826
- $colorpicker-gradient-6: #f0f !default;
827
- $colorpicker-gradient-7: #ff0004 !default;
828
- $spreadsheet-selection-1: #673ab8 !default;
829
- $spreadsheet-selection-2: #9c27b0 !default;
830
- $spreadsheet-selection-3: #029688 !default;
831
- $spreadsheet-selection-4: #4caf51 !default;
832
- $spreadsheet-selection-5: #fe9800 !default;
833
- $spreadsheet-selection-6: #3f52b5 !default;
834
-
835
- // text-color
836
- $content-text-color: $content-text-color !default;
837
- $content-text-color-alt1: $content-text-color-alt1 !default;
838
- $content-text-color-alt2: $content-text-color-alt2 !default;
839
- $content-text-color-alt3: $content-text-color-alt3 !default;
840
- $content-text-color-hover: $content-text-color-hover !default;
841
- $content-text-color-pressed: $content-text-color-pressed !default;
842
- $content-text-color-focus: $content-text-color-focus !default;
843
- $content-text-color-selected: $content-text-color-selected !default;
844
- $content-text-color-dragged: $content-text-color-dragged !default;
845
- $content-text-color-disabled: $content-text-color-disabled !default;
846
- $placeholder-text-color: $placeholder-text-color !default;
847
- $flyout-text-color: $flyout-text-color !default;
848
- $flyout-text-color-hover: $flyout-text-color-hover !default;
849
- $flyout-text-color-pressed: $flyout-text-color-pressed !default;
850
- $flyout-text-color-focus: $flyout-text-color-focus !default;
851
- $table-text-color-hover: $table-text-color-hover !default;
852
- $table-text-color-pressed: $table-text-color-pressed !default;
853
- $table-text-color-selected: $table-text-color-selected !default;
854
-
855
- // icon-color
856
- $icon-color: $icon-color !default;
857
- $icon-color-hover: $icon-color-hover !default;
858
- $icon-color-pressed: $icon-color-pressed !default;
859
- $icon-color-disabled: $icon-color-disabled !default;
860
-
861
- // close-icon-color
862
- $close-icon-color: $close-icon-color !default;
863
- $close-icon-color-hover: $close-icon-color-hover !default;
864
- $close-icon-color-pressed: $close-icon-color-pressed !default;
865
- $close-icon-color-disabled: $close-icon-color-disabled !default;
866
-
867
- // border-color
868
- $border-light: $border-light !default;
869
- $border: $border !default;
870
- $border-dark: $border-dark !default;
871
- $border-hover: $border-hover !default;
872
- $border-pressed: $border-pressed !default;
873
- $border-focus: $border-focus !default;
874
- $border-selected: $border-selected !default;
875
- $border-dragged: $border-dragged !default;
876
- $border-disabled: $border-disabled !default;
877
- $border-warning: $border-warning !default;
878
- $border-error: $border-error !default;
879
- $border-success: $border-success !default;
880
- $spreadsheet-gridline: $spreadsheet-gridline !default;
881
- $flyout-border: $flyout-border !default;
882
-
883
- // Tooltip
884
- $tooltip-bg-color: $tooltip-bg-color !default;
885
- $tooltip-border: $tooltip-border !default;
886
- $tooltip-text-color: $tooltip-text-color !default;
887
-
888
- // shadow
889
- $shadow: 0 .8px 16px rgba($black, .15) !default;
890
- $shadow-sm: 0 2px 4px rgba($black, .075) !default;
891
- $shadow-md: 0 8px 12px rgba($black, .15) !default;
892
- $shadow-lg: 0 16px 48px rgba($black, .175) !default;
893
- $shadow-xl: 0 20px 25px -5px rgba($black, .1), 0 10px 10px -5px rgba($black, .04) !default;
894
- $shadow-2xl: 0 25px 50px -12px rgba($black, .25) !default;
895
- $shadow-inner: inset 0 1px 2px rgba($black, .075) !default;
896
- $shadow-none: 0 0 rgba($black, 0) !default;
897
- $shadow-focus-ring1: 0 0 0 4px rgba($primary-shadow, .25) !default;
898
- $shadow-focus-ring2: 0 0 0 4px rgba($primary-shadow, .25) !default;
899
- $primary-shadow-focus: 0 0 0 4px rgba($primary-shadow, .5) !default;
900
- $secondary-shadow-focus: 0 0 0 4px rgba($secondary-shadow, .5) !default;
901
- $success-shadow-focus: 0 0 0 4px rgba($success-shadow, .5) !default;
902
- $danger-shadow-focus: 0 0 0 4px rgba($danger-shadow, .5) !default;
903
- $info-shadow-focus: 0 0 0 4px rgba($info-shadow, .5) !default;
904
- $warning-shadow-focus: 0 0 0 4px rgba($warning-shadow, .5) !default;
905
- $keyboard-focus-shadow: inset 0 0 0 1px $shadow-color, inset 0 0 0 2px $shadow-color1 !default;
906
-
907
- // fontfamily
908
- $font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', arial, 'Noto Sans', 'Liberation Sans', sans-serif, 'apple color emoji', 'Segoe UI emoji', 'Segoe UI Symbol', 'Noto color emoji' !default;
909
-
910
- // default font Size
911
- $text-xxs: 10px !default;
912
- $text-xs: 12px !default;
913
- $text-sm: 14px !default;
914
- $text-base: 16px !default;
915
- $text-lg: 18px !default;
916
- $text-xl: 20px !default;
917
- $text-2xl: 24px !default;
918
- $text-3xl: 30px !default;
919
- $text-4xl: 36px !default;
920
- $text-5xl: 48px !default;
921
- $text-6xl: 60px !default;
922
- $text-7xl: 72px !default;
923
- $text-8xl: 96px !default;
924
- $text-9xl: 128px !default;
925
-
926
- // heading
927
- $h1-font-size: 40px !default;
928
- $h2-font-size: 32px !default;
929
- $h3-font-size: 28px !default;
930
- $h4-font-size: $text-2xl !default;
931
- $h5-font-size: $text-xl !default;
932
- $h6-font-size: $text-base !default;
933
-
934
- // display
935
-
936
- // Line height
937
- $leading-none: 1 !default;
938
- $leading-tight: 1.25 !default;
939
- $leading-snug: 1.375 !default;
940
- $leading-normal: 1.5 !default;
941
- $leading-relaxed: 1.625 !default;
942
- $leading-loose: 2 !default;
943
-
944
- // font Weight
945
- $font-weight: 400 !default;
946
- $font-weight-lighter: lighter !default;
947
- $font-weight-light: 300 !default;
948
- $font-weight-normal: 400 !default;
949
- $font-weight-medium: 500 !default;
950
- $font-weight-bold: 700 !default;
951
- $font-weight-bolder: bolder !default;
952
-
953
- // Secondary-button
954
- $secondary-bg-color: $secondary-bg-color !default;
955
- $secondary-border-color: $secondary-border-color !default;
956
- $secondary-text-color: $secondary-text-color !default;
957
- $secondary-bg-color-hover: $secondary-bg-color-hover !default;
958
- $secondary-border-color-hover: $secondary-border-color-hover !default;
959
- $secondary-text-color-hover: $secondary-text-color-hover !default;
960
- $secondary-bg-color-pressed: $secondary-bg-color-pressed !default;
961
- $secondary-border-color-pressed: $secondary-border-color-pressed !default;
962
- $secondary-text-color-pressed: $secondary-text-color-pressed !default;
963
- $secondary-bg-color-focus: $secondary-bg-color-focus !default;
964
- $secondary-border-color-focus: $secondary-border-color-focus !default;
965
- $secondary-text-color-focus: $secondary-text-color-focus !default;
966
- $secondary-bg-color-disabled: $secondary-bg-color-disabled !default;
967
- $secondary-border-color-disabled: $secondary-bg-color-disabled !default;
968
- $secondary-text-color-disabled: rgba($secondary-text-color, .65) !default;
969
-
970
- // Primary-button
971
-
972
- $primary-bg-color: rgba($primary-bg-color, 1) !default;
973
- $primary-border-color: $primary-border-color !default;
974
- $primary-text: $primary-text !default;
975
- $primary-bg-color-hover: $primary-bg-color-hover !default;
976
- $primary-border-color-hover: $primary-border-color-hover !default;
977
- $primary-text-hover: $primary-text-hover !default;
978
- $primary-bg-color-pressed: $primary-bg-color-pressed !default;
979
- $primary-border-color-pressed: $primary-border-color-pressed !default;
980
- $primary-text-pressed: $primary-text-pressed !default;
981
- $primary-bg-color-focus: $primary-bg-color-focus !default;
982
- $primary-border-color-focus: $primary-border-color-focus !default;
983
- $primary-text-focus: $primary-text-focus !default;
984
- $primary-bg-color-disabled: $primary-bg-color-disabled !default;
985
- $primary-border-color-disabled: $primary-border-color-disabled !default;
986
- $primary-text-disabled: $primary-text-disabled !default;
987
-
988
- // Success-button
989
- $success-bg-color: rgba($success-bg-color, 1) !default;
990
- $success-border-color: $success-border-color !default;
991
- $success-text: $success-text !default;
992
- $success-bg-color-hover: $success-bg-color-hover !default;
993
- $success-border-color-hover: $success-border-color-hover !default;
994
- $success-text-hover: $success-text-hover !default;
995
- $success-bg-color-pressed: $success-bg-color-pressed !default;
996
- $success-border-color-pressed: $success-border-color-pressed !default;
997
- $success-text-pressed: $success-text-pressed !default;
998
- $success-bg-color-focus: $success-bg-color-focus !default;
999
- $success-border-color-focus: $success-border-color-focus !default;
1000
- $success-text-focus: $success-text-focus !default;
1001
- $success-bg-color-disabled: $success-bg-color-disabled !default;
1002
- $success-border-color-disabled: $success-border-color-disabled !default;
1003
- $success-text-disabled: $success-text-disabled !default;
1004
-
1005
- // Warning-button
1006
- $warning-bg-color: rgba($warning-bg-color, 1) !default;
1007
- $warning-border-color: $warning-border-color !default;
1008
- $warning-text: $warning-text !default;
1009
- $warning-bg-color-hover: $warning-bg-color-hover !default;
1010
- $warning-border-color-hover: $warning-border-color-hover !default;
1011
- $warning-text-hover: $warning-text-hover !default;
1012
- $warning-bg-color-pressed: $warning-bg-color-pressed !default;
1013
- $warning-border-color-pressed: $warning-border-color-pressed !default;
1014
- $warning-text-pressed: $warning-text-pressed !default;
1015
- $warning-bg-color-focus: $warning-bg-color-focus !default;
1016
- $warning-border-color-focus: $warning-border-color-focus !default;
1017
- $warning-text-focus: $warning-text-focus !default;
1018
- $warning-bg-color-disabled: $warning-bg-color-disabled !default;
1019
- $warning-border-color-disabled: $warning-border-color-disabled !default;
1020
- $warning-text-disabled: $warning-text-disabled !default;
1021
-
1022
- // Info-button
1023
- $info-bg-color: rgba($info-bg-color, 1) !default;
1024
- $info-border-color: $info-border-color !default;
1025
- $info-text: $info-text !default;
1026
- $info-bg-color-hover: $info-bg-color-hover !default;
1027
- $info-border-color-hover: $info-border-color-hover !default;
1028
- $info-text-hover: $info-text-hover !default;
1029
- $info-bg-color-pressed: $info-bg-color-pressed !default;
1030
- $info-border-color-pressed: $info-border-color-pressed !default;
1031
- $info-text-pressed: $info-text-pressed !default;
1032
- $info-bg-color-focus: $info-bg-color-focus !default;
1033
- $info-border-color-focus: $info-border-color-focus !default;
1034
- $info-text-focus: $info-text-focus !default;
1035
- $info-bg-color-disabled: $info-bg-color-disabled !default;
1036
- $info-border-color-disabled: $info-border-color-disabled !default;
1037
- $info-text-disabled: $info-text-disabled !default;
1038
-
1039
- // danger-button
1040
- $danger-bg-color: rgba($danger-bg-color, 1) !default;
1041
- $danger-border-color: $danger-border-color !default;
1042
- $danger-text: $danger-text !default;
1043
- $danger-bg-color-hover: $danger-bg-color-hover !default;
1044
- $danger-border-color-hover: $danger-border-color-hover !default;
1045
- $danger-text-hover: $danger-text-hover !default;
1046
- $danger-bg-color-pressed: $danger-bg-color-pressed !default;
1047
- $danger-border-color-pressed: $danger-border-color-pressed !default;
1048
- $danger-text-pressed: $danger-text-pressed !default;
1049
- $danger-bg-color-focus: $danger-bg-color-focus !default;
1050
- $danger-border-color-focus: $danger-border-color-focus !default;
1051
- $danger-text-focus: $danger-text-focus !default;
1052
- $danger-bg-color-disabled: $danger-bg-color-disabled !default;
1053
- $danger-border-color-disabled: $danger-border-color-disabled !default;
1054
- $danger-text-disabled: $danger-text-disabled !default;
1055
-
1056
- //Outline button
1057
- $primary-outline: $primary-outline !default;
1058
- $secondary-outline: $secondary-outline !default;
1059
- $warning-outline: $warning-outline !default;
1060
- $danger-outline: $danger-outline !default;
1061
- $success-outline: $success-outline !default;
1062
- $info-outline: $info-outline !default;
1063
-
1064
- // chart series
1065
- $series-1: #e9ecef;
1066
- $series-2: #dee2e6;
1067
- $series-3: #ced4da;
1068
- $series-4: $gray-800;
1069
- $series-5: #1f2937;
1070
- $series-6: #5e6e22;
1071
- $series-7: #978a2b;
1072
- $series-8: #6a4314;
1073
- $series-9: #52236c;
1074
- $series-10: #3a6b6f;
1075
- $series-11: #d64f56;
1076
- $series-12: #f3a93c;
1077
- $skin-name: 'bootstrap5.3' !default;
1078
- $theme-name: 'bootstrap5.3-dark' !default;
1079
-
1080
- //diagram Palette color
1081
- $diagram-palette-background: $diagram-palette-background !default;
1082
- $diagram-palette-hover-background: $diagram-palette-hover-background !default;
1083
-
1084
- //Message component
1085
-
1086
- //Message component
1087
-
1088
- //Message default
1089
- $msg-color: $msg-color !default;
1090
- $msg-bg-color: $msg-bg-color !default;
1091
- $msg-border-color: $msg-border-color !default;
1092
- $msg-color-alt1: $msg-color-alt1 !default;
1093
- $msg-bg-color-alt1: $msg-bg-color-alt1 !default;
1094
- $msg-border-color-alt1: $msg-border-color-alt1 !default;
1095
- $msg-color-alt2: $msg-color-alt2 !default;
1096
- $msg-bg-color-alt2: $msg-bg-color-alt2 !default;
1097
- $msg-border-color-alt2: $msg-border-color-alt2 !default;
1098
- $msg-icon-color: $msg-icon-color !default;
1099
- $msg-icon-color-alt1: $msg-icon-color-alt1 !default;
1100
- $msg-icon-color-alt2: $msg-icon-color-alt2 !default;
1101
-
1102
- $msg-close-icon-color: $msg-close-icon-color !default;
1103
- $msg-close-icon-color-alt1: $msg-close-icon-color-alt21 !default;
1104
- $msg-close-icon-color-alt2: $msg-close-icon-color-alt2 !default;
1105
-
1106
- //Message success
1107
- $msg-success-color: $msg-success-color !default;
1108
- $msg-success-bg-color: $msg-success-bg-color !default;
1109
- $msg-success-border-color: $msg-success-border-color !default;
1110
- $msg-success-color-alt1: $msg-success-color-alt1 !default;
1111
- $msg-success-bg-color-alt1: $msg-success-bg-color-alt1 !default;
1112
- $msg-success-border-color-alt1: $msg-success-border-color-alt1 !default;
1113
- $msg-success-color-alt2: $msg-success-color-alt2 !default;
1114
- $msg-success-bg-color-alt2: $msg-success-bg-color-alt2 !default;
1115
- $msg-success-border-color-alt2: $msg-success-border-color-alt2 !default;
1116
- $msg-success-icon-color: $msg-success-icon-color !default;
1117
- $msg-success-icon-color-alt1: $msg-success-icon-color-alt1 !default;
1118
- $msg-success-icon-color-alt2: $msg-success-icon-color-alt2 !default;
1119
- $msg-success-close-icon-color: $msg-success-close-icon-color !default;
1120
- $msg-success-close-icon-color-alt1: $msg-success-close-icon-color-alt1 !default;
1121
- $msg-success-close-icon-color-alt2: $msg-success-close-icon-color-alt2 !default;
1122
-
1123
- //Message danger
1124
- $msg-danger-color: $msg-danger-color !default;
1125
- $msg-danger-bg-color: $msg-danger-bg-color !default;
1126
- $msg-danger-border-color: $msg-danger-border-color !default;
1127
- $msg-danger-color-alt1: $msg-danger-color-alt1 !default;
1128
- $msg-danger-bg-color-alt1: $msg-danger-bg-color-alt1 !default;
1129
- $msg-danger-border-color-alt1: $msg-danger-border-color-alt1 !default;
1130
- $msg-danger-color-alt2: $msg-danger-color-alt2 !default;
1131
- $msg-danger-bg-color-alt2: $msg-danger-bg-color-alt2 !default;
1132
- $msg-danger-border-color-alt2: $msg-danger-border-color-alt2 !default;
1133
- $msg-danger-icon-color: $msg-danger-icon-color !default;
1134
- $msg-danger-icon-color-alt1: $msg-danger-icon-color-alt1 !default;
1135
- $msg-danger-icon-color-alt2: $msg-danger-icon-color-alt2 !default;
1136
- $msg-danger-close-icon-color: $msg-danger-close-icon-color !default;
1137
- $msg-danger-close-icon-color-alt1: $msg-danger-close-icon-color-alt1 !default;
1138
- $msg-danger-close-icon-color-alt2: $msg-danger-close-icon-color-alt2 !default;
1139
-
1140
- //Message Info
1141
- $msg-info-color: $msg-info-color !default;
1142
- $msg-info-bg-color: $msg-info-bg-color !default;
1143
- $msg-info-border-color: $msg-info-border-color !default;
1144
- $msg-info-color-alt1: $msg-info-color-alt1 !default;
1145
- $msg-info-bg-color-alt1: $msg-info-bg-color-alt1 !default;
1146
- $msg-info-border-color-alt1: $msg-info-border-color-alt1 !default;
1147
- $msg-info-color-alt2: $msg-info-color-alt2 !default;
1148
- $msg-info-bg-color-alt2: $msg-info-bg-color-alt2 !default;
1149
- $msg-info-border-color-alt2: $msg-info-border-color-alt2 !default;
1150
- $msg-info-icon-color: $msg-info-icon-color !default;
1151
- $msg-info-icon-color-alt1: $msg-info-icon-color-alt1 !default;
1152
- $msg-info-icon-color-alt2: $msg-info-icon-color-alt2 !default;
1153
- $msg-info-close-icon-color: $msg-info-close-icon-color !default;
1154
- $msg-info-close-icon-color-alt1: $msg-info-close-icon-color-alt1 !default;
1155
- $msg-info-close-icon-color-alt2: $msg-info-close-icon-color-alt2 !default;
1156
-
1157
- //Message Warning
1158
- $msg-warning-color: $msg-warning-color !default;
1159
- $msg-warning-bg-color: $msg-warning-bg-color !default;
1160
- $msg-warning-border-color: $msg-warning-border-color !default;
1161
- $msg-warning-color-alt1: $msg-warning-color-alt1 !default;
1162
- $msg-warning-bg-color-alt1: $msg-warning-bg-color-alt1 !default;
1163
- $msg-warning-border-color-alt1: $msg-warning-border-color-alt1 !default;
1164
- $msg-warning-color-alt2: $msg-warning-color-alt2 !default;
1165
- $msg-warning-bg-color-alt2: $msg-warning-bg-color-alt2 !default;
1166
- $msg-warning-border-color-alt2: $msg-warning-border-color-alt2 !default;
1167
- $msg-warning-icon-color: $msg-warning-icon-color !default;
1168
- $msg-warning-icon-color-alt1: $msg-warning-icon-color-alt1 !default;
1169
- $msg-warning-icon-color-alt2: $msg-warning-icon-color-alt2 !default;
1170
- $msg-warning-close-icon-color: $msg-warning-close-icon-color !default;
1171
- $msg-warning-close-icon-color-alt1: $msg-warning-close-icon-color-alt1 !default;
1172
- $msg-warning-close-icon-color-alt2: $msg-warning-close-icon-color-alt2 !default;
1173
-
1174
- //app bar
1175
- //Light
1176
- $appbar-bg-color-alt1: $appbar-bg-color-alt1 !default;
1177
- $appbar-color-alt1: $appbar-color-alt1 !default;
1178
- $appbar-border-color-alt1: $appbar-border-color-alt1 !default;
1179
- $appbar-hover-bg-color-alt1: $appbar-hover-bg-color-alt1 !default;
1180
-
1181
- //dark
1182
- $appbar-bg-color-alt2: $appbar-bg-color-alt2 !default;
1183
- $appbar-color-alt2: $appbar-color-alt2 !default;
1184
- $appbar-border-color-alt2: $appbar-border-color-alt2 !default;
1185
- $appbar-hover-bg-color-alt2: $appbar-hover-bg-color-alt2 !default;
1186
-
1187
- //shadow
1188
- $appbar-bottom-shadow: none !default;
1189
- $appbar-top-shadow: none !default;
1190
-
1191
- //rating
1192
- $rating-selected-color: $rating-selected-color !default;
1193
- $rating-unrated-color: $rating-unrated-color !default;
1194
- $rating-selected-disabled-color: $rating-selected-disabled-color !default;
1195
- $rating-unrated-disabled-color: $rating-unrated-disabled-color !default;
1196
- $rating-selected-hover-color: $rating-selected-hover-color !default;
1197
- $rating-unrated-hover-color: $rating-unrated-hover-color !default;
1198
- $rating-pressed-color: $rating-pressed-color !default;
1199
-
1200
- //font-icons
1201
- $font-icon-8: 8px !default;
1202
- $font-icon-9: 9px !default;
1203
- $font-icon-10: 10px !default;
1204
- $font-icon-12: 12px !default;
1205
- $font-icon-13: 13px !default;
1206
- $font-icon-14: 14px !default;
1207
- $font-icon-15: 15px !default;
1208
- $font-icon-16: 16px !default;
1209
- $font-icon-17: 17px !default;
1210
- $font-icon-18: 18px !default;
1211
- $font-icon-20: 20px !default;
1212
- $font-icon-22: 22px !default;
1213
- $font-icon-24: 24px !default;
1214
- $font-icon-26: 26px !default;
1215
- $font-icon-28: 28px !default;
1216
- $font-icon-32: 32px !default;
1217
- $accordion-text-active-color: $primary-darker !default;
1218
-
1219
- //badge
1220
- $badge-light-bg-color: $badge-light-bg-color;
1221
- $badge-light-border-color: $badge-light-border-color;
1222
- $badge-light-text-color: $badge-light-text-color;
1223
- $badge-dark-bg-color: $badge-dark-bg-color;
1224
- $badge-dark-border-color: $badge-dark-border-color;
1225
- $badge-dark-text-color: $badge-dark-text-color;
1226
-
1227
- $tab-border: $tab-border;
1228
- $stepper:$stepper;
1229
-
1230
- //frozen
1231
- $frozen-shadow: rgba(0, 0, 0, .25) !default;
1232
- $frozen-shadow-2: rgba(0, 0, 0, .25) !default;
1
+ @import '../common/mixin.scss';
2
+
3
+ :root {
4
+ --color-sf-content-bg-color: #212529;
5
+ --color-sf-content-bg-color-alt1: #282d31;
6
+ --color-sf-content-bg-color-alt2: #343a40;
7
+ --color-sf-content-bg-color-alt3: #dee2e6;
8
+ --color-sf-content-bg-color-alt4: #6c757d;
9
+ --color-sf-content-bg-color-alt5: #adb5bd;
10
+ --color-sf-content-bg-color-hover: #31373d;
11
+ --color-sf-content-bg-color-pressed: var(--color-sf-content-bg-color-alt3);
12
+ --color-sf-content-bg-color-focus: var(--color-sf-content-bg-color-hover);
13
+ --color-sf-content-bg-color-selected: #0d6efd;
14
+ --color-sf-content-bg-color-dragged: #343a40;
15
+ --color-sf-content-bg-color-disabled: var(--color-sf-content-bg-color);
16
+ --color-sf-flyout-bg-color: #343a40;
17
+ --color-sf-flyout-bg-color-hover: #444c54;
18
+ --color-sf-flyout-bg-color-pressed: #0d6efd;
19
+ --color-sf-flyout-bg-color-focus: #444c54;
20
+ --color-sf-overlay-bg-color: rgba(#000000, .4);
21
+ --color-sf-table-bg-color-hover: var(--color-sf-content-bg-color-hover);
22
+ --color-sf-table-bg-color-pressed: var(--color-sf-content-bg-color-pressed);
23
+ --color-sf-table-bg-color-selected: #3c444b;
24
+
25
+ // text-color
26
+ --color-sf-content-text-color: #ffffff;
27
+ --color-sf-content-text-color-alt1: #e9ecef;
28
+ --color-sf-content-text-color-alt2: #ced4da;
29
+ --color-sf-content-text-color-alt3: #7b848d;
30
+ --color-sf-content-text-color-hover: var(--color-sf-content-text-color);
31
+ --color-sf-content-text-color-pressed: var(--color-sf-content-text-color);
32
+ --color-sf-content-text-color-focus: var(--color-sf-content-text-color);
33
+ --color-sf-content-text-color-selected: var(--color-sf-primary-text-color);
34
+ --color-sf-content-text-color-dragged: var(--color-sf-content-text-color);
35
+ --color-sf-content-text-color-disabled: #6c757d;
36
+ --color-sf-placeholder-text-color: #6c757d;
37
+ --color-sf-flyout-text-color: var(--color-sf-content-text-color);
38
+ --color-sf-flyout-text-color-hover: var(--color-sf-content-text-color);
39
+ --color-sf-flyout-text-color-pressed: var(--color-sf-primary-text-color);
40
+ --color-sf-flyout-text-color-focus: var(--color-sf-content-text-color);
41
+ --color-sf-table-text-color-hover: var(--color-sf-content-text-color);
42
+ --color-sf-table-text-color-pressed: var(--color-sf-content-text-color);
43
+ --color-sf-table-text-color-selected: var(--color-sf-content-text-color);
44
+
45
+ // icon-color
46
+ --color-sf-icon-color: #adb5bd;
47
+ --color-sf-icon-color-hover: #dee2e6;
48
+ --color-sf-icon-color-pressed: #f8f9fa;
49
+ --color-sf-icon-color-disabled: #adb5bd;
50
+
51
+ // border-color
52
+ --color-sf-border-light: #495057;
53
+ --color-sf-border: #6c757d;
54
+ --color-sf-border-dark: #adb5bd;
55
+ --color-sf-border-hover: #495057;
56
+ --color-sf-border-pressed: #6c757d;
57
+ --color-sf-border-focus: var(--color-sf-border-hover);
58
+ --color-sf-border-selected: var(--color-sf-border);
59
+ --color-sf-border-dragged: var(--color-sf-border);
60
+ --color-sf-border-disabled: var(--color-sf-border-light);
61
+ --color-sf-border-warning: #ffca2b;
62
+ --color-sf-border-error: #eb8c95;
63
+ --color-sf-border-success: #2ed889;
64
+ --color-sf-spreadsheet-gridline: #dee2e6;
65
+ --color-sf-flyout-border: var(--color-sf-border-hover);
66
+
67
+ //sf Variables
68
+ --color-sf-primary: #0d6efd;
69
+ --color-sf-primary-text-color: #ffffff;
70
+ --color-sf-primary-light: #86b7fe;
71
+ --color-sf-primary-lighter: #031633;
72
+ --color-sf-secondary: #6c757d;
73
+ --color-sf-success: #21b26f;
74
+ --color-sf-info: #0dcaf0;
75
+ --color-sf-warning: #ffc107;
76
+ --color-sf-danger: #e4606d;
77
+ --color-sf-success-light: #d1e7dd;
78
+ --color-sf-info-light: #cff4fc;
79
+ --color-sf-warning-light: #fff3cd;
80
+ --color-sf-danger-light: #f8d7da;
81
+ --color-sf-success-dark: #115c39;
82
+ --color-sf-info-dark: #066477;
83
+ --color-sf-warning-dark: #866500;
84
+ --color-sf-danger-dark: #bd2130;
85
+ --color-sf-success-light-alt: #09311e;
86
+ --color-sf-info-light-alt: #066477;
87
+ --color-sf-warning-light-alt: #a07e00;
88
+ --color-sf-danger-light-alt: #7c151f;
89
+ --color-sf-badge-primary-bg-color-darken: darken($primary, 10%);
90
+ --color-sf-badge-secondary-bg-color-darken: darken($content-bg-color-alt1, 10%);
91
+ --color-sf-badge-success-bg-color-darken: darken($success-light, 10%);
92
+ --color-sf-badge-danger-bg-color-darken: darken($danger-light, 10%);
93
+ --color-sf-badge-warning-bg-color-darken: darken($warning-light, 10%);
94
+ --color-sf-badge-info-bg-color-darken: darken($info-light, 10%);
95
+ --color-sf-badge-light-bg-color-darken: darken($content-bg-color-alt2, 10%);
96
+ --color-sf-badge-dark-bg-color-darken: darken($content-text-color-alt2, 10%);
97
+ --color-sf-breadcrumb-item-hover-color: darken($primary-outline, 10%);
98
+ --color-sf-breadcrumb-item-active-color: darken($primary-outline, 15%);
99
+ --color-sf-breadcrumb-item-focus-border-color: darken($primary-outline, 10%);
100
+ --color-sf-calendar-yeardecade-selected-hover-bg: darken(primary-bg-color, 10%);
101
+ --color-sf-calendar-active-hover-bg-color: darken($primary-bg-color, 10%);
102
+ --color-sf-tab-alt-wrap-hover-color: darken($secondary, 15%);
103
+ --color-sf-treeview-item-active-hover-bg: darken($content-bg-color-selected, 5%);
104
+ --color-sf-de-style-btn-bg-color: darken($secondary-bg-color, 7.5%);
105
+ --color-sf-de-toggle-border-color: darken($secondary-bg-color, 12.5%);
106
+ --color-sf-de-toggle-hover-color: darken($secondary-bg-color, 7.5%);
107
+ --color-sf-de-toggle-border-hover-color: darken($secondary-bg-color, 10%);
108
+ --color-sf-de-toggle-disabled-color: lighten($secondary-bg-color, 65%);
109
+ --color-sf-connector-point-hover-color: darken($primary, 10%);
110
+ --color-sf-gantt-connected-task: lighten($primary, 20%);
111
+ --color-sf-gantt-active-parent-task: lighten($warning-text, 10%);
112
+ --color-sf-schedule-hover-bg-color: darken($content-bg-color-alt1, 2%);
113
+ --color-sf-timepicker-active-border-color: darken($gray-600, 10%);
114
+ --color-sf-hdr-selection-border-color: darken($border-light, 8%);
115
+
116
+ // Primary-button
117
+ --color-sf-primary-bg-color: var(--color-sf-primary);
118
+ --color-sf-primary-border-color: var(--color-sf-primary);
119
+ --color-sf-primary-text: var(--color-sf-primary-text-color);
120
+ --color-sf-primary-bg-color-hover: #0b5ed7;
121
+ --color-sf-primary-border-color-hover: #0a58ca;
122
+ --color-sf-primary-text-hover: var(--color-sf-primary-text-color);
123
+ --color-sf-primary-bg-color-pressed: #0a58ca;
124
+ --color-sf-primary-border-color-pressed: #0a53be;
125
+ --color-sf-primary-text-pressed: var(--color-sf-primary-text-color);
126
+ --color-sf-primary-bg-color-focus: var(--color-sf-primary-bg-color-hover);
127
+ --color-sf-primary-border-color-focus: var(--color-sf-primary-border-color-hover);
128
+ --color-sf-primary-text-focus: var(--color-sf-primary-text-hover);
129
+ --color-sf-primary-bg-color-disabled: rgba(13, 110, 253, .65);
130
+ --color-sf-primary-border-color-disabled: var(--color-sf-primary-bg-color-disabled);
131
+ --color-sf-primary-text-disabled: rgba(255, 255, 255, .65);
132
+
133
+ // Secondary-button
134
+ --color-sf-secondary-bg-color: var(--color-sf-secondary);
135
+ --color-sf-secondary-border-color: var(--color-sf-secondary-bg-color);
136
+ --color-sf-secondary-text-color: #ffffff;
137
+ --color-sf-secondary-bg-color-hover: #5c636a;
138
+ --color-sf-secondary-border-color-hover: #565e64;
139
+ --color-sf-secondary-text-color-hover: var(--color-sf-secondary-text-color);
140
+ --color-sf-secondary-bg-color-pressed: #565e64;
141
+ --color-sf-secondary-border-color-pressed: #51585e;
142
+ --color-sf-secondary-text-color-pressed: var(--color-sf-secondary-text-color);
143
+ --color-sf-secondary-bg-color-focus: var(--color-sf-secondary-bg-color-hover);
144
+ --color-sf-secondary-border-color-focus: var(--color-sf-secondary-border-color-hover);
145
+ --color-sf-secondary-text-color-focus: var(--color-sf-secondary-text-color-hover);
146
+ --color-sf-secondary-bg-color-disabled: rgba(108, 117, 125, .65);
147
+ --color-sf-secondary-border-color-disabled: var(--color-sf-secondary-bg-color-disabled);
148
+ --color-sf-secondary-text-color-disabled: rgba(255, 255, 255, .65);
149
+
150
+ // Success-button
151
+ --color-sf-success-bg-color: var(--color-sf-success);
152
+ --color-sf-success-border-color: var(--color-sf-success-bg-color);
153
+ --color-sf-success-text: #ffffff;
154
+ --color-sf-success-bg-color-hover: #157347;
155
+ --color-sf-success-border-color-hover: #146c43;
156
+ --color-sf-success-text-hover: var(--color-sf-success-text);
157
+ --color-sf-success-bg-color-pressed: #146c43;
158
+ --color-sf-success-border-color-pressed: #13653f;
159
+ --color-sf-success-text-pressed: var(--color-sf-success-text);
160
+ --color-sf-success-bg-color-focus: var(--color-sf-success-bg-color-hover);
161
+ --color-sf-success-border-color-focus: var(--color-sf-success-bg-color-focus);
162
+ --color-sf-success-text-focus: var(--color-sf-success-text);
163
+ --color-sf-success-bg-color-disabled: rgba(25, 135, 84, .65);
164
+ --color-sf-success-border-color-disabled: var(--color-sf-success-bg-color-disabled);
165
+ --color-sf-success-text-disabled: rgba(255, 255, 255, .65);
166
+
167
+ // Warning-button
168
+ --color-sf-warning-bg-color: var(--color-sf-warning);
169
+ --color-sf-warning-border-color: var(--color-sf-warning-bg-color);
170
+ --color-sf-warning-text: #000000;
171
+ --color-sf-warning-bg-color-hover: #ffca2c;
172
+ --color-sf-warning-border-color-hover: #ffc720;
173
+ --color-sf-warning-text-hover: var(--color-sf-warning-text);
174
+ --color-sf-warning-bg-color-pressed: #ffcd39;
175
+ --color-sf-warning-border-color-pressed: #ffc720;
176
+ --color-sf-warning-text-pressed: var(--color-sf-warning-text);
177
+ --color-sf-warning-bg-color-focus: var(--color-sf-warning-bg-color-hover);
178
+ --color-sf-warning-border-color-focus: var(--color-sf-warning-bg-color-focus);
179
+ --color-sf-warning-text-focus: var(--color-sf-warning-text);
180
+ --color-sf-warning-bg-color-disabled: rgba(255, 193, 7, .65);
181
+ --color-sf-warning-border-color-disabled: var(--color-sf-warning-bg-color-disabled);
182
+ --color-sf-warning-text-disabled: rgba(0, 0, 0, .65);
183
+
184
+ // Info-button
185
+ --color-sf-info-bg-color: var(--color-sf-info);
186
+ --color-sf-info-border-color: var(--color-sf-info-bg-color);
187
+ --color-sf-info-text: #000000;
188
+ --color-sf-info-bg-color-hover: #31d2f2;
189
+ --color-sf-info-border-color-hover: #25cff2;
190
+ --color-sf-info-text-hover: var(--color-sf-info-text);
191
+ --color-sf-info-bg-color-pressed: #3dd5f3;
192
+ --color-sf-info-border-color-pressed: #25cff2;
193
+ --color-sf-info-text-pressed: var(--color-sf-info-text);
194
+ --color-sf-info-bg-color-focus: var(--color-sf-info-bg-color-hover);
195
+ --color-sf-info-border-color-focus: var(--color-sf-info-bg-color-focus);
196
+ --color-sf-info-text-focus: var(--color-sf-info-text-hover);
197
+ --color-sf-info-bg-color-disabled: rgba(13, 202, 240, .65);
198
+ --color-sf-info-border-color-disabled: var(--color-sf-info-bg-color-disabled);
199
+ --color-sf-info-text-disabled: rgba(0, 0, 0, .65);
200
+
201
+ // danger-button
202
+ --color-sf-danger-bg-color: var(--color-sf-danger);
203
+ --color-sf-danger-border-color: var(--color-sf-danger-bg-color);
204
+ --color-sf-danger-text: #ffffff;
205
+ --color-sf-danger-bg-color-hover: #bb2d3b;
206
+ --color-sf-danger-border-color-hover: #b02a37;
207
+ --color-sf-danger-text-hover: var(--color-sf-danger-text);
208
+ --color-sf-danger-bg-color-pressed: #b02a37;
209
+ --color-sf-danger-border-color-pressed: #a52834;
210
+ --color-sf-danger-text-pressed: var(--color-sf-danger-text);
211
+ --color-sf-danger-bg-color-focus: var(--color-sf-danger-bg-color-hover);
212
+ --color-sf-danger-border-color-focus: var(--color-sf-danger-bg-color-focus);
213
+ --color-sf-danger-text-focus: var(--color-sf-danger-text-hover);
214
+ --color-sf-danger-bg-color-disabled: rgba(220, 53, 69, .65);
215
+ --color-sf-danger-border-color-disabled: var(--color-sf-danger-bg-color-disabled);
216
+ --color-sf-danger-text-disabled: rgba(255, 255, 255, .65);
217
+
218
+ //Outline button
219
+ --color-sf-primary-outline: #408cfd;
220
+ --color-sf-secondary-outline: #868e96;
221
+ --color-sf-warning-outline: #ffce3a;
222
+ --color-sf-danger-outline: #eb8c95;
223
+ --color-sf-success-outline: #2ed889;
224
+ --color-sf-info-outline: #3cd5f4;
225
+
226
+ // Tooltip
227
+ --color-sf-tooltip-bg-color: #e9ecef;
228
+ --color-sf-tooltip-border: var(--color-sf-tooltip-bg-color);
229
+ --color-sf-toooltip-text-color: #212529;
230
+
231
+ //Light
232
+ --color-sf-appbar-bg-color-alt1: var(--color-sf-content-bg-color-alt2);
233
+ --color-sf-appbar-color-alt1: var(--color-sf-content-text-color);
234
+ --color-sf-appbar-border-color-alt1: var(--color-sf-appbar-bg-color-alt1);
235
+ --color-sf-appbar-hover-bg-color-alt1: $transparent;
236
+
237
+ //dark
238
+ --color-sf-appbar-bg-color-alt2: var(--color-sf-content-bg-color-alt3);
239
+ --color-sf-appbar-color-alt2: #212529;
240
+ --color-sf-appbar-border-color-alt2: var(--color-sf-appbar-bg-color-alt2);
241
+ --color-sf-appbar-hover-bg-color-alt2: $transparent;
242
+
243
+ //diagram Palette color
244
+ --color-sf-diagram-palette-background: var(--color-sf-content-bg-color-alt3);
245
+ --color-sf-diagram-palette-hover-background: #ced4da;
246
+
247
+ //rating
248
+ --color-sf-rating-selected-color: var(--color-sf-primary);
249
+ --color-sf-rating-unrated-color: var(--color-sf-content-bg-color-alt5);
250
+ --color-sf-rating-selected-disabled-color: var(--color-sf-content-bg-color-alt4);
251
+ --color-sf-rating-unrated-disabled-color: var(--color-sf-content-bg-color-alt3);
252
+ --color-sf-rating-selected-hover-color: var(--color-sf-content-bg-color-alt5);
253
+ --color-sf-rating-unrated-hover-color: var(--color-sf-primary);
254
+ --color-sf-rating-pressed-color: #599bfe;
255
+
256
+ //Message default
257
+ --color-sf-msg-color: #ffffff;
258
+ --color-sf-msg-bg-color: #3b4248;
259
+ --color-sf-msg-border-color: #444c54;
260
+ --color-sf-msg-color-alt1: var(--color-sf-content-text-color);
261
+ --color-sf-msg-bg-color-alt1: $transparent;
262
+ --color-sf-msg-border-color-alt1: #9ca3af;
263
+ --color-sf-msg-color-alt2: #ffffff;
264
+ --color-sf-msg-bg-color-alt2: #444c54;
265
+ --color-sf-msg-border-color-alt2: var(--color-sf-msg-bg-color-alt2);
266
+ --color-sf-msg-icon-color: var(--color-sf-content-text-color);
267
+ --color-sf-msg-icon-color-alt1: var(--color-sf-content-text-color);
268
+ --color-sf-msg-icon-color-alt2: #ffffff;
269
+ --color-sf-msg-close-icon-color: var(--color-sf-icon-color);
270
+ --color-sf-msg-close-icon-color-alt1: var(--color-sf-icon-color);
271
+ --color-sf-msg-close-icon-color-alt2: #ffffff;
272
+
273
+ //Message danger
274
+ --color-sf-msg-danger-color: #fae3e5;
275
+ --color-sf-msg-danger-bg-color: #66121a;
276
+ --color-sf-msg-danger-border-color: var(--color-sf-msg-danger-bg-color);
277
+ --color-sf-msg-danger-color-alt1: var(--color-sf-danger);
278
+ --color-sf-msg-danger-bg-color-alt1: $transparent;
279
+ --color-sf-msg-danger-border-color-alt1: var(--color-sf-msg-danger-color-alt1);
280
+ --color-sf-msg-danger-color-alt2: #212529;
281
+ --color-sf-msg-danger-bg-color-alt2: var(--color-sf-danger);
282
+ --color-sf-msg-danger-border-color-alt2: var(--color-sf-msg-danger-bg-color-alt2);
283
+ --color-sf-msg-danger-icon-color: #fae3e5;
284
+ --color-sf-msg-danger-icon-color-alt1: var(--color-sf-danger);
285
+ --color-sf-msg-danger-icon-color-alt2: #212529;
286
+ --color-sf-msg-danger-close-icon-color: var(--color-sf-icon-color);
287
+ --color-sf-msg-danger-close-icon-color-alt1: var(--color-sf-icon-color);
288
+ --color-sf-msg-danger-close-icon-color-alt2: #212529;
289
+
290
+ //Message success
291
+ --color-sf-msg-success-color: #2ed889;
292
+ --color-sf-msg-success-bg-color: #09311e;
293
+ --color-sf-msg-success-border-color: #0b3a24;
294
+ --color-sf-msg-success-color-alt1: #21b26f;
295
+ --color-sf-msg-success-bg-color-alt1: $transparent;
296
+ --color-sf-msg-success-border-color-alt1: #21b26f;
297
+ --color-sf-msg-success-color-alt2: #212529;
298
+ --color-sf-msg-success-bg-color-alt2: #21b26f;
299
+ --color-sf-msg-success-border-color-alt2: var(--color-sf-msg-success-bg-color-alt2);
300
+ --color-sf-msg-success-icon-color: #2ed889;
301
+ --color-sf-msg-success-icon-color-alt1: #21b26f;
302
+ --color-sf-msg-success-icon-color-alt2: #212529;
303
+ --color-sf-msg-success-close-icon-color: var(--color-sf-icon-color);
304
+ --color-sf-msg-success-close-icon-color-alt1: var(--color-sf-icon-color);
305
+ --color-sf-msg-success-close-icon-color-alt2: #212529;
306
+
307
+ //Message warning
308
+ --color-sf-msg-warning-color: #ffeeb9;
309
+ --color-sf-msg-warning-bg-color: #866500;
310
+ --color-sf-msg-warning-border-color: #967000;
311
+ --color-sf-msg-warning-color-alt1: var(--color-sf-warning);
312
+ --color-sf-msg-warning-bg-color-alt1: $transparent;
313
+ --color-sf-msg-warning-border-color-alt1: var(--color-sf-msg-warning-color-alt1);
314
+ --color-sf-msg-warning-color-alt2: #212529;
315
+ --color-sf-msg-warning-bg-color-alt2: var(--color-sf-warning);
316
+ --color-sf-msg-warning-border-color-alt2: var(--color-sf-msg-warning-bg-color-alt2);
317
+ --color-sf-msg-warning-icon-color: var(--color-sf-warning);
318
+ --color-sf-msg-warning-icon-color-alt1: var(--color-sf-warning);
319
+ --color-sf-msg-warning-icon-color-alt2: #212529;
320
+ --color-sf-msg-warning-close-icon-color: var(--color-sf-icon-color);
321
+ --color-sf-msg-warning-close-icon-color-alt1: var(--color-sf-icon-color);
322
+ --color-sf-msg-warning-close-icon-color-alt2: #212529;
323
+
324
+ //Message info
325
+ --color-sf-msg-info-color: #84e5f8;
326
+ --color-sf-msg-info-bg-color: #05505f;
327
+ --color-sf-msg-info-border-color: #065c6d;
328
+ --color-sf-msg-info-color-alt1: var(--color-sf-info);
329
+ --color-sf-msg-info-bg-color-alt1: $transparent;
330
+ --color-sf-msg-info-border-color-alt1: var(--color-sf-msg-info-color-alt1);
331
+ --color-sf-msg-info-color-alt2: #212529;
332
+ --color-sf-msg-info-bg-color-alt2: var(--color-sf-info);
333
+ --color-sf-msg-info-border-color-alt2: var(--color-sf-msg-bg-color-alt2);
334
+ --color-sf-msg-info-icon-color: var(--color-sf-info);
335
+ --color-sf-msg-info-icon-color-alt1: var(--color-sf-info);
336
+ --color-sf-msg-info-icon-color-alt2: #212529;
337
+ --color-sf-msg-info-close-icon-color: var(--color-sf-icon-color);
338
+ --color-sf-msg-info-close-icon-color-alt1: var(--color-sf-icon-color);
339
+ --color-sf-msg-info-close-icon-color-alt2: #212529;
340
+ }
341
+
342
+ // black
343
+ $black:#000 !default;
344
+
345
+ // White
346
+ $white:#fff !default;
347
+
348
+ @function shade-color($color, $percentage) {
349
+ @return mix($black, $color, $percentage);
350
+ }
351
+
352
+ @function tint-color($color, $percentage) {
353
+ @return mix($white, $color, $percentage);
354
+ }
355
+
356
+ // Transparent
357
+ $transparent: transparent;
358
+
359
+ // scss-docs-start gray-color-variables
360
+ $gray-100: #f8f9fa !default;
361
+ $gray-200: #e9ecef !default;
362
+ $gray-300: #dee2e6 !default;
363
+ $gray-400: #ced4da !default;
364
+ $gray-500: #adb5bd !default;
365
+ $gray-600: #6c757d !default;
366
+ $gray-700: #495057 !default;
367
+ $gray-800: #343a40 !default;
368
+ $gray-900: #212529 !default;
369
+
370
+ // scss-docs-start color-variables
371
+ $blue:#0d6efd !default;
372
+ $indigo:#6610f2 !default;
373
+ $purple:#6f42c1 !default;
374
+ $pink:#d63384 !default;
375
+ $red: #dc3545 !default;
376
+ $orange:#fd7e14 !default;
377
+ $yellow:#ffc107 !default;
378
+ $green: #198754 !default;
379
+ $teal:#20c997 !default;
380
+ $cyan:#0dcaf0 !default;
381
+
382
+ $primary: $blue !default;
383
+ $secondary: $gray-600 !default;
384
+ $success: lighten($green, 10%) !default;
385
+ $info:$cyan !default;
386
+ $warning: $yellow !default;
387
+ $danger:lighten($red, 10%) !default;
388
+ $success-light: tint-color($success, 80%) !default;
389
+ $info-light:tint-color($info, 80%) !default;
390
+ $warning-light: tint-color($warning, 80%) !default;
391
+ $danger-light:tint-color($danger, 80%) !default;
392
+ $primary-text-color: $white !default;
393
+ $primary-light: tint-color($primary, 50%) !default;
394
+ $primary-lighter: shade-color($primary, 80%) !default;
395
+ $success-dark: darken($success, 10%) !default;
396
+ $info-dark:darken($info, 25%) !default;
397
+ $warning-dark: darken($warning, 25%) !default;
398
+ $danger-dark:darken($danger, 10%) !default;
399
+ $success-light-alt: darken($green, 20%) !default;
400
+ $info-light-alt:darken($cyan, 25%) !default;
401
+ $warning-light-alt: darken($yellow, 20%) !default;
402
+ $danger-light-alt:darken($red, 25%) !default;
403
+
404
+ // backgroundcolor
405
+ $content-bg-color: $gray-900 !default;
406
+ $content-bg-color-alt1: lighten($gray-900, 3%) !default;
407
+ $content-bg-color-alt2: $gray-800 !default;
408
+ $content-bg-color-alt3: $gray-700 !default;
409
+ $content-bg-color-alt4: $gray-600 !default;
410
+ $content-bg-color-alt5: $gray-500 !default;
411
+ $content-bg-color-hover: lighten($content-bg-color, 7%) !default;
412
+ $content-bg-color-pressed: $gray-700 !default;
413
+ $content-bg-color-focus: $content-bg-color-hover !default;
414
+ $content-bg-color-selected: $primary !default;
415
+ $content-bg-color-dragged: $gray-800 !default;
416
+ $content-bg-color-disabled: $content-bg-color !default;
417
+ $flyout-bg-color: $gray-800 !default;
418
+ $flyout-bg-color-hover: lighten($flyout-bg-color, 7%) !default;
419
+ $flyout-bg-color-pressed: $primary !default;
420
+ $flyout-bg-color-focus: $flyout-bg-color-hover !default;
421
+ $flyout-border: $gray-700 !default;
422
+ $overlay-bg-color: rgba($black, .4) !default;
423
+ $table-bg-color-hover: lighten($content-bg-color, 7%) !default;
424
+ $table-bg-color-pressed: $gray-700 !default;
425
+ $table-bg-color-selected: lighten($content-bg-color, 12%) !default;
426
+
427
+ //All theme commoon color
428
+ $colorpicker-gradient-1: #f00 !default;
429
+ $colorpicker-gradient-2: #ff0 !default;
430
+ $ccolorpicker-gradient-3: #0f0 !default;
431
+ $colorpicker-gradient-4: #0ff !default;
432
+ $colorpicker-gradient-5: #00f !default;
433
+ $colorpicker-gradient-6: #f0f !default;
434
+ $colorpicker-gradient-7: #ff0004 !default;
435
+ $spreadsheet-selection-1: #673ab8;
436
+ $spreadsheet-selection-2: #9c27b0;
437
+ $spreadsheet-selection-3: #029688;
438
+ $spreadsheet-selection-4: #4caf51;
439
+ $spreadsheet-selection-5: #fe9800;
440
+ $spreadsheet-selection-6: #3f52b5;
441
+
442
+ // text-color
443
+ $content-text-color: $white !default;
444
+ $content-text-color-alt1: $gray-200 !default;
445
+ $content-text-color-alt2: $gray-400 !default;
446
+ $content-text-color-alt3: lighten($gray-600, 6%) !default;
447
+ $content-text-color-hover: $white !default;
448
+ $content-text-color-pressed: $white !default;
449
+ $content-text-color-focus: $white !default;
450
+ $content-text-color-selected: $primary-text-color !default;
451
+ $content-text-color-dragged: $white !default;
452
+ $content-text-color-disabled: $gray-600 !default;
453
+ $placeholder-text-color: $gray-600 !default;
454
+ $flyout-text-color: $white !default;
455
+ $flyout-text-color-hover: $white !default;
456
+ $flyout-text-color-pressed: $primary-text-color !default;
457
+ $flyout-text-color-focus: $white !default;
458
+ $table-text-color-hover: $white !default;
459
+ $table-text-color-pressed: $white !default;
460
+ $table-text-color-selected: $white !default;
461
+
462
+ // icon-color
463
+ $icon-color: $gray-500 !default;
464
+ $icon-color-hover: $gray-300 !default;
465
+ $icon-color-pressed: $gray-100 !default;
466
+ $icon-color-disabled: $gray-500 !default;
467
+
468
+ // border-color
469
+ $border-light: lighten($gray-800, 7%) !default;
470
+ $border: $gray-600 !default;
471
+ $border-dark: $gray-500 !default;
472
+ $border-hover: $gray-700 !default;
473
+ $border-pressed: $gray-600 !default;
474
+ $border-focus: $gray-700 !default;
475
+ $border-selected: $gray-600 !default;
476
+ $border-dragged: $gray-600 !default;
477
+ $border-disabled: $border-light !default;
478
+ $border-warning: lighten($yellow, 10%) !default;
479
+ $border-error: lighten($red, 10%) !default;
480
+ $border-success: lighten($green, 10%) !default;
481
+ $spreadsheet-gridline: $gray-300 !default;
482
+
483
+ // Tooltip
484
+ $tooltip-bg-color: $gray-200 !default;
485
+ $tooltip-border: $gray-200;
486
+ $toooltip-text-color: $gray-900 !default;
487
+
488
+ // shadow
489
+ $shadow: 0 .8px 16px rgba($black, .15) !default;
490
+ $shadow-sm: 0 2px 4px rgba($black, .075) !default;
491
+ $shadow-md: 0 8px 12px rgba($black, .15) !default;
492
+ $shadow-lg:0 16px 48px rgba($black, .175) !default;
493
+ $shadow-xl: 0 20px 25px -5px rgba($black, .1), 0 10px 10px -5px rgba($black, .04) !default;
494
+ $shadow-2xl: 0 25px 50px -12px rgba($black, .25) !default;
495
+ $shadow-inner: inset 0 1px 2px rgba($black, .075) !default;
496
+ $shadow-none: 0 0 rgba($black, 0) !default;
497
+ $shadow-focus-ring1: 0 0 0 4px rgba($primary, .25) !default;
498
+ $shadow-focus-ring2: 0 0 0 4px rgba($primary, .25) !default;
499
+ $primary-shadow-focus: 0 0 0 4px rgba(tint-color($primary, 15%), .5) !default;
500
+ $secondary-shadow-focus: 0 0 0 4px rgba(tint-color($secondary, 15%), .5) !default;
501
+ $success-shadow-focus: 0 0 0 4px rgba(tint-color($success, 15%), .5) !default;
502
+ $danger-shadow-focus: 0 0 0 4px rgba(tint-color($danger, 15%), .5) !default;
503
+ $info-shadow-focus: 0 0 0 4px rgba(tint-color($info, 15%), .5) !default;
504
+ $warning-shadow-focus: 0 0 0 4px rgba(tint-color($warning, 15%), .5) !default;
505
+
506
+ // fontfamily
507
+ $font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !default;
508
+
509
+ // default font Size
510
+ $text-xxs: 10px !default;
511
+ $text-xs: 12px !default;
512
+ $text-sm: 14px !default;
513
+ $text-base: 16px !default;
514
+ $text-lg: 18px !default;
515
+ $text-xl: 20px !default;
516
+ $text-2xl: 24px !default;
517
+ $text-3xl: 30px !default;
518
+ $text-4xl: 36px !default;
519
+ $text-5xl: 48px !default;
520
+ $text-6xl: 60px !default;
521
+ $text-7xl: 72px !default;
522
+ $text-8xl: 96px !default;
523
+ $text-9xl: 128px !default;
524
+
525
+ // heading
526
+ $h1-font-size: 40px !default;
527
+ $h2-font-size: 32px !default;
528
+ $h3-font-size: 28px !default;
529
+ $h4-font-size: $text-2xl !default;
530
+ $h5-font-size: $text-xl !default;
531
+ $h6-font-size: $text-base !default;
532
+
533
+ // Line height
534
+ $leading-none: 1 !default;
535
+ $leading-tight: 1.25 !default;
536
+ $leading-snug: 1.375 !default;
537
+ $leading-normal: 1.5 !default;
538
+ $leading-relaxed: 1.625 !default;
539
+ $leading-loose: 2 !default;
540
+
541
+ // font Weight
542
+ $font-weight-lighter: lighter !default;
543
+ $font-weight-light: 300 !default;
544
+ $font-weight-normal:400 !default;
545
+ $font-weight-medium:500 !default;
546
+ $font-weight-bold:700 !default;
547
+ $font-weight-bolder:bolder !default;
548
+
549
+ // Secondary-button
550
+ $secondary-bg-color: $secondary !default;
551
+ $secondary-border-color: $secondary-bg-color !default;
552
+ $secondary-text-color: $white !default;
553
+ $secondary-bg-color-hover: shade-color($secondary-bg-color, 15%) !default;
554
+ $secondary-border-color-hover: shade-color($secondary-bg-color, 20%) !default;
555
+ $secondary-text-color-hover: $secondary-text-color !default;
556
+ $secondary-bg-color-pressed: shade-color($secondary-bg-color, 20%) !default;
557
+ $secondary-border-color-pressed: shade-color($secondary-bg-color, 25%) !default;
558
+ $secondary-text-color-pressed: $secondary-text-color !default;
559
+ $secondary-bg-color-focus: $secondary-bg-color-hover !default;
560
+ $secondary-border-color-focus: $secondary-border-color-hover !default;
561
+ $secondary-text-color-focus: $secondary-text-color-hover !default;
562
+ $secondary-bg-color-disabled: rgba($secondary-bg-color, .65) !default;
563
+ $secondary-border-color-disabled: $secondary-bg-color-disabled !default;
564
+ $secondary-text-color-disabled: rgba($secondary-text-color, .65) !default;
565
+
566
+ // Primary-button
567
+ $primary-bg-color: $primary !default;
568
+ $primary-border-color: $primary !default;
569
+ $primary-text: $primary-text-color !default;
570
+ $primary-bg-color-hover: shade-color($primary-bg-color, 15%) !default;
571
+ $primary-border-color-hover: shade-color($primary-bg-color, 20%) !default;
572
+ $primary-text-hover: $primary-text !default;
573
+ $primary-bg-color-pressed: shade-color($primary-bg-color, 20%) !default;
574
+ $primary-border-color-pressed: shade-color($primary-bg-color, 25%) !default;
575
+ $primary-text-pressed: $primary-text-color !default;
576
+ $primary-bg-color-focus: $primary-bg-color-hover !default;
577
+ $primary-border-color-focus: $primary-border-color-hover !default;
578
+ $primary-text-focus: $primary-text !default;
579
+ $primary-bg-color-disabled: rgba($primary-bg-color, .65) !default;
580
+ $primary-border-color-disabled: $primary-bg-color-disabled !default;
581
+ $primary-text-disabled: rgba($primary-text, .65) !default;
582
+
583
+ // Success-button
584
+ $success-bg-color: $green !default;
585
+ $success-border-color: $green !default;
586
+ $success-text: $white !default;
587
+ $success-bg-color-hover: shade-color($success-bg-color, 15%) !default;
588
+ $success-border-color-hover: shade-color($success-bg-color, 20%) !default;
589
+ $success-text-hover: $success-text !default;
590
+ $success-bg-color-pressed: shade-color($success-bg-color, 20%) !default;
591
+ $success-border-color-pressed: shade-color($success-bg-color, 25%) !default;
592
+ $success-text-pressed: $success-text !default;
593
+ $success-bg-color-focus: $success-bg-color-hover !default;
594
+ $success-border-color-focus: $success-border-color-hover !default;
595
+ $success-text-focus: $success-text !default;
596
+ $success-bg-color-disabled: rgba($success-bg-color, .65) !default;
597
+ $success-border-color-disabled: $success-bg-color-disabled !default;
598
+ $success-text-disabled: rgba($success-text, .65) !default;
599
+
600
+ // Warning-button
601
+ $warning-bg-color: $yellow !default;
602
+ $warning-border-color: $yellow !default;
603
+ $warning-text: $black !default;
604
+ $warning-bg-color-hover: tint-color($warning-bg-color, 15%) !default;
605
+ $warning-border-color-hover: tint-color($warning-bg-color, 10%) !default;
606
+ $warning-text-hover: $warning-text !default;
607
+ $warning-bg-color-pressed: tint-color($warning-bg-color, 20%) !default;
608
+ $warning-border-color-pressed: tint-color($warning-bg-color, 10%) !default;
609
+ $warning-text-pressed: $warning-text !default;
610
+ $warning-bg-color-focus: $warning-bg-color-hover !default;
611
+ $warning-border-color-focus: $warning-border-color-hover !default;
612
+ $warning-text-focus: $warning-text !default;
613
+ $warning-bg-color-disabled: rgba($warning-bg-color, .65) !default;
614
+ $warning-border-color-disabled: $warning-bg-color-disabled !default;
615
+ $warning-text-disabled: rgba($warning-text, .65) !default;
616
+
617
+ // danger-button
618
+ $danger-bg-color: $red !default;
619
+ $danger-border-color: $red !default;
620
+ $danger-text: $white !default;
621
+ $danger-bg-color-hover: shade-color($danger-bg-color, 15%) !default;
622
+ $danger-border-color-hover: shade-color($danger-bg-color, 20%) !default;
623
+ $danger-text-hover: $danger-text !default;
624
+ $danger-bg-color-pressed: shade-color($danger-bg-color, 20%) !default;
625
+ $danger-border-color-pressed: shade-color($danger-bg-color, 25%) !default;
626
+ $danger-text-pressed: $danger-text !default;
627
+ $danger-bg-color-focus: $danger-bg-color-hover !default;
628
+ $danger-border-color-focus: $danger-border-color-hover !default;
629
+ $danger-text-focus: $danger-text !default;
630
+ $danger-bg-color-disabled: rgba($danger-bg-color, .65) !default;
631
+ $danger-border-color-disabled: $danger-bg-color-disabled !default;
632
+ $danger-text-disabled: rgba($danger-text, .65) !default;
633
+
634
+ // Info-button
635
+ $info-bg-color: $cyan !default;
636
+ $info-border-color: $cyan !default;
637
+ $info-text: $black !default;
638
+ $info-bg-color-hover: tint-color($info-bg-color, 15%) !default;
639
+ $info-border-color-hover: tint-color($info-bg-color, 10%) !default;
640
+ $info-text-hover: $info-text !default;
641
+ $info-bg-color-pressed: tint-color($info-bg-color, 20%) !default;
642
+ $info-border-color-pressed: tint-color($info-bg-color, 10%) !default;
643
+ $info-text-pressed: $info-text !default;
644
+ $info-bg-color-focus: $info-bg-color-hover !default;
645
+ $info-border-color-focus: $info-border-color-hover !default;
646
+ $info-text-focus: $info-text-hover !default;
647
+ $info-bg-color-disabled: rgba($info-bg-color, .65) !default;
648
+ $info-border-color-disabled: $info-bg-color-disabled !default;
649
+ $info-text-disabled: rgba($info-text, .65) !default;
650
+
651
+ //Outline button
652
+ $primary-outline: lighten($primary, 10%) !default;
653
+ $secondary-outline: lighten($secondary, 10%) !default;
654
+ $warning-outline: lighten($warning, 10%) !default;
655
+ $danger-outline: lighten($danger, 10%) !default;
656
+ $success-outline: lighten($success, 10%) !default;
657
+ $info-outline: lighten($info, 10%) !default;
658
+
659
+ // Chart series
660
+ $series-1: $gray-800;
661
+ $series-2: $gray-700;
662
+ $series-3: $gray-600;
663
+ $series-4: $gray-500;
664
+ $series-5: #5ecb9b;
665
+ $series-6: #a860f1;
666
+ $series-7: #557ef7;
667
+ $series-8: #eba844;
668
+ $series-9: #e9599b;
669
+ $series-10: #3bc6cf;
670
+ $series-11: #74b706;
671
+ $series-12: #ea6266;
672
+ $skin-name: 'bootstrap5' !default;
673
+ $theme-name: 'bootstrap5-dark' !default;
674
+
675
+ //Diagram Palette color
676
+ $diagram-palette-background: $gray-300 !default;
677
+ $diagram-palette-hover-background: $gray-400 !default;
678
+
679
+ //Message component
680
+
681
+ //Message Default
682
+ $msg-color: $white !default;
683
+ $msg-bg-color: #3b4248 !default;
684
+ $msg-border-color: lighten($gray-800, 7%) !default;
685
+ $msg-color-alt1: $white !default;
686
+ $msg-bg-color-alt1: $transparent !default;
687
+ $msg-border-color-alt1: #9ca3af !default;
688
+ $msg-color-alt2: $white !default;
689
+ $msg-bg-color-alt2: lighten($gray-800, 7%) !default;
690
+ $msg-border-color-alt2: $msg-bg-color-alt2 !default;
691
+
692
+ $msg-icon-color: $white !default;
693
+ $msg-icon-color-alt1: $white !default;
694
+ $msg-icon-color-alt2: $white !default;
695
+
696
+ $msg-close-icon-color: $icon-color !default;
697
+ $msg-close-icon-color-alt1: $icon-color !default;
698
+ $msg-close-icon-color-alt2: $white !default;
699
+
700
+ //Message Danger
701
+ $msg-danger-color: lighten($red, 40%) !default;
702
+ $msg-danger-bg-color: darken($red, 30%) !default;
703
+ $msg-danger-border-color: darken($red, 30%) !default;
704
+ $msg-danger-color-alt1: lighten($red, 10%) !default;
705
+ $msg-danger-bg-color-alt1: $transparent !default;
706
+ $msg-danger-border-color-alt1: lighten($red, 10%) !default;
707
+ $msg-danger-color-alt2: $gray-900 !default;
708
+ $msg-danger-bg-color-alt2: lighten($red, 10%) !default;
709
+ $msg-danger-border-color-alt2: lighten($red, 10%) !default;
710
+
711
+ $msg-danger-icon-color: lighten($red, 40%) !default;
712
+ $msg-danger-icon-color-alt1: lighten($red, 10%) !default;
713
+ $msg-danger-icon-color-alt2: $gray-900 !default;
714
+
715
+ $msg-danger-close-icon-color: $icon-color !default;
716
+ $msg-danger-close-icon-color-alt1: $icon-color !default;
717
+ $msg-danger-close-icon-color-alt2: $gray-900 !default;
718
+
719
+ //Message success
720
+ $msg-success-color: #2ed889 !default;
721
+ $msg-success-bg-color: darken($green, 20%) !default;
722
+ $msg-success-border-color: darken($green, 18%) !default;
723
+ $msg-success-color-alt1: lighten($green, 10%) !default;
724
+ $msg-success-bg-color-alt1: $transparent !default;
725
+ $msg-success-border-color-alt1: lighten($green, 10%) !default;
726
+ $msg-success-color-alt2: $gray-900 !default;
727
+ $msg-success-bg-color-alt2: lighten($green, 10%) !default;
728
+ $msg-success-border-color-alt2: lighten($green, 10%) !default;
729
+
730
+ $msg-success-icon-color: #2ed889 !default;
731
+ $msg-success-icon-color-alt1: lighten($green, 10%) !default;
732
+ $msg-success-icon-color-alt2: $gray-900 !default;
733
+
734
+ $msg-success-close-icon-color: $icon-color !default;
735
+ $msg-success-close-icon-color-alt1: $icon-color !default;
736
+ $msg-success-close-icon-color-alt2: $gray-900 !default;
737
+
738
+ //Message warning
739
+ $msg-warning-color: lighten($yellow, 35%) !default;
740
+ $msg-warning-bg-color: darken($yellow, 25%) !default;
741
+ $msg-warning-border-color: darken($yellow, 22%) !default;
742
+ $msg-warning-color-alt1: $yellow !default;
743
+ $msg-warning-bg-color-alt1: $transparent !default;
744
+ $msg-warning-border-color-alt1: $yellow !default;
745
+ $msg-warning-color-alt2: $gray-900 !default;
746
+ $msg-warning-bg-color-alt2: $yellow !default;
747
+ $msg-warning-border-color-alt2: $yellow !default;
748
+
749
+ $msg-warning-icon-color: $yellow !default;
750
+ $msg-warning-icon-color-alt1: $yellow !default;
751
+ $msg-warning-icon-color-alt2: $gray-900 !default;
752
+
753
+ $msg-warning-close-icon-color: $icon-color !default;
754
+ $msg-warning-close-icon-color-alt1: $icon-color !default;
755
+ $msg-warning-close-icon-color-alt2: $gray-900 !default;
756
+
757
+ //Message Info
758
+ $msg-info-color: lighten($cyan, 25%) !default;
759
+ $msg-info-bg-color: darken($cyan, 30%) !default;
760
+ $msg-info-border-color: darken($cyan, 27%) !default;
761
+ $msg-info-color-alt1: $cyan !default;
762
+ $msg-info-bg-color-alt1: $transparent !default;
763
+ $msg-info-border-color-alt1: $cyan !default;
764
+ $msg-info-color-alt2: $gray-900 !default;
765
+ $msg-info-bg-color-alt2: $cyan !default;
766
+ $msg-info-border-color-alt2: $cyan !default;
767
+
768
+ $msg-info-icon-color: $cyan !default;
769
+ $msg-info-icon-color-alt1: $cyan !default;
770
+ $msg-info-icon-color-alt2: $gray-900 !default;
771
+
772
+ $msg-info-close-icon-color: $icon-color !default;
773
+ $msg-info-close-icon-color-alt1: $icon-color !default;
774
+ $msg-info-close-icon-color-alt2: $gray-900 !default;
775
+
776
+ //App bar
777
+ //Light
778
+ $appbar-bg-color-alt1: $gray-800 !default;
779
+ $appbar-color-alt1: $white !default;
780
+ $appbar-border-color-alt1: $gray-800 !default;
781
+ $appbar-hover-bg-color-alt1: rgba(255, 255, 255, .08) !default;
782
+
783
+ //Dark
784
+ $appbar-bg-color-alt2: $gray-300 !default;
785
+ $appbar-color-alt2: $gray-900 !default;
786
+ $appbar-border-color-alt2: $gray-300 !default;
787
+ $appbar-hover-bg-color-alt2: rgba(transparent, .056) !default;
788
+
789
+ //shadow
790
+ $appbar-bottom-shadow: none !default;
791
+ $appbar-top-shadow: none !default;
792
+
793
+ //rating
794
+ $rating-selected-color: $primary !default;
795
+ $rating-unrated-color: $gray-500 !default;
796
+ $rating-selected-disabled-color: $gray-600 !default;
797
+ $rating-unrated-disabled-color: $gray-700 !default;
798
+ $rating-selected-hover-color: $gray-500 !default;
799
+ $rating-unrated-hover-color: $primary !default;
800
+ $rating-pressed-color: lighten($primary, 15%) !default;
801
+
802
+ //font-icons
803
+ $font-icon-8: 8px !default;
804
+ $font-icon-9: 9px !default;
805
+ $font-icon-10: 10px !default;
806
+ $font-icon-12: 12px !default;
807
+ $font-icon-13: 13px !default;
808
+ $font-icon-14: 14px !default;
809
+ $font-icon-15: 15px !default;
810
+ $font-icon-16: 16px !default;
811
+ $font-icon-17: 17px !default;
812
+ $font-icon-18: 18px !default;
813
+ $font-icon-20: 20px !default;
814
+ $font-icon-22: 22px !default;
815
+ $font-icon-24: 24px !default;
816
+ $font-icon-26: 26px !default;
817
+ $font-icon-28: 28px !default;
818
+ $font-icon-32: 32px !default;
819
+
820
+ $font-size: 12px !default;
821
+ $font-weight: 400 !default;
822
+ $error-font-color: $danger !default;
823
+ $warning-font-color: $yellow !default;
824
+ $success-font-color: lighten($green, 10%) !default;
825
+ $information-font-color: $cyan !default;
826
+
827
+ $badge-primary-bg-color-darken: darken($primary, 10%);
828
+ $badge-secondary-bg-color-darken: darken($content-bg-color-alt1, 10%);
829
+ $badge-success-bg-color-darken: darken($success-light, 10%);
830
+ $badge-danger-bg-color-darken: darken($danger-light, 10%);
831
+ $badge-warning-bg-color-darken: darken($warning-light, 10%);
832
+ $badge-info-bg-color-darken: darken($info-light, 10%);
833
+ $badge-light-bg-color-darken: darken($content-bg-color-alt2, 10%);
834
+ $badge-dark-bg-color-darken: darken($content-text-color-alt2, 10%);
835
+ $breadcrumb-item-hover-color: darken($primary-outline, 10%);
836
+ $breadcrumb-item-active-color: darken($primary-outline, 15%);
837
+ $breadcrumb-item-focus-border-color: darken($primary-outline, 10%);
838
+ $calendar-yeardecade-selected-hover-bg: darken($primary-bg-color, 10%);
839
+ $calendar-active-hover-bg-color: darken($primary-bg-color, 10%);
840
+ $tab-alt-wrap-hover-color: darken($secondary, 15%);
841
+ $treeview-item-active-hover-bg: darken($content-bg-color-selected, 5%);
842
+ $de-style-btn-bg-color: darken($secondary-bg-color, 7.5%);
843
+ $de-toggle-border-color: darken($secondary-bg-color, 12.5%);
844
+ $de-toggle-hover-color: darken($secondary-bg-color, 7.5%);
845
+ $de-toggle-border-hover-color: darken($secondary-bg-color, 10%);
846
+ $de-toggle-disabled-color: lighten($secondary-bg-color, 65%);
847
+ $connector-point-hover-color: darken($primary, 10%);
848
+ $gantt-connected-task: lighten($primary, 20%);
849
+ $gantt-active-parent-task: lighten($warning-text, 10%);
850
+ $schedule-hover-bg-color: darken($content-bg-color-alt1, 2%);
851
+ $timepicker-active-border-color: darken($gray-600, 10%);
852
+ $hdr-selection-border-color: darken($border-light, 8%);
853
+ $accordion-text-active-color: shade-color($primary, 10%) !default;