smart-webcomponents-react 19.0.0 → 19.0.5

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 (334) hide show
  1. package/chart/ganttchart.d.ts +1 -1
  2. package/ganttchart/ganttchart.d.ts +1 -1
  3. package/ganttchart/ganttchart.esm.js +3 -3
  4. package/ganttchart/ganttchart.umd.js +3 -3
  5. package/index.d.ts +1 -2
  6. package/package.json +1 -1
  7. package/source/modules/smart.3dchart.js +1 -1
  8. package/source/modules/smart.accordion.js +1 -1
  9. package/source/modules/smart.array.js +1 -1
  10. package/source/modules/smart.barcode.js +1 -1
  11. package/source/modules/smart.breadcrumb.js +1 -1
  12. package/source/modules/smart.button.js +1 -1
  13. package/source/modules/smart.buttongroup.js +1 -1
  14. package/source/modules/smart.calendar.js +1 -1
  15. package/source/modules/smart.card.js +1 -1
  16. package/source/modules/smart.cardview.js +3 -3
  17. package/source/modules/smart.carousel.js +1 -1
  18. package/source/modules/smart.chart.js +2 -2
  19. package/source/modules/smart.checkbox.js +1 -1
  20. package/source/modules/smart.checkinput.js +1 -1
  21. package/source/modules/smart.chip.js +1 -1
  22. package/source/modules/smart.colorinput.js +1 -1
  23. package/source/modules/smart.colorpanel.js +1 -1
  24. package/source/modules/smart.colorpicker.js +1 -1
  25. package/source/modules/smart.combobox.js +1 -1
  26. package/source/modules/smart.common.js +2 -2
  27. package/source/modules/smart.countryinput.js +1 -1
  28. package/source/modules/smart.dateinput.js +1 -1
  29. package/source/modules/smart.daterangeinput.js +1 -1
  30. package/source/modules/smart.datetimepicker.js +1 -1
  31. package/source/modules/smart.dockinglayout.js +1 -1
  32. package/source/modules/smart.dropdownbutton.js +1 -1
  33. package/source/modules/smart.dropdownlist.js +1 -1
  34. package/source/modules/smart.editor.js +2 -2
  35. package/source/modules/smart.element.js +1 -1
  36. package/source/modules/smart.fileupload.js +1 -1
  37. package/source/modules/smart.form.js +1 -1
  38. package/source/modules/smart.formulaparser.js +1 -1
  39. package/source/modules/smart.ganttchart.js +4 -4
  40. package/source/modules/smart.gauge.js +1 -1
  41. package/source/modules/smart.grid.js +8 -8
  42. package/source/modules/smart.gridpanel.js +3 -3
  43. package/source/modules/smart.input.js +1 -1
  44. package/source/modules/smart.kanban.js +3 -3
  45. package/source/modules/smart.layout.js +1 -1
  46. package/source/modules/smart.led.js +1 -1
  47. package/source/modules/smart.listbox.js +1 -1
  48. package/source/modules/smart.listmenu.js +1 -1
  49. package/source/modules/smart.map.js +1 -1
  50. package/source/modules/smart.maskedtextbox.js +1 -1
  51. package/source/modules/smart.menu.js +1 -1
  52. package/source/modules/smart.multicomboinput.js +1 -1
  53. package/source/modules/smart.multiinput.js +1 -1
  54. package/source/modules/smart.multilinetextbox.js +1 -1
  55. package/source/modules/smart.multisplitbutton.js +1 -1
  56. package/source/modules/smart.numberinput.js +1 -1
  57. package/source/modules/smart.numerictextbox.js +1 -1
  58. package/source/modules/smart.pager.js +1 -1
  59. package/source/modules/smart.passwordinput.js +1 -1
  60. package/source/modules/smart.passwordtextbox.js +1 -1
  61. package/source/modules/smart.path.js +1 -1
  62. package/source/modules/smart.phoneinput.js +1 -1
  63. package/source/modules/smart.pivottable.js +3 -3
  64. package/source/modules/smart.progressbar.js +1 -1
  65. package/source/modules/smart.qrcode.js +1 -1
  66. package/source/modules/smart.querybuilder.js +1 -1
  67. package/source/modules/smart.radiobutton.js +1 -1
  68. package/source/modules/smart.rating.js +1 -1
  69. package/source/modules/smart.ribbon.js +1 -1
  70. package/source/modules/smart.router.js +2 -2
  71. package/source/modules/smart.scheduler.js +2 -2
  72. package/source/modules/smart.scrollbar.js +1 -1
  73. package/source/modules/smart.slider.js +1 -1
  74. package/source/modules/smart.sortable.js +1 -1
  75. package/source/modules/smart.splitter.js +1 -1
  76. package/source/modules/smart.switchbutton.js +1 -1
  77. package/source/modules/smart.table.js +3 -3
  78. package/source/modules/smart.tabs.js +1 -1
  79. package/source/modules/smart.tank.js +1 -1
  80. package/source/modules/smart.textarea.js +1 -1
  81. package/source/modules/smart.textbox.js +1 -1
  82. package/source/modules/smart.timeinput.js +1 -1
  83. package/source/modules/smart.timepicker.js +1 -1
  84. package/source/modules/smart.toast.js +1 -1
  85. package/source/modules/smart.tooltip.js +1 -1
  86. package/source/modules/smart.tree.js +1 -1
  87. package/source/modules/smart.validator.js +1 -1
  88. package/source/modules/smart.window.js +1 -1
  89. package/source/smart.3dchart.js +1 -1
  90. package/source/smart.accordion.js +1 -1
  91. package/source/smart.ajax.js +1 -1
  92. package/source/smart.array.js +1 -1
  93. package/source/smart.barcode.js +1 -1
  94. package/source/smart.bootstrap.js +1 -1
  95. package/source/smart.breadcrumb.js +1 -1
  96. package/source/smart.button.js +1 -1
  97. package/source/smart.buttongroup.js +1 -1
  98. package/source/smart.calendar.js +1 -1
  99. package/source/smart.card.js +1 -1
  100. package/source/smart.cardview.js +1 -1
  101. package/source/smart.carousel.js +1 -1
  102. package/source/smart.chart.annotations.js +1 -1
  103. package/source/smart.chart.api.js +1 -1
  104. package/source/smart.chart.core.js +1 -1
  105. package/source/smart.chart.js +1 -1
  106. package/source/smart.chart.rangeselector.js +1 -1
  107. package/source/smart.chart.waterfall.js +1 -1
  108. package/source/smart.checkbox.js +1 -1
  109. package/source/smart.checkinput.js +1 -1
  110. package/source/smart.chip.js +1 -1
  111. package/source/smart.colorinput.js +1 -1
  112. package/source/smart.colorpanel.js +1 -1
  113. package/source/smart.colorpicker.js +1 -1
  114. package/source/smart.combobox.js +1 -1
  115. package/source/smart.complex.js +1 -1
  116. package/source/smart.core.js +1 -1
  117. package/source/smart.countryinput.js +1 -1
  118. package/source/smart.data.js +2 -2
  119. package/source/smart.date.js +1 -1
  120. package/source/smart.dateformatpanel.js +1 -1
  121. package/source/smart.dateinput.js +1 -1
  122. package/source/smart.daterangeinput.js +1 -1
  123. package/source/smart.datetimepicker.js +1 -1
  124. package/source/smart.dockinglayout.js +1 -1
  125. package/source/smart.draw.js +1 -1
  126. package/source/smart.dropdownbutton.js +1 -1
  127. package/source/smart.dropdownlist.js +1 -1
  128. package/source/smart.editor.js +2 -2
  129. package/source/smart.element.js +1 -1
  130. package/source/smart.elements.js +10 -10
  131. package/source/smart.export.js +1 -1
  132. package/source/smart.fileupload.js +1 -1
  133. package/source/smart.filter.js +1 -1
  134. package/source/smart.filterbuilder.js +1 -1
  135. package/source/smart.filterpanel.js +1 -1
  136. package/source/smart.form.js +1 -1
  137. package/source/smart.format.js +1 -1
  138. package/source/smart.formulaparser.js +1 -1
  139. package/source/smart.ganttchart.js +2 -2
  140. package/source/smart.gauge.js +1 -1
  141. package/source/smart.grid.cell.js +1 -1
  142. package/source/smart.grid.chart.js +1 -1
  143. package/source/smart.grid.column.js +1 -1
  144. package/source/smart.grid.core.js +2 -2
  145. package/source/smart.grid.dialog.js +2 -2
  146. package/source/smart.grid.edit.js +2 -2
  147. package/source/smart.grid.export.js +1 -1
  148. package/source/smart.grid.filter.js +1 -1
  149. package/source/smart.grid.group.js +1 -1
  150. package/source/smart.grid.js +1 -1
  151. package/source/smart.grid.menu.js +1 -1
  152. package/source/smart.grid.pager.js +1 -1
  153. package/source/smart.grid.reorder.js +1 -1
  154. package/source/smart.grid.resize.js +1 -1
  155. package/source/smart.grid.row.js +2 -2
  156. package/source/smart.grid.select.js +1 -1
  157. package/source/smart.grid.sort.js +2 -2
  158. package/source/smart.grid.toolbar.js +1 -1
  159. package/source/smart.grid.tree.js +1 -1
  160. package/source/smart.grid.view.js +1 -1
  161. package/source/smart.gridpanel.js +2 -2
  162. package/source/smart.input.js +1 -1
  163. package/source/smart.kanban.js +1 -1
  164. package/source/smart.layout.js +1 -1
  165. package/source/smart.led.js +1 -1
  166. package/source/smart.listbox.js +1 -1
  167. package/source/smart.listmenu.js +1 -1
  168. package/source/smart.map.js +1 -1
  169. package/source/smart.maskedtextbox.js +1 -1
  170. package/source/smart.math.js +1 -1
  171. package/source/smart.menu.js +1 -1
  172. package/source/smart.multicomboinput.js +1 -1
  173. package/source/smart.multiinput.js +1 -1
  174. package/source/smart.multilinetextbox.js +1 -1
  175. package/source/smart.multisplitbutton.js +1 -1
  176. package/source/smart.numberformatpanel.js +1 -1
  177. package/source/smart.numberinput.js +1 -1
  178. package/source/smart.numeric.js +1 -1
  179. package/source/smart.numerictextbox.js +1 -1
  180. package/source/smart.pager.js +1 -1
  181. package/source/smart.passwordinput.js +1 -1
  182. package/source/smart.passwordtextbox.js +1 -1
  183. package/source/smart.path.js +1 -1
  184. package/source/smart.phoneinput.js +1 -1
  185. package/source/smart.pivottable.js +1 -1
  186. package/source/smart.powerbutton.js +1 -1
  187. package/source/smart.progressbar.js +1 -1
  188. package/source/smart.qrcode.js +1 -1
  189. package/source/smart.radiobutton.js +1 -1
  190. package/source/smart.rating.js +1 -1
  191. package/source/smart.ribbon.js +1 -1
  192. package/source/smart.router.js +1 -1
  193. package/source/smart.scheduler.js +1 -1
  194. package/source/smart.scrollbar.js +1 -1
  195. package/source/smart.slider.js +1 -1
  196. package/source/smart.sortable.js +1 -1
  197. package/source/smart.sparkline.js +1 -1
  198. package/source/smart.splitter.js +1 -1
  199. package/source/smart.switchbutton.js +1 -1
  200. package/source/smart.table.js +1 -1
  201. package/source/smart.tabs.js +1 -1
  202. package/source/smart.tank.js +1 -1
  203. package/source/smart.textarea.js +1 -1
  204. package/source/smart.textbox.js +1 -1
  205. package/source/smart.tickintervalhandler.js +1 -1
  206. package/source/smart.timeinput.js +1 -1
  207. package/source/smart.timepicker.js +1 -1
  208. package/source/smart.toast.js +1 -1
  209. package/source/smart.tooltip.js +1 -1
  210. package/source/smart.tree.js +1 -1
  211. package/source/smart.validationpanel.js +1 -1
  212. package/source/smart.validator.js +1 -1
  213. package/source/smart.window.js +1 -1
  214. package/source/styles/bootstrap/smart.bootstrap.blue.css +3369 -3372
  215. package/source/styles/bootstrap/smart.bootstrap.css +3369 -3372
  216. package/source/styles/bootstrap/smart.bootstrap.cyan.css +3369 -3372
  217. package/source/styles/bootstrap/smart.bootstrap.green.css +3369 -3372
  218. package/source/styles/bootstrap/smart.bootstrap.indigo.css +3369 -3372
  219. package/source/styles/bootstrap/smart.bootstrap.orange.css +3369 -3372
  220. package/source/styles/bootstrap/smart.bootstrap.pink.css +3369 -3372
  221. package/source/styles/bootstrap/smart.bootstrap.purple.css +3369 -3372
  222. package/source/styles/bootstrap/smart.bootstrap.red.css +3369 -3372
  223. package/source/styles/bootstrap/smart.bootstrap.teal.css +3369 -3372
  224. package/source/styles/bootstrap/smart.bootstrap.turquoise.css +3369 -3372
  225. package/source/styles/components/smart.array.css +1 -1
  226. package/source/styles/components/smart.calendar.css +2 -2
  227. package/source/styles/components/smart.cardview.css +2 -2
  228. package/source/styles/components/smart.checkinput.css +1 -1
  229. package/source/styles/components/smart.colorinput.css +1 -1
  230. package/source/styles/components/smart.columnpanel.css +1 -1
  231. package/source/styles/components/smart.countryinput.css +1 -1
  232. package/source/styles/components/smart.dateinput.css +2 -2
  233. package/source/styles/components/smart.daterangeinput.css +2 -2
  234. package/source/styles/components/smart.datetimeformatpanel.css +1 -1
  235. package/source/styles/components/smart.datetimepicker.css +1 -1
  236. package/source/styles/components/smart.editor.css +2 -2
  237. package/source/styles/components/smart.filterbuilder.css +2 -2
  238. package/source/styles/components/smart.filterpanel.css +1 -1
  239. package/source/styles/components/smart.ganttchart.css +2 -2
  240. package/source/styles/components/smart.grid.css +3 -3
  241. package/source/styles/components/smart.gridpanel.css +1 -1
  242. package/source/styles/components/smart.input.css +1 -1
  243. package/source/styles/components/smart.kanban.css +2 -2
  244. package/source/styles/components/smart.maskedtextbox.css +1 -1
  245. package/source/styles/components/smart.multicolumnfilterpanel.css +2 -2
  246. package/source/styles/components/smart.multicomboinput.css +1 -1
  247. package/source/styles/components/smart.multiinput.css +1 -1
  248. package/source/styles/components/smart.multilinetextbox.css +1 -1
  249. package/source/styles/components/smart.numberformatpanel.css +1 -1
  250. package/source/styles/components/smart.numberinput.css +1 -1
  251. package/source/styles/components/smart.pager.css +1 -1
  252. package/source/styles/components/smart.passwordinput.css +1 -1
  253. package/source/styles/components/smart.passwordtextbox.css +1 -1
  254. package/source/styles/components/smart.phoneinput.css +1 -1
  255. package/source/styles/components/smart.pivottable.css +1 -1
  256. package/source/styles/components/smart.querybuilder.css +3 -3
  257. package/source/styles/components/smart.ribbon.css +1 -1
  258. package/source/styles/components/smart.scheduler.css +2 -2
  259. package/source/styles/components/smart.sortpanel.css +1 -1
  260. package/source/styles/components/smart.table.css +1 -1
  261. package/source/styles/components/smart.textarea.css +1 -1
  262. package/source/styles/components/smart.textbox.css +1 -1
  263. package/source/styles/components/smart.timeinput.css +1 -1
  264. package/source/styles/components/smart.validationpanel.css +1 -1
  265. package/source/styles/components/smart.window.css +1 -1
  266. package/source/styles/default/scss/textbox/_multi-combo-input.scss +5 -0
  267. package/source/styles/default/smart.accordion.css +309 -309
  268. package/source/styles/default/smart.array.css +77 -77
  269. package/source/styles/default/smart.badge.css +50 -50
  270. package/source/styles/default/smart.barcode.css +3 -3
  271. package/source/styles/default/smart.breadcrumb.css +324 -324
  272. package/source/styles/default/smart.button.css +515 -515
  273. package/source/styles/default/smart.calendar.css +742 -742
  274. package/source/styles/default/smart.card.css +53 -53
  275. package/source/styles/default/smart.chart.css +119 -119
  276. package/source/styles/default/smart.checkbox.css +148 -148
  277. package/source/styles/default/smart.chip.css +101 -101
  278. package/source/styles/default/smart.colorpanel.css +617 -617
  279. package/source/styles/default/smart.colorpicker.css +132 -132
  280. package/source/styles/default/smart.currencyformatpanel.css +71 -71
  281. package/source/styles/default/smart.dateformatpanel.css +105 -105
  282. package/source/styles/default/smart.datetimepicker.css +611 -611
  283. package/source/styles/default/smart.dockinglayout.css +748 -748
  284. package/source/styles/default/smart.dropdownbutton.css +257 -257
  285. package/source/styles/default/smart.editor.css +1528 -1527
  286. package/source/styles/default/smart.editors.css +150 -150
  287. package/source/styles/default/smart.fileupload.css +498 -498
  288. package/source/styles/default/smart.ganttchart.css +1594 -1594
  289. package/source/styles/default/smart.gauge.css +145 -145
  290. package/source/styles/default/smart.inputgroup.css +483 -483
  291. package/source/styles/default/smart.layout.css +465 -465
  292. package/source/styles/default/smart.layouts.css +483 -483
  293. package/source/styles/default/smart.led.css +144 -144
  294. package/source/styles/default/smart.link-button.css +321 -321
  295. package/source/styles/default/smart.listbox.css +564 -564
  296. package/source/styles/default/smart.listmenu.css +661 -661
  297. package/source/styles/default/smart.loader.css +203 -203
  298. package/source/styles/default/smart.maskedtextbox.css +27 -27
  299. package/source/styles/default/smart.multilinetextbox.css +190 -190
  300. package/source/styles/default/smart.multisplitbutton.css +225 -225
  301. package/source/styles/default/smart.numberformatpanel.css +72 -72
  302. package/source/styles/default/smart.numerictextbox.css +522 -522
  303. package/source/styles/default/smart.pager.css +253 -253
  304. package/source/styles/default/smart.passwordtextbox.css +129 -129
  305. package/source/styles/default/smart.path.css +581 -581
  306. package/source/styles/default/smart.pivottable.css +800 -800
  307. package/source/styles/default/smart.powerbutton.css +100 -100
  308. package/source/styles/default/smart.progressbar.css +501 -501
  309. package/source/styles/default/smart.qrcode.css +3 -3
  310. package/source/styles/default/smart.querybuilder.css +624 -623
  311. package/source/styles/default/smart.radiobutton.css +137 -137
  312. package/source/styles/default/smart.rating.css +17 -17
  313. package/source/styles/default/smart.scheduler.css +2789 -2789
  314. package/source/styles/default/smart.scrollbar.css +118 -118
  315. package/source/styles/default/smart.scrollviewer.css +109 -109
  316. package/source/styles/default/smart.slider.css +464 -464
  317. package/source/styles/default/smart.sortable.css +114 -114
  318. package/source/styles/default/smart.splitter.css +395 -395
  319. package/source/styles/default/smart.switchbutton.css +293 -293
  320. package/source/styles/default/smart.table.css +2025 -2025
  321. package/source/styles/default/smart.tabs.css +923 -923
  322. package/source/styles/default/smart.tank.css +661 -661
  323. package/source/styles/default/smart.textbox.css +3431 -3427
  324. package/source/styles/default/smart.timepicker.css +150 -150
  325. package/source/styles/default/smart.toast.css +252 -252
  326. package/source/styles/default/smart.toggle.css +175 -175
  327. package/source/styles/default/smart.tooltip.css +124 -124
  328. package/source/styles/default/smart.tree.css +783 -783
  329. package/source/styles/default/smart.validationpanel.css +116 -116
  330. package/source/styles/default/smart.window.css +829 -829
  331. package/source/styles/smart.default.css +4 -4
  332. package/source/styles/smart.fluent.css +3313 -3313
  333. package/source/typescript/smart.elements.d.ts +1 -2
  334. package/source/typescript/smart.ganttchart.d.ts +1 -2
package/source/styles/default/smart.colorpanel.css CHANGED
@@ -1,618 +1,618 @@
1
- /* smart-color-panel */
2
- smart-color-panel {
3
- width: var(--smart-color-panel-default-width);
4
- height: var(--smart-color-panel-default-height);
5
- user-select: none;
6
- }
7
- smart-color-panel .no-touch {
8
- touch-action: none;
9
- }
10
- smart-color-panel.smart-element {
11
- display: inline-block;
12
- overflow: initial;
13
- border: none;
14
- background: var(--smart-background);
15
- color: var(--smart-background-color);
16
- }
17
- smart-color-panel[disabled] {
18
- opacity: 0.55;
19
- pointer-events: none;
20
- user-select: none;
21
- }
22
-
23
- .smart-color-panel .smart-content {
24
- position: relative;
25
- cursor: pointer;
26
- display: flex;
27
- width: 100%;
28
- height: 100%;
29
- }
30
- .smart-color-panel label {
31
- /*min-width: 16px;*/
32
- display: inline-block;
33
- user-select: none;
34
- }
35
- .smart-color-panel smart-tooltip .smart-tooltip-content {
36
- box-shadow: 0px 0px 20px 0px #8b8b8b;
37
- }
38
- .smart-color-panel input[type=number]::-webkit-inner-spin-button,
39
- .smart-color-panel input[type=number]::-webkit-outer-spin-button {
40
- -webkit-appearance: none;
41
- margin: 0;
42
- }
43
- .smart-color-panel input[type=number] {
44
- -moz-appearance: textfield;
45
- -webkit-appearance: textfied;
46
- }
47
- .smart-color-panel .color-input {
48
- width: 70px;
49
- height: var(--smart-editor-height);
50
- margin: 5px;
51
- padding: 5px;
52
- border: var(--smart-border-width) solid var(--smart-border);
53
- border-radius: var(--smart-border-radius);
54
- background: var(--smart-background);
55
- color: var(--smart-color);
56
- outline: none;
57
- }
58
- .smart-color-panel .color-input:focus {
59
- border-color: var(--smart-outline);
60
- }
61
- .smart-color-panel .color-input::selection {
62
- background: var(--smart-editor-selection);
63
- color: var(--smart-editor-selection-color);
64
- }
65
- .smart-color-panel .grid-mode-container,
66
- .smart-color-panel .palette-mode-container {
67
- width: 100%;
68
- max-height: 100%;
69
- position: relative;
70
- }
71
- .smart-color-panel .custom-color-selection .buttons-container {
72
- display: flex;
73
- align-items: center;
74
- justify-content: flex-end;
75
- }
76
- .smart-color-panel .gray-shades-box,
77
- .smart-color-panel .spectrum-box,
78
- .smart-color-panel .custom-colors-box,
79
- .smart-color-panel .grid-samples-container {
80
- display: grid;
81
- grid-template-columns: repeat(var(--smart-color-panel-grid-mode-column-count), auto);
82
- }
83
- .smart-color-panel .hue-scale {
84
- display: block;
85
- max-width: 100px;
86
- height: var(--smart-color-panel-palette-size);
87
- background-image: linear-gradient(#ff0000, #ff00ff, #0000ff, #00ffff, #00ff00, #ffff00, #ff0000);
88
- /* reversed (#ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000) */
89
- width: 20px;
90
- margin-left: 15px;
91
- margin-right: 15px;
92
- position: relative;
93
- padding: 1px;
94
- border: var(--smart-border-width) solid var(--smart-border);
95
- background-clip: content-box;
96
- -webkit-background-clip: content-box;
97
- }
98
- .smart-color-panel .hue-scale-thumb {
99
- width: 100%;
100
- height: 10px;
101
- box-sizing: content-box;
102
- border: 3px solid white;
103
- border-left-width: 10px;
104
- border-right-width: 10px;
105
- position: absolute;
106
- left: -10px;
107
- top: -3px;
108
- box-shadow: 0px 0px 5px #666, inset 0px 0px 2px 0px #999, inset 0px 0px 2px 0px #999;
109
- opacity: 0.8;
110
- cursor: pointer;
111
- }
112
- .smart-color-panel .color-palette-thumb {
113
- width: 0px;
114
- height: 0px;
115
- top: 0px;
116
- position: absolute;
117
- z-index: 10;
118
- pointer-events: none;
119
- }
120
- .smart-color-panel .color-palette-thumb:after {
121
- content: " ";
122
- position: absolute;
123
- left: -14px;
124
- top: -14px;
125
- width: 16px;
126
- height: 16px;
127
- border: 5px solid white;
128
- border-radius: 50%;
129
- box-shadow: var(--smart-elevation-2);
130
- }
131
- .smart-color-panel .color-palette {
132
- width: var(--smart-color-panel-palette-size);
133
- height: var(--smart-color-panel-palette-size);
134
- background-color: red;
135
- display: block;
136
- position: relative;
137
- overflow: hidden;
138
- cursor: crosshair;
139
- padding: 1px;
140
- border: 1px solid lightgray;
141
- background-clip: content-box;
142
- -webkit-background-clip: content-box;
143
- }
144
- .smart-color-panel .color-palette:before, .smart-color-panel .color-palette:after {
145
- width: 100%;
146
- height: 100%;
147
- content: " ";
148
- display: block;
149
- position: absolute;
150
- left: 0;
151
- top: 0;
152
- z-index: 0;
153
- }
154
- .smart-color-panel .color-palette:before {
155
- background-image: linear-gradient(90deg, white, transparent);
156
- }
157
- .smart-color-panel .color-palette:after {
158
- background-image: linear-gradient(transparent, black);
159
- }
160
- .smart-color-panel .color-controls-container {
161
- display: block;
162
- max-width: 100px;
163
- overflow: hidden;
164
- }
165
- .smart-color-panel .color-palette-container {
166
- width: 100%;
167
- height: var(--smart-color-panel-palette-size);
168
- display: flex;
169
- flex-direction: row;
170
- }
171
- .smart-color-panel .preview-container {
172
- width: 100%;
173
- min-width: 100px;
174
- /* or use variable thet defines the default width of the column*/
175
- height: 100px;
176
- background-color: white;
177
- margin-bottom: 20px;
178
- position: relative;
179
- padding: 1px;
180
- border: var(--smart-border-width) solid var(--smart-border);
181
- background-clip: content-box;
182
- -webkit-background-clip: content-box;
183
- }
184
- .smart-color-panel .preview-container-top,
185
- .smart-color-panel .preview-container-bottom {
186
- width: 100%;
187
- height: 50%;
188
- display: block;
189
- background-color: white;
190
- }
191
- .smart-color-panel .alpha-channel-container {
192
- flex-direction: row;
193
- width: 100%;
194
- align-items: center;
195
- align-content: space-around;
196
- margin-top: 5px;
197
- display: none;
198
- }
199
- .smart-color-panel .alpha-channel-container label {
200
- width: 48px;
201
- }
202
- .smart-color-panel .alpha-channel-scale {
203
- width: var(--smart-color-panel-palette-size);
204
- height: 20px;
205
- margin-top: 15px;
206
- margin-bottom: 15px;
207
- position: relative;
208
- border: var(--smart-border-width) solid var(--smart-border);
209
- margin-right: 20px;
210
- }
211
- .smart-color-panel .alpha-channel-scale:before, .smart-color-panel .alpha-channel-scale:after {
212
- position: absolute;
213
- left: 0;
214
- top: 0;
215
- display: block;
216
- width: 100%;
217
- height: 100%;
218
- content: " ";
219
- }
220
- .smart-color-panel .alpha-channel-scale:before {
221
- background-image: linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 74%, #cccccc 75%, #cccccc), linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 74%, #cccccc 75%, #cccccc);
222
- background-position: 0px 6px, 8px 14px;
223
- background-size: 16px 16px;
224
- }
225
- .smart-color-panel .alpha-channel-scale:after {
226
- background-image: linear-gradient(90deg, var(--smart-color-panel-alpha-channel-color), transparent);
227
- box-shadow: inset 1px -1px 0px 0px #ffffff, inset -1px 1px 0px 0px #ffffff;
228
- }
229
- .smart-color-panel .alpha-channel-thumb {
230
- width: 10px;
231
- height: 100%;
232
- box-sizing: content-box;
233
- border: 3px solid white;
234
- border-top-width: 10px;
235
- border-bottom-width: 10px;
236
- position: absolute;
237
- left: -3px;
238
- top: -10px;
239
- opacity: 0.8;
240
- box-shadow: 0px 0px 5px #666, inset 0px 0px 2px 0px #999, inset 0px 0px 2px 0px #999;
241
- cursor: pointer;
242
- z-index: 1;
243
- }
244
- .smart-color-panel .buttons-container {
245
- display: none;
246
- flex-direction: row;
247
- justify-content: flex-end;
248
- padding: 10px 0 0 0;
249
- }
250
- .smart-color-panel .buttons-container smart-button {
251
- width: 100px;
252
- }
253
- .smart-color-panel .buttons-container smart-button:last-of-type {
254
- margin-left: 20px;
255
- }
256
- .smart-color-panel .gradient-background {
257
- background-image: linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 74%, #cccccc 75%, #cccccc), linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 74%, #cccccc 75%, #cccccc);
258
- background-position: 0px 6px, 8px 14px;
259
- background-size: 16px 16px;
260
- }
261
- .smart-color-panel .user-color-container {
262
- width: var(--smart-color-panel-grid-mode-item-size);
263
- height: var(--smart-color-panel-grid-mode-item-size);
264
- background-image: linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 74%, #cccccc 75%, #cccccc), linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 74%, #cccccc 75%, #cccccc);
265
- background-position: 0px 5px, 5px 10px;
266
- background-size: 10px 10px;
267
- }
268
- .smart-color-panel .material-grid-samples-container {
269
- display: grid;
270
- grid-template-columns: 80px repeat(14, auto);
271
- }
272
- .smart-color-panel .button-custom-color {
273
- margin: 5px 0px 5px 0px;
274
- }
275
- .smart-color-panel .color-sample {
276
- width: var(--smart-color-panel-grid-mode-item-size);
277
- height: var(--smart-color-panel-grid-mode-item-size);
278
- margin: var(--smart-color-panel-grid-mode-columns-gap);
279
- box-sizing: border-box;
280
- cursor: pointer;
281
- border: var(--smart-border-width) solid rgba(0, 0, 0, 0.1);
282
- background-clip: content-box;
283
- -webkit-background-clip: content-box;
284
- text-overflow: ellipsis;
285
- }
286
- .smart-color-panel .color-sample.user-color {
287
- position: relative;
288
- background-clip: padding-box;
289
- -webkit-background-clip: padding-box;
290
- }
291
- .smart-color-panel .color-sample.user-color:before {
292
- position: absolute;
293
- content: "";
294
- width: 100%;
295
- height: 100%;
296
- background-image: linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 74%, #cccccc 75%, #cccccc), linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 74%, #cccccc 75%, #cccccc);
297
- background-position: 0px 5px, 5px 10px;
298
- background-size: 10px 10px;
299
- top: 50%;
300
- left: 50%;
301
- transform: translate(-50%, -50%);
302
- z-index: -1;
303
- }
304
- .smart-color-panel .color-sample.selected {
305
- border: 2px solid var(--smart-ui-state-color-selected);
306
- padding: 1px;
307
- }
308
- .smart-color-panel .color-sample.empty {
309
- visibility: hidden;
310
- }
311
- .smart-color-panel .color-sample.header, .smart-color-panel .color-sample.label-column {
312
- display: flex;
313
- align-items: center;
314
- justify-content: center;
315
- font-size: 11px;
316
- border-width: 0px;
317
- pointer-events: none;
318
- user-select: none;
319
- }
320
- .smart-color-panel .color-sample.label-column {
321
- width: 100%;
322
- justify-content: flex-start;
323
- }
324
- .smart-color-panel .color-sample.color-sample-column, .smart-color-panel .color-sample.color-sample-row {
325
- width: 16px;
326
- /*to be calculated dinamically*/
327
- height: 16px;
328
- /*to be calculated dinamically*/
329
- border: 2px solid rgba(0, 0, 0, 0.2);
330
- padding: 1px;
331
- background: repeating-linear-gradient(-55deg, #fff, #fff 10px, #eee 10px, #eee 20px);
332
- }
333
- .smart-color-panel .color-sample[transparent] {
334
- position: relative;
335
- }
336
- .smart-color-panel .color-sample[transparent]:after {
337
- content: "";
338
- border: 1px solid red;
339
- top: 50%;
340
- left: 50%;
341
- transform: translate(-50%, -50%) rotate(-45deg);
342
- position: absolute;
343
- width: 150%;
344
- border-radius: 5px;
345
- }
346
- .smart-color-panel .user-color.empty {
347
- background: repeating-linear-gradient(-55deg, #fff, #fff 10px, #eee 10px, #eee 20px);
348
- background-origin: content-box;
349
- border-color: lightgray;
350
- }
351
- .smart-color-panel .default-samples-container div {
352
- display: grid;
353
- grid-template-columns: repeat(10, auto);
354
- justify-items: center;
355
- }
356
- .smart-color-panel .default-samples-container .theme-shades-box {
357
- margin-top: var(--smart-color-panel-default-mode-sections-gap);
358
- margin-bottom: var(--smart-color-panel-default-mode-sections-gap);
359
- }
360
- .smart-color-panel .default-samples-container .theme-colors-label,
361
- .smart-color-panel .default-samples-container .standard-colors-label {
362
- display: block;
363
- font-weight: 600;
364
- margin-left: 2px;
365
- margin-top: var(--smart-color-panel-default-mode-sections-gap);
366
- margin-bottom: var(--smart-color-panel-default-mode-sections-gap);
367
- margin-bottom: calc(var(--smart-color-panel-default-mode-sections-gap) / 2);
368
- }
369
- .smart-color-panel .hex-mode-resize-trigger {
370
- visibility: hidden;
371
- position: absolute;
372
- left: 0;
373
- top: 0;
374
- }
375
- .smart-color-panel[edit-alpha-channel] .alpha-channel-container {
376
- display: flex;
377
- }
378
- .smart-color-panel[enable-custom-colors] .button-custom-color,
379
- .smart-color-panel[enable-custom-colors] .user-samples-container {
380
- width: 100%;
381
- display: flex;
382
- align-items: center;
383
- }
384
- .smart-color-panel[enable-custom-colors]:not([display-mode=palette]):not([display-mdoe=radial]) .custom-color-selection .palette-mode-container {
385
- display: block;
386
- }
387
- .smart-color-panel:not([display-mode=radial]) .canvas-radial {
388
- display: none;
389
- }
390
- .smart-color-panel[display-mode=hexagonal] .brightness-scale, .smart-color-panel[display-mode=radial] .brightness-scale {
391
- display: block;
392
- max-width: 100px;
393
- height: var(--smart-color-panel-palette-size);
394
- background-image: linear-gradient(#ff0000, #ff00ff, #0000ff, #00ffff, #00ff00, #ffff00, #ff0000);
395
- /* reversed (#ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000) */
396
- width: 20px;
397
- margin-left: 15px;
398
- margin-right: 15px;
399
- position: relative;
400
- padding: 1px;
401
- border: var(--smart-border-width) solid var(--smart-border);
402
- background-clip: content-box;
403
- -webkit-background-clip: content-box;
404
- }
405
- .smart-color-panel[display-mode=hexagonal] .brightness-scale-thumb, .smart-color-panel[display-mode=radial] .brightness-scale-thumb {
406
- width: 100%;
407
- height: 10px;
408
- box-sizing: content-box;
409
- border: 3px solid white;
410
- border-left-width: 10px;
411
- border-right-width: 10px;
412
- position: absolute;
413
- left: -10px;
414
- top: -3px;
415
- box-shadow: 0px 0px 5px #666, inset 0px 0px 2px 0px #999, inset 0px 0px 2px 0px #999;
416
- opacity: 0.8;
417
- cursor: pointer;
418
- }
419
- .smart-color-panel[display-mode=hexagonal] .alpha-channel-scale {
420
- width: var(--smart-color-panel-palette-width);
421
- }
422
- .smart-color-panel[display-mode=hexagonal] .brightness-scale {
423
- display: block;
424
- height: var(--smart-color-panel-palette-height);
425
- background-image: linear-gradient(white, black);
426
- }
427
- .smart-color-panel[display-mode=hexagonal] .selected {
428
- stroke: white;
429
- stroke-width: 4px;
430
- }
431
- .smart-color-panel[display-mode=hexagonal] .color-palette-container {
432
- height: var(--smart-color-panel-palette-height);
433
- }
434
- .smart-color-panel[display-mode=hexagonal] .palette-mode-container {
435
- display: block;
436
- }
437
- .smart-color-panel[display-mode=hexagonal] .color-palette-hexagonal {
438
- display: block;
439
- }
440
- .smart-color-panel[display-mode=radial] .hue-scale {
441
- display: none;
442
- }
443
- .smart-color-panel[display-mode=radial] .brightness-scale {
444
- background-image: linear-gradient(white, black);
445
- }
446
- .smart-color-panel[display-mode=radial] .color-palette-radial {
447
- width: var(--smart-color-panel-palette-size);
448
- height: var(--smart-color-panel-palette-size);
449
- display: block;
450
- position: relative;
451
- overflow: hidden;
452
- cursor: crosshair;
453
- padding: 1px;
454
- border: 1px solid lightgray;
455
- background-clip: content-box;
456
- -webkit-background-clip: content-box;
457
- background: conic-gradient(from 90deg, red, yellow, lime, aqua, blue, magenta, red) rgb(255, 0, 90);
458
- border-radius: 50%;
459
- }
460
- .smart-color-panel[display-mode=radial] .color-palette-radial:after {
461
- width: 100%;
462
- height: 100%;
463
- content: " ";
464
- display: block;
465
- position: absolute;
466
- left: 0px;
467
- top: 0px;
468
- z-index: 0;
469
- background: black;
470
- opacity: var(--smart-color-panel-brightness);
471
- border-radius: 50%;
472
- }
473
- .smart-color-panel[display-mode=radial] .color-palette-radial-thumb {
474
- width: 0px;
475
- height: 0px;
476
- position: absolute;
477
- z-index: 10;
478
- pointer-events: none;
479
- left: 50%;
480
- top: 50%;
481
- }
482
- .smart-color-panel[display-mode=radial] .color-palette-radial-thumb:after {
483
- content: " ";
484
- position: absolute;
485
- left: -14px;
486
- top: -14px;
487
- width: 16px;
488
- height: 16px;
489
- border: 5px solid white;
490
- border-radius: 50%;
491
- box-shadow: var(--smart-elevation-2);
492
- }
493
- .smart-color-panel[display-mode=radial] .white-radial-gradient {
494
- z-index: 2;
495
- width: var(--smart-color-panel-palette-size);
496
- height: var(--smart-color-panel-palette-size);
497
- position: absolute;
498
- top: 50%;
499
- left: 50%;
500
- transform: translate(-50%, -50%);
501
- border-radius: 50%;
502
- background-image: radial-gradient(circle, white, transparent);
503
- }
504
- .smart-color-panel[display-mode=radial] .palette-mode-container {
505
- display: block;
506
- }
507
- .smart-color-panel[display-mode=radial] canvas {
508
- transform: rotate(-180deg);
509
- transform-origin: center;
510
- }
511
- .smart-color-panel[display-mode=radial][inverted] .color-palette-radial:after {
512
- background: white;
513
- }
514
- .smart-color-panel[display-mode=radial][inverted] .white-radial-gradient {
515
- background: radial-gradient(black, transparent);
516
- }
517
- .smart-color-panel[display-mode=spectrumGrid] .spectrum-grid-samples-container {
518
- display: block;
519
- }
520
- .smart-color-panel[display-mode=default] .default-samples-container {
521
- display: block;
522
- }
523
- .smart-color-panel[display-mode=palette] .palette-mode-container {
524
- display: block;
525
- }
526
- .smart-color-panel[display-mode=palette] .color-palette {
527
- display: block;
528
- }
529
- .smart-color-panel[display-mode=materialGrid] .color-palette {
530
- display: block;
531
- }
532
- .smart-color-panel[apply-value-mode=useButtons] .buttons-container {
533
- display: flex;
534
- align-items: center;
535
- justify-content: flex-end;
536
- }
537
-
538
- .smart-color-panel .palette-mode-container,
539
- .smart-color-panel .spectrum-grid-samples-container,
540
- .smart-color-panel .color-palette-hexagonal,
541
- .smart-color-panel .custom-color-selection .grid-mode-container,
542
- .smart-color-panel .button-custom-color,
543
- .smart-color-panel .user-samples-container {
544
- display: none;
545
- }
546
- .smart-color-panel[display-mode=default] .grid-samples-container,
547
- .smart-color-panel[display-mode=default] .palette-mode-container,
548
- .smart-color-panel[display-mode=default] .material-grid-samples-container {
549
- display: none;
550
- }
551
- .smart-color-panel[display-mode=grid] .palette-mode-container,
552
- .smart-color-panel[display-mode=grid] .material-grid-samples-container,
553
- .smart-color-panel[display-mode=grid] .default-samples-container {
554
- display: none;
555
- }
556
- .smart-color-panel[display-mode=spectrumGrid] .palette-mode-container,
557
- .smart-color-panel[display-mode=spectrumGrid] .grid-samples-container,
558
- .smart-color-panel[display-mode=spectrumGrid] .material-grid-samples-container,
559
- .smart-color-panel[display-mode=spectrumGrid] .default-samples-container {
560
- display: none;
561
- }
562
- .smart-color-panel[display-mode=materialGrid] .palette-mode-container,
563
- .smart-color-panel[display-mode=materialGrid] .grid-samples-container,
564
- .smart-color-panel[display-mode=materialGrid] .default-samples-container {
565
- display: none;
566
- }
567
- .smart-color-panel[display-mode=hexagonal] .grid-samples-container,
568
- .smart-color-panel[display-mode=hexagonal] .spectrum-grid-samples-container,
569
- .smart-color-panel[display-mode=hexagonal] .color-palette,
570
- .smart-color-panel[display-mode=hexagonal] .hue-scale,
571
- .smart-color-panel[display-mode=hexagonal] .default-samples-container {
572
- display: none;
573
- }
574
- .smart-color-panel[display-mode=palette] .color-palette-radial,
575
- .smart-color-panel[display-mode=palette] .grid-mode-container {
576
- display: none;
577
- }
578
- .smart-color-panel[display-mode=radial] .color-palette,
579
- .smart-color-panel[display-mode=radial] .grid-mode-container {
580
- display: none;
581
- }
582
- .smart-color-panel[enable-custom-colors][display-mode=hexagonal] .button-custom-color,
583
- .smart-color-panel[enable-custom-colors][display-mode=hexagonal] .user-samples-container {
584
- display: none;
585
- }
586
- .smart-color-panel[hide-preview-container] .preview-container {
587
- display: none;
588
- }
589
- .smart-color-panel[hide-alpha-editor] .a-channel {
590
- display: none;
591
- }
592
- .smart-color-panel[hide-r-g-b-editor] .r-channel,
593
- .smart-color-panel[hide-r-g-b-editor] .g-channel,
594
- .smart-color-panel[hide-r-g-b-editor] .b-channel {
595
- display: none;
596
- }
597
- .smart-color-panel[hide-h-e-x-editor] .hex {
598
- display: none;
599
- }
600
-
601
- /* smart-color-panel */
602
- smart-color-panel[right-to-left] .grid-mode-container,
603
- smart-color-panel[right-to-left] .color-palette-container,
604
- smart-color-panel[right-to-left] .alpha-channel-container {
605
- direction: rtl;
606
- }
607
- smart-color-panel[right-to-left] .alpha-channel-scale {
608
- margin: 0 0 0 20px;
609
- }
610
- smart-color-panel[right-to-left] .alpha-channel-scale:after {
611
- background-image: linear-gradient(90deg, transparent, var(--smart-color-panel-alpha-channel-color));
612
- }
613
- smart-color-panel[right-to-left] .buttons-container {
614
- flex-direction: row-reverse;
615
- }
616
- smart-color-panel[right-to-left] .buttons-container smart-button:last-of-type {
617
- margin: 0 0 0 20px;
1
+ /* smart-color-panel */
2
+ smart-color-panel {
3
+ width: var(--smart-color-panel-default-width);
4
+ height: var(--smart-color-panel-default-height);
5
+ user-select: none;
6
+ }
7
+ smart-color-panel .no-touch {
8
+ touch-action: none;
9
+ }
10
+ smart-color-panel.smart-element {
11
+ display: inline-block;
12
+ overflow: initial;
13
+ border: none;
14
+ background: var(--smart-background);
15
+ color: var(--smart-background-color);
16
+ }
17
+ smart-color-panel[disabled] {
18
+ opacity: 0.55;
19
+ pointer-events: none;
20
+ user-select: none;
21
+ }
22
+
23
+ .smart-color-panel .smart-content {
24
+ position: relative;
25
+ cursor: pointer;
26
+ display: flex;
27
+ width: 100%;
28
+ height: 100%;
29
+ }
30
+ .smart-color-panel label {
31
+ /*min-width: 16px;*/
32
+ display: inline-block;
33
+ user-select: none;
34
+ }
35
+ .smart-color-panel smart-tooltip .smart-tooltip-content {
36
+ box-shadow: 0px 0px 20px 0px #8b8b8b;
37
+ }
38
+ .smart-color-panel input[type=number]::-webkit-inner-spin-button,
39
+ .smart-color-panel input[type=number]::-webkit-outer-spin-button {
40
+ -webkit-appearance: none;
41
+ margin: 0;
42
+ }
43
+ .smart-color-panel input[type=number] {
44
+ -moz-appearance: textfield;
45
+ -webkit-appearance: textfied;
46
+ }
47
+ .smart-color-panel .color-input {
48
+ width: 70px;
49
+ height: var(--smart-editor-height);
50
+ margin: 5px;
51
+ padding: 5px;
52
+ border: var(--smart-border-width) solid var(--smart-border);
53
+ border-radius: var(--smart-border-radius);
54
+ background: var(--smart-background);
55
+ color: var(--smart-color);
56
+ outline: none;
57
+ }
58
+ .smart-color-panel .color-input:focus {
59
+ border-color: var(--smart-outline);
60
+ }
61
+ .smart-color-panel .color-input::selection {
62
+ background: var(--smart-editor-selection);
63
+ color: var(--smart-editor-selection-color);
64
+ }
65
+ .smart-color-panel .grid-mode-container,
66
+ .smart-color-panel .palette-mode-container {
67
+ width: 100%;
68
+ max-height: 100%;
69
+ position: relative;
70
+ }
71
+ .smart-color-panel .custom-color-selection .buttons-container {
72
+ display: flex;
73
+ align-items: center;
74
+ justify-content: flex-end;
75
+ }
76
+ .smart-color-panel .gray-shades-box,
77
+ .smart-color-panel .spectrum-box,
78
+ .smart-color-panel .custom-colors-box,
79
+ .smart-color-panel .grid-samples-container {
80
+ display: grid;
81
+ grid-template-columns: repeat(var(--smart-color-panel-grid-mode-column-count), auto);
82
+ }
83
+ .smart-color-panel .hue-scale {
84
+ display: block;
85
+ max-width: 100px;
86
+ height: var(--smart-color-panel-palette-size);
87
+ background-image: linear-gradient(#ff0000, #ff00ff, #0000ff, #00ffff, #00ff00, #ffff00, #ff0000);
88
+ /* reversed (#ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000) */
89
+ width: 20px;
90
+ margin-left: 15px;
91
+ margin-right: 15px;
92
+ position: relative;
93
+ padding: 1px;
94
+ border: var(--smart-border-width) solid var(--smart-border);
95
+ background-clip: content-box;
96
+ -webkit-background-clip: content-box;
97
+ }
98
+ .smart-color-panel .hue-scale-thumb {
99
+ width: 100%;
100
+ height: 10px;
101
+ box-sizing: content-box;
102
+ border: 3px solid white;
103
+ border-left-width: 10px;
104
+ border-right-width: 10px;
105
+ position: absolute;
106
+ left: -10px;
107
+ top: -3px;
108
+ box-shadow: 0px 0px 5px #666, inset 0px 0px 2px 0px #999, inset 0px 0px 2px 0px #999;
109
+ opacity: 0.8;
110
+ cursor: pointer;
111
+ }
112
+ .smart-color-panel .color-palette-thumb {
113
+ width: 0px;
114
+ height: 0px;
115
+ top: 0px;
116
+ position: absolute;
117
+ z-index: 10;
118
+ pointer-events: none;
119
+ }
120
+ .smart-color-panel .color-palette-thumb:after {
121
+ content: " ";
122
+ position: absolute;
123
+ left: -14px;
124
+ top: -14px;
125
+ width: 16px;
126
+ height: 16px;
127
+ border: 5px solid white;
128
+ border-radius: 50%;
129
+ box-shadow: var(--smart-elevation-2);
130
+ }
131
+ .smart-color-panel .color-palette {
132
+ width: var(--smart-color-panel-palette-size);
133
+ height: var(--smart-color-panel-palette-size);
134
+ background-color: red;
135
+ display: block;
136
+ position: relative;
137
+ overflow: hidden;
138
+ cursor: crosshair;
139
+ padding: 1px;
140
+ border: 1px solid lightgray;
141
+ background-clip: content-box;
142
+ -webkit-background-clip: content-box;
143
+ }
144
+ .smart-color-panel .color-palette:before, .smart-color-panel .color-palette:after {
145
+ width: 100%;
146
+ height: 100%;
147
+ content: " ";
148
+ display: block;
149
+ position: absolute;
150
+ left: 0;
151
+ top: 0;
152
+ z-index: 0;
153
+ }
154
+ .smart-color-panel .color-palette:before {
155
+ background-image: linear-gradient(90deg, white, transparent);
156
+ }
157
+ .smart-color-panel .color-palette:after {
158
+ background-image: linear-gradient(transparent, black);
159
+ }
160
+ .smart-color-panel .color-controls-container {
161
+ display: block;
162
+ max-width: 100px;
163
+ overflow: hidden;
164
+ }
165
+ .smart-color-panel .color-palette-container {
166
+ width: 100%;
167
+ height: var(--smart-color-panel-palette-size);
168
+ display: flex;
169
+ flex-direction: row;
170
+ }
171
+ .smart-color-panel .preview-container {
172
+ width: 100%;
173
+ min-width: 100px;
174
+ /* or use variable thet defines the default width of the column*/
175
+ height: 100px;
176
+ background-color: white;
177
+ margin-bottom: 20px;
178
+ position: relative;
179
+ padding: 1px;
180
+ border: var(--smart-border-width) solid var(--smart-border);
181
+ background-clip: content-box;
182
+ -webkit-background-clip: content-box;
183
+ }
184
+ .smart-color-panel .preview-container-top,
185
+ .smart-color-panel .preview-container-bottom {
186
+ width: 100%;
187
+ height: 50%;
188
+ display: block;
189
+ background-color: white;
190
+ }
191
+ .smart-color-panel .alpha-channel-container {
192
+ flex-direction: row;
193
+ width: 100%;
194
+ align-items: center;
195
+ align-content: space-around;
196
+ margin-top: 5px;
197
+ display: none;
198
+ }
199
+ .smart-color-panel .alpha-channel-container label {
200
+ width: 48px;
201
+ }
202
+ .smart-color-panel .alpha-channel-scale {
203
+ width: var(--smart-color-panel-palette-size);
204
+ height: 20px;
205
+ margin-top: 15px;
206
+ margin-bottom: 15px;
207
+ position: relative;
208
+ border: var(--smart-border-width) solid var(--smart-border);
209
+ margin-right: 20px;
210
+ }
211
+ .smart-color-panel .alpha-channel-scale:before, .smart-color-panel .alpha-channel-scale:after {
212
+ position: absolute;
213
+ left: 0;
214
+ top: 0;
215
+ display: block;
216
+ width: 100%;
217
+ height: 100%;
218
+ content: " ";
219
+ }
220
+ .smart-color-panel .alpha-channel-scale:before {
221
+ background-image: linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 74%, #cccccc 75%, #cccccc), linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 74%, #cccccc 75%, #cccccc);
222
+ background-position: 0px 6px, 8px 14px;
223
+ background-size: 16px 16px;
224
+ }
225
+ .smart-color-panel .alpha-channel-scale:after {
226
+ background-image: linear-gradient(90deg, var(--smart-color-panel-alpha-channel-color), transparent);
227
+ box-shadow: inset 1px -1px 0px 0px #ffffff, inset -1px 1px 0px 0px #ffffff;
228
+ }
229
+ .smart-color-panel .alpha-channel-thumb {
230
+ width: 10px;
231
+ height: 100%;
232
+ box-sizing: content-box;
233
+ border: 3px solid white;
234
+ border-top-width: 10px;
235
+ border-bottom-width: 10px;
236
+ position: absolute;
237
+ left: -3px;
238
+ top: -10px;
239
+ opacity: 0.8;
240
+ box-shadow: 0px 0px 5px #666, inset 0px 0px 2px 0px #999, inset 0px 0px 2px 0px #999;
241
+ cursor: pointer;
242
+ z-index: 1;
243
+ }
244
+ .smart-color-panel .buttons-container {
245
+ display: none;
246
+ flex-direction: row;
247
+ justify-content: flex-end;
248
+ padding: 10px 0 0 0;
249
+ }
250
+ .smart-color-panel .buttons-container smart-button {
251
+ width: 100px;
252
+ }
253
+ .smart-color-panel .buttons-container smart-button:last-of-type {
254
+ margin-left: 20px;
255
+ }
256
+ .smart-color-panel .gradient-background {
257
+ background-image: linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 74%, #cccccc 75%, #cccccc), linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 74%, #cccccc 75%, #cccccc);
258
+ background-position: 0px 6px, 8px 14px;
259
+ background-size: 16px 16px;
260
+ }
261
+ .smart-color-panel .user-color-container {
262
+ width: var(--smart-color-panel-grid-mode-item-size);
263
+ height: var(--smart-color-panel-grid-mode-item-size);
264
+ background-image: linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 74%, #cccccc 75%, #cccccc), linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 74%, #cccccc 75%, #cccccc);
265
+ background-position: 0px 5px, 5px 10px;
266
+ background-size: 10px 10px;
267
+ }
268
+ .smart-color-panel .material-grid-samples-container {
269
+ display: grid;
270
+ grid-template-columns: 80px repeat(14, auto);
271
+ }
272
+ .smart-color-panel .button-custom-color {
273
+ margin: 5px 0px 5px 0px;
274
+ }
275
+ .smart-color-panel .color-sample {
276
+ width: var(--smart-color-panel-grid-mode-item-size);
277
+ height: var(--smart-color-panel-grid-mode-item-size);
278
+ margin: var(--smart-color-panel-grid-mode-columns-gap);
279
+ box-sizing: border-box;
280
+ cursor: pointer;
281
+ border: var(--smart-border-width) solid rgba(0, 0, 0, 0.1);
282
+ background-clip: content-box;
283
+ -webkit-background-clip: content-box;
284
+ text-overflow: ellipsis;
285
+ }
286
+ .smart-color-panel .color-sample.user-color {
287
+ position: relative;
288
+ background-clip: padding-box;
289
+ -webkit-background-clip: padding-box;
290
+ }
291
+ .smart-color-panel .color-sample.user-color:before {
292
+ position: absolute;
293
+ content: "";
294
+ width: 100%;
295
+ height: 100%;
296
+ background-image: linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 74%, #cccccc 75%, #cccccc), linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 74%, #cccccc 75%, #cccccc);
297
+ background-position: 0px 5px, 5px 10px;
298
+ background-size: 10px 10px;
299
+ top: 50%;
300
+ left: 50%;
301
+ transform: translate(-50%, -50%);
302
+ z-index: -1;
303
+ }
304
+ .smart-color-panel .color-sample.selected {
305
+ border: 2px solid var(--smart-ui-state-color-selected);
306
+ padding: 1px;
307
+ }
308
+ .smart-color-panel .color-sample.empty {
309
+ visibility: hidden;
310
+ }
311
+ .smart-color-panel .color-sample.header, .smart-color-panel .color-sample.label-column {
312
+ display: flex;
313
+ align-items: center;
314
+ justify-content: center;
315
+ font-size: 11px;
316
+ border-width: 0px;
317
+ pointer-events: none;
318
+ user-select: none;
319
+ }
320
+ .smart-color-panel .color-sample.label-column {
321
+ width: 100%;
322
+ justify-content: flex-start;
323
+ }
324
+ .smart-color-panel .color-sample.color-sample-column, .smart-color-panel .color-sample.color-sample-row {
325
+ width: 16px;
326
+ /*to be calculated dinamically*/
327
+ height: 16px;
328
+ /*to be calculated dinamically*/
329
+ border: 2px solid rgba(0, 0, 0, 0.2);
330
+ padding: 1px;
331
+ background: repeating-linear-gradient(-55deg, #fff, #fff 10px, #eee 10px, #eee 20px);
332
+ }
333
+ .smart-color-panel .color-sample[transparent] {
334
+ position: relative;
335
+ }
336
+ .smart-color-panel .color-sample[transparent]:after {
337
+ content: "";
338
+ border: 1px solid red;
339
+ top: 50%;
340
+ left: 50%;
341
+ transform: translate(-50%, -50%) rotate(-45deg);
342
+ position: absolute;
343
+ width: 150%;
344
+ border-radius: 5px;
345
+ }
346
+ .smart-color-panel .user-color.empty {
347
+ background: repeating-linear-gradient(-55deg, #fff, #fff 10px, #eee 10px, #eee 20px);
348
+ background-origin: content-box;
349
+ border-color: lightgray;
350
+ }
351
+ .smart-color-panel .default-samples-container div {
352
+ display: grid;
353
+ grid-template-columns: repeat(10, auto);
354
+ justify-items: center;
355
+ }
356
+ .smart-color-panel .default-samples-container .theme-shades-box {
357
+ margin-top: var(--smart-color-panel-default-mode-sections-gap);
358
+ margin-bottom: var(--smart-color-panel-default-mode-sections-gap);
359
+ }
360
+ .smart-color-panel .default-samples-container .theme-colors-label,
361
+ .smart-color-panel .default-samples-container .standard-colors-label {
362
+ display: block;
363
+ font-weight: 600;
364
+ margin-left: 2px;
365
+ margin-top: var(--smart-color-panel-default-mode-sections-gap);
366
+ margin-bottom: var(--smart-color-panel-default-mode-sections-gap);
367
+ margin-bottom: calc(var(--smart-color-panel-default-mode-sections-gap) / 2);
368
+ }
369
+ .smart-color-panel .hex-mode-resize-trigger {
370
+ visibility: hidden;
371
+ position: absolute;
372
+ left: 0;
373
+ top: 0;
374
+ }
375
+ .smart-color-panel[edit-alpha-channel] .alpha-channel-container {
376
+ display: flex;
377
+ }
378
+ .smart-color-panel[enable-custom-colors] .button-custom-color,
379
+ .smart-color-panel[enable-custom-colors] .user-samples-container {
380
+ width: 100%;
381
+ display: flex;
382
+ align-items: center;
383
+ }
384
+ .smart-color-panel[enable-custom-colors]:not([display-mode=palette]):not([display-mdoe=radial]) .custom-color-selection .palette-mode-container {
385
+ display: block;
386
+ }
387
+ .smart-color-panel:not([display-mode=radial]) .canvas-radial {
388
+ display: none;
389
+ }
390
+ .smart-color-panel[display-mode=hexagonal] .brightness-scale, .smart-color-panel[display-mode=radial] .brightness-scale {
391
+ display: block;
392
+ max-width: 100px;
393
+ height: var(--smart-color-panel-palette-size);
394
+ background-image: linear-gradient(#ff0000, #ff00ff, #0000ff, #00ffff, #00ff00, #ffff00, #ff0000);
395
+ /* reversed (#ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000) */
396
+ width: 20px;
397
+ margin-left: 15px;
398
+ margin-right: 15px;
399
+ position: relative;
400
+ padding: 1px;
401
+ border: var(--smart-border-width) solid var(--smart-border);
402
+ background-clip: content-box;
403
+ -webkit-background-clip: content-box;
404
+ }
405
+ .smart-color-panel[display-mode=hexagonal] .brightness-scale-thumb, .smart-color-panel[display-mode=radial] .brightness-scale-thumb {
406
+ width: 100%;
407
+ height: 10px;
408
+ box-sizing: content-box;
409
+ border: 3px solid white;
410
+ border-left-width: 10px;
411
+ border-right-width: 10px;
412
+ position: absolute;
413
+ left: -10px;
414
+ top: -3px;
415
+ box-shadow: 0px 0px 5px #666, inset 0px 0px 2px 0px #999, inset 0px 0px 2px 0px #999;
416
+ opacity: 0.8;
417
+ cursor: pointer;
418
+ }
419
+ .smart-color-panel[display-mode=hexagonal] .alpha-channel-scale {
420
+ width: var(--smart-color-panel-palette-width);
421
+ }
422
+ .smart-color-panel[display-mode=hexagonal] .brightness-scale {
423
+ display: block;
424
+ height: var(--smart-color-panel-palette-height);
425
+ background-image: linear-gradient(white, black);
426
+ }
427
+ .smart-color-panel[display-mode=hexagonal] .selected {
428
+ stroke: white;
429
+ stroke-width: 4px;
430
+ }
431
+ .smart-color-panel[display-mode=hexagonal] .color-palette-container {
432
+ height: var(--smart-color-panel-palette-height);
433
+ }
434
+ .smart-color-panel[display-mode=hexagonal] .palette-mode-container {
435
+ display: block;
436
+ }
437
+ .smart-color-panel[display-mode=hexagonal] .color-palette-hexagonal {
438
+ display: block;
439
+ }
440
+ .smart-color-panel[display-mode=radial] .hue-scale {
441
+ display: none;
442
+ }
443
+ .smart-color-panel[display-mode=radial] .brightness-scale {
444
+ background-image: linear-gradient(white, black);
445
+ }
446
+ .smart-color-panel[display-mode=radial] .color-palette-radial {
447
+ width: var(--smart-color-panel-palette-size);
448
+ height: var(--smart-color-panel-palette-size);
449
+ display: block;
450
+ position: relative;
451
+ overflow: hidden;
452
+ cursor: crosshair;
453
+ padding: 1px;
454
+ border: 1px solid lightgray;
455
+ background-clip: content-box;
456
+ -webkit-background-clip: content-box;
457
+ background: conic-gradient(from 90deg, red, yellow, lime, aqua, blue, magenta, red) rgb(255, 0, 90);
458
+ border-radius: 50%;
459
+ }
460
+ .smart-color-panel[display-mode=radial] .color-palette-radial:after {
461
+ width: 100%;
462
+ height: 100%;
463
+ content: " ";
464
+ display: block;
465
+ position: absolute;
466
+ left: 0px;
467
+ top: 0px;
468
+ z-index: 0;
469
+ background: black;
470
+ opacity: var(--smart-color-panel-brightness);
471
+ border-radius: 50%;
472
+ }
473
+ .smart-color-panel[display-mode=radial] .color-palette-radial-thumb {
474
+ width: 0px;
475
+ height: 0px;
476
+ position: absolute;
477
+ z-index: 10;
478
+ pointer-events: none;
479
+ left: 50%;
480
+ top: 50%;
481
+ }
482
+ .smart-color-panel[display-mode=radial] .color-palette-radial-thumb:after {
483
+ content: " ";
484
+ position: absolute;
485
+ left: -14px;
486
+ top: -14px;
487
+ width: 16px;
488
+ height: 16px;
489
+ border: 5px solid white;
490
+ border-radius: 50%;
491
+ box-shadow: var(--smart-elevation-2);
492
+ }
493
+ .smart-color-panel[display-mode=radial] .white-radial-gradient {
494
+ z-index: 2;
495
+ width: var(--smart-color-panel-palette-size);
496
+ height: var(--smart-color-panel-palette-size);
497
+ position: absolute;
498
+ top: 50%;
499
+ left: 50%;
500
+ transform: translate(-50%, -50%);
501
+ border-radius: 50%;
502
+ background-image: radial-gradient(circle, white, transparent);
503
+ }
504
+ .smart-color-panel[display-mode=radial] .palette-mode-container {
505
+ display: block;
506
+ }
507
+ .smart-color-panel[display-mode=radial] canvas {
508
+ transform: rotate(-180deg);
509
+ transform-origin: center;
510
+ }
511
+ .smart-color-panel[display-mode=radial][inverted] .color-palette-radial:after {
512
+ background: white;
513
+ }
514
+ .smart-color-panel[display-mode=radial][inverted] .white-radial-gradient {
515
+ background: radial-gradient(black, transparent);
516
+ }
517
+ .smart-color-panel[display-mode=spectrumGrid] .spectrum-grid-samples-container {
518
+ display: block;
519
+ }
520
+ .smart-color-panel[display-mode=default] .default-samples-container {
521
+ display: block;
522
+ }
523
+ .smart-color-panel[display-mode=palette] .palette-mode-container {
524
+ display: block;
525
+ }
526
+ .smart-color-panel[display-mode=palette] .color-palette {
527
+ display: block;
528
+ }
529
+ .smart-color-panel[display-mode=materialGrid] .color-palette {
530
+ display: block;
531
+ }
532
+ .smart-color-panel[apply-value-mode=useButtons] .buttons-container {
533
+ display: flex;
534
+ align-items: center;
535
+ justify-content: flex-end;
536
+ }
537
+
538
+ .smart-color-panel .palette-mode-container,
539
+ .smart-color-panel .spectrum-grid-samples-container,
540
+ .smart-color-panel .color-palette-hexagonal,
541
+ .smart-color-panel .custom-color-selection .grid-mode-container,
542
+ .smart-color-panel .button-custom-color,
543
+ .smart-color-panel .user-samples-container {
544
+ display: none;
545
+ }
546
+ .smart-color-panel[display-mode=default] .grid-samples-container,
547
+ .smart-color-panel[display-mode=default] .palette-mode-container,
548
+ .smart-color-panel[display-mode=default] .material-grid-samples-container {
549
+ display: none;
550
+ }
551
+ .smart-color-panel[display-mode=grid] .palette-mode-container,
552
+ .smart-color-panel[display-mode=grid] .material-grid-samples-container,
553
+ .smart-color-panel[display-mode=grid] .default-samples-container {
554
+ display: none;
555
+ }
556
+ .smart-color-panel[display-mode=spectrumGrid] .palette-mode-container,
557
+ .smart-color-panel[display-mode=spectrumGrid] .grid-samples-container,
558
+ .smart-color-panel[display-mode=spectrumGrid] .material-grid-samples-container,
559
+ .smart-color-panel[display-mode=spectrumGrid] .default-samples-container {
560
+ display: none;
561
+ }
562
+ .smart-color-panel[display-mode=materialGrid] .palette-mode-container,
563
+ .smart-color-panel[display-mode=materialGrid] .grid-samples-container,
564
+ .smart-color-panel[display-mode=materialGrid] .default-samples-container {
565
+ display: none;
566
+ }
567
+ .smart-color-panel[display-mode=hexagonal] .grid-samples-container,
568
+ .smart-color-panel[display-mode=hexagonal] .spectrum-grid-samples-container,
569
+ .smart-color-panel[display-mode=hexagonal] .color-palette,
570
+ .smart-color-panel[display-mode=hexagonal] .hue-scale,
571
+ .smart-color-panel[display-mode=hexagonal] .default-samples-container {
572
+ display: none;
573
+ }
574
+ .smart-color-panel[display-mode=palette] .color-palette-radial,
575
+ .smart-color-panel[display-mode=palette] .grid-mode-container {
576
+ display: none;
577
+ }
578
+ .smart-color-panel[display-mode=radial] .color-palette,
579
+ .smart-color-panel[display-mode=radial] .grid-mode-container {
580
+ display: none;
581
+ }
582
+ .smart-color-panel[enable-custom-colors][display-mode=hexagonal] .button-custom-color,
583
+ .smart-color-panel[enable-custom-colors][display-mode=hexagonal] .user-samples-container {
584
+ display: none;
585
+ }
586
+ .smart-color-panel[hide-preview-container] .preview-container {
587
+ display: none;
588
+ }
589
+ .smart-color-panel[hide-alpha-editor] .a-channel {
590
+ display: none;
591
+ }
592
+ .smart-color-panel[hide-r-g-b-editor] .r-channel,
593
+ .smart-color-panel[hide-r-g-b-editor] .g-channel,
594
+ .smart-color-panel[hide-r-g-b-editor] .b-channel {
595
+ display: none;
596
+ }
597
+ .smart-color-panel[hide-h-e-x-editor] .hex {
598
+ display: none;
599
+ }
600
+
601
+ /* smart-color-panel */
602
+ smart-color-panel[right-to-left] .grid-mode-container,
603
+ smart-color-panel[right-to-left] .color-palette-container,
604
+ smart-color-panel[right-to-left] .alpha-channel-container {
605
+ direction: rtl;
606
+ }
607
+ smart-color-panel[right-to-left] .alpha-channel-scale {
608
+ margin: 0 0 0 20px;
609
+ }
610
+ smart-color-panel[right-to-left] .alpha-channel-scale:after {
611
+ background-image: linear-gradient(90deg, transparent, var(--smart-color-panel-alpha-channel-color));
612
+ }
613
+ smart-color-panel[right-to-left] .buttons-container {
614
+ flex-direction: row-reverse;
615
+ }
616
+ smart-color-panel[right-to-left] .buttons-container smart-button:last-of-type {
617
+ margin: 0 0 0 20px;
618
618
  }