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
package/child/styleguide/section-components.html DELETED
@@ -1,3375 +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
- <ul class="kss-nav__menu-child">
46
- <li class="kss-nav__menu-item">
47
- <a class="kss-nav__menu-link" href="section-components.html#kssref-components-action-icon">
48
- <span class="kss-nav__ref ">3.1</span
49
- ><span class="kss-nav__name">Action Icon</span>
50
- </a>
51
- </li>
52
- <li class="kss-nav__menu-item">
53
- <a class="kss-nav__menu-link" href="section-components.html#kssref-components-actionbox">
54
- <span class="kss-nav__ref ">3.2</span
55
- ><span class="kss-nav__name">Actionbox</span>
56
- </a>
57
- </li>
58
- <li class="kss-nav__menu-item">
59
- <a class="kss-nav__menu-link" href="section-components.html#kssref-components-alerts">
60
- <span class="kss-nav__ref ">3.3</span
61
- ><span class="kss-nav__name">Alerts</span>
62
- </a>
63
- </li>
64
- <li class="kss-nav__menu-item">
65
- <a class="kss-nav__menu-link" href="section-components.html#kssref-components-breadcrumb">
66
- <span class="kss-nav__ref ">3.4</span
67
- ><span class="kss-nav__name">Breadcrumb</span>
68
- </a>
69
- </li>
70
- <li class="kss-nav__menu-item">
71
- <a class="kss-nav__menu-link" href="section-components.html#kssref-components-custom-select">
72
- <span class="kss-nav__ref ">3.5</span
73
- ><span class="kss-nav__name">Custom Select</span>
74
- </a>
75
- </li>
76
- <li class="kss-nav__menu-item">
77
- <a class="kss-nav__menu-link" href="section-components.html#kssref-components-iconbar">
78
- <span class="kss-nav__ref ">3.6</span
79
- ><span class="kss-nav__name">Iconbar</span>
80
- </a>
81
- </li>
82
- <li class="kss-nav__menu-item">
83
- <a class="kss-nav__menu-link" href="section-components.html#kssref-components-iconbox">
84
- <span class="kss-nav__ref ">3.7</span
85
- ><span class="kss-nav__name">Iconbox</span>
86
- </a>
87
- </li>
88
- <li class="kss-nav__menu-item">
89
- <a class="kss-nav__menu-link" href="section-components.html#kssref-components-iconlist">
90
- <span class="kss-nav__ref ">3.8</span
91
- ><span class="kss-nav__name">Iconlist</span>
92
- </a>
93
- </li>
94
- <li class="kss-nav__menu-item">
95
- <a class="kss-nav__menu-link" href="section-components.html#kssref-components-modals">
96
- <span class="kss-nav__ref ">3.9</span
97
- ><span class="kss-nav__name">Modals</span>
98
- </a>
99
- </li>
100
- <li class="kss-nav__menu-item">
101
- <a class="kss-nav__menu-link" href="section-components.html#kssref-components-pagination">
102
- <span class="kss-nav__ref ">3.10</span
103
- ><span class="kss-nav__name">Pagination</span>
104
- </a>
105
- </li>
106
- <li class="kss-nav__menu-item">
107
- <a class="kss-nav__menu-link" href="section-components.html#kssref-components-processbar">
108
- <span class="kss-nav__ref ">3.11</span
109
- ><span class="kss-nav__name">Processbar</span>
110
- </a>
111
- </li>
112
- <li class="kss-nav__menu-item">
113
- <a class="kss-nav__menu-link" href="section-components.html#kssref-components-radio-list">
114
- <span class="kss-nav__ref ">3.12</span
115
- ><span class="kss-nav__name">Radio List</span>
116
- </a>
117
- </li>
118
- <li class="kss-nav__menu-item">
119
- <a class="kss-nav__menu-link" href="section-components.html#kssref-components-rating">
120
- <span class="kss-nav__ref ">3.13</span
121
- ><span class="kss-nav__name">Rating</span>
122
- </a>
123
- </li>
124
- <li class="kss-nav__menu-item">
125
- <a class="kss-nav__menu-link" href="section-components.html#kssref-components-searchbar">
126
- <span class="kss-nav__ref ">3.14</span
127
- ><span class="kss-nav__name">Searchbar</span>
128
- </a>
129
- </li>
130
- <li class="kss-nav__menu-item">
131
- <a class="kss-nav__menu-link" href="section-components.html#kssref-components-share-links">
132
- <span class="kss-nav__ref ">3.15</span
133
- ><span class="kss-nav__name">Share Links</span>
134
- </a>
135
- </li>
136
- <li class="kss-nav__menu-item">
137
- <a class="kss-nav__menu-link" href="section-components.html#kssref-components-tags">
138
- <span class="kss-nav__ref ">3.16</span
139
- ><span class="kss-nav__name">Tags</span>
140
- </a>
141
- </li>
142
- <li class="kss-nav__menu-item">
143
- <a class="kss-nav__menu-link" href="section-components.html#kssref-components-tags-group">
144
- <span class="kss-nav__ref ">3.17</span
145
- ><span class="kss-nav__name">Tags Group</span>
146
- </a>
147
- </li>
148
- <li class="kss-nav__menu-item">
149
- <a class="kss-nav__menu-link" href="section-components.html#kssref-components-trust-infobar">
150
- <span class="kss-nav__ref ">3.18</span
151
- ><span class="kss-nav__name">Trust Infobar</span>
152
- </a>
153
- </li>
154
- <li class="kss-nav__menu-item">
155
- <a class="kss-nav__menu-link" href="section-components.html#kssref-components-trustbar">
156
- <span class="kss-nav__ref ">3.19</span
157
- ><span class="kss-nav__name">Trustbar</span>
158
- </a>
159
- </li>
160
- <li class="kss-nav__menu-item">
161
- <a class="kss-nav__menu-link" href="section-components.html#kssref-components-trustlist">
162
- <span class="kss-nav__ref ">3.20</span
163
- ><span class="kss-nav__name">Trustlist</span>
164
- </a>
165
- </li>
166
- </ul>
167
- </li>
168
- <li class="kss-nav__menu-item">
169
- <a class="kss-nav__menu-link" href="section-form.html">
170
- <span class="kss-nav__ref">4</span><span class="kss-nav__name">Form</span>
171
- </a>
172
- </li>
173
- <li class="kss-nav__menu-item">
174
- <a class="kss-nav__menu-link" href="section-navigations.html">
175
- <span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigations</span>
176
- </a>
177
- </li>
178
- <li class="kss-nav__menu-item">
179
- <a class="kss-nav__menu-link" href="section-shop.html">
180
- <span class="kss-nav__ref">6</span><span class="kss-nav__name">Shop</span>
181
- </a>
182
- </li>
183
- <li class="kss-nav__menu-item">
184
- <a class="kss-nav__menu-link" href="section-siteparts.html">
185
- <span class="kss-nav__ref">7</span><span class="kss-nav__name">Siteparts</span>
186
- </a>
187
- </li>
188
- <li class="kss-nav__menu-item">
189
- <a class="kss-nav__menu-link" href="section-structure.html">
190
- <span class="kss-nav__ref">8</span><span class="kss-nav__name">Structure</span>
191
- </a>
192
- </li>
193
- <li class="kss-nav__menu-item">
194
- <a class="kss-nav__menu-link" href="section-typo.html">
195
- <span class="kss-nav__ref">9</span><span class="kss-nav__name">Typo</span>
196
- </a>
197
- </li>
198
- </ul>
199
- </nav>
200
- </div>
201
- <main class="kss-main" aria-label="Content">
202
- <article>
203
-
204
- <div id="kssref-components" class="kss-section kss-section--depth-1 ">
205
-
206
- <div class="kss-style">
207
- <h1 class="kss-title kss-title--level-1">
208
- <a class="kss-title__permalink" href="#kssref-components">
209
- <span class="kss-title__ref">
210
- 3
211
- <span class="kss-title__permalink-hash">
212
- #Components
213
- </span>
214
- </span>
215
- Components
216
- </a>
217
- </h1>
218
-
219
-
220
-
221
-
222
- </div>
223
-
224
-
225
-
226
- </div>
227
- <section id="kssref-components-action-icon" class="kss-section kss-section--depth-2 ">
228
-
229
- <div class="kss-style">
230
- <h2 class="kss-title kss-title--level-2">
231
- <a class="kss-title__permalink" href="#kssref-components-action-icon">
232
- <span class="kss-title__ref">
233
- 3.1
234
- <span class="kss-title__permalink-hash">
235
- #Components.Action Icon
236
- </span>
237
- </span>
238
- Action Icon
239
- </a>
240
- </h2>
241
-
242
- <p class="kss-toolbar">
243
- <a href="#kssref-components-action-icon" data-kss-fullscreen="kssref-components-action-icon">
244
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
245
- <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">
246
- <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>
247
- </svg>
248
- <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">
249
- <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>
250
- </svg>
251
- </a>
252
- <a href="item-components-action-icon.html" target="_blank">
253
- <span class="kss-toolbar__tooltip">Open in new window</span>
254
- <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">
255
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
256
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
257
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
258
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
259
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
260
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
261
- </svg>
262
- </a>
263
- <a href="#kssref-components-action-icon" data-kss-guides="true">
264
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
265
- <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">
266
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
267
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
268
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
269
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
270
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
271
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
272
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
273
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
274
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
275
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
276
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
277
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
278
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
279
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
280
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
281
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
282
- </svg>
283
- </a>
284
- <a href="#kssref-components-action-icon" data-kss-markup="true">
285
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
286
- <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">
287
- <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"/>
288
- <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"/>
289
- </svg>
290
- </a>
291
- </p>
292
-
293
-
294
-
295
- </div>
296
-
297
- <div class="kss-modifier__wrapper">
298
- <div class="kss-modifier__heading kss-style">
299
- Examples
300
- </div>
301
-
302
- <div class="kss-modifier__default-name kss-style">
303
- Default styling
304
- </div>
305
-
306
- <div class="kss-modifier__example">
307
- <button class="actionIcon "><i class="icon icon-favorites"></i></button>
308
- <div class="kss-modifier__example-footer"></div>
309
- </div>
310
-
311
- <div class="kss-modifier__name kss-style">
312
- :hover
313
- </div>
314
- <div class="kss-modifier__description kss-style">
315
- Hover
316
- </div>
317
- <div class="kss-modifier__example">
318
- <button class="actionIcon pseudo-class-hover"><i class="icon icon-favorites"></i></button>
319
- <div class="kss-modifier__example-footer"></div>
320
- </div>
321
- <div class="kss-modifier__name kss-style">
322
- :focus
323
- </div>
324
- <div class="kss-modifier__description kss-style">
325
- Focus
326
- </div>
327
- <div class="kss-modifier__example">
328
- <button class="actionIcon pseudo-class-focus"><i class="icon icon-favorites"></i></button>
329
- <div class="kss-modifier__example-footer"></div>
330
- </div>
331
- <div class="kss-modifier__name kss-style">
332
- .is-loading
333
- </div>
334
- <div class="kss-modifier__description kss-style">
335
- Loading
336
- </div>
337
- <div class="kss-modifier__example">
338
- <button class="actionIcon is-loading"><i class="icon icon-favorites"></i></button>
339
- <div class="kss-modifier__example-footer"></div>
340
- </div>
341
- <div class="kss-modifier__name kss-style">
342
- .is-success
343
- </div>
344
- <div class="kss-modifier__description kss-style">
345
- Success
346
- </div>
347
- <div class="kss-modifier__example">
348
- <button class="actionIcon is-success"><i class="icon icon-favorites"></i></button>
349
- <div class="kss-modifier__example-footer"></div>
350
- </div>
351
- <div class="kss-modifier__name kss-style">
352
- .is-error
353
- </div>
354
- <div class="kss-modifier__description kss-style">
355
- Error
356
- </div>
357
- <div class="kss-modifier__example">
358
- <button class="actionIcon is-error"><i class="icon icon-favorites"></i></button>
359
- <div class="kss-modifier__example-footer"></div>
360
- </div>
361
- </div>
362
-
363
- <details class="kss-markup kss-style">
364
- <summary>
365
- Markup
366
- </summary>
367
- <pre class="hljs"><code class="language-handlebars"><span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;actionIcon [modifier class]&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;icon icon-favorites&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></span></code></pre>
368
- </details>
369
-
370
- <div class="kss-source kss-style">
371
- Source: <code>build/doc/doc.css</code>, line 11507
372
- </div>
373
-
374
- </section>
375
- <section id="kssref-components-actionbox" class="kss-section kss-section--depth-2 ">
376
-
377
- <div class="kss-style">
378
- <h2 class="kss-title kss-title--level-2">
379
- <a class="kss-title__permalink" href="#kssref-components-actionbox">
380
- <span class="kss-title__ref">
381
- 3.2
382
- <span class="kss-title__permalink-hash">
383
- #Components.Actionbox
384
- </span>
385
- </span>
386
- Actionbox
387
- </a>
388
- </h2>
389
-
390
- <p class="kss-toolbar">
391
- <a href="#kssref-components-actionbox" data-kss-fullscreen="kssref-components-actionbox">
392
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
393
- <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">
394
- <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>
395
- </svg>
396
- <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">
397
- <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>
398
- </svg>
399
- </a>
400
- <a href="item-components-actionbox.html" target="_blank">
401
- <span class="kss-toolbar__tooltip">Open in new window</span>
402
- <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">
403
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
404
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
405
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
406
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
407
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
408
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
409
- </svg>
410
- </a>
411
- <a href="#kssref-components-actionbox" data-kss-guides="true">
412
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
413
- <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">
414
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
415
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
416
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
417
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
418
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
419
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
420
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
421
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
422
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
423
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
424
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
425
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
426
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
427
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
428
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
429
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
430
- </svg>
431
- </a>
432
- <a href="#kssref-components-actionbox" data-kss-markup="true">
433
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
434
- <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">
435
- <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"/>
436
- <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"/>
437
- </svg>
438
- </a>
439
- </p>
440
-
441
-
442
-
443
- </div>
444
-
445
- <div class="kss-modifier__wrapper">
446
- <div class="kss-modifier__heading kss-style">
447
- Example
448
- </div>
449
-
450
-
451
- <div class="kss-modifier__example">
452
- <div class="actionBox">
453
- Text
454
- </div>
455
- <div class="kss-modifier__example-footer"></div>
456
- </div>
457
-
458
- </div>
459
-
460
- <details class="kss-markup kss-style">
461
- <summary>
462
- Markup
463
- </summary>
464
- <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;actionBox&quot;</span>&gt;</span>
465
- Text
466
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span></code></pre>
467
- </details>
468
-
469
- <div class="kss-source kss-style">
470
- Source: <code>build/doc/doc.css</code>, line 13902
471
- </div>
472
-
473
- </section>
474
- <section id="kssref-components-alerts" class="kss-section kss-section--depth-2 ">
475
-
476
- <div class="kss-style">
477
- <h2 class="kss-title kss-title--level-2">
478
- <a class="kss-title__permalink" href="#kssref-components-alerts">
479
- <span class="kss-title__ref">
480
- 3.3
481
- <span class="kss-title__permalink-hash">
482
- #Components.Alerts
483
- </span>
484
- </span>
485
- Alerts
486
- </a>
487
- </h2>
488
-
489
- <p class="kss-toolbar">
490
- <a href="#kssref-components-alerts" data-kss-fullscreen="kssref-components-alerts">
491
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
492
- <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">
493
- <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>
494
- </svg>
495
- <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">
496
- <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>
497
- </svg>
498
- </a>
499
- <a href="item-components-alerts.html" target="_blank">
500
- <span class="kss-toolbar__tooltip">Open in new window</span>
501
- <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">
502
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
503
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
504
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
505
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
506
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
507
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
508
- </svg>
509
- </a>
510
- <a href="#kssref-components-alerts" data-kss-guides="true">
511
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
512
- <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">
513
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
514
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
515
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
516
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
517
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
518
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
519
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
520
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
521
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
522
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
523
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
524
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
525
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
526
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
527
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
528
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
529
- </svg>
530
- </a>
531
- <a href="#kssref-components-alerts" data-kss-markup="true">
532
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
533
- <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">
534
- <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"/>
535
- <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"/>
536
- </svg>
537
- </a>
538
- </p>
539
-
540
-
541
-
542
- </div>
543
-
544
- <div class="kss-modifier__wrapper">
545
- <div class="kss-modifier__heading kss-style">
546
- Examples
547
- </div>
548
-
549
- <div class="kss-modifier__default-name kss-style">
550
- Default styling
551
- </div>
552
-
553
- <div class="kss-modifier__example">
554
- <div class="alert ">Text</div>
555
- <div class="kss-modifier__example-footer"></div>
556
- </div>
557
-
558
- <div class="kss-modifier__name kss-style">
559
- .alert--danger
560
- </div>
561
- <div class="kss-modifier__description kss-style">
562
- Danger
563
- </div>
564
- <div class="kss-modifier__example">
565
- <div class="alert alert--danger">Text</div>
566
- <div class="kss-modifier__example-footer"></div>
567
- </div>
568
- <div class="kss-modifier__name kss-style">
569
- .alert--success
570
- </div>
571
- <div class="kss-modifier__description kss-style">
572
- Success
573
- </div>
574
- <div class="kss-modifier__example">
575
- <div class="alert alert--success">Text</div>
576
- <div class="kss-modifier__example-footer"></div>
577
- </div>
578
- <div class="kss-modifier__name kss-style">
579
- .alert--warning
580
- </div>
581
- <div class="kss-modifier__description kss-style">
582
- Warning
583
- </div>
584
- <div class="kss-modifier__example">
585
- <div class="alert alert--warning">Text</div>
586
- <div class="kss-modifier__example-footer"></div>
587
- </div>
588
- <div class="kss-modifier__name kss-style">
589
- .alert--primary
590
- </div>
591
- <div class="kss-modifier__description kss-style">
592
- Primary
593
- </div>
594
- <div class="kss-modifier__example">
595
- <div class="alert alert--primary">Text</div>
596
- <div class="kss-modifier__example-footer"></div>
597
- </div>
598
- <div class="kss-modifier__name kss-style">
599
- .alert--secondary
600
- </div>
601
- <div class="kss-modifier__description kss-style">
602
- Secondary
603
- </div>
604
- <div class="kss-modifier__example">
605
- <div class="alert alert--secondary">Text</div>
606
- <div class="kss-modifier__example-footer"></div>
607
- </div>
608
- </div>
609
-
610
- <details class="kss-markup kss-style">
611
- <summary>
612
- Markup
613
- </summary>
614
- <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;alert [modifier class]&quot;</span>&gt;</span>Text<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span></code></pre>
615
- </details>
616
-
617
- <div class="kss-source kss-style">
618
- Source: <code>build/doc/doc.css</code>, line 9788
619
- </div>
620
-
621
- </section>
622
- <section id="kssref-components-breadcrumb" class="kss-section kss-section--depth-2 ">
623
-
624
- <div class="kss-style">
625
- <h2 class="kss-title kss-title--level-2">
626
- <a class="kss-title__permalink" href="#kssref-components-breadcrumb">
627
- <span class="kss-title__ref">
628
- 3.4
629
- <span class="kss-title__permalink-hash">
630
- #Components.Breadcrumb
631
- </span>
632
- </span>
633
- Breadcrumb
634
- </a>
635
- </h2>
636
-
637
- <p class="kss-toolbar">
638
- <a href="#kssref-components-breadcrumb" data-kss-fullscreen="kssref-components-breadcrumb">
639
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
640
- <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">
641
- <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>
642
- </svg>
643
- <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">
644
- <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>
645
- </svg>
646
- </a>
647
- <a href="item-components-breadcrumb.html" target="_blank">
648
- <span class="kss-toolbar__tooltip">Open in new window</span>
649
- <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">
650
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
651
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
652
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
653
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
654
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
655
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
656
- </svg>
657
- </a>
658
- <a href="#kssref-components-breadcrumb" data-kss-guides="true">
659
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
660
- <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">
661
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
662
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
663
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
664
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
665
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
666
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
667
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
668
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
669
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
670
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
671
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
672
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
673
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
674
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
675
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
676
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
677
- </svg>
678
- </a>
679
- <a href="#kssref-components-breadcrumb" data-kss-markup="true">
680
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
681
- <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">
682
- <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"/>
683
- <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"/>
684
- </svg>
685
- </a>
686
- </p>
687
-
688
-
689
-
690
- </div>
691
-
692
- <div class="kss-modifier__wrapper">
693
- <div class="kss-modifier__heading kss-style">
694
- Example
695
- </div>
696
-
697
-
698
- <div class="kss-modifier__example">
699
- <div class="breadcrumbWrapper">
700
- <div class="breadcrumb">
701
- <a href="#">Level 1</a>
702
- <i class="icon icon-angle-right"></i>
703
- <a href="#">Level 2</a>
704
- <i class="icon icon-angle-right"></i>
705
- <span class="current">Current</span>
706
- </div>
707
- <a class="breadcrumbBackbutton" href="#"><i class="icon icon-angle-left"></i>Back</a>
708
- </div>
709
- <div class="kss-modifier__example-footer"></div>
710
- </div>
711
-
712
- </div>
713
-
714
- <details class="kss-markup kss-style">
715
- <summary>
716
- Markup
717
- </summary>
718
- <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;breadcrumbWrapper&quot;</span>&gt;</span>
719
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;breadcrumb&quot;</span>&gt;</span>
720
- <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span>&gt;</span>Level 1<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
721
- <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;icon icon-angle-right&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
722
- <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span>&gt;</span>Level 2<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
723
- <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;icon icon-angle-right&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
724
- <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;current&quot;</span>&gt;</span>Current<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
725
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
726
- <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;breadcrumbBackbutton&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;icon icon-angle-left&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>Back<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
727
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span></code></pre>
728
- </details>
729
-
730
- <div class="kss-source kss-style">
731
- Source: <code>build/doc/doc.css</code>, line 13157
732
- </div>
733
-
734
- </section>
735
- <section id="kssref-components-custom-select" class="kss-section kss-section--depth-2 ">
736
-
737
- <div class="kss-style">
738
- <h2 class="kss-title kss-title--level-2">
739
- <a class="kss-title__permalink" href="#kssref-components-custom-select">
740
- <span class="kss-title__ref">
741
- 3.5
742
- <span class="kss-title__permalink-hash">
743
- #Components.Custom Select
744
- </span>
745
- </span>
746
- Custom Select
747
- </a>
748
- </h2>
749
-
750
- <p class="kss-toolbar">
751
- <a href="#kssref-components-custom-select" data-kss-fullscreen="kssref-components-custom-select">
752
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
753
- <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">
754
- <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>
755
- </svg>
756
- <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">
757
- <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>
758
- </svg>
759
- </a>
760
- <a href="item-components-custom-select.html" target="_blank">
761
- <span class="kss-toolbar__tooltip">Open in new window</span>
762
- <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">
763
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
764
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
765
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
766
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
767
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
768
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
769
- </svg>
770
- </a>
771
- <a href="#kssref-components-custom-select" data-kss-guides="true">
772
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
773
- <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">
774
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
775
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
776
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
777
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
778
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
779
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
780
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
781
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
782
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
783
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
784
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
785
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
786
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
787
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
788
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
789
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
790
- </svg>
791
- </a>
792
- <a href="#kssref-components-custom-select" data-kss-markup="true">
793
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
794
- <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">
795
- <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"/>
796
- <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"/>
797
- </svg>
798
- </a>
799
- </p>
800
-
801
-
802
-
803
- </div>
804
-
805
- <div class="kss-modifier__wrapper">
806
- <div class="kss-modifier__heading kss-style">
807
- Examples
808
- </div>
809
-
810
- <div class="kss-modifier__default-name kss-style">
811
- Default styling
812
- </div>
813
-
814
- <div class="kss-modifier__example">
815
- <div class="customSelect js-customSelect ">
816
- <select>
817
- <option disabled selected></option>
818
- <option value="s">S</option>
819
- <option value="m">M</option>
820
- <option value="l">L</option>
821
- <option value="xl" disabled>XL</option>
822
- <option value="xxl">XXL</option>
823
- </select>
824
- <div class="customSelect__selected">Choose</div>
825
- <div class="customSelect__dropdown">
826
- <div class="customSelect__dropdownClose">
827
- <i class="icon icon-close"></i>
828
- </div>
829
- <div class="customSelect__dropdownHeader d-block d-sm-none">
830
- <div class="customSelect__dropdownTitle">
831
- Title
832
- </div>
833
- </div>
834
- <div class="customSelect__dropdownItem" data-value="s">
835
- <div class="customSelect__dropdownItemHeadline">S</div>
836
- </div>
837
- <div class="customSelect__dropdownItem" data-value="m">
838
- <div class="customSelect__dropdownItemHeadline">M</div>
839
- </div>
840
- <div class="customSelect__dropdownItem" data-value="l">
841
- <div class="customSelect__dropdownItemHeadline">L</div>
842
- </div>
843
- <div class="customSelect__dropdownItem disabled" data-value="xl">
844
- <div class="customSelect__dropdownItemHeadline">XL</div>
845
- <div class="customSelect__dropdownItemText">Not available</div>
846
- </div>
847
- <div class="customSelect__dropdownItem" data-value="xxl">
848
- <div class="customSelect__dropdownItemHeadline">XL</div>
849
- </div>
850
- </div>
851
- </div>
852
- <div class="kss-modifier__example-footer"></div>
853
- </div>
854
-
855
- <div class="kss-modifier__name kss-style">
856
- .is-loading
857
- </div>
858
- <div class="kss-modifier__description kss-style">
859
- is loading
860
- </div>
861
- <div class="kss-modifier__example">
862
- <div class="customSelect js-customSelect is-loading">
863
- <select>
864
- <option disabled selected></option>
865
- <option value="s">S</option>
866
- <option value="m">M</option>
867
- <option value="l">L</option>
868
- <option value="xl" disabled>XL</option>
869
- <option value="xxl">XXL</option>
870
- </select>
871
- <div class="customSelect__selected">Choose</div>
872
- <div class="customSelect__dropdown">
873
- <div class="customSelect__dropdownClose">
874
- <i class="icon icon-close"></i>
875
- </div>
876
- <div class="customSelect__dropdownHeader d-block d-sm-none">
877
- <div class="customSelect__dropdownTitle">
878
- Title
879
- </div>
880
- </div>
881
- <div class="customSelect__dropdownItem" data-value="s">
882
- <div class="customSelect__dropdownItemHeadline">S</div>
883
- </div>
884
- <div class="customSelect__dropdownItem" data-value="m">
885
- <div class="customSelect__dropdownItemHeadline">M</div>
886
- </div>
887
- <div class="customSelect__dropdownItem" data-value="l">
888
- <div class="customSelect__dropdownItemHeadline">L</div>
889
- </div>
890
- <div class="customSelect__dropdownItem disabled" data-value="xl">
891
- <div class="customSelect__dropdownItemHeadline">XL</div>
892
- <div class="customSelect__dropdownItemText">Not available</div>
893
- </div>
894
- <div class="customSelect__dropdownItem" data-value="xxl">
895
- <div class="customSelect__dropdownItemHeadline">XL</div>
896
- </div>
897
- </div>
898
- </div>
899
- <div class="kss-modifier__example-footer"></div>
900
- </div>
901
- <div class="kss-modifier__name kss-style">
902
- .is-success
903
- </div>
904
- <div class="kss-modifier__description kss-style">
905
- is success
906
- </div>
907
- <div class="kss-modifier__example">
908
- <div class="customSelect js-customSelect is-success">
909
- <select>
910
- <option disabled selected></option>
911
- <option value="s">S</option>
912
- <option value="m">M</option>
913
- <option value="l">L</option>
914
- <option value="xl" disabled>XL</option>
915
- <option value="xxl">XXL</option>
916
- </select>
917
- <div class="customSelect__selected">Choose</div>
918
- <div class="customSelect__dropdown">
919
- <div class="customSelect__dropdownClose">
920
- <i class="icon icon-close"></i>
921
- </div>
922
- <div class="customSelect__dropdownHeader d-block d-sm-none">
923
- <div class="customSelect__dropdownTitle">
924
- Title
925
- </div>
926
- </div>
927
- <div class="customSelect__dropdownItem" data-value="s">
928
- <div class="customSelect__dropdownItemHeadline">S</div>
929
- </div>
930
- <div class="customSelect__dropdownItem" data-value="m">
931
- <div class="customSelect__dropdownItemHeadline">M</div>
932
- </div>
933
- <div class="customSelect__dropdownItem" data-value="l">
934
- <div class="customSelect__dropdownItemHeadline">L</div>
935
- </div>
936
- <div class="customSelect__dropdownItem disabled" data-value="xl">
937
- <div class="customSelect__dropdownItemHeadline">XL</div>
938
- <div class="customSelect__dropdownItemText">Not available</div>
939
- </div>
940
- <div class="customSelect__dropdownItem" data-value="xxl">
941
- <div class="customSelect__dropdownItemHeadline">XL</div>
942
- </div>
943
- </div>
944
- </div>
945
- <div class="kss-modifier__example-footer"></div>
946
- </div>
947
- <div class="kss-modifier__name kss-style">
948
- .is-error
949
- </div>
950
- <div class="kss-modifier__description kss-style">
951
- is error
952
- </div>
953
- <div class="kss-modifier__example">
954
- <div class="customSelect js-customSelect is-error">
955
- <select>
956
- <option disabled selected></option>
957
- <option value="s">S</option>
958
- <option value="m">M</option>
959
- <option value="l">L</option>
960
- <option value="xl" disabled>XL</option>
961
- <option value="xxl">XXL</option>
962
- </select>
963
- <div class="customSelect__selected">Choose</div>
964
- <div class="customSelect__dropdown">
965
- <div class="customSelect__dropdownClose">
966
- <i class="icon icon-close"></i>
967
- </div>
968
- <div class="customSelect__dropdownHeader d-block d-sm-none">
969
- <div class="customSelect__dropdownTitle">
970
- Title
971
- </div>
972
- </div>
973
- <div class="customSelect__dropdownItem" data-value="s">
974
- <div class="customSelect__dropdownItemHeadline">S</div>
975
- </div>
976
- <div class="customSelect__dropdownItem" data-value="m">
977
- <div class="customSelect__dropdownItemHeadline">M</div>
978
- </div>
979
- <div class="customSelect__dropdownItem" data-value="l">
980
- <div class="customSelect__dropdownItemHeadline">L</div>
981
- </div>
982
- <div class="customSelect__dropdownItem disabled" data-value="xl">
983
- <div class="customSelect__dropdownItemHeadline">XL</div>
984
- <div class="customSelect__dropdownItemText">Not available</div>
985
- </div>
986
- <div class="customSelect__dropdownItem" data-value="xxl">
987
- <div class="customSelect__dropdownItemHeadline">XL</div>
988
- </div>
989
- </div>
990
- </div>
991
- <div class="kss-modifier__example-footer"></div>
992
- </div>
993
- <div class="kss-modifier__name kss-style">
994
- .customSelect--small
995
- </div>
996
- <div class="kss-modifier__description kss-style">
997
- Small Custom Select
998
- </div>
999
- <div class="kss-modifier__example">
1000
- <div class="customSelect js-customSelect customSelect--small">
1001
- <select>
1002
- <option disabled selected></option>
1003
- <option value="s">S</option>
1004
- <option value="m">M</option>
1005
- <option value="l">L</option>
1006
- <option value="xl" disabled>XL</option>
1007
- <option value="xxl">XXL</option>
1008
- </select>
1009
- <div class="customSelect__selected">Choose</div>
1010
- <div class="customSelect__dropdown">
1011
- <div class="customSelect__dropdownClose">
1012
- <i class="icon icon-close"></i>
1013
- </div>
1014
- <div class="customSelect__dropdownHeader d-block d-sm-none">
1015
- <div class="customSelect__dropdownTitle">
1016
- Title
1017
- </div>
1018
- </div>
1019
- <div class="customSelect__dropdownItem" data-value="s">
1020
- <div class="customSelect__dropdownItemHeadline">S</div>
1021
- </div>
1022
- <div class="customSelect__dropdownItem" data-value="m">
1023
- <div class="customSelect__dropdownItemHeadline">M</div>
1024
- </div>
1025
- <div class="customSelect__dropdownItem" data-value="l">
1026
- <div class="customSelect__dropdownItemHeadline">L</div>
1027
- </div>
1028
- <div class="customSelect__dropdownItem disabled" data-value="xl">
1029
- <div class="customSelect__dropdownItemHeadline">XL</div>
1030
- <div class="customSelect__dropdownItemText">Not available</div>
1031
- </div>
1032
- <div class="customSelect__dropdownItem" data-value="xxl">
1033
- <div class="customSelect__dropdownItemHeadline">XL</div>
1034
- </div>
1035
- </div>
1036
- </div>
1037
- <div class="kss-modifier__example-footer"></div>
1038
- </div>
1039
- <div class="kss-modifier__name kss-style">
1040
- .customSelect--small.is-loading
1041
- </div>
1042
- <div class="kss-modifier__description kss-style">
1043
- Small Custom Select is loading
1044
- </div>
1045
- <div class="kss-modifier__example">
1046
- <div class="customSelect js-customSelect customSelect--small is-loading">
1047
- <select>
1048
- <option disabled selected></option>
1049
- <option value="s">S</option>
1050
- <option value="m">M</option>
1051
- <option value="l">L</option>
1052
- <option value="xl" disabled>XL</option>
1053
- <option value="xxl">XXL</option>
1054
- </select>
1055
- <div class="customSelect__selected">Choose</div>
1056
- <div class="customSelect__dropdown">
1057
- <div class="customSelect__dropdownClose">
1058
- <i class="icon icon-close"></i>
1059
- </div>
1060
- <div class="customSelect__dropdownHeader d-block d-sm-none">
1061
- <div class="customSelect__dropdownTitle">
1062
- Title
1063
- </div>
1064
- </div>
1065
- <div class="customSelect__dropdownItem" data-value="s">
1066
- <div class="customSelect__dropdownItemHeadline">S</div>
1067
- </div>
1068
- <div class="customSelect__dropdownItem" data-value="m">
1069
- <div class="customSelect__dropdownItemHeadline">M</div>
1070
- </div>
1071
- <div class="customSelect__dropdownItem" data-value="l">
1072
- <div class="customSelect__dropdownItemHeadline">L</div>
1073
- </div>
1074
- <div class="customSelect__dropdownItem disabled" data-value="xl">
1075
- <div class="customSelect__dropdownItemHeadline">XL</div>
1076
- <div class="customSelect__dropdownItemText">Not available</div>
1077
- </div>
1078
- <div class="customSelect__dropdownItem" data-value="xxl">
1079
- <div class="customSelect__dropdownItemHeadline">XL</div>
1080
- </div>
1081
- </div>
1082
- </div>
1083
- <div class="kss-modifier__example-footer"></div>
1084
- </div>
1085
- <div class="kss-modifier__name kss-style">
1086
- .customSelect--small.is-success
1087
- </div>
1088
- <div class="kss-modifier__description kss-style">
1089
- Small Custom Select is success
1090
- </div>
1091
- <div class="kss-modifier__example">
1092
- <div class="customSelect js-customSelect customSelect--small is-success">
1093
- <select>
1094
- <option disabled selected></option>
1095
- <option value="s">S</option>
1096
- <option value="m">M</option>
1097
- <option value="l">L</option>
1098
- <option value="xl" disabled>XL</option>
1099
- <option value="xxl">XXL</option>
1100
- </select>
1101
- <div class="customSelect__selected">Choose</div>
1102
- <div class="customSelect__dropdown">
1103
- <div class="customSelect__dropdownClose">
1104
- <i class="icon icon-close"></i>
1105
- </div>
1106
- <div class="customSelect__dropdownHeader d-block d-sm-none">
1107
- <div class="customSelect__dropdownTitle">
1108
- Title
1109
- </div>
1110
- </div>
1111
- <div class="customSelect__dropdownItem" data-value="s">
1112
- <div class="customSelect__dropdownItemHeadline">S</div>
1113
- </div>
1114
- <div class="customSelect__dropdownItem" data-value="m">
1115
- <div class="customSelect__dropdownItemHeadline">M</div>
1116
- </div>
1117
- <div class="customSelect__dropdownItem" data-value="l">
1118
- <div class="customSelect__dropdownItemHeadline">L</div>
1119
- </div>
1120
- <div class="customSelect__dropdownItem disabled" data-value="xl">
1121
- <div class="customSelect__dropdownItemHeadline">XL</div>
1122
- <div class="customSelect__dropdownItemText">Not available</div>
1123
- </div>
1124
- <div class="customSelect__dropdownItem" data-value="xxl">
1125
- <div class="customSelect__dropdownItemHeadline">XL</div>
1126
- </div>
1127
- </div>
1128
- </div>
1129
- <div class="kss-modifier__example-footer"></div>
1130
- </div>
1131
- <div class="kss-modifier__name kss-style">
1132
- .customSelect--small.is-error
1133
- </div>
1134
- <div class="kss-modifier__description kss-style">
1135
- Small Custom Select is error
1136
- </div>
1137
- <div class="kss-modifier__example">
1138
- <div class="customSelect js-customSelect customSelect--small is-error">
1139
- <select>
1140
- <option disabled selected></option>
1141
- <option value="s">S</option>
1142
- <option value="m">M</option>
1143
- <option value="l">L</option>
1144
- <option value="xl" disabled>XL</option>
1145
- <option value="xxl">XXL</option>
1146
- </select>
1147
- <div class="customSelect__selected">Choose</div>
1148
- <div class="customSelect__dropdown">
1149
- <div class="customSelect__dropdownClose">
1150
- <i class="icon icon-close"></i>
1151
- </div>
1152
- <div class="customSelect__dropdownHeader d-block d-sm-none">
1153
- <div class="customSelect__dropdownTitle">
1154
- Title
1155
- </div>
1156
- </div>
1157
- <div class="customSelect__dropdownItem" data-value="s">
1158
- <div class="customSelect__dropdownItemHeadline">S</div>
1159
- </div>
1160
- <div class="customSelect__dropdownItem" data-value="m">
1161
- <div class="customSelect__dropdownItemHeadline">M</div>
1162
- </div>
1163
- <div class="customSelect__dropdownItem" data-value="l">
1164
- <div class="customSelect__dropdownItemHeadline">L</div>
1165
- </div>
1166
- <div class="customSelect__dropdownItem disabled" data-value="xl">
1167
- <div class="customSelect__dropdownItemHeadline">XL</div>
1168
- <div class="customSelect__dropdownItemText">Not available</div>
1169
- </div>
1170
- <div class="customSelect__dropdownItem" data-value="xxl">
1171
- <div class="customSelect__dropdownItemHeadline">XL</div>
1172
- </div>
1173
- </div>
1174
- </div>
1175
- <div class="kss-modifier__example-footer"></div>
1176
- </div>
1177
- </div>
1178
-
1179
- <details class="kss-markup kss-style">
1180
- <summary>
1181
- Markup
1182
- </summary>
1183
- <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;customSelect js-customSelect [modifier class]&quot;</span>&gt;</span>
1184
- <span class="hljs-tag">&lt;<span class="hljs-name">select</span>&gt;</span>
1185
- <span class="hljs-tag">&lt;<span class="hljs-name">option</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">selected</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
1186
- <span class="hljs-tag">&lt;<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;s&quot;</span>&gt;</span>S<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
1187
- <span class="hljs-tag">&lt;<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;m&quot;</span>&gt;</span>M<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
1188
- <span class="hljs-tag">&lt;<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;l&quot;</span>&gt;</span>L<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
1189
- <span class="hljs-tag">&lt;<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;xl&quot;</span> <span class="hljs-attr">disabled</span>&gt;</span>XL<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
1190
- <span class="hljs-tag">&lt;<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;xxl&quot;</span>&gt;</span>XXL<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
1191
- <span class="hljs-tag">&lt;/<span class="hljs-name">select</span>&gt;</span>
1192
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;customSelect__selected&quot;</span>&gt;</span>Choose<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1193
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;customSelect__dropdown&quot;</span>&gt;</span>
1194
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;customSelect__dropdownClose&quot;</span>&gt;</span>
1195
- <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;icon icon-close&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
1196
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1197
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;customSelect__dropdownHeader d-block d-sm-none&quot;</span>&gt;</span>
1198
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;customSelect__dropdownTitle&quot;</span>&gt;</span>
1199
- Title
1200
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1201
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1202
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;customSelect__dropdownItem&quot;</span> <span class="hljs-attr">data-value</span>=<span class="hljs-string">&quot;s&quot;</span>&gt;</span>
1203
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;customSelect__dropdownItemHeadline&quot;</span>&gt;</span>S<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1204
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1205
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;customSelect__dropdownItem&quot;</span> <span class="hljs-attr">data-value</span>=<span class="hljs-string">&quot;m&quot;</span>&gt;</span>
1206
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;customSelect__dropdownItemHeadline&quot;</span>&gt;</span>M<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1207
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1208
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;customSelect__dropdownItem&quot;</span> <span class="hljs-attr">data-value</span>=<span class="hljs-string">&quot;l&quot;</span>&gt;</span>
1209
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;customSelect__dropdownItemHeadline&quot;</span>&gt;</span>L<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1210
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1211
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;customSelect__dropdownItem disabled&quot;</span> <span class="hljs-attr">data-value</span>=<span class="hljs-string">&quot;xl&quot;</span>&gt;</span>
1212
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;customSelect__dropdownItemHeadline&quot;</span>&gt;</span>XL<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1213
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;customSelect__dropdownItemText&quot;</span>&gt;</span>Not available<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1214
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1215
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;customSelect__dropdownItem&quot;</span> <span class="hljs-attr">data-value</span>=<span class="hljs-string">&quot;xxl&quot;</span>&gt;</span>
1216
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;customSelect__dropdownItemHeadline&quot;</span>&gt;</span>XL<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1217
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1218
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1219
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span></code></pre>
1220
- </details>
1221
-
1222
- <div class="kss-source kss-style">
1223
- Source: <code>build/doc/doc.css</code>, line 12375
1224
- </div>
1225
-
1226
- </section>
1227
- <section id="kssref-components-iconbar" class="kss-section kss-section--depth-2 ">
1228
-
1229
- <div class="kss-style">
1230
- <h2 class="kss-title kss-title--level-2">
1231
- <a class="kss-title__permalink" href="#kssref-components-iconbar">
1232
- <span class="kss-title__ref">
1233
- 3.6
1234
- <span class="kss-title__permalink-hash">
1235
- #Components.Iconbar
1236
- </span>
1237
- </span>
1238
- Iconbar
1239
- </a>
1240
- </h2>
1241
-
1242
- <p class="kss-toolbar">
1243
- <a href="#kssref-components-iconbar" data-kss-fullscreen="kssref-components-iconbar">
1244
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
1245
- <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">
1246
- <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>
1247
- </svg>
1248
- <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">
1249
- <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>
1250
- </svg>
1251
- </a>
1252
- <a href="item-components-iconbar.html" target="_blank">
1253
- <span class="kss-toolbar__tooltip">Open in new window</span>
1254
- <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">
1255
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
1256
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
1257
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
1258
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
1259
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
1260
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
1261
- </svg>
1262
- </a>
1263
- <a href="#kssref-components-iconbar" data-kss-guides="true">
1264
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
1265
- <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">
1266
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
1267
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
1268
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
1269
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
1270
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
1271
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
1272
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
1273
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
1274
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
1275
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
1276
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
1277
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
1278
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
1279
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
1280
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
1281
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
1282
- </svg>
1283
- </a>
1284
- <a href="#kssref-components-iconbar" data-kss-markup="true">
1285
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
1286
- <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">
1287
- <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"/>
1288
- <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"/>
1289
- </svg>
1290
- </a>
1291
- </p>
1292
-
1293
-
1294
-
1295
- </div>
1296
-
1297
- <div class="kss-modifier__wrapper">
1298
- <div class="kss-modifier__heading kss-style">
1299
- Examples
1300
- </div>
1301
-
1302
- <div class="kss-modifier__default-name kss-style">
1303
- Default styling
1304
- </div>
1305
-
1306
- <div class="kss-modifier__example">
1307
- <div class="iconbar ">
1308
- <div class="iconbarItem">
1309
- <a class="iconbarIcon" href="#" title="Account">
1310
- <span class="iconbarIcon__icon">
1311
- <i class="icon icon-user" aria-hidden="true"></i>
1312
- </span>
1313
- <span class="iconbarIcon__label">Account</span>
1314
- </a>
1315
- <div class="iconbarHover iconbarHover--basket">
1316
- <div class="iconbarHover__close">
1317
- <i class="icon icon-close"></i>
1318
- </div>
1319
- <div class="iconbarHover__headline">
1320
- Headline
1321
- </div>
1322
- <div class="iconbarHover__body">
1323
- <ul class="iconbarNavigation">
1324
- <li><a href="#">Link</a></li>
1325
- <li><a href="#">Link</a></li>
1326
- </ul>
1327
- </div>
1328
- <div class="iconbarHover__footer">
1329
- <div class="amountLines">
1330
- <div class="amountLine amountLine--big">
1331
- <div class="amountLine__label">Sum</div>
1332
- <div class="amountLine__value">999,99&nbsp;€</div>
1333
- </div>
1334
- </div>
1335
- <a href="#" class="button button--action button--xl" style="width: 100%">
1336
- To Basket
1337
- </a>
1338
- </div>
1339
- </div>
1340
- </div>
1341
- <div class="iconbarItem">
1342
- <a class="iconbarIcon" href="#" title="Favorites">
1343
- <span class="iconbarIcon__icon">
1344
- <i class="icon icon-favorites" aria-hidden="true"></i>
1345
- <span class="iconbarIcon__count">+99</span>
1346
- </span>
1347
- <span class="iconbarIcon__label">Favorites</span>
1348
- </a>
1349
- </div>
1350
- <div class="iconbarItem">
1351
- <a class="iconbarIcon active" href="#" title="Basket">
1352
- <span class="iconbarIcon__icon">
1353
- <i class="icon icon-basket" aria-hidden="true"></i>
1354
- <span class="iconbarIcon__count">+99</span>
1355
- </span>
1356
- <span class="iconbarIcon__label">Basket</span>
1357
- </a>
1358
- </div>
1359
- <div class="iconbarItem">
1360
- <a class="iconbarIcon active" href="#" title="Name">
1361
- <span class="iconbarIcon__label">Max Mustermann</span>
1362
- <span class="iconbarIcon__badge">MM</span>
1363
- </a>
1364
- </div>
1365
- </div>
1366
- <div class="kss-modifier__example-footer"></div>
1367
- </div>
1368
-
1369
- <div class="kss-modifier__name kss-style">
1370
- .iconbar--landscape
1371
- </div>
1372
- <div class="kss-modifier__description kss-style">
1373
- Orientation landscape
1374
- </div>
1375
- <div class="kss-modifier__example">
1376
- <div class="iconbar iconbar--landscape">
1377
- <div class="iconbarItem">
1378
- <a class="iconbarIcon" href="#" title="Account">
1379
- <span class="iconbarIcon__icon">
1380
- <i class="icon icon-user" aria-hidden="true"></i>
1381
- </span>
1382
- <span class="iconbarIcon__label">Account</span>
1383
- </a>
1384
- <div class="iconbarHover iconbarHover--basket">
1385
- <div class="iconbarHover__close">
1386
- <i class="icon icon-close"></i>
1387
- </div>
1388
- <div class="iconbarHover__headline">
1389
- Headline
1390
- </div>
1391
- <div class="iconbarHover__body">
1392
- <ul class="iconbarNavigation">
1393
- <li><a href="#">Link</a></li>
1394
- <li><a href="#">Link</a></li>
1395
- </ul>
1396
- </div>
1397
- <div class="iconbarHover__footer">
1398
- <div class="amountLines">
1399
- <div class="amountLine amountLine--big">
1400
- <div class="amountLine__label">Sum</div>
1401
- <div class="amountLine__value">999,99&nbsp;€</div>
1402
- </div>
1403
- </div>
1404
- <a href="#" class="button button--action button--xl" style="width: 100%">
1405
- To Basket
1406
- </a>
1407
- </div>
1408
- </div>
1409
- </div>
1410
- <div class="iconbarItem">
1411
- <a class="iconbarIcon" href="#" title="Favorites">
1412
- <span class="iconbarIcon__icon">
1413
- <i class="icon icon-favorites" aria-hidden="true"></i>
1414
- <span class="iconbarIcon__count">+99</span>
1415
- </span>
1416
- <span class="iconbarIcon__label">Favorites</span>
1417
- </a>
1418
- </div>
1419
- <div class="iconbarItem">
1420
- <a class="iconbarIcon active" href="#" title="Basket">
1421
- <span class="iconbarIcon__icon">
1422
- <i class="icon icon-basket" aria-hidden="true"></i>
1423
- <span class="iconbarIcon__count">+99</span>
1424
- </span>
1425
- <span class="iconbarIcon__label">Basket</span>
1426
- </a>
1427
- </div>
1428
- <div class="iconbarItem">
1429
- <a class="iconbarIcon active" href="#" title="Name">
1430
- <span class="iconbarIcon__label">Max Mustermann</span>
1431
- <span class="iconbarIcon__badge">MM</span>
1432
- </a>
1433
- </div>
1434
- </div>
1435
- <div class="kss-modifier__example-footer"></div>
1436
- </div>
1437
- </div>
1438
-
1439
- <details class="kss-markup kss-style">
1440
- <summary>
1441
- Markup
1442
- </summary>
1443
- <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;iconbar [modifier class]&quot;</span>&gt;</span>
1444
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;iconbarItem&quot;</span>&gt;</span>
1445
- <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;iconbarIcon&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;Account&quot;</span>&gt;</span>
1446
- <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;iconbarIcon__icon&quot;</span>&gt;</span>
1447
- <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;icon icon-user&quot;</span> <span class="hljs-attr">aria-hidden</span>=<span class="hljs-string">&quot;true&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
1448
- <span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
1449
- <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;iconbarIcon__label&quot;</span>&gt;</span>Account<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
1450
- <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
1451
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;iconbarHover iconbarHover--basket&quot;</span>&gt;</span>
1452
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;iconbarHover__close&quot;</span>&gt;</span>
1453
- <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;icon icon-close&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
1454
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1455
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;iconbarHover__headline&quot;</span>&gt;</span>
1456
- Headline
1457
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1458
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;iconbarHover__body&quot;</span>&gt;</span>
1459
- <span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;iconbarNavigation&quot;</span>&gt;</span>
1460
- <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span>&gt;</span>Link<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
1461
- <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span>&gt;</span>Link<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
1462
- <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
1463
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1464
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;iconbarHover__footer&quot;</span>&gt;</span>
1465
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;amountLines&quot;</span>&gt;</span>
1466
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;amountLine amountLine--big&quot;</span>&gt;</span>
1467
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;amountLine__label&quot;</span>&gt;</span>Sum<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1468
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;amountLine__value&quot;</span>&gt;</span>999,99<span class="hljs-symbol">&amp;nbsp;</span>€<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1469
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1470
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1471
- <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;button button--action button--xl&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;width: 100%&quot;</span>&gt;</span>
1472
- To Basket
1473
- <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
1474
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1475
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1476
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1477
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;iconbarItem&quot;</span>&gt;</span>
1478
- <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;iconbarIcon&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;Favorites&quot;</span>&gt;</span>
1479
- <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;iconbarIcon__icon&quot;</span>&gt;</span>
1480
- <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;icon icon-favorites&quot;</span> <span class="hljs-attr">aria-hidden</span>=<span class="hljs-string">&quot;true&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
1481
- <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;iconbarIcon__count&quot;</span>&gt;</span>+99<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
1482
- <span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
1483
- <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;iconbarIcon__label&quot;</span>&gt;</span>Favorites<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
1484
- <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
1485
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1486
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;iconbarItem&quot;</span>&gt;</span>
1487
- <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;iconbarIcon active&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;Basket&quot;</span>&gt;</span>
1488
- <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;iconbarIcon__icon&quot;</span>&gt;</span>
1489
- <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;icon icon-basket&quot;</span> <span class="hljs-attr">aria-hidden</span>=<span class="hljs-string">&quot;true&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
1490
- <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;iconbarIcon__count&quot;</span>&gt;</span>+99<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
1491
- <span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
1492
- <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;iconbarIcon__label&quot;</span>&gt;</span>Basket<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
1493
- <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
1494
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1495
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;iconbarItem&quot;</span>&gt;</span>
1496
- <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;iconbarIcon active&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;Name&quot;</span>&gt;</span>
1497
- <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;iconbarIcon__label&quot;</span>&gt;</span>Max Mustermann<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
1498
- <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;iconbarIcon__badge&quot;</span>&gt;</span>MM<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
1499
- <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
1500
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1501
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span></code></pre>
1502
- </details>
1503
-
1504
- <div class="kss-source kss-style">
1505
- Source: <code>build/doc/doc.css</code>, line 10234
1506
- </div>
1507
-
1508
- </section>
1509
- <section id="kssref-components-iconbox" class="kss-section kss-section--depth-2 ">
1510
-
1511
- <div class="kss-style">
1512
- <h2 class="kss-title kss-title--level-2">
1513
- <a class="kss-title__permalink" href="#kssref-components-iconbox">
1514
- <span class="kss-title__ref">
1515
- 3.7
1516
- <span class="kss-title__permalink-hash">
1517
- #Components.Iconbox
1518
- </span>
1519
- </span>
1520
- Iconbox
1521
- </a>
1522
- </h2>
1523
-
1524
- <p class="kss-toolbar">
1525
- <a href="#kssref-components-iconbox" data-kss-fullscreen="kssref-components-iconbox">
1526
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
1527
- <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">
1528
- <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>
1529
- </svg>
1530
- <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">
1531
- <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>
1532
- </svg>
1533
- </a>
1534
- <a href="item-components-iconbox.html" target="_blank">
1535
- <span class="kss-toolbar__tooltip">Open in new window</span>
1536
- <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">
1537
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
1538
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
1539
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
1540
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
1541
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
1542
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
1543
- </svg>
1544
- </a>
1545
- <a href="#kssref-components-iconbox" data-kss-guides="true">
1546
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
1547
- <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">
1548
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
1549
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
1550
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
1551
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
1552
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
1553
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
1554
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
1555
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
1556
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
1557
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
1558
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
1559
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
1560
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
1561
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
1562
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
1563
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
1564
- </svg>
1565
- </a>
1566
- <a href="#kssref-components-iconbox" data-kss-markup="true">
1567
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
1568
- <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">
1569
- <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"/>
1570
- <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"/>
1571
- </svg>
1572
- </a>
1573
- </p>
1574
-
1575
-
1576
-
1577
- </div>
1578
-
1579
- <div class="kss-modifier__wrapper">
1580
- <div class="kss-modifier__heading kss-style">
1581
- Example
1582
- </div>
1583
-
1584
-
1585
- <div class="kss-modifier__example">
1586
- <div class="iconbox">
1587
- <i class="icon icon-shipping"></i>Kostenloser Versand ab 50 €
1588
- <small>Erhalten Sie kostenfreien Versand ab einem Bestellwert von 50 €</small>
1589
- </div>
1590
- <div class="kss-modifier__example-footer"></div>
1591
- </div>
1592
-
1593
- </div>
1594
-
1595
- <details class="kss-markup kss-style">
1596
- <summary>
1597
- Markup
1598
- </summary>
1599
- <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;iconbox&quot;</span>&gt;</span>
1600
- <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;icon icon-shipping&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>Kostenloser Versand ab 50 €
1601
- <span class="hljs-tag">&lt;<span class="hljs-name">small</span>&gt;</span>Erhalten Sie kostenfreien Versand ab einem Bestellwert von 50 €<span class="hljs-tag">&lt;/<span class="hljs-name">small</span>&gt;</span>
1602
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span></code></pre>
1603
- </details>
1604
-
1605
- <div class="kss-source kss-style">
1606
- Source: <code>build/doc/doc.css</code>, line 10563
1607
- </div>
1608
-
1609
- </section>
1610
- <section id="kssref-components-iconlist" class="kss-section kss-section--depth-2 ">
1611
-
1612
- <div class="kss-style">
1613
- <h2 class="kss-title kss-title--level-2">
1614
- <a class="kss-title__permalink" href="#kssref-components-iconlist">
1615
- <span class="kss-title__ref">
1616
- 3.8
1617
- <span class="kss-title__permalink-hash">
1618
- #Components.Iconlist
1619
- </span>
1620
- </span>
1621
- Iconlist
1622
- </a>
1623
- </h2>
1624
-
1625
- <p class="kss-toolbar">
1626
- <a href="#kssref-components-iconlist" data-kss-fullscreen="kssref-components-iconlist">
1627
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
1628
- <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">
1629
- <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>
1630
- </svg>
1631
- <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">
1632
- <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>
1633
- </svg>
1634
- </a>
1635
- <a href="item-components-iconlist.html" target="_blank">
1636
- <span class="kss-toolbar__tooltip">Open in new window</span>
1637
- <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">
1638
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
1639
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
1640
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
1641
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
1642
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
1643
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
1644
- </svg>
1645
- </a>
1646
- <a href="#kssref-components-iconlist" data-kss-guides="true">
1647
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
1648
- <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">
1649
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
1650
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
1651
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
1652
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
1653
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
1654
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
1655
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
1656
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
1657
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
1658
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
1659
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
1660
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
1661
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
1662
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
1663
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
1664
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
1665
- </svg>
1666
- </a>
1667
- <a href="#kssref-components-iconlist" data-kss-markup="true">
1668
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
1669
- <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">
1670
- <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"/>
1671
- <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"/>
1672
- </svg>
1673
- </a>
1674
- </p>
1675
-
1676
-
1677
-
1678
- </div>
1679
-
1680
- <div class="kss-modifier__wrapper">
1681
- <div class="kss-modifier__heading kss-style">
1682
- Example
1683
- </div>
1684
-
1685
-
1686
- <div class="kss-modifier__example">
1687
- <div class="iconList">
1688
- <a href="#"><i class="icon icon-facebook"></i></a>
1689
- <a href="#"><i class="icon icon-twitter"></i></a>
1690
- <a href="#"><i class="icon icon-youtube"></i></a>
1691
- <a href="#"><i class="icon icon-tiktok"></i></a>
1692
- <a href="#"><i class="icon icon-instagram"></i></a>
1693
- <a href="#"><i class="icon icon-pinterest"></i></a>
1694
- </div>
1695
- <div class="kss-modifier__example-footer"></div>
1696
- </div>
1697
-
1698
- </div>
1699
-
1700
- <details class="kss-markup kss-style">
1701
- <summary>
1702
- Markup
1703
- </summary>
1704
- <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;iconList&quot;</span>&gt;</span>
1705
- <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;icon icon-facebook&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
1706
- <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;icon icon-twitter&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
1707
- <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;icon icon-youtube&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
1708
- <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;icon icon-tiktok&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
1709
- <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;icon icon-instagram&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
1710
- <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;icon icon-pinterest&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
1711
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span></code></pre>
1712
- </details>
1713
-
1714
- <div class="kss-source kss-style">
1715
- Source: <code>build/doc/doc.css</code>, line 10526
1716
- </div>
1717
-
1718
- </section>
1719
- <section id="kssref-components-modals" class="kss-section kss-section--depth-2 ">
1720
-
1721
- <div class="kss-style">
1722
- <h2 class="kss-title kss-title--level-2">
1723
- <a class="kss-title__permalink" href="#kssref-components-modals">
1724
- <span class="kss-title__ref">
1725
- 3.9
1726
- <span class="kss-title__permalink-hash">
1727
- #Components.Modals
1728
- </span>
1729
- </span>
1730
- Modals
1731
- </a>
1732
- </h2>
1733
-
1734
- <p class="kss-toolbar">
1735
- <a href="#kssref-components-modals" data-kss-fullscreen="kssref-components-modals">
1736
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
1737
- <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">
1738
- <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>
1739
- </svg>
1740
- <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">
1741
- <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>
1742
- </svg>
1743
- </a>
1744
- <a href="item-components-modals.html" target="_blank">
1745
- <span class="kss-toolbar__tooltip">Open in new window</span>
1746
- <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">
1747
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
1748
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
1749
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
1750
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
1751
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
1752
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
1753
- </svg>
1754
- </a>
1755
- <a href="#kssref-components-modals" data-kss-guides="true">
1756
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
1757
- <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">
1758
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
1759
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
1760
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
1761
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
1762
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
1763
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
1764
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
1765
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
1766
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
1767
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
1768
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
1769
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
1770
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
1771
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
1772
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
1773
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
1774
- </svg>
1775
- </a>
1776
- <a href="#kssref-components-modals" data-kss-markup="true">
1777
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
1778
- <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">
1779
- <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"/>
1780
- <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"/>
1781
- </svg>
1782
- </a>
1783
- </p>
1784
-
1785
-
1786
-
1787
- </div>
1788
-
1789
- <div class="kss-modifier__wrapper">
1790
- <div class="kss-modifier__heading kss-style">
1791
- Examples
1792
- </div>
1793
-
1794
- <div class="kss-modifier__default-name kss-style">
1795
- Default styling
1796
- </div>
1797
-
1798
- <div class="kss-modifier__example">
1799
- <a href="javascript:void(0)" class="button" data-modal='id-'>Open Modal</a>
1800
- <div class="modal " id="id-">
1801
- <div class="modal__dialog" role="document">
1802
- <div class="modal__content">
1803
- <div class="modal__header">
1804
- <div class="modal__title">Title<br/><small>Subtitle</small></div>
1805
- <div class="modal__close" data-close="modal">
1806
- <i class="icon icon-close"></i>
1807
- </div>
1808
- </div>
1809
- <div class="modal__body">
1810
- Lorem Ipsum
1811
- </div>
1812
- <div class="modal__footer">
1813
- <button class="button button--action">Save</button>
1814
- <span class="button" data-close="modal">Abort</span>
1815
- </div>
1816
- </div>
1817
- </div>
1818
- </div>
1819
- <div class="kss-modifier__example-footer"></div>
1820
- </div>
1821
-
1822
- <div class="kss-modifier__name kss-style">
1823
- .modal--info
1824
- </div>
1825
- <div class="kss-modifier__description kss-style">
1826
- Info
1827
- </div>
1828
- <div class="kss-modifier__example">
1829
- <a href="javascript:void(0)" class="button" data-modal='id-modal--info'>Open Modal</a>
1830
- <div class="modal modal--info" id="id-modal--info">
1831
- <div class="modal__dialog" role="document">
1832
- <div class="modal__content">
1833
- <div class="modal__header">
1834
- <div class="modal__title">Title<br/><small>Subtitle</small></div>
1835
- <div class="modal__close" data-close="modal">
1836
- <i class="icon icon-close"></i>
1837
- </div>
1838
- </div>
1839
- <div class="modal__body">
1840
- Lorem Ipsum
1841
- </div>
1842
- <div class="modal__footer">
1843
- <button class="button button--action">Save</button>
1844
- <span class="button" data-close="modal">Abort</span>
1845
- </div>
1846
- </div>
1847
- </div>
1848
- </div>
1849
- <div class="kss-modifier__example-footer"></div>
1850
- </div>
1851
- <div class="kss-modifier__name kss-style">
1852
- .modal--error
1853
- </div>
1854
- <div class="kss-modifier__description kss-style">
1855
- Error
1856
- </div>
1857
- <div class="kss-modifier__example">
1858
- <a href="javascript:void(0)" class="button" data-modal='id-modal--error'>Open Modal</a>
1859
- <div class="modal modal--error" id="id-modal--error">
1860
- <div class="modal__dialog" role="document">
1861
- <div class="modal__content">
1862
- <div class="modal__header">
1863
- <div class="modal__title">Title<br/><small>Subtitle</small></div>
1864
- <div class="modal__close" data-close="modal">
1865
- <i class="icon icon-close"></i>
1866
- </div>
1867
- </div>
1868
- <div class="modal__body">
1869
- Lorem Ipsum
1870
- </div>
1871
- <div class="modal__footer">
1872
- <button class="button button--action">Save</button>
1873
- <span class="button" data-close="modal">Abort</span>
1874
- </div>
1875
- </div>
1876
- </div>
1877
- </div>
1878
- <div class="kss-modifier__example-footer"></div>
1879
- </div>
1880
- <div class="kss-modifier__name kss-style">
1881
- .modal--success
1882
- </div>
1883
- <div class="kss-modifier__description kss-style">
1884
- Success
1885
- </div>
1886
- <div class="kss-modifier__example">
1887
- <a href="javascript:void(0)" class="button" data-modal='id-modal--success'>Open Modal</a>
1888
- <div class="modal modal--success" id="id-modal--success">
1889
- <div class="modal__dialog" role="document">
1890
- <div class="modal__content">
1891
- <div class="modal__header">
1892
- <div class="modal__title">Title<br/><small>Subtitle</small></div>
1893
- <div class="modal__close" data-close="modal">
1894
- <i class="icon icon-close"></i>
1895
- </div>
1896
- </div>
1897
- <div class="modal__body">
1898
- Lorem Ipsum
1899
- </div>
1900
- <div class="modal__footer">
1901
- <button class="button button--action">Save</button>
1902
- <span class="button" data-close="modal">Abort</span>
1903
- </div>
1904
- </div>
1905
- </div>
1906
- </div>
1907
- <div class="kss-modifier__example-footer"></div>
1908
- </div>
1909
- </div>
1910
-
1911
- <details class="kss-markup kss-style">
1912
- <summary>
1913
- Markup
1914
- </summary>
1915
- <pre class="hljs"><code class="language-handlebars"><span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;javascript:void(0)&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">data-modal</span>=<span class="hljs-string">&#x27;id-[modifier class]&#x27;</span>&gt;</span>Open Modal<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
1916
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;modal [modifier class]&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;id-[modifier class]&quot;</span>&gt;</span>
1917
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;modal__dialog&quot;</span> <span class="hljs-attr">role</span>=<span class="hljs-string">&quot;document&quot;</span>&gt;</span>
1918
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;modal__content&quot;</span>&gt;</span>
1919
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;modal__header&quot;</span>&gt;</span>
1920
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;modal__title&quot;</span>&gt;</span>Title<span class="hljs-tag">&lt;<span class="hljs-name">br</span>/&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">small</span>&gt;</span>Subtitle<span class="hljs-tag">&lt;/<span class="hljs-name">small</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1921
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;modal__close&quot;</span> <span class="hljs-attr">data-close</span>=<span class="hljs-string">&quot;modal&quot;</span>&gt;</span>
1922
- <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;icon icon-close&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
1923
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1924
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1925
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;modal__body&quot;</span>&gt;</span>
1926
- Lorem Ipsum
1927
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1928
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;modal__footer&quot;</span>&gt;</span>
1929
- <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;button button--action&quot;</span>&gt;</span>Save<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1930
- <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">data-close</span>=<span class="hljs-string">&quot;modal&quot;</span>&gt;</span>Abort<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
1931
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1932
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1933
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1934
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span></code></pre>
1935
- </details>
1936
-
1937
- <div class="kss-source kss-style">
1938
- Source: <code>build/doc/doc.css</code>, line 11742
1939
- </div>
1940
-
1941
- </section>
1942
- <section id="kssref-components-pagination" class="kss-section kss-section--depth-2 ">
1943
-
1944
- <div class="kss-style">
1945
- <h2 class="kss-title kss-title--level-2">
1946
- <a class="kss-title__permalink" href="#kssref-components-pagination">
1947
- <span class="kss-title__ref">
1948
- 3.10
1949
- <span class="kss-title__permalink-hash">
1950
- #Components.Pagination
1951
- </span>
1952
- </span>
1953
- Pagination
1954
- </a>
1955
- </h2>
1956
-
1957
- <p class="kss-toolbar">
1958
- <a href="#kssref-components-pagination" data-kss-fullscreen="kssref-components-pagination">
1959
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
1960
- <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">
1961
- <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>
1962
- </svg>
1963
- <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">
1964
- <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>
1965
- </svg>
1966
- </a>
1967
- <a href="item-components-pagination.html" target="_blank">
1968
- <span class="kss-toolbar__tooltip">Open in new window</span>
1969
- <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">
1970
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
1971
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
1972
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
1973
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
1974
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
1975
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
1976
- </svg>
1977
- </a>
1978
- <a href="#kssref-components-pagination" data-kss-guides="true">
1979
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
1980
- <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">
1981
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
1982
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
1983
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
1984
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
1985
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
1986
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
1987
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
1988
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
1989
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
1990
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
1991
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
1992
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
1993
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
1994
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
1995
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
1996
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
1997
- </svg>
1998
- </a>
1999
- <a href="#kssref-components-pagination" data-kss-markup="true">
2000
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
2001
- <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">
2002
- <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"/>
2003
- <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"/>
2004
- </svg>
2005
- </a>
2006
- </p>
2007
-
2008
-
2009
-
2010
- </div>
2011
-
2012
- <div class="kss-modifier__wrapper">
2013
- <div class="kss-modifier__heading kss-style">
2014
- Example
2015
- </div>
2016
-
2017
-
2018
- <div class="kss-modifier__example">
2019
- <div class="pagination">
2020
- <a class="pagination__item pagination__item--prev" href="?page=2&amp;sort_by=ranking">
2021
- <i class="icon icon-angle-left"></i>
2022
- </a>
2023
- <a class="pagination__item " href="?page=1&amp;sort_by=ranking">1</a>
2024
- <a class="pagination__item " href="?page=2&amp;sort_by=ranking">2</a>
2025
- <a class="pagination__item pagination__item--active" href="?page=3&amp;sort_by=ranking">3</a>
2026
- <span class="pagination__item pagination__item--seperator">...</span>
2027
- <a class="pagination__item " href="?page=5&amp;sort_by=ranking">5</a>
2028
- <a class="pagination__item pagination__item--prev" href="?page=4&amp;sort_by=ranking">
2029
- <i class="icon icon-angle-right"></i>
2030
- </a>
2031
- </div>
2032
- <div class="kss-modifier__example-footer"></div>
2033
- </div>
2034
-
2035
- </div>
2036
-
2037
- <details class="kss-markup kss-style">
2038
- <summary>
2039
- Markup
2040
- </summary>
2041
- <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;pagination&quot;</span>&gt;</span>
2042
- <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;pagination__item pagination__item--prev&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;?page=2<span class="hljs-symbol">&amp;amp;</span>sort_by=ranking&quot;</span>&gt;</span>
2043
- <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;icon icon-angle-left&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
2044
- <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
2045
- <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;pagination__item &quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;?page=1<span class="hljs-symbol">&amp;amp;</span>sort_by=ranking&quot;</span>&gt;</span>1<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
2046
- <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;pagination__item &quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;?page=2<span class="hljs-symbol">&amp;amp;</span>sort_by=ranking&quot;</span>&gt;</span>2<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
2047
- <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;pagination__item pagination__item--active&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;?page=3<span class="hljs-symbol">&amp;amp;</span>sort_by=ranking&quot;</span>&gt;</span>3<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
2048
- <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;pagination__item pagination__item--seperator&quot;</span>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
2049
- <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;pagination__item &quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;?page=5<span class="hljs-symbol">&amp;amp;</span>sort_by=ranking&quot;</span>&gt;</span>5<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
2050
- <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;pagination__item pagination__item--prev&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;?page=4<span class="hljs-symbol">&amp;amp;</span>sort_by=ranking&quot;</span>&gt;</span>
2051
- <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;icon icon-angle-right&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
2052
- <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
2053
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span></code></pre>
2054
- </details>
2055
-
2056
- <div class="kss-source kss-style">
2057
- Source: <code>build/doc/doc.css</code>, line 9981
2058
- </div>
2059
-
2060
- </section>
2061
- <section id="kssref-components-processbar" class="kss-section kss-section--depth-2 ">
2062
-
2063
- <div class="kss-style">
2064
- <h2 class="kss-title kss-title--level-2">
2065
- <a class="kss-title__permalink" href="#kssref-components-processbar">
2066
- <span class="kss-title__ref">
2067
- 3.11
2068
- <span class="kss-title__permalink-hash">
2069
- #Components.Processbar
2070
- </span>
2071
- </span>
2072
- Processbar
2073
- </a>
2074
- </h2>
2075
-
2076
- <p class="kss-toolbar">
2077
- <a href="#kssref-components-processbar" data-kss-fullscreen="kssref-components-processbar">
2078
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
2079
- <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">
2080
- <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>
2081
- </svg>
2082
- <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">
2083
- <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>
2084
- </svg>
2085
- </a>
2086
- <a href="item-components-processbar.html" target="_blank">
2087
- <span class="kss-toolbar__tooltip">Open in new window</span>
2088
- <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">
2089
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
2090
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
2091
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
2092
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
2093
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
2094
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
2095
- </svg>
2096
- </a>
2097
- <a href="#kssref-components-processbar" data-kss-guides="true">
2098
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
2099
- <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">
2100
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
2101
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
2102
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
2103
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
2104
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
2105
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
2106
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
2107
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
2108
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
2109
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
2110
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
2111
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
2112
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
2113
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
2114
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
2115
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
2116
- </svg>
2117
- </a>
2118
- <a href="#kssref-components-processbar" data-kss-markup="true">
2119
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
2120
- <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">
2121
- <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"/>
2122
- <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"/>
2123
- </svg>
2124
- </a>
2125
- </p>
2126
-
2127
-
2128
-
2129
- </div>
2130
-
2131
- <div class="kss-modifier__wrapper">
2132
- <div class="kss-modifier__heading kss-style">
2133
- Example
2134
- </div>
2135
-
2136
-
2137
- <div class="kss-modifier__example">
2138
- <div class="processbar">
2139
- <div class="processbar__items">
2140
- <div class="processbar__item is-done">
2141
- <i class="processbar__icon icon icon-order-address"></i>
2142
- <span class="processbar__label">Label</span>
2143
- </div>
2144
- <div class="processbar__item is-active">
2145
- <i class="processbar__icon icon icon-order-payment"></i>
2146
- <span class="processbar__label">Label</span>
2147
- </div>
2148
- <div class="processbar__item">
2149
- <i class="processbar__icon icon icon-order-check"></i>
2150
- <span class="processbar__label">Label</span>
2151
- </div>
2152
- </div>
2153
- <div class="processbar__inactive"></div>
2154
- <div class="processbar__active"></div>
2155
- </div>
2156
- <div class="kss-modifier__example-footer"></div>
2157
- </div>
2158
-
2159
- </div>
2160
-
2161
- <details class="kss-markup kss-style">
2162
- <summary>
2163
- Markup
2164
- </summary>
2165
- <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;processbar&quot;</span>&gt;</span>
2166
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;processbar__items&quot;</span>&gt;</span>
2167
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;processbar__item is-done&quot;</span>&gt;</span>
2168
- <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;processbar__icon icon icon-order-address&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
2169
- <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;processbar__label&quot;</span>&gt;</span>Label<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
2170
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
2171
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;processbar__item is-active&quot;</span>&gt;</span>
2172
- <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;processbar__icon icon icon-order-payment&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
2173
- <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;processbar__label&quot;</span>&gt;</span>Label<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
2174
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
2175
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;processbar__item&quot;</span>&gt;</span>
2176
- <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;processbar__icon icon icon-order-check&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
2177
- <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;processbar__label&quot;</span>&gt;</span>Label<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
2178
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
2179
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
2180
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;processbar__inactive&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
2181
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;processbar__active&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
2182
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span></code></pre>
2183
- </details>
2184
-
2185
- <div class="kss-source kss-style">
2186
- Source: <code>build/doc/doc.css</code>, line 10046
2187
- </div>
2188
-
2189
- </section>
2190
- <section id="kssref-components-radio-list" class="kss-section kss-section--depth-2 ">
2191
-
2192
- <div class="kss-style">
2193
- <h2 class="kss-title kss-title--level-2">
2194
- <a class="kss-title__permalink" href="#kssref-components-radio-list">
2195
- <span class="kss-title__ref">
2196
- 3.12
2197
- <span class="kss-title__permalink-hash">
2198
- #Components.Radio List
2199
- </span>
2200
- </span>
2201
- Radio List
2202
- </a>
2203
- </h2>
2204
-
2205
- <p class="kss-toolbar">
2206
- <a href="#kssref-components-radio-list" data-kss-fullscreen="kssref-components-radio-list">
2207
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
2208
- <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">
2209
- <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>
2210
- </svg>
2211
- <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">
2212
- <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>
2213
- </svg>
2214
- </a>
2215
- <a href="item-components-radio-list.html" target="_blank">
2216
- <span class="kss-toolbar__tooltip">Open in new window</span>
2217
- <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">
2218
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
2219
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
2220
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
2221
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
2222
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
2223
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
2224
- </svg>
2225
- </a>
2226
- <a href="#kssref-components-radio-list" data-kss-guides="true">
2227
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
2228
- <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">
2229
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
2230
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
2231
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
2232
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
2233
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
2234
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
2235
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
2236
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
2237
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
2238
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
2239
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
2240
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
2241
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
2242
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
2243
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
2244
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
2245
- </svg>
2246
- </a>
2247
- <a href="#kssref-components-radio-list" data-kss-markup="true">
2248
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
2249
- <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">
2250
- <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"/>
2251
- <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"/>
2252
- </svg>
2253
- </a>
2254
- </p>
2255
-
2256
-
2257
-
2258
- </div>
2259
-
2260
- <div class="kss-modifier__wrapper">
2261
- <div class="kss-modifier__heading kss-style">
2262
- Examples
2263
- </div>
2264
-
2265
- <div class="kss-modifier__default-name kss-style">
2266
- Default styling
2267
- </div>
2268
-
2269
- <div class="kss-modifier__example">
2270
- <div class="radioList ">
2271
- <label for="radio1" class="radioListItem">
2272
- <input type="radio" name="radio" id="radio1" value="1" checked>
2273
- <i></i>
2274
- <span class="radioListItem__text">
2275
- <span class="radioListItem__headline">
2276
- Headline
2277
- </span>
2278
- <span class="radioListItem__summary">
2279
- Summary
2280
- </span>
2281
- </span>
2282
- <span class="radioListItem__image">
2283
- <img src="kss-assets/sample.png" alt="Headline" loading="lazy" width="57px" height="38px">
2284
- </span>
2285
- </label>
2286
- <label for="radio2" class="radioListItem">
2287
- <input type="radio" name="radio" id="radio2" value="2" checked>
2288
- <i></i>
2289
- <span class="radioListItem__text">
2290
- <span class="radioListItem__headline">
2291
- Headline
2292
- </span>
2293
- <span class="radioListItem__summary">
2294
- Summary
2295
- </span>
2296
- </span>
2297
- <span class="radioListItem__image">
2298
- <img src="kss-assets/sample.png" alt="Headline" loading="lazy" width="57px" height="38px">
2299
- </span>
2300
- </label>
2301
- </div>
2302
- <div class="kss-modifier__example-footer"></div>
2303
- </div>
2304
-
2305
- <div class="kss-modifier__name kss-style">
2306
- radioList--small
2307
- </div>
2308
- <div class="kss-modifier__description kss-style">
2309
- Small
2310
- </div>
2311
- <div class="kss-modifier__example">
2312
- <div class="radioList radioList--small">
2313
- <label for="radio1" class="radioListItem">
2314
- <input type="radio" name="radio" id="radio1" value="1" checked>
2315
- <i></i>
2316
- <span class="radioListItem__text">
2317
- <span class="radioListItem__headline">
2318
- Headline
2319
- </span>
2320
- <span class="radioListItem__summary">
2321
- Summary
2322
- </span>
2323
- </span>
2324
- <span class="radioListItem__image">
2325
- <img src="kss-assets/sample.png" alt="Headline" loading="lazy" width="57px" height="38px">
2326
- </span>
2327
- </label>
2328
- <label for="radio2" class="radioListItem">
2329
- <input type="radio" name="radio" id="radio2" value="2" checked>
2330
- <i></i>
2331
- <span class="radioListItem__text">
2332
- <span class="radioListItem__headline">
2333
- Headline
2334
- </span>
2335
- <span class="radioListItem__summary">
2336
- Summary
2337
- </span>
2338
- </span>
2339
- <span class="radioListItem__image">
2340
- <img src="kss-assets/sample.png" alt="Headline" loading="lazy" width="57px" height="38px">
2341
- </span>
2342
- </label>
2343
- </div>
2344
- <div class="kss-modifier__example-footer"></div>
2345
- </div>
2346
- </div>
2347
-
2348
- <details class="kss-markup kss-style">
2349
- <summary>
2350
- Markup
2351
- </summary>
2352
- <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;radioList [modifier class]&quot;</span>&gt;</span>
2353
- <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">&quot;radio1&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;radioListItem&quot;</span>&gt;</span>
2354
- <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;radio&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;radio&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;radio1&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;1&quot;</span> <span class="hljs-attr">checked</span>&gt;</span>
2355
- <span class="hljs-tag">&lt;<span class="hljs-name">i</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
2356
- <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;radioListItem__text&quot;</span>&gt;</span>
2357
- <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;radioListItem__headline&quot;</span>&gt;</span>
2358
- Headline
2359
- <span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
2360
- <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;radioListItem__summary&quot;</span>&gt;</span>
2361
- Summary
2362
- <span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
2363
- <span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
2364
- <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;radioListItem__image&quot;</span>&gt;</span>
2365
- <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;kss-assets/sample.png&quot;</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;Headline&quot;</span> <span class="hljs-attr">loading</span>=<span class="hljs-string">&quot;lazy&quot;</span> <span class="hljs-attr">width</span>=<span class="hljs-string">&quot;57px&quot;</span> <span class="hljs-attr">height</span>=<span class="hljs-string">&quot;38px&quot;</span>&gt;</span>
2366
- <span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
2367
- <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
2368
- <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">&quot;radio2&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;radioListItem&quot;</span>&gt;</span>
2369
- <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;radio&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;radio&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;radio2&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;2&quot;</span> <span class="hljs-attr">checked</span>&gt;</span>
2370
- <span class="hljs-tag">&lt;<span class="hljs-name">i</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
2371
- <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;radioListItem__text&quot;</span>&gt;</span>
2372
- <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;radioListItem__headline&quot;</span>&gt;</span>
2373
- Headline
2374
- <span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
2375
- <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;radioListItem__summary&quot;</span>&gt;</span>
2376
- Summary
2377
- <span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
2378
- <span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
2379
- <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;radioListItem__image&quot;</span>&gt;</span>
2380
- <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;kss-assets/sample.png&quot;</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;Headline&quot;</span> <span class="hljs-attr">loading</span>=<span class="hljs-string">&quot;lazy&quot;</span> <span class="hljs-attr">width</span>=<span class="hljs-string">&quot;57px&quot;</span> <span class="hljs-attr">height</span>=<span class="hljs-string">&quot;38px&quot;</span>&gt;</span>
2381
- <span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
2382
- <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
2383
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span></code></pre>
2384
- </details>
2385
-
2386
- <div class="kss-source kss-style">
2387
- Source: <code>build/doc/doc.css</code>, line 12046
2388
- </div>
2389
-
2390
- </section>
2391
- <section id="kssref-components-rating" class="kss-section kss-section--depth-2 ">
2392
-
2393
- <div class="kss-style">
2394
- <h2 class="kss-title kss-title--level-2">
2395
- <a class="kss-title__permalink" href="#kssref-components-rating">
2396
- <span class="kss-title__ref">
2397
- 3.13
2398
- <span class="kss-title__permalink-hash">
2399
- #Components.Rating
2400
- </span>
2401
- </span>
2402
- Rating
2403
- </a>
2404
- </h2>
2405
-
2406
- <p class="kss-toolbar">
2407
- <a href="#kssref-components-rating" data-kss-fullscreen="kssref-components-rating">
2408
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
2409
- <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">
2410
- <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>
2411
- </svg>
2412
- <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">
2413
- <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>
2414
- </svg>
2415
- </a>
2416
- <a href="item-components-rating.html" target="_blank">
2417
- <span class="kss-toolbar__tooltip">Open in new window</span>
2418
- <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">
2419
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
2420
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
2421
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
2422
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
2423
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
2424
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
2425
- </svg>
2426
- </a>
2427
- <a href="#kssref-components-rating" data-kss-guides="true">
2428
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
2429
- <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">
2430
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
2431
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
2432
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
2433
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
2434
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
2435
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
2436
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
2437
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
2438
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
2439
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
2440
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
2441
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
2442
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
2443
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
2444
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
2445
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
2446
- </svg>
2447
- </a>
2448
- <a href="#kssref-components-rating" data-kss-markup="true">
2449
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
2450
- <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">
2451
- <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"/>
2452
- <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"/>
2453
- </svg>
2454
- </a>
2455
- </p>
2456
-
2457
-
2458
-
2459
- </div>
2460
-
2461
- <div class="kss-modifier__wrapper">
2462
- <div class="kss-modifier__heading kss-style">
2463
- Example
2464
- </div>
2465
-
2466
-
2467
- <div class="kss-modifier__example">
2468
- <div class="rating">
2469
- <div class="rating__stars">
2470
- <span class="rating__star rating__star--active"><i class="icon icon-star"></i></span>
2471
- <span class="rating__star rating__star--active"><i class="icon icon-star"></i></span>
2472
- <span class="rating__star rating__star--active"><i class="icon icon-star"></i></span>
2473
- <span class="rating__star rating__star--active"><i class="icon icon-star"></i></span>
2474
- <span class="rating__star rating__star--active-half"><i class="icon icon-star"></i></span>
2475
- </div>
2476
- <div class="rating__label">
2477
- (4,5/5) Trusted Shops
2478
- </div>
2479
- </div>
2480
- <div class="kss-modifier__example-footer"></div>
2481
- </div>
2482
-
2483
- </div>
2484
-
2485
- <details class="kss-markup kss-style">
2486
- <summary>
2487
- Markup
2488
- </summary>
2489
- <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;rating&quot;</span>&gt;</span>
2490
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;rating__stars&quot;</span>&gt;</span>
2491
- <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;rating__star rating__star--active&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;icon icon-star&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
2492
- <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;rating__star rating__star--active&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;icon icon-star&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
2493
- <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;rating__star rating__star--active&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;icon icon-star&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
2494
- <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;rating__star rating__star--active&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;icon icon-star&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
2495
- <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;rating__star rating__star--active-half&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;icon icon-star&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
2496
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
2497
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;rating__label&quot;</span>&gt;</span>
2498
- (4,5/5) Trusted Shops
2499
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
2500
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span></code></pre>
2501
- </details>
2502
-
2503
- <div class="kss-source kss-style">
2504
- Source: <code>build/doc/doc.css</code>, line 11414
2505
- </div>
2506
-
2507
- </section>
2508
- <section id="kssref-components-searchbar" class="kss-section kss-section--depth-2 ">
2509
-
2510
- <div class="kss-style">
2511
- <h2 class="kss-title kss-title--level-2">
2512
- <a class="kss-title__permalink" href="#kssref-components-searchbar">
2513
- <span class="kss-title__ref">
2514
- 3.14
2515
- <span class="kss-title__permalink-hash">
2516
- #Components.Searchbar
2517
- </span>
2518
- </span>
2519
- Searchbar
2520
- </a>
2521
- </h2>
2522
-
2523
- <p class="kss-toolbar">
2524
- <a href="#kssref-components-searchbar" data-kss-fullscreen="kssref-components-searchbar">
2525
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
2526
- <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">
2527
- <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>
2528
- </svg>
2529
- <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">
2530
- <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>
2531
- </svg>
2532
- </a>
2533
- <a href="item-components-searchbar.html" target="_blank">
2534
- <span class="kss-toolbar__tooltip">Open in new window</span>
2535
- <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">
2536
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
2537
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
2538
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
2539
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
2540
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
2541
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
2542
- </svg>
2543
- </a>
2544
- <a href="#kssref-components-searchbar" data-kss-guides="true">
2545
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
2546
- <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">
2547
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
2548
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
2549
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
2550
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
2551
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
2552
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
2553
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
2554
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
2555
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
2556
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
2557
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
2558
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
2559
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
2560
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
2561
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
2562
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
2563
- </svg>
2564
- </a>
2565
- <a href="#kssref-components-searchbar" data-kss-markup="true">
2566
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
2567
- <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">
2568
- <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"/>
2569
- <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"/>
2570
- </svg>
2571
- </a>
2572
- </p>
2573
-
2574
- <div class="kss-description">
2575
- <p>You can add minified Classes for each Viewport Size (--minified-xs,--minified-sm,--minified-md,--minified-lg,--minified-xlg)</p>
2576
- <p>.searchBar--minified
2577
- .searchBar--small
2578
- .is-focus</p>
2579
-
2580
- </div>
2581
-
2582
-
2583
- </div>
2584
-
2585
- <div class="kss-modifier__wrapper">
2586
- <div class="kss-modifier__heading kss-style">
2587
- Example
2588
- </div>
2589
-
2590
-
2591
- <div class="kss-modifier__example">
2592
- <div class="inputGroup searchBar ">
2593
- <input type="text" placeholder="Search..." />
2594
- <span class="inputGroup__addon"><i class="icon icon-search"></i></span>
2595
- </div>
2596
- <div class="kss-modifier__example-footer"></div>
2597
- </div>
2598
-
2599
- </div>
2600
-
2601
- <details class="kss-markup kss-style">
2602
- <summary>
2603
- Markup
2604
- </summary>
2605
- <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;inputGroup searchBar &quot;</span>&gt;</span>
2606
- <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;Search...&quot;</span> /&gt;</span>
2607
- <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;inputGroup__addon&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;icon icon-search&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
2608
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span></code></pre>
2609
- </details>
2610
-
2611
- <div class="kss-source kss-style">
2612
- Source: <code>build/doc/doc.css</code>, line 11045
2613
- </div>
2614
-
2615
- </section>
2616
- <section id="kssref-components-share-links" class="kss-section kss-section--depth-2 ">
2617
-
2618
- <div class="kss-style">
2619
- <h2 class="kss-title kss-title--level-2">
2620
- <a class="kss-title__permalink" href="#kssref-components-share-links">
2621
- <span class="kss-title__ref">
2622
- 3.15
2623
- <span class="kss-title__permalink-hash">
2624
- #Components.Share Links
2625
- </span>
2626
- </span>
2627
- Share Links
2628
- </a>
2629
- </h2>
2630
-
2631
- <p class="kss-toolbar">
2632
- <a href="#kssref-components-share-links" data-kss-fullscreen="kssref-components-share-links">
2633
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
2634
- <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">
2635
- <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>
2636
- </svg>
2637
- <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">
2638
- <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>
2639
- </svg>
2640
- </a>
2641
- <a href="item-components-share-links.html" target="_blank">
2642
- <span class="kss-toolbar__tooltip">Open in new window</span>
2643
- <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">
2644
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
2645
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
2646
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
2647
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
2648
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
2649
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
2650
- </svg>
2651
- </a>
2652
- <a href="#kssref-components-share-links" data-kss-guides="true">
2653
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
2654
- <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">
2655
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
2656
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
2657
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
2658
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
2659
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
2660
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
2661
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
2662
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
2663
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
2664
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
2665
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
2666
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
2667
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
2668
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
2669
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
2670
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
2671
- </svg>
2672
- </a>
2673
- <a href="#kssref-components-share-links" data-kss-markup="true">
2674
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
2675
- <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">
2676
- <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"/>
2677
- <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"/>
2678
- </svg>
2679
- </a>
2680
- </p>
2681
-
2682
-
2683
-
2684
- </div>
2685
-
2686
- <div class="kss-modifier__wrapper">
2687
- <div class="kss-modifier__heading kss-style">
2688
- Example
2689
- </div>
2690
-
2691
-
2692
- <div class="kss-modifier__example">
2693
- <div class="shareLinks">
2694
- <a class="shareLink" href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Flocalhost%3A8090%2Fde%2Fjucad-carbon-travel-1-0-camouflage-p202%2F" title="Auf Facebook teilen">
2695
- <i class="icon icon-facebook"></i>
2696
- <span>Share on Facebook</span>
2697
- </a>
2698
- <a class="shareLink" href="https://www.pinterest.com/pin/create/link/?url=http%3A%2F%2Flocalhost%3A8090%2Fde%2Fjucad-carbon-travel-1-0-camouflage-p202%2F" title="Auf Pinterest pinnen">
2699
- <i class="icon icon-pinterest"></i>
2700
- <span>Share on Pinterest</span>
2701
- </a>
2702
- </div>
2703
- <div class="kss-modifier__example-footer"></div>
2704
- </div>
2705
-
2706
- </div>
2707
-
2708
- <details class="kss-markup kss-style">
2709
- <summary>
2710
- Markup
2711
- </summary>
2712
- <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;shareLinks&quot;</span>&gt;</span>
2713
- <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;shareLink&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Flocalhost%3A8090%2Fde%2Fjucad-carbon-travel-1-0-camouflage-p202%2F&quot;</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;Auf Facebook teilen&quot;</span>&gt;</span>
2714
- <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;icon icon-facebook&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
2715
- <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>Share on Facebook<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
2716
- <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
2717
- <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;shareLink&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;https://www.pinterest.com/pin/create/link/?url=http%3A%2F%2Flocalhost%3A8090%2Fde%2Fjucad-carbon-travel-1-0-camouflage-p202%2F&quot;</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;Auf Pinterest pinnen&quot;</span>&gt;</span>
2718
- <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;icon icon-pinterest&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
2719
- <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>Share on Pinterest<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
2720
- <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
2721
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span></code></pre>
2722
- </details>
2723
-
2724
- <div class="kss-source kss-style">
2725
- Source: <code>build/doc/doc.css</code>, line 12285
2726
- </div>
2727
-
2728
- </section>
2729
- <section id="kssref-components-tags" class="kss-section kss-section--depth-2 ">
2730
-
2731
- <div class="kss-style">
2732
- <h2 class="kss-title kss-title--level-2">
2733
- <a class="kss-title__permalink" href="#kssref-components-tags">
2734
- <span class="kss-title__ref">
2735
- 3.16
2736
- <span class="kss-title__permalink-hash">
2737
- #Components.Tags
2738
- </span>
2739
- </span>
2740
- Tags
2741
- </a>
2742
- </h2>
2743
-
2744
- <p class="kss-toolbar">
2745
- <a href="#kssref-components-tags" data-kss-fullscreen="kssref-components-tags">
2746
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
2747
- <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">
2748
- <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>
2749
- </svg>
2750
- <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">
2751
- <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>
2752
- </svg>
2753
- </a>
2754
- <a href="item-components-tags.html" target="_blank">
2755
- <span class="kss-toolbar__tooltip">Open in new window</span>
2756
- <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">
2757
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
2758
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
2759
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
2760
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
2761
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
2762
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
2763
- </svg>
2764
- </a>
2765
- <a href="#kssref-components-tags" data-kss-guides="true">
2766
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
2767
- <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">
2768
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
2769
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
2770
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
2771
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
2772
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
2773
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
2774
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
2775
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
2776
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
2777
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
2778
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
2779
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
2780
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
2781
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
2782
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
2783
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
2784
- </svg>
2785
- </a>
2786
- <a href="#kssref-components-tags" data-kss-markup="true">
2787
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
2788
- <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">
2789
- <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"/>
2790
- <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"/>
2791
- </svg>
2792
- </a>
2793
- </p>
2794
-
2795
-
2796
-
2797
- </div>
2798
-
2799
- <div class="kss-modifier__wrapper">
2800
- <div class="kss-modifier__heading kss-style">
2801
- Examples
2802
- </div>
2803
-
2804
- <div class="kss-modifier__default-name kss-style">
2805
- Default styling
2806
- </div>
2807
-
2808
- <div class="kss-modifier__example">
2809
- <span class="tag ">Tagname</span>
2810
- <div class="kss-modifier__example-footer"></div>
2811
- </div>
2812
-
2813
- <div class="kss-modifier__name kss-style">
2814
- :hover
2815
- </div>
2816
- <div class="kss-modifier__description kss-style">
2817
- Hover
2818
- </div>
2819
- <div class="kss-modifier__example">
2820
- <span class="tag pseudo-class-hover">Tagname</span>
2821
- <div class="kss-modifier__example-footer"></div>
2822
- </div>
2823
- <div class="kss-modifier__name kss-style">
2824
- :focus
2825
- </div>
2826
- <div class="kss-modifier__description kss-style">
2827
- Focus
2828
- </div>
2829
- <div class="kss-modifier__example">
2830
- <span class="tag pseudo-class-focus">Tagname</span>
2831
- <div class="kss-modifier__example-footer"></div>
2832
- </div>
2833
- <div class="kss-modifier__name kss-style">
2834
- :active
2835
- </div>
2836
- <div class="kss-modifier__description kss-style">
2837
- Active
2838
- </div>
2839
- <div class="kss-modifier__example">
2840
- <span class="tag pseudo-class-active">Tagname</span>
2841
- <div class="kss-modifier__example-footer"></div>
2842
- </div>
2843
- <div class="kss-modifier__name kss-style">
2844
- .is-loading
2845
- </div>
2846
- <div class="kss-modifier__description kss-style">
2847
- Is loading
2848
- </div>
2849
- <div class="kss-modifier__example">
2850
- <span class="tag is-loading">Tagname</span>
2851
- <div class="kss-modifier__example-footer"></div>
2852
- </div>
2853
- <div class="kss-modifier__name kss-style">
2854
- .is-success
2855
- </div>
2856
- <div class="kss-modifier__description kss-style">
2857
- Is success
2858
- </div>
2859
- <div class="kss-modifier__example">
2860
- <span class="tag is-success">Tagname</span>
2861
- <div class="kss-modifier__example-footer"></div>
2862
- </div>
2863
- <div class="kss-modifier__name kss-style">
2864
- .is-error
2865
- </div>
2866
- <div class="kss-modifier__description kss-style">
2867
- Is error
2868
- </div>
2869
- <div class="kss-modifier__example">
2870
- <span class="tag is-error">Tagname</span>
2871
- <div class="kss-modifier__example-footer"></div>
2872
- </div>
2873
- </div>
2874
-
2875
- <details class="kss-markup kss-style">
2876
- <summary>
2877
- Markup
2878
- </summary>
2879
- <pre class="hljs"><code class="language-handlebars"><span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;tag [modifier class]&quot;</span>&gt;</span>Tagname<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></span></code></pre>
2880
- </details>
2881
-
2882
- <div class="kss-source kss-style">
2883
- Source: <code>build/doc/doc.css</code>, line 11607
2884
- </div>
2885
-
2886
- </section>
2887
- <section id="kssref-components-tags-group" class="kss-section kss-section--depth-2 ">
2888
-
2889
- <div class="kss-style">
2890
- <h2 class="kss-title kss-title--level-2">
2891
- <a class="kss-title__permalink" href="#kssref-components-tags-group">
2892
- <span class="kss-title__ref">
2893
- 3.17
2894
- <span class="kss-title__permalink-hash">
2895
- #Components.Tags Group
2896
- </span>
2897
- </span>
2898
- Tags Group
2899
- </a>
2900
- </h2>
2901
-
2902
- <p class="kss-toolbar">
2903
- <a href="#kssref-components-tags-group" data-kss-fullscreen="kssref-components-tags-group">
2904
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
2905
- <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">
2906
- <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>
2907
- </svg>
2908
- <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">
2909
- <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>
2910
- </svg>
2911
- </a>
2912
- <a href="item-components-tags-group.html" target="_blank">
2913
- <span class="kss-toolbar__tooltip">Open in new window</span>
2914
- <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">
2915
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
2916
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
2917
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
2918
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
2919
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
2920
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
2921
- </svg>
2922
- </a>
2923
- <a href="#kssref-components-tags-group" data-kss-guides="true">
2924
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
2925
- <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">
2926
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
2927
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
2928
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
2929
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
2930
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
2931
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
2932
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
2933
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
2934
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
2935
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
2936
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
2937
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
2938
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
2939
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
2940
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
2941
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
2942
- </svg>
2943
- </a>
2944
- <a href="#kssref-components-tags-group" data-kss-markup="true">
2945
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
2946
- <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">
2947
- <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"/>
2948
- <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"/>
2949
- </svg>
2950
- </a>
2951
- </p>
2952
-
2953
-
2954
-
2955
- </div>
2956
-
2957
- <div class="kss-modifier__wrapper">
2958
- <div class="kss-modifier__heading kss-style">
2959
- Example
2960
- </div>
2961
-
2962
-
2963
- <div class="kss-modifier__example">
2964
- <div class="tags">
2965
- <span class="tag">Tagname</span>
2966
- <span class="tag">Tagname</span>
2967
- <span class="tag">Tagname</span>
2968
- <span class="tag">Tagname</span>
2969
- <span class="tag">Tagname</span>
2970
- <span class="tag">Tagname</span>
2971
- <span class="tag">Tagname</span>
2972
- <span class="tag">Tagname</span>
2973
- </div>
2974
- <div class="kss-modifier__example-footer"></div>
2975
- </div>
2976
-
2977
- </div>
2978
-
2979
- <details class="kss-markup kss-style">
2980
- <summary>
2981
- Markup
2982
- </summary>
2983
- <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;tags&quot;</span>&gt;</span>
2984
- <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;tag&quot;</span>&gt;</span>Tagname<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
2985
- <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;tag&quot;</span>&gt;</span>Tagname<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
2986
- <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;tag&quot;</span>&gt;</span>Tagname<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
2987
- <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;tag&quot;</span>&gt;</span>Tagname<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
2988
- <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;tag&quot;</span>&gt;</span>Tagname<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
2989
- <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;tag&quot;</span>&gt;</span>Tagname<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
2990
- <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;tag&quot;</span>&gt;</span>Tagname<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
2991
- <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;tag&quot;</span>&gt;</span>Tagname<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
2992
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span></code></pre>
2993
- </details>
2994
-
2995
- <div class="kss-source kss-style">
2996
- Source: <code>build/doc/doc.css</code>, line 11622
2997
- </div>
2998
-
2999
- </section>
3000
- <section id="kssref-components-trust-infobar" class="kss-section kss-section--depth-2 ">
3001
-
3002
- <div class="kss-style">
3003
- <h2 class="kss-title kss-title--level-2">
3004
- <a class="kss-title__permalink" href="#kssref-components-trust-infobar">
3005
- <span class="kss-title__ref">
3006
- 3.18
3007
- <span class="kss-title__permalink-hash">
3008
- #Components.Trust Infobar
3009
- </span>
3010
- </span>
3011
- Trust Infobar
3012
- </a>
3013
- </h2>
3014
-
3015
- <p class="kss-toolbar">
3016
- <a href="#kssref-components-trust-infobar" data-kss-fullscreen="kssref-components-trust-infobar">
3017
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
3018
- <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">
3019
- <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>
3020
- </svg>
3021
- <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">
3022
- <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>
3023
- </svg>
3024
- </a>
3025
- <a href="item-components-trust-infobar.html" target="_blank">
3026
- <span class="kss-toolbar__tooltip">Open in new window</span>
3027
- <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">
3028
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
3029
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
3030
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
3031
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
3032
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
3033
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
3034
- </svg>
3035
- </a>
3036
- <a href="#kssref-components-trust-infobar" data-kss-guides="true">
3037
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
3038
- <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">
3039
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
3040
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
3041
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
3042
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
3043
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
3044
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
3045
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
3046
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
3047
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
3048
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
3049
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
3050
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
3051
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
3052
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
3053
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
3054
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
3055
- </svg>
3056
- </a>
3057
- <a href="#kssref-components-trust-infobar" data-kss-markup="true">
3058
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
3059
- <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">
3060
- <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"/>
3061
- <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"/>
3062
- </svg>
3063
- </a>
3064
- </p>
3065
-
3066
-
3067
-
3068
- </div>
3069
-
3070
- <div class="kss-modifier__wrapper">
3071
- <div class="kss-modifier__heading kss-style">
3072
- Example
3073
- </div>
3074
-
3075
-
3076
- <div class="kss-modifier__example">
3077
- <div class="trustInfobar">
3078
- <span class="trustInfobar__label">Text</span>
3079
- <img src="kss-assets/sample.png">
3080
- <img src="kss-assets/sample.png">
3081
- <img src="kss-assets/sample.png">
3082
- <img src="kss-assets/sample.png">
3083
- <img src="kss-assets/sample.png">
3084
- </div>
3085
- <div class="kss-modifier__example-footer"></div>
3086
- </div>
3087
-
3088
- </div>
3089
-
3090
- <details class="kss-markup kss-style">
3091
- <summary>
3092
- Markup
3093
- </summary>
3094
- <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;trustInfobar&quot;</span>&gt;</span>
3095
- <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;trustInfobar__label&quot;</span>&gt;</span>Text<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
3096
- <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;kss-assets/sample.png&quot;</span>&gt;</span>
3097
- <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;kss-assets/sample.png&quot;</span>&gt;</span>
3098
- <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;kss-assets/sample.png&quot;</span>&gt;</span>
3099
- <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;kss-assets/sample.png&quot;</span>&gt;</span>
3100
- <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;kss-assets/sample.png&quot;</span>&gt;</span>
3101
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span></code></pre>
3102
- </details>
3103
-
3104
- <div class="kss-source kss-style">
3105
- Source: <code>build/doc/doc.css</code>, line 10699
3106
- </div>
3107
-
3108
- </section>
3109
- <section id="kssref-components-trustbar" class="kss-section kss-section--depth-2 ">
3110
-
3111
- <div class="kss-style">
3112
- <h2 class="kss-title kss-title--level-2">
3113
- <a class="kss-title__permalink" href="#kssref-components-trustbar">
3114
- <span class="kss-title__ref">
3115
- 3.19
3116
- <span class="kss-title__permalink-hash">
3117
- #Components.Trustbar
3118
- </span>
3119
- </span>
3120
- Trustbar
3121
- </a>
3122
- </h2>
3123
-
3124
- <p class="kss-toolbar">
3125
- <a href="#kssref-components-trustbar" data-kss-fullscreen="kssref-components-trustbar">
3126
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
3127
- <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">
3128
- <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>
3129
- </svg>
3130
- <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">
3131
- <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>
3132
- </svg>
3133
- </a>
3134
- <a href="item-components-trustbar.html" target="_blank">
3135
- <span class="kss-toolbar__tooltip">Open in new window</span>
3136
- <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">
3137
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
3138
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
3139
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
3140
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
3141
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
3142
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
3143
- </svg>
3144
- </a>
3145
- <a href="#kssref-components-trustbar" data-kss-guides="true">
3146
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
3147
- <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">
3148
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
3149
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
3150
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
3151
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
3152
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
3153
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
3154
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
3155
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
3156
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
3157
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
3158
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
3159
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
3160
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
3161
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
3162
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
3163
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
3164
- </svg>
3165
- </a>
3166
- <a href="#kssref-components-trustbar" data-kss-markup="true">
3167
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
3168
- <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">
3169
- <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"/>
3170
- <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"/>
3171
- </svg>
3172
- </a>
3173
- </p>
3174
-
3175
- <div class="kss-description">
3176
- <p>JS-Source: ../global/js/trustbar.js</p>
3177
-
3178
- </div>
3179
-
3180
-
3181
- </div>
3182
-
3183
- <div class="kss-modifier__wrapper">
3184
- <div class="kss-modifier__heading kss-style">
3185
- Example
3186
- </div>
3187
-
3188
-
3189
- <div class="kss-modifier__example">
3190
- <div class="trustBar js-trustBar" data-options='{"hasCloseBtn":true;}'>
3191
- <div class="textcontent">Trust 1</div>
3192
- <div class="textcontent">Trust 2</div>
3193
- <div class="textcontent">Trust 3</div>
3194
- </div>
3195
- <div class="trustBar js-trustBar" data-options='{"hasCloseBtn":true;"items":3}'>
3196
- <div class="textcontent">Trust 1</div>
3197
- <div class="textcontent">Trust 2</div>
3198
- <div class="textcontent">Trust 3</div>
3199
- </div>
3200
- <div class="kss-modifier__example-footer"></div>
3201
- </div>
3202
-
3203
- </div>
3204
-
3205
- <details class="kss-markup kss-style">
3206
- <summary>
3207
- Markup
3208
- </summary>
3209
- <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;trustBar js-trustBar&quot;</span> <span class="hljs-attr">data-options</span>=<span class="hljs-string">&#x27;{&quot;hasCloseBtn&quot;:true;}&#x27;</span>&gt;</span>
3210
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;textcontent&quot;</span>&gt;</span>Trust 1<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
3211
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;textcontent&quot;</span>&gt;</span>Trust 2<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
3212
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;textcontent&quot;</span>&gt;</span>Trust 3<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
3213
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
3214
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;trustBar js-trustBar&quot;</span> <span class="hljs-attr">data-options</span>=<span class="hljs-string">&#x27;{&quot;hasCloseBtn&quot;:true;&quot;items&quot;:3}&#x27;</span>&gt;</span>
3215
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;textcontent&quot;</span>&gt;</span>Trust 1<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
3216
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;textcontent&quot;</span>&gt;</span>Trust 2<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
3217
- <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;textcontent&quot;</span>&gt;</span>Trust 3<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
3218
- <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span></code></pre>
3219
- </details>
3220
-
3221
- <div class="kss-source kss-style">
3222
- Source: <code>build/doc/doc.css</code>, line 10607
3223
- </div>
3224
-
3225
- </section>
3226
- <section id="kssref-components-trustlist" class="kss-section kss-section--depth-2 ">
3227
-
3228
- <div class="kss-style">
3229
- <h2 class="kss-title kss-title--level-2">
3230
- <a class="kss-title__permalink" href="#kssref-components-trustlist">
3231
- <span class="kss-title__ref">
3232
- 3.20
3233
- <span class="kss-title__permalink-hash">
3234
- #Components.Trustlist
3235
- </span>
3236
- </span>
3237
- Trustlist
3238
- </a>
3239
- </h2>
3240
-
3241
- <p class="kss-toolbar">
3242
- <a href="#kssref-components-trustlist" data-kss-fullscreen="kssref-components-trustlist">
3243
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
3244
- <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">
3245
- <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>
3246
- </svg>
3247
- <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">
3248
- <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>
3249
- </svg>
3250
- </a>
3251
- <a href="item-components-trustlist.html" target="_blank">
3252
- <span class="kss-toolbar__tooltip">Open in new window</span>
3253
- <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">
3254
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
3255
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
3256
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
3257
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
3258
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
3259
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
3260
- </svg>
3261
- </a>
3262
- <a href="#kssref-components-trustlist" data-kss-guides="true">
3263
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
3264
- <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">
3265
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
3266
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
3267
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
3268
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
3269
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
3270
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
3271
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
3272
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
3273
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
3274
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
3275
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
3276
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
3277
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
3278
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
3279
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
3280
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
3281
- </svg>
3282
- </a>
3283
- <a href="#kssref-components-trustlist" data-kss-markup="true">
3284
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
3285
- <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">
3286
- <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"/>
3287
- <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"/>
3288
- </svg>
3289
- </a>
3290
- </p>
3291
-
3292
-
3293
-
3294
- </div>
3295
-
3296
- <div class="kss-modifier__wrapper">
3297
- <div class="kss-modifier__heading kss-style">
3298
- Example
3299
- </div>
3300
-
3301
-
3302
- <div class="kss-modifier__example">
3303
- <ul class="trustList">
3304
- <li>
3305
- <i class="icon icon-payment"></i> Kauf auf Rechnung
3306
- </li>
3307
- <li>
3308
- <i class="icon icon-shipping"></i> Kostenloser Versand &amp; Rückversand
3309
- </li>
3310
- <li>
3311
- <i class="icon icon-reload"></i> 100 Tage Rückgaberecht
3312
- </li>
3313
- </ul>
3314
- <div class="kss-modifier__example-footer"></div>
3315
- </div>
3316
-
3317
- </div>
3318
-
3319
- <details class="kss-markup kss-style">
3320
- <summary>
3321
- Markup
3322
- </summary>
3323
- <pre class="hljs"><code class="language-handlebars"><span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;trustList&quot;</span>&gt;</span>
3324
- <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>
3325
- <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;icon icon-payment&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> Kauf auf Rechnung
3326
- <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
3327
- <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>
3328
- <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;icon icon-shipping&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> Kostenloser Versand <span class="hljs-symbol">&amp;amp;</span> Rückversand
3329
- <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
3330
- <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>
3331
- <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;icon icon-reload&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> 100 Tage Rückgaberecht
3332
- <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
3333
- <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span></span></code></pre>
3334
- </details>
3335
-
3336
- <div class="kss-source kss-style">
3337
- Source: <code>build/doc/doc.css</code>, line 10748
3338
- </div>
3339
-
3340
- </section>
3341
- </article>
3342
- </main>
3343
-
3344
- <!-- SCRIPTS -->
3345
- <script src="kss-assets/kss.js"></script>
3346
- <script src="kss-assets/scrollspy.js"></script>
3347
- <script src="kss-assets/kss-fullscreen.js"></script>
3348
- <script src="kss-assets/kss-guides.js"></script>
3349
- <script src="kss-assets/kss-markup.js"></script>
3350
- <script>
3351
- var spy = new ScrollSpy('#kss-node', {
3352
- nav: '.kss-nav__menu-child > li > a',
3353
- className: 'is-in-viewport'
3354
- });
3355
- var kssFullScreen = new KssFullScreen({
3356
- idPrefix: 'kss-fullscreen-',
3357
- bodyClass: 'kss-fullscreen-mode',
3358
- elementClass: 'is-fullscreen'
3359
- });
3360
- var kssGuides = new KssGuides({
3361
- bodyClass: 'kss-guides-mode'
3362
- });
3363
- var kssMarkup = new KssMarkup({
3364
- bodyClass: 'kss-markup-mode',
3365
- detailsClass: 'kss-markup'
3366
- });
3367
- </script>
3368
- <script src="../../default/b2c/dist/js/main.js"></script>
3369
- <script src="../dist/js/main.js"></script>
3370
-
3371
-
3372
-
3373
- <!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
3374
- </body>
3375
- </html>