├── .github └── workflows │ └── main.yml ├── CHANGELOG.md ├── ISSUE_TEMPLATE.md ├── LICENSE ├── README.md ├── assets ├── css │ ├── nucleo-icons.css │ ├── nucleo-svg.css │ ├── soft-ui-dashboard.css │ ├── soft-ui-dashboard.css.map │ └── soft-ui-dashboard.min.css ├── fonts │ ├── nucleo-icons.eot │ ├── nucleo-icons.svg │ ├── nucleo-icons.ttf │ ├── nucleo-icons.woff │ ├── nucleo-icons.woff2 │ ├── nucleo.eot │ ├── nucleo.ttf │ ├── nucleo.woff │ └── nucleo.woff2 ├── img │ ├── apple-icon.png │ ├── bg1.jpg │ ├── bruce-mars.jpg │ ├── curved-images │ │ ├── curved-10.jpg │ │ ├── curved-11.jpg │ │ ├── curved-6.jpg │ │ ├── curved-8.jpg │ │ ├── curved0.jpg │ │ ├── curved1.jpg │ │ ├── curved10.jpg │ │ ├── curved11-small.jpg │ │ ├── curved11.jpg │ │ ├── curved12.jpg │ │ ├── curved13.jpg │ │ ├── curved14.jpg │ │ ├── curved19.jpg │ │ ├── curved2.jpg │ │ ├── curved21.jpg │ │ ├── curved3.jpg │ │ ├── curved4.jpg │ │ ├── curved5-small.jpg │ │ ├── curved5.jpg │ │ ├── curved6-small.jpg │ │ ├── curved6.jpg │ │ ├── curved7.jpg │ │ ├── curved8.jpg │ │ ├── curved9.jpg │ │ └── white-curved.jpg │ ├── down-arrow-dark.svg │ ├── down-arrow-white.svg │ ├── down-arrow.svg │ ├── favicon.png │ ├── home-decor-1.jpg │ ├── home-decor-2.jpg │ ├── home-decor-3.jpg │ ├── illustrations │ │ ├── rocket-dark.png │ │ └── rocket-white.png │ ├── ivana-square.jpg │ ├── ivancik.jpg │ ├── kal-visuals-square.jpg │ ├── logo-ct-dark.png │ ├── logo-ct.png │ ├── logos │ │ ├── mastercard.png │ │ └── visa.png │ ├── marie.jpg │ ├── shapes │ │ ├── pattern-lines.svg │ │ ├── shape-1.svg │ │ ├── shape-2.svg │ │ ├── shape-3.svg │ │ ├── wave-down.svg │ │ ├── wave-up.svg │ │ ├── waves-gray.svg │ │ └── waves-white.svg │ ├── small-logos │ │ ├── icon-sun-cloud.png │ │ ├── logo-atlassian.svg │ │ ├── logo-invision.svg │ │ ├── logo-jira.svg │ │ ├── logo-slack.svg │ │ ├── logo-spotify.svg │ │ ├── logo-webdev.svg │ │ └── logo-xd.svg │ ├── team-1.jpg │ ├── team-2.jpg │ ├── team-3.jpg │ ├── team-4.jpg │ ├── theme │ │ ├── angular.jpg │ │ ├── bootstrap.jpg │ │ ├── dribbble.png │ │ ├── dropbox.png │ │ ├── mastercard.png │ │ ├── paypal.png │ │ ├── react.jpg │ │ ├── sketch.jpg │ │ ├── slack.png │ │ ├── spotify.jpeg │ │ ├── tim.png │ │ ├── unass.jpg │ │ ├── visa.png │ │ └── vue.jpg │ └── vr-bg.jpg ├── js │ ├── core │ │ ├── bootstrap.bundle.min.js │ │ ├── bootstrap.min.js │ │ └── popper.min.js │ ├── plugins │ │ ├── Chart.extension.js │ │ ├── bootstrap-notify.js │ │ ├── chartjs.min.js │ │ ├── perfect-scrollbar.min.js │ │ └── smooth-scrollbar.min.js │ ├── soft-ui-dashboard.js │ ├── soft-ui-dashboard.js.map │ └── soft-ui-dashboard.min.js └── scss │ ├── soft-ui-dashboard.scss │ └── soft-ui-dashboard │ ├── _alert.scss │ ├── _avatars.scss │ ├── _badge.scss │ ├── _breadcrumbs.scss │ ├── _buttons.scss │ ├── _cards.scss │ ├── _dark-version.scss │ ├── _dropdown.scss │ ├── _dropup.scss │ ├── _fixed-plugin.scss │ ├── _footer.scss │ ├── _forms.scss │ ├── _gradients.scss │ ├── _header.scss │ ├── _info-areas.scss │ ├── _misc.scss │ ├── _nav.scss │ ├── _navbar-vertical.scss │ ├── _navbar.scss │ ├── _pagination.scss │ ├── _popovers.scss │ ├── _progress.scss │ ├── _rtl.scss │ ├── _social-buttons.scss │ ├── _tables.scss │ ├── _tilt.scss │ ├── _timeline.scss │ ├── _tooltips.scss │ ├── _typography.scss │ ├── _utilities-extend.scss │ ├── _utilities.scss │ ├── _variables.scss │ ├── bootstrap │ ├── _accordion.scss │ ├── _alert.scss │ ├── _badge.scss │ ├── _breadcrumb.scss │ ├── _button-group.scss │ ├── _buttons.scss │ ├── _card.scss │ ├── _carousel.scss │ ├── _close.scss │ ├── _containers.scss │ ├── _dropdown.scss │ ├── _forms.scss │ ├── _functions.scss │ ├── _grid.scss │ ├── _helpers.scss │ ├── _images.scss │ ├── _list-group.scss │ ├── _maps.scss │ ├── _mixins.scss │ ├── _modal.scss │ ├── _nav.scss │ ├── _navbar.scss │ ├── _offcanvas.scss │ ├── _pagination.scss │ ├── _placeholders.scss │ ├── _popover.scss │ ├── _progress.scss │ ├── _reboot.scss │ ├── _root.scss │ ├── _spinners.scss │ ├── _tables.scss │ ├── _toasts.scss │ ├── _tooltip.scss │ ├── _transitions.scss │ ├── _type.scss │ ├── _utilities.scss │ ├── _variables-dark.scss │ ├── _variables.scss │ ├── bootstrap-grid.scss │ ├── bootstrap-reboot.scss │ ├── bootstrap-utilities.scss │ ├── bootstrap.scss │ ├── forms │ │ ├── _floating-labels.scss │ │ ├── _form-check.scss │ │ ├── _form-control.scss │ │ ├── _form-range.scss │ │ ├── _form-select.scss │ │ ├── _form-text.scss │ │ ├── _input-group.scss │ │ ├── _labels.scss │ │ └── _validation.scss │ ├── helpers │ │ ├── _clearfix.scss │ │ ├── _color-bg.scss │ │ ├── _colored-links.scss │ │ ├── _focus-ring.scss │ │ ├── _icon-link.scss │ │ ├── _position.scss │ │ ├── _ratio.scss │ │ ├── _stacks.scss │ │ ├── _stretched-link.scss │ │ ├── _text-truncation.scss │ │ ├── _visually-hidden.scss │ │ └── _vr.scss │ ├── mixins │ │ ├── _alert.scss │ │ ├── _backdrop.scss │ │ ├── _banner.scss │ │ ├── _border-radius.scss │ │ ├── _box-shadow.scss │ │ ├── _breakpoints.scss │ │ ├── _buttons.scss │ │ ├── _caret.scss │ │ ├── _clearfix.scss │ │ ├── _color-mode.scss │ │ ├── _color-scheme.scss │ │ ├── _container.scss │ │ ├── _deprecate.scss │ │ ├── _forms.scss │ │ ├── _gradients.scss │ │ ├── _grid.scss │ │ ├── _image.scss │ │ ├── _list-group.scss │ │ ├── _lists.scss │ │ ├── _pagination.scss │ │ ├── _reset-text.scss │ │ ├── _resize.scss │ │ ├── _table-variants.scss │ │ ├── _text-truncate.scss │ │ ├── _transition.scss │ │ ├── _utilities.scss │ │ └── _visually-hidden.scss │ ├── tests │ │ ├── jasmine.js │ │ ├── mixins │ │ │ ├── _auto-import-of-variables-dark.test.scss │ │ │ ├── _color-modes.test.scss │ │ │ ├── _media-query-color-mode-full.test.scss │ │ │ └── _utilities.test.scss │ │ ├── sass-true │ │ │ ├── register.js │ │ │ └── runner.js │ │ └── utilities │ │ │ └── _api.test.scss │ ├── utilities │ │ └── _api.scss │ └── vendor │ │ └── _rfs.scss │ ├── cards │ └── card-background.scss │ ├── custom │ ├── _styles.scss │ └── _variables.scss │ ├── forms │ ├── _form-check.scss │ ├── _form-select.scss │ ├── _form-switch.scss │ ├── _forms.scss │ ├── _input-group.scss │ ├── _inputs.scss │ └── _labels.scss │ ├── mixins │ ├── _badge.scss │ ├── _colored-shadows.scss │ ├── _container.scss │ ├── _hover.scss │ ├── _social-buttons.scss │ └── mixins.scss │ ├── plugins │ └── free │ │ ├── _flatpickr.scss │ │ ├── _nouislider.scss │ │ ├── _perfect-scrollbar.scss │ │ ├── _prism.scss │ │ └── plugins.scss │ ├── theme.scss │ └── variables │ ├── _animations.scss │ ├── _avatars.scss │ ├── _badge.scss │ ├── _breadcrumb.scss │ ├── _cards-extend.scss │ ├── _cards.scss │ ├── _choices.scss │ ├── _dark-version.scss │ ├── _dropdowns.scss │ ├── _fixed-plugin.scss │ ├── _form-switch.scss │ ├── _full-calendar.scss │ ├── _header.scss │ ├── _info-areas.scss │ ├── _misc-extend.scss │ ├── _misc.scss │ ├── _navbar-vertical.scss │ ├── _navbar.scss │ ├── _pagination.scss │ ├── _rtl.scss │ ├── _social-buttons.scss │ ├── _table.scss │ ├── _timeline.scss │ ├── _utilities-extend.scss │ ├── _utilities.scss │ └── _virtual-reality.scss ├── docs └── documentation.html ├── genezio.yaml ├── gulpfile.mjs ├── index.html ├── media ├── soft-ui-dashboard-intro.gif ├── soft-ui-dashboard-screen-billing.png ├── soft-ui-dashboard-screen-login.png ├── soft-ui-dashboard-screen-profile.png ├── soft-ui-dashboard-screen-rtl.png └── soft-ui-dashboard-screen.png ├── package.json └── pages ├── billing.html ├── dashboard.html ├── profile.html ├── rtl.html ├── sign-in.html ├── sign-up.html ├── tables.html └── virtual-reality.html /.github/workflows/main.yml: -------------------------------------------------------------------------------- 1 | name: Autocloser 2 | on: [issues] 3 | jobs: 4 | autoclose: 5 | runs-on: ubuntu-latest 6 | steps: 7 | - name: Issue auto-closer 8 | uses: roots/issue-closer-action@v1.1 9 | with: 10 | repo-token: ${{ secrets.GITHUB_TOKEN }} 11 | issue-close-message: "@${issue.user.login} this issue was automatically closed because it did not follow the bellow rules:\n\n
\n\n\n\nIMPORTANT: Please use the following link to create a new issue:\n\nhttps://www.creative-tim.com/new-issue/soft-ui-dashboard\n\n**If your issue was not created using the app above, it will be closed immediately.**\n\n\n\nLove Creative Tim? Do you need Angular, React, Vuejs or HTML? You can visit:\n👉  https://www.creative-tim.com/bundles\n👉  https://www.creative-tim.com\n\n\n
\n\n" 12 | issue-pattern: (\#\#\# Version([\S\s.*]*?)\#\#\# Reproduction link([\S\s.*]*?)\#\#\# Operating System([\S\s.*]*?)\#\#\# Device([\S\s.*]*?)\#\#\# Browser & Version([\S\s.*]*?)\#\#\# Steps to reproduce([\S\s.*]*?)\#\#\# What is expected([\S\s.*]*?)\#\#\# What is actually happening([\S\s.*]*?)---([\S\s.*]*?)\#\#\# Solution([\S\s.*]*?)\#\#\# Additional comments([\S\s.*]*?)\<\!-- generated by creative-tim-issues\. DO NOT REMOVE --\>)|(\#\#\# What is your enhancement([\S\s.*]*?)\<\!-- generated by creative-tim-issues\. DO NOT REMOVE --\>) 13 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | ## [1.1.0] 2024-10-25 4 | 5 | ### Updates & Bugfixing 6 | 7 | - upgrade Bootstrap version to v5.3.3 8 | - all plugins updated to the latest version 9 | 10 | ## [1.0.7] 2022-12-09 11 | 12 | ### Updates and Improvements 13 | 14 | - update Bootstrap to v5.2.3 15 | 16 | ## [1.0.6] 2022-06-03 17 | 18 | ### Updates and Improvements 19 | 20 | - update Bootstrap to v5.2.0-beta1 21 | - fix input-group focus issue 22 | 23 | ## [1.0.5] 2022-03-25 24 | 25 | ### Update 26 | 27 | - update SCSS folder 28 | 29 | ## [1.0.4] 2022-03-18 30 | 31 | ### Updates & Bugfixing 32 | 33 | - upgrade Bootstrap version to v5.1.3 34 | - upgrade ChartJs plugin version to v3.7.1 35 | - fix running 'npm install' issue 36 | - fix SCSS compiling issues 37 | - update sidebar height 38 | - fix sidebar button on Safari 39 | - update dropdown text on RTL page 40 | - fix navbar scroll error on example pages 41 | 42 | ## [1.0.3] 2021-06-25 43 | 44 | ### Updates & Improvements 45 | 46 | - upgrade Bootstrap version to v5.0.2 47 | - add new page - Virtual Reality 48 | - add perfectScrollbar for Windows users 49 | - change headings color from '#252F40' to '#344767' 50 | - reduce the 'img' folder size - compress images 51 | - bug fixing 52 | - fix W3 errors 53 | 54 | ## [1.0.2] 2021-05-10 55 | 56 | ### Updates & Bugfixing 57 | 58 | - upgrade Bootstrap version to v5.0.1 59 | - bug fixing 60 | 61 | ## [1.0.1] 2021-04-06 62 | 63 | ### Improvements 64 | 65 | - Design changes 66 | 67 | ## [1.0.0] 2021-04-02 68 | 69 | ### Original Release 70 | -------------------------------------------------------------------------------- /ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 8 | 9 | 14 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Creative Tim 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/nucleo-svg.css: -------------------------------------------------------------------------------- 1 | /* Generated using nucleoapp.com */ 2 | /* -------------------------------- 3 | 4 | Icon colors 5 | 6 | -------------------------------- */ 7 | 8 | .icon { 9 | display: inline-block; 10 | /* icon primary color */ 11 | color: #111111; 12 | height: 1em; 13 | width: 1em; 14 | } 15 | 16 | .icon use { 17 | /* icon secondary color - fill */ 18 | fill: #7ea6f6; 19 | } 20 | 21 | .icon.icon-outline use { 22 | /* icon secondary color - stroke */ 23 | stroke: #7ea6f6; 24 | } 25 | 26 | /* -------------------------------- 27 | 28 | Change icon size 29 | 30 | -------------------------------- */ 31 | 32 | .icon-xs { 33 | height: 0.5em; 34 | width: 0.5em; 35 | } 36 | 37 | .icon-sm { 38 | height: 0.8em; 39 | width: 0.8em; 40 | } 41 | 42 | .icon-lg { 43 | height: 1.6em; 44 | width: 1.6em; 45 | } 46 | 47 | .icon-xl { 48 | height: 2em; 49 | width: 2em; 50 | } 51 | 52 | /* -------------------------------- 53 | 54 | Align icon and text 55 | 56 | -------------------------------- */ 57 | 58 | .icon-text-aligner { 59 | /* add this class to parent element that contains icon + text */ 60 | display: flex; 61 | align-items: center; 62 | } 63 | 64 | .icon-text-aligner .icon { 65 | color: inherit; 66 | margin-right: 0.4em; 67 | } 68 | 69 | .icon-text-aligner .icon use { 70 | color: inherit; 71 | fill: currentColor; 72 | } 73 | 74 | .icon-text-aligner .icon.icon-outline use { 75 | stroke: currentColor; 76 | } 77 | 78 | /* -------------------------------- 79 | 80 | Icon reset values - used to enable color customizations 81 | 82 | -------------------------------- */ 83 | 84 | .icon { 85 | fill: currentColor; 86 | stroke: none; 87 | } 88 | 89 | .icon.icon-outline { 90 | fill: none; 91 | stroke: currentColor; 92 | } 93 | 94 | .icon use { 95 | stroke: none; 96 | } 97 | 98 | .icon.icon-outline use { 99 | fill: none; 100 | } 101 | 102 | /* -------------------------------- 103 | 104 | Stroke effects - Nucleo outline icons 105 | 106 | - 16px icons -> up to 1px stroke (16px outline icons do not support stroke changes) 107 | - 24px, 32px icons -> up to 2px stroke 108 | - 48px, 64px icons -> up to 4px stroke 109 | 110 | -------------------------------- */ 111 | 112 | .icon-outline.icon-stroke-1 { 113 | stroke-width: 1px; 114 | } 115 | 116 | .icon-outline.icon-stroke-2 { 117 | stroke-width: 2px; 118 | } 119 | 120 | .icon-outline.icon-stroke-3 { 121 | stroke-width: 3px; 122 | } 123 | 124 | .icon-outline.icon-stroke-4 { 125 | stroke-width: 4px; 126 | } 127 | 128 | .icon-outline.icon-stroke-1 use, 129 | .icon-outline.icon-stroke-3 use { 130 | -webkit-transform: translateX(0.5px) translateY(0.5px); 131 | -moz-transform: translateX(0.5px) translateY(0.5px); 132 | -ms-transform: translateX(0.5px) translateY(0.5px); 133 | -o-transform: translateX(0.5px) translateY(0.5px); 134 | transform: translateX(0.5px) translateY(0.5px); 135 | } -------------------------------------------------------------------------------- /assets/img/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/assets/img/apple-icon.png -------------------------------------------------------------------------------- /assets/img/bg1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/assets/img/bg1.jpg -------------------------------------------------------------------------------- /assets/img/bruce-mars.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/assets/img/bruce-mars.jpg -------------------------------------------------------------------------------- /assets/img/curved-images/curved-10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/assets/img/curved-images/curved-10.jpg -------------------------------------------------------------------------------- /assets/img/curved-images/curved-11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/assets/img/curved-images/curved-11.jpg -------------------------------------------------------------------------------- /assets/img/curved-images/curved-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/assets/img/curved-images/curved-6.jpg -------------------------------------------------------------------------------- /assets/img/curved-images/curved-8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/assets/img/curved-images/curved-8.jpg -------------------------------------------------------------------------------- /assets/img/curved-images/curved0.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/assets/img/curved-images/curved0.jpg -------------------------------------------------------------------------------- /assets/img/curved-images/curved1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/assets/img/curved-images/curved1.jpg -------------------------------------------------------------------------------- /assets/img/curved-images/curved10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/assets/img/curved-images/curved10.jpg -------------------------------------------------------------------------------- /assets/img/curved-images/curved11-small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/assets/img/curved-images/curved11-small.jpg -------------------------------------------------------------------------------- /assets/img/curved-images/curved11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/assets/img/curved-images/curved11.jpg -------------------------------------------------------------------------------- /assets/img/curved-images/curved12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/assets/img/curved-images/curved12.jpg -------------------------------------------------------------------------------- /assets/img/curved-images/curved13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/assets/img/curved-images/curved13.jpg -------------------------------------------------------------------------------- /assets/img/curved-images/curved14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/assets/img/curved-images/curved14.jpg -------------------------------------------------------------------------------- /assets/img/curved-images/curved19.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/assets/img/curved-images/curved19.jpg -------------------------------------------------------------------------------- /assets/img/curved-images/curved2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/assets/img/curved-images/curved2.jpg -------------------------------------------------------------------------------- /assets/img/curved-images/curved21.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/assets/img/curved-images/curved21.jpg -------------------------------------------------------------------------------- /assets/img/curved-images/curved3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/assets/img/curved-images/curved3.jpg -------------------------------------------------------------------------------- /assets/img/curved-images/curved4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/assets/img/curved-images/curved4.jpg -------------------------------------------------------------------------------- /assets/img/curved-images/curved5-small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/assets/img/curved-images/curved5-small.jpg -------------------------------------------------------------------------------- /assets/img/curved-images/curved5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/assets/img/curved-images/curved5.jpg -------------------------------------------------------------------------------- /assets/img/curved-images/curved6-small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/assets/img/curved-images/curved6-small.jpg -------------------------------------------------------------------------------- /assets/img/curved-images/curved6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/assets/img/curved-images/curved6.jpg -------------------------------------------------------------------------------- /assets/img/curved-images/curved7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/assets/img/curved-images/curved7.jpg -------------------------------------------------------------------------------- /assets/img/curved-images/curved8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/assets/img/curved-images/curved8.jpg -------------------------------------------------------------------------------- /assets/img/curved-images/curved9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/assets/img/curved-images/curved9.jpg -------------------------------------------------------------------------------- /assets/img/curved-images/white-curved.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/assets/img/curved-images/white-curved.jpg -------------------------------------------------------------------------------- /assets/img/down-arrow-dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | down-arrow 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /assets/img/down-arrow-white.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/img/down-arrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | down-arrow 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /assets/img/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/assets/img/favicon.png -------------------------------------------------------------------------------- /assets/img/home-decor-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/assets/img/home-decor-1.jpg -------------------------------------------------------------------------------- /assets/img/home-decor-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/assets/img/home-decor-2.jpg -------------------------------------------------------------------------------- /assets/img/home-decor-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/assets/img/home-decor-3.jpg -------------------------------------------------------------------------------- /assets/img/illustrations/rocket-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/assets/img/illustrations/rocket-dark.png -------------------------------------------------------------------------------- /assets/img/illustrations/rocket-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/assets/img/illustrations/rocket-white.png -------------------------------------------------------------------------------- /assets/img/ivana-square.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/assets/img/ivana-square.jpg -------------------------------------------------------------------------------- /assets/img/ivancik.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/assets/img/ivancik.jpg -------------------------------------------------------------------------------- /assets/img/kal-visuals-square.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/assets/img/kal-visuals-square.jpg -------------------------------------------------------------------------------- /assets/img/logo-ct-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/assets/img/logo-ct-dark.png -------------------------------------------------------------------------------- /assets/img/logo-ct.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/assets/img/logo-ct.png -------------------------------------------------------------------------------- /assets/img/logos/mastercard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/assets/img/logos/mastercard.png -------------------------------------------------------------------------------- /assets/img/logos/visa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/assets/img/logos/visa.png -------------------------------------------------------------------------------- /assets/img/marie.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/assets/img/marie.jpg -------------------------------------------------------------------------------- /assets/img/shapes/shape-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/img/shapes/shape-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/img/shapes/shape-3.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/img/shapes/wave-down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | wave-down 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /assets/img/shapes/wave-up.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | wave-up 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /assets/img/small-logos/icon-sun-cloud.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/assets/img/small-logos/icon-sun-cloud.png -------------------------------------------------------------------------------- /assets/img/small-logos/logo-atlassian.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Logos 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /assets/img/small-logos/logo-invision.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Logos 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /assets/img/small-logos/logo-jira.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Logos 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /assets/img/small-logos/logo-slack.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Logos 4 | 5 | 11 | 12 | -------------------------------------------------------------------------------- /assets/img/small-logos/logo-spotify.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Logos 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /assets/img/small-logos/logo-webdev.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Logos 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /assets/img/small-logos/logo-xd.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Logos 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /assets/img/team-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/assets/img/team-1.jpg -------------------------------------------------------------------------------- /assets/img/team-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/assets/img/team-2.jpg -------------------------------------------------------------------------------- /assets/img/team-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/assets/img/team-3.jpg -------------------------------------------------------------------------------- /assets/img/team-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/assets/img/team-4.jpg -------------------------------------------------------------------------------- /assets/img/theme/angular.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/assets/img/theme/angular.jpg -------------------------------------------------------------------------------- /assets/img/theme/bootstrap.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/assets/img/theme/bootstrap.jpg -------------------------------------------------------------------------------- /assets/img/theme/dribbble.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/assets/img/theme/dribbble.png -------------------------------------------------------------------------------- /assets/img/theme/dropbox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/assets/img/theme/dropbox.png -------------------------------------------------------------------------------- /assets/img/theme/mastercard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/assets/img/theme/mastercard.png -------------------------------------------------------------------------------- /assets/img/theme/paypal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/assets/img/theme/paypal.png -------------------------------------------------------------------------------- /assets/img/theme/react.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/assets/img/theme/react.jpg -------------------------------------------------------------------------------- /assets/img/theme/sketch.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/assets/img/theme/sketch.jpg -------------------------------------------------------------------------------- /assets/img/theme/slack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/assets/img/theme/slack.png -------------------------------------------------------------------------------- /assets/img/theme/spotify.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/assets/img/theme/spotify.jpeg -------------------------------------------------------------------------------- /assets/img/theme/tim.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/assets/img/theme/tim.png -------------------------------------------------------------------------------- /assets/img/theme/unass.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/assets/img/theme/unass.jpg -------------------------------------------------------------------------------- /assets/img/theme/visa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/assets/img/theme/visa.png -------------------------------------------------------------------------------- /assets/img/theme/vue.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/assets/img/theme/vue.jpg -------------------------------------------------------------------------------- /assets/img/vr-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/assets/img/vr-bg.jpg -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard.scss: -------------------------------------------------------------------------------- 1 | // ========================================================= 2 | // * Soft UI Dashboard 3 - v1.1.0 3 | // ========================================================= 4 | // 5 | // * Product Page: https://www.creative-tim.com/product/soft-ui-dashboard 6 | // * Copyright 2024 Creative Tim (https://www.creative-tim.com) 7 | // 8 | // Coded by www.creative-tim.com 9 | // 10 | // ========================================================= 11 | // 12 | // * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 13 | 14 | // Bootstrap Functions 15 | @import "soft-ui-dashboard/bootstrap/functions"; 16 | 17 | // Custom Variables 18 | @import "soft-ui-dashboard/custom/variables"; 19 | 20 | // Theme Variables 21 | @import "soft-ui-dashboard/variables"; 22 | 23 | // Bootstrap Core 24 | @import "soft-ui-dashboard/bootstrap/bootstrap"; 25 | 26 | // Theme Core 27 | @import "soft-ui-dashboard/theme"; 28 | 29 | // Custom Variables 30 | @import "soft-ui-dashboard/custom/styles"; 31 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/_alert.scss: -------------------------------------------------------------------------------- 1 | @each $state, $value in $theme-gradient-colors { 2 | .alert-#{$state} { 3 | @include gradient-directional(nth($value, 1) 0%, darken(nth($value, -1), 8%) 100%, $deg: 310deg); 4 | } 5 | } 6 | 7 | .btn-close{ 8 | &:focus{ 9 | box-shadow: none; 10 | } 11 | } 12 | 13 | .alert-dismissible{ 14 | .btn-close{ 15 | background-image: none; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/_avatars.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Avatar 3 | // 4 | 5 | // General styles 6 | 7 | .avatar { 8 | color: $white; 9 | display: inline-flex; 10 | align-items: center; 11 | justify-content: center; 12 | font-size: $avatar-font-size; 13 | border-radius: $border-radius-lg; 14 | height: $avatar-height; 15 | width: $avatar-width; 16 | transition: all .2s ease-in-out; 17 | 18 | img { 19 | width: 100%; 20 | } 21 | 22 | &.rounded-circle { 23 | img { 24 | @extend .rounded-circle; 25 | } 26 | } 27 | 28 | + .avatar-content { 29 | display: inline-block; 30 | margin-left: $avatar-content-margin; 31 | } 32 | 33 | 34 | &.avatar-raised { 35 | margin-top: -($avatar-height * 0.5); 36 | } 37 | 38 | &.avatar-scale-up:hover { 39 | transform: scale(1.2); 40 | 41 | } 42 | } 43 | 44 | // Style for the Testimonials Carousel 45 | .active { 46 | .avatar.avatar-scale-up { 47 | transform: scale(1.2); 48 | } 49 | } 50 | 51 | 52 | // Avatar size variations 53 | 54 | .avatar-xxl { 55 | width: $avatar-xxl-width !important; 56 | height: $avatar-xxl-height !important; 57 | 58 | &.avatar-raised { 59 | margin-top: -($avatar-xxl-height * 0.5); 60 | } 61 | } 62 | 63 | .avatar-xl { 64 | width: $avatar-xl-width !important; 65 | height: $avatar-xl-height !important; 66 | 67 | &.avatar-raised { 68 | margin-top: -($avatar-xl-height * 0.5); 69 | } 70 | } 71 | 72 | .avatar-lg { 73 | width: $avatar-lg-width !important; 74 | height: $avatar-lg-height !important; 75 | font-size: $font-size-sm; 76 | 77 | &.avatar-raised { 78 | margin-top: -($avatar-lg-height * 0.5); 79 | } 80 | } 81 | 82 | .avatar-sm { 83 | width: $avatar-sm-width !important; 84 | height: $avatar-sm-height !important; 85 | font-size: $font-size-sm; 86 | 87 | &.avatar-raised { 88 | margin-top: -($avatar-sm-height * 0.5); 89 | } 90 | } 91 | 92 | .avatar-xs { 93 | width: $avatar-xs-width !important; 94 | height: $avatar-xs-height !important; 95 | font-size: $font-size-xs; 96 | 97 | &.avatar-raised { 98 | margin-top: -($avatar-xs-height * 0.5); 99 | } 100 | } 101 | 102 | // 103 | // Avatar group 104 | // 105 | 106 | // General styles 107 | 108 | .avatar-group { 109 | .avatar { 110 | position: relative; 111 | z-index: $avatar-group-zindex; 112 | border: $avatar-group-border solid $card-bg; 113 | 114 | &:hover { 115 | z-index: $avatar-group-zindex-hover; 116 | } 117 | } 118 | 119 | .avatar + .avatar { 120 | margin-left: $avatar-group-double; 121 | 122 | } 123 | } 124 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/_badge.scss: -------------------------------------------------------------------------------- 1 | @each $prop, $value in $theme-colors { 2 | .badge.bg-#{$prop} { 3 | background: $value; 4 | } 5 | } 6 | .badge { 7 | text-transform: uppercase; 8 | } 9 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/_breadcrumbs.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Breadcrumb 3 | // 4 | 5 | .breadcrumb-item { 6 | font-size: $font-size-sm; 7 | &.text-white{ 8 | &::before { 9 | color: $white; 10 | } 11 | } 12 | 13 | } 14 | 15 | .breadcrumb-dark { 16 | background-color: $breadcrumb-dark-bg; 17 | 18 | .breadcrumb-item { 19 | font-weight: 600; 20 | 21 | a { 22 | color: $breadcrumb-dark-color; 23 | 24 | &:hover { 25 | color: $breadcrumb-dark-hover-color; 26 | } 27 | } 28 | 29 | + .breadcrumb-item { 30 | &::before { 31 | color: $breadcrumb-dark-divider-color; 32 | } 33 | } 34 | 35 | &.active { 36 | color: $breadcrumb-dark-active-color; 37 | } 38 | } 39 | } 40 | 41 | 42 | // Links 43 | 44 | .breadcrumb-links { 45 | padding: 0; 46 | margin: 0; 47 | background: transparent; 48 | } 49 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/_cards.scss: -------------------------------------------------------------------------------- 1 | .card { 2 | box-shadow: $box-shadow-sm; 3 | .card-header { 4 | padding: $card-header-padding; 5 | } 6 | 7 | .card-body { 8 | padding: $card-body-padding; 9 | } 10 | 11 | &.card-plain { 12 | background-color: $card-plain-bg-color; 13 | box-shadow: $card-plain-box-shadow; 14 | border: none; 15 | } 16 | 17 | .card-footer { 18 | padding: $card-footer-padding; 19 | background-color: transparent; 20 | } 21 | } 22 | 23 | .author { 24 | display: $card-author-display; 25 | 26 | .name > span { 27 | line-height: $card-author-name-line-height; 28 | font-weight: $font-weight-bold; 29 | font-size: $font-size-sm; 30 | color: $card-author-name-color; 31 | } 32 | 33 | .stats { 34 | font-size: $font-size-sm; 35 | font-weight: $font-weight-normal; 36 | } 37 | } 38 | 39 | @import 'cards/card-background'; 40 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/_dropup.scss: -------------------------------------------------------------------------------- 1 | .dropup { 2 | .dropdown-menu { 3 | box-shadow: $dropdown-box-shadow; 4 | transition: $dropdown-transition; 5 | cursor: pointer; 6 | top: auto !important; 7 | bottom: 100% !important; 8 | margin-bottom: $dropup-mb !important; 9 | display: block; 10 | opacity: 0; 11 | transform-origin: $dropup-transform-origin; 12 | pointer-events: none; 13 | transform: $dropup-transform; 14 | -webkit-backface-visibility: hidden; 15 | backface-visibility: hidden; 16 | will-change: transform,box-shadow; 17 | 18 | &.show{ 19 | pointer-events: auto; 20 | transform: $dropup-transform-show; 21 | opacity: 1; 22 | 23 | &:after { 24 | bottom: -($dropup-animation-arrow-bottom-position - 2); 25 | } 26 | } 27 | 28 | &:after { 29 | font-family: "FontAwesome"; 30 | content: "\f0d7"; 31 | position: absolute; 32 | z-index: -1; 33 | bottom: $dropup-animation-arrow-bottom-position; 34 | left: $dropdown-animation-arrow-left-position; 35 | right: auto; 36 | font-size: $dropdown-animation-arrow-font-size; 37 | color: $white; 38 | transition: $dropup-animation-arrow-transition; 39 | } 40 | } 41 | } -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/_fixed-plugin.scss: -------------------------------------------------------------------------------- 1 | .fixed-plugin{ 2 | .fixed-plugin-button{ 3 | background: $white; 4 | border-radius: $fixed-plugin-radius; 5 | bottom: $fixed-plugin-bottom; 6 | right: $fixed-plugin-right; 7 | font-size: $font-size-xl; 8 | z-index: $fixed-plugin-button-z-index; 9 | box-shadow: $fixed-plugin-box-shadow; 10 | cursor: pointer; 11 | i{ 12 | pointer-events: none; 13 | } 14 | } 15 | .card{ 16 | position: fixed !important; 17 | right: -$fixed-plugin-card-width; 18 | top: 0; 19 | height: 100%; 20 | left: auto!important; 21 | transform: unset !important; 22 | width: $fixed-plugin-card-width; 23 | border-radius: 0; 24 | padding: 0 10px; 25 | transition: .2s ease; 26 | z-index: $fixed-plugin-card-z-index; 27 | } 28 | 29 | .badge{ 30 | border: 1px solid $white; 31 | border-radius: 50%; 32 | cursor: pointer; 33 | display: inline-block; 34 | height: 23px; 35 | margin-right: 5px; 36 | position: relative; 37 | width: 23px; 38 | transition: $transition-base; 39 | &:hover, 40 | &.active{ 41 | border-color: $dark; 42 | } 43 | } 44 | 45 | .btn.bg-gradient-primary:not(:disabled):not(.disabled){ 46 | border: 1px solid transparent; 47 | &:not(.active){ 48 | background-color: transparent; 49 | background-image: none; 50 | border: 1px solid $primary; 51 | color: $primary; 52 | } 53 | } 54 | 55 | &.show{ 56 | .card{ 57 | right: 0; 58 | } 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/_footer.scss: -------------------------------------------------------------------------------- 1 | .footer { 2 | .nav-link { 3 | color: $dark; 4 | font-weight: $font-weight-normal; 5 | font-size: $font-size-sm; 6 | padding-top: 0; 7 | padding-bottom: $nav-link-footer-padding; 8 | 9 | &:hover { 10 | opacity: 1 !important; 11 | transition: $footer-link-animation; 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/_forms.scss: -------------------------------------------------------------------------------- 1 | .input-group { 2 | @include border-radius($input-border-radius, 0); 3 | 4 | &, 5 | .input-group-text { 6 | transition: $input-transition; 7 | } 8 | 9 | & > :not(:first-child):not(.dropdown-menu) { 10 | margin-left: 0; 11 | } 12 | 13 | .form-control { 14 | box-shadow: none; 15 | background-image: none; 16 | 17 | &:not(:first-child) { 18 | border-left: 0; 19 | padding-left: 0; 20 | } 21 | &:not(:last-child) { 22 | border-right: 0; 23 | padding-right: 0; 24 | } 25 | 26 | & + .input-group-text { 27 | border-left: 0; 28 | border-right: $input-border-width solid $input-border-color; 29 | } 30 | } 31 | 32 | .input-group-text { 33 | border-right: 0; 34 | } 35 | 36 | 37 | 38 | &.focused { 39 | box-shadow: $input-focus-box-shadow; 40 | } 41 | 42 | &.focused .input-group-text { 43 | border-color: $input-focus-border-color; 44 | } 45 | } 46 | 47 | 48 | .form-group { 49 | margin-bottom: 1rem; 50 | } 51 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/_gradients.scss: -------------------------------------------------------------------------------- 1 | @each $prop, $value in $theme-gradient-colors { 2 | .bg-gradient-#{$prop} { 3 | @include gradient-directional(nth($value, 1) 0%, nth($value, -1) 100%, $deg: 310deg); 4 | } 5 | } 6 | 7 | @each $prop, $value in $theme-colors { 8 | .bg-gradient-faded-#{$prop} { 9 | background-image: radial-gradient(370px circle at 80% 50%,rgba($value, .6) 0,darken($value, 10%) 100%) 10 | } 11 | } 12 | 13 | 14 | @each $prop, $value in $theme-colors { 15 | .bg-gradient-faded-#{$prop}-vertical{ 16 | background-image: radial-gradient(200px circle at 50% 70%, rgba($value, .3) 0, $value 100%); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/_header.scss: -------------------------------------------------------------------------------- 1 | .page-header { 2 | padding: $page-header-padding; 3 | position: $page-header-position; 4 | overflow: $page-header-overflow; 5 | display: $page-header-display; 6 | align-items: $page-header-align-items; 7 | background-size: $page-header-bg-size; 8 | background-position: $page-header-bg-position; 9 | 10 | .container { 11 | z-index: $page-header-conteiner-index; 12 | } 13 | } 14 | 15 | .oblique { 16 | transform: $header-oblique-transform; 17 | overflow: $header-oblique-overflow; 18 | width: $header-oblique-img-width; 19 | right: $header-oblique-img-right; 20 | border-bottom-left-radius: $border-radius-lg; 21 | 22 | .oblique-image { 23 | transform: $header-oblique-img-transform; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/_info-areas.scss: -------------------------------------------------------------------------------- 1 | .icon-shape { 2 | width: $icon-md-width; 3 | height: $icon-md-width; 4 | background-position: $icon-shape-bg-position; 5 | border-radius: $border-radius-lg; 6 | 7 | i { 8 | color: $white; 9 | opacity: $icon-shape-icon-opacity; 10 | top: $info-icon-top; 11 | position: $info-icon-position; 12 | } 13 | 14 | .ni { 15 | top: 14px; 16 | } 17 | } 18 | 19 | .icon-xxs { 20 | width: $icon-xxs-width; 21 | height: $icon-xxs-height; 22 | 23 | i { 24 | top: $info-icon-top-xxs; 25 | font-size: .5rem; 26 | } 27 | } 28 | 29 | .icon-xs { 30 | width: $icon-xs-width; 31 | height: $icon-xs-height; 32 | 33 | i { 34 | top: $info-icon-top-xs; 35 | font-size: .5rem; 36 | } 37 | } 38 | 39 | .icon-sm { 40 | width: $icon-sm-width; 41 | height: $icon-sm-height; 42 | 43 | i { 44 | top: $info-icon-top-sm; 45 | font-size: .65rem; 46 | } 47 | } 48 | 49 | .icon-md { 50 | width: $icon-md-width; 51 | height: $icon-md-height; 52 | 53 | i { 54 | top: $info-icon-top-md; 55 | font-size: $font-size-sm; 56 | } 57 | 58 | &.icon-striped { 59 | background-position-x: $icon-striped-bg-md; 60 | background-position-y: $icon-striped-bg-md; 61 | 62 | i { 63 | top: 11%; 64 | margin-left: -10px; 65 | font-size: $font-size-sm; 66 | } 67 | } 68 | } 69 | 70 | .icon-lg { 71 | width: $icon-lg-width; 72 | height: $icon-lg-height; 73 | i { 74 | top: $info-icon-top-lg; 75 | font-size: $font-size-xl; 76 | } 77 | 78 | &.icon-striped { 79 | background-position-x: $icon-striped-bg-lg; 80 | background-position-y: $icon-striped-bg-lg; 81 | 82 | i { 83 | top: 21%; 84 | margin-left: -15px; 85 | } 86 | } 87 | } 88 | 89 | .icon-xl { 90 | width: $icon-xl-width; 91 | height: $icon-xl-height; 92 | border-radius: $border-radius-lg; 93 | 94 | i { 95 | top: $info-icon-top-xl; 96 | font-size: 1.6rem; 97 | } 98 | 99 | &.icon-striped { 100 | background-position-x: $icon-striped-bg-xl; 101 | background-position-y: $icon-striped-bg-xl; 102 | 103 | i { 104 | top: 30%; 105 | margin-left: -15px; 106 | } 107 | } 108 | } 109 | 110 | .info-horizontal { 111 | text-align: left !important; 112 | 113 | .icon { 114 | float: left; 115 | } 116 | .description { 117 | overflow: hidden; 118 | } 119 | } 120 | 121 | // Icon SVG fill color change 122 | 123 | svg.text-primary { 124 | .color-foreground { 125 | fill: $primary-gradient; 126 | } 127 | .color-background { 128 | fill: $primary-gradient-state; 129 | } 130 | } 131 | svg.text-secondary { 132 | .color-foreground { 133 | fill: $secondary-gradient; 134 | } 135 | .color-background { 136 | fill: $secondary-gradient-state; 137 | } 138 | } 139 | svg.text-info { 140 | .color-foreground { 141 | fill: $info-gradient; 142 | } 143 | .color-background { 144 | fill: $info-gradient-state; 145 | } 146 | } 147 | svg.text-warning { 148 | .color-foreground { 149 | fill: $warning-gradient; 150 | } 151 | .color-background { 152 | fill: $warning-gradient-state; 153 | } 154 | } 155 | svg.text-danger { 156 | .color-foreground { 157 | fill: $danger-gradient; 158 | } 159 | .color-background { 160 | fill: $danger-gradient-state; 161 | } 162 | } 163 | svg.text-success { 164 | .color-foreground { 165 | fill: $success-gradient; 166 | } 167 | .color-background { 168 | fill: $success-gradient-state; 169 | } 170 | } 171 | svg.text-dark { 172 | .color-foreground { 173 | fill: $dark-gradient; 174 | } 175 | .color-background { 176 | fill: $dark-gradient-state; 177 | } 178 | } 179 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/_nav.scss: -------------------------------------------------------------------------------- 1 | .nav { 2 | &.nav-pills { 3 | background: $nav-pills-background; 4 | border-radius: $nav-pills-border-radius; 5 | position: relative; 6 | &.nav-pills-vertical { 7 | border-radius: $nav-pills-vertical-radius; 8 | .nav-link { 9 | &.active { 10 | border-radius: $nav-pills-vertical-link-radius; 11 | } 12 | } 13 | } 14 | .nav-link { 15 | z-index: 3; 16 | color: $dark; 17 | border-radius: $nav-pills-link-border-radius; 18 | background-color: inherit; 19 | &.active { 20 | animation: $nav-pills-link-active-animation; 21 | } 22 | &:hover:not(.active) { 23 | color: $dark; 24 | } 25 | } 26 | &.nav-pills-primary { 27 | background: $white; 28 | color: $white; 29 | .nav-link{ 30 | &.active{ 31 | color: $white; 32 | } 33 | } 34 | .moving-tab { 35 | .nav-link.active { 36 | background: $primary-gradient; 37 | color: $primary-gradient; 38 | } 39 | } 40 | } 41 | &.nav-pills-info { 42 | background: $white; 43 | color: $white; 44 | .nav-link{ 45 | &.active{ 46 | color: $white; 47 | } 48 | } 49 | .moving-tab { 50 | .nav-link.active { 51 | background: $info-gradient; 52 | color: $info-gradient; 53 | } 54 | } 55 | } 56 | &.nav-pills-success { 57 | background: $white; 58 | color: $white; 59 | .nav-link{ 60 | &.active{ 61 | color: $white; 62 | } 63 | } 64 | .moving-tab { 65 | .nav-link.active { 66 | background: $success-gradient; 67 | color: $success-gradient; 68 | } 69 | } 70 | } 71 | &.nav-pills-warning { 72 | background: $white; 73 | color: $white; 74 | .nav-link{ 75 | &.active{ 76 | color: $white; 77 | } 78 | } 79 | .moving-tab { 80 | .nav-link.active { 81 | background: $warning-gradient; 82 | color: $warning-gradient; 83 | } 84 | } 85 | } 86 | &.nav-pills-danger { 87 | background: $white; 88 | color: $white; 89 | .nav-link{ 90 | &.active{ 91 | color: $white; 92 | } 93 | } 94 | .moving-tab { 95 | .nav-link.active { 96 | background: $danger-gradient; 97 | color: $danger-gradient; 98 | } 99 | } 100 | } 101 | &.nav-pills-dark { 102 | background: $white; 103 | color: $white; 104 | .nav-link{ 105 | &.active{ 106 | color: $white; 107 | } 108 | } 109 | .moving-tab { 110 | .nav-link.active { 111 | background: $dark-gradient; 112 | color: $dark-gradient; 113 | } 114 | } 115 | } 116 | .nav-item{ 117 | z-index: 3; 118 | } 119 | } 120 | } 121 | .moving-tab { 122 | z-index: 1 !important; 123 | .nav-link { 124 | color: $white; 125 | transition: .2s ease; 126 | border-radius: $nav-pills-link-border-radius; 127 | &.active { 128 | color: $white; 129 | font-weight: $font-weight-bold; 130 | box-shadow: $nav-pills-link-box-shadow; 131 | animation: $nav-pills-link-active-animation; 132 | background: $white; 133 | } 134 | &:hover:not(.active) { 135 | color: $dark; 136 | } 137 | } 138 | } 139 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/_pagination.scss: -------------------------------------------------------------------------------- 1 | .page-item { 2 | &.active .page-link { 3 | box-shadow: $pagination-active-box-shadow; 4 | } 5 | 6 | .page-link, 7 | span { 8 | display: $page-link-display; 9 | align-items: $page-link-align-items; 10 | justify-content: $page-link-justify-content; 11 | color: $secondary; 12 | padding: 0; 13 | margin: $page-link-margin; 14 | border-radius: $page-link-radius !important; 15 | width: $page-link-width; 16 | height: $page-link-height; 17 | font-size: $font-size-sm; 18 | } 19 | } 20 | 21 | .pagination-lg { 22 | .page-item { 23 | .page-link, 24 | span { 25 | width: $page-link-width-lg; 26 | height: $page-link-height-lg; 27 | line-height: $page-link-line-height-lg; 28 | } 29 | } 30 | } 31 | 32 | .pagination-sm { 33 | .page-item { 34 | .page-link, 35 | span { 36 | width: $page-link-width-sm; 37 | height: $page-link-height-sm; 38 | line-height: $page-link-line-height-sm; 39 | } 40 | } 41 | } 42 | 43 | 44 | // Colors 45 | .pagination { 46 | @each $name, $value in $theme-gradient-colors { 47 | &.pagination-#{$name} { 48 | .page-item.active > .page-link { 49 | &, 50 | &:focus, 51 | &:hover { 52 | @include gradient-directional(nth($value, 1) 0%, nth($value, -1) 100%, $deg: 310deg); 53 | border: none; 54 | color: $white; 55 | } 56 | } 57 | } 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/_popovers.scss: -------------------------------------------------------------------------------- 1 | .popover { 2 | box-shadow: $popover-box-shadow; 3 | } 4 | 5 | // popover title 6 | .popover { 7 | .popover-header { 8 | font-weight: 600; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/_progress.scss: -------------------------------------------------------------------------------- 1 | .progress-bar { 2 | height: $progress-bar-height; 3 | border-radius: $border-radius; 4 | margin-top: -0.095rem; 5 | margin-left: -1px; 6 | } 7 | 8 | .progress { 9 | overflow: visible; 10 | 11 | &.progress-sm { 12 | height: $progress-height-sm; 13 | } 14 | &.progress-lg { 15 | height: $progress-height-lg; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/_rtl.scss: -------------------------------------------------------------------------------- 1 | // breadcrumb 2 | 3 | .rtl { 4 | .breadcrumb { 5 | .breadcrumb-item + .breadcrumb-item::before { 6 | float: right; 7 | padding-left: $breadcrumb-item-padding-x; 8 | padding-right: 0; 9 | } 10 | } 11 | 12 | .sidenav { 13 | .navbar-nav { 14 | width: 100%; 15 | padding-right: 0; 16 | } 17 | } 18 | 19 | .fixed-plugin { 20 | .fixed-plugin-button { 21 | left: $fixed-plugin-right; 22 | right: auto; 23 | } 24 | 25 | .card { 26 | left: -$fixed-plugin-card-width !important; 27 | right: auto; 28 | } 29 | 30 | &.show { 31 | .card { 32 | right: auto; 33 | left: 0 !important; 34 | } 35 | } 36 | } 37 | 38 | .timeline { 39 | .timeline-content { 40 | margin-right: $timeline-content-margin-left; 41 | margin-left: 0; 42 | } 43 | 44 | .timeline-step { 45 | transform: $timeline-step-transform-rtl; 46 | } 47 | 48 | &.timeline-one-side { 49 | &:before { 50 | right: $timeline-left; 51 | } 52 | 53 | .timeline-step { 54 | right: $timeline-left; 55 | } 56 | } 57 | } 58 | 59 | .form-check { 60 | &.form-switch { 61 | .form-check-input { 62 | &:after { 63 | transform: translateX(-$form-switch-translate-x-start); 64 | } 65 | 66 | &:checked:after { 67 | transform: translateX(-$form-switch-translate-x-end); 68 | } 69 | } 70 | } 71 | } 72 | 73 | .avatar-group { 74 | .avatar + .avatar { 75 | margin-left: 0; 76 | margin-right: $avatar-group-double; 77 | } 78 | } 79 | 80 | .dropdown { 81 | .dropdown-menu { 82 | left: 0; 83 | } 84 | } 85 | 86 | .input-group { 87 | .input-group-text { 88 | border-left: 0; 89 | border-top-left-radius: 0; 90 | border-bottom-left-radius: 0; 91 | border-right: $input-border-width solid $input-border-color; 92 | } 93 | 94 | & > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) { 95 | margin-right: -1px; 96 | border-top-left-radius: $input-border-radius; 97 | border-bottom-left-radius: $input-border-radius; 98 | border-right: 0; 99 | border-left: $input-border-width solid $input-border-color; 100 | } 101 | 102 | &:not(.has-validation) > .dropdown-toggle:nth-last-child(n + 3), 103 | &:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) { 104 | border-top-right-radius: $input-border-radius; 105 | border-bottom-right-radius: $input-border-radius; 106 | } 107 | } 108 | } 109 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/_social-buttons.scss: -------------------------------------------------------------------------------- 1 | .btn { 2 | // social buttons 3 | &.btn-facebook { 4 | @include social-buttons-color($facebook, $facebook-states); 5 | } 6 | &.btn-twitter { 7 | @include social-buttons-color($twitter, $twitter-states); 8 | } 9 | &.btn-pinterest { 10 | @include social-buttons-color($pinterest, $pinterest-states); 11 | } 12 | &.btn-linkedin { 13 | @include social-buttons-color($linkedin, $linkedin-states); 14 | } 15 | &.btn-dribbble { 16 | @include social-buttons-color($dribbble, $dribbble-states); 17 | } 18 | &.btn-github { 19 | @include social-buttons-color($github, $github-states); 20 | } 21 | &.btn-youtube { 22 | @include social-buttons-color($youtube, $youtube-states); 23 | } 24 | &.btn-instagram { 25 | @include social-buttons-color($instagram, $instagram-states); 26 | } 27 | &.btn-reddit { 28 | @include social-buttons-color($reddit, $reddit-states); 29 | } 30 | &.btn-tumblr { 31 | @include social-buttons-color($tumblr, $tumblr-states); 32 | } 33 | &.btn-behance { 34 | @include social-buttons-color($behance, $behance-states); 35 | } 36 | &.btn-vimeo { 37 | @include social-buttons-color($vimeo, $vimeo-states); 38 | } 39 | &.btn-slack { 40 | @include social-buttons-color($slack, $slack-states); 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/_tables.scss: -------------------------------------------------------------------------------- 1 | // General styles 2 | 3 | .table { 4 | border-collapse: inherit; 5 | 6 | thead th { 7 | padding: $table-head-spacer-y $table-head-spacer-x; 8 | text-transform: $table-head-text-transform; 9 | letter-spacing: $table-head-letter-spacing; 10 | border-bottom: $table-border-width solid $table-border-color; 11 | } 12 | 13 | th { 14 | font-weight: $table-head-font-weight; 15 | } 16 | 17 | td { 18 | .progress { 19 | height: $table-progress-height; 20 | width: $table-progress-width; 21 | margin: $table-progress-margin; 22 | } 23 | } 24 | 25 | td, 26 | th { 27 | white-space: nowrap; 28 | } 29 | // Vetical align table content 30 | &.align-items-center { 31 | td, 32 | th { 33 | vertical-align: middle; 34 | } 35 | } 36 | tbody{ 37 | tr:last-child{ 38 | td{ 39 | border-width: 0; 40 | } 41 | } 42 | } 43 | 44 | > :not(:last-child) > :last-child > * { 45 | border-bottom-color: $light; 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/_tilt.scss: -------------------------------------------------------------------------------- 1 | // Tilt Animation 2 | .tilt { 3 | -webkit-transform-style: $tilt-transform-style; 4 | transform-style: $tilt-transform-style; 5 | 6 | .up { 7 | -webkit-transform: $tilt-transform-up-transform; 8 | transform: $tilt-transform-up-transform !important; 9 | transition: $tilt-transform-up-transition; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/_timeline.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Timeline 3 | // 4 | 5 | 6 | .timeline { 7 | position: relative; 8 | 9 | // Axis 10 | 11 | &:before { 12 | content: ''; 13 | position: absolute; 14 | top: 0; 15 | left: $timeline-left; 16 | height: 100%; 17 | border-right: $timeline-axis-width solid $timeline-axis-color; 18 | } 19 | } 20 | 21 | 22 | 23 | // Timeline blocks 24 | 25 | .timeline-block { 26 | position: relative; 27 | 28 | &:after { 29 | content: ""; 30 | display: table; 31 | clear: both; 32 | } 33 | 34 | &:first-child { 35 | margin-top: 0; 36 | } 37 | 38 | &:last-child { 39 | margin-bottom: 0; 40 | } 41 | } 42 | 43 | // Timeline steps 44 | 45 | .timeline-step { 46 | position: absolute; 47 | display: inline-flex; 48 | align-items: center; 49 | justify-content: center; 50 | left: 0; 51 | width: $timeline-step-width; 52 | height: $timeline-step-height; 53 | border-radius: $timeline-step-radius; 54 | background: $timeline-step-bg; 55 | // border: $timeline-step-border-width solid $timeline-step-border-color; 56 | text-align: center; 57 | transform: $timeline-step-transform; 58 | font-size: $font-size-base; 59 | font-weight: $font-weight-bold; 60 | z-index: 1; 61 | 62 | svg, i { 63 | line-height: $timeline-step-line-height; 64 | } 65 | } 66 | 67 | 68 | 69 | // Timeline content and body 70 | .timeline-content { 71 | position: relative; 72 | margin-left: $timeline-content-margin-left; 73 | padding-top: $timeline-content-padding-top; 74 | position: relative; 75 | top: $timeline-content-top; 76 | 77 | &:after { 78 | content: ""; 79 | display: table; 80 | clear: both; 81 | } 82 | } 83 | 84 | 85 | @include media-breakpoint-up(lg) { 86 | .timeline { 87 | &:before { 88 | left: 50%; 89 | margin-left: -1px; 90 | } 91 | } 92 | 93 | .timeline-step { 94 | left: 50%; 95 | } 96 | 97 | .timeline-content { 98 | 99 | width: 38%; 100 | } 101 | 102 | .timeline-block:nth-child(even) .timeline-content { 103 | float: right; 104 | } 105 | } 106 | 107 | // One side timeline 108 | 109 | .timeline-one-side { 110 | &:before { 111 | left: $timeline-left; 112 | } 113 | 114 | .timeline-step { 115 | left: $timeline-left; 116 | } 117 | 118 | .timeline-content { 119 | width: auto; 120 | } 121 | 122 | @include media-breakpoint-up(lg) { 123 | .timeline-content { 124 | max-width: 30rem; 125 | } 126 | } 127 | } 128 | 129 | .timeline-one-side .timeline-block:nth-child(even) .timeline-content { 130 | float: none; 131 | } 132 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/_tooltips.scss: -------------------------------------------------------------------------------- 1 | .bs-tooltip-auto[x-placement^=right] .tooltip-arrow, 2 | .bs-tooltip-right .tooltip-arrow { 3 | left: $tooltip-arrow-left; 4 | } 5 | 6 | .bs-tooltip-auto[x-placement^=left] .tooltip-arrow, 7 | .bs-tooltip-left .tooltip-arrow { 8 | right: $tooltip-arrow-right; 9 | } 10 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/_utilities-extend.scss: -------------------------------------------------------------------------------- 1 | @each $name, $value in $max-width-dim{ 2 | .max-width-#{$name} { 3 | max-width: $value !important; 4 | } 5 | } 6 | 7 | @each $name, $value in $width-dim{ 8 | .width-#{$name} { 9 | width: $value !important; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/_alert.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Base styles 3 | // 4 | 5 | .alert { 6 | // scss-docs-start alert-css-vars 7 | --#{$prefix}alert-bg: transparent; 8 | --#{$prefix}alert-padding-x: #{$alert-padding-x}; 9 | --#{$prefix}alert-padding-y: #{$alert-padding-y}; 10 | --#{$prefix}alert-margin-bottom: #{$alert-margin-bottom}; 11 | --#{$prefix}alert-color: inherit; 12 | --#{$prefix}alert-border-color: transparent; 13 | --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color); 14 | --#{$prefix}alert-border-radius: #{$alert-border-radius}; 15 | --#{$prefix}alert-link-color: inherit; 16 | // scss-docs-end alert-css-vars 17 | 18 | position: relative; 19 | padding: var(--#{$prefix}alert-padding-y) var(--#{$prefix}alert-padding-x); 20 | margin-bottom: var(--#{$prefix}alert-margin-bottom); 21 | color: var(--#{$prefix}alert-color); 22 | background-color: var(--#{$prefix}alert-bg); 23 | border: var(--#{$prefix}alert-border); 24 | @include border-radius(var(--#{$prefix}alert-border-radius)); 25 | } 26 | 27 | // Headings for larger alerts 28 | .alert-heading { 29 | // Specified to prevent conflicts of changing $headings-color 30 | color: inherit; 31 | } 32 | 33 | // Provide class for links that match alerts 34 | .alert-link { 35 | font-weight: $alert-link-font-weight; 36 | color: var(--#{$prefix}alert-link-color); 37 | } 38 | 39 | 40 | // Dismissible alerts 41 | // 42 | // Expand the right padding and account for the close button's positioning. 43 | 44 | .alert-dismissible { 45 | padding-right: $alert-dismissible-padding-r; 46 | 47 | // Adjust close link position 48 | .btn-close { 49 | position: absolute; 50 | top: 0; 51 | right: 0; 52 | z-index: $stretched-link-z-index + 1; 53 | padding: $alert-padding-y * 1.25 $alert-padding-x; 54 | } 55 | } 56 | 57 | 58 | // scss-docs-start alert-modifiers 59 | // Generate contextual modifier classes for colorizing the alert 60 | @each $state in map-keys($theme-colors) { 61 | .alert-#{$state} { 62 | --#{$prefix}alert-color: var(--#{$prefix}#{$state}-text-emphasis); 63 | --#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle); 64 | --#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle); 65 | --#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text-emphasis); 66 | } 67 | } 68 | // scss-docs-end alert-modifiers 69 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/_badge.scss: -------------------------------------------------------------------------------- 1 | // Base class 2 | // 3 | // Requires one of the contextual, color modifier classes for `color` and 4 | // `background-color`. 5 | 6 | .badge { 7 | // scss-docs-start badge-css-vars 8 | --#{$prefix}badge-padding-x: #{$badge-padding-x}; 9 | --#{$prefix}badge-padding-y: #{$badge-padding-y}; 10 | @include rfs($badge-font-size, --#{$prefix}badge-font-size); 11 | --#{$prefix}badge-font-weight: #{$badge-font-weight}; 12 | --#{$prefix}badge-color: #{$badge-color}; 13 | --#{$prefix}badge-border-radius: #{$badge-border-radius}; 14 | // scss-docs-end badge-css-vars 15 | 16 | display: inline-block; 17 | padding: var(--#{$prefix}badge-padding-y) var(--#{$prefix}badge-padding-x); 18 | @include font-size(var(--#{$prefix}badge-font-size)); 19 | font-weight: var(--#{$prefix}badge-font-weight); 20 | line-height: 1; 21 | color: var(--#{$prefix}badge-color); 22 | text-align: center; 23 | white-space: nowrap; 24 | vertical-align: baseline; 25 | @include border-radius(var(--#{$prefix}badge-border-radius)); 26 | @include gradient-bg(); 27 | 28 | // Empty badges collapse automatically 29 | &:empty { 30 | display: none; 31 | } 32 | } 33 | 34 | // Quick fix for badges in buttons 35 | .btn .badge { 36 | position: relative; 37 | top: -1px; 38 | } 39 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/_breadcrumb.scss: -------------------------------------------------------------------------------- 1 | .breadcrumb { 2 | // scss-docs-start breadcrumb-css-vars 3 | --#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x}; 4 | --#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y}; 5 | --#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom}; 6 | @include rfs($breadcrumb-font-size, --#{$prefix}breadcrumb-font-size); 7 | --#{$prefix}breadcrumb-bg: #{$breadcrumb-bg}; 8 | --#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius}; 9 | --#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color}; 10 | --#{$prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x}; 11 | --#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color}; 12 | // scss-docs-end breadcrumb-css-vars 13 | 14 | display: flex; 15 | flex-wrap: wrap; 16 | padding: var(--#{$prefix}breadcrumb-padding-y) var(--#{$prefix}breadcrumb-padding-x); 17 | margin-bottom: var(--#{$prefix}breadcrumb-margin-bottom); 18 | @include font-size(var(--#{$prefix}breadcrumb-font-size)); 19 | list-style: none; 20 | background-color: var(--#{$prefix}breadcrumb-bg); 21 | @include border-radius(var(--#{$prefix}breadcrumb-border-radius)); 22 | } 23 | 24 | .breadcrumb-item { 25 | // The separator between breadcrumbs (by default, a forward-slash: "/") 26 | + .breadcrumb-item { 27 | padding-left: var(--#{$prefix}breadcrumb-item-padding-x); 28 | 29 | &::before { 30 | float: left; // Suppress inline spacings and underlining of the separator 31 | padding-right: var(--#{$prefix}breadcrumb-item-padding-x); 32 | color: var(--#{$prefix}breadcrumb-divider-color); 33 | content: var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"}; 34 | } 35 | } 36 | 37 | &.active { 38 | color: var(--#{$prefix}breadcrumb-item-active-color); 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/_close.scss: -------------------------------------------------------------------------------- 1 | // Transparent background and border properties included for button version. 2 | // iOS requires the button element instead of an anchor tag. 3 | // If you want the anchor version, it requires `href="#"`. 4 | // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile 5 | 6 | .btn-close { 7 | // scss-docs-start close-css-vars 8 | --#{$prefix}btn-close-color: #{$btn-close-color}; 9 | --#{$prefix}btn-close-bg: #{ escape-svg($btn-close-bg) }; 10 | --#{$prefix}btn-close-opacity: #{$btn-close-opacity}; 11 | --#{$prefix}btn-close-hover-opacity: #{$btn-close-hover-opacity}; 12 | --#{$prefix}btn-close-focus-shadow: #{$btn-close-focus-shadow}; 13 | --#{$prefix}btn-close-focus-opacity: #{$btn-close-focus-opacity}; 14 | --#{$prefix}btn-close-disabled-opacity: #{$btn-close-disabled-opacity}; 15 | --#{$prefix}btn-close-white-filter: #{$btn-close-white-filter}; 16 | // scss-docs-end close-css-vars 17 | 18 | box-sizing: content-box; 19 | width: $btn-close-width; 20 | height: $btn-close-height; 21 | padding: $btn-close-padding-y $btn-close-padding-x; 22 | color: var(--#{$prefix}btn-close-color); 23 | background: transparent var(--#{$prefix}btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements 24 | border: 0; // for button elements 25 | @include border-radius(); 26 | opacity: var(--#{$prefix}btn-close-opacity); 27 | 28 | // Override 's hover style 29 | &:hover { 30 | color: var(--#{$prefix}btn-close-color); 31 | text-decoration: none; 32 | opacity: var(--#{$prefix}btn-close-hover-opacity); 33 | } 34 | 35 | &:focus { 36 | outline: 0; 37 | box-shadow: var(--#{$prefix}btn-close-focus-shadow); 38 | opacity: var(--#{$prefix}btn-close-focus-opacity); 39 | } 40 | 41 | &:disabled, 42 | &.disabled { 43 | pointer-events: none; 44 | user-select: none; 45 | opacity: var(--#{$prefix}btn-close-disabled-opacity); 46 | } 47 | } 48 | 49 | @mixin btn-close-white() { 50 | filter: var(--#{$prefix}btn-close-white-filter); 51 | } 52 | 53 | .btn-close-white { 54 | @include btn-close-white(); 55 | } 56 | 57 | @if $enable-dark-mode { 58 | @include color-mode(dark) { 59 | .btn-close { 60 | @include btn-close-white(); 61 | } 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/_containers.scss: -------------------------------------------------------------------------------- 1 | // Container widths 2 | // 3 | // Set the container width, and override it for fixed navbars in media queries. 4 | 5 | @if $enable-container-classes { 6 | // Single container class with breakpoint max-widths 7 | .container, 8 | // 100% wide container at all breakpoints 9 | .container-fluid { 10 | @include make-container(); 11 | } 12 | 13 | // Responsive containers that are 100% wide until a breakpoint 14 | @each $breakpoint, $container-max-width in $container-max-widths { 15 | .container-#{$breakpoint} { 16 | @extend .container-fluid; 17 | } 18 | 19 | @include media-breakpoint-up($breakpoint, $grid-breakpoints) { 20 | %responsive-container-#{$breakpoint} { 21 | max-width: $container-max-width; 22 | } 23 | 24 | // Extend each breakpoint which is smaller or equal to the current breakpoint 25 | $extend-breakpoint: true; 26 | 27 | @each $name, $width in $grid-breakpoints { 28 | @if ($extend-breakpoint) { 29 | .container#{breakpoint-infix($name, $grid-breakpoints)} { 30 | @extend %responsive-container-#{$breakpoint}; 31 | } 32 | 33 | // Once the current breakpoint is reached, stop extending 34 | @if ($breakpoint == $name) { 35 | $extend-breakpoint: false; 36 | } 37 | } 38 | } 39 | } 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/_forms.scss: -------------------------------------------------------------------------------- 1 | @import "forms/labels"; 2 | @import "forms/form-text"; 3 | @import "forms/form-control"; 4 | @import "forms/form-select"; 5 | @import "forms/form-check"; 6 | @import "forms/form-range"; 7 | @import "forms/floating-labels"; 8 | @import "forms/input-group"; 9 | @import "forms/validation"; 10 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/_grid.scss: -------------------------------------------------------------------------------- 1 | // Row 2 | // 3 | // Rows contain your columns. 4 | 5 | :root { 6 | @each $name, $value in $grid-breakpoints { 7 | --#{$prefix}breakpoint-#{$name}: #{$value}; 8 | } 9 | } 10 | 11 | @if $enable-grid-classes { 12 | .row { 13 | @include make-row(); 14 | 15 | > * { 16 | @include make-col-ready(); 17 | } 18 | } 19 | } 20 | 21 | @if $enable-cssgrid { 22 | .grid { 23 | display: grid; 24 | grid-template-rows: repeat(var(--#{$prefix}rows, 1), 1fr); 25 | grid-template-columns: repeat(var(--#{$prefix}columns, #{$grid-columns}), 1fr); 26 | gap: var(--#{$prefix}gap, #{$grid-gutter-width}); 27 | 28 | @include make-cssgrid(); 29 | } 30 | } 31 | 32 | 33 | // Columns 34 | // 35 | // Common styles for small and large grid columns 36 | 37 | @if $enable-grid-classes { 38 | @include make-grid-columns(); 39 | } 40 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/_helpers.scss: -------------------------------------------------------------------------------- 1 | @import "helpers/clearfix"; 2 | @import "helpers/color-bg"; 3 | @import "helpers/colored-links"; 4 | @import "helpers/focus-ring"; 5 | @import "helpers/icon-link"; 6 | @import "helpers/ratio"; 7 | @import "helpers/position"; 8 | @import "helpers/stacks"; 9 | @import "helpers/visually-hidden"; 10 | @import "helpers/stretched-link"; 11 | @import "helpers/text-truncation"; 12 | @import "helpers/vr"; 13 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/_images.scss: -------------------------------------------------------------------------------- 1 | // Responsive images (ensure images don't scale beyond their parents) 2 | // 3 | // This is purposefully opt-in via an explicit class rather than being the default for all ``s. 4 | // We previously tried the "images are responsive by default" approach in Bootstrap v2, 5 | // and abandoned it in Bootstrap v3 because it breaks lots of third-party widgets (including Google Maps) 6 | // which weren't expecting the images within themselves to be involuntarily resized. 7 | // See also https://github.com/twbs/bootstrap/issues/18178 8 | .img-fluid { 9 | @include img-fluid(); 10 | } 11 | 12 | 13 | // Image thumbnails 14 | .img-thumbnail { 15 | padding: $thumbnail-padding; 16 | background-color: $thumbnail-bg; 17 | border: $thumbnail-border-width solid $thumbnail-border-color; 18 | @include border-radius($thumbnail-border-radius); 19 | @include box-shadow($thumbnail-box-shadow); 20 | 21 | // Keep them at most 100% wide 22 | @include img-fluid(); 23 | } 24 | 25 | // 26 | // Figures 27 | // 28 | 29 | .figure { 30 | // Ensures the caption's text aligns with the image. 31 | display: inline-block; 32 | } 33 | 34 | .figure-img { 35 | margin-bottom: $spacer * .5; 36 | line-height: 1; 37 | } 38 | 39 | .figure-caption { 40 | @include font-size($figure-caption-font-size); 41 | color: $figure-caption-color; 42 | } 43 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/_mixins.scss: -------------------------------------------------------------------------------- 1 | // Toggles 2 | // 3 | // Used in conjunction with global variables to enable certain theme features. 4 | 5 | // Vendor 6 | @import "vendor/rfs"; 7 | 8 | // Deprecate 9 | @import "mixins/deprecate"; 10 | 11 | // Helpers 12 | @import "mixins/breakpoints"; 13 | @import "mixins/color-mode"; 14 | @import "mixins/color-scheme"; 15 | @import "mixins/image"; 16 | @import "mixins/resize"; 17 | @import "mixins/visually-hidden"; 18 | @import "mixins/reset-text"; 19 | @import "mixins/text-truncate"; 20 | 21 | // Utilities 22 | @import "mixins/utilities"; 23 | 24 | // Components 25 | @import "mixins/backdrop"; 26 | @import "mixins/buttons"; 27 | @import "mixins/caret"; 28 | @import "mixins/pagination"; 29 | @import "mixins/lists"; 30 | @import "mixins/forms"; 31 | @import "mixins/table-variants"; 32 | 33 | // Skins 34 | @import "mixins/border-radius"; 35 | @import "mixins/box-shadow"; 36 | @import "mixins/gradients"; 37 | @import "mixins/transition"; 38 | 39 | // Layout 40 | @import "mixins/clearfix"; 41 | @import "mixins/container"; 42 | @import "mixins/grid"; 43 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/_placeholders.scss: -------------------------------------------------------------------------------- 1 | .placeholder { 2 | display: inline-block; 3 | min-height: 1em; 4 | vertical-align: middle; 5 | cursor: wait; 6 | background-color: currentcolor; 7 | opacity: $placeholder-opacity-max; 8 | 9 | &.btn::before { 10 | display: inline-block; 11 | content: ""; 12 | } 13 | } 14 | 15 | // Sizing 16 | .placeholder-xs { 17 | min-height: .6em; 18 | } 19 | 20 | .placeholder-sm { 21 | min-height: .8em; 22 | } 23 | 24 | .placeholder-lg { 25 | min-height: 1.2em; 26 | } 27 | 28 | // Animation 29 | .placeholder-glow { 30 | .placeholder { 31 | animation: placeholder-glow 2s ease-in-out infinite; 32 | } 33 | } 34 | 35 | @keyframes placeholder-glow { 36 | 50% { 37 | opacity: $placeholder-opacity-min; 38 | } 39 | } 40 | 41 | .placeholder-wave { 42 | mask-image: linear-gradient(130deg, $black 55%, rgba(0, 0, 0, (1 - $placeholder-opacity-min)) 75%, $black 95%); 43 | mask-size: 200% 100%; 44 | animation: placeholder-wave 2s linear infinite; 45 | } 46 | 47 | @keyframes placeholder-wave { 48 | 100% { 49 | mask-position: -200% 0%; 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/_progress.scss: -------------------------------------------------------------------------------- 1 | // Disable animation if transitions are disabled 2 | 3 | // scss-docs-start progress-keyframes 4 | @if $enable-transitions { 5 | @keyframes progress-bar-stripes { 6 | 0% { background-position-x: $progress-height; } 7 | } 8 | } 9 | // scss-docs-end progress-keyframes 10 | 11 | .progress, 12 | .progress-stacked { 13 | // scss-docs-start progress-css-vars 14 | --#{$prefix}progress-height: #{$progress-height}; 15 | @include rfs($progress-font-size, --#{$prefix}progress-font-size); 16 | --#{$prefix}progress-bg: #{$progress-bg}; 17 | --#{$prefix}progress-border-radius: #{$progress-border-radius}; 18 | --#{$prefix}progress-box-shadow: #{$progress-box-shadow}; 19 | --#{$prefix}progress-bar-color: #{$progress-bar-color}; 20 | --#{$prefix}progress-bar-bg: #{$progress-bar-bg}; 21 | --#{$prefix}progress-bar-transition: #{$progress-bar-transition}; 22 | // scss-docs-end progress-css-vars 23 | 24 | display: flex; 25 | height: var(--#{$prefix}progress-height); 26 | overflow: hidden; // force rounded corners by cropping it 27 | @include font-size(var(--#{$prefix}progress-font-size)); 28 | background-color: var(--#{$prefix}progress-bg); 29 | @include border-radius(var(--#{$prefix}progress-border-radius)); 30 | @include box-shadow(var(--#{$prefix}progress-box-shadow)); 31 | } 32 | 33 | .progress-bar { 34 | display: flex; 35 | flex-direction: column; 36 | justify-content: center; 37 | overflow: hidden; 38 | color: var(--#{$prefix}progress-bar-color); 39 | text-align: center; 40 | white-space: nowrap; 41 | background-color: var(--#{$prefix}progress-bar-bg); 42 | @include transition(var(--#{$prefix}progress-bar-transition)); 43 | } 44 | 45 | .progress-bar-striped { 46 | @include gradient-striped(); 47 | background-size: var(--#{$prefix}progress-height) var(--#{$prefix}progress-height); 48 | } 49 | 50 | .progress-stacked > .progress { 51 | overflow: visible; 52 | } 53 | 54 | .progress-stacked > .progress > .progress-bar { 55 | width: 100%; 56 | } 57 | 58 | @if $enable-transitions { 59 | .progress-bar-animated { 60 | animation: $progress-bar-animation-timing progress-bar-stripes; 61 | 62 | @if $enable-reduced-motion { 63 | @media (prefers-reduced-motion: reduce) { 64 | animation: none; 65 | } 66 | } 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/_spinners.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Rotating border 3 | // 4 | 5 | .spinner-grow, 6 | .spinner-border { 7 | display: inline-block; 8 | width: var(--#{$prefix}spinner-width); 9 | height: var(--#{$prefix}spinner-height); 10 | vertical-align: var(--#{$prefix}spinner-vertical-align); 11 | // stylelint-disable-next-line property-disallowed-list 12 | border-radius: 50%; 13 | animation: var(--#{$prefix}spinner-animation-speed) linear infinite var(--#{$prefix}spinner-animation-name); 14 | } 15 | 16 | // scss-docs-start spinner-border-keyframes 17 | @keyframes spinner-border { 18 | to { transform: rotate(360deg) #{"/* rtl:ignore */"}; } 19 | } 20 | // scss-docs-end spinner-border-keyframes 21 | 22 | .spinner-border { 23 | // scss-docs-start spinner-border-css-vars 24 | --#{$prefix}spinner-width: #{$spinner-width}; 25 | --#{$prefix}spinner-height: #{$spinner-height}; 26 | --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align}; 27 | --#{$prefix}spinner-border-width: #{$spinner-border-width}; 28 | --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed}; 29 | --#{$prefix}spinner-animation-name: spinner-border; 30 | // scss-docs-end spinner-border-css-vars 31 | 32 | border: var(--#{$prefix}spinner-border-width) solid currentcolor; 33 | border-right-color: transparent; 34 | } 35 | 36 | .spinner-border-sm { 37 | // scss-docs-start spinner-border-sm-css-vars 38 | --#{$prefix}spinner-width: #{$spinner-width-sm}; 39 | --#{$prefix}spinner-height: #{$spinner-height-sm}; 40 | --#{$prefix}spinner-border-width: #{$spinner-border-width-sm}; 41 | // scss-docs-end spinner-border-sm-css-vars 42 | } 43 | 44 | // 45 | // Growing circle 46 | // 47 | 48 | // scss-docs-start spinner-grow-keyframes 49 | @keyframes spinner-grow { 50 | 0% { 51 | transform: scale(0); 52 | } 53 | 50% { 54 | opacity: 1; 55 | transform: none; 56 | } 57 | } 58 | // scss-docs-end spinner-grow-keyframes 59 | 60 | .spinner-grow { 61 | // scss-docs-start spinner-grow-css-vars 62 | --#{$prefix}spinner-width: #{$spinner-width}; 63 | --#{$prefix}spinner-height: #{$spinner-height}; 64 | --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align}; 65 | --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed}; 66 | --#{$prefix}spinner-animation-name: spinner-grow; 67 | // scss-docs-end spinner-grow-css-vars 68 | 69 | background-color: currentcolor; 70 | opacity: 0; 71 | } 72 | 73 | .spinner-grow-sm { 74 | --#{$prefix}spinner-width: #{$spinner-width-sm}; 75 | --#{$prefix}spinner-height: #{$spinner-height-sm}; 76 | } 77 | 78 | @if $enable-reduced-motion { 79 | @media (prefers-reduced-motion: reduce) { 80 | .spinner-border, 81 | .spinner-grow { 82 | --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed * 2}; 83 | } 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/_toasts.scss: -------------------------------------------------------------------------------- 1 | .toast { 2 | // scss-docs-start toast-css-vars 3 | --#{$prefix}toast-zindex: #{$zindex-toast}; 4 | --#{$prefix}toast-padding-x: #{$toast-padding-x}; 5 | --#{$prefix}toast-padding-y: #{$toast-padding-y}; 6 | --#{$prefix}toast-spacing: #{$toast-spacing}; 7 | --#{$prefix}toast-max-width: #{$toast-max-width}; 8 | @include rfs($toast-font-size, --#{$prefix}toast-font-size); 9 | --#{$prefix}toast-color: #{$toast-color}; 10 | --#{$prefix}toast-bg: #{$toast-background-color}; 11 | --#{$prefix}toast-border-width: #{$toast-border-width}; 12 | --#{$prefix}toast-border-color: #{$toast-border-color}; 13 | --#{$prefix}toast-border-radius: #{$toast-border-radius}; 14 | --#{$prefix}toast-box-shadow: #{$toast-box-shadow}; 15 | --#{$prefix}toast-header-color: #{$toast-header-color}; 16 | --#{$prefix}toast-header-bg: #{$toast-header-background-color}; 17 | --#{$prefix}toast-header-border-color: #{$toast-header-border-color}; 18 | // scss-docs-end toast-css-vars 19 | 20 | width: var(--#{$prefix}toast-max-width); 21 | max-width: 100%; 22 | @include font-size(var(--#{$prefix}toast-font-size)); 23 | color: var(--#{$prefix}toast-color); 24 | pointer-events: auto; 25 | background-color: var(--#{$prefix}toast-bg); 26 | background-clip: padding-box; 27 | border: var(--#{$prefix}toast-border-width) solid var(--#{$prefix}toast-border-color); 28 | box-shadow: var(--#{$prefix}toast-box-shadow); 29 | @include border-radius(var(--#{$prefix}toast-border-radius)); 30 | 31 | &.showing { 32 | opacity: 0; 33 | } 34 | 35 | &:not(.show) { 36 | display: none; 37 | } 38 | } 39 | 40 | .toast-container { 41 | --#{$prefix}toast-zindex: #{$zindex-toast}; 42 | 43 | position: absolute; 44 | z-index: var(--#{$prefix}toast-zindex); 45 | width: max-content; 46 | max-width: 100%; 47 | pointer-events: none; 48 | 49 | > :not(:last-child) { 50 | margin-bottom: var(--#{$prefix}toast-spacing); 51 | } 52 | } 53 | 54 | .toast-header { 55 | display: flex; 56 | align-items: center; 57 | padding: var(--#{$prefix}toast-padding-y) var(--#{$prefix}toast-padding-x); 58 | color: var(--#{$prefix}toast-header-color); 59 | background-color: var(--#{$prefix}toast-header-bg); 60 | background-clip: padding-box; 61 | border-bottom: var(--#{$prefix}toast-border-width) solid var(--#{$prefix}toast-header-border-color); 62 | @include border-top-radius(calc(var(--#{$prefix}toast-border-radius) - var(--#{$prefix}toast-border-width))); 63 | 64 | .btn-close { 65 | margin-right: calc(-.5 * var(--#{$prefix}toast-padding-x)); // stylelint-disable-line function-disallowed-list 66 | margin-left: var(--#{$prefix}toast-padding-x); 67 | } 68 | } 69 | 70 | .toast-body { 71 | padding: var(--#{$prefix}toast-padding-x); 72 | word-wrap: break-word; 73 | } 74 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/_transitions.scss: -------------------------------------------------------------------------------- 1 | .fade { 2 | @include transition($transition-fade); 3 | 4 | &:not(.show) { 5 | opacity: 0; 6 | } 7 | } 8 | 9 | // scss-docs-start collapse-classes 10 | .collapse { 11 | &:not(.show) { 12 | display: none; 13 | } 14 | } 15 | 16 | .collapsing { 17 | height: 0; 18 | overflow: hidden; 19 | @include transition($transition-collapse); 20 | 21 | &.collapse-horizontal { 22 | width: 0; 23 | height: auto; 24 | @include transition($transition-collapse-width); 25 | } 26 | } 27 | // scss-docs-end collapse-classes 28 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/_type.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Headings 3 | // 4 | .h1 { 5 | @extend h1; 6 | } 7 | 8 | .h2 { 9 | @extend h2; 10 | } 11 | 12 | .h3 { 13 | @extend h3; 14 | } 15 | 16 | .h4 { 17 | @extend h4; 18 | } 19 | 20 | .h5 { 21 | @extend h5; 22 | } 23 | 24 | .h6 { 25 | @extend h6; 26 | } 27 | 28 | 29 | .lead { 30 | @include font-size($lead-font-size); 31 | font-weight: $lead-font-weight; 32 | } 33 | 34 | // Type display classes 35 | @each $display, $font-size in $display-font-sizes { 36 | .display-#{$display} { 37 | @include font-size($font-size); 38 | font-family: $display-font-family; 39 | font-style: $display-font-style; 40 | font-weight: $display-font-weight; 41 | line-height: $display-line-height; 42 | } 43 | } 44 | 45 | // 46 | // Emphasis 47 | // 48 | .small { 49 | @extend small; 50 | } 51 | 52 | .mark { 53 | @extend mark; 54 | } 55 | 56 | // 57 | // Lists 58 | // 59 | 60 | .list-unstyled { 61 | @include list-unstyled(); 62 | } 63 | 64 | // Inline turns list items into inline-block 65 | .list-inline { 66 | @include list-unstyled(); 67 | } 68 | .list-inline-item { 69 | display: inline-block; 70 | 71 | &:not(:last-child) { 72 | margin-right: $list-inline-padding; 73 | } 74 | } 75 | 76 | 77 | // 78 | // Misc 79 | // 80 | 81 | // Builds on `abbr` 82 | .initialism { 83 | @include font-size($initialism-font-size); 84 | text-transform: uppercase; 85 | } 86 | 87 | // Blockquotes 88 | .blockquote { 89 | margin-bottom: $blockquote-margin-y; 90 | @include font-size($blockquote-font-size); 91 | 92 | > :last-child { 93 | margin-bottom: 0; 94 | } 95 | } 96 | 97 | .blockquote-footer { 98 | margin-top: -$blockquote-margin-y; 99 | margin-bottom: $blockquote-margin-y; 100 | @include font-size($blockquote-footer-font-size); 101 | color: $blockquote-footer-color; 102 | 103 | &::before { 104 | content: "\2014\00A0"; // em dash, nbsp 105 | } 106 | } 107 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/bootstrap-grid.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/banner"; 2 | @include bsBanner(Grid); 3 | 4 | $include-column-box-sizing: true !default; 5 | 6 | @import "functions"; 7 | @import "variables"; 8 | @import "variables-dark"; 9 | @import "maps"; 10 | 11 | @import "mixins/breakpoints"; 12 | @import "mixins/container"; 13 | @import "mixins/grid"; 14 | @import "mixins/utilities"; 15 | 16 | @import "vendor/rfs"; 17 | 18 | @import "containers"; 19 | @import "grid"; 20 | 21 | @import "utilities"; 22 | // Only use the utilities we need 23 | // stylelint-disable-next-line scss/dollar-variable-default 24 | $utilities: map-get-multiple( 25 | $utilities, 26 | ( 27 | "display", 28 | "order", 29 | "flex", 30 | "flex-direction", 31 | "flex-grow", 32 | "flex-shrink", 33 | "flex-wrap", 34 | "justify-content", 35 | "align-items", 36 | "align-content", 37 | "align-self", 38 | "margin", 39 | "margin-x", 40 | "margin-y", 41 | "margin-top", 42 | "margin-end", 43 | "margin-bottom", 44 | "margin-start", 45 | "negative-margin", 46 | "negative-margin-x", 47 | "negative-margin-y", 48 | "negative-margin-top", 49 | "negative-margin-end", 50 | "negative-margin-bottom", 51 | "negative-margin-start", 52 | "padding", 53 | "padding-x", 54 | "padding-y", 55 | "padding-top", 56 | "padding-end", 57 | "padding-bottom", 58 | "padding-start", 59 | ) 60 | ); 61 | 62 | @import "utilities/api"; 63 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/bootstrap-reboot.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/banner"; 2 | @include bsBanner(Reboot); 3 | 4 | @import "functions"; 5 | @import "variables"; 6 | @import "variables-dark"; 7 | @import "maps"; 8 | @import "mixins"; 9 | @import "root"; 10 | @import "reboot"; 11 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/bootstrap-utilities.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/banner"; 2 | @include bsBanner(Utilities); 3 | 4 | // Configuration 5 | @import "functions"; 6 | @import "variables"; 7 | @import "variables-dark"; 8 | @import "maps"; 9 | @import "mixins"; 10 | @import "utilities"; 11 | 12 | // Layout & components 13 | @import "root"; 14 | 15 | // Helpers 16 | @import "helpers"; 17 | 18 | // Utilities 19 | @import "utilities/api"; 20 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/bootstrap.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/banner"; 2 | @include bsBanner(""); 3 | 4 | 5 | // scss-docs-start import-stack 6 | // Configuration 7 | @import "functions"; 8 | @import "variables"; 9 | @import "variables-dark"; 10 | @import "maps"; 11 | @import "mixins"; 12 | @import "utilities"; 13 | 14 | // Layout & components 15 | @import "root"; 16 | @import "reboot"; 17 | @import "type"; 18 | @import "images"; 19 | @import "containers"; 20 | @import "grid"; 21 | @import "tables"; 22 | @import "forms"; 23 | @import "buttons"; 24 | @import "transitions"; 25 | @import "dropdown"; 26 | @import "button-group"; 27 | @import "nav"; 28 | @import "navbar"; 29 | @import "card"; 30 | @import "accordion"; 31 | @import "breadcrumb"; 32 | @import "pagination"; 33 | @import "badge"; 34 | @import "alert"; 35 | @import "progress"; 36 | @import "list-group"; 37 | @import "close"; 38 | @import "toasts"; 39 | @import "modal"; 40 | @import "tooltip"; 41 | @import "popover"; 42 | @import "carousel"; 43 | @import "spinners"; 44 | @import "offcanvas"; 45 | @import "placeholders"; 46 | 47 | // Helpers 48 | @import "helpers"; 49 | 50 | // Utilities 51 | @import "utilities/api"; 52 | // scss-docs-end import-stack 53 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/forms/_floating-labels.scss: -------------------------------------------------------------------------------- 1 | .form-floating { 2 | position: relative; 3 | 4 | > .form-control, 5 | > .form-control-plaintext, 6 | > .form-select { 7 | height: $form-floating-height; 8 | min-height: $form-floating-height; 9 | line-height: $form-floating-line-height; 10 | } 11 | 12 | > label { 13 | position: absolute; 14 | top: 0; 15 | left: 0; 16 | z-index: 2; 17 | height: 100%; // allow textareas 18 | padding: $form-floating-padding-y $form-floating-padding-x; 19 | overflow: hidden; 20 | text-align: start; 21 | text-overflow: ellipsis; 22 | white-space: nowrap; 23 | pointer-events: none; 24 | border: $input-border-width solid transparent; // Required for aligning label's text with the input as it affects inner box model 25 | transform-origin: 0 0; 26 | @include transition($form-floating-transition); 27 | } 28 | 29 | > .form-control, 30 | > .form-control-plaintext { 31 | padding: $form-floating-padding-y $form-floating-padding-x; 32 | 33 | &::placeholder { 34 | color: transparent; 35 | } 36 | 37 | &:focus, 38 | &:not(:placeholder-shown) { 39 | padding-top: $form-floating-input-padding-t; 40 | padding-bottom: $form-floating-input-padding-b; 41 | } 42 | // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped 43 | &:-webkit-autofill { 44 | padding-top: $form-floating-input-padding-t; 45 | padding-bottom: $form-floating-input-padding-b; 46 | } 47 | } 48 | 49 | > .form-select { 50 | padding-top: $form-floating-input-padding-t; 51 | padding-bottom: $form-floating-input-padding-b; 52 | } 53 | 54 | > .form-control:focus, 55 | > .form-control:not(:placeholder-shown), 56 | > .form-control-plaintext, 57 | > .form-select { 58 | ~ label { 59 | color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity}); 60 | transform: $form-floating-label-transform; 61 | 62 | &::after { 63 | position: absolute; 64 | inset: $form-floating-padding-y ($form-floating-padding-x * .5); 65 | z-index: -1; 66 | height: $form-floating-label-height; 67 | content: ""; 68 | background-color: $input-bg; 69 | @include border-radius($input-border-radius); 70 | } 71 | } 72 | } 73 | // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped 74 | > .form-control:-webkit-autofill { 75 | ~ label { 76 | color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity}); 77 | transform: $form-floating-label-transform; 78 | } 79 | } 80 | 81 | > .form-control-plaintext { 82 | ~ label { 83 | border-width: $input-border-width 0; // Required to properly position label text - as explained above 84 | } 85 | } 86 | 87 | > :disabled ~ label, 88 | > .form-control:disabled ~ label { // Required for `.form-control`s because of specificity 89 | color: $form-floating-label-disabled-color; 90 | 91 | &::after { 92 | background-color: $input-disabled-bg; 93 | } 94 | } 95 | } 96 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/forms/_form-range.scss: -------------------------------------------------------------------------------- 1 | // Range 2 | // 3 | // Style range inputs the same across browsers. Vendor-specific rules for pseudo 4 | // elements cannot be mixed. As such, there are no shared styles for focus or 5 | // active states on prefixed selectors. 6 | 7 | .form-range { 8 | width: 100%; 9 | height: add($form-range-thumb-height, $form-range-thumb-focus-box-shadow-width * 2); 10 | padding: 0; // Need to reset padding 11 | appearance: none; 12 | background-color: transparent; 13 | 14 | &:focus { 15 | outline: 0; 16 | 17 | // Pseudo-elements must be split across multiple rulesets to have an effect. 18 | // No box-shadow() mixin for focus accessibility. 19 | &::-webkit-slider-thumb { box-shadow: $form-range-thumb-focus-box-shadow; } 20 | &::-moz-range-thumb { box-shadow: $form-range-thumb-focus-box-shadow; } 21 | } 22 | 23 | &::-moz-focus-outer { 24 | border: 0; 25 | } 26 | 27 | &::-webkit-slider-thumb { 28 | width: $form-range-thumb-width; 29 | height: $form-range-thumb-height; 30 | margin-top: ($form-range-track-height - $form-range-thumb-height) * .5; // Webkit specific 31 | appearance: none; 32 | @include gradient-bg($form-range-thumb-bg); 33 | border: $form-range-thumb-border; 34 | @include border-radius($form-range-thumb-border-radius); 35 | @include box-shadow($form-range-thumb-box-shadow); 36 | @include transition($form-range-thumb-transition); 37 | 38 | &:active { 39 | @include gradient-bg($form-range-thumb-active-bg); 40 | } 41 | } 42 | 43 | &::-webkit-slider-runnable-track { 44 | width: $form-range-track-width; 45 | height: $form-range-track-height; 46 | color: transparent; // Why? 47 | cursor: $form-range-track-cursor; 48 | background-color: $form-range-track-bg; 49 | border-color: transparent; 50 | @include border-radius($form-range-track-border-radius); 51 | @include box-shadow($form-range-track-box-shadow); 52 | } 53 | 54 | &::-moz-range-thumb { 55 | width: $form-range-thumb-width; 56 | height: $form-range-thumb-height; 57 | appearance: none; 58 | @include gradient-bg($form-range-thumb-bg); 59 | border: $form-range-thumb-border; 60 | @include border-radius($form-range-thumb-border-radius); 61 | @include box-shadow($form-range-thumb-box-shadow); 62 | @include transition($form-range-thumb-transition); 63 | 64 | &:active { 65 | @include gradient-bg($form-range-thumb-active-bg); 66 | } 67 | } 68 | 69 | &::-moz-range-track { 70 | width: $form-range-track-width; 71 | height: $form-range-track-height; 72 | color: transparent; 73 | cursor: $form-range-track-cursor; 74 | background-color: $form-range-track-bg; 75 | border-color: transparent; // Firefox specific? 76 | @include border-radius($form-range-track-border-radius); 77 | @include box-shadow($form-range-track-box-shadow); 78 | } 79 | 80 | &:disabled { 81 | pointer-events: none; 82 | 83 | &::-webkit-slider-thumb { 84 | background-color: $form-range-thumb-disabled-bg; 85 | } 86 | 87 | &::-moz-range-thumb { 88 | background-color: $form-range-thumb-disabled-bg; 89 | } 90 | } 91 | } 92 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/forms/_form-select.scss: -------------------------------------------------------------------------------- 1 | // Select 2 | // 3 | // Replaces the browser default select with a custom one, mostly pulled from 4 | // https://primer.github.io/. 5 | 6 | .form-select { 7 | --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator)}; 8 | 9 | display: block; 10 | width: 100%; 11 | padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x; 12 | font-family: $form-select-font-family; 13 | @include font-size($form-select-font-size); 14 | font-weight: $form-select-font-weight; 15 | line-height: $form-select-line-height; 16 | color: $form-select-color; 17 | appearance: none; 18 | background-color: $form-select-bg; 19 | background-image: var(--#{$prefix}form-select-bg-img), var(--#{$prefix}form-select-bg-icon, none); 20 | background-repeat: no-repeat; 21 | background-position: $form-select-bg-position; 22 | background-size: $form-select-bg-size; 23 | border: $form-select-border-width solid $form-select-border-color; 24 | @include border-radius($form-select-border-radius, 0); 25 | @include box-shadow($form-select-box-shadow); 26 | @include transition($form-select-transition); 27 | 28 | &:focus { 29 | border-color: $form-select-focus-border-color; 30 | outline: 0; 31 | @if $enable-shadows { 32 | @include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow); 33 | } @else { 34 | // Avoid using mixin so we can pass custom focus shadow properly 35 | box-shadow: $form-select-focus-box-shadow; 36 | } 37 | } 38 | 39 | &[multiple], 40 | &[size]:not([size="1"]) { 41 | padding-right: $form-select-padding-x; 42 | background-image: none; 43 | } 44 | 45 | &:disabled { 46 | color: $form-select-disabled-color; 47 | background-color: $form-select-disabled-bg; 48 | border-color: $form-select-disabled-border-color; 49 | } 50 | 51 | // Remove outline from select box in FF 52 | &:-moz-focusring { 53 | color: transparent; 54 | text-shadow: 0 0 0 $form-select-color; 55 | } 56 | } 57 | 58 | .form-select-sm { 59 | padding-top: $form-select-padding-y-sm; 60 | padding-bottom: $form-select-padding-y-sm; 61 | padding-left: $form-select-padding-x-sm; 62 | @include font-size($form-select-font-size-sm); 63 | @include border-radius($form-select-border-radius-sm); 64 | } 65 | 66 | .form-select-lg { 67 | padding-top: $form-select-padding-y-lg; 68 | padding-bottom: $form-select-padding-y-lg; 69 | padding-left: $form-select-padding-x-lg; 70 | @include font-size($form-select-font-size-lg); 71 | @include border-radius($form-select-border-radius-lg); 72 | } 73 | 74 | @if $enable-dark-mode { 75 | @include color-mode(dark) { 76 | .form-select { 77 | --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator-dark)}; 78 | } 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/forms/_form-text.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Form text 3 | // 4 | 5 | .form-text { 6 | margin-top: $form-text-margin-top; 7 | @include font-size($form-text-font-size); 8 | font-style: $form-text-font-style; 9 | font-weight: $form-text-font-weight; 10 | color: $form-text-color; 11 | } 12 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/forms/_labels.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Labels 3 | // 4 | 5 | .form-label { 6 | margin-bottom: $form-label-margin-bottom; 7 | @include font-size($form-label-font-size); 8 | font-style: $form-label-font-style; 9 | font-weight: $form-label-font-weight; 10 | color: $form-label-color; 11 | } 12 | 13 | // For use with horizontal and inline forms, when you need the label (or legend) 14 | // text to align with the form controls. 15 | .col-form-label { 16 | padding-top: add($input-padding-y, $input-border-width); 17 | padding-bottom: add($input-padding-y, $input-border-width); 18 | margin-bottom: 0; // Override the `` default 19 | @include font-size(inherit); // Override the `` default 20 | font-style: $form-label-font-style; 21 | font-weight: $form-label-font-weight; 22 | line-height: $input-line-height; 23 | color: $form-label-color; 24 | } 25 | 26 | .col-form-label-lg { 27 | padding-top: add($input-padding-y-lg, $input-border-width); 28 | padding-bottom: add($input-padding-y-lg, $input-border-width); 29 | @include font-size($input-font-size-lg); 30 | } 31 | 32 | .col-form-label-sm { 33 | padding-top: add($input-padding-y-sm, $input-border-width); 34 | padding-bottom: add($input-padding-y-sm, $input-border-width); 35 | @include font-size($input-font-size-sm); 36 | } 37 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/forms/_validation.scss: -------------------------------------------------------------------------------- 1 | // Form validation 2 | // 3 | // Provide feedback to users when form field values are valid or invalid. Works 4 | // primarily for client-side validation via scoped `:invalid` and `:valid` 5 | // pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for 6 | // server-side validation. 7 | 8 | // scss-docs-start form-validation-states-loop 9 | @each $state, $data in $form-validation-states { 10 | @include form-validation-state($state, $data...); 11 | } 12 | // scss-docs-end form-validation-states-loop 13 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/helpers/_clearfix.scss: -------------------------------------------------------------------------------- 1 | .clearfix { 2 | @include clearfix(); 3 | } 4 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/helpers/_color-bg.scss: -------------------------------------------------------------------------------- 1 | // All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251 2 | @each $color, $value in $theme-colors { 3 | .text-bg-#{$color} { 4 | color: color-contrast($value) if($enable-important-utilities, !important, null); 5 | background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null); 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/helpers/_colored-links.scss: -------------------------------------------------------------------------------- 1 | // All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251 2 | @each $color, $value in $theme-colors { 3 | .link-#{$color} { 4 | color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null); 5 | text-decoration-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null); 6 | 7 | @if $link-shade-percentage != 0 { 8 | &:hover, 9 | &:focus { 10 | $hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage)); 11 | color: RGBA(#{to-rgb($hover-color)}, var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null); 12 | text-decoration-color: RGBA(to-rgb($hover-color), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null); 13 | } 14 | } 15 | } 16 | } 17 | 18 | // One-off special link helper as a bridge until v6 19 | .link-body-emphasis { 20 | color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null); 21 | text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null); 22 | 23 | @if $link-shade-percentage != 0 { 24 | &:hover, 25 | &:focus { 26 | color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, .75)) if($enable-important-utilities, !important, null); 27 | text-decoration-color: RGBA(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, .75)) if($enable-important-utilities, !important, null); 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/helpers/_focus-ring.scss: -------------------------------------------------------------------------------- 1 | .focus-ring:focus { 2 | outline: 0; 3 | // By default, there is no `--bs-focus-ring-x`, `--bs-focus-ring-y`, or `--bs-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values 4 | box-shadow: var(--#{$prefix}focus-ring-x, 0) var(--#{$prefix}focus-ring-y, 0) var(--#{$prefix}focus-ring-blur, 0) var(--#{$prefix}focus-ring-width) var(--#{$prefix}focus-ring-color); 5 | } 6 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/helpers/_icon-link.scss: -------------------------------------------------------------------------------- 1 | .icon-link { 2 | display: inline-flex; 3 | gap: $icon-link-gap; 4 | align-items: center; 5 | text-decoration-color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, .5)); 6 | text-underline-offset: $icon-link-underline-offset; 7 | backface-visibility: hidden; 8 | 9 | > .bi { 10 | flex-shrink: 0; 11 | width: $icon-link-icon-size; 12 | height: $icon-link-icon-size; 13 | fill: currentcolor; 14 | @include transition($icon-link-icon-transition); 15 | } 16 | } 17 | 18 | .icon-link-hover { 19 | &:hover, 20 | &:focus-visible { 21 | > .bi { 22 | transform: var(--#{$prefix}icon-link-transform, $icon-link-icon-transform); 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/helpers/_position.scss: -------------------------------------------------------------------------------- 1 | // Shorthand 2 | 3 | .fixed-top { 4 | position: fixed; 5 | top: 0; 6 | right: 0; 7 | left: 0; 8 | z-index: $zindex-fixed; 9 | } 10 | 11 | .fixed-bottom { 12 | position: fixed; 13 | right: 0; 14 | bottom: 0; 15 | left: 0; 16 | z-index: $zindex-fixed; 17 | } 18 | 19 | // Responsive sticky top and bottom 20 | @each $breakpoint in map-keys($grid-breakpoints) { 21 | @include media-breakpoint-up($breakpoint) { 22 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints); 23 | 24 | .sticky#{$infix}-top { 25 | position: sticky; 26 | top: 0; 27 | z-index: $zindex-sticky; 28 | } 29 | 30 | .sticky#{$infix}-bottom { 31 | position: sticky; 32 | bottom: 0; 33 | z-index: $zindex-sticky; 34 | } 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/helpers/_ratio.scss: -------------------------------------------------------------------------------- 1 | // Credit: Nicolas Gallagher and SUIT CSS. 2 | 3 | .ratio { 4 | position: relative; 5 | width: 100%; 6 | 7 | &::before { 8 | display: block; 9 | padding-top: var(--#{$prefix}aspect-ratio); 10 | content: ""; 11 | } 12 | 13 | > * { 14 | position: absolute; 15 | top: 0; 16 | left: 0; 17 | width: 100%; 18 | height: 100%; 19 | } 20 | } 21 | 22 | @each $key, $ratio in $aspect-ratios { 23 | .ratio-#{$key} { 24 | --#{$prefix}aspect-ratio: #{$ratio}; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/helpers/_stacks.scss: -------------------------------------------------------------------------------- 1 | // scss-docs-start stacks 2 | .hstack { 3 | display: flex; 4 | flex-direction: row; 5 | align-items: center; 6 | align-self: stretch; 7 | } 8 | 9 | .vstack { 10 | display: flex; 11 | flex: 1 1 auto; 12 | flex-direction: column; 13 | align-self: stretch; 14 | } 15 | // scss-docs-end stacks 16 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/helpers/_stretched-link.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Stretched link 3 | // 4 | 5 | .stretched-link { 6 | &::#{$stretched-link-pseudo-element} { 7 | position: absolute; 8 | top: 0; 9 | right: 0; 10 | bottom: 0; 11 | left: 0; 12 | z-index: $stretched-link-z-index; 13 | content: ""; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/helpers/_text-truncation.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Text truncation 3 | // 4 | 5 | .text-truncate { 6 | @include text-truncate(); 7 | } 8 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/helpers/_visually-hidden.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Visually hidden 3 | // 4 | 5 | .visually-hidden, 6 | .visually-hidden-focusable:not(:focus):not(:focus-within) { 7 | @include visually-hidden(); 8 | } 9 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/helpers/_vr.scss: -------------------------------------------------------------------------------- 1 | .vr { 2 | display: inline-block; 3 | align-self: stretch; 4 | width: $vr-border-width; 5 | min-height: 1em; 6 | background-color: currentcolor; 7 | opacity: $hr-opacity; 8 | } 9 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/mixins/_alert.scss: -------------------------------------------------------------------------------- 1 | @include deprecate("`alert-variant()`", "v5.3.0", "v6.0.0"); 2 | 3 | // scss-docs-start alert-variant-mixin 4 | @mixin alert-variant($background, $border, $color) { 5 | --#{$prefix}alert-color: #{$color}; 6 | --#{$prefix}alert-bg: #{$background}; 7 | --#{$prefix}alert-border-color: #{$border}; 8 | --#{$prefix}alert-link-color: #{shade-color($color, 20%)}; 9 | 10 | @if $enable-gradients { 11 | background-image: var(--#{$prefix}gradient); 12 | } 13 | 14 | .alert-link { 15 | color: var(--#{$prefix}alert-link-color); 16 | } 17 | } 18 | // scss-docs-end alert-variant-mixin 19 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/mixins/_backdrop.scss: -------------------------------------------------------------------------------- 1 | // Shared between modals and offcanvases 2 | @mixin overlay-backdrop($zindex, $backdrop-bg, $backdrop-opacity) { 3 | position: fixed; 4 | top: 0; 5 | left: 0; 6 | z-index: $zindex; 7 | width: 100vw; 8 | height: 100vh; 9 | background-color: $backdrop-bg; 10 | 11 | // Fade for backdrop 12 | &.fade { opacity: 0; } 13 | &.show { opacity: $backdrop-opacity; } 14 | } 15 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/mixins/_banner.scss: -------------------------------------------------------------------------------- 1 | @mixin bsBanner($file) { 2 | /*! 3 | * Bootstrap #{$file} v5.3.3 (https://getbootstrap.com/) 4 | * Copyright 2011-2024 The Bootstrap Authors 5 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) 6 | */ 7 | } 8 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/mixins/_border-radius.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable property-disallowed-list 2 | // Single side border-radius 3 | 4 | // Helper function to replace negative values with 0 5 | @function valid-radius($radius) { 6 | $return: (); 7 | @each $value in $radius { 8 | @if type-of($value) == number { 9 | $return: append($return, max($value, 0)); 10 | } @else { 11 | $return: append($return, $value); 12 | } 13 | } 14 | @return $return; 15 | } 16 | 17 | // scss-docs-start border-radius-mixins 18 | @mixin border-radius($radius: $border-radius, $fallback-border-radius: false) { 19 | @if $enable-rounded { 20 | border-radius: valid-radius($radius); 21 | } 22 | @else if $fallback-border-radius != false { 23 | border-radius: $fallback-border-radius; 24 | } 25 | } 26 | 27 | @mixin border-top-radius($radius: $border-radius) { 28 | @if $enable-rounded { 29 | border-top-left-radius: valid-radius($radius); 30 | border-top-right-radius: valid-radius($radius); 31 | } 32 | } 33 | 34 | @mixin border-end-radius($radius: $border-radius) { 35 | @if $enable-rounded { 36 | border-top-right-radius: valid-radius($radius); 37 | border-bottom-right-radius: valid-radius($radius); 38 | } 39 | } 40 | 41 | @mixin border-bottom-radius($radius: $border-radius) { 42 | @if $enable-rounded { 43 | border-bottom-right-radius: valid-radius($radius); 44 | border-bottom-left-radius: valid-radius($radius); 45 | } 46 | } 47 | 48 | @mixin border-start-radius($radius: $border-radius) { 49 | @if $enable-rounded { 50 | border-top-left-radius: valid-radius($radius); 51 | border-bottom-left-radius: valid-radius($radius); 52 | } 53 | } 54 | 55 | @mixin border-top-start-radius($radius: $border-radius) { 56 | @if $enable-rounded { 57 | border-top-left-radius: valid-radius($radius); 58 | } 59 | } 60 | 61 | @mixin border-top-end-radius($radius: $border-radius) { 62 | @if $enable-rounded { 63 | border-top-right-radius: valid-radius($radius); 64 | } 65 | } 66 | 67 | @mixin border-bottom-end-radius($radius: $border-radius) { 68 | @if $enable-rounded { 69 | border-bottom-right-radius: valid-radius($radius); 70 | } 71 | } 72 | 73 | @mixin border-bottom-start-radius($radius: $border-radius) { 74 | @if $enable-rounded { 75 | border-bottom-left-radius: valid-radius($radius); 76 | } 77 | } 78 | // scss-docs-end border-radius-mixins 79 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/mixins/_box-shadow.scss: -------------------------------------------------------------------------------- 1 | @mixin box-shadow($shadow...) { 2 | @if $enable-shadows { 3 | $result: (); 4 | 5 | @each $value in $shadow { 6 | @if $value != null { 7 | $result: append($result, $value, "comma"); 8 | } 9 | @if $value == none and length($shadow) > 1 { 10 | @warn "The keyword 'none' must be used as a single argument."; 11 | } 12 | } 13 | 14 | @if (length($result) > 0) { 15 | box-shadow: $result; 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/mixins/_buttons.scss: -------------------------------------------------------------------------------- 1 | // Button variants 2 | // 3 | // Easily pump out default styles, as well as :hover, :focus, :active, 4 | // and disabled options for all buttons 5 | 6 | // scss-docs-start btn-variant-mixin 7 | @mixin button-variant( 8 | $background, 9 | $border, 10 | $color: color-contrast($background), 11 | $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)), 12 | $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)), 13 | $hover-color: color-contrast($hover-background), 14 | $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)), 15 | $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)), 16 | $active-color: color-contrast($active-background), 17 | $disabled-background: $background, 18 | $disabled-border: $border, 19 | $disabled-color: color-contrast($disabled-background) 20 | ) { 21 | --#{$prefix}btn-color: #{$color}; 22 | --#{$prefix}btn-bg: #{$background}; 23 | --#{$prefix}btn-border-color: #{$border}; 24 | --#{$prefix}btn-hover-color: #{$hover-color}; 25 | --#{$prefix}btn-hover-bg: #{$hover-background}; 26 | --#{$prefix}btn-hover-border-color: #{$hover-border}; 27 | --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))}; 28 | --#{$prefix}btn-active-color: #{$active-color}; 29 | --#{$prefix}btn-active-bg: #{$active-background}; 30 | --#{$prefix}btn-active-border-color: #{$active-border}; 31 | --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow}; 32 | --#{$prefix}btn-disabled-color: #{$disabled-color}; 33 | --#{$prefix}btn-disabled-bg: #{$disabled-background}; 34 | --#{$prefix}btn-disabled-border-color: #{$disabled-border}; 35 | } 36 | // scss-docs-end btn-variant-mixin 37 | 38 | // scss-docs-start btn-outline-variant-mixin 39 | @mixin button-outline-variant( 40 | $color, 41 | $color-hover: color-contrast($color), 42 | $active-background: $color, 43 | $active-border: $color, 44 | $active-color: color-contrast($active-background) 45 | ) { 46 | --#{$prefix}btn-color: #{$color}; 47 | --#{$prefix}btn-border-color: #{$color}; 48 | --#{$prefix}btn-hover-color: #{$color-hover}; 49 | --#{$prefix}btn-hover-bg: #{$active-background}; 50 | --#{$prefix}btn-hover-border-color: #{$active-border}; 51 | --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)}; 52 | --#{$prefix}btn-active-color: #{$active-color}; 53 | --#{$prefix}btn-active-bg: #{$active-background}; 54 | --#{$prefix}btn-active-border-color: #{$active-border}; 55 | --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow}; 56 | --#{$prefix}btn-disabled-color: #{$color}; 57 | --#{$prefix}btn-disabled-bg: transparent; 58 | --#{$prefix}btn-disabled-border-color: #{$color}; 59 | --#{$prefix}gradient: none; 60 | } 61 | // scss-docs-end btn-outline-variant-mixin 62 | 63 | // scss-docs-start btn-size-mixin 64 | @mixin button-size($padding-y, $padding-x, $font-size, $border-radius) { 65 | --#{$prefix}btn-padding-y: #{$padding-y}; 66 | --#{$prefix}btn-padding-x: #{$padding-x}; 67 | @include rfs($font-size, --#{$prefix}btn-font-size); 68 | --#{$prefix}btn-border-radius: #{$border-radius}; 69 | } 70 | // scss-docs-end btn-size-mixin 71 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/mixins/_caret.scss: -------------------------------------------------------------------------------- 1 | // scss-docs-start caret-mixins 2 | @mixin caret-down($width: $caret-width) { 3 | border-top: $width solid; 4 | border-right: $width solid transparent; 5 | border-bottom: 0; 6 | border-left: $width solid transparent; 7 | } 8 | 9 | @mixin caret-up($width: $caret-width) { 10 | border-top: 0; 11 | border-right: $width solid transparent; 12 | border-bottom: $width solid; 13 | border-left: $width solid transparent; 14 | } 15 | 16 | @mixin caret-end($width: $caret-width) { 17 | border-top: $width solid transparent; 18 | border-right: 0; 19 | border-bottom: $width solid transparent; 20 | border-left: $width solid; 21 | } 22 | 23 | @mixin caret-start($width: $caret-width) { 24 | border-top: $width solid transparent; 25 | border-right: $width solid; 26 | border-bottom: $width solid transparent; 27 | } 28 | 29 | @mixin caret( 30 | $direction: down, 31 | $width: $caret-width, 32 | $spacing: $caret-spacing, 33 | $vertical-align: $caret-vertical-align 34 | ) { 35 | @if $enable-caret { 36 | &::after { 37 | display: inline-block; 38 | margin-left: $spacing; 39 | vertical-align: $vertical-align; 40 | content: ""; 41 | @if $direction == down { 42 | @include caret-down($width); 43 | } @else if $direction == up { 44 | @include caret-up($width); 45 | } @else if $direction == end { 46 | @include caret-end($width); 47 | } 48 | } 49 | 50 | @if $direction == start { 51 | &::after { 52 | display: none; 53 | } 54 | 55 | &::before { 56 | display: inline-block; 57 | margin-right: $spacing; 58 | vertical-align: $vertical-align; 59 | content: ""; 60 | @include caret-start($width); 61 | } 62 | } 63 | 64 | &:empty::after { 65 | margin-left: 0; 66 | } 67 | } 68 | } 69 | // scss-docs-end caret-mixins 70 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/mixins/_clearfix.scss: -------------------------------------------------------------------------------- 1 | // scss-docs-start clearfix 2 | @mixin clearfix() { 3 | &::after { 4 | display: block; 5 | clear: both; 6 | content: ""; 7 | } 8 | } 9 | // scss-docs-end clearfix 10 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/mixins/_color-mode.scss: -------------------------------------------------------------------------------- 1 | // scss-docs-start color-mode-mixin 2 | @mixin color-mode($mode: light, $root: false) { 3 | @if $color-mode-type == "media-query" { 4 | @if $root == true { 5 | @media (prefers-color-scheme: $mode) { 6 | :root { 7 | @content; 8 | } 9 | } 10 | } @else { 11 | @media (prefers-color-scheme: $mode) { 12 | @content; 13 | } 14 | } 15 | } @else { 16 | [data-bs-theme="#{$mode}"] { 17 | @content; 18 | } 19 | } 20 | } 21 | // scss-docs-end color-mode-mixin 22 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/mixins/_color-scheme.scss: -------------------------------------------------------------------------------- 1 | // scss-docs-start mixin-color-scheme 2 | @mixin color-scheme($name) { 3 | @media (prefers-color-scheme: #{$name}) { 4 | @content; 5 | } 6 | } 7 | // scss-docs-end mixin-color-scheme 8 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/mixins/_container.scss: -------------------------------------------------------------------------------- 1 | // Container mixins 2 | 3 | @mixin make-container($gutter: $container-padding-x) { 4 | --#{$prefix}gutter-x: #{$gutter}; 5 | --#{$prefix}gutter-y: 0; 6 | width: 100%; 7 | padding-right: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list 8 | padding-left: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list 9 | margin-right: auto; 10 | margin-left: auto; 11 | } 12 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/mixins/_deprecate.scss: -------------------------------------------------------------------------------- 1 | // Deprecate mixin 2 | // 3 | // This mixin can be used to deprecate mixins or functions. 4 | // `$enable-deprecation-messages` is a global variable, `$ignore-warning` is a variable that can be passed to 5 | // some deprecated mixins to suppress the warning (for example if the mixin is still be used in the current version of Bootstrap) 6 | @mixin deprecate($name, $deprecate-version, $remove-version, $ignore-warning: false) { 7 | @if ($enable-deprecation-messages != false and $ignore-warning != true) { 8 | @warn "#{$name} has been deprecated as of #{$deprecate-version}. It will be removed entirely in #{$remove-version}."; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/mixins/_gradients.scss: -------------------------------------------------------------------------------- 1 | // Gradients 2 | 3 | // scss-docs-start gradient-bg-mixin 4 | @mixin gradient-bg($color: null) { 5 | background-color: $color; 6 | 7 | @if $enable-gradients { 8 | background-image: var(--#{$prefix}gradient); 9 | } 10 | } 11 | // scss-docs-end gradient-bg-mixin 12 | 13 | // scss-docs-start gradient-mixins 14 | // Horizontal gradient, from left to right 15 | // 16 | // Creates two color stops, start and end, by specifying a color and position for each color stop. 17 | @mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) { 18 | background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); 19 | } 20 | 21 | // Vertical gradient, from top to bottom 22 | // 23 | // Creates two color stops, start and end, by specifying a color and position for each color stop. 24 | @mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: null, $end-percent: null) { 25 | background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); 26 | } 27 | 28 | @mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) { 29 | background-image: linear-gradient($deg, $start-color, $end-color); 30 | } 31 | 32 | @mixin gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) { 33 | background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color); 34 | } 35 | 36 | @mixin gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) { 37 | background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color); 38 | } 39 | 40 | @mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) { 41 | background-image: radial-gradient(circle, $inner-color, $outer-color); 42 | } 43 | 44 | @mixin gradient-striped($color: rgba($white, .15), $angle: 45deg) { 45 | background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent); 46 | } 47 | // scss-docs-end gradient-mixins 48 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/mixins/_image.scss: -------------------------------------------------------------------------------- 1 | // Image Mixins 2 | // - Responsive image 3 | // - Retina image 4 | 5 | 6 | // Responsive image 7 | // 8 | // Keep images from scaling beyond the width of their parents. 9 | 10 | @mixin img-fluid { 11 | // Part 1: Set a maximum relative to the parent 12 | max-width: 100%; 13 | // Part 2: Override the height to auto, otherwise images will be stretched 14 | // when setting a width and height attribute on the img element. 15 | height: auto; 16 | } 17 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/mixins/_list-group.scss: -------------------------------------------------------------------------------- 1 | @include deprecate("`list-group-item-variant()`", "v5.3.0", "v6.0.0"); 2 | 3 | // List Groups 4 | 5 | // scss-docs-start list-group-mixin 6 | @mixin list-group-item-variant($state, $background, $color) { 7 | .list-group-item-#{$state} { 8 | color: $color; 9 | background-color: $background; 10 | 11 | &.list-group-item-action { 12 | &:hover, 13 | &:focus { 14 | color: $color; 15 | background-color: shade-color($background, 10%); 16 | } 17 | 18 | &.active { 19 | color: $white; 20 | background-color: $color; 21 | border-color: $color; 22 | } 23 | } 24 | } 25 | } 26 | // scss-docs-end list-group-mixin 27 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/mixins/_lists.scss: -------------------------------------------------------------------------------- 1 | // Lists 2 | 3 | // Unstyled keeps list items block level, just removes default browser padding and list-style 4 | @mixin list-unstyled { 5 | padding-left: 0; 6 | list-style: none; 7 | } 8 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/mixins/_pagination.scss: -------------------------------------------------------------------------------- 1 | // Pagination 2 | 3 | // scss-docs-start pagination-mixin 4 | @mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) { 5 | --#{$prefix}pagination-padding-x: #{$padding-x}; 6 | --#{$prefix}pagination-padding-y: #{$padding-y}; 7 | @include rfs($font-size, --#{$prefix}pagination-font-size); 8 | --#{$prefix}pagination-border-radius: #{$border-radius}; 9 | } 10 | // scss-docs-end pagination-mixin 11 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/mixins/_reset-text.scss: -------------------------------------------------------------------------------- 1 | @mixin reset-text { 2 | font-family: $font-family-base; 3 | // We deliberately do NOT reset font-size or overflow-wrap / word-wrap. 4 | font-style: normal; 5 | font-weight: $font-weight-normal; 6 | line-height: $line-height-base; 7 | text-align: left; // Fallback for where `start` is not supported 8 | text-align: start; 9 | text-decoration: none; 10 | text-shadow: none; 11 | text-transform: none; 12 | letter-spacing: normal; 13 | word-break: normal; 14 | white-space: normal; 15 | word-spacing: normal; 16 | line-break: auto; 17 | } 18 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/mixins/_resize.scss: -------------------------------------------------------------------------------- 1 | // Resize anything 2 | 3 | @mixin resizable($direction) { 4 | overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible` 5 | resize: $direction; // Options: horizontal, vertical, both 6 | } 7 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/mixins/_table-variants.scss: -------------------------------------------------------------------------------- 1 | // scss-docs-start table-variant 2 | @mixin table-variant($state, $background) { 3 | .table-#{$state} { 4 | $color: color-contrast(opaque($body-bg, $background)); 5 | $hover-bg: mix($color, $background, percentage($table-hover-bg-factor)); 6 | $striped-bg: mix($color, $background, percentage($table-striped-bg-factor)); 7 | $active-bg: mix($color, $background, percentage($table-active-bg-factor)); 8 | $table-border-color: mix($color, $background, percentage($table-border-factor)); 9 | 10 | --#{$prefix}table-color: #{$color}; 11 | --#{$prefix}table-bg: #{$background}; 12 | --#{$prefix}table-border-color: #{$table-border-color}; 13 | --#{$prefix}table-striped-bg: #{$striped-bg}; 14 | --#{$prefix}table-striped-color: #{color-contrast($striped-bg)}; 15 | --#{$prefix}table-active-bg: #{$active-bg}; 16 | --#{$prefix}table-active-color: #{color-contrast($active-bg)}; 17 | --#{$prefix}table-hover-bg: #{$hover-bg}; 18 | --#{$prefix}table-hover-color: #{color-contrast($hover-bg)}; 19 | 20 | color: var(--#{$prefix}table-color); 21 | border-color: var(--#{$prefix}table-border-color); 22 | } 23 | } 24 | // scss-docs-end table-variant 25 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/mixins/_text-truncate.scss: -------------------------------------------------------------------------------- 1 | // Text truncate 2 | // Requires inline-block or block for proper styling 3 | 4 | @mixin text-truncate() { 5 | overflow: hidden; 6 | text-overflow: ellipsis; 7 | white-space: nowrap; 8 | } 9 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/mixins/_transition.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable property-disallowed-list 2 | @mixin transition($transition...) { 3 | @if length($transition) == 0 { 4 | $transition: $transition-base; 5 | } 6 | 7 | @if length($transition) > 1 { 8 | @each $value in $transition { 9 | @if $value == null or $value == none { 10 | @warn "The keyword 'none' or 'null' must be used as a single argument."; 11 | } 12 | } 13 | } 14 | 15 | @if $enable-transitions { 16 | @if nth($transition, 1) != null { 17 | transition: $transition; 18 | } 19 | 20 | @if $enable-reduced-motion and nth($transition, 1) != null and nth($transition, 1) != none { 21 | @media (prefers-reduced-motion: reduce) { 22 | transition: none; 23 | } 24 | } 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/mixins/_visually-hidden.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable declaration-no-important 2 | 3 | // Hide content visually while keeping it accessible to assistive technologies 4 | // 5 | // See: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/ 6 | // See: https://kittygiraudel.com/2016/10/13/css-hide-and-seek/ 7 | 8 | @mixin visually-hidden() { 9 | width: 1px !important; 10 | height: 1px !important; 11 | padding: 0 !important; 12 | margin: -1px !important; // Fix for https://github.com/twbs/bootstrap/issues/25686 13 | overflow: hidden !important; 14 | clip: rect(0, 0, 0, 0) !important; 15 | white-space: nowrap !important; 16 | border: 0 !important; 17 | 18 | // Fix for positioned table caption that could become anonymous cells 19 | &:not(caption) { 20 | position: absolute !important; 21 | } 22 | } 23 | 24 | // Use to only display content when it's focused, or one of its child elements is focused 25 | // (i.e. when focus is within the element/container that the class was applied to) 26 | // 27 | // Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 28 | 29 | @mixin visually-hidden-focusable() { 30 | &:not(:focus):not(:focus-within) { 31 | @include visually-hidden(); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/tests/jasmine.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable camelcase */ 2 | 3 | 'use strict' 4 | 5 | const path = require('node:path') 6 | 7 | module.exports = { 8 | spec_dir: 'scss', 9 | // Make Jasmine look for `.test.scss` files 10 | spec_files: ['**/*.{test,spec}.scss'], 11 | // Compile them into JS scripts running `sass-true` 12 | requires: [path.join(__dirname, 'sass-true/register')], 13 | // Ensure we use `require` so that the require.extensions works 14 | // as `import` completely bypasses it 15 | jsLoader: 'require' 16 | } -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/tests/mixins/_auto-import-of-variables-dark.test.scss: -------------------------------------------------------------------------------- 1 | // TODO: this file can be removed safely in v6 when `@import "variables-dark"` will be removed at the end of _variables.scss 2 | 3 | @import "../../functions"; 4 | @import "../../variables"; 5 | // Voluntarily not importing _variables-dark.scss 6 | @import "../../maps"; 7 | @import "../../mixins"; 8 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/tests/mixins/_color-modes.test.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable selector-attribute-quotes 2 | 3 | @import "../../functions"; 4 | @import "../../variables"; 5 | @import "../../variables-dark"; 6 | @import "../../maps"; 7 | @import "../../mixins"; 8 | 9 | @include describe("global $color-mode-type: data") { 10 | @include it("generates data attribute selectors for dark mode") { 11 | @include assert() { 12 | @include output() { 13 | @include color-mode(dark) { 14 | .element { 15 | color: var(--bs-primary-text-emphasis); 16 | background-color: var(--bs-primary-bg-subtle); 17 | } 18 | } 19 | @include color-mode(dark, true) { 20 | --custom-color: #{mix($indigo, $blue, 50%)}; 21 | } 22 | } 23 | @include expect() { 24 | [data-bs-theme=dark] .element { 25 | color: var(--bs-primary-text-emphasis); 26 | background-color: var(--bs-primary-bg-subtle); 27 | } 28 | [data-bs-theme=dark] { 29 | --custom-color: #3a3ff8; 30 | } 31 | } 32 | } 33 | } 34 | } 35 | 36 | @include describe("global $color-mode-type: media-query") { 37 | @include it("generates media queries for dark mode") { 38 | $color-mode-type: media-query !global; 39 | 40 | @include assert() { 41 | @include output() { 42 | @include color-mode(dark) { 43 | .element { 44 | color: var(--bs-primary-text-emphasis); 45 | background-color: var(--bs-primary-bg-subtle); 46 | } 47 | } 48 | @include color-mode(dark, true) { 49 | --custom-color: #{mix($indigo, $blue, 50%)}; 50 | } 51 | } 52 | @include expect() { 53 | @media (prefers-color-scheme: dark) { 54 | .element { 55 | color: var(--bs-primary-text-emphasis); 56 | background-color: var(--bs-primary-bg-subtle); 57 | } 58 | } 59 | @media (prefers-color-scheme: dark) { 60 | :root { 61 | --custom-color: #3a3ff8; 62 | } 63 | } 64 | } 65 | } 66 | 67 | $color-mode-type: data !global; 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/tests/mixins/_media-query-color-mode-full.test.scss: -------------------------------------------------------------------------------- 1 | $color-mode-type: media-query; 2 | 3 | @import "../../bootstrap"; 4 | 5 | @include describe("global $color-mode-type: media-query") { 6 | @include it("compiles entirely Bootstrap CSS with media-query color mode") { // stylelint-disable-line block-no-empty 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/tests/sass-true/register.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | const path = require('node:path') 4 | 5 | const runnerPath = path.join(__dirname, 'runner').replace(/\\/g, '/') 6 | 7 | require.extensions['.scss'] = (module, filename) => { 8 | const normalizedFilename = filename.replace(/\\/g, '/') 9 | 10 | return module._compile(` 11 | const runner = require('${runnerPath}') 12 | runner('${normalizedFilename}', { describe, it }) 13 | `, filename) 14 | } -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/tests/sass-true/runner.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | const fs = require('node:fs') 4 | const path = require('node:path') 5 | const { 6 | runSass 7 | } = require('sass-true') 8 | 9 | module.exports = (filename, { 10 | describe, 11 | it 12 | }) => { 13 | const data = fs.readFileSync(filename, 'utf8') 14 | const TRUE_SETUP = '$true-terminal-output: false; @import "true";' 15 | const sassString = TRUE_SETUP + data 16 | 17 | runSass({ 18 | describe, 19 | it, 20 | sourceType: 'string' 21 | }, 22 | sassString, { 23 | loadPaths: [path.dirname(filename)] 24 | } 25 | ) 26 | } -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/tests/utilities/_api.test.scss: -------------------------------------------------------------------------------- 1 | @import "../../functions"; 2 | @import "../../variables"; 3 | @import "../../variables-dark"; 4 | @import "../../maps"; 5 | @import "../../mixins"; 6 | 7 | $utilities: (); 8 | 9 | @include describe("utilities/api") { 10 | @include it("generates utilities for each breakpoints") { 11 | $utilities: ( 12 | margin: ( 13 | property: margin, 14 | values: auto 15 | ), 16 | padding: ( 17 | property: padding, 18 | responsive: true, 19 | values: 1rem 20 | ), 21 | font-size: ( 22 | property: font-size, 23 | values: (large: 1.25rem), 24 | print: true 25 | ) 26 | ) !global; 27 | 28 | $grid-breakpoints: ( 29 | xs: 0, 30 | sm: 333px, 31 | md: 666px 32 | ) !global; 33 | 34 | @include assert() { 35 | @include output() { 36 | @import "../../utilities/api"; 37 | } 38 | 39 | @include expect() { 40 | // margin is not set to responsive 41 | .margin-auto { 42 | margin: auto !important; 43 | } 44 | 45 | // padding is, though 46 | .padding-1rem { 47 | padding: 1rem !important; 48 | } 49 | 50 | .font-size-large { 51 | font-size: 1.25rem !important; 52 | } 53 | 54 | @media (min-width: 333px) { 55 | .padding-sm-1rem { 56 | padding: 1rem !important; 57 | } 58 | } 59 | 60 | @media (min-width: 666px) { 61 | .padding-md-1rem { 62 | padding: 1rem !important; 63 | } 64 | } 65 | 66 | @media print { 67 | .font-size-print-large { 68 | font-size: 1.25rem !important; 69 | } 70 | } 71 | } 72 | 73 | } 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/bootstrap/utilities/_api.scss: -------------------------------------------------------------------------------- 1 | // Loop over each breakpoint 2 | @each $breakpoint in map-keys($grid-breakpoints) { 3 | 4 | // Generate media query if needed 5 | @include media-breakpoint-up($breakpoint) { 6 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints); 7 | 8 | // Loop over each utility property 9 | @each $key, $utility in $utilities { 10 | // The utility can be disabled with `false`, thus check if the utility is a map first 11 | // Only proceed if responsive media queries are enabled or if it's the base media query 12 | @if type-of($utility) == "map" and (map-get($utility, responsive) or $infix == "") { 13 | @include generate-utility($utility, $infix); 14 | } 15 | } 16 | } 17 | } 18 | 19 | // RFS rescaling 20 | @media (min-width: $rfs-mq-value) { 21 | @each $breakpoint in map-keys($grid-breakpoints) { 22 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints); 23 | 24 | @if (map-get($grid-breakpoints, $breakpoint) < $rfs-breakpoint) { 25 | // Loop over each utility property 26 | @each $key, $utility in $utilities { 27 | // The utility can be disabled with `false`, thus check if the utility is a map first 28 | // Only proceed if responsive media queries are enabled or if it's the base media query 29 | @if type-of($utility) == "map" and map-get($utility, rfs) and (map-get($utility, responsive) or $infix == "") { 30 | @include generate-utility($utility, $infix, true); 31 | } 32 | } 33 | } 34 | } 35 | } 36 | 37 | 38 | // Print utilities 39 | @media print { 40 | @each $key, $utility in $utilities { 41 | // The utility can be disabled with `false`, thus check if the utility is a map first 42 | // Then check if the utility needs print styles 43 | @if type-of($utility) == "map" and map-get($utility, print) == true { 44 | @include generate-utility($utility, "-print"); 45 | } 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/cards/card-background.scss: -------------------------------------------------------------------------------- 1 | .card { 2 | &.card-background { 3 | align-items: $card-bg-align-items; 4 | 5 | .full-background { 6 | background-position: $card-full-bg-bg-position; 7 | background-size: $card-full-bg-bg-size; 8 | margin-bottom: $card-full-bg-mb; 9 | width: $card-full-bg-width; 10 | height: $card-full-bg-height; 11 | position: $card-full-bg-position; 12 | border-radius: $card-border-radius; 13 | } 14 | 15 | .card-body { 16 | color: $white; 17 | position: $card-bg-body-position; 18 | z-index: $card-bg-body-z-index; 19 | 20 | .content-center, 21 | .content-left { 22 | min-height: $card-bg-content-min-height; 23 | max-width: $card-bg-content-max-width; 24 | padding-top: $card-bg-content-pt; 25 | padding-bottom: $card-bg-content-pb; 26 | } 27 | .content-center { 28 | text-align: center; 29 | } 30 | &.body-left { 31 | width: $card-bg-body-left-width; 32 | } 33 | 34 | .author { 35 | .name { 36 | span, 37 | .stats { 38 | color: $white; 39 | } 40 | } 41 | } 42 | } 43 | 44 | &:after { 45 | position: $card-bg-filter-position; 46 | top: $card-bg-filter-top; 47 | bottom: $card-bg-filter-bottom; 48 | left: $card-bg-filter-left; 49 | height: $card-bg-filter-height; 50 | width: $card-bg-filter-width; 51 | z-index: $card-bg-filter-z-index; 52 | display: $card-bg-filter-display; 53 | content: $card-bg-filter-content; 54 | background: $card-bg-filter-bg; 55 | border-radius: $card-border-radius; 56 | } 57 | 58 | @each $name, $val in $theme-gradient-colors { 59 | &.card-background-mask-#{$name} { 60 | &:before { 61 | background: $card-bg-filter-mask-bg; 62 | } 63 | 64 | &:after { 65 | @include gradient-directional(nth($val, 1) 0%, nth($val, -1) 100%, $deg: 310deg); 66 | opacity: .85; 67 | } 68 | } 69 | } 70 | 71 | .card-category { 72 | font-size: $font-size-sm; 73 | font-weight: $font-weight-bold; 74 | } 75 | 76 | .card-description { 77 | margin-top: $card-bg-description-margin; 78 | margin-bottom: $card-bg-description-margin; 79 | } 80 | } 81 | } 82 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/custom/_styles.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/assets/scss/soft-ui-dashboard/custom/_styles.scss -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/custom/_variables.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/assets/scss/soft-ui-dashboard/custom/_variables.scss -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/forms/_form-check.scss: -------------------------------------------------------------------------------- 1 | .form-check:not(.form-switch) .form-check-input { 2 | &[type="checkbox"], 3 | &[type="radio"] { 4 | border: 1px solid darken($gray-200, 10%); 5 | margin-top: $form-text-margin-top; 6 | position: relative; 7 | 8 | &:checked { 9 | border: 0; 10 | } 11 | } 12 | 13 | &[type="checkbox"] { 14 | &:after { 15 | transition: opacity $form-check-transition-time ease-in-out; 16 | font-family: "FontAwesome"; 17 | content: "\f00c"; 18 | width: 100%; 19 | height: 100%; 20 | color: $form-check-input-checked-color; 21 | position: absolute; 22 | display: flex; 23 | justify-content: center; 24 | align-items: center; 25 | font-size: $font-size-sm - .205; 26 | opacity: 0; 27 | } 28 | 29 | &:checked:after { 30 | opacity: 1; 31 | } 32 | } 33 | 34 | &[type="radio"] { 35 | transition: border 0s; 36 | 37 | &:after { 38 | transition: opacity $form-check-transition-time ease-in-out; 39 | content: ""; 40 | position: absolute; 41 | width: $form-check-radio-after-width; 42 | height: $form-check-radio-after-width; 43 | border-radius: 50%; 44 | background-color: $white; 45 | opacity: 0; 46 | } 47 | 48 | &:checked { 49 | padding: 6px; 50 | } 51 | 52 | &:checked:after { 53 | opacity: 1; 54 | } 55 | } 56 | } 57 | 58 | .form-check-label, 59 | .form-check-input[type="checkbox"] { 60 | cursor: pointer; 61 | } 62 | 63 | .form-check-label{ 64 | font-size:$font-size-sm; 65 | font-weight: $font-weight-normal; 66 | } 67 | 68 | .form-check-input{ 69 | -webkit-appearance: none; 70 | -moz-appearance: none; 71 | appearance: none; 72 | } 73 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/forms/_form-select.scss: -------------------------------------------------------------------------------- 1 | .form-select { 2 | transition: $input-transition; 3 | } 4 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/forms/_form-switch.scss: -------------------------------------------------------------------------------- 1 | .form-switch{ 2 | .form-check-input{ 3 | border: 1px solid $gray-200; 4 | position: relative; 5 | background-color: rgba($dark-gradient-state, .1); 6 | height: $form-check-input-width + .02; 7 | 8 | &:after { 9 | transition: transform $form-check-transition-time ease-in-out, background-color $form-check-transition-time ease-in-out; 10 | content: ""; 11 | width: $form-switch-check-after-width; 12 | height: $form-switch-check-after-width; 13 | border-radius: 50%; 14 | position: absolute; 15 | background-color: $white; 16 | transform: translateX($form-switch-translate-x-start); 17 | box-shadow: $form-switch-round-box-shadow; 18 | top: 1px; 19 | } 20 | 21 | &:checked:after { 22 | transform: translateX($form-switch-translate-x-end); 23 | } 24 | 25 | &:checked { 26 | border-color: rgba($dark-gradient-state, .95); 27 | background-color: rgba($dark-gradient-state, .95); 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/forms/_forms.scss: -------------------------------------------------------------------------------- 1 | @import 'input-group'; 2 | @import 'form-check'; 3 | @import 'form-switch'; 4 | @import 'form-select'; 5 | @import 'labels'; 6 | @import 'inputs'; 7 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/forms/_input-group.scss: -------------------------------------------------------------------------------- 1 | .input-group { 2 | @include border-radius($input-border-radius, 0); 3 | 4 | &, 5 | .input-group-text { 6 | transition: $input-transition; 7 | } 8 | 9 | & > :not(:first-child):not(.dropdown-menu) { 10 | margin-left: 0; 11 | } 12 | 13 | .form-control { 14 | &:focus { 15 | border-left: $input-border-width solid $input-focus-border-color !important; 16 | border-right: $input-border-width solid $input-focus-border-color !important; 17 | } 18 | 19 | &:not(:first-child) { 20 | border-left: 0; 21 | padding-left: 0; 22 | } 23 | &:not(:last-child) { 24 | border-right: 0; 25 | padding-right: 0; 26 | } 27 | 28 | & + .input-group-text { 29 | position: absolute; 30 | border-left: 0; 31 | border-right: $input-border-width solid $input-border-color; 32 | } 33 | } 34 | 35 | .input-group-text { 36 | border-right: 0; 37 | 38 | +.form-control { 39 | border-left: none !important; 40 | } 41 | } 42 | } 43 | 44 | .form-group { 45 | margin-bottom: 1rem; 46 | } 47 | 48 | .input-group-text { 49 | border-right: 0; 50 | padding-left: 10px; 51 | padding-right: 10px; 52 | } 53 | 54 | .form-control { 55 | border-radius: $input-border-radius; 56 | border-top-right-radius: $input-border-radius !important; 57 | border-bottom-right-radius: $input-border-radius !important; 58 | border-left-width: 1px; 59 | } 60 | 61 | .focused { 62 | box-shadow: $input-focus-box-shadow; 63 | transition: $input-transition; 64 | 65 | .form-control { 66 | &:focus { 67 | box-shadow: none; 68 | } 69 | + .input-group-text { 70 | border-color: $input-focus-border-color; 71 | border-right: $input-border-width solid $input-focus-border-color !important; 72 | } 73 | } 74 | .input-group-text { 75 | border-color: $input-focus-border-color; 76 | } 77 | } -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/forms/_inputs.scss: -------------------------------------------------------------------------------- 1 | .form-control{ 2 | &.is-invalid{ 3 | &:focus{ 4 | box-shadow: 0 0 0 2px rgba($form-feedback-invalid-color, .6); 5 | } 6 | } 7 | 8 | &.is-valid{ 9 | &:focus{ 10 | box-shadow: 0 0 0 2px rgba($form-feedback-valid-color, .65); 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/forms/_labels.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Labels 3 | // 4 | 5 | label, 6 | .form-label { 7 | font-size: $form-label-font-size; 8 | font-weight: $form-label-font-weight; 9 | margin-bottom: $form-label-margin-bottom; 10 | color: $form-label-color; 11 | margin-left: $form-label-margin-left; 12 | } 13 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/mixins/_badge.scss: -------------------------------------------------------------------------------- 1 | @mixin badge-variant($bg) { 2 | color: saturate(darken($bg, 10%), 10); 3 | background-color: lighten($bg, 32%); 4 | 5 | &[href] { 6 | @include hover-focus { 7 | color: color-yiq($bg); 8 | text-decoration: none; 9 | background-color: darken($bg, 12%); 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/mixins/_colored-shadows.scss: -------------------------------------------------------------------------------- 1 | @mixin shadow-big-color($color){ 2 | // new box shadow optimized for Tablets and Phones 3 | box-shadow: 0 4px 20px 0px rgba(0, 0, 0, .14), 4 | 0 7px 10px -5px rgba($color, 0.4) 5 | } 6 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/mixins/_container.scss: -------------------------------------------------------------------------------- 1 | @mixin make-container($gutter: $container-padding-x) { 2 | padding-right: calc(var(--#{$prefix}gutter-x) * 1); // overwrite the Bootstrap padding right 3 | padding-left: calc(var(--#{$prefix}gutter-x) * 1); // overwrite the Bootstrap padding left 4 | } -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/mixins/_hover.scss: -------------------------------------------------------------------------------- 1 | 2 | @mixin hover() { 3 | &:hover { @content; } 4 | } 5 | 6 | @mixin hover-focus() { 7 | &:hover, 8 | &:focus { 9 | @content; 10 | } 11 | } 12 | 13 | @mixin plain-hover-focus() { 14 | &, 15 | &:hover, 16 | &:focus { 17 | @content; 18 | } 19 | } 20 | 21 | @mixin hover-focus-active() { 22 | &:hover, 23 | &:focus, 24 | &:active { 25 | @content; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/mixins/_social-buttons.scss: -------------------------------------------------------------------------------- 1 | // for social buttons 2 | @mixin social-buttons-color ($color, $state-color) { 3 | background-color: $color; 4 | color: $white; 5 | 6 | &:focus, 7 | &:hover { 8 | background-color: $state-color; 9 | color: $white; 10 | } 11 | &:active, 12 | &:focus, 13 | &:active:focus { 14 | box-shadow: none; 15 | } 16 | 17 | &.btn-simple { 18 | color: $state-color; 19 | background-color: transparent; 20 | background-image: none !important; 21 | box-shadow: none; 22 | border: none; 23 | 24 | &:hover, 25 | &:focus, 26 | &:hover:focus, 27 | &:active, 28 | &:hover:focus:active { 29 | color: $state-color; 30 | background: transparent !important; 31 | box-shadow: none !important; 32 | } 33 | } 34 | 35 | 36 | &.btn-neutral { 37 | color: $color; 38 | background-color: $white; 39 | 40 | &:hover, 41 | &:focus, 42 | &:active { 43 | color: $state-color; 44 | } 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/mixins/mixins.scss: -------------------------------------------------------------------------------- 1 | @import "badge"; 2 | @import "container"; 3 | @import "hover"; 4 | @import "colored-shadows"; 5 | @import "social-buttons"; 6 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/plugins/free/_perfect-scrollbar.scss: -------------------------------------------------------------------------------- 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 .2s linear, opacity .2s linear; 19 | -webkit-transition: background-color .2s linear, opacity .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 .2s linear, opacity .2s linear; 31 | -webkit-transition: background-color .2s linear, opacity .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 .2s linear, height .2s ease-in-out; 71 | -webkit-transition: background-color .2s linear, height .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 .2s linear, width .2s ease-in-out; 83 | -webkit-transition: background-color .2s linear, width .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 | 112 | @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 113 | .ps { 114 | overflow: auto !important; 115 | } 116 | } 117 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/plugins/free/_prism.scss: -------------------------------------------------------------------------------- 1 | /* PrismJS 1.23.0 2 | https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ 3 | /** 4 | * prism.js default theme for JavaScript, CSS and HTML 5 | * Based on dabblet (http://dabblet.com) 6 | * @author Lea Verou 7 | */ 8 | 9 | code[class*="language-"], 10 | pre[class*="language-"] { 11 | color: black; 12 | background: none; 13 | text-shadow: 0 1px white; 14 | font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; 15 | font-size: 1em; 16 | text-align: left; 17 | white-space: pre; 18 | word-spacing: normal; 19 | word-break: normal; 20 | word-wrap: normal; 21 | line-height: 1.5; 22 | 23 | -moz-tab-size: 4; 24 | -o-tab-size: 4; 25 | tab-size: 4; 26 | 27 | -webkit-hyphens: none; 28 | -moz-hyphens: none; 29 | -ms-hyphens: none; 30 | hyphens: none; 31 | } 32 | 33 | pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, 34 | code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { 35 | text-shadow: none; 36 | background: #b3d4fc; 37 | } 38 | 39 | pre[class*="language-"]::selection, pre[class*="language-"] ::selection, 40 | code[class*="language-"]::selection, code[class*="language-"] ::selection { 41 | text-shadow: none; 42 | background: #b3d4fc; 43 | } 44 | 45 | @media print { 46 | code[class*="language-"], 47 | pre[class*="language-"] { 48 | text-shadow: none; 49 | } 50 | } 51 | 52 | /* Code blocks */ 53 | pre[class*="language-"] { 54 | padding: 1em; 55 | overflow: auto; 56 | border-radius: .75rem; 57 | } 58 | 59 | :not(pre) > code[class*="language-"], 60 | pre[class*="language-"] { 61 | background: $gray-100; 62 | } 63 | 64 | /* Inline code */ 65 | :not(pre) > code[class*="language-"] { 66 | padding: .1em; 67 | border-radius: .3em; 68 | white-space: normal; 69 | } 70 | 71 | .token.comment, 72 | .token.prolog, 73 | .token.doctype, 74 | .token.cdata { 75 | color: slategray; 76 | } 77 | 78 | .token.punctuation { 79 | color: #999; 80 | } 81 | 82 | .token.namespace { 83 | opacity: .7; 84 | } 85 | 86 | .token.property, 87 | .token.tag, 88 | .token.boolean, 89 | .token.number, 90 | .token.constant, 91 | .token.symbol, 92 | .token.deleted { 93 | color: #905; 94 | } 95 | 96 | .token.selector, 97 | .token.attr-name, 98 | .token.string, 99 | .token.char, 100 | .token.builtin, 101 | .token.inserted { 102 | color: #690; 103 | } 104 | 105 | .token.operator, 106 | .token.entity, 107 | .token.url, 108 | .language-css .token.string, 109 | .style .token.string { 110 | color: #9a6e3a; 111 | /* This background color was intended by the author of this theme. */ 112 | background: hsla(0, 0%, 100%, .5); 113 | } 114 | 115 | .token.atrule, 116 | .token.attr-value, 117 | .token.keyword { 118 | color: #07a; 119 | } 120 | 121 | .token.function, 122 | .token.class-name { 123 | color: #DD4A68; 124 | } 125 | 126 | .token.regex, 127 | .token.important, 128 | .token.variable { 129 | color: #e90; 130 | } 131 | 132 | .token.important, 133 | .token.bold { 134 | font-weight: bold; 135 | } 136 | .token.italic { 137 | font-style: italic; 138 | } 139 | 140 | .token.entity { 141 | cursor: help; 142 | } 143 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/plugins/free/plugins.scss: -------------------------------------------------------------------------------- 1 | @import "flatpickr"; 2 | @import "nouislider"; 3 | @import "prism"; 4 | @import "perfect-scrollbar"; 5 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/theme.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Soft UI Dashboard 3 - v1.1.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/soft-ui-dashboard 8 | * Copyright 2024 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (site.license) 10 | 11 | * Coded by www.creative-tim.com 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | 19 | // {{ site.product.name }} components 20 | 21 | // Variables 22 | @import "variables/navbar-vertical"; 23 | @import "variables/social-buttons"; 24 | @import "variables/breadcrumb"; 25 | 26 | // Mixin 27 | @import "mixins/mixins"; 28 | 29 | // Core Components - extra styling 30 | @import "alert"; 31 | @import "avatars"; 32 | @import "badge"; 33 | @import "buttons"; 34 | @import "breadcrumbs"; 35 | @import "cards"; 36 | @import "dropdown"; 37 | @import "dropup"; 38 | @import "header"; 39 | @import "fixed-plugin"; 40 | @import "forms/forms"; 41 | @import "footer"; 42 | @import "gradients"; 43 | @import "info-areas"; 44 | @import "misc"; 45 | @import "navbar"; 46 | @import "navbar-vertical"; 47 | @import "nav"; 48 | @import "pagination"; 49 | @import "popovers"; 50 | @import "progress"; 51 | @import "rtl"; 52 | @import "social-buttons"; 53 | @import "tables"; 54 | @import "timeline"; 55 | @import "tilt"; 56 | @import "tooltips"; 57 | @import "typography"; 58 | 59 | // Plugins 60 | @import "plugins/free/plugins"; 61 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/variables/_animations.scss: -------------------------------------------------------------------------------- 1 | // Waves Animation & Styling 2 | 3 | $waves-position: relative !default; 4 | $waves-width: 100% !default; 5 | $waves-height: 16vh !default; 6 | $waves-min-height: 100px !default; 7 | $waves-max-height: 150px !default; 8 | $waves-margin-bottom: -7px !default; 9 | $waves-height-sm: 50px !default; 10 | $waves-min-height-sm: $waves-height-sm !default; 11 | $waves-rotate: rotate(180deg) !default; 12 | $waves-mobile-height: 40px !default; 13 | 14 | $moving-waves-keyframe-0: translate3d(-90px,0,0) !default; 15 | $moving-waves-keyframe-100: translate3d(85px,0,0) !default; 16 | $moving-waves-animation: move-forever 40s cubic-bezier(.55,.5,.45,.5) infinite !default; 17 | $moving-waves-child-1-delay: -2s !default; 18 | $moving-waves-child-1-duration: 11s !default; 19 | $moving-waves-child-2-delay: -4s !default; 20 | $moving-waves-child-2-duration: 13s !default; 21 | $moving-waves-child-3-delay: -3s !default; 22 | $moving-waves-child-3-duration: 15s !default; 23 | $moving-waves-child-4-delay: -4s !default; 24 | $moving-waves-child-4-duration: 20s !default; 25 | $moving-waves-child-5-delay: -4s !default; 26 | $moving-waves-child-5-duration: 25s !default; 27 | $moving-waves-child-6-delay: -3s !default; 28 | $moving-waves-child-6-duration: 30s !default; 29 | 30 | // Fade In 31 | 32 | $fade-in-animation-name: fadeInBottom !default; 33 | $fade-in-animation-top-name: fadeInTop !default; 34 | $fade-in-bottom-transform: translateY(100%) !default; 35 | $fade-in-top-transform: translateY(-100%) !default; 36 | 37 | 38 | $fade-in-1-animation-duration: 1.5s !default; 39 | $fade-in-2-animation-duration: 1.75s !default; 40 | $fade-in-3-animation-duration: 2s !default; 41 | $fade-in-4-animation-duration: 2.25s !default; 42 | $fade-in-5-animation-duration: 2.5s !default; 43 | 44 | 45 | $floating-man-width: 350px !default; 46 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/variables/_avatars.scss: -------------------------------------------------------------------------------- 1 | // Avatar 2 | $avatar-height: 48px !default; 3 | $avatar-width: 48px !default; 4 | 5 | $avatar-xs-height: 24px !default; 6 | $avatar-xs-width: 24px !default; 7 | 8 | $avatar-sm-height: 36px !default; 9 | $avatar-sm-width: 36px !default; 10 | 11 | $avatar-lg-height: 58px !default; 12 | $avatar-lg-width: 58px !default; 13 | 14 | $avatar-xl-height: 74px !default; 15 | $avatar-xl-width: 74px !default; 16 | 17 | $avatar-xxl-height: 110px !default; 18 | $avatar-xxl-width: 110px !default; 19 | 20 | $avatar-font-size: 1rem !default; 21 | $avatar-content-margin: .75rem !default; 22 | 23 | 24 | // Avatar Group 25 | $avatar-group-border: 2px !default; 26 | $avatar-group-zindex: 2 !default; 27 | $avatar-group-zindex-hover: 3 !default; 28 | $avatar-group-double: -1rem !default; 29 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/variables/_badge.scss: -------------------------------------------------------------------------------- 1 | // Badge 2 | $badge-sm-padding: .45em .775em !default; 3 | $badge-sm-font-size: .65em !default; 4 | $badge-md-padding: .65em 1em !default; 5 | $badge-lg-padding: .85em 1.375em !default; 6 | $badge-inline-margin-right: .625rem !default; 7 | $badge-inline-span-top: 2px !default; 8 | $badge-btn-margin: .5rem !default; 9 | 10 | // Badge Circle 11 | $badge-circle-border-radius: 50% !default; 12 | $badge-circle-width: 1.25rem !default; 13 | $badge-circle-height: 1.25rem !default; 14 | $badge-circle-font-size: .75rem !default; 15 | $badge-circle-font-weight: 600 !default; 16 | 17 | $badge-circle-md-width: 1.5rem !default; 18 | $badge-circle-md-height: 1.5rem !default; 19 | 20 | $badge-circle-lg-width: 2rem !default; 21 | $badge-circle-lg-height: 2rem !default; 22 | 23 | //Badge Dot 24 | $badge-dot-icon-width: .375rem !default; 25 | $badge-dot-icon-height: .375rem !default; 26 | $badge-dot-icon-radius: 50% !default; 27 | $badge-dot-icon-margin-right: .375rem !default; 28 | 29 | $badge-dot-md-icon-width: .5rem !default; 30 | $badge-dot-md-icon-height: .5rem !default; 31 | 32 | $badge-dot-lg-icon-width: .625rem !default; 33 | $badge-dot-lg-icon-height: .625rem !default; 34 | 35 | //Badge Floating 36 | $badge-floating-top: -50% !default; 37 | $badge-floating-border: 3px !default; 38 | $badge-floating-transform: translate(147%, 50%) !default; 39 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/variables/_breadcrumb.scss: -------------------------------------------------------------------------------- 1 | $breadcrumb-dark-bg: $dark !default; 2 | $breadcrumb-dark-color: $gray-100 !default; 3 | $breadcrumb-dark-hover-color: $white !default; 4 | $breadcrumb-dark-active-color: $gray-300 !default; 5 | $breadcrumb-dark-divider-color: $gray-500 !default; 6 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/variables/_cards-extend.scss: -------------------------------------------------------------------------------- 1 | // Card Profile 2 | $card-profile-body-text-align: center !default; 3 | $card-profile-body-padding: 1.25rem 2rem !default; 4 | $card-profile-avatar-margin: 0 auto !default; 5 | $card-profile-img-mt: 32px !default; 6 | $card-profile-img-radius: 50% !default; 7 | $card-profile-img-width: 130px !default; 8 | $card-profile-btn-mt: 24px !default; 9 | $card-profile-p-line-height: 1.778 !default; 10 | 11 | // Card Pricing 12 | $card-pricing-body-padding: 2.25rem !default; 13 | $card-pricing-line-height: 1.111 !default; 14 | $card-pricing-title-mb: $card-bg-description-margin !default; 15 | $card-pricing-td-line-height: 1.429 !default; 16 | $card-pricing-icon-height: 4rem !default; 17 | $card-pricing-icon-width: $card-pricing-icon-height !default; 18 | $card-pricing-icon-position: absolute !default; 19 | $card-pricing-icon-top: -22px !default; 20 | $card-pricing-icon-font-size: 1.25rem !default; 21 | $card-pricing-icon-lg-font-size: 1.75rem !default; 22 | $card-pricing-i-padding: 18px !default; 23 | $card-pricing-badge-padding: 5px !default; 24 | $card-pricing-badge-font-size: 6px !default; 25 | $card-pricing-badge-position: relative !default; 26 | $card-pricing-badge-top: -2px !default; 27 | $card-pricing-border-color: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); 28 | $card-pricing-border-color-dark: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, .4), rgba(0, 0, 0, 0)); 29 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/variables/_cards.scss: -------------------------------------------------------------------------------- 1 | $card-box-shadow: 0 20px 27px 0 rgba(0,0,0,0.05) !default; 2 | $card-background-blur: rgba(255, 255, 255, 0.8) !default; 3 | 4 | $card-header-padding: 1.5rem !default; 5 | 6 | $card-body-padding: $card-header-padding !default; 7 | $card-plain-bg-color: transparent !default; 8 | $card-plain-box-shadow: none !default; 9 | 10 | $card-footer-padding: $card-body-padding !default; 11 | 12 | $card-title-font-weight: $font-weight-bold !default; 13 | $card-title-line-height: 1.2 !default; 14 | 15 | $card-author-display: flex !default; 16 | $card-author-name-line-height: 1.571 !default; 17 | $card-author-name-color: #3A416F !default; 18 | $card-author-stats-color: #5D6494 !default; 19 | $card-avatar-width: 30px !default; 20 | $card-avatar-height: $card-avatar-width !default; 21 | $card-avatar-overflow: hidden !default; 22 | $card-avatar-radius: 50% !default; 23 | $card-avatar-mr: 5px !default; 24 | $card-stats-name-mt: -4px !default; 25 | $card-name-ml: .25rem !default; 26 | 27 | $card-badge-text-transform: uppercase !default; 28 | $card-badge-bg-color: #FAFAFF !default; 29 | 30 | 31 | // Card Background 32 | $card-bg-align-items: center !default; 33 | $card-bg-body-position: relative !default; 34 | $card-bg-body-z-index: 2 !default; 35 | $card-bg-content-min-height: 330px !default; 36 | $card-bg-content-max-width: 450px !default; 37 | $card-bg-content-pt: 60px !default; 38 | $card-bg-content-pb: $card-bg-content-pt !default; 39 | $card-bg-body-left-width: 90% !default; 40 | 41 | $card-bg-description-margin: 24px !default; 42 | 43 | $card-bg-filter-position: absolute !default; 44 | $card-bg-filter-top: 0 !default; 45 | $card-bg-filter-bottom: $card-bg-filter-top !default; 46 | $card-bg-filter-left: $card-bg-filter-top !default; 47 | $card-bg-filter-height: 100% !default; 48 | $card-bg-filter-width: $card-bg-filter-height !default; 49 | $card-bg-filter-z-index: 1 !default; 50 | $card-bg-filter-display: block !default; 51 | $card-bg-filter-content: "" !default; 52 | $card-bg-filter-bg: rgba(0,0,0,.4) !default; 53 | $card-bg-filter-mask-bg: rgba(0,0,0,.2) !default; 54 | $card-bg-filter-radius: 1rem !default; 55 | 56 | $card-full-bg-bg-position: 50% !default; 57 | $card-full-bg-bg-size: cover !default; 58 | $card-full-bg-mb: 30px !default; 59 | $card-full-bg-width: 100% !default; 60 | $card-full-bg-height: $card-full-bg-width !default; 61 | $card-full-bg-position: absolute !default; 62 | $card-full-bg-radius: $card-bg-filter-radius !default; 63 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/variables/_choices.scss: -------------------------------------------------------------------------------- 1 | $choices-box-shadow: $dropdown-box-shadow !default; 2 | $choices-border-radius: .5rem !default; 3 | $choices-animation: .3s cubic-bezier(.23,1,.32,1) !default; 4 | $choices-transition: $dropdown-transition !default; 5 | $choices-transform: perspective(999px) rotateX(-10deg) translateZ(0) translate3d(0px, 37px, 0px) !important !default; 6 | $choices-transform-show: perspective(999px) rotateX(0deg) translateZ(0) translate3d(0,37px,5px) !important !default; 7 | $choices-padding-y: 1rem !default; 8 | $choices-padding-x: .5rem !default; 9 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/variables/_dark-version.scss: -------------------------------------------------------------------------------- 1 | $dark-version-body-color: rgba(255, 255, 255, .8) !default; 2 | $dark-version-bg-color: $gray-900 !default; 3 | $dark-version-sidenav-bg-color: $gray-800 !default; 4 | $dark-version-card-bg-color: $gray-800 !default; 5 | $dark-version-card-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .20), 0 1px 5px 0 rgba(0, 0, 0, .12) !default; 6 | $dark-version-input-bg-image: linear-gradient(0deg, #e91e63 2px, rgba(156, 39, 176, 0) 0), linear-gradient(0deg, rgba(210, 210, 210, .6) 1px, rgba(209, 209, 209, 0) 0) !default; 7 | $dark-version-border-color: rgba(255, 255, 255, .4) !default; 8 | $dark-version-table-color: rgba(255, 255, 255, .6) !default; 9 | $dark-version-caret-sidebar-color: rgba(206, 212, 218, .7) !default; 10 | $dark-nav-link-active-shadow: 0 0 2rem 0 rgba(0, 0, 0, .15) !default; 11 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/variables/_dropdowns.scss: -------------------------------------------------------------------------------- 1 | $dropdown-subitem-position: 101% !default; 2 | $dropdown-transition: visibility .25s,opacity .25s,transform .25s !default; 3 | $dropdown-transform-origin: 50% 0 !default; 4 | $dropdown-transform: perspective(999px) rotateX(-10deg) translateZ(0) translate3d(0px, 37px, 0px) !important !default; 5 | $dropdown-transform-show: perspective(999px) rotateX(0deg) translateZ(0) translate3d(0, 37px,5px) !important !default; 6 | 7 | $dropdown-multilevel-transform: perspective(999px) rotateX(-10deg) translateZ(0) translate3d(0px, 0px, 0px) !important !default; 8 | $dropdown-multilevel-transform-show: perspective(999px) rotateX(0deg) translateZ(0) translate3d(0, 0px,5px) !important !default; 9 | 10 | $dropup-transform-origin: bottom !default; 11 | $dropup-transform: perspective(999px) rotateX(12deg) translateZ(0) translate3d(0px, 0px, 0px) !important !default; 12 | $dropup-transform-show: perspective(999px) rotateX(0deg) translateZ(0) translate3d(1px,0px,5px) !important !default; 13 | 14 | $dropdown-transform-responsive-show: $dropdown-multilevel-transform-show !default; 15 | $dropdown-icon-margin-right: .75rem !default; 16 | 17 | $dropdown-toggle-arrow-transform: rotate(180deg) !default; 18 | $dropdown-toggle-arrow-transition: .3s ease !default; 19 | 20 | $dropdown-button-after-margin-top: 3px !default; 21 | 22 | $dropdown-animation-arrow-left-position: 28px !default; 23 | $dropup-animation-arrow-bottom-position: 22px !default; 24 | $dropdown-animation-arrow-font-size: 22px !default; 25 | $dropup-animation-arrow-transition: bottom .35s ease !default; 26 | $dropdown-animation-arrow-transition: top .35s ease !default; 27 | $dropup-mb: .5rem !default; 28 | 29 | $dropdown-mt: 8px !default; 30 | $dropdown-hover-after-bottom-pos: -24px !default; 31 | $dropdown-hover-after-bottom-pos: -24px !default; 32 | $dropdown-hover-arrow-active-top: -20px !default; 33 | 34 | $dropdown-subitem-position-right: -197px !default; 35 | $dropdown-subitem-left-hover: -8px !default; 36 | $dropdown-subitem-arrow-rotate: rotate(-90deg) !default; 37 | 38 | $dropdown-md-min-width: 15rem !default; 39 | $dropdown-lg-min-width: 23rem !default; 40 | $dropdown-lg-width-responsive: 19rem !default; 41 | $dropdown-xl-min-width: 40rem !default; 42 | 43 | $dropdown-subitem-position: 101% !default; 44 | 45 | 46 | // Extend 47 | $dropdown-subitem-position-right: -197px !default; 48 | $dropdown-subitem-left-hover: -8px !default; 49 | $dropdown-subitem-arrow-rotate: rotate(-90deg) !default; 50 | 51 | $dropdown-md-min-width: 15rem !default; 52 | $dropdown-lg-min-width: 23rem !default; 53 | $dropdown-lg-width-responsive: 19rem !default; 54 | $dropdown-xl-min-width: 40rem !default; 55 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/variables/_fixed-plugin.scss: -------------------------------------------------------------------------------- 1 | $fixed-plugin-bottom: 30px !default; 2 | $fixed-plugin-right: $fixed-plugin-bottom !default; 3 | $fixed-plugin-radius: 50% !default; 4 | $fixed-plugin-box-shadow: $navbar-box-shadow !default; 5 | $fixed-plugin-button-z-index: 990 !default; 6 | $fixed-plugin-card-z-index: 1020 !default; 7 | $fixed-plugin-card-width: 360px !default; 8 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/variables/_form-switch.scss: -------------------------------------------------------------------------------- 1 | $slider-dim: 15px !default; 2 | $slider-position: 2px !default; 3 | $moving-circle: translateX(21px) !default; 4 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/variables/_full-calendar.scss: -------------------------------------------------------------------------------- 1 | $fc-event-title-padding-y: .2rem !default; 2 | $fc-event-title-padding-x: .3rem !default; 3 | 4 | $fc-daygrid-event-border-radius: .35rem !default; 5 | $fc-theme-standard-dark-border-color: rgba($secondary, .3) !default; 6 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/variables/_header.scss: -------------------------------------------------------------------------------- 1 | $page-header-padding: 0 !default; 2 | $page-header-position: relative !default; 3 | $page-header-overflow: hidden !default; 4 | $page-header-display: flex !default; 5 | $page-header-align-items: center !default; 6 | $page-header-bg-size: cover !default; 7 | $page-header-bg-position: 50% !default; 8 | 9 | $mask-position: absolute !default; 10 | $mask-bg-size: cover !default; 11 | $mask-bg-position: center center !default; 12 | $mask-top: 0 !default; 13 | $mask-left: $mask-top !default; 14 | $mask-width: 100% !default; 15 | $mask-height: $mask-width !default; 16 | $mask-opacity: .8 !default; 17 | 18 | $page-header-conteiner-index: 1 !default; 19 | 20 | $header-oblique-img-width: 60% !default; 21 | $header-oblique-img-right: -10rem !default; 22 | $header-oblique-transform: skewX(-10deg) !default; 23 | $header-oblique-overflow: hidden !default; 24 | $header-oblique-img-transform: skewX(10deg) !default; 25 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/variables/_info-areas.scss: -------------------------------------------------------------------------------- 1 | $icon-shape-bg-image: linear-gradient(310deg,#7928CA,#FF0080) !default; 2 | $icon-shape-bg-position: center !default; 3 | 4 | $icon-striped-bg-md: 85px !default; 5 | $icon-striped-bg-lg: 111px !default; 6 | $icon-striped-bg-xl: 80px !default; 7 | 8 | $icon-striped-icon-mt: 25% !default; 9 | $icon-striped-icon-ml: -24% !default; 10 | 11 | $icon-shape-icon-opacity: .8 !default; 12 | $info-icon-top: 11px !default; 13 | $info-icon-top-xxs: -4px !default; 14 | $info-icon-top-xs: -4px !default; 15 | $info-icon-top-sm: 2px !default; 16 | $info-icon-top-md: 22% !default; 17 | $info-icon-top-lg: 31% !default; 18 | $info-icon-top-xl: 37% !default; 19 | $info-icon-position: relative !default; 20 | 21 | $icon-xxs-width: 20px !default; 22 | $icon-xxs-height: $icon-xxs-width !default; 23 | $icon-xs-width: 24px !default; 24 | $icon-xs-height: $icon-xs-width !default; 25 | $icon-sm-width: 32px !default; 26 | $icon-sm-height: $icon-sm-width !default; 27 | $icon-md-width: 48px !default; 28 | $icon-md-height: $icon-md-width !default; 29 | $icon-lg-width: 64px !default; 30 | $icon-lg-height: $icon-lg-width !default; 31 | $icon-xl-width: 100px !default; 32 | $icon-xl-height: $icon-xl-width !default; 33 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/variables/_misc-extend.scss: -------------------------------------------------------------------------------- 1 | // Text Border 2 | $text-border-bg-color: rgba($secondary,.5) !default; 3 | $text-border-bg-color-before: linear-gradient(90deg,transparent,rgba(117,117,117,.4),rgba(117,117,117,.4)) !default; 4 | $text-border-bg-color-after: linear-gradient(90deg,rgba(117,117,117,.4),rgba(117,117,117,.4),transparent) !default; 5 | $text-border-display: inline-block !default; 6 | $text-border-width: 30% !default; 7 | $text-border-height: 1px !default; 8 | $text-border-position: relative !default; 9 | $text-border-vertical-align: middle !default; 10 | $text-border-before-right: .5em !default; 11 | $text-border-before-ml: -50% !default; 12 | $text-border-after-left: $text-border-before-right !default; 13 | $text-border-after-mr: $text-border-before-ml !default; 14 | 15 | 16 | // Header Shapes 17 | 18 | $shape-1-width: 55% !default; 19 | $shape-1-left: 15% !default; 20 | $shape-2-width: 35% !default; 21 | $shape-2-left: 20% !default; 22 | $shape-3-width: 50% !default; 23 | $shape-3-left: -28rem !default; 24 | 25 | $shape-img-1-right: 7% !default; 26 | $shape-img-1-width: 36% !default; 27 | $shape-img-1-margin-top: 12% !default; 28 | 29 | $shape-img-2-left: 24% !default; 30 | $shape-img-2-width: 27% !default; 31 | $shape-img-2-margin-top: 10% !default; 32 | 33 | // Comming Soon page 34 | 35 | $coming-rotate-transform: rotate(20deg) !default; 36 | 37 | 38 | // Tilt Animation 39 | 40 | $tilt-transform-style: preserve-3d !default; 41 | $tilt-transform-up-transform: translateZ(50px) scale(0.7) !default; 42 | $tilt-transform-up-transition: all 0.5s !default; 43 | 44 | // Round Slider 45 | 46 | $round-slider-m-width: 200px !default; 47 | $round-slider-scale-m-width: 300px !default; 48 | $round-slider-transition: all .5s ease-out 0s !default; 49 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/variables/_misc.scss: -------------------------------------------------------------------------------- 1 | // Horizontal Faded Line 2 | $hr-bg: transparent !default; 3 | $hr-transform: rotate(90deg) !default; 4 | $hr-bg-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) !default; 5 | $hr-bg-dark-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, .4), rgba(0, 0, 0, 0)) !default; 6 | 7 | 8 | // Gradient Animation 9 | $gradient-animation-background: linear-gradient(-45deg, $info-gradient, $danger, $warning, $primary-gradient, $dark) !default; 10 | $gradient-animation-bg-size: 400% 400% !default; 11 | 12 | // Device Wrapper 13 | $device-wrapper-radius: 3.5rem !default; 14 | $device-wrapper-box-shadow: 0 12px 15px rgba(140, 152, 164, 0.1) !default; 15 | $device-wrapper-animation: gradient 10s ease infinite !default; 16 | 17 | 18 | // Nav pills 19 | $nav-pills-link-border-radius: 0.5rem !default; 20 | $nav-pills-link-box-shadow: 0px 1px 5px 1px #ddd !default; 21 | $nav-pills-link-active-padding: 7px 15px !default; 22 | $nav-pills-link-active-margin: 1px !default; 23 | $nav-pills-link-active-animation: .2s ease !default; 24 | 25 | // Table Progress 26 | 27 | $table-progress-width: 120px !default; 28 | $table-progress-height: 3px !default; 29 | $table-progress-margin: 0 !default; 30 | 31 | // Tooltip Arrow 32 | 33 | $tooltip-arrow-left: 1px !default; 34 | $tooltip-arrow-right: $tooltip-arrow-left !default; 35 | 36 | // Footer Link hover animation 37 | 38 | $footer-link-animation: opacity .3 ease !default; 39 | 40 | // Blur background 41 | 42 | $blur-light-background: rgba(255, 255, 255, 0.4) !default; 43 | $blur-dark-background: rgba(0, 0, 0, 0.3) !default; 44 | 45 | // HR w/ opacity 46 | 47 | $hr-bg-color: transparent !default; 48 | $hr-width: 1px !default; 49 | $hr-margin: .75rem 0 !default; 50 | $hr-horizontal-bg-image-light: linear-gradient(to right, rgba(255, 255, 255, 0), white, rgba(255, 255, 255, 0)) !default; 51 | $hr-horizontal-bg-image-gray-light: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, .1), rgba(0, 0, 0, 0)) !default; 52 | $hr-horizontal-bg-image-dark: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, .4), rgba(0, 0, 0, 0)) !default; 53 | $hr-vertical-bg-image-light: linear-gradient(to bottom, rgba(255, 255, 255, 0), white, rgba(255, 255, 255, 0)) !default; 54 | $hr-vertical-bg-image-dark: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .4), rgba(0, 0, 0, 0)) !default; 55 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/variables/_navbar.scss: -------------------------------------------------------------------------------- 1 | // Navbar toggler icon on responsive styling 2 | 3 | $navbar-toggler-bar-display: block !default; 4 | $navbar-toggler-bar-position: relative !default; 5 | $navbar-toggler-bar-width: 22px !default; 6 | $navbar-toggler-bar-height: 1px !default; 7 | $navbar-toggler-bar-radius: 1px !default; 8 | $navbar-toggler-bar-transition: all 0.2s !default; 9 | $navbar-toggler-bar-margin-top: 7px !default; 10 | 11 | $navbar-toggler-bar-1-transform: rotate(45deg) !default; 12 | $navbar-toggler-bar-1-transform-origin: 10% 10% !default; 13 | $navbar-toggler-bar-1-margin-top: 4px !default; 14 | $navbar-toggler-bar-2-opacity: 0 !default; 15 | $navbar-toggler-bar-3-transform: rotate(-45deg) !default; 16 | $navbar-toggler-bar-3-transform-origin: 10% 90% !default; 17 | $navbar-toggler-bar-3-margin-top: 3px !default; 18 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/variables/_pagination.scss: -------------------------------------------------------------------------------- 1 | // Pagination 2 | 3 | $pagination-active-box-shadow: $btn-hover-box-shadow !default; 4 | 5 | $page-link-display: flex !default; 6 | $page-link-align-items: center !default; 7 | $page-link-justify-content: $page-link-align-items !default; 8 | $page-link-margin: 0 3px !default; 9 | $page-link-radius: 50% !default; 10 | $page-link-width: 36px !default; 11 | $page-link-height: $page-link-width !default; 12 | 13 | $page-link-width-lg: 46px !default; 14 | $page-link-height-lg: $page-link-width-lg !default; 15 | $page-link-line-height-lg: $page-link-width-lg !default; 16 | 17 | $page-link-width-sm: 30px !default; 18 | $page-link-height-sm: $page-link-width-sm !default; 19 | $page-link-line-height-sm: $page-link-width-sm !default; 20 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/variables/_rtl.scss: -------------------------------------------------------------------------------- 1 | $timeline-step-transform-rtl: translateX(50%) !default; 2 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/variables/_social-buttons.scss: -------------------------------------------------------------------------------- 1 | // Social Buttons 2 | 3 | $facebook: #3b5998 !default; 4 | $facebook-states: darken($facebook, 5%) !default; 5 | $twitter: #55acee !default; 6 | $twitter-states: darken($twitter, 5%) !default; 7 | $instagram: #125688 !default; 8 | $instagram-states: darken($instagram, 6%) !default; 9 | $linkedin: #0077B5 !default; 10 | $linkedin-states: darken($linkedin, 5%) !default; 11 | $pinterest: #cc2127 !default; 12 | $pinterest-states: darken($pinterest, 6%) !default; 13 | $youtube: #e52d27 !default; 14 | $youtube-states: darken($youtube, 6%) !default; 15 | $dribbble: #ea4c89 !default; 16 | $dribbble-states: darken($dribbble, 6%) !default; 17 | $github: #24292E !default; 18 | $github-states: darken($github, 6%) !default; 19 | $reddit: #ff4500 !default; 20 | $reddit-states: darken($reddit, 6%) !default; 21 | $tumblr: #35465c !default; 22 | $tumblr-states: darken($tumblr, 6%) !default; 23 | $behance: #1769ff !default; 24 | $behance-states: darken($behance, 6%) !default; 25 | $vimeo: #1AB7EA !default; 26 | $vimeo-states: darken($vimeo, 6%) !default; 27 | $slack: #3aaf85 !default; 28 | $slack-states: darken($slack, 6%) !default; 29 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/variables/_table.scss: -------------------------------------------------------------------------------- 1 | $table-head-spacer-y: .75rem !default; 2 | $table-head-spacer-x: 1rem !default; 3 | $table-head-font-size: .65rem !default; 4 | $table-head-font-weight: $font-weight-bold !default; 5 | $table-head-text-transform: uppercase !default; 6 | $table-head-letter-spacing: 1px !default; 7 | $table-head-bg: $gray-100 !default; 8 | $table-head-color: $gray-600 !default; 9 | $table-action-color: $gray-500 !default; 10 | 11 | $table-body-font-size: .8125rem !default; 12 | 13 | $table-dark-bg: theme-color("default") !default; 14 | $table-dark-accent-bg: rgba($white, .05) !default; 15 | $table-dark-hover-bg: rgba($white, .075) !default; 16 | 17 | $table-dark-head-bg: lighten($dark, 4%) !default; 18 | $table-dark-head-color: lighten($dark, 35%) !default; 19 | $table-dark-action-color: lighten($dark, 35%) !default; 20 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/variables/_timeline.scss: -------------------------------------------------------------------------------- 1 | // Timeline 2 | 3 | $timeline-axis-width: 2px !default; 4 | $timeline-axis-color: $border-color !default; 5 | $timeline-left: 1rem !default; 6 | 7 | $timeline-step-bg: $white !default; 8 | $timeline-step-width: 26px !default; 9 | $timeline-step-height: $timeline-step-width !default; 10 | $timeline-step-radius: 50% !default; 11 | $timeline-step-transform: translateX(-50%) !default; 12 | $timeline-step-line-height: 1.4 !default; 13 | 14 | $timeline-step-border-width: 2px !default; 15 | $timeline-step-border-color: $timeline-axis-color !default; 16 | 17 | $timeline-content-margin-left: 45px !default; 18 | $timeline-content-padding-top: .35rem !default; 19 | $timeline-content-top: -6px !default; 20 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/variables/_utilities-extend.scss: -------------------------------------------------------------------------------- 1 | // Colores Shadow on cards 2 | $colored-shadow-top: 3.5% !default; 3 | $colored-shadow-blur: 12px !default; 4 | $colored-shadow-scale: .94 !default; 5 | $colored-shadow-scale-avatar: .87 !default; 6 | 7 | // Card Projects 8 | $card-project-transition: .4s cubic-bezier(.215,.61,.355,1) !default; 9 | $card-project-avatar-transform: scale(.8) translateY(-45px) !default; 10 | $card-project-hover-transform: translateY(-2px) !default; 11 | 12 | // Transform Perspective effect 13 | $transform-perspective: scale(1) perspective(1040px) rotateY(-11deg) rotateX(2deg) rotate(2deg) !default; 14 | $transform-perspective-inverse: scale(1) perspective(1040px) rotateY(11deg) rotateX(-2deg) rotate(-2deg) !default; 15 | 16 | // Z index 17 | $z-index2: 2 !default; 18 | 19 | // Width in PX 20 | $width-32-px: 32px !default; 21 | $width-48-px: 48px !default; 22 | $width-64-px: 64px !default; 23 | -------------------------------------------------------------------------------- /assets/scss/soft-ui-dashboard/variables/_virtual-reality.scss: -------------------------------------------------------------------------------- 1 | $animation-name: fadeInBottom !default; 2 | $animation-mode: both !default; 3 | $animation-duration: 1.5s !default; 4 | $transform-scale: scale(0.6) !default; 5 | $position-left: 18% !default; 6 | -------------------------------------------------------------------------------- /genezio.yaml: -------------------------------------------------------------------------------- 1 | name: soft-ui-dashboard 2 | region: us-east-1 3 | frontend: 4 | # Specifies the path of your code. 5 | path: . 6 | # Specifies the folder where the build is located. 7 | # This is the folder that will be deployed. 8 | publish: . 9 | # Scripts will run in the specified `path` folder. 10 | scripts: 11 | # The command to build your frontend project. This is custom to your project. 12 | # It must to populate the specified `publish` folder with a `index.html` file. 13 | deploy: 14 | - npm install --legacy-peer-deps 15 | yamlVersion: 2 -------------------------------------------------------------------------------- /gulpfile.mjs: -------------------------------------------------------------------------------- 1 | import gulp from 'gulp'; 2 | import open from 'gulp-open'; 3 | 4 | // Task to open the browser 5 | gulp.task('open-app', function(){ 6 | gulp.src('pages/dashboard.html') 7 | .pipe(open()); 8 | }); -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | Soft UI Dashboard 3 by Creative Tim 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 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 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 |
102 |
103 |
104 |
If you are not redirected automatically, follow this link.
105 |
106 |
107 |
108 | 109 | 110 | 111 | 112 | 113 | 114 | -------------------------------------------------------------------------------- /media/soft-ui-dashboard-intro.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/media/soft-ui-dashboard-intro.gif -------------------------------------------------------------------------------- /media/soft-ui-dashboard-screen-billing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/media/soft-ui-dashboard-screen-billing.png -------------------------------------------------------------------------------- /media/soft-ui-dashboard-screen-login.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/media/soft-ui-dashboard-screen-login.png -------------------------------------------------------------------------------- /media/soft-ui-dashboard-screen-profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/media/soft-ui-dashboard-screen-profile.png -------------------------------------------------------------------------------- /media/soft-ui-dashboard-screen-rtl.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/media/soft-ui-dashboard-screen-rtl.png -------------------------------------------------------------------------------- /media/soft-ui-dashboard-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/soft-ui-dashboard/8d29eaac504f62240b5c7be56c93b27848280f77/media/soft-ui-dashboard-screen.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "soft-ui-dashboard", 3 | "version": "1.1.0", 4 | "description": "Freebie Dashboard for Bootstrap 5", 5 | "main": "pages/dashboard.html", 6 | "type": "module", 7 | "directories": { 8 | "example": "root" 9 | }, 10 | "scripts": { 11 | "open-app": "gulp open-app", 12 | "start": "npm run open-app", 13 | "test": "echo \"Error: no test specified\" && exit 1", 14 | "watch": "gulp-watch" 15 | }, 16 | "repository": { 17 | "type": "git", 18 | "url": "git+https://github.com/creativetimofficial/soft-ui-dashboard.git" 19 | }, 20 | "keywords": [ 21 | "soft ui dashboard", 22 | "bootstrap 5", 23 | "dashboard", 24 | "creative tim", 25 | "html dashboard", 26 | "html css dashboard", 27 | "web dashboard", 28 | "freebie", 29 | "free bootstrap dashboard", 30 | "css3 dashboard", 31 | "bootstrap dashboard", 32 | "frontend", 33 | "responsive bootstrap dashboard" 34 | ], 35 | "author": "Creative Tim (https://www.creative-tim.com/)", 36 | "license": "MIT", 37 | "bugs": { 38 | "url": "https://github.com/creativetimofficial/soft-ui-dashboard/issues" 39 | }, 40 | "devDependencies": { 41 | "gulp": "5.0.0", 42 | "gulp-open": "3.0.1", 43 | "sass": "1.80.2" 44 | }, 45 | "homepage": "http://creative-tim.com/product/soft-ui-dashboard" 46 | } 47 | --------------------------------------------------------------------------------