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