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_deprecated/list-item.html DELETED
@@ -1,1342 +0,0 @@
1
- <section class="docs-page__container">
2
- <h2 class="docs-page__h2">List item</h2>
3
- <h3 class="docs-page__h3">Single list element</h3>
4
- <p class="docs-page__paragraph">Basic layout structure for list elements. The content inside the elements serves just as an example.</p>
5
- <div class="docs-page__code-window" doc-tabs>
6
- <div class="docs-page__window-bar">
7
- <a id="example" href="#" class="active">Example</a>
8
- <a id="markup" href="#">Markup</a>
9
- </div>
10
- <div class="docs-page__window-content">
11
- <div class="docs-page__code-example docs-page__code-example--grey">
12
- <p class="docs-page__paragraph">// One row</p>
13
- <div class="sd-list-item sd-shadow--z1" ng-class="{'sd-list-item--activated':itemActive1}">
14
- <div class="sd-list-item__border sd-list-item__border--locked"></div>
15
- <div class="sd-list-item__column"><i class="icon-text"></i></div>
16
- <div class="sd-list-item__column">
17
- <span class="badge">1</span>
18
- </div>
19
- <div class="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
20
- <div class="sd-list-item__row">
21
- <span class="sd-overflow-ellipsis">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatvel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet.</span>
22
- <time title="March 22, 2017 11:08 AM">11:08, 22.03.2017</time>
23
- </div>
24
- </div>
25
- <div class="sd-list-item__action-menu">
26
- <!--dropdown-->
27
- <div class="dropdown dropdown--align-right" dropdown dropdown-append-to-body is-open="itemActive1">
28
- <button class="icn-btn dropdown__toggle" dropdown__toggle>
29
- <i class="icon-dots-vertical"></i>
30
- </button>
31
- <ul class="dropdown__menu">
32
- <li>
33
- <div class="dropdown__menu-label">
34
- Actions
35
- <button class="dropdown__menu-close"><i class="icon-close-small"></i></button>
36
- </div>
37
- </li>
38
- <li class="dropdown__menu-divider"></li>
39
- <li><button><i class="icon-pencil"></i>Edit</button></li>
40
- <li><button><i class="icon-copy"></i>Copy</button></li>
41
- <li><button><i class="icon-trash"></i>Delete</button></li>
42
- <li class="dropdown__menu-divider"></li>
43
- <li>
44
- <div class="dropdown__menu-label">Actions 2</div>
45
- </li>
46
- <li class="dropdown__menu-item--no-link">
47
- Just some text without a link
48
- </li>
49
-
50
- <li>
51
- <button><i class="icon-download"></i>Download</button>
52
- </li>
53
- <li>
54
- <button><i class="icon-print"></i>Print</button>
55
- </li>
56
- </ul>
57
- </div>
58
- <!--end dropdown-->
59
- </div>
60
- </div>
61
-
62
- <p>&nbsp;</p>
63
-
64
- <p class="docs-page__paragraph">// One row - with horizontal action menu</p>
65
- <div class="sd-list-item sd-shadow--z1">
66
- <div class="sd-list-item__border sd-list-item__border--locked"></div>
67
- <div class="sd-list-item__column"><i class="icon-text"></i></div>
68
- <div class="sd-list-item__column">
69
- <span class="badge">1</span>
70
- </div>
71
- <div class="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
72
- <div class="sd-list-item__row">
73
- <span class="sd-overflow-ellipsis">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatvel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet.</span>
74
- <time title="March 22, 2017 11:08 AM">11:08, 22.03.2017</time>
75
- </div>
76
- </div>
77
- <div class="sd-list-item__action-menu sd-list-item__action-menu--direction-row">
78
- <button class="icn-btn">
79
- <i class="icon-trash"></i>
80
- </button>
81
- <button class="icn-btn">
82
- <i class="icon-pencil"></i>
83
- </button>
84
- </div>
85
- </div>
86
- <p>&nbsp;</p>
87
-
88
- <p class="docs-page__paragraph">// Two rows</p>
89
- <div class="sd-list-item sd-shadow--z1" ng-class="{'sd-list-item--activated':itemActive2}">
90
- <div class="sd-list-item__border sd-list-item__border--locked"></div>
91
- <div class="sd-list-item__column"><i class="icon-photo"></i></div>
92
- <div class="sd-list-item__column">
93
- <span class="badge badge--primary">2</span>
94
- <span class="badge badge--highlight">4</span>
95
- </div>
96
- <div class="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
97
- <div class="sd-list-item__row">
98
- <span class="sd-overflow-ellipsis">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatvel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet.</span>
99
- <time title="March 22, 2017 11:08 AM">11:08, 22.03.2017</time>
100
- </div>
101
- <div class="sd-list-item__row">
102
- <span class="label label--primary label--hollow">primary label</span><span class="label label--highlight2 label--hollow">somelabel</span><span class="sd-overflow-ellipsis sd-list-item--element-grow">Hendrerit in vulputate velit esse molestie praesent.</span><span class="label label--success label--hollow">somelabel</span><span class="label label--success label--hollow">somelabel</span>
103
- </div>
104
- </div>
105
- <div class="sd-list-item__action-menu">
106
- <!--dropdown-->
107
- <div class="dropdown dropdown--align-right" dropdown dropdown-append-to-body is-open="itemActive2">
108
- <button class="icn-btn dropdown__toggle" dropdown__toggle>
109
- <i class="icon-dots-vertical"></i>
110
- </button>
111
- <ul class="dropdown__menu">
112
- <li>
113
- <div class="dropdown__menu-label">
114
- Actions
115
- <button class="dropdown__menu-close"><i class="icon-close-small"></i></button>
116
- </div>
117
- </li>
118
- <li class="dropdown__menu-divider"></li>
119
- <li><button><i class="icon-pencil"></i>Edit</button></li>
120
- <li><button><i class="icon-copy"></i>Copy</button></li>
121
- <li><button><i class="icon-trash"></i>Delete</button></li>
122
- <li class="dropdown__menu-divider"></li>
123
- <li>
124
- <div class="dropdown__menu-label">Actions 2</div>
125
- </li>
126
- <li class="dropdown__menu-item--no-link">
127
- Just some text without a link
128
- </li>
129
-
130
- <li>
131
- <button><i class="icon-download"></i>Download</button>
132
- </li>
133
- <li>
134
- <button><i class="icon-print"></i>Print</button>
135
- </li>
136
- </ul>
137
- </div>
138
- <!--end dropdown-->
139
- </div>
140
- </div>
141
- <p>&nbsp;</p>
142
- <div class="sd-list-item sd-shadow--z1" ng-class="{'sd-list-item--activated':itemActive2}">
143
- <div class="sd-list-item__border"></div>
144
- <div class="sd-list-item__column"><i class="icon-text"></i></div>
145
- <div class="sd-list-item__column">
146
- <span class="badge badge--primary">2</span>
147
- <span class="badge badge--warning">3</span>
148
- </div>
149
- <div class="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
150
- <div class="sd-list-item__row">
151
- <figure class="avatar avatar--small">vs</figure>
152
- <span class="sd-overflow-ellipsis sd-list-item--element-grow"><span class="sd-list-item__slugline">This is a Slugline</span>Dolore eu feugiat nulla facilisis at vero eros et luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</span>
153
- <time title="March 22, 2017 11:08 AM">11:08, 22.03.2017</time>
154
- </div>
155
- <div class="sd-list-item__row">
156
- <span class="label">article</span><span class="label label--yellow2 label--hollow">in progress</span><span class="sd-overflow-ellipsis sd-list-item--element-grow"><span class="sd-overflow-ellipsis sd-list-item__inline-text">Reuters</span><span class="sd-list-item__text-label">desk:</span><span class="sd-overflow-ellipsis sd-list-item__text-strong">Politics</span></span>
157
- <span class="sd-overflow-ellipsis sd-list-item__inline-text">Related:</span> <span class="sd-text-icon sd-text-icon--aligned-r"><i class="icon-text sd-opacity--40"></i>4</span><span class="sd-text-icon sd-text-icon--aligned-r"><i class="icon-photo sd-opacity--40"></i>6</span>
158
- </div>
159
- </div>
160
- <div class="sd-list-item__action-menu">
161
- <button class="icn-btn">
162
- <i class="icon-dots-vertical"></i>
163
- </button>
164
- </div>
165
- </div>
166
- <p>&nbsp;</p>
167
- <div class="sd-list-item sd-shadow--z1" ng-class="{'sd-list-item--activated':itemActive2}">
168
- <div class="sd-list-item__border"></div>
169
- <div class="sd-list-item__column"><i class="icon-text"></i></div>
170
- <div class="sd-list-item__column">
171
- <span class="badge badge--primary">2</span>
172
- <span class="badge badge--warning">3</span>
173
- </div>
174
- <div class="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
175
- <div class="sd-list-item__row">
176
- <span class="sd-overflow-ellipsis sd-list-item--element-grow"><span class="sd-list-item__slugline">This is a Slugline</span>Dolore eu feugiat nulla facilisis at vero eros et luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</span>
177
- <time title="March 22, 2017 11:08 AM">11:08, 22.03.2017</time>
178
- <figure class="avatar avatar--small avatar--on-right">op</figure>
179
- </div>
180
- <div class="sd-list-item__row">
181
- <span class="label">article</span><span class="label label--yellow2 label--hollow">in progress</span><span class="sd-overflow-ellipsis sd-list-item--element-grow"><span class="sd-overflow-ellipsis sd-list-item__inline-text">Reuters</span><span class="sd-list-item__text-label">desk:</span><span class="sd-overflow-ellipsis sd-list-item__text-strong">National</span></span>
182
- <span class="sd-overflow-ellipsis sd-list-item__inline-text">Related:</span> <span class="sd-text-icon sd-text-icon--aligned-r"><i class="icon-text sd-opacity--40"></i>3</span><span class="sd-text-icon sd-text-icon--aligned-r"><i class="icon-photo sd-opacity--40"></i>4</span>
183
- </div>
184
- </div>
185
- <figure class="sd-list-item__thumbnail">
186
- <img src="/bill.jpg" alt="test">
187
- </figure>
188
- <div class="sd-list-item__action-menu">
189
- <button class="icn-btn">
190
- <i class="icon-dots-vertical"></i>
191
- </button>
192
- </div>
193
- </div>
194
- <p>&nbsp;</p>
195
- <div class="sd-list-item sd-shadow--z1" ng-class="{'sd-list-item--activated':itemActive2}">
196
- <div class="sd-list-item__border"></div>
197
- <div class="sd-list-item__column"><i class="icon-text"></i></div>
198
- <div class="sd-list-item__column">
199
- <span class="badge badge--alert">1</span>
200
- <span class="badge badge--warning">3</span>
201
- </div>
202
- <div class="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
203
- <div class="sd-list-item__row">
204
- <span class="sd-overflow-ellipsis sd-list-item--element-grow"><span class="sd-list-item__slugline">This is also a Slugline</span>Delenit augue duis dolore te feugait nulla facilisi dolore eu feugiat nulla facilisis at vero eros et luptatum zzril delenit augue duis.</span>
205
- <time title="March 22, 2017 11:08 AM">11:12, 21.03.2017</time>
206
- <figure class="avatar avatar--small avatar--on-right">vs</figure>
207
- </div>
208
- <div class="sd-list-item__row">
209
- <span class="label">article</span><span class="label label--success label--hollow">published</span><span class="sd-overflow-ellipsis sd-list-item--element-grow"><span class="sd-overflow-ellipsis sd-list-item__inline-text">Reuters</span><span class="sd-list-item__text-label">desk:</span><span class="sd-overflow-ellipsis sd-list-item__text-strong">Politics</span></span>
210
- <span class="sd-overflow-ellipsis sd-list-item__inline-text">Related:</span> <span class="sd-text-icon sd-text-icon--aligned-r"><i class="icon-text sd-opacity--40"></i>4</span><span class="sd-text-icon sd-text-icon--aligned-r"><i class="icon-photo sd-opacity--40"></i>6</span>
211
- </div>
212
- </div>
213
- <figure class="sd-list-item__thumbnail">
214
- <img src="/d_trump_2.jpg" alt="test">
215
- </figure>
216
- <div class="sd-list-item__action-menu">
217
- <button class="icn-btn">
218
- <i class="icon-dots-vertical"></i>
219
- </button>
220
- </div>
221
- </div>
222
- <p>&nbsp;</p>
223
- <div class="sd-list-item sd-shadow--z1" ng-class="{'sd-list-item--activated':itemActive2}">
224
- <div class="sd-list-item__border"></div>
225
- <div class="sd-list-item__column"><i class="icon-text"></i></div>
226
- <div class="sd-list-item__column">
227
- <span class="badge badge--primary">2</span>
228
- <span class="badge badge--warning">3</span>
229
- </div>
230
- <div class="sd-list-item__column sd-list-item__column--no-border">
231
- <figure class="avatar avatar--small avatar--no-margin">vs</figure>
232
- </div>
233
- <div class="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
234
- <div class="sd-list-item__row">
235
- <span class="sd-overflow-ellipsis sd-list-item--element-grow"><span class="sd-list-item__slugline">This is a Slugline</span>Dolore eu feugiat nulla facilisis at vero eros et luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</span>
236
- <time title="March 22, 2017 11:08 AM">11:08, 22.03.2017</time>
237
-
238
- </div>
239
- <div class="sd-list-item__row">
240
- <span class="label">article</span><span class="label label--yellow2 label--hollow">in progress</span><span class="sd-overflow-ellipsis sd-list-item--element-grow"><span class="sd-overflow-ellipsis sd-list-item__inline-text">Reuters</span><span class="sd-list-item__text-label">desk:</span><span class="sd-overflow-ellipsis sd-list-item__text-strong">Politics</span></span>
241
- <span class="sd-overflow-ellipsis sd-list-item__inline-text">Related:</span> <span class="sd-text-icon sd-text-icon--aligned-r"><i class="icon-text sd-opacity--40"></i>4</span><span class="sd-text-icon sd-text-icon--aligned-r"><i class="icon-photo sd-opacity--40"></i>6</span>
242
- </div>
243
- </div>
244
- <figure class="sd-list-item__thumbnail">
245
- <img src="/obama_2.jpg" alt="test">
246
- </figure>
247
- <div class="sd-list-item__action-menu">
248
- <button class="icn-btn">
249
- <i class="icon-dots-vertical"></i>
250
- </button>
251
- </div>
252
- </div>
253
-
254
- <p>&nbsp;</p>
255
-
256
- <p class="docs-page__paragraph">// Draggable item</p>
257
- <div class="sd-list-item sd-list-item--draggable sd-shadow--z1" ng-class="{'sd-list-item--activated':itemActive1}">
258
- <div class="sd-list-item__border sd-list-item__border--locked"></div>
259
- <div class="sd-list-item__column"><i class="icon-text"></i></div>
260
- <div class="sd-list-item__column">
261
- <span class="badge">1</span>
262
- </div>
263
- <div class="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
264
- <div class="sd-list-item__row">
265
- <span class="sd-overflow-ellipsis">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatvel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet.</span>
266
- <time title="March 22, 2017 11:08 AM">11:08, 22.03.2017</time>
267
- </div>
268
- </div>
269
- <div class="sd-list-item__action-menu">
270
- <!--dropdown-->
271
- <div class="dropdown dropdown--align-right" dropdown dropdown-append-to-body is-open="itemActive1">
272
- <button class="icn-btn dropdown__toggle" dropdown__toggle>
273
- <i class="icon-dots-vertical"></i>
274
- </button>
275
- <ul class="dropdown__menu">
276
- <li>
277
- <div class="dropdown__menu-label">
278
- Actions
279
- <button class="dropdown__menu-close"><i class="icon-close-small"></i></button>
280
- </div>
281
- </li>
282
- <li class="dropdown__menu-divider"></li>
283
- <li><button><i class="icon-pencil"></i>Edit</button></li>
284
- <li><button><i class="icon-copy"></i>Copy</button></li>
285
- <li><button><i class="icon-trash"></i>Delete</button></li>
286
- <li class="dropdown__menu-divider"></li>
287
- <li>
288
- <div class="dropdown__menu-label">Actions 2</div>
289
- </li>
290
- <li class="dropdown__menu-item--no-link">
291
- Just some text without a link
292
- </li>
293
-
294
- <li>
295
- <button><i class="icon-download"></i>Download</button>
296
- </li>
297
- <li>
298
- <button><i class="icon-print"></i>Print</button>
299
- </li>
300
- </ul>
301
- </div>
302
- <!--end dropdown-->
303
- </div>
304
- </div>
305
-
306
- <p>&nbsp;</p>
307
-
308
- <p class="docs-page__paragraph">// Planning item</p>
309
- <div class="sd-list-item sd-shadow--z1">
310
- <div class="sd-list-item__border"></div>
311
- <div class="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
312
- <div class="sd-list-item__row">
313
- <span class="sd-overflow-ellipsis sd-list-item--element-grow">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatvel illum dolore eu feugiat nulla facilisis.</span><time title="March 22, 2017 11:08 AM">11:08, 22.03.2017</time>
314
- </div>
315
- <div class="sd-list-item__row">
316
- <i class="icon-text"></i>&nbsp;<i class="icon-photo"></i>&nbsp;&nbsp;<span class="sd-overflow-ellipsis sd-list-item--element-grow">Hendrerit in vulputate velit esse molestie praesent.</span>&nbsp;<span><i class="icon-post"></i>&nbsp;3</span>&nbsp;&nbsp;<span><i class="icon-link"></i>&nbsp;4</span>
317
- </div>
318
- </div>
319
- <div class="sd-list-item__action-menu">
320
- <button class="icn-btn">
321
- <i class="icon-trash"></i>
322
- </button>
323
- </div>
324
- </div>
325
-
326
- <p>&nbsp;</p>
327
-
328
- <p class="docs-page__paragraph">// Planning item with avatars</p>
329
- <div class="sd-list-item sd-shadow--z1">
330
- <div class="sd-list-item__border"></div>
331
- <div class="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
332
- <div class="sd-list-item__row">
333
- <figure class="avatar avatar--small">vs</figure>
334
- <figure class="avatar avatar--small">sd</figure>
335
- <span class="sd-overflow-ellipsis sd-list-item--element-grow">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatvel illum dolore eu feugiat nulla facilisis.</span>
336
- <time title="March 22, 2017 11:08 AM">11:08, 22.03.2017</time>
337
- </div>
338
- <div class="sd-list-item__row">
339
- <i class="icon-text"></i>&nbsp;<i class="icon-photo"></i>&nbsp;&nbsp;<span class="sd-overflow-ellipsis sd-list-item--element-grow">Hendrerit in vulputate velit esse molestie praesent.</span>&nbsp;<span><i class="icon-post"></i>&nbsp;3</span>&nbsp;&nbsp;<span><i class="icon-link"></i>&nbsp;4</span>
340
- </div>
341
- </div>
342
- <div class="sd-list-item__action-menu">
343
- <button class="icn-btn">
344
- <i class="icon-trash"></i>
345
- </button>
346
- </div>
347
- </div>
348
-
349
- <p>&nbsp;</p>
350
-
351
- <p class="docs-page__paragraph">// Item with colored dot indicator</p>
352
- <div class="sd-list-item sd-padding-l--1 sd-shadow--z1" ng-class="{'sd-list-item--activated':itemActive1}">
353
- <div class="sd-list-item__dot sd-list-item__dot--success"></div>
354
- <div class="sd-list-item__column"><i class="icon-text"></i></div>
355
- <div class="sd-list-item__column">
356
- <span class="badge">1</span>
357
- </div>
358
- <div class="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
359
- <div class="sd-list-item__row">
360
- <span class="sd-overflow-ellipsis">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatvel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet.</span>
361
- <time title="March 22, 2017 11:08 AM">11:08, 22.03.2017</time>
362
- </div>
363
- </div>
364
- <div class="sd-list-item__action-menu">
365
- <!--dropdown-->
366
- <div class="dropdown dropdown--align-right" dropdown dropdown-append-to-body is-open="itemActive1">
367
- <button class="icn-btn dropdown__toggle" dropdown__toggle>
368
- <i class="icon-dots-vertical"></i>
369
- </button>
370
- <ul class="dropdown__menu">
371
- <li>
372
- <div class="dropdown__menu-label">
373
- Actions
374
- <button class="dropdown__menu-close"><i class="icon-close-small"></i></button>
375
- </div>
376
- </li>
377
- <li class="dropdown__menu-divider"></li>
378
- <li><button><i class="icon-pencil"></i>Edit</button></li>
379
- <li><button><i class="icon-copy"></i>Copy</button></li>
380
- <li><button><i class="icon-trash"></i>Delete</button></li>
381
- <li class="dropdown__menu-divider"></li>
382
- <li>
383
- <div class="dropdown__menu-label">Actions 2</div>
384
- </li>
385
- <li class="dropdown__menu-item--no-link">
386
- Just some text without a link
387
- </li>
388
-
389
- <li>
390
- <button><i class="icon-download"></i>Download</button>
391
- </li>
392
- <li>
393
- <button><i class="icon-print"></i>Print</button>
394
- </li>
395
- </ul>
396
- </div>
397
- <!--end dropdown-->
398
- </div>
399
- </div>
400
-
401
- </div>
402
- <div class="docs-page__code-markup">
403
- <pre class="prettyprint lang-html linenums">
404
- <!--One row-->
405
- <div class="sd-list-item sd-shadow--z1" ng-class="{'sd-list-item--activated':itemActive2}" ng-non-bindable>
406
- <div class="sd-list-item__border sd-list-item__border--locked"></div>
407
- <div class="sd-list-item__column"><i class="icon-text"></i></div>
408
- <div class="sd-list-item__column">
409
- <span class="badge">1</span>
410
- </div>
411
- <div class="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
412
- <div class="sd-list-item__row">
413
- <span class="sd-overflow-ellipsis">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatvel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet.</span>
414
- <time title="March 22, 2017 11:08 AM">11:08, 22.03.2017</time>
415
- </div>
416
- </div>
417
- <div class="sd-list-item__action-menu">
418
- <!--dropdown-->
419
- <div class="dropdown dropdown--align-right" dropdown dropdown-append-to-body is-open="itemActive2" ng-non-bindable>
420
- <button class="icn-btn dropdown__toggle" dropdown__toggle><i class="icon-dots-vertical"></i></button>
421
- <ul class="dropdown__menu"><li>Menu content...</li></ul>
422
- </div>
423
- <!--end dropdown-->
424
- </div>
425
- </div>
426
- ...
427
- <!--One row - with horizontal action menu-->
428
- <div class="sd-list-item sd-shadow--z1">
429
- <div class="sd-list-item__border sd-list-item__border--locked"></div>
430
- <div class="sd-list-item__column"><i class="icon-text"></i></div>
431
- <div class="sd-list-item__column">
432
- <span class="badge">1</span>
433
- </div>
434
- <div class="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
435
- <div class="sd-list-item__row">
436
- <span class="sd-overflow-ellipsis">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatvel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet.</span>
437
- <time title="March 22, 2017 11:08 AM">11:08, 22.03.2017</time>
438
- </div>
439
- </div>
440
- <div class="sd-list-item__action-menu sd-list-item__action-menu--direction-row">
441
- <button class="icn-btn">
442
- <i class="icon-trash"></i>
443
- </button>
444
- <button class="icn-btn">
445
- <i class="icon-pencil"></i>
446
- </button>
447
- </div>
448
- </div>
449
- ...
450
- <!--Two rows-->
451
- <div class="sd-list-item sd-shadow--z1" ng-class="{'sd-list-item--activated':itemActive2}" ng-non-bindable>
452
- <div class="sd-list-item__border sd-list-item__border--locked"></div>
453
- <div class="sd-list-item__column"><i class="icon-photo"></i></div>
454
- <div class="sd-list-item__column">
455
- <span class="badge badge--primary">2</span>
456
- <span class="badge badge--highlight">4</span>
457
- </div>
458
- <div class="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
459
- <div class="sd-list-item__row">
460
- <span class="sd-overflow-ellipsis">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatvel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet.</span>
461
- <time title="March 22, 2017 11:08 AM">11:08, 22.03.2017</time>
462
- </div>
463
- <div class="sd-list-item__row">
464
- <span class="label label--primary label--hollow">primary label</span><span class="label label--highlight2 label--hollow">somelabel</span><span class="sd-overflow-ellipsis sd-list-item--element-grow">Hendrerit in vulputate velit esse molestie praesent.</span><span class="label label--success label--hollow">somelabel</span><span class="label label--success label--hollow">somelabel</span>
465
- </div>
466
- </div>
467
- <div class="sd-list-item__action-menu">
468
- <!--dropdown-->
469
- <div class="dropdown dropdown--align-right" dropdown dropdown-append-to-body is-open="itemActive2" ng-non-bindable>
470
- <button class="icn-btn dropdown__toggle" dropdown__toggle><i class="icon-dots-vertical"></i></button>
471
- <ul class="dropdown__menu"><li>Menu content...</li></ul>
472
- </div>
473
- <!--end dropdown-->
474
- </div>
475
- </div>
476
- ...
477
- <!--Draggable item -->
478
- <div class="sd-list-item sd-list-item--draggable sd-shadow--z1" ng-class="{'sd-list-item--activated':itemActive2}" ng-non-bindable>
479
- <div class="sd-list-item__border sd-list-item__border--locked"></div>
480
- <div class="sd-list-item__column"><i class="icon-text"></i></div>
481
- <div class="sd-list-item__column">
482
- <span class="badge">1</span>
483
- </div>
484
- <div class="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
485
- <div class="sd-list-item__row">
486
- <span class="sd-overflow-ellipsis">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatvel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet.</span>
487
- <time title="March 22, 2017 11:08 AM">11:08, 22.03.2017</time>
488
- </div>
489
- </div>
490
- <div class="sd-list-item__action-menu">
491
- <!--dropdown-->
492
- <div class="dropdown dropdown--align-right" dropdown dropdown-append-to-body is-open="itemActive2" ng-non-bindable>
493
- <button class="icn-btn dropdown__toggle" dropdown__toggle><i class="icon-dots-vertical"></i></button>
494
- <ul class="dropdown__menu"><li>Menu content...</li></ul>
495
- </div>
496
- <!--end dropdown-->
497
- </div>
498
- </div>
499
- ...
500
- <!--Planning item-->
501
- <div class="sd-list-item sd-shadow--z1">
502
- <div class="sd-list-item__border"></div>
503
- <div class="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
504
- <div class="sd-list-item__row">
505
- <span class="sd-overflow-ellipsis sd-list-item--element-grow">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatvel illum dolore eu feugiat nulla facilisis.</span><time title="March 22, 2017 11:08 AM">11:08, 22.03.2017</time>
506
- </div>
507
- <div class="sd-list-item__row">
508
- <i class="icon-text"></i>&nbsp;<i class="icon-photo"></i>&nbsp;&nbsp;<span class="sd-overflow-ellipsis sd-list-item--element-grow">Hendrerit in vulputate velit esse molestie praesent.</span>&nbsp;<span><i class="icon-post"></i>&nbsp;3</span>&nbsp;&nbsp;<span><i class="icon-link"></i>&nbsp;4</span>
509
- </div>
510
- </div>
511
- <div class="sd-list-item__action-menu">
512
- <button class="icn-btn">
513
- <i class="icon-trash"></i>
514
- </button>
515
- </div>
516
- </div>
517
- ...
518
- <!--Planning item with avatars -->
519
- <div class="sd-list-item sd-shadow--z1">
520
- <div class="sd-list-item__border"></div>
521
- <div class="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
522
- <div class="sd-list-item__row">
523
- <figure class="avatar avatar--small">vs</figure>
524
- <figure class="avatar avatar--small">sd</figure>
525
- <span class="sd-overflow-ellipsis sd-list-item--element-grow">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatvel illum dolore eu feugiat nulla facilisis.</span>
526
- <time title="March 22, 2017 11:08 AM">11:08, 22.03.2017</time>
527
- </div>
528
- <div class="sd-list-item__row">
529
- <i class="icon-text"></i>&nbsp;<i class="icon-photo"></i>&nbsp;&nbsp;<span class="sd-overflow-ellipsis sd-list-item--element-grow">Hendrerit in vulputate velit esse molestie praesent.</span>&nbsp;<span><i class="icon-post"></i>&nbsp;3</span>&nbsp;&nbsp;<span><i class="icon-link"></i>&nbsp;4</span>
530
- </div>
531
- </div>
532
- <div class="sd-list-item__action-menu">
533
- <button class="icn-btn">
534
- <i class="icon-trash"></i>
535
- </button>
536
- </div>
537
- </div>
538
- ...
539
- <!-- Item with colored dot indicator -->
540
- <div class="sd-list-item sd-shadow--z1">
541
- <div class="sd-list-item__dot sd-list-item__dot--success"></div>
542
- <div class="sd-list-item__column"><i class="icon-text"></i></div>
543
- <div class="sd-list-item__column">
544
- <span class="badge">1</span>
545
- </div>
546
- <div class="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
547
- <div class="sd-list-item__row">
548
- <span class="sd-overflow-ellipsis">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatvel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet.</span>
549
- <time title="March 22, 2017 11:08 AM">11:08, 22.03.2017</time>
550
- </div>
551
- </div>
552
- <div class="sd-list-item__action-menu">
553
- ...
554
- </div>
555
- </div>
556
- ...
557
- </pre>
558
- </div>
559
- </div>
560
- </div>
561
- <h3 class="docs-page__h3">List item group</h3>
562
- <p class="docs-page__paragraph">Structure for list elements groups. The content inside the elements serves just as an example.</p>
563
- <p class="docs-page__paragraph">Default group (no space between list items): add wrapper div with class <code>sd-list-item-group</code>.
564
- <p class="docs-page__paragraph">If you need some space between list items, add modifier to default one, so the class is <code>sd-list-item-group sd-list-item-group--space-between-items</code>.
565
- <div class="docs-page__code-window" doc-tabs>
566
- <div class="docs-page__window-bar">
567
- <a id="example" href="#" class="active">Example</a>
568
- <a id="markup" href="#">Markup</a>
569
- </div>
570
- <div class="docs-page__window-content">
571
- <div class="docs-page__code-example docs-page__code-example--grey">
572
- <p class="docs-page__paragraph">// Default group (shadow class goes in the group div)</p>
573
- <div class="sd-list-item-group sd-shadow--z2">
574
- <div class="sd-list-item" ng-class="{'sd-list-item--activated':itemActive3}">
575
- <div class="sd-list-item__column"><i class="icon-text"></i></div>
576
- <div class="sd-list-item__column">
577
- <span class="badge">1</span>
578
- </div>
579
- <div class="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
580
- <div class="sd-list-item__row">
581
- <span class="sd-overflow-ellipsis">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatvel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet.</span>
582
- <time title="March 22, 2017 11:08 AM">11:08, 22.03.2017</time>
583
- </div>
584
- </div>
585
- <div class="sd-list-item__action-menu">
586
- <!--dropdown-->
587
- <div class="dropdown dropdown--align-right" dropdown dropdown-append-to-body is-open="itemActive3">
588
- <button class="icn-btn dropdown__toggle" dropdown__toggle>
589
- <i class="icon-dots-vertical"></i>
590
- </button>
591
- <ul class="dropdown__menu">
592
- <li>
593
- <div class="dropdown__menu-label">
594
- Actions
595
- <button class="dropdown__menu-close"><i class="icon-close-small"></i></button>
596
- </div>
597
- </li>
598
- <li class="dropdown__menu-divider"></li>
599
- <li><button><i class="icon-pencil"></i>Edit</button></li>
600
- <li><button><i class="icon-copy"></i>Copy</button></li>
601
- <li><button><i class="icon-trash"></i>Delete</button></li>
602
- <li class="dropdown__menu-divider"></li>
603
- <li>
604
- <div class="dropdown__menu-label">Actions 2</div>
605
- </li>
606
- <li class="dropdown__menu-item--no-link">
607
- Just some text without a link
608
- </li>
609
-
610
- <li>
611
- <button><i class="icon-download"></i>Download</button>
612
- </li>
613
- <li>
614
- <button><i class="icon-print"></i>Print</button>
615
- </li>
616
- </ul>
617
- </div>
618
- <!--end dropdown-->
619
- </div>
620
- </div>
621
- <div class="sd-list-item" ng-class="{'sd-list-item--activated':itemActive4}">
622
- <div class="sd-list-item__column"><i class="icon-text"></i></div>
623
- <div class="sd-list-item__column">
624
- <span class="badge badge--primary">2</span>
625
- </div>
626
- <div class="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
627
- <div class="sd-list-item__row">
628
- <span class="sd-overflow-ellipsis">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatvel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet.</span>
629
- <time title="March 22, 2017 11:08 AM">11:08, 22.03.2017</time>
630
- </div>
631
- </div>
632
- <div class="sd-list-item__action-menu">
633
- <!--dropdown-->
634
- <div class="dropdown dropdown--align-right" dropdown dropdown-append-to-body is-open="itemActive4">
635
- <button class="icn-btn dropdown__toggle" dropdown__toggle>
636
- <i class="icon-dots-vertical"></i>
637
- </button>
638
- <ul class="dropdown__menu">
639
- <li>
640
- <div class="dropdown__menu-label">
641
- Actions
642
- <button class="dropdown__menu-close"><i class="icon-close-small"></i></button>
643
- </div>
644
- </li>
645
- <li class="dropdown__menu-divider"></li>
646
- <li><button><i class="icon-pencil"></i>Edit</button></li>
647
- <li><button><i class="icon-copy"></i>Copy</button></li>
648
- <li><button><i class="icon-trash"></i>Delete</button></li>
649
- <li class="dropdown__menu-divider"></li>
650
- <li>
651
- <div class="dropdown__menu-label">Actions 2</div>
652
- </li>
653
- <li class="dropdown__menu-item--no-link">
654
- Just some text without a link
655
- </li>
656
-
657
- <li>
658
- <button><i class="icon-download"></i>Download</button>
659
- </li>
660
- <li>
661
- <button><i class="icon-print"></i>Print</button>
662
- </li>
663
- </ul>
664
- </div>
665
- <!--end dropdown-->
666
- </div>
667
- </div>
668
- <div class="sd-list-item" ng-class="{'sd-list-item--activated':itemActive5}">
669
- <div class="sd-list-item__column"><i class="icon-text"></i></div>
670
- <div class="sd-list-item__column">
671
- <span class="badge badge--highlight">3</span>
672
- </div>
673
- <div class="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
674
- <div class="sd-list-item__row">
675
- <span class="sd-overflow-ellipsis">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatvel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet.</span>
676
- <time title="March 22, 2017 11:08 AM">11:08, 22.03.2017</time>
677
- </div>
678
- </div>
679
- <div class="sd-list-item__action-menu">
680
- <!--dropdown-->
681
- <div class="dropdown dropdown--align-right" dropdown dropdown-append-to-body is-open="itemActive5">
682
- <button class="icn-btn dropdown__toggle" dropdown__toggle>
683
- <i class="icon-dots-vertical"></i>
684
- </button>
685
- <ul class="dropdown__menu">
686
- <li>
687
- <div class="dropdown__menu-label">
688
- Actions
689
- <button class="dropdown__menu-close"><i class="icon-close-small"></i></button>
690
- </div>
691
- </li>
692
- <li class="dropdown__menu-divider"></li>
693
- <li><button><i class="icon-pencil"></i>Edit</button></li>
694
- <li><button><i class="icon-copy"></i>Copy</button></li>
695
- <li><button><i class="icon-trash"></i>Delete</button></li>
696
- <li class="dropdown__menu-divider"></li>
697
- <li>
698
- <div class="dropdown__menu-label">Actions 2</div>
699
- </li>
700
- <li class="dropdown__menu-item--no-link">
701
- Just some text without a link
702
- </li>
703
-
704
- <li>
705
- <button><i class="icon-download"></i>Download</button>
706
- </li>
707
- <li>
708
- <button><i class="icon-print"></i>Print</button>
709
- </li>
710
- </ul>
711
- </div>
712
- <!--end dropdown-->
713
- </div>
714
- </div>
715
- </div>
716
- <!-- end sd-list-item-group -->
717
-
718
- <p>&nbsp;</p>
719
-
720
- <p class="docs-page__paragraph">// Group with space between list items (shadow class goes in list item)</p>
721
- <div class="sd-list-item-group sd-list-item-group--space-between-items">
722
- <div class="sd-list-item sd-shadow--z1" ng-class="{'sd-list-item--activated':itemActive6}">
723
- <div class="sd-list-item__column"><i class="icon-text"></i></div>
724
- <div class="sd-list-item__column">
725
- <span class="badge">1</span>
726
- </div>
727
- <div class="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
728
- <div class="sd-list-item__row">
729
- <span class="sd-overflow-ellipsis">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatvel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet.</span>
730
- <time title="March 22, 2017 11:08 AM">11:08, 22.03.2017</time>
731
- </div>
732
- </div>
733
- <div class="sd-list-item__action-menu">
734
- <!--dropdown-->
735
- <div class="dropdown dropdown--align-right" dropdown dropdown-append-to-body is-open="itemActive6">
736
- <button class="icn-btn dropdown__toggle" dropdown__toggle>
737
- <i class="icon-dots-vertical"></i>
738
- </button>
739
- <ul class="dropdown__menu">
740
- <li>
741
- <div class="dropdown__menu-label">
742
- Actions
743
- <button class="dropdown__menu-close"><i class="icon-close-small"></i></button>
744
- </div>
745
- </li>
746
- <li class="dropdown__menu-divider"></li>
747
- <li><button><i class="icon-pencil"></i>Edit</button></li>
748
- <li><button><i class="icon-copy"></i>Copy</button></li>
749
- <li><button><i class="icon-trash"></i>Delete</button></li>
750
- <li class="dropdown__menu-divider"></li>
751
- <li>
752
- <div class="dropdown__menu-label">Actions 2</div>
753
- </li>
754
- <li class="dropdown__menu-item--no-link">
755
- Just some text without a link
756
- </li>
757
-
758
- <li>
759
- <button><i class="icon-download"></i>Download</button>
760
- </li>
761
- <li>
762
- <button><i class="icon-print"></i>Print</button>
763
- </li>
764
- </ul>
765
- </div>
766
- <!--end dropdown-->
767
- </div>
768
- </div>
769
- <div class="sd-list-item sd-shadow--z1" ng-class="{'sd-list-item--activated':itemActive7}">
770
- <div class="sd-list-item__column"><i class="icon-text"></i></div>
771
- <div class="sd-list-item__column">
772
- <span class="badge badge--success">4</span>
773
- </div>
774
- <div class="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
775
- <div class="sd-list-item__row">
776
- <span class="sd-overflow-ellipsis">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatvel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet.</span>
777
- <time title="March 22, 2017 11:08 AM">11:08, 22.03.2017</time>
778
- </div>
779
- </div>
780
- <div class="sd-list-item__action-menu">
781
- <!--dropdown-->
782
- <div class="dropdown dropdown--align-right" dropdown dropdown-append-to-body is-open="itemActive7">
783
- <button class="icn-btn dropdown__toggle" dropdown__toggle>
784
- <i class="icon-dots-vertical"></i>
785
- </button>
786
- <ul class="dropdown__menu">
787
- <li>
788
- <div class="dropdown__menu-label">
789
- Actions
790
- <button class="dropdown__menu-close"><i class="icon-close-small"></i></button>
791
- </div>
792
- </li>
793
- <li class="dropdown__menu-divider"></li>
794
- <li><button><i class="icon-pencil"></i>Edit</button></li>
795
- <li><button><i class="icon-copy"></i>Copy</button></li>
796
- <li><button><i class="icon-trash"></i>Delete</button></li>
797
- <li class="dropdown__menu-divider"></li>
798
- <li>
799
- <div class="dropdown__menu-label">Actions 2</div>
800
- </li>
801
- <li class="dropdown__menu-item--no-link">
802
- Just some text without a link
803
- </li>
804
-
805
- <li>
806
- <button><i class="icon-download"></i>Download</button>
807
- </li>
808
- <li>
809
- <button><i class="icon-print"></i>Print</button>
810
- </li>
811
- </ul>
812
- </div>
813
- <!--end dropdown-->
814
- </div>
815
- </div>
816
- <div class="sd-list-item sd-shadow--z1" ng-class="{'sd-list-item--activated':itemActive8}">
817
- <div class="sd-list-item__column"><i class="icon-text"></i></div>
818
- <div class="sd-list-item__column">
819
- <span class="badge badge--highlight">3</span>
820
- </div>
821
- <div class="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
822
- <div class="sd-list-item__row">
823
- <span class="sd-overflow-ellipsis">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatvel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet.</span>
824
- <time title="March 22, 2017 11:08 AM">11:08, 22.03.2017</time>
825
- </div>
826
- </div>
827
- <div class="sd-list-item__action-menu">
828
- <!--dropdown-->
829
- <div class="dropdown dropdown--align-right" dropdown dropdown-append-to-body is-open="itemActive8">
830
- <button class="icn-btn dropdown__toggle" dropdown__toggle>
831
- <i class="icon-dots-vertical"></i>
832
- </button>
833
- <ul class="dropdown__menu">
834
- <li>
835
- <div class="dropdown__menu-label">
836
- Actions
837
- <button class="dropdown__menu-close"><i class="icon-close-small"></i></button>
838
- </div>
839
- </li>
840
- <li class="dropdown__menu-divider"></li>
841
- <li><button><i class="icon-pencil"></i>Edit</button></li>
842
- <li><button><i class="icon-copy"></i>Copy</button></li>
843
- <li><button><i class="icon-trash"></i>Delete</button></li>
844
- <li class="dropdown__menu-divider"></li>
845
- <li>
846
- <div class="dropdown__menu-label">Actions 2</div>
847
- </li>
848
- <li class="dropdown__menu-item--no-link">
849
- Just some text without a link
850
- </li>
851
-
852
- <li>
853
- <button><i class="icon-download"></i>Download</button>
854
- </li>
855
- <li>
856
- <button><i class="icon-print"></i>Print</button>
857
- </li>
858
- </ul>
859
- </div>
860
- <!--end dropdown-->
861
- </div>
862
- </div>
863
- </div>
864
- <!-- end sd-list-item-group -->
865
- </div>
866
- <div class="docs-page__code-markup">
867
- <pre class="prettyprint lang-html linenums">
868
- <!-- Default group (shadow class goes in the group div) -->
869
- <div class="sd-list-item-group sd-shadow--z2">
870
- <div class="sd-list-item" ng-class="{'sd-list-item--activated':itemActive12}">
871
- <div class="sd-list-item__column"><i class="icon-text"></i></div>
872
- <div class="sd-list-item__column">
873
- <span class="badge">1</span>
874
- </div>
875
- <div class="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
876
- <div class="sd-list-item__row">
877
- <span class="sd-overflow-ellipsis">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatvel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet.</span>
878
- <time title="March 22, 2017 11:08 AM">11:08, 22.03.2017</time>
879
- </div>
880
- </div>
881
- <div class="sd-list-item__action-menu">
882
- <!--dropdown-->
883
- <div class="dropdown dropdown--align-right" dropdown dropdown-append-to-body is-open="itemActive12">
884
- <button class="icn-btn dropdown__toggle" dropdown__toggle>
885
- <i class="icon-dots-vertical"></i>
886
- </button>
887
- <ul class="dropdown__menu">
888
- <li>
889
- <div class="dropdown__menu-label">
890
- Actions
891
- <button class="dropdown__menu-close"><i class="icon-close-small"></i></button>
892
- </div>
893
- </li>
894
- <li class="dropdown__menu-divider"></li>
895
- <li><button><i class="icon-pencil"></i>Edit</button></li>
896
- <li><button><i class="icon-copy"></i>Copy</button></li>
897
- <li><button><i class="icon-trash"></i>Delete</button></li>
898
- <li class="dropdown__menu-divider"></li>
899
- <li>
900
- <div class="dropdown__menu-label">Actions 2</div>
901
- </li>
902
- <li class="dropdown__menu-item--no-link">
903
- Just some text without a link
904
- </li>
905
-
906
- <li>
907
- <button><i class="icon-download"></i>Download</button>
908
- </li>
909
- <li>
910
- <button><i class="icon-print"></i>Print</button>
911
- </li>
912
- </ul>
913
- </div>
914
- <!--end dropdown-->
915
- </div>
916
- </div>
917
- ...
918
- </div>
919
-
920
- <!-- Group with space between list items (shadow class goes in list item) -->
921
- <div class="sd-list-item-group sd-list-item-group--space-between-items">
922
- <div class="sd-list-item" ng-class="{'sd-list-item--activated':itemActive14}">
923
- <div class="sd-list-item__column"><i class="icon-text"></i></div>
924
- <div class="sd-list-item__column">
925
- <span class="badge">1</span>
926
- </div>
927
- <div class="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
928
- <div class="sd-list-item__row">
929
- <span class="sd-overflow-ellipsis">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatvel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet.</span>
930
- <time title="March 22, 2017 11:08 AM">11:08, 22.03.2017</time>
931
- </div>
932
- </div>
933
- <div class="sd-list-item__action-menu">
934
- <!--dropdown-->
935
- <div class="dropdown dropdown--align-right" dropdown dropdown-append-to-body is-open="itemActive14">
936
- <button class="icn-btn dropdown__toggle" dropdown__toggle>
937
- <i class="icon-dots-vertical"></i>
938
- </button>
939
- <ul class="dropdown__menu">
940
- <li>
941
- <div class="dropdown__menu-label">
942
- Actions
943
- <button class="dropdown__menu-close"><i class="icon-close-small"></i></button>
944
- </div>
945
- </li>
946
- <li class="dropdown__menu-divider"></li>
947
- <li><button><i class="icon-pencil"></i>Edit</button></li>
948
- <li><button><i class="icon-copy"></i>Copy</button></li>
949
- <li><button><i class="icon-trash"></i>Delete</button></li>
950
- <li class="dropdown__menu-divider"></li>
951
- <li>
952
- <div class="dropdown__menu-label">Actions 2</div>
953
- </li>
954
- <li class="dropdown__menu-item--no-link">
955
- Just some text without a link
956
- </li>
957
- <li>
958
- <button><i class="icon-download"></i>Download</button>
959
- </li>
960
- <li>
961
- <button><i class="icon-print"></i>Print</button>
962
- </li>
963
- </ul>
964
- </div>
965
- <!--end dropdown-->
966
- </div>
967
- </div>
968
- ...
969
- </div>
970
- </pre>
971
- </div>
972
- </div>
973
- </div>
974
-
975
- <h3 class="docs-page__h3">Nested list items</h3>
976
- <p class="docs-page__paragraph">Structure...</p>
977
- <div class="docs-page__code-window" doc-tabs>
978
- <div class="docs-page__window-bar">
979
- <a id="example" href="#" class="active">Example</a>
980
- <a id="markup" href="#">Markup</a>
981
- </div>
982
- <div class="docs-page__window-content">
983
- <div class="docs-page__code-example docs-page__code-example--grey">
984
- <p class="docs-page__paragraph">// Group with space between list items (shadow class goes in list item)</p>
985
- <div class="sd-list-item-group sd-list-item-group--space-between-items">
986
- <!-- Nested list item -->
987
- <div class="sd-list-item-nested" ng-class="{'sd-list-item-nested--expanded' : openNested1, 'sd-list-item-nested--collapsed' : !openNested1}" ng-init="openNested1 = true">
988
- <div class="sd-list-item sd-list-item-nested__parent sd-shadow--z1" ng-class="{'sd-list-item--selected' : checkThis1}">
989
- <div class="sd-list-item__border"></div>
990
- <div class="sd-list-item__column sd-list-item__column--has-check" ng-class="{'sd-list-item__column--checked' : checkThis1}">
991
- <div class="sd-list-item__checkbox-container">
992
- <sd-check ng-model="checkThis1"></sd-check>
993
- </div>
994
- <span class="icn-mix sd-list-item__item-type">
995
- <i class="icon-repeat icn-mix__sub-icn"></i>
996
- <i class="icon-calendar-list"></i>
997
- </span>
998
- </div>
999
- <div class="sd-list-item__column">
1000
- <span class="badge badge--success">P</span>
1001
- </div>
1002
- <div class="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
1003
- <div class="sd-list-item__row">
1004
- <span class="label label--success label--hollow">Scheduled</span>
1005
- <span class="sd-overflow-ellipsis sd-list-item--element-grow"><span class="sd-list-item__slugline">Slugline</span>Pellentesque libero tortor, tincidunt et, tincidunt eget semper nec quam.</span>
1006
- <time title="March 22, 2017 11:08 AM">12:50, 15.09.2017</time>
1007
- </div>
1008
- <div class="sd-list-item__row">
1009
- <span class="sd-overflow-ellipsis sd-list-item--element-grow"> <a class="text-link" ng-click="openNested1 = !openNested1"><i class="icon-calendar"></i>(3) <span ng-show="openNested1">Hide nested items</span><span ng-show="!openNested1">Show nested items</span></a></span>
1010
- </div>
1011
- </div>
1012
- <div class="sd-list-item__action-menu">
1013
- <button class="icn-btn">
1014
- <i class="icon-dots-vertical"></i>
1015
- </button>
1016
- </div>
1017
- </div>
1018
- <!-- Nested items -->
1019
- <div class="sd-list-item-nested__childs sd-shadow--z1">
1020
- <!-- Child 1 -->
1021
- <div class="sd-list-item">
1022
- <div class="sd-list-item__border"></div>
1023
- <div class="sd-list-item__column">
1024
- <i class="icon-calendar"></i>
1025
- </div>
1026
- <div class="sd-list-item__column">
1027
- <span class="badge badge--light">&nbsp;</span>
1028
- </div>
1029
- <div class="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
1030
- <div class="sd-list-item__row">
1031
- <i class="icon-text sd-list-item__inline-icon"></i><i class="icon-photo sd-list-item__inline-icon"></i><i class="icon-video sd-list-item__inline-icon"></i>
1032
- <span class="label label--hollow">Draft</span>
1033
- <span class="sd-overflow-ellipsis sd-list-item--element-grow">
1034
- <span class="sd-list-item__slugline">Lipsum Ipsum</span><span class="sd-list-item__text-label">agenda:</span><span class="sd-overflow-ellipsis sd-list-item__text-strong sd-list-item__element-rm-10">Sport agenda</span><span>Molestie consequatvel illum dolore eu feugiat nulla facilisis.</span>
1035
- </span>
1036
- <time title="March 22, 2017 11:08 AM">13:00–14:00, 15.09.2017</time>
1037
- </div>
1038
- </div>
1039
- <div class="sd-list-item__action-menu">
1040
- <button class="icn-btn">
1041
- <i class="icon-dots-vertical"></i>
1042
- </button>
1043
- </div>
1044
- </div>
1045
- <!-- Child 2 -->
1046
- <div class="sd-list-item">
1047
- <div class="sd-list-item__border"></div>
1048
- <div class="sd-list-item__column">
1049
- <i class="icon-calendar"></i>
1050
- </div>
1051
- <div class="sd-list-item__column">
1052
- <span class="badge badge--success">P</span>
1053
- </div>
1054
- <div class="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
1055
- <div class="sd-list-item__row">
1056
- <i class="icon-text sd-list-item__inline-icon"></i>
1057
- <span class="label label--highlight2 label--hollow">Rescheduled</span>
1058
- <span class="sd-overflow-ellipsis sd-list-item--element-grow">
1059
- <span class="sd-list-item__slugline">Lipsum Ipsum</span><span class="sd-list-item__text-label">agenda:</span><span class="sd-overflow-ellipsis sd-list-item__text-strong sd-list-item__element-rm-10">Sport agenda</span><span>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.</span>
1060
- </span>
1061
- <time title="March 22, 2017 11:08 AM">13:00–14:00, 15.09.2017</time>
1062
- </div>
1063
- </div>
1064
- <div class="sd-list-item__action-menu">
1065
- <button class="icn-btn">
1066
- <i class="icon-dots-vertical"></i>
1067
- </button>
1068
- </div>
1069
- </div>
1070
- <!-- Child 3 -->
1071
- <div class="sd-list-item">
1072
- <div class="sd-list-item__border"></div>
1073
- <div class="sd-list-item__column">
1074
- <i class="icon-calendar"></i>
1075
- </div>
1076
- <div class="sd-list-item__column">
1077
- <span class="badge badge--success">P</span>
1078
- </div>
1079
- <div class="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
1080
- <div class="sd-list-item__row">
1081
- <i class="icon-text sd-list-item__inline-icon"></i><i class="icon-photo sd-list-item__inline-icon"></i>
1082
- <span class="label label--success label--hollow">Scheduled</span>
1083
- <span class="sd-overflow-ellipsis sd-list-item--element-grow">
1084
- <span class="sd-list-item__slugline">Lipsum Ipsum</span><span class="sd-list-item__text-label">agenda:</span><span class="sd-overflow-ellipsis sd-list-item__text-strong sd-list-item__element-rm-10">Sport agenda</span><span>In enim justo rhoncus ut</span>
1085
- </span>
1086
- <time title="March 22, 2017 11:08 AM">13:00–14:00, 15.09.2017</time>
1087
- </div>
1088
- </div>
1089
- <div class="sd-list-item__action-menu">
1090
- <button class="icn-btn">
1091
- <i class="icon-dots-vertical"></i>
1092
- </button>
1093
- </div>
1094
- </div>
1095
- </div>
1096
- <!-- END nested items -->
1097
- </div>
1098
- <!-- END Nested list item -->
1099
- <!-- Nested list item 2-->
1100
- <div class="sd-list-item-nested" ng-class="{'sd-list-item-nested--expanded' : openNested2, 'sd-list-item-nested--collapsed' : !openNested2}" ng-init="openNested2 = true">
1101
- <div class="sd-list-item sd-list-item-nested__parent sd-shadow--z1" ng-class="{'sd-list-item--selected' : checkThis2}">
1102
- <div class="sd-list-item__border"></div>
1103
- <div class="sd-list-item__column sd-list-item__column--has-check" ng-class="{'sd-list-item__column--checked' : checkThis2}">
1104
- <div class="sd-list-item__checkbox-container">
1105
- <sd-check ng-model="checkThis2"></sd-check>
1106
- </div>
1107
- <span class="icn-mix sd-list-item__item-type">
1108
- <i class="icon-calendar-list"></i>
1109
- </span>
1110
- </div>
1111
- <div class="sd-list-item__column">
1112
- <span class="badge badge--light">&nbsp;</span>
1113
- </div>
1114
- <div class="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
1115
- <div class="sd-list-item__row">
1116
- <span class="label label--hollow">Draft</span>
1117
- <span class="sd-overflow-ellipsis sd-list-item--element-grow"><span class="sd-list-item__slugline">Slugline</span>Vestibulum ullamcorper mauris at ligula vestibulum volutpat pretium libero.</span>
1118
- <time title="March 22, 2017 11:08 AM">12:50, 15.09.2017</time>
1119
- </div>
1120
- <div class="sd-list-item__row">
1121
- <span class="sd-overflow-ellipsis sd-list-item--element-grow"> <a class="text-link" ng-click="openNested2 = !openNested2"><i class="icon-calendar"></i>(2) <span ng-show="openNested2">Hide nested items</span><span ng-show="!openNested2">Show nested items</span></a></span>
1122
- </div>
1123
- </div>
1124
- <div class="sd-list-item__action-menu">
1125
- <button class="icn-btn">
1126
- <i class="icon-dots-vertical"></i>
1127
- </button>
1128
- </div>
1129
- </div>
1130
- <!-- Nested items -->
1131
- <div class="sd-list-item-nested__childs sd-shadow--z1">
1132
- <!-- Child 1 -->
1133
- <div class="sd-list-item">
1134
- <div class="sd-list-item__border"></div>
1135
- <div class="sd-list-item__column">
1136
- <i class="icon-calendar"></i>
1137
- </div>
1138
- <div class="sd-list-item__column">
1139
- <span class="badge badge--light">&nbsp;</span>
1140
- </div>
1141
- <div class="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
1142
- <div class="sd-list-item__row">
1143
- <i class="icon-text sd-list-item__inline-icon"></i><i class="icon-video sd-list-item__inline-icon"></i>
1144
- <span class="label label--hollow">Draft</span>
1145
- <span class="sd-overflow-ellipsis sd-list-item--element-grow">
1146
- <span class="sd-list-item__slugline">Slugline Lipsum</span><span class="sd-list-item__text-label">agenda:</span><span class="sd-overflow-ellipsis sd-list-item__text-strong sd-list-item__element-rm-10">Daily agenda</span><span>Molestie consequatvel illum dolore eu feugiat nulla facilisis.</span>
1147
- </span>
1148
- <time title="March 22, 2017 11:08 AM">13:00–14:00, 15.09.2017</time>
1149
- </div>
1150
- </div>
1151
- <div class="sd-list-item__action-menu">
1152
- <button class="icn-btn">
1153
- <i class="icon-dots-vertical"></i>
1154
- </button>
1155
- </div>
1156
- </div>
1157
- <!-- Child 2 -->
1158
- <div class="sd-list-item">
1159
- <div class="sd-list-item__border"></div>
1160
- <div class="sd-list-item__column">
1161
- <i class="icon-calendar"></i>
1162
- </div>
1163
- <div class="sd-list-item__column">
1164
- <span class="badge badge--success">P</span>
1165
- </div>
1166
- <div class="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
1167
- <div class="sd-list-item__row">
1168
- <i class="icon-text sd-list-item__inline-icon"></i><i class="icon-photo sd-list-item__inline-icon"></i><i class="icon-video sd-list-item__inline-icon"></i>
1169
- <span class="label label--highlight2 label--hollow">Rescheduled</span>
1170
- <span class="sd-overflow-ellipsis sd-list-item--element-grow">
1171
- <span class="sd-list-item__slugline">Slugline Ipsum</span><span class="sd-list-item__text-label">agenda:</span><span class="sd-overflow-ellipsis sd-list-item__text-strong sd-list-item__element-rm-10">Daily agenda</span><span>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.</span>
1172
- </span>
1173
- <time title="March 22, 2017 11:08 AM">13:00–14:00, 15.09.2017</time>
1174
- </div>
1175
- </div>
1176
- <div class="sd-list-item__action-menu">
1177
- <button class="icn-btn">
1178
- <i class="icon-dots-vertical"></i>
1179
- </button>
1180
- </div>
1181
- </div>
1182
- </div>
1183
- <!-- END nested items -->
1184
- </div>
1185
- <!-- END Nested list item 2 -->
1186
-
1187
- <div class="sd-list-item sd-shadow--z1" ng-class="{'sd-list-item--activated': itemActive17, 'sd-list-item--selected' : checkThis12}">
1188
- <div class="sd-list-item__border sd-list-item__border--locked"></div>
1189
- <div class="sd-list-item__column sd-list-item__column--has-check" ng-class="{'sd-list-item__column--checked' : checkThis12}">
1190
- <div class="sd-list-item__checkbox-container">
1191
- <sd-check ng-model="checkThis12"></sd-check>
1192
- </div>
1193
- <span class="icn-mix sd-list-item__item-type">
1194
- <i class="icon-calendar-list"></i>
1195
- </span>
1196
- </div>
1197
- <div class="sd-list-item__column">
1198
- <span class="badge badge--success">P</span>
1199
- </div>
1200
- <div class="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
1201
- <div class="sd-list-item__row">
1202
- <span class="label label--hollow">Draft</span>
1203
- <span class="sd-overflow-ellipsis sd-list-item--element-grow"><span class="sd-list-item__slugline">Slugline</span>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatvel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet.</span>
1204
- <time title="March 22, 2017 11:08 AM">13:49, 16.09.2017</time>
1205
- </div>
1206
- </div>
1207
- <div class="sd-list-item__action-menu">
1208
- <!--dropdown-->
1209
- <div class="dropdown dropdown--align-right" dropdown dropdown-append-to-body is-open="itemActive17">
1210
- <button class="icn-btn dropdown__toggle" dropdown__toggle>
1211
- <i class="icon-dots-vertical"></i>
1212
- </button>
1213
- <ul class="dropdown__menu">
1214
- <li>
1215
- <div class="dropdown__menu-label">
1216
- Actions
1217
- <button class="dropdown__menu-close"><i class="icon-close-small"></i></button>
1218
- </div>
1219
- </li>
1220
- <li class="dropdown__menu-divider"></li>
1221
- <li><button><i class="icon-pencil"></i>Edit</button></li>
1222
- <li><button><i class="icon-copy"></i>Copy</button></li>
1223
- <li><button><i class="icon-trash"></i>Delete</button></li>
1224
- <li class="dropdown__menu-divider"></li>
1225
- <li>
1226
- <div class="dropdown__menu-label">Actions 2</div>
1227
- </li>
1228
- <li class="dropdown__menu-item--no-link">
1229
- Just some text without a link
1230
- </li>
1231
-
1232
- <li>
1233
- <button><i class="icon-download"></i>Download</button>
1234
- </li>
1235
- <li>
1236
- <button><i class="icon-print"></i>Print</button>
1237
- </li>
1238
- </ul>
1239
- </div>
1240
- <!--end dropdown-->
1241
- </div>
1242
- </div>
1243
- <!-- Nested list item 3-->
1244
- <div class="sd-list-item-nested" ng-class="{'sd-list-item-nested--expanded' : openNested3, 'sd-list-item-nested--collapsed' : !openNested3}" ng-init="openNested3 = true">
1245
- <div class="sd-list-item sd-list-item-nested__parent sd-shadow--z1" ng-class="{'sd-list-item--selected' : checkThis3}">
1246
- <div class="sd-list-item__border"></div>
1247
- <div class="sd-list-item__column sd-list-item__column--has-check" ng-class="{'sd-list-item__column--checked' : checkThis3}">
1248
- <div class="sd-list-item__checkbox-container">
1249
- <sd-check ng-model="checkThis3"></sd-check>
1250
- </div>
1251
- <span class="icn-mix sd-list-item__item-type">
1252
- <i class="icon-repeat icn-mix__sub-icn"></i>
1253
- <i class="icon-calendar-list"></i>
1254
- </span>
1255
- </div>
1256
- <div class="sd-list-item__column">
1257
- <span class="badge badge--light">&nbsp;</span>
1258
- </div>
1259
- <div class="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
1260
- <div class="sd-list-item__row">
1261
- <span class="label label--yellow2 label--hollow">Postoned</span>
1262
- <span class="sd-overflow-ellipsis sd-list-item--element-grow"><span class="sd-list-item__slugline">Lipsum Slug</span>Duis autem vel eum iriure dolor illum dolore.</span>
1263
- <time title="March 22, 2017 11:08 AM">12:50, 15.09.2017</time>
1264
- </div>
1265
- <div class="sd-list-item__row">
1266
- <span class="sd-overflow-ellipsis sd-list-item--element-grow"> <a class="text-link" ng-click="openNested3 = !openNested3"><i class="icon-calendar"></i>(2) <span ng-show="openNested3">Hide nested items</span><span ng-show="!openNested3">Show nested items</span></a></span>
1267
- </div>
1268
- </div>
1269
- <div class="sd-list-item__action-menu">
1270
- <button class="icn-btn">
1271
- <i class="icon-dots-vertical"></i>
1272
- </button>
1273
- </div>
1274
- </div>
1275
- <!-- Nested items -->
1276
- <div class="sd-list-item-nested__childs sd-shadow--z1">
1277
- <!-- Child 1 -->
1278
- <div class="sd-list-item">
1279
- <div class="sd-list-item__border"></div>
1280
- <div class="sd-list-item__column">
1281
- <i class="icon-calendar"></i>
1282
- </div>
1283
- <div class="sd-list-item__column">
1284
- <span class="badge badge--light">&nbsp;</span>
1285
- </div>
1286
- <div class="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
1287
- <div class="sd-list-item__row">
1288
- <i class="icon-text sd-list-item__inline-icon"></i><i class="icon-photo sd-list-item__inline-icon"></i><i class="icon-video sd-list-item__inline-icon"></i>
1289
- <span class="label label--hollow">Draft</span>
1290
- <span class="sd-overflow-ellipsis sd-list-item--element-grow">
1291
- <span class="sd-list-item__slugline">Lipsum Slug Ipsum</span><span class="sd-list-item__text-label">agenda:</span><span class="sd-overflow-ellipsis sd-list-item__text-strong sd-list-item__element-rm-10">Politics agenda</span><span>Molestie consequatvel illum dolore eu feugiat nulla facilisis.</span>
1292
- </span>
1293
- <time title="March 22, 2017 11:08 AM">13:00–14:00, 15.09.2017</time>
1294
- </div>
1295
- </div>
1296
- <div class="sd-list-item__action-menu">
1297
- <button class="icn-btn">
1298
- <i class="icon-dots-vertical"></i>
1299
- </button>
1300
- </div>
1301
- </div>
1302
- <!-- Child 2 -->
1303
- <div class="sd-list-item">
1304
- <div class="sd-list-item__border sd-list-item__border--locked"></div>
1305
- <div class="sd-list-item__column">
1306
- <i class="icon-calendar"></i>
1307
- </div>
1308
- <div class="sd-list-item__column">
1309
- <span class="badge badge--success">P</span>
1310
- </div>
1311
- <div class="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
1312
- <div class="sd-list-item__row">
1313
- <i class="icon-text sd-list-item__inline-icon"></i>
1314
- <span class="label label--success label--hollow">Scheduled</span>
1315
- <span class="sd-overflow-ellipsis sd-list-item--element-grow">
1316
- <span class="sd-list-item__slugline">Lipsum Slug lipsum</span><span class="sd-list-item__text-label">agenda:</span><span class="sd-overflow-ellipsis sd-list-item__text-strong sd-list-item__element-rm-10">Politics agenda</span><span>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.</span>
1317
- </span>
1318
- <time title="March 22, 2017 11:08 AM">13:00–14:00, 15.09.2017</time>
1319
- </div>
1320
- </div>
1321
- <div class="sd-list-item__action-menu">
1322
- <button class="icn-btn">
1323
- <i class="icon-dots-vertical"></i>
1324
- </button>
1325
- </div>
1326
- </div>
1327
- </div>
1328
- <!-- END nested items -->
1329
- </div>
1330
- <!-- END Nested list item 3 -->
1331
- </div>
1332
- <!-- end sd-list-item-group -->
1333
- </div>
1334
- <div class="docs-page__code-markup">
1335
- <pre class="prettyprint lang-html linenums">
1336
- <!-- Default group (shadow class goes in the group div) -->
1337
-
1338
- </pre>
1339
- </div>
1340
- </div>
1341
- </div>
1342
- </section>