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.progressbar.css CHANGED
@@ -1,502 +1,502 @@
1
- /* smart-progress-bar */
2
- smart-progress-bar.smart-element,
3
- smart-circular-progress-bar.smart-element,
4
- .smart-circular-progress-bar.smart-element {
5
- border: none;
6
- }
7
- smart-progress-bar.smart-element:focus > .smart-container,
8
- smart-circular-progress-bar.smart-element:focus > .smart-container,
9
- .smart-circular-progress-bar.smart-element:focus > .smart-container {
10
- border-color: var(--smart-outline);
11
- }
12
- smart-progress-bar > .smart-container, smart-progress-bar.smart-container,
13
- smart-circular-progress-bar > .smart-container,
14
- smart-circular-progress-bar.smart-container,
15
- .smart-circular-progress-bar > .smart-container,
16
- .smart-circular-progress-bar.smart-container {
17
- border-top-left-radius: var(--smart-border-top-left-radius);
18
- border-top-right-radius: var(--smart-border-top-right-radius);
19
- border-bottom-left-radius: var(--smart-border-bottom-left-radius);
20
- border-bottom-right-radius: var(--smart-border-bottom-right-radius);
21
- overflow: hidden;
22
- position: relative;
23
- border-width: var(--smart-border-width);
24
- border-style: solid;
25
- border-color: var(--smart-border);
26
- color: var(--smart-background-color);
27
- }
28
- smart-progress-bar .smart-label,
29
- smart-circular-progress-bar .smart-label,
30
- .smart-circular-progress-bar .smart-label {
31
- top: 50%;
32
- left: 50%;
33
- transform: translate(-50%, -50%);
34
- position: absolute;
35
- text-align: center;
36
- color: var(--smart-background-color);
37
- }
38
-
39
- smart-progress-bar {
40
- width: var(--smart-progress-bar-default-width);
41
- height: var(--smart-progress-bar-default-height);
42
- }
43
- smart-progress-bar .smart-label {
44
- width: auto;
45
- color: var(--smart-outline);
46
- }
47
- smart-progress-bar .smart-value {
48
- outline: none;
49
- height: 100%;
50
- width: 100%;
51
- box-sizing: border-box;
52
- position: absolute;
53
- border: 1px solid var(--smart-ui-state-border-active);
54
- background-color: var(--smart-ui-state-active);
55
- transform-origin: left;
56
- }
57
- smart-progress-bar .smart-value.smart-value-animation {
58
- animation: indeterminate 3s infinite linear;
59
- }
60
- smart-progress-bar.primary .smart-value {
61
- border: 1px solid var(--smart-primary);
62
- background-color: var(--smart-primary);
63
- }
64
- smart-progress-bar.secondary .smart-value {
65
- border: 1px solid var(--smart-secondary);
66
- background-color: var(--smart-secondary);
67
- }
68
- smart-progress-bar.success .smart-value {
69
- border: 1px solid var(--smart-success);
70
- background-color: var(--smart-success);
71
- }
72
- smart-progress-bar.info .smart-value {
73
- border: 1px solid var(--smart-info);
74
- background-color: var(--smart-info);
75
- }
76
- smart-progress-bar.warning .smart-value {
77
- border: 1px solid var(--smart-warning);
78
- background-color: var(--smart-warning);
79
- }
80
- smart-progress-bar.error .smart-value {
81
- border: 1px solid var(--smart-error);
82
- background-color: var(--smart-error);
83
- }
84
- smart-progress-bar.light .smart-value {
85
- border: 1px solid var(--smart-light);
86
- background-color: var(--smart-light);
87
- }
88
- smart-progress-bar.dark .smart-value {
89
- border: 1px solid var(--smart-dark);
90
- background-color: var(--smart-dark);
91
- }
92
- smart-progress-bar:not([animation=none]) .smart-value {
93
- transition: 0.2s ease-in-out;
94
- }
95
- smart-progress-bar[orientation][inverted] .smart-value {
96
- transform-origin: right;
97
- }
98
- smart-progress-bar[inverted] .smart-value {
99
- transform-origin: right;
100
- }
101
- smart-progress-bar[inverted] .smart-value.smart-value-animation {
102
- animation: indeterminate-inverted 3s infinite linear;
103
- }
104
- smart-progress-bar[orientation] .smart-value {
105
- transform-origin: left;
106
- }
107
- smart-progress-bar[orientation=vertical] {
108
- width: var(--smart-progress-bar-default-height);
109
- height: var(--smart-progress-bar-default-width);
110
- }
111
- smart-progress-bar[orientation=vertical][inverted] .smart-value {
112
- transform-origin: left bottom;
113
- }
114
- smart-progress-bar[orientation=vertical] .smart-value {
115
- transform-origin: left top;
116
- }
117
- smart-progress-bar[orientation=vertical] .smart-value.smart-value-animation {
118
- animation: indeterminate-vertical 3s infinite linear;
119
- }
120
- smart-progress-bar[orientation=vertical] .smart-label {
121
- width: 100%;
122
- }
123
- smart-progress-bar[inverted][orientation=vertical] .smart-value.smart-value-animation {
124
- animation: indeterminate-vertical-inverted 3s infinite linear;
125
- }
126
-
127
- smart-circular-progress-bar,
128
- .smart-circular-progress-bar {
129
- width: var(--smart-circular-progress-bar-default-size);
130
- height: var(--smart-circular-progress-bar-default-size);
131
- }
132
- smart-circular-progress-bar > .smart-container, smart-circular-progress-bar.smart-container,
133
- .smart-circular-progress-bar > .smart-container,
134
- .smart-circular-progress-bar.smart-container {
135
- border-radius: 50%;
136
- }
137
- smart-circular-progress-bar .smart-value-animation-ms,
138
- .smart-circular-progress-bar .smart-value-animation-ms {
139
- stroke-dashoffset: 114;
140
- }
141
- smart-circular-progress-bar svg:first-of-type,
142
- .smart-circular-progress-bar svg:first-of-type {
143
- position: absolute;
144
- border-radius: 50%;
145
- pointer-events: none;
146
- }
147
- smart-circular-progress-bar svg:first-of-type .smart-value.smart-value-animation,
148
- .smart-circular-progress-bar svg:first-of-type .smart-value.smart-value-animation {
149
- animation: circle 2s infinite linear;
150
- }
151
- smart-circular-progress-bar .smart-label-container,
152
- .smart-circular-progress-bar .smart-label-container {
153
- position: absolute;
154
- top: 50%;
155
- left: 50%;
156
- transform: translate(-50%, -50%);
157
- overflow: hidden;
158
- box-sizing: content-box;
159
- border-radius: 50%;
160
- background-color: transparent;
161
- border-style: solid;
162
- border-width: var(--smart-border-width);
163
- border-color: var(--smart-border);
164
- width: calc(100% - var(--smart-circular-progress-bar-fill-size));
165
- height: calc(100% - var(--smart-circular-progress-bar-fill-size));
166
- }
167
- smart-circular-progress-bar .smart-value,
168
- smart-circular-progress-bar .smart-value-path,
169
- .smart-circular-progress-bar .smart-value,
170
- .smart-circular-progress-bar .smart-value-path {
171
- stroke-width: var(--smart-circular-progress-bar-fill-size);
172
- fill: transparent;
173
- stroke-dasharray: 314.159;
174
- }
175
- smart-circular-progress-bar .smart-value,
176
- .smart-circular-progress-bar .smart-value {
177
- stroke: var(--smart-ui-state-active);
178
- }
179
- smart-circular-progress-bar .smart-value-path,
180
- .smart-circular-progress-bar .smart-value-path {
181
- stroke-dashoffset: 0;
182
- stroke: transparent;
183
- }
184
- smart-circular-progress-bar.primary .smart-value,
185
- .smart-circular-progress-bar.primary .smart-value {
186
- stroke: var(--smart-primary);
187
- }
188
- smart-circular-progress-bar.secondary .smart-value,
189
- .smart-circular-progress-bar.secondary .smart-value {
190
- stroke: var(--smart-secondary);
191
- }
192
- smart-circular-progress-bar.success .smart-value,
193
- .smart-circular-progress-bar.success .smart-value {
194
- stroke: var(--smart-success);
195
- }
196
- smart-circular-progress-bar.info .smart-value,
197
- .smart-circular-progress-bar.info .smart-value {
198
- stroke: var(--smart-info);
199
- }
200
- smart-circular-progress-bar.warning .smart-value,
201
- .smart-circular-progress-bar.warning .smart-value {
202
- stroke: var(--smart-warning);
203
- }
204
- smart-circular-progress-bar.error .smart-value,
205
- .smart-circular-progress-bar.error .smart-value {
206
- stroke: var(--smart-error);
207
- }
208
- smart-circular-progress-bar.light .smart-value,
209
- .smart-circular-progress-bar.light .smart-value {
210
- stroke: var(--smart-light);
211
- }
212
- smart-circular-progress-bar.dark .smart-value,
213
- .smart-circular-progress-bar.dark .smart-value {
214
- stroke: var(--smart-dark);
215
- }
216
- smart-circular-progress-bar:not([animation=none]) .smart-value,
217
- .smart-circular-progress-bar:not([animation=none]) .smart-value {
218
- transition: stroke-dashoffset 1s linear;
219
- }
220
- smart-circular-progress-bar[inverted] svg:first-of-type .smart-value.smart-value-animation,
221
- .smart-circular-progress-bar[inverted] svg:first-of-type .smart-value.smart-value-animation {
222
- animation: circle-inverted 2s infinite linear;
223
- }
224
- smart-circular-progress-bar[indeterminate][inverted] svg:first-of-type, smart-circular-progress-bar[value=null][inverted] svg:first-of-type,
225
- .smart-circular-progress-bar[indeterminate][inverted] svg:first-of-type,
226
- .smart-circular-progress-bar[value=null][inverted] svg:first-of-type {
227
- animation: rotate-circle-inverted 1s infinite linear;
228
- }
229
- smart-circular-progress-bar[indeterminate] svg:first-of-type, smart-circular-progress-bar[value=null] svg:first-of-type,
230
- .smart-circular-progress-bar[indeterminate] svg:first-of-type,
231
- .smart-circular-progress-bar[value=null] svg:first-of-type {
232
- animation: rotate-circle 1s infinite linear;
233
- }
234
-
235
- /* Barber Shop */
236
- .barber-shop-effect .smart-value {
237
- background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.2) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.2) 75%, transparent 75%, transparent);
238
- background-size: 5rem 5rem;
239
- background-position: 0 -244rem;
240
- animation: stripes 10s linear infinite;
241
- animation-direction: normal;
242
- }
243
- .barber-shop-effect[inverted] .smart-value, .barber-shop-effect[orientation=vertical] .smart-value {
244
- animation-direction: reverse;
245
- }
246
-
247
- /* ANIMATION - BarberShop style */
248
- @keyframes stripes {
249
- 0% {
250
- background-position: 0 0;
251
- }
252
- 100% {
253
- background-position: 60rem 0;
254
- }
255
- }
256
- @keyframes indeterminate {
257
- 0% {
258
- left: -100%;
259
- transform: scaleX(0.4);
260
- transform-origin: left;
261
- }
262
- 20% {
263
- left: -40%;
264
- transform: scaleX(0.3);
265
- transform-origin: left;
266
- }
267
- 35% {
268
- left: 35%;
269
- transform: scaleX(0.4);
270
- transform-origin: left;
271
- }
272
- 50% {
273
- left: 75%;
274
- transform: scaleX(0.6);
275
- transform-origin: left;
276
- }
277
- 55% {
278
- left: 100%;
279
- transform: scaleX(0.7);
280
- transform-origin: left;
281
- }
282
- 55.99% {
283
- left: 100%;
284
- transform: scaleX(0);
285
- transform-origin: left;
286
- }
287
- 56% {
288
- left: -100%;
289
- transform: scaleX(0);
290
- transform-origin: left;
291
- }
292
- 56.99% {
293
- left: -100%;
294
- transform: scaleX(0.6);
295
- transform-origin: left;
296
- }
297
- 75% {
298
- left: -5%;
299
- transform: scaleX(0.6);
300
- transform-origin: left;
301
- }
302
- 80% {
303
- left: 30%;
304
- transform: scaleX(0.5);
305
- transform-origin: left;
306
- }
307
- 85% {
308
- left: 50%;
309
- transform: scaleX(0.4);
310
- transform-origin: left;
311
- }
312
- 90% {
313
- left: 75%;
314
- transform: scaleX(0.3);
315
- transform-origin: left;
316
- }
317
- 95% {
318
- left: 95%;
319
- transform: scaleX(0.2);
320
- transform-origin: left;
321
- }
322
- 98% {
323
- left: 100%;
324
- transform: scaleX(0.2);
325
- transform-origin: left;
326
- }
327
- 99.99% {
328
- left: 100%;
329
- transform: scaleX(0);
330
- transform-origin: left;
331
- }
332
- 100% {
333
- left: -100%;
334
- transform: scaleX(0);
335
- transform-origin: left;
336
- }
337
- }
338
- @keyframes indeterminate-vertical {
339
- 0% {
340
- bottom: -100%;
341
- transform: scaleY(0.4);
342
- transform-origin: bottom;
343
- }
344
- 20% {
345
- bottom: -40%;
346
- transform: scaleY(0.3);
347
- transform-origin: bottom;
348
- }
349
- 35% {
350
- bottom: 35%;
351
- transform: scaleY(0.4);
352
- transform-origin: bottom;
353
- }
354
- 50% {
355
- bottom: 75%;
356
- transform: scaleY(0.6);
357
- transform-origin: bottom;
358
- }
359
- 55% {
360
- bottom: 100%;
361
- transform: scaleY(0.7);
362
- transform-origin: bottom;
363
- }
364
- 55.99% {
365
- bottom: 100%;
366
- transform: scaleY(0);
367
- transform-origin: bottom;
368
- }
369
- 56% {
370
- bottom: -100%;
371
- transform: scaleY(0);
372
- transform-origin: bottom;
373
- }
374
- 56.99% {
375
- bottom: -100%;
376
- transform: scaleY(0.6);
377
- transform-origin: bottom;
378
- }
379
- 75% {
380
- bottom: -5%;
381
- transform: scaleY(0.6);
382
- transform-origin: bottom;
383
- }
384
- 80% {
385
- bottom: 30%;
386
- transform: scaleY(0.5);
387
- transform-origin: bottom;
388
- }
389
- 85% {
390
- bottom: 50%;
391
- transform: scaleY(0.4);
392
- transform-origin: bottom;
393
- }
394
- 90% {
395
- bottom: 75%;
396
- transform: scaleY(0.3);
397
- transform-origin: bottom;
398
- }
399
- 95% {
400
- bottom: 95%;
401
- transform: scaleY(0.2);
402
- transform-origin: bottom;
403
- }
404
- 98% {
405
- bottom: 100%;
406
- transform: scaleY(0.2);
407
- transform-origin: bottom;
408
- }
409
- 99.99% {
410
- bottom: 100%;
411
- transform: scaleY(0);
412
- transform-origin: bottom;
413
- }
414
- 100% {
415
- bottom: -100%;
416
- transform: scaleY(0);
417
- transform-origin: bottom;
418
- }
419
- }
420
- @keyframes circle {
421
- 0% {
422
- stroke-dashoffset: 314;
423
- }
424
- 5% {
425
- stroke-dashoffset: 164;
426
- }
427
- 25% {
428
- stroke-dashoffset: 104;
429
- }
430
- }
431
- @keyframes circle-inverted {
432
- 0% {
433
- stroke-dashoffset: -314;
434
- }
435
- 5% {
436
- stroke-dashoffset: -164;
437
- }
438
- 25% {
439
- stroke-dashoffset: -104;
440
- }
441
- }
442
- @keyframes rotate-circle {
443
- 50% {
444
- transform: rotate(180deg);
445
- }
446
- 75% {
447
- transform: rotate(270deg);
448
- }
449
- 100% {
450
- transform: rotate(360deg);
451
- }
452
- }
453
- @keyframes rotate-circle-inverted {
454
- 50% {
455
- transform: rotate(-180deg);
456
- }
457
- 75% {
458
- transform: rotate(-270deg);
459
- }
460
- 100% {
461
- transform: rotate(-360deg);
462
- }
463
- }
464
- /* smart-progress-bar */
465
- smart-progress-bar[right-to-left] .smart-label,
466
- smart-circular-progress-bar[right-to-left] .smart-label {
467
- direction: rtl;
468
- }
469
-
470
- smart-progress-bar[right-to-left]:not([orientation=vertical]) .smart-value, smart-progress-bar[right-to-left][orientation=horizontal] .smart-value {
471
- transform-origin: right;
472
- }
473
- smart-progress-bar[right-to-left]:not([orientation=vertical])[inverted] .smart-value, smart-progress-bar[right-to-left][orientation=horizontal][inverted] .smart-value {
474
- transform-origin: left;
475
- }
476
- smart-progress-bar[right-to-left][orientation=horizontal] .smart-value.smart-value-animation, smart-progress-bar[right-to-left]:not([orientation=vertical]) .smart-value.smart-value-animation {
477
- animation: indeterminate-inverted 3s infinite linear;
478
- }
479
- smart-progress-bar[right-to-left][inverted][orientation=horizontal] .smart-value.smart-value-animation, smart-progress-bar[right-to-left][inverted]:not([orientation=vertical]) .smart-value.smart-value-animation {
480
- animation: indeterminate 3s infinite linear;
481
- }
482
-
483
- smart-circular-progress-bar[right-to-left][inverted] svg:first-of-type .smart-value.smart-value-animation {
484
- animation: circle 2s infinite linear;
485
- }
486
- smart-circular-progress-bar[right-to-left] svg:first-of-type .smart-value.smart-value-animation {
487
- animation: circle-inverted 2s infinite linear;
488
- }
489
- smart-circular-progress-bar[right-to-left][indeterminate] svg:first-of-type, smart-circular-progress-bar[right-to-left][value=null] svg:first-of-type {
490
- animation: rotate-circle-inverted 1s infinite linear;
491
- }
492
- smart-circular-progress-bar[right-to-left][indeterminate][inverted] svg:first-of-type, smart-circular-progress-bar[right-to-left][value=null][inverted] svg:first-of-type {
493
- animation: rotate-circle 1s infinite linear;
494
- }
495
-
496
- /* Barber Shop */
497
- .barber-shop-effect[right-to-left] .smart-value {
498
- animation-direction: reverse;
499
- }
500
- .barber-shop-effect[right-to-left][inverted] .smart-value {
501
- animation-direction: normal;
1
+ /* smart-progress-bar */
2
+ smart-progress-bar.smart-element,
3
+ smart-circular-progress-bar.smart-element,
4
+ .smart-circular-progress-bar.smart-element {
5
+ border: none;
6
+ }
7
+ smart-progress-bar.smart-element:focus > .smart-container,
8
+ smart-circular-progress-bar.smart-element:focus > .smart-container,
9
+ .smart-circular-progress-bar.smart-element:focus > .smart-container {
10
+ border-color: var(--smart-outline);
11
+ }
12
+ smart-progress-bar > .smart-container, smart-progress-bar.smart-container,
13
+ smart-circular-progress-bar > .smart-container,
14
+ smart-circular-progress-bar.smart-container,
15
+ .smart-circular-progress-bar > .smart-container,
16
+ .smart-circular-progress-bar.smart-container {
17
+ border-top-left-radius: var(--smart-border-top-left-radius);
18
+ border-top-right-radius: var(--smart-border-top-right-radius);
19
+ border-bottom-left-radius: var(--smart-border-bottom-left-radius);
20
+ border-bottom-right-radius: var(--smart-border-bottom-right-radius);
21
+ overflow: hidden;
22
+ position: relative;
23
+ border-width: var(--smart-border-width);
24
+ border-style: solid;
25
+ border-color: var(--smart-border);
26
+ color: var(--smart-background-color);
27
+ }
28
+ smart-progress-bar .smart-label,
29
+ smart-circular-progress-bar .smart-label,
30
+ .smart-circular-progress-bar .smart-label {
31
+ top: 50%;
32
+ left: 50%;
33
+ transform: translate(-50%, -50%);
34
+ position: absolute;
35
+ text-align: center;
36
+ color: var(--smart-background-color);
37
+ }
38
+
39
+ smart-progress-bar {
40
+ width: var(--smart-progress-bar-default-width);
41
+ height: var(--smart-progress-bar-default-height);
42
+ }
43
+ smart-progress-bar .smart-label {
44
+ width: auto;
45
+ color: var(--smart-outline);
46
+ }
47
+ smart-progress-bar .smart-value {
48
+ outline: none;
49
+ height: 100%;
50
+ width: 100%;
51
+ box-sizing: border-box;
52
+ position: absolute;
53
+ border: 1px solid var(--smart-ui-state-border-active);
54
+ background-color: var(--smart-ui-state-active);
55
+ transform-origin: left;
56
+ }
57
+ smart-progress-bar .smart-value.smart-value-animation {
58
+ animation: indeterminate 3s infinite linear;
59
+ }
60
+ smart-progress-bar.primary .smart-value {
61
+ border: 1px solid var(--smart-primary);
62
+ background-color: var(--smart-primary);
63
+ }
64
+ smart-progress-bar.secondary .smart-value {
65
+ border: 1px solid var(--smart-secondary);
66
+ background-color: var(--smart-secondary);
67
+ }
68
+ smart-progress-bar.success .smart-value {
69
+ border: 1px solid var(--smart-success);
70
+ background-color: var(--smart-success);
71
+ }
72
+ smart-progress-bar.info .smart-value {
73
+ border: 1px solid var(--smart-info);
74
+ background-color: var(--smart-info);
75
+ }
76
+ smart-progress-bar.warning .smart-value {
77
+ border: 1px solid var(--smart-warning);
78
+ background-color: var(--smart-warning);
79
+ }
80
+ smart-progress-bar.error .smart-value {
81
+ border: 1px solid var(--smart-error);
82
+ background-color: var(--smart-error);
83
+ }
84
+ smart-progress-bar.light .smart-value {
85
+ border: 1px solid var(--smart-light);
86
+ background-color: var(--smart-light);
87
+ }
88
+ smart-progress-bar.dark .smart-value {
89
+ border: 1px solid var(--smart-dark);
90
+ background-color: var(--smart-dark);
91
+ }
92
+ smart-progress-bar:not([animation=none]) .smart-value {
93
+ transition: 0.2s ease-in-out;
94
+ }
95
+ smart-progress-bar[orientation][inverted] .smart-value {
96
+ transform-origin: right;
97
+ }
98
+ smart-progress-bar[inverted] .smart-value {
99
+ transform-origin: right;
100
+ }
101
+ smart-progress-bar[inverted] .smart-value.smart-value-animation {
102
+ animation: indeterminate-inverted 3s infinite linear;
103
+ }
104
+ smart-progress-bar[orientation] .smart-value {
105
+ transform-origin: left;
106
+ }
107
+ smart-progress-bar[orientation=vertical] {
108
+ width: var(--smart-progress-bar-default-height);
109
+ height: var(--smart-progress-bar-default-width);
110
+ }
111
+ smart-progress-bar[orientation=vertical][inverted] .smart-value {
112
+ transform-origin: left bottom;
113
+ }
114
+ smart-progress-bar[orientation=vertical] .smart-value {
115
+ transform-origin: left top;
116
+ }
117
+ smart-progress-bar[orientation=vertical] .smart-value.smart-value-animation {
118
+ animation: indeterminate-vertical 3s infinite linear;
119
+ }
120
+ smart-progress-bar[orientation=vertical] .smart-label {
121
+ width: 100%;
122
+ }
123
+ smart-progress-bar[inverted][orientation=vertical] .smart-value.smart-value-animation {
124
+ animation: indeterminate-vertical-inverted 3s infinite linear;
125
+ }
126
+
127
+ smart-circular-progress-bar,
128
+ .smart-circular-progress-bar {
129
+ width: var(--smart-circular-progress-bar-default-size);
130
+ height: var(--smart-circular-progress-bar-default-size);
131
+ }
132
+ smart-circular-progress-bar > .smart-container, smart-circular-progress-bar.smart-container,
133
+ .smart-circular-progress-bar > .smart-container,
134
+ .smart-circular-progress-bar.smart-container {
135
+ border-radius: 50%;
136
+ }
137
+ smart-circular-progress-bar .smart-value-animation-ms,
138
+ .smart-circular-progress-bar .smart-value-animation-ms {
139
+ stroke-dashoffset: 114;
140
+ }
141
+ smart-circular-progress-bar svg:first-of-type,
142
+ .smart-circular-progress-bar svg:first-of-type {
143
+ position: absolute;
144
+ border-radius: 50%;
145
+ pointer-events: none;
146
+ }
147
+ smart-circular-progress-bar svg:first-of-type .smart-value.smart-value-animation,
148
+ .smart-circular-progress-bar svg:first-of-type .smart-value.smart-value-animation {
149
+ animation: circle 2s infinite linear;
150
+ }
151
+ smart-circular-progress-bar .smart-label-container,
152
+ .smart-circular-progress-bar .smart-label-container {
153
+ position: absolute;
154
+ top: 50%;
155
+ left: 50%;
156
+ transform: translate(-50%, -50%);
157
+ overflow: hidden;
158
+ box-sizing: content-box;
159
+ border-radius: 50%;
160
+ background-color: transparent;
161
+ border-style: solid;
162
+ border-width: var(--smart-border-width);
163
+ border-color: var(--smart-border);
164
+ width: calc(100% - var(--smart-circular-progress-bar-fill-size));
165
+ height: calc(100% - var(--smart-circular-progress-bar-fill-size));
166
+ }
167
+ smart-circular-progress-bar .smart-value,
168
+ smart-circular-progress-bar .smart-value-path,
169
+ .smart-circular-progress-bar .smart-value,
170
+ .smart-circular-progress-bar .smart-value-path {
171
+ stroke-width: var(--smart-circular-progress-bar-fill-size);
172
+ fill: transparent;
173
+ stroke-dasharray: 314.159;
174
+ }
175
+ smart-circular-progress-bar .smart-value,
176
+ .smart-circular-progress-bar .smart-value {
177
+ stroke: var(--smart-ui-state-active);
178
+ }
179
+ smart-circular-progress-bar .smart-value-path,
180
+ .smart-circular-progress-bar .smart-value-path {
181
+ stroke-dashoffset: 0;
182
+ stroke: transparent;
183
+ }
184
+ smart-circular-progress-bar.primary .smart-value,
185
+ .smart-circular-progress-bar.primary .smart-value {
186
+ stroke: var(--smart-primary);
187
+ }
188
+ smart-circular-progress-bar.secondary .smart-value,
189
+ .smart-circular-progress-bar.secondary .smart-value {
190
+ stroke: var(--smart-secondary);
191
+ }
192
+ smart-circular-progress-bar.success .smart-value,
193
+ .smart-circular-progress-bar.success .smart-value {
194
+ stroke: var(--smart-success);
195
+ }
196
+ smart-circular-progress-bar.info .smart-value,
197
+ .smart-circular-progress-bar.info .smart-value {
198
+ stroke: var(--smart-info);
199
+ }
200
+ smart-circular-progress-bar.warning .smart-value,
201
+ .smart-circular-progress-bar.warning .smart-value {
202
+ stroke: var(--smart-warning);
203
+ }
204
+ smart-circular-progress-bar.error .smart-value,
205
+ .smart-circular-progress-bar.error .smart-value {
206
+ stroke: var(--smart-error);
207
+ }
208
+ smart-circular-progress-bar.light .smart-value,
209
+ .smart-circular-progress-bar.light .smart-value {
210
+ stroke: var(--smart-light);
211
+ }
212
+ smart-circular-progress-bar.dark .smart-value,
213
+ .smart-circular-progress-bar.dark .smart-value {
214
+ stroke: var(--smart-dark);
215
+ }
216
+ smart-circular-progress-bar:not([animation=none]) .smart-value,
217
+ .smart-circular-progress-bar:not([animation=none]) .smart-value {
218
+ transition: stroke-dashoffset 1s linear;
219
+ }
220
+ smart-circular-progress-bar[inverted] svg:first-of-type .smart-value.smart-value-animation,
221
+ .smart-circular-progress-bar[inverted] svg:first-of-type .smart-value.smart-value-animation {
222
+ animation: circle-inverted 2s infinite linear;
223
+ }
224
+ smart-circular-progress-bar[indeterminate][inverted] svg:first-of-type, smart-circular-progress-bar[value=null][inverted] svg:first-of-type,
225
+ .smart-circular-progress-bar[indeterminate][inverted] svg:first-of-type,
226
+ .smart-circular-progress-bar[value=null][inverted] svg:first-of-type {
227
+ animation: rotate-circle-inverted 1s infinite linear;
228
+ }
229
+ smart-circular-progress-bar[indeterminate] svg:first-of-type, smart-circular-progress-bar[value=null] svg:first-of-type,
230
+ .smart-circular-progress-bar[indeterminate] svg:first-of-type,
231
+ .smart-circular-progress-bar[value=null] svg:first-of-type {
232
+ animation: rotate-circle 1s infinite linear;
233
+ }
234
+
235
+ /* Barber Shop */
236
+ .barber-shop-effect .smart-value {
237
+ background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.2) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.2) 75%, transparent 75%, transparent);
238
+ background-size: 5rem 5rem;
239
+ background-position: 0 -244rem;
240
+ animation: stripes 10s linear infinite;
241
+ animation-direction: normal;
242
+ }
243
+ .barber-shop-effect[inverted] .smart-value, .barber-shop-effect[orientation=vertical] .smart-value {
244
+ animation-direction: reverse;
245
+ }
246
+
247
+ /* ANIMATION - BarberShop style */
248
+ @keyframes stripes {
249
+ 0% {
250
+ background-position: 0 0;
251
+ }
252
+ 100% {
253
+ background-position: 60rem 0;
254
+ }
255
+ }
256
+ @keyframes indeterminate {
257
+ 0% {
258
+ left: -100%;
259
+ transform: scaleX(0.4);
260
+ transform-origin: left;
261
+ }
262
+ 20% {
263
+ left: -40%;
264
+ transform: scaleX(0.3);
265
+ transform-origin: left;
266
+ }
267
+ 35% {
268
+ left: 35%;
269
+ transform: scaleX(0.4);
270
+ transform-origin: left;
271
+ }
272
+ 50% {
273
+ left: 75%;
274
+ transform: scaleX(0.6);
275
+ transform-origin: left;
276
+ }
277
+ 55% {
278
+ left: 100%;
279
+ transform: scaleX(0.7);
280
+ transform-origin: left;
281
+ }
282
+ 55.99% {
283
+ left: 100%;
284
+ transform: scaleX(0);
285
+ transform-origin: left;
286
+ }
287
+ 56% {
288
+ left: -100%;
289
+ transform: scaleX(0);
290
+ transform-origin: left;
291
+ }
292
+ 56.99% {
293
+ left: -100%;
294
+ transform: scaleX(0.6);
295
+ transform-origin: left;
296
+ }
297
+ 75% {
298
+ left: -5%;
299
+ transform: scaleX(0.6);
300
+ transform-origin: left;
301
+ }
302
+ 80% {
303
+ left: 30%;
304
+ transform: scaleX(0.5);
305
+ transform-origin: left;
306
+ }
307
+ 85% {
308
+ left: 50%;
309
+ transform: scaleX(0.4);
310
+ transform-origin: left;
311
+ }
312
+ 90% {
313
+ left: 75%;
314
+ transform: scaleX(0.3);
315
+ transform-origin: left;
316
+ }
317
+ 95% {
318
+ left: 95%;
319
+ transform: scaleX(0.2);
320
+ transform-origin: left;
321
+ }
322
+ 98% {
323
+ left: 100%;
324
+ transform: scaleX(0.2);
325
+ transform-origin: left;
326
+ }
327
+ 99.99% {
328
+ left: 100%;
329
+ transform: scaleX(0);
330
+ transform-origin: left;
331
+ }
332
+ 100% {
333
+ left: -100%;
334
+ transform: scaleX(0);
335
+ transform-origin: left;
336
+ }
337
+ }
338
+ @keyframes indeterminate-vertical {
339
+ 0% {
340
+ bottom: -100%;
341
+ transform: scaleY(0.4);
342
+ transform-origin: bottom;
343
+ }
344
+ 20% {
345
+ bottom: -40%;
346
+ transform: scaleY(0.3);
347
+ transform-origin: bottom;
348
+ }
349
+ 35% {
350
+ bottom: 35%;
351
+ transform: scaleY(0.4);
352
+ transform-origin: bottom;
353
+ }
354
+ 50% {
355
+ bottom: 75%;
356
+ transform: scaleY(0.6);
357
+ transform-origin: bottom;
358
+ }
359
+ 55% {
360
+ bottom: 100%;
361
+ transform: scaleY(0.7);
362
+ transform-origin: bottom;
363
+ }
364
+ 55.99% {
365
+ bottom: 100%;
366
+ transform: scaleY(0);
367
+ transform-origin: bottom;
368
+ }
369
+ 56% {
370
+ bottom: -100%;
371
+ transform: scaleY(0);
372
+ transform-origin: bottom;
373
+ }
374
+ 56.99% {
375
+ bottom: -100%;
376
+ transform: scaleY(0.6);
377
+ transform-origin: bottom;
378
+ }
379
+ 75% {
380
+ bottom: -5%;
381
+ transform: scaleY(0.6);
382
+ transform-origin: bottom;
383
+ }
384
+ 80% {
385
+ bottom: 30%;
386
+ transform: scaleY(0.5);
387
+ transform-origin: bottom;
388
+ }
389
+ 85% {
390
+ bottom: 50%;
391
+ transform: scaleY(0.4);
392
+ transform-origin: bottom;
393
+ }
394
+ 90% {
395
+ bottom: 75%;
396
+ transform: scaleY(0.3);
397
+ transform-origin: bottom;
398
+ }
399
+ 95% {
400
+ bottom: 95%;
401
+ transform: scaleY(0.2);
402
+ transform-origin: bottom;
403
+ }
404
+ 98% {
405
+ bottom: 100%;
406
+ transform: scaleY(0.2);
407
+ transform-origin: bottom;
408
+ }
409
+ 99.99% {
410
+ bottom: 100%;
411
+ transform: scaleY(0);
412
+ transform-origin: bottom;
413
+ }
414
+ 100% {
415
+ bottom: -100%;
416
+ transform: scaleY(0);
417
+ transform-origin: bottom;
418
+ }
419
+ }
420
+ @keyframes circle {
421
+ 0% {
422
+ stroke-dashoffset: 314;
423
+ }
424
+ 5% {
425
+ stroke-dashoffset: 164;
426
+ }
427
+ 25% {
428
+ stroke-dashoffset: 104;
429
+ }
430
+ }
431
+ @keyframes circle-inverted {
432
+ 0% {
433
+ stroke-dashoffset: -314;
434
+ }
435
+ 5% {
436
+ stroke-dashoffset: -164;
437
+ }
438
+ 25% {
439
+ stroke-dashoffset: -104;
440
+ }
441
+ }
442
+ @keyframes rotate-circle {
443
+ 50% {
444
+ transform: rotate(180deg);
445
+ }
446
+ 75% {
447
+ transform: rotate(270deg);
448
+ }
449
+ 100% {
450
+ transform: rotate(360deg);
451
+ }
452
+ }
453
+ @keyframes rotate-circle-inverted {
454
+ 50% {
455
+ transform: rotate(-180deg);
456
+ }
457
+ 75% {
458
+ transform: rotate(-270deg);
459
+ }
460
+ 100% {
461
+ transform: rotate(-360deg);
462
+ }
463
+ }
464
+ /* smart-progress-bar */
465
+ smart-progress-bar[right-to-left] .smart-label,
466
+ smart-circular-progress-bar[right-to-left] .smart-label {
467
+ direction: rtl;
468
+ }
469
+
470
+ smart-progress-bar[right-to-left]:not([orientation=vertical]) .smart-value, smart-progress-bar[right-to-left][orientation=horizontal] .smart-value {
471
+ transform-origin: right;
472
+ }
473
+ smart-progress-bar[right-to-left]:not([orientation=vertical])[inverted] .smart-value, smart-progress-bar[right-to-left][orientation=horizontal][inverted] .smart-value {
474
+ transform-origin: left;
475
+ }
476
+ smart-progress-bar[right-to-left][orientation=horizontal] .smart-value.smart-value-animation, smart-progress-bar[right-to-left]:not([orientation=vertical]) .smart-value.smart-value-animation {
477
+ animation: indeterminate-inverted 3s infinite linear;
478
+ }
479
+ smart-progress-bar[right-to-left][inverted][orientation=horizontal] .smart-value.smart-value-animation, smart-progress-bar[right-to-left][inverted]:not([orientation=vertical]) .smart-value.smart-value-animation {
480
+ animation: indeterminate 3s infinite linear;
481
+ }
482
+
483
+ smart-circular-progress-bar[right-to-left][inverted] svg:first-of-type .smart-value.smart-value-animation {
484
+ animation: circle 2s infinite linear;
485
+ }
486
+ smart-circular-progress-bar[right-to-left] svg:first-of-type .smart-value.smart-value-animation {
487
+ animation: circle-inverted 2s infinite linear;
488
+ }
489
+ smart-circular-progress-bar[right-to-left][indeterminate] svg:first-of-type, smart-circular-progress-bar[right-to-left][value=null] svg:first-of-type {
490
+ animation: rotate-circle-inverted 1s infinite linear;
491
+ }
492
+ smart-circular-progress-bar[right-to-left][indeterminate][inverted] svg:first-of-type, smart-circular-progress-bar[right-to-left][value=null][inverted] svg:first-of-type {
493
+ animation: rotate-circle 1s infinite linear;
494
+ }
495
+
496
+ /* Barber Shop */
497
+ .barber-shop-effect[right-to-left] .smart-value {
498
+ animation-direction: reverse;
499
+ }
500
+ .barber-shop-effect[right-to-left][inverted] .smart-value {
501
+ animation-direction: normal;
502
502
  }