superdesk-ui-framework 4.0.46 → 4.0.48

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 (563) hide show
  1. package/.eslintrc.js +0 -1
  2. package/.eslintrc.json +2 -5
  3. package/.github/workflows/test.yml +22 -26
  4. package/.prettierignore +3 -0
  5. package/.prettierrc.js +9 -0
  6. package/.travis.yml +4 -4
  7. package/README.md +14 -1
  8. package/app/styles/form-elements/_forms-general.scss +0 -4
  9. package/app-typescript/components/Alert.tsx +12 -16
  10. package/app-typescript/components/Autocomplete.tsx +53 -42
  11. package/app-typescript/components/Badge.tsx +1 -1
  12. package/app-typescript/components/Button.tsx +5 -11
  13. package/app-typescript/components/ButtonGroup.tsx +15 -10
  14. package/app-typescript/components/Carousel.tsx +25 -26
  15. package/app-typescript/components/CheckButtonGroup.tsx +6 -10
  16. package/app-typescript/components/Checkbox.tsx +16 -10
  17. package/app-typescript/components/CheckboxButton.tsx +22 -13
  18. package/app-typescript/components/ContentDivider.tsx +6 -7
  19. package/app-typescript/components/CreateButton.tsx +8 -6
  20. package/app-typescript/components/DatePicker.tsx +59 -55
  21. package/app-typescript/components/DateTimePicker.tsx +175 -117
  22. package/app-typescript/components/Divider.tsx +2 -4
  23. package/app-typescript/components/DonutChart.tsx +11 -6
  24. package/app-typescript/components/DragHandle.tsx +10 -6
  25. package/app-typescript/components/DragHandleDots.tsx +1 -3
  26. package/app-typescript/components/DropZone.tsx +27 -25
  27. package/app-typescript/components/Dropdown.tsx +61 -102
  28. package/app-typescript/components/DropdownFirst.tsx +57 -69
  29. package/app-typescript/components/DurationInput.tsx +64 -54
  30. package/app-typescript/components/Editor/EditorButton.tsx +4 -3
  31. package/app-typescript/components/EmptyState.tsx +10 -14
  32. package/app-typescript/components/Form/FormGroup.tsx +9 -16
  33. package/app-typescript/components/Form/FormItem.tsx +1 -5
  34. package/app-typescript/components/Form/FormLabel.tsx +0 -1
  35. package/app-typescript/components/Form/FormRow.tsx +12 -19
  36. package/app-typescript/components/Form/FormRowNew.tsx +9 -16
  37. package/app-typescript/components/Form/FormText.tsx +1 -5
  38. package/app-typescript/components/Form/InputBase.tsx +12 -11
  39. package/app-typescript/components/Form/InputNew.tsx +11 -12
  40. package/app-typescript/components/Form/InputWrapper.tsx +9 -18
  41. package/app-typescript/components/Form/index.tsx +9 -9
  42. package/app-typescript/components/FormLabel.tsx +1 -5
  43. package/app-typescript/components/GridItem.tsx +38 -69
  44. package/app-typescript/components/GridList.tsx +2 -6
  45. package/app-typescript/components/HeadingText.tsx +4 -5
  46. package/app-typescript/components/IconButton.tsx +4 -10
  47. package/app-typescript/components/IconLabel.tsx +5 -5
  48. package/app-typescript/components/IconPicker.tsx +128 -126
  49. package/app-typescript/components/IllustrationButton.tsx +2 -8
  50. package/app-typescript/components/Input.tsx +2 -2
  51. package/app-typescript/components/Label.tsx +11 -7
  52. package/app-typescript/components/Layouts/AuthorinInnerSideBar.tsx +1 -5
  53. package/app-typescript/components/Layouts/AuthoringContainer.tsx +4 -6
  54. package/app-typescript/components/Layouts/AuthoringFrame.tsx +4 -20
  55. package/app-typescript/components/Layouts/AuthoringFrameContainer.tsx +1 -5
  56. package/app-typescript/components/Layouts/AuthoringFrameLeftBar.tsx +1 -5
  57. package/app-typescript/components/Layouts/AuthoringFrameMain.tsx +1 -5
  58. package/app-typescript/components/Layouts/AuthoringFrameNavBar.tsx +1 -5
  59. package/app-typescript/components/Layouts/AuthoringFrameOverlay.tsx +1 -5
  60. package/app-typescript/components/Layouts/AuthoringFrameRightBar.tsx +1 -5
  61. package/app-typescript/components/Layouts/AuthoringFrameSidePanel.tsx +1 -5
  62. package/app-typescript/components/Layouts/AuthoringFrameSidePanelOverlay.tsx +1 -3
  63. package/app-typescript/components/Layouts/AuthoringInnerBody.tsx +3 -6
  64. package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx +5 -5
  65. package/app-typescript/components/Layouts/AuthoringMain.tsx +3 -4
  66. package/app-typescript/components/Layouts/AuthoringMainContainer.tsx +1 -5
  67. package/app-typescript/components/Layouts/AuthoringMainContent.tsx +1 -5
  68. package/app-typescript/components/Layouts/AuthoringMainToolBar.tsx +1 -6
  69. package/app-typescript/components/Layouts/BottomBarAction.tsx +8 -10
  70. package/app-typescript/components/Layouts/Container.tsx +13 -8
  71. package/app-typescript/components/Layouts/ContentSplitter.tsx +2 -6
  72. package/app-typescript/components/Layouts/CoreLayout.tsx +5 -12
  73. package/app-typescript/components/Layouts/CoreLayoutContainer.tsx +1 -1
  74. package/app-typescript/components/Layouts/CoreLayoutFooter.tsx +1 -5
  75. package/app-typescript/components/Layouts/CoreLayoutMain.tsx +4 -4
  76. package/app-typescript/components/Layouts/CoreLayoutOverlay.tsx +1 -5
  77. package/app-typescript/components/Layouts/CoreLayoutSlideInMenu.tsx +2 -4
  78. package/app-typescript/components/Layouts/CoreLayoutTopMenu.tsx +8 -9
  79. package/app-typescript/components/Layouts/HamburgerButton.tsx +13 -14
  80. package/app-typescript/components/Layouts/HeaderPanel.tsx +1 -5
  81. package/app-typescript/components/Layouts/Layout.tsx +10 -16
  82. package/app-typescript/components/Layouts/LayoutContainer.tsx +2 -7
  83. package/app-typescript/components/Layouts/LeftPanel.tsx +4 -11
  84. package/app-typescript/components/Layouts/MainMenu.tsx +18 -32
  85. package/app-typescript/components/Layouts/MainPanel.tsx +10 -11
  86. package/app-typescript/components/Layouts/NotificationPanel.tsx +20 -29
  87. package/app-typescript/components/Layouts/OverlayPanel.tsx +3 -5
  88. package/app-typescript/components/Layouts/PageLayout.tsx +4 -21
  89. package/app-typescript/components/Layouts/Panel.tsx +45 -81
  90. package/app-typescript/components/Layouts/index.tsx +39 -39
  91. package/app-typescript/components/LeftMenu.tsx +51 -53
  92. package/app-typescript/components/ListItemLoader.tsx +1 -1
  93. package/app-typescript/components/Lists/BoxedList.tsx +16 -41
  94. package/app-typescript/components/Lists/CalendarWeekDayItem.tsx +2 -10
  95. package/app-typescript/components/Lists/ContentList.tsx +68 -62
  96. package/app-typescript/components/Lists/SimpleList.tsx +13 -12
  97. package/app-typescript/components/Lists/TableList.tsx +169 -217
  98. package/app-typescript/components/Lists/index.tsx +2 -2
  99. package/app-typescript/components/Loader.tsx +1 -3
  100. package/app-typescript/components/Menu.tsx +2 -4
  101. package/app-typescript/components/Modal.tsx +21 -21
  102. package/app-typescript/components/MultiSelect.tsx +6 -6
  103. package/app-typescript/components/NavButton.tsx +10 -8
  104. package/app-typescript/components/Navigation/BottomNav.tsx +21 -17
  105. package/app-typescript/components/Navigation/QuickNavBar.tsx +40 -37
  106. package/app-typescript/components/Navigation/SideBarMenu.tsx +21 -17
  107. package/app-typescript/components/Navigation/SideBarTabs.tsx +13 -19
  108. package/app-typescript/components/Navigation/index.tsx +3 -3
  109. package/app-typescript/components/Popover.tsx +19 -21
  110. package/app-typescript/components/PropsList.tsx +2 -4
  111. package/app-typescript/components/RadioButtonGroup.tsx +48 -45
  112. package/app-typescript/components/RadioGroup.tsx +9 -8
  113. package/app-typescript/components/ResizablePanels.tsx +2 -3
  114. package/app-typescript/components/ResizeObserverComponent.tsx +1 -5
  115. package/app-typescript/components/SearchBar.tsx +53 -45
  116. package/app-typescript/components/Select.tsx +6 -8
  117. package/app-typescript/components/SelectGrid.tsx +32 -40
  118. package/app-typescript/components/SelectPreview.tsx +31 -25
  119. package/app-typescript/components/SelectWithTemplate.tsx +10 -11
  120. package/app-typescript/components/ShowPopup.tsx +30 -46
  121. package/app-typescript/components/SidebarMenu.tsx +19 -18
  122. package/app-typescript/components/Skeleton.tsx +12 -11
  123. package/app-typescript/components/SlidingToolbar.tsx +1 -6
  124. package/app-typescript/components/Spinner.tsx +2 -6
  125. package/app-typescript/components/StrechBar.tsx +1 -5
  126. package/app-typescript/components/SubNav.tsx +10 -8
  127. package/app-typescript/components/SvgIconIllustration.tsx +477 -105
  128. package/app-typescript/components/Switch.tsx +14 -12
  129. package/app-typescript/components/SwitchGroup.tsx +10 -10
  130. package/app-typescript/components/TabCustom.tsx +28 -35
  131. package/app-typescript/components/TabList.tsx +13 -10
  132. package/app-typescript/components/Tag.tsx +21 -24
  133. package/app-typescript/components/TagInput.tsx +4 -11
  134. package/app-typescript/components/Text/Heading.tsx +21 -41
  135. package/app-typescript/components/Text/Text.tsx +16 -12
  136. package/app-typescript/components/Text/Time.tsx +14 -10
  137. package/app-typescript/components/ThemeSelector.tsx +15 -14
  138. package/app-typescript/components/TimePicker.tsx +2 -2
  139. package/app-typescript/components/TimePickerV2.tsx +20 -20
  140. package/app-typescript/components/Toast.tsx +11 -7
  141. package/app-typescript/components/ToastMessage.tsx +3 -14
  142. package/app-typescript/components/ToastText.tsx +30 -32
  143. package/app-typescript/components/ToastWrapper.tsx +76 -74
  144. package/app-typescript/components/ToggleBox/CustomHeaderToggleBox.tsx +30 -45
  145. package/app-typescript/components/ToggleBox/SimpleToggleBox.tsx +31 -33
  146. package/app-typescript/components/ToggleBox/index.tsx +3 -7
  147. package/app-typescript/components/Tooltip.tsx +1 -1
  148. package/app-typescript/components/TreeMenu.tsx +72 -81
  149. package/app-typescript/components/TreeSelect/KeyboardNavigation.tsx +1 -5
  150. package/app-typescript/components/TreeSelect/TreeSelect.tsx +221 -238
  151. package/app-typescript/components/TreeSelect/TreeSelectItem.tsx +20 -24
  152. package/app-typescript/components/TreeSelect/TreeSelectPill.tsx +12 -15
  153. package/app-typescript/components/WithPagination.tsx +34 -39
  154. package/app-typescript/components/WithPopover.tsx +0 -1
  155. package/app-typescript/components/WithPortal.tsx +4 -7
  156. package/app-typescript/components/WithSizeObserver.tsx +2 -6
  157. package/app-typescript/components/_Positioner.tsx +26 -26
  158. package/app-typescript/components/avatar/avatar-action-add.tsx +1 -6
  159. package/app-typescript/components/avatar/avatar-group.tsx +49 -68
  160. package/app-typescript/components/avatar/avatar-image.tsx +18 -12
  161. package/app-typescript/components/avatar/avatar-placeholder.tsx +3 -15
  162. package/app-typescript/components/avatar/avatar-text.tsx +1 -4
  163. package/app-typescript/components/avatar/avatar-wrapper.tsx +18 -30
  164. package/app-typescript/components/avatar/avatar.tsx +5 -8
  165. package/app-typescript/components/with-pagination.spec.tsx +8 -27
  166. package/app-typescript/helpers.tsx +2 -2
  167. package/app-typescript/index.ts +111 -100
  168. package/declarations.d.ts +1 -1
  169. package/dist/components/Alerts.tsx +171 -78
  170. package/dist/components/Autocomplete.tsx +187 -78
  171. package/dist/components/Avatar.tsx +52 -112
  172. package/dist/components/Badges.tsx +111 -67
  173. package/dist/components/BigIconFont.tsx +29 -17
  174. package/dist/components/BoxedList.tsx +244 -114
  175. package/dist/components/ButtonGroups.tsx +213 -147
  176. package/dist/components/Buttons.tsx +409 -137
  177. package/dist/components/Card.tsx +6 -7
  178. package/dist/components/Carousel.tsx +126 -39
  179. package/dist/components/Checkboxs.tsx +446 -105
  180. package/dist/components/Container.tsx +95 -48
  181. package/dist/components/ContentDivider.tsx +110 -63
  182. package/dist/components/ContentList.tsx +577 -253
  183. package/dist/components/CreateButton.tsx +71 -21
  184. package/dist/components/DatePicker.tsx +102 -26
  185. package/dist/components/DateTimePicker.tsx +46 -10
  186. package/dist/components/DragHandleDocs.tsx +56 -26
  187. package/dist/components/DropZone.tsx +67 -29
  188. package/dist/components/Dropdowns.tsx +220 -131
  189. package/dist/components/DurationInput.tsx +92 -32
  190. package/dist/components/EmptyStates.tsx +61 -26
  191. package/dist/components/GridItem.tsx +190 -91
  192. package/dist/components/GridList.tsx +37 -17
  193. package/dist/components/Heading.tsx +81 -35
  194. package/dist/components/IconButtons.tsx +125 -32
  195. package/dist/components/IconFont.tsx +24 -12
  196. package/dist/components/IconLabels.tsx +146 -39
  197. package/dist/components/IconPicker.tsx +30 -13
  198. package/dist/components/IllustrationButton.tsx +40 -20
  199. package/dist/components/Index.tsx +128 -114
  200. package/dist/components/Inputs.tsx +153 -51
  201. package/dist/components/Labels.tsx +191 -117
  202. package/dist/components/LeftNavigations.tsx +327 -100
  203. package/dist/components/ListItems.tsx +8 -9
  204. package/dist/components/Loader.tsx +5 -4
  205. package/dist/components/Menu.tsx +48 -26
  206. package/dist/components/Modal.tsx +298 -104
  207. package/dist/components/MultiSelect.tsx +189 -53
  208. package/dist/components/NavButtons.tsx +86 -30
  209. package/dist/components/Panel.tsx +367 -120
  210. package/dist/components/Popover.tsx +37 -17
  211. package/dist/components/QuickNavigationBar.tsx +222 -86
  212. package/dist/components/RadioGroup.tsx +375 -137
  213. package/dist/components/ResizablePanels.tsx +8 -14
  214. package/dist/components/SelectGrid.tsx +79 -38
  215. package/dist/components/SelectWithTemplate.tsx +23 -14
  216. package/dist/components/Selects.tsx +94 -29
  217. package/dist/components/SimpleList.tsx +91 -41
  218. package/dist/components/SubNav.tsx +57 -37
  219. package/dist/components/Switch.tsx +168 -42
  220. package/dist/components/TableList.tsx +220 -66
  221. package/dist/components/Tabs.tsx +149 -64
  222. package/dist/components/TagInputDocs.tsx +73 -17
  223. package/dist/components/Tags.tsx +104 -73
  224. package/dist/components/Text.tsx +108 -58
  225. package/dist/components/TimePicker.tsx +74 -20
  226. package/dist/components/Toasts.tsx +162 -80
  227. package/dist/components/Togglebox.tsx +164 -62
  228. package/dist/components/Tooltips.tsx +27 -15
  229. package/dist/components/TreeMenu.tsx +95 -59
  230. package/dist/components/TreeSelect.tsx +297 -162
  231. package/dist/components/WithPaginationDocs.tsx +15 -16
  232. package/dist/components/WithSizeObserver.tsx +9 -9
  233. package/dist/components/tree-select/TreeSelect.tsx +126 -77
  234. package/dist/components/tree-select/example-1.tsx +8 -12
  235. package/dist/components/tree-select/example-2.tsx +2 -5
  236. package/dist/components/utilities/BorderRadiusUtilities.tsx +28 -13
  237. package/dist/components/utilities/BorderUtilities.tsx +31 -32
  238. package/dist/components/utilities/DisplayUtilities.tsx +4 -5
  239. package/dist/components/utilities/FlexAndGridUtilities.tsx +38 -38
  240. package/dist/components/utilities/ObjectFitUtilities.tsx +4 -6
  241. package/dist/components/utilities/ObjectPositionUtilities.tsx +3 -4
  242. package/dist/components/utilities/OpacityUtilities.tsx +4 -7
  243. package/dist/components/utilities/OverflowUtilities.tsx +4 -5
  244. package/dist/components/utilities/PositionUtilities.tsx +4 -5
  245. package/dist/components/utilities/ShadowUtilities.tsx +15 -16
  246. package/dist/components/utilities/SpacingUtilities.tsx +483 -178
  247. package/dist/components/utilities/TextUtilities.tsx +109 -60
  248. package/dist/design-patterns/Index.tsx +8 -11
  249. package/dist/design-patterns/ThreePaneLayoutPattern.tsx +92 -76
  250. package/dist/examples.bundle.css +1257 -1155
  251. package/dist/examples.bundle.js +6246 -5620
  252. package/dist/playgrounds/dummy-data/items.ts +9 -8
  253. package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +559 -277
  254. package/dist/playgrounds/react-playgrounds/EditorTest.tsx +387 -204
  255. package/dist/playgrounds/react-playgrounds/FirstPlayground.tsx +74 -52
  256. package/dist/playgrounds/react-playgrounds/Index.tsx +11 -11
  257. package/dist/playgrounds/react-playgrounds/Multiedit.tsx +294 -218
  258. package/dist/playgrounds/react-playgrounds/PageLayoutTest.tsx +151 -105
  259. package/dist/playgrounds/react-playgrounds/PersonalProfile.tsx +481 -261
  260. package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +261 -149
  261. package/dist/playgrounds/react-playgrounds/Rundowns.tsx +757 -395
  262. package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +173 -91
  263. package/dist/playgrounds/react-playgrounds/TestGround.tsx +1364 -818
  264. package/dist/playgrounds/react-playgrounds/UiPlayground.tsx +178 -86
  265. package/dist/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +6 -7
  266. package/dist/playgrounds/react-playgrounds/components/AuthoringContent.tsx +42 -42
  267. package/dist/playgrounds/react-playgrounds/components/ContentSplitter.tsx +5 -8
  268. package/dist/playgrounds/react-playgrounds/components/GraphicButton.tsx +11 -11
  269. package/dist/playgrounds/react-playgrounds/components/GraphicButtonsGroup.tsx +2 -6
  270. package/dist/playgrounds/react-playgrounds/components/HeaderPanel.tsx +1 -5
  271. package/dist/playgrounds/react-playgrounds/components/Index.tsx +19 -21
  272. package/dist/playgrounds/react-playgrounds/components/Layout.tsx +11 -17
  273. package/dist/playgrounds/react-playgrounds/components/LayoutContainer.tsx +1 -1
  274. package/dist/playgrounds/react-playgrounds/components/MainPanel.tsx +11 -12
  275. package/dist/playgrounds/react-playgrounds/components/OverlayPanel.tsx +3 -5
  276. package/dist/playgrounds/react-playgrounds/components/Panel.tsx +6 -7
  277. package/dist/playgrounds/react-playgrounds/components/PanelContent.tsx +1 -5
  278. package/dist/playgrounds/react-playgrounds/components/PanelContentBlock.tsx +1 -6
  279. package/dist/playgrounds/react-playgrounds/components/PanelHeader.tsx +3 -3
  280. package/dist/playgrounds/react-playgrounds/components/SearchBar.tsx +16 -12
  281. package/dist/playgrounds/react-playgrounds/components/SidebarMenu.tsx +23 -14
  282. package/dist/playgrounds/react-playgrounds/components/SubNav.tsx +1 -5
  283. package/dist/playgrounds/react-playgrounds/components/ThemeDropdown.tsx +14 -11
  284. package/dist/playgrounds/react-playgrounds/tsconfig.json +1 -1
  285. package/dist/superdesk-ui.bundle.css +0 -3
  286. package/dist/superdesk-ui.bundle.js +1791 -1865
  287. package/dist/vendor.bundle.js +2 -2
  288. package/examples/css/docs-page.css +1135 -1116
  289. package/examples/css/reset.css +124 -43
  290. package/examples/css/vendor.css +125 -125
  291. package/examples/index.js +138 -139
  292. package/examples/js/doc.js +41 -40
  293. package/examples/js/react.js +82 -48
  294. package/examples/pages/components/Alerts.tsx +171 -78
  295. package/examples/pages/components/Autocomplete.tsx +187 -78
  296. package/examples/pages/components/Avatar.tsx +52 -112
  297. package/examples/pages/components/Badges.tsx +111 -67
  298. package/examples/pages/components/BigIconFont.tsx +29 -17
  299. package/examples/pages/components/BoxedList.tsx +244 -114
  300. package/examples/pages/components/ButtonGroups.tsx +213 -147
  301. package/examples/pages/components/Buttons.tsx +409 -137
  302. package/examples/pages/components/Card.tsx +6 -7
  303. package/examples/pages/components/Carousel.tsx +126 -39
  304. package/examples/pages/components/Checkboxs.tsx +446 -105
  305. package/examples/pages/components/Container.tsx +95 -48
  306. package/examples/pages/components/ContentDivider.tsx +110 -63
  307. package/examples/pages/components/ContentList.tsx +577 -253
  308. package/examples/pages/components/CreateButton.tsx +71 -21
  309. package/examples/pages/components/DatePicker.tsx +102 -26
  310. package/examples/pages/components/DateTimePicker.tsx +46 -10
  311. package/examples/pages/components/DragHandleDocs.tsx +56 -26
  312. package/examples/pages/components/DropZone.tsx +67 -29
  313. package/examples/pages/components/Dropdowns.tsx +220 -131
  314. package/examples/pages/components/DurationInput.tsx +92 -32
  315. package/examples/pages/components/EmptyStates.tsx +61 -26
  316. package/examples/pages/components/GridItem.tsx +190 -91
  317. package/examples/pages/components/GridList.tsx +37 -17
  318. package/examples/pages/components/Heading.tsx +81 -35
  319. package/examples/pages/components/IconButtons.tsx +125 -32
  320. package/examples/pages/components/IconFont.tsx +24 -12
  321. package/examples/pages/components/IconLabels.tsx +146 -39
  322. package/examples/pages/components/IconPicker.tsx +30 -13
  323. package/examples/pages/components/IllustrationButton.tsx +40 -20
  324. package/examples/pages/components/Index.tsx +128 -114
  325. package/examples/pages/components/Inputs.tsx +153 -51
  326. package/examples/pages/components/Labels.tsx +191 -117
  327. package/examples/pages/components/LeftNavigations.tsx +327 -100
  328. package/examples/pages/components/ListItems.tsx +8 -9
  329. package/examples/pages/components/Loader.tsx +5 -4
  330. package/examples/pages/components/Menu.tsx +48 -26
  331. package/examples/pages/components/Modal.tsx +298 -104
  332. package/examples/pages/components/MultiSelect.tsx +189 -53
  333. package/examples/pages/components/NavButtons.tsx +86 -30
  334. package/examples/pages/components/Panel.tsx +367 -120
  335. package/examples/pages/components/Popover.tsx +37 -17
  336. package/examples/pages/components/QuickNavigationBar.tsx +222 -86
  337. package/examples/pages/components/RadioGroup.tsx +375 -137
  338. package/examples/pages/components/ResizablePanels.tsx +8 -14
  339. package/examples/pages/components/SelectGrid.tsx +79 -38
  340. package/examples/pages/components/SelectWithTemplate.tsx +23 -14
  341. package/examples/pages/components/Selects.tsx +94 -29
  342. package/examples/pages/components/SimpleList.tsx +91 -41
  343. package/examples/pages/components/SubNav.tsx +57 -37
  344. package/examples/pages/components/Switch.tsx +168 -42
  345. package/examples/pages/components/TableList.tsx +220 -66
  346. package/examples/pages/components/Tabs.tsx +149 -64
  347. package/examples/pages/components/TagInputDocs.tsx +73 -17
  348. package/examples/pages/components/Tags.tsx +104 -73
  349. package/examples/pages/components/Text.tsx +108 -58
  350. package/examples/pages/components/TimePicker.tsx +74 -20
  351. package/examples/pages/components/Toasts.tsx +162 -80
  352. package/examples/pages/components/Togglebox.tsx +164 -62
  353. package/examples/pages/components/Tooltips.tsx +27 -15
  354. package/examples/pages/components/TreeMenu.tsx +95 -59
  355. package/examples/pages/components/TreeSelect.tsx +297 -162
  356. package/examples/pages/components/WithPaginationDocs.tsx +15 -16
  357. package/examples/pages/components/WithSizeObserver.tsx +9 -9
  358. package/examples/pages/components/tree-select/TreeSelect.tsx +126 -77
  359. package/examples/pages/components/tree-select/example-1.tsx +8 -12
  360. package/examples/pages/components/tree-select/example-2.tsx +2 -5
  361. package/examples/pages/components/utilities/BorderRadiusUtilities.tsx +28 -13
  362. package/examples/pages/components/utilities/BorderUtilities.tsx +31 -32
  363. package/examples/pages/components/utilities/DisplayUtilities.tsx +4 -5
  364. package/examples/pages/components/utilities/FlexAndGridUtilities.tsx +38 -38
  365. package/examples/pages/components/utilities/ObjectFitUtilities.tsx +4 -6
  366. package/examples/pages/components/utilities/ObjectPositionUtilities.tsx +3 -4
  367. package/examples/pages/components/utilities/OpacityUtilities.tsx +4 -7
  368. package/examples/pages/components/utilities/OverflowUtilities.tsx +4 -5
  369. package/examples/pages/components/utilities/PositionUtilities.tsx +4 -5
  370. package/examples/pages/components/utilities/ShadowUtilities.tsx +15 -16
  371. package/examples/pages/components/utilities/SpacingUtilities.tsx +483 -178
  372. package/examples/pages/components/utilities/TextUtilities.tsx +109 -60
  373. package/examples/pages/design-patterns/Index.tsx +8 -11
  374. package/examples/pages/design-patterns/ThreePaneLayoutPattern.tsx +92 -76
  375. package/examples/pages/playgrounds/dummy-data/items.ts +9 -8
  376. package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +559 -277
  377. package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx +387 -204
  378. package/examples/pages/playgrounds/react-playgrounds/FirstPlayground.tsx +74 -52
  379. package/examples/pages/playgrounds/react-playgrounds/Index.tsx +11 -11
  380. package/examples/pages/playgrounds/react-playgrounds/Multiedit.tsx +294 -218
  381. package/examples/pages/playgrounds/react-playgrounds/PageLayoutTest.tsx +151 -105
  382. package/examples/pages/playgrounds/react-playgrounds/PersonalProfile.tsx +481 -261
  383. package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +261 -149
  384. package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +757 -395
  385. package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +173 -91
  386. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +1364 -818
  387. package/examples/pages/playgrounds/react-playgrounds/UiPlayground.tsx +178 -86
  388. package/examples/pages/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +6 -7
  389. package/examples/pages/playgrounds/react-playgrounds/components/AuthoringContent.tsx +42 -42
  390. package/examples/pages/playgrounds/react-playgrounds/components/ContentSplitter.tsx +5 -8
  391. package/examples/pages/playgrounds/react-playgrounds/components/GraphicButton.tsx +11 -11
  392. package/examples/pages/playgrounds/react-playgrounds/components/GraphicButtonsGroup.tsx +2 -6
  393. package/examples/pages/playgrounds/react-playgrounds/components/HeaderPanel.tsx +1 -5
  394. package/examples/pages/playgrounds/react-playgrounds/components/Index.tsx +19 -21
  395. package/examples/pages/playgrounds/react-playgrounds/components/Layout.tsx +11 -17
  396. package/examples/pages/playgrounds/react-playgrounds/components/LayoutContainer.tsx +1 -1
  397. package/examples/pages/playgrounds/react-playgrounds/components/MainPanel.tsx +11 -12
  398. package/examples/pages/playgrounds/react-playgrounds/components/OverlayPanel.tsx +3 -5
  399. package/examples/pages/playgrounds/react-playgrounds/components/Panel.tsx +6 -7
  400. package/examples/pages/playgrounds/react-playgrounds/components/PanelContent.tsx +1 -5
  401. package/examples/pages/playgrounds/react-playgrounds/components/PanelContentBlock.tsx +1 -6
  402. package/examples/pages/playgrounds/react-playgrounds/components/PanelHeader.tsx +3 -3
  403. package/examples/pages/playgrounds/react-playgrounds/components/SearchBar.tsx +16 -12
  404. package/examples/pages/playgrounds/react-playgrounds/components/SidebarMenu.tsx +23 -14
  405. package/examples/pages/playgrounds/react-playgrounds/components/SubNav.tsx +1 -5
  406. package/examples/pages/playgrounds/react-playgrounds/components/ThemeDropdown.tsx +14 -11
  407. package/examples/pages/playgrounds/react-playgrounds/tsconfig.json +1 -1
  408. package/globals.d.ts +1 -1
  409. package/mocha-setup.ts +3 -3
  410. package/package.json +119 -117
  411. package/react/components/Alert.js +6 -9
  412. package/react/components/Autocomplete.js +15 -23
  413. package/react/components/Badge.js +1 -1
  414. package/react/components/Button.js +4 -6
  415. package/react/components/ButtonGroup.js +1 -1
  416. package/react/components/Carousel.js +3 -3
  417. package/react/components/CheckButtonGroup.js +3 -6
  418. package/react/components/CheckboxButton.js +2 -4
  419. package/react/components/ContentDivider.js +1 -1
  420. package/react/components/DatePicker.js +29 -26
  421. package/react/components/DateTimePicker.d.ts +26 -4
  422. package/react/components/DateTimePicker.js +82 -27
  423. package/react/components/Divider.js +1 -1
  424. package/react/components/DonutChart.js +1 -1
  425. package/react/components/DragHandle.js +1 -1
  426. package/react/components/DragHandleDots.js +1 -1
  427. package/react/components/DropZone.js +6 -8
  428. package/react/components/Dropdown.d.ts +1 -1
  429. package/react/components/Dropdown.js +34 -38
  430. package/react/components/DropdownFirst.d.ts +11 -11
  431. package/react/components/DropdownFirst.js +20 -24
  432. package/react/components/DurationInput.js +37 -34
  433. package/react/components/EmptyState.js +5 -5
  434. package/react/components/Form/FormGroup.js +1 -1
  435. package/react/components/Form/FormItem.js +1 -1
  436. package/react/components/Form/FormRow.js +1 -1
  437. package/react/components/Form/FormRowNew.js +3 -3
  438. package/react/components/Form/FormText.js +1 -1
  439. package/react/components/Form/InputNew.js +3 -3
  440. package/react/components/Form/InputWrapper.js +7 -10
  441. package/react/components/GridItem.d.ts +1 -1
  442. package/react/components/GridItem.js +16 -16
  443. package/react/components/GridList.js +1 -1
  444. package/react/components/HeadingText.js +4 -5
  445. package/react/components/IconLabel.js +3 -5
  446. package/react/components/IconPicker.d.ts +1 -1
  447. package/react/components/IconPicker.js +111 -104
  448. package/react/components/IllustrationButton.js +1 -1
  449. package/react/components/Input.js +1 -1
  450. package/react/components/Layouts/AuthorinInnerSideBar.js +1 -1
  451. package/react/components/Layouts/AuthoringContainer.js +1 -1
  452. package/react/components/Layouts/AuthoringFrame.js +4 -4
  453. package/react/components/Layouts/AuthoringFrameContainer.js +1 -1
  454. package/react/components/Layouts/AuthoringFrameLeftBar.js +1 -1
  455. package/react/components/Layouts/AuthoringFrameMain.js +1 -1
  456. package/react/components/Layouts/AuthoringFrameNavBar.js +1 -1
  457. package/react/components/Layouts/AuthoringFrameOverlay.js +1 -1
  458. package/react/components/Layouts/AuthoringFrameRightBar.js +1 -1
  459. package/react/components/Layouts/AuthoringFrameSidePanel.js +1 -1
  460. package/react/components/Layouts/AuthoringFrameSidePanelOverlay.js +1 -1
  461. package/react/components/Layouts/AuthoringMainContainer.js +1 -1
  462. package/react/components/Layouts/AuthoringMainContent.js +1 -1
  463. package/react/components/Layouts/AuthoringMainToolBar.js +1 -1
  464. package/react/components/Layouts/BottomBarAction.js +2 -2
  465. package/react/components/Layouts/ContentSplitter.js +1 -1
  466. package/react/components/Layouts/CoreLayout.js +2 -2
  467. package/react/components/Layouts/CoreLayoutContainer.js +1 -1
  468. package/react/components/Layouts/CoreLayoutFooter.js +1 -1
  469. package/react/components/Layouts/CoreLayoutOverlay.js +1 -1
  470. package/react/components/Layouts/CoreLayoutSlideInMenu.js +2 -2
  471. package/react/components/Layouts/CoreLayoutTopMenu.js +3 -3
  472. package/react/components/Layouts/HamburgerButton.js +1 -1
  473. package/react/components/Layouts/HeaderPanel.js +1 -1
  474. package/react/components/Layouts/Layout.d.ts +1 -1
  475. package/react/components/Layouts/Layout.js +9 -9
  476. package/react/components/Layouts/LayoutContainer.js +1 -1
  477. package/react/components/Layouts/LeftPanel.js +1 -1
  478. package/react/components/Layouts/MainMenu.js +8 -10
  479. package/react/components/Layouts/MainPanel.js +1 -1
  480. package/react/components/Layouts/NotificationPanel.d.ts +1 -1
  481. package/react/components/Layouts/NotificationPanel.js +7 -7
  482. package/react/components/Layouts/OverlayPanel.js +3 -3
  483. package/react/components/Layouts/PageLayout.js +2 -2
  484. package/react/components/Layouts/Panel.d.ts +1 -1
  485. package/react/components/Layouts/Panel.js +12 -18
  486. package/react/components/LeftMenu.d.ts +3 -3
  487. package/react/components/LeftMenu.js +11 -13
  488. package/react/components/Lists/BoxedList.js +6 -6
  489. package/react/components/Lists/CalendarWeekDayItem.js +2 -2
  490. package/react/components/Lists/ContentList.js +24 -26
  491. package/react/components/Lists/TableList.d.ts +1 -1
  492. package/react/components/Lists/TableList.js +59 -79
  493. package/react/components/Loader.js +1 -1
  494. package/react/components/Menu.js +1 -1
  495. package/react/components/Modal.d.ts +1 -1
  496. package/react/components/MultiSelect.d.ts +1 -1
  497. package/react/components/MultiSelect.js +2 -2
  498. package/react/components/NavButton.js +2 -4
  499. package/react/components/Navigation/BottomNav.js +9 -8
  500. package/react/components/Navigation/QuickNavBar.js +17 -20
  501. package/react/components/Navigation/SideBarMenu.js +11 -9
  502. package/react/components/Navigation/SideBarTabs.js +9 -8
  503. package/react/components/Popover.js +1 -1
  504. package/react/components/RadioButtonGroup.js +15 -23
  505. package/react/components/ResizablePanels.js +1 -3
  506. package/react/components/ResizeObserverComponent.js +1 -3
  507. package/react/components/SearchBar.js +14 -16
  508. package/react/components/Select.js +3 -3
  509. package/react/components/SelectGrid.js +15 -20
  510. package/react/components/SelectPreview.js +13 -13
  511. package/react/components/SelectWithTemplate.js +3 -5
  512. package/react/components/ShowPopup.js +7 -10
  513. package/react/components/Skeleton.js +1 -1
  514. package/react/components/SlidingToolbar.js +1 -1
  515. package/react/components/Spinner.js +1 -1
  516. package/react/components/StrechBar.js +1 -1
  517. package/react/components/SubNav.js +1 -1
  518. package/react/components/Switch.js +4 -6
  519. package/react/components/SwitchGroup.js +1 -1
  520. package/react/components/TabCustom.js +6 -4
  521. package/react/components/TabList.js +4 -8
  522. package/react/components/Tag.js +13 -17
  523. package/react/components/TagInput.js +1 -1
  524. package/react/components/Text/Heading.js +6 -6
  525. package/react/components/ThemeSelector.js +1 -1
  526. package/react/components/TimePickerV2.js +17 -17
  527. package/react/components/Toast.js +3 -3
  528. package/react/components/ToastMessage.d.ts +1 -1
  529. package/react/components/ToastMessage.js +1 -1
  530. package/react/components/ToastText.js +5 -8
  531. package/react/components/ToastWrapper.js +3 -5
  532. package/react/components/ToggleBox/CustomHeaderToggleBox.d.ts +1 -1
  533. package/react/components/ToggleBox/CustomHeaderToggleBox.js +7 -7
  534. package/react/components/ToggleBox/SimpleToggleBox.d.ts +1 -1
  535. package/react/components/ToggleBox/SimpleToggleBox.js +5 -5
  536. package/react/components/ToggleBox/index.js +3 -3
  537. package/react/components/TreeMenu.d.ts +1 -1
  538. package/react/components/TreeMenu.js +38 -44
  539. package/react/components/TreeSelect/TreeSelect.d.ts +2 -2
  540. package/react/components/TreeSelect/TreeSelect.js +105 -127
  541. package/react/components/TreeSelect/TreeSelectItem.d.ts +1 -1
  542. package/react/components/TreeSelect/TreeSelectItem.js +10 -13
  543. package/react/components/TreeSelect/TreeSelectPill.d.ts +1 -1
  544. package/react/components/TreeSelect/TreeSelectPill.js +8 -9
  545. package/react/components/WithPagination.js +18 -21
  546. package/react/components/WithPortal.d.ts +1 -1
  547. package/react/components/WithPortal.js +2 -1
  548. package/react/components/WithSizeObserver.js +1 -3
  549. package/react/components/_Positioner.js +11 -11
  550. package/react/components/avatar/avatar-action-add.js +1 -1
  551. package/react/components/avatar/avatar-group.js +11 -14
  552. package/react/components/avatar/avatar-image.js +6 -4
  553. package/react/components/avatar/avatar-placeholder.js +1 -1
  554. package/react/components/avatar/avatar-wrapper.js +2 -4
  555. package/react/components/avatar/avatar.js +4 -3
  556. package/react/helpers.js +2 -2
  557. package/react/index.d.ts +1 -1
  558. package/tasks/webpack.dev.js +1 -1
  559. package/tasks/webpack.js +5 -5
  560. package/tasks/webpack.prod.js +1 -5
  561. package/tsconfig.json +2 -5
  562. package/tslint.json +6 -12
  563. package/webpack.config.js +2 -5
@@ -278,1161 +278,1263 @@ pre[class*="language-"].line-numbers > code {
278
278
  padding-right: 0.8em;
279
279
  text-align: right;
280
280
  }
281
- html, body, div, span, applet, object, iframe,
282
- h1, h2, h3, h4, h5, h6, p, blockquote, pre,
283
- a, abbr, acronym, address, big, cite, code,
284
- del, dfn, em, img, ins, kbd, q, s, samp,
285
- small, strike, strong, sub, sup, tt, var,
286
- b, u, i, center,
287
- dl, dt, dd, ol, ul, li,
288
- fieldset, form, label, legend,
289
- table, caption, tbody, tfoot, thead, tr, th, td,
290
- article, aside, canvas, details, embed,
291
- figure, figcaption, footer, header, hgroup,
292
- menu, nav, output, ruby, section, summary,
293
- time, mark, audio, video {
294
- margin: 0;
295
- padding: 0;
296
- border: 0;
297
- font-size: 100%;
298
- font: inherit;
299
- vertical-align: baseline;
300
- }
301
- /* HTML5 display-role reset for older browsers */
302
- article, aside, details, figcaption, figure,
303
- footer, header, hgroup, menu, nav, section {
304
- display: block;
305
- }
306
- body {
307
- line-height: 1;
308
- }
309
- ol, ul {
310
- list-style: none;
311
- }
312
- blockquote, q {
313
- quotes: none;
314
- }
315
- blockquote:before, blockquote:after,
316
- q:before, q:after {
317
- content: '';
318
- content: none;
319
- }
320
- table {
321
- border-collapse: collapse;
322
- border-spacing: 0;
323
- }:root {
324
- color: hsla(214, 13%, 20%, 1);
325
- --docs-page-color-bg-default: hsl(0, 0%, 97%);
326
- --docs-page-color-bg-00: hsla(214, 13%, 96%, 1);
327
- --docs-page-color-bg-10: hsla(0, 0%, 100%, 1);
328
- --docs-page-color-bg__window-bar: hsl(214, 13%, 90%);
329
- --docs-page-color-bg__aside: hsla(214, 13%, 92%, 1);
330
- --docs-page-color-bg__header: hsl(216, 45%, 24%);
331
-
332
- --docs-page-color-bg__content-row--white: hsla(0, 0%, 100%, 1);
333
- --docs-page-color-bg__content-row--grey: hsla(0, 0%, 95%, 1);
334
- --docs-page-color-bg__example-box: hsla(214, 13%, 94%, 1);
335
- --docs-page-color-bg__graphic-btn: hsla(0, 0%, 100%, 1);
336
- --docs-page-color-bg__graphic-btn-graphic: linear-gradient(180deg, hsla(165, 57%, 95%, 1) 4%, hsla(191, 53%, 86%, 1) 96%);
337
-
338
- --docs-page-border__window-bar--top: hsla(0, 0%, 100%, 0.9);
339
- --docs-page-border__window-bar--bottom: hsla(0, 0%, 88%, 1);
340
- --docs-page-border__table: hsla(0, 0%, 0%, 0.16);
341
- --docs-page-color-bg__table-divider-row: hsla(0, 0%, 100%, 0.8);
342
-
343
- --docs-page-bg__table-tr-even: hsla(214, 13%, 50%, 0.08);
344
- }
345
-
346
- :root [data-theme="dark-ui"] {
347
- color: hsla(214, 13%, 96%, 1);
348
- --docs-page-color-bg-default: hsla(214, 13%, 96%, 1);
349
- --docs-page-color-bg-00: hsla(214, 13%, 12%, 1);
350
- --docs-page-color-bg-10: hsla(214, 13%, 12%, 1);
351
- --docs-page-color-bg__window-bar: hsl(214, 13%, 8%);
352
- --docs-page-color-bg__aside: hsla(214, 13%, 16%, 1);
353
- --docs-page-color-bg__header: hsl(216, 40%, 18%);
354
-
355
- --docs-page-color-bg__content-row--white: hsla(0, 0%, 8%, 1);
356
- --docs-page-color-bg__content-row--grey: hsla(0, 0%, 12%, 1);
357
- --docs-page-color-bg__example-box: hsla(214, 13%, 18%, 1);
358
- --docs-page-color-bg__graphic-btn: hsla(214, 13%, 8%, 1);
359
- --docs-page-color-bg__graphic-btn-graphic: hsla(214, 13%, 14%, 1);
360
-
361
- --docs-page-border__window-bar--top: hsla(0, 0%, 91%, 0.02);
362
- --docs-page-border__window-bar--bottom: hsla(0, 0%, 88%, 0.12);
363
- --docs-page-border__table: hsla(0, 0%, 100%, 0.2);
364
- }
365
- .docs-page {
366
- font-family: 'Roboto', sans-serif;
367
- font-weight: 400;
368
- line-height: 140%;
369
- margin: 0;
370
- padding: 0;
371
- background-color: var(--docs-page-color-bg-default);
372
- display: grid;
373
- grid-template-columns: auto 1fr;
374
- grid-template-rows: auto 1fr;
375
- height: 100vh;
376
- }
377
-
378
- .docs-page {
379
- --docs-page-color-primary: #1397B9;
380
- --docs-page-color-highlight: #33C5A0;
381
- }
382
-
383
- hr {
384
- border: transparent;
385
- border: 1px dotted var(--sd-colour-line--medium);
386
- border-width: 1px 0 0;
387
- margin: 24px 0;
388
- }
389
-
390
- h1.docs-page__h1 {
391
- font-size: 18px;
392
- font-weight: 400;
393
- line-height: 100%;
394
- margin: 0;
395
- flex-grow: 1;
396
- font-family: 'Merriweather', serif;
397
- letter-spacing: 0.02em;
398
- }
399
- h2.docs-page__h2 {
400
- font-size: 32px;
401
- font-weight: 700;
402
- line-height: 140%;
403
- font-family: 'Merriweather', serif;
404
- margin: 0 0 0.6em 0;
405
- }
406
-
407
- h2.docs-page__group-heading {
408
- font-size: 36px;
409
- font-weight: 300;
410
- margin: 1.6em 0 -0.6em 0;
411
- line-height: 140%;
412
- color: #747474;
413
- color: #999;
414
- }
415
- h2.docs-page__group-heading:first-of-type {
416
- margin-top: 1em;
417
- }
418
- .docs-page__hero {
419
- display: flex;
420
- flex-direction: column;
421
- align-items: center;
422
- justify-content: center;
423
- text-align: center;
424
- margin: 32px auto;
425
- }
426
-
427
- h3.docs-page__h3 {
428
- font-size: 24px;
429
- font-weight: 700;
430
- line-height: 140%;
431
- font-family: 'Merriweather', serif;
432
- margin: 2em 0 0.4em 0;
433
- }
434
- h3.docs-page__h3--small-top-m {
435
- margin-top: 1em;
436
- }
437
- .docs-page__rule {
438
- border: none;
439
- border-width: 2px;
440
- height: 1px;
441
- border-radius: 1px;
442
- background-color: rgba(0, 0, 0, 0.2);
443
- margin: 0 0 2.4rem 0;
444
- }
445
- .docs-page__rule--large {
446
- border-width: 4px;
447
- height: 3px;
448
- border-radius: 2px;
449
- background-color: var(--docs-page-color-highlight);
450
- margin: 0 0 2.4rem 0;
451
- }
452
-
453
- .docs-page__hero-h2 {
454
- font-family: 'Merriweather', serif;
455
- font-size: 28px;
456
- font-weight: 700;
457
- line-height: 140%;
458
- margin: 0 auto 0.6em;
459
- text-align: center;
460
- max-width: 400px;
461
- }
462
- .docs-page__hero-image {
463
- margin: 0 auto 1.6em;
464
- text-align: center;
465
- max-width: 340px;
466
- height: auto;
467
- }
468
- .docs-page__hero-image.docs-page__hero-image--s {
469
- max-width: 200px;
470
- }
471
- .docs-page__hero-image img {
472
- max-width: 100%;
473
- }
474
- .docs-page__hero-text {
475
- font-size: 18px;
476
- line-height: 150%;
477
- font-weight: 300;
478
- opacity: 0.75;
479
- max-width: 480px;
480
- text-align: center;
481
- margin: 0 auto 32px;
482
- }
483
-
484
- h4.docs-page__h4 {
485
- font-size: 18px;
486
- line-height: 140%;
487
- margin: 0 0 0.4em 0;
488
- }
489
- p.docs-page__paragraph, div.docs-page__paragraph {
490
- font-size: 16px;
491
- margin: 1em 0;
492
- line-height: 150%;
493
- font-weight: 300;
494
- }
495
- p.docs-page__paragraph em,
496
- div.docs-page__paragraph em {
497
- font-style: italic;
498
- font-weight: 400;
499
- }
500
- .docs-page__paragraph--small {
501
- font-size: 13px;
502
- margin: 0 0px 20px;
503
- color: rgb(116, 116, 116);
504
- }
505
- p.docs-page__paragraph + .docs-page__paragraph--small {
506
- margin-top: -10px;
507
- }
508
- .docs-page__code-example p.docs-page__paragraph {
509
- color: #7abcd1;
510
- }
511
-
512
- p.docs-page__paragraph--topMarginL {
513
- margin-top: 3em;
514
- }
515
- .docs-page__code-example p.docs-page__paragraph--small {
516
- margin: -1em 0 1em;
517
- }
518
- p.docs-page__paragraph:first-child {
519
- margin: 0 0 1em;
520
- }
521
- p.docs-page__paragraph b, div.docs-page__paragraph b {
522
- font-weight: 400;
523
- }
524
- .docs-page .link {
525
- color: #5eadc8;
526
- text-decoration: none;
527
- }
528
- .docs-page .link:hover {
529
- text-decoration: underline;
530
- }
531
- .docs-page__header {
532
- background: var(--docs-page-color-bg__header);
533
- color: white;
534
- padding: 0 8px 0 24px;
535
- height: 64px;
536
- grid-column: 1 / 3;
537
- grid-row: 1 / 2;
538
- display: flex;
539
- align-items: center;
540
- box-shadow: 0 1px 6px rgba(0,0,0,0.2), 0 1px 1px rgba(0,0,0,0.12);
541
- z-index: 2;
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
- }
569
- .docs-page__header-logo {
570
- height: 40px;
571
- width: 40px;
572
- margin: 0 16px 0 -8px;
573
- background: url('/sd-ui-framework__logo.svg') no-repeat;
574
- background-size: 100%;
575
- }
576
- .docs-page__header-nav {
577
- margin-inline-start: auto;
578
- margin-inline-end: 16px;
579
- display: flex;
580
- flex-direction: row;
581
- align-items: stretch;
582
- height: 100%;
583
- }
584
- .docs-page__header-nav-item {
585
- margin-left: auto;
586
- display: flex;
587
- flex-direction: row;
588
- align-items: stretch;
589
- margin: 0 8px;
590
- }
591
- .docs-page__header-nav-link {
592
- color: #fff;
593
- font-size: 16px;
594
- font-weight: 400;
595
- border-bottom: 3px solid transparent;
596
- text-decoration: none;
597
- line-height: 64px;
598
- transition: all 0.2s ease-in-out;
599
- padding: 0 2px;
600
- letter-spacing: 0.01em;
601
- opacity: 0.75;
602
- }
603
- .docs-page__header-nav-link:hover {
604
- opacity: 1;
605
- }
606
- .docs-page__header-nav-item--active .docs-page__header-nav-link {
607
- border-color: rgb(27, 176, 108);
608
- opacity: 1;
609
- }
610
- .docs-page__header .form__row {
611
- padding-bottom: 0;
612
- }
613
- .docs-page__footer {
614
- border-top: 1px solid #ddd;
615
- text-align: center;
616
- padding: 20px;
617
- font-size: 12px;
618
- }
619
- .docs-page__container-fluid {
620
- padding: 0;
621
- grid-column: 1 / 2;
622
- grid-row: 2 / 3;
623
- overflow-y: auto;
624
- padding: 24px 32px 40px 32px;
625
- }
626
- .docs-page__sidebar {
627
- margin: 0;
628
- transition: all .2s ease;
629
- padding: 20px 0;
630
- box-sizing: border-box;
631
- transition: all .2s ease;
632
- grid-column: 1 / 2;
633
- grid-row: 2 / 3;
634
- width: 280px;
635
- background-color: var(--docs-page-color-bg__aside);
636
- overflow-y: auto;
637
- }
638
- .docs-page__sidebar-searchbar-container {
639
- position: sticky;
640
- top: -20px;
641
- margin-top: -20px;
642
- padding-block: 16px 8px;
643
- background-color: var(--docs-page-color-bg__aside);
644
- z-index: 2;
645
- }
646
-
647
- .docs-page__sidebar.scroll {
648
- top: 0;
649
- margin-top: 0;
650
- }
651
- .docs-page__content {
652
- grid-column: 2 / 3;
653
- grid-row: 2 / 3;
654
- overflow-y: auto;
655
- position: relative;
656
- background-color: var(--docs-page-color-bg-00);
657
- }
658
- .docs-page__masthead {
659
- display: flex;
660
- position: relative;
661
- flex-direction: column;
662
- align-items: center;
663
- justify-content: center;
664
- min-height: 320px;
665
- background: rgb(30,176,108);
666
- background: linear-gradient(to bottom, rgba(96,184,194,0.5) 0%, rgba(55,78,112,1) 100%), radial-gradient(at top center, rgba(30,176,108,1) 0%, rgba(0,0,0,0.10) 120%);
667
- color: #fff;
668
- }
669
- .docs-page__masthead-hgroup {
670
- display: flex;
671
- position: relative;
672
- flex-direction: column;
673
- align-items: center;
674
- justify-content: center;
675
- min-height: 320px;
676
- width: 860px;
677
- background: url('/masthead-image.png') ;
678
- }
679
- .docs-page__masthead-heading {
680
- font-family: 'Merriweather', serif;
681
- text-align: center;
682
- font-size: 40px;
683
- font-weight: 700;
684
- line-height: 100%;
685
- margin: 32px auto 0;
686
- }
687
- .docs-page__masthead-subheading {
688
- font-size: 18px;
689
- font-weight: 300;
690
- line-height: 150%;
691
- text-align: center;
692
- margin: 16px auto;
693
- max-width: 400px;
694
- opacity: 0.75;
695
- }
696
- .docs-page__nav {
697
- margin-bottom: 40px;
698
- }
699
- .docs-page__nav-title {
700
- text-transform: uppercase;
701
- color: var(--color-text);
702
- font-size: 12px;
703
- font-weight: 500;
704
- letter-spacing: 0.04em;
705
- line-height: 1.2;
706
- margin-block-start: 20px;
707
- margin-block-end: 6px;
708
- padding-inline-start: 16px;
709
- display: flex;
710
- align-items: center;
711
- gap: 4px;
712
- transition: all 0.2s ease;
713
- min-height: 16px;
714
- }
715
- .docs-page__nav-title:hover {
716
- cursor: pointer;
717
- color: var(--sd-colour-interactive);
718
- }
719
-
720
- .docs-page__nav-title-caret {
721
- height: 16px;
722
- width: 16px;
723
- display: flex;
724
- align-items: center;
725
- justify-content: center;
726
- opacity: 0.6;
727
- margin-block-end: 2px;
728
- transition: all 0.2s ease;
729
- }
730
- .docs-page__nav-title--open .docs-page__nav-title-caret {
731
- transform: rotate(90deg)
732
-
733
- }
734
-
735
- .docs-page__nav > li:first-child .docs-page__nav-title {
736
- margin-block-start: 0;
737
- }
738
-
739
- .docs-page__button-grid {
740
- margin-block-start: 2.4rem;
741
- margin-block-end: 2.4rem;
742
- display: flex;
743
- flex-direction: row;
744
- align-items: center;
745
- }
746
-
747
- .docs-page__fla-button-container {
748
- position: fixed;
749
- top: 90px;
750
- right:32px;
751
- z-index: 10;
752
- height: 4.8rem;
753
- width: 4.8rem;
754
- }
755
- .docs-page__fla-button {
756
- display: flex;
757
- align-items: center;
758
- justify-content: center;
759
- border-radius: 9999px;
760
- cursor: pointer;
761
- height: 4.8rem;
762
- width: 4.8rem;
763
- /* position: fixed;
764
- top: 90px;
765
- right:32px;
766
- z-index: 10; */
767
- /* left: calc(100vw - 380px); */
768
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 6px 24px rgba(0, 0, 0, 0.16);
769
- transition: all 0.2s ease;
770
- background-color: var(--sd-colour-background__base--00);
771
- }
772
- .docs-page__fla-button i[class^="icon-"] {
773
- color: var(--color-text);
774
- transition: all 0.2s ease;
775
- opacity: 0.8;
776
- }
777
- .docs-page__fla-button:hover {
778
- box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16), 0 6px 32px rgba(0, 0, 0, 0.18);
779
- }
780
- .docs-page__fla-button:hover i[class^="icon-"] {
781
- opacity: 1;
782
- }
783
- .docs-page__fla-button:active {
784
- background-color: var(--docs-page-color-highlight);
785
- box-shadow: 0 0px 2px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.24);
786
- }
787
- .docs-page__fla-button:active i[class^="icon-"] {
788
- color: hsl(0, 0%, 100%);
789
- }
790
- .docs-page__graphic-btn {
791
- min-width: 240px;
792
- margin-right: 16px;
793
- background-color: var(--docs-page-color-bg__graphic-btn);
794
- box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
795
- transition: 0.2s ease-in-out;
796
- height: 72px;
797
- padding: 8px;
798
- display: flex;
799
- flex-direction: row;
800
- border-radius: 4px;
801
- overflow: hidden;
802
- cursor: pointer;
803
- text-decoration: none;
804
- }
805
- .docs-page__graphic-btn:hover {
806
- box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(31, 17, 17, 0.16);
807
- transform: translate(0, -1px);
808
- }
809
- .docs-page__graphic-btn-graphic {
810
- width: 56px;
811
- border-radius: 3px;
812
- background: var(--docs-page-color-bg__graphic-btn-graphic);
813
- position: relative;
814
- }
815
- .docs-page__graphic-btn-graphic img {
816
- max-width: 100%;
817
- height: auto;
818
- }
819
- .docs-page__graphic-btn-label {
820
- display: flex;
821
- flex-direction: column;
822
- justify-content: center;
823
- align-items: flex-start;
824
- padding: 0 0.8rem 0 1.6rem;
825
- color: var(--docs-page-color-primary);
826
- font-size: 1.6rem;
827
- line-height: 140%;
828
- pointer-events: none;
829
- }
830
- .docs-page__small-text {
831
- font-size: 1.3rem;
832
- font-weight: 400;
833
- color: var(--color-text-light);
834
- opacity: 0.7;
835
- }
836
-
837
- .docs-page__nav-item {
838
- position: relative;
839
- }
840
- .docs-page__nav-item a {
841
- font-size: 14px;
842
- line-height: 32px;
843
- display: block;
844
- margin-inline-start: 22px;
845
- padding-inline-start: 12px;
846
- color: var(--color-text-light);
847
- background-color: rgba(255, 255, 255, 0);
848
- cursor: pointer;
849
- text-decoration: none;
850
- transition: all ease 0.2s;
851
- border-inline-start: 1px solid var(--color-border-line--medium);
852
- }
853
- .docs-page__nav-item a:hover {
854
- color: var(--color-text);
855
- border-color: var(--color-border-line--strong);
856
- /* background-color: var(--docs-page-color-bg-00); */
857
- }
858
- .docs-page__nav-item a:active {
859
- color: var(--color-text);
860
- }
861
-
862
- .docs-page__nav-item a.docs-page__nav-item--active {
863
- border-color: var(--sd-colour-interactive);
864
- font-weight: 400;
865
- color: var(--sd-colour-interactive);
866
- box-shadow: -1px 0 0 var(--sd-colour-interactive), inset 1px 0 0 var(--sd-colour-interactive);
867
- }
868
-
869
- .docs-page__nav-item.docs-page__nav-item--active a {
870
- color: var(--sd-colour-interactive);
871
- }
872
-
873
- .docs-page__section {
874
- padding: 40px 0 0;
875
- }
876
- .docs-page__section:last-child {
877
- padding: 40px 0 100px;
878
- }
879
- .docs-page__pre {
880
- display: block;
881
- padding: 9.5px;
882
- margin: 0;
883
- font-size: 13px;
884
- line-height: 1.42857143;
885
- color: hsl(214, 13%, 20%);
886
- word-break: break-all;
887
- word-wrap: break-word;
888
- background-color: #eee;
889
- border: 1px solid #ccc;
890
- border-radius: 2px;
891
- }
892
- .docs-page__code-window {
893
- border: 1px solid hsla(0, 0%, 48%, 0.2);
894
- border-radius: var(--b-radius--large);
895
- margin: 10px 0 20px;
896
- -webkit-box-shadow: 0 2px 8px hsla(0, 0%, 0%, 0.07);
897
- box-shadow: 0 2px 8px hsla(0, 0%, 0%, 0.07);
898
- }
899
- .docs-page__window-bar {
900
- padding: 10px;
901
- border-top: 1px solid var(--docs-page-border__window-bar--top);
902
- border-bottom: 1px solid var(--docs-page-border__window-bar--bottom);
903
- background: var(--docs-page-color-bg__window-bar);
904
- border-radius: var(--b-radius--large) var(--b-radius--large) 0 0;
905
- }
906
- .docs-page__window-bar>a, .docs-page__window-bar>span {
907
- font-size: 16px;
908
- color: #999;
909
- padding: 0 4px;
910
- text-decoration: none;
911
- }
912
- .docs-page__window-bar>a.active {
913
- color: #5eadc8;
914
- }
915
- .docs-page__code--large {
916
- font-size: 1.5rem;
917
- color: #555;
918
- font-family: 'Source Code Pro', monospace;
919
- line-height: 150%;
920
- font-weight: 400;
921
- }
922
- .docs-page__code-example {
923
- padding: 20px;
924
- }
925
- .docs-page__code-example--grey {
926
- background-color: #f8f8f8;
927
- }
928
- .docs-page__code-example .docs-page__content-block {
929
- margin-bottom: 20px;
930
- }
931
- .docs-page__code-example .docs-page__content-row > .btn,
932
- .docs-page__code-example .docs-page__content-row > .label,
933
- .docs-page__code-example .docs-page__content-row > .badge,
934
- .docs-page__code-example .docs-page__content-row > .label-icon {
935
- margin-right: 12px;
936
- margin-bottom: 14px;
937
- }
938
-
939
- .docs-page__content-row {
940
- margin-bottom: 20px;
941
- }
942
- .docs-page__content-row--no-margin {
943
- margin-bottom: 0;
944
- }
945
- .docs-page__content-row--ui-dark,
946
- .docs-page__content-row--white {
947
- background: #3b3b3b;
948
- padding: 8px;
949
- border-radius: 4px;
950
- }
951
- .docs-page__content-row--white {
952
- background: var(--docs-page-color-bg__content-row--white);
953
- }
954
- .docs-page__content-row--gray {
955
- background: var(--docs-page-color-bg__content-row--grey);;
956
- padding: 10px;
957
- }
958
- .docs-page__code-markup {
959
- display: none;
960
- background-color: hsl(214, 13%, 10%);
961
- padding: 16px 16px 16px 36px;
962
- overflow-y: scroll;
963
- border-radius: 0 0 var(--b-radius--large) var(--b-radius--large);
964
- }
965
- .docs-page__code-markup ol {
966
- margin-left: 10px;
967
- }
968
-
969
-
970
- pre.prettyprint {
971
- font-family: 'Source Code Pro', monospace;
972
- font-size: 14px;
973
- line-height: 150%;
974
- font-weight: 300;
975
- }
976
-
977
- .docs-page__paragraph code {
978
- font-size: 85%;
979
- padding: 0 0.4em;
980
- background-color: var(--sd-colour-interactive--alpha-20);
981
- border-radius: 3px;
982
- font-family: 'Source Code Pro', monospace;
983
- font-weight: 400;
984
- line-height: inherit;
985
- vertical-align: baseline;
986
- color: var(--color-text);
987
- }
988
-
989
- .docs-page__unordered-list {
990
- font-size: 16px;
991
- margin: 1em 0 2em;
992
- line-height: 150%;
993
- font-weight: 300;
994
- }
995
- .docs-page__unordered-list li {
996
- list-style-type: disc;
997
- margin-bottom: 0.25em;
998
- margin-left: 1.5em;
999
- }
1000
- .docs-page__unordered-list--plain {
1001
- font-weight: 300;
1002
- }
1003
- .docs-page__unordered-list--plain li {
1004
- font-weight: 300;
1005
- list-style-type: none;
1006
- margin-left: 0;
1007
- }
1008
-
1009
- .docs-page__code-example .flex-grid .flex-grid__item,
1010
- .docs-page__code-example .grid .grid__item {
1011
- background-color: #fff;
1012
- min-height: 60px;
1013
- border: 1px dotted rgba(0,0,0,0.2);
1014
- }
1015
- .docs-page__code-example .grid.grid--boxed .grid__item {
1016
- background-color: transparent;
1017
- }
1018
- .docs-page__code-example .grid.grid--boxed.grid--boxed-styled .grid__item {
1019
- background-color: #fff;
1020
- }
1021
- .docs-page__code-example .grid .grid .grid__item {
1022
- border: 1px dotted #5eadc8;
1023
- }
1024
- .docs-page__code-example .flex-grid .flex-grid__item {
1025
- padding: 20px;
1026
- }
1027
- .docs-page__code-example .flex-grid.flex-grid--boxed .flex-grid__item {
1028
- background-color: var(--docs-page-color-bg-10) !important;
1029
- border:none;
1030
- border-radius: 2px;
1031
- box-shadow: 0 1px 4px rgba(0,0,0,.12) !important;
1032
- }
1033
- .docs-page__icon-font-list {
1034
- margin: 40px auto 20px;
1035
- max-width: 1200px;
1036
- display: grid;
1037
- grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
1038
- transition: all 0.2s ease;
1039
- }
1040
- .docs-page__icon-font-list li {
1041
- display: flex;
1042
- flex-direction: column;
1043
- align-items: center;
1044
- padding: 24px 0;
1045
- margin: 0 24px;
1046
- box-sizing: border-box;
1047
- border-radius: 2px;
1048
- transition: all 0.2s ease-in-out;
1049
- }
1050
- .docs-page__icon-font-list li:hover {
1051
- 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);
1052
- }
1053
-
1054
- .docs-page__icon-font-list li i {
1055
- margin-bottom: 8px;
1056
- }
1057
-
1058
- .docs-page__container {
1059
- max-width: 1200px;
1060
- margin: 30px auto 0;
1061
- }
1062
- .docs-page__container--large {
1063
- max-width: 1200px;
1064
- }
1065
- .docs-page__container--medium {
1066
- max-width: 1000px;
1067
- }
1068
- .docs-page__container--full-h {
1069
- height: calc(100vh - 64px);
1070
- margin: 0 auto;
1071
- display: flex;
1072
- align-items: center;
1073
- justify-content: center;
1074
- }
1075
-
1076
-
1077
- .docs-page__container .docs-page__code-window {
1078
- max-width: none !important;
1079
- }
1080
-
1081
- .docs-page__container .docs-page__h2,
1082
- .docs-page__container .docs-page__h3,
1083
- .docs-page__container .docs-page__paragraph,
1084
- .docs-page__container .docs-page__paragraph--small {
1085
- max-width: 85ch;
1086
- }
1087
-
1088
- .docs-page__content-block {
1089
- display: flex;
1090
- flex-direction: row;
1091
- margin: 0 -16px;
1092
- }
1093
- .docs-page__content-block + .docs-page__content-block {
1094
- margin-top: 32px;
1095
- }
1096
- .docs-page__content-block-item {
1097
- flex: 1 1;
1098
- margin: 0 16px;
1099
- }
1100
- /* .docs-page__figure {
1101
-
1102
- } */
1103
- .docs-page__figure-media {
1104
- width: 100%;
1105
- background: #F8F8F8;
1106
- border: 1px solid #cccccc;
1107
- min-height: 200px;
1108
- display: flex;
1109
- align-items: center;
1110
- justify-content: center;
1111
- border-radius: 4px;
1112
- }
1113
- .docs-page__figure-media img {
1114
- max-width: 100%;
1115
- display: block;
1116
- }
1117
- .docs-page__figure-media--light {
1118
- background: #FFF;
1119
- }
1120
- .docs-page__figure-caption {
1121
- font-size: 14px;
1122
- margin-top: 12px;
1123
- line-height: 150%;
1124
- }
1125
- .docs-page__caption-heading {
1126
- border-top: 6px solid;
1127
- font-size: 15px;
1128
- font-weight: 500;
1129
- margin: 0;
1130
- max-width: 100%;
1131
- padding: 6px 0 6px 8px;
1132
- margin-bottom: 12px;
1133
- line-height: 120%;
1134
- }
1135
- .docs-page__caption-heading--do {
1136
- border-color: rgba(68, 165, 72, 1);
1137
- color: rgb(47, 134, 51);
1138
- background-color: rgba(68, 165, 72, 0.1);
1139
- }
1140
- .docs-page__caption-heading--dont {
1141
- border-color: rgba(222, 44, 44, 1);
1142
- color: rgb(197, 38, 38);
1143
- background-color: rgba(222, 44, 44, 0.1);
1144
- }
1145
- .docs-page__caption-heading--caution {
1146
- border-color: rgba(241, 162, 36, 1);
1147
- color: rgb(225, 150, 25);
1148
- background-color: rgba(241, 162, 36, 0.1);
1149
- }
1150
-
1151
- .docs-page__text-align--center {
1152
- text-align: center;
1153
- margin-right: auto !important;
1154
- margin-left: auto !important;
1155
- }
1156
-
1157
- .docs-page__icon-font-list li span {
1158
- font-size: 13px;
1159
- text-align: center;
1160
- color: #747474;
1161
- }
1162
-
1163
- .docs-page__icon-font-list--dark {
1164
- background: #666;
1165
- color: lightgray !important;
1166
- }
1167
- .docs-page__icon-font-list--dark span {
1168
- color: lightgray !important;
1169
- }
1170
-
1171
- .docs-page__playground_picker {
1172
- text-align: end;
1173
- }
1174
-
1175
- .docs-page__playground_picker .dropdown__toggle {
1176
- color: white !important;
1177
- letter-spacing: 0.02em;
1178
- }
1179
-
1180
- .docs-page__playground_picker .dropdown__toggle .dropdown__caret {
1181
- border-top-color: #fff !important;
1182
- }
1183
-
1184
- [react-playground] {
1185
- grid-column: 2/3;
1186
- }
1187
-
1188
- .docs-page__grid-page-example {
1189
- position: relative;
1190
- min-height: 600px;
1191
- background-color: var(--sd-colour-background__main-list);
1192
- overflow: hidden;
1193
- border: 1px solid var(--color-border-line--light);
1194
- display: grid;
1195
- grid-template-rows: auto 1fr;
1196
- grid-template-columns: auto 1fr;
1197
- }
1198
- .docs-page__grid-page-example__top {
1199
- grid-row: 1/2;
1200
- grid-column: 1/3;
1201
- }
1202
- .docs-page__grid-page-example__top .sd-top-menu {
1203
- position: static !important;
1204
- }
1205
- .docs-page__grid-page-example__side {
1206
- grid-row: 2/3;
1207
- grid-column: 1/2;
1208
- }
1209
- .docs-page__grid-page-example__main {
1210
- grid-row: 2/3;
1211
- grid-column: 2/3;
1212
- }
1213
-
1214
- #scrollContainer {
1215
- overflow: scroll;
1216
- scroll-behavior: smooth;
1217
- }
1218
-
1219
- /* ---------------- COLOR SWATCHES ---------------- */
1220
-
1221
- .doc-swatches__grid {
1222
- display: grid;
1223
- grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
1224
- grid-column-gap: 1.6rem;
1225
- grid-row-gap: 2.4rem;
1226
- margin: 0;
1227
- }
1228
-
1229
- .doc-swatches__wrapper {
1230
- flex: auto;
1231
- }
1232
-
1233
- .doc-swatches__title {
1234
- padding: 6px 12px;
1235
- margin-bottom: 4px;
1236
- text-transform: capitalize;
1237
- }
1238
-
1239
- .doc-swatches__title h3 {
1240
- font-size: 14px;
1241
- font-weight: 400;
1242
- font-family: 'Merriweather', serif;
1243
- letter-spacing: 0.02em;
1244
- margin: 0;
1245
- color: #fff;
1246
- }
1247
-
1248
-
1249
- .doc-swatches__swatch-item:nth-child(n+7) {
1250
- color: #fff;
1251
- }
1252
-
1253
- .doc-swatches__swatch-item {
1254
- padding: 6px 12px;
1255
- display: block;
1256
- font-size: 12px;
1257
- letter-spacing: 0.06em;
1258
- }
1259
-
1260
- .docs-page__example-box {
1261
- background-color: var(--docs-page-color-bg__example-box);
1262
- display: flex;
1263
- align-items: center;
1264
- justify-content: center;
1265
- min-height: 16rem;
1266
- border-radius: 4px;
1267
- }
1268
- .docs-page__example-box p {
1269
- text-align: center;
1270
- color: #969696;
1271
- font-size: 1.6rem;
1272
- font-weight: 300;
1273
- margin: 0;
1274
- }
1275
-
1276
- .docs-page__full-width-helper { /* helps to override some docs page containers in full width layouts */
1277
- width: 100vw;
1278
- }
1279
-
1280
- .docs-page__paragraph--light {
1281
- font-size: 15px;
1282
- font-weight: 300;
1283
- line-height: 150%;
1284
- color: var(--color-text-light);
1285
- }
1286
- .docs-page__color--primary {
1287
- color: var(--docs-page-color-primary) !important;
1288
- }
1289
- .docs-page__color--highlight {
1290
- color: var(--docs-page-color-highlight) !important;
1291
- }
1292
-
1293
- .docs-page__test-helper {
1294
- padding: 4px !important;
1295
- border: 1px dashed rgba(255, 0, 255, 0.4);
1296
- border-radius: 2px;
1297
- }
1298
-
1299
- .docs-page__test-helper-2 {
1300
- padding: 4px !important;
1301
- border: 1px dashed rgba(100, 100, 100, 0.3);
1302
- border-radius: 2px;
1303
- }
1304
-
1305
- doc-gif-img:hover img {
1306
- cursor: pointer;
1307
- }
1308
-
1309
- .docs-page__container table {
1310
- margin-bottom: 32px;
1311
- border-color: var(--docs-page-border__table) !important;
1312
- }
1313
- .docs-page__container table th,
1314
- .docs-page__container table td {
1315
- border-color: var(--docs-page-border__table) !important;
1316
- }
1317
-
1318
- .docs-page__container table:not(.utilities-table) tr td:nth-child(3) {
1319
- white-space: nowrap;
1320
- }
1321
-
1322
- .docs-page__container table:not(.utilities-table) tr:nth-child(even),
1323
- .docs-page__container table:not(.utilities-table) thead tr {
1324
- background-color: var(--docs-page-bg__table-tr-even);
1325
- }
1326
-
1327
-
1328
- .docs-page__container table.utilities-table {
1329
- width: 100%;
1330
- border-block-start: none !important;
1331
- margin: 0;
1332
- font-size: 14px;
1333
- }
1334
- .docs-page__container table.utilities-table thead th {
1335
- font-size: 14px;
1336
- position: sticky;
1337
- top: 0;
1338
- background-color: var(--docs-page-color-bg-00);
1339
- border-bottom: ;
1340
- }
1341
-
1342
- .docs-page__container table.utilities-table tbody td {
1343
- width: 100%;
1344
- font-family: monospace;
1345
- line-height: 1.4;
1346
- color: var(--color-text-light);
1347
- }
1348
- .docs-page__container table.utilities-table tbody td:first-child {
1349
- min-width: 280px;
1350
- width: auto;
1351
- color: var(--color-text);
1352
- }
1353
- .docs-page__container table.utilities-table tbody td:nth-child(3){
1354
- min-width: 200px;
1355
- width: auto;
1356
- text-align: end;
1357
- padding-inline-end: var(--space--1-5);
1358
- font-weight: 700;
1359
- }
1360
-
1361
- .docs-page__container table.utilities-table tbody tr.utilities-table__divider-row td {
1362
- color: var(--color-text);
1363
- font-family: 'Roboto', sans-serif;
1364
- font-size: 13px;
1365
- letter-spacing: 0.025em;
1366
- font-weight: 500;
1367
- padding-block: 8px !important;
1368
- background-color: var(--docs-page-color-bg__table-divider-row);
1369
- }
1370
-
1371
- .utilities-table__container {
1372
- position: relative;
1373
- max-height: 438px;
1374
- overflow-y: auto;
1375
- border-block-start:1px solid var(--sd-colour-line--medium);
1376
- margin-block-end: var(--space--4);
1377
- }
1378
-
1379
- .utilities-table__container--no-height {
1380
- max-height: none;
1381
- }
1382
-
1383
- .docs-page__container .doc-text--highlight {
1384
- color: var(--docs-page-color-primary) !important;
1385
- }
1386
-
1387
- table.utilities-table td .border-example-box {
1388
- min-width: 160px;
1389
- height: 32px;
1390
- }
1391
-
1392
- /* -------------- END COLOR SWATCHES -------------- */
1393
- /* -------------- PrismJS overrides -------------- */
1394
-
1395
- code[class*="language-"],
1396
- pre[class*="language-"] {
1397
- font-family: 'Source Code Pro', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
1398
- font-size: 1.1em;
1399
- border-radius: var(--b-radius--large);
1400
- }
1401
- pre[class*="language-"] {
1402
- background: hsl(214, 13%, 8%);
1403
- }
1404
-
1405
- /*// extra large screen media query /100em = 1600px/*/
1406
- @media only screen and (min-width: 100em) {
1407
- .docs-page__section {
1408
- max-width: 80%;
1409
- }
1410
- }
1411
-
1412
-
1413
- /* -------------- DOC PAGE SPECIFIC OVERRIDES -------------- */
1414
-
1415
- doc-react-playground {
1416
- display: contents;
1417
- }
1418
-
1419
- .docs-page doc-react-playground .sd-main-content-grid {
1420
- grid-column: 2 / 3;
1421
- overflow: auto;
1422
- }
1423
-
1424
- .docs-page .sd-editor-grid {
1425
- grid-row: 2 / 3;
1426
- grid-column: 2 / 3;
1427
- overflow-y: auto;
1428
- }
1429
- .docs-page doc-react-playground .sd-editor-grid {
1430
- grid-row: 2 / 3;
1431
- grid-column: 2 / 3;
1432
- overflow-y: auto;
1433
- }
1434
-
1435
- /* ------------ END DOC PAGE SPECIFIC OVERRIDES ------------ */@charset "UTF-8";
281
+ html,
282
+ body,
283
+ div,
284
+ span,
285
+ applet,
286
+ object,
287
+ iframe,
288
+ h1,
289
+ h2,
290
+ h3,
291
+ h4,
292
+ h5,
293
+ h6,
294
+ p,
295
+ blockquote,
296
+ pre,
297
+ a,
298
+ abbr,
299
+ acronym,
300
+ address,
301
+ big,
302
+ cite,
303
+ code,
304
+ del,
305
+ dfn,
306
+ em,
307
+ img,
308
+ ins,
309
+ kbd,
310
+ q,
311
+ s,
312
+ samp,
313
+ small,
314
+ strike,
315
+ strong,
316
+ sub,
317
+ sup,
318
+ tt,
319
+ var,
320
+ b,
321
+ u,
322
+ i,
323
+ center,
324
+ dl,
325
+ dt,
326
+ dd,
327
+ ol,
328
+ ul,
329
+ li,
330
+ fieldset,
331
+ form,
332
+ label,
333
+ legend,
334
+ table,
335
+ caption,
336
+ tbody,
337
+ tfoot,
338
+ thead,
339
+ tr,
340
+ th,
341
+ td,
342
+ article,
343
+ aside,
344
+ canvas,
345
+ details,
346
+ embed,
347
+ figure,
348
+ figcaption,
349
+ footer,
350
+ header,
351
+ hgroup,
352
+ menu,
353
+ nav,
354
+ output,
355
+ ruby,
356
+ section,
357
+ summary,
358
+ time,
359
+ mark,
360
+ audio,
361
+ video {
362
+ margin: 0;
363
+ padding: 0;
364
+ border: 0;
365
+ font-size: 100%;
366
+ font: inherit;
367
+ vertical-align: baseline;
368
+ }
369
+ /* HTML5 display-role reset for older browsers */
370
+ article,
371
+ aside,
372
+ details,
373
+ figcaption,
374
+ figure,
375
+ footer,
376
+ header,
377
+ hgroup,
378
+ menu,
379
+ nav,
380
+ section {
381
+ display: block;
382
+ }
383
+ body {
384
+ line-height: 1;
385
+ }
386
+ ol,
387
+ ul {
388
+ list-style: none;
389
+ }
390
+ blockquote,
391
+ q {
392
+ quotes: none;
393
+ }
394
+ blockquote:before,
395
+ blockquote:after,
396
+ q:before,
397
+ q:after {
398
+ content: '';
399
+ content: none;
400
+ }
401
+ table {
402
+ border-collapse: collapse;
403
+ border-spacing: 0;
404
+ }
405
+ :root {
406
+ color: hsla(214, 13%, 20%, 1);
407
+ --docs-page-color-bg-default: hsl(0, 0%, 97%);
408
+ --docs-page-color-bg-00: hsla(214, 13%, 96%, 1);
409
+ --docs-page-color-bg-10: hsla(0, 0%, 100%, 1);
410
+ --docs-page-color-bg__window-bar: hsl(214, 13%, 90%);
411
+ --docs-page-color-bg__aside: hsla(214, 13%, 92%, 1);
412
+ --docs-page-color-bg__header: hsl(216, 45%, 24%);
413
+
414
+ --docs-page-color-bg__content-row--white: hsla(0, 0%, 100%, 1);
415
+ --docs-page-color-bg__content-row--grey: hsla(0, 0%, 95%, 1);
416
+ --docs-page-color-bg__example-box: hsla(214, 13%, 94%, 1);
417
+ --docs-page-color-bg__graphic-btn: hsla(0, 0%, 100%, 1);
418
+ --docs-page-color-bg__graphic-btn-graphic: linear-gradient(
419
+ 180deg,
420
+ hsla(165, 57%, 95%, 1) 4%,
421
+ hsla(191, 53%, 86%, 1) 96%
422
+ );
423
+
424
+ --docs-page-border__window-bar--top: hsla(0, 0%, 100%, 0.9);
425
+ --docs-page-border__window-bar--bottom: hsla(0, 0%, 88%, 1);
426
+ --docs-page-border__table: hsla(0, 0%, 0%, 0.16);
427
+ --docs-page-color-bg__table-divider-row: hsla(0, 0%, 100%, 0.8);
428
+
429
+ --docs-page-bg__table-tr-even: hsla(214, 13%, 50%, 0.08);
430
+ }
431
+
432
+ :root [data-theme='dark-ui'] {
433
+ color: hsla(214, 13%, 96%, 1);
434
+ --docs-page-color-bg-default: hsla(214, 13%, 96%, 1);
435
+ --docs-page-color-bg-00: hsla(214, 13%, 12%, 1);
436
+ --docs-page-color-bg-10: hsla(214, 13%, 12%, 1);
437
+ --docs-page-color-bg__window-bar: hsl(214, 13%, 8%);
438
+ --docs-page-color-bg__aside: hsla(214, 13%, 16%, 1);
439
+ --docs-page-color-bg__header: hsl(216, 40%, 18%);
440
+
441
+ --docs-page-color-bg__content-row--white: hsla(0, 0%, 8%, 1);
442
+ --docs-page-color-bg__content-row--grey: hsla(0, 0%, 12%, 1);
443
+ --docs-page-color-bg__example-box: hsla(214, 13%, 18%, 1);
444
+ --docs-page-color-bg__graphic-btn: hsla(214, 13%, 8%, 1);
445
+ --docs-page-color-bg__graphic-btn-graphic: hsla(214, 13%, 14%, 1);
446
+
447
+ --docs-page-border__window-bar--top: hsla(0, 0%, 91%, 0.02);
448
+ --docs-page-border__window-bar--bottom: hsla(0, 0%, 88%, 0.12);
449
+ --docs-page-border__table: hsla(0, 0%, 100%, 0.2);
450
+ }
451
+ .docs-page {
452
+ font-family: 'Roboto', sans-serif;
453
+ font-weight: 400;
454
+ line-height: 140%;
455
+ margin: 0;
456
+ padding: 0;
457
+ background-color: var(--docs-page-color-bg-default);
458
+ display: grid;
459
+ grid-template-columns: auto 1fr;
460
+ grid-template-rows: auto 1fr;
461
+ height: 100vh;
462
+ }
463
+
464
+ .docs-page {
465
+ --docs-page-color-primary: #1397b9;
466
+ --docs-page-color-highlight: #33c5a0;
467
+ }
468
+
469
+ hr {
470
+ border: transparent;
471
+ border: 1px dotted var(--sd-colour-line--medium);
472
+ border-width: 1px 0 0;
473
+ margin: 24px 0;
474
+ }
475
+
476
+ h1.docs-page__h1 {
477
+ font-size: 18px;
478
+ font-weight: 400;
479
+ line-height: 100%;
480
+ margin: 0;
481
+ flex-grow: 1;
482
+ font-family: 'Merriweather', serif;
483
+ letter-spacing: 0.02em;
484
+ }
485
+ h2.docs-page__h2 {
486
+ font-size: 32px;
487
+ font-weight: 700;
488
+ line-height: 140%;
489
+ font-family: 'Merriweather', serif;
490
+ margin: 0 0 0.6em 0;
491
+ }
492
+
493
+ h2.docs-page__group-heading {
494
+ font-size: 36px;
495
+ font-weight: 300;
496
+ margin: 1.6em 0 -0.6em 0;
497
+ line-height: 140%;
498
+ color: #747474;
499
+ color: #999;
500
+ }
501
+ h2.docs-page__group-heading:first-of-type {
502
+ margin-top: 1em;
503
+ }
504
+ .docs-page__hero {
505
+ display: flex;
506
+ flex-direction: column;
507
+ align-items: center;
508
+ justify-content: center;
509
+ text-align: center;
510
+ margin: 32px auto;
511
+ }
512
+
513
+ h3.docs-page__h3 {
514
+ font-size: 24px;
515
+ font-weight: 700;
516
+ line-height: 140%;
517
+ font-family: 'Merriweather', serif;
518
+ margin: 2em 0 0.4em 0;
519
+ }
520
+ h3.docs-page__h3--small-top-m {
521
+ margin-top: 1em;
522
+ }
523
+ .docs-page__rule {
524
+ border: none;
525
+ border-width: 2px;
526
+ height: 1px;
527
+ border-radius: 1px;
528
+ background-color: rgba(0, 0, 0, 0.2);
529
+ margin: 0 0 2.4rem 0;
530
+ }
531
+ .docs-page__rule--large {
532
+ border-width: 4px;
533
+ height: 3px;
534
+ border-radius: 2px;
535
+ background-color: var(--docs-page-color-highlight);
536
+ margin: 0 0 2.4rem 0;
537
+ }
538
+
539
+ .docs-page__hero-h2 {
540
+ font-family: 'Merriweather', serif;
541
+ font-size: 28px;
542
+ font-weight: 700;
543
+ line-height: 140%;
544
+ margin: 0 auto 0.6em;
545
+ text-align: center;
546
+ max-width: 400px;
547
+ }
548
+ .docs-page__hero-image {
549
+ margin: 0 auto 1.6em;
550
+ text-align: center;
551
+ max-width: 340px;
552
+ height: auto;
553
+ }
554
+ .docs-page__hero-image.docs-page__hero-image--s {
555
+ max-width: 200px;
556
+ }
557
+ .docs-page__hero-image img {
558
+ max-width: 100%;
559
+ }
560
+ .docs-page__hero-text {
561
+ font-size: 18px;
562
+ line-height: 150%;
563
+ font-weight: 300;
564
+ opacity: 0.75;
565
+ max-width: 480px;
566
+ text-align: center;
567
+ margin: 0 auto 32px;
568
+ }
569
+
570
+ h4.docs-page__h4 {
571
+ font-size: 18px;
572
+ line-height: 140%;
573
+ margin: 0 0 0.4em 0;
574
+ }
575
+ p.docs-page__paragraph,
576
+ div.docs-page__paragraph {
577
+ font-size: 16px;
578
+ margin: 1em 0;
579
+ line-height: 150%;
580
+ font-weight: 300;
581
+ }
582
+ p.docs-page__paragraph em,
583
+ div.docs-page__paragraph em {
584
+ font-style: italic;
585
+ font-weight: 400;
586
+ }
587
+ .docs-page__paragraph--small {
588
+ font-size: 13px;
589
+ margin: 0 0px 20px;
590
+ color: rgb(116, 116, 116);
591
+ }
592
+ p.docs-page__paragraph + .docs-page__paragraph--small {
593
+ margin-top: -10px;
594
+ }
595
+ .docs-page__code-example p.docs-page__paragraph {
596
+ color: #7abcd1;
597
+ }
598
+
599
+ p.docs-page__paragraph--topMarginL {
600
+ margin-top: 3em;
601
+ }
602
+ .docs-page__code-example p.docs-page__paragraph--small {
603
+ margin: -1em 0 1em;
604
+ }
605
+ p.docs-page__paragraph:first-child {
606
+ margin: 0 0 1em;
607
+ }
608
+ p.docs-page__paragraph b,
609
+ div.docs-page__paragraph b {
610
+ font-weight: 400;
611
+ }
612
+ .docs-page .link {
613
+ color: #5eadc8;
614
+ text-decoration: none;
615
+ }
616
+ .docs-page .link:hover {
617
+ text-decoration: underline;
618
+ }
619
+ .docs-page__header {
620
+ background: var(--docs-page-color-bg__header);
621
+ color: white;
622
+ padding: 0 8px 0 24px;
623
+ height: 64px;
624
+ grid-column: 1 / 3;
625
+ grid-row: 1 / 2;
626
+ display: flex;
627
+ align-items: center;
628
+ box-shadow:
629
+ 0 1px 6px rgba(0, 0, 0, 0.2),
630
+ 0 1px 1px rgba(0, 0, 0, 0.12);
631
+ z-index: 2;
632
+ }
633
+ .docs-page__header-button {
634
+ background: transparent;
635
+ color: white;
636
+ padding: 0;
637
+ height: 40px;
638
+ width: 40px;
639
+ border-radius: 999px;
640
+ margin-inline-start: 0px;
641
+ margin-inline-end: 8px;
642
+ display: flex;
643
+ align-items: center;
644
+ justify-content: center;
645
+ opacity: 0.8;
646
+ transition: all 0.2s ease;
647
+ }
648
+ .docs-page__header-button i {
649
+ color: white !important;
650
+ }
651
+ .docs-page__header-button:hover {
652
+ background: hsla(0, 0%, 0%, 0.2);
653
+ opacity: 1;
654
+ }
655
+ .docs-page__header-button:active {
656
+ background: var(--sd-colour-interactive);
657
+ opacity: 1;
658
+ }
659
+ .docs-page__header-logo {
660
+ height: 40px;
661
+ width: 40px;
662
+ margin: 0 16px 0 -8px;
663
+ background: url('/sd-ui-framework__logo.svg') no-repeat;
664
+ background-size: 100%;
665
+ }
666
+ .docs-page__header-nav {
667
+ margin-inline-start: auto;
668
+ margin-inline-end: 16px;
669
+ display: flex;
670
+ flex-direction: row;
671
+ align-items: stretch;
672
+ height: 100%;
673
+ }
674
+ .docs-page__header-nav-item {
675
+ margin-left: auto;
676
+ display: flex;
677
+ flex-direction: row;
678
+ align-items: stretch;
679
+ margin: 0 8px;
680
+ }
681
+ .docs-page__header-nav-link {
682
+ color: #fff;
683
+ font-size: 16px;
684
+ font-weight: 400;
685
+ border-bottom: 3px solid transparent;
686
+ text-decoration: none;
687
+ line-height: 64px;
688
+ transition: all 0.2s ease-in-out;
689
+ padding: 0 2px;
690
+ letter-spacing: 0.01em;
691
+ opacity: 0.75;
692
+ }
693
+ .docs-page__header-nav-link:hover {
694
+ opacity: 1;
695
+ }
696
+ .docs-page__header-nav-item--active .docs-page__header-nav-link {
697
+ border-color: rgb(27, 176, 108);
698
+ opacity: 1;
699
+ }
700
+ .docs-page__header .form__row {
701
+ padding-bottom: 0;
702
+ }
703
+ .docs-page__footer {
704
+ border-top: 1px solid #ddd;
705
+ text-align: center;
706
+ padding: 20px;
707
+ font-size: 12px;
708
+ }
709
+ .docs-page__container-fluid {
710
+ padding: 0;
711
+ grid-column: 1 / 2;
712
+ grid-row: 2 / 3;
713
+ overflow-y: auto;
714
+ padding: 24px 32px 40px 32px;
715
+ }
716
+ .docs-page__sidebar {
717
+ margin: 0;
718
+ transition: all 0.2s ease;
719
+ padding: 20px 0;
720
+ box-sizing: border-box;
721
+ transition: all 0.2s ease;
722
+ grid-column: 1 / 2;
723
+ grid-row: 2 / 3;
724
+ width: 280px;
725
+ background-color: var(--docs-page-color-bg__aside);
726
+ overflow-y: auto;
727
+ }
728
+ .docs-page__sidebar-searchbar-container {
729
+ position: sticky;
730
+ top: -20px;
731
+ margin-top: -20px;
732
+ padding-block: 16px 8px;
733
+ background-color: var(--docs-page-color-bg__aside);
734
+ z-index: 2;
735
+ }
736
+
737
+ .docs-page__sidebar.scroll {
738
+ top: 0;
739
+ margin-top: 0;
740
+ }
741
+ .docs-page__content {
742
+ grid-column: 2 / 3;
743
+ grid-row: 2 / 3;
744
+ overflow-y: auto;
745
+ position: relative;
746
+ background-color: var(--docs-page-color-bg-00);
747
+ }
748
+ .docs-page__masthead {
749
+ display: flex;
750
+ position: relative;
751
+ flex-direction: column;
752
+ align-items: center;
753
+ justify-content: center;
754
+ min-height: 320px;
755
+ background: rgb(30, 176, 108);
756
+ background:
757
+ linear-gradient(to bottom, rgba(96, 184, 194, 0.5) 0%, rgba(55, 78, 112, 1) 100%),
758
+ radial-gradient(at top center, rgba(30, 176, 108, 1) 0%, rgba(0, 0, 0, 0.1) 120%);
759
+ color: #fff;
760
+ }
761
+ .docs-page__masthead-hgroup {
762
+ display: flex;
763
+ position: relative;
764
+ flex-direction: column;
765
+ align-items: center;
766
+ justify-content: center;
767
+ min-height: 320px;
768
+ width: 860px;
769
+ background: url('/masthead-image.png');
770
+ }
771
+ .docs-page__masthead-heading {
772
+ font-family: 'Merriweather', serif;
773
+ text-align: center;
774
+ font-size: 40px;
775
+ font-weight: 700;
776
+ line-height: 100%;
777
+ margin: 32px auto 0;
778
+ }
779
+ .docs-page__masthead-subheading {
780
+ font-size: 18px;
781
+ font-weight: 300;
782
+ line-height: 150%;
783
+ text-align: center;
784
+ margin: 16px auto;
785
+ max-width: 400px;
786
+ opacity: 0.75;
787
+ }
788
+ .docs-page__nav {
789
+ margin-bottom: 40px;
790
+ }
791
+ .docs-page__nav-title {
792
+ text-transform: uppercase;
793
+ color: var(--color-text);
794
+ font-size: 12px;
795
+ font-weight: 500;
796
+ letter-spacing: 0.04em;
797
+ line-height: 1.2;
798
+ margin-block-start: 20px;
799
+ margin-block-end: 6px;
800
+ padding-inline-start: 16px;
801
+ display: flex;
802
+ align-items: center;
803
+ gap: 4px;
804
+ transition: all 0.2s ease;
805
+ min-height: 16px;
806
+ }
807
+ .docs-page__nav-title:hover {
808
+ cursor: pointer;
809
+ color: var(--sd-colour-interactive);
810
+ }
811
+
812
+ .docs-page__nav-title-caret {
813
+ height: 16px;
814
+ width: 16px;
815
+ display: flex;
816
+ align-items: center;
817
+ justify-content: center;
818
+ opacity: 0.6;
819
+ margin-block-end: 2px;
820
+ transition: all 0.2s ease;
821
+ }
822
+ .docs-page__nav-title--open .docs-page__nav-title-caret {
823
+ transform: rotate(90deg);
824
+ }
825
+
826
+ .docs-page__nav > li:first-child .docs-page__nav-title {
827
+ margin-block-start: 0;
828
+ }
829
+
830
+ .docs-page__button-grid {
831
+ margin-block-start: 2.4rem;
832
+ margin-block-end: 2.4rem;
833
+ display: flex;
834
+ flex-direction: row;
835
+ align-items: center;
836
+ }
837
+
838
+ .docs-page__fla-button-container {
839
+ position: fixed;
840
+ top: 90px;
841
+ right: 32px;
842
+ z-index: 10;
843
+ height: 4.8rem;
844
+ width: 4.8rem;
845
+ }
846
+ .docs-page__fla-button {
847
+ display: flex;
848
+ align-items: center;
849
+ justify-content: center;
850
+ border-radius: 9999px;
851
+ cursor: pointer;
852
+ height: 4.8rem;
853
+ width: 4.8rem;
854
+ /* position: fixed;
855
+ top: 90px;
856
+ right:32px;
857
+ z-index: 10; */
858
+ /* left: calc(100vw - 380px); */
859
+ box-shadow:
860
+ 0 4px 12px rgba(0, 0, 0, 0.12),
861
+ 0 6px 24px rgba(0, 0, 0, 0.16);
862
+ transition: all 0.2s ease;
863
+ background-color: var(--sd-colour-background__base--00);
864
+ }
865
+ .docs-page__fla-button i[class^='icon-'] {
866
+ color: var(--color-text);
867
+ transition: all 0.2s ease;
868
+ opacity: 0.8;
869
+ }
870
+ .docs-page__fla-button:hover {
871
+ box-shadow:
872
+ 0 4px 16px rgba(0, 0, 0, 0.16),
873
+ 0 6px 32px rgba(0, 0, 0, 0.18);
874
+ }
875
+ .docs-page__fla-button:hover i[class^='icon-'] {
876
+ opacity: 1;
877
+ }
878
+ .docs-page__fla-button:active {
879
+ background-color: var(--docs-page-color-highlight);
880
+ box-shadow:
881
+ 0 0px 2px rgba(0, 0, 0, 0.18),
882
+ 0 2px 8px rgba(0, 0, 0, 0.24);
883
+ }
884
+ .docs-page__fla-button:active i[class^='icon-'] {
885
+ color: hsl(0, 0%, 100%);
886
+ }
887
+ .docs-page__graphic-btn {
888
+ min-width: 240px;
889
+ margin-right: 16px;
890
+ background-color: var(--docs-page-color-bg__graphic-btn);
891
+ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
892
+ transition: 0.2s ease-in-out;
893
+ height: 72px;
894
+ padding: 8px;
895
+ display: flex;
896
+ flex-direction: row;
897
+ border-radius: 4px;
898
+ overflow: hidden;
899
+ cursor: pointer;
900
+ text-decoration: none;
901
+ }
902
+ .docs-page__graphic-btn:hover {
903
+ box-shadow:
904
+ 0 1px 4px rgba(0, 0, 0, 0.1),
905
+ 0 2px 8px rgba(31, 17, 17, 0.16);
906
+ transform: translate(0, -1px);
907
+ }
908
+ .docs-page__graphic-btn-graphic {
909
+ width: 56px;
910
+ border-radius: 3px;
911
+ background: var(--docs-page-color-bg__graphic-btn-graphic);
912
+ position: relative;
913
+ }
914
+ .docs-page__graphic-btn-graphic img {
915
+ max-width: 100%;
916
+ height: auto;
917
+ }
918
+ .docs-page__graphic-btn-label {
919
+ display: flex;
920
+ flex-direction: column;
921
+ justify-content: center;
922
+ align-items: flex-start;
923
+ padding: 0 0.8rem 0 1.6rem;
924
+ color: var(--docs-page-color-primary);
925
+ font-size: 1.6rem;
926
+ line-height: 140%;
927
+ pointer-events: none;
928
+ }
929
+ .docs-page__small-text {
930
+ font-size: 1.3rem;
931
+ font-weight: 400;
932
+ color: var(--color-text-light);
933
+ opacity: 0.7;
934
+ }
935
+
936
+ .docs-page__nav-item {
937
+ position: relative;
938
+ }
939
+ .docs-page__nav-item a {
940
+ font-size: 14px;
941
+ line-height: 32px;
942
+ display: block;
943
+ margin-inline-start: 22px;
944
+ padding-inline-start: 12px;
945
+ color: var(--color-text-light);
946
+ background-color: rgba(255, 255, 255, 0);
947
+ cursor: pointer;
948
+ text-decoration: none;
949
+ transition: all ease 0.2s;
950
+ border-inline-start: 1px solid var(--color-border-line--medium);
951
+ }
952
+ .docs-page__nav-item a:hover {
953
+ color: var(--color-text);
954
+ border-color: var(--color-border-line--strong);
955
+ /* background-color: var(--docs-page-color-bg-00); */
956
+ }
957
+ .docs-page__nav-item a:active {
958
+ color: var(--color-text);
959
+ }
960
+
961
+ .docs-page__nav-item a.docs-page__nav-item--active {
962
+ border-color: var(--sd-colour-interactive);
963
+ font-weight: 400;
964
+ color: var(--sd-colour-interactive);
965
+ box-shadow:
966
+ -1px 0 0 var(--sd-colour-interactive),
967
+ inset 1px 0 0 var(--sd-colour-interactive);
968
+ }
969
+
970
+ .docs-page__nav-item.docs-page__nav-item--active a {
971
+ color: var(--sd-colour-interactive);
972
+ }
973
+
974
+ .docs-page__section {
975
+ padding: 40px 0 0;
976
+ }
977
+ .docs-page__section:last-child {
978
+ padding: 40px 0 100px;
979
+ }
980
+ .docs-page__pre {
981
+ display: block;
982
+ padding: 9.5px;
983
+ margin: 0;
984
+ font-size: 13px;
985
+ line-height: 1.42857143;
986
+ color: hsl(214, 13%, 20%);
987
+ word-break: break-all;
988
+ word-wrap: break-word;
989
+ background-color: #eee;
990
+ border: 1px solid #ccc;
991
+ border-radius: 2px;
992
+ }
993
+ .docs-page__code-window {
994
+ border: 1px solid hsla(0, 0%, 48%, 0.2);
995
+ border-radius: var(--b-radius--large);
996
+ margin: 10px 0 20px;
997
+ -webkit-box-shadow: 0 2px 8px hsla(0, 0%, 0%, 0.07);
998
+ box-shadow: 0 2px 8px hsla(0, 0%, 0%, 0.07);
999
+ }
1000
+ .docs-page__window-bar {
1001
+ padding: 10px;
1002
+ border-top: 1px solid var(--docs-page-border__window-bar--top);
1003
+ border-bottom: 1px solid var(--docs-page-border__window-bar--bottom);
1004
+ background: var(--docs-page-color-bg__window-bar);
1005
+ border-radius: var(--b-radius--large) var(--b-radius--large) 0 0;
1006
+ }
1007
+ .docs-page__window-bar > a,
1008
+ .docs-page__window-bar > span {
1009
+ font-size: 16px;
1010
+ color: #999;
1011
+ padding: 0 4px;
1012
+ text-decoration: none;
1013
+ }
1014
+ .docs-page__window-bar > a.active {
1015
+ color: #5eadc8;
1016
+ }
1017
+ .docs-page__code--large {
1018
+ font-size: 1.5rem;
1019
+ color: #555;
1020
+ font-family: 'Source Code Pro', monospace;
1021
+ line-height: 150%;
1022
+ font-weight: 400;
1023
+ }
1024
+ .docs-page__code-example {
1025
+ padding: 20px;
1026
+ }
1027
+ .docs-page__code-example--grey {
1028
+ background-color: #f8f8f8;
1029
+ }
1030
+ .docs-page__code-example .docs-page__content-block {
1031
+ margin-bottom: 20px;
1032
+ }
1033
+ .docs-page__code-example .docs-page__content-row > .btn,
1034
+ .docs-page__code-example .docs-page__content-row > .label,
1035
+ .docs-page__code-example .docs-page__content-row > .badge,
1036
+ .docs-page__code-example .docs-page__content-row > .label-icon {
1037
+ margin-right: 12px;
1038
+ margin-bottom: 14px;
1039
+ }
1040
+
1041
+ .docs-page__content-row {
1042
+ margin-bottom: 20px;
1043
+ }
1044
+ .docs-page__content-row--no-margin {
1045
+ margin-bottom: 0;
1046
+ }
1047
+ .docs-page__content-row--ui-dark,
1048
+ .docs-page__content-row--white {
1049
+ background: #3b3b3b;
1050
+ padding: 8px;
1051
+ border-radius: 4px;
1052
+ }
1053
+ .docs-page__content-row--white {
1054
+ background: var(--docs-page-color-bg__content-row--white);
1055
+ }
1056
+ .docs-page__content-row--gray {
1057
+ background: var(--docs-page-color-bg__content-row--grey);
1058
+ padding: 10px;
1059
+ }
1060
+ .docs-page__code-markup {
1061
+ display: none;
1062
+ background-color: hsl(214, 13%, 10%);
1063
+ padding: 16px 16px 16px 36px;
1064
+ overflow-y: scroll;
1065
+ border-radius: 0 0 var(--b-radius--large) var(--b-radius--large);
1066
+ }
1067
+ .docs-page__code-markup ol {
1068
+ margin-left: 10px;
1069
+ }
1070
+
1071
+ pre.prettyprint {
1072
+ font-family: 'Source Code Pro', monospace;
1073
+ font-size: 14px;
1074
+ line-height: 150%;
1075
+ font-weight: 300;
1076
+ }
1077
+
1078
+ .docs-page__paragraph code {
1079
+ font-size: 85%;
1080
+ padding: 0 0.4em;
1081
+ background-color: var(--sd-colour-interactive--alpha-20);
1082
+ border-radius: 3px;
1083
+ font-family: 'Source Code Pro', monospace;
1084
+ font-weight: 400;
1085
+ line-height: inherit;
1086
+ vertical-align: baseline;
1087
+ color: var(--color-text);
1088
+ }
1089
+
1090
+ .docs-page__unordered-list {
1091
+ font-size: 16px;
1092
+ margin: 1em 0 2em;
1093
+ line-height: 150%;
1094
+ font-weight: 300;
1095
+ }
1096
+ .docs-page__unordered-list li {
1097
+ list-style-type: disc;
1098
+ margin-bottom: 0.25em;
1099
+ margin-left: 1.5em;
1100
+ }
1101
+ .docs-page__unordered-list--plain {
1102
+ font-weight: 300;
1103
+ }
1104
+ .docs-page__unordered-list--plain li {
1105
+ font-weight: 300;
1106
+ list-style-type: none;
1107
+ margin-left: 0;
1108
+ }
1109
+
1110
+ .docs-page__code-example .flex-grid .flex-grid__item,
1111
+ .docs-page__code-example .grid .grid__item {
1112
+ background-color: #fff;
1113
+ min-height: 60px;
1114
+ border: 1px dotted rgba(0, 0, 0, 0.2);
1115
+ }
1116
+ .docs-page__code-example .grid.grid--boxed .grid__item {
1117
+ background-color: transparent;
1118
+ }
1119
+ .docs-page__code-example .grid.grid--boxed.grid--boxed-styled .grid__item {
1120
+ background-color: #fff;
1121
+ }
1122
+ .docs-page__code-example .grid .grid .grid__item {
1123
+ border: 1px dotted #5eadc8;
1124
+ }
1125
+ .docs-page__code-example .flex-grid .flex-grid__item {
1126
+ padding: 20px;
1127
+ }
1128
+ .docs-page__code-example .flex-grid.flex-grid--boxed .flex-grid__item {
1129
+ background-color: var(--docs-page-color-bg-10) !important;
1130
+ border: none;
1131
+ border-radius: 2px;
1132
+ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12) !important;
1133
+ }
1134
+ .docs-page__icon-font-list {
1135
+ margin: 40px auto 20px;
1136
+ max-width: 1200px;
1137
+ display: grid;
1138
+ grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
1139
+ transition: all 0.2s ease;
1140
+ }
1141
+ .docs-page__icon-font-list li {
1142
+ display: flex;
1143
+ flex-direction: column;
1144
+ align-items: center;
1145
+ padding: 24px 0;
1146
+ margin: 0 24px;
1147
+ box-sizing: border-box;
1148
+ border-radius: 2px;
1149
+ transition: all 0.2s ease-in-out;
1150
+ }
1151
+ .docs-page__icon-font-list li:hover {
1152
+ box-shadow:
1153
+ 0 0 0 1px var(--sd-shadow-outline),
1154
+ 0 1px 2px hsla(0, 0%, 0%, 0.12),
1155
+ 0 1px 6px hsla(0, 0%, 0%, 0.24);
1156
+ }
1157
+
1158
+ .docs-page__icon-font-list li i {
1159
+ margin-bottom: 8px;
1160
+ }
1161
+
1162
+ .docs-page__container {
1163
+ max-width: 1200px;
1164
+ margin: 30px auto 0;
1165
+ }
1166
+ .docs-page__container--large {
1167
+ max-width: 1200px;
1168
+ }
1169
+ .docs-page__container--medium {
1170
+ max-width: 1000px;
1171
+ }
1172
+ .docs-page__container--full-h {
1173
+ height: calc(100vh - 64px);
1174
+ margin: 0 auto;
1175
+ display: flex;
1176
+ align-items: center;
1177
+ justify-content: center;
1178
+ }
1179
+
1180
+ .docs-page__container .docs-page__code-window {
1181
+ max-width: none !important;
1182
+ }
1183
+
1184
+ .docs-page__container .docs-page__h2,
1185
+ .docs-page__container .docs-page__h3,
1186
+ .docs-page__container .docs-page__paragraph,
1187
+ .docs-page__container .docs-page__paragraph--small {
1188
+ max-width: 85ch;
1189
+ }
1190
+
1191
+ .docs-page__content-block {
1192
+ display: flex;
1193
+ flex-direction: row;
1194
+ margin: 0 -16px;
1195
+ }
1196
+ .docs-page__content-block + .docs-page__content-block {
1197
+ margin-top: 32px;
1198
+ }
1199
+ .docs-page__content-block-item {
1200
+ flex: 1 1;
1201
+ margin: 0 16px;
1202
+ }
1203
+ /* .docs-page__figure {
1204
+
1205
+ } */
1206
+ .docs-page__figure-media {
1207
+ width: 100%;
1208
+ background: #f8f8f8;
1209
+ border: 1px solid #cccccc;
1210
+ min-height: 200px;
1211
+ display: flex;
1212
+ align-items: center;
1213
+ justify-content: center;
1214
+ border-radius: 4px;
1215
+ }
1216
+ .docs-page__figure-media img {
1217
+ max-width: 100%;
1218
+ display: block;
1219
+ }
1220
+ .docs-page__figure-media--light {
1221
+ background: #fff;
1222
+ }
1223
+ .docs-page__figure-caption {
1224
+ font-size: 14px;
1225
+ margin-top: 12px;
1226
+ line-height: 150%;
1227
+ }
1228
+ .docs-page__caption-heading {
1229
+ border-top: 6px solid;
1230
+ font-size: 15px;
1231
+ font-weight: 500;
1232
+ margin: 0;
1233
+ max-width: 100%;
1234
+ padding: 6px 0 6px 8px;
1235
+ margin-bottom: 12px;
1236
+ line-height: 120%;
1237
+ }
1238
+ .docs-page__caption-heading--do {
1239
+ border-color: rgba(68, 165, 72, 1);
1240
+ color: rgb(47, 134, 51);
1241
+ background-color: rgba(68, 165, 72, 0.1);
1242
+ }
1243
+ .docs-page__caption-heading--dont {
1244
+ border-color: rgba(222, 44, 44, 1);
1245
+ color: rgb(197, 38, 38);
1246
+ background-color: rgba(222, 44, 44, 0.1);
1247
+ }
1248
+ .docs-page__caption-heading--caution {
1249
+ border-color: rgba(241, 162, 36, 1);
1250
+ color: rgb(225, 150, 25);
1251
+ background-color: rgba(241, 162, 36, 0.1);
1252
+ }
1253
+
1254
+ .docs-page__text-align--center {
1255
+ text-align: center;
1256
+ margin-right: auto !important;
1257
+ margin-left: auto !important;
1258
+ }
1259
+
1260
+ .docs-page__icon-font-list li span {
1261
+ font-size: 13px;
1262
+ text-align: center;
1263
+ color: #747474;
1264
+ }
1265
+
1266
+ .docs-page__icon-font-list--dark {
1267
+ background: #666;
1268
+ color: lightgray !important;
1269
+ }
1270
+ .docs-page__icon-font-list--dark span {
1271
+ color: lightgray !important;
1272
+ }
1273
+
1274
+ .docs-page__playground_picker {
1275
+ text-align: end;
1276
+ }
1277
+
1278
+ .docs-page__playground_picker .dropdown__toggle {
1279
+ color: white !important;
1280
+ letter-spacing: 0.02em;
1281
+ }
1282
+
1283
+ .docs-page__playground_picker .dropdown__toggle .dropdown__caret {
1284
+ border-top-color: #fff !important;
1285
+ }
1286
+
1287
+ [react-playground] {
1288
+ grid-column: 2/3;
1289
+ }
1290
+
1291
+ .docs-page__grid-page-example {
1292
+ position: relative;
1293
+ min-height: 600px;
1294
+ background-color: var(--sd-colour-background__main-list);
1295
+ overflow: hidden;
1296
+ border: 1px solid var(--color-border-line--light);
1297
+ display: grid;
1298
+ grid-template-rows: auto 1fr;
1299
+ grid-template-columns: auto 1fr;
1300
+ }
1301
+ .docs-page__grid-page-example__top {
1302
+ grid-row: 1/2;
1303
+ grid-column: 1/3;
1304
+ }
1305
+ .docs-page__grid-page-example__top .sd-top-menu {
1306
+ position: static !important;
1307
+ }
1308
+ .docs-page__grid-page-example__side {
1309
+ grid-row: 2/3;
1310
+ grid-column: 1/2;
1311
+ }
1312
+ .docs-page__grid-page-example__main {
1313
+ grid-row: 2/3;
1314
+ grid-column: 2/3;
1315
+ }
1316
+
1317
+ #scrollContainer {
1318
+ overflow: scroll;
1319
+ scroll-behavior: smooth;
1320
+ }
1321
+
1322
+ /* ---------------- COLOR SWATCHES ---------------- */
1323
+
1324
+ .doc-swatches__grid {
1325
+ display: grid;
1326
+ grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
1327
+ grid-column-gap: 1.6rem;
1328
+ grid-row-gap: 2.4rem;
1329
+ margin: 0;
1330
+ }
1331
+
1332
+ .doc-swatches__wrapper {
1333
+ flex: auto;
1334
+ }
1335
+
1336
+ .doc-swatches__title {
1337
+ padding: 6px 12px;
1338
+ margin-bottom: 4px;
1339
+ text-transform: capitalize;
1340
+ }
1341
+
1342
+ .doc-swatches__title h3 {
1343
+ font-size: 14px;
1344
+ font-weight: 400;
1345
+ font-family: 'Merriweather', serif;
1346
+ letter-spacing: 0.02em;
1347
+ margin: 0;
1348
+ color: #fff;
1349
+ }
1350
+
1351
+ .doc-swatches__swatch-item:nth-child(n + 7) {
1352
+ color: #fff;
1353
+ }
1354
+
1355
+ .doc-swatches__swatch-item {
1356
+ padding: 6px 12px;
1357
+ display: block;
1358
+ font-size: 12px;
1359
+ letter-spacing: 0.06em;
1360
+ }
1361
+
1362
+ .docs-page__example-box {
1363
+ background-color: var(--docs-page-color-bg__example-box);
1364
+ display: flex;
1365
+ align-items: center;
1366
+ justify-content: center;
1367
+ min-height: 16rem;
1368
+ border-radius: 4px;
1369
+ }
1370
+ .docs-page__example-box p {
1371
+ text-align: center;
1372
+ color: #969696;
1373
+ font-size: 1.6rem;
1374
+ font-weight: 300;
1375
+ margin: 0;
1376
+ }
1377
+
1378
+ .docs-page__full-width-helper {
1379
+ /* helps to override some docs page containers in full width layouts */
1380
+ width: 100vw;
1381
+ }
1382
+
1383
+ .docs-page__paragraph--light {
1384
+ font-size: 15px;
1385
+ font-weight: 300;
1386
+ line-height: 150%;
1387
+ color: var(--color-text-light);
1388
+ }
1389
+ .docs-page__color--primary {
1390
+ color: var(--docs-page-color-primary) !important;
1391
+ }
1392
+ .docs-page__color--highlight {
1393
+ color: var(--docs-page-color-highlight) !important;
1394
+ }
1395
+
1396
+ .docs-page__test-helper {
1397
+ padding: 4px !important;
1398
+ border: 1px dashed rgba(255, 0, 255, 0.4);
1399
+ border-radius: 2px;
1400
+ }
1401
+
1402
+ .docs-page__test-helper-2 {
1403
+ padding: 4px !important;
1404
+ border: 1px dashed rgba(100, 100, 100, 0.3);
1405
+ border-radius: 2px;
1406
+ }
1407
+
1408
+ doc-gif-img:hover img {
1409
+ cursor: pointer;
1410
+ }
1411
+
1412
+ .docs-page__container table {
1413
+ margin-bottom: 32px;
1414
+ border-color: var(--docs-page-border__table) !important;
1415
+ }
1416
+ .docs-page__container table th,
1417
+ .docs-page__container table td {
1418
+ border-color: var(--docs-page-border__table) !important;
1419
+ }
1420
+
1421
+ .docs-page__container table:not(.utilities-table) tr td:nth-child(3) {
1422
+ white-space: nowrap;
1423
+ }
1424
+
1425
+ .docs-page__container table:not(.utilities-table) tr:nth-child(even),
1426
+ .docs-page__container table:not(.utilities-table) thead tr {
1427
+ background-color: var(--docs-page-bg__table-tr-even);
1428
+ }
1429
+
1430
+ .docs-page__container table.utilities-table {
1431
+ width: 100%;
1432
+ border-block-start: none !important;
1433
+ margin: 0;
1434
+ font-size: 14px;
1435
+ }
1436
+ .docs-page__container table.utilities-table thead th {
1437
+ font-size: 14px;
1438
+ position: sticky;
1439
+ top: 0;
1440
+ background-color: var(--docs-page-color-bg-00);
1441
+ border-bottom:;
1442
+ }
1443
+
1444
+ .docs-page__container table.utilities-table tbody td {
1445
+ width: 100%;
1446
+ font-family: monospace;
1447
+ line-height: 1.4;
1448
+ color: var(--color-text-light);
1449
+ }
1450
+ .docs-page__container table.utilities-table tbody td:first-child {
1451
+ min-width: 280px;
1452
+ width: auto;
1453
+ color: var(--color-text);
1454
+ }
1455
+ .docs-page__container table.utilities-table tbody td:nth-child(3) {
1456
+ min-width: 200px;
1457
+ width: auto;
1458
+ text-align: end;
1459
+ padding-inline-end: var(--space--1-5);
1460
+ font-weight: 700;
1461
+ }
1462
+
1463
+ .docs-page__container table.utilities-table tbody tr.utilities-table__divider-row td {
1464
+ color: var(--color-text);
1465
+ font-family: 'Roboto', sans-serif;
1466
+ font-size: 13px;
1467
+ letter-spacing: 0.025em;
1468
+ font-weight: 500;
1469
+ padding-block: 8px !important;
1470
+ background-color: var(--docs-page-color-bg__table-divider-row);
1471
+ }
1472
+
1473
+ .utilities-table__container {
1474
+ position: relative;
1475
+ max-height: 438px;
1476
+ overflow-y: auto;
1477
+ border-block-start: 1px solid var(--sd-colour-line--medium);
1478
+ margin-block-end: var(--space--4);
1479
+ }
1480
+
1481
+ .utilities-table__container--no-height {
1482
+ max-height: none;
1483
+ }
1484
+
1485
+ .docs-page__container .doc-text--highlight {
1486
+ color: var(--docs-page-color-primary) !important;
1487
+ }
1488
+
1489
+ table.utilities-table td .border-example-box {
1490
+ min-width: 160px;
1491
+ height: 32px;
1492
+ }
1493
+
1494
+ /* -------------- END COLOR SWATCHES -------------- */
1495
+ /* -------------- PrismJS overrides -------------- */
1496
+
1497
+ code[class*='language-'],
1498
+ pre[class*='language-'] {
1499
+ font-family: 'Source Code Pro', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
1500
+ font-size: 1.1em;
1501
+ border-radius: var(--b-radius--large);
1502
+ }
1503
+ pre[class*='language-'] {
1504
+ background: hsl(214, 13%, 8%);
1505
+ }
1506
+
1507
+ /*// extra large screen media query /100em = 1600px/*/
1508
+ @media only screen and (min-width: 100em) {
1509
+ .docs-page__section {
1510
+ max-width: 80%;
1511
+ }
1512
+ }
1513
+
1514
+ /* -------------- DOC PAGE SPECIFIC OVERRIDES -------------- */
1515
+
1516
+ doc-react-playground {
1517
+ display: contents;
1518
+ }
1519
+
1520
+ .docs-page doc-react-playground .sd-main-content-grid {
1521
+ grid-column: 2 / 3;
1522
+ overflow: auto;
1523
+ }
1524
+
1525
+ .docs-page .sd-editor-grid {
1526
+ grid-row: 2 / 3;
1527
+ grid-column: 2 / 3;
1528
+ overflow-y: auto;
1529
+ }
1530
+ .docs-page doc-react-playground .sd-editor-grid {
1531
+ grid-row: 2 / 3;
1532
+ grid-column: 2 / 3;
1533
+ overflow-y: auto;
1534
+ }
1535
+
1536
+ /* ------------ END DOC PAGE SPECIFIC OVERRIDES ------------ */
1537
+ @charset "UTF-8";
1436
1538
  .red--100 {
1437
1539
  background-color: #fde4e2; }
1438
1540