@milestone-sys/web-design-system 3.6.2 → 3.6.3

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 (1102) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +7 -7
  3. package/assets.html +13 -0
  4. package/colors.list.js +65 -65
  5. package/components/detail/accordion-checkbox-large.html +1051 -0
  6. package/components/detail/accordion-checkbox-medium-dark.html +1051 -0
  7. package/components/detail/accordion-checkbox-medium-disabled.html +1051 -0
  8. package/components/detail/accordion-checkbox-medium-filtered-list-items.html +1055 -0
  9. package/components/detail/accordion-checkbox-medium-icon-left-floating-dark-yellow.html +1077 -0
  10. package/components/detail/accordion-checkbox-medium-icon-left-floating.html +1077 -0
  11. package/components/detail/accordion-checkbox-medium-icon-left.html +1065 -0
  12. package/components/detail/accordion-checkbox-medium.html +1060 -0
  13. package/components/detail/accordion-checkbox-overview.html +1051 -0
  14. package/components/detail/accordion-input.html +949 -0
  15. package/components/detail/accordion-label.html +949 -0
  16. package/components/detail/accordion-modifier-icon-floating.html +949 -0
  17. package/components/detail/accordion-modifier-icon-left.html +949 -0
  18. package/components/detail/accordion-radio.html +1053 -0
  19. package/components/detail/alert-dark-theme-default.html +1009 -0
  20. package/components/detail/alert-dark-theme-solution.html +1009 -0
  21. package/components/detail/alert-default-extra-attention.html +1007 -0
  22. package/components/detail/alert-default-generic.html +1006 -0
  23. package/components/detail/alert-default-solution-with-badge-and-ready-state.html +1018 -0
  24. package/components/detail/alert-default-solution.html +1010 -0
  25. package/components/detail/alert-default-without-image.html +1004 -0
  26. package/components/detail/alert-default.html +1006 -0
  27. package/components/detail/alert-hidden-after-refresh-checkbox.html +1016 -0
  28. package/components/detail/alert-hidden-after-refresh.html +1005 -0
  29. package/components/detail/alert-layouts.html +1560 -0
  30. package/components/detail/alert-visible-after-refresh.html +1005 -0
  31. package/components/detail/background-colors.html +1287 -0
  32. package/components/detail/basic-card-default-dark.html +1014 -0
  33. package/components/detail/basic-card-default-without-caption-with-header-icon.html +1005 -0
  34. package/components/detail/basic-card-default-without-caption-with-header-image.html +1001 -0
  35. package/components/detail/basic-card-default-without-caption.html +997 -0
  36. package/components/detail/basic-card-default.html +1014 -0
  37. package/components/detail/basic-card-grouping-center.html +1014 -0
  38. package/components/detail/basic-card-grouping-left-with-flat-icon.html +1024 -0
  39. package/components/detail/basic-card-grouping-left.html +1014 -0
  40. package/components/detail/basic-card-grouping.html +1122 -0
  41. package/components/detail/basic-card-layouts.html +1886 -0
  42. package/components/detail/button-danger-dark-icon.html +999 -0
  43. package/components/detail/button-danger-dark.html +975 -0
  44. package/components/detail/button-danger-default.html +975 -0
  45. package/components/detail/button-danger-icon.html +999 -0
  46. package/components/detail/button-disabled-dark-icon.html +999 -0
  47. package/components/detail/button-disabled-dark.html +975 -0
  48. package/components/detail/button-floating-aligned-column.html +1005 -0
  49. package/components/detail/button-floating-aligned-right.html +1005 -0
  50. package/components/detail/button-floating-dark-aligned-column.html +1005 -0
  51. package/components/detail/button-floating-dark-aligned-right.html +1005 -0
  52. package/components/detail/button-floating-dark-default.html +1005 -0
  53. package/components/detail/button-floating-dark-disabled.html +1005 -0
  54. package/components/detail/button-floating-dark-secondary-aligned-column.html +1005 -0
  55. package/components/detail/button-floating-dark-secondary-aligned-right.html +1005 -0
  56. package/components/detail/button-floating-dark-secondary.html +1005 -0
  57. package/components/detail/button-floating-default.html +1005 -0
  58. package/components/detail/button-floating-disabled.html +1005 -0
  59. package/components/detail/button-floating-overview.html +969 -0
  60. package/components/detail/button-floating-positioning.html +1007 -0
  61. package/components/detail/button-floating-secondary-aligned-column.html +1005 -0
  62. package/components/detail/button-floating-secondary-aligned-right.html +1005 -0
  63. package/components/detail/button-floating-secondary.html +1005 -0
  64. package/components/detail/button-floating-states.html +987 -0
  65. package/components/detail/button-gray-default.html +975 -0
  66. package/components/detail/button-gray-icon.html +999 -0
  67. package/components/detail/button-group-center-alignment.html +965 -0
  68. package/components/detail/button-group-left-alignment.html +965 -0
  69. package/components/detail/button-group-right-alignment.html +965 -0
  70. package/components/detail/button-overview-direction.html +983 -0
  71. package/components/detail/button-overview-global-definition.html +975 -0
  72. package/components/detail/button-overview-sizes.html +987 -0
  73. package/components/detail/button-overview-states.html +1019 -0
  74. package/components/detail/button-primary-dark-icon.html +999 -0
  75. package/components/detail/button-primary-dark.html +975 -0
  76. package/components/detail/button-primary-default.html +975 -0
  77. package/components/detail/button-primary-icon.html +999 -0
  78. package/components/detail/button-secondary-dark-icon.html +999 -0
  79. package/components/detail/button-secondary-dark.html +975 -0
  80. package/components/detail/button-secondary-default.html +975 -0
  81. package/components/detail/button-secondary-icon.html +999 -0
  82. package/components/detail/button-tertiary-default.html +975 -0
  83. package/components/detail/button-tertiary-icon.html +999 -0
  84. package/components/detail/buttons-overview.html +2069 -0
  85. package/components/detail/category-dark.html +1022 -0
  86. package/components/detail/category-disabled-dark.html +1014 -0
  87. package/components/detail/category-disabled.html +1014 -0
  88. package/components/detail/category-full-row.html +1178 -0
  89. package/components/detail/category-overview-dark-states.html +1058 -0
  90. package/components/detail/category-overview-dark.html +1022 -0
  91. package/components/detail/category-overview-sizes.html +1030 -0
  92. package/components/detail/category-overview-states.html +1058 -0
  93. package/components/detail/category-small-dark.html +1022 -0
  94. package/components/detail/category-small-disabled-dark.html +1014 -0
  95. package/components/detail/category-small-disabled.html +1014 -0
  96. package/components/detail/category-small-full-row.html +1250 -0
  97. package/components/detail/category-small.html +1022 -0
  98. package/components/detail/category.html +1022 -0
  99. package/components/detail/checkbox-checked.html +968 -0
  100. package/components/detail/checkbox-disabled.html +968 -0
  101. package/components/detail/checkbox-focus.html +968 -0
  102. package/components/detail/checkbox-global-definition.html +968 -0
  103. package/components/detail/checkbox-hover.html +968 -0
  104. package/components/detail/checkbox-inline.html +974 -0
  105. package/components/detail/checkbox-readonly.html +969 -0
  106. package/components/detail/colors-and-shadows.html +1403 -0
  107. package/components/detail/contact-cards.html +2151 -0
  108. package/components/detail/contact-content.html +1017 -0
  109. package/components/detail/contact-overview.html +1147 -0
  110. package/components/detail/contact-sizes.html +1108 -0
  111. package/components/detail/contact-small.html +1038 -0
  112. package/components/detail/contact-without-image-small.html +1028 -0
  113. package/components/detail/contact-without-image.html +1028 -0
  114. package/components/detail/contact.html +1038 -0
  115. package/components/detail/divider-dark-blue.html +949 -0
  116. package/components/detail/divider-default.html +949 -0
  117. package/components/detail/divider-gray-5.html +949 -0
  118. package/components/detail/divider-white-50.html +949 -0
  119. package/components/detail/divider-white.html +949 -0
  120. package/components/detail/divider-yellow.html +949 -0
  121. package/components/detail/generic-card-aspect-16by9.html +1001 -0
  122. package/components/detail/generic-card-aspect-2by1-small.html +1116 -0
  123. package/components/detail/generic-card-aspect-2by1.html +1110 -0
  124. package/components/detail/generic-card-aspect.html +1050 -0
  125. package/components/detail/generic-card-default-small-dark-theme.html +1000 -0
  126. package/components/detail/generic-card-default-small-svg.html +1000 -0
  127. package/components/detail/generic-card-default-small.html +999 -0
  128. package/components/detail/generic-card-default-svg-dark.html +999 -0
  129. package/components/detail/generic-card-default-svg.html +998 -0
  130. package/components/detail/generic-card-default.html +999 -0
  131. package/components/detail/generic-card-media-dark-theme.html +1031 -0
  132. package/components/detail/generic-card-media-floating-icon.html +1042 -0
  133. package/components/detail/generic-card-media-small.html +1027 -0
  134. package/components/detail/generic-card-media.html +1027 -0
  135. package/components/detail/generic-card-overview.html +1062 -0
  136. package/components/detail/generic-flat-icons.html +951 -0
  137. package/components/detail/generic-rich-icons.html +951 -0
  138. package/components/detail/global-colors-alternative.html +1301 -0
  139. package/components/detail/global-colors-gradients.html +1305 -0
  140. package/components/detail/global-colors-gray-white-black.html +1304 -0
  141. package/components/detail/global-colors-primary.html +1295 -0
  142. package/components/detail/global-colors-shadows.html +1295 -0
  143. package/components/detail/global-colors-transparency.html +1306 -0
  144. package/components/detail/global-margins.html +995 -0
  145. package/components/detail/global-paddings.html +951 -0
  146. package/components/detail/gradient-background-colors.html +1517 -0
  147. package/components/detail/input-disabled.html +1003 -0
  148. package/components/detail/input-field.html +1226 -0
  149. package/components/detail/input-focus.html +1003 -0
  150. package/components/detail/input-hover.html +1003 -0
  151. package/components/detail/input-readonly.html +1003 -0
  152. package/components/detail/input-sizes.html +1007 -0
  153. package/components/detail/input-state-error.html +1003 -0
  154. package/components/detail/input-state-success.html +1003 -0
  155. package/components/detail/input.html +981 -0
  156. package/components/detail/large-section-spacing-definitions.html +1011 -0
  157. package/components/detail/large-section-spacing.html +977 -0
  158. package/components/detail/links.html +977 -0
  159. package/components/detail/lists.html +973 -0
  160. package/components/detail/marketplace-flat-icons.html +951 -0
  161. package/components/detail/marketplace-rich-icons.html +951 -0
  162. package/components/detail/matching-content-height-card.html +1599 -0
  163. package/components/detail/medium-section-spacing-definitions.html +1011 -0
  164. package/components/detail/medium-section-spacing.html +977 -0
  165. package/components/detail/modal-on-click.html +1017 -0
  166. package/components/detail/modal-on-load-demo.html +1012 -0
  167. package/components/detail/modal-on-load.html +1012 -0
  168. package/components/detail/msds-text-alt-blue-1.html +1287 -0
  169. package/components/detail/msds-text-alt-blue-2.html +1287 -0
  170. package/components/detail/msds-text-alt-blue-3.html +1287 -0
  171. package/components/detail/msds-text-alt-yellow-1.html +1287 -0
  172. package/components/detail/msds-text-alt-yellow-2.html +1287 -0
  173. package/components/detail/msds-text-black.html +1287 -0
  174. package/components/detail/msds-text-clear-blue.html +1287 -0
  175. package/components/detail/msds-text-confirm-green.html +1287 -0
  176. package/components/detail/msds-text-danger-red-1.html +1287 -0
  177. package/components/detail/msds-text-danger-red-2.html +1287 -0
  178. package/components/detail/msds-text-dark-blue.html +1287 -0
  179. package/components/detail/msds-text-gray-1.html +1287 -0
  180. package/components/detail/msds-text-gray-10.html +1287 -0
  181. package/components/detail/msds-text-gray-2.html +1287 -0
  182. package/components/detail/msds-text-gray-3.html +1287 -0
  183. package/components/detail/msds-text-gray-4.html +1287 -0
  184. package/components/detail/msds-text-gray-5.html +1287 -0
  185. package/components/detail/msds-text-gray-6.html +1287 -0
  186. package/components/detail/msds-text-gray-7.html +1287 -0
  187. package/components/detail/msds-text-gray-8.html +1287 -0
  188. package/components/detail/msds-text-gray-9.html +1287 -0
  189. package/components/detail/msds-text-sand.html +1287 -0
  190. package/components/detail/msds-text-white.html +1287 -0
  191. package/components/detail/msds-text-yellow.html +1287 -0
  192. package/components/detail/popover-bottom.html +1018 -0
  193. package/components/detail/popover-global-definition.html +1018 -0
  194. package/components/detail/popover-left.html +1018 -0
  195. package/components/detail/popover-top.html +1018 -0
  196. package/components/detail/preview-dark.html +1014 -0
  197. package/components/detail/preview.html +1001 -0
  198. package/components/detail/progress-bar-dark-theme.html +997 -0
  199. package/components/detail/progress-bar-features.html +1023 -0
  200. package/components/detail/progress-bar-global-definition.html +973 -0
  201. package/components/detail/progress-bar-light-theme.html +997 -0
  202. package/components/detail/progress-bar-sizes.html +999 -0
  203. package/components/detail/radio-button-disabled.html +963 -0
  204. package/components/detail/radio-button-focus.html +963 -0
  205. package/components/detail/radio-button-global-definition.html +975 -0
  206. package/components/detail/radio-button-hover.html +963 -0
  207. package/components/detail/radio-button-readonly.html +964 -0
  208. package/components/detail/radio-button-selected.html +963 -0
  209. package/components/detail/section-checkbox-dark.html +1019 -0
  210. package/components/detail/section-checkbox-nested-accordion.html +1124 -0
  211. package/components/detail/section-checkbox.html +1083 -0
  212. package/components/detail/section-radio-dark.html +1083 -0
  213. package/components/detail/section-radio-nested-accordion.html +1135 -0
  214. package/components/detail/section-radio.html +1081 -0
  215. package/components/detail/select-input-default.html +973 -0
  216. package/components/detail/select-input-error.html +971 -0
  217. package/components/detail/select-input-global-definition.html +983 -0
  218. package/components/detail/select-input-not-required.html +973 -0
  219. package/components/detail/select-input-required.html +973 -0
  220. package/components/detail/select-input-small.html +969 -0
  221. package/components/detail/small-section-spacing-definitions.html +1017 -0
  222. package/components/detail/small-section-spacing.html +977 -0
  223. package/components/detail/solid-background-colors.html +1457 -0
  224. package/components/detail/solution-card-default-layout.html +1210 -0
  225. package/components/detail/solution-card-default.html +1040 -0
  226. package/components/detail/solution-card-layouts.html +2085 -0
  227. package/components/detail/solution-card-optional-certification-badges.html +1054 -0
  228. package/components/detail/solution-card-optional-solution-badges.html +1054 -0
  229. package/components/detail/solution-card-sizes.html +1125 -0
  230. package/components/detail/solution-card-small.html +1040 -0
  231. package/components/detail/switch-checked.html +973 -0
  232. package/components/detail/switch-default.html +973 -0
  233. package/components/detail/switch-disabled-readonly.html +973 -0
  234. package/components/detail/switch-disabled.html +973 -0
  235. package/components/detail/switch-global.html +983 -0
  236. package/components/detail/tab-tile.html +2409 -0
  237. package/components/detail/table-dark-theme-default-expandable-rows.html +1204 -0
  238. package/components/detail/table-dark-theme-default.html +1228 -0
  239. package/components/detail/table-default-dark.html +1179 -0
  240. package/components/detail/table-default-expandable-rows.html +1203 -0
  241. package/components/detail/table-default-medium.html +1179 -0
  242. package/components/detail/table-default-small.html +1179 -0
  243. package/components/detail/table-default.html +1227 -0
  244. package/components/detail/text-area-disabled.html +1011 -0
  245. package/components/detail/text-area-error.html +1011 -0
  246. package/components/detail/text-area-field.html +985 -0
  247. package/components/detail/text-area-focus.html +1011 -0
  248. package/components/detail/text-area-hover.html +1011 -0
  249. package/components/detail/text-area-readonly.html +1011 -0
  250. package/components/detail/text-area-sizes.html +1011 -0
  251. package/components/detail/text-area-success.html +1011 -0
  252. package/components/detail/text-area.html +1167 -0
  253. package/components/detail/text-colors.html +1287 -0
  254. package/components/detail/text.html +1037 -0
  255. package/components/detail/typography-body-texts.html +993 -0
  256. package/components/detail/typography-displays.html +959 -0
  257. package/components/detail/typography-headers.html +965 -0
  258. package/components/detail/typography-leads.html +951 -0
  259. package/components/detail/typography-links-dark-theme.html +1159 -0
  260. package/components/detail/typography-links-light-theme.html +1123 -0
  261. package/components/detail/typography-links-secondary.html +1011 -0
  262. package/components/detail/typography-unordered-lists.html +973 -0
  263. package/components/preview/accordion-checkbox-large.html +81 -0
  264. package/components/preview/accordion-checkbox-medium-dark.html +81 -0
  265. package/components/preview/accordion-checkbox-medium-disabled.html +82 -0
  266. package/components/preview/accordion-checkbox-medium-filtered-list-items.html +84 -0
  267. package/components/preview/accordion-checkbox-medium-icon-left-floating-dark-yellow.html +95 -0
  268. package/components/preview/accordion-checkbox-medium-icon-left-floating.html +95 -0
  269. package/components/preview/accordion-checkbox-medium-icon-left.html +90 -0
  270. package/components/preview/accordion-checkbox-medium.html +81 -0
  271. package/components/preview/accordion-checkbox-overview.html +83 -0
  272. package/components/preview/accordion-input.html +30 -0
  273. package/components/preview/accordion-label.html +30 -0
  274. package/components/preview/accordion-modifier-icon-floating.html +30 -0
  275. package/components/preview/accordion-modifier-icon-left.html +31 -0
  276. package/components/preview/accordion-radio.html +83 -0
  277. package/components/preview/alert-dark-theme-default.html +59 -0
  278. package/components/preview/alert-dark-theme-solution.html +59 -0
  279. package/components/preview/alert-default-extra-attention.html +58 -0
  280. package/components/preview/alert-default-generic.html +58 -0
  281. package/components/preview/alert-default-solution-with-badge-and-ready-state.html +64 -0
  282. package/components/preview/alert-default-solution.html +60 -0
  283. package/components/preview/alert-default-without-image.html +57 -0
  284. package/components/preview/alert-default.html +58 -0
  285. package/components/preview/alert-hidden-after-refresh-checkbox.html +63 -0
  286. package/components/preview/alert-hidden-after-refresh.html +57 -0
  287. package/components/preview/alert-layouts.html +341 -0
  288. package/components/preview/alert-visible-after-refresh.html +57 -0
  289. package/components/preview/background-colors.html +50 -0
  290. package/components/preview/basic-card-default-dark.html +55 -0
  291. package/components/preview/basic-card-default-without-caption-with-header-icon.html +50 -0
  292. package/components/preview/basic-card-default-without-caption-with-header-image.html +48 -0
  293. package/components/preview/basic-card-default-without-caption.html +46 -0
  294. package/components/preview/basic-card-default.html +55 -0
  295. package/components/preview/basic-card-grouping-center.html +55 -0
  296. package/components/preview/basic-card-grouping-left-with-flat-icon.html +60 -0
  297. package/components/preview/basic-card-grouping-left.html +55 -0
  298. package/components/preview/basic-card-grouping.html +110 -0
  299. package/components/preview/basic-card-layouts.html +494 -0
  300. package/components/preview/button-danger-dark-icon.html +51 -0
  301. package/components/preview/button-danger-dark.html +44 -0
  302. package/components/preview/button-danger-default.html +42 -0
  303. package/components/preview/button-danger-icon.html +51 -0
  304. package/components/preview/button-disabled-dark-icon.html +51 -0
  305. package/components/preview/button-disabled-dark.html +44 -0
  306. package/components/preview/button-floating-aligned-column.html +57 -0
  307. package/components/preview/button-floating-aligned-right.html +57 -0
  308. package/components/preview/button-floating-dark-aligned-column.html +57 -0
  309. package/components/preview/button-floating-dark-aligned-right.html +57 -0
  310. package/components/preview/button-floating-dark-default.html +57 -0
  311. package/components/preview/button-floating-dark-disabled.html +57 -0
  312. package/components/preview/button-floating-dark-secondary-aligned-column.html +57 -0
  313. package/components/preview/button-floating-dark-secondary-aligned-right.html +57 -0
  314. package/components/preview/button-floating-dark-secondary.html +57 -0
  315. package/components/preview/button-floating-default.html +57 -0
  316. package/components/preview/button-floating-disabled.html +57 -0
  317. package/components/preview/button-floating-overview.html +39 -0
  318. package/components/preview/button-floating-positioning.html +58 -0
  319. package/components/preview/button-floating-secondary-aligned-column.html +57 -0
  320. package/components/preview/button-floating-secondary-aligned-right.html +57 -0
  321. package/components/preview/button-floating-secondary.html +57 -0
  322. package/components/preview/button-floating-states.html +48 -0
  323. package/components/preview/button-gray-default.html +43 -0
  324. package/components/preview/button-gray-icon.html +51 -0
  325. package/components/preview/button-group-center-alignment.html +37 -0
  326. package/components/preview/button-group-left-alignment.html +37 -0
  327. package/components/preview/button-group-right-alignment.html +37 -0
  328. package/components/preview/button-overview-direction.html +45 -0
  329. package/components/preview/button-overview-global-definition.html +41 -0
  330. package/components/preview/button-overview-sizes.html +48 -0
  331. package/components/preview/button-overview-states.html +59 -0
  332. package/components/preview/button-primary-dark-icon.html +51 -0
  333. package/components/preview/button-primary-dark.html +44 -0
  334. package/components/preview/button-primary-default.html +42 -0
  335. package/components/preview/button-primary-icon.html +52 -0
  336. package/components/preview/button-secondary-dark-icon.html +51 -0
  337. package/components/preview/button-secondary-dark.html +44 -0
  338. package/components/preview/button-secondary-default.html +44 -0
  339. package/components/preview/button-secondary-icon.html +51 -0
  340. package/components/preview/button-tertiary-default.html +42 -0
  341. package/components/preview/button-tertiary-icon.html +51 -0
  342. package/components/preview/buttons-overview.html +510 -0
  343. package/components/preview/category-dark.html +67 -0
  344. package/components/preview/category-disabled-dark.html +63 -0
  345. package/components/preview/category-disabled.html +59 -0
  346. package/components/preview/category-full-row.html +139 -0
  347. package/components/preview/category-overview-dark-states.html +85 -0
  348. package/components/preview/category-overview-dark.html +67 -0
  349. package/components/preview/category-overview-sizes.html +67 -0
  350. package/components/preview/category-overview-states.html +81 -0
  351. package/components/preview/category-small-dark.html +67 -0
  352. package/components/preview/category-small-disabled-dark.html +63 -0
  353. package/components/preview/category-small-disabled.html +59 -0
  354. package/components/preview/category-small-full-row.html +175 -0
  355. package/components/preview/category-small.html +63 -0
  356. package/components/preview/category.html +63 -0
  357. package/components/preview/checkbox-checked.html +38 -0
  358. package/components/preview/checkbox-disabled.html +38 -0
  359. package/components/preview/checkbox-focus.html +38 -0
  360. package/components/preview/checkbox-global-definition.html +38 -0
  361. package/components/preview/checkbox-hover.html +38 -0
  362. package/components/preview/checkbox-inline.html +41 -0
  363. package/components/preview/checkbox-readonly.html +39 -0
  364. package/components/preview/colors-and-shadows.html +126 -0
  365. package/components/preview/contact-cards.html +622 -0
  366. package/components/preview/contact-content.html +56 -0
  367. package/components/preview/contact-overview.html +121 -0
  368. package/components/preview/contact-sizes.html +102 -0
  369. package/components/preview/contact-small.html +67 -0
  370. package/components/preview/contact-without-image-small.html +62 -0
  371. package/components/preview/contact-without-image.html +62 -0
  372. package/components/preview/contact.html +67 -0
  373. package/components/preview/divider-dark-blue.html +29 -0
  374. package/components/preview/divider-default.html +30 -0
  375. package/components/preview/divider-gray-5.html +29 -0
  376. package/components/preview/divider-white-50.html +29 -0
  377. package/components/preview/divider-white.html +29 -0
  378. package/components/preview/divider-yellow.html +30 -0
  379. package/components/preview/generic-card-aspect-16by9.html +49 -0
  380. package/components/preview/generic-card-aspect-2by1-small.html +110 -0
  381. package/components/preview/generic-card-aspect-2by1.html +106 -0
  382. package/components/preview/generic-card-aspect.html +74 -0
  383. package/components/preview/generic-card-default-small-dark-theme.html +48 -0
  384. package/components/preview/generic-card-default-small-svg.html +48 -0
  385. package/components/preview/generic-card-default-small.html +49 -0
  386. package/components/preview/generic-card-default-svg-dark.html +48 -0
  387. package/components/preview/generic-card-default-svg.html +47 -0
  388. package/components/preview/generic-card-default.html +50 -0
  389. package/components/preview/generic-card-media-dark-theme.html +64 -0
  390. package/components/preview/generic-card-media-floating-icon.html +70 -0
  391. package/components/preview/generic-card-media-small.html +62 -0
  392. package/components/preview/generic-card-media.html +62 -0
  393. package/components/preview/generic-card-overview.html +80 -0
  394. package/components/preview/generic-flat-icons.html +54 -0
  395. package/components/preview/generic-rich-icons.html +54 -0
  396. package/components/preview/global-colors-alternative.html +59 -0
  397. package/components/preview/global-colors-gradients.html +63 -0
  398. package/components/preview/global-colors-gray-white-black.html +62 -0
  399. package/components/preview/global-colors-primary.html +53 -0
  400. package/components/preview/global-colors-shadows.html +54 -0
  401. package/components/preview/global-colors-transparency.html +64 -0
  402. package/components/preview/global-margins.html +51 -0
  403. package/components/preview/global-paddings.html +30 -0
  404. package/components/preview/gradient-background-colors.html +164 -0
  405. package/components/preview/input-disabled.html +56 -0
  406. package/components/preview/input-field.html +164 -0
  407. package/components/preview/input-focus.html +56 -0
  408. package/components/preview/input-hover.html +56 -0
  409. package/components/preview/input-readonly.html +56 -0
  410. package/components/preview/input-sizes.html +58 -0
  411. package/components/preview/input-state-error.html +56 -0
  412. package/components/preview/input-state-success.html +56 -0
  413. package/components/preview/input.html +45 -0
  414. package/components/preview/large-section-spacing-definitions.html +59 -0
  415. package/components/preview/large-section-spacing.html +42 -0
  416. package/components/preview/links.html +44 -0
  417. package/components/preview/lists.html +42 -0
  418. package/components/preview/marketplace-flat-icons.html +54 -0
  419. package/components/preview/marketplace-rich-icons.html +54 -0
  420. package/components/preview/matching-content-height-card.html +354 -0
  421. package/components/preview/medium-section-spacing-definitions.html +59 -0
  422. package/components/preview/medium-section-spacing.html +42 -0
  423. package/components/preview/modal-on-click.html +63 -0
  424. package/components/preview/modal-on-load-demo.html +61 -0
  425. package/components/preview/modal-on-load.html +61 -0
  426. package/components/preview/msds-text-alt-blue-1.html +49 -0
  427. package/components/preview/msds-text-alt-blue-2.html +49 -0
  428. package/components/preview/msds-text-alt-blue-3.html +49 -0
  429. package/components/preview/msds-text-alt-yellow-1.html +49 -0
  430. package/components/preview/msds-text-alt-yellow-2.html +49 -0
  431. package/components/preview/msds-text-black.html +49 -0
  432. package/components/preview/msds-text-clear-blue.html +49 -0
  433. package/components/preview/msds-text-confirm-green.html +49 -0
  434. package/components/preview/msds-text-danger-red-1.html +49 -0
  435. package/components/preview/msds-text-danger-red-2.html +49 -0
  436. package/components/preview/msds-text-dark-blue.html +49 -0
  437. package/components/preview/msds-text-gray-1.html +49 -0
  438. package/components/preview/msds-text-gray-10.html +49 -0
  439. package/components/preview/msds-text-gray-2.html +49 -0
  440. package/components/preview/msds-text-gray-3.html +49 -0
  441. package/components/preview/msds-text-gray-4.html +49 -0
  442. package/components/preview/msds-text-gray-5.html +49 -0
  443. package/components/preview/msds-text-gray-6.html +49 -0
  444. package/components/preview/msds-text-gray-7.html +49 -0
  445. package/components/preview/msds-text-gray-8.html +49 -0
  446. package/components/preview/msds-text-gray-9.html +49 -0
  447. package/components/preview/msds-text-sand.html +49 -0
  448. package/components/preview/msds-text-white.html +49 -0
  449. package/components/preview/msds-text-yellow.html +49 -0
  450. package/components/preview/popover-bottom.html +61 -0
  451. package/components/preview/popover-global-definition.html +61 -0
  452. package/components/preview/popover-left.html +61 -0
  453. package/components/preview/popover-top.html +61 -0
  454. package/components/preview/preview-dark.html +59 -0
  455. package/components/preview/preview.html +29 -0
  456. package/components/preview/progress-bar-dark-theme.html +57 -0
  457. package/components/preview/progress-bar-features.html +66 -0
  458. package/components/preview/progress-bar-global-definition.html +41 -0
  459. package/components/preview/progress-bar-light-theme.html +53 -0
  460. package/components/preview/progress-bar-sizes.html +55 -0
  461. package/components/preview/radio-button-disabled.html +36 -0
  462. package/components/preview/radio-button-focus.html +36 -0
  463. package/components/preview/radio-button-global-definition.html +42 -0
  464. package/components/preview/radio-button-hover.html +36 -0
  465. package/components/preview/radio-button-readonly.html +37 -0
  466. package/components/preview/radio-button-selected.html +36 -0
  467. package/components/preview/section-checkbox-dark.html +64 -0
  468. package/components/preview/section-checkbox-nested-accordion.html +119 -0
  469. package/components/preview/section-checkbox.html +96 -0
  470. package/components/preview/section-radio-dark.html +96 -0
  471. package/components/preview/section-radio-nested-accordion.html +144 -0
  472. package/components/preview/section-radio.html +95 -0
  473. package/components/preview/select-input-default.html +41 -0
  474. package/components/preview/select-input-error.html +40 -0
  475. package/components/preview/select-input-global-definition.html +46 -0
  476. package/components/preview/select-input-not-required.html +41 -0
  477. package/components/preview/select-input-required.html +41 -0
  478. package/components/preview/select-input-small.html +38 -0
  479. package/components/preview/small-section-spacing-definitions.html +62 -0
  480. package/components/preview/small-section-spacing.html +42 -0
  481. package/components/preview/solid-background-colors.html +135 -0
  482. package/components/preview/solution-card-default-layout.html +158 -0
  483. package/components/preview/solution-card-default.html +74 -0
  484. package/components/preview/solution-card-layouts.html +587 -0
  485. package/components/preview/solution-card-optional-certification-badges.html +82 -0
  486. package/components/preview/solution-card-optional-solution-badges.html +82 -0
  487. package/components/preview/solution-card-sizes.html +116 -0
  488. package/components/preview/solution-card-small.html +74 -0
  489. package/components/preview/switch-checked.html +41 -0
  490. package/components/preview/switch-default.html +41 -0
  491. package/components/preview/switch-disabled-readonly.html +41 -0
  492. package/components/preview/switch-disabled.html +41 -0
  493. package/components/preview/switch-global.html +46 -0
  494. package/components/preview/tab-tile.html +1128 -0
  495. package/components/preview/table-dark-theme-default-expandable-rows.html +160 -0
  496. package/components/preview/table-dark-theme-default.html +172 -0
  497. package/components/preview/table-default-dark.html +144 -0
  498. package/components/preview/table-default-expandable-rows.html +156 -0
  499. package/components/preview/table-default-medium.html +144 -0
  500. package/components/preview/table-default-small.html +144 -0
  501. package/components/preview/table-default.html +168 -0
  502. package/components/preview/text-area-disabled.html +60 -0
  503. package/components/preview/text-area-error.html +60 -0
  504. package/components/preview/text-area-field.html +47 -0
  505. package/components/preview/text-area-focus.html +60 -0
  506. package/components/preview/text-area-hover.html +60 -0
  507. package/components/preview/text-area-readonly.html +60 -0
  508. package/components/preview/text-area-sizes.html +60 -0
  509. package/components/preview/text-area-success.html +60 -0
  510. package/components/preview/text-area.html +147 -0
  511. package/components/preview/text-colors.html +49 -0
  512. package/components/preview/text.html +74 -0
  513. package/components/preview/typography-body-texts.html +52 -0
  514. package/components/preview/typography-displays.html +34 -0
  515. package/components/preview/typography-headers.html +37 -0
  516. package/components/preview/typography-leads.html +30 -0
  517. package/components/preview/typography-links-dark-theme.html +135 -0
  518. package/components/preview/typography-links-light-theme.html +117 -0
  519. package/components/preview/typography-links-secondary.html +61 -0
  520. package/components/preview/typography-unordered-lists.html +41 -0
  521. package/components/raw/tab-tile/tab-tile.js +139 -0
  522. package/components/raw/tab-tile/tab-tile.scss +256 -0
  523. package/components/render/accordion-checkbox-large.html +55 -0
  524. package/components/render/accordion-checkbox-medium-dark.html +55 -0
  525. package/components/render/accordion-checkbox-medium-disabled.html +56 -0
  526. package/components/render/accordion-checkbox-medium-filtered-list-items.html +58 -0
  527. package/components/render/accordion-checkbox-medium-icon-left-floating-dark-yellow.html +69 -0
  528. package/components/render/accordion-checkbox-medium-icon-left-floating.html +69 -0
  529. package/components/render/accordion-checkbox-medium-icon-left.html +64 -0
  530. package/components/render/accordion-checkbox-medium.html +55 -0
  531. package/components/render/accordion-checkbox-overview.html +57 -0
  532. package/components/render/accordion-input.html +4 -0
  533. package/components/render/accordion-label.html +4 -0
  534. package/components/render/accordion-modifier-icon-floating.html +4 -0
  535. package/components/render/accordion-modifier-icon-left.html +5 -0
  536. package/components/render/accordion-radio.html +57 -0
  537. package/components/render/alert-dark-theme-default.html +33 -0
  538. package/components/render/alert-dark-theme-solution.html +33 -0
  539. package/components/render/alert-default-extra-attention.html +32 -0
  540. package/components/render/alert-default-generic.html +32 -0
  541. package/components/render/alert-default-solution-with-badge-and-ready-state.html +38 -0
  542. package/components/render/alert-default-solution.html +34 -0
  543. package/components/render/alert-default-without-image.html +31 -0
  544. package/components/render/alert-default.html +32 -0
  545. package/components/render/alert-hidden-after-refresh-checkbox.html +37 -0
  546. package/components/render/alert-hidden-after-refresh.html +31 -0
  547. package/components/render/alert-layouts.html +315 -0
  548. package/components/render/alert-visible-after-refresh.html +31 -0
  549. package/components/render/background-colors.html +4 -0
  550. package/components/render/basic-card-default-dark.html +29 -0
  551. package/components/render/basic-card-default-without-caption-with-header-icon.html +24 -0
  552. package/components/render/basic-card-default-without-caption-with-header-image.html +22 -0
  553. package/components/render/basic-card-default-without-caption.html +20 -0
  554. package/components/render/basic-card-default.html +29 -0
  555. package/components/render/basic-card-grouping-center.html +29 -0
  556. package/components/render/basic-card-grouping-left-with-flat-icon.html +34 -0
  557. package/components/render/basic-card-grouping-left.html +29 -0
  558. package/components/render/basic-card-grouping.html +84 -0
  559. package/components/render/basic-card-layouts.html +468 -0
  560. package/components/render/button-danger-dark-icon.html +25 -0
  561. package/components/render/button-danger-dark.html +18 -0
  562. package/components/render/button-danger-default.html +16 -0
  563. package/components/render/button-danger-icon.html +25 -0
  564. package/components/render/button-disabled-dark-icon.html +25 -0
  565. package/components/render/button-disabled-dark.html +18 -0
  566. package/components/render/button-floating-aligned-column.html +31 -0
  567. package/components/render/button-floating-aligned-right.html +31 -0
  568. package/components/render/button-floating-dark-aligned-column.html +31 -0
  569. package/components/render/button-floating-dark-aligned-right.html +31 -0
  570. package/components/render/button-floating-dark-default.html +31 -0
  571. package/components/render/button-floating-dark-disabled.html +31 -0
  572. package/components/render/button-floating-dark-secondary-aligned-column.html +31 -0
  573. package/components/render/button-floating-dark-secondary-aligned-right.html +31 -0
  574. package/components/render/button-floating-dark-secondary.html +31 -0
  575. package/components/render/button-floating-default.html +31 -0
  576. package/components/render/button-floating-disabled.html +31 -0
  577. package/components/render/button-floating-overview.html +13 -0
  578. package/components/render/button-floating-positioning.html +32 -0
  579. package/components/render/button-floating-secondary-aligned-column.html +31 -0
  580. package/components/render/button-floating-secondary-aligned-right.html +31 -0
  581. package/components/render/button-floating-secondary.html +31 -0
  582. package/components/render/button-floating-states.html +22 -0
  583. package/components/render/button-gray-default.html +17 -0
  584. package/components/render/button-gray-icon.html +25 -0
  585. package/components/render/button-group-center-alignment.html +11 -0
  586. package/components/render/button-group-left-alignment.html +11 -0
  587. package/components/render/button-group-right-alignment.html +11 -0
  588. package/components/render/button-overview-direction.html +19 -0
  589. package/components/render/button-overview-global-definition.html +15 -0
  590. package/components/render/button-overview-sizes.html +22 -0
  591. package/components/render/button-overview-states.html +33 -0
  592. package/components/render/button-primary-dark-icon.html +25 -0
  593. package/components/render/button-primary-dark.html +18 -0
  594. package/components/render/button-primary-default.html +16 -0
  595. package/components/render/button-primary-icon.html +26 -0
  596. package/components/render/button-secondary-dark-icon.html +25 -0
  597. package/components/render/button-secondary-dark.html +18 -0
  598. package/components/render/button-secondary-default.html +18 -0
  599. package/components/render/button-secondary-icon.html +25 -0
  600. package/components/render/button-tertiary-default.html +16 -0
  601. package/components/render/button-tertiary-icon.html +25 -0
  602. package/components/render/buttons-overview.html +484 -0
  603. package/components/render/category-dark.html +37 -0
  604. package/components/render/category-disabled-dark.html +33 -0
  605. package/components/render/category-disabled.html +33 -0
  606. package/components/render/category-full-row.html +113 -0
  607. package/components/render/category-overview-dark-states.html +55 -0
  608. package/components/render/category-overview-dark.html +37 -0
  609. package/components/render/category-overview-sizes.html +41 -0
  610. package/components/render/category-overview-states.html +55 -0
  611. package/components/render/category-small-dark.html +37 -0
  612. package/components/render/category-small-disabled-dark.html +33 -0
  613. package/components/render/category-small-disabled.html +33 -0
  614. package/components/render/category-small-full-row.html +149 -0
  615. package/components/render/category-small.html +37 -0
  616. package/components/render/category.html +37 -0
  617. package/components/render/checkbox-checked.html +12 -0
  618. package/components/render/checkbox-disabled.html +12 -0
  619. package/components/render/checkbox-focus.html +12 -0
  620. package/components/render/checkbox-global-definition.html +12 -0
  621. package/components/render/checkbox-hover.html +12 -0
  622. package/components/render/checkbox-inline.html +15 -0
  623. package/components/render/checkbox-readonly.html +13 -0
  624. package/components/render/colors-and-shadows.html +80 -0
  625. package/components/render/contact-cards.html +596 -0
  626. package/components/render/contact-content.html +30 -0
  627. package/components/render/contact-overview.html +95 -0
  628. package/components/render/contact-sizes.html +76 -0
  629. package/components/render/contact-small.html +41 -0
  630. package/components/render/contact-without-image-small.html +36 -0
  631. package/components/render/contact-without-image.html +36 -0
  632. package/components/render/contact.html +41 -0
  633. package/components/render/divider-dark-blue.html +3 -0
  634. package/components/render/divider-default.html +4 -0
  635. package/components/render/divider-gray-5.html +3 -0
  636. package/components/render/divider-white-50.html +3 -0
  637. package/components/render/divider-white.html +3 -0
  638. package/components/render/divider-yellow.html +4 -0
  639. package/components/render/generic-card-aspect-16by9.html +23 -0
  640. package/components/render/generic-card-aspect-2by1-small.html +84 -0
  641. package/components/render/generic-card-aspect-2by1.html +80 -0
  642. package/components/render/generic-card-aspect.html +48 -0
  643. package/components/render/generic-card-default-small-dark-theme.html +22 -0
  644. package/components/render/generic-card-default-small-svg.html +22 -0
  645. package/components/render/generic-card-default-small.html +23 -0
  646. package/components/render/generic-card-default-svg-dark.html +22 -0
  647. package/components/render/generic-card-default-svg.html +21 -0
  648. package/components/render/generic-card-default.html +24 -0
  649. package/components/render/generic-card-media-dark-theme.html +38 -0
  650. package/components/render/generic-card-media-floating-icon.html +44 -0
  651. package/components/render/generic-card-media-small.html +36 -0
  652. package/components/render/generic-card-media.html +36 -0
  653. package/components/render/generic-card-overview.html +54 -0
  654. package/components/render/generic-flat-icons.html +3 -0
  655. package/components/render/generic-rich-icons.html +3 -0
  656. package/components/render/global-colors-alternative.html +13 -0
  657. package/components/render/global-colors-gradients.html +17 -0
  658. package/components/render/global-colors-gray-white-black.html +16 -0
  659. package/components/render/global-colors-primary.html +7 -0
  660. package/components/render/global-colors-shadows.html +8 -0
  661. package/components/render/global-colors-transparency.html +18 -0
  662. package/components/render/global-margins.html +25 -0
  663. package/components/render/global-paddings.html +4 -0
  664. package/components/render/gradient-background-colors.html +118 -0
  665. package/components/render/input-disabled.html +30 -0
  666. package/components/render/input-field.html +138 -0
  667. package/components/render/input-focus.html +30 -0
  668. package/components/render/input-hover.html +30 -0
  669. package/components/render/input-readonly.html +30 -0
  670. package/components/render/input-sizes.html +32 -0
  671. package/components/render/input-state-error.html +30 -0
  672. package/components/render/input-state-success.html +30 -0
  673. package/components/render/input.html +19 -0
  674. package/components/render/large-section-spacing-definitions.html +33 -0
  675. package/components/render/large-section-spacing.html +16 -0
  676. package/components/render/links.html +18 -0
  677. package/components/render/lists.html +16 -0
  678. package/components/render/marketplace-flat-icons.html +3 -0
  679. package/components/render/marketplace-rich-icons.html +3 -0
  680. package/components/render/matching-content-height-card.html +328 -0
  681. package/components/render/medium-section-spacing-definitions.html +33 -0
  682. package/components/render/medium-section-spacing.html +16 -0
  683. package/components/render/modal-on-click.html +37 -0
  684. package/components/render/modal-on-load-demo.html +35 -0
  685. package/components/render/modal-on-load.html +35 -0
  686. package/components/render/msds-text-alt-blue-1.html +3 -0
  687. package/components/render/msds-text-alt-blue-2.html +3 -0
  688. package/components/render/msds-text-alt-blue-3.html +3 -0
  689. package/components/render/msds-text-alt-yellow-1.html +3 -0
  690. package/components/render/msds-text-alt-yellow-2.html +3 -0
  691. package/components/render/msds-text-black.html +3 -0
  692. package/components/render/msds-text-clear-blue.html +3 -0
  693. package/components/render/msds-text-confirm-green.html +3 -0
  694. package/components/render/msds-text-danger-red-1.html +3 -0
  695. package/components/render/msds-text-danger-red-2.html +3 -0
  696. package/components/render/msds-text-dark-blue.html +3 -0
  697. package/components/render/msds-text-gray-1.html +3 -0
  698. package/components/render/msds-text-gray-10.html +3 -0
  699. package/components/render/msds-text-gray-2.html +3 -0
  700. package/components/render/msds-text-gray-3.html +3 -0
  701. package/components/render/msds-text-gray-4.html +3 -0
  702. package/components/render/msds-text-gray-5.html +3 -0
  703. package/components/render/msds-text-gray-6.html +3 -0
  704. package/components/render/msds-text-gray-7.html +3 -0
  705. package/components/render/msds-text-gray-8.html +3 -0
  706. package/components/render/msds-text-gray-9.html +3 -0
  707. package/components/render/msds-text-sand.html +3 -0
  708. package/components/render/msds-text-white.html +3 -0
  709. package/components/render/msds-text-yellow.html +3 -0
  710. package/components/render/popover-bottom.html +35 -0
  711. package/components/render/popover-global-definition.html +35 -0
  712. package/components/render/popover-left.html +35 -0
  713. package/components/render/popover-top.html +35 -0
  714. package/components/render/preview-dark.html +33 -0
  715. package/components/render/preview.html +29 -0
  716. package/components/render/progress-bar-dark-theme.html +27 -0
  717. package/components/render/progress-bar-features.html +40 -0
  718. package/components/render/progress-bar-global-definition.html +15 -0
  719. package/components/render/progress-bar-light-theme.html +27 -0
  720. package/components/render/progress-bar-sizes.html +29 -0
  721. package/components/render/radio-button-disabled.html +10 -0
  722. package/components/render/radio-button-focus.html +10 -0
  723. package/components/render/radio-button-global-definition.html +16 -0
  724. package/components/render/radio-button-hover.html +10 -0
  725. package/components/render/radio-button-readonly.html +11 -0
  726. package/components/render/radio-button-selected.html +10 -0
  727. package/components/render/section-checkbox-dark.html +38 -0
  728. package/components/render/section-checkbox-nested-accordion.html +93 -0
  729. package/components/render/section-checkbox.html +70 -0
  730. package/components/render/section-radio-dark.html +70 -0
  731. package/components/render/section-radio-nested-accordion.html +118 -0
  732. package/components/render/section-radio.html +69 -0
  733. package/components/render/select-input-default.html +15 -0
  734. package/components/render/select-input-error.html +14 -0
  735. package/components/render/select-input-global-definition.html +20 -0
  736. package/components/render/select-input-not-required.html +15 -0
  737. package/components/render/select-input-required.html +15 -0
  738. package/components/render/select-input-small.html +12 -0
  739. package/components/render/small-section-spacing-definitions.html +36 -0
  740. package/components/render/small-section-spacing.html +16 -0
  741. package/components/render/solid-background-colors.html +89 -0
  742. package/components/render/solution-card-default-layout.html +132 -0
  743. package/components/render/solution-card-default.html +48 -0
  744. package/components/render/solution-card-layouts.html +561 -0
  745. package/components/render/solution-card-optional-certification-badges.html +56 -0
  746. package/components/render/solution-card-optional-solution-badges.html +56 -0
  747. package/components/render/solution-card-sizes.html +90 -0
  748. package/components/render/solution-card-small.html +48 -0
  749. package/components/render/switch-checked.html +15 -0
  750. package/components/render/switch-default.html +15 -0
  751. package/components/render/switch-disabled-readonly.html +15 -0
  752. package/components/render/switch-disabled.html +15 -0
  753. package/components/render/switch-global.html +20 -0
  754. package/components/render/tab-tile.html +1102 -0
  755. package/components/render/table-dark-theme-default-expandable-rows.html +130 -0
  756. package/components/render/table-dark-theme-default.html +142 -0
  757. package/components/render/table-default-dark.html +118 -0
  758. package/components/render/table-default-expandable-rows.html +130 -0
  759. package/components/render/table-default-medium.html +118 -0
  760. package/components/render/table-default-small.html +118 -0
  761. package/components/render/table-default.html +142 -0
  762. package/components/render/text-area-disabled.html +34 -0
  763. package/components/render/text-area-error.html +34 -0
  764. package/components/render/text-area-field.html +21 -0
  765. package/components/render/text-area-focus.html +34 -0
  766. package/components/render/text-area-hover.html +34 -0
  767. package/components/render/text-area-readonly.html +34 -0
  768. package/components/render/text-area-sizes.html +34 -0
  769. package/components/render/text-area-success.html +34 -0
  770. package/components/render/text-area.html +121 -0
  771. package/components/render/text-colors.html +3 -0
  772. package/components/render/text.html +48 -0
  773. package/components/render/typography-body-texts.html +26 -0
  774. package/components/render/typography-displays.html +8 -0
  775. package/components/render/typography-headers.html +11 -0
  776. package/components/render/typography-leads.html +4 -0
  777. package/components/render/typography-links-dark-theme.html +109 -0
  778. package/components/render/typography-links-light-theme.html +91 -0
  779. package/components/render/typography-links-secondary.html +35 -0
  780. package/components/render/typography-unordered-lists.html +15 -0
  781. package/components.html +13 -0
  782. package/design-system.css +1 -1
  783. package/docs/component-documentation/alerts.html +1657 -0
  784. package/docs/component-documentation/buttons/buttons-floating.html +1676 -0
  785. package/docs/component-documentation/buttons/buttons.html +1908 -0
  786. package/docs/component-documentation/cards/basic-cards.html +1424 -0
  787. package/docs/component-documentation/cards/category-cards.html +1950 -0
  788. package/docs/component-documentation/cards/contact-cards.html +1474 -0
  789. package/docs/component-documentation/cards/generic-cards.html +1534 -0
  790. package/docs/component-documentation/cards/solution-cards.html +1595 -0
  791. package/docs/component-documentation/dividers/dividers.html +839 -0
  792. package/docs/component-documentation/expanding-components/accordion.html +1832 -0
  793. package/docs/component-documentation/expanding-components/section.html +1511 -0
  794. package/docs/component-documentation/modal.html +983 -0
  795. package/docs/component-documentation/popover/popover.html +1082 -0
  796. package/docs/component-documentation/progress-bar.html +1143 -0
  797. package/docs/component-documentation/spacing.html +831 -0
  798. package/docs/component-documentation/table.html +2336 -0
  799. package/docs/content/icons/-overview.html +848 -0
  800. package/docs/content/icons/icons-flat.html +839 -0
  801. package/docs/content/icons/icons-rich.html +839 -0
  802. package/docs/content/typography/-overview.html +860 -0
  803. package/docs/content/typography/font-colors.html +900 -0
  804. package/docs/content/typography/links.html +1113 -0
  805. package/docs/content/typography/lists.html +854 -0
  806. package/docs/content/typography/text.html +919 -0
  807. package/docs/forms/-overview.html +881 -0
  808. package/docs/forms/checkbox.html +1007 -0
  809. package/docs/forms/drop-down-list.html +981 -0
  810. package/docs/forms/input-field.html +1316 -0
  811. package/docs/forms/radio-button.html +966 -0
  812. package/docs/forms/switch.html +964 -0
  813. package/docs/forms/text-area.html +1371 -0
  814. package/docs/guidelines-and-guides/creating-a-new-release.html +825 -0
  815. package/docs/guidelines-and-guides/css-and-scss-guidelines.html +814 -0
  816. package/docs/guidelines-and-guides/git-cheat-sheet.html +898 -0
  817. package/docs/guidelines-and-guides/installation-and-usage.html +812 -0
  818. package/docs/utilities/colors/background-colors.html +1029 -0
  819. package/docs/utilities/colors/font-colors.html +1002 -0
  820. package/docs/utilities/colors/overview.html +952 -0
  821. package/docs/utilities/spacing.html +1112 -0
  822. package/docs.html +13 -0
  823. package/icons.list.js +2432 -2432
  824. package/index.html +807 -0
  825. package/main.css +1 -1
  826. package/package.json +58 -58
  827. package/scss/_variables.scss +124 -124
  828. package/spacing.list.js +11 -11
  829. package/svg/rich/Okay.svg +33 -33
  830. package/svg/rich/acceleration.svg +39 -39
  831. package/svg/rich/add-content.svg +37 -37
  832. package/svg/rich/add-solution.svg +29 -29
  833. package/svg/rich/advanced-super-surveillance.svg +42 -42
  834. package/svg/rich/advocacy .svg +60 -60
  835. package/svg/rich/airplane.svg +67 -67
  836. package/svg/rich/ambition.svg +46 -46
  837. package/svg/rich/analytics-devices.svg +68 -68
  838. package/svg/rich/applications.svg +97 -97
  839. package/svg/rich/backup-important.svg +157 -157
  840. package/svg/rich/black-screens.svg +43 -43
  841. package/svg/rich/blueprint.svg +22 -22
  842. package/svg/rich/body-worn.svg +45 -45
  843. package/svg/rich/book-a-demo-notification.svg +38 -38
  844. package/svg/rich/book-a-demo.svg +34 -34
  845. package/svg/rich/booking.svg +49 -49
  846. package/svg/rich/browser.svg +32 -32
  847. package/svg/rich/build.svg +34 -34
  848. package/svg/rich/building-medium.svg +66 -66
  849. package/svg/rich/cal-monthly.svg +324 -324
  850. package/svg/rich/cal-weekly.svg +173 -173
  851. package/svg/rich/calendar.svg +25 -25
  852. package/svg/rich/cam-group-small.svg +84 -84
  853. package/svg/rich/camera-analogue.svg +27 -27
  854. package/svg/rich/camera-memory.svg +25 -25
  855. package/svg/rich/car.svg +41 -41
  856. package/svg/rich/care.svg +16 -16
  857. package/svg/rich/catalogue.svg +22 -22
  858. package/svg/rich/certification.svg +25 -25
  859. package/svg/rich/checklist.svg +22 -22
  860. package/svg/rich/checkmark-badge.svg +11 -11
  861. package/svg/rich/checkmark.svg +11 -11
  862. package/svg/rich/clock-24-7.svg +77 -77
  863. package/svg/rich/co-working.svg +104 -104
  864. package/svg/rich/coffee.svg +60 -60
  865. package/svg/rich/community.svg +184 -184
  866. package/svg/rich/company.svg +32 -32
  867. package/svg/rich/complete-flow.svg +30 -30
  868. package/svg/rich/consumer.svg +47 -47
  869. package/svg/rich/contact-illustration.svg +13 -13
  870. package/svg/rich/contact-notification.svg +17 -17
  871. package/svg/rich/crime.svg +29 -29
  872. package/svg/rich/crowd-management.svg +47 -47
  873. package/svg/rich/customer-stories.svg +23 -23
  874. package/svg/rich/customizable.svg +19 -19
  875. package/svg/rich/cyber-security.svg +131 -131
  876. package/svg/rich/dashboard.svg +43 -43
  877. package/svg/rich/decision-making.svg +19 -19
  878. package/svg/rich/deployment-device.svg +66 -66
  879. package/svg/rich/design-animated.svg +51 -51
  880. package/svg/rich/design.svg +24 -24
  881. package/svg/rich/devices-web.svg +56 -56
  882. package/svg/rich/devices.svg +29 -29
  883. package/svg/rich/discount.svg +22 -22
  884. package/svg/rich/document.svg +24 -24
  885. package/svg/rich/documentation.svg +79 -79
  886. package/svg/rich/dome-cam-8.svg +84 -84
  887. package/svg/rich/dome-cam.svg +16 -16
  888. package/svg/rich/download-illustration.svg +49 -49
  889. package/svg/rich/e-learning.svg +42 -42
  890. package/svg/rich/emergency.svg +44 -44
  891. package/svg/rich/employees.svg +37 -37
  892. package/svg/rich/end-user.svg +28 -28
  893. package/svg/rich/expertise.svg +47 -47
  894. package/svg/rich/explore.svg +50 -50
  895. package/svg/rich/extension.svg +63 -63
  896. package/svg/rich/failover.svg +33 -33
  897. package/svg/rich/faq.svg +23 -23
  898. package/svg/rich/feedback-notification.svg +21 -21
  899. package/svg/rich/feedback.svg +17 -17
  900. package/svg/rich/find.svg +28 -28
  901. package/svg/rich/flexibility.svg +13 -13
  902. package/svg/rich/form.svg +26 -26
  903. package/svg/rich/get-leads.svg +73 -73
  904. package/svg/rich/getting-started.svg +29 -29
  905. package/svg/rich/global-partner-network.svg +978 -978
  906. package/svg/rich/growth-data.svg +56 -56
  907. package/svg/rich/happiness.svg +29 -29
  908. package/svg/rich/hardware-applications-software.svg +165 -165
  909. package/svg/rich/hardware-services-documentation.svg +47 -47
  910. package/svg/rich/hardware.svg +22 -22
  911. package/svg/rich/intelligence.svg +43 -43
  912. package/svg/rich/interconnect.svg +39 -39
  913. package/svg/rich/investigation.svg +34 -34
  914. package/svg/rich/join.svg +78 -78
  915. package/svg/rich/key-features.svg +38 -38
  916. package/svg/rich/languages.svg +49 -49
  917. package/svg/rich/license-governance.svg +45 -45
  918. package/svg/rich/license-key.svg +13 -13
  919. package/svg/rich/like-notification.svg +43 -43
  920. package/svg/rich/listen.svg +13 -13
  921. package/svg/rich/live-streaming.svg +93 -93
  922. package/svg/rich/logged-in.svg +14 -14
  923. package/svg/rich/lpr.svg +59 -59
  924. package/svg/rich/marketplace-challenges-assist-people-feel-safe-leaving.svg +105 -105
  925. package/svg/rich/marketplace-challenges-assist-people-in-finding-their-vehicles.svg +124 -124
  926. package/svg/rich/marketplace-challenges-avoid-employee-theft.svg +169 -169
  927. package/svg/rich/marketplace-challenges-control-access-to-restricted-areas.svg +104 -104
  928. package/svg/rich/marketplace-challenges-discover-inefficiencies-in-cargo-movement.svg +130 -130
  929. package/svg/rich/marketplace-challenges-find-lost-children.svg +87 -87
  930. package/svg/rich/marketplace-challenges-gather-evidence-for-criminal-investigation.svg +172 -172
  931. package/svg/rich/marketplace-challenges-improve-wait-time-in-lines.svg +375 -375
  932. package/svg/rich/marketplace-challenges-money-disputes-with-customers.svg +157 -157
  933. package/svg/rich/marketplace-challenges-personalized-customer-experience.svg +127 -127
  934. package/svg/rich/marketplace-challenges-prevent-multiple-people-from-entering-a-door-on-a-single-access-badge.svg +245 -245
  935. package/svg/rich/marketplace-challenges-provide-evidence-against-lawsuit.svg +270 -270
  936. package/svg/rich/marketplace-challenges-react-to-confrontations-before-they-escalate.svg +176 -176
  937. package/svg/rich/marketplace-challenges-reduce-property-damage.svg +381 -381
  938. package/svg/rich/marketplace-challenges-reduce-workplace-accidents.svg +172 -172
  939. package/svg/rich/marketplace-challenges-respond-to-medical-emergencies.svg +179 -179
  940. package/svg/rich/marketplace-challenges-situational-awareness-to-response-teams.svg +330 -330
  941. package/svg/rich/marketplace-challenges-understand-customer-behavior.svg +455 -455
  942. package/svg/rich/marketplace-challenges-vandalism.svg +120 -120
  943. package/svg/rich/marketplace-collect.svg +121 -121
  944. package/svg/rich/marketplace-filter.svg +54 -54
  945. package/svg/rich/marketplace-industries-airports.svg +380 -380
  946. package/svg/rich/marketplace-industries-art-and-entertainment.svg +170 -170
  947. package/svg/rich/marketplace-industries-city-surveillance.svg +572 -572
  948. package/svg/rich/marketplace-industries-construction.svg +253 -253
  949. package/svg/rich/marketplace-industries-critical-infrastructure.svg +292 -292
  950. package/svg/rich/marketplace-industries-education.svg +291 -291
  951. package/svg/rich/marketplace-industries-finance-and-insurance.svg +140 -140
  952. package/svg/rich/marketplace-industries-healthcare.svg +207 -207
  953. package/svg/rich/marketplace-industries-information-technology.svg +250 -250
  954. package/svg/rich/marketplace-industries-manufacturing.svg +175 -175
  955. package/svg/rich/marketplace-industries-public-administration.svg +349 -349
  956. package/svg/rich/marketplace-industries-public-transport.svg +303 -303
  957. package/svg/rich/marketplace-industries-retail.svg +392 -392
  958. package/svg/rich/marketplace-industries-seaports.svg +335 -335
  959. package/svg/rich/marketplace-industries-trafic-monitoring.svg +255 -255
  960. package/svg/rich/marketplace-industries-utilities.svg +211 -211
  961. package/svg/rich/marketplace-interface.svg +76 -76
  962. package/svg/rich/marketplace-practice-access-control.svg +117 -117
  963. package/svg/rich/marketplace-practice-business-intelligence.svg +89 -89
  964. package/svg/rich/marketplace-practice-business-solutions.svg +195 -195
  965. package/svg/rich/marketplace-practice-central-monitoring.svg +505 -505
  966. package/svg/rich/marketplace-practice-cloud-and-managed-services.svg +75 -75
  967. package/svg/rich/marketplace-practice-communication.svg +187 -187
  968. package/svg/rich/marketplace-practice-crisis-emergency.svg +160 -160
  969. package/svg/rich/marketplace-practice-cyber-security.svg +141 -141
  970. package/svg/rich/marketplace-practice-detection-and-deterrence.svg +164 -164
  971. package/svg/rich/marketplace-practice-digital-infrastructure.svg +197 -197
  972. package/svg/rich/marketplace-practice-facilities-management.svg +332 -332
  973. package/svg/rich/marketplace-practice-fire-and-life-safety.svg +168 -168
  974. package/svg/rich/marketplace-practice-home-automation-iot.svg +161 -161
  975. package/svg/rich/marketplace-practice-intrusion-and-alarm.svg +301 -301
  976. package/svg/rich/marketplace-practice-investigation.svg +157 -157
  977. package/svg/rich/marketplace-practice-it-hardware-and-equipment.svg +254 -254
  978. package/svg/rich/marketplace-practice-privacy-protection.svg +118 -118
  979. package/svg/rich/marketplace-practice-smart-city.svg +351 -351
  980. package/svg/rich/marketplace-practice-surveillance.svg +72 -72
  981. package/svg/rich/marketplace-practice-tracking-and-monitoring.svg +178 -178
  982. package/svg/rich/marketplace-practice-vehicles-and-traffic.svg +227 -227
  983. package/svg/rich/marketplace-solution-service.svg +75 -75
  984. package/svg/rich/milestone-global-offices-illustration.svg +49 -49
  985. package/svg/rich/milestone-in the-media.svg +49 -49
  986. package/svg/rich/mobile-support.svg +40 -40
  987. package/svg/rich/my-milestone.svg +28 -28
  988. package/svg/rich/network.svg +24 -24
  989. package/svg/rich/newspaper.svg +20 -20
  990. package/svg/rich/no-1.svg +50 -50
  991. package/svg/rich/no-backup.svg +30 -30
  992. package/svg/rich/one-hub.svg +71 -71
  993. package/svg/rich/open-platform-community.svg +144 -144
  994. package/svg/rich/open-platform.svg +10 -10
  995. package/svg/rich/outdated-hardware.svg +53 -53
  996. package/svg/rich/partnership.svg +39 -39
  997. package/svg/rich/passion.svg +41 -41
  998. package/svg/rich/planet.svg +75 -75
  999. package/svg/rich/play.svg +10 -10
  1000. package/svg/rich/press-release.svg +30 -30
  1001. package/svg/rich/product-overview-illustration.svg +49 -49
  1002. package/svg/rich/project-animated.svg +99 -99
  1003. package/svg/rich/project.svg +18 -18
  1004. package/svg/rich/promotion.svg +25 -25
  1005. package/svg/rich/publish.svg +12 -12
  1006. package/svg/rich/quote.svg +104 -104
  1007. package/svg/rich/reaction-mode.svg +54 -54
  1008. package/svg/rich/releases.svg +17 -17
  1009. package/svg/rich/reliable.svg +24 -24
  1010. package/svg/rich/reminder.svg +33 -33
  1011. package/svg/rich/save-money.svg +27 -27
  1012. package/svg/rich/scalable.svg +16 -16
  1013. package/svg/rich/scale-balance.svg +101 -101
  1014. package/svg/rich/scale-up.svg +11 -11
  1015. package/svg/rich/screen-recording.svg +259 -259
  1016. package/svg/rich/searching.svg +115 -115
  1017. package/svg/rich/secure-gdpr.svg +52 -52
  1018. package/svg/rich/secure.svg +49 -49
  1019. package/svg/rich/self-service-support.svg +15 -15
  1020. package/svg/rich/service-coding.svg +44 -44
  1021. package/svg/rich/sign-up.svg +37 -37
  1022. package/svg/rich/single-site.svg +31 -31
  1023. package/svg/rich/smart-wall-person.svg +135 -135
  1024. package/svg/rich/smart-wall.svg +96 -96
  1025. package/svg/rich/solutions-design-tool.svg +234 -234
  1026. package/svg/rich/submit-for-feedback.svg +28 -28
  1027. package/svg/rich/subscriptions.svg +37 -37
  1028. package/svg/rich/support-call.svg +29 -29
  1029. package/svg/rich/support-chat-female.svg +48 -48
  1030. package/svg/rich/support-chat-male.svg +48 -48
  1031. package/svg/rich/support-technical.svg +17 -17
  1032. package/svg/rich/system-builder.svg +24 -24
  1033. package/svg/rich/tags.svg +24 -24
  1034. package/svg/rich/target.svg +15 -15
  1035. package/svg/rich/time-to-market.svg +53 -53
  1036. package/svg/rich/tools.svg +37 -37
  1037. package/svg/rich/trade-show.svg +90 -90
  1038. package/svg/rich/transaction.svg +56 -56
  1039. package/svg/rich/translation.svg +17 -17
  1040. package/svg/rich/update-content-then-publish.svg +77 -77
  1041. package/svg/rich/update-content.svg +55 -55
  1042. package/svg/rich/user-review.svg +22 -22
  1043. package/svg/rich/verification.svg +37 -37
  1044. package/svg/rich/video-cookie.svg +78 -78
  1045. package/svg/rich/vps.svg +39 -39
  1046. package/svg/rich/warning.svg +48 -48
  1047. package/svg/rich/watch.svg +19 -19
  1048. package/svg/rich/webinar.svg +49 -49
  1049. package/svg/rich/well-being.svg +67 -67
  1050. package/svg/rich/world-leading.svg +258 -258
  1051. package/svg/rich/xprotect-access-anywhere.svg +86 -86
  1052. package/svg/rich/xprotect-compare-matrix.svg +40 -40
  1053. package/svg/rich/xprotect-compare-products.svg +232 -232
  1054. package/svg/rich/xprotect-compare-releases.svg +208 -208
  1055. package/svg/rich/xprotect.svg +31 -31
  1056. package/svg/rich/youtube.svg +12 -12
  1057. package/text.list.js +47 -47
  1058. package/themes/mandelbrot/css/aqua.css +1 -0
  1059. package/themes/mandelbrot/css/black.css +1 -0
  1060. package/themes/mandelbrot/css/blue.css +1 -0
  1061. package/themes/mandelbrot/css/default.css +1 -0
  1062. package/themes/mandelbrot/css/fuchsia.css +1 -0
  1063. package/themes/mandelbrot/css/green.css +1 -0
  1064. package/themes/mandelbrot/css/grey.css +1 -0
  1065. package/themes/mandelbrot/css/highlight.css +1 -0
  1066. package/themes/mandelbrot/css/lime.css +1 -0
  1067. package/themes/mandelbrot/css/maroon.css +1 -0
  1068. package/themes/mandelbrot/css/navy.css +1 -0
  1069. package/themes/mandelbrot/css/olive.css +1 -0
  1070. package/themes/mandelbrot/css/orange.css +1 -0
  1071. package/themes/mandelbrot/css/purple.css +1 -0
  1072. package/themes/mandelbrot/css/red.css +1 -0
  1073. package/themes/mandelbrot/css/teal.css +1 -0
  1074. package/themes/mandelbrot/css/white.css +1 -0
  1075. package/themes/mandelbrot/css/yellow.css +1 -0
  1076. package/themes/mandelbrot/favicon.ico +0 -0
  1077. package/themes/mandelbrot/fonts/OpenSans-Italic.woff +0 -0
  1078. package/themes/mandelbrot/fonts/OpenSans-Italic.woff2 +0 -0
  1079. package/themes/mandelbrot/fonts/OpenSans-Regular.woff +0 -0
  1080. package/themes/mandelbrot/fonts/OpenSans-Regular.woff2 +0 -0
  1081. package/themes/mandelbrot/fonts/OpenSans-Semibold.woff +0 -0
  1082. package/themes/mandelbrot/fonts/OpenSans-Semibold.woff2 +0 -0
  1083. package/themes/mandelbrot/fonts/OpenSans-SemiboldItalic.woff +0 -0
  1084. package/themes/mandelbrot/fonts/OpenSans-SemiboldItalic.woff2 +0 -0
  1085. package/themes/mandelbrot/fonts/hack-bold-webfont.woff +0 -0
  1086. package/themes/mandelbrot/fonts/hack-bold-webfont.woff2 +0 -0
  1087. package/themes/mandelbrot/fonts/hack-bolditalic-webfont.woff +0 -0
  1088. package/themes/mandelbrot/fonts/hack-bolditalic-webfont.woff2 +0 -0
  1089. package/themes/mandelbrot/fonts/hack-italic-webfont.woff +0 -0
  1090. package/themes/mandelbrot/fonts/hack-italic-webfont.woff2 +0 -0
  1091. package/themes/mandelbrot/fonts/hack-regular-webfont.woff +0 -0
  1092. package/themes/mandelbrot/fonts/hack-regular-webfont.woff2 +0 -0
  1093. package/themes/mandelbrot/img/favicon.png +0 -0
  1094. package/themes/mandelbrot/img/icon-drag--horizontal.svg +3 -0
  1095. package/themes/mandelbrot/img/icon-drag--vertical.svg +3 -0
  1096. package/themes/mandelbrot/img/icon-navigation-closed-ltr.svg +3 -0
  1097. package/themes/mandelbrot/img/icon-navigation-closed-rtl.svg +3 -0
  1098. package/themes/mandelbrot/img/icon-navigation-opened.svg +3 -0
  1099. package/themes/mandelbrot/img/icon-window.svg +3 -0
  1100. package/themes/mandelbrot/img/loader.svg +37 -0
  1101. package/themes/mandelbrot/js/mandelbrot.js +2 -0
  1102. package/themes/mandelbrot/js/mandelbrot.js.map +1 -0
package/docs/utilities/spacing.html ADDED
@@ -0,0 +1,1112 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en" dir="ltr" class="no-js">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1">
6
+ <script>
7
+ window.frctl = {
8
+ env: 'static'
9
+ };
10
+ </script>
11
+ <script>var cl = document.querySelector('html').classList; cl.remove('no-js'); cl.add('has-js');</script>
12
+ <link rel="shortcut icon" href="../../src/demo-img/favicon.ico" type="image/ico">
13
+
14
+ <link rel="stylesheet" href="../../themes/mandelbrot/css/default.css?cachebust=1.4.0" type="text/css">
15
+
16
+ <link rel="stylesheet" href="../../rich-icons-bundle.css?cachebust=1.4.0" type="text/css">
17
+
18
+ <link rel="stylesheet" href="../../theme-overrides/styles.css?cachebust=1.4.0" type="text/css">
19
+
20
+ <link rel="stylesheet" href="../../main.css?cachebust=1.4.0" type="text/css">
21
+
22
+ <link rel="stylesheet" href="../../themes/mandelbrot/css/highlight.css?cachebust=1.4.0" type="text/css">
23
+
24
+
25
+ <title>Spacing | Milestone Web Design System</title>
26
+
27
+ </head>
28
+ <body>
29
+
30
+
31
+
32
+ <div class="Frame" id="frame">
33
+
34
+ <div class="Frame-header">
35
+ <div class="Header">
36
+ <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&display=swap" rel="stylesheet">
37
+ <button class="Header-button Header-navToggle" data-action="toggle-sidebar">
38
+ <svg class="Header-navToggleIcon Header-navToggleIcon--open" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
39
+ <path d="M0 0h24v24H0z" fill="none"></path>
40
+ <path d="M19 6.4L17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12z"></path>
41
+ </svg>
42
+ <svg class="Header-navToggleIcon Header-navToggleIcon--closed" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
43
+ <path d="M0 0h24v24H0z" fill="none"></path>
44
+ <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
45
+ </svg>
46
+ </button>
47
+ <div class="flex-child-header-txt">
48
+ <a href="../../index.html" class="Header-title" data-pjax>
49
+ <img class="logo-test" src="../../src/demo-img/milestone-logo-white.png" alt="logo"></a>
50
+ </a>
51
+ <h6 class="header-txt ">Digital Design System</h6>
52
+ </div>
53
+ <div class="github-milestone-system">
54
+ <a class="github-milestonesys-design-system" href="https://github.com/milestone-sys/web-design-system" target="_blank">
55
+ <img class="git-icon" src="../../src/demo-img/giticon.png" alt="git icon"></a>
56
+ </a>
57
+ </div>
58
+ </div>
59
+ </div>
60
+
61
+ <div class="Frame-body" data-role="body">
62
+
63
+ <div class="Frame-panel Frame-panel--main" data-role="main">
64
+ <div class="Frame-inner" id="pjax-container">
65
+
66
+
67
+ <div class="Document">
68
+
69
+ <div class="Document-header">
70
+
71
+ <h1 class="Document-title">Spacing</h1>
72
+
73
+
74
+
75
+
76
+ </div>
77
+
78
+ <div class="Document-content">
79
+
80
+
81
+
82
+ <div class="Prose">
83
+
84
+
85
+
86
+
87
+
88
+ <h2 id="in-this-section-we-are-going-to-give-you-an-overview-of-how-milestone-systems-web-application-spacing-are-defined">In this section, we are going to give you an overview of how Milestone Systems web application spacing are defined.</h2>
89
+ <h3 id="table-of-contents">Table of contents</h3>
90
+ <div class="row">
91
+ <div class="col-md-6">
92
+ <ul class="document__unordered-list">
93
+ <li class="document__unordered-list-item"><a class="msds-link" href="#overview">Overview</a></li>
94
+ <li class="document__unordered-list-item">
95
+ <a class="msds-link" href="#global-spacing-definitions">Global Spacing Definitions</a>
96
+ </li>
97
+ <li class="document__unordered-list-item">
98
+ <a class="msds-link" href="#section-spacing-definitions">Section Spacing definitions</a>
99
+ <ul class="document__unordered-list">
100
+ <li class="document__unordered-list-item">
101
+ <a class="msds-link" href="#large-spacing-definitions">Large Spacing Definitions</a>
102
+ </li>
103
+ <li class="document__unordered-list-item">
104
+ <a class="msds-link" href="#medium-spacing-definitions">Medium Spacing Definitions</a>
105
+ </li>
106
+ <li class="document__unordered-list-item">
107
+ <a class="msds-link" href="#small-spacing-definitions">Small Spacing Definitions</a>
108
+ </li>
109
+ </ul>
110
+ </li>
111
+ </ul>
112
+ </div>
113
+ </div>
114
+
115
+ <h2 id="overview">Overview</h2>
116
+ <p>Milestone Systems web systems spacing are globally defined on bootstrap definitions as described in the global spacing definitions below. Concerning global spacing definitions, you will need to install boostrap 4 or above.</p>
117
+ <p>Besides these global spacing definitions, there is also section spacing which is not based on bootstrap and has its own definitions.</p>
118
+ <h2 id="global-spacing-definitions">Global spacing definitions</h2>
119
+ <p>The global spacing definitions, which represents margin and padding, are based on bootstrap 4 margin and padding utilities classes definitions.</p>
120
+ <p>All definitions follow bootstrap breakpoints abbreviations except xs. The remaining breakpoints will include a breakpoint abbreviation and they are defined as follow:
121
+ </br></br></p>
122
+ <p>The CSS utilities classes are named using the following formats</p>
123
+ <ul>
124
+ <li>For <strong class="msds-text-clear-blue">xs</strong>, it will defined as such <strong>{type}{orientations}-{size}</strong></li>
125
+ <li>For the rest, <strong class="msds-text-clear-blue">sm, md, lg, and xl</strong>, it will defined as such <strong>{type}{orientations}-{breakpoint}-{size}</strong></li>
126
+ </ul>
127
+ </br>
128
+ <p>The <strong><i>type</i></strong> is defined as follow:</p>
129
+ <ul>
130
+ <li><strong class="msds-text-clear-blue">"m"</strong> for classes that set <strong>margin</strong></li>
131
+ <li><strong class="msds-text-clear-blue">"p"</strong> for classes that set <strong>padding</strong></li>
132
+ </ul>
133
+ </br>
134
+ <p>The <strong><i>orientations</i></strong> are defined as follow:</p>
135
+ <ul>
136
+ <li><strong class="msds-text-clear-blue">"t"</strong> will set <strong>margin-top or padding-top</strong></li>
137
+ <li><strong class="msds-text-clear-blue">"b"</strong> will set <strong>margin-bottom or padding-bottom</strong></li>
138
+ <li><strong class="msds-text-clear-blue">"l"</strong> will set <strong>margin-left or padding-left</strong></li>
139
+ <li><strong class="msds-text-clear-blue">"r"</strong> will set <strong>margin-right or padding-right</strong></li>
140
+ <li><strong class="msds-text-clear-blue">"x"</strong> will set <strong>both *-left and *-right</strong></li>
141
+ <li><strong class="msds-text-clear-blue">"y"</strong> will set <strong>both *-top and *-bottom</strong></li>
142
+ <li><strong class="msds-text-clear-blue">"blank"</strong> will set <strong>margin or padding on all 4 orientations</strong> of the specified element</li>
143
+ </ul>
144
+ </br>
145
+ <p>The <strong><i>size</i></strong> is defined as follow:</p>
146
+ <ul>
147
+ <li><strong class="msds-text-clear-blue">"auto"</strong> will set the margin to <strong>auto</strong></li>
148
+ <li><strong class="msds-text-clear-blue">"0"</strong> will remove any margin or padding by setting it to <strong>0</strong></li>
149
+ <li><strong class="msds-text-clear-blue">"1"</strong> will set margin or padding to <strong>4px</strong></li>
150
+ <li><strong class="msds-text-clear-blue">"2"</strong> will set the margin or padding to <strong>8px</strong></li>
151
+ <li><strong class="msds-text-clear-blue">"3"</strong> will set the margin or padding to <strong>12px</strong></li>
152
+ <li><strong class="msds-text-clear-blue">"4"</strong> will set the margin or padding to <strong>16px</strong></li>
153
+ <li><strong class="msds-text-clear-blue">"5"</strong> will set the margin or padding to <strong>20px</strong></li>
154
+ <li><strong class="msds-text-clear-blue">"6"</strong> will set the margin or padding to <strong>24px</strong></li>
155
+ <li><strong class="msds-text-clear-blue">"7"</strong> will set the margin or padding to <strong>32px</strong></li>
156
+ <li><strong class="msds-text-clear-blue">"8"</strong> will set the margin or padding to <strong>40px</strong></li>
157
+ <li><strong class="msds-text-clear-blue">"9"</strong> will set the margin or padding to <strong>48px</strong></li>
158
+ <li><strong class="msds-text-clear-blue">"10"</strong> will set the margin or padding to <strong>64px</strong></li>
159
+ <li><strong class="msds-text-clear-blue">"11"</strong> will set the margin or padding to <strong>80px</strong></li>
160
+ <li><strong class="msds-text-clear-blue">"12"</strong> will set the margin or padding to <strong>96px</strong></li>
161
+ <li><strong class="msds-text-clear-blue">"13"</strong> will set the margin or padding to <strong>112px</strong></li>
162
+ <li><strong class="msds-text-clear-blue">"14"</strong> will set the margin or padding to <strong>128px</strong></li>
163
+ <li><strong class="msds-text-clear-blue">"15"</strong> will set the margin or padding to <strong>160px</strong></li>
164
+ </ul>
165
+ </br>
166
+ Note: For more information about bootstrap margin and padding definitions, please go to bootstrap spacing page <a href="https://getbootstrap.com/docs/4.0/utilities/spacing/" target="_blank">here</a>.
167
+
168
+ <h2 id="section-spacing-definitions">Section Spacing Definitions</h2>
169
+ <p>The section spacing is not based on Bootstrap 4 spacing definitions. it has its own and is devided in 3, Large, Medium and Small definitions. For each of them, there will be a specific padding definition for desktop, tablet and mobile devices.</p>
170
+ <p>Basically, the section spacing consists of 3 distinct CSS classes definitions:</p>
171
+ <ul>
172
+ <li><strong class="msds-text-clear-blue">msds-block-padding-large</strong></li>
173
+ <li><strong class="msds-text-clear-blue">msds-block-padding-medium</strong></li>
174
+ <li><strong class="msds-text-clear-blue">msds-block-padding-small</strong></li>
175
+ </ul>
176
+ </br>
177
+ <p>For each of the following section, The blue areas represent the section spacing and based on the CSS class used will adapt to device automatically.</p>
178
+
179
+ <p>Also, remember that </p>
180
+ <ul>
181
+ <li><strong>Desktop</strong> represents screens superior or equivalent than 992px.</li>
182
+ <li><strong>Tablets</strong> represents screens superior or equivalent than 769px and inferior than 992px.</li>
183
+ <li><strong>Mobile</strong> represents screens inferior than 769px.</li>
184
+ </ul>
185
+
186
+
187
+ <h3 id="large-spacing-definitions">Large Spacing Definitions</h3>
188
+ <p>Below is the “Large” definitions for sections where the section is using the “msds-block-padding-large” CSS class. </p>
189
+ <div class="element-preview">
190
+ <div class="element-preview__inner"><div class="container">
191
+ <div class="row">
192
+ <div class="col-12">
193
+ <h2 class="msds-text-header-2-bold">Large Spacing - Desktop</h2>
194
+ <div class="section-spacing section-spacing--large-desktop msds-bg-gray-4">
195
+ <div class="msds-text-header-2-bold mb-4">PREVENT. PROTECT. PROVE.</div>
196
+ <div class="msds-text-body-1">
197
+ Milestone XProtect® video management software (VMS) brings all the puzzle pieces for video surveillance together in a perfect combination to create a solution that keeps people and property safe today – and tomorrow.
198
+ </div>
199
+ </div>
200
+ </div>
201
+ <div class="col-8">
202
+ <h2 class="msds-text-header-2-bold mt-10">Large Spacing - Tablets</h2>
203
+ <div class="section-spacing section-spacing--large-tablet msds-bg-gray-4">
204
+ <div class="msds-text-header-2-bold mb-4">PREVENT. PROTECT. PROVE.</div>
205
+ <div class="msds-text-body-1">
206
+ Milestone XProtect® video management software (VMS) brings all the puzzle pieces for video surveillance together in a perfect combination to create a solution that keeps people and property safe today – and tomorrow.
207
+ </div>
208
+ </div>
209
+ </div>
210
+ <div class="col-4">
211
+ <h2 class="msds-text-header-2-bold mt-10">Large Spacing - Mobile</h2>
212
+ <div class="section-spacing section-spacing--large-mobile msds-bg-gray-4">
213
+ <div class="msds-text-header-2-bold mb-4">PREVENT. PROTECT. PROVE.</div>
214
+ <div class="msds-text-body-1">
215
+ Milestone XProtect® video management software (VMS) brings all the puzzle pieces for video surveillance together in a perfect combination to create a solution that keeps people and property safe today – and tomorrow.
216
+ </div>
217
+ </div>
218
+ </div>
219
+ </div>
220
+ </div></div>
221
+ </div>
222
+
223
+ </br>
224
+ Try out the "Large" section spacing implementation by resizing the client window or any repsonsive/developer tools to select the different screen sizes.
225
+
226
+ <div class="element-preview">
227
+ <div class="element-preview__inner"><div class="msds-bg-clear-blue">
228
+ <div class="container">
229
+ <div class="row">
230
+ <div class="col-12">
231
+ <div class="msds-block-padding-large msds-text-white">
232
+ <div class="msds-text-header-2-bold mb-4">PREVENT. PROTECT. PROVE.</div>
233
+ <div class="msds-text-body-1">
234
+ Milestone XProtect® video management software (VMS) brings all the puzzle pieces for video surveillance together in a perfect combination to create a solution that keeps people and property safe today – and tomorrow.
235
+ </div>
236
+ </div>
237
+ </div>
238
+ </div>
239
+ </div>
240
+ </div></div>
241
+ </div>
242
+
243
+ <pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-bg-clear-blue"</span>&gt;</span>
244
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>&gt;</span>
245
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>&gt;</span>
246
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-12"</span>&gt;</span>
247
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-block-padding-large msds-text-white"</span>&gt;</span>
248
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-text-header-2-bold mb-4"</span>&gt;</span>PREVENT. PROTECT. PROVE.<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
249
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-text-body-1"</span>&gt;</span>
250
+ Milestone XProtect® video management software (VMS) brings all the puzzle pieces for video surveillance together in a perfect combination to create a solution that keeps people and property safe today – and tomorrow.
251
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
252
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
253
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
254
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
255
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
256
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre><h3 id="medium-spacing-definitions">Medium Spacing Definitions</h3>
257
+ <p>Below is the “Medium” definitions for sections where the section is using the “msds-block-padding-medium” CSS class.</p>
258
+ <div class="element-preview">
259
+ <div class="element-preview__inner"><div class="container">
260
+ <div class="row">
261
+ <div class="col-12">
262
+ <h2 class="msds-text-header-2-bold">Medium Spacing - Desktop</h2>
263
+ <div class="section-spacing section-spacing--medium-desktop msds-bg-gray-4">
264
+ <div class="msds-text-header-2-bold mb-4">PREVENT. PROTECT. PROVE.</div>
265
+ <div class="msds-text-body-1">
266
+ Milestone XProtect® video management software (VMS) brings all the puzzle pieces for video surveillance together in a perfect combination to create a solution that keeps people and property safe today – and tomorrow.
267
+ </div>
268
+ </div>
269
+ </div>
270
+ <div class="col-8">
271
+ <h2 class="msds-text-header-2-bold mt-10">Medium Spacing - Tablets</h2>
272
+ <div class="section-spacing section-spacing--medium-tablet msds-bg-gray-4">
273
+ <div class="msds-text-header-2-bold mb-4">PREVENT. PROTECT. PROVE.</div>
274
+ <div class="msds-text-body-1">
275
+ Milestone XProtect® video management software (VMS) brings all the puzzle pieces for video surveillance together in a perfect combination to create a solution that keeps people and property safe today – and tomorrow.
276
+ </div>
277
+ </div>
278
+ </div>
279
+ <div class="col-4">
280
+ <h2 class="msds-text-header-2-bold mt-10">Medium Spacing - Mobile</h2>
281
+ <div class="section-spacing section-spacing--medium-mobile msds-bg-gray-4">
282
+ <div class="msds-text-header-2-bold mb-4">PREVENT. PROTECT. PROVE.</div>
283
+ <div class="msds-text-body-1">
284
+ Milestone XProtect® video management software (VMS) brings all the puzzle pieces for video surveillance together in a perfect combination to create a solution that keeps people and property safe today – and tomorrow.
285
+ </div>
286
+ </div>
287
+ </div>
288
+ </div>
289
+ </div></div>
290
+ </div>
291
+
292
+ </br>
293
+ Try out the "Medium" section spacing implementation by resizing the client window or any repsonsive/developer tools to select the different screen sizes.
294
+
295
+ <div class="element-preview">
296
+ <div class="element-preview__inner"><div class="msds-bg-clear-blue">
297
+ <div class="container">
298
+ <div class="row">
299
+ <div class="col-12">
300
+ <div class="msds-block-padding-medium msds-text-white">
301
+ <div class="msds-text-header-2-bold mb-4">PREVENT. PROTECT. PROVE.</div>
302
+ <div class="msds-text-body-1">
303
+ Milestone XProtect® video management software (VMS) brings all the puzzle pieces for video surveillance together in a perfect combination to create a solution that keeps people and property safe today – and tomorrow.
304
+ </div>
305
+ </div>
306
+ </div>
307
+ </div>
308
+ </div>
309
+ </div></div>
310
+ </div>
311
+
312
+ <pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-bg-clear-blue"</span>&gt;</span>
313
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>&gt;</span>
314
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>&gt;</span>
315
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-12"</span>&gt;</span>
316
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-block-padding-medium msds-text-white"</span>&gt;</span>
317
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-text-header-2-bold mb-4"</span>&gt;</span>PREVENT. PROTECT. PROVE.<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
318
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-text-body-1"</span>&gt;</span>
319
+ Milestone XProtect® video management software (VMS) brings all the puzzle pieces for video surveillance together in a perfect combination to create a solution that keeps people and property safe today – and tomorrow.
320
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
321
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
322
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
323
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
324
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
325
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre><h3 id="small-spacing-definitions">Small Spacing Definitions</h3>
326
+ <p>Below is the “Small” definitions for sections where the section is using the “msds-block-padding-small” CSS class.</p>
327
+ <div class="element-preview">
328
+ <div class="element-preview__inner"><div class="container">
329
+ <div class="row">
330
+ <div class="col-12">
331
+ <h2 class="msds-text-header-2-bold">Small spacing - Desktop</h2>
332
+ <div class="section-spacing section-spacing--small-desktop msds-bg-gray-4">
333
+ <div class="msds-text-header-2-bold mb-4">PREVENT. PROTECT. PROVE.</div>
334
+ <div class="msds-text-body-1">
335
+ Milestone XProtect® video management software (VMS) brings all the puzzle pieces for video surveillance together in a perfect combination to create a solution that keeps people and property safe today – and tomorrow.
336
+ </div>
337
+ </div>
338
+ </div>
339
+ <div class="col-8">
340
+ <h2 class="msds-text-header-2-bold mt-10">Small spacing - Tablets</h2>
341
+ <div class="section-spacing section-spacing--small-tablet msds-bg-gray-4">
342
+ <div class="msds-text-header-2-bold mb-4">PREVENT. PROTECT. PROVE.</div>
343
+ <div class="msds-text-body-1">
344
+ Milestone XProtect® video management software (VMS) brings all the puzzle pieces for video surveillance together in a perfect combination to create a solution that keeps people and property safe today – and tomorrow.
345
+ </div>
346
+ </div>
347
+ </div>
348
+ <div class="col-4">
349
+ <h2 class="msds-text-header-2-bold mt-10">Small spacing - Mobile</h2>
350
+ <div class="section-spacing section-spacing--small-mobile msds-bg-gray-4">
351
+ <div class="msds-text-header-2-bold mb-4">PREVENT. PROTECT. PROVE.</div>
352
+ <div class="msds-text-body-1">
353
+ Milestone XProtect® video management software (VMS) brings all the puzzle pieces for video surveillance together in a perfect combination to create a solution that keeps people and property safe today – and tomorrow.
354
+ </div>
355
+ </div>
356
+ </div>
357
+ </div>
358
+ </div>
359
+ <style>
360
+
361
+ <p></style></div></p>
362
+ </div>
363
+
364
+ </br>
365
+ Try out the "Small" section spacing implementation by resizing the client window or any repsonsive/developer tools to select the different screen sizes.
366
+
367
+ <div class="element-preview">
368
+ <div class="element-preview__inner"><div class="msds-bg-clear-blue">
369
+ <div class="container">
370
+ <div class="row">
371
+ <div class="col-12">
372
+ <div class="msds-block-padding-small msds-text-white">
373
+ <div class="msds-text-header-2-bold mb-4">PREVENT. PROTECT. PROVE.</div>
374
+ <div class="msds-text-body-1">
375
+ Milestone XProtect® video management software (VMS) brings all the puzzle pieces for video surveillance together in a perfect combination to create a solution that keeps people and property safe today – and tomorrow.
376
+ </div>
377
+ </div>
378
+ </div>
379
+ </div>
380
+ </div>
381
+ </div></div>
382
+ </div>
383
+
384
+ <pre><code class="hljs language-html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-bg-clear-blue"</span>&gt;</span>
385
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>&gt;</span>
386
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>&gt;</span>
387
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-12"</span>&gt;</span>
388
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-block-padding-small msds-text-white"</span>&gt;</span>
389
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-text-header-2-bold mb-4"</span>&gt;</span>PREVENT. PROTECT. PROVE.<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
390
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-text-body-1"</span>&gt;</span>
391
+ Milestone XProtect® video management software (VMS) brings all the puzzle pieces for video surveillance together in a perfect combination to create a solution that keeps people and property safe today – and tomorrow.
392
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
393
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
394
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
395
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
396
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
397
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
398
+
399
+
400
+
401
+ </div>
402
+
403
+
404
+
405
+ </div>
406
+
407
+ </div>
408
+
409
+
410
+ </div>
411
+ </div>
412
+
413
+ <div class="Frame-handle" data-role="frame-resize-handle"></div>
414
+
415
+ <div class="Frame-panel Frame-panel--sidebar" data-role="sidebar">
416
+ <nav class="Navigation">
417
+
418
+
419
+ <div class="Navigation-group">
420
+
421
+ <div class="Tree" data-behaviour="tree" id="tree-components">
422
+ <div class="Tree-header">
423
+ <h3 class="Tree-title">components</h3>
424
+
425
+ <button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden>
426
+ <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z"/><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z"/></svg>
427
+
428
+ </button>
429
+ </div>
430
+ <ul class="Tree-items Tree-depth-1">
431
+
432
+
433
+
434
+
435
+ <li class="Tree-item Tree-entity" data-role="item">
436
+ <a class="Tree-entityLink" href="../../components/detail/tab-tile.html" data-pjax>
437
+ <span>Tab Tile</span>
438
+
439
+
440
+ <div class="Status Status--unlabelled">
441
+
442
+ <div class="Status-dots">
443
+
444
+
445
+ <span class="Status-dot" style="border-color: #FF9233;" title="WIP"></span>
446
+
447
+
448
+ </div>
449
+
450
+ </div>
451
+
452
+
453
+ </a>
454
+ </li>
455
+
456
+
457
+
458
+ </ul>
459
+ </div>
460
+
461
+ </div>
462
+
463
+
464
+
465
+
466
+ <div class="Navigation-group">
467
+
468
+ <div class="Tree" data-behaviour="tree" id="tree-docs">
469
+ <div class="Tree-header">
470
+ <h3 class="Tree-title">documentation</h3>
471
+
472
+ <button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden>
473
+ <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z"/><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z"/></svg>
474
+
475
+ </button>
476
+ </div>
477
+ <ul class="Tree-items Tree-depth-1">
478
+
479
+
480
+
481
+
482
+ <li class="Tree-item Tree-entity" data-role="item">
483
+ <a class="Tree-entityLink" href="../../index.html" data-pjax>
484
+ <span>Overview</span>
485
+
486
+ </a>
487
+ </li>
488
+
489
+
490
+
491
+ <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-docs-collection-content">
492
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-content-items">
493
+ Content
494
+ </button>
495
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-content-items">
496
+
497
+
498
+
499
+
500
+
501
+
502
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-icons">
503
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-icons-items">
504
+ Icons
505
+ </button>
506
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-icons-items">
507
+
508
+
509
+
510
+
511
+
512
+
513
+
514
+ <li class="Tree-item Tree-entity" data-role="item">
515
+ <a class="Tree-entityLink" href="../content/icons/-overview.html" data-pjax>
516
+ <span>Overview</span>
517
+
518
+ </a>
519
+ </li>
520
+
521
+
522
+
523
+
524
+ <li class="Tree-item Tree-entity" data-role="item">
525
+ <a class="Tree-entityLink" href="../content/icons/icons-flat.html" data-pjax>
526
+ <span>Icons Flat</span>
527
+
528
+ </a>
529
+ </li>
530
+
531
+
532
+
533
+
534
+ <li class="Tree-item Tree-entity" data-role="item">
535
+ <a class="Tree-entityLink" href="../content/icons/icons-rich.html" data-pjax>
536
+ <span>Icons Rich</span>
537
+
538
+ </a>
539
+ </li>
540
+
541
+
542
+
543
+ </ul>
544
+ </li>
545
+
546
+
547
+
548
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-typography">
549
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-typography-items">
550
+ Typography
551
+ </button>
552
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-typography-items">
553
+
554
+
555
+
556
+
557
+
558
+
559
+
560
+ <li class="Tree-item Tree-entity" data-role="item">
561
+ <a class="Tree-entityLink" href="../content/typography/-overview.html" data-pjax>
562
+ <span>Overview</span>
563
+
564
+ </a>
565
+ </li>
566
+
567
+
568
+
569
+
570
+ <li class="Tree-item Tree-entity" data-role="item">
571
+ <a class="Tree-entityLink" href="../content/typography/font-colors.html" data-pjax>
572
+ <span>Font Colors</span>
573
+
574
+ </a>
575
+ </li>
576
+
577
+
578
+
579
+
580
+ <li class="Tree-item Tree-entity" data-role="item">
581
+ <a class="Tree-entityLink" href="../content/typography/links.html" data-pjax>
582
+ <span>Links</span>
583
+
584
+ </a>
585
+ </li>
586
+
587
+
588
+
589
+
590
+ <li class="Tree-item Tree-entity" data-role="item">
591
+ <a class="Tree-entityLink" href="../content/typography/lists.html" data-pjax>
592
+ <span>Lists</span>
593
+
594
+ </a>
595
+ </li>
596
+
597
+
598
+
599
+
600
+ <li class="Tree-item Tree-entity" data-role="item">
601
+ <a class="Tree-entityLink" href="../content/typography/text.html" data-pjax>
602
+ <span>Text</span>
603
+
604
+ </a>
605
+ </li>
606
+
607
+
608
+
609
+ </ul>
610
+ </li>
611
+
612
+
613
+
614
+ </ul>
615
+ </li>
616
+
617
+
618
+
619
+ <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-docs-collection-component-documentation">
620
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-component-documentation-items">
621
+ Component Documentation
622
+ </button>
623
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-component-documentation-items">
624
+
625
+
626
+
627
+
628
+
629
+
630
+
631
+ <li class="Tree-item Tree-entity" data-role="item">
632
+ <a class="Tree-entityLink" href="../component-documentation/alerts.html" data-pjax>
633
+ <span>Alerts</span>
634
+
635
+ </a>
636
+ </li>
637
+
638
+
639
+
640
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-buttons">
641
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-buttons-items">
642
+ Buttons
643
+ </button>
644
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-buttons-items">
645
+
646
+
647
+
648
+
649
+
650
+
651
+
652
+ <li class="Tree-item Tree-entity" data-role="item">
653
+ <a class="Tree-entityLink" href="../component-documentation/buttons/buttons.html" data-pjax>
654
+ <span>Buttons</span>
655
+
656
+ </a>
657
+ </li>
658
+
659
+
660
+
661
+
662
+ <li class="Tree-item Tree-entity" data-role="item">
663
+ <a class="Tree-entityLink" href="../component-documentation/buttons/buttons-floating.html" data-pjax>
664
+ <span>Buttons Floating</span>
665
+
666
+ </a>
667
+ </li>
668
+
669
+
670
+
671
+ </ul>
672
+ </li>
673
+
674
+
675
+
676
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-cards">
677
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-cards-items">
678
+ Cards
679
+ </button>
680
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-cards-items">
681
+
682
+
683
+
684
+
685
+
686
+
687
+
688
+ <li class="Tree-item Tree-entity" data-role="item">
689
+ <a class="Tree-entityLink" href="../component-documentation/cards/basic-cards.html" data-pjax>
690
+ <span>Basic Cards</span>
691
+
692
+ </a>
693
+ </li>
694
+
695
+
696
+
697
+
698
+ <li class="Tree-item Tree-entity" data-role="item">
699
+ <a class="Tree-entityLink" href="../component-documentation/cards/category-cards.html" data-pjax>
700
+ <span>Category Cards</span>
701
+
702
+ </a>
703
+ </li>
704
+
705
+
706
+
707
+
708
+ <li class="Tree-item Tree-entity" data-role="item">
709
+ <a class="Tree-entityLink" href="../component-documentation/cards/contact-cards.html" data-pjax>
710
+ <span>Contact Cards</span>
711
+
712
+ </a>
713
+ </li>
714
+
715
+
716
+
717
+
718
+ <li class="Tree-item Tree-entity" data-role="item">
719
+ <a class="Tree-entityLink" href="../component-documentation/cards/generic-cards.html" data-pjax>
720
+ <span>Generic Cards</span>
721
+
722
+ </a>
723
+ </li>
724
+
725
+
726
+
727
+
728
+ <li class="Tree-item Tree-entity" data-role="item">
729
+ <a class="Tree-entityLink" href="../component-documentation/cards/solution-cards.html" data-pjax>
730
+ <span>Solution Cards</span>
731
+
732
+ </a>
733
+ </li>
734
+
735
+
736
+
737
+ </ul>
738
+ </li>
739
+
740
+
741
+
742
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-dividers">
743
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-dividers-items">
744
+ Dividers
745
+ </button>
746
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-dividers-items">
747
+
748
+
749
+
750
+
751
+
752
+
753
+
754
+ <li class="Tree-item Tree-entity" data-role="item">
755
+ <a class="Tree-entityLink" href="../component-documentation/dividers/dividers.html" data-pjax>
756
+ <span>Dividers</span>
757
+
758
+ </a>
759
+ </li>
760
+
761
+
762
+
763
+ </ul>
764
+ </li>
765
+
766
+
767
+
768
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-expanding-components">
769
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-expanding-components-items">
770
+ Expanding Components
771
+ </button>
772
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-expanding-components-items">
773
+
774
+
775
+
776
+
777
+
778
+
779
+
780
+ <li class="Tree-item Tree-entity" data-role="item">
781
+ <a class="Tree-entityLink" href="../component-documentation/expanding-components/accordion.html" data-pjax>
782
+ <span>Accordion</span>
783
+
784
+ </a>
785
+ </li>
786
+
787
+
788
+
789
+
790
+ <li class="Tree-item Tree-entity" data-role="item">
791
+ <a class="Tree-entityLink" href="../component-documentation/expanding-components/section.html" data-pjax>
792
+ <span>Section</span>
793
+
794
+ </a>
795
+ </li>
796
+
797
+
798
+
799
+ </ul>
800
+ </li>
801
+
802
+
803
+
804
+
805
+ <li class="Tree-item Tree-entity" data-role="item">
806
+ <a class="Tree-entityLink" href="../component-documentation/modal.html" data-pjax>
807
+ <span>Modal</span>
808
+
809
+ </a>
810
+ </li>
811
+
812
+
813
+
814
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-popover">
815
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-popover-items">
816
+ Popover
817
+ </button>
818
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-popover-items">
819
+
820
+
821
+
822
+
823
+
824
+
825
+
826
+ <li class="Tree-item Tree-entity" data-role="item">
827
+ <a class="Tree-entityLink" href="../component-documentation/popover/popover.html" data-pjax>
828
+ <span>Popover</span>
829
+
830
+ </a>
831
+ </li>
832
+
833
+
834
+
835
+ </ul>
836
+ </li>
837
+
838
+
839
+
840
+
841
+ <li class="Tree-item Tree-entity" data-role="item">
842
+ <a class="Tree-entityLink" href="../component-documentation/progress-bar.html" data-pjax>
843
+ <span>Progress Bar</span>
844
+
845
+ </a>
846
+ </li>
847
+
848
+
849
+
850
+
851
+ <li class="Tree-item Tree-entity" data-role="item">
852
+ <a class="Tree-entityLink" href="../component-documentation/spacing.html" data-pjax>
853
+ <span>Spacing</span>
854
+
855
+ </a>
856
+ </li>
857
+
858
+
859
+
860
+
861
+ <li class="Tree-item Tree-entity" data-role="item">
862
+ <a class="Tree-entityLink" href="../component-documentation/table.html" data-pjax>
863
+ <span>Table</span>
864
+
865
+ </a>
866
+ </li>
867
+
868
+
869
+
870
+ </ul>
871
+ </li>
872
+
873
+
874
+
875
+ <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-docs-collection-forms">
876
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-forms-items">
877
+ Forms
878
+ </button>
879
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-forms-items">
880
+
881
+
882
+
883
+
884
+
885
+
886
+
887
+ <li class="Tree-item Tree-entity" data-role="item">
888
+ <a class="Tree-entityLink" href="../forms/-overview.html" data-pjax>
889
+ <span>Overview</span>
890
+
891
+ </a>
892
+ </li>
893
+
894
+
895
+
896
+
897
+ <li class="Tree-item Tree-entity" data-role="item">
898
+ <a class="Tree-entityLink" href="../forms/checkbox.html" data-pjax>
899
+ <span>Checkbox</span>
900
+
901
+ </a>
902
+ </li>
903
+
904
+
905
+
906
+
907
+ <li class="Tree-item Tree-entity" data-role="item">
908
+ <a class="Tree-entityLink" href="../forms/drop-down-list.html" data-pjax>
909
+ <span>Drop Down List</span>
910
+
911
+ </a>
912
+ </li>
913
+
914
+
915
+
916
+
917
+ <li class="Tree-item Tree-entity" data-role="item">
918
+ <a class="Tree-entityLink" href="../forms/input-field.html" data-pjax>
919
+ <span>Input Field</span>
920
+
921
+ </a>
922
+ </li>
923
+
924
+
925
+
926
+
927
+ <li class="Tree-item Tree-entity" data-role="item">
928
+ <a class="Tree-entityLink" href="../forms/radio-button.html" data-pjax>
929
+ <span>Radio Button</span>
930
+
931
+ </a>
932
+ </li>
933
+
934
+
935
+
936
+
937
+ <li class="Tree-item Tree-entity" data-role="item">
938
+ <a class="Tree-entityLink" href="../forms/switch.html" data-pjax>
939
+ <span>Switch</span>
940
+
941
+ </a>
942
+ </li>
943
+
944
+
945
+
946
+
947
+ <li class="Tree-item Tree-entity" data-role="item">
948
+ <a class="Tree-entityLink" href="../forms/text-area.html" data-pjax>
949
+ <span>Text Area</span>
950
+
951
+ </a>
952
+ </li>
953
+
954
+
955
+
956
+ </ul>
957
+ </li>
958
+
959
+
960
+
961
+ <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-docs-collection-utilities">
962
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-utilities-items">
963
+ Utilities
964
+ </button>
965
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-utilities-items">
966
+
967
+
968
+
969
+
970
+
971
+
972
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-colors">
973
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-colors-items">
974
+ Colors
975
+ </button>
976
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-colors-items">
977
+
978
+
979
+
980
+
981
+
982
+
983
+
984
+ <li class="Tree-item Tree-entity" data-role="item">
985
+ <a class="Tree-entityLink" href="colors/overview.html" data-pjax>
986
+ <span>Overview</span>
987
+
988
+ </a>
989
+ </li>
990
+
991
+
992
+
993
+
994
+ <li class="Tree-item Tree-entity" data-role="item">
995
+ <a class="Tree-entityLink" href="colors/font-colors.html" data-pjax>
996
+ <span>Font Colors</span>
997
+
998
+ </a>
999
+ </li>
1000
+
1001
+
1002
+
1003
+
1004
+ <li class="Tree-item Tree-entity" data-role="item">
1005
+ <a class="Tree-entityLink" href="colors/background-colors.html" data-pjax>
1006
+ <span>Background Colors</span>
1007
+
1008
+ </a>
1009
+ </li>
1010
+
1011
+
1012
+
1013
+ </ul>
1014
+ </li>
1015
+
1016
+
1017
+
1018
+
1019
+ <li class="Tree-item Tree-entity is-current" data-state="current" data-role="item">
1020
+ <a class="Tree-entityLink" href="" data-pjax>
1021
+ <span>Spacing</span>
1022
+
1023
+ </a>
1024
+ </li>
1025
+
1026
+
1027
+
1028
+ </ul>
1029
+ </li>
1030
+
1031
+
1032
+
1033
+ <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-docs-collection-guidelines-and-guides">
1034
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-guidelines-and-guides-items">
1035
+ Guidelines And Guides
1036
+ </button>
1037
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-guidelines-and-guides-items">
1038
+
1039
+
1040
+
1041
+
1042
+
1043
+
1044
+
1045
+ <li class="Tree-item Tree-entity" data-role="item">
1046
+ <a class="Tree-entityLink" href="../guidelines-and-guides/creating-a-new-release.html" data-pjax>
1047
+ <span>Creating A New Release</span>
1048
+
1049
+ </a>
1050
+ </li>
1051
+
1052
+
1053
+
1054
+
1055
+ <li class="Tree-item Tree-entity" data-role="item">
1056
+ <a class="Tree-entityLink" href="../guidelines-and-guides/css-and-scss-guidelines.html" data-pjax>
1057
+ <span>Css And Scss Guidelines</span>
1058
+
1059
+ </a>
1060
+ </li>
1061
+
1062
+
1063
+
1064
+
1065
+ <li class="Tree-item Tree-entity" data-role="item">
1066
+ <a class="Tree-entityLink" href="../guidelines-and-guides/git-cheat-sheet.html" data-pjax>
1067
+ <span>Git Cheat Sheet</span>
1068
+
1069
+ </a>
1070
+ </li>
1071
+
1072
+
1073
+
1074
+
1075
+ <li class="Tree-item Tree-entity" data-role="item">
1076
+ <a class="Tree-entityLink" href="../guidelines-and-guides/installation-and-usage.html" data-pjax>
1077
+ <span>Installation And Usage</span>
1078
+
1079
+ </a>
1080
+ </li>
1081
+
1082
+
1083
+
1084
+ </ul>
1085
+ </li>
1086
+
1087
+
1088
+
1089
+ </ul>
1090
+ </div>
1091
+
1092
+ </div>
1093
+
1094
+
1095
+
1096
+ </nav>
1097
+
1098
+ </div>
1099
+ </div>
1100
+ </div>
1101
+
1102
+
1103
+
1104
+
1105
+ <script src="../../themes/mandelbrot/js/mandelbrot.js?cachebust=1.4.0"></script>
1106
+
1107
+ <script src="../../design-system.js?cachebust=1.4.0"></script>
1108
+
1109
+
1110
+
1111
+ </body>
1112
+ </html>