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
@@ -321,15 +321,17 @@ table {
321
321
  border-collapse: collapse;
322
322
  border-spacing: 0;
323
323
  }:root {
324
- color: hsla(214, 13%, 12%, 1);
324
+ color: hsla(214, 13%, 20%, 1);
325
325
  --docs-page-color-bg-default: hsl(0, 0%, 97%);
326
326
  --docs-page-color-bg-00: hsla(214, 13%, 96%, 1);
327
327
  --docs-page-color-bg-10: hsla(0, 0%, 100%, 1);
328
328
  --docs-page-color-bg__window-bar: hsl(0, 0%, 92%);
329
+ --docs-page-color-bg__aside: hsla(214, 13%, 92%, 1);
330
+ --docs-page-color-bg__header: hsl(216, 45%, 24%);
329
331
 
330
332
  --docs-page-color-bg__content-row--white: hsla(0, 0%, 100%, 1);
331
333
  --docs-page-color-bg__content-row--grey: hsla(0, 0%, 95%, 1);
332
- --docs-page-color-bg__example-box: hsla(0, 0%, 95%, 1);
334
+ --docs-page-color-bg__example-box: hsla(214, 13%, 94%, 1);
333
335
  --docs-page-color-bg__graphic-btn: hsla(0, 0%, 100%, 1);
334
336
  --docs-page-color-bg__graphic-btn-graphic: linear-gradient(180deg, hsla(165, 57%, 95%, 1) 4%, hsla(191, 53%, 86%, 1) 96%);
335
337
 
@@ -344,12 +346,14 @@ table {
344
346
  --docs-page-color-bg-00: hsla(214, 13%, 12%, 1);
345
347
  --docs-page-color-bg-10: hsla(214, 13%, 12%, 1);
346
348
  --docs-page-color-bg__window-bar: hsl(0, 0%, 8%);
349
+ --docs-page-color-bg__aside: hsla(214, 13%, 16%, 1);
350
+ --docs-page-color-bg__header: hsl(216, 40%, 18%);
347
351
 
348
352
  --docs-page-color-bg__content-row--white: hsla(0, 0%, 8%, 1);
349
353
  --docs-page-color-bg__content-row--grey: hsla(0, 0%, 12%, 1);
350
- --docs-page-color-bg__example-box: hsla(0, 0%, 18%, 1);
351
- --docs-page-color-bg__graphic-btn: hsla(0, 0%, 19%, 1);
352
- --docs-page-color-bg__graphic-btn-graphic: linear-gradient(180deg, hsla(165, 57%, 95%, 0.1) 4%, hsla(191, 53%, 86%, 0.1) 96%);
354
+ --docs-page-color-bg__example-box: hsla(214, 13%, 18%, 1);
355
+ --docs-page-color-bg__graphic-btn: hsla(214, 13%, 8%, 1);
356
+ --docs-page-color-bg__graphic-btn-graphic: hsla(214, 13%, 14%, 1);
353
357
 
354
358
  --docs-page-border__window-bar--top: hsla(0, 0%, 91%, 0.02);
355
359
  --docs-page-border__window-bar--bottom: hsla(0, 0%, 88%, 0.12);
@@ -525,10 +529,9 @@ p.docs-page__paragraph b, div.docs-page__paragraph b {
525
529
  text-decoration: underline;
526
530
  }
527
531
  .docs-page__header {
528
- background: #5eadc8;
529
- background: #22385a;
532
+ background: var(--docs-page-color-bg__header);
530
533
  color: white;
531
- padding: 0 24px;
534
+ padding: 0 8px 0 24px;
532
535
  height: 64px;
533
536
  grid-column: 1 / 3;
534
537
  grid-row: 1 / 2;
@@ -537,6 +540,32 @@ p.docs-page__paragraph b, div.docs-page__paragraph b {
537
540
  box-shadow: 0 1px 6px rgba(0,0,0,0.2), 0 1px 1px rgba(0,0,0,0.12);
538
541
  z-index: 2;
539
542
  }
543
+ .docs-page__header-button {
544
+ background: transparent;
545
+ color: white;
546
+ padding: 0;
547
+ height: 40px;
548
+ width: 40px;
549
+ border-radius: 999px;
550
+ margin-inline-start: 0px;
551
+ margin-inline-end: 8px;
552
+ display: flex;
553
+ align-items: center;
554
+ justify-content: center;
555
+ opacity: 0.8;
556
+ transition: all 0.2s ease;
557
+ }
558
+ .docs-page__header-button i {
559
+ color: white !important;
560
+ }
561
+ .docs-page__header-button:hover {
562
+ background: hsla(0, 0%, 0%, 0.2);
563
+ opacity: 1;
564
+ }
565
+ .docs-page__header-button:active {
566
+ background: var(--sd-colour-interactive);
567
+ opacity: 1;
568
+ }
540
569
  .docs-page__header-logo {
541
570
  height: 40px;
542
571
  width: 40px;
@@ -545,7 +574,8 @@ p.docs-page__paragraph b, div.docs-page__paragraph b {
545
574
  background-size: 100%;
546
575
  }
547
576
  .docs-page__header-nav {
548
- margin-left: auto;
577
+ margin-inline-start: auto;
578
+ margin-inline-end: 16px;
549
579
  display: flex;
550
580
  flex-direction: row;
551
581
  align-items: stretch;
@@ -602,7 +632,7 @@ p.docs-page__paragraph b, div.docs-page__paragraph b {
602
632
  grid-column: 1 / 2;
603
633
  grid-row: 2 / 3;
604
634
  width: 280px;
605
- background-color: #ebebeb;
635
+ background-color: var(--docs-page-color-bg__aside);
606
636
  overflow-y: auto;
607
637
  }
608
638
  .docs-page__sidebar.scroll {
@@ -659,7 +689,7 @@ p.docs-page__paragraph b, div.docs-page__paragraph b {
659
689
  }
660
690
  .docs-page__nav-title {
661
691
  text-transform: uppercase;
662
- color: #222;
692
+ color: var(--color-text);
663
693
  font-size: 12px;
664
694
  font-weight: 500;
665
695
  letter-spacing: 0.1em;
@@ -775,7 +805,7 @@ p.docs-page__paragraph b, div.docs-page__paragraph b {
775
805
  font-size: 16px;
776
806
  line-height: 24px;
777
807
  font-weight: 300;
778
- color: #444;
808
+ color: var(--color-text);
779
809
  border-inline-start: 4px solid transparent;
780
810
  }
781
811
  .docs-page__nav-item a {
@@ -783,29 +813,29 @@ p.docs-page__paragraph b, div.docs-page__paragraph b {
783
813
  line-height: 32px;
784
814
  display: block;
785
815
  padding-inline-start: 24px;
786
- color: #444;
816
+ color: var(--color-text-light);
787
817
  background-color: rgba(255, 255, 255, 0);
788
818
  cursor: pointer;
789
819
  text-decoration: none;
790
820
  transition: all ease-in-out 0.2s;
791
821
  }
792
822
  .docs-page__nav-item a:hover {
793
- color: #333;
794
- background-color: rgba(255, 255, 255, 0.4);
823
+ color: var(--color-text);
824
+ background-color: var(--docs-page-color-bg-00);
795
825
  }
796
826
  .docs-page__nav-item a:active {
797
- color: #333;
798
- background-color: rgba(94, 169, 200, 0.2);
827
+ color: var(--color-text-light);
828
+ background-color: var(--sd-colour-interactive--alpha-20);
799
829
  }
800
830
 
801
831
  .docs-page__nav-item.docs-page__nav-item--active {
802
- border-color: rgba(94, 169, 200, 1);
803
- background-color: rgba(255, 255, 255, 0.7);
832
+ border-color: var(--sd-colour-interactive);
833
+ background-color: var(--docs-page-color-bg-00);
804
834
  font-weight: 400;
805
835
  }
806
836
 
807
837
  .docs-page__nav-item.docs-page__nav-item--active a {
808
- color: rgba(94, 169, 200, 1);
838
+ color: var(--sd-colour-interactive);
809
839
  }
810
840
 
811
841
  .docs-page__section {
@@ -894,7 +924,7 @@ p.docs-page__paragraph b, div.docs-page__paragraph b {
894
924
  }
895
925
  .docs-page__code-markup {
896
926
  display: none;
897
- background-color: #272822;
927
+ background-color: hsl(214, 13%, 10%);
898
928
  padding: 16px 16px 16px 36px;
899
929
  overflow-y: scroll;
900
930
  }
@@ -912,11 +942,14 @@ pre.prettyprint {
912
942
 
913
943
  .docs-page__paragraph code {
914
944
  font-size: 85%;
915
- padding: 0.2em 0.4em;
916
- background-color: rgba(0,0,0,0.07);
945
+ padding: 0 0.4em;
946
+ background-color: var(--sd-colour-interactive--alpha-20);
917
947
  border-radius: 3px;
918
948
  font-family: 'Source Code Pro', monospace;
919
949
  font-weight: 400;
950
+ line-height: inherit;
951
+ vertical-align: baseline;
952
+ color: var(--color-text);
920
953
  }
921
954
 
922
955
  .docs-page__unordered-list {
@@ -968,6 +1001,7 @@ pre.prettyprint {
968
1001
  max-width: 1200px;
969
1002
  display: grid;
970
1003
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
1004
+ transition: all 0.2s ease;
971
1005
  }
972
1006
  .docs-page__icon-font-list li {
973
1007
  display: flex;
@@ -980,7 +1014,7 @@ pre.prettyprint {
980
1014
  transition: all 0.2s ease-in-out;
981
1015
  }
982
1016
  .docs-page__icon-font-list li:hover {
983
- box-shadow: 0 1px 6px rgba(0,0,0,.24);
1017
+ box-shadow: 0 0 0 1px var(--sd-shadow-outline), 0 1px 2px hsla(0, 0%, 0%, 0.12), 0 1px 6px hsla(0, 0%, 0%, 0.24);
984
1018
  }
985
1019
 
986
1020
  .docs-page__icon-font-list li i {
@@ -1137,6 +1171,13 @@ pre.prettyprint {
1137
1171
  grid-row: 2/3;
1138
1172
  grid-column: 2/3;
1139
1173
  }
1174
+
1175
+ #scrollContainer {
1176
+ overflow: scroll;
1177
+ scroll-behavior: smooth;
1178
+ }
1179
+
1180
+ .
1140
1181
  /* ---------------- COLOR SWATCHES ---------------- */
1141
1182
 
1142
1183
  .doc-swatches__grid {
@@ -1202,7 +1243,7 @@ pre.prettyprint {
1202
1243
  font-size: 15px;
1203
1244
  font-weight: 300;
1204
1245
  line-height: 150%;
1205
- color: #646464;
1246
+ color: var(--color-text-light);
1206
1247
  }
1207
1248
  .docs-page__color--primary {
1208
1249
  color: var(--docs-page-color-primary) !important;
@@ -1235,58 +1276,52 @@ doc-gif-img:hover img {
1235
1276
  .docs-page__container table td {
1236
1277
  border-color: var(--docs-page-border__table) !important;
1237
1278
  }
1238
- /* -------------- END COLOR SWATCHES -------------- */
1239
1279
 
1280
+
1281
+ /* -------------- END COLOR SWATCHES -------------- */
1240
1282
  /* -------------- PrismJS overrides -------------- */
1283
+
1241
1284
  code[class*="language-"],
1242
1285
  pre[class*="language-"] {
1243
1286
  font-family: 'Source Code Pro', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
1244
1287
  font-size: 1.1em;
1245
1288
  border-radius: 0.4rem;
1246
1289
  }
1290
+ pre[class*="language-"] {
1291
+ background: hsl(214, 13%, 8%);
1292
+ }
1247
1293
 
1248
1294
  /*// extra large screen media query /100em = 1600px/*/
1249
1295
  @media only screen and (min-width: 100em) {
1250
1296
  .docs-page__section {
1251
1297
  max-width: 80%;
1252
1298
  }
1253
- }@charset "UTF-8";
1254
- :root {
1255
- --b-radius--x-small: 2px;
1256
- --b-radius--small: 3px;
1257
- --b-radius--medium: 4px;
1258
- --b-radius--large: 6px;
1259
- --b-radius--x-large: 8px;
1260
- --b-radius--full: 9999px;
1261
- --width__container--xx-small: 24rem;
1262
- --width__container--x-small: 32rem;
1263
- --width__container--small: 40rem;
1264
- --width__container--medium: 48rem;
1265
- --width__container--large: 56rem;
1266
- --width__container--x-large: 72rem;
1267
- --width__container--xx-large: 80rem;
1268
- --width__container--xxx-large: 120rem;
1269
- --width__container--full: 100%;
1270
- --width__modal--small: 40rem;
1271
- --width__modal--medium: 64rem;
1272
- --width__modal--large: 80rem;
1273
- --width__modal--x-large: 80vw; }
1274
-
1275
- :root, [data-theme="light-ui"] {
1276
- --sd-shadow-outline: hsla(0, 0%, 0%, 0);
1277
- --sd-shadow-outline--2: hsl(214, 13%, 0%, 0.06);
1278
- --sd-shadow__dropdown: 0 0 0 1px var(--sd-shadow-outline), 0 2px 10px hsla(0, 0%, 0%, 0.4), 0 3px 1px -2px hsla(0, 0%, 0%, 0.1);
1279
- --sd-shadow__modal: 0 0 0 1px var(--sd-shadow-outline), 0 0 8px 2px hsla(0, 0%, 0%, 0.3);
1280
- --sd-shadow__toast: 0 0 0 1px var(--sd-shadow-outline--2), 0 2px 4px hsla(0, 0%, 0%, 0.12), 0 8px 12px hsla(0, 0%, 0%, 0.16);
1281
- --sd-shadow__sliding-toolbar: 0 2px 4px -1px hsla(0, 0%, 0%, 0.2), 0 1px 0 0 hsla(0, 0%, 0%, 0.1); }
1282
-
1283
- [data-theme="dark-ui"], .dark-ui {
1284
- --sd-shadow-outline: hsl(214, 13%, 60%, 0.1);
1285
- --sd-shadow-outline--2: hsl(214, 13%, 60%, 0.1);
1286
- --sd-shadow__dropdown: 0 0 0 1px var(--sd-shadow-outline), 0 2px 10px hsla(0, 0%, 0%, 0.6), 0 3px 1px -2px hsla(0, 0%, 0%, 0.2);
1287
- --sd-shadow__modal: 0 0 0 1px var(--sd-shadow-outline), 0 0 8px 2px hsla(0, 0%, 0%, 0.4);
1288
- --sd-shadow__toast: 0 0 0 1px var(--sd-shadow-outline--2), 0 2px 4px hsla(0, 0%, 0%, 0.24), 0 8px 12px hsla(0, 0%, 0%, 0.26); }
1289
-
1299
+ }
1300
+
1301
+
1302
+ /* -------------- DOC PAGE SPECIFIC OVERRIDES -------------- */
1303
+
1304
+ doc-react-playground {
1305
+ display: contents;
1306
+ }
1307
+
1308
+ .docs-page doc-react-playground .sd-main-content-grid {
1309
+ grid-column: 2 / 3;
1310
+ overflow: auto;
1311
+ }
1312
+
1313
+ .docs-page .sd-editor-grid {
1314
+ grid-row: 2 / 3;
1315
+ grid-column: 2 / 3;
1316
+ overflow-y: auto;
1317
+ }
1318
+ .docs-page doc-react-playground .sd-editor-grid {
1319
+ grid-row: 2 / 3;
1320
+ grid-column: 2 / 3;
1321
+ overflow-y: auto;
1322
+ }
1323
+
1324
+ /* ------------ END DOC PAGE SPECIFIC OVERRIDES ------------ */@charset "UTF-8";
1290
1325
  .red--100 {
1291
1326
  background-color: #fde4e2; }
1292
1327
 
@@ -3567,329 +3602,6 @@ pre[class*="language-"] {
3567
3602
  .text-blue-grey--500 {
3568
3603
  color: #607c8a; }
3569
3604
 
3570
- .sd-top-menu .navbtn, .sd-top-menu .sd-navbtn, #top-menu .navbtn, #top-menu .sd-navbtn {
3571
- --color-navbutton-border: hsla(214, 13%, 70%, 0.1) !important;
3572
- --sd-colour-line--x-light: hsla(214, 13%, 70%, 0.1) !important; }
3573
-
3574
- [data-theme="accessible-light-ui"] {
3575
- --font-size-large: 1.5rem;
3576
- --color-accessible-text: hsla(0, 0%, 7%, 1);
3577
- --sd-slugline-color: hsla(241, 100%, 50%, 1);
3578
- --color-input-bg: hsla(0, 0%, 0%, 0.05);
3579
- --color-input-bg--hover: hsla(0, 0%, 0%, 0.08);
3580
- --color-input-bg--focus: hsla(198, 49%, 58%, 0.14);
3581
- --color-label-text: hsla(0, 0%, 25%, 1);
3582
- --color-input-border: hsla(0, 0%, 0%, 0.35);
3583
- --color-input-border-hover: hsla(0, 0%, 0%, 0.8);
3584
- --color-form-bg: hsla(0, 0%, 100%, 0);
3585
- --color-text: hsla(0, 0%, 0%, 1);
3586
- --color-selected-bg: hsla(196, 35%, 94%, 1);
3587
- --color-selected-bg--hover: hsl(198, 36%, 91%, 1);
3588
- --color-bg-00: hsla(0, 0%, 100%, 1);
3589
- --color-bg-50: hsla(0, 0%, 97%, 1);
3590
- --color-bg-100: hsla(0, 0%, 93%, 1);
3591
- --color-bg-150: hsla(0, 0%, 87%, 1);
3592
- --color-bg-200: hsla(0, 0%, 63%, 1);
3593
- --color-bg-800: hsla(0, 0%, 17%, 1);
3594
- --color-accessible-primary: hsla(241, 100%, 50%, 1); }
3595
- [data-theme="accessible-light-ui"] [class^="icon-"],
3596
- [data-theme="accessible-light-ui"] [class*=" icon-"],
3597
- [data-theme="accessible-light-ui"] [class^="big-icon--"],
3598
- [data-theme="accessible-light-ui"] [class*=" big-icon--"] {
3599
- color: black; }
3600
- [data-theme="accessible-light-ui"] .sd-checkbox--button-style {
3601
- color: #121212; }
3602
- [data-theme="accessible-light-ui"] .sd-checkbox--button-style.checked,
3603
- [data-theme="accessible-light-ui"] .sd-checkbox--button-style[checked="checked"] {
3604
- background-color: var(--color-accessible-primary);
3605
- border-color: var(--color-accessible-primary);
3606
- border-top-color: #020156;
3607
- color: white; }
3608
- [data-theme="accessible-light-ui"] .sd-checkbox--button-style.checked:hover,
3609
- [data-theme="accessible-light-ui"] .sd-checkbox--button-style[checked="checked"]:hover {
3610
- background-color: #030165;
3611
- border-color: #030165;
3612
- border-top-color: #010038; }
3613
- [data-theme="accessible-light-ui"] .sd-create-btn .circle {
3614
- background-color: var(--color-accessible-primary); }
3615
- [data-theme="accessible-light-ui"] .navbtn.navbtn--active {
3616
- background-color: #454545;
3617
- color: #fff; }
3618
- [data-theme="accessible-light-ui"] .btn {
3619
- color: var(--color-accessible-text);
3620
- font-weight: 600;
3621
- font-size: 1.4rem; }
3622
- [data-theme="accessible-light-ui"] .btn.btn--primary {
3623
- background-color: var(--color-accessible-primary);
3624
- color: #fff; }
3625
- [data-theme="accessible-light-ui"] .btn.btn--hollow {
3626
- background-color: #fff; }
3627
- [data-theme="accessible-light-ui"] .sd-list-item {
3628
- font-size: 1.5rem; }
3629
- [data-theme="accessible-light-ui"] .sd-list-item .sd-list-item__slugline {
3630
- font-size: 1.3rem; }
3631
- [data-theme="accessible-light-ui"] .sd-list-item time {
3632
- color: #474747;
3633
- font-weight: 400; }
3634
- [data-theme="accessible-light-ui"] .badge {
3635
- font-size: 1.2rem;
3636
- line-height: 1.1em;
3637
- font-weight: 600; }
3638
- [data-theme="accessible-light-ui"] .side-panel {
3639
- background-color: #fff;
3640
- color: var(--color-accessible-text); }
3641
- [data-theme="accessible-light-ui"] .side-panel .side-panel__header {
3642
- background-color: #fff; }
3643
- [data-theme="accessible-light-ui"] .side-panel .side-panel__heading {
3644
- font-weight: 500;
3645
- color: var(--color-accessible-text); }
3646
- [data-theme="accessible-light-ui"] .side-panel p {
3647
- font-size: 1.6rem;
3648
- line-height: 1.5;
3649
- color: var(--color-accessible-text); }
3650
- [data-theme="accessible-light-ui"] .side-panel .sd-text__date-and-author {
3651
- font-size: 1.4rem; }
3652
- [data-theme="accessible-light-ui"] .side-panel .sd-text__date-and-author time {
3653
- font-weight: 400;
3654
- color: #595959; }
3655
- [data-theme="accessible-light-ui"] .side-panel.side-panel--dark-ui {
3656
- background-color: var(--color-bg-800);
3657
- color: #fff; }
3658
- [data-theme="accessible-light-ui"] .side-panel.side-panel--dark-ui i[class^="icon-"] {
3659
- color: #fff; }
3660
- [data-theme="accessible-light-ui"] .side-panel.side-panel--dark-ui .side-panel__header {
3661
- background-color: var(--color-bg-800);
3662
- color: #fff !important; }
3663
- [data-theme="accessible-light-ui"] .side-panel.side-panel--dark-ui .side-panel__header i[class^="icon-"] {
3664
- color: #fff !important; }
3665
- [data-theme="accessible-light-ui"] .sd-input .sd-input__label {
3666
- font-weight: 600;
3667
- font-size: 1.2rem; }
3668
- [data-theme="accessible-light-ui"] .sd-input .sd-input__input,
3669
- [data-theme="accessible-light-ui"] .sd-input .sd-input__select {
3670
- font-size: 1.5rem; }
3671
- [data-theme="accessible-light-ui"] .sd-input .sd-input__hint,
3672
- [data-theme="accessible-light-ui"] .sd-input .sd-input__message {
3673
- font-size: 1.4rem;
3674
- margin: 0.8rem 0; }
3675
- [data-theme="accessible-light-ui"] .sd-input .sd-input__hint {
3676
- color: #454545; }
3677
- [data-theme="accessible-light-ui"] .form-label {
3678
- font-size: 1.2rem;
3679
- font-weight: 500; }
3680
- [data-theme="accessible-light-ui"] .form-label.form-label--light {
3681
- color: #525252; }
3682
- [data-theme="accessible-light-ui"] .navbtn {
3683
- color: #111; }
3684
- [data-theme="accessible-light-ui"] .navbtn [class^="icon-"], [data-theme="accessible-light-ui"] .navbtn [class*=" icon-"] {
3685
- color: currentColor; }
3686
- [data-theme="accessible-light-ui"] .dropdown__menu-label {
3687
- font-size: 1.2rem;
3688
- color: #595959; }
3689
- [data-theme="accessible-light-ui"] .dropdown__toggle:active,
3690
- [data-theme="accessible-light-ui"] .dropdown.open .dropdown__toggle {
3691
- color: var(--color-accessible-primary); }
3692
- [data-theme="accessible-light-ui"] .dropdown__menu li a:not(.btn),
3693
- [data-theme="accessible-light-ui"] .dropdown__menu li button:not(.btn):not(.dropdown__menu-close):not(.toggle-button),
3694
- [data-theme="accessible-light-ui"] .dropdown__menu .dropdown__menu-item a:not(.btn),
3695
- [data-theme="accessible-light-ui"] .dropdown__menu .dropdown__menu-item button:not(.btn):not(.dropdown__menu-close):not(.toggle-button) {
3696
- font-size: 1.5rem;
3697
- font-weight: 500;
3698
- color: currentColor; }
3699
- [data-theme="accessible-light-ui"] .dropdown__menu li a:not(.btn):hover,
3700
- [data-theme="accessible-light-ui"] .dropdown__menu li a:not(.btn):focus,
3701
- [data-theme="accessible-light-ui"] .dropdown__menu li button:not(.btn):not(.dropdown__menu-close):not(.toggle-button):hover,
3702
- [data-theme="accessible-light-ui"] .dropdown__menu li button:not(.btn):not(.dropdown__menu-close):not(.toggle-button):focus,
3703
- [data-theme="accessible-light-ui"] .dropdown__menu .dropdown__menu-item a:not(.btn):hover,
3704
- [data-theme="accessible-light-ui"] .dropdown__menu .dropdown__menu-item a:not(.btn):focus,
3705
- [data-theme="accessible-light-ui"] .dropdown__menu .dropdown__menu-item button:not(.btn):not(.dropdown__menu-close):not(.toggle-button):hover,
3706
- [data-theme="accessible-light-ui"] .dropdown__menu .dropdown__menu-item button:not(.btn):not(.dropdown__menu-close):not(.toggle-button):focus {
3707
- background: var(--color-accessible-primary);
3708
- color: #fff; }
3709
- [data-theme="accessible-light-ui"] .dropdown__menu li a:not(.btn):hover > i[class^="icon-"],
3710
- [data-theme="accessible-light-ui"] .dropdown__menu li a:not(.btn):focus > i[class^="icon-"],
3711
- [data-theme="accessible-light-ui"] .dropdown__menu li button:not(.btn):not(.dropdown__menu-close):not(.toggle-button):hover > i[class^="icon-"],
3712
- [data-theme="accessible-light-ui"] .dropdown__menu li button:not(.btn):not(.dropdown__menu-close):not(.toggle-button):focus > i[class^="icon-"],
3713
- [data-theme="accessible-light-ui"] .dropdown__menu .dropdown__menu-item a:not(.btn):hover > i[class^="icon-"],
3714
- [data-theme="accessible-light-ui"] .dropdown__menu .dropdown__menu-item a:not(.btn):focus > i[class^="icon-"],
3715
- [data-theme="accessible-light-ui"] .dropdown__menu .dropdown__menu-item button:not(.btn):not(.dropdown__menu-close):not(.toggle-button):hover > i[class^="icon-"],
3716
- [data-theme="accessible-light-ui"] .dropdown__menu .dropdown__menu-item button:not(.btn):not(.dropdown__menu-close):not(.toggle-button):focus > i[class^="icon-"] {
3717
- color: #fff; }
3718
- [data-theme="accessible-light-ui"] .dropdown.open .navbtn > i {
3719
- color: var(--color-accessible-primary); }
3720
- [data-theme="accessible-light-ui"] .sd-text__slugline,
3721
- [data-theme="accessible-light-ui"] p.sd-text__slugline {
3722
- color: var(--color-accessible-primary) !important; }
3723
- [data-theme="accessible-light-ui"] .toggle-box--circle .toggle-box__chevron {
3724
- background-color: rgba(122, 122, 122, 0.5);
3725
- height: 2rem;
3726
- width: 2rem; }
3727
- [data-theme="accessible-light-ui"] .toggle-box__label {
3728
- font-size: 1.4rem;
3729
- color: var(--color-label-text);
3730
- font-weight: 500; }
3731
- [data-theme="accessible-light-ui"] .sd-grid-item time {
3732
- color: #474747;
3733
- font-size: 1.3rem;
3734
- font-weight: 400; }
3735
- [data-theme="accessible-light-ui"] .sd-grid-item .sd-grid-item__slugline {
3736
- font-size: 1.2rem; }
3737
- [data-theme="accessible-light-ui"] .nav-tabs .nav-tabs__link {
3738
- font-size: 1.6rem;
3739
- font-weight: 500; }
3740
- [data-theme="accessible-light-ui"] .nav-tabs--big .nav-tabs__link {
3741
- font-size: 2rem; }
3742
- [data-theme="accessible-light-ui"] .nav-tabs__tab--active .nav-tabs__link,
3743
- [data-theme="accessible-light-ui"] .nav-tabs__tab--active:hover .nav-tabs__link {
3744
- border-bottom-color: var(--color-accessible-primary);
3745
- color: var(--color-accessible-text); }
3746
- [data-theme="accessible-light-ui"] .side-panel.side-panel--dark-ui .nav-tabs__tab .nav-tabs__link {
3747
- border-bottom-color: transparent;
3748
- color: #fff;
3749
- opacity: 0.6; }
3750
- [data-theme="accessible-light-ui"] .side-panel.side-panel--dark-ui .nav-tabs__tab:hover .nav-tabs__link {
3751
- border-bottom-color: rgba(255, 255, 255, 0.25);
3752
- opacity: 1; }
3753
- [data-theme="accessible-light-ui"] .side-panel.side-panel--dark-ui .nav-tabs__tab.nav-tabs__tab--active .nav-tabs__link, [data-theme="accessible-light-ui"] .side-panel.side-panel--dark-ui .nav-tabs__tab.nav-tabs__tab--active:hover .nav-tabs__link {
3754
- border-bottom-color: #4d4dff;
3755
- color: #fff;
3756
- opacity: 1; }
3757
- [data-theme="accessible-light-ui"] .side-panel.side-panel--dark-ui .toggle-box__label {
3758
- color: #fff; }
3759
- [data-theme="accessible-light-ui"] .side-panel.side-panel--dark-ui .sd-line-input .sd-line-input__label {
3760
- color: #fff;
3761
- opacity: 0.7; }
3762
- [data-theme="accessible-light-ui"] .side-panel.side-panel--dark-ui a.text-link.text-link--white {
3763
- color: #fff;
3764
- opacity: 0.75; }
3765
- [data-theme="accessible-light-ui"] .side-panel.side-panel--dark-ui a.text-link.text-link--white:hover {
3766
- opacity: 1; }
3767
- [data-theme="accessible-light-ui"] .badge.badge--primary {
3768
- background-color: var(--color-accessible-primary); }
3769
- [data-theme="accessible-light-ui"] .badge.badge--success {
3770
- background-color: #006115; }
3771
- [data-theme="accessible-light-ui"] .badge.badge--warning {
3772
- background-color: #854900; }
3773
- [data-theme="accessible-light-ui"] .sd-sidebar-menu__btn--active,
3774
- [data-theme="accessible-light-ui"] .sd-sidebar-menu__btn--active:hover {
3775
- background-color: var(--color-accessible-primary); }
3776
-
3777
- .test-div {
3778
- height: 4rem;
3779
- display: flex;
3780
- flex-direction: row; }
3781
- .test-div div {
3782
- flex-grow: 1;
3783
- height: 100%; }
3784
-
3785
- .test-div--1 {
3786
- background-color: var(--sd-colour-neutral); }
3787
-
3788
- .test-div--2 {
3789
- background-color: var(--sd-colour-neutral--hover); }
3790
-
3791
- .test-div--3 {
3792
- background-color: var(--sd-colour-neutral--active); }
3793
-
3794
- .test-div--4 {
3795
- background-color: var(--sd-colour-primary); }
3796
-
3797
- .test-div--5 {
3798
- background-color: var(--sd-colour-primary--hover); }
3799
-
3800
- .test-div--6 {
3801
- background-color: var(--sd-colour-primary--active); }
3802
-
3803
- .test-div--7 {
3804
- background-color: var(--sd-colour-success); }
3805
-
3806
- .test-div--8 {
3807
- background-color: var(--sd-colour-success--hover); }
3808
-
3809
- .test-div--9 {
3810
- background-color: var(--sd-colour-success--active); }
3811
-
3812
- .test-div--10 {
3813
- background-color: var(--sd-colour-alert); }
3814
-
3815
- .test-div--11 {
3816
- background-color: var(--sd-colour-alert--hover); }
3817
-
3818
- .test-div--12 {
3819
- background-color: var(--sd-colour-alert--active); }
3820
-
3821
- .test-div--13 {
3822
- background-color: var(--sd-colour-warning); }
3823
-
3824
- .test-div--14 {
3825
- background-color: var(--sd-colour-warning--hover); }
3826
-
3827
- .test-div--15 {
3828
- background-color: var(--sd-colour-warning--active); }
3829
-
3830
- .test-div--16 {
3831
- background-color: var(--sd-colour-highlight); }
3832
-
3833
- .test-div--17 {
3834
- background-color: var(--sd-colour-highlight--hover); }
3835
-
3836
- .test-div--18 {
3837
- background-color: var(--sd-colour-highlight--active); }
3838
-
3839
- .test-div--19-1 {
3840
- background-color: white; }
3841
-
3842
- .test-div--19-2 {
3843
- background-color: var(--sd-colour-bg--00); }
3844
-
3845
- .test-div--20-1 {
3846
- background-color: #f3f5f6; }
3847
-
3848
- .test-div--20-2 {
3849
- background-color: var(--sd-colour-bg--01); }
3850
-
3851
- .test-div--21-1 {
3852
- background-color: #e8eaed; }
3853
-
3854
- .test-div--21-2 {
3855
- background-color: var(--sd-colour-bg--02); }
3856
-
3857
- .test-div--22-1 {
3858
- background-color: #d4d8de; }
3859
-
3860
- .test-div--22-2 {
3861
- background-color: var(--sd-colour-bg--03); }
3862
-
3863
- .test-div--23-1 {
3864
- background-color: #c5cbd3; }
3865
-
3866
- .test-div--23-2 {
3867
- background-color: var(--sd-colour-bg--04); }
3868
-
3869
- .test-div--24-1 {
3870
- background-color: #b7bec8; }
3871
-
3872
- .test-div--24-2 {
3873
- background-color: var(--sd-colour-bg--05); }
3874
-
3875
- .test-div--25-1 {
3876
- background-color: #a9b1bc; }
3877
-
3878
- .test-div--25-2 {
3879
- background-color: var(--sd-colour-bg--06); }
3880
-
3881
- .test-div--26-1 {
3882
- background-color: #9aa4b1; }
3883
-
3884
- .test-div--26-2 {
3885
- background-color: var(--sd-colour-bg--07); }
3886
-
3887
- .test-div--27-1 {
3888
- background-color: #8c97a6; }
3889
-
3890
- .test-div--27-2 {
3891
- background-color: var(--sd-colour-bg--08); }
3892
-
3893
3605
  @font-face {
3894
3606
  font-family: 'sd_icons';
3895
3607
  src: url(sd_icons.eot);
@@ -4532,7 +4244,7 @@ pre[class*="language-"] {
4532
4244
  bottom: -0.7rem;
4533
4245
  height: 1em;
4534
4246
  width: 1em;
4535
- background-color: #fff;
4247
+ background-color: var(--sd-item__main-Bg);
4536
4248
  border-radius: var(--b-radius--full);
4537
4249
  padding: 1px;
4538
4250
  z-index: 1;
@@ -4590,521 +4302,6 @@ pre[class*="language-"] {
4590
4302
  color: inherit;
4591
4303
  opacity: 1; }
4592
4304
  @charset "UTF-8";
4593
- :root {
4594
- --sd-colour-interactive-hs: 198, 50%;
4595
- --sd-colour-interactive-l--05: var(--sd-colour-interactive-hs), 6%;
4596
- --sd-colour-interactive-l--10: var(--sd-colour-interactive-hs), 10%;
4597
- --sd-colour-interactive-l--20: var(--sd-colour-interactive-hs), 20%;
4598
- --sd-colour-interactive-l--30: var(--sd-colour-interactive-hs), 30%;
4599
- --sd-colour-interactive-l--40: var(--sd-colour-interactive-hs), 40%;
4600
- --sd-colour-interactive-l--50: var(--sd-colour-interactive-hs), 50%;
4601
- --sd-colour-interactive-l--60: var(--sd-colour-interactive-hs), 60%;
4602
- --sd-colour-interactive-l--70: var(--sd-colour-interactive-hs), 70%;
4603
- --sd-colour-interactive-l--80: var(--sd-colour-interactive-hs), 80%;
4604
- --sd-colour-interactive-l--90: var(--sd-colour-interactive-hs), 90%;
4605
- --sd-colour-interactive-l--95: var(--sd-colour-interactive-hs), 95%;
4606
- --sd-colour-interactive-l--100: var(--sd-colour-interactive-hs), 100%;
4607
- --sd-colour-secondary-hs: 185, 33%;
4608
- --sd-colour-secondary-l--10: var(--sd-colour-secondary-hs), 10%;
4609
- --sd-colour-secondary-l--20: var(--sd-colour-secondary-hs), 20%;
4610
- --sd-colour-secondary-l--30: var(--sd-colour-secondary-hs), 30%;
4611
- --sd-colour-secondary-l--40: var(--sd-colour-secondary-hs), 40%;
4612
- --sd-colour-secondary-l--50: var(--sd-colour-secondary-hs), 50%;
4613
- --sd-colour-secondary-l--60: var(--sd-colour-secondary-hs), 60%;
4614
- --sd-colour-secondary-l--70: var(--sd-colour-secondary-hs), 70%;
4615
- --sd-colour-secondary-l--80: var(--sd-colour-secondary-hs), 80%;
4616
- --sd-colour-secondary-l--90: var(--sd-colour-secondary-hs), 90%;
4617
- --sd-colour-secondary-l--100: var(--sd-colour-secondary-hs), 100%;
4618
- --sd-colour-info-hs: 198, 50%;
4619
- --sd-colour-info-l--10: var(--sd-colour-info-hs), 10%;
4620
- --sd-colour-info-l--20: var(--sd-colour-info-hs), 20%;
4621
- --sd-colour-info-l--30: var(--sd-colour-info-hs), 30%;
4622
- --sd-colour-info-l--40: var(--sd-colour-info-hs), 40%;
4623
- --sd-colour-info-l--50: var(--sd-colour-info-hs), 50%;
4624
- --sd-colour-info-l--60: var(--sd-colour-info-hs), 60%;
4625
- --sd-colour-info-l--70: var(--sd-colour-info-hs), 70%;
4626
- --sd-colour-info-l--80: var(--sd-colour-info-hs), 80%;
4627
- --sd-colour-info-l--90: var(--sd-colour-info-hs), 90%;
4628
- --sd-colour-info-l--100: var(--sd-colour-info-hs), 100%;
4629
- --sd-colour-primary-hs: 198, 50%;
4630
- --sd-colour-primary-l--10: var(--sd-colour-primary-hs), 10%;
4631
- --sd-colour-primary-l--20: var(--sd-colour-primary-hs), 20%;
4632
- --sd-colour-primary-l--30: var(--sd-colour-primary-hs), 30%;
4633
- --sd-colour-primary-l--40: var(--sd-colour-primary-hs), 40%;
4634
- --sd-colour-primary-l--50: var(--sd-colour-primary-hs), 50%;
4635
- --sd-colour-primary-l--60: var(--sd-colour-primary-hs), 60%;
4636
- --sd-colour-primary-l--70: var(--sd-colour-primary-hs), 70%;
4637
- --sd-colour-primary-l--80: var(--sd-colour-primary-hs), 80%;
4638
- --sd-colour-primary-l--90: var(--sd-colour-primary-hs), 90%;
4639
- --sd-colour-primary-l--100: var(--sd-colour-primary-hs), 100%;
4640
- --sd-colour-success-hs: 120, 40%;
4641
- --sd-colour-success-l--10: var(--sd-colour-success-hs), 10%;
4642
- --sd-colour-success-l--20: var(--sd-colour-success-hs), 20%;
4643
- --sd-colour-success-l--30: var(--sd-colour-success-hs), 30%;
4644
- --sd-colour-success-l--40: var(--sd-colour-success-hs), 40%;
4645
- --sd-colour-success-l--50: var(--sd-colour-success-hs), 50%;
4646
- --sd-colour-success-l--60: var(--sd-colour-success-hs), 60%;
4647
- --sd-colour-success-l--70: var(--sd-colour-success-hs), 70%;
4648
- --sd-colour-success-l--80: var(--sd-colour-success-hs), 80%;
4649
- --sd-colour-success-l--90: var(--sd-colour-success-hs), 90%;
4650
- --sd-colour-success-l--100: var(--sd-colour-success-hs), 100%;
4651
- --sd-colour-alert-hs: 350, 70%;
4652
- --sd-colour-alert-l--10: var(--sd-colour-alert-hs), 10%;
4653
- --sd-colour-alert-l--20: var(--sd-colour-alert-hs), 20%;
4654
- --sd-colour-alert-l--30: var(--sd-colour-alert-hs), 30%;
4655
- --sd-colour-alert-l--40: var(--sd-colour-alert-hs), 40%;
4656
- --sd-colour-alert-l--50: var(--sd-colour-alert-hs), 50%;
4657
- --sd-colour-alert-l--60: var(--sd-colour-alert-hs), 60%;
4658
- --sd-colour-alert-l--70: var(--sd-colour-alert-hs), 70%;
4659
- --sd-colour-alert-l--80: var(--sd-colour-alert-hs), 80%;
4660
- --sd-colour-alert-l--90: var(--sd-colour-alert-hs), 90%;
4661
- --sd-colour-alert-l--100: var(--sd-colour-alert-hs), 100%;
4662
- --sd-colour-warning-hs: 35, 75%;
4663
- --sd-colour-warning-l--10: var(--sd-colour-warning-hs), 10%;
4664
- --sd-colour-warning-l--20: var(--sd-colour-warning-hs), 20%;
4665
- --sd-colour-warning-l--30: var(--sd-colour-warning-hs), 30%;
4666
- --sd-colour-warning-l--40: var(--sd-colour-warning-hs), 40%;
4667
- --sd-colour-warning-l--50: var(--sd-colour-warning-hs), 50%;
4668
- --sd-colour-warning-l--60: var(--sd-colour-warning-hs), 60%;
4669
- --sd-colour-warning-l--70: var(--sd-colour-warning-hs), 70%;
4670
- --sd-colour-warning-l--80: var(--sd-colour-warning-hs), 80%;
4671
- --sd-colour-warning-l--90: var(--sd-colour-warning-hs), 90%;
4672
- --sd-colour-warning-l--100: var(--sd-colour-warning-hs), 100%;
4673
- --sd-colour-highlight-hs: 290, 60%;
4674
- --sd-colour-highlight-l--10: var(--sd-colour-highlight-hs), 10%;
4675
- --sd-colour-highlight-l--20: var(--sd-colour-highlight-hs), 20%;
4676
- --sd-colour-highlight-l--30: var(--sd-colour-highlight-hs), 30%;
4677
- --sd-colour-highlight-l--40: var(--sd-colour-highlight-hs), 40%;
4678
- --sd-colour-highlight-l--50: var(--sd-colour-highlight-hs), 50%;
4679
- --sd-colour-highlight-l--60: var(--sd-colour-highlight-hs), 60%;
4680
- --sd-colour-highlight-l--70: var(--sd-colour-highlight-hs), 70%;
4681
- --sd-colour-highlight-l--80: var(--sd-colour-highlight-hs), 80%;
4682
- --sd-colour-highlight-l--90: var(--sd-colour-highlight-hs), 90%;
4683
- --sd-colour-highlight-l--100: var(--sd-colour-highlight-hs), 100%;
4684
- --sd-colour-neutral-hs: 214, 13%;
4685
- --sd-colour-neutral-l--10: var(--sd-colour-neutral-hs), 10%;
4686
- --sd-colour-neutral-l--20: var(--sd-colour-neutral-hs), 20%;
4687
- --sd-colour-neutral-l--30: var(--sd-colour-neutral-hs), 30%;
4688
- --sd-colour-neutral-l--40: var(--sd-colour-neutral-hs), 40%;
4689
- --sd-colour-neutral-l--50: var(--sd-colour-neutral-hs), 50%;
4690
- --sd-colour-neutral-l--60: var(--sd-colour-neutral-hs), 60%;
4691
- --sd-colour-neutral-l--70: var(--sd-colour-neutral-hs), 70%;
4692
- --sd-colour-neutral-l--80: var(--sd-colour-neutral-hs), 80%;
4693
- --sd-colour-neutral-l--90: var(--sd-colour-neutral-hs), 90%;
4694
- --sd-colour-neutral-l--100: var(--sd-colour-neutral-hs), 100%;
4695
- --sd-colour-superdesk-hs: 152, 71%;
4696
- --sd-colour-superdesk-l--10: var(--sd-colour-superdesk-hs), 10%;
4697
- --sd-colour-superdesk-l--20: var(--sd-colour-superdesk-hs), 20%;
4698
- --sd-colour-superdesk-l--30: var(--sd-colour-superdesk-hs), 30%;
4699
- --sd-colour-superdesk-l--40: var(--sd-colour-superdesk-hs), 40%;
4700
- --sd-colour-superdesk-l--50: var(--sd-colour-superdesk-hs), 50%;
4701
- --sd-colour-superdesk-l--60: var(--sd-colour-superdesk-hs), 60%;
4702
- --sd-colour-superdesk-l--70: var(--sd-colour-superdesk-hs), 70%;
4703
- --sd-colour-superdesk-l--80: var(--sd-colour-superdesk-hs), 80%;
4704
- --sd-colour-superdesk-l--90: var(--sd-colour-superdesk-hs), 90%;
4705
- --sd-colour-superdesk-l--100: var(--sd-colour-superdesk-hs), 100%;
4706
- --sd-colour-interactive: hsla(var(--sd-colour-interactive-l--50), 1);
4707
- --sd-colour-interactive--hover: hsla(var(--sd-colour-interactive-l--60), 1);
4708
- --sd-colour-interactive--active: hsla(var(--sd-colour-interactive-l--40), 1);
4709
- --sd-colour-interactive-btn-border: hsla(var(--sd-colour-interactive-l--50), 0.5);
4710
- --sd-colour-primary: hsla(var(--sd-colour-primary-l--50), 1);
4711
- --sd-colour-primary--hover: hsla(var(--sd-colour-primary-l--60), 1);
4712
- --sd-colour-primary--active: hsla(var(--sd-colour-primary-l--40), 1);
4713
- --sd-colour-primary-btn-border: hsla(var(--sd-colour-primary-l--50), 0.5);
4714
- --sd-colour-secondary: hsla(var(--sd-colour-secondary-l--50), 1);
4715
- --sd-colour-secondary--hover: hsla(var(--sd-colour-secondary-l--60), 1);
4716
- --sd-colour-secondary--active: hsla(var(--sd-colour-secondary-l--40), 1);
4717
- --sd-colour-secondary-btn-border: hsla(var(--sd-colour-secondary-l--50), 0.5);
4718
- --sd-colour-success: hsla(var(--sd-colour-success-l--50), 1);
4719
- --sd-colour-success--hover: hsla(var(--sd-colour-success-l--60), 1);
4720
- --sd-colour-success--active: hsla(var(--sd-colour-success-l--40), 1);
4721
- --sd-colour-success-btn-border: hsla(var(--sd-colour-success-l--50), 0.5);
4722
- --sd-colour-alert: hsla(var(--sd-colour-alert-l--50), 1);
4723
- --sd-colour-alert--hover: hsla(var(--sd-colour-alert-l--60), 1);
4724
- --sd-colour-alert--active: hsla(var(--sd-colour-alert-l--40), 1);
4725
- --sd-colour-alert-btn-border: hsla(var(--sd-colour-alert-l--50), 0.5);
4726
- --sd-colour-warning: hsla(var(--sd-colour-warning-l--50), 1);
4727
- --sd-colour-warning--hover: hsla(var(--sd-colour-warning-l--60), 1);
4728
- --sd-colour-warning--active: hsla(var(--sd-colour-warning-l--40), 1);
4729
- --sd-colour-warning-btn-border: hsla(var(--sd-colour-warning-l--50), 0.5);
4730
- --sd-colour-highlight: hsla(var(--sd-colour-highlight-l--50), 1);
4731
- --sd-colour-highlight--hover: hsla(var(--sd-colour-highlight-l--60), 1);
4732
- --sd-colour-highlight--active: hsla(var(--sd-colour-highlight-l--40), 1);
4733
- --sd-colour-highlight-btn-border: hsla(var(--sd-colour-highlight-l--50), 0.5);
4734
- --sd-colour-superdesk: hsla(var(--sd-colour-superdesk-l--40), 1);
4735
- --sd-colour-superdesk--hover: hsla(var(--sd-colour-superdesk-l--50), 1);
4736
- --sd-colour-superdesk--active: hsla(var(--sd-colour-superdesk-l--30), 1);
4737
- --sd-colour-superdesk-btn-border: hsla(var(--sd-colour-superdesk-l--40), 0.5);
4738
- --sd-colour-neutral: hsla(var(--sd-colour-neutral-l--50), 0.5);
4739
- --sd-colour-neutral--hover: hsla(var(--sd-colour-neutral-l--60), 0.5);
4740
- --sd-colour-neutral--active: hsla(var(--sd-colour-neutral-l--40), 0.5);
4741
- --sd-colour-neutral-btn-border: hsla(var(--sd-colour-neutral-l--40), 0.5);
4742
- --sd-colour-info: hsla(var(--sd-colour-info-l--50), 1);
4743
- --sd-colour-info--hover: hsla(var(--sd-colour-info-l--60), 1);
4744
- --sd-colour-info--active: hsla(var(--sd-colour-info-l--40), 1);
4745
- --sd-colour-btn-bg-neutral: hsla(var(--sd-colour-neutral-l--50), 0.4);
4746
- --sd-colour-btn-bg-neutral--hover: hsla(var(--sd-colour-neutral-l--60), 0.5);
4747
- --sd-colour-btn-bg-neutral--active: hsla(var(--sd-colour-neutral-l--40), 0.5);
4748
- --sd-colour-btn-txt-neutral: hsla(var(--sd-colour-neutral-l--40), 1);
4749
- --sd-colour-btn-border-neutral: hsla(var(--sd-colour-neutral-l--50), 0.5);
4750
- --sd-colour-alert-bg-neutral: hsla(var(--sd-colour-neutral-l--50), 0.25);
4751
- --sd-colour-interactive--alpha-10: hsla(var(--sd-colour-interactive-l--50), 0.1);
4752
- --sd-colour-interactive--alpha-20: hsla(var(--sd-colour-interactive-l--50), 0.2);
4753
- --sd-colour-interactive--alpha-30: hsla(var(--sd-colour-interactive-l--50), 0.3);
4754
- --sd-colour-interactive--alpha-40: hsla(var(--sd-colour-interactive-l--50), 0.4);
4755
- --sd-colour-interactive--alpha-50: hsla(var(--sd-colour-interactive-l--50), 0.5);
4756
- --sd-colour-interactive--alpha-60: hsla(var(--sd-colour-interactive-l--50), 0.6);
4757
- --sd-colour-interactive--alpha-70: hsla(var(--sd-colour-interactive-l--50), 0.7);
4758
- --sd-colour-interactive--alpha-80: hsla(var(--sd-colour-interactive-l--50), 0.8);
4759
- --sd-colour-interactive--alpha-90: hsla(var(--sd-colour-interactive-l--50), 0.9);
4760
- --sd-colour-interactive--lighten-10: hsla(var(--sd-colour-interactive-l--60), 1);
4761
- --sd-colour-interactive--lighten-20: hsla(var(--sd-colour-interactive-l--70), 1);
4762
- --sd-colour-interactive--lighten-30: hsla(var(--sd-colour-interactive-l--80), 1);
4763
- --sd-colour-interactive--lighten-40: hsla(var(--sd-colour-interactive-l--90), 1);
4764
- --sd-colour-interactive--lighten-45: hsla(var(--sd-colour-interactive-l--95), 1);
4765
- --sd-colour-interactive--darken-10: hsla(var(--sd-colour-interactive-l--40), 1);
4766
- --sd-colour-interactive--darken-20: hsla(var(--sd-colour-interactive-l--30), 1);
4767
- --sd-colour-interactive--darken-30: hsla(var(--sd-colour-interactive-l--20), 1);
4768
- --sd-colour-interactive--darken-40: hsla(var(--sd-colour-interactive-l--10), 1);
4769
- --sd-colour-interactive--darken-50: hsla(var(--sd-colour-interactive-l--05), 1);
4770
- --sd-colour-cool-grey-hs: 214, 13%;
4771
- --sd-colour-cool-grey-l--00: var(--sd-colour-cool-grey-hs), 0%;
4772
- --sd-colour-cool-grey-l--05: var(--sd-colour-cool-grey-hs), 8%;
4773
- --sd-colour-cool-grey-l--10: var(--sd-colour-cool-grey-hs), 12%;
4774
- --sd-colour-cool-grey-l--15: var(--sd-colour-cool-grey-hs), 16%;
4775
- --sd-colour-cool-grey-l--20: var(--sd-colour-cool-grey-hs), 20%;
4776
- --sd-colour-cool-grey-l--23: var(--sd-colour-cool-grey-hs), 22.5%;
4777
- --sd-colour-cool-grey-l--25: var(--sd-colour-cool-grey-hs), 25%;
4778
- --sd-colour-cool-grey-l--30: var(--sd-colour-cool-grey-hs), 30%;
4779
- --sd-colour-cool-grey-l--35: var(--sd-colour-cool-grey-hs), 35%;
4780
- --sd-colour-cool-grey-l--40: var(--sd-colour-cool-grey-hs), 40%;
4781
- --sd-colour-cool-grey-l--45: var(--sd-colour-cool-grey-hs), 45%;
4782
- --sd-colour-cool-grey-l--50: var(--sd-colour-cool-grey-hs), 50%;
4783
- --sd-colour-cool-grey-l--55: var(--sd-colour-cool-grey-hs), 55%;
4784
- --sd-colour-cool-grey-l--60: var(--sd-colour-cool-grey-hs), 60%;
4785
- --sd-colour-cool-grey-l--65: var(--sd-colour-cool-grey-hs), 65%;
4786
- --sd-colour-cool-grey-l--70: var(--sd-colour-cool-grey-hs), 70%;
4787
- --sd-colour-cool-grey-l--75: var(--sd-colour-cool-grey-hs), 75%;
4788
- --sd-colour-cool-grey-l--80: var(--sd-colour-cool-grey-hs), 80%;
4789
- --sd-colour-cool-grey-l--85: var(--sd-colour-cool-grey-hs), 85%;
4790
- --sd-colour-cool-grey-l--90: var(--sd-colour-cool-grey-hs), 92%;
4791
- --sd-colour-cool-grey-l--95: var(--sd-colour-cool-grey-hs), 96%;
4792
- --sd-colour-cool-grey-l--98: var(--sd-colour-cool-grey-hs), 98%;
4793
- --sd-colour-cool-grey-l--99: var(--sd-colour-cool-grey-hs), 100%;
4794
- --sd-colour-bg--00: hsla(var(--sd-colour-cool-grey-l--00), 1);
4795
- --sd-colour-bg--01: hsla(var(--sd-colour-cool-grey-l--05), 1);
4796
- --sd-colour-bg--02: hsla(var(--sd-colour-cool-grey-l--10), 1);
4797
- --sd-colour-bg--03: hsla(var(--sd-colour-cool-grey-l--15), 1);
4798
- --sd-colour-bg--04: hsla(var(--sd-colour-cool-grey-l--20), 1);
4799
- --sd-colour-bg--04-a: hsla(var(--sd-colour-cool-grey-l--23), 1);
4800
- --sd-colour-bg--05: hsla(var(--sd-colour-cool-grey-l--25), 1);
4801
- --sd-colour-bg--06: hsla(var(--sd-colour-cool-grey-l--30), 1);
4802
- --sd-colour-bg--07: hsla(var(--sd-colour-cool-grey-l--35), 1);
4803
- --sd-colour-bg--08: hsla(var(--sd-colour-cool-grey-l--40), 1);
4804
- --sd-colour-bg--09: hsla(var(--sd-colour-cool-grey-l--45), 1);
4805
- --sd-colour-bg--10: hsla(var(--sd-colour-cool-grey-l--50), 1);
4806
- --sd-colour-bg--20: hsla(var(--sd-colour-cool-grey-l--65), 1);
4807
- --sd-colour-bg--21: hsla(var(--sd-colour-cool-grey-l--70), 1);
4808
- --sd-colour-bg--22: hsla(var(--sd-colour-cool-grey-l--75), 1);
4809
- --sd-colour-bg--99: hsla(var(--sd-colour-cool-grey-l--99), 1);
4810
- --sd-colour-bg--99-a: hsla(var(--sd-colour-cool-grey-l--98), 1);
4811
- --sd-colour-bg--95: hsla(var(--sd-colour-cool-grey-l--95), 1);
4812
- --sd-colour-panel-bg--000: hsla(var(--sd-colour-cool-grey-l--99), 1);
4813
- --sd-colour-panel-bg--100: hsla(var(--sd-colour-cool-grey-l--95), 1);
4814
- --sd-colour-panel-bg--200: hsla(var(--sd-colour-cool-grey-l--90), 1);
4815
- --sd-colour-panel-bg--300: hsla(var(--sd-colour-cool-grey-l--85), 1);
4816
- --sd-colour-sidebar-menu--00: hsla(var(--sd-colour-cool-grey-l--85), 1);
4817
- --sd-colour-sidebar-menu--10: hsla(var(--sd-colour-cool-grey-l--80), 1);
4818
- --sd-colour-sidebar-menu--20: hsla(var(--sd-colour-cool-grey-l--75), 1);
4819
- --sd-colour-background__left-nav: var(--sd-colour-bg--99);
4820
- --sd-colour-top-menu: var(--sd-colour-bg--02);
4821
- --sd-colour-top-menu__btn: var(--sd-colour-bg--03);
4822
- --sd-colour-bottom-bar: var(--sd-colour-bg--01);
4823
- --sd-colour-line--x-light: hsla(var(--sd-colour-cool-grey-l--20), 0.1);
4824
- --sd-colour-line--light: hsla(var(--sd-colour-cool-grey-l--20), 0.16);
4825
- --sd-colour-line--medium: hsla(var(--sd-colour-cool-grey-l--20), 0.2);
4826
- --sd-colour-line--strong: hsla(var(--sd-colour-cool-grey-l--20), 0.48);
4827
- --sd-colour-bg-translucent--08: hsla(var(--sd-colour-cool-grey-l--50), 0.3);
4828
- --sd-colour-overlay-actioning: hsla(var(--sd-colour-cool-grey-l--99), 0.85);
4829
- --sd-colour-background__tooltip: var(--sd-colour-bg--02);
4830
- --sd-item__thumb-Bg: var(--sd-colour-bg--03);
4831
- --sd-item__main-Bg: var(--sd-colour-bg--99);
4832
- --sd-item__main-Bg--hover: var(--sd-colour-bg--95);
4833
- --sd-item__main-Bg--selected: var(--sd-colour-interactive--lighten-40);
4834
- --sd-item__main-Bg--activated: var(--sd-colour-interactive--lighten-45);
4835
- --sd-item__main-Bg--alternate: var(--sd-colour-bg--99-a);
4836
- --sd-colour-bg__grid-item--selected: var(--sd-colour-interactive--lighten-45);
4837
- --sd-colour-bg__sliding-toolbar: var(--sd-colour-interactive--lighten-40);
4838
- --sd-colour-bg__searchbar: var(--sd-colour-bg--99);
4839
- --color-dropdown-menu-Bg: var(--sd-colour-bg--99);
4840
- --color-modal-Bg: var(--sd-colour-bg--99);
4841
- --sd-colour--shadow-line: hsla(var(--sd-colour-cool-grey-l--70), 0);
4842
- --sd-shadow__subnav: 0 1px 0px var(--sd-colour--shadow-line), 0 1px 3px hsla(0, 0%, 0%, 0.07), 0 1px 0 0 hsla(0, 0%, 0%, 0.1);
4843
- --sd-shadow__item--selected: 0 0 0 2px var(--sd-colour-interactive), 0 0 0 5px var(--sd-colour-interactive--alpha-30);
4844
- --sd-colour__webkit-scrollbar--hover: hsla(214, 13%, 50%, 0.24);
4845
- --sd-colour__webkit-scrollbar-thumb: hsla(214, 13%, 70%, 0.32);
4846
- --sd-colour__webkit-scrollbar-thumb--hover: hsla(214, 13%, 70%, 0.48);
4847
- --sd-colour__side-menu--hover: var(--sd-colour-bg--95);
4848
- --sd-colour__splitter: var(--sd-colour-bg--05);
4849
- --sd-colour__dashboard-widget-Bg: hsla(214, 13%, 98%, 1);
4850
- --sd-colour__side-panel-border: var(--sd-colour-bg--20);
4851
- --sd-colour__tag-label-Bg--1: hsla(var(--sd-colour-cool-grey-l--55), 0.3);
4852
- --sd-colour__tag-label-Bg--2: hsla(var(--sd-colour-cool-grey-l--35), 0.45);
4853
- --sd-colour__tag-label-Bg--highlight-1: var(--sd-colour-interactive--alpha-40);
4854
- --sd-colour__tag-label-Bg--highlight-2: var(--sd-colour-interactive--alpha-70);
4855
- --sd-colour__tag-label-remove-Bg: hsla(var(--sd-colour-cool-grey-l--90), 0.35);
4856
- --sd-colour__tag-label-remove-Bg--hover: hsla(var(--sd-colour-cool-grey-l--90), 0.85);
4857
- --sd-colour-bg__photo-preview: hsla(var(--sd-colour-cool-grey-l--10), 1);
4858
- --sd-colour-bg__slide-in-column-inner: hsla(var(--sd-colour-cool-grey-l--20), 1);
4859
- --sd-colour-bg__button-nav-btn: hsla(var(--sd-colour-cool-grey-l--80), 0);
4860
- --sd-colour-bg__button-nav-btn--hover: hsla(var(--sd-colour-cool-grey-l--80), 0.5);
4861
- --sd-colour-bg__button-nav-btn--active: hsla(var(--sd-colour-cool-grey-l--60), 1);
4862
- --sd-colour-bg__desk-select: var(--sd-colour-interactive);
4863
- --sd-colour-bg__desk-select--worspace: hsla(306, 25%, 49%, 1);
4864
- --sd-colour__tag-label-Bg--inverse: var(--sd-colour-bg--08);
4865
- --sd-colour__tag-label-Txt--inverse: hsla(214, 13%, 98%, 1); }
4866
-
4867
- [data-theme="dark-ui"] {
4868
- --sd-colour-interactive-hs: 160, 50%;
4869
- --sd-colour-interactive-l--05: var(--sd-colour-interactive-hs), 6%;
4870
- --sd-colour-interactive-l--10: var(--sd-colour-interactive-hs), 10%;
4871
- --sd-colour-interactive-l--20: var(--sd-colour-interactive-hs), 20%;
4872
- --sd-colour-interactive-l--30: var(--sd-colour-interactive-hs), 30%;
4873
- --sd-colour-interactive-l--40: var(--sd-colour-interactive-hs), 40%;
4874
- --sd-colour-interactive-l--50: var(--sd-colour-interactive-hs), 50%;
4875
- --sd-colour-interactive-l--60: var(--sd-colour-interactive-hs), 60%;
4876
- --sd-colour-interactive-l--70: var(--sd-colour-interactive-hs), 70%;
4877
- --sd-colour-interactive-l--80: var(--sd-colour-interactive-hs), 80%;
4878
- --sd-colour-interactive-l--90: var(--sd-colour-interactive-hs), 90%;
4879
- --sd-colour-interactive-l--100: var(--sd-colour-interactive-hs), 100%;
4880
- --sd-colour-primary-hs: 160, 50%;
4881
- --sd-colour-primary-l--10: var(--sd-colour-primary-hs), 10%;
4882
- --sd-colour-primary-l--20: var(--sd-colour-primary-hs), 20%;
4883
- --sd-colour-primary-l--30: var(--sd-colour-primary-hs), 30%;
4884
- --sd-colour-primary-l--40: var(--sd-colour-primary-hs), 40%;
4885
- --sd-colour-primary-l--50: var(--sd-colour-primary-hs), 50%;
4886
- --sd-colour-primary-l--60: var(--sd-colour-primary-hs), 60%;
4887
- --sd-colour-primary-l--70: var(--sd-colour-primary-hs), 70%;
4888
- --sd-colour-primary-l--80: var(--sd-colour-primary-hs), 80%;
4889
- --sd-colour-primary-l--90: var(--sd-colour-primary-hs), 90%;
4890
- --sd-colour-primary-l--100: var(--sd-colour-primary-hs), 100%;
4891
- --sd-colour-interactive: hsla(var(--sd-colour-interactive-l--50), 1);
4892
- --sd-colour-interactive--hover: hsla(var(--sd-colour-interactive-l--60), 1);
4893
- --sd-colour-interactive--active: hsla(var(--sd-colour-interactive-l--40), 1);
4894
- --sd-colour-interactive-btn-border: hsla(var(--sd-colour-interactive-l--50), 0.5);
4895
- --sd-colour-primary: hsla(var(--sd-colour-primary-l--50), 1);
4896
- --sd-colour-primary--hover: hsla(var(--sd-colour-primary-l--60), 1);
4897
- --sd-colour-primary--active: hsla(var(--sd-colour-primary-l--40), 1);
4898
- --sd-colour-interactive--alpha-10: hsla(var(--sd-colour-interactive-l--50), 0.1);
4899
- --sd-colour-interactive--alpha-20: hsla(var(--sd-colour-interactive-l--50), 0.2);
4900
- --sd-colour-interactive--alpha-30: hsla(var(--sd-colour-interactive-l--50), 0.3);
4901
- --sd-colour-interactive--alpha-40: hsla(var(--sd-colour-interactive-l--50), 0.4);
4902
- --sd-colour-interactive--alpha-50: hsla(var(--sd-colour-interactive-l--50), 0.5);
4903
- --sd-colour-interactive--alpha-60: hsla(var(--sd-colour-interactive-l--50), 0.6);
4904
- --sd-colour-interactive--alpha-70: hsla(var(--sd-colour-interactive-l--50), 0.7);
4905
- --sd-colour-interactive--alpha-80: hsla(var(--sd-colour-interactive-l--50), 0.8);
4906
- --sd-colour-interactive--alpha-90: hsla(var(--sd-colour-interactive-l--50), 0.9);
4907
- --sd-colour-interactive--lighten-10: hsla(var(--sd-colour-interactive-l--60), 1);
4908
- --sd-colour-interactive--lighten-20: hsla(var(--sd-colour-interactive-l--70), 1);
4909
- --sd-colour-interactive--lighten-30: hsla(var(--sd-colour-interactive-l--80), 1);
4910
- --sd-colour-interactive--lighten-40: hsla(var(--sd-colour-interactive-l--90), 1);
4911
- --sd-colour-interactive--darken-10: hsla(var(--sd-colour-interactive-l--40), 1);
4912
- --sd-colour-interactive--darken-20: hsla(var(--sd-colour-interactive-l--30), 1);
4913
- --sd-colour-interactive--darken-30: hsla(var(--sd-colour-interactive-l--20), 1);
4914
- --sd-colour-interactive--darken-40: hsla(var(--sd-colour-interactive-l--10), 1);
4915
- --sd-colour-interactive--darken-50: hsla(var(--sd-colour-interactive-l--05), 1);
4916
- --sd-colour-btn-txt-neutral: hsla(var(--sd-colour-neutral-l--80), 1);
4917
- --sd-colour--shadow-line: hsla(var(--sd-colour-cool-grey-l--75), 0.2);
4918
- --sd-colour-panel-bg--000: hsla(var(--sd-colour-cool-grey-l--10), 1);
4919
- --sd-colour-panel-bg--100: hsla(var(--sd-colour-cool-grey-l--15), 1);
4920
- --sd-colour-panel-bg--200: hsla(var(--sd-colour-cool-grey-l--20), 1);
4921
- --sd-colour-panel-bg--300: hsla(var(--sd-colour-cool-grey-l--25), 1);
4922
- --sd-colour-sidebar-menu--00: hsla(var(--sd-colour-cool-grey-l--25), 1);
4923
- --sd-colour-sidebar-menu--10: hsla(var(--sd-colour-cool-grey-l--30), 1);
4924
- --sd-colour-sidebar-menu--20: hsla(var(--sd-colour-cool-grey-l--35), 1);
4925
- --sd-colour-background__left-nav: var(--sd-colour-bg--04);
4926
- --sd-colour-top-menu: var(--sd-colour-bg--02);
4927
- --sd-colour-top-menu__btn: var(--sd-colour-bg--03);
4928
- --sd-colour-line--x-light: hsla(var(--sd-colour-cool-grey-l--70), 0.1);
4929
- --sd-colour-line--light: hsla(var(--sd-colour-cool-grey-l--70), 0.16);
4930
- --sd-colour-line--medium: hsla(var(--sd-colour-cool-grey-l--70), 0.2);
4931
- --sd-colour-line--strong: hsla(var(--sd-colour-cool-grey-l--70), 0.48);
4932
- --sd-colour-bg-translucent--08: hsla(var(--sd-colour-cool-grey-l--50), 0.3);
4933
- --sd-colour-background__tooltip: var(--sd-colour-bg--10);
4934
- --sd-item__thumb-Bg: var(--sd-colour-bg--02);
4935
- --sd-item__main-Bg: var(--sd-colour-bg--04);
4936
- --sd-item__main-Bg--hover: var(--sd-colour-bg--05);
4937
- --sd-item__main-Bg--selected: var(--sd-colour-interactive--darken-30);
4938
- --sd-item__main-Bg--activated: var(--sd-colour-interactive--darken-40);
4939
- --sd-item__main-Bg--alternate: var(--sd-colour-bg--04-a);
4940
- --sd-colour-bg__grid-item--selected: var(--sd-colour-bg--04);
4941
- --sd-colour-bg__sliding-toolbar: var(--sd-colour-interactive--darken-30);
4942
- --sd-colour-bg__searchbar: var(--sd-colour-bg--02);
4943
- --sd-colour-overlay-actioning: hsla(var(--sd-colour-cool-grey-l--20), 0.85);
4944
- --color-dropdown-menu-Bg: var(--sd-colour-bg--05);
4945
- --color-modal-Bg: var(--sd-colour-bg--05);
4946
- --sd-colour--shadow-line: hsla(var(--sd-colour-cool-grey-l--70), 0.12);
4947
- --sd-shadow__subnav: 0 1px 0px var(--sd-colour--shadow-line), 0 1px 3px hsla(0, 0%, 0%, 0.14), 0 2px 0 0 hsla(0, 0%, 0%, 0.12);
4948
- --sd-shadow__item--selected: 0 0 0 2px var(--sd-colour-interactive), 0 0 0 5px var(--sd-colour-interactive--alpha-30);
4949
- --sd-colour__webkit-scrollbar--hover: hsla(214, 13%, 30%, 0.24);
4950
- --sd-colour__webkit-scrollbar-thumb: hsla(214, 13%, 30%, 0.32);
4951
- --sd-colour__webkit-scrollbar-thumb--hover: hsla(214, 13%, 34%, 0.48);
4952
- --sd-colour__side-menu--hover: var(--sd-colour-bg--02);
4953
- --sd-colour__splitter: var(--sd-colour-bg--10);
4954
- --sd-colour__dashboard-widget-Bg: hsla(214, 13%, 18%, 1);
4955
- --sd-colour__side-panel-border: var(--sd-colour-bg--05);
4956
- --sd-colour__tag-label-Bg--1: hsla(var(--sd-colour-cool-grey-l--40), 0.3);
4957
- --sd-colour__tag-label-Bg--2: hsla(var(--sd-colour-cool-grey-l--55), 0.45);
4958
- --sd-colour__tag-label-Bg--highlight-1: var(--sd-colour-interactive--alpha-30);
4959
- --sd-colour__tag-label-Bg--highlight-2: var(--sd-colour-interactive--alpha-60);
4960
- --sd-colour__tag-label-remove-Bg: hsla(var(--sd-colour-cool-grey-l--10), 0.35);
4961
- --sd-colour__tag-label-remove-Bg--hover: hsla(var(--sd-colour-cool-grey-l--10), 0.75);
4962
- --sd-colour-bg__button-nav-btn: hsla(var(--sd-colour-cool-grey-l--40), 0);
4963
- --sd-colour-bg__button-nav-btn--hover: hsla(var(--sd-colour-cool-grey-l--40), 0.25);
4964
- --sd-colour-bg__button-nav-btn--active: hsla(var(--sd-colour-cool-grey-l--10), 0.5);
4965
- --sd-colour-bg__desk-select: hsla(160, 50%, 50%, 0.20);
4966
- --sd-colour-bg__desk-select--worspace: hsla(306, 25%, 49%, 0.28);
4967
- --sd-colour__tag-label-Bg--inverse: hsla(214, 13%, 55%, 0.95);
4968
- --sd-colour__tag-label-Txt--inverse: hsla(214, 13%, 10%, 1); }
4969
-
4970
- [data-theme="accessible-light-ui"] {
4971
- --sd-colour-interactive-hs: 241, 100%;
4972
- --sd-colour-interactive-l--05: var(--sd-colour-interactive-hs), 6%;
4973
- --sd-colour-interactive-l--10: var(--sd-colour-interactive-hs), 10%;
4974
- --sd-colour-interactive-l--20: var(--sd-colour-interactive-hs), 20%;
4975
- --sd-colour-interactive-l--30: var(--sd-colour-interactive-hs), 30%;
4976
- --sd-colour-interactive-l--40: var(--sd-colour-interactive-hs), 40%;
4977
- --sd-colour-interactive-l--50: var(--sd-colour-interactive-hs), 50%;
4978
- --sd-colour-interactive-l--60: var(--sd-colour-interactive-hs), 60%;
4979
- --sd-colour-interactive-l--70: var(--sd-colour-interactive-hs), 70%;
4980
- --sd-colour-interactive-l--80: var(--sd-colour-interactive-hs), 80%;
4981
- --sd-colour-interactive-l--90: var(--sd-colour-interactive-hs), 90%;
4982
- --sd-colour-interactive-l--100: var(--sd-colour-interactive-hs), 100%;
4983
- --sd-colour-interactive--alpha-10: hsla(var(--sd-colour-interactive-l--50), 0.1);
4984
- --sd-colour-interactive--alpha-20: hsla(var(--sd-colour-interactive-l--50), 0.2);
4985
- --sd-colour-interactive--alpha-30: hsla(var(--sd-colour-interactive-l--50), 0.3);
4986
- --sd-colour-interactive--alpha-40: hsla(var(--sd-colour-interactive-l--50), 0.4);
4987
- --sd-colour-interactive--alpha-50: hsla(var(--sd-colour-interactive-l--50), 0.5);
4988
- --sd-colour-interactive--alpha-60: hsla(var(--sd-colour-interactive-l--50), 0.6);
4989
- --sd-colour-interactive--alpha-70: hsla(var(--sd-colour-interactive-l--50), 0.7);
4990
- --sd-colour-interactive--alpha-80: hsla(var(--sd-colour-interactive-l--50), 0.8);
4991
- --sd-colour-interactive--alpha-90: hsla(var(--sd-colour-interactive-l--50), 0.9);
4992
- --sd-colour-interactive--lighten-10: hsla(var(--sd-colour-neutral-l--60), 1);
4993
- --sd-colour-interactive--lighten-20: hsla(var(--sd-colour-neutral-l--70), 1);
4994
- --sd-colour-interactive--lighten-30: hsla(var(--sd-colour-neutral-l--80), 1);
4995
- --sd-colour-interactive--lighten-40: hsla(var(--sd-colour-neutral-l--90), 1);
4996
- --sd-colour-interactive--darken-10: hsla(var(--sd-colour-neutral-l--40), 1);
4997
- --sd-colour-interactive--darken-20: hsla(var(--sd-colour-neutral-l--30), 1);
4998
- --sd-colour-interactive--darken-30: hsla(var(--sd-colour-neutral-l--20), 1);
4999
- --sd-colour-interactive--darken-40: hsla(var(--sd-colour-neutral-l--10), 1);
5000
- --sd-colour-interactive--darken-50: hsla(var(--sd-colour-neutral-l--05), 1);
5001
- --sd-colour-interactive: hsla(var(--sd-colour-interactive-l--50), 1);
5002
- --sd-colour-interactive--hover: hsla(var(--sd-colour-interactive-l--60), 1);
5003
- --sd-colour-interactive--active: hsla(var(--sd-colour-interactive-l--40), 1);
5004
- --sd-colour-interactive-btn-border: hsla(var(--sd-colour-interactive-l--50), 0.5); }
5005
-
5006
- :root, [data-theme="light-ui"] {
5007
- --sd-colour-background__main-list: hsla(0, 0%, 97%, 1);
5008
- --sd-colour-background__base--00: hsla(0, 0%, 100%, 1);
5009
- --sd-colour-background__base--10: hsla(0, 0%, 90%, 1);
5010
- --sd-colour-background__base--20: hsla(0, 0%, 80%, 1);
5011
- --sd-colour-background__base--30: hsla(0, 0%, 70%, 1);
5012
- --color-text: hsla(0, 0%, 20%, 1);
5013
- --color-text--inverse: hsla(0, 0%, 98%, 1);
5014
- --color-text-light: hsla(214, 13%, 20%, 0.75);
5015
- --color-text-lighter: hsla(214, 13%, 20%, 0.55);
5016
- --color-icon-default: hsla(0, 0%, 20%, 1);
5017
- --sd-slugline-color: hsla(197, 100%, 25%, 1);
5018
- --color-input-bg: hsla(214, 13%, 50%, 0.1);
5019
- --color-input-bg--hover: hsla(214, 13%, 50%, 0.16);
5020
- --color-input-bg--focus: var(--sd-colour-interactive--alpha-20);
5021
- --color-label-text: hsla(214, 13%, 45%, 1);
5022
- --color-input-border: hsla(214, 13%, 10%, 0.2);
5023
- --color-input-border-hover: hsla(214, 13%, 10%, 0.35);
5024
- --color-form-bg: hsla(0, 0%, 100%, 0);
5025
- --color-checkbox-border: hsla(0, 0%, 0%, 0.2);
5026
- --color-checkbox-border-hover: hsla(0, 0%, 0%, 0.4);
5027
- --color-selected-bg: hsla(196, 35%, 94%, 1);
5028
- --color-selected-bg--hover: hsla(198, 36%, 91%, 1);
5029
- --color-bg-00: hsla(0, 0%, 100%, 1);
5030
- --color-bg-50: hsla(0, 0%, 97%, 1);
5031
- --color-bg-100: hsla(0, 0%, 93%, 1);
5032
- --color-bg-150: hsla(0, 0%, 87%, 1);
5033
- --color-bg-200: hsla(0, 0%, 63%, 1);
5034
- --color-bg-800: hsla(0, 0%, 17%, 1);
5035
- --color-kanban-border: hsla(0, 0%, 30%, 1);
5036
- --color-inset-search-bg: hsla(0, 0%, 100%, 1);
5037
- --color-inset-search-border: hsla(0, 0%, 0%, 0.2);
5038
- --color-inset-search-border-hover: hsla(0, 0%, 0%, 0.35);
5039
- --color-assignment-to-do: hsla(4, 89%, 41%, 1);
5040
- --color-assignment-progress: hsla(36, 100%, 41%, 1);
5041
- --color-assignment-completed: hsla(88, 50%, 44%, 1);
5042
- --color-grid-item-Bg: hsla(0, 0%, 100%, 1);
5043
- --color-dropdown-menu-text: hsla(0, 0%, 20%, 1);
5044
- --color-navbutton-dropdown-open-bg: hsla(0, 0%, 100%);
5045
- --color-border-line--light: hsla(0, 0%, 90%, 1);
5046
- --color-border-line--medium: hsla(0, 0%, 80%, 1);
5047
- --color-subnav-bg--00: hsla(0, 0%, 96%, 1);
5048
- --color-subnav-bg--10: hsla(0, 0%, 87%, 1);
5049
- --color-subnav-bg--blueGrey-00: hsla(200, 18%, 46%, 1);
5050
- --color-subnav-bg--blueGrey-10: hsla(200, 18%, 37%, 1);
5051
- --color-navbutton-bg-hover: hsla(0, 0%, 0%, 0.05);
5052
- --color-navbutton-bg-active: hsla(0, 0%, 100%);
5053
- --color-navbutton-bg-100: hsla(0, 0%, 0%, 0.06);
5054
- --color-navbutton-bg-100-hover: hsla(0, 0%, 0%, 0.12); }
5055
-
5056
- [data-theme="dark-ui"], .dark-ui {
5057
- --sd-colour-test-1: hsl(308, 71%, 40%);
5058
- --sd-colour-test-2: hsl(9, 59%, 49%);
5059
- --sd-colour-background__main-list: hsla(0, 0%, 12%, 1);
5060
- --sd-colour-background__base--00: hsla(0, 0%, 0%, 1);
5061
- --sd-colour-background__base--10: hsla(0, 0%, 10%, 1);
5062
- --sd-colour-background__base--20: hsla(0, 0%, 20%, 1);
5063
- --sd-colour-background__base--30: hsla(0, 0%, 30%, 1);
5064
- --color-text: hsla(0, 0%, 96%, 1);
5065
- --color-text-light: hsla(214, 13%, 96%, 0.75);
5066
- --color-text-lighter: hsla(214, 13%, 96%, 0.55);
5067
- --color-icon-default: hsla(214, 13%, 96%, 0.45);
5068
- --sd-slugline-color: hsla(197, 60%, 75%, 1);
5069
- --color-label-text: hsla(214, 13%, 80%, 1);
5070
- --color-input-bg: hsla(214, 13%, 80%, 0.08);
5071
- --color-input-bg--hover: hsla(214, 13%, 70%, 0.12);
5072
- --color-input-bg--focus: var(--sd-colour-interactive--alpha-20);
5073
- --color-input-border: hsla(214, 13%, 80%, 0.2);
5074
- --color-input-border-hover: hsla(214, 13%, 80%, 0.5);
5075
- --color-form-bg: hsla(0, 0%, 23%, 1);
5076
- --color-checkbox-border: hsla(0, 0%, 100%, 0.2);
5077
- --color-checkbox-border-hover: hsla(0, 0%, 100%, 0.4);
5078
- --color-selected-bg: hsla(200, 5%, 22%, 1);
5079
- --color-selected-bg--hover: hsla(202, 9%, 25%, 1);
5080
- --color-bg-00: hsla(0, 0%, 7%, 1);
5081
- --color-bg-50: hsla(0, 0%, 25%, 1);
5082
- --color-bg-100: hsla(0, 0%, 23%, 1);
5083
- --color-bg-150: hsla(0, 0%, 19%, 1);
5084
- --color-bg-200: hsla(0, 0%, 28%, 1);
5085
- --color-bg-800: hsla(0, 0%, 13%, 1);
5086
- --color-kanban-border: hsla(0, 0%, 56%, 1);
5087
- --color-inset-search-bg: hsla(0, 0%, 0%, 0.2);
5088
- --color-inset-search-border: hsla(0, 0%, 100%, 0.35);
5089
- --color-inset-search-border-hover: hsla(0, 0%, 100%, 0.55);
5090
- --color-grid-item-Bg: hsla(0, 0%, 20%, 1);
5091
- --color-dropdown-menu-text: hsla(0, 0%, 90%, 1);
5092
- --color-navbutton-dropdown-open-bg: hsla(0, 0%, 16%, 1);
5093
- --color-border-line--light: hsla(0, 0%, 100%, 0.1);
5094
- --color-border-line--medium: hsla(0, 0%, 100%, 0.2);
5095
- --color-subnav-bg--00: hsla(0, 0%, 16%, 1);
5096
- --color-subnav-bg--10: hsla(0, 0%, 32%, 1);
5097
- --color-subnav-bg--blueGrey-00: hsla(200, 18%, 46%, 1);
5098
- --color-subnav-bg--blueGrey-10: hsla(200, 18%, 37%, 1);
5099
- --color-navbutton-bg-hover: hsla(0, 0%, 0%, 0.1);
5100
- --color-navbutton-bg-active: hsla(0, 0%, 100%, 0.08);
5101
- --color-navbutton-bg-100: hsla(0, 0%, 0%, 0.1);
5102
- --color-navbutton-bg-100-hover: hsla(0, 0%, 0%, 0.2); }
5103
- [data-theme="dark-ui"] [class^="big-icon--"],
5104
- [data-theme="dark-ui"] [class*=" big-icon--"], .dark-ui [class^="big-icon--"],
5105
- .dark-ui [class*=" big-icon--"] {
5106
- color: var(--color-text); }
5107
-
5108
4305
  .red--100 {
5109
4306
  background-color: #fde4e2; }
5110
4307
 
@@ -7385,329 +6582,6 @@ pre[class*="language-"] {
7385
6582
  .text-blue-grey--500 {
7386
6583
  color: #607c8a; }
7387
6584
 
7388
- .sd-top-menu .navbtn, .sd-top-menu .sd-navbtn, #top-menu .navbtn, #top-menu .sd-navbtn {
7389
- --color-navbutton-border: hsla(214, 13%, 70%, 0.1) !important;
7390
- --sd-colour-line--x-light: hsla(214, 13%, 70%, 0.1) !important; }
7391
-
7392
- [data-theme="accessible-light-ui"] {
7393
- --font-size-large: 1.5rem;
7394
- --color-accessible-text: hsla(0, 0%, 7%, 1);
7395
- --sd-slugline-color: hsla(241, 100%, 50%, 1);
7396
- --color-input-bg: hsla(0, 0%, 0%, 0.05);
7397
- --color-input-bg--hover: hsla(0, 0%, 0%, 0.08);
7398
- --color-input-bg--focus: hsla(198, 49%, 58%, 0.14);
7399
- --color-label-text: hsla(0, 0%, 25%, 1);
7400
- --color-input-border: hsla(0, 0%, 0%, 0.35);
7401
- --color-input-border-hover: hsla(0, 0%, 0%, 0.8);
7402
- --color-form-bg: hsla(0, 0%, 100%, 0);
7403
- --color-text: hsla(0, 0%, 0%, 1);
7404
- --color-selected-bg: hsla(196, 35%, 94%, 1);
7405
- --color-selected-bg--hover: hsl(198, 36%, 91%, 1);
7406
- --color-bg-00: hsla(0, 0%, 100%, 1);
7407
- --color-bg-50: hsla(0, 0%, 97%, 1);
7408
- --color-bg-100: hsla(0, 0%, 93%, 1);
7409
- --color-bg-150: hsla(0, 0%, 87%, 1);
7410
- --color-bg-200: hsla(0, 0%, 63%, 1);
7411
- --color-bg-800: hsla(0, 0%, 17%, 1);
7412
- --color-accessible-primary: hsla(241, 100%, 50%, 1); }
7413
- [data-theme="accessible-light-ui"] [class^="icon-"],
7414
- [data-theme="accessible-light-ui"] [class*=" icon-"],
7415
- [data-theme="accessible-light-ui"] [class^="big-icon--"],
7416
- [data-theme="accessible-light-ui"] [class*=" big-icon--"] {
7417
- color: black; }
7418
- [data-theme="accessible-light-ui"] .sd-checkbox--button-style {
7419
- color: #121212; }
7420
- [data-theme="accessible-light-ui"] .sd-checkbox--button-style.checked,
7421
- [data-theme="accessible-light-ui"] .sd-checkbox--button-style[checked="checked"] {
7422
- background-color: var(--color-accessible-primary);
7423
- border-color: var(--color-accessible-primary);
7424
- border-top-color: #020156;
7425
- color: white; }
7426
- [data-theme="accessible-light-ui"] .sd-checkbox--button-style.checked:hover,
7427
- [data-theme="accessible-light-ui"] .sd-checkbox--button-style[checked="checked"]:hover {
7428
- background-color: #030165;
7429
- border-color: #030165;
7430
- border-top-color: #010038; }
7431
- [data-theme="accessible-light-ui"] .sd-create-btn .circle {
7432
- background-color: var(--color-accessible-primary); }
7433
- [data-theme="accessible-light-ui"] .navbtn.navbtn--active {
7434
- background-color: #454545;
7435
- color: #fff; }
7436
- [data-theme="accessible-light-ui"] .btn {
7437
- color: var(--color-accessible-text);
7438
- font-weight: 600;
7439
- font-size: 1.4rem; }
7440
- [data-theme="accessible-light-ui"] .btn.btn--primary {
7441
- background-color: var(--color-accessible-primary);
7442
- color: #fff; }
7443
- [data-theme="accessible-light-ui"] .btn.btn--hollow {
7444
- background-color: #fff; }
7445
- [data-theme="accessible-light-ui"] .sd-list-item {
7446
- font-size: 1.5rem; }
7447
- [data-theme="accessible-light-ui"] .sd-list-item .sd-list-item__slugline {
7448
- font-size: 1.3rem; }
7449
- [data-theme="accessible-light-ui"] .sd-list-item time {
7450
- color: #474747;
7451
- font-weight: 400; }
7452
- [data-theme="accessible-light-ui"] .badge {
7453
- font-size: 1.2rem;
7454
- line-height: 1.1em;
7455
- font-weight: 600; }
7456
- [data-theme="accessible-light-ui"] .side-panel {
7457
- background-color: #fff;
7458
- color: var(--color-accessible-text); }
7459
- [data-theme="accessible-light-ui"] .side-panel .side-panel__header {
7460
- background-color: #fff; }
7461
- [data-theme="accessible-light-ui"] .side-panel .side-panel__heading {
7462
- font-weight: 500;
7463
- color: var(--color-accessible-text); }
7464
- [data-theme="accessible-light-ui"] .side-panel p {
7465
- font-size: 1.6rem;
7466
- line-height: 1.5;
7467
- color: var(--color-accessible-text); }
7468
- [data-theme="accessible-light-ui"] .side-panel .sd-text__date-and-author {
7469
- font-size: 1.4rem; }
7470
- [data-theme="accessible-light-ui"] .side-panel .sd-text__date-and-author time {
7471
- font-weight: 400;
7472
- color: #595959; }
7473
- [data-theme="accessible-light-ui"] .side-panel.side-panel--dark-ui {
7474
- background-color: var(--color-bg-800);
7475
- color: #fff; }
7476
- [data-theme="accessible-light-ui"] .side-panel.side-panel--dark-ui i[class^="icon-"] {
7477
- color: #fff; }
7478
- [data-theme="accessible-light-ui"] .side-panel.side-panel--dark-ui .side-panel__header {
7479
- background-color: var(--color-bg-800);
7480
- color: #fff !important; }
7481
- [data-theme="accessible-light-ui"] .side-panel.side-panel--dark-ui .side-panel__header i[class^="icon-"] {
7482
- color: #fff !important; }
7483
- [data-theme="accessible-light-ui"] .sd-input .sd-input__label {
7484
- font-weight: 600;
7485
- font-size: 1.2rem; }
7486
- [data-theme="accessible-light-ui"] .sd-input .sd-input__input,
7487
- [data-theme="accessible-light-ui"] .sd-input .sd-input__select {
7488
- font-size: 1.5rem; }
7489
- [data-theme="accessible-light-ui"] .sd-input .sd-input__hint,
7490
- [data-theme="accessible-light-ui"] .sd-input .sd-input__message {
7491
- font-size: 1.4rem;
7492
- margin: 0.8rem 0; }
7493
- [data-theme="accessible-light-ui"] .sd-input .sd-input__hint {
7494
- color: #454545; }
7495
- [data-theme="accessible-light-ui"] .form-label {
7496
- font-size: 1.2rem;
7497
- font-weight: 500; }
7498
- [data-theme="accessible-light-ui"] .form-label.form-label--light {
7499
- color: #525252; }
7500
- [data-theme="accessible-light-ui"] .navbtn {
7501
- color: #111; }
7502
- [data-theme="accessible-light-ui"] .navbtn [class^="icon-"], [data-theme="accessible-light-ui"] .navbtn [class*=" icon-"] {
7503
- color: currentColor; }
7504
- [data-theme="accessible-light-ui"] .dropdown__menu-label {
7505
- font-size: 1.2rem;
7506
- color: #595959; }
7507
- [data-theme="accessible-light-ui"] .dropdown__toggle:active,
7508
- [data-theme="accessible-light-ui"] .dropdown.open .dropdown__toggle {
7509
- color: var(--color-accessible-primary); }
7510
- [data-theme="accessible-light-ui"] .dropdown__menu li a:not(.btn),
7511
- [data-theme="accessible-light-ui"] .dropdown__menu li button:not(.btn):not(.dropdown__menu-close):not(.toggle-button),
7512
- [data-theme="accessible-light-ui"] .dropdown__menu .dropdown__menu-item a:not(.btn),
7513
- [data-theme="accessible-light-ui"] .dropdown__menu .dropdown__menu-item button:not(.btn):not(.dropdown__menu-close):not(.toggle-button) {
7514
- font-size: 1.5rem;
7515
- font-weight: 500;
7516
- color: currentColor; }
7517
- [data-theme="accessible-light-ui"] .dropdown__menu li a:not(.btn):hover,
7518
- [data-theme="accessible-light-ui"] .dropdown__menu li a:not(.btn):focus,
7519
- [data-theme="accessible-light-ui"] .dropdown__menu li button:not(.btn):not(.dropdown__menu-close):not(.toggle-button):hover,
7520
- [data-theme="accessible-light-ui"] .dropdown__menu li button:not(.btn):not(.dropdown__menu-close):not(.toggle-button):focus,
7521
- [data-theme="accessible-light-ui"] .dropdown__menu .dropdown__menu-item a:not(.btn):hover,
7522
- [data-theme="accessible-light-ui"] .dropdown__menu .dropdown__menu-item a:not(.btn):focus,
7523
- [data-theme="accessible-light-ui"] .dropdown__menu .dropdown__menu-item button:not(.btn):not(.dropdown__menu-close):not(.toggle-button):hover,
7524
- [data-theme="accessible-light-ui"] .dropdown__menu .dropdown__menu-item button:not(.btn):not(.dropdown__menu-close):not(.toggle-button):focus {
7525
- background: var(--color-accessible-primary);
7526
- color: #fff; }
7527
- [data-theme="accessible-light-ui"] .dropdown__menu li a:not(.btn):hover > i[class^="icon-"],
7528
- [data-theme="accessible-light-ui"] .dropdown__menu li a:not(.btn):focus > i[class^="icon-"],
7529
- [data-theme="accessible-light-ui"] .dropdown__menu li button:not(.btn):not(.dropdown__menu-close):not(.toggle-button):hover > i[class^="icon-"],
7530
- [data-theme="accessible-light-ui"] .dropdown__menu li button:not(.btn):not(.dropdown__menu-close):not(.toggle-button):focus > i[class^="icon-"],
7531
- [data-theme="accessible-light-ui"] .dropdown__menu .dropdown__menu-item a:not(.btn):hover > i[class^="icon-"],
7532
- [data-theme="accessible-light-ui"] .dropdown__menu .dropdown__menu-item a:not(.btn):focus > i[class^="icon-"],
7533
- [data-theme="accessible-light-ui"] .dropdown__menu .dropdown__menu-item button:not(.btn):not(.dropdown__menu-close):not(.toggle-button):hover > i[class^="icon-"],
7534
- [data-theme="accessible-light-ui"] .dropdown__menu .dropdown__menu-item button:not(.btn):not(.dropdown__menu-close):not(.toggle-button):focus > i[class^="icon-"] {
7535
- color: #fff; }
7536
- [data-theme="accessible-light-ui"] .dropdown.open .navbtn > i {
7537
- color: var(--color-accessible-primary); }
7538
- [data-theme="accessible-light-ui"] .sd-text__slugline,
7539
- [data-theme="accessible-light-ui"] p.sd-text__slugline {
7540
- color: var(--color-accessible-primary) !important; }
7541
- [data-theme="accessible-light-ui"] .toggle-box--circle .toggle-box__chevron {
7542
- background-color: rgba(122, 122, 122, 0.5);
7543
- height: 2rem;
7544
- width: 2rem; }
7545
- [data-theme="accessible-light-ui"] .toggle-box__label {
7546
- font-size: 1.4rem;
7547
- color: var(--color-label-text);
7548
- font-weight: 500; }
7549
- [data-theme="accessible-light-ui"] .sd-grid-item time {
7550
- color: #474747;
7551
- font-size: 1.3rem;
7552
- font-weight: 400; }
7553
- [data-theme="accessible-light-ui"] .sd-grid-item .sd-grid-item__slugline {
7554
- font-size: 1.2rem; }
7555
- [data-theme="accessible-light-ui"] .nav-tabs .nav-tabs__link {
7556
- font-size: 1.6rem;
7557
- font-weight: 500; }
7558
- [data-theme="accessible-light-ui"] .nav-tabs--big .nav-tabs__link {
7559
- font-size: 2rem; }
7560
- [data-theme="accessible-light-ui"] .nav-tabs__tab--active .nav-tabs__link,
7561
- [data-theme="accessible-light-ui"] .nav-tabs__tab--active:hover .nav-tabs__link {
7562
- border-bottom-color: var(--color-accessible-primary);
7563
- color: var(--color-accessible-text); }
7564
- [data-theme="accessible-light-ui"] .side-panel.side-panel--dark-ui .nav-tabs__tab .nav-tabs__link {
7565
- border-bottom-color: transparent;
7566
- color: #fff;
7567
- opacity: 0.6; }
7568
- [data-theme="accessible-light-ui"] .side-panel.side-panel--dark-ui .nav-tabs__tab:hover .nav-tabs__link {
7569
- border-bottom-color: rgba(255, 255, 255, 0.25);
7570
- opacity: 1; }
7571
- [data-theme="accessible-light-ui"] .side-panel.side-panel--dark-ui .nav-tabs__tab.nav-tabs__tab--active .nav-tabs__link, [data-theme="accessible-light-ui"] .side-panel.side-panel--dark-ui .nav-tabs__tab.nav-tabs__tab--active:hover .nav-tabs__link {
7572
- border-bottom-color: #4d4dff;
7573
- color: #fff;
7574
- opacity: 1; }
7575
- [data-theme="accessible-light-ui"] .side-panel.side-panel--dark-ui .toggle-box__label {
7576
- color: #fff; }
7577
- [data-theme="accessible-light-ui"] .side-panel.side-panel--dark-ui .sd-line-input .sd-line-input__label {
7578
- color: #fff;
7579
- opacity: 0.7; }
7580
- [data-theme="accessible-light-ui"] .side-panel.side-panel--dark-ui a.text-link.text-link--white {
7581
- color: #fff;
7582
- opacity: 0.75; }
7583
- [data-theme="accessible-light-ui"] .side-panel.side-panel--dark-ui a.text-link.text-link--white:hover {
7584
- opacity: 1; }
7585
- [data-theme="accessible-light-ui"] .badge.badge--primary {
7586
- background-color: var(--color-accessible-primary); }
7587
- [data-theme="accessible-light-ui"] .badge.badge--success {
7588
- background-color: #006115; }
7589
- [data-theme="accessible-light-ui"] .badge.badge--warning {
7590
- background-color: #854900; }
7591
- [data-theme="accessible-light-ui"] .sd-sidebar-menu__btn--active,
7592
- [data-theme="accessible-light-ui"] .sd-sidebar-menu__btn--active:hover {
7593
- background-color: var(--color-accessible-primary); }
7594
-
7595
- .test-div {
7596
- height: 4rem;
7597
- display: flex;
7598
- flex-direction: row; }
7599
- .test-div div {
7600
- flex-grow: 1;
7601
- height: 100%; }
7602
-
7603
- .test-div--1 {
7604
- background-color: var(--sd-colour-neutral); }
7605
-
7606
- .test-div--2 {
7607
- background-color: var(--sd-colour-neutral--hover); }
7608
-
7609
- .test-div--3 {
7610
- background-color: var(--sd-colour-neutral--active); }
7611
-
7612
- .test-div--4 {
7613
- background-color: var(--sd-colour-primary); }
7614
-
7615
- .test-div--5 {
7616
- background-color: var(--sd-colour-primary--hover); }
7617
-
7618
- .test-div--6 {
7619
- background-color: var(--sd-colour-primary--active); }
7620
-
7621
- .test-div--7 {
7622
- background-color: var(--sd-colour-success); }
7623
-
7624
- .test-div--8 {
7625
- background-color: var(--sd-colour-success--hover); }
7626
-
7627
- .test-div--9 {
7628
- background-color: var(--sd-colour-success--active); }
7629
-
7630
- .test-div--10 {
7631
- background-color: var(--sd-colour-alert); }
7632
-
7633
- .test-div--11 {
7634
- background-color: var(--sd-colour-alert--hover); }
7635
-
7636
- .test-div--12 {
7637
- background-color: var(--sd-colour-alert--active); }
7638
-
7639
- .test-div--13 {
7640
- background-color: var(--sd-colour-warning); }
7641
-
7642
- .test-div--14 {
7643
- background-color: var(--sd-colour-warning--hover); }
7644
-
7645
- .test-div--15 {
7646
- background-color: var(--sd-colour-warning--active); }
7647
-
7648
- .test-div--16 {
7649
- background-color: var(--sd-colour-highlight); }
7650
-
7651
- .test-div--17 {
7652
- background-color: var(--sd-colour-highlight--hover); }
7653
-
7654
- .test-div--18 {
7655
- background-color: var(--sd-colour-highlight--active); }
7656
-
7657
- .test-div--19-1 {
7658
- background-color: white; }
7659
-
7660
- .test-div--19-2 {
7661
- background-color: var(--sd-colour-bg--00); }
7662
-
7663
- .test-div--20-1 {
7664
- background-color: #f3f5f6; }
7665
-
7666
- .test-div--20-2 {
7667
- background-color: var(--sd-colour-bg--01); }
7668
-
7669
- .test-div--21-1 {
7670
- background-color: #e8eaed; }
7671
-
7672
- .test-div--21-2 {
7673
- background-color: var(--sd-colour-bg--02); }
7674
-
7675
- .test-div--22-1 {
7676
- background-color: #d4d8de; }
7677
-
7678
- .test-div--22-2 {
7679
- background-color: var(--sd-colour-bg--03); }
7680
-
7681
- .test-div--23-1 {
7682
- background-color: #c5cbd3; }
7683
-
7684
- .test-div--23-2 {
7685
- background-color: var(--sd-colour-bg--04); }
7686
-
7687
- .test-div--24-1 {
7688
- background-color: #b7bec8; }
7689
-
7690
- .test-div--24-2 {
7691
- background-color: var(--sd-colour-bg--05); }
7692
-
7693
- .test-div--25-1 {
7694
- background-color: #a9b1bc; }
7695
-
7696
- .test-div--25-2 {
7697
- background-color: var(--sd-colour-bg--06); }
7698
-
7699
- .test-div--26-1 {
7700
- background-color: #9aa4b1; }
7701
-
7702
- .test-div--26-2 {
7703
- background-color: var(--sd-colour-bg--07); }
7704
-
7705
- .test-div--27-1 {
7706
- background-color: #8c97a6; }
7707
-
7708
- .test-div--27-2 {
7709
- background-color: var(--sd-colour-bg--08); }
7710
-
7711
6585
  @font-face {
7712
6586
  font-family: 'sd_big-icons';
7713
6587
  src: url(sd_big-icons.eot);