amis 1.4.0 → 1.4.2-beta.12

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 (520) hide show
  1. package/README.md +1 -1
  2. package/lib/Schema.d.ts +26 -2
  3. package/lib/Schema.js.map +1 -1
  4. package/lib/components/Alert.js +3 -1
  5. package/lib/components/Alert.js.map +2 -2
  6. package/lib/components/AnchorNav.d.ts +22 -21
  7. package/lib/components/AnchorNav.js +7 -3
  8. package/lib/components/AnchorNav.js.map +2 -2
  9. package/lib/components/ArrayInput.d.ts +84 -84
  10. package/lib/components/AssociatedSelection.d.ts +930 -0
  11. package/lib/components/AssociatedSelection.js +89 -0
  12. package/lib/components/AssociatedSelection.js.map +13 -0
  13. package/lib/components/Badge.d.ts +4 -3
  14. package/lib/components/Badge.js +42 -7
  15. package/lib/components/Badge.js.map +2 -2
  16. package/lib/components/Button.d.ts +24 -22
  17. package/lib/components/Button.js +13 -7
  18. package/lib/components/Button.js.map +2 -2
  19. package/lib/components/{ChainedCheckboxes.d.ts → ChainedSelection.d.ts} +267 -98
  20. package/lib/components/{ChainedCheckboxes.js → ChainedSelection.js} +30 -24
  21. package/lib/components/ChainedSelection.js.map +13 -0
  22. package/lib/components/Collapse.js +1 -1
  23. package/lib/components/Collapse.js.map +2 -2
  24. package/lib/components/ColorPicker.d.ts +84 -84
  25. package/lib/components/DatePicker.d.ts +84 -84
  26. package/lib/components/DatePicker.js +1 -1
  27. package/lib/components/DatePicker.js.map +2 -2
  28. package/lib/components/DateRangePicker.d.ts +84 -84
  29. package/lib/components/DateRangePicker.js +1 -1
  30. package/lib/components/DateRangePicker.js.map +2 -2
  31. package/lib/components/Editor.d.ts +84 -84
  32. package/lib/components/GroupedSelection.d.ts +907 -0
  33. package/lib/components/GroupedSelection.js +48 -0
  34. package/lib/components/GroupedSelection.js.map +13 -0
  35. package/lib/components/InputBox.js +1 -1
  36. package/lib/components/InputBox.js.map +2 -2
  37. package/lib/components/Link.d.ts +84 -0
  38. package/lib/components/Link.js +43 -0
  39. package/lib/components/Link.js.map +13 -0
  40. package/lib/components/ListGroup.d.ts +21 -21
  41. package/lib/components/ModalManager.js +1 -1
  42. package/lib/components/ModalManager.js.map +2 -2
  43. package/lib/components/MonthRangePicker.d.ts +84 -84
  44. package/lib/components/MonthRangePicker.js +1 -1
  45. package/lib/components/MonthRangePicker.js.map +2 -2
  46. package/lib/components/NumberInput.d.ts +20 -20
  47. package/lib/components/PickerColumn.d.ts +514 -0
  48. package/lib/components/PickerColumn.js +279 -0
  49. package/lib/components/PickerColumn.js.map +13 -0
  50. package/lib/components/PickerContainer.d.ts +513 -0
  51. package/lib/components/PickerContainer.js +96 -0
  52. package/lib/components/PickerContainer.js.map +13 -0
  53. package/lib/components/Radios.d.ts +22 -21
  54. package/lib/components/Radios.js +1 -0
  55. package/lib/components/Radios.js.map +2 -2
  56. package/lib/components/Rating.d.ts +21 -21
  57. package/lib/components/ResultBox.d.ts +84 -84
  58. package/lib/components/RichText.d.ts +6 -1
  59. package/lib/components/RichText.js +207 -8
  60. package/lib/components/RichText.js.map +2 -2
  61. package/lib/components/SearchBox.d.ts +84 -84
  62. package/lib/components/SearchBox.js +4 -4
  63. package/lib/components/SearchBox.js.map +2 -2
  64. package/lib/components/Select.d.ts +245 -237
  65. package/lib/components/Select.js +28 -4
  66. package/lib/components/Select.js.map +2 -2
  67. package/lib/components/{Checkboxes.d.ts → Selection.d.ts} +273 -98
  68. package/lib/components/Selection.js +134 -0
  69. package/lib/components/Selection.js.map +13 -0
  70. package/lib/components/SparkLine.d.ts +85 -84
  71. package/lib/components/SparkLine.js +2 -2
  72. package/lib/components/SparkLine.js.map +2 -2
  73. package/lib/components/{TableCheckboxes.d.ts → TableSelection.d.ts} +266 -96
  74. package/lib/components/{TableCheckboxes.js → TableSelection.js} +30 -30
  75. package/lib/components/TableSelection.js.map +13 -0
  76. package/lib/components/Tabs.d.ts +20 -20
  77. package/lib/components/TabsTransfer.d.ts +84 -84
  78. package/lib/components/TabsTransfer.js +9 -9
  79. package/lib/components/TabsTransfer.js.map +2 -2
  80. package/lib/components/TabsTransferPicker.d.ts +489 -0
  81. package/lib/components/TabsTransferPicker.js +60 -0
  82. package/lib/components/TabsTransferPicker.js.map +13 -0
  83. package/lib/components/Toast.js +2 -2
  84. package/lib/components/Toast.js.map +2 -2
  85. package/lib/components/Transfer.d.ts +908 -274
  86. package/lib/components/Transfer.js +31 -24
  87. package/lib/components/Transfer.js.map +2 -2
  88. package/lib/components/TransferDropDown.d.ts +487 -0
  89. package/lib/components/TransferDropDown.js +59 -0
  90. package/lib/components/TransferDropDown.js.map +13 -0
  91. package/lib/components/TransferPicker.d.ts +489 -0
  92. package/lib/components/TransferPicker.js +60 -0
  93. package/lib/components/TransferPicker.js.map +13 -0
  94. package/lib/components/Tree.d.ts +84 -84
  95. package/lib/components/Tree.js +5 -3
  96. package/lib/components/Tree.js.map +2 -2
  97. package/lib/components/{TreeCheckboxes.d.ts → TreeSelection.d.ts} +269 -99
  98. package/lib/components/{TreeCheckboxes.js → TreeSelection.js} +36 -32
  99. package/lib/components/TreeSelection.js.map +13 -0
  100. package/lib/components/WithRemoteConfig.js +1 -1
  101. package/lib/components/WithRemoteConfig.js.map +2 -2
  102. package/lib/components/calendar/DaysView.js +2 -2
  103. package/lib/components/calendar/DaysView.js.map +2 -2
  104. package/lib/components/condition-builder/Field.js +5 -2
  105. package/lib/components/condition-builder/Field.js.map +2 -2
  106. package/lib/components/condition-builder/Func.js +2 -2
  107. package/lib/components/condition-builder/Func.js.map +2 -2
  108. package/lib/components/condition-builder/InputSwitch.js +2 -2
  109. package/lib/components/condition-builder/InputSwitch.js.map +2 -2
  110. package/lib/components/condition-builder/Item.js +3 -3
  111. package/lib/components/condition-builder/Item.js.map +2 -2
  112. package/lib/components/icons.js +14 -0
  113. package/lib/components/icons.js.map +2 -2
  114. package/lib/components/index.d.ts +8 -8
  115. package/lib/components/index.js +16 -16
  116. package/lib/components/index.js.map +2 -2
  117. package/lib/envOverwrite.js.map +2 -2
  118. package/lib/factory.d.ts +4 -0
  119. package/lib/factory.js +4 -2
  120. package/lib/factory.js.map +2 -2
  121. package/lib/helper.css.map +1 -1
  122. package/lib/hooks/index.d.ts +5 -0
  123. package/lib/hooks/index.js +14 -0
  124. package/lib/hooks/index.js.map +13 -0
  125. package/lib/hooks/use-set-state.d.ts +2 -0
  126. package/lib/hooks/use-set-state.js +15 -0
  127. package/lib/hooks/use-set-state.js.map +13 -0
  128. package/lib/hooks/use-touch.d.ts +16 -0
  129. package/lib/hooks/use-touch.js +73 -0
  130. package/lib/hooks/use-touch.js.map +13 -0
  131. package/lib/hooks/use-update-effect.d.ts +3 -0
  132. package/lib/hooks/use-update-effect.js +17 -0
  133. package/lib/hooks/use-update-effect.js.map +13 -0
  134. package/lib/icons/clock.js +10 -0
  135. package/lib/icons/loading-outline.js +7 -0
  136. package/lib/icons/status-close.js +11 -0
  137. package/lib/icons/status-fail.js +11 -0
  138. package/lib/icons/status-info.js +10 -0
  139. package/lib/icons/status-success.js +11 -0
  140. package/lib/icons/status-warning.js +10 -0
  141. package/lib/index.d.ts +3 -0
  142. package/lib/index.js +4 -1
  143. package/lib/index.js.map +2 -2
  144. package/lib/locale/de-DE.js +4 -0
  145. package/lib/locale/de-DE.js.map +2 -2
  146. package/lib/locale/en-US.js +4 -0
  147. package/lib/locale/en-US.js.map +2 -2
  148. package/lib/locale/zh-CN.js +7 -3
  149. package/lib/locale/zh-CN.js.map +2 -2
  150. package/lib/renderers/Action.d.ts +17 -1
  151. package/lib/renderers/Action.js +21 -8
  152. package/lib/renderers/Action.js.map +2 -2
  153. package/lib/renderers/AnchorNav.d.ts +1 -0
  154. package/lib/renderers/AnchorNav.js +2 -2
  155. package/lib/renderers/AnchorNav.js.map +2 -2
  156. package/lib/renderers/Avatar.js +3 -3
  157. package/lib/renderers/Avatar.js.map +2 -2
  158. package/lib/renderers/Breadcrumb.js +1 -1
  159. package/lib/renderers/Breadcrumb.js.map +2 -2
  160. package/lib/renderers/CRUD.d.ts +9 -0
  161. package/lib/renderers/CRUD.js +43 -8
  162. package/lib/renderers/CRUD.js.map +2 -2
  163. package/lib/renderers/Card.d.ts +4 -0
  164. package/lib/renderers/Card.js +29 -23
  165. package/lib/renderers/Card.js.map +2 -2
  166. package/lib/renderers/Chart.js +1 -1
  167. package/lib/renderers/Chart.js.map +2 -2
  168. package/lib/renderers/Collapse.js +3 -2
  169. package/lib/renderers/Collapse.js.map +2 -2
  170. package/lib/renderers/Dialog.js +0 -3
  171. package/lib/renderers/Dialog.js.map +2 -2
  172. package/lib/renderers/Drawer.js +0 -3
  173. package/lib/renderers/Drawer.js.map +2 -2
  174. package/lib/renderers/DropDownButton.d.ts +9 -1
  175. package/lib/renderers/DropDownButton.js +8 -4
  176. package/lib/renderers/DropDownButton.js.map +2 -2
  177. package/lib/renderers/Form/Checkbox.d.ts +5 -0
  178. package/lib/renderers/Form/Checkbox.js +4 -0
  179. package/lib/renderers/Form/Checkbox.js.map +2 -2
  180. package/lib/renderers/Form/Combo.js +2 -2
  181. package/lib/renderers/Form/Combo.js.map +2 -2
  182. package/lib/renderers/Form/DiffEditor.d.ts +4 -3
  183. package/lib/renderers/Form/Editor.d.ts +3 -2
  184. package/lib/renderers/Form/InputCity.d.ts +84 -84
  185. package/lib/renderers/Form/InputCity.js +7 -6
  186. package/lib/renderers/Form/InputCity.js.map +2 -2
  187. package/lib/renderers/Form/InputColor.d.ts +84 -84
  188. package/lib/renderers/Form/InputFile.js +12 -6
  189. package/lib/renderers/Form/InputFile.js.map +2 -2
  190. package/lib/renderers/Form/InputImage.js +16 -7
  191. package/lib/renderers/Form/InputImage.js.map +2 -2
  192. package/lib/renderers/Form/Item.d.ts +1 -1
  193. package/lib/renderers/Form/Item.js.map +1 -1
  194. package/lib/renderers/Form/Options.js +19 -6
  195. package/lib/renderers/Form/Options.js.map +2 -2
  196. package/lib/renderers/Form/Picker.js +2 -2
  197. package/lib/renderers/Form/Picker.js.map +2 -2
  198. package/lib/renderers/Form/Select.d.ts +41 -4
  199. package/lib/renderers/Form/Select.js +37 -3
  200. package/lib/renderers/Form/Select.js.map +2 -2
  201. package/lib/renderers/Form/TabsTransferPicker.d.ts +48 -0
  202. package/lib/renderers/Form/TabsTransferPicker.js +29 -0
  203. package/lib/renderers/Form/TabsTransferPicker.js.map +13 -0
  204. package/lib/renderers/Form/Transfer.js +18 -3
  205. package/lib/renderers/Form/Transfer.js.map +2 -2
  206. package/lib/renderers/Form/TransferPicker.d.ts +48 -0
  207. package/lib/renderers/Form/TransferPicker.js +43 -0
  208. package/lib/renderers/Form/TransferPicker.js.map +13 -0
  209. package/lib/renderers/Form/TreeSelect.js +2 -2
  210. package/lib/renderers/Form/TreeSelect.js.map +2 -2
  211. package/lib/renderers/Form/index.d.ts +5 -0
  212. package/lib/renderers/Form/index.js +5 -3
  213. package/lib/renderers/Form/index.js.map +2 -2
  214. package/lib/renderers/Form/wrapControl.js +15 -3
  215. package/lib/renderers/Form/wrapControl.js.map +2 -2
  216. package/lib/renderers/IFrame.js +3 -5
  217. package/lib/renderers/IFrame.js.map +2 -2
  218. package/lib/renderers/Image.d.ts +1 -0
  219. package/lib/renderers/Image.js +15 -1
  220. package/lib/renderers/Image.js.map +2 -2
  221. package/lib/renderers/Json.d.ts +4 -0
  222. package/lib/renderers/Json.js +4 -13
  223. package/lib/renderers/Json.js.map +2 -2
  224. package/lib/renderers/Link.d.ts +18 -3
  225. package/lib/renderers/Link.js +27 -15
  226. package/lib/renderers/Link.js.map +2 -2
  227. package/lib/renderers/List.js +1 -1
  228. package/lib/renderers/List.js.map +2 -2
  229. package/lib/renderers/Log.d.ts +2 -2
  230. package/lib/renderers/Log.js +7 -1
  231. package/lib/renderers/Log.js.map +2 -2
  232. package/lib/renderers/Mapping.d.ts +9 -2
  233. package/lib/renderers/Mapping.js +18 -6
  234. package/lib/renderers/Mapping.js.map +2 -2
  235. package/lib/renderers/Nav.d.ts +81 -25
  236. package/lib/renderers/Nav.js +292 -31
  237. package/lib/renderers/Nav.js.map +2 -2
  238. package/lib/renderers/Page.js +1 -1
  239. package/lib/renderers/Page.js.map +2 -2
  240. package/lib/renderers/Portlet.d.ts +125 -0
  241. package/lib/renderers/Portlet.js +156 -0
  242. package/lib/renderers/Portlet.js.map +13 -0
  243. package/lib/renderers/Property.js +2 -1
  244. package/lib/renderers/Property.js.map +2 -2
  245. package/lib/renderers/SearchBox.d.ts +6 -1
  246. package/lib/renderers/SearchBox.js +19 -5
  247. package/lib/renderers/SearchBox.js.map +2 -2
  248. package/lib/renderers/SparkLine.d.ts +4 -0
  249. package/lib/renderers/SparkLine.js.map +2 -2
  250. package/lib/renderers/Table/ColumnToggler.d.ts +113 -0
  251. package/lib/renderers/Table/ColumnToggler.js +216 -0
  252. package/lib/renderers/Table/ColumnToggler.js.map +13 -0
  253. package/lib/renderers/Table/ItemActionsWrapper.d.ts +11 -0
  254. package/lib/renderers/Table/ItemActionsWrapper.js +31 -0
  255. package/lib/renderers/Table/ItemActionsWrapper.js.map +13 -0
  256. package/lib/renderers/Table/TableBody.d.ts +4 -0
  257. package/lib/renderers/Table/TableCell.js +3 -1
  258. package/lib/renderers/Table/TableCell.js.map +2 -2
  259. package/lib/renderers/Table/TableContent.d.ts +4 -1
  260. package/lib/renderers/Table/TableContent.js +21 -1
  261. package/lib/renderers/Table/TableContent.js.map +2 -2
  262. package/lib/renderers/Table/index.d.ts +19 -2
  263. package/lib/renderers/Table/index.js +172 -57
  264. package/lib/renderers/Table/index.js.map +2 -2
  265. package/lib/renderers/Tabs.js +9 -1
  266. package/lib/renderers/Tabs.js.map +2 -2
  267. package/lib/renderers/WebComponent.js +1 -1
  268. package/lib/renderers/WebComponent.js.map +2 -2
  269. package/lib/store/combo.d.ts +2 -16
  270. package/lib/store/crud.js +3 -7
  271. package/lib/store/crud.js.map +2 -2
  272. package/lib/store/form.d.ts +1 -1
  273. package/lib/store/form.js +5 -6
  274. package/lib/store/form.js.map +2 -2
  275. package/lib/store/service.js +5 -4
  276. package/lib/store/service.js.map +2 -2
  277. package/lib/store/table.d.ts +260 -3
  278. package/lib/store/table.js +64 -6
  279. package/lib/store/table.js.map +2 -2
  280. package/lib/themes/ang-ie11.css +1175 -255
  281. package/lib/themes/ang.css +1175 -255
  282. package/lib/themes/ang.css.map +1 -1
  283. package/lib/themes/antd-ie11.css +1175 -255
  284. package/lib/themes/antd.css +1175 -255
  285. package/lib/themes/antd.css.map +1 -1
  286. package/lib/themes/cxd-ie11.css +1761 -514
  287. package/lib/themes/cxd.css +1761 -514
  288. package/lib/themes/cxd.css.map +1 -1
  289. package/lib/themes/dark-ie11.css +1175 -255
  290. package/lib/themes/dark.css +1175 -255
  291. package/lib/themes/dark.css.map +1 -1
  292. package/lib/themes/default.css +1761 -514
  293. package/lib/themes/default.css.map +1 -1
  294. package/lib/types.d.ts +37 -0
  295. package/lib/types.js +0 -5
  296. package/lib/types.js.map +2 -2
  297. package/lib/utils/api.d.ts +3 -2
  298. package/lib/utils/api.js +31 -15
  299. package/lib/utils/api.js.map +2 -2
  300. package/lib/utils/dom.d.ts +4 -0
  301. package/lib/utils/dom.js +11 -1
  302. package/lib/utils/dom.js.map +2 -2
  303. package/lib/utils/handleAction.d.ts +7 -0
  304. package/lib/utils/handleAction.js +30 -0
  305. package/lib/utils/handleAction.js.map +13 -0
  306. package/lib/utils/helper.d.ts +3 -1
  307. package/lib/utils/helper.js +14 -5
  308. package/lib/utils/helper.js.map +2 -2
  309. package/lib/utils/icon.js +3 -0
  310. package/lib/utils/icon.js.map +2 -2
  311. package/lib/utils/tpl-builtin.d.ts +1 -1
  312. package/lib/utils/tpl-builtin.js +25 -15
  313. package/lib/utils/tpl-builtin.js.map +2 -2
  314. package/package.json +1 -2
  315. package/schema.json +3534 -1028
  316. package/scss/_mixins.scss +27 -0
  317. package/scss/_properties.scss +84 -13
  318. package/scss/_utilities.scss +4 -0
  319. package/scss/base/_normalize.scss +2 -0
  320. package/scss/components/_anchor-nav.scss +88 -29
  321. package/scss/components/_badge.scss +52 -1
  322. package/scss/components/_button.scss +34 -3
  323. package/scss/components/_card.scss +8 -14
  324. package/scss/components/_collapse.scss +41 -8
  325. package/scss/components/_column-toggler.scss +234 -0
  326. package/scss/components/_dropdown.scss +2 -1
  327. package/scss/components/_image-gallery.scss +1 -1
  328. package/scss/components/_images.scss +2 -1
  329. package/scss/components/_link.scss +6 -0
  330. package/scss/components/_mapping.scss +6 -0
  331. package/scss/components/_nav.scss +236 -154
  332. package/scss/components/_page.scss +5 -4
  333. package/scss/components/_picker-columns.scss +123 -0
  334. package/scss/components/_popover.scss +17 -0
  335. package/scss/components/_portlet.scss +51 -0
  336. package/scss/components/_progress.scss +2 -0
  337. package/scss/components/_status.scss +1 -1
  338. package/scss/components/_steps.scss +1 -1
  339. package/scss/components/_table.scss +51 -1
  340. package/scss/components/form/_checks.scss +0 -351
  341. package/scss/components/form/_color.scss +1 -0
  342. package/scss/components/form/_date-range.scss +2 -0
  343. package/scss/components/form/_date.scss +2 -0
  344. package/scss/components/form/_fieldset.scss +6 -3
  345. package/scss/components/form/_file.scss +5 -4
  346. package/scss/components/form/_form.scss +48 -0
  347. package/scss/components/form/_image.scss +7 -2
  348. package/scss/components/form/_list.scss +1 -0
  349. package/scss/components/form/_location.scss +1 -1
  350. package/scss/components/form/_selection.scss +354 -0
  351. package/scss/components/form/_text.scss +13 -0
  352. package/scss/components/form/_textarea.scss +10 -0
  353. package/scss/components/form/_transfer.scss +77 -18
  354. package/scss/themes/_common.scss +6 -0
  355. package/scss/themes/_cxd-colors.scss +56 -0
  356. package/scss/themes/_cxd-variables.scss +219 -91
  357. package/scss/themes/cxd.scss +370 -0
  358. package/sdk/ang-ie11.css +1596 -515
  359. package/sdk/ang.css +1395 -256
  360. package/sdk/antd-ie11.css +1397 -318
  361. package/sdk/antd.css +1395 -256
  362. package/sdk/charts.js +13 -13
  363. package/sdk/color-picker.js +65 -65
  364. package/sdk/cropperjs.js +2 -2
  365. package/sdk/cxd-ie11.css +2739 -1361
  366. package/sdk/cxd.css +2095 -588
  367. package/sdk/dark-ie11.css +1593 -512
  368. package/sdk/dark.css +1395 -256
  369. package/sdk/exceljs.js +1 -1
  370. package/sdk/helper.css.map +1 -1
  371. package/sdk/iconfont.svg +2513 -0
  372. package/sdk/iconfont.ttf +0 -0
  373. package/sdk/iconfont.woff +0 -0
  374. package/sdk/ie11-patch.css +1 -0
  375. package/sdk/locale/de-DE.js +4 -0
  376. package/sdk/markdown.js +69 -69
  377. package/sdk/papaparse.js +1 -1
  378. package/sdk/renderers/Form/CityDB.js +1 -1
  379. package/sdk/rest.js +18 -32
  380. package/sdk/rich-text.js +62 -64
  381. package/sdk/sdk-ie11.css +2739 -1361
  382. package/sdk/sdk.css +2095 -588
  383. package/sdk/sdk.js +1189 -1133
  384. package/sdk/thirds/hls.js/hls.js +1 -1
  385. package/sdk/thirds/mpegts.js/mpegts.js +1 -1
  386. package/sdk/tinymce.js +57 -57
  387. package/src/Schema.ts +32 -0
  388. package/src/components/Alert.tsx +3 -1
  389. package/src/components/AnchorNav.tsx +15 -4
  390. package/src/components/{AssociatedCheckboxes.tsx → AssociatedSelection.tsx} +41 -37
  391. package/src/components/Badge.tsx +96 -28
  392. package/src/components/Button.tsx +23 -7
  393. package/src/components/{ChainedCheckboxes.tsx → ChainedSelection.tsx} +57 -40
  394. package/src/components/Collapse.tsx +14 -9
  395. package/src/components/DatePicker.tsx +1 -1
  396. package/src/components/DateRangePicker.tsx +23 -11
  397. package/src/components/{ListCheckboxes.tsx → GroupedSelection.tsx} +26 -21
  398. package/src/components/InputBox.tsx +1 -1
  399. package/src/components/Link.tsx +85 -0
  400. package/src/components/ModalManager.ts +1 -1
  401. package/src/components/MonthRangePicker.tsx +10 -2
  402. package/src/components/PickerColumn.tsx +429 -0
  403. package/src/components/PickerContainer.tsx +128 -0
  404. package/src/components/Radios.tsx +3 -8
  405. package/src/components/RichText.tsx +244 -3
  406. package/src/components/SearchBox.tsx +4 -5
  407. package/src/components/Select.tsx +60 -5
  408. package/src/components/{Checkboxes.tsx → Selection.tsx} +75 -21
  409. package/src/components/SparkLine.tsx +4 -1
  410. package/src/components/{TableCheckboxes.tsx → TableSelection.tsx} +46 -25
  411. package/src/components/TabsTransfer.tsx +13 -7
  412. package/src/components/TabsTransferPicker.tsx +85 -0
  413. package/src/components/Toast.tsx +5 -5
  414. package/src/components/Transfer.tsx +71 -50
  415. package/src/components/TransferDropDown.tsx +117 -0
  416. package/src/components/TransferPicker.tsx +84 -0
  417. package/src/components/Tree.tsx +6 -8
  418. package/src/components/{TreeCheckboxes.tsx → TreeSelection.tsx} +33 -26
  419. package/src/components/WithRemoteConfig.tsx +7 -2
  420. package/src/components/calendar/DaysView.tsx +2 -2
  421. package/src/components/condition-builder/Field.tsx +5 -5
  422. package/src/components/condition-builder/Func.tsx +3 -3
  423. package/src/components/condition-builder/InputSwitch.tsx +3 -3
  424. package/src/components/condition-builder/Item.tsx +5 -12
  425. package/src/components/icons.tsx +15 -0
  426. package/src/components/index.tsx +13 -13
  427. package/src/envOverwrite.ts +0 -1
  428. package/src/factory.tsx +18 -3
  429. package/src/hooks/index.ts +5 -0
  430. package/src/hooks/use-set-state.ts +19 -0
  431. package/src/hooks/use-touch.ts +100 -0
  432. package/src/hooks/use-update-effect.ts +16 -0
  433. package/src/icons/clock.svg +1 -0
  434. package/src/icons/loading-outline.svg +4 -0
  435. package/src/icons/status-close.svg +10 -0
  436. package/src/icons/status-fail.svg +10 -0
  437. package/src/icons/status-info.svg +8 -0
  438. package/src/icons/status-success.svg +10 -0
  439. package/src/icons/status-warning.svg +8 -0
  440. package/src/index.tsx +3 -0
  441. package/src/locale/de-DE.ts +4 -0
  442. package/src/locale/en-US.ts +4 -0
  443. package/src/locale/zh-CN.ts +7 -3
  444. package/src/renderers/Action.tsx +99 -15
  445. package/src/renderers/AnchorNav.tsx +4 -0
  446. package/src/renderers/Avatar.tsx +8 -4
  447. package/src/renderers/Breadcrumb.tsx +5 -1
  448. package/src/renderers/CRUD.tsx +63 -28
  449. package/src/renderers/Card.tsx +63 -34
  450. package/src/renderers/Chart.tsx +6 -2
  451. package/src/renderers/Collapse.tsx +4 -2
  452. package/src/renderers/Dialog.tsx +0 -4
  453. package/src/renderers/Drawer.tsx +0 -4
  454. package/src/renderers/DropDownButton.tsx +26 -12
  455. package/src/renderers/Form/Checkbox.tsx +8 -0
  456. package/src/renderers/Form/Combo.tsx +2 -3
  457. package/src/renderers/Form/InputCity.tsx +4 -8
  458. package/src/renderers/Form/InputFile.tsx +30 -20
  459. package/src/renderers/Form/InputImage.tsx +16 -5
  460. package/src/renderers/Form/Item.tsx +1 -1
  461. package/src/renderers/Form/Options.tsx +32 -7
  462. package/src/renderers/Form/Picker.tsx +3 -2
  463. package/src/renderers/Form/Select.tsx +158 -21
  464. package/src/renderers/Form/TabsTransferPicker.tsx +123 -0
  465. package/src/renderers/Form/Transfer.tsx +19 -4
  466. package/src/renderers/Form/TransferPicker.tsx +139 -0
  467. package/src/renderers/Form/TreeSelect.tsx +25 -0
  468. package/src/renderers/Form/index.tsx +16 -2
  469. package/src/renderers/Form/wrapControl.tsx +28 -3
  470. package/src/renderers/IFrame.tsx +4 -5
  471. package/src/renderers/Image.tsx +10 -0
  472. package/src/renderers/Json.tsx +9 -9
  473. package/src/renderers/Link.tsx +53 -14
  474. package/src/renderers/List.tsx +1 -1
  475. package/src/renderers/Log.tsx +16 -3
  476. package/src/renderers/Mapping.tsx +27 -11
  477. package/src/renderers/Nav.tsx +392 -60
  478. package/src/renderers/Page.tsx +1 -1
  479. package/src/renderers/Portlet.tsx +423 -0
  480. package/src/renderers/Property.tsx +3 -2
  481. package/src/renderers/SearchBox.tsx +23 -4
  482. package/src/renderers/SparkLine.tsx +5 -0
  483. package/src/renderers/Table/ColumnToggler.tsx +544 -0
  484. package/src/renderers/Table/ItemActionsWrapper.tsx +44 -0
  485. package/src/renderers/Table/TableCell.tsx +16 -1
  486. package/src/renderers/Table/TableContent.tsx +40 -2
  487. package/src/renderers/Table/index.tsx +257 -80
  488. package/src/renderers/Tabs.tsx +9 -1
  489. package/src/renderers/WebComponent.tsx +2 -2
  490. package/src/store/crud.ts +3 -8
  491. package/src/store/form.ts +5 -10
  492. package/src/store/service.ts +5 -4
  493. package/src/store/table.ts +94 -6
  494. package/src/types.ts +57 -0
  495. package/src/utils/api.ts +52 -23
  496. package/src/utils/dom.tsx +12 -0
  497. package/src/utils/handleAction.ts +41 -0
  498. package/src/utils/helper.ts +12 -3
  499. package/src/utils/icon.tsx +4 -0
  500. package/src/utils/tpl-builtin.ts +48 -17
  501. package/dump.rdb +0 -0
  502. package/lib/components/AssociatedCheckboxes.d.ts +0 -762
  503. package/lib/components/AssociatedCheckboxes.js +0 -90
  504. package/lib/components/AssociatedCheckboxes.js.map +0 -13
  505. package/lib/components/ChainedCheckboxes.js.map +0 -13
  506. package/lib/components/Checkboxes.js +0 -101
  507. package/lib/components/Checkboxes.js.map +0 -13
  508. package/lib/components/ListCheckboxes.d.ts +0 -739
  509. package/lib/components/ListCheckboxes.js +0 -48
  510. package/lib/components/ListCheckboxes.js.map +0 -13
  511. package/lib/components/ListRadios.d.ts +0 -763
  512. package/lib/components/ListRadios.js +0 -86
  513. package/lib/components/ListRadios.js.map +0 -13
  514. package/lib/components/TableCheckboxes.js.map +0 -13
  515. package/lib/components/TreeCheckboxes.js.map +0 -13
  516. package/lib/components/TreeRadios.d.ts +0 -838
  517. package/lib/components/TreeRadios.js +0 -116
  518. package/lib/components/TreeRadios.js.map +0 -13
  519. package/src/components/ListRadios.tsx +0 -159
  520. package/src/components/TreeRadios.tsx +0 -202
@@ -3,8 +3,8 @@
3
3
  --black: #1c2b36;
4
4
  --white: #fff;
5
5
  --primary: #7266ba;
6
- --primary-onHover: #5b4eac;
7
- --primary-onActive: #564aa3;
6
+ --primary-onHover: #4f86f4;
7
+ --primary-onActive: #1c53c1;
8
8
  --secondary: #6c757d;
9
9
  --secondary-onHover: #5a6268;
10
10
  --secondary-onActive: #545b62;
@@ -164,12 +164,12 @@
164
164
  --Button--default-bg: var(--white);
165
165
  --Button--default-border: var(--borderColor);
166
166
  --Button--default-color: var(--text-color);
167
- --Button--default-onActive-bg: #e6e6e6;
168
- --Button--default-onActive-border: #adb4bf;
169
- --Button--default-onActive-color: var(--Button--default-color);
170
- --Button--default-onHover-bg: #ececec;
171
- --Button--default-onHover-border: #b4bbc5;
172
- --Button--default-onHover-color: var(--Button--default-color);
167
+ --Button--default-onActive-bg: var(--white);
168
+ --Button--default-onActive-border: var(--primary-onActive);
169
+ --Button--default-onActive-color: var(--primary-onActive);
170
+ --Button--default-onHover-bg: var(--white);
171
+ --Button--default-onHover-border: var(--primary);
172
+ --Button--default-onHover-color: var(--primary);
173
173
  --Button--iconOnly-minWidthRate: 4 / 3;
174
174
  --Button--info-bg: var(--info);
175
175
  --Button--info-border: var(--Button--info-bg);
@@ -202,7 +202,8 @@
202
202
  --Button--light-onHover-color: var(--Button--light-color);
203
203
  --Button--link-color: var(--primary);
204
204
  --Button--link-onDisabled-color: #4b5563;
205
- --Button--link-onHover-color: var(--text--loud-color);
205
+ --Button--link-onHover-color: var(--primary-onHover);
206
+ --Button--link-onActive-color: var(--primary-onActive);
206
207
  --Button--md-fontSize: var(--Button-fontSize);
207
208
  --Button--md-height: var(--Button-height);
208
209
  --Button--md-lineHeight: var(--Button-lineHeight);
@@ -217,10 +218,10 @@
217
218
  --Button--primary-border: var(--Button--primary-bg);
218
219
  --Button--primary-color: var(--button-color);
219
220
  --Button--primary-onActive-bg: var(--primary-onActive);
220
- --Button--primary-onActive-border: #52469b;
221
+ --Button--primary-onActive-border: var(--primary-onActive);
221
222
  --Button--primary-onActive-color: var(--Button--primary-color);
222
223
  --Button--primary-onHover-bg: var(--primary-onHover);
223
- --Button--primary-onHover-border: var(--primary-onActive);
224
+ --Button--primary-onHover-border: var(--primary-onHover);
224
225
  --Button--primary-onHover-color: var(--Button--primary-color);
225
226
  --Button--secondary-bg: var(--secondary);
226
227
  --Button--secondary-border: var(--Button--secondary-bg);
@@ -251,6 +252,14 @@
251
252
  --Button--success-onHover-bg: var(--success-onHover);
252
253
  --Button--success-onHover-border: var(--success-onActive);
253
254
  --Button--success-onHover-color: var(--Button--success-color);
255
+ --Button--enhance-border: var(--primary);
256
+ --Button--enhance-color: var(--primary);
257
+ --Button--enhance-onActive-bg: var(--white);
258
+ --Button--enhance-onActive-border: var(--primary-onActive);
259
+ --Button--enhance-onActive-color: var(--primary-onActive);
260
+ --Button--enhance-onHover-bg: var(--white);
261
+ --Button--enhance-onHover-border: var(--primary-onHover);
262
+ --Button--enhance-onHover-color: var(--primary-onHover);
254
263
  --Button--warning-bg: var(--warning);
255
264
  --Button--warning-border: var(--Button--warning-bg);
256
265
  --Button--warning-color: var(--button-color);
@@ -281,12 +290,16 @@
281
290
  --Button-lineHeight: var(--Form-input-lineHeight);
282
291
  --Button-mimWidth: auto;
283
292
  --Button-onActive-boxShadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
293
+ --Button-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
294
+ --Button-animation-spin: spin 1s infinite linear;
284
295
  --Button-onActive-color: var(--primary);
285
296
  --Button-onActive-border: var(--primary);
286
297
  --Button-onDisabled-borderColor: #dee2e6;
287
298
  --Button-onDisabled-opacity: 0.65;
299
+ --Button-onDisabled-bg: #f2f3f3;
288
300
  --Button-onFocus-boxShadow: none;
289
301
  --Button-paddingX: 0.75rem;
302
+ --Button-paddingX-right: 0.625rem;
290
303
  --Button-paddingY: calc(
291
304
  (
292
305
  var(--Button-height) - var(--Button-borderWidth) * 2 -
@@ -472,6 +485,24 @@
472
485
  --Combo-toolbarBtn-paddingY: 0.125rem;
473
486
  --Copyable-iconColor: var(--icon-color);
474
487
  --Copyable-onHover-iconColor: var(--icon-onHover-color);
488
+ --Collapse-border: none;
489
+ --Collapse-border-color: var(--borderColorLight);
490
+ --Collapse-header-fontSize: var(--fontSizeMd);
491
+ --Collapse-header-fontWeight: var(--fontWeightNormal);
492
+ --Collapse-header-padding: 1.125rem 0 var(--gap-xs) 0;
493
+ --Collapse-header-bg: transparent;
494
+ --Collapse-header-onHover-bg: transparent;
495
+ --Collapse-header-collapsed-border: var(--borderWidth) solid
496
+ var(--Collapse-border-color);
497
+ --Collapse-header-collapsed-borderTop: none;
498
+ --Collapse-header-collapsed-borderBottom: var(
499
+ --Collapse-header-collapsed-border
500
+ );
501
+ --Collapse-header-wrapper-direction: row;
502
+ --Collapse-content-padding: 1.125rem 0;
503
+ --Collapse-content-color: var(--body-color);
504
+ --Collapse-content-fontSize: var(--body-size);
505
+ --Collapse-content-fontWeight: var(--body-weight);
475
506
  --Crud-toolbar-gap: var(--gap-xs);
476
507
  --Crud-toolbar-height: 1.875rem;
477
508
  --Crud-toolbar-lineHeight: var(--lineHeightBase);
@@ -497,6 +528,7 @@
497
528
  ) / 2 - var(--DatePicker-borderWidth)
498
529
  );
499
530
  --DatePicker-placeholderColor: var(--Form-input-placeholderColor);
531
+ --LocationPicker-borderRadius: var(--Form-input-borderWidth);
500
532
  --Divider-borderStyle: dashed;
501
533
  --Drawer-bg: var(--background);
502
534
  --Drawer-body-padding: var(--gap-base);
@@ -530,8 +562,9 @@
530
562
  --DropDown-menu-paddingX: 0;
531
563
  --DropDown-menu-paddingY: var(--gap-xs);
532
564
  --DropDown-menuItem-onHover-bg: var(--ListMenu-item--onHover-bg);
533
- --DropDown-menuItem-onHover-color: inherit;
534
- --DropDown-menuItem-onActive-color: var(--info);
565
+ --DropDown-menuItem-color: var(--text-color);
566
+ --DropDown-menuItem-onHover-color: var(--primary);
567
+ --DropDown-menuItem-onActive-color: var(--primary);
535
568
  --DropDown-menuItem-onDisabled-color: var(--text--muted-color);
536
569
  --DropDown-menuItem-paddingX: var(--gap-sm);
537
570
  --DropDown-menuItem-paddingY: calc(
@@ -593,6 +626,7 @@
593
626
  ) / 2
594
627
  );
595
628
  --Form-input-placeholderColor: var(--text--muted-color);
629
+ --Form-input-onDisabled-color: var(--text--muted-color);
596
630
  --Form-item-gap: var(--gap-base);
597
631
  --Form-label-paddingTop: calc(
598
632
  (
@@ -651,6 +685,7 @@
651
685
  --IconPicker-tabs-bg: #f0f3f4;
652
686
  --ImageControl-addBtn-bg: var(--Button--default-bg);
653
687
  --ImageControl-addBtn-border: var(--Button--default-border);
688
+ --ImageControl-addBtn-borderRadius: 0;
654
689
  --ImageControl-addBtn-color: var(--Button--default-color);
655
690
  --ImageControl-addBtn-onActive-bg: #e6e6e6;
656
691
  --ImageControl-addBtn-onActive-border: #adb4bf;
@@ -663,6 +698,8 @@
663
698
  --ImageControl-addBtn-onHover-bg: #ececec;
664
699
  --ImageControl-addBtn-onHover-border: #b4bbc5;
665
700
  --ImageControl-addBtn-onHover-color: var(--Button--default-color);
701
+ --ImageControl-progress-borderRadius: 0;
702
+ --FileControl-progress-borderRadius: 0;
666
703
  --InputGroup-addOn-bg: var(--Form-input-addOnBg);
667
704
  --InputGroup-addOn-borderColor: var(--Form-input-borderColor);
668
705
  --InputGroup-addOn-borderRadius: var(--Form-input-borderRadius);
@@ -778,6 +815,7 @@
778
815
  --ListControl-item-bg: var(--white);
779
816
  --ListControl-item-borderColor: var(--borderColor);
780
817
  --ListControl-item-borderWidth: var(--borderWidth);
818
+ --ListControl-item-borderRadius: 0.1875rem;
781
819
  --ListControl-item-color: var(--text-color);
782
820
  --ListControl-item-onActive-after-borderColor: var(--primary);
783
821
  --ListControl-item-onActive-before-bg: var(--white);
@@ -948,11 +986,28 @@
948
986
  --Panel-titleMarginTop: 0;
949
987
  --Picker-iconColor: var(--icon-color);
950
988
  --Picker-onHover-iconColor: var(--icon-onHover-color);
989
+ --PickerColumns-bg: white;
990
+ --PickerColumns-toolbar-height: 3.125rem;
991
+ --PickerColumns-title-fontSize: var(--fontSizeLg);
992
+ --PickerColumns-title-lineHeight: 1.5;
993
+ --PickerColumns-action-padding: 0 var(--gap-sm);
994
+ --PickerColumns-action-fontSize: var(--fontSizeMd);
995
+ --PickerColumns-confirmAction-color: var(--Button--info-bg);
996
+ --PickerColumns-cancelAction-color: var(--Button--light-bg);
997
+ --PickerColumns-option-fontSize: var(--fontSizeLg);
998
+ --PickerColumns-optionText-color: var(--text-color);
999
+ --PickerColumns-optionDisabled-opacity: 0.3;
1000
+ --PickerColumns-loadingIcon-color: var(--icon-color);
1001
+ --PickerColumns-loadingMask-Color: rgba(255, 255, 255, 0.9);
951
1002
  --PopOver-bg: white;
952
1003
  --PopOverAble-iconColor: inherit;
953
1004
  --PopOverAble-onHover-iconColor: inherit;
954
1005
  --Property-title-bg: #f2f2f2;
955
1006
  --Property-label-bg: #f7f7f7;
1007
+ --Portlet-borderColor: var(--borderColor);
1008
+ --Portlet-borderStyle: solid;
1009
+ --Portlet-borderWidth: var(--borderWidth);
1010
+ --Portlet-borderRadius: var(--borderRadius);
956
1011
  --QuickEdit-iconColor: inherit;
957
1012
  --QuickEdit-onFocus-borderColor: var(--info);
958
1013
  --QuickEdit-onFocus-borderWidth: var(--borderWidth);
@@ -1045,6 +1100,8 @@
1045
1100
  --Table-toolbar-marginX: 0;
1046
1101
  --Table-toolbar-marginY: var(--gap-base);
1047
1102
  --Table-tree-borderColor: var(--Table-borderColor);
1103
+ --Table-searchableForm-backgroundColor: #f6f7f8;
1104
+ --Table-searchableForm-borderRadius: 0.25rem;
1048
1105
  --TableCell--edge-paddingX: var(--gap-md);
1049
1106
  --TableCell-filterBtn--onActive-color: var(--primary);
1050
1107
  --TableCell-filterBtn-width: 1rem;
@@ -1230,6 +1287,14 @@
1230
1287
  --Steps-sub-title-color: var(--text-color);
1231
1288
  --Steps-line-bg: var(--Steps-bg);
1232
1289
  --Steps-line-success-bg: var(--Steps-status-success);
1290
+ --Progress-borderRadius: var(--borderRadius);
1291
+ --ColumnToggler-backgroundColor: var(--white);
1292
+ --ColumnToggler-borderRadius: 0.25rem;
1293
+ --ColumnToggler-lineHeight: 1.5rem;
1294
+ --ColumnToggler-title-fontColor: #080e1a;
1295
+ --ColumnToggler-fontColor: #151a26;
1296
+ --ColumnToggler-item-backgroundColor: #f6f7f8;
1297
+ --ColumnToggler-item-backgroundColor-onHover: rgba(36, 104, 242, 0.1);
1233
1298
  }
1234
1299
 
1235
1300
  /* Reset
@@ -1554,6 +1619,8 @@ svg.icon {
1554
1619
  width: 1em;
1555
1620
  height: 1em;
1556
1621
  fill: currentColor;
1622
+ position: relative;
1623
+ top: 0.125em;
1557
1624
  }
1558
1625
 
1559
1626
  svg.r90 {
@@ -2987,6 +3054,15 @@ img.a-AsideNav-itemIcon {
2987
3054
  .a-Button > .pull-right {
2988
3055
  margin-left: var(--Button-paddingX);
2989
3056
  }
3057
+ .a-Button .a-Button--loading:first-child:not(:last-child):not(.pull-right),
3058
+ .a-Button > svg.icon:not(:last-child):not(.pull-right),
3059
+ .a-Button > .pull-left {
3060
+ margin-right: var(--Button-paddingX);
3061
+ }
3062
+ .a-Button .a-Button--loading:last-child:not(:first-child):not(.pull-left),
3063
+ .a-Button > .pull-right {
3064
+ margin-left: var(--Button-paddingX);
3065
+ }
2990
3066
  .a-Button img.a-Button-icon {
2991
3067
  height: var(--Button-fontSize);
2992
3068
  vertical-align: middle;
@@ -2999,14 +3075,21 @@ img.a-AsideNav-itemIcon {
2999
3075
  box-shadow: var(--Button-onFocus-boxShadow);
3000
3076
  }
3001
3077
  .a-Button.is-disabled, .a-Button:disabled {
3002
- opacity: var(--Button-onDisabled-opacity);
3003
3078
  filter: grayscale(100%);
3004
3079
  box-shadow: none;
3005
3080
  cursor: not-allowed;
3081
+ color: var(--text--muted-color);
3082
+ pointer-events: auto;
3083
+ border: var(--Button-borderWidth) solid var(--Button-onDisabled-borderColor);
3084
+ background: var(--Button-onDisabled-bg);
3006
3085
  }
3007
3086
  .a-Button:not(:disabled):not(.is-disabled) {
3008
3087
  cursor: pointer;
3009
3088
  }
3089
+ .a-Button.cxd-Button--link.is-disabled {
3090
+ background: transparent;
3091
+ border: none;
3092
+ }
3010
3093
  .a-Button > .pull-left,
3011
3094
  .a-Button > .pull-right {
3012
3095
  line-height: inherit;
@@ -3034,6 +3117,11 @@ fieldset:disabled a.a-Button {
3034
3117
  background: var(--Button--primary-onHover-bg);
3035
3118
  border-color: var(--Button--primary-onHover-border);
3036
3119
  }
3120
+ .a-Button--primary:not(:disabled):not(.is-disabled):hover:active {
3121
+ color: var(--Button--primary-onActive-color);
3122
+ background: var(--Button--primary-onActive-bg);
3123
+ border-color: var(--Button--primary-onActive-border);
3124
+ }
3037
3125
  .a-Button--primary:hover:focus {
3038
3126
  box-shadow: var(--Button-boxShadow);
3039
3127
  }
@@ -3050,6 +3138,11 @@ fieldset:disabled a.a-Button {
3050
3138
  background: var(--Button--secondary-onHover-bg);
3051
3139
  border-color: var(--Button--secondary-onHover-border);
3052
3140
  }
3141
+ .a-Button--secondary:not(:disabled):not(.is-disabled):hover:active {
3142
+ color: var(--Button--secondary-onActive-color);
3143
+ background: var(--Button--secondary-onActive-bg);
3144
+ border-color: var(--Button--secondary-onActive-border);
3145
+ }
3053
3146
  .a-Button--secondary:hover:focus {
3054
3147
  box-shadow: var(--Button-boxShadow);
3055
3148
  }
@@ -3066,10 +3159,36 @@ fieldset:disabled a.a-Button {
3066
3159
  background: var(--Button--success-onHover-bg);
3067
3160
  border-color: var(--Button--success-onHover-border);
3068
3161
  }
3162
+ .a-Button--success:not(:disabled):not(.is-disabled):hover:active {
3163
+ color: var(--Button--success-onActive-color);
3164
+ background: var(--Button--success-onActive-bg);
3165
+ border-color: var(--Button--success-onActive-border);
3166
+ }
3069
3167
  .a-Button--success:hover:focus {
3070
3168
  box-shadow: var(--Button-boxShadow);
3071
3169
  }
3072
3170
 
3171
+ .a-Button--enhance {
3172
+ color: var(--Button--enhance-color);
3173
+ background: var(--Button--enhance-bg);
3174
+ border-color: var(--Button--enhance-border);
3175
+ box-shadow: var(--Button-boxShadow);
3176
+ text-shadow: var(--Button-textShadow);
3177
+ }
3178
+ .a-Button--enhance:not(:disabled):not(.is-disabled):hover {
3179
+ color: var(--Button--enhance-onHover-color);
3180
+ background: var(--Button--enhance-onHover-bg);
3181
+ border-color: var(--Button--enhance-onHover-border);
3182
+ }
3183
+ .a-Button--enhance:not(:disabled):not(.is-disabled):hover:active {
3184
+ color: var(--Button--enhance-onActive-color);
3185
+ background: var(--Button--enhance-onActive-bg);
3186
+ border-color: var(--Button--enhance-onActive-border);
3187
+ }
3188
+ .a-Button--enhance:hover:focus {
3189
+ box-shadow: var(--Button-boxShadow);
3190
+ }
3191
+
3073
3192
  .a-Button--info {
3074
3193
  color: var(--Button--info-color);
3075
3194
  background: var(--Button--info-bg);
@@ -3082,6 +3201,11 @@ fieldset:disabled a.a-Button {
3082
3201
  background: var(--Button--info-onHover-bg);
3083
3202
  border-color: var(--Button--info-onHover-border);
3084
3203
  }
3204
+ .a-Button--info:not(:disabled):not(.is-disabled):hover:active {
3205
+ color: var(--Button--info-onActive-color);
3206
+ background: var(--Button--info-onActive-bg);
3207
+ border-color: var(--Button--info-onActive-border);
3208
+ }
3085
3209
  .a-Button--info:hover:focus {
3086
3210
  box-shadow: var(--Button-boxShadow);
3087
3211
  }
@@ -3098,6 +3222,11 @@ fieldset:disabled a.a-Button {
3098
3222
  background: var(--Button--warning-onHover-bg);
3099
3223
  border-color: var(--Button--warning-onHover-border);
3100
3224
  }
3225
+ .a-Button--warning:not(:disabled):not(.is-disabled):hover:active {
3226
+ color: var(--Button--warning-onActive-color);
3227
+ background: var(--Button--warning-onActive-bg);
3228
+ border-color: var(--Button--warning-onActive-border);
3229
+ }
3101
3230
  .a-Button--warning:hover:focus {
3102
3231
  box-shadow: var(--Button-boxShadow);
3103
3232
  }
@@ -3114,6 +3243,11 @@ fieldset:disabled a.a-Button {
3114
3243
  background: var(--Button--danger-onHover-bg);
3115
3244
  border-color: var(--Button--danger-onHover-border);
3116
3245
  }
3246
+ .a-Button--danger:not(:disabled):not(.is-disabled):hover:active {
3247
+ color: var(--Button--danger-onActive-color);
3248
+ background: var(--Button--danger-onActive-bg);
3249
+ border-color: var(--Button--danger-onActive-border);
3250
+ }
3117
3251
  .a-Button--danger:hover:focus {
3118
3252
  box-shadow: var(--Button-boxShadow);
3119
3253
  }
@@ -3130,6 +3264,11 @@ fieldset:disabled a.a-Button {
3130
3264
  background: var(--Button--light-onHover-bg);
3131
3265
  border-color: var(--Button--light-onHover-border);
3132
3266
  }
3267
+ .a-Button--light:not(:disabled):not(.is-disabled):hover:active {
3268
+ color: var(--Button--light-onActive-color);
3269
+ background: var(--Button--light-onActive-bg);
3270
+ border-color: var(--Button--light-onActive-border);
3271
+ }
3133
3272
  .a-Button--light:hover:focus {
3134
3273
  box-shadow: var(--Button-boxShadow);
3135
3274
  }
@@ -3146,6 +3285,11 @@ fieldset:disabled a.a-Button {
3146
3285
  background: var(--Button--dark-onHover-bg);
3147
3286
  border-color: var(--Button--dark-onHover-border);
3148
3287
  }
3288
+ .a-Button--dark:not(:disabled):not(.is-disabled):hover:active {
3289
+ color: var(--Button--dark-onActive-color);
3290
+ background: var(--Button--dark-onActive-bg);
3291
+ border-color: var(--Button--dark-onActive-border);
3292
+ }
3149
3293
  .a-Button--dark:hover:focus {
3150
3294
  box-shadow: var(--Button-boxShadow);
3151
3295
  }
@@ -3162,6 +3306,11 @@ fieldset:disabled a.a-Button {
3162
3306
  background: var(--Button--default-onHover-bg);
3163
3307
  border-color: var(--Button--default-onHover-border);
3164
3308
  }
3309
+ .a-Button--default:not(:disabled):not(.is-disabled):hover:active {
3310
+ color: var(--Button--default-onActive-color);
3311
+ background: var(--Button--default-onActive-bg);
3312
+ border-color: var(--Button--default-onActive-border);
3313
+ }
3165
3314
  .a-Button--default:hover:focus {
3166
3315
  box-shadow: var(--Button-boxShadow);
3167
3316
  }
@@ -3182,6 +3331,15 @@ fieldset:disabled a.a-Button {
3182
3331
  .a-Button--xs > .pull-right {
3183
3332
  margin-left: var(--Button--xs-paddingX);
3184
3333
  }
3334
+ .a-Button--xs .a-Button--loading:first-child:not(:last-child):not(.pull-right),
3335
+ .a-Button--xs > svg.icon:not(:last-child):not(.pull-right),
3336
+ .a-Button--xs > .pull-left {
3337
+ margin-right: var(--Button--xs-paddingX);
3338
+ }
3339
+ .a-Button--xs .a-Button--loading:last-child:not(:first-child):not(.pull-left),
3340
+ .a-Button--xs > .pull-right {
3341
+ margin-left: var(--Button--xs-paddingX);
3342
+ }
3185
3343
  .a-Button--xs img.a-Button-icon {
3186
3344
  height: var(--Button-fontSize);
3187
3345
  vertical-align: middle;
@@ -3206,6 +3364,15 @@ fieldset:disabled a.a-Button {
3206
3364
  .a-Button--sm > .pull-right {
3207
3365
  margin-left: var(--Button--sm-paddingX);
3208
3366
  }
3367
+ .a-Button--sm .a-Button--loading:first-child:not(:last-child):not(.pull-right),
3368
+ .a-Button--sm > svg.icon:not(:last-child):not(.pull-right),
3369
+ .a-Button--sm > .pull-left {
3370
+ margin-right: var(--Button--sm-paddingX);
3371
+ }
3372
+ .a-Button--sm .a-Button--loading:last-child:not(:first-child):not(.pull-left),
3373
+ .a-Button--sm > .pull-right {
3374
+ margin-left: var(--Button--sm-paddingX);
3375
+ }
3209
3376
  .a-Button--sm img.a-Button-icon {
3210
3377
  height: var(--Button-fontSize);
3211
3378
  vertical-align: middle;
@@ -3230,6 +3397,15 @@ fieldset:disabled a.a-Button {
3230
3397
  .a-Button--md > .pull-right {
3231
3398
  margin-left: var(--Button--md-paddingX);
3232
3399
  }
3400
+ .a-Button--md .a-Button--loading:first-child:not(:last-child):not(.pull-right),
3401
+ .a-Button--md > svg.icon:not(:last-child):not(.pull-right),
3402
+ .a-Button--md > .pull-left {
3403
+ margin-right: var(--Button--md-paddingX);
3404
+ }
3405
+ .a-Button--md .a-Button--loading:last-child:not(:first-child):not(.pull-left),
3406
+ .a-Button--md > .pull-right {
3407
+ margin-left: var(--Button--md-paddingX);
3408
+ }
3233
3409
  .a-Button--md img.a-Button-icon {
3234
3410
  height: var(--Button-fontSize);
3235
3411
  vertical-align: middle;
@@ -3254,6 +3430,15 @@ fieldset:disabled a.a-Button {
3254
3430
  .a-Button--lg > .pull-right {
3255
3431
  margin-left: var(--Button--lg-paddingX);
3256
3432
  }
3433
+ .a-Button--lg .a-Button--loading:first-child:not(:last-child):not(.pull-right),
3434
+ .a-Button--lg > svg.icon:not(:last-child):not(.pull-right),
3435
+ .a-Button--lg > .pull-left {
3436
+ margin-right: var(--Button--lg-paddingX);
3437
+ }
3438
+ .a-Button--lg .a-Button--loading:last-child:not(:first-child):not(.pull-left),
3439
+ .a-Button--lg > .pull-right {
3440
+ margin-left: var(--Button--lg-paddingX);
3441
+ }
3257
3442
  .a-Button--lg img.a-Button-icon {
3258
3443
  height: var(--Button-fontSize);
3259
3444
  vertical-align: middle;
@@ -3278,6 +3463,13 @@ fieldset:disabled a.a-Button {
3278
3463
  line-height: 1;
3279
3464
  }
3280
3465
 
3466
+ .a-Button--loading {
3467
+ transition: --Button-transition;
3468
+ }
3469
+ .a-Button--loading svg {
3470
+ animation: var(--Button-animation-spin);
3471
+ }
3472
+
3281
3473
  .a-Button--link {
3282
3474
  width: auto;
3283
3475
  min-width: auto;
@@ -3289,13 +3481,16 @@ fieldset:disabled a.a-Button {
3289
3481
  }
3290
3482
  .a-Button--link:hover:focus {
3291
3483
  color: var(--Button--link-onHover-color);
3292
- text-decoration: var(--link-onHover-decoration);
3484
+ box-shadow: none;
3485
+ }
3486
+ .a-Button--link:hover:active {
3487
+ color: var(--Button--link-onActive-color);
3293
3488
  box-shadow: none;
3294
3489
  }
3295
3490
  .a-Button--link:disabled, .a-Button--link.is-disabled {
3296
3491
  color: var(--text--muted-color);
3297
3492
  pointer-events: none;
3298
- background: transparent;
3493
+ background: var(--Button-onDisabled-bg);
3299
3494
  }
3300
3495
 
3301
3496
  .a-Button--block {
@@ -3364,7 +3559,7 @@ input[type=button].a-Button--block {
3364
3559
  display: inline-block;
3365
3560
  position: relative;
3366
3561
  }
3367
- .a-Badge-text, .a-Badge-dot {
3562
+ .a-Badge-text, .a-Badge-dot, .a-Badge-ribbon {
3368
3563
  background: var(--danger);
3369
3564
  position: absolute;
3370
3565
  top: 0;
@@ -3420,6 +3615,49 @@ input[type=button].a-Button--block {
3420
3615
  height: var(--Badge-size);
3421
3616
  border-radius: 50%;
3422
3617
  }
3618
+ .a-Badge-ribbon-out {
3619
+ overflow: hidden;
3620
+ position: absolute;
3621
+ top: 0;
3622
+ bottom: 0;
3623
+ right: 0;
3624
+ }
3625
+ .a-Badge-ribbon {
3626
+ color: var(--Badge-color);
3627
+ height: var(--Badge-size);
3628
+ line-height: var(--Badge-size);
3629
+ transform: translateX(calc(50% - 5px)) rotate(45deg) scale(0.7);
3630
+ transform-origin: 50% 0;
3631
+ border-radius: 0;
3632
+ text-align: center;
3633
+ width: 62.5rem;
3634
+ top: 5px;
3635
+ }
3636
+ .a-Badge-ribbon-out--top-left, .a-Badge-ribbon-out--bottom-left {
3637
+ left: 0;
3638
+ right: auto;
3639
+ }
3640
+ .a-Badge-ribbon--top-left {
3641
+ transform: translateX(calc(-50% + 5px)) rotate(-45deg) scale(0.7);
3642
+ left: 0;
3643
+ right: auto;
3644
+ }
3645
+ .a-Badge-ribbon--bottom-left {
3646
+ transform: translateX(calc(-50% + 5px)) rotate(45deg) scale(0.7);
3647
+ transform-origin: 50% 100%;
3648
+ left: 0;
3649
+ right: auto;
3650
+ bottom: 5px;
3651
+ top: auto;
3652
+ }
3653
+ .a-Badge-ribbon--bottom-right {
3654
+ transform: translateX(calc(50% - 5px)) rotate(-45deg) scale(0.7);
3655
+ transform-origin: 50% 100%;
3656
+ left: auto;
3657
+ right: 0;
3658
+ bottom: 5px;
3659
+ top: auto;
3660
+ }
3423
3661
  @keyframes badgeDotAnimation {
3424
3662
  0% {
3425
3663
  transform: scale(0.8);
@@ -4224,6 +4462,123 @@ input[type=button].a-Button--block {
4224
4462
  bottom: 0;
4225
4463
  background: transparent;
4226
4464
  }
4465
+ .a-PopOver-isMobile .a-PopOver-overlay {
4466
+ background: rgba(0, 0, 0, 0.3);
4467
+ }
4468
+ .a-PopOver--leftBottomLeftTop {
4469
+ margin-top: 0.25rem;
4470
+ }
4471
+ .a-PopOver--leftTopLeftBottom {
4472
+ margin-top: -0.25rem;
4473
+ }
4474
+
4475
+ .has-popover {
4476
+ position: relative;
4477
+ }
4478
+
4479
+ .a-PickerColumns {
4480
+ position: relative;
4481
+ background-color: var(--PickerColumns-bg);
4482
+ user-select: none;
4483
+ }
4484
+ .a-PickerColumns-popOver {
4485
+ position: fixed;
4486
+ bottom: 0;
4487
+ left: 0;
4488
+ width: 100%;
4489
+ padding: 0 var(--gap-sm);
4490
+ }
4491
+ .a-PickerColumns-toolbar {
4492
+ display: flex;
4493
+ align-items: center;
4494
+ justify-content: space-between;
4495
+ height: var(--PickerColumns-toolbar-height);
4496
+ }
4497
+ .a-PickerColumns-cancel, .a-PickerColumns-confirm {
4498
+ height: 100%;
4499
+ padding: var(--PickerColumns-action-padding);
4500
+ font-size: var(--PickerColumns-action-fontSize);
4501
+ background-color: transparent;
4502
+ border: none;
4503
+ cursor: pointer;
4504
+ }
4505
+ .a-PickerColumns-cancel:active, .a-PickerColumns-confirm:active {
4506
+ opacity: 0.7;
4507
+ }
4508
+ .a-PickerColumns-confirm {
4509
+ color: var(--PickerColumns-confirmAction-color);
4510
+ }
4511
+ .a-PickerColumns-cancel {
4512
+ color: var(--PickerColumns-cancelAction-color);
4513
+ }
4514
+ .a-PickerColumns-title {
4515
+ max-width: 50%;
4516
+ font-weight: 500;
4517
+ font-size: var(--PickerColumns-title-fontSize);
4518
+ line-height: var(--PickerColumns-title-lineHeight);
4519
+ text-align: center;
4520
+ }
4521
+ .a-PickerColumns-columns {
4522
+ position: relative;
4523
+ display: flex;
4524
+ cursor: grab;
4525
+ }
4526
+ .a-PickerColumns-loading {
4527
+ position: absolute;
4528
+ top: 0;
4529
+ right: 0;
4530
+ bottom: 0;
4531
+ left: 0;
4532
+ z-index: 3;
4533
+ display: flex;
4534
+ align-items: center;
4535
+ justify-content: center;
4536
+ color: var(--PickerColumns-loadingIcon-color);
4537
+ background-color: var(--PickerColumns-loadingMask-color);
4538
+ }
4539
+ .a-PickerColumns-frame {
4540
+ position: absolute;
4541
+ top: 50%;
4542
+ right: var(--gap-md);
4543
+ left: var(--gap-md);
4544
+ z-index: 2;
4545
+ transform: translateY(-50%);
4546
+ pointer-events: none;
4547
+ }
4548
+ .a-PickerColumns-mask {
4549
+ position: absolute;
4550
+ top: 0;
4551
+ left: 0;
4552
+ z-index: 1;
4553
+ width: 100%;
4554
+ height: 100%;
4555
+ background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.4)), linear-gradient(0deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.4));
4556
+ background-repeat: no-repeat;
4557
+ background-position: top, bottom;
4558
+ transform: translateZ(0);
4559
+ pointer-events: none;
4560
+ }
4561
+ .a-PickerColumns-column {
4562
+ flex: 1;
4563
+ overflow: hidden;
4564
+ font-size: var(--PickerColumns-option-fontSize);
4565
+ }
4566
+ .a-PickerColumns-columnWrapper {
4567
+ margin: 0;
4568
+ padding: 0;
4569
+ list-style: none;
4570
+ transition-timing-function: cubic-bezier(0.23, 1, 0.68, 1);
4571
+ }
4572
+ .a-PickerColumns-columnItem {
4573
+ display: flex;
4574
+ align-items: center;
4575
+ justify-content: center;
4576
+ color: var(--PickerColumns-optionText-color);
4577
+ }
4578
+ .a-PickerColumns-columnItem.is-disabled {
4579
+ cursor: not-allowed;
4580
+ opacity: var(--PickerColumns-optionDisabled-opacity);
4581
+ }
4227
4582
 
4228
4583
  @keyframes bounceIn {
4229
4584
  from, 20%, 40%, 60%, 80%, to {
@@ -4490,6 +4845,15 @@ input[type=button].a-Button--block {
4490
4845
  .a-ArrayInput-addBtn > .pull-right {
4491
4846
  margin-left: var(--Combo-addBtn-paddingX);
4492
4847
  }
4848
+ .a-ArrayInput-addBtn .a-Button--loading:first-child:not(:last-child):not(.pull-right),
4849
+ .a-ArrayInput-addBtn > svg.icon:not(:last-child):not(.pull-right),
4850
+ .a-ArrayInput-addBtn > .pull-left {
4851
+ margin-right: var(--Combo-addBtn-paddingX);
4852
+ }
4853
+ .a-ArrayInput-addBtn .a-Button--loading:last-child:not(:first-child):not(.pull-left),
4854
+ .a-ArrayInput-addBtn > .pull-right {
4855
+ margin-left: var(--Combo-addBtn-paddingX);
4856
+ }
4493
4857
  .a-ArrayInput-addBtn img.a-Button-icon {
4494
4858
  height: var(--Button-fontSize);
4495
4859
  vertical-align: middle;
@@ -4499,6 +4863,11 @@ input[type=button].a-Button--block {
4499
4863
  background: var(--Combo-addBtn-onHover-bg);
4500
4864
  border-color: var(--Combo-addBtn-onHover-border);
4501
4865
  }
4866
+ .a-ArrayInput-addBtn:not(:disabled):not(.is-disabled):hover:active {
4867
+ color: var(--Combo-addBtn-onActive-color);
4868
+ background: var(--Combo-addBtn-onActive-bg);
4869
+ border-color: var(--Combo-addBtn-onActive-border);
4870
+ }
4502
4871
  .a-ArrayInput-addBtn:hover:focus {
4503
4872
  box-shadow: var(--Button-boxShadow);
4504
4873
  }
@@ -4954,27 +5323,31 @@ input[type=button].a-Button--block {
4954
5323
  }
4955
5324
 
4956
5325
  .a-Nav {
5326
+ position: relative;
5327
+ }
5328
+ .a-Nav .a-Nav-list {
4957
5329
  list-style: none;
4958
5330
  user-select: none;
4959
5331
  margin: 0;
4960
5332
  padding: 0;
4961
5333
  position: relative;
4962
5334
  }
4963
- .a-Nav .a-Nav-itemIcon {
5335
+ .a-Nav .a-Nav-list .a-Nav-itemIcon {
4964
5336
  margin-right: var(--gap-sm);
4965
5337
  }
4966
- .a-Nav img.a-Nav-itemIcon {
5338
+ .a-Nav .a-Nav-list img.a-Nav-itemIcon {
4967
5339
  height: var(--Tabs-linkFontSize);
4968
5340
  vertical-align: middle;
4969
5341
  }
4970
- .a-Nav--tabs {
5342
+ .a-Nav .a-Nav-list--tabs {
4971
5343
  border-bottom: var(--Tabs-borderWidth) solid var(--Tabs-borderColor);
4972
5344
  }
4973
- .a-Nav--tabs .a-Nav-item {
5345
+ .a-Nav .a-Nav-list--tabs .a-Nav-item {
4974
5346
  margin-bottom: calc(var(--Tabs-borderWidth) * -1);
4975
5347
  display: inline-block;
5348
+ position: relative;
4976
5349
  }
4977
- .a-Nav--tabs .a-Nav-item > a {
5350
+ .a-Nav .a-Nav-list--tabs .a-Nav-item > a {
4978
5351
  font-size: var(--Tabs-linkFontSize);
4979
5352
  display: block;
4980
5353
  outline: none;
@@ -4984,124 +5357,185 @@ input[type=button].a-Button--block {
4984
5357
  color: var(--Tabs-color);
4985
5358
  text-decoration: none;
4986
5359
  margin-right: 0.125rem;
4987
- padding: var(--gap-sm) var(--gap-base);
5360
+ padding: var(--gap-sm) var(--gap-xl);
4988
5361
  cursor: pointer;
4989
5362
  }
4990
- .a-Nav--tabs .a-Nav-item:hover > a,
4991
- .a-Nav--tabs .a-Nav-item > a:focus {
5363
+ .a-Nav .a-Nav-list--tabs .a-Nav-item:hover > a,
5364
+ .a-Nav .a-Nav-list--tabs .a-Nav-item > a:focus {
4992
5365
  border-color: var(--Tabs-onHover-borderColor);
4993
5366
  text-decoration: none;
4994
5367
  }
4995
- .a-Nav--tabs .a-Nav-item.disabled > a, .a-Nav--tabs .a-Nav-item.is-disabled > a {
5368
+ .a-Nav .a-Nav-list--tabs .a-Nav-item.disabled > a, .a-Nav .a-Nav-list--tabs .a-Nav-item.is-disabled > a {
4996
5369
  color: var(--Tabs-onDisabled-color);
4997
5370
  background: transparent;
4998
5371
  border-color: transparent;
4999
5372
  pointer-events: none;
5000
5373
  }
5001
- .a-Nav--tabs .a-Nav-item.active > a, .a-Nav--tabs .a-Nav-item.is-active > a {
5374
+ .a-Nav .a-Nav-list--tabs .a-Nav-item.active > a, .a-Nav .a-Nav-list--tabs .a-Nav-item.is-active > a {
5002
5375
  color: var(--Tabs-onActive-color);
5003
5376
  background: var(--Tabs-onActive-bg);
5004
5377
  border-color: var(--Tabs-onActive-borderColor);
5005
5378
  border-bottom-color: var(--Tabs-content-bg);
5006
5379
  }
5007
- .a-Nav--stacked {
5380
+ .a-Nav .a-Nav-list--stacked {
5008
5381
  min-height: 3.125rem;
5009
5382
  }
5010
- .a-Nav--stacked .a-Nav-item {
5383
+ .a-Nav .a-Nav-list--stacked .a-Nav-item, .a-Nav .a-Nav-list--stacked .a-Badge {
5011
5384
  position: relative;
5385
+ display: flex;
5386
+ flex-wrap: wrap;
5387
+ align-items: stretch;
5388
+ width: 100%;
5012
5389
  }
5013
- .a-Nav--stacked .a-Nav-item > a {
5014
- display: block;
5390
+ .a-Nav .a-Nav-list--stacked .a-Nav-item .a-Nav-itemDrager, .a-Nav .a-Nav-list--stacked .a-Badge .a-Nav-itemDrager {
5391
+ cursor: move;
5392
+ position: absolute;
5393
+ left: 0;
5394
+ top: 0.6875rem;
5395
+ display: none;
5396
+ }
5397
+ .a-Nav .a-Nav-list--stacked .a-Nav-item .a-Nav-itemDrager > .icon, .a-Nav .a-Nav-list--stacked .a-Nav-item .a-Nav-itemDrager > .a-Badge > .icon, .a-Nav .a-Nav-list--stacked .a-Badge .a-Nav-itemDrager > .icon, .a-Nav .a-Nav-list--stacked .a-Badge .a-Nav-itemDrager > .a-Badge > .icon {
5398
+ color: var(--icon-color);
5399
+ }
5400
+ .a-Nav .a-Nav-list--stacked .a-Nav-item .a-Nav-itemDrager > .icon:hover, .a-Nav .a-Nav-list--stacked .a-Nav-item .a-Nav-itemDrager > .a-Badge > .icon:hover, .a-Nav .a-Nav-list--stacked .a-Badge .a-Nav-itemDrager > .icon:hover, .a-Nav .a-Nav-list--stacked .a-Badge .a-Nav-itemDrager > .a-Badge > .icon:hover {
5401
+ color: var(--icon-onHover-color);
5402
+ }
5403
+ .a-Nav .a-Nav-list--stacked .a-Nav-item .a-Nav-itemDrager svg, .a-Nav .a-Nav-list--stacked .a-Badge .a-Nav-itemDrager svg {
5404
+ width: 1rem;
5405
+ height: 1rem;
5406
+ }
5407
+ .a-Nav .a-Nav-list--stacked .a-Nav-item > .a-Nav-item-badgeText, .a-Nav .a-Nav-list--stacked .a-Badge > .a-Nav-item-badgeText {
5408
+ position: absolute;
5409
+ top: 0;
5410
+ bottom: 0;
5411
+ width: 2.1875rem;
5412
+ overflow: hidden;
5413
+ }
5414
+ .a-Nav .a-Nav-list--stacked .a-Nav-item > .a-Nav-item-badgeText > span, .a-Nav .a-Nav-list--stacked .a-Badge > .a-Nav-item-badgeText > span {
5415
+ position: absolute;
5416
+ top: 0.125rem;
5417
+ left: -0.8125rem;
5418
+ transform: rotate(-45deg);
5419
+ width: 3.125rem;
5420
+ font-size: 12px;
5421
+ text-align: center;
5422
+ color: var(--white);
5423
+ background: var(--success);
5424
+ }
5425
+ .a-Nav .a-Nav-list--stacked .a-Nav-item > .a-Nav-item-atcions, .a-Nav .a-Nav-list--stacked .a-Badge > .a-Nav-item-atcions {
5426
+ display: flex;
5427
+ align-items: center;
5428
+ }
5429
+ .a-Nav .a-Nav-list--stacked .a-Nav-item > a,
5430
+ .a-Nav .a-Nav-list--stacked .a-Nav-item > .a-Badge > a, .a-Nav .a-Nav-list--stacked .a-Badge > a,
5431
+ .a-Nav .a-Nav-list--stacked .a-Badge > .a-Badge > a {
5432
+ display: flex;
5433
+ align-items: center;
5015
5434
  outline: none;
5016
5435
  color: var(--Nav-item-color);
5017
5436
  text-decoration: none;
5018
- padding: var(--gap-sm) var(--gap-base);
5437
+ padding: var(--gap-sm) var(--gap-sm);
5019
5438
  cursor: pointer;
5020
5439
  background: var(--Nav-item-bg);
5021
5440
  border-radius: var(--Nav-item-borderRadius);
5022
5441
  text-overflow: ellipsis;
5442
+ flex: 1;
5023
5443
  }
5024
- .a-Nav--stacked .a-Nav-item > a::after {
5025
- border-left: var(--Nav-item-onActive-borderLeft);
5026
- position: absolute;
5027
- left: 0;
5028
- top: 0;
5029
- content: "";
5030
- width: 1px;
5031
- height: 100%;
5032
- transform: scaleY(0.0001);
5033
- transition: transform 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
5034
- }
5035
- .a-Nav--stacked .a-Nav-item.has-sub > a {
5036
- padding-right: calc(var(--gap-base) + var(--gap-sm));
5037
- }
5038
- .a-Nav--stacked .a-Nav-item > a:hover,
5039
- .a-Nav--stacked .a-Nav-item > a:focus {
5444
+ .a-Nav .a-Nav-list--stacked .a-Nav-item > a:hover,
5445
+ .a-Nav .a-Nav-list--stacked .a-Nav-item > a:focus,
5446
+ .a-Nav .a-Nav-list--stacked .a-Nav-item > a:hover + .a-Nav-item-atcions,
5447
+ .a-Nav .a-Nav-list--stacked .a-Nav-item > a:focus + .a-Nav-item-atcions,
5448
+ .a-Nav .a-Nav-list--stacked .a-Nav-item > .a-Badge > a:hover,
5449
+ .a-Nav .a-Nav-list--stacked .a-Nav-item > .a-Badge > a:focus,
5450
+ .a-Nav .a-Nav-list--stacked .a-Nav-item > .a-Badge > a:hover + .a-Nav-item-atcions,
5451
+ .a-Nav .a-Nav-list--stacked .a-Nav-item > .a-Badge > a:focus + .a-Nav-item-atcions, .a-Nav .a-Nav-list--stacked .a-Badge > a:hover,
5452
+ .a-Nav .a-Nav-list--stacked .a-Badge > a:focus,
5453
+ .a-Nav .a-Nav-list--stacked .a-Badge > a:hover + .a-Nav-item-atcions,
5454
+ .a-Nav .a-Nav-list--stacked .a-Badge > a:focus + .a-Nav-item-atcions,
5455
+ .a-Nav .a-Nav-list--stacked .a-Badge > .a-Badge > a:hover,
5456
+ .a-Nav .a-Nav-list--stacked .a-Badge > .a-Badge > a:focus,
5457
+ .a-Nav .a-Nav-list--stacked .a-Badge > .a-Badge > a:hover + .a-Nav-item-atcions,
5458
+ .a-Nav .a-Nav-list--stacked .a-Badge > .a-Badge > a:focus + .a-Nav-item-atcions {
5040
5459
  border-color: var(--Nav-item-onHover-color);
5041
5460
  text-decoration: none;
5042
5461
  background: var(--Nav-item-onHover-bg);
5462
+ z-index: 1;
5043
5463
  }
5044
- .a-Nav--stacked .a-Nav-item.disabled > a, .a-Nav--stacked .a-Nav-item.is-disabled > a {
5464
+ .a-Nav .a-Nav-list--stacked .a-Nav-item > a:hover > .a-Nav-itemDrager,
5465
+ .a-Nav .a-Nav-list--stacked .a-Nav-item > a:focus > .a-Nav-itemDrager,
5466
+ .a-Nav .a-Nav-list--stacked .a-Nav-item > .a-Badge > a:hover > .a-Nav-itemDrager,
5467
+ .a-Nav .a-Nav-list--stacked .a-Nav-item > .a-Badge > a:focus > .a-Nav-itemDrager, .a-Nav .a-Nav-list--stacked .a-Badge > a:hover > .a-Nav-itemDrager,
5468
+ .a-Nav .a-Nav-list--stacked .a-Badge > a:focus > .a-Nav-itemDrager,
5469
+ .a-Nav .a-Nav-list--stacked .a-Badge > .a-Badge > a:hover > .a-Nav-itemDrager,
5470
+ .a-Nav .a-Nav-list--stacked .a-Badge > .a-Badge > a:focus > .a-Nav-itemDrager {
5471
+ display: block;
5472
+ }
5473
+ .a-Nav .a-Nav-list--stacked .a-Nav-item.disabled > a, .a-Nav .a-Nav-list--stacked .a-Nav-item.is-disabled > a, .a-Nav .a-Nav-list--stacked .a-Nav-item.disabled > .a-Badge > a, .a-Nav .a-Nav-list--stacked .a-Nav-item.is-disabled > .a-Badge > a, .a-Nav .a-Nav-list--stacked .a-Badge.disabled > a, .a-Nav .a-Nav-list--stacked .a-Badge.is-disabled > a, .a-Nav .a-Nav-list--stacked .a-Badge.disabled > .a-Badge > a, .a-Nav .a-Nav-list--stacked .a-Badge.is-disabled > .a-Badge > a {
5045
5474
  color: var(--Nav-item-onDisabled-color);
5046
5475
  background: transparent;
5047
5476
  pointer-events: none;
5048
5477
  }
5049
- .a-Nav--stacked .a-Nav-item.active > a, .a-Nav--stacked .a-Nav-item.is-active > a {
5478
+ .a-Nav .a-Nav-list--stacked .a-Nav-item.active, .a-Nav .a-Nav-list--stacked .a-Nav-item.is-active, .a-Nav .a-Nav-list--stacked .a-Badge.active, .a-Nav .a-Nav-list--stacked .a-Badge.is-active {
5479
+ background: var(--Nav-item-onActive-bg) !important;
5480
+ }
5481
+ .a-Nav .a-Nav-list--stacked .a-Nav-item.active > a, .a-Nav .a-Nav-list--stacked .a-Nav-item.is-active > .a-Nav-item-atcions, .a-Nav .a-Nav-list--stacked .a-Nav-item.is-active > a, .a-Nav .a-Nav-list--stacked .a-Nav-item.active > .a-Badge > a, .a-Nav .a-Nav-list--stacked .a-Nav-item.is-active > .a-Badge > .a-Nav-item-atcions, .a-Nav .a-Nav-list--stacked .a-Nav-item.is-active > .a-Badge > a, .a-Nav .a-Nav-list--stacked .a-Badge.active > a, .a-Nav .a-Nav-list--stacked .a-Badge.is-active > .a-Nav-item-atcions, .a-Nav .a-Nav-list--stacked .a-Badge.is-active > a, .a-Nav .a-Nav-list--stacked .a-Badge.active > .a-Badge > a, .a-Nav .a-Nav-list--stacked .a-Badge.is-active > .a-Badge > .a-Nav-item-atcions, .a-Nav .a-Nav-list--stacked .a-Badge.is-active > .a-Badge > a {
5050
5482
  color: var(--Nav-item-onActive-color);
5051
- background: var(--Nav-item-onActive-bg);
5052
- padding-left: 0.75rem;
5053
5483
  position: relative;
5054
5484
  }
5055
- .a-Nav--stacked .a-Nav-item.active > a::after, .a-Nav--stacked .a-Nav-item.is-active > a::after {
5485
+ .a-Nav .a-Nav-list--stacked .a-Nav-item.active > a::after, .a-Nav .a-Nav-list--stacked .a-Nav-item.is-active > .a-Nav-item-atcions::after, .a-Nav .a-Nav-list--stacked .a-Nav-item.is-active > a::after, .a-Nav .a-Nav-list--stacked .a-Nav-item.active > .a-Badge > a::after, .a-Nav .a-Nav-list--stacked .a-Nav-item.is-active > .a-Badge > .a-Nav-item-atcions::after, .a-Nav .a-Nav-list--stacked .a-Nav-item.is-active > .a-Badge > a::after, .a-Nav .a-Nav-list--stacked .a-Badge.active > a::after, .a-Nav .a-Nav-list--stacked .a-Badge.is-active > .a-Nav-item-atcions::after, .a-Nav .a-Nav-list--stacked .a-Badge.is-active > a::after, .a-Nav .a-Nav-list--stacked .a-Badge.active > .a-Badge > a::after, .a-Nav .a-Nav-list--stacked .a-Badge.is-active > .a-Badge > .a-Nav-item-atcions::after, .a-Nav .a-Nav-list--stacked .a-Badge.is-active > .a-Badge > a::after {
5056
5486
  transform: scaleY(1);
5057
5487
  }
5058
- .a-Nav--stacked .a-Nav-item.is-unfolded > .a-Nav-itemToggler {
5488
+ .a-Nav .a-Nav-list--stacked .a-Nav-item.is-unfolded > a .a-Nav-itemToggler, .a-Nav .a-Nav-list--stacked .a-Nav-item.is-unfolded > .a-Badge > a .a-Nav-itemToggler, .a-Nav .a-Nav-list--stacked .a-Badge.is-unfolded > a .a-Nav-itemToggler, .a-Nav .a-Nav-list--stacked .a-Badge.is-unfolded > .a-Badge > a .a-Nav-itemToggler {
5059
5489
  transform: rotate(180deg) scale(0.8);
5060
5490
  }
5061
- .a-Nav--stacked .a-Nav-item.is-unfolded > .a-Nav-subItems {
5491
+ .a-Nav .a-Nav-list--stacked .a-Nav-item.is-unfolded > .a-Nav-subItems, .a-Nav .a-Nav-list--stacked .a-Nav-item.is-unfolded > .a-Badge > .a-Nav-subItems, .a-Nav .a-Nav-list--stacked .a-Badge.is-unfolded > .a-Nav-subItems, .a-Nav .a-Nav-list--stacked .a-Badge.is-unfolded > .a-Badge > .a-Nav-subItems {
5062
5492
  display: block;
5063
5493
  }
5064
- .a-Nav--stacked .a-Nav-item .a-Nav-spinner {
5494
+ .a-Nav .a-Nav-list--stacked .a-Nav-item .a-Nav-spinner, .a-Nav .a-Nav-list--stacked .a-Badge .a-Nav-spinner {
5065
5495
  position: absolute;
5066
5496
  right: 0.625rem;
5067
5497
  top: 0.5rem;
5068
5498
  }
5069
- .a-Nav--stacked .a-Nav-item .a-Nav-itemToggler {
5070
- position: absolute;
5071
- right: 0;
5072
- top: 0.1875rem;
5073
- width: 1.875rem;
5074
- height: 1.875rem;
5499
+ .a-Nav .a-Nav-list--stacked .a-Nav-item .a-Nav-itemToggler, .a-Nav .a-Nav-list--stacked .a-Badge .a-Nav-itemToggler {
5500
+ float: left;
5501
+ margin-right: 0.625rem;
5502
+ height: 1.5rem;
5075
5503
  text-align: center;
5076
- line-height: 1.875rem;
5504
+ line-height: 1.5rem;
5077
5505
  vertical-align: middle;
5078
5506
  cursor: pointer;
5079
5507
  transform: scale(0.8);
5080
5508
  transition: transform var(--animation-duration);
5081
5509
  }
5082
- .a-Nav--stacked .a-Nav-item .a-Nav-itemToggler > svg {
5510
+ .a-Nav .a-Nav-list--stacked .a-Nav-item .a-Nav-itemToggler > svg, .a-Nav .a-Nav-list--stacked .a-Badge .a-Nav-itemToggler > svg {
5083
5511
  width: 10px;
5084
5512
  height: 10px;
5085
5513
  top: 0;
5086
5514
  }
5087
- .a-Nav--stacked .a-Nav-item .a-Nav-subItems {
5515
+ .a-Nav .a-Nav-list--stacked .a-Nav-item .a-Nav-subItems, .a-Nav .a-Nav-list--stacked .a-Badge .a-Nav-subItems {
5088
5516
  display: none;
5089
5517
  padding-left: 0;
5090
5518
  list-style: none;
5519
+ width: 100%;
5091
5520
  }
5092
- .a-Nav--stacked .a-Nav-item .a-Nav-item {
5521
+ .a-Nav .a-Nav-list--stacked .a-Nav-item .a-Nav-item, .a-Nav .a-Nav-list--stacked .a-Badge .a-Nav-item {
5093
5522
  font-size: var(--Nav-subItem-fontSize);
5094
5523
  }
5524
+ .a-Nav .a-Nav-dropIndicator {
5525
+ position: absolute;
5526
+ background: var(--Nav-item-onActive-color);
5527
+ height: 2px;
5528
+ }
5095
5529
 
5096
5530
  .a-Page {
5097
5531
  width: 100%;
5098
5532
  height: 100%;
5533
+ background: var(--Page-main-bg);
5099
5534
  }
5100
5535
  .a-Page-header {
5101
5536
  padding: var(--Page-header-paddingY) var(--Page-header-paddingX);
5102
5537
  }
5103
5538
  .a-Page-main {
5104
- background: var(--Page-main-bg);
5105
5539
  height: 100%;
5106
5540
  display: flex;
5107
5541
  flex-direction: column;
@@ -5114,10 +5548,8 @@ input[type=button].a-Button--block {
5114
5548
  }
5115
5549
  .a-Page-main > .a-Page-header {
5116
5550
  border-bottom: var(--borderWidth) solid var(--borderColor);
5117
- background: var(--Page-header-bg);
5118
5551
  }
5119
5552
  .a-Page-headerRow {
5120
- background: var(--Page-header-bg);
5121
5553
  border-bottom: var(--borderWidth) solid var(--borderColor);
5122
5554
  display: flex;
5123
5555
  flex-direction: row;
@@ -5157,10 +5589,6 @@ input[type=button].a-Button--block {
5157
5589
  margin-left: var(--gap-xs);
5158
5590
  }
5159
5591
 
5160
- .a-Page-aside {
5161
- background: var(--Page-aside-bg);
5162
- }
5163
-
5164
5592
  @media (min-width: 768px) {
5165
5593
  .a-Page-aside {
5166
5594
  min-width: var(--Page-aside-width);
@@ -5840,7 +6268,7 @@ input[type=button].a-Button--block {
5840
6268
  height: var(--DropDown-menu-height);
5841
6269
  vertical-align: middle;
5842
6270
  user-select: none;
5843
- color: var(--link-color);
6271
+ color: var(--DropDown-menuItem-color);
5844
6272
  text-decoration: var(--link-decoration);
5845
6273
  }
5846
6274
  .a-DropDown-menuItem:hover, .a-DropDown-menu > li:hover {
@@ -5848,6 +6276,7 @@ input[type=button].a-Button--block {
5848
6276
  color: var(--DropDown-menuItem-onHover-color);
5849
6277
  }
5850
6278
  .a-DropDown-menuItem.is-active, .a-DropDown-menu > li.is-active {
6279
+ background: var(--DropDown-menuItem-onHover-bg);
5851
6280
  color: var(--DropDown-menuItem-onActive-color);
5852
6281
  }
5853
6282
  .a-DropDown-menuItem:not(.is-disabled), .a-DropDown-menuItem:not(.disabled), .a-DropDown-menu > li:not(.is-disabled), .a-DropDown-menu > li:not(.disabled) {
@@ -5885,22 +6314,34 @@ input[type=button].a-Button--block {
5885
6314
  }
5886
6315
 
5887
6316
  .a-Collapse {
5888
- border: none;
6317
+ border: var(--Collapse-border);
5889
6318
  padding: 0;
5890
6319
  margin-bottom: var(--Form-item-gap);
5891
6320
  }
5892
6321
  .a-Collapse-header {
5893
- font-size: var(--fontSizeMd);
5894
- font-weight: var(--fontWeightNormal);
6322
+ font-size: var(--Collapse-header-fontSize);
6323
+ font-weight: var(--Collapse-header-fontWeight);
5895
6324
  color: var(--text--loud-color);
5896
- padding: var(--gap-xs) 0;
5897
- border-bottom: var(--borderWidth) solid var(--borderColorLight);
6325
+ padding: var(--Collapse-header-padding);
6326
+ margin: 0;
6327
+ border-bottom: var(--borderWidth) solid var(--Collapse-border-color);
6328
+ background: var(--Collapse-header-bg);
6329
+ }
6330
+ .a-Collapse-header-wrapper {
6331
+ display: inline-flex;
6332
+ flex-direction: var(--Collapse-header-wrapper-direction);
6333
+ }
6334
+ .a-Collapse-header-tpl {
6335
+ margin-right: 0.5rem;
6336
+ }
6337
+ .a-Collapse-header:hover {
6338
+ background: var(--Collapse-header-onHover-bg);
5898
6339
  }
5899
6340
  .a-Collapse-arrow {
5900
6341
  display: inline-block;
5901
6342
  width: 1rem;
5902
6343
  text-align: center;
5903
- margin-left: var(--gap-xs);
6344
+ margin-right: 0.5rem;
5904
6345
  cursor: pointer;
5905
6346
  }
5906
6347
  .a-Collapse-arrow:before {
@@ -5916,10 +6357,16 @@ input[type=button].a-Button--block {
5916
6357
  transform: rotate(135deg);
5917
6358
  transform-origin: 50% 50%;
5918
6359
  }
6360
+ .a-Collapse-TplField {
6361
+ display: inline-block;
6362
+ }
5919
6363
  .a-Collapse.is-collapsed .a-Collapse-arrow:before {
5920
6364
  transform: rotate(45deg);
5921
6365
  transform-origin: 0% 50%;
5922
6366
  }
6367
+ .a-Collapse.is-collapsed .a-Collapse-header {
6368
+ border-bottom: var(--Collapse-header-collapsed-border);
6369
+ }
5923
6370
  .a-Collapse--collapsable .a-Collapse-header {
5924
6371
  cursor: pointer;
5925
6372
  user-select: none;
@@ -5929,6 +6376,11 @@ input[type=button].a-Button--block {
5929
6376
  color: var(--link-color);
5930
6377
  border-left: none;
5931
6378
  font-size: var(--fontSizeBase);
6379
+ border-top: var(--Collapse-header-collapsed-borderTop);
6380
+ border-bottom: var(--Collapse-header-collapsed-borderBottom);
6381
+ }
6382
+ .a-Collapse--title-bottom.is-collapsed .a-Collapse-header {
6383
+ border-top: none;
5932
6384
  }
5933
6385
  .a-Collapse--title-bottom .a-Collapse-arrow:before {
5934
6386
  top: 0.125rem;
@@ -5940,13 +6392,19 @@ input[type=button].a-Button--block {
5940
6392
  transform: rotate(135deg);
5941
6393
  transform-origin: 0% 50%;
5942
6394
  }
5943
- .a-Collapse-content {
6395
+ .a-Collapse-contentWrapper {
5944
6396
  transition: height var(--animation-duration) ease;
5945
6397
  }
5946
- .a-Collapse-content.in, .a-Collapse-content.out {
6398
+ .a-Collapse-contentWrapper.in, .a-Collapse-contentWrapper.out {
5947
6399
  height: 0;
5948
6400
  overflow: hidden;
5949
6401
  }
6402
+ .a-Collapse-content {
6403
+ padding: var(--Collapse-content-padding);
6404
+ color: var(--body-color);
6405
+ font-size: var(--Collapse-content-fontSize);
6406
+ font-weight: var(--Collapse-content-fontWeight);
6407
+ }
5950
6408
 
5951
6409
  .a-ColorField {
5952
6410
  display: inline-block;
@@ -6810,6 +7268,17 @@ input[type=button].a-Button--block {
6810
7268
  vertical-align: middle !important;
6811
7269
  text-align: center;
6812
7270
  }
7271
+ .a-Table-searchableForm {
7272
+ background: var(--Table-searchableForm-backgroundColor);
7273
+ border-radius: var(--Table-searchableForm-borderRadius);
7274
+ }
7275
+ .a-Table-searchableForm-footer {
7276
+ padding: var(--Panel-footerPadding);
7277
+ clear: both;
7278
+ }
7279
+ .a-Table-searchableForm-checkbox > div > .a-CheckboxControl {
7280
+ padding-top: 0;
7281
+ }
6813
7282
  .a-Table-header {
6814
7283
  padding: var(--Table-toolbar-marginY) var(--Table-toolbar-marginX);
6815
7284
  }
@@ -6912,6 +7381,9 @@ input[type=button].a-Button--block {
6912
7381
  .a-Table-table--withCombine > tbody > tr > td:not(:last-child) {
6913
7382
  border-right: var(--Table-borderWidth) solid var(--Table-borderColor);
6914
7383
  }
7384
+ .a-Table-table--checkOnItemClick > tbody > tr {
7385
+ cursor: pointer;
7386
+ }
6915
7387
  .a-Table-table > thead > tr > th {
6916
7388
  background: var(--Table-thead-bg);
6917
7389
  padding: var(--TableCell-paddingY) var(--TableCell-paddingX);
@@ -6944,6 +7416,7 @@ input[type=button].a-Button--block {
6944
7416
  border-bottom: var(--Table-borderWidth) solid var(--Table-borderColor);
6945
7417
  }
6946
7418
  .a-Table-table > tbody > tr {
7419
+ position: relative;
6947
7420
  background: transparent;
6948
7421
  }
6949
7422
  .a-Table-table > tbody > tr + tr {
@@ -7844,7 +8317,7 @@ input[type=button].a-Button--block {
7844
8317
  top: var(--Table-borderWidth);
7845
8318
  bottom: 0;
7846
8319
  right: 0;
7847
- padding-left: 3.125rem;
8320
+ padding-left: 5rem;
7848
8321
  padding-right: var(--TableCell-paddingX);
7849
8322
  display: flex;
7850
8323
  align-items: center;
@@ -7937,6 +8410,28 @@ input[type=button].a-Button--block {
7937
8410
  visibility: hidden;
7938
8411
  position: absolute;
7939
8412
  }
8413
+ .a-Table-badge {
8414
+ position: absolute;
8415
+ top: 0;
8416
+ left: 0;
8417
+ }
8418
+ .a-Table--autoFillHeight {
8419
+ margin-bottom: 0;
8420
+ }
8421
+ .a-Table--autoFillHeight > .a-Table-contentWrap > .a-Table-content table {
8422
+ border-top: none;
8423
+ }
8424
+ .a-Table--autoFillHeight > .a-Table-contentWrap > .a-Table-content table thead {
8425
+ position: sticky;
8426
+ top: 0;
8427
+ z-index: 1;
8428
+ }
8429
+ .a-Table--autoFillHeight > .a-Table-fixedTop {
8430
+ display: none;
8431
+ }
8432
+ .a-Table--autoFillHeight > .a-Table-footToolbar {
8433
+ margin-bottom: 0;
8434
+ }
7940
8435
 
7941
8436
  .a-InputTable-toolbar {
7942
8437
  display: flex;
@@ -7944,24 +8439,221 @@ input[type=button].a-Button--block {
7944
8439
  flex-wrap: wrap;
7945
8440
  justify-content: space-between;
7946
8441
  }
7947
-
7948
- .a-InputTable-pager {
7949
- margin-left: auto;
8442
+
8443
+ .a-InputTable-pager {
8444
+ margin-left: auto;
8445
+ }
8446
+
8447
+ .a-OperationField {
8448
+ margin: -0.1875rem;
8449
+ }
8450
+ .a-OperationField > .a-Button,
8451
+ .a-OperationField > .a-Button--disabled-wrap > .a-Button {
8452
+ margin: 0.1875rem;
8453
+ }
8454
+ .a-OperationField > .a-Button--disabled-wrap > .a-Button--link {
8455
+ padding: 0;
8456
+ }
8457
+ .a-OperationField > .a-Button--link {
8458
+ padding: 0;
8459
+ margin-right: 0.625rem;
8460
+ }
8461
+
8462
+ .a-ColumnToggler {
8463
+ position: relative;
8464
+ display: inline-block;
8465
+ }
8466
+ .a-ColumnToggler-caret {
8467
+ margin-left: var(--DropDown-caret-marginLeft);
8468
+ display: inline-block;
8469
+ vertical-align: top;
8470
+ transition: transform var(--animation-duration) ease;
8471
+ }
8472
+ .a-ColumnToggler-caret > svg {
8473
+ width: 0.625rem;
8474
+ height: 0.625rem;
8475
+ top: 0.125em;
8476
+ }
8477
+ .a-ColumnToggler.is-opened .a-ColumnToggler-caret {
8478
+ transform: rotate(180deg);
8479
+ }
8480
+ .a-ColumnToggler.is-actived > .a-Button {
8481
+ color: var(--link-color);
8482
+ }
8483
+ .a-ColumnToggler--block {
8484
+ display: block;
8485
+ }
8486
+ .a-ColumnToggler--block .a-Button {
8487
+ display: block;
8488
+ }
8489
+ .a-ColumnToggler-menu {
8490
+ position: absolute;
8491
+ z-index: 1000;
8492
+ top: 100%;
8493
+ left: 0;
8494
+ margin: 0.0625rem 0 0;
8495
+ background: var(--DropDown-menu-bg);
8496
+ list-style: none;
8497
+ padding: var(--DropDown-menu-paddingY) var(--DropDown-menu-paddingX);
8498
+ border: var(--DropDown-menu-borderWidth) solid var(--DropDown-menu-borderColor);
8499
+ border-radius: var(--DropDown-menu-borderRadius);
8500
+ box-shadow: var(--DropDown-menu-boxShadow);
8501
+ min-width: var(--DropDown-menu-minWidth);
8502
+ text-align: left;
8503
+ }
8504
+ .a-ColumnToggler--alignRight .a-ColumnToggler-menu {
8505
+ left: auto;
8506
+ right: 0;
8507
+ }
8508
+ .a-ColumnToggler-menuItem, .a-ColumnToggler-menu > li {
8509
+ padding: var(--DropDown-menuItem-paddingY) var(--DropDown-menuItem-paddingX);
8510
+ white-space: nowrap;
8511
+ box-sizing: border-box;
8512
+ height: var(--DropDown-menu-height);
8513
+ vertical-align: middle;
8514
+ user-select: none;
8515
+ color: var(--link-color);
8516
+ text-decoration: var(--link-decoration);
8517
+ }
8518
+ .a-ColumnToggler-menuItem:hover, .a-ColumnToggler-menu > li:hover {
8519
+ background: var(--DropDown-menuItem-onHover-bg);
8520
+ color: var(--DropDown-menuItem-onHover-color);
8521
+ }
8522
+ .a-ColumnToggler-menuItem.is-active, .a-ColumnToggler-menu > li.is-active {
8523
+ color: var(--DropDown-menuItem-onActive-color);
8524
+ }
8525
+ .a-ColumnToggler-menuItem:not(.is-disabled), .a-ColumnToggler-menuItem:not(.disabled), .a-ColumnToggler-menu > li:not(.is-disabled), .a-ColumnToggler-menu > li:not(.disabled) {
8526
+ cursor: pointer;
8527
+ }
8528
+ .a-ColumnToggler-menuItem.is-disabled, .a-ColumnToggler-menu > li.is-disabled {
8529
+ cursor: not-allowed;
8530
+ color: var(--DropDown-menuItem-onDisabled-color);
8531
+ filter: grayscale(80%);
8532
+ }
8533
+ .a-ColumnToggler-menuItem.a-DropDown-divider, .a-ColumnToggler-menu > li.a-DropDown-divider {
8534
+ height: 0.0625rem;
8535
+ margin: 0.5625rem 0;
8536
+ overflow: hidden;
8537
+ background: var(--DropDown-menu-borderColor);
8538
+ padding: 0;
8539
+ }
8540
+ .a-ColumnToggler-menu > li a {
8541
+ color: inherit;
8542
+ display: block;
8543
+ text-decoration: none;
8544
+ }
8545
+ .a-ColumnToggler-popover {
8546
+ border: none;
8547
+ box-shadow: none;
8548
+ }
8549
+ .a-ColumnToggler > .a-Button {
8550
+ min-width: unset;
8551
+ }
8552
+ .a-ColumnToggler-modal {
8553
+ display: flex;
8554
+ flex-flow: column nowrap;
8555
+ justify-content: space-between;
8556
+ align-items: center;
8557
+ width: 25rem;
8558
+ padding: var(--ColumnToggler-lineHeight);
8559
+ margin-top: calc(50vh - 100px);
8560
+ border-radius: var(--ColumnToggler-borderRadius);
8561
+ background: var(--ColumnToggler-backgroundColor);
8562
+ box-shadow: 0 4px 5px 0 rgba(21, 26, 38, 0.06), 0 1px 10px 0 rgba(21, 26, 38, 0.05), 0 2px 4px -1px rgba(21, 26, 38, 0.04);
8563
+ }
8564
+ .a-ColumnToggler-modal-header {
8565
+ width: 100%;
8566
+ display: flex;
8567
+ flex-flow: row nowrap;
8568
+ justify-content: space-between;
8569
+ align-items: center;
8570
+ }
8571
+ .a-ColumnToggler-modal-header a,
8572
+ .a-ColumnToggler-modal-header span {
8573
+ display: inline-block;
8574
+ }
8575
+ .a-ColumnToggler-modal-header .a-ColumnToggler-modal-title {
8576
+ opacity: 0.95;
8577
+ font-size: var(--fontSizeMd);
8578
+ color: var(--ColumnToggler-title-fontColor);
8579
+ line-height: var(--ColumnToggler-lineHeight);
8580
+ font-weight: bold;
8581
+ }
8582
+ .a-ColumnToggler-modal-content {
8583
+ padding: 0;
8584
+ width: 100%;
8585
+ list-style: none;
8586
+ margin: 0.5rem 0;
8587
+ }
8588
+ .a-ColumnToggler-modal-content .a-ColumnToggler-menuItem {
8589
+ color: var(--ColumnToggler-title-fontColor);
8590
+ background: var(--ColumnToggler-item-backgroundColor);
8591
+ border-radius: 0.125rem;
8592
+ font-size: var(--fontSizeSm);
8593
+ padding: 0.25rem 0.5rem;
8594
+ height: var(--ColumnToggler-lineHeight);
8595
+ width: calc((100% - 24px) / 3);
8596
+ float: left;
8597
+ margin: 0.25rem;
8598
+ text-overflow: ellipsis;
8599
+ white-space: nowrap;
8600
+ overflow: hidden;
8601
+ }
8602
+ .a-ColumnToggler-modal-content .a-ColumnToggler-menuItem:hover {
8603
+ background: var(--ColumnToggler-item-backgroundColor-onHover);
8604
+ }
8605
+ .a-ColumnToggler-modal-content .a-ColumnToggler-menuItem--dragging {
8606
+ border: 1px solid var(--link-color);
8607
+ }
8608
+ .a-ColumnToggler-modal-content .a-ColumnToggler-menuItem label > i {
8609
+ height: var(--fontSizeLg);
8610
+ width: var(--fontSizeLg);
8611
+ vertical-align: top;
8612
+ }
8613
+ .a-ColumnToggler-modal-content .a-ColumnToggler-menuItem-dragBar {
8614
+ margin-left: 0;
8615
+ margin-right: var(--gap-xs);
8616
+ cursor: move;
8617
+ color: #d8d8d8;
8618
+ }
8619
+ .a-ColumnToggler-modal-footer {
8620
+ width: 100%;
8621
+ display: flex;
8622
+ flex-flow: row nowrap;
8623
+ justify-content: space-between;
8624
+ align-items: center;
8625
+ }
8626
+ .a-ColumnToggler-modal-footer .a-ColumnToggler-modeSelect {
8627
+ color: var(--ColumnToggler-fontColor);
8628
+ font-size: var(--fontSizeSm);
8629
+ }
8630
+ .a-ColumnToggler-modal-footer .a-ColumnToggler-modeSelect.is-actived {
8631
+ color: var(--link-color);
8632
+ }
8633
+ .a-ColumnToggler-modal-footer > div {
8634
+ display: flex;
8635
+ flex-flow: row nowrap;
8636
+ justify-content: space-between;
8637
+ align-items: center;
8638
+ }
8639
+ .a-ColumnToggler-modal-footer > div:first-child {
8640
+ justify-content: flex-start;
7950
8641
  }
7951
-
7952
- .a-OperationField {
7953
- margin: -0.1875rem;
8642
+ .a-ColumnToggler-modal-footer > div:first-child a {
8643
+ display: inline-block;
7954
8644
  }
7955
- .a-OperationField > .a-Button,
7956
- .a-OperationField > .a-Button--disabled-wrap > .a-Button {
7957
- margin: 0.1875rem;
8645
+ .a-ColumnToggler-modal-footer > div:last-child {
8646
+ justify-content: flex-end;
7958
8647
  }
7959
- .a-OperationField > .a-Button--disabled-wrap > .a-Button--link {
7960
- padding: 0;
8648
+ .a-ColumnToggler-modal-footer > div:last-child button {
8649
+ width: 72px;
7961
8650
  }
7962
- .a-OperationField > .a-Button--link {
7963
- padding: 0;
7964
- margin-right: 0.625rem;
8651
+
8652
+ .a-ColumnToggler-tooltip {
8653
+ border: none;
8654
+ }
8655
+ .a-ColumnToggler-tooltip .a-Tooltip-arrow::before {
8656
+ border-top-color: transparent;
7965
8657
  }
7966
8658
 
7967
8659
  .a-List {
@@ -8378,23 +9070,14 @@ input[type=button].a-Button--block {
8378
9070
  .a-Card-title + .a-Card-subTitle {
8379
9071
  margin-top: var(--gap-xs);
8380
9072
  }
8381
- .a-Card-checkBtn {
8382
- position: absolute;
8383
- top: 0;
8384
- right: 0;
8385
- margin: var(--gap-sm);
8386
- z-index: 1;
8387
- }
8388
- .a-Card-checkBtn .a-Checkbox {
8389
- margin-right: 0;
8390
- }
8391
9073
  .a-Card-dragBtn {
8392
9074
  cursor: pointer;
8393
9075
  float: right;
8394
9076
  margin: var(--gap-sm);
8395
9077
  }
8396
9078
  .a-Card-heading {
8397
- overflow: hidden;
9079
+ display: flex;
9080
+ flex-direction: row;
8398
9081
  padding: var(--gap-sm) var(--gap-base);
8399
9082
  flex: 1 0 auto;
8400
9083
  }
@@ -8422,11 +9105,15 @@ input[type=button].a-Button--block {
8422
9105
  }
8423
9106
  .a-Card-meta {
8424
9107
  display: block;
9108
+ flex-grow: 1;
8425
9109
  height: 100%;
8426
- overflow: hidden;
8427
9110
  position: relative;
8428
9111
  margin-right: var(--gap-md);
8429
9112
  }
9113
+ .a-Card-toolbar {
9114
+ margin-right: calc(-1 * var(--gap-base));
9115
+ text-align: right;
9116
+ }
8430
9117
  .a-Card-highlight {
8431
9118
  background: var(--success);
8432
9119
  width: 0.5rem;
@@ -8643,6 +9330,7 @@ input[type=button].a-Button--block {
8643
9330
  height: 10px;
8644
9331
  background: #ebebeb;
8645
9332
  overflow: hidden;
9333
+ border-radius: var(--Progress-borderRadius);
8646
9334
  }
8647
9335
  .a-Progress-bar {
8648
9336
  float: left;
@@ -8654,6 +9342,7 @@ input[type=button].a-Button--block {
8654
9342
  text-align: center;
8655
9343
  background: var(--primary);
8656
9344
  transition: width var(--animation-duration) ease;
9345
+ border-radius: var(--Progress-borderRadius);
8657
9346
  }
8658
9347
  .a-Progress-bar--stripe {
8659
9348
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
@@ -8846,7 +9535,7 @@ input[type=button].a-Button--block {
8846
9535
  }
8847
9536
  .a-StatusField-label {
8848
9537
  font-size: var(--fontSizeSm);
8849
- margin-left: var(--gap-sm);
9538
+ margin-left: var(--gap-xs);
8850
9539
  }
8851
9540
  @keyframes animation-rolling_red {
8852
9541
  0% {
@@ -9260,7 +9949,7 @@ input[type=button].a-Button--block {
9260
9949
  display: none;
9261
9950
  }
9262
9951
  .a-ImageGallery-item.is-active {
9263
- border: 1px solid #108cee;
9952
+ border: 1px solid var(--primary);
9264
9953
  }
9265
9954
  .a-ImageGallery-item.is-active:after {
9266
9955
  display: none;
@@ -9285,6 +9974,7 @@ input[type=button].a-Button--block {
9285
9974
  }
9286
9975
  .a-Image-thumbWrap {
9287
9976
  position: relative;
9977
+ height: 100%;
9288
9978
  }
9289
9979
  .a-Image-image {
9290
9980
  display: block;
@@ -9381,7 +10071,7 @@ input[type=button].a-Button--block {
9381
10071
  color: var(--text--loud-color);
9382
10072
  }
9383
10073
  .a-Image-overlay {
9384
- background: rgba(0, 0, 0, 0.6);
10074
+ background: rgba(8, 14, 26, 0.5);
9385
10075
  position: absolute;
9386
10076
  width: 100%;
9387
10077
  height: 100%;
@@ -9910,7 +10600,7 @@ input[type=button].a-Button--block {
9910
10600
  height: 1px;
9911
10601
  left: 100%;
9912
10602
  width: 9999px;
9913
- padding-right: 10px;
10603
+ padding-right: 0.625rem;
9914
10604
  background-color: var(--Steps-line-bg);
9915
10605
  }
9916
10606
  .a-Steps .a-StepsItem-containerWrapper .a-StepsItem-body .a-StepsItem-title.is-success:after {
@@ -9982,6 +10672,42 @@ input[type=button].a-Button--block {
9982
10672
  border: 1px solid var(--Steps-status-success);
9983
10673
  }
9984
10674
 
10675
+ .a-Portlet {
10676
+ border: var(--Portlet-borderWidth) var(--Portlet-borderStyle) var(--Portlet-borderColor);
10677
+ border-radius: var(--Portlet-borderRadius);
10678
+ padding: var(--gap-base);
10679
+ }
10680
+ .a-Portlet-tab.unactive-select .is-active a:first-child, .a-Portlet-tab.unactive-select .is-active:hover > a:first-child,
10681
+ .a-Portlet-tab.unactive-select .is-active > a:first-child:focus {
10682
+ border: none !important;
10683
+ color: inherit !important;
10684
+ cursor: auto !important;
10685
+ }
10686
+ .a-Portlet-tab.no-divider .a-Tabs-links {
10687
+ border-bottom: none;
10688
+ }
10689
+ .a-Portlet .a-Tabs-pane {
10690
+ padding: unset;
10691
+ }
10692
+ .a-Portlet-toolbar {
10693
+ display: inline-flex;
10694
+ float: right;
10695
+ justify-content: flex-end;
10696
+ }
10697
+ .a-Portlet-toolbar .a-Button {
10698
+ margin-left: calc(var(--gap-xs));
10699
+ }
10700
+ .a-Portlet-header-desc {
10701
+ height: 100%;
10702
+ overflow: hidden;
10703
+ position: relative;
10704
+ margin-left: var(--gap-base);
10705
+ }
10706
+
10707
+ .a-Portlet.no-header .a-Portlet-tab .a-Tabs-links {
10708
+ display: none;
10709
+ }
10710
+
9985
10711
  fieldset.a-Collapse--lg, fieldset.a-Collapse--md, fieldset.a-Collapse--base, fieldset.a-Collapse--sm, fieldset.a-Collapse--xs {
9986
10712
  position: relative;
9987
10713
  }
@@ -10021,11 +10747,13 @@ fieldset.a-Collapse > legend {
10021
10747
  margin: var(--gap-base) 0;
10022
10748
  padding: 0 0 0 14px;
10023
10749
  cursor: pointer;
10024
- border-bottom: 0;
10750
+ border-bottom: none !important;
10751
+ background: transparent;
10025
10752
  display: flex;
10026
10753
  flex-direction: row;
10027
- justify-content: space-between;
10028
- width: 100%;
10754
+ }
10755
+ fieldset.a-Collapse > legend:hover {
10756
+ background: transparent;
10029
10757
  }
10030
10758
  fieldset.a-Collapse--xs {
10031
10759
  padding: 20px 5px 5px 5px;
@@ -10629,6 +11357,13 @@ fieldset.a-Collapse--lg:after {
10629
11357
  .has-error--maxLength .a-TextControl-counter {
10630
11358
  color: var(--danger);
10631
11359
  }
11360
+ .a-TextControl-input:hover {
11361
+ border-color: var(--Form-input-onHover-borderColor);
11362
+ }
11363
+
11364
+ .a-TextControl.is-disabled-input input {
11365
+ color: var(--Form-input-onDisabled-color);
11366
+ }
10632
11367
 
10633
11368
  .a-TextareaControl {
10634
11369
  position: relative;
@@ -10656,10 +11391,16 @@ fieldset.a-Collapse--lg:after {
10656
11391
  .a-TextareaControl > textarea::placeholder {
10657
11392
  color: var(--Form-input-placeholderColor);
10658
11393
  }
11394
+ .a-TextareaControl > textarea:hover {
11395
+ border-color: var(--Form-input-onHover-borderColor);
11396
+ }
10659
11397
  .a-TextareaControl > textarea:focus, .a-TextareaControl.is-focused > textarea {
10660
11398
  border-color: var(--Form-input-onFocused-borderColor);
10661
11399
  box-shadow: var(--Form-input-boxShadow);
10662
11400
  }
11401
+ .a-TextareaControl > textarea:focus:hover, .a-TextareaControl.is-focused > textarea:hover {
11402
+ border-color: var(--Form-input-onFocused-borderColor);
11403
+ }
10663
11404
  .a-TextareaControl.is-disabled > textarea, .a-TextareaControl > textarea[disabled] {
10664
11405
  background: #e5e7eb;
10665
11406
  color: var(--text--muted-color);
@@ -10909,45 +11650,38 @@ fieldset.a-Collapse--lg:after {
10909
11650
  color: #999;
10910
11651
  }
10911
11652
 
10912
- .a-Checkboxes > .a-Checkbox {
11653
+ .a-Selection > .a-Checkbox {
10913
11654
  display: block;
10914
11655
  height: var(--Form-input-height);
10915
11656
  line-height: var(--Form-input-lineHeight);
10916
11657
  font-size: var(--Form-input-fontSize);
10917
11658
  padding: calc( ( var(--Form-input-height) - var(--Form-input-lineHeight) * var(--Form-input-fontSize) ) / 2 ) var(--gap-sm) calc( ( var(--Form-input-height) - var(--Form-input-lineHeight) * var(--Form-input-fontSize) ) / 2 ) calc(var(--gap-sm) + var(--Checkbox-size));
10918
11659
  }
10919
- .a-Checkboxes--inline > .a-Checkbox {
11660
+ .a-Selection--inline > .a-Checkbox {
10920
11661
  display: inline-block;
10921
11662
  }
10922
- .a-Checkboxes-addBtn {
11663
+ .a-Selection-addBtn {
10923
11664
  display: block;
10924
11665
  cursor: pointer;
10925
11666
  }
10926
- .a-Checkboxes-addBtn:hover {
11667
+ .a-Selection-addBtn:hover {
10927
11668
  text-decoration: none;
10928
11669
  }
10929
- .a-Checkboxes-addBtn > svg {
11670
+ .a-Selection-addBtn > svg {
10930
11671
  width: 0.875rem;
10931
11672
  height: 0.875rem;
10932
11673
  margin-right: var(--Checkbox-gap);
10933
11674
  }
10934
11675
 
10935
- .a-ListCheckboxes-group:not(:first-child) > .a-ListCheckboxes-itemLabel,
10936
- .a-ListCheckboxes-group:not(:first-child) > .a-ListRadios-itemLabel,
10937
- .a-ListRadios-group:not(:first-child) > .a-ListCheckboxes-itemLabel,
10938
- .a-ListRadios-group:not(:first-child) > .a-ListRadios-itemLabel {
11676
+ .a-GroupedSelection-group:not(:first-child) > .a-GroupedSelection-itemLabel {
10939
11677
  border-top: 0.0625rem solid var(--ListMenu-divider-color);
10940
11678
  }
10941
- .a-ListCheckboxes-group > .a-ListCheckboxes-itemLabel,
10942
- .a-ListCheckboxes-group > .a-ListRadios-itemLabel,
10943
- .a-ListRadios-group > .a-ListCheckboxes-itemLabel,
10944
- .a-ListRadios-group > .a-ListRadios-itemLabel {
11679
+ .a-GroupedSelection-group > .a-GroupedSelection-itemLabel {
10945
11680
  font-size: var(--fontSizeSm);
10946
11681
  padding: var(--gap-xs) var(--gap-xs);
10947
11682
  color: var(--text--muted-color);
10948
11683
  }
10949
- .a-ListCheckboxes-item,
10950
- .a-ListRadios-item {
11684
+ .a-GroupedSelection-item {
10951
11685
  display: flex;
10952
11686
  height: var(--Form-input-height);
10953
11687
  line-height: var(--Form-input-lineHeight);
@@ -10957,44 +11691,30 @@ fieldset.a-Collapse--lg:after {
10957
11691
  cursor: pointer;
10958
11692
  user-select: none;
10959
11693
  }
10960
- .a-ListCheckboxes-item > .a-Checkbox,
10961
- .a-ListRadios-item > .a-Checkbox {
11694
+ .a-GroupedSelection-item > .a-Checkbox {
10962
11695
  margin-right: 0;
10963
11696
  }
10964
- .a-ListCheckboxes-item.is-active,
10965
- .a-ListRadios-item.is-active {
11697
+ .a-GroupedSelection-item.is-active {
10966
11698
  color: var(--Form-select-menu-onActive-color);
10967
11699
  background: var(--Form-select-menu-onActive-bg);
10968
11700
  }
10969
- .a-ListCheckboxes-item:hover,
10970
- .a-ListRadios-item:hover {
11701
+ .a-GroupedSelection-item:hover {
10971
11702
  background: var(--Tree-item-onHover-bg);
10972
11703
  }
10973
- .a-ListCheckboxes-item.is-disabled,
10974
- .a-ListRadios-item.is-disabled {
11704
+ .a-GroupedSelection-item.is-disabled {
10975
11705
  pointer-events: none;
10976
11706
  color: var(--text--muted-color);
10977
11707
  }
10978
- .a-ListCheckboxes-group > .a-ListCheckboxes-items > .a-ListCheckboxes-item,
10979
- .a-ListCheckboxes-group > .a-ListCheckboxes-items > .a-ListRadios-item,
10980
- .a-ListCheckboxes-group > .a-ListRadios-items > .a-ListCheckboxes-item,
10981
- .a-ListCheckboxes-group > .a-ListRadios-items > .a-ListRadios-item,
10982
- .a-ListRadios-group > .a-ListCheckboxes-items > .a-ListCheckboxes-item,
10983
- .a-ListRadios-group > .a-ListCheckboxes-items > .a-ListRadios-item,
10984
- .a-ListRadios-group > .a-ListRadios-items > .a-ListCheckboxes-item,
10985
- .a-ListRadios-group > .a-ListRadios-items > .a-ListRadios-item {
11708
+ .a-GroupedSelection-group > .a-GroupedSelection-items > .a-GroupedSelection-item {
10986
11709
  padding-left: var(--gap-base);
10987
11710
  }
10988
- .a-ListCheckboxes-itemLabel,
10989
- .a-ListRadios-itemLabel {
11711
+ .a-GroupedSelection-itemLabel {
10990
11712
  flex-grow: 1;
10991
11713
  }
10992
- .a-ListCheckboxes-itemLabel span,
10993
- .a-ListRadios-itemLabel span {
11714
+ .a-GroupedSelection-itemLabel span {
10994
11715
  white-space: nowrap;
10995
11716
  }
10996
- .a-ListCheckboxes-placeholder,
10997
- .a-ListRadios-placeholder {
11717
+ .a-GroupedSelection-placeholder {
10998
11718
  height: var(--Form-input-height);
10999
11719
  line-height: var(--Form-input-lineHeight);
11000
11720
  font-size: var(--Form-input-fontSize);
@@ -11002,45 +11722,46 @@ fieldset.a-Collapse--lg:after {
11002
11722
  color: var(--text--muted-color);
11003
11723
  }
11004
11724
 
11005
- .a-TableCheckboxes .a-Table-content {
11725
+ .a-TableSelection .a-Table-content {
11006
11726
  border-top: var(--Table-borderWidth) solid var(--Table-borderColor);
11007
11727
  }
11008
- .a-TableCheckboxes .a-Table-table > thead > tr > th,
11009
- .a-TableCheckboxes .a-Table-table > tbody > tr > td {
11728
+ .a-TableSelection .a-Table-table > thead > tr > th,
11729
+ .a-TableSelection .a-Table-table > tbody > tr > td {
11010
11730
  font-size: var(--fontSizeSm);
11011
11731
  padding-top: var(--gap-xs);
11012
11732
  padding-bottom: 0.375rem;
11013
11733
  vertical-align: middle;
11014
11734
  }
11015
- .a-TableCheckboxes .a-Table-table > thead > tr > th {
11735
+ .a-TableSelection .a-Table-table > thead > tr > th {
11016
11736
  padding-top: 0.375rem;
11017
11737
  }
11018
- .a-TableCheckboxes .a-Table-table > thead > tr > th:first-child,
11019
- .a-TableCheckboxes .a-Table-table > tbody > tr > td:first-child {
11738
+ .a-TableSelection .a-Table-table > thead > tr > th:first-child,
11739
+ .a-TableSelection .a-Table-table > tbody > tr > td:first-child {
11020
11740
  padding-left: 0.625rem;
11021
11741
  padding-right: 0;
11022
11742
  }
11023
- .a-TableCheckboxes .a-Table-table > thead > tr > th:last-child,
11024
- .a-TableCheckboxes .a-Table-table > tbody > tr > td:last-child {
11743
+ .a-TableSelection .a-Table-table > thead > tr > th:last-child,
11744
+ .a-TableSelection .a-Table-table > tbody > tr > td:last-child {
11025
11745
  padding-right: var(--gap-md);
11026
11746
  }
11027
- .a-TableCheckboxes .a-Table-table > tbody > tr {
11747
+ .a-TableSelection .a-Table-table > tbody > tr {
11028
11748
  cursor: pointer;
11029
11749
  }
11750
+ .a-TableSelection .a-Table-table > tbody > tr.is-active {
11751
+ color: var(--Form-select-menu-onActive-color);
11752
+ background: var(--Form-select-menu-onActive-bg);
11753
+ }
11030
11754
 
11031
- .a-TreeCheckboxes .a-Table-expandBtn,
11032
- .a-TreeRadios .a-Table-expandBtn {
11755
+ .a-TreeSelection .a-Table-expandBtn {
11033
11756
  color: var(--icon-color);
11034
11757
  margin-right: 5px;
11035
11758
  }
11036
- .a-TreeCheckboxes-sublist,
11037
- .a-TreeRadios-sublist {
11759
+ .a-TreeSelection-sublist {
11038
11760
  position: relative;
11039
11761
  margin: 0 0 0 2.1875rem;
11040
11762
  display: none;
11041
11763
  }
11042
- .a-TreeCheckboxes-sublist:before,
11043
- .a-TreeRadios-sublist:before {
11764
+ .a-TreeSelection-sublist:before {
11044
11765
  width: 1px;
11045
11766
  content: "";
11046
11767
  display: block;
@@ -11050,26 +11771,16 @@ fieldset.a-Collapse--lg:after {
11050
11771
  left: -19px;
11051
11772
  border-left: dashed 1px var(--icon-color);
11052
11773
  }
11053
- .a-TreeCheckboxes-item,
11054
- .a-TreeRadios-item {
11774
+ .a-TreeSelection-item {
11055
11775
  position: relative;
11056
11776
  }
11057
- .a-TreeCheckboxes-item.is-expanded > .a-TreeCheckboxes-sublist,
11058
- .a-TreeCheckboxes-item.is-expanded > .a-TreeRadios-sublist,
11059
- .a-TreeRadios-item.is-expanded > .a-TreeCheckboxes-sublist,
11060
- .a-TreeRadios-item.is-expanded > .a-TreeRadios-sublist {
11777
+ .a-TreeSelection-item.is-expanded > .a-TreeSelection-sublist {
11061
11778
  display: block;
11062
11779
  }
11063
- .a-TreeCheckboxes-item:not(:last-child) > .a-TreeCheckboxes-sublist:before,
11064
- .a-TreeCheckboxes-item:not(:last-child) > .a-TreeRadios-sublist:before,
11065
- .a-TreeRadios-item:not(:last-child) > .a-TreeCheckboxes-sublist:before,
11066
- .a-TreeRadios-item:not(:last-child) > .a-TreeRadios-sublist:before {
11780
+ .a-TreeSelection-item:not(:last-child) > .a-TreeSelection-sublist:before {
11067
11781
  bottom: 0;
11068
11782
  }
11069
- .a-TreeCheckboxes-sublist .a-TreeCheckboxes-item:before,
11070
- .a-TreeCheckboxes-sublist .a-TreeRadios-item:before,
11071
- .a-TreeRadios-sublist .a-TreeCheckboxes-item:before,
11072
- .a-TreeRadios-sublist .a-TreeRadios-item:before {
11783
+ .a-TreeSelection-sublist .a-TreeSelection-item:before {
11073
11784
  height: 1px;
11074
11785
  content: "";
11075
11786
  display: block;
@@ -11079,8 +11790,7 @@ fieldset.a-Collapse--lg:after {
11079
11790
  left: -19px;
11080
11791
  border-top: dashed 1px var(--icon-color);
11081
11792
  }
11082
- .a-TreeCheckboxes-itemInner,
11083
- .a-TreeRadios-itemInner {
11793
+ .a-TreeSelection-itemInner {
11084
11794
  display: flex;
11085
11795
  align-items: center;
11086
11796
  height: var(--Form-input-height);
@@ -11092,18 +11802,15 @@ fieldset.a-Collapse--lg:after {
11092
11802
  user-select: none;
11093
11803
  position: relative;
11094
11804
  }
11095
- .a-TreeCheckboxes-itemInner > .a-Checkbox,
11096
- .a-TreeRadios-itemInner > .a-Checkbox {
11805
+ .a-TreeSelection-itemInner > .a-Checkbox {
11097
11806
  margin-right: 0;
11098
11807
  margin-left: var(--gap-sm);
11099
11808
  }
11100
- .a-TreeCheckboxes-itemInner > *,
11101
- .a-TreeRadios-itemInner > * {
11809
+ .a-TreeSelection-itemInner > * {
11102
11810
  position: relative;
11103
11811
  z-index: 2;
11104
11812
  }
11105
- .a-TreeCheckboxes-itemInner:hover:after,
11106
- .a-TreeRadios-itemInner:hover:after {
11813
+ .a-TreeSelection-itemInner:hover:after {
11107
11814
  position: absolute;
11108
11815
  content: "";
11109
11816
  z-index: 1;
@@ -11113,21 +11820,17 @@ fieldset.a-Collapse--lg:after {
11113
11820
  left: -99999px;
11114
11821
  background: var(--Tree-item-onHover-bg);
11115
11822
  }
11116
- .a-TreeCheckboxes-itemInner.is-active,
11117
- .a-TreeRadios-itemInner.is-active {
11823
+ .a-TreeSelection-itemInner.is-active {
11118
11824
  color: var(--Form-select-menu-onActive-color);
11119
11825
  }
11120
- .a-TreeCheckboxes-itemInner.is-disabled,
11121
- .a-TreeRadios-itemInner.is-disabled {
11826
+ .a-TreeSelection-itemInner.is-disabled {
11122
11827
  pointer-events: none;
11123
11828
  color: var(--text--muted-color);
11124
11829
  }
11125
- .a-TreeCheckboxes-itemLabel,
11126
- .a-TreeRadios-itemLabel {
11830
+ .a-TreeSelection-itemLabel {
11127
11831
  flex-grow: 1;
11128
11832
  }
11129
- .a-TreeCheckboxes-placeholder,
11130
- .a-TreeRadios-placeholder {
11833
+ .a-TreeSelection-placeholder {
11131
11834
  height: var(--Form-input-height);
11132
11835
  line-height: var(--Form-input-lineHeight);
11133
11836
  font-size: var(--Form-input-fontSize);
@@ -11135,23 +11838,23 @@ fieldset.a-Collapse--lg:after {
11135
11838
  color: var(--text--muted-color);
11136
11839
  }
11137
11840
 
11138
- .a-ChainedCheckboxes {
11841
+ .a-ChainedSelection {
11139
11842
  display: flex;
11140
11843
  flex-direction: row;
11141
11844
  }
11142
- .a-ChainedCheckboxes-col {
11845
+ .a-ChainedSelection-col {
11143
11846
  flex-grow: 1;
11144
11847
  min-width: 150px;
11145
11848
  }
11146
- .a-ChainedCheckboxes-col:not(:last-child) {
11849
+ .a-ChainedSelection-col:not(:last-child) {
11147
11850
  border-right: 1px solid var(--borderColor);
11148
11851
  }
11149
- .a-ChainedCheckboxes-subTitle {
11852
+ .a-ChainedSelection-subTitle {
11150
11853
  font-size: var(--fontSizeSm);
11151
11854
  padding: var(--gap-xs) var(--gap-xs);
11152
11855
  color: var(--text--muted-color);
11153
11856
  }
11154
- .a-ChainedCheckboxes-item {
11857
+ .a-ChainedSelection-item {
11155
11858
  display: flex;
11156
11859
  height: var(--Form-input-height);
11157
11860
  line-height: var(--Form-input-lineHeight);
@@ -11161,24 +11864,24 @@ fieldset.a-Collapse--lg:after {
11161
11864
  cursor: pointer;
11162
11865
  user-select: none;
11163
11866
  }
11164
- .a-ChainedCheckboxes-item > .a-Checkbox {
11867
+ .a-ChainedSelection-item > .a-Checkbox {
11165
11868
  margin-right: 0;
11166
11869
  }
11167
- .a-ChainedCheckboxes-item.is-active {
11870
+ .a-ChainedSelection-item.is-active {
11168
11871
  color: var(--Form-select-menu-onActive-color);
11169
11872
  background: var(--Form-select-menu-onActive-bg);
11170
11873
  }
11171
- .a-ChainedCheckboxes-item:hover {
11874
+ .a-ChainedSelection-item:hover {
11172
11875
  background: var(--Tree-item-onHover-bg);
11173
11876
  }
11174
- .a-ChainedCheckboxes-item.is-disabled {
11877
+ .a-ChainedSelection-item.is-disabled {
11175
11878
  pointer-events: none;
11176
11879
  color: var(--text--muted-color);
11177
11880
  }
11178
- .a-ChainedCheckboxes-itemLabel {
11881
+ .a-ChainedSelection-itemLabel {
11179
11882
  flex-grow: 1;
11180
11883
  }
11181
- .a-ChainedCheckboxes-placeholder {
11884
+ .a-ChainedSelection-placeholder {
11182
11885
  height: var(--Form-input-height);
11183
11886
  line-height: var(--Form-input-lineHeight);
11184
11887
  font-size: var(--Form-input-fontSize);
@@ -11186,28 +11889,29 @@ fieldset.a-Collapse--lg:after {
11186
11889
  color: var(--text--muted-color);
11187
11890
  }
11188
11891
 
11189
- .a-AssociatedCheckboxes {
11892
+ .a-AssociatedSelection {
11190
11893
  display: flex;
11191
11894
  flex-direction: row;
11192
11895
  }
11193
- .a-AssociatedCheckboxes-left, .a-AssociatedCheckboxes-right {
11896
+ .a-AssociatedSelection-left, .a-AssociatedSelection-right {
11194
11897
  flex-grow: 1;
11195
11898
  width: 0;
11196
- height: 10.9375rem;
11899
+ min-height: 12.5rem;
11900
+ max-height: 25rem;
11197
11901
  overflow: auto;
11198
11902
  }
11199
- .a-AssociatedCheckboxes-left {
11903
+ .a-AssociatedSelection-left {
11200
11904
  border-right: 1px solid var(--borderColor);
11201
11905
  }
11202
- .a-AssociatedCheckboxes-reload {
11906
+ .a-AssociatedSelection-reload {
11203
11907
  text-align: center;
11204
11908
  color: var(--info);
11205
11909
  margin: 20px 0 0;
11206
11910
  }
11207
- .a-AssociatedCheckboxes-reload.is-clickable {
11911
+ .a-AssociatedSelection-reload.is-clickable {
11208
11912
  cursor: pointer;
11209
11913
  }
11210
- .a-AssociatedCheckboxes-box {
11914
+ .a-AssociatedSelection-box {
11211
11915
  line-height: var(--Form-input-lineHeight);
11212
11916
  font-size: var(--fontSizeSm);
11213
11917
  color: var(--text--muted-color);
@@ -11218,7 +11922,7 @@ fieldset.a-Collapse--lg:after {
11218
11922
  justify-content: center;
11219
11923
  height: 100%;
11220
11924
  }
11221
- .a-AssociatedCheckboxes-box > p {
11925
+ .a-AssociatedSelection-box > p {
11222
11926
  text-align: center;
11223
11927
  margin: 10px 0 20px;
11224
11928
  color: var(--text--muted-color);
@@ -11847,6 +12551,7 @@ fieldset.a-Collapse--lg:after {
11847
12551
  color: var(--ListControl-item-color);
11848
12552
  transition: var(--ListControl-item-transition);
11849
12553
  max-width: calc(12.5rem + 2 * var(--ListControl-item-paddingX));
12554
+ border-radius: var(--ListControl-item-borderRadius);
11850
12555
  }
11851
12556
  .a-ListControl-item:not(.is-disabled) {
11852
12557
  cursor: pointer;
@@ -11936,7 +12641,7 @@ fieldset.a-Collapse--lg:after {
11936
12641
  white-space: nowrap;
11937
12642
  color: var(--DatePicker-color);
11938
12643
  background: var(--DatePicker-bg);
11939
- border-radius: var(--DatePicker-borderRadius);
12644
+ border-radius: var(--LocationPicker-borderRadius);
11940
12645
  }
11941
12646
  .a-LocationPicker:not(.is-disabled) {
11942
12647
  cursor: pointer;
@@ -12067,6 +12772,7 @@ fieldset.a-Collapse--lg:after {
12067
12772
  padding: var(--ColorPicker-paddingY) var(--ColorPicker-paddingX);
12068
12773
  background: var(--ColorPicker-bg);
12069
12774
  color: var(--ColorPicker-color);
12775
+ border-radius: var(--borderRadius);
12070
12776
  }
12071
12777
  .a-ColorPicker:not(.is-disabled) {
12072
12778
  cursor: pointer;
@@ -12204,6 +12910,8 @@ fieldset.a-Collapse--lg:after {
12204
12910
  .a-DatePicker-toggler {
12205
12911
  cursor: pointer;
12206
12912
  color: var(--DatePicker-iconColor);
12913
+ display: inline-flex;
12914
+ align-items: center;
12207
12915
  }
12208
12916
  .a-DatePicker-toggler:hover {
12209
12917
  color: var(--DatePicker-onHover-iconColor);
@@ -12456,6 +13164,11 @@ fieldset.a-Collapse--lg:after {
12456
13164
  background: var(--Calendar-btn-onHover-bg);
12457
13165
  border-color: var(--Calendar-btn-onHover-border);
12458
13166
  }
13167
+ .rdtBtn:not(:disabled):not(.is-disabled):hover:active {
13168
+ color: var(--Calendar-btn-onActive-color);
13169
+ background: var(--Calendar-btn-onActive-bg);
13170
+ border-color: var(--Calendar-btn-onActive-border);
13171
+ }
12459
13172
  .rdtBtn:hover:focus {
12460
13173
  box-shadow: var(--Button-boxShadow);
12461
13174
  }
@@ -12474,6 +13187,11 @@ fieldset.a-Collapse--lg:after {
12474
13187
  background: var(--Calendar-btnCancel-onHover-bg);
12475
13188
  border-color: var(--Calendar-btnCancel-onHover-border);
12476
13189
  }
13190
+ .rdtBtnCancel:not(:disabled):not(.is-disabled):hover:active {
13191
+ color: var(--Calendar-btnCancel-onActive-color);
13192
+ background: var(--Calendar-btnCancel-onActive-bg);
13193
+ border-color: var(--Calendar-btnCancel-onActive-border);
13194
+ }
12477
13195
  .rdtBtnCancel:hover:focus {
12478
13196
  box-shadow: var(--Button-boxShadow);
12479
13197
  }
@@ -12641,6 +13359,8 @@ td.rdtQuarter.rdtDisabled > span {
12641
13359
  .a-DateRangePicker-toggler {
12642
13360
  cursor: pointer;
12643
13361
  color: var(--DatePicker-iconColor);
13362
+ display: inline-flex;
13363
+ align-items: center;
12644
13364
  }
12645
13365
  .a-DateRangePicker-toggler:hover {
12646
13366
  color: var(--DatePicker-onHover-iconColor);
@@ -12745,9 +13465,11 @@ td.rdtQuarter.rdtDisabled > span {
12745
13465
  width: 7.5rem;
12746
13466
  height: 7.5rem;
12747
13467
  display: inline-flex;
13468
+ flex-direction: column;
12748
13469
  justify-content: center;
12749
13470
  align-items: center;
12750
13471
  border: var(--borderWidth) solid var(--borderColor);
13472
+ border-radius: var(--ImageControl-addBtn-borderRadius);
12751
13473
  cursor: pointer;
12752
13474
  margin-right: var(--gap-base);
12753
13475
  color: var(--ImageControl-addBtn-color);
@@ -12761,13 +13483,19 @@ td.rdtQuarter.rdtDisabled > span {
12761
13483
  background: var(--ImageControl-addBtn-onHover-bg);
12762
13484
  border-color: var(--ImageControl-addBtn-onHover-border);
12763
13485
  }
13486
+ .a-ImageControl-addBtn:not(:disabled):not(.is-disabled):hover:active {
13487
+ color: var(--ImageControl-addBtn-onActive-color);
13488
+ background: var(--ImageControl-addBtn-onActive-bg);
13489
+ border-color: var(--ImageControl-addBtn-onActive-border);
13490
+ }
12764
13491
  .a-ImageControl-addBtn:hover:focus {
12765
13492
  box-shadow: var(--Button-boxShadow);
12766
13493
  }
12767
13494
  .a-ImageControl-addBtn > svg {
12768
- width: 2.5rem;
12769
- height: 2.5rem;
13495
+ width: 1.5rem;
13496
+ height: 1.5rem;
12770
13497
  top: 0;
13498
+ margin-bottom: 0.5rem;
12771
13499
  }
12772
13500
  .a-ImageControl-addBtn.is-disabled {
12773
13501
  pointer-events: none;
@@ -12801,6 +13529,7 @@ td.rdtQuarter.rdtDisabled > span {
12801
13529
  }
12802
13530
  .a-ImageControl-item {
12803
13531
  border: var(--borderWidth) solid var(--borderColor);
13532
+ border-radius: var(--ImageControl-addBtn-borderRadius);
12804
13533
  vertical-align: top;
12805
13534
  padding: var(--gap-xs);
12806
13535
  display: inline-block;
@@ -12851,6 +13580,7 @@ td.rdtQuarter.rdtDisabled > span {
12851
13580
  }
12852
13581
  .a-ImageControl-progressValue {
12853
13582
  height: 5px;
13583
+ border-radius: var(--ImageControl-progress-borderRadius);
12854
13584
  display: block;
12855
13585
  background: var(--info);
12856
13586
  min-width: 10%;
@@ -12943,12 +13673,12 @@ td.rdtQuarter.rdtDisabled > span {
12943
13673
  outline: none;
12944
13674
  }
12945
13675
  .a-FileControl-selectBtn {
12946
- width: 7.5rem;
13676
+ display: flex;
13677
+ align-items: center;
12947
13678
  }
12948
13679
  .a-FileControl-selectBtn > svg {
12949
- margin-right: 10px;
12950
- width: pxrem(16px);
12951
- height: pxrem(16px);
13680
+ width: 0.875rem;
13681
+ height: 0.875rem;
12952
13682
  }
12953
13683
  .a-FileControl-description {
12954
13684
  margin-left: 10px;
@@ -13041,6 +13771,7 @@ td.rdtQuarter.rdtDisabled > span {
13041
13771
  .a-FileControl-progress > span {
13042
13772
  display: block;
13043
13773
  background: var(--info);
13774
+ border-radius: var(--FileControl-progress-borderRadius);
13044
13775
  height: 100%;
13045
13776
  min-width: 10%;
13046
13777
  transition: ease-out width var(--animation-duration);
@@ -13837,6 +14568,15 @@ td.rdtQuarter.rdtDisabled > span {
13837
14568
  .a-Combo-addBtn > .pull-right {
13838
14569
  margin-left: var(--Combo-addBtn-paddingX);
13839
14570
  }
14571
+ .a-Combo-addBtn .a-Button--loading:first-child:not(:last-child):not(.pull-right),
14572
+ .a-Combo-addBtn > svg.icon:not(:last-child):not(.pull-right),
14573
+ .a-Combo-addBtn > .pull-left {
14574
+ margin-right: var(--Combo-addBtn-paddingX);
14575
+ }
14576
+ .a-Combo-addBtn .a-Button--loading:last-child:not(:first-child):not(.pull-left),
14577
+ .a-Combo-addBtn > .pull-right {
14578
+ margin-left: var(--Combo-addBtn-paddingX);
14579
+ }
13840
14580
  .a-Combo-addBtn img.a-Button-icon {
13841
14581
  height: var(--Button-fontSize);
13842
14582
  vertical-align: middle;
@@ -13846,6 +14586,11 @@ td.rdtQuarter.rdtDisabled > span {
13846
14586
  background: var(--Combo-addBtn-onHover-bg);
13847
14587
  border-color: var(--Combo-addBtn-onHover-border);
13848
14588
  }
14589
+ .a-Combo-addBtn:not(:disabled):not(.is-disabled):hover:active {
14590
+ color: var(--Combo-addBtn-onActive-color);
14591
+ background: var(--Combo-addBtn-onActive-bg);
14592
+ border-color: var(--Combo-addBtn-onActive-border);
14593
+ }
13849
14594
  .a-Combo-addBtn:hover:focus {
13850
14595
  box-shadow: var(--Button-boxShadow);
13851
14596
  }
@@ -14395,6 +15140,15 @@ td.rdtQuarter.rdtDisabled > span {
14395
15140
  .a-TagControl-sugItem > .pull-right {
14396
15141
  margin-left: var(--TagControl-sugBtn-paddingX);
14397
15142
  }
15143
+ .a-TagControl-sugItem .a-Button--loading:first-child:not(:last-child):not(.pull-right),
15144
+ .a-TagControl-sugItem > svg.icon:not(:last-child):not(.pull-right),
15145
+ .a-TagControl-sugItem > .pull-left {
15146
+ margin-right: var(--TagControl-sugBtn-paddingX);
15147
+ }
15148
+ .a-TagControl-sugItem .a-Button--loading:last-child:not(:first-child):not(.pull-left),
15149
+ .a-TagControl-sugItem > .pull-right {
15150
+ margin-left: var(--TagControl-sugBtn-paddingX);
15151
+ }
14398
15152
  .a-TagControl-sugItem img.a-Button-icon {
14399
15153
  height: var(--Button-fontSize);
14400
15154
  vertical-align: middle;
@@ -14404,6 +15158,11 @@ td.rdtQuarter.rdtDisabled > span {
14404
15158
  background: var(--TagControl-sugBtn-onHover-bg);
14405
15159
  border-color: var(--TagControl-sugBtn-onHover-border);
14406
15160
  }
15161
+ .a-TagControl-sugItem:not(:disabled):not(.is-disabled):hover:active {
15162
+ color: var(--TagControl-sugBtn-onActive-color);
15163
+ background: var(--TagControl-sugBtn-onActive-bg);
15164
+ border-color: var(--TagControl-sugBtn-onActive-border);
15165
+ }
14407
15166
  .a-TagControl-sugItem:hover:focus {
14408
15167
  box-shadow: var(--Button-boxShadow);
14409
15168
  }
@@ -14474,6 +15233,7 @@ td.rdtQuarter.rdtDisabled > span {
14474
15233
  font-size: var(--Form-input-fontSize);
14475
15234
  padding: calc( ( 1.875rem - var(--Form-input-lineHeight) * var(--Form-input-fontSize) ) / 2 ) var(--gap-sm);
14476
15235
  flex-direction: row;
15236
+ border-radius: var(--borderRadius) var(--borderRadius) 0 0;
14477
15237
  }
14478
15238
  .a-Transfer-title--light {
14479
15239
  background: transparent;
@@ -14489,17 +15249,18 @@ td.rdtQuarter.rdtDisabled > span {
14489
15249
  border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor);
14490
15250
  display: flex;
14491
15251
  flex-direction: column;
15252
+ border-radius: var(--borderRadius);
14492
15253
  }
14493
- .a-Transfer-select > .a-Transfer-checkboxes, .a-Transfer-result > .a-Transfer-selections {
15254
+ .a-Transfer-select > .a-Transfer-selection, .a-Transfer-result > .a-Transfer-value {
14494
15255
  flex-grow: 1;
14495
15256
  max-height: 100%;
14496
15257
  overflow: auto;
14497
15258
  position: relative;
14498
15259
  }
14499
- .a-Transfer-search + .a-Transfer-checkboxes {
15260
+ .a-Transfer-search + .a-Transfer-selection {
14500
15261
  border-top: 1px solid var(--borderColor);
14501
15262
  }
14502
- .a-Transfer-checkboxes .a-ListCheckboxes-placeholder {
15263
+ .a-Transfer-selection .a-ListSelection-placeholder {
14503
15264
  height: 100%;
14504
15265
  display: flex;
14505
15266
  align-items: center;
@@ -14538,12 +15299,26 @@ td.rdtQuarter.rdtDisabled > span {
14538
15299
  pointer-events: none;
14539
15300
  color: var(--text--muted-color);
14540
15301
  }
14541
- .a-Transfer-tabs {
15302
+
15303
+ .a-TabsTransfer .a-Transfer-title {
15304
+ height: 40px;
15305
+ }
15306
+ .a-TabsTransfer-placeholder {
15307
+ height: var(--Form-input-height);
15308
+ line-height: var(--Form-input-lineHeight);
15309
+ font-size: var(--Form-input-fontSize);
15310
+ padding: calc( ( var(--Form-input-height) - var(--Form-input-lineHeight) * var(--Form-input-fontSize) ) / 2 ) var(--gap-sm);
15311
+ color: var(--text--muted-color);
15312
+ }
15313
+ .a-TabsTransfer-tab {
15314
+ padding: 0;
15315
+ }
15316
+ .a-TabsTransfer-tabs {
14542
15317
  display: flex;
14543
15318
  flex-direction: column;
14544
15319
  height: 100%;
14545
15320
  }
14546
- .a-Transfer-tabs > .a-Tabs-links {
15321
+ .a-TabsTransfer-tabs > .a-Tabs-links {
14547
15322
  border-top: 0 none;
14548
15323
  padding: 5px 0 0 5px;
14549
15324
  display: flex;
@@ -14551,51 +15326,41 @@ td.rdtQuarter.rdtDisabled > span {
14551
15326
  flex-wrap: wrap;
14552
15327
  align-items: center;
14553
15328
  }
14554
- .a-Transfer-tabs > .a-Tabs-links > .a-Tabs-link > a:first-child {
15329
+ .a-TabsTransfer-tabs > .a-Tabs-links > .a-Tabs-link > a:first-child {
14555
15330
  font-size: 12px;
14556
15331
  padding: 7px 8px;
14557
15332
  }
14558
- .a-Transfer-tabs > .a-Tabs-links .a-TabsTransfer-tabsMid {
15333
+ .a-TabsTransfer-tabs > .a-Tabs-links .a-TabsTransfer-tabsMid {
14559
15334
  flex-grow: 1;
14560
15335
  }
14561
- .a-Transfer-tabs > .a-Tabs-links > .a-SearchBox {
15336
+ .a-TabsTransfer-tabs > .a-Tabs-links > .a-SearchBox {
14562
15337
  margin: -5px 5px 0 10px;
14563
15338
  }
14564
- .a-Transfer-tabs > .a-Tabs-links > .a-SearchBox.is-active {
15339
+ .a-TabsTransfer-tabs > .a-Tabs-links > .a-SearchBox.is-active {
14565
15340
  width: 150px;
14566
15341
  margin-right: 10px;
14567
15342
  padding-left: 10px;
14568
15343
  }
14569
- .a-Transfer-tabs > .a-Tabs-content {
15344
+ .a-TabsTransfer-tabs > .a-Tabs-content {
14570
15345
  flex-grow: 1;
15346
+ min-height: 0;
14571
15347
  position: relative;
14572
15348
  padding: 5px 0 0;
14573
15349
  }
14574
- .a-Transfer-tabs > .a-Tabs-content > .a-Tabs-pane {
15350
+ .a-TabsTransfer-tabs > .a-Tabs-content > .a-Tabs-pane {
14575
15351
  position: relative;
14576
- min-height: 100%;
15352
+ height: 100%;
14577
15353
  }
14578
- .a-Transfer-tabs > .a-Tabs-content > .a-Tabs-pane.is-active {
15354
+ .a-TabsTransfer-tabs > .a-Tabs-content > .a-Tabs-pane.is-active {
14579
15355
  display: flex;
14580
15356
  flex-direction: column;
14581
15357
  }
14582
- .a-Transfer-tabs > .a-Tabs-content > .a-Tabs-pane.is-active > .a-Transfer-checkboxes {
15358
+ .a-TabsTransfer-tabs > .a-Tabs-content > .a-Tabs-pane.is-active > .a-Transfer-selection {
14583
15359
  flex-grow: 1;
14584
15360
  max-height: 100%;
14585
15361
  overflow: auto;
14586
15362
  }
14587
15363
 
14588
- .a-TabsTransfer .a-Transfer-title {
14589
- height: 40px;
14590
- }
14591
- .a-TabsTransfer-placeholder {
14592
- height: var(--Form-input-height);
14593
- line-height: var(--Form-input-lineHeight);
14594
- font-size: var(--Form-input-fontSize);
14595
- padding: calc( ( var(--Form-input-height) - var(--Form-input-lineHeight) * var(--Form-input-fontSize) ) / 2 ) var(--gap-sm);
14596
- color: var(--text--muted-color);
14597
- }
14598
-
14599
15364
  .a-TransferControl {
14600
15365
  position: relative;
14601
15366
  }
@@ -14603,6 +15368,51 @@ td.rdtQuarter.rdtDisabled > span {
14603
15368
  display: inline-block;
14604
15369
  }
14605
15370
 
15371
+ .a-TransferPicker-icon {
15372
+ transition: transform var(--animation-duration) ease-out;
15373
+ margin: 5px 5px 5px auto;
15374
+ display: flex;
15375
+ color: var(--Form-select-caret-iconColor);
15376
+ }
15377
+ .a-TransferPicker-icon:hover {
15378
+ color: var(--Form-select-caret-onHover-iconColor);
15379
+ }
15380
+ .a-TransferPicker-icon > svg {
15381
+ width: 0.75rem;
15382
+ height: 0.75rem;
15383
+ top: 0;
15384
+ }
15385
+
15386
+ .a-TransferDropDown-icon {
15387
+ transition: transform var(--animation-duration) ease-out;
15388
+ margin: 5px 5px 5px auto;
15389
+ display: flex;
15390
+ color: var(--Form-select-caret-iconColor);
15391
+ }
15392
+ .a-TransferDropDown-icon:hover {
15393
+ color: var(--Form-select-caret-onHover-iconColor);
15394
+ }
15395
+ .a-TransferDropDown-icon > svg {
15396
+ width: 0.625rem;
15397
+ height: 0.625rem;
15398
+ top: 0;
15399
+ }
15400
+ .a-TransferDropDown.is-active .a-TransferDropDown-icon {
15401
+ transform: rotate(180deg);
15402
+ }
15403
+
15404
+ .a-TransferDropDown-content {
15405
+ min-height: 12.5rem;
15406
+ display: flex;
15407
+ flex-direction: column;
15408
+ }
15409
+ .a-TransferDropDown-content > .a-Transfer-selection {
15410
+ flex-grow: 1;
15411
+ max-height: 100%;
15412
+ overflow: auto;
15413
+ position: relative;
15414
+ }
15415
+
14606
15416
  .a-NestedSelectControl {
14607
15417
  position: relative;
14608
15418
  }
@@ -15203,22 +16013,70 @@ td.rdtQuarter.rdtDisabled > span {
15203
16013
  min-width: var(--Form-control-widthSm);
15204
16014
  }
15205
16015
 
16016
+ .a-Form--column {
16017
+ display: flex;
16018
+ flex-wrap: wrap;
16019
+ margin-left: calc(var(--Form-group-gutterWidth) / -2);
16020
+ margin-right: calc(var(--Form-group-gutterWidth) / -2);
16021
+ }
16022
+ .a-Form--column > .a-Form-item {
16023
+ flex-grow: 1;
16024
+ padding-left: calc(var(--Form-group-gutterWidth) / 2);
16025
+ padding-right: calc(var(--Form-group-gutterWidth) / 2);
16026
+ }
16027
+
16028
+ .a-Form--column-2 > .a-Form-item {
16029
+ width: 50%;
16030
+ }
16031
+
16032
+ .a-Form--column-3 > .a-Form-item {
16033
+ width: 33%;
16034
+ }
16035
+
16036
+ .a-Form--column-4 > .a-Form-item {
16037
+ width: 25%;
16038
+ }
16039
+
16040
+ .a-Form--column-5 > .a-Form-item {
16041
+ width: 20%;
16042
+ }
16043
+
16044
+ .a-Form--column-6 > .a-Form-item {
16045
+ width: 16.6%;
16046
+ }
16047
+
16048
+ .a-Form--column-7 > .a-Form-item {
16049
+ width: 14.2%;
16050
+ }
16051
+
16052
+ .a-Form--column-8 > .a-Form-item {
16053
+ width: 12.5%;
16054
+ }
16055
+
16056
+ .a-Form-column-9 > .a-Form-item {
16057
+ width: 11.1%;
16058
+ }
16059
+
16060
+ .a-Form-column-10 > .a-Form-item {
16061
+ width: 10%;
16062
+ }
16063
+
15206
16064
  .a-AnchorNav {
15207
16065
  display: flex;
15208
16066
  height: 25rem;
15209
16067
  }
15210
- .a-AnchorNav-link-wrap {
16068
+ .a-AnchorNav--vertical .a-AnchorNav-link-wrap {
15211
16069
  margin: 0;
15212
16070
  padding: 0;
15213
16071
  width: var(--Tabs--vertical-width);
15214
16072
  border-right: var(--AnchorNav-links-container-borderRight);
15215
16073
  padding-bottom: 3.75rem;
15216
16074
  }
15217
- .a-AnchorNav-link-wrap > .a-AnchorNav-link {
16075
+ .a-AnchorNav--vertical .a-AnchorNav-link-wrap > .a-AnchorNav-link {
15218
16076
  position: relative;
15219
16077
  display: block;
15220
16078
  }
15221
- .a-AnchorNav-link-wrap > .a-AnchorNav-link > a {
16079
+ .a-AnchorNav--vertical .a-AnchorNav-link-wrap > .a-AnchorNav-link > a {
15222
16080
  display: block;
15223
16081
  border: var(--Tabs-borderWidth) solid transparent;
15224
16082
  border-width: var(--AnchorNav-onActive-borderWidth);
@@ -15231,14 +16089,60 @@ td.rdtQuarter.rdtDisabled > span {
15231
16089
  cursor: pointer;
15232
16090
  margin: 0;
15233
16091
  }
15234
- .a-AnchorNav-link-wrap > .a-AnchorNav-link > a:hover {
16092
+ .a-AnchorNav--vertical .a-AnchorNav-link-wrap > .a-AnchorNav-link > a:hover {
15235
16093
  color: var(--primary);
15236
16094
  }
15237
- .a-AnchorNav-link-wrap > .a-AnchorNav-link.is-active > a,
15238
- .a-AnchorNav-link-wrap > .a-AnchorNav-link.is-active > a:hover {
16095
+ .a-AnchorNav--vertical .a-AnchorNav-link-wrap > .a-AnchorNav-link.is-active > a,
16096
+ .a-AnchorNav--vertical .a-AnchorNav-link-wrap > .a-AnchorNav-link.is-active > a:hover {
15239
16097
  color: var(--Tabs--vertical-onActive-color);
15240
16098
  border-color: var(--Tabs--vertical-onActive-border);
15241
16099
  }
16100
+ .a-AnchorNav--horizontal {
16101
+ flex-direction: column;
16102
+ }
16103
+ .a-AnchorNav--horizontal .a-AnchorNav-link-wrap {
16104
+ user-select: none;
16105
+ margin: 0px;
16106
+ padding: 0px;
16107
+ border-bottom: var(--Tabs-borderWidth) solid var(--Tabs-borderColor);
16108
+ list-style: none;
16109
+ }
16110
+ .a-AnchorNav--horizontal .a-AnchorNav-link-wrap > .a-AnchorNav-link {
16111
+ margin-bottom: calc(var(--Tabs-borderWidth) * -1);
16112
+ display: inline-block;
16113
+ position: relative;
16114
+ }
16115
+ .a-AnchorNav--horizontal .a-AnchorNav-link-wrap > .a-AnchorNav-link > a:first-child {
16116
+ font-size: var(--Tabs-linkFontSize);
16117
+ outline: 0;
16118
+ border: var(--Tabs-borderWidth) solid transparent;
16119
+ border-width: 0 0 var(--Tabs--line-borderWidth) 0;
16120
+ border-top-left-radius: var(--Tabs-borderRadius);
16121
+ border-top-right-radius: var(--Tabs-borderRadius);
16122
+ color: var(--Tabs-color);
16123
+ margin: var(--Tabs-linkMargin);
16124
+ padding: var(--Tabs-linkPadding);
16125
+ text-decoration: none;
16126
+ cursor: pointer;
16127
+ display: block;
16128
+ }
16129
+ .a-AnchorNav--horizontal .a-AnchorNav-link-wrap > .a-AnchorNav-link > a:first-child:hover, .a-AnchorNav--horizontal .a-AnchorNav-link-wrap > .a-AnchorNav-link > a:first-child:focus {
16130
+ color: var(--primary);
16131
+ background: transparent;
16132
+ border-color: transparent;
16133
+ }
16134
+ .a-AnchorNav--horizontal .a-AnchorNav-link-wrap > .a-AnchorNav-link:last-child > a {
16135
+ margin: 0;
16136
+ }
16137
+ .a-AnchorNav--horizontal .a-AnchorNav-link-wrap > .a-AnchorNav-link.is-active > a:first-child,
16138
+ .a-AnchorNav--horizontal .a-AnchorNav-link-wrap > .a-AnchorNav-link.is-active > a:first-child:hover,
16139
+ .a-AnchorNav--horizontal .a-AnchorNav-link-wrap > .a-AnchorNav-link.is-active > a:first-child:focus {
16140
+ font-size: var(--Tabs-linkFontSize);
16141
+ border-width: 0 0 var(--Tabs--line-borderWidth) 0;
16142
+ border-color: var(--Tabs--line-onHover-borderColor);
16143
+ color: var(--Tabs--line-onHover-color);
16144
+ background: transparent;
16145
+ }
15242
16146
  .a-AnchorNav-section-wrap {
15243
16147
  border: none;
15244
16148
  flex-grow: 1;
@@ -15472,6 +16376,18 @@ td.rdtQuarter.rdtDisabled > span {
15472
16376
  border-bottom-color: #eee;
15473
16377
  }
15474
16378
 
16379
+ .a-Link.is-disabled {
16380
+ cursor: not-allowed;
16381
+ color: var(--text--muted-color);
16382
+ }
16383
+
16384
+ .a-MappingField {
16385
+ margin-right: var(--gap-xs);
16386
+ }
16387
+ .a-MappingField:last-child {
16388
+ margin-right: 0;
16389
+ }
16390
+
15475
16391
  /*
15476
16392
  * utilities
15477
16393
  */
@@ -15764,6 +16680,10 @@ td.rdtQuarter.rdtDisabled > span {
15764
16680
  background: none !important;
15765
16681
  }
15766
16682
 
16683
+ .cursor-pointer {
16684
+ cursor: pointer;
16685
+ }
16686
+
15767
16687
  a.bg-primary:hover {
15768
16688
  background: #6254b2;
15769
16689
  }