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