├── .babelrc ├── .browserslistrc ├── .gitignore ├── LICENSE.md ├── README.md ├── dist ├── assets │ ├── css │ │ ├── libs.bundle.css │ │ ├── libs.bundle.css.map │ │ ├── theme.bundle.css │ │ └── theme.bundle.css.map │ ├── favicon │ │ ├── android-chrome-192x192.png │ │ ├── android-chrome-256x256.png │ │ ├── apple-touch-icon.png │ │ ├── browserconfig.xml │ │ ├── favicon-16x16.png │ │ ├── favicon-32x32.png │ │ ├── favicon.ico │ │ └── mstile-150x150.png │ ├── fonts │ │ └── remixicon.woff │ ├── images │ │ ├── banners │ │ │ ├── banner-1.jpg │ │ │ ├── banner-2.jpg │ │ │ ├── banner-3.jpg │ │ │ └── banner-4.jpg │ │ ├── instagram │ │ │ ├── instagram-1.jpg │ │ │ ├── instagram-2.jpg │ │ │ ├── instagram-3.jpg │ │ │ ├── instagram-4.jpg │ │ │ ├── instagram-5.jpg │ │ │ ├── instagram-6.jpg │ │ │ ├── instagram-7.jpg │ │ │ ├── instagram-8.jpg │ │ │ └── instagram-9.jpg │ │ ├── logos │ │ │ ├── logo-1.svg │ │ │ ├── logo-2.svg │ │ │ ├── logo-3.svg │ │ │ ├── logo-4.svg │ │ │ ├── logo-5.svg │ │ │ ├── logo-6.svg │ │ │ ├── logo-7.svg │ │ │ ├── logo-8.svg │ │ │ └── logo-9.svg │ │ ├── products │ │ │ ├── product-1.jpg │ │ │ ├── product-10.jpg │ │ │ ├── product-11.jpg │ │ │ ├── product-12.jpg │ │ │ ├── product-13.jpg │ │ │ ├── product-14.jpg │ │ │ ├── product-15.jpg │ │ │ ├── product-16.jpg │ │ │ ├── product-1b.jpg │ │ │ ├── product-2.jpg │ │ │ ├── product-3.jpg │ │ │ ├── product-4.jpg │ │ │ ├── product-5.jpg │ │ │ ├── product-5b.jpg │ │ │ ├── product-5c.jpg │ │ │ ├── product-6.jpg │ │ │ ├── product-7.jpg │ │ │ └── product-8.jpg │ │ └── slideshows │ │ │ ├── slideshow-1.jpg │ │ │ ├── slideshow-2.jpg │ │ │ ├── slideshow-3.jpg │ │ │ └── slideshow-7.jpg │ ├── js │ │ ├── theme.bundle.js │ │ └── vendor.bundle.js │ └── svgs │ │ ├── alipay.svg │ │ ├── american-express.svg │ │ ├── apple-pay.svg │ │ ├── bitcoin.svg │ │ ├── diners-club.svg │ │ ├── ethereum.svg │ │ ├── girocard.svg │ │ ├── giropay.svg │ │ ├── google-pay.svg │ │ ├── ideal.svg │ │ ├── klarna.svg │ │ ├── maestro.svg │ │ ├── mastercard.svg │ │ ├── paypal.svg │ │ ├── przelewy24.svg │ │ ├── ripple.svg │ │ ├── visa.svg │ │ └── vpay.svg ├── cart.html ├── category.html ├── checkout.html ├── index.html └── product.html ├── package-lock.json ├── package.json ├── postcss.config.js ├── src ├── assets │ ├── favicon │ │ ├── android-chrome-192x192.png │ │ ├── android-chrome-256x256.png │ │ ├── apple-touch-icon.png │ │ ├── browserconfig.xml │ │ ├── favicon-16x16.png │ │ ├── favicon-32x32.png │ │ ├── favicon.ico │ │ └── mstile-150x150.png │ ├── fonts │ │ └── remixicon.woff │ ├── images │ │ ├── banners │ │ │ ├── banner-1.jpg │ │ │ ├── banner-2.jpg │ │ │ ├── banner-3.jpg │ │ │ └── banner-4.jpg │ │ ├── instagram │ │ │ ├── instagram-1.jpg │ │ │ ├── instagram-2.jpg │ │ │ ├── instagram-3.jpg │ │ │ ├── instagram-4.jpg │ │ │ ├── instagram-5.jpg │ │ │ ├── instagram-6.jpg │ │ │ ├── instagram-7.jpg │ │ │ ├── instagram-8.jpg │ │ │ └── instagram-9.jpg │ │ ├── logos │ │ │ ├── logo-1.svg │ │ │ ├── logo-2.svg │ │ │ ├── logo-3.svg │ │ │ ├── logo-4.svg │ │ │ ├── logo-5.svg │ │ │ ├── logo-6.svg │ │ │ ├── logo-7.svg │ │ │ ├── logo-8.svg │ │ │ └── logo-9.svg │ │ ├── products │ │ │ ├── product-1.jpg │ │ │ ├── product-10.jpg │ │ │ ├── product-11.jpg │ │ │ ├── product-12.jpg │ │ │ ├── product-13.jpg │ │ │ ├── product-14.jpg │ │ │ ├── product-15.jpg │ │ │ ├── product-16.jpg │ │ │ ├── product-1b.jpg │ │ │ ├── product-2.jpg │ │ │ ├── product-3.jpg │ │ │ ├── product-4.jpg │ │ │ ├── product-5.jpg │ │ │ ├── product-5b.jpg │ │ │ ├── product-5c.jpg │ │ │ ├── product-6.jpg │ │ │ ├── product-7.jpg │ │ │ └── product-8.jpg │ │ └── slideshows │ │ │ ├── slideshow-1.jpg │ │ │ ├── slideshow-2.jpg │ │ │ ├── slideshow-3.jpg │ │ │ └── slideshow-7.jpg │ ├── js │ │ ├── classes │ │ │ ├── hotspot.js │ │ │ └── navbar.js │ │ ├── components │ │ │ ├── aos.js │ │ │ ├── checkout.js │ │ │ ├── choices.js │ │ │ ├── hotspots.js │ │ │ ├── image-zoom.js │ │ │ ├── navbar.js │ │ │ ├── nouislider.js │ │ │ ├── offcanvas.js │ │ │ ├── popover.js │ │ │ ├── product.js │ │ │ ├── scroll-to.js │ │ │ ├── search.js │ │ │ ├── simplebar.js │ │ │ ├── swiper.js │ │ │ └── tooltip.js │ │ ├── misc.js │ │ └── theme.js │ ├── scss │ │ ├── abstracts │ │ │ ├── _css-vars.scss │ │ │ ├── _mixins.scss │ │ │ ├── _sass-variables.scss │ │ │ └── mixins │ │ │ │ ├── _alert.scss │ │ │ │ ├── _backgrounds.scss │ │ │ │ ├── _buttons.scss │ │ │ │ └── _shadows.scss │ │ ├── base │ │ │ └── _base.scss │ │ ├── components │ │ │ ├── _accordion.scss │ │ │ ├── _alert.scss │ │ │ ├── _badge.scss │ │ │ ├── _breadcrumbs.scss │ │ │ ├── _buttons.scss │ │ │ ├── _card.scss │ │ │ ├── _checkout.scss │ │ │ ├── _collapse.scss │ │ │ ├── _components.scss │ │ │ ├── _dropdown.scss │ │ │ ├── _form-check.scss │ │ │ ├── _forms.scss │ │ │ ├── _hotspot.scss │ │ │ ├── _modals.scss │ │ │ ├── _navbar.scss │ │ │ ├── _pagination.scss │ │ │ ├── _payment-icons.scss │ │ │ ├── _popovers.scss │ │ │ ├── _reviews.scss │ │ │ ├── _scroll-to.scss │ │ │ ├── _search.scss │ │ │ ├── _table.scss │ │ │ ├── _tabs.scss │ │ │ ├── _tooltips.scss │ │ │ ├── accordions │ │ │ │ ├── _accordion-icon-left.scss │ │ │ │ ├── _accordion-icon-plus.scss │ │ │ │ ├── _accordion-stripped.scss │ │ │ │ └── _accordions-shared.scss │ │ │ ├── buttons │ │ │ │ ├── _buttons-brand.scss │ │ │ │ ├── _buttons-chunky.scss │ │ │ │ ├── _buttons-faded.scss │ │ │ │ ├── _buttons-icon.scss │ │ │ │ ├── _buttons-rounded.scss │ │ │ │ ├── _buttons-shared.scss │ │ │ │ └── _buttons-skewed.scss │ │ │ ├── cards │ │ │ │ ├── _card-badges.scss │ │ │ │ ├── _card-brands.scss │ │ │ │ ├── _card-expand.scss │ │ │ │ ├── _card-hover-actions.scss │ │ │ │ ├── _card-product-listing.scss │ │ │ │ ├── _card-reveal.scss │ │ │ │ ├── _card-rotate.scss │ │ │ │ ├── _card-shared.scss │ │ │ │ └── _card-skewed.scss │ │ │ ├── popovers │ │ │ │ ├── _popovers-dark.scss │ │ │ │ ├── _popovers-gray.scss │ │ │ │ └── _popovers-shared.scss │ │ │ ├── tabs │ │ │ │ ├── _tabs-border.scss │ │ │ │ └── _tabs-shared.scss │ │ │ └── tooltips │ │ │ │ ├── _tooltips-gray.scss │ │ │ │ └── _tooltips-white.scss │ │ ├── custom.scss │ │ ├── documentation.scss │ │ ├── libs.scss │ │ ├── theme.scss │ │ ├── utilities │ │ │ ├── _animations.scss │ │ │ ├── _backgrounds.scss │ │ │ ├── _bootstrap-api-utilities.scss │ │ │ ├── _borders.scss │ │ │ ├── _hover-effects.scss │ │ │ ├── _overlay.scss │ │ │ ├── _shadow.scss │ │ │ ├── _spacings.scss │ │ │ ├── _text.scss │ │ │ ├── _transforms.scss │ │ │ └── _utilities.scss │ │ └── vendors │ │ │ ├── _vendors.scss │ │ │ ├── aos │ │ │ └── _aos.scss │ │ │ ├── choices │ │ │ └── _choices.scss │ │ │ ├── medium-zoom │ │ │ └── _medium-zoom.scss │ │ │ ├── nouislider │ │ │ └── nouislider.css │ │ │ ├── remixicon │ │ │ └── _remixicon.scss │ │ │ ├── simplebar │ │ │ └── simplebar.css │ │ │ └── swiper │ │ │ └── _swiper.scss │ └── svgs │ │ ├── alipay.svg │ │ ├── american-express.svg │ │ ├── apple-pay.svg │ │ ├── bitcoin.svg │ │ ├── diners-club.svg │ │ ├── ethereum.svg │ │ ├── girocard.svg │ │ ├── giropay.svg │ │ ├── google-pay.svg │ │ ├── ideal.svg │ │ ├── klarna.svg │ │ ├── maestro.svg │ │ ├── mastercard.svg │ │ ├── paypal.svg │ │ ├── przelewy24.svg │ │ ├── ripple.svg │ │ ├── visa.svg │ │ └── vpay.svg ├── data │ ├── cart-items.json │ ├── category-products.json │ ├── config.json │ ├── filters-one.json │ ├── options-size-one.json │ ├── options-size-two.json │ └── slideshow-brands-one.json ├── html │ ├── cart.html │ ├── category.html │ ├── checkout.html │ ├── index.html │ └── product.html └── partials │ ├── banners │ ├── banner-image-hotspot.html │ └── banner-sale-extended.html │ ├── breadcrumbs │ ├── breadcrumbs-one.html │ └── breadcrumbs-two.html │ ├── cart │ ├── cart-items.html │ └── cart-summary.html │ ├── category │ ├── asides │ │ └── aside-menu-one.html │ ├── filters │ │ ├── filter-checkbox-two.html │ │ ├── filter-checkbox.html │ │ ├── filter-collapse.html │ │ ├── filter-colour.html │ │ ├── filter-price.html │ │ └── filter-text.html │ ├── listing-cards │ │ └── listing-card.html │ ├── pagination │ │ └── pagination.html │ └── toolbars │ │ └── toolbar-top.html │ ├── checkout │ ├── checkout-billing.html │ ├── checkout-contact.html │ ├── checkout-payment.html │ ├── checkout-shipping-method.html │ ├── checkout-shipping.html │ └── checkout-summary.html │ ├── footer │ ├── footer.html │ └── scripts.html │ ├── header │ ├── head │ │ └── head.html │ ├── menus │ │ ├── dropdown-links.html │ │ └── menu.html │ └── navbar │ │ └── navbar.html │ ├── info-boxes │ └── info-boxes.html │ ├── instagram │ └── instagram-photos.html │ ├── logo │ └── logo-full.html │ ├── offcanvas │ ├── offcanvas-cart.html │ ├── offcanvas-filters.html │ ├── offcanvas-review.html │ └── offcanvas.html │ ├── product │ ├── gallery │ │ └── images-slideshow-vertical.html │ ├── info │ │ └── info-one.html │ ├── options │ │ ├── option-checkbox.html │ │ └── option-radio.html │ ├── socials │ │ └── share.html │ └── tabs │ │ └── tabs-one.html │ ├── reviews │ ├── review-stars-medium.html │ ├── review-stars-small.html │ ├── reviews-company.html │ └── reviews-customers.html │ ├── search │ └── search-overlay.html │ ├── svg │ ├── blobs │ │ ├── svg-blob-four.html │ │ ├── svg-blob-one.html │ │ ├── svg-blob-three.html │ │ └── svg-blob-two.html │ ├── svg-clip-path-one.svg │ ├── svg-divider-bottom-lr.svg │ ├── svg-divider-bottom-rl.svg │ ├── svg-divider-side-left-bt.svg │ ├── svg-divider-side-left-tb.svg │ ├── svg-divider-side-right-bt.svg │ ├── svg-divider-side-right-tb.svg │ ├── svg-divider-top-lr.svg │ └── svg-divider-top-rl.svg │ └── swiper │ ├── swiper-hero-slideshow.html │ ├── swiper-linked-carousel-large.html │ ├── swiper-linked-carousel-small.html │ ├── swiper-product-carousel-one.html │ ├── swiper-product-carousel-scrollbar.html │ └── swiper-related-one.html └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env"], 3 | "plugins": ["@babel/plugin-syntax-dynamic-import"] 4 | } -------------------------------------------------------------------------------- /.browserslistrc: -------------------------------------------------------------------------------- 1 | last 3 years 2 | > 1% 3 | not dead -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Dependency directories 2 | node_modules/ 3 | 4 | # Optional npm cache directory 5 | .npm 6 | 7 | # Optional eslint cache 8 | .eslintcache 9 | 10 | # Output of 'npm pack' 11 | *.tgz 12 | 13 | # Yarn Integrity file 14 | .yarn-integrity 15 | 16 | # Compiled source # 17 | ################### 18 | *.com 19 | *.class 20 | *.dll 21 | *.exe 22 | *.o 23 | *.so 24 | 25 | # Packages # 26 | ############ 27 | # it's better to unpack these files and commit the raw source 28 | # git has its own built in compression methods 29 | *.7z 30 | *.dmg 31 | *.gz 32 | *.iso 33 | *.jar 34 | *.rar 35 | *.tar 36 | *.zip 37 | 38 | # Logs and databases # 39 | ###################### 40 | *.log 41 | *.sql 42 | *.sqlite 43 | 44 | # OS generated files # 45 | ###################### 46 | .DS_Store 47 | .DS_Store? 48 | ._* 49 | .Spotlight-V100 50 | .Trashes 51 | ehthumbs.db 52 | Thumbs.db 53 | 54 | # Logs 55 | logs 56 | *.log 57 | npm-debug.log* 58 | yarn-debug.log* 59 | yarn-error.log* 60 | lerna-debug.log* -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 PixelRocket 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /dist/assets/favicon/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/dist/assets/favicon/android-chrome-192x192.png -------------------------------------------------------------------------------- /dist/assets/favicon/android-chrome-256x256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/dist/assets/favicon/android-chrome-256x256.png -------------------------------------------------------------------------------- /dist/assets/favicon/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/dist/assets/favicon/apple-touch-icon.png -------------------------------------------------------------------------------- /dist/assets/favicon/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #da532c 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /dist/assets/favicon/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/dist/assets/favicon/favicon-16x16.png -------------------------------------------------------------------------------- /dist/assets/favicon/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/dist/assets/favicon/favicon-32x32.png -------------------------------------------------------------------------------- /dist/assets/favicon/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/dist/assets/favicon/favicon.ico -------------------------------------------------------------------------------- /dist/assets/favicon/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/dist/assets/favicon/mstile-150x150.png -------------------------------------------------------------------------------- /dist/assets/fonts/remixicon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/dist/assets/fonts/remixicon.woff -------------------------------------------------------------------------------- /dist/assets/images/banners/banner-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/dist/assets/images/banners/banner-1.jpg -------------------------------------------------------------------------------- /dist/assets/images/banners/banner-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/dist/assets/images/banners/banner-2.jpg -------------------------------------------------------------------------------- /dist/assets/images/banners/banner-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/dist/assets/images/banners/banner-3.jpg -------------------------------------------------------------------------------- /dist/assets/images/banners/banner-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/dist/assets/images/banners/banner-4.jpg -------------------------------------------------------------------------------- /dist/assets/images/instagram/instagram-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/dist/assets/images/instagram/instagram-1.jpg -------------------------------------------------------------------------------- /dist/assets/images/instagram/instagram-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/dist/assets/images/instagram/instagram-2.jpg -------------------------------------------------------------------------------- /dist/assets/images/instagram/instagram-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/dist/assets/images/instagram/instagram-3.jpg -------------------------------------------------------------------------------- /dist/assets/images/instagram/instagram-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/dist/assets/images/instagram/instagram-4.jpg -------------------------------------------------------------------------------- /dist/assets/images/instagram/instagram-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/dist/assets/images/instagram/instagram-5.jpg -------------------------------------------------------------------------------- /dist/assets/images/instagram/instagram-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/dist/assets/images/instagram/instagram-6.jpg -------------------------------------------------------------------------------- /dist/assets/images/instagram/instagram-7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/dist/assets/images/instagram/instagram-7.jpg -------------------------------------------------------------------------------- /dist/assets/images/instagram/instagram-8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/dist/assets/images/instagram/instagram-8.jpg -------------------------------------------------------------------------------- /dist/assets/images/instagram/instagram-9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/dist/assets/images/instagram/instagram-9.jpg -------------------------------------------------------------------------------- /dist/assets/images/products/product-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/dist/assets/images/products/product-1.jpg -------------------------------------------------------------------------------- /dist/assets/images/products/product-10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/dist/assets/images/products/product-10.jpg -------------------------------------------------------------------------------- /dist/assets/images/products/product-11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/dist/assets/images/products/product-11.jpg -------------------------------------------------------------------------------- /dist/assets/images/products/product-12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/dist/assets/images/products/product-12.jpg -------------------------------------------------------------------------------- /dist/assets/images/products/product-13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/dist/assets/images/products/product-13.jpg -------------------------------------------------------------------------------- /dist/assets/images/products/product-14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/dist/assets/images/products/product-14.jpg -------------------------------------------------------------------------------- /dist/assets/images/products/product-15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/dist/assets/images/products/product-15.jpg -------------------------------------------------------------------------------- /dist/assets/images/products/product-16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/dist/assets/images/products/product-16.jpg -------------------------------------------------------------------------------- /dist/assets/images/products/product-1b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/dist/assets/images/products/product-1b.jpg -------------------------------------------------------------------------------- /dist/assets/images/products/product-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/dist/assets/images/products/product-2.jpg -------------------------------------------------------------------------------- /dist/assets/images/products/product-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/dist/assets/images/products/product-3.jpg -------------------------------------------------------------------------------- /dist/assets/images/products/product-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/dist/assets/images/products/product-4.jpg -------------------------------------------------------------------------------- /dist/assets/images/products/product-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/dist/assets/images/products/product-5.jpg -------------------------------------------------------------------------------- /dist/assets/images/products/product-5b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/dist/assets/images/products/product-5b.jpg -------------------------------------------------------------------------------- /dist/assets/images/products/product-5c.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/dist/assets/images/products/product-5c.jpg -------------------------------------------------------------------------------- /dist/assets/images/products/product-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/dist/assets/images/products/product-6.jpg -------------------------------------------------------------------------------- /dist/assets/images/products/product-7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/dist/assets/images/products/product-7.jpg -------------------------------------------------------------------------------- /dist/assets/images/products/product-8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/dist/assets/images/products/product-8.jpg -------------------------------------------------------------------------------- /dist/assets/images/slideshows/slideshow-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/dist/assets/images/slideshows/slideshow-1.jpg -------------------------------------------------------------------------------- /dist/assets/images/slideshows/slideshow-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/dist/assets/images/slideshows/slideshow-2.jpg -------------------------------------------------------------------------------- /dist/assets/images/slideshows/slideshow-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/dist/assets/images/slideshows/slideshow-3.jpg -------------------------------------------------------------------------------- /dist/assets/images/slideshows/slideshow-7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/dist/assets/images/slideshows/slideshow-7.jpg -------------------------------------------------------------------------------- /dist/assets/svgs/apple-pay.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /dist/assets/svgs/bitcoin.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /dist/assets/svgs/ideal.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /dist/assets/svgs/ripple.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /dist/assets/svgs/visa.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /dist/assets/svgs/vpay.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "alpine", 3 | "version": "1.0.0", 4 | "description": "Bootstrap 5 HTML Template created by Pixel Rocket", 5 | "scripts": { 6 | "start": "webpack-dev-server --open", 7 | "build": "del-cli dist && webpack -p", 8 | "build-docs": "del-cli docs && webpack --config ./webpack.config.docs.js -p" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "devDependencies": { 14 | "@babel/core": "^7.12.10", 15 | "@babel/plugin-syntax-dynamic-import": "^7.8.3", 16 | "@babel/preset-env": "^7.12.11", 17 | "autoprefixer": "^9.0.0", 18 | "babel-loader": "^8.2.2", 19 | "babel-minify-webpack-plugin": "^0.3.1", 20 | "copy-webpack-plugin": "^6.0.3", 21 | "css-loader": "^5.0.1", 22 | "css-minimizer-webpack-plugin": "^1.2.0", 23 | "cssnano": "^4.1.10", 24 | "del-cli": "^3.0.1", 25 | "file-loader": "^6.2.0", 26 | "glob-all": "^3.2.1", 27 | "handlebars-webpack-plugin": "^2.2.1", 28 | "mini-css-extract-plugin": "^0.8.0", 29 | "optimize-css-assets-webpack-plugin": "^5.0.3", 30 | "postcss-loader": "^4.1.0", 31 | "sass": "^1.32.4", 32 | "sass-loader": "^10.1.1", 33 | "style-loader": "^2.0.0", 34 | "webpack": "^4.44.2", 35 | "webpack-cli": "^3.3.12", 36 | "webpack-dev-server": "^3.11.0", 37 | "webpack-fix-style-only-entries": "^0.5.1", 38 | "webpack-merge": "^4.2.2" 39 | }, 40 | "dependencies": { 41 | "@popperjs/core": "^2.5.4", 42 | "aos": "^2.3.4", 43 | "bootstrap": "^5.0.0-beta3", 44 | "choices.js": "^9.0.1", 45 | "medium-zoom": "^1.0.6", 46 | "nouislider": "^14.6.3", 47 | "simplebar": "^5.3.0", 48 | "swiper": "^6.2.0", 49 | "tippy.js": "^6.3.1" 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {}, 4 | cssnano: {} 5 | } 6 | }; -------------------------------------------------------------------------------- /src/assets/favicon/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/src/assets/favicon/android-chrome-192x192.png -------------------------------------------------------------------------------- /src/assets/favicon/android-chrome-256x256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/src/assets/favicon/android-chrome-256x256.png -------------------------------------------------------------------------------- /src/assets/favicon/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/src/assets/favicon/apple-touch-icon.png -------------------------------------------------------------------------------- /src/assets/favicon/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #da532c 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/assets/favicon/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/src/assets/favicon/favicon-16x16.png -------------------------------------------------------------------------------- /src/assets/favicon/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/src/assets/favicon/favicon-32x32.png -------------------------------------------------------------------------------- /src/assets/favicon/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/src/assets/favicon/favicon.ico -------------------------------------------------------------------------------- /src/assets/favicon/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/src/assets/favicon/mstile-150x150.png -------------------------------------------------------------------------------- /src/assets/fonts/remixicon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/src/assets/fonts/remixicon.woff -------------------------------------------------------------------------------- /src/assets/images/banners/banner-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/src/assets/images/banners/banner-1.jpg -------------------------------------------------------------------------------- /src/assets/images/banners/banner-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/src/assets/images/banners/banner-2.jpg -------------------------------------------------------------------------------- /src/assets/images/banners/banner-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/src/assets/images/banners/banner-3.jpg -------------------------------------------------------------------------------- /src/assets/images/banners/banner-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/src/assets/images/banners/banner-4.jpg -------------------------------------------------------------------------------- /src/assets/images/instagram/instagram-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/src/assets/images/instagram/instagram-1.jpg -------------------------------------------------------------------------------- /src/assets/images/instagram/instagram-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/src/assets/images/instagram/instagram-2.jpg -------------------------------------------------------------------------------- /src/assets/images/instagram/instagram-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/src/assets/images/instagram/instagram-3.jpg -------------------------------------------------------------------------------- /src/assets/images/instagram/instagram-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/src/assets/images/instagram/instagram-4.jpg -------------------------------------------------------------------------------- /src/assets/images/instagram/instagram-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/src/assets/images/instagram/instagram-5.jpg -------------------------------------------------------------------------------- /src/assets/images/instagram/instagram-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/src/assets/images/instagram/instagram-6.jpg -------------------------------------------------------------------------------- /src/assets/images/instagram/instagram-7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/src/assets/images/instagram/instagram-7.jpg -------------------------------------------------------------------------------- /src/assets/images/instagram/instagram-8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/src/assets/images/instagram/instagram-8.jpg -------------------------------------------------------------------------------- /src/assets/images/instagram/instagram-9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/src/assets/images/instagram/instagram-9.jpg -------------------------------------------------------------------------------- /src/assets/images/products/product-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/src/assets/images/products/product-1.jpg -------------------------------------------------------------------------------- /src/assets/images/products/product-10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/src/assets/images/products/product-10.jpg -------------------------------------------------------------------------------- /src/assets/images/products/product-11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/src/assets/images/products/product-11.jpg -------------------------------------------------------------------------------- /src/assets/images/products/product-12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/src/assets/images/products/product-12.jpg -------------------------------------------------------------------------------- /src/assets/images/products/product-13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/src/assets/images/products/product-13.jpg -------------------------------------------------------------------------------- /src/assets/images/products/product-14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/src/assets/images/products/product-14.jpg -------------------------------------------------------------------------------- /src/assets/images/products/product-15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/src/assets/images/products/product-15.jpg -------------------------------------------------------------------------------- /src/assets/images/products/product-16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/src/assets/images/products/product-16.jpg -------------------------------------------------------------------------------- /src/assets/images/products/product-1b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/src/assets/images/products/product-1b.jpg -------------------------------------------------------------------------------- /src/assets/images/products/product-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/src/assets/images/products/product-2.jpg -------------------------------------------------------------------------------- /src/assets/images/products/product-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/src/assets/images/products/product-3.jpg -------------------------------------------------------------------------------- /src/assets/images/products/product-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/src/assets/images/products/product-4.jpg -------------------------------------------------------------------------------- /src/assets/images/products/product-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/src/assets/images/products/product-5.jpg -------------------------------------------------------------------------------- /src/assets/images/products/product-5b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/src/assets/images/products/product-5b.jpg -------------------------------------------------------------------------------- /src/assets/images/products/product-5c.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/src/assets/images/products/product-5c.jpg -------------------------------------------------------------------------------- /src/assets/images/products/product-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/src/assets/images/products/product-6.jpg -------------------------------------------------------------------------------- /src/assets/images/products/product-7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/src/assets/images/products/product-7.jpg -------------------------------------------------------------------------------- /src/assets/images/products/product-8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/src/assets/images/products/product-8.jpg -------------------------------------------------------------------------------- /src/assets/images/slideshows/slideshow-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/src/assets/images/slideshows/slideshow-1.jpg -------------------------------------------------------------------------------- /src/assets/images/slideshows/slideshow-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/src/assets/images/slideshows/slideshow-2.jpg -------------------------------------------------------------------------------- /src/assets/images/slideshows/slideshow-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/src/assets/images/slideshows/slideshow-3.jpg -------------------------------------------------------------------------------- /src/assets/images/slideshows/slideshow-7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PixelRocket-Shop/alpine-html-bootstrap/86e0d8d821efa356534b783d7ebc300014536dd8/src/assets/images/slideshows/slideshow-7.jpg -------------------------------------------------------------------------------- /src/assets/js/classes/hotspot.js: -------------------------------------------------------------------------------- 1 | import tippy from 'tippy.js'; 2 | 3 | export class Hotspot { 4 | constructor(hotspot) { 5 | this.hotspot = hotspot; 6 | this.options = this.hotspot.dataset && this.hotspot.dataset.options ? JSON.parse(this.hotspot.dataset.options) : false; 7 | this.type = this.options && this.options.type ? this.options.type : 'tippy'; 8 | this.trigger = this.options && this.options.trigger ? this.options.trigger : 'click'; 9 | this.hotspotContent = null; 10 | 11 | this.init(); 12 | } 13 | 14 | init() { 15 | if (this.options.placement) { 16 | this.positionHotspot(); 17 | } 18 | if (this.options.alwaysVisible) { 19 | this.hotspot.classList.add('always-show'); 20 | } 21 | if (this.options.alwaysAnimate) { 22 | this.hotspot.classList.add('always-animate'); 23 | } 24 | 25 | this.setHotspotContent(); 26 | 27 | tippy(this.hotspot, { 28 | allowHTML: true, 29 | trigger: this.trigger, 30 | content: this.hotspotContent, 31 | theme: 'light', 32 | animation: 'shift-away', 33 | interactive: true, 34 | hideOnClick: true, 35 | appendTo: document.body, 36 | }) 37 | } 38 | 39 | setHotspotContent() { 40 | if (this.options.contentTarget) { 41 | let content = document.querySelector(`${this.options.contentTarget}`); 42 | if (content) { 43 | this.hotspotContent = content.innerHTML; 44 | } else { 45 | this.hotspotContent = 'Missing content' 46 | } 47 | return; 48 | } 49 | if (this.options.content) { 50 | this.hotspotContent = this.options.content; 51 | return; 52 | } 53 | this.hotspotContent = 'Missing content' 54 | } 55 | 56 | 57 | positionHotspot() { 58 | Object.keys(this.options.placement).forEach((key) => { 59 | this.hotspot.style[key] = `${this.options.placement[key]}`; 60 | }) 61 | } 62 | } -------------------------------------------------------------------------------- /src/assets/js/classes/navbar.js: -------------------------------------------------------------------------------- 1 | export class Navbar { 2 | constructor(menuToggle) { 3 | this.menuToggle = menuToggle; 4 | this.menuParent = this.menuToggle ? this.menuToggle.closest('.dropdown') : false; 5 | this.dropdownMenu = this.menuParent ? this.menuParent.querySelector('.dropdown-menu') : false; 6 | this.showEvents = ['mouseenter']; 7 | this.hideEvents = ['mouseleave', 'click']; 8 | this.cssVarBreakPoint = getComputedStyle(document.documentElement).getPropertyValue('--theme-breakpoint-lg') || '992px'; 9 | this.breakpointLG = parseInt(this.cssVarBreakPoint, 10); 10 | 11 | this.initMenu(); 12 | } 13 | 14 | initMenu() { 15 | const _this = this; 16 | 17 | if (this.menuParent) { 18 | this.showEvents.forEach((event) => { 19 | this.menuParent.addEventListener(event, function () { 20 | _this.showMenu(); 21 | }) 22 | }); 23 | this.hideEvents.forEach((event) => { 24 | this.menuParent.addEventListener(event, function () { 25 | _this.hideMenu(); 26 | }) 27 | }); 28 | } 29 | } 30 | 31 | showMenu() { 32 | 33 | if (window.innerWidth < this.breakpointLG) { 34 | return; 35 | } 36 | 37 | if (this.dropdownMenu) { 38 | this.dropdownMenu.classList.add('show'); 39 | } 40 | if (this.menuToggle) { 41 | this.menuToggle.classList.add('show'); 42 | this.menuToggle.setAttribute('aria-expanded', 'true'); 43 | } 44 | } 45 | 46 | hideMenu() { 47 | 48 | if (window.innerWidth < this.breakpointLG) { 49 | return; 50 | } 51 | 52 | if (this.dropdownMenu) { 53 | this.dropdownMenu.classList.remove('show'); 54 | } 55 | if (this.menuToggle) { 56 | this.menuToggle.classList.remove('show'); 57 | this.menuToggle.setAttribute('aria-expanded', 'false'); 58 | } 59 | } 60 | } -------------------------------------------------------------------------------- /src/assets/js/components/aos.js: -------------------------------------------------------------------------------- 1 | import AOS from 'aos'; 2 | 3 | (function () { 4 | document.addEventListener('DOMContentLoaded', () => { 5 | const options = { 6 | duration: 700, 7 | easing: 'ease-out-quad', 8 | once: true, 9 | startEvent: 'load', 10 | disable: 'mobile' 11 | }; 12 | 13 | AOS.init(options); 14 | }); 15 | })(); -------------------------------------------------------------------------------- /src/assets/js/components/checkout.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | const billingToggle = document.querySelector('#same-address'); 3 | const billingSection = document.querySelector('.billing-address'); 4 | const paymentToggles = document.querySelectorAll('[name="checkoutPaymentMethod"]') || []; 5 | const cardFields = document.querySelector('.card-details'); 6 | const paypalInfo = document.querySelector('.paypal-details'); 7 | const STRIPE_ID = 'checkoutPaymentStripe'; 8 | 9 | 10 | const handlePaymentDisplay = ({ 11 | type 12 | }) => { 13 | if (type === STRIPE_ID) { 14 | paypalInfo.classList.add('d-none'); 15 | cardFields.classList.remove('d-none'); 16 | } else { 17 | paypalInfo.classList.remove('d-none'); 18 | cardFields.classList.add('d-none'); 19 | } 20 | } 21 | 22 | if (billingToggle && billingSection) { 23 | billingToggle.addEventListener('change', (e) => { 24 | if (e && e.target && !e.target.checked) { 25 | billingSection.classList.remove('d-none'); 26 | } else { 27 | billingSection.classList.add('d-none'); 28 | } 29 | }) 30 | } 31 | 32 | if (paymentToggles.length > 0) { 33 | paymentToggles.forEach((toggle) => { 34 | toggle.addEventListener('change', (e) => { 35 | if (e && e.target && e.target.id) { 36 | handlePaymentDisplay({ 37 | type: e.target.id 38 | }); 39 | } 40 | }) 41 | }); 42 | } 43 | })(); -------------------------------------------------------------------------------- /src/assets/js/components/choices.js: -------------------------------------------------------------------------------- 1 | import Choices from 'choices.js'; 2 | 3 | 4 | (function () { 5 | const selects = document.querySelectorAll('[data-choices]') || []; 6 | 7 | selects.forEach((select) => { 8 | const elementOptions = select.dataset.choices ? JSON.parse(select.dataset.choices) : {}; 9 | 10 | const defaultOptions = { 11 | shouldSort: false, 12 | searchEnabled: false, 13 | classNames: { 14 | containerOuter: 'position-relative w-100', 15 | listSingle: 'form-control w-100', 16 | inputCloned: 'form-control-xs', 17 | listDropdown: 'dropdown-menu', 18 | itemChoice: 'dropdown-item', 19 | activeState: 'show', 20 | selectedState: 'active' 21 | } 22 | }; 23 | 24 | const options = { 25 | ...elementOptions, 26 | ...defaultOptions, 27 | }; 28 | 29 | new Choices(select, options); 30 | }); 31 | })(); -------------------------------------------------------------------------------- /src/assets/js/components/hotspots.js: -------------------------------------------------------------------------------- 1 | import { 2 | Hotspot 3 | } from '../classes/hotspot'; 4 | 5 | document.addEventListener('DOMContentLoaded', function () { 6 | const hotspots = document.querySelectorAll('.hotspot') || []; 7 | 8 | hotspots.forEach((hotspot) => { 9 | new Hotspot(hotspot); 10 | }); 11 | }); -------------------------------------------------------------------------------- /src/assets/js/components/image-zoom.js: -------------------------------------------------------------------------------- 1 | import mediumZoom from 'medium-zoom'; 2 | 3 | (function () { 4 | document.addEventListener('DOMContentLoaded', () => { 5 | const zoomImgs = document.querySelectorAll('[data-zoomable]') || []; 6 | 7 | zoomImgs.forEach((img) => { 8 | const zoom = new mediumZoom(img, { 9 | margin: 30 10 | }); 11 | }); 12 | 13 | }); 14 | })(); -------------------------------------------------------------------------------- /src/assets/js/components/navbar.js: -------------------------------------------------------------------------------- 1 | import { 2 | Navbar 3 | } from '../classes/navbar'; 4 | 5 | (function () { 6 | document.addEventListener('DOMContentLoaded', () => { 7 | const dropdownMenus = document.querySelectorAll('.navbar-nav .dropdown, .navbar-nav .dropend') || []; 8 | const navbarTogglers = document.querySelectorAll('.navbar-toggler') || []; 9 | const NAVBAR_ACTIVE_CLASS = 'navbar-active'; 10 | // if toggle button has this CSS class, we do not add body class to hide overflow. 11 | const NAVBAR_BTN_DISABLE_ADD_BODY_CLASS = 'btn-collapse-expand'; 12 | 13 | // Add css class to body when mobile is active 14 | // use that css class to hide overflow and add padding 15 | const handleActiveMobile = () => { 16 | if (document.body.classList.contains(NAVBAR_ACTIVE_CLASS)) { 17 | document.body.classList.remove(NAVBAR_ACTIVE_CLASS); 18 | } else { 19 | document.body.classList.add(NAVBAR_ACTIVE_CLASS); 20 | } 21 | } 22 | 23 | if (dropdownMenus.length > 0) { 24 | dropdownMenus.forEach((menuToggle) => { 25 | new Navbar(menuToggle); 26 | }) 27 | } 28 | 29 | // handle overflow hidden on body for navbar display on smaller devices 30 | navbarTogglers.forEach((toggler) => { 31 | toggler.addEventListener('click', (event) => { 32 | 33 | //if our toggle has a CSS class defined above, return and don't add body class 34 | if (event.target && event.target.classList.contains(NAVBAR_BTN_DISABLE_ADD_BODY_CLASS)) { 35 | return; 36 | } 37 | 38 | handleActiveMobile(); 39 | }); 40 | }); 41 | }); 42 | })(); -------------------------------------------------------------------------------- /src/assets/js/components/nouislider.js: -------------------------------------------------------------------------------- 1 | import noUiSlider from 'nouislider'; 2 | 3 | (function () { 4 | document.addEventListener('DOMContentLoaded', () => { 5 | var priceSliders = document.querySelectorAll('.filter-price') || []; 6 | 7 | const createPriceSlider = (priceSlider) => { 8 | const parentElem = priceSlider.closest('.widget-filter-price'); 9 | 10 | noUiSlider.create(priceSlider, { 11 | start: [60, 900], 12 | connect: true, 13 | tooltips: [true, true], 14 | range: { 15 | 'min': 0, 16 | 'max': 1000 17 | }, 18 | pips: { 19 | mode: 'values', 20 | values: [0, 250, 500, 750, 1000], 21 | density: 100 22 | } 23 | }); 24 | 25 | var filterMinInput = parentElem ? parentElem.querySelector('.filter-min') : false; 26 | var filterMaxInput = parentElem ? parentElem.querySelector('.filter-max') : false; 27 | const inputs = [filterMinInput, filterMaxInput] 28 | 29 | priceSlider.noUiSlider.on('update', function (values, handle) { 30 | inputs[handle].value = values[handle]; 31 | }); 32 | 33 | filterMinInput.addEventListener('change', function () { 34 | priceSlider.noUiSlider.set([this.value, null]); 35 | }); 36 | 37 | filterMaxInput.addEventListener('change', function () { 38 | priceSlider.noUiSlider.set([null, this.value]); 39 | }); 40 | } 41 | 42 | priceSliders.forEach((priceSlider) => { 43 | createPriceSlider(priceSlider); 44 | }); 45 | 46 | }); 47 | })(); -------------------------------------------------------------------------------- /src/assets/js/components/offcanvas.js: -------------------------------------------------------------------------------- 1 | // Remove CSS class d-none after page load. 2 | // It's a quick fix to ensure offcanvas isn't visible sometimes on page load. 3 | (function () { 4 | document.addEventListener('DOMContentLoaded', () => { 5 | const offCanvasElems = document.querySelectorAll('.offcanvas') || []; 6 | 7 | offCanvasElems.forEach((offcanvas) => { 8 | offcanvas.classList.remove('d-none'); 9 | }); 10 | 11 | }); 12 | })(); -------------------------------------------------------------------------------- /src/assets/js/components/popover.js: -------------------------------------------------------------------------------- 1 | import { 2 | Popover 3 | } from 'bootstrap'; 4 | 5 | (function () { 6 | document.addEventListener('DOMContentLoaded', () => { 7 | var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]')) 8 | var popoverList = popoverTriggerList.map(function (popoverTriggerEl) { 9 | let defaultOptions = { 10 | container: 'body', 11 | trigger: 'focus' 12 | }; 13 | let customOptions = popoverTriggerEl.dataset.bsOptions ? JSON.parse(popoverTriggerEl.dataset.bsOptions) : {}; 14 | const options = { 15 | ...defaultOptions, 16 | ...customOptions 17 | }; 18 | return new Popover(popoverTriggerEl, options) 19 | }); 20 | }); 21 | })(); -------------------------------------------------------------------------------- /src/assets/js/components/product.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | document.addEventListener('DOMContentLoaded', () => { 3 | const productOptions = document.querySelectorAll('.product-option select, .product-option input') || []; 4 | const PARENT_CSS_CLASS = 'product-option'; 5 | const SELECTED_OPTION_CLASS = 'selected-option'; 6 | 7 | const handleOptionChange = ({ 8 | event, 9 | option 10 | }) => { 11 | const optionParent = event.target ? event.target.closest(`.${PARENT_CSS_CLASS}`) : false; 12 | const selectedOptionLabel = optionParent ? optionParent.querySelector(`.${SELECTED_OPTION_CLASS}`) : false; 13 | const selectedOption = event.target && event.target.value ? event.target.value : false; 14 | 15 | if (optionParent && selectedOptionLabel && selectedOption) { 16 | selectedOptionLabel.innerText = selectedOption; 17 | } 18 | } 19 | 20 | productOptions.forEach((option) => { 21 | option.addEventListener('change', (event) => { 22 | handleOptionChange({ 23 | event, 24 | option 25 | }); 26 | }); 27 | }); 28 | 29 | }); 30 | })(); -------------------------------------------------------------------------------- /src/assets/js/components/scroll-to.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | document.addEventListener('DOMContentLoaded', () => { 3 | const scrollToElems = document.querySelectorAll('[data-pixr-scrollto]') || []; 4 | 5 | scrollToElems.forEach(item => item.addEventListener('click', function (e) { 6 | const target = e && e.target && e.target.dataset && e.target.dataset.target ? e.target.dataset.target : false; 7 | if (target) { 8 | const destination = document.querySelector(target); 9 | if (destination) { 10 | destination.scrollIntoView({ 11 | behavior: 'smooth', 12 | block: 'start' 13 | }); 14 | } 15 | } 16 | })); 17 | 18 | }); 19 | })(); -------------------------------------------------------------------------------- /src/assets/js/components/search.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | document.addEventListener('DOMContentLoaded', () => { 3 | const searchBtns = document.querySelectorAll('[data-pr-search') || []; 4 | const closeSearchBtns = document.querySelectorAll('.btn-close-search') || []; 5 | const searchOverlay = document.querySelector('.search-overlay'); 6 | const ACTIVE_SEARCH_CLASS = 'search-active'; 7 | 8 | const showOrHideSearchOverlay = ({ 9 | show = false 10 | }) => { 11 | if (show && searchOverlay) { 12 | document.body.classList.add(ACTIVE_SEARCH_CLASS); 13 | } else { 14 | document.body.classList.remove(ACTIVE_SEARCH_CLASS); 15 | } 16 | } 17 | 18 | searchBtns.forEach((button) => { 19 | button.addEventListener('click', () => { 20 | showOrHideSearchOverlay({ 21 | show: true 22 | }); 23 | }) 24 | }); 25 | 26 | closeSearchBtns.forEach((button) => { 27 | button.addEventListener('click', () => { 28 | showOrHideSearchOverlay({}); 29 | }) 30 | }); 31 | 32 | // handle filter navigation on category page 33 | const filterSearchBars = document.querySelectorAll('.filter-search') || []; 34 | 35 | const handleCategoryFilterSearch = (event, search) => { 36 | const filterWidget = event.target.closest('.widget-filter'); 37 | const filterOptions = filterWidget ? filterWidget.querySelectorAll('.filter-options .form-group') : []; 38 | if (search.value && filterOptions && filterWidget) { 39 | filterOptions.forEach((option) => { 40 | if (!option.innerText.trim().toLowerCase().includes(search.value.toLowerCase().trim())) { 41 | option.classList.add('d-none'); 42 | } else { 43 | option.classList.remove('d-none'); 44 | } 45 | }) 46 | return; 47 | } 48 | filterOptions.forEach((option) => { 49 | option.classList.remove('d-none'); 50 | }) 51 | } 52 | 53 | filterSearchBars.forEach((search) => { 54 | search.addEventListener('keyup', (event) => { 55 | handleCategoryFilterSearch(event, search); 56 | }); 57 | }); 58 | 59 | }); 60 | })(); -------------------------------------------------------------------------------- /src/assets/js/components/simplebar.js: -------------------------------------------------------------------------------- 1 | import SimpleBar from 'simplebar'; 2 | 3 | (function () { 4 | document.addEventListener('DOMContentLoaded', () => { 5 | const simpleBars = document.querySelectorAll('[data-pixr-simplebar]') || []; 6 | 7 | simpleBars.forEach((simplebar) => { 8 | new SimpleBar(simplebar, { 9 | autoHide: false 10 | }) 11 | }); 12 | 13 | }); 14 | })(); -------------------------------------------------------------------------------- /src/assets/js/components/tooltip.js: -------------------------------------------------------------------------------- 1 | import { 2 | Tooltip 3 | } from 'bootstrap'; 4 | 5 | (function () { 6 | document.addEventListener('DOMContentLoaded', () => { 7 | var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')); 8 | var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { 9 | let defaultOptions = { 10 | boundary: 'window', 11 | fallbackPlacements: ['top'] 12 | }; 13 | let customOptions = tooltipTriggerEl.dataset.bsOptions ? JSON.parse(tooltipTriggerEl.dataset.bsOptions) : {}; 14 | const options = { 15 | ...defaultOptions, 16 | ...customOptions 17 | }; 18 | return new Tooltip(tooltipTriggerEl, options); 19 | }); 20 | }); 21 | })(); -------------------------------------------------------------------------------- /src/assets/js/misc.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | 4 | // Add a body class once page has loaded 5 | // Used to add CSS transitions to elems 6 | // and avoids content shifting during page load 7 | window.addEventListener('load', function() { 8 | document.body.classList.add('page-loaded'); 9 | }); 10 | 11 | })(); -------------------------------------------------------------------------------- /src/assets/js/theme.js: -------------------------------------------------------------------------------- 1 | // Vendor Imports 2 | import 'bootstrap'; 3 | 4 | // Framework import. 5 | import './components/aos'; 6 | import './components/choices'; 7 | import './components/checkout'; 8 | import './components/hotspots'; 9 | import './components/image-zoom'; 10 | import './components/navbar'; 11 | import './components/nouislider'; 12 | import './components/offcanvas'; 13 | import './components/popover'; 14 | import './components/product'; 15 | import './components/scroll-to'; 16 | import './components/search'; 17 | import './components/simplebar'; 18 | import './components/swiper'; 19 | import './components/tooltip'; 20 | 21 | // theme misc js 22 | import './misc'; -------------------------------------------------------------------------------- /src/assets/scss/abstracts/_css-vars.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | /* Bootstrap vars */ 3 | --bs-font-sans-serif: 'Barlow', sans-serif; 4 | --bs-spacer: #{$spacer}; 5 | --bs-gutter-width: #{$grid-gutter-width}; 6 | 7 | /* Theme vars */ 8 | --theme-font-headings: 'Barlow', sans-serif; 9 | 10 | /* Icon font family */ 11 | --theme-font-icon: 'remixicon'; 12 | --theme-font-icon-style: 'normal'; 13 | 14 | /* Custom checkbox styles */ 15 | --theme-form-checkbox-before-size: 20px; 16 | --theme-form-checkbox-bg-before-size: 28px; 17 | --theme-form-checkbox-after-width: 6px; 18 | --theme-form-checkbox-after-height: 12px; 19 | --theme-form-checkbox-border-radius: 2px; 20 | --theme-form-checkbox-after-position-left: 7px; 21 | --theme-form-checkbox-after-position-top: 4px; 22 | --theme-form-checkbox-bg-after-position-left: 11px; 23 | --theme-form-checkbox-bg-after-position-top: 7px; 24 | --theme-form-checkbox-after-border-width: 2px; 25 | --theme-form-checkbox-active-color: #{$dark}; 26 | --theme-form-radio-button-after-size: 10px; 27 | --theme-form-radio-button-after-position-left: 5px; 28 | --theme-form-radio-button-after-position-top: 6px; 29 | 30 | --theme-form-radio-button-border-radius: 100%; 31 | 32 | /* theme breakpoints using Bootstrap sass map */ 33 | @each $breakpoint, $value in $grid-breakpoints { 34 | --theme-breakpoint-#{$breakpoint}: #{$value}; 35 | } 36 | 37 | /* theme max widths using sass map */ 38 | @each $breakpoint, $value in $container-max-widths { 39 | --theme-maxwidth-breakpoint-#{$breakpoint}: #{$value}; 40 | } 41 | 42 | /* Listing Page */ 43 | --theme-listing-page-sidebar-hide-filter-margin: -16.66667%; 44 | 45 | /* Listing page psuedo hover element height. This is amended with JS */ 46 | --theme-listing-page-card-pseudo-hover-height: 100%; 47 | 48 | /* Swiper overrides */ 49 | --swiper-pagination-color: #{$gray-900}; 50 | --swiper-timeline-fixed-height: 700px; 51 | 52 | /* Swiper spacing, used in card-expand */ 53 | --swiper-slide-spacing: 25px; 54 | 55 | /* Custom translate styles */ 56 | --theme-translate-X: 0; 57 | --theme-translate-Y: 0; 58 | } -------------------------------------------------------------------------------- /src/assets/scss/abstracts/_mixins.scss: -------------------------------------------------------------------------------- 1 | /* Alert */ 2 | @import 'mixins/alert'; 3 | /* Backgrounds */ 4 | @import 'mixins/backgrounds'; 5 | /* Buttons */ 6 | @import 'mixins/buttons'; 7 | /* Shadows */ 8 | @import 'mixins/shadows'; -------------------------------------------------------------------------------- /src/assets/scss/abstracts/mixins/_alert.scss: -------------------------------------------------------------------------------- 1 | /* Mixin faded alert */ 2 | @mixin alert-variant-faded($bg, $color) { 3 | background-color: $bg; 4 | color: $color; 5 | } -------------------------------------------------------------------------------- /src/assets/scss/abstracts/mixins/_backgrounds.scss: -------------------------------------------------------------------------------- 1 | /* Mixin background faded */ 2 | @mixin bg-variant-faded($bg) { 3 | background-color: $bg !important; 4 | } -------------------------------------------------------------------------------- /src/assets/scss/abstracts/mixins/_buttons.scss: -------------------------------------------------------------------------------- 1 | /* Mixin button faded */ 2 | @mixin btn-variant-faded($bg, $color) { 3 | background-color: $bg; 4 | color: $color; 5 | 6 | &:hover, &:focus { 7 | background-color: fade-in($bg, .05); 8 | color: $color; 9 | } 10 | 11 | &.active { 12 | background-color: fade-in($bg, .05); 13 | color: $color; 14 | } 15 | } 16 | 17 | 18 | 19 | /* Mixin Buttons Chunky */ 20 | @mixin btn-chunky($color) { 21 | box-shadow: $btn-chunky-box-shadow darken($color, 12.5%); 22 | padding-bottom: calc(#{$btn-padding-y} - .25rem); 23 | border-color: transparent; 24 | 25 | @include transition($btn-transition); 26 | 27 | &:hover { 28 | background: darken($color, 5%); 29 | border-color: transparent; 30 | box-shadow: $btn-chunky-box-shadow darken($color, 12.5%); 31 | } 32 | 33 | &:active, 34 | &:focus { 35 | outline: 0 !important; 36 | box-shadow: $btn-chunky-box-shadow darken($color, 25%) !important; 37 | } 38 | 39 | &.btn-lg { 40 | padding-bottom: calc(#{$btn-padding-y-lg} - .25rem); 41 | } 42 | 43 | &.btn-sm { 44 | padding-bottom: calc(#{$btn-padding-y-sm} - .25rem); 45 | } 46 | 47 | } -------------------------------------------------------------------------------- /src/assets/scss/abstracts/mixins/_shadows.scss: -------------------------------------------------------------------------------- 1 | /* Mixin coloured shadow */ 2 | @mixin colored-shadow($value) { 3 | box-shadow: -1px 1px 13px -6px rgba($value, 0.85); 4 | } -------------------------------------------------------------------------------- /src/assets/scss/base/_base.scss: -------------------------------------------------------------------------------- 1 | /* generic site wide styles*/ 2 | body { 3 | overflow-x: hidden; 4 | } 5 | 6 | p, 7 | .fs-p { 8 | font-size: 1.08rem; 9 | } 10 | 11 | *:focus, 12 | *:active { 13 | outline: none !important; 14 | box-shadow: none !important; 15 | } 16 | 17 | img { 18 | image-rendering: smooth; 19 | } 20 | 21 | 22 | .disable-child-pointer * { 23 | pointer-events: none; 24 | } -------------------------------------------------------------------------------- /src/assets/scss/components/_accordion.scss: -------------------------------------------------------------------------------- 1 | /* Accordion shared styles */ 2 | @import 'accordions/accordions-shared'; 3 | 4 | /* Accordion stripped styles */ 5 | @import 'accordions/accordion-stripped'; 6 | 7 | /* Accordion icon plus/minus styles */ 8 | @import 'accordions/accordion-icon-plus'; 9 | 10 | /* Accordion icon position left styles */ 11 | @import 'accordions/accordion-icon-left'; -------------------------------------------------------------------------------- /src/assets/scss/components/_alert.scss: -------------------------------------------------------------------------------- 1 | /* Faded Alert */ 2 | @each $color, $value in $theme-colors { 3 | .alert-#{$color}-faded { 4 | @include alert-variant-faded(rgba($value, $alert-faded-bg-opacity), $value); 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /src/assets/scss/components/_badge.scss: -------------------------------------------------------------------------------- 1 | /* Listing Card Sale Badge */ 2 | .badge-sale { 3 | background: $danger; 4 | text-transform: uppercase; 5 | font-size: 74%; 6 | position: absolute; 7 | top: 0; 8 | left: 0; 9 | z-index: 10; 10 | padding: .5rem; 11 | } -------------------------------------------------------------------------------- /src/assets/scss/components/_breadcrumbs.scss: -------------------------------------------------------------------------------- 1 | /* Breadcrumbs */ 2 | .breadcrumb-item { 3 | text-transform: uppercase; 4 | font-weight: 500; 5 | text-decoration: none; 6 | color: $text-muted; 7 | 8 | a { 9 | text-decoration: none; 10 | color: $text-muted; 11 | } 12 | } 13 | 14 | /* Breadcrumbs light */ 15 | .breadcrumb-light { 16 | color: $white; 17 | 18 | a { 19 | color: $white; 20 | } 21 | 22 | &.active { 23 | color: $white; 24 | } 25 | } 26 | 27 | .breadcrumb-light+.breadcrumb-item::before { 28 | color: $white; 29 | } -------------------------------------------------------------------------------- /src/assets/scss/components/_buttons.scss: -------------------------------------------------------------------------------- 1 | 2 | /* buttons shared styles */ 3 | @import 'buttons/buttons-shared'; 4 | 5 | /* buttons brand styles */ 6 | @import 'buttons/buttons-brand'; 7 | 8 | /* buttons chunky styles */ 9 | @import 'buttons/buttons-chunky'; 10 | 11 | /* buttons faded styles */ 12 | @import 'buttons/buttons-faded'; 13 | 14 | /* buttons icon styles */ 15 | @import 'buttons/buttons-icon'; 16 | 17 | /* buttons rounded styles */ 18 | @import 'buttons/buttons-rounded'; 19 | 20 | /* buttons skewed styles */ 21 | @import 'buttons/buttons-skewed'; 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/assets/scss/components/_card.scss: -------------------------------------------------------------------------------- 1 | /* general card styles */ 2 | @import 'cards/card-shared'; 3 | 4 | /* card badges */ 5 | @import 'cards/card-badges'; 6 | 7 | /* card skewed */ 8 | @import 'cards/card-skewed'; 9 | 10 | /* Card reveal */ 11 | @import 'cards/card-reveal'; 12 | 13 | /* Card Expand */ 14 | @import 'cards/card-expand'; 15 | 16 | @import 'cards/card-product-listing'; 17 | 18 | /* card rotate */ 19 | @import 'cards/card-rotate'; 20 | 21 | /* card brands */ 22 | @import 'cards/card-brands'; 23 | 24 | /* card hover action styling */ 25 | @import 'cards/card-hover-actions'; -------------------------------------------------------------------------------- /src/assets/scss/components/_checkout.scss: -------------------------------------------------------------------------------- 1 | .checkout-panel { 2 | margin-bottom: 3rem; 3 | } 4 | 5 | .title-checkout { 6 | border-bottom: 1px solid $border-color; 7 | padding-bottom: 1.5rem; 8 | margin-bottom: 1.5rem; 9 | } 10 | 11 | /* Qty number used in checkout summary */ 12 | .checkout-item-qty { 13 | position: absolute; 14 | border-radius: 100%; 15 | width: 1.5rem; 16 | height: 1.5rem; 17 | display: flex; 18 | justify-content: center; 19 | align-items: center; 20 | font-weight: 500; 21 | top: -8px; 22 | right: -8px; 23 | background: $gray-900; 24 | color: $white; 25 | font-size: 74%; 26 | } -------------------------------------------------------------------------------- /src/assets/scss/components/_collapse.scss: -------------------------------------------------------------------------------- 1 | /* Collapse icon chevron styling */ 2 | .collapse-icon-chevron { 3 | position: relative; 4 | 5 | &:before { 6 | font-family: var(--theme-font-icon); 7 | content: "\ea4e"; 8 | position: absolute; 9 | right: 0; 10 | top: 50%; 11 | transform: translateY(-50%); 12 | display: block; 13 | } 14 | 15 | &[aria-expanded="true"] { 16 | &:before { 17 | content: "\ea78"; 18 | } 19 | } 20 | } 21 | 22 | /* Collapse icon plus/minus styling */ 23 | .collapse-icon-plus { 24 | position: relative; 25 | 26 | &:before { 27 | font-family: var(--theme-font-icon); 28 | content: "\ea13"; 29 | position: absolute; 30 | right: 0; 31 | top: 50%; 32 | transform: translateY(-50%); 33 | display: block; 34 | } 35 | 36 | &[aria-expanded="true"] { 37 | &:before { 38 | content: "\f1af"; 39 | } 40 | } 41 | } 42 | 43 | /* Collapse icon position left */ 44 | .collapse-icon-left { 45 | padding-left: 1.5rem !important; 46 | 47 | &:before { 48 | right: auto; 49 | left: 0; 50 | } 51 | } 52 | 53 | /* Collapse icon bg dark */ 54 | .collapse-icon-bg-dark { 55 | &:before { 56 | background: $gray-900; 57 | width: 24px; 58 | height: 24px; 59 | border-radius: 100%; 60 | text-align: center; 61 | color: $white; 62 | line-height: 24px; 63 | } 64 | 65 | &.collapse-icon-left { 66 | padding-left: 2.25rem !important; 67 | } 68 | } -------------------------------------------------------------------------------- /src/assets/scss/components/_components.scss: -------------------------------------------------------------------------------- 1 | /*Alerts */ 2 | @import 'alert'; 3 | /* Accordion */ 4 | @import 'accordion'; 5 | /* Badges */ 6 | @import 'badge'; 7 | /* Buttons */ 8 | @import 'buttons'; 9 | /* Breadcrumbs */ 10 | @import 'breadcrumbs'; 11 | /* Checkout */ 12 | @import 'checkout'; 13 | /* Card */ 14 | @import 'card'; 15 | /* Collapse */ 16 | @import 'collapse'; 17 | /* Dropdowns */ 18 | @import 'dropdown'; 19 | /* Forms */ 20 | @import 'forms'; 21 | /* Form check/radio */ 22 | @import 'form-check'; 23 | /* Hotspot */ 24 | @import 'hotspot'; 25 | /* Modals */ 26 | @import 'modals'; 27 | /* Navbar */ 28 | @import 'navbar'; 29 | /* Pagination */ 30 | @import 'pagination'; 31 | /* Payment Icons */ 32 | @import 'payment-icons'; 33 | /* Popovers */ 34 | @import 'popovers'; 35 | /* Reviews */ 36 | @import 'reviews'; 37 | /* Scroll To */ 38 | @import 'scroll-to'; 39 | /* Search */ 40 | @import 'search'; 41 | /* Tabs */ 42 | @import 'tabs'; 43 | /* Table */ 44 | @import 'table'; 45 | /* Tooltips */ 46 | @import 'tooltips'; -------------------------------------------------------------------------------- /src/assets/scss/components/_forms.scss: -------------------------------------------------------------------------------- 1 | .form-group { 2 | margin-bottom: 1.2rem; 3 | } 4 | 5 | label { 6 | margin-bottom: .35rem; 7 | } 8 | 9 | .form-check-label { 10 | font-weight: normal; 11 | } 12 | 13 | .form-select-sm { 14 | font-size: 0.85em; 15 | background-image: none; 16 | appearance: none; 17 | font-weight: 500; 18 | cursor: pointer; 19 | } -------------------------------------------------------------------------------- /src/assets/scss/components/_hotspot.scss: -------------------------------------------------------------------------------- 1 | .hotspot-container { 2 | position: relative; 3 | 4 | .hotspot { 5 | position: absolute; 6 | z-index: 20; 7 | width: 36px; 8 | height: 36px; 9 | border-radius: 100%; 10 | background: rgba(0,0,0,0.4); 11 | border: 2px solid rgba(255,255,255, .7); 12 | box-shadow: $box-shadow-lg; 13 | transition: all ease-in-out 0.2s; 14 | opacity: 0; 15 | cursor: pointer; 16 | 17 | &:after { 18 | width: 12px; 19 | height: 12px; 20 | background: $white; 21 | border-radius: 100%; 22 | content: ""; 23 | display: block; 24 | position: absolute; 25 | left: 50%; 26 | top: 50%; 27 | margin-left: -6px; 28 | margin-top: -6px; 29 | box-shadow: $box-shadow; 30 | transition: all linear 0.3s; 31 | } 32 | 33 | &:before { 34 | width: 46px; 35 | height: 46px; 36 | border-radius: 100%; 37 | content: ""; 38 | display: block; 39 | position: absolute; 40 | left: -7px; 41 | top: -7px; 42 | border: 2px solid rgba(255,255,255, .9); 43 | opacity:0; 44 | animation: pulsate 3s ease-out 3; 45 | } 46 | 47 | &.always-show { 48 | opacity: 1; 49 | } 50 | 51 | &.always-animate { 52 | 53 | &:before { 54 | animation: pulsate 3s ease-out infinite; 55 | } 56 | } 57 | 58 | &:hover, &:active, &:focus { 59 | 60 | border: 2px solid transparent; 61 | 62 | &:after { 63 | transform: scale(.8); 64 | } 65 | 66 | } 67 | } 68 | 69 | &:hover { 70 | .hotspot { 71 | opacity: 1; 72 | } 73 | } 74 | } 75 | 76 | 77 | .hotspot-content { 78 | z-index: 30; 79 | transition: all ease-in-out 0.3s; 80 | opacity: 0; 81 | background: $white; 82 | 83 | &.show { 84 | opacity: 1; 85 | } 86 | } 87 | 88 | 89 | .tippy-content { 90 | padding: .5rem !important; 91 | } -------------------------------------------------------------------------------- /src/assets/scss/components/_modals.scss: -------------------------------------------------------------------------------- 1 | //Amend default Bootstrap modal styling to display modal as drawer 2 | .modal-drawer { 3 | padding: 0 !important; 4 | 5 | 6 | .modal-header { 7 | border-radius: 0 !important; 8 | } 9 | 10 | &.fade { 11 | .modal-dialog { 12 | transform: none !important; 13 | } 14 | .modal-content { 15 | transition: opacity linear .2s, transform ease-in .3s !important; 16 | opacity: 0; 17 | transform: translateX(100%) !important; 18 | 19 | &.modal-drawer-left { 20 | transform: translateX(-100%) !important; 21 | } 22 | } 23 | 24 | &.show { 25 | .modal-content { 26 | opacity: 1; 27 | transform: translateX(0) !important; 28 | } 29 | } 30 | } 31 | } 32 | 33 | .modal-title { 34 | font-weight: 600; 35 | } 36 | 37 | .modal-header { 38 | border-bottom: 0; 39 | padding-bottom: 0; 40 | } -------------------------------------------------------------------------------- /src/assets/scss/components/_pagination.scss: -------------------------------------------------------------------------------- 1 | .page-link { 2 | border-radius: $border-radius; 3 | transition: all linear .3s; 4 | } -------------------------------------------------------------------------------- /src/assets/scss/components/_payment-icons.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Payment Icons. This makes it easy for you to include a list of payment provider icons to your website or app. 3 | * Created by Jasper codepen.io/jasper 4 | * 5 | * Version: 0.0.1 6 | * 7 | * All icons are © to their respective owners 8 | * Icon designs by behance.net/spektrum44 9 | * 10 | */ 11 | 12 | 13 | .pi { 14 | display: inline-block; 15 | -webkit-font-smoothing: antialiased; 16 | font-style: normal; 17 | font-variant: normal; 18 | text-rendering: auto; 19 | width: 40px; 20 | min-height: 30px; 21 | background-origin: padding-box; 22 | 23 | &.pi-paypal { background: url('../svgs/paypal.svg') center center no-repeat;} 24 | &.pi-apple-pay { background: url('../svgs/apple-pay.svg') center center no-repeat;} 25 | &.pi-google-pay { background: url('../svgs/google-pay.svg') center center no-repeat;} 26 | &.pi-alipay { background: url('../svgs/alipay.svg') center center no-repeat;} 27 | &.pi-mastercard { background: url('../svgs/mastercard.svg') center center no-repeat;} 28 | &.pi-visa { background: url('../svgs/visa.svg') center center no-repeat;} 29 | &.pi-american-express { background: url('../svgs/american-express.svg') center center no-repeat;} 30 | &.pi-diners-club { background: url('../svgs/diners-club.svg') center center no-repeat;} 31 | &.pi-maestro { background: url('../svgs/maestro.svg') center center no-repeat;} 32 | &.pi-vpay { background: url('../svgs/vpay.svg') center center no-repeat;} 33 | &.pi-girocard { background: url('../svgs/girocard.svg') center center no-repeat;} 34 | &.pi-klarna { background: url('../svgs/klarna.svg') center center no-repeat;} 35 | &.pi-giropay { background: url('../svgs/giropay.svg') center center no-repeat;} 36 | &.pi-ideal { background: url('../svgs/ideal.svg') center center no-repeat;} 37 | &.pi-przelewy24 { background: url('../svgs/przelewy24.svg') center center no-repeat;} 38 | &.pi-bitcoin { background: url('../svgs/bitcoin.svg') center center no-repeat;} 39 | &.pi-ethereum { background: url('../svgs/ethereum.svg') center center no-repeat;} 40 | &.pi-ripple { background: url('../svgs/ripple.svg') center center no-repeat;} 41 | 42 | &.pi-lg { 43 | width: 80px; 44 | } 45 | 46 | &.pi-sm { 47 | width: 25px; 48 | min-height: 15px; 49 | } 50 | } -------------------------------------------------------------------------------- /src/assets/scss/components/_popovers.scss: -------------------------------------------------------------------------------- 1 | /* shared popover styles */ 2 | @import 'popovers/popovers-shared'; 3 | 4 | /* popovers gray styles */ 5 | @import 'popovers/popovers-gray'; 6 | 7 | /* popovers dark styles */ 8 | @import 'popovers/popovers-dark'; -------------------------------------------------------------------------------- /src/assets/scss/components/_reviews.scss: -------------------------------------------------------------------------------- 1 | .rating { 2 | .stars { 3 | position: relative; 4 | z-index: 1; 5 | overflow: hidden; 6 | display: flex; 7 | 8 | &.position-absolute { 9 | position: absolute; 10 | z-index: 2; 11 | flex-wrap: nowrap; 12 | } 13 | 14 | i { 15 | display: inline-block; 16 | } 17 | } 18 | } -------------------------------------------------------------------------------- /src/assets/scss/components/_scroll-to.scss: -------------------------------------------------------------------------------- 1 | [data-pixr-scrollto] { 2 | cursor: pointer; 3 | } -------------------------------------------------------------------------------- /src/assets/scss/components/_search.scss: -------------------------------------------------------------------------------- 1 | .search-overlay { 2 | position: fixed; 3 | top: 0; 4 | left: 0; 5 | right: 0; 6 | bottom: 0; 7 | width: 100vw; 8 | min-height: 100vh; 9 | overflow-y: auto; 10 | background: $white; 11 | display: none; 12 | opacity: 0; 13 | z-index: -1; 14 | } 15 | 16 | .search-active { 17 | overflow: hidden; 18 | 19 | .search-overlay { 20 | display: block; 21 | animation: fadeIn .5s; 22 | opacity: 1; 23 | z-index: 999; 24 | } 25 | } -------------------------------------------------------------------------------- /src/assets/scss/components/_table.scss: -------------------------------------------------------------------------------- 1 | .table>:not(:last-child)>:last-child>* { 2 | border-bottom-color: $border-color; 3 | } 4 | .table th { 5 | text-transform: uppercase; 6 | font-size: $small-font-size; 7 | } -------------------------------------------------------------------------------- /src/assets/scss/components/_tabs.scss: -------------------------------------------------------------------------------- 1 | /* tabs shared */ 2 | @import 'tabs/tabs-shared'; 3 | 4 | /* tabs border botom */ 5 | @import 'tabs/tabs-border'; 6 | -------------------------------------------------------------------------------- /src/assets/scss/components/_tooltips.scss: -------------------------------------------------------------------------------- 1 | /* tooltips gray styles */ 2 | @import 'tooltips/tooltips-gray'; 3 | 4 | /* tooltips white styles */ 5 | @import 'tooltips/tooltips-white'; -------------------------------------------------------------------------------- /src/assets/scss/components/accordions/_accordion-icon-left.scss: -------------------------------------------------------------------------------- 1 | /* Accordion Icon position left styling */ 2 | .accordion-icon-left.accordion-button { 3 | padding-left: 2.5rem; 4 | 5 | &:after { 6 | right: auto; 7 | left: .5rem; 8 | } 9 | 10 | &.accordion-button-stripped { 11 | &:after { 12 | left: 0; 13 | } 14 | } 15 | } 16 | 17 | .accordion-icon-left.accordion-body { 18 | padding-left: 2.5rem; 19 | } -------------------------------------------------------------------------------- /src/assets/scss/components/accordions/_accordion-icon-plus.scss: -------------------------------------------------------------------------------- 1 | /* Accordion icon plus/minus styling */ 2 | .accordion-icon-plus { 3 | &:after { 4 | content: "\EA11"; 5 | } 6 | } 7 | 8 | .accordion-icon-plus:not(.collapsed)::after { 9 | content: "\EE57"; 10 | } -------------------------------------------------------------------------------- /src/assets/scss/components/accordions/_accordion-stripped.scss: -------------------------------------------------------------------------------- 1 | /* Accordion Stripped Styling */ 2 | .accordion-button-stripped:after { 3 | right: 0; 4 | } 5 | 6 | .accordion-button-stripped:not(.collapsed)::after { 7 | color: $body-color; 8 | content: "\EA56"; 9 | transform: none !important; 10 | } 11 | 12 | .accordion-button-stripped, 13 | .accordion-button-stripped:not(.collapsed) { 14 | background: transparent; 15 | border-radius: 0 !important; 16 | padding-left: 0; 17 | font-weight: 500; 18 | } 19 | 20 | .accordion-stripped { 21 | border-bottom: 1px solid $border-color; 22 | } 23 | 24 | .accordion-button-stripped:not(.collapsed) { 25 | color: $body-color; 26 | } 27 | 28 | .accordion-stripped:first-of-type { 29 | border-top: 1px solid $border-color; 30 | } 31 | 32 | .accordion-body-stripped { 33 | padding-left: 0; 34 | padding-right: 0; 35 | } -------------------------------------------------------------------------------- /src/assets/scss/components/accordions/_accordions-shared.scss: -------------------------------------------------------------------------------- 1 | /* Accordion shared styles */ 2 | .accordion-button:not(.accordion-button-stripped) { 3 | background: $gray-50; 4 | color: $body-color; 5 | border-radius: $border-radius; 6 | } 7 | 8 | .accordion-button { 9 | 10 | &:after { 11 | border: 0; 12 | font-family: var(--theme-font-icon); 13 | font-style: var(--theme-font-icon-style); 14 | content: "\EA50"; 15 | margin: 0; 16 | font-size: 1.25rem; 17 | background: transparent !important; 18 | display: block; 19 | position: absolute; 20 | color: $body-color; 21 | right: .75rem; 22 | top: 25%; 23 | } 24 | } 25 | 26 | .accordion-button:not(.collapsed)::after { 27 | content: "\EA56"; 28 | color: $white; 29 | transform: none !important; 30 | } 31 | 32 | .accordion-button:not(.collapsed):not(.accordion-button-stripped) { 33 | background: $body-color; 34 | color: $white; 35 | } 36 | 37 | 38 | .accordion-item { 39 | margin-bottom: 1px; 40 | } -------------------------------------------------------------------------------- /src/assets/scss/components/buttons/_buttons-brand.scss: -------------------------------------------------------------------------------- 1 | /* brand buttons */ 2 | .btn-brand-letter { 3 | text-decoration: none; 4 | font-weight: bold; 5 | font-size: $h1-font-size; 6 | padding: .25rem 0rem; 7 | margin-right: 1.5rem; 8 | transition: all linear .2s; 9 | text-transform: uppercase; 10 | 11 | &:hover { 12 | opacity: .50; 13 | } 14 | } -------------------------------------------------------------------------------- /src/assets/scss/components/buttons/_buttons-chunky.scss: -------------------------------------------------------------------------------- 1 | /* chunky buttons */ 2 | @each $color, 3 | $value in $theme-colors { 4 | .btn-#{$color}-chunky { 5 | @include btn-chunky($value) 6 | } 7 | } -------------------------------------------------------------------------------- /src/assets/scss/components/buttons/_buttons-faded.scss: -------------------------------------------------------------------------------- 1 | /* faded button */ 2 | @each $color, 3 | $value in $theme-colors { 4 | .btn-#{$color}-faded { 5 | @include btn-variant-faded(rgba($value, $btn-faded-bg-opacity), $value); 6 | } 7 | } -------------------------------------------------------------------------------- /src/assets/scss/components/buttons/_buttons-icon.scss: -------------------------------------------------------------------------------- 1 | /* icon buttons */ 2 | .btn-icon { 3 | width: 50px; 4 | height: 50px; 5 | padding: 0; 6 | display: flex; 7 | align-items: center; 8 | justify-content: center; 9 | line-height: 1; 10 | border-radius: 100%; 11 | 12 | &.btn-lg { 13 | width: 80px; 14 | height: 80px; 15 | } 16 | 17 | &.btn-sm { 18 | width: 36px; 19 | height: 36px; 20 | } 21 | } -------------------------------------------------------------------------------- /src/assets/scss/components/buttons/_buttons-rounded.scss: -------------------------------------------------------------------------------- 1 | /* rounded top left, bottom right */ 2 | .btn-rounded-tl-br { 3 | border-top-left-radius: $border-radius-xl; 4 | border-bottom-right-radius: $border-radius-xl; 5 | } 6 | 7 | /* rounded top right, bottom left */ 8 | .btn-rounded-tr-bl { 9 | border-top-right-radius: $border-radius-xl; 10 | border-bottom-left-radius: $border-radius-xl; 11 | } -------------------------------------------------------------------------------- /src/assets/scss/components/buttons/_buttons-shared.scss: -------------------------------------------------------------------------------- 1 | /* adjust btn-sm padding */ 2 | .btn-group-sm>.btn, 3 | .btn-sm { 4 | padding: .5rem .75rem !important; 5 | } 6 | 7 | /* remove text decoration for btn-link */ 8 | .btn-link { 9 | text-decoration: none; 10 | } 11 | 12 | /* set btn-orange and btn-success colour to white */ 13 | .btn-orange, .btn-success { 14 | color: $white; 15 | 16 | &:hover { 17 | color: $white; 18 | } 19 | } 20 | 21 | /* set outline button border-size to 2px*/ 22 | [class*="btn-outline-"] { 23 | border-width: 2px; 24 | } 25 | 26 | /* add css transition only once page has loaded to avoid content shift */ 27 | .btn { 28 | transition: none; 29 | } 30 | .page-loaded .btn { 31 | transition: all ease-in .15s; 32 | } -------------------------------------------------------------------------------- /src/assets/scss/components/buttons/_buttons-skewed.scss: -------------------------------------------------------------------------------- 1 | /* skew button left & right. Only applied for breakpoint MD and above because stacked skewed buttons do not look good. */ 2 | @include media-breakpoint-up(md) { 3 | .btn-skew-left { 4 | transform: skew(10deg); 5 | } 6 | 7 | .btn-skew-left span { 8 | display: block; 9 | transform: skew(-10deg); 10 | } 11 | 12 | .btn-skew-right { 13 | transform: skew(-10deg); 14 | } 15 | 16 | 17 | .btn-skew-right span { 18 | display: block; 19 | transform: skew(10deg); 20 | } 21 | } -------------------------------------------------------------------------------- /src/assets/scss/components/cards/_card-badges.scss: -------------------------------------------------------------------------------- 1 | .card-badge { 2 | position: absolute; 3 | top: 5px; 4 | left: 5px; 5 | z-index: 20; 6 | padding: .5rem .5rem .6rem; 7 | font-weight: 500; 8 | } -------------------------------------------------------------------------------- /src/assets/scss/components/cards/_card-brands.scss: -------------------------------------------------------------------------------- 1 | /* card brands */ 2 | .card-brands { 3 | border-top: 1px solid $border-color; 4 | padding: 2rem 0; 5 | } 6 | 7 | .card-title-brand { 8 | font-weight: bold; 9 | font-size: $h1-font-size; 10 | text-transform: uppercase; 11 | color: $gray-100; 12 | } -------------------------------------------------------------------------------- /src/assets/scss/components/cards/_card-expand.scss: -------------------------------------------------------------------------------- 1 | /* card expand */ 2 | .card-expand { 3 | padding-left: var(--bs-gutter-width); 4 | padding-right: var(--bs-gutter-width); 5 | } 6 | 7 | /* handle width calc for smaller devices */ 8 | @include media-breakpoint-up(md) { 9 | .card-expand { 10 | width: auto; 11 | } 12 | } 13 | @include media-breakpoint-up(xl) { 14 | .card-expand { 15 | width: calc(50vw + (var(--theme-maxwidth-breakpoint-xl) / 2) - (var(--bs-spacer) * 2)); 16 | margin-left: auto; 17 | margin-right: 0; 18 | padding-right: var(--swiper-slide-spacing); 19 | padding-left: 0; 20 | } 21 | } 22 | @include media-breakpoint-up(xxl) { 23 | .card-expand { 24 | width: calc(50vw + (var(--theme-maxwidth-breakpoint-xxl) / 2) - (var(--bs-spacer) * 2)); 25 | } 26 | } -------------------------------------------------------------------------------- /src/assets/scss/components/cards/_card-hover-actions.scss: -------------------------------------------------------------------------------- 1 | .card-hover-hide-one { 2 | transition: all ease-in .3s; 3 | } 4 | 5 | .card-hover-hide-two { 6 | transition: all ease-in .3s .1s; 7 | } 8 | 9 | .card-hover-hide-three { 10 | transition: all ease-in .3s .2s; 11 | } 12 | 13 | .card-hover-show-one { 14 | transition: all ease-in .2s !important; 15 | transform: translate(-50%, -35%); 16 | position: absolute; 17 | top: 50%; 18 | left: 50%; 19 | opacity: 0; 20 | } 21 | 22 | .card:hover { 23 | .card-hover-hide-one { 24 | transform: translateX(-200%); 25 | } 26 | 27 | .card-hover-hide-two { 28 | transform: translateX(-200%); 29 | } 30 | 31 | .card-hover-hide-three { 32 | transform: translateX(-200%); 33 | } 34 | .card-hover-show-one { 35 | transition: all ease-in .2s .5s !important; 36 | transform: translate(-50%, -50%); 37 | opacity: 1; 38 | } 39 | } -------------------------------------------------------------------------------- /src/assets/scss/components/cards/_card-product-listing.scss: -------------------------------------------------------------------------------- 1 | 2 | .card-listing .card-actions { 3 | position: absolute; 4 | z-index: 20; 5 | bottom: 0; 6 | left: 0; 7 | right: 0; 8 | padding: .75rem; 9 | background: rgba(255,255,255, .8); 10 | transform: translateY(100%); 11 | } 12 | 13 | .page-loaded .card-actions { 14 | transition: transform ease-in .15s; 15 | } 16 | 17 | .card-listing { 18 | .card-header { 19 | border: 2px dashed transparent; 20 | transition: border ease-in .2s; 21 | position: relative; 22 | padding: 0; 23 | overflow: hidden; 24 | } 25 | 26 | &:hover { 27 | .card-header { 28 | border: 2px dashed $gray-900; 29 | } 30 | .card-actions { 31 | opacity: 1; 32 | transform: translateY(0); 33 | } 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/assets/scss/components/cards/_card-reveal.scss: -------------------------------------------------------------------------------- 1 | /* Card Reveal. 2 | * Used together with AOS to reveal content on scroll 3 | * Be sure to checkout vendors/aos/aos for the reveal animation styling 4 | */ 5 | 6 | .card-reveal-text { 7 | opacity: 0; 8 | transition: transform .5s cubic-bezier(0.5, 0, 0.1, 1) .65s, opacity .5s cubic-bezier(0.5, 0, 0.1, 1) .65s; 9 | transform: translateY(10%); 10 | } 11 | 12 | .card-reveal-body { 13 | position: relative; 14 | z-index: 20; 15 | 16 | &:after { 17 | content: ""; 18 | position: absolute; 19 | width: 100%; 20 | height: 100%; 21 | top: 0; 22 | left: 0; 23 | right: 0; 24 | bottom: 0; 25 | background: white; 26 | transition: transform 1s cubic-bezier(0.5, 0, 0.1, 1),opacity 1s cubic-bezier(0.5, 0, 0.1, 1) 0.75s; 27 | } 28 | } 29 | 30 | .card-reveal-img { 31 | position: relative; 32 | overflow: hidden; 33 | z-index: 30; 34 | 35 | &:after { 36 | content: ""; 37 | position: absolute; 38 | width: 100%; 39 | height: 100%; 40 | top: 0; 41 | left: 0; 42 | right: 0; 43 | bottom: 0; 44 | background: white; 45 | transition: transform 1s cubic-bezier(0.5, 0, 0.1, 1),opacity 1s cubic-bezier(0.5, 0, 0.1, 1) 0.75s; 46 | } 47 | 48 | img { 49 | transition: transform 0.75s cubic-bezier(0.5, 0, 0.1, 1); 50 | transform: translateX(-20%); 51 | } 52 | } 53 | /* reveal right variant */ 54 | .card-reveal-left { 55 | .card-reveal-img { 56 | img { 57 | transform: translateX(20%); 58 | } 59 | } 60 | } -------------------------------------------------------------------------------- /src/assets/scss/components/cards/_card-rotate.scss: -------------------------------------------------------------------------------- 1 | /* card svg clip-path */ 2 | @include media-breakpoint-up(xl) { 3 | .img-clip-shape-one { 4 | clip-path: url("#svg-slanted-one"); 5 | } 6 | } 7 | 8 | .card-title-rotate { 9 | transition: all ease-in .3s; 10 | transform: rotate(-90deg); 11 | transform-origin: left top; 12 | } 13 | 14 | .card-rotate { 15 | overflow: hidden; 16 | } 17 | 18 | .card-img-zoom { 19 | transition: all ease-in .5s; 20 | } 21 | 22 | .card-rotate .link-cover:after { 23 | background: rgba(0,0,0,.2); 24 | z-index: 10; 25 | } 26 | 27 | .card:hover { 28 | .card-img-zoom { 29 | transform: scale(1.02); 30 | } 31 | .card-title-show-hover, .card-link-show-hover { 32 | opacity: 1; 33 | transform: translateY(0) 34 | } 35 | .card-title-wrapper { 36 | bottom: -100%; 37 | } 38 | } 39 | 40 | 41 | .card-rotate .card-title-wrapper { 42 | transition: all ease-in .3s .2s; 43 | position: absolute; 44 | bottom: 0; 45 | left: 1rem; 46 | z-index: 20; 47 | } 48 | 49 | .card-link-show-hover { 50 | position: absolute; 51 | bottom: 1rem; 52 | right: 1rem; 53 | transition: all ease-in .2s .2s; 54 | transform: translateY(20%); 55 | opacity: 0; 56 | z-index: 20; 57 | } 58 | 59 | .card-title-show-hover { 60 | transition: all ease-in .3s; 61 | transform: translateY(-20%); 62 | opacity: 0; 63 | z-index: 20; 64 | position: relative; 65 | } -------------------------------------------------------------------------------- /src/assets/scss/components/cards/_card-shared.scss: -------------------------------------------------------------------------------- 1 | .variant-active { 2 | border: 1px solid $dark; 3 | opacity: .25; 4 | } 5 | 6 | .card-title { 7 | font-weight: bold; 8 | } -------------------------------------------------------------------------------- /src/assets/scss/components/cards/_card-skewed.scss: -------------------------------------------------------------------------------- 1 | .card-title-overlay-skewed { 2 | position: absolute; 3 | bottom: 25px; 4 | left: 0; 5 | z-index: 10; 6 | display: flex; 7 | justify-content: center; 8 | align-items: center; 9 | flex-direction: column; 10 | transform: skewY(-5deg); 11 | } 12 | 13 | .card-skewed-overlap { 14 | margin-top: -5px; 15 | font-weight: bold; 16 | font-size: 74%; 17 | text-transform: uppercase; 18 | background: $teal; 19 | color: $body-color; 20 | padding: .25rem .45rem; 21 | } 22 | 23 | .card-skewed-title { 24 | font-size: 1rem; 25 | text-transform: uppercase; 26 | font-weight: 500; 27 | background: $gray-900; 28 | color: $white; 29 | padding: .5rem .75rem; 30 | } -------------------------------------------------------------------------------- /src/assets/scss/components/popovers/_popovers-dark.scss: -------------------------------------------------------------------------------- 1 | /* dark popover styling */ 2 | .popover-dark { 3 | .popover-arrow { 4 | margin-bottom: 1px; 5 | 6 | &:before, &:after { 7 | border-top-color: $gray-900; 8 | } 9 | } 10 | .popover-body { 11 | background: $gray-900; 12 | color: $white; 13 | } 14 | 15 | &.bs-popover-end { 16 | .popover-arrow { 17 | margin-bottom: 0; 18 | 19 | &:before, &:after { 20 | border-top-color: transparent; 21 | border-right-color: $gray-900; 22 | } 23 | } 24 | } 25 | 26 | &.bs-popover-start { 27 | .popover-arrow { 28 | margin-bottom: 0; 29 | 30 | &:before, &:after { 31 | border-top-color: transparent; 32 | border-left-color: $gray-900; 33 | } 34 | } 35 | } 36 | 37 | &.bs-popover-bottom { 38 | .popover-arrow { 39 | margin-bottom: 0; 40 | margin-top: 1px; 41 | 42 | &:before, &:after { 43 | border-top-color: transparent; 44 | border-bottom-color: $gray-900; 45 | } 46 | } 47 | } 48 | } -------------------------------------------------------------------------------- /src/assets/scss/components/popovers/_popovers-gray.scss: -------------------------------------------------------------------------------- 1 | /* gray popover styling */ 2 | .popover-gray { 3 | .popover-arrow { 4 | margin-bottom: 1px; 5 | 6 | &:before, &:after { 7 | border-top-color: $gray-600; 8 | } 9 | } 10 | .popover-body { 11 | background: $gray-600; 12 | } 13 | 14 | &.bs-popover-end { 15 | .popover-arrow { 16 | margin-bottom: 0; 17 | 18 | &:before, &:after { 19 | border-top-color: transparent; 20 | border-right-color: $gray-600; 21 | } 22 | } 23 | } 24 | 25 | &.bs-popover-start { 26 | .popover-arrow { 27 | margin-bottom: 0; 28 | 29 | &:before, &:after { 30 | border-top-color: transparent; 31 | border-left-color: $gray-600; 32 | } 33 | } 34 | } 35 | 36 | &.bs-popover-bottom { 37 | .popover-arrow { 38 | margin-bottom: 0; 39 | margin-top: 1px; 40 | 41 | &:before, &:after { 42 | border-top-color: transparent; 43 | border-bottom-color: $gray-600; 44 | } 45 | } 46 | } 47 | } -------------------------------------------------------------------------------- /src/assets/scss/components/popovers/_popovers-shared.scss: -------------------------------------------------------------------------------- 1 | .popover { 2 | box-shadow: $box-shadow-lg; 3 | } -------------------------------------------------------------------------------- /src/assets/scss/components/tabs/_tabs-border.scss: -------------------------------------------------------------------------------- 1 | /* Nav tabs border bottom */ 2 | .nav-tabs-border { 3 | .nav-link { 4 | position: relative; 5 | padding-left: 0; 6 | padding-right: 0; 7 | margin-right: 2rem; 8 | 9 | &:after { 10 | content: ""; 11 | display: block; 12 | height: 2px; 13 | background: $dark; 14 | position: absolute; 15 | bottom: 0; 16 | left: 0; 17 | right: 0; 18 | opacity: 0; 19 | } 20 | 21 | &.active { 22 | &:after { 23 | opacity: 1; 24 | } 25 | } 26 | } 27 | } -------------------------------------------------------------------------------- /src/assets/scss/components/tabs/_tabs-shared.scss: -------------------------------------------------------------------------------- 1 | /* default shared tabs styling */ 2 | .nav-tabs { 3 | border: 0; 4 | 5 | .nav-link { 6 | border: 0; 7 | } 8 | } 9 | 10 | .tab-pane { 11 | padding-top: 1rem; 12 | } -------------------------------------------------------------------------------- /src/assets/scss/components/tooltips/_tooltips-gray.scss: -------------------------------------------------------------------------------- 1 | /* tooltip gray styling */ 2 | .tooltip-gray { 3 | .tooltip-inner { 4 | background: $gray-600; 5 | color: $body-color; 6 | } 7 | 8 | .tooltip-arrow { 9 | &:before { 10 | border-top-color: $gray-600; 11 | } 12 | } 13 | 14 | &.bs-tooltip-end { 15 | .tooltip-arrow { 16 | &:before { 17 | border-top-color: transparent; 18 | border-right-color: $gray-600; 19 | } 20 | } 21 | } 22 | &.bs-tooltip-start { 23 | .tooltip-arrow { 24 | &:before { 25 | border-top-color: transparent; 26 | border-left-color: $gray-600; 27 | } 28 | } 29 | } 30 | &.bs-tooltip-bottom { 31 | .tooltip-arrow { 32 | &:before { 33 | border-top-color: transparent; 34 | border-bottom-color: $gray-600; 35 | } 36 | } 37 | } 38 | } -------------------------------------------------------------------------------- /src/assets/scss/components/tooltips/_tooltips-white.scss: -------------------------------------------------------------------------------- 1 | /* tooltip white styling */ 2 | .tooltip-white { 3 | box-shadow: $box-shadow-lg; 4 | 5 | .tooltip-inner { 6 | background: $white; 7 | color: $body-color; 8 | } 9 | 10 | .tooltip-arrow { 11 | &:before { 12 | border-top-color: $white; 13 | } 14 | } 15 | 16 | &.bs-tooltip-end { 17 | .tooltip-arrow { 18 | &:before { 19 | border-top-color: transparent; 20 | border-right-color: $white; 21 | } 22 | } 23 | } 24 | &.bs-tooltip-start { 25 | .tooltip-arrow { 26 | &:before { 27 | border-top-color: transparent; 28 | border-left-color: $white; 29 | } 30 | } 31 | } 32 | &.bs-tooltip-bottom { 33 | .tooltip-arrow { 34 | &:before { 35 | border-top-color: transparent; 36 | border-bottom-color: $white; 37 | } 38 | } 39 | } 40 | } -------------------------------------------------------------------------------- /src/assets/scss/custom.scss: -------------------------------------------------------------------------------- 1 | /* Custom styling that only applies to demo logo. Remove when you replace your with your logo */ 2 | .svg-logo-white { 3 | color: $orange; 4 | } 5 | .svg-logo-black { 6 | color: $gray-900; 7 | } 8 | 9 | .navbar-transparent { 10 | .svg-logo-black { 11 | color: $white; 12 | } 13 | } 14 | 15 | /* Add your own custom CSS here... */ -------------------------------------------------------------------------------- /src/assets/scss/libs.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Note: Do not write any CSS in this file. Only use it to import vendor CSS files from your node_modules directory. 3 | */ 4 | 5 | /* AOS */ 6 | @import '~aos/dist/aos.css'; 7 | 8 | /* NoUISlider */ 9 | @import '~nouislider/distribute/nouislider.min.css'; 10 | 11 | /* Simplebar */ 12 | @import '~simplebar/dist/simplebar.css'; 13 | 14 | /* Swiper.js */ 15 | @import '~swiper/swiper-bundle.css'; 16 | 17 | /* Tippy */ 18 | @import '~tippy.js/dist/tippy.css'; 19 | @import '~tippy.js/themes/light.css'; 20 | @import '~tippy.js/animations/shift-away.css'; -------------------------------------------------------------------------------- /src/assets/scss/theme.scss: -------------------------------------------------------------------------------- 1 | /* Table of contents 2 | –––––––––––––––––––––––––––––––––––––––––––––––––– 3 | 4 | Note: Do not write any CSS in this file. Only use it to import other CSS files. 5 | Note: '~' in the import statement means the file is imported from the node_modules directory. Bootstrap functions is an example. 6 | 7 | - Bootstrap Functions. 8 | - Bootstrap Mixins. 9 | - Framework SASS Variables - override Bootstrap's SASS Vars in this file. 10 | - Framework Mixins 11 | - Framework Utilities 12 | - Bootstrap Core 13 | - Framework CSS Custom Properties (CSS Variables) 14 | - Framework Base 15 | - Framework Components 16 | - Framework Vendors 17 | - Custom CSS - Add your custom CSS to this file 18 | */ 19 | 20 | 21 | 22 | 23 | /* Bootstrap Functions - DO NOT CHANGE ANYTHING IN HERE 24 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 25 | @import '~bootstrap/scss/functions'; 26 | 27 | /* Bootstrap Mixins - DO NOT CHANGE ANYTHING IN HERE 28 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 29 | @import '~bootstrap/scss/mixins'; 30 | 31 | /* Framework SASS Variables - GO HERE TO OVERRIDE BOOTSTRAP VARS. 32 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 33 | @import 'abstracts/sass-variables'; 34 | 35 | /* Framework Mixins 36 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 37 | @import 'abstracts/mixins'; 38 | 39 | /* Framework Utilities - Needs to be imported before main bootstrap file. 40 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 41 | @import 'utilities/utilities'; 42 | 43 | /* Bootstrap Core - DO NOT CHANGE ANYTHING IN HERE 44 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 45 | @import '~bootstrap/scss/bootstrap'; 46 | 47 | /* Framework Custom Properties (CSS Variables) 48 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 49 | @import 'abstracts/css-vars'; 50 | 51 | /* Framework Base 52 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 53 | @import 'base/base'; 54 | 55 | /* Framework Components 56 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 57 | @import 'components/components'; 58 | 59 | /* Framework Vendor Overrides 60 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 61 | @import 'vendors/vendors'; 62 | 63 | /* Template Custom CSS - Add your own CSS to this file 64 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 65 | @import 'custom'; -------------------------------------------------------------------------------- /src/assets/scss/utilities/_backgrounds.scss: -------------------------------------------------------------------------------- 1 | /* image background control */ 2 | .bg-img-cover { 3 | background-repeat: no-repeat; 4 | background-size: cover; 5 | } 6 | .bg-img-contain { 7 | background-repeat: no-repeat; 8 | background-size: contain; 9 | } 10 | 11 | .bg-pos-center-center { 12 | background-position: center center; 13 | } 14 | 15 | .bg-pos-center-top { 16 | background-position: center top; 17 | } 18 | 19 | .bg-pos-center-bottom { 20 | background-position: center bottom; 21 | } 22 | 23 | .bg-pos-left-top { 24 | background-position: left top; 25 | } 26 | 27 | .bg-pos-left-center { 28 | background-position: left center; 29 | } 30 | 31 | .bg-pos-right-center { 32 | background-position: right center; 33 | } 34 | 35 | .bg-pos-right-top { 36 | background-position: right top; 37 | } 38 | 39 | .bg-pos-center-bottom { 40 | background-position: center bottom; 41 | } 42 | 43 | .bg-pos-left-bottom { 44 | background-position: left bottom; 45 | } 46 | 47 | .bg-pos-right-bottom { 48 | background-position: right bottom; 49 | } 50 | 51 | .bg-white-hover:hover { 52 | background: $white !important; 53 | } 54 | 55 | 56 | // faded background 57 | @each $color, $value in $theme-colors { 58 | .bg-#{$color}-faded { 59 | @include bg-variant-faded(rgba($value, $btn-faded-bg-opacity)); 60 | } 61 | } 62 | 63 | /* single custom colours */ 64 | .bg-teal-300 { 65 | background: $teal-300; 66 | } 67 | .bg-black-opacity { 68 | background: rgba(0,0,0, .2); 69 | } 70 | .bg-gray-800 { 71 | background: $gray-800 !important; 72 | } -------------------------------------------------------------------------------- /src/assets/scss/utilities/_borders.scss: -------------------------------------------------------------------------------- 1 | .border-top-white-opacity { 2 | border-top: 1px solid rgba(255,255,255, .15); 3 | } 4 | .border-bottom-white-opacity { 5 | border-bottom: 1px solid rgba(255,255,255, .15); 6 | } 7 | .border-white-opacity { 8 | border: 1px solid rgba(255,255,255, .15); 9 | } 10 | 11 | 12 | /* larger rounded radius */ 13 | .rounded-lg { 14 | border-radius: $border-radius-lg !important; 15 | } 16 | .rounded-xl { 17 | border-radius: $border-radius-xl !important; 18 | } 19 | 20 | /* Remove Border radius per corner */ 21 | .rounded-0-top-start { 22 | border-top-left-radius: 0 !important; 23 | } 24 | .rounded-0-bottom-start { 25 | border-bottom-left-radius: 0 !important; 26 | } 27 | .rounded-0-top-end { 28 | border-top-right-radius: 0 !important; 29 | } 30 | .rounded-0-bottom-end { 31 | border-bottom-right-radius: 0 !important; 32 | } 33 | 34 | /* Cannot get Bootstrap API utility to generate responsive borders by breakpoint. Temp fix */ 35 | @include media-breakpoint-up(lg) { 36 | .border-lg-bottom { 37 | border-bottom: 1px solid $border-color; 38 | } 39 | } -------------------------------------------------------------------------------- /src/assets/scss/utilities/_hover-effects.scss: -------------------------------------------------------------------------------- 1 | [class*='hover-'] { 2 | will-change: transform, opacity, box-shadow; 3 | } 4 | 5 | .hover-lift { 6 | transition: all ease-in .15s; 7 | &:hover { 8 | transform: translate3d(0px, -5px, 0px); 9 | } 10 | } 11 | 12 | 13 | .hover-lift-sm { 14 | transition: all ease-in .15s; 15 | &:hover { 16 | transform: translate3d(0px, -2px, 0px); 17 | } 18 | } 19 | 20 | .hover-opacity-75 { 21 | transition: all ease-in .15s; 22 | &:hover { 23 | opacity: .75; 24 | } 25 | } 26 | 27 | .hover-boxshadow { 28 | transition: all ease-in .15s; 29 | &:hover { 30 | box-shadow: $box-shadow; 31 | } 32 | } 33 | 34 | .hover-target-show { 35 | opacity: 0; 36 | transition: all ease-in .1s; 37 | } 38 | 39 | .hover-target-hide { 40 | opacity: 1; 41 | transition: all ease-in .1s; 42 | } 43 | 44 | .hover-show { 45 | opacity: 0; 46 | } 47 | 48 | 49 | .hover-trigger { 50 | 51 | &:hover { 52 | z-index: 20; 53 | 54 | .hover-target-show { 55 | opacity: 1; 56 | transition: all ease-in .3s; 57 | } 58 | .hover-target-hide { 59 | opacity: 0; 60 | } 61 | .hover-show { 62 | opacity: 1; 63 | } 64 | 65 | } 66 | } 67 | 68 | .hover-pseudo-bg { 69 | position: relative; 70 | 71 | &:before { 72 | content: ""; 73 | display: block; 74 | background: $white; 75 | box-shadow: $box-shadow-lg; 76 | border-radius: $border-radius; 77 | width: 100%; 78 | min-height: 100%; 79 | height: var(--theme-listing-page-card-pseudo-hover-height); 80 | transform: scale3d(1.1, 1.1, 1.1); 81 | position: absolute; 82 | z-index: -1; 83 | transition: all ease-in .3s; 84 | opacity: 0; 85 | } 86 | 87 | &:hover { 88 | &:before { 89 | opacity: 1; 90 | } 91 | } 92 | } 93 | 94 | -------------------------------------------------------------------------------- /src/assets/scss/utilities/_overlay.scss: -------------------------------------------------------------------------------- 1 | // Overlay shadow dark 2 | .bg-overlay-gradient-dark { 3 | &:after { 4 | content: ""; 5 | position: absolute; 6 | top: 0; 7 | left: 0; 8 | right: 0; 9 | bottom: 0; 10 | width: 100%; 11 | height: 100%; 12 | background: linear-gradient(0deg, rgba(0,0,0, 0.56) 0%, rgba(0,0,0,0) 99%); 13 | z-index: 1; 14 | border-radius: $border-radius; 15 | transition: opacity ease-in-out 0.3s; 16 | } 17 | } 18 | 19 | .bg-overlay-dark { 20 | &:after { 21 | content: ""; 22 | position: absolute; 23 | top: 0; 24 | left: 0; 25 | right: 0; 26 | bottom: 0; 27 | width: 100%; 28 | height: 100%; 29 | background: rgba(0,0,0,.4); 30 | z-index: 1; 31 | border-radius: $border-radius; 32 | transition: opacity ease-in-out 0.3s; 33 | } 34 | } 35 | 36 | // Overlay shadow light 37 | .bg-overlay-gradient-light { 38 | &:after { 39 | content: ""; 40 | position: absolute; 41 | top: 0; 42 | left: 0; 43 | right: 0; 44 | bottom: 0; 45 | width: 100%; 46 | height: 100%; 47 | background: linear-gradient(0deg, rgba(255,255,255, 0.56) 0%, rgba(255,255,255,0) 99%); 48 | z-index: 1; 49 | border-radius: $border-radius; 50 | transition: opacity ease-in-out 0.3s; 51 | } 52 | } 53 | 54 | /* Left and Right gradient, white to transparent */ 55 | .bg-overlay-sides-white-to-transparent { 56 | position: relative; 57 | 58 | &:before { 59 | content: ""; 60 | display: block; 61 | position: absolute; 62 | width: 20%; 63 | height: 100%; 64 | left: 0; 65 | top: 0; 66 | bottom: 0; 67 | background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.93) 50%, rgba(255,255,255,0) 100%); 68 | z-index: 10; 69 | } 70 | &:after { 71 | content: ""; 72 | display: block; 73 | position: absolute; 74 | width: 20%; 75 | height: 100%; 76 | right: 0; 77 | top: 0; 78 | bottom: 0; 79 | background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.93) 50%, rgba(255,255,255,1) 100%); 80 | z-index: 10; 81 | } 82 | } 83 | 84 | /* overlay heights */ 85 | .bg-overlay-h-25 { 86 | &:after { 87 | height: 25%; 88 | top: auto; 89 | } 90 | } 91 | 92 | .bg-overlay-h-50 { 93 | &:after { 94 | height: 50%; 95 | top: auto; 96 | } 97 | } 98 | 99 | .bg-overlay-h-75 { 100 | &:after { 101 | height: 75%; 102 | top: auto; 103 | } 104 | } -------------------------------------------------------------------------------- /src/assets/scss/utilities/_shadow.scss: -------------------------------------------------------------------------------- 1 | //coloured shadows 2 | @each $color, $value in $theme-colors { 3 | .shadow-#{$color} { 4 | @include colored-shadow($value) 5 | } 6 | } -------------------------------------------------------------------------------- /src/assets/scss/utilities/_spacings.scss: -------------------------------------------------------------------------------- 1 | /* add top margin to every odd nth of type*/ 2 | .odd-child-mt-5:nth-of-type(odd) { 3 | margin-top: calc(#{$spacer} * 5); 4 | } 5 | /* add top margin to every even nth of type*/ 6 | .even-child-mt-5:nth-of-type(even) { 7 | margin-top: calc(#{$spacer} * 5); 8 | } -------------------------------------------------------------------------------- /src/assets/scss/utilities/_text.scss: -------------------------------------------------------------------------------- 1 | // Adjust display- font size for smaller screens 2 | @each $display, $font-size in $display-font-sizes-sm { 3 | @include media-breakpoint-down(md) { 4 | .display-md-#{$display} { 5 | @include font-size($font-size); 6 | font-weight: $display-font-weight; 7 | line-height: $display-line-height; 8 | } 9 | } 10 | } 11 | 12 | // XS font size 13 | .fs-xs { 14 | font-size: 11px !important; 15 | } 16 | 17 | 18 | /* text link cover full area. Used mostly with cards */ 19 | .link-cover { 20 | &:after { 21 | position: absolute; 22 | top: 0; 23 | right: 0; 24 | bottom: 0; 25 | left: 0; 26 | z-index: 30; 27 | pointer-events: auto; 28 | content: ""; 29 | } 30 | } 31 | 32 | .text-link-border { 33 | text-decoration: none; 34 | border-bottom: 1px solid $body-color; 35 | border-radius: 0; 36 | transition: all linear .2s; 37 | 38 | &:hover, 39 | &:focus, 40 | &:active { 41 | border-color: transparent; 42 | } 43 | } 44 | 45 | .title-small { 46 | letter-spacing: .20em; 47 | text-transform: uppercase; 48 | font-size: .85rem; 49 | font-weight: 500; 50 | display: block; 51 | } -------------------------------------------------------------------------------- /src/assets/scss/utilities/_transforms.scss: -------------------------------------------------------------------------------- 1 | /* setup base class. We use CSS vars to amend the X or Y vals */ 2 | .translate { 3 | transform: translate(var(--theme-translate-X), var(--theme-translate-Y)); 4 | } 5 | 6 | /* Generate multiple position options. 7 | * To keep CSS tidy, we use existing position SASS var instead of creating new one. 8 | */ 9 | @each $percentage, $value in $position-values { 10 | /* handle negative X values */ 11 | .translate-x-n#{$percentage} { 12 | --theme-translate-X: -#{$value}; 13 | } 14 | /* handle X values */ 15 | .translate-x-#{$percentage} { 16 | --theme-translate-X: #{$value}; 17 | } 18 | /* handle negative Y values */ 19 | .translate-y-n#{$percentage} { 20 | --theme-translate-Y: -#{$value}; 21 | } 22 | /* handle Y values */ 23 | .translate-y-#{$percentage} { 24 | --theme-translate-Y: #{$value}; 25 | } 26 | } 27 | 28 | .skew-5 { 29 | transform: skewY(5deg); 30 | } 31 | .skew-n5 { 32 | transform: skewY(-5deg); 33 | } 34 | .skew-10 { 35 | transform: skewY(10deg); 36 | } 37 | .skew-n10 { 38 | transform: skewY(-10deg); 39 | } 40 | -------------------------------------------------------------------------------- /src/assets/scss/utilities/_utilities.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * - Everything in "bootstrap-api-utilities" either adds to or amends the Bootstrap utilities using their API 3 | * - Everything else is normal CSS/SCSS 4 | */ 5 | /* Bootstrap API Utilities - only put code in here that uses Bootstrap's Util API */ 6 | @import 'bootstrap-api-utilities'; 7 | 8 | 9 | /* Everything in these files DOES NOT use Bootstrap's API */ 10 | 11 | /* Animations */ 12 | @import 'animations'; 13 | /* Hover effects */ 14 | @import 'hover-effects'; 15 | /* Backgrounds */ 16 | @import 'backgrounds'; 17 | /* Borders */ 18 | @import 'borders'; 19 | /* Overlays */ 20 | @import 'overlay'; 21 | /* Shadows */ 22 | @import 'shadow'; 23 | /* Spacings */ 24 | @import 'spacings'; 25 | /* Text */ 26 | @import 'text'; 27 | /* Transforms */ 28 | @import 'transforms'; 29 | -------------------------------------------------------------------------------- /src/assets/scss/vendors/_vendors.scss: -------------------------------------------------------------------------------- 1 | /* AOS */ 2 | @import 'aos/aos'; 3 | 4 | /* Choices */ 5 | @import 'choices/choices'; 6 | 7 | /* Remix Icons */ 8 | @import 'remixicon/remixicon'; 9 | 10 | /* No Ui Slider */ 11 | @import 'nouislider/nouislider'; 12 | 13 | /* Medium Zoom*/ 14 | @import 'medium-zoom/medium-zoom'; 15 | 16 | /* Simplebar */ 17 | @import 'simplebar/simplebar'; 18 | 19 | /* Swiper.js */ 20 | @import 'swiper/swiper'; -------------------------------------------------------------------------------- /src/assets/scss/vendors/aos/_aos.scss: -------------------------------------------------------------------------------- 1 | /* Card Reveal Animation. 2 | * Used together with Bootstrap card components to reveal content on scroll 3 | * Be sure to checkout components/cards for the card styling 4 | */ 5 | [data-aos="reveal-right"], [data-aos="reveal-left"] { 6 | &.aos-animate { 7 | .card-reveal-body, .card-reveal-img { 8 | &:after { 9 | opacity: 0; 10 | } 11 | } 12 | .card-reveal-text { 13 | opacity: 1; 14 | transform: translateY(0); 15 | } 16 | .card-reveal-img { 17 | img { 18 | transform: translateX(0); 19 | } 20 | } 21 | } 22 | } 23 | 24 | /* Default reveal animation (reveal right)*/ 25 | [data-aos="reveal-right"] { 26 | &.aos-animate { 27 | .card-reveal-body, .card-reveal-img { 28 | &:after { 29 | transform: translateX(100%); 30 | } 31 | } 32 | } 33 | } 34 | 35 | 36 | 37 | /* variant reveal, reveal left */ 38 | [data-aos="reveal-left"] { 39 | &.aos-animate { 40 | .card-reveal-body, .card-reveal-img { 41 | &:after { 42 | transform: translateX(-100%); 43 | } 44 | } 45 | } 46 | } -------------------------------------------------------------------------------- /src/assets/scss/vendors/choices/_choices.scss: -------------------------------------------------------------------------------- 1 | .choices__list.form-control { 2 | cursor: pointer; 3 | position: relative; 4 | 5 | &:after { 6 | font-family: var(--theme-font-icon); 7 | font-style: var(--theme-font-icon-style); 8 | content: "\EA50"; 9 | font-size: 1.5rem; 10 | display: block; 11 | position: absolute; 12 | top: 50%; 13 | transform: translateY(-50%); 14 | right: 0; 15 | } 16 | } 17 | 18 | .choices__list.dropdown-menu { 19 | width: 100%; 20 | padding: .5rem 0; 21 | } 22 | 23 | .choices__item.dropdown-item { 24 | background: transparent !important; 25 | color: $body-color; 26 | padding: .5rem 1rem; 27 | cursor: pointer; 28 | 29 | &:hover { 30 | background: $gray-50 !important; 31 | } 32 | } -------------------------------------------------------------------------------- /src/assets/scss/vendors/medium-zoom/_medium-zoom.scss: -------------------------------------------------------------------------------- 1 | /* image zoom css custom styles*/ 2 | .medium-zoom-image--opened { 3 | z-index: 999; 4 | } 5 | .medium-zoom-overlay { 6 | z-index: 99; 7 | } 8 | 9 | /* small quick fix for any images that are set to width: 100% pre zoom */ 10 | .w-100.medium-zoom-image.medium-zoom-image--opened { 11 | width: auto !important; 12 | } -------------------------------------------------------------------------------- /src/assets/scss/vendors/nouislider/nouislider.css: -------------------------------------------------------------------------------- 1 | .noUi-tooltip { 2 | background: rgba(0,0,0, 0.9); 3 | color: white; 4 | font-size: 12px; 5 | border: 0; 6 | border-radius: 4px; 7 | font-weight: 500; 8 | } 9 | 10 | .noUi-handle { 11 | width: 22px !important; 12 | height: 22px !important; 13 | border-radius: 100%; 14 | border: 0; 15 | background: white; 16 | box-shadow: 0 .25rem .5rem rgba(29, 48, 61, 0.184); 17 | margin-top: -5px; 18 | } 19 | 20 | .noUi-handle:before, .noUi-handle:after { 21 | display: none; 22 | } 23 | 24 | .noUi-target { 25 | border: 0; 26 | box-shadow: none; 27 | height: 4px; 28 | background: #f7f8f9; 29 | } 30 | 31 | .noUi-connect { 32 | background: #1c212c; 33 | } 34 | 35 | .noUi-marker-large { 36 | background: #f7f8f9; 37 | margin-top: 5px; 38 | } 39 | 40 | .noUi-value { 41 | font-size: 12px; 42 | font-weight: 500; 43 | color: #a0a0a2; 44 | margin-top: 10px; 45 | } -------------------------------------------------------------------------------- /src/assets/scss/vendors/simplebar/simplebar.css: -------------------------------------------------------------------------------- 1 | .simplebar-content { 2 | padding-right: 1.25rem !important; 3 | } 4 | .simplebar-track { 5 | background: #f7f8f9; 6 | border-radius: 4px; 7 | } 8 | 9 | .simplebar-track.simplebar-vertical { 10 | width: 7px; 11 | } 12 | .simplebar-scrollbar { 13 | opacity: .5; 14 | } 15 | .simplebar-wrapper { 16 | height: 150px; 17 | } -------------------------------------------------------------------------------- /src/assets/svgs/apple-pay.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/assets/svgs/bitcoin.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/assets/svgs/ideal.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/assets/svgs/ripple.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/assets/svgs/visa.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/assets/svgs/vpay.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /src/data/cart-items.json: -------------------------------------------------------------------------------- 1 | { 2 | "entries": [ 3 | { 4 | "title": "Mens StormBreaker Jacket", 5 | "price": "1129.99", 6 | "line-total": "1129.99", 7 | "qty": "1", 8 | "currency": "$", 9 | "options": "Mens / Blue / Medium", 10 | "img": "{{webRoot}}/assets/images/products/product-1.jpg" 11 | }, 12 | { 13 | "title": "North Face Jacket", 14 | "price": "499.99", 15 | "line-total": "999.98", 16 | "qty": "2", 17 | "currency": "$", 18 | "options": "Mens / Blue / Large", 19 | "img": "{{webRoot}}/assets/images/products/product-2.jpg" 20 | }, 21 | { 22 | "title": "Womens Adidas Hoodie", 23 | "price": "59.99", 24 | "line-total": "59.99", 25 | "qty": "1", 26 | "currency": "$", 27 | "options": "Womens / Red / Medium", 28 | "img": "{{webRoot}}/assets/images/products/product-4.jpg" 29 | } 30 | ] 31 | } -------------------------------------------------------------------------------- /src/data/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "defaultPageTitle": "Alpine | Bootstrap 5 Ecommerce HTML Template", 3 | "templateName": "Alpine", 4 | "classes": { 5 | "body": "", 6 | "navbar": "", 7 | "content": "", 8 | "footer": "" 9 | }, 10 | "partials": { 11 | "head": "head/head", 12 | "navbar": "navbar/navbar", 13 | "footer": "footer/footer" 14 | }, 15 | "defaultImgAlt": "Bootstrap 5 Template by Pixel Rocket", 16 | "helpDocsURL": "", 17 | "demoURL": "" 18 | } 19 | -------------------------------------------------------------------------------- /src/data/options-size-one.json: -------------------------------------------------------------------------------- 1 | { 2 | "entries": [ 3 | { 4 | "label-bottom": "Small", 5 | "value": "small" 6 | }, 7 | { 8 | "label-bottom": "Medium", 9 | "value": "medium", 10 | "disabled": true 11 | }, 12 | { 13 | "label-bottom": "Large", 14 | "value": "large" 15 | }, 16 | { 17 | "label-bottom": "Extra Large", 18 | "value": "extralarge" 19 | } 20 | ] 21 | } -------------------------------------------------------------------------------- /src/data/options-size-two.json: -------------------------------------------------------------------------------- 1 | { 2 | "entries": [ 3 | { 4 | "label-top": "UK", 5 | "label-bottom": "6", 6 | "value": "6" 7 | }, 8 | { 9 | "label-top": "UK", 10 | "label-bottom": "6.5", 11 | "value": "6.5", 12 | "disabled": true 13 | }, 14 | { 15 | "label-top": "UK", 16 | "label-bottom": "7", 17 | "value": "7" 18 | }, 19 | { 20 | "label-top": "UK", 21 | "label-bottom": "7.5", 22 | "value": "7.5" 23 | }, 24 | { 25 | "label-top": "UK", 26 | "label-bottom": "8", 27 | "disabled": true, 28 | "value": "8" 29 | }, 30 | { 31 | "label-top": "UK", 32 | "label-bottom": "8.5", 33 | "value": "8.5" 34 | }, 35 | { 36 | "label-top": "UK", 37 | "label-bottom": "9", 38 | "value": "9" 39 | }, 40 | { 41 | "label-top": "UK", 42 | "label-bottom": "9.5", 43 | "value": "9.5" 44 | }, 45 | { 46 | "label-top": "UK", 47 | "label-bottom": "10", 48 | "value": "10.5" 49 | }, 50 | { 51 | "label-top": "UK", 52 | "label-bottom": "11", 53 | "value": "11" 54 | }, 55 | { 56 | "label-top": "UK", 57 | "label-bottom": "11.5", 58 | "value": "11.5" 59 | }, 60 | { 61 | "label-top": "UK", 62 | "label-bottom": "12", 63 | "value": "12" 64 | }, 65 | { 66 | "label-top": "UK", 67 | "label-bottom": "12.5", 68 | "value": "12.5" 69 | }, 70 | { 71 | "label-top": "UK", 72 | "label-bottom": "13", 73 | "value": "13.5" 74 | }, 75 | { 76 | "label-top": "UK", 77 | "label-bottom": "14", 78 | "value": "14" 79 | } 80 | ] 81 | } -------------------------------------------------------------------------------- /src/data/slideshow-brands-one.json: -------------------------------------------------------------------------------- 1 | { 2 | "entries": [{ 3 | "img": "{{webRoot}}/assets/images/logos/logo-1.svg", 4 | "name": "Katmandu" 5 | }, 6 | { 7 | "img": "{{webRoot}}/assets/images/logos/logo-2.svg", 8 | "name": "Billabong" 9 | }, 10 | { 11 | "img": "{{webRoot}}/assets/images/logos/logo-3.svg", 12 | "name": "Timberland" 13 | }, 14 | { 15 | "img": "{{webRoot}}/assets/images/logos/logo-4.svg", 16 | "name": "Patagonia" 17 | }, 18 | { 19 | "img": "{{webRoot}}/assets/images/logos/logo-5.svg", 20 | "name": "The North Face" 21 | }, 22 | { 23 | "img": "{{webRoot}}/assets/images/logos/logo-6.svg", 24 | "name": "Champion" 25 | }, 26 | { 27 | "img": "{{webRoot}}/assets/images/logos/logo-7.svg", 28 | "name": "Salomon" 29 | }, 30 | { 31 | "img": "{{webRoot}}/assets/images/logos/logo-8.svg", 32 | "name": "Burton" 33 | }, 34 | { 35 | "img": "{{webRoot}}/assets/images/logos/logo-9.svg", 36 | "name": "Oakley" 37 | } 38 | ] 39 | } -------------------------------------------------------------------------------- /src/html/cart.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {{> (config config.partials.head) title=config.defaultPageTitle }} 6 | 7 | 8 | 9 | 10 | {{> (config config.partials.navbar) 11 | configClassList=config.classes.navbar 12 | classList="" }} 13 | 14 | 15 | 16 |
17 | 18 | 19 |

Your Cart

20 | 21 |
22 | 23 |
24 |
25 | {{> cart/cart-items }} 26 |
27 |
28 | 29 |
30 | {{> cart/cart-summary }} 31 |
32 | 33 | 34 | 35 |
36 | 37 | 38 |
39 | 40 | 41 | 42 | {{> (config config.partials.footer) 43 | configClassList=config.classes.footer 44 | classList="" 45 | }} 46 | 47 | 48 | {{> offcanvas/offcanvas }} 49 | 50 | 51 | {{> search/search-overlay }} 52 | 53 | 54 | {{> footer/scripts }} 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /src/html/checkout.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {{> (config config.partials.head) title=config.defaultPageTitle }} 6 | 7 | 8 | 9 | 10 | {{> (config config.partials.navbar) 11 | configClassList=config.classes.navbar 12 | classList="" }} 13 | 14 | 15 | 16 |
17 | 18 | 19 |

Checkout Securely

20 |

Please fill in the details below to complete your order. Already registered? 21 | Login here.

22 | 23 |
24 | 25 |
26 | {{> checkout/checkout-contact }} 27 | {{> checkout/checkout-shipping }} 28 | {{> checkout/checkout-billing }} 29 | {{> checkout/checkout-shipping-method }} 30 | {{> checkout/checkout-payment }} 31 |
32 | 33 | 34 | 35 |
36 | {{> checkout/checkout-summary }} 37 |
38 | 39 |
40 | 41 | 42 |
43 | 44 | 45 | 46 | {{> (config config.partials.footer) 47 | configClassList=config.classes.footer 48 | classList="" 49 | }} 50 | 51 | 52 | {{> offcanvas/offcanvas }} 53 | 54 | 55 | {{> search/search-overlay }} 56 | 57 | 58 | {{> footer/scripts }} 59 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /src/html/product.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {{> (config config.partials.head) title=config.defaultPageTitle }} 6 | 7 | 8 | 9 | 10 | {{> (config config.partials.navbar) 11 | configClassList=config.classes.navbar 12 | classList="" }} 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 |
21 | 22 | 23 | {{> breadcrumbs/breadcrumbs-one }} 24 | 25 | 26 |
27 | 28 | 29 |
30 | {{> gallery/images-slideshow-vertical }} 31 |
32 | 33 | 34 | 35 |
36 | {{> info/info-one }} 37 |
38 | 39 |
40 |
41 | 42 | 43 |
44 | 45 | 46 |
47 |
48 | {{> tabs/tabs-one }} 49 |
50 |
51 | 52 | 53 |
54 | 55 | 56 |
57 |

You May Also Like

58 | {{#if (config category-products) }} 59 | {{> 60 | swiper/swiper-product-carousel-scrollbar 61 | entries=category-products.entries 62 | }} 63 | {{/if}} 64 |
65 | 66 | 67 | 68 | 69 |
70 | 71 | 72 | 73 | {{> (config config.partials.footer) 74 | configClassList=config.classes.footer 75 | classList="" 76 | }} 77 | 78 | 79 | {{> offcanvas/offcanvas }} 80 | 81 | 82 | {{> search/search-overlay }} 83 | 84 | 85 | {{> footer/scripts }} 86 | 87 | 88 | 89 | -------------------------------------------------------------------------------- /src/partials/banners/banner-sale-extended.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | {{> svg/svg-divider-top-lr }} 4 |
5 | 6 | 7 |
8 |
9 |
10 |
12 |

Sale 13 | Extended

14 |
15 |
17 | Shop 19 | Menswear 20 | Shop 22 | Womenswear 23 | Shop 25 | Kidswear 26 | Shop 28 | Accessories 29 |
30 |
32 |

Discount applied to products at checkout.

33 | Exclusions apply. Learn more 36 |
37 |
38 |
39 |
40 | 41 | 42 |
43 | {{> svg/svg-divider-bottom-rl colorClass="text-white" positionClass="bottom-0 start-0 end-0" }} 44 |
45 | -------------------------------------------------------------------------------- /src/partials/breadcrumbs/breadcrumbs-one.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/partials/breadcrumbs/breadcrumbs-two.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/partials/cart/cart-items.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | {{#each cart-items.entries }} 12 | 13 | 14 | 19 | 20 | 21 | 22 | 30 | 31 | 32 | 33 | 38 | 39 | 40 | 41 | 47 | 48 | 49 | 50 | {{/each}} 51 | 52 |
DetailsQty
15 | 16 | {{config.defaultImgAlt}} 17 | 18 | 23 |
24 |
25 | {{ title }} 26 |
27 | {{ options }} 28 |
29 | 		34 |
35 | {{ qty }} @ {{ currency }}{{ price }} 36 |
37 | 		42 |
43 | 44 |

{{ currency }}{{ line-total }}

45 |
46 |
53 | -------------------------------------------------------------------------------- /src/partials/cart/cart-summary.html: -------------------------------------------------------------------------------- 1 |
2 |

Order Summary

3 |
4 |
5 |

Subtotal

6 |

$422.99

7 |
8 |
9 |

Shipping

10 | Will be set at checkout 11 |
12 |
13 |
14 |
15 |
16 |

Grand Total

17 | Inc $45.89 sales tax 18 |
19 |

$422.99

20 |
21 |
22 | 23 | 24 | 29 |
30 |
31 |
32 | 33 | 36 |
37 |
38 |
39 | 40 | 41 | 42 | Proceed to checkout 44 | Checkout with PayPal 46 | 47 |
48 | 49 | 50 | 56 | -------------------------------------------------------------------------------- /src/partials/category/filters/filter-checkbox-two.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 |
-------------------------------------------------------------------------------- /src/partials/category/filters/filter-checkbox.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 6 |
-------------------------------------------------------------------------------- /src/partials/category/filters/filter-collapse.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 |
5 |

Price

6 | {{> filters/filter-price }} 7 |
8 | 9 | 10 | 11 | 12 |
13 |

Sizes

14 |
15 |
16 | {{#each filters-one.sizes }} 17 | {{> filters/filter-checkbox-two this type="sizes" }} 18 | {{/each}} 19 |
20 |
21 |
22 | 23 | 24 | 25 |
26 |

Colour

27 |
28 |
29 | {{#each filters-one.colours }} 30 | {{> filters/filter-colour this type="colours" }} 31 | {{/each}} 32 |
33 |
34 |
35 | 36 |
-------------------------------------------------------------------------------- /src/partials/category/filters/filter-colour.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 |
-------------------------------------------------------------------------------- /src/partials/category/filters/filter-price.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | $ 5 | 6 |
7 |
8 | $ 9 | 10 |
11 |
-------------------------------------------------------------------------------- /src/partials/category/filters/filter-text.html: -------------------------------------------------------------------------------- 1 |
  • {{ label }}{{#if count}} ({{ count }}){{/if}} 4 |
    • -------------------------------------------------------------------------------- /src/partials/category/listing-cards/listing-card.html: -------------------------------------------------------------------------------- 1 | 2 |
    3 | {{#if discount-percentage}} 4 | {{ discount-percentage }} 5 | {{/if}} 6 |
    7 | 8 | {{config.defaultImgAlt}} 9 | 10 | {{#if img-hover}} 11 | 12 | {{config.defaultImgAlt}} 13 | 14 | {{/if}} 15 |
    16 | Quick Add 17 |
    18 | 19 | 20 | 21 |
    22 |
    23 |
    24 |
    25 |
    26 | {{> reviews/review-stars-small width=review-width }} {{ review-count }} 27 |
    28 | {{ title }} 30 | {{# if sale-price}} 31 |
    32 |

    {{ currency }}{{ sale-price }}

    33 |

    {{ currency }}{{ price }}

    34 |
    35 | {{ else }} 36 |

    {{ currency }}{{ price }}

    37 | {{/if}} 38 |
    39 |
    40 | 41 | -------------------------------------------------------------------------------- /src/partials/category/pagination/pagination.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/partials/category/toolbars/toolbar-top.html: -------------------------------------------------------------------------------- 1 |
    2 |
    3 | Filtered by: 4 | 8 | Clear 10 | All 11 |
    12 |
    13 | 14 | 19 | 20 |
    21 | 24 | 32 |
    33 |
    34 |
    -------------------------------------------------------------------------------- /src/partials/checkout/checkout-billing.html: -------------------------------------------------------------------------------- 1 | 2 |
    3 |
    Billing Address
    4 |
    5 | 6 |
    7 |
    8 | 9 | 10 |
    11 |
    12 | 13 | 14 |
    15 |
    16 | 17 | 18 |
    19 |
    20 | 21 | 22 |
    23 |
    24 | 25 | 26 |
    27 |
    28 | 29 | 30 |
    31 |
    32 | 33 | 37 |
    38 |
    39 | 40 | 41 |
    42 |
    43 | 44 | 48 |
    49 |
    50 | 51 | 52 |
    53 |
    54 | 55 | 56 |
    57 |
    58 |
    59 |
    60 | -------------------------------------------------------------------------------- /src/partials/checkout/checkout-contact.html: -------------------------------------------------------------------------------- 1 | 2 |
    3 |
    Contact Information
    4 |
    5 | 6 | 7 |
    8 |
    9 | 10 | 11 |
    12 | 13 | 14 |
    15 | 16 | 17 |
    18 |
    19 |
    20 |
    21 | -------------------------------------------------------------------------------- /src/partials/checkout/checkout-shipping-method.html: -------------------------------------------------------------------------------- 1 | 2 |
    3 |
    Shipping Method
    4 | 5 | 6 |
    7 | 8 | 17 |
    18 | 19 | 20 |
    21 | 22 | 31 |
    32 | 33 | 34 |
    35 | 36 | 45 |
    46 |
    47 | -------------------------------------------------------------------------------- /src/partials/checkout/checkout-shipping.html: -------------------------------------------------------------------------------- 1 | 2 |
    3 |
    Shipping Address
    4 |
    5 | 6 |
    7 |
    8 | 9 | 10 |
    11 |
    12 | 13 | 14 |
    15 |
    16 | 17 | 18 |
    19 |
    20 | 21 | 22 |
    23 |
    24 | 25 | 26 |
    27 |
    28 | 29 | 30 |
    31 |
    32 | 33 | 37 |
    38 |
    39 | 40 | 41 |
    42 |
    43 | 44 | 48 |
    49 |
    50 | 51 | 52 |
    53 |
    54 | 55 | 56 |
    57 |
    58 |
    59 | 60 |
    61 | 62 |
    63 | 64 | 65 |
    66 |
    67 |
    68 | -------------------------------------------------------------------------------- /src/partials/checkout/checkout-summary.html: -------------------------------------------------------------------------------- 1 |
    2 |
    3 | 4 | {{# each cart-items.entries}} 5 |
    6 |
    7 |
    8 | {{ qty }} 9 | {{config.defaultImgAlt}} 10 |
    11 |
    12 |

    {{ title }}

    13 | {{ options }} 14 |
    15 |
    16 |
    17 | {{ currency }}{{ line-total }} 18 |
    19 |
    20 | {{/each}} 21 | 22 |
    23 |
    24 |
    25 |

    Subtotal

    26 |

    $422.99

    27 |
    28 |
    29 |

    Shipping

    30 |

    $8.95

    31 |
    32 |
    33 |
    34 |
    35 |
    36 |

    Grand Total

    37 | Inc $45.89 sales tax 38 |
    39 |

    $422.99

    40 |
    41 |
    42 |
    43 |
    44 | 45 | 46 |
    47 |
    48 | 49 |
    50 | 51 | 52 |
    53 | Complete Order 54 |
    -------------------------------------------------------------------------------- /src/partials/footer/scripts.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/partials/header/head/head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 40 | 41 | 42 | {{ title }} 43 | 44 | -------------------------------------------------------------------------------- /src/partials/info-boxes/info-boxes.html: -------------------------------------------------------------------------------- 1 |
    2 | 3 | 4 |
    5 |
    6 | 7 |
    8 |

    Customer Services

    9 | Click here to chat with our support team 10 |
    11 |
    12 |
    13 | 14 | 15 | 16 |
    17 |
    18 | 19 |
    20 |

    Free Delivery

    21 | Free standard delivery on all orders over $100 22 |
    23 |
    24 |
    25 | 26 | 27 | 28 |
    29 |
    30 | 31 |
    32 |

    Returns

    33 | 30 day money-back returns if you change your mind 34 |
    35 |
    36 |
    37 | 38 | 39 |
    -------------------------------------------------------------------------------- /src/partials/instagram/instagram-photos.html: -------------------------------------------------------------------------------- 1 |
    2 |
    3 | 4 | {{config.defaultImgAlt}} 5 | 6 |
    7 |
    8 |
    9 |
    10 | 11 | {{config.defaultImgAlt}} 12 | 13 |
    14 |
    15 | 16 | {{config.defaultImgAlt}} 17 | 18 |
    19 |
    20 | 21 | {{config.defaultImgAlt}} 22 | 23 |
    24 |
    25 | 26 | {{config.defaultImgAlt}} 27 | 28 |
    29 |
    30 | 31 | {{config.defaultImgAlt}} 32 | 33 |
    34 |
    35 | 36 | {{config.defaultImgAlt}} 37 | 38 |
    39 |
    40 | 41 | {{config.defaultImgAlt}} 42 | 43 |
    44 |
    45 | 46 | {{config.defaultImgAlt}} 47 | 48 |
    49 |
    50 |
    51 |
    52 | -------------------------------------------------------------------------------- /src/partials/logo/logo-full.html: -------------------------------------------------------------------------------- 1 | 2 |
    3 |
    4 | 5 |
    Alpine 6 |
    7 | 8 | 9 | -------------------------------------------------------------------------------- /src/partials/offcanvas/offcanvas-review.html: -------------------------------------------------------------------------------- 1 |
    2 |
    3 |
    Leave A Review
    4 | 5 |
    6 |
    7 | 8 |
    9 |
    10 | 11 | 12 |
    13 |
    14 | 15 | 16 |
    17 |
    18 | 19 | 20 |
    21 |
    22 | 23 | 25 |
    26 | 27 |
    28 | 29 |
    30 |
    -------------------------------------------------------------------------------- /src/partials/offcanvas/offcanvas.html: -------------------------------------------------------------------------------- 1 | 2 | {{> offcanvas/offcanvas-cart }} 3 | 4 | 5 | {{> offcanvas/offcanvas-filters }} 6 | 7 | 8 | {{> offcanvas/offcanvas-review }} -------------------------------------------------------------------------------- /src/partials/product/gallery/images-slideshow-vertical.html: -------------------------------------------------------------------------------- 1 |
    2 |
    3 |
    4 |
    5 | 6 | {{config.defaultImgAlt}} 7 | 8 |
    9 |
    10 | 11 | {{config.defaultImgAlt}} 12 | 13 |
    14 |
    15 | 16 | {{config.defaultImgAlt}} 17 | 18 |
    19 |
    20 |
    21 |
    22 |
    23 |
    24 | 25 | {{config.defaultImgAlt}} 26 | 27 |
    28 |
    29 | 30 | {{config.defaultImgAlt}} 31 | 32 |
    33 |
    34 | 35 | {{config.defaultImgAlt}} 36 | 37 |
    38 |
    39 |
    40 |
    41 | -------------------------------------------------------------------------------- /src/partials/product/options/option-checkbox.html: -------------------------------------------------------------------------------- 1 |
    2 | 7 | 11 |
    -------------------------------------------------------------------------------- /src/partials/product/options/option-radio.html: -------------------------------------------------------------------------------- 1 |
    2 | 10 | 14 |
    -------------------------------------------------------------------------------- /src/partials/product/socials/share.html: -------------------------------------------------------------------------------- 1 |
    2 |

    Share

    3 | 9 |
    -------------------------------------------------------------------------------- /src/partials/reviews/review-stars-medium.html: -------------------------------------------------------------------------------- 1 | 2 |
    3 |
    4 | 5 | 6 | 7 | 8 | 9 |
    10 |
    11 | 12 | 13 | 14 | 15 | 16 |
    17 |
    -------------------------------------------------------------------------------- /src/partials/reviews/review-stars-small.html: -------------------------------------------------------------------------------- 1 | 2 |
    3 |
    4 | 5 | 6 | 7 | 8 | 9 |
    10 |
    11 | 12 | 13 | 14 | 15 | 16 |
    17 |
    -------------------------------------------------------------------------------- /src/partials/reviews/reviews-company.html: -------------------------------------------------------------------------------- 1 |
    2 |
    3 |
    4 |

    Amazing Service!

    5 |

    I have shopped with them for a few years now. Very easy to select items, items always as 6 | described. Never had to return any item. Good value.

    7 | John Doe, London 8 | {{> reviews/review-stars-small width="75%" }} 9 |
    10 |
    11 |
    12 |
    13 |

    Great Prices

    14 |

    Always find these guys competitive,and with a huge range of products,coupled with great 15 | marketing,its difficult not to buy something.

    16 | Sally Smith, Dublin 17 | {{> reviews/review-stars-small width="75%" }} 18 |
    19 |
    20 |
    21 |
    22 |

    Fantastic Website

    23 |

    My package was missing an item but customer services resolved it immediately and i got 24 | another delivery quite promptly. 25 | Also the product was absolutely lovely

    26 | John Patrick, London 27 | {{> reviews/review-stars-small width="75%" }} 28 |
    29 |
    30 |
    31 |
    32 |

    See what others have said

    33 |
    34 | 4.85 / 5 35 | {{> reviews/review-stars-medium colour="text-dark" width="88%" }} 36 |
    37 | Read 4,215 more reviews 38 |
    -------------------------------------------------------------------------------- /src/partials/search/search-overlay.html: -------------------------------------------------------------------------------- 1 |
    2 |
    3 |
    4 |
    5 |

    What are you looking for?

    6 | 7 |
    8 |
    9 | 10 |
    11 |
    12 |

    2 results found for "Waterproof Jacket"

    13 |
    14 |
    15 | {{> 16 | listing-cards/listing-card 17 | img="{{webRoot}}/assets/images/products/product-1.jpg" 18 | title="Mens Pennie II Waterproof Jacket" 19 | currency="$" 20 | price="325.66" 21 | review-width="80%" 22 | review-count="4.2 (123)" 23 | }} 24 |
    25 |
    26 | {{> 27 | listing-cards/listing-card 28 | img="{{webRoot}}/assets/images/products/product-2.jpg" 29 | title="Mens Storm Waterproof Jacket" 30 | currency="$" 31 | price="499.99" 32 | review-width="70%" 33 | review-count="4.5 (1289)" 34 | }} 35 |
    36 |
    37 |
    38 | 39 |
    40 |

    Didn't find what you are looking for? Send us a message.

    41 |
    42 |
    43 |
    44 |
    -------------------------------------------------------------------------------- /src/partials/svg/blobs/svg-blob-four.html: -------------------------------------------------------------------------------- 1 | 15 | -------------------------------------------------------------------------------- /src/partials/svg/blobs/svg-blob-one.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/partials/svg/blobs/svg-blob-three.html: -------------------------------------------------------------------------------- 1 | 2 | 16 | 17 | -------------------------------------------------------------------------------- /src/partials/svg/blobs/svg-blob-two.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/partials/svg/svg-clip-path-one.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/partials/svg/svg-divider-bottom-lr.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/partials/svg/svg-divider-bottom-rl.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/partials/svg/svg-divider-side-left-bt.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/partials/svg/svg-divider-side-left-tb.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/partials/svg/svg-divider-side-right-bt.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/partials/svg/svg-divider-side-right-tb.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/partials/svg/svg-divider-top-lr.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/partials/svg/svg-divider-top-rl.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/partials/swiper/swiper-hero-slideshow.html: -------------------------------------------------------------------------------- 1 | 2 |
    13 |
    14 |
    15 |
    16 |
    17 |
    18 |
    19 |
    20 |
    21 |
    22 |
    23 |
    24 |
    25 |
    26 |
    27 | 28 |
    29 | -------------------------------------------------------------------------------- /src/partials/swiper/swiper-linked-carousel-small.html: -------------------------------------------------------------------------------- 1 |
    2 | 3 | 4 |
    5 |
    6 |
    7 | 8 |
    9 | 10 | 11 |
    12 | 13 | {{> 14 | listing-cards/listing-card 15 | img="{{webRoot}}/assets/images/products/product-12.jpg" 16 | title="Mens Outdoors T-Shirt" 17 | options="Availble in 4 colours, 7 sizes" 18 | currency="$" 19 | price="1699.87" 20 | review-width="80%" 21 | review-count="4.7 (1669)" 22 | }} 23 | 24 |
    25 | 26 | 27 | 28 |
    29 | 30 | {{> 31 | listing-cards/listing-card 32 | img="{{webRoot}}/assets/images/products/product-1.jpg" 33 | title="Mens Flyroam Sneakers" 34 | options="Availble in 4 colours, 7 sizes" 35 | currency="$" 36 | price="1699.87" 37 | review-width="80%" 38 | review-count="4.7 (1669)" 39 | }} 40 | 41 |
    42 | 43 | 44 | 45 |
    46 | 47 | {{> 48 | listing-cards/listing-card 49 | img="{{webRoot}}/assets/images/products/product-13.jpg" 50 | title="Mens Flyroam Sneakers" 51 | options="Availble in 4 colours, 7 sizes" 52 | currency="$" 53 | price="1699.87" 54 | review-width="80%" 55 | review-count="4.7 (1669)" 56 | }} 57 | 58 |
    59 | 60 | 61 |
    62 |
    -------------------------------------------------------------------------------- /src/partials/swiper/swiper-product-carousel-one.html: -------------------------------------------------------------------------------- 1 | 2 |
    26 |
    27 | {{#each entries}} 28 |
    29 | {{> listing-cards/listing-card this }} 30 |
    31 | {{/each}} 32 |
    33 | 34 | 35 | See All 36 | 37 |
    38 |
    39 | 40 | 41 |
    42 |
    43 | 44 |
    45 | -------------------------------------------------------------------------------- /src/partials/swiper/swiper-product-carousel-scrollbar.html: -------------------------------------------------------------------------------- 1 | 2 |
    32 |
    33 | {{#each entries}} 34 |
    35 | {{> listing-cards/listing-card this }} 36 |
    37 | {{/each}} 38 |
    39 | 40 | 41 | See All 42 | 43 |
    44 |
    45 | 46 | 47 |
    48 |
    49 | 50 | 51 |
    52 | 53 |
    54 | -------------------------------------------------------------------------------- /src/partials/swiper/swiper-related-one.html: -------------------------------------------------------------------------------- 1 | 2 |
    30 |
    31 | {{#if (config category-four) }} 32 | {{#each shoes.entries}} 33 |
    34 | {{> listing-cards/listing-card-five this }} 35 |
    36 | {{/each}} 37 | {{/if}} 38 |
    39 | 40 | 41 | 42 |
    43 | 44 | 45 |
    46 |
    47 | 48 | 49 |
    50 | --------------------------------------------------------------------------------