superdesk-ui-framework 3.0.0-beta.0 → 3.0.1-beta.1

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 (402) hide show
  1. package/app/img/spinner.svg +3 -0
  2. package/app/img/themes/theme-base.svg +1 -0
  3. package/app/img/themes/theme-contrast.svg +45 -0
  4. package/app/img/themes/theme-dark.svg +1 -0
  5. package/app/img/themes/theme-light.svg +1 -0
  6. package/app/index.js +1 -1
  7. package/app/scripts/modals.js +22 -9
  8. package/app/styles/_accessibility.scss +311 -4
  9. package/app/styles/_alerts.scss +57 -19
  10. package/app/styles/_avatar.scss +25 -1
  11. package/app/styles/_badge.scss +2 -2
  12. package/app/styles/_big-icon-font.scss +1 -1
  13. package/app/styles/_boxed-list.scss +38 -18
  14. package/app/styles/_buttons.scss +431 -332
  15. package/app/styles/_carousel.scss +17 -11
  16. package/app/styles/_design-tokens.scss +2 -0
  17. package/app/styles/_helpers.scss +186 -30
  18. package/app/styles/_icon-font.scss +1 -1
  19. package/app/styles/_labels.scss +12 -6
  20. package/app/styles/_loaders.scss +13 -0
  21. package/app/styles/_master-desk.scss +5 -5
  22. package/app/styles/_mixins.scss +13 -3
  23. package/app/styles/_modals.scss +4 -28
  24. package/app/styles/_normalize.scss +1 -0
  25. package/app/styles/_panel-info.scss +19 -14
  26. package/app/styles/_sd-tag-input.scss +104 -3
  27. package/app/styles/_simple-list.scss +39 -17
  28. package/app/styles/_spinner.scss +46 -0
  29. package/app/styles/_tabs.scss +6 -8
  30. package/app/styles/_tag-labels.scss +11 -2
  31. package/app/styles/_thumb-carousel.scss +11 -10
  32. package/app/styles/_toggle-box.scss +46 -12
  33. package/app/styles/_toggle-button.scss +42 -0
  34. package/app/styles/_tooltips.scss +3 -3
  35. package/app/styles/_variables.scss +0 -1
  36. package/app/styles/app.scss +9 -2
  37. package/app/styles/components/_card-item.scss +33 -21
  38. package/app/styles/components/_list-item.scss +9 -4
  39. package/app/styles/components/_sd-dropzone.scss +78 -0
  40. package/app/styles/components/_sd-grid-item.scss +2 -2
  41. package/app/styles/components/_sd-searchbar.scss +5 -98
  42. package/app/styles/components/_subnav.scss +83 -61
  43. package/app/styles/components/_theme-selector.scss +189 -0
  44. package/app/styles/design-tokens/_design-tokens-general.scss +77 -0
  45. package/app/styles/{variables → design-tokens}/_new-colors.scss +34 -20
  46. package/app/styles/dropdowns/_basic-dropdown.scss +30 -3
  47. package/app/styles/editor/_editor-buttons.scss +54 -0
  48. package/app/styles/{_editor-themes.scss → editor/_editor-themes.scss} +0 -0
  49. package/app/styles/form-elements/_checkbox.scss +85 -58
  50. package/app/styles/form-elements/_forms-general.scss +90 -14
  51. package/app/styles/form-elements/_inputs.scss +22 -3
  52. package/app/styles/form-elements/_select-grid.scss +79 -0
  53. package/app/styles/grids/_basic-grid.scss +52 -26
  54. package/app/styles/grids/_grid-layout.scss +35 -21
  55. package/app/styles/grids/_layout-grid.scss +4 -4
  56. package/app/styles/grids/_sd-kanban-list.scss +2 -2
  57. package/app/styles/interface-elements/_side-panel.scss +87 -58
  58. package/app/styles/layout/_basic-layout.scss +1 -4
  59. package/app/styles/layout/_container.scss +32 -0
  60. package/app/styles/layout/_editor.scss +306 -0
  61. package/app/styles/menus/_sd-left-navigation.scss +14 -2
  62. package/app/styles/menus/_sd-sidebar-menu.scss +102 -9
  63. package/app/styles/pr-superdesk-theme.scss +3 -0
  64. package/app/styles/primereact/_pr-datepicker.scss +58 -7
  65. package/app/styles/primereact/_pr-dropdown.scss +157 -8
  66. package/app/styles/primereact/_pr-general.scss +4 -0
  67. package/app/styles/primereact/_pr-skeleton.scss +35 -0
  68. package/app/styles/variables/_colors.scss +2 -452
  69. package/app/styles/variables/_dimensions.scss +85 -1
  70. package/app/styles/variables/_form-elements.scss +0 -2
  71. package/app-typescript/components/Alert.tsx +16 -1
  72. package/app-typescript/components/Avatar.tsx +21 -0
  73. package/app-typescript/components/Button.tsx +7 -1
  74. package/app-typescript/components/ButtonGroup.tsx +5 -4
  75. package/app-typescript/components/Carousel.tsx +1 -1
  76. package/app-typescript/components/CheckButtonGroup.tsx +19 -5
  77. package/app-typescript/components/CheckGroup.tsx +2 -1
  78. package/app-typescript/components/Checkbox.tsx +7 -3
  79. package/app-typescript/components/CheckboxButton.tsx +9 -2
  80. package/app-typescript/components/DatePicker.tsx +6 -2
  81. package/app-typescript/components/DropZone.tsx +89 -0
  82. package/app-typescript/components/Dropdown.tsx +9 -1
  83. package/app-typescript/components/Editor/EditorButton.tsx +34 -0
  84. package/app-typescript/components/Form/FormGroup.tsx +33 -0
  85. package/app-typescript/components/Form/FormItem.tsx +20 -0
  86. package/app-typescript/components/Form/FormLabel.tsx +22 -0
  87. package/app-typescript/components/Form/FormRow.tsx +40 -0
  88. package/app-typescript/components/Form/FormText.tsx +15 -0
  89. package/app-typescript/components/Form/index.tsx +5 -0
  90. package/app-typescript/components/IconButton.tsx +26 -12
  91. package/app-typescript/components/IconPicker.tsx +277 -0
  92. package/app-typescript/components/Input.tsx +41 -8
  93. package/app-typescript/components/Layouts/AuthorinInnerSideBar.tsx +15 -0
  94. package/app-typescript/components/Layouts/AuthoringFrame.tsx +72 -0
  95. package/app-typescript/components/Layouts/AuthoringFrameContainer.tsx +15 -0
  96. package/app-typescript/components/Layouts/AuthoringFrameLeftBar.tsx +15 -0
  97. package/app-typescript/components/Layouts/AuthoringFrameMain.tsx +15 -0
  98. package/app-typescript/components/Layouts/AuthoringFrameNavBar.tsx +15 -0
  99. package/app-typescript/components/Layouts/AuthoringFrameOverlay.tsx +15 -0
  100. package/app-typescript/components/Layouts/AuthoringFrameRightBar.tsx +15 -0
  101. package/app-typescript/components/Layouts/AuthoringFrameSidePanel.tsx +22 -0
  102. package/app-typescript/components/Layouts/AuthoringFrameSidePanelOverlay.tsx +22 -0
  103. package/app-typescript/components/Layouts/AuthoringInnerBody.tsx +15 -0
  104. package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx +38 -0
  105. package/app-typescript/components/Layouts/AuthoringMain.tsx +46 -0
  106. package/app-typescript/components/Layouts/AuthoringMainContainer.tsx +15 -0
  107. package/app-typescript/components/Layouts/AuthoringMainContent.tsx +15 -0
  108. package/app-typescript/components/Layouts/AuthoringMainToolBar.tsx +15 -0
  109. package/app-typescript/components/Layouts/Container.tsx +30 -0
  110. package/app-typescript/components/Layouts/HeaderPanel.tsx +15 -0
  111. package/app-typescript/components/Layouts/LayoutContainer.tsx +18 -0
  112. package/app-typescript/components/Layouts/LeftPanel.tsx +24 -0
  113. package/app-typescript/components/Layouts/MainPanel.tsx +22 -0
  114. package/app-typescript/components/Layouts/PageLayout.tsx +51 -0
  115. package/app-typescript/components/Layouts/Panel.tsx +207 -0
  116. package/app-typescript/components/Layouts/RightPanel.tsx +16 -0
  117. package/app-typescript/components/Layouts/index.tsx +25 -0
  118. package/app-typescript/components/LeftMenu.tsx +123 -49
  119. package/app-typescript/components/ListItemLoader.tsx +30 -0
  120. package/app-typescript/components/Lists/BoxedList.tsx +133 -0
  121. package/app-typescript/components/Lists/SimpleList.tsx +54 -0
  122. package/app-typescript/components/Lists/index.tsx +2 -0
  123. package/app-typescript/components/Modal.tsx +1 -1
  124. package/app-typescript/components/MultiSelect.tsx +69 -0
  125. package/app-typescript/components/Navigation/QuickNavBar.tsx +114 -0
  126. package/app-typescript/components/Navigation/SideBarMenu.tsx +68 -0
  127. package/app-typescript/components/Navigation/SideBarTabs.tsx +77 -0
  128. package/app-typescript/components/Navigation/index.tsx +3 -0
  129. package/app-typescript/components/RadioButtonGroup.tsx +113 -0
  130. package/app-typescript/components/RadioGroup.tsx +69 -0
  131. package/app-typescript/components/Select.tsx +12 -4
  132. package/app-typescript/components/SelectGrid.tsx +233 -0
  133. package/app-typescript/components/Skeleton.tsx +48 -0
  134. package/app-typescript/components/SlidingToolbar.tsx +8 -2
  135. package/app-typescript/components/Spinner.tsx +32 -0
  136. package/app-typescript/components/SubNav.tsx +25 -4
  137. package/app-typescript/components/Switch.tsx +34 -12
  138. package/app-typescript/components/Tag.tsx +31 -7
  139. package/app-typescript/components/Text/Heading.tsx +67 -0
  140. package/app-typescript/components/Text/Text.tsx +36 -0
  141. package/app-typescript/components/ThemeSelector.tsx +113 -0
  142. package/app-typescript/components/Togglebox.tsx +8 -6
  143. package/app-typescript/components/TreeSelect.tsx +330 -0
  144. package/app-typescript/index.ts +19 -3
  145. package/dist/avatar-2.jpg +0 -0
  146. package/dist/avatar-3.jpg +0 -0
  147. package/dist/avatar-4.jpg +0 -0
  148. package/dist/avatar-5.jpg +0 -0
  149. package/dist/avatar-6.jpg +0 -0
  150. package/dist/components/basic-grid.html +1 -1
  151. package/dist/components/checkbox.html +1 -1
  152. package/dist/components/modals.html +1 -0
  153. package/dist/examples.bundle.css +99 -1225
  154. package/dist/examples.bundle.js +24704 -15626
  155. package/dist/playgrounds/boxed-list.html +1 -1
  156. package/dist/playgrounds/cards.html +9 -4
  157. package/dist/playgrounds/editor-3-test.html +15 -0
  158. package/dist/playgrounds/form-layout.html +9 -7
  159. package/dist/playgrounds/master-desk.html +1 -3
  160. package/dist/playgrounds/react-playgrounds/EditorTest.tsx +454 -0
  161. package/dist/playgrounds/react-playgrounds/FirstPlayground.tsx +4 -4
  162. package/dist/playgrounds/react-playgrounds/Index.tsx +4 -1
  163. package/dist/playgrounds/react-playgrounds/PageLayoutTest.tsx +161 -0
  164. package/dist/playgrounds/react-playgrounds/PersonalProfile.tsx +622 -0
  165. package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +10 -10
  166. package/dist/playgrounds/react-playgrounds/TestGround.tsx +232 -23
  167. package/dist/playgrounds/react-playgrounds/UiPlayground.tsx +8 -79
  168. package/dist/react/Alerts.tsx +91 -18
  169. package/dist/react/Avatar.tsx +314 -127
  170. package/dist/react/BoxedList.tsx +362 -0
  171. package/dist/react/ButtonGroups.tsx +66 -65
  172. package/dist/react/Buttons.tsx +65 -113
  173. package/dist/react/Carousel.tsx +2 -3
  174. package/dist/react/Checkboxs.tsx +66 -25
  175. package/dist/react/Container.tsx +143 -0
  176. package/dist/react/DropZone.tsx +103 -0
  177. package/dist/react/Heading.tsx +106 -0
  178. package/dist/react/IconButtons.tsx +51 -21
  179. package/dist/react/IconFont.tsx +7 -6
  180. package/dist/react/IconPicker.tsx +65 -0
  181. package/dist/react/Index.tsx +100 -19
  182. package/dist/react/Inputs.tsx +9 -3
  183. package/dist/react/LeftNavigations.tsx +161 -9
  184. package/dist/react/ListItems.tsx +34 -0
  185. package/dist/react/Modal.tsx +7 -7
  186. package/dist/react/MultiSelect.tsx +193 -0
  187. package/dist/react/NavButtons.tsx +4 -4
  188. package/dist/react/Panel.tsx +366 -0
  189. package/dist/react/QuickNavigationBar.tsx +142 -0
  190. package/dist/react/RadioGroup.tsx +351 -0
  191. package/dist/react/SelectGrid.tsx +121 -0
  192. package/dist/react/Selects.tsx +2 -0
  193. package/dist/react/SimpleList.tsx +148 -0
  194. package/dist/react/SubNav.tsx +65 -18
  195. package/dist/react/Tags.tsx +57 -5
  196. package/dist/react/Text.tsx +134 -0
  197. package/dist/react/TreeSelect.tsx +178 -0
  198. package/dist/react.html +4 -0
  199. package/dist/superdesk-ui.bundle.css +26706 -20044
  200. package/dist/superdesk-ui.bundle.js +8456 -3426
  201. package/dist/vendor.bundle.js +13677 -13655
  202. package/examples/css/docs-page.css +98 -27
  203. package/examples/img/avatar-2.jpg +0 -0
  204. package/examples/img/avatar-3.jpg +0 -0
  205. package/examples/img/avatar-4.jpg +0 -0
  206. package/examples/img/avatar-5.jpg +0 -0
  207. package/examples/img/avatar-6.jpg +0 -0
  208. package/examples/index.js +16 -0
  209. package/examples/pages/components/basic-grid.html +1 -1
  210. package/examples/pages/components/checkbox.html +1 -1
  211. package/examples/pages/components/modals.html +1 -0
  212. package/examples/pages/playgrounds/boxed-list.html +1 -1
  213. package/examples/pages/playgrounds/cards.html +9 -4
  214. package/examples/pages/playgrounds/editor-3-test.html +15 -0
  215. package/examples/pages/playgrounds/form-layout.html +9 -7
  216. package/examples/pages/playgrounds/master-desk.html +1 -3
  217. package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx +454 -0
  218. package/examples/pages/playgrounds/react-playgrounds/FirstPlayground.tsx +4 -4
  219. package/examples/pages/playgrounds/react-playgrounds/Index.tsx +4 -1
  220. package/examples/pages/playgrounds/react-playgrounds/PageLayoutTest.tsx +161 -0
  221. package/examples/pages/playgrounds/react-playgrounds/PersonalProfile.tsx +622 -0
  222. package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +10 -10
  223. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +232 -23
  224. package/examples/pages/playgrounds/react-playgrounds/UiPlayground.tsx +8 -79
  225. package/examples/pages/react/Alerts.tsx +91 -18
  226. package/examples/pages/react/Avatar.tsx +314 -127
  227. package/examples/pages/react/BoxedList.tsx +362 -0
  228. package/examples/pages/react/ButtonGroups.tsx +66 -65
  229. package/examples/pages/react/Buttons.tsx +65 -113
  230. package/examples/pages/react/Carousel.tsx +2 -3
  231. package/examples/pages/react/Checkboxs.tsx +66 -25
  232. package/examples/pages/react/Container.tsx +143 -0
  233. package/examples/pages/react/DropZone.tsx +103 -0
  234. package/examples/pages/react/Heading.tsx +106 -0
  235. package/examples/pages/react/IconButtons.tsx +51 -21
  236. package/examples/pages/react/IconFont.tsx +7 -6
  237. package/examples/pages/react/IconPicker.tsx +65 -0
  238. package/examples/pages/react/Index.tsx +100 -19
  239. package/examples/pages/react/Inputs.tsx +9 -3
  240. package/examples/pages/react/LeftNavigations.tsx +161 -9
  241. package/examples/pages/react/ListItems.tsx +34 -0
  242. package/examples/pages/react/Modal.tsx +7 -7
  243. package/examples/pages/react/MultiSelect.tsx +193 -0
  244. package/examples/pages/react/NavButtons.tsx +4 -4
  245. package/examples/pages/react/Panel.tsx +366 -0
  246. package/examples/pages/react/QuickNavigationBar.tsx +142 -0
  247. package/examples/pages/react/RadioGroup.tsx +351 -0
  248. package/examples/pages/react/SelectGrid.tsx +121 -0
  249. package/examples/pages/react/Selects.tsx +2 -0
  250. package/examples/pages/react/SimpleList.tsx +148 -0
  251. package/examples/pages/react/SubNav.tsx +65 -18
  252. package/examples/pages/react/Tags.tsx +57 -5
  253. package/examples/pages/react/Text.tsx +134 -0
  254. package/examples/pages/react/TreeSelect.tsx +178 -0
  255. package/examples/pages/react.html +4 -0
  256. package/package.json +9 -5
  257. package/react/components/Alert.d.ts +3 -0
  258. package/react/components/Alert.js +9 -1
  259. package/react/components/Avatar.d.ts +9 -0
  260. package/react/components/Avatar.js +19 -1
  261. package/react/components/Button.d.ts +2 -0
  262. package/react/components/Button.js +4 -2
  263. package/react/components/ButtonGroup.d.ts +3 -2
  264. package/react/components/ButtonGroup.js +2 -2
  265. package/react/components/Carousel.js +1 -1
  266. package/react/components/CheckButtonGroup.d.ts +3 -1
  267. package/react/components/CheckButtonGroup.js +8 -2
  268. package/react/components/CheckGroup.d.ts +1 -0
  269. package/react/components/CheckGroup.js +1 -1
  270. package/react/components/Checkbox.d.ts +2 -1
  271. package/react/components/Checkbox.js +2 -2
  272. package/react/components/CheckboxButton.d.ts +1 -0
  273. package/react/components/CheckboxButton.js +2 -2
  274. package/react/components/DatePicker.js +7 -2
  275. package/react/components/DropZone.d.ts +25 -0
  276. package/react/components/DropZone.js +93 -0
  277. package/react/components/Dropdown.d.ts +1 -0
  278. package/react/components/Dropdown.js +3 -3
  279. package/react/components/Form/FormGroup.d.ts +13 -0
  280. package/react/components/Form/FormGroup.js +61 -0
  281. package/react/components/Form/FormItem.d.ts +9 -0
  282. package/react/components/Form/FormItem.js +54 -0
  283. package/react/components/Form/FormLabel.d.ts +10 -0
  284. package/react/components/Form/FormLabel.js +54 -0
  285. package/react/components/Form/FormRow.d.ts +17 -0
  286. package/react/components/Form/FormRow.js +62 -0
  287. package/react/components/Form/FormText.d.ts +8 -0
  288. package/react/components/Form/FormText.js +47 -0
  289. package/react/components/Form/index.d.ts +5 -0
  290. package/react/components/Form/index.js +12 -0
  291. package/react/components/IconButton.d.ts +9 -2
  292. package/react/components/IconButton.js +13 -5
  293. package/react/components/IconPicker.d.ts +24 -0
  294. package/react/components/IconPicker.js +283 -0
  295. package/react/components/Input.d.ts +20 -3
  296. package/react/components/Input.js +12 -3
  297. package/react/components/Layouts/AuthorinInnerSideBar.d.ts +8 -0
  298. package/react/components/Layouts/AuthorinInnerSideBar.js +47 -0
  299. package/react/components/Layouts/AuthoringFrame.d.ts +18 -0
  300. package/react/components/Layouts/AuthoringFrame.js +56 -0
  301. package/react/components/Layouts/AuthoringFrameContainer.d.ts +8 -0
  302. package/react/components/Layouts/AuthoringFrameContainer.js +47 -0
  303. package/react/components/Layouts/AuthoringFrameLeftBar.d.ts +8 -0
  304. package/react/components/Layouts/AuthoringFrameLeftBar.js +47 -0
  305. package/react/components/Layouts/AuthoringFrameMain.d.ts +8 -0
  306. package/react/components/Layouts/AuthoringFrameMain.js +47 -0
  307. package/react/components/Layouts/AuthoringFrameNavBar.d.ts +8 -0
  308. package/react/components/Layouts/AuthoringFrameNavBar.js +47 -0
  309. package/react/components/Layouts/AuthoringFrameOverlay.d.ts +8 -0
  310. package/react/components/Layouts/AuthoringFrameOverlay.js +47 -0
  311. package/react/components/Layouts/AuthoringFrameRightBar.d.ts +8 -0
  312. package/react/components/Layouts/AuthoringFrameRightBar.js +47 -0
  313. package/react/components/Layouts/AuthoringFrameSidePanel.d.ts +10 -0
  314. package/react/components/Layouts/AuthoringFrameSidePanel.js +56 -0
  315. package/react/components/Layouts/AuthoringFrameSidePanelOverlay.d.ts +9 -0
  316. package/react/components/Layouts/AuthoringFrameSidePanelOverlay.js +56 -0
  317. package/react/components/Layouts/AuthoringInnerBody.d.ts +8 -0
  318. package/react/components/Layouts/AuthoringInnerBody.js +47 -0
  319. package/react/components/Layouts/AuthoringInnerHeader.d.ts +13 -0
  320. package/react/components/{RadioButton.js → Layouts/AuthoringInnerHeader.js} +20 -22
  321. package/react/components/Layouts/AuthoringMain.d.ts +12 -0
  322. package/react/components/Layouts/AuthoringMain.js +53 -0
  323. package/react/components/Layouts/AuthoringMainContainer.d.ts +8 -0
  324. package/react/components/Layouts/AuthoringMainContainer.js +47 -0
  325. package/react/components/Layouts/AuthoringMainContent.d.ts +8 -0
  326. package/react/components/Layouts/AuthoringMainContent.js +47 -0
  327. package/react/components/Layouts/AuthoringMainToolBar.d.ts +8 -0
  328. package/react/components/Layouts/AuthoringMainToolBar.js +47 -0
  329. package/react/components/Layouts/Container.d.ts +14 -0
  330. package/react/components/Layouts/Container.js +60 -0
  331. package/react/components/Layouts/HeaderPanel.d.ts +8 -0
  332. package/react/components/Layouts/HeaderPanel.js +47 -0
  333. package/react/components/Layouts/LayoutContainer.d.ts +8 -0
  334. package/react/components/Layouts/LayoutContainer.js +47 -0
  335. package/react/components/Layouts/LeftPanel.d.ts +9 -0
  336. package/react/components/Layouts/LeftPanel.js +54 -0
  337. package/react/components/Layouts/MainPanel.d.ts +10 -0
  338. package/react/components/Layouts/MainPanel.js +50 -0
  339. package/react/components/Layouts/PageLayout.d.ts +16 -0
  340. package/react/components/Layouts/PageLayout.js +64 -0
  341. package/react/components/Layouts/Panel.d.ts +65 -0
  342. package/react/components/Layouts/Panel.js +166 -0
  343. package/react/components/Layouts/RightPanel.d.ts +9 -0
  344. package/react/components/Layouts/RightPanel.js +47 -0
  345. package/react/components/Layouts/index.d.ts +24 -0
  346. package/react/components/Layouts/index.js +55 -0
  347. package/react/components/LeftMenu.d.ts +8 -3
  348. package/react/components/LeftMenu.js +55 -16
  349. package/react/components/ListItemLoader.d.ts +4 -0
  350. package/react/components/ListItemLoader.js +62 -0
  351. package/react/components/Lists/BoxedList.d.ts +36 -0
  352. package/react/components/Lists/BoxedList.js +137 -0
  353. package/react/components/Lists/SimpleList.d.ts +21 -0
  354. package/react/components/Lists/SimpleList.js +78 -0
  355. package/react/components/Lists/index.d.ts +2 -0
  356. package/react/components/Lists/index.js +9 -0
  357. package/react/components/Modal.js +1 -1
  358. package/react/components/Navigation/QuickNavBar.d.ts +24 -0
  359. package/react/components/Navigation/QuickNavBar.js +113 -0
  360. package/react/components/Navigation/SideBarMenu.d.ts +21 -0
  361. package/react/components/Navigation/SideBarMenu.js +77 -0
  362. package/react/components/Navigation/SideBarTabs.d.ts +22 -0
  363. package/react/components/Navigation/SideBarTabs.js +82 -0
  364. package/react/components/Navigation/index.d.ts +3 -0
  365. package/react/components/Navigation/index.js +8 -0
  366. package/react/components/RadioButtonGroup.d.ts +29 -0
  367. package/react/components/RadioButtonGroup.js +89 -0
  368. package/react/components/{Radio.d.ts → RadioGroup.d.ts} +7 -3
  369. package/react/components/{Radio.js → RadioGroup.js} +15 -11
  370. package/react/components/Select.d.ts +3 -1
  371. package/react/components/Select.js +5 -3
  372. package/react/components/SelectGrid.d.ts +45 -0
  373. package/react/components/SelectGrid.js +179 -0
  374. package/react/components/Skeleton.d.ts +30 -0
  375. package/react/components/Skeleton.js +55 -0
  376. package/react/components/SlidingToolbar.d.ts +1 -1
  377. package/react/components/SlidingToolbar.js +11 -1
  378. package/react/components/Spinner.d.ts +11 -0
  379. package/react/components/Spinner.js +69 -0
  380. package/react/components/SubNav.d.ts +8 -1
  381. package/react/components/SubNav.js +22 -4
  382. package/react/components/Switch.d.ts +4 -1
  383. package/react/components/Switch.js +19 -7
  384. package/react/components/TabCustom.d.ts +0 -1
  385. package/react/components/Tag.d.ts +3 -2
  386. package/react/components/Tag.js +16 -5
  387. package/react/components/TagInput.d.ts +0 -1
  388. package/react/components/Text/Heading.d.ts +15 -0
  389. package/react/components/Text/Heading.js +77 -0
  390. package/react/components/Text/Text.d.ts +15 -0
  391. package/react/components/Text/Text.js +65 -0
  392. package/react/components/{RadioButton.d.ts → ThemeSelector.d.ts} +4 -3
  393. package/react/components/ThemeSelector.js +112 -0
  394. package/react/components/Togglebox.d.ts +1 -0
  395. package/react/components/Togglebox.js +9 -2
  396. package/react/index.d.ts +17 -3
  397. package/react/index.js +40 -4
  398. package/app/styles/variables/_design-tokens-general.scss +0 -136
  399. package/app-typescript/components/Radio.tsx +0 -57
  400. package/app-typescript/components/RadioButton.tsx +0 -57
  401. package/dist/react/Radios.tsx +0 -391
  402. package/examples/pages/react/Radios.tsx +0 -391
@@ -31,8 +31,9 @@ sd-tag-input {
31
31
  letter-spacing: 0.08em;
32
32
  }
33
33
 
34
- tags-input {
34
+ tags-input, .tags-input {
35
35
  display: block;
36
+ background-color: var(--color-input-bg);
36
37
  .tags-input__host {
37
38
  position: relative;
38
39
  margin-top: 0.5rem;
@@ -68,6 +69,8 @@ tags-input {
68
69
  padding: 0;
69
70
  list-style-type: none;
70
71
  display: flex;
72
+ justify-content: center;
73
+ align-items: center;
71
74
  gap: $sd-base-increment;
72
75
  }
73
76
  .tags-input__tag-item {
@@ -77,7 +80,16 @@ tags-input {
77
80
  color: currentColor;
78
81
  &.selected {
79
82
  background-color: var(--sd-colour-interactive--alpha-70);
80
-
83
+ }
84
+ &:hover {
85
+ cursor: pointer;
86
+ }
87
+ &:hover .tags-input__remove-button {
88
+ text-decoration: none;
89
+ background-color: var(--sd-colour__tag-label-remove-Bg--hover);
90
+ [class^="icon-"], [class*=" icon-"] {
91
+ opacity: 0.85;
92
+ }
81
93
  }
82
94
  .tags-input__remove-button {
83
95
  height: 1.8rem;
@@ -138,6 +150,12 @@ tags-input {
138
150
  }
139
151
  }
140
152
  }
153
+ .tags-input__tag-item-multiselect {
154
+ margin: 0 !important;
155
+ }
156
+ .tags-input__tag-item-readonly {
157
+ cursor: default !important;
158
+ }
141
159
  .tags-input__input {
142
160
  border: 0;
143
161
  outline: none;
@@ -240,6 +258,64 @@ tags-input {
240
258
  width: 100%;
241
259
  background-color: var(--color-dropdown-menu-Bg);
242
260
  box-shadow: $shadow__dropdown--default;
261
+ &__header {
262
+ display: flex;
263
+ align-items: center;
264
+ justify-content: center;
265
+ gap: 10px;
266
+ border-bottom: 1px solid rgba(0, 0, 0, 0.15);
267
+ padding: 4px;
268
+ }
269
+ &__icon {
270
+ display: flex;
271
+ align-items: center;
272
+ justify-content: center;
273
+ height: 35px;
274
+ width: 35px;
275
+ &:hover .arrow-left {
276
+ color: var(--sd-colour-interactive--alpha-70);
277
+ transition: 0.2s;
278
+ transform: translate(-3px);
279
+ }
280
+ .arrow-left {
281
+ cursor: pointer;
282
+ }
283
+ .search {
284
+ cursor: not-allowed;
285
+ }
286
+ }
287
+ &__filter {
288
+ height: 32px;
289
+ width: 100%;
290
+ }
291
+ &__button {
292
+ height: 32px;
293
+ padding: 0 15px;
294
+ font-weight: bold;
295
+ width: 100%;
296
+ cursor: default;
297
+ }
298
+ &__input {
299
+ height: 32px;
300
+ width: 100%;
301
+ padding: 4px;
302
+ border: none;
303
+ }
304
+ &__button--multiselect {
305
+ background-color: var(--sd-colour-interactive--alpha-10);
306
+ border-radius: var(--b-radius--small);
307
+ cursor: pointer;
308
+ &:hover {
309
+ background-color: var(--sd-colour-interactive--alpha-20);
310
+ }
311
+ }
312
+ &-multiselect {
313
+ padding: 0 !important;
314
+ }
315
+ &-multiselect-width {
316
+ width: 275px !important;
317
+ }
318
+
243
319
  .suggestion-list {
244
320
  margin: 0;
245
321
  padding: 0;
@@ -248,6 +324,9 @@ tags-input {
248
324
  overflow-y: auto;
249
325
  position: relative;
250
326
  }
327
+ .suggestion-list--multi-select {
328
+ padding: 4px 0 !important;
329
+ }
251
330
  .suggestion-item {
252
331
  padding: 0.5rem 1rem;
253
332
  cursor: pointer;
@@ -270,10 +349,30 @@ tags-input {
270
349
  cursor: default;
271
350
  pointer-events: none;
272
351
  }
352
+ &:hover {
353
+ background-color: var(--sd-colour-interactive--alpha-10) !important;
354
+ }
355
+ &__icon {
356
+ display: flex;
357
+ align-items: center;
358
+ justify-content: center;
359
+ }
360
+ }
361
+ .suggestion-item--multi-select {
362
+ display: flex;
363
+ justify-content: space-between;
364
+ align-items: center;
365
+ }
366
+ .suggestion-item--disabled {
367
+ opacity: 0.5;
273
368
  }
274
369
  }
275
370
  }
276
371
 
372
+ .tags-input--multiselect {
373
+ position: relative;
374
+ }
375
+
277
376
 
278
377
  //TESTING TAG INPUT REACT NEW CSS
279
378
 
@@ -299,6 +398,8 @@ tags-input {
299
398
  border-bottom: 1px solid $sd-inputBorderColor;
300
399
  height: 100%;
301
400
  display: flex;
401
+ align-items: center;
402
+ min-height: $form-input-height;
302
403
  &:hover {
303
404
  border-color: rgba(0,0,0,0.3);
304
405
  }
@@ -316,7 +417,7 @@ tags-input {
316
417
  list-style-type: none;
317
418
  display: flex;
318
419
  flex-wrap: wrap;
319
- gap: $sd-base-increment / 4;
420
+ gap: $sd-base-increment / 2;
320
421
  }
321
422
  .tags-input__tag-item {
322
423
  @include tag-label;
@@ -5,23 +5,19 @@
5
5
  $simple-list-border-color: $neutral-border-color;
6
6
 
7
7
  .simple-list {
8
- padding: 2rem 0;
8
+ padding: 0 0 $sd-base-increment * 3;
9
+ align-self: stretch;
9
10
  .simple-list__item {
10
11
  padding: 0.5rem 0;
11
- &--with-icon {
12
- display: flex;
13
- flex-direction: row;
14
- [class^="icon-"], [class*=" icon-"] {
15
- flex-grow: 0;
16
- flex-shrink: 0;
17
- margin-right: 1rem;
18
- opacity: .75;
19
- }
20
- }
21
- &--flex {
22
- display: flex;
23
- flex-direction: row;
24
- align-items: center;
12
+ display: flex;
13
+ flex-direction: row;
14
+ align-items: center;
15
+ gap: 0.8rem;
16
+ [class^="icon-"], [class*=" icon-"] {
17
+ flex-grow: 0;
18
+ flex-shrink: 0;
19
+ //margin-inline-end: 1rem;
20
+ opacity: .75;
25
21
  }
26
22
  &--stacked {
27
23
  display: flex;
@@ -34,8 +30,17 @@ $simple-list-border-color: $neutral-border-color;
34
30
  padding: 0 0 0.6rem 0;
35
31
  }
36
32
  }
37
- .label-icon {
38
- margin-right: 4px;
33
+ &--justify-flex-start {
34
+ justify-content: flex-start;
35
+ }
36
+ &--justify-flex-end {
37
+ justify-content: flex-end;
38
+ }
39
+ &--justify-center {
40
+ justify-content: center;
41
+ }
42
+ &--justify-space-between {
43
+ justify-content: space-between;
39
44
  }
40
45
  }
41
46
  .simple-list__item-label {
@@ -81,6 +86,11 @@ $simple-list-border-color: $neutral-border-color;
81
86
  padding: 1.2rem 0;
82
87
  }
83
88
  }
89
+ &--loose {
90
+ .simple-list__item {
91
+ padding: 2.4rem 0;
92
+ }
93
+ }
84
94
  [class^="icon-"], [class*=" icon-"] {
85
95
  vertical-align: middle;
86
96
  }
@@ -90,4 +100,16 @@ $simple-list-border-color: $neutral-border-color;
90
100
  &--no-padding-b {
91
101
  padding-bottom: 0;
92
102
  }
103
+ &--fixedW-x-small {
104
+ width: var(--width__container--x-small);
105
+ }
106
+ &--fixedW-small {
107
+ width: var(--width__container--small);
108
+ }
109
+ &--fixedW-medium {
110
+ width: var(--width__container--medium);
111
+ }
112
+ &--fixedW-large {
113
+ width: var(--width__container--large);
114
+ }
93
115
  }
@@ -0,0 +1,46 @@
1
+ .sd-spinner {
2
+ animation: rotate 2s linear infinite;
3
+ z-index: 1;
4
+ &--mini {
5
+ width: 1.8rem;
6
+ height: 1.8rem;
7
+ }
8
+ &--small {
9
+ width: 2.4rem;
10
+ height: 2.4rem;
11
+ }
12
+ &--medium {
13
+ width: 3.2rem;
14
+ height: 3.2rem;
15
+ }
16
+ &--large {
17
+ width: 4.8rem;
18
+ height: 4.8rem;
19
+ }
20
+ }
21
+ .sd-spinner__path {
22
+ stroke: var(--color-text-light);
23
+ stroke-linecap: round;
24
+ animation: dash 1.5s ease-in-out infinite;
25
+ }
26
+
27
+ @keyframes rotate {
28
+ 100% {
29
+ transform: rotate(360deg);
30
+ }
31
+ }
32
+
33
+ @keyframes dash {
34
+ 0% {
35
+ stroke-dasharray: 1, 150;
36
+ stroke-dashoffset: 0;
37
+ }
38
+ 50% {
39
+ stroke-dasharray: 90, 150;
40
+ stroke-dashoffset: -32;
41
+ }
42
+ 100% {
43
+ stroke-dasharray: 90, 150;
44
+ stroke-dashoffset: -124;
45
+ }
46
+ }
@@ -3,7 +3,6 @@
3
3
 
4
4
  // Variables
5
5
  $nav-tabs-padding: 0.8rem;
6
- $nav-tabs-margin: 1rem;
7
6
  $nav-tabs-font-size: 1.4rem !default;
8
7
  $nav-tabs-font-size-small: 1.2rem;
9
8
  $nav-tabs-font-size-big: 1.6rem;
@@ -21,13 +20,13 @@ $nav-tab-active-link-border-color: $sd-colour-interactive; // active state bord
21
20
  flex-shrink: 0;
22
21
  padding-inline: 1rem 0;
23
22
  box-shadow: 0 1px 0 0 var(--color-border-line--light);
23
+ gap: $sd-base-increment;
24
24
  }
25
25
  @mixin nav-tab-link(
26
26
  $link-color: $nav-tab-link-color,
27
27
  $border-bottom-hover-color: $nav-tab-link-border-color
28
28
  ) {
29
29
  margin: 0;
30
- margin: $nav-tabs-margin;
31
30
  padding: 0;
32
31
  padding-inline: $nav-tabs-padding;
33
32
  height: $nav-height;
@@ -61,8 +60,6 @@ $nav-tab-active-link-border-color: $sd-colour-interactive; // active state bord
61
60
  $border-bottom-hover-color: $nav-tab-link-border-color
62
61
  ) {
63
62
  margin: 0;
64
- margin-inline-start: $nav-tabs-margin;
65
- margin-inline-end: $nav-tabs-margin;
66
63
  padding: 0;
67
64
  padding-inline: $nav-tabs-padding;
68
65
  height: $nav-height;
@@ -77,7 +74,6 @@ $nav-tab-active-link-border-color: $sd-colour-interactive; // active state bord
77
74
  transition: all 0.2s ease-in-out;
78
75
  @include text-overflow();
79
76
  span {
80
- opacity: 0.7;
81
77
  line-height: 1;
82
78
  display: inline-block;
83
79
  margin-top: 3px;
@@ -94,6 +90,7 @@ $nav-tab-active-link-border-color: $sd-colour-interactive; // active state bord
94
90
  background: none;
95
91
  cursor: default;
96
92
  border-bottom-color: $border-bottom-color;
93
+ color: $sd-text;
97
94
  span {
98
95
  opacity: 1;
99
96
  }
@@ -191,17 +188,18 @@ $nav-tab-active-link-border-color: $sd-colour-interactive; // active state bord
191
188
  // Smaller nav tabs
192
189
  &.sd-nav-tabs--small {
193
190
  padding: 0 .4rem;
191
+ gap: $sd-base-increment / 2;
194
192
  .sd-nav-tabs__tab {
195
193
  font-size: $nav-tabs-font-size-small;
196
194
  letter-spacing: 0.025em;
197
195
  margin: 0;
198
- margin-inline-start: .8rem;
199
- margin-inline-end: .8rem;
200
196
  }
201
197
  }
202
198
 
203
199
  // Bigger nav tabs
204
- &.sd-nav-tabs--big, &.sd-nav-tabs--large {
200
+ &.sd-nav-tabs--big,
201
+ &.sd-nav-tabs--large {
202
+ gap: $sd-base-increment * 1.5;
205
203
  .sd-nav-tabs__tab {
206
204
  font-size: $nav-tabs-font-size-big;
207
205
  }
@@ -114,6 +114,15 @@ $tag-label-lineheight: 100% !default;
114
114
  color: $tag-label-Txt-inverse;
115
115
  background-color: $tag-label-BG-inverse;
116
116
  }
117
+ .tag-label--text-wrapper {
118
+ display: flex;
119
+ align-items: center;
120
+ justify-content: center;
121
+ gap: 4px;
122
+ }
123
+ .tag-label--text-label {
124
+ opacity: 0.7;
125
+ }
117
126
  }
118
127
 
119
128
  // ----------------- SEARCH TAGS -----------------
@@ -126,8 +135,8 @@ $tag-label-lineheight: 100% !default;
126
135
  display: flex;
127
136
  align-items: center;
128
137
  @include sd-padding('1', 'x');
129
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
130
- background-color: rgba(255, 255, 255, 0.4);
138
+ box-shadow: 0 1px 1px 0 hsla(0, 0%, 0%, 0.12);
139
+ background-color: var(--sd-colour-bg-translucent--10);
131
140
  }
132
141
  .sd-search-tags__tag-list {
133
142
  margin: 0.6rem 0;
@@ -1,5 +1,5 @@
1
1
  :root {
2
- --sd-thumb-carousel__shadow-line: hsla(214, 13%, 80%, 1);
2
+ --sd-thumb-carousel__shadow-line: hsla(214, 13%, 80%, 0.2);
3
3
  --sd-thumb-carousel__shadow: 0 0 0 1px var(--sd-thumb-carousel__shadow-line), 0 0 1px hsla(0, 0%, 0%, 0.1), 0 1px 4px hsla(0, 0%, 0%, 0.2);
4
4
  --sd-thumb-carousel__colour-bg: hsla(214, 13%, 100%, 1);
5
5
  --sd-thumb-carousel__colour-img-bg: hsla(214, 13%, 12%, 1);
@@ -7,12 +7,13 @@
7
7
  --sd-thumb-carousel__border-radius: 4px;
8
8
  --sd-thumb-carousel__colour-btn: hsla(214, 13%, 100%, 1);
9
9
  --sd-thumb-carousel__colour-indicator: hsla(214, 13%, 80%, 1);
10
- --sd-thumb-carousel__colour-indicator--highlight: hsla(198, 49%, 58%, 1);
11
10
  }
12
11
  [data-theme="dark-ui"] {
13
- --sd-thumb-carousel__shadow-line: hsla(214, 13%, 20%, 1);
12
+ --sd-thumb-carousel__shadow-line: hsla(214, 13%, 60%, 0.5);
13
+ --sd-thumb-carousel__shadow: 0 0 0 1px var(--sd-thumb-carousel__shadow-line), 0 0 1px hsla(0, 0%, 0%, 0.2), 0 1px 4px hsla(0, 0%, 0%, 0.4);
14
14
  --sd-thumb-carousel__colour-bg: hsla(214, 13%, 25%, 1);
15
15
  --sd-thumb-carousel__colour-txt: hsla(214, 13%, 96%, 1);
16
+ --sd-thumb-carousel__colour-btn: hsla(214, 13%, 60%, 1);
16
17
  --sd-thumb-carousel__colour-indicator: hsla(214, 13%, 80%, 0.5);
17
18
 
18
19
  .badge--light {
@@ -151,7 +152,7 @@
151
152
  &--highlight, &.p-highlight {
152
153
  > button {
153
154
  width: 16px;
154
- background-color: var(--sd-thumb-carousel__colour-indicator--highlight);
155
+ background-color: var(--sd-colour-interactive);
155
156
  &:hover {
156
157
  opacity: 1;
157
158
  }
@@ -163,7 +164,6 @@
163
164
  .sd-thumb-carousel__btn--prev, .sd-thumb-carousel__btn--next,
164
165
  .p-carousel-prev, .p-carousel-next {
165
166
  @extend .icn-btn;
166
-
167
167
  display: flex;
168
168
  align-self: center;
169
169
  flex-grow: 0;
@@ -175,19 +175,20 @@
175
175
  z-index: 2;
176
176
  background-color: var(--sd-thumb-carousel__colour-btn);
177
177
  box-shadow: 0 0 1px hsla(0, 0%, 0%, 0.12), 0 2px 6px hsla(0, 0%, 0%, 0.20);
178
- opacity: 1;
178
+ opacity: 0.8;
179
179
  transition: all 0.2 ease !important;
180
- color: hsla(0, 0%, 20%, 0.6);
180
+ color: hsla(214, 13%, 20%, 0.6);
181
181
  &:hover {
182
182
  opacity: 1;
183
+ background-color: var(--sd-thumb-carousel__colour-btn);
183
184
  box-shadow: 0 0 2px hsla(0, 0%, 0%, 0.16), 0 4px 12px hsla(0, 0%, 0%, 0.24);
184
- color: hsla(0, 0%, 20%, 1);
185
+ color: hsla(214, 13%, 10%, 1);
185
186
  }
186
187
  &:active {
187
188
  opacity: 1;
188
- background-color: var(--sd-thumb-carousel__colour-btn);
189
+ background-color: var(--sd-colour-interactive) !important;
189
190
  box-shadow: 0 0 1px hsla(0, 0%, 0%, 0.1), 0 1px 2px hsla(0, 0%, 0%, 0.12);
190
- color: $sd-blue;
191
+ color: $white;
191
192
  }
192
193
  &:focus {
193
194
  opacity: 1;
@@ -3,19 +3,14 @@
3
3
 
4
4
  .toggle-box {
5
5
  position: relative;
6
- margin-bottom: 30px;
6
+ align-self: stretch;
7
7
  &.hidden {
8
8
  .toggle-box__chevron {
9
9
  i {
10
10
  transform: rotate(0);
11
11
  }
12
12
  &--circle {
13
- padding: 2px;
14
13
  background-color: var(--sd-colour-btn-bg-neutral);
15
- height: 20px;
16
- width: 20px;
17
- text-align: center;
18
- border-radius: $border-radius__base--full;
19
14
  i {
20
15
  color: var(--color-text-light);
21
16
  }
@@ -33,10 +28,6 @@
33
28
  &.toggle-box--circle {
34
29
  .toggle-box__chevron {
35
30
  background-color: var(--sd-colour-btn-bg-neutral);
36
- height: 2rem;
37
- width: 2rem;
38
- text-align: center;
39
- border-radius: $border-radius__base--full;
40
31
  i {
41
32
  color: var(--sd-colour-btn-txt-neutral);
42
33
  }
@@ -45,16 +36,39 @@
45
36
  &.toggle-box--marg-b10 {
46
37
  margin-bottom: 1rem;
47
38
  }
39
+ &.toggle-box--margin-none {
40
+ margin-bottom: 0;
41
+ }
42
+ &.toggle-box--margin-small {
43
+ margin-bottom: $sd-base-increment * 2;
44
+ }
45
+ &.toggle-box--margin-normal {
46
+ margin-bottom: $sd-base-increment * 3;
47
+ }
48
+ &.toggle-box--margin-large {
49
+ margin-bottom: $sd-base-increment * 4;
50
+ }
48
51
  }
49
52
 
50
- .toggle-box__header {
53
+ .toggle-box__chevron {
54
+ height: 2.4rem;
55
+ width: 2.4rem;
56
+ display: flex;
57
+ align-items: center;
58
+ justify-content: center;
59
+ text-align: center;
60
+ border-radius: $border-radius__base--full;
61
+ }
62
+
63
+ .toggle-box__header,
64
+ a.toggle-box__header {
51
65
  display: flex;
52
66
  cursor: pointer;
53
67
  margin-bottom: 1.8rem;
54
68
  align-items: center;
69
+ text-decoration: none !important;
55
70
 
56
71
  .toggle-box__chevron {
57
- padding: 2px;
58
72
  i {
59
73
  transition: all .3s;
60
74
  transform: rotate(90deg);
@@ -72,6 +86,26 @@
72
86
  margin: auto 0.4rem auto 0;
73
87
  background: var(--sd-colour-line--light);
74
88
  }
89
+ &:hover {
90
+ .toggle-box__label {
91
+ color: var(--sd-colour-interactive);
92
+ text-decoration: none !important;
93
+ }
94
+ }
95
+ &:focus {
96
+ background: none !important;
97
+ }
98
+ &:focus-visible {
99
+ .toggle-box__chevron {
100
+ box-shadow: 0 0 0 3px $sd-colour--focus-shadow;
101
+ }
102
+ .toggle-box__label {
103
+ color: var(--sd-colour-interactive);
104
+ }
105
+ }
106
+ * {
107
+ text-decoration: none !important;
108
+ }
75
109
  }
76
110
 
77
111
  .toggle-box__content-wraper {
@@ -0,0 +1,42 @@
1
+ .sd-toggle-button {
2
+ @include sd-padding('1-5', 'x');
3
+ line-height: 1;
4
+ border: 1px solid $checkButtonBorderColor;
5
+ border-radius: $checkButtonBorderRadius;
6
+ transition: all 0.2s ease-in-out;
7
+ display: inline-flex;
8
+ align-items: center;
9
+ justify-content: center;
10
+ gap: 8px;
11
+ height: $sd-base-increment * 4;
12
+ color: var(--color-text);
13
+ @include text-overflow;
14
+ cursor: pointer;
15
+ text-decoration: none;
16
+ font-size: 1.2rem;
17
+ background: transparent;
18
+ transition: all 0.2s ease-out;
19
+ [class^="icon-"],
20
+ [class*=" icon-"],
21
+ .sd-toggle-button__icon {
22
+ color: currentColor;
23
+ }
24
+ &:hover {
25
+ border-color: $checkButtonBorderColorHover;
26
+ box-shadow: 0 1px 4px 0 hsla(0, 0%, 0%, 0.16);
27
+ color: var(--color-text);
28
+ }
29
+ &.sd-toggle--active {
30
+ background-color: var(--sd-colour-interactive--active);
31
+ border-color: var(--sd-colour-interactive--active);
32
+ border-top-color: var(--sd-colour-interactive--darken-20);
33
+ box-shadow: inset 0 2px 0 0 hsla(0, 0%, 0%, 0.2);
34
+ color: $white;
35
+ &:hover {
36
+ color: $white;
37
+ border-color: var(--sd-colour-interactive--active);
38
+ background-color: var(--sd-colour-interactive--hover);
39
+ box-shadow: inset 0 2px 0 0 hsla(0, 0%, 0%, 0.2);
40
+ }
41
+ }
42
+ }
@@ -32,7 +32,7 @@
32
32
  overflow: hidden;
33
33
  text-overflow: ellipsis;
34
34
  padding: 0.8rem 1.2rem 0.9rem;
35
- border-radius: $border-radius__base--small;
35
+ border-radius: var(--b-radius--small);
36
36
  box-shadow: 0 8px 18px -5px rgba(0, 0, 0, 0.45);
37
37
  background: var(--sd-colour-background__tooltip);
38
38
  color: hsl(0, 0%, 100%);
@@ -258,7 +258,7 @@
258
258
 
259
259
  .p-tooltip {
260
260
  position:absolute;
261
- z-index: 1000;
261
+ z-index: 2000 !important;
262
262
  min-width: 3em;
263
263
  max-width: 21em;
264
264
  }
@@ -281,7 +281,7 @@
281
281
  overflow: hidden;
282
282
  text-overflow: ellipsis;
283
283
  padding: 0.8rem 1.2rem 0.9rem;
284
- border-radius: $border-radius__base--small;
284
+ border-radius: var(--b-radius--small);
285
285
  background: var(--sd-colour-background__tooltip);
286
286
  box-shadow: 0 8px 18px -5px rgba(0, 0, 0, 0.45);
287
287
  color: hsl(0, 0%, 100%);
@@ -1,4 +1,3 @@
1
- @import 'variables/design-tokens-general';
2
1
  @import 'variables/dimensions';
3
2
  @import 'variables/typography';
4
3
  @import 'variables/colors';
@@ -1,5 +1,5 @@
1
1
  //@import 'normalize';
2
- @import 'variables/new-colors';
2
+ @import 'design-tokens';
3
3
  @import 'variables';
4
4
  @import 'reboot';
5
5
  @import 'animations';
@@ -32,6 +32,7 @@
32
32
  @import 'thumb-carousel';
33
33
  @import 'content-divider';
34
34
  @import 'loaders';
35
+ @import 'spinner';
35
36
 
36
37
  // Interface elements
37
38
  @import 'interface-elements/side-panel';
@@ -45,6 +46,8 @@
45
46
  // Layout
46
47
  @import 'layout/general';
47
48
  @import 'layout/basic-layout';
49
+ @import 'layout/editor';
50
+ @import 'layout/container';
48
51
 
49
52
  // Components
50
53
  @import 'components/list-item';
@@ -61,6 +64,8 @@
61
64
  @import 'components/sd-circular-progress';
62
65
  @import 'components/sd-toaster';
63
66
  @import 'components/subnav';
67
+ @import 'components/theme-selector';
68
+ @import 'components/sd-dropzone';
64
69
 
65
70
  // Dropdowns
66
71
  @import 'dropdowns/basic-dropdown';
@@ -76,6 +81,7 @@
76
81
  @import 'form-elements/checkbox';
77
82
  @import 'form-elements/radio';
78
83
  @import 'form-elements/autocomplete';
84
+ @import 'form-elements/select-grid';
79
85
 
80
86
  // Menus
81
87
  @import 'menus/sd-sidebar-menu';
@@ -84,7 +90,8 @@
84
90
  @import 'menus/sd-content-navigation';
85
91
 
86
92
  // Editor
87
- @import 'editor-themes';
93
+ @import 'editor/editor-themes';
94
+ @import 'editor/editor-buttons';
88
95
 
89
96
  // Publisher specific
90
97
  @import 'publisher-styles';