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