├── .browserslistrc ├── .editorconfig ├── .eslintignore ├── .eslintrc.json ├── .gitattributes ├── .github ├── ISSUE_TEMPLATE │ ├── bug.yml │ ├── config.yml │ └── feature-request.yml └── workflows │ ├── handle-new-issue-comment.yml │ ├── handle-new-issue.yml │ └── issue-staler.yml ├── .gitignore ├── .npmrc ├── .prettierignore ├── .prettierrc.json ├── .stylelintignore ├── .stylelintrc.json ├── .vscode ├── extensions.json └── settings.json ├── CHANGELOG.md ├── LICENSE ├── LICENSE.md ├── README.md ├── assets ├── css │ └── demo.css ├── img │ ├── avatars │ │ ├── 1.png │ │ ├── 2.png │ │ ├── 3.png │ │ └── 4.png │ ├── backgrounds │ │ └── 1.jpg │ ├── elements │ │ ├── 1.png │ │ ├── 10.png │ │ ├── 11.png │ │ ├── 12.png │ │ ├── 13.png │ │ ├── 14.png │ │ ├── 15.png │ │ ├── 16.png │ │ ├── 17.png │ │ ├── 18.png │ │ ├── 19.png │ │ ├── 2.png │ │ ├── 3.png │ │ ├── 4.png │ │ ├── 5.png │ │ ├── 6.png │ │ ├── 7.png │ │ ├── 8.png │ │ └── 9.png │ ├── favicon │ │ └── favicon.ico │ ├── icons │ │ ├── brands │ │ │ ├── asana.png │ │ │ ├── behance.png │ │ │ ├── dribbble.png │ │ │ ├── facebook.png │ │ │ ├── github.png │ │ │ ├── google.png │ │ │ ├── instagram.png │ │ │ ├── mailchimp.png │ │ │ ├── slack.png │ │ │ └── twitter.png │ │ └── unicons │ │ │ ├── cc-primary.png │ │ │ ├── cc-warning.png │ │ │ ├── chart-success.png │ │ │ ├── chart.png │ │ │ ├── paypal.png │ │ │ ├── wallet-info.png │ │ │ └── wallet.png │ ├── illustrations │ │ ├── girl-doing-yoga-light.png │ │ ├── man-with-laptop.png │ │ └── page-misc-error-light.png │ └── layouts │ │ ├── layout-container-light.png │ │ ├── layout-fluid-light.png │ │ ├── layout-without-menu-light.png │ │ └── layout-without-navbar-light.png ├── js │ ├── config.js │ ├── dashboards-analytics.js │ ├── extended-ui-perfect-scrollbar.js │ ├── form-basic-inputs.js │ ├── main.js │ ├── pages-account-settings-account.js │ ├── ui-modals.js │ ├── ui-popover.js │ └── ui-toasts.js └── vendor │ ├── css │ ├── core.css │ └── pages │ │ ├── page-auth.css │ │ ├── page-icons.css │ │ └── page-misc.css │ ├── fonts │ └── iconify-icons.css │ ├── js │ ├── bootstrap.js │ ├── helpers.js │ └── menu.js │ └── libs │ ├── apex-charts │ ├── apex-charts.css │ └── apexcharts.js │ ├── highlight │ ├── highlight-github.css │ ├── highlight.css │ └── highlight.js │ ├── jquery │ └── jquery.js │ ├── masonry │ └── masonry.js │ ├── perfect-scrollbar │ ├── perfect-scrollbar.css │ └── perfect-scrollbar.js │ └── popper │ └── popper.js ├── build-config.js ├── documentation.html ├── fonts └── iconify │ └── iconify.js ├── gulpfile.js ├── hire-us.html ├── html ├── auth-forgot-password-basic.html ├── auth-login-basic.html ├── auth-register-basic.html ├── cards-basic.html ├── extended-ui-perfect-scrollbar.html ├── extended-ui-text-divider.html ├── form-layouts-horizontal.html ├── form-layouts-vertical.html ├── forms-basic-inputs.html ├── forms-input-groups.html ├── icons-boxicons.html ├── index.html ├── layouts-blank.html ├── layouts-container.html ├── layouts-fluid.html ├── layouts-without-menu.html ├── layouts-without-navbar.html ├── pages-account-settings-account.html ├── pages-account-settings-connections.html ├── pages-account-settings-notifications.html ├── pages-misc-error.html ├── pages-misc-under-maintenance.html ├── tables-basic.html ├── ui-accordion.html ├── ui-alerts.html ├── ui-badges.html ├── ui-buttons.html ├── ui-carousel.html ├── ui-collapse.html ├── ui-dropdowns.html ├── ui-footer.html ├── ui-list-groups.html ├── ui-modals.html ├── ui-navbar.html ├── ui-offcanvas.html ├── ui-pagination-breadcrumbs.html ├── ui-progress.html ├── ui-spinners.html ├── ui-tabs-pills.html ├── ui-toasts.html ├── ui-tooltips-popovers.html └── ui-typography.html ├── index.html ├── js ├── bootstrap.js ├── helpers.js └── menu.js ├── libs ├── apex-charts │ ├── apex-charts.scss │ └── apexcharts.js ├── highlight │ ├── highlight-github.scss │ ├── highlight.js │ └── highlight.scss ├── jquery │ └── jquery.js ├── masonry │ └── masonry.js ├── perfect-scrollbar │ ├── perfect-scrollbar.js │ └── perfect-scrollbar.scss └── popper │ └── popper.js ├── package.json ├── scss ├── _bootstrap-extended.scss ├── _bootstrap-extended │ ├── _accordion.scss │ ├── _alert.scss │ ├── _badge.scss │ ├── _breadcrumb.scss │ ├── _button-group.scss │ ├── _buttons.scss │ ├── _card.scss │ ├── _carousel.scss │ ├── _dropdown.scss │ ├── _forms.scss │ ├── _functions.scss │ ├── _helpers.scss │ ├── _include.scss │ ├── _list-group.scss │ ├── _mixins.scss │ ├── _modal.scss │ ├── _nav.scss │ ├── _navbar.scss │ ├── _offcanvas.scss │ ├── _pagination.scss │ ├── _popover.scss │ ├── _progress.scss │ ├── _reboot.scss │ ├── _root.scss │ ├── _spinners.scss │ ├── _tables.scss │ ├── _toasts.scss │ ├── _tooltip.scss │ ├── _type.scss │ ├── _utilities.scss │ ├── _variables.scss │ ├── forms │ │ ├── _floating-labels.scss │ │ ├── _form-check.scss │ │ ├── _form-control.scss │ │ ├── _form-range.scss │ │ ├── _form-select.scss │ │ ├── _input-group.scss │ │ └── _labels.scss │ ├── helpers │ │ └── _color-bg.scss │ └── mixins │ │ ├── _border-radius.scss │ │ ├── _caret.scss │ │ └── _misc.scss ├── _bootstrap.scss ├── _colors.scss ├── _components.scss ├── _components │ ├── _app-brand.scss │ ├── _avatar.scss │ ├── _base.scss │ ├── _common.scss │ ├── _footer.scss │ ├── _include.scss │ ├── _layout.scss │ ├── _menu.scss │ ├── _root.scss │ ├── _text-divider.scss │ └── _variables.scss ├── _custom-styles.scss ├── _custom-variables │ ├── _bootstrap-extended.scss │ └── _components.scss ├── core.scss └── pages │ ├── page-auth.scss │ ├── page-icons.scss │ └── page-misc.scss ├── tasks ├── build.js └── prod.js ├── webpack.config.js └── yarn.lock /.browserslistrc: -------------------------------------------------------------------------------- 1 | >= 0.5% 2 | last 4 major versions -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | end_of_line = lf 9 | insert_final_newline = true 10 | trim_trailing_whitespace = true 11 | 12 | [*.md] 13 | max_line_length = off 14 | trim_trailing_whitespace = false 15 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | **/*.* 2 | !js/**/*.js -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "commonjs": true, 5 | "es6": true, 6 | "jquery": true 7 | }, 8 | "plugins": ["prettier"], 9 | "extends": ["airbnb-base", "plugin:prettier/recommended"], 10 | "rules": { 11 | "prettier/prettier": "error", 12 | "no-underscore-dangle": "off", 13 | "semi": ["error", "never"], 14 | "arrow-parens": ["error", "as-needed"], 15 | "no-param-reassign": "off", 16 | "no-plusplus": [ 17 | "error", 18 | { 19 | "allowForLoopAfterthoughts": true 20 | } 21 | ], 22 | "no-cond-assign": ["error", "except-parens"] 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | * text eol=lf 2 | 3 | ## GITATTRIBUTES FOR WEB PROJECTS 4 | # 5 | # These settings are for any web project. 6 | # 7 | # Details per file setting: 8 | # text These files should be normalized (i.e. convert CRLF to LF). 9 | # binary These files are binary and should be left untouched. 10 | # 11 | # Note that binary is a macro for -text -diff. 12 | ###################################################################### 13 | 14 | # Auto detect 15 | ## Handle line endings automatically for files detected as 16 | ## text and leave all files detected as binary untouched. 17 | ## This will handle all files NOT defined below. 18 | * text=auto 19 | 20 | # Source code 21 | *.bash text eol=lf 22 | *.bat text eol=crlf 23 | *.cmd text eol=crlf 24 | *.coffee text 25 | *.css text diff=css 26 | *.htm text diff=html 27 | *.html text diff=html 28 | *.inc text 29 | *.ini text 30 | *.js text 31 | *.json text 32 | *.jsx text 33 | *.less text 34 | *.ls text 35 | *.map text -diff 36 | *.od text 37 | *.onlydata text 38 | *.php text diff=php 39 | *.pl text 40 | *.ps1 text eol=crlf 41 | *.py text diff=python 42 | *.rb text diff=ruby 43 | *.sass text 44 | *.scm text 45 | *.scss text diff=css 46 | *.sh text eol=lf 47 | .husky/* text eol=lf 48 | *.sql text 49 | *.styl text 50 | *.tag text 51 | *.ts text 52 | *.tsx text 53 | *.xml text 54 | *.xhtml text diff=html 55 | 56 | # Docker 57 | Dockerfile text 58 | 59 | # Documentation 60 | *.ipynb text eol=lf 61 | *.markdown text diff=markdown 62 | *.md text diff=markdown 63 | *.mdwn text diff=markdown 64 | *.mdown text diff=markdown 65 | *.mkd text diff=markdown 66 | *.mkdn text diff=markdown 67 | *.mdtxt text 68 | *.mdtext text 69 | *.txt text 70 | AUTHORS text 71 | CHANGELOG text 72 | CHANGES text 73 | CONTRIBUTING text 74 | COPYING text 75 | copyright text 76 | *COPYRIGHT* text 77 | INSTALL text 78 | license text 79 | LICENSE text 80 | NEWS text 81 | readme text 82 | *README* text 83 | TODO text 84 | 85 | # Templates 86 | *.dot text 87 | *.ejs text 88 | *.erb text 89 | *.haml text 90 | *.handlebars text 91 | *.hbs text 92 | *.hbt text 93 | *.jade text 94 | *.latte text 95 | *.mustache text 96 | *.njk text 97 | *.phtml text 98 | *.svelte text 99 | *.tmpl text 100 | *.tpl text 101 | *.twig text 102 | *.vue text 103 | 104 | # Configs 105 | *.cnf text 106 | *.conf text 107 | *.config text 108 | .editorconfig text 109 | .env text 110 | .gitattributes text 111 | .gitconfig text 112 | .htaccess text 113 | *.lock text -diff 114 | package.json text eol=lf 115 | package-lock.json text eol=lf -diff 116 | pnpm-lock.yaml text eol=lf -diff 117 | .prettierrc text 118 | yarn.lock text -diff 119 | *.toml text 120 | *.yaml text 121 | *.yml text 122 | browserslist text 123 | Makefile text 124 | makefile text 125 | 126 | # Heroku 127 | Procfile text 128 | 129 | # Graphics 130 | *.ai binary 131 | *.bmp binary 132 | *.eps binary 133 | *.gif binary 134 | *.gifv binary 135 | *.ico binary 136 | *.jng binary 137 | *.jp2 binary 138 | *.jpg binary 139 | *.jpeg binary 140 | *.jpx binary 141 | *.jxr binary 142 | *.pdf binary 143 | *.png binary 144 | *.psb binary 145 | *.psd binary 146 | # SVG treated as an asset (binary) by default. 147 | # *.svg text 148 | # If you want to treat it as binary, 149 | # use the following line instead. 150 | *.svg binary 151 | *.svgz binary 152 | *.tif binary 153 | *.tiff binary 154 | *.wbmp binary 155 | *.webp binary 156 | 157 | # Audio 158 | *.kar binary 159 | *.m4a binary 160 | *.mid binary 161 | *.midi binary 162 | *.mp3 binary 163 | *.ogg binary 164 | *.ra binary 165 | 166 | # Video 167 | *.3gpp binary 168 | *.3gp binary 169 | *.as binary 170 | *.asf binary 171 | *.asx binary 172 | *.avi binary 173 | *.fla binary 174 | *.flv binary 175 | *.m4v binary 176 | *.mng binary 177 | *.mov binary 178 | *.mp4 binary 179 | *.mpeg binary 180 | *.mpg binary 181 | *.ogv binary 182 | *.swc binary 183 | *.swf binary 184 | *.webm binary 185 | 186 | # Archives 187 | *.7z binary 188 | *.gz binary 189 | *.jar binary 190 | *.rar binary 191 | *.tar binary 192 | *.zip binary 193 | 194 | # Fonts 195 | *.ttf binary 196 | *.eot binary 197 | *.otf binary 198 | *.woff binary 199 | *.woff2 binary 200 | 201 | # Executables 202 | *.exe binary 203 | *.pyc binary 204 | 205 | # RC files (like .babelrc or .eslintrc) 206 | *.*rc text 207 | 208 | # Ignore files (like .npmignore or .gitignore) 209 | *.*ignore text 210 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug.yml: -------------------------------------------------------------------------------- 1 | name: Bug 🐞 2 | description: Report a bug 3 | labels: [support, bug] 4 | body: 5 | - type: markdown 6 | attributes: 7 | value: | 8 | Thanks for taking the time to fill out this bug report! ☺️ 9 | - type: textarea 10 | attributes: 11 | label: Steps to reproduce 12 | validations: 13 | required: true 14 | - type: textarea 15 | attributes: 16 | label: What is expected? 17 | validations: 18 | required: true 19 | - type: textarea 20 | attributes: 21 | label: What is actually happening? 22 | validations: 23 | required: true 24 | - type: textarea 25 | attributes: 26 | label: Additional data 27 | value: | 28 | 34 | 35 | 38 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: false 2 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature-request.yml: -------------------------------------------------------------------------------- 1 | name: Feature request ✨ 2 | description: Suggest an idea or ask for a feature that you would like to have 3 | labels: [support, feature-req] 4 | body: 5 | - type: markdown 6 | attributes: 7 | value: | 8 | Thanks for letting us know how we can improve our product! ☺️ 9 | - type: textarea 10 | attributes: 11 | label: What problem does this feature solve? 12 | validations: 13 | required: true 14 | - type: textarea 15 | attributes: 16 | label: What does the proposed solution look like? 17 | validations: 18 | required: true 19 | -------------------------------------------------------------------------------- /.github/workflows/handle-new-issue-comment.yml: -------------------------------------------------------------------------------- 1 | name: '💬 Handle new issue comment' 2 | on: 3 | issue_comment: 4 | types: [created] 5 | 6 | jobs: 7 | handle_new_issue_comment: 8 | runs-on: ubuntu-latest 9 | name: Handle new issue comment 10 | steps: 11 | - name: Toggle awaiting-reply label 12 | uses: jd-solanki/gh-action-toggle-awaiting-reply-label@v2.1.2 13 | with: 14 | label: awaiting-reply 15 | only-if-label: support 16 | -------------------------------------------------------------------------------- /.github/workflows/handle-new-issue.yml: -------------------------------------------------------------------------------- 1 | name: 'Handle new issue' 2 | on: 3 | issues: 4 | types: [opened] 5 | 6 | jobs: 7 | handle_new_issue: 8 | runs-on: ubuntu-latest 9 | name: Handle new issue 10 | steps: 11 | - name: Find duplicates 12 | uses: wow-actions/potential-duplicates@v1.0.8 13 | with: 14 | GITHUB_TOKEN: ${{ github.token }} 15 | label: duplicate 16 | comment: > 17 | Potential duplicates: {{#issues}} 18 | - #{{ number }} _({{ accuracy }}% Match)_ 19 | {{/issues}} 20 | -------------------------------------------------------------------------------- /.github/workflows/issue-staler.yml: -------------------------------------------------------------------------------- 1 | name: '😶‍🌫️ Close stale issues and PRs' 2 | on: 3 | schedule: 4 | - cron: '30 1 * * *' 5 | 6 | jobs: 7 | stale: 8 | runs-on: ubuntu-latest 9 | steps: 10 | - uses: actions/stale@v4 11 | with: 12 | stale-issue-message: 'This issue has been automatically marked as stale because it has no recent activity. It will be closed if no further activity occurs. Thank you for raising the concern.' 13 | close-issue-message: 'This issue has been automatically marked as closed because it has no recent activity.' 14 | stale-issue-label: 'stale' 15 | only-labels: 'awaiting-reply' 16 | exempt-issue-labels: 'triage' 17 | days-before-stale: 7 18 | days-before-close: 7 19 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # System Files 2 | .DS_Store 3 | .AppleDouble 4 | .LSOverride 5 | 6 | # Thumbnails 7 | ._* 8 | Thumbs.db 9 | ehthumbs.db 10 | ehthumbs_vista.db 11 | 12 | # Dump file 13 | *.stackdump 14 | 15 | # Folder config file 16 | [Dd]esktop.ini 17 | 18 | # Windows shortcuts 19 | *.lnk 20 | 21 | # Logs 22 | logs 23 | *.log 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.log* 27 | 28 | # Dependency directories 29 | node_modules 30 | 31 | # Optional npm cache directory 32 | .npm 33 | 34 | # Optional eslint cache 35 | .eslintcache 36 | 37 | # Yarn Integrity file 38 | .yarn-integrity 39 | 40 | # Optional sass cache 41 | /.sass-cache 42 | gulpfile.tmp.* 43 | 44 | ################################################################################ 45 | ############################### DEVELOPMENT_ONLY ############################### 46 | 47 | # Excludes generated 48 | /dist 49 | /build 50 | /tmp 51 | /temp 52 | 53 | # Assets 54 | # **/assets/vendor 55 | # **/static/vendor 56 | 57 | # HTML files 58 | /html-demo 59 | /html-starter-demo 60 | 61 | # Package Lock files 62 | /package-lock.json 63 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | legacy-peer-deps = true -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | dist 2 | node_modules 3 | build 4 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "arrowParens": "avoid", 3 | "bracketSpacing": true, 4 | "bracketSameLine": true, 5 | "htmlWhitespaceSensitivity": "css", 6 | "insertPragma": false, 7 | "jsxSingleQuote": true, 8 | "printWidth": 120, 9 | "proseWrap": "preserve", 10 | "quoteProps": "as-needed", 11 | "requirePragma": false, 12 | "semi": true, 13 | "singleQuote": true, 14 | "tabWidth": 2, 15 | "trailingComma": "none", 16 | "useTabs": false, 17 | "endOfLine": "lf", 18 | "embeddedLanguageFormatting": "auto", 19 | "overrides": [ 20 | { 21 | "files": [ 22 | "js/**/*.js" 23 | ], 24 | "options": { 25 | "semi": false 26 | } 27 | } 28 | ] 29 | } -------------------------------------------------------------------------------- /.stylelintignore: -------------------------------------------------------------------------------- 1 | dist 2 | node_modules 3 | build 4 | _temp/ 5 | -------------------------------------------------------------------------------- /.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "stylelint-config-standard-scss", 4 | "stylelint-config-idiomatic-order", 5 | "@stylistic/stylelint-config" 6 | ], 7 | "plugins": [ 8 | "stylelint-use-logical-spec", 9 | "@stylistic/stylelint-plugin" 10 | ], 11 | "rules": { 12 | "alpha-value-notation": null, 13 | "at-rule-empty-line-before": null, 14 | "block-no-empty": null, 15 | "color-function-notation": null, 16 | "color-named": "never", 17 | "custom-property-empty-line-before": null, 18 | "custom-property-pattern": null, 19 | "declaration-block-no-redundant-longhand-properties": null, 20 | "declaration-empty-line-before": null, 21 | "declaration-no-important": null, 22 | "font-family-no-missing-generic-family-keyword": [ 23 | true, 24 | { 25 | "ignoreFontFamilies": [ 26 | "boxicons", 27 | "tabler-icons", 28 | "remix-icons" 29 | ] 30 | } 31 | ], 32 | "font-weight-notation": [ 33 | "numeric", 34 | { 35 | "ignore": [ 36 | "relative" 37 | ] 38 | } 39 | ], 40 | "function-url-no-scheme-relative": true, 41 | "liberty/use-logical-spec": true, 42 | "media-feature-range-notation": null, 43 | "media-query-no-invalid": null, 44 | "no-descending-specificity": null, 45 | "no-invalid-double-slash-comments": true, 46 | "no-invalid-position-at-import-rule": null, 47 | "number-max-precision": null, 48 | "rule-empty-line-before": null, 49 | "selector-class-pattern": null, 50 | "selector-id-pattern": null, 51 | "selector-max-attribute": 2, 52 | "selector-max-id": 1, 53 | "selector-max-specificity": null, 54 | "selector-not-notation": null, 55 | "scss/at-extend-no-missing-placeholder": null, 56 | "scss/at-function-named-arguments": "never", 57 | "scss/at-if-closing-brace-newline-after": null, 58 | "scss/at-if-closing-brace-space-after": null, 59 | "scss/at-if-no-null": null, 60 | "scss/at-mixin-pattern": null, 61 | "scss/at-mixin-argumentless-call-parentheses": "always", 62 | "scss/at-rule-conditional-no-parentheses": null, 63 | "scss/comment-no-empty": null, 64 | "scss/dimension-no-non-numeric-values": true, 65 | "scss/dollar-variable-empty-line-before": null, 66 | "scss/dollar-variable-pattern": null, 67 | "scss/double-slash-comment-empty-line-before": null, 68 | "scss/double-slash-comment-whitespace-inside": null, 69 | "scss/function-quote-no-quoted-strings-inside": null, 70 | "scss/media-feature-value-dollar-variable": null, 71 | "scss/no-global-function-names": null, 72 | "@stylistic/at-rule-name-space-after": "always", 73 | "@stylistic/at-rule-semicolon-space-before": "never", 74 | "@stylistic/block-closing-brace-empty-line-before": null, 75 | "@stylistic/block-closing-brace-newline-after": [ 76 | "always", 77 | { 78 | "ignoreAtRules": [ 79 | "if", 80 | "else" 81 | ] 82 | } 83 | ], 84 | "@stylistic/block-opening-brace-space-before": null, 85 | "@stylistic/declaration-block-semicolon-newline-before": "never-multi-line", 86 | "@stylistic/indentation": 2, 87 | "@stylistic/max-empty-lines": 2, 88 | "@stylistic/max-line-length": [ 89 | 220, 90 | { 91 | "ignore": "comments" 92 | } 93 | ], 94 | "@stylistic/no-eol-whitespace": true, 95 | "@stylistic/number-leading-zero": "never", 96 | "@stylistic/selector-list-comma-newline-before": "never-multi-line", 97 | "@stylistic/selector-list-comma-space-after": "always-single-line", 98 | "@stylistic/selector-list-comma-space-before": "never-single-line", 99 | "@stylistic/unicode-bom": "never" 100 | }, 101 | "overrides": [ 102 | { 103 | "files": [ 104 | "**/_bootstrap-extended/**/*.scss" 105 | ], 106 | "rules": { 107 | "declaration-property-value-disallowed-list": { 108 | "border": "none", 109 | "outline": "none" 110 | }, 111 | "function-disallowed-list": [ 112 | "lighten", 113 | "darken" 114 | ], 115 | "property-disallowed-list": [ 116 | "border-radius", 117 | "border-top-left-radius", 118 | "border-top-right-radius", 119 | "border-bottom-right-radius", 120 | "border-bottom-left-radius", 121 | "transition" 122 | ], 123 | "scss/dollar-variable-default": [ 124 | true, 125 | { 126 | "ignore": "local" 127 | } 128 | ], 129 | "scss/selector-no-union-class-name": true 130 | } 131 | } 132 | ] 133 | } -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "esbenp.prettier-vscode", 4 | "editorconfig.editorconfig", 5 | "dbaeumer.vscode-eslint", 6 | "formulahendry.auto-close-tag", 7 | "formulahendry.auto-rename-tag", 8 | "abusaidm.html-snippets", 9 | "syler.sass-indented", 10 | "mrmlnc.vscode-scss", 11 | "gamunu.vscode-yarn", 12 | "zignd.html-css-class-completion", 13 | "stylelint.vscode-stylelint", 14 | ] 15 | } -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.wordWrap": "off", 3 | "editor.formatOnSave": true, 4 | "editor.codeActionsOnSave": { 5 | "source.fixAll": "explicit" 6 | }, 7 | "files.trimFinalNewlines": true, 8 | "diffEditor.ignoreTrimWhitespace": true, 9 | "search.exclude": { 10 | "**/node_modules": true, 11 | "*.min.js": true, 12 | "*.min.css": true 13 | }, 14 | // JS 15 | "javascript.updateImportsOnFileMove.enabled": "always", 16 | // JSON 17 | "[json]": { 18 | "editor.defaultFormatter": "vscode.json-language-features" 19 | }, 20 | "[jsonc]": { 21 | "editor.defaultFormatter": "vscode.json-language-features" 22 | }, 23 | // Extension: Prettier 24 | "prettier.requireConfig": true, 25 | "prettier.configPath": ".prettierrc.json", 26 | "prettier.ignorePath": ".prettierignore", 27 | "[html]": { 28 | "editor.defaultFormatter": "esbenp.prettier-vscode" 29 | }, 30 | "[javascript]": { 31 | "editor.defaultFormatter": "esbenp.prettier-vscode" 32 | }, 33 | "[markdown]": { 34 | "editor.defaultFormatter": "esbenp.prettier-vscode" 35 | }, 36 | // Extension: Stylelint 37 | "stylelint.packageManager": "pnpm", 38 | "stylelint.validate": [ 39 | "scss" 40 | ], 41 | "[css]": { 42 | "editor.defaultFormatter": "esbenp.prettier-vscode" 43 | }, 44 | // Extension: Git 45 | "git.rebaseWhenSync": true, 46 | "git.enableSmartCommit": true, 47 | // Extension: ESLint 48 | "eslint.packageManager": "yarn", 49 | "eslint.format.enable": true, 50 | // "eslint.workingDirectories": [ 51 | // "src", 52 | // "dev" 53 | // ], 54 | "eslint.options": { 55 | "overrideConfigFile": ".eslintrc.json" 56 | }, 57 | "eslint.validate": [ 58 | "vue", 59 | "html", 60 | "javascript", 61 | "typescript", 62 | "javascriptreact", 63 | "typescriptreact" 64 | ], 65 | // Extension: npm 66 | "npm.packageManager": "yarn", 67 | } -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to this template will be documented in this file. 4 | 5 | ## v3.0.0 (2025-02-25) 6 | 7 | ### Added 8 | 9 | - New Design Alignments 10 | - New spacer & utility classes 11 | 12 | ### Updated 13 | 14 | - SCSS structure - Build and extend in real-time with CSS variables 15 | - Fonts icons with SVG icons using iconify 16 | - Documentation 17 | 18 | ### Fixed 19 | 20 | - UI improvements & bug fixes 21 | 22 | ## v2.0.0 (2024-07-25) 23 | 24 | ### Added 25 | 26 | - New Design Alignments 27 | - New spacer & utility classes 28 | 29 | ### Updated 30 | 31 | - Bootstrap 5.3.3 32 | - Documentation 33 | 34 | ### Fixed 35 | 36 | - UI improvements & bug fixes 37 | 38 | ## v1.2.1 (2023-11-09) 39 | 40 | ### Fixed 41 | 42 | - Minor improvements & Bugfixes 43 | 44 | ## v1.2.0 (2023-11-01) 45 | 46 | ### Updated 47 | 48 | - Updated Bootstrap to latest version(5.3.2) 49 | - Updated SCSS & Mixins as per Bootstrap 5.3.2 50 | 51 | ### Fixed 52 | 53 | - Carousel HTML Structure as per latest Bootstrap 54 | - Minor improvements & Bugfixes 55 | 56 | ## v1.1.1 - (2023-09-27) 57 | 58 | ### Fixed 59 | 60 | - Minor Improvements 61 | 62 | ## v1.1.0 - (2023-09-13) 63 | 64 | ### Fixed 65 | 66 | - Minor bug fixes and UI improvements 67 | 68 | ### Updated 69 | 70 | - Updated Third party libraries 71 | - Updated Font weights for better appearance 72 | 73 | ### Added 74 | 75 | - Added highlight border on hover for inputs 76 | 77 | ## v1.0.1 - (2022-04-29) 78 | 79 | ### Fixed 80 | 81 | - Minor CSS fixes and improvements 82 | 83 | ## v1.0.0 - (2022-02-11) 84 | 85 | ### Added 86 | 87 | - Initial Release 88 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 ThemeSelection 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 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 [ThemeSelection](https://themeselection.com/) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /assets/css/demo.css: -------------------------------------------------------------------------------- 1 | /* 2 | * demo.css 3 | * File include item demo only specific css only 4 | ******************************************************************************/ 5 | 6 | .menu .app-brand.demo { 7 | height: 64px; 8 | margin-top: 12px; 9 | } 10 | 11 | .app-brand-logo.demo svg { 12 | width: 22px; 13 | height: 38px; 14 | } 15 | 16 | .app-brand-text.demo { 17 | font-size: 1.75rem; 18 | letter-spacing: -0.5px; 19 | } 20 | 21 | /* ! For .layout-navbar-fixed added fix padding top to .layout-page */ 22 | /* Detached navbar */ 23 | .layout-navbar-fixed .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu) .layout-page { 24 | padding-top: 74px !important; 25 | } 26 | /* Default navbar */ 27 | .layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page { 28 | padding-top: 64px !important; 29 | } 30 | .docs-page .layout-navbar-fixed.layout-wrapper:not(.layout-without-menu) .layout-page, 31 | .docs-page .layout-menu-fixed.layout-wrapper:not(.layout-without-menu) .layout-page { 32 | padding-top: 62px !important; 33 | } 34 | 35 | /* Navbar page z-index issue solution */ 36 | .content-wrapper .navbar { 37 | z-index: auto; 38 | } 39 | 40 | /* 41 | * Content 42 | ******************************************************************************/ 43 | 44 | .demo-blocks > * { 45 | display: block !important; 46 | } 47 | 48 | .demo-inline-spacing > * { 49 | margin: 1rem 0.375rem 0 0 !important; 50 | } 51 | 52 | /* ? .demo-vertical-spacing class is used to have vertical margins between elements. To remove margin-top from the first-child, use .demo-only-element class with .demo-vertical-spacing class. For example, we have used this class in forms-input-groups.html file. */ 53 | .demo-vertical-spacing > * { 54 | margin-top: 1rem !important; 55 | margin-bottom: 0 !important; 56 | } 57 | .demo-vertical-spacing.demo-only-element > :first-child { 58 | margin-top: 0 !important; 59 | } 60 | 61 | .demo-vertical-spacing-lg > * { 62 | margin-top: 1.875rem !important; 63 | margin-bottom: 0 !important; 64 | } 65 | .demo-vertical-spacing-lg.demo-only-element > :first-child { 66 | margin-top: 0 !important; 67 | } 68 | 69 | .demo-vertical-spacing-xl > * { 70 | margin-top: 5rem !important; 71 | margin-bottom: 0 !important; 72 | } 73 | .demo-vertical-spacing-xl.demo-only-element > :first-child { 74 | margin-top: 0 !important; 75 | } 76 | 77 | /* Dropdown buttons going out of small screens */ 78 | @media (max-width: 576px) { 79 | #dropdown-variation-demo .btn-group .text-truncate { 80 | width: 231px; 81 | position: relative; 82 | } 83 | #dropdown-variation-demo .btn-group .text-truncate::after { 84 | position: absolute; 85 | top: 45%; 86 | right: 0.65rem; 87 | } 88 | } 89 | 90 | /* 91 | * Layout demo 92 | ******************************************************************************/ 93 | 94 | .layout-demo-wrapper { 95 | display: -webkit-box; 96 | display: -ms-flexbox; 97 | display: flex; 98 | -webkit-box-align: center; 99 | -ms-flex-align: center; 100 | align-items: center; 101 | -webkit-box-orient: vertical; 102 | -webkit-box-direction: normal; 103 | -ms-flex-direction: column; 104 | flex-direction: column; 105 | margin-top: 1rem; 106 | } 107 | .layout-demo-placeholder img { 108 | width: 900px; 109 | } 110 | .layout-demo-info { 111 | text-align: center; 112 | margin-top: 1rem; 113 | } 114 | -------------------------------------------------------------------------------- /assets/img/avatars/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-bootstrap-html-admin-template-free/1ab31df2d8dbd15ce51663e9f53bdf9660e66e83/assets/img/avatars/1.png -------------------------------------------------------------------------------- /assets/img/avatars/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-bootstrap-html-admin-template-free/1ab31df2d8dbd15ce51663e9f53bdf9660e66e83/assets/img/avatars/2.png -------------------------------------------------------------------------------- /assets/img/avatars/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-bootstrap-html-admin-template-free/1ab31df2d8dbd15ce51663e9f53bdf9660e66e83/assets/img/avatars/3.png -------------------------------------------------------------------------------- /assets/img/avatars/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-bootstrap-html-admin-template-free/1ab31df2d8dbd15ce51663e9f53bdf9660e66e83/assets/img/avatars/4.png -------------------------------------------------------------------------------- /assets/img/backgrounds/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-bootstrap-html-admin-template-free/1ab31df2d8dbd15ce51663e9f53bdf9660e66e83/assets/img/backgrounds/1.jpg -------------------------------------------------------------------------------- /assets/img/elements/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-bootstrap-html-admin-template-free/1ab31df2d8dbd15ce51663e9f53bdf9660e66e83/assets/img/elements/1.png -------------------------------------------------------------------------------- /assets/img/elements/10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-bootstrap-html-admin-template-free/1ab31df2d8dbd15ce51663e9f53bdf9660e66e83/assets/img/elements/10.png -------------------------------------------------------------------------------- /assets/img/elements/11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-bootstrap-html-admin-template-free/1ab31df2d8dbd15ce51663e9f53bdf9660e66e83/assets/img/elements/11.png -------------------------------------------------------------------------------- /assets/img/elements/12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-bootstrap-html-admin-template-free/1ab31df2d8dbd15ce51663e9f53bdf9660e66e83/assets/img/elements/12.png -------------------------------------------------------------------------------- /assets/img/elements/13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-bootstrap-html-admin-template-free/1ab31df2d8dbd15ce51663e9f53bdf9660e66e83/assets/img/elements/13.png -------------------------------------------------------------------------------- /assets/img/elements/14.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-bootstrap-html-admin-template-free/1ab31df2d8dbd15ce51663e9f53bdf9660e66e83/assets/img/elements/14.png -------------------------------------------------------------------------------- /assets/img/elements/15.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-bootstrap-html-admin-template-free/1ab31df2d8dbd15ce51663e9f53bdf9660e66e83/assets/img/elements/15.png -------------------------------------------------------------------------------- /assets/img/elements/16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-bootstrap-html-admin-template-free/1ab31df2d8dbd15ce51663e9f53bdf9660e66e83/assets/img/elements/16.png -------------------------------------------------------------------------------- /assets/img/elements/17.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-bootstrap-html-admin-template-free/1ab31df2d8dbd15ce51663e9f53bdf9660e66e83/assets/img/elements/17.png -------------------------------------------------------------------------------- /assets/img/elements/18.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-bootstrap-html-admin-template-free/1ab31df2d8dbd15ce51663e9f53bdf9660e66e83/assets/img/elements/18.png -------------------------------------------------------------------------------- /assets/img/elements/19.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-bootstrap-html-admin-template-free/1ab31df2d8dbd15ce51663e9f53bdf9660e66e83/assets/img/elements/19.png -------------------------------------------------------------------------------- /assets/img/elements/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-bootstrap-html-admin-template-free/1ab31df2d8dbd15ce51663e9f53bdf9660e66e83/assets/img/elements/2.png -------------------------------------------------------------------------------- /assets/img/elements/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-bootstrap-html-admin-template-free/1ab31df2d8dbd15ce51663e9f53bdf9660e66e83/assets/img/elements/3.png -------------------------------------------------------------------------------- /assets/img/elements/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-bootstrap-html-admin-template-free/1ab31df2d8dbd15ce51663e9f53bdf9660e66e83/assets/img/elements/4.png -------------------------------------------------------------------------------- /assets/img/elements/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-bootstrap-html-admin-template-free/1ab31df2d8dbd15ce51663e9f53bdf9660e66e83/assets/img/elements/5.png -------------------------------------------------------------------------------- /assets/img/elements/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-bootstrap-html-admin-template-free/1ab31df2d8dbd15ce51663e9f53bdf9660e66e83/assets/img/elements/6.png -------------------------------------------------------------------------------- /assets/img/elements/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-bootstrap-html-admin-template-free/1ab31df2d8dbd15ce51663e9f53bdf9660e66e83/assets/img/elements/7.png -------------------------------------------------------------------------------- /assets/img/elements/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-bootstrap-html-admin-template-free/1ab31df2d8dbd15ce51663e9f53bdf9660e66e83/assets/img/elements/8.png -------------------------------------------------------------------------------- /assets/img/elements/9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-bootstrap-html-admin-template-free/1ab31df2d8dbd15ce51663e9f53bdf9660e66e83/assets/img/elements/9.png -------------------------------------------------------------------------------- /assets/img/favicon/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-bootstrap-html-admin-template-free/1ab31df2d8dbd15ce51663e9f53bdf9660e66e83/assets/img/favicon/favicon.ico -------------------------------------------------------------------------------- /assets/img/icons/brands/asana.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-bootstrap-html-admin-template-free/1ab31df2d8dbd15ce51663e9f53bdf9660e66e83/assets/img/icons/brands/asana.png -------------------------------------------------------------------------------- /assets/img/icons/brands/behance.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-bootstrap-html-admin-template-free/1ab31df2d8dbd15ce51663e9f53bdf9660e66e83/assets/img/icons/brands/behance.png -------------------------------------------------------------------------------- /assets/img/icons/brands/dribbble.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-bootstrap-html-admin-template-free/1ab31df2d8dbd15ce51663e9f53bdf9660e66e83/assets/img/icons/brands/dribbble.png -------------------------------------------------------------------------------- /assets/img/icons/brands/facebook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-bootstrap-html-admin-template-free/1ab31df2d8dbd15ce51663e9f53bdf9660e66e83/assets/img/icons/brands/facebook.png -------------------------------------------------------------------------------- /assets/img/icons/brands/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-bootstrap-html-admin-template-free/1ab31df2d8dbd15ce51663e9f53bdf9660e66e83/assets/img/icons/brands/github.png -------------------------------------------------------------------------------- /assets/img/icons/brands/google.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-bootstrap-html-admin-template-free/1ab31df2d8dbd15ce51663e9f53bdf9660e66e83/assets/img/icons/brands/google.png -------------------------------------------------------------------------------- /assets/img/icons/brands/instagram.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-bootstrap-html-admin-template-free/1ab31df2d8dbd15ce51663e9f53bdf9660e66e83/assets/img/icons/brands/instagram.png -------------------------------------------------------------------------------- /assets/img/icons/brands/mailchimp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-bootstrap-html-admin-template-free/1ab31df2d8dbd15ce51663e9f53bdf9660e66e83/assets/img/icons/brands/mailchimp.png -------------------------------------------------------------------------------- /assets/img/icons/brands/slack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-bootstrap-html-admin-template-free/1ab31df2d8dbd15ce51663e9f53bdf9660e66e83/assets/img/icons/brands/slack.png -------------------------------------------------------------------------------- /assets/img/icons/brands/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-bootstrap-html-admin-template-free/1ab31df2d8dbd15ce51663e9f53bdf9660e66e83/assets/img/icons/brands/twitter.png -------------------------------------------------------------------------------- /assets/img/icons/unicons/cc-primary.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-bootstrap-html-admin-template-free/1ab31df2d8dbd15ce51663e9f53bdf9660e66e83/assets/img/icons/unicons/cc-primary.png -------------------------------------------------------------------------------- /assets/img/icons/unicons/cc-warning.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-bootstrap-html-admin-template-free/1ab31df2d8dbd15ce51663e9f53bdf9660e66e83/assets/img/icons/unicons/cc-warning.png -------------------------------------------------------------------------------- /assets/img/icons/unicons/chart-success.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-bootstrap-html-admin-template-free/1ab31df2d8dbd15ce51663e9f53bdf9660e66e83/assets/img/icons/unicons/chart-success.png -------------------------------------------------------------------------------- /assets/img/icons/unicons/chart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-bootstrap-html-admin-template-free/1ab31df2d8dbd15ce51663e9f53bdf9660e66e83/assets/img/icons/unicons/chart.png -------------------------------------------------------------------------------- /assets/img/icons/unicons/paypal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-bootstrap-html-admin-template-free/1ab31df2d8dbd15ce51663e9f53bdf9660e66e83/assets/img/icons/unicons/paypal.png -------------------------------------------------------------------------------- /assets/img/icons/unicons/wallet-info.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-bootstrap-html-admin-template-free/1ab31df2d8dbd15ce51663e9f53bdf9660e66e83/assets/img/icons/unicons/wallet-info.png -------------------------------------------------------------------------------- /assets/img/icons/unicons/wallet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-bootstrap-html-admin-template-free/1ab31df2d8dbd15ce51663e9f53bdf9660e66e83/assets/img/icons/unicons/wallet.png -------------------------------------------------------------------------------- /assets/img/illustrations/girl-doing-yoga-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-bootstrap-html-admin-template-free/1ab31df2d8dbd15ce51663e9f53bdf9660e66e83/assets/img/illustrations/girl-doing-yoga-light.png -------------------------------------------------------------------------------- /assets/img/illustrations/man-with-laptop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-bootstrap-html-admin-template-free/1ab31df2d8dbd15ce51663e9f53bdf9660e66e83/assets/img/illustrations/man-with-laptop.png -------------------------------------------------------------------------------- /assets/img/illustrations/page-misc-error-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-bootstrap-html-admin-template-free/1ab31df2d8dbd15ce51663e9f53bdf9660e66e83/assets/img/illustrations/page-misc-error-light.png -------------------------------------------------------------------------------- /assets/img/layouts/layout-container-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-bootstrap-html-admin-template-free/1ab31df2d8dbd15ce51663e9f53bdf9660e66e83/assets/img/layouts/layout-container-light.png -------------------------------------------------------------------------------- /assets/img/layouts/layout-fluid-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-bootstrap-html-admin-template-free/1ab31df2d8dbd15ce51663e9f53bdf9660e66e83/assets/img/layouts/layout-fluid-light.png -------------------------------------------------------------------------------- /assets/img/layouts/layout-without-menu-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-bootstrap-html-admin-template-free/1ab31df2d8dbd15ce51663e9f53bdf9660e66e83/assets/img/layouts/layout-without-menu-light.png -------------------------------------------------------------------------------- /assets/img/layouts/layout-without-navbar-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/sneat-bootstrap-html-admin-template-free/1ab31df2d8dbd15ce51663e9f53bdf9660e66e83/assets/img/layouts/layout-without-navbar-light.png -------------------------------------------------------------------------------- /assets/js/config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Config 3 | * ------------------------------------------------------------------------------------- 4 | * ! IMPORTANT: Make sure you clear the browser local storage In order to see the config changes in the template. 5 | * ! To clear local storage: (https://www.leadshook.com/help/how-to-clear-local-storage-in-google-chrome-browser/). 6 | */ 7 | 8 | 'use strict'; 9 | /* JS global variables 10 | !Please use the hex color code (#000) here. Don't use rgba(), hsl(), etc 11 | */ 12 | window.config = { 13 | colors: { 14 | primary: window.Helpers.getCssVar('primary'), 15 | secondary: window.Helpers.getCssVar('secondary'), 16 | success: window.Helpers.getCssVar('success'), 17 | info: window.Helpers.getCssVar('info'), 18 | warning: window.Helpers.getCssVar('warning'), 19 | danger: window.Helpers.getCssVar('danger'), 20 | dark: window.Helpers.getCssVar('dark'), 21 | black: window.Helpers.getCssVar('pure-black'), 22 | white: window.Helpers.getCssVar('white'), 23 | cardColor: window.Helpers.getCssVar('paper-bg'), 24 | bodyBg: window.Helpers.getCssVar('body-bg'), 25 | bodyColor: window.Helpers.getCssVar('body-color'), 26 | headingColor: window.Helpers.getCssVar('heading-color'), 27 | textMuted: window.Helpers.getCssVar('secondary-color'), 28 | borderColor: window.Helpers.getCssVar('border-color') 29 | }, 30 | colors_label: { 31 | primary: window.Helpers.getCssVar('primary-bg-subtle'), 32 | secondary: window.Helpers.getCssVar('secondary-bg-subtle'), 33 | success: window.Helpers.getCssVar('success-bg-subtle'), 34 | info: window.Helpers.getCssVar('info-bg-subtle'), 35 | warning: window.Helpers.getCssVar('warning-bg-subtle'), 36 | danger: window.Helpers.getCssVar('danger-bg-subtle'), 37 | dark: window.Helpers.getCssVar('dark-bg-subtle') 38 | }, 39 | fontFamily: window.Helpers.getCssVar('font-family-base'), 40 | }; 41 | 42 | -------------------------------------------------------------------------------- /assets/js/extended-ui-perfect-scrollbar.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Perfect Scrollbar 3 | */ 4 | 'use strict'; 5 | 6 | document.addEventListener('DOMContentLoaded', function () { 7 | (function () { 8 | const verticalExample = document.getElementById('vertical-example'), 9 | horizontalExample = document.getElementById('horizontal-example'), 10 | horizVertExample = document.getElementById('both-scrollbars-example'); 11 | 12 | // Vertical Example 13 | // -------------------------------------------------------------------- 14 | if (verticalExample) { 15 | new PerfectScrollbar(verticalExample, { 16 | wheelPropagation: false 17 | }); 18 | } 19 | 20 | // Horizontal Example 21 | // -------------------------------------------------------------------- 22 | if (horizontalExample) { 23 | new PerfectScrollbar(horizontalExample, { 24 | wheelPropagation: false, 25 | suppressScrollY: true 26 | }); 27 | } 28 | 29 | // Both vertical and Horizontal Example 30 | // -------------------------------------------------------------------- 31 | if (horizVertExample) { 32 | new PerfectScrollbar(horizVertExample, { 33 | wheelPropagation: false 34 | }); 35 | } 36 | })(); 37 | }); 38 | -------------------------------------------------------------------------------- /assets/js/form-basic-inputs.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Form Basic Inputs 3 | */ 4 | 5 | 'use strict'; 6 | 7 | (function () { 8 | // Indeterminate checkbox 9 | const checkbox = document.getElementById('defaultCheck2'); 10 | checkbox.indeterminate = true; 11 | })(); 12 | -------------------------------------------------------------------------------- /assets/js/main.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Main 3 | */ 4 | 5 | 'use strict'; 6 | 7 | let menu, 8 | animate; 9 | document.addEventListener('DOMContentLoaded', function () { 10 | // class for ios specific styles 11 | if (navigator.userAgent.match(/iPhone|iPad|iPod/i)) { 12 | document.body.classList.add('ios'); 13 | } 14 | }); 15 | 16 | (function () { 17 | // Initialize menu 18 | //----------------- 19 | 20 | let layoutMenuEl = document.querySelectorAll('#layout-menu'); 21 | layoutMenuEl.forEach(function (element) { 22 | menu = new Menu(element, { 23 | orientation: 'vertical', 24 | closeChildren: false 25 | }); 26 | // Change parameter to true if you want scroll animation 27 | window.Helpers.scrollToActive((animate = false)); 28 | window.Helpers.mainMenu = menu; 29 | }); 30 | 31 | // Initialize menu togglers and bind click on each 32 | let menuToggler = document.querySelectorAll('.layout-menu-toggle'); 33 | menuToggler.forEach(item => { 34 | item.addEventListener('click', event => { 35 | event.preventDefault(); 36 | window.Helpers.toggleCollapsed(); 37 | }); 38 | }); 39 | 40 | // Display menu toggle (layout-menu-toggle) on hover with delay 41 | let delay = function (elem, callback) { 42 | let timeout = null; 43 | elem.onmouseenter = function () { 44 | // Set timeout to be a timer which will invoke callback after 300ms (not for small screen) 45 | if (!Helpers.isSmallScreen()) { 46 | timeout = setTimeout(callback, 300); 47 | } else { 48 | timeout = setTimeout(callback, 0); 49 | } 50 | }; 51 | 52 | elem.onmouseleave = function () { 53 | // Clear any timers set to timeout 54 | document.querySelector('.layout-menu-toggle').classList.remove('d-block'); 55 | clearTimeout(timeout); 56 | }; 57 | }; 58 | if (document.getElementById('layout-menu')) { 59 | delay(document.getElementById('layout-menu'), function () { 60 | // not for small screen 61 | if (!Helpers.isSmallScreen()) { 62 | document.querySelector('.layout-menu-toggle').classList.add('d-block'); 63 | } 64 | }); 65 | } 66 | 67 | // Display in main menu when menu scrolls 68 | let menuInnerContainer = document.getElementsByClassName('menu-inner'), 69 | menuInnerShadow = document.getElementsByClassName('menu-inner-shadow')[0]; 70 | if (menuInnerContainer.length > 0 && menuInnerShadow) { 71 | menuInnerContainer[0].addEventListener('ps-scroll-y', function () { 72 | if (this.querySelector('.ps__thumb-y').offsetTop) { 73 | menuInnerShadow.style.display = 'block'; 74 | } else { 75 | menuInnerShadow.style.display = 'none'; 76 | } 77 | }); 78 | } 79 | 80 | // Init helpers & misc 81 | // -------------------- 82 | 83 | // Init BS Tooltip 84 | const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')); 85 | tooltipTriggerList.map(function (tooltipTriggerEl) { 86 | return new bootstrap.Tooltip(tooltipTriggerEl); 87 | }); 88 | 89 | // Accordion active class 90 | const accordionActiveFunction = function (e) { 91 | if (e.type == 'show.bs.collapse' || e.type == 'show.bs.collapse') { 92 | e.target.closest('.accordion-item').classList.add('active'); 93 | } else { 94 | e.target.closest('.accordion-item').classList.remove('active'); 95 | } 96 | }; 97 | 98 | const accordionTriggerList = [].slice.call(document.querySelectorAll('.accordion')); 99 | const accordionList = accordionTriggerList.map(function (accordionTriggerEl) { 100 | accordionTriggerEl.addEventListener('show.bs.collapse', accordionActiveFunction); 101 | accordionTriggerEl.addEventListener('hide.bs.collapse', accordionActiveFunction); 102 | }); 103 | 104 | // Auto update layout based on screen size 105 | window.Helpers.setAutoUpdate(true); 106 | 107 | // Toggle Password Visibility 108 | window.Helpers.initPasswordToggle(); 109 | 110 | // Speech To Text 111 | window.Helpers.initSpeechToText(); 112 | 113 | // Manage menu expanded/collapsed with templateCustomizer & local storage 114 | //------------------------------------------------------------------ 115 | 116 | // If current layout is horizontal OR current window screen is small (overlay menu) than return from here 117 | if (window.Helpers.isSmallScreen()) { 118 | return; 119 | } 120 | 121 | // If current layout is vertical and current window screen is > small 122 | 123 | // Auto update menu collapsed/expanded based on the themeConfig 124 | window.Helpers.setCollapsed(true, false); 125 | })(); 126 | // Utils 127 | function isMacOS() { 128 | return /Mac|iPod|iPhone|iPad/.test(navigator.userAgent); 129 | } 130 | -------------------------------------------------------------------------------- /assets/js/pages-account-settings-account.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Account Settings - Account 3 | */ 4 | 5 | 'use strict'; 6 | 7 | document.addEventListener('DOMContentLoaded', function (e) { 8 | (function () { 9 | const deactivateAcc = document.querySelector('#formAccountDeactivation'); 10 | 11 | // Update/reset user image of account page 12 | let accountUserImage = document.getElementById('uploadedAvatar'); 13 | const fileInput = document.querySelector('.account-file-input'), 14 | resetFileInput = document.querySelector('.account-image-reset'); 15 | 16 | if (accountUserImage) { 17 | const resetImage = accountUserImage.src; 18 | fileInput.onchange = () => { 19 | if (fileInput.files[0]) { 20 | accountUserImage.src = window.URL.createObjectURL(fileInput.files[0]); 21 | } 22 | }; 23 | resetFileInput.onclick = () => { 24 | fileInput.value = ''; 25 | accountUserImage.src = resetImage; 26 | }; 27 | } 28 | })(); 29 | }); 30 | -------------------------------------------------------------------------------- /assets/js/ui-modals.js: -------------------------------------------------------------------------------- 1 | /** 2 | * UI Modals 3 | */ 4 | 5 | 'use strict'; 6 | 7 | (function () { 8 | // On hiding modal, remove iframe video/audio to stop playing 9 | const youTubeModal = document.querySelector('#youTubeModal'), 10 | youTubeModalVideo = youTubeModal.querySelector('iframe'); 11 | youTubeModal.addEventListener('hidden.bs.modal', function () { 12 | youTubeModalVideo.setAttribute('src', ''); 13 | }); 14 | 15 | // Function to get and auto play youTube video 16 | const autoPlayYouTubeModal = function () { 17 | const modalTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="modal"]')); 18 | modalTriggerList.map(function (modalTriggerEl) { 19 | modalTriggerEl.onclick = function () { 20 | const theModal = this.getAttribute('data-bs-target'), 21 | videoSRC = this.getAttribute('data-theVideo'), 22 | videoSRCauto = `${videoSRC}?autoplay=1`, 23 | modalVideo = document.querySelector(`${theModal} iframe`); 24 | if (modalVideo) { 25 | modalVideo.setAttribute('src', videoSRCauto); 26 | } 27 | }; 28 | }); 29 | }; 30 | 31 | // Calling function on load 32 | autoPlayYouTubeModal(); 33 | })(); 34 | -------------------------------------------------------------------------------- /assets/js/ui-popover.js: -------------------------------------------------------------------------------- 1 | // /** 2 | // * UI Tooltips & Popovers 3 | // */ 4 | 5 | 'use strict'; 6 | 7 | (function () { 8 | const popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]')); 9 | const popoverList = popoverTriggerList.map(function (popoverTriggerEl) { 10 | // added { html: true, sanitize: false } option to render button in content area of popover 11 | return new bootstrap.Popover(popoverTriggerEl, { html: true, sanitize: false }); 12 | }); 13 | })(); 14 | -------------------------------------------------------------------------------- /assets/js/ui-toasts.js: -------------------------------------------------------------------------------- 1 | /** 2 | * UI Toasts 3 | */ 4 | 5 | 'use strict'; 6 | 7 | document.addEventListener('DOMContentLoaded', function (e) { 8 | // Bootstrap toasts example 9 | // -------------------------------------------------------------------- 10 | const toastPlacementExample = document.querySelector('.toast-placement-ex'), 11 | toastPlacementBtn = document.querySelector('#showToastPlacement'); 12 | let selectedType, selectedPlacement, toastPlacement; 13 | 14 | // Dispose toast when open another 15 | function toastDispose(toast) { 16 | if (toast && toast._element !== null) { 17 | if (toastPlacementExample) { 18 | toastPlacementExample.classList.remove(selectedType); 19 | DOMTokenList.prototype.remove.apply(toastPlacementExample.classList, selectedPlacement); 20 | } 21 | toast.dispose(); 22 | } 23 | } 24 | // Placement Button click 25 | if (toastPlacementBtn) { 26 | toastPlacementBtn.onclick = function () { 27 | if (toastPlacement) { 28 | toastDispose(toastPlacement); 29 | } 30 | selectedType = document.querySelector('#selectTypeOpt').value; 31 | selectedPlacement = document.querySelector('#selectPlacement').value.split(' '); 32 | 33 | toastPlacementExample.classList.add(selectedType); 34 | DOMTokenList.prototype.add.apply(toastPlacementExample.classList, selectedPlacement); 35 | toastPlacement = new bootstrap.Toast(toastPlacementExample); 36 | toastPlacement.show(); 37 | }; 38 | } 39 | }); 40 | -------------------------------------------------------------------------------- /assets/vendor/css/pages/page-icons.css: -------------------------------------------------------------------------------- 1 | /* Page Icons (Page specific only) 2 | ******************************************************************************* */ 3 | #icons-container .icon-card { 4 | inline-size: 128px; 5 | } 6 | #icons-container .icon-card .icon-base { 7 | block-size: 2rem; 8 | font-size: 2rem; 9 | inline-size: 2rem; 10 | } 11 | 12 | @media (width <= 1024px) { 13 | #icons-container .icon-card { 14 | -webkit-box-flex: 1; 15 | -ms-flex: 1 1 auto; 16 | flex: 1 1 auto; 17 | inline-size: 126px; 18 | } 19 | } 20 | @media (max-width: 767.98px) { 21 | #icons-container .icon-card { 22 | inline-size: 131px; 23 | } 24 | } 25 | @media (width <= 414px) { 26 | #icons-container .icon-card { 27 | inline-size: 110px; 28 | } 29 | } 30 | @media (width <= 375px) { 31 | #icons-container .icon-card { 32 | inline-size: 150px; 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /assets/vendor/css/pages/page-misc.css: -------------------------------------------------------------------------------- 1 | /* Miscellaneous 2 | ******************************************************************************* */ 3 | .misc-wrapper { 4 | display: -webkit-box; 5 | display: -ms-flexbox; 6 | display: flex; 7 | -webkit-box-orient: vertical; 8 | -webkit-box-direction: normal; 9 | -ms-flex-direction: column; 10 | flex-direction: column; 11 | -webkit-box-align: center; 12 | -ms-flex-align: center; 13 | align-items: center; 14 | -webkit-box-pack: center; 15 | -ms-flex-pack: center; 16 | justify-content: center; 17 | min-block-size: calc(100vh - 1.5rem * 2); /* ?we have added container-p-y class to add padding on top & bottom */ 18 | text-align: center; 19 | } 20 | -------------------------------------------------------------------------------- /assets/vendor/libs/highlight/highlight-github.css: -------------------------------------------------------------------------------- 1 | @import "highlight.js/styles/github.css"; 2 | -------------------------------------------------------------------------------- /assets/vendor/libs/highlight/highlight.css: -------------------------------------------------------------------------------- 1 | pre code.hljs { 2 | display: block; 3 | overflow-x: auto; 4 | padding: 1em; 5 | } 6 | 7 | code.hljs { 8 | padding: 3px 5px; 9 | } 10 | 11 | /* 12 | 13 | Atom One Light by Daniel Gamage 14 | Original One Light Syntax theme from https://github.com/atom/one-light-syntax 15 | 16 | base: #fafafa 17 | mono-1: #383a42 18 | mono-2: #686b77 19 | mono-3: #a0a1a7 20 | hue-1: #0184bb 21 | hue-2: #4078f2 22 | hue-3: #a626a4 23 | hue-4: #50a14f 24 | hue-5: #e45649 25 | hue-5-2: #c91243 26 | hue-6: #986801 27 | hue-6-2: #c18401 28 | 29 | */ 30 | .hljs { 31 | color: #383a42; 32 | background: #fafafa; 33 | } 34 | 35 | .hljs-comment, 36 | .hljs-quote { 37 | color: #a0a1a7; 38 | font-style: italic; 39 | } 40 | 41 | .hljs-doctag, 42 | .hljs-keyword, 43 | .hljs-formula { 44 | color: #a626a4; 45 | } 46 | 47 | .hljs-section, 48 | .hljs-name, 49 | .hljs-selector-tag, 50 | .hljs-deletion, 51 | .hljs-subst { 52 | color: #e45649; 53 | } 54 | 55 | .hljs-literal { 56 | color: #0184bb; 57 | } 58 | 59 | .hljs-string, 60 | .hljs-regexp, 61 | .hljs-addition, 62 | .hljs-attribute, 63 | .hljs-meta .hljs-string { 64 | color: #50a14f; 65 | } 66 | 67 | .hljs-attr, 68 | .hljs-variable, 69 | .hljs-template-variable, 70 | .hljs-type, 71 | .hljs-selector-class, 72 | .hljs-selector-attr, 73 | .hljs-selector-pseudo, 74 | .hljs-number { 75 | color: #986801; 76 | } 77 | 78 | .hljs-symbol, 79 | .hljs-bullet, 80 | .hljs-link, 81 | .hljs-meta, 82 | .hljs-selector-id, 83 | .hljs-title { 84 | color: #4078f2; 85 | } 86 | 87 | .hljs-built_in, 88 | .hljs-title.class_, 89 | .hljs-class .hljs-title { 90 | color: #c18401; 91 | } 92 | 93 | .hljs-emphasis { 94 | font-style: italic; 95 | } 96 | 97 | .hljs-strong { 98 | font-weight: bold; 99 | } 100 | 101 | .hljs-link { 102 | text-decoration: underline; 103 | } 104 | 105 | pre code.hljs { 106 | display: block; 107 | overflow-x: auto; 108 | padding: 1em; 109 | } 110 | 111 | code.hljs { 112 | padding: 3px 5px; 113 | } 114 | 115 | /* 116 | 117 | Atom One Dark by Daniel Gamage 118 | Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax 119 | 120 | base: #282c34 121 | mono-1: #abb2bf 122 | mono-2: #818896 123 | mono-3: #5c6370 124 | hue-1: #56b6c2 125 | hue-2: #61aeee 126 | hue-3: #c678dd 127 | hue-4: #98c379 128 | hue-5: #e06c75 129 | hue-5-2: #be5046 130 | hue-6: #d19a66 131 | hue-6-2: #e6c07b 132 | 133 | */ 134 | .hljs { 135 | color: #abb2bf; 136 | background: #282c34; 137 | } 138 | 139 | .hljs-comment, 140 | .hljs-quote { 141 | color: #5c6370; 142 | font-style: italic; 143 | } 144 | 145 | .hljs-doctag, 146 | .hljs-keyword, 147 | .hljs-formula { 148 | color: #c678dd; 149 | } 150 | 151 | .hljs-section, 152 | .hljs-name, 153 | .hljs-selector-tag, 154 | .hljs-deletion, 155 | .hljs-subst { 156 | color: #e06c75; 157 | } 158 | 159 | .hljs-literal { 160 | color: #56b6c2; 161 | } 162 | 163 | .hljs-string, 164 | .hljs-regexp, 165 | .hljs-addition, 166 | .hljs-attribute, 167 | .hljs-meta .hljs-string { 168 | color: #98c379; 169 | } 170 | 171 | .hljs-attr, 172 | .hljs-variable, 173 | .hljs-template-variable, 174 | .hljs-type, 175 | .hljs-selector-class, 176 | .hljs-selector-attr, 177 | .hljs-selector-pseudo, 178 | .hljs-number { 179 | color: #d19a66; 180 | } 181 | 182 | .hljs-symbol, 183 | .hljs-bullet, 184 | .hljs-link, 185 | .hljs-meta, 186 | .hljs-selector-id, 187 | .hljs-title { 188 | color: #61aeee; 189 | } 190 | 191 | .hljs-built_in, 192 | .hljs-title.class_, 193 | .hljs-class .hljs-title { 194 | color: #e6c07b; 195 | } 196 | 197 | .hljs-emphasis { 198 | font-style: italic; 199 | } 200 | 201 | .hljs-strong { 202 | font-weight: bold; 203 | } 204 | 205 | .hljs-link { 206 | text-decoration: underline; 207 | } 208 | -------------------------------------------------------------------------------- /assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Container style 3 | */ 4 | .ps { 5 | overflow: hidden !important; 6 | overflow-anchor: none; 7 | -ms-overflow-style: none; 8 | touch-action: auto; 9 | -ms-touch-action: auto; 10 | } 11 | 12 | /* 13 | * Scrollbar rail styles 14 | */ 15 | .ps__rail-x { 16 | display: none; 17 | opacity: 0; 18 | transition: background-color 0.2s linear, opacity 0.2s linear; 19 | -webkit-transition: background-color 0.2s linear, opacity 0.2s linear; 20 | height: 15px; 21 | /* there must be 'bottom' or 'top' for ps__rail-x */ 22 | bottom: 0px; 23 | /* please don't change 'position' */ 24 | position: absolute; 25 | } 26 | 27 | .ps__rail-y { 28 | display: none; 29 | opacity: 0; 30 | transition: background-color 0.2s linear, opacity 0.2s linear; 31 | -webkit-transition: background-color 0.2s linear, opacity 0.2s linear; 32 | width: 15px; 33 | /* there must be 'right' or 'left' for ps__rail-y */ 34 | right: 0; 35 | /* please don't change 'position' */ 36 | position: absolute; 37 | } 38 | 39 | .ps--active-x > .ps__rail-x, 40 | .ps--active-y > .ps__rail-y { 41 | display: block; 42 | background-color: transparent; 43 | } 44 | 45 | .ps:hover > .ps__rail-x, 46 | .ps:hover > .ps__rail-y, 47 | .ps--focus > .ps__rail-x, 48 | .ps--focus > .ps__rail-y, 49 | .ps--scrolling-x > .ps__rail-x, 50 | .ps--scrolling-y > .ps__rail-y { 51 | opacity: 0.6; 52 | } 53 | 54 | .ps .ps__rail-x:hover, 55 | .ps .ps__rail-y:hover, 56 | .ps .ps__rail-x:focus, 57 | .ps .ps__rail-y:focus, 58 | .ps .ps__rail-x.ps--clicking, 59 | .ps .ps__rail-y.ps--clicking { 60 | background-color: #eee; 61 | opacity: 0.9; 62 | } 63 | 64 | /* 65 | * Scrollbar thumb styles 66 | */ 67 | .ps__thumb-x { 68 | background-color: #aaa; 69 | border-radius: 6px; 70 | transition: background-color 0.2s linear, height 0.2s ease-in-out; 71 | -webkit-transition: background-color 0.2s linear, height 0.2s ease-in-out; 72 | height: 6px; 73 | /* there must be 'bottom' for ps__thumb-x */ 74 | bottom: 2px; 75 | /* please don't change 'position' */ 76 | position: absolute; 77 | } 78 | 79 | .ps__thumb-y { 80 | background-color: #aaa; 81 | border-radius: 6px; 82 | transition: background-color 0.2s linear, width 0.2s ease-in-out; 83 | -webkit-transition: background-color 0.2s linear, width 0.2s ease-in-out; 84 | width: 6px; 85 | /* there must be 'right' for ps__thumb-y */ 86 | right: 2px; 87 | /* please don't change 'position' */ 88 | position: absolute; 89 | } 90 | 91 | .ps__rail-x:hover > .ps__thumb-x, 92 | .ps__rail-x:focus > .ps__thumb-x, 93 | .ps__rail-x.ps--clicking .ps__thumb-x { 94 | background-color: #999; 95 | height: 11px; 96 | } 97 | 98 | .ps__rail-y:hover > .ps__thumb-y, 99 | .ps__rail-y:focus > .ps__thumb-y, 100 | .ps__rail-y.ps--clicking .ps__thumb-y { 101 | background-color: #999; 102 | width: 11px; 103 | } 104 | 105 | /* MS supports */ 106 | @supports (-ms-overflow-style: none) { 107 | .ps { 108 | overflow: auto !important; 109 | } 110 | } 111 | @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 112 | .ps { 113 | overflow: auto !important; 114 | } 115 | } 116 | .ps { 117 | position: relative; 118 | } 119 | .ps .ps__rail-x { 120 | block-size: 0.25rem; 121 | } 122 | .ps .ps__rail-y { 123 | z-index: 3; 124 | inline-size: 0.25rem; 125 | } 126 | .ps .ps__rail-x, 127 | .ps .ps__rail-y, 128 | .ps .ps__thumb-x, 129 | .ps .ps__thumb-y { 130 | border-radius: 50rem; 131 | } 132 | .ps .ps__rail-x:hover, 133 | .ps .ps__rail-x:focus, 134 | .ps .ps__rail-x.ps--clicking, 135 | .ps .ps__rail-x:hover > .ps__thumb-x, 136 | .ps .ps__rail-x:focus > .ps__thumb-x, 137 | .ps .ps__rail-x.ps--clicking > .ps__thumb-x { 138 | block-size: 0.375rem; 139 | } 140 | .ps .ps__rail-y:hover, 141 | .ps .ps__rail-y:focus, 142 | .ps .ps__rail-y.ps--clicking, 143 | .ps .ps__rail-y:hover > .ps__thumb-y, 144 | .ps .ps__rail-y:focus > .ps__thumb-y, 145 | .ps .ps__rail-y.ps--clicking > .ps__thumb-y { 146 | inline-size: 0.375rem; 147 | } 148 | .ps .ps__thumb-x { 149 | block-size: 0.25rem; 150 | inset-block-end: 0; 151 | } 152 | .ps .ps__thumb-y { 153 | inline-size: 0.25rem; 154 | inset-inline-end: 0; 155 | } 156 | .ps .ps__thumb-x, 157 | .ps .ps__thumb-y { 158 | background-color: var(--bs-gray-400); 159 | } 160 | .ps .ps__rail-x:hover, 161 | .ps .ps__rail-y:hover, 162 | .ps .ps__rail-x:focus, 163 | .ps .ps__rail-y:focus, 164 | .ps .ps__rail-x.ps--clicking, 165 | .ps .ps__rail-y.ps--clicking { 166 | background-color: var(--bs-gray-200); 167 | } 168 | .ps .ps__rail-x:hover > .ps__thumb-x, 169 | .ps .ps__rail-y:hover > .ps__thumb-y, 170 | .ps .ps__rail-x:focus > .ps__thumb-x, 171 | .ps .ps__rail-y:focus > .ps__thumb-y, 172 | .ps .ps__rail-x.ps--clicking > .ps__thumb-x, 173 | .ps .ps__rail-y.ps--clicking > .ps__thumb-y { 174 | background-color: var(--bs-gray-700); 175 | } 176 | 177 | /* Firefox width issue fixed */ 178 | @supports (-moz-appearance: none) { 179 | #both-scrollbars-example { 180 | margin-block: 0; 181 | margin-inline: auto; 182 | max-inline-size: 1080px; 183 | padding-inline: 0; 184 | } 185 | } 186 | -------------------------------------------------------------------------------- /build-config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | base: { 3 | // Excludes folders relative to `root` directory. 4 | exclude: [ 5 | 'html', 6 | 'html-starter', 7 | 'html-demo', 8 | 'dist', 9 | 'build', 10 | 'assets', 11 | 'tasks', 12 | 'node_modules', 13 | '_temp', 14 | 'node-script', 15 | 'fonts' 16 | ], 17 | 18 | // Base Path to Serve from using Browser Sync, Currently set to root of the project 19 | // You can also point to specific folder like 'build/' 20 | serverPath: './', 21 | 22 | // Template/Folder to build for production 23 | buildTemplatePath: 'html', 24 | 25 | // Folder for production build 26 | buildPath: './build' 27 | }, 28 | development: { 29 | // Build path can be both relative or absolute. 30 | // Current dist path is `./assets/vendor` which will be used by templates from `html\` directory. Set distPath: './dist' to generate assets in dist folder. 31 | distPath: './assets/vendor', 32 | 33 | // Minify assets. 34 | minify: false, 35 | 36 | // Generate sourcemaps. 37 | sourcemaps: false, 38 | 39 | // https://webpack.js.org/configuration/devtool/#development 40 | devtool: 'eval-source-map', 41 | 42 | // Use this option with caution because it will remove entire output directory. 43 | // Will affect only and `build` command 44 | cleanDist: true, 45 | fastDev: true 46 | }, 47 | production: { 48 | // Build path can be both relative or absolute. 49 | // Current dist path is `./assets/vendor` which will be used by templates from `html\` directory. Set distPath: './dist' to generate assets in dist folder. 50 | distPath: './assets/vendor', 51 | 52 | // Minify assets. 53 | // Note: Webpack will minify js sources in production mode regardless to this option 54 | minify: true, 55 | 56 | // Generate sourcemaps. 57 | 58 | sourcemaps: false, 59 | // https://webpack.js.org/configuration/devtool/#production 60 | devtool: '#source-map', 61 | 62 | // Use this option with caution because it will remove entire output directory. 63 | // Will affect only `build:prod` command 64 | cleanDist: true 65 | } 66 | }; 67 | -------------------------------------------------------------------------------- /documentation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Sneat - Free Bootstrap 5 HTML Admin Template 6 | 7 | 8 | 9 | 10 |

11 | If you do not redirect please visit : 12 | https://demos.themeselection.com/sneat-bootstrap-html-admin-template/documentation/ 15 |

16 | 17 | 18 | -------------------------------------------------------------------------------- /fonts/iconify/iconify.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs').promises; 2 | const path = require('path'); 3 | const deepmerge = require('deepmerge'); 4 | const env = require('gulp-environment'); 5 | const { importDirectory, cleanupSVG, parseColors, isEmptyColor, runSVGO } = require('@iconify/tools'); 6 | const { getIcons, stringToIcon, getIconsCSS } = require('@iconify/utils'); 7 | 8 | // Set environment variable 9 | process.env.NODE_ENV = env.current.name; 10 | 11 | let serverPath; 12 | let templatePath; 13 | let buildPath; 14 | 15 | // Load configuration 16 | const conf = (() => { 17 | const _conf = require('../../build-config'); 18 | serverPath = _conf.base.serverPath; 19 | templatePath = _conf.base.buildTemplatePath; 20 | buildPath = _conf.base.buildPath; 21 | return deepmerge.all([{}, _conf.base || {}, _conf[process.env.NODE_ENV] || {}]); 22 | })(); 23 | 24 | // Icon sources 25 | const sources = { 26 | json: [ 27 | require.resolve('@iconify/json/json/bx.json'), 28 | require.resolve('@iconify/json/json/bxl.json'), 29 | require.resolve('@iconify/json/json/bxs.json') 30 | ] 31 | }; 32 | 33 | // CSS target path for generated icons 34 | const cssTarget = path.resolve(__dirname, '../../' + conf.distPath.replace(/^\.\//, '') + '/fonts/iconify-icons.css'); 35 | 36 | // Main function to generate CSS 37 | (async function () { 38 | try { 39 | const allIcons = []; 40 | 41 | // Process JSON sources 42 | if (sources.json) { 43 | for (let i = 0; i < sources.json.length; i++) { 44 | const item = sources.json[i]; 45 | const filename = typeof item === 'string' ? item : item.filename; 46 | const content = JSON.parse(await fs.readFile(filename, 'utf8')); 47 | 48 | // Filter icons if specific icons are provided 49 | if (typeof item !== 'string' && item.icons?.length) { 50 | const filteredContent = getIcons(content, item.icons); 51 | 52 | if (!filteredContent) { 53 | throw new Error(`Cannot find required icons in ${filename}`); 54 | } 55 | 56 | allIcons.push(filteredContent); 57 | } else { 58 | allIcons.push(content); 59 | } 60 | } 61 | } 62 | 63 | // Process SVG sources if provided 64 | if (sources.svg) { 65 | for (let i = 0; i < sources.svg.length; i++) { 66 | const source = sources.svg[i]; 67 | const iconSet = await importDirectory(source.dir, { 68 | prefix: source.prefix 69 | }); 70 | 71 | // Iterate over icons and process each SVG 72 | await iconSet.forEach(async (name, type) => { 73 | if (type !== 'icon') { 74 | return; 75 | } 76 | 77 | const svg = iconSet.toSVG(name); 78 | 79 | if (!svg) { 80 | iconSet.remove(name); 81 | return; 82 | } 83 | 84 | try { 85 | // Clean up and optimize SVG 86 | await cleanupSVG(svg); 87 | 88 | if (source.monotone) { 89 | await parseColors(svg, { 90 | defaultColor: 'currentColor', 91 | callback: (attr, colorStr, color) => { 92 | return !color || isEmptyColor(color) ? colorStr : 'currentColor'; 93 | } 94 | }); 95 | } 96 | 97 | await runSVGO(svg); 98 | } catch (err) { 99 | console.error(`Error parsing ${name} from ${source.dir}:`, err); 100 | iconSet.remove(name); 101 | return; 102 | } 103 | 104 | iconSet.fromSVG(name, svg); 105 | allIcons.push(iconSet.export()); 106 | }); 107 | } 108 | } 109 | 110 | // Generate the CSS content from all collected icons 111 | const cssContent = allIcons 112 | .map(iconSet => 113 | getIconsCSS(iconSet, Object.keys(iconSet.icons), { 114 | iconSelector: '.{prefix}-{name}', 115 | commonSelector: '.bx', 116 | format: conf.minify ? 'compressed' : 'expanded' 117 | }) 118 | ) 119 | .join('\n'); 120 | 121 | // Write the generated CSS to the target file 122 | await fs.writeFile(cssTarget, cssContent, 'utf8'); 123 | console.log(`Saved CSS to ${cssTarget}`); 124 | } catch (err) { 125 | console.error('Error during icon CSS generation:', err); 126 | } 127 | })(); 128 | 129 | /** 130 | * Organizes a list of icons by prefix. 131 | * @param {Array} icons - Array of icon names 132 | * @returns {Object} - Sorted icons grouped by prefix 133 | */ 134 | function organizeIconsList(icons) { 135 | const sorted = {}; 136 | 137 | icons.forEach(icon => { 138 | const item = stringToIcon(icon); 139 | 140 | if (!item) { 141 | return; 142 | } 143 | 144 | const prefix = item.prefix; 145 | const prefixList = sorted[prefix] ? sorted[prefix] : (sorted[prefix] = []); 146 | 147 | const name = item.name; 148 | 149 | if (prefixList.indexOf(name) === -1) { 150 | prefixList.push(name); 151 | } 152 | }); 153 | 154 | return sorted; 155 | } 156 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | // Config 4 | // ------------------------------------------------------------------------------- 5 | 6 | const env = require('gulp-environment'); 7 | process.env.NODE_ENV = env.current.name; 8 | 9 | let serverPath; 10 | const conf = (() => { 11 | const _conf = require('./build-config'); 12 | serverPath = _conf.base.serverPath; 13 | templatePath = _conf.base.buildTemplatePath; 14 | buildPath = _conf.base.buildPath; 15 | return require('deepmerge').all([{}, _conf.base || {}, _conf[process.env.NODE_ENV] || {}]); 16 | })(); 17 | 18 | conf.distPath = path.resolve(__dirname, conf.distPath).replace(/\\/g, '/'); 19 | 20 | // Modules 21 | // ------------------------------------------------------------------------------- 22 | 23 | const { parallel, series, watch } = require('gulp'); 24 | const del = require('del'); 25 | const colors = require('ansi-colors'); 26 | const browserSync = require('browser-sync').create(); 27 | colors.enabled = require('color-support').hasBasic; 28 | 29 | // Utilities 30 | // ------------------------------------------------------------------------------- 31 | 32 | function srcGlob(...src) { 33 | return src.concat(conf.exclude.map(d => `!${d}/**/*`)); 34 | } 35 | 36 | // Tasks 37 | // ------------------------------------------------------------------------------- 38 | 39 | const buildTasks = require('./tasks/build')(conf, srcGlob); 40 | const prodTasks = require('./tasks/prod')(conf); 41 | 42 | // Clean build directory 43 | // ------------------------------------------------------------------------------- 44 | 45 | const cleanTask = function () { 46 | return del([conf.distPath, buildPath], { 47 | force: true 48 | }); 49 | }; 50 | 51 | // Watch 52 | // ------------------------------------------------------------------------------- 53 | const watchTask = function () { 54 | watch(srcGlob('**/*.scss', '!fonts/**/*.scss'), buildTasks.css); 55 | watch(srcGlob('fonts/**/*.scss'), parallel(buildTasks.css)); 56 | watch(srcGlob('**/*.@(js|es6)', '!*.js'), buildTasks.js); 57 | }; 58 | 59 | // Serve 60 | // ------------------------------------------------------------------------------- 61 | const serveTasks = function () { 62 | browserSync.init({ 63 | // ? You can change server path variable from build-config.js file 64 | server: serverPath 65 | }); 66 | watch([ 67 | // ? You can change add/remove files/folders watch paths in below array 68 | 'html/**/*.html', 69 | 'html-starter/**/*.html', 70 | 'assets/vendor/css/*.css', 71 | 'assets/css/*.css', 72 | 'assets/js/*.js' 73 | ]).on('change', browserSync.reload); 74 | }; 75 | 76 | const serveTask = parallel([serveTasks, watchTask]); 77 | 78 | // Build (Dev & Prod) 79 | // ------------------------------------------------------------------------------- 80 | 81 | const buildTask = conf.cleanDist 82 | ? series(cleanTask, env.current.name === 'production' ? [buildTasks.all, prodTasks.all] : buildTasks.all) 83 | : series(env.current.name === 'production' ? [buildTasks.all, prodTasks.all] : buildTasks.all); 84 | 85 | // Exports 86 | // ------------------------------------------------------------------------------- 87 | module.exports = { 88 | default: buildTask, 89 | build: buildTask, 90 | 'build:js': buildTasks.js, 91 | 'build:css': buildTasks.css, 92 | 'build:fonts': buildTasks.fonts, 93 | 'build:copy': parallel([buildTasks.copy]), 94 | watch: watchTask, 95 | serve: serveTask 96 | }; 97 | -------------------------------------------------------------------------------- /hire-us.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Hire Us 5 | 6 | 7 | 8 | 9 |

10 | If you do not redirect please visit : 11 | https://themeselection.com/hire-us/ 12 |

13 | 14 | 15 | -------------------------------------------------------------------------------- /html/layouts-blank.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | Demo: Blank layout - Layouts | Sneat - Bootstrap Dashboard FREE 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 |

Blank Page

53 | 54 | 55 | 56 |
57 | Upgrade to Pro 63 |
64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | -------------------------------------------------------------------------------- /html/pages-misc-error.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | Demo: Error - Pages | Sneat - Bootstrap Dashboard FREE 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 |
56 |
57 |

404

58 |

Page Not Found️ ⚠️

59 |

we couldn't find the page you are looking for

60 | Back to home 61 |
62 | page-misc-error-light 67 |
68 |
69 |
70 | 71 | 72 | 73 | 74 |
75 | Upgrade to Pro 81 |
82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | -------------------------------------------------------------------------------- /html/pages-misc-under-maintenance.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | Demo: Under Maintenance - Pages | Sneat - Bootstrap Dashboard FREE 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 |
56 |
57 |

Under Maintenance! 🚧

58 |

Sorry for the inconvenience but we're performing some maintenance at the moment

59 | Back to home 60 |
61 | girl-doing-yoga-light 66 |
67 |
68 |
69 | 70 | 71 | 72 | 73 |
74 | Upgrade to Pro 80 |
81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 9 | 10 | 11 | 14 | 15 | Sneat - Free Bootstrap 5 HTML Admin Template 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 |
37 |

Thank you for using Sneat - Free Bootstrap 5 HTML Admin Template! 😇

38 |

39 | If you’re a developer looking for most Powerful & comprehensive Bootstrap 5 HTML Admin Dashboard Template built 40 | for developers, rich with features, and highly customizable look no further than Sneat. We’ve followed the 41 | highest industry standards to bring you the very best admin template that is not only fast and easy to use but 42 | highly scalable. Offering ultimate convenience and flexibility, you’ll be able to build whatever application you 43 | want with very little hassle. 44 |

45 | 46 | 47 |
48 |
49 |
50 |
Template Links
51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 |
Free VersionVertical Menu Template
60 | 61 |
62 |
63 | 64 |
65 |
66 |
Other Important Links
67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 83 | 84 | 85 | 86 | 87 | 94 | 95 | 96 | 97 | 98 | 105 | 106 | 107 | 108 | 109 | 114 | 115 | 116 | 117 | 118 | 123 | 124 | 125 |
NameURL
License 79 | https://themeselection.com/license/ 82 |
Documentation 88 | https://demos.themeselection.com/sneat-bootstrap-html-admin-template/documentation/ 93 |
Changelog 99 | https://github.com/themeselection/sneat-bootstrap-html-admin-template-free/blob/main/CHANGELOG.md 104 |
GitHub Repository 110 | https://github.com/themeselection/sneat-html-admin-template-free 113 |
Support 119 | https://github.com/themeselection/sneat-html-admin-template-free/issues 122 |
126 | 127 |
128 |
129 | 130 |
131 |

Looking for PRO version with Premium support?

132 |
133 | Upgrade to Sneat Pro 139 |
140 |
141 |
142 |
143 | 144 | 145 | 146 | -------------------------------------------------------------------------------- /js/bootstrap.js: -------------------------------------------------------------------------------- 1 | import * as bootstrap from 'bootstrap' 2 | 3 | try { 4 | window.bootstrap = bootstrap 5 | } catch (e) {} 6 | 7 | export { bootstrap } 8 | -------------------------------------------------------------------------------- /libs/apex-charts/apex-charts.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Apex Charts 3 | */ 4 | @import "../../scss/_bootstrap-extended/include"; 5 | @import "apexcharts/dist/apexcharts"; 6 | 7 | .apexcharts-canvas { 8 | .apexcharts-tooltip { 9 | box-shadow: var(--#{$prefix}box-shadow); 10 | &.apexcharts-theme-light { 11 | border-color: var(--#{$prefix}border-color); 12 | background: var(--#{$prefix}paper-bg); 13 | color: var(--#{$prefix}heading-color); 14 | 15 | .apexcharts-tooltip-title { 16 | background: var(--#{$prefix}paper-bg); 17 | border-block-end-color: var(--#{$prefix}border-color); 18 | font-family: $font-family-base !important; 19 | font-weight: $headings-font-weight; 20 | } 21 | } 22 | &.apexcharts-theme-dark { 23 | background: transparent; 24 | } 25 | } 26 | 27 | .apexcharts-xaxistooltip, 28 | .apexcharts-yaxistooltip { 29 | border-color: var(--#{$prefix}border-color); 30 | background: var(--#{$prefix}paper-bg); 31 | color: var(--#{$prefix}heading-color); 32 | 33 | &.apexcharts-xaxistooltip-bottom, 34 | &.apexcharts-yaxistooltip-bottom { 35 | &::after { 36 | border-block-end-color: var(--#{$prefix}paper-bg); 37 | } 38 | &::before { 39 | border-block-end-color: var(--#{$prefix}border-color); 40 | } 41 | } 42 | 43 | &.apexcharts-xaxistooltip-left, 44 | &.apexcharts-yaxistooltip-left { 45 | &::after { 46 | border-inline-start-color: var(--#{$prefix}paper-bg); 47 | } 48 | &::before { 49 | border-inline-start-color: var(--#{$prefix}border-color); 50 | } 51 | } 52 | 53 | &.apexcharts-xaxistooltip-right, 54 | &.apexcharts-yaxistooltip-right { 55 | &::after { 56 | border-inline-end-color: var(--#{$prefix}paper-bg); 57 | } 58 | &::before { 59 | border-inline-end-color: var(--#{$prefix}border-color); 60 | } 61 | } 62 | 63 | &.apexcharts-xaxistooltip-top, 64 | &.apexcharts-yaxistooltip-top { 65 | &::after { 66 | border-block-start-color: var(--#{$prefix}paper-bg); 67 | } 68 | &::before { 69 | border-block-start-color: var(--#{$prefix}border-color); 70 | } 71 | } 72 | } 73 | 74 | .apexcharts-tooltip-text { 75 | font-family: $font-family-base !important; 76 | } 77 | .apexcharts-legend-marker, 78 | .apexcharts-tooltip-marker { 79 | margin-inline: 0 .5rem; 80 | } 81 | } 82 | 83 | 84 | /* total-revenue card styles */ 85 | 86 | @media (min-width: 1400px) and (max-width: 1550px) { 87 | .total-revenue { 88 | inline-size: 100% !important; 89 | } 90 | .profile-report { 91 | inline-size: 100% !important; 92 | .payments, 93 | .transactions { 94 | inline-size: 25% !important; 95 | } 96 | .profile-report { 97 | inline-size: 50% !important; 98 | } 99 | } 100 | } 101 | -------------------------------------------------------------------------------- /libs/apex-charts/apexcharts.js: -------------------------------------------------------------------------------- 1 | import ApexCharts from 'apexcharts'; 2 | 3 | try { 4 | window.ApexCharts = ApexCharts; 5 | } catch (e) {} 6 | 7 | export { ApexCharts }; 8 | -------------------------------------------------------------------------------- /libs/highlight/highlight-github.scss: -------------------------------------------------------------------------------- 1 | @import "highlight.js/styles/github.css"; 2 | -------------------------------------------------------------------------------- /libs/highlight/highlight.js: -------------------------------------------------------------------------------- 1 | import hljs from 'highlight.js'; 2 | 3 | try { 4 | window.hljs = hljs; 5 | } catch (e) {} 6 | 7 | export { hljs }; 8 | -------------------------------------------------------------------------------- /libs/highlight/highlight.scss: -------------------------------------------------------------------------------- 1 | @import "highlight.js/styles/atom-one-light"; 2 | @import "highlight.js/styles/atom-one-dark"; 3 | -------------------------------------------------------------------------------- /libs/jquery/jquery.js: -------------------------------------------------------------------------------- 1 | import jQuery from 'jquery/dist/jquery'; 2 | 3 | const $ = jQuery; 4 | try { 5 | window.jQuery = window.$ = jQuery; 6 | } catch (e) {} 7 | 8 | export { jQuery, $ }; 9 | -------------------------------------------------------------------------------- /libs/masonry/masonry.js: -------------------------------------------------------------------------------- 1 | import Masonry from 'masonry-layout'; 2 | 3 | try { 4 | window.Masonry = Masonry; 5 | } catch (e) {} 6 | 7 | export { Masonry }; 8 | -------------------------------------------------------------------------------- /libs/perfect-scrollbar/perfect-scrollbar.js: -------------------------------------------------------------------------------- 1 | import PerfectScrollbar from 'perfect-scrollbar/dist/perfect-scrollbar'; 2 | 3 | try { 4 | window.PerfectScrollbar = PerfectScrollbar; 5 | } catch (e) {} 6 | 7 | export { PerfectScrollbar }; 8 | -------------------------------------------------------------------------------- /libs/perfect-scrollbar/perfect-scrollbar.scss: -------------------------------------------------------------------------------- 1 | @import "../../scss/_bootstrap-extended/include"; 2 | @import "perfect-scrollbar/css/perfect-scrollbar"; 3 | 4 | $ps-width: .25rem !default; 5 | $ps-hover-width: .375rem !default; 6 | 7 | 8 | .ps { 9 | position: relative; 10 | .ps__rail-x { 11 | block-size: $ps-width; 12 | } 13 | 14 | .ps__rail-y { 15 | z-index: 3; 16 | inline-size: $ps-width; 17 | } 18 | 19 | .ps__rail-x, 20 | .ps__rail-y, 21 | .ps__thumb-x, 22 | .ps__thumb-y { 23 | @include border-radius($border-radius-pill); 24 | } 25 | 26 | .ps__rail-x:hover, 27 | .ps__rail-x:focus, 28 | .ps__rail-x.ps--clicking, 29 | .ps__rail-x:hover > .ps__thumb-x, 30 | .ps__rail-x:focus > .ps__thumb-x, 31 | .ps__rail-x.ps--clicking > .ps__thumb-x { 32 | block-size: $ps-hover-width; 33 | } 34 | 35 | .ps__rail-y:hover, 36 | .ps__rail-y:focus, 37 | .ps__rail-y.ps--clicking, 38 | .ps__rail-y:hover > .ps__thumb-y, 39 | .ps__rail-y:focus > .ps__thumb-y, 40 | .ps__rail-y.ps--clicking > .ps__thumb-y { 41 | inline-size: $ps-hover-width; 42 | } 43 | 44 | .ps__thumb-x { 45 | block-size: $ps-width; 46 | inset-block-end: 0; 47 | } 48 | 49 | .ps__thumb-y { 50 | inline-size: $ps-width; 51 | inset-inline-end: 0; 52 | } 53 | .ps__thumb-x, 54 | .ps__thumb-y { 55 | background-color: var(--#{$prefix}gray-400); 56 | } 57 | 58 | .ps__rail-x:hover, 59 | .ps__rail-y:hover, 60 | .ps__rail-x:focus, 61 | .ps__rail-y:focus, 62 | .ps__rail-x.ps--clicking, 63 | .ps__rail-y.ps--clicking { 64 | background-color: var(--#{$prefix}gray-200); 65 | } 66 | 67 | .ps__rail-x:hover > .ps__thumb-x, 68 | .ps__rail-y:hover > .ps__thumb-y, 69 | .ps__rail-x:focus > .ps__thumb-x, 70 | .ps__rail-y:focus > .ps__thumb-y, 71 | .ps__rail-x.ps--clicking > .ps__thumb-x, 72 | .ps__rail-y.ps--clicking > .ps__thumb-y { 73 | background-color: var(--#{$prefix}gray-700); 74 | } 75 | } 76 | 77 | /* Firefox width issue fixed */ 78 | @supports (-moz-appearance: none) { 79 | #both-scrollbars-example { 80 | margin-block: 0; 81 | margin-inline: auto; 82 | max-inline-size: 1080px; 83 | padding-inline: 0; 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /libs/popper/popper.js: -------------------------------------------------------------------------------- 1 | import Popper from '@popperjs/core/dist/umd/popper.min'; 2 | 3 | // Required to enable animations on dropdowns/tooltips/popovers 4 | // Popper.Defaults.modifiers.computeStyle.gpuAcceleration = false 5 | 6 | try { 7 | window.Popper = Popper; 8 | } catch (e) {} 9 | 10 | export { Popper }; 11 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sneat-bootstrap-html-admin-template-free", 3 | "description": "Most Powerful & Comprehensive Free Bootstrap 5 HTML Admin Dashboard Template built for developers! 🚀", 4 | "license": "MIT", 5 | "version": "3.0.0", 6 | "author": { 7 | "name": "ThemeSelection", 8 | "url": "https://themeselection.com/" 9 | }, 10 | "bugs": { 11 | "url": "https://github.com/themeselection/sneat-html-admin-template-free/issues" 12 | }, 13 | "private": false, 14 | "repository": { 15 | "type": "git", 16 | "url": "git+https://github.com/themeselection/sneat-html-admin-template-free.git" 17 | }, 18 | "homepage": "https://themeselection.com/products/sneat-free-bootstrap-html-admin-template/", 19 | "keywords": [ 20 | "bootstrap", 21 | "front-end", 22 | "admin", 23 | "framework", 24 | "admin-dashboard", 25 | "webapp", 26 | "bootstrap5", 27 | "themeselection", 28 | "freebies" 29 | ], 30 | "scripts": { 31 | "build": "npx gulp build", 32 | "build:js": "npx gulp build:js", 33 | "build:css": "npx gulp build:css", 34 | "build:copy": "npx gulp build:copy", 35 | "build:prod": "npx gulp build --env=production", 36 | "build:prod:js": "npx gulp build:js --env=production", 37 | "build:prod:css": "npx gulp build:css --env=production", 38 | "build:prod:copy": "npx gulp build:copy --env=production", 39 | "watch": "npx gulp watch", 40 | "serve": "npx gulp serve", 41 | "format:scss": "npx stylelint --fix \"**/*.scss\"" 42 | }, 43 | "dependencies": { 44 | "@popperjs/core": "^2.11.8", 45 | "apexcharts": "~4.2.0", 46 | "bootstrap": "~5.3.3", 47 | "highlight.js": "~11.10.0", 48 | "@iconify/json": "^2.2.310", 49 | "@iconify/tools": "^4.1.1", 50 | "@iconify/types": "^2.0.0", 51 | "@iconify/utils": "^2.3.0", 52 | "jquery": "~3.7.1", 53 | "masonry-layout": "~4.2.2", 54 | "perfect-scrollbar": "~1.5.6" 55 | }, 56 | "devDependencies": { 57 | "@babel/core": "~7.23.9", 58 | "@babel/plugin-transform-destructuring": "~7.23.3", 59 | "@babel/plugin-transform-object-rest-spread": "7.23.4", 60 | "@babel/plugin-transform-template-literals": "~7.23.3", 61 | "@babel/preset-env": "~7.23.9", 62 | "@stylistic/stylelint-config": "^1.0.1", 63 | "@stylistic/stylelint-plugin": "^2.1.3", 64 | "ajv": "^8.17.1", 65 | "ansi-colors": "~4.1.3", 66 | "babel-loader": "~9.1.3", 67 | "browser-sync": "^3.0.3", 68 | "color-support": "~1.1.3", 69 | "css-loader": "~6.9.1", 70 | "deepmerge": "~4.3.1", 71 | "del": "~6.1.1", 72 | "eslint": "~9.16.0", 73 | "eslint-config-airbnb-base": "^15.0.0", 74 | "eslint-config-prettier": "^9.1.0", 75 | "eslint-plugin-import": "^2.31.0", 76 | "eslint-plugin-prettier": "^5.2.3", 77 | "fancy-log": "~2.0.0", 78 | "gulp": "~4.0.2", 79 | "gulp-autoprefixer": "~8.0.0", 80 | "gulp-dart-sass": "^1.1.0", 81 | "gulp-environment": "~1.5.2", 82 | "gulp-exec": "^5.0.0", 83 | "gulp-if": "~3.0.0", 84 | "gulp-purgecss": "^7.0.2", 85 | "gulp-rename": "~2.0.0", 86 | "gulp-replace": "~1.1.4", 87 | "gulp-sourcemaps": "~3.0.0", 88 | "gulp-uglify": "^3.0.2", 89 | "gulp-useref": "^5.0.0", 90 | "html-loader": "~4.2.0", 91 | "js-beautify": "^1.15.3", 92 | "prettier": "^3.5.2", 93 | "sass": "1.76.0", 94 | "sass-loader": "~14.0.0", 95 | "string-replace-webpack-plugin": "~0.1.3", 96 | "style-loader": "~3.3.4", 97 | "stylelint": "^16.14.1", 98 | "stylelint-config-idiomatic-order": "^10.0.0", 99 | "stylelint-config-standard-scss": "^13.1.0", 100 | "stylelint-use-logical-spec": "^5.0.1", 101 | "terser-webpack-plugin": "~5.3.10", 102 | "webpack": "~5.89.0", 103 | "prop-types": "15.8.1", 104 | "react": "*", 105 | "react-dom": "*", 106 | "yarn": "~1.22.22" 107 | }, 108 | "overrides": { 109 | "prop-types": "15.8.1", 110 | "sass": "1.76.0" 111 | }, 112 | "resolutions": { 113 | "prop-types": "15.8.1", 114 | "sass": "1.76.0", 115 | "react": "*", 116 | "react-dom": "*" 117 | }, 118 | "gulp-environment": { 119 | "environments": [ 120 | { 121 | "name": "development", 122 | "aliases": [ 123 | "dev" 124 | ] 125 | }, 126 | { 127 | "name": "production", 128 | "aliases": [ 129 | "prod" 130 | ] 131 | } 132 | ], 133 | "default": "development" 134 | } 135 | } -------------------------------------------------------------------------------- /scss/_bootstrap-extended.scss: -------------------------------------------------------------------------------- 1 | // Configuration 2 | @import "_bootstrap-extended/include"; 3 | @import "_bootstrap-extended/utilities"; 4 | 5 | // Layout & components 6 | @import "_bootstrap-extended/root"; 7 | @import "_bootstrap-extended/reboot"; 8 | @import "_bootstrap-extended/type"; 9 | @import "_bootstrap-extended/tables"; 10 | @import "_bootstrap-extended/forms"; 11 | @import "_bootstrap-extended/buttons"; 12 | @import "_bootstrap-extended/dropdown"; 13 | @import "_bootstrap-extended/button-group"; 14 | @import "_bootstrap-extended/nav"; 15 | @import "_bootstrap-extended/navbar"; 16 | @import "_bootstrap-extended/card"; 17 | @import "_bootstrap-extended/accordion"; 18 | @import "_bootstrap-extended/breadcrumb"; 19 | @import "_bootstrap-extended/pagination"; 20 | @import "_bootstrap-extended/badge"; 21 | @import "_bootstrap-extended/alert"; 22 | @import "_bootstrap-extended/progress"; 23 | @import "_bootstrap-extended/list-group"; 24 | @import "_bootstrap-extended/toasts"; 25 | @import "_bootstrap-extended/modal"; 26 | @import "_bootstrap-extended/tooltip"; 27 | @import "_bootstrap-extended/popover"; 28 | @import "_bootstrap-extended/carousel"; 29 | @import "_bootstrap-extended/spinners"; 30 | @import "_bootstrap-extended/offcanvas"; 31 | 32 | // Helpers 33 | @import "_bootstrap-extended/helpers"; 34 | 35 | // Utilities 36 | @import "bootstrap/scss/utilities/api"; 37 | -------------------------------------------------------------------------------- /scss/_bootstrap-extended/_accordion.scss: -------------------------------------------------------------------------------- 1 | // Accordions 2 | // ******************************************************************************* 3 | .accordion { 4 | --#{$prefix}accordion-box-shadow: #{$box-shadow-sm}; 5 | --#{$prefix}accordion-active-box-shadow: #{$box-shadow}; 6 | --#{$prefix}accordion-active-bg: var(--#{$prefix}accordion-bg); 7 | --#{$prefix}accordion-btn-active-bg: var(--#{$prefix}accordion-active-bg); 8 | --#{$prefix}accordion-btn-focus-box-shadow: none; 9 | --#{$prefix}accordion-btn-focus-shadow-width: 0; 10 | 11 | .accordion-button { 12 | &::after { 13 | background: var(--#{$prefix}accordion-btn-color); 14 | mask-image: var(--#{$prefix}accordion-btn-icon); 15 | mask-repeat: no-repeat; 16 | mask-size: 100% 100%; 17 | } 18 | &:not(.collapsed) { 19 | &::after { 20 | background: var(--#{$prefix}accordion-btn-color); 21 | mask-image: var(--#{$prefix}accordion-btn-active-icon); 22 | } 23 | } 24 | } 25 | 26 | &.accordion-without-arrow { 27 | .accordion-button::after { 28 | background: none; 29 | } 30 | } 31 | & .accordion-item { 32 | @include border-radius(var(--#{$prefix}accordion-border-radius)); 33 | > .accordion-header .accordion-button { 34 | @include border-radius(var(--#{$prefix}accordion-inner-border-radius)); 35 | } 36 | &:not(:first-of-type) { 37 | border-block-start: var(--#{$prefix}accordion-border-width) solid var(--#{$prefix}accordion-border-color); 38 | } 39 | &:not(:last-of-type) { 40 | margin-block-end: $spacer * .5; 41 | } 42 | } 43 | } 44 | 45 | .accordion-item { 46 | box-shadow: var(--#{$prefix}accordion-box-shadow); 47 | &.active { 48 | background-color: var(--#{$prefix}accordion-active-bg); 49 | box-shadow: var(--#{$prefix}accordion-active-box-shadow); 50 | } 51 | } 52 | 53 | .accordion-header { 54 | line-height: $line-height-base; 55 | & + .accordion-collapse .accordion-body { 56 | padding-block-start: 0; 57 | padding-inline-start: $accordion-padding-x; 58 | } 59 | } 60 | 61 | /* Accordion border radius */ 62 | .accordion-button { 63 | font-weight: inherit; 64 | padding-inline-end: 1.1875rem; 65 | &::after{ 66 | margin-inline-end: initial; 67 | margin-inline-start: auto; 68 | } 69 | &:not(.collapsed) { 70 | background-color: var(--#{$prefix}accordion-btn-active-bg); 71 | box-shadow: inset 0 calc(-1 * var(--#{$prefix}accordion-btn-focus-shadow-width)) 0 var(--#{$prefix}accordion-border-color); 72 | padding-block-end: .793rem; 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /scss/_bootstrap-extended/_alert.scss: -------------------------------------------------------------------------------- 1 | // Alerts 2 | // ******************************************************************************* 3 | 4 | /* Alert icon styles */ 5 | .alert { 6 | --#{$prefix}alert-link-hover-color: var(--#{$prefix}primary); 7 | --#{$prefix}alert-hr: var(--#{$prefix}black); 8 | --#{$prefix}alert-icon-color: var(--#{$prefix}white); 9 | --#{$prefix}alert-icon-bg: var(--#{$prefix}black); 10 | --#{$prefix}alert-icon-shadow-color: var(--#{$prefix}primary); 11 | --#{$prefix}alert-icon-shadow-scale: 16%; 12 | --#{$prefix}alert-close-icon: var(--#{$prefix}black); 13 | line-height: 1.375rem; 14 | &[class*="alert-"] { 15 | hr { 16 | background-color: var(--#{$prefix}alert-hr); 17 | color: var(--#{$prefix}alert-hr); 18 | } 19 | } 20 | .alert-link { 21 | &:hover { 22 | color: var(--#{$prefix}alert-link-hover-color); 23 | } 24 | } 25 | } 26 | 27 | /* Adjust close link position */ 28 | .alert-dismissible { 29 | padding-inline-end: $alert-dismissible-padding-r; 30 | padding-inline-start: $alert-padding-x; 31 | .btn-close { 32 | padding: 0; 33 | background: var(--#{$prefix}alert-close-icon); 34 | block-size: .8125rem; 35 | filter: none; 36 | inline-size: .8125rem; 37 | inset-inline: auto 0; 38 | margin-block: calc(#{$alert-padding-y} * 1.37); 39 | margin-inline: calc(#{$alert-padding-x} * .9); 40 | mask-image: str-replace($btn-close-bg, "#{$btn-close-color}", currentColor); 41 | mask-repeat: no-repeat; 42 | mask-size: 100% 100%; 43 | } 44 | } 45 | 46 | // scss-docs-start alert-modifiers 47 | 48 | // Generate contextual modifier classes for colorizing the alert 49 | @each $state in map-keys($theme-colors) { 50 | .alert-#{$state} { 51 | @if $state == "light" { 52 | --#{$prefix}alert-color: var(--#{$prefix}#{$state}-contrast); 53 | --#{$prefix}alert-close-icon: var(--#{$prefix}#{$state}-contrast); 54 | } @else { 55 | --#{$prefix}alert-color: var(--#{$prefix}#{$state}); 56 | --#{$prefix}alert-close-icon: var(--#{$prefix}#{$state}); 57 | } 58 | --#{$prefix}alert-icon-shadow-color: var(--#{$prefix}#{$state}-rgb); 59 | --#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-bg-subtle); 60 | --#{$prefix}alert-link-color: var(--#{$prefix}#{$state}); 61 | --#{$prefix}alert-link-hover-color: var(--#{$prefix}#{$state}); 62 | --#{$prefix}alert-hr: var(--#{$prefix}#{$state}); 63 | --#{$prefix}alert-icon-bg: var(--#{$prefix}#{$state}); 64 | } 65 | } 66 | 67 | // scss-docs-end alert-modifiers 68 | -------------------------------------------------------------------------------- /scss/_bootstrap-extended/_badge.scss: -------------------------------------------------------------------------------- 1 | // Badges 2 | // ? Bootstrap use bg-label-variant and bg color for solid and label style, hence we have not created mixin for that. 3 | // ******************************************************************************* 4 | 5 | .badge { 6 | --#{$prefix}badge-border-width: #{$badge-border-width}; 7 | --#{$prefix}badge-border-color: var(--#{$prefix}primary); 8 | --#{$prefix}badge-bg-color: #{$badge-bg-color}; 9 | border: var(--#{$prefix}badge-border-width) var(--#{$prefix}border-style) var(--#{$prefix}badge-border-color); 10 | background-color: var(--#{$prefix}badge-bg-color); 11 | } 12 | 13 | /* Badge Center Style */ 14 | 15 | .badge-center { 16 | display: inline-flex; 17 | align-items: center; 18 | justify-content: center; 19 | padding: 0; 20 | block-size: #{$badge-height}; 21 | inline-size: #{$badge-width}; 22 | --#{$prefix}badge-font-size: #{$badge-center-font-size}; 23 | .icon-base { 24 | @include icon-base(.875rem); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /scss/_bootstrap-extended/_breadcrumb.scss: -------------------------------------------------------------------------------- 1 | // Breadcrumbs 2 | // ******************************************************************************* 3 | 4 | 5 | .breadcrumb { 6 | --#{$prefix}breadcrumb-color: #{$breadcrumb-color}; 7 | } 8 | 9 | .breadcrumb-item { 10 | line-height: 1.5rem; 11 | a { 12 | color: var(--#{$prefix}breadcrumb-color); 13 | 14 | &:hover, 15 | &:focus { 16 | color: var(--#{$prefix}breadcrumb-item-active-color); 17 | } 18 | } 19 | .icon-base.breadcrumb-icon { 20 | color: var(--#{$prefix}breadcrumb-divider-color); 21 | margin-inline-start: $breadcrumb-item-padding-x; 22 | } 23 | } 24 | 25 | .breadcrumb-item.active a { 26 | &, 27 | &:hover, 28 | &:focus, 29 | &:active { 30 | color: inherit; 31 | } 32 | } 33 | 34 | .breadcrumb-custom-icon .breadcrumb-item + .breadcrumb-item::before { 35 | content: none !important; 36 | } 37 | -------------------------------------------------------------------------------- /scss/_bootstrap-extended/_button-group.scss: -------------------------------------------------------------------------------- 1 | // Button groups 2 | // ******************************************************************************* 3 | 4 | .btn-group { 5 | --#{$prefix}btn-group-border-radius: #{$btn-border-radius}; 6 | 7 | &.btn-group-sm { 8 | --#{$prefix}btn-group-border-radius: #{$btn-border-radius-sm}; 9 | } 10 | &.btn-group-xs { 11 | --#{$prefix}btn-group-border-radius: #{$btn-border-radius-xs}; 12 | } 13 | &.btn-group-lg { 14 | --#{$prefix}btn-group-border-radius: #{$btn-border-radius-lg}; 15 | } 16 | &.btn-group-xl { 17 | --#{$prefix}btn-group-border-radius: #{$btn-border-radius-xl}; 18 | } 19 | 20 | > :not(.btn-check:first-child) + .btn, 21 | > .btn-group:not(:first-child) { 22 | margin: 0; 23 | margin-inline-start: calc(#{$btn-border-width} * -1); 24 | } 25 | &:not(.btn-group-vertical) { 26 | 27 | > .btn:not(:last-child):not(.dropdown-toggle), 28 | > .btn.dropdown-toggle-split:first-child, 29 | > .btn-group:not(:last-child) > .btn, 30 | > .btn:nth-child(n + 3), 31 | > :not(.btn-check) + .btn, 32 | > .btn-group:not(:first-child) > .btn { 33 | @include border-radius(var(--#{$prefix}btn-group-border-radius)); 34 | } 35 | 36 | > .btn:not(:last-child):not(.dropdown-toggle), 37 | > .btn.dropdown-toggle-split:first-child, 38 | > .btn-group:not(:last-child) > .btn { 39 | border-end-end-radius: 0 !important; 40 | border-start-end-radius: 0 !important; 41 | } 42 | 43 | > .btn:nth-child(n + 3), 44 | > :not(.btn-check) + .btn, 45 | > .btn-group:not(:first-child) > .btn { 46 | border-end-start-radius: 0 !important; 47 | border-start-start-radius: 0 !important; 48 | } 49 | } 50 | 51 | &.btn-group-vertical { 52 | > :not(.btn-check:first-child) + .btn, 53 | > .btn-group:not(:first-child) { 54 | margin: 0; 55 | margin-block-start: calc(#{$btn-border-width} * -1); 56 | } 57 | .btn:not([class*="btn-outline-"]) { 58 | border-inline-color: var(--#{$prefix}btn-bg); 59 | &:hover { 60 | border-inline-color: var(--#{$prefix}btn-hover-bg); 61 | } 62 | } 63 | > .btn:first-child, 64 | > .btn.dropdown-toggle-split:first-child, 65 | > .btn-group:first-child > .btn { 66 | @include border-top-radius(var(--#{$prefix}btn-group-border-radius)); 67 | } 68 | > .btn:last-child, 69 | > .btn.dropdown-toggle-split:last-child, 70 | > .btn-group:last-child > .btn { 71 | @include border-bottom-radius(var(--#{$prefix}btn-group-border-radius)); 72 | } 73 | } 74 | } 75 | 76 | // Split button 77 | // ******************************************************************************* 78 | 79 | .dropdown-toggle-split, 80 | .btn-lg + .dropdown-toggle-split, 81 | .btn-group-lg > .btn + .dropdown-toggle-split, 82 | .input-group-lg .btn + .dropdown-toggle-split, 83 | .btn-xl + .dropdown-toggle-split, 84 | .btn-group-xl > .btn + .dropdown-toggle-split { 85 | padding-inline: .92em; 86 | } 87 | 88 | .btn-sm + .dropdown-toggle-split, 89 | .btn-group-sm > .btn + .dropdown-toggle-split, 90 | .input-group-sm .btn + .dropdown-toggle-split { 91 | padding-inline: .6em; 92 | } 93 | 94 | .btn-xs + .dropdown-toggle-split, 95 | .btn-group-xs > .btn + .dropdown-toggle-split { 96 | padding-inline: .5em; 97 | } 98 | 99 | // Sizing 100 | // ******************************************************************************* 101 | 102 | .btn-group-xs > .btn { 103 | @extend .btn-xs; 104 | } 105 | 106 | .btn-group-xl > .btn { 107 | @extend .btn-xl; 108 | } 109 | 110 | /* Button groups border */ 111 | 112 | .btn-group:not(.btn-group-vertical) > .btn-group:first-child > .btn:not([class*="btn-outline-"]):first-child, 113 | .input-group > .btn:not([class*="btn-outline-"]):first-child, 114 | :not(.btn-group, .input-group) > .btn-group:not(.btn-group-vertical) > .btn:not([class*="btn-outline-"]):first-child, 115 | .input-group > .btn-group:first-child > .btn:not([class*="btn-outline-"]):first-child { 116 | border-inline-start-color: transparent; 117 | } 118 | 119 | .btn-group:not(.btn-group-vertical) > .btn-group:last-child > .btn:not([class*="btn-outline-"]):last-of-type, 120 | .input-group > .btn:not([class*="btn-outline-"]):last-of-type, 121 | :not(.btn-group, .input-group) > .btn-group:not(.btn-group-vertical) > .btn:not([class*="btn-outline-"]):last-of-type, 122 | .input-group > .btn-group:last-child > .btn:not([class*="btn-outline-"]):last-of-type { 123 | border-inline-end-color: transparent; 124 | } 125 | 126 | .btn-group-vertical > .btn-group-vertical:first-child > .btn:not([class*="btn-outline-"]):first-child, 127 | :not(.btn-group-vertical, .input-group) > .btn-group-vertical > .btn:not([class*="btn-outline-"]):first-child { 128 | border-block-start-color: transparent; 129 | } 130 | 131 | .btn-group-vertical > .btn-group-vertical:last-child > .btn:not([class*="btn-outline-"]):last-of-type, 132 | :not(.btn-group-vertical, .input-group) > .btn-group-vertical > .btn:not([class*="btn-outline-"]):last-of-type { 133 | border-block-end-color: transparent; 134 | } 135 | -------------------------------------------------------------------------------- /scss/_bootstrap-extended/_card.scss: -------------------------------------------------------------------------------- 1 | // Cards 2 | // ******************************************************************************* 3 | 4 | .card { 5 | --#{$prefix}card-hover-box-shadow: #{$box-shadow-lg}; 6 | --#{$prefix}card-border-bottom-color: #{$card-border-color}; 7 | --#{$prefix}card-subtitle-color: #{$card-subtitle-color}; 8 | box-shadow: var(--#{$prefix}card-box-shadow); 9 | 10 | .card-header + .card-body, 11 | .card-header + .card-content > .card-body:first-of-type, 12 | .card-header + .card-footer, 13 | .card-body + .card-footer { 14 | padding-block-start: 0; 15 | } 16 | 17 | .card-header, 18 | .card-footer { 19 | --#{$prefix}card-border-width: #{$card-border-width}; 20 | } 21 | 22 | .card-link { 23 | display: inline-block; 24 | + .card-link { 25 | margin-inline: $card-spacer-x 0; 26 | } 27 | } 28 | 29 | hr { 30 | color: var(--#{$prefix}card-border-color); 31 | } 32 | 33 | /* List groups */ 34 | > .list-group { 35 | border-block-end-width: $border-width; 36 | border-block-start-width: $border-width; 37 | .list-group-item { 38 | padding-inline: $card-spacer-x; 39 | } 40 | } 41 | 42 | .collapse > .card-body, 43 | .collapsing > .card-body { 44 | padding-block-start: 0; 45 | } 46 | } 47 | 48 | /* card-subtitle */ 49 | .card-subtitle { 50 | font-weight: $font-weight-normal; 51 | } 52 | 53 | /* adding class with card background color */ 54 | .bg-card { 55 | background-color: var(--#{$prefix}card-bg); 56 | } 57 | 58 | /* Card header elements 59 | ******************************************************** */ 60 | .card-title { 61 | &:not(:is(h1, h2, h3, h4, h5, h6)) { 62 | color: var(--#{$prefix}body-color); 63 | } 64 | } 65 | 66 | /* Horizontal card radius issue fix 67 | ******************************************************** */ 68 | .card-img-left, 69 | .card-img-right { 70 | block-size: 100%; 71 | object-fit: cover; 72 | } 73 | .card-img-left { 74 | @include border-start-radius($card-inner-border-radius); 75 | @include border-end-radius(0); 76 | 77 | @include media-breakpoint-down(md) { 78 | @include border-top-radius($card-inner-border-radius); 79 | @include border-bottom-radius(0); 80 | } 81 | } 82 | 83 | .card-img-right { 84 | @include border-end-radius($card-inner-border-radius); 85 | @include border-start-radius(0); 86 | @include media-breakpoint-down(md) { 87 | @include border-bottom-radius($card-inner-border-radius); 88 | @include border-top-radius(0); 89 | } 90 | } 91 | 92 | // Card group 93 | // ******************************************************** 94 | .card-group { 95 | --#{$prefix}card-box-shadow: #{$card-box-shadow}; 96 | --#{$prefix}card-bg: #{$card-bg}; 97 | @include media-breakpoint-up(sm) { 98 | @include border-radius($card-border-radius); 99 | background-color: var(--#{$prefix}card-bg); 100 | box-shadow: var(--#{$prefix}card-box-shadow); 101 | .card { 102 | box-shadow: none; 103 | + .card { 104 | border: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color); 105 | border-inline-start: 0; 106 | margin-inline: 0; 107 | } 108 | .card-img-top, 109 | .card-header, 110 | .card-img-bottom, 111 | .card-footer { 112 | @include border-radius(0); 113 | } 114 | &:is(:last-child) { 115 | .card-img-top, 116 | .card-header { 117 | @include border-top-end-radius($card-border-radius); 118 | } 119 | .card-img-bottom, 120 | .card-footer { 121 | @include border-bottom-end-radius($card-border-radius); 122 | } 123 | } 124 | &:is(:first-child) { 125 | .card-img-top, 126 | .card-header { 127 | @include border-top-start-radius($card-border-radius); 128 | } 129 | .card-img-bottom, 130 | .card-footer { 131 | @include border-bottom-start-radius($card-border-radius); 132 | } 133 | } 134 | } 135 | } 136 | } 137 | 138 | /* Card action */ 139 | .card-action { 140 | /* Card header */ 141 | .card-header { 142 | display: flex; 143 | &.collapsed { 144 | border-block-end: 0; 145 | } 146 | } 147 | 148 | .collapse > .card-body, 149 | .collapsing > .card-body { 150 | padding-block-start: 0; 151 | } 152 | } 153 | -------------------------------------------------------------------------------- /scss/_bootstrap-extended/_carousel.scss: -------------------------------------------------------------------------------- 1 | // Carousel 2 | // ******************************************************************************* 3 | 4 | .carousel { 5 | .carousel-item.active, 6 | .carousel-item.carousel-item-start { 7 | h1, 8 | .h1, 9 | h2, 10 | .h2, 11 | h3, 12 | .h3, 13 | h4, 14 | .h4, 15 | h5, 16 | .h5, 17 | h6, 18 | .h6 { 19 | color: $carousel-caption-color; 20 | } 21 | } 22 | .carousel-control-prev-icon, 23 | .carousel-control-next-icon { 24 | filter: invert(1); 25 | } 26 | } 27 | 28 | .carousel.carousel-dark { 29 | .carousel-item.active, 30 | .carousel-item.carousel-item-start { 31 | h1, 32 | .h1, 33 | h2, 34 | .h2, 35 | h3, 36 | .h3, 37 | h4, 38 | .h4, 39 | h5, 40 | .h5, 41 | h6, 42 | .h6 { 43 | color: $carousel-dark-caption-color; 44 | } 45 | } 46 | .carousel-control-prev-icon, 47 | .carousel-control-next-icon { 48 | filter: invert(0); 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /scss/_bootstrap-extended/_dropdown.scss: -------------------------------------------------------------------------------- 1 | // Dropdowns 2 | // ***************************************************************** 3 | 4 | .dropdown-menu { 5 | box-shadow: var(--#{$prefix}dropdown-box-shadow); 6 | margin-block-start: 1px !important; 7 | 8 | text-align: start; 9 | > li:not(.disabled) > a:not(.dropdown-item):active, 10 | > li:not(.disabled) > a:not(.dropdown-item).active, 11 | > li.active:not(.disabled) > a:not(.dropdown-item) { 12 | background-color: var(--#{$prefix}dropdown-link-active-bg); 13 | color: var(--#{$prefix}dropdown-link-active-color); 14 | } 15 | } 16 | 17 | .btn-xs.dropdown-toggle::after { 18 | @include caret-down(.45em); 19 | } 20 | 21 | /* Split dropdowns */ 22 | .dropdown-toggle-split { 23 | &::after, 24 | .dropup &::after, 25 | .dropend &::after { 26 | margin-inline: 0; 27 | } 28 | .dropstart &::before { 29 | margin-inline: 0; 30 | } 31 | } 32 | 33 | /* Dropdown item line height */ 34 | .dropdown-item { 35 | li:not(:first-child) &, 36 | .dropdown-menu &:not(:first-child) { 37 | margin-block-start: 2px; 38 | } 39 | &.text-danger:active { 40 | color: var(--#{$prefix}primary) !important; 41 | } 42 | } 43 | 44 | /* Hidden dropdown toggle arrow */ 45 | .dropdown-toggle.hide-arrow, 46 | .dropdown-toggle-hide-arrow > .dropdown-toggle { 47 | &::before, 48 | &::after { 49 | display: none; 50 | } 51 | } 52 | 53 | @each $breakpoint in map-keys($grid-breakpoints) { 54 | @include media-breakpoint-up($breakpoint) { 55 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints); 56 | 57 | .dropdown-menu#{$infix}-start { 58 | --bs-position: start; 59 | &[data-bs-popper] { 60 | inset-inline: 0 auto; 61 | } 62 | } 63 | 64 | .dropdown-menu#{$infix}-end { 65 | --bs-position: end; 66 | &[data-bs-popper] { 67 | inset-inline: auto 0; 68 | } 69 | } 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /scss/_bootstrap-extended/_forms.scss: -------------------------------------------------------------------------------- 1 | // Forms 2 | // ***************************************************************** 3 | 4 | @import "forms/labels"; 5 | @import "forms/form-control"; 6 | @import "forms/form-select"; 7 | @import "forms/form-check"; 8 | @import "forms/form-range"; 9 | @import "forms/input-group"; 10 | @import "forms/floating-labels"; 11 | -------------------------------------------------------------------------------- /scss/_bootstrap-extended/_functions.scss: -------------------------------------------------------------------------------- 1 | // Functions 2 | 3 | // Remove the unit of a length 4 | @function strip-unit($number) { 5 | @if type-of($number) == "number" and not unitless($number) { 6 | @return divide($number, ($number * 0 + 1)); 7 | } 8 | 9 | @return $number; 10 | } 11 | 12 | // Convert size px to rem 13 | @function px-to-rem($value) { 14 | // Assumes the browser default font size = `16px` 15 | @return (divide(strip-unit($value), 16)) * 1rem; 16 | } 17 | 18 | // Convert size rem to px 19 | @function rem-to-px($value) { 20 | // Assumes the browser default font size = `16px` 21 | @return (strip-unit($value) * 16) * 1px; 22 | } 23 | 24 | // Colors 25 | // ******************************************************************************* 26 | 27 | // ? Override shade, tint and shift function with custom background color option i.e $card-bg to make it similar like design 28 | // Shade a color: mix a color with background/white 29 | @function tint-color($color, $weight, $background: null) { 30 | $background: if($background, $background, #fff); 31 | 32 | @return mix($background, $color, $weight); 33 | } 34 | 35 | // Shade a color: mix a color with background/black 36 | @function shade-color($color, $weight, $background: null) { 37 | $background: if($background, $background, #000); 38 | 39 | @return mix($background, $color, $weight); 40 | } 41 | 42 | // Shade the color if the weight is positive, else tint it 43 | @function shift-color($color, $weight, $background: null) { 44 | @return if($weight > 0, shade-color($color, $weight, $background), tint-color($color, -$weight)); 45 | } 46 | 47 | 48 | // RGBA to HEX 49 | @function rgba-to-hex($color, $background: #fff) { 50 | @if $color and alpha($color) != 1 { 51 | $percent: alpha($color) * 100%; 52 | $opaque: opacify($color, 1); 53 | 54 | @return mix($opaque, $background, $percent); 55 | } @else { 56 | @return $color; 57 | } 58 | } 59 | 60 | // Calculating Color Contrast 61 | @function contrast-value($color) { 62 | @if $color == transparent { 63 | @return $body-color; 64 | } @else if alpha($color) != 1 { 65 | $color: rgba-to-hex($color); 66 | } 67 | 68 | $r: red($color); 69 | $g: green($color); 70 | $b: blue($color); 71 | 72 | @return divide((($r * 299) + ($g * 587) + ($b * 114)), 1000); 73 | } 74 | -------------------------------------------------------------------------------- /scss/_bootstrap-extended/_helpers.scss: -------------------------------------------------------------------------------- 1 | @import "helpers/color-bg"; 2 | -------------------------------------------------------------------------------- /scss/_bootstrap-extended/_include.scss: -------------------------------------------------------------------------------- 1 | // Functions 2 | @import "bootstrap/scss/functions"; // Bootstrap core functions 3 | @import "functions"; // Bootstrap extended functions 4 | 5 | // Variables 6 | @import "../_custom-variables/bootstrap-extended"; // Bootstrap extended custom variable (for customization purpose) 7 | @import "variables"; // Bootstrap extended variable 8 | @import "bootstrap/scss/variables"; // Bootstrap core variable 9 | @import "bootstrap/scss/maps"; // Bootstrap core maps 10 | 11 | // Mixins 12 | @import "bootstrap/scss/mixins"; // Bootstrap core mixins 13 | @import "mixins"; // Bootstrap extended mixins 14 | -------------------------------------------------------------------------------- /scss/_bootstrap-extended/_list-group.scss: -------------------------------------------------------------------------------- 1 | /* List groups 2 | ******************************************************************************* */ 3 | 4 | /* List Group Mixin */ 5 | .list-group { 6 | --#{$prefix}list-group-timeline-bg: var(--#{$prefix}primary); 7 | --#{$prefix}list-group-border-color: var(--#{$prefix}border-color); 8 | --#{$prefix}list-group-active-border-color: var(--#{$prefix}border-color); 9 | --#{$prefix}list-group-action-hover-color: var(--#{$prefix}body-color); 10 | --#{$prefix}list-group-action-active-color: var(--#{$prefix}body-color); 11 | --#{$prefix}list-group-active-bg: var(--#{$prefix}primary-bg-subtle); 12 | 13 | 14 | .list-group-item { 15 | line-height: 1.375rem; 16 | padding-block-end: calc($list-group-item-padding-y - 1px); 17 | } 18 | &:not([class*="list-group-flush"]) .list-group-item:first-of-type { 19 | padding-block-start: calc($list-group-item-padding-y - 1px); 20 | } 21 | &[class*="list-group-flush"] .list-group-item:last-of-type { 22 | padding-block-end: $list-group-item-padding-y; 23 | } 24 | &[class*="list-group-horizontal-md"] .list-group-item { 25 | @include media-breakpoint-up(md) { 26 | padding-block-start: calc($list-group-item-padding-y - 1px); 27 | } 28 | } 29 | 30 | .list-group-item.active { 31 | h1, 32 | .h1, 33 | h2, 34 | .h2, 35 | h3, 36 | .h3, 37 | h4, 38 | .h4, 39 | h5, 40 | .h5, 41 | h6, 42 | .h6 { 43 | color: var(--#{$prefix}primary); 44 | } 45 | &, 46 | &:hover, 47 | &:focus { 48 | --#{$prefix}list-group-color: var(--#{$prefix}white); 49 | } 50 | } 51 | } 52 | 53 | // scss-docs-start list-group-modifiers 54 | 55 | @each $state in map-keys($theme-colors) { 56 | .list-group-item-#{$state} { 57 | --#{$prefix}list-group-border-color: var(--#{$prefix}#{$state}); 58 | --#{$prefix}list-group-active-border-color: var(--#{$prefix}#{$state}); 59 | --#{$prefix}list-group-active-bg: var(--#{$prefix}#{$state}-bg-subtle); 60 | --#{$prefix}list-group-color: var(--#{$prefix}#{$state}-text-emphasis); 61 | --#{$prefix}list-group-action-hover-color: var(--#{$prefix}#{$state}-text-emphasis); 62 | --#{$prefix}list-group-action-active-color: var(--#{$prefix}#{$state}-text-emphasis); 63 | } 64 | } 65 | 66 | // scss-docs-end list-group-modifiers 67 | -------------------------------------------------------------------------------- /scss/_bootstrap-extended/_mixins.scss: -------------------------------------------------------------------------------- 1 | // Mixins - Template mixins (custom and overrides) 2 | @import "mixins/caret"; 3 | @import "mixins/misc"; 4 | @import "mixins/border-radius"; 5 | -------------------------------------------------------------------------------- /scss/_bootstrap-extended/_modal.scss: -------------------------------------------------------------------------------- 1 | /* Modals 2 | ******************************************************************************* */ 3 | 4 | /* Modal Shadow */ 5 | .modal-content { 6 | box-shadow: var(--#{$prefix}modal-box-shadow); 7 | } 8 | 9 | .modal { 10 | .btn-close { 11 | padding: .563rem; 12 | background-color: var(--#{$prefix}paper-bg); 13 | background-image: none; 14 | box-shadow: var(--#{$prefix}box-shadow-xs); 15 | filter: none; 16 | opacity: 1; 17 | transform: translate(23px, -25px); 18 | @include border-radius($border-radius-sm); 19 | @include transition(all .23s ease .1s); 20 | 21 | /* For hover effect of close btn */ 22 | &:hover, 23 | &:focus, 24 | &:active { 25 | opacity: 1; 26 | outline: 0; 27 | transform: translate(20px, -20px); 28 | } 29 | &::before{ 30 | display: block; 31 | background-color: var(--#{$prefix}secondary-color); 32 | block-size: .6875rem; 33 | content: ""; 34 | inline-size: .6875rem; 35 | mask-image: str-replace(str-replace($btn-close-bg, "#{$btn-close-color}", currentColor), "#", "%23"); 36 | mask-repeat: no-repeat; 37 | mask-size: 100% 100%; 38 | } 39 | } 40 | .modal-header { 41 | position: relative; 42 | .btn-close { 43 | position: absolute; 44 | inset-block-start: $modal-dialog-margin - .5625rem; 45 | inset-inline-end: $modal-dialog-margin - .6875rem; 46 | } 47 | } 48 | 49 | /* modal footer */ 50 | .modal-footer { 51 | padding: $modal-footer-padding; 52 | > * { 53 | margin-block: 0; 54 | &:last-child { 55 | margin-inline-end: 0; 56 | } 57 | &:first-child { 58 | margin-inline-start: 0; 59 | } 60 | } 61 | } 62 | 63 | /* 64 | ! remove close button animation & shadow for .modal-dialog-scrollable, .modal-fullscreen, .modal-top modal */ 65 | .modal-dialog-scrollable, 66 | .modal-fullscreen, 67 | &.modal-top { 68 | .btn-close { 69 | box-shadow: none; 70 | transform: translate(0, 0); 71 | &:hover { 72 | transform: translate(0, 0); 73 | } 74 | } 75 | } 76 | } 77 | 78 | /* Top modals 79 | ******************************************************************************* */ 80 | 81 | .modal-top { 82 | .modal-dialog { 83 | margin-block-start: 0; 84 | } 85 | 86 | .modal-content { 87 | @include border-top-radius(0); 88 | } 89 | } 90 | 91 | /* Modal Animations 92 | ****************************************************************************** */ 93 | 94 | /* Slide from Top */ 95 | .modal-top.fade .modal-dialog, 96 | .modal-top .modal.fade .modal-dialog { 97 | transform: translateY(-100%); 98 | } 99 | 100 | .modal-top.show .modal-dialog, 101 | .modal-top .modal.show .modal-dialog { 102 | transform: translateY(0); 103 | } 104 | 105 | /* Responsive 106 | ******************************************************************************* */ 107 | 108 | @include media-breakpoint-down(md) { 109 | .modal { 110 | .modal-dialog:not(.modal-fullscreen) { 111 | padding-block: 0; 112 | padding-inline: .75rem; 113 | } 114 | } 115 | } 116 | 117 | @include media-breakpoint-up(sm) { 118 | .modal-content { 119 | box-shadow: var(--#{$prefix}modal-box-shadow); 120 | } 121 | 122 | .modal-dialog.modal-sm { 123 | max-inline-size: $modal-sm; 124 | } 125 | } 126 | 127 | @include media-breakpoint-up(xl) { 128 | .modal-xl .modal-dialog { 129 | max-inline-size: $modal-xl; 130 | } 131 | } 132 | -------------------------------------------------------------------------------- /scss/_bootstrap-extended/_navbar.scss: -------------------------------------------------------------------------------- 1 | /* Navbar 2 | ******************************************************************************* */ 3 | .layout-navbar { 4 | background-color: var(--#{$prefix}paper-bg); 5 | } 6 | 7 | /* IE fix */ 8 | 9 | .navbar { 10 | &.bg-body-tertiary { 11 | --#{$prefix}navbar-color: var(--#{$prefix}body-color); 12 | --#{$prefix}navbar-hover-color: var(--#{$prefix}heading-color); 13 | --#{$prefix}navbar-disabled-color: color-mix(in sRGB, var(--#{$prefix}base-color) 40%, var(--#{$prefix}paper-bg)); 14 | --#{$prefix}navbar-active-color: var(--#{$prefix}heading-color); 15 | --#{$prefix}navbar-brand-color: var(--#{$prefix}heading-color); 16 | --#{$prefix}navbar-brand-hover-color: color-mix(in sRGB, var(--#{$prefix}base-color) 70%, var(--#{$prefix}paper-bg)); 17 | } 18 | &.bg-light { 19 | --#{$prefix}navbar-color: var(--#{$prefix}body-color); 20 | --#{$prefix}navbar-hover-color: var(--#{$prefix}heading-color); 21 | --#{$prefix}navbar-disabled-color: color-mix(in sRGB, var(--#{$prefix}base-color) 40%, var(--#{$prefix}paper-bg)); 22 | --#{$prefix}navbar-active-color: var(--#{$prefix}heading-color); 23 | --#{$prefix}navbar-brand-color: var(--#{$prefix}heading-color); 24 | --#{$prefix}navbar-brand-hover-color: color-mix(in sRGB, var(--#{$prefix}base-color) 70%, var(--#{$prefix}paper-bg)); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /scss/_bootstrap-extended/_offcanvas.scss: -------------------------------------------------------------------------------- 1 | /* Offcanvas 2 | ******************************************************************************* */ 3 | 4 | .offcanvas { 5 | box-shadow: var(--#{$prefix}offcanvas-box-shadow); 6 | .offcanvas-header { 7 | padding-block-end: $offcanvas-padding-y * .5; 8 | } 9 | } 10 | 11 | /* styles for dark offcanvas */ 12 | [data-bs-theme="dark"].offcanvas { 13 | background-color: #2b2c40; 14 | color: #b2b2c4; 15 | .offcanvas-title { 16 | color: #d5d5e2; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /scss/_bootstrap-extended/_pagination.scss: -------------------------------------------------------------------------------- 1 | /* Pagination 2 | ******************************************************************************* */ 3 | 4 | .pagination { 5 | --#{$prefix}pagination-box-shadow-color: #{$pagination-box-shadow-color}; 6 | padding-inline-start: 0; 7 | .page-link { 8 | border-color: transparent; 9 | } 10 | &.pagination-lg { 11 | --#{$prefix}pagination-font-size: #{$font-size-lg}; 12 | } 13 | &.pagination-sm { 14 | --#{$prefix}pagination-font-size: #{$font-size-sm}; 15 | } 16 | .page-item .page-link, 17 | & li > a:not(.page-link) { 18 | &:focus { 19 | color: var(--#{$prefix}pagination-focus-color); 20 | } 21 | } 22 | .page-item.active .page-link, 23 | & li.active > a:not(.page-link) { 24 | box-shadow: 0 .125rem .25rem 0 rgba(var(--#{$prefix}pagination-box-shadow-color), .4); 25 | color: var(--#{$prefix}pagination-active-color); 26 | } 27 | } 28 | 29 | /* Pagination next, prev, first & last css padding */ 30 | .page-item { 31 | &.disabled, 32 | &[disabled] { 33 | .page-link { 34 | opacity: $pagination-disabled-opacity; 35 | pointer-events: none; 36 | } 37 | } 38 | } 39 | .page-item:last-child .icon-base { 40 | transform: translateX(7%); 41 | } 42 | 43 | /* Pagination basic style */ 44 | .page-link, 45 | .page-link > a { 46 | @include border-radius($border-radius); 47 | display: inline-flex !important; 48 | align-items: center; 49 | justify-content: center; 50 | min-block-size: 51 | calc( 52 | #{"#{($font-size-base * $pagination-line-height) + ($pagination-padding-y * 2)} + calc(#{$pagination-border-width} * 2)"} 53 | ); 54 | min-inline-size: 55 | calc( 56 | #{"#{($font-size-base * $pagination-line-height) + ($pagination-padding-x * 1.923)} + calc(#{$pagination-border-width} * 2)"} 57 | ); 58 | } 59 | 60 | /* Sizing 61 | ******************************************************************************* */ 62 | 63 | /* Pagination Large */ 64 | .pagination-lg .page-link, 65 | .pagination-lg > li > a:not(.page-link) { 66 | min-block-size: 67 | calc( 68 | #{"#{($font-size-base * $pagination-line-height) + ($pagination-padding-y-lg * 2.33)} + calc(#{$pagination-border-width} * 2)"} 69 | ); 70 | min-inline-size: 71 | calc( 72 | #{"#{($font-size-base * $pagination-line-height) + ($pagination-padding-x-lg * 1.615)} + calc(#{$pagination-border-width} * 2)"} 73 | ); 74 | } 75 | 76 | .pagination-lg > .page-item { 77 | &.first, 78 | &.last, 79 | &.next, 80 | &.prev, 81 | &.previous { 82 | .page-link { 83 | padding-inline: $pagination-padding-y-lg - .0845rem; 84 | } 85 | } 86 | } 87 | 88 | /* Pagination Small */ 89 | .pagination-sm .page-link, 90 | .pagination-sm > li > a:not(.page-link) { 91 | min-block-size: 92 | calc( 93 | #{"#{($font-size-sm * $pagination-line-height) + ($pagination-padding-y-sm * 2)} + calc(#{$pagination-border-width} * 2)"} 94 | ); 95 | min-inline-size: 96 | calc( 97 | #{"#{($font-size-sm * $pagination-line-height) + ($pagination-padding-x-sm * 2.356)} + calc(#{$pagination-border-width} * 2)"} 98 | ); 99 | } 100 | 101 | .pagination-sm > .page-item { 102 | &.first, 103 | &.last, 104 | &.next, 105 | &.prev, 106 | &.previous { 107 | .page-link { 108 | padding-block: $pagination-padding-y-sm - .1055rem; 109 | padding-inline: $pagination-padding-y-sm - .1055rem; 110 | } 111 | } 112 | } 113 | 114 | /* Add spacing between pagination items */ 115 | .page-item + .page-item .page-link, 116 | .pagination li + li > a:not(.page-link) { 117 | .pagination-sm & { 118 | margin-inline-start: .25rem; 119 | } 120 | .pagination-lg & { 121 | margin-inline-start: .5rem; 122 | } 123 | } 124 | -------------------------------------------------------------------------------- /scss/_bootstrap-extended/_popover.scss: -------------------------------------------------------------------------------- 1 | /* Popovers 2 | ******************************************************************************* */ 3 | 4 | .modal-open .popover { 5 | z-index: $zindex-modal + 1; 6 | } 7 | .popover:not(.custom-popover) { 8 | --#{$prefix}popover-header-bg: transparent; 9 | .popover-header { 10 | --#{$prefix}popover-border-width: 0; 11 | padding-block-end: 0; 12 | } 13 | .popover-arrow::after { 14 | --#{$prefix}popover-arrow-border: var(--#{$prefix}popover-bg); 15 | } 16 | } 17 | .popover:has([class^="popover-"]):not(.custom-popover) { 18 | --#{$prefix}popover-border-color: transparent; 19 | --#{$prefix}popover-header-bg: transparent; 20 | .popover-body { 21 | background-color: transparent; 22 | } 23 | } 24 | .popover:has([class^="popover-header-"]) { 25 | --#{$prefix}popover-border-color: #{$popover-border-color}; 26 | --#{$prefix}popover-body-color: var(--#{$prefix}body-color); 27 | --#{$prefix}popover-header-bg: var(--#{$prefix}primary); 28 | } 29 | 30 | .popover { 31 | box-shadow: var(--#{$prefix}popover-box-shadow); 32 | 33 | .popover-arrow { 34 | z-index: 1; 35 | } 36 | 37 | &:not(.custom-popover).bs-popover-auto { 38 | > .popover-arrow::before { 39 | --#{$prefix}popover-bg: #{rgba(var(--#{$prefix}white-rgb), .1)}; 40 | } 41 | &[data-popper-placement="bottom"] > { 42 | .popover-arrow { 43 | &::after { 44 | border-block-end-color: var(--#{$prefix}popover-arrow-border); 45 | inset-block-start: 1px; 46 | } 47 | } 48 | .popover-header::before { 49 | --#{$prefix}popover-border-width: 0; 50 | } 51 | } 52 | } 53 | &.popover-dark { 54 | --#{$prefix}popover-bg: color-mix(in sRGB, var(--#{$prefix}base-color) 90%, var(--#{$prefix}paper-bg)); 55 | } 56 | } 57 | 58 | /* custom popover 59 | ******************************************************************************* */ 60 | .custom-popover { 61 | --#{$prefix}popover-max-width: 200px; 62 | --#{$prefix}popover-header-color: var(--#{$prefix}white); 63 | --#{$prefix}popover-body-padding-x: 1rem; 64 | --#{$prefix}popover-body-padding-y: .5rem; 65 | .popover-header { 66 | --#{$prefix}popover-header-bg: var(--#{$prefix}primary); 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /scss/_bootstrap-extended/_progress.scss: -------------------------------------------------------------------------------- 1 | /* Progress 2 | ******************************************************************************* */ 3 | 4 | .progress { 5 | --#{$prefix}progress-bar-shadow-color: #{$progress-bar-shadow-color}; 6 | overflow: initial; 7 | .progress-bar { 8 | background-color: var(--#{$prefix}primary); 9 | box-shadow: 0 2px 4px 0 var(--#{$prefix}progress-bar-shadow-color); 10 | color: var(--#{$prefix}white); 11 | } 12 | 13 | .progress-bar:first-child { 14 | @include border-start-radius($progress-border-radius); 15 | } 16 | .progress-bar:last-child { 17 | @include border-end-radius($progress-border-radius); 18 | } 19 | } 20 | 21 | @each $state in map-keys($theme-colors) { 22 | .progress-bar.bg-#{$state} { 23 | --#{$prefix}progress-bar-shadow-color: rgba(var(--#{$prefix}#{$state}-rgb), .4); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /scss/_bootstrap-extended/_reboot.scss: -------------------------------------------------------------------------------- 1 | /* Reboot */ 2 | 3 | b, 4 | strong { 5 | font-weight: $font-weight-bold; 6 | } 7 | 8 | caption { 9 | text-align: start; 10 | } 11 | 12 | dd { 13 | margin-inline-start: 0; 14 | } 15 | 16 | // TODO: checkinbs6 - a new variable has been created because the $link-color scss variable was being used,and changing the color did not reflect the update. this new variable ensures that future color changes are applied correctly. 17 | a { 18 | color: var(--#{$prefix}custom-link-color); 19 | &:hover { 20 | color: color-mix(in sRGB, var(--#{$prefix}custom-link-color) 80%, var(--#{$prefix}base-color)); 21 | } 22 | &:not([href]) { 23 | &, 24 | &:hover { 25 | color: inherit; 26 | text-decoration: none; 27 | } 28 | } 29 | } 30 | 31 | /* Autofill input bg and text color issue on different OS and browsers */ 32 | input:-webkit-autofill, 33 | input:-webkit-autofill:hover, 34 | input:-webkit-autofill:focus, 35 | textarea:-webkit-autofill, 36 | textarea:-webkit-autofill:hover, 37 | textarea:-webkit-autofill:focus, 38 | select:-webkit-autofill, 39 | select:-webkit-autofill:hover, 40 | select:-webkit-autofill:focus, 41 | input:-internal-autofill-selected { 42 | background-clip: text !important; 43 | } 44 | 45 | h1 { 46 | line-height: $h1-line-height; 47 | } 48 | 49 | h2 { 50 | line-height: $h2-line-height; 51 | } 52 | 53 | h3 { 54 | line-height: $h3-line-height; 55 | } 56 | 57 | h4 { 58 | line-height: $h4-line-height; 59 | } 60 | 61 | h5 { 62 | line-height: $h5-line-height; 63 | } 64 | 65 | h6 { 66 | line-height: $h6-line-height; 67 | } 68 | 69 | img[data-app-light-img][data-app-dark-img] { 70 | visibility: visible; 71 | } 72 | -------------------------------------------------------------------------------- /scss/_bootstrap-extended/_root.scss: -------------------------------------------------------------------------------- 1 | /* The color-scheme CSS property https://web.dev/color-scheme/ */ 2 | :root{ 3 | // variable prefix 4 | --prefix: #{$prefix}; 5 | 6 | --#{$prefix}pure-black: #{$pure-black}; 7 | 8 | // Icons sizing 9 | --#{$prefix}icon-size: #{$icon-size}; 10 | --#{$prefix}icon-size-xs: #{$icon-size-xs}; 11 | --#{$prefix}icon-size-sm: #{$icon-size-sm}; 12 | --#{$prefix}icon-size-md: #{$icon-size-md}; 13 | --#{$prefix}icon-size-lg: #{$icon-size-lg}; 14 | --#{$prefix}icon-size-xl: #{$icon-size-xl}; 15 | 16 | @function calculate-contrast($color) { 17 | @return if(lightness($color) > 75%, var(--#{$prefix}pure-black), var(--#{$prefix}white)); 18 | } 19 | @each $color, $value in $theme-colors { 20 | // Construct CSS variable names with Sass interpolation 21 | --#{$prefix}#{$color}-contrast: #{calculate-contrast($value)}; 22 | } 23 | 24 | // global custom variables 25 | --#{$prefix}bg-label-tint-amount: #{$bg-label-tint-amount}; 26 | --#{$prefix}border-subtle-amount: #{$border-subtle-amount}; 27 | --#{$prefix}base-color: #{$black}; 28 | --#{$prefix}base-color-rgb: #{$base-rgb}; 29 | --#{$prefix}paper-bg: #{$paper-bg}; 30 | --#{$prefix}paper-bg-rgb: #{$paper-bg-rgb}; 31 | 32 | --#{$prefix}min-contrast-ratio: #{$min-contrast-ratio}; 33 | 34 | // Box-shadow variables 35 | --#{$prefix}box-shadow: #{$box-shadow}; 36 | --#{$prefix}box-shadow-xs: #{$box-shadow-xs}; 37 | --#{$prefix}box-shadow-sm: #{$box-shadow-sm}; 38 | --#{$prefix}box-shadow-lg: #{$box-shadow-lg}; 39 | --#{$prefix}box-shadow-xl: #{$box-shadow-xl}; 40 | 41 | --#{$prefix}floating-component-shadow: #{$floating-component-shadow}; 42 | 43 | // TODO: CheckInBS6 - A new variable has been created because the `$link-color` SCSS #{to-rgb($link-color)} variable was being used, and changing the color did not reflect the update. This new variable ensures that future color changes are applied correctly. 44 | --#{$prefix}custom-link-color: var(--#{$prefix}primary); 45 | 46 | // Navbar 47 | --#{$prefix}navbar-bg: #{$navbar-bg}; 48 | --#{$prefix}navbar-box-shadow: #{$navbar-box-shadow}; 49 | --#{$prefix}navbar-border-width: #{$border-width}; 50 | --#{$prefix}navbar-border-color: #{$navbar-bg}; 51 | 52 | // Menu 53 | --#{$prefix}menu-header-color: #{$navbar-light-color}; 54 | 55 | // Tabs & Pills 56 | --#{$prefix}nav-box-shadow: #{$nav-box-shadow}; 57 | --#{$prefix}nav-border-color: #{$nav-border-color}; 58 | 59 | } 60 | -------------------------------------------------------------------------------- /scss/_bootstrap-extended/_spinners.scss: -------------------------------------------------------------------------------- 1 | /* Spinners */ 2 | 3 | /* Large size */ 4 | .spinner-border-lg, 5 | .spinner-grow-lg { 6 | --#{$prefix}spinner-border-width: #{$spinner-border-width-lg}; 7 | --#{$prefix}spinner-height: #{$spinner-height-lg}; 8 | --#{$prefix}spinner-width: #{$spinner-width-lg}; 9 | } 10 | 11 | /* Within button 12 | ******************************************************************************* */ 13 | 14 | .btn { 15 | .spinner-border, 16 | .spinner-grow { 17 | --#{$prefix}spinner-height: 1em; 18 | --#{$prefix}spinner-width: 1em; 19 | inset-block-start: -.0625rem; 20 | } 21 | 22 | .spinner-border { 23 | --#{$prefix}spinner-border-width: .15em; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /scss/_bootstrap-extended/_tables.scss: -------------------------------------------------------------------------------- 1 | /* Tables 2 | ******************************************************************************** */ 3 | 4 | /* ios fix for drodown-menu being clipped off when used in tables */ 5 | .ios .table tr > td .dropdown { 6 | position: relative; 7 | } 8 | 9 | 10 | /* Firefox fix for table head border bottom */ 11 | .table { 12 | > :not(caption) > * > * { 13 | background-clip: padding-box; 14 | } 15 | tr { 16 | > td { 17 | .dropdown { 18 | position: static; 19 | } 20 | } 21 | } 22 | 23 | .btn-icon, 24 | .btn:not([class*="btn-"]) { 25 | color: var(--#{$prefix}table-color); 26 | } 27 | 28 | // Table heading style 29 | th { 30 | color: var(--#{$prefix}heading-color); 31 | font-size: $font-size-sm; 32 | letter-spacing: .2px; 33 | text-transform: uppercase; 34 | } 35 | &:not(.table-borderless):not(.table-without-card, .dataTable) thead th { 36 | border-block-start-width: var(--#{$prefix}border-width); 37 | } 38 | 39 | // Removed left padding from the first column and right padding from the last column 40 | &.table-flush-spacing { 41 | thead, 42 | tbody { 43 | tr > td:first-child { 44 | padding-inline-start: 0; 45 | } 46 | tr > td:last-child { 47 | padding-inline-end: 0; 48 | } 49 | } 50 | } 51 | 52 | // Style for table inside card 53 | .card & { 54 | margin-block-end: 0; 55 | } 56 | 57 | &.table-dark, 58 | .table-dark { 59 | border-color: #{$gray-900}; 60 | th { 61 | --#{$prefix}heading-color: #{$white}; 62 | } 63 | } 64 | &.table-light, 65 | .table-light { 66 | border-color: var(--#{$prefix}border-color); 67 | th { 68 | --#{$prefix}heading-color: var(--#{$prefix}heading-color); 69 | } 70 | } 71 | caption { 72 | padding-block: $table-cell-padding-y; 73 | padding-inline: $table-cell-padding-x; 74 | } 75 | thead tr th { 76 | padding-block: $table-head-padding-y; 77 | } 78 | &.table-borderless:not(.table-sm) { 79 | > :not(thead) > * > * { 80 | padding-block: $table-cell-padding-y + .0313rem; 81 | } 82 | > thead > * > * { 83 | padding-block: $table-head-padding-y + .0313rem; 84 | } 85 | } 86 | } 87 | 88 | /* class for to remove table border bottom */ 89 | .table-border-bottom-0 { 90 | tr:last-child { 91 | td { 92 | border-block-end-width: 0; 93 | } 94 | } 95 | } 96 | 97 | /* class for to remove table border top */ 98 | .table-border-top-0 { 99 | tr:first-child { 100 | td, 101 | th { 102 | border-block-start-width: 0 !important; 103 | } 104 | } 105 | } 106 | 107 | // TODO: CheckInBS6 Review the `table-variants` mixin in Bootstrap 6 and update our overrides if needed to reflect any changes. 108 | 109 | @each $state in map-keys($theme-colors) { 110 | .table-#{$state} { 111 | --#{$prefix}table-bg: rgba(var(--#{$prefix}#{$state}-rgb), .2); 112 | --#{$prefix}table-hover-bg: color-mix(in sRGB, var(--#{$prefix}body-bg) #{$table-hover-bg-factor-amount}, var(--#{$prefix}table-bg)); 113 | --#{$prefix}table-border-color: color-mix(in sRGB, var(--#{$prefix}table-bg) #{$table-border-factor-amount}, var(--#{$prefix}table-color)); 114 | --#{$prefix}table-active-bg: color-mix(in sRGB, var(--#{$prefix}body-bg) #{$table-active-bg-factor-amount}, var(--#{$prefix}table-bg)); 115 | @if $state == "dark" or $state == "light" { 116 | --#{$prefix}table-bg: var(--#{$prefix}#{$state}); 117 | --#{$prefix}table-hover-bg: color-mix(in sRGB, var(--#{$prefix}table-color) 3.5%, var(--#{$prefix}table-bg)); 118 | --#{$prefix}table-active-bg: color-mix(in sRGB, var(--#{$prefix}table-color) 4%, var(--#{$prefix}table-bg)); 119 | } 120 | @if $state == "default" or $state == "active" { 121 | --#{$prefix}table-border-color: #{$gray-200}; 122 | } 123 | } 124 | } 125 | -------------------------------------------------------------------------------- /scss/_bootstrap-extended/_toasts.scss: -------------------------------------------------------------------------------- 1 | /* Toasts 2 | ******************************************************************************* */ 3 | 4 | .bs-toast[class^="bg-"], 5 | .bs-toast[class*=" bg-"] { 6 | --#{$prefix}toast-header-color: var(--#{$prefix}white); 7 | --#{$prefix}toast-color: var(--#{$prefix}white); 8 | } 9 | 10 | .toast.bs-toast { 11 | --#{$prefix}toast-btn-close-bg: var(--#{$prefix}paper-bg); 12 | --#{$prefix}toast-bg: rgba(var(--#{$prefix}white-rgb), .85); 13 | --#{$prefix}toast-btn-close: #{$btn-close-gray}; 14 | z-index: $zindex-toast; 15 | background-color: var(--#{$prefix}toast-bg) !important; 16 | .toast-header { 17 | position: relative; 18 | padding-block-end: .5rem; 19 | .btn-close { 20 | position: absolute; 21 | padding: .45rem; 22 | background-color: var(--#{$prefix}toast-btn-close-bg); 23 | background-image: var(--#{$prefix}toast-btn-close); 24 | background-size: $toast-btn-close-size; 25 | box-shadow: var(--#{$prefix}toast-box-shadow); 26 | filter: none; 27 | inset-block-start: -8px; 28 | inset-inline-end: 2px; 29 | @include border-radius($border-radius); 30 | @include transition(all .23s ease .1s); 31 | 32 | /* For hover effect of close btn */ 33 | &:hover, 34 | &:focus, 35 | &:active { 36 | opacity: 1; 37 | outline: 0; 38 | } 39 | } 40 | } 41 | .toast-header ~ .toast-body { 42 | padding-block-start: 0; 43 | } 44 | } 45 | .toast-container { 46 | --#{$prefix}toast-zindex: 8; 47 | } 48 | 49 | .toast-header { 50 | .btn-close { 51 | margin-inline: $toast-padding-x $toast-padding-x * -.5; 52 | } 53 | } 54 | 55 | /* Placement Toast example */ 56 | .toast-placement-ex { 57 | position: fixed; 58 | } 59 | 60 | /* Generate contextual modifier classes for colorizing the alert */ 61 | @each $state in map-keys($theme-colors) { 62 | .bs-toast{ 63 | &.bg-#{$state} { 64 | --#{$prefix}toast-bg: rgba(var(--#{$prefix}#{$state}-rgb), .85); 65 | --#{$prefix}toast-box-shadow: 0 .25rem 1rem rgba(var(--#{$prefix}#{$state}-rgb), .4); 66 | --#{$prefix}toast-btn-close-bg: var(--#{$prefix}#{$state}); 67 | --#{$prefix}toast-btn-close: #{$btn-close-white}; 68 | } 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /scss/_bootstrap-extended/_tooltip.scss: -------------------------------------------------------------------------------- 1 | /* Tooltips 2 | ******************************************************************************* */ 3 | 4 | 5 | /* Open modal tooltip z-index */ 6 | .modal-open .tooltip { 7 | z-index: $zindex-modal + 2; 8 | } 9 | 10 | .tooltip-inner { 11 | display: flex; 12 | align-items: center; 13 | font-weight: $font-weight-medium; 14 | gap: 3px; 15 | } 16 | -------------------------------------------------------------------------------- /scss/_bootstrap-extended/_type.scss: -------------------------------------------------------------------------------- 1 | /* Type */ 2 | 3 | .list-inline, 4 | .list-unstyled { 5 | padding-inline-start: 0; 6 | } 7 | 8 | .list-inline-item:not(:last-child) { 9 | margin-inline: 0 $list-inline-padding; 10 | } 11 | -------------------------------------------------------------------------------- /scss/_bootstrap-extended/forms/_floating-labels.scss: -------------------------------------------------------------------------------- 1 | /* Floating Labels 2 | ******************************************************************************* */ 3 | 4 | // Display placeholder on focus 5 | .form-floating { 6 | > label { 7 | inset-inline-start: 0; 8 | } 9 | > .form-control:focus, 10 | > .form-control:not(:placeholder-shown) { 11 | &::placeholder { 12 | color: $input-placeholder-color; 13 | } 14 | } 15 | > .form-control:focus, 16 | > .form-control:focus:not(:placeholder-shown), 17 | > .form-select:focus, 18 | > .form-select:focus:not(:placeholder-shown) { 19 | ~ label { 20 | color: $component-active-bg; 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /scss/_bootstrap-extended/forms/_form-check.scss: -------------------------------------------------------------------------------- 1 | /* Checkboxes and Radios 2 | ******************************************************************************* */ 3 | .form-check { 4 | position: relative; 5 | padding-inline: $form-check-padding-start 0; 6 | .form-check-input { 7 | float: inline-start; 8 | margin-inline-start: $form-check-padding-start * -1; 9 | } 10 | &.form-check-reverse { 11 | padding-inline: 0 $form-check-padding-start; 12 | .form-check-input { 13 | float: inline-end; 14 | margin-inline-end: $form-check-padding-start * -1; 15 | } 16 | } 17 | } 18 | .form-check-input { 19 | --#{$prefix}form-check-input-checked-bg: #{$form-check-input-checked-bg-color}; 20 | --#{$prefix}form-check-input-checked-border-color: #{$form-check-input-checked-border-color}; 21 | --#{$prefix}form-check-shadow-color: var(--#{$prefix}primary-rgb); 22 | --#{$prefix}form-check-box-shadow: 0 .125rem .25rem 0 rgba(var(--#{$prefix}form-check-shadow-color), .4); 23 | cursor: $form-check-label-cursor; 24 | &:disabled { 25 | --#{$prefix}form-check-bg: #{$form-check-input-disabled-bg}; 26 | border-color: $form-check-input-disabled-bg; 27 | } 28 | &:checked { 29 | border-color: var(--#{$prefix}form-check-input-checked-border-color); 30 | background-color: var(--#{$prefix}form-check-input-checked-bg); 31 | box-shadow: var(--#{$prefix}form-check-box-shadow); 32 | } 33 | &[type="checkbox"]:indeterminate { 34 | border-color: var(--#{$prefix}form-check-input-checked-border-color); 35 | background-color: var(--#{$prefix}form-check-input-checked-bg); 36 | box-shadow: var(--#{$prefix}form-check-box-shadow); 37 | } 38 | &:active { 39 | filter: none; 40 | } 41 | } 42 | 43 | /* Only for checkbox and radio (not for bs default switch) 44 | ? .dt-checkboxes-cell class is used for DataTables checkboxes */ 45 | .form-check:not(.form-switch), 46 | .dt-checkboxes-cell { 47 | .form-check-input[type="radio"] { 48 | background-size: 1.3125rem; 49 | &:not(:checked) { 50 | background-size: .75rem; 51 | } 52 | } 53 | } 54 | 55 | .form-check-inline { 56 | margin-inline: 0 $form-check-inline-margin-end; 57 | } 58 | 59 | // Switches 60 | // ******************************************************************************* 61 | 62 | .form-switch { 63 | padding-inline-start: $form-switch-padding-start; 64 | .form-check-input { 65 | &:not(:checked) { 66 | background-color: $form-switch-bg; 67 | box-shadow: $form-switch-box-shadow; 68 | } 69 | border: 0; 70 | margin-inline-start: $form-switch-padding-start * -1; 71 | } 72 | &.form-check-reverse { 73 | padding-inline-end: $form-switch-padding-start; 74 | .form-check-input { 75 | margin-inline-end: $form-switch-padding-start * -1; 76 | } 77 | } 78 | } 79 | 80 | // Generate contextual modifier classes for colorizing the form check 81 | @each $state in map-keys($theme-colors) { 82 | .form-check-#{$state} { 83 | .form-check-input { 84 | --#{$prefix}form-check-input-checked-bg: var(--#{$prefix}#{$state}); 85 | --#{$prefix}form-check-input-checked-border-color: var(--#{$prefix}#{$state}); 86 | --#{$prefix}form-check-shadow-color: var(--#{$prefix}#{$state}-rgb); 87 | } 88 | } 89 | } 90 | -------------------------------------------------------------------------------- /scss/_bootstrap-extended/forms/_form-control.scss: -------------------------------------------------------------------------------- 1 | // Form control 2 | // ******************************************************************************* 3 | 4 | .form-control { 5 | --#{$prefix}input-border-color: #{$input-border-color}; 6 | --#{$prefix}input-disabled-border-color: #{$input-disabled-border-color}; 7 | border-color: var(--#{$prefix}input-border-color); 8 | 9 | // ? Form control (all size) padding calc due to border increase on focus 10 | padding-block: calc($input-padding-y - $input-border-width); 11 | padding-inline: calc($input-padding-x - $input-border-width); 12 | 13 | // form input placeholder animation 14 | &::placeholder, 15 | &:focus::placeholder { 16 | @include transition(all ease .2s); 17 | } 18 | 19 | /* border color on hover state when element not in focus or disabled */ 20 | &:hover { 21 | &:not(:focus):not(:disabled) { 22 | border-color: $input-hover-border-color; 23 | } 24 | } 25 | &:disabled { 26 | border-color: var(--#{$prefix}input-disabled-border-color); 27 | } 28 | 29 | /* 30 | ! FIX: wizard-ex input type number placeholder align issue */ 31 | &[type="number"] { 32 | .input-group & { 33 | line-height: 1.375rem; 34 | min-block-size: 2.375rem; 35 | } 36 | .input-group-lg & { 37 | line-height: 1.5rem; 38 | min-block-size: 3rem; 39 | } 40 | .input-group-sm & { 41 | min-block-size: 1.875rem; 42 | } 43 | } 44 | 45 | &:not([readonly]) { 46 | &:focus::placeholder { 47 | transform: translateX(5px); 48 | } 49 | } 50 | 51 | &:focus { 52 | border-width: $input-focus-border-width; 53 | padding-block: calc($input-padding-y - $input-focus-border-width); 54 | padding-inline: calc($input-padding-x - $input-focus-border-width); 55 | &::file-selector-button { 56 | box-shadow: $input-border-width 0 0 $input-focus-border-color; 57 | } 58 | } 59 | &.form-control-lg { 60 | padding-block: calc($input-padding-y-lg - $input-border-width); 61 | padding-inline: calc($input-padding-x-lg - $input-border-width); 62 | &:focus { 63 | padding-block: calc($input-padding-y-lg - $input-focus-border-width); 64 | padding-inline: calc($input-padding-x-lg - $input-focus-border-width); 65 | } 66 | &::file-selector-button { 67 | margin-block: (-$input-padding-y-lg - .0625rem); 68 | padding-block: calc($input-padding-y-lg + .0625rem); 69 | } 70 | } 71 | &.form-control-sm { 72 | padding-block: calc($input-padding-y-sm - $input-border-width); 73 | padding-inline: calc($input-padding-x-sm - $input-border-width); 74 | &:focus { 75 | padding-block: calc($input-padding-y-sm - $input-focus-border-width); 76 | padding-inline: calc($input-padding-x-sm - $input-focus-border-width); 77 | } 78 | &::file-selector-button { 79 | margin-block: (-$input-padding-y-sm - .0625rem); 80 | padding-block: calc($input-padding-y-sm + .0625rem); 81 | } 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /scss/_bootstrap-extended/forms/_form-range.scss: -------------------------------------------------------------------------------- 1 | /* Range select 2 | ******************************************************************************* */ 3 | 4 | .form-range { 5 | // Chrome specific 6 | &::-webkit-slider-thumb { 7 | box-shadow: $form-range-thumb-box-shadow; 8 | transform-origin: center; 9 | @include transition(transform .2s, box-shadow .2s ease); 10 | 11 | &:hover { 12 | box-shadow: 0 0 0 .5rem rgba(var(--#{$prefix}primary-rgb), .16); 13 | } 14 | &:active, 15 | &:focus { 16 | box-shadow: 0 0 0 .8125rem rgba(var(--#{$prefix}primary-rgb), .16); 17 | } 18 | } 19 | &::-webkit-slider-runnable-track { 20 | background-color: var(--#{$prefix}primary); 21 | } 22 | 23 | // Mozilla specific 24 | &::-moz-range-thumb { 25 | box-shadow: $form-range-thumb-box-shadow; 26 | transform-origin: center; 27 | @include transition(transform .2s, box-shadow .2s ease); 28 | &:hover { 29 | box-shadow: 0 0 0 .5rem rgba(var(--#{$prefix}primary-rgb), .16); 30 | } 31 | &:active, 32 | &:focus { 33 | box-shadow: 0 0 0 .8125rem rgba(var(--#{$prefix}primary-rgb), .16); 34 | } 35 | } 36 | 37 | &::-moz-range-track { 38 | background-color: var(--#{$prefix}primary); 39 | } 40 | &:disabled { 41 | &::-webkit-slider-runnable-track { 42 | background-color: $form-range-track-disabled-bg; 43 | } 44 | 45 | &::-moz-range-track { 46 | background-color: $form-range-track-disabled-bg; 47 | } 48 | 49 | &::-webkit-slider-thumb { 50 | border-color: $form-range-track-disabled-border-color; 51 | box-shadow: none; 52 | } 53 | 54 | &::-moz-range-thumb { 55 | border-color: $form-range-track-disabled-border-color; 56 | box-shadow: none; 57 | } 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /scss/_bootstrap-extended/forms/_form-select.scss: -------------------------------------------------------------------------------- 1 | /* Select 2 | ******************************************************************************* */ 3 | 4 | .form-select { 5 | --#{$prefix}form-select-border-color: #{$form-select-border-color}; 6 | border-color: var(--#{$prefix}form-select-border-color); 7 | background-clip: padding-box; 8 | padding-block: calc($form-select-padding-y - $input-border-width); 9 | padding-inline-end: calc($form-select-indicator-padding - $input-border-width); 10 | padding-inline-start: calc($form-select-padding-x - $input-border-width); 11 | optgroup, 12 | option { 13 | background-color: var(--#{$prefix}paper-bg); 14 | } 15 | &[multiple], 16 | &[size]:not([size="1"]) { 17 | padding-inline-end: $form-select-padding-x; 18 | } 19 | &:hover { 20 | &:not(:focus):not(:disabled) { 21 | border-color: $input-hover-border-color; 22 | } 23 | } 24 | &:disabled { 25 | background-image: escape-svg($form-select-disabled-indicator); 26 | } 27 | &:focus, 28 | &:focus-within { 29 | border-width: $input-focus-border-width; 30 | background-position: right calc($form-select-padding-x - 1px) center; 31 | padding-block: calc($form-select-padding-y - $input-focus-border-width); 32 | padding-inline-end: calc($form-select-indicator-padding - $input-focus-border-width); 33 | padding-inline-start: calc($form-select-padding-x - $input-focus-border-width); 34 | } 35 | &.form-select-lg { 36 | background-size: 24px 24px; 37 | min-block-size: $input-height-lg; 38 | padding-block: calc($form-select-padding-y-lg - $input-border-width); 39 | padding-inline-start: calc($form-select-padding-x-lg - $input-border-width); 40 | &:focus { 41 | padding-block: calc($form-select-padding-y-lg - $input-focus-border-width); 42 | padding-inline-start: calc($form-select-padding-x-lg - $input-focus-border-width); 43 | } 44 | } 45 | &.form-select-sm { 46 | background-size: 20px 20px; 47 | min-block-size: $input-height-sm; 48 | padding-block: calc($form-select-padding-y-sm - $input-border-width); 49 | padding-inline-start: calc($form-select-padding-x-sm - $input-border-width); 50 | &:focus { 51 | padding-block: calc($form-select-padding-y-sm - $input-focus-border-width); 52 | padding-inline-start: calc($form-select-padding-x-sm - $input-focus-border-width); 53 | } 54 | } 55 | &[multiple]:focus { 56 | padding-inline-end: .875rem !important; 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /scss/_bootstrap-extended/forms/_input-group.scss: -------------------------------------------------------------------------------- 1 | /* Input groups 2 | ******************************************************************************* */ 3 | 4 | /* Using :focus-within to apply focus border and shadow to default and merged input-group */ 5 | .input-group { 6 | --#{$prefix}input-group-addon-border-color: #{$input-group-addon-border-color}; 7 | --#{$prefix}input-group-disabled-border-color: #{$input-disabled-border-color}; 8 | &:has(.form-check-input):not(:has(.dropdown-toggle)) { 9 | z-index: 1; 10 | &::before { 11 | z-index: -1; 12 | } 13 | } 14 | @include border-radius($input-border-radius); 15 | 16 | // Input group (Default) 17 | .input-group-text { 18 | border-color: var(--#{$prefix}input-group-addon-border-color); 19 | @include transition($input-transition); 20 | } 21 | 22 | .form-control, 23 | .form-select, 24 | .input-group-text { 25 | &:focus, 26 | &:focus-within { 27 | border-width: $input-border-width; 28 | } 29 | } 30 | 31 | .form-control, 32 | .input-group-text { 33 | &, 34 | &:focus, 35 | &:focus-within { 36 | padding-block: calc($input-padding-y - $input-border-width); 37 | padding-inline: calc($input-padding-x - $input-border-width); 38 | } 39 | } 40 | .form-select { 41 | &, 42 | &:focus, 43 | &:focus-within { 44 | background-position: right calc($form-select-padding-x) center; 45 | padding-block: calc($form-select-padding-y - $input-border-width); 46 | padding-inline-end: calc($form-select-indicator-padding - $input-border-width); 47 | padding-inline-start: calc($form-select-padding-x - $input-border-width); 48 | } 49 | } 50 | &.input-group-sm { 51 | &, 52 | &::before { 53 | @include border-radius($input-border-radius-sm); 54 | } 55 | .form-control, 56 | .input-group-text { 57 | &, 58 | &:focus, 59 | &:focus-within { 60 | padding-block: $input-padding-y-sm; 61 | padding-inline: $input-padding-x-sm; 62 | } 63 | } 64 | .form-select { 65 | &, 66 | &:focus, 67 | &:focus-within { 68 | background-position: right calc($form-select-padding-x-sm) center; 69 | padding-block: $form-select-padding-y-sm; 70 | padding-inline: $form-select-padding-x-sm; 71 | padding-inline-start: calc($form-select-padding-x-sm - $input-border-width); 72 | } 73 | } 74 | } 75 | &.input-group-lg { 76 | &, 77 | &::before { 78 | @include border-radius($input-border-radius-lg); 79 | } 80 | .form-control, 81 | .input-group-text { 82 | &, 83 | &:focus, 84 | &:focus-within { 85 | padding-block: $input-padding-y-lg; 86 | padding-inline: $input-padding-x-lg; 87 | } 88 | } 89 | .form-select { 90 | &, 91 | &:focus, 92 | &:focus-within { 93 | background-position: right calc($form-select-padding-x-lg) center; 94 | padding-block: $form-select-padding-y-lg; 95 | padding-inline: $form-select-padding-x-lg; 96 | padding-inline-start: calc($form-select-padding-x-lg - $input-border-width); 97 | } 98 | } 99 | } 100 | 101 | &::before { 102 | position: absolute; 103 | display: block; 104 | block-size: 100%; 105 | content: ""; 106 | inline-size: 100%; 107 | inset-block-start: 0; 108 | inset-inline-start: 0; 109 | @include border-radius($input-border-radius); 110 | } 111 | 112 | > :not(:first-child):not(.dropdown-menu) { 113 | margin-inline: calc(#{$input-border-width} * -1) 0; 114 | } 115 | 116 | &:hover { 117 | .input-group-text, 118 | .form-control, 119 | .form-select { 120 | border-color: $input-hover-border-color; 121 | } 122 | } 123 | 124 | /* 125 | ? Info :focus-within to apply focus border and shadow to default and merged input & input-group */ 126 | &:focus-within, 127 | &:focus { 128 | box-shadow: 0 0 0 $input-border-width $input-focus-border-color; 129 | &::before { 130 | box-shadow: $input-focus-box-shadow; 131 | } 132 | &:not(.input-group-merge) { 133 | .form-control, 134 | .form-select, 135 | .input-group-text, 136 | .btn, 137 | .form-control::file-selector-button { 138 | box-shadow: $input-border-width 0 0 $input-focus-border-color; 139 | } 140 | } 141 | .input-group-text, 142 | .form-control, 143 | .form-select { 144 | border-color: $input-focus-border-color; 145 | &:hover { 146 | border-color: $input-focus-border-color; 147 | } 148 | } 149 | } 150 | 151 | // Input group merge 152 | &.input-group-merge { 153 | > :not(:first-child):not(.dropdown-menu) { 154 | margin-inline: 0; 155 | } 156 | &:not(.disabled) > :not(:first-child):not(.dropdown-menu):not(.btn):not(.dropdown-menu + .form-control):not(.btn + .form-control) { 157 | margin-inline-start: calc($input-focus-border-width - 4px); 158 | } 159 | .input-group-text, 160 | .form-control, 161 | .form-select { 162 | &, 163 | &:focus, 164 | &:focus-within { 165 | box-shadow: none; 166 | } 167 | &:first-child { 168 | border-inline-end: 0; 169 | } 170 | &:last-child { 171 | border-inline-start: 0; 172 | } 173 | &:not(:first-child) { 174 | border-inline-start: 0; 175 | padding-inline-start: 0; 176 | } 177 | &:not(:last-child) { 178 | border-inline-end: 0; 179 | } 180 | } 181 | &.disabled, 182 | &[disabled] { 183 | margin-inline: 0 !important; 184 | } 185 | } 186 | // Rounded pill option 187 | &.rounded-pill { 188 | .input-group-text, 189 | .form-control, 190 | .form-select, 191 | &::before { 192 | @include border-radius($border-radius-pill); 193 | } 194 | } 195 | // For disabled input group 196 | &.disabled, 197 | &[disabled] { 198 | .input-group-text, 199 | .form-control, 200 | .form-select { 201 | border-color: var(--#{$prefix}input-group-disabled-border-color); 202 | background-color: $input-disabled-bg; 203 | color: var(--#{$prefix}secondary-color); 204 | pointer-events: none; 205 | } 206 | .form-select { 207 | background-image: escape-svg($form-select-disabled-indicator); 208 | } 209 | } 210 | } 211 | 212 | /* input-group-text icon size */ 213 | .input-group-text { 214 | background-clip: padding-box; 215 | 216 | /* Adding transition (On focus border color change) */ 217 | @include transition($input-transition); 218 | } 219 | 220 | .input-group-lg > .input-group-text { 221 | .icon-base{ 222 | block-size: 1.375rem; 223 | font-size: 1.375rem; 224 | inline-size: 1.375rem; 225 | } 226 | } 227 | 228 | .input-group-sm > .input-group-text { 229 | .icon-base{ 230 | block-size: 1.125rem; 231 | font-size: 1.125rem; 232 | inline-size: 1.125rem; 233 | } 234 | } 235 | -------------------------------------------------------------------------------- /scss/_bootstrap-extended/forms/_labels.scss: -------------------------------------------------------------------------------- 1 | /* Labels 2 | ******************************************************************************* */ 3 | 4 | .col-form-label { 5 | white-space: nowrap; 6 | } 7 | 8 | /* Default (vertical ) form label size */ 9 | .form-label-lg { 10 | @include font-size($input-font-size-lg); 11 | } 12 | 13 | .form-label-sm { 14 | @include font-size($input-font-size-sm); 15 | } 16 | -------------------------------------------------------------------------------- /scss/_bootstrap-extended/helpers/_color-bg.scss: -------------------------------------------------------------------------------- 1 | $color-classes: $theme-colors !default; 2 | 3 | @each $color, $value in $color-classes { 4 | .bg-label-#{$color} { 5 | background-color: color-mix(in sRGB, var(--#{$prefix}paper-bg) var(--#{$prefix}bg-label-tint-amount), var(--#{$prefix}#{$color})) if($enable-important-utilities, !important, null); 6 | @if $color == "light" { 7 | color: RGBA(color-contrast($value), var(--#{$prefix}bg-label-tint-amount)) if($enable-important-utilities, !important, null); 8 | } @else { 9 | color: var(--#{$prefix}#{$color}) if($enable-important-utilities, !important, null); 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /scss/_bootstrap-extended/mixins/_border-radius.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable property-disallowed-list 2 | 3 | // Single side border-radius 4 | 5 | @mixin border-end-radius($radius: $border-radius) { 6 | @if $enable-rounded { 7 | border-end-end-radius: valid-radius($radius); 8 | border-start-end-radius: valid-radius($radius); 9 | } 10 | } 11 | 12 | @mixin border-start-radius($radius: $border-radius) { 13 | @if $enable-rounded { 14 | border-end-start-radius: valid-radius($radius); 15 | border-start-start-radius: valid-radius($radius); 16 | } 17 | } 18 | 19 | @mixin border-top-start-radius($radius: $border-radius) { 20 | @if $enable-rounded { 21 | border-start-start-radius: valid-radius($radius); 22 | } 23 | } 24 | 25 | @mixin border-top-end-radius($radius: $border-radius) { 26 | @if $enable-rounded { 27 | border-start-end-radius: valid-radius($radius); 28 | } 29 | } 30 | 31 | @mixin border-bottom-end-radius($radius: $border-radius) { 32 | @if $enable-rounded { 33 | border-end-end-radius: valid-radius($radius); 34 | } 35 | } 36 | 37 | @mixin border-bottom-start-radius($radius: $border-radius) { 38 | @if $enable-rounded { 39 | border-end-start-radius: valid-radius($radius); 40 | } 41 | } 42 | 43 | // scss-docs-end border-radius-mixins 44 | -------------------------------------------------------------------------------- /scss/_bootstrap-extended/mixins/_caret.scss: -------------------------------------------------------------------------------- 1 | // Carets - for dropdown arrows 2 | // ******************************************************************************* 3 | 4 | @mixin caret-up($caret-width) { 5 | border: $caret-border-width solid; 6 | block-size: $caret-width; 7 | border-block-end: 0; 8 | border-inline-start: 0; 9 | inline-size: $caret-width; 10 | margin-block-start: .97 * divide($caret-width, 2); 11 | margin-inline: .8em 0; 12 | transform: rotate(-45deg); 13 | } 14 | 15 | @mixin caret-down($caret-width) { 16 | border: $caret-border-width solid; 17 | block-size: $caret-width; 18 | border-block-start: 0; 19 | border-inline-start: 0; 20 | inline-size: $caret-width; 21 | margin-block-start: -1.07 * divide($caret-width, 2); 22 | margin-inline: .8em 0; 23 | transform: rotate(45deg); 24 | } 25 | 26 | @mixin caret-start($caret-width) { 27 | border: $caret-border-width solid; 28 | block-size: $caret-width; 29 | border-block-start: 0; 30 | border-inline-end: 0; 31 | inline-size: $caret-width; 32 | margin-block-start: 0; 33 | margin-inline: 0 $caret-spacing; 34 | transform: rotate(45deg); 35 | } 36 | 37 | @mixin caret-end($caret-width) { 38 | border: $caret-border-width solid; 39 | block-size: $caret-width; 40 | border-block-start: 0; 41 | border-inline-start: 0; 42 | inline-size: $caret-width; 43 | margin-block-start: 0; 44 | margin-inline: $caret-spacing 0; 45 | transform: rotate(-45deg); 46 | } 47 | -------------------------------------------------------------------------------- /scss/_bootstrap-extended/mixins/_misc.scss: -------------------------------------------------------------------------------- 1 | // Keyframes 2 | // ******************************************************************************* 3 | 4 | @mixin keyframes($name) { 5 | @keyframes #{$name} { 6 | @content; 7 | } 8 | } 9 | 10 | // icons 11 | // ******************************************************************************* 12 | 13 | @mixin icon-base($size: var(--#{$prefix}icon-size)) { 14 | block-size: $size; 15 | font-size: $size; 16 | inline-size: $size; 17 | } 18 | -------------------------------------------------------------------------------- /scss/_bootstrap.scss: -------------------------------------------------------------------------------- 1 | @import "bootstrap/scss/mixins/banner"; 2 | @include bsBanner(""); 3 | 4 | // Configuration 5 | @import "_bootstrap-extended/include"; 6 | 7 | // Layout & components 8 | @import "bootstrap/scss/root"; 9 | @import "bootstrap/scss/reboot"; 10 | @import "bootstrap/scss/type"; 11 | @import "bootstrap/scss/images"; 12 | @import "bootstrap/scss/containers"; 13 | @import "bootstrap/scss/grid"; 14 | @import "bootstrap/scss/tables"; 15 | @import "bootstrap/scss/forms"; 16 | @import "bootstrap/scss/buttons"; 17 | @import "bootstrap/scss/transitions"; 18 | @import "bootstrap/scss/dropdown"; 19 | @import "bootstrap/scss/button-group"; 20 | @import "bootstrap/scss/nav"; 21 | @import "bootstrap/scss/navbar"; 22 | @import "bootstrap/scss/card"; 23 | @import "bootstrap/scss/accordion"; 24 | @import "bootstrap/scss/breadcrumb"; 25 | @import "bootstrap/scss/pagination"; 26 | @import "bootstrap/scss/badge"; 27 | @import "bootstrap/scss/alert"; 28 | @import "bootstrap/scss/progress"; 29 | @import "bootstrap/scss/list-group"; 30 | @import "bootstrap/scss/close"; 31 | @import "bootstrap/scss/toasts"; 32 | @import "bootstrap/scss/modal"; 33 | @import "bootstrap/scss/tooltip"; 34 | @import "bootstrap/scss/popover"; 35 | @import "bootstrap/scss/carousel"; 36 | @import "bootstrap/scss/spinners"; 37 | @import "bootstrap/scss/offcanvas"; 38 | @import "bootstrap/scss/placeholders"; 39 | 40 | // Helpers 41 | @import "bootstrap/scss/helpers"; 42 | -------------------------------------------------------------------------------- /scss/_colors.scss: -------------------------------------------------------------------------------- 1 | /* Custom colors 2 | ******************************************************************************* */ 3 | :root { 4 | @each $color, $value in $theme-colors { 5 | --#{$prefix}#{$color}: #{$value}; 6 | --#{$prefix}#{$color}-rgb: #{red($value)}, #{green($value)}, #{blue($value)}; 7 | } 8 | 9 | @each $state in map-keys($theme-colors) { 10 | .bg-gradient-#{$state} { 11 | --#{$prefix}bg-gradient-color-start: color-mix(in sRGB, var(--#{$prefix}pure-black) 10%, var(--#{$prefix}#{$state})); 12 | --#{$prefix}bg-gradient-color-end: color-mix(in sRGB, var(--#{$prefix}white) 20%, var(--#{$prefix}#{$state})); 13 | background-image: linear-gradient(45deg, var(--#{$prefix}bg-gradient-color-start) 0%, var(--#{$prefix}bg-gradient-color-end) 100%) !important; 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /scss/_components.scss: -------------------------------------------------------------------------------- 1 | @import "_components/include"; 2 | 3 | // Import components scss 4 | @import "_components/root"; 5 | @import "_components/base"; 6 | @import "_components/common"; 7 | @import "_components/menu"; 8 | @import "_components/layout"; 9 | @import "_components/app-brand"; 10 | @import "_components/avatar"; 11 | @import "_components/text-divider"; 12 | @import "_components/footer"; 13 | -------------------------------------------------------------------------------- /scss/_components/_app-brand.scss: -------------------------------------------------------------------------------- 1 | /* App Brand 2 | ******************************************************************************* */ 3 | .app-brand { 4 | display: flex; 5 | flex-grow: 0; 6 | flex-shrink: 0; 7 | align-items: center; 8 | 9 | 10 | .app-brand-text { 11 | opacity: 1; 12 | transition: opacity $menu-animation-duration ease-in-out; 13 | } 14 | 15 | 16 | .layout-menu-toggle { 17 | display: block; 18 | } 19 | 20 | .app-brand-img{ 21 | display: block; 22 | } 23 | .app-brand-img-collapsed{ 24 | display: none; 25 | } 26 | } 27 | 28 | .app-brand-link { 29 | display: flex; 30 | align-items: center; 31 | } 32 | 33 | /* App brand with vertical menu */ 34 | .menu-horizontal .app-brand, 35 | .menu-horizontal .app-brand + .menu-divider { 36 | display: none !important; 37 | } 38 | 39 | @include media-breakpoint-up($menu-collapsed-layout-breakpoint) { 40 | // .layout-menu-collapsed:not(.layout-menu-hover, .layout-menu-offcanvas, .layout-menu-fixed-offcanvas) .layout-menu { 41 | .layout-menu-collapsed:not(.layout-menu-hover) .layout-menu, 42 | .menu-collapsed:not(:hover) .app-brand { 43 | .app-brand-logo ~ .app-brand-text{ 44 | opacity: 0; 45 | } 46 | .app-brand-img{ 47 | display: none; 48 | } 49 | .app-brand-img-collapsed{ 50 | display: block; 51 | } 52 | } 53 | } 54 | 55 | /* Within menu */ 56 | :not(.layout-menu) > .menu-vertical.menu-collapsed:not(.layout-menu):not(:hover), 57 | .layout-menu-collapsed:not(.layout-menu-hover):not(.layout-menu-offcanvas):not(.layout-menu-fixed-offcanvas) .layout-menu { 58 | .app-brand { 59 | inline-size: $menu-collapsed-width; 60 | } 61 | 62 | .app-brand-logo, 63 | .app-brand-link, 64 | .app-brand-text { 65 | margin-inline: auto; 66 | } 67 | 68 | .app-brand-logo ~ .app-brand-text { 69 | overflow: hidden; 70 | opacity: 0; 71 | text-overflow: ellipsis; 72 | white-space: nowrap; 73 | } 74 | .app-brand .layout-menu-toggle { 75 | inset-inline-start: calc(#{$menu-collapsed-width} - 1.5rem); 76 | opacity: 0; 77 | } 78 | 79 | .app-brand-img { 80 | display: none; 81 | } 82 | 83 | .app-brand-img-collapsed { 84 | display: block; 85 | } 86 | } 87 | -------------------------------------------------------------------------------- /scss/_components/_avatar.scss: -------------------------------------------------------------------------------- 1 | /* Avatar 2 | ******************************************************************************* */ 3 | 4 | /* Avatar Styles */ 5 | .avatar { 6 | --#{$prefix}avatar-size: #{$avatar-size}; 7 | --#{$prefix}avatar-group-border: #{$avatar-group-border}; 8 | --#{$prefix}avatar-initial-inline: 3px; 9 | --#{$prefix}avatar-initial-bg: #{$avatar-initial-bg}; 10 | position: relative; 11 | block-size: var(--#{$prefix}avatar-size); 12 | cursor: pointer; 13 | inline-size: var(--#{$prefix}avatar-size); 14 | 15 | .avatar-initial { 16 | position: absolute; 17 | display: flex; 18 | align-items: center; 19 | justify-content: center; 20 | background-color: var(--#{$prefix}avatar-initial-bg); 21 | color: var(--#{$prefix}white); 22 | font-size: var(--#{$prefix}avatar-initial); 23 | font-weight: $font-weight-medium; 24 | inset: 0; 25 | text-transform: uppercase; 26 | } 27 | 28 | &.avatar-online, 29 | &.avatar-offline, 30 | &.avatar-away, 31 | &.avatar-busy { 32 | &::after { 33 | position: absolute; 34 | @include border-radius(100%); 35 | block-size: calc(var(--#{$prefix}avatar-size) * .2); 36 | box-shadow: 0 0 0 2px var(--#{$prefix}white); 37 | content: ""; 38 | inline-size: calc(var(--#{$prefix}avatar-size) * .2); 39 | inset-block-end: 0; 40 | inset-inline-end: var(--#{$prefix}avatar-initial-inline); 41 | } 42 | } 43 | img { 44 | block-size: 100%; 45 | inline-size: 100%; 46 | } 47 | 48 | &.avatar-online::after { 49 | background-color: var(--#{$prefix}success); 50 | } 51 | 52 | &.avatar-offline::after { 53 | background-color: var(--#{$prefix}secondary); 54 | } 55 | 56 | &.avatar-away::after { 57 | background-color: var(--#{$prefix}warning); 58 | } 59 | 60 | &.avatar-busy::after { 61 | background-color: var(--#{$prefix}danger); 62 | } 63 | [class*="avatar-shadow-"] { 64 | background-color: var(--#{$prefix}avatar-icon-bg); 65 | box-shadow: 0 0 0 .25rem rgba(var(--#{$prefix}avatar-icon-shadow-color), .06); 66 | color: var(--#{$prefix}avatar-icon-color); 67 | } 68 | } 69 | 70 | /* Pull up avatar style */ 71 | .pull-up { 72 | transition: all .25s ease; 73 | 74 | &:hover { 75 | z-index: 30; 76 | @include border-radius(50%); 77 | box-shadow: var(--#{$prefix}box-shadow); 78 | transform: translateY(-4px) scale(1.02); 79 | } 80 | } 81 | 82 | 83 | @each $size, $values in $avatar-sizes { 84 | .avatar-#{$size} { 85 | --#{$prefix}avatar-size: #{nth($values, 1)}; 86 | --#{$prefix}avatar-initial: #{nth($values, 2)}; 87 | --#{$prefix}avatar-initial-inline: #{nth($values, 3)}; 88 | } 89 | } 90 | 91 | /* Avatar Group SCSS */ 92 | .avatar-group { 93 | .avatar { 94 | margin-inline-start: -.8rem; 95 | transition: all .25s ease; 96 | 97 | &:first-child { 98 | margin-inline-start: 0; 99 | } 100 | 101 | img, 102 | .avatar-initial { 103 | border: 2px solid var(--#{$prefix}avatar-group-border); 104 | color: var(--#{$prefix}heading-color); 105 | } 106 | 107 | &:hover { 108 | z-index: 30; 109 | transition: all .25s ease; 110 | } 111 | } 112 | 113 | // Avatar Group Sizings 114 | .avatar-xs { 115 | margin-inline-start: -.65rem; 116 | } 117 | 118 | .avatar-sm { 119 | margin-inline-start: -.75rem; 120 | } 121 | 122 | .avatar-md { 123 | margin-inline-start: -.9rem; 124 | } 125 | 126 | .avatar-lg { 127 | margin-inline-start: -1.5rem; 128 | } 129 | 130 | .avatar-xl { 131 | margin-inline-start: -1.75rem; 132 | } 133 | } 134 | 135 | @each $state in map-keys($theme-colors) { 136 | .avatar .avatar-shadow-#{$state} { 137 | --#{$prefix}avatar-icon-color: var(--#{$prefix}#{$state}); 138 | --#{$prefix}avatar-icon-shadow-color: var(--#{$prefix}#{$state}-rgb); 139 | --#{$prefix}avatar-icon-bg: var(--#{$prefix}#{$state}-bg-subtle); 140 | } 141 | } 142 | -------------------------------------------------------------------------------- /scss/_components/_base.scss: -------------------------------------------------------------------------------- 1 | /* App Overlay 2 | ******************************************************************************* */ 3 | 4 | .app-overlay { 5 | position: absolute; 6 | z-index: 3; 7 | background-color: transparent; 8 | inset: 0; 9 | transition: all .25s ease-in-out; 10 | visibility: hidden; 11 | 12 | &.show { 13 | background-color: rgba($black, .5); 14 | visibility: visible; 15 | } 16 | } 17 | 18 | /* IE Fixes 19 | ******************************************************************************* */ 20 | 21 | @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { 22 | /* Fix IE parent container height bug when containing image with fluid width */ 23 | .card, 24 | .card-body, 25 | .media, 26 | .flex-column, 27 | .tab-content { 28 | min-block-size: 1px; 29 | } 30 | 31 | img { 32 | block-size: auto; 33 | min-block-size: 1px; 34 | } 35 | } 36 | 37 | /* Containers 38 | ******************************************************************************* */ 39 | 40 | .container, 41 | .container-fluid, 42 | .container-xxl { 43 | padding-inline: $container-padding-x-sm; 44 | 45 | @include media-breakpoint-up(lg) { 46 | padding-inline: $container-padding-x; 47 | } 48 | } 49 | 50 | /* Buy now section 51 | ******************************************************************************* */ 52 | .buy-now { 53 | .btn-buy-now { 54 | position: fixed; 55 | z-index: $zindex-menu-fixed; 56 | box-shadow: 0 1px 20px 1px $danger; 57 | inset-block-end: 3rem; 58 | inset-inline-end: $container-padding-x; 59 | 60 | &:hover { 61 | box-shadow: none; 62 | } 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /scss/_components/_common.scss: -------------------------------------------------------------------------------- 1 | /* Common 2 | ******************************************************************************* */ 3 | 4 | @import "../_bootstrap-extended/include"; 5 | 6 | /* Line Clamp with ellipsis 7 | ******************************************************************************* */ 8 | 9 | $clamp-numbers: ( 10 | "1": 1, 11 | "2": 2, 12 | "3": 3 13 | ) !default; 14 | 15 | @each $clamp-class, $clamp-value in $clamp-numbers { 16 | .line-clamp-#{$clamp-class} { 17 | display: -webkit-box; 18 | overflow: hidden; 19 | -webkit-box-orient: vertical; 20 | -webkit-line-clamp: $clamp-value; 21 | } 22 | } 23 | 24 | /* Background 25 | ******************************************************************************* */ 26 | 27 | .ui-bg-cover { 28 | background-color: rgb(0 0 0 / 0%); 29 | background-position: center center; 30 | background-size: cover; 31 | } 32 | 33 | .ui-bg-overlay-container, 34 | .ui-bg-video-container { 35 | position: relative; 36 | 37 | > * { 38 | position: relative; 39 | } 40 | } 41 | 42 | .ui-bg-overlay-container .ui-bg-overlay { 43 | position: absolute; 44 | display: block; 45 | background-color: var(--#{$prefix}gray-900); 46 | inset: 0; 47 | } 48 | -------------------------------------------------------------------------------- /scss/_components/_footer.scss: -------------------------------------------------------------------------------- 1 | /* Footer 2 | ******************************************************************************* */ 3 | 4 | .footer { 5 | --#{$prefix}footer-color: #{$footer-color}; 6 | --#{$prefix}footer-bg: #{$footer-bg}; 7 | --#{$prefix}footer-border-width: #{$footer-border-width}; 8 | --#{$prefix}footer-border-color: #{$footer-border-color}; 9 | --#{$prefix}footer-link-color: #{$footer-link-color}; 10 | --#{$prefix}footer-link-hover-color: #{$footer-link-hover-color}; 11 | --#{$prefix}footer-link-disabled-color: #{$footer-link-disabled-color}; 12 | --#{$prefix}footer-link-active-color: #{$footer-link-active-color}; 13 | --#{$prefix}footer-brand-color: #{$footer-brand-color}; 14 | --#{$prefix}footer-brand-hover-color: #{$footer-brand-hover-color}; 15 | --#{$prefix}footer-box-shadow: #{$footer-box-shadow}; 16 | 17 | color: var(--#{$prefix}footer-color); 18 | 19 | .footer-brand{ 20 | color: var(--#{$prefix}footer-brand-color); 21 | &:hover, 22 | &:focus { 23 | color: var(--#{$prefix}footer-brand-hover-color); 24 | } 25 | } 26 | 27 | &.content-footer .footer-container { 28 | block-size: 54px; 29 | } 30 | 31 | .footer-link { 32 | display: inline-block; 33 | color: var(--#{$prefix}footer-link-color); 34 | &:hover, 35 | &:focus { 36 | color: var(--#{$prefix}footer-link-hover-color); 37 | } 38 | &.disabled { 39 | color: var(--#{$prefix}footer-link-disabled-color) !important; 40 | } 41 | &:active, 42 | &.active { 43 | color: var(--#{$prefix}footer-link-active-color); 44 | } 45 | } 46 | &.bg-footer-theme { 47 | --#{$prefix}footer-brand-color: var(--#{$prefix}body-color); 48 | } 49 | &.bg-light { 50 | --#{$prefix}footer-brand-hover-color: color-mix(in sRGB, var(--#{$prefix}paper-bg) 40%, var(--#{$prefix}light-contrast)); 51 | --#{$prefix}footer-link-hover-color: var(--#{$prefix}light-contrast); 52 | --#{$prefix}footer-color: var(--#{$prefix}body-color); 53 | --#{$prefix}footer-link-color: var(--#{$prefix}body-color); 54 | --#{$prefix}footer-brand-color: var(--#{$prefix}heading-color); 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /scss/_components/_include.scss: -------------------------------------------------------------------------------- 1 | // Include 2 | // ******************************************************************************* 3 | 4 | @import "../_bootstrap-extended/include"; 5 | 6 | 7 | // Components variables 8 | @import "../_custom-variables/components"; // Components variable (for customization purpose) 9 | @import "variables"; // Components variable 10 | -------------------------------------------------------------------------------- /scss/_components/_root.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | /* Menu */ 3 | --#{$prefix}menu-bg: #{$menu-bg}; 4 | --#{$prefix}menu-bg-rgb: #{$menu-bg-rgb}; 5 | --#{$prefix}menu-color: #{$menu-color}; 6 | --#{$prefix}menu-color-rgb: #{$menu-color-rgb}; 7 | --#{$prefix}menu-hover-bg: #{$menu-hover-bg}; 8 | --#{$prefix}menu-hover-color: #{$menu-hover-color}; 9 | --#{$prefix}menu-sub-active-bg: var(--#{$prefix}primary-bg-subtle); 10 | --#{$prefix}menu-sub-active-color: var(--#{$prefix}primary); 11 | --#{$prefix}menu-active-color: #{$menu-active-color}; 12 | --#{$prefix}menu-active-bg: #{$menu-active-bg}; 13 | --#{$prefix}menu-active-toggle-bg: #{$menu-active-toggle-bg}; 14 | --#{$prefix}menu-horizontal-active-bg: var(--#{$prefix}menu-bg); 15 | --#{$prefix}menu-box-shadow: #{$menu-box-shadow}; 16 | --#{$prefix}menu-divider-color: #{var(--#{$prefix}white)}; 17 | --#{$prefix}menu-width: #{$menu-width}; 18 | --#{$prefix}menu-collapsed-width: #{$menu-collapsed-width}; 19 | --#{$prefix}menu-item-spacer: #{$menu-item-spacer}; 20 | --#{$prefix}menu-vertical-link-padding-y: #{$menu-vertical-link-padding-y}; 21 | --#{$prefix}menu-vertical-link-padding-x: #{$menu-vertical-link-padding-x}; 22 | --#{$prefix}menu-vertical-menu-link-padding-y: #{$menu-vertical-menu-link-padding-y}; 23 | --#{$prefix}menu-vertical-menu-level-spacer: #{$menu-vertical-menu-level-spacer}; 24 | --#{$prefix}menu-horizontal-menu-box-shadow: #{$menu-horizontal-menu-box-shadow}; 25 | } 26 | -------------------------------------------------------------------------------- /scss/_components/_text-divider.scss: -------------------------------------------------------------------------------- 1 | /* Divider 2 | ******************************************************************************* */ 3 | 4 | .divider { 5 | --#{$prefix}divider-color: #{$divider-color}; 6 | display: block; 7 | overflow: hidden; 8 | margin-block: $divider-margin-y; 9 | margin-inline: $divider-margin-x; 10 | text-align: center; 11 | white-space: nowrap; 12 | 13 | .divider-text { 14 | position: relative; 15 | display: inline-block; 16 | color: $divider-text-color; 17 | font-size: $divider-font-size; 18 | padding-block: $divider-text-padding-y; 19 | padding-inline: $divider-text-padding-x; 20 | 21 | .icon-base { 22 | @include icon-base($divider-icon-size); 23 | } 24 | 25 | &::before, 26 | &::after { 27 | position: absolute; 28 | border-block-start: 1px solid var(--#{$prefix}divider-color); 29 | content: ""; 30 | inline-size: 100vw; 31 | inset-block-start: 50%; 32 | } 33 | 34 | &::before { 35 | inset-inline-end: 100%; 36 | } 37 | 38 | &::after { 39 | inset-inline-start: 100%; 40 | } 41 | } 42 | 43 | &.text-start { 44 | .divider-text { 45 | padding-inline-start: 0; 46 | } 47 | } 48 | 49 | &.text-end { 50 | .divider-text { 51 | padding-inline-end: 0; 52 | } 53 | } 54 | 55 | &.text-start-center { 56 | .divider-text { 57 | inset-inline-start: -25%; 58 | } 59 | } 60 | 61 | &.text-end-center { 62 | .divider-text { 63 | inset-inline-end: -25%; 64 | } 65 | } 66 | 67 | // Dotted Bordered Divider 68 | &.divider-dotted { 69 | .divider-text { 70 | &::before, 71 | &::after { 72 | border-width: 0 1px 1px; 73 | border-style: dotted; 74 | border-color: var(--#{$prefix}divider-color); 75 | } 76 | } 77 | } 78 | 79 | // Dashed Bordered Divider 80 | &.divider-dashed { 81 | .divider-text { 82 | &::before, 83 | &::after { 84 | border-width: 0 1px 1px; 85 | border-style: dashed; 86 | border-color: var(--#{$prefix}divider-color); 87 | } 88 | } 89 | } 90 | } 91 | 92 | @each $state in map-keys($theme-colors) { 93 | .divider-#{$state} { 94 | --#{$prefix}divider-color: var(--#{$prefix}#{$state}); 95 | } 96 | } 97 | -------------------------------------------------------------------------------- /scss/_components/_variables.scss: -------------------------------------------------------------------------------- 1 | // Navbar (custom navbar) 2 | // ******************************************************************************* 3 | $navbar-height: 4rem !default; 4 | $navbar-suggestion-width: 100% !default; 5 | $navbar-suggestion-height: 28rem !default; 6 | $navbar-suggestion-border-radius: .5rem !default; 7 | $navbar-dropdown-width: 22rem !default; 8 | $navbar-dropdown-content-height: 30rem !default; 9 | $navbar-dropdown-hover-bg: var(--#{$prefix}gray-60) !default; 10 | $navbar-dropdown-icon-bg: var(--#{$prefix}gray-80) !default; 11 | $navbar-notifications-dropdown-item-padding-y: .75rem !default; 12 | $navbar-notifications-dropdown-item-padding-x: 1rem !default; 13 | 14 | // Menu 15 | // ******************************************************************************* 16 | 17 | $menu-width: 16.25rem !default; 18 | $menu-collapsed-width: 5.25rem !default; 19 | $menu-collapsed-layout-breakpoint: xl !default; 20 | $menu-font-size: $font-size-base !default; 21 | 22 | $menu-item-spacer: .125rem !default; 23 | $menu-link-spacer-x: .5rem !default; 24 | 25 | $menu-vertical-link-margin-x: 1rem !default; 26 | $menu-vertical-link-padding-y: .3125rem !default; 27 | $menu-vertical-link-padding-x: .9375rem !default; 28 | $menu-vertical-header-margin-y: 1rem !default; 29 | $menu-vertical-header-margin-x: 0 !default; 30 | $menu-vertical-menu-link-padding-y: .3125rem !default; 31 | $menu-vertical-menu-level-spacer: .65rem !default; 32 | 33 | $menu-horizontal-spacer-x: .375rem !default; 34 | $menu-horizontal-item-spacer: .5rem !default; 35 | $menu-horizontal-link-padding-y: .625rem !default; 36 | $menu-horizontal-link-padding-x: 1rem !default; 37 | $menu-horizontal-menu-link-padding-y: .625rem !default; 38 | $menu-horizontal-menu-level-spacer: 2rem !default; 39 | $menu-horizontal-menu-box-shadow: $dropdown-box-shadow !default; 40 | 41 | $menu-sub-width: 14.5rem !default; 42 | $menu-control-width: 2.25rem !default; 43 | $menu-control-arrow-size: .5rem !default; 44 | 45 | $menu-icon-expanded-width: 1.5rem !default; 46 | $menu-icon-expanded-left-spacer: 1.675rem !default; 47 | $menu-icon-expanded-font-size: 1.375rem !default; 48 | $menu-icon-expanded-spacer: .5rem !default; 49 | 50 | $menu-animation-duration: .3s !default; 51 | 52 | $menu-bg: var(--#{$prefix}paper-bg) !default; 53 | $menu-bg-rgb: var(--#{$prefix}paper-bg-rgb) !default; 54 | $menu-color: $headings-color !default; 55 | $menu-color-rgb: #{to-rgb($menu-color)} !default; 56 | $menu-hover-bg: $gray-60 !default; 57 | $menu-hover-color: $headings-color !default; 58 | $menu-active-bg: var(--#{$prefix}primary-bg-subtle) !default; 59 | $menu-active-color: var(--#{$prefix}primary) !default; 60 | $menu-active-toggle-bg: $gray-80 !default; 61 | $menu-box-shadow: $box-shadow-sm !default; 62 | $menu-divider-color: transparent !default; 63 | 64 | 65 | $menu-max-levels: 5 !default; 66 | 67 | // Footer 68 | // ******************************************************************************* 69 | 70 | 71 | $footer-bg: var(--#{$prefix}paper-bg) !default; 72 | $footer-color: var(--#{$prefix}body-color) !default; 73 | $footer-border-width: 0 !default; 74 | $footer-border-color: var(--#{$prefix}border-color) !default; 75 | $footer-link-color: var(--#{$prefix}primary) !default; 76 | $footer-link-hover-color: rgba(var(--#{$prefix}primary-rgb), .8) !default; 77 | $footer-link-disabled-color: var(--#{$prefix}gray-300) !default; 78 | $footer-link-active-color: var(--#{$prefix}primary) !default; 79 | $footer-brand-color: $footer-link-active-color !default; 80 | $footer-brand-hover-color: color-mix(in sRGB, #{$footer-link-active-color} #{$bg-label-tint-amount}, var(--#{$prefix}paper-bg)) !default; 81 | $footer-box-shadow: var(--#{$prefix}box-shadow-lg) !default; 82 | 83 | // Avatars 84 | // ******************************************************************************* 85 | 86 | // (Height & Width, Font Size, status indicator position) 87 | 88 | $avatar-size: 2.375rem !default; /* Default */ 89 | $avatar-sizes: ( 90 | xs: (1.5rem, .625rem, 1px), 91 | sm: (2rem, .8125rem, 2px), 92 | md: (3rem, 1.125rem, 3px), 93 | lg: (3.5rem, 1.5rem, 4px), 94 | xl: (4rem, 1.875rem, 5px) 95 | ) !default; 96 | 97 | $avatar-group-border: var(--#{$prefix}paper-bg) !default; 98 | $avatar-initial-bg: #eeedf0 !default; 99 | 100 | // Text Divider 101 | // ******************************************************************************* 102 | $divider-color: var(--#{$prefix}gray-200) !default; 103 | $divider-text-color: var(--#{$prefix}heading-color) !default; 104 | 105 | $divider-margin-y: 1rem !default; 106 | $divider-margin-x: 0 !default; 107 | $divider-text-padding-y: 0 !default; 108 | $divider-text-padding-x: .677rem !default; 109 | 110 | $divider-font-size: $font-size-base !default; 111 | $divider-icon-size: 1rem !default; 112 | -------------------------------------------------------------------------------- /scss/_custom-styles.scss: -------------------------------------------------------------------------------- 1 | // This file is used for writing your custom styles 2 | 3 | // .card { 4 | // background-color: #fd0000; 5 | // } 6 | -------------------------------------------------------------------------------- /scss/_custom-variables/_bootstrap-extended.scss: -------------------------------------------------------------------------------- 1 | // =================================================================================================================== 2 | // ? TIP: It is recommended to use this file for overriding bootstrap extended variables (_bootstrap-extended/_variables.scss). 3 | // Copy and paste variables as needed, modify their values, and remove the !default flag. 4 | // =================================================================================================================== 5 | 6 | // $font-size-root: 14px !default; 7 | // $success: #00ff00 !default; 8 | -------------------------------------------------------------------------------- /scss/_custom-variables/_components.scss: -------------------------------------------------------------------------------- 1 | // ================================================================================================ 2 | // ? TIP: It is recommended to use this file for overriding component variables (_components/_variables.scss). 3 | // Copy and paste variables as needed, modify their values, and remove the !default flag. 4 | // ================================================================================================ 5 | 6 | // $menu-color: #000 !default; 7 | -------------------------------------------------------------------------------- /scss/core.scss: -------------------------------------------------------------------------------- 1 | @import "bootstrap"; 2 | @import "colors"; 3 | @import "bootstrap-extended"; 4 | @import "components"; 5 | @import "custom-styles"; 6 | -------------------------------------------------------------------------------- /scss/pages/page-icons.scss: -------------------------------------------------------------------------------- 1 | /* Page Icons (Page specific only) 2 | ******************************************************************************* */ 3 | 4 | @import "../_bootstrap-extended/include"; 5 | 6 | #icons-container { 7 | .icon-card { 8 | inline-size: 128px; 9 | 10 | .icon-base { 11 | @include icon-base(2rem); 12 | } 13 | } 14 | } 15 | 16 | @media (width <= 1024px) { 17 | #icons-container { 18 | .icon-card { 19 | flex: 1 1 auto; 20 | inline-size: 126px; 21 | } 22 | } 23 | } 24 | 25 | @include media-breakpoint-down(md) { 26 | #icons-container { 27 | .icon-card { 28 | inline-size: 131px; 29 | } 30 | } 31 | } 32 | 33 | @media (width <= 414px) { 34 | #icons-container { 35 | .icon-card { 36 | inline-size: 110px; 37 | } 38 | } 39 | } 40 | 41 | @media (width <= 375px) { 42 | #icons-container { 43 | .icon-card { 44 | inline-size: 150px; 45 | } 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /scss/pages/page-misc.scss: -------------------------------------------------------------------------------- 1 | /* Miscellaneous 2 | ******************************************************************************* */ 3 | 4 | @import "../_bootstrap-extended/include"; 5 | 6 | .misc-wrapper { 7 | display: flex; 8 | flex-direction: column; 9 | align-items: center; 10 | justify-content: center; 11 | min-block-size: 12 | calc( 13 | 100vh - calc(#{$container-padding-y} * 2) 14 | ); /* ?we have added container-p-y class to add padding on top & bottom */ 15 | 16 | text-align: center; 17 | } 18 | -------------------------------------------------------------------------------- /tasks/build.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const { src, dest, series, parallel } = require('gulp'); 3 | const sass = require('gulp-dart-sass'); 4 | const localSass = require('sass'); 5 | const autoprefixer = require('gulp-autoprefixer'); 6 | const exec = require('gulp-exec'); 7 | const gulpIf = require('gulp-if'); 8 | const sourcemaps = require('gulp-sourcemaps'); 9 | const browserSync = require('browser-sync').create(); 10 | const useref = require('gulp-useref'); 11 | const webpack = require('webpack'); 12 | const log = require('fancy-log'); 13 | const colors = require('ansi-colors'); 14 | const rename = require('gulp-rename'); 15 | 16 | module.exports = (conf, srcGlob) => { 17 | // Build CSS 18 | // ------------------------------------------------------------------------------- 19 | const buildCssTask = function (cb) { 20 | const sassCommand = `sass --load-path=node_modules/ scss:${conf.distPath}/css fonts:${conf.distPath}/fonts libs:${conf.distPath}/libs`; 21 | const sassCommandWithMinify = `${sassCommand} --style compressed --no-source-map`; 22 | const sassCommandWithoutSourceMap = `${sassCommand} --no-source-map`; 23 | 24 | return src(srcGlob('**/*.scss', '!**/_*.scss')) 25 | .pipe(gulpIf(conf.sourcemaps, sourcemaps.init())) 26 | .pipe( 27 | gulpIf( 28 | localSass, 29 | exec( 30 | // If conf.minify == true, generate compressed style without sourcemap 31 | gulpIf( 32 | conf.minify, 33 | `sass --load-path=node_modules/ scss:${conf.distPath}/css fonts:${conf.distPath}/fonts libs:${conf.distPath}/libs --style compressed --no-source-map`, 34 | `sass --load-path=node_modules/ scss:${conf.distPath}/css fonts:${conf.distPath}/fonts libs:${conf.distPath}/libs --no-source-map` 35 | ), 36 | function (err) { 37 | cb(err); 38 | } 39 | ), 40 | sass 41 | .sync({ 42 | includePaths: ['node_modules'], 43 | outputStyle: conf.minify ? 'compressed' : 'expanded' 44 | }) 45 | .on('error', sass.logError) 46 | ) 47 | ) 48 | .pipe(gulpIf(conf.sourcemaps, sourcemaps.write())) 49 | .pipe( 50 | rename(function (path) { 51 | path.dirname = path.dirname.replace('scss', 'css'); 52 | }) 53 | ) 54 | .pipe(dest(conf.distPath)) 55 | .pipe(browserSync.stream()); 56 | }; 57 | // Autoprefix css 58 | const buildAutoprefixCssTask = function (cb) { 59 | return src(conf.distPath + '/css/**/*.css') 60 | .pipe( 61 | gulpIf( 62 | conf.sourcemaps, 63 | sourcemaps.init({ 64 | loadMaps: true 65 | }) 66 | ) 67 | ) 68 | .pipe(autoprefixer()) 69 | .pipe(gulpIf(conf.sourcemaps, sourcemaps.write())) 70 | .pipe(dest(conf.distPath + '/css')) 71 | .pipe(browserSync.stream()); 72 | }; 73 | 74 | // Build JS 75 | // ------------------------------------------------------------------------------- 76 | const buildJsTask = function (cb) { 77 | setTimeout(function () { 78 | webpack(require('../webpack.config'), (err, stats) => { 79 | if (err) { 80 | log(colors.gray('Webpack error:'), colors.red(err.stack || err)); 81 | if (err.details) log(colors.gray('Webpack error details:'), err.details); 82 | return cb(); 83 | } 84 | 85 | const info = stats.toJson(); 86 | 87 | if (stats.hasErrors()) { 88 | info.errors.forEach(e => log(colors.gray('Webpack compilation error:'), colors.red(e))); 89 | } 90 | 91 | if (stats.hasWarnings()) { 92 | info.warnings.forEach(w => log(colors.gray('Webpack compilation warning:'), colors.yellow(w))); 93 | } 94 | 95 | // Print log 96 | log( 97 | stats.toString({ 98 | colors: colors.enabled, 99 | hash: false, 100 | timings: false, 101 | chunks: false, 102 | chunkModules: false, 103 | modules: false, 104 | children: true, 105 | version: true, 106 | cached: false, 107 | cachedAssets: false, 108 | reasons: false, 109 | source: false, 110 | errorDetails: false 111 | }) 112 | ); 113 | 114 | cb(); 115 | browserSync.reload(); 116 | }); 117 | }, 1); 118 | }; 119 | 120 | // Copy 121 | // ------------------------------------------------------------------------------- 122 | 123 | const buildCopyTask = function () { 124 | return src( 125 | srcGlob( 126 | '**/*.png', 127 | '**/*.gif', 128 | '**/*.jpg', 129 | '**/*.jpeg', 130 | '**/*.svg', 131 | '**/*.swf', 132 | '**/*.eot', 133 | '**/*.ttf', 134 | '**/*.woff', 135 | '**/*.woff2' 136 | ) 137 | ).pipe(dest(conf.distPath)); 138 | }; 139 | 140 | // Iconify task 141 | // ------------------------------------------------------------------------------- 142 | const buildIconifyTask = function (cb) { 143 | // Create required directories without copying files 144 | const fs = require('fs'); 145 | const directories = ['./fonts/iconify', './assets/vendor/fonts', './dist/fonts']; 146 | 147 | directories.forEach(dir => { 148 | if (!fs.existsSync(dir)) { 149 | fs.mkdirSync(dir, { recursive: true }); 150 | } 151 | }); 152 | 153 | const iconify = require('child_process').spawn('node', ['./fonts/iconify/iconify.js']); 154 | 155 | iconify.stdout.on('data', data => { 156 | console.log(data.toString()); 157 | }); 158 | 159 | iconify.stderr.on('data', data => { 160 | console.error(data.toString()); 161 | }); 162 | 163 | iconify.on('close', code => { 164 | cb(); 165 | }); 166 | }; 167 | 168 | const buildAllTask = series(buildCssTask, buildJsTask, buildCopyTask, buildIconifyTask); 169 | 170 | // Exports 171 | // --------------------------------------------------------------------------- 172 | 173 | return { 174 | css: series(buildCssTask, buildAutoprefixCssTask), 175 | js: buildJsTask, 176 | copy: buildCopyTask, 177 | iconify: buildIconifyTask, 178 | all: buildAllTask 179 | }; 180 | }; 181 | -------------------------------------------------------------------------------- /tasks/prod.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const { src, dest, series } = require('gulp'); 3 | const purgecss = require('gulp-purgecss'); 4 | const replace = require('gulp-replace'); 5 | const useref = require('gulp-useref'); 6 | var uglify = require('gulp-uglify'); 7 | 8 | module.exports = conf => { 9 | // Copy templatePath html files and assets to buildPath 10 | // ------------------------------------------------------------------------------- 11 | const prodCopyHTMLTask = function () { 12 | return src(`${templatePath}/*.html`).pipe(dest(`${buildPath}/`)); 13 | }; 14 | 15 | const prodCopyAssetsTask = function () { 16 | return src('assets/**/*').pipe(dest(`${buildPath}/assets/`)); 17 | }; 18 | 19 | // Rename assets path 20 | // ------------------------------------------------------------------------------- 21 | const prodRenameTasks = function () { 22 | return src(`${buildPath}/**/*`) 23 | .pipe(replace('../../assets', 'assets')) 24 | .pipe(dest(`${buildPath}`)); 25 | }; 26 | 27 | // Combine js vendor assets in single core.js file using UseRef 28 | // ------------------------------------------------------------------------------- 29 | const prodUseRefTasks = function () { 30 | return src(`${buildPath}/*.html`).pipe(useref()).pipe(dest(buildPath)); 31 | }; 32 | 33 | // Uglify assets/js files 34 | //-------------------------------------------------------------------------------- 35 | const prodMinifyJSTasks = function () { 36 | return src(`${buildPath}/assets/js/**/*.js`) 37 | .pipe(uglify()) 38 | .pipe(dest(`${buildPath}/assets/js/`)); 39 | }; 40 | 41 | // Suppress DeprecationWarning for useref() 42 | process.removeAllListeners('warning'); 43 | 44 | process.on('warning', warning => { 45 | if (warning.name === 'DeprecationWarning' && warning.code === 'DEP0180') { 46 | return; 47 | } 48 | console.warn(warning.name, warning.message); 49 | }); 50 | 51 | const prodPurgecssTasks = function () { 52 | return src(`${buildPath}/**/*.css`) 53 | .pipe( 54 | purgecss({ 55 | content: [ 56 | `${buildPath}/*.html`, // Search all HTML files recursively 57 | `${buildPath}/**/*.js` // Also include JS files that might contain class names 58 | ], 59 | safelist: { 60 | standard: [/^(is-|has-)/] // Optional: safelist common utility classes 61 | } 62 | }) 63 | ) 64 | .pipe(dest(`${buildPath}`)); // Destination is the assets folder to overwrite in-place 65 | }; 66 | 67 | const prodAllTask = series( 68 | prodCopyHTMLTask, 69 | prodCopyAssetsTask, 70 | prodRenameTasks, 71 | prodMinifyJSTasks, 72 | prodPurgecssTasks, 73 | prodUseRefTasks 74 | ); 75 | 76 | // Exports 77 | // --------------------------------------------------------------------------- 78 | 79 | return { 80 | copy: prodCopyHTMLTask, 81 | copyAssests: prodCopyAssetsTask, 82 | rename: prodRenameTasks, 83 | useref: prodUseRefTasks, 84 | minifyJS: prodMinifyJSTasks, 85 | purgecss: prodPurgecssTasks, 86 | all: prodAllTask 87 | }; 88 | }; 89 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const glob = require('glob'); 3 | const TerserPlugin = require('terser-webpack-plugin'); 4 | // ------------------------------------------------------------------------------- 5 | // Config 6 | 7 | const conf = (() => { 8 | const _conf = require('./build-config'); 9 | return require('deepmerge').all([{}, _conf.base || {}, _conf[process.env.NODE_ENV] || {}]); 10 | })(); 11 | 12 | conf.distPath = path.resolve(__dirname, conf.distPath); 13 | 14 | // ------------------------------------------------------------------------------- 15 | // NPM packages to transpile 16 | 17 | const TRANSPILE_PACKAGES = ['bootstrap', 'popper.js', 'shepherd.js']; 18 | 19 | const packageRegex = package => `(?:\\\\|\\/)${package}(?:\\\\|\\/).+?\\.js$`; 20 | 21 | // ------------------------------------------------------------------------------- 22 | // Build config 23 | 24 | const collectEntries = () => { 25 | const fileList = glob.sync(`!(${conf.exclude.join('|')})/**/!(_)*.@(js|es6)`) || []; 26 | return fileList.reduce((entries, file) => { 27 | const filePath = file.replace(/\\/g, '/'); 28 | return { ...entries, [filePath.replace(/\.(?:js|es6)$/, '')]: `./${filePath}` }; 29 | }, {}); 30 | }; 31 | 32 | const babelLoader = () => ({ 33 | loader: 'babel-loader', 34 | options: { 35 | presets: [['@babel/preset-env', { targets: 'last 2 versions, ie >= 10' }]], 36 | plugins: [ 37 | '@babel/plugin-transform-destructuring', 38 | '@babel/plugin-transform-object-rest-spread', 39 | '@babel/plugin-transform-template-literals' 40 | ], 41 | babelrc: false 42 | } 43 | }); 44 | 45 | const webpackConfig = { 46 | mode: process.env.NODE_ENV === 'production' ? 'production' : 'development', 47 | performance: { 48 | hints: false, 49 | maxEntrypointSize: 512000, 50 | maxAssetSize: 512000 51 | }, 52 | entry: collectEntries(), 53 | 54 | output: { 55 | path: conf.distPath, 56 | filename: '[name].js', 57 | libraryTarget: 'umd' 58 | }, 59 | module: { 60 | rules: [ 61 | { 62 | // Transpile sources 63 | test: /\.es6$|\.js$/, 64 | exclude: [path.resolve(__dirname, 'node_modules')], 65 | use: [babelLoader()] 66 | }, 67 | { 68 | // Transpile required packages 69 | test: new RegExp(`(?:${TRANSPILE_PACKAGES.map(packageRegex).join(')|(?:')})`), 70 | include: [path.resolve(__dirname, 'node_modules')], 71 | use: [babelLoader()] 72 | }, 73 | { 74 | test: /\.css$/, 75 | use: [{ loader: 'style-loader' }, { loader: 'css-loader' }] 76 | }, 77 | { 78 | test: /\.scss$/, 79 | use: [{ loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'sass-loader' }] 80 | }, 81 | { 82 | test: /\.html$/, 83 | use: [ 84 | { 85 | loader: 'html-loader', 86 | options: { minimize: true } 87 | } 88 | ] 89 | } 90 | ] 91 | }, 92 | optimization: { 93 | minimize: true, 94 | minimizer: [ 95 | new TerserPlugin({ 96 | extractComments: false, 97 | terserOptions: { 98 | format: { 99 | comments: false 100 | }, 101 | compress: { 102 | drop_console: true 103 | } 104 | } 105 | }) 106 | ] 107 | }, 108 | plugins: [], 109 | 110 | externals: { 111 | jquery: 'jQuery', 112 | moment: 'moment', 113 | jsdom: 'jsdom', 114 | velocity: 'Velocity', 115 | hammer: 'Hammer', 116 | pace: '"pace-progress"', 117 | 'cross-fetch': 'fetch', 118 | // chartist: 'Chartist', 119 | 'popper.js': 'Popper', 120 | // blueimp-gallery plugin 121 | './blueimp-helper': 'jQuery', 122 | './blueimp-gallery': 'blueimpGallery', 123 | './blueimp-gallery-video': 'blueimpGallery' 124 | } 125 | }; 126 | 127 | // ------------------------------------------------------------------------------- 128 | // Sourcemaps 129 | if (conf.sourcemaps) { 130 | webpackConfig.devtool = conf.devtool; 131 | } 132 | 133 | // ------------------------------------------------------------------------------- 134 | // Minify 135 | 136 | // Minifies sources by default in production mode 137 | if (process.env.NODE_ENV !== 'production' && conf.minify) { 138 | webpackConfig.plugins.push( 139 | new TerserPlugin({ 140 | extractComments: false, 141 | terserOptions: { 142 | format: { 143 | comments: false 144 | }, 145 | compress: { 146 | drop_console: true 147 | } 148 | }, 149 | parallel: true 150 | }) 151 | ); 152 | } 153 | 154 | module.exports = webpackConfig; 155 | --------------------------------------------------------------------------------