superdesk-ui-framework 4.0.52 → 4.0.54

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 (373) hide show
  1. package/app-typescript/components/DateTimePicker.tsx +11 -1
  2. package/dist/examples.bundle.js +14 -2
  3. package/dist/superdesk-ui.bundle.js +13 -1
  4. package/package.json +1 -1
  5. package/react/components/DateTimePicker.d.ts +1 -0
  6. package/react/components/DateTimePicker.js +13 -1
  7. package/dist/playgrounds/accessible-theme-test.html +0 -813
  8. package/dist/playgrounds/boxed-list.html +0 -164
  9. package/dist/playgrounds/cards.html +0 -244
  10. package/dist/playgrounds/circular-progress.html +0 -48
  11. package/dist/playgrounds/dummy-data/items.ts +0 -95
  12. package/dist/playgrounds/editor-3-test.html +0 -15
  13. package/dist/playgrounds/form-layout.html +0 -285
  14. package/dist/playgrounds/layout-grid.html +0 -79
  15. package/dist/playgrounds/layout-snippets/edit-article.html +0 -415
  16. package/dist/playgrounds/layout-test-2.html +0 -795
  17. package/dist/playgrounds/list-item-test.html +0 -896
  18. package/dist/playgrounds/main.html +0 -16
  19. package/dist/playgrounds/master-desk.html +0 -1678
  20. package/dist/playgrounds/media-carousel.html +0 -1166
  21. package/dist/playgrounds/nav-buttons.html +0 -65
  22. package/dist/playgrounds/photo-desk.html +0 -1515
  23. package/dist/playgrounds/photo-snippets/edit-photo-metadata.html +0 -208
  24. package/dist/playgrounds/planning-snippets/edit-event.html +0 -187
  25. package/dist/playgrounds/planning-snippets/edit-planning.html +0 -457
  26. package/dist/playgrounds/planning.html +0 -1112
  27. package/dist/playgrounds/publish-snippets/edit-article.html +0 -37
  28. package/dist/playgrounds/publish.html +0 -1007
  29. package/dist/playgrounds/publisher-content-analytics.html +0 -376
  30. package/dist/playgrounds/publisher-content-list-automatic.html +0 -296
  31. package/dist/playgrounds/publisher-content-list-manual.html +0 -611
  32. package/dist/playgrounds/publisher-content-lists.html +0 -255
  33. package/dist/playgrounds/publisher-dashboard.html +0 -323
  34. package/dist/playgrounds/publisher-output-control.html +0 -3659
  35. package/dist/playgrounds/publisher-website-settings-general.html +0 -188
  36. package/dist/playgrounds/publisher-website-settings.html +0 -265
  37. package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +0 -952
  38. package/dist/playgrounds/react-playgrounds/EditorTest.tsx +0 -649
  39. package/dist/playgrounds/react-playgrounds/FirstPlayground.tsx +0 -236
  40. package/dist/playgrounds/react-playgrounds/Index.tsx +0 -11
  41. package/dist/playgrounds/react-playgrounds/Multiedit.tsx +0 -401
  42. package/dist/playgrounds/react-playgrounds/PageLayoutTest.tsx +0 -210
  43. package/dist/playgrounds/react-playgrounds/PersonalProfile.tsx +0 -835
  44. package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +0 -580
  45. package/dist/playgrounds/react-playgrounds/Rundowns.tsx +0 -1415
  46. package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +0 -401
  47. package/dist/playgrounds/react-playgrounds/TestGround.tsx +0 -2710
  48. package/dist/playgrounds/react-playgrounds/UiPlayground.tsx +0 -410
  49. package/dist/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +0 -25
  50. package/dist/playgrounds/react-playgrounds/components/AuthoringContent.tsx +0 -86
  51. package/dist/playgrounds/react-playgrounds/components/ContentSplitter.tsx +0 -19
  52. package/dist/playgrounds/react-playgrounds/components/GraphicButton.tsx +0 -34
  53. package/dist/playgrounds/react-playgrounds/components/GraphicButtonsGroup.tsx +0 -11
  54. package/dist/playgrounds/react-playgrounds/components/HeaderPanel.tsx +0 -11
  55. package/dist/playgrounds/react-playgrounds/components/Index.tsx +0 -20
  56. package/dist/playgrounds/react-playgrounds/components/Layout.tsx +0 -27
  57. package/dist/playgrounds/react-playgrounds/components/LayoutContainer.tsx +0 -15
  58. package/dist/playgrounds/react-playgrounds/components/LeftPanel.tsx +0 -15
  59. package/dist/playgrounds/react-playgrounds/components/MainPanel.tsx +0 -24
  60. package/dist/playgrounds/react-playgrounds/components/OverlayPanel.tsx +0 -17
  61. package/dist/playgrounds/react-playgrounds/components/Panel.tsx +0 -23
  62. package/dist/playgrounds/react-playgrounds/components/PanelContent.tsx +0 -11
  63. package/dist/playgrounds/react-playgrounds/components/PanelContentBlock.tsx +0 -19
  64. package/dist/playgrounds/react-playgrounds/components/PanelFooter.tsx +0 -17
  65. package/dist/playgrounds/react-playgrounds/components/PanelHeader.tsx +0 -31
  66. package/dist/playgrounds/react-playgrounds/components/RightPanel.tsx +0 -16
  67. package/dist/playgrounds/react-playgrounds/components/SearchBar.tsx +0 -87
  68. package/dist/playgrounds/react-playgrounds/components/SidebarMenu.tsx +0 -76
  69. package/dist/playgrounds/react-playgrounds/components/SubNav.tsx +0 -17
  70. package/dist/playgrounds/react-playgrounds/components/ThemeDropdown.tsx +0 -57
  71. package/dist/playgrounds/react-playgrounds/tsconfig.json +0 -4
  72. package/dist/playgrounds/settings.html +0 -92
  73. package/dist/playgrounds/side-navigation.html +0 -201
  74. package/dist/playgrounds/swimlane-view.html +0 -1975
  75. package/dist/playgrounds/tags-input.html +0 -55
  76. package/dist/playgrounds/toasts.html +0 -113
  77. package/dist/playgrounds/video-editor.html +0 -706
  78. package/examples/css/docs-page.css +0 -1135
  79. package/examples/css/reset.css +0 -124
  80. package/examples/css/vendor.css +0 -175
  81. package/examples/illustration-small--components.svg +0 -45
  82. package/examples/img/andrew-power-y9L5-wmifaY-unsplash.jpg +0 -0
  83. package/examples/img/andrew-power-y9L5-wmifaY-unsplash.license.txt +0 -6
  84. package/examples/img/avatar-2.jpg +0 -0
  85. package/examples/img/avatar-3.jpg +0 -0
  86. package/examples/img/avatar-4.jpg +0 -0
  87. package/examples/img/avatar-5.jpg +0 -0
  88. package/examples/img/avatar-6.jpg +0 -0
  89. package/examples/img/avatar.jpg +0 -0
  90. package/examples/img/bill.jpg +0 -0
  91. package/examples/img/bush_1.jpg +0 -0
  92. package/examples/img/bush_2.jpg +0 -0
  93. package/examples/img/carousel-thumb--01.jpg +0 -0
  94. package/examples/img/carousel-thumb--02.jpg +0 -0
  95. package/examples/img/carousel-thumb--03.jpg +0 -0
  96. package/examples/img/carousel-thumb--04.jpg +0 -0
  97. package/examples/img/components_ilustration.svg +0 -1
  98. package/examples/img/d_trump.jpg +0 -0
  99. package/examples/img/d_trump_2.jpg +0 -0
  100. package/examples/img/d_trump_large.jpg +0 -0
  101. package/examples/img/design_ilustration.svg +0 -1
  102. package/examples/img/ferocious_beast.webm +0 -0
  103. package/examples/img/guidelines/application-frame.png +0 -0
  104. package/examples/img/guidelines/application-frame__bottom-bar.png +0 -0
  105. package/examples/img/guidelines/application-frame__left-panel.gif +0 -0
  106. package/examples/img/guidelines/application-frame__left-panel.png +0 -0
  107. package/examples/img/guidelines/application-frame__main-content.gif +0 -0
  108. package/examples/img/guidelines/application-frame__main-content.png +0 -0
  109. package/examples/img/guidelines/application-frame__right-panel.gif +0 -0
  110. package/examples/img/guidelines/application-frame__right-panel.png +0 -0
  111. package/examples/img/guidelines/application-frame__side-tabs.png +0 -0
  112. package/examples/img/guidelines/application-frame__sub-nav.png +0 -0
  113. package/examples/img/guidelines/application-frame__top-bar.png +0 -0
  114. package/examples/img/guidelines/buttons--00-01.png +0 -0
  115. package/examples/img/guidelines/buttons--00-02.png +0 -0
  116. package/examples/img/guidelines/buttons--DO-02.png +0 -0
  117. package/examples/img/guidelines/buttons--DONT-01.png +0 -0
  118. package/examples/img/guidelines/checkbox--DO-01.png +0 -0
  119. package/examples/img/guidelines/checkbox--DO-02.png +0 -0
  120. package/examples/img/guidelines/checkbox--DONT-01.png +0 -0
  121. package/examples/img/guidelines/checkbox--DONT-02.png +0 -0
  122. package/examples/img/guidelines/example__bottom-bar--01.png +0 -0
  123. package/examples/img/guidelines/example__left-side_panel--01.png +0 -0
  124. package/examples/img/guidelines/example__left_side-bar--01.png +0 -0
  125. package/examples/img/guidelines/example__main-content--01.png +0 -0
  126. package/examples/img/guidelines/example__right_side-panel--01.png +0 -0
  127. package/examples/img/guidelines/example__right_side-panel--02.png +0 -0
  128. package/examples/img/guidelines/example__right_side-panel--03.png +0 -0
  129. package/examples/img/guidelines/example__sub-nav--01.png +0 -0
  130. package/examples/img/guidelines/example__sub-nav--02.png +0 -0
  131. package/examples/img/guidelines/example__sub-nav--03.png +0 -0
  132. package/examples/img/guidelines/example__top-bar--01.png +0 -0
  133. package/examples/img/guidelines/layout--grid-01.png +0 -0
  134. package/examples/img/guidelines/layout--size-example-01.png +0 -0
  135. package/examples/img/guidelines/radio--DO-01.png +0 -0
  136. package/examples/img/guidelines/radio--DONT-01.png +0 -0
  137. package/examples/img/guidelines/radio--DONT-02.png +0 -0
  138. package/examples/img/guidelines/radio--DONT-03.png +0 -0
  139. package/examples/img/guidelines/switch--DO-01.png +0 -0
  140. package/examples/img/guidelines/switch--DO-02.png +0 -0
  141. package/examples/img/guidelines/switch--DONT-01.png +0 -0
  142. package/examples/img/guidelines/switch--DONT-02.png +0 -0
  143. package/examples/img/hillary.jpg +0 -0
  144. package/examples/img/illustration--components.svg +0 -1
  145. package/examples/img/illustration--design.svg +0 -1
  146. package/examples/img/illustration--playground.svg +0 -1
  147. package/examples/img/illustration--react.svg +0 -1
  148. package/examples/img/illustration-small--components.svg +0 -45
  149. package/examples/img/illustration-small--design.svg +0 -99
  150. package/examples/img/illustration-small--playground.svg +0 -49
  151. package/examples/img/illustration-small--react.svg +0 -53
  152. package/examples/img/illustration_user-privileges.png +0 -0
  153. package/examples/img/illustration_users.png +0 -0
  154. package/examples/img/image_01.jpg +0 -0
  155. package/examples/img/image_02.jpg +0 -0
  156. package/examples/img/masthead-image.png +0 -0
  157. package/examples/img/obama_1.jpg +0 -0
  158. package/examples/img/obama_2.jpg +0 -0
  159. package/examples/img/overlay-img.jpg +0 -0
  160. package/examples/img/react-logo--vector.svg +0 -49
  161. package/examples/img/sd-ui-framework__logo-01.svg +0 -33
  162. package/examples/img/sd-ui-framework__logo.svg +0 -20
  163. package/examples/img/th01.jpg +0 -0
  164. package/examples/img/th02.jpg +0 -0
  165. package/examples/img/th03.jpg +0 -0
  166. package/examples/index.html +0 -11
  167. package/examples/index.js +0 -468
  168. package/examples/js/doc.js +0 -230
  169. package/examples/js/react.js +0 -263
  170. package/examples/pages/components/Alerts.tsx +0 -291
  171. package/examples/pages/components/Autocomplete.tsx +0 -434
  172. package/examples/pages/components/Avatar.tsx +0 -659
  173. package/examples/pages/components/Badges.tsx +0 -221
  174. package/examples/pages/components/BigIconFont.tsx +0 -48
  175. package/examples/pages/components/BoxedList.tsx +0 -517
  176. package/examples/pages/components/ButtonGroups.tsx +0 -366
  177. package/examples/pages/components/Buttons.tsx +0 -565
  178. package/examples/pages/components/Card.tsx +0 -23
  179. package/examples/pages/components/Carousel.tsx +0 -235
  180. package/examples/pages/components/Checkboxs.tsx +0 -817
  181. package/examples/pages/components/Container.tsx +0 -190
  182. package/examples/pages/components/ContentDivider.tsx +0 -229
  183. package/examples/pages/components/ContentList.tsx +0 -786
  184. package/examples/pages/components/CreateButton.tsx +0 -121
  185. package/examples/pages/components/DatePicker.tsx +0 -245
  186. package/examples/pages/components/DateTimePicker.tsx +0 -141
  187. package/examples/pages/components/DragHandleDocs.tsx +0 -122
  188. package/examples/pages/components/DropZone.tsx +0 -149
  189. package/examples/pages/components/Dropdowns.tsx +0 -587
  190. package/examples/pages/components/DurationInput.tsx +0 -157
  191. package/examples/pages/components/EmptyStates.tsx +0 -171
  192. package/examples/pages/components/GridItem.tsx +0 -507
  193. package/examples/pages/components/GridList.tsx +0 -126
  194. package/examples/pages/components/Heading.tsx +0 -152
  195. package/examples/pages/components/IconButtons.tsx +0 -191
  196. package/examples/pages/components/IconFont.tsx +0 -49
  197. package/examples/pages/components/IconLabels.tsx +0 -199
  198. package/examples/pages/components/IconPicker.tsx +0 -82
  199. package/examples/pages/components/IllustrationButton.tsx +0 -109
  200. package/examples/pages/components/Index.tsx +0 -563
  201. package/examples/pages/components/Inputs.tsx +0 -313
  202. package/examples/pages/components/Labels.tsx +0 -354
  203. package/examples/pages/components/LeftNavigations.tsx +0 -459
  204. package/examples/pages/components/ListItems.tsx +0 -33
  205. package/examples/pages/components/Loader.tsx +0 -25
  206. package/examples/pages/components/Menu.tsx +0 -181
  207. package/examples/pages/components/Modal.tsx +0 -557
  208. package/examples/pages/components/MultiSelect.tsx +0 -343
  209. package/examples/pages/components/NavButtons.tsx +0 -159
  210. package/examples/pages/components/Panel.tsx +0 -631
  211. package/examples/pages/components/Popover.tsx +0 -90
  212. package/examples/pages/components/QuickNavigationBar.tsx +0 -278
  213. package/examples/pages/components/RadioGroup.tsx +0 -612
  214. package/examples/pages/components/ResizablePanels.tsx +0 -43
  215. package/examples/pages/components/SelectGrid.tsx +0 -162
  216. package/examples/pages/components/SelectWithTemplate.tsx +0 -144
  217. package/examples/pages/components/Selects.tsx +0 -175
  218. package/examples/pages/components/SimpleList.tsx +0 -198
  219. package/examples/pages/components/SubNav.tsx +0 -160
  220. package/examples/pages/components/Switch.tsx +0 -298
  221. package/examples/pages/components/TableList.tsx +0 -315
  222. package/examples/pages/components/Tabs.tsx +0 -276
  223. package/examples/pages/components/TagInputDocs.tsx +0 -130
  224. package/examples/pages/components/Tags.tsx +0 -154
  225. package/examples/pages/components/Text.tsx +0 -184
  226. package/examples/pages/components/TimePicker.tsx +0 -179
  227. package/examples/pages/components/Toasts.tsx +0 -283
  228. package/examples/pages/components/Togglebox.tsx +0 -307
  229. package/examples/pages/components/Tooltips.tsx +0 -74
  230. package/examples/pages/components/TreeMenu.tsx +0 -315
  231. package/examples/pages/components/TreeSelect.tsx +0 -625
  232. package/examples/pages/components/WithPaginationDocs.tsx +0 -56
  233. package/examples/pages/components/WithSizeObserver.tsx +0 -44
  234. package/examples/pages/components/tree-select/TreeSelect.tsx +0 -322
  235. package/examples/pages/components/tree-select/example-1.tsx +0 -67
  236. package/examples/pages/components/tree-select/example-2.tsx +0 -56
  237. package/examples/pages/components/utilities/BorderRadiusUtilities.tsx +0 -71
  238. package/examples/pages/components/utilities/BorderUtilities.tsx +0 -169
  239. package/examples/pages/components/utilities/DisplayUtilities.tsx +0 -115
  240. package/examples/pages/components/utilities/FlexAndGridUtilities.tsx +0 -551
  241. package/examples/pages/components/utilities/ObjectFitUtilities.tsx +0 -51
  242. package/examples/pages/components/utilities/ObjectPositionUtilities.tsx +0 -67
  243. package/examples/pages/components/utilities/OpacityUtilities.tsx +0 -61
  244. package/examples/pages/components/utilities/OverflowUtilities.tsx +0 -92
  245. package/examples/pages/components/utilities/PositionUtilities.tsx +0 -51
  246. package/examples/pages/components/utilities/ShadowUtilities.tsx +0 -122
  247. package/examples/pages/components/utilities/SpacingUtilities.tsx +0 -1079
  248. package/examples/pages/components/utilities/TextUtilities.tsx +0 -560
  249. package/examples/pages/components.html +0 -15
  250. package/examples/pages/components_deprecated/alerts.html +0 -113
  251. package/examples/pages/components_deprecated/badge.html +0 -79
  252. package/examples/pages/components_deprecated/basic-grid.html +0 -132
  253. package/examples/pages/components_deprecated/big-icons.html +0 -65
  254. package/examples/pages/components_deprecated/buttons.html +0 -631
  255. package/examples/pages/components_deprecated/carousel.html +0 -77
  256. package/examples/pages/components_deprecated/checkbox.html +0 -86
  257. package/examples/pages/components_deprecated/colors.html +0 -12
  258. package/examples/pages/components_deprecated/dropdown.html +0 -542
  259. package/examples/pages/components_deprecated/form-layout.html +0 -187
  260. package/examples/pages/components_deprecated/icon-labels.html +0 -34
  261. package/examples/pages/components_deprecated/icons.html +0 -194
  262. package/examples/pages/components_deprecated/input.html +0 -233
  263. package/examples/pages/components_deprecated/labels.html +0 -170
  264. package/examples/pages/components_deprecated/layout-grid.html +0 -227
  265. package/examples/pages/components_deprecated/left-nav.html +0 -83
  266. package/examples/pages/components_deprecated/list-item.html +0 -1342
  267. package/examples/pages/components_deprecated/loader.html +0 -64
  268. package/examples/pages/components_deprecated/modal-template.html +0 -13
  269. package/examples/pages/components_deprecated/modals.html +0 -561
  270. package/examples/pages/components_deprecated/other-elements.html +0 -54
  271. package/examples/pages/components_deprecated/panel-info.html +0 -34
  272. package/examples/pages/components_deprecated/radio.html +0 -64
  273. package/examples/pages/components_deprecated/select.html +0 -160
  274. package/examples/pages/components_deprecated/shadows.html +0 -24
  275. package/examples/pages/components_deprecated/sidebar-menu.html +0 -111
  276. package/examples/pages/components_deprecated/simple-list.html +0 -113
  277. package/examples/pages/components_deprecated/slider.html +0 -31
  278. package/examples/pages/components_deprecated/spacing.html +0 -117
  279. package/examples/pages/components_deprecated/switch.html +0 -31
  280. package/examples/pages/components_deprecated/tables.html +0 -58
  281. package/examples/pages/components_deprecated/tabs.html +0 -257
  282. package/examples/pages/components_deprecated/tag-input.html +0 -123
  283. package/examples/pages/components_deprecated/tag-labels.html +0 -57
  284. package/examples/pages/components_deprecated/text.html +0 -55
  285. package/examples/pages/components_deprecated/toggle.html +0 -63
  286. package/examples/pages/components_deprecated/tooltips.html +0 -29
  287. package/examples/pages/components_deprecated/vertical-tabs.html +0 -48
  288. package/examples/pages/components_deprecated/wizard.html +0 -41
  289. package/examples/pages/components_deprecated.html +0 -39
  290. package/examples/pages/design/application-structure.html +0 -168
  291. package/examples/pages/design/buttons.html +0 -34
  292. package/examples/pages/design/checkbox-and-radio.html +0 -64
  293. package/examples/pages/design/layout-principles.html +0 -45
  294. package/examples/pages/design/modules.html +0 -22
  295. package/examples/pages/design/pages.html +0 -22
  296. package/examples/pages/design/switch.html +0 -55
  297. package/examples/pages/design-patterns/Index.tsx +0 -42
  298. package/examples/pages/design-patterns/ThreePaneLayoutPattern.tsx +0 -378
  299. package/examples/pages/design-patterns.html +0 -14
  300. package/examples/pages/design.html +0 -39
  301. package/examples/pages/main.html +0 -76
  302. package/examples/pages/playgrounds/accessible-theme-test.html +0 -813
  303. package/examples/pages/playgrounds/boxed-list.html +0 -164
  304. package/examples/pages/playgrounds/cards.html +0 -244
  305. package/examples/pages/playgrounds/circular-progress.html +0 -48
  306. package/examples/pages/playgrounds/dummy-data/items.ts +0 -95
  307. package/examples/pages/playgrounds/editor-3-test.html +0 -15
  308. package/examples/pages/playgrounds/form-layout.html +0 -285
  309. package/examples/pages/playgrounds/layout-grid.html +0 -79
  310. package/examples/pages/playgrounds/layout-snippets/edit-article.html +0 -415
  311. package/examples/pages/playgrounds/layout-test-2.html +0 -795
  312. package/examples/pages/playgrounds/list-item-test.html +0 -896
  313. package/examples/pages/playgrounds/main.html +0 -16
  314. package/examples/pages/playgrounds/master-desk.html +0 -1678
  315. package/examples/pages/playgrounds/media-carousel.html +0 -1166
  316. package/examples/pages/playgrounds/nav-buttons.html +0 -65
  317. package/examples/pages/playgrounds/photo-desk.html +0 -1515
  318. package/examples/pages/playgrounds/photo-snippets/edit-photo-metadata.html +0 -208
  319. package/examples/pages/playgrounds/planning-snippets/edit-event.html +0 -187
  320. package/examples/pages/playgrounds/planning-snippets/edit-planning.html +0 -457
  321. package/examples/pages/playgrounds/planning.html +0 -1112
  322. package/examples/pages/playgrounds/publish-snippets/edit-article.html +0 -37
  323. package/examples/pages/playgrounds/publish.html +0 -1007
  324. package/examples/pages/playgrounds/publisher-content-analytics.html +0 -376
  325. package/examples/pages/playgrounds/publisher-content-list-automatic.html +0 -296
  326. package/examples/pages/playgrounds/publisher-content-list-manual.html +0 -611
  327. package/examples/pages/playgrounds/publisher-content-lists.html +0 -255
  328. package/examples/pages/playgrounds/publisher-dashboard.html +0 -323
  329. package/examples/pages/playgrounds/publisher-output-control.html +0 -3659
  330. package/examples/pages/playgrounds/publisher-website-settings-general.html +0 -188
  331. package/examples/pages/playgrounds/publisher-website-settings.html +0 -265
  332. package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +0 -952
  333. package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx +0 -649
  334. package/examples/pages/playgrounds/react-playgrounds/FirstPlayground.tsx +0 -236
  335. package/examples/pages/playgrounds/react-playgrounds/Index.tsx +0 -11
  336. package/examples/pages/playgrounds/react-playgrounds/Multiedit.tsx +0 -401
  337. package/examples/pages/playgrounds/react-playgrounds/PageLayoutTest.tsx +0 -210
  338. package/examples/pages/playgrounds/react-playgrounds/PersonalProfile.tsx +0 -835
  339. package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +0 -580
  340. package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +0 -1415
  341. package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +0 -401
  342. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +0 -2710
  343. package/examples/pages/playgrounds/react-playgrounds/UiPlayground.tsx +0 -410
  344. package/examples/pages/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +0 -25
  345. package/examples/pages/playgrounds/react-playgrounds/components/AuthoringContent.tsx +0 -86
  346. package/examples/pages/playgrounds/react-playgrounds/components/ContentSplitter.tsx +0 -19
  347. package/examples/pages/playgrounds/react-playgrounds/components/GraphicButton.tsx +0 -34
  348. package/examples/pages/playgrounds/react-playgrounds/components/GraphicButtonsGroup.tsx +0 -11
  349. package/examples/pages/playgrounds/react-playgrounds/components/HeaderPanel.tsx +0 -11
  350. package/examples/pages/playgrounds/react-playgrounds/components/Index.tsx +0 -20
  351. package/examples/pages/playgrounds/react-playgrounds/components/Layout.tsx +0 -27
  352. package/examples/pages/playgrounds/react-playgrounds/components/LayoutContainer.tsx +0 -15
  353. package/examples/pages/playgrounds/react-playgrounds/components/LeftPanel.tsx +0 -15
  354. package/examples/pages/playgrounds/react-playgrounds/components/MainPanel.tsx +0 -24
  355. package/examples/pages/playgrounds/react-playgrounds/components/OverlayPanel.tsx +0 -17
  356. package/examples/pages/playgrounds/react-playgrounds/components/Panel.tsx +0 -23
  357. package/examples/pages/playgrounds/react-playgrounds/components/PanelContent.tsx +0 -11
  358. package/examples/pages/playgrounds/react-playgrounds/components/PanelContentBlock.tsx +0 -19
  359. package/examples/pages/playgrounds/react-playgrounds/components/PanelFooter.tsx +0 -17
  360. package/examples/pages/playgrounds/react-playgrounds/components/PanelHeader.tsx +0 -31
  361. package/examples/pages/playgrounds/react-playgrounds/components/RightPanel.tsx +0 -16
  362. package/examples/pages/playgrounds/react-playgrounds/components/SearchBar.tsx +0 -87
  363. package/examples/pages/playgrounds/react-playgrounds/components/SidebarMenu.tsx +0 -76
  364. package/examples/pages/playgrounds/react-playgrounds/components/SubNav.tsx +0 -17
  365. package/examples/pages/playgrounds/react-playgrounds/components/ThemeDropdown.tsx +0 -57
  366. package/examples/pages/playgrounds/react-playgrounds/tsconfig.json +0 -4
  367. package/examples/pages/playgrounds/settings.html +0 -92
  368. package/examples/pages/playgrounds/side-navigation.html +0 -201
  369. package/examples/pages/playgrounds/swimlane-view.html +0 -1975
  370. package/examples/pages/playgrounds/tags-input.html +0 -55
  371. package/examples/pages/playgrounds/toasts.html +0 -113
  372. package/examples/pages/playgrounds/video-editor.html +0 -706
  373. package/examples/pages/playgrounds.html +0 -40
package/examples/pages/components/utilities/SpacingUtilities.tsx DELETED
@@ -1,1079 +0,0 @@
1
- import * as React from 'react';
2
- import * as Markup from '../../../js/react';
3
-
4
- class SpacingUtilitiesDoc extends React.Component {
5
- render() {
6
- return (
7
- <section className="docs-page__container">
8
- <h2 className="docs-page__h2">Spacing</h2>
9
- <p className="docs-page__paragraph">
10
- The Superdesk UI Framework provides various spacing utility classes to modify the positioning and
11
- look of elements. All values are set in multiples of the <code>--base-increment</code> CSS variable,
12
- which is equivalent to 0.8rem (or 8px in our context), to ensure consistency.
13
- </p>
14
- <div className="docs-page__container-block--padding">
15
- <h3 className="docs-page__h3">Padding</h3>
16
- <div className="utilities-table__container">
17
- <table className="table utilities-table">
18
- <thead>
19
- <tr>
20
- <th>Class</th>
21
- <th>Properties</th>
22
- </tr>
23
- </thead>
24
- <tbody>
25
- <tr className="utilities-table__divider-row">
26
- <td>all</td>
27
- <td></td>
28
- </tr>
29
- <tr>
30
- <td>p-0</td>
31
- <td>{'padding: 0 !important;'}</td>
32
- </tr>
33
- <tr>
34
- <td>p-0-5</td>
35
- <td>
36
- {'padding: calc(0.5 * var(--base-increment)) !important;'}{' '}
37
- <span className="doc-text--highlight">/* 4px */</span>
38
- </td>
39
- </tr>
40
- <tr>
41
- <td>p-1</td>
42
- <td>
43
- {'padding: calc(1 * var(--base-increment)) !important;'}{' '}
44
- <span className="doc-text--highlight">/* 8px */</span>
45
- </td>
46
- </tr>
47
- <tr>
48
- <td>p-1-5</td>
49
- <td>
50
- {'padding: calc(1.5 * var(--base-increment)) !important;'}{' '}
51
- <span className="doc-text--highlight">/* 12px */</span>
52
- </td>
53
- </tr>
54
- <tr>
55
- <td>p-2</td>
56
- <td>
57
- {'padding: calc(2 * var(--base-increment)) !important;'}{' '}
58
- <span className="doc-text--highlight">/* 16px */</span>
59
- </td>
60
- </tr>
61
- <tr>
62
- <td>p-3</td>
63
- <td>
64
- {'padding: calc(3 * var(--base-increment)) !important;'}{' '}
65
- <span className="doc-text--highlight">/* 24px */</span>
66
- </td>
67
- </tr>
68
- <tr>
69
- <td>p-4</td>
70
- <td>
71
- {'padding: calc(4 * var(--base-increment)) !important;'}{' '}
72
- <span className="doc-text--highlight">/* 32px */</span>
73
- </td>
74
- </tr>
75
- <tr>
76
- <td>p-5</td>
77
- <td>
78
- {'padding: calc(5 * var(--base-increment)) !important;'}{' '}
79
- <span className="doc-text--highlight">/* 40px */</span>
80
- </td>
81
- </tr>
82
- {/* //-----------Inline--------// */}
83
- <tr className="utilities-table__divider-row">
84
- <td>inline start (left)</td>
85
- <td></td>
86
- </tr>
87
-
88
- <tr>
89
- <td>ps-0</td>
90
- <td>{'padding-inline-start: 0 !important;'}</td>
91
- </tr>
92
- <tr>
93
- <td>ps-0-5</td>
94
- <td>
95
- {'padding-inline-start: calc(0.5 * var(--base-increment)) !important;'}{' '}
96
- <span className="doc-text--highlight">/* 4px */</span>
97
- </td>
98
- </tr>
99
- <tr>
100
- <td>ps-1</td>
101
- <td>
102
- {'padding-inline-start: calc(1 * var(--base-increment)) !important;'}{' '}
103
- <span className="doc-text--highlight">/* 8px */</span>
104
- </td>
105
- </tr>
106
- <tr>
107
- <td>ps-1-5</td>
108
- <td>
109
- {'padding-inline-start: calc(1.5 * var(--base-increment)) !important;'}{' '}
110
- <span className="doc-text--highlight">/* 12px */</span>
111
- </td>
112
- </tr>
113
- <tr>
114
- <td>ps-2</td>
115
- <td>
116
- {'padding-inline-start: calc(2 * var(--base-increment)) !important;'}{' '}
117
- <span className="doc-text--highlight">/* 16px */</span>
118
- </td>
119
- </tr>
120
- <tr>
121
- <td>ps-3</td>
122
- <td>
123
- {'padding-inline-start: calc(3 * var(--base-increment)) !important;'}{' '}
124
- <span className="doc-text--highlight">/* 24px */</span>
125
- </td>
126
- </tr>
127
- <tr>
128
- <td>ps-4</td>
129
- <td>
130
- {'padding-inline-start: calc(4 * var(--base-increment)) !important;'}{' '}
131
- <span className="doc-text--highlight">/* 32px */</span>
132
- </td>
133
- </tr>
134
- <tr>
135
- <td>ps-5</td>
136
- <td>
137
- {'padding-inline-start: calc(5 * var(--base-increment)) !important;'}{' '}
138
- <span className="doc-text--highlight">/* 40px */</span>
139
- </td>
140
- </tr>
141
-
142
- <tr className="utilities-table__divider-row">
143
- <td>inline end (right)</td>
144
- <td></td>
145
- </tr>
146
-
147
- <tr>
148
- <td>pe-0</td>
149
- <td>{'padding-inline-end: 0 !important;'}</td>
150
- </tr>
151
- <tr>
152
- <td>pe-0-5</td>
153
- <td>
154
- {'padding-inline-end: calc(0.5 * var(--base-increment)) !important;'}{' '}
155
- <span className="doc-text--highlight">/* 4px */</span>
156
- </td>
157
- </tr>
158
- <tr>
159
- <td>pe-1</td>
160
- <td>
161
- {'padding-inline-end: calc(1 * var(--base-increment)) !important;'}{' '}
162
- <span className="doc-text--highlight">/* 8px */</span>
163
- </td>
164
- </tr>
165
- <tr>
166
- <td>pe-1-5</td>
167
- <td>
168
- {'padding-inline-end: calc(1.5 * var(--base-increment)) !important;'}{' '}
169
- <span className="doc-text--highlight">/* 12px */</span>
170
- </td>
171
- </tr>
172
- <tr>
173
- <td>pe-2</td>
174
- <td>
175
- {'padding-inline-end: calc(2 * var(--base-increment)) !important;'}{' '}
176
- <span className="doc-text--highlight">/* 16px */</span>
177
- </td>
178
- </tr>
179
- <tr>
180
- <td>pe-3</td>
181
- <td>
182
- {'padding-inline-end: calc(3 * var(--base-increment)) !important;'}{' '}
183
- <span className="doc-text--highlight">/* 24px */</span>
184
- </td>
185
- </tr>
186
- <tr>
187
- <td>pe-4</td>
188
- <td>
189
- {'padding-inline-end: calc(4 * var(--base-increment)) !important;'}{' '}
190
- <span className="doc-text--highlight">/* 32px */</span>
191
- </td>
192
- </tr>
193
- <tr>
194
- <td>pe-5</td>
195
- <td>
196
- {'padding-inline-end: calc(5 * var(--base-increment)) !important;'}{' '}
197
- <span className="doc-text--highlight">/* 40px */</span>
198
- </td>
199
- </tr>
200
-
201
- <tr className="utilities-table__divider-row">
202
- <td>inline (x)</td>
203
- <td></td>
204
- </tr>
205
-
206
- <tr>
207
- <td>px-0</td>
208
- <td>
209
- {'padding-inline-start: 0 !important;'}
210
- <br />
211
- {'padding-inline-end: 0 !important;'}
212
- </td>
213
- </tr>
214
- <tr>
215
- <td>px-0-5</td>
216
- <td>
217
- {'padding-inline-start: calc(0.5 * var(--base-increment)) !important;'}{' '}
218
- <span className="doc-text--highlight">/* 4px */</span>
219
- <br />
220
- {'padding-inline-end: calc(0.5 * var(--base-increment)) !important;'}{' '}
221
- <span className="doc-text--highlight">/* 4px */</span>
222
- </td>
223
- </tr>
224
- <tr>
225
- <td>px-1</td>
226
- <td>
227
- {'padding-inline-start: calc(1 * var(--base-increment)) !important;'}{' '}
228
- <span className="doc-text--highlight">/* 8px */</span>
229
- <br />
230
- {'padding-inline-end: calc(1 * var(--base-increment)) !important;'}{' '}
231
- <span className="doc-text--highlight">/* 8px */</span>
232
- </td>
233
- </tr>
234
- <tr>
235
- <td>px-1-5</td>
236
- <td>
237
- {'padding-inline-start: calc(1.5 * var(--base-increment)) !important;'}{' '}
238
- <span className="doc-text--highlight">/* 12px */</span>
239
- <br />
240
- {'padding-inline-end: calc(1.5 * var(--base-increment)) !important;'}{' '}
241
- <span className="doc-text--highlight">/* 12px */</span>
242
- </td>
243
- </tr>
244
- <tr>
245
- <td>px-2</td>
246
- <td>
247
- {'padding-inline-start: calc(2 * var(--base-increment)) !important;'}{' '}
248
- <span className="doc-text--highlight">/* 16px */</span>
249
- <br />
250
- {'padding-inline-end: calc(2 * var(--base-increment)) !important;'}{' '}
251
- <span className="doc-text--highlight">/* 16px */</span>
252
- </td>
253
- </tr>
254
- <tr>
255
- <td>px-3</td>
256
- <td>
257
- {'padding-inline-start: calc(3 * var(--base-increment)) !important;'}{' '}
258
- <span className="doc-text--highlight">/* 24px */</span>
259
- <br />
260
- {'padding-inline-end: calc(3 * var(--base-increment)) !important;'}{' '}
261
- <span className="doc-text--highlight">/* 24px */</span>
262
- </td>
263
- </tr>
264
- <tr>
265
- <td>px-4</td>
266
- <td>
267
- {'padding-inline-start: calc(4 * var(--base-increment)) !important;'}{' '}
268
- <span className="doc-text--highlight">/* 32px */</span>
269
- <br />
270
- {'padding-inline-end: calc(4 * var(--base-increment)) !important;'}{' '}
271
- <span className="doc-text--highlight">/* 32px */</span>
272
- </td>
273
- </tr>
274
- <tr>
275
- <td>px-5</td>
276
- <td>
277
- {'padding-inline-start: calc(5 * var(--base-increment)) !important;'}{' '}
278
- <span className="doc-text--highlight">/* 40px */</span>
279
- <br />
280
- {'padding-inline-end: calc(5 * var(--base-increment)) !important;'}{' '}
281
- <span className="doc-text--highlight">/* 40px */</span>
282
- </td>
283
- </tr>
284
- {/* //-----------Block--------// */}
285
- <tr className="utilities-table__divider-row">
286
- <td>block start (top)</td>
287
- <td></td>
288
- </tr>
289
- <tr>
290
- <td>pt-0</td>
291
- <td>{'padding-block-start: 0 !important;'}</td>
292
- </tr>
293
- <tr>
294
- <td>pt-0-5</td>
295
- <td>
296
- {'padding-block-start: calc(0.5 * var(--base-increment)) !important;'}{' '}
297
- <span className="doc-text--highlight">/* 4px */</span>
298
- </td>
299
- </tr>
300
- <tr>
301
- <td>pt-1</td>
302
- <td>
303
- {'padding-block-start: calc(1 * var(--base-increment)) !important;'}{' '}
304
- <span className="doc-text--highlight">/* 8px */</span>
305
- </td>
306
- </tr>
307
- <tr>
308
- <td>pt-1-5</td>
309
- <td>
310
- {'padding-block-start: calc(1.5 * var(--base-increment)) !important;'}{' '}
311
- <span className="doc-text--highlight">/* 12px */</span>
312
- </td>
313
- </tr>
314
- <tr>
315
- <td>pt-2</td>
316
- <td>
317
- {'padding-block-start: calc(2 * var(--base-increment)) !important;'}{' '}
318
- <span className="doc-text--highlight">/* 16px */</span>
319
- </td>
320
- </tr>
321
- <tr>
322
- <td>pt-3</td>
323
- <td>
324
- {'padding-block-start: calc(3 * var(--base-increment)) !important;'}{' '}
325
- <span className="doc-text--highlight">/* 24px */</span>
326
- </td>
327
- </tr>
328
- <tr>
329
- <td>pt-4</td>
330
- <td>
331
- {'padding-block-start: calc(4 * var(--base-increment)) !important;'}{' '}
332
- <span className="doc-text--highlight">/* 32px */</span>
333
- </td>
334
- </tr>
335
- <tr>
336
- <td>pt-5</td>
337
- <td>
338
- {'padding-block-start: calc(5 * var(--base-increment)) !important;'}{' '}
339
- <span className="doc-text--highlight">/* 40px */</span>
340
- </td>
341
- </tr>
342
-
343
- <tr className="utilities-table__divider-row">
344
- <td>block end (bottom)</td>
345
- <td></td>
346
- </tr>
347
-
348
- <tr>
349
- <td>pb-0</td>
350
- <td>{'padding-inline-end: 0 !important;'}</td>
351
- </tr>
352
- <tr>
353
- <td>pb-0-5</td>
354
- <td>
355
- {'padding-block-end: calc(0.5 * var(--base-increment)) !important;'}{' '}
356
- <span className="doc-text--highlight">/* 4px */</span>
357
- </td>
358
- </tr>
359
- <tr>
360
- <td>pb-1</td>
361
- <td>
362
- {'padding-block-end: calc(1 * var(--base-increment)) !important;'}{' '}
363
- <span className="doc-text--highlight">/* 8px */</span>
364
- </td>
365
- </tr>
366
- <tr>
367
- <td>pb-1-5</td>
368
- <td>
369
- {'padding-block-end: calc(1.5 * var(--base-increment)) !important;'}{' '}
370
- <span className="doc-text--highlight">/* 12px */</span>
371
- </td>
372
- </tr>
373
- <tr>
374
- <td>pb-2</td>
375
- <td>
376
- {'padding-block-end: calc(2 * var(--base-increment)) !important;'}{' '}
377
- <span className="doc-text--highlight">/* 16px */</span>
378
- </td>
379
- </tr>
380
- <tr>
381
- <td>pe-3</td>
382
- <td>
383
- {'padding-block-end: calc(3 * var(--base-increment)) !important;'}{' '}
384
- <span className="doc-text--highlight">/* 24px */</span>
385
- </td>
386
- </tr>
387
- <tr>
388
- <td>pb-4</td>
389
- <td>
390
- {'padding-block-end: calc(4 * var(--base-increment)) !important;'}{' '}
391
- <span className="doc-text--highlight">/* 32px */</span>
392
- </td>
393
- </tr>
394
- <tr>
395
- <td>pb-5</td>
396
- <td>
397
- {'padding-block-end: calc(5 * var(--base-increment)) !important;'}{' '}
398
- <span className="doc-text--highlight">/* 40px */</span>
399
- </td>
400
- </tr>
401
-
402
- <tr className="utilities-table__divider-row">
403
- <td>block (y)</td>
404
- <td></td>
405
- </tr>
406
-
407
- <tr>
408
- <td>py-0</td>
409
- <td>
410
- {'padding-block-start: 0 !important;'}
411
- <br />
412
- {'padding-block-end: 0 !important;'}
413
- </td>
414
- </tr>
415
- <tr>
416
- <td>py-0-5</td>
417
- <td>
418
- {'padding-block-start: calc(0.5 * var(--base-increment)) !important;'}{' '}
419
- <span className="doc-text--highlight">/* 4px */</span>
420
- <br />
421
- {'padding-block-end: calc(0.5 * var(--base-increment)) !important;'}{' '}
422
- <span className="doc-text--highlight">/* 4px */</span>
423
- </td>
424
- </tr>
425
- <tr>
426
- <td>py-1</td>
427
- <td>
428
- {'padding-block-start: calc(1 * var(--base-increment)) !important;'}{' '}
429
- <span className="doc-text--highlight">/* 8px */</span>
430
- <br />
431
- {'padding-block-end: calc(1 * var(--base-increment)) !important;'}{' '}
432
- <span className="doc-text--highlight">/* 8px */</span>
433
- </td>
434
- </tr>
435
- <tr>
436
- <td>py-1-5</td>
437
- <td>
438
- {'padding-block-start: calc(1.5 * var(--base-increment)) !important;'}{' '}
439
- <span className="doc-text--highlight">/* 12px */</span>
440
- <br />
441
- {'padding-block-end: calc(1.5 * var(--base-increment)) !important;'}{' '}
442
- <span className="doc-text--highlight">/* 12px */</span>
443
- </td>
444
- </tr>
445
- <tr>
446
- <td>py-2</td>
447
- <td>
448
- {'padding-block-start: calc(2 * var(--base-increment)) !important;'}{' '}
449
- <span className="doc-text--highlight">/* 16px */</span>
450
- <br />
451
- {'padding-block-end: calc(2 * var(--base-increment)) !important;'}{' '}
452
- <span className="doc-text--highlight">/* 16px */</span>
453
- </td>
454
- </tr>
455
- <tr>
456
- <td>py-3</td>
457
- <td>
458
- {'padding-block-start: calc(3 * var(--base-increment)) !important;'}{' '}
459
- <span className="doc-text--highlight">/* 24px */</span>
460
- <br />
461
- {'padding-block-end: calc(3 * var(--base-increment)) !important;'}{' '}
462
- <span className="doc-text--highlight">/* 24px */</span>
463
- </td>
464
- </tr>
465
- <tr>
466
- <td>py-4</td>
467
- <td>
468
- {'padding-block-start: calc(4 * var(--base-increment)) !important;'}{' '}
469
- <span className="doc-text--highlight">/* 32px */</span>
470
- <br />
471
- {'padding-block-end: calc(4 * var(--base-increment)) !important;'}{' '}
472
- <span className="doc-text--highlight">/* 32px */</span>
473
- </td>
474
- </tr>
475
- <tr>
476
- <td>py-5</td>
477
- <td>
478
- {'padding-block-start: calc(5 * var(--base-increment)) !important;'}{' '}
479
- <span className="doc-text--highlight">/* 40px */</span>
480
- <br />
481
- {'padding-block-end: calc(5 * var(--base-increment)) !important;'}{' '}
482
- <span className="doc-text--highlight">/* 40px */</span>
483
- </td>
484
- </tr>
485
- </tbody>
486
- </table>
487
- </div>
488
- </div>
489
-
490
- <div className="docs-page__container-block--margin">
491
- <h3 className="docs-page__h3">Margin</h3>
492
- <div className="utilities-table__container">
493
- <table className="table utilities-table">
494
- <thead>
495
- <tr>
496
- <th>Class</th>
497
- <th>Properties</th>
498
- </tr>
499
- </thead>
500
- <tbody>
501
- <tr className="utilities-table__divider-row">
502
- <td>all</td>
503
- <td></td>
504
- </tr>
505
- <tr>
506
- <td>m-0</td>
507
- <td>{'margin: 0 !important;'}</td>
508
- </tr>
509
- <tr>
510
- <td>m-0-5</td>
511
- <td>
512
- {'margin: calc(0.5 * var(--base-increment)) !important;'}{' '}
513
- <span className="doc-text--highlight">/* 4px */</span>
514
- </td>
515
- </tr>
516
- <tr>
517
- <td>m-1</td>
518
- <td>
519
- {'margin: calc(1 * var(--base-increment)) !important;'}{' '}
520
- <span className="doc-text--highlight">/* 8px */</span>
521
- </td>
522
- </tr>
523
- <tr>
524
- <td>m-1-5</td>
525
- <td>
526
- {'margin: calc(1.5 * var(--base-increment)) !important;'}{' '}
527
- <span className="doc-text--highlight">/* 12px */</span>
528
- </td>
529
- </tr>
530
- <tr>
531
- <td>m-2</td>
532
- <td>
533
- {'margin: calc(2 * var(--base-increment)) !important;'}{' '}
534
- <span className="doc-text--highlight">/* 16px */</span>
535
- </td>
536
- </tr>
537
- <tr>
538
- <td>m-3</td>
539
- <td>
540
- {'margin: calc(3 * var(--base-increment)) !important;'}{' '}
541
- <span className="doc-text--highlight">/* 24px */</span>
542
- </td>
543
- </tr>
544
- <tr>
545
- <td>m-4</td>
546
- <td>
547
- {'margin: calc(4 * var(--base-increment)) !important;'}{' '}
548
- <span className="doc-text--highlight">/* 32px */</span>
549
- </td>
550
- </tr>
551
- <tr>
552
- <td>m-5</td>
553
- <td>
554
- {'margin: calc(5 * var(--base-increment)) !important;'}{' '}
555
- <span className="doc-text--highlight">/* 40px */</span>
556
- </td>
557
- </tr>
558
- {/* //-----------Inline--------// */}
559
- <tr className="utilities-table__divider-row">
560
- <td>inline start (left)</td>
561
- <td></td>
562
- </tr>
563
-
564
- <tr>
565
- <td>ms-0</td>
566
- <td>{'margin-inline-start: 0 !important;'}</td>
567
- </tr>
568
- <tr>
569
- <td>ms-0-5</td>
570
- <td>
571
- {'margin-inline-start: calc(0.5 * var(--base-increment)) !important;'}{' '}
572
- <span className="doc-text--highlight">/* 4px */</span>
573
- </td>
574
- </tr>
575
- <tr>
576
- <td>ms-1</td>
577
- <td>
578
- {'margin-inline-start: calc(1 * var(--base-increment)) !important;'}{' '}
579
- <span className="doc-text--highlight">/* 8px */</span>
580
- </td>
581
- </tr>
582
- <tr>
583
- <td>ms-1-5</td>
584
- <td>
585
- {'margin-inline-start: calc(1.5 * var(--base-increment)) !important;'}{' '}
586
- <span className="doc-text--highlight">/* 12px */</span>
587
- </td>
588
- </tr>
589
- <tr>
590
- <td>ms-2</td>
591
- <td>
592
- {'margin-inline-start: calc(2 * var(--base-increment)) !important;'}{' '}
593
- <span className="doc-text--highlight">/* 16px */</span>
594
- </td>
595
- </tr>
596
- <tr>
597
- <td>ms-3</td>
598
- <td>
599
- {'margin-inline-start: calc(3 * var(--base-increment)) !important;'}{' '}
600
- <span className="doc-text--highlight">/* 24px */</span>
601
- </td>
602
- </tr>
603
- <tr>
604
- <td>ms-4</td>
605
- <td>
606
- {'margin-inline-start: calc(4 * var(--base-increment)) !important;'}{' '}
607
- <span className="doc-text--highlight">/* 32px */</span>
608
- </td>
609
- </tr>
610
- <tr>
611
- <td>ms-5</td>
612
- <td>
613
- {'margin-inline-start: calc(5 * var(--base-increment)) !important;'}{' '}
614
- <span className="doc-text--highlight">/* 40px */</span>
615
- </td>
616
- </tr>
617
-
618
- <tr className="utilities-table__divider-row">
619
- <td>inline end (right)</td>
620
- <td></td>
621
- </tr>
622
-
623
- <tr>
624
- <td>me-0</td>
625
- <td>{'margin-inline-end: 0 !important;'}</td>
626
- </tr>
627
- <tr>
628
- <td>me-0-5</td>
629
- <td>
630
- {'margin-inline-end: calc(0.5 * var(--base-increment)) !important;'}{' '}
631
- <span className="doc-text--highlight">/* 4px */</span>
632
- </td>
633
- </tr>
634
- <tr>
635
- <td>me-1</td>
636
- <td>
637
- {'margin-inline-end: calc(1 * var(--base-increment)) !important;'}{' '}
638
- <span className="doc-text--highlight">/* 8px */</span>
639
- </td>
640
- </tr>
641
- <tr>
642
- <td>me-1-5</td>
643
- <td>
644
- {'margin-inline-end: calc(1.5 * var(--base-increment)) !important;'}{' '}
645
- <span className="doc-text--highlight">/* 12px */</span>
646
- </td>
647
- </tr>
648
- <tr>
649
- <td>me-2</td>
650
- <td>
651
- {'margin-inline-end: calc(2 * var(--base-increment)) !important;'}{' '}
652
- <span className="doc-text--highlight">/* 16px */</span>
653
- </td>
654
- </tr>
655
- <tr>
656
- <td>me-3</td>
657
- <td>
658
- {'margin-inline-end: calc(3 * var(--base-increment)) !important;'}{' '}
659
- <span className="doc-text--highlight">/* 24px */</span>
660
- </td>
661
- </tr>
662
- <tr>
663
- <td>me-4</td>
664
- <td>
665
- {'margin-inline-end: calc(4 * var(--base-increment)) !important;'}{' '}
666
- <span className="doc-text--highlight">/* 32px */</span>
667
- </td>
668
- </tr>
669
- <tr>
670
- <td>me-5</td>
671
- <td>
672
- {'margin-inline-end: calc(5 * var(--base-increment)) !important;'}{' '}
673
- <span className="doc-text--highlight">/* 40px */</span>
674
- </td>
675
- </tr>
676
-
677
- <tr className="utilities-table__divider-row">
678
- <td>inline (x)</td>
679
- <td></td>
680
- </tr>
681
-
682
- <tr>
683
- <td>mx-0</td>
684
- <td>
685
- {'margin-inline-start: 0 !important;'}
686
- <br />
687
- {'margin-inline-end: 0 !important;'}
688
- </td>
689
- </tr>
690
- <tr>
691
- <td>mx-0-5</td>
692
- <td>
693
- {'margin-inline-start: calc(0.5 * var(--base-increment)) !important;'}{' '}
694
- <span className="doc-text--highlight">/* 4px */</span>
695
- <br />
696
- {'margin-inline-end: calc(0.5 * var(--base-increment)) !important;'}{' '}
697
- <span className="doc-text--highlight">/* 4px */</span>
698
- </td>
699
- </tr>
700
- <tr>
701
- <td>mx-1</td>
702
- <td>
703
- {'margin-inline-start: calc(1 * var(--base-increment)) !important;'}{' '}
704
- <span className="doc-text--highlight">/* 8px */</span>
705
- <br />
706
- {'margin-inline-end: calc(1 * var(--base-increment)) !important;'}{' '}
707
- <span className="doc-text--highlight">/* 8px */</span>
708
- </td>
709
- </tr>
710
- <tr>
711
- <td>mx-1-5</td>
712
- <td>
713
- {'margin-inline-start: calc(1.5 * var(--base-increment)) !important;'}{' '}
714
- <span className="doc-text--highlight">/* 12px */</span>
715
- <br />
716
- {'margin-inline-end: calc(1.5 * var(--base-increment)) !important;'}{' '}
717
- <span className="doc-text--highlight">/* 12px */</span>
718
- </td>
719
- </tr>
720
- <tr>
721
- <td>mx-2</td>
722
- <td>
723
- {'margin-inline-start: calc(2 * var(--base-increment)) !important;'}{' '}
724
- <span className="doc-text--highlight">/* 16px */</span>
725
- <br />
726
- {'margin-inline-end: calc(2 * var(--base-increment)) !important;'}{' '}
727
- <span className="doc-text--highlight">/* 16px */</span>
728
- </td>
729
- </tr>
730
- <tr>
731
- <td>mx-3</td>
732
- <td>
733
- {'margin-inline-start: calc(3 * var(--base-increment)) !important;'}{' '}
734
- <span className="doc-text--highlight">/* 24px */</span>
735
- <br />
736
- {'margin-inline-end: calc(3 * var(--base-increment)) !important;'}{' '}
737
- <span className="doc-text--highlight">/* 24px */</span>
738
- </td>
739
- </tr>
740
- <tr>
741
- <td>mx-4</td>
742
- <td>
743
- {'margin-inline-start: calc(4 * var(--base-increment)) !important;'}{' '}
744
- <span className="doc-text--highlight">/* 32px */</span>
745
- <br />
746
- {'margin-inline-end: calc(4 * var(--base-increment)) !important;'}{' '}
747
- <span className="doc-text--highlight">/* 32px */</span>
748
- </td>
749
- </tr>
750
- <tr>
751
- <td>mx-5</td>
752
- <td>
753
- {'margin-inline-start: calc(5 * var(--base-increment)) !important;'}{' '}
754
- <span className="doc-text--highlight">/* 40px */</span>
755
- <br />
756
- {'margin-inline-end: calc(5 * var(--base-increment)) !important;'}{' '}
757
- <span className="doc-text--highlight">/* 40px */</span>
758
- </td>
759
- </tr>
760
- {/* //-----------Block--------// */}
761
- <tr className="utilities-table__divider-row">
762
- <td>block start (top)</td>
763
- <td></td>
764
- </tr>
765
- <tr>
766
- <td>mt-0</td>
767
- <td>{'margin-block-start: 0 !important;'}</td>
768
- </tr>
769
- <tr>
770
- <td>mt-0-5</td>
771
- <td>
772
- {'margin-block-start: calc(0.5 * var(--base-increment)) !important;'}{' '}
773
- <span className="doc-text--highlight">/* 4px */</span>
774
- </td>
775
- </tr>
776
- <tr>
777
- <td>mt-1</td>
778
- <td>
779
- {'margin-block-start: calc(1 * var(--base-increment)) !important;'}{' '}
780
- <span className="doc-text--highlight">/* 8px */</span>
781
- </td>
782
- </tr>
783
- <tr>
784
- <td>mt-1-5</td>
785
- <td>
786
- {'margin-block-start: calc(1.5 * var(--base-increment)) !important;'}{' '}
787
- <span className="doc-text--highlight">/* 12px */</span>
788
- </td>
789
- </tr>
790
- <tr>
791
- <td>mt-2</td>
792
- <td>
793
- {'margin-block-start: calc(2 * var(--base-increment)) !important;'}{' '}
794
- <span className="doc-text--highlight">/* 16px */</span>
795
- </td>
796
- </tr>
797
- <tr>
798
- <td>mt-3</td>
799
- <td>
800
- {'margin-block-start: calc(3 * var(--base-increment)) !important;'}{' '}
801
- <span className="doc-text--highlight">/* 24px */</span>
802
- </td>
803
- </tr>
804
- <tr>
805
- <td>mt-4</td>
806
- <td>
807
- {'margin-block-start: calc(4 * var(--base-increment)) !important;'}{' '}
808
- <span className="doc-text--highlight">/* 32px */</span>
809
- </td>
810
- </tr>
811
- <tr>
812
- <td>mt-5</td>
813
- <td>
814
- {'margin-block-start: calc(5 * var(--base-increment)) !important;'}{' '}
815
- <span className="doc-text--highlight">/* 40px */</span>
816
- </td>
817
- </tr>
818
-
819
- <tr className="utilities-table__divider-row">
820
- <td>block end (bottom)</td>
821
- <td></td>
822
- </tr>
823
-
824
- <tr>
825
- <td>mb-0</td>
826
- <td>{'margin-inline-end: 0 !important;'}</td>
827
- </tr>
828
- <tr>
829
- <td>mb-0-5</td>
830
- <td>
831
- {'margin-block-end: calc(0.5 * var(--base-increment)) !important;'}{' '}
832
- <span className="doc-text--highlight">/* 4px */</span>
833
- </td>
834
- </tr>
835
- <tr>
836
- <td>mb-1</td>
837
- <td>
838
- {'margin-block-end: calc(1 * var(--base-increment)) !important;'}{' '}
839
- <span className="doc-text--highlight">/* 8px */</span>
840
- </td>
841
- </tr>
842
- <tr>
843
- <td>mb-1-5</td>
844
- <td>
845
- {'margin-block-end: calc(1.5 * var(--base-increment)) !important;'}{' '}
846
- <span className="doc-text--highlight">/* 12px */</span>
847
- </td>
848
- </tr>
849
- <tr>
850
- <td>mb-2</td>
851
- <td>
852
- {'margin-block-end: calc(2 * var(--base-increment)) !important;'}{' '}
853
- <span className="doc-text--highlight">/* 16px */</span>
854
- </td>
855
- </tr>
856
- <tr>
857
- <td>me-3</td>
858
- <td>
859
- {'margin-block-end: calc(3 * var(--base-increment)) !important;'}{' '}
860
- <span className="doc-text--highlight">/* 24px */</span>
861
- </td>
862
- </tr>
863
- <tr>
864
- <td>mb-4</td>
865
- <td>
866
- {'margin-block-end: calc(4 * var(--base-increment)) !important;'}{' '}
867
- <span className="doc-text--highlight">/* 32px */</span>
868
- </td>
869
- </tr>
870
- <tr>
871
- <td>mb-5</td>
872
- <td>
873
- {'margin-block-end: calc(5 * var(--base-increment)) !important;'}{' '}
874
- <span className="doc-text--highlight">/* 40px */</span>
875
- </td>
876
- </tr>
877
-
878
- <tr className="utilities-table__divider-row">
879
- <td>block (y)</td>
880
- <td></td>
881
- </tr>
882
-
883
- <tr>
884
- <td>my-0</td>
885
- <td>
886
- {'margin-block-start: 0 !important;'}
887
- <br />
888
- {'margin-block-end: 0 !important;'}
889
- </td>
890
- </tr>
891
- <tr>
892
- <td>my-0-5</td>
893
- <td>
894
- {'margin-block-start: calc(0.5 * var(--base-increment)) !important;'}{' '}
895
- <span className="doc-text--highlight">/* 4px */</span>
896
- <br />
897
- {'margin-block-end: calc(0.5 * var(--base-increment)) !important;'}{' '}
898
- <span className="doc-text--highlight">/* 4px */</span>
899
- </td>
900
- </tr>
901
- <tr>
902
- <td>my-1</td>
903
- <td>
904
- {'margin-block-start: calc(1 * var(--base-increment)) !important;'}{' '}
905
- <span className="doc-text--highlight">/* 8px */</span>
906
- <br />
907
- {'margin-block-end: calc(1 * var(--base-increment)) !important;'}{' '}
908
- <span className="doc-text--highlight">/* 8px */</span>
909
- </td>
910
- </tr>
911
- <tr>
912
- <td>my-1-5</td>
913
- <td>
914
- {'margin-block-start: calc(1.5 * var(--base-increment)) !important;'}{' '}
915
- <span className="doc-text--highlight">/* 12px */</span>
916
- <br />
917
- {'margin-block-end: calc(1.5 * var(--base-increment)) !important;'}{' '}
918
- <span className="doc-text--highlight">/* 12px */</span>
919
- </td>
920
- </tr>
921
- <tr>
922
- <td>my-2</td>
923
- <td>
924
- {'margin-block-start: calc(2 * var(--base-increment)) !important;'}{' '}
925
- <span className="doc-text--highlight">/* 16px */</span>
926
- <br />
927
- {'margin-block-end: calc(2 * var(--base-increment)) !important;'}{' '}
928
- <span className="doc-text--highlight">/* 16px */</span>
929
- </td>
930
- </tr>
931
- <tr>
932
- <td>my-3</td>
933
- <td>
934
- {'margin-block-start: calc(3 * var(--base-increment)) !important;'}{' '}
935
- <span className="doc-text--highlight">/* 24px */</span>
936
- <br />
937
- {'margin-block-end: calc(3 * var(--base-increment)) !important;'}{' '}
938
- <span className="doc-text--highlight">/* 24px */</span>
939
- </td>
940
- </tr>
941
- <tr>
942
- <td>my-4</td>
943
- <td>
944
- {'margin-block-start: calc(4 * var(--base-increment)) !important;'}{' '}
945
- <span className="doc-text--highlight">/* 32px */</span>
946
- <br />
947
- {'margin-block-end: calc(4 * var(--base-increment)) !important;'}{' '}
948
- <span className="doc-text--highlight">/* 32px */</span>
949
- </td>
950
- </tr>
951
- <tr>
952
- <td>my-5</td>
953
- <td>
954
- {'margin-block-start: calc(5 * var(--base-increment)) !important;'}{' '}
955
- <span className="doc-text--highlight">/* 40px */</span>
956
- <br />
957
- {'margin-block-end: calc(5 * var(--base-increment)) !important;'}{' '}
958
- <span className="doc-text--highlight">/* 40px */</span>
959
- </td>
960
- </tr>
961
-
962
- <tr className="utilities-table__divider-row">
963
- <td>auto</td>
964
- <td></td>
965
- </tr>
966
- <tr>
967
- <td>m-auto</td>
968
- <td>{'margin: auto !important;'}</td>
969
- </tr>
970
- <tr>
971
- <td>ms-auto</td>
972
- <td>{'margin-inline-start: auto !important;'}</td>
973
- </tr>
974
- <tr>
975
- <td>me-auto</td>
976
- <td>{'margin-inline-end: auto !important;'}</td>
977
- </tr>
978
- <tr>
979
- <td>mt-auto</td>
980
- <td>{'margin-block-start: auto !important;'}</td>
981
- </tr>
982
- <tr>
983
- <td>mb-auto</td>
984
- <td>{'margin-block-end: auto !important;'}</td>
985
- </tr>
986
- <tr>
987
- <td>mx-auto</td>
988
- <td>
989
- {'margin-inline-start: auto !important;'}
990
- <br />
991
- {'margin-inline-end: auto !important;'}
992
- </td>
993
- </tr>
994
- <tr>
995
- <td>my-auto</td>
996
- <td>
997
- {'margin-block-start: auto !important;'}
998
- <br />
999
- {'margin-block-end: auto !important;'}
1000
- </td>
1001
- </tr>
1002
- </tbody>
1003
- </table>
1004
- </div>
1005
- </div>
1006
-
1007
- <div className="docs-page__container-block--gap">
1008
- <h3 className="docs-page__h3">Gap</h3>
1009
- <div className="utilities-table__container">
1010
- <table className="table utilities-table">
1011
- <thead>
1012
- <tr>
1013
- <th>Class</th>
1014
- <th>Properties</th>
1015
- </tr>
1016
- </thead>
1017
- <tbody>
1018
- {/* <tr className='utilities-table__divider-row'>
1019
- <td>all</td>
1020
- <td></td>
1021
- </tr> */}
1022
- <tr>
1023
- <td>gap-0</td>
1024
- <td>
1025
- {'gap: var(--gap-0);'} <span className="doc-text--highlight">/* 0px */</span>
1026
- </td>
1027
- </tr>
1028
- <tr>
1029
- <td>gap-0-5</td>
1030
- <td>
1031
- {'gap: var(--gap-0-5);'} <span className="doc-text--highlight">/* 4px */</span>
1032
- </td>
1033
- </tr>
1034
- <tr>
1035
- <td>gap-1</td>
1036
- <td>
1037
- {'gap: var(--gap-1);'} <span className="doc-text--highlight">/* 8px */</span>
1038
- </td>
1039
- </tr>
1040
- <tr>
1041
- <td>gap-1-5</td>
1042
- <td>
1043
- {'gap: var(--gap-1-5);'} <span className="doc-text--highlight">/* 12px */</span>
1044
- </td>
1045
- </tr>
1046
- <tr>
1047
- <td>gap-2</td>
1048
- <td>
1049
- {'gap: var(--gap-2);'} <span className="doc-text--highlight">/* 16px */</span>
1050
- </td>
1051
- </tr>
1052
- <tr>
1053
- <td>gap-3</td>
1054
- <td>
1055
- {'gap: var(--gap-3);'} <span className="doc-text--highlight">/* 24px */</span>
1056
- </td>
1057
- </tr>
1058
- <tr>
1059
- <td>gap-4</td>
1060
- <td>
1061
- {'gap: var(--gap-4);'} <span className="doc-text--highlight">/* 32px */</span>
1062
- </td>
1063
- </tr>
1064
- <tr>
1065
- <td>gap-5</td>
1066
- <td>
1067
- {'gap: var(--gap-5);'} <span className="doc-text--highlight">/* 40px */</span>
1068
- </td>
1069
- </tr>
1070
- </tbody>
1071
- </table>
1072
- </div>
1073
- </div>
1074
- </section>
1075
- );
1076
- }
1077
- }
1078
-
1079
- export {SpacingUtilitiesDoc};