From b78d7864c35aad894ee64225ea3b04bffde7381e Mon Sep 17 00:00:00 2001 From: Code Date: Thu, 16 Jan 2025 06:13:29 +0100 Subject: [PATCH] template --- .astro/content-assets.mjs | 1 + .astro/content-modules.mjs | 1 + .astro/content.d.ts | 155 ++ .astro/types.d.ts | 2 + .github/workflows/deploy.yml | 39 + .gitignore | 8 +- .npmignore | 4 - CHANGELOG.MD | 10 + LICENSE | 9 - README.md | 95 +- assets/js/astro-ecommerce.js | 426 ++++ assets/scss/astro-ecommerce.scss | 30 + assets/scss/astro-ecommerce/_alert.scss | 17 + assets/scss/astro-ecommerce/_avatars.scss | 132 ++ assets/scss/astro-ecommerce/_badge.scss | 19 + assets/scss/astro-ecommerce/_breadcrumbs.scss | 48 + .../scss/astro-ecommerce/_button-group.scss | 12 + assets/scss/astro-ecommerce/_buttons.scss | 236 +++ assets/scss/astro-ecommerce/_cards.scss | 64 + .../scss/astro-ecommerce/_dark-version.scss | 309 +++ assets/scss/astro-ecommerce/_dropdown.scss | 333 ++++ assets/scss/astro-ecommerce/_dropup.scss | 41 + .../scss/astro-ecommerce/_fixed-plugin.scss | 60 + assets/scss/astro-ecommerce/_footer.scss | 14 + assets/scss/astro-ecommerce/_forms.scss | 52 + assets/scss/astro-ecommerce/_gradients.scss | 18 + assets/scss/astro-ecommerce/_header.scss | 25 + assets/scss/astro-ecommerce/_info-areas.scss | 178 ++ assets/scss/astro-ecommerce/_misc.scss | 387 ++++ assets/scss/astro-ecommerce/_nav.scss | 138 ++ .../astro-ecommerce/_navbar-vertical.scss | 794 ++++++++ assets/scss/astro-ecommerce/_navbar.scss | 216 ++ assets/scss/astro-ecommerce/_pagination.scss | 65 + assets/scss/astro-ecommerce/_popovers.scss | 10 + assets/scss/astro-ecommerce/_progress.scss | 15 + assets/scss/astro-ecommerce/_rtl.scss | 145 ++ .../scss/astro-ecommerce/_social-buttons.scss | 42 + assets/scss/astro-ecommerce/_tables.scss | 37 + assets/scss/astro-ecommerce/_tilt.scss | 11 + assets/scss/astro-ecommerce/_timeline.scss | 131 ++ assets/scss/astro-ecommerce/_tooltips.scss | 9 + assets/scss/astro-ecommerce/_typography.scss | 316 +++ .../astro-ecommerce/_utilities-extend.scss | 11 + assets/scss/astro-ecommerce/_utilities.scss | 833 ++++++++ assets/scss/astro-ecommerce/_variables.scss | 1757 +++++++++++++++++ .../astro-ecommerce/bootstrap/_accordion.scss | 158 ++ .../astro-ecommerce/bootstrap/_alert.scss | 68 + .../astro-ecommerce/bootstrap/_badge.scss | 38 + .../bootstrap/_breadcrumb.scss | 40 + .../bootstrap/_button-group.scss | 142 ++ .../astro-ecommerce/bootstrap/_buttons.scss | 207 ++ .../scss/astro-ecommerce/bootstrap/_card.scss | 239 +++ .../astro-ecommerce/bootstrap/_carousel.scss | 244 +++ .../astro-ecommerce/bootstrap/_close.scss | 63 + .../bootstrap/_containers.scss | 41 + .../astro-ecommerce/bootstrap/_dropdown.scss | 250 +++ .../astro-ecommerce/bootstrap/_forms.scss | 9 + .../astro-ecommerce/bootstrap/_functions.scss | 302 +++ .../scss/astro-ecommerce/bootstrap/_grid.scss | 39 + .../astro-ecommerce/bootstrap/_helpers.scss | 12 + .../astro-ecommerce/bootstrap/_images.scss | 42 + .../bootstrap/_list-group.scss | 197 ++ .../scss/astro-ecommerce/bootstrap/_maps.scss | 174 ++ .../astro-ecommerce/bootstrap/_mixins.scss | 42 + .../astro-ecommerce/bootstrap/_modal.scss | 237 +++ .../scss/astro-ecommerce/bootstrap/_nav.scss | 209 ++ .../astro-ecommerce/bootstrap/_navbar.scss | 289 +++ .../astro-ecommerce/bootstrap/_offcanvas.scss | 146 ++ .../bootstrap/_pagination.scss | 109 + .../bootstrap/_placeholders.scss | 51 + .../astro-ecommerce/bootstrap/_popover.scss | 196 ++ .../astro-ecommerce/bootstrap/_progress.scss | 68 + .../astro-ecommerce/bootstrap/_reboot.scss | 610 ++++++ .../scss/astro-ecommerce/bootstrap/_root.scss | 184 ++ .../astro-ecommerce/bootstrap/_spinners.scss | 85 + .../astro-ecommerce/bootstrap/_tables.scss | 171 ++ .../astro-ecommerce/bootstrap/_toasts.scss | 73 + .../astro-ecommerce/bootstrap/_tooltip.scss | 119 ++ .../bootstrap/_transitions.scss | 27 + .../scss/astro-ecommerce/bootstrap/_type.scss | 106 + .../astro-ecommerce/bootstrap/_utilities.scss | 806 ++++++++ .../bootstrap/_variables-dark.scss | 85 + .../astro-ecommerce/bootstrap/_variables.scss | 1743 ++++++++++++++++ .../bootstrap/bootstrap-grid.scss | 62 + .../bootstrap/bootstrap-reboot.scss | 10 + .../bootstrap/bootstrap-utilities.scss | 19 + .../astro-ecommerce/bootstrap/bootstrap.scss | 52 + .../bootstrap/forms/_floating-labels.scss | 94 + .../bootstrap/forms/_form-check.scss | 188 ++ .../bootstrap/forms/_form-control.scss | 214 ++ .../bootstrap/forms/_form-range.scss | 91 + .../bootstrap/forms/_form-select.scss | 80 + .../bootstrap/forms/_form-text.scss | 11 + .../bootstrap/forms/_input-group.scss | 132 ++ .../bootstrap/forms/_labels.scss | 36 + .../bootstrap/forms/_validation.scss | 12 + .../bootstrap/helpers/_clearfix.scss | 3 + .../bootstrap/helpers/_color-bg.scss | 8 + .../bootstrap/helpers/_colored-links.scss | 30 + .../bootstrap/helpers/_focus-ring.scss | 5 + .../bootstrap/helpers/_icon-link.scss | 25 + .../bootstrap/helpers/_position.scss | 36 + .../bootstrap/helpers/_ratio.scss | 26 + .../bootstrap/helpers/_stacks.scss | 15 + .../bootstrap/helpers/_stretched-link.scss | 15 + .../bootstrap/helpers/_text-truncation.scss | 7 + .../bootstrap/helpers/_visually-hidden.scss | 8 + .../bootstrap/helpers/_vr.scss | 8 + .../bootstrap/mixins/_alert.scss | 18 + .../bootstrap/mixins/_backdrop.scss | 14 + .../bootstrap/mixins/_banner.scss | 7 + .../bootstrap/mixins/_border-radius.scss | 78 + .../bootstrap/mixins/_box-shadow.scss | 18 + .../bootstrap/mixins/_breakpoints.scss | 127 ++ .../bootstrap/mixins/_buttons.scss | 70 + .../bootstrap/mixins/_caret.scss | 69 + .../bootstrap/mixins/_clearfix.scss | 9 + .../bootstrap/mixins/_color-mode.scss | 21 + .../bootstrap/mixins/_color-scheme.scss | 7 + .../bootstrap/mixins/_container.scss | 11 + .../bootstrap/mixins/_deprecate.scss | 10 + .../bootstrap/mixins/_forms.scss | 153 ++ .../bootstrap/mixins/_gradients.scss | 47 + .../bootstrap/mixins/_grid.scss | 151 ++ .../bootstrap/mixins/_image.scss | 16 + .../bootstrap/mixins/_list-group.scss | 26 + .../bootstrap/mixins/_lists.scss | 7 + .../bootstrap/mixins/_pagination.scss | 10 + .../bootstrap/mixins/_reset-text.scss | 17 + .../bootstrap/mixins/_resize.scss | 6 + .../bootstrap/mixins/_table-variants.scss | 24 + .../bootstrap/mixins/_text-truncate.scss | 8 + .../bootstrap/mixins/_transition.scss | 26 + .../bootstrap/mixins/_utilities.scss | 97 + .../bootstrap/mixins/_visually-hidden.scss | 33 + .../bootstrap/tests/jasmine.js | 16 + .../tests/mixins/_color-modes.test.scss | 69 + .../_media-query-color-mode-full.test.scss | 8 + .../tests/mixins/_utilities.test.scss | 393 ++++ .../bootstrap/tests/sass-true/register.js | 14 + .../bootstrap/tests/sass-true/runner.js | 17 + .../bootstrap/tests/utilities/_api.test.scss | 75 + .../bootstrap/utilities/_api.scss | 47 + .../bootstrap/vendor/_rfs.scss | 348 ++++ .../cards/card-background.scss | 87 + .../astro-ecommerce/cards/card-product.scss | 24 + .../scss/astro-ecommerce/custom/_styles.scss | 7 + .../astro-ecommerce/custom/_variables.scss | 0 .../astro-ecommerce/forms/_form-check.scss | 171 ++ .../astro-ecommerce/forms/_form-select.scss | 3 + .../astro-ecommerce/forms/_form-switch.scss | 30 + assets/scss/astro-ecommerce/forms/_forms.scss | 6 + .../astro-ecommerce/forms/_input-group.scss | 69 + .../scss/astro-ecommerce/forms/_inputs.scss | 29 + .../scss/astro-ecommerce/forms/_labels.scss | 12 + .../scss/astro-ecommerce/mixins/_badge.scss | 12 + .../mixins/_colored-shadows.scss | 5 + .../scss/astro-ecommerce/mixins/_hover.scss | 27 + .../mixins/_social-buttons.scss | 46 + .../scss/astro-ecommerce/mixins/mixins.scss | 4 + .../plugins/free/_flatpickr.scss | 876 ++++++++ .../plugins/free/_nouislider.scss | 298 +++ .../plugins/free/_perfect-scrollbar.scss | 116 ++ .../astro-ecommerce/plugins/free/_prism.scss | 142 ++ .../astro-ecommerce/plugins/free/_swiper.scss | 654 ++++++ .../astro-ecommerce/plugins/free/plugins.scss | 5 + assets/scss/astro-ecommerce/theme.scss | 61 + .../variables/_animations.scss | 45 + .../astro-ecommerce/variables/_avatars.scss | 31 + .../astro-ecommerce/variables/_badge.scss | 38 + .../variables/_breadcrumb.scss | 5 + .../variables/_cards-extend.scss | 28 + .../astro-ecommerce/variables/_cards.scss | 62 + .../astro-ecommerce/variables/_choices.scss | 8 + .../variables/_dark-version.scss | 10 + .../astro-ecommerce/variables/_dropdowns.scss | 56 + .../variables/_fixed-plugin.scss | 7 + .../variables/_form-switch.scss | 3 + .../variables/_full-calendar.scss | 5 + .../astro-ecommerce/variables/_header.scss | 24 + .../variables/_info-areas.scss | 32 + .../variables/_misc-extend.scss | 48 + .../scss/astro-ecommerce/variables/_misc.scss | 54 + .../variables/_navbar-vertical.scss | 67 + .../astro-ecommerce/variables/_navbar.scss | 17 + .../variables/_pagination.scss | 18 + .../scss/astro-ecommerce/variables/_rtl.scss | 1 + .../variables/_social-buttons.scss | 28 + .../astro-ecommerce/variables/_table.scss | 19 + .../astro-ecommerce/variables/_timeline.scss | 19 + .../variables/_utilities-extend.scss | 22 + .../astro-ecommerce/variables/_utilities.scss | 217 ++ .../variables/_virtual-reality.scss | 5 + assets/scss/loading-dot.css | 112 ++ astro.config.mjs | 11 + hooks/interaction/useApiQuery.tsx | 66 + hooks/tools/copyToClipboard.tsx | 28 + hooks/tools/useEffectOnlyOnUpdate.tsx | 17 + package.json | 62 +- public/data.json | 366 ++++ public/favicon.svg | 13 + public/header-blue-purple.jpg | Bin 0 -> 674338 bytes public/images/bg1.jpg | Bin 0 -> 547482 bytes public/images/bg2.jpg | Bin 0 -> 661365 bytes public/images/category1.jpg | Bin 0 -> 252541 bytes public/images/category2.jpg | Bin 0 -> 208754 bytes public/images/category3.jpg | Bin 0 -> 243276 bytes public/images/category4.jpg | Bin 0 -> 341787 bytes public/images/category5.jpg | Bin 0 -> 301322 bytes public/images/mirror.png | Bin 0 -> 1720678 bytes public/images/product1.jpg | Bin 0 -> 213889 bytes public/images/product10.jpg | Bin 0 -> 372505 bytes public/images/product11.jpg | Bin 0 -> 293138 bytes public/images/product12.jpg | Bin 0 -> 542256 bytes public/images/product13.jpg | Bin 0 -> 402793 bytes public/images/product2.jpg | Bin 0 -> 104788 bytes public/images/product3.jpg | Bin 0 -> 92877 bytes public/images/product4.jpg | Bin 0 -> 639710 bytes public/images/product5.jpg | Bin 0 -> 9677 bytes public/images/product6.jpg | Bin 0 -> 21624 bytes public/images/product7.jpg | Bin 0 -> 24401 bytes public/images/product8.jpg | Bin 0 -> 146104 bytes public/images/product9.jpg | Bin 0 -> 179899 bytes public/images/suit-1.jpg | Bin 0 -> 104553 bytes public/images/suit-2.jpg | Bin 0 -> 301471 bytes public/images/suit-3.jpg | Bin 0 -> 102660 bytes public/images/suit-4.jpg | Bin 0 -> 320163 bytes public/images/suit-5.jpg | Bin 0 -> 115401 bytes public/images/suit-6.jpg | Bin 0 -> 98372 bytes public/images/team-1.jpg | Bin 0 -> 27168 bytes public/images/team-2.jpg | Bin 0 -> 24601 bytes public/logo/logo-spotify.svg | 9 + src/components/cart/orderSummary.tsx | 51 + src/components/cart/productCartItem.tsx | 59 + src/components/cart/productCartItem2.tsx | 60 + src/components/cart/shoppingCart.tsx | 93 + src/components/cart/shoppingCart2.tsx | 68 + src/components/checkout/billingInfo.tsx | 17 + src/components/checkout/checkoutMultiStep.tsx | 80 + .../checkout/checkoutOrderSummary.tsx | 83 + .../checkout/checkoutSingleItem.tsx | 36 + .../checkout/checkoutSingleItemDark.tsx | 45 + src/components/checkout/paymentDetails.tsx | 24 + src/components/checkout/shippingInfo.tsx | 37 + src/components/complexFooter.tsx | 32 + src/components/complexNavbar.tsx | 189 ++ src/components/complexNavbarDark.tsx | 189 ++ src/components/dashboardContext.tsx | 8 + src/components/footer.tsx | 67 + src/components/incentives/incentiveCols.tsx | 64 + src/components/incentives/incentiveLarge.tsx | 56 + src/components/navbar.tsx | 52 + src/components/order/orderCardProduct.tsx | 209 ++ src/components/order/orderHistory.tsx | 62 + src/components/order/orderHistoryCard.tsx | 198 ++ src/components/order/orderProductRow.tsx | 37 + src/components/order/orderSummaries.tsx | 121 ++ src/components/products/cardCategory.tsx | 38 + src/components/products/cardProduct.tsx | 66 + src/components/products/categoryFilters.tsx | 181 ++ src/components/products/productAccordion.tsx | 62 + src/components/products/productBadge.tsx | 21 + src/components/products/productFeature.tsx | 49 + src/components/products/productFeature2.tsx | 152 ++ .../products/productFeatureDetails.tsx | 34 + src/components/products/productFeatureImg.tsx | 27 + .../products/productFeatureTabs.tsx | 55 + src/components/products/productGallery.tsx | 25 + src/components/products/productImages.tsx | 25 + .../products/productOverviewGallery.tsx | 81 + .../products/productOverviewGrid.tsx | 100 + src/components/products/productQuickview.tsx | 88 + src/components/products/productQuickview2.tsx | 113 ++ src/components/products/productRating.tsx | 38 + src/components/products/productSizes.tsx | 34 + src/components/promo/promoSectionLarge.tsx | 44 + src/components/promo/testimonialsFade.tsx | 92 + src/components/reviews/reviewComment.tsx | 36 + src/components/reviews/reviewProgress.tsx | 114 ++ src/components/reviews/reviewRating.tsx | 34 + src/components/reviews/reviewSimple.tsx | 37 + src/components/reviews/reviewSummaryChart.tsx | 67 + src/components/store/storeDoubleColumn.tsx | 137 ++ src/components/store/storeNavbar.tsx | 63 + src/components/store/storeNavigation.tsx | 15 + src/components/store/upperNavbar.tsx | 48 + src/env.d.ts | 2 + src/layouts/Layout.astro | 53 + src/pages/index.astro | 386 ++++ src/pages/landing.astro | 66 + src/pages/product.astro | 56 + src/pages/shopping-cart.astro | 44 + tsconfig.json | 18 + 293 files changed, 26748 insertions(+), 57 deletions(-) create mode 100644 .astro/content-assets.mjs create mode 100644 .astro/content-modules.mjs create mode 100644 .astro/content.d.ts create mode 100644 .astro/types.d.ts create mode 100644 .github/workflows/deploy.yml delete mode 100644 .npmignore create mode 100644 CHANGELOG.MD delete mode 100644 LICENSE create mode 100644 assets/js/astro-ecommerce.js create mode 100644 assets/scss/astro-ecommerce.scss create mode 100644 assets/scss/astro-ecommerce/_alert.scss create mode 100644 assets/scss/astro-ecommerce/_avatars.scss create mode 100644 assets/scss/astro-ecommerce/_badge.scss create mode 100644 assets/scss/astro-ecommerce/_breadcrumbs.scss create mode 100644 assets/scss/astro-ecommerce/_button-group.scss create mode 100644 assets/scss/astro-ecommerce/_buttons.scss create mode 100644 assets/scss/astro-ecommerce/_cards.scss create mode 100644 assets/scss/astro-ecommerce/_dark-version.scss create mode 100644 assets/scss/astro-ecommerce/_dropdown.scss create mode 100644 assets/scss/astro-ecommerce/_dropup.scss create mode 100644 assets/scss/astro-ecommerce/_fixed-plugin.scss create mode 100644 assets/scss/astro-ecommerce/_footer.scss create mode 100644 assets/scss/astro-ecommerce/_forms.scss create mode 100644 assets/scss/astro-ecommerce/_gradients.scss create mode 100644 assets/scss/astro-ecommerce/_header.scss create mode 100644 assets/scss/astro-ecommerce/_info-areas.scss create mode 100644 assets/scss/astro-ecommerce/_misc.scss create mode 100644 assets/scss/astro-ecommerce/_nav.scss create mode 100644 assets/scss/astro-ecommerce/_navbar-vertical.scss create mode 100644 assets/scss/astro-ecommerce/_navbar.scss create mode 100644 assets/scss/astro-ecommerce/_pagination.scss create mode 100644 assets/scss/astro-ecommerce/_popovers.scss create mode 100644 assets/scss/astro-ecommerce/_progress.scss create mode 100644 assets/scss/astro-ecommerce/_rtl.scss create mode 100644 assets/scss/astro-ecommerce/_social-buttons.scss create mode 100644 assets/scss/astro-ecommerce/_tables.scss create mode 100644 assets/scss/astro-ecommerce/_tilt.scss create mode 100644 assets/scss/astro-ecommerce/_timeline.scss create mode 100644 assets/scss/astro-ecommerce/_tooltips.scss create mode 100644 assets/scss/astro-ecommerce/_typography.scss create mode 100644 assets/scss/astro-ecommerce/_utilities-extend.scss create mode 100644 assets/scss/astro-ecommerce/_utilities.scss create mode 100644 assets/scss/astro-ecommerce/_variables.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/_accordion.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/_alert.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/_badge.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/_breadcrumb.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/_button-group.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/_buttons.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/_card.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/_carousel.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/_close.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/_containers.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/_dropdown.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/_forms.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/_functions.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/_grid.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/_helpers.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/_images.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/_list-group.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/_maps.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/_mixins.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/_modal.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/_nav.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/_navbar.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/_offcanvas.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/_pagination.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/_placeholders.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/_popover.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/_progress.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/_reboot.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/_root.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/_spinners.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/_tables.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/_toasts.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/_tooltip.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/_transitions.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/_type.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/_utilities.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/_variables-dark.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/_variables.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/bootstrap-grid.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/bootstrap-reboot.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/bootstrap-utilities.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/bootstrap.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/forms/_floating-labels.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/forms/_form-check.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/forms/_form-control.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/forms/_form-range.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/forms/_form-select.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/forms/_form-text.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/forms/_input-group.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/forms/_labels.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/forms/_validation.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/helpers/_clearfix.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/helpers/_color-bg.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/helpers/_colored-links.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/helpers/_focus-ring.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/helpers/_icon-link.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/helpers/_position.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/helpers/_ratio.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/helpers/_stacks.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/helpers/_stretched-link.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/helpers/_text-truncation.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/helpers/_visually-hidden.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/helpers/_vr.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/mixins/_alert.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/mixins/_backdrop.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/mixins/_banner.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/mixins/_border-radius.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/mixins/_box-shadow.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/mixins/_breakpoints.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/mixins/_buttons.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/mixins/_caret.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/mixins/_clearfix.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/mixins/_color-mode.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/mixins/_color-scheme.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/mixins/_container.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/mixins/_deprecate.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/mixins/_forms.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/mixins/_gradients.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/mixins/_grid.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/mixins/_image.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/mixins/_list-group.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/mixins/_lists.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/mixins/_pagination.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/mixins/_reset-text.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/mixins/_resize.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/mixins/_table-variants.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/mixins/_text-truncate.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/mixins/_transition.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/mixins/_utilities.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/mixins/_visually-hidden.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/tests/jasmine.js create mode 100644 assets/scss/astro-ecommerce/bootstrap/tests/mixins/_color-modes.test.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/tests/mixins/_media-query-color-mode-full.test.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/tests/mixins/_utilities.test.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/tests/sass-true/register.js create mode 100644 assets/scss/astro-ecommerce/bootstrap/tests/sass-true/runner.js create mode 100644 assets/scss/astro-ecommerce/bootstrap/tests/utilities/_api.test.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/utilities/_api.scss create mode 100644 assets/scss/astro-ecommerce/bootstrap/vendor/_rfs.scss create mode 100644 assets/scss/astro-ecommerce/cards/card-background.scss create mode 100644 assets/scss/astro-ecommerce/cards/card-product.scss create mode 100644 assets/scss/astro-ecommerce/custom/_styles.scss rename src/.gitignore => assets/scss/astro-ecommerce/custom/_variables.scss (100%) create mode 100644 assets/scss/astro-ecommerce/forms/_form-check.scss create mode 100644 assets/scss/astro-ecommerce/forms/_form-select.scss create mode 100644 assets/scss/astro-ecommerce/forms/_form-switch.scss create mode 100644 assets/scss/astro-ecommerce/forms/_forms.scss create mode 100644 assets/scss/astro-ecommerce/forms/_input-group.scss create mode 100644 assets/scss/astro-ecommerce/forms/_inputs.scss create mode 100644 assets/scss/astro-ecommerce/forms/_labels.scss create mode 100644 assets/scss/astro-ecommerce/mixins/_badge.scss create mode 100644 assets/scss/astro-ecommerce/mixins/_colored-shadows.scss create mode 100644 assets/scss/astro-ecommerce/mixins/_hover.scss create mode 100644 assets/scss/astro-ecommerce/mixins/_social-buttons.scss create mode 100644 assets/scss/astro-ecommerce/mixins/mixins.scss create mode 100644 assets/scss/astro-ecommerce/plugins/free/_flatpickr.scss create mode 100644 assets/scss/astro-ecommerce/plugins/free/_nouislider.scss create mode 100644 assets/scss/astro-ecommerce/plugins/free/_perfect-scrollbar.scss create mode 100644 assets/scss/astro-ecommerce/plugins/free/_prism.scss create mode 100644 assets/scss/astro-ecommerce/plugins/free/_swiper.scss create mode 100644 assets/scss/astro-ecommerce/plugins/free/plugins.scss create mode 100644 assets/scss/astro-ecommerce/theme.scss create mode 100644 assets/scss/astro-ecommerce/variables/_animations.scss create mode 100644 assets/scss/astro-ecommerce/variables/_avatars.scss create mode 100644 assets/scss/astro-ecommerce/variables/_badge.scss create mode 100644 assets/scss/astro-ecommerce/variables/_breadcrumb.scss create mode 100644 assets/scss/astro-ecommerce/variables/_cards-extend.scss create mode 100644 assets/scss/astro-ecommerce/variables/_cards.scss create mode 100644 assets/scss/astro-ecommerce/variables/_choices.scss create mode 100644 assets/scss/astro-ecommerce/variables/_dark-version.scss create mode 100644 assets/scss/astro-ecommerce/variables/_dropdowns.scss create mode 100644 assets/scss/astro-ecommerce/variables/_fixed-plugin.scss create mode 100644 assets/scss/astro-ecommerce/variables/_form-switch.scss create mode 100644 assets/scss/astro-ecommerce/variables/_full-calendar.scss create mode 100644 assets/scss/astro-ecommerce/variables/_header.scss create mode 100644 assets/scss/astro-ecommerce/variables/_info-areas.scss create mode 100644 assets/scss/astro-ecommerce/variables/_misc-extend.scss create mode 100644 assets/scss/astro-ecommerce/variables/_misc.scss create mode 100644 assets/scss/astro-ecommerce/variables/_navbar-vertical.scss create mode 100644 assets/scss/astro-ecommerce/variables/_navbar.scss create mode 100644 assets/scss/astro-ecommerce/variables/_pagination.scss create mode 100644 assets/scss/astro-ecommerce/variables/_rtl.scss create mode 100644 assets/scss/astro-ecommerce/variables/_social-buttons.scss create mode 100644 assets/scss/astro-ecommerce/variables/_table.scss create mode 100644 assets/scss/astro-ecommerce/variables/_timeline.scss create mode 100644 assets/scss/astro-ecommerce/variables/_utilities-extend.scss create mode 100644 assets/scss/astro-ecommerce/variables/_utilities.scss create mode 100644 assets/scss/astro-ecommerce/variables/_virtual-reality.scss create mode 100644 assets/scss/loading-dot.css create mode 100644 astro.config.mjs create mode 100644 hooks/interaction/useApiQuery.tsx create mode 100644 hooks/tools/copyToClipboard.tsx create mode 100644 hooks/tools/useEffectOnlyOnUpdate.tsx create mode 100644 public/data.json create mode 100644 public/favicon.svg create mode 100644 public/header-blue-purple.jpg create mode 100644 public/images/bg1.jpg create mode 100644 public/images/bg2.jpg create mode 100644 public/images/category1.jpg create mode 100644 public/images/category2.jpg create mode 100644 public/images/category3.jpg create mode 100644 public/images/category4.jpg create mode 100644 public/images/category5.jpg create mode 100644 public/images/mirror.png create mode 100644 public/images/product1.jpg create mode 100644 public/images/product10.jpg create mode 100644 public/images/product11.jpg create mode 100644 public/images/product12.jpg create mode 100644 public/images/product13.jpg create mode 100644 public/images/product2.jpg create mode 100644 public/images/product3.jpg create mode 100644 public/images/product4.jpg create mode 100644 public/images/product5.jpg create mode 100644 public/images/product6.jpg create mode 100644 public/images/product7.jpg create mode 100644 public/images/product8.jpg create mode 100644 public/images/product9.jpg create mode 100644 public/images/suit-1.jpg create mode 100644 public/images/suit-2.jpg create mode 100644 public/images/suit-3.jpg create mode 100644 public/images/suit-4.jpg create mode 100644 public/images/suit-5.jpg create mode 100644 public/images/suit-6.jpg create mode 100644 public/images/team-1.jpg create mode 100644 public/images/team-2.jpg create mode 100644 public/logo/logo-spotify.svg create mode 100644 src/components/cart/orderSummary.tsx create mode 100644 src/components/cart/productCartItem.tsx create mode 100644 src/components/cart/productCartItem2.tsx create mode 100644 src/components/cart/shoppingCart.tsx create mode 100644 src/components/cart/shoppingCart2.tsx create mode 100644 src/components/checkout/billingInfo.tsx create mode 100644 src/components/checkout/checkoutMultiStep.tsx create mode 100644 src/components/checkout/checkoutOrderSummary.tsx create mode 100644 src/components/checkout/checkoutSingleItem.tsx create mode 100644 src/components/checkout/checkoutSingleItemDark.tsx create mode 100644 src/components/checkout/paymentDetails.tsx create mode 100644 src/components/checkout/shippingInfo.tsx create mode 100644 src/components/complexFooter.tsx create mode 100644 src/components/complexNavbar.tsx create mode 100644 src/components/complexNavbarDark.tsx create mode 100644 src/components/dashboardContext.tsx create mode 100644 src/components/footer.tsx create mode 100644 src/components/incentives/incentiveCols.tsx create mode 100644 src/components/incentives/incentiveLarge.tsx create mode 100644 src/components/navbar.tsx create mode 100644 src/components/order/orderCardProduct.tsx create mode 100644 src/components/order/orderHistory.tsx create mode 100644 src/components/order/orderHistoryCard.tsx create mode 100644 src/components/order/orderProductRow.tsx create mode 100644 src/components/order/orderSummaries.tsx create mode 100644 src/components/products/cardCategory.tsx create mode 100644 src/components/products/cardProduct.tsx create mode 100644 src/components/products/categoryFilters.tsx create mode 100644 src/components/products/productAccordion.tsx create mode 100644 src/components/products/productBadge.tsx create mode 100644 src/components/products/productFeature.tsx create mode 100644 src/components/products/productFeature2.tsx create mode 100644 src/components/products/productFeatureDetails.tsx create mode 100644 src/components/products/productFeatureImg.tsx create mode 100644 src/components/products/productFeatureTabs.tsx create mode 100644 src/components/products/productGallery.tsx create mode 100644 src/components/products/productImages.tsx create mode 100644 src/components/products/productOverviewGallery.tsx create mode 100644 src/components/products/productOverviewGrid.tsx create mode 100644 src/components/products/productQuickview.tsx create mode 100644 src/components/products/productQuickview2.tsx create mode 100644 src/components/products/productRating.tsx create mode 100644 src/components/products/productSizes.tsx create mode 100644 src/components/promo/promoSectionLarge.tsx create mode 100644 src/components/promo/testimonialsFade.tsx create mode 100644 src/components/reviews/reviewComment.tsx create mode 100644 src/components/reviews/reviewProgress.tsx create mode 100644 src/components/reviews/reviewRating.tsx create mode 100644 src/components/reviews/reviewSimple.tsx create mode 100644 src/components/reviews/reviewSummaryChart.tsx create mode 100644 src/components/store/storeDoubleColumn.tsx create mode 100644 src/components/store/storeNavbar.tsx create mode 100644 src/components/store/storeNavigation.tsx create mode 100644 src/components/store/upperNavbar.tsx create mode 100644 src/env.d.ts create mode 100644 src/layouts/Layout.astro create mode 100644 src/pages/index.astro create mode 100644 src/pages/landing.astro create mode 100644 src/pages/product.astro create mode 100644 src/pages/shopping-cart.astro create mode 100644 tsconfig.json diff --git a/.astro/content-assets.mjs b/.astro/content-assets.mjs new file mode 100644 index 0000000..2b8b823 --- /dev/null +++ b/.astro/content-assets.mjs @@ -0,0 +1 @@ +export default new Map(); \ No newline at end of file diff --git a/.astro/content-modules.mjs b/.astro/content-modules.mjs new file mode 100644 index 0000000..2b8b823 --- /dev/null +++ b/.astro/content-modules.mjs @@ -0,0 +1 @@ +export default new Map(); \ No newline at end of file diff --git a/.astro/content.d.ts b/.astro/content.d.ts new file mode 100644 index 0000000..3dcb19d --- /dev/null +++ b/.astro/content.d.ts @@ -0,0 +1,155 @@ +declare module 'astro:content' { + export interface RenderResult { + Content: import('astro/runtime/server/index.js').AstroComponentFactory; + headings: import('astro').MarkdownHeading[]; + remarkPluginFrontmatter: Record; + } + interface Render { + '.md': Promise; + } + + export interface RenderedContent { + html: string; + metadata?: { + imagePaths: Array; + [key: string]: unknown; + }; + } +} + +declare module 'astro:content' { + type Flatten = T extends { [K: string]: infer U } ? U : never; + + export type CollectionKey = keyof AnyEntryMap; + export type CollectionEntry = Flatten; + + export type ContentCollectionKey = keyof ContentEntryMap; + export type DataCollectionKey = keyof DataEntryMap; + + type AllValuesOf = T extends any ? T[keyof T] : never; + type ValidContentEntrySlug = AllValuesOf< + ContentEntryMap[C] + >['slug']; + + /** @deprecated Use `getEntry` instead. */ + export function getEntryBySlug< + C extends keyof ContentEntryMap, + E extends ValidContentEntrySlug | (string & {}), + >( + collection: C, + // Note that this has to accept a regular string too, for SSR + entrySlug: E, + ): E extends ValidContentEntrySlug + ? Promise> + : Promise | undefined>; + + /** @deprecated Use `getEntry` instead. */ + export function getDataEntryById( + collection: C, + entryId: E, + ): Promise>; + + export function getCollection>( + collection: C, + filter?: (entry: CollectionEntry) => entry is E, + ): Promise; + export function getCollection( + collection: C, + filter?: (entry: CollectionEntry) => unknown, + ): Promise[]>; + + export function getEntry< + C extends keyof ContentEntryMap, + E extends ValidContentEntrySlug | (string & {}), + >(entry: { + collection: C; + slug: E; + }): E extends ValidContentEntrySlug + ? Promise> + : Promise | undefined>; + export function getEntry< + C extends keyof DataEntryMap, + E extends keyof DataEntryMap[C] | (string & {}), + >(entry: { + collection: C; + id: E; + }): E extends keyof DataEntryMap[C] + ? Promise + : Promise | undefined>; + export function getEntry< + C extends keyof ContentEntryMap, + E extends ValidContentEntrySlug | (string & {}), + >( + collection: C, + slug: E, + ): E extends ValidContentEntrySlug + ? Promise> + : Promise | undefined>; + export function getEntry< + C extends keyof DataEntryMap, + E extends keyof DataEntryMap[C] | (string & {}), + >( + collection: C, + id: E, + ): E extends keyof DataEntryMap[C] + ? string extends keyof DataEntryMap[C] + ? Promise | undefined + : Promise + : Promise | undefined>; + + /** Resolve an array of entry references from the same collection */ + export function getEntries( + entries: { + collection: C; + slug: ValidContentEntrySlug; + }[], + ): Promise[]>; + export function getEntries( + entries: { + collection: C; + id: keyof DataEntryMap[C]; + }[], + ): Promise[]>; + + export function render( + entry: AnyEntryMap[C][string], + ): Promise; + + export function reference( + collection: C, + ): import('astro/zod').ZodEffects< + import('astro/zod').ZodString, + C extends keyof ContentEntryMap + ? { + collection: C; + slug: ValidContentEntrySlug; + } + : { + collection: C; + id: keyof DataEntryMap[C]; + } + >; + // Allow generic `string` to avoid excessive type errors in the config + // if `dev` is not running to update as you edit. + // Invalid collection names will be caught at build time. + export function reference( + collection: C, + ): import('astro/zod').ZodEffects; + + type ReturnTypeOrOriginal = T extends (...args: any[]) => infer R ? R : T; + type InferEntrySchema = import('astro/zod').infer< + ReturnTypeOrOriginal['schema']> + >; + + type ContentEntryMap = { + + }; + + type DataEntryMap = { + + }; + + type AnyEntryMap = ContentEntryMap & DataEntryMap; + + export type ContentConfig = typeof import("./../src/content.config.mjs"); +} diff --git a/.astro/types.d.ts b/.astro/types.d.ts new file mode 100644 index 0000000..03d7cc4 --- /dev/null +++ b/.astro/types.d.ts @@ -0,0 +1,2 @@ +/// +/// \ No newline at end of file diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml new file mode 100644 index 0000000..a3f1571 --- /dev/null +++ b/.github/workflows/deploy.yml @@ -0,0 +1,39 @@ +name: Deploy to GitHub Pages + +on: + # Trigger the workflow every time you push to the `main` branch + # Using a different branch name? Replace `main` with your branch’s name + push: + branches: [ main ] + # Allows you to run this workflow manually from the Actions tab on GitHub. + workflow_dispatch: + +# Allow this job to clone the repo and create a page deployment +permissions: + contents: read + pages: write + id-token: write + +jobs: + build: + runs-on: ubuntu-latest + steps: + - name: Checkout your repository using git + uses: actions/checkout@v3 + - name: Install, build, and upload your site + uses: withastro/action@v0 + # with: + # path: . # The root location of your Astro project inside the repository. (optional) + # node-version: 16 # The specific version of Node that should be used to build your site. Defaults to 16. (optional) + # package-manager: yarn # The Node package manager that should be used to install dependencies and build your site. Automatically detected based on your lockfile. (optional) + + deploy: + needs: build + runs-on: ubuntu-latest + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + steps: + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v1 diff --git a/.gitignore b/.gitignore index cab85ca..2ff0cf1 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,8 @@ +Gemfile.lock +node_modules/ /node_modules -/coverage -*.log +*.zip +build-product/ .DS_Store +dist/ +package-lock.json \ No newline at end of file diff --git a/.npmignore b/.npmignore deleted file mode 100644 index 4c9adda..0000000 --- a/.npmignore +++ /dev/null @@ -1,4 +0,0 @@ -./docs -./scripts -./tests -./incoming \ No newline at end of file diff --git a/CHANGELOG.MD b/CHANGELOG.MD new file mode 100644 index 0000000..32644a5 --- /dev/null +++ b/CHANGELOG.MD @@ -0,0 +1,10 @@ +# Change Log + +## [1.1.0] 2023-07-26 +### Updates and Improvements +- refactor the components design and structure +- update the Sections +- update Example Pages + +## [1.0.0] 2023-03-27 +### Initial Release diff --git a/LICENSE b/LICENSE deleted file mode 100644 index b0e20f5..0000000 --- a/LICENSE +++ /dev/null @@ -1,9 +0,0 @@ -Copyright (c) All rights reserved. - -Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: - -1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. - -2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. - -THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. diff --git a/README.md b/README.md index dc27f0f..6263931 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,94 @@ -# osr-package-template +# Welcome to [Astro Ecommerce](https://www.creative-tim.com/astro) -Package basics \ No newline at end of file +![version](https://img.shields.io/badge/version-1.1.0-blue.svg) [![GitHub issues open](https://img.shields.io/github/issues/creativetimofficial/astro-ecommerce.svg?maxAge=2592000)](https://github.com/creativetimofficial/astro-ecommerce/issues?q=is%3Aopen+is%3Aissue) [![GitHub issues closed](https://img.shields.io/github/issues-closed-raw/creativetimofficial/astro-ecommerce.svg?maxAge=2592000)](https://github.com/creativetimofficial/astro-ecommerce/issues?q=is%3Aissue+is%3Aclosed) + +![basics](https://raw.githubusercontent.com/creativetimofficial/public-assets/master/astro-ecommerce/astro-ecommerce-1.jpg) + +## Description + +Introducing **Astro Ecommerce**, the ultimate starter template for your e-commerce web project. Built on Astro's next-gen island architecture, Astro Ecommerce offers a sleek and modern design with a wide range of components and features to help you create a stunning online store. + +**Main Features** +Build your e-commerce website quickly and efficiently with: +- 70+ fully coded elements +- 3 fully coded example pages +- 30+ blocks +- Responsive design + +**Example Pages** +We created a set of pre-built pages to help you get inspired or show something to your clients. See them below: +- [Landing Page](https://demos.creative-tim.com/astro-ecommerce/landing/): Designed to introduce the website's purpose and encourage the user to take an action. +- [Product Page](https://demos.creative-tim.com/astro-ecommerce/product/): It's designed to give the user all the information they need to make a purchase decision +- [Shopping Page](https://demos.creative-tim.com/astro-ecommerce/shopping-cart/): Includes a summary of the items in the cart and a form for billing and shipping information. +- more+ + +Astro Ecommerce has everything you need to create the e-commerce website of your dreams. + + +## 🚀 Project Structure + +Inside of your Astro project, you'll see the following folders and files: + +``` +/ +├── public/ +│ └── favicon.svg +├── src/ +│ ├── components/ +│ │ ├── cart/ +│ │ ├── checkout/ +│ │ ├── incentives/ +│ │ ├── order/ +│ │ ├── products/ +│ │ ├── promo/ +│ │ ├── reviews/ +│ │ ├── store/ +│ │ ├── dashboardContext.tsx +│ │ ├── footer.tsx +│ │ └── navbar.tsx +│ ├── layouts/ +│ │ └── Layout.astro +│ └── pages/ +│ ├── index.astro +│ ├── landing.astro +│ ├── product.astro +│ └── shopping-cart.astro +├── package.json +├── README.md +└── tsconfig.json +``` + +Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name. + +There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components. + +Any static assets, like images, can be placed in the `public/` directory. + +## 🧞 Commands + +All commands are run from the root of the project, from a terminal: + +| Command | Action | +| :--------------------- | :------------------------------------------------- | +| `npm install` | Installs dependencies | +| `npm run dev` | Starts local dev server at `localhost:3000` | +| `npm run build` | Build your production site to `./dist/` | +| `npm run preview` | Preview your build locally, before deploying | +| `npm run astro ...` | Run CLI commands like `astro add`, `astro preview` | +| `npm run astro --help` | Get help using the Astro CLI | + +#### Social Media + +Twitter: + +Facebook: + +Dribbble: + +TikTok: + +Instagram: + +## 👀 Want to learn more? + +Feel free to check [our documentation](https://www.creative-tim.com/learning-lab/astro/overview/astro-ecommerce) or jump into our [Discord server](https://discord.com/invite/TGZqBvZB). diff --git a/assets/js/astro-ecommerce.js b/assets/js/astro-ecommerce.js new file mode 100644 index 0000000..2e84e01 --- /dev/null +++ b/assets/js/astro-ecommerce.js @@ -0,0 +1,426 @@ +// ========================================================= +// * Astro Ecommerce - v1.1.0 +// ========================================================= +// +// * Product Page: https://www.creative-tim.com/astro +// * Copyright 2023 Creative Tim (https://www.creative-tim.com) +// +// Coded by www.creative-tim.com +// +// ========================================================= +// +// * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +"use strict"; +(function() { + var isWindows = navigator.platform.indexOf('Win') > -1 ? true : false; + + if (isWindows) { + // if we are on windows OS we activate the perfectScrollbar function + if (document.getElementsByClassName('main-content')[0]) { + var mainpanel = document.querySelector('.main-content'); + var ps = new PerfectScrollbar(mainpanel); + }; + + if (document.getElementsByClassName('sidenav')[0]) { + var sidebar = document.querySelector('.sidenav'); + var ps1 = new PerfectScrollbar(sidebar); + }; + + if (document.getElementsByClassName('navbar-collapse')[0]) { + var fixedplugin = document.querySelector('.navbar:not(.navbar-expand-lg) .navbar-collapse'); + var ps2 = new PerfectScrollbar(fixedplugin); + }; + + if (document.getElementsByClassName('fixed-plugin')[0]) { + var fixedplugin = document.querySelector('.fixed-plugin'); + var ps3 = new PerfectScrollbar(fixedplugin); + }; + }; +})(); + +// Verify navbar blur on scroll +navbarBlurOnScroll('navbarBlur'); + +// initialization of Popovers +var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]')) +var popoverList = popoverTriggerList.map(function(popoverTriggerEl) { + return new bootstrap.Popover(popoverTriggerEl) +}) + +// initialization of Tooltips +var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')) +var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) { + return new bootstrap.Tooltip(tooltipTriggerEl) +}) + +// Fixed Plugin + +if (document.querySelector('.fixed-plugin')) { + var fixedPlugin = document.querySelector('.fixed-plugin'); + var fixedPluginButton = document.querySelector('.fixed-plugin-button'); + var fixedPluginButtonNav = document.querySelector('.fixed-plugin-button-nav'); + var fixedPluginCard = document.querySelector('.fixed-plugin .card'); + var fixedPluginCloseButton = document.querySelectorAll('.fixed-plugin-close-button'); + var navbar = document.getElementById('navbarBlur'); + var buttonNavbarFixed = document.getElementById('navbarFixed'); + + if (fixedPluginButton) { + fixedPluginButton.onclick = function() { + if (!fixedPlugin.classList.contains('show')) { + fixedPlugin.classList.add('show'); + } else { + fixedPlugin.classList.remove('show'); + } + } + } + + if (fixedPluginButtonNav) { + fixedPluginButtonNav.onclick = function() { + if (!fixedPlugin.classList.contains('show')) { + fixedPlugin.classList.add('show'); + } else { + fixedPlugin.classList.remove('show'); + } + } + } + + fixedPluginCloseButton.forEach(function(el) { + el.onclick = function() { + fixedPlugin.classList.remove('show'); + } + }) + + document.querySelector('body').onclick = function(e) { + if (e.target != fixedPluginButton && e.target != fixedPluginButtonNav && e.target.closest('.fixed-plugin .card') != fixedPluginCard) { + fixedPlugin.classList.remove('show'); + } + } + + if (navbar) { + if (navbar.getAttribute('navbar-scroll') == 'true') { + buttonNavbarFixed.setAttribute("checked", "true"); + } + } + +} + +// Tabs navigation + +var total = document.querySelectorAll('.nav-pills'); + +total.forEach(function(item, i) { + var moving_div = document.createElement('div'); + var first_li = item.querySelector('li:first-child .nav-link'); + var tab = first_li.cloneNode(); + tab.innerHTML = "-"; + + moving_div.classList.add('moving-tab', 'position-absolute', 'nav-link'); + moving_div.appendChild(tab); + item.appendChild(moving_div); + + var list_length = item.getElementsByTagName("li").length; + + moving_div.style.padding = '0px'; + moving_div.style.width = item.querySelector('li:nth-child(1)').offsetWidth + 'px'; + moving_div.style.transform = 'translate3d(0px, 0px, 0px)'; + moving_div.style.transition = '.5s ease'; + + item.onmouseover = function(event) { + let target = getEventTarget(event); + let li = target.closest('li'); // get reference + if (li) { + let nodes = Array.from(li.closest('ul').children); // get array + let index = nodes.indexOf(li) + 1; + item.querySelector('li:nth-child(' + index + ') .nav-link').onclick = function() { + moving_div = item.querySelector('.moving-tab'); + let sum = 0; + if (item.classList.contains('flex-column')) { + for (var j = 1; j <= nodes.indexOf(li); j++) { + sum += item.querySelector('li:nth-child(' + j + ')').offsetHeight; + } + moving_div.style.transform = 'translate3d(0px,' + sum + 'px, 0px)'; + moving_div.style.height = item.querySelector('li:nth-child(' + j + ')').offsetHeight; + } else { + for (var j = 1; j <= nodes.indexOf(li); j++) { + sum += item.querySelector('li:nth-child(' + j + ')').offsetWidth; + } + moving_div.style.transform = 'translate3d(' + sum + 'px, 0px, 0px)'; + moving_div.style.width = item.querySelector('li:nth-child(' + index + ')').offsetWidth + 'px'; + } + } + } + } +}); + + +// Tabs navigation resize + +window.addEventListener('resize', function(event) { + total.forEach(function(item, i) { + item.querySelector('.moving-tab').remove(); + var moving_div = document.createElement('div'); + var tab = item.querySelector(".nav-link.active").cloneNode(); + tab.innerHTML = "-"; + + moving_div.classList.add('moving-tab', 'position-absolute', 'nav-link'); + moving_div.appendChild(tab); + + item.appendChild(moving_div); + + moving_div.style.padding = '0px'; + moving_div.style.transition = '.5s ease'; + + let li = item.querySelector(".nav-link.active").parentElement; + + if (li) { + let nodes = Array.from(li.closest('ul').children); // get array + let index = nodes.indexOf(li) + 1; + + let sum = 0; + if (item.classList.contains('flex-column')) { + for (var j = 1; j <= nodes.indexOf(li); j++) { + sum += item.querySelector('li:nth-child(' + j + ')').offsetHeight; + } + moving_div.style.transform = 'translate3d(0px,' + sum + 'px, 0px)'; + moving_div.style.width = item.querySelector('li:nth-child(' + index + ')').offsetWidth + 'px'; + moving_div.style.height = item.querySelector('li:nth-child(' + j + ')').offsetHeight; + } else { + for (var j = 1; j <= nodes.indexOf(li); j++) { + sum += item.querySelector('li:nth-child(' + j + ')').offsetWidth; + } + moving_div.style.transform = 'translate3d(' + sum + 'px, 0px, 0px)'; + moving_div.style.width = item.querySelector('li:nth-child(' + index + ')').offsetWidth + 'px'; + + } + } + }); + + if (window.innerWidth < 991) { + total.forEach(function(item, i) { + if (!item.classList.contains('flex-column')) { + item.classList.add('flex-column', 'on-resize'); + } + }); + } else { + total.forEach(function(item, i) { + if (item.classList.contains('on-resize')) { + item.classList.remove('flex-column', 'on-resize'); + } + }) + } +}); + + +function getEventTarget(e) { + e = e || window.event; + return e.target || e.srcElement; +} + +// End tabs navigation + + +//Set Sidebar Color +function sidebarColor(a) { + var parent = a.parentElement.children; + var color = a.getAttribute("data-color"); + + for (var i = 0; i < parent.length; i++) { + parent[i].classList.remove('active'); + } + + if (!a.classList.contains('active')) { + a.classList.add('active'); + } else { + a.classList.remove('active'); + } + + var sidebar = document.querySelector('.sidenav'); + sidebar.setAttribute("data-color", color); + + if (document.querySelector('#sidenavCard')) { + var sidenavCardIcon = document.querySelector('#sidenavCardIcon'); + sidenavCardIcon.setAttribute('class', ''); + sidenavCardIcon.classList.add('text-' + color); + } + +} + +// Set Navbar Fixed +function navbarFixed(el) { + let classes = ['position-sticky', 'blur', 'shadow-blur', 'mt-4', 'left-auto', 'top-1', 'z-index-sticky']; + const navbar = document.getElementById('navbarBlur'); + + if (!el.getAttribute("checked")) { + navbar.classList.add(...classes); + navbar.setAttribute('navbar-scroll', 'true'); + navbarBlurOnScroll('navbarBlur'); + el.setAttribute("checked", "true"); + } else { + navbar.classList.remove(...classes); + navbar.setAttribute('navbar-scroll', 'false'); + navbarBlurOnScroll('navbarBlur'); + el.removeAttribute("checked"); + } +}; + +// Navbar blur on scroll + +function navbarBlurOnScroll(id) { + const navbar = document.getElementById(id); + let navbarScrollActive = navbar ? navbar.getAttribute("navbar-scroll") : false; + let scrollDistance = 5; + let classes = ['position-sticky', 'blur', 'shadow-blur', 'mt-4', 'left-auto', 'top-1', 'z-index-sticky']; + let toggleClasses = ['shadow-none']; + + if (navbarScrollActive == 'true') { + window.onscroll = debounce(function() { + if (window.scrollY > scrollDistance) { + blurNavbar(); + } else { + transparentNavbar(); + } + }, 10); + } else { + window.onscroll = debounce(function() { + transparentNavbar(); + }, 10); + } + + function blurNavbar() { + navbar.classList.add(...classes) + navbar.classList.remove(...toggleClasses) + + toggleNavLinksColor('blur'); + } + + function transparentNavbar() { + if (navbar) { + navbar.classList.remove(...classes) + navbar.classList.add(...toggleClasses) + + toggleNavLinksColor('transparent'); + } + } + + function toggleNavLinksColor(type) { + let navLinks = document.querySelectorAll('.navbar-main .nav-link') + let navLinksToggler = document.querySelectorAll('.navbar-main .sidenav-toggler-line') + + if (type === "blur") { + navLinks.forEach(element => { + element.classList.remove('text-body') + }); + + navLinksToggler.forEach(element => { + element.classList.add('bg-dark') + }); + } else if (type === "transparent") { + navLinks.forEach(element => { + element.classList.add('text-body') + }); + + navLinksToggler.forEach(element => { + element.classList.remove('bg-dark') + }); + } + } +} + + +// Debounce Function +// Returns a function, that, as long as it continues to be invoked, will not +// be triggered. The function will be called after it stops being called for +// N milliseconds. If `immediate` is passed, trigger the function on the +// leading edge, instead of the trailing. +function debounce(func, wait, immediate) { + var timeout; + return function() { + var context = this, + args = arguments; + var later = function() { + timeout = null; + if (!immediate) func.apply(context, args); + }; + var callNow = immediate && !timeout; + clearTimeout(timeout); + timeout = setTimeout(later, wait); + if (callNow) func.apply(context, args); + }; +}; + +//Set Sidebar Type +function sidebarType(a) { + var parent = a.parentElement.children; + var color = a.getAttribute("data-class"); + + var colors = []; + + for (var i = 0; i < parent.length; i++) { + parent[i].classList.remove('active'); + colors.push(parent[i].getAttribute('data-class')); + } + + if (!a.classList.contains('active')) { + a.classList.add('active'); + } else { + a.classList.remove('active'); + } + + var sidebar = document.querySelector('.sidenav'); + + for (var i = 0; i < colors.length; i++) { + sidebar.classList.remove(colors[i]); + } + + sidebar.classList.add(color); +} + + +// Toggle Sidenav +const iconNavbarSidenav = document.getElementById('iconNavbarSidenav'); +const iconSidenav = document.getElementById('iconSidenav'); +const sidenav = document.getElementById('sidenav-main'); +let body = document.getElementsByTagName('body')[0]; +let className = 'g-sidenav-pinned'; + +if (iconNavbarSidenav) { + iconNavbarSidenav.addEventListener("click", toggleSidenav); +} + +if (iconSidenav) { + iconSidenav.addEventListener("click", toggleSidenav); +} + +function toggleSidenav() { + if (body.classList.contains(className)) { + body.classList.remove(className); + sidenav.classList.remove('bg-transparent'); + + } else { + body.classList.add(className); + sidenav.classList.remove('bg-transparent'); + iconSidenav.classList.remove('d-none'); + } +} + +// Resize navbar color depends on configurator active type of sidenav + +let referenceButtons = document.querySelector('[data-class]'); + +// Deactivate sidenav type buttons on resize and small screens +window.addEventListener("resize", sidenavTypeOnResize); +window.addEventListener("load", sidenavTypeOnResize); + +function sidenavTypeOnResize() { + let elements = document.querySelectorAll('[onclick="sidebarType(this)"]'); + if (window.innerWidth < 1200) { + elements.forEach(function(el) { + el.classList.add('disabled'); + }); + } else { + elements.forEach(function(el) { + el.classList.remove('disabled'); + }); + } +} \ No newline at end of file diff --git a/assets/scss/astro-ecommerce.scss b/assets/scss/astro-ecommerce.scss new file mode 100644 index 0000000..598c490 --- /dev/null +++ b/assets/scss/astro-ecommerce.scss @@ -0,0 +1,30 @@ +// ========================================================= +// * Astro Ecommerce - v1.1.0 +// ========================================================= +// +// * Product Page: https://www.creative-tim.com/astro +// * Copyright 2023 Creative Tim (https://www.creative-tim.com) +// +// Coded by www.creative-tim.com +// +// ========================================================= +// +// * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +// Bootstrap Functions +@import "astro-ecommerce/bootstrap/functions"; + +// Custom Variables +@import "astro-ecommerce/custom/variables"; + +// Theme Variables +@import "astro-ecommerce/variables"; + +// Bootstrap Core +@import "astro-ecommerce/bootstrap/bootstrap"; + +// Theme Core +@import "astro-ecommerce/theme"; + +// Custom Variables +@import "astro-ecommerce/custom/styles"; diff --git a/assets/scss/astro-ecommerce/_alert.scss b/assets/scss/astro-ecommerce/_alert.scss new file mode 100644 index 0000000..bd29a3c --- /dev/null +++ b/assets/scss/astro-ecommerce/_alert.scss @@ -0,0 +1,17 @@ +@each $state, $value in $theme-gradient-colors { + .alert-#{$state} { + @include gradient-directional(nth($value, 1) 0%, nth($value, 2) 100%, $deg: 310deg); + } +} + +.btn-close{ + &:focus{ + box-shadow: none; + } +} + +.alert-dismissible{ + .btn-close{ + background-image: none; + } +} diff --git a/assets/scss/astro-ecommerce/_avatars.scss b/assets/scss/astro-ecommerce/_avatars.scss new file mode 100644 index 0000000..0de0a43 --- /dev/null +++ b/assets/scss/astro-ecommerce/_avatars.scss @@ -0,0 +1,132 @@ +// +// Avatar +// + +// General styles + +.avatar { + color: $white; + display: inline-flex; + align-items: center; + justify-content: center; + font-size: $avatar-font-size; + border-radius: $border-radius-md; + height: $avatar-height; + width: $avatar-width; + transition: all .2s ease-in-out; + overflow: hidden; + + img { + width: 100%; + } + + &.rounded-circle { + img { + @extend .rounded-circle; + } + } + + + .avatar-content { + display: inline-block; + margin-left: $avatar-content-margin; + } + + + &.avatar-raised { + margin-top: -($avatar-height * 0.5); + } + + &.avatar-scale-up:hover { + transform: scale(1.2); + + } +} + +// Style for the Testimonials Carousel +.active { + .avatar.avatar-scale-up { + transform: scale(1.2); + } +} + + +// Avatar size variations +.avatar-2xl { + width: $avatar-2xl-width !important; + height: $avatar-2xl-height !important; + + &.avatar-raised { + margin-top: -($avatar-2xl-height * 0.5); + } +} + +.avatar-xxl { + width: $avatar-xxl-width !important; + height: $avatar-xxl-height !important; + + &.avatar-raised { + margin-top: -($avatar-xxl-height * 0.5); + } +} + +.avatar-xl { + width: $avatar-xl-width !important; + height: $avatar-xl-height !important; + + &.avatar-raised { + margin-top: -($avatar-xl-height * 0.5); + } +} + +.avatar-lg { + width: $avatar-lg-width !important; + height: $avatar-lg-height !important; + font-size: $font-size-sm; + + &.avatar-raised { + margin-top: -($avatar-lg-height * 0.5); + } +} + +.avatar-sm { + width: $avatar-sm-width !important; + height: $avatar-sm-height !important; + font-size: $font-size-sm; + + &.avatar-raised { + margin-top: -($avatar-sm-height * 0.5); + } +} + +.avatar-xs { + width: $avatar-xs-width !important; + height: $avatar-xs-height !important; + font-size: $font-size-xs; + + &.avatar-raised { + margin-top: -($avatar-xs-height * 0.5); + } +} + +// +// Avatar group +// + +// General styles + +.avatar-group { + .avatar { + position: relative; + z-index: $avatar-group-zindex; + border: $avatar-group-border solid $card-bg; + + &:hover { + z-index: $avatar-group-zindex-hover; + } + } + + .avatar + .avatar { + margin-left: $avatar-group-double; + + } +} diff --git a/assets/scss/astro-ecommerce/_badge.scss b/assets/scss/astro-ecommerce/_badge.scss new file mode 100644 index 0000000..f1b49a2 --- /dev/null +++ b/assets/scss/astro-ecommerce/_badge.scss @@ -0,0 +1,19 @@ +@each $prop, $value in $theme-colors { + .badge.bg-#{$prop} { + background: rgba($value, .1) !important; + } +} +.badge { + text-transform: inherit; +} + +@each $prop, $value in $colors { + .badge.bg-#{$prop} { + background: $value !important; + } +} + +// @import 'badges/badge'; +// @import 'badges/badge-circle'; +// @import 'badges/badge-dot'; +// @import 'badges/badge-floating'; diff --git a/assets/scss/astro-ecommerce/_breadcrumbs.scss b/assets/scss/astro-ecommerce/_breadcrumbs.scss new file mode 100644 index 0000000..f6bf348 --- /dev/null +++ b/assets/scss/astro-ecommerce/_breadcrumbs.scss @@ -0,0 +1,48 @@ +// +// Breadcrumb +// + +.breadcrumb-item { + font-size: $font-size-sm; + &.text-white{ + &::before { + color: $white; + } + } + +} + +.breadcrumb-dark { + background-color: $breadcrumb-dark-bg; + + .breadcrumb-item { + font-weight: 600; + + a { + color: $breadcrumb-dark-color; + + &:hover { + color: $breadcrumb-dark-hover-color; + } + } + + + .breadcrumb-item { + &::before { + color: $breadcrumb-dark-divider-color; + } + } + + &.active { + color: $breadcrumb-dark-active-color; + } + } +} + + +// Links + +.breadcrumb-links { + padding: 0; + margin: 0; + background: transparent; +} diff --git a/assets/scss/astro-ecommerce/_button-group.scss b/assets/scss/astro-ecommerce/_button-group.scss new file mode 100644 index 0000000..e018dfa --- /dev/null +++ b/assets/scss/astro-ecommerce/_button-group.scss @@ -0,0 +1,12 @@ +.btn-group, +.btn-group-vertical { + + > .btn { + font-weight: $font-weight-normal; + } + + > .btn.active { + font-weight: $font-weight-bolder; + color: $primary; + } +} diff --git a/assets/scss/astro-ecommerce/_buttons.scss b/assets/scss/astro-ecommerce/_buttons.scss new file mode 100644 index 0000000..cfcf47b --- /dev/null +++ b/assets/scss/astro-ecommerce/_buttons.scss @@ -0,0 +1,236 @@ +.btn { + margin-bottom: $btn-margin-bottom; + box-shadow: $btn-box-shadow; + + &:not([class*="btn-outline-"]) { + //border: 0; + } + + &:active, + &:active:focus, + &:active:hover { + box-shadow: $btn-hover-box-shadow; + //transform: $btn-active-hover-transform; + opacity: $btn-hover-opacity; + } + + @include hover { + opacity: 0.85; + + &:not(.btn-icon-only){ + box-shadow: $btn-hover-box-shadow; + opacity: 0.85; + // transform: $btn-hover-transform; + } + } + + &.bg-white { + @include hover { + color: $body-color; + } + } + + &.btn-white{ + border: 1px solid $slate-350; + + @include hover { + border-color: $slate-500; + } + } + + &.btn-blur{ + background: rgba($white, .2); + backdrop-filter: $blur-backdrop-filter-btn; + &:hover, + &:active{ + background: rgba($white, .25); + color: $white; + } + &:focus{ + color: $white; + } + } + + &.btn-link{ + box-shadow: none; + font-weight: $btn-font-weight; + + &:hover, + &:focus{ + box-shadow: none; + } + } + &.btn-round { + border-radius: $btn-border-rounded; + } + // Button Just Icon + + &.btn-icon-only { + width: $btn-just-icon-width; + height: $btn-just-icon-height; + padding: $btn-just-icon-padding-y $btn-just-icon-padding-x; + } + + // Button Icon Sizes + + &.btn-sm { + &.btn-icon-only { + width: $btn-just-icon-width-sm; + height: $btn-just-icon-height-sm; + padding: $btn-just-icon-padding-y-sm $btn-just-icon-padding-x-sm; + } + + i { + font-size: $btn-just-icon-sm-font-size; + } + } + + &.btn-lg { + &.btn-icon-only { + width: $btn-just-icon-width-lg; + height: $btn-just-icon-height-lg; + padding: $btn-just-icon-padding-y-lg $btn-just-icon-padding-x-lg; + } + + i { + font-size: $btn-just-icon-lg-font-size; + position: $btn-just-icon-lg-position; + top: $btn-just-icon-lg-top; + } + } + + &.btn-rounded { + border-radius: $btn-border-rounded; + } + + &.btn-transparent { + appearance: none; + -moz-appearance: none; + -webkit-appearance: none; + } +} + +.btn-check{ + &:checked{ + +.btn{ + font-weight: $font-weight-bolder; + color: $primary; + border: 1px solid $slate-350; + svg{ + .color-background{ + fill: $white; + } + } + &:hover{ + svg{ + .color-background{ + fill: $dark; + } + } + } + } + } +} + +.icon-move-right { + i { + transition: $btn-icon-transition; + } + &:hover, + &:focus { + i { + transform: $btn-icon-transform-right; + } + } +} + +.icon-move-left{ + i { + transition: $btn-icon-transition; + } + &:hover, + &:focus { + i { + transform: $btn-icon-transform-left; + } + } +} + +@each $color, $value in $theme-colors { + .btn-#{$color} { + @include hover { + background-color: $value; + border-color: $value; + } + .btn.bg-outline-#{$color} { + border: $border-width solid $value; + } + + &:not(:disabled):not(.disabled).active, + &:not(:disabled):not(.disabled):active, + .show > &.dropdown-toggle { + color: color-yiq($value); + background-color: $value; + } + } +} +// +// @if $value != $white and $value != $light { +// &.focus, +// &:focus { +// color: $white; +// } +// } +// } + + // .btn-#{$color}, + // .btn.bg-gradient-#{$color}{ + // &:focus{ + // box-shadow: 0 0 0 3px rgba($value,.5); + // } + // } + +// .btn-outline-#{$color} { +// box-shadow: none; +// @include hover { +// &:not(.active){ +// background-color: transparent; +// opacity: .75; +// box-shadow: none; +// color: $value; +// } +// } +// } +// } + +.btn-outline-white{ + border-color: rgba($white, .75); + background: rgba($white, .1); +} + +@each $color, $value in $btn-font-colors { + .btn-#{$color}, + .btn.bg-gradient-#{$color} { + color: $value; + @include hover { + color: $value; + border-color: transparent; + } + &:focus{ + border-color: transparent; + } + } +} + +// buttons box-shadow + +@each $color, $value in $theme-colors { + .btn-#{$color}, + .btn.bg-gradient-#{$color}{ + //box-shadow: $btn-box-shadow-values rgba($value, .2); + + @include hover { + //box-shadow: $btn-box-shadow-hover-values rgba($value, .2); + } + } +} diff --git a/assets/scss/astro-ecommerce/_cards.scss b/assets/scss/astro-ecommerce/_cards.scss new file mode 100644 index 0000000..f90f93e --- /dev/null +++ b/assets/scss/astro-ecommerce/_cards.scss @@ -0,0 +1,64 @@ +.card { + box-shadow: $card-box-shadow; + .card-header { + padding: $card-header-padding; + } + + + + + + + // !important + // These need to be made as variables mx-2.5 my-2.5 mt-2.5 mb-2.5 etc. for 2.5 = 0.75rem; or something similar - + // they were made just for Corporate Design + + .card-header-mx-2{ + margin-left: 0.75rem !important; + margin-right: 0.75rem !important; + } + .card-header-mt-2{ + margin-top: 0.75rem !important; + } + + + + + // Please read upper message! Don't push this on Live + + + + + .card-body { + padding: $card-body-padding; + } + + &.card-plain { + background-color: $card-plain-bg-color; + box-shadow: $card-plain-box-shadow; + } + + .card-footer { + padding: $card-footer-padding; + background-color: transparent; + } +} + +.author { + display: $card-author-display; + + .name > span { + line-height: $card-author-name-line-height; + font-weight: $font-weight-bold; + font-size: $font-size-sm; + color: $card-author-name-color; + } + + .stats { + font-size: $font-size-sm; + font-weight: $font-weight-normal; + } +} + +@import 'cards/card-background'; +@import 'cards/card-product'; diff --git a/assets/scss/astro-ecommerce/_dark-version.scss b/assets/scss/astro-ecommerce/_dark-version.scss new file mode 100644 index 0000000..c60004a --- /dev/null +++ b/assets/scss/astro-ecommerce/_dark-version.scss @@ -0,0 +1,309 @@ +.dark-version { + background-color: $dark-version-bg-color !important; + + > div[class*='bg-']{ + background-color: $dark-version-bg-color !important; + } + + .sidenav { + background: $dark-version-sidenav-bg-color !important; + + &.bg-transparent { + background: transparent !important; + + .navbar-nav { + .nav-link { + color: $white !important; + } + } + .nav { + .nav-link { + color: $white !important; + } + } + } + + &.bg-white { + background: $white !important; + + .navbar-nav { + .nav-link { + &.active:after { + color: $dark-version-caret-sidebar-color; + } + } + } + .collapse { + .nav-item { + .nav-link:not(.active) { + i { + color: $dark !important; + } + } + h6 { + color: $dark !important; + } + } + } + } + + .navbar-nav .nav-item { + .collapse, + .collapsing { + .nav { + .nav-item { + .nav-link:before { + background: $white !important; + opacity: .8; + } + + &.active { + .nav-link:before { + background: $white !important; + } + } + } + } + } + } + } + + .fixed-plugin { + .btn { + &.bg-gradient-dark, + &.btn-outline-dark { + color: $white !important; + border: 1px solid $white !important; + } + &.active { + background: $white !important; + color: $h-color !important; + } + } + } + + .bg-gradient-dark { + background-image: linear-gradient(195deg, $dark-gradient-dark, $dark-gradient-state-dark); + } + + .card, + .swal2-popup, + .dropdown .dropdown-menu, + .kanban-board { + background: $dark-version-card-bg-color; + box-shadow: $dark-version-card-box-shadow; + + .card-header { + background: transparent; + } + + p { + color: $white !important; + opacity: .6; + } + } + + .kanban-item { + background: transparent !important; + border: 1px solid; + } + + .swal2-html-container { + color: $white !important; + opacity: .6; + } + + + // navbar on scroll - dark mode + + .navbar { + &.blur { + .breadcrumb { + .breadcrumb-item, + h6 { + & a { + color: $dark !important; + } + color: $dark !important; + } + .breadcrumb-item.active:before { + color: #6c757d !important; + } + } + } + .breadcrumb h6 { + color: $white !important; + } + } + + + + h1, .h1, + h2, .h2, + h3, .h3, + h4, .h4, + h5, .h5, + h6:not(.font-weight-bolder), .h6, + a:not(.dropdown-item):not(.choices__item):not(.leaflet-control-zoom-in):not(.leaflet-control-zoom-out):not(.btn):not(.nav-link):not(.fixed-plugin-button):not(.opacity-5), + .table thead tr th, + .kanban-title-board { + color: $white !important; + } + + + .input-group { + &.input-group-dynamic, + &.input-group-static { + .form-control { + background-image: $dark-version-input-bg-image !important; + background-size: 0 100%, 100% 100%; + &:focus { + background-size: 100% 100%, 100% 100%; + } + } + } + + &.input-group-outline { + .form-control { + border-color: $dark-version-border-color !important; + } + } + + .is-valid, + .is-invalid { + border-color: $dark-version-border-color !important; + } + } + + .accordion { + .accordion-button { + border-color: $dark-version-border-color !important; + color: $white; + opacity: .8; + } + } + + .table > :not(caption) > * > * { + border-color: $dark-version-border-color !important; + color: $dark-version-table-color !important; + } + + label { + color: $dark-version-body-color !important; + } + + .list-group-item, + .multisteps-form__panel { + background-color: transparent !important; + border-color: rgba(255, 255, 255, .15) !important; + } + + .nav { + &.bg-white { + background-color: $dark-version-card-bg-color !important; + box-shadow: $dark-version-card-box-shadow; + } + + .nav-link[data-scroll]:hover { + color: $h-color !important; + } + } + + .toast { + background-color: $dark-version-card-bg-color !important; + box-shadow: $dark-version-card-box-shadow; + + .toast-header { + background: transparent; + } + + span { + color: $white; + } + + p { + color: $white !important; + opacity: .6; + } + } + + .choices { + .choices__input { + background-color: transparent !important; + border-bottom: 1px solid $dark-version-border-color; + color: $white; + } + .choices__list.choices__list--dropdown { + background: $dark-version-card-bg-color; + box-shadow: $dark-version-card-box-shadow; + } + } + + // Fullcalendar changes + .fc-theme-standard td, + .fc-theme-standard th { + border-color: $fc-theme-standard-dark-border-color; + } + + + // Datatable changes + .dataTable-sorter::after{ + border-bottom-color: $white; + } + + .dataTable-sorter::before{ + border-top-color: $white; + } + + // Quill changes + .ql-snow .ql-stroke { + stroke: $light; + } + + .ql-snow .ql-fill, .ql-snow .ql-stroke.ql-fill{ + fill: $light; + } + + .ql-toolbar.ql-snow .ql-picker-label{ + color: $light; + } + + .navbar-vertical { + .navbar-nav { + .nav-item { + .nav-link { + color: $white; + opacity: .8; + + &[data-bs-toggle="collapse"]:after { + color: $white; + } + + &.active { + box-shadow: $dark-nav-link-active-shadow; + color: $dark; + } + } + .collapse, + .collapsing { + .nav { + .nav-item { + .nav-link { + color: $white; + opacity: .6; + + &.active { + opacity: 1; + } + } + } + } + } + } + } + } +} + +body.dark-version { + color: $dark-version-body-color !important; +} diff --git a/assets/scss/astro-ecommerce/_dropdown.scss b/assets/scss/astro-ecommerce/_dropdown.scss new file mode 100644 index 0000000..48833fa --- /dev/null +++ b/assets/scss/astro-ecommerce/_dropdown.scss @@ -0,0 +1,333 @@ +@include media-breakpoint-up(lg) { + .dropdown, + .dropup, + .dropstart, + .dropend { + .dropdown-menu { + box-shadow: $dropdown-box-shadow; + cursor: pointer; + } + + .dropdown-toggle { + &:after, + &:before{ + font: normal normal normal 14px/1 FontAwesome; + border: none; + vertical-align: middle; + font-weight: $font-weight-bold; + } + &.show{ + &:after, + &:before{ + transform: $dropdown-toggle-arrow-transform; + } + } + &:after, + &:before{ + transition: $dropdown-toggle-arrow-transition; + } + } + } + + .dropdown, + .dropup{ + .dropdown-menu{ + transition: $dropdown-transition; + li{ + padding: $dropdown-li-padding; + } + } + + .dropdown-toggle { + &:after{ + content: "\f107"; + } + } + } + + .dropstart{ + .dropdown-toggle { + &:before{ + content: "\f104"; + } + } + } + + .dropend{ + .dropdown-toggle { + &:after{ + content: "\f105"; + } + } + } + + .dropdown { + &.dropdown-hover .dropdown-menu, + .dropdown-menu { + display: block; + opacity: 0; + top: 0; + transform-origin: $dropdown-transform-origin; + pointer-events: none; + transform: $dropdown-transform; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + will-change: transform,box-shadow; + } + + &.dropdown-hover:hover > .dropdown-menu, + .dropdown-menu.show { + opacity: 1; + pointer-events: auto; + visibility: visible; + transform: $dropdown-transform-show; + } + + &.dropdown-hover:hover > .dropdown-menu:before, + .dropdown-menu.show:before { + top: $dropdown-hover-arrow-active-top; + } + + &.dropdown-hover { + &:after { + content: ''; + position: absolute; + left: 0; + bottom: $dropdown-hover-after-bottom-pos; + width: 100%; + height: 100%; + } + } + + &:not(.dropdown-hover) .dropdown-menu { + margin-top: $dropdown-mt !important; + } + + .dropdown-menu { + &:before { + font-family: "FontAwesome"; + content: "\f0d8"; + position: absolute; + top: 0; + left: $dropdown-animation-arrow-left-position; + right: auto; + font-size: $dropdown-animation-arrow-font-size; + color: $white; + transition: $dropdown-animation-arrow-transition; + } + } + + .dropdown-item .arrow { + transform: $dropdown-subitem-arrow-rotate; + } + } + + .dropdown-item { + transition: background-color $dropdown-transition-time, color $dropdown-transition-time; + } +} + +@include media-breakpoint-down(lg) { + .navbar-toggler + .navbar-collapse { + .dropdown:not(.nav-item) { + .dropdown-menu { + display: block; + opacity: 0; + top: 0; + transform-origin: $dropdown-transform-origin; + pointer-events: none; + transform: $dropdown-transform; + transition: $dropdown-transition; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + will-change: transform,box-shadow; + box-shadow: $dropdown-box-shadow; + + &:before { + font-family: "FontAwesome"; + content: "\f0d8"; + position: absolute; + top: 0; + left: $dropdown-animation-arrow-left-position; + right: auto; + font-size: $dropdown-animation-arrow-font-size; + color: $white; + transition: $dropdown-animation-arrow-transition; + } + } + + &:not(.dropdown-hover) .dropdown-menu { + margin-top: $dropdown-mt !important; + } + + .dropdown-menu.show { + opacity: 1; + pointer-events: auto; + visibility: visible; + transform: $dropdown-transform-show; + + &:before { + top: $dropdown-hover-arrow-active-top; + } + } + } + .dropdown.nav-item .dropdown-menu { + background-color: transparent; + overflow: scroll; + position: relative; + transform: none !important; + box-shadow: none !important; + } + } + + :not(.navbar) .dropdown { + .dropdown-menu { + opacity: 0; + top: 0; + transform-origin: $dropdown-transform-origin; + pointer-events: none; + transform: $dropdown-transform; + transition: $dropdown-transition; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + will-change: transform,box-shadow; + box-shadow: $dropdown-box-shadow; + + &:before { + font-family: "FontAwesome"; + content: "\f0d8"; + position: absolute; + top: 0; + left: $dropdown-animation-arrow-left-position; + right: auto; + font-size: $dropdown-animation-arrow-font-size; + color: $white; + transition: $dropdown-animation-arrow-transition; + } + } + &:not(.dropdown-hover) .dropdown-menu { + margin-top: $dropdown-mt !important; + } + + .dropdown-menu.show { + opacity: 1; + pointer-events: auto; + visibility: visible; + + &:before { + top: $dropdown-hover-arrow-active-top; + } + } + + &.nav-item { + .dropdown-menu { + position: absolute; + } + } + } + + + + .dropdown.nav-item .dropdown-menu-animation { + display: block; + height: 0; + transition: all .35s ease; + padding-top: 0 !important; + padding-bottom: 0 !important; + opacity: 0; + + &.show { + height: 250px; + opacity: 1; + } + } + + .navbar.blur { + .dropdown { + .dropdown-menu.show { + transform: $dropdown-transform-responsive-show; + box-shadow: none; + margin-bottom: 1rem; + } + } + } +} + +// MultiLevel Dropdown Style + +.dropdown-menu li { + position: relative; +} + +.dropdown { + &.dropdown-subitem:after { + left: 100%; + bottom: 0; + width: 50%; + } + + .dropdown-menu { + .dropdown-item{ + border-radius: $border-radius-xs; + & + .dropdown-menu:before { + transform: $dropdown-subitem-arrow-rotate; + left: 0; + top: 0; + z-index: -1; + transition: left .35s ease; + } + } + &.dropdown-menu-end{ + right: 0 !important; + left: auto !important; + &:before{ + right: $dropdown-animation-arrow-left-position; + left: auto; + } + } + } + + &.dropdown-subitem:hover .dropdown-item + .dropdown-menu:before { + left: $dropdown-subitem-left-hover; + } + + & > .dropdown-menu { + .dropdown-item + .dropdown-menu { + transform: $dropdown-multilevel-transform-show; + } + } +} + +.dropdown .dropdown-menu .dropdown-item+.dropdown-menu { + right: $dropdown-subitem-position-right; + left: auto; + top: 0; +} +// End MultiLevel Dropdown Style + +.dropdown-image { + background-size: cover; +} + +@include media-breakpoint-up(lg) { + .dropdown-xxl { + min-width: $dropdown-xxl-min-width; + } + .dropdown-xl { + min-width: $dropdown-xl-min-width; + } + + .dropdown-lg { + min-width: $dropdown-lg-min-width; + } + + .dropdown-md { + min-width: $dropdown-md-min-width; + } +} + +@include media-breakpoint-down(xl) { + .dropdown-lg-responsive { + min-width: $dropdown-lg-width-responsive; + } +} diff --git a/assets/scss/astro-ecommerce/_dropup.scss b/assets/scss/astro-ecommerce/_dropup.scss new file mode 100644 index 0000000..f18048c --- /dev/null +++ b/assets/scss/astro-ecommerce/_dropup.scss @@ -0,0 +1,41 @@ +.dropup { + .dropdown-menu { + box-shadow: $dropdown-box-shadow; + transition: $dropdown-transition; + cursor: pointer; + top: auto !important; + bottom: 100% !important; + margin-bottom: $dropup-mb !important; + display: block; + opacity: 0; + transform-origin: $dropup-transform-origin; + pointer-events: none; + transform: $dropup-transform; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + will-change: transform,box-shadow; + + &.show{ + pointer-events: auto; + transform: $dropup-transform-show; + opacity: 1; + + &:after { + bottom: -($dropup-animation-arrow-bottom-position - 2); + } + } + + &:after { + font-family: "FontAwesome"; + content: "\f0d7"; + position: absolute; + z-index: -1; + bottom: $dropup-animation-arrow-bottom-position; + left: $dropdown-animation-arrow-left-position; + right: auto; + font-size: $dropdown-animation-arrow-font-size; + color: $white; + transition: $dropup-animation-arrow-transition; + } + } +} \ No newline at end of file diff --git a/assets/scss/astro-ecommerce/_fixed-plugin.scss b/assets/scss/astro-ecommerce/_fixed-plugin.scss new file mode 100644 index 0000000..1bf218a --- /dev/null +++ b/assets/scss/astro-ecommerce/_fixed-plugin.scss @@ -0,0 +1,60 @@ +.fixed-plugin{ + .fixed-plugin-button{ + background: $white; + border-radius: $fixed-plugin-radius; + bottom: $fixed-plugin-bottom; + right: $fixed-plugin-right; + font-size: $font-size-xl; + z-index: $fixed-plugin-button-z-index; + box-shadow: $fixed-plugin-box-shadow; + cursor: pointer; + i{ + pointer-events: none; + } + } + .card{ + position: fixed !important; + right: -$fixed-plugin-card-width; + top: 0; + height: 100%; + left: auto!important; + transform: unset !important; + width: $fixed-plugin-card-width; + border-radius: 0; + padding: 0 10px; + transition: .2s ease; + z-index: $fixed-plugin-card-z-index; + } + + .badge{ + border: 1px solid $white; + border-radius: 50%; + cursor: pointer; + display: inline-block; + height: 23px; + margin-right: 5px; + position: relative; + width: 23px; + transition: $transition-base; + &:hover, + &.active{ + border-color: $dark; + } + } + + .btn.bg-gradient-primary:not(:disabled):not(.disabled){ + border: 1px solid transparent; + &:not(.active){ + background-color: transparent; + background-image: none; + border: 1px solid $primary; + color: $primary; + } + } + + &.show{ + .card{ + right: 0; + } + } +} diff --git a/assets/scss/astro-ecommerce/_footer.scss b/assets/scss/astro-ecommerce/_footer.scss new file mode 100644 index 0000000..eb5d67f --- /dev/null +++ b/assets/scss/astro-ecommerce/_footer.scss @@ -0,0 +1,14 @@ +.footer { + .nav-link { + color: $dark; + font-weight: $font-weight-normal; + font-size: $font-size-sm; + padding-top: 0; + padding-bottom: $nav-link-footer-padding; + + &:hover { + opacity: 1 !important; + transition: $footer-link-animation; + } + } +} diff --git a/assets/scss/astro-ecommerce/_forms.scss b/assets/scss/astro-ecommerce/_forms.scss new file mode 100644 index 0000000..df9b07e --- /dev/null +++ b/assets/scss/astro-ecommerce/_forms.scss @@ -0,0 +1,52 @@ +.input-group { + @include border-radius($input-border-radius, 0); + + &, + .input-group-text { + transition: $input-transition; + } + + & > :not(:first-child):not(.dropdown-menu) { + margin-left: 0; + } + + .form-control { + box-shadow: none; + background-image: none; + + &:not(:first-child) { + border-left: 0; + padding-left: 0; + } + &:not(:last-child) { + border-right: 0; + padding-right: 0; + } + + & + .input-group-text { + border-left: 0; + border-right: $input-border-width solid $input-border-color; + } + &:disabled{ + cursor: no-drop; + &:hover{ + border-color: inherit; + } + } + } + + + + &.focused { + box-shadow: $input-focus-box-shadow; + } + + &.focused .input-group-text { + border-color: $input-focus-border-color; + } +} + + +.form-group { + margin-bottom: 1rem; +} diff --git a/assets/scss/astro-ecommerce/_gradients.scss b/assets/scss/astro-ecommerce/_gradients.scss new file mode 100644 index 0000000..7d9ca97 --- /dev/null +++ b/assets/scss/astro-ecommerce/_gradients.scss @@ -0,0 +1,18 @@ +@each $prop, $value in $theme-gradient-colors { + .bg-gradient-#{$prop} { + @include gradient-directional(nth($value, 1) 0%, nth($value, -1) 100%, $deg: 310deg); + } +} + +@each $prop, $value in $theme-colors { + .bg-gradient-faded-#{$prop} { + background-image: radial-gradient(370px circle at 80% 50%,rgba($value, .6) 0,darken($value, 10%) 100%) + } +} + + +@each $prop, $value in $theme-colors { + .bg-gradient-faded-#{$prop}-vertical{ + background-image: radial-gradient(200px circle at 50% 70%, rgba($value, .3) 0, $value 100%); + } +} diff --git a/assets/scss/astro-ecommerce/_header.scss b/assets/scss/astro-ecommerce/_header.scss new file mode 100644 index 0000000..d8dba92 --- /dev/null +++ b/assets/scss/astro-ecommerce/_header.scss @@ -0,0 +1,25 @@ +.page-header { + padding: $page-header-padding; + position: $page-header-position; + overflow: $page-header-overflow; + display: $page-header-display; + align-items: $page-header-align-items; + background-size: $page-header-bg-size; + background-position: $page-header-bg-position; + + .container { + z-index: $page-header-conteiner-index; + } +} + +.oblique { + overflow: $header-oblique-overflow; + width: $header-oblique-img-width; + right: $header-oblique-img-right; + border-bottom-left-radius: $border-radius-lg; + + .oblique-image { + background-position: 0 50%; + background-repeat: no-repeat; + } +} diff --git a/assets/scss/astro-ecommerce/_info-areas.scss b/assets/scss/astro-ecommerce/_info-areas.scss new file mode 100644 index 0000000..fb0f312 --- /dev/null +++ b/assets/scss/astro-ecommerce/_info-areas.scss @@ -0,0 +1,178 @@ +.icon-shape { + width: $icon-md-width; + height: $icon-md-width; + background-position: $icon-shape-bg-position; + border-radius: $border-radius-lg; + + i { + color: $white; + opacity: $icon-shape-icon-opacity; + top: $info-icon-top; + position: $info-icon-position; + } + + .ni { + top: 14px; + } +} + +.icon-xxs { + width: $icon-xxs-width; + height: $icon-xxs-height; + + i { + top: $info-icon-top-xxs; + font-size: .5rem; + } +} + +.icon-xs { + width: $icon-xs-width; + height: $icon-xs-height; + + i { + top: $info-icon-top-xs; + font-size: .5rem; + } +} + +.icon-sm { + width: $icon-sm-width; + height: $icon-sm-height; + + i { + top: $info-icon-top-sm; + font-size: .65rem; + } +} + +.icon-md { + width: $icon-md-width; + height: $icon-md-height; + + i { + top: $info-icon-top-md; + font-size: $font-size-sm; + } + + &.icon-striped { + background-position-x: $icon-striped-bg-md; + background-position-y: $icon-striped-bg-md; + + i { + top: 11%; + margin-left: -10px; + font-size: $font-size-sm; + } + } +} + +.icon-lg { + width: $icon-lg-width; + height: $icon-lg-height; + i { + top: $info-icon-top-lg; + font-size: $font-size-xl; + } + + &.icon-striped { + background-position-x: $icon-striped-bg-lg; + background-position-y: $icon-striped-bg-lg; + + i { + top: 21%; + margin-left: -15px; + } + } +} + +.icon-xl { + width: $icon-xl-width; + height: $icon-xl-height; + border-radius: $border-radius-lg; + + i { + top: $info-icon-top-xl; + font-size: 1.6rem; + } + + &.icon-striped { + background-position-x: $icon-striped-bg-xl; + background-position-y: $icon-striped-bg-xl; + + i { + top: 30%; + margin-left: -15px; + } + } +} + +.info-horizontal { + text-align: left !important; + + .icon { + float: left; + } + .description { + overflow: hidden; + } +} + +// Icon SVG fill color change + +svg.text-primary { + .color-foreground { + fill: $primary-gradient; + } + .color-background { + fill: $primary-gradient-state; + } +} +svg.text-secondary { + .color-foreground { + fill: $secondary-gradient; + } + .color-background { + fill: $secondary-gradient-state; + } +} +svg.text-info { + .color-foreground { + fill: $info-gradient; + } + .color-background { + fill: $info-gradient-state; + } +} +svg.text-warning { + .color-foreground { + fill: $warning-gradient; + } + .color-background { + fill: $warning-gradient-state; + } +} +svg.text-danger { + .color-foreground { + fill: $danger-gradient; + } + .color-background { + fill: $danger-gradient-state; + } +} +svg.text-success { + .color-foreground { + fill: $success-gradient; + } + .color-background { + fill: $success-gradient-state; + } +} +svg.text-dark { + .color-foreground { + fill: $dark-gradient; + } + .color-background { + fill: $dark-gradient-state; + } +} diff --git a/assets/scss/astro-ecommerce/_misc.scss b/assets/scss/astro-ecommerce/_misc.scss new file mode 100644 index 0000000..306f5ca --- /dev/null +++ b/assets/scss/astro-ecommerce/_misc.scss @@ -0,0 +1,387 @@ +// Blur effect + +.blur { + box-shadow: $blur-box-shadow; + -webkit-backdrop-filter: $blur-backdrop-filter; + backdrop-filter: $blur-backdrop-filter; + background-color: $blur-background-color !important; + + &.saturation-less { + -webkit-backdrop-filter: $blur-backdrop-filter-less; + backdrop-filter: $blur-backdrop-filter-less; + } + + &.blur-rounded { + border-radius: $blur-border-radius-rounded; + } + + &.blur-light { + background-color: $blur-light-background; + } + &.blur-dark { + background-color: $blur-dark-background; + } +} + +.shadow-blur { + box-shadow: $shadow-blur-box-shadow !important; +} + +.shadow-card { + box-shadow: $card-box-shadow !important; +} + +.navbar-blur { + -webkit-backdrop-filter: $blur-backdrop-filter; + backdrop-filter: $blur-backdrop-filter; + background-color: rgba($white, .58) !important; +} + +.blur-section { + -webkit-backdrop-filter: $blur-backdrop-filter; + backdrop-filter: $blur-backdrop-filter; + + &.blur-gradient-primary { + @include gradient-directional(rgba($primary-gradient, .95) 0%, rgba($primary-gradient-state, .95) 100%, $deg: 310deg); + } +} + +// Transition on hover +* { + &.move-on-hover { + -webkit-transition: $move-transition; + transition: $move-transition; + overflow: $move-overflow; + -webkit-transform-origin: $move-transform-origin; + transform-origin: $move-transform-origin; + transform-origin: $move-transform-origin; + -webkit-transform: $move-transform; + transform: $move-transform; + -webkit-backface-visibility: $move-backface-visibility; + backface-visibility: $move-backface-visibility; + will-change: $move-will-change; + + &:hover { + -webkit-transform: $move-hover-transform; + transform: $move-hover-transform; + } + } + + &.gradient-animation { + background: $gradient-animation-background; + background-size: $gradient-animation-bg-size !important; + animation: $device-wrapper-animation; + } +} + +// Vertical Line +hr.vertical { + position: absolute; + background-color: $hr-bg-color; + height: 100%; + right: 0; + top: 0; + width: 1px; + + &.light { + background-image: $hr-vertical-bg-image-light; + } + + &.dark { + background-image: $hr-vertical-bg-image-dark; + } + + &.gray-light { + background-image: $hr-horizontal-bg-image-gray-light; + } +} + +// Horizontal Line +hr.horizontal { + background-color: $hr-bg-color; + + &.light { + background-image: $hr-horizontal-bg-image-light; + } + &.dark { + background-image: $hr-horizontal-bg-image-dark; + } + + &.gray-light { + background-image: $hr-horizontal-bg-image-gray-light; + } +} + +// lock style +.lock-size { + width: 1.7rem; + height: 1.7rem; +} + +.border-radius-xs { + border-radius: $border-radius-xs; +} + +.border-radius-sm { + border-radius: $border-radius-sm; +} + +.border-radius-md { + border-radius: $border-radius-md; +} + +.border-radius-lg { + border-radius: $border-radius-lg; +} + +.border-radius-xl { + border-radius: $border-radius-xl; +} + +.border-radius-2xl { + border-radius: $border-radius-2xl; +} + +.border-radius-section { + border-radius: $border-radius-section; +} + +.border-bottom-end-radius-0 { + border-bottom-right-radius: 0; +} + +.border-top-end-radius-0 { + border-top-right-radius: 0; +} + +.border-bottom-start-radius-0 { + border-bottom-left-radius: 0; +} + +.border-top-start-radius-0 { + border-top-left-radius: 0; +} + +.border-dashed{ + border-style: dashed !important; +} + +.z-index-sticky { + z-index: $zindex-sticky; +} + + +// moving waves animation +.waves { + position: $waves-position; + width: $waves-width; + height: $waves-height; + margin-bottom: $waves-margin-bottom; + /*Fix for safari gap*/ + min-height: $waves-min-height; + max-height: $waves-max-height; + + &.waves-sm { + height: $waves-height-sm; + min-height: $waves-min-height-sm; + } + + &.no-animation { + .moving-waves > use { + animation: none; + } + } +} + +.wave-rotate { + transform: $waves-rotate; +} +/* Animation for the waves */ +.moving-waves > use { + animation: $moving-waves-animation; +} + +.moving-waves > use:nth-child(1) { + animation-delay: $moving-waves-child-1-delay; + animation-duration: $moving-waves-child-1-duration; +} + +.moving-waves > use:nth-child(2) { + animation-delay: $moving-waves-child-2-delay; + animation-duration: $moving-waves-child-2-duration; +} + +.moving-waves > use:nth-child(3) { + animation-delay: $moving-waves-child-3-delay; + animation-duration: $moving-waves-child-3-duration; +} + +.moving-waves > use:nth-child(4) { + animation-delay: $moving-waves-child-4-delay; + animation-duration: $moving-waves-child-4-duration; +} + +.moving-waves > use:nth-child(5) { + animation-delay: $moving-waves-child-5-delay; + animation-duration: $moving-waves-child-5-duration; +} + +.moving-waves > use:nth-child(6) { + animation-delay: $moving-waves-child-6-delay; + animation-duration: $moving-waves-child-6-duration; +} +@keyframes move-forever { + 0% { + transform: $moving-waves-keyframe-0; + } + + 100% { + transform: $moving-waves-keyframe-100; + } +} +/*Shrinking for mobile*/ +@include media-breakpoint-down(md) { + .waves { + height: $waves-mobile-height; + min-height: $waves-mobile-height; + } + + hr.horizontal { + background-color: $hr-bg; + + &:not(.dark) { + background-image: $hr-bg-image; + } + + &.vertical { + transform: $hr-transform; + } + + &.dark { + background-image: $hr-bg-dark-image; + } + } +} + +.overflow-visible { + overflow: visible !important; +} + +// popover title +.popover { + .popover-header { + font-weight: 600; + } +} + + +// Background Sizes +.bg-cover{ + background-size: cover; +} + +// Overflow directional +.overflow-x-hidden { + overflow-x: hidden; +} +.overflow-y-hidden { + overflow-y: hidden; +} +.overflow-x-scroll { + overflow-x: scroll; +} +.overflow-y-scroll { + overflow-y: scroll; +} + +// Mask Class +.mask { + position: $mask-position; + background-size: $mask-bg-size; + background-position: $mask-bg-position; + top: $mask-top; + left: $mask-left; + width: $mask-width; + height: $mask-height; + opacity: $mask-opacity; +} + + +// Cursor Pointer Class +.cursor-pointer { + cursor: pointer; +} + +// Translate 50% Class +.transform-translate-50{ + transform: translate(0,-50%) +} + +// VR Pages + +@include media-breakpoint-up(lg) { + .virtual-reality { + .sidenav { + margin-top: $spacer * 1.5; + animation-name: $animation-name; + animation-fill-mode: $animation-mode; + animation-duration: $animation-duration; + transform: $transform-scale; + background: $white; + left: $position-left !important; + position: absolute; + } + } +} + +.bg-black { + background-color: $black; +} + +// Faded bottom backdrop +.faded { + position: absolute; + bottom: 0; + width: 100%; + height: 100%; + z-index: 2; + background: rgba(255, 255, 255, 0) linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.97) 80%) repeat scroll 0 0; +} + +// Text with border +.text-border { + &:after, + &:before { + content: ""; + display: $text-border-display; + width: $text-border-width; + height: $text-border-height; + position: $text-border-position; + vertical-align: $text-border-vertical-align; + } + + &:after{ + background: $text-border-bg-color-after; + } + + &:before{ + background: $text-border-bg-color-before; + } + + &:before { + right: $text-border-before-right; + margin-left: $text-border-before-ml; + } + + &:after { + left: $text-border-after-left; + margin-right: $text-border-after-mr; + } +} + +// Checkboxes in Accordion +.accordion { + .form-check-input { + margin-left: 0; + } +} \ No newline at end of file diff --git a/assets/scss/astro-ecommerce/_nav.scss b/assets/scss/astro-ecommerce/_nav.scss new file mode 100644 index 0000000..b55745d --- /dev/null +++ b/assets/scss/astro-ecommerce/_nav.scss @@ -0,0 +1,138 @@ +.nav { + &.nav-pills { + background: $nav-pills-background; + border-radius: $nav-pills-border-radius; + position: relative; + &.nav-pills-vertical { + border-radius: $nav-pills-vertical-radius; + .nav-link { + &.active { + border-radius: $nav-pills-vertical-link-radius; + } + } + } + .nav-link { + z-index: 3; + color: $dark; + border-radius: $nav-pills-link-border-radius; + background-color: inherit; + &.active { + animation: $nav-pills-link-active-animation; + } + &:hover:not(.active) { + color: $dark; + } + } + &.nav-pills-primary { + background: $white; + color: $white; + .nav-link{ + &.active{ + color: $white; + } + } + .moving-tab { + .nav-link.active { + background: $primary-gradient; + color: $primary-gradient; + } + } + } + &.nav-pills-info { + background: $white; + color: $white; + .nav-link{ + &.active{ + color: $white; + } + } + .moving-tab { + .nav-link.active { + background: $info-gradient; + color: $info-gradient; + } + } + } + &.nav-pills-success { + background: $white; + color: $white; + .nav-link{ + &.active{ + color: $white; + } + } + .moving-tab { + .nav-link.active { + background: $success-gradient; + color: $success-gradient; + } + } + } + &.nav-pills-warning { + background: $white; + color: $white; + .nav-link{ + &.active{ + color: $white; + } + } + .moving-tab { + .nav-link.active { + background: $warning-gradient; + color: $warning-gradient; + } + } + } + &.nav-pills-danger { + background: $white; + color: $white; + .nav-link{ + &.active{ + color: $white; + } + } + .moving-tab { + .nav-link.active { + background: $danger-gradient; + color: $danger-gradient; + } + } + } + &.nav-pills-dark { + background: $white; + color: $white; + .nav-link{ + &.active{ + color: $white; + } + } + .moving-tab { + .nav-link.active { + background: $dark-gradient; + color: $dark-gradient; + } + } + } + .nav-item{ + z-index: 3; + } + } +} +.moving-tab { + z-index: 1 !important; + .nav-link { + color: $white; + transition: .2s ease; + border-radius: $nav-pills-link-border-radius; + &.active { + color: $white; + font-weight: $font-weight-bold; + box-shadow: $nav-pills-link-box-shadow; + animation: $nav-pills-link-active-animation; + background: $white; + } + &:hover:not(.active) { + color: $dark; + } + } +} diff --git a/assets/scss/astro-ecommerce/_navbar-vertical.scss b/assets/scss/astro-ecommerce/_navbar-vertical.scss new file mode 100644 index 0000000..edc0d0b --- /dev/null +++ b/assets/scss/astro-ecommerce/_navbar-vertical.scss @@ -0,0 +1,794 @@ +// +// Vertical navbar + Sidenav +// + +@use "sass:math"; + +.navbar-vertical { + .navbar-brand > img, + .navbar-brand-img { + max-width: 100%; + max-height: 2rem; + } + // Navbar navigaton + .navbar-nav { + flex-direction: column !important; + // Navbar link + .nav-link { + padding-left: $navbar-padding-x; + padding-right: $navbar-padding-x; + font-weight: $navbar-nav-link-font-weight; + color: $white; + // Icon + > i { + min-width: $navbar-icon-min-width; + font-size: 0.9375rem; + line-height: ($font-size-base * $line-height-base); + } + // Dropdown + .dropdown-menu { + border: none; + + .dropdown-menu { + margin-left: $dropdown-item-padding-x * 0.5; + } + } + .icon { + padding: 10px; + } + } + + .nav-sm { + .nav-link { + font-size: 0.8125rem; + } + } + } + // Navbar navigation + .navbar-nav .nav-link { + display: flex; + align-items: center; + white-space: nowrap; + } + // Navbar heading + .navbar-heading { + padding-top: $nav-link-padding-y; + padding-bottom: $nav-link-padding-y; + font-size: $font-size-xs; + text-transform: uppercase; + letter-spacing: 0.04em; + } + // Expanded navbar specific styles + &.navbar-expand { + @each $breakpoint, $dimension in $grid-breakpoints { + &-#{$breakpoint} { + @include media-breakpoint-up(#{$breakpoint}) { + display: block; + position: fixed; + top: 0; + bottom: 0; + width: 100%; + max-width: $navbar-vertical-open-width !important; + overflow-y: auto; + padding: 0; + box-shadow: none; + + .navbar-collapse { + display: block; + overflow: auto; + height: $navbar-vertical-inner; + } + // Container + > [class*="container"] { + flex-direction: column; + align-items: stretch; + min-height: 100%; + padding-left: 0; + padding-right: 0; // Target IE 10 & 11 + @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { + min-height: none; + height: 100%; + } + } + // Fixes the vertical navbar to the left + &.fixed-start { + left: 0; + } + // Fixed the vertical navbar to the right + &.fixed-end { + right: 0; + } + // Navbar navigation + .navbar-nav .nav-link { + padding-top: $navbar-vertical-nav-link-padding-y; + padding-bottom: $navbar-vertical-nav-link-padding-y; + margin: 0; + + .nav-link-text, + .sidenav-mini-icon, + .sidenav-normal, + i { + pointer-events: none; + } + } + + .navbar-nav .nav-item { + width: 100%; + } + + .navbar-nav > .nav-item { + margin-top: 0.125rem; + + .icon { + .ni { + top: 0; + } + } + } + + .lavalamp-object { + width: calc(100% - 1rem) !important; + background: theme-color("primary"); + color: color-yiq($primary); + margin-right: 0.5rem; + margin-left: 0.5rem; + padding-left: 1rem; + padding-right: 1rem; + border-radius: $border-radius-sm; + } + // Second level + .navbar-nav .nav .nav-link { + padding-top: 0.417rem; + padding-bottom: 0.417rem; + padding-left: 15px; + + > span.sidenav-normal { + transition: all 0.1s ease 0s; + } + } + } + } + } + } +} + +.sidenav { + // Define colors + @each $color, $value in $theme-colors { + &[data-color="#{$color}"] { + .navbar-nav > .nav-item > .nav-link.active .icon { + .color-background, + .color-foreground { + fill: $value; + } + } + } + } +} +// Sidenav + Main content transition + +.main-content, +.sidenav { + transition: $transition-base; +} +// +// Sidenav +// + +.sidenav { + z-index: 9999; + + .navbar-brand, + .navbar-heading { + display: block; + } + @include media-breakpoint-up(xl) { + &:hover { + max-width: $navbar-vertical-open-width; + } + + .sidenav-toggler { + padding: 1.5rem; + } + + &.fixed-start ~ .main-content { + margin-left: $navbar-vertical-open-width; + &.main-content-documentation{ + margin-left: 21rem; + } + } + + &.fixed-end ~ .main-content { + margin-right: $navbar-vertical-open-width + 1.5; + } + } + + .navbar-heading .docs-mini { + padding-left: 3px; + } + + .navbar-heading { + transition: all 0.1s ease; + } + + .navbar-brand { + padding: $navbar-vertical-navbar-brand-padding; + } +} + +.sidenav-header { + height: $sidenav-header-width; +} + +.sidenav-footer { + .card { + &.card-background { + &:after { + opacity: $sidenav-card-opacity; + } + } + } +} +// Sidenav states + +.g-sidenav-show { + .sidenav { + .nav-item .collapse { + height: auto; + @include transition($transition-base); + } + + .nav-link-text { + transition: 0.3s ease; + opacity: 1; + } + } +} +// Media fixes for iPhone 5 like resolutions +@include media-breakpoint-down(xl) { + .g-sidenav-show { + &.rtl { + .sidenav { + transform: translateX($navbar-vertical-open-width + 1.5); + } + } + + &:not(.rtl) { + .sidenav { + transform: translateX(-($navbar-vertical-open-width + 1.5)); + } + } + + .sidenav { + &.fixed-start~.main-content { + margin-left: 0 !important; + } + } + + &.g-sidenav-pinned { + .sidenav { + transform: translateX(0); + } + } + } +} + +.navbar-vertical { + // Background White + &.bg-white { + box-shadow: $card-box-shadow; + box-shadow: $box-shadow-xs; + + .navbar-nav { + > .nav-item { + > .nav-link { + .icon { + svg { + .color-background { + fill: rgba($dark, .5); + } + + .color-foreground { + fill: $dark; + } + } + } + &.active{ + background: $slate-900; + box-shadow: $box-shadow-xs; + .icon { + svg { + .color-background{ + fill: rgba($white, .5); + } + .color-foreground { + fill: $white; + } + } + } + } + } + &.border-start{ + border-color: rgba($dark, .5) !important; + .nav-link.active { + color: $dark; + &:before{ + border: 2px solid $dark; + } + } + } + } + + .nav-link { + color: rgba($dark, .8); + &.active { + box-shadow: none; + } + } + } + + .sidenav-footer{ + .card{ + box-shadow: $box-shadow-xs; + } + } + } + + // Background Dark + &.bg-slate-900{ + .sidenav-header{ + .navbar-brand{ + span{ + color: $white; + } + } + } + + .navbar-nav{ + > .nav-item { + > .nav-link { + .icon { + svg { + .color-background { + fill: rgba($white, .5); + } + + .color-foreground { + fill: $white; + } + } + } + } + &.border-start{ + border-color: rgba($white, .5) !important; + .nav-link.active { + color: $white; + &:before{ + border: 2px solid $white; + } + } + } + } + } + .sidenav-footer{ + .card{ + background: $slate-800; + .docs-info{ + h6, + a{ + color: $white; + } + } + } + } + } + + .navbar-nav .nav-link.active { + box-shadow: $card-box-shadow; + border-radius: $border-radius-sm; + } + + .navbar-nav{ + & > .nav-item { + .nav-link.active { + color: $white; + font-weight: $font-weight-bold; + background-color: $slate-800; + + .icon { + svg { + .color-background, + .color-foreground { + fill: $primary; + } + } + } + } + &.border-start{ + margin-left: $navbar-nav-link-border-margin-left; + .nav-link.active { + background: transparent; + &:before{ + content: ""; + position: absolute; + left: 0; + top: 0; + height: 100%; + border-radius: $border-radius-xs; + margin-left: $navbar-nav-link-before-margin-left; + } + } + } + } + } +} + +.navbar-main { + transition: box-shadow $transition-base-time ease-in, background-color $transition-base-time ease-in; + + &.fixed-top { + width: calc(100% - (#{$navbar-vertical-open-width} + #{$spacer * 1.5} * 3)); + } + + &.fixed-top + [class*="container"] { + margin-top: 7.1875rem !important; + } +} +// Navbar Vertical Extend +.navbar-vertical { + .navbar-nav .nav-link[data-bs-toggle="collapse"] { + &:after { + display: inline-block; + font-style: normal; + font-variant: normal; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + font-family: 'Font Awesome 5 Free'; + font-weight: 700; + content: "\f107"; + margin-left: auto; + color: rgba($dark-gradient-state,0.5); + @include transition($transition-base); + } + // Expanded + &[aria-expanded="true"] { + &:after { + color: $dark-gradient-state; + transform: rotate(180deg); + } + } + } + + .navbar-nav { + .nav-item { + .collapse, + .collapsing { + .nav { + @include transition($transition-base); + + .nav-item { + .nav-link { + position: relative; + background-color: transparent; + box-shadow: none; + color: rgba($dark-gradient-state,0.5); + margin-left: $navbar-vertical-collapse-margin-left; + + &:before { + content: ""; + position: absolute; + left: $navbar-vertical-collapse-left; + top: $navbar-vertical-collapse-top; + transform: $navbar-vertical-collapse-translate; + height: $navbar-vertical-collapse-dot-size; + width: $navbar-vertical-collapse-dot-size; + border-radius: $border-radius-2xl; + background: rgba($dark-gradient-state, 0.5); + } + + &.active { + color: $dark-gradient-state; + + &:before { + height: $navbar-vertical-collapse-dot-size-active; + width: $navbar-vertical-collapse-dot-size-active; + background: $dark-gradient-state; + } + } + } + + &.active { + .nav-link { + color: $dark-gradient-state; + + &:before { + height: $navbar-vertical-collapse-dot-size-active; + width: $navbar-vertical-collapse-dot-size-active; + background: $dark-gradient-state; + } + } + } + // Third level + .nav-item { + .nav-link { + &:before { + content: none; + } + } + } + } + } + } + .sidenav-docs{ + .nav { + .nav-item { + .nav-link { + position: relative; + background-color: transparent; + box-shadow: none; + color: #444; + margin-left: $navbar-vertical-collapse-margin-left; + + &:before { + content: ""; + position: absolute; + left: 0; + top: $navbar-vertical-collapse-top; + transform: $navbar-vertical-collapse-translate; + height: 120%; + width: 1px; + border-radius: $border-radius-2xl; + background: #dddfe6; + } + } + } + } + } + } + } + + &.blur { + .navbar-nav > .nav-item { + .nav-link { + background-color: transparent; + box-shadow: none; + } + } + } +} +// Styles for minimized sidenav +.navbar-vertical { + .navbar-brand { + .navbar-brand-img, + span { + @include transition($transition-base); + } + } + + .nav-item { + .nav-link { + span.sidenav-mini-icon { + @include transition($transition-base); + text-align: center; + width: 0; + } + } + } + + .docs-info { + @include transition($transition-base); + } +} + +.g-sidenav-show:not(.g-sidenav-hidden) { + .navbar-vertical { + .nav-item { + .nav-link { + span.sidenav-mini-icon { + opacity: 0; + } + } + } + } +} +@include media-breakpoint-up(xl) { + .g-sidenav-hidden { + &.rtl .main-content { + margin-right: $navbar-vertical-hidden-width !important; + + .navbar-vertical { + &:hover { + max-width: $navbar-vertical-open-width !important; + } + } + } + + &.rtl { + .sidenav:hover { + & + .main-content { + margin-right: $navbar-vertical-open-width + 1.5 !important; + } + } + } + + .navbar-vertical { + max-width: $navbar-vertical-hidden-width !important; + + &.fixed-start ~ .main-content { + margin-left: $navbar-vertical-hidden-width + 1.5; + } + + .navbar-brand { + img { + width: auto !important; + } + + span { + opacity: 0; + } + } + + .nav-item { + .nav-link { + .icon { + padding: 10px; + } + + .nav-link-text, + .sidenav-normal { + opacity: 0; + width: 0; + } + + .sidenav-mini-icon { + min-width: $navbar-icon-min-width; + margin-left: $navbar-icon-margin-left; + opacity: 1; + } + + &[data-bs-toggle="collapse"]:after { + content: ""; + } + } + + .collapse { + .nav { + margin-left: 0 !important; + padding-left: 0 !important; + + .nav-item { + .nav-link { + margin-left: $navbar-vertical-nav-link-padding-x; + + &:before { + content: none; + } + + &[data-bs-toggle="collapse"]:after { + content: "\f107"; + } + } + } + } + } + } + + .card.card-background { + .icon-shape { + margin-bottom: 0 !important; + } + + .docs-info { + opacity: 0; + width: 0; + height: 0; + } + } + // Hover style on sidenav minimized + &:hover { + max-width: $navbar-vertical-open-width !important; + + &.fixed-start ~ .main-content { + margin-left: $navbar-vertical-open-width + 1.5; + } + + .navbar-brand { + span { + opacity: 1; + } + } + + .nav-item { + .nav-link { + .nav-link-text, + .sidenav-normal { + opacity: 1; + width: auto; + } + + .sidenav-mini-icon { + opacity: 0; + width: 0; + min-width: 0; + } + + &[data-bs-toggle="collapse"]:after { + content: "\f107"; + } + } + + .collapse { + .nav { + margin-left: 1.5rem !important; + padding-left: 1rem !important; + + .nav-item { + .nav-link { + margin-left: $navbar-vertical-collapse-margin-left; + + &:before { + content: ""; + } + } + + .collapse, + .collapsing { + .nav { + margin-left: 0 !important; + padding-left: 0 !important; + + .nav-item { + .nav-link { + &:before { + content: none; + } + } + } + } + } + } + } + } + } + + .card.card-background { + .icon-shape { + margin-bottom: 1rem !important; + } + + .docs-info { + opacity: 1; + width: auto; + height: auto; + } + } + } + } + } +} + +// sidebar icons color + +.navbar-vertical { + .navbar-nav { + .nav-item { + .nav-link { + .icon i { + color: $dark-gradient; + } + } + } + } +} + +.navbar-vertical { + .navbar-nav { + .nav-item { + .nav-link { + .icon i { + color: $white; + } + } + } + } +} diff --git a/assets/scss/astro-ecommerce/_navbar.scss b/assets/scss/astro-ecommerce/_navbar.scss new file mode 100644 index 0000000..66d177e --- /dev/null +++ b/assets/scss/astro-ecommerce/_navbar.scss @@ -0,0 +1,216 @@ +.navbar { + box-shadow: $navbar-box-shadow; + + .navbar-brand { + color: $slate-800; + line-height: 1rem; + } + .nav-link { + color: $navbar-nav-link-color; + padding: $navbar-nav-link-padding; + font-weight: $font-weight-semibold; + font-size: $font-size-sm; + line-height: 1rem; + } + + &.navbar-absolute { + position: absolute; + width: 100%; + z-index: 1; + } + + &.navbar-transparent { + .nav-link { + &, i { + color: $white; + } + + + &:hover, + &:focus { + color: rgba($white, .75); + } + } + + .navbar-toggler { + .navbar-toggler-icon { + .navbar-toggler-bar { + background: $white; + } + } + } + + .navbar-collapse{ + border-radius: $border-radius-xl; + } + } + + &.navbar-dark { + .navbar-collapse.show, + .navbar-collapse.collapsing + { + .dropdown-header.text-dark{ + color: $white !important; + } + } + } + .sidenav-toggler-inner{ + width: $sidenav-toggler-width; + .sidenav-toggler-line{ + transition: $sidenav-toggler-line-transition; + background: $body-color; + border-radius: $border-radius-xs; + position: relative; + display: block; + height: $sidenav-toggler-line-height; + &:not(:last-child){ + margin-bottom: $sidenav-toggler-line-margin-bottom; + } + } + } + .g-sidenav-show.g-sidenav-pinned &{ + .sidenav-toggler-inner{ + .sidenav-toggler-line:first-child, + .sidenav-toggler-line:last-child { + width: $sidenav-toggler-line-active-width; + transform: $sidenav-toggler-line-transform; + } + } + } +} + +.navbar-light { + background-color: $white !important; + .navbar-toggler{ + border: none; + &:focus{ + box-shadow: none; + } + } +} + +.navbar-toggler { + .navbar-toggler-icon { + background-image: none; + + .navbar-toggler-bar { + display: $navbar-toggler-bar-display; + position: $navbar-toggler-bar-position; + width: $navbar-toggler-bar-width; + height: $navbar-toggler-bar-height; + border-radius: $navbar-toggler-bar-radius; + background: $gray-600; + transition: $navbar-toggler-bar-transition; + margin: 0 auto; + + &.bar2, + &.bar3 { + margin-top: $navbar-toggler-bar-margin-top; + } + } + } + + &[aria-expanded="true"] { + .navbar-toggler-bar { + &.bar1 { + transform: $navbar-toggler-bar-1-transform; + transform-origin: $navbar-toggler-bar-1-transform-origin; + margin-top: $navbar-toggler-bar-1-margin-top; + } + + &.bar2 { + opacity: $navbar-toggler-bar-2-opacity; + } + + &.bar3 { + transform: $navbar-toggler-bar-3-transform; + transform-origin: $navbar-toggler-bar-3-transform-origin; + margin-top: $navbar-toggler-bar-3-margin-top; + } + } + } +} + +@include media-breakpoint-down(lg) { + .navbar { + &.navbar-transparent { + .navbar-collapse { + padding-top: $spacer * 0.5; + padding-bottom: $spacer * 0.5; + } + + .navbar-collapse.collapsing { + background: $white; + } + + .navbar-collapse.show { + background: $white; + .nav-link, + i { + color: $dark; + } + } + } + + .g-sidenav-show & { + &:not(.sidenav).navbar-main { + .navbar-collapse { + display: flex !important; + flex-basis: auto; + } + + .navbar-nav { + flex-direction: row; + } + } + + } + } + + .navbar { + &.navbar-transparent { + .navbar-collapse { + box-shadow: $box-shadow-lg; + } + } + } +} + +@include media-breakpoint-down(md) { + .navbar-collapse { + position: relative; + + .navbar-nav { + width: 100%; + + .nav-item { + &.dropdown { + position: static; + + .dropdown-menu { + left: 0; + right: 0; + + &.show { + &:before { + content: none; + } + } + } + } + } + } + } +} +@include media-breakpoint-down(sm) { + .navbar-nav { + .nav-item { + &.dropdown { + .dropdown-menu { + left: 0; + right: auto; + } + } + } + } +} diff --git a/assets/scss/astro-ecommerce/_pagination.scss b/assets/scss/astro-ecommerce/_pagination.scss new file mode 100644 index 0000000..efc19bf --- /dev/null +++ b/assets/scss/astro-ecommerce/_pagination.scss @@ -0,0 +1,65 @@ +.page-item { + &.active .page-link { + border: $pagination-active-border; + } + + .page-link, + span { + display: $page-link-display; + align-items: $page-link-align-items; + justify-content: $page-link-justify-content; + color: $secondary; + padding: 0; + margin: $page-link-margin; + border-radius: $page-link-radius !important; + width: $page-link-width; + height: $page-link-height; + font-size: $font-size-sm; + } + + &.disabled{ + cursor: no-drop; + .page-link{ + opacity: .6; + } + } +} + +.pagination-lg { + .page-item { + .page-link, + span { + width: $page-link-width-lg; + height: $page-link-height-lg; + line-height: $page-link-line-height-lg; + } + } +} + +.pagination-sm { + .page-item { + .page-link, + span { + width: $page-link-width-sm; + height: $page-link-height-sm; + line-height: $page-link-line-height-sm; + } + } +} + + +// Colors +.pagination { + @each $name, $value in $theme-colors { + &.pagination-#{$name} { + .page-item.active > .page-link { + &, + &:focus, + &:hover { + background: rgba($value, .2); + border: 1px solid $value; + } + } + } + } +} diff --git a/assets/scss/astro-ecommerce/_popovers.scss b/assets/scss/astro-ecommerce/_popovers.scss new file mode 100644 index 0000000..113fec9 --- /dev/null +++ b/assets/scss/astro-ecommerce/_popovers.scss @@ -0,0 +1,10 @@ +.popover { + box-shadow: $popover-box-shadow; +} + +// popover title +.popover { + .popover-header { + font-weight: 600; + } +} diff --git a/assets/scss/astro-ecommerce/_progress.scss b/assets/scss/astro-ecommerce/_progress.scss new file mode 100644 index 0000000..3c97f15 --- /dev/null +++ b/assets/scss/astro-ecommerce/_progress.scss @@ -0,0 +1,15 @@ +.progress-bar { + height: $progress-bar-height; + border-radius: $border-radius; +} + +.progress { + overflow: visible; + + &.progress-sm { + height: $progress-height-sm; + } + &.progress-lg { + height: $progress-height-lg; + } +} diff --git a/assets/scss/astro-ecommerce/_rtl.scss b/assets/scss/astro-ecommerce/_rtl.scss new file mode 100644 index 0000000..36726cb --- /dev/null +++ b/assets/scss/astro-ecommerce/_rtl.scss @@ -0,0 +1,145 @@ +// breadcrumb + +.rtl { + .breadcrumb { + .breadcrumb-item + .breadcrumb-item::before { + float: right; + padding-left: $breadcrumb-item-padding-x; + padding-right: 0; + } + } + + .sidenav { + .navbar-nav { + width: 100%; + padding-right: 0; + } + } + + .navbar-nav{ + & > .nav-item { + &.border-end{ + border-color: rgba($white, .5) !important; + margin-right: $navbar-nav-link-border-margin-left; + } + } + } + + .fixed-plugin { + .fixed-plugin-button { + left: $fixed-plugin-right; + right: auto; + } + + .card { + left: -$fixed-plugin-card-width !important; + right: auto; + } + + &.show { + .card { + right: auto; + left: 0 !important; + } + } + } + + .timeline { + .timeline-content { + margin-right: $timeline-content-margin-left; + margin-left: 0; + } + + .timeline-step { + transform: $timeline-step-transform-rtl; + } + + &.timeline-one-side { + &:before { + right: $timeline-left; + } + + .timeline-step { + right: $timeline-left; + } + } + } + + .form-check { + &.form-switch { + .form-check-input { + &:after { + transform: translateX(-$form-switch-translate-x-start); + } + + &:checked:after { + transform: translateX(-$form-switch-translate-x-end); + } + } + } + } + + .avatar-group { + .avatar + .avatar { + margin-left: 0; + margin-right: $avatar-group-double; + } + } + + .dropdown { + .dropdown-menu { + left: 0; + } + } + + .input-group { + .input-group-text { + border-left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-right: $input-border-width solid $input-border-color; + } + + & > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) { + margin-right: -1px; + border-top-left-radius: $input-border-radius; + border-bottom-left-radius: $input-border-radius; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0; + border-left: $input-border-width solid $input-border-color; + } + + &:not(.has-validation) > .dropdown-toggle:nth-last-child(n + 3), + &:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) { + border-top-right-radius: $input-border-radius; + border-bottom-right-radius: $input-border-radius; + } + } + + .btn-group > .btn:first-child{ + border-top-right-radius: $input-border-radius; + border-bottom-right-radius: $input-border-radius; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .btn-group > .btn:not(:last-child):not(:first-child):not(.dropdown-toggle), + .btn-group > .btn-group:not(:last-child) > .btn{ + border-radius: 0; + } + + .btn-group > .btn:nth-child(n + 3), + .btn-group > :not(.btn-check) + .btn, + .btn-group > .btn-group:not(:first-child) > .btn{ + border-top-left-radius: $input-border-radius; + border-bottom-left-radius: $input-border-radius; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .btn-group > .btn:not(:first-child), + .btn-group > .btn-group:not(:first-child) { + margin-right: -1px; + } +} diff --git a/assets/scss/astro-ecommerce/_social-buttons.scss b/assets/scss/astro-ecommerce/_social-buttons.scss new file mode 100644 index 0000000..8483d74 --- /dev/null +++ b/assets/scss/astro-ecommerce/_social-buttons.scss @@ -0,0 +1,42 @@ +.btn { + // social buttons + &.btn-facebook { + @include social-buttons-color($facebook, $facebook-states); + } + &.btn-twitter { + @include social-buttons-color($twitter, $twitter-states); + } + &.btn-pinterest { + @include social-buttons-color($pinterest, $pinterest-states); + } + &.btn-linkedin { + @include social-buttons-color($linkedin, $linkedin-states); + } + &.btn-dribbble { + @include social-buttons-color($dribbble, $dribbble-states); + } + &.btn-github { + @include social-buttons-color($github, $github-states); + } + &.btn-youtube { + @include social-buttons-color($youtube, $youtube-states); + } + &.btn-instagram { + @include social-buttons-color($instagram, $instagram-states); + } + &.btn-reddit { + @include social-buttons-color($reddit, $reddit-states); + } + &.btn-tumblr { + @include social-buttons-color($tumblr, $tumblr-states); + } + &.btn-behance { + @include social-buttons-color($behance, $behance-states); + } + &.btn-vimeo { + @include social-buttons-color($vimeo, $vimeo-states); + } + &.btn-slack { + @include social-buttons-color($slack, $slack-states); + } +} diff --git a/assets/scss/astro-ecommerce/_tables.scss b/assets/scss/astro-ecommerce/_tables.scss new file mode 100644 index 0000000..2620034 --- /dev/null +++ b/assets/scss/astro-ecommerce/_tables.scss @@ -0,0 +1,37 @@ +// General styles + +.table { + border-collapse: collapse; + + thead th { + padding: $table-head-spacer-y $table-head-spacer-x; + text-transform: $table-head-text-transform; + letter-spacing: $table-head-letter-spacing; + border-bottom: $table-border-width solid $table-border-color; + } + + th { + font-weight: $table-head-font-weight; + } + + td { + .progress { + height: $table-progress-height; + width: $table-progress-width; + margin: $table-progress-margin; + } + } + + td, + th { + white-space: nowrap; + } + // Vetical align table content + &.align-items-center { + td, + th { + vertical-align: middle; + } + } + +} diff --git a/assets/scss/astro-ecommerce/_tilt.scss b/assets/scss/astro-ecommerce/_tilt.scss new file mode 100644 index 0000000..f5b1ff0 --- /dev/null +++ b/assets/scss/astro-ecommerce/_tilt.scss @@ -0,0 +1,11 @@ +// Tilt Animation +.tilt { + -webkit-transform-style: $tilt-transform-style; + transform-style: $tilt-transform-style; + + .up { + -webkit-transform: $tilt-transform-up-transform; + transform: $tilt-transform-up-transform !important; + transition: $tilt-transform-up-transition; + } +} diff --git a/assets/scss/astro-ecommerce/_timeline.scss b/assets/scss/astro-ecommerce/_timeline.scss new file mode 100644 index 0000000..f204158 --- /dev/null +++ b/assets/scss/astro-ecommerce/_timeline.scss @@ -0,0 +1,131 @@ +// +// Timeline +// + + +.timeline { + position: relative; + + // Axis + + &:before { + content: ''; + position: absolute; + top: 0; + left: $timeline-left; + height: 100%; + border-right: $timeline-axis-width solid $timeline-axis-color; + } +} + + + +// Timeline blocks + +.timeline-block { + position: relative; + + &:after { + content: ""; + display: table; + clear: both; + } + + &:first-child { + margin-top: 0; + } + + &:last-child { + margin-bottom: 0; + } +} + +// Timeline steps + +.timeline-step { + position: absolute; + display: inline-flex; + align-items: center; + justify-content: center; + left: 0; + width: $timeline-step-width; + height: $timeline-step-height; + border-radius: $timeline-step-radius; + background: $timeline-step-bg; + // border: $timeline-step-border-width solid $timeline-step-border-color; + text-align: center; + transform: $timeline-step-transform; + font-size: $font-size-base; + font-weight: $font-weight-bold; + z-index: 1; + + svg, i { + line-height: $timeline-step-line-height; + } +} + + + +// Timeline content and body +.timeline-content { + position: relative; + margin-left: $timeline-content-margin-left; + padding-top: $timeline-content-padding-top; + position: relative; + top: $timeline-content-top; + + &:after { + content: ""; + display: table; + clear: both; + } +} + + +@include media-breakpoint-up(lg) { + .timeline { + &:before { + left: 50%; + margin-left: -1px; + } + } + + .timeline-step { + left: 50%; + } + + .timeline-content { + + width: 38%; + } + + .timeline-block:nth-child(even) .timeline-content { + float: right; + } +} + +// One side timeline + +.timeline-one-side { + &:before { + left: $timeline-left; + } + + .timeline-step { + left: $timeline-left; + } + + .timeline-content { + width: auto; + } + + @include media-breakpoint-up(lg) { + .timeline-content { + max-width: 30rem; + } + } +} + +.timeline-one-side .timeline-block:nth-child(even) .timeline-content { + float: none; +} diff --git a/assets/scss/astro-ecommerce/_tooltips.scss b/assets/scss/astro-ecommerce/_tooltips.scss new file mode 100644 index 0000000..11231ae --- /dev/null +++ b/assets/scss/astro-ecommerce/_tooltips.scss @@ -0,0 +1,9 @@ +.bs-tooltip-auto[x-placement^=right] .tooltip-arrow, +.bs-tooltip-right .tooltip-arrow { + left: $tooltip-arrow-left; +} + +.bs-tooltip-auto[x-placement^=left] .tooltip-arrow, +.bs-tooltip-left .tooltip-arrow { + right: $tooltip-arrow-right; +} diff --git a/assets/scss/astro-ecommerce/_typography.scss b/assets/scss/astro-ecommerce/_typography.scss new file mode 100644 index 0000000..6d13a01 --- /dev/null +++ b/assets/scss/astro-ecommerce/_typography.scss @@ -0,0 +1,316 @@ +html *{ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +body { + font-weight: $font-weight-normal; + line-height: $p-line-height; +} + +h1, .h1 { + font-size: $h1-font-size; + line-height: $h1-line-height; + letter-spacing: $btn-letter-spacing; + + @include media-breakpoint-down(sm) { + font-size: rfs-fluid-value($h1-font-size); + } +} + +h2, .h2 { + font-size: $h2-font-size; + line-height: $h2-line-height; + letter-spacing: $letter-wider; + + @include media-breakpoint-down(sm) { + font-size: rfs-fluid-value($h2-font-size); + } +} + +h3, .h3 { + font-size: $h3-font-size; + line-height: $h3-line-height; + + @include media-breakpoint-down(sm) { + font-size: rfs-fluid-value($h3-font-size); + } +} + +h4, .h4 { + font-size: $h4-font-size; + line-height: $h4-line-height; + + @include media-breakpoint-down(sm) { + font-size: rfs-fluid-value($h4-font-size); + } +} + +h5, .h5 { + font-size: $h5-font-size; + line-height: $h5-line-height; + + @include media-breakpoint-down(sm) { + font-size: rfs-fluid-value($h5-font-size); + } +} + +h6, .h6 { + font-size: $h6-font-size; + line-height: $h6-line-height; +} + +p, .p { + font-size: $font-size-base; + font-weight: $p-font-weight; + line-height: $p-line-height; +} + +.lead { + font-size: $lead-font-size; + font-weight: $lead-font-weight; + line-height: $lead-line-height; +} + +h1, .h1, +h2, .h2, +h3, .h3 { + font-weight: $font-weight-bolder; +} + +h4, .h4, +h5, .h5, +h6, .h6 { + font-weight: $font-weight-bold; +} + +h1, .h1, +h2, .h2, +h3, .h3, +h4, .h4 { + letter-spacing: $letter-tighter; +} + +a { + //letter-spacing: $a-letter-spacing; + color: $dark; +} + +.text-sm { + line-height: $text-sm-line-height; +} +.text-xs { + line-height: $text-xs-line-height; +} + +.text-base { + font-size: $font-size-base; +} + +p, .p { + @include font-size($p-font-size); +} +.lead { + @include font-size($lead-font-size); +} +.text-2xl { + @include font-size($font-size-2xl !important); +} +.text-xl { + @include font-size($font-size-xl !important); +} +.text-lg { + @include font-size($font-size-lg !important); +} +.text-sm { + @include font-size($font-size-sm !important); +} +.text-xs { + @include font-size($font-size-xs !important); +} +.text-xxs { + @include font-size($font-size-xxs !important); +} + +p { + line-height: 1.625; + font-weight: $font-weight-normal; +} + +// stylelint-disable declaration-no-important +// +// Text +// +.text-sans-serif { + font-family: $font-family-sans-serif !important; +} +.text-pt-mono { + font-family: $font-family-pt-mono !important; +} +.text-monospace { + font-family: $font-family-monospace !important; +} + +// Alignment +.text-justify { + text-align: justify !important; +} + +.text-wrap { + white-space: normal !important; +} + +.text-nowrap { + white-space: nowrap !important; +} + +.text-truncate { + @include text-truncate(); +} + +// Weight and italics +.font-weight-light { + font-weight: $font-weight-light !important; +} + +.font-weight-lighter { + font-weight: $font-weight-lighter !important; +} + +.font-weight-normal { + font-weight: $font-weight-normal !important; +} + +.font-weight-semibold{ + font-weight: $font-weight-semibold !important; +} + +.font-weight-bold { + font-weight: $font-weight-bold !important; +} + +.font-weight-bolder { + font-weight: $font-weight-bolder !important; +} +.font-weight-black{ + font-weight: $font-weight-black !important; +} +.font-italic { + font-style: italic !important; +} +// Contextual colors + +.text-gradient { + background-clip: $text-gradient-bg-clip; + -webkit-background-clip: $text-gradient-bg-clip; + -webkit-text-fill-color: $text-gradient-text-fill; + position: $text-gradient-position; + z-index: $text-gradient-zindex; + + &.text-primary { + background-image: $text-gradient-bg-primary; + } + &.text-info { + background-image: $text-gradient-bg-info; + } + &.text-success { + background-image: $text-gradient-bg-success; + } + &.text-warning { + background-image: $text-gradient-bg-warning; + } + &.text-danger { + background-image: $text-gradient-bg-danger; + } + &.text-dark { + background-image: $text-gradient-bg-dark; + } +} + +.blockquote { + border-left: 3px solid $text-muted; + > span { + font-style: italic; + } +} + +.text-muted { + color: $text-secondary !important; +} + +.text-black-50 { + color: rgba($black, .5) !important; +} + +.text-white-50 { + color: rgba($white, .5) !important; +} + +.text-decoration-none { + text-decoration: none !important; +} + +.text-break { + word-wrap: break-word !important; +} +// Reset +.text-reset { + color: inherit !important; +} + +// Letter Spacing + +.letter-wider { + letter-spacing: $letter-wider; +} +.letter-normal { + letter-spacing: $letter-normal; +} +.letter-tighter { + letter-spacing: $letter-tighter; +} + +// Font Weight + +.text-lighter { + font-weight: $font-weight-lighter; +} +.text-light { + font-weight: $font-weight-light; +} +.text-normal { + font-weight: $font-weight-normal; +} +.text-bold { + font-weight: $font-weight-bold; +} +.text-bolder { + font-weight: $font-weight-bolder; +} + + +// Font Size + +.text-2xl { + font-size: $font-size-2xl; +} +.text-3xl { + font-size: $font-size-3xl; +} +.text-4xl { + font-size: $font-size-4xl; +} +.text-5xl { + font-size: $font-size-5xl; +} +.text-6xl { + font-size: $font-size-6xl; +} +.text-7xl { + font-size: $font-size-7xl; +} +.text-8xl { + font-size: $font-size-8xl; +} +.text-9xl { + font-size: $font-size-9xl; +} diff --git a/assets/scss/astro-ecommerce/_utilities-extend.scss b/assets/scss/astro-ecommerce/_utilities-extend.scss new file mode 100644 index 0000000..5fd8da9 --- /dev/null +++ b/assets/scss/astro-ecommerce/_utilities-extend.scss @@ -0,0 +1,11 @@ +@each $name, $value in $max-width-dim{ + .max-width-#{$name} { + max-width: $value !important; + } +} + +@each $name, $value in $width-dim{ + .width-#{$name} { + width: $value !important; + } +} diff --git a/assets/scss/astro-ecommerce/_utilities.scss b/assets/scss/astro-ecommerce/_utilities.scss new file mode 100644 index 0000000..d1ac824 --- /dev/null +++ b/assets/scss/astro-ecommerce/_utilities.scss @@ -0,0 +1,833 @@ +@import "./bootstrap/functions"; +@import "./bootstrap/variables"; +@import "./bootstrap/maps"; +@import "./bootstrap/utilities"; + +$utilities: ( + // scss-docs-start utils-vertical-align + "align": ( + property: vertical-align, + class: align, + values: baseline top middle bottom text-bottom text-top + ), + // scss-docs-end utils-vertical-align + // scss-docs-start utils-float + "float": ( + responsive: true, + property: float, + values: ( + start: left, + end: right, + none: none, + ) + ), + // scss-docs-end utils-float + // scss-docs-start utils-overflow + "overflow": ( + property: overflow, + values: auto hidden visible scroll, + ), + // scss-docs-end utils-overflow + // scss-docs-start utils-display + "display": ( + responsive: true, + print: true, + property: display, + class: d, + values: inline inline-block block grid table table-row table-cell flex inline-flex none + ), + // scss-docs-end utils-display + // scss-docs-start utils-shadow + "shadow": ( + property: box-shadow, + class: shadow, + values: ( + null: $box-shadow, + xxs: $box-shadow-xxs, + xs: $box-shadow-xs, + sm: $box-shadow-sm, + md: $box-shadow, + lg: $box-shadow-lg, + xl: $box-shadow-xl, + none: none, + ) + ), + // scss-docs-end utils-shadow + // scss-docs-start utils-position + "position": ( + property: position, + values: static relative absolute fixed sticky + ), + "top": ( + property: top, + values: $position-values + ), + "bottom": ( + property: bottom, + values: $position-values + ), + "start": ( + property: left, + class: start, + values: $position-values + ), + "end": ( + property: right, + class: end, + values: $position-values + ), + "translate-middle": ( + property: transform, + class: translate-middle, + values: ( + null: translate(-50%, -50%), + x: translateX(-50%), + y: translateY(-50%), + ) + ), + //Scale + "transform": ( + property: transform, + class: transform-scale, + responsive: true, + values: ( + 5: scale(.5), + 6: scale(.6), + 7: scale(.7), + 8: scale(.8), + 9: scale(.9), + 10: scale(1), + ) + ), + // scss-docs-end utils-position + // scss-docs-start utils-borders + "border": ( + property: border, + values: ( + null: $border-width solid $border-color, + 0: 0, + ) + ), + "border-top": ( + property: border-top, + responsive: true, + values: ( + null: $border-width solid $border-color, + 0: 0, + ) + ), + "border-end": ( + property: border-right, + responsive: true, + class: border-end, + values: ( + null: $border-width solid $border-color, + 0: 0, + ) + ), + "border-bottom": ( + property: border-bottom, + responsive: true, + values: ( + null: $border-width solid $border-color, + 0: 0, + ) + ), + "border-start": ( + property: border-left, + responsive: true, + class: border-start, + values: ( + null: $border-width solid $border-color, + 0: 0, + ) + ), + "border-color": ( + property: border-color, + class: border, + values: map-merge($theme-colors, ("white": $white, 'gray-100': $gray-100)) + ), + "border-width": ( + property: border-width, + class: border, + values: $border-widths + ), + // scss-docs-end utils-borders + // Sizing utilities + // scss-docs-start utils-sizing + "width": ( + property: width, + responsive: true, + class: w, + values: $width + ), + "max-width": ( + property: max-width, + class: mw, + values: (100: 100%) + ), + "viewport-width": ( + property: width, + class: vw, + values: (100: 100vw) + ), + "min-viewport-width": ( + property: min-width, + class: min-vw, + values: (100: 100vw) + ), + "height": ( + property: height, + class: h, + values: ( + 25: 25%, + 50: 50%, + 75: 75%, + 100: 100%, + auto: auto + ) + ), + "max-height": ( + property: max-height, + class: mh, + values: (100: 100%) + ), + "viewport-height": ( + property: height, + class: vh, + values: (100: 100vh) + ), + "min-viewport-height": ( + property: min-height, + class: min-vh, + values: ( + 25: $section-height-25-min-height, + 35: $section-height-35-min-height, + 45: $section-height-45-min-height, + 50: $section-height-50-min-height, + 55: $section-height-55-min-height, + 65: $section-height-65-min-height, + 70: $section-height-70-min-height, + 75: $section-height-75-min-height, + 80: $section-height-80-min-height, + 85: $section-height-85-min-height, + 90: $section-height-90-min-height, + 95: $section-height-95-min-height, + 100: 100vh + ) + ), + // scss-docs-end utils-sizing + // Flex utilities + // scss-docs-start utils-flex + "flex": ( + responsive: true, + property: flex, + values: (fill: 1 1 auto) + ), + "flex-direction": ( + responsive: true, + property: flex-direction, + class: flex, + values: row column row-reverse column-reverse + ), + "flex-grow": ( + responsive: true, + property: flex-grow, + class: flex, + values: ( + grow-0: 0, + grow-1: 1, + ) + ), + "flex-shrink": ( + responsive: true, + property: flex-shrink, + class: flex, + values: ( + shrink-0: 0, + shrink-1: 1, + ) + ), + "flex-wrap": ( + responsive: true, + property: flex-wrap, + class: flex, + values: wrap nowrap wrap-reverse + ), + "gap": ( + responsive: true, + property: gap, + class: gap, + values: $spacers + ), + "justify-content": ( + responsive: true, + property: justify-content, + values: ( + start: flex-start, + end: flex-end, + center: center, + between: space-between, + around: space-around, + evenly: space-evenly, + ) + ), + "align-items": ( + responsive: true, + property: align-items, + values: ( + start: flex-start, + end: flex-end, + center: center, + baseline: baseline, + stretch: stretch, + ) + ), + "align-content": ( + responsive: true, + property: align-content, + values: ( + start: flex-start, + end: flex-end, + center: center, + between: space-between, + around: space-around, + stretch: stretch, + ) + ), + "align-self": ( + responsive: true, + property: align-self, + values: ( + auto: auto, + start: flex-start, + end: flex-end, + center: center, + baseline: baseline, + stretch: stretch, + ) + ), + "order": ( + responsive: true, + property: order, + values: ( + first: -1, + 0: 0, + 1: 1, + 2: 2, + 3: 3, + 4: 4, + 5: 5, + last: 6, + ), + ), + // scss-docs-end utils-flex + // Margin utilities + // scss-docs-start utils-spacing + "margin": ( + responsive: true, + property: margin, + class: m, + values: map-merge($spacers, (auto: auto)) + ), + "margin-x": ( + responsive: true, + property: margin-right margin-left, + class: mx, + values: map-merge($spacers, (auto: auto)) + ), + "margin-y": ( + responsive: true, + property: margin-top margin-bottom, + class: my, + values: map-merge($spacers, (auto: auto)) + ), + "margin-top": ( + responsive: true, + property: margin-top, + class: mt, + values: map-merge($spacers, (auto: auto)) + ), + "margin-end": ( + responsive: true, + property: margin-right, + class: me, + values: map-merge($spacers, (auto: auto)) + ), + "margin-bottom": ( + responsive: true, + property: margin-bottom, + class: mb, + values: map-merge($spacers, (auto: auto)) + ), + "margin-start": ( + responsive: true, + property: margin-left, + class: ms, + values: map-merge($spacers, (auto: auto)) + ), + // Negative margin utilities + "negative-margin": ( + responsive: true, + property: margin, + class: m, + values: $negative-spacers + ), + "negative-margin-x": ( + responsive: true, + property: margin-right margin-left, + class: mx, + values: $negative-spacers + ), + "negative-margin-y": ( + responsive: true, + property: margin-top margin-bottom, + class: my, + values: $negative-spacers + ), + "negative-margin-top": ( + responsive: true, + property: margin-top, + class: mt, + values: $negative-spacers + ), + "negative-margin-end": ( + responsive: true, + property: margin-right, + class: me, + values: $negative-spacers + ), + "negative-margin-bottom": ( + responsive: true, + property: margin-bottom, + class: mb, + values: $negative-spacers + ), + "negative-margin-start": ( + responsive: true, + property: margin-left, + class: ms, + values: $negative-spacers + ), + // Padding utilities + "padding": ( + responsive: true, + property: padding, + class: p, + values: $spacers + ), + "padding-x": ( + responsive: true, + property: padding-right padding-left, + class: px, + values: $spacers + ), + "padding-y": ( + responsive: true, + property: padding-top padding-bottom, + class: py, + values: $spacers + ), + "padding-top": ( + responsive: true, + property: padding-top, + class: pt, + values: $spacers + ), + "padding-end": ( + responsive: true, + property: padding-right, + class: pe, + values: $spacers + ), + "padding-bottom": ( + responsive: true, + property: padding-bottom, + class: pb, + values: $spacers + ), + "padding-start": ( + responsive: true, + property: padding-left, + class: ps, + values: $spacers + ), + // scss-docs-end utils-spacing + // Text + // scss-docs-start utils-text + "font-family": ( + property: font-family, + class: font, + values: (monospace: var(--#{$prefix}font-monospace)) + ), + "font-size": ( + rfs: true, + property: font-size, + class: fs, + values: $font-sizes + ), + "font-style": ( + property: font-style, + class: fst, + values: italic normal + ), + "font-weight": ( + property: font-weight, + class: fw, + values: ( + light: $font-weight-light, + lighter: $font-weight-lighter, + normal: $font-weight-normal, + bold: $font-weight-bold, + bolder: $font-weight-bolder + ) + ), + "line-height": ( + property: line-height, + class: lh, + values: ( + 1: 1, + sm: $line-height-sm, + base: $line-height-base, + lg: $line-height-lg, + ) + ), + "text-align": ( + responsive: true, + property: text-align, + class: text, + values: ( + start: left, + end: right, + center: center, + ) + ), + "text-decoration": ( + property: text-decoration, + values: none underline line-through + ), + "text-transform": ( + property: text-transform, + class: text, + values: lowercase uppercase capitalize + ), + "white-space": ( + property: white-space, + class: text, + values: ( + wrap: normal, + nowrap: nowrap, + ) + ), + "word-wrap": ( + property: word-wrap word-break, + class: text, + values: (break: break-word), + rtl: false + ), + // scss-docs-end utils-text + // scss-docs-start utils-color + "color": ( + property: color, + class: text, + values: map-merge( + $theme-colors, + ( + "white": $white, + "body": $body-color, + "muted": $text-muted, + "black-50": rgba($black, .5), + "white-50": rgba($white, .5), + "reset": inherit, + ) + ) + ), + // scss-docs-end utils-color + // scss-docs-start utils-bg-color + "background-color": ( + property: background-color, + class: bg, + values: map-merge( + $theme-colors, + ( + "body": $body-bg, + "white": $white, + "transparent": transparent, + "gray-100": $gray-100, + "gray-200": $gray-200, + "gray-300": $gray-300, + "gray-400": $gray-400, + "gray-500": $gray-500, + "gray-600": $gray-600, + "gray-700": $gray-700, + "gray-800": $gray-800, + "gray-900": $gray-900, + "slate-800": $slate-800, + "slate-900": $slate-900, + ) + ) + ), + // scss-docs-end utils-bg-color + "gradient": ( + property: background-image, + class: bg, + values: (gradient: var(--#{$prefix}gradient)) + ), + // scss-docs-start utils-interaction + "user-select": ( + property: user-select, + values: all auto none + ), + "pointer-events": ( + property: pointer-events, + class: pe, + values: none auto, + ), + // scss-docs-end utils-interaction + // scss-docs-start utils-border-radius + "rounded": ( + property: border-radius, + class: rounded, + values: ( + null: $border-radius, + 0: 0, + 1: $border-radius-sm, + 2: $border-radius, + 3: $border-radius-lg, + circle: 50%, + pill: $border-radius-pill + ) + ), + "rounded-top": ( + property: border-top-left-radius border-top-right-radius, + class: rounded-top, + values: (null: $border-radius) + ), + "rounded-end": ( + property: border-top-right-radius border-bottom-right-radius, + class: rounded-end, + values: (null: $border-radius) + ), + "rounded-bottom": ( + property: border-bottom-right-radius border-bottom-left-radius, + class: rounded-bottom, + values: (null: $border-radius) + ), + "rounded-start": ( + property: border-bottom-left-radius border-top-left-radius, + class: rounded-start, + values: (null: $border-radius) + ), + // scss-docs-end utils-border-radius + // scss-docs-start utils-visibility + "visibility": ( + property: visibility, + class: null, + values: ( + visible: visible, + invisible: hidden, + ) + ), + // Opacity utilities + "opacity": ( + property: opacity, + values: ( + 0: 0, + 1: .1, + 2: .2, + 3: .3, + 4: .4, + 5: .5, + 6: .6, + 7: .7, + 8: .8, + 9: .9, + 10: 1 + ), + ), + // Z-index utilities + "z-index": ( + property: z-index, + values: ( + 0: 0, + 1: 1, + 2: 2, + 3: 3 + ), + ), + // Letter spacing utilities + "letter-spacing": ( + property: letter-spacing, + values: ( + 1: 1px, + 2: 2px, + 3: 3px, + 4: 4px, + 5: 5px + ), + ), + // Border radius utilities + "border-top-left-radius": ( + property: border-top-left-radius, + class: border-radius-top-start, + responsive: true, + values: ( + null: $border-radius, + 0: 0, + sm: $border-radius-sm, + md: $border-radius, + lg: $border-radius-lg, + xl: $border-radius-xl, + 2xl: $border-radius-2xl, + circle: 50%, + pill: $border-radius-pill + ) + ), + "border-top-right-radius": ( + property: border-top-right-radius, + class: border-radius-top-end, + responsive: true, + values: ( + null: $border-radius, + 0: 0, + sm: $border-radius-sm, + md: $border-radius, + lg: $border-radius-lg, + xl: $border-radius-xl, + 2xl: $border-radius-2xl, + circle: 50%, + pill: $border-radius-pill + ) + ), + "border-bottom-left-radius": ( + property: border-bottom-left-radius, + class: border-radius-bottom-start, + responsive: true, + values: ( + null: $border-radius, + 0: 0, + sm: $border-radius-sm, + md: $border-radius, + lg: $border-radius-lg, + xl: $border-radius-xl, + 2xl: $border-radius-2xl, + circle: 50%, + pill: $border-radius-pill + ) + ), + "border-bottom-right-radius": ( + property: border-bottom-right-radius, + class: border-radius-bottom-end, + responsive: true, + values: ( + null: $border-radius, + 0: 0, + sm: $border-radius-sm, + md: $border-radius, + lg: $border-radius-lg, + xl: $border-radius-xl, + 2xl: $border-radius-2xl, + circle: 50%, + pill: $border-radius-pill + ) + ), + // Max Height Values + "max-height-px": ( + property: max-height, + class: max-height, + values: ( + 50: $max-height-50, + 100: $max-height-100, + 150: $max-height-150, + 160: $max-height-160, + 200: $max-height-200, + 250: $max-height-250, + 300: $max-height-300, + 400: $max-height-400, + 500: $max-height-500, + 600: $max-height-600 + ) + ), + // Max Height Values vh + "max-height-vh": ( + property: max-height, + class: max-height-vh, + values: ( + 10: $max-height-vh-10, + 20: $max-height-vh-20, + 30: $max-height-vh-30, + 40: $max-height-vh-40, + 50: $max-height-vh-50, + 60: $max-height-vh-60, + 70: $max-height-vh-70, + 80: $max-height-vh-80, + 90: $max-height-vh-90, + 100: $max-height-vh-100, + ) + ), + // Min Height Values + "min-height-px": ( + property: min-height, + class: min-height, + values: ( + 50: $min-height-50, + 100: $min-height-100, + 150: $min-height-150, + 160: $min-height-160, + 200: $min-height-200, + 250: $min-height-250, + 300: $min-height-300, + 400: $min-height-400, + 500: $min-height-500, + 600: $min-height-600 + ) + ), + // Height Values + "height-px": ( + property: height, + class: height, + values: ( + 100: $height-100, + 150: $height-150, + 200: $height-200, + 300: $height-300, + 400: $height-400, + 500: $height-500, + 600: $height-600 + ) + ), + // Min Width Values + "min-width-px": ( + property: min-width, + class: min-width, + values: ( + 50: $min-width-50, + 100: $min-width-100, + 150: $min-width-150, + 200: $min-width-200, + 250: $min-width-250, + 300: $min-width-300, + 350: $min-width-350, + 400: $min-width-400, + 450: $min-width-450, + 500: $min-width-500 + ) + ), + // Max Width Values + "max-width-px": ( + property: max-width, + class: max-width, + values: ( + 50: $max-width-50, + 100: $max-width-100, + 150: $max-width-150, + 200: $max-width-200, + 250: $max-width-250, + 300: $max-width-300, + 350: $max-width-350, + 400: $max-width-400, + 450: $max-width-450, + 500: $max-width-500 + ) + ), +); diff --git a/assets/scss/astro-ecommerce/_variables.scss b/assets/scss/astro-ecommerce/_variables.scss new file mode 100644 index 0000000..067706c --- /dev/null +++ b/assets/scss/astro-ecommerce/_variables.scss @@ -0,0 +1,1757 @@ +// Variables +// +// Variables should follow the `$component-state-property-size` formula for +// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs. + + + +// Corporate colors +$slate-900: #0f172a; +$slate-800: #1e293b; +$slate-700: #334155; +$slate-600: #474568; +$slate-500: #64748b; +$slate-400: #94a3b8; +$slate-350: #dde0e5; +$slate-300: #cbd5e1; + + +// $soft-background-color: #fbfbfb !default; +$soft-background-color: #ffffff !default; // Testing +$font-color: $slate-500 !default; +$h-color: $slate-800 !default; + + +$blue: #63B3ED !default; +$indigo: #596CFF !default; +$purple: #6f42c1 !default; +$pink: #d63384 !default; +$red: #F56565 !default; +$orange: #fd7e14 !default; +$yellow: #FBD38D !default; +$green: #81E6D9 !default; +$teal: #20c997 !default; +$cyan: #0dcaf0 !default; + +// Color system + +$white: #fff !default; +$gray-100: #f9fafb !default; // corporate done +$gray-200: #e9ecef !default; +$gray-300: #dde0e5 !default; // corporate all grays should be fixed +$gray-400: #ced4da !default; +$gray-500: #adb5bd !default; +$gray-600: #6c757d !default; +$gray-700: #495057 !default; +$gray-800: #343a40 !default; +$gray-900: #212529 !default; +$black: #000 !default; + + +// fusv-disable +$blue-100: tint-color($blue, 80%) !default; +$blue-200: tint-color($blue, 60%) !default; +$blue-300: tint-color($blue, 40%) !default; +$blue-400: tint-color($blue, 20%) !default; +$blue-500: $blue !default; +$blue-600: shade-color($blue, 20%) !default; +$blue-700: shade-color($blue, 40%) !default; +$blue-800: shade-color($blue, 60%) !default; +$blue-900: shade-color($blue, 80%) !default; + +$indigo-100: tint-color($indigo, 80%) !default; +$indigo-200: tint-color($indigo, 60%) !default; +$indigo-300: tint-color($indigo, 40%) !default; +$indigo-400: tint-color($indigo, 20%) !default; +$indigo-500: $indigo !default; +$indigo-600: shade-color($indigo, 20%) !default; +$indigo-700: shade-color($indigo, 40%) !default; +$indigo-800: shade-color($indigo, 60%) !default; +$indigo-900: shade-color($indigo, 80%) !default; + +$purple-100: tint-color($purple, 80%) !default; +$purple-200: tint-color($purple, 60%) !default; +$purple-300: tint-color($purple, 40%) !default; +$purple-400: tint-color($purple, 20%) !default; +$purple-500: $purple !default; +$purple-600: shade-color($purple, 20%) !default; +$purple-700: shade-color($purple, 40%) !default; +$purple-800: shade-color($purple, 60%) !default; +$purple-900: shade-color($purple, 80%) !default; + +$pink-100: tint-color($pink, 80%) !default; +$pink-200: tint-color($pink, 60%) !default; +$pink-300: tint-color($pink, 40%) !default; +$pink-400: tint-color($pink, 20%) !default; +$pink-500: $pink !default; +$pink-600: shade-color($pink, 20%) !default; +$pink-700: shade-color($pink, 40%) !default; +$pink-800: shade-color($pink, 60%) !default; +$pink-900: shade-color($pink, 80%) !default; + +$red-100: tint-color($red, 80%) !default; +$red-200: tint-color($red, 60%) !default; +$red-300: tint-color($red, 40%) !default; +$red-400: tint-color($red, 20%) !default; +$red-500: $red !default; +$red-600: shade-color($red, 20%) !default; +$red-700: shade-color($red, 40%) !default; +$red-800: shade-color($red, 60%) !default; +$red-900: shade-color($red, 80%) !default; + +$orange-100: tint-color($orange, 80%) !default; +$orange-200: tint-color($orange, 60%) !default; +$orange-300: tint-color($orange, 40%) !default; +$orange-400: tint-color($orange, 20%) !default; +$orange-500: $orange !default; +$orange-600: shade-color($orange, 20%) !default; +$orange-700: shade-color($orange, 40%) !default; +$orange-800: shade-color($orange, 60%) !default; +$orange-900: shade-color($orange, 80%) !default; + +$yellow-100: tint-color($yellow, 80%) !default; +$yellow-200: tint-color($yellow, 60%) !default; +$yellow-300: tint-color($yellow, 40%) !default; +$yellow-400: tint-color($yellow, 20%) !default; +$yellow-500: $yellow !default; +$yellow-600: shade-color($yellow, 20%) !default; +$yellow-700: shade-color($yellow, 40%) !default; +$yellow-800: shade-color($yellow, 60%) !default; +$yellow-900: shade-color($yellow, 80%) !default; + +$green-100: tint-color($green, 80%) !default; +$green-200: tint-color($green, 60%) !default; +$green-300: tint-color($green, 40%) !default; +$green-400: tint-color($green, 20%) !default; +$green-500: $green !default; +$green-600: shade-color($green, 20%) !default; +$green-700: shade-color($green, 40%) !default; +$green-800: shade-color($green, 60%) !default; +$green-900: shade-color($green, 80%) !default; + +$teal-100: tint-color($teal, 80%) !default; +$teal-200: tint-color($teal, 60%) !default; +$teal-300: tint-color($teal, 40%) !default; +$teal-400: tint-color($teal, 20%) !default; +$teal-500: $teal !default; +$teal-600: shade-color($teal, 20%) !default; +$teal-700: shade-color($teal, 40%) !default; +$teal-800: shade-color($teal, 60%) !default; +$teal-900: shade-color($teal, 80%) !default; + +$cyan-100: tint-color($cyan, 80%) !default; +$cyan-200: tint-color($cyan, 60%) !default; +$cyan-300: tint-color($cyan, 40%) !default; +$cyan-400: tint-color($cyan, 20%) !default; +$cyan-500: $cyan !default; +$cyan-600: shade-color($cyan, 20%) !default; +$cyan-700: shade-color($cyan, 40%) !default; +$cyan-800: shade-color($cyan, 60%) !default; +$cyan-900: shade-color($cyan, 80%) !default; + +$blues: ( + "blue-100": $blue-100, + "blue-200": $blue-200, + "blue-300": $blue-300, + "blue-400": $blue-400, + "blue-500": $blue-500, + "blue-600": $blue-600, + "blue-700": $blue-700, + "blue-800": $blue-800, + "blue-900": $blue-900 +) !default; + +$indigos: ( + "indigo-100": $indigo-100, + "indigo-200": $indigo-200, + "indigo-300": $indigo-300, + "indigo-400": $indigo-400, + "indigo-500": $indigo-500, + "indigo-600": $indigo-600, + "indigo-700": $indigo-700, + "indigo-800": $indigo-800, + "indigo-900": $indigo-900 +) !default; + +$purples: ( + "purple-100": $purple-100, + "purple-200": $purple-200, + "purple-300": $purple-300, + "purple-400": $purple-400, + "purple-500": $purple-500, + "purple-600": $purple-600, + "purple-700": $purple-700, + "purple-800": $purple-800, + "purple-900": $purple-900 +) !default; + +$pinks: ( + "pink-100": $pink-100, + "pink-200": $pink-200, + "pink-300": $pink-300, + "pink-400": $pink-400, + "pink-500": $pink-500, + "pink-600": $pink-600, + "pink-700": $pink-700, + "pink-800": $pink-800, + "pink-900": $pink-900 +) !default; + +$reds: ( + "red-100": $red-100, + "red-200": $red-200, + "red-300": $red-300, + "red-400": $red-400, + "red-500": $red-500, + "red-600": $red-600, + "red-700": $red-700, + "red-800": $red-800, + "red-900": $red-900 +) !default; + +$oranges: ( + "orange-100": $orange-100, + "orange-200": $orange-200, + "orange-300": $orange-300, + "orange-400": $orange-400, + "orange-500": $orange-500, + "orange-600": $orange-600, + "orange-700": $orange-700, + "orange-800": $orange-800, + "orange-900": $orange-900 +) !default; + +$yellows: ( + "yellow-100": $yellow-100, + "yellow-200": $yellow-200, + "yellow-300": $yellow-300, + "yellow-400": $yellow-400, + "yellow-500": $yellow-500, + "yellow-600": $yellow-600, + "yellow-700": $yellow-700, + "yellow-800": $yellow-800, + "yellow-900": $yellow-900 +) !default; + +$greens: ( + "green-100": $green-100, + "green-200": $green-200, + "green-300": $green-300, + "green-400": $green-400, + "green-500": $green-500, + "green-600": $green-600, + "green-700": $green-700, + "green-800": $green-800, + "green-900": $green-900 +) !default; + +$teals: ( + "teal-100": $teal-100, + "teal-200": $teal-200, + "teal-300": $teal-300, + "teal-400": $teal-400, + "teal-500": $teal-500, + "teal-600": $teal-600, + "teal-700": $teal-700, + "teal-800": $teal-800, + "teal-900": $teal-900 +) !default; + +$cyans: ( + "cyan-100": $cyan-100, + "cyan-200": $cyan-200, + "cyan-300": $cyan-300, + "cyan-400": $cyan-400, + "cyan-500": $cyan-500, + "cyan-600": $cyan-600, + "cyan-700": $cyan-700, + "cyan-800": $cyan-800, + "cyan-900": $cyan-900 +) !default; + +// fusv-enable + +// scss-docs-start colors-map +$colors: ( + "blue": $blue, + "indigo": $indigo, + "purple": $purple, + "pink": $pink, + "red": $red, + "orange": $orange, + "yellow": $yellow, + "green": $green, + "teal": $teal, + "cyan": $cyan, + "white": $white, + "gray": $gray-600, + "gray-dark": $gray-800, +) !default; +// scss-docs-end colors-map + +$primary: #3066ff !default; +$secondary: #9ba5b4 !default; +$info: #17a2b8 !default; +$success: #12a366 !default; +$warning: #ffc107 !default; +$danger: #dc3545 !default; +$light: $slate-300 !default; +$dark: $slate-800 !default; + +// scss-docs-start theme-colors-map +$theme-colors: ( + "primary": $primary, + "secondary": $secondary, + "success": $success, + "info": $info, + "warning": $warning, + "danger": $danger, + "light": $light, + "dark": $dark, + "white": $white +) !default; +// scss-docs-end theme-colors-map + + +// Gradient colors +$primary-gradient: #774dd3 !default; +$primary-gradient-state: #6a38d9 !default; + +$secondary-gradient: #64748b !default; +$secondary-gradient-state: #64748b !default; + +$info-gradient: #55a6f8 !default; +$info-gradient-state: #369aff !default; + +$success-gradient: #67c23a !default; +$success-gradient-state: #4aa91b !default; + +$danger-gradient: #ea4e3d !default; +$danger-gradient-state: #ee321d !default; + +$warning-gradient: #f19937 !default; +$warning-gradient-state: #f58100 !default; + +$dark-gradient: $slate-800 !default; +$dark-gradient-state: $slate-800 !default; + +$light-gradient: #dde0e5 !default; +$light-gradient-state: #ced4da !default; + +$dark-gradient-dark: #323a54 !default; +$dark-gradient-state-dark: #1a2035 !default; + +// Gradient Colors map +$theme-gradient-colors: ( + "primary": ($primary-gradient, $primary-gradient-state), + "secondary": ($secondary-gradient, $secondary-gradient-state), + "success": ($success-gradient, $success-gradient-state), + "info": ($info-gradient, $info-gradient-state), + "warning": ($warning-gradient, $warning-gradient-state), + "danger": ($danger-gradient, $danger-gradient-state), + "light": ($light-gradient, $light-gradient-state), + "dark": ($dark-gradient, $dark-gradient-state) +) !default; + +// Set a specific jump point for requesting color jumps +$theme-color-interval: 8% !default; + +// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7. +// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast +$min-contrast-ratio: 4.5 !default; + +// Customize the light and dark text colors for use in our color contrast function. +$color-contrast-dark: $black !default; +$color-contrast-light: $white !default; + + +// fusv-enable + +// Characters which are escaped by the escape-svg function +$escaped-characters: ( + ("<", "%3c"), + (">", "%3e"), + ("#", "%23"), + ("(", "%28"), + (")", "%29"), +) !default; + +// Options +// +// Quickly modify global styling by enabling or disabling optional features. + +$enable-caret: true !default; +$enable-rounded: true !default; +$enable-shadows: false !default; +$enable-gradients: false !default; +$enable-transitions: true !default; +$enable-reduced-motion: true !default; +$enable-grid-classes: true !default; +$enable-button-pointers: true !default; +$enable-rfs: true !default; +$enable-validation-icons: true !default; +$enable-negative-margins: true !default; +$enable-deprecation-messages: true !default; +$enable-important-utilities: true !default; + +// Gradient +// +// The gradient which is added to components if `$enable-gradients` is `true` +// This gradient is also added to elements with `.bg-gradient` +$gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0)) !default; + +// Spacing +// +// Control the default styling of most Bootstrap elements by modifying these +// variables. Mostly focused on spacing. +// You can add more entries to the $spacers map, should you need more variation. + +$spacer: 1rem !default; +$spacers: ( + 0: 0, + 1: $spacer * 0.25, + 2: $spacer * 0.5, + 3: $spacer, + 4: $spacer * 1.5, + 5: $spacer * 3, + 6: $spacer * 4, + 7: $spacer * 6, + 8: $spacer * 8, + 9: $spacer * 10, + 10: $spacer * 12, + 11: $spacer * 14, + 12: $spacer * 16, +) !default; + +$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default; + +// Position +// +// Define the edge positioning anchors of the position utilities. + +$position-values: ( + 0: 0, + 1: 1%, + 2: 2%, + 3: 3%, + 4: 4%, + 5: 5%, + 6: 6%, + 7: 7%, + 8: 8%, + 9: 9%, + 10: 10%, + 50: 50%, + 100: 100% +) !default; + + +// Body +// +// Settings for the `` element. + +$body-bg: $white !default; +$body-color: $slate-500 !default; +$body-text-align: null !default; + + +// Links +// +// Style anchor elements. + +$link-color: $primary !default; +$link-decoration: none !default; +$link-shade-percentage: 20% !default; +$link-hover-color: shift-color($link-color, $link-shade-percentage) !default; +$link-hover-decoration: none !default; +// Darken percentage for links with `.text-*` class (e.g. `.text-success`) +$emphasized-link-hover-darken-percentage: 15% !default; + +$stretched-link-pseudo-element: after !default; +$stretched-link-z-index: 1 !default; + + +// Paragraphs +// +// Style p element. + +$paragraph-margin-bottom: 1rem !default; + + +// Grid breakpoints +// +// Define the minimum dimensions at which your layout will change, +// adapting to different screen sizes, for use in media queries. + +// scss-docs-start grid-breakpoints +$grid-breakpoints: ( + xs: 0, + sm: 576px, + md: 768px, + lg: 992px, + xl: 1200px, + xxl: 1400px +) !default; +// scss-docs-end grid-breakpoints + +@include _assert-ascending($grid-breakpoints, "$grid-breakpoints"); +@include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints"); + + +// Grid containers +// +// Define the maximum width of `.container` for different screen sizes. + +// scss-docs-start container-max-widths +$container-max-widths: ( + sm: 540px, + md: 720px, + lg: 960px, + xl: 1140px, + xxl: 1320px +) !default; +// scss-docs-end container-max-widths + +@include _assert-ascending($container-max-widths, "$container-max-widths"); + + +// Grid columns +// +// Set the number of columns and specify the width of the gutters. + +$grid-columns: 12 !default; +$grid-gutter-width: 1.5rem !default; +$grid-row-columns: 6 !default; + +$gutters: $spacers !default; + +// Container padding + +$container-padding-x: $grid-gutter-width !default; + + +// Components +// +// Define common padding and border radius sizes and more. + +$border-width: 1px !default; +$border-color: $gray-300 !default; + +$border-radius-xs: .125rem !default; +$border-radius-sm: .25rem !default; +$border-radius-default: .375rem !default; +$border-radius-md: .5rem !default; +$border-radius-lg: .75rem !default; +$border-radius-xl: 1rem !default; +$border-radius-2xl: 1.5rem !default; +$border-radius-section: 10rem !default; + +$border-widths: ( + 0: 0, + 1: 1px, + 2: 2px, + 3: 3px, + 4: 4px, + 5: 5px +) !default; + +$rounded-pill: 50rem !default; + +$box-shadow-xxs: 0 0.0625rem 0.25rem 0px rgba(12,26,36, .06) !default; +$box-shadow-xs: 0 0.125rem 5px -.0625rem rgba(12,26,36, .1), 0 .0625rem .0625rem 0 rgba(12,26,36, .04) !default; +$box-shadow-sm: 0 0.25rem 0.375rem -.125rem rgba(12, 26, 36, 0.12), 0 0.125rem 0.25rem -0.125rem rgba(12, 26, 36, 0.08) !default; +$box-shadow: 0 0.75rem 1.0625rem -.3125rem rgba(12,26,36, 0.09), 0 0.25rem 0.4375rem -.1875px rgba(12, 26, 36, 0.04) !default; +$box-shadow-lg: 0 0.5rem 1.5rem -.25rem rgba(12, 26, 36, 0.15), 0 0.5rem 0.6275rem -.3125rem rgba(12, 26, 36, 0.06) !default; +$box-shadow-xl: 0 23px 45px -11px rgba(12, 26, 36, .25) !default; // need to be updated +$box-shadow-inset: inset 0 1px 2px rgba($black, .075) !default; + +$component-active-color: $white !default; +$component-active-bg: $primary !default; + +$caret-width: .3em !default; +$caret-vertical-align: $caret-width * .85 !default; +$caret-spacing: $caret-width * .85 !default; + +$transition-base: all .2s ease-in-out !default; +$transition-fade: opacity .15s linear !default; +$transition-collapse: height .35s ease !default; + +// stylelint-disable function-disallowed-list +// scss-docs-start aspect-ratios +$aspect-ratios: ( + "1x1": 100%, + "4x3": calc(3 / 4 * 100%), + "16x9": calc(9 / 16 * 100%), + "21x9": calc(9 / 21 * 100%) +) !default; +// scss-docs-end aspect-ratios +// stylelint-enable function-disallowed-list + +// Typography +// +// Font, line-height, and color for body text, headings, and more. + +// stylelint-disable value-keyword-case +$font-family-sans-serif: 'Noto Sans', 'Open Sans' !default; +$font-family-pt-mono: 'PT Mono' !default; +$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; +// stylelint-enable value-keyword-case +$font-family-base: var(--bs-font-sans-serif) !default; +$font-family-code: var(--bs-font-monospace) !default; + +// $font-size-root effects the value of `rem`, which is used for as well font sizes, paddings and margins +// $font-size-base effects the font size of the body text +$font-size-root: null !default; +$font-size-base: 1rem !default; // Assumes the browser default, typically `16px` +$font-size-xxs: $font-size-base * .65 !default; +$font-size-xs: $font-size-base * .75 !default; +$font-size-sm: $font-size-base * .875 !default; +$font-size-lg: $font-size-base * 1.125 !default; +$font-size-xl: $font-size-base * 1.25 !default; +$font-size-2xl: $font-size-base * 1.5 !default; +$font-size-3xl: $font-size-base * 1.875 !default; +$font-size-4xl: $font-size-base * 2 !default; +$font-size-5xl: $font-size-base * 2.25 !default; +$font-size-6xl: $font-size-base * 3 !default; +$font-size-7xl: $font-size-base * 3.75 !default; +$font-size-8xl: $font-size-base * 4 !default; +$font-size-9xl: $font-size-base * 5 !default; + +$font-weight-lighter: lighter !default; +$font-weight-light: 300 !default; +$font-weight-normal: 400 !default; +$font-weight-semibold: 500 !default; +$font-weight-bold: 600 !default; +$font-weight-bolder: 700 !default; +$font-weight-black: 800 !default; + +$font-weight-base: $font-weight-normal !default; + +$h1-font-weight: $font-weight-bold !default; +$h2-font-weight: $font-weight-bold !default; +$h3-font-weight: $font-weight-bold !default; +$h4-font-weight: $font-weight-bold !default; +$h5-font-weight: $font-weight-bold !default; +$h6-font-weight: $font-weight-bold !default; +$p-font-weight: $font-weight-normal !default; +$lead-font-weight: $font-weight-normal !default; +$text-sm-font-weight: $font-weight-normal !default; +$text-xs-font-weight: $font-weight-normal !default; + +$line-height: 1.75rem !default; +$line-height-base: 1.5 !default; +$line-height-sm: 1.25 !default; +$line-height-lg: 2 !default; + +$h1-line-height: 1.25 !default; +$h2-line-height: 1.3 !default; +$h3-line-height: 1.375 !default; +$h4-line-height: 1.375 !default; +$h5-line-height: 1.375 !default; +$h6-line-height: 1.625 !default; +$p-line-height: 1.6 !default; +$lead-line-height: 1.625 !default; +$text-sm-line-height: 1.5 !default; +$text-xs-line-height: 1.25 !default; + +$font-size-base: 1rem !default; // Assumes the browser default, typically `16px` +$h1-font-size: $font-size-base * 3 !default; +$h2-font-size: $font-size-base * 2.25 !default; +$h3-font-size: $font-size-base * 1.875 !default; +$h4-font-size: $font-size-base * 1.5 !default; +$h5-font-size: $font-size-base * 1.25 !default; +$h6-font-size: $font-size-base !default; +$lead-font-size: $font-size-base * 1.25 !default; + + +$text-sm-font-size: .875rem !default; +$text-xs-font-size: .75rem !default; +$p-font-size: 1rem !default; + +$headings-margin-bottom: $spacer * 0.5 !default; +$headings-font-family: null !default; +$headings-font-style: null !default; +$headings-font-weight: 400 !default; +$headings-line-height: 1.2 !default; +$headings-color: $slate-800 !default; + +// scss-docs-start display-headings +$display-font-sizes: ( + 1: 5rem, + 2: 4.5rem, + 3: 4rem, + 4: 3.5rem, + 5: 3rem, + 6: 2.5rem +) !default; + +$display-font-weight: 300 !default; +$display-line-height: $headings-line-height !default; +// scss-docs-end display-headings + +$lead-font-size: $font-size-base * 1.25 !default; +$lead-font-weight: 300 !default; + +$small-font-size: .875em !default; + +$sub-sup-font-size: .75em !default; + +$text-secondary: $slate-500 !default; +$text-muted: $slate-400 !default; + +// text gradient +$text-gradient-bg-clip: text !default; +$text-gradient-text-fill: transparent !default; +$text-gradient-position: relative !default; +$text-gradient-zindex: 1 !default; +$text-gradient-bg-primary: linear-gradient(310deg, #7928CA, #FF0080) !default; +$text-gradient-bg-info: linear-gradient(310deg, #2152FF, #21D4FD) !default; +$text-gradient-bg-success: linear-gradient(310deg, #17AD37, #C1E823) !default; +$text-gradient-bg-warning: linear-gradient(310deg, #F53939, #FBCF33) !default; +$text-gradient-bg-danger: linear-gradient(310deg, #D60808, #FF6690) !default; +$text-gradient-bg-dark: linear-gradient(310deg, #141727, #3A416F) !default; + +$initialism-font-size: $small-font-size !default; + +$blockquote-margin-y: $spacer !default; +$blockquote-font-size: $font-size-base * 1.25 !default; +$blockquote-footer-color: $gray-600 !default; +$blockquote-footer-font-size: $small-font-size !default; + +$hr-margin-y: $spacer !default; +$hr-color: inherit !default; +$hr-height: $border-width !default; +$hr-opacity: .25 !default; + +$legend-margin-bottom: .5rem !default; +$legend-font-size: 1.5rem !default; +$legend-font-weight: null !default; + +$mark-padding: .2em !default; + +$dt-font-weight: $font-weight-bold !default; + +$nested-kbd-font-weight: $font-weight-bold !default; + +$list-inline-padding: .5rem !default; + +$mark-bg: #fcf8e3 !default; + +// Letter Spacing +$letter-wider: .05rem !default; +$letter-normal: 0rem !default; +$letter-tighter: -0.05rem !default; +$h1-letter-spacing: 0.1rem !default; +$a-letter-spacing: -0.025rem !default; + +// Tables +// +// Customizes the `.table` component with basic values, each used across all table variations. +$table-head-spacer-y: .75rem !default; +$table-head-spacer-x: 1.5rem !default; +$table-head-font-size: .65rem !default; +$table-head-font-weight: $font-weight-bold !default; +$table-head-text-transform: capitalize !default; +$table-head-letter-spacing: 0px !default; +$table-head-bg: $gray-100 !default; +$table-head-color: $gray-600 !default; + +$table-body-font-size: .8125rem !default; + +$table-border-width: $border-width !default; +$table-border-color: $gray-300 !default; + +// scss-docs-start table-variables +$table-cell-padding-y: .5rem !default; +$table-cell-padding-x: .5rem !default; +$table-cell-padding-y-sm: .25rem !default; +$table-cell-padding-x-sm: .25rem !default; + +$table-cell-vertical-align: top !default; + +$table-color: $slate-500 !default; +$table-bg: transparent !default; + +$table-th-font-weight: null !default; + +$table-striped-color: $table-color !default; +$table-striped-bg-factor: .05 !default; +$table-striped-bg: rgba($black, $table-striped-bg-factor) !default; + +$table-active-color: $table-color !default; +$table-active-bg-factor: .1 !default; +$table-active-bg: rgba($black, $table-active-bg-factor) !default; + +$table-hover-color: $table-color !default; +$table-hover-bg-factor: .075 !default; +$table-hover-bg: rgba($black, $table-hover-bg-factor) !default; + +$table-border-factor: .1 !default; +$table-border-width: $border-width !default; +$table-border-color: $border-color !default; + +$table-striped-order: odd !default; + +$table-group-separator-color: currentColor !default; + +$table-caption-color: $text-muted !default; + +$table-bg-level: -9 !default; +$table-bg-scale: -80% !default; + + +$table-variants: ( + "primary": shift-color($primary, $table-bg-scale), + "secondary": shift-color($secondary, $table-bg-scale), + "success": shift-color($success, $table-bg-scale), + "info": shift-color($info, $table-bg-scale), + "warning": shift-color($warning, $table-bg-scale), + "danger": shift-color($danger, $table-bg-scale), + "light": $light, + "dark": $dark, +) !default; +// scss-docs-end table-variables + + +// Buttons + Forms +// +// Shared variables that are reassigned to `$input-` and `$btn-` specific variables. + +$input-btn-padding-y: .5rem !default; +$input-btn-padding-x: .75rem !default; +$input-btn-font-family: null !default; +$input-btn-font-size: 1rem !default; +$input-btn-line-height: 1rem !default; + +$input-btn-focus-width: .2rem !default; +$input-btn-focus-color-opacity: .25 !default; +$input-btn-focus-color: rgba($component-active-bg, $input-btn-focus-color-opacity) !default; +$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default; + +$input-btn-padding-y-sm: .5rem !default; +$input-btn-padding-x-sm: .75rem !default; +$input-btn-font-size-sm: .75rem !default; + +$input-btn-padding-y-lg: .875rem !default; +$input-btn-padding-x-lg: .75rem !default; +$input-btn-font-size-lg: .875rem !default; + +$input-btn-border-width: $border-width !default; + + +// Buttons +// +// For each of Bootstrap's buttons, define text, background, and border color. + +$btn-padding-y: .6875rem !default; +$btn-padding-x: 1.5rem !default; +$btn-font-family: $input-btn-font-family !default; +$btn-font-size: $text-sm-font-size !default; +$btn-line-height: $input-btn-line-height !default; +$btn-white-space: null !default; // Set to `nowrap` to prevent text wrapping +$btn-letter-spacing: -0.0125rem !default; // Set to `nowrap` to prevent text wrapping + +$btn-margin-bottom: 1rem !default; +$btn-padding-y-sm: .5rem !default; +$btn-padding-x-sm: 1.25rem !default; +$btn-font-size-sm: $input-btn-font-size-sm !default; + +$btn-padding-y-lg: .875rem !default; +$btn-padding-x-lg: 4rem !default; +$btn-font-size-lg: .875rem !default; + +$btn-border-width: $input-btn-border-width !default; + +$btn-font-weight: $font-weight-bold !default; +$btn-box-shadow: 0 1px 2px 0px rgba(12,26,36,.06) !default; +$btn-box-shadow-values: 0 5px 8px 0 !default; +$btn-box-shadow-hover-values: 0 8px 10px 0 !default; +$btn-hover-box-shadow: 0 3px 5px -1px rgba(0,0,0,.09), 0 2px 3px -1px rgba(0,0,0,.07) !default; +$btn-focus-box-shadow: $btn-hover-box-shadow !default; +$btn-focus-width: $input-btn-focus-width !default; +$btn-hover-opacity: .85 !default; +$btn-disabled-opacity: .65 !default; +$btn-active-box-shadow: none !default; +$btn-background-size: 150% !default; +$btn-hover-transform: scale(1.02) !default; +$btn-active-hover-transform: scale(1) !default; +$btn-background-position-x: 25% !default; + +$btn-link-color: $link-color !default; +$btn-link-hover-color: $link-hover-color !default; +$btn-link-disabled-color: $gray-600 !default; + +$btn-block-spacing-y: .5rem !default; + +// Allows for customizing button radius independently from global border radius +$btn-border-radius: $border-radius-default !default; +$btn-border-radius-lg: .5rem !default; +$btn-border-radius-sm: $border-radius-default !default; +$btn-border-rounded: 1.875rem !default; + +$btn-icon-transition: all .2s cubic-bezier(.34,1.61,.7,1.3) !default; +$btn-icon-transform-right: translateX(5px) !default; +$btn-icon-transform-left: translateX(-5px) !default; + +// Allows for customizing button radius independently from global border radius +$btn-border-radius: $border-radius-default !default; +$btn-border-radius-sm: $border-radius-sm !default; +$btn-border-radius-lg: $border-radius-lg !default; + +$btn-transition: all 0.14s cubic-bezier(0.655, 0.055, 0.345, 1) !default; + +$btn-just-icon-padding-x-sm: .3rem !default; +$btn-just-icon-padding-y-sm: .3rem !default; +$btn-just-icon-padding-x: .7rem !default; +$btn-just-icon-padding-y: .7rem !default; +$btn-just-icon-padding-x-lg: 1rem !default; +$btn-just-icon-padding-y-lg: 1rem !default; +$btn-just-icon-width: 2.375rem !default; +$btn-just-icon-height: $btn-just-icon-width !default; +$btn-just-icon-width-sm: 1.5875rem !default; +$btn-just-icon-height-sm: $btn-just-icon-width-sm !default; +$btn-just-icon-sm-font-size: .5rem !default; +$btn-just-icon-width-lg: 3.25rem !default; +$btn-just-icon-height-lg: $btn-just-icon-width-lg !default; +$btn-just-icon-lg-font-size: 1.2rem !default; +$btn-just-icon-lg-position: relative !default; +$btn-just-icon-lg-top: 2px !default; + +// we've overwritten the default Bootstrap function +// for dynamically adding font color since the colors +// added by that function were not correctly set +$btn-primary-font-color: #fff !default; +$btn-secondary-font-color: #fff !default; +$btn-danger-font-color: #fff !default; +$btn-info-font-color: #fff !default; +$btn-success-font-color: #fff !default; +$btn-warning-font-color: #fff !default; +$btn-dark-font-color: #fff !default; +$btn-light-font-color: #3A416F !default; +$btn-white-font-color: #334155 !default; + +$btn-font-colors: () !default; + +$btn-font-colors: map-merge( + ( + "primary": $btn-primary-font-color, + "secondary": $btn-secondary-font-color, + "danger": $btn-danger-font-color, + "info": $btn-info-font-color, + "success": $btn-success-font-color, + "warning": $btn-warning-font-color, + "dark": $btn-dark-font-color, + "light": $btn-light-font-color, + "white": $btn-white-font-color + ), + $btn-font-colors +); + +// Forms + +$form-text-margin-top: .25rem !default; +$form-text-font-size: $small-font-size !default; +$form-text-font-style: null !default; +$form-text-font-weight: null !default; +$form-text-color: $text-muted !default; + +$form-label-margin-bottom: .375rem !default; +$form-label-margin-left: .125rem !default; +$form-label-font-size: .8125rem !default; +$form-label-font-style: null !default; +$form-label-font-weight: $font-weight-bold !default; +$form-label-color: $slate-700 !default; + +$input-padding-y: .6875rem !default; +$input-padding-x: .75rem !default; +$input-font-family: $input-btn-font-family !default; +$input-font-size: $font-size-sm !default; +$input-font-weight: $font-weight-base !default; +$input-line-height: 1rem !default; + +$input-padding-y-sm: $input-btn-padding-y-sm !default; +$input-padding-x-sm: $input-btn-padding-x-sm !default; +$input-font-size-sm: .75rem !default; + +$input-padding-y-lg: $input-btn-padding-y-lg !default; +$input-padding-x-lg: $input-btn-padding-x-lg !default; +$input-font-size-lg: .875rem !default; + +$input-bg: $white !default; +$input-disabled-bg: $gray-200 !default; +$input-disabled-border-color: null !default; + +$input-color: $gray-700 !default; +$input-border-color: $slate-350 !default; +$input-border-width: $input-btn-border-width !default; +$input-box-shadow: 0 1px 2px 0 rgba(12, 26, 36, 0.06) !default; + +$input-border-radius: $border-radius-default !default; +$input-border-radius-sm: $border-radius-default !default; +$input-border-radius-lg: $border-radius-md !default; + +$input-focus-bg: $white !default; +$input-focus-border-color: #1b89f7 !default; +$input-focus-color: $input-color !default; +$input-focus-width: 0px !default; +$input-focus-box-shadow: 0 1px 3px 0 rgba(12, 26, 36, 0.1) !default; + +$input-placeholder-color: $slate-400 !default; +$input-plaintext-color: $slate-700 !default; + +$input-height-border: $input-border-width * 2 !default; + +$input-height-inner: unset !default; +$input-height-inner-half: 1rem !default; +$input-height-inner-quarter: .75rem !default; + +$input-height: unset !default; +$input-height-sm: unset !default; +$input-height-lg: unset !default; + +$input-transition: box-shadow .15s ease, border-color .2s cubic-bezier(.655,.055,.345,1) !default; + + +$form-check-input-width: 1.23em !default; +$form-check-min-height: $font-size-base * $line-height-base !default; +$form-check-padding-left: $form-check-input-width + .45em !default; +$form-check-margin-bottom: .125rem !default; +$form-check-label-color: null !default; +$form-check-label-cursor: null !default; +$form-check-transition: all 0.15s ease-out !default; +$form-check-transition-time: .25s !default; + +$form-check-input-active-filter: brightness(99%) !default; + +$form-check-input-bg: $white !default; +$form-check-input-border: none !default; +$form-check-input-border-radius: .25rem !default; +$form-check-radio-border-radius: 50% !default; +$form-check-input-focus-border: none !default; +$form-check-input-focus-box-shadow: none !default; + +$form-check-input-checked-color: $white !default; +$form-check-input-checked-bg-color: transparent !default; +$form-check-input-checked-border-color: $form-check-input-checked-bg-color !default; +$form-check-input-checked-bg-image: linear-gradient(310deg, $slate-800 0%, $slate-800 100%) !default; +$form-check-radio-checked-bg-image: $form-check-input-checked-bg-image !default; +$form-check-radio-after-width: .5rem !default; + +$form-check-input-indeterminate-color: $component-active-color !default; +$form-check-input-indeterminate-bg-color: $component-active-bg !default; +$form-check-input-indeterminate-border-color: $form-check-input-indeterminate-bg-color !default; +$form-check-input-indeterminate-bg-image: url("data:image/svg+xml,") !default; + +$form-switch-color: rgba(0, 0, 0, 1) !default; +$form-switch-height: 1.2em !default; +$form-switch-width: 2.5rem !default; +$form-switch-check-after-width: 1rem !default; +$form-switch-padding-start: $form-switch-width + .5rem !default; +$form-switch-bg-image: none !default; +$form-switch-border-radius: $form-switch-width !default; +$form-switch-translate-x-start: 1px !default; +$form-switch-translate-x-end: 21px !default; +$form-switch-round-box-shadow: $box-shadow !default; +$form-switch-transition: $form-check-transition !default; + +$form-switch-focus-color: $form-switch-color !default; +$form-switch-focus-bg-image: $form-switch-bg-image !default; +$form-switch-checked-color: $white !default; +$form-switch-checked-bg-image: $form-switch-bg-image !default; +$form-switch-checked-bg-position: right center !default; + +$form-check-inline-margin-right: 1rem !default; + +$input-group-addon-padding-y: $input-padding-y !default; +$input-group-addon-padding-x: $input-padding-x !default; +$input-group-addon-font-weight: $input-font-weight !default; +$input-group-addon-color: $dark !default; +$input-group-addon-bg: $gray-100 !default; +$input-group-addon-border-color: $input-border-color !default; + + +$form-select-padding-y: $input-padding-y !default; +$form-select-padding-x: $input-padding-x !default; +$form-select-font-family: $input-font-family !default; +$form-select-font-size: $input-font-size !default; +$form-select-height: $input-height !default; +$form-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator +$form-select-font-weight: $input-font-weight !default; +$form-select-line-height: $input-line-height !default; +$form-select-color: $input-color !default; +$form-select-disabled-color: $gray-600 !default; +$form-select-bg: $input-bg !default; +$form-select-disabled-bg: $gray-200 !default; +$form-select-disabled-border-color: $input-disabled-border-color !default; +$form-select-bg-position: right $form-select-padding-x center !default; +$form-select-bg-size: 16px 12px !default; // In pixels because image dimensions +$form-select-indicator-color: $gray-800 !default; +$form-select-indicator: url("data:image/svg+xml,") !default; + +$form-select-feedback-icon-padding-right: add(1em * .75, (2 * $form-select-padding-y * .75) + $form-select-padding-x + $form-select-indicator-padding) !default; +$form-select-feedback-icon-position: center right ($form-select-padding-x + $form-select-indicator-padding) !default; +$form-select-feedback-icon-size: $input-height-inner-half $input-height-inner-half !default; + +$form-select-border-width: $input-border-width !default; +$form-select-border-color: $input-border-color !default; +$form-select-border-radius: $border-radius-default !default; +$form-select-box-shadow: $box-shadow-inset !default; + +$form-select-focus-border-color: $input-focus-border-color !default; +$form-select-focus-width: $input-focus-width !default; +$form-select-focus-box-shadow: $input-focus-box-shadow !default; + +$form-select-padding-y-sm: $input-padding-y-sm !default; +$form-select-padding-x-sm: $input-padding-x-sm !default; +$form-select-font-size-sm: $input-font-size-sm !default; +$form-select-height-sm: $input-height-sm !default; + +$form-select-padding-y-lg: $input-padding-y-lg !default; +$form-select-padding-x-lg: $input-padding-x-lg !default; +$form-select-font-size-lg: $input-font-size-lg !default; +$form-select-height-lg: $input-height-lg !default; + +$form-range-track-width: 100% !default; +$form-range-track-height: .5rem !default; +$form-range-track-cursor: pointer !default; +$form-range-track-bg: $gray-300 !default; +$form-range-track-border-radius: 1rem !default; +$form-range-track-box-shadow: $box-shadow-inset !default; + +$form-range-thumb-width: 1rem !default; +$form-range-thumb-height: $form-range-thumb-width !default; +$form-range-thumb-bg: $component-active-bg !default; +$form-range-thumb-border: 0 !default; +$form-range-thumb-border-radius: 1rem !default; +$form-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1) !default; +$form-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-focus-box-shadow !default; +$form-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For focus box shadow issue in Edge +$form-range-thumb-active-bg: lighten($component-active-bg, 35%) !default; +$form-range-thumb-disabled-bg: $gray-500 !default; +$form-range-thumb-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; + +$form-file-height: $input-height !default; +$form-file-focus-border-color: $input-focus-border-color !default; +$form-file-focus-box-shadow: $input-focus-box-shadow !default; +$form-file-disabled-bg: $input-disabled-bg !default; +$form-file-disabled-border-color: $input-disabled-border-color !default; + +$form-file-padding-y: $input-padding-y !default; +$form-file-padding-x: $input-padding-x !default; +$form-file-line-height: $input-line-height !default; +$form-file-font-family: $input-font-family !default; +$form-file-font-weight: $input-font-weight !default; +$form-file-color: $input-color !default; +$form-file-bg: $input-bg !default; +$form-file-border-width: $input-border-width !default; +$form-file-border-color: $input-border-color !default; +$form-file-border-radius: $input-border-radius !default; +$form-file-box-shadow: $input-box-shadow !default; +$form-file-button-color: $form-file-color !default; +$form-file-button-bg: $input-group-addon-bg !default; + +$form-file-padding-y-sm: $input-padding-y-sm !default; +$form-file-padding-x-sm: $input-padding-x-sm !default; +$form-file-font-size-sm: $input-font-size-sm !default; +$form-file-height-sm: $input-height-sm !default; + +$form-file-padding-y-lg: $input-padding-y-lg !default; +$form-file-padding-x-lg: $input-padding-x-lg !default; +$form-file-font-size-lg: $input-font-size-lg !default; +$form-file-height-lg: $input-height-lg !default; + + +// Form validation + +$form-feedback-margin-top: $form-text-margin-top !default; +$form-feedback-font-size: $form-text-font-size !default; +$form-feedback-font-style: $form-text-font-style !default; +$form-feedback-valid-color: #66d432 !default; +$form-feedback-invalid-color: #fd5c70 !default; + +$form-feedback-icon-valid-color: $form-feedback-valid-color !default; +$form-feedback-icon-valid: url("data:image/svg+xml,") !default; +$form-feedback-icon-invalid-color: $form-feedback-invalid-color !default; +$form-feedback-icon-invalid: url("data:image/svg+xml,") !default; + +// scss-docs-start form-validation-states +$form-validation-states: ( + "valid": ( + "color": $form-feedback-valid-color, + "icon": $form-feedback-icon-valid + ), + "invalid": ( + "color": $form-feedback-invalid-color, + "icon": $form-feedback-icon-invalid + ) +) !default; +// scss-docs-end form-validation-states + +// Z-index master list +// +// Warning: Avoid customizing these values. They're used for a bird's eye view +// of components dependent on the z-axis and are designed to all work together. + +// scss-docs-start zindex-stack +$zindex-dropdown: 1000 !default; +$zindex-sticky: 1020 !default; +$zindex-fixed: 1030 !default; +$zindex-modal-backdrop: 1040 !default; +$zindex-modal: 1050 !default; +$zindex-popover: 1060 !default; +$zindex-tooltip: 1070 !default; +// scss-docs-end zindex-stack + + +// Navs + +$nav-link-padding-y: .5rem !default; +$nav-link-padding-x: 1rem !default; +$nav-link-font-size: null !default; +$nav-link-font-weight: null !default; +$nav-link-color: null !default; +$nav-link-hover-color: null !default; +$nav-link-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out !default; +$nav-link-disabled-color: $gray-600 !default; +$nav-link-footer-padding: .25rem !default; + +$nav-tabs-border-color: $gray-300 !default; +$nav-tabs-border-width: $border-width !default; +$nav-tabs-border-radius: $border-radius-default !default; +$nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color !default; +$nav-tabs-link-active-color: $gray-700 !default; +$nav-tabs-link-active-bg: $body-bg !default; +$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default; + +$nav-pills-border-radius: 0.75rem !default; +$nav-pills-link-active-color: $dark !default; +$nav-pills-link-active-bg: $white !default; +$nav-pills-link-transition: background-color .3s ease !default; +$nav-pills-background: $gray-100 !default; +$nav-pills-vertical-background: transparent !default; +$nav-pills-vertical-radius: 1.1875rem !default; +$nav-pills-vertical-link-radius: .875rem !default; + + +// Navbar + +$navbar-padding-y: $spacer * 0.5 !default; +$navbar-padding-x: null !default; +$navbar-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .16) !default; + +$navbar-nav-link-padding-x: .5rem !default; +$navbar-nav-link-padding: $navbar-nav-link-padding-x 1rem !default; +$navbar-nav-link-color: $slate-500 !default; + +$navbar-brand-font-size: $font-size-sm !default; +// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link +$nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default; +$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default; +$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) * 0.5 !default; +$navbar-brand-margin-right: 1rem !default; + +$navbar-toggler-padding-y: .25rem !default; +$navbar-toggler-padding-x: .75rem !default; +$navbar-toggler-font-size: $font-size-lg !default; +$navbar-toggler-border-radius: $btn-border-radius !default; +$navbar-toggler-focus-width: $btn-focus-width !default; +$navbar-toggler-transition: box-shadow .15s ease-in-out !default; + +$navbar-blur-bg-color: rgba(255, 255, 255, .8) !default; +$navbar-blur-dark-bg-color: rgba(2, 5, 22, .8) !default; + +$navbar-dark-color: rgba($white, .85) !default; +$navbar-dark-hover-color: rgba($white, .75) !default; +$navbar-dark-active-color: $white !default; +$navbar-dark-disabled-color: rgba($white, .25) !default; +$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,") !default; +$navbar-dark-toggler-border-color: rgba($white, .1) !default; + +$navbar-light-color: $dark !default; +$navbar-light-hover-color: rgba($dark, .7) !default; +$navbar-light-active-color: rgba($dark, .9) !default; +$navbar-light-disabled-color: rgba($dark, .3) !default; +$navbar-light-toggler-icon-bg: url("data:image/svg+xml,") !default; +$navbar-light-toggler-border-color: rgba($dark, .1) !default; + +$navbar-light-brand-color: $navbar-light-active-color !default; +$navbar-light-brand-hover-color: $navbar-light-active-color !default; +$navbar-dark-brand-color: $navbar-dark-active-color !default; +$navbar-dark-brand-hover-color: $navbar-dark-active-color !default; + +// Sidenav toggler +$sidenav-toggler-width: 18px !default; +$sidenav-toggler-line-transition: all .15s ease !default; +$sidenav-toggler-line-height: 2px !default; +$sidenav-toggler-line-margin-bottom: 3px !default; +$sidenav-toggler-line-active-width: 13px !default; +$sidenav-toggler-line-transform: translateX(5px) !default; + +// Dropdowns +// +// Dropdown menu container and contents. + +$dropdown-min-width: 11rem !default; +$dropdown-padding-x: 0 !default; +$dropdown-padding-y: .5rem !default; +$dropdown-spacer: 1.625rem !default; +$dropdown-font-size: $font-size-sm !default; +$dropdown-color: $slate-500 !default; +$dropdown-bg: $white !default; +$dropdown-border-color: transparent !default; +$dropdown-border-radius: $border-radius-default !default; +$dropdown-border-width: 0 !default; +$dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width) !default; +$dropdown-transition-time: .3s ease !default; +$dropdown-divider-bg: $dropdown-border-color !default; +$dropdown-divider-margin-y: $spacer * 0.5 !default; +$dropdown-box-shadow: $box-shadow-lg !default; + +$dropdown-link-color: $slate-500 !default; +$dropdown-link-hover-color: $h-color !default; +$dropdown-link-hover-bg: $gray-200 !default; + +$dropdown-link-active-color: $slate-700 !default; +$dropdown-link-active-bg: transparent !default; + +$dropdown-link-disabled-color: $gray-600 !default; + +$dropdown-item-padding-y: .3rem !default; +$dropdown-item-padding-x: $spacer !default; + +$dropdown-header-color: $gray-600 !default; +$dropdown-header-padding: $dropdown-padding-y $dropdown-item-padding-x !default; + +$dropdown-dark-color: $gray-300 !default; +$dropdown-dark-bg: $gray-800 !default; +$dropdown-dark-border-color: $dropdown-border-color !default; +$dropdown-dark-divider-bg: $dropdown-divider-bg !default; +$dropdown-dark-box-shadow: null !default; +$dropdown-dark-link-color: $dropdown-dark-color !default; +$dropdown-dark-link-hover-color: $white !default; +$dropdown-dark-link-hover-bg: rgba($white, .15) !default; +$dropdown-dark-link-active-color: $dropdown-link-active-color !default; +$dropdown-dark-link-active-bg: $dropdown-link-active-bg !default; +$dropdown-dark-link-disabled-color: $gray-500 !default; +$dropdown-dark-header-color: $gray-500 !default; + + +// Pagination + +$pagination-padding-y: .375rem !default; +$pagination-padding-x: .75rem !default; +$pagination-padding-y-sm: .25rem !default; +$pagination-padding-x-sm: .5rem !default; +$pagination-padding-y-lg: .75rem !default; +$pagination-padding-x-lg: 1.5rem !default; + +$pagination-color: $link-color !default; +$pagination-bg: $white !default; +$pagination-border-width: $border-width !default; +$pagination-border-radius: $border-radius-sm !default; +$pagination-margin-left: -$pagination-border-width !default; +$pagination-border-color: $gray-300 !default; + +$pagination-focus-color: $link-hover-color !default; +$pagination-focus-bg: $gray-200 !default; +$pagination-focus-box-shadow: $input-btn-focus-box-shadow !default; +$pagination-focus-outline: 0 !default; + +$pagination-hover-color: $link-hover-color !default; +$pagination-hover-bg: $gray-200 !default; +$pagination-hover-border-color: $gray-300 !default; + +$pagination-active-color: $component-active-color !default; +$pagination-active-bg: $component-active-bg !default; +$pagination-active-border-color: $pagination-active-bg !default; + +$pagination-disabled-color: $gray-600 !default; +$pagination-disabled-bg: $white !default; +$pagination-disabled-border-color: $gray-300 !default; + +$pagination-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; + +// Cards + +$card-spacer-y: $spacer !default; +$card-spacer-x: $spacer !default; +$card-title-spacer-y: $spacer * 0.5 !default; +$card-border-width: 0 !default; +$card-border-radius: 0.375rem !default; +$card-border-color: rgba($black, .125) !default; +$card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default; +$card-cap-padding-y: $card-spacer-y * 0.5 !default; +$card-cap-padding-x: $card-spacer-x !default; +$card-cap-bg: $white !default; +$card-cap-color: null !default; +$card-height: null !default; +$card-color: null !default; +$card-bg: $white !default; + +$card-img-overlay-padding: $spacer !default; + +$card-group-margin: $grid-gutter-width * 0.5 !default; + + +// Accordion +$accordion-padding-y: 1rem !default; +$accordion-padding-x: 1rem !default; +$accordion-color: $slate-500 !default; +$accordion-bg: transparent !default; +$accordion-border-width: 0 !default; +$accordion-border-color: rgba($black, .125) !default; +$accordion-border-radius: $border-radius-sm !default; + +$accordion-body-padding-y: $accordion-padding-y !default; +$accordion-body-padding-x: $accordion-padding-x !default; + +$accordion-button-padding-y: $accordion-padding-y !default; +$accordion-button-padding-x: $accordion-padding-x !default; +$accordion-button-color: $accordion-color !default; +$accordion-button-bg: $accordion-bg !default; +$accordion-transition: $btn-transition, border-radius .15s ease !default; +$accordion-button-active-bg: $accordion-bg !default; +$accordion-button-active-color: $dark !default; + +$accordion-button-focus-border-color: $input-focus-border-color !default; +$accordion-button-focus-box-shadow: none !default; + +$accordion-icon-width: 1rem !default; +$accordion-icon-color: $accordion-color !default; +$accordion-icon-active-color: $accordion-button-active-color !default; +$accordion-icon-transition: transform .2s ease-in-out !default; +$accordion-icon-transform: rotate(180deg) !default; + +$accordion-button-icon: none !default; +$accordion-button-active-icon: none !default; + + +// Tooltips + +$tooltip-font-size: $font-size-sm !default; +$tooltip-max-width: 200px !default; +$tooltip-color: $white !default; +$tooltip-bg: $black !default; +$tooltip-border-radius: $border-radius-default !default; +$tooltip-opacity: .9 !default; +$tooltip-padding-y: $spacer * 0.25 !default; +$tooltip-padding-x: $spacer * 0.5 !default; +$tooltip-margin: 0 !default; + +$tooltip-arrow-width: .8rem !default; +$tooltip-arrow-height: .4rem !default; +$tooltip-arrow-color: $tooltip-bg !default; + +// Form tooltips must come after regular tooltips +$form-feedback-tooltip-padding-y: $tooltip-padding-y !default; +$form-feedback-tooltip-padding-x: $tooltip-padding-x !default; +$form-feedback-tooltip-font-size: $tooltip-font-size !default; +$form-feedback-tooltip-line-height: null !default; +$form-feedback-tooltip-opacity: $tooltip-opacity !default; +$form-feedback-tooltip-border-radius: $tooltip-border-radius !default; + + +// Popovers + +$popover-font-size: $font-size-xs !default; +$popover-bg: $white !default; +$popover-max-width: 276px !default; +$popover-border-width: 0px !default; +$popover-border-color: rgba($black, .2) !default; +$popover-border-radius: $border-radius-default !default; +$popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width) !default; +$popover-box-shadow: $box-shadow !default; + +$popover-header-bg: $gray-200 !default; +$popover-header-color: $headings-color !default; +$popover-header-padding-y: .5rem !default; +$popover-header-padding-x: $spacer !default; + +$popover-body-color: $slate-500 !default; +$popover-body-padding-y: $spacer !default; +$popover-body-padding-x: $spacer !default; + +$popover-arrow-width: 1rem !default; +$popover-arrow-height: .5rem !default; +$popover-arrow-color: $popover-bg !default; + +$popover-arrow-outer-color: fade-in($popover-border-color, .05) !default; + + +// Toasts + +$toast-max-width: 350px !default; +$toast-padding-x: .75rem !default; +$toast-padding-y: .75rem !default; +$toast-font-size: .875rem !default; +$toast-color: null !default; +$toast-background-color: rgba($white, .85) !default; +$toast-border-width: 0 !default; +$toast-border-color: transparent !default; +$toast-border-radius: $border-radius-default !default; +$toast-box-shadow: $box-shadow !default; + +$toast-header-color: $h-color !default; +$toast-header-background-color: rgba($white, .85) !default; +$toast-header-border-color: rgba(0, 0, 0, .05) !default; + + +// Badges + +$badge-font-size: .75em !default; +$badge-font-weight: $font-weight-bold !default; +$badge-color: $white !default; +$badge-padding-y: .35em !default; +$badge-padding-x: .9em !default; +$badge-border-radius-custom: 1.45rem !default; +$badge-border-radius: $badge-border-radius-custom !default; + + +// Modals + +// Padding applied to the modal body +$modal-inner-padding: $spacer !default; + +// Margin between elements in footer, must be lower than or equal to 2 * $modal-inner-padding +$modal-footer-margin-between: .5rem !default; + +$modal-dialog-margin: .5rem !default; +$modal-dialog-margin-y-sm-up: 1.75rem !default; + +$modal-title-line-height: $line-height-base !default; + +$modal-content-color: null !default; +$modal-content-bg: $white !default; +$modal-content-border-color: rgba($black, .2) !default; +$modal-content-border-width: $border-width !default; +$modal-content-border-radius: $border-radius-lg !default; +$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default; +$modal-content-box-shadow-xs: $box-shadow-sm !default; +$modal-content-box-shadow-sm-up: $box-shadow !default; + +$modal-backdrop-bg: $black !default; +$modal-backdrop-opacity: .5 !default; +$modal-header-border-color: $border-color !default; +$modal-footer-border-color: $modal-header-border-color !default; +$modal-header-border-width: $modal-content-border-width !default; +$modal-footer-border-width: $modal-header-border-width !default; +$modal-header-padding-y: $modal-inner-padding !default; +$modal-header-padding-x: $modal-inner-padding !default; +$modal-header-padding: $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility + +$modal-sm: 300px !default; +$modal-md: 500px !default; +$modal-lg: 800px !default; +$modal-xl: 1140px !default; + +$modal-fade-transform: translate(0, -50px) !default; +$modal-show-transform: none !default; +$modal-transition: transform .3s ease-out !default; +$modal-scale-transform: scale(1.02) !default; + + +// Alerts +// +// Define alert colors, border radius, and padding. + +$alert-padding-y: $spacer !default; +$alert-padding-x: $spacer !default; +$alert-margin-bottom: 1rem !default; +$alert-border-radius: $border-radius-default !default; +$alert-link-font-weight: $font-weight-bold !default; +$alert-border-width: $border-width !default; + +$alert-bg-level: -10 !default; +$alert-border-level: -9 !default; +$alert-color-level: 6 !default; + +$alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side + + +// Progress bars + +$progress-height: 8px !default; +$progress-bar-height: 8px !default; +$progress-height-sm: 4px !default; +$progress-height-lg: 20px !default; +$progress-font-size: $font-size-base * .75 !default; +$progress-bg: $gray-200 !default; +$progress-border-radius: $border-radius-default !default; +$progress-box-shadow: $box-shadow-inset !default; +$progress-bar-color: $white !default; +$progress-bar-bg: $primary !default; +$progress-bar-animation-timing: 1s linear infinite !default; +$progress-bar-transition: width .6s ease !default; + + +// List group + +$list-group-color: inherit !default; +$list-group-bg: $white !default; +$list-group-border-color: rgba($black, .125) !default; +$list-group-border-width: $border-width !default; +$list-group-border-radius: $border-radius-default !default; + +$list-group-item-padding-y: $spacer * 0.5 !default; +$list-group-item-padding-x: $spacer !default; +$list-group-item-bg-level: -9 !default; +$list-group-item-color-level: 6 !default; + +$list-group-hover-bg: $gray-100 !default; +$list-group-active-color: $component-active-color !default; +$list-group-active-bg: $component-active-bg !default; +$list-group-active-border-color: $list-group-active-bg !default; + +$list-group-disabled-color: $gray-600 !default; +$list-group-disabled-bg: $list-group-bg !default; + +$list-group-action-color: $gray-700 !default; +$list-group-action-hover-color: $list-group-action-color !default; + +$list-group-action-active-color: $slate-500 !default; +$list-group-action-active-bg: $gray-200 !default; + + +// Image thumbnails + +$thumbnail-padding: .25rem !default; +$thumbnail-bg: $body-bg !default; +$thumbnail-border-width: $border-width !default; +$thumbnail-border-color: $gray-300 !default; +$thumbnail-border-radius: $border-radius-default !default; +$thumbnail-box-shadow: $box-shadow-sm !default; + + +// Figures + +$figure-caption-font-size: $small-font-size !default; +$figure-caption-color: $gray-600 !default; + + +// Breadcrumbs + +$breadcrumb-font-size: null !default; +$breadcrumb-padding-y: $spacer * 0.5 !default; +$breadcrumb-padding-x: $spacer !default; +$breadcrumb-item-padding-x: .5rem !default; +$breadcrumb-margin-bottom: 1rem !default; +$breadcrumb-bg: $gray-200 !default; +$breadcrumb-divider-color: $gray-600 !default; +$breadcrumb-active-color: $gray-600 !default; +$breadcrumb-divider: quote("/") !default; +$breadcrumb-border-radius: $border-radius-default !default; + +// Carousel + +$carousel-control-color: $white !default; +$carousel-control-width: 15% !default; +$carousel-control-opacity: .5 !default; +$carousel-control-hover-opacity: .9 !default; +$carousel-control-transition: opacity .15s ease !default; + +$carousel-indicator-width: 30px !default; +$carousel-indicator-height: 3px !default; +$carousel-indicator-hit-area-height: 10px !default; +$carousel-indicator-spacer: 3px !default; +$carousel-indicator-opacity: .5 !default; +$carousel-indicator-active-bg: $white !default; +$carousel-indicator-active-opacity: 1 !default; +$carousel-indicator-transition: opacity .6s ease !default; + +$carousel-caption-width: 70% !default; +$carousel-caption-color: $white !default; +$carousel-caption-padding-y: 1.25rem !default; +$carousel-caption-spacer: 1.25rem !default; + +$carousel-control-icon-width: 2rem !default; + +$carousel-control-prev-icon-bg: url("data:image/svg+xml,") !default; +$carousel-control-next-icon-bg: url("data:image/svg+xml,") !default; + +$carousel-transition-duration: .6s !default; +$carousel-transition: transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`) + +$carousel-dark-indicator-active-bg: $black !default; +$carousel-dark-caption-color: $black !default; +$carousel-dark-control-icon-filter: invert(1) grayscale(100) !default; + + +// Spinners + +$spinner-width: 2rem !default; +$spinner-height: $spinner-width !default; +$spinner-border-width: .25em !default; +$spinner-animation-speed: .75s !default; + +$spinner-width-sm: 1rem !default; +$spinner-height-sm: $spinner-width-sm !default; +$spinner-border-width-sm: .2em !default; + + +// Close + +$btn-close-width: 1em !default; +$btn-close-height: $btn-close-width !default; +$btn-close-padding-x: .25em !default; +$btn-close-padding-y: $btn-close-padding-x !default; +$btn-close-color: $dark !default; +$btn-close-bg: url("data:image/svg+xml,") !default; +$btn-close-focus-shadow: $input-btn-focus-box-shadow !default; +$btn-close-opacity: .5 !default; +$btn-close-hover-opacity: .75 !default; +$btn-close-focus-opacity: 1 !default; +$btn-close-disabled-opacity: .25 !default; +$btn-close-white-filter: invert(1) grayscale(100%) brightness(200%) !default; + +// Code + +$code-font-size: $small-font-size !default; +$code-color: $pink !default; + +$kbd-padding-y: .2rem !default; +$kbd-padding-x: .4rem !default; +$kbd-font-size: $code-font-size !default; +$kbd-color: $white !default; +$kbd-bg: $gray-900 !default; +$pre-color: null !default; + +// Tilt Animation + +$tilt-transform-style: preserve-3d !default; +$tilt-transform-up-transform: translateZ(50px) scale(0.7) !default; +$tilt-transform-up-transition: all 0.5s !default; + +// Variables for Core + +@import "variables/animations"; +@import "variables/avatars"; +@import "variables/cards"; +@import "variables/dark-version"; +@import "variables/dropdowns"; +@import 'variables/header'; +@import 'variables/info-areas'; +@import 'variables/navbar'; +@import 'variables/navbar-vertical'; +@import 'variables/utilities'; +@import 'variables/utilities-extend'; +@import 'variables/misc'; +@import 'variables/misc-extend'; +@import 'variables/form-switch'; +@import 'variables/fixed-plugin'; +@import 'variables/pagination'; +@import 'variables/badge'; +@import 'variables/rtl'; +@import 'variables/cards-extend'; +@import 'variables/choices'; +@import 'variables/timeline'; +@import 'variables/full-calendar'; +@import 'variables/social-buttons'; +@import 'variables/virtual-reality'; + +// Variables for Bootstrap Dark version +@import 'bootstrap/variables-dark'; + + + +// Import Utilities +@import "utilities"; diff --git a/assets/scss/astro-ecommerce/bootstrap/_accordion.scss b/assets/scss/astro-ecommerce/bootstrap/_accordion.scss new file mode 100644 index 0000000..75588a5 --- /dev/null +++ b/assets/scss/astro-ecommerce/bootstrap/_accordion.scss @@ -0,0 +1,158 @@ +// +// Base styles +// + +.accordion { + // scss-docs-start accordion-css-vars + --#{$prefix}accordion-color: #{$accordion-color}; + --#{$prefix}accordion-bg: #{$accordion-bg}; + --#{$prefix}accordion-transition: #{$accordion-transition}; + --#{$prefix}accordion-border-color: #{$accordion-border-color}; + --#{$prefix}accordion-border-width: #{$accordion-border-width}; + --#{$prefix}accordion-border-radius: #{$accordion-border-radius}; + --#{$prefix}accordion-inner-border-radius: #{$accordion-inner-border-radius}; + --#{$prefix}accordion-btn-padding-x: #{$accordion-button-padding-x}; + --#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y}; + --#{$prefix}accordion-btn-color: #{$accordion-button-color}; + --#{$prefix}accordion-btn-bg: #{$accordion-button-bg}; + --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)}; + --#{$prefix}accordion-btn-icon-width: #{$accordion-icon-width}; + --#{$prefix}accordion-btn-icon-transform: #{$accordion-icon-transform}; + --#{$prefix}accordion-btn-icon-transition: #{$accordion-icon-transition}; + --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)}; + --#{$prefix}accordion-btn-focus-border-color: #{$accordion-button-focus-border-color}; + --#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow}; + --#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x}; + --#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y}; + --#{$prefix}accordion-active-color: #{$accordion-button-active-color}; + --#{$prefix}accordion-active-bg: #{$accordion-button-active-bg}; + // scss-docs-end accordion-css-vars +} + +.accordion-button { + position: relative; + display: flex; + align-items: center; + width: 100%; + padding: var(--#{$prefix}accordion-btn-padding-y) var(--#{$prefix}accordion-btn-padding-x); + @include font-size($font-size-base); + color: var(--#{$prefix}accordion-btn-color); + text-align: left; // Reset button style + background-color: var(--#{$prefix}accordion-btn-bg); + border: 0; + @include border-radius(0); + overflow-anchor: none; + @include transition(var(--#{$prefix}accordion-transition)); + + &:not(.collapsed) { + color: var(--#{$prefix}accordion-active-color); + background-color: var(--#{$prefix}accordion-active-bg); + box-shadow: inset 0 calc(-1 * var(--#{$prefix}accordion-border-width)) 0 var(--#{$prefix}accordion-border-color); // stylelint-disable-line function-disallowed-list + + &::after { + background-image: var(--#{$prefix}accordion-btn-active-icon); + transform: var(--#{$prefix}accordion-btn-icon-transform); + } + } + + // Accordion icon + &::after { + flex-shrink: 0; + width: var(--#{$prefix}accordion-btn-icon-width); + height: var(--#{$prefix}accordion-btn-icon-width); + margin-left: auto; + content: ""; + background-image: var(--#{$prefix}accordion-btn-icon); + background-repeat: no-repeat; + background-size: var(--#{$prefix}accordion-btn-icon-width); + @include transition(var(--#{$prefix}accordion-btn-icon-transition)); + } + + &:hover { + z-index: 2; + } + + &:focus { + z-index: 3; + border-color: var(--#{$prefix}accordion-btn-focus-border-color); + outline: 0; + box-shadow: var(--#{$prefix}accordion-btn-focus-box-shadow); + } +} + +.accordion-header { + margin-bottom: 0; +} + +.accordion-item { + color: var(--#{$prefix}accordion-color); + background-color: var(--#{$prefix}accordion-bg); + border: var(--#{$prefix}accordion-border-width) solid var(--#{$prefix}accordion-border-color); + + &:first-of-type { + @include border-top-radius(var(--#{$prefix}accordion-border-radius)); + + .accordion-button { + @include border-top-radius(var(--#{$prefix}accordion-inner-border-radius)); + } + } + + &:not(:first-of-type) { + border-top: 0; + } + + // Only set a border-radius on the last item if the accordion is collapsed + &:last-of-type { + @include border-bottom-radius(var(--#{$prefix}accordion-border-radius)); + + .accordion-button { + &.collapsed { + @include border-bottom-radius(var(--#{$prefix}accordion-inner-border-radius)); + } + } + + .accordion-collapse { + @include border-bottom-radius(var(--#{$prefix}accordion-border-radius)); + } + } +} + +.accordion-body { + padding: var(--#{$prefix}accordion-body-padding-y) var(--#{$prefix}accordion-body-padding-x); +} + + +// Flush accordion items +// +// Remove borders and border-radius to keep accordion items edge-to-edge. + +.accordion-flush { + .accordion-collapse { + border-width: 0; + } + + .accordion-item { + border-right: 0; + border-left: 0; + @include border-radius(0); + + &:first-child { border-top: 0; } + &:last-child { border-bottom: 0; } + + .accordion-button { + &, + &.collapsed { + @include border-radius(0); + } + } + } +} + +@if $enable-dark-mode { + @include color-mode(dark) { + .accordion-button::after { + --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)}; + --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-dark)}; + } + } +} diff --git a/assets/scss/astro-ecommerce/bootstrap/_alert.scss b/assets/scss/astro-ecommerce/bootstrap/_alert.scss new file mode 100644 index 0000000..b8cff9b --- /dev/null +++ b/assets/scss/astro-ecommerce/bootstrap/_alert.scss @@ -0,0 +1,68 @@ +// +// Base styles +// + +.alert { + // scss-docs-start alert-css-vars + --#{$prefix}alert-bg: transparent; + --#{$prefix}alert-padding-x: #{$alert-padding-x}; + --#{$prefix}alert-padding-y: #{$alert-padding-y}; + --#{$prefix}alert-margin-bottom: #{$alert-margin-bottom}; + --#{$prefix}alert-color: inherit; + --#{$prefix}alert-border-color: transparent; + --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color); + --#{$prefix}alert-border-radius: #{$alert-border-radius}; + --#{$prefix}alert-link-color: inherit; + // scss-docs-end alert-css-vars + + position: relative; + padding: var(--#{$prefix}alert-padding-y) var(--#{$prefix}alert-padding-x); + margin-bottom: var(--#{$prefix}alert-margin-bottom); + color: var(--#{$prefix}alert-color); + background-color: var(--#{$prefix}alert-bg); + border: var(--#{$prefix}alert-border); + @include border-radius(var(--#{$prefix}alert-border-radius)); +} + +// Headings for larger alerts +.alert-heading { + // Specified to prevent conflicts of changing $headings-color + color: inherit; +} + +// Provide class for links that match alerts +.alert-link { + font-weight: $alert-link-font-weight; + color: var(--#{$prefix}alert-link-color); +} + + +// Dismissible alerts +// +// Expand the right padding and account for the close button's positioning. + +.alert-dismissible { + padding-right: $alert-dismissible-padding-r; + + // Adjust close link position + .btn-close { + position: absolute; + top: 0; + right: 0; + z-index: $stretched-link-z-index + 1; + padding: $alert-padding-y * 1.25 $alert-padding-x; + } +} + + +// scss-docs-start alert-modifiers +// Generate contextual modifier classes for colorizing the alert +@each $state in map-keys($theme-colors) { + .alert-#{$state} { + --#{$prefix}alert-color: var(--#{$prefix}#{$state}-text-emphasis); + --#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle); + --#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle); + --#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text-emphasis); + } +} +// scss-docs-end alert-modifiers diff --git a/assets/scss/astro-ecommerce/bootstrap/_badge.scss b/assets/scss/astro-ecommerce/bootstrap/_badge.scss new file mode 100644 index 0000000..cc3d269 --- /dev/null +++ b/assets/scss/astro-ecommerce/bootstrap/_badge.scss @@ -0,0 +1,38 @@ +// Base class +// +// Requires one of the contextual, color modifier classes for `color` and +// `background-color`. + +.badge { + // scss-docs-start badge-css-vars + --#{$prefix}badge-padding-x: #{$badge-padding-x}; + --#{$prefix}badge-padding-y: #{$badge-padding-y}; + @include rfs($badge-font-size, --#{$prefix}badge-font-size); + --#{$prefix}badge-font-weight: #{$badge-font-weight}; + --#{$prefix}badge-color: #{$badge-color}; + --#{$prefix}badge-border-radius: #{$badge-border-radius}; + // scss-docs-end badge-css-vars + + display: inline-block; + padding: var(--#{$prefix}badge-padding-y) var(--#{$prefix}badge-padding-x); + @include font-size(var(--#{$prefix}badge-font-size)); + font-weight: var(--#{$prefix}badge-font-weight); + line-height: 1; + color: var(--#{$prefix}badge-color); + text-align: center; + white-space: nowrap; + vertical-align: baseline; + @include border-radius(var(--#{$prefix}badge-border-radius)); + @include gradient-bg(); + + // Empty badges collapse automatically + &:empty { + display: none; + } +} + +// Quick fix for badges in buttons +.btn .badge { + position: relative; + top: -1px; +} diff --git a/assets/scss/astro-ecommerce/bootstrap/_breadcrumb.scss b/assets/scss/astro-ecommerce/bootstrap/_breadcrumb.scss new file mode 100644 index 0000000..b8252ff --- /dev/null +++ b/assets/scss/astro-ecommerce/bootstrap/_breadcrumb.scss @@ -0,0 +1,40 @@ +.breadcrumb { + // scss-docs-start breadcrumb-css-vars + --#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x}; + --#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y}; + --#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom}; + @include rfs($breadcrumb-font-size, --#{$prefix}breadcrumb-font-size); + --#{$prefix}breadcrumb-bg: #{$breadcrumb-bg}; + --#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius}; + --#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color}; + --#{$prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x}; + --#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color}; + // scss-docs-end breadcrumb-css-vars + + display: flex; + flex-wrap: wrap; + padding: var(--#{$prefix}breadcrumb-padding-y) var(--#{$prefix}breadcrumb-padding-x); + margin-bottom: var(--#{$prefix}breadcrumb-margin-bottom); + @include font-size(var(--#{$prefix}breadcrumb-font-size)); + list-style: none; + background-color: var(--#{$prefix}breadcrumb-bg); + @include border-radius(var(--#{$prefix}breadcrumb-border-radius)); +} + +.breadcrumb-item { + // The separator between breadcrumbs (by default, a forward-slash: "/") + + .breadcrumb-item { + padding-left: var(--#{$prefix}breadcrumb-item-padding-x); + + &::before { + float: left; // Suppress inline spacings and underlining of the separator + padding-right: var(--#{$prefix}breadcrumb-item-padding-x); + color: var(--#{$prefix}breadcrumb-divider-color); + content: var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"}; + } + } + + &.active { + color: var(--#{$prefix}breadcrumb-item-active-color); + } +} diff --git a/assets/scss/astro-ecommerce/bootstrap/_button-group.scss b/assets/scss/astro-ecommerce/bootstrap/_button-group.scss new file mode 100644 index 0000000..55ae3f6 --- /dev/null +++ b/assets/scss/astro-ecommerce/bootstrap/_button-group.scss @@ -0,0 +1,142 @@ +// Make the div behave like a button +.btn-group, +.btn-group-vertical { + position: relative; + display: inline-flex; + vertical-align: middle; // match .btn alignment given font-size hack above + + > .btn { + position: relative; + flex: 1 1 auto; + } + + // Bring the hover, focused, and "active" buttons to the front to overlay + // the borders properly + > .btn-check:checked + .btn, + > .btn-check:focus + .btn, + > .btn:hover, + > .btn:focus, + > .btn:active, + > .btn.active { + z-index: 1; + } +} + +// Optional: Group multiple button groups together for a toolbar +.btn-toolbar { + display: flex; + flex-wrap: wrap; + justify-content: flex-start; + + .input-group { + width: auto; + } +} + +.btn-group { + @include border-radius($btn-border-radius); + + // Prevent double borders when buttons are next to each other + > :not(.btn-check:first-child) + .btn, + > .btn-group:not(:first-child) { + margin-left: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list + } + + // Reset rounded corners + > .btn:not(:last-child):not(.dropdown-toggle), + > .btn.dropdown-toggle-split:first-child, + > .btn-group:not(:last-child) > .btn { + @include border-end-radius(0); + } + + // The left radius should be 0 if the button is: + // - the "third or more" child + // - the second child and the previous element isn't `.btn-check` (making it the first child visually) + // - part of a btn-group which isn't the first child + > .btn:nth-child(n + 3), + > :not(.btn-check) + .btn, + > .btn-group:not(:first-child) > .btn { + @include border-start-radius(0); + } +} + +// Sizing +// +// Remix the default button sizing classes into new ones for easier manipulation. + +.btn-group-sm > .btn { @extend .btn-sm; } +.btn-group-lg > .btn { @extend .btn-lg; } + + +// +// Split button dropdowns +// + +.dropdown-toggle-split { + padding-right: $btn-padding-x * .75; + padding-left: $btn-padding-x * .75; + + &::after, + .dropup &::after, + .dropend &::after { + margin-left: 0; + } + + .dropstart &::before { + margin-right: 0; + } +} + +.btn-sm + .dropdown-toggle-split { + padding-right: $btn-padding-x-sm * .75; + padding-left: $btn-padding-x-sm * .75; +} + +.btn-lg + .dropdown-toggle-split { + padding-right: $btn-padding-x-lg * .75; + padding-left: $btn-padding-x-lg * .75; +} + + +// The clickable button for toggling the menu +// Set the same inset shadow as the :active state +.btn-group.show .dropdown-toggle { + @include box-shadow($btn-active-box-shadow); + + // Show no shadow for `.btn-link` since it has no other button styles. + &.btn-link { + @include box-shadow(none); + } +} + + +// +// Vertical button groups +// + +.btn-group-vertical { + flex-direction: column; + align-items: flex-start; + justify-content: center; + + > .btn, + > .btn-group { + width: 100%; + } + + > .btn:not(:first-child), + > .btn-group:not(:first-child) { + margin-top: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list + } + + // Reset rounded corners + > .btn:not(:last-child):not(.dropdown-toggle), + > .btn-group:not(:last-child) > .btn { + @include border-bottom-radius(0); + } + + > .btn ~ .btn, + > .btn-group:not(:first-child) > .btn { + @include border-top-radius(0); + } +} diff --git a/assets/scss/astro-ecommerce/bootstrap/_buttons.scss b/assets/scss/astro-ecommerce/bootstrap/_buttons.scss new file mode 100644 index 0000000..cbc0784 --- /dev/null +++ b/assets/scss/astro-ecommerce/bootstrap/_buttons.scss @@ -0,0 +1,207 @@ +// +// Base styles +// + +.btn { + // scss-docs-start btn-css-vars + --#{$prefix}btn-padding-x: #{$btn-padding-x}; + --#{$prefix}btn-padding-y: #{$btn-padding-y}; + --#{$prefix}btn-font-family: #{$btn-font-family}; + @include rfs($btn-font-size, --#{$prefix}btn-font-size); + --#{$prefix}btn-font-weight: #{$btn-font-weight}; + --#{$prefix}btn-line-height: #{$btn-line-height}; + --#{$prefix}btn-color: #{$btn-color}; + --#{$prefix}btn-bg: transparent; + --#{$prefix}btn-border-width: #{$btn-border-width}; + --#{$prefix}btn-border-color: transparent; + --#{$prefix}btn-border-radius: #{$btn-border-radius}; + --#{$prefix}btn-hover-border-color: transparent; + --#{$prefix}btn-box-shadow: #{$btn-box-shadow}; + --#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity}; + --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5); + // scss-docs-end btn-css-vars + + display: inline-block; + padding: var(--#{$prefix}btn-padding-y) var(--#{$prefix}btn-padding-x); + font-family: var(--#{$prefix}btn-font-family); + @include font-size(var(--#{$prefix}btn-font-size)); + font-weight: var(--#{$prefix}btn-font-weight); + line-height: var(--#{$prefix}btn-line-height); + color: var(--#{$prefix}btn-color); + text-align: center; + text-decoration: if($link-decoration == none, null, none); + white-space: $btn-white-space; + vertical-align: middle; + cursor: if($enable-button-pointers, pointer, null); + user-select: none; + border: var(--#{$prefix}btn-border-width) solid var(--#{$prefix}btn-border-color); + @include border-radius(var(--#{$prefix}btn-border-radius)); + @include gradient-bg(var(--#{$prefix}btn-bg)); + @include box-shadow(var(--#{$prefix}btn-box-shadow)); + @include transition($btn-transition); + + &:hover { + color: var(--#{$prefix}btn-hover-color); + text-decoration: if($link-hover-decoration == underline, none, null); + background-color: var(--#{$prefix}btn-hover-bg); + border-color: var(--#{$prefix}btn-hover-border-color); + } + + .btn-check + &:hover { + // override for the checkbox/radio buttons + color: var(--#{$prefix}btn-color); + background-color: var(--#{$prefix}btn-bg); + border-color: var(--#{$prefix}btn-border-color); + } + + &:focus-visible { + color: var(--#{$prefix}btn-hover-color); + @include gradient-bg(var(--#{$prefix}btn-hover-bg)); + border-color: var(--#{$prefix}btn-hover-border-color); + outline: 0; + // Avoid using mixin so we can pass custom focus shadow properly + @if $enable-shadows { + box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow); + } @else { + box-shadow: var(--#{$prefix}btn-focus-box-shadow); + } + } + + .btn-check:focus-visible + & { + border-color: var(--#{$prefix}btn-hover-border-color); + outline: 0; + // Avoid using mixin so we can pass custom focus shadow properly + @if $enable-shadows { + box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow); + } @else { + box-shadow: var(--#{$prefix}btn-focus-box-shadow); + } + } + + .btn-check:checked + &, + :not(.btn-check) + &:active, + &:first-child:active, + &.active, + &.show { + color: var(--#{$prefix}btn-active-color); + background-color: var(--#{$prefix}btn-active-bg); + // Remove CSS gradients if they're enabled + background-image: if($enable-gradients, none, null); + border-color: var(--#{$prefix}btn-active-border-color); + @include box-shadow(var(--#{$prefix}btn-active-shadow)); + + &:focus-visible { + // Avoid using mixin so we can pass custom focus shadow properly + @if $enable-shadows { + box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow); + } @else { + box-shadow: var(--#{$prefix}btn-focus-box-shadow); + } + } + } + + &:disabled, + &.disabled, + fieldset:disabled & { + color: var(--#{$prefix}btn-disabled-color); + pointer-events: none; + background-color: var(--#{$prefix}btn-disabled-bg); + background-image: if($enable-gradients, none, null); + border-color: var(--#{$prefix}btn-disabled-border-color); + opacity: var(--#{$prefix}btn-disabled-opacity); + @include box-shadow(none); + } +} + + +// +// Alternate buttons +// + +// scss-docs-start btn-variant-loops +@each $color, $value in $theme-colors { + .btn-#{$color} { + @if $color == "light" { + @include button-variant( + $value, + $value, + $hover-background: shade-color($value, $btn-hover-bg-shade-amount), + $hover-border: shade-color($value, $btn-hover-border-shade-amount), + $active-background: shade-color($value, $btn-active-bg-shade-amount), + $active-border: shade-color($value, $btn-active-border-shade-amount) + ); + } @else if $color == "dark" { + @include button-variant( + $value, + $value, + $hover-background: tint-color($value, $btn-hover-bg-tint-amount), + $hover-border: tint-color($value, $btn-hover-border-tint-amount), + $active-background: tint-color($value, $btn-active-bg-tint-amount), + $active-border: tint-color($value, $btn-active-border-tint-amount) + ); + } @else { + @include button-variant($value, $value); + } + } +} + +@each $color, $value in $theme-colors { + .btn-outline-#{$color} { + @include button-outline-variant($value); + } +} +// scss-docs-end btn-variant-loops + + +// +// Link buttons +// + +// Make a button look and behave like a link +.btn-link { + --#{$prefix}btn-font-weight: #{$font-weight-normal}; + --#{$prefix}btn-color: #{$btn-link-color}; + --#{$prefix}btn-bg: transparent; + --#{$prefix}btn-border-color: transparent; + --#{$prefix}btn-hover-color: #{$btn-link-hover-color}; + --#{$prefix}btn-hover-border-color: transparent; + --#{$prefix}btn-active-color: #{$btn-link-hover-color}; + --#{$prefix}btn-active-border-color: transparent; + --#{$prefix}btn-disabled-color: #{$btn-link-disabled-color}; + --#{$prefix}btn-disabled-border-color: transparent; + --#{$prefix}btn-box-shadow: 0 0 0 #000; // Can't use `none` as keyword negates all values when used with multiple shadows + --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix(color-contrast($link-color), $link-color, 15%))}; + + text-decoration: $link-decoration; + @if $enable-gradients { + background-image: none; + } + + &:hover, + &:focus-visible { + text-decoration: $link-hover-decoration; + } + + &:focus-visible { + color: var(--#{$prefix}btn-color); + } + + &:hover { + color: var(--#{$prefix}btn-hover-color); + } + + // No need for an active state here +} + + +// +// Button Sizes +// + +.btn-lg { + @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg); +} + +.btn-sm { + @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm); +} diff --git a/assets/scss/astro-ecommerce/bootstrap/_card.scss b/assets/scss/astro-ecommerce/bootstrap/_card.scss new file mode 100644 index 0000000..d3535a9 --- /dev/null +++ b/assets/scss/astro-ecommerce/bootstrap/_card.scss @@ -0,0 +1,239 @@ +// +// Base styles +// + +.card { + // scss-docs-start card-css-vars + --#{$prefix}card-spacer-y: #{$card-spacer-y}; + --#{$prefix}card-spacer-x: #{$card-spacer-x}; + --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y}; + --#{$prefix}card-title-color: #{$card-title-color}; + --#{$prefix}card-subtitle-color: #{$card-subtitle-color}; + --#{$prefix}card-border-width: #{$card-border-width}; + --#{$prefix}card-border-color: #{$card-border-color}; + --#{$prefix}card-border-radius: #{$card-border-radius}; + --#{$prefix}card-box-shadow: #{$card-box-shadow}; + --#{$prefix}card-inner-border-radius: #{$card-inner-border-radius}; + --#{$prefix}card-cap-padding-y: #{$card-cap-padding-y}; + --#{$prefix}card-cap-padding-x: #{$card-cap-padding-x}; + --#{$prefix}card-cap-bg: #{$card-cap-bg}; + --#{$prefix}card-cap-color: #{$card-cap-color}; + --#{$prefix}card-height: #{$card-height}; + --#{$prefix}card-color: #{$card-color}; + --#{$prefix}card-bg: #{$card-bg}; + --#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding}; + --#{$prefix}card-group-margin: #{$card-group-margin}; + // scss-docs-end card-css-vars + + position: relative; + display: flex; + flex-direction: column; + min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106 + height: var(--#{$prefix}card-height); + color: var(--#{$prefix}body-color); + word-wrap: break-word; + background-color: var(--#{$prefix}card-bg); + background-clip: border-box; + border: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color); + @include border-radius(var(--#{$prefix}card-border-radius)); + @include box-shadow(var(--#{$prefix}card-box-shadow)); + + > hr { + margin-right: 0; + margin-left: 0; + } + + > .list-group { + border-top: inherit; + border-bottom: inherit; + + &:first-child { + border-top-width: 0; + @include border-top-radius(var(--#{$prefix}card-inner-border-radius)); + } + + &:last-child { + border-bottom-width: 0; + @include border-bottom-radius(var(--#{$prefix}card-inner-border-radius)); + } + } + + // Due to specificity of the above selector (`.card > .list-group`), we must + // use a child selector here to prevent double borders. + > .card-header + .list-group, + > .list-group + .card-footer { + border-top: 0; + } +} + +.card-body { + // Enable `flex-grow: 1` for decks and groups so that card blocks take up + // as much space as possible, ensuring footers are aligned to the bottom. + flex: 1 1 auto; + padding: var(--#{$prefix}card-spacer-y) var(--#{$prefix}card-spacer-x); + color: var(--#{$prefix}card-color); +} + +.card-title { + margin-bottom: var(--#{$prefix}card-title-spacer-y); + color: var(--#{$prefix}card-title-color); +} + +.card-subtitle { + margin-top: calc(-.5 * var(--#{$prefix}card-title-spacer-y)); // stylelint-disable-line function-disallowed-list + margin-bottom: 0; + color: var(--#{$prefix}card-subtitle-color); +} + +.card-text:last-child { + margin-bottom: 0; +} + +.card-link { + &:hover { + text-decoration: if($link-hover-decoration == underline, none, null); + } + + + .card-link { + margin-left: var(--#{$prefix}card-spacer-x); + } +} + +// +// Optional textual caps +// + +.card-header { + padding: var(--#{$prefix}card-cap-padding-y) var(--#{$prefix}card-cap-padding-x); + margin-bottom: 0; // Removes the default margin-bottom of + color: var(--#{$prefix}card-cap-color); + background-color: var(--#{$prefix}card-cap-bg); + border-bottom: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color); + + &:first-child { + @include border-radius(var(--#{$prefix}card-inner-border-radius) var(--#{$prefix}card-inner-border-radius) 0 0); + } +} + +.card-footer { + padding: var(--#{$prefix}card-cap-padding-y) var(--#{$prefix}card-cap-padding-x); + color: var(--#{$prefix}card-cap-color); + background-color: var(--#{$prefix}card-cap-bg); + border-top: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color); + + &:last-child { + @include border-radius(0 0 var(--#{$prefix}card-inner-border-radius) var(--#{$prefix}card-inner-border-radius)); + } +} + + +// +// Header navs +// + +.card-header-tabs { + margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list + margin-bottom: calc(-1 * var(--#{$prefix}card-cap-padding-y)); // stylelint-disable-line function-disallowed-list + margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list + border-bottom: 0; + + .nav-link.active { + background-color: var(--#{$prefix}card-bg); + border-bottom-color: var(--#{$prefix}card-bg); + } +} + +.card-header-pills { + margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list + margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list +} + +// Card image +.card-img-overlay { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + padding: var(--#{$prefix}card-img-overlay-padding); + @include border-radius(var(--#{$prefix}card-inner-border-radius)); +} + +.card-img, +.card-img-top, +.card-img-bottom { + width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch +} + +.card-img, +.card-img-top { + @include border-top-radius(var(--#{$prefix}card-inner-border-radius)); +} + +.card-img, +.card-img-bottom { + @include border-bottom-radius(var(--#{$prefix}card-inner-border-radius)); +} + + +// +// Card groups +// + +.card-group { + // The child selector allows nested `.card` within `.card-group` + // to display properly. + > .card { + margin-bottom: var(--#{$prefix}card-group-margin); + } + + @include media-breakpoint-up(sm) { + display: flex; + flex-flow: row wrap; + // The child selector allows nested `.card` within `.card-group` + // to display properly. + > .card { + // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4 + flex: 1 0 0%; + margin-bottom: 0; + + + .card { + margin-left: 0; + border-left: 0; + } + + // Handle rounded corners + @if $enable-rounded { + &:not(:last-child) { + @include border-end-radius(0); + + .card-img-top, + .card-header { + // stylelint-disable-next-line property-disallowed-list + border-top-right-radius: 0; + } + .card-img-bottom, + .card-footer { + // stylelint-disable-next-line property-disallowed-list + border-bottom-right-radius: 0; + } + } + + &:not(:first-child) { + @include border-start-radius(0); + + .card-img-top, + .card-header { + // stylelint-disable-next-line property-disallowed-list + border-top-left-radius: 0; + } + .card-img-bottom, + .card-footer { + // stylelint-disable-next-line property-disallowed-list + border-bottom-left-radius: 0; + } + } + } + } + } +} diff --git a/assets/scss/astro-ecommerce/bootstrap/_carousel.scss b/assets/scss/astro-ecommerce/bootstrap/_carousel.scss new file mode 100644 index 0000000..0ac8f87 --- /dev/null +++ b/assets/scss/astro-ecommerce/bootstrap/_carousel.scss @@ -0,0 +1,244 @@ +// Notes on the classes: +// +// 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically) +// even when their scroll action started on a carousel, but for compatibility (with Firefox) +// we're preventing all actions instead +// 2. The .carousel-item-start and .carousel-item-end is used to indicate where +// the active slide is heading. +// 3. .active.carousel-item is the current slide. +// 4. .active.carousel-item-start and .active.carousel-item-end is the current +// slide in its in-transition state. Only one of these occurs at a time. +// 5. .carousel-item-next.carousel-item-start and .carousel-item-prev.carousel-item-end +// is the upcoming slide in transition. + +.carousel { + position: relative; +} + +.carousel.pointer-event { + touch-action: pan-y; +} + +.carousel-inner { + position: relative; + width: 100%; + overflow: hidden; + @include clearfix(); +} + +.carousel-item { + position: relative; + display: none; + float: left; + width: 100%; + margin-right: -100%; + backface-visibility: hidden; + @include transition($carousel-transition); +} + +.carousel-item.active, +.carousel-item-next, +.carousel-item-prev { + display: block; +} + +.carousel-item-next:not(.carousel-item-start), +.active.carousel-item-end { + transform: translateX(100%); +} + +.carousel-item-prev:not(.carousel-item-end), +.active.carousel-item-start { + transform: translateX(-100%); +} + + +// +// Alternate transitions +// + +.carousel-fade { + .carousel-item { + opacity: 0; + transition-property: opacity; + transform: none; + } + + .carousel-item.active, + .carousel-item-next.carousel-item-start, + .carousel-item-prev.carousel-item-end { + z-index: 1; + opacity: 1; + } + + .active.carousel-item-start, + .active.carousel-item-end { + z-index: 0; + opacity: 0; + @include transition(opacity 0s $carousel-transition-duration); + } +} + + +// +// Left/right controls for nav +// + +.carousel-control-prev, +.carousel-control-next { + position: absolute; + top: 0; + bottom: 0; + z-index: 1; + // Use flex for alignment (1-3) + display: flex; // 1. allow flex styles + align-items: center; // 2. vertically center contents + justify-content: center; // 3. horizontally center contents + width: $carousel-control-width; + padding: 0; + color: $carousel-control-color; + text-align: center; + background: none; + border: 0; + opacity: $carousel-control-opacity; + @include transition($carousel-control-transition); + + // Hover/focus state + &:hover, + &:focus { + color: $carousel-control-color; + text-decoration: none; + outline: 0; + opacity: $carousel-control-hover-opacity; + } +} +.carousel-control-prev { + left: 0; + background-image: if($enable-gradients, linear-gradient(90deg, rgba($black, .25), rgba($black, .001)), null); +} +.carousel-control-next { + right: 0; + background-image: if($enable-gradients, linear-gradient(270deg, rgba($black, .25), rgba($black, .001)), null); +} + +// Icons for within +.carousel-control-prev-icon, +.carousel-control-next-icon { + display: inline-block; + width: $carousel-control-icon-width; + height: $carousel-control-icon-width; + background-repeat: no-repeat; + background-position: 50%; + background-size: 100% 100%; +} + +/* rtl:options: { + "autoRename": true, + "stringMap":[ { + "name" : "prev-next", + "search" : "prev", + "replace" : "next" + } ] +} */ +.carousel-control-prev-icon { + background-image: escape-svg($carousel-control-prev-icon-bg); +} +.carousel-control-next-icon { + background-image: escape-svg($carousel-control-next-icon-bg); +} + +// Optional indicator pips/controls +// +// Add a container (such as a list) with the following class and add an item (ideally a focusable control, +// like a button) with data-bs-target for each slide your carousel holds. + +.carousel-indicators { + position: absolute; + right: 0; + bottom: 0; + left: 0; + z-index: 2; + display: flex; + justify-content: center; + padding: 0; + // Use the .carousel-control's width as margin so we don't overlay those + margin-right: $carousel-control-width; + margin-bottom: 1rem; + margin-left: $carousel-control-width; + + [data-bs-target] { + box-sizing: content-box; + flex: 0 1 auto; + width: $carousel-indicator-width; + height: $carousel-indicator-height; + padding: 0; + margin-right: $carousel-indicator-spacer; + margin-left: $carousel-indicator-spacer; + text-indent: -999px; + cursor: pointer; + background-color: $carousel-indicator-active-bg; + background-clip: padding-box; + border: 0; + // Use transparent borders to increase the hit area by 10px on top and bottom. + border-top: $carousel-indicator-hit-area-height solid transparent; + border-bottom: $carousel-indicator-hit-area-height solid transparent; + opacity: $carousel-indicator-opacity; + @include transition($carousel-indicator-transition); + } + + .active { + opacity: $carousel-indicator-active-opacity; + } +} + + +// Optional captions +// +// + +.carousel-caption { + position: absolute; + right: (100% - $carousel-caption-width) * .5; + bottom: $carousel-caption-spacer; + left: (100% - $carousel-caption-width) * .5; + padding-top: $carousel-caption-padding-y; + padding-bottom: $carousel-caption-padding-y; + color: $carousel-caption-color; + text-align: center; +} + +// Dark mode carousel + +@mixin carousel-dark() { + .carousel-control-prev-icon, + .carousel-control-next-icon { + filter: $carousel-dark-control-icon-filter; + } + + .carousel-indicators [data-bs-target] { + background-color: $carousel-dark-indicator-active-bg; + } + + .carousel-caption { + color: $carousel-dark-caption-color; + } +} + +.carousel-dark { + @include carousel-dark(); +} + +@if $enable-dark-mode { + @include color-mode(dark) { + @if $color-mode-type == "media-query" { + .carousel { + @include carousel-dark(); + } + } @else { + .carousel, + &.carousel { + @include carousel-dark(); + } + } + } +} diff --git a/assets/scss/astro-ecommerce/bootstrap/_close.scss b/assets/scss/astro-ecommerce/bootstrap/_close.scss new file mode 100644 index 0000000..4d6e73c --- /dev/null +++ b/assets/scss/astro-ecommerce/bootstrap/_close.scss @@ -0,0 +1,63 @@ +// Transparent background and border properties included for button version. +// iOS requires the button element instead of an anchor tag. +// If you want the anchor version, it requires `href="#"`. +// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile + +.btn-close { + // scss-docs-start close-css-vars + --#{$prefix}btn-close-color: #{$btn-close-color}; + --#{$prefix}btn-close-bg: #{ escape-svg($btn-close-bg) }; + --#{$prefix}btn-close-opacity: #{$btn-close-opacity}; + --#{$prefix}btn-close-hover-opacity: #{$btn-close-hover-opacity}; + --#{$prefix}btn-close-focus-shadow: #{$btn-close-focus-shadow}; + --#{$prefix}btn-close-focus-opacity: #{$btn-close-focus-opacity}; + --#{$prefix}btn-close-disabled-opacity: #{$btn-close-disabled-opacity}; + --#{$prefix}btn-close-white-filter: #{$btn-close-white-filter}; + // scss-docs-end close-css-vars + + box-sizing: content-box; + width: $btn-close-width; + height: $btn-close-height; + padding: $btn-close-padding-y $btn-close-padding-x; + color: var(--#{$prefix}btn-close-color); + background: transparent var(--#{$prefix}btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements + border: 0; // for button elements + @include border-radius(); + opacity: var(--#{$prefix}btn-close-opacity); + + // Override 's hover style + &:hover { + color: var(--#{$prefix}btn-close-color); + text-decoration: none; + opacity: var(--#{$prefix}btn-close-hover-opacity); + } + + &:focus { + outline: 0; + box-shadow: var(--#{$prefix}btn-close-focus-shadow); + opacity: var(--#{$prefix}btn-close-focus-opacity); + } + + &:disabled, + &.disabled { + pointer-events: none; + user-select: none; + opacity: var(--#{$prefix}btn-close-disabled-opacity); + } +} + +@mixin btn-close-white() { + filter: var(--#{$prefix}btn-close-white-filter); +} + +.btn-close-white { + @include btn-close-white(); +} + +@if $enable-dark-mode { + @include color-mode(dark) { + .btn-close { + @include btn-close-white(); + } + } +} diff --git a/assets/scss/astro-ecommerce/bootstrap/_containers.scss b/assets/scss/astro-ecommerce/bootstrap/_containers.scss new file mode 100644 index 0000000..83b3138 --- /dev/null +++ b/assets/scss/astro-ecommerce/bootstrap/_containers.scss @@ -0,0 +1,41 @@ +// Container widths +// +// Set the container width, and override it for fixed navbars in media queries. + +@if $enable-container-classes { + // Single container class with breakpoint max-widths + .container, + // 100% wide container at all breakpoints + .container-fluid { + @include make-container(); + } + + // Responsive containers that are 100% wide until a breakpoint + @each $breakpoint, $container-max-width in $container-max-widths { + .container-#{$breakpoint} { + @extend .container-fluid; + } + + @include media-breakpoint-up($breakpoint, $grid-breakpoints) { + %responsive-container-#{$breakpoint} { + max-width: $container-max-width; + } + + // Extend each breakpoint which is smaller or equal to the current breakpoint + $extend-breakpoint: true; + + @each $name, $width in $grid-breakpoints { + @if ($extend-breakpoint) { + .container#{breakpoint-infix($name, $grid-breakpoints)} { + @extend %responsive-container-#{$breakpoint}; + } + + // Once the current breakpoint is reached, stop extending + @if ($breakpoint == $name) { + $extend-breakpoint: false; + } + } + } + } + } +} diff --git a/assets/scss/astro-ecommerce/bootstrap/_dropdown.scss b/assets/scss/astro-ecommerce/bootstrap/_dropdown.scss new file mode 100644 index 0000000..587ebb4 --- /dev/null +++ b/assets/scss/astro-ecommerce/bootstrap/_dropdown.scss @@ -0,0 +1,250 @@ +// The dropdown wrapper (`
`) +.dropup, +.dropend, +.dropdown, +.dropstart, +.dropup-center, +.dropdown-center { + position: relative; +} + +.dropdown-toggle { + white-space: nowrap; + + // Generate the caret automatically + @include caret(); +} + +// The dropdown menu +.dropdown-menu { + // scss-docs-start dropdown-css-vars + --#{$prefix}dropdown-zindex: #{$zindex-dropdown}; + --#{$prefix}dropdown-min-width: #{$dropdown-min-width}; + --#{$prefix}dropdown-padding-x: #{$dropdown-padding-x}; + --#{$prefix}dropdown-padding-y: #{$dropdown-padding-y}; + --#{$prefix}dropdown-spacer: #{$dropdown-spacer}; + @include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size); + --#{$prefix}dropdown-color: #{$dropdown-color}; + --#{$prefix}dropdown-bg: #{$dropdown-bg}; + --#{$prefix}dropdown-border-color: #{$dropdown-border-color}; + --#{$prefix}dropdown-border-radius: #{$dropdown-border-radius}; + --#{$prefix}dropdown-border-width: #{$dropdown-border-width}; + --#{$prefix}dropdown-inner-border-radius: #{$dropdown-inner-border-radius}; + --#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg}; + --#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y}; + --#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow}; + --#{$prefix}dropdown-link-color: #{$dropdown-link-color}; + --#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color}; + --#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg}; + --#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color}; + --#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg}; + --#{$prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color}; + --#{$prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x}; + --#{$prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y}; + --#{$prefix}dropdown-header-color: #{$dropdown-header-color}; + --#{$prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x}; + --#{$prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y}; + // scss-docs-end dropdown-css-vars + + position: absolute; + z-index: var(--#{$prefix}dropdown-zindex); + display: none; // none by default, but block on "open" of the menu + min-width: var(--#{$prefix}dropdown-min-width); + padding: var(--#{$prefix}dropdown-padding-y) var(--#{$prefix}dropdown-padding-x); + margin: 0; // Override default margin of ul + @include font-size(var(--#{$prefix}dropdown-font-size)); + color: var(--#{$prefix}dropdown-color); + text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer) + list-style: none; + background-color: var(--#{$prefix}dropdown-bg); + background-clip: padding-box; + border: var(--#{$prefix}dropdown-border-width) solid var(--#{$prefix}dropdown-border-color); + @include border-radius(var(--#{$prefix}dropdown-border-radius)); + @include box-shadow(var(--#{$prefix}dropdown-box-shadow)); + + &[data-bs-popper] { + top: 100%; + left: 0; + margin-top: var(--#{$prefix}dropdown-spacer); + } + + @if $dropdown-padding-y == 0 { + > .dropdown-item:first-child, + > li:first-child .dropdown-item { + @include border-top-radius(var(--#{$prefix}dropdown-inner-border-radius)); + } + > .dropdown-item:last-child, + > li:last-child .dropdown-item { + @include border-bottom-radius(var(--#{$prefix}dropdown-inner-border-radius)); + } + + } +} + +// scss-docs-start responsive-breakpoints +// We deliberately hardcode the `bs-` prefix because we check +// this custom property in JS to determine Popper's positioning + +@each $breakpoint in map-keys($grid-breakpoints) { + @include media-breakpoint-up($breakpoint) { + $infix: breakpoint-infix($breakpoint, $grid-breakpoints); + + .dropdown-menu#{$infix}-start { + --bs-position: start; + + &[data-bs-popper] { + right: auto; + left: 0; + } + } + + .dropdown-menu#{$infix}-end { + --bs-position: end; + + &[data-bs-popper] { + right: 0; + left: auto; + } + } + } +} +// scss-docs-end responsive-breakpoints + +// Allow for dropdowns to go bottom up (aka, dropup-menu) +// Just add .dropup after the standard .dropdown class and you're set. +.dropup { + .dropdown-menu[data-bs-popper] { + top: auto; + bottom: 100%; + margin-top: 0; + margin-bottom: var(--#{$prefix}dropdown-spacer); + } + + .dropdown-toggle { + @include caret(up); + } +} + +.dropend { + .dropdown-menu[data-bs-popper] { + top: 0; + right: auto; + left: 100%; + margin-top: 0; + margin-left: var(--#{$prefix}dropdown-spacer); + } + + .dropdown-toggle { + @include caret(end); + &::after { + vertical-align: 0; + } + } +} + +.dropstart { + .dropdown-menu[data-bs-popper] { + top: 0; + right: 100%; + left: auto; + margin-top: 0; + margin-right: var(--#{$prefix}dropdown-spacer); + } + + .dropdown-toggle { + @include caret(start); + &::before { + vertical-align: 0; + } + } +} + + +// Dividers (basically an `
`) within the dropdown +.dropdown-divider { + height: 0; + margin: var(--#{$prefix}dropdown-divider-margin-y) 0; + overflow: hidden; + border-top: 1px solid var(--#{$prefix}dropdown-divider-bg); + opacity: 1; // Revisit in v6 to de-dupe styles that conflict with
element +} + +// Links, buttons, and more within the dropdown menu +// +// ` + +

Tax included. Shipping calculated at checkout.

+
+ +

+ + + + Secured Payment with: +

+
+ + + + + + + + + + + + + + + +
+ + + + + ); +}; diff --git a/src/components/cart/shoppingCart2.tsx b/src/components/cart/shoppingCart2.tsx new file mode 100644 index 0000000..0fcf74f --- /dev/null +++ b/src/components/cart/shoppingCart2.tsx @@ -0,0 +1,68 @@ +import ProductCartItem2 from './productCartItem2'; +import OrderSummary from './orderSummary'; + +interface Props { + products: ({ + thumb_src: string; + thumb_alt: string; + color: string; + title: string; + price: number; + size: string; + stock: boolean + subtotal: number; + shipping: number; + tax: number; + })[]; +} + +export default function ShoppingCart({ + products +}: Props) { + let subtotal = 0; + products.map(product => + subtotal += product.price + ) + + return ( + <> +
+

Shopping Cart

+
You are eligible for Free Shipping.
+
+
+ {products.map((product, i) => + <> + {i != 0 && +
+ } + + + )} +
+
+
+
+ +
+
+
+ + +
+
+
+
+ + ); +}; diff --git a/src/components/checkout/billingInfo.tsx b/src/components/checkout/billingInfo.tsx new file mode 100644 index 0000000..19bddae --- /dev/null +++ b/src/components/checkout/billingInfo.tsx @@ -0,0 +1,17 @@ +interface Props { + title: string; +} + +export default function OrderSummary({ + +}: Props) { + + return ( + <> +
+ + +
+ + ); +} \ No newline at end of file diff --git a/src/components/checkout/checkoutMultiStep.tsx b/src/components/checkout/checkoutMultiStep.tsx new file mode 100644 index 0000000..ee432e9 --- /dev/null +++ b/src/components/checkout/checkoutMultiStep.tsx @@ -0,0 +1,80 @@ +import PaymentDetails from './paymentDetails'; +import ShippingInfo from './shippingInfo'; +import OrderSummary from '../cart/orderSummary'; +import CheckoutSingleItemDark from '../checkout/checkoutSingleItemDark'; +import ReviewRating from '../reviews/reviewRating'; + +interface Props { + products: ({ + thumb_src: string; + thumb_alt: string; + color: string; + title: string; + price: number; + size: string; + stock: string; + subtotal: number; + shipping: number; + tax: number; + })[]; +} + +export default function CheckoutSummary({ + products, +}: Props) { + + let subtotalCheckout = 0; + products.map(product => + subtotalCheckout += product.price + ) + + return ( + <> +
+
+
+ +
+

or

+
+
Contact information
+
+ + +
+
+ + +
+ + + + + + + +
+
+ Amount +

${subtotalCheckout.toLocaleString()}

+ {products.map((product, i) => + + )} + +
+
+
+ + ); +}; + diff --git a/src/components/checkout/checkoutOrderSummary.tsx b/src/components/checkout/checkoutOrderSummary.tsx new file mode 100644 index 0000000..5ca7adc --- /dev/null +++ b/src/components/checkout/checkoutOrderSummary.tsx @@ -0,0 +1,83 @@ +import PaymentDetails from './paymentDetails'; +import ShippingInfo from './shippingInfo'; +import BillingInfo from './billingInfo'; +import OrderSummary from '../cart/orderSummary'; +import CheckoutSingleItem from '../checkout/checkoutSingleItem'; + +interface Props { + products: ({ + thumb_src: string; + thumb_alt: string; + color: string; + title: string; + price: number; + size: string; + stock: string; + subtotal: number; + shipping: number; + tax: number; + })[]; + textColor: string +} + +export default function CheckoutSummary({ + products, + textColor +}: Props) { + + let subtotalCheckout = 0; + products.map(product => + subtotalCheckout += product.price + ) + + return ( + <> +
+
+
+
Contact information
+
+ + +
+ +
Shipping address
+ + +
Payment details
+ + +
Billing information
+ + +
+ +
+
+

Amount

+

${subtotalCheckout.toLocaleString()}

+ {products.map((product, i) => + + )} + +
+
+
+ + ); +}; + diff --git a/src/components/checkout/checkoutSingleItem.tsx b/src/components/checkout/checkoutSingleItem.tsx new file mode 100644 index 0000000..f9d6037 --- /dev/null +++ b/src/components/checkout/checkoutSingleItem.tsx @@ -0,0 +1,36 @@ +interface Props { + thumb_src: string; + thumb_alt: string; + title: string; + color: string; + size: string; + price: number; +} + +export default function CheckoutSingleItem({ + thumb_src, + thumb_alt, + title, + color, + size, + price, + +}: Props) { + + return ( + <> +
+ {thumb_alt} +
+
{title}
+

{color}

+

{size}

+
+ +
+

${price.toLocaleString()}

+
+
+ + ); +} diff --git a/src/components/checkout/checkoutSingleItemDark.tsx b/src/components/checkout/checkoutSingleItemDark.tsx new file mode 100644 index 0000000..78d7b1b --- /dev/null +++ b/src/components/checkout/checkoutSingleItemDark.tsx @@ -0,0 +1,45 @@ +interface Props { + thumb_src: string; + thumb_alt: string; + title: string; + color: string; + size: string; + price: number; +} + +export default function CheckoutSingleItem({ + thumb_src, + thumb_alt, + title, + color, + size, + price, + +}: Props) { + + return ( + <> +
+
+
+ {thumb_alt} +
+
+
{title}
+
${price.toLocaleString()}
+

{color}

+

{size}

+
+
+
+ + + + +
+
+
+
+ + ); +} diff --git a/src/components/checkout/paymentDetails.tsx b/src/components/checkout/paymentDetails.tsx new file mode 100644 index 0000000..8f552d4 --- /dev/null +++ b/src/components/checkout/paymentDetails.tsx @@ -0,0 +1,24 @@ +export default function OrderSummary() { + return ( + <> +
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+ + ); +} \ No newline at end of file diff --git a/src/components/checkout/shippingInfo.tsx b/src/components/checkout/shippingInfo.tsx new file mode 100644 index 0000000..bfa0bdc --- /dev/null +++ b/src/components/checkout/shippingInfo.tsx @@ -0,0 +1,37 @@ +interface Props { + title: string; +} + +export default function OrderSummary({ + +}: Props) { + + return ( + <> +
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+ + ); +} \ No newline at end of file diff --git a/src/components/complexFooter.tsx b/src/components/complexFooter.tsx new file mode 100644 index 0000000..b573d36 --- /dev/null +++ b/src/components/complexFooter.tsx @@ -0,0 +1,32 @@ +import data from '../../public/data.json'; +import StoreDoubleColumn from '../components/store/storeDoubleColumn'; + +export default function ComplexFooter() { + return ( + <> +
+
+
+
Astro Ecommerce
+

The time is now for it to be okay to be great. People in this world shun people for being great. For being a bright color. For standing out.

+
+
+ +
+
+
+ Copyright © + +  Astro Ecommerce by   + Creative Tim. +
+
+
+
+ + ); +} + + diff --git a/src/components/complexNavbar.tsx b/src/components/complexNavbar.tsx new file mode 100644 index 0000000..1851795 --- /dev/null +++ b/src/components/complexNavbar.tsx @@ -0,0 +1,189 @@ +import data from '../../public/data.json'; +import CardCategory from './products/cardCategory'; + + +const ComplexNavbar = () => { + return ( + + ); +}; + +export default ComplexNavbar; diff --git a/src/components/complexNavbarDark.tsx b/src/components/complexNavbarDark.tsx new file mode 100644 index 0000000..f0aa08b --- /dev/null +++ b/src/components/complexNavbarDark.tsx @@ -0,0 +1,189 @@ +import data from '../../public/data.json'; +import CardCategory from './products/cardCategory'; + + +const ComplexNavbarDark = () => { + return ( + + ); +}; + +export default ComplexNavbarDark; diff --git a/src/components/dashboardContext.tsx b/src/components/dashboardContext.tsx new file mode 100644 index 0000000..c0ad14c --- /dev/null +++ b/src/components/dashboardContext.tsx @@ -0,0 +1,8 @@ +import React from 'react'; + +// this is the equivalent to the createStore method of Redux +// https://redux.js.org/api/createstore + +const DashboardContext = React.createContext({} as any); + +export default DashboardContext; diff --git a/src/components/footer.tsx b/src/components/footer.tsx new file mode 100644 index 0000000..36f324d --- /dev/null +++ b/src/components/footer.tsx @@ -0,0 +1,67 @@ +export default function Footer() { + return ( + <> + + + ); +} + + diff --git a/src/components/incentives/incentiveCols.tsx b/src/components/incentives/incentiveCols.tsx new file mode 100644 index 0000000..10cbb58 --- /dev/null +++ b/src/components/incentives/incentiveCols.tsx @@ -0,0 +1,64 @@ + +interface Props { + // order: string; +} + +export default function incentiveCols({ + order +}: Props) { + + return ( + <> +
+
+
+
+
+ + + + + + +
+
+
Express shipping
+

Need it fast? No worries!

+
+
+
+
+
+
+
+
+ + + +
+
+
Free exchanges
+

We’ll replace it for free

+
+
+
+
+
+
+
+
+ + + +
+
+
Extended warranty
+

We want you to feel safe

+
+
+
+
+
+ + ); +}; \ No newline at end of file diff --git a/src/components/incentives/incentiveLarge.tsx b/src/components/incentives/incentiveLarge.tsx new file mode 100644 index 0000000..868e279 --- /dev/null +++ b/src/components/incentives/incentiveLarge.tsx @@ -0,0 +1,56 @@ + +interface Props { + // order: string; +} + +export default function incentiveLarge({ + order +}: Props) { + + return ( + <> +
+

What we have to offer

+

Society has put up so many boundaries, so many limitations on what’s right and wrong that it’s almost impossible to get a pure thought out.

+
+
+
+
+ + + + + + +
+
Express shipping
+

The time is now for it to be okay to be great. People in this world shun people for being great.

+
+
+
+
+
+ + + +
+
Free exchanges
+

The time is now for it to be okay to be great. People in this world shun people for being great.

+
+
+
+
+
+ + + +
+
Extended warranty
+

The time is now for it to be okay to be great. People in this world shun people for being great.

+
+
+
+
+ + ); +}; \ No newline at end of file diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx new file mode 100644 index 0000000..aa2e65a --- /dev/null +++ b/src/components/navbar.tsx @@ -0,0 +1,52 @@ +const Navbar = () => { + return ( + + ); +}; + +export default Navbar; diff --git a/src/components/order/orderCardProduct.tsx b/src/components/order/orderCardProduct.tsx new file mode 100644 index 0000000..5d2329a --- /dev/null +++ b/src/components/order/orderCardProduct.tsx @@ -0,0 +1,209 @@ +interface Props { + product: ({ + id: string; + thumb_src: string; + thumb_alt: string; + title: string; + price: number; + description: string; + }); + quantity: number; + status: string; + address: string; + email: string; + phoneNumber: string; +} + +export default function OrderCardProduct({ + product, + status, + address, + email, + quantity, + phoneNumber +}: Props) { + + let widthClass = ""; + + switch (status) { + case "Order Placed": + widthClass = " w-5" + break; + case "Processed": + widthClass = " w-40" + break; + case "Shipped": + widthClass = " w-70" + break; + case "Delivered": + widthClass = " w-100" + break; + } + + return ( + <> +
+
+
+ {product.thumb_alt} +
+
+
{product.title}
+
${product.price.toLocaleString()}
+

{product.description}

+

Quantity: {quantity}

+
+
+
Delivery Address
+

{address}

+
+
+
Shipping updates
+

{email}

+

{phoneNumber}

+ Edit +
+
+
+
Preparing to ship on March 24, 2021
+
+
+
+
+
+
+ + + +
+

Order placed

+
+ {status == "Order Placed" && + <> +
+
+ + + + +
+

Processed

+
+
+
+ + + + + + +
+

Shipped

+
+
+
+ + + +
+

Delivered

+
+ + } + {status == "Processed" && + <> +
+
+ + + +
+

Processed

+
+
+
+ + + + + + +
+

Shipped

+
+
+
+ + + + + +
+

Delivered

+
+ + } + {status == "Shipped" && + <> +
+
+ + + +
+

Processed

+
+
+
+ + + +
+

Shipped

+
+
+
+ + + + + +
+

Delivered

+
+ + } + {status == "Delivered" && + <> +
+
+ + + +
+

Processed

+
+
+
+ + + +
+

Shipped

+
+
+
+ + + +
+

Delivered

+
+ + } +
+
+
+ + ); +} \ No newline at end of file diff --git a/src/components/order/orderHistory.tsx b/src/components/order/orderHistory.tsx new file mode 100644 index 0000000..87563d2 --- /dev/null +++ b/src/components/order/orderHistory.tsx @@ -0,0 +1,62 @@ +import OrderHistoryCard from './orderHistoryCard'; + +interface Props { + orders: { + orderNumber: string, + products: + { + id: string, + status: string, + quantity: number + }[], + address: string, + email: string, + date: string, + payment: { + cardNumber: string; + expiringDate: string; + }, + phoneNumber: string, + }[]; + products: ({ + id: string; + thumb_src: string; + thumb_alt: string; + title: string; + price: number; + description: string; + })[]; +} + +export default function OrderHistory({ + orders, + products +}: Props) { + + let orderHistoryCards = []; + + orders.forEach(order => { + let orderProducts = []; + + order.products.forEach(productDetails => { + products.forEach(product => { + if (product.id == productDetails.id) { + orderProducts.push(product); + } + }); + }) + orderHistoryCards.push() + }); + return ( + <> +
+

Order history

+

See your recent orders, download your invoices.

+ + {orderHistoryCards} +
+ + + + ); +}; \ No newline at end of file diff --git a/src/components/order/orderHistoryCard.tsx b/src/components/order/orderHistoryCard.tsx new file mode 100644 index 0000000..7b0994e --- /dev/null +++ b/src/components/order/orderHistoryCard.tsx @@ -0,0 +1,198 @@ +import OrderProductRow from "./orderProductRow"; + +interface Props { + order: { + orderNumber: string, + products: + { + id: string, + status: string, + dateModified: string; + }[], + address: string, + email: string, + date: string, + payment: { + cardNumber: string; + expiringDate: string; + }, + phoneNumber: string, + } + products: ({ + id: string; + thumb_src: string; + thumb_alt: string; + title: string; + price: number; + description: string; + })[]; +} + +export default function OrderHistoryCard({ + products, + order +}: Props) { + + let orderHistoryCards = []; + + order.products.map(productDetails => { + let productStatus = ""; + let dateModified = ""; + + products.map(product => { + if (productDetails.id == product.id) { + productStatus = productDetails.status; + dateModified = productDetails.dateModified; + + orderHistoryCards.push( + + ) + } + }) + }); + + return ( +
+
+
+
+
+

Order Id

+
{order.orderNumber}
+
+
+

Date of placement

+
{order.date}
+
+
+

Amount

+
$2,570
+
+
+ + +
+
+
+ + + + + + + + + + + + {orderHistoryCards} + +
ProductPriceStatusDateDetails
+
+
+ ); +} + + diff --git a/src/components/order/orderProductRow.tsx b/src/components/order/orderProductRow.tsx new file mode 100644 index 0000000..3851752 --- /dev/null +++ b/src/components/order/orderProductRow.tsx @@ -0,0 +1,37 @@ +interface Props { + product: ({ + id: string; + thumb_src: string; + thumb_alt: string; + title: string; + price: number; + description: string; + }); + status: string; + dateModified: string; +} + +export default function OrderSummary({ + product, + status, + dateModified + +}: Props) { + + return ( + <> + + + {product.thumb_alt} +

{product.title}

+ + ${product.price.toLocaleString()} + {status} + {dateModified} + + Download + + + + ); +}; \ No newline at end of file diff --git a/src/components/order/orderSummaries.tsx b/src/components/order/orderSummaries.tsx new file mode 100644 index 0000000..0dd2705 --- /dev/null +++ b/src/components/order/orderSummaries.tsx @@ -0,0 +1,121 @@ +import OrderCardProduct from './orderCardProduct'; +import OrderSummary from '../cart/orderSummary'; + +interface Props { + order: { + orderNumber: string, + products: + { + id: string, + status: string, + quantity: number + }[], + address: string, + email: string, + date: string, + payment: { + cardNumber: string; + expiringDate: string; + }, + phoneNumber: string, + } + products: ({ + id: string; + thumb_src: string; + thumb_alt: string; + title: string; + price: number; + description: string; + })[]; +} + +export default function OrderSummaries({ + order, + products +}: Props) { + + let orderCards = []; + + products.map(product => { + let status = ""; + let orderQuantity = 0; + + order.products.map(productDetails => { + if (productDetails.id == product.id) { + status = productDetails.status; + orderQuantity = productDetails.quantity + } + }) + orderCards.push( + + ) + }); + + let subtotal = 0; + products.map(product => + subtotal += product.price + ) + + return ( + <> +
+
+
+

Order #{order.orderNumber}

+

Order Placed {order.date}

+
+ +
+ + {orderCards} +
+
+
+
Billing Address
+

{order.address}

+
+
+
Payment information
+
+ + + + + + + + + + + + + + + + +

+ Visa {order.payment.cardNumber}
+ Expiry {order.payment.expiringDate} +

+
+
+ +
+ +
+
+
+
+ + ); +}; \ No newline at end of file diff --git a/src/components/products/cardCategory.tsx b/src/components/products/cardCategory.tsx new file mode 100644 index 0000000..71a0094 --- /dev/null +++ b/src/components/products/cardCategory.tsx @@ -0,0 +1,38 @@ +interface Props { + thumb_src: string; + title: string; + collection: string; + classList: string; + cta: string; +} + + +export default function CardProduct({ + thumb_src, + title, + collection, + classList, + cta, +}: Props) { + + const classBody = ((cta != null) ? "align-items-end d-flex" : "text-center w-100 pt-8" ); + + return ( + <> + + + + + ); +}; diff --git a/src/components/products/cardProduct.tsx b/src/components/products/cardProduct.tsx new file mode 100644 index 0000000..fee291d --- /dev/null +++ b/src/components/products/cardProduct.tsx @@ -0,0 +1,66 @@ +import ProductBadge from './productBadge'; + +interface Props { + thumb_src: string; + thumb_alt: string; + title: string; + description: string; + price: number; + color: string; + colors: string[]; + position: string; +} + +export default function CardProduct({ + thumb_src, + thumb_alt, + title, + description, + price, + color, + colors, + position +}: Props) { + + const classList = "card-body " + "text-" + position; + + return ( + <> + + + ); +}; diff --git a/src/components/products/categoryFilters.tsx b/src/components/products/categoryFilters.tsx new file mode 100644 index 0000000..95cbd35 --- /dev/null +++ b/src/components/products/categoryFilters.tsx @@ -0,0 +1,181 @@ +import data from '../../../public/data.json'; +import CardProduct from '../products/cardProduct'; + +interface Props { + title: string; +} + +export default function ProductOverview({ + title, +}: Props) { + + return ( + <> +
+
+ {(title.length != 0) && +

{title}

+ } + +
+
+
+ +
+
+
+ +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+
+ +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+
+ +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+
+
+
+
+ {data.products.slice(0, 3).map(product => +
+ +
+ )} +
+
+
+
+
+ + ); +}; diff --git a/src/components/products/productAccordion.tsx b/src/components/products/productAccordion.tsx new file mode 100644 index 0000000..3dfdd15 --- /dev/null +++ b/src/components/products/productAccordion.tsx @@ -0,0 +1,62 @@ +interface Props { + data: Map +} + +export default function ProductAccordion({ + data +}: Props) { + + const accordion = []; + let i = 0; + + Object.entries(data).map(([title,value],i) => { + if (i != 0) { + accordion.push( +
+
+ +
+
+
+ {value} +
+
+
+ ) + } else { + accordion.push( +
+
+ +
+
+
+ {value} +
+
+
+ ) + } + }) + + return ( + <> +
+ {accordion} +
+ + ); +} + + + + + diff --git a/src/components/products/productBadge.tsx b/src/components/products/productBadge.tsx new file mode 100644 index 0000000..2079daa --- /dev/null +++ b/src/components/products/productBadge.tsx @@ -0,0 +1,21 @@ +interface Props { + colors: string[]; +} + +export default function ProductBadge({ + colors, +}: Props) { + return ( + <> +
{colors.map(color => badge(color))}
+ + ); +} + +function badge(color:string) { + const badgeClass = "badge filter rounded-4 bg-" + color; + const badge = + + return badge; +} + diff --git a/src/components/products/productFeature.tsx b/src/components/products/productFeature.tsx new file mode 100644 index 0000000..c0d5a5e --- /dev/null +++ b/src/components/products/productFeature.tsx @@ -0,0 +1,49 @@ +import ProductFeatureImg from './productFeatureImg'; +import ProductFeatureDetails from './productFeatureDetails'; + +interface Props { + title: string; + images: ({ + src: string; + alt: string; + })[]; + full_description: string; + featuresDetails: Map; +} + +export default function ProductOverview({ + title, + images, + full_description, + featuresDetails, +}: Props) { + + return ( + <> +
+
+
+ {(title.length != 0) && +

{title}

+ } + {(full_description.length != 0) && +

{full_description}

+ } +
+
+
+
+
+

Product Description

+

Society has put up so many boundaries, so many limitations on what’s right and wrong that it’s almost impossible to get a pure thought out. It’s like a little kid, a little boy, looking at colors, and no one told him what colors are good, before somebody tells you you shouldn’t like pink because that’s for girls, or you’d instantly become a gay two-year-old.

+ +
+
+
+ +
+
+
+ + ); +}; diff --git a/src/components/products/productFeature2.tsx b/src/components/products/productFeature2.tsx new file mode 100644 index 0000000..7f18fe6 --- /dev/null +++ b/src/components/products/productFeature2.tsx @@ -0,0 +1,152 @@ +interface Props { + title: string; + full_description: string; + data: Map; +} + +export default function ProductOverview({ + title, + full_description, + data, +}: Props) { + + return ( + <> +
+
+
+ {(title.length != 0) && +

{title}

+ } + {(full_description.length != 0) && +

{full_description}

+ } + + +
+
+
+
+
Material
+

If everything I did failed - which it doesn't, it actually succeeds - just the fact that I'm willing to fail is an inspiration. People are so scared to lose that they don't even try. +

+ Like, one thing people can't say is that I'm not trying, and I'm not trying my hardest, and I'm not trying to do the best way I know how. +

+
+ +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+
+
+
Function
+

The time is now for it to be okay to be great. People in this world shun people for being great. For being a bright color. For standing out. But the time is now to be okay to be the greatest you. +
+ Would you believe in what you believe in, if you were the only one who believed it? People are so scared to lose that they don't even try. +

+
+ +
+ +
+
+
+
+
+
+
Warranty
+

I always felt like I could do anything. That’s the main thing people are controlled by! Thoughts- their perception of themselves! They're slowed down by their perception of themselves. +

+ If you're taught you can’t do anything, you won’t do anything. I was taught I could do everything. +

+
+ +
+ +
+
+
+
+
+
+
Instructions
+

We’re not always in the position that we want to be at. We’re constantly growing. We’re constantly making mistakes. We’re constantly trying to express ourselves and actualize our dreams. +
+ If you have the opportunity to play this game of life you need to appreciate every moment. A lot of people don’t appreciate the moment until it’s passed. +

+
+ +
+ +
+
+
+
+
+
+
+ + ); +}; + + + diff --git a/src/components/products/productFeatureDetails.tsx b/src/components/products/productFeatureDetails.tsx new file mode 100644 index 0000000..b0ced80 --- /dev/null +++ b/src/components/products/productFeatureDetails.tsx @@ -0,0 +1,34 @@ +interface Props { + featuresDetails: Map +} + +export default function ProductAccordion({ + featuresDetails +}: Props) { + + const prodFeatures = []; + + Object.entries(featuresDetails).map(([title,value]) => { + prodFeatures.push( +
+
+ + + +

{value}

+
+
+ ) + }) + + return ( + <> + {prodFeatures} + + ); +} + + + + + diff --git a/src/components/products/productFeatureImg.tsx b/src/components/products/productFeatureImg.tsx new file mode 100644 index 0000000..40787bb --- /dev/null +++ b/src/components/products/productFeatureImg.tsx @@ -0,0 +1,27 @@ +interface Props { + images: ({ + src: string; + alt: string; + })[]; +} + +export default function ProductGallery({ + images, +}: Props) { + + return ( + <> +
+ {images[0].alt} +
+
+
+ {images[2].alt} +
+
+ {images[3].alt} +
+
+ + ); +} \ No newline at end of file diff --git a/src/components/products/productFeatureTabs.tsx b/src/components/products/productFeatureTabs.tsx new file mode 100644 index 0000000..fdb203e --- /dev/null +++ b/src/components/products/productFeatureTabs.tsx @@ -0,0 +1,55 @@ +interface Props { + images: ({ + src: string; + alt: string; + })[]; + data: Map +} + +export default function ProductAccordion({ + images, + data +}: Props) { + + const tabs = []; + let i = 0; + + Object.entries(data).map(([title,value],i) => { + if (i != 0) { + tabs.push( +
+
+
+
{title}
+

{value}

+
+ +
+ {images[0].alt} +
+
+
+ ) + } else { + tabs.push() + } + }) + + return ( + <> +
+ {tabs} +
+ + ); +} + + + + + diff --git a/src/components/products/productGallery.tsx b/src/components/products/productGallery.tsx new file mode 100644 index 0000000..3a7fe75 --- /dev/null +++ b/src/components/products/productGallery.tsx @@ -0,0 +1,25 @@ +interface Props { + images: ({ + src: string; + alt: string; + })[]; +} + +export default function ProductGallery({ + images, +}: Props) { + + return ( + <> +
+
+ {images[0].alt} + {images[1].alt} + {images[2].alt} + {images[3].alt} +
+ {images[0].alt} +
+ + ); +} \ No newline at end of file diff --git a/src/components/products/productImages.tsx b/src/components/products/productImages.tsx new file mode 100644 index 0000000..2c299a9 --- /dev/null +++ b/src/components/products/productImages.tsx @@ -0,0 +1,25 @@ +interface Props { + images: ({ + src: string; + alt: string; + })[]; +} + +export default function ProductImages({ + images, +}: Props) { + + return ( + <> +
+ {images[0].alt} +
+ {images[0].alt} + {images[1].alt} + {images[2].alt} + {images[3].alt} +
+
+ + ); +} \ No newline at end of file diff --git a/src/components/products/productOverviewGallery.tsx b/src/components/products/productOverviewGallery.tsx new file mode 100644 index 0000000..f17c363 --- /dev/null +++ b/src/components/products/productOverviewGallery.tsx @@ -0,0 +1,81 @@ +import React from 'react'; +import ProductBadge from './productBadge'; +import ProductRating from '../reviews/reviewRating'; +import ProductAccordion from './productAccordion'; +import ProductImages from './productImages'; + +interface Props { + title: string; + price: number; + images: ({ + src: string; + alt: string; + })[]; + colors: string[]; + rating: number; + reviews: number; + full_description: string; + data: Map +} + +export default function productOverviewGallery({ + title, + price, + images, + colors, + rating, + full_description, + reviews, + data +}: Props) { + + return ( + <> +
+
+ {(images.length != 0) && + + } +
+ {(title.length != 0) && +

{title}

+ } + {(price.length != 0) && + <> +
+

${price.toLocaleString()}

+ +
+ + } +

{full_description}

+ + {(rating != 0) && +
+ + 100 reviews +
+ } + + {(colors.length != 0) && + <> +
Color:
+ {(colors) && + + } + + } + +
+ + + + +
+ +
+
+
+ + ); +}; diff --git a/src/components/products/productOverviewGrid.tsx b/src/components/products/productOverviewGrid.tsx new file mode 100644 index 0000000..6acad42 --- /dev/null +++ b/src/components/products/productOverviewGrid.tsx @@ -0,0 +1,100 @@ +import ProductRating from '../reviews/reviewRating' +import ProductGallery from './productGallery' +import ProductSizes from './productSizes' + +interface Props { + title: string; + colors: string[]; + images: ({ + src: string; + alt: string; + })[]; + full_description: string; + price: number; + highlights: string[]; + details: string; + rating: number; + reviews: number; + sizes: Map +} + +export default function ProductOverview({ + title, + colors, + images, + full_description, + price, + highlights, + details, + rating, + reviews, + sizes +}: Props) { + + return ( + <> +
+
+ {(images.length != 0) && + + } +
+ {(title.length != 0) && +

{title}

+ } + {(full_description.length != 0) && +

{full_description}

+ } + +
+ {(price.length != 0) && +
+

${price.toLocaleString()}

+ +
+ } + + {(rating != 0) && + <> +

Reviews

+
+ + {reviews} reviews +
+ + } + + {(sizes.size != 0) && + + } + + +
+
+ +
+
+

Product Description

+

There’s nothing I really wanted to do in life that I wasn’t able to get good at. That’s my skill. I’m not really specifically talented at anything except for the ability to learn. That’s what I do. That’s what I’m here for. Don’t be afraid to be wrong because you can’t learn anything from a compliment.

+ {(highlights.length != 0) && + <> +
Benefits
+
    + {highlights.map(highlight => +
  • {highlight}
    • + )} +
+ + } + {(details.length != 0) && + <> +
More about product
+

{details}

+ + } +
+
+
+ + ); +}; diff --git a/src/components/products/productQuickview.tsx b/src/components/products/productQuickview.tsx new file mode 100644 index 0000000..baedc7f --- /dev/null +++ b/src/components/products/productQuickview.tsx @@ -0,0 +1,88 @@ +import ProductBadge from './productBadge'; +import ProductRating from './productRating'; +import ProductSizes from './productSizes'; +import ProductGallery from './productGallery' +import Reviews from '../reviews/reviewSimple' + + +interface Props { + thumb_src: string; + title: string; + price: number; + colors: string[]; + rating: number; + reviews: number; + sizes: Map; + images: ({ + src: string; + alt: string; + })[]; +} + +export default function ProductQuickview({ + thumb_src, + title, + price, + colors, + rating, + reviews, + sizes, + images +}: Props) { + + return ( + <> + + + + ); +}; diff --git a/src/components/products/productQuickview2.tsx b/src/components/products/productQuickview2.tsx new file mode 100644 index 0000000..f30ab32 --- /dev/null +++ b/src/components/products/productQuickview2.tsx @@ -0,0 +1,113 @@ +import ProductBadge from './productBadge'; +import ProductRating from './productRating'; +import ProductSizes from './productSizes'; + + +interface Props { + thumb_src: string; + title: string; + price: number; + colors: string[]; + rating: number; + reviews: number; + stock: boolean; +} + +export default function ProductQuickview({ + thumb_src, + title, + price, + colors, + rating, + reviews, + stock +}: Props) { + + return ( + <> + + + + ); +}; diff --git a/src/components/products/productRating.tsx b/src/components/products/productRating.tsx new file mode 100644 index 0000000..d45117f --- /dev/null +++ b/src/components/products/productRating.tsx @@ -0,0 +1,38 @@ +interface Props { + rating: number; + reviews: number; +} + +export default function ProductRating({ + rating, + reviews, +}: Props) { + + const ratingStar = [] + for (let i = 0; i < 5; i++) { + if (i < rating ) { + ratingStar.push( + + ) + } else { + ratingStar.push( + + ) + } + + } + + return ( + <> +
+

4.5

+ {ratingStar} + See all {reviews} reviews +
+ + ); +} diff --git a/src/components/products/productSizes.tsx b/src/components/products/productSizes.tsx new file mode 100644 index 0000000..3bf74e5 --- /dev/null +++ b/src/components/products/productSizes.tsx @@ -0,0 +1,34 @@ +interface Props { + sizes: Map +} + +export default function ProductSizes({ + sizes, +}: Props) { + + const sizeID = Date.now(); + + return ( + <> +
+
Size
+ Size guide +
+
+ {Object.entries(sizes).map(([size, amount], i) => + +
+
+ {(amount != 0) ? + + : + + } + +
+
+ )} +
+ + ); +} diff --git a/src/components/promo/promoSectionLarge.tsx b/src/components/promo/promoSectionLarge.tsx new file mode 100644 index 0000000..4e64a1a --- /dev/null +++ b/src/components/promo/promoSectionLarge.tsx @@ -0,0 +1,44 @@ +interface Props { + title: string; + full_description: string; + pageHeaderBgImg: string; + pageHeaderMinVh: string; + pageHeaderRadius: string; +} + +export default function TestimonialsFade({ + title, + full_description, + pageHeaderBgImg, + pageHeaderMinVh, + pageHeaderRadius, +}: Props) { + + const styles = { + pageHeader: { + backgroundImage: 'url(' + pageHeaderBgImg + ')', + minHeight: pageHeaderMinVh, + borderRadius: pageHeaderRadius + }, + } as const; + + return ( + <> +
+
+ +
+
+
+

{title}

+

{full_description}

+ +
+
+
+
+
+ + ); +}; + diff --git a/src/components/promo/testimonialsFade.tsx b/src/components/promo/testimonialsFade.tsx new file mode 100644 index 0000000..0f0286a --- /dev/null +++ b/src/components/promo/testimonialsFade.tsx @@ -0,0 +1,92 @@ +import Reviews from '../reviews/reviewRating'; +interface Props { + pageHeaderBgImg: string; + pageHeaderMinVh: string; +} + +export default function TestimonialsFade({ + pageHeaderBgImg, + pageHeaderMinVh +}: Props) { + + const styles = { + pageHeader: { + backgroundImage: 'url(' + pageHeaderBgImg + ')', + minHeight: pageHeaderMinVh, + }, + } as const; + + return ( + <> +
+
+
+
+
+
+

Exclusive Discounts for Members

+

The time is now for it to be okay to be great. People in this world shun people for being great. For being a bright color. For standing out. But the time is now to be okay to be the greatest you.

+ +
+
+
+
+
+

Our customer’s opinion

+

Society has put up so many boundaries, so many limitations on what’s right and wrong that it’s almost impossible to get a pure thought out.

+
+
+
+
+ +

We’re not always in the position that we want to be at. We’re constantly growing. We’re constantly making mistakes. We’re constantly trying to express ourselves and actualize our dreams. If you have the opportunity to play this game of life you need to appreciate every moment.

+
+
+ +
+
Alexa Liras
+
+
+
+
+
+
+
+ +

There’s nothing I really wanted to do in life that I wasn’t able to get good at. That’s my skill. I’m not really specifically talented at anything except for the ability to learn. That’s what I do. That’s what I’m here for. Don’t be afraid to be wrong because you can’t learn anything from a compliment.

+
+
+ +
+
Laurent Perrier
+
+
+
+
+
+
+
+ +

It really matters and then like it really doesn’t matter. What matters is the people who are sparked by it. And the people who are like offended by it, it doesn’t matter. Because it's about motivating the doers. Because I’m here to follow my dreams and inspire other people to follow their dreams.

+
+
+ +
+
Michael Levi
+
+
+
+
+
+
+
+ + ); +}; \ No newline at end of file diff --git a/src/components/reviews/reviewComment.tsx b/src/components/reviews/reviewComment.tsx new file mode 100644 index 0000000..c30b674 --- /dev/null +++ b/src/components/reviews/reviewComment.tsx @@ -0,0 +1,36 @@ +import ReviewRating from './reviewRating'; + +interface Props { + review: { + avatar: string; + name: string; + date: string; + rating: number; + comment: string; + } +} + +export default function ReviewComment({ + review +}: Props) { + + return ( + <> +
+ +

{review.comment}

+
+ + Image placeholder + +
+
{review.name}
+

{review.date}

+
+
+ +
+
+ + ); +}; \ No newline at end of file diff --git a/src/components/reviews/reviewProgress.tsx b/src/components/reviews/reviewProgress.tsx new file mode 100644 index 0000000..7f9be86 --- /dev/null +++ b/src/components/reviews/reviewProgress.tsx @@ -0,0 +1,114 @@ + +interface Props { + reviews: { + avatar: string; + name: string; + date: string; + rating: number; + comment: string; + }[] +} + +export default function ReviewProgress({ + reviews +}: Props) { + + let ratings = [0,0,0,0,0,0]; + let ratingsPercentage = [0,0,0,0,0,0]; + + reviews.map(review => { + + ratings[review.rating]++; + + }); + + for(let i = 1; i < 6; i++){ + ratingsPercentage[i] = Math.trunc((ratings[i] * 100) / reviews.length); + } + + return ( + <> +
+
+

5

+ +
+
+
+
+
+
+ {ratingsPercentage[5]}% +
+
+
+
+
+

4

+ +
+
+
+
+
+
+ {ratingsPercentage[4]}% +
+
+
+
+
+

3

+ +
+
+
+
+
+
+ {ratingsPercentage[3]}% +
+
+
+
+
+

2

+ +
+
+
+
+
+
+ {ratingsPercentage[2]}% +
+
+
+
+
+

1

+ +
+
+
+
+
+
+ {ratingsPercentage[1]}% +
+
+
+ + + ); +}; \ No newline at end of file diff --git a/src/components/reviews/reviewRating.tsx b/src/components/reviews/reviewRating.tsx new file mode 100644 index 0000000..8f7ef78 --- /dev/null +++ b/src/components/reviews/reviewRating.tsx @@ -0,0 +1,34 @@ +interface Props { + rating: number; +} + +export default function ReviewRating({ + rating, +}: Props) { + + const ratingStar = [] + for (let i = 0; i < 5; i++) { + if (i < rating ) { + ratingStar.push( + + ) + } else { + ratingStar.push( + + ) + } + + } + + return ( + <> +
+ {ratingStar} +
+ + ); +} diff --git a/src/components/reviews/reviewSimple.tsx b/src/components/reviews/reviewSimple.tsx new file mode 100644 index 0000000..c231420 --- /dev/null +++ b/src/components/reviews/reviewSimple.tsx @@ -0,0 +1,37 @@ +import ReviewComment from './reviewComment'; + +interface Props { + reviews: { + avatar: string; + name: string; + date: string; + rating: number; + comment: string; + }[] +} + +export default function ReviewSimple({ + reviews +}: Props) { + + let CommentsList = []; + + reviews.map(review => { + + CommentsList.push( + + ) + }); + return ( + <> +
+

Our Customer’s Opinion

+

Society has put up so many boundaries, so many limitations on what’s right and wrong that it’s almost impossible to get a pure thought out.

+
+
+ {CommentsList} +
+ + + ); +}; \ No newline at end of file diff --git a/src/components/reviews/reviewSummaryChart.tsx b/src/components/reviews/reviewSummaryChart.tsx new file mode 100644 index 0000000..5f1988c --- /dev/null +++ b/src/components/reviews/reviewSummaryChart.tsx @@ -0,0 +1,67 @@ +import ReviewComment from './reviewComment'; +import ReviewRating from './reviewRating'; +import ReviewProgress from './reviewProgress'; + +interface Props { + reviews: { + avatar: string; + name: string; + date: string; + rating: number; + comment: string; + productID: number; + }[] +} + +export default function ReviewSummaryChart({ + reviews +}: Props) { + + let CommentsList: JSX.Element[] = []; + let rating = 0; + + reviews.map(review => { + rating += review.rating; + CommentsList.push( + + ) + }); + + rating = Math.trunc(rating / reviews.length); + + return ( + <> +
+

Our Customer’s Opinion

+

Society has put up so many boundaries, so many limitations on what’s right and wrong that it’s almost impossible to get a pure thought out.

+
+
+
+
+

Client Reviews

+
+
4.7
+ +

Based on {reviews.length} reviews

+
+
+ +
+
We value your opinion
+

The time is now for it to be okay to be great. People in this world shun people for being great.

+ +
+
+
+
+
+ {CommentsList} +
+
+
+
+ + + + ); +}; \ No newline at end of file diff --git a/src/components/store/storeDoubleColumn.tsx b/src/components/store/storeDoubleColumn.tsx new file mode 100644 index 0000000..0e37d6a --- /dev/null +++ b/src/components/store/storeDoubleColumn.tsx @@ -0,0 +1,137 @@ +export default function StoreNavigationDoubleColumn() { + return ( + <> + + + ); +}; diff --git a/src/components/store/storeNavbar.tsx b/src/components/store/storeNavbar.tsx new file mode 100644 index 0000000..e67e0c0 --- /dev/null +++ b/src/components/store/storeNavbar.tsx @@ -0,0 +1,63 @@ +export default function StoreNavbar() { + return ( + <> +
+ + + +
+ + ); +}; diff --git a/src/components/store/storeNavigation.tsx b/src/components/store/storeNavigation.tsx new file mode 100644 index 0000000..7e86a0a --- /dev/null +++ b/src/components/store/storeNavigation.tsx @@ -0,0 +1,15 @@ +import StoreNavbar from './storeNavbar'; +import UpperNavbar from './upperNavbar'; + +export default function StoreNavigation() { + + return ( + <> + + + ); +}; \ No newline at end of file diff --git a/src/components/store/upperNavbar.tsx b/src/components/store/upperNavbar.tsx new file mode 100644 index 0000000..a89664f --- /dev/null +++ b/src/components/store/upperNavbar.tsx @@ -0,0 +1,48 @@ +export default function UpperNavbar() { + return ( + <> +
+
+ + +
+
+ + ); +}; diff --git a/src/env.d.ts b/src/env.d.ts new file mode 100644 index 0000000..acef35f --- /dev/null +++ b/src/env.d.ts @@ -0,0 +1,2 @@ +/// +/// diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro new file mode 100644 index 0000000..5a676c2 --- /dev/null +++ b/src/layouts/Layout.astro @@ -0,0 +1,53 @@ +--- +export interface Props { + title: string; +} + +const { title } = Astro.props; +--- + + + + + + + + + + {title} + + + + + + + + + + + + + + + + + + diff --git a/src/pages/index.astro b/src/pages/index.astro new file mode 100644 index 0000000..1a1d4a4 --- /dev/null +++ b/src/pages/index.astro @@ -0,0 +1,386 @@ +--- +import Layout from '../layouts/Layout.astro'; +import data from '../../public/data.json'; +import '../../assets/scss/astro-ecommerce.scss'; +import Navbar from '../components/navbar'; +import ComplexNavbar from '../components/complexNavbar'; +import ComplexNavbarDark from '../components/complexNavbarDark'; +import Footer from '../components/footer'; +import ComplexFooter from '../components/complexFooter'; +import CardProduct from '../components/products/cardProduct'; +import CardCategory from '../components/products/cardCategory'; +import ProductOverviewGrid from '../components/products/productOverviewGrid'; +import ProductOverviewGallery from '../components/products/productOverviewGallery'; +import ShoppingCart from '../components/cart/shoppingCart'; +import ShoppingCart2 from '../components/cart/shoppingCart2'; +import ProductQuickview from '../components/products/productQuickview'; +import ProductQuickview2 from '../components/products/productQuickview2'; +import ProductFeature from '../components/products/productFeature'; +import ProductFeature2 from '../components/products/productFeature2'; +import CategoryFilters from '../components/products/categoryFilters'; +import TestimonialsFade from '../components/promo/testimonialsFade'; +import PromoSectionLarge from '../components/promo/promoSectionLarge'; +import CheckoutOrderSummary from '../components/checkout/checkoutOrderSummary'; +import CheckoutMultiStep from '../components/checkout/checkoutMultiStep'; +import ReviewSimple from '../components/reviews/reviewSimple'; +import ReviewSummaryChart from '../components/reviews/reviewSummaryChart'; +import OrderSummaries from '../components/order/orderSummaries'; +import OrderHistory from '../components/order/orderHistory'; +import IncentiveLarge from '../components/incentives/incentiveLarge'; +import IncentiveCols from '../components/incentives/incentiveCols'; + +let cartItems = []; +data.shoppingCart.map(id => + data.products.filter(x => x.id == id).map(x => cartItems.push(x)) +) +let cartItems2 = []; +data.shoppingCart2.map(id => + data.products.filter(x => x.id == id).map(x => cartItems2.push(x)) +) + +// filter reviews with ID 01 +let productReviews = data.reviews.filter(x => x.productID == "01"); + +let orderProducts: Array = []; + +data.orders[0].products.forEach(productDetails => { + data.products.forEach(product => { + if (product.id == productDetails.id) { + orderProducts.push(product); + } + }); +}) + +let orderHistoryProducts = new Set(); + +data.orders.forEach((order) => { + order.products.forEach(productDetails => { + data.products.forEach(product => { + if (product.id == productDetails.id) { + orderHistoryProducts.add(product); + } + }); + }) +}) + +--- + + + + +
+ +
+

Product Lists

+

Components and blocks for Product Lists

+
+ {data.products.map(product => +
+ +
+ )} +
+ +

Product Lists

+

Cards with full details

+
+ {data.products.map(product => +
+ +
+ )} +
+ +
+
+

Shop by category

+ Browse all categories > +
+ {data.categories.slice(0, 4).map(category => +
+ +
+ )} +
+ +
+
+

Shop by category

+ Browse all categories > +
+
+ +
+
+
+ +
+
+ +
+
+
+ + +
+

Product Overview

+

With image grid

+ + +
+ +
+

Product Overview

+

Product Overviews with image gallery and expandable details

+ + +
+ + +
+ +
+ +
+ +
+ +
+

Category filters

+

With inline actions and expandable sidebar filters

+ +
+ +
+

Product Quickviewers

+

With color selector, size selector, and details link

+ + + +

Product Quickviewers

+

With large size selector

+ +
+ +
+ +
+ +
+ +
+ +
+

Complex Navbar White

+ Browse all categories > +

+ +
+ {data.products.map(product => +
+ +
+ )} +
+ +

Complex Navbar Dark

+ Browse all categories > +

+ +
+ {data.products.map(product => +
+ +
+ )} +
+
+ +
+

Simple Footer

+
+ +

Complex Footer

+ +
+ +
+

Promo Sections

+

Full-width with background image and large content

+ +
+ +
+

Promo Sections

+

With fading background image and testimonials

+ +
+ +
+

Checkout Forms

+

Split with order summary

+ +
+ +
+

Checkout Forms

+

SWith order summary sidebar

+ +
+ +
+

Product reviews

+

Simple with avatars

+ +
+ +
+

Product reviews

+

With summary chart

+ +
+ +
+

Order Summaries

+

With order summary sidebar

+ +
+ +
+ +
+ +
+ +
+ +
+

Features

+

3-column with illustrations and header

+ +
+ +
+
+
+ diff --git a/src/pages/landing.astro b/src/pages/landing.astro new file mode 100644 index 0000000..8565793 --- /dev/null +++ b/src/pages/landing.astro @@ -0,0 +1,66 @@ +--- +import Layout from '../layouts/Layout.astro'; +import data from '../../public/data.json'; +import '../../assets/scss/astro-ecommerce.scss'; +import CardCategory from '../components/products/cardCategory'; +import ProductFeature from '../components/products/productFeature'; +import Navbar from '../components/navbar'; +import Footer from '../components/footer'; +import TestimonialsFade from '../components/promo/testimonialsFade'; +import PromoSectionLarge from '../components/promo/promoSectionLarge'; +--- + + +
+ + +
+
+

Shop by category

+ Browse all categories > +
+
+ {data.categories.slice(0, 4).map(category => +
+ +
+ )} +
+ + +
+ +
+
+ +
+ +
+ +
+
+ + \ No newline at end of file diff --git a/src/pages/product.astro b/src/pages/product.astro new file mode 100644 index 0000000..ca5bedc --- /dev/null +++ b/src/pages/product.astro @@ -0,0 +1,56 @@ +--- +import Layout from '../layouts/Layout.astro'; +import data from '../../public/data.json'; +import '../../assets/scss/astro-ecommerce.scss'; +import Navbar from '../components/navbar'; +import CardProduct from '../components/products/cardProduct'; +import ProductOverviewGrid from '../components/products/productOverviewGrid'; +import StoreDoubleColumn from '../components/store/storeDoubleColumn'; +import ReviewSummaryChart from '../components/reviews/reviewSummaryChart'; + +// filter reviews with ID 01 +let productReviews = data.reviews.filter(x => x.productID == "01"); +--- + + +
+ +
+ + +
+ +
+ +
+
Customers also purchased
+ {data.products.map(product => +
+ +
+ )} +
+
+ +
+
+ + \ No newline at end of file diff --git a/src/pages/shopping-cart.astro b/src/pages/shopping-cart.astro new file mode 100644 index 0000000..425868b --- /dev/null +++ b/src/pages/shopping-cart.astro @@ -0,0 +1,44 @@ +--- +import Layout from '../layouts/Layout.astro'; +import data from '../../public/data.json'; +import '../../assets/scss/astro-ecommerce.scss'; +import Navbar from '../components/navbar'; +import UpperNavbar from '../components/store/upperNavbar'; +import CardProduct from '../components/products/cardProduct'; +import ShoppingCart from '../components/cart/shoppingCart'; +import StoreDoubleColumn from '../components/store/storeDoubleColumn'; + +let cartItems = []; +data.shoppingCart.map(id => + data.products.filter(x => x.id == id).map(x => cartItems.push(x)) +) +--- + + +
+ + + + +
+
+
You may also like...
+ {data.products.map(product => +
+ +
+ )} +
+
+ +
+
+ + \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..6bebb39 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,18 @@ +{ + "$schema": "https://json.schemastore.org/tsconfig", + "compilerOptions": { + "target": "ESNext", + "module": "ESNext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "forceConsistentCasingInFileNames": true, + "esModuleInterop": true, + "strict": true, + "noImplicitAny": false, + "jsx": "react-jsx", + "jsxImportSource": "react" + }, + "extends": "astro/tsconfigs/strict" +} \ No newline at end of file