├── .github └── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md ├── .gitignore ├── LICENSE ├── README.md ├── gulpfile.js ├── package-lock.json ├── package.json └── src ├── assets ├── img │ ├── blog │ │ └── image-1.jpg │ ├── brand │ │ ├── dark.svg │ │ ├── light.svg │ │ └── pixel-docs.svg │ ├── carousel │ │ ├── image-1.jpg │ │ ├── image-2.jpg │ │ └── image-3.jpg │ ├── checker_logo.png │ ├── clients │ │ ├── airbnb.svg │ │ ├── business-school.svg │ │ ├── corsair.svg │ │ ├── docker.svg │ │ ├── ebay.svg │ │ ├── elastic.svg │ │ ├── forbes.svg │ │ ├── google.svg │ │ ├── northwestern.svg │ │ ├── paypal.svg │ │ ├── pinterest.svg │ │ └── university-of-chicago.svg │ ├── favicon │ │ ├── android-chrome-192x192.png │ │ ├── android-chrome-256x256.png │ │ ├── android-chrome-96x96.png │ │ ├── apple-touch-icon.png │ │ ├── browserconfig.xml │ │ ├── favicon-16x16.png │ │ ├── favicon-32x32.png │ │ ├── favicon.ico │ │ ├── mstile-150x150.png │ │ ├── safari-pinned-tab.svg │ │ └── site.webmanifest │ ├── illustrations │ │ ├── about-illustration.svg │ │ ├── bs5-illustrations.svg │ │ ├── feature.svg │ │ └── reading-side.svg │ ├── megamenu_image.png │ ├── office.png │ ├── pages │ │ ├── code.svg │ │ ├── design.svg │ │ ├── form-image.jpg │ │ ├── support.svg │ │ └── technologies.svg │ ├── presentation-mockup-dashboard.png │ ├── presentation-mockup.png │ ├── presentation │ │ └── all-pages │ │ │ ├── about-company.jpg │ │ │ ├── contact.jpg │ │ │ ├── landing-freelancer.jpg │ │ │ ├── signin.jpg │ │ │ └── signup.jpg │ ├── sections-mockup.jpg │ ├── sections │ │ ├── about-us-1.jpg │ │ ├── about-us-2.jpg │ │ └── about-us-3.jpg │ ├── signature.svg │ ├── team │ │ ├── profile-picture-1.jpg │ │ ├── profile-picture-2.jpg │ │ ├── profile-picture-3.jpg │ │ ├── profile-picture-4.jpg │ │ └── profile-picture-freelancer.jpg │ ├── themesberg.svg │ └── wavelogo.svg └── js │ └── pixel.js ├── html ├── components │ ├── accordions.html │ ├── alerts.html │ ├── badges.html │ ├── bootstrap-carousels.html │ ├── breadcrumbs.html │ ├── buttons.html │ ├── cards.html │ ├── dropdowns.html │ ├── forms.html │ ├── modals.html │ ├── navs.html │ ├── pagination.html │ ├── popovers.html │ ├── progress-bars.html │ ├── tables.html │ ├── tabs.html │ ├── toasts.html │ ├── tooltips.html │ └── typography.html └── pages │ ├── about.html │ ├── blank.html │ ├── contact.html │ ├── landing-freelancer.html │ ├── sign-in.html │ └── sign-up.html ├── index.html ├── partials ├── _analytics-body.html ├── _analytics.html ├── _cta-careers.html ├── _cta-footer.html ├── _footer.html ├── _free-vs-pro.html ├── _head.html ├── _navigation.html ├── _pages-preview.html ├── _preloader.html ├── _scripts.html └── components │ ├── _accordions.html │ ├── _alerts.html │ ├── _badges.html │ ├── _bootstrap-carousels.html │ ├── _breadcrumbs.html │ ├── _buttons.html │ ├── _cards.html │ ├── _dropdowns.html │ ├── _forms.html │ ├── _modals.html │ ├── _navs.html │ ├── _pagination.html │ ├── _popovers.html │ ├── _progress-bars.html │ ├── _tables.html │ ├── _tabs.html │ ├── _toasts.html │ ├── _tooltips.html │ └── _typography.html └── scss ├── custom └── _variables.scss ├── pixel.scss └── pixel ├── _components.scss ├── _functions.scss ├── _layout.scss ├── _mixins.scss ├── _utilities.scss ├── _variables.scss ├── components ├── _accordions.scss ├── _alerts.scss ├── _avatars.scss ├── _badge.scss ├── _body.scss ├── _breadcrumb.scss ├── _buttons.scss ├── _card.scss ├── _carousel.scss ├── _close.scss ├── _custom-forms.scss ├── _datepicker.scss ├── _dropdown.scss ├── _forms.scss ├── _icons.scss ├── _images.scss ├── _input-group.scss ├── _list-group.scss ├── _maps.scss ├── _modal.scss ├── _nav.scss ├── _pagination.scss ├── _popover.scss ├── _preloader.scss ├── _progress.scss ├── _shapes.scss ├── _steps.scss ├── _timelines.scss ├── _tooltip.scss └── _type.scss ├── layout ├── _footer.scss ├── _headroom.scss ├── _navbar.scss └── _section.scss ├── mixins ├── _animations.scss ├── _background-variant.scss ├── _icon.scss ├── _modals.scss ├── _popover.scss ├── _transform.scss └── _utilities.scss └── utilities ├── _animations.scss ├── _backgrounds.scss ├── _floating.scss ├── _helper.scss ├── _position.scss ├── _shadows.scss ├── _sizing.scss ├── _spacing.scss ├── _text.scss └── _transform.scss /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Version [e.g. 22] 30 | 31 | **Smartphone (please complete the following information):** 32 | - Device: [e.g. iPhone6] 33 | - OS: [e.g. iOS8.1] 34 | - Browser [e.g. stock browser, safari] 35 | - Version [e.g. 22] 36 | 37 | **Additional context** 38 | Add any other context about the problem here. 39 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | dist/ 3 | html&css/ 4 | .temp/ 5 | css/ 6 | *.zip 7 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Themesberg 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 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@themesberg/pixel-lite-bootstrap-ui-kit", 3 | "version": "4.1.0", 4 | "description": "Open-source Bootstrap 5 UI Kit", 5 | "main": "gulpfile.js", 6 | "author": "Themesberg", 7 | "keywords": [ 8 | "bootstrap", 9 | "bootstrap 5", 10 | "bootstrap 5 ui kit", 11 | "bootstrap ui kit", 12 | "ui kit", 13 | "components", 14 | "elements", 15 | "responsive", 16 | "front-end", 17 | "css", 18 | "sass", 19 | "gulp", 20 | "web" 21 | ], 22 | "homepage": "https://themesberg.com/product/ui-kit/pixel-free-bootstrap-5-ui-kit", 23 | "repository": { 24 | "type": "git", 25 | "url": "https://github.com/themesberg/pixel-bootstrap-ui-kit" 26 | }, 27 | "bugs": { 28 | "email": "support@themesberg.com" 29 | }, 30 | "license": "MIT License", 31 | "devDependencies": { 32 | "browser-sync": "^2.27.4", 33 | "del": "^6.0.0", 34 | "gulp": "^4.0.2", 35 | "gulp-autoprefixer": "^8.0.0", 36 | "gulp-clean-css": "^4.3.0", 37 | "gulp-cssbeautify": "^3.0.0", 38 | "node-sass": "^6.0.1", 39 | "gulp-file-include": "^2.3.0", 40 | "gulp-header": "^2.0.9", 41 | "gulp-htmlmin": "^5.0.1", 42 | "gulp-npm-dist": "^1.0.3", 43 | "gulp-plumber": "^1.2.1", 44 | "gulp-rename": "^2.0.0", 45 | "gulp-sass": "^5.0.0", 46 | "gulp-sourcemaps": "^3.0.0", 47 | "gulp-uglify": "^3.0.2", 48 | "gulp-wait": "^0.0.2", 49 | "merge-stream": "^2.0.0" 50 | }, 51 | "dependencies": { 52 | "@fortawesome/fontawesome-free": "5.11.2", 53 | "@popperjs/core": "^2.6.0", 54 | "bootstrap": "5.0.1", 55 | "headroom.js": "0.10.3", 56 | "jarallax": "1.12.0", 57 | "onscreen": "1.3.4", 58 | "smooth-scroll": "^16.1.0", 59 | "vanillajs-datepicker": "^1.0.3", 60 | "vivus": "^0.4.5", 61 | "waypoints": "4.0.1" 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /src/assets/img/blog/image-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/pixel-bootstrap-ui-kit/8d4e53564310178836030f384e1f1bcdc3f9a83c/src/assets/img/blog/image-1.jpg -------------------------------------------------------------------------------- /src/assets/img/brand/dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | ]> 13 | 16 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /src/assets/img/brand/light.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/img/carousel/image-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/pixel-bootstrap-ui-kit/8d4e53564310178836030f384e1f1bcdc3f9a83c/src/assets/img/carousel/image-1.jpg -------------------------------------------------------------------------------- /src/assets/img/carousel/image-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/pixel-bootstrap-ui-kit/8d4e53564310178836030f384e1f1bcdc3f9a83c/src/assets/img/carousel/image-2.jpg -------------------------------------------------------------------------------- /src/assets/img/carousel/image-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/pixel-bootstrap-ui-kit/8d4e53564310178836030f384e1f1bcdc3f9a83c/src/assets/img/carousel/image-3.jpg -------------------------------------------------------------------------------- /src/assets/img/checker_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/pixel-bootstrap-ui-kit/8d4e53564310178836030f384e1f1bcdc3f9a83c/src/assets/img/checker_logo.png -------------------------------------------------------------------------------- /src/assets/img/clients/airbnb.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/img/clients/corsair.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/img/clients/ebay.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/img/clients/elastic.svg: -------------------------------------------------------------------------------- 1 | elastic -------------------------------------------------------------------------------- /src/assets/img/clients/google.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/img/clients/paypal.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/img/clients/pinterest.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/img/favicon/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/pixel-bootstrap-ui-kit/8d4e53564310178836030f384e1f1bcdc3f9a83c/src/assets/img/favicon/android-chrome-192x192.png -------------------------------------------------------------------------------- /src/assets/img/favicon/android-chrome-256x256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/pixel-bootstrap-ui-kit/8d4e53564310178836030f384e1f1bcdc3f9a83c/src/assets/img/favicon/android-chrome-256x256.png -------------------------------------------------------------------------------- /src/assets/img/favicon/android-chrome-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/pixel-bootstrap-ui-kit/8d4e53564310178836030f384e1f1bcdc3f9a83c/src/assets/img/favicon/android-chrome-96x96.png -------------------------------------------------------------------------------- /src/assets/img/favicon/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/pixel-bootstrap-ui-kit/8d4e53564310178836030f384e1f1bcdc3f9a83c/src/assets/img/favicon/apple-touch-icon.png -------------------------------------------------------------------------------- /src/assets/img/favicon/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #2b5797 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/assets/img/favicon/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/pixel-bootstrap-ui-kit/8d4e53564310178836030f384e1f1bcdc3f9a83c/src/assets/img/favicon/favicon-16x16.png -------------------------------------------------------------------------------- /src/assets/img/favicon/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/pixel-bootstrap-ui-kit/8d4e53564310178836030f384e1f1bcdc3f9a83c/src/assets/img/favicon/favicon-32x32.png -------------------------------------------------------------------------------- /src/assets/img/favicon/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/pixel-bootstrap-ui-kit/8d4e53564310178836030f384e1f1bcdc3f9a83c/src/assets/img/favicon/favicon.ico -------------------------------------------------------------------------------- /src/assets/img/favicon/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/pixel-bootstrap-ui-kit/8d4e53564310178836030f384e1f1bcdc3f9a83c/src/assets/img/favicon/mstile-150x150.png -------------------------------------------------------------------------------- /src/assets/img/favicon/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Pixel Pro", 3 | "short_name": "Pixel Pro", 4 | "icons": [ 5 | { 6 | "src": "/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/android-chrome-256x256.png", 12 | "sizes": "256x256", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "display": "standalone" 19 | } 20 | -------------------------------------------------------------------------------- /src/assets/img/megamenu_image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/pixel-bootstrap-ui-kit/8d4e53564310178836030f384e1f1bcdc3f9a83c/src/assets/img/megamenu_image.png -------------------------------------------------------------------------------- /src/assets/img/office.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/pixel-bootstrap-ui-kit/8d4e53564310178836030f384e1f1bcdc3f9a83c/src/assets/img/office.png -------------------------------------------------------------------------------- /src/assets/img/pages/form-image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/pixel-bootstrap-ui-kit/8d4e53564310178836030f384e1f1bcdc3f9a83c/src/assets/img/pages/form-image.jpg -------------------------------------------------------------------------------- /src/assets/img/presentation-mockup-dashboard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/pixel-bootstrap-ui-kit/8d4e53564310178836030f384e1f1bcdc3f9a83c/src/assets/img/presentation-mockup-dashboard.png -------------------------------------------------------------------------------- /src/assets/img/presentation-mockup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/pixel-bootstrap-ui-kit/8d4e53564310178836030f384e1f1bcdc3f9a83c/src/assets/img/presentation-mockup.png -------------------------------------------------------------------------------- /src/assets/img/presentation/all-pages/about-company.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/pixel-bootstrap-ui-kit/8d4e53564310178836030f384e1f1bcdc3f9a83c/src/assets/img/presentation/all-pages/about-company.jpg -------------------------------------------------------------------------------- /src/assets/img/presentation/all-pages/contact.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/pixel-bootstrap-ui-kit/8d4e53564310178836030f384e1f1bcdc3f9a83c/src/assets/img/presentation/all-pages/contact.jpg -------------------------------------------------------------------------------- /src/assets/img/presentation/all-pages/landing-freelancer.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/pixel-bootstrap-ui-kit/8d4e53564310178836030f384e1f1bcdc3f9a83c/src/assets/img/presentation/all-pages/landing-freelancer.jpg -------------------------------------------------------------------------------- /src/assets/img/presentation/all-pages/signin.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/pixel-bootstrap-ui-kit/8d4e53564310178836030f384e1f1bcdc3f9a83c/src/assets/img/presentation/all-pages/signin.jpg -------------------------------------------------------------------------------- /src/assets/img/presentation/all-pages/signup.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/pixel-bootstrap-ui-kit/8d4e53564310178836030f384e1f1bcdc3f9a83c/src/assets/img/presentation/all-pages/signup.jpg -------------------------------------------------------------------------------- /src/assets/img/sections-mockup.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/pixel-bootstrap-ui-kit/8d4e53564310178836030f384e1f1bcdc3f9a83c/src/assets/img/sections-mockup.jpg -------------------------------------------------------------------------------- /src/assets/img/sections/about-us-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/pixel-bootstrap-ui-kit/8d4e53564310178836030f384e1f1bcdc3f9a83c/src/assets/img/sections/about-us-1.jpg -------------------------------------------------------------------------------- /src/assets/img/sections/about-us-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/pixel-bootstrap-ui-kit/8d4e53564310178836030f384e1f1bcdc3f9a83c/src/assets/img/sections/about-us-2.jpg -------------------------------------------------------------------------------- /src/assets/img/sections/about-us-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/pixel-bootstrap-ui-kit/8d4e53564310178836030f384e1f1bcdc3f9a83c/src/assets/img/sections/about-us-3.jpg -------------------------------------------------------------------------------- /src/assets/img/team/profile-picture-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/pixel-bootstrap-ui-kit/8d4e53564310178836030f384e1f1bcdc3f9a83c/src/assets/img/team/profile-picture-1.jpg -------------------------------------------------------------------------------- /src/assets/img/team/profile-picture-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/pixel-bootstrap-ui-kit/8d4e53564310178836030f384e1f1bcdc3f9a83c/src/assets/img/team/profile-picture-2.jpg -------------------------------------------------------------------------------- /src/assets/img/team/profile-picture-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/pixel-bootstrap-ui-kit/8d4e53564310178836030f384e1f1bcdc3f9a83c/src/assets/img/team/profile-picture-3.jpg -------------------------------------------------------------------------------- /src/assets/img/team/profile-picture-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/pixel-bootstrap-ui-kit/8d4e53564310178836030f384e1f1bcdc3f9a83c/src/assets/img/team/profile-picture-4.jpg -------------------------------------------------------------------------------- /src/assets/img/team/profile-picture-freelancer.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/pixel-bootstrap-ui-kit/8d4e53564310178836030f384e1f1bcdc3f9a83c/src/assets/img/team/profile-picture-freelancer.jpg -------------------------------------------------------------------------------- /src/assets/img/themesberg.svg: -------------------------------------------------------------------------------- 1 | logo -------------------------------------------------------------------------------- /src/assets/js/pixel.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | ========================================================= 4 | * Pixel Free Bootstrap 5 UI Kit 5 | ========================================================= 6 | 7 | * Product Page: https://themesberg.com/product/ui-kit/pixel-free-bootstrap-5-ui-kit 8 | * Copyright 2021 Themesberg (https://www.themesberg.com) 9 | 10 | * Coded by https://themesberg.com 11 | 12 | ========================================================= 13 | 14 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. Contact us if you want to remove it. 15 | 16 | */ 17 | 18 | "use strict"; 19 | const d = document; 20 | d.addEventListener("DOMContentLoaded", function(event) { 21 | 22 | // options 23 | const breakpoints = { 24 | sm: 540, 25 | md: 720, 26 | lg: 960, 27 | xl: 1140 28 | }; 29 | 30 | var preloader = d.querySelector('.preloader'); 31 | if(preloader) { 32 | 33 | const animations = ['oneByOne', 'delayed', 'sync', 'scenario']; 34 | 35 | new Vivus('loader-logo', {duration: 80, type: 'oneByOne'}, function () {}); 36 | 37 | setTimeout(function() { 38 | preloader.classList.add('show'); 39 | }, 1500); 40 | } 41 | 42 | if (d.querySelector('.headroom')) { 43 | var headroom = new Headroom(document.querySelector("#navbar-main"), { 44 | offset: 0, 45 | tolerance: { 46 | up: 0, 47 | down: 0 48 | }, 49 | }); 50 | headroom.init(); 51 | } 52 | 53 | // dropdowns to show on hover when desktop 54 | if (d.body.clientWidth > breakpoints.lg) { 55 | var dropdownElementList = [].slice.call(document.querySelectorAll('.navbar .dropdown-toggle')) 56 | dropdownElementList.map(function (dropdownToggleEl) { 57 | var dropdown = new bootstrap.Dropdown(dropdownToggleEl); 58 | var dropdownMenu = d.querySelector('.dropdown-menu[aria-labelledby="' + dropdownToggleEl.getAttribute('id') + '"]'); 59 | 60 | dropdownToggleEl.addEventListener('mouseover', function () { 61 | dropdown.show(); 62 | }); 63 | dropdownToggleEl.addEventListener('mouseout', function () { 64 | dropdown.hide(); 65 | }); 66 | 67 | dropdownMenu.addEventListener('mouseover', function () { 68 | dropdown.show(); 69 | }); 70 | 71 | dropdownMenu.addEventListener('mouseout', function () { 72 | dropdown.hide(); 73 | }); 74 | 75 | }); 76 | } 77 | 78 | [].slice.call(d.querySelectorAll('[data-background]')).map(function(el) { 79 | el.style.background = 'url(' + el.getAttribute('data-background') + ')'; 80 | }); 81 | 82 | [].slice.call(d.querySelectorAll('[data-background-color]')).map(function(el) { 83 | el.style.background = 'url(' + el.getAttribute('data-background-color') + ')'; 84 | }); 85 | 86 | [].slice.call(d.querySelectorAll('[data-color]')).map(function(el) { 87 | el.style.color = 'url(' + el.getAttribute('data-color') + ')'; 88 | }); 89 | 90 | // Tooltips 91 | var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')) 92 | var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { 93 | return new bootstrap.Tooltip(tooltipTriggerEl) 94 | }) 95 | 96 | // Popovers 97 | var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]')) 98 | var popoverList = popoverTriggerList.map(function (popoverTriggerEl) { 99 | return new bootstrap.Popover(popoverTriggerEl) 100 | }) 101 | 102 | // Datepicker 103 | var datepickers = [].slice.call(document.querySelectorAll('[data-datepicker]')) 104 | var datepickersList = datepickers.map(function (el) { 105 | return new Datepicker(el, { 106 | buttonClass: 'btn' 107 | }); 108 | }) 109 | 110 | // Toasts 111 | var toastElList = [].slice.call(document.querySelectorAll('.toast')) 112 | var toastList = toastElList.map(function (toastEl) { 113 | return new bootstrap.Toast(toastEl) 114 | }) 115 | 116 | var scroll = new SmoothScroll('a[href*="#"]', { 117 | speed: 500, 118 | speedAsDuration: true 119 | }); 120 | 121 | if (d.querySelector('.current-year')) { 122 | d.querySelector('.current-year').textContent = new Date().getFullYear(); 123 | } 124 | 125 | }); -------------------------------------------------------------------------------- /src/html/components/accordions.html: -------------------------------------------------------------------------------- 1 | 17 | 18 | 19 | 20 | 21 | @@include('./_head.html', { 22 | "path": "../..", 23 | "title": "Pixel Bootstrap 5 - Accordions" 24 | }) 25 | 26 | 27 | 28 | @@include('./_navigation.html', { 29 | "path": "../..", 30 | "classes": "navbar-dark" 31 | }) 32 |
33 | 34 | @@include('./_preloader.html', { 35 | "path": "../.." 36 | }) 37 | 38 | 39 |
40 |
41 |
42 |
43 |

Accordions

44 |

The accordion uses collapse internally to make it collapsible. To render an accordion that’s expanded, add the .open class on the .accordion.

45 | 49 |
50 |
51 |
52 |
53 | 54 | 55 | @@include('./components/_accordions.html', { 56 | "path": "../.." 57 | }) 58 | 59 |
60 | @@include('./_footer.html', { 61 | "path": "../..", 62 | "classes": "bg-primary text-white" 63 | }) 64 | 65 | @@include('./_scripts.html', { 66 | "path": "../.." 67 | }) 68 | 69 | 70 | -------------------------------------------------------------------------------- /src/html/components/alerts.html: -------------------------------------------------------------------------------- 1 | 17 | 18 | 19 | 20 | 21 | @@include('./_head.html', { 22 | "path": "../..", 23 | "title": "Pixel Bootstrap 5 - Alerts" 24 | }) 25 | 26 | 27 | 28 | @@include('./_navigation.html', { 29 | "path": "../..", 30 | "classes": "navbar-dark" 31 | }) 32 |
33 | 34 | @@include('./_preloader.html', { 35 | "path": "../.." 36 | }) 37 | 38 |
39 |
40 |
41 |
42 |

Alerts

43 |

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

44 | 48 |
49 |
50 |
51 |
52 | 53 | 54 | @@include('./components/_alerts.html', { 55 | "path": "../.." 56 | }) 57 | 58 |
59 | @@include('./_footer.html', { 60 | "path": "../..", 61 | "classes": "bg-primary text-white" 62 | }) 63 | 64 | @@include('./_scripts.html', { 65 | "path": "../.." 66 | }) 67 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /src/html/components/badges.html: -------------------------------------------------------------------------------- 1 | 17 | 18 | 19 | 20 | 21 | @@include('./_head.html', { 22 | "path": "../..", 23 | "title": "Pixel Bootstrap 5 - Badges" 24 | }) 25 | 26 | 27 | 28 | @@include('./_navigation.html', { 29 | "path": "../..", 30 | "classes": "navbar-dark" 31 | }) 32 |
33 | 34 | @@include('./_preloader.html', { 35 | "path": "../.." 36 | }) 37 | 38 |
39 |
40 |
41 |
42 |

Badges

43 |

Examples for badges, our small count and labeling component.

44 | 48 |
49 |
50 |
51 |
52 | 53 | 54 | @@include('./components/_badges.html', { 55 | "path": "../.." 56 | }) 57 | 58 |
59 | @@include('./_footer.html', { 60 | "path": "../..", 61 | "classes": "bg-primary text-white" 62 | }) 63 | 64 | @@include('./_scripts.html', { 65 | "path": "../.." 66 | }) 67 | 68 | 69 | -------------------------------------------------------------------------------- /src/html/components/bootstrap-carousels.html: -------------------------------------------------------------------------------- 1 | 17 | 18 | 19 | 20 | 21 | @@include('./_head.html', { 22 | "path": "../..", 23 | "title": "Pixel Bootstrap 5 - Bootstrap carousels" 24 | }) 25 | 26 | 27 | 28 | @@include('./_navigation.html', { 29 | "path": "../..", 30 | "classes": "navbar-dark" 31 | }) 32 |
33 | 34 | @@include('./_preloader.html', { 35 | "path": "../.." 36 | }) 37 | 38 |
39 |
40 |
41 |
42 |

Bootstrap Carousels

43 |

The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup.

44 | 48 |
49 |
50 |
51 |
52 | 53 | 54 | @@include('./components/_bootstrap-carousels.html', { 55 | "path": "../.." 56 | }) 57 | 58 |
59 | 60 | @@include('./_footer.html', { 61 | "path": "../..", 62 | "classes": "bg-primary text-white" 63 | }) 64 | 65 | @@include('./_scripts.html', { 66 | "path": "../.." 67 | }) 68 | 69 | 70 | -------------------------------------------------------------------------------- /src/html/components/breadcrumbs.html: -------------------------------------------------------------------------------- 1 | 17 | 18 | 19 | 20 | 21 | @@include('./_head.html', { 22 | "path": "../..", 23 | "title": "Pixel Bootstrap 5 - Breadcrumbs" 24 | }) 25 | 26 | 27 | 28 | @@include('./_navigation.html', { 29 | "path": "../..", 30 | "classes": "navbar-dark" 31 | }) 32 |
33 | 34 | @@include('./_preloader.html', { 35 | "path": "../.." 36 | }) 37 | 38 |
39 |
40 |
41 |
42 |

Breadcrumbs

43 |

Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.

44 | 48 |
49 |
50 |
51 |
52 | 53 | 54 | @@include('./components/_breadcrumbs.html', { 55 | "path": "../.." 56 | }) 57 | 58 |
59 | @@include('./_footer.html', { 60 | "path": "../..", 61 | "classes": "bg-primary text-white" 62 | }) 63 | 64 | @@include('./_scripts.html', { 65 | "path": "../.." 66 | }) 67 | 68 | 69 | -------------------------------------------------------------------------------- /src/html/components/buttons.html: -------------------------------------------------------------------------------- 1 | 17 | 18 | 19 | 20 | 21 | @@include('./_head.html', { 22 | "path": "../..", 23 | "title": "Pixel Bootstrap 5 - Buttons" 24 | }) 25 | 26 | 27 | 28 | @@include('./_navigation.html', { 29 | "path": "../..", 30 | "classes": "navbar-dark" 31 | }) 32 |
33 | 34 | @@include('./_preloader.html', { 35 | "path": "../.." 36 | }) 37 | 38 |
39 |
40 |
41 |
42 |

Buttons

43 |

Use Pixel's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

44 | 48 |
49 |
50 |
51 |
52 | 53 | 54 | @@include('./components/_buttons.html', { 55 | "path": "../.." 56 | }) 57 | 58 |
59 | @@include('./_footer.html', { 60 | "path": "../..", 61 | "classes": "bg-primary text-white" 62 | }) 63 | 64 | @@include('./_scripts.html', { 65 | "path": "../.." 66 | }) 67 | 81 | 82 | 83 | -------------------------------------------------------------------------------- /src/html/components/cards.html: -------------------------------------------------------------------------------- 1 | 17 | 18 | 19 | 20 | 21 | @@include('./_head.html', { 22 | "path": "../..", 23 | "title": "Pixel Bootstrap 5 - Cards" 24 | }) 25 | 26 | 27 | 28 | @@include('./_navigation.html', { 29 | "path": "../..", 30 | "classes": "navbar-dark" 31 | }) 32 |
33 | 34 | @@include('./_preloader.html', { 35 | "path": "../.." 36 | }) 37 | 38 | 39 |
40 |
41 |
42 |
43 |

Cards

44 |

A .card is a flexible content container. It includes options for headers and footers, a wide variety of content and powerful display options.

45 | 49 |
50 |
51 |
52 |
53 | 54 | 55 | @@include('./components/_cards.html', { 56 | "path": "../.." 57 | }) 58 | 59 |
60 | @@include('./_footer.html', { 61 | "path": "../..", 62 | "classes": "bg-primary text-white" 63 | }) 64 | 65 | @@include('./_scripts.html', { 66 | "path": "../.." 67 | }) 68 | 69 | 70 | -------------------------------------------------------------------------------- /src/html/components/dropdowns.html: -------------------------------------------------------------------------------- 1 | 17 | 18 | 19 | 20 | 21 | @@include('./_head.html', { 22 | "path": "../..", 23 | "title": "Pixel Bootstrap 5 - Dropdowns" 24 | }) 25 | 26 | 27 | 28 | @@include('./_navigation.html', { 29 | "path": "../..", 30 | "classes": "navbar-dark" 31 | }) 32 |
33 | 34 | @@include('./_preloader.html', { 35 | "path": "../.." 36 | }) 37 | 38 |
39 |
40 |
41 |
42 |

Dropdowns

43 |

Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included JavaScript plugin.

44 | 48 |
49 |
50 |
51 |
52 | 53 | 54 | @@include('./components/_dropdowns.html', { 55 | "path": "../.." 56 | }) 57 | 58 |
59 | @@include('./_footer.html', { 60 | "path": "../..", 61 | "classes": "bg-primary text-white" 62 | }) 63 | 64 | @@include('./_scripts.html', { 65 | "path": "../.." 66 | }) 67 | 68 | 69 | -------------------------------------------------------------------------------- /src/html/components/forms.html: -------------------------------------------------------------------------------- 1 | 17 | 18 | 19 | 20 | 21 | @@include('./_head.html', { 22 | "path": "../..", 23 | "title": "Pixel Bootstrap 5 - Forms" 24 | }) 25 | 26 | 27 | 28 | @@include('./_navigation.html', { 29 | "path": "../..", 30 | "classes": "navbar-dark" 31 | }) 32 |
33 | 34 | @@include('./_preloader.html', { 35 | "path": "../.." 36 | }) 37 | 38 |
39 |
40 |
41 |
42 |

Forms

43 |

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.

44 | 48 |
49 |
50 |
51 |
52 | 53 | 54 | @@include('./components/_forms.html', { 55 | "path": "../.." 56 | }) 57 | 58 |
59 | @@include('./_footer.html', { 60 | "path": "../..", 61 | "classes": "bg-primary text-white" 62 | }) 63 | 64 | @@include('./_scripts.html', { 65 | "path": "../.." 66 | }) 67 | 68 | 69 | -------------------------------------------------------------------------------- /src/html/components/modals.html: -------------------------------------------------------------------------------- 1 | 17 | 18 | 19 | 20 | 21 | @@include('./_head.html', { 22 | "path": "../..", 23 | "title": "Pixel Bootstrap 5 - Modals" 24 | }) 25 | 26 | 27 | 28 | @@include('./_navigation.html', { 29 | "path": "../..", 30 | "classes": "navbar-dark" 31 | }) 32 |
33 | 34 | @@include('./_preloader.html', { 35 | "path": "../.." 36 | }) 37 | 38 |
39 |
40 |
41 |
42 |

Modals

43 |

Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.

44 | 48 |
49 |
50 |
51 |
52 | 53 | 54 | @@include('./components/_modals.html', { 55 | "path": "../.." 56 | }) 57 | 58 |
59 | @@include('./_footer.html', { 60 | "path": "../..", 61 | "classes": "bg-primary text-white" 62 | }) 63 | 64 | @@include('./_scripts.html', { 65 | "path": "../.." 66 | }) 67 | 68 | 69 | -------------------------------------------------------------------------------- /src/html/components/navs.html: -------------------------------------------------------------------------------- 1 | 17 | 18 | 19 | 20 | 21 | @@include('./_head.html', { 22 | "path": "../..", 23 | "title": "Pixel Bootstrap 5 - Navs" 24 | }) 25 | 26 | 27 | 28 | @@include('./_navigation.html', { 29 | "path": "../..", 30 | "classes": "navbar-dark" 31 | }) 32 |
33 | 34 | @@include('./_preloader.html', { 35 | "path": "../.." 36 | }) 37 | 38 |
39 |
40 |
41 |
42 |

Navs

43 |

Navigation available in Bootstrap share general markup and styles, from the base .nav class to the active and disabled states.

44 | 48 |
49 |
50 |
51 |
52 | 53 | 54 | @@include('./components/_navs.html', { 55 | "path": "../.." 56 | }) 57 | 58 |
59 | @@include('./_footer.html', { 60 | "path": "../..", 61 | "classes": "bg-primary text-white" 62 | }) 63 | 64 | @@include('./_scripts.html', { 65 | "path": "../.." 66 | }) 67 | 68 | 69 | -------------------------------------------------------------------------------- /src/html/components/pagination.html: -------------------------------------------------------------------------------- 1 | 17 | 18 | 19 | 20 | 21 | @@include('./_head.html', { 22 | "path": "../..", 23 | "title": "Pixel Bootstrap 5 - Pagination" 24 | }) 25 | 26 | 27 | 28 | @@include('./_navigation.html', { 29 | "path": "../..", 30 | "classes": "navbar-dark" 31 | }) 32 |
33 | 34 | @@include('./_preloader.html', { 35 | "path": "../.." 36 | }) 37 | 38 |
39 |
40 |
41 |
42 |

Pagination

43 |

Use Pixel's custom pagination styles to organize blog posts, cards or images.

44 | 48 |
49 |
50 |
51 |
52 | 53 | 54 | @@include('./components/_pagination.html', { 55 | "path": "../.." 56 | }) 57 | 58 |
59 | 60 | @@include('./_footer.html', { 61 | "path": "../..", 62 | "classes": "bg-primary text-white" 63 | }) 64 | 65 | @@include('./_scripts.html', { 66 | "path": "../.." 67 | }) 68 | 69 | 70 | -------------------------------------------------------------------------------- /src/html/components/popovers.html: -------------------------------------------------------------------------------- 1 | 17 | 18 | 19 | 20 | 21 | @@include('./_head.html', { 22 | "path": "../..", 23 | "title": "Pixel Bootstrap 5 - Popovers" 24 | }) 25 | 26 | 27 | 28 | @@include('./_navigation.html', { 29 | "path": "../..", 30 | "classes": "navbar-dark" 31 | }) 32 |
33 | 34 | @@include('./_preloader.html', { 35 | "path": "../.." 36 | }) 37 | 38 |
39 |
40 |
41 |
42 |

Popovers

43 |

Use Pixel's custom popovers to indicate extra information when clicking on certain elements.

44 | 48 |
49 |
50 |
51 |
52 | 53 | 54 | @@include('./components/_popovers.html', { 55 | "path": "../.." 56 | }) 57 | 58 |
59 | @@include('./_footer.html', { 60 | "path": "../..", 61 | "classes": "bg-primary text-white" 62 | }) 63 | 64 | @@include('./_scripts.html', { 65 | "path": "../.." 66 | }) 67 | 68 | 69 | -------------------------------------------------------------------------------- /src/html/components/progress-bars.html: -------------------------------------------------------------------------------- 1 | 17 | 18 | 19 | 20 | 21 | @@include('./_head.html', { 22 | "path": "../..", 23 | "title": "Pixel Bootstrap 5 - Progress bars" 24 | }) 25 | 26 | 27 | 28 | @@include('./_navigation.html', { 29 | "path": "../..", 30 | "classes": "navbar-dark" 31 | }) 32 |
33 | 34 | @@include('./_preloader.html', { 35 | "path": "../.." 36 | }) 37 | 38 |
39 |
40 |
41 |
42 |

Progress Bars

43 |

Progress components are built with two HTML elements, some CSS to set the width, and a few attributes.

44 |
45 |
46 |
47 |
48 | 49 | 50 | @@include('./components/_progress-bars.html', { 51 | "path": "../.." 52 | }) 53 | 54 |
55 | @@include('./_footer.html', { 56 | "path": "../..", 57 | "classes": "bg-primary text-white" 58 | }) 59 | 60 | @@include('./_scripts.html', { 61 | "path": "../.." 62 | }) 63 | 64 | 65 | -------------------------------------------------------------------------------- /src/html/components/tables.html: -------------------------------------------------------------------------------- 1 | 17 | 18 | 19 | 20 | 21 | @@include('./_head.html', { 22 | "path": "../..", 23 | "title": "Pixel Bootstrap 5 - Tables" 24 | }) 25 | 26 | 27 | 28 | @@include('./_navigation.html', { 29 | "path": "../..", 30 | "classes": "navbar-dark" 31 | }) 32 |
33 | 34 | @@include('./_preloader.html', { 35 | "path": "../.." 36 | }) 37 | 38 |
39 |
40 |
41 |
42 |

Tables

43 |

Use Pixel's custom steps elements to show a list of features or any other information.

44 | 48 |
49 |
50 |
51 |
52 | 53 | @@include('./components/_tables.html', { 54 | "path": "../.." 55 | }) 56 | 57 |
58 | 59 | @@include('./_footer.html', { 60 | "path": "../..", 61 | "classes": "bg-primary text-white" 62 | }) 63 | 64 | @@include('./_scripts.html', { 65 | "path": "../.." 66 | }) 67 | 68 | 69 | -------------------------------------------------------------------------------- /src/html/components/tabs.html: -------------------------------------------------------------------------------- 1 | 17 | 18 | 19 | 20 | 21 | @@include('./_head.html', { 22 | "path": "../..", 23 | "title": "Pixel Bootstrap 5 - Tabs" 24 | }) 25 | 26 | 27 | 28 | @@include('./_navigation.html', { 29 | "path": "../..", 30 | "classes": "navbar-dark" 31 | }) 32 |
33 | 34 | @@include('./_preloader.html', { 35 | "path": "../.." 36 | }) 37 | 38 |
39 |
40 |
41 |
42 |

Tabs

43 |

Use the tab JavaScript plugin—include it individually or through the compiled bootstrap.js file—to extend our navigational tabs and pills to create tabbable panes of local content, even via dropdown menus.

44 | 48 |
49 |
50 |
51 |
52 | 53 | 54 | @@include('./components/_tabs.html', { 55 | "path": "../.." 56 | }) 57 | 58 |
59 | 60 | @@include('./_footer.html', { 61 | "path": "../..", 62 | "classes": "bg-primary text-white" 63 | }) 64 | 65 | @@include('./_scripts.html', { 66 | "path": "../.." 67 | }) 68 | 69 | 70 | -------------------------------------------------------------------------------- /src/html/components/toasts.html: -------------------------------------------------------------------------------- 1 | 17 | 18 | 19 | 20 | 21 | @@include('./_head.html', { 22 | "path": "../..", 23 | "title": "Pixel Bootstrap 5 - Toasts" 24 | }) 25 | 26 | 27 | 28 | @@include('./_navigation.html', { 29 | "path": "../..", 30 | "classes": "navbar-dark" 31 | }) 32 |
33 | 34 | @@include('./_preloader.html', { 35 | "path": "../.." 36 | }) 37 | 38 |
39 |
40 |
41 |
42 |

Toasts

43 |

Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.

44 | 48 |
49 |
50 |
51 |
52 | 53 | 54 | @@include('./components/_toasts.html', { 55 | "path": "../.." 56 | }) 57 | 58 |
59 | 60 | @@include('./_footer.html', { 61 | "path": "../..", 62 | "classes": "bg-primary text-white" 63 | }) 64 | 65 | @@include('./_scripts.html', { 66 | "path": "../.." 67 | }) 68 | 69 | 70 | -------------------------------------------------------------------------------- /src/html/components/tooltips.html: -------------------------------------------------------------------------------- 1 | 17 | 18 | 19 | 20 | 21 | @@include('./_head.html', { 22 | "path": "../..", 23 | "title": "Pixel Bootstrap 5 - Tooltips" 24 | }) 25 | 26 | 27 | 28 | @@include('./_navigation.html', { 29 | "path": "../..", 30 | "classes": "navbar-dark" 31 | }) 32 |
33 | 34 | @@include('./_preloader.html', { 35 | "path": "../.." 36 | }) 37 | 38 |
39 |
40 |
41 |
42 |

Tooltips

43 |

Use Pixel's custom tooltips to indicate extra information when hovering over certain elements.

44 | 48 |
49 |
50 |
51 |
52 | 53 | 54 | @@include('./components/_tooltips.html', { 55 | "path": "../.." 56 | }) 57 | 58 |
59 | 60 | @@include('./_footer.html', { 61 | "path": "../..", 62 | "classes": "bg-primary text-white" 63 | }) 64 | 65 | @@include('./_scripts.html', { 66 | "path": "../.." 67 | }) 68 | 69 | 70 | -------------------------------------------------------------------------------- /src/html/components/typography.html: -------------------------------------------------------------------------------- 1 | 17 | 18 | 19 | 20 | 21 | @@include('./_head.html', { 22 | "path": "../..", 23 | "title": "Pixel Bootstrap 5 - Typography" 24 | }) 25 | 26 | 27 | 28 | @@include('./_navigation.html', { 29 | "path": "../..", 30 | "classes": "navbar-dark" 31 | }) 32 |
33 | 34 | @@include('./_preloader.html', { 35 | "path": "../.." 36 | }) 37 | 38 |
39 |
40 |
41 |
42 |

Typography

43 |

Pixel makes use of the Nunito Google Web Font for beatiful and readable typography.

44 | 48 |
49 |
50 |
51 |
52 | 53 | 54 | @@include('./components/_typography.html', { 55 | "path": "../.." 56 | }) 57 | 58 |
59 | @@include('./_footer.html', { 60 | "path": "../..", 61 | "classes": "bg-primary text-white" 62 | }) 63 | 64 | @@include('./_scripts.html', { 65 | "path": "../.." 66 | }) 67 | 68 | 69 | -------------------------------------------------------------------------------- /src/html/pages/blank.html: -------------------------------------------------------------------------------- 1 | 17 | 18 | 19 | 20 | 21 | @@include('./_head.html', { 22 | "path": "../..", 23 | "title": "Pixel Bootstrap 5 - Blank page" 24 | }) 25 | 26 | 27 | 28 | @@include('./_navigation.html', { 29 | "path": "../..", 30 | "classes": "navbar-light navbar-theme-secondary" 31 | }) 32 |
33 | 34 | @@include('./_preloader.html', { 35 | "path": "../.." 36 | }) 37 | 38 | 39 |
40 |
41 |
42 |
43 |

Blank starter page

44 |

Hello world!

45 |
46 |
47 |
48 |
49 |
50 | @@include('./_footer.html', { 51 | "path": "../..", 52 | "classes": "bg-dark text-white" 53 | }) 54 | 55 | @@include('./_scripts.html', { 56 | "path": "../.." 57 | }) 58 | 59 | 60 | -------------------------------------------------------------------------------- /src/partials/_analytics-body.html: -------------------------------------------------------------------------------- 1 | 2 | 4 | -------------------------------------------------------------------------------- /src/partials/_analytics.html: -------------------------------------------------------------------------------- 1 | 2 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/partials/_cta-careers.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 | 6 |
7 |
8 |
9 |
10 |

Become one of us

11 |

12 | Do you want to join our team and work remotely from anywhere you’d like? We can’t wait to hear from you! 13 |

14 | 15 | 16 | 17 | 18 | Check Careers 19 | 20 |
21 |
22 | 23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
-------------------------------------------------------------------------------- /src/partials/_footer.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/partials/_head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | @@title 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | @@if (environment === 'production') { 40 | @@include('./_analytics.html') 41 | } -------------------------------------------------------------------------------- /src/partials/_pages-preview.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 | About company page preview 5 |
6 |

About company

7 |
8 | 9 |
10 |
11 | 12 | Contact page preview 13 |
14 |

Contact

15 |
16 | 17 |
18 |
19 | 20 | Freelancer page preview 21 |
22 |

Freelancer

23 |
24 | 25 |
26 |
27 | 28 | Sign in page preview 29 |
30 |

Sign in

31 |
32 | 33 |
34 |
35 | 36 | Sign up page preview 37 |
38 |

Sign up

39 |
40 | 41 |
42 |
-------------------------------------------------------------------------------- /src/partials/_preloader.html: -------------------------------------------------------------------------------- 1 |
2 | 16 |
-------------------------------------------------------------------------------- /src/partials/_scripts.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/partials/components/_accordions.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |
4 |
5 |
6 | 7 |
8 |
9 |

10 | 14 |

15 |
17 |
18 | This is the first item's accordion body. It is hidden by default, until 19 | the collapse plugin adds the appropriate classes that we use to style each element. 20 | These classes control the overall appearance, as well as the showing and hiding via CSS 21 | transitions. You can modify any of this with custom CSS or overriding our default 22 | variables. It's also worth noting that just about any HTML can go within the 23 | .accordion-body, though the transition does limit overflow. 24 |
25 |
26 |
27 |
28 |

29 | 33 |

34 |
36 |
37 | This is the second item's accordion body. It is hidden by default, 38 | until the collapse plugin adds the appropriate classes that we use to style each 39 | element. These classes control the overall appearance, as well as the showing and hiding 40 | via CSS transitions. You can modify any of this with custom CSS or overriding our 41 | default variables. It's also worth noting that just about any HTML can go within the 42 | .accordion-body, though the transition does limit overflow. 43 |
44 |
45 |
46 |
47 |

48 | 52 |

53 |
55 |
56 | This is the third item's accordion body. It is hidden by default, until 57 | the collapse plugin adds the appropriate classes that we use to style each element. 58 | These classes control the overall appearance, as well as the showing and hiding via CSS 59 | transitions. You can modify any of this with custom CSS or overriding our default 60 | variables. It's also worth noting that just about any HTML can go within the 61 | .accordion-body, though the transition does limit overflow. 62 |
63 |
64 |
65 |
66 | 67 |
68 |
69 |
70 |
-------------------------------------------------------------------------------- /src/partials/components/_alerts.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |
4 |
5 |
6 | 9 | 12 | 15 | 18 | 21 | 24 | 27 | 30 |
31 |
32 |
33 |
34 | -------------------------------------------------------------------------------- /src/partials/components/_badges.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |
4 |
5 |
6 | Primary 7 | Secondary 8 | Tertiary 9 | Gray 10 | Success 11 | Danger 12 | Warning 13 | Info 14 |
15 |
16 |
17 |
18 | -------------------------------------------------------------------------------- /src/partials/components/_bootstrap-carousels.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |
4 |
5 |
6 | 27 |
28 |
29 |
30 |
31 | -------------------------------------------------------------------------------- /src/partials/components/_breadcrumbs.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |
4 |
5 |
6 |
7 | 8 | 15 | 16 | 17 | 24 | 25 | 26 | 33 | 34 |
35 |
36 |
37 |
38 |
39 | -------------------------------------------------------------------------------- /src/partials/components/_modals.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |
4 |
5 |
6 | 7 |
8 | 10 |
11 | 12 | 38 | 39 |
40 |
41 | 42 |
43 | 45 |
46 | 47 | 70 | 71 |
72 |
73 |
74 |
75 | -------------------------------------------------------------------------------- /src/partials/components/_navs.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |
4 |
5 |
6 | 7 |
8 | 22 |
23 | 24 |
25 |
26 | 27 |
28 |
29 |
30 |

Round Pill

31 |
32 |
33 |
34 | 35 |
36 |
37 | 38 |
39 | 53 |
54 | 55 |
56 |
57 | 58 |
59 |
60 |
61 |

Pills with Icons

62 |
63 |
64 |
65 | 66 |
67 |
68 | 69 |
70 | 88 |
89 | 90 |
91 |
92 |
93 |
94 | -------------------------------------------------------------------------------- /src/partials/components/_popovers.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |
4 | 5 |
6 |
7 | 12 | 13 | 18 | 19 | 24 | 25 | 30 |
31 |
32 |
33 |
34 | -------------------------------------------------------------------------------- /src/partials/components/_tabs.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |
4 |
5 |
6 | 7 |
8 | 24 |
25 | 26 | 27 |
28 |
29 |
30 |
32 |

Exercitation photo booth stumptown tote bag Banksy, elit small batch freegan sed. 33 | Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident 34 | chillwave deep v laborum. Aliquip veniam delectus, 35 | Marfa eiusmod Pinterest in do umami readymade swag.

36 |

Day handsome addition horrible sensible goodness two contempt. Evening for married 37 | his account removal. Estimable me disposing of be moonlight cordially curiosity.

38 |
39 |
41 |

Photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit 42 | seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v 43 | laborum. Aliquip veniam delectus, Marfa eiusmod 44 | Pinterest in do umami readymade swag.

45 |

Day handsome addition horrible sensible goodness two contempt. Evening for married 46 | his account removal. Estimable me disposing of be moonlight cordially curiosity.

47 |
48 |
50 |

Exercitation photo booth stumptown tote bag Banksy, elit small batch freegan sed. 51 | Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident 52 | chillwave deep v laborum. Aliquip veniam delectus, 53 | Marfa eiusmod Pinterest in do umami readymade swag.

54 |

Day handsome addition horrible sensible goodness two contempt. Evening for married 55 | his account removal. Estimable me disposing of be moonlight cordially curiosity.

56 |
57 |
58 |
59 |
60 | 61 |
62 |
63 |
64 |
65 | -------------------------------------------------------------------------------- /src/partials/components/_toasts.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |
4 |
5 |
6 | 17 |
18 |
19 | 31 |
32 |
33 | 45 |
46 |
47 |
48 |
49 | -------------------------------------------------------------------------------- /src/partials/components/_tooltips.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |
4 | 5 |
6 |
7 | 11 | 15 | 19 | 23 |
24 |
25 |
26 |
27 | -------------------------------------------------------------------------------- /src/scss/custom/_variables.scss: -------------------------------------------------------------------------------- 1 | // $primary: orange; -------------------------------------------------------------------------------- /src/scss/pixel.scss: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | ========================================================= 4 | * Pixel Free Bootstrap 5 UI Kit 5 | ========================================================= 6 | 7 | * Product Page: https://themesberg.com/product/ui-kit/pixel-free-bootstrap-5-ui-kit 8 | * Copyright 2021 Themesberg (https://www.themesberg.com) 9 | 10 | * Coded by https://themesberg.com 11 | 12 | ========================================================= 13 | 14 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. Contact us if you want to remove it. 15 | 16 | */ 17 | 18 | @import url('https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700&display=swap'); 19 | 20 | // update variables here 21 | @import "custom/variables"; 22 | 23 | @import "../../node_modules/bootstrap/scss/functions"; 24 | @import "pixel/variables"; 25 | 26 | // Third party 27 | @import '../../node_modules/vanillajs-datepicker/sass/datepicker.scss'; 28 | 29 | // Bootstrap 30 | @import "../../node_modules/bootstrap/scss/variables"; 31 | @import "../../node_modules/bootstrap/scss/mixins"; 32 | @import "../../node_modules/bootstrap/scss/utilities"; 33 | 34 | // Bootstrap Layout & components 35 | @import "../../node_modules/bootstrap/scss/root"; 36 | @import "../../node_modules/bootstrap/scss/reboot"; 37 | @import "../../node_modules/bootstrap/scss/type"; 38 | @import "../../node_modules/bootstrap/scss/images"; 39 | @import "../../node_modules/bootstrap/scss/containers"; 40 | @import "../../node_modules/bootstrap/scss/grid"; 41 | @import "../../node_modules/bootstrap/scss/tables"; 42 | @import "../../node_modules/bootstrap/scss/forms"; 43 | @import "../../node_modules/bootstrap/scss/buttons"; 44 | @import "../../node_modules/bootstrap/scss/transitions"; 45 | @import "../../node_modules/bootstrap/scss/dropdown"; 46 | @import "../../node_modules/bootstrap/scss/button-group"; 47 | @import "../../node_modules/bootstrap/scss/nav"; 48 | @import "../../node_modules/bootstrap/scss/navbar"; 49 | @import "../../node_modules/bootstrap/scss/card"; 50 | @import "../../node_modules/bootstrap/scss/accordion"; 51 | @import "../../node_modules/bootstrap/scss/breadcrumb"; 52 | @import "../../node_modules/bootstrap/scss/pagination"; 53 | @import "../../node_modules/bootstrap/scss/badge"; 54 | @import "../../node_modules/bootstrap/scss/alert"; 55 | @import "../../node_modules/bootstrap/scss/progress"; 56 | @import "../../node_modules/bootstrap/scss/list-group"; 57 | @import "../../node_modules/bootstrap/scss/close"; 58 | @import "../../node_modules/bootstrap/scss/toasts"; 59 | @import "../../node_modules/bootstrap/scss/modal"; 60 | @import "../../node_modules/bootstrap/scss/tooltip"; 61 | @import "../../node_modules/bootstrap/scss/popover"; 62 | @import "../../node_modules/bootstrap/scss/carousel"; 63 | @import "../../node_modules/bootstrap/scss/spinners"; 64 | 65 | // Helpers 66 | @import "../../node_modules/bootstrap/scss/helpers"; 67 | 68 | // Utilities 69 | @import "../../node_modules/bootstrap/scss/utilities/api"; 70 | // scss-docs-end import-stack 71 | 72 | // Mixins & functions 73 | @import "pixel/mixins"; 74 | @import "pixel/functions"; 75 | 76 | // Utilities 77 | @import "pixel/utilities"; 78 | 79 | // Layout 80 | @import "pixel/layout"; 81 | 82 | // Components 83 | @import "pixel/components"; 84 | 85 | // write your custom styles here! -------------------------------------------------------------------------------- /src/scss/pixel/_components.scss: -------------------------------------------------------------------------------- 1 | @import "components/body"; 2 | @import "components/accordions"; 3 | @import "components/alerts"; 4 | @import "components/avatars"; 5 | @import "components/badge"; 6 | @import "components/buttons"; 7 | @import "components/breadcrumb"; 8 | @import "components/card"; 9 | @import "components/carousel"; 10 | @import "components/close"; 11 | @import "components/datepicker"; 12 | @import "components/custom-forms"; 13 | @import "components/dropdown"; 14 | @import "components/forms"; 15 | @import "components/images"; 16 | @import "components/input-group"; 17 | @import "components/list-group"; 18 | @import "components/timelines"; 19 | @import "components/maps"; 20 | @import "components/modal"; 21 | @import "components/nav"; 22 | @import "components/pagination"; 23 | @import "components/popover"; 24 | @import "components/progress"; 25 | @import "components/preloader"; 26 | @import "components/shapes"; 27 | @import "components/steps"; 28 | @import "components/icons"; 29 | @import "components/type"; 30 | @import "components/tooltip"; 31 | -------------------------------------------------------------------------------- /src/scss/pixel/_functions.scss: -------------------------------------------------------------------------------- 1 | // Retrieve color Sass maps 2 | 3 | @function section-color($key: "primary") { 4 | @return map-get($section-colors, $key); 5 | } 6 | 7 | // Lines colors 8 | 9 | @function shapes-primary-color($key: "step-1-gradient-bg") { 10 | @return map-get($shapes-primary-colors, $key); 11 | } 12 | 13 | @function shapes-default-color($key: "step-1-gradient-bg") { 14 | @return map-get($shapes-default-colors, $key); 15 | } 16 | 17 | @function lines-light-color($key: "step-1-gradient-bg") { 18 | @return map-get($shapes-light-colors, $key); 19 | } 20 | 21 | @function shapes-dark-color($key: "step-1-gradient-bg") { 22 | @return map-get($shapes-dark-colors, $key); 23 | } -------------------------------------------------------------------------------- /src/scss/pixel/_layout.scss: -------------------------------------------------------------------------------- 1 | @import "layout/headroom"; 2 | @import "layout/navbar"; 3 | @import "layout/section"; 4 | @import "layout/footer"; 5 | -------------------------------------------------------------------------------- /src/scss/pixel/_mixins.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/animations"; 2 | @import "mixins/background-variant"; 3 | @import "mixins/icon"; 4 | @import "mixins/modals"; 5 | @import "mixins/popover"; 6 | @import "mixins/transform"; 7 | @import "mixins/utilities"; -------------------------------------------------------------------------------- /src/scss/pixel/_utilities.scss: -------------------------------------------------------------------------------- 1 | @import "utilities/backgrounds"; 2 | @import "utilities/floating"; 3 | @import "utilities/helper"; 4 | @import "utilities/position"; 5 | @import "utilities/sizing"; 6 | @import "utilities/spacing"; 7 | @import "utilities/shadows"; 8 | @import "utilities/text"; 9 | @import "utilities/transform"; 10 | @import "utilities/animations"; -------------------------------------------------------------------------------- /src/scss/pixel/components/_accordions.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * = Accordions 3 | */ 4 | // 5 | 6 | 7 | .accordion-button { 8 | text-align: left; 9 | 10 | &:not(.collapsed) { 11 | &::after { 12 | background-image: none; 13 | @include transform(rotateZ(45deg)); 14 | } 15 | } 16 | 17 | // Accordion icon 18 | &::after { 19 | background-image: none; 20 | content : '\f067'; 21 | font-family : $font-awesome-5; 22 | font-size : $font-size-base; 23 | font-weight : 900; 24 | } 25 | 26 | &:hover { 27 | background-color: $soft; 28 | } 29 | } 30 | 31 | 32 | // Flush accordion items 33 | // 34 | // Remove borders and border-radius to keep accordion items edge-to-edge. 35 | 36 | .accordion-flush { 37 | .accordion-button { 38 | background-color: transparent; 39 | 40 | &:not(.collapsed) { 41 | color: $tertiary; 42 | } 43 | 44 | &:focus { 45 | border-color: $gray-300; 46 | box-shadow : none; 47 | } 48 | } 49 | 50 | .accordion-collapse { 51 | border: 0; 52 | } 53 | } -------------------------------------------------------------------------------- /src/scss/pixel/components/_alerts.scss: -------------------------------------------------------------------------------- 1 | .alert-heading { 2 | font-weight: $font-weight-bold; 3 | } 4 | 5 | .alert-icon { 6 | margin-bottom: .5rem; 7 | 8 | span { 9 | font-size: $alert-icon-font-size; 10 | } 11 | } -------------------------------------------------------------------------------- /src/scss/pixel/components/_avatars.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * = Avatars 3 | */ 4 | 5 | .avatar+.avatar-content { 6 | display : inline-block; 7 | margin-left: .75rem; 8 | } 9 | 10 | .avatar-link { 11 | img { 12 | width : 4rem; 13 | height: 4rem; 14 | } 15 | } 16 | 17 | .avatar-sm { 18 | width : $avatar-sm-y; 19 | height: $avatar-sm-x; 20 | } 21 | 22 | .avatar-md { 23 | width : $avatar-md-y; 24 | height: $avatar-md-x; 25 | } 26 | 27 | .avatar-lg { 28 | width : $avatar-lg-y; 29 | height: $avatar-lg-x; 30 | } 31 | 32 | // Overlapped avatars 33 | 34 | .avatar-group { 35 | .avatar { 36 | position: relative; 37 | z-index : 2; 38 | border : 2px solid $card-bg; 39 | 40 | &:hover { 41 | z-index: 3; 42 | } 43 | } 44 | 45 | .avatar+.avatar { 46 | margin-left: -1rem; 47 | 48 | } 49 | } -------------------------------------------------------------------------------- /src/scss/pixel/components/_badge.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * = Badges 3 | */ 4 | 5 | //Tags 6 | .wi-tags { 7 | a { 8 | display : inline-block; 9 | padding : 0.125rem 0.875rem; 10 | margin : 0.25rem; 11 | line-height : 2; 12 | font-size : $font-size-sm; 13 | background-color: $white; 14 | border : $border-width solid $gray-300; 15 | @include border-radius($border-radius); 16 | 17 | &:hover { 18 | background-color: $primary; 19 | color : $white; 20 | } 21 | } 22 | } 23 | 24 | .pixel-pro-badge { 25 | position : relative; 26 | font-size : $font-size-sm; 27 | text-transform: uppercase; 28 | font-weight : $font-weight-bold; 29 | right : -11px; 30 | padding : 4px 12px; 31 | top : -30px; 32 | background : $white; 33 | @include border-radius($border-radius-sm); 34 | @include box-shadow($box-shadow-sm); 35 | 36 | @include media-breakpoint-down(sm) { 37 | font-size: .7rem; 38 | right : -13px; 39 | padding : 3px 7px; 40 | top : -23px; 41 | } 42 | } -------------------------------------------------------------------------------- /src/scss/pixel/components/_body.scss: -------------------------------------------------------------------------------- 1 | iframe { 2 | border: 0; 3 | } 4 | 5 | figcaption, 6 | figure, 7 | main { 8 | display: block; 9 | margin : 0; 10 | } 11 | 12 | main { 13 | overflow: hidden; 14 | } 15 | 16 | img { 17 | max-width: 100%; 18 | } 19 | 20 | strong { 21 | font-weight: $font-weight-bold; 22 | } 23 | 24 | button:focus { 25 | outline: 0; 26 | } 27 | 28 | label { 29 | font-weight : $font-weight-bold; 30 | margin-bottom: .5rem; 31 | } -------------------------------------------------------------------------------- /src/scss/pixel/components/_breadcrumb.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * = Breadcrumbs 3 | */ 4 | 5 | 6 | .breadcrumb-transparent { 7 | background: transparent; 8 | padding : 0; 9 | } 10 | 11 | @each $color, 12 | $value in $theme-colors { 13 | .breadcrumb-#{$color} { 14 | background: $value; 15 | 16 | .breadcrumb-item { 17 | &.active { 18 | color: $white; 19 | } 20 | } 21 | 22 | &.breadcrumb-transparent { 23 | background: transparent; 24 | 25 | .breadcrumb-item { 26 | &.active { 27 | color: $value; 28 | } 29 | } 30 | } 31 | } 32 | } 33 | 34 | .breadcrumb-text-light { 35 | .breadcrumb-item { 36 | 37 | &, 38 | a { 39 | color: $breadcrumb-item-light-color; 40 | } 41 | 42 | &:before { 43 | color: $breadcrumb-divider-light-color; 44 | } 45 | } 46 | } -------------------------------------------------------------------------------- /src/scss/pixel/components/_buttons.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * = Buttons 3 | */ 4 | 5 | .btn { 6 | position : relative; 7 | transition: $transition-base; 8 | font-size : $btn-font-size; 9 | @include border-radius($border-radius); 10 | 11 | .btn-group &, 12 | .input-group & { 13 | margin-right: 0; 14 | transform : translateY(0); 15 | } 16 | 17 | .toggle-arrow { 18 | transition: $transition-base; 19 | } 20 | 21 | &[aria-expanded="true"] { 22 | .toggle-arrow { 23 | @include transform(rotate(180deg)); 24 | } 25 | } 26 | 27 | &.btn-pill { 28 | @include border-radius($border-radius-xl); 29 | } 30 | 31 | } 32 | 33 | // Sizes 34 | .btn-xs { 35 | padding: 0.275rem 0.5rem; 36 | 37 | &, 38 | span { 39 | font-size: .775rem !important; 40 | } 41 | } 42 | 43 | .btn-sm { 44 | 45 | &, 46 | span { 47 | font-size: $font-size-sm !important; 48 | } 49 | } 50 | 51 | .btn-md { 52 | 53 | &, 54 | span { 55 | font-size: $font-size-md !important; 56 | } 57 | } 58 | 59 | .btn-icon-only { 60 | width : 2.575rem; 61 | height: 2.575rem; 62 | 63 | &a { 64 | line-height: 2.5; 65 | } 66 | 67 | &.btn-xs { 68 | width : 1.7rem; 69 | height: 1.7rem; 70 | } 71 | 72 | &.btn-sm { 73 | width : 2rem; 74 | height: 2rem; 75 | } 76 | } 77 | 78 | .spinner-border, 79 | .spinner-brow { 80 | vertical-align: middle; 81 | } 82 | 83 | .btn-loading-overlay { 84 | .spinner { 85 | position: absolute; 86 | top : 50%; 87 | left : 50%; 88 | @include transform(translate(-50%, -50%)); 89 | opacity: 0; 90 | } 91 | 92 | .btn-inner-text, 93 | .spinner { 94 | transition: $transition-base; 95 | } 96 | 97 | .btn-inner-text { 98 | opacity: 1; 99 | } 100 | 101 | &.btn-loading { 102 | .spinner { 103 | opacity: 1; 104 | } 105 | 106 | .btn-inner-text { 107 | opacity: 0; 108 | } 109 | } 110 | } 111 | 112 | // Set color of theme buttons 113 | @each $color, 114 | $value in $brand-colors { 115 | .btn-#{$color} { 116 | @include button-variant($value, $value); 117 | } 118 | } -------------------------------------------------------------------------------- /src/scss/pixel/components/_carousel.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * = Bootstrap carousels 3 | */ 4 | 5 | .carousel-caption { 6 | 7 | &, 8 | h5 { 9 | color: $white; 10 | } 11 | } 12 | 13 | //Indicators 14 | 15 | .carousel-indicators { 16 | li { 17 | height : 10px; 18 | width : 10px; 19 | border-radius: $circle-radius; 20 | background : transparent; 21 | border : 2px solid $white; 22 | } 23 | 24 | .active { 25 | opacity : 1; 26 | background: $white; 27 | } 28 | } 29 | 30 | //Carousel Controls 31 | 32 | .carousel-control-prev-icon, 33 | .carousel-control-next-icon { 34 | width : auto; 35 | height : auto; 36 | font-weight: 900; 37 | } 38 | 39 | .carousel-control-prev-icon { 40 | background-image: none; 41 | 42 | &::before { 43 | content : '\f060'; 44 | font-family: $font-awesome-5; 45 | font-size : $font-size-xxl; 46 | } 47 | } 48 | 49 | .carousel-control-next-icon { 50 | background-image: none; 51 | 52 | &:before { 53 | font-family: $font-awesome-5; 54 | content : "\f061"; 55 | font-size : $font-size-xxl; 56 | } 57 | } 58 | 59 | .sr-only { 60 | width : 90px; 61 | height : 37px; 62 | padding : 4px; 63 | background-color: $success; 64 | } -------------------------------------------------------------------------------- /src/scss/pixel/components/_close.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * = Close 3 | */ 4 | 5 | .close { 6 | @if $enable-transitions { 7 | transition: $transition-base; 8 | } 9 | 10 | &>span:not(.sr-only) { 11 | display : block; 12 | height : 1.25rem; 13 | width : 1.25rem; 14 | background-color: $close-bg; 15 | color : $close-color; 16 | line-height : 22px; 17 | border-radius : 50%; 18 | font-size : 1.25rem; 19 | 20 | @if $enable-transitions { 21 | transition: $transition-base; 22 | } 23 | } 24 | 25 | &:hover, 26 | &:focus { 27 | background-color: $close-hover-bg; 28 | color : $close-hover-color; 29 | outline : none; 30 | 31 | span:not(.sr-only) { 32 | background-color: $close-hover-bg; 33 | } 34 | } 35 | } -------------------------------------------------------------------------------- /src/scss/pixel/components/_custom-forms.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * = Custom forms 3 | */ 4 | 5 | .custom-control-label { 6 | 7 | // Background-color and (when enabled) gradient 8 | &:before { 9 | box-shadow: $custom-control-box-shadow; 10 | 11 | @if $enable-transitions { 12 | transition: $input-transition; 13 | } 14 | } 15 | 16 | span { 17 | position: relative; 18 | top : 2px; 19 | } 20 | } 21 | 22 | .custom-control-label { 23 | margin-bottom: 0; 24 | } 25 | 26 | .custom-control-input { 27 | &:active~.custom-control-label::before { 28 | border-color: $custom-control-indicator-active-border-color; 29 | } 30 | } -------------------------------------------------------------------------------- /src/scss/pixel/components/_datepicker.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * = Datepickers 3 | */ 4 | 5 | .datepicker { 6 | 7 | .datepicker-cell.selected, 8 | .datepicker-cell.selected:hover { 9 | background: $primary; 10 | } 11 | 12 | table { 13 | margin : 0; 14 | -webkit-touch-callout: none; 15 | user-select : none; 16 | 17 | td { 18 | border-radius: 0 !important; 19 | } 20 | 21 | th { 22 | border-radius: 0; 23 | font-weight : 500; 24 | } 25 | 26 | td, 27 | th { 28 | width : 36px !important; 29 | height : 36px !important; 30 | border : none; 31 | text-align: center; 32 | } 33 | } 34 | } -------------------------------------------------------------------------------- /src/scss/pixel/components/_dropdown.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * = Dropdowns 3 | */ 4 | 5 | .dropdown-menu { 6 | min-width: 12rem; 7 | 8 | .dropdown-header, 9 | .dropdown-item { 10 | padding : .5rem 1rem; 11 | font-size: $dropdown-font-size; 12 | } 13 | 14 | .dropdown-header { 15 | color : $dropdown-header-color; 16 | font-weight: $dropdown-header-font-weight; 17 | } 18 | 19 | .dropdown-item { 20 | color : $dropdown-color; 21 | transition : $transition-base; 22 | font-weight: $dropdown-item-font-weight; 23 | 24 | &a:hover { 25 | color: $dropdown-item-hover-color; 26 | } 27 | } 28 | 29 | .show & { 30 | animation: show-dropdown .2s ease forwards; 31 | } 32 | 33 | } 34 | 35 | // this helps when not only the button should toggle a dropdown 36 | [data-toggle]:hover { 37 | cursor: pointer; 38 | } 39 | 40 | // remove the caret from Bootstrap by default 41 | .dropdown-toggle { 42 | 43 | &:after, 44 | .dropend &:after, 45 | .dropstart &:before, 46 | .dropup &:after { 47 | display: none; 48 | } 49 | } 50 | 51 | // Dropown sizes 52 | .dropdown-menu-sm { 53 | min-width: 100px; 54 | border : $border-radius-lg; 55 | } 56 | 57 | .dropdown-menu-md { 58 | min-width: 180px; 59 | border : $border-radius-lg; 60 | } 61 | 62 | .dropdown-menu-lg { 63 | min-width : 260px; 64 | border-radius: $border-radius-lg; 65 | } 66 | 67 | .dropdown-menu-xl { 68 | min-width : 450px; 69 | border-radius: $border-radius-lg; 70 | } 71 | 72 | .sr-only { 73 | background-color: $primary; 74 | color : $white; 75 | } -------------------------------------------------------------------------------- /src/scss/pixel/components/_forms.scss: -------------------------------------------------------------------------------- 1 | .form-control { 2 | box-shadow: none; 3 | 4 | &.form-control-lg { 5 | padding: $inpu-lg-padding-y $input-padding-x; 6 | } 7 | } 8 | 9 | .input-group { 10 | .input-group-text:focus { 11 | border-color: $primary; 12 | outline : 0; 13 | } 14 | } 15 | 16 | .focused { 17 | 18 | .input-group { 19 | .input-group-text { 20 | border-color: $primary; 21 | outline : 0; 22 | } 23 | } 24 | 25 | .form-control { 26 | border-color : $input-focus-border-color; 27 | background-color: $input-focus-bg; 28 | } 29 | } 30 | 31 | .form-switch { 32 | padding-left: $form-switch-padding-left; 33 | 34 | .form-check-input { 35 | height: 1.275em; 36 | } 37 | } 38 | 39 | .form-select { 40 | .form-select-lg { 41 | padding: $form-select-padding-y ($form-select-padding-x + $form-select-indicator-padding) $form-select-padding-y $form-select-padding-x; 42 | } 43 | } 44 | 45 | //Add File Alternative Style 46 | 47 | .file-field input[type="file"] { 48 | position : absolute; 49 | cursor : pointer; 50 | filter : alpha(opacity=0); 51 | opacity : 0; 52 | padding-bottom: 30px; 53 | } 54 | 55 | .file-field span { 56 | cursor: pointer; 57 | } -------------------------------------------------------------------------------- /src/scss/pixel/components/_icons.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * = Icon boxes 3 | */ 4 | 5 | .icon { 6 | text-align: center; 7 | display : inline-flex; 8 | @include align-items(center); 9 | @include justify-content(center); 10 | 11 | span, 12 | svg { 13 | font-size: $icon-size; 14 | } 15 | 16 | &.icon-xs { 17 | 18 | span, 19 | svg { 20 | font-size: $icon-size-xs; 21 | } 22 | } 23 | 24 | &.icon-sm { 25 | 26 | span, 27 | svg { 28 | font-size: $icon-size-sm; 29 | } 30 | } 31 | 32 | &.icon-md { 33 | 34 | span, 35 | svg { 36 | font-size: $icon-size-md; 37 | } 38 | } 39 | 40 | &.icon-lg { 41 | 42 | span, 43 | svg { 44 | font-size: $icon-size-xl; 45 | } 46 | } 47 | 48 | &.icon-xl { 49 | 50 | span, 51 | svg { 52 | font-size: $icon-size-xxl; 53 | } 54 | } 55 | 56 | &.rounded-circle { 57 | .icon-bordered { 58 | @include border-radius($circle-radius); 59 | } 60 | } 61 | 62 | &.organic-radius { 63 | .icon-bordered { 64 | @include border-radius($organic-radius); 65 | } 66 | } 67 | } 68 | 69 | .shape-xs { 70 | width : 10px; 71 | height: 10px; 72 | } 73 | 74 | // Icons included in shapes 75 | .icon-shape { 76 | width : $icon-shape; 77 | height : $icon-shape; 78 | text-align : center; 79 | display : inline-flex; 80 | align-items : center; 81 | justify-content: center; 82 | @include border-radius($border-radius); 83 | 84 | span, 85 | svg { 86 | font-size: $icon-size; 87 | } 88 | 89 | &.icon-sm { 90 | width : $icon-shape-sm; 91 | height: $icon-shape-sm; 92 | 93 | span, 94 | svg { 95 | font-size: $icon-size-sm; 96 | } 97 | } 98 | 99 | &.icon-md { 100 | width : $icon-shape; 101 | height: $icon-shape; 102 | 103 | span, 104 | svg { 105 | font-size: 1.75rem; 106 | } 107 | } 108 | 109 | &.icon-lg { 110 | width : $icon-shape-lg; 111 | height: $icon-shape-lg; 112 | 113 | span, 114 | svg { 115 | font-size: $icon-size-xl; 116 | } 117 | } 118 | } 119 | 120 | .github-big-icon { 121 | position: absolute; 122 | right : -35px; 123 | top : 165px; 124 | 125 | span { 126 | font-size: 800px; 127 | opacity : .1; 128 | } 129 | } 130 | 131 | //Colors for icons 132 | @each $color, 133 | $value in $theme-colors { 134 | .icon-shape-#{$color} { 135 | @include icon-shape-variant($value); 136 | } 137 | 138 | .icon-#{$color} { 139 | span { 140 | color: $value; 141 | } 142 | } 143 | 144 | .fill-#{$color} { 145 | fill: $value; 146 | } 147 | } 148 | 149 | //Index Big Icon 150 | .bootstrap-big-icon { 151 | position : absolute; 152 | opacity : .05; 153 | transform: rotate(17deg); 154 | 155 | @include media-breakpoint-up(lg) { 156 | right : -20%; 157 | bottom: 6%; 158 | } 159 | 160 | @include media-breakpoint-up(xl) { 161 | right : -10%; 162 | bottom: 6%; 163 | } 164 | } -------------------------------------------------------------------------------- /src/scss/pixel/components/_images.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * = Images 3 | */ 4 | 5 | .image-lg { 6 | height: 12rem; 7 | } 8 | 9 | .image-md { 10 | height: 5rem; 11 | } 12 | 13 | .image-sm { 14 | height: 3rem; 15 | } 16 | 17 | .image-xs { 18 | height: 2rem; 19 | } 20 | 21 | .small-image { 22 | height: 4rem; 23 | } 24 | 25 | .img-thumbnail { 26 | border-width: $border-width-md; 27 | box-shadow : none; 28 | } 29 | 30 | .full-image { 31 | height: 100%; 32 | } 33 | 34 | @include media-breakpoint-up(sm) { 35 | .effect-img-2 { 36 | position: absolute; 37 | right : 5rem; 38 | top : 19%; 39 | z-index : 2; 40 | margin : 0; 41 | } 42 | 43 | .effect-img-1, 44 | .effect-img-2 { 45 | width : 350px; 46 | height: auto; 47 | } 48 | } 49 | 50 | @include media-breakpoint-down(md) { 51 | .effect-img-2 { 52 | right: .425rem; 53 | top : 0; 54 | } 55 | } -------------------------------------------------------------------------------- /src/scss/pixel/components/_input-group.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * = Input groups 3 | */ 4 | 5 | .input-group { 6 | border-radius: $input-border-radius; 7 | transition : $transition-base; 8 | 9 | .form-control { 10 | 11 | &.is-invalid { 12 | border-top-right-radius : $border-radius; 13 | border-bottom-right-radius: $border-radius; 14 | } 15 | } 16 | 17 | } -------------------------------------------------------------------------------- /src/scss/pixel/components/_list-group.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * = List groups 3 | */ 4 | 5 | 6 | .list-group-item { 7 | background : transparent; 8 | border-radius: $list-group-item-border-radius; 9 | 10 | &:first-child, 11 | &:last-child { 12 | border-radius: $list-group-item-border-radius; 13 | } 14 | } 15 | 16 | .list-group { 17 | &.dashboard-menu { 18 | .list-group-item { 19 | &:hover { 20 | background-color: #f5f5f5; 21 | @include border-radius($list-group-border-radius); 22 | } 23 | 24 | &.active { 25 | color : $tertiary; 26 | background : transparent; 27 | font-weight: $font-weight-bold; 28 | } 29 | } 30 | } 31 | } 32 | 33 | .list-group-space { 34 | .list-group-item { 35 | margin-bottom: 1.5rem; 36 | @include border-radius($list-group-border-radius); 37 | } 38 | } 39 | 40 | .list-group-img { 41 | width : 3rem; 42 | height : 3rem; 43 | border-radius : 50%; 44 | vertical-align: top; 45 | margin : -.1rem 1.2rem 0 -.2rem; 46 | } 47 | 48 | .list-group-sm { 49 | .list-group-item { 50 | padding : $list-group-sm-item-padding-y $list-group-sm-item-padding-x; 51 | color : $list-group-color; 52 | border-bottom: $list-group-border-width solid #f9f7f7; 53 | 54 | &.active { 55 | border-color: #f9f7f7; 56 | border-left : 0; 57 | border-right: 0; 58 | font-weight : $font-weight-bold; 59 | } 60 | } 61 | } -------------------------------------------------------------------------------- /src/scss/pixel/components/_maps.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * = Maps 3 | */ 4 | 5 | .map { 6 | height: 500px; 7 | width : 100%; 8 | @include filter(grayscale(100%)) 9 | } -------------------------------------------------------------------------------- /src/scss/pixel/components/_modal.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * = Modals 3 | */ 4 | 5 | .modal { 6 | &.static-example { 7 | position: relative; 8 | display : block; 9 | } 10 | } 11 | 12 | .modal-header .close { 13 | padding: .825rem; 14 | } 15 | 16 | .modal-content { 17 | border: 0; 18 | 19 | @if $enable-rounded { 20 | border-radius: $modal-content-border-radius; 21 | } 22 | 23 | @else { 24 | border-radius: 0; 25 | } 26 | } 27 | 28 | .modal-fluid { 29 | .modal-dialog { 30 | margin-top : 0; 31 | margin-bottom: 0; 32 | } 33 | 34 | .modal-content { 35 | border-radius: 0; 36 | } 37 | } 38 | 39 | @each $color, 40 | $value in $theme-colors { 41 | .modal-#{$color} { 42 | @include modal-variant($value); 43 | } 44 | } -------------------------------------------------------------------------------- /src/scss/pixel/components/_nav.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * = Navs 3 | */ 4 | 5 | .nav-link { 6 | color: $nav-link-color; 7 | 8 | &:hover, 9 | &.active { 10 | color: $nav-link-hover-color; 11 | 12 | img { 13 | opacity : inherit; 14 | transition: $transition-base; 15 | } 16 | } 17 | 18 | span { 19 | position: relative; 20 | 21 | &:hover { 22 | color: $nav-link-hover-color; 23 | } 24 | } 25 | 26 | img { 27 | opacity: .5; 28 | } 29 | } 30 | 31 | //Tabs 32 | 33 | .nav-tabs { 34 | .nav-item { 35 | margin-bottom: 0; 36 | } 37 | 38 | .nav-link { 39 | border : 0; 40 | padding: 1rem 1rem; 41 | } 42 | } 43 | 44 | // Pills 45 | 46 | .nav-pills { 47 | 48 | .nav-item:not(:last-child) { 49 | padding-right: $nav-pills-space-x; 50 | } 51 | 52 | .nav-link { 53 | padding : $nav-pills-padding-y $nav-pills-padding-x; 54 | transition: $transition-base; 55 | box-shadow: $nav-link-shadow; 56 | border : $nav-pills-border-width solid $nav-pills-border-color; 57 | 58 | &.avatar-link { 59 | border: 0; 60 | } 61 | 62 | &:hover { 63 | background-color: $nav-pills-link-active-bg; 64 | } 65 | } 66 | 67 | .nav-link.active, 68 | .show>.nav-link { 69 | color : $nav-pills-link-active-color; 70 | background-color: $nav-pills-link-active-bg; 71 | border-color : $nav-pills-link-active-color; 72 | } 73 | 74 | &.rounded { 75 | .nav-link { 76 | border-radius: 30px; 77 | } 78 | 79 | &.vertical-tab { 80 | .nav-link { 81 | margin-bottom: .625rem; 82 | min-width : 100px; 83 | } 84 | 85 | .nav-item:not(:last-child) { 86 | padding-right: 0; 87 | } 88 | } 89 | } 90 | 91 | &.bordered-pill-md { 92 | .nav-link { 93 | border : $border-width-md solid $gray-200; 94 | font-weight: $font-weight-bold; 95 | } 96 | } 97 | 98 | &.vertical-tab { 99 | .nav-link { 100 | margin-bottom: .625rem; 101 | } 102 | 103 | .nav-item:not(:last-child) { 104 | padding-right: 0; 105 | } 106 | } 107 | 108 | @include media-breakpoint-down(xs) { 109 | .nav-item { 110 | margin-bottom: $spacer; 111 | } 112 | } 113 | } 114 | 115 | @include media-breakpoint-down(sm) { 116 | .nav-pills:not(.nav-pills-circle) { 117 | .nav-item { 118 | padding-right: 0; 119 | } 120 | } 121 | } 122 | 123 | 124 | // Navs circle 125 | 126 | .nav-pill-circle { 127 | .nav-link { 128 | @include display-flex(); 129 | text-align : center; 130 | height : 80px; 131 | width : 80px; 132 | padding : 0; 133 | box-shadow : $nav-link-shadow; 134 | border-radius : $nav-pills-border-circle; 135 | align-items : center; 136 | justify-content: center; 137 | 138 | &.avatar-link { 139 | box-shadow: none; 140 | } 141 | } 142 | 143 | &.vertical-tab { 144 | .nav-item:not(:last-child) { 145 | padding-right: 0; 146 | } 147 | } 148 | 149 | .nav-link-icon { 150 | 151 | span, 152 | svg { 153 | font-size: 1.25rem; 154 | margin : 0; 155 | display : block; 156 | } 157 | } 158 | } 159 | 160 | // Nav wrapper 161 | .nav-wrapper { 162 | padding: 1rem 0; 163 | @include border-top-radius($card-border-radius); 164 | 165 | +.card { 166 | @include border-top-radius(0); 167 | @include border-bottom-radius($card-border-radius); 168 | } 169 | } 170 | 171 | // Tabbable tabs 172 | // 173 | // Hide tabbable panes to start, show them when `.active` 174 | 175 | .tab-content { 176 | >.tab-pane { 177 | display: none; 178 | 179 | pre { 180 | padding: 0; 181 | margin : 0; 182 | } 183 | } 184 | 185 | >.active { 186 | display: block; 187 | } 188 | } -------------------------------------------------------------------------------- /src/scss/pixel/components/_pagination.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * = Paginations 3 | */ 4 | .circle-pagination { 5 | 6 | .page-link, 7 | span { 8 | @include display-flex(); 9 | align-items : center; 10 | justify-content: center; 11 | width : 34px; 12 | height : 34px; 13 | padding : 0; 14 | @include border-radius($circle-radius); 15 | } 16 | } -------------------------------------------------------------------------------- /src/scss/pixel/components/_popover.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * = Popovers 3 | */ 4 | 5 | 6 | .popover-header { 7 | font-weight: $font-weight-bold; 8 | } -------------------------------------------------------------------------------- /src/scss/pixel/components/_preloader.scss: -------------------------------------------------------------------------------- 1 | .preloader { 2 | display : flex; 3 | align-items: center; 4 | height : 100vh; 5 | left : 0; 6 | position : fixed; 7 | top : 0; 8 | transition : height .3s linear; 9 | width : 100%; 10 | z-index : 9999; 11 | 12 | img { 13 | width : 30px; 14 | height: 30px; 15 | } 16 | 17 | &.show { 18 | height: 0; 19 | } 20 | } -------------------------------------------------------------------------------- /src/scss/pixel/components/_progress.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * = Progress bars 3 | */ 4 | 5 | .progress-wrapper { 6 | position: relative; 7 | } 8 | 9 | .progress-bar { 10 | box-shadow : none; 11 | border-radius: 0; 12 | height : auto; 13 | } 14 | 15 | .progress { 16 | height : 4px; 17 | margin-bottom : $spacer; 18 | overflow : hidden; 19 | border-radius : $border-radius-sm; 20 | background-color: $progress-bg; 21 | font-size : $font-size-xs; 22 | font-weight : $font-weight-bold; 23 | @include box-shadow(inset 0 1px 3px rgba(0, 0, 0, 0.2)); 24 | } 25 | 26 | .progress-xl { 27 | height: $progress-xl-size; 28 | } 29 | 30 | .progress-lg { 31 | height: $progress-lg-size; 32 | } 33 | 34 | .progress-sm { 35 | height: $progress-sm-size; 36 | } 37 | 38 | .progress-info { 39 | @include display-flex(); 40 | @include align-items(center); 41 | @include justify-content(space-between); 42 | margin-bottom: .5rem; 43 | 44 | .progress-label { 45 | span { 46 | display : inline-block; 47 | color : $primary; 48 | font-size : $font-size-sm; 49 | font-weight: $font-weight-bold; 50 | } 51 | } 52 | 53 | .progress-percentage { 54 | text-align: right; 55 | 56 | span { 57 | display : inline-block; 58 | color : $body-color; 59 | font-size : $font-size-xs; 60 | font-weight: $font-weight-bold; 61 | } 62 | } 63 | } 64 | 65 | .info-xl { 66 | 67 | .progress-label, 68 | .progress-percentage { 69 | span { 70 | font-size: $font-size-sm; 71 | } 72 | } 73 | 74 | .progress-percentage { 75 | text-align: right; 76 | } 77 | 78 | } 79 | 80 | .progress-tooltip { 81 | background : $primary; 82 | color : $white; 83 | font-weight : $font-weight-bold; 84 | padding : .25rem .375rem; 85 | line-height : 1; 86 | font-size : $font-size-xs; 87 | position : relative; 88 | border-radius: $border-radius-sm; 89 | 90 | &:after { 91 | content : " "; 92 | position : absolute; 93 | top : 100%; 94 | left : 10px; 95 | border : solid transparent; 96 | height : 0; 97 | width : 0; 98 | pointer-events : none; 99 | border-top-color: $gray; 100 | border-width : 6px; 101 | } 102 | } 103 | 104 | @-webkit-keyframes animate-positive { 105 | 0% { 106 | width: 0%; 107 | } 108 | } 109 | 110 | @keyframes animate-positive { 111 | 0% { 112 | width: 0%; 113 | } 114 | } 115 | 116 | //Tooltip arrow color 117 | @each $color, 118 | $value in $theme-colors { 119 | .progress-info { 120 | .bg-#{$color} { 121 | &::after { 122 | border-top-color: $value; 123 | } 124 | } 125 | } 126 | } -------------------------------------------------------------------------------- /src/scss/pixel/components/_shapes.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * = Shapes 3 | */ 4 | 5 | 6 | // Shape colors 7 | @each $color, 8 | $value in $theme-colors { 9 | .shape-#{$color} { 10 | background-color: $value; 11 | 12 | .step-number { 13 | background-color: $value; 14 | } 15 | } 16 | } 17 | 18 | .organic-radius { 19 | border-radius: 63% 37% 30% 70% / 50% 45% 55% 50%; 20 | } 21 | 22 | .color-shape { 23 | width : 7rem; 24 | height: 7rem; 25 | } -------------------------------------------------------------------------------- /src/scss/pixel/components/_steps.scss: -------------------------------------------------------------------------------- 1 | /**steps 2 | * = Accordions 3 | */ 4 | 5 | .step { 6 | position : relative; 7 | margin-bottom: 4rem; 8 | 9 | .step-shape { 10 | display : inline-flex; 11 | width : $step-shape-size; 12 | height : $step-shape-size; 13 | text-align: center; 14 | @include align-items(center); 15 | @include justify-content(center); 16 | 17 | .step-icon { 18 | 19 | span, 20 | svg { 21 | font-size: $icon-size; 22 | } 23 | } 24 | 25 | .step-number { 26 | position : absolute; 27 | font-weight : $font-weight-bold; 28 | top : -10px; 29 | width : 32px; 30 | height : 32px; 31 | border-width: $step-border-width; 32 | border-style: solid; 33 | line-height : 1.7; 34 | } 35 | 36 | &.bordered { 37 | border-width: $step-border-width; 38 | border-style: solid; 39 | 40 | .step-number { 41 | background-color: $white; 42 | top : -12px; 43 | } 44 | } 45 | 46 | &.rounded { 47 | .step-number { 48 | @include border-radius($border-radius); 49 | } 50 | } 51 | 52 | &.organic-radius { 53 | .step-number { 54 | border-radius: $organic-radius; 55 | } 56 | } 57 | } 58 | 59 | .icon-lg { 60 | font-size: $step-icon-size; 61 | } 62 | } 63 | 64 | // Icon (svg) organic-shapes fill colors 65 | @each $color, 66 | $value in $theme-colors { 67 | .layer-#{$color} { 68 | color: rgba($value, .15); 69 | } 70 | } -------------------------------------------------------------------------------- /src/scss/pixel/components/_timelines.scss: -------------------------------------------------------------------------------- 1 | .timeline-one { 2 | 3 | width: 100%; 4 | 5 | .timeline-item { 6 | position : relative; 7 | width : 50%; 8 | margin-left : 50%; 9 | padding-bottom: $timeline-spacer-x; 10 | padding-left : $timeline-spacer-x; 11 | text-align : left; 12 | 13 | @include media-breakpoint-down(sm) { 14 | width : 100%; 15 | margin-left: 0; 16 | } 17 | 18 | img { 19 | margin-bottom: $timeline-spacer-y; 20 | } 21 | 22 | &:before { 23 | content : ""; 24 | position : absolute; 25 | top : 0; 26 | left : 0; 27 | width : 16px; 28 | height : 16px; 29 | margin-top : 0.425rem; 30 | margin-left : -0.5rem; 31 | border : $timeline-border-width solid $timeline-border-color; 32 | border-radius: $timeline-circle-radius; 33 | } 34 | 35 | &:after { 36 | content : ""; 37 | position : absolute; 38 | top : 0; 39 | left : 0; 40 | bottom : -0.1875rem; 41 | width : $timeline-border-width; 42 | margin-top : 1.875rem; 43 | margin-left : -0.0625rem; 44 | background-color: $timeline-border-color; 45 | } 46 | 47 | &:nth-child(2n+1) { 48 | margin-left : 0; 49 | padding-right: $timeline-spacer-x; 50 | padding-left : 0; 51 | text-align : right; 52 | 53 | @include media-breakpoint-down(sm) { 54 | padding-right: 0; 55 | padding-left : $timeline-spacer-x; 56 | text-align : left; 57 | } 58 | 59 | &:before, 60 | &:after { 61 | right: 0; 62 | left : auto; 63 | 64 | @include media-breakpoint-down(sm) { 65 | right: auto; 66 | left : 0; 67 | } 68 | } 69 | 70 | &:before { 71 | margin-right: -0.5rem; 72 | } 73 | 74 | &:after { 75 | margin-right: -0.0625rem; 76 | } 77 | } 78 | } 79 | 80 | &.dark { 81 | .timeline-item { 82 | &:before { 83 | border: $timeline-border-width solid $timeline-border-color-dark; 84 | } 85 | 86 | &:after { 87 | background-color: $timeline-border-color-dark; 88 | } 89 | } 90 | } 91 | } -------------------------------------------------------------------------------- /src/scss/pixel/components/_tooltip.scss: -------------------------------------------------------------------------------- 1 | // Wrapper for the tooltip content 2 | .tooltip-inner { 3 | @include box-shadow($box-shadow); 4 | } 5 | 6 | .chartist-tooltip { 7 | position : absolute; 8 | display : inline-block; 9 | opacity : 0; 10 | min-width : 5em; 11 | padding : .5em; 12 | background : $dark; 13 | border-radius : 3px; 14 | color : $white; 15 | font-weight : 700; 16 | text-align : center; 17 | pointer-events: none; 18 | z-index : 1; 19 | transition : $transition-base; 20 | } 21 | 22 | .chartist-tooltip:before { 23 | content : ""; 24 | position : absolute; 25 | top : 100%; 26 | left : 50%; 27 | width : 0; 28 | height : 0; 29 | margin-left : -15px; 30 | border : 15px solid transparent; 31 | border-top-color: $dark; 32 | } 33 | 34 | .chartist-tooltip.tooltip-show { 35 | opacity: 1; 36 | } 37 | 38 | .ct-area, 39 | .ct-line { 40 | pointer-events: none; 41 | } -------------------------------------------------------------------------------- /src/scss/pixel/components/_type.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * = Typography 3 | */ 4 | 5 | h1, 6 | h2, 7 | h3, 8 | h4, 9 | h5, 10 | h6, 11 | .h1, 12 | .h2, 13 | .h3, 14 | .h4, 15 | .h5, 16 | .h6 { 17 | font-weight: $headings-font-weight; 18 | } 19 | 20 | p, 21 | ol li, 22 | ul li { 23 | font-family: $font-family-base; 24 | font-size : $paragraph-font-size; 25 | font-weight: $paragraph-font-weight; 26 | line-height: $paragraph-line-height; 27 | } 28 | 29 | a, 30 | .text-action { 31 | color : $link-color; 32 | font-weight: $font-weight-normal; 33 | transition : $transition-base; 34 | 35 | &:hover { 36 | color : $link-hover-color; 37 | cursor: pointer; 38 | } 39 | } 40 | 41 | article { 42 | 43 | h1, 44 | h2, 45 | h3, 46 | h4, 47 | h5, 48 | h6 { 49 | margin: 2.5rem 0 2rem 0; 50 | } 51 | 52 | p, 53 | blockquote { 54 | font-size : 1.27rem; 55 | margin-bottom: 2rem; 56 | } 57 | 58 | ul li, 59 | ol li { 60 | font-size : 1.27rem; 61 | margin-bottom: 1.5rem; 62 | } 63 | 64 | ul, 65 | ol { 66 | margin-bottom: 2.5rem; 67 | } 68 | 69 | a { 70 | color : $tertiary; 71 | text-decoration: underline; 72 | 73 | &:hover { 74 | color : $tertiary; 75 | text-decoration: none; 76 | } 77 | } 78 | 79 | } 80 | 81 | blockquote { 82 | font-size : 1.27rem; 83 | background : #f5f9fc; 84 | border-radius: 10px; 85 | padding : 25px; 86 | font-style : italic; 87 | } 88 | 89 | .lead { 90 | +.btn-wrapper { 91 | margin-top: 3rem; 92 | } 93 | 94 | @include media-breakpoint-down(md) { 95 | font-size: $font-size-base; 96 | } 97 | } 98 | 99 | .text-italic { 100 | font-style: italic !important; 101 | } 102 | 103 | .description { 104 | font-size: $font-size-sm; 105 | } 106 | 107 | // Section titles 108 | 109 | .display-1, 110 | .display-2, 111 | .display-3, 112 | .display-4 { 113 | font-weight: $display-font-weight; 114 | color : $headings-color; 115 | } 116 | 117 | @include media-breakpoint-down(md) { 118 | .display-2 { 119 | font-size: $display3-size; 120 | } 121 | } 122 | 123 | @include media-breakpoint-down(lg) { 124 | .display-3 { 125 | font-size: $display4-size; 126 | 127 | } 128 | } 129 | 130 | @include media-breakpoint-down(sm) { 131 | .display-4 { 132 | font-size: $h4-font-size; 133 | } 134 | } 135 | 136 | // Blockquotes 137 | .blockquote { 138 | font-family: 'Sanchez', serif; 139 | font-style : italic; 140 | font-weight: 400; 141 | 142 | .blockquote-footer { 143 | font-size : $font-size-lg; 144 | font-weight: $font-weight-bolder; 145 | } 146 | } 147 | 148 | // Font Sizes 149 | 150 | .font-small { 151 | @include font-size($font-size-sm); 152 | font-weight: $font-weight-light; 153 | } 154 | 155 | .font-base { 156 | @include font-size($font-size-base); 157 | font-weight: $font-weight-light; 158 | } 159 | 160 | .font-medium { 161 | @include font-size($font-size-lg); 162 | font-weight: $font-weight-light; 163 | } 164 | 165 | // Set color of theme buttons 166 | @each $color, 167 | $value in $theme-colors { 168 | .text-#{$color} { 169 | 170 | &, 171 | &:hover { 172 | color: $value !important; 173 | } 174 | 175 | a:not(.btn), 176 | h1, 177 | h2, 178 | h3, 179 | h4, 180 | h5, 181 | h6, 182 | .h1, 183 | .h2, 184 | .h3, 185 | .h4, 186 | .h5, 187 | .h6, 188 | .display-1, 189 | .display-2, 190 | .display-3, 191 | .display-4 { 192 | color: $value; 193 | } 194 | 195 | .text-muted { 196 | color: rgba($value, .7) !important; 197 | } 198 | } 199 | } 200 | 201 | // Set color of social icons 202 | @each $color, 203 | $value in $brand-colors { 204 | .text-#{$color} { 205 | color: $value; 206 | } 207 | } 208 | 209 | .folder-structure li { 210 | font-size: 1.2rem; 211 | } -------------------------------------------------------------------------------- /src/scss/pixel/layout/_footer.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * = Footers 3 | */ 4 | 5 | .footer { 6 | position: relative; 7 | 8 | h3, 9 | h5, 10 | .h3, 11 | .h5 { 12 | font-size : 1.15rem; 13 | margin-bottom: 1.25rem; 14 | } 15 | 16 | ul { 17 | margin-bottom: 0; 18 | padding : 0; 19 | list-style : none; 20 | 21 | li { 22 | display: inline-block; 23 | 24 | a { 25 | text-decoration: none; 26 | position : relative; 27 | display : block; 28 | } 29 | 30 | .btn { 31 | margin: 0; 32 | } 33 | } 34 | 35 | &.links-horizontal { 36 | &:first-child a { 37 | padding-left: 0; 38 | } 39 | 40 | &:last-child a { 41 | padding-right: 0; 42 | } 43 | 44 | } 45 | 46 | &.footer-links { 47 | li { 48 | display : block; 49 | margin-left : -5px; 50 | margin-right: -5px; 51 | 52 | a { 53 | padding: 5px; 54 | 55 | &:hover { 56 | color: inherit !important; 57 | } 58 | } 59 | } 60 | } 61 | 62 | &.icon-box { 63 | span { 64 | line-height: 1.7 65 | } 66 | } 67 | } 68 | 69 | .social-buttons { 70 | 71 | a, 72 | .btn { 73 | margin-top : 5px; 74 | margin-bottom: 5px; 75 | } 76 | } 77 | 78 | .footer-brand { 79 | font-size : $font-size-lg; 80 | font-weight: $font-weight-bold; 81 | 82 | img, 83 | svg { 84 | width: 30px; 85 | } 86 | 87 | &:hover, 88 | &:focus { 89 | color: $black; 90 | } 91 | 92 | &.brand-sm { 93 | 94 | img, 95 | svg { 96 | width: 25px; 97 | } 98 | } 99 | } 100 | 101 | .copyright { 102 | font-size: $font-size-sm; 103 | } 104 | 105 | .pull-center { 106 | display: inline-block; 107 | float : none; 108 | } 109 | } 110 | 111 | .footer-logo-text { 112 | font-size : 1.2rem; 113 | font-weight: 600 !important; 114 | } -------------------------------------------------------------------------------- /src/scss/pixel/layout/_headroom.scss: -------------------------------------------------------------------------------- 1 | .headroom { 2 | will-change : transform; 3 | background-color: inherit; 4 | @include transition($transition-base); 5 | } 6 | 7 | .headroom--pinned { 8 | @extend .position-fixed; 9 | transform: translateY(0%); 10 | } 11 | 12 | .headroom--unpinned { 13 | @extend .position-fixed; 14 | transform: translateY(-100%); 15 | } 16 | 17 | .headroom--not-top { 18 | padding-top : 1rem; 19 | padding-bottom: 1rem; 20 | 21 | @each $color, 22 | $value in $theme-colors { 23 | &.navbar-theme-#{$color} { 24 | background-color: $value; 25 | 26 | .navbar-brand-light { 27 | display: none; 28 | } 29 | 30 | .navbar-brand-dark { 31 | display: block; 32 | } 33 | 34 | .nav-link { 35 | color: $navbar-dark-color; 36 | 37 | &:hover { 38 | color: $navbar-dark-hover-color; 39 | } 40 | } 41 | } 42 | } 43 | 44 | &.navbar-light { 45 | 46 | .navbar-nav>.nav-item.show>.nav-link, 47 | .navbar-nav>.nav-item>.nav-link:focus, 48 | .nav-item .nav-link>span { 49 | color: $white; 50 | } 51 | 52 | .navbar-toggler-icon { 53 | background-image: $navbar-dark-toggler-icon-bg; 54 | } 55 | } 56 | } -------------------------------------------------------------------------------- /src/scss/pixel/layout/_section.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * = Sections 3 | */ 4 | 5 | .section { 6 | position : relative; 7 | padding-top : $spacer * 3; 8 | padding-bottom: $spacer * 3; 9 | } 10 | 11 | .section-header { 12 | position : relative; 13 | padding-top : $spacer * 7; 14 | padding-bottom: $spacer * 3; 15 | } 16 | 17 | @include media-breakpoint-up(sm) { 18 | .section { 19 | position : relative; 20 | padding-top : $spacer * 6; 21 | padding-bottom: $spacer * 6; 22 | } 23 | 24 | .section-header { 25 | position : relative; 26 | padding-top : $spacer * 10; 27 | padding-bottom: $spacer * 10; 28 | 29 | &.section-sm { 30 | padding-top : $spacer * 4; 31 | padding-bottom: $spacer * 3; 32 | } 33 | } 34 | 35 | .section-xl { 36 | padding-top : $spacer * 10; 37 | padding-bottom: $spacer * 10; 38 | } 39 | 40 | .section-lg { 41 | padding-top : $spacer * 8; 42 | padding-bottom: $spacer * 8; 43 | } 44 | 45 | .section-sm { 46 | padding-top : $spacer * 4; 47 | padding-bottom: $spacer * 4; 48 | } 49 | } 50 | 51 | // Hero sections 52 | .section-hero { 53 | @include media-breakpoint-up(md) { 54 | height: 100vh; 55 | } 56 | } 57 | 58 | // Pages section 59 | .card-box { 60 | @include perspective(900px); 61 | width : 250px; 62 | position: relative; 63 | 64 | .card-component { 65 | @include transform-style(preserve-3d); 66 | position: relative; 67 | height : 300px; 68 | 69 | @include media-breakpoint-up(lg) { 70 | height: 450px; 71 | } 72 | 73 | &.card-component-lg { 74 | height: auto; 75 | 76 | @include media-breakpoint-up(xs) { 77 | max-height: 800px; 78 | } 79 | 80 | @include media-breakpoint-up(md) { 81 | max-height: 410px; 82 | } 83 | } 84 | 85 | &.card-component-xs { 86 | height : auto; 87 | max-height: 230px; 88 | } 89 | 90 | .front { 91 | position: absolute; 92 | top : 0; 93 | left : 0; 94 | width : 100%; 95 | overflow: hidden; 96 | @include box-shadow($box-shadow-lg); 97 | @include border-radius($border-radius); 98 | @include backface-visibility(hidden); 99 | @include transform(rotateY(24deg)); 100 | 101 | &:hover { 102 | cursor: pointer; 103 | } 104 | } 105 | } 106 | 107 | .page-card { 108 | @include box-shadow($box-shadow-lg); 109 | @include border-radius($border-radius); 110 | 111 | &:hover { 112 | cursor: pointer; 113 | } 114 | } 115 | 116 | @include media-breakpoint-down(md) { 117 | width: 200px; 118 | } 119 | 120 | @include media-breakpoint-up(lg) { 121 | width: 260px; 122 | } 123 | } 124 | -------------------------------------------------------------------------------- /src/scss/pixel/mixins/_animations.scss: -------------------------------------------------------------------------------- 1 | @mixin perspective($value) { 2 | -webkit-perspective: $value; 3 | -moz-perspective : $value; 4 | -o-perspective : $value; 5 | -ms-perspective : $value; 6 | perspective : $value; 7 | } 8 | 9 | @mixin transitions($time, $type) { 10 | -webkit-transition: all $time $type; 11 | -moz-transition : all $time $type; 12 | -o-transition : all $time $type; 13 | -ms-transition : all $time $type; 14 | transition : all $time $type; 15 | } 16 | 17 | @mixin transitions-property($property, $time, $type) { 18 | -webkit-transition: $property $time $type; 19 | -moz-transition : $property $time $type; 20 | -o-transition : $property $time $type; 21 | -ms-transition : $property $time $type; 22 | transition : $property $time $type; 23 | } 24 | 25 | @mixin transform-style($type) { 26 | -webkit-transform-style: $type; 27 | -moz-transform-style : $type; 28 | -o-transform-style : $type; 29 | -ms-transform-style : $type; 30 | transform-style : $type; 31 | } 32 | 33 | @mixin backface-visibility($type) { 34 | -webkit-backface-visibility: $type; 35 | -moz-backface-visibility : $type; 36 | -o-backface-visibility : $type; 37 | -ms-backface-visibility : $type; 38 | backface-visibility : $type; 39 | } 40 | 41 | @mixin rotateY-180() { 42 | -webkit-transform: rotateY(180deg); 43 | -moz-transform : rotateY(180deg); 44 | -o-transform : rotateY(180deg); 45 | -ms-transform : rotateY(180deg); 46 | transform : rotateY(180deg); 47 | } -------------------------------------------------------------------------------- /src/scss/pixel/mixins/_background-variant.scss: -------------------------------------------------------------------------------- 1 | // Contextual backgrounds 2 | @mixin bg-variant($parent, $color) { 3 | #{$parent} { 4 | background-color: $color !important; 5 | } 6 | 7 | a#{$parent}, 8 | button#{$parent} { 9 | @include hover-focus { 10 | background-color: darken($color, 10%) !important; 11 | } 12 | } 13 | } 14 | 15 | @mixin bg-gradient-variant($parent, $color) { 16 | #{$parent} { 17 | background: linear-gradient(87deg, $color 0, saturate($color, 10%) 100%) !important; 18 | } 19 | } 20 | 21 | @mixin background-image($background-repeat, $background-size) { 22 | background-repeat : $background-repeat; 23 | background-position: top center; 24 | background-size : $background-size; 25 | } -------------------------------------------------------------------------------- /src/scss/pixel/mixins/_icon.scss: -------------------------------------------------------------------------------- 1 | @mixin icon-shape-variant($color) { 2 | color: $color; 3 | background-color: rgba( $color, .1 ); 4 | } 5 | 6 | @mixin icon-parallax-background($background-position,$background-size,$background-attachment,$background-repeat) { 7 | background-position: $background-position; 8 | background-size: $background-size; 9 | background-attachment: $background-attachment; 10 | background-repeat: $background-repeat; 11 | } 12 | 13 | @mixin icon-image-background($background-position,$background-size,$background-repeat) { 14 | background-position: $background-position; 15 | background-size: $background-size; 16 | background-repeat: $background-repeat; 17 | } -------------------------------------------------------------------------------- /src/scss/pixel/mixins/_modals.scss: -------------------------------------------------------------------------------- 1 | @mixin modal-variant($background) { 2 | .modal-title { 3 | color: color-yiq($background); 4 | } 5 | .modal-header, 6 | .modal-footer { 7 | border-color: rgba($background, .075); 8 | } 9 | .modal-content { 10 | background-color: $background; 11 | color: color-yiq($background); 12 | 13 | .heading { 14 | color: color-yiq($background); 15 | } 16 | } 17 | 18 | .close { 19 | &>span:not(.sr-only) { 20 | color: $white; 21 | } 22 | } 23 | } -------------------------------------------------------------------------------- /src/scss/pixel/mixins/_popover.scss: -------------------------------------------------------------------------------- 1 | @mixin popover-variant($background) { 2 | 3 | background-color: $background; 4 | 5 | .popover-header { 6 | background-color: $background; 7 | color: color-yiq($background); 8 | } 9 | 10 | .popover-body { 11 | color: color-yiq($background); 12 | } 13 | .popover-header{ 14 | border-color: rgba($background, .2); 15 | } 16 | &.bs-popover-top { 17 | .arrow::after { 18 | border-top-color: $background; 19 | } 20 | } 21 | &.bs-popover-right { 22 | .arrow::after { 23 | border-right-color: $background; 24 | } 25 | } 26 | &.bs-popover-bottom { 27 | .arrow::after { 28 | border-bottom-color: $background; 29 | } 30 | } 31 | &.bs-popover-left { 32 | .arrow::after { 33 | border-left-color: $background; 34 | } 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/scss/pixel/mixins/_transform.scss: -------------------------------------------------------------------------------- 1 | 2 | @mixin transform($transforms) { 3 | -moz-transform: $transforms; 4 | -o-transform: $transforms; 5 | -ms-transform: $transforms; 6 | -webkit-transform: $transforms; 7 | transform: $transforms; 8 | } 9 | 10 | 11 | // translate 12 | @mixin translate ($x, $y) { 13 | @include transform(translate($x, $y)); 14 | } 15 | 16 | // rotate 17 | @mixin rotate ($deg) { 18 | @include transform(rotate(#{$deg}deg)); 19 | } -------------------------------------------------------------------------------- /src/scss/pixel/mixins/_utilities.scss: -------------------------------------------------------------------------------- 1 | @mixin filter($filter) { 2 | -webkit-filter: #{$filter}; 3 | -moz-filter: #{$filter}; 4 | -ms-filter: #{$filter}; 5 | -o-filter: #{$filter}; 6 | filter: #{$filter}; 7 | } 8 | 9 | @mixin backface-visibility($value) { 10 | -webkit-backface-visibility: $value; 11 | -moz-backface-visibility: $value; 12 | -o-backface-visibility: $value; 13 | backface-visibility: $value; 14 | } 15 | 16 | @mixin transform-style($value) { 17 | -webkit-transform-style: $value; 18 | -moz-transform-style: $value; 19 | -o-transform-style: $value; 20 | transform-style: $value; 21 | } 22 | 23 | @mixin perspective($value) { 24 | -webkit-perspective: $value; 25 | -moz-perspective: $value; 26 | -o-perspective: $value; 27 | perspective: $value; 28 | } 29 | 30 | @mixin display-flex() { 31 | display: -webkit-box; 32 | display: -moz-box; 33 | display: -ms-flexbox; 34 | display: -webkit-flex; 35 | display: flex; 36 | } 37 | 38 | @mixin flex($values) { 39 | -webkit-box-flex: $values; 40 | -moz-box-flex: $values; 41 | -webkit-flex: $values; 42 | -ms-flex: $values; 43 | flex: $values; 44 | } 45 | 46 | @mixin flex-direction($direction) { 47 | -webkit-flex-direction: $direction; 48 | -moz-flex-direction: $direction; 49 | -ms-flex-direction: $direction; 50 | flex-direction: $direction; 51 | } 52 | 53 | @mixin flex-wrap($wrap) { 54 | -webkit-flex-wrap: $wrap; 55 | -moz-flex-wrap: $wrap; 56 | -ms-flex-wrap: $wrap; 57 | flex-wrap: $wrap; 58 | } 59 | 60 | @mixin flex-flow($flow) { 61 | -webkit-flex-flow: $flow; 62 | -moz-flex-flow: $flow; 63 | -ms-flex-flow: $flow; 64 | flex-flow: $flow; 65 | } 66 | 67 | @mixin order($val) { 68 | -webkit-box-ordinal-group: $val; 69 | -moz-box-ordinal-group: $val; 70 | -ms-flex-order: $val; 71 | -webkit-order: $val; 72 | order: $val; 73 | } 74 | 75 | @mixin flex-grow($grow) { 76 | -webkit-flex-grow: $grow; 77 | -moz-flex-grow: $grow; 78 | -ms-flex-grow: $grow; 79 | flex-grow: $grow; 80 | } 81 | 82 | @mixin flex-shrink($shrink) { 83 | -webkit-flex-shrink: $shrink; 84 | -moz-flex-shrink: $shrink; 85 | -ms-flex-shrink: $shrink; 86 | flex-shrink: $shrink; 87 | } 88 | 89 | @mixin flex-basis($width) { 90 | -webkit-flex-basis: $width; 91 | -moz-flex-basis: $width; 92 | -ms-flex-basis: $width; 93 | flex-basis: $width; 94 | } 95 | 96 | @mixin justify-content($justify) { 97 | -webkit-justify-content: $justify; 98 | -moz-justify-content: $justify; 99 | -ms-justify-content: $justify; 100 | justify-content: $justify; 101 | -ms-flex-pack: $justify; 102 | } 103 | 104 | @mixin align-content($align) { 105 | -webkit-align-content: $align; 106 | -moz-align-content: $align; 107 | -ms-align-content: $align; 108 | align-content: $align; 109 | } 110 | 111 | @mixin align-items($align) { 112 | -webkit-align-items: $align; 113 | -moz-align-items: $align; 114 | -ms-align-items: $align; 115 | align-items: $align; 116 | } 117 | 118 | @mixin align-self($align) { 119 | -webkit-align-self: $align; 120 | -moz-align-self: $align; 121 | -ms-align-self: $align; 122 | align-self: $align; 123 | } -------------------------------------------------------------------------------- /src/scss/pixel/utilities/_animations.scss: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * = Animations 4 | */ 5 | 6 | @for $size from 1 to 10 { 7 | .animate-up-#{$size}, 8 | .animate-right-#{$size}, 9 | .animate-down-#{$size}, 10 | .animate-left-#{$size}, 11 | .scale-up-#{$size}, 12 | .scale-down-#{$size} { 13 | transition: $transition-base; 14 | } 15 | 16 | .scale-up-#{$size} { 17 | &:hover { 18 | transform: scale($size / 1.8); 19 | } 20 | } 21 | 22 | .scale-up-hover-#{$size} { 23 | &:hover { 24 | & .scale { 25 | transform: scale($size / 1.8); 26 | } 27 | } 28 | } 29 | 30 | .scale-down-#{$size} { 31 | &:hover { 32 | transform: scale($size / 2.5); 33 | } 34 | } 35 | 36 | .animate-up-#{$size} { 37 | &:hover, 38 | .animate-hover:hover & { 39 | @include translate(0, -#{$size}px); 40 | } 41 | } 42 | .animate-right-#{$size} { 43 | &:hover, 44 | .animate-hover:hover & { 45 | @include translate(#{$size}px, 0); 46 | } 47 | } 48 | .animate-down-#{$size} { 49 | &:hover, 50 | .animate-hover:hover & { 51 | @include translate(0, #{$size}px); 52 | } 53 | } 54 | .animate-left-#{$size} { 55 | &:hover, 56 | .animate-hover:hover & { 57 | @include translate(-#{$size}px, 0); 58 | } 59 | } 60 | } 61 | 62 | // Keyframes 63 | @keyframes show-navbar-collapse { 64 | 0% { 65 | opacity: 0; 66 | transform: scale(.95); 67 | transform-origin: 100% 0; 68 | } 69 | 70 | 100% { 71 | opacity: 1; 72 | transform: scale(1); 73 | } 74 | } 75 | 76 | @keyframes hide-navbar-collapse { 77 | from { 78 | opacity: 1; 79 | transform: scale(1); 80 | transform-origin: 100% 0; 81 | } 82 | 83 | to { 84 | opacity: 0; 85 | transform: scale(.95); 86 | } 87 | } 88 | 89 | @keyframes show-navbar-dropdown { 90 | 0% { 91 | opacity: 0; 92 | transform: translate(0, 10px) perspective(200px) rotateX(-2deg); 93 | transition: visibility 0.45s, opacity 0.45s, transform 0.45s; 94 | } 95 | 96 | 100% { 97 | transform: translate(0, 0); 98 | opacity: 1; 99 | } 100 | } 101 | 102 | @keyframes hide-navbar-dropdown { 103 | from { 104 | opacity: 1; 105 | } 106 | 107 | to { 108 | opacity: 0; 109 | transform: translate(0, 10px); 110 | } 111 | } 112 | 113 | @keyframes show-dropdown { 114 | 0% { 115 | opacity: 0; 116 | transform-origin: perspective(200px) rotateX(-2deg); 117 | transition: visibility 0.45s, opacity .5s; 118 | } 119 | 120 | 100% { 121 | opacity: 1; 122 | } 123 | } 124 | 125 | 126 | @keyframes hide-dropdown { 127 | from { 128 | opacity: 1; 129 | } 130 | 131 | to { 132 | opacity: 0; 133 | transform: translate(0, 10px); 134 | } 135 | } 136 | -------------------------------------------------------------------------------- /src/scss/pixel/utilities/_backgrounds.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * = Backgrounds 3 | */ 4 | 5 | @each $color, $value in $theme-colors { 6 | @include bg-gradient-variant(".bg-gradient-#{$color}", $value); 7 | } 8 | 9 | // Backgrounds Overlay 10 | @each $color, $value in $theme-colors { 11 | .overlay-#{$color}{ 12 | &:before{ 13 | position: absolute; 14 | content:""; 15 | background: $value; 16 | width: 100%; 17 | height: 100%; 18 | top: 0; 19 | left: 0; 20 | opacity: 0.8; 21 | z-index: 0; 22 | } 23 | } 24 | } 25 | 26 | .section-image { 27 | @include background-image(no-repeat, cover); 28 | } 29 | -------------------------------------------------------------------------------- /src/scss/pixel/utilities/_floating.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * = Floating animations 3 | */ 4 | 5 | @each $breakpoint in map-keys($grid-breakpoints) { 6 | @include media-breakpoint-up($breakpoint) { 7 | .floating-#{$breakpoint} { 8 | animation: floating-#{$breakpoint} 3s ease infinite; 9 | will-change: transform; 10 | 11 | &:hover { 12 | animation-play-state: paused; 13 | } 14 | } 15 | } 16 | } 17 | 18 | // Keyframes 19 | @keyframes floating-lg { 20 | 0% { 21 | transform: translateY(0px) 22 | } 23 | 50% { 24 | transform: translateY(15px) 25 | } 26 | 100% { 27 | transform: translateY(0px) 28 | } 29 | } 30 | 31 | @keyframes floating-md { 32 | 0% { 33 | transform: translateY(0px) 34 | } 35 | 50% { 36 | transform: translateY(10px) 37 | } 38 | 100% { 39 | transform: translateY(0px) 40 | } 41 | } 42 | 43 | @keyframes floating-sm { 44 | 0% { 45 | transform: translateY(0px) 46 | } 47 | 50% { 48 | transform: translateY(5px) 49 | } 50 | 100% { 51 | transform: translateY(0px) 52 | } 53 | } -------------------------------------------------------------------------------- /src/scss/pixel/utilities/_helper.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * = Helper classes 3 | */ 4 | 5 | // Overflows 6 | .overflow-visible { 7 | overflow: visible !important; 8 | } 9 | 10 | // Opacity classes 11 | @for $nr from 0 to 10 { 12 | .opacity-#{$nr} { 13 | opacity: #{$nr/10} !important; 14 | } 15 | } 16 | 17 | // Fill opacity classes 18 | @for $nr from 0 to 10 { 19 | .fill-opacity-#{$nr} { 20 | fill-opacity: #{$nr/10} !important; 21 | } 22 | } 23 | 24 | // Z indexes 25 | @for $nr from 0 to 10 { 26 | .z-#{$nr} { 27 | position: relative; 28 | z-index: #{$nr} !important; 29 | } 30 | } 31 | 32 | // Border widths 33 | .bw-md { 34 | border-width: $border-width-md !important; 35 | } 36 | .bw-lg { 37 | border-width: $border-width-lg !important; 38 | } 39 | .bw-xl { 40 | border-width: $border-width-xl !important; 41 | } 42 | 43 | .border-top-left-radius-0 { 44 | border-top-left-radius: 0 !important; 45 | } 46 | 47 | .border-top-right-radius-0 { 48 | border-top-right-radius: 0 !important; 49 | } 50 | 51 | .border-bottom-left-radius-0 { 52 | border-bottom-left-radius: 0 !important; 53 | } 54 | 55 | .border-bottom-right-radius-0 { 56 | border-bottom-right-radius: 0 !important; 57 | } 58 | 59 | .rounded-xl { 60 | border-radius: $border-radius-xl !important; 61 | } 62 | -------------------------------------------------------------------------------- /src/scss/pixel/utilities/_position.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * = Spacing 3 | */ 4 | 5 | @each $size, $value in $spacers { 6 | .top-#{$size} { 7 | top: $value; 8 | } 9 | .right-#{$size} { 10 | right: $value; 11 | } 12 | .bottom-#{$size} { 13 | bottom: $value; 14 | } 15 | .left-#{$size} { 16 | left: $value; 17 | } 18 | } 19 | 20 | .center-vertical-absolute, 21 | .center-horizontal-absolute { 22 | position: absolute; 23 | } 24 | 25 | .center-vertical-absolute { 26 | top: 50%; 27 | transform: translateY(-50%); 28 | } 29 | 30 | .center-horizontal-absolute { 31 | left: 50%; 32 | transform: translateX(-50%); 33 | } 34 | -------------------------------------------------------------------------------- /src/scss/pixel/utilities/_shadows.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * = Shadows 3 | */ 4 | 5 | [class*="shadow"] { 6 | @if $enable-transitions { 7 | transition: $transition-base; 8 | } 9 | } 10 | 11 | // stylelint-disable declaration-no-important 12 | .shadow-soft { box-shadow: $box-shadow-sm !important; } 13 | 14 | .shadow-hover:hover { box-shadow: $box-shadow !important; } 15 | .shadow-sm-hover:hover { box-shadow: $box-shadow-sm !important; } 16 | .shadow-lg-hover:hover { box-shadow: $box-shadow-lg !important; } 17 | .shadow-none-hover:hover { box-shadow: none !important; } 18 | -------------------------------------------------------------------------------- /src/scss/pixel/utilities/_sizing.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * = Sizing 3 | */ 4 | 5 | // Height values in vh 6 | .h-100vh { 7 | height: 100vh !important; 8 | } 9 | 10 | @for $nr from 1 to 40 { 11 | .fh-#{$nr*50} { 12 | height: #{$nr*50}px !important; 13 | } 14 | } 15 | 16 | @for $nr from 1 to 40 { 17 | .fw-#{$nr*50} { 18 | width: #{$nr*50}px !important; 19 | } 20 | } 21 | 22 | @for $nr from 1 to 40 { 23 | .fmh-#{$nr*50} { 24 | min-height: #{$nr*50}px !important; 25 | } 26 | } 27 | 28 | @for $nr from 1 to 40 { 29 | .fmw-#{$nr*50} { 30 | min-width: #{$nr*50}px !important; 31 | } 32 | } 33 | 34 | @for $nr from 1 to 40 { 35 | .fmxh-#{$nr*50} { 36 | max-height: #{$nr*50}px !important; 37 | } 38 | } 39 | 40 | @for $nr from 1 to 40 { 41 | .fmxw-#{$nr*50} { 42 | max-width: #{$nr*50}px !important; 43 | } 44 | } 45 | 46 | -------------------------------------------------------------------------------- /src/scss/pixel/utilities/_spacing.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * = Spacing grids 3 | */ 4 | 5 | // .row.row-grid > [class*="col-"] + [class*="col-"] { 6 | // margin-top: 3rem; 7 | // } 8 | 9 | // @each $breakpoint in map-keys($grid-breakpoints) { 10 | // @include media-breakpoint-up($breakpoint) { 11 | // .row.row-grid > [class*="col-#{$breakpoint}-"] + [class*="col-#{$breakpoint}-"] { 12 | // margin-top: 0; 13 | // } 14 | // } 15 | // } 16 | 17 | // .row-grid + .row-grid { 18 | // margin-top: 3rem; 19 | // } 20 | -------------------------------------------------------------------------------- /src/scss/pixel/utilities/_text.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * = Text utility classes 3 | */ 4 | 5 | .text-underline { text-decoration: underline !important; } 6 | .text-through { text-decoration: line-through !important; } 7 | 8 | // Display responsive styles 9 | @each $breakpoint in map-keys($grid-breakpoints) { 10 | @include media-breakpoint-up($breakpoint) { 11 | .display-1-#{$breakpoint} { font-size: $display1-size; } 12 | .display-2-#{$breakpoint} { font-size: $display2-size; } 13 | .display-3-#{$breakpoint} { font-size: $display3-size; } 14 | .display-4-#{$breakpoint} { font-size: $display4-size; } 15 | } 16 | } 17 | 18 | // Line heights 19 | // from lh-100 to lh-300 20 | @for $nr from 0 to 21 { 21 | .lh-#{100 + $nr*10} { 22 | line-height: #{1 + $nr/10}; 23 | } 24 | } 25 | 26 | // Letter spacings 27 | .ls-1 { letter-spacing: .0625rem; } 28 | .ls-2 { letter-spacing: .09375rem; } 29 | .ls-3 { letter-spacing: 0.125rem; } 30 | 31 | // Responsive alignment 32 | @each $breakpoint in map-keys($grid-breakpoints) { 33 | @include media-breakpoint-up($breakpoint) { 34 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints); 35 | 36 | .text#{$infix}-left { text-align: left !important; } 37 | .text#{$infix}-right { text-align: right !important; } 38 | .text#{$infix}-center { text-align: center !important; } 39 | } 40 | } 41 | 42 | // Transformation 43 | .text-body { color: $body-color !important; } 44 | 45 | .text-black-50 { color: rgba($black, .5) !important; } 46 | .text-white-50 { color: rgba($white, .5) !important; } 47 | 48 | .list-style-none { 49 | margin: 0px; 50 | padding: 0px; 51 | list-style: none; 52 | } 53 | -------------------------------------------------------------------------------- /src/scss/pixel/utilities/_transform.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * = Transform 3 | */ 4 | 5 | @include media-breakpoint-up(lg) { 6 | .transform-perspective-right { 7 | transform: scale(1) perspective(1040px) rotateY(-11deg) rotateX(2deg) rotate(2deg); 8 | } 9 | .transform-perspective-left{ 10 | transform: scale(1) perspective(900px) rotateY(27deg) rotateX(2deg) rotate(-2deg); 11 | } 12 | } 13 | 14 | .t-none{ 15 | transform: none !important; 16 | } 17 | --------------------------------------------------------------------------------