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