superdesk-ui-framework 4.0.51 → 4.0.53

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 (371) hide show
  1. package/app/styles/_avatar.scss +0 -5
  2. package/dist/examples.bundle.js +1 -1
  3. package/dist/superdesk-ui.bundle.css +1 -4
  4. package/package.json +1 -1
  5. package/dist/playgrounds/accessible-theme-test.html +0 -813
  6. package/dist/playgrounds/boxed-list.html +0 -164
  7. package/dist/playgrounds/cards.html +0 -244
  8. package/dist/playgrounds/circular-progress.html +0 -48
  9. package/dist/playgrounds/dummy-data/items.ts +0 -95
  10. package/dist/playgrounds/editor-3-test.html +0 -15
  11. package/dist/playgrounds/form-layout.html +0 -285
  12. package/dist/playgrounds/layout-grid.html +0 -79
  13. package/dist/playgrounds/layout-snippets/edit-article.html +0 -415
  14. package/dist/playgrounds/layout-test-2.html +0 -795
  15. package/dist/playgrounds/list-item-test.html +0 -896
  16. package/dist/playgrounds/main.html +0 -16
  17. package/dist/playgrounds/master-desk.html +0 -1678
  18. package/dist/playgrounds/media-carousel.html +0 -1166
  19. package/dist/playgrounds/nav-buttons.html +0 -65
  20. package/dist/playgrounds/photo-desk.html +0 -1515
  21. package/dist/playgrounds/photo-snippets/edit-photo-metadata.html +0 -208
  22. package/dist/playgrounds/planning-snippets/edit-event.html +0 -187
  23. package/dist/playgrounds/planning-snippets/edit-planning.html +0 -457
  24. package/dist/playgrounds/planning.html +0 -1112
  25. package/dist/playgrounds/publish-snippets/edit-article.html +0 -37
  26. package/dist/playgrounds/publish.html +0 -1007
  27. package/dist/playgrounds/publisher-content-analytics.html +0 -376
  28. package/dist/playgrounds/publisher-content-list-automatic.html +0 -296
  29. package/dist/playgrounds/publisher-content-list-manual.html +0 -611
  30. package/dist/playgrounds/publisher-content-lists.html +0 -255
  31. package/dist/playgrounds/publisher-dashboard.html +0 -323
  32. package/dist/playgrounds/publisher-output-control.html +0 -3659
  33. package/dist/playgrounds/publisher-website-settings-general.html +0 -188
  34. package/dist/playgrounds/publisher-website-settings.html +0 -265
  35. package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +0 -952
  36. package/dist/playgrounds/react-playgrounds/EditorTest.tsx +0 -649
  37. package/dist/playgrounds/react-playgrounds/FirstPlayground.tsx +0 -236
  38. package/dist/playgrounds/react-playgrounds/Index.tsx +0 -11
  39. package/dist/playgrounds/react-playgrounds/Multiedit.tsx +0 -401
  40. package/dist/playgrounds/react-playgrounds/PageLayoutTest.tsx +0 -210
  41. package/dist/playgrounds/react-playgrounds/PersonalProfile.tsx +0 -835
  42. package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +0 -580
  43. package/dist/playgrounds/react-playgrounds/Rundowns.tsx +0 -1415
  44. package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +0 -401
  45. package/dist/playgrounds/react-playgrounds/TestGround.tsx +0 -2710
  46. package/dist/playgrounds/react-playgrounds/UiPlayground.tsx +0 -410
  47. package/dist/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +0 -25
  48. package/dist/playgrounds/react-playgrounds/components/AuthoringContent.tsx +0 -86
  49. package/dist/playgrounds/react-playgrounds/components/ContentSplitter.tsx +0 -19
  50. package/dist/playgrounds/react-playgrounds/components/GraphicButton.tsx +0 -34
  51. package/dist/playgrounds/react-playgrounds/components/GraphicButtonsGroup.tsx +0 -11
  52. package/dist/playgrounds/react-playgrounds/components/HeaderPanel.tsx +0 -11
  53. package/dist/playgrounds/react-playgrounds/components/Index.tsx +0 -20
  54. package/dist/playgrounds/react-playgrounds/components/Layout.tsx +0 -27
  55. package/dist/playgrounds/react-playgrounds/components/LayoutContainer.tsx +0 -15
  56. package/dist/playgrounds/react-playgrounds/components/LeftPanel.tsx +0 -15
  57. package/dist/playgrounds/react-playgrounds/components/MainPanel.tsx +0 -24
  58. package/dist/playgrounds/react-playgrounds/components/OverlayPanel.tsx +0 -17
  59. package/dist/playgrounds/react-playgrounds/components/Panel.tsx +0 -23
  60. package/dist/playgrounds/react-playgrounds/components/PanelContent.tsx +0 -11
  61. package/dist/playgrounds/react-playgrounds/components/PanelContentBlock.tsx +0 -19
  62. package/dist/playgrounds/react-playgrounds/components/PanelFooter.tsx +0 -17
  63. package/dist/playgrounds/react-playgrounds/components/PanelHeader.tsx +0 -31
  64. package/dist/playgrounds/react-playgrounds/components/RightPanel.tsx +0 -16
  65. package/dist/playgrounds/react-playgrounds/components/SearchBar.tsx +0 -87
  66. package/dist/playgrounds/react-playgrounds/components/SidebarMenu.tsx +0 -76
  67. package/dist/playgrounds/react-playgrounds/components/SubNav.tsx +0 -17
  68. package/dist/playgrounds/react-playgrounds/components/ThemeDropdown.tsx +0 -57
  69. package/dist/playgrounds/react-playgrounds/tsconfig.json +0 -4
  70. package/dist/playgrounds/settings.html +0 -92
  71. package/dist/playgrounds/side-navigation.html +0 -201
  72. package/dist/playgrounds/swimlane-view.html +0 -1975
  73. package/dist/playgrounds/tags-input.html +0 -55
  74. package/dist/playgrounds/toasts.html +0 -113
  75. package/dist/playgrounds/video-editor.html +0 -706
  76. package/examples/css/docs-page.css +0 -1135
  77. package/examples/css/reset.css +0 -124
  78. package/examples/css/vendor.css +0 -175
  79. package/examples/illustration-small--components.svg +0 -45
  80. package/examples/img/andrew-power-y9L5-wmifaY-unsplash.jpg +0 -0
  81. package/examples/img/andrew-power-y9L5-wmifaY-unsplash.license.txt +0 -6
  82. package/examples/img/avatar-2.jpg +0 -0
  83. package/examples/img/avatar-3.jpg +0 -0
  84. package/examples/img/avatar-4.jpg +0 -0
  85. package/examples/img/avatar-5.jpg +0 -0
  86. package/examples/img/avatar-6.jpg +0 -0
  87. package/examples/img/avatar.jpg +0 -0
  88. package/examples/img/bill.jpg +0 -0
  89. package/examples/img/bush_1.jpg +0 -0
  90. package/examples/img/bush_2.jpg +0 -0
  91. package/examples/img/carousel-thumb--01.jpg +0 -0
  92. package/examples/img/carousel-thumb--02.jpg +0 -0
  93. package/examples/img/carousel-thumb--03.jpg +0 -0
  94. package/examples/img/carousel-thumb--04.jpg +0 -0
  95. package/examples/img/components_ilustration.svg +0 -1
  96. package/examples/img/d_trump.jpg +0 -0
  97. package/examples/img/d_trump_2.jpg +0 -0
  98. package/examples/img/d_trump_large.jpg +0 -0
  99. package/examples/img/design_ilustration.svg +0 -1
  100. package/examples/img/ferocious_beast.webm +0 -0
  101. package/examples/img/guidelines/application-frame.png +0 -0
  102. package/examples/img/guidelines/application-frame__bottom-bar.png +0 -0
  103. package/examples/img/guidelines/application-frame__left-panel.gif +0 -0
  104. package/examples/img/guidelines/application-frame__left-panel.png +0 -0
  105. package/examples/img/guidelines/application-frame__main-content.gif +0 -0
  106. package/examples/img/guidelines/application-frame__main-content.png +0 -0
  107. package/examples/img/guidelines/application-frame__right-panel.gif +0 -0
  108. package/examples/img/guidelines/application-frame__right-panel.png +0 -0
  109. package/examples/img/guidelines/application-frame__side-tabs.png +0 -0
  110. package/examples/img/guidelines/application-frame__sub-nav.png +0 -0
  111. package/examples/img/guidelines/application-frame__top-bar.png +0 -0
  112. package/examples/img/guidelines/buttons--00-01.png +0 -0
  113. package/examples/img/guidelines/buttons--00-02.png +0 -0
  114. package/examples/img/guidelines/buttons--DO-02.png +0 -0
  115. package/examples/img/guidelines/buttons--DONT-01.png +0 -0
  116. package/examples/img/guidelines/checkbox--DO-01.png +0 -0
  117. package/examples/img/guidelines/checkbox--DO-02.png +0 -0
  118. package/examples/img/guidelines/checkbox--DONT-01.png +0 -0
  119. package/examples/img/guidelines/checkbox--DONT-02.png +0 -0
  120. package/examples/img/guidelines/example__bottom-bar--01.png +0 -0
  121. package/examples/img/guidelines/example__left-side_panel--01.png +0 -0
  122. package/examples/img/guidelines/example__left_side-bar--01.png +0 -0
  123. package/examples/img/guidelines/example__main-content--01.png +0 -0
  124. package/examples/img/guidelines/example__right_side-panel--01.png +0 -0
  125. package/examples/img/guidelines/example__right_side-panel--02.png +0 -0
  126. package/examples/img/guidelines/example__right_side-panel--03.png +0 -0
  127. package/examples/img/guidelines/example__sub-nav--01.png +0 -0
  128. package/examples/img/guidelines/example__sub-nav--02.png +0 -0
  129. package/examples/img/guidelines/example__sub-nav--03.png +0 -0
  130. package/examples/img/guidelines/example__top-bar--01.png +0 -0
  131. package/examples/img/guidelines/layout--grid-01.png +0 -0
  132. package/examples/img/guidelines/layout--size-example-01.png +0 -0
  133. package/examples/img/guidelines/radio--DO-01.png +0 -0
  134. package/examples/img/guidelines/radio--DONT-01.png +0 -0
  135. package/examples/img/guidelines/radio--DONT-02.png +0 -0
  136. package/examples/img/guidelines/radio--DONT-03.png +0 -0
  137. package/examples/img/guidelines/switch--DO-01.png +0 -0
  138. package/examples/img/guidelines/switch--DO-02.png +0 -0
  139. package/examples/img/guidelines/switch--DONT-01.png +0 -0
  140. package/examples/img/guidelines/switch--DONT-02.png +0 -0
  141. package/examples/img/hillary.jpg +0 -0
  142. package/examples/img/illustration--components.svg +0 -1
  143. package/examples/img/illustration--design.svg +0 -1
  144. package/examples/img/illustration--playground.svg +0 -1
  145. package/examples/img/illustration--react.svg +0 -1
  146. package/examples/img/illustration-small--components.svg +0 -45
  147. package/examples/img/illustration-small--design.svg +0 -99
  148. package/examples/img/illustration-small--playground.svg +0 -49
  149. package/examples/img/illustration-small--react.svg +0 -53
  150. package/examples/img/illustration_user-privileges.png +0 -0
  151. package/examples/img/illustration_users.png +0 -0
  152. package/examples/img/image_01.jpg +0 -0
  153. package/examples/img/image_02.jpg +0 -0
  154. package/examples/img/masthead-image.png +0 -0
  155. package/examples/img/obama_1.jpg +0 -0
  156. package/examples/img/obama_2.jpg +0 -0
  157. package/examples/img/overlay-img.jpg +0 -0
  158. package/examples/img/react-logo--vector.svg +0 -49
  159. package/examples/img/sd-ui-framework__logo-01.svg +0 -33
  160. package/examples/img/sd-ui-framework__logo.svg +0 -20
  161. package/examples/img/th01.jpg +0 -0
  162. package/examples/img/th02.jpg +0 -0
  163. package/examples/img/th03.jpg +0 -0
  164. package/examples/index.html +0 -11
  165. package/examples/index.js +0 -468
  166. package/examples/js/doc.js +0 -230
  167. package/examples/js/react.js +0 -263
  168. package/examples/pages/components/Alerts.tsx +0 -291
  169. package/examples/pages/components/Autocomplete.tsx +0 -434
  170. package/examples/pages/components/Avatar.tsx +0 -659
  171. package/examples/pages/components/Badges.tsx +0 -221
  172. package/examples/pages/components/BigIconFont.tsx +0 -48
  173. package/examples/pages/components/BoxedList.tsx +0 -517
  174. package/examples/pages/components/ButtonGroups.tsx +0 -366
  175. package/examples/pages/components/Buttons.tsx +0 -565
  176. package/examples/pages/components/Card.tsx +0 -23
  177. package/examples/pages/components/Carousel.tsx +0 -235
  178. package/examples/pages/components/Checkboxs.tsx +0 -817
  179. package/examples/pages/components/Container.tsx +0 -190
  180. package/examples/pages/components/ContentDivider.tsx +0 -229
  181. package/examples/pages/components/ContentList.tsx +0 -786
  182. package/examples/pages/components/CreateButton.tsx +0 -121
  183. package/examples/pages/components/DatePicker.tsx +0 -245
  184. package/examples/pages/components/DateTimePicker.tsx +0 -141
  185. package/examples/pages/components/DragHandleDocs.tsx +0 -122
  186. package/examples/pages/components/DropZone.tsx +0 -149
  187. package/examples/pages/components/Dropdowns.tsx +0 -587
  188. package/examples/pages/components/DurationInput.tsx +0 -157
  189. package/examples/pages/components/EmptyStates.tsx +0 -171
  190. package/examples/pages/components/GridItem.tsx +0 -507
  191. package/examples/pages/components/GridList.tsx +0 -126
  192. package/examples/pages/components/Heading.tsx +0 -152
  193. package/examples/pages/components/IconButtons.tsx +0 -191
  194. package/examples/pages/components/IconFont.tsx +0 -49
  195. package/examples/pages/components/IconLabels.tsx +0 -199
  196. package/examples/pages/components/IconPicker.tsx +0 -82
  197. package/examples/pages/components/IllustrationButton.tsx +0 -109
  198. package/examples/pages/components/Index.tsx +0 -563
  199. package/examples/pages/components/Inputs.tsx +0 -313
  200. package/examples/pages/components/Labels.tsx +0 -354
  201. package/examples/pages/components/LeftNavigations.tsx +0 -459
  202. package/examples/pages/components/ListItems.tsx +0 -33
  203. package/examples/pages/components/Loader.tsx +0 -25
  204. package/examples/pages/components/Menu.tsx +0 -181
  205. package/examples/pages/components/Modal.tsx +0 -557
  206. package/examples/pages/components/MultiSelect.tsx +0 -343
  207. package/examples/pages/components/NavButtons.tsx +0 -159
  208. package/examples/pages/components/Panel.tsx +0 -631
  209. package/examples/pages/components/Popover.tsx +0 -90
  210. package/examples/pages/components/QuickNavigationBar.tsx +0 -278
  211. package/examples/pages/components/RadioGroup.tsx +0 -612
  212. package/examples/pages/components/ResizablePanels.tsx +0 -43
  213. package/examples/pages/components/SelectGrid.tsx +0 -162
  214. package/examples/pages/components/SelectWithTemplate.tsx +0 -144
  215. package/examples/pages/components/Selects.tsx +0 -175
  216. package/examples/pages/components/SimpleList.tsx +0 -198
  217. package/examples/pages/components/SubNav.tsx +0 -160
  218. package/examples/pages/components/Switch.tsx +0 -298
  219. package/examples/pages/components/TableList.tsx +0 -315
  220. package/examples/pages/components/Tabs.tsx +0 -276
  221. package/examples/pages/components/TagInputDocs.tsx +0 -130
  222. package/examples/pages/components/Tags.tsx +0 -154
  223. package/examples/pages/components/Text.tsx +0 -184
  224. package/examples/pages/components/TimePicker.tsx +0 -179
  225. package/examples/pages/components/Toasts.tsx +0 -283
  226. package/examples/pages/components/Togglebox.tsx +0 -307
  227. package/examples/pages/components/Tooltips.tsx +0 -74
  228. package/examples/pages/components/TreeMenu.tsx +0 -315
  229. package/examples/pages/components/TreeSelect.tsx +0 -625
  230. package/examples/pages/components/WithPaginationDocs.tsx +0 -56
  231. package/examples/pages/components/WithSizeObserver.tsx +0 -44
  232. package/examples/pages/components/tree-select/TreeSelect.tsx +0 -322
  233. package/examples/pages/components/tree-select/example-1.tsx +0 -67
  234. package/examples/pages/components/tree-select/example-2.tsx +0 -56
  235. package/examples/pages/components/utilities/BorderRadiusUtilities.tsx +0 -71
  236. package/examples/pages/components/utilities/BorderUtilities.tsx +0 -169
  237. package/examples/pages/components/utilities/DisplayUtilities.tsx +0 -115
  238. package/examples/pages/components/utilities/FlexAndGridUtilities.tsx +0 -551
  239. package/examples/pages/components/utilities/ObjectFitUtilities.tsx +0 -51
  240. package/examples/pages/components/utilities/ObjectPositionUtilities.tsx +0 -67
  241. package/examples/pages/components/utilities/OpacityUtilities.tsx +0 -61
  242. package/examples/pages/components/utilities/OverflowUtilities.tsx +0 -92
  243. package/examples/pages/components/utilities/PositionUtilities.tsx +0 -51
  244. package/examples/pages/components/utilities/ShadowUtilities.tsx +0 -122
  245. package/examples/pages/components/utilities/SpacingUtilities.tsx +0 -1079
  246. package/examples/pages/components/utilities/TextUtilities.tsx +0 -560
  247. package/examples/pages/components.html +0 -15
  248. package/examples/pages/components_deprecated/alerts.html +0 -113
  249. package/examples/pages/components_deprecated/badge.html +0 -79
  250. package/examples/pages/components_deprecated/basic-grid.html +0 -132
  251. package/examples/pages/components_deprecated/big-icons.html +0 -65
  252. package/examples/pages/components_deprecated/buttons.html +0 -631
  253. package/examples/pages/components_deprecated/carousel.html +0 -77
  254. package/examples/pages/components_deprecated/checkbox.html +0 -86
  255. package/examples/pages/components_deprecated/colors.html +0 -12
  256. package/examples/pages/components_deprecated/dropdown.html +0 -542
  257. package/examples/pages/components_deprecated/form-layout.html +0 -187
  258. package/examples/pages/components_deprecated/icon-labels.html +0 -34
  259. package/examples/pages/components_deprecated/icons.html +0 -194
  260. package/examples/pages/components_deprecated/input.html +0 -233
  261. package/examples/pages/components_deprecated/labels.html +0 -170
  262. package/examples/pages/components_deprecated/layout-grid.html +0 -227
  263. package/examples/pages/components_deprecated/left-nav.html +0 -83
  264. package/examples/pages/components_deprecated/list-item.html +0 -1342
  265. package/examples/pages/components_deprecated/loader.html +0 -64
  266. package/examples/pages/components_deprecated/modal-template.html +0 -13
  267. package/examples/pages/components_deprecated/modals.html +0 -561
  268. package/examples/pages/components_deprecated/other-elements.html +0 -54
  269. package/examples/pages/components_deprecated/panel-info.html +0 -34
  270. package/examples/pages/components_deprecated/radio.html +0 -64
  271. package/examples/pages/components_deprecated/select.html +0 -160
  272. package/examples/pages/components_deprecated/shadows.html +0 -24
  273. package/examples/pages/components_deprecated/sidebar-menu.html +0 -111
  274. package/examples/pages/components_deprecated/simple-list.html +0 -113
  275. package/examples/pages/components_deprecated/slider.html +0 -31
  276. package/examples/pages/components_deprecated/spacing.html +0 -117
  277. package/examples/pages/components_deprecated/switch.html +0 -31
  278. package/examples/pages/components_deprecated/tables.html +0 -58
  279. package/examples/pages/components_deprecated/tabs.html +0 -257
  280. package/examples/pages/components_deprecated/tag-input.html +0 -123
  281. package/examples/pages/components_deprecated/tag-labels.html +0 -57
  282. package/examples/pages/components_deprecated/text.html +0 -55
  283. package/examples/pages/components_deprecated/toggle.html +0 -63
  284. package/examples/pages/components_deprecated/tooltips.html +0 -29
  285. package/examples/pages/components_deprecated/vertical-tabs.html +0 -48
  286. package/examples/pages/components_deprecated/wizard.html +0 -41
  287. package/examples/pages/components_deprecated.html +0 -39
  288. package/examples/pages/design/application-structure.html +0 -168
  289. package/examples/pages/design/buttons.html +0 -34
  290. package/examples/pages/design/checkbox-and-radio.html +0 -64
  291. package/examples/pages/design/layout-principles.html +0 -45
  292. package/examples/pages/design/modules.html +0 -22
  293. package/examples/pages/design/pages.html +0 -22
  294. package/examples/pages/design/switch.html +0 -55
  295. package/examples/pages/design-patterns/Index.tsx +0 -42
  296. package/examples/pages/design-patterns/ThreePaneLayoutPattern.tsx +0 -378
  297. package/examples/pages/design-patterns.html +0 -14
  298. package/examples/pages/design.html +0 -39
  299. package/examples/pages/main.html +0 -76
  300. package/examples/pages/playgrounds/accessible-theme-test.html +0 -813
  301. package/examples/pages/playgrounds/boxed-list.html +0 -164
  302. package/examples/pages/playgrounds/cards.html +0 -244
  303. package/examples/pages/playgrounds/circular-progress.html +0 -48
  304. package/examples/pages/playgrounds/dummy-data/items.ts +0 -95
  305. package/examples/pages/playgrounds/editor-3-test.html +0 -15
  306. package/examples/pages/playgrounds/form-layout.html +0 -285
  307. package/examples/pages/playgrounds/layout-grid.html +0 -79
  308. package/examples/pages/playgrounds/layout-snippets/edit-article.html +0 -415
  309. package/examples/pages/playgrounds/layout-test-2.html +0 -795
  310. package/examples/pages/playgrounds/list-item-test.html +0 -896
  311. package/examples/pages/playgrounds/main.html +0 -16
  312. package/examples/pages/playgrounds/master-desk.html +0 -1678
  313. package/examples/pages/playgrounds/media-carousel.html +0 -1166
  314. package/examples/pages/playgrounds/nav-buttons.html +0 -65
  315. package/examples/pages/playgrounds/photo-desk.html +0 -1515
  316. package/examples/pages/playgrounds/photo-snippets/edit-photo-metadata.html +0 -208
  317. package/examples/pages/playgrounds/planning-snippets/edit-event.html +0 -187
  318. package/examples/pages/playgrounds/planning-snippets/edit-planning.html +0 -457
  319. package/examples/pages/playgrounds/planning.html +0 -1112
  320. package/examples/pages/playgrounds/publish-snippets/edit-article.html +0 -37
  321. package/examples/pages/playgrounds/publish.html +0 -1007
  322. package/examples/pages/playgrounds/publisher-content-analytics.html +0 -376
  323. package/examples/pages/playgrounds/publisher-content-list-automatic.html +0 -296
  324. package/examples/pages/playgrounds/publisher-content-list-manual.html +0 -611
  325. package/examples/pages/playgrounds/publisher-content-lists.html +0 -255
  326. package/examples/pages/playgrounds/publisher-dashboard.html +0 -323
  327. package/examples/pages/playgrounds/publisher-output-control.html +0 -3659
  328. package/examples/pages/playgrounds/publisher-website-settings-general.html +0 -188
  329. package/examples/pages/playgrounds/publisher-website-settings.html +0 -265
  330. package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +0 -952
  331. package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx +0 -649
  332. package/examples/pages/playgrounds/react-playgrounds/FirstPlayground.tsx +0 -236
  333. package/examples/pages/playgrounds/react-playgrounds/Index.tsx +0 -11
  334. package/examples/pages/playgrounds/react-playgrounds/Multiedit.tsx +0 -401
  335. package/examples/pages/playgrounds/react-playgrounds/PageLayoutTest.tsx +0 -210
  336. package/examples/pages/playgrounds/react-playgrounds/PersonalProfile.tsx +0 -835
  337. package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +0 -580
  338. package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +0 -1415
  339. package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +0 -401
  340. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +0 -2710
  341. package/examples/pages/playgrounds/react-playgrounds/UiPlayground.tsx +0 -410
  342. package/examples/pages/playgrounds/react-playgrounds/components/AuthoringContainer.tsx +0 -25
  343. package/examples/pages/playgrounds/react-playgrounds/components/AuthoringContent.tsx +0 -86
  344. package/examples/pages/playgrounds/react-playgrounds/components/ContentSplitter.tsx +0 -19
  345. package/examples/pages/playgrounds/react-playgrounds/components/GraphicButton.tsx +0 -34
  346. package/examples/pages/playgrounds/react-playgrounds/components/GraphicButtonsGroup.tsx +0 -11
  347. package/examples/pages/playgrounds/react-playgrounds/components/HeaderPanel.tsx +0 -11
  348. package/examples/pages/playgrounds/react-playgrounds/components/Index.tsx +0 -20
  349. package/examples/pages/playgrounds/react-playgrounds/components/Layout.tsx +0 -27
  350. package/examples/pages/playgrounds/react-playgrounds/components/LayoutContainer.tsx +0 -15
  351. package/examples/pages/playgrounds/react-playgrounds/components/LeftPanel.tsx +0 -15
  352. package/examples/pages/playgrounds/react-playgrounds/components/MainPanel.tsx +0 -24
  353. package/examples/pages/playgrounds/react-playgrounds/components/OverlayPanel.tsx +0 -17
  354. package/examples/pages/playgrounds/react-playgrounds/components/Panel.tsx +0 -23
  355. package/examples/pages/playgrounds/react-playgrounds/components/PanelContent.tsx +0 -11
  356. package/examples/pages/playgrounds/react-playgrounds/components/PanelContentBlock.tsx +0 -19
  357. package/examples/pages/playgrounds/react-playgrounds/components/PanelFooter.tsx +0 -17
  358. package/examples/pages/playgrounds/react-playgrounds/components/PanelHeader.tsx +0 -31
  359. package/examples/pages/playgrounds/react-playgrounds/components/RightPanel.tsx +0 -16
  360. package/examples/pages/playgrounds/react-playgrounds/components/SearchBar.tsx +0 -87
  361. package/examples/pages/playgrounds/react-playgrounds/components/SidebarMenu.tsx +0 -76
  362. package/examples/pages/playgrounds/react-playgrounds/components/SubNav.tsx +0 -17
  363. package/examples/pages/playgrounds/react-playgrounds/components/ThemeDropdown.tsx +0 -57
  364. package/examples/pages/playgrounds/react-playgrounds/tsconfig.json +0 -4
  365. package/examples/pages/playgrounds/settings.html +0 -92
  366. package/examples/pages/playgrounds/side-navigation.html +0 -201
  367. package/examples/pages/playgrounds/swimlane-view.html +0 -1975
  368. package/examples/pages/playgrounds/tags-input.html +0 -55
  369. package/examples/pages/playgrounds/toasts.html +0 -113
  370. package/examples/pages/playgrounds/video-editor.html +0 -706
  371. 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>