cronus-theme 2.0.88 → 2.0.90

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 (438) hide show
  1. package/Gulpfile.js +4 -3
  2. package/README.md +1 -12
  3. package/default/b2b/build/doc/doc.css +35 -2
  4. package/default/b2b/dist/css/account.css +1 -1
  5. package/default/b2b/dist/css/{account1733309885.css → account1734010254.css} +1 -1
  6. package/default/b2b/dist/css/addons/errorPages.css +1 -1
  7. package/default/b2b/dist/css/addons/fck.css +1 -1
  8. package/default/b2b/dist/css/addons/kss.css +1 -1
  9. package/default/b2b/dist/css/doc.css +1 -1
  10. package/default/b2b/dist/css/{doc1733309885.css → doc1734010254.css} +1 -1
  11. package/default/b2b/dist/css/main.css +1 -1
  12. package/default/b2b/dist/css/{main1733309885.css → main1734010254.css} +1 -1
  13. package/default/b2b/dist/css/order.css +1 -1
  14. package/default/b2b/dist/css/{order1733309885.css → order1734010254.css} +1 -1
  15. package/default/b2b/dist/css/salesperson.css +1 -1
  16. package/default/b2b/dist/css/{salesperson1733309885.css → salesperson1734010254.css} +1 -1
  17. package/default/b2b/dist/fonts/{icons1733309885.woff → icons1734010254.woff} +0 -0
  18. package/default/b2b/dist/fonts/icons1734010254.woff2 +0 -0
  19. package/default/b2b/dist/js/main.js +1 -1
  20. package/default/b2b/dist/js/main.js.map +2 -2
  21. package/default/b2b/dist/js/{main1733309885.js → main1734010254.js} +1 -1
  22. package/default/b2b/dist/snippets/css/account.html +1 -1
  23. package/default/b2b/dist/snippets/css/doc.html +1 -1
  24. package/default/b2b/dist/snippets/css/main.html +1 -1
  25. package/default/b2b/dist/snippets/css/order.html +1 -1
  26. package/default/b2b/dist/snippets/css/salesperson.html +1 -1
  27. package/default/b2b/dist/snippets/iconfont.html +1 -1
  28. package/default/b2b/dist/snippets/js/account.html +1 -1
  29. package/default/b2b/dist/snippets/js/itemcard.html +1 -1
  30. package/default/b2b/dist/snippets/js/main.html +1 -1
  31. package/default/b2b/dist/snippets/js/order.html +1 -1
  32. package/default/b2b/dist/snippets/js/salesperson.html +1 -1
  33. package/default/b2b/src/icons/{icons1733309885.woff → icons1734010254.woff} +0 -0
  34. package/default/b2b/src/icons/icons1734010254.woff2 +0 -0
  35. package/default/b2b/src/scss/base/_icons.scss +2 -2
  36. package/default/b2b/src/scss/main.scss +1 -0
  37. package/default/b2b/styleguide/item-components-skeleton.html +1 -1
  38. package/default/b2b/styleguide/item-shop-account-infobox.html +1 -1
  39. package/default/b2b/styleguide/item-shop-accountbox.html +1 -1
  40. package/default/b2b/styleguide/item-shop-amount-lines.html +1 -1
  41. package/default/b2b/styleguide/item-shop-attributes-icons.html +1 -1
  42. package/default/b2b/styleguide/item-shop-categorylist-itempreview.html +1 -1
  43. package/default/b2b/styleguide/item-shop-filter.html +1 -1
  44. package/default/b2b/styleguide/item-shop-itemlist-sticky-order-bar.html +1 -1
  45. package/default/b2b/styleguide/item-shop-list-type-switch.html +1 -1
  46. package/default/b2b/styleguide/item-shop-order-history-list.html +1 -1
  47. package/default/b2b/styleguide/item-shop-orderboxsummary.html +1 -1
  48. package/default/b2b/styleguide/item-shop-orderbutton.html +1 -1
  49. package/default/b2b/styleguide/item-shop-orderitemlist.html +1 -1
  50. package/default/b2b/styleguide/item-shop-selected-salesperson-box.html +1 -1
  51. package/default/b2b/styleguide/item-shop-sorting.html +1 -1
  52. package/default/b2b/styleguide/item-shop-variantselection.html +1 -1
  53. package/default/b2b/styleguide/section-components.html +1 -1
  54. package/default/b2b/styleguide/section-shop.html +15 -15
  55. package/default/b2b.yaml +2 -1
  56. package/default/b2c/build/doc/doc.css +35 -2
  57. package/default/b2c/dist/css/account.css +1 -1
  58. package/default/b2c/dist/css/{account1733309880.css → account1734010249.css} +1 -1
  59. package/default/b2c/dist/css/addons/errorPages.css +1 -1
  60. package/default/b2c/dist/css/addons/fck.css +1 -1
  61. package/default/b2c/dist/css/addons/kss.css +1 -1
  62. package/default/b2c/dist/css/doc.css +1 -1
  63. package/default/b2c/dist/css/{doc1733309880.css → doc1734010249.css} +1 -1
  64. package/default/b2c/dist/css/main.css +1 -1
  65. package/default/b2c/dist/css/{main1733309880.css → main1734010249.css} +1 -1
  66. package/default/b2c/dist/css/order.css +1 -1
  67. package/default/b2c/dist/css/{order1733309880.css → order1734010249.css} +1 -1
  68. package/{child/dist/fonts/icons1733309902.woff → default/b2c/dist/fonts/icons1734010249.woff} +0 -0
  69. package/default/b2c/dist/fonts/icons1734010249.woff2 +0 -0
  70. package/default/b2c/dist/js/main.js +1 -1
  71. package/default/b2c/dist/js/main.js.map +2 -2
  72. package/default/b2c/dist/js/{main1733309880.js → main1734010249.js} +1 -1
  73. package/default/b2c/dist/snippets/css/account.html +1 -1
  74. package/default/b2c/dist/snippets/css/doc.html +1 -1
  75. package/default/b2c/dist/snippets/css/main.html +1 -1
  76. package/default/b2c/dist/snippets/css/order.html +1 -1
  77. package/default/b2c/dist/snippets/iconfont.html +1 -1
  78. package/default/b2c/dist/snippets/js/account.html +1 -1
  79. package/default/b2c/dist/snippets/js/itemcard.html +1 -1
  80. package/default/b2c/dist/snippets/js/main.html +1 -1
  81. package/default/b2c/dist/snippets/js/order.html +1 -1
  82. package/{child/src/icons/icons1733309902.woff → default/b2c/src/icons/icons1734010249.woff} +0 -0
  83. package/default/b2c/src/icons/icons1734010249.woff2 +0 -0
  84. package/default/b2c/src/scss/base/_icons.scss +2 -2
  85. package/default/b2c/src/scss/main.scss +1 -0
  86. package/default/b2c/styleguide/item-shop-accountbox.html +1 -1
  87. package/default/b2c/styleguide/item-shop-amount-lines.html +1 -1
  88. package/default/b2c/styleguide/item-shop-attributes-icons.html +1 -1
  89. package/default/b2c/styleguide/item-shop-categorylist-itempreview.html +1 -1
  90. package/default/b2c/styleguide/item-shop-checkout-buttons.html +1 -1
  91. package/default/b2c/styleguide/item-shop-filter.html +1 -1
  92. package/default/b2c/styleguide/item-shop-history-list-item.html +1 -1
  93. package/default/b2c/styleguide/item-shop-orderboxsummary.html +1 -1
  94. package/default/b2c/styleguide/item-shop-orderbutton.html +1 -1
  95. package/default/b2c/styleguide/item-shop-sorting.html +1 -1
  96. package/default/b2c/styleguide/item-shop-variantselection.html +1 -1
  97. package/default/b2c/styleguide/section-shop.html +11 -11
  98. package/default/b2c.yaml +2 -1
  99. package/default/catalog/build/doc/doc.css +35 -2
  100. package/default/catalog/dist/css/addons/errorPages.css +1 -1
  101. package/default/catalog/dist/css/addons/fck.css +1 -1
  102. package/default/catalog/dist/css/doc.css +1 -1
  103. package/default/catalog/dist/css/{main1733309893.css → doc1734010262.css} +1 -1
  104. package/default/catalog/dist/css/main.css +1 -1
  105. package/default/catalog/dist/css/{doc1733309893.css → main1734010262.css} +1 -1
  106. package/default/catalog/dist/fonts/icons1734010262.woff +0 -0
  107. package/default/catalog/dist/fonts/icons1734010262.woff2 +0 -0
  108. package/default/catalog/dist/js/main.js +1 -1
  109. package/default/catalog/dist/js/main.js.map +2 -2
  110. package/default/catalog/dist/js/{main1733309893.js → main1734010262.js} +1 -1
  111. package/default/catalog/dist/snippets/css/doc.html +1 -1
  112. package/default/catalog/dist/snippets/css/main.html +1 -1
  113. package/default/catalog/dist/snippets/iconfont.html +1 -1
  114. package/default/catalog/dist/snippets/js/account.html +1 -1
  115. package/default/catalog/dist/snippets/js/itemcard.html +1 -1
  116. package/default/catalog/dist/snippets/js/main.html +1 -1
  117. package/default/catalog/dist/snippets/js/order.html +1 -1
  118. package/default/catalog/src/icons/icons1734010262.woff +0 -0
  119. package/default/catalog/src/icons/icons1734010262.woff2 +0 -0
  120. package/default/catalog/src/scss/base/_icons.scss +2 -2
  121. package/default/catalog/src/scss/main.scss +1 -0
  122. package/default/catalog/styleguide/item-shop-account-infobox.html +1 -1
  123. package/default/catalog/styleguide/item-shop-accountbox.html +1 -1
  124. package/default/catalog/styleguide/item-shop-attributes-icons.html +1 -1
  125. package/default/catalog/styleguide/item-shop-categorybox.html +1 -1
  126. package/default/catalog/styleguide/item-shop-categorylist-itempreview.html +1 -1
  127. package/default/catalog/styleguide/item-shop-filter.html +1 -1
  128. package/default/catalog/styleguide/item-shop-inventory.html +1 -1
  129. package/default/catalog/styleguide/item-shop-list-type-switch.html +1 -1
  130. package/default/catalog/styleguide/item-shop-orderboxsummary.html +1 -1
  131. package/default/catalog/styleguide/item-shop-selected-salesperson-box.html +1 -1
  132. package/default/catalog/styleguide/item-shop-sorting.html +1 -1
  133. package/default/catalog/styleguide/item-shop-variantselection.html +1 -1
  134. package/default/catalog/styleguide/section-shop.html +12 -12
  135. package/default/catalog.yaml +2 -1
  136. package/default/global/js/rangeSlider.js +8 -8
  137. package/default/global/scss/shop/_categoryStructure.scss +27 -0
  138. package/default/global/scss/shop/_filter.scss +5 -1
  139. package/default/login/build/doc/doc.css +1 -1
  140. package/default/login/dist/css/addons/errorPages.css +1 -1
  141. package/default/login/dist/css/addons/fck.css +1 -1
  142. package/default/login/dist/css/addons/kss.css +1 -1
  143. package/default/login/dist/css/doc.css +1 -1
  144. package/default/login/dist/css/{doc1733309889.css → doc1734010259.css} +1 -1
  145. package/default/login/dist/css/main.css +1 -1
  146. package/default/login/dist/css/{main1733309889.css → main1734010259.css} +1 -1
  147. package/default/login/dist/fonts/icons1734010259.woff +0 -0
  148. package/default/login/dist/fonts/icons1734010259.woff2 +0 -0
  149. package/default/login/dist/snippets/css/doc.html +1 -1
  150. package/default/login/dist/snippets/css/main.html +1 -1
  151. package/default/login/dist/snippets/iconfont.html +1 -1
  152. package/default/login/dist/snippets/js/main.html +1 -1
  153. package/default/login/src/icons/icons1734010259.woff +0 -0
  154. package/default/login/src/icons/icons1734010259.woff2 +0 -0
  155. package/default/login/src/scss/base/_icons.scss +2 -2
  156. package/default/login.yaml +2 -1
  157. package/default/templates/emails/basicmail/basicmail.mustache +2 -2
  158. package/default/templates/emails/basicmail/basicmailFooter.mustache +1 -1
  159. package/default/templates/emails/basicmail/basicmailHeader.mustache +1 -1
  160. package/default/templates/emails/footerText.mustache +12 -12
  161. package/default/templates/emails/ordermail/orderLines.mustache +5 -5
  162. package/default/templates/emails/ordermail/ordermail.mustache +1 -1
  163. package/default/templates/emails/ordermail/ordermailDcOrder.mustache +1 -1
  164. package/default/templates/emails/ordermail/ordermailDetails.mustache +17 -17
  165. package/default/templates/emails/ordermail/ordermailFooter.mustache +1 -1
  166. package/default/templates/emails/ordermail/ordermailHeader.mustache +5 -5
  167. package/default/templates/emails/ordermail/ordermailIntro.mustache +1 -1
  168. package/default/templates/emails/ordermail/ordermailIntroText.mustache +1 -1
  169. package/default/templates/emails/ordermail/ordermailItem.mustache +1 -1
  170. package/default/templates/emails/ordermail/ordermailItemHeadline.mustache +1 -1
  171. package/default/templates/emails/ordermail/ordermailItemList.mustache +1 -1
  172. package/default/templates/filter/b2b/filter.mustache +1 -1
  173. package/default/templates/filter/b2c/filter.mustache +1 -1
  174. package/default/templates/filter/catalog/filter.mustache +1 -1
  175. package/default/templates/shop/item_statistics_account.mustache +1 -1
  176. package/default/website/build/doc/doc.css +1 -1
  177. package/default/website/dist/css/addons/errorPages.css +1 -1
  178. package/default/website/dist/css/addons/fck.css +1 -1
  179. package/default/website/dist/css/addons/kss.css +1 -1
  180. package/default/website/dist/css/doc.css +1 -1
  181. package/default/website/dist/css/{main1733309898.css → doc1734010266.css} +1 -1
  182. package/default/website/dist/css/main.css +1 -1
  183. package/default/website/dist/css/{doc1733309898.css → main1734010266.css} +1 -1
  184. package/default/website/dist/fonts/icons1734010266.woff +0 -0
  185. package/default/website/dist/fonts/icons1734010266.woff2 +0 -0
  186. package/default/website/dist/snippets/css/doc.html +1 -1
  187. package/default/website/dist/snippets/css/main.html +1 -1
  188. package/default/website/dist/snippets/iconfont.html +1 -1
  189. package/default/website/dist/snippets/js/main.html +1 -1
  190. package/default/website/src/icons/icons1734010266.woff +0 -0
  191. package/default/website/src/icons/icons1734010266.woff2 +0 -0
  192. package/default/website/src/scss/base/_icons.scss +2 -2
  193. package/default/website.yaml +2 -1
  194. package/package.json +1 -1
  195. package/child/404_de.html +0 -32
  196. package/child/404_en.html +0 -32
  197. package/child/Gulpfile.js +0 -463
  198. package/child/build/doc/doc.css +0 -21840
  199. package/child/build/favicons/android-chrome-192x192.png +0 -0
  200. package/child/build/favicons/android-chrome-512x512.png +0 -0
  201. package/child/build/favicons/apple-touch-icon.png +0 -0
  202. package/child/build/favicons/browserconfig.xml +0 -9
  203. package/child/build/favicons/favicon-16x16.png +0 -0
  204. package/child/build/favicons/favicon-32x32.png +0 -0
  205. package/child/build/favicons/favicon.ico +0 -0
  206. package/child/build/favicons/faviconData.json +0 -1
  207. package/child/build/favicons/mstile-144x144.png +0 -0
  208. package/child/build/favicons/mstile-150x150.png +0 -0
  209. package/child/build/favicons/mstile-310x150.png +0 -0
  210. package/child/build/favicons/mstile-310x310.png +0 -0
  211. package/child/build/favicons/mstile-70x70.png +0 -0
  212. package/child/build/favicons/safari-pinned-tab.svg +0 -36
  213. package/child/build/favicons/site.webmanifest +0 -19
  214. package/child/child.yaml +0 -137
  215. package/child/ck_styles.js +0 -90
  216. package/child/config.json +0 -37
  217. package/child/dist/css/addons/errorPages.css +0 -1
  218. package/child/dist/css/addons/fck.css +0 -1
  219. package/child/dist/css/addons/kss.css +0 -1
  220. package/child/dist/css/child.css +0 -1
  221. package/child/dist/css/child1733309902.css +0 -1
  222. package/child/dist/css/doc.css +0 -1
  223. package/child/dist/css/doc1733309902.css +0 -1
  224. package/child/dist/favicons/android-chrome-192x192.png +0 -0
  225. package/child/dist/favicons/android-chrome-512x512.png +0 -0
  226. package/child/dist/favicons/apple-touch-icon.png +0 -0
  227. package/child/dist/favicons/browserconfig.xml +0 -9
  228. package/child/dist/favicons/favicon-16x16.png +0 -0
  229. package/child/dist/favicons/favicon-32x32.png +0 -0
  230. package/child/dist/favicons/favicon.ico +0 -0
  231. package/child/dist/favicons/faviconData.json +0 -1
  232. package/child/dist/favicons/mstile-144x144.png +0 -0
  233. package/child/dist/favicons/mstile-150x150.png +0 -0
  234. package/child/dist/favicons/mstile-310x150.png +0 -0
  235. package/child/dist/favicons/mstile-310x310.png +0 -0
  236. package/child/dist/favicons/mstile-70x70.png +0 -0
  237. package/child/dist/favicons/safari-pinned-tab.svg +0 -36
  238. package/child/dist/favicons/site.webmanifest +0 -19
  239. package/child/dist/fonts/barlow-600.woff +0 -0
  240. package/child/dist/fonts/barlow-600.woff2 +0 -0
  241. package/child/dist/fonts/barlow-700.woff +0 -0
  242. package/child/dist/fonts/barlow-700.woff2 +0 -0
  243. package/child/dist/fonts/barlow-regular.woff +0 -0
  244. package/child/dist/fonts/barlow-regular.woff2 +0 -0
  245. package/child/dist/fonts/icons1689843011.woff +0 -0
  246. package/child/dist/fonts/icons1689843011.woff2 +0 -0
  247. package/child/dist/fonts/icons1689843343.woff +0 -0
  248. package/child/dist/fonts/icons1689843343.woff2 +0 -0
  249. package/child/dist/fonts/icons1733309902.woff2 +0 -0
  250. package/child/dist/js/child.js +0 -2
  251. package/child/dist/js/child.js.map +0 -7
  252. package/child/dist/js/child1733309902.js +0 -2
  253. package/child/dist/snippets/css/child.html +0 -1
  254. package/child/dist/snippets/css/doc.html +0 -1
  255. package/child/dist/snippets/faviconmarkup.html +0 -9
  256. package/child/dist/snippets/iconfont.html +0 -1
  257. package/child/dist/snippets/js/child.html +0 -1
  258. package/child/frontend.php +0 -266
  259. package/child/homepage.md +0 -1
  260. package/child/kss-config.json +0 -17
  261. package/child/package.json +0 -65
  262. package/child/sample.jpg +0 -0
  263. package/child/src/favicon/favicon.svg +0 -1
  264. package/child/src/fonts/barlow-600.woff +0 -0
  265. package/child/src/fonts/barlow-600.woff2 +0 -0
  266. package/child/src/fonts/barlow-700.woff +0 -0
  267. package/child/src/fonts/barlow-700.woff2 +0 -0
  268. package/child/src/fonts/barlow-regular.woff +0 -0
  269. package/child/src/fonts/barlow-regular.woff2 +0 -0
  270. package/child/src/fonts/icons1689843011.woff +0 -0
  271. package/child/src/fonts/icons1689843011.woff2 +0 -0
  272. package/child/src/fonts/icons1689843343.woff +0 -0
  273. package/child/src/fonts/icons1689843343.woff2 +0 -0
  274. package/child/src/icons/icons1733309902.woff2 +0 -0
  275. package/child/src/js/child.js +0 -0
  276. package/child/src/scss/_print.scss +0 -5
  277. package/child/src/scss/addons/errorPages.scss +0 -109
  278. package/child/src/scss/addons/fck.scss +0 -6
  279. package/child/src/scss/addons/kss.scss +0 -108
  280. package/child/src/scss/base/_fonts.scss +0 -27
  281. package/child/src/scss/base/_icons.scss +0 -968
  282. package/child/src/scss/base/_variables.scss +0 -0
  283. package/child/src/scss/child.scss +0 -11
  284. package/child/src/scss/doc.scss +0 -2
  285. package/child/src/scss/mixins/_breakpoints.scss +0 -127
  286. package/child/src/scss/mixins/_functions.scss +0 -273
  287. package/child/src/scss/mixins/_grid.scss +0 -85
  288. package/child/src/scss/mixins/_mixins.scss +0 -3
  289. package/child/src/scss/template/_icons.scss +0 -33
  290. package/child/src/snippets/faviconmarkup.html +0 -0
  291. package/child/src/snippets/includeCSS.html +0 -1
  292. package/child/src/snippets/includeFont.html +0 -1
  293. package/child/src/snippets/includeJS.html +0 -1
  294. package/child/styleguide/index.html +0 -119
  295. package/child/styleguide/item-base-button-link.html +0 -191
  296. package/child/styleguide/item-base-buttons.html +0 -244
  297. package/child/styleguide/item-base-fake-tables.html +0 -221
  298. package/child/styleguide/item-base-icons.html +0 -290
  299. package/child/styleguide/item-base-lists.html +0 -216
  300. package/child/styleguide/item-base-tables.html +0 -221
  301. package/child/styleguide/item-base-tags-group.html +0 -209
  302. package/child/styleguide/item-base-tags.html +0 -224
  303. package/child/styleguide/item-base.html +0 -171
  304. package/child/styleguide/item-colors-background.html +0 -305
  305. package/child/styleguide/item-colors-border.html +0 -263
  306. package/child/styleguide/item-colors-font.html +0 -304
  307. package/child/styleguide/item-colors.html +0 -159
  308. package/child/styleguide/item-components-action-icon.html +0 -244
  309. package/child/styleguide/item-components-actionbox.html +0 -195
  310. package/child/styleguide/item-components-alerts.html +0 -244
  311. package/child/styleguide/item-components-breadcrumb.html +0 -209
  312. package/child/styleguide/item-components-custom-select.html +0 -588
  313. package/child/styleguide/item-components-filegallery.html +0 -223
  314. package/child/styleguide/item-components-iconbar.html +0 -378
  315. package/child/styleguide/item-components-iconbox.html +0 -197
  316. package/child/styleguide/item-components-iconlist.html +0 -205
  317. package/child/styleguide/item-components-modals.html +0 -319
  318. package/child/styleguide/item-components-pagination.html +0 -215
  319. package/child/styleguide/item-components-processbar.html +0 -225
  320. package/child/styleguide/item-components-radio-list.html +0 -297
  321. package/child/styleguide/item-components-rating.html +0 -213
  322. package/child/styleguide/item-components-scrollbar.html +0 -327
  323. package/child/styleguide/item-components-searchbar.html +0 -204
  324. package/child/styleguide/item-components-share-links.html +0 -209
  325. package/child/styleguide/item-components-tags-group.html +0 -209
  326. package/child/styleguide/item-components-tags.html +0 -254
  327. package/child/styleguide/item-components-trust-infobar.html +0 -205
  328. package/child/styleguide/item-components-trustbar.html +0 -213
  329. package/child/styleguide/item-components-trustlist.html +0 -211
  330. package/child/styleguide/item-components.html +0 -261
  331. package/child/styleguide/item-form-checkboxes-switch.html +0 -195
  332. package/child/styleguide/item-form-checkboxes.html +0 -195
  333. package/child/styleguide/item-form-file-input.html +0 -252
  334. package/child/styleguide/item-form-infield-input-groups.html +0 -215
  335. package/child/styleguide/item-form-input-groups-addons.html +0 -286
  336. package/child/styleguide/item-form-input-groups.html +0 -210
  337. package/child/styleguide/item-form-inputs.html +0 -398
  338. package/child/styleguide/item-form-label-left-input-groups.html +0 -201
  339. package/child/styleguide/item-form-radioboxes-switch.html +0 -211
  340. package/child/styleguide/item-form.html +0 -189
  341. package/child/styleguide/item-navigations-mainnav.html +0 -239
  342. package/child/styleguide/item-navigations-nav.html +0 -215
  343. package/child/styleguide/item-navigations-navgroup.html +0 -538
  344. package/child/styleguide/item-navigations-subnav.html +0 -295
  345. package/child/styleguide/item-navigations-toggle-navigation.html +0 -216
  346. package/child/styleguide/item-navigations.html +0 -171
  347. package/child/styleguide/item-shop-accountbox.html +0 -318
  348. package/child/styleguide/item-shop-amount-lines.html +0 -243
  349. package/child/styleguide/item-shop-attributes-icons.html +0 -205
  350. package/child/styleguide/item-shop-categorybox.html +0 -227
  351. package/child/styleguide/item-shop-categorylist-itempreview.html +0 -247
  352. package/child/styleguide/item-shop-categorylist.html +0 -257
  353. package/child/styleguide/item-shop-checkout-buttons.html +0 -205
  354. package/child/styleguide/item-shop-filter.html +0 -707
  355. package/child/styleguide/item-shop-history-list-item.html +0 -213
  356. package/child/styleguide/item-shop-inventory.html +0 -300
  357. package/child/styleguide/item-shop-list-type-switch.html +0 -207
  358. package/child/styleguide/item-shop-order-history-list.html +0 -254
  359. package/child/styleguide/item-shop-orderboxsummary.html +0 -267
  360. package/child/styleguide/item-shop-orderbutton.html +0 -297
  361. package/child/styleguide/item-shop-orderitemlist.html +0 -263
  362. package/child/styleguide/item-shop-prices-list-graduated.html +0 -247
  363. package/child/styleguide/item-shop-prices-list.html +0 -217
  364. package/child/styleguide/item-shop-prices.html +0 -199
  365. package/child/styleguide/item-shop-promotions.html +0 -201
  366. package/child/styleguide/item-shop-quantity-spinner.html +0 -366
  367. package/child/styleguide/item-shop-sorting.html +0 -271
  368. package/child/styleguide/item-shop-state.html +0 -279
  369. package/child/styleguide/item-shop-variantselection.html +0 -199
  370. package/child/styleguide/item-shop.html +0 -243
  371. package/child/styleguide/item-siteparts-filegallery.html +0 -223
  372. package/child/styleguide/item-siteparts-scrollbar.html +0 -294
  373. package/child/styleguide/item-siteparts-slidecontent.html +0 -217
  374. package/child/styleguide/item-siteparts.html +0 -159
  375. package/child/styleguide/item-structure-containers.html +0 -234
  376. package/child/styleguide/item-structure-grid.html +0 -373
  377. package/child/styleguide/item-structure-margins.html +0 -307
  378. package/child/styleguide/item-structure-paddings.html +0 -307
  379. package/child/styleguide/item-structure.html +0 -165
  380. package/child/styleguide/item-typo-alignment-transform.html +0 -274
  381. package/child/styleguide/item-typo-headlines.html +0 -225
  382. package/child/styleguide/item-typo-link-with-icon.html +0 -254
  383. package/child/styleguide/item-typo-links.html +0 -224
  384. package/child/styleguide/item-typo-text.html +0 -214
  385. package/child/styleguide/item-typo.html +0 -165
  386. package/child/styleguide/kss-assets/WARNING.txt +0 -2
  387. package/child/styleguide/kss-assets/github-fork--black.png +0 -0
  388. package/child/styleguide/kss-assets/kss-fullscreen.js +0 -60
  389. package/child/styleguide/kss-assets/kss-guides.js +0 -27
  390. package/child/styleguide/kss-assets/kss-markup.js +0 -42
  391. package/child/styleguide/kss-assets/kss.css +0 -1
  392. package/child/styleguide/kss-assets/kss.js +0 -53
  393. package/child/styleguide/kss-assets/kss.scss +0 -746
  394. package/child/styleguide/kss-assets/noise-low.png +0 -0
  395. package/child/styleguide/kss-assets/sample-inline.png +0 -0
  396. package/child/styleguide/kss-assets/sample-inline.svg +0 -3
  397. package/child/styleguide/kss-assets/sample.png +0 -0
  398. package/child/styleguide/kss-assets/sample.svg +0 -3
  399. package/child/styleguide/kss-assets/scrollspy.js +0 -147
  400. package/child/styleguide/section-base.html +0 -784
  401. package/child/styleguide/section-colors.html +0 -743
  402. package/child/styleguide/section-components.html +0 -3375
  403. package/child/styleguide/section-form.html +0 -1383
  404. package/child/styleguide/section-navigations.html +0 -1194
  405. package/child/styleguide/section-shop.html +0 -3333
  406. package/child/styleguide/section-siteparts.html +0 -605
  407. package/child/styleguide/section-structure.html +0 -1002
  408. package/child/styleguide/section-typo.html +0 -698
  409. package/default/b2b/dist/fonts/icons1733309885.woff2 +0 -0
  410. package/default/b2b/src/icons/icons1733309885.woff2 +0 -0
  411. package/default/b2c/dist/fonts/icons1733309880.woff +0 -0
  412. package/default/b2c/dist/fonts/icons1733309880.woff2 +0 -0
  413. package/default/b2c/src/icons/icons1733309880.woff +0 -0
  414. package/default/b2c/src/icons/icons1733309880.woff2 +0 -0
  415. package/default/catalog/dist/fonts/icons1733309893.woff +0 -0
  416. package/default/catalog/dist/fonts/icons1733309893.woff2 +0 -0
  417. package/default/catalog/src/icons/icons1733309893.woff +0 -0
  418. package/default/catalog/src/icons/icons1733309893.woff2 +0 -0
  419. package/default/login/dist/fonts/icons1733309889.woff +0 -0
  420. package/default/login/dist/fonts/icons1733309889.woff2 +0 -0
  421. package/default/login/src/icons/icons1733309889.woff +0 -0
  422. package/default/login/src/icons/icons1733309889.woff2 +0 -0
  423. package/default/website/dist/fonts/icons1733309898.woff +0 -0
  424. package/default/website/dist/fonts/icons1733309898.woff2 +0 -0
  425. package/default/website/src/icons/icons1733309898.woff +0 -0
  426. package/default/website/src/icons/icons1733309898.woff2 +0 -0
  427. /package/default/b2b/dist/js/{account1733309885.js → account1734010254.js} +0 -0
  428. /package/default/b2b/dist/js/{itemcard1733309885.js → itemcard1734010254.js} +0 -0
  429. /package/default/b2b/dist/js/{order1733309885.js → order1734010254.js} +0 -0
  430. /package/default/b2b/dist/js/{salesperson1733309885.js → salesperson1734010254.js} +0 -0
  431. /package/default/b2c/dist/js/{account1733309880.js → account1734010249.js} +0 -0
  432. /package/default/b2c/dist/js/{itemcard1733309880.js → itemcard1734010249.js} +0 -0
  433. /package/default/b2c/dist/js/{order1733309880.js → order1734010249.js} +0 -0
  434. /package/default/catalog/dist/js/{account1733309893.js → account1734010262.js} +0 -0
  435. /package/default/catalog/dist/js/{itemcard1733309893.js → itemcard1734010262.js} +0 -0
  436. /package/default/catalog/dist/js/{order1733309893.js → order1734010262.js} +0 -0
  437. /package/default/login/dist/js/{main1733309889.js → main1734010259.js} +0 -0
  438. /package/default/website/dist/js/{main1733309898.js → main1734010266.js} +0 -0
@@ -1,1002 +0,0 @@
1
- <!DOCTYPE html>
2
- <html class="no-js" lang="en">
3
- <head>
4
- <meta charset="utf-8"/>
5
- <title>Style Guide</title>
6
-
7
- <meta name="description" content=""/>
8
- <meta name="generator" content="kss-node"/>
9
- <meta name="viewport" content="width=device-width"/>
10
-
11
- <link rel="stylesheet" href="kss-assets/kss.css"/>
12
- <link rel="stylesheet" href="../dist/css/addons/kss.css"/>
13
- <link rel="stylesheet" href="../../default/b2c/dist/css/doc.css"/>
14
- <link rel="stylesheet" href="../dist/css/doc.css"/>
15
-
16
- </head>
17
- <body id="kss-node" >
18
-
19
- <div class="kss-sidebar kss-style">
20
- <header class="kss-header">
21
- <h1 class="kss-doc-title">Style Guide</h1>
22
- </header>
23
- <nav class="kss-nav" aria-label="Style Guide">
24
- <ul class="kss-nav__menu">
25
- <li class="kss-nav__menu-item">
26
- <a class="kss-nav__menu-link" href="./">
27
- <span class="kss-nav__ref">0</span
28
- ><span class="kss-nav__name">Overview</span>
29
- </a>
30
- </li>
31
- <li class="kss-nav__menu-item">
32
- <a class="kss-nav__menu-link" href="section-base.html">
33
- <span class="kss-nav__ref">1</span><span class="kss-nav__name">Base</span>
34
- </a>
35
- </li>
36
- <li class="kss-nav__menu-item">
37
- <a class="kss-nav__menu-link" href="section-colors.html">
38
- <span class="kss-nav__ref">2</span><span class="kss-nav__name">Colors</span>
39
- </a>
40
- </li>
41
- <li class="kss-nav__menu-item">
42
- <a class="kss-nav__menu-link" href="section-components.html">
43
- <span class="kss-nav__ref">3</span><span class="kss-nav__name">Components</span>
44
- </a>
45
- </li>
46
- <li class="kss-nav__menu-item">
47
- <a class="kss-nav__menu-link" href="section-form.html">
48
- <span class="kss-nav__ref">4</span><span class="kss-nav__name">Form</span>
49
- </a>
50
- </li>
51
- <li class="kss-nav__menu-item">
52
- <a class="kss-nav__menu-link" href="section-navigations.html">
53
- <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigations</span>
54
- </a>
55
- </li>
56
- <li class="kss-nav__menu-item">
57
- <a class="kss-nav__menu-link" href="section-shop.html">
58
- <span class="kss-nav__ref">6</span><span class="kss-nav__name">Shop</span>
59
- </a>
60
- </li>
61
- <li class="kss-nav__menu-item">
62
- <a class="kss-nav__menu-link" href="section-siteparts.html">
63
- <span class="kss-nav__ref">7</span><span class="kss-nav__name">Siteparts</span>
64
- </a>
65
- </li>
66
- <li class="kss-nav__menu-item">
67
- <a class="kss-nav__menu-link" href="section-structure.html">
68
- <span class="kss-nav__ref">8</span><span class="kss-nav__name">Structure</span>
69
- </a>
70
- <ul class="kss-nav__menu-child">
71
- <li class="kss-nav__menu-item">
72
- <a class="kss-nav__menu-link" href="section-structure.html#kssref-structure-containers">
73
- <span class="kss-nav__ref ">8.1</span
74
- ><span class="kss-nav__name">Containers</span>
75
- </a>
76
- </li>
77
- <li class="kss-nav__menu-item">
78
- <a class="kss-nav__menu-link" href="section-structure.html#kssref-structure-grid">
79
- <span class="kss-nav__ref ">8.2</span
80
- ><span class="kss-nav__name">Grid</span>
81
- </a>
82
- </li>
83
- <li class="kss-nav__menu-item">
84
- <a class="kss-nav__menu-link" href="section-structure.html#kssref-structure-margins">
85
- <span class="kss-nav__ref ">8.3</span
86
- ><span class="kss-nav__name">Margins</span>
87
- </a>
88
- </li>
89
- <li class="kss-nav__menu-item">
90
- <a class="kss-nav__menu-link" href="section-structure.html#kssref-structure-paddings">
91
- <span class="kss-nav__ref ">8.4</span
92
- ><span class="kss-nav__name">Paddings</span>
93
- </a>
94
- </li>
95
- </ul>
96
- </li>
97
- <li class="kss-nav__menu-item">
98
- <a class="kss-nav__menu-link" href="section-typo.html">
99
- <span class="kss-nav__ref">9</span><span class="kss-nav__name">Typo</span>
100
- </a>
101
- </li>
102
- </ul>
103
- </nav>
104
- </div>
105
- <main class="kss-main" aria-label="Content">
106
- <article>
107
-
108
- <div id="kssref-structure" class="kss-section kss-section--depth-1 ">
109
-
110
- <div class="kss-style">
111
- <h1 class="kss-title kss-title--level-1">
112
- <a class="kss-title__permalink" href="#kssref-structure">
113
- <span class="kss-title__ref">
114
- 8
115
- <span class="kss-title__permalink-hash">
116
- #Structure
117
- </span>
118
- </span>
119
- Structure
120
- </a>
121
- </h1>
122
-
123
-
124
-
125
-
126
- </div>
127
-
128
-
129
-
130
- </div>
131
- <section id="kssref-structure-containers" class="kss-section kss-section--depth-2 ">
132
-
133
- <div class="kss-style">
134
- <h2 class="kss-title kss-title--level-2">
135
- <a class="kss-title__permalink" href="#kssref-structure-containers">
136
- <span class="kss-title__ref">
137
- 8.1
138
- <span class="kss-title__permalink-hash">
139
- #Structure.Containers
140
- </span>
141
- </span>
142
- Containers
143
- </a>
144
- </h2>
145
-
146
- <p class="kss-toolbar">
147
- <a href="#kssref-structure-containers" data-kss-fullscreen="kssref-structure-containers">
148
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
149
- <svg focusable="false" aria-hidden="true" class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
150
- <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
151
- </svg>
152
- <svg focusable="false" aria-hidden="true" class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
153
- <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
154
- </svg>
155
- </a>
156
- <a href="item-structure-containers.html" target="_blank">
157
- <span class="kss-toolbar__tooltip">Open in new window</span>
158
- <svg focusable="false" aria-hidden="true" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
159
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
160
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
161
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
162
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
163
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
164
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
165
- </svg>
166
- </a>
167
- <a href="#kssref-structure-containers" data-kss-guides="true">
168
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
169
- <svg focusable="false" aria-hidden="true" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
170
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
171
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
172
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
173
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
174
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
175
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
176
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
177
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
178
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
179
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
180
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
181
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
182
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
183
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
184
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
185
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
186
- </svg>
187
- </a>
188
- <a href="#kssref-structure-containers" data-kss-markup="true">
189
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
190
- <svg focusable="false" aria-hidden="true" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
191
- <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
192
- <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
193
- </svg>
194
- </a>
195
- </p>
196
-
197
-
198
-
199
- </div>
200
-
201
- <div class="kss-modifier__wrapper">
202
- <div class="kss-modifier__heading kss-style">
203
- Examples
204
- </div>
205
-
206
- <div class="kss-modifier__default-name kss-style">
207
- Default styling
208
- </div>
209
-
210
- <div class="kss-modifier__example">
211
- <div class="container "><div class="box">Lorem ipsum</div></div>
212
- <div class="kss-modifier__example-footer"></div>
213
- </div>
214
-
215
- <div class="kss-modifier__name kss-style">
216
- .container
217
- </div>
218
- <div class="kss-modifier__description kss-style">
219
- Base Container
220
- </div>
221
- <div class="kss-modifier__example">
222
- <div class="container container"><div class="box">Lorem ipsum</div></div>
223
- <div class="kss-modifier__example-footer"></div>
224
- </div>
225
- <div class="kss-modifier__name kss-style">
226
- .container--small
227
- </div>
228
- <div class="kss-modifier__description kss-style">
229
- Small Container
230
- </div>
231
- <div class="kss-modifier__example">
232
- <div class="container container--small"><div class="box">Lorem ipsum</div></div>
233
- <div class="kss-modifier__example-footer"></div>
234
- </div>
235
- <div class="kss-modifier__name kss-style">
236
- .container--large
237
- </div>
238
- <div class="kss-modifier__description kss-style">
239
- Large Container
240
- </div>
241
- <div class="kss-modifier__example">
242
- <div class="container container--large"><div class="box">Lorem ipsum</div></div>
243
- <div class="kss-modifier__example-footer"></div>
244
- </div>
245
- <div class="kss-modifier__name kss-style">
246
- .container--full
247
- </div>
248
- <div class="kss-modifier__description kss-style">
249
- Container Maxwidth Full-HD
250
- </div>
251
- <div class="kss-modifier__example">
252
- <div class="container container--full"><div class="box">Lorem ipsum</div></div>
253
- <div class="kss-modifier__example-footer"></div>
254
- </div>
255
- </div>
256
-
257
- <details class="kss-markup kss-style">
258
- <summary>
259
- Markup
260
- </summary>
261
- <pre class="hljs"><code class="language-handlebars"><span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;container [modifier class]&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span>Lorem ipsum<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span></code></pre>
262
- </details>
263
-
264
- <div class="kss-source kss-style">
265
- Source: <code>build/doc/doc.css</code>, line 5186
266
- </div>
267
-
268
- </section>
269
- <section id="kssref-structure-grid" class="kss-section kss-section--depth-2 ">
270
-
271
- <div class="kss-style">
272
- <h2 class="kss-title kss-title--level-2">
273
- <a class="kss-title__permalink" href="#kssref-structure-grid">
274
- <span class="kss-title__ref">
275
- 8.2
276
- <span class="kss-title__permalink-hash">
277
- #Structure.Grid
278
- </span>
279
- </span>
280
- Grid
281
- </a>
282
- </h2>
283
-
284
- <p class="kss-toolbar">
285
- <a href="#kssref-structure-grid" data-kss-fullscreen="kssref-structure-grid">
286
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
287
- <svg focusable="false" aria-hidden="true" class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
288
- <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
289
- </svg>
290
- <svg focusable="false" aria-hidden="true" class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
291
- <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
292
- </svg>
293
- </a>
294
- <a href="item-structure-grid.html" target="_blank">
295
- <span class="kss-toolbar__tooltip">Open in new window</span>
296
- <svg focusable="false" aria-hidden="true" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
297
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
298
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
299
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
300
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
301
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
302
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
303
- </svg>
304
- </a>
305
- <a href="#kssref-structure-grid" data-kss-guides="true">
306
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
307
- <svg focusable="false" aria-hidden="true" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
308
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
309
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
310
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
311
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
312
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
313
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
314
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
315
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
316
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
317
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
318
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
319
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
320
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
321
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
322
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
323
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
324
- </svg>
325
- </a>
326
- <a href="#kssref-structure-grid" data-kss-markup="true">
327
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
328
- <svg focusable="false" aria-hidden="true" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
329
- <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
330
- <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
331
- </svg>
332
- </a>
333
- </p>
334
-
335
- <div class="kss-description">
336
- <p>Extra Small (xs), Small (sm), Medium (md), Large (lg), xLarge (xlg)</p>
337
-
338
- </div>
339
-
340
-
341
- </div>
342
-
343
- <div class="kss-modifier__wrapper">
344
- <div class="kss-modifier__heading kss-style">
345
- Examples
346
- </div>
347
-
348
- <div class="kss-modifier__default-name kss-style">
349
- Default styling
350
- </div>
351
-
352
- <div class="kss-modifier__example">
353
- <div class="row ">
354
- <div class="col marginBottom"><div class="kssPaddingBox">col</div></div>
355
- </div>
356
- <div class="row ">
357
- <div class="col-12 marginBottom"><div class="kssPaddingBox">col-12</div></div>
358
- </div>
359
- <div class="row ">
360
- <div class="col-1 marginBottom"><div class="kssPaddingBox">col-1</div></div>
361
- <div class="col-11 marginBottom"><div class="kssPaddingBox">col-11</div></div>
362
- </div>
363
- <div class="row ">
364
- <div class="col-2 marginBottom"><div class="kssPaddingBox">col-2</div></div>
365
- <div class="col-10 marginBottom"><div class="kssPaddingBox">col-10</div></div>
366
- </div>
367
- <div class="row ">
368
- <div class="col-3 marginBottom"><div class="kssPaddingBox">col-3</div></div>
369
- <div class="col-9 marginBottom"><div class="kssPaddingBox">col-9</div></div>
370
- </div>
371
- <div class="row ">
372
- <div class="col-4 marginBottom"><div class="kssPaddingBox">col-4</div></div>
373
- <div class="col-8 marginBottom"><div class="kssPaddingBox">col-8</div></div>
374
- </div>
375
- <div class="row ">
376
- <div class="col-5 marginBottom"><div class="kssPaddingBox">col-5</div></div>
377
- <div class="col-7 marginBottom"><div class="kssPaddingBox">col-7</div></div>
378
- </div>
379
- <div class="row ">
380
- <div class="col-6 marginBottom"><div class="kssPaddingBox">col-6</div></div>
381
- <div class="col-6 marginBottom"><div class="kssPaddingBox">col-6</div></div>
382
- </div>
383
- <div class="kss-modifier__example-footer"></div>
384
- </div>
385
-
386
- <div class="kss-modifier__name kss-style">
387
- .gridGap--noGap
388
- </div>
389
- <div class="kss-modifier__description kss-style">
390
- No Gap
391
- </div>
392
- <div class="kss-modifier__example">
393
- <div class="row gridGap--noGap">
394
- <div class="col marginBottom"><div class="kssPaddingBox">col</div></div>
395
- </div>
396
- <div class="row gridGap--noGap">
397
- <div class="col-12 marginBottom"><div class="kssPaddingBox">col-12</div></div>
398
- </div>
399
- <div class="row gridGap--noGap">
400
- <div class="col-1 marginBottom"><div class="kssPaddingBox">col-1</div></div>
401
- <div class="col-11 marginBottom"><div class="kssPaddingBox">col-11</div></div>
402
- </div>
403
- <div class="row gridGap--noGap">
404
- <div class="col-2 marginBottom"><div class="kssPaddingBox">col-2</div></div>
405
- <div class="col-10 marginBottom"><div class="kssPaddingBox">col-10</div></div>
406
- </div>
407
- <div class="row gridGap--noGap">
408
- <div class="col-3 marginBottom"><div class="kssPaddingBox">col-3</div></div>
409
- <div class="col-9 marginBottom"><div class="kssPaddingBox">col-9</div></div>
410
- </div>
411
- <div class="row gridGap--noGap">
412
- <div class="col-4 marginBottom"><div class="kssPaddingBox">col-4</div></div>
413
- <div class="col-8 marginBottom"><div class="kssPaddingBox">col-8</div></div>
414
- </div>
415
- <div class="row gridGap--noGap">
416
- <div class="col-5 marginBottom"><div class="kssPaddingBox">col-5</div></div>
417
- <div class="col-7 marginBottom"><div class="kssPaddingBox">col-7</div></div>
418
- </div>
419
- <div class="row gridGap--noGap">
420
- <div class="col-6 marginBottom"><div class="kssPaddingBox">col-6</div></div>
421
- <div class="col-6 marginBottom"><div class="kssPaddingBox">col-6</div></div>
422
- </div>
423
- <div class="kss-modifier__example-footer"></div>
424
- </div>
425
- <div class="kss-modifier__name kss-style">
426
- .gridGap--small
427
- </div>
428
- <div class="kss-modifier__description kss-style">
429
- Small Gap
430
- </div>
431
- <div class="kss-modifier__example">
432
- <div class="row gridGap--small">
433
- <div class="col marginBottom"><div class="kssPaddingBox">col</div></div>
434
- </div>
435
- <div class="row gridGap--small">
436
- <div class="col-12 marginBottom"><div class="kssPaddingBox">col-12</div></div>
437
- </div>
438
- <div class="row gridGap--small">
439
- <div class="col-1 marginBottom"><div class="kssPaddingBox">col-1</div></div>
440
- <div class="col-11 marginBottom"><div class="kssPaddingBox">col-11</div></div>
441
- </div>
442
- <div class="row gridGap--small">
443
- <div class="col-2 marginBottom"><div class="kssPaddingBox">col-2</div></div>
444
- <div class="col-10 marginBottom"><div class="kssPaddingBox">col-10</div></div>
445
- </div>
446
- <div class="row gridGap--small">
447
- <div class="col-3 marginBottom"><div class="kssPaddingBox">col-3</div></div>
448
- <div class="col-9 marginBottom"><div class="kssPaddingBox">col-9</div></div>
449
- </div>
450
- <div class="row gridGap--small">
451
- <div class="col-4 marginBottom"><div class="kssPaddingBox">col-4</div></div>
452
- <div class="col-8 marginBottom"><div class="kssPaddingBox">col-8</div></div>
453
- </div>
454
- <div class="row gridGap--small">
455
- <div class="col-5 marginBottom"><div class="kssPaddingBox">col-5</div></div>
456
- <div class="col-7 marginBottom"><div class="kssPaddingBox">col-7</div></div>
457
- </div>
458
- <div class="row gridGap--small">
459
- <div class="col-6 marginBottom"><div class="kssPaddingBox">col-6</div></div>
460
- <div class="col-6 marginBottom"><div class="kssPaddingBox">col-6</div></div>
461
- </div>
462
- <div class="kss-modifier__example-footer"></div>
463
- </div>
464
- <div class="kss-modifier__name kss-style">
465
- .gridGap--large
466
- </div>
467
- <div class="kss-modifier__description kss-style">
468
- Large Gap
469
- </div>
470
- <div class="kss-modifier__example">
471
- <div class="row gridGap--large">
472
- <div class="col marginBottom"><div class="kssPaddingBox">col</div></div>
473
- </div>
474
- <div class="row gridGap--large">
475
- <div class="col-12 marginBottom"><div class="kssPaddingBox">col-12</div></div>
476
- </div>
477
- <div class="row gridGap--large">
478
- <div class="col-1 marginBottom"><div class="kssPaddingBox">col-1</div></div>
479
- <div class="col-11 marginBottom"><div class="kssPaddingBox">col-11</div></div>
480
- </div>
481
- <div class="row gridGap--large">
482
- <div class="col-2 marginBottom"><div class="kssPaddingBox">col-2</div></div>
483
- <div class="col-10 marginBottom"><div class="kssPaddingBox">col-10</div></div>
484
- </div>
485
- <div class="row gridGap--large">
486
- <div class="col-3 marginBottom"><div class="kssPaddingBox">col-3</div></div>
487
- <div class="col-9 marginBottom"><div class="kssPaddingBox">col-9</div></div>
488
- </div>
489
- <div class="row gridGap--large">
490
- <div class="col-4 marginBottom"><div class="kssPaddingBox">col-4</div></div>
491
- <div class="col-8 marginBottom"><div class="kssPaddingBox">col-8</div></div>
492
- </div>
493
- <div class="row gridGap--large">
494
- <div class="col-5 marginBottom"><div class="kssPaddingBox">col-5</div></div>
495
- <div class="col-7 marginBottom"><div class="kssPaddingBox">col-7</div></div>
496
- </div>
497
- <div class="row gridGap--large">
498
- <div class="col-6 marginBottom"><div class="kssPaddingBox">col-6</div></div>
499
- <div class="col-6 marginBottom"><div class="kssPaddingBox">col-6</div></div>
500
- </div>
501
- <div class="kss-modifier__example-footer"></div>
502
- </div>
503
- </div>
504
-
505
- <details class="kss-markup kss-style">
506
- <summary>
507
- Markup
508
- </summary>
509
- <pre class="hljs"><code class="language-handlebars"><span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;row [modifier class]&quot;</span>&gt;</span>
510
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;col marginBottom&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;kssPaddingBox&quot;</span>&gt;</span>col<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
511
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
512
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;row [modifier class]&quot;</span>&gt;</span>
513
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;col-12 marginBottom&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;kssPaddingBox&quot;</span>&gt;</span>col-12<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
514
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
515
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;row [modifier class]&quot;</span>&gt;</span>
516
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;col-1 marginBottom&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;kssPaddingBox&quot;</span>&gt;</span>col-1<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
517
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;col-11 marginBottom&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;kssPaddingBox&quot;</span>&gt;</span>col-11<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
518
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
519
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;row [modifier class]&quot;</span>&gt;</span>
520
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;col-2 marginBottom&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;kssPaddingBox&quot;</span>&gt;</span>col-2<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
521
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;col-10 marginBottom&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;kssPaddingBox&quot;</span>&gt;</span>col-10<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
522
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
523
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;row [modifier class]&quot;</span>&gt;</span>
524
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;col-3 marginBottom&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;kssPaddingBox&quot;</span>&gt;</span>col-3<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
525
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;col-9 marginBottom&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;kssPaddingBox&quot;</span>&gt;</span>col-9<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
526
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
527
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;row [modifier class]&quot;</span>&gt;</span>
528
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;col-4 marginBottom&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;kssPaddingBox&quot;</span>&gt;</span>col-4<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
529
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;col-8 marginBottom&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;kssPaddingBox&quot;</span>&gt;</span>col-8<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
530
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
531
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;row [modifier class]&quot;</span>&gt;</span>
532
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;col-5 marginBottom&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;kssPaddingBox&quot;</span>&gt;</span>col-5<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
533
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;col-7 marginBottom&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;kssPaddingBox&quot;</span>&gt;</span>col-7<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
534
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
535
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;row [modifier class]&quot;</span>&gt;</span>
536
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;col-6 marginBottom&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;kssPaddingBox&quot;</span>&gt;</span>col-6<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
537
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;col-6 marginBottom&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;kssPaddingBox&quot;</span>&gt;</span>col-6<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
538
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span></code></pre>
539
- </details>
540
-
541
- <div class="kss-source kss-style">
542
- Source: <code>build/doc/doc.css</code>, line 5234
543
- </div>
544
-
545
- </section>
546
- <section id="kssref-structure-margins" class="kss-section kss-section--depth-2 ">
547
-
548
- <div class="kss-style">
549
- <h2 class="kss-title kss-title--level-2">
550
- <a class="kss-title__permalink" href="#kssref-structure-margins">
551
- <span class="kss-title__ref">
552
- 8.3
553
- <span class="kss-title__permalink-hash">
554
- #Structure.Margins
555
- </span>
556
- </span>
557
- Margins
558
- </a>
559
- </h2>
560
-
561
- <p class="kss-toolbar">
562
- <a href="#kssref-structure-margins" data-kss-fullscreen="kssref-structure-margins">
563
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
564
- <svg focusable="false" aria-hidden="true" class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
565
- <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
566
- </svg>
567
- <svg focusable="false" aria-hidden="true" class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
568
- <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
569
- </svg>
570
- </a>
571
- <a href="item-structure-margins.html" target="_blank">
572
- <span class="kss-toolbar__tooltip">Open in new window</span>
573
- <svg focusable="false" aria-hidden="true" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
574
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
575
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
576
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
577
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
578
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
579
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
580
- </svg>
581
- </a>
582
- <a href="#kssref-structure-margins" data-kss-guides="true">
583
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
584
- <svg focusable="false" aria-hidden="true" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
585
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
586
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
587
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
588
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
589
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
590
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
591
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
592
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
593
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
594
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
595
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
596
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
597
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
598
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
599
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
600
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
601
- </svg>
602
- </a>
603
- <a href="#kssref-structure-margins" data-kss-markup="true">
604
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
605
- <svg focusable="false" aria-hidden="true" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
606
- <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
607
- <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
608
- </svg>
609
- </a>
610
- </p>
611
-
612
-
613
-
614
- </div>
615
-
616
- <div class="kss-modifier__wrapper">
617
- <div class="kss-modifier__heading kss-style">
618
- Examples
619
- </div>
620
-
621
- <div class="kss-modifier__default-name kss-style">
622
- Default styling
623
- </div>
624
-
625
- <div class="kss-modifier__example">
626
- <strong>Margin</strong></br>
627
- <div class="m margin"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
628
- <strong>Margin Top</strong></br>
629
- <div class="mt marginTop"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
630
- <strong>Margin Right</strong></br>
631
- <div class="mr marginRight"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
632
- <strong>Margin Bottom</strong></br>
633
- <div class="mb marginBottom"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
634
- <strong>Margin Left</strong></br>
635
- <div class="ml marginLeft"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
636
- <div class="kss-modifier__example-footer"></div>
637
- </div>
638
-
639
- <div class="kss-modifier__name kss-style">
640
- --base
641
- </div>
642
- <div class="kss-modifier__description kss-style">
643
- Margin
644
- </div>
645
- <div class="kss-modifier__example">
646
- <strong>Margin</strong></br>
647
- <div class="m--base margin--base"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
648
- <strong>Margin Top</strong></br>
649
- <div class="mt--base marginTop--base"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
650
- <strong>Margin Right</strong></br>
651
- <div class="mr--base marginRight--base"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
652
- <strong>Margin Bottom</strong></br>
653
- <div class="mb--base marginBottom--base"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
654
- <strong>Margin Left</strong></br>
655
- <div class="ml--base marginLeft--base"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
656
- <div class="kss-modifier__example-footer"></div>
657
- </div>
658
- <div class="kss-modifier__name kss-style">
659
- --xsmall
660
- </div>
661
- <div class="kss-modifier__description kss-style">
662
- xSmall Margin
663
- </div>
664
- <div class="kss-modifier__example">
665
- <strong>Margin</strong></br>
666
- <div class="m--xsmall margin--xsmall"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
667
- <strong>Margin Top</strong></br>
668
- <div class="mt--xsmall marginTop--xsmall"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
669
- <strong>Margin Right</strong></br>
670
- <div class="mr--xsmall marginRight--xsmall"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
671
- <strong>Margin Bottom</strong></br>
672
- <div class="mb--xsmall marginBottom--xsmall"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
673
- <strong>Margin Left</strong></br>
674
- <div class="ml--xsmall marginLeft--xsmall"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
675
- <div class="kss-modifier__example-footer"></div>
676
- </div>
677
- <div class="kss-modifier__name kss-style">
678
- --small
679
- </div>
680
- <div class="kss-modifier__description kss-style">
681
- Small Margin
682
- </div>
683
- <div class="kss-modifier__example">
684
- <strong>Margin</strong></br>
685
- <div class="m--small margin--small"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
686
- <strong>Margin Top</strong></br>
687
- <div class="mt--small marginTop--small"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
688
- <strong>Margin Right</strong></br>
689
- <div class="mr--small marginRight--small"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
690
- <strong>Margin Bottom</strong></br>
691
- <div class="mb--small marginBottom--small"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
692
- <strong>Margin Left</strong></br>
693
- <div class="ml--small marginLeft--small"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
694
- <div class="kss-modifier__example-footer"></div>
695
- </div>
696
- <div class="kss-modifier__name kss-style">
697
- --large
698
- </div>
699
- <div class="kss-modifier__description kss-style">
700
- Large Margin
701
- </div>
702
- <div class="kss-modifier__example">
703
- <strong>Margin</strong></br>
704
- <div class="m--large margin--large"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
705
- <strong>Margin Top</strong></br>
706
- <div class="mt--large marginTop--large"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
707
- <strong>Margin Right</strong></br>
708
- <div class="mr--large marginRight--large"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
709
- <strong>Margin Bottom</strong></br>
710
- <div class="mb--large marginBottom--large"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
711
- <strong>Margin Left</strong></br>
712
- <div class="ml--large marginLeft--large"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
713
- <div class="kss-modifier__example-footer"></div>
714
- </div>
715
- <div class="kss-modifier__name kss-style">
716
- --xlarge
717
- </div>
718
- <div class="kss-modifier__description kss-style">
719
- xLarge Margin
720
- </div>
721
- <div class="kss-modifier__example">
722
- <strong>Margin</strong></br>
723
- <div class="m--xlarge margin--xlarge"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
724
- <strong>Margin Top</strong></br>
725
- <div class="mt--xlarge marginTop--xlarge"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
726
- <strong>Margin Right</strong></br>
727
- <div class="mr--xlarge marginRight--xlarge"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
728
- <strong>Margin Bottom</strong></br>
729
- <div class="mb--xlarge marginBottom--xlarge"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
730
- <strong>Margin Left</strong></br>
731
- <div class="ml--xlarge marginLeft--xlarge"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
732
- <div class="kss-modifier__example-footer"></div>
733
- </div>
734
- </div>
735
-
736
- <details class="kss-markup kss-style">
737
- <summary>
738
- Markup
739
- </summary>
740
- <pre class="hljs"><code class="language-handlebars"><span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>Margin<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">br</span>&gt;</span>
741
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;m[modifier class] margin[modifier class]&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;kssPaddingBox&quot;</span>&gt;</span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
742
- <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>Margin Top<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">br</span>&gt;</span>
743
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;mt[modifier class] marginTop[modifier class]&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;kssPaddingBox&quot;</span>&gt;</span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
744
- <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>Margin Right<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">br</span>&gt;</span>
745
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;mr[modifier class] marginRight[modifier class]&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;kssPaddingBox&quot;</span>&gt;</span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
746
- <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>Margin Bottom<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">br</span>&gt;</span>
747
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;mb[modifier class] marginBottom[modifier class]&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;kssPaddingBox&quot;</span>&gt;</span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
748
- <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>Margin Left<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">br</span>&gt;</span>
749
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;ml[modifier class] marginLeft[modifier class]&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;kssPaddingBox&quot;</span>&gt;</span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span></code></pre>
750
- </details>
751
-
752
- <div class="kss-source kss-style">
753
- Source: <code>build/doc/doc.css</code>, line 4778
754
- </div>
755
-
756
- </section>
757
- <section id="kssref-structure-paddings" class="kss-section kss-section--depth-2 ">
758
-
759
- <div class="kss-style">
760
- <h2 class="kss-title kss-title--level-2">
761
- <a class="kss-title__permalink" href="#kssref-structure-paddings">
762
- <span class="kss-title__ref">
763
- 8.4
764
- <span class="kss-title__permalink-hash">
765
- #Structure.Paddings
766
- </span>
767
- </span>
768
- Paddings
769
- </a>
770
- </h2>
771
-
772
- <p class="kss-toolbar">
773
- <a href="#kssref-structure-paddings" data-kss-fullscreen="kssref-structure-paddings">
774
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
775
- <svg focusable="false" aria-hidden="true" class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
776
- <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
777
- </svg>
778
- <svg focusable="false" aria-hidden="true" class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
779
- <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
780
- </svg>
781
- </a>
782
- <a href="item-structure-paddings.html" target="_blank">
783
- <span class="kss-toolbar__tooltip">Open in new window</span>
784
- <svg focusable="false" aria-hidden="true" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
785
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
786
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
787
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
788
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
789
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
790
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
791
- </svg>
792
- </a>
793
- <a href="#kssref-structure-paddings" data-kss-guides="true">
794
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
795
- <svg focusable="false" aria-hidden="true" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
796
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
797
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
798
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
799
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
800
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
801
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
802
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
803
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
804
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
805
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
806
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
807
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
808
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
809
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
810
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
811
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
812
- </svg>
813
- </a>
814
- <a href="#kssref-structure-paddings" data-kss-markup="true">
815
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
816
- <svg focusable="false" aria-hidden="true" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
817
- <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
818
- <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
819
- </svg>
820
- </a>
821
- </p>
822
-
823
-
824
-
825
- </div>
826
-
827
- <div class="kss-modifier__wrapper">
828
- <div class="kss-modifier__heading kss-style">
829
- Examples
830
- </div>
831
-
832
- <div class="kss-modifier__default-name kss-style">
833
- Default styling
834
- </div>
835
-
836
- <div class="kss-modifier__example">
837
- <strong>Padding</strong></br>
838
- <div class="m padding"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
839
- <strong>Padding Top</strong></br>
840
- <div class="mt paddingTop"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
841
- <strong>Padding Right</strong></br>
842
- <div class="mr paddingRight"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
843
- <strong>Padding Bottom</strong></br>
844
- <div class="mb paddingBottom"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
845
- <strong>Padding Left</strong></br>
846
- <div class="ml paddingLeft"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
847
- <div class="kss-modifier__example-footer"></div>
848
- </div>
849
-
850
- <div class="kss-modifier__name kss-style">
851
- --base
852
- </div>
853
- <div class="kss-modifier__description kss-style">
854
- Padding
855
- </div>
856
- <div class="kss-modifier__example">
857
- <strong>Padding</strong></br>
858
- <div class="m--base padding--base"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
859
- <strong>Padding Top</strong></br>
860
- <div class="mt--base paddingTop--base"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
861
- <strong>Padding Right</strong></br>
862
- <div class="mr--base paddingRight--base"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
863
- <strong>Padding Bottom</strong></br>
864
- <div class="mb--base paddingBottom--base"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
865
- <strong>Padding Left</strong></br>
866
- <div class="ml--base paddingLeft--base"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
867
- <div class="kss-modifier__example-footer"></div>
868
- </div>
869
- <div class="kss-modifier__name kss-style">
870
- --xsmall
871
- </div>
872
- <div class="kss-modifier__description kss-style">
873
- xSmall Padding
874
- </div>
875
- <div class="kss-modifier__example">
876
- <strong>Padding</strong></br>
877
- <div class="m--xsmall padding--xsmall"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
878
- <strong>Padding Top</strong></br>
879
- <div class="mt--xsmall paddingTop--xsmall"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
880
- <strong>Padding Right</strong></br>
881
- <div class="mr--xsmall paddingRight--xsmall"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
882
- <strong>Padding Bottom</strong></br>
883
- <div class="mb--xsmall paddingBottom--xsmall"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
884
- <strong>Padding Left</strong></br>
885
- <div class="ml--xsmall paddingLeft--xsmall"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
886
- <div class="kss-modifier__example-footer"></div>
887
- </div>
888
- <div class="kss-modifier__name kss-style">
889
- --small
890
- </div>
891
- <div class="kss-modifier__description kss-style">
892
- Small Padding
893
- </div>
894
- <div class="kss-modifier__example">
895
- <strong>Padding</strong></br>
896
- <div class="m--small padding--small"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
897
- <strong>Padding Top</strong></br>
898
- <div class="mt--small paddingTop--small"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
899
- <strong>Padding Right</strong></br>
900
- <div class="mr--small paddingRight--small"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
901
- <strong>Padding Bottom</strong></br>
902
- <div class="mb--small paddingBottom--small"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
903
- <strong>Padding Left</strong></br>
904
- <div class="ml--small paddingLeft--small"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
905
- <div class="kss-modifier__example-footer"></div>
906
- </div>
907
- <div class="kss-modifier__name kss-style">
908
- --large
909
- </div>
910
- <div class="kss-modifier__description kss-style">
911
- Large Padding
912
- </div>
913
- <div class="kss-modifier__example">
914
- <strong>Padding</strong></br>
915
- <div class="m--large padding--large"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
916
- <strong>Padding Top</strong></br>
917
- <div class="mt--large paddingTop--large"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
918
- <strong>Padding Right</strong></br>
919
- <div class="mr--large paddingRight--large"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
920
- <strong>Padding Bottom</strong></br>
921
- <div class="mb--large paddingBottom--large"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
922
- <strong>Padding Left</strong></br>
923
- <div class="ml--large paddingLeft--large"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
924
- <div class="kss-modifier__example-footer"></div>
925
- </div>
926
- <div class="kss-modifier__name kss-style">
927
- --xlarge
928
- </div>
929
- <div class="kss-modifier__description kss-style">
930
- xLarge Padding
931
- </div>
932
- <div class="kss-modifier__example">
933
- <strong>Padding</strong></br>
934
- <div class="m--xlarge padding--xlarge"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
935
- <strong>Padding Top</strong></br>
936
- <div class="mt--xlarge paddingTop--xlarge"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
937
- <strong>Padding Right</strong></br>
938
- <div class="mr--xlarge paddingRight--xlarge"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
939
- <strong>Padding Bottom</strong></br>
940
- <div class="mb--xlarge paddingBottom--xlarge"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
941
- <strong>Padding Left</strong></br>
942
- <div class="ml--xlarge paddingLeft--xlarge"><div class="kssPaddingBox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</div></div>
943
- <div class="kss-modifier__example-footer"></div>
944
- </div>
945
- </div>
946
-
947
- <details class="kss-markup kss-style">
948
- <summary>
949
- Markup
950
- </summary>
951
- <pre class="hljs"><code class="language-handlebars"><span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>Padding<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">br</span>&gt;</span>
952
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;m[modifier class] padding[modifier class]&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;kssPaddingBox&quot;</span>&gt;</span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
953
- <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>Padding Top<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">br</span>&gt;</span>
954
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;mt[modifier class] paddingTop[modifier class]&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;kssPaddingBox&quot;</span>&gt;</span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
955
- <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>Padding Right<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">br</span>&gt;</span>
956
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;mr[modifier class] paddingRight[modifier class]&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;kssPaddingBox&quot;</span>&gt;</span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
957
- <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>Padding Bottom<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">br</span>&gt;</span>
958
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;mb[modifier class] paddingBottom[modifier class]&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;kssPaddingBox&quot;</span>&gt;</span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
959
- <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>Padding Left<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">br</span>&gt;</span>
960
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;ml[modifier class] paddingLeft[modifier class]&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;kssPaddingBox&quot;</span>&gt;</span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span></code></pre>
961
- </details>
962
-
963
- <div class="kss-source kss-style">
964
- Source: <code>build/doc/doc.css</code>, line 4370
965
- </div>
966
-
967
- </section>
968
- </article>
969
- </main>
970
-
971
- <!-- SCRIPTS -->
972
- <script src="kss-assets/kss.js"></script>
973
- <script src="kss-assets/scrollspy.js"></script>
974
- <script src="kss-assets/kss-fullscreen.js"></script>
975
- <script src="kss-assets/kss-guides.js"></script>
976
- <script src="kss-assets/kss-markup.js"></script>
977
- <script>
978
- var spy = new ScrollSpy('#kss-node', {
979
- nav: '.kss-nav__menu-child > li > a',
980
- className: 'is-in-viewport'
981
- });
982
- var kssFullScreen = new KssFullScreen({
983
- idPrefix: 'kss-fullscreen-',
984
- bodyClass: 'kss-fullscreen-mode',
985
- elementClass: 'is-fullscreen'
986
- });
987
- var kssGuides = new KssGuides({
988
- bodyClass: 'kss-guides-mode'
989
- });
990
- var kssMarkup = new KssMarkup({
991
- bodyClass: 'kss-markup-mode',
992
- detailsClass: 'kss-markup'
993
- });
994
- </script>
995
- <script src="../../default/b2c/dist/js/main.js"></script>
996
- <script src="../dist/js/main.js"></script>
997
-
998
-
999
-
1000
- <!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
1001
- </body>
1002
- </html>