├── src ├── scss │ ├── pages │ │ ├── _contact.scss │ │ ├── _home.scss │ │ ├── _styleguide.scss │ │ ├── _wishlist.scss │ │ ├── _order.scss │ │ ├── _forget-password.scss │ │ ├── _cart.scss │ │ ├── _deliver-info.scss │ │ └── _verify.scss │ ├── themes │ │ └── _theme.scss │ ├── components │ │ ├── _orderitem.scss │ │ ├── _buttons.scss │ │ ├── _form.scss │ │ ├── _productcategory.scss │ │ └── _product-item.scss │ ├── abstracts │ │ ├── _functions.scss │ │ └── _variables.scss │ ├── vendors │ │ ├── bootstrap │ │ │ └── scss │ │ │ │ ├── utilities │ │ │ │ ├── _clearfix.scss │ │ │ │ ├── _overflow.scss │ │ │ │ ├── _interactions.scss │ │ │ │ ├── _screenreaders.scss │ │ │ │ ├── _visibility.scss │ │ │ │ ├── _shadows.scss │ │ │ │ ├── _float.scss │ │ │ │ ├── _align.scss │ │ │ │ ├── _background.scss │ │ │ │ ├── _stretched-link.scss │ │ │ │ ├── _sizing.scss │ │ │ │ ├── _position.scss │ │ │ │ ├── _display.scss │ │ │ │ ├── _embed.scss │ │ │ │ ├── _borders.scss │ │ │ │ ├── _spacing.scss │ │ │ │ ├── _text.scss │ │ │ │ └── _flex.scss │ │ │ │ ├── _media.scss │ │ │ │ ├── mixins │ │ │ │ ├── _clearfix.scss │ │ │ │ ├── _size.scss │ │ │ │ ├── _lists.scss │ │ │ │ ├── _text-truncate.scss │ │ │ │ ├── _resize.scss │ │ │ │ ├── _visibility.scss │ │ │ │ ├── _alert.scss │ │ │ │ ├── _text-hide.scss │ │ │ │ ├── _badge.scss │ │ │ │ ├── _nav-divider.scss │ │ │ │ ├── _float.scss │ │ │ │ ├── _list-group.scss │ │ │ │ ├── _text-emphasis.scss │ │ │ │ ├── _reset-text.scss │ │ │ │ ├── _pagination.scss │ │ │ │ ├── _box-shadow.scss │ │ │ │ ├── _deprecate.scss │ │ │ │ ├── _transition.scss │ │ │ │ ├── _background-variant.scss │ │ │ │ ├── _hover.scss │ │ │ │ ├── _table-row.scss │ │ │ │ ├── _screen-reader.scss │ │ │ │ ├── _image.scss │ │ │ │ ├── _caret.scss │ │ │ │ ├── _border-radius.scss │ │ │ │ ├── _gradients.scss │ │ │ │ ├── _grid.scss │ │ │ │ ├── _grid-framework.scss │ │ │ │ ├── _buttons.scss │ │ │ │ └── _breakpoints.scss │ │ │ │ ├── _transitions.scss │ │ │ │ ├── bootstrap-reboot.scss │ │ │ │ ├── _jumbotron.scss │ │ │ │ ├── _utilities.scss │ │ │ │ ├── bootstrap-grid.scss │ │ │ │ ├── _root.scss │ │ │ │ ├── _close.scss │ │ │ │ ├── bootstrap.scss │ │ │ │ ├── _code.scss │ │ │ │ ├── _mixins.scss │ │ │ │ ├── _toasts.scss │ │ │ │ ├── _images.scss │ │ │ │ ├── _spinners.scss │ │ │ │ ├── _badge.scss │ │ │ │ ├── _progress.scss │ │ │ │ ├── _alert.scss │ │ │ │ ├── _breadcrumb.scss │ │ │ │ ├── _grid.scss │ │ │ │ ├── _pagination.scss │ │ │ │ ├── _nav.scss │ │ │ │ ├── _type.scss │ │ │ │ ├── _tooltip.scss │ │ │ │ ├── _buttons.scss │ │ │ │ ├── _print.scss │ │ │ │ ├── _button-group.scss │ │ │ │ ├── _tables.scss │ │ │ │ ├── _list-group.scss │ │ │ │ ├── _functions.scss │ │ │ │ └── _dropdown.scss │ │ ├── fontawesome │ │ │ └── webfonts │ │ │ │ ├── fa-solid-900.eot │ │ │ │ ├── fa-solid-900.ttf │ │ │ │ ├── fa-brands-400.eot │ │ │ │ ├── fa-brands-400.ttf │ │ │ │ ├── fa-brands-400.woff │ │ │ │ ├── fa-regular-400.eot │ │ │ │ ├── fa-regular-400.ttf │ │ │ │ ├── fa-solid-900.woff │ │ │ │ ├── fa-solid-900.woff2 │ │ │ │ ├── fa-brands-400.woff2 │ │ │ │ ├── fa-regular-400.woff │ │ │ │ └── fa-regular-400.woff2 │ │ └── plugin │ │ │ ├── css │ │ │ ├── wan-spinner.css │ │ │ ├── slick.css │ │ │ └── nice-select.css │ │ │ └── js │ │ │ ├── jquery.nice-select.min.js │ │ │ └── wan-spinner.js │ ├── base │ │ ├── _typography.scss │ │ └── _reset.scss │ ├── layout │ │ ├── _brand.scss │ │ ├── _card-price.scss │ │ ├── _breadcrumb.scss │ │ ├── _banner.scss │ │ └── _features.scss │ └── main.scss └── js │ └── main.js ├── .babelrc ├── .gitignore ├── .vscode └── settings.json ├── dist ├── images │ ├── Logo.png │ ├── bag-2.jpg │ ├── watch.jpg │ ├── banner.jpg │ ├── brand │ │ ├── 01.png │ │ ├── 02.png │ │ ├── 03.png │ │ ├── 04.png │ │ └── 05.png │ ├── logo │ │ ├── logo.png │ │ └── white.png │ ├── nike-shoe.jpg │ ├── product │ │ ├── 01.jpg │ │ ├── 02.jpg │ │ ├── 03.jpg │ │ ├── 04.jpg │ │ ├── 05.jpg │ │ ├── 06.jpg │ │ ├── 07.jpg │ │ ├── 08.jpg │ │ ├── 09.jpg │ │ └── cart.svg │ ├── screenshot.png │ ├── white-logo.png │ ├── black-camera.jpg │ ├── digital-shoe.jpg │ ├── green-small.jpg │ ├── green-tissue.jpg │ ├── grocery-item.jpg │ ├── categorys │ │ ├── drone.jpg │ │ ├── chosma.jpg │ │ ├── iphone.jpg │ │ ├── jumper.jpg │ │ ├── headphone.jpg │ │ ├── wool-shoe.jpg │ │ ├── electronics.jpg │ │ └── tree dasher.jpg │ ├── feature │ │ ├── tissue.jpg │ │ ├── headphone.jpg │ │ ├── medicine.jpg │ │ └── multi-products.jpg │ ├── product-deatils │ │ ├── 1-big-mage.jpg │ │ ├── 2-big-image.jpg │ │ ├── 3-big-image.jpg │ │ ├── 4-big-image.jpg │ │ ├── 1-small-image.jpg │ │ ├── 2-small-image.jpg │ │ ├── 3 Small Image.jpg │ │ └── 4-small-image.jpg │ ├── account │ │ ├── facebook.svg │ │ ├── twitter.svg │ │ └── search.svg │ └── company-image │ │ ├── visa.svg │ │ ├── apple.svg │ │ ├── logo.svg │ │ └── masterclass.svg └── fonts │ ├── fa-brands-400.57dcda6f368ea90179f75cbdae96c263.eot │ ├── fa-brands-400.9ec698d1a597bff5df337094b71ddaaf.ttf │ ├── fa-solid-900.75f38a159982b6bd1704891332d95fa7.ttf │ ├── fa-solid-900.89e02bae13c9131c7468b1e729339ac1.eot │ ├── fa-solid-900.cdfec5cf5e9840889790bcf2c4042583.woff │ ├── fa-brands-400.067595ad77ecc0db9c81c8905a7eef32.woff2 │ ├── fa-brands-400.b564da88bbf0c4aa446fa19653713cd1.woff │ ├── fa-regular-400.3351f435b3c9037fd88aeb04dc1e43bc.eot │ ├── fa-regular-400.4165c2688309cbfb1b877caf8f75afb5.woff2 │ ├── fa-regular-400.73cf49a2232c06c920b7a34e36bfb58c.woff │ ├── fa-regular-400.a0e3ac82940c1998c5977fd4bc1f5ef6.ttf │ └── fa-solid-900.55eb2a60e8181f0e68b558c991973bf0.woff2 ├── postcss.config.js ├── debug.log ├── package.json ├── LICENSE ├── README.md └── webpack.config.js /src/scss/pages/_contact.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/scss/pages/_home.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/scss/themes/_theme.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/scss/pages/_styleguide.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/scss/components/_orderitem.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env"] 3 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | *.DS_Store 4 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /dist/images/Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/dist/images/Logo.png -------------------------------------------------------------------------------- /dist/images/bag-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/dist/images/bag-2.jpg -------------------------------------------------------------------------------- /dist/images/watch.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/dist/images/watch.jpg -------------------------------------------------------------------------------- /dist/images/banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/dist/images/banner.jpg -------------------------------------------------------------------------------- /dist/images/brand/01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/dist/images/brand/01.png -------------------------------------------------------------------------------- /dist/images/brand/02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/dist/images/brand/02.png -------------------------------------------------------------------------------- /dist/images/brand/03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/dist/images/brand/03.png -------------------------------------------------------------------------------- /dist/images/brand/04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/dist/images/brand/04.png -------------------------------------------------------------------------------- /dist/images/brand/05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/dist/images/brand/05.png -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('autoprefixer') 4 | ] 5 | }; -------------------------------------------------------------------------------- /src/scss/abstracts/_functions.scss: -------------------------------------------------------------------------------- 1 | @mixin animate($value) { 2 | transition: all $value ease-out; 3 | } -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/utilities/_clearfix.scss: -------------------------------------------------------------------------------- 1 | .clearfix { 2 | @include clearfix(); 3 | } 4 | -------------------------------------------------------------------------------- /dist/images/logo/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/dist/images/logo/logo.png -------------------------------------------------------------------------------- /dist/images/logo/white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/dist/images/logo/white.png -------------------------------------------------------------------------------- /dist/images/nike-shoe.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/dist/images/nike-shoe.jpg -------------------------------------------------------------------------------- /dist/images/product/01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/dist/images/product/01.jpg -------------------------------------------------------------------------------- /dist/images/product/02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/dist/images/product/02.jpg -------------------------------------------------------------------------------- /dist/images/product/03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/dist/images/product/03.jpg -------------------------------------------------------------------------------- /dist/images/product/04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/dist/images/product/04.jpg -------------------------------------------------------------------------------- /dist/images/product/05.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/dist/images/product/05.jpg -------------------------------------------------------------------------------- /dist/images/product/06.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/dist/images/product/06.jpg -------------------------------------------------------------------------------- /dist/images/product/07.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/dist/images/product/07.jpg -------------------------------------------------------------------------------- /dist/images/product/08.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/dist/images/product/08.jpg -------------------------------------------------------------------------------- /dist/images/product/09.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/dist/images/product/09.jpg -------------------------------------------------------------------------------- /dist/images/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/dist/images/screenshot.png -------------------------------------------------------------------------------- /dist/images/white-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/dist/images/white-logo.png -------------------------------------------------------------------------------- /dist/images/black-camera.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/dist/images/black-camera.jpg -------------------------------------------------------------------------------- /dist/images/digital-shoe.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/dist/images/digital-shoe.jpg -------------------------------------------------------------------------------- /dist/images/green-small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/dist/images/green-small.jpg -------------------------------------------------------------------------------- /dist/images/green-tissue.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/dist/images/green-tissue.jpg -------------------------------------------------------------------------------- /dist/images/grocery-item.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/dist/images/grocery-item.jpg -------------------------------------------------------------------------------- /dist/images/categorys/drone.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/dist/images/categorys/drone.jpg -------------------------------------------------------------------------------- /dist/images/feature/tissue.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/dist/images/feature/tissue.jpg -------------------------------------------------------------------------------- /dist/images/categorys/chosma.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/dist/images/categorys/chosma.jpg -------------------------------------------------------------------------------- /dist/images/categorys/iphone.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/dist/images/categorys/iphone.jpg -------------------------------------------------------------------------------- /dist/images/categorys/jumper.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/dist/images/categorys/jumper.jpg -------------------------------------------------------------------------------- /dist/images/feature/headphone.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/dist/images/feature/headphone.jpg -------------------------------------------------------------------------------- /dist/images/feature/medicine.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/dist/images/feature/medicine.jpg -------------------------------------------------------------------------------- /debug.log: -------------------------------------------------------------------------------- 1 | [0112/180743.102:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3) 2 | -------------------------------------------------------------------------------- /dist/images/categorys/headphone.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/dist/images/categorys/headphone.jpg -------------------------------------------------------------------------------- /dist/images/categorys/wool-shoe.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/dist/images/categorys/wool-shoe.jpg -------------------------------------------------------------------------------- /dist/images/categorys/electronics.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/dist/images/categorys/electronics.jpg -------------------------------------------------------------------------------- /dist/images/categorys/tree dasher.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/dist/images/categorys/tree dasher.jpg -------------------------------------------------------------------------------- /dist/images/feature/multi-products.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/dist/images/feature/multi-products.jpg -------------------------------------------------------------------------------- /dist/images/product-deatils/1-big-mage.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/dist/images/product-deatils/1-big-mage.jpg -------------------------------------------------------------------------------- /dist/images/product-deatils/2-big-image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/dist/images/product-deatils/2-big-image.jpg -------------------------------------------------------------------------------- /dist/images/product-deatils/3-big-image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/dist/images/product-deatils/3-big-image.jpg -------------------------------------------------------------------------------- /dist/images/product-deatils/4-big-image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/dist/images/product-deatils/4-big-image.jpg -------------------------------------------------------------------------------- /dist/images/product-deatils/1-small-image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/dist/images/product-deatils/1-small-image.jpg -------------------------------------------------------------------------------- /dist/images/product-deatils/2-small-image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/dist/images/product-deatils/2-small-image.jpg -------------------------------------------------------------------------------- /dist/images/product-deatils/3 Small Image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/dist/images/product-deatils/3 Small Image.jpg -------------------------------------------------------------------------------- /dist/images/product-deatils/4-small-image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/dist/images/product-deatils/4-small-image.jpg -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/_media.scss: -------------------------------------------------------------------------------- 1 | .media { 2 | display: flex; 3 | align-items: flex-start; 4 | } 5 | 6 | .media-body { 7 | flex: 1; 8 | } 9 | -------------------------------------------------------------------------------- /src/scss/vendors/fontawesome/webfonts/fa-solid-900.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/src/scss/vendors/fontawesome/webfonts/fa-solid-900.eot -------------------------------------------------------------------------------- /src/scss/vendors/fontawesome/webfonts/fa-solid-900.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/src/scss/vendors/fontawesome/webfonts/fa-solid-900.ttf -------------------------------------------------------------------------------- /src/scss/vendors/fontawesome/webfonts/fa-brands-400.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/src/scss/vendors/fontawesome/webfonts/fa-brands-400.eot -------------------------------------------------------------------------------- /src/scss/vendors/fontawesome/webfonts/fa-brands-400.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/src/scss/vendors/fontawesome/webfonts/fa-brands-400.ttf -------------------------------------------------------------------------------- /src/scss/vendors/fontawesome/webfonts/fa-brands-400.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/src/scss/vendors/fontawesome/webfonts/fa-brands-400.woff -------------------------------------------------------------------------------- /src/scss/vendors/fontawesome/webfonts/fa-regular-400.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/src/scss/vendors/fontawesome/webfonts/fa-regular-400.eot -------------------------------------------------------------------------------- /src/scss/vendors/fontawesome/webfonts/fa-regular-400.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/src/scss/vendors/fontawesome/webfonts/fa-regular-400.ttf -------------------------------------------------------------------------------- /src/scss/vendors/fontawesome/webfonts/fa-solid-900.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/src/scss/vendors/fontawesome/webfonts/fa-solid-900.woff -------------------------------------------------------------------------------- /src/scss/vendors/fontawesome/webfonts/fa-solid-900.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/src/scss/vendors/fontawesome/webfonts/fa-solid-900.woff2 -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/mixins/_clearfix.scss: -------------------------------------------------------------------------------- 1 | @mixin clearfix() { 2 | &::after { 3 | display: block; 4 | clear: both; 5 | content: ""; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/scss/vendors/fontawesome/webfonts/fa-brands-400.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/src/scss/vendors/fontawesome/webfonts/fa-brands-400.woff2 -------------------------------------------------------------------------------- /src/scss/vendors/fontawesome/webfonts/fa-regular-400.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/src/scss/vendors/fontawesome/webfonts/fa-regular-400.woff -------------------------------------------------------------------------------- /src/scss/vendors/fontawesome/webfonts/fa-regular-400.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/src/scss/vendors/fontawesome/webfonts/fa-regular-400.woff2 -------------------------------------------------------------------------------- /dist/fonts/fa-brands-400.57dcda6f368ea90179f75cbdae96c263.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/dist/fonts/fa-brands-400.57dcda6f368ea90179f75cbdae96c263.eot -------------------------------------------------------------------------------- /dist/fonts/fa-brands-400.9ec698d1a597bff5df337094b71ddaaf.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/dist/fonts/fa-brands-400.9ec698d1a597bff5df337094b71ddaaf.ttf -------------------------------------------------------------------------------- /dist/fonts/fa-solid-900.75f38a159982b6bd1704891332d95fa7.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/dist/fonts/fa-solid-900.75f38a159982b6bd1704891332d95fa7.ttf -------------------------------------------------------------------------------- /dist/fonts/fa-solid-900.89e02bae13c9131c7468b1e729339ac1.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/dist/fonts/fa-solid-900.89e02bae13c9131c7468b1e729339ac1.eot -------------------------------------------------------------------------------- /dist/fonts/fa-solid-900.cdfec5cf5e9840889790bcf2c4042583.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/dist/fonts/fa-solid-900.cdfec5cf5e9840889790bcf2c4042583.woff -------------------------------------------------------------------------------- /dist/fonts/fa-brands-400.067595ad77ecc0db9c81c8905a7eef32.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/dist/fonts/fa-brands-400.067595ad77ecc0db9c81c8905a7eef32.woff2 -------------------------------------------------------------------------------- /dist/fonts/fa-brands-400.b564da88bbf0c4aa446fa19653713cd1.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/dist/fonts/fa-brands-400.b564da88bbf0c4aa446fa19653713cd1.woff -------------------------------------------------------------------------------- /dist/fonts/fa-regular-400.3351f435b3c9037fd88aeb04dc1e43bc.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/dist/fonts/fa-regular-400.3351f435b3c9037fd88aeb04dc1e43bc.eot -------------------------------------------------------------------------------- /dist/fonts/fa-regular-400.4165c2688309cbfb1b877caf8f75afb5.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/dist/fonts/fa-regular-400.4165c2688309cbfb1b877caf8f75afb5.woff2 -------------------------------------------------------------------------------- /dist/fonts/fa-regular-400.73cf49a2232c06c920b7a34e36bfb58c.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/dist/fonts/fa-regular-400.73cf49a2232c06c920b7a34e36bfb58c.woff -------------------------------------------------------------------------------- /dist/fonts/fa-regular-400.a0e3ac82940c1998c5977fd4bc1f5ef6.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/dist/fonts/fa-regular-400.a0e3ac82940c1998c5977fd4bc1f5ef6.ttf -------------------------------------------------------------------------------- /dist/fonts/fa-solid-900.55eb2a60e8181f0e68b558c991973bf0.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/templatecookie/olog-html/HEAD/dist/fonts/fa-solid-900.55eb2a60e8181f0e68b558c991973bf0.woff2 -------------------------------------------------------------------------------- /src/scss/base/_typography.scss: -------------------------------------------------------------------------------- 1 | // Font Import 2 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap'); 3 | 4 | $font: 'Poppins', sans-serif; 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/utilities/_overflow.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable declaration-no-important 2 | 3 | @each $value in $overflows { 4 | .overflow-#{$value} { overflow: $value !important; } 5 | } 6 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/utilities/_interactions.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable declaration-no-important 2 | 3 | @each $value in $user-selects { 4 | .user-select-#{$value} { user-select: $value !important; } 5 | } 6 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/mixins/_size.scss: -------------------------------------------------------------------------------- 1 | // Sizing shortcuts 2 | 3 | @mixin size($width, $height: $width) { 4 | width: $width; 5 | height: $height; 6 | @include deprecate("`size()`", "v4.3.0", "v5"); 7 | } 8 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/utilities/_screenreaders.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Screenreaders 3 | // 4 | 5 | .sr-only { 6 | @include sr-only(); 7 | } 8 | 9 | .sr-only-focusable { 10 | @include sr-only-focusable(); 11 | } 12 | -------------------------------------------------------------------------------- /src/scss/abstracts/_variables.scss: -------------------------------------------------------------------------------- 1 | $malachite: #19D43F; 2 | $black: #1A2224; 3 | $white: white; 4 | $gallery: #F6F8FA; 5 | $lightBlack: #989BA7; 6 | $yellow: #EBCE3C; 7 | $blue: #335AFF; 8 | $gray: #EFEFEF; 9 | $gold:#FFA023; 10 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/mixins/_lists.scss: -------------------------------------------------------------------------------- 1 | // Lists 2 | 3 | // Unstyled keeps list items block level, just removes default browser padding and list-style 4 | @mixin list-unstyled() { 5 | padding-left: 0; 6 | list-style: none; 7 | } 8 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/mixins/_text-truncate.scss: -------------------------------------------------------------------------------- 1 | // Text truncate 2 | // Requires inline-block or block for proper styling 3 | 4 | @mixin text-truncate() { 5 | overflow: hidden; 6 | text-overflow: ellipsis; 7 | white-space: nowrap; 8 | } 9 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/mixins/_resize.scss: -------------------------------------------------------------------------------- 1 | // Resize anything 2 | 3 | @mixin resizable($direction) { 4 | overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible` 5 | resize: $direction; // Options: horizontal, vertical, both 6 | } 7 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/mixins/_visibility.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable declaration-no-important 2 | 3 | // Visibility 4 | 5 | @mixin invisible($visibility) { 6 | visibility: $visibility !important; 7 | @include deprecate("`invisible()`", "v4.3.0", "v5"); 8 | } 9 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/utilities/_visibility.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable declaration-no-important 2 | 3 | // 4 | // Visibility utilities 5 | // 6 | 7 | .visible { 8 | visibility: visible !important; 9 | } 10 | 11 | .invisible { 12 | visibility: hidden !important; 13 | } 14 | -------------------------------------------------------------------------------- /dist/images/account/facebook.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/utilities/_shadows.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable declaration-no-important 2 | 3 | .shadow-sm { box-shadow: $box-shadow-sm !important; } 4 | .shadow { box-shadow: $box-shadow !important; } 5 | .shadow-lg { box-shadow: $box-shadow-lg !important; } 6 | .shadow-none { box-shadow: none !important; } 7 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/mixins/_alert.scss: -------------------------------------------------------------------------------- 1 | @mixin alert-variant($background, $border, $color) { 2 | color: $color; 3 | @include gradient-bg($background); 4 | border-color: $border; 5 | 6 | hr { 7 | border-top-color: darken($border, 5%); 8 | } 9 | 10 | .alert-link { 11 | color: darken($color, 10%); 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/_transitions.scss: -------------------------------------------------------------------------------- 1 | .fade { 2 | @include transition($transition-fade); 3 | 4 | &:not(.show) { 5 | opacity: 0; 6 | } 7 | } 8 | 9 | .collapse { 10 | &:not(.show) { 11 | display: none; 12 | } 13 | } 14 | 15 | .collapsing { 16 | position: relative; 17 | height: 0; 18 | overflow: hidden; 19 | @include transition($transition-collapse); 20 | } 21 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/mixins/_text-hide.scss: -------------------------------------------------------------------------------- 1 | // CSS image replacement 2 | @mixin text-hide($ignore-warning: false) { 3 | // stylelint-disable-next-line font-family-no-missing-generic-family-keyword 4 | font: 0/0 a; 5 | color: transparent; 6 | text-shadow: none; 7 | background-color: transparent; 8 | border: 0; 9 | 10 | @include deprecate("`text-hide()`", "v4.1.0", "v5", $ignore-warning); 11 | } 12 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/mixins/_badge.scss: -------------------------------------------------------------------------------- 1 | @mixin badge-variant($bg) { 2 | color: color-yiq($bg); 3 | background-color: $bg; 4 | 5 | @at-root a#{&} { 6 | @include hover-focus() { 7 | color: color-yiq($bg); 8 | background-color: darken($bg, 10%); 9 | } 10 | 11 | &:focus, 12 | &.focus { 13 | outline: 0; 14 | box-shadow: 0 0 0 $badge-focus-width rgba($bg, .5); 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/mixins/_nav-divider.scss: -------------------------------------------------------------------------------- 1 | // Horizontal dividers 2 | // 3 | // Dividers (basically an hr) within dropdowns and nav lists 4 | 5 | @mixin nav-divider($color: $nav-divider-color, $margin-y: $nav-divider-margin-y, $ignore-warning: false) { 6 | height: 0; 7 | margin: $margin-y 0; 8 | overflow: hidden; 9 | border-top: 1px solid $color; 10 | @include deprecate("The `nav-divider()` mixin", "v4.4.0", "v5", $ignore-warning); 11 | } 12 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/utilities/_float.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable declaration-no-important 2 | 3 | @each $breakpoint in map-keys($grid-breakpoints) { 4 | @include media-breakpoint-up($breakpoint) { 5 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints); 6 | 7 | .float#{$infix}-left { float: left !important; } 8 | .float#{$infix}-right { float: right !important; } 9 | .float#{$infix}-none { float: none !important; } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/utilities/_align.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable declaration-no-important 2 | 3 | .align-baseline { vertical-align: baseline !important; } // Browser default 4 | .align-top { vertical-align: top !important; } 5 | .align-middle { vertical-align: middle !important; } 6 | .align-bottom { vertical-align: bottom !important; } 7 | .align-text-bottom { vertical-align: text-bottom !important; } 8 | .align-text-top { vertical-align: text-top !important; } 9 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/mixins/_float.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable declaration-no-important 2 | 3 | @mixin float-left() { 4 | float: left !important; 5 | @include deprecate("The `float-left` mixin", "v4.3.0", "v5"); 6 | } 7 | @mixin float-right() { 8 | float: right !important; 9 | @include deprecate("The `float-right` mixin", "v4.3.0", "v5"); 10 | } 11 | @mixin float-none() { 12 | float: none !important; 13 | @include deprecate("The `float-none` mixin", "v4.3.0", "v5"); 14 | } 15 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/bootstrap-reboot.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap Reboot v4.5.3 (https://getbootstrap.com/) 3 | * Copyright 2011-2020 The Bootstrap Authors 4 | * Copyright 2011-2020 Twitter, Inc. 5 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) 6 | * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md) 7 | */ 8 | 9 | @import "functions"; 10 | @import "variables"; 11 | @import "mixins"; 12 | @import "reboot"; 13 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/_jumbotron.scss: -------------------------------------------------------------------------------- 1 | .jumbotron { 2 | padding: $jumbotron-padding ($jumbotron-padding / 2); 3 | margin-bottom: $jumbotron-padding; 4 | color: $jumbotron-color; 5 | background-color: $jumbotron-bg; 6 | @include border-radius($border-radius-lg); 7 | 8 | @include media-breakpoint-up(sm) { 9 | padding: ($jumbotron-padding * 2) $jumbotron-padding; 10 | } 11 | } 12 | 13 | .jumbotron-fluid { 14 | padding-right: 0; 15 | padding-left: 0; 16 | @include border-radius(0); 17 | } 18 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/utilities/_background.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable declaration-no-important 2 | 3 | @each $color, $value in $theme-colors { 4 | @include bg-variant(".bg-#{$color}", $value, true); 5 | } 6 | 7 | @if $enable-gradients { 8 | @each $color, $value in $theme-colors { 9 | @include bg-gradient-variant(".bg-gradient-#{$color}", $value, true); 10 | } 11 | } 12 | 13 | .bg-white { 14 | background-color: $white !important; 15 | } 16 | 17 | .bg-transparent { 18 | background-color: transparent !important; 19 | } 20 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/utilities/_stretched-link.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Stretched link 3 | // 4 | 5 | .stretched-link { 6 | &::after { 7 | position: absolute; 8 | top: 0; 9 | right: 0; 10 | bottom: 0; 11 | left: 0; 12 | z-index: 1; 13 | // Just in case `pointer-events: none` is set on a parent 14 | pointer-events: auto; 15 | content: ""; 16 | // IE10 bugfix, see https://stackoverflow.com/questions/16947967/ie10-hover-pseudo-class-doesnt-work-without-background-color 17 | background-color: rgba(0, 0, 0, 0); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/mixins/_list-group.scss: -------------------------------------------------------------------------------- 1 | // List Groups 2 | 3 | @mixin list-group-item-variant($state, $background, $color) { 4 | .list-group-item-#{$state} { 5 | color: $color; 6 | background-color: $background; 7 | 8 | &.list-group-item-action { 9 | @include hover-focus() { 10 | color: $color; 11 | background-color: darken($background, 5%); 12 | } 13 | 14 | &.active { 15 | color: $white; 16 | background-color: $color; 17 | border-color: $color; 18 | } 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/mixins/_text-emphasis.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable declaration-no-important 2 | 3 | // Typography 4 | 5 | @mixin text-emphasis-variant($parent, $color, $ignore-warning: false) { 6 | #{$parent} { 7 | color: $color !important; 8 | } 9 | @if $emphasized-link-hover-darken-percentage != 0 { 10 | a#{$parent} { 11 | @include hover-focus() { 12 | color: darken($color, $emphasized-link-hover-darken-percentage) !important; 13 | } 14 | } 15 | } 16 | @include deprecate("`text-emphasis-variant()`", "v4.4.0", "v5", $ignore-warning); 17 | } 18 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/mixins/_reset-text.scss: -------------------------------------------------------------------------------- 1 | @mixin reset-text() { 2 | font-family: $font-family-base; 3 | // We deliberately do NOT reset font-size or word-wrap. 4 | font-style: normal; 5 | font-weight: $font-weight-normal; 6 | line-height: $line-height-base; 7 | text-align: left; // Fallback for where `start` is not supported 8 | text-align: start; 9 | text-decoration: none; 10 | text-shadow: none; 11 | text-transform: none; 12 | letter-spacing: normal; 13 | word-break: normal; 14 | word-spacing: normal; 15 | white-space: normal; 16 | line-break: auto; 17 | } 18 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/mixins/_pagination.scss: -------------------------------------------------------------------------------- 1 | // Pagination 2 | 3 | @mixin pagination-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) { 4 | .page-link { 5 | padding: $padding-y $padding-x; 6 | @include font-size($font-size); 7 | line-height: $line-height; 8 | } 9 | 10 | .page-item { 11 | &:first-child { 12 | .page-link { 13 | @include border-left-radius($border-radius); 14 | } 15 | } 16 | &:last-child { 17 | .page-link { 18 | @include border-right-radius($border-radius); 19 | } 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/scss/vendors/plugin/css/wan-spinner.css: -------------------------------------------------------------------------------- 1 | /*********** spinner start *************/ 2 | 3 | .wan-spinner { 4 | border: 1px solid #dddddd; 5 | display: inline-block; 6 | } 7 | 8 | .wan-spinner .minus, 9 | .wan-spinner .plus, 10 | .wan-spinner input { 11 | float: left; 12 | line-height: 1em; 13 | text-align: center; 14 | } 15 | 16 | .wan-spinner input { 17 | border: none; 18 | margin: 0; 19 | width: 40px; 20 | } 21 | 22 | .wan-spinner .minus, 23 | .wan-spinner .plus { 24 | color: #333333; 25 | cursor: pointer; 26 | text-decoration: none; 27 | } 28 | 29 | 30 | /*********** spinner end *************/ 31 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/utilities/_sizing.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable declaration-no-important 2 | 3 | // Width and height 4 | 5 | @each $prop, $abbrev in (width: w, height: h) { 6 | @each $size, $length in $sizes { 7 | .#{$abbrev}-#{$size} { #{$prop}: $length !important; } 8 | } 9 | } 10 | 11 | .mw-100 { max-width: 100% !important; } 12 | .mh-100 { max-height: 100% !important; } 13 | 14 | // Viewport additional helpers 15 | 16 | .min-vw-100 { min-width: 100vw !important; } 17 | .min-vh-100 { min-height: 100vh !important; } 18 | 19 | .vw-100 { width: 100vw !important; } 20 | .vh-100 { height: 100vh !important; } 21 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/_utilities.scss: -------------------------------------------------------------------------------- 1 | @import "utilities/align"; 2 | @import "utilities/background"; 3 | @import "utilities/borders"; 4 | @import "utilities/clearfix"; 5 | @import "utilities/display"; 6 | @import "utilities/embed"; 7 | @import "utilities/flex"; 8 | @import "utilities/float"; 9 | @import "utilities/interactions"; 10 | @import "utilities/overflow"; 11 | @import "utilities/position"; 12 | @import "utilities/screenreaders"; 13 | @import "utilities/shadows"; 14 | @import "utilities/sizing"; 15 | @import "utilities/spacing"; 16 | @import "utilities/stretched-link"; 17 | @import "utilities/text"; 18 | @import "utilities/visibility"; 19 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/mixins/_box-shadow.scss: -------------------------------------------------------------------------------- 1 | @mixin box-shadow($shadow...) { 2 | @if $enable-shadows { 3 | $result: (); 4 | 5 | @if (length($shadow) == 1) { 6 | // We can pass `@include box-shadow(none);` 7 | $result: $shadow; 8 | } @else { 9 | // Filter to avoid invalid properties for example `box-shadow: none, 1px 1px black;` 10 | @for $i from 1 through length($shadow) { 11 | @if nth($shadow, $i) != "none" { 12 | $result: append($result, nth($shadow, $i), "comma"); 13 | } 14 | } 15 | } 16 | @if (length($result) > 0) { 17 | box-shadow: $result; 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/utilities/_position.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable declaration-no-important 2 | 3 | // Common values 4 | @each $position in $positions { 5 | .position-#{$position} { position: $position !important; } 6 | } 7 | 8 | // Shorthand 9 | 10 | .fixed-top { 11 | position: fixed; 12 | top: 0; 13 | right: 0; 14 | left: 0; 15 | z-index: $zindex-fixed; 16 | } 17 | 18 | .fixed-bottom { 19 | position: fixed; 20 | right: 0; 21 | bottom: 0; 22 | left: 0; 23 | z-index: $zindex-fixed; 24 | } 25 | 26 | .sticky-top { 27 | @supports (position: sticky) { 28 | position: sticky; 29 | top: 0; 30 | z-index: $zindex-sticky; 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/utilities/_display.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable declaration-no-important 2 | 3 | // 4 | // Utilities for common `display` values 5 | // 6 | 7 | @each $breakpoint in map-keys($grid-breakpoints) { 8 | @include media-breakpoint-up($breakpoint) { 9 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints); 10 | 11 | @each $value in $displays { 12 | .d#{$infix}-#{$value} { display: $value !important; } 13 | } 14 | } 15 | } 16 | 17 | 18 | // 19 | // Utilities for toggling `display` in print 20 | // 21 | 22 | @media print { 23 | @each $value in $displays { 24 | .d-print-#{$value} { display: $value !important; } 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/mixins/_deprecate.scss: -------------------------------------------------------------------------------- 1 | // Deprecate mixin 2 | // 3 | // This mixin can be used to deprecate mixins or functions. 4 | // `$enable-deprecation-messages` is a global variable, `$ignore-warning` is a variable that can be passed to 5 | // some deprecated mixins to suppress the warning (for example if the mixin is still be used in the current version of Bootstrap) 6 | @mixin deprecate($name, $deprecate-version, $remove-version, $ignore-warning: false) { 7 | @if ($enable-deprecation-messages != false and $ignore-warning != true) { 8 | @warn "#{$name} has been deprecated as of #{$deprecate-version}. It will be removed entirely in #{$remove-version}."; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /src/scss/pages/_wishlist.scss: -------------------------------------------------------------------------------- 1 | .wishlist-area{ 2 | padding-top: 50px; 3 | padding-bottom: 100px; 4 | .dashboard-nav{ 5 | margin-bottom: 100px; 6 | } 7 | } 8 | // large devices 992px - 1169px 9 | @media (min-width: 992px) and (max-width: 1200px) { 10 | 11 | } 12 | 13 | // Medium devices 768px - 991px 14 | @media (min-width: 768px) and (max-width: 991px) { 15 | } 16 | 17 | // Small devices 575px - 767px 18 | @media (min-width: 575px) and (max-width: 767px) { 19 | } 20 | 21 | // Small devices 420px - 574px 22 | @media only screen and (min-width: 420px) and (max-width: 574px) { 23 | 24 | } 25 | 26 | // extra Small devices 420px 27 | @media (max-width: 420px) { 28 | 29 | } 30 | -------------------------------------------------------------------------------- /dist/images/account/twitter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/bootstrap-grid.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap Grid v4.5.3 (https://getbootstrap.com/) 3 | * Copyright 2011-2020 The Bootstrap Authors 4 | * Copyright 2011-2020 Twitter, Inc. 5 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) 6 | */ 7 | 8 | html { 9 | box-sizing: border-box; 10 | -ms-overflow-style: scrollbar; 11 | } 12 | 13 | *, 14 | *::before, 15 | *::after { 16 | box-sizing: inherit; 17 | } 18 | 19 | @import "functions"; 20 | @import "variables"; 21 | 22 | @import "mixins/breakpoints"; 23 | @import "mixins/grid-framework"; 24 | @import "mixins/grid"; 25 | 26 | @import "grid"; 27 | @import "utilities/display"; 28 | @import "utilities/flex"; 29 | @import "utilities/spacing"; 30 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/_root.scss: -------------------------------------------------------------------------------- 1 | // Do not forget to update getting-started/theming.md! 2 | :root { 3 | // Custom variable values only support SassScript inside `#{}`. 4 | @each $color, $value in $colors { 5 | --#{$color}: #{$value}; 6 | } 7 | 8 | @each $color, $value in $theme-colors { 9 | --#{$color}: #{$value}; 10 | } 11 | 12 | @each $bp, $value in $grid-breakpoints { 13 | --breakpoint-#{$bp}: #{$value}; 14 | } 15 | 16 | // Use `inspect` for lists so that quoted items keep the quotes. 17 | // See https://github.com/sass/sass/issues/2383#issuecomment-336349172 18 | --font-family-sans-serif: #{inspect($font-family-sans-serif)}; 19 | --font-family-monospace: #{inspect($font-family-monospace)}; 20 | } 21 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/mixins/_transition.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable property-disallowed-list 2 | @mixin transition($transition...) { 3 | @if length($transition) == 0 { 4 | $transition: $transition-base; 5 | } 6 | 7 | @if length($transition) > 1 { 8 | @each $value in $transition { 9 | @if $value == null or $value == none { 10 | @warn "The keyword 'none' or 'null' must be used as a single argument."; 11 | } 12 | } 13 | } 14 | 15 | @if $enable-transitions { 16 | @if nth($transition, 1) != null { 17 | transition: $transition; 18 | } 19 | 20 | @if $enable-prefers-reduced-motion-media-query and nth($transition, 1) != null and nth($transition, 1) != none { 21 | @media (prefers-reduced-motion: reduce) { 22 | transition: none; 23 | } 24 | } 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/mixins/_background-variant.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable declaration-no-important 2 | 3 | // Contextual backgrounds 4 | 5 | @mixin bg-variant($parent, $color, $ignore-warning: false) { 6 | #{$parent} { 7 | background-color: $color !important; 8 | } 9 | a#{$parent}, 10 | button#{$parent} { 11 | @include hover-focus() { 12 | background-color: darken($color, 10%) !important; 13 | } 14 | } 15 | @include deprecate("The `bg-variant` mixin", "v4.4.0", "v5", $ignore-warning); 16 | } 17 | 18 | @mixin bg-gradient-variant($parent, $color, $ignore-warning: false) { 19 | #{$parent} { 20 | background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important; 21 | } 22 | @include deprecate("The `bg-gradient-variant` mixin", "v4.5.0", "v5", $ignore-warning); 23 | } 24 | -------------------------------------------------------------------------------- /dist/images/account/search.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/images/product/cart.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/mixins/_hover.scss: -------------------------------------------------------------------------------- 1 | // Hover mixin and `$enable-hover-media-query` are deprecated. 2 | // 3 | // Originally added during our alphas and maintained during betas, this mixin was 4 | // designed to prevent `:hover` stickiness on iOS-an issue where hover styles 5 | // would persist after initial touch. 6 | // 7 | // For backward compatibility, we've kept these mixins and updated them to 8 | // always return their regular pseudo-classes instead of a shimmed media query. 9 | // 10 | // Issue: https://github.com/twbs/bootstrap/issues/25195 11 | 12 | @mixin hover() { 13 | &:hover { @content; } 14 | } 15 | 16 | @mixin hover-focus() { 17 | &:hover, 18 | &:focus { 19 | @content; 20 | } 21 | } 22 | 23 | @mixin plain-hover-focus() { 24 | &, 25 | &:hover, 26 | &:focus { 27 | @content; 28 | } 29 | } 30 | 31 | @mixin hover-focus-active() { 32 | &:hover, 33 | &:focus, 34 | &:active { 35 | @content; 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/mixins/_table-row.scss: -------------------------------------------------------------------------------- 1 | // Tables 2 | 3 | @mixin table-row-variant($state, $background, $border: null) { 4 | // Exact selectors below required to override `.table-striped` and prevent 5 | // inheritance to nested tables. 6 | .table-#{$state} { 7 | &, 8 | > th, 9 | > td { 10 | background-color: $background; 11 | } 12 | 13 | @if $border != null { 14 | th, 15 | td, 16 | thead th, 17 | tbody + tbody { 18 | border-color: $border; 19 | } 20 | } 21 | } 22 | 23 | // Hover states for `.table-hover` 24 | // Note: this is not available for cells or rows within `thead` or `tfoot`. 25 | .table-hover { 26 | $hover-background: darken($background, 5%); 27 | 28 | .table-#{$state} { 29 | @include hover() { 30 | background-color: $hover-background; 31 | 32 | > td, 33 | > th { 34 | background-color: $hover-background; 35 | } 36 | } 37 | } 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/mixins/_screen-reader.scss: -------------------------------------------------------------------------------- 1 | // Only display content to screen readers 2 | // 3 | // See: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/ 4 | // See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/ 5 | 6 | @mixin sr-only() { 7 | position: absolute; 8 | width: 1px; 9 | height: 1px; 10 | padding: 0; 11 | margin: -1px; // Fix for https://github.com/twbs/bootstrap/issues/25686 12 | overflow: hidden; 13 | clip: rect(0, 0, 0, 0); 14 | white-space: nowrap; 15 | border: 0; 16 | } 17 | 18 | // Use in conjunction with .sr-only to only display content when it's focused. 19 | // 20 | // Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 21 | // 22 | // Credit: HTML5 Boilerplate 23 | 24 | @mixin sr-only-focusable() { 25 | &:active, 26 | &:focus { 27 | position: static; 28 | width: auto; 29 | height: auto; 30 | overflow: visible; 31 | clip: auto; 32 | white-space: normal; 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webpack-setup", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "webpack --mode development", 8 | "watch": "webpack --mode development --watch", 9 | "build": "webpack -p" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "@babel/core": "^7.6.4", 16 | "@babel/preset-env": "^7.6.3", 17 | "autoprefixer": "^9.7.1", 18 | "babel-loader": "^8.0.6", 19 | "css-loader": "^3.2.0", 20 | "file-loader": "^4.2.0", 21 | "mini-css-extract-plugin": "^0.8.0", 22 | "postcss-loader": "^3.0.0", 23 | "purgecss-webpack-plugin": "^1.6.0", 24 | "sass-loader": "^8.0.0", 25 | "webpack": "^4.41.2", 26 | "webpack-cli": "^3.3.9" 27 | }, 28 | "browserslist": [ 29 | "defaults", 30 | "not ie < 11", 31 | "last 2 versions", 32 | "> 1%", 33 | "iOS 7", 34 | "last 3 iOS versions" 35 | ], 36 | "dependencies": { 37 | "node-sass": "^4.14.1" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /dist/images/company-image/visa.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/utilities/_embed.scss: -------------------------------------------------------------------------------- 1 | // Credit: Nicolas Gallagher and SUIT CSS. 2 | 3 | .embed-responsive { 4 | position: relative; 5 | display: block; 6 | width: 100%; 7 | padding: 0; 8 | overflow: hidden; 9 | 10 | &::before { 11 | display: block; 12 | content: ""; 13 | } 14 | 15 | .embed-responsive-item, 16 | iframe, 17 | embed, 18 | object, 19 | video { 20 | position: absolute; 21 | top: 0; 22 | bottom: 0; 23 | left: 0; 24 | width: 100%; 25 | height: 100%; 26 | border: 0; 27 | } 28 | } 29 | 30 | @each $embed-responsive-aspect-ratio in $embed-responsive-aspect-ratios { 31 | $embed-responsive-aspect-ratio-x: nth($embed-responsive-aspect-ratio, 1); 32 | $embed-responsive-aspect-ratio-y: nth($embed-responsive-aspect-ratio, 2); 33 | 34 | .embed-responsive-#{$embed-responsive-aspect-ratio-x}by#{$embed-responsive-aspect-ratio-y} { 35 | &::before { 36 | padding-top: percentage($embed-responsive-aspect-ratio-y / $embed-responsive-aspect-ratio-x); 37 | } 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/scss/layout/_brand.scss: -------------------------------------------------------------------------------- 1 | .brand-area{ 2 | padding-top: 30px; 3 | &-image{ 4 | img{ 5 | cursor: pointer; 6 | filter: grayscale(100%); 7 | opacity: 0.2; 8 | transition: 0.3s all linear; 9 | margin: auto; 10 | &:hover{ 11 | filter: grayscale(0%); 12 | opacity: 1; 13 | } 14 | } 15 | } 16 | } 17 | // Responsive 18 | // large devices 992px - 1169px 19 | @media (min-width: 992px) and (max-width: 1200px) { 20 | 21 | } 22 | 23 | // Medium devices 768px - 991px 24 | @media (min-width: 768px) and (max-width: 991px) { 25 | } 26 | 27 | // Small devices 575px - 767px 28 | @media (min-width: 575px) and (max-width: 767px) { 29 | .brand-area{ 30 | &-image{ 31 | margin-bottom: 10px; 32 | } 33 | } 34 | } 35 | 36 | // Small devices 420px - 574px 37 | @media only screen and (min-width: 420px) and (max-width: 574px) { 38 | 39 | } 40 | 41 | // extra Small devices 420px 42 | @media (max-width: 420px) { 43 | 44 | } 45 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Echotemplate.com 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/_close.scss: -------------------------------------------------------------------------------- 1 | .close { 2 | float: right; 3 | @include font-size($close-font-size); 4 | font-weight: $close-font-weight; 5 | line-height: 1; 6 | color: $close-color; 7 | text-shadow: $close-text-shadow; 8 | opacity: .5; 9 | 10 | // Override 's hover style 11 | @include hover() { 12 | color: $close-color; 13 | text-decoration: none; 14 | } 15 | 16 | &:not(:disabled):not(.disabled) { 17 | @include hover-focus() { 18 | opacity: .75; 19 | } 20 | } 21 | } 22 | 23 | // Additional properties for button version 24 | // iOS requires the button element instead of an anchor tag. 25 | // If you want the anchor version, it requires `href="#"`. 26 | // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile 27 | 28 | // stylelint-disable-next-line selector-no-qualifying-type 29 | button.close { 30 | padding: 0; 31 | background-color: transparent; 32 | border: 0; 33 | } 34 | 35 | // Future-proof disabling of clicks on `` elements 36 | 37 | // stylelint-disable-next-line selector-no-qualifying-type 38 | a.close.disabled { 39 | pointer-events: none; 40 | } 41 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/bootstrap.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap v4.5.3 (https://getbootstrap.com/) 3 | * Copyright 2011-2020 The Bootstrap Authors 4 | * Copyright 2011-2020 Twitter, Inc. 5 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) 6 | */ 7 | 8 | @import "functions"; 9 | @import "variables"; 10 | @import "mixins"; 11 | @import "root"; 12 | @import "reboot"; 13 | @import "type"; 14 | @import "images"; 15 | @import "code"; 16 | @import "grid"; 17 | @import "tables"; 18 | @import "forms"; 19 | @import "buttons"; 20 | @import "transitions"; 21 | @import "dropdown"; 22 | @import "button-group"; 23 | @import "input-group"; 24 | @import "custom-forms"; 25 | @import "nav"; 26 | @import "navbar"; 27 | @import "card"; 28 | @import "breadcrumb"; 29 | @import "pagination"; 30 | @import "badge"; 31 | @import "jumbotron"; 32 | @import "alert"; 33 | @import "progress"; 34 | @import "media"; 35 | @import "list-group"; 36 | @import "close"; 37 | @import "toasts"; 38 | @import "modal"; 39 | @import "tooltip"; 40 | @import "popover"; 41 | @import "carousel"; 42 | @import "spinners"; 43 | @import "utilities"; 44 | @import "print"; 45 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/_code.scss: -------------------------------------------------------------------------------- 1 | // Inline code 2 | code { 3 | @include font-size($code-font-size); 4 | color: $code-color; 5 | word-wrap: break-word; 6 | 7 | // Streamline the style when inside anchors to avoid broken underline and more 8 | a > & { 9 | color: inherit; 10 | } 11 | } 12 | 13 | // User input typically entered via keyboard 14 | kbd { 15 | padding: $kbd-padding-y $kbd-padding-x; 16 | @include font-size($kbd-font-size); 17 | color: $kbd-color; 18 | background-color: $kbd-bg; 19 | @include border-radius($border-radius-sm); 20 | @include box-shadow($kbd-box-shadow); 21 | 22 | kbd { 23 | padding: 0; 24 | @include font-size(100%); 25 | font-weight: $nested-kbd-font-weight; 26 | @include box-shadow(none); 27 | } 28 | } 29 | 30 | // Blocks of code 31 | pre { 32 | display: block; 33 | @include font-size($code-font-size); 34 | color: $pre-color; 35 | 36 | // Account for some code outputs that place code tags in pre tags 37 | code { 38 | @include font-size(inherit); 39 | color: inherit; 40 | word-break: normal; 41 | } 42 | } 43 | 44 | // Enable scrollable blocks of code 45 | .pre-scrollable { 46 | max-height: $pre-scrollable-max-height; 47 | overflow-y: scroll; 48 | } 49 | -------------------------------------------------------------------------------- /src/scss/components/_buttons.scss: -------------------------------------------------------------------------------- 1 | 2 | .btn{ 3 | padding: 18px 45px; 4 | font-size: 16px; 5 | line-height: 1; 6 | font-weight: 500; 7 | text-transform: uppercase; 8 | border: 2px solid transparent; 9 | &.bg-primary { 10 | background-color: $blue; 11 | color: $white; 12 | &:hover{ 13 | background-color: transparent !important; 14 | border-color: $blue; 15 | color: $blue; 16 | } 17 | } 18 | &.bg-secondary{ 19 | background-color: $white !important; 20 | color: black !important; 21 | &:hover{ 22 | background-color: white !important; 23 | } 24 | } 25 | } 26 | .border{ 27 | border-radius: 50px; 28 | } 29 | // Small devices 575px - 767px 30 | @media (min-width: 575px) and (max-width: 767px) { 31 | .btn{ 32 | padding: 15px 30px; 33 | font-size: 14px; 34 | } 35 | } 36 | 37 | // Small devices 420px - 574px 38 | @media only screen and (min-width: 420px) and (max-width: 574px) { 39 | .btn{ 40 | padding: 15px 30px; 41 | font-size: 14px; 42 | } 43 | } 44 | // extra Small devices 420px 45 | @media (max-width: 420px) { 46 | .btn{ 47 | padding: 15px 30px; 48 | font-size: 14px; 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/_mixins.scss: -------------------------------------------------------------------------------- 1 | // Toggles 2 | // 3 | // Used in conjunction with global variables to enable certain theme features. 4 | 5 | // Vendor 6 | @import "vendor/rfs"; 7 | 8 | // Deprecate 9 | @import "mixins/deprecate"; 10 | 11 | // Utilities 12 | @import "mixins/breakpoints"; 13 | @import "mixins/hover"; 14 | @import "mixins/image"; 15 | @import "mixins/badge"; 16 | @import "mixins/resize"; 17 | @import "mixins/screen-reader"; 18 | @import "mixins/size"; 19 | @import "mixins/reset-text"; 20 | @import "mixins/text-emphasis"; 21 | @import "mixins/text-hide"; 22 | @import "mixins/text-truncate"; 23 | @import "mixins/visibility"; 24 | 25 | // Components 26 | @import "mixins/alert"; 27 | @import "mixins/buttons"; 28 | @import "mixins/caret"; 29 | @import "mixins/pagination"; 30 | @import "mixins/lists"; 31 | @import "mixins/list-group"; 32 | @import "mixins/nav-divider"; 33 | @import "mixins/forms"; 34 | @import "mixins/table-row"; 35 | 36 | // Skins 37 | @import "mixins/background-variant"; 38 | @import "mixins/border-radius"; 39 | @import "mixins/box-shadow"; 40 | @import "mixins/gradients"; 41 | @import "mixins/transition"; 42 | 43 | // Layout 44 | @import "mixins/clearfix"; 45 | @import "mixins/grid-framework"; 46 | @import "mixins/grid"; 47 | @import "mixins/float"; 48 | -------------------------------------------------------------------------------- /src/scss/pages/_order.scss: -------------------------------------------------------------------------------- 1 | .order-area{ 2 | padding-top: 50px; 3 | padding-bottom: 100px; 4 | .dashboard-nav{ 5 | margin-bottom: 100px; 6 | } 7 | } 8 | // Responsive 9 | // extra Small devices 420px 10 | @media (max-width: 420px) { 11 | .order-area{ 12 | padding-bottom: 50px; 13 | } 14 | .order-area .dashboard-nav{ 15 | margin-bottom: 30px; 16 | } 17 | } 18 | // Small devices 420px - 574px 19 | @media only screen and (min-width: 420px) and (max-width: 574px) { 20 | .order-area{ 21 | padding-bottom: 50px; 22 | } 23 | .order-area .dashboard-nav{ 24 | margin-bottom: 50px; 25 | } 26 | } 27 | // Small devices 575px - 767px 28 | @media (min-width: 575px) and (max-width: 767px) { 29 | .order-area{ 30 | padding-bottom: 50px; 31 | } 32 | .order-area .dashboard-nav{ 33 | margin-bottom: 50px; 34 | } 35 | } 36 | 37 | // Medium devices 768px - 991px 38 | @media (min-width: 768px) and (max-width: 991px) { 39 | .order-area{ 40 | padding-bottom: 50px; 41 | } 42 | .order-area .dashboard-nav{ 43 | margin-bottom: 50px; 44 | } 45 | } 46 | 47 | // large devices 992px - 1169px 48 | @media (min-width: 992px) and (max-width: 1200px) { 49 | .order-area .dashboard-nav{ 50 | margin-bottom: 50px; 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/mixins/_image.scss: -------------------------------------------------------------------------------- 1 | // Image Mixins 2 | // - Responsive image 3 | // - Retina image 4 | 5 | 6 | // Responsive image 7 | // 8 | // Keep images from scaling beyond the width of their parents. 9 | 10 | @mixin img-fluid() { 11 | // Part 1: Set a maximum relative to the parent 12 | max-width: 100%; 13 | // Part 2: Override the height to auto, otherwise images will be stretched 14 | // when setting a width and height attribute on the img element. 15 | height: auto; 16 | } 17 | 18 | 19 | // Retina image 20 | // 21 | // Short retina mixin for setting background-image and -size. 22 | 23 | @mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) { 24 | background-image: url($file-1x); 25 | 26 | // Autoprefixer takes care of adding -webkit-min-device-pixel-ratio and -o-min-device-pixel-ratio, 27 | // but doesn't convert dppx=>dpi. 28 | // There's no such thing as unprefixed min-device-pixel-ratio since it's nonstandard. 29 | // Compatibility info: https://caniuse.com/#feat=css-media-resolution 30 | @media only screen and (min-resolution: 192dpi), // IE9-11 don't support dppx 31 | only screen and (min-resolution: 2dppx) { // Standardized 32 | background-image: url($file-2x); 33 | background-size: $width-1x $height-1x; 34 | } 35 | @include deprecate("`img-retina()`", "v4.3.0", "v5"); 36 | } 37 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/_toasts.scss: -------------------------------------------------------------------------------- 1 | .toast { 2 | // Prevents from shrinking in IE11, when in a flex container 3 | // See https://github.com/twbs/bootstrap/issues/28341 4 | flex-basis: $toast-max-width; 5 | max-width: $toast-max-width; 6 | @include font-size($toast-font-size); 7 | color: $toast-color; 8 | background-color: $toast-background-color; 9 | background-clip: padding-box; 10 | border: $toast-border-width solid $toast-border-color; 11 | box-shadow: $toast-box-shadow; 12 | opacity: 0; 13 | @include border-radius($toast-border-radius); 14 | 15 | &:not(:last-child) { 16 | margin-bottom: $toast-padding-x; 17 | } 18 | 19 | &.showing { 20 | opacity: 1; 21 | } 22 | 23 | &.show { 24 | display: block; 25 | opacity: 1; 26 | } 27 | 28 | &.hide { 29 | display: none; 30 | } 31 | } 32 | 33 | .toast-header { 34 | display: flex; 35 | align-items: center; 36 | padding: $toast-padding-y $toast-padding-x; 37 | color: $toast-header-color; 38 | background-color: $toast-header-background-color; 39 | background-clip: padding-box; 40 | border-bottom: $toast-border-width solid $toast-header-border-color; 41 | @include border-top-radius(subtract($toast-border-radius, $toast-border-width)); 42 | } 43 | 44 | .toast-body { 45 | padding: $toast-padding-x; // apply to both vertical and horizontal 46 | } 47 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/_images.scss: -------------------------------------------------------------------------------- 1 | // Responsive images (ensure images don't scale beyond their parents) 2 | // 3 | // This is purposefully opt-in via an explicit class rather than being the default for all ``s. 4 | // We previously tried the "images are responsive by default" approach in Bootstrap v2, 5 | // and abandoned it in Bootstrap v3 because it breaks lots of third-party widgets (including Google Maps) 6 | // which weren't expecting the images within themselves to be involuntarily resized. 7 | // See also https://github.com/twbs/bootstrap/issues/18178 8 | .img-fluid { 9 | @include img-fluid(); 10 | } 11 | 12 | 13 | // Image thumbnails 14 | .img-thumbnail { 15 | padding: $thumbnail-padding; 16 | background-color: $thumbnail-bg; 17 | border: $thumbnail-border-width solid $thumbnail-border-color; 18 | @include border-radius($thumbnail-border-radius); 19 | @include box-shadow($thumbnail-box-shadow); 20 | 21 | // Keep them at most 100% wide 22 | @include img-fluid(); 23 | } 24 | 25 | // 26 | // Figures 27 | // 28 | 29 | .figure { 30 | // Ensures the caption's text aligns with the image. 31 | display: inline-block; 32 | } 33 | 34 | .figure-img { 35 | margin-bottom: $spacer / 2; 36 | line-height: 1; 37 | } 38 | 39 | .figure-caption { 40 | @include font-size($figure-caption-font-size); 41 | color: $figure-caption-color; 42 | } 43 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/_spinners.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Rotating border 3 | // 4 | 5 | @keyframes spinner-border { 6 | to { transform: rotate(360deg); } 7 | } 8 | 9 | .spinner-border { 10 | display: inline-block; 11 | width: $spinner-width; 12 | height: $spinner-height; 13 | vertical-align: text-bottom; 14 | border: $spinner-border-width solid currentColor; 15 | border-right-color: transparent; 16 | // stylelint-disable-next-line property-disallowed-list 17 | border-radius: 50%; 18 | animation: spinner-border .75s linear infinite; 19 | } 20 | 21 | .spinner-border-sm { 22 | width: $spinner-width-sm; 23 | height: $spinner-height-sm; 24 | border-width: $spinner-border-width-sm; 25 | } 26 | 27 | // 28 | // Growing circle 29 | // 30 | 31 | @keyframes spinner-grow { 32 | 0% { 33 | transform: scale(0); 34 | } 35 | 50% { 36 | opacity: 1; 37 | transform: none; 38 | } 39 | } 40 | 41 | .spinner-grow { 42 | display: inline-block; 43 | width: $spinner-width; 44 | height: $spinner-height; 45 | vertical-align: text-bottom; 46 | background-color: currentColor; 47 | // stylelint-disable-next-line property-disallowed-list 48 | border-radius: 50%; 49 | opacity: 0; 50 | animation: spinner-grow .75s linear infinite; 51 | } 52 | 53 | .spinner-grow-sm { 54 | width: $spinner-width-sm; 55 | height: $spinner-height-sm; 56 | } 57 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/_badge.scss: -------------------------------------------------------------------------------- 1 | // Base class 2 | // 3 | // Requires one of the contextual, color modifier classes for `color` and 4 | // `background-color`. 5 | 6 | .badge { 7 | display: inline-block; 8 | padding: $badge-padding-y $badge-padding-x; 9 | @include font-size($badge-font-size); 10 | font-weight: $badge-font-weight; 11 | line-height: 1; 12 | text-align: center; 13 | white-space: nowrap; 14 | vertical-align: baseline; 15 | @include border-radius($badge-border-radius); 16 | @include transition($badge-transition); 17 | 18 | @at-root a#{&} { 19 | @include hover-focus() { 20 | text-decoration: none; 21 | } 22 | } 23 | 24 | // Empty badges collapse automatically 25 | &:empty { 26 | display: none; 27 | } 28 | } 29 | 30 | // Quick fix for badges in buttons 31 | .btn .badge { 32 | position: relative; 33 | top: -1px; 34 | } 35 | 36 | // Pill badges 37 | // 38 | // Make them extra rounded with a modifier to replace v3's badges. 39 | 40 | .badge-pill { 41 | padding-right: $badge-pill-padding-x; 42 | padding-left: $badge-pill-padding-x; 43 | @include border-radius($badge-pill-border-radius); 44 | } 45 | 46 | // Colors 47 | // 48 | // Contextual variations (linked badges get darker on :hover). 49 | 50 | @each $color, $value in $theme-colors { 51 | .badge-#{$color} { 52 | @include badge-variant($value); 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/_progress.scss: -------------------------------------------------------------------------------- 1 | // Disable animation if transitions are disabled 2 | @if $enable-transitions { 3 | @keyframes progress-bar-stripes { 4 | from { background-position: $progress-height 0; } 5 | to { background-position: 0 0; } 6 | } 7 | } 8 | 9 | .progress { 10 | display: flex; 11 | height: $progress-height; 12 | overflow: hidden; // force rounded corners by cropping it 13 | line-height: 0; 14 | @include font-size($progress-font-size); 15 | background-color: $progress-bg; 16 | @include border-radius($progress-border-radius); 17 | @include box-shadow($progress-box-shadow); 18 | } 19 | 20 | .progress-bar { 21 | display: flex; 22 | flex-direction: column; 23 | justify-content: center; 24 | overflow: hidden; 25 | color: $progress-bar-color; 26 | text-align: center; 27 | white-space: nowrap; 28 | background-color: $progress-bar-bg; 29 | @include transition($progress-bar-transition); 30 | } 31 | 32 | .progress-bar-striped { 33 | @include gradient-striped(); 34 | background-size: $progress-height $progress-height; 35 | } 36 | 37 | @if $enable-transitions { 38 | .progress-bar-animated { 39 | animation: progress-bar-stripes $progress-bar-animation-timing; 40 | 41 | @if $enable-prefers-reduced-motion-media-query { 42 | @media (prefers-reduced-motion: reduce) { 43 | animation: none; 44 | } 45 | } 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/_alert.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Base styles 3 | // 4 | 5 | .alert { 6 | position: relative; 7 | padding: $alert-padding-y $alert-padding-x; 8 | margin-bottom: $alert-margin-bottom; 9 | border: $alert-border-width solid transparent; 10 | @include border-radius($alert-border-radius); 11 | } 12 | 13 | // Headings for larger alerts 14 | .alert-heading { 15 | // Specified to prevent conflicts of changing $headings-color 16 | color: inherit; 17 | } 18 | 19 | // Provide class for links that match alerts 20 | .alert-link { 21 | font-weight: $alert-link-font-weight; 22 | } 23 | 24 | 25 | // Dismissible alerts 26 | // 27 | // Expand the right padding and account for the close button's positioning. 28 | 29 | .alert-dismissible { 30 | padding-right: $close-font-size + $alert-padding-x * 2; 31 | 32 | // Adjust close link position 33 | .close { 34 | position: absolute; 35 | top: 0; 36 | right: 0; 37 | z-index: 2; 38 | padding: $alert-padding-y $alert-padding-x; 39 | color: inherit; 40 | } 41 | } 42 | 43 | 44 | // Alternate styles 45 | // 46 | // Generate contextual modifier classes for colorizing the alert. 47 | 48 | @each $color, $value in $theme-colors { 49 | .alert-#{$color} { 50 | @include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level)); 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /dist/images/company-image/apple.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/_breadcrumb.scss: -------------------------------------------------------------------------------- 1 | .breadcrumb { 2 | display: flex; 3 | flex-wrap: wrap; 4 | padding: $breadcrumb-padding-y $breadcrumb-padding-x; 5 | margin-bottom: $breadcrumb-margin-bottom; 6 | @include font-size($breadcrumb-font-size); 7 | list-style: none; 8 | background-color: $breadcrumb-bg; 9 | @include border-radius($breadcrumb-border-radius); 10 | } 11 | 12 | .breadcrumb-item { 13 | display: flex; 14 | 15 | // The separator between breadcrumbs (by default, a forward-slash: "/") 16 | + .breadcrumb-item { 17 | padding-left: $breadcrumb-item-padding; 18 | 19 | &::before { 20 | display: inline-block; // Suppress underlining of the separator in modern browsers 21 | padding-right: $breadcrumb-item-padding; 22 | color: $breadcrumb-divider-color; 23 | content: escape-svg($breadcrumb-divider); 24 | } 25 | } 26 | 27 | // IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built 28 | // without ``s. The `::before` pseudo-element generates an element 29 | // *within* the .breadcrumb-item and thereby inherits the `text-decoration`. 30 | // 31 | // To trick IE into suppressing the underline, we give the pseudo-element an 32 | // underline and then immediately remove it. 33 | + .breadcrumb-item:hover::before { 34 | text-decoration: underline; 35 | } 36 | // stylelint-disable-next-line no-duplicate-selectors 37 | + .breadcrumb-item:hover::before { 38 | text-decoration: none; 39 | } 40 | 41 | &.active { 42 | color: $breadcrumb-active-color; 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/scss/components/_form.scss: -------------------------------------------------------------------------------- 1 | /*===== FORM =====*/ 2 | .l-form{ 3 | display: flex; 4 | justify-content: center; 5 | align-items: center; 6 | height: 100vh; 7 | } 8 | 9 | .form{ 10 | &__title{ 11 | font-weight: 400; 12 | margin-bottom: 3rem; 13 | } 14 | &__div{ 15 | position: relative; 16 | height: 48px; 17 | margin-bottom: 1.5rem; 18 | } 19 | &__input{ 20 | position: absolute; 21 | top: 0; 22 | left: 0; 23 | width: 450px; 24 | height: 48px; 25 | font-size: 14px; 26 | border: 1px solid rgba(152, 155, 167, 0.5) !important; 27 | border-radius: 4px; 28 | outline: none; 29 | padding: 1rem; 30 | background: transparent; 31 | z-index: 1; 32 | } 33 | &__label{ 34 | position: absolute; 35 | left: 1rem; 36 | top: 1rem; 37 | padding: 0 .25rem; 38 | background-color: $white; 39 | color: $lightBlack; 40 | font-size: 14px; 41 | transition: .3s; 42 | } 43 | } 44 | 45 | /*Input focus move up label*/ 46 | .form__input:focus + .form__label { 47 | top: -.5rem; 48 | left: .8rem; 49 | color: $lightBlack; 50 | font-size: 14px; 51 | font-weight: 400; 52 | z-index: 10; 53 | } 54 | 55 | /*Input focus sticky top label*/ 56 | .form__input:not(:placeholder-shown).form__input:not(:focus) + .form__label { 57 | top: -.5rem; 58 | left: .8rem; 59 | z-index: 10; 60 | font-size: 14px; 61 | font-weight: 400; 62 | } 63 | 64 | /*Input focus*/ 65 | .form__input:focus { 66 | border: 1.5px solid rgba(152, 155, 167, 0.5); 67 | } 68 | -------------------------------------------------------------------------------- /src/scss/main.scss: -------------------------------------------------------------------------------- 1 | // abstracts 2 | @import "abstracts/functions"; 3 | @import "abstracts/variables"; 4 | 5 | // vendors 6 | @import "vendors/fontawesome/css/fontawesome.min.css"; 7 | @import "vendors/bootstrap/scss/bootstrap.scss"; 8 | @import "vendors/plugin/css/nice-select.css"; 9 | @import "vendors/plugin/css/jquery.exzoom.css"; 10 | @import "vendors/plugin/css/slick.css"; 11 | @import "vendors/plugin/css/wan-spinner.css"; 12 | 13 | @import "base/typography"; 14 | @import "base/reset"; 15 | 16 | @import "layout/footer"; 17 | @import "layout/header"; 18 | @import "layout/banner"; 19 | @import "layout/breadcrumb"; 20 | @import "layout/features"; 21 | @import "layout/about"; 22 | @import "layout/card-price"; 23 | @import "layout/brand"; 24 | 25 | @import "components/buttons"; 26 | @import "components/form"; 27 | @import "components/customersreview"; 28 | @import "components/product-item"; 29 | @import "components/productcategory"; 30 | @import "components/cartitem"; 31 | @import "components/orderitem"; 32 | 33 | @import "pages/home"; 34 | @import "pages/contact"; 35 | @import "pages/user-dashboard"; 36 | @import "pages/product-details"; 37 | @import 'pages/styleguide'; 38 | @import 'pages/account'; 39 | @import 'pages/forget-password'; 40 | @import 'pages/verify'; 41 | @import 'pages/deliver-info'; 42 | @import 'pages/wishlist'; 43 | @import 'pages/cart'; 44 | @import 'pages/cart'; 45 | @import 'pages/order'; 46 | @import 'pages/billing-information'; 47 | @import 'pages/shipping'; 48 | @import 'pages/payment'; 49 | @import 'pages/shop'; 50 | 51 | 52 | 53 | @import 'themes/theme'; 54 | 55 | 56 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/mixins/_caret.scss: -------------------------------------------------------------------------------- 1 | @mixin caret-down() { 2 | border-top: $caret-width solid; 3 | border-right: $caret-width solid transparent; 4 | border-bottom: 0; 5 | border-left: $caret-width solid transparent; 6 | } 7 | 8 | @mixin caret-up() { 9 | border-top: 0; 10 | border-right: $caret-width solid transparent; 11 | border-bottom: $caret-width solid; 12 | border-left: $caret-width solid transparent; 13 | } 14 | 15 | @mixin caret-right() { 16 | border-top: $caret-width solid transparent; 17 | border-right: 0; 18 | border-bottom: $caret-width solid transparent; 19 | border-left: $caret-width solid; 20 | } 21 | 22 | @mixin caret-left() { 23 | border-top: $caret-width solid transparent; 24 | border-right: $caret-width solid; 25 | border-bottom: $caret-width solid transparent; 26 | } 27 | 28 | @mixin caret($direction: down) { 29 | @if $enable-caret { 30 | &::after { 31 | display: inline-block; 32 | margin-left: $caret-spacing; 33 | vertical-align: $caret-vertical-align; 34 | content: ""; 35 | @if $direction == down { 36 | @include caret-down(); 37 | } @else if $direction == up { 38 | @include caret-up(); 39 | } @else if $direction == right { 40 | @include caret-right(); 41 | } 42 | } 43 | 44 | @if $direction == left { 45 | &::after { 46 | display: none; 47 | } 48 | 49 | &::before { 50 | display: inline-block; 51 | margin-right: $caret-spacing; 52 | vertical-align: $caret-vertical-align; 53 | content: ""; 54 | @include caret-left(); 55 | } 56 | } 57 | 58 | &:empty::after { 59 | margin-left: 0; 60 | } 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /src/scss/components/_productcategory.scss: -------------------------------------------------------------------------------- 1 | .categorys{ 2 | padding: 100px 0; 3 | } 4 | .productcategory{ 5 | margin-bottom: 40px; 6 | &-img{ 7 | img{ 8 | border-radius: 50%; 9 | } 10 | margin-bottom: 20px; 11 | } 12 | &-text{ 13 | h6{ 14 | color: $black; 15 | font-size: 20px; 16 | line-height: 1.3; 17 | margin-bottom: 0; 18 | } 19 | span{ 20 | color: $lightBlack; 21 | font-size: 14px; 22 | line-height: 1.3; 23 | } 24 | } 25 | } 26 | 27 | /*----------------------------------------*/ 28 | /* RESPONSIVE CSS START 29 | /*----------------------------------------*/ 30 | 31 | /* large devices 992 - 1169*/ 32 | @media (min-width: 992px) and (max-width: 1200px) { 33 | } 34 | 35 | /* Medium devices 768 - 991 */ 36 | @media (min-width: 768px) and (max-width: 991px) { 37 | } 38 | /* Small devices 575 - 767 */ 39 | @media (min-width: 575px) and (max-width: 767px) { 40 | .categorys{ 41 | padding: 70px 0; 42 | } 43 | } 44 | 45 | 46 | /* Small devices 420 - 574 */ 47 | @media only screen and (min-width: 420px) and (max-width: 575px) { 48 | .categorys{ 49 | padding: 70px 0; 50 | } 51 | 52 | } 53 | /* extra Small devices 420 */ 54 | @media (max-width: 420px) { 55 | .categorys{ 56 | padding: 50px 0; 57 | } 58 | .productcategory{ 59 | margin-bottom: 30px; 60 | &-img{ 61 | margin-bottom: 15px; 62 | } 63 | &-text{ 64 | h6{ 65 | font-size: 18px; 66 | } 67 | span{ 68 | font-size: 12px; 69 | } 70 | } 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /src/scss/pages/_forget-password.scss: -------------------------------------------------------------------------------- 1 | .forget-password { 2 | padding: 100px 0px; 3 | background-color: $gray; 4 | 5 | .account-sign-in { 6 | max-width: 540px; 7 | margin: 0 auto; 8 | 9 | .form__div { 10 | margin-bottom: 30px; 11 | } 12 | 13 | .social-signing { 14 | margin-bottom: 30px; 15 | } 16 | 17 | .ask-signup { 18 | padding-top: 18px; 19 | border-top: 1px solid $gray; 20 | a { 21 | color: $black; 22 | font-size: 16px; 23 | } 24 | } 25 | } 26 | .password-info-show { 27 | margin-top: 12px; 28 | margin-bottom: 32px; 29 | display: flex; 30 | align-items: center; 31 | 32 | input { 33 | margin-right: 6px; 34 | width: 15px; 35 | height: 15px; 36 | border-color: $lightBlack; 37 | border-radius: 2px; 38 | } 39 | 40 | label { 41 | cursor: pointer; 42 | font-size: 14px; 43 | color: $lightBlack; 44 | } 45 | } 46 | } 47 | 48 | // Responsive 49 | @media (min-width: 575px) and (max-width: 767px) { 50 | .forget-password { 51 | padding: 70px 0px; 52 | } 53 | } 54 | 55 | @media only screen and (min-width: 420px) and (max-width: 574px) { 56 | .forget-password { 57 | padding: 50px 0px; 58 | } 59 | } 60 | 61 | @media (max-width: 420px) { 62 | .forget-password { 63 | padding: 30px 0px; 64 | padding-bottom: 55px; 65 | .modi-sm { 66 | font-size: 30px; 67 | } 68 | } 69 | .copyright-text, 70 | .copyright-links{ 71 | margin: auto; 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /src/scss/layout/_card-price.scss: -------------------------------------------------------------------------------- 1 | .card-price{ 2 | padding: 26px; 3 | border: 2px solid $gray; 4 | border-radius: 4px; 5 | h6{ 6 | color: $black; 7 | font-size: 24px; 8 | font-weight: 600; 9 | margin-bottom: 20px; 10 | } 11 | &-list{ 12 | margin-bottom: 12px; 13 | .item{ 14 | p{ 15 | font-size: 16px; 16 | color: $lightBlack; 17 | margin-bottom: 0; 18 | } 19 | } 20 | .price{ 21 | p{ 22 | font-size: 16px; 23 | color: $black; 24 | margin-bottom: 0; 25 | } 26 | } 27 | } 28 | &-subtotal{ 29 | padding-top: 12px; 30 | border-top: 1px solid $gray; 31 | .total-text{ 32 | p{ 33 | font-size: 18px; 34 | color: $black; 35 | margin-bottom: 0; 36 | } 37 | } 38 | .total-price{ 39 | p{ 40 | font-size: 18px; 41 | color: $black; 42 | font-weight: 500; 43 | margin-bottom: 0; 44 | } 45 | } 46 | } 47 | } 48 | 49 | // Responsive 50 | // large devices 992px - 1169px 51 | @media (min-width: 992px) and (max-width: 1200px) { 52 | 53 | } 54 | 55 | // Medium devices 768px - 991px 56 | @media (min-width: 768px) and (max-width: 991px) { 57 | } 58 | 59 | // Small devices 575px - 767px 60 | @media (min-width: 575px) and (max-width: 767px) { 61 | } 62 | 63 | // Small devices 420px - 574px 64 | @media only screen and (min-width: 420px) and (max-width: 574px) { 65 | 66 | } 67 | 68 | // extra Small devices 420px 69 | @media (max-width: 420px) { 70 | .card-price h6{ 71 | text-align: center; 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/_grid.scss: -------------------------------------------------------------------------------- 1 | // Container widths 2 | // 3 | // Set the container width, and override it for fixed navbars in media queries. 4 | 5 | @if $enable-grid-classes { 6 | // Single container class with breakpoint max-widths 7 | .container, 8 | // 100% wide container at all breakpoints 9 | .container-fluid { 10 | @include make-container(); 11 | } 12 | 13 | // Responsive containers that are 100% wide until a breakpoint 14 | @each $breakpoint, $container-max-width in $container-max-widths { 15 | .container-#{$breakpoint} { 16 | @extend .container-fluid; 17 | } 18 | 19 | @include media-breakpoint-up($breakpoint, $grid-breakpoints) { 20 | %responsive-container-#{$breakpoint} { 21 | max-width: $container-max-width; 22 | } 23 | 24 | // Extend each breakpoint which is smaller or equal to the current breakpoint 25 | $extend-breakpoint: true; 26 | 27 | @each $name, $width in $grid-breakpoints { 28 | @if ($extend-breakpoint) { 29 | .container#{breakpoint-infix($name, $grid-breakpoints)} { 30 | @extend %responsive-container-#{$breakpoint}; 31 | } 32 | 33 | // Once the current breakpoint is reached, stop extending 34 | @if ($breakpoint == $name) { 35 | $extend-breakpoint: false; 36 | } 37 | } 38 | } 39 | } 40 | } 41 | } 42 | 43 | 44 | // Row 45 | // 46 | // Rows contain your columns. 47 | 48 | @if $enable-grid-classes { 49 | .row { 50 | @include make-row(); 51 | } 52 | 53 | // Remove the negative margin from default .row, then the horizontal padding 54 | // from all immediate children columns (to prevent runaway style inheritance). 55 | .no-gutters { 56 | margin-right: 0; 57 | margin-left: 0; 58 | 59 | > .col, 60 | > [class*="col-"] { 61 | padding-right: 0; 62 | padding-left: 0; 63 | } 64 | } 65 | } 66 | 67 | // Columns 68 | // 69 | // Common styles for small and large grid columns 70 | 71 | @if $enable-grid-classes { 72 | @include make-grid-columns(); 73 | } 74 | -------------------------------------------------------------------------------- /src/scss/layout/_breadcrumb.scss: -------------------------------------------------------------------------------- 1 | .breadcrumb-area{ 2 | padding: 65px 0px; 3 | background-color: #FAFAFA; 4 | .breadcrumb{ 5 | padding-left: 0; 6 | margin-bottom: -6px; 7 | background-color: transparent; 8 | .active{ 9 | color: #335AFF; 10 | } 11 | &-item{ 12 | font-size: 14px; 13 | font-weight: 400; 14 | color: #1A2224; 15 | a{ 16 | color: #1A2224; 17 | text-decoration: none; 18 | } 19 | } 20 | } 21 | h5{ 22 | font-size: 32px; 23 | font-weight: 600; 24 | margin-bottom: 0; 25 | } 26 | } 27 | 28 | // large devices 992px - 1169px 29 | @media (min-width: 992px) and (max-width: 1200px) { 30 | 31 | } 32 | 33 | // Medium devices 768px - 991px 34 | @media (min-width: 768px) and (max-width: 991px) { 35 | } 36 | 37 | // Small devices 575px - 767px 38 | @media (min-width: 575px) and (max-width: 767px) { 39 | } 40 | 41 | // Small devices 420px - 574px 42 | @media only screen and (min-width: 420px) and (max-width: 574px) { 43 | .breadcrumb-area { 44 | padding: 25px 0px; 45 | .breadcrumb{ 46 | margin-bottom: 0; 47 | padding-right: 0; 48 | padding-bottom: 0; 49 | &-item{ 50 | margin-bottom: 10px; 51 | } 52 | } 53 | } 54 | .dashboard-nav{ 55 | margin-bottom: 30px !important; 56 | } 57 | 58 | } 59 | 60 | // extra Small devices 420px 61 | @media (max-width: 420px) { 62 | .dashboard-nav{ 63 | margin-bottom: 30px !important; 64 | } 65 | .breadcrumb-area { 66 | padding: 25px 0px; 67 | .breadcrumb{ 68 | margin-bottom: 0; 69 | padding-right: 0; 70 | padding-bottom: 0; 71 | &-item{ 72 | margin-bottom: 10px; 73 | padding-left: 0; 74 | padding-right: 10px; 75 | } 76 | } 77 | h5{ 78 | font-size: 26px; 79 | } 80 | } 81 | } 82 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/utilities/_borders.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable property-disallowed-list, declaration-no-important 2 | 3 | // 4 | // Border 5 | // 6 | 7 | .border { border: $border-width solid $border-color !important; } 8 | .border-top { border-top: $border-width solid $border-color !important; } 9 | .border-right { border-right: $border-width solid $border-color !important; } 10 | .border-bottom { border-bottom: $border-width solid $border-color !important; } 11 | .border-left { border-left: $border-width solid $border-color !important; } 12 | 13 | .border-0 { border: 0 !important; } 14 | .border-top-0 { border-top: 0 !important; } 15 | .border-right-0 { border-right: 0 !important; } 16 | .border-bottom-0 { border-bottom: 0 !important; } 17 | .border-left-0 { border-left: 0 !important; } 18 | 19 | @each $color, $value in $theme-colors { 20 | .border-#{$color} { 21 | border-color: $value !important; 22 | } 23 | } 24 | 25 | .border-white { 26 | border-color: $white !important; 27 | } 28 | 29 | // 30 | // Border-radius 31 | // 32 | 33 | .rounded-sm { 34 | border-radius: $border-radius-sm !important; 35 | } 36 | 37 | .rounded { 38 | border-radius: $border-radius !important; 39 | } 40 | 41 | .rounded-top { 42 | border-top-left-radius: $border-radius !important; 43 | border-top-right-radius: $border-radius !important; 44 | } 45 | 46 | .rounded-right { 47 | border-top-right-radius: $border-radius !important; 48 | border-bottom-right-radius: $border-radius !important; 49 | } 50 | 51 | .rounded-bottom { 52 | border-bottom-right-radius: $border-radius !important; 53 | border-bottom-left-radius: $border-radius !important; 54 | } 55 | 56 | .rounded-left { 57 | border-top-left-radius: $border-radius !important; 58 | border-bottom-left-radius: $border-radius !important; 59 | } 60 | 61 | .rounded-lg { 62 | border-radius: $border-radius-lg !important; 63 | } 64 | 65 | .rounded-circle { 66 | border-radius: 50% !important; 67 | } 68 | 69 | .rounded-pill { 70 | border-radius: $rounded-pill !important; 71 | } 72 | 73 | .rounded-0 { 74 | border-radius: 0 !important; 75 | } 76 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/_pagination.scss: -------------------------------------------------------------------------------- 1 | .pagination { 2 | display: flex; 3 | @include list-unstyled(); 4 | @include border-radius(); 5 | } 6 | 7 | .page-link { 8 | position: relative; 9 | display: block; 10 | padding: $pagination-padding-y $pagination-padding-x; 11 | margin-left: -$pagination-border-width; 12 | line-height: $pagination-line-height; 13 | color: $pagination-color; 14 | text-decoration: if($link-decoration == none, null, none); 15 | background-color: $pagination-bg; 16 | border: $pagination-border-width solid $pagination-border-color; 17 | 18 | &:hover { 19 | z-index: 2; 20 | color: $pagination-hover-color; 21 | text-decoration: none; 22 | background-color: $pagination-hover-bg; 23 | border-color: $pagination-hover-border-color; 24 | } 25 | 26 | &:focus { 27 | z-index: 3; 28 | outline: $pagination-focus-outline; 29 | box-shadow: $pagination-focus-box-shadow; 30 | } 31 | } 32 | 33 | .page-item { 34 | &:first-child { 35 | .page-link { 36 | margin-left: 0; 37 | @include border-left-radius($border-radius); 38 | } 39 | } 40 | &:last-child { 41 | .page-link { 42 | @include border-right-radius($border-radius); 43 | } 44 | } 45 | 46 | &.active .page-link { 47 | z-index: 3; 48 | color: $pagination-active-color; 49 | background-color: $pagination-active-bg; 50 | border-color: $pagination-active-border-color; 51 | } 52 | 53 | &.disabled .page-link { 54 | color: $pagination-disabled-color; 55 | pointer-events: none; 56 | // Opinionated: remove the "hand" cursor set previously for .page-link 57 | cursor: auto; 58 | background-color: $pagination-disabled-bg; 59 | border-color: $pagination-disabled-border-color; 60 | } 61 | } 62 | 63 | 64 | // 65 | // Sizing 66 | // 67 | 68 | .pagination-lg { 69 | @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $line-height-lg, $border-radius-lg); 70 | } 71 | 72 | .pagination-sm { 73 | @include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $line-height-sm, $border-radius-sm); 74 | } 75 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/mixins/_border-radius.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable property-disallowed-list 2 | // Single side border-radius 3 | 4 | // Helper function to replace negative values with 0 5 | @function valid-radius($radius) { 6 | $return: (); 7 | @each $value in $radius { 8 | @if type-of($value) == number { 9 | $return: append($return, max($value, 0)); 10 | } @else { 11 | $return: append($return, $value); 12 | } 13 | } 14 | @return $return; 15 | } 16 | 17 | @mixin border-radius($radius: $border-radius, $fallback-border-radius: false) { 18 | @if $enable-rounded { 19 | border-radius: valid-radius($radius); 20 | } 21 | @else if $fallback-border-radius != false { 22 | border-radius: $fallback-border-radius; 23 | } 24 | } 25 | 26 | @mixin border-top-radius($radius) { 27 | @if $enable-rounded { 28 | border-top-left-radius: valid-radius($radius); 29 | border-top-right-radius: valid-radius($radius); 30 | } 31 | } 32 | 33 | @mixin border-right-radius($radius) { 34 | @if $enable-rounded { 35 | border-top-right-radius: valid-radius($radius); 36 | border-bottom-right-radius: valid-radius($radius); 37 | } 38 | } 39 | 40 | @mixin border-bottom-radius($radius) { 41 | @if $enable-rounded { 42 | border-bottom-right-radius: valid-radius($radius); 43 | border-bottom-left-radius: valid-radius($radius); 44 | } 45 | } 46 | 47 | @mixin border-left-radius($radius) { 48 | @if $enable-rounded { 49 | border-top-left-radius: valid-radius($radius); 50 | border-bottom-left-radius: valid-radius($radius); 51 | } 52 | } 53 | 54 | @mixin border-top-left-radius($radius) { 55 | @if $enable-rounded { 56 | border-top-left-radius: valid-radius($radius); 57 | } 58 | } 59 | 60 | @mixin border-top-right-radius($radius) { 61 | @if $enable-rounded { 62 | border-top-right-radius: valid-radius($radius); 63 | } 64 | } 65 | 66 | @mixin border-bottom-right-radius($radius) { 67 | @if $enable-rounded { 68 | border-bottom-right-radius: valid-radius($radius); 69 | } 70 | } 71 | 72 | @mixin border-bottom-left-radius($radius) { 73 | @if $enable-rounded { 74 | border-bottom-left-radius: valid-radius($radius); 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/mixins/_gradients.scss: -------------------------------------------------------------------------------- 1 | // Gradients 2 | 3 | @mixin gradient-bg($color) { 4 | @if $enable-gradients { 5 | background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x; 6 | } @else { 7 | background-color: $color; 8 | } 9 | } 10 | 11 | // Horizontal gradient, from left to right 12 | // 13 | // Creates two color stops, start and end, by specifying a color and position for each color stop. 14 | @mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) { 15 | background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); 16 | background-repeat: repeat-x; 17 | } 18 | 19 | // Vertical gradient, from top to bottom 20 | // 21 | // Creates two color stops, start and end, by specifying a color and position for each color stop. 22 | @mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) { 23 | background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); 24 | background-repeat: repeat-x; 25 | } 26 | 27 | @mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) { 28 | background-image: linear-gradient($deg, $start-color, $end-color); 29 | background-repeat: repeat-x; 30 | } 31 | @mixin gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) { 32 | background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color); 33 | background-repeat: no-repeat; 34 | } 35 | @mixin gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) { 36 | background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color); 37 | background-repeat: no-repeat; 38 | } 39 | @mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) { 40 | background-image: radial-gradient(circle, $inner-color, $outer-color); 41 | background-repeat: no-repeat; 42 | } 43 | @mixin gradient-striped($color: rgba($white, .15), $angle: 45deg) { 44 | background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent); 45 | } 46 | -------------------------------------------------------------------------------- /src/scss/pages/_cart.scss: -------------------------------------------------------------------------------- 1 | .cart-area{ 2 | padding-top: 50px; 3 | padding-bottom: 100px; 4 | .dashboard-nav{ 5 | margin-bottom: 100px; 6 | } 7 | .apply-coupon{ 8 | margin-top: 100px; 9 | max-width: 559px; 10 | padding: 26px; 11 | border: 2px solid $gray; 12 | border-radius: 4px; 13 | h6{ 14 | font-size: 24px; 15 | font-weight: 600; 16 | color: $black; 17 | margin-bottom: 24px; 18 | } 19 | .form__div{ 20 | margin-bottom: 24px; 21 | input{ 22 | width: 507px; 23 | } 24 | } 25 | } 26 | .card-price{ 27 | margin-top: 100px; 28 | max-width: 561px; 29 | margin-left: 10px; 30 | form{ 31 | margin-top: 22px; 32 | button{ 33 | width: 100%; 34 | } 35 | } 36 | } 37 | } 38 | // Responsive 39 | // Medium devices 768px - 991px 40 | @media (min-width: 768px) and (max-width: 991px) { 41 | .cart-area .apply-coupon, 42 | .cart-area .card-price{ 43 | max-width: 100%; 44 | margin-right: 0; 45 | margin-top: 50px; 46 | } 47 | } 48 | // Small devices 575px - 767px 49 | @media (min-width: 575px) and (max-width: 767px) { 50 | .cart-area .apply-coupon, 51 | .cart-area .card-price{ 52 | max-width: 100%; 53 | margin-right: 0; 54 | margin-top: 50px; 55 | } 56 | } 57 | // Small devices 420px - 574px 58 | @media only screen and (min-width: 420px) and (max-width: 574px) { 59 | .cart-area .apply-coupon, 60 | .cart-area .card-price{ 61 | max-width: 100%; 62 | margin-right: 0; 63 | margin-top: 50px; 64 | margin-left: 0; 65 | } 66 | .cart-area{ 67 | padding-bottom: 50px; 68 | } 69 | .cart-area .dashboard-nav{ 70 | margin-bottom: 50px; 71 | } 72 | 73 | } 74 | // extra Small devices 420px 75 | @media (max-width: 420px) { 76 | .cart-area .dashboard-nav{ 77 | margin-bottom: 30px; 78 | } 79 | .cart-area{ 80 | padding-bottom: 50px; 81 | } 82 | .cart-area .apply-coupon, 83 | .cart-area .card-price{ 84 | max-width: 100%; 85 | margin-right: 0; 86 | margin-top: 50px; 87 | margin-left: 0; 88 | } 89 | } 90 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/mixins/_grid.scss: -------------------------------------------------------------------------------- 1 | /// Grid system 2 | // 3 | // Generate semantic grid columns with these mixins. 4 | 5 | @mixin make-container($gutter: $grid-gutter-width) { 6 | width: 100%; 7 | padding-right: $gutter / 2; 8 | padding-left: $gutter / 2; 9 | margin-right: auto; 10 | margin-left: auto; 11 | } 12 | 13 | @mixin make-row($gutter: $grid-gutter-width) { 14 | display: flex; 15 | flex-wrap: wrap; 16 | margin-right: -$gutter / 2; 17 | margin-left: -$gutter / 2; 18 | } 19 | 20 | // For each breakpoint, define the maximum width of the container in a media query 21 | @mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) { 22 | @each $breakpoint, $container-max-width in $max-widths { 23 | @include media-breakpoint-up($breakpoint, $breakpoints) { 24 | max-width: $container-max-width; 25 | } 26 | } 27 | @include deprecate("The `make-container-max-widths` mixin", "v4.5.2", "v5"); 28 | } 29 | 30 | @mixin make-col-ready($gutter: $grid-gutter-width) { 31 | position: relative; 32 | // Prevent columns from becoming too narrow when at smaller grid tiers by 33 | // always setting `width: 100%;`. This works because we use `flex` values 34 | // later on to override this initial width. 35 | width: 100%; 36 | padding-right: $gutter / 2; 37 | padding-left: $gutter / 2; 38 | } 39 | 40 | @mixin make-col($size, $columns: $grid-columns) { 41 | flex: 0 0 percentage($size / $columns); 42 | // Add a `max-width` to ensure content within each column does not blow out 43 | // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari 44 | // do not appear to require this. 45 | max-width: percentage($size / $columns); 46 | } 47 | 48 | @mixin make-col-auto() { 49 | flex: 0 0 auto; 50 | width: auto; 51 | max-width: 100%; // Reset earlier grid tiers 52 | } 53 | 54 | @mixin make-col-offset($size, $columns: $grid-columns) { 55 | $num: $size / $columns; 56 | margin-left: if($num == 0, 0, percentage($num)); 57 | } 58 | 59 | // Row columns 60 | // 61 | // Specify on a parent element(e.g., .row) to force immediate children into NN 62 | // numberof columns. Supports wrapping to new lines, but does not do a Masonry 63 | // style grid. 64 | @mixin row-cols($count) { 65 | > * { 66 | flex: 0 0 100% / $count; 67 | max-width: 100% / $count; 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/utilities/_spacing.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable declaration-no-important 2 | 3 | // Margin and Padding 4 | 5 | @each $breakpoint in map-keys($grid-breakpoints) { 6 | @include media-breakpoint-up($breakpoint) { 7 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints); 8 | 9 | @each $prop, $abbrev in (margin: m, padding: p) { 10 | @each $size, $length in $spacers { 11 | .#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; } 12 | .#{$abbrev}t#{$infix}-#{$size}, 13 | .#{$abbrev}y#{$infix}-#{$size} { 14 | #{$prop}-top: $length !important; 15 | } 16 | .#{$abbrev}r#{$infix}-#{$size}, 17 | .#{$abbrev}x#{$infix}-#{$size} { 18 | #{$prop}-right: $length !important; 19 | } 20 | .#{$abbrev}b#{$infix}-#{$size}, 21 | .#{$abbrev}y#{$infix}-#{$size} { 22 | #{$prop}-bottom: $length !important; 23 | } 24 | .#{$abbrev}l#{$infix}-#{$size}, 25 | .#{$abbrev}x#{$infix}-#{$size} { 26 | #{$prop}-left: $length !important; 27 | } 28 | } 29 | } 30 | 31 | // Negative margins (e.g., where `.mb-n1` is negative version of `.mb-1`) 32 | @each $size, $length in $spacers { 33 | @if $size != 0 { 34 | .m#{$infix}-n#{$size} { margin: -$length !important; } 35 | .mt#{$infix}-n#{$size}, 36 | .my#{$infix}-n#{$size} { 37 | margin-top: -$length !important; 38 | } 39 | .mr#{$infix}-n#{$size}, 40 | .mx#{$infix}-n#{$size} { 41 | margin-right: -$length !important; 42 | } 43 | .mb#{$infix}-n#{$size}, 44 | .my#{$infix}-n#{$size} { 45 | margin-bottom: -$length !important; 46 | } 47 | .ml#{$infix}-n#{$size}, 48 | .mx#{$infix}-n#{$size} { 49 | margin-left: -$length !important; 50 | } 51 | } 52 | } 53 | 54 | // Some special margin utils 55 | .m#{$infix}-auto { margin: auto !important; } 56 | .mt#{$infix}-auto, 57 | .my#{$infix}-auto { 58 | margin-top: auto !important; 59 | } 60 | .mr#{$infix}-auto, 61 | .mx#{$infix}-auto { 62 | margin-right: auto !important; 63 | } 64 | .mb#{$infix}-auto, 65 | .my#{$infix}-auto { 66 | margin-bottom: auto !important; 67 | } 68 | .ml#{$infix}-auto, 69 | .mx#{$infix}-auto { 70 | margin-left: auto !important; 71 | } 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/utilities/_text.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable declaration-no-important 2 | 3 | // 4 | // Text 5 | // 6 | 7 | .text-monospace { font-family: $font-family-monospace !important; } 8 | 9 | // Alignment 10 | 11 | .text-justify { text-align: justify !important; } 12 | .text-wrap { white-space: normal !important; } 13 | .text-nowrap { white-space: nowrap !important; } 14 | .text-truncate { @include text-truncate(); } 15 | 16 | // Responsive alignment 17 | 18 | @each $breakpoint in map-keys($grid-breakpoints) { 19 | @include media-breakpoint-up($breakpoint) { 20 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints); 21 | 22 | .text#{$infix}-left { text-align: left !important; } 23 | .text#{$infix}-right { text-align: right !important; } 24 | .text#{$infix}-center { text-align: center !important; } 25 | } 26 | } 27 | 28 | // Transformation 29 | 30 | .text-lowercase { text-transform: lowercase !important; } 31 | .text-uppercase { text-transform: uppercase !important; } 32 | .text-capitalize { text-transform: capitalize !important; } 33 | 34 | // Weight and italics 35 | 36 | .font-weight-light { font-weight: $font-weight-light !important; } 37 | .font-weight-lighter { font-weight: $font-weight-lighter !important; } 38 | .font-weight-normal { font-weight: $font-weight-normal !important; } 39 | .font-weight-bold { font-weight: $font-weight-bold !important; } 40 | .font-weight-bolder { font-weight: $font-weight-bolder !important; } 41 | .font-italic { font-style: italic !important; } 42 | 43 | // Contextual colors 44 | 45 | .text-white { color: $white !important; } 46 | 47 | @each $color, $value in $theme-colors { 48 | @include text-emphasis-variant(".text-#{$color}", $value, true); 49 | } 50 | 51 | .text-body { color: $body-color !important; } 52 | .text-muted { color: $text-muted !important; } 53 | 54 | .text-black-50 { color: rgba($black, .5) !important; } 55 | .text-white-50 { color: rgba($white, .5) !important; } 56 | 57 | // Misc 58 | 59 | .text-hide { 60 | @include text-hide($ignore-warning: true); 61 | } 62 | 63 | .text-decoration-none { text-decoration: none !important; } 64 | 65 | .text-break { 66 | word-break: break-word !important; // Deprecated, but avoids issues with flex containers 67 | word-wrap: break-word !important; // Used instead of `overflow-wrap` for IE & Edge Legacy 68 | } 69 | 70 | // Reset 71 | 72 | .text-reset { color: inherit !important; } 73 | -------------------------------------------------------------------------------- /src/scss/vendors/plugin/css/slick.css: -------------------------------------------------------------------------------- 1 | /* Slider */ 2 | .slick-slider 3 | { 4 | position: relative; 5 | 6 | display: block; 7 | box-sizing: border-box; 8 | 9 | -webkit-user-select: none; 10 | -moz-user-select: none; 11 | -ms-user-select: none; 12 | user-select: none; 13 | 14 | -webkit-touch-callout: none; 15 | -khtml-user-select: none; 16 | -ms-touch-action: pan-y; 17 | touch-action: pan-y; 18 | -webkit-tap-highlight-color: transparent; 19 | } 20 | 21 | .slick-list 22 | { 23 | position: relative; 24 | 25 | display: block; 26 | overflow: hidden; 27 | 28 | margin: 0; 29 | padding: 0; 30 | } 31 | .slick-list:focus 32 | { 33 | outline: none; 34 | } 35 | .slick-list.dragging 36 | { 37 | cursor: pointer; 38 | cursor: hand; 39 | } 40 | 41 | .slick-slider .slick-track, 42 | .slick-slider .slick-list 43 | { 44 | -webkit-transform: translate3d(0, 0, 0); 45 | -moz-transform: translate3d(0, 0, 0); 46 | -ms-transform: translate3d(0, 0, 0); 47 | -o-transform: translate3d(0, 0, 0); 48 | transform: translate3d(0, 0, 0); 49 | } 50 | 51 | .slick-track 52 | { 53 | position: relative; 54 | top: 0; 55 | left: 0; 56 | 57 | display: block; 58 | margin-left: auto; 59 | margin-right: auto; 60 | } 61 | .slick-track:before, 62 | .slick-track:after 63 | { 64 | display: table; 65 | 66 | content: ''; 67 | } 68 | .slick-track:after 69 | { 70 | clear: both; 71 | } 72 | .slick-loading .slick-track 73 | { 74 | visibility: hidden; 75 | } 76 | 77 | .slick-slide 78 | { 79 | display: none; 80 | float: left; 81 | 82 | height: 100%; 83 | min-height: 1px; 84 | } 85 | [dir='rtl'] .slick-slide 86 | { 87 | float: right; 88 | } 89 | .slick-slide img 90 | { 91 | display: block; 92 | } 93 | .slick-slide.slick-loading img 94 | { 95 | display: none; 96 | } 97 | .slick-slide.dragging img 98 | { 99 | pointer-events: none; 100 | } 101 | .slick-initialized .slick-slide 102 | { 103 | display: block; 104 | } 105 | .slick-loading .slick-slide 106 | { 107 | visibility: hidden; 108 | } 109 | .slick-vertical .slick-slide 110 | { 111 | display: block; 112 | 113 | height: auto; 114 | 115 | border: 1px solid transparent; 116 | } 117 | .slick-arrow.slick-hidden { 118 | display: none; 119 | } 120 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/mixins/_grid-framework.scss: -------------------------------------------------------------------------------- 1 | // Framework grid generation 2 | // 3 | // Used only by Bootstrap to generate the correct number of grid classes given 4 | // any value of `$grid-columns`. 5 | 6 | @mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) { 7 | // Common properties for all breakpoints 8 | %grid-column { 9 | position: relative; 10 | width: 100%; 11 | padding-right: $gutter / 2; 12 | padding-left: $gutter / 2; 13 | } 14 | 15 | @each $breakpoint in map-keys($breakpoints) { 16 | $infix: breakpoint-infix($breakpoint, $breakpoints); 17 | 18 | @if $columns > 0 { 19 | // Allow columns to stretch full width below their breakpoints 20 | @for $i from 1 through $columns { 21 | .col#{$infix}-#{$i} { 22 | @extend %grid-column; 23 | } 24 | } 25 | } 26 | 27 | .col#{$infix}, 28 | .col#{$infix}-auto { 29 | @extend %grid-column; 30 | } 31 | 32 | @include media-breakpoint-up($breakpoint, $breakpoints) { 33 | // Provide basic `.col-{bp}` classes for equal-width flexbox columns 34 | .col#{$infix} { 35 | flex-basis: 0; 36 | flex-grow: 1; 37 | max-width: 100%; 38 | } 39 | 40 | @if $grid-row-columns > 0 { 41 | @for $i from 1 through $grid-row-columns { 42 | .row-cols#{$infix}-#{$i} { 43 | @include row-cols($i); 44 | } 45 | } 46 | } 47 | 48 | .col#{$infix}-auto { 49 | @include make-col-auto(); 50 | } 51 | 52 | @if $columns > 0 { 53 | @for $i from 1 through $columns { 54 | .col#{$infix}-#{$i} { 55 | @include make-col($i, $columns); 56 | } 57 | } 58 | } 59 | 60 | .order#{$infix}-first { order: -1; } 61 | 62 | .order#{$infix}-last { order: $columns + 1; } 63 | 64 | @for $i from 0 through $columns { 65 | .order#{$infix}-#{$i} { order: $i; } 66 | } 67 | 68 | @if $columns > 0 { 69 | // `$columns - 1` because offsetting by the width of an entire row isn't possible 70 | @for $i from 0 through ($columns - 1) { 71 | @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0 72 | .offset#{$infix}-#{$i} { 73 | @include make-col-offset($i, $columns); 74 | } 75 | } 76 | } 77 | } 78 | } 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /dist/images/company-image/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/scss/pages/_deliver-info.scss: -------------------------------------------------------------------------------- 1 | .deliver-info { 2 | padding-top: 50px; 3 | padding-bottom: 100px; 4 | 5 | .form__div{ 6 | margin-bottom: 30px; 7 | 8 | input { 9 | width: 100% !important; 10 | } 11 | } 12 | 13 | &-form { 14 | margin-top: 100px; 15 | 16 | h6 { 17 | margin-bottom: 30px; 18 | color: $black; 19 | font-size: 24px; 20 | font-weight: 600; 21 | } 22 | 23 | form { 24 | select { 25 | width: 100%; 26 | border-radius: 4px; 27 | border: 1px solid $lightBlack; 28 | padding: 0.8rem !important; 29 | 30 | option { 31 | color: $black; 32 | font-size: 16px; 33 | } 34 | } 35 | 36 | button { 37 | margin-top: 10px; 38 | } 39 | } 40 | } 41 | } 42 | 43 | // Responsive 44 | // large devices 992px - 1169px 45 | @media (min-width: 992px) and (max-width: 1200px) {} 46 | 47 | // Medium devices 768px - 991px 48 | @media (min-width: 768px) and (max-width: 991px) { 49 | .deliver-info-form { 50 | margin-top: 50px; 51 | } 52 | 53 | .deliver-info { 54 | padding-bottom: 70px; 55 | } 56 | } 57 | 58 | // Small devices 575px - 767px 59 | @media (min-width: 575px) and (max-width: 767px) { 60 | .deliver-info-form { 61 | margin-top: 50px; 62 | } 63 | 64 | .deliver-info { 65 | padding-bottom: 70px; 66 | } 67 | 68 | .deliver-info-form form select { 69 | margin-bottom: 30px; 70 | 71 | } 72 | 73 | } 74 | 75 | // Small devices 420px - 574px 76 | @media only screen and (min-width: 420px) and (max-width: 574px) { 77 | .deliver-info-form { 78 | margin-top: 30px; 79 | } 80 | 81 | .deliver-info { 82 | padding-bottom: 50px; 83 | } 84 | 85 | .deliver-info-form form select { 86 | margin-bottom: 30px; 87 | 88 | } 89 | 90 | } 91 | 92 | // extra Small devices 420px 93 | @media (max-width: 420px) { 94 | .deliver-info-form { 95 | margin-top: 30px; 96 | } 97 | 98 | .deliver-info { 99 | padding-bottom: 50px; 100 | } 101 | 102 | .deliver-info-form form select { 103 | margin-bottom: 30px; 104 | 105 | } 106 | 107 | .deliver-info-form form { 108 | button { 109 | margin-top: 0; 110 | } 111 | } 112 | 113 | } 114 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/_nav.scss: -------------------------------------------------------------------------------- 1 | // Base class 2 | // 3 | // Kickstart any navigation component with a set of style resets. Works with 4 | // ``s, ``s or ``s. 5 | 6 | .nav { 7 | display: flex; 8 | flex-wrap: wrap; 9 | padding-left: 0; 10 | margin-bottom: 0; 11 | list-style: none; 12 | } 13 | 14 | .nav-link { 15 | display: block; 16 | padding: $nav-link-padding-y $nav-link-padding-x; 17 | text-decoration: if($link-decoration == none, null, none); 18 | 19 | @include hover-focus() { 20 | text-decoration: none; 21 | } 22 | 23 | // Disabled state lightens text 24 | &.disabled { 25 | color: $nav-link-disabled-color; 26 | pointer-events: none; 27 | cursor: default; 28 | } 29 | } 30 | 31 | // 32 | // Tabs 33 | // 34 | 35 | .nav-tabs { 36 | border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color; 37 | 38 | .nav-item { 39 | margin-bottom: -$nav-tabs-border-width; 40 | } 41 | 42 | .nav-link { 43 | border: $nav-tabs-border-width solid transparent; 44 | @include border-top-radius($nav-tabs-border-radius); 45 | 46 | @include hover-focus() { 47 | border-color: $nav-tabs-link-hover-border-color; 48 | } 49 | 50 | &.disabled { 51 | color: $nav-link-disabled-color; 52 | background-color: transparent; 53 | border-color: transparent; 54 | } 55 | } 56 | 57 | .nav-link.active, 58 | .nav-item.show .nav-link { 59 | color: $nav-tabs-link-active-color; 60 | background-color: $nav-tabs-link-active-bg; 61 | border-color: $nav-tabs-link-active-border-color; 62 | } 63 | 64 | .dropdown-menu { 65 | // Make dropdown border overlap tab border 66 | margin-top: -$nav-tabs-border-width; 67 | // Remove the top rounded corners here since there is a hard edge above the menu 68 | @include border-top-radius(0); 69 | } 70 | } 71 | 72 | 73 | // 74 | // Pills 75 | // 76 | 77 | .nav-pills { 78 | .nav-link { 79 | @include border-radius($nav-pills-border-radius); 80 | } 81 | 82 | .nav-link.active, 83 | .show > .nav-link { 84 | color: $nav-pills-link-active-color; 85 | background-color: $nav-pills-link-active-bg; 86 | } 87 | } 88 | 89 | 90 | // 91 | // Justified variants 92 | // 93 | 94 | .nav-fill { 95 | > .nav-link, 96 | .nav-item { 97 | flex: 1 1 auto; 98 | text-align: center; 99 | } 100 | } 101 | 102 | .nav-justified { 103 | > .nav-link, 104 | .nav-item { 105 | flex-basis: 0; 106 | flex-grow: 1; 107 | text-align: center; 108 | } 109 | } 110 | 111 | 112 | // Tabbable tabs 113 | // 114 | // Hide tabbable panes to start, show them when `.active` 115 | 116 | .tab-content { 117 | > .tab-pane { 118 | display: none; 119 | } 120 | > .active { 121 | display: block; 122 | } 123 | } 124 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [Templatecookie](https://templatecookie.com) 2 | Templatecookie.com creates quality templates and php scripts. Templatecookie has many free HTML & Figma templates available for professional use. Templatecookie is famous for its premium PHP Scripts available on [Codeanyon Marketplace](https://codecanyon.net/user/templatecookie). Browse [Templatecookie](https://templatecookie.com) today and discover awesome digital products. 3 | 4 | # [Olog eCommerce Responsive HTML Template](https://olog-ecommerce-template.netlify.app/) 5 | 6 | > Olog eCommerce Responsive HTML Template based on bootstrap framework v4.5. 7 | 8 | This project is a bootstrap version [Olog eCommerce Responsive HTML Template](https://olog-ecommerce-template.netlify.app/) designed with HTML, CSS, SCSS, Bootstrap, Javascript & Jquery. 9 | 10 | Check the [Live Demo here](https://olog-ecommerce-template.netlify.app/). 11 | 12 |  13 | 14 | ## Technology We used 15 | - HTML 5 16 | - CSS 3 17 | - SCSS 18 | - Bootstrap 19 | - Fontawesome Icons 20 | - Javascript & jQuery 21 | - Webpack 4 22 | - Autoprefixer 23 | 24 | ## Credits 25 | - Design by coded by [Zakir Soft](https://zakirsoft.com) 26 | - Fonts by Google Fonts - [Poppins](https://fonts.google.com/specimen/Poppins) 27 | - Images from [Unsplash.com](http://unsplash.com) 28 | - SVG Icons from [Feather Icons](https://feathericons.com) 29 | 30 | ## License 31 | The MIT License (MIT). Please see [License File](LICENSE.md) for more information. 32 | 33 | # Webpack Boilerplate 34 | This repository contains Webpack and SCSS boilerplate code to quickly get started on building a webpage following a simplified version of SASS (7-1 pattern). 35 | 36 | 37 | ## Project Setup 38 | ### Installing 39 | Run `npm install` to install all the dependencies this project needs. 40 | 41 | ### Running the app 42 | Run `npm run dev`. Your browser should automatically open a new tab where you can see your app. 43 | *Note :* live reload is enabled so just modify your files and it will be reflected on the app instantly. 44 | 45 | ### Building the app 46 | Run `npm run build`. It will automatically add vendor prefixes to CSS rules and compress all your `.scss` files into one `style.css` file located in your `dist` folder. 47 | 48 | 49 | ## SASS folder structure 50 | It contains these folder and files : 51 | 52 | - `abstracts` : functions, variables 53 | - `base` : reset, typography, 54 | - `components` : buttons, form 55 | - `layout` : footer, header, nav, breadcrumb 56 | - `pages` : contact, home, 57 | - `themes` : theme 58 | - `vendors` : bootstrap, fontawesome 59 | 60 | ## Included Framework and Libraries 61 | - `fontawesome` - Font Library 62 | 63 | ## Webpack Dependencies 64 | - Webpack 65 | - Babel 66 | - File Loader 67 | - CSS Loader 68 | - Node SASS 69 | - SASS Loader 70 | - Post CSS 71 | - Autoprefixer 72 | - Purge CSS 73 | - Mini CSS Extractor Plugin 74 | 75 | 76 | 77 | 78 | -------------------------------------------------------------------------------- /src/scss/vendors/plugin/js/jquery.nice-select.min.js: -------------------------------------------------------------------------------- 1 | /* jQuery Nice Select - v1.0 2 | https://github.com/hernansartorio/jquery-nice-select 3 | Made by Hernán Sartorio */ 4 | !function(e){e.fn.niceSelect=function(t){function s(t){t.after(e("").addClass("nice-select").addClass(t.attr("class")||"").addClass(t.attr("disabled")?"disabled":"").attr("tabindex",t.attr("disabled")?null:"0").html(''));var s=t.next(),n=t.find("option"),i=t.find("option:selected");s.find(".current").html(i.data("display")||i.text()),n.each(function(t){var n=e(this),i=n.data("display");s.find("ul").append(e("").attr("data-value",n.val()).attr("data-display",i||null).addClass("option"+(n.is(":selected")?" selected":"")+(n.is(":disabled")?" disabled":"")).html(n.text()))})}if("string"==typeof t)return"update"==t?this.each(function(){var t=e(this),n=e(this).next(".nice-select"),i=n.hasClass("open");n.length&&(n.remove(),s(t),i&&t.next().trigger("click"))}):"destroy"==t?(this.each(function(){var t=e(this),s=e(this).next(".nice-select");s.length&&(s.remove(),t.css("display",""))}),0==e(".nice-select").length&&e(document).off(".nice_select")):console.log('Method "'+t+'" does not exist.'),this;this.hide(),this.each(function(){var t=e(this);t.next().hasClass("nice-select")||s(t)}),e(document).off(".nice_select"),e(document).on("click.nice_select",".nice-select",function(t){var s=e(this);e(".nice-select").not(s).removeClass("open"),s.toggleClass("open"),s.hasClass("open")?(s.find(".option"),s.find(".focus").removeClass("focus"),s.find(".selected").addClass("focus")):s.focus()}),e(document).on("click.nice_select",function(t){0===e(t.target).closest(".nice-select").length&&e(".nice-select").removeClass("open").find(".option")}),e(document).on("click.nice_select",".nice-select .option:not(.disabled)",function(t){var s=e(this),n=s.closest(".nice-select");n.find(".selected").removeClass("selected"),s.addClass("selected");var i=s.data("display")||s.text();n.find(".current").text(i),n.prev("select").val(s.data("value")).trigger("change")}),e(document).on("keydown.nice_select",".nice-select",function(t){var s=e(this),n=e(s.find(".focus")||s.find(".list .option.selected"));if(32==t.keyCode||13==t.keyCode)return s.hasClass("open")?n.trigger("click"):s.trigger("click"),!1;if(40==t.keyCode){if(s.hasClass("open")){var i=n.nextAll(".option:not(.disabled)").first();i.length>0&&(s.find(".focus").removeClass("focus"),i.addClass("focus"))}else s.trigger("click");return!1}if(38==t.keyCode){if(s.hasClass("open")){var l=n.prevAll(".option:not(.disabled)").first();l.length>0&&(s.find(".focus").removeClass("focus"),l.addClass("focus"))}else s.trigger("click");return!1}if(27==t.keyCode)s.hasClass("open")&&s.trigger("click");else if(9==t.keyCode&&s.hasClass("open"))return!1});var n=document.createElement("a").style;return n.cssText="pointer-events:auto","auto"!==n.pointerEvents&&e("html").addClass("no-csspointerevents"),this}}(jQuery); -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/_type.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable declaration-no-important, selector-list-comma-newline-after 2 | 3 | // 4 | // Headings 5 | // 6 | 7 | h1, h2, h3, h4, h5, h6, 8 | .h1, .h2, .h3, .h4, .h5, .h6 { 9 | margin-bottom: $headings-margin-bottom; 10 | font-family: $headings-font-family; 11 | font-weight: $headings-font-weight; 12 | line-height: $headings-line-height; 13 | color: $headings-color; 14 | } 15 | 16 | h1, .h1 { @include font-size($h1-font-size); } 17 | h2, .h2 { @include font-size($h2-font-size); } 18 | h3, .h3 { @include font-size($h3-font-size); } 19 | h4, .h4 { @include font-size($h4-font-size); } 20 | h5, .h5 { @include font-size($h5-font-size); } 21 | h6, .h6 { @include font-size($h6-font-size); } 22 | 23 | .lead { 24 | @include font-size($lead-font-size); 25 | font-weight: $lead-font-weight; 26 | } 27 | 28 | // Type display classes 29 | .display-1 { 30 | @include font-size($display1-size); 31 | font-weight: $display1-weight; 32 | line-height: $display-line-height; 33 | } 34 | .display-2 { 35 | @include font-size($display2-size); 36 | font-weight: $display2-weight; 37 | line-height: $display-line-height; 38 | } 39 | .display-3 { 40 | @include font-size($display3-size); 41 | font-weight: $display3-weight; 42 | line-height: $display-line-height; 43 | } 44 | .display-4 { 45 | @include font-size($display4-size); 46 | font-weight: $display4-weight; 47 | line-height: $display-line-height; 48 | } 49 | 50 | 51 | // 52 | // Horizontal rules 53 | // 54 | 55 | hr { 56 | margin-top: $hr-margin-y; 57 | margin-bottom: $hr-margin-y; 58 | border: 0; 59 | border-top: $hr-border-width solid $hr-border-color; 60 | } 61 | 62 | 63 | // 64 | // Emphasis 65 | // 66 | 67 | small, 68 | .small { 69 | @include font-size($small-font-size); 70 | font-weight: $font-weight-normal; 71 | } 72 | 73 | mark, 74 | .mark { 75 | padding: $mark-padding; 76 | background-color: $mark-bg; 77 | } 78 | 79 | 80 | // 81 | // Lists 82 | // 83 | 84 | .list-unstyled { 85 | @include list-unstyled(); 86 | } 87 | 88 | // Inline turns list items into inline-block 89 | .list-inline { 90 | @include list-unstyled(); 91 | } 92 | .list-inline-item { 93 | display: inline-block; 94 | 95 | &:not(:last-child) { 96 | margin-right: $list-inline-padding; 97 | } 98 | } 99 | 100 | 101 | // 102 | // Misc 103 | // 104 | 105 | // Builds on `abbr` 106 | .initialism { 107 | @include font-size(90%); 108 | text-transform: uppercase; 109 | } 110 | 111 | // Blockquotes 112 | .blockquote { 113 | margin-bottom: $spacer; 114 | @include font-size($blockquote-font-size); 115 | } 116 | 117 | .blockquote-footer { 118 | display: block; 119 | @include font-size($blockquote-small-font-size); 120 | color: $blockquote-small-color; 121 | 122 | &::before { 123 | content: "\2014\00A0"; // em dash, nbsp 124 | } 125 | } 126 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/utilities/_flex.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable declaration-no-important 2 | 3 | // Flex variation 4 | // 5 | // Custom styles for additional flex alignment options. 6 | 7 | @each $breakpoint in map-keys($grid-breakpoints) { 8 | @include media-breakpoint-up($breakpoint) { 9 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints); 10 | 11 | .flex#{$infix}-row { flex-direction: row !important; } 12 | .flex#{$infix}-column { flex-direction: column !important; } 13 | .flex#{$infix}-row-reverse { flex-direction: row-reverse !important; } 14 | .flex#{$infix}-column-reverse { flex-direction: column-reverse !important; } 15 | 16 | .flex#{$infix}-wrap { flex-wrap: wrap !important; } 17 | .flex#{$infix}-nowrap { flex-wrap: nowrap !important; } 18 | .flex#{$infix}-wrap-reverse { flex-wrap: wrap-reverse !important; } 19 | .flex#{$infix}-fill { flex: 1 1 auto !important; } 20 | .flex#{$infix}-grow-0 { flex-grow: 0 !important; } 21 | .flex#{$infix}-grow-1 { flex-grow: 1 !important; } 22 | .flex#{$infix}-shrink-0 { flex-shrink: 0 !important; } 23 | .flex#{$infix}-shrink-1 { flex-shrink: 1 !important; } 24 | 25 | .justify-content#{$infix}-start { justify-content: flex-start !important; } 26 | .justify-content#{$infix}-end { justify-content: flex-end !important; } 27 | .justify-content#{$infix}-center { justify-content: center !important; } 28 | .justify-content#{$infix}-between { justify-content: space-between !important; } 29 | .justify-content#{$infix}-around { justify-content: space-around !important; } 30 | 31 | .align-items#{$infix}-start { align-items: flex-start !important; } 32 | .align-items#{$infix}-end { align-items: flex-end !important; } 33 | .align-items#{$infix}-center { align-items: center !important; } 34 | .align-items#{$infix}-baseline { align-items: baseline !important; } 35 | .align-items#{$infix}-stretch { align-items: stretch !important; } 36 | 37 | .align-content#{$infix}-start { align-content: flex-start !important; } 38 | .align-content#{$infix}-end { align-content: flex-end !important; } 39 | .align-content#{$infix}-center { align-content: center !important; } 40 | .align-content#{$infix}-between { align-content: space-between !important; } 41 | .align-content#{$infix}-around { align-content: space-around !important; } 42 | .align-content#{$infix}-stretch { align-content: stretch !important; } 43 | 44 | .align-self#{$infix}-auto { align-self: auto !important; } 45 | .align-self#{$infix}-start { align-self: flex-start !important; } 46 | .align-self#{$infix}-end { align-self: flex-end !important; } 47 | .align-self#{$infix}-center { align-self: center !important; } 48 | .align-self#{$infix}-baseline { align-self: baseline !important; } 49 | .align-self#{$infix}-stretch { align-self: stretch !important; } 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | let webpack = require('webpack'); 2 | let path = require('path'); 3 | const glob = require('glob') 4 | const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 5 | const PurgecssPlugin = require('purgecss-webpack-plugin') 6 | 7 | 8 | 9 | module.exports = { 10 | entry: [ 11 | './src/js/main.js', 12 | './src/scss/main.scss' 13 | ], 14 | 15 | output: { 16 | path: path.resolve(__dirname, 'dist'), 17 | filename: 'main.js', 18 | }, 19 | module: { 20 | rules: [ 21 | { 22 | test: /\.js$/, 23 | exclude: /node_modules/, 24 | loader: 'babel-loader' 25 | }, 26 | { 27 | test: /\.(png|jpe?g|gif)$/i, 28 | use: [ 29 | { 30 | loader: 'file-loader', 31 | options: { 32 | name: '[name].[hash].[ext]', 33 | outputPath: 'images', 34 | }, 35 | }, 36 | ], 37 | }, 38 | { 39 | test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/, 40 | use: [ 41 | { 42 | loader: 'file-loader', 43 | options: { 44 | name: '[name].[hash].[ext]', 45 | outputPath: 'fonts' 46 | } 47 | } 48 | ] 49 | }, 50 | { 51 | test: /\.s[ac]ss$/i, 52 | use: [ 53 | MiniCssExtractPlugin.loader, 54 | { 55 | loader: 'css-loader', 56 | options: { 57 | sourceMap: true, 58 | url: true, 59 | }, 60 | }, 61 | { 62 | loader: 'postcss-loader', 63 | options: { 64 | sourceMap: true, 65 | config: { 66 | path: 'postcss.config.js' 67 | } 68 | } 69 | }, 70 | { 71 | loader: 'sass-loader', 72 | options: { 73 | sourceMap: true, 74 | }, 75 | }, 76 | ], 77 | }, 78 | ] 79 | }, 80 | 81 | plugins: [ 82 | new MiniCssExtractPlugin({ 83 | filename: '[name].css', 84 | chunkFilename: '[id].css', 85 | }), 86 | 87 | // new PurgecssPlugin({ 88 | // paths: glob.sync(path.join(__dirname, '*.html'), { nodir: true }), 89 | 90 | // }), 91 | ], 92 | } 93 | 94 | if(process.env.NODE_ENV === 'production'){ 95 | module.exports.plugins.push( 96 | new webpack.optimize.UglifyJsPlugin() 97 | ) 98 | } 99 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/_tooltip.scss: -------------------------------------------------------------------------------- 1 | // Base class 2 | .tooltip { 3 | position: absolute; 4 | z-index: $zindex-tooltip; 5 | display: block; 6 | margin: $tooltip-margin; 7 | // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element. 8 | // So reset our font and text properties to avoid inheriting weird values. 9 | @include reset-text(); 10 | @include font-size($tooltip-font-size); 11 | // Allow breaking very long words so they don't overflow the tooltip's bounds 12 | word-wrap: break-word; 13 | opacity: 0; 14 | 15 | &.show { opacity: $tooltip-opacity; } 16 | 17 | .arrow { 18 | position: absolute; 19 | display: block; 20 | width: $tooltip-arrow-width; 21 | height: $tooltip-arrow-height; 22 | 23 | &::before { 24 | position: absolute; 25 | content: ""; 26 | border-color: transparent; 27 | border-style: solid; 28 | } 29 | } 30 | } 31 | 32 | .bs-tooltip-top { 33 | padding: $tooltip-arrow-height 0; 34 | 35 | .arrow { 36 | bottom: 0; 37 | 38 | &::before { 39 | top: 0; 40 | border-width: $tooltip-arrow-height ($tooltip-arrow-width / 2) 0; 41 | border-top-color: $tooltip-arrow-color; 42 | } 43 | } 44 | } 45 | 46 | .bs-tooltip-right { 47 | padding: 0 $tooltip-arrow-height; 48 | 49 | .arrow { 50 | left: 0; 51 | width: $tooltip-arrow-height; 52 | height: $tooltip-arrow-width; 53 | 54 | &::before { 55 | right: 0; 56 | border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height ($tooltip-arrow-width / 2) 0; 57 | border-right-color: $tooltip-arrow-color; 58 | } 59 | } 60 | } 61 | 62 | .bs-tooltip-bottom { 63 | padding: $tooltip-arrow-height 0; 64 | 65 | .arrow { 66 | top: 0; 67 | 68 | &::before { 69 | bottom: 0; 70 | border-width: 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height; 71 | border-bottom-color: $tooltip-arrow-color; 72 | } 73 | } 74 | } 75 | 76 | .bs-tooltip-left { 77 | padding: 0 $tooltip-arrow-height; 78 | 79 | .arrow { 80 | right: 0; 81 | width: $tooltip-arrow-height; 82 | height: $tooltip-arrow-width; 83 | 84 | &::before { 85 | left: 0; 86 | border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height; 87 | border-left-color: $tooltip-arrow-color; 88 | } 89 | } 90 | } 91 | 92 | .bs-tooltip-auto { 93 | &[x-placement^="top"] { 94 | @extend .bs-tooltip-top; 95 | } 96 | &[x-placement^="right"] { 97 | @extend .bs-tooltip-right; 98 | } 99 | &[x-placement^="bottom"] { 100 | @extend .bs-tooltip-bottom; 101 | } 102 | &[x-placement^="left"] { 103 | @extend .bs-tooltip-left; 104 | } 105 | } 106 | 107 | // Wrapper for the tooltip content 108 | .tooltip-inner { 109 | max-width: $tooltip-max-width; 110 | padding: $tooltip-padding-y $tooltip-padding-x; 111 | color: $tooltip-color; 112 | text-align: center; 113 | background-color: $tooltip-bg; 114 | @include border-radius($tooltip-border-radius); 115 | } 116 | -------------------------------------------------------------------------------- /src/js/main.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function () { 2 | 3 | // Sticky Menu 4 | $(window).on('scroll', function () { 5 | var scroll = $(window).scrollTop(); 6 | if (scroll < 5) { 7 | $(".header-bottom").removeClass("sticky"); 8 | } else { 9 | $(".header-bottom").addClass("sticky"); 10 | } 11 | }); 12 | 13 | //Brand_slider 14 | $('.brand-area').slick({ 15 | infinite: true, 16 | slidesToShow: 5, 17 | slidesToScroll: 1, 18 | arrows: false, 19 | responsive: [ 20 | { 21 | breakpoint: 1024, 22 | settings: { 23 | slidesToShow: 3, 24 | slidesToScroll: 1, 25 | } 26 | }, 27 | { 28 | breakpoint: 600, 29 | settings: { 30 | slidesToShow: 2, 31 | slidesToScroll: 1 32 | } 33 | }, 34 | { 35 | breakpoint: 480, 36 | settings: { 37 | slidesToShow: 1, 38 | slidesToScroll: 1 39 | } 40 | } 41 | ] 42 | }); 43 | 44 | //testimonial_slider 45 | $('.features-active').slick({ 46 | infinite: true, 47 | slidesToShow: 3, 48 | slidesToScroll: 1, 49 | autoplay: true, 50 | arrows: true, 51 | autoplaySpeed: 2000, 52 | prevArrow: '.features-wrapper .prev-arrow', 53 | nextArrow: '.features-wrapper .next-arrow', 54 | responsive: [{ 55 | breakpoint: 1025, 56 | settings: { 57 | slidesToShow: 3, 58 | dots: true, 59 | }, 60 | }, 61 | { 62 | breakpoint: 480, 63 | settings: { 64 | slidesToShow: 1, 65 | dots: true, 66 | }, 67 | }, 68 | ], 69 | }); 70 | 71 | //Customersreview Slider 72 | $('.customersreview-active').slick({ 73 | infinite: true, 74 | slidesToShow: 2, 75 | slidesToScroll: 1, 76 | autoplay: false, 77 | arrows: true, 78 | autoplaySpeed: 2000, 79 | prevArrow: '.customersreview-wrapper .prev-arrow', 80 | nextArrow: '.customersreview-wrapper .next-arrow', 81 | responsive: [{ 82 | breakpoint: 1024, 83 | settings: { 84 | slidesToShow: 2, 85 | }, 86 | }, 87 | { 88 | breakpoint: 768, 89 | settings: { 90 | slidesToShow: 1, 91 | dots: true, 92 | }, 93 | }, 94 | { 95 | breakpoint: 481, 96 | settings: { 97 | slidesToShow: 1, 98 | dots: true, 99 | }, 100 | }, 101 | ], 102 | }); 103 | 104 | 105 | //Product Details Slider 106 | $("#exzoom").exzoom({ 107 | // thumbnail nav options 108 | "navWidth": 60, 109 | "navHeight": 60, 110 | "navItemNum": 5, 111 | "navItemMargin": 7, 112 | "navBorder": 0, 113 | // autoplay 114 | "autoPlay": false, 115 | // autoplay interval in milliseconds 116 | "autoPlayTimeout": 2000 117 | 118 | }); 119 | 120 | //Active size 121 | $('#sizes li').on('click', function () { 122 | $(this).addClass('active').siblings().removeClass('active'); 123 | }); 124 | 125 | 126 | //Active color 127 | $('#colors li').on('click', function () { 128 | $(this).addClass('active').siblings().removeClass('active'); 129 | }); 130 | 131 | 132 | }); 133 | 134 | //nice-select 135 | $(document).ready(function () { 136 | $('select').niceSelect(); 137 | }); 138 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/_buttons.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable selector-no-qualifying-type 2 | 3 | // 4 | // Base styles 5 | // 6 | 7 | .btn { 8 | display: inline-block; 9 | font-family: $btn-font-family; 10 | font-weight: $btn-font-weight; 11 | color: $body-color; 12 | text-align: center; 13 | text-decoration: if($link-decoration == none, null, none); 14 | white-space: $btn-white-space; 15 | vertical-align: middle; 16 | user-select: none; 17 | background-color: transparent; 18 | border: $btn-border-width solid transparent; 19 | @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius); 20 | @include transition($btn-transition); 21 | 22 | @include hover() { 23 | color: $body-color; 24 | text-decoration: none; 25 | } 26 | 27 | &:focus, 28 | &.focus { 29 | outline: 0; 30 | box-shadow: $btn-focus-box-shadow; 31 | } 32 | 33 | // Disabled comes first so active can properly restyle 34 | &.disabled, 35 | &:disabled { 36 | opacity: $btn-disabled-opacity; 37 | @include box-shadow(none); 38 | } 39 | 40 | &:not(:disabled):not(.disabled) { 41 | cursor: if($enable-pointer-cursor-for-buttons, pointer, null); 42 | 43 | &:active, 44 | &.active { 45 | @include box-shadow($btn-active-box-shadow); 46 | 47 | &:focus { 48 | @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow); 49 | } 50 | } 51 | } 52 | } 53 | 54 | // Future-proof disabling of clicks on `` elements 55 | a.btn.disabled, 56 | fieldset:disabled a.btn { 57 | pointer-events: none; 58 | } 59 | 60 | 61 | // 62 | // Alternate buttons 63 | // 64 | 65 | @each $color, $value in $theme-colors { 66 | .btn-#{$color} { 67 | @include button-variant($value, $value); 68 | } 69 | } 70 | 71 | @each $color, $value in $theme-colors { 72 | .btn-outline-#{$color} { 73 | @include button-outline-variant($value); 74 | } 75 | } 76 | 77 | 78 | // 79 | // Link buttons 80 | // 81 | 82 | // Make a button look and behave like a link 83 | .btn-link { 84 | font-weight: $font-weight-normal; 85 | color: $link-color; 86 | text-decoration: $link-decoration; 87 | 88 | @include hover() { 89 | color: $link-hover-color; 90 | text-decoration: $link-hover-decoration; 91 | } 92 | 93 | &:focus, 94 | &.focus { 95 | text-decoration: $link-hover-decoration; 96 | } 97 | 98 | &:disabled, 99 | &.disabled { 100 | color: $btn-link-disabled-color; 101 | pointer-events: none; 102 | } 103 | 104 | // No need for an active state here 105 | } 106 | 107 | 108 | // 109 | // Button Sizes 110 | // 111 | 112 | .btn-lg { 113 | @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg); 114 | } 115 | 116 | .btn-sm { 117 | @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm); 118 | } 119 | 120 | 121 | // 122 | // Block button 123 | // 124 | 125 | .btn-block { 126 | display: block; 127 | width: 100%; 128 | 129 | // Vertically space out multiple block buttons 130 | + .btn-block { 131 | margin-top: $btn-block-spacing-y; 132 | } 133 | } 134 | 135 | // Specificity overrides 136 | input[type="submit"], 137 | input[type="reset"], 138 | input[type="button"] { 139 | &.btn-block { 140 | width: 100%; 141 | } 142 | } 143 | -------------------------------------------------------------------------------- /src/scss/pages/_verify.scss: -------------------------------------------------------------------------------- 1 | .verify-area { 2 | padding: 100px 0px; 3 | background-color: $gray; 4 | 5 | &-email { 6 | margin: 0 auto; 7 | max-width: 600px; 8 | background-color: #FFFFFF; 9 | padding: 45px; 10 | border-radius: 5px; 11 | 12 | .text { 13 | margin-bottom: 35px; 14 | 15 | h5 { 16 | margin-bottom: 12px; 17 | color: $black; 18 | font-weight: 600; 19 | font-size: 32px; 20 | } 21 | 22 | p { 23 | font-size: 16px; 24 | color: $lightBlack; 25 | line-height: 24px; 26 | 27 | a { 28 | color: $black; 29 | } 30 | } 31 | } 32 | 33 | .verify { 34 | &-input{ 35 | margin-bottom: 50px; 36 | .box-input{ 37 | input{ 38 | width: 72px; 39 | height: 80px; 40 | border: 2px solid #EFEFEF; 41 | border-radius: 5px; 42 | text-align: center; 43 | } 44 | } 45 | } 46 | button { 47 | width: 100%; 48 | padding: 15px 0px; 49 | color: #FFFFFF; 50 | font-size: 14px; 51 | font-weight: 500; 52 | text-transform: uppercase; 53 | border-radius: 4px; 54 | border: none; 55 | background-color: $gray; 56 | } 57 | } 58 | } 59 | } 60 | 61 | // Responsive 62 | // large devices 992px - 1169px 63 | @media (min-width: 992px) and (max-width: 1200px) {} 64 | 65 | // Medium devices 768px - 991px 66 | @media (min-width: 768px) and (max-width: 991px) { 67 | .verify-area { 68 | padding: 70px 0px; 69 | } 70 | } 71 | 72 | // Small devices 575px - 767px 73 | @media (min-width: 575px) and (max-width: 767px) { 74 | .verify-area { 75 | padding: 50px 0px; 76 | } 77 | 78 | .verify-area-email .verify-input .box-input { 79 | margin-bottom: 15px; 80 | } 81 | .verify-area-email .verify-input{ 82 | margin-bottom: 25px; 83 | } 84 | .verify-area-email .verify-input .box-input input{ 85 | width: 60px; 86 | height: 60px; 87 | } 88 | } 89 | 90 | // Small devices 420px - 574px 91 | @media only screen and (min-width: 420px) and (max-width: 574px) { 92 | .verify-area { 93 | padding: 30px 0px; 94 | } 95 | .verify-area-email .text h5 { 96 | text-align: center; 97 | } 98 | .verify-area-email .verify-input .box-input input { 99 | width: 43px; 100 | height: 50px; 101 | } 102 | } 103 | 104 | // extra Small devices 420px 105 | @media (max-width: 420px) { 106 | .verify-area { 107 | padding: 30px 0px; 108 | padding-bottom: 55px; 109 | } 110 | 111 | .verify-area-email { 112 | padding: 20px; 113 | } 114 | 115 | .verify-area-email .verify-input{ 116 | margin-bottom: 20px; 117 | } 118 | 119 | .verify-area-email .verify-input .box-input{ 120 | margin-bottom: 20px; 121 | } 122 | 123 | .verify-area-email .text h5 { 124 | text-align: center; 125 | } 126 | } 127 | -------------------------------------------------------------------------------- /src/scss/layout/_banner.scss: -------------------------------------------------------------------------------- 1 | .banner-area { 2 | &__content { 3 | h2 { 4 | font-size: 58px; 5 | font-weight: 600; 6 | line-height: 66px; 7 | margin-bottom: 16px; 8 | } 9 | 10 | p { 11 | margin-bottom: 32px; 12 | } 13 | } 14 | 15 | &__img { 16 | padding: 107px 0 87px 0; 17 | 18 | img { 19 | border-radius: 60px 8px 8px 8px; 20 | } 21 | } 22 | } 23 | 24 | // /* large devices 992 - 1169*/ 25 | @media (min-width: 992px) and (max-width: 1200px) { 26 | .banner-area { 27 | &__content { 28 | h2 { 29 | font-size: 50px; 30 | line-height: 58px; 31 | } 32 | } 33 | } 34 | } 35 | 36 | // / Medium devices 768 - 991 / 37 | @media (min-width: 768px) and (max-width: 991px) { 38 | 39 | .banner-area { 40 | padding-top: 70px; 41 | 42 | &__content { 43 | padding: 0; 44 | margin: 0; 45 | 46 | h2 { 47 | font-size: 40px; 48 | line-height: 48px; 49 | } 50 | 51 | p { 52 | margin-bottom: 15px; 53 | } 54 | } 55 | 56 | &__img { 57 | padding: 0; 58 | margin-bottom: 50px; 59 | img{ 60 | width: 100%; 61 | } 62 | } 63 | &__content{ 64 | margin-bottom: 20px; 65 | } 66 | 67 | } 68 | } 69 | 70 | // / Small devices 575 - 767 / 71 | @media (min-width: 575px) and (max-width: 767px) { 72 | .banner-area { 73 | padding-top: 60px; 74 | 75 | &__content { 76 | padding: 0; 77 | margin: 0; 78 | 79 | h2 { 80 | font-size: 32px; 81 | line-height: 40px; 82 | margin-bottom: 10px; 83 | } 84 | 85 | p { 86 | margin-bottom: 15px; 87 | font-size: 14px; 88 | line-height: 22px; 89 | } 90 | } 91 | 92 | &__img { 93 | padding: 0; 94 | margin-bottom: 45px; 95 | } 96 | } 97 | } 98 | 99 | 100 | // / Small devices 420 - 574 / 101 | @media only screen and (min-width: 420px) and (max-width: 575px) { 102 | .banner-area { 103 | padding-top: 50px; 104 | 105 | &__content { 106 | padding: 0; 107 | margin: 0; 108 | 109 | h2 { 110 | font-size: 22px; 111 | line-height: 30px; 112 | margin-bottom: 5px; 113 | } 114 | 115 | p { 116 | margin-bottom: 15px; 117 | font-size: 14px; 118 | line-height: 22px; 119 | } 120 | } 121 | 122 | &__img { 123 | padding: 0; 124 | margin-bottom: 40px; 125 | } 126 | } 127 | } 128 | 129 | // / extra Small devices 420 / 130 | @media (max-width: 420px) { 131 | .banner-area { 132 | padding-top: 50px; 133 | 134 | &__content { 135 | padding: 0; 136 | margin: 0; 137 | 138 | h2 { 139 | font-size: 22px; 140 | line-height: 30px; 141 | margin-bottom: 5px; 142 | } 143 | 144 | p { 145 | margin-bottom: 15px; 146 | font-size: 14px; 147 | line-height: 22px; 148 | } 149 | } 150 | 151 | &__img { 152 | padding: 0; 153 | margin-bottom: 30px; 154 | } 155 | } 156 | } 157 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/_print.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable declaration-no-important, selector-no-qualifying-type 2 | 3 | // Source: https://github.com/h5bp/main.css/blob/master/src/_print.css 4 | 5 | // ========================================================================== 6 | // Print styles. 7 | // Inlined to avoid the additional HTTP request: 8 | // https://www.phpied.com/delay-loading-your-print-css/ 9 | // ========================================================================== 10 | 11 | @if $enable-print-styles { 12 | @media print { 13 | *, 14 | *::before, 15 | *::after { 16 | // Bootstrap specific; comment out `color` and `background` 17 | //color: $black !important; // Black prints faster 18 | text-shadow: none !important; 19 | //background: transparent !important; 20 | box-shadow: none !important; 21 | } 22 | 23 | a { 24 | &:not(.btn) { 25 | text-decoration: underline; 26 | } 27 | } 28 | 29 | // Bootstrap specific; comment the following selector out 30 | //a[href]::after { 31 | // content: " (" attr(href) ")"; 32 | //} 33 | 34 | abbr[title]::after { 35 | content: " (" attr(title) ")"; 36 | } 37 | 38 | // Bootstrap specific; comment the following selector out 39 | // 40 | // Don't show links that are fragment identifiers, 41 | // or use the `javascript:` pseudo protocol 42 | // 43 | 44 | //a[href^="#"]::after, 45 | //a[href^="javascript:"]::after { 46 | // content: ""; 47 | //} 48 | 49 | pre { 50 | white-space: pre-wrap !important; 51 | } 52 | pre, 53 | blockquote { 54 | border: $border-width solid $gray-500; // Bootstrap custom code; using `$border-width` instead of 1px 55 | page-break-inside: avoid; 56 | } 57 | 58 | // 59 | // Printing Tables: 60 | // https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables 61 | // 62 | 63 | thead { 64 | display: table-header-group; 65 | } 66 | 67 | tr, 68 | img { 69 | page-break-inside: avoid; 70 | } 71 | 72 | p, 73 | h2, 74 | h3 { 75 | orphans: 3; 76 | widows: 3; 77 | } 78 | 79 | h2, 80 | h3 { 81 | page-break-after: avoid; 82 | } 83 | 84 | // Bootstrap specific changes start 85 | 86 | // Specify a size and min-width to make printing closer across browsers. 87 | // We don't set margin here because it breaks `size` in Chrome. We also 88 | // don't use `!important` on `size` as it breaks in Chrome. 89 | @page { 90 | size: $print-page-size; 91 | } 92 | body { 93 | min-width: $print-body-min-width !important; 94 | } 95 | .container { 96 | min-width: $print-body-min-width !important; 97 | } 98 | 99 | // Bootstrap components 100 | .navbar { 101 | display: none; 102 | } 103 | .badge { 104 | border: $border-width solid $black; 105 | } 106 | 107 | .table { 108 | border-collapse: collapse !important; 109 | 110 | td, 111 | th { 112 | background-color: $white !important; 113 | } 114 | } 115 | 116 | .table-bordered { 117 | th, 118 | td { 119 | border: 1px solid $gray-300 !important; 120 | } 121 | } 122 | 123 | .table-dark { 124 | color: inherit; 125 | 126 | th, 127 | td, 128 | thead th, 129 | tbody + tbody { 130 | border-color: $table-border-color; 131 | } 132 | } 133 | 134 | .table .thead-dark th { 135 | color: inherit; 136 | border-color: $table-border-color; 137 | } 138 | 139 | // Bootstrap specific changes end 140 | } 141 | } 142 | -------------------------------------------------------------------------------- /dist/images/company-image/masterclass.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/mixins/_buttons.scss: -------------------------------------------------------------------------------- 1 | // Button variants 2 | // 3 | // Easily pump out default styles, as well as :hover, :focus, :active, 4 | // and disabled options for all buttons 5 | 6 | @mixin button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) { 7 | color: color-yiq($background); 8 | @include gradient-bg($background); 9 | border-color: $border; 10 | @include box-shadow($btn-box-shadow); 11 | 12 | @include hover() { 13 | color: color-yiq($hover-background); 14 | @include gradient-bg($hover-background); 15 | border-color: $hover-border; 16 | } 17 | 18 | &:focus, 19 | &.focus { 20 | color: color-yiq($hover-background); 21 | @include gradient-bg($hover-background); 22 | border-color: $hover-border; 23 | @if $enable-shadows { 24 | @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5)); 25 | } @else { 26 | // Avoid using mixin so we can pass custom focus shadow properly 27 | box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5); 28 | } 29 | } 30 | 31 | // Disabled comes first so active can properly restyle 32 | &.disabled, 33 | &:disabled { 34 | color: color-yiq($background); 35 | background-color: $background; 36 | border-color: $border; 37 | // Remove CSS gradients if they're enabled 38 | @if $enable-gradients { 39 | background-image: none; 40 | } 41 | } 42 | 43 | &:not(:disabled):not(.disabled):active, 44 | &:not(:disabled):not(.disabled).active, 45 | .show > &.dropdown-toggle { 46 | color: color-yiq($active-background); 47 | background-color: $active-background; 48 | @if $enable-gradients { 49 | background-image: none; // Remove the gradient for the pressed/active state 50 | } 51 | border-color: $active-border; 52 | 53 | &:focus { 54 | @if $enable-shadows and $btn-active-box-shadow != none { 55 | @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5)); 56 | } @else { 57 | // Avoid using mixin so we can pass custom focus shadow properly 58 | box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5); 59 | } 60 | } 61 | } 62 | } 63 | 64 | @mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) { 65 | color: $color; 66 | border-color: $color; 67 | 68 | @include hover() { 69 | color: $color-hover; 70 | background-color: $active-background; 71 | border-color: $active-border; 72 | } 73 | 74 | &:focus, 75 | &.focus { 76 | box-shadow: 0 0 0 $btn-focus-width rgba($color, .5); 77 | } 78 | 79 | &.disabled, 80 | &:disabled { 81 | color: $color; 82 | background-color: transparent; 83 | } 84 | 85 | &:not(:disabled):not(.disabled):active, 86 | &:not(:disabled):not(.disabled).active, 87 | .show > &.dropdown-toggle { 88 | color: color-yiq($active-background); 89 | background-color: $active-background; 90 | border-color: $active-border; 91 | 92 | &:focus { 93 | @if $enable-shadows and $btn-active-box-shadow != none { 94 | @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5)); 95 | } @else { 96 | // Avoid using mixin so we can pass custom focus shadow properly 97 | box-shadow: 0 0 0 $btn-focus-width rgba($color, .5); 98 | } 99 | } 100 | } 101 | } 102 | 103 | // Button sizes 104 | @mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) { 105 | padding: $padding-y $padding-x; 106 | @include font-size($font-size); 107 | line-height: $line-height; 108 | // Manually declare to provide an override to the browser default 109 | @include border-radius($border-radius, 0); 110 | } 111 | -------------------------------------------------------------------------------- /src/scss/base/_reset.scss: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | outline: 0; 5 | } 6 | 7 | body { 8 | font-family: $font; 9 | font-weight: normal; 10 | font-style: normal; 11 | color: $black; 12 | } 13 | 14 | img { 15 | border: 0; 16 | outline: 0; 17 | max-width: 100%; 18 | } 19 | 20 | html { 21 | scroll-behavior: smooth; 22 | } 23 | 24 | @media (min-width: 1200px) { 25 | 26 | .container, 27 | .container-sm, 28 | .container-md, 29 | .container-lg, 30 | .container-xl { 31 | max-width: 1170px; 32 | } 33 | } 34 | 35 | a, 36 | .button { 37 | -webkit-transition: all 0.3s ease-out 0s; 38 | -moz-transition: all 0.3s ease-out 0s; 39 | -ms-transition: all 0.3s ease-out 0s; 40 | -o-transition: all 0.3s ease-out 0s; 41 | transition: all 0.3s ease-out 0s; 42 | } 43 | 44 | a:focus, 45 | .button:focus { 46 | text-decoration: none; 47 | outline: none; 48 | } 49 | 50 | a:focus, 51 | a:hover, 52 | .portfolio-cat a:hover, 53 | .footer -menu li a:hover { 54 | text-decoration: none; 55 | } 56 | 57 | a, 58 | button { 59 | color: #1696e7; 60 | outline: medium none; 61 | } 62 | .btn:focus, 63 | button:focus { 64 | box-shadow: none !important; 65 | } 66 | 67 | button:focus, 68 | input:focus, 69 | input:focus, 70 | textarea, 71 | textarea:focus { 72 | outline: 0 73 | } 74 | 75 | .mt-15 { 76 | margin-top: 15px; 77 | } 78 | 79 | .mt-30 { 80 | margin-top: 30px; 81 | } 82 | 83 | h1, 84 | h2, 85 | h3, 86 | h4, 87 | h5, 88 | h6 { 89 | color: #2c303e; 90 | margin: 0px; 91 | font-style: normal; 92 | font-weight: 600; 93 | } 94 | h6{ 95 | margin-bottom: 10px; 96 | } 97 | ul { 98 | margin: 0px; 99 | padding: 0px; 100 | } 101 | 102 | li { 103 | list-style: none 104 | } 105 | 106 | p { 107 | font-size: 16px; 108 | font-weight: normal; 109 | line-height: 1.2; 110 | color: $lightBlack; 111 | margin: 0; 112 | } 113 | 114 | 115 | *::-moz-selection { 116 | background: #d6b161; 117 | color: #fff; 118 | text-shadow: none; 119 | } 120 | 121 | ::-moz-selection { 122 | background: #444; 123 | color: #fff; 124 | text-shadow: none; 125 | } 126 | 127 | ::selection { 128 | background: #444; 129 | color: #fff; 130 | text-shadow: none; 131 | } 132 | 133 | *::-moz-placeholder { 134 | color: #999999; 135 | font-size: 14px; 136 | opacity: 1; 137 | } 138 | 139 | *::placeholder { 140 | color: #999999; 141 | font-size: 14px; 142 | opacity: 1; 143 | } 144 | 145 | .section-title { 146 | margin-bottom: 50px; 147 | h2{ 148 | color: $black; 149 | font-size: 40px; 150 | line-height: 1.1; 151 | text-align: center; 152 | } 153 | } 154 | 155 | // Placeholder 156 | .bg-lightwhite { 157 | background-color: #FAFAFA; 158 | } 159 | 160 | .sticky { 161 | position: fixed; 162 | top: 0; 163 | left: 0; 164 | width: 100%; 165 | z-index: 99; 166 | background-color: #FCFCFC; 167 | box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.05); 168 | } 169 | 170 | .nice-select{ 171 | width: 100% !important; 172 | } 173 | 174 | // large devices 992px - 1169px 175 | @media (min-width: 992px) and (max-width: 1200px) { 176 | .section-title { 177 | h2{ 178 | font-size: 38px; 179 | } 180 | } 181 | } 182 | 183 | // Medium devices 768px - 991px 184 | @media (min-width: 768px) and (max-width: 991px) { 185 | .section-title { 186 | margin-bottom: 45px; 187 | h2{ 188 | font-size: 32px; 189 | } 190 | } 191 | } 192 | 193 | // Small devices 575px - 767px 194 | @media (min-width: 575px) and (max-width: 767px) { 195 | .section-title { 196 | margin-bottom: 35px; 197 | h2{ 198 | font-size: 28px; 199 | } 200 | } 201 | } 202 | 203 | // Small devices 420px - 574px 204 | @media only screen and (min-width: 420px) and (max-width: 574px) { 205 | .section-title { 206 | margin-bottom: 35px; 207 | h2{ 208 | font-size: 28px; 209 | } 210 | } 211 | } 212 | 213 | // extra Small devices 420px 214 | @media (max-width: 420px) { 215 | *::-moz-placeholder { 216 | font-size: 12px; 217 | } 218 | 219 | *::placeholder { 220 | font-size: 10px; 221 | } 222 | .section-title { 223 | margin-bottom: 35px; 224 | h2{ 225 | font-size: 28px; 226 | } 227 | } 228 | 229 | } 230 | -------------------------------------------------------------------------------- /src/scss/components/_product-item.scss: -------------------------------------------------------------------------------- 1 | .populerproduct { 2 | background-color: rgba(239, 239, 239, 0.4); 3 | padding: 100px 0 20px 0; 4 | 5 | .product-item { 6 | margin-bottom: 50px; 7 | } 8 | } 9 | 10 | .product-item { 11 | &-image { 12 | position: relative; 13 | margin-bottom: 22px; 14 | 15 | img { 16 | border-radius: 12px; 17 | } 18 | 19 | .cart-icon { 20 | position: absolute; 21 | top: 0; 22 | right: 0; 23 | padding: 6%; 24 | display: flex; 25 | 26 | a { 27 | margin-left: 8px; 28 | height: 36px; 29 | width: 36px; 30 | background-color: #ffffff; 31 | border-radius: 50%; 32 | display: flex; 33 | align-items: center; 34 | justify-content: center; 35 | 36 | i { 37 | color: $black; 38 | transform: scale(1); 39 | } 40 | 41 | &:hover { 42 | background-color: #EFEFEF; 43 | 44 | i { 45 | transform: scale(1.1); 46 | } 47 | 48 | } 49 | } 50 | } 51 | } 52 | 53 | &-info { 54 | a { 55 | font-size: 20px; 56 | font-weight: 600; 57 | margin-bottom: 6px; 58 | color: $black; 59 | display: block; 60 | } 61 | 62 | span { 63 | font-size: 16px; 64 | font-weight: 400; 65 | color: $black; 66 | display: inline-block; 67 | margin-right: 2px; 68 | } 69 | 70 | del { 71 | color: $lightBlack; 72 | font-size: 16px; 73 | font-weight: 400; 74 | } 75 | } 76 | } 77 | 78 | /*----------------------------------------*/ 79 | /* RESPONSIVE CSS START 80 | /*----------------------------------------*/ 81 | 82 | /* large devices 992 - 1169*/ 83 | @media (min-width: 992px) and (max-width: 1200px) { 84 | .product-item { 85 | &-image { 86 | margin-bottom: 15px; 87 | } 88 | 89 | &-info { 90 | a { 91 | font-size: 18px; 92 | } 93 | } 94 | } 95 | } 96 | 97 | /* Medium devices 768 - 991 */ 98 | @media (min-width: 768px) and (max-width: 991px) { 99 | .product-item { 100 | &-image { 101 | margin-bottom: 10px; 102 | } 103 | 104 | &-info { 105 | a { 106 | font-size: 16px; 107 | } 108 | } 109 | } 110 | } 111 | 112 | /* Small devices 575 - 767 */ 113 | @media (min-width: 575px) and (max-width: 767px) { 114 | .populerproduct{ 115 | 116 | padding: 70px 0 10px 0; 117 | } 118 | .product-item { 119 | &-image { 120 | margin-bottom: 10px; 121 | } 122 | 123 | &-info { 124 | a { 125 | font-size: 16px; 126 | } 127 | } 128 | } 129 | } 130 | 131 | 132 | /* Small devices 420 - 574 */ 133 | @media only screen and (min-width: 420px) and (max-width: 575px) { 134 | .populerproduct { 135 | padding: 70px 0 10px 0; 136 | .product-item { 137 | margin-bottom: 30px; 138 | 139 | img { 140 | margin: auto; 141 | width: 100%; 142 | } 143 | } 144 | } 145 | 146 | .product-item { 147 | &-image { 148 | margin-bottom: 15px; 149 | } 150 | 151 | &-info { 152 | a { 153 | font-size: 16px; 154 | } 155 | } 156 | } 157 | 158 | } 159 | 160 | /* extra Small devices 420 */ 161 | @media (max-width: 420px) { 162 | .populerproduct { 163 | padding: 50px 0 10px 0; 164 | 165 | .product-item { 166 | margin-bottom: 30px; 167 | } 168 | } 169 | 170 | .product-item { 171 | &-image { 172 | margin-bottom: 15px; 173 | } 174 | 175 | &-info { 176 | a { 177 | font-size: 16px; 178 | margin-bottom: 0; 179 | } 180 | } 181 | } 182 | } 183 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/_button-group.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable selector-no-qualifying-type 2 | 3 | // Make the div behave like a button 4 | .btn-group, 5 | .btn-group-vertical { 6 | position: relative; 7 | display: inline-flex; 8 | vertical-align: middle; // match .btn alignment given font-size hack above 9 | 10 | > .btn { 11 | position: relative; 12 | flex: 1 1 auto; 13 | 14 | // Bring the hover, focused, and "active" buttons to the front to overlay 15 | // the borders properly 16 | @include hover() { 17 | z-index: 1; 18 | } 19 | &:focus, 20 | &:active, 21 | &.active { 22 | z-index: 1; 23 | } 24 | } 25 | } 26 | 27 | // Optional: Group multiple button groups together for a toolbar 28 | .btn-toolbar { 29 | display: flex; 30 | flex-wrap: wrap; 31 | justify-content: flex-start; 32 | 33 | .input-group { 34 | width: auto; 35 | } 36 | } 37 | 38 | .btn-group { 39 | // Prevent double borders when buttons are next to each other 40 | > .btn:not(:first-child), 41 | > .btn-group:not(:first-child) { 42 | margin-left: -$btn-border-width; 43 | } 44 | 45 | // Reset rounded corners 46 | > .btn:not(:last-child):not(.dropdown-toggle), 47 | > .btn-group:not(:last-child) > .btn { 48 | @include border-right-radius(0); 49 | } 50 | 51 | > .btn:not(:first-child), 52 | > .btn-group:not(:first-child) > .btn { 53 | @include border-left-radius(0); 54 | } 55 | } 56 | 57 | // Sizing 58 | // 59 | // Remix the default button sizing classes into new ones for easier manipulation. 60 | 61 | .btn-group-sm > .btn { @extend .btn-sm; } 62 | .btn-group-lg > .btn { @extend .btn-lg; } 63 | 64 | 65 | // 66 | // Split button dropdowns 67 | // 68 | 69 | .dropdown-toggle-split { 70 | padding-right: $btn-padding-x * .75; 71 | padding-left: $btn-padding-x * .75; 72 | 73 | &::after, 74 | .dropup &::after, 75 | .dropright &::after { 76 | margin-left: 0; 77 | } 78 | 79 | .dropleft &::before { 80 | margin-right: 0; 81 | } 82 | } 83 | 84 | .btn-sm + .dropdown-toggle-split { 85 | padding-right: $btn-padding-x-sm * .75; 86 | padding-left: $btn-padding-x-sm * .75; 87 | } 88 | 89 | .btn-lg + .dropdown-toggle-split { 90 | padding-right: $btn-padding-x-lg * .75; 91 | padding-left: $btn-padding-x-lg * .75; 92 | } 93 | 94 | 95 | // The clickable button for toggling the menu 96 | // Set the same inset shadow as the :active state 97 | .btn-group.show .dropdown-toggle { 98 | @include box-shadow($btn-active-box-shadow); 99 | 100 | // Show no shadow for `.btn-link` since it has no other button styles. 101 | &.btn-link { 102 | @include box-shadow(none); 103 | } 104 | } 105 | 106 | 107 | // 108 | // Vertical button groups 109 | // 110 | 111 | .btn-group-vertical { 112 | flex-direction: column; 113 | align-items: flex-start; 114 | justify-content: center; 115 | 116 | > .btn, 117 | > .btn-group { 118 | width: 100%; 119 | } 120 | 121 | > .btn:not(:first-child), 122 | > .btn-group:not(:first-child) { 123 | margin-top: -$btn-border-width; 124 | } 125 | 126 | // Reset rounded corners 127 | > .btn:not(:last-child):not(.dropdown-toggle), 128 | > .btn-group:not(:last-child) > .btn { 129 | @include border-bottom-radius(0); 130 | } 131 | 132 | > .btn:not(:first-child), 133 | > .btn-group:not(:first-child) > .btn { 134 | @include border-top-radius(0); 135 | } 136 | } 137 | 138 | 139 | // Checkbox and radio options 140 | // 141 | // In order to support the browser's form validation feedback, powered by the 142 | // `required` attribute, we have to "hide" the inputs via `clip`. We cannot use 143 | // `display: none;` or `visibility: hidden;` as that also hides the popover. 144 | // Simply visually hiding the inputs via `opacity` would leave them clickable in 145 | // certain cases which is prevented by using `clip` and `pointer-events`. 146 | // This way, we ensure a DOM element is visible to position the popover from. 147 | // 148 | // See https://github.com/twbs/bootstrap/pull/12794 and 149 | // https://github.com/twbs/bootstrap/pull/14559 for more information. 150 | 151 | .btn-group-toggle { 152 | > .btn, 153 | > .btn-group > .btn { 154 | margin-bottom: 0; // Override default `` value 155 | 156 | input[type="radio"], 157 | input[type="checkbox"] { 158 | position: absolute; 159 | clip: rect(0, 0, 0, 0); 160 | pointer-events: none; 161 | } 162 | } 163 | } 164 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/_tables.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Basic Bootstrap table 3 | // 4 | 5 | .table { 6 | width: 100%; 7 | margin-bottom: $spacer; 8 | color: $table-color; 9 | background-color: $table-bg; // Reset for nesting within parents with `background-color`. 10 | 11 | th, 12 | td { 13 | padding: $table-cell-padding; 14 | vertical-align: top; 15 | border-top: $table-border-width solid $table-border-color; 16 | } 17 | 18 | thead th { 19 | vertical-align: bottom; 20 | border-bottom: (2 * $table-border-width) solid $table-border-color; 21 | } 22 | 23 | tbody + tbody { 24 | border-top: (2 * $table-border-width) solid $table-border-color; 25 | } 26 | } 27 | 28 | 29 | // 30 | // Condensed table w/ half padding 31 | // 32 | 33 | .table-sm { 34 | th, 35 | td { 36 | padding: $table-cell-padding-sm; 37 | } 38 | } 39 | 40 | 41 | // Border versions 42 | // 43 | // Add or remove borders all around the table and between all the columns. 44 | 45 | .table-bordered { 46 | border: $table-border-width solid $table-border-color; 47 | 48 | th, 49 | td { 50 | border: $table-border-width solid $table-border-color; 51 | } 52 | 53 | thead { 54 | th, 55 | td { 56 | border-bottom-width: 2 * $table-border-width; 57 | } 58 | } 59 | } 60 | 61 | .table-borderless { 62 | th, 63 | td, 64 | thead th, 65 | tbody + tbody { 66 | border: 0; 67 | } 68 | } 69 | 70 | // Zebra-striping 71 | // 72 | // Default zebra-stripe styles (alternating gray and transparent backgrounds) 73 | 74 | .table-striped { 75 | tbody tr:nth-of-type(#{$table-striped-order}) { 76 | background-color: $table-accent-bg; 77 | } 78 | } 79 | 80 | 81 | // Hover effect 82 | // 83 | // Placed here since it has to come after the potential zebra striping 84 | 85 | .table-hover { 86 | tbody tr { 87 | @include hover() { 88 | color: $table-hover-color; 89 | background-color: $table-hover-bg; 90 | } 91 | } 92 | } 93 | 94 | 95 | // Table backgrounds 96 | // 97 | // Exact selectors below required to override `.table-striped` and prevent 98 | // inheritance to nested tables. 99 | 100 | @each $color, $value in $theme-colors { 101 | @include table-row-variant($color, theme-color-level($color, $table-bg-level), theme-color-level($color, $table-border-level)); 102 | } 103 | 104 | @include table-row-variant(active, $table-active-bg); 105 | 106 | 107 | // Dark styles 108 | // 109 | // Same table markup, but inverted color scheme: dark background and light text. 110 | 111 | // stylelint-disable-next-line no-duplicate-selectors 112 | .table { 113 | .thead-dark { 114 | th { 115 | color: $table-dark-color; 116 | background-color: $table-dark-bg; 117 | border-color: $table-dark-border-color; 118 | } 119 | } 120 | 121 | .thead-light { 122 | th { 123 | color: $table-head-color; 124 | background-color: $table-head-bg; 125 | border-color: $table-border-color; 126 | } 127 | } 128 | } 129 | 130 | .table-dark { 131 | color: $table-dark-color; 132 | background-color: $table-dark-bg; 133 | 134 | th, 135 | td, 136 | thead th { 137 | border-color: $table-dark-border-color; 138 | } 139 | 140 | &.table-bordered { 141 | border: 0; 142 | } 143 | 144 | &.table-striped { 145 | tbody tr:nth-of-type(#{$table-striped-order}) { 146 | background-color: $table-dark-accent-bg; 147 | } 148 | } 149 | 150 | &.table-hover { 151 | tbody tr { 152 | @include hover() { 153 | color: $table-dark-hover-color; 154 | background-color: $table-dark-hover-bg; 155 | } 156 | } 157 | } 158 | } 159 | 160 | 161 | // Responsive tables 162 | // 163 | // Generate series of `.table-responsive-*` classes for configuring the screen 164 | // size of where your table will overflow. 165 | 166 | .table-responsive { 167 | @each $breakpoint in map-keys($grid-breakpoints) { 168 | $next: breakpoint-next($breakpoint, $grid-breakpoints); 169 | $infix: breakpoint-infix($next, $grid-breakpoints); 170 | 171 | {$infix} { 172 | @include media-breakpoint-down($breakpoint) { 173 | display: block; 174 | width: 100%; 175 | overflow-x: auto; 176 | -webkit-overflow-scrolling: touch; 177 | 178 | // Prevent double border on horizontal scroll due to use of `display: block;` 179 | > .table-bordered { 180 | border: 0; 181 | } 182 | } 183 | } 184 | } 185 | } 186 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/_list-group.scss: -------------------------------------------------------------------------------- 1 | // Base class 2 | // 3 | // Easily usable on , , or . 4 | 5 | .list-group { 6 | display: flex; 7 | flex-direction: column; 8 | 9 | // No need to set list-style: none; since .list-group-item is block level 10 | padding-left: 0; // reset padding because ul and ol 11 | margin-bottom: 0; 12 | @include border-radius($list-group-border-radius); 13 | } 14 | 15 | 16 | // Interactive list items 17 | // 18 | // Use anchor or button elements instead of `li`s or `div`s to create interactive 19 | // list items. Includes an extra `.active` modifier class for selected items. 20 | 21 | .list-group-item-action { 22 | width: 100%; // For ``s (anchors become 100% by default though) 23 | color: $list-group-action-color; 24 | text-align: inherit; // For ``s (anchors inherit) 25 | 26 | // Hover state 27 | @include hover-focus() { 28 | z-index: 1; // Place hover/focus items above their siblings for proper border styling 29 | color: $list-group-action-hover-color; 30 | text-decoration: none; 31 | background-color: $list-group-hover-bg; 32 | } 33 | 34 | &:active { 35 | color: $list-group-action-active-color; 36 | background-color: $list-group-action-active-bg; 37 | } 38 | } 39 | 40 | 41 | // Individual list items 42 | // 43 | // Use on `li`s or `div`s within the `.list-group` parent. 44 | 45 | .list-group-item { 46 | position: relative; 47 | display: block; 48 | padding: $list-group-item-padding-y $list-group-item-padding-x; 49 | color: $list-group-color; 50 | text-decoration: if($link-decoration == none, null, none); 51 | background-color: $list-group-bg; 52 | border: $list-group-border-width solid $list-group-border-color; 53 | 54 | &:first-child { 55 | @include border-top-radius(inherit); 56 | } 57 | 58 | &:last-child { 59 | @include border-bottom-radius(inherit); 60 | } 61 | 62 | &.disabled, 63 | &:disabled { 64 | color: $list-group-disabled-color; 65 | pointer-events: none; 66 | background-color: $list-group-disabled-bg; 67 | } 68 | 69 | // Include both here for ``s and ``s 70 | &.active { 71 | z-index: 2; // Place active items above their siblings for proper border styling 72 | color: $list-group-active-color; 73 | background-color: $list-group-active-bg; 74 | border-color: $list-group-active-border-color; 75 | } 76 | 77 | & + & { 78 | border-top-width: 0; 79 | 80 | &.active { 81 | margin-top: -$list-group-border-width; 82 | border-top-width: $list-group-border-width; 83 | } 84 | } 85 | } 86 | 87 | 88 | // Horizontal 89 | // 90 | // Change the layout of list group items from vertical (default) to horizontal. 91 | 92 | @each $breakpoint in map-keys($grid-breakpoints) { 93 | @include media-breakpoint-up($breakpoint) { 94 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints); 95 | 96 | .list-group-horizontal#{$infix} { 97 | flex-direction: row; 98 | 99 | > .list-group-item { 100 | &:first-child { 101 | @include border-bottom-left-radius($list-group-border-radius); 102 | @include border-top-right-radius(0); 103 | } 104 | 105 | &:last-child { 106 | @include border-top-right-radius($list-group-border-radius); 107 | @include border-bottom-left-radius(0); 108 | } 109 | 110 | &.active { 111 | margin-top: 0; 112 | } 113 | 114 | + .list-group-item { 115 | border-top-width: $list-group-border-width; 116 | border-left-width: 0; 117 | 118 | &.active { 119 | margin-left: -$list-group-border-width; 120 | border-left-width: $list-group-border-width; 121 | } 122 | } 123 | } 124 | } 125 | } 126 | } 127 | 128 | 129 | // Flush list items 130 | // 131 | // Remove borders and border-radius to keep list group items edge-to-edge. Most 132 | // useful within other components (e.g., cards). 133 | 134 | .list-group-flush { 135 | @include border-radius(0); 136 | 137 | > .list-group-item { 138 | border-width: 0 0 $list-group-border-width; 139 | 140 | &:last-child { 141 | border-bottom-width: 0; 142 | } 143 | } 144 | } 145 | 146 | 147 | // Contextual variants 148 | // 149 | // Add modifier classes to change text and background color on individual items. 150 | // Organizationally, this must come after the `:hover` states. 151 | 152 | @each $color, $value in $theme-colors { 153 | @include list-group-item-variant($color, theme-color-level($color, -9), theme-color-level($color, 6)); 154 | } 155 | -------------------------------------------------------------------------------- /src/scss/vendors/plugin/js/wan-spinner.js: -------------------------------------------------------------------------------- 1 | ; 2 | (function($, window, document, undefined) { 3 | 'use strict'; 4 | 5 | var output = function(msg) { 6 | window.console && console.log(msg); 7 | }; 8 | 9 | var WanSpinner = function(element, options) { 10 | this.defaults = { 11 | maxValue: 999, 12 | minValue: -999, 13 | step: 1, 14 | start: 1, 15 | inputWidth: 40, 16 | plusClick: function(element, val) { 17 | return true; 18 | }, 19 | minusClick: function(element, val) { 20 | return true; 21 | }, 22 | exceptionFun: function(element, exp) { 23 | return true; 24 | }, 25 | valueChanged: function(element, val) { 26 | return true; 27 | } 28 | }; 29 | this.options = $.extend({}, this.defaults, options); 30 | this.options.stepLength = ((+this.options.step).toString().split('.')[1] || '').length; 31 | this.options.stepFloat = parseInt(1 * Math.pow(10, this.options.stepLength) / this.options.step) || 1; 32 | this.element = $(element); 33 | 34 | this.options.exceptionFunEnable = (typeof(this.options.exceptionFun) === 'function'); 35 | this.options.plusClickEnable = (typeof(this.options.plusClick) === 'function'); 36 | this.options.minusClickEnable = (typeof(this.options.minusClick) === 'function'); 37 | this.options.valueChangedEnable = (typeof(this.options.valueChanged) === 'function'); 38 | 39 | this.element.each(function(index, dt) { 40 | var input = $(dt).children('input'); 41 | var initValue = input.val() || this.options.start; 42 | input.val(initValue); 43 | }); 44 | 45 | this.element.children('input').css('width', this.options.inputWidth); 46 | 47 | this.EXCEPTION = { 48 | TOO_LARGE: 1, 49 | NORMAL: 0, 50 | TOO_SMALL: -1 51 | }; 52 | }; 53 | 54 | WanSpinner.prototype.bind = function() { 55 | var self = this; 56 | $(self.element).delegate('.minus', 'click', function() { 57 | var val; 58 | var input = $(this).siblings('input'); 59 | if (self.options.stepFloat > 1) { 60 | val = (+input.val() || 0) * self.options.stepFloat - self.options.step * self.options.stepFloat; 61 | val = Math.round(val) / self.options.stepFloat; 62 | } else { 63 | val = (+input.val() || 0) - self.options.step; 64 | } 65 | val = val.toFixed(self.options.stepLength); 66 | if (val < self.options.minValue) { 67 | self.options.exceptionFunEnable && self.options.exceptionFun($(this).parent(), self.EXCEPTION.TOO_SMALL); 68 | } else { 69 | input.val(val); 70 | self.options.minusClickEnable && self.options.minusClick($(this).parent(), val); 71 | self.options.valueChangedEnable && self.options.valueChanged($(this).parent(), val); 72 | } 73 | return false; 74 | }).delegate('.plus', 'click', function() { 75 | var val; 76 | var input = $(this).siblings('input'); 77 | if (self.options.stepFloat > 1) { 78 | val = (+input.val() || 0) * self.options.stepFloat + self.options.step * self.options.stepFloat; 79 | val = Math.round(val) / self.options.stepFloat; 80 | } else { 81 | val = (+input.val() || 0) + self.options.step; 82 | } 83 | val = val.toFixed(self.options.stepLength); 84 | if (val > self.options.maxValue) { 85 | self.options.exceptionFunEnable && self.options.exceptionFun($(this).parent(), self.EXCEPTION.TOO_LARGE); 86 | } else { 87 | input.val(val); 88 | self.options.plusClickEnable && self.options.plusClick($(this).parent(), val); 89 | self.options.valueChangedEnable && self.options.valueChanged($(this).parent(), val); 90 | } 91 | return false; 92 | }).delegate('input', 'change', function() { 93 | var val = +$(this).val() || 0; 94 | if (val > self.options.maxValue) { 95 | val = self.options.maxValue; 96 | self.options.exceptionFunEnable && self.options.exceptionFun($(this).parent(), self.EXCEPTION.TOO_LARGE); 97 | } else if (val < self.options.minValue) { 98 | val = self.options.minValue; 99 | self.options.exceptionFunEnable && self.options.exceptionFun($(this).parent(), self.EXCEPTION.TOO_SMALL); 100 | } 101 | $(this).val(val); 102 | self.options.valueChangedEnable && self.options.valueChanged($(this).parent(), val); 103 | }); 104 | } 105 | 106 | 107 | $.fn.WanSpinner = function(options) { 108 | var wanSpinner = new WanSpinner(this, options); 109 | wanSpinner.bind(); 110 | return this; 111 | }; 112 | 113 | })(jQuery, window, document); 114 | -------------------------------------------------------------------------------- /src/scss/vendors/plugin/css/nice-select.css: -------------------------------------------------------------------------------- 1 | .nice-select { 2 | -webkit-tap-highlight-color: transparent; 3 | background-color: #fff; 4 | border-radius: 5px; 5 | border: solid 1px #e8e8e8; 6 | box-sizing: border-box; 7 | clear: both; 8 | cursor: pointer; 9 | display: block; 10 | float: left; 11 | font-family: inherit; 12 | font-size: 14px; 13 | font-weight: normal; 14 | height: 42px; 15 | line-height: 40px; 16 | outline: none; 17 | padding-left: 18px; 18 | padding-right: 30px; 19 | position: relative; 20 | text-align: left !important; 21 | -webkit-transition: all 0.2s ease-in-out; 22 | transition: all 0.2s ease-in-out; 23 | -webkit-user-select: none; 24 | -moz-user-select: none; 25 | -ms-user-select: none; 26 | user-select: none; 27 | white-space: nowrap; 28 | width: auto; } 29 | .nice-select:hover { 30 | border-color: #dbdbdb; } 31 | .nice-select:active, .nice-select.open, .nice-select:focus { 32 | border-color: #999; } 33 | .nice-select:after { 34 | border-bottom: 2px solid #999; 35 | border-right: 2px solid #999; 36 | content: ''; 37 | display: block; 38 | height: 5px; 39 | margin-top: -4px; 40 | pointer-events: none; 41 | position: absolute; 42 | right: 12px; 43 | top: 50%; 44 | -webkit-transform-origin: 66% 66%; 45 | -ms-transform-origin: 66% 66%; 46 | transform-origin: 66% 66%; 47 | -webkit-transform: rotate(45deg); 48 | -ms-transform: rotate(45deg); 49 | transform: rotate(45deg); 50 | -webkit-transition: all 0.15s ease-in-out; 51 | transition: all 0.15s ease-in-out; 52 | width: 5px; } 53 | .nice-select.open:after { 54 | -webkit-transform: rotate(-135deg); 55 | -ms-transform: rotate(-135deg); 56 | transform: rotate(-135deg); } 57 | .nice-select.open .list { 58 | opacity: 1; 59 | pointer-events: auto; 60 | -webkit-transform: scale(1) translateY(0); 61 | -ms-transform: scale(1) translateY(0); 62 | transform: scale(1) translateY(0); } 63 | .nice-select.disabled { 64 | border-color: #ededed; 65 | color: #999; 66 | pointer-events: none; } 67 | .nice-select.disabled:after { 68 | border-color: #cccccc; } 69 | .nice-select.wide { 70 | width: 100%; } 71 | .nice-select.wide .list { 72 | left: 0 !important; 73 | right: 0 !important; } 74 | .nice-select.right { 75 | float: right; } 76 | .nice-select.right .list { 77 | left: auto; 78 | right: 0; } 79 | .nice-select.small { 80 | font-size: 12px; 81 | height: 36px; 82 | line-height: 34px; } 83 | .nice-select.small:after { 84 | height: 4px; 85 | width: 4px; } 86 | .nice-select.small .option { 87 | line-height: 34px; 88 | min-height: 34px; } 89 | .nice-select .list { 90 | background-color: #fff; 91 | border-radius: 5px; 92 | box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11); 93 | box-sizing: border-box; 94 | margin-top: 4px; 95 | opacity: 0; 96 | overflow: hidden; 97 | padding: 0; 98 | pointer-events: none; 99 | position: absolute; 100 | top: 100%; 101 | left: 0; 102 | -webkit-transform-origin: 50% 0; 103 | -ms-transform-origin: 50% 0; 104 | transform-origin: 50% 0; 105 | -webkit-transform: scale(0.75) translateY(-21px); 106 | -ms-transform: scale(0.75) translateY(-21px); 107 | transform: scale(0.75) translateY(-21px); 108 | -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out; 109 | transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out; 110 | z-index: 9; } 111 | .nice-select .list:hover .option:not(:hover) { 112 | background-color: transparent !important; } 113 | .nice-select .option { 114 | cursor: pointer; 115 | font-weight: 400; 116 | line-height: 40px; 117 | list-style: none; 118 | min-height: 40px; 119 | outline: none; 120 | padding-left: 18px; 121 | padding-right: 29px; 122 | text-align: left; 123 | -webkit-transition: all 0.2s; 124 | transition: all 0.2s; } 125 | .nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus { 126 | background-color: #f6f6f6; } 127 | .nice-select .option.selected { 128 | font-weight: bold; } 129 | .nice-select .option.disabled { 130 | background-color: transparent; 131 | color: #999; 132 | cursor: default; } 133 | 134 | .no-csspointerevents .nice-select .list { 135 | display: none; } 136 | 137 | .no-csspointerevents .nice-select.open .list { 138 | display: block; } 139 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/_functions.scss: -------------------------------------------------------------------------------- 1 | // Bootstrap functions 2 | // 3 | // Utility mixins and functions for evaluating source code across our variables, maps, and mixins. 4 | 5 | // Ascending 6 | // Used to evaluate Sass maps like our grid breakpoints. 7 | @mixin _assert-ascending($map, $map-name) { 8 | $prev-key: null; 9 | $prev-num: null; 10 | @each $key, $num in $map { 11 | @if $prev-num == null or unit($num) == "%" or unit($prev-num) == "%" { 12 | // Do nothing 13 | } @else if not comparable($prev-num, $num) { 14 | @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !"; 15 | } @else if $prev-num >= $num { 16 | @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !"; 17 | } 18 | $prev-key: $key; 19 | $prev-num: $num; 20 | } 21 | } 22 | 23 | // Starts at zero 24 | // Used to ensure the min-width of the lowest breakpoint starts at 0. 25 | @mixin _assert-starts-at-zero($map, $map-name: "$grid-breakpoints") { 26 | @if length($map) > 0 { 27 | $values: map-values($map); 28 | $first-value: nth($values, 1); 29 | @if $first-value != 0 { 30 | @warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}."; 31 | } 32 | } 33 | } 34 | 35 | // Replace `$search` with `$replace` in `$string` 36 | // Used on our SVG icon backgrounds for custom forms. 37 | // 38 | // @author Hugo Giraudel 39 | // @param {String} $string - Initial string 40 | // @param {String} $search - Substring to replace 41 | // @param {String} $replace ('') - New value 42 | // @return {String} - Updated string 43 | @function str-replace($string, $search, $replace: "") { 44 | $index: str-index($string, $search); 45 | 46 | @if $index { 47 | @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace); 48 | } 49 | 50 | @return $string; 51 | } 52 | 53 | // See https://codepen.io/kevinweber/pen/dXWoRw 54 | // 55 | // Requires the use of quotes around data URIs. 56 | 57 | @function escape-svg($string) { 58 | @if str-index($string, "data:image/svg+xml") { 59 | @each $char, $encoded in $escaped-characters { 60 | // Do not escape the url brackets 61 | @if str-index($string, "url(") == 1 { 62 | $string: url("#{str-replace(str-slice($string, 6, -3), $char, $encoded)}"); 63 | } @else { 64 | $string: str-replace($string, $char, $encoded); 65 | } 66 | } 67 | } 68 | 69 | @return $string; 70 | } 71 | 72 | // Color contrast 73 | @function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) { 74 | $r: red($color); 75 | $g: green($color); 76 | $b: blue($color); 77 | 78 | $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000; 79 | 80 | @if ($yiq >= $yiq-contrasted-threshold) { 81 | @return $dark; 82 | } @else { 83 | @return $light; 84 | } 85 | } 86 | 87 | // Retrieve color Sass maps 88 | @function color($key: "blue") { 89 | @return map-get($colors, $key); 90 | } 91 | 92 | @function theme-color($key: "primary") { 93 | @return map-get($theme-colors, $key); 94 | } 95 | 96 | @function gray($key: "100") { 97 | @return map-get($grays, $key); 98 | } 99 | 100 | // Request a theme color level 101 | @function theme-color-level($color-name: "primary", $level: 0) { 102 | $color: theme-color($color-name); 103 | $color-base: if($level > 0, $black, $white); 104 | $level: abs($level); 105 | 106 | @return mix($color-base, $color, $level * $theme-color-interval); 107 | } 108 | 109 | // Return valid calc 110 | @function add($value1, $value2, $return-calc: true) { 111 | @if $value1 == null { 112 | @return $value2; 113 | } 114 | 115 | @if $value2 == null { 116 | @return $value1; 117 | } 118 | 119 | @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) { 120 | @return $value1 + $value2; 121 | } 122 | 123 | @return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + unquote(" + ") + $value2); 124 | } 125 | 126 | @function subtract($value1, $value2, $return-calc: true) { 127 | @if $value1 == null and $value2 == null { 128 | @return null; 129 | } 130 | 131 | @if $value1 == null { 132 | @return -$value2; 133 | } 134 | 135 | @if $value2 == null { 136 | @return $value1; 137 | } 138 | 139 | @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) { 140 | @return $value1 - $value2; 141 | } 142 | 143 | @return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2); 144 | } 145 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/mixins/_breakpoints.scss: -------------------------------------------------------------------------------- 1 | // Breakpoint viewport sizes and media queries. 2 | // 3 | // Breakpoints are defined as a map of (name: minimum width), order from small to large: 4 | // 5 | // (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px) 6 | // 7 | // The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default. 8 | 9 | // Name of the next breakpoint, or null for the last breakpoint. 10 | // 11 | // >> breakpoint-next(sm) 12 | // md 13 | // >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) 14 | // md 15 | // >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl)) 16 | // md 17 | @function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) { 18 | $n: index($breakpoint-names, $name); 19 | @return if($n != null and $n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null); 20 | } 21 | 22 | // Minimum breakpoint width. Null for the smallest (first) breakpoint. 23 | // 24 | // >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) 25 | // 576px 26 | @function breakpoint-min($name, $breakpoints: $grid-breakpoints) { 27 | $min: map-get($breakpoints, $name); 28 | @return if($min != 0, $min, null); 29 | } 30 | 31 | // Maximum breakpoint width. Null for the largest (last) breakpoint. 32 | // The maximum value is calculated as the minimum of the next one less 0.02px 33 | // to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths. 34 | // See https://www.w3.org/TR/mediaqueries-4/#mq-min-max 35 | // Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari. 36 | // See https://bugs.webkit.org/show_bug.cgi?id=178261 37 | // 38 | // >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) 39 | // 767.98px 40 | @function breakpoint-max($name, $breakpoints: $grid-breakpoints) { 41 | $next: breakpoint-next($name, $breakpoints); 42 | @return if($next, breakpoint-min($next, $breakpoints) - .02, null); 43 | } 44 | 45 | // Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front. 46 | // Useful for making responsive utilities. 47 | // 48 | // >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) 49 | // "" (Returns a blank string) 50 | // >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) 51 | // "-sm" 52 | @function breakpoint-infix($name, $breakpoints: $grid-breakpoints) { 53 | @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}"); 54 | } 55 | 56 | // Media of at least the minimum breakpoint width. No query for the smallest breakpoint. 57 | // Makes the @content apply to the given breakpoint and wider. 58 | @mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) { 59 | $min: breakpoint-min($name, $breakpoints); 60 | @if $min { 61 | @media (min-width: $min) { 62 | @content; 63 | } 64 | } @else { 65 | @content; 66 | } 67 | } 68 | 69 | // Media of at most the maximum breakpoint width. No query for the largest breakpoint. 70 | // Makes the @content apply to the given breakpoint and narrower. 71 | @mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) { 72 | $max: breakpoint-max($name, $breakpoints); 73 | @if $max { 74 | @media (max-width: $max) { 75 | @content; 76 | } 77 | } @else { 78 | @content; 79 | } 80 | } 81 | 82 | // Media that spans multiple breakpoint widths. 83 | // Makes the @content apply between the min and max breakpoints 84 | @mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) { 85 | $min: breakpoint-min($lower, $breakpoints); 86 | $max: breakpoint-max($upper, $breakpoints); 87 | 88 | @if $min != null and $max != null { 89 | @media (min-width: $min) and (max-width: $max) { 90 | @content; 91 | } 92 | } @else if $max == null { 93 | @include media-breakpoint-up($lower, $breakpoints) { 94 | @content; 95 | } 96 | } @else if $min == null { 97 | @include media-breakpoint-down($upper, $breakpoints) { 98 | @content; 99 | } 100 | } 101 | } 102 | 103 | // Media between the breakpoint's minimum and maximum widths. 104 | // No minimum for the smallest breakpoint, and no maximum for the largest one. 105 | // Makes the @content apply only to the given breakpoint, not viewports any wider or narrower. 106 | @mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) { 107 | $min: breakpoint-min($name, $breakpoints); 108 | $max: breakpoint-max($name, $breakpoints); 109 | 110 | @if $min != null and $max != null { 111 | @media (min-width: $min) and (max-width: $max) { 112 | @content; 113 | } 114 | } @else if $max == null { 115 | @include media-breakpoint-up($name, $breakpoints) { 116 | @content; 117 | } 118 | } @else if $min == null { 119 | @include media-breakpoint-down($name, $breakpoints) { 120 | @content; 121 | } 122 | } 123 | } 124 | -------------------------------------------------------------------------------- /src/scss/vendors/bootstrap/scss/_dropdown.scss: -------------------------------------------------------------------------------- 1 | // The dropdown wrapper (``) 2 | .dropup, 3 | .dropright, 4 | .dropdown, 5 | .dropleft { 6 | position: relative; 7 | } 8 | 9 | .dropdown-toggle { 10 | white-space: nowrap; 11 | 12 | // Generate the caret automatically 13 | @include caret(); 14 | } 15 | 16 | // The dropdown menu 17 | .dropdown-menu { 18 | position: absolute; 19 | top: 100%; 20 | left: 0; 21 | z-index: $zindex-dropdown; 22 | display: none; // none by default, but block on "open" of the menu 23 | float: left; 24 | min-width: $dropdown-min-width; 25 | padding: $dropdown-padding-y $dropdown-padding-x; 26 | margin: $dropdown-spacer 0 0; // override default ul 27 | @include font-size($dropdown-font-size); 28 | color: $dropdown-color; 29 | text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer) 30 | list-style: none; 31 | background-color: $dropdown-bg; 32 | background-clip: padding-box; 33 | border: $dropdown-border-width solid $dropdown-border-color; 34 | @include border-radius($dropdown-border-radius); 35 | @include box-shadow($dropdown-box-shadow); 36 | } 37 | 38 | @each $breakpoint in map-keys($grid-breakpoints) { 39 | @include media-breakpoint-up($breakpoint) { 40 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints); 41 | 42 | .dropdown-menu#{$infix}-left { 43 | right: auto; 44 | left: 0; 45 | } 46 | 47 | .dropdown-menu#{$infix}-right { 48 | right: 0; 49 | left: auto; 50 | } 51 | } 52 | } 53 | 54 | // Allow for dropdowns to go bottom up (aka, dropup-menu) 55 | // Just add .dropup after the standard .dropdown class and you're set. 56 | .dropup { 57 | .dropdown-menu { 58 | top: auto; 59 | bottom: 100%; 60 | margin-top: 0; 61 | margin-bottom: $dropdown-spacer; 62 | } 63 | 64 | .dropdown-toggle { 65 | @include caret(up); 66 | } 67 | } 68 | 69 | .dropright { 70 | .dropdown-menu { 71 | top: 0; 72 | right: auto; 73 | left: 100%; 74 | margin-top: 0; 75 | margin-left: $dropdown-spacer; 76 | } 77 | 78 | .dropdown-toggle { 79 | @include caret(right); 80 | &::after { 81 | vertical-align: 0; 82 | } 83 | } 84 | } 85 | 86 | .dropleft { 87 | .dropdown-menu { 88 | top: 0; 89 | right: 100%; 90 | left: auto; 91 | margin-top: 0; 92 | margin-right: $dropdown-spacer; 93 | } 94 | 95 | .dropdown-toggle { 96 | @include caret(left); 97 | &::before { 98 | vertical-align: 0; 99 | } 100 | } 101 | } 102 | 103 | // When enabled Popper.js, reset basic dropdown position 104 | // stylelint-disable-next-line no-duplicate-selectors 105 | .dropdown-menu { 106 | &[x-placement^="top"], 107 | &[x-placement^="right"], 108 | &[x-placement^="bottom"], 109 | &[x-placement^="left"] { 110 | right: auto; 111 | bottom: auto; 112 | } 113 | } 114 | 115 | // Dividers (basically an ``) within the dropdown 116 | .dropdown-divider { 117 | @include nav-divider($dropdown-divider-bg, $dropdown-divider-margin-y, true); 118 | } 119 | 120 | // Links, buttons, and more within the dropdown menu 121 | // 122 | // ``-specific styles are denoted with `// For s` 123 | .dropdown-item { 124 | display: block; 125 | width: 100%; // For ``s 126 | padding: $dropdown-item-padding-y $dropdown-item-padding-x; 127 | clear: both; 128 | font-weight: $font-weight-normal; 129 | color: $dropdown-link-color; 130 | text-align: inherit; // For ``s 131 | text-decoration: if($link-decoration == none, null, none); 132 | white-space: nowrap; // prevent links from randomly breaking onto new lines 133 | background-color: transparent; // For ``s 134 | border: 0; // For ``s 135 | 136 | // Prevent dropdown overflow if there's no padding 137 | // See https://github.com/twbs/bootstrap/pull/27703 138 | @if $dropdown-padding-y == 0 { 139 | &:first-child { 140 | @include border-top-radius($dropdown-inner-border-radius); 141 | } 142 | 143 | &:last-child { 144 | @include border-bottom-radius($dropdown-inner-border-radius); 145 | } 146 | } 147 | 148 | @include hover-focus() { 149 | color: $dropdown-link-hover-color; 150 | text-decoration: none; 151 | @include gradient-bg($dropdown-link-hover-bg); 152 | } 153 | 154 | &.active, 155 | &:active { 156 | color: $dropdown-link-active-color; 157 | text-decoration: none; 158 | @include gradient-bg($dropdown-link-active-bg); 159 | } 160 | 161 | &.disabled, 162 | &:disabled { 163 | color: $dropdown-link-disabled-color; 164 | pointer-events: none; 165 | background-color: transparent; 166 | // Remove CSS gradients if they're enabled 167 | @if $enable-gradients { 168 | background-image: none; 169 | } 170 | } 171 | } 172 | 173 | .dropdown-menu.show { 174 | display: block; 175 | } 176 | 177 | // Dropdown section headers 178 | .dropdown-header { 179 | display: block; 180 | padding: $dropdown-header-padding; 181 | margin-bottom: 0; // for use with heading elements 182 | @include font-size($font-size-sm); 183 | color: $dropdown-header-color; 184 | white-space: nowrap; // as with > li > a 185 | } 186 | 187 | // Dropdown text 188 | .dropdown-item-text { 189 | display: block; 190 | padding: $dropdown-item-padding-y $dropdown-item-padding-x; 191 | color: $dropdown-link-color; 192 | } 193 | -------------------------------------------------------------------------------- /src/scss/layout/_features.scss: -------------------------------------------------------------------------------- 1 | .features{ 2 | padding: 100px 0; 3 | &-wrapper{ 4 | position: relative; 5 | .slick-dots{ 6 | margin-top: 40px; 7 | display: flex; 8 | justify-content: center; 9 | align-items: center; 10 | li{ 11 | width: 10px; 12 | height: 10px; 13 | border-radius: 100%; 14 | background-color: $lightBlack; 15 | margin: 0 10px; 16 | button{ 17 | font-size: 0; 18 | border: 0; 19 | } 20 | &.slick-active{ 21 | background-color: $black; 22 | } 23 | } 24 | } 25 | .slider-arrows{ 26 | display: flex; 27 | justify-content: space-between; 28 | align-items: center; 29 | .prev-arrow, 30 | .next-arrow{ 31 | width: 52px; 32 | height: 52px; 33 | background-color: transparent; 34 | border-radius: 100%; 35 | display: flex; 36 | justify-content: center; 37 | align-items: center; 38 | border: 1px solid $gray; 39 | cursor: pointer; 40 | transition: .3s; 41 | &:hover{ 42 | background-color: $blue; 43 | svg { 44 | path { 45 | stroke: $white; 46 | } 47 | } 48 | } 49 | } 50 | .prev-arrow{ 51 | position: absolute; 52 | top: 50%; 53 | left: -90px; 54 | transform: translateY(-50%); 55 | } 56 | .next-arrow{ 57 | position: absolute; 58 | top: 50%; 59 | right: -90px; 60 | transform: translateY(-50%); 61 | } 62 | } 63 | .slick-slide { 64 | margin: 0 15px; 65 | } 66 | .slick-list { 67 | margin: 0 -15px; 68 | } 69 | } 70 | &-morebutton{ 71 | margin-top: 50px; 72 | .btn{ 73 | font-size: 14px; 74 | line-height: 1.3; 75 | padding: 15px 30px; 76 | 77 | &.bt-glass{ 78 | background-color: rgba(51, 90, 255, 0.04); 79 | color: blue; 80 | &:hover{ 81 | background-color: blue; 82 | color: white; 83 | } 84 | } 85 | } 86 | } 87 | } 88 | /* large devices 992 - 1169*/ 89 | @media (min-width: 992px) and (max-width: 1200px) { 90 | .features{ 91 | &-wrapper{ 92 | .slick-dots{ 93 | margin-top: 30px; 94 | } 95 | .slider-arrows{ 96 | display: none; 97 | } 98 | } 99 | &-morebutton{ 100 | margin-top: 40px; 101 | } 102 | } 103 | } 104 | 105 | /* Medium devices 768 - 991 */ 106 | @media (min-width: 768px) and (max-width: 991px) { 107 | .features{ 108 | &-wrapper{ 109 | .slick-dots{ 110 | margin-top: 30px; 111 | } 112 | .slider-arrows{ 113 | display: none; 114 | } 115 | } 116 | &-morebutton{ 117 | margin-top: 30px; 118 | } 119 | } 120 | } 121 | /* Small devices 575 - 767 */ 122 | @media (min-width: 575px) and (max-width: 767px) { 123 | .features{ 124 | padding: 70px 0; 125 | &-wrapper{ 126 | .slick-dots{ 127 | margin-top: 20px; 128 | } 129 | .slider-arrows{ 130 | display: none; 131 | } 132 | .slick-slide { 133 | margin: 0 10px; 134 | } 135 | .slick-list { 136 | margin: 0 -10px; 137 | } 138 | } 139 | &-morebutton{ 140 | margin-top: 30px; 141 | } 142 | } 143 | } 144 | 145 | 146 | /* Small devices 420 - 574 */ 147 | @media only screen and (min-width: 420px) and (max-width: 575px) { 148 | .features{ 149 | padding: 70px 0; 150 | &-wrapper{ 151 | .slick-dots{ 152 | margin-top: 20px; 153 | } 154 | .slider-arrows{ 155 | display: none; 156 | } 157 | .product-item-image{ 158 | img{ 159 | margin: auto; 160 | } 161 | } 162 | } 163 | &-morebutton{ 164 | margin-top: 30px; 165 | } 166 | .slick-slide { 167 | margin: 0 10px; 168 | } 169 | .slick-list { 170 | margin: 0 -10px; 171 | } 172 | } 173 | } 174 | /* extra Small devices 420 */ 175 | @media (max-width: 420px) { 176 | .features{ 177 | padding: 60px 0; 178 | &-wrapper{ 179 | .slick-dots{ 180 | margin-top: 20px; 181 | } 182 | .slider-arrows{ 183 | display: none; 184 | } 185 | .slick-slide { 186 | margin: 0 10px; 187 | } 188 | .slick-list { 189 | margin: 0 -10px; 190 | } 191 | } 192 | &-morebutton{ 193 | margin-top: 30px; 194 | } 195 | } 196 | } 197 | --------------------------------------------------------------------------------