diff --git a/.babelrc b/.babelrc index ac46bfab..bcd27528 100644 --- a/.babelrc +++ b/.babelrc @@ -1,10 +1,3 @@ { - "presets": [ - [ - "@vue/app", - { - "polyfills": ["es.promise", "es.symbol"], - } - ] - ] + "presets": [["@vue/app"]] } diff --git a/.eslintrc b/.eslintrc index b94e9b04..436e1975 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,8 +1,6 @@ { "root": true, - "extends": [ - "plugin:vue/essential" - ], + "extends": ["plugin:vue/essential"], "env": { "amd": true }, diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 975079f2..9029be09 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -4,9 +4,9 @@ jobs: autoclose: runs-on: ubuntu-latest steps: - - name: Issue auto-closer - uses: roots/issue-closer-action@v1.1 - with: - repo-token: ${{ secrets.GITHUB_TOKEN }} - 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/vue-black-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" - 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 --\>) + - name: Issue auto-closer + uses: roots/issue-closer-action@v1.1 + with: + repo-token: ${{ secrets.GITHUB_TOKEN }} + 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/vue-black-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" + 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 --\>) diff --git a/.npmrc b/.npmrc new file mode 100644 index 00000000..5c6c9587 --- /dev/null +++ b/.npmrc @@ -0,0 +1,3 @@ +legacy-peer-deps=true +auto-install-peers=true +strict-peer-dependencies=false \ No newline at end of file diff --git a/CHANGELOG.md b/CHANGELOG.md index e21562e0..32fcb579 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ # Change Log +## [1.1.3] 2024-02-25 + +- Update dependencies & devDependencies + ## [1.1.2] 2022-01-10 - Update dependencies and devDependencies diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index b221589d..b9f46d5b 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,9 +1,10 @@ -* Fork the repository -* Clone it on your PC -* `npm install` or `yarn install` -* Make changes, commit open PR +- Fork the repository +- Clone it on your PC +- `npm install` or `yarn install` +- Make changes, commit open PR ### Notes -* Please don't use jQuery or jQuery based plugins since there are many pure Vue alternatives + +- Please don't use jQuery or jQuery based plugins since there are many pure Vue alternatives This project uses [vue-cli 3](https://github.com/vuejs/vue-cli). diff --git a/README.md b/README.md index df473b7e..bb04fc16 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,6 @@ # [Vue-Black Dashboard](https://demos.creative-tim.com/vue-black-dashboard) [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social&logo=twitter)](https://twitter.com/intent/tweet?text=Black%20Dashboard%20by%20Creative%20Tim&url=https%3A%2F%2Fdemos.creative-tim.com%2Fblack-dashboard%2Fexamples%2Fdashboard.html&via=CreativeTim) - - ![version](https://img.shields.io/badge/version-1.1.2-blue.svg) ![license](https://img.shields.io/badge/license-MIT-blue.svg) [![GitHub issues open](https://img.shields.io/github/issues/creativetimofficial/black-dashboard/issues.svg?maxAge=2592000)](https://github.com/creativetimofficial/black-dashboard/issues/issues?q=is%3Aopen+is%3Aissue) [![GitHub issues closed](https://img.shields.io/github/issues-closed-raw/creativetimofficial/black-dashboard/issues.svg?maxAge=2592000)](https://github.com/creativetimofficial/black-dashboard/issues/issues?q=is%3Aissue+is%3Aclosed) [![Join the chat at https://gitter.im/NIT-dgp/General](https://badges.gitter.im/NIT-dgp/General.svg)](https://gitter.im/creative-tim-general/Lobby) [![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://discord.gg/E4aHAQy) - +![version](https://img.shields.io/badge/version-1.1.3-blue.svg) ![license](https://img.shields.io/badge/license-MIT-blue.svg) [![GitHub issues open](https://img.shields.io/github/issues/creativetimofficial/black-dashboard/issues.svg?maxAge=2592000)](https://github.com/creativetimofficial/black-dashboard/issues/issues?q=is%3Aopen+is%3Aissue) [![GitHub issues closed](https://img.shields.io/github/issues-closed-raw/creativetimofficial/black-dashboard/issues.svg?maxAge=2592000)](https://github.com/creativetimofficial/black-dashboard/issues/issues?q=is%3Aissue+is%3Aclosed) [![Join the chat at https://gitter.im/NIT-dgp/General](https://badges.gitter.im/NIT-dgp/General.svg)](https://gitter.im/creative-tim-general/Lobby) [![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://discord.gg/E4aHAQy) ![Product Gif](https://github.com/creativetimofficial/vue-black-dashboard/blob/live-demo/src/assets/demo/product-gif.gif?raw=true) @@ -15,21 +13,18 @@ We thought about everything, so this dashboard comes with 2 versions, Dark Mode We are very excited to share this dashboard with you and we look forward to hearing your feedback! - ## Table of Contents - -* [Demo](#demo) -* [Quick Start](#quick-start) -* [Documentation](#documentation) -* [File Structure](#file-structure) -* [Browser Support](#browser-support) -* [Resources](#resources) -* [Reporting Issues](#reporting-issues) -* [Technical Support or Questions](#technical-support-or-questions) -* [Licensing](#licensing) -* [Useful Links](#useful-links) - +- [Demo](#demo) +- [Quick Start](#quick-start) +- [Documentation](#documentation) +- [File Structure](#file-structure) +- [Browser Support](#browser-support) +- [Resources](#resources) +- [Reporting Issues](#reporting-issues) +- [Technical Support or Questions](#technical-support-or-questions) +- [Licensing](#licensing) +- [Useful Links](#useful-links) ## Demo @@ -41,24 +36,23 @@ We are very excited to share this dashboard with you and we look forward to hear [View More](https://demos.creative-tim.com/vue-black-dashboard). - ## Quick start - Clone the repo: `git clone https://github.com/creativetimofficial/vue-black-dashboard.git`. - [Download from Github](https://github.com/creativetimofficial/vue-black-dashboard/archive/master.zip). - [Download from Creative Tim](https://www.creative-tim.com/product/vue-black-dashboard). - ## Documentation -The documentation for the Vue Black Dashboard is hosted at our [website](https://demos.creative-tim.com/vue-black-dashboard/documentation). +The documentation for the Vue Black Dashboard is hosted at our [website](https://demos.creative-tim.com/vue-black-dashboard/documentation). ## File Structure + Within the download you'll find the following directories and files: ``` |-- Vue Black Dashboard - |-- .babelrc + |-- .babelrc |-- .env |-- .eslintrc |-- .gitattributes @@ -160,15 +154,12 @@ Within the download you'll find the following directories and files: ``` - ## Browser Support At present, we officially aim to support the last two versions of the following browsers: - - ## Reporting Issues We use GitHub Issues as the official bug tracker for the Vue Black Dashboard. Here are some advices for our users that want to report an issue: @@ -177,20 +168,16 @@ We use GitHub Issues as the official bug tracker for the Vue Black Dashboard. He 2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed. 3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help. - ## Technical Support or Questions If you have questions or need help integrating the product please [contact us](https://www.creative-tim.com/contact-us) instead of opening an issue. - ## Licensing -- Copyright 2023 Creative Tim (https://www.creative-tim.com/) +- Copyright 2024 Creative Tim (https://www.creative-tim.com/) - Licensed under MIT (https://github.com/creativetimofficial/vue-black-dashboard/issues/blob/master/LICENSE.md) - - ## Useful Links - [More products](https://www.creative-tim.com/bootstrap-themes) from Creative Tim diff --git a/intelij.webpack.js b/intelij.webpack.js index 2f49f381..01538d11 100644 --- a/intelij.webpack.js +++ b/intelij.webpack.js @@ -1,12 +1,12 @@ // This configuration file is not used anywhere in the code, it's a hack to handle InteliJ relative path imports // Keep in sync with actual webpack aliases -const path = require('path'); +const path = require("path"); module.exports = { resolve: { alias: { - '@': path.resolve(__dirname, 'src') - } - } + "@": path.resolve(__dirname, "src"), + }, + }, }; diff --git a/package.json b/package.json index 7453e1cd..b23293f7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vue-black-dashboard", - "version": "1.1.2", + "version": "1.1.3", "private": true, "description": "A sample admin dashboard based on black dashboard UI template", "author": "cristian.jora ", @@ -10,27 +10,34 @@ "e2e": "node test/e2e/runner.js", "lint": "vue-cli-service lint", "dev": "vue-cli-service serve --open", - "lint-fix": "vue-cli-service lint --fix" + "lint-fix": "vue-cli-service lint --fix", + "prettify": "prettier --write ." }, "dependencies": { - "chart.js": "^2.9.3", - "eslint-plugin-vue": "^9.8.0", + "chart.js": "2.9.4", + "eslint-plugin-vue": "9.11.0", "register-service-worker": "^1.7.2", - "vue": "^2.7.14", + "vue": "2.7.14", "vue-chartjs": "3.5.1", - "vue-i18n": "^8.18.2", + "vue-i18n": "8.28.2", "vue-router": "3.6.5", - "vue-router-prefetch": "^1.6.3", - "vue2-transitions": "^0.3.0" + "vue-router-prefetch": "1.6.3", + "vue2-transitions": "0.3.0" }, "devDependencies": { - "@vue/cli-plugin-babel": "4.5.19", - "@vue/cli-plugin-eslint": "4.5.19", - "@vue/cli-plugin-pwa": "4.5.19", - "@vue/cli-service": "4.5.19", - "sass": "1.56.2", + "@vue/cli-plugin-babel": "5.0.8", + "@vue/cli-plugin-eslint": "5.0.8", + "@vue/cli-plugin-pwa": "5.0.8", + "@vue/cli-service": "5.0.8", + "@vue/eslint-config-prettier": "7.1.0", + "@babel/eslint-parser": "7.21.8", + "eslint": "8.41.0", + "eslint-plugin-prettier": "4.2.1", + "eslint-plugin-vue": "9.14.1", + "prettier": "2.8.8", + "sass": "1.62.1", "sass-loader": "10.2.0", - "vue-cli-plugin-i18n": "2.3.1", + "vue-cli-plugin-i18n": "2.3.2", "vue-template-compiler": "2.7.14" }, "browserslist": [ diff --git a/public/index.html b/public/index.html index 17510b37..749576ab 100644 --- a/public/index.html +++ b/public/index.html @@ -1,10 +1,10 @@ - - - - - - - Vue Black Dashboard Free - - - - - - - - - - - -
- -
- - - - + + + + + + + Vue Black Dashboard Free + + + + + + + + + + +
+ + + diff --git a/src/App.vue b/src/App.vue index b3813b3c..6999b24f 100644 --- a/src/App.vue +++ b/src/App.vue @@ -6,23 +6,23 @@ diff --git a/src/assets/css/nucleo-icons.css b/src/assets/css/nucleo-icons.css index 7e9898f3..e571d9e0 100644 --- a/src/assets/css/nucleo-icons.css +++ b/src/assets/css/nucleo-icons.css @@ -7,12 +7,12 @@ Created using IcoMoon - icomoon.io -------------------------------- */ @font-face { - font-family: 'Nucleo'; - src: url('../fonts/nucleo.eot'); - src: url('../fonts/nucleo.eot') format('embedded-opentype'), - url('../fonts/nucleo.woff2') format('woff2'), - url('../fonts/nucleo.woff') format('woff'), - url('../fonts/nucleo.ttf') format('truetype'); + font-family: "Nucleo"; + src: url("../fonts/nucleo.eot"); + src: url("../fonts/nucleo.eot") format("embedded-opentype"), + url("../fonts/nucleo.woff2") format("woff2"), + url("../fonts/nucleo.woff") format("woff"), + url("../fonts/nucleo.ttf") format("truetype"); font-weight: normal; font-style: normal; } @@ -23,7 +23,7 @@ Created using IcoMoon - icomoon.io .tim-icons { display: inline-block; - font: normal normal normal 1em/1 'Nucleo'; + font: normal normal normal 1em/1 "Nucleo"; vertical-align: middle; speak: none; text-transform: none; @@ -36,13 +36,13 @@ Created using IcoMoon - icomoon.io text-align: center; padding: 45px 0 30px; border: 1px solid #e44cc4; - border-radius: .1875rem; + border-radius: 0.1875rem; margin: 15px 0; min-height: 168px; } .font-icon-detail i { - color: #FFFFFF; + color: #ffffff; font-size: 1.5em; } @@ -50,7 +50,7 @@ Created using IcoMoon - icomoon.io color: #e44cc4 !important; margin-top: 30px; padding: 0 10px; - font-size: .7142em; + font-size: 0.7142em; } /*------------------------ diff --git a/src/assets/demo/demo.css b/src/assets/demo/demo.css index 7c084282..269bf08c 100644 --- a/src/assets/demo/demo.css +++ b/src/assets/demo/demo.css @@ -50,7 +50,7 @@ } @media all and (min-width: 992px) { - .sidebar .nav>li.active-pro { + .sidebar .nav > li.active-pro { position: absolute; width: 100%; bottom: 10px; @@ -60,4 +60,4 @@ .card.card-upgrade .card-category { max-width: 530px; margin: 0 auto; -} \ No newline at end of file +} diff --git a/src/assets/sass/black-dashboard.scss b/src/assets/sass/black-dashboard.scss index 4f2a8de5..ea2c658a 100644 --- a/src/assets/sass/black-dashboard.scss +++ b/src/assets/sass/black-dashboard.scss @@ -1,11 +1,10 @@ - /* ========================================================= - * Vue Black Dashboard - v1.1.0 + * Vue Black Dashboard - v1.1.3 ========================================================= * Product Page: https://www.creative-tim.com/product/black-dashboard - * Copyright 2019 Creative Tim (http://www.creative-tim.com) + * Copyright 2024 Creative Tim (http://www.creative-tim.com) ========================================================= @@ -13,7 +12,7 @@ */ - // Core +// Core @import "black-dashboard/custom/functions"; @import "black-dashboard/bootstrap/functions"; @@ -24,7 +23,7 @@ @import "black-dashboard/custom/mixins"; @import "black-dashboard/bootstrap/mixins"; - // Bootstrap components +// Bootstrap components @import "black-dashboard/bootstrap/root"; @import "black-dashboard/bootstrap/reboot"; @@ -59,27 +58,26 @@ @import "black-dashboard/bootstrap/utilities"; @import "black-dashboard/bootstrap/print"; - // Custom components - - @import "black-dashboard/custom/alerts.scss"; - @import "black-dashboard/custom/buttons.scss"; - @import "black-dashboard/custom/dropdown.scss"; - @import "black-dashboard/custom/footer.scss"; - @import "black-dashboard/custom/forms.scss"; - @import "black-dashboard/custom/images.scss"; - @import "black-dashboard/custom/modal.scss"; - @import "black-dashboard/custom/navbar.scss"; - @import "black-dashboard/custom/type.scss"; - @import "black-dashboard/custom/tables"; - @import "black-dashboard/custom/checkboxes-radio"; - @import "black-dashboard/custom/fixed-plugin"; - @import "black-dashboard/custom/sidebar-and-main-panel.scss"; - @import "black-dashboard/custom/misc.scss"; - @import "black-dashboard/custom/rtl.scss"; - @import "black-dashboard/custom/input-group.scss"; - - - // Vendor / Plugins +// Custom components + +@import "black-dashboard/custom/alerts.scss"; +@import "black-dashboard/custom/buttons.scss"; +@import "black-dashboard/custom/dropdown.scss"; +@import "black-dashboard/custom/footer.scss"; +@import "black-dashboard/custom/forms.scss"; +@import "black-dashboard/custom/images.scss"; +@import "black-dashboard/custom/modal.scss"; +@import "black-dashboard/custom/navbar.scss"; +@import "black-dashboard/custom/type.scss"; +@import "black-dashboard/custom/tables"; +@import "black-dashboard/custom/checkboxes-radio"; +@import "black-dashboard/custom/fixed-plugin"; +@import "black-dashboard/custom/sidebar-and-main-panel.scss"; +@import "black-dashboard/custom/misc.scss"; +@import "black-dashboard/custom/rtl.scss"; +@import "black-dashboard/custom/input-group.scss"; + +// Vendor / Plugins @import "black-dashboard/custom/vendor/plugin-perfect-scrollbar.scss"; @import "black-dashboard/custom/vendor/plugin-animate-bootstrap-notify.scss"; @@ -90,7 +88,7 @@ // Cards -@import 'black-dashboard/custom/card'; +@import "black-dashboard/custom/card"; @import "black-dashboard/custom/cards/card-chart"; @import "black-dashboard/custom/cards/card-map"; @import "black-dashboard/custom/cards/card-user"; diff --git a/src/assets/sass/black-dashboard/bootstrap/_alert.scss b/src/assets/sass/black-dashboard/bootstrap/_alert.scss index dd43e237..ac323fd5 100644 --- a/src/assets/sass/black-dashboard/bootstrap/_alert.scss +++ b/src/assets/sass/black-dashboard/bootstrap/_alert.scss @@ -21,7 +21,6 @@ font-weight: $alert-link-font-weight; } - // Dismissible alerts // // Expand the right padding and account for the close button's positioning. @@ -39,13 +38,16 @@ } } - // Alternate styles // // Generate contextual modifier classes for colorizing the alert. @each $color, $value in $theme-colors { .alert-#{$color} { - @include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level)); + @include alert-variant( + theme-color-level($color, $alert-bg-level), + theme-color-level($color, $alert-border-level), + theme-color-level($color, $alert-color-level) + ); } } diff --git a/src/assets/sass/black-dashboard/bootstrap/_button-group.scss b/src/assets/sass/black-dashboard/bootstrap/_button-group.scss index 54951703..cc25838b 100644 --- a/src/assets/sass/black-dashboard/bootstrap/_button-group.scss +++ b/src/assets/sass/black-dashboard/bootstrap/_button-group.scss @@ -64,17 +64,20 @@ // // Remix the default button sizing classes into new ones for easier manipulation. -.btn-group-sm > .btn { @extend .btn-sm; } -.btn-group-lg > .btn { @extend .btn-lg; } - +.btn-group-sm > .btn { + @extend .btn-sm; +} +.btn-group-lg > .btn { + @extend .btn-lg; +} // // Split button dropdowns // .dropdown-toggle-split { - padding-right: $btn-padding-x * .75; - padding-left: $btn-padding-x * .75; + padding-right: $btn-padding-x * 0.75; + padding-left: $btn-padding-x * 0.75; &::after, .dropup &::after, @@ -88,16 +91,15 @@ } .btn-sm + .dropdown-toggle-split { - padding-right: $btn-padding-x-sm * .75; - padding-left: $btn-padding-x-sm * .75; + padding-right: $btn-padding-x-sm * 0.75; + padding-left: $btn-padding-x-sm * 0.75; } .btn-lg + .dropdown-toggle-split { - padding-right: $btn-padding-x-lg * .75; - padding-left: $btn-padding-x-lg * .75; + padding-right: $btn-padding-x-lg * 0.75; + padding-left: $btn-padding-x-lg * 0.75; } - // The clickable button for toggling the menu // Set the same inset shadow as the :active state .btn-group.show .dropdown-toggle { @@ -109,7 +111,6 @@ } } - // // Vertical button groups // @@ -144,7 +145,6 @@ } } - // Checkbox and radio options // // In order to support the browser's form validation feedback, powered by the diff --git a/src/assets/sass/black-dashboard/bootstrap/_buttons.scss b/src/assets/sass/black-dashboard/bootstrap/_buttons.scss index 0a8eaa9b..d7032145 100644 --- a/src/assets/sass/black-dashboard/bootstrap/_buttons.scss +++ b/src/assets/sass/black-dashboard/bootstrap/_buttons.scss @@ -12,7 +12,13 @@ vertical-align: middle; user-select: none; border: $btn-border-width solid transparent; - @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-line-height, $btn-border-radius); + @include button-size( + $btn-padding-y, + $btn-padding-x, + $font-size-base, + $btn-line-height, + $btn-border-radius + ); @include transition($btn-transition); // Share hover and focus styles @@ -54,7 +60,6 @@ fieldset:disabled a.btn { pointer-events: none; } - // // Alternate buttons // @@ -71,7 +76,6 @@ fieldset:disabled a.btn { } } - // // Link buttons // @@ -105,20 +109,30 @@ fieldset:disabled a.btn { // No need for an active state here } - // // Button Sizes // .btn-lg { - @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $btn-line-height-lg, $btn-border-radius-lg); + @include button-size( + $btn-padding-y-lg, + $btn-padding-x-lg, + $font-size-lg, + $btn-line-height-lg, + $btn-border-radius-lg + ); } .btn-sm { - @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-line-height-sm, $btn-border-radius-sm); + @include button-size( + $btn-padding-y-sm, + $btn-padding-x-sm, + $font-size-sm, + $btn-line-height-sm, + $btn-border-radius-sm + ); } - // // Block button // diff --git a/src/assets/sass/black-dashboard/bootstrap/_card.scss b/src/assets/sass/black-dashboard/bootstrap/_card.scss index 28d7e624..13114a3c 100644 --- a/src/assets/sass/black-dashboard/bootstrap/_card.scss +++ b/src/assets/sass/black-dashboard/bootstrap/_card.scss @@ -72,7 +72,9 @@ border-bottom: $card-border-width solid $card-border-color; &:first-child { - @include border-radius($card-inner-border-radius $card-inner-border-radius 0 0); + @include border-radius( + $card-inner-border-radius $card-inner-border-radius 0 0 + ); } + .list-group { @@ -88,11 +90,12 @@ border-top: $card-border-width solid $card-border-color; &:last-child { - @include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius); + @include border-radius( + 0 0 $card-inner-border-radius $card-inner-border-radius + ); } } - // // Header navs // @@ -135,7 +138,6 @@ @include border-bottom-radius($card-inner-border-radius); } - // Card deck .card-deck { @@ -163,7 +165,6 @@ } } - // // Card groups // @@ -248,7 +249,6 @@ } } - // // Columns // @@ -271,7 +271,6 @@ } } - // // Accordion // diff --git a/src/assets/sass/black-dashboard/bootstrap/_carousel.scss b/src/assets/sass/black-dashboard/bootstrap/_carousel.scss index 91c23e5f..a96488b2 100644 --- a/src/assets/sass/black-dashboard/bootstrap/_carousel.scss +++ b/src/assets/sass/black-dashboard/bootstrap/_carousel.scss @@ -67,7 +67,6 @@ } } - // // Alternate transitions // @@ -75,7 +74,7 @@ .carousel-fade { .carousel-item { opacity: 0; - transition-duration: .6s; + transition-duration: 0.6s; transition-property: opacity; } @@ -103,7 +102,6 @@ } } - // // Left/right controls for nav // @@ -129,19 +127,23 @@ color: $carousel-control-color; text-decoration: none; outline: 0; - opacity: .9; + opacity: 0.9; } } .carousel-control-prev { left: 0; @if $enable-gradients { - background: linear-gradient(90deg, rgba($black, .25), rgba($black, .001)); + background: linear-gradient(90deg, rgba($black, 0.25), rgba($black, 0.001)); } } .carousel-control-next { right: 0; @if $enable-gradients { - background: linear-gradient(270deg, rgba($black, .25), rgba($black, .001)); + background: linear-gradient( + 270deg, + rgba($black, 0.25), + rgba($black, 0.001) + ); } } @@ -161,7 +163,6 @@ background-image: $carousel-control-next-icon-bg; } - // Optional indicator pips // // Add an ordered list with the following class and add a list item for each @@ -190,7 +191,7 @@ margin-left: $carousel-indicator-spacer; text-indent: -999px; cursor: pointer; - background-color: rgba($carousel-indicator-active-bg, .5); + background-color: rgba($carousel-indicator-active-bg, 0.5); // Use pseudo classes to increase the hit area by 10px on top and bottom. &::before { @@ -218,7 +219,6 @@ } } - // Optional captions // // diff --git a/src/assets/sass/black-dashboard/bootstrap/_close.scss b/src/assets/sass/black-dashboard/bootstrap/_close.scss index a0dd1e2a..07a5b8e6 100644 --- a/src/assets/sass/black-dashboard/bootstrap/_close.scss +++ b/src/assets/sass/black-dashboard/bootstrap/_close.scss @@ -5,14 +5,13 @@ line-height: 1; color: $close-color; text-shadow: $close-text-shadow; - opacity: .5; + opacity: 0.5; &:not(:disabled):not(.disabled) { - @include hover-focus { color: $close-color; text-decoration: none; - opacity: .75; + opacity: 0.75; } // Opinionated: add "hand" cursor to non-disabled .close elements diff --git a/src/assets/sass/black-dashboard/bootstrap/_custom-forms.scss b/src/assets/sass/black-dashboard/bootstrap/_custom-forms.scss index 8348e261..8077e2ee 100644 --- a/src/assets/sass/black-dashboard/bootstrap/_custom-forms.scss +++ b/src/assets/sass/black-dashboard/bootstrap/_custom-forms.scss @@ -2,7 +2,6 @@ // Released under MIT and copyright 2014 Waybury. // https://useiconic.com/open - // Checkboxes and radios // // Base class takes care of all the key behavioral aspects. @@ -63,7 +62,9 @@ // Background-color and (when enabled) gradient &::before { position: absolute; - top: (($font-size-base * $line-height-base - $custom-control-indicator-size) / 2); + top: ( + ($font-size-base * $line-height-base - $custom-control-indicator-size) / 2 + ); left: -$custom-control-gutter; display: block; width: $custom-control-indicator-size; @@ -78,7 +79,9 @@ // Foreground (icon) &::after { position: absolute; - top: (($font-size-base * $line-height-base - $custom-control-indicator-size) / 2); + top: ( + ($font-size-base * $line-height-base - $custom-control-indicator-size) / 2 + ); left: -$custom-control-gutter; display: block; width: $custom-control-indicator-size; @@ -90,7 +93,6 @@ } } - // Checkboxes // // Tweak just a few things for checkboxes. @@ -154,7 +156,6 @@ } } - // Select // // Replaces the browser default select with a custom one, mostly pulled from @@ -165,11 +166,14 @@ display: inline-block; width: 100%; height: $custom-select-height; - padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x; + padding: $custom-select-padding-y + ($custom-select-padding-x + $custom-select-indicator-padding) + $custom-select-padding-y $custom-select-padding-x; line-height: $custom-select-line-height; color: $custom-select-color; vertical-align: middle; - background: $custom-select-bg $custom-select-indicator no-repeat right $custom-select-padding-x center; + background: $custom-select-bg $custom-select-indicator no-repeat right + $custom-select-padding-x center; background-size: $custom-select-bg-size; border: $custom-select-border-width solid $custom-select-border-color; @if $enable-rounded { @@ -232,7 +236,6 @@ font-size: $custom-select-font-size-lg; } - // File // // Custom file input. @@ -302,7 +305,9 @@ content: "Browse"; @include gradient-bg($custom-file-button-bg); border-left: $custom-file-border-width solid $custom-file-border-color; - @include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0); + @include border-radius( + 0 $custom-file-border-radius $custom-file-border-radius 0 + ); } } @@ -323,9 +328,15 @@ // Pseudo-elements must be split across multiple rulesets to have an affect. // No box-shadow() mixin for focus accessibility. - &::-webkit-slider-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; } - &::-moz-range-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; } - &::-ms-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; } + &::-webkit-slider-thumb { + box-shadow: $custom-range-thumb-focus-box-shadow; + } + &::-moz-range-thumb { + box-shadow: $custom-range-thumb-focus-box-shadow; + } + &::-ms-thumb { + box-shadow: $custom-range-thumb-focus-box-shadow; + } } &::-moz-focus-outer { @@ -335,7 +346,9 @@ &::-webkit-slider-thumb { width: $custom-range-thumb-width; height: $custom-range-thumb-height; - margin-top: (($custom-range-track-height - $custom-range-thumb-height) / 2); // Webkit specific + margin-top: ( + ($custom-range-track-height - $custom-range-thumb-height) / 2 + ); // Webkit specific @include gradient-bg($custom-range-thumb-bg); border: $custom-range-thumb-border; @include border-radius($custom-range-thumb-border-radius); @@ -390,7 +403,7 @@ height: $custom-range-thumb-height; margin-top: 0; // Edge specific margin-right: $custom-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden. - margin-left: $custom-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden. + margin-left: $custom-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden. @include gradient-bg($custom-range-thumb-bg); border: $custom-range-thumb-border; @include border-radius($custom-range-thumb-border-radius); @@ -410,7 +423,7 @@ cursor: $custom-range-track-cursor; background-color: transparent; border-color: transparent; - border-width: ($custom-range-thumb-height * .5); + border-width: ($custom-range-thumb-height * 0.5); @include box-shadow($custom-range-track-box-shadow); } diff --git a/src/assets/sass/black-dashboard/bootstrap/_forms.scss b/src/assets/sass/black-dashboard/bootstrap/_forms.scss index e3c98066..f42eccdb 100644 --- a/src/assets/sass/black-dashboard/bootstrap/_forms.scss +++ b/src/assets/sass/black-dashboard/bootstrap/_forms.scss @@ -76,7 +76,6 @@ select.form-control { width: 100%; } - // // Labels // @@ -105,7 +104,6 @@ select.form-control { line-height: $input-line-height-sm; } - // Readonly controls as plain text // // Apply class to a readonly input to make it appear like regular plain @@ -130,7 +128,6 @@ select.form-control { } } - // Form control sizing // // Build on `.form-control` with modifier classes to decrease or increase the @@ -181,7 +178,6 @@ textarea.form-control { margin-top: $form-text-margin-top; } - // Form grid // // Special replacement for our grid system's `.row` for tighter form layouts. @@ -199,7 +195,6 @@ textarea.form-control { } } - // Checkboxes and radios // // Indent the labels to position radios/checkboxes as hanging controls. @@ -239,7 +234,6 @@ textarea.form-control { } } - // Form validation // // Provide feedback to users when form field values are valid or invalid. Works diff --git a/src/assets/sass/black-dashboard/bootstrap/_functions.scss b/src/assets/sass/black-dashboard/bootstrap/_functions.scss index bf8be9ae..9ee5efc9 100644 --- a/src/assets/sass/black-dashboard/bootstrap/_functions.scss +++ b/src/assets/sass/black-dashboard/bootstrap/_functions.scss @@ -42,7 +42,12 @@ $index: str-index($string, $search); @if $index { - @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace); + @return str-slice($string, 1, $index - 1) + $replace + + str-replace( + str-slice($string, $index + str-length($search)), + $search, + $replace + ); } @return $string; diff --git a/src/assets/sass/black-dashboard/bootstrap/_images.scss b/src/assets/sass/black-dashboard/bootstrap/_images.scss index 2bce02f6..7b2a2d36 100644 --- a/src/assets/sass/black-dashboard/bootstrap/_images.scss +++ b/src/assets/sass/black-dashboard/bootstrap/_images.scss @@ -9,7 +9,6 @@ @include img-fluid; } - // Image thumbnails .img-thumbnail { padding: $thumbnail-padding; diff --git a/src/assets/sass/black-dashboard/bootstrap/_input-group.scss b/src/assets/sass/black-dashboard/bootstrap/_input-group.scss index 2ed5f330..1b91734a 100644 --- a/src/assets/sass/black-dashboard/bootstrap/_input-group.scss +++ b/src/assets/sass/black-dashboard/bootstrap/_input-group.scss @@ -42,8 +42,12 @@ > .form-control, > .custom-select { - &:not(:last-child) { @include border-right-radius(0); } - &:not(:first-child) { @include border-left-radius(0); } + &:not(:last-child) { + @include border-right-radius(0); + } + &:not(:first-child) { + @include border-left-radius(0); + } } // Custom file inputs have more complex markup, thus requiring different @@ -53,12 +57,15 @@ align-items: center; &:not(:last-child) .custom-file-label, - &:not(:last-child) .custom-file-label::after { @include border-right-radius(0); } - &:not(:first-child) .custom-file-label { @include border-left-radius(0); } + &:not(:last-child) .custom-file-label::after { + @include border-right-radius(0); + } + &:not(:first-child) .custom-file-label { + @include border-left-radius(0); + } } } - // Prepend and append // // While it requires one extra layer of HTML for each, dedicated prepend and @@ -85,9 +92,12 @@ } } -.input-group-prepend { margin-right: -$input-border-width; } -.input-group-append { margin-left: -$input-border-width; } - +.input-group-prepend { + margin-right: -$input-border-width; +} +.input-group-append { + margin-left: -$input-border-width; +} // Textual addons // @@ -116,7 +126,6 @@ } } - // Sizing // // Remix the default form control sizing classes into new ones for easier @@ -146,20 +155,22 @@ @include border-radius($input-border-radius-sm); } - // Prepend and append rounded corners // // These rulesets must come after the sizing ones to properly override sm and lg // border-radius values when extending. They're more specific than we'd like // with the `.input-group >` part, but without it, we cannot override the sizing. - .input-group > .input-group-prepend > .btn, .input-group > .input-group-prepend > .input-group-text, .input-group > .input-group-append:not(:last-child) > .btn, .input-group > .input-group-append:not(:last-child) > .input-group-text, -.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle), -.input-group > .input-group-append:last-child > .input-group-text:not(:last-child) { +.input-group + > .input-group-append:last-child + > .btn:not(:last-child):not(.dropdown-toggle), +.input-group + > .input-group-append:last-child + > .input-group-text:not(:last-child) { @include border-right-radius(0); } @@ -168,6 +179,8 @@ .input-group > .input-group-prepend:not(:first-child) > .btn, .input-group > .input-group-prepend:not(:first-child) > .input-group-text, .input-group > .input-group-prepend:first-child > .btn:not(:first-child), -.input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) { +.input-group + > .input-group-prepend:first-child + > .input-group-text:not(:first-child) { @include border-left-radius(0); } diff --git a/src/assets/sass/black-dashboard/bootstrap/_list-group.scss b/src/assets/sass/black-dashboard/bootstrap/_list-group.scss index 9f145c1d..ff06e8df 100644 --- a/src/assets/sass/black-dashboard/bootstrap/_list-group.scss +++ b/src/assets/sass/black-dashboard/bootstrap/_list-group.scss @@ -11,7 +11,6 @@ margin-bottom: 0; } - // Interactive list items // // Use anchor or button elements instead of `li`s or `div`s to create interactive @@ -35,7 +34,6 @@ } } - // Individual list items // // Use on `li`s or `div`s within the `.list-group` parent. @@ -78,7 +76,6 @@ } } - // Flush list items // // Remove borders and border-radius to keep list group items edge-to-edge. Most @@ -104,12 +101,15 @@ } } - // Contextual variants // // Add modifier classes to change text and background color on individual items. // Organizationally, this must come after the `:hover` states. @each $color, $value in $theme-colors { - @include list-group-item-variant($color, theme-color-level($color, -9), theme-color-level($color, 6)); + @include list-group-item-variant( + $color, + theme-color-level($color, -9), + theme-color-level($color, 6) + ); } diff --git a/src/assets/sass/black-dashboard/bootstrap/_modal.scss b/src/assets/sass/black-dashboard/bootstrap/_modal.scss index f20bb9d8..94e082f7 100644 --- a/src/assets/sass/black-dashboard/bootstrap/_modal.scss +++ b/src/assets/sass/black-dashboard/bootstrap/_modal.scss @@ -3,7 +3,6 @@ // .modal-dialog - positioning shell for the actual modal // .modal-content - actual modal w/ bg and corners and stuff - .modal-open { // Kill the scroll on the body overflow: hidden; @@ -91,8 +90,12 @@ background-color: $modal-backdrop-bg; // Fade for backdrop - &.fade { opacity: 0; } - &.show { opacity: $modal-backdrop-opacity; } + &.fade { + opacity: 0; + } + &.show { + opacity: $modal-backdrop-opacity; + } } // Modal header @@ -108,7 +111,8 @@ .close { padding: $modal-header-padding; // auto on the left force icon to the right even when there is no .modal-title - margin: (-$modal-header-padding) (-$modal-header-padding) (-$modal-header-padding) auto; + margin: (-$modal-header-padding) (-$modal-header-padding) + (-$modal-header-padding) auto; } } @@ -137,8 +141,12 @@ border-top: $modal-footer-border-width solid $modal-footer-border-color; // Easily place margin between footer elements - > :not(:first-child) { margin-left: .25rem; } - > :not(:last-child) { margin-right: .25rem; } + > :not(:first-child) { + margin-left: 0.25rem; + } + > :not(:last-child) { + margin-right: 0.25rem; + } } // Measure scrollbar width for padding body during modal show/hide @@ -164,17 +172,19 @@ &::before { height: calc(100vh - (#{$modal-dialog-margin-y-sm-up} * 2)); } - } .modal-content { @include box-shadow($modal-content-box-shadow-sm-up); } - .modal-sm { max-width: $modal-sm; } - + .modal-sm { + max-width: $modal-sm; + } } @include media-breakpoint-up(lg) { - .modal-lg { max-width: $modal-lg; } + .modal-lg { + max-width: $modal-lg; + } } diff --git a/src/assets/sass/black-dashboard/bootstrap/_nav.scss b/src/assets/sass/black-dashboard/bootstrap/_nav.scss index fc82161e..e647b388 100644 --- a/src/assets/sass/black-dashboard/bootstrap/_nav.scss +++ b/src/assets/sass/black-dashboard/bootstrap/_nav.scss @@ -66,7 +66,6 @@ } } - // // Pills // @@ -83,7 +82,6 @@ } } - // // Justified variants // @@ -103,7 +101,6 @@ } } - // Tabbable tabs // // Hide tabbable panes to start, show them when `.active` diff --git a/src/assets/sass/black-dashboard/bootstrap/_navbar.scss b/src/assets/sass/black-dashboard/bootstrap/_navbar.scss index 52de5050..d62a14d0 100644 --- a/src/assets/sass/black-dashboard/bootstrap/_navbar.scss +++ b/src/assets/sass/black-dashboard/bootstrap/_navbar.scss @@ -9,7 +9,6 @@ // Navbar position // Navbar themes - // Navbar // // Provide a static navbar from which we expand to create full-width, fixed, and @@ -34,7 +33,6 @@ } } - // Navbar brand // // Used for brand, project, or site names. @@ -53,7 +51,6 @@ } } - // Navbar nav // // Custom navbar navigation (doesn't require `.nav`, but does make use of `.nav-link`). @@ -76,7 +73,6 @@ } } - // Navbar text // // @@ -87,7 +83,6 @@ padding-bottom: $nav-link-padding-y; } - // Responsive navbar // // Custom styles for responsive collapsing and toggling of navbar contents. @@ -175,7 +170,7 @@ } .navbar-collapse { - display: flex !important; // stylelint-disable-line declaration-no-important + display: flex !important; // stylelint-disable-line declaration-no-important // Changes flex-bases to auto because of an IE10 bug flex-basis: auto; @@ -189,7 +184,6 @@ } } - // Navbar themes // // Styles for switching between navbars with light or dark background. diff --git a/src/assets/sass/black-dashboard/bootstrap/_pagination.scss b/src/assets/sass/black-dashboard/bootstrap/_pagination.scss index 9349f3f9..cb2e497f 100644 --- a/src/assets/sass/black-dashboard/bootstrap/_pagination.scss +++ b/src/assets/sass/black-dashboard/bootstrap/_pagination.scss @@ -64,15 +64,26 @@ } } - // // Sizing // .pagination-lg { - @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $line-height-lg, $border-radius-lg); + @include pagination-size( + $pagination-padding-y-lg, + $pagination-padding-x-lg, + $font-size-lg, + $line-height-lg, + $border-radius-lg + ); } .pagination-sm { - @include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $line-height-sm, $border-radius-sm); + @include pagination-size( + $pagination-padding-y-sm, + $pagination-padding-x-sm, + $font-size-sm, + $line-height-sm, + $border-radius-sm + ); } diff --git a/src/assets/sass/black-dashboard/bootstrap/_popover.scss b/src/assets/sass/black-dashboard/bootstrap/_popover.scss index 3ef5f628..25339ad4 100644 --- a/src/assets/sass/black-dashboard/bootstrap/_popover.scss +++ b/src/assets/sass/black-dashboard/bootstrap/_popover.scss @@ -70,7 +70,8 @@ .arrow::before, .arrow::after { - border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0; + border-width: ($popover-arrow-width / 2) $popover-arrow-height + ($popover-arrow-width / 2) 0; } .arrow::before { @@ -93,7 +94,8 @@ .arrow::before, .arrow::after { - border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2); + border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height + ($popover-arrow-width / 2); } .arrow::before { @@ -131,7 +133,8 @@ .arrow::before, .arrow::after { - border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height; + border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) + $popover-arrow-height; } .arrow::before { @@ -160,7 +163,6 @@ } } - // Offset the popover to account for the popover arrow .popover-header { padding: $popover-header-padding-y $popover-header-padding-x; diff --git a/src/assets/sass/black-dashboard/bootstrap/_print.scss b/src/assets/sass/black-dashboard/bootstrap/_print.scss index 1df94873..61b60b98 100644 --- a/src/assets/sass/black-dashboard/bootstrap/_print.scss +++ b/src/assets/sass/black-dashboard/bootstrap/_print.scss @@ -51,7 +51,7 @@ } pre, blockquote { - border: $border-width solid $gray-500; // Bootstrap custom code; using `$border-width` instead of 1px + border: $border-width solid $gray-500; // Bootstrap custom code; using `$border-width` instead of 1px page-break-inside: avoid; } diff --git a/src/assets/sass/black-dashboard/bootstrap/_progress.scss b/src/assets/sass/black-dashboard/bootstrap/_progress.scss index 0ac3e0c9..a9bd593a 100644 --- a/src/assets/sass/black-dashboard/bootstrap/_progress.scss +++ b/src/assets/sass/black-dashboard/bootstrap/_progress.scss @@ -1,6 +1,10 @@ @keyframes progress-bar-stripes { - from { background-position: $progress-height 0; } - to { background-position: 0 0; } + from { + background-position: $progress-height 0; + } + to { + background-position: 0 0; + } } .progress { diff --git a/src/assets/sass/black-dashboard/bootstrap/_reboot.scss b/src/assets/sass/black-dashboard/bootstrap/_reboot.scss index f297d095..d118311a 100644 --- a/src/assets/sass/black-dashboard/bootstrap/_reboot.scss +++ b/src/assets/sass/black-dashboard/bootstrap/_reboot.scss @@ -7,7 +7,6 @@ // // Normalize is licensed MIT. https://github.com/necolas/normalize.css - // Document // // 1. Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`. @@ -42,7 +41,16 @@ html { // stylelint-disable selector-list-comma-newline-after // Shim for "new" HTML5 structural elements to display correctly (IE10, older browsers) -article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { +article, +aside, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, +section { display: block; } // stylelint-enable selector-list-comma-newline-after @@ -74,7 +82,6 @@ body { outline: 0 !important; } - // Content grouping // // 1. Add the correct box sizing in Firefox. @@ -86,7 +93,6 @@ hr { overflow: visible; // 2 } - // // Typography // @@ -96,7 +102,12 @@ hr { // By default, `

`-`

` all receive top and bottom margins. We nuke the top // margin for easier control within type scales as it avoids margin collapsing. // stylelint-disable selector-list-comma-newline-after -h1, h2, h3, h4, h5, h6 { +h1, +h2, +h3, +h4, +h5, +h6 { margin-top: 0; margin-bottom: $headings-margin-bottom; } @@ -119,7 +130,8 @@ p { // 4. Duplicate behavior to the data-* attribute for our tooltip plugin abbr[title], -abbr[data-original-title] { // 4 +abbr[data-original-title] { + // 4 text-decoration: underline; // 2 text-decoration: underline dotted; // 2 cursor: help; // 3 @@ -151,7 +163,7 @@ dt { } dd { - margin-bottom: .5rem; + margin-bottom: 0.5rem; margin-left: 0; // Undo browser default } @@ -187,9 +199,12 @@ sup { vertical-align: baseline; } -sub { bottom: -.25em; } -sup { top: -.5em; } - +sub { + bottom: -0.25em; +} +sup { + top: -0.5em; +} // // Links @@ -227,7 +242,6 @@ a:not([href]):not([tabindex]) { } } - // // Code // @@ -252,7 +266,6 @@ pre { -ms-overflow-style: scrollbar; } - // // Figures // @@ -262,7 +275,6 @@ figure { margin: 0 0 1rem; } - // // Images and content // @@ -279,7 +291,6 @@ svg { vertical-align: middle; } - // // Tables // @@ -302,7 +313,6 @@ th { text-align: inherit; } - // // Forms // @@ -375,7 +385,6 @@ input[type="checkbox"] { padding: 0; // 2. Remove the padding in IE 10- } - input[type="date"], input[type="time"], input[type="datetime-local"], @@ -414,7 +423,7 @@ legend { width: 100%; max-width: 100%; // 1 padding: 0; - margin-bottom: .5rem; + margin-bottom: 0.5rem; font-size: 1.5rem; line-height: inherit; color: inherit; // 2 diff --git a/src/assets/sass/black-dashboard/bootstrap/_tables.scss b/src/assets/sass/black-dashboard/bootstrap/_tables.scss index 5fa6a866..1aacbf82 100644 --- a/src/assets/sass/black-dashboard/bootstrap/_tables.scss +++ b/src/assets/sass/black-dashboard/bootstrap/_tables.scss @@ -28,7 +28,6 @@ } } - // // Condensed table w/ half padding // @@ -40,7 +39,6 @@ } } - // Border versions // // Add or remove borders all around the table and between all the columns. @@ -80,7 +78,6 @@ } } - // Hover effect // // Placed here since it has to come after the potential zebra striping @@ -93,7 +90,6 @@ } } - // Table backgrounds // // Exact selectors below required to override `.table-striped` and prevent @@ -105,7 +101,6 @@ @include table-row-variant(active, $table-active-bg); - // Dark styles // // Same table markup, but inverted color scheme: dark background and light text. @@ -158,7 +153,6 @@ } } - // Responsive tables // // Generate series of `.table-responsive-*` classes for configuring the screen diff --git a/src/assets/sass/black-dashboard/bootstrap/_tooltip.scss b/src/assets/sass/black-dashboard/bootstrap/_tooltip.scss index 1286ebfc..59b7c2be 100644 --- a/src/assets/sass/black-dashboard/bootstrap/_tooltip.scss +++ b/src/assets/sass/black-dashboard/bootstrap/_tooltip.scss @@ -12,7 +12,9 @@ word-wrap: break-word; opacity: 0; - &.show { opacity: $tooltip-opacity; } + &.show { + opacity: $tooltip-opacity; + } .arrow { position: absolute; @@ -53,7 +55,8 @@ &::before { right: 0; - border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height ($tooltip-arrow-width / 2) 0; + border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height + ($tooltip-arrow-width / 2) 0; border-right-color: $tooltip-arrow-color; } } @@ -83,7 +86,8 @@ &::before { left: 0; - border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height; + border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) + $tooltip-arrow-height; border-left-color: $tooltip-arrow-color; } } diff --git a/src/assets/sass/black-dashboard/bootstrap/_type.scss b/src/assets/sass/black-dashboard/bootstrap/_type.scss index 57d610f0..bc2efe9e 100644 --- a/src/assets/sass/black-dashboard/bootstrap/_type.scss +++ b/src/assets/sass/black-dashboard/bootstrap/_type.scss @@ -4,8 +4,18 @@ // Headings // -h1, h2, h3, h4, h5, h6, -.h1, .h2, .h3, .h4, .h5, .h6 { +h1, +h2, +h3, +h4, +h5, +h6, +.h1, +.h2, +.h3, +.h4, +.h5, +.h6 { margin-bottom: $headings-margin-bottom; font-family: $headings-font-family; font-weight: $headings-font-weight; @@ -13,12 +23,30 @@ h1, h2, h3, h4, h5, h6, color: $headings-color; } -h1, .h1 { font-size: $h1-font-size; } -h2, .h2 { font-size: $h2-font-size; } -h3, .h3 { font-size: $h3-font-size; } -h4, .h4 { font-size: $h4-font-size; } -h5, .h5 { font-size: $h5-font-size; } -h6, .h6 { font-size: $h6-font-size; } +h1, +.h1 { + font-size: $h1-font-size; +} +h2, +.h2 { + font-size: $h2-font-size; +} +h3, +.h3 { + font-size: $h3-font-size; +} +h4, +.h4 { + font-size: $h4-font-size; +} +h5, +.h5 { + font-size: $h5-font-size; +} +h6, +.h6 { + font-size: $h6-font-size; +} .lead { font-size: $lead-font-size; @@ -47,7 +75,6 @@ h6, .h6 { font-size: $h6-font-size; } line-height: $display-line-height; } - // // Horizontal rules // @@ -59,7 +86,6 @@ hr { border-top: $hr-border-width solid $hr-border-color; } - // // Emphasis // @@ -76,7 +102,6 @@ mark, background-color: $mark-bg; } - // // Lists // @@ -97,7 +122,6 @@ mark, } } - // // Misc // diff --git a/src/assets/sass/black-dashboard/bootstrap/_variables.scss b/src/assets/sass/black-dashboard/bootstrap/_variables.scss index 5cf118f0..d3cf7c4c 100644 --- a/src/assets/sass/black-dashboard/bootstrap/_variables.scss +++ b/src/assets/sass/black-dashboard/bootstrap/_variables.scss @@ -3,12 +3,11 @@ // Variables should follow the `$component-state-property-size` formula for // consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs. - // // Color system // -$white: #fff !default; +$white: #fff !default; $gray-100: #f8f9fa !default; $gray-200: #e9ecef !default; $gray-300: #dee2e6 !default; @@ -18,7 +17,7 @@ $gray-600: #6c757d !default; $gray-700: #495057 !default; $gray-800: #343a40 !default; $gray-900: #212529 !default; -$black: #000 !default; +$black: #000 !default; $grays: () !default; // stylelint-disable-next-line scss/dollar-variable-default @@ -32,92 +31,90 @@ $grays: map-merge( "600": $gray-600, "700": $gray-700, "800": $gray-800, - "900": $gray-900 + "900": $gray-900, ), $grays ); - -$blue: #007bff !default; -$indigo: #6610f2 !default; -$purple: #6f42c1 !default; -$pink: #e83e8c !default; -$red: #dc3545 !default; -$orange: #fd7e14 !default; -$yellow: #ffc107 !default; -$green: #28a745 !default; -$teal: #20c997 !default; -$cyan: #17a2b8 !default; +$blue: #007bff !default; +$indigo: #6610f2 !default; +$purple: #6f42c1 !default; +$pink: #e83e8c !default; +$red: #dc3545 !default; +$orange: #fd7e14 !default; +$yellow: #ffc107 !default; +$green: #28a745 !default; +$teal: #20c997 !default; +$cyan: #17a2b8 !default; $colors: () !default; // stylelint-disable-next-line scss/dollar-variable-default $colors: map-merge( ( - "blue": $blue, - "indigo": $indigo, - "purple": $purple, - "pink": $pink, - "red": $red, - "orange": $orange, - "yellow": $yellow, - "green": $green, - "teal": $teal, - "cyan": $cyan, - "white": $white, - "gray": $gray-600, - "gray-dark": $gray-800 + "blue": $blue, + "indigo": $indigo, + "purple": $purple, + "pink": $pink, + "red": $red, + "orange": $orange, + "yellow": $yellow, + "green": $green, + "teal": $teal, + "cyan": $cyan, + "white": $white, + "gray": $gray-600, + "gray-dark": $gray-800, ), $colors ); -$primary: $blue !default; -$secondary: $gray-600 !default; -$success: $green !default; -$info: $cyan !default; -$warning: $yellow !default; -$danger: $red !default; -$light: $gray-100 !default; -$dark: $gray-800 !default; +$primary: $blue !default; +$secondary: $gray-600 !default; +$success: $green !default; +$info: $cyan !default; +$warning: $yellow !default; +$danger: $red !default; +$light: $gray-100 !default; +$dark: $gray-800 !default; $theme-colors: () !default; // stylelint-disable-next-line scss/dollar-variable-default $theme-colors: map-merge( ( - "primary": $primary, - "secondary": $secondary, - "success": $success, - "info": $info, - "warning": $warning, - "danger": $danger, - "light": $light, - "dark": $dark + "primary": $primary, + "secondary": $secondary, + "success": $success, + "info": $info, + "warning": $warning, + "danger": $danger, + "light": $light, + "dark": $dark, ), $theme-colors ); // Set a specific jump point for requesting color jumps -$theme-color-interval: 8% !default; +$theme-color-interval: 8% !default; // The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255. -$yiq-contrasted-threshold: 150 !default; +$yiq-contrasted-threshold: 150 !default; // Customize the light and dark text colors for use in our YIQ color contrast function. -$yiq-text-dark: $gray-900 !default; -$yiq-text-light: $white !default; +$yiq-text-dark: $gray-900 !default; +$yiq-text-light: $white !default; // Options // // Quickly modify global styling by enabling or disabling optional features. -$enable-caret: true !default; -$enable-rounded: true !default; -$enable-shadows: false !default; -$enable-gradients: false !default; -$enable-transitions: true !default; -$enable-hover-media-query: false !default; // Deprecated, no longer affects any compiled CSS -$enable-grid-classes: true !default; -$enable-print-styles: true !default; - +$enable-caret: true !default; +$enable-rounded: true !default; +$enable-shadows: false !default; +$enable-gradients: false !default; +$enable-transitions: true !default; +$enable-hover-media-query: false !default; // Deprecated, no longer affects any compiled CSS +$enable-grid-classes: true !default; +$enable-print-styles: true !default; // Spacing // @@ -131,11 +128,19 @@ $spacers: () !default; $spacers: map-merge( ( 0: 0, - 1: ($spacer * .25), - 2: ($spacer * .5), + 1: ( + $spacer * 0.25, + ), + 2: ( + $spacer * 0.5, + ), 3: $spacer, - 4: ($spacer * 1.5), - 5: ($spacer * 3) + 4: ( + $spacer * 1.5, + ), + 5: ( + $spacer * 3, + ), ), $spacers ); @@ -149,7 +154,7 @@ $sizes: map-merge( 50: 50%, 75: 75%, 100: 100%, - auto: auto + auto: auto, ), $sizes ); @@ -158,24 +163,23 @@ $sizes: map-merge( // // Settings for the `` element. -$body-bg: $white !default; -$body-color: $gray-900 !default; +$body-bg: $white !default; +$body-color: $gray-900 !default; // Links // // Style anchor elements. -$link-color: theme-color("primary") !default; -$link-decoration: none !default; -$link-hover-color: darken($link-color, 15%) !default; -$link-hover-decoration: underline !default; +$link-color: theme-color("primary") !default; +$link-decoration: none !default; +$link-hover-color: darken($link-color, 15%) !default; +$link-hover-decoration: underline !default; // Paragraphs // // Style p element. -$paragraph-margin-bottom: 1rem !default; - +$paragraph-margin-bottom: 1rem !default; // Grid breakpoints // @@ -187,13 +191,12 @@ $grid-breakpoints: ( sm: 576px, md: 768px, lg: 992px, - xl: 1200px + xl: 1200px, ) !default; @include _assert-ascending($grid-breakpoints, "$grid-breakpoints"); @include _assert-starts-at-zero($grid-breakpoints); - // Grid containers // // Define the maximum width of `.container` for different screen sizes. @@ -202,751 +205,786 @@ $container-max-widths: ( sm: 540px, md: 720px, lg: 960px, - xl: 1140px + xl: 1140px, ) !default; @include _assert-ascending($container-max-widths, "$container-max-widths"); - // Grid columns // // Set the number of columns and specify the width of the gutters. -$grid-columns: 12 !default; -$grid-gutter-width: 30px !default; +$grid-columns: 12 !default; +$grid-gutter-width: 30px !default; // Components // // Define common padding and border radius sizes and more. -$line-height-lg: 1.5 !default; -$line-height-sm: 1.5 !default; - -$border-width: 1px !default; -$border-color: $gray-300 !default; +$line-height-lg: 1.5 !default; +$line-height-sm: 1.5 !default; -$border-radius: .25rem !default; -$border-radius-lg: .3rem !default; -$border-radius-sm: .2rem !default; +$border-width: 1px !default; +$border-color: $gray-300 !default; -$box-shadow-sm: 0 .125rem .25rem rgba($black, .075) !default; -$box-shadow: 0 .5rem 1rem rgba($black, .15) !default; -$box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default; +$border-radius: 0.25rem !default; +$border-radius-lg: 0.3rem !default; +$border-radius-sm: 0.2rem !default; -$component-active-color: $white !default; -$component-active-bg: theme-color("primary") !default; +$box-shadow-sm: 0 0.125rem 0.25rem rgba($black, 0.075) !default; +$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default; +$box-shadow-lg: 0 1rem 3rem rgba($black, 0.175) !default; -$caret-width: .3em !default; +$component-active-color: $white !default; +$component-active-bg: theme-color("primary") !default; -$transition-base: all .2s ease-in-out !default; -$transition-fade: opacity .15s linear !default; -$transition-collapse: height .35s ease !default; +$caret-width: 0.3em !default; +$transition-base: all 0.2s ease-in-out !default; +$transition-fade: opacity 0.15s linear !default; +$transition-collapse: height 0.35s ease !default; // Fonts // // Font, line-height, and color for body text, headings, and more. // stylelint-disable value-keyword-case -$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default; -$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; -$font-family-base: $font-family-sans-serif !default; +$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", + "Segoe UI Symbol", "Noto Color Emoji" !default; +$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, + "Liberation Mono", "Courier New", monospace !default; +$font-family-base: $font-family-sans-serif !default; // stylelint-enable value-keyword-case -$font-size-base: 1rem !default; // Assumes the browser default, typically `16px` -$font-size-lg: ($font-size-base * 1.25) !default; -$font-size-sm: ($font-size-base * .875) !default; +$font-size-base: 1rem !default; // Assumes the browser default, typically `16px` +$font-size-lg: ($font-size-base * 1.25) !default; +$font-size-sm: ($font-size-base * 0.875) !default; -$font-weight-light: 300 !default; -$font-weight-normal: 400 !default; -$font-weight-bold: 700 !default; +$font-weight-light: 300 !default; +$font-weight-normal: 400 !default; +$font-weight-bold: 700 !default; -$font-weight-base: $font-weight-normal !default; -$line-height-base: 1.5 !default; +$font-weight-base: $font-weight-normal !default; +$line-height-base: 1.5 !default; -$h1-font-size: $font-size-base * 2.5 !default; -$h2-font-size: $font-size-base * 2 !default; -$h3-font-size: $font-size-base * 1.75 !default; -$h4-font-size: $font-size-base * 1.5 !default; -$h5-font-size: $font-size-base * 1.25 !default; -$h6-font-size: $font-size-base !default; +$h1-font-size: $font-size-base * 2.5 !default; +$h2-font-size: $font-size-base * 2 !default; +$h3-font-size: $font-size-base * 1.75 !default; +$h4-font-size: $font-size-base * 1.5 !default; +$h5-font-size: $font-size-base * 1.25 !default; +$h6-font-size: $font-size-base !default; -$headings-margin-bottom: ($spacer / 2) !default; -$headings-font-family: inherit !default; -$headings-font-weight: 500 !default; -$headings-line-height: 1.2 !default; -$headings-color: inherit !default; +$headings-margin-bottom: ($spacer / 2) !default; +$headings-font-family: inherit !default; +$headings-font-weight: 500 !default; +$headings-line-height: 1.2 !default; +$headings-color: inherit !default; -$display1-size: 6rem !default; -$display2-size: 5.5rem !default; -$display3-size: 4.5rem !default; -$display4-size: 3.5rem !default; +$display1-size: 6rem !default; +$display2-size: 5.5rem !default; +$display3-size: 4.5rem !default; +$display4-size: 3.5rem !default; -$display1-weight: 300 !default; -$display2-weight: 300 !default; -$display3-weight: 300 !default; -$display4-weight: 300 !default; -$display-line-height: $headings-line-height !default; +$display1-weight: 300 !default; +$display2-weight: 300 !default; +$display3-weight: 300 !default; +$display4-weight: 300 !default; +$display-line-height: $headings-line-height !default; -$lead-font-size: ($font-size-base * 1.25) !default; -$lead-font-weight: 300 !default; +$lead-font-size: ($font-size-base * 1.25) !default; +$lead-font-weight: 300 !default; -$small-font-size: 80% !default; +$small-font-size: 80% !default; -$text-muted: $gray-600 !default; +$text-muted: $gray-600 !default; -$blockquote-small-color: $gray-600 !default; -$blockquote-font-size: ($font-size-base * 1.25) !default; +$blockquote-small-color: $gray-600 !default; +$blockquote-font-size: ($font-size-base * 1.25) !default; -$hr-border-color: rgba($black, .1) !default; -$hr-border-width: $border-width !default; +$hr-border-color: rgba($black, 0.1) !default; +$hr-border-width: $border-width !default; -$mark-padding: .2em !default; +$mark-padding: 0.2em !default; -$dt-font-weight: $font-weight-bold !default; +$dt-font-weight: $font-weight-bold !default; -$kbd-box-shadow: inset 0 -.1rem 0 rgba($black, .25) !default; -$nested-kbd-font-weight: $font-weight-bold !default; +$kbd-box-shadow: inset 0 -0.1rem 0 rgba($black, 0.25) !default; +$nested-kbd-font-weight: $font-weight-bold !default; -$list-inline-padding: .5rem !default; +$list-inline-padding: 0.5rem !default; -$mark-bg: #fcf8e3 !default; - -$hr-margin-y: $spacer !default; +$mark-bg: #fcf8e3 !default; +$hr-margin-y: $spacer !default; // Tables // // Customizes the `.table` component with basic values, each used across all table variations. -$table-cell-padding: .75rem !default; -$table-cell-padding-sm: .3rem !default; +$table-cell-padding: 0.75rem !default; +$table-cell-padding-sm: 0.3rem !default; -$table-bg: transparent !default; -$table-accent-bg: rgba($black, .05) !default; -$table-hover-bg: rgba($black, .075) !default; -$table-active-bg: $table-hover-bg !default; +$table-bg: transparent !default; +$table-accent-bg: rgba($black, 0.05) !default; +$table-hover-bg: rgba($black, 0.075) !default; +$table-active-bg: $table-hover-bg !default; -$table-border-width: $border-width !default; -$table-border-color: $gray-300 !default; +$table-border-width: $border-width !default; +$table-border-color: $gray-300 !default; -$table-head-bg: $gray-200 !default; -$table-head-color: $gray-700 !default; +$table-head-bg: $gray-200 !default; +$table-head-color: $gray-700 !default; -$table-dark-bg: $gray-900 !default; -$table-dark-accent-bg: rgba($white, .05) !default; -$table-dark-hover-bg: rgba($white, .075) !default; -$table-dark-border-color: lighten($gray-900, 7.5%) !default; -$table-dark-color: $body-bg !default; +$table-dark-bg: $gray-900 !default; +$table-dark-accent-bg: rgba($white, 0.05) !default; +$table-dark-hover-bg: rgba($white, 0.075) !default; +$table-dark-border-color: lighten($gray-900, 7.5%) !default; +$table-dark-color: $body-bg !default; -$table-striped-order: odd !default; +$table-striped-order: odd !default; -$table-caption-color: $text-muted !default; +$table-caption-color: $text-muted !default; // Buttons + Forms // // Shared variables that are reassigned to `$input-` and `$btn-` specific variables. -$input-btn-padding-y: .375rem !default; -$input-btn-padding-x: .75rem !default; -$input-btn-line-height: $line-height-base !default; - -$input-btn-focus-width: .2rem !default; -$input-btn-focus-color: rgba($component-active-bg, .25) !default; -$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default; +$input-btn-padding-y: 0.375rem !default; +$input-btn-padding-x: 0.75rem !default; +$input-btn-line-height: $line-height-base !default; -$input-btn-padding-y-sm: .25rem !default; -$input-btn-padding-x-sm: .5rem !default; -$input-btn-line-height-sm: $line-height-sm !default; +$input-btn-focus-width: 0.2rem !default; +$input-btn-focus-color: rgba($component-active-bg, 0.25) !default; +$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default; -$input-btn-padding-y-lg: .5rem !default; -$input-btn-padding-x-lg: 1rem !default; -$input-btn-line-height-lg: $line-height-lg !default; +$input-btn-padding-y-sm: 0.25rem !default; +$input-btn-padding-x-sm: 0.5rem !default; +$input-btn-line-height-sm: $line-height-sm !default; -$input-btn-border-width: $border-width !default; +$input-btn-padding-y-lg: 0.5rem !default; +$input-btn-padding-x-lg: 1rem !default; +$input-btn-line-height-lg: $line-height-lg !default; +$input-btn-border-width: $border-width !default; // Buttons // // For each of Bootstrap's buttons, define text, background, and border color. -$btn-padding-y: $input-btn-padding-y !default; -$btn-padding-x: $input-btn-padding-x !default; -$btn-line-height: $input-btn-line-height !default; +$btn-padding-y: $input-btn-padding-y !default; +$btn-padding-x: $input-btn-padding-x !default; +$btn-line-height: $input-btn-line-height !default; -$btn-padding-y-sm: $input-btn-padding-y-sm !default; -$btn-padding-x-sm: $input-btn-padding-x-sm !default; -$btn-line-height-sm: $input-btn-line-height-sm !default; +$btn-padding-y-sm: $input-btn-padding-y-sm !default; +$btn-padding-x-sm: $input-btn-padding-x-sm !default; +$btn-line-height-sm: $input-btn-line-height-sm !default; -$btn-padding-y-lg: $input-btn-padding-y-lg !default; -$btn-padding-x-lg: $input-btn-padding-x-lg !default; -$btn-line-height-lg: $input-btn-line-height-lg !default; +$btn-padding-y-lg: $input-btn-padding-y-lg !default; +$btn-padding-x-lg: $input-btn-padding-x-lg !default; +$btn-line-height-lg: $input-btn-line-height-lg !default; -$btn-border-width: $input-btn-border-width !default; +$btn-border-width: $input-btn-border-width !default; -$btn-font-weight: $font-weight-normal !default; -$btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default; -$btn-focus-width: $input-btn-focus-width !default; -$btn-focus-box-shadow: $input-btn-focus-box-shadow !default; -$btn-disabled-opacity: .65 !default; -$btn-active-box-shadow: inset 0 3px 5px rgba($black, .125) !default; +$btn-font-weight: $font-weight-normal !default; +$btn-box-shadow: inset 0 1px 0 rgba($white, 0.15), 0 1px 1px rgba($black, 0.075) !default; +$btn-focus-width: $input-btn-focus-width !default; +$btn-focus-box-shadow: $input-btn-focus-box-shadow !default; +$btn-disabled-opacity: 0.65 !default; +$btn-active-box-shadow: inset 0 3px 5px rgba($black, 0.125) !default; -$btn-link-disabled-color: $gray-600 !default; +$btn-link-disabled-color: $gray-600 !default; -$btn-block-spacing-y: .5rem !default; +$btn-block-spacing-y: 0.5rem !default; // Allows for customizing button radius independently from global border radius -$btn-border-radius: $border-radius !default; -$btn-border-radius-lg: $border-radius-lg !default; -$btn-border-radius-sm: $border-radius-sm !default; - -$btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; +$btn-border-radius: $border-radius !default; +$btn-border-radius-lg: $border-radius-lg !default; +$btn-border-radius-sm: $border-radius-sm !default; +$btn-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, + border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !default; // Forms -$label-margin-bottom: .5rem !default; +$label-margin-bottom: 0.5rem !default; -$input-padding-y: $input-btn-padding-y !default; -$input-padding-x: $input-btn-padding-x !default; -$input-line-height: $input-btn-line-height !default; +$input-padding-y: $input-btn-padding-y !default; +$input-padding-x: $input-btn-padding-x !default; +$input-line-height: $input-btn-line-height !default; -$input-padding-y-sm: $input-btn-padding-y-sm !default; -$input-padding-x-sm: $input-btn-padding-x-sm !default; -$input-line-height-sm: $input-btn-line-height-sm !default; +$input-padding-y-sm: $input-btn-padding-y-sm !default; +$input-padding-x-sm: $input-btn-padding-x-sm !default; +$input-line-height-sm: $input-btn-line-height-sm !default; -$input-padding-y-lg: $input-btn-padding-y-lg !default; -$input-padding-x-lg: $input-btn-padding-x-lg !default; -$input-line-height-lg: $input-btn-line-height-lg !default; +$input-padding-y-lg: $input-btn-padding-y-lg !default; +$input-padding-x-lg: $input-btn-padding-x-lg !default; +$input-line-height-lg: $input-btn-line-height-lg !default; -$input-bg: $white !default; -$input-disabled-bg: $gray-200 !default; +$input-bg: $white !default; +$input-disabled-bg: $gray-200 !default; -$input-color: $gray-700 !default; -$input-border-color: $gray-400 !default; -$input-border-width: $input-btn-border-width !default; -$input-box-shadow: inset 0 1px 1px rgba($black, .075) !default; +$input-color: $gray-700 !default; +$input-border-color: $gray-400 !default; +$input-border-width: $input-btn-border-width !default; +$input-box-shadow: inset 0 1px 1px rgba($black, 0.075) !default; -$input-border-radius: $border-radius !default; -$input-border-radius-lg: $border-radius-lg !default; -$input-border-radius-sm: $border-radius-sm !default; +$input-border-radius: $border-radius !default; +$input-border-radius-lg: $border-radius-lg !default; +$input-border-radius-sm: $border-radius-sm !default; -$input-focus-bg: $input-bg !default; -$input-focus-border-color: lighten($component-active-bg, 25%) !default; -$input-focus-color: $input-color !default; -$input-focus-width: $input-btn-focus-width !default; -$input-focus-box-shadow: $input-btn-focus-box-shadow !default; +$input-focus-bg: $input-bg !default; +$input-focus-border-color: lighten($component-active-bg, 25%) !default; +$input-focus-color: $input-color !default; +$input-focus-width: $input-btn-focus-width !default; +$input-focus-box-shadow: $input-btn-focus-box-shadow !default; -$input-placeholder-color: $gray-600 !default; -$input-plaintext-color: $body-color !default; +$input-placeholder-color: $gray-600 !default; +$input-plaintext-color: $body-color !default; -$input-height-border: $input-border-width * 2 !default; +$input-height-border: $input-border-width * 2 !default; -$input-height-inner: ($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2) !default; -$input-height: calc(#{$input-height-inner} + #{$input-height-border}) !default; +$input-height-inner: ($font-size-base * $input-btn-line-height) + + ($input-btn-padding-y * 2) !default; +$input-height: calc(#{$input-height-inner} + #{$input-height-border}) !default; -$input-height-inner-sm: ($font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2) !default; -$input-height-sm: calc(#{$input-height-inner-sm} + #{$input-height-border}) !default; +$input-height-inner-sm: ($font-size-sm * $input-btn-line-height-sm) + + ($input-btn-padding-y-sm * 2) !default; +$input-height-sm: calc( + #{$input-height-inner-sm} + #{$input-height-border} +) !default; -$input-height-inner-lg: ($font-size-lg * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2) !default; -$input-height-lg: calc(#{$input-height-inner-lg} + #{$input-height-border}) !default; +$input-height-inner-lg: ($font-size-lg * $input-btn-line-height-lg) + + ($input-btn-padding-y-lg * 2) !default; +$input-height-lg: calc( + #{$input-height-inner-lg} + #{$input-height-border} +) !default; -$input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; +$input-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !default; -$form-text-margin-top: .25rem !default; +$form-text-margin-top: 0.25rem !default; -$form-check-input-gutter: 1.25rem !default; -$form-check-input-margin-y: .3rem !default; -$form-check-input-margin-x: .25rem !default; - -$form-check-inline-margin-x: .75rem !default; -$form-check-inline-input-margin-x: .3125rem !default; - -$form-group-margin-bottom: 1rem !default; - -$input-group-addon-color: $input-color !default; -$input-group-addon-bg: $gray-200 !default; -$input-group-addon-border-color: $input-border-color !default; - -$custom-forms-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; - -$custom-control-gutter: 1.5rem !default; -$custom-control-spacer-x: 1rem !default; - -$custom-control-indicator-size: 1rem !default; -$custom-control-indicator-bg: $gray-300 !default; -$custom-control-indicator-bg-size: 50% 50% !default; -$custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba($black, .1) !default; - -$custom-control-indicator-disabled-bg: $gray-200 !default; -$custom-control-label-disabled-color: $gray-600 !default; - -$custom-control-indicator-checked-color: $component-active-color !default; -$custom-control-indicator-checked-bg: $component-active-bg !default; -$custom-control-indicator-checked-disabled-bg: rgba(theme-color("primary"), .5) !default; -$custom-control-indicator-checked-box-shadow: none !default; - -$custom-control-indicator-focus-box-shadow: 0 0 0 1px $body-bg, $input-btn-focus-box-shadow !default; - -$custom-control-indicator-active-color: $component-active-color !default; -$custom-control-indicator-active-bg: lighten($component-active-bg, 35%) !default; -$custom-control-indicator-active-box-shadow: none !default; - -$custom-checkbox-indicator-border-radius: $border-radius !default; -$custom-checkbox-indicator-icon-checked: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"), "#", "%23") !default; - -$custom-checkbox-indicator-indeterminate-bg: $component-active-bg !default; -$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default; -$custom-checkbox-indicator-icon-indeterminate: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/%3E%3C/svg%3E"), "#", "%23") !default; -$custom-checkbox-indicator-indeterminate-box-shadow: none !default; - -$custom-radio-indicator-border-radius: 50% !default; -$custom-radio-indicator-icon-checked: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$custom-control-indicator-checked-color}'/%3E%3C/svg%3E"), "#", "%23") !default; - -$custom-select-padding-y: .375rem !default; -$custom-select-padding-x: .75rem !default; -$custom-select-height: $input-height !default; -$custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator -$custom-select-line-height: $input-btn-line-height !default; -$custom-select-color: $input-color !default; -$custom-select-disabled-color: $gray-600 !default; -$custom-select-bg: $input-bg !default; -$custom-select-disabled-bg: $gray-200 !default; -$custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions -$custom-select-indicator-color: $gray-800 !default; -$custom-select-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"), "#", "%23") !default; -$custom-select-border-width: $input-btn-border-width !default; -$custom-select-border-color: $input-border-color !default; -$custom-select-border-radius: $border-radius !default; -$custom-select-box-shadow: inset 0 1px 2px rgba($black, .075) !default; - -$custom-select-focus-border-color: $input-focus-border-color !default; -$custom-select-focus-width: $input-btn-focus-width !default; -$custom-select-focus-box-shadow: 0 0 0 $custom-select-focus-width rgba($custom-select-focus-border-color, .5) !default; - -$custom-select-font-size-sm: 75% !default; -$custom-select-height-sm: $input-height-sm !default; - -$custom-select-font-size-lg: 125% !default; -$custom-select-height-lg: $input-height-lg !default; - -$custom-range-track-width: 100% !default; -$custom-range-track-height: .5rem !default; -$custom-range-track-cursor: pointer !default; -$custom-range-track-bg: $gray-300 !default; -$custom-range-track-border-radius: 1rem !default; -$custom-range-track-box-shadow: inset 0 .25rem .25rem rgba($black, .1) !default; - -$custom-range-thumb-width: 1rem !default; -$custom-range-thumb-height: $custom-range-thumb-width !default; -$custom-range-thumb-bg: $component-active-bg !default; -$custom-range-thumb-border: 0 !default; -$custom-range-thumb-border-radius: 1rem !default; -$custom-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1) !default; -$custom-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-btn-focus-box-shadow !default; -$custom-range-thumb-focus-box-shadow-width: $input-btn-focus-width !default; // For focus box shadow issue in IE/Edge -$custom-range-thumb-active-bg: lighten($component-active-bg, 35%) !default; - -$custom-file-height: $input-height !default; -$custom-file-height-inner: $input-height-inner !default; -$custom-file-focus-border-color: $input-focus-border-color !default; -$custom-file-focus-box-shadow: $input-btn-focus-box-shadow !default; -$custom-file-disabled-bg: $input-disabled-bg !default; - -$custom-file-padding-y: $input-btn-padding-y !default; -$custom-file-padding-x: $input-btn-padding-x !default; -$custom-file-line-height: $input-btn-line-height !default; -$custom-file-color: $input-color !default; -$custom-file-bg: $input-bg !default; -$custom-file-border-width: $input-btn-border-width !default; -$custom-file-border-color: $input-border-color !default; -$custom-file-border-radius: $input-border-radius !default; -$custom-file-box-shadow: $input-box-shadow !default; -$custom-file-button-color: $custom-file-color !default; -$custom-file-button-bg: $input-group-addon-bg !default; -$custom-file-text: ( - en: "Browse" +$form-check-input-gutter: 1.25rem !default; +$form-check-input-margin-y: 0.3rem !default; +$form-check-input-margin-x: 0.25rem !default; + +$form-check-inline-margin-x: 0.75rem !default; +$form-check-inline-input-margin-x: 0.3125rem !default; + +$form-group-margin-bottom: 1rem !default; + +$input-group-addon-color: $input-color !default; +$input-group-addon-bg: $gray-200 !default; +$input-group-addon-border-color: $input-border-color !default; + +$custom-forms-transition: background-color 0.15s ease-in-out, + border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !default; + +$custom-control-gutter: 1.5rem !default; +$custom-control-spacer-x: 1rem !default; + +$custom-control-indicator-size: 1rem !default; +$custom-control-indicator-bg: $gray-300 !default; +$custom-control-indicator-bg-size: 50% 50% !default; +$custom-control-indicator-box-shadow: inset 0 0.25rem 0.25rem rgba($black, 0.1) !default; + +$custom-control-indicator-disabled-bg: $gray-200 !default; +$custom-control-label-disabled-color: $gray-600 !default; + +$custom-control-indicator-checked-color: $component-active-color !default; +$custom-control-indicator-checked-bg: $component-active-bg !default; +$custom-control-indicator-checked-disabled-bg: rgba( + theme-color("primary"), + 0.5 ) !default; +$custom-control-indicator-checked-box-shadow: none !default; +$custom-control-indicator-focus-box-shadow: 0 0 0 1px $body-bg, + $input-btn-focus-box-shadow !default; -// Form validation -$form-feedback-margin-top: $form-text-margin-top !default; -$form-feedback-font-size: $small-font-size !default; -$form-feedback-valid-color: theme-color("success") !default; -$form-feedback-invalid-color: theme-color("danger") !default; +$custom-control-indicator-active-color: $component-active-color !default; +$custom-control-indicator-active-bg: lighten( + $component-active-bg, + 35% +) !default; +$custom-control-indicator-active-box-shadow: none !default; + +$custom-checkbox-indicator-border-radius: $border-radius !default; +$custom-checkbox-indicator-icon-checked: str-replace( + url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"), + "#", + "%23" +) !default; +$custom-checkbox-indicator-indeterminate-bg: $component-active-bg !default; +$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default; +$custom-checkbox-indicator-icon-indeterminate: str-replace( + url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/%3E%3C/svg%3E"), + "#", + "%23" +) !default; +$custom-checkbox-indicator-indeterminate-box-shadow: none !default; + +$custom-radio-indicator-border-radius: 50% !default; +$custom-radio-indicator-icon-checked: str-replace( + url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$custom-control-indicator-checked-color}'/%3E%3C/svg%3E"), + "#", + "%23" +) !default; + +$custom-select-padding-y: 0.375rem !default; +$custom-select-padding-x: 0.75rem !default; +$custom-select-height: $input-height !default; +$custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator +$custom-select-line-height: $input-btn-line-height !default; +$custom-select-color: $input-color !default; +$custom-select-disabled-color: $gray-600 !default; +$custom-select-bg: $input-bg !default; +$custom-select-disabled-bg: $gray-200 !default; +$custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions +$custom-select-indicator-color: $gray-800 !default; +$custom-select-indicator: str-replace( + url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"), + "#", + "%23" +) !default; +$custom-select-border-width: $input-btn-border-width !default; +$custom-select-border-color: $input-border-color !default; +$custom-select-border-radius: $border-radius !default; +$custom-select-box-shadow: inset 0 1px 2px rgba($black, 0.075) !default; + +$custom-select-focus-border-color: $input-focus-border-color !default; +$custom-select-focus-width: $input-btn-focus-width !default; +$custom-select-focus-box-shadow: 0 0 0 $custom-select-focus-width + rgba($custom-select-focus-border-color, 0.5) !default; + +$custom-select-font-size-sm: 75% !default; +$custom-select-height-sm: $input-height-sm !default; + +$custom-select-font-size-lg: 125% !default; +$custom-select-height-lg: $input-height-lg !default; + +$custom-range-track-width: 100% !default; +$custom-range-track-height: 0.5rem !default; +$custom-range-track-cursor: pointer !default; +$custom-range-track-bg: $gray-300 !default; +$custom-range-track-border-radius: 1rem !default; +$custom-range-track-box-shadow: inset 0 0.25rem 0.25rem rgba($black, 0.1) !default; + +$custom-range-thumb-width: 1rem !default; +$custom-range-thumb-height: $custom-range-thumb-width !default; +$custom-range-thumb-bg: $component-active-bg !default; +$custom-range-thumb-border: 0 !default; +$custom-range-thumb-border-radius: 1rem !default; +$custom-range-thumb-box-shadow: 0 0.1rem 0.25rem rgba($black, 0.1) !default; +$custom-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, + $input-btn-focus-box-shadow !default; +$custom-range-thumb-focus-box-shadow-width: $input-btn-focus-width !default; // For focus box shadow issue in IE/Edge +$custom-range-thumb-active-bg: lighten($component-active-bg, 35%) !default; + +$custom-file-height: $input-height !default; +$custom-file-height-inner: $input-height-inner !default; +$custom-file-focus-border-color: $input-focus-border-color !default; +$custom-file-focus-box-shadow: $input-btn-focus-box-shadow !default; +$custom-file-disabled-bg: $input-disabled-bg !default; + +$custom-file-padding-y: $input-btn-padding-y !default; +$custom-file-padding-x: $input-btn-padding-x !default; +$custom-file-line-height: $input-btn-line-height !default; +$custom-file-color: $input-color !default; +$custom-file-bg: $input-bg !default; +$custom-file-border-width: $input-btn-border-width !default; +$custom-file-border-color: $input-border-color !default; +$custom-file-border-radius: $input-border-radius !default; +$custom-file-box-shadow: $input-box-shadow !default; +$custom-file-button-color: $custom-file-color !default; +$custom-file-button-bg: $input-group-addon-bg !default; +$custom-file-text: ( + en: "Browse", +) !default; + +// Form validation +$form-feedback-margin-top: $form-text-margin-top !default; +$form-feedback-font-size: $small-font-size !default; +$form-feedback-valid-color: theme-color("success") !default; +$form-feedback-invalid-color: theme-color("danger") !default; // Dropdowns // // Dropdown menu container and contents. -$dropdown-min-width: 10rem !default; -$dropdown-padding-y: .5rem !default; -$dropdown-spacer: .125rem !default; -$dropdown-bg: $white !default; -$dropdown-border-color: rgba($black, .15) !default; -$dropdown-border-radius: $border-radius !default; -$dropdown-border-width: $border-width !default; -$dropdown-divider-bg: $gray-200 !default; -$dropdown-box-shadow: 0 .5rem 1rem rgba($black, .175) !default; - -$dropdown-link-color: $gray-900 !default; -$dropdown-link-hover-color: darken($gray-900, 5%) !default; -$dropdown-link-hover-bg: $gray-100 !default; +$dropdown-min-width: 10rem !default; +$dropdown-padding-y: 0.5rem !default; +$dropdown-spacer: 0.125rem !default; +$dropdown-bg: $white !default; +$dropdown-border-color: rgba($black, 0.15) !default; +$dropdown-border-radius: $border-radius !default; +$dropdown-border-width: $border-width !default; +$dropdown-divider-bg: $gray-200 !default; +$dropdown-box-shadow: 0 0.5rem 1rem rgba($black, 0.175) !default; -$dropdown-link-active-color: $component-active-color !default; -$dropdown-link-active-bg: $component-active-bg !default; +$dropdown-link-color: $gray-900 !default; +$dropdown-link-hover-color: darken($gray-900, 5%) !default; +$dropdown-link-hover-bg: $gray-100 !default; -$dropdown-link-disabled-color: $gray-600 !default; +$dropdown-link-active-color: $component-active-color !default; +$dropdown-link-active-bg: $component-active-bg !default; -$dropdown-item-padding-y: .25rem !default; -$dropdown-item-padding-x: 1.5rem !default; +$dropdown-link-disabled-color: $gray-600 !default; -$dropdown-header-color: $gray-600 !default; +$dropdown-item-padding-y: 0.25rem !default; +$dropdown-item-padding-x: 1.5rem !default; +$dropdown-header-color: $gray-600 !default; // Z-index master list // // Warning: Avoid customizing these values. They're used for a bird's eye view // of components dependent on the z-axis and are designed to all work together. -$zindex-dropdown: 1000 !default; -$zindex-sticky: 1020 !default; -$zindex-fixed: 1030 !default; -$zindex-modal-backdrop: 1040 !default; -$zindex-modal: 1050 !default; -$zindex-popover: 1060 !default; -$zindex-tooltip: 1070 !default; +$zindex-dropdown: 1000 !default; +$zindex-sticky: 1020 !default; +$zindex-fixed: 1030 !default; +$zindex-modal-backdrop: 1040 !default; +$zindex-modal: 1050 !default; +$zindex-popover: 1060 !default; +$zindex-tooltip: 1070 !default; // Navs -$nav-link-padding-y: .5rem !default; -$nav-link-padding-x: 1rem !default; -$nav-link-disabled-color: $gray-600 !default; +$nav-link-padding-y: 0.5rem !default; +$nav-link-padding-x: 1rem !default; +$nav-link-disabled-color: $gray-600 !default; -$nav-tabs-border-color: $gray-300 !default; -$nav-tabs-border-width: $border-width !default; -$nav-tabs-border-radius: $border-radius !default; -$nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color !default; -$nav-tabs-link-active-color: $gray-700 !default; -$nav-tabs-link-active-bg: $body-bg !default; +$nav-tabs-border-color: $gray-300 !default; +$nav-tabs-border-width: $border-width !default; +$nav-tabs-border-radius: $border-radius !default; +$nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color !default; +$nav-tabs-link-active-color: $gray-700 !default; +$nav-tabs-link-active-bg: $body-bg !default; $nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default; -$nav-pills-border-radius: $border-radius !default; -$nav-pills-link-active-color: $component-active-color !default; -$nav-pills-link-active-bg: $component-active-bg !default; +$nav-pills-border-radius: $border-radius !default; +$nav-pills-link-active-color: $component-active-color !default; +$nav-pills-link-active-bg: $component-active-bg !default; -$nav-divider-color: $gray-200 !default; -$nav-divider-margin-y: ($spacer / 2) !default; +$nav-divider-color: $gray-200 !default; +$nav-divider-margin-y: ($spacer / 2) !default; // Navbar -$navbar-padding-y: ($spacer / 2) !default; -$navbar-padding-x: $spacer !default; +$navbar-padding-y: ($spacer / 2) !default; +$navbar-padding-x: $spacer !default; -$navbar-nav-link-padding-x: .5rem !default; +$navbar-nav-link-padding-x: 0.5rem !default; -$navbar-brand-font-size: $font-size-lg !default; +$navbar-brand-font-size: $font-size-lg !default; // Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link -$nav-link-height: ($font-size-base * $line-height-base + $nav-link-padding-y * 2) !default; -$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default; -$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) / 2 !default; - -$navbar-toggler-padding-y: .25rem !default; -$navbar-toggler-padding-x: .75rem !default; -$navbar-toggler-font-size: $font-size-lg !default; -$navbar-toggler-border-radius: $btn-border-radius !default; - -$navbar-dark-color: rgba($white, .5) !default; -$navbar-dark-hover-color: rgba($white, .75) !default; -$navbar-dark-active-color: $white !default; -$navbar-dark-disabled-color: rgba($white, .25) !default; -$navbar-dark-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default; -$navbar-dark-toggler-border-color: rgba($white, .1) !default; - -$navbar-light-color: rgba($black, .5) !default; -$navbar-light-hover-color: rgba($black, .7) !default; -$navbar-light-active-color: rgba($black, .9) !default; -$navbar-light-disabled-color: rgba($black, .3) !default; -$navbar-light-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default; -$navbar-light-toggler-border-color: rgba($black, .1) !default; +$nav-link-height: ( + $font-size-base * $line-height-base + $nav-link-padding-y * 2 +) !default; +$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default; +$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) / 2 !default; + +$navbar-toggler-padding-y: 0.25rem !default; +$navbar-toggler-padding-x: 0.75rem !default; +$navbar-toggler-font-size: $font-size-lg !default; +$navbar-toggler-border-radius: $btn-border-radius !default; + +$navbar-dark-color: rgba($white, 0.5) !default; +$navbar-dark-hover-color: rgba($white, 0.75) !default; +$navbar-dark-active-color: $white !default; +$navbar-dark-disabled-color: rgba($white, 0.25) !default; +$navbar-dark-toggler-icon-bg: str-replace( + url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), + "#", + "%23" +) !default; +$navbar-dark-toggler-border-color: rgba($white, 0.1) !default; + +$navbar-light-color: rgba($black, 0.5) !default; +$navbar-light-hover-color: rgba($black, 0.7) !default; +$navbar-light-active-color: rgba($black, 0.9) !default; +$navbar-light-disabled-color: rgba($black, 0.3) !default; +$navbar-light-toggler-icon-bg: str-replace( + url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), + "#", + "%23" +) !default; +$navbar-light-toggler-border-color: rgba($black, 0.1) !default; // Pagination -$pagination-padding-y: .5rem !default; -$pagination-padding-x: .75rem !default; -$pagination-padding-y-sm: .25rem !default; -$pagination-padding-x-sm: .5rem !default; -$pagination-padding-y-lg: .75rem !default; -$pagination-padding-x-lg: 1.5rem !default; -$pagination-line-height: 1.25 !default; - -$pagination-color: $link-color !default; -$pagination-bg: $white !default; -$pagination-border-width: $border-width !default; -$pagination-border-color: $gray-300 !default; +$pagination-padding-y: 0.5rem !default; +$pagination-padding-x: 0.75rem !default; +$pagination-padding-y-sm: 0.25rem !default; +$pagination-padding-x-sm: 0.5rem !default; +$pagination-padding-y-lg: 0.75rem !default; +$pagination-padding-x-lg: 1.5rem !default; +$pagination-line-height: 1.25 !default; -$pagination-focus-box-shadow: $input-btn-focus-box-shadow !default; -$pagination-focus-outline: 0 !default; +$pagination-color: $link-color !default; +$pagination-bg: $white !default; +$pagination-border-width: $border-width !default; +$pagination-border-color: $gray-300 !default; -$pagination-hover-color: $link-hover-color !default; -$pagination-hover-bg: $gray-200 !default; -$pagination-hover-border-color: $gray-300 !default; +$pagination-focus-box-shadow: $input-btn-focus-box-shadow !default; +$pagination-focus-outline: 0 !default; -$pagination-active-color: $component-active-color !default; -$pagination-active-bg: $component-active-bg !default; -$pagination-active-border-color: $pagination-active-bg !default; +$pagination-hover-color: $link-hover-color !default; +$pagination-hover-bg: $gray-200 !default; +$pagination-hover-border-color: $gray-300 !default; -$pagination-disabled-color: $gray-600 !default; -$pagination-disabled-bg: $white !default; -$pagination-disabled-border-color: $gray-300 !default; +$pagination-active-color: $component-active-color !default; +$pagination-active-bg: $component-active-bg !default; +$pagination-active-border-color: $pagination-active-bg !default; +$pagination-disabled-color: $gray-600 !default; +$pagination-disabled-bg: $white !default; +$pagination-disabled-border-color: $gray-300 !default; // Jumbotron -$jumbotron-padding: 2rem !default; -$jumbotron-bg: $gray-200 !default; - +$jumbotron-padding: 2rem !default; +$jumbotron-bg: $gray-200 !default; // Cards -$card-spacer-y: .75rem !default; -$card-spacer-x: 1.25rem !default; -$card-border-width: $border-width !default; -$card-border-radius: $border-radius !default; -$card-border-color: rgba($black, .125) !default; -$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default; -$card-cap-bg: rgba($black, .03) !default; -$card-bg: $white !default; - -$card-img-overlay-padding: 1.25rem !default; +$card-spacer-y: 0.75rem !default; +$card-spacer-x: 1.25rem !default; +$card-border-width: $border-width !default; +$card-border-radius: $border-radius !default; +$card-border-color: rgba($black, 0.125) !default; +$card-inner-border-radius: calc( + #{$card-border-radius} - #{$card-border-width} +) !default; +$card-cap-bg: rgba($black, 0.03) !default; +$card-bg: $white !default; -$card-group-margin: ($grid-gutter-width / 2) !default; -$card-deck-margin: $card-group-margin !default; +$card-img-overlay-padding: 1.25rem !default; -$card-columns-count: 3 !default; -$card-columns-gap: 1.25rem !default; -$card-columns-margin: $card-spacer-y !default; +$card-group-margin: calc($grid-gutter-width / 2) !default; +$card-deck-margin: $card-group-margin !default; +$card-columns-count: 3 !default; +$card-columns-gap: 1.25rem !default; +$card-columns-margin: $card-spacer-y !default; // Tooltips -$tooltip-font-size: $font-size-sm !default; -$tooltip-max-width: 200px !default; -$tooltip-color: $white !default; -$tooltip-bg: $black !default; -$tooltip-border-radius: $border-radius !default; -$tooltip-opacity: .9 !default; -$tooltip-padding-y: .25rem !default; -$tooltip-padding-x: .5rem !default; -$tooltip-margin: 0 !default; - -$tooltip-arrow-width: .8rem !default; -$tooltip-arrow-height: .4rem !default; -$tooltip-arrow-color: $tooltip-bg !default; +$tooltip-font-size: $font-size-sm !default; +$tooltip-max-width: 200px !default; +$tooltip-color: $white !default; +$tooltip-bg: $black !default; +$tooltip-border-radius: $border-radius !default; +$tooltip-opacity: 0.9 !default; +$tooltip-padding-y: 0.25rem !default; +$tooltip-padding-x: 0.5rem !default; +$tooltip-margin: 0 !default; +$tooltip-arrow-width: 0.8rem !default; +$tooltip-arrow-height: 0.4rem !default; +$tooltip-arrow-color: $tooltip-bg !default; // Popovers -$popover-font-size: $font-size-sm !default; -$popover-bg: $white !default; -$popover-max-width: 276px !default; -$popover-border-width: $border-width !default; -$popover-border-color: rgba($black, .2) !default; -$popover-border-radius: $border-radius-lg !default; -$popover-box-shadow: 0 .25rem .5rem rgba($black, .2) !default; - -$popover-header-bg: darken($popover-bg, 3%) !default; -$popover-header-color: $headings-color !default; -$popover-header-padding-y: .5rem !default; -$popover-header-padding-x: .75rem !default; +$popover-font-size: $font-size-sm !default; +$popover-bg: $white !default; +$popover-max-width: 276px !default; +$popover-border-width: $border-width !default; +$popover-border-color: rgba($black, 0.2) !default; +$popover-border-radius: $border-radius-lg !default; +$popover-box-shadow: 0 0.25rem 0.5rem rgba($black, 0.2) !default; -$popover-body-color: $body-color !default; -$popover-body-padding-y: $popover-header-padding-y !default; -$popover-body-padding-x: $popover-header-padding-x !default; +$popover-header-bg: darken($popover-bg, 3%) !default; +$popover-header-color: $headings-color !default; +$popover-header-padding-y: 0.5rem !default; +$popover-header-padding-x: 0.75rem !default; -$popover-arrow-width: 1rem !default; -$popover-arrow-height: .5rem !default; -$popover-arrow-color: $popover-bg !default; +$popover-body-color: $body-color !default; +$popover-body-padding-y: $popover-header-padding-y !default; +$popover-body-padding-x: $popover-header-padding-x !default; -$popover-arrow-outer-color: fade-in($popover-border-color, .05) !default; +$popover-arrow-width: 1rem !default; +$popover-arrow-height: 0.5rem !default; +$popover-arrow-color: $popover-bg !default; +$popover-arrow-outer-color: fade-in($popover-border-color, 0.05) !default; // Badges -$badge-font-size: 75% !default; -$badge-font-weight: $font-weight-bold !default; -$badge-padding-y: .25em !default; -$badge-padding-x: .4em !default; -$badge-border-radius: $border-radius !default; +$badge-font-size: 75% !default; +$badge-font-weight: $font-weight-bold !default; +$badge-padding-y: 0.25em !default; +$badge-padding-x: 0.4em !default; +$badge-border-radius: $border-radius !default; -$badge-pill-padding-x: .6em !default; +$badge-pill-padding-x: 0.6em !default; // Use a higher than normal value to ensure completely rounded edges when // customizing padding or font-size on labels. -$badge-pill-border-radius: 10rem !default; - +$badge-pill-border-radius: 10rem !default; // Modals // Padding applied to the modal body -$modal-inner-padding: 1rem !default; - -$modal-dialog-margin: .5rem !default; -$modal-dialog-margin-y-sm-up: 1.75rem !default; +$modal-inner-padding: 1rem !default; -$modal-title-line-height: $line-height-base !default; +$modal-dialog-margin: 0.5rem !default; +$modal-dialog-margin-y-sm-up: 1.75rem !default; -$modal-content-bg: $white !default; -$modal-content-border-color: rgba($black, .2) !default; -$modal-content-border-width: $border-width !default; -$modal-content-border-radius: $border-radius-lg !default; -$modal-content-box-shadow-xs: 0 .25rem .5rem rgba($black, .5) !default; -$modal-content-box-shadow-sm-up: 0 .5rem 1rem rgba($black, .5) !default; +$modal-title-line-height: $line-height-base !default; -$modal-backdrop-bg: $black !default; -$modal-backdrop-opacity: .5 !default; -$modal-header-border-color: $gray-200 !default; -$modal-footer-border-color: $modal-header-border-color !default; -$modal-header-border-width: $modal-content-border-width !default; -$modal-footer-border-width: $modal-header-border-width !default; -$modal-header-padding: 1rem !default; +$modal-content-bg: $white !default; +$modal-content-border-color: rgba($black, 0.2) !default; +$modal-content-border-width: $border-width !default; +$modal-content-border-radius: $border-radius-lg !default; +$modal-content-box-shadow-xs: 0 0.25rem 0.5rem rgba($black, 0.5) !default; +$modal-content-box-shadow-sm-up: 0 0.5rem 1rem rgba($black, 0.5) !default; -$modal-lg: 800px !default; -$modal-md: 500px !default; -$modal-sm: 300px !default; +$modal-backdrop-bg: $black !default; +$modal-backdrop-opacity: 0.5 !default; +$modal-header-border-color: $gray-200 !default; +$modal-footer-border-color: $modal-header-border-color !default; +$modal-header-border-width: $modal-content-border-width !default; +$modal-footer-border-width: $modal-header-border-width !default; +$modal-header-padding: 1rem !default; -$modal-transition: transform .3s ease-out !default; +$modal-lg: 800px !default; +$modal-md: 500px !default; +$modal-sm: 300px !default; +$modal-transition: transform 0.3s ease-out !default; // Alerts // // Define alert colors, border radius, and padding. -$alert-padding-y: .75rem !default; -$alert-padding-x: 1.25rem !default; -$alert-margin-bottom: 1rem !default; -$alert-border-radius: $border-radius !default; -$alert-link-font-weight: $font-weight-bold !default; -$alert-border-width: $border-width !default; - -$alert-bg-level: -10 !default; -$alert-border-level: -9 !default; -$alert-color-level: 6 !default; +$alert-padding-y: 0.75rem !default; +$alert-padding-x: 1.25rem !default; +$alert-margin-bottom: 1rem !default; +$alert-border-radius: $border-radius !default; +$alert-link-font-weight: $font-weight-bold !default; +$alert-border-width: $border-width !default; +$alert-bg-level: -10 !default; +$alert-border-level: -9 !default; +$alert-color-level: 6 !default; // Progress bars -$progress-height: 1rem !default; -$progress-font-size: ($font-size-base * .75) !default; -$progress-bg: $gray-200 !default; -$progress-border-radius: $border-radius !default; -$progress-box-shadow: inset 0 .1rem .1rem rgba($black, .1) !default; -$progress-bar-color: $white !default; -$progress-bar-bg: theme-color("primary") !default; -$progress-bar-animation-timing: 1s linear infinite !default; -$progress-bar-transition: width .6s ease !default; +$progress-height: 1rem !default; +$progress-font-size: ($font-size-base * 0.75) !default; +$progress-bg: $gray-200 !default; +$progress-border-radius: $border-radius !default; +$progress-box-shadow: inset 0 0.1rem 0.1rem rgba($black, 0.1) !default; +$progress-bar-color: $white !default; +$progress-bar-bg: theme-color("primary") !default; +$progress-bar-animation-timing: 1s linear infinite !default; +$progress-bar-transition: width 0.6s ease !default; // List group -$list-group-bg: $white !default; -$list-group-border-color: rgba($black, .125) !default; -$list-group-border-width: $border-width !default; -$list-group-border-radius: $border-radius !default; - -$list-group-item-padding-y: .75rem !default; -$list-group-item-padding-x: 1.25rem !default; +$list-group-bg: $white !default; +$list-group-border-color: rgba($black, 0.125) !default; +$list-group-border-width: $border-width !default; +$list-group-border-radius: $border-radius !default; -$list-group-hover-bg: $gray-100 !default; -$list-group-active-color: $component-active-color !default; -$list-group-active-bg: $component-active-bg !default; -$list-group-active-border-color: $list-group-active-bg !default; +$list-group-item-padding-y: 0.75rem !default; +$list-group-item-padding-x: 1.25rem !default; -$list-group-disabled-color: $gray-600 !default; -$list-group-disabled-bg: $list-group-bg !default; +$list-group-hover-bg: $gray-100 !default; +$list-group-active-color: $component-active-color !default; +$list-group-active-bg: $component-active-bg !default; +$list-group-active-border-color: $list-group-active-bg !default; -$list-group-action-color: $gray-700 !default; -$list-group-action-hover-color: $list-group-action-color !default; +$list-group-disabled-color: $gray-600 !default; +$list-group-disabled-bg: $list-group-bg !default; -$list-group-action-active-color: $body-color !default; -$list-group-action-active-bg: $gray-200 !default; +$list-group-action-color: $gray-700 !default; +$list-group-action-hover-color: $list-group-action-color !default; +$list-group-action-active-color: $body-color !default; +$list-group-action-active-bg: $gray-200 !default; // Image thumbnails -$thumbnail-padding: .25rem !default; -$thumbnail-bg: $body-bg !default; -$thumbnail-border-width: $border-width !default; -$thumbnail-border-color: $gray-300 !default; -$thumbnail-border-radius: $border-radius !default; -$thumbnail-box-shadow: 0 1px 2px rgba($black, .075) !default; - +$thumbnail-padding: 0.25rem !default; +$thumbnail-bg: $body-bg !default; +$thumbnail-border-width: $border-width !default; +$thumbnail-border-color: $gray-300 !default; +$thumbnail-border-radius: $border-radius !default; +$thumbnail-box-shadow: 0 1px 2px rgba($black, 0.075) !default; // Figures -$figure-caption-font-size: 90% !default; -$figure-caption-color: $gray-600 !default; - +$figure-caption-font-size: 90% !default; +$figure-caption-color: $gray-600 !default; // Breadcrumbs -$breadcrumb-padding-y: .75rem !default; -$breadcrumb-padding-x: 1rem !default; -$breadcrumb-item-padding: .5rem !default; - -$breadcrumb-margin-bottom: 1rem !default; +$breadcrumb-padding-y: 0.75rem !default; +$breadcrumb-padding-x: 1rem !default; +$breadcrumb-item-padding: 0.5rem !default; -$breadcrumb-bg: $gray-200 !default; -$breadcrumb-divider-color: $gray-600 !default; -$breadcrumb-active-color: $gray-600 !default; -$breadcrumb-divider: quote("/") !default; +$breadcrumb-margin-bottom: 1rem !default; -$breadcrumb-border-radius: $border-radius !default; +$breadcrumb-bg: $gray-200 !default; +$breadcrumb-divider-color: $gray-600 !default; +$breadcrumb-active-color: $gray-600 !default; +$breadcrumb-divider: quote("/") !default; +$breadcrumb-border-radius: $border-radius !default; // Carousel -$carousel-control-color: $white !default; -$carousel-control-width: 15% !default; -$carousel-control-opacity: .5 !default; - -$carousel-indicator-width: 30px !default; -$carousel-indicator-height: 3px !default; -$carousel-indicator-spacer: 3px !default; -$carousel-indicator-active-bg: $white !default; +$carousel-control-color: $white !default; +$carousel-control-width: 15% !default; +$carousel-control-opacity: 0.5 !default; -$carousel-caption-width: 70% !default; -$carousel-caption-color: $white !default; +$carousel-indicator-width: 30px !default; +$carousel-indicator-height: 3px !default; +$carousel-indicator-spacer: 3px !default; +$carousel-indicator-active-bg: $white !default; -$carousel-control-icon-width: 20px !default; +$carousel-caption-width: 70% !default; +$carousel-caption-color: $white !default; -$carousel-control-prev-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"), "#", "%23") !default; -$carousel-control-next-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"), "#", "%23") !default; +$carousel-control-icon-width: 20px !default; -$carousel-transition: transform .6s ease !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`) +$carousel-control-prev-icon-bg: str-replace( + url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"), + "#", + "%23" +) !default; +$carousel-control-next-icon-bg: str-replace( + url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"), + "#", + "%23" +) !default; +$carousel-transition: transform 0.6s ease !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`) // Close -$close-font-size: $font-size-base * 1.5 !default; -$close-font-weight: $font-weight-bold !default; -$close-color: $black !default; -$close-text-shadow: 0 1px 0 $white !default; +$close-font-size: $font-size-base * 1.5 !default; +$close-font-weight: $font-weight-bold !default; +$close-color: $black !default; +$close-text-shadow: 0 1px 0 $white !default; // Code -$code-font-size: 87.5% !default; -$code-color: $pink !default; - -$kbd-padding-y: .2rem !default; -$kbd-padding-x: .4rem !default; -$kbd-font-size: $code-font-size !default; -$kbd-color: $white !default; -$kbd-bg: $gray-900 !default; +$code-font-size: 87.5% !default; +$code-color: $pink !default; -$pre-color: $gray-900 !default; -$pre-scrollable-max-height: 340px !default; +$kbd-padding-y: 0.2rem !default; +$kbd-padding-x: 0.4rem !default; +$kbd-font-size: $code-font-size !default; +$kbd-color: $white !default; +$kbd-bg: $gray-900 !default; +$pre-color: $gray-900 !default; +$pre-scrollable-max-height: 340px !default; // Printing -$print-page-size: a3 !default; -$print-body-min-width: map-get($grid-breakpoints, "lg") !default; +$print-page-size: a3 !default; +$print-body-min-width: map-get($grid-breakpoints, "lg") !default; diff --git a/src/assets/sass/black-dashboard/bootstrap/mixins/_background-variant.scss b/src/assets/sass/black-dashboard/bootstrap/mixins/_background-variant.scss index 494439d2..7519953a 100644 --- a/src/assets/sass/black-dashboard/bootstrap/mixins/_background-variant.scss +++ b/src/assets/sass/black-dashboard/bootstrap/mixins/_background-variant.scss @@ -16,6 +16,7 @@ @mixin bg-gradient-variant($parent, $color) { #{$parent} { - background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important; + background: $color + linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important; } } diff --git a/src/assets/sass/black-dashboard/bootstrap/mixins/_breakpoints.scss b/src/assets/sass/black-dashboard/bootstrap/mixins/_breakpoints.scss index 59f25a27..66c0138b 100644 --- a/src/assets/sass/black-dashboard/bootstrap/mixins/_breakpoints.scss +++ b/src/assets/sass/black-dashboard/bootstrap/mixins/_breakpoints.scss @@ -14,9 +14,17 @@ // md // >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl)) // md -@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) { +@function breakpoint-next( + $name, + $breakpoints: $grid-breakpoints, + $breakpoint-names: map-keys($breakpoints) +) { $n: index($breakpoint-names, $name); - @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null); + @return if( + $n < length($breakpoint-names), + nth($breakpoint-names, $n + 1), + null + ); } // Minimum breakpoint width. Null for the smallest (first) breakpoint. @@ -39,7 +47,7 @@ // 767.98px @function breakpoint-max($name, $breakpoints: $grid-breakpoints) { $next: breakpoint-next($name, $breakpoints); - @return if($next, breakpoint-min($next, $breakpoints) - .02px, null); + @return if($next, breakpoint-min($next, $breakpoints) - 0.02px, null); } // Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front. @@ -81,7 +89,11 @@ // Media that spans multiple breakpoint widths. // Makes the @content apply between the min and max breakpoints -@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) { +@mixin media-breakpoint-between( + $lower, + $upper, + $breakpoints: $grid-breakpoints +) { $min: breakpoint-min($lower, $breakpoints); $max: breakpoint-max($upper, $breakpoints); diff --git a/src/assets/sass/black-dashboard/bootstrap/mixins/_buttons.scss b/src/assets/sass/black-dashboard/bootstrap/mixins/_buttons.scss index 06ad6772..cdb0911c 100644 --- a/src/assets/sass/black-dashboard/bootstrap/mixins/_buttons.scss +++ b/src/assets/sass/black-dashboard/bootstrap/mixins/_buttons.scss @@ -3,7 +3,14 @@ // Easily pump out default styles, as well as :hover, :focus, :active, // and disabled options for all buttons -@mixin button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) { +@mixin button-variant( + $background, + $border, + $hover-background: darken($background, 7.5%), + $hover-border: darken($border, 10%), + $active-background: darken($background, 10%), + $active-border: darken($border, 12.5%) +) { color: color-yiq($background); @include gradient-bg($background); border-color: $border; @@ -19,9 +26,9 @@ &.focus { // Avoid using mixin so we can pass custom focus shadow properly @if $enable-shadows { - box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5); + box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba($border, 0.5); } @else { - box-shadow: 0 0 0 $btn-focus-width rgba($border, .5); + box-shadow: 0 0 0 $btn-focus-width rgba($border, 0.5); } } @@ -46,15 +53,21 @@ &:focus { // Avoid using mixin so we can pass custom focus shadow properly @if $enable-shadows { - box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5); + box-shadow: $btn-active-box-shadow, + 0 0 0 $btn-focus-width rgba($border, 0.5); } @else { - box-shadow: 0 0 0 $btn-focus-width rgba($border, .5); + box-shadow: 0 0 0 $btn-focus-width rgba($border, 0.5); } } } } -@mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) { +@mixin button-outline-variant( + $color, + $color-hover: color-yiq($color), + $active-background: $color, + $active-border: $color +) { color: $color; background-color: transparent; background-image: none; @@ -68,7 +81,7 @@ &:focus, &.focus { - box-shadow: 0 0 0 $btn-focus-width rgba($color, .5); + box-shadow: 0 0 0 $btn-focus-width rgba($color, 0.5); } &.disabled, @@ -87,16 +100,23 @@ &:focus { // Avoid using mixin so we can pass custom focus shadow properly @if $enable-shadows and $btn-active-box-shadow != none { - box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5); + box-shadow: $btn-active-box-shadow, + 0 0 0 $btn-focus-width rgba($color, 0.5); } @else { - box-shadow: 0 0 0 $btn-focus-width rgba($color, .5); + box-shadow: 0 0 0 $btn-focus-width rgba($color, 0.5); } } } } // Button sizes -@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) { +@mixin button-size( + $padding-y, + $padding-x, + $font-size, + $line-height, + $border-radius +) { padding: $padding-y $padding-x; font-size: $font-size; line-height: $line-height; diff --git a/src/assets/sass/black-dashboard/bootstrap/mixins/_caret.scss b/src/assets/sass/black-dashboard/bootstrap/mixins/_caret.scss index 82aea421..5780a07a 100644 --- a/src/assets/sass/black-dashboard/bootstrap/mixins/_caret.scss +++ b/src/assets/sass/black-dashboard/bootstrap/mixins/_caret.scss @@ -31,8 +31,8 @@ display: inline-block; width: 0; height: 0; - margin-left: $caret-width * .85; - vertical-align: $caret-width * .85; + margin-left: $caret-width * 0.85; + vertical-align: $caret-width * 0.85; content: ""; @if $direction == down { @include caret-down; @@ -52,8 +52,8 @@ display: inline-block; width: 0; height: 0; - margin-right: $caret-width * .85; - vertical-align: $caret-width * .85; + margin-right: $caret-width * 0.85; + vertical-align: $caret-width * 0.85; content: ""; @include caret-left; } diff --git a/src/assets/sass/black-dashboard/bootstrap/mixins/_forms.scss b/src/assets/sass/black-dashboard/bootstrap/mixins/_forms.scss index 3a618786..67d1cf70 100644 --- a/src/assets/sass/black-dashboard/bootstrap/mixins/_forms.scss +++ b/src/assets/sass/black-dashboard/bootstrap/mixins/_forms.scss @@ -25,7 +25,6 @@ } } - @mixin form-validation-state($state, $color) { .#{$state}-feedback { display: none; @@ -42,7 +41,7 @@ display: none; max-width: 100%; // Contain to parent when possible padding: $tooltip-padding-y $tooltip-padding-x; - margin-top: .1rem; + margin-top: 0.1rem; font-size: $tooltip-font-size; line-height: $line-height-base; color: color-yiq($color); @@ -58,7 +57,7 @@ &:focus { border-color: $color; - box-shadow: 0 0 0 $input-focus-width rgba($color, .25); + box-shadow: 0 0 0 $input-focus-width rgba($color, 0.25); } ~ .#{$state}-feedback, @@ -116,7 +115,8 @@ &:focus { ~ .custom-control-label::before { - box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-focus-width rgba($color, .25); + box-shadow: 0 0 0 1px $body-bg, + 0 0 0 $input-focus-width rgba($color, 0.25); } } } @@ -129,7 +129,9 @@ ~ .custom-file-label { border-color: $color; - &::after { border-color: inherit; } + &::after { + border-color: inherit; + } } ~ .#{$state}-feedback, @@ -139,7 +141,7 @@ &:focus { ~ .custom-file-label { - box-shadow: 0 0 0 $input-focus-width rgba($color, .25); + box-shadow: 0 0 0 $input-focus-width rgba($color, 0.25); } } } diff --git a/src/assets/sass/black-dashboard/bootstrap/mixins/_gradients.scss b/src/assets/sass/black-dashboard/bootstrap/mixins/_gradients.scss index 88c4d64b..3ac4a109 100644 --- a/src/assets/sass/black-dashboard/bootstrap/mixins/_gradients.scss +++ b/src/assets/sass/black-dashboard/bootstrap/mixins/_gradients.scss @@ -2,7 +2,9 @@ @mixin gradient-bg($color) { @if $enable-gradients { - background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x; + background: $color + linear-gradient(180deg, mix($body-bg, $color, 15%), $color) + repeat-x; } @else { background-color: $color; } @@ -11,35 +13,85 @@ // Horizontal gradient, from left to right // // Creates two color stops, start and end, by specifying a color and position for each color stop. -@mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) { - background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); +@mixin gradient-x( + $start-color: $gray-700, + $end-color: $gray-800, + $start-percent: 0%, + $end-percent: 100% +) { + background-image: linear-gradient( + to right, + $start-color $start-percent, + $end-color $end-percent + ); background-repeat: repeat-x; } // Vertical gradient, from top to bottom // // Creates two color stops, start and end, by specifying a color and position for each color stop. -@mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) { - background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); +@mixin gradient-y( + $start-color: $gray-700, + $end-color: $gray-800, + $start-percent: 0%, + $end-percent: 100% +) { + background-image: linear-gradient( + to bottom, + $start-color $start-percent, + $end-color $end-percent + ); background-repeat: repeat-x; } -@mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) { +@mixin gradient-directional( + $start-color: $gray-700, + $end-color: $gray-800, + $deg: 45deg +) { background-image: linear-gradient($deg, $start-color, $end-color); background-repeat: repeat-x; } -@mixin gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) { - background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color); +@mixin gradient-x-three-colors( + $start-color: $blue, + $mid-color: $purple, + $color-stop: 50%, + $end-color: $red +) { + background-image: linear-gradient( + to right, + $start-color, + $mid-color $color-stop, + $end-color + ); background-repeat: no-repeat; } -@mixin gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) { - background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color); +@mixin gradient-y-three-colors( + $start-color: $blue, + $mid-color: $purple, + $color-stop: 50%, + $end-color: $red +) { + background-image: linear-gradient( + $start-color, + $mid-color $color-stop, + $end-color + ); background-repeat: no-repeat; } @mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) { background-image: radial-gradient(circle, $inner-color, $outer-color); background-repeat: no-repeat; } -@mixin gradient-striped($color: rgba($white, .15), $angle: 45deg) { - background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent); +@mixin gradient-striped($color: rgba($white, 0.15), $angle: 45deg) { + background-image: linear-gradient( + $angle, + $color 25%, + transparent 25%, + transparent 50%, + $color 50%, + $color 75%, + transparent 75%, + transparent + ); } diff --git a/src/assets/sass/black-dashboard/bootstrap/mixins/_grid-framework.scss b/src/assets/sass/black-dashboard/bootstrap/mixins/_grid-framework.scss index 7b37f868..467a36ed 100644 --- a/src/assets/sass/black-dashboard/bootstrap/mixins/_grid-framework.scss +++ b/src/assets/sass/black-dashboard/bootstrap/mixins/_grid-framework.scss @@ -3,7 +3,11 @@ // Used only by Bootstrap to generate the correct number of grid classes given // any value of `$grid-columns`. -@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) { +@mixin make-grid-columns( + $columns: $grid-columns, + $gutter: $grid-gutter-width, + $breakpoints: $grid-breakpoints +) { // Common properties for all breakpoints %grid-column { position: relative; @@ -46,17 +50,24 @@ } } - .order#{$infix}-first { order: -1; } + .order#{$infix}-first { + order: -1; + } - .order#{$infix}-last { order: $columns + 1; } + .order#{$infix}-last { + order: $columns + 1; + } @for $i from 0 through $columns { - .order#{$infix}-#{$i} { order: $i; } + .order#{$infix}-#{$i} { + order: $i; + } } // `$columns - 1` because offsetting by the width of an entire row isn't possible @for $i from 0 through ($columns - 1) { - @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0 + @if not($infix == "" and $i == 0) { + // Avoid emitting useless .offset-0 .offset#{$infix}-#{$i} { @include make-col-offset($i, $columns); } diff --git a/src/assets/sass/black-dashboard/bootstrap/mixins/_grid.scss b/src/assets/sass/black-dashboard/bootstrap/mixins/_grid.scss index b75ebcbc..f56d484c 100644 --- a/src/assets/sass/black-dashboard/bootstrap/mixins/_grid.scss +++ b/src/assets/sass/black-dashboard/bootstrap/mixins/_grid.scss @@ -4,15 +4,17 @@ @mixin make-container() { width: 100%; - padding-right: ($grid-gutter-width / 2); - padding-left: ($grid-gutter-width / 2); + padding-right: calc($grid-gutter-width / 2); + padding-left: calc($grid-gutter-width / 2); margin-right: auto; margin-left: auto; } - // For each breakpoint, define the maximum width of the container in a media query -@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) { +@mixin make-container-max-widths( + $max-widths: $container-max-widths, + $breakpoints: $grid-breakpoints +) { @each $breakpoint, $container-max-width in $max-widths { @include media-breakpoint-up($breakpoint, $breakpoints) { max-width: $container-max-width; @@ -23,8 +25,8 @@ @mixin make-row() { display: flex; flex-wrap: wrap; - margin-right: ($grid-gutter-width / -2); - margin-left: ($grid-gutter-width / -2); + margin-right: calc($grid-gutter-width / -2); + margin-left: calc($grid-gutter-width / -2); } @mixin make-col-ready() { @@ -34,8 +36,8 @@ // later on to override this initial width. width: 100%; min-height: 1px; // Prevent collapsing - padding-right: ($grid-gutter-width / 2); - padding-left: ($grid-gutter-width / 2); + padding-right: calc($grid-gutter-width / 2); + padding-left: calc($grid-gutter-width / 2); } @mixin make-col($size, $columns: $grid-columns) { diff --git a/src/assets/sass/black-dashboard/bootstrap/mixins/_hover.scss b/src/assets/sass/black-dashboard/bootstrap/mixins/_hover.scss index 192f847e..467ce475 100644 --- a/src/assets/sass/black-dashboard/bootstrap/mixins/_hover.scss +++ b/src/assets/sass/black-dashboard/bootstrap/mixins/_hover.scss @@ -10,7 +10,9 @@ // Issue: https://github.com/twbs/bootstrap/issues/25195 @mixin hover { - &:hover { @content; } + &:hover { + @content; + } } @mixin hover-focus { diff --git a/src/assets/sass/black-dashboard/bootstrap/mixins/_image.scss b/src/assets/sass/black-dashboard/bootstrap/mixins/_image.scss index 0544f0d2..19db4e2a 100644 --- a/src/assets/sass/black-dashboard/bootstrap/mixins/_image.scss +++ b/src/assets/sass/black-dashboard/bootstrap/mixins/_image.scss @@ -2,7 +2,6 @@ // - Responsive image // - Retina image - // Responsive image // // Keep images from scaling beyond the width of their parents. @@ -15,7 +14,6 @@ height: auto; } - // Retina image // // Short retina mixin for setting background-image and -size. @@ -28,9 +26,10 @@ // but doesn't convert dppx=>dpi. // There's no such thing as unprefixed min-device-pixel-ratio since it's nonstandard. // Compatibility info: https://caniuse.com/#feat=css-media-resolution - @media only screen and (min-resolution: 192dpi), // IE9-11 don't support dppx - only screen and (min-resolution: 2dppx) { // Standardized + @media only screen and (min-resolution: 192dpi){ + // IE9-11 don't support dppx only screen and (min-resolution: 2dppx) { + // Standardized background-image: url($file-2x); background-size: $width-1x $height-1x; } -} + } diff --git a/src/assets/sass/black-dashboard/bootstrap/mixins/_nav-divider.scss b/src/assets/sass/black-dashboard/bootstrap/mixins/_nav-divider.scss index 4fb37b62..cdd6d5e7 100644 --- a/src/assets/sass/black-dashboard/bootstrap/mixins/_nav-divider.scss +++ b/src/assets/sass/black-dashboard/bootstrap/mixins/_nav-divider.scss @@ -2,7 +2,10 @@ // // Dividers (basically an hr) within dropdowns and nav lists -@mixin nav-divider($color: $nav-divider-color, $margin-y: $nav-divider-margin-y) { +@mixin nav-divider( + $color: $nav-divider-color, + $margin-y: $nav-divider-margin-y +) { height: 0; margin: $margin-y 0; overflow: hidden; diff --git a/src/assets/sass/black-dashboard/bootstrap/mixins/_pagination.scss b/src/assets/sass/black-dashboard/bootstrap/mixins/_pagination.scss index ff36eb6b..b614d6d8 100644 --- a/src/assets/sass/black-dashboard/bootstrap/mixins/_pagination.scss +++ b/src/assets/sass/black-dashboard/bootstrap/mixins/_pagination.scss @@ -1,6 +1,12 @@ // Pagination -@mixin pagination-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) { +@mixin pagination-size( + $padding-y, + $padding-x, + $font-size, + $line-height, + $border-radius +) { .page-link { padding: $padding-y $padding-x; font-size: $font-size; diff --git a/src/assets/sass/black-dashboard/bootstrap/utilities/_align.scss b/src/assets/sass/black-dashboard/bootstrap/utilities/_align.scss index 8b7df9f7..688d731d 100644 --- a/src/assets/sass/black-dashboard/bootstrap/utilities/_align.scss +++ b/src/assets/sass/black-dashboard/bootstrap/utilities/_align.scss @@ -1,8 +1,20 @@ // stylelint-disable declaration-no-important -.align-baseline { vertical-align: baseline !important; } // Browser default -.align-top { vertical-align: top !important; } -.align-middle { vertical-align: middle !important; } -.align-bottom { vertical-align: bottom !important; } -.align-text-bottom { vertical-align: text-bottom !important; } -.align-text-top { vertical-align: text-top !important; } +.align-baseline { + vertical-align: baseline !important; +} // Browser default +.align-top { + vertical-align: top !important; +} +.align-middle { + vertical-align: middle !important; +} +.align-bottom { + vertical-align: bottom !important; +} +.align-text-bottom { + vertical-align: text-bottom !important; +} +.align-text-top { + vertical-align: text-top !important; +} diff --git a/src/assets/sass/black-dashboard/bootstrap/utilities/_borders.scss b/src/assets/sass/black-dashboard/bootstrap/utilities/_borders.scss index b8832ef7..885c5a84 100644 --- a/src/assets/sass/black-dashboard/bootstrap/utilities/_borders.scss +++ b/src/assets/sass/black-dashboard/bootstrap/utilities/_borders.scss @@ -4,17 +4,37 @@ // Border // -.border { border: $border-width solid $border-color !important; } -.border-top { border-top: $border-width solid $border-color !important; } -.border-right { border-right: $border-width solid $border-color !important; } -.border-bottom { border-bottom: $border-width solid $border-color !important; } -.border-left { border-left: $border-width solid $border-color !important; } - -.border-0 { border: 0 !important; } -.border-top-0 { border-top: 0 !important; } -.border-right-0 { border-right: 0 !important; } -.border-bottom-0 { border-bottom: 0 !important; } -.border-left-0 { border-left: 0 !important; } +.border { + border: $border-width solid $border-color !important; +} +.border-top { + border-top: $border-width solid $border-color !important; +} +.border-right { + border-right: $border-width solid $border-color !important; +} +.border-bottom { + border-bottom: $border-width solid $border-color !important; +} +.border-left { + border-left: $border-width solid $border-color !important; +} + +.border-0 { + border: 0 !important; +} +.border-top-0 { + border-top: 0 !important; +} +.border-right-0 { + border-right: 0 !important; +} +.border-bottom-0 { + border-bottom: 0 !important; +} +.border-left-0 { + border-left: 0 !important; +} @each $color, $value in $theme-colors { .border-#{$color} { diff --git a/src/assets/sass/black-dashboard/bootstrap/utilities/_display.scss b/src/assets/sass/black-dashboard/bootstrap/utilities/_display.scss index 20aeeb5f..67cf8bda 100644 --- a/src/assets/sass/black-dashboard/bootstrap/utilities/_display.scss +++ b/src/assets/sass/black-dashboard/bootstrap/utilities/_display.scss @@ -8,31 +8,66 @@ @include media-breakpoint-up($breakpoint) { $infix: breakpoint-infix($breakpoint, $grid-breakpoints); - .d#{$infix}-none { display: none !important; } - .d#{$infix}-inline { display: inline !important; } - .d#{$infix}-inline-block { display: inline-block !important; } - .d#{$infix}-block { display: block !important; } - .d#{$infix}-table { display: table !important; } - .d#{$infix}-table-row { display: table-row !important; } - .d#{$infix}-table-cell { display: table-cell !important; } - .d#{$infix}-flex { display: flex !important; } - .d#{$infix}-inline-flex { display: inline-flex !important; } + .d#{$infix}-none { + display: none !important; + } + .d#{$infix}-inline { + display: inline !important; + } + .d#{$infix}-inline-block { + display: inline-block !important; + } + .d#{$infix}-block { + display: block !important; + } + .d#{$infix}-table { + display: table !important; + } + .d#{$infix}-table-row { + display: table-row !important; + } + .d#{$infix}-table-cell { + display: table-cell !important; + } + .d#{$infix}-flex { + display: flex !important; + } + .d#{$infix}-inline-flex { + display: inline-flex !important; + } } } - // // Utilities for toggling `display` in print // @media print { - .d-print-none { display: none !important; } - .d-print-inline { display: inline !important; } - .d-print-inline-block { display: inline-block !important; } - .d-print-block { display: block !important; } - .d-print-table { display: table !important; } - .d-print-table-row { display: table-row !important; } - .d-print-table-cell { display: table-cell !important; } - .d-print-flex { display: flex !important; } - .d-print-inline-flex { display: inline-flex !important; } + .d-print-none { + display: none !important; + } + .d-print-inline { + display: inline !important; + } + .d-print-inline-block { + display: inline-block !important; + } + .d-print-block { + display: block !important; + } + .d-print-table { + display: table !important; + } + .d-print-table-row { + display: table-row !important; + } + .d-print-table-cell { + display: table-cell !important; + } + .d-print-flex { + display: flex !important; + } + .d-print-inline-flex { + display: inline-flex !important; + } } diff --git a/src/assets/sass/black-dashboard/bootstrap/utilities/_flex.scss b/src/assets/sass/black-dashboard/bootstrap/utilities/_flex.scss index 3d4266e0..36ad56e6 100644 --- a/src/assets/sass/black-dashboard/bootstrap/utilities/_flex.scss +++ b/src/assets/sass/black-dashboard/bootstrap/utilities/_flex.scss @@ -8,44 +8,112 @@ @include media-breakpoint-up($breakpoint) { $infix: breakpoint-infix($breakpoint, $grid-breakpoints); - .flex#{$infix}-row { flex-direction: row !important; } - .flex#{$infix}-column { flex-direction: column !important; } - .flex#{$infix}-row-reverse { flex-direction: row-reverse !important; } - .flex#{$infix}-column-reverse { flex-direction: column-reverse !important; } - - .flex#{$infix}-wrap { flex-wrap: wrap !important; } - .flex#{$infix}-nowrap { flex-wrap: nowrap !important; } - .flex#{$infix}-wrap-reverse { flex-wrap: wrap-reverse !important; } - .flex#{$infix}-fill { flex: 1 1 auto !important; } - .flex#{$infix}-grow-0 { flex-grow: 0 !important; } - .flex#{$infix}-grow-1 { flex-grow: 1 !important; } - .flex#{$infix}-shrink-0 { flex-shrink: 0 !important; } - .flex#{$infix}-shrink-1 { flex-shrink: 1 !important; } - - .justify-content#{$infix}-start { justify-content: flex-start !important; } - .justify-content#{$infix}-end { justify-content: flex-end !important; } - .justify-content#{$infix}-center { justify-content: center !important; } - .justify-content#{$infix}-between { justify-content: space-between !important; } - .justify-content#{$infix}-around { justify-content: space-around !important; } - - .align-items#{$infix}-start { align-items: flex-start !important; } - .align-items#{$infix}-end { align-items: flex-end !important; } - .align-items#{$infix}-center { align-items: center !important; } - .align-items#{$infix}-baseline { align-items: baseline !important; } - .align-items#{$infix}-stretch { align-items: stretch !important; } - - .align-content#{$infix}-start { align-content: flex-start !important; } - .align-content#{$infix}-end { align-content: flex-end !important; } - .align-content#{$infix}-center { align-content: center !important; } - .align-content#{$infix}-between { align-content: space-between !important; } - .align-content#{$infix}-around { align-content: space-around !important; } - .align-content#{$infix}-stretch { align-content: stretch !important; } - - .align-self#{$infix}-auto { align-self: auto !important; } - .align-self#{$infix}-start { align-self: flex-start !important; } - .align-self#{$infix}-end { align-self: flex-end !important; } - .align-self#{$infix}-center { align-self: center !important; } - .align-self#{$infix}-baseline { align-self: baseline !important; } - .align-self#{$infix}-stretch { align-self: stretch !important; } + .flex#{$infix}-row { + flex-direction: row !important; + } + .flex#{$infix}-column { + flex-direction: column !important; + } + .flex#{$infix}-row-reverse { + flex-direction: row-reverse !important; + } + .flex#{$infix}-column-reverse { + flex-direction: column-reverse !important; + } + + .flex#{$infix}-wrap { + flex-wrap: wrap !important; + } + .flex#{$infix}-nowrap { + flex-wrap: nowrap !important; + } + .flex#{$infix}-wrap-reverse { + flex-wrap: wrap-reverse !important; + } + .flex#{$infix}-fill { + flex: 1 1 auto !important; + } + .flex#{$infix}-grow-0 { + flex-grow: 0 !important; + } + .flex#{$infix}-grow-1 { + flex-grow: 1 !important; + } + .flex#{$infix}-shrink-0 { + flex-shrink: 0 !important; + } + .flex#{$infix}-shrink-1 { + flex-shrink: 1 !important; + } + + .justify-content#{$infix}-start { + justify-content: flex-start !important; + } + .justify-content#{$infix}-end { + justify-content: flex-end !important; + } + .justify-content#{$infix}-center { + justify-content: center !important; + } + .justify-content#{$infix}-between { + justify-content: space-between !important; + } + .justify-content#{$infix}-around { + justify-content: space-around !important; + } + + .align-items#{$infix}-start { + align-items: flex-start !important; + } + .align-items#{$infix}-end { + align-items: flex-end !important; + } + .align-items#{$infix}-center { + align-items: center !important; + } + .align-items#{$infix}-baseline { + align-items: baseline !important; + } + .align-items#{$infix}-stretch { + align-items: stretch !important; + } + + .align-content#{$infix}-start { + align-content: flex-start !important; + } + .align-content#{$infix}-end { + align-content: flex-end !important; + } + .align-content#{$infix}-center { + align-content: center !important; + } + .align-content#{$infix}-between { + align-content: space-between !important; + } + .align-content#{$infix}-around { + align-content: space-around !important; + } + .align-content#{$infix}-stretch { + align-content: stretch !important; + } + + .align-self#{$infix}-auto { + align-self: auto !important; + } + .align-self#{$infix}-start { + align-self: flex-start !important; + } + .align-self#{$infix}-end { + align-self: flex-end !important; + } + .align-self#{$infix}-center { + align-self: center !important; + } + .align-self#{$infix}-baseline { + align-self: baseline !important; + } + .align-self#{$infix}-stretch { + align-self: stretch !important; + } } } diff --git a/src/assets/sass/black-dashboard/bootstrap/utilities/_float.scss b/src/assets/sass/black-dashboard/bootstrap/utilities/_float.scss index 01655e9a..1fe35eff 100644 --- a/src/assets/sass/black-dashboard/bootstrap/utilities/_float.scss +++ b/src/assets/sass/black-dashboard/bootstrap/utilities/_float.scss @@ -2,8 +2,14 @@ @include media-breakpoint-up($breakpoint) { $infix: breakpoint-infix($breakpoint, $grid-breakpoints); - .float#{$infix}-left { @include float-left; } - .float#{$infix}-right { @include float-right; } - .float#{$infix}-none { @include float-none; } + .float#{$infix}-left { + @include float-left; + } + .float#{$infix}-right { + @include float-right; + } + .float#{$infix}-none { + @include float-none; + } } } diff --git a/src/assets/sass/black-dashboard/bootstrap/utilities/_position.scss b/src/assets/sass/black-dashboard/bootstrap/utilities/_position.scss index 9ecdeeb9..d4adc8fe 100644 --- a/src/assets/sass/black-dashboard/bootstrap/utilities/_position.scss +++ b/src/assets/sass/black-dashboard/bootstrap/utilities/_position.scss @@ -7,7 +7,9 @@ $positions: static, relative, absolute, fixed, sticky; @each $position in $positions { - .position-#{$position} { position: $position !important; } + .position-#{$position} { + position: $position !important; + } } // Shorthand diff --git a/src/assets/sass/black-dashboard/bootstrap/utilities/_shadows.scss b/src/assets/sass/black-dashboard/bootstrap/utilities/_shadows.scss index f5d03fcd..243a9698 100644 --- a/src/assets/sass/black-dashboard/bootstrap/utilities/_shadows.scss +++ b/src/assets/sass/black-dashboard/bootstrap/utilities/_shadows.scss @@ -1,6 +1,14 @@ // stylelint-disable declaration-no-important -.shadow-sm { box-shadow: $box-shadow-sm !important; } -.shadow { box-shadow: $box-shadow !important; } -.shadow-lg { box-shadow: $box-shadow-lg !important; } -.shadow-none { box-shadow: none !important; } +.shadow-sm { + box-shadow: $box-shadow-sm !important; +} +.shadow { + box-shadow: $box-shadow !important; +} +.shadow-lg { + box-shadow: $box-shadow-lg !important; +} +.shadow-none { + box-shadow: none !important; +} diff --git a/src/assets/sass/black-dashboard/bootstrap/utilities/_sizing.scss b/src/assets/sass/black-dashboard/bootstrap/utilities/_sizing.scss index e95a4db3..5737d46e 100644 --- a/src/assets/sass/black-dashboard/bootstrap/utilities/_sizing.scss +++ b/src/assets/sass/black-dashboard/bootstrap/utilities/_sizing.scss @@ -4,9 +4,15 @@ @each $prop, $abbrev in (width: w, height: h) { @each $size, $length in $sizes { - .#{$abbrev}-#{$size} { #{$prop}: $length !important; } + .#{$abbrev}-#{$size} { + #{$prop}: $length !important; + } } } -.mw-100 { max-width: 100% !important; } -.mh-100 { max-height: 100% !important; } +.mw-100 { + max-width: 100% !important; +} +.mh-100 { + max-height: 100% !important; +} diff --git a/src/assets/sass/black-dashboard/bootstrap/utilities/_spacing.scss b/src/assets/sass/black-dashboard/bootstrap/utilities/_spacing.scss index b2e2354b..e7f07715 100644 --- a/src/assets/sass/black-dashboard/bootstrap/utilities/_spacing.scss +++ b/src/assets/sass/black-dashboard/bootstrap/utilities/_spacing.scss @@ -8,8 +8,9 @@ @each $prop, $abbrev in (margin: m, padding: p) { @each $size, $length in $spacers { - - .#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; } + .#{$abbrev}#{$infix}-#{$size} { + #{$prop}: $length !important; + } .#{$abbrev}t#{$infix}-#{$size}, .#{$abbrev}y#{$infix}-#{$size} { #{$prop}-top: $length !important; @@ -30,7 +31,9 @@ } // Some special margin utils - .m#{$infix}-auto { margin: auto !important; } + .m#{$infix}-auto { + margin: auto !important; + } .mt#{$infix}-auto, .my#{$infix}-auto { margin-top: auto !important; diff --git a/src/assets/sass/black-dashboard/bootstrap/utilities/_text.scss b/src/assets/sass/black-dashboard/bootstrap/utilities/_text.scss index 9d96c465..cb972ccf 100644 --- a/src/assets/sass/black-dashboard/bootstrap/utilities/_text.scss +++ b/src/assets/sass/black-dashboard/bootstrap/utilities/_text.scss @@ -4,13 +4,21 @@ // Text // -.text-monospace { font-family: $font-family-monospace; } +.text-monospace { + font-family: $font-family-monospace; +} // Alignment -.text-justify { text-align: justify !important; } -.text-nowrap { white-space: nowrap !important; } -.text-truncate { @include text-truncate; } +.text-justify { + text-align: justify !important; +} +.text-nowrap { + white-space: nowrap !important; +} +.text-truncate { + @include text-truncate; +} // Responsive alignment @@ -18,38 +26,68 @@ @include media-breakpoint-up($breakpoint) { $infix: breakpoint-infix($breakpoint, $grid-breakpoints); - .text#{$infix}-left { text-align: left !important; } - .text#{$infix}-right { text-align: right !important; } - .text#{$infix}-center { text-align: center !important; } + .text#{$infix}-left { + text-align: left !important; + } + .text#{$infix}-right { + text-align: right !important; + } + .text#{$infix}-center { + text-align: center !important; + } } } // Transformation -.text-lowercase { text-transform: lowercase !important; } -.text-uppercase { text-transform: uppercase !important; } -.text-capitalize { text-transform: capitalize !important; } +.text-lowercase { + text-transform: lowercase !important; +} +.text-uppercase { + text-transform: uppercase !important; +} +.text-capitalize { + text-transform: capitalize !important; +} // Weight and italics -.font-weight-light { font-weight: $font-weight-light !important; } -.font-weight-normal { font-weight: $font-weight-normal !important; } -.font-weight-bold { font-weight: $font-weight-bold !important; } -.font-italic { font-style: italic !important; } +.font-weight-light { + font-weight: $font-weight-light !important; +} +.font-weight-normal { + font-weight: $font-weight-normal !important; +} +.font-weight-bold { + font-weight: $font-weight-bold !important; +} +.font-italic { + font-style: italic !important; +} // Contextual colors -.text-white { color: $white !important; } +.text-white { + color: $white !important; +} @each $color, $value in $theme-colors { @include text-emphasis-variant(".text-#{$color}", $value); } -.text-body { color: $body-color !important; } -.text-muted { color: $text-muted !important; } +.text-body { + color: $body-color !important; +} +.text-muted { + color: $text-muted !important; +} -.text-black-50 { color: rgba($black, .5) !important; } -.text-white-50 { color: rgba($white, .5) !important; } +.text-black-50 { + color: rgba($black, 0.5) !important; +} +.text-white-50 { + color: rgba($white, 0.5) !important; +} // Misc diff --git a/src/assets/sass/black-dashboard/custom/_alerts.scss b/src/assets/sass/black-dashboard/custom/_alerts.scss index 4ba45ef4..c0ee8423 100644 --- a/src/assets/sass/black-dashboard/custom/_alerts.scss +++ b/src/assets/sass/black-dashboard/custom/_alerts.scss @@ -1,89 +1,89 @@ -.alert{ - border: 0; +.alert { + border: 0; + color: $white; + + .alert-link { color: $white; + } - .alert-link{ - color: $white; - } + &.alert-success { + background-color: darken($success, 10%); + } - &.alert-success{ - background-color: darken($success, 10%); - } + i.fa, + i.tim-icons { + font-size: $font-paragraph; + } - i.fa, - i.tim-icons{ - font-size: $font-paragraph; - } - - .close{ - color: $white; - opacity: .9; - text-shadow: none; - line-height: 0; - outline: 0; - } + .close { + color: $white; + opacity: 0.9; + text-shadow: none; + line-height: 0; + outline: 0; + } - span[data-notify="icon"]{ - font-size: 22px; - display: block; - left: 19px; - position: absolute; - top: 50%; - margin-top: -11px; - } + span[data-notify="icon"] { + font-size: 22px; + display: block; + left: 19px; + position: absolute; + top: 50%; + margin-top: -11px; + } - button.close{ - position: absolute; - right: 15px; - top: 50%; - margin-top: -13px; - width: 25px; - height: 25px; - padding: 3px; - } + button.close { + position: absolute; + right: 15px; + top: 50%; + margin-top: -13px; + width: 25px; + height: 25px; + padding: 3px; + } - .close ~ span{ - display: block; - max-width: 89%; - } + .close ~ span { + display: block; + max-width: 89%; + } - &.alert-with-icon{ - padding-left: 65px; - } + &.alert-with-icon { + padding-left: 65px; + } } .alert-dismissible { - .close { - top: 50%; - right: $alert-padding-x; - padding: 0; - transform: translateY(-50%); - color: rgba($white, .6); - opacity: 1; + .close { + top: 50%; + right: $alert-padding-x; + padding: 0; + transform: translateY(-50%); + color: rgba($white, 0.6); + opacity: 1; - &:hover, - &:focus { - color: rgba($white, .9); - opacity: 1 !important; - } + &:hover, + &:focus { + color: rgba($white, 0.9); + opacity: 1 !important; + } - @include media-breakpoint-down(xs) { - top: 1rem; - right: .5rem; - } + @include media-breakpoint-down(xs) { + top: 1rem; + right: 0.5rem; + } - &>span:not(.sr-only) { - font-size: 1.5rem; - background-color: transparent; - color: rgba($white, .6); - } + & > span:not(.sr-only) { + font-size: 1.5rem; + background-color: transparent; + color: rgba($white, 0.6); + } - &:hover, - &:focus { - &>span:not(.sr-only) { - background-color: transparent; - color: rgba($white, .9); - } - } + &:hover, + &:focus { + & > span:not(.sr-only) { + background-color: transparent; + color: rgba($white, 0.9); + } } + } } diff --git a/src/assets/sass/black-dashboard/custom/_buttons.scss b/src/assets/sass/black-dashboard/custom/_buttons.scss index 2b396e04..b84faf28 100644 --- a/src/assets/sass/black-dashboard/custom/_buttons.scss +++ b/src/assets/sass/black-dashboard/custom/_buttons.scss @@ -1,96 +1,95 @@ .btn, -.navbar .navbar-nav > a.btn{ - border-width: $border-thick; - border: none; - position: relative; - overflow: hidden; - margin:4px 1px; - border-radius: $border-radius-lg; - cursor: pointer; +.navbar .navbar-nav > a.btn { + border-width: $border-thick; + border: none; + position: relative; + overflow: hidden; + margin: 4px 1px; + border-radius: $border-radius-lg; + cursor: pointer; + + @include btn-styles($default, $default-states); + + &:hover, + &:focus { + @include opacity(1); + outline: 0 !important; + } + &:active, + &.active, + .open > &.dropdown-toggle { + @include box-shadow(none); + outline: 0 !important; + } - @include btn-styles($default, $default-states); + .badge { + margin: 0; + } - &:hover, - &:focus{ - @include opacity(1); - outline: 0 !important; - } - &:active, - &.active, - .open > &.dropdown-toggle { - @include box-shadow(none); - outline: 0 !important; - } + &.btn-icon { + // see above for color variations + height: $icon-size-regular; + min-width: $icon-size-regular; + width: $icon-size-regular; + padding: 0; + font-size: $icon-font-size-regular; + overflow: hidden; + position: relative; + line-height: normal; - .badge{ - margin: 0; + &.btn-simple { + padding: 0; } - &.btn-icon { - // see above for color variations - height: $icon-size-regular; - min-width: $icon-size-regular; - width: $icon-size-regular; - padding: 0; - font-size: $icon-font-size-regular; - overflow: hidden; - position: relative; - line-height: normal; - - &.btn-simple{ - padding: 0; - } - - &.btn-sm{ - height: $icon-size-sm; - min-width: $icon-size-sm; - width: $icon-size-sm; - - .fa, - .far, - .fas, - .tim-icons{ - font-size: $icon-font-size-sm; - } - } - - &.btn-lg{ - height: $icon-size-lg; - min-width: $icon-size-lg; - width: $icon-size-lg; - - .fa, - .far, - .fas, - .tim-icons{ - font-size: $icon-font-size-lg; - } - } - - &:not(.btn-footer) .tim-icons, - &:not(.btn-footer) .fa, - &:not(.btn-footer) .far, - &:not(.btn-footer) .fas{ - position: absolute; - font-size: 1em; - top: 50%; - left: 50%; - transform: translate(-12px, -12px); - line-height: 1.5626rem; - width: 24px; - } - + &.btn-sm { + height: $icon-size-sm; + min-width: $icon-size-sm; + width: $icon-size-sm; + + .fa, + .far, + .fas, + .tim-icons { + font-size: $icon-font-size-sm; + } } - &:not(.btn-icon) .tim-icons{ - position: relative; - top: 1px; + &.btn-lg { + height: $icon-size-lg; + min-width: $icon-size-lg; + width: $icon-size-lg; + + .fa, + .far, + .fas, + .tim-icons { + font-size: $icon-font-size-lg; + } } - span{ - position: relative; - display: block; + &:not(.btn-footer) .tim-icons, + &:not(.btn-footer) .fa, + &:not(.btn-footer) .far, + &:not(.btn-footer) .fas { + position: absolute; + font-size: 1em; + top: 50%; + left: 50%; + transform: translate(-12px, -12px); + line-height: 1.5626rem; + width: 24px; } + } + + &:not(.btn-icon) .tim-icons { + position: relative; + top: 1px; + } + + span { + position: relative; + display: block; + } &.btn-link.dropdown-toggle { color: $dark-gray; @@ -103,68 +102,72 @@ // Apply the mixin to the buttons // .btn-default { @include btn-styles($default-color, $default-states-color); } -.btn-primary { @include btn-styles($primary, $primary-states); - - } -.btn-success { @include btn-styles($success, $success-states); - - } -.btn-info { @include btn-styles($info, $info-states); - - } -.btn-warning { @include btn-styles($warning, $warning-states); - &:not(:disabled):not(.disabled):active{ - color: $white; - } - } -.btn-danger { @include btn-styles($danger, $danger-states); - - } -.btn-neutral { @include btn-styles($white, $white); } - -.btn{ - &:disabled, - &[disabled], - &.disabled{ - @include opacity(.5); - pointer-events: none; - } +.btn-primary { + @include btn-styles($primary, $primary-states); } -.btn-simple{ - border: $border; - border-color: $default; - box-shadow: none; - padding: $padding-btn-vertical - 1 $padding-round-horizontal - 1; - background-color: $transparent-bg; +.btn-success { + @include btn-styles($success, $success-states); +} +.btn-info { + @include btn-styles($info, $info-states); +} +.btn-warning { + @include btn-styles($warning, $warning-states); + &:not(:disabled):not(.disabled):active { + color: $white; + } +} +.btn-danger { + @include btn-styles($danger, $danger-states); +} +.btn-neutral { + @include btn-styles($white, $white); +} + +.btn { + &:disabled, + &[disabled], + &.disabled { + @include opacity(0.5); + pointer-events: none; + } +} +.btn-simple { + border: $border; + border-color: $default; + box-shadow: none; + padding: $padding-btn-vertical - 1 $padding-round-horizontal - 1; + background-color: $transparent-bg; } .btn-simple, -.btn-link{ - &.disabled, - &:disabled, - &[disabled], - fieldset[disabled] & { - &, - &:hover, - &:focus, - &.focus, - &:active, - &.active { - background: $transparent-bg; - } +.btn-link { + &.disabled, + &:disabled, + &[disabled], + fieldset[disabled] & { + &, + &:hover, + &:focus, + &.focus, + &:active, + &.active { + background: $transparent-bg; } + } } -.btn:not(:disabled):not(.disabled):active, .btn:not(:disabled):not(.disabled).active{ - box-shadow: 2px 2px 6px rgba(0,0,0,.4); +.btn:not(:disabled):not(.disabled):active, +.btn:not(:disabled):not(.disabled).active { + box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4); } -.btn-link{ - border: $none; - box-shadow: none; - padding: $padding-base-vertical $padding-base-horizontal; - background: $transparent-bg; - color: $gray-300; - font-weight: $font-weight-bold; +.btn-link { + border: $none; + box-shadow: none; + padding: $padding-base-vertical $padding-base-horizontal; + background: $transparent-bg; + color: $gray-300; + font-weight: $font-weight-bold; &:hover { box-shadow: none !important; @@ -172,52 +175,61 @@ } } -.btn-lg{ - @include btn-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-base, $border-radius-lg); +.btn-lg { + @include btn-size( + $btn-padding-y-lg, + $btn-padding-x-lg, + $font-size-base, + $border-radius-lg + ); } -.btn-sm{ - @include btn-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-base, $border-radius-sm); +.btn-sm { + @include btn-size( + $btn-padding-y-sm, + $btn-padding-x-sm, + $font-size-base, + $border-radius-sm + ); } .btn-wd { - min-width: 140px; + min-width: 140px; } -.btn-group.select{ - width: 100%; +.btn-group.select { + width: 100%; } .btn-group { .btn.active { - box-shadow: 2px 2px 6px rgba(0,0,0,.4); + box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4); transform: translateY(-1px); -webkit-transform: translateY(-1px); } } - -.btn-group.select .btn{ - text-align: left; +.btn-group.select .btn { + text-align: left; } -.btn-group.select .caret{ - position: absolute; - top: 50%; - margin-top: -1px; - right: 8px; +.btn-group.select .caret { + position: absolute; + top: 50%; + margin-top: -1px; + right: 8px; } .btn-group .btn.active { - box-shadow: 2px 2px 6px rgba(0,0,0,.4); - transform: translateY(-1px); - -webkit-transform: translateY(-1px); + box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4); + transform: translateY(-1px); + -webkit-transform: translateY(-1px); } -.btn-round{ - border-width: $border-thin; - border-radius: $btn-round-radius; +.btn-round { + border-width: $border-thin; + border-radius: $btn-round-radius; - &.btn-simple{ - padding: $padding-btn-vertical - 1 $padding-round-horizontal - 1; - } + &.btn-simple { + padding: $padding-btn-vertical - 1 $padding-round-horizontal - 1; + } } .no-caret { @@ -229,10 +241,10 @@ .btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active, .show > .btn-secondary.dropdown-toggle { - color: $white; + color: $white; } .btn-group label.btn.active { - transform: translateY(0); - -webkit-transform: translateY(0); + transform: translateY(0); + -webkit-transform: translateY(0); } diff --git a/src/assets/sass/black-dashboard/custom/_card.scss b/src/assets/sass/black-dashboard/custom/_card.scss index ba1a2034..3d1e9720 100644 --- a/src/assets/sass/black-dashboard/custom/_card.scss +++ b/src/assets/sass/black-dashboard/custom/_card.scss @@ -1,231 +1,231 @@ -.card{ - background: $card-black-background; - border: 0; - position: relative; - width: 100%; - margin-bottom: 30px; - box-shadow: $box-shadow; +.card { + background: $card-black-background; + border: 0; + position: relative; + width: 100%; + margin-bottom: 30px; + box-shadow: $box-shadow; + + label { + color: rgba($white, 0.6); + } + .card-title { + margin-bottom: 0.75rem; + } - label{ - color: rgba($white, 0.6); + .card-body { + padding: 15px; + + &.table-full-width { + padding-left: 0; + padding-right: 0; } .card-title { - margin-bottom: .75rem; + color: $white; + text-transform: inherit; + font-weight: $font-weight-light; + margin-bottom: 0.75rem; } - .card-body{ - padding: 15px; - - &.table-full-width{ - padding-left: 0; - padding-right: 0; - } - - .card-title{ - color: $white; - text-transform: inherit; - font-weight: $font-weight-light; - margin-bottom: .75rem; - } + .card-description, + .card-category { + color: rgba($white, 0.6); + } + } - .card-description, .card-category{ - color: rgba($white, 0.6); - } + .card-header { + &:not([data-background-color]) { + background-color: transparent; + } + padding: 15px 15px 0; + border: 0; + color: rgba($white, 0.8); + .card-title { + color: $white; + font-weight: 100; } - .card-header{ - &:not([data-background-color]){ - background-color: transparent; - } - padding: 15px 15px 0; - border: 0; - color: rgba($white,0.8); + .card-category { + color: $dark-gray; + margin-bottom: 5px; + font-weight: 300; + } + } - .card-title{ - color: $white; - font-weight: 100; - } + .map { + border-radius: $border-radius-sm; - .card-category{ - color: $dark-gray; - margin-bottom: 5px; - font-weight: 300; - } + &.map-big { + height: 420px; } + } - .map{ - border-radius: $border-radius-sm; + &.card-white { + background: $white; - &.map-big{ - height: 420px; - } + .card-title { + color: $black; + } + .card-category, + .stats { + color: $card-stats-gray; } - &.card-white{ - background: $white; + //style for inputs - .card-title{ - color: $black; - } - .card-category, .stats{ - color: $card-stats-gray; + @include form-control-placeholder(rgba($black, 0.4), 1); + .has-danger { + .form-control, + .input-group-prepend .input-group-text { + border-color: $danger-states; } + } - //style for inputs - - @include form-control-placeholder(rgba($black,0.4), 1); - .has-danger{ - .form-control, .input-group-prepend .input-group-text{ - border-color: $danger-states; - } - } - - .input-group-prepend .input-group-text{ - border-color: rgba($black-states,0.2); - color: $black-states; - } - - .form-control{ - color: $black; - border-color: rgba($black-states,0.2); - &:focus{ - border-color: $primary; - } - } - label:not(.btn){ - color: $default; - } - - .form-group.no-border, - .input-group.no-border { - .form-control, - .form-control + .input-group-prepend .input-group-text, - .form-control + .input-group-append .input-group-text, - .input-group-prepend .input-group-text, - .input-group-append .input-group-text{ - background-color: $opacity-gray-3; - &:focus, - &:active, - &:active{ - background-color: $opacity-gray-5; - } - } - - .form-control { - &:focus { - & + .input-group-prepend .input-group-text, - & + .input-group-append .input-group-text{ - background-color: $transparent-bg; - } - } - } - - - } + .input-group-prepend .input-group-text { + border-color: rgba($black-states, 0.2); + color: $black-states; + } - .input-group[disabled]{ - .input-group-prepend .input-group-text, - .input-group-append .input-group-text{ - background-color: $black; - } + .form-control { + color: $black; + border-color: rgba($black-states, 0.2); + &:focus { + border-color: $primary; } + } + label:not(.btn) { + color: $default; + } - .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control{ - background: $light-gray; - border-color: rgba($black-states,0.3); + .form-group.no-border, + .input-group.no-border { + .form-control, + .form-control + .input-group-prepend .input-group-text, + .form-control + .input-group-append .input-group-text, + .input-group-prepend .input-group-text, + .input-group-append .input-group-text { + background-color: $opacity-gray-3; + &:focus, + &:active, + &:active { + background-color: $opacity-gray-5; + } } - .input-group-focus{ - .input-group-prepend .input-group-text, - .input-group-append .input-group-text, - .form-control{ - background-color: $white; - border-color: $primary; + .form-control { + &:focus { + & + .input-group-prepend .input-group-text, + & + .input-group-append .input-group-text { + background-color: $transparent-bg; } - - &.no-border{ - .input-group-prepend .input-group-text, - .input-group-append .input-group-text{ - - background-color: $opacity-gray-5; - } - } - } - .input-group-prepend .input-group-text { - border-right: none; + } } + } + .input-group[disabled] { + .input-group-prepend .input-group-text, .input-group-append .input-group-text { - border-left: none; + background-color: $black; } + } - .has-danger .form-control:focus, .has-success.input-group-focus .input-group-append .input-group-text, .has-success.input-group-focus .input-group-prepend .input-group-text { - border-color: $danger-states; + .form-control[disabled], + .form-control[readonly], + fieldset[disabled] .form-control { + background: $light-gray; + border-color: rgba($black-states, 0.3); + } + + .input-group-focus { + .input-group-prepend .input-group-text, + .input-group-append .input-group-text, + .form-control { + background-color: $white; + border-color: $primary; } - .has-success .form-control:focus, .has-success.input-group-focus .input-group-append .input-group-text, .has-success.input-group-focus .input-group-prepend .input-group-text { - border-color: darken($success, 10%); + &.no-border { + .input-group-prepend .input-group-text, + .input-group-append .input-group-text { + background-color: $opacity-gray-5; + } } } + .input-group-prepend .input-group-text { + border-right: none; + } - - &.card-plain { - background: transparent; - box-shadow: none; + .input-group-append .input-group-text { + border-left: none; } - .image{ - overflow: hidden; - height: 200px; - position: relative; + .has-danger .form-control:focus, + .has-success.input-group-focus .input-group-append .input-group-text, + .has-success.input-group-focus .input-group-prepend .input-group-text { + border-color: $danger-states; } - .avatar{ - width: 30px; - height: 30px; - overflow: hidden; - border-radius: 50%; - margin-bottom: 15px; + .has-success .form-control:focus, + .has-success.input-group-focus .input-group-append .input-group-text, + .has-success.input-group-focus .input-group-prepend .input-group-text { + border-color: darken($success, 10%); } + } - label{ - font-size: $font-size-sm; - margin-bottom: 5px; + &.card-plain { + background: transparent; + box-shadow: none; + } - } + .image { + overflow: hidden; + height: 200px; + position: relative; + } - .card-footer{ - background-color: transparent; - border: 0; - padding: 15px; + .avatar { + width: 30px; + height: 30px; + overflow: hidden; + border-radius: 50%; + margin-bottom: 15px; + } + label { + font-size: $font-size-sm; + margin-bottom: 5px; + } - .stats{ - i{ - margin-right: 5px; - position: relative; + .card-footer { + background-color: transparent; + border: 0; + padding: 15px; - } - } + .stats { + i { + margin-right: 5px; + position: relative; + } + } - h6{ - margin-bottom: 0; - padding: 7px 0; - } + h6 { + margin-bottom: 0; + padding: 7px 0; } + } } -.card-body{ +.card-body { padding: $card-spacer-y; } @include media-breakpoint-down(sm) { .card.card-chart .card-header { .btn-group-toggle .tim-icons { - font-size: .875rem; + font-size: 0.875rem; top: -1px; } } diff --git a/src/assets/sass/black-dashboard/custom/_checkboxes-radio.scss b/src/assets/sass/black-dashboard/custom/_checkboxes-radio.scss index 68e3683c..bc7188f7 100644 --- a/src/assets/sass/black-dashboard/custom/_checkboxes-radio.scss +++ b/src/assets/sass/black-dashboard/custom/_checkboxes-radio.scss @@ -1,9 +1,9 @@ -.form-check{ - margin-top: .5rem; - padding-left: 0; +.form-check { + margin-top: 0.5rem; + padding-left: 0; } -.form-check .form-check-label{ +.form-check .form-check-label { display: inline-block; position: relative; cursor: pointer; @@ -16,8 +16,8 @@ -ms-transition: color 0.3s linear; transition: color 0.3s linear; } -.radio .form-check-sign{ - padding-left: 28px; +.radio .form-check-sign { + padding-left: 28px; } .form-check-radio.form-check-inline .form-check-label { @@ -26,7 +26,7 @@ } .form-check .form-check-sign::before, -.form-check .form-check-sign::after{ +.form-check .form-check-sign::after { content: " "; display: inline-block; position: absolute; @@ -36,7 +36,7 @@ cursor: pointer; border-radius: 3px; top: 0; - border: 1px solid darken($dark-gray,10%); + border: 1px solid darken($dark-gray, 10%); -webkit-transition: opacity 0.3s linear; -moz-transition: opacity 0.3s linear; -o-transition: opacity 0.3s linear; @@ -45,13 +45,13 @@ } .form-check input[type="checkbox"]:checked + .form-check-sign::before, -.form-check input[type="checkbox"]:checked + .form-check-sign::before{ +.form-check input[type="checkbox"]:checked + .form-check-sign::before { border: none; background-color: $primary; } - .form-check .form-check-sign::after{ - font-family: 'nucleo'; +.form-check .form-check-sign::after { + font-family: "nucleo"; content: "\ea1b"; top: 0px; text-align: center; @@ -65,50 +65,49 @@ .form-check.disabled .form-check-label, .form-check.disabled .form-check-label { - color: $dark-gray; - opacity: .5; - cursor: not-allowed; + color: $dark-gray; + opacity: 0.5; + cursor: not-allowed; } .form-check input[type="checkbox"], -.radio input[type="radio"]{ +.radio input[type="radio"] { opacity: 0; position: absolute; visibility: hidden; } -.form-check input[type="checkbox"]:checked + .form-check-sign::after{ +.form-check input[type="checkbox"]:checked + .form-check-sign::after { opacity: 1; font-size: 10px; margin-top: 0; } - -.form-check input[type="checkbox"]+ .form-check-sign::after{ +.form-check input[type="checkbox"] + .form-check-sign::after { opacity: 0; font-size: 10px; margin-top: 0; } .form-control input[type="checkbox"]:disabled + .form-check-sign::before, -.checkbox input[type="checkbox"]:disabled + .form-check-sign::after{ - cursor: not-allowed; +.checkbox input[type="checkbox"]:disabled + .form-check-sign::after { + cursor: not-allowed; } .form-check input[type="checkbox"]:disabled + .form-check-sign, -.form-check input[type="radio"]:disabled + .form-check-sign{ - pointer-events: none; +.form-check input[type="radio"]:disabled + .form-check-sign { + pointer-events: none; } -.form-check-radio .form-check-label{ +.form-check-radio .form-check-label { padding-top: 3px; } .form-check-radio .form-check-sign::before, -.form-check-radio .form-check-sign::after{ +.form-check-radio .form-check-sign::after { content: " "; width: 18px; height: 18px; border-radius: 50%; - border: 1px solid darken($dark-gray,10%); + border: 1px solid darken($dark-gray, 10%); display: inline-block; position: absolute; left: 0px; @@ -123,25 +122,24 @@ .form-check-radio input[type="radio"] + .form-check-sign:after, .form-check-radio input[type="radio"] { - opacity: 0; + opacity: 0; } .form-check-radio input[type="radio"]:checked + .form-check-sign::after { - width: 6px; - height: 6px; - background-color: $primary; - border-color: $primary; - top: 9px; - left: 6px; - opacity: 1; + width: 6px; + height: 6px; + background-color: $primary; + border-color: $primary; + top: 9px; + left: 6px; + opacity: 1; } .form-check-radio input[type="radio"]:checked + .form-check-sign::before { border-color: $primary; } - -.form-check-radio input[type="radio"]:checked + .form-check-sign::after{ - opacity: 1; +.form-check-radio input[type="radio"]:checked + .form-check-sign::after { + opacity: 1; } .form-check-radio input[type="radio"]:disabled + .form-check-sign { diff --git a/src/assets/sass/black-dashboard/custom/_dropdown.scss b/src/assets/sass/black-dashboard/custom/_dropdown.scss index 34f555ce..24a356a9 100644 --- a/src/assets/sass/black-dashboard/custom/_dropdown.scss +++ b/src/assets/sass/black-dashboard/custom/_dropdown.scss @@ -1,359 +1,369 @@ .dropdown-menu { - border: 0; - box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.2); - border-radius: $border-radius-xs; - @include transitions($fast-transition-time, $transition-linear); + border: 0; + box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.2); + border-radius: $border-radius-xs; + @include transitions($fast-transition-time, $transition-linear); + + &.dropdown-menu-right { + &:before, + &:after { + left: auto; + right: 10px; + } + } - &.dropdown-menu-right { - &:before, &:after { - left:auto; - right: 10px; - } + &.dropdown-black { + background: linear-gradient(to bottom, $black 0%, $black-states 100%); + border: 1px solid $default; + .dropdown-item { + color: rgba(255, 255, 255, 0.7); } - &.dropdown-black { - background: linear-gradient(to bottom, $black 0%, $black-states 100%); - border: 1px solid $default; - .dropdown-item { - color: rgba(255, 255, 255, 0.7); - } + .dropdown-divider { + border-color: $default; + } + + &:before { + color: $black; + z-index: 2; + } + + &:after { + display: inline-block; + position: absolute; + width: 0; + height: 0; + z-index: 1; + vertical-align: middle; + content: ""; + top: -6px; + left: 10px; + right: auto; + color: $default; + border-bottom: 0.4em solid; + border-right: 0.4em solid transparent; + border-left: 0.4em solid transparent; + } - .dropdown-divider { - border-color: $default; + &.dropdown-menu-right { + &:after { + left: auto; + right: 10px; } + } - &:before { - color: $black; + .dropup & { + &:after { + color: $black-states; z-index: 2; } - &:after { + &:before { display: inline-block; position: absolute; width: 0; height: 0; - z-index: 1; vertical-align: middle; content: ""; - top: -6px; - left: 10px; + top: auto; + bottom: -6px; right: auto; - color: $default; - border-bottom: .4em solid; - border-right: .4em solid transparent; - border-left: .4em solid transparent; - } - - &.dropdown-menu-right { - &:after { - left: auto; - right: 10px; - } - } - - .dropup & { - &:after { - color: $black-states; - z-index: 2; - } - - &:before { - display: inline-block; - position: absolute; - width: 0; - height: 0; - vertical-align: middle; - content: ""; - top: auto; - bottom: -6px; - right: auto; - left: 10px; - color: $dark-background; - border-top: .4em solid; - border-right: .4em solid transparent; - border-left: .4em solid transparent; - border-bottom: none; - z-index: 1; - } + left: 10px; + color: $dark-background; + border-top: 0.4em solid; + border-right: 0.4em solid transparent; + border-left: 0.4em solid transparent; + border-bottom: none; + z-index: 1; } } + } - i { - margin-right: 5px; - position: relative; - top: 1px; - } + i { + margin-right: 5px; + position: relative; + top: 1px; + } - .tim-icons { - margin-right: 10px; - position: relative; - top: 4px; - font-size: 18px; - margin-top: -5px; - opacity: .5; - } + .tim-icons { + margin-right: 10px; + position: relative; + top: 4px; + font-size: 18px; + margin-top: -5px; + opacity: 0.5; + } - .dropdown-item { - &.active, - &:active{ - color: inherit; - } + .dropdown-item { + &.active, + &:active { + color: inherit; } + } - .dropup & { - &:before { - display: none; - } - - &:after { - display: inline-block; - position: absolute; - width: 0; - height: 0; - vertical-align: middle; - content: ""; - top: auto; - bottom: -5px; - right: auto; - left: 10px; - color: $white; - border-top: .4em solid; - border-right: .4em solid transparent; - border-left: .4em solid transparent; - border-bottom: none; - } - - &.dropdown-menu-right { - &:after, &:before { - right: 10px; - left: auto; - } - } + .dropup & { + &:before { + display: none; } - - - &:before { + &:after { display: inline-block; position: absolute; width: 0; height: 0; vertical-align: middle; content: ""; - top: -5px; - left: 10px; + top: auto; + bottom: -5px; right: auto; + left: 10px; color: $white; - border-bottom: .4em solid; - border-right: .4em solid transparent; - border-left: .4em solid transparent; + border-top: 0.4em solid; + border-right: 0.4em solid transparent; + border-left: 0.4em solid transparent; + border-bottom: none; } - - &.dropdown-menu-right { - right: 0 !important; - left: auto !important; + &:after, + &:before { + right: 10px; + left: auto; + } } + } - .dropdown-item, - .bootstrap-select &.inner li a { - font-size: $font-size-sm; - padding-top: .6rem; - padding-bottom: .6rem; - margin-top: 5px; - @include transitions($fast-transition-time, $transition-linear); + &:before { + display: inline-block; + position: absolute; + width: 0; + height: 0; + vertical-align: middle; + content: ""; + top: -5px; + left: 10px; + right: auto; + color: $white; + border-bottom: 0.4em solid; + border-right: 0.4em solid transparent; + border-left: 0.4em solid transparent; + } - &:hover, - &:focus { - background-color: $opacity-gray-3; - } + &.dropdown-menu-right { + right: 0 !important; + left: auto !important; + } - &.disabled, - &:disabled { - color: $default-opacity; + .dropdown-item, + .bootstrap-select &.inner li a { + font-size: $font-size-sm; + padding-top: 0.6rem; + padding-bottom: 0.6rem; + margin-top: 5px; + @include transitions($fast-transition-time, $transition-linear); - &:hover, - &:focus { - background-color: transparent; - box-shadow: none; - } - } + &:hover, + &:focus { + background-color: $opacity-gray-3; } + &.disabled, + &:disabled { + color: $default-opacity; - .dropdown-divider { - background-color: $opacity-gray-5; - } - - .dropdown-header:not([href]):not([tabindex]) { - color: $default-opacity; - font-size: $font-size-xs; - text-transform: uppercase; - font-weight: $font-weight-bold; + &:hover, + &:focus { + background-color: transparent; + box-shadow: none; + } } + } - &.dropdown-primary { - @include dropdown-colors(darken($primary, 3%),$opacity-8,$white, $opacity-2); - } + .dropdown-divider { + background-color: $opacity-gray-5; + } - &.dropdown-info { - @include dropdown-colors(darken($info, 3%),$opacity-8,$white, $opacity-2); - } + .dropdown-header:not([href]):not([tabindex]) { + color: $default-opacity; + font-size: $font-size-xs; + text-transform: uppercase; + font-weight: $font-weight-bold; + } - &.dropdown-danger { - @include dropdown-colors(darken($danger, 3%),$opacity-8,$white, $opacity-2); - } + &.dropdown-primary { + @include dropdown-colors( + darken($primary, 3%), + $opacity-8, + $white, + $opacity-2 + ); + } - &.dropdown-success { - @include dropdown-colors(darken($success, 3%),$opacity-8,$white, $opacity-2); - } + &.dropdown-info { + @include dropdown-colors(darken($info, 3%), $opacity-8, $white, $opacity-2); + } - &.dropdown-warning { - @include dropdown-colors(darken($warning, 3%),$opacity-8,$white, $opacity-2); - } + &.dropdown-danger { + @include dropdown-colors( + darken($danger, 3%), + $opacity-8, + $white, + $opacity-2 + ); + } - .dropdown &, - .dropup:not(.bootstrap-select) &, - .bootstrap-select &:not(.inner), - &.bootstrap-datetimepicker-widget.bottom { - @include transform-translate-y-dropdown(-20px); - visibility: hidden; - display: block; - @include opacity(0); - top: 100% !important; - } + &.dropdown-success { + @include dropdown-colors( + darken($success, 3%), + $opacity-8, + $white, + $opacity-2 + ); + } - &.bootstrap-datetimepicker-widget.top { - @include transform-translate-y-dropdown(-20px); - visibility: hidden; - display: block; - @include opacity(0); - } + &.dropdown-warning { + @include dropdown-colors( + darken($warning, 3%), + $opacity-8, + $white, + $opacity-2 + ); + } - &.bootstrap-datetimepicker-widget.top, - &.bootstrap-datetimepicker-widget.bottom { - @include transform-translate-y-dropdown(-20px); - } + .dropdown &, + .dropup:not(.bootstrap-select) &, + .bootstrap-select &:not(.inner), + &.bootstrap-datetimepicker-widget.bottom { + @include transform-translate-y-dropdown(-20px); + visibility: hidden; + display: block; + @include opacity(0); + top: 100% !important; + } - .bootstrap-select.dropup &:not(.inner){ - @include transform-translate-y-dropdown(25px); - } + &.bootstrap-datetimepicker-widget.top { + @include transform-translate-y-dropdown(-20px); + visibility: hidden; + display: block; + @include opacity(0); + } - .dropup:not(.bootstrap-select) &{ - @include transform-translate-y-dropdown(20px); - top: auto !important; - bottom: 100%; - } + &.bootstrap-datetimepicker-widget.top, + &.bootstrap-datetimepicker-widget.bottom { + @include transform-translate-y-dropdown(-20px); + } - .dropdown.show &, - .bootstrap-select.show &:not(.inner), - &.bootstrap-datetimepicker-widget.top.open, - &.bootstrap-datetimepicker-widget.bottom.open, - .dropup.show:not(.bootstrap-select) &, - .navbar .dropdown.show &{ - @include opacity(1); - visibility: visible; - @include transform-translate-y-dropdown(1px); - } + .bootstrap-select.dropup &:not(.inner) { + @include transform-translate-y-dropdown(25px); + } - &.bootstrap-datetimepicker-widget.top.open, - &.bootstrap-datetimepicker-widget.bottom.open{ - @include transform-translate-y-dropdown(0px); - } + .dropup:not(.bootstrap-select) & { + @include transform-translate-y-dropdown(20px); + top: auto !important; + bottom: 100%; + } - .dropup.show:not(.bootstrap-select) &{ - @include transform-translate-y-dropdown(-2px); - } + .dropdown.show &, + .bootstrap-select.show &:not(.inner), + &.bootstrap-datetimepicker-widget.top.open, + &.bootstrap-datetimepicker-widget.bottom.open, + .dropup.show:not(.bootstrap-select) &, + .navbar .dropdown.show & { + @include opacity(1); + visibility: visible; + @include transform-translate-y-dropdown(1px); + } - &.dropdown-navbar{ - left: -80px; - &:before, &:after{ - left: auto; - right: 17px; - } - } + &.bootstrap-datetimepicker-widget.top.open, + &.bootstrap-datetimepicker-widget.bottom.open { + @include transform-translate-y-dropdown(0px); + } + .dropup.show:not(.bootstrap-select) & { + @include transform-translate-y-dropdown(-2px); + } + &.dropdown-navbar { + left: -80px; + &:before, + &:after { + left: auto; + right: 17px; + } + } } -.btn{ - cursor: pointer; +.btn { + cursor: pointer; - &.dropdown-toggle[data-toggle="dropdown"]{ - padding:10px; - margin: 0; - margin-bottom: 5px; - - &:after{ - content: ""; - margin-left: 5px; - } + &.dropdown-toggle[data-toggle="dropdown"] { + padding: 10px; + margin: 0; + margin-bottom: 5px; + &:after { + content: ""; + margin-left: 5px; } + } - span.bs-caret{ - display: none; - } + span.bs-caret { + display: none; + } - &.btn-link{ - &.dropdown-toggle{ - height: 22px; - padding: 0; - margin-right: 5px; - } + &.btn-link { + &.dropdown-toggle { + height: 22px; + padding: 0; + margin-right: 5px; } + } } -.dropdown-toggle:after{ - +.dropdown-toggle:after { content: unset; - } .btn:not(:disabled):not(.disabled).active:focus, - .btn:not(:disabled):not(.disabled):active:focus, - .show>.btn.dropdown-toggle:focus{ - box-shadow: none; - } - +.btn:not(:disabled):not(.disabled):active:focus, +.show > .btn.dropdown-toggle:focus { + box-shadow: none; +} // Dropown: Sizes .dropdown-menu-sm { - min-width: 100px; - border: $border-radius-lg; + min-width: 100px; + border: $border-radius-lg; } .dropdown-menu-lg { - min-width: 260px; - border-radius: $border-radius-lg; + min-width: 260px; + border-radius: $border-radius-lg; } .dropdown-menu-xl { - min-width: 450px; - border-radius: $border-radius-lg; + min-width: 450px; + border-radius: $border-radius-lg; } -@media screen and (max-width: 991px){ - .dropdown-toggle:after{ +@media screen and (max-width: 991px) { + .dropdown-toggle:after { display: inline-block; width: 0; height: 0; - margin-left: .255em; - vertical-align: .255em; + margin-left: 0.255em; + vertical-align: 0.255em; content: ""; - border-top: .3em solid; - border-right: .3em solid transparent; + border-top: 0.3em solid; + border-right: 0.3em solid transparent; border-bottom: 0; - border-left: .3em solid transparent; + border-left: 0.3em solid transparent; } - } - -@media screen and (min-width: 992px){ - .dropdown-menu .dropdown-item{ - color: $dark-gray; +@media screen and (min-width: 992px) { + .dropdown-menu .dropdown-item { + color: $dark-gray; } } diff --git a/src/assets/sass/black-dashboard/custom/_fixed-plugin.scss b/src/assets/sass/black-dashboard/custom/_fixed-plugin.scss index 74eb2843..ff14adf0 100644 --- a/src/assets/sass/black-dashboard/custom/_fixed-plugin.scss +++ b/src/assets/sass/black-dashboard/custom/_fixed-plugin.scss @@ -1,324 +1,321 @@ -.fixed-plugin{ - position: fixed; - right: 0; - width: 64px; - background: rgba(0,0,0,.3); - z-index: 1031; - border-radius: 8px 0 0 8px; +.fixed-plugin { + position: fixed; + right: 0; + width: 64px; + background: rgba(0, 0, 0, 0.3); + z-index: 1031; + border-radius: 8px 0 0 8px; + text-align: center; + top: 130px; + + li > a, + .badge { + transition: all 0.34s; + -webkit-transition: all 0.34s; + -moz-transition: all 0.34s; + } + + .fa-cog { + color: $white; + padding: 10px; + border-radius: 0 0 6px 6px; + width: auto; + } + + .dropdown-menu { + right: 80px; + left: auto !important; + top: -52px !important; + width: 290px; + border-radius: 0.1875rem; + padding: 0 10px; + background: linear-gradient($black, $black-states); + } + + .dropdown .dropdown-menu .tim-icons { + top: 5px; + } + + .dropdown-menu:after, + .dropdown-menu:before { + right: 10px; + margin-left: auto; + left: auto; + } + + .fa-circle-thin { + color: $white; + } + + .active .fa-circle-thin { + color: $active-blue; + } + + .dropdown-menu > .active > a, + .dropdown-menu > .active > a:hover, + .dropdown-menu > .active > a:focus { + color: $active-gray; text-align: center; - top: 130px; - - li > a, - .badge{ - transition: all .34s; - -webkit-transition: all .34s; - -moz-transition: all .34s; - } - - .fa-cog{ - color: $white; - padding: 10px; - border-radius: 0 0 6px 6px; - width: auto; - } - - .dropdown-menu{ - right: 80px; - left: auto !important; - top: -52px !important; - width: 290px; - border-radius: 0.1875rem; - padding: 0 10px; - background: linear-gradient($black, $black-states); - } - - .dropdown .dropdown-menu .tim-icons{ - top: 5px; - } - - .dropdown-menu:after, - .dropdown-menu:before{ - right: 10px; - margin-left: auto; - left: auto; + } + + img { + border-radius: 0; + width: 100%; + height: 100px; + margin: 0 auto; + } + + .dropdown-menu li > a:hover, + .dropdown-menu li > a:focus { + box-shadow: none; + } + + .badge { + border: 2px solid $white; + border-radius: 50%; + cursor: pointer; + display: inline-block; + height: 23px; + margin-right: 5px; + position: relative; + width: 23px; + } + + .badge.active, + .badge:hover { + border-color: $black-states; + } + + .light-badge, + .dark-badge { + margin: 0; + border: 1px solid $info; + &:hover { + border: 1px solid $info; } + } - .fa-circle-thin{ - color: $white; + .light-badge { + background: $white; + &:hover { + background: $white; } + } - .active .fa-circle-thin{ - color: $active-blue; + .dark-badge { + background: $black; + &:hover { + background: $black; } - - .dropdown-menu > .active > a, - .dropdown-menu > .active > a:hover, - .dropdown-menu > .active > a:focus{ - color: $active-gray; - text-align: center; + } + + h5 { + margin: 10px; + } + + .dropdown-menu li { + display: block; + padding: 18px 2px; + width: 25%; + float: left; + } + + li.adjustments-line, + li.header-title, + li.button-container { + width: 100%; + height: 50px; + min-height: inherit; + } + + li.button-container { + height: auto; + + div { + margin-bottom: 5px; } + } - img{ - border-radius: 0; - width: 100%; - height: 100px; - margin: 0 auto; - } + #sharrreTitle { + text-align: center; + padding: 10px 0; + height: 50px; + } + + li.header-title { + color: $white; + height: 30px; + line-height: 25px; + font-size: 12px; + font-weight: 600; + text-align: center; + text-transform: uppercase; + } - .dropdown-menu li > a:hover, - .dropdown-menu li > a:focus{ - box-shadow: none; - } + .adjustments-line { + a { + color: transparent; - .badge{ - border: 2px solid $white; - border-radius: 50%; - cursor: pointer; - display: inline-block; - height: 23px; - margin-right: 5px; + .badge-colors { position: relative; - width: 23px; - } - - .badge.active, - .badge:hover{ - border-color: $black-states; - } - - .light-badge, .dark-badge{ - margin:0; - border: 1px solid $info; - &:hover{ - border: 1px solid $info; + top: -2px; } - } - .light-badge{ - background: $white; - &:hover{ - background: $white; + a:hover, + a:focus { + color: transparent; } } - .dark-badge{ - background: $black; - &:hover{ - background: $black; - } - } + .togglebutton { + text-align: center; - h5{ - margin: 10px; - } + .label-switch { + position: relative; + left: -10px; + font-size: $font-size-xs; + color: $white; - .dropdown-menu li{ - display: block; - padding: 18px 2px; - width: 25%; - float: left; - } + &.label-right { + left: 10px; + } + } - li.adjustments-line, - li.header-title, - li.button-container{ - width: 100%; - height: 50px; - min-height: inherit; + .toggle { + margin-right: 0; + } } - li.button-container{ - height: auto; - - div{ - margin-bottom: 5px; - } + .color-label { + position: relative; + top: -7px; + font-size: $font-size-xs; + color: $white; } - #sharrreTitle{ - text-align: center; - padding: 10px 0; - height: 50px; + .dropdown-menu > li.adjustments-line > a { + padding-right: 0; + padding-left: 0; + border-bottom: 1px solid #ddd; + border-radius: 0; + margin: 0; } + } - li.header-title{ - color: $white; - height: 30px; - line-height: 25px; - font-size: 12px; - font-weight: 600; + .dropdown-menu { + > li { + & > a.img-holder { + font-size: $font-paragraph; text-align: center; - text-transform: uppercase; - } - - .adjustments-line{ - - a{ - color: transparent; - - .badge-colors{ - position: relative; - top: -2px; - } - - a:hover, - a:focus{ - color: transparent; - } - } - - .togglebutton{ - text-align: center; - - .label-switch{ - position: relative; - left: -10px; - font-size: $font-size-xs; - color: $white; - - &.label-right{ - left: 10px; - } - } + border-radius: 10px; + background-color: $white; + border: 3px solid $white; + padding-left: 0; + padding-right: 0; + opacity: 1; + cursor: pointer; + display: block; + max-height: 100px; + overflow: hidden; + padding: 0; - .toggle{ - margin-right: 0; - } + img { + margin-top: auto; } + } - .color-label{ - position: relative; - top: -7px; - font-size: $font-size-xs; - color: $white; - } + a.switch-trigger:hover, + & > a.switch-trigger:focus { + background-color: transparent; + } - .dropdown-menu > li.adjustments-line > a{ - padding-right: 0; - padding-left: 0; - border-bottom: 1px solid #ddd; - border-radius: 0; - margin: 0; + &:hover, + &:focus { + > a.img-holder { + border-color: rgba(0, 187, 255, 0.53); } + } } - - - .dropdown-menu{ - > li{ - & > a.img-holder{ - font-size: $font-paragraph; - text-align: center; - border-radius: 10px; - background-color: $white; - border: 3px solid $white; - padding-left: 0; - padding-right: 0; - opacity: 1; - cursor: pointer; - display: block; - max-height: 100px; - overflow: hidden; - padding: 0; - - img{ - margin-top: auto; - } - } - - a.switch-trigger:hover, - & > a.switch-trigger:focus{ - background-color: transparent; - } - - &:hover, - &:focus{ - > a.img-holder{ - border-color: rgba(0, 187, 255, 0.53);; - } - } - } - - > .active > a.img-holder, - > .active > a.img-holder{ - border-color: $active-blue; - background-color: $white; - } - + > .active > a.img-holder, + > .active > a.img-holder { + border-color: $active-blue; + background-color: $white; + } + } + + .btn-social { + width: 50%; + display: block; + width: 48%; + float: left; + font-weight: 600; + } + + .btn-social { + i { + margin-right: 5px; } - .btn-social{ - width: 50%; - display: block; - width: 48%; - float: left; - font-weight: 600; + &:first-child { + margin-right: 2%; } + } + + .dropdown { + .dropdown-menu { + -webkit-transform: translateY(-15%); + -moz-transform: translateY(-15%); + -o-transform: translateY(-15%); + -ms-transform: translateY(-15%); + transform: translateY(-15%); + top: 27px; + opacity: 0; + + transform-origin: 0 0; + + &:before { + border-bottom: 0.4em solid rgba(0, 0, 0, 0); + border-left: 0.4em solid rgba(0, 0, 0, 0.2); + border-top: 0.4em solid rgba(0, 0, 0, 0); + right: -16px; + top: 46px; + } - .btn-social{ - i{ - margin-right: 5px; - } + &:after { + border-bottom: 0.4em solid rgba(0, 0, 0, 0); + border-left: 0.4em solid $black; + border-top: 0.4em solid rgba(0, 0, 0, 0); + right: -16px; + } - &:first-child{ - margin-right: 2%; - } + &:before, + &:after { + content: ""; + display: inline-block; + position: absolute; + top: 74px; + width: 16px; + transform: translateY(-50%); + -webkit-transform: translateY(-50%); + -moz-transform: translateY(-50%); + } } - .dropdown{ - .dropdown-menu{ - -webkit-transform: translateY(-15%); - -moz-transform: translateY(-15%); - -o-transform: translateY(-15%); - -ms-transform: translateY(-15%); - transform: translateY(-15%); - top: 27px; - opacity: 0; - - transform-origin: 0 0; - - &:before{ - border-bottom: .4em solid rgba(0, 0, 0, 0); - border-left: .4em solid rgba(0,0,0,0.2); - border-top: .4em solid rgba(0,0,0,0); - right: -16px; - top: 46px; - } - - &:after{ - border-bottom: .4em solid rgba(0, 0, 0, 0); - border-left: .4em solid $black; - border-top: .4em solid rgba(0,0,0,0); - right: -16px; - } - - &:before, - &:after{ - content: ""; - display: inline-block; - position: absolute; - top: 74px; - width: 16px; - transform: translateY(-50%); - -webkit-transform: translateY(-50%); - -moz-transform: translateY(-50%); - } - } - - &.show .dropdown-menu{ - opacity: 1; + &.show .dropdown-menu { + opacity: 1; - -webkit-transform: translateY(-13%); - -moz-transform: translateY(-13%); - -o-transform: translateY(-13%); - -ms-transform: translateY(-13%); - transform: translateY(-13%); + -webkit-transform: translateY(-13%); + -moz-transform: translateY(-13%); + -o-transform: translateY(-13%); + -ms-transform: translateY(-13%); + transform: translateY(-13%); - transform-origin: 0 0; - } + transform-origin: 0 0; } + } - .bootstrap-switch{ - margin:0; - } + .bootstrap-switch { + margin: 0; + } } diff --git a/src/assets/sass/black-dashboard/custom/_footer.scss b/src/assets/sass/black-dashboard/custom/_footer.scss index 6935af11..308876e3 100644 --- a/src/assets/sass/black-dashboard/custom/_footer.scss +++ b/src/assets/sass/black-dashboard/custom/_footer.scss @@ -1,55 +1,52 @@ -.footer{ - padding: 24px 0 24px 250px; +.footer { + padding: 24px 0 24px 250px; - [class*="container-"] { - padding: 0; - } + [class*="container-"] { + padding: 0; + } - .nav{ - display: inline-block; - float: left; - margin-bottom: 0; - padding-left: 30px; - list-style: none; - } + .nav { + display: inline-block; + float: left; + margin-bottom: 0; + padding-left: 30px; + list-style: none; + } - .nav-item{ - display: inline-block; + .nav-item { + display: inline-block; - &:first-child a { - padding-left: 0; - } + &:first-child a { + padding-left: 0; } + } - .nav-link { - color: $white; - padding: 0 $padding-base-vertical; - font-size: $font-size-sm; - text-transform: uppercase; - text-decoration: none; + .nav-link { + color: $white; + padding: 0 $padding-base-vertical; + font-size: $font-size-sm; + text-transform: uppercase; + text-decoration: none; - &:hover{ - text-decoration: none; - } + &:hover { + text-decoration: none; } + } + .copyright { + font-size: $font-size-sm; + line-height: 1.8; + color: $white; + } - - .copyright{ - font-size: $font-size-sm; - line-height: 1.8; - color: $white; - } - - &:after{ - display: table; - clear: both; - content: " "; - } + &:after { + display: table; + clear: both; + content: " "; + } } - -@media screen and (max-width: 991px){ +@media screen and (max-width: 991px) { .footer { padding-left: 0px; @@ -60,7 +57,7 @@ } } -@media screen and (min-width: 992px){ +@media screen and (min-width: 992px) { .footer { .copyright { float: right; @@ -69,7 +66,7 @@ } } -@media screen and (max-width: 768px){ +@media screen and (max-width: 768px) { .footer { nav { display: block; @@ -79,14 +76,14 @@ } } -@media screen and (max-width: 576px){ +@media screen and (max-width: 576px) { .footer { text-align: center; .copyright { text-align: center; } - .nav{ + .nav { float: none; padding-left: 0; } diff --git a/src/assets/sass/black-dashboard/custom/_forms.scss b/src/assets/sass/black-dashboard/custom/_forms.scss index 9236dc38..e7802bfc 100644 --- a/src/assets/sass/black-dashboard/custom/_forms.scss +++ b/src/assets/sass/black-dashboard/custom/_forms.scss @@ -1,14 +1,13 @@ /* Form controls */ @include form-control-placeholder(#6c757c, 1); -.form-control{ - border-color: lighten($black,5%); +.form-control { + border-color: lighten($black, 5%); border-radius: $border-radius-lg; font-size: $font-size-sm; @include transition-input-focus-color(); - - &:focus{ + &:focus { border-color: $primary; background-color: $input-bg; @include box-shadow(none); @@ -16,58 +15,57 @@ & + .input-group-append .input-group-text, & ~ .input-group-append .input-group-text, & + .input-group-prepend .input-group-text, - & ~ .input-group-prepend .input-group-text{ - border: 1px solid $primary; - border-left: none; - background-color: $transparent-bg; + & ~ .input-group-prepend .input-group-text { + border: 1px solid $primary; + border-left: none; + background-color: $transparent-bg; } } .has-success &, .has-error &, .has-success &:focus, - .has-error &:focus{ - @include box-shadow(none); + .has-error &:focus { + @include box-shadow(none); } .has-danger &, - .has-success &{ - &.form-control-success, - &.form-control-danger{ - background-image: none; - } + .has-success & { + &.form-control-success, + &.form-control-danger { + background-image: none; + } } - & + .form-control-feedback{ - border-radius: $border-radius-lg; - margin-top: -7px; - position: absolute; - right: 10px; - top: 50%; - vertical-align: middle; + & + .form-control-feedback { + border-radius: $border-radius-lg; + margin-top: -7px; + position: absolute; + right: 10px; + top: 50%; + vertical-align: middle; } - .open &{ - border-radius: $border-radius-lg $border-radius-lg 0 0; - border-bottom-color: $transparent-bg; + .open & { + border-radius: $border-radius-lg $border-radius-lg 0 0; + border-bottom-color: $transparent-bg; } & + .input-group-append .input-group-text, - & + .input-group-prepend .input-group-text{ - background-color: $white; + & + .input-group-prepend .input-group-text { + background-color: $white; } - } .has-success .input-group-append .input-group-text, .has-success .input-group-prepend .input-group-text, -.has-success .form-control{ - border-color: lighten($black,5%); +.has-success .form-control { + border-color: lighten($black, 5%); } .has-success .form-control:focus, .has-success.input-group-focus .input-group-append .input-group-text, -.has-success.input-group-focus .input-group-prepend .input-group-text{ +.has-success.input-group-focus .input-group-prepend .input-group-text { border-color: darken($success, 10%); } @@ -75,59 +73,58 @@ .has-danger .input-group-append .input-group-text, .has-danger .input-group-prepend .input-group-text, .has-danger.input-group-focus .input-group-prepend .input-group-text, -.has-danger.input-group-focus .input-group-append .input-group-text{ - border-color: lighten($danger-states,5%); - color: $danger-states; - background-color: rgba(222,222,222, .1); +.has-danger.input-group-focus .input-group-append .input-group-text { + border-color: lighten($danger-states, 5%); + color: $danger-states; + background-color: rgba(222, 222, 222, 0.1); - &:focus{ - background-color: $transparent-bg; - } + &:focus { + background-color: $transparent-bg; + } } .has-success, -.has-danger{ - &:after{ - font-family: 'nucleo'; - content: "\ea1b"; - display: inline-block; - position: absolute; - right: 20px; - top: 13px; - color: $success; - font-size: 11px; - } +.has-danger { + &:after { + font-family: "nucleo"; + content: "\ea1b"; + display: inline-block; + position: absolute; + right: 20px; + top: 13px; + color: $success; + font-size: 11px; + } - &.form-control-lg{ - &:after{ - font-size: 13px; - top: 24px; - } + &.form-control-lg { + &:after { + font-size: 13px; + top: 24px; } + } - &.has-label{ - &:after{ - top: 37px; - } + &.has-label { + &:after { + top: 37px; } + } + &.form-check:after { + display: none !important; + } - &.form-check:after{ - display: none !important; - } - - &.form-check .form-check-label{ - color: $success; - } + &.form-check .form-check-label { + color: $success; + } } -.has-danger{ - &:after{ +.has-danger { + &:after { content: "\ea48"; color: $danger-states; } - &.form-check .form-check-label{ + &.form-check .form-check-label { color: $danger-states; } } diff --git a/src/assets/sass/black-dashboard/custom/_functions.scss b/src/assets/sass/black-dashboard/custom/_functions.scss index 99ef5914..d3838442 100644 --- a/src/assets/sass/black-dashboard/custom/_functions.scss +++ b/src/assets/sass/black-dashboard/custom/_functions.scss @@ -1,23 +1,23 @@ // Retrieve color Sass maps @function section-color($key: "primary") { - @return map-get($section-colors, $key); + @return map-get($section-colors, $key); } // Lines colors @function shapes-primary-color($key: "step-1-gradient-bg") { - @return map-get($shapes-primary-colors, $key); + @return map-get($shapes-primary-colors, $key); } @function shapes-default-color($key: "step-1-gradient-bg") { - @return map-get($shapes-default-colors, $key); + @return map-get($shapes-default-colors, $key); } @function lines-light-color($key: "step-1-gradient-bg") { - @return map-get($shapes-light-colors, $key); + @return map-get($shapes-light-colors, $key); } @function shapes-dark-color($key: "step-1-gradient-bg") { - @return map-get($shapes-dark-colors, $key); -} \ No newline at end of file + @return map-get($shapes-dark-colors, $key); +} diff --git a/src/assets/sass/black-dashboard/custom/_images.scss b/src/assets/sass/black-dashboard/custom/_images.scss index 99a06c33..ac208c89 100644 --- a/src/assets/sass/black-dashboard/custom/_images.scss +++ b/src/assets/sass/black-dashboard/custom/_images.scss @@ -1,7 +1,7 @@ -img{ - max-width: 100%; - border-radius: $border-radius-sm; +img { + max-width: 100%; + border-radius: $border-radius-sm; } -.img-raised{ - box-shadow: $box-shadow-raised; +.img-raised { + box-shadow: $box-shadow-raised; } diff --git a/src/assets/sass/black-dashboard/custom/_input-group.scss b/src/assets/sass/black-dashboard/custom/_input-group.scss index 9f99990e..ff593ecb 100644 --- a/src/assets/sass/black-dashboard/custom/_input-group.scss +++ b/src/assets/sass/black-dashboard/custom/_input-group.scss @@ -3,222 +3,227 @@ color: $danger-states; } - .form-group.has-success .error, .input-group.has-success .error { color: $success; } -@include form-control-lg-padding($padding-lg-vertical, $padding-input-horizontal); +@include form-control-lg-padding( + $padding-lg-vertical, + $padding-input-horizontal +); @include input-base-padding($padding-input-vertical, $padding-input-horizontal); .form-group.no-border, -.input-group.no-border{ - .form-control, - .form-control + .input-group-prepend .input-group-text, - .form-control + .input-group-append .input-group-text{ - - background-color: lighten($black,1%); - border: medium none; - &:focus, - &:active, - &:active{ - border: medium none; - background-color: lighten($black,2%); - } +.input-group.no-border { + .form-control, + .form-control + .input-group-prepend .input-group-text, + .form-control + .input-group-append .input-group-text { + background-color: lighten($black, 1%); + border: medium none; + &:focus, + &:active, + &:active { + border: medium none; + background-color: lighten($black, 2%); } + } - .form-control{ - &:focus{ - & + .input-group-prepend .input-group-text, - & + .input-group-append .input-group-text{ - background-color: lighten($black,2%); - } - } + .form-control { + &:focus { + & + .input-group-prepend .input-group-text, + & + .input-group-append .input-group-text { + background-color: lighten($black, 2%); + } } + } - .input-group-prepend .input-group-text, - .input-group-append .input-group-text{ - background-color: lighten($black,1%);; - border: none; - } + .input-group-prepend .input-group-text, + .input-group-append .input-group-text { + background-color: lighten($black, 1%); + border: none; + } } -.has-error{ - .form-control-feedback, .control-label{ - color: $danger-states; - } +.has-error { + .form-control-feedback, + .control-label { + color: $danger-states; + } } -.has-success{ - .form-control-feedback, .control-label{ - color: $success; - } +.has-success { + .form-control-feedback, + .control-label { + color: $success; + } } .input-group-append .input-group-text, .input-group-prepend .input-group-text { - background-color: transparent; - border: 1px solid lighten($black,5%); - border-radius: $border-radius-lg; - color: $white; + background-color: transparent; + border: 1px solid lighten($black, 5%); + border-radius: $border-radius-lg; + color: $white; - & i{ - opacity: .5; - } + & i { + opacity: 0.5; + } - @include transition-input-focus-color(); + @include transition-input-focus-color(); - .has-danger.input-group-focus &{ - background-color: $transparent-bg; - } + .has-danger.input-group-focus & { + background-color: $transparent-bg; + } - .has-success &{ - background-color: $transparent-bg; - } - .has-danger .form-control:focus + &{ - color: $danger-states; - } - .has-success .form-control:focus + &{ - color: $success; - } + .has-success & { + background-color: $transparent-bg; + } + .has-danger .form-control:focus + & { + color: $danger-states; + } + .has-success .form-control:focus + & { + color: $success; + } - & + .form-control, - & ~ .form-control{ - @include input-size($padding-base-vertical - 1, $padding-base-horizontal); - padding-left: 18px; - } + & + .form-control, + & ~ .form-control { + @include input-size($padding-base-vertical - 1, $padding-base-horizontal); + padding-left: 18px; + } - i{ - width: 17px; - } + i { + width: 17px; + } } .input-group-append, .input-group-prepend .input-group-text, .input-group-prepend .input-group-text { - background-color: transparent; - border: 1px solid lighten($black,5%); - border-radius: $border-radius-lg; - color: $white; - margin: 0; + background-color: transparent; + border: 1px solid lighten($black, 5%); + border-radius: $border-radius-lg; + color: $white; + margin: 0; } -.input-group-append .input-group-text{ +.input-group-append .input-group-text { border-left: none; } -.input-group-prepend .input-group-text{ +.input-group-prepend .input-group-text { border-right: none; } -.input-group-focus{ - .input-group-prepend .input-group-text, - .input-group-append .input-group-text{ - background-color: $white; - border-color: $primary; - background-color: $transparent-bg; - border-color: $primary; - } +.input-group-focus { + .input-group-prepend .input-group-text, + .input-group-append .input-group-text { + background-color: $white; + border-color: $primary; + background-color: $transparent-bg; + border-color: $primary; + } - &.no-border{ - .input-group-prepend .input-group-text, - .input-group-append .input-group-text{ - background-color: lighten($black,2%); - } + &.no-border { + .input-group-prepend .input-group-text, + .input-group-append .input-group-text { + background-color: lighten($black, 2%); } + } } .input-group, -.form-group{ - margin-bottom: 10px; - position: relative; +.form-group { + margin-bottom: 10px; + position: relative; - .form-control-static{ - margin-top: 9px; - } + .form-control-static { + margin-top: 9px; + } } -.input-group[disabled]{ - .input-group-prepend .input-group-text, - .input-group-append .input-group-text{ - background-color: $light-gray; - } +.input-group[disabled] { + .input-group-prepend .input-group-text, + .input-group-append .input-group-text { + background-color: $light-gray; + } } -.input-group .form-control:not(:first-child):not(:last-child), .input-group-btn:not(:first-child):not(:last-child){ - border-radius: $border-radius-lg; - border-top-left-radius: 0; - border-bottom-left-radius: 0; - border-left: 0 none; +.input-group .form-control:not(:first-child):not(:last-child), +.input-group-btn:not(:first-child):not(:last-child) { + border-radius: $border-radius-lg; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-left: 0 none; } .input-group .form-control:first-child, .input-group-btn:first-child > .dropdown-toggle, .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) { - border-right: 0 none; + border-right: 0 none; } .input-group .form-control:last-child, .input-group-btn:last-child > .dropdown-toggle, .input-group-btn:first-child > .btn:not(:first-child) { - border-left: 0 none; + border-left: 0 none; } -.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { - background-color: $black-states; - color: $default; - cursor: not-allowed; +.form-control[disabled], +.form-control[readonly], +fieldset[disabled] .form-control { + background-color: $black-states; + color: $default; + cursor: not-allowed; } -.input-group-btn .btn{ - border-width: $border-thin; - padding: $padding-btn-vertical $padding-base-horizontal; +.input-group-btn .btn { + border-width: $border-thin; + padding: $padding-btn-vertical $padding-base-horizontal; } -.input-group-btn .btn-default:not(.btn-fill){ - border-color: $medium-gray; +.input-group-btn .btn-default:not(.btn-fill) { + border-color: $medium-gray; } -.input-group-btn:last-child > .btn{ - margin-left: 0; +.input-group-btn:last-child > .btn { + margin-left: 0; } -textarea.form-control{ - max-width: 100%; - max-height: 80px; - padding: 10px 10px 0 0; - resize: none; - border: none; - border-bottom: 1px solid lighten($black,5%); - border-radius: 0; - line-height: 2; - - &:focus, - &:active{ - border-left: none; - border-top: none; - border-right: none; - } +textarea.form-control { + max-width: 100%; + max-height: 80px; + padding: 10px 10px 0 0; + resize: none; + border: none; + border-bottom: 1px solid lighten($black, 5%); + border-radius: 0; + line-height: 2; + + &:focus, + &:active { + border-left: none; + border-top: none; + border-right: none; + } } .has-success, -.has-danger{ - - &.form-group .form-control, - &.form-group.no-border .form-control{ - padding-right: $input-padding-horizontal + 21; - } +.has-danger { + &.form-group .form-control, + &.form-group.no-border .form-control { + padding-right: $input-padding-horizontal + 21; + } } -.form.form-newsletter .form-group{ - float: left; - width: 78%; - margin-right: 2%; - margin-top: 9px; +.form.form-newsletter .form-group { + float: left; + width: 78%; + margin-right: 2%; + margin-top: 9px; } -.input-group .input-group-btn{ - padding: 0 12px; +.input-group .input-group-btn { + padding: 0 12px; } // Input files - hide actual input - requires specific markup in the sample. -.form-group input[type=file] { +.form-group input[type="file"] { opacity: 0; position: absolute; top: 0; @@ -230,109 +235,108 @@ textarea.form-control{ z-index: 100; } -.form-text{ - font-size: $font-size-sm; - color: rgba($white,0.8); +.form-text { + font-size: $font-size-sm; + color: rgba($white, 0.8); } -.form-control-lg{ - padding: 0; - font-size: inherit; - line-height: 0; - border-radius: 0; +.form-control-lg { + padding: 0; + font-size: inherit; + line-height: 0; + border-radius: 0; - .form-control { - height: calc(2.875rem + 2px); - } + .form-control { + height: calc(2.875rem + 2px); + } } -.form-horizontal{ - .col-form-label, - .label-on-right{ - padding: 10px 5px 0 15px; - text-align: right; - max-width: 180px; +.form-horizontal { + .col-form-label, + .label-on-right { + padding: 10px 5px 0 15px; + text-align: right; + max-width: 180px; + } + + .checkbox-radios { + margin-bottom: 15px; + + .form-check:first-child { + margin-top: 8px; } + } - .checkbox-radios{ - margin-bottom: 15px; + .label-on-right { + text-align: left; + padding: 10px 15px 0 5px; + } - .form-check:first-child{ - margin-top: 8px; - } + .form-check-inline { + margin-top: 6px; + .form-check-label { + margin-right: 1.5rem; } + } +} - .label-on-right{ - text-align: left; - padding: 10px 15px 0 5px; +.search-bar { + margin-left: $margin-lg-vertical; + .btn { + margin: 0; + } + &.input-group { + border-radius: 25px; + z-index: 4; + margin-bottom: 0; + height: 43px; + padding-right: 5px; + .input-group-addon { + padding: 10px; + background: transparent; + border: none; + color: rgba(255, 255, 255, 0.7); + } + + i { + font-size: 20px; + color: $white; + margin-top: 0 !important; + } + input { + background: transparent; + border: none !important; + border-radius: 0; + padding: 12px !important; + font-size: 12px; + opacity: 0.5; + &:focus { + background: transparent; + } } + .form-control { + opacity: 1; + color: $white; + &::placeholder { + color: white; + } + } + } +} - .form-check-inline{ - margin-top: 6px; - .form-check-label{ - margin-right: 1.5rem; - } +.modal-search .modal-dialog { + max-width: 1000px; + margin: 20px auto; + .form-control { + border: none; + color: $black; + &::placeholder { + color: $black; } + } } -.search-bar{ - margin-left: $margin-lg-vertical; - .btn{ - margin: 0; - } - &.input-group{ - border-radius: 25px; - z-index: 4; - margin-bottom: 0; - height: 43px; - padding-right: 5px; - .input-group-addon{ - padding: 10px; - background: transparent; - border: none; - color: rgba(255, 255, 255, 0.7); - - } - - i{ - font-size: 20px; - color: $white; - margin-top: 0 !important; - } - input{ - background: transparent; - border:none !important; - border-radius: 0; - padding: 12px !important; - font-size: 12px; - opacity: 0.5; - &:focus{ - background: transparent; - } - } - .form-control{ - opacity: 1; - color: $white; - &::placeholder{ - color: white; - } - } - } - } - - .modal-search .modal-dialog{ - max-width: 1000px; - margin: 20px auto; - .form-control{ - border: none; - color: $black; - &::placeholder{ - color: $black; - } - } - } - -.input-group-prepend{ +.input-group-prepend { margin-right: 0; } .input-group-prepend, diff --git a/src/assets/sass/black-dashboard/custom/_misc.scss b/src/assets/sass/black-dashboard/custom/_misc.scss index cd588eeb..9e73a5fc 100644 --- a/src/assets/sass/black-dashboard/custom/_misc.scss +++ b/src/assets/sass/black-dashboard/custom/_misc.scss @@ -1,4 +1,3 @@ - /* Animations */ .nav-pills .nav-link, .navbar, @@ -10,24 +9,24 @@ .animation-transition-general, .tag, .tag [data-role="remove"], -.animation-transition-general{ - @include transitions($general-transition-time, $transition-ease); +.animation-transition-general { + @include transitions($general-transition-time, $transition-ease); } //transition for dropdown caret .bootstrap-switch-label:before, -.caret{ - @include transitions($fast-transition-time, $transition-ease); +.caret { + @include transitions($fast-transition-time, $transition-ease); } .dropdown-toggle[aria-expanded="true"]:after, a[data-toggle="collapse"][aria-expanded="true"] .caret, .card-collapse .card a[data-toggle="collapse"][aria-expanded="true"] i, -.card-collapse .card a[data-toggle="collapse"].expanded i{ - @include rotate-180(); +.card-collapse .card a[data-toggle="collapse"].expanded i { + @include rotate-180(); } -.caret{ +.caret { width: 0; height: 0; vertical-align: middle; @@ -40,14 +39,13 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret, margin-left: 5px; } -.pull-left{ +.pull-left { float: left; } -.pull-right{ +.pull-right { float: right; } - // card user profile page .card { @@ -74,50 +72,54 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret, // documentation .bd-docs { - - h1,h2,h3,h4,h5,h6,p,ul li,ol li{ - color:#2c2c2c; + h1, + h2, + h3, + h4, + h5, + h6, + p, + ul li, + ol li { + color: #2c2c2c; } - - .bd-content>table>thead>tr>th { + .bd-content > table > thead > tr > th { color: $black; - } - .blockquote, .blockquote p, .card p{ - color: rgba($white,0.8); + .blockquote, + .blockquote p, + .card p { + color: rgba($white, 0.8); } .bd-example { - background: linear-gradient(#1e1e2f,#1e1e24); - + background: linear-gradient(#1e1e2f, #1e1e24); } .navbar { border-top: none; .navbar-nav .nav-link { - color: rgba(255,255,255,.8) !important; + color: rgba(255, 255, 255, 0.8) !important; } } .bd-example { - - .btn{ + .btn { margin: 4px 0; } .btn .badge { display: inline-block; } - .tim-icons{ + .tim-icons { color: $white; } .popover .popover-header { - color: hsla(0,0%,71%,.6); - } - + color: hsla(0, 0%, 71%, 0.6); + } .popover-body { p { @@ -125,19 +127,19 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret, } } - &.tooltip-demo p{ - color: rgba($white,.8); + &.tooltip-demo p { + color: rgba($white, 0.8); } } .card.card-body, .card .card-body { - color: hsla(0,0%,100%,.8); + color: hsla(0, 0%, 100%, 0.8); } label, .form-check { - color: hsla(0,0%,100%,.8); + color: hsla(0, 0%, 100%, 0.8); } .form-check + .btn { @@ -147,22 +149,33 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret, .bd-example, table { thead th { - color: hsla(0,0%,100%,.8); - } - - h1, h2, h3, h4, h5, h6, - .h1, .h2, .h3, .h4, .h5, .h6 { - color: hsla(0,0%,100%,.8); - } - - .datepicker{ - thead th, table thead th,.tim-icons{ + color: hsla(0, 0%, 100%, 0.8); + } + + h1, + h2, + h3, + h4, + h5, + h6, + .h1, + .h2, + .h3, + .h4, + .h5, + .h6 { + color: hsla(0, 0%, 100%, 0.8); + } + + .datepicker { + thead th, + table thead th, + .tim-icons { color: $primary; } - } - .picker-switch .tim-icons{ + .picker-switch .tim-icons { color: $primary; } } @@ -174,56 +187,52 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret, } } .modal.show .modal-dialog { - -webkit-transform: translate(0,30%); - transform: translate(0,30%); + -webkit-transform: translate(0, 30%); + transform: translate(0, 30%); } code { color: $pink; } -@media screen and (max-width: 991px){ - .profile-photo .profile-photo-small{ - margin-left: -2px; - } - - .button-dropdown{ - display: none; - } +@media screen and (max-width: 991px) { + .profile-photo .profile-photo-small { + margin-left: -2px; + } - #searchModal .modal-dialog{ - margin: 20px; - } + .button-dropdown { + display: none; + } - #minimizeSidebar{ - display: none; - } + #searchModal .modal-dialog { + margin: 20px; + } + #minimizeSidebar { + display: none; + } } - -@media screen and (max-width: 768px){ - - .landing-page .section-story-overview .image-container:nth-child(2){ - margin-left: 0; - margin-bottom: 30px; - } - +@media screen and (max-width: 768px) { + .landing-page .section-story-overview .image-container:nth-child(2) { + margin-left: 0; + margin-bottom: 30px; + } } -@media screen and (max-width: 576px){ - .page-header{ - .container h6.category-absolute{ - width: 90%; - } +@media screen and (max-width: 576px) { + .page-header { + .container h6.category-absolute { + width: 90%; } + } - .form-horizontal .col-form-label, .form-horizontal .label-on-right{ - text-align: inherit; - padding-top: 0; - code{ - padding: 0 10px; - } + .form-horizontal .col-form-label, + .form-horizontal .label-on-right { + text-align: inherit; + padding-top: 0; + code { + padding: 0 10px; } - + } } diff --git a/src/assets/sass/black-dashboard/custom/_modal.scss b/src/assets/sass/black-dashboard/custom/_modal.scss index e43c32f5..e9a26222 100644 --- a/src/assets/sass/black-dashboard/custom/_modal.scss +++ b/src/assets/sass/black-dashboard/custom/_modal.scss @@ -11,20 +11,20 @@ border-bottom: none; & button { - position: absolute; - right: 27px; - top: 24px; - outline: 0; - padding: 1rem; - margin: -1rem -1rem -1rem auto; - } - .title{ - color: $black; - margin-top: 5px; - margin-bottom: 0; + position: absolute; + right: 27px; + top: 24px; + outline: 0; + padding: 1rem; + margin: -1rem -1rem -1rem auto; + } + .title { + color: $black; + margin-top: 5px; + margin-bottom: 0; } - .modal-title{ + .modal-title { color: $black; } @@ -33,13 +33,12 @@ } } - // Modal body // Where all modal content resides (sibling of .modal-header and .modal-footer) .modal-body { line-height: 1.9; - p{ + p { color: $black; } } @@ -62,99 +61,104 @@ left: -5px; } } - } .modal-body + .modal-footer { padding-top: 0; } } .modal-backdrop { - background: rgba(0,0,0,0.3); + background: rgba(0, 0, 0, 0.3); } -.modal{ - - &.modal-default{ - @include modal-colors($white, $black); - } +.modal { + &.modal-default { + @include modal-colors($white, $black); + } - &.modal-primary{ - @include modal-colors($primary, $white); - } + &.modal-primary { + @include modal-colors($primary, $white); + } - &.modal-danger{ - @include modal-colors($danger, $white); - } + &.modal-danger { + @include modal-colors($danger, $white); + } - &.modal-warning{ - @include modal-colors($warning, $white); - } + &.modal-warning { + @include modal-colors($warning, $white); + } - &.modal-success{ - @include modal-colors($success, $white); - } + &.modal-success { + @include modal-colors($success, $white); + } - &.modal-info{ - @include modal-colors($info, $white); - } + &.modal-info { + @include modal-colors($info, $white); + } - .modal-header .close{ - color: $danger; - text-shadow: none; + .modal-header .close { + color: $danger; + text-shadow: none; - &:hover, - &:focus{ - opacity: 1; - } + &:hover, + &:focus { + opacity: 1; } + } - &.modal-black{ - .modal-content{ - background: linear-gradient(to bottom, $black 0%, $black-states 100%); - color: rgba($white, 0.8); - .modal-header{ - .modal-title, .title{ - color: rgba($white, 0.9); - } - } - .modal-body{ - p{ - color: rgba($white, 0.8); - } + &.modal-black { + .modal-content { + background: linear-gradient(to bottom, $black 0%, $black-states 100%); + color: rgba($white, 0.8); + .modal-header { + .modal-title, + .title { + color: rgba($white, 0.9); } } - h1, h2, h3, h4, h5, h6, p{ - color: $white; + .modal-body { + p { + color: rgba($white, 0.8); + } } } + h1, + h2, + h3, + h4, + h5, + h6, + p { + color: $white; + } + } } -.modal-search{ - .modal-dialog{ +.modal-search { + .modal-dialog { margin: 20px auto; max-width: 650px; - input{ + input { border: none; font-size: 17px; font-weight: 100; } - span{ + span { font-size: 35px; color: $search-gray; } } - .modal-content{ - .modal-header{ + .modal-content { + .modal-header { padding: 24px; } } - .modal-header .close{ + .modal-header .close { color: $dark-background; top: 30px !important; } - .modal-footer{ + .modal-footer { border-top: 2px solid #f9f9f9; margin: 0px 25px 20px; } diff --git a/src/assets/sass/black-dashboard/custom/_navbar.scss b/src/assets/sass/black-dashboard/custom/_navbar.scss index b5d94022..c310f5b8 100644 --- a/src/assets/sass/black-dashboard/custom/_navbar.scss +++ b/src/assets/sass/black-dashboard/custom/_navbar.scss @@ -11,9 +11,9 @@ border-radius: 50%; vertical-align: middle; overflow: hidden; - img{ - width: 100%; - } + img { + width: 100%; + } } .navbar-wrapper { @@ -25,43 +25,42 @@ color: $white; } - .btn{ + .btn { margin: 0 5px 0 10px; } - &.navbar-absolute{ + &.navbar-absolute { position: absolute; z-index: 1050; } - - &.navbar-transparent{ + &.navbar-transparent { background: transparent !important; } - &.bg-white{ - .navbar-nav{ - .search-bar.input-group{ - i{ + &.bg-white { + .navbar-nav { + .search-bar.input-group { + i { color: $black; } } - .search-bar.input-group .form-control{ - background: rgba($black,0.1); + .search-bar.input-group .form-control { + background: rgba($black, 0.1); border-radius: 4px; } - a.nav-link{ + a.nav-link { color: $black !important; - p{ + p { color: $black; } } - } - .navbar-text, .navbar-brand{ + .navbar-text, + .navbar-brand { color: $black; } @@ -72,7 +71,6 @@ .form-control::placeholder { color: $dark-gray !important; } - } &.bg-dark { @@ -101,8 +99,8 @@ .navbar-brand { position: fixed; - padding-top: .3125rem; - padding-bottom: .3125rem; + padding-top: 0.3125rem; + padding-bottom: 0.3125rem; color: $white; margin-left: 17px; margin-top: 3px; @@ -110,219 +108,217 @@ font-size: $font-paragraph; } - .navbar-toggle button:focus, .navbar-toggler{ + .navbar-toggle button:focus, + .navbar-toggler { outline: none; } - } .navbar-minimize-fixed { - position: fixed; + position: fixed; margin-left: 40px; margin-top: 14px; - transition: 0.3s ease; - color: white; - z-index: 20; - opacity: 0; - transition: 0.2s ease; - button{ - i { - font-size: 20px; - } - } + transition: 0.3s ease; + color: white; + z-index: 20; + opacity: 0; + transition: 0.2s ease; + button { + i { + font-size: 20px; + } + } } .notification { background: $danger; - color: $white; - border-radius: $border-radius-xl; - height: 6px; - width: 6px; - position: absolute; - text-align: center; - font-size: 12px; - font-weight: 800; + color: $white; + border-radius: $border-radius-xl; + height: 6px; + width: 6px; + position: absolute; + text-align: center; + font-size: 12px; + font-weight: 800; top: 10px; right: 10px; - border: 1px solid $danger; + border: 1px solid $danger; } -.navbar-nav li{ +.navbar-nav li { padding: 0 10px; - a{ + a { color: $white; } - i{ + i { vertical-align: middle; font-size: 20px; } } -@media screen and (max-width: 991px){ - .navbar{ - .container-fluid{ - padding-right: 15px; - padding-left: 15px; - } +@media screen and (max-width: 991px) { + .navbar { + .container-fluid { + padding-right: 15px; + padding-left: 15px; + } - .navbar-collapse{ - .input-group{ - margin: 0; - margin-top: 5px; - } + .navbar-collapse { + .input-group { + margin: 0; + margin-top: 5px; } + } - .navbar-nav{ - - .btn{ - margin-left: -3px; - display: flex; - - i { - margin-right: 12px; - } + .navbar-nav { + .btn { + margin-left: -3px; + display: flex; - span { - margin: 0; - text-transform: uppercase; - font-weight: 300; - - &, - &:hover, - &:focus, - &:active, - &:active:focus { - color: $black !important; - } - } + i { + margin-right: 12px; } - a.nav-link{ - i{ - opacity: 1; - margin-left: 4px; - margin-right: 5px; - } - p{ - display: inline-block; - text-transform: uppercase; - margin-left: 7px; - } - } - - .modal-search .modal-dialog{ - padding: 0 40px; - } - .dropdown{ - margin: 5px 0; - .nav-link{ - padding-bottom: 0; - } - .dropdown-menu{ - .dropdown-item{ - margin-top: 0; - padding-left: 24px; - } - } + span { + margin: 0; + text-transform: uppercase; + font-weight: 300; + + &, + &:hover, + &:focus, + &:active, + &:active:focus { + color: $black !important; } + } } - .dropdown.show .dropdown-menu{ - display: block; - + a.nav-link { + i { + opacity: 1; + margin-left: 4px; + margin-right: 5px; + } + p { + display: inline-block; + text-transform: uppercase; + margin-left: 7px; + } } - .dropdown .dropdown-menu{ - display: none; - li a{ - color: $black; - } + .modal-search .modal-dialog { + padding: 0 40px; } - - .dropdown.show .dropdown-menu, - .dropdown .dropdown-menu{ - background-color: transparent; - border: 0; - transition: none; - -webkit-box-shadow: none; - box-shadow: none; - width: auto; - margin: 0px 1rem; - margin-top: 0px; - - &:before{ - display: none; + .dropdown { + margin: 5px 0; + .nav-link { + padding-bottom: 0; + } + .dropdown-menu { + .dropdown-item { + margin-top: 0; + padding-left: 24px; } + } } + } - .dropdown-menu .dropdown-item:focus, - .dropdown-menu .dropdown-item:hover{ - color: $white; - } + .dropdown.show .dropdown-menu { + display: block; + } - &.bg-white .dropdown-menu .dropdown-item:focus, - &.bg-white .dropdown-menu .dropdown-item:hover{ - color: $default; + .dropdown .dropdown-menu { + display: none; + li a { + color: $black; } + } - button.navbar-toggler[data-target="#navigation"]{ - padding-top: 0; + .dropdown.show .dropdown-menu, + .dropdown .dropdown-menu { + background-color: transparent; + border: 0; + transition: none; + -webkit-box-shadow: none; + box-shadow: none; + width: auto; + margin: 0px 1rem; + margin-top: 0px; + + &:before { + display: none; } + } - .navbar-toggler-bar{ - display: block; - position: relative; - width: 22px; - height: 1px; - border-radius: 1px; - background: $white; - - &.navbar-kebab{ - height: 4px; - width: 4px; - margin-bottom: 3px; - border-radius: 50%; - } + .dropdown-menu .dropdown-item:focus, + .dropdown-menu .dropdown-item:hover { + color: $white; + } - & + .navbar-toggler-bar{ - margin-top: 7px; - } + &.bg-white .dropdown-menu .dropdown-item:focus, + &.bg-white .dropdown-menu .dropdown-item:hover { + color: $default; + } - & + .navbar-toggler-bar.navbar-kebab{ - margin-top: 0px; - } + button.navbar-toggler[data-target="#navigation"] { + padding-top: 0; + } - &.bar2{ - width: 17px; - transition: width .2s linear; - } + .navbar-toggler-bar { + display: block; + position: relative; + width: 22px; + height: 1px; + border-radius: 1px; + background: $white; + + &.navbar-kebab { + height: 4px; + width: 4px; + margin-bottom: 3px; + border-radius: 50%; } - &.bg-white:not(.navbar-transparent) .navbar-toggler-bar{ - background-color: $default; + & + .navbar-toggler-bar { + margin-top: 7px; } - & .toggled .navbar-toggler-bar{ - width: 24px; + & + .navbar-toggler-bar.navbar-kebab { + margin-top: 0px; + } - & + .navbar-toggler-bar{ - margin-top: 5px; - } + &.bar2 { + width: 17px; + transition: width 0.2s linear; } + } + + &.bg-white:not(.navbar-transparent) .navbar-toggler-bar { + background-color: $default; + } + + & .toggled .navbar-toggler-bar { + width: 24px; - .navbar-brand{ - margin-left: 20px; - position: relative; + & + .navbar-toggler-bar { + margin-top: 5px; } + } + + .navbar-brand { + margin-left: 20px; + position: relative; + } } - .navbar-nav{ - .nav-link{ - i.fa, - i.tim-icons{ - opacity: .5; - } + .navbar-nav { + .nav-link { + i.fa, + i.tim-icons { + opacity: 0.5; } + } } .bar1, @@ -359,18 +355,29 @@ @include bottombar-back-rotation(); @-webkit-keyframes fadeIn { - 0% {opacity: 0;} - 100% {opacity: 1;} + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } } @-moz-keyframes fadeIn { - 0% {opacity: 0;} - 100% {opacity: 1;} + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } } @keyframes fadeIn { - 0% {opacity: 0;} - 100% {opacity: 1;} + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } } - } @media screen and (min-width: 992px) { @@ -399,15 +406,15 @@ margin-left: 0; } } - .navbar-expand-lg .navbar-nav .nav-link { - padding-right: 0.5rem; - padding-left: 0.5rem; + .navbar-expand-lg .navbar-nav .nav-link { + padding-right: 0.5rem; + padding-left: 0.5rem; } } -@media screen and (max-width: 576px){ - .navbar[class*='navbar-toggleable-'] .container{ - margin-left: 0; - margin-right: 0; +@media screen and (max-width: 576px) { + .navbar[class*="navbar-toggleable-"] .container { + margin-left: 0; + margin-right: 0; } } diff --git a/src/assets/sass/black-dashboard/custom/_rtl.scss b/src/assets/sass/black-dashboard/custom/_rtl.scss index fe6d0471..21069865 100644 --- a/src/assets/sass/black-dashboard/custom/_rtl.scss +++ b/src/assets/sass/black-dashboard/custom/_rtl.scss @@ -1,167 +1,190 @@ .rtl { .sidebar, - .bootstrap-navbar{ + .bootstrap-navbar { right: 0; left: auto; margin-right: 20px; margin-left: 0; - .nav{ - i{ - float: right; - margin-left: 15px; - margin-right: 0; - } + .nav { + i { + float: right; + margin-left: 15px; + margin-right: 0; + } - p{ - margin-right: 45px; - text-align: right; - } + p { + margin-right: 45px; + text-align: right; + } - .caret{ - left: 11px; - right: auto; - } + .caret { + left: 11px; + right: auto; + } } - .logo{ - a.logo-mini{ - float: right; - margin-right: 20px; - margin-left: 10px; - } + .logo { + a.logo-mini { + float: right; + margin-right: 20px; + margin-left: 10px; + } - .simple-text{ - text-align: right; - } + .simple-text { + text-align: right; + } } - .sidebar-wrapper .nav [data-toggle="collapse"] ~ div > ul > li > a .sidebar-mini-icon, - .sidebar-wrapper .user .info [data-toggle="collapse"] ~ div > ul > li > a .sidebar-mini-icon{ + .sidebar-wrapper + .nav + [data-toggle="collapse"] + ~ div + > ul + > li + > a + .sidebar-mini-icon, + .sidebar-wrapper + .user + .info + [data-toggle="collapse"] + ~ div + > ul + > li + > a + .sidebar-mini-icon { float: right; margin-left: 15px; margin-right: 0; } - .sidebar-wrapper > .nav [data-toggle="collapse"] ~ div > ul > li > a .sidebar-normal, - .sidebar-wrapper .user .info [data-toggle="collapse"] ~ div > ul > li > a .sidebar-normal{ + .sidebar-wrapper + > .nav + [data-toggle="collapse"] + ~ div + > ul + > li + > a + .sidebar-normal, + .sidebar-wrapper + .user + .info + [data-toggle="collapse"] + ~ div + > ul + > li + > a + .sidebar-normal { text-align: right; } - &:before{ + &:before { right: 30px; left: auto; } } - .main-panel .content{ + .main-panel .content { padding: 80px 280px 30px 30px; } - .footer{ + .footer { padding: 24px 300px 24px 0; } - .dropdown-toggle:after{ - margin-right: .255em; + .dropdown-toggle:after { + margin-right: 0.255em; margin-left: 0; } - .dropdown-menu.dropdown-menu-right.dropdown-navbar{ + .dropdown-menu.dropdown-menu-right.dropdown-navbar { right: -220px !important; left: auto; - &:before{ + &:before { right: auto; left: 35px; } } - .notification{ + .notification { left: 40px; right: auto; } - .dropdown-menu{ + .dropdown-menu { right: auto; left: 0; } - - .minimize-sidebar{ + .minimize-sidebar { float: right; } - .alert{ + .alert { left: 0; margin-left: 0; margin-right: 0; - button.close{ - left: 10px !important; - right: auto !important; - } - - span[data-notify="icon"]{ - right: 15px; - left: auto; - } - + button.close { + left: 10px !important; + right: auto !important; + } + span[data-notify="icon"] { + right: 15px; + left: auto; + } - &.alert-with-icon{ - padding-right: 65px; - padding-left: 15px; - } + &.alert-with-icon { + padding-right: 65px; + padding-left: 15px; + } - &.alert-with-icon i[data-notify="icon"]{ - right: 15px; - left: auto; - } + &.alert-with-icon i[data-notify="icon"] { + right: 15px; + left: auto; + } } - .search-bar{ + .search-bar { margin-left: 0; } - .modal-search .modal-header .close{ + .modal-search .modal-header .close { margin-right: auto; left: 10px; } - - @media (min-width: 991px){ + @media (min-width: 991px) { &.sidebar-mini .main-panel .content { padding-right: 130px; padding-left: 50px; } - &.sidebar-mini footer{ + &.sidebar-mini footer { padding-right: 130px; padding-left: 50px; } - .navbar-minimize button{ + .navbar-minimize button { margin-right: -5px; } } - - - @media screen and (max-width: 991px){ - - .sidebar{ + @media screen and (max-width: 991px) { + .sidebar { margin-right: 0; } - .main-panel .content{ + .main-panel .content { padding-right: 50px; } - #bodyClick{ + #bodyClick { right: 260px; left: auto; } - .footer{ + .footer { padding-right: 15px; } } @@ -171,7 +194,7 @@ padding-right: 0; a.nav-link { text-align: right; - p{ + p { margin-right: 7px; } } @@ -179,13 +202,13 @@ .btn { margin-right: 0; padding: 0; - i{ + i { margin-left: 4px; margin-right: 5px; } } - .search-bar span{ + .search-bar span { margin-right: 10px; } } @@ -204,12 +227,9 @@ } } - -@media screen and (max-width: 768px){ - - .rtl .main-panel .content{ +@media screen and (max-width: 768px) { + .rtl .main-panel .content { padding-left: 15px; padding-right: 15px; } - } diff --git a/src/assets/sass/black-dashboard/custom/_sidebar-and-main-panel.scss b/src/assets/sass/black-dashboard/custom/_sidebar-and-main-panel.scss index 55f90ac1..061b3015 100644 --- a/src/assets/sass/black-dashboard/custom/_sidebar-and-main-panel.scss +++ b/src/assets/sass/black-dashboard/custom/_sidebar-and-main-panel.scss @@ -1,663 +1,665 @@ -.wrapper{ - position: relative; - top: 0; - height: 100vh; +.wrapper { + position: relative; + top: 0; + height: 100vh; - &.wrapper-full-page{ - min-height: 100vh; - height: auto; - } + &.wrapper-full-page { + min-height: 100vh; + height: auto; + } } .sidebar-wrapper ul li div.collapse ul li div.collapse ul li a, .sidebar-wrapper ul li div.collapse ul li div.collapsing ul li a, -.sidebar-wrapper ul li div.collapsing ul li div.collapse ul li a{ - +.sidebar-wrapper ul li div.collapsing ul li div.collapse ul li a { margin-left: 25px; - } .sidebar, -.off-canvas-sidebar{ - @include linear-gradient($primary-states, $primary); - height: calc(100vh - 90px); - width: 230px; - position: fixed; - top: 0; - left: 0; - z-index: 1; - background-size: cover; - background-position: center center; - display: block; - box-shadow: 0px 0px 45px 0px rgba(0,0,0,0.6); - margin-top: 80px; - margin-left: 20px; - border-radius: 5px; +.off-canvas-sidebar { + @include linear-gradient($primary-states, $primary); + height: calc(100vh - 90px); + width: 230px; + position: fixed; + top: 0; + left: 0; + z-index: 1; + background-size: cover; + background-position: center center; + display: block; + box-shadow: 0px 0px 45px 0px rgba(0, 0, 0, 0.6); + margin-top: 80px; + margin-left: 20px; + border-radius: 5px; + + .sidebar-wrapper { + width: $full-width; + min-height: 100%; + max-height: calc(100vh - 705px); + z-index: 4; + position: relative; + overflow: auto; - .sidebar-wrapper{ - width: $full-width; - min-height: 100%; - max-height: calc(100vh - 705px); - z-index: 4; - position: relative; - overflow: auto; + .dropdown .dropdown-backdrop { + display: none !important; + } - .dropdown .dropdown-backdrop{ - display: none !important; - } + .navbar-form { + border: none; + } - .navbar-form{ - border: none; + > .nav, + .user .info { + [data-toggle="collapse"] ~ div > ul > li > a { + span { + display: inline-block; + // @extend .animation-transition-general; } - > .nav, - .user .info{ - [data-toggle="collapse"] ~ div > ul > li > a{ - span{ - display: inline-block; - // @extend .animation-transition-general; - } - - .sidebar-normal{ - margin: 0; - position: relative; - transform: translateX(0px); - opacity: 1; - white-space: nowrap; - display: block; - line-height: 23px; - z-index: 1; - color: $opacity-8; - } - - .sidebar-mini-icon{ - text-transform: uppercase; - width: 34px; - margin-right: 10px; - margin-left: 0px; - font-size: 12px; - text-align: center; - line-height: 25px; - position: relative; - float: left; - z-index: 1; - display: inherit; - line-height: 24px; - color: $opacity-8; - } - - i{ - font-size: 17px; - line-height: 20px; - width: 26px; - } - } + .sidebar-normal { + margin: 0; + position: relative; + transform: translateX(0px); + opacity: 1; + white-space: nowrap; + display: block; + line-height: 23px; + z-index: 1; + color: $opacity-8; } - - - [data-toggle="collapse"] ~ div > ul > li:hover > a{ - .sidebar-mini-icon, .sidebar-normal{ - color: $white; - } - + .sidebar-mini-icon { + text-transform: uppercase; + width: 34px; + margin-right: 10px; + margin-left: 0px; + font-size: 12px; + text-align: center; + line-height: 25px; + position: relative; + float: left; + z-index: 1; + display: inherit; + line-height: 24px; + color: $opacity-8; } - .nav [data-toggle="collapse"] ~ div > ul > li > a .sidebar-mini-icon{ - opacity: 0; + i { + font-size: 17px; + line-height: 20px; + width: 26px; } - - + } } - .navbar-minimize{ - position: absolute; - right: 20px; - top: 2px; - opacity: 1; - - // @extend .animation-transition-general; + [data-toggle="collapse"] ~ div > ul > li:hover > a { + .sidebar-mini-icon, + .sidebar-normal { + color: $white; + } } - .logo-tim{ - border-radius: 50%; - border: 1px solid #333; - display: block; - height: 61px; - width: 61px; - float: left; - overflow: hidden; - img{ - width: 60px; - height: 60px; - } + .nav [data-toggle="collapse"] ~ div > ul > li > a .sidebar-mini-icon { + opacity: 0; } + } - .nav{ - margin-top: 20px; - display: block; + .navbar-minimize { + position: absolute; + right: 20px; + top: 2px; + opacity: 1; - .caret{ - top: 14px; - position: absolute; - right: 10px; - } + // @extend .animation-transition-general; + } + .logo-tim { + border-radius: 50%; + border: 1px solid #333; + display: block; + height: 61px; + width: 61px; + float: left; + overflow: hidden; + + img { + width: 60px; + height: 60px; + } + } - li{ - > a + div .nav{ - margin-top: 5px; - li > a{ - margin-top: 0px; - padding: 8px 8px; - } - } - - > a{ - margin: 10px 15px 0; - border-radius: $btn-round-radius; - color: $white; - display: block; - text-decoration: none; - position: relative; - text-transform: uppercase; - cursor: pointer; - font-size: $font-size-xs; - padding: 10px 8px; - line-height: $line-height-lg; - } - - &:first-child > a{ - margin: 0 15px; - - } - - &:hover:not(.active) > a, - &:focus:not(.active) > a{ - p,i{ - color: $white; - } - } - - &:hover:not(.active) > a i, - &:focus:not(.active) > a i{ - color: $white; - } - - &.active > a:not([data-toggle="collapse"]){ - background: transparent; - - i,p{ - color: white; - } - - &:before{ - content: " "; - position: absolute; - height: 6px; - width: 6px; - top: 22px; - left: -4px; - background: $white; - border-radius: 50%; - } - } - - &.active > a[data-toggle="collapse"]{ - background: transparent; - box-shadow: none; - color: $white; - - i{ - color: $white; - } - - & + div .nav .active a{ - - box-shadow: none; - .sidebar-mini-icon, .sidebar-normal{ - color: $white; - font-weight: $font-weight-normal; - } - - &:before{ - content: " "; - position: absolute; - height: 6px; - width: 6px; - top: 17px; - left: -4px; - background: $white; - border-radius: 50%; - } - } - &:before{ - content: " "; - position: absolute; - height: 6px; - width: 6px; - top: 22px; - left: -4px; - background: rgba($white,0.6); - border-radius: 50%; - } - } - } + .nav { + margin-top: 20px; + display: block; - p{ - margin: 0; - font-weight: $font-weight-bold; - color: rgba($white,0.8); - line-height: 30px; - position: relative; - display: block; - height: auto; - white-space: nowrap; - @extend .animation-transition-general; - } + .caret { + top: 14px; + position: absolute; + right: 10px; + } - i{ - font-size: 20px; - float: left; - margin-right: 12px; - line-height: 30px; - width: 34px; - text-align: center; - color: $opacity-8; - position: relative; + li { + > a + div .nav { + margin-top: 5px; + li > a { + margin-top: 0px; + padding: 8px 8px; } - } + } - .logo{ + > a { + margin: 10px 15px 0; + border-radius: $btn-round-radius; + color: $white; + display: block; + text-decoration: none; position: relative; - padding: $padding-base-vertical $padding-base-horizontal; - z-index: 4; + text-transform: uppercase; + cursor: pointer; + font-size: $font-size-xs; + padding: 10px 8px; + line-height: $line-height-lg; + } - a.logo-mini, - a.logo-normal{ - @extend .animation-transition-general; - } + &:first-child > a { + margin: 0 15px; + } - a.logo-mini{ - opacity: 1; - float: left; - width: 34px; - text-align: center; - margin-left: 12px; - margin-right: 10px; + &:hover:not(.active) > a, + &:focus:not(.active) > a { + p, + i { + color: $white; } + } - a.logo-mini .logo-img { - width: 32px; - display: inline-block; - height: 32px; - margin-left: 0; - margin-right: 15px; - background: #fff; - border-radius: 32px; - text-align: center; - img { - max-width: 21px; - } - &.logo-img-rtl { - margin-right: 0; - } - } + &:hover:not(.active) > a i, + &:focus:not(.active) > a i { + color: $white; + } - a.logo-normal{ - display: block; - opacity: 1; - @include transform-translate-x(0px); - } + &.active > a:not([data-toggle="collapse"]) { + background: transparent; - &:after{ - content: ''; - position: absolute; - bottom: 0; - right: 15px; - height: 1px; - width: calc(100% - 30px); - background: $opacity-5; + i, + p { + color: white; + } + &:before { + content: " "; + position: absolute; + height: 6px; + width: 6px; + top: 22px; + left: -4px; + background: $white; + border-radius: 50%; } + } - p{ - float: left; - font-size: 20px; - margin: 10px 10px; - color: $white; - line-height: 20px; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + &.active > a[data-toggle="collapse"] { + background: transparent; + box-shadow: none; + color: $white; + + i { + color: $white; } - .simple-text{ - text-transform: uppercase; - padding: $padding-base-vertical 0; - display: block; - white-space: nowrap; - // font-size: $font-size-base; + & + div .nav .active a { + box-shadow: none; + .sidebar-mini-icon, + .sidebar-normal { color: $white; - text-decoration: none; font-weight: $font-weight-normal; - line-height: 30px; - overflow: hidden; - } - } + } - .logo-tim{ - border-radius: 50%; - border: 1px solid #333; - display: block; - height: 61px; - width: 61px; - float: left; - overflow: hidden; - - img{ - width: 60px; - height: 60px; + &:before { + content: " "; + position: absolute; + height: 6px; + width: 6px; + top: 17px; + left: -4px; + background: $white; + border-radius: 50%; + } } + &:before { + content: " "; + position: absolute; + height: 6px; + width: 6px; + top: 22px; + left: -4px; + background: rgba($white, 0.6); + border-radius: 50%; + } + } } - &[data="blue"]{ - @include linear-gradient($info-states, $info); - } - &[data="green"]{ - @include linear-gradient($success-states, $success); + p { + margin: 0; + font-weight: $font-weight-bold; + color: rgba($white, 0.8); + line-height: 30px; + position: relative; + display: block; + height: auto; + white-space: nowrap; + @extend .animation-transition-general; } - &[data="vue"] { - @include linear-gradient($vue-states, $vue); + i { + font-size: 20px; + float: left; + margin-right: 12px; + line-height: 30px; + width: 34px; + text-align: center; + color: $opacity-8; + position: relative; } + } - .user{ - padding-bottom: 20px; - margin:20px auto 0; - position: relative; - - &:after{ - content: ''; - position: absolute; - bottom: 0; - right: 15px; - height: 1px; - width: calc(100% - 30px); - background: $opacity-5; - } - - .photo{ - width: 34px; - height: 34px; - overflow: hidden; - float: left; - z-index: 5; - margin-right: 10px; - border-radius: 50%; - margin-left: 23px; - box-shadow: $box-shadow-raised; - @extend .animation-transition-general; - - img{ - width: $full-width; - } - } + .logo { + position: relative; + padding: $padding-base-vertical $padding-base-horizontal; + z-index: 4; - a{ - color: $white; - text-decoration: none; - padding: $padding-base-vertical 15px; - white-space: nowrap; - @extend .animation-transition-general; - } + a.logo-mini, + a.logo-normal { + @extend .animation-transition-general; + } - .info{ - > a{ - display: block; - line-height: 18px; - - > span{ - @extend .animation-transition-general; - display: block; - position: relative; - opacity: 1; - } - } - - .caret{ - position: absolute; - top: 8px; - right: 18px; - } - } + a.logo-mini { + opacity: 1; + float: left; + width: 34px; + text-align: center; + margin-left: 12px; + margin-right: 10px; } - transition: 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1); + a.logo-mini .logo-img { + width: 32px; + display: inline-block; + height: 32px; + margin-left: 0; + margin-right: 15px; + background: #fff; + border-radius: 32px; + text-align: center; + img { + max-width: 21px; + } + &.logo-img-rtl { + margin-right: 0; + } + } -} + a.logo-normal { + display: block; + opacity: 1; + @include transform-translate-x(0px); + } + &:after { + content: ""; + position: absolute; + bottom: 0; + right: 15px; + height: 1px; + width: calc(100% - 30px); + background: $opacity-5; + } -.visible-on-sidebar-regular{ - display: inline-block !important; -} -.visible-on-sidebar-mini{ - display: none !important; -} + p { + float: left; + font-size: 20px; + margin: 10px 10px; + color: $white; + line-height: 20px; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + } -.off-canvas-sidebar{ - .nav { - > li > a, - > li > a:hover{ - color: $white; - } + .simple-text { + text-transform: uppercase; + padding: $padding-base-vertical 0; + display: block; + white-space: nowrap; + // font-size: $font-size-base; + color: $white; + text-decoration: none; + font-weight: $font-weight-normal; + line-height: 30px; + overflow: hidden; + } + } - > li > a:focus{ - background: rgba(200, 200, 200, 0.2); - } + .logo-tim { + border-radius: 50%; + border: 1px solid #333; + display: block; + height: 61px; + width: 61px; + float: left; + overflow: hidden; + + img { + width: 60px; + height: 60px; } -} + } + &[data="blue"] { + @include linear-gradient($info-states, $info); + } + &[data="green"] { + @include linear-gradient($success-states, $success); + } -.main-panel { - position: relative; - float: right; - width: $full-width; - min-height: 100vh; - border-top: 2px solid $primary; - background: linear-gradient($background-black, $background-states-black); + &[data="vue"] { + @include linear-gradient($vue-states, $vue); + } - @include transitions (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1)); + .user { + padding-bottom: 20px; + margin: 20px auto 0; + position: relative; - &[data="blue"]{ - border-top: 2px solid $info; + &:after { + content: ""; + position: absolute; + bottom: 0; + right: 15px; + height: 1px; + width: calc(100% - 30px); + background: $opacity-5; } - &[data="green"]{ - border-top: 2px solid $success; - } + .photo { + width: 34px; + height: 34px; + overflow: hidden; + float: left; + z-index: 5; + margin-right: 10px; + border-radius: 50%; + margin-left: 23px; + box-shadow: $box-shadow-raised; + @extend .animation-transition-general; - &[data="purple"]{ - border-top: 2px solid $purple; + img { + width: $full-width; + } } - &[data="primary"]{ - border-top: 2px solid $primary; + a { + color: $white; + text-decoration: none; + padding: $padding-base-vertical 15px; + white-space: nowrap; + @extend .animation-transition-general; } - > .content { - padding: 78px 30px 30px 280px; - min-height: calc(100vh - 70px); - } + .info { + > a { + display: block; + line-height: 18px; + + > span { + @extend .animation-transition-general; + display: block; + position: relative; + opacity: 1; + } + } - > .navbar { - margin-bottom: 0; + .caret { + position: absolute; + top: 8px; + right: 18px; + } } + } + transition: 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1); +} - .header { - margin-bottom: 50px; - } +.visible-on-sidebar-regular { + display: inline-block !important; +} +.visible-on-sidebar-mini { + display: none !important; } +.off-canvas-sidebar { + .nav { + > li > a, + > li > a:hover { + color: $white; + } -.perfect-scrollbar-on{ - .sidebar, - .main-panel{ - height: 100%; - max-height: 100%; + > li > a:focus { + background: rgba(200, 200, 200, 0.2); + } } } +.main-panel { + position: relative; + float: right; + width: $full-width; + min-height: 100vh; + border-top: 2px solid $primary; + background: linear-gradient($background-black, $background-states-black); -@media (min-width: 991px) { - .sidebar, - .main-panel, - .sidebar-wrapper{ - -webkit-transition-property: top,bottom,width; - transition-property: top,bottom, width; - -webkit-transition-duration: .2s,.2s, .35s; - transition-duration: .2s,.2s, .35s; - -webkit-transition-timing-function: linear,linear,ease; - transition-timing-function: linear,linear,ease; - -webkit-overflow-scrolling: touch; - } - - - .sidebar-mini{ - .visible-on-sidebar-regular{ - display: none !important; - } - .visible-on-sidebar-mini{ - display: inline-block !important; - } + @include transitions(0.5s, cubic-bezier(0.685, 0.0473, 0.346, 1)); - .sidebar{ - width: 80px; + &[data="blue"] { + border-top: 2px solid $info; + } - .sidebar-wrapper{ - width: 100% !important; - } - } + &[data="green"] { + border-top: 2px solid $success; + } + &[data="purple"] { + border-top: 2px solid $purple; + } - .sidebar{ - display: block; - z-index: 1030; - box-shadow: $sidebar-box-shadow; - - .logo{ - a.logo-normal{ - opacity: 0; - @include transform-translate-x(-25px); - } - } + &[data="primary"] { + border-top: 2px solid $primary; + } - .sidebar-wrapper{ - > .nav [data-toggle="collapse"] ~ div > ul > li > a .sidebar-normal, - .user .info [data-toggle="collapse"] ~ div > ul > li > a .sidebar-normal, - .user .info > a > span, - > .nav li > a p{ - @include transform-translate-x(-25px); - opacity: 0; - } - } + > .content { + padding: 78px 30px 30px 280px; + min-height: calc(100vh - 70px); + } - .nav [data-toggle="collapse"] ~ div > ul > li > a .sidebar-mini-icon{ - opacity: 1; - } - } + > .navbar { + margin-bottom: 0; + } - .sidebar:hover { - width: 260px; + .header { + margin-bottom: 50px; + } +} - .logo { - a.logo-normal { - opacity: 1; - @include transform-translate-x(0); - } +.perfect-scrollbar-on { + .sidebar, + .main-panel { + height: 100%; + max-height: 100%; + } +} - } +@media (min-width: 991px) { + .sidebar, + .main-panel, + .sidebar-wrapper { + -webkit-transition-property: top, bottom, width; + transition-property: top, bottom, width; + -webkit-transition-duration: 0.2s, 0.2s, 0.35s; + transition-duration: 0.2s, 0.2s, 0.35s; + -webkit-transition-timing-function: linear, linear, ease; + transition-timing-function: linear, linear, ease; + -webkit-overflow-scrolling: touch; + } - .navbar-minimize{ - opacity: 1; - } - .sidebar-wrapper{ - width: 260px; - - > .nav li > a p, - > .nav [data-toggle="collapse"] ~ div > ul > li > a .sidebar-normal, - .user .info [data-toggle="collapse"] ~ div > ul > li > a .sidebar-normal, - .user .info > a > span{ - @include transform-translate-x(0px); - opacity: 1; - } - } + .sidebar-mini { + .visible-on-sidebar-regular { + display: none !important; + } + .visible-on-sidebar-mini { + display: inline-block !important; + } - .nav [data-toggle="collapse"] ~ div > ul > li > a .sidebar-mini-icon{ - opacity: 0; - } + .sidebar { + width: 80px; + .sidebar-wrapper { + width: 100% !important; + } + } + .sidebar { + display: block; + z-index: 1030; + box-shadow: $sidebar-box-shadow; + .logo { + a.logo-normal { + opacity: 0; + @include transform-translate-x(-25px); } + } - .main-panel{ - > .content{ - padding-left: 130px; - } + .sidebar-wrapper { + > .nav [data-toggle="collapse"] ~ div > ul > li > a .sidebar-normal, + .user + .info + [data-toggle="collapse"] + ~ div + > ul + > li + > a + .sidebar-normal, + .user .info > a > span, + > .nav li > a p { + @include transform-translate-x(-25px); + opacity: 0; } + } - footer{ - padding-left: 130px; + .nav [data-toggle="collapse"] ~ div > ul > li > a .sidebar-mini-icon { + opacity: 1; + } + } + + .sidebar:hover { + width: 260px; + + .logo { + a.logo-normal { + opacity: 1; + @include transform-translate-x(0); + } + } + + .navbar-minimize { + opacity: 1; + } + .sidebar-wrapper { + width: 260px; + + > .nav li > a p, + > .nav [data-toggle="collapse"] ~ div > ul > li > a .sidebar-normal, + .user + .info + [data-toggle="collapse"] + ~ div + > ul + > li + > a + .sidebar-normal, + .user .info > a > span { + @include transform-translate-x(0px); + opacity: 1; } + } + + .nav [data-toggle="collapse"] ~ div > ul > li > a .sidebar-mini-icon { + opacity: 0; + } + } + + .main-panel { + > .content { + padding-left: 130px; + } + } + + footer { + padding-left: 130px; + } } - .navbar-minimize{ + .navbar-minimize { button { margin-left: 10px; - i{ - color: $white; - font-size: 20px; + i { + color: $white; + font-size: 20px; } } } - } .panel-header { height: 260px; padding-top: 80px; padding-bottom: 45px; - background: #141E30; /* fallback for old browsers */ - background: -webkit-gradient(linear, left top, right top, from(#0c2646), color-stop(60%, #204065), to(#2a5788)); + background: #141e30; /* fallback for old browsers */ + background: -webkit-gradient( + linear, + left top, + right top, + from(#0c2646), + color-stop(60%, #204065), + to(#2a5788) + ); background: linear-gradient(to right, #0c2646 0%, #204065 60%, #2a5788 100%); position: relative; overflow: hidden; - .header{ - .title{ + .header { + .title { color: $white; } - .category{ + .category { max-width: 600px; color: $opacity-5; margin: 0 auto; font-size: 13px; - a{ + a { color: $white; } } } } -.panel-header-sm{ +.panel-header-sm { height: 135px; } -.panel-header-lg{ - height: 380px +.panel-header-lg { + height: 380px; } -@media screen and (max-width: 991px){ - .sidebar{ +@media screen and (max-width: 991px) { + .sidebar { position: fixed; display: block; top: 0; @@ -675,85 +677,80 @@ @include transform-translate-x(-260px); } - .wrapper{ - @include transition (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1)); + .wrapper { + @include transition(0.5s, cubic-bezier(0.685, 0.0473, 0.346, 1)); } .main-panel { width: 100%; - .content { + .content { padding-left: 30px; } } - .nav-open{ - .main-panel{ - right: 0; - @include transform-translate-x(260px); + .nav-open { + .main-panel { + right: 0; + @include transform-translate-x(260px); + } + + .sidebar { + @include transition(0.5s cubic-bezier(0.685, 0.0473, 0.346, 1)); + @include transform-translate-x(0px); + &:before { + content: unset; } + } - .sidebar{ + body { + position: relative; + overflow-x: hidden; + } - @include transition(0.5s cubic-bezier(0.685, 0.0473, 0.346, 1)); - @include transform-translate-x(0px); - &:before{ - content: unset; - } + .menu-on-right { + .main-panel { + @include transform-translate-x(-260px); } - body{ - position: relative; - overflow-x: hidden; + .navbar-collapse, + .sidebar { + @include transform-translate-x(0px); } - .menu-on-right{ - - .main-panel{ - @include transform-translate-x(-260px); - } - - .navbar-collapse, - .sidebar{ - @include transform-translate-x(0px); - } - - #bodyClick{ - right: 260px; - left: auto; - } + #bodyClick { + right: 260px; + left: auto; } + } } - .menu-on-right{ - .sidebar{ + .menu-on-right { + .sidebar { left: auto; right: 0; @include transform-translate-x(260px); } } - #bodyClick{ - height: 100%; - width: 100%; - position: fixed; - opacity: 1; - top: 0; - right: 0; - left: 260px; - content: ""; - z-index: 9999; - overflow-x: hidden; - background-color: transparent; - @include transition (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1)); + #bodyClick { + height: 100%; + width: 100%; + position: fixed; + opacity: 1; + top: 0; + right: 0; + left: 260px; + content: ""; + z-index: 9999; + overflow-x: hidden; + background-color: transparent; + @include transition(0.5s, cubic-bezier(0.685, 0.0473, 0.346, 1)); } - } -@media screen and (max-width: 768px){ - +@media screen and (max-width: 768px) { .main-panel .content { padding-left: 15px; padding-right: 15px; } - } diff --git a/src/assets/sass/black-dashboard/custom/_tables.scss b/src/assets/sass/black-dashboard/custom/_tables.scss index ef25908b..ab82b169 100644 --- a/src/assets/sass/black-dashboard/custom/_tables.scss +++ b/src/assets/sass/black-dashboard/custom/_tables.scss @@ -1,4 +1,4 @@ -.table{ +.table { > tbody > tr > td { color: rgba(255, 255, 255, 0.7) !important; @@ -15,172 +15,173 @@ } } - > tbody > tr.table-success > td{ - background-color: darken($success,10%); + > tbody > tr.table-success > td { + background-color: darken($success, 10%); } - > tbody > tr.table-info > td{ + > tbody > tr.table-info > td { background-color: $info; } - > tbody > tr.table-primary > td{ + > tbody > tr.table-primary > td { background-color: $primary; } - > tbody > tr.table-warning > td{ + > tbody > tr.table-warning > td { background-color: $warning; } - > tbody > tr.table-danger > td{ + > tbody > tr.table-danger > td { background-color: $danger; } - .img-wrapper{ - width: 40px; - height: 40px; - border-radius: 50%; - overflow: hidden; - margin: 0 auto; - } + .img-wrapper { + width: 40px; + height: 40px; + border-radius: 50%; + overflow: hidden; + margin: 0 auto; + } - .img-row{ - max-width: 60px; - width: 60px; - } + .img-row { + max-width: 60px; + width: 60px; + } - .form-check{ - margin: 0; - margin-top: 5px; + .form-check { + margin: 0; + margin-top: 5px; - & label .form-check-sign::before, - & label .form-check-sign::after{ - top: -17px; - left: 4px; - } + & label .form-check-sign::before, + & label .form-check-sign::after { + top: -17px; + left: 4px; } + } - .btn{ - margin: 0; - } + .btn { + margin: 0; + } + + small, + .small { + font-weight: 300; + } - small,.small{ - font-weight: 300; + .card-tasks .card-body & { + margin-bottom: 0; + + > thead > tr > th, + > tbody > tr > th, + > tfoot > tr > th, + > thead > tr > td, + > tbody > tr > td, + > tfoot > tr > td { + padding-top: 5px; + padding-bottom: 5px; } + } + + > thead > tr > th { + border-bottom-width: 1px; + font-size: 12px; + text-transform: uppercase; + font-weight: $font-weight-extra-bold; + border: 0; + color: rgba($white, 0.7); + } + + .radio, + .checkbox { + margin-top: 0; + margin-bottom: 0; + padding: 0; + width: 15px; - .card-tasks .card-body &{ - margin-bottom: 0; - - > thead > tr > th, - > tbody > tr > th, - > tfoot > tr > th, - > thead > tr > td, - > tbody > tr > td, - > tfoot > tr > td{ - padding-top: 5px; - padding-bottom: 5px; - } + .icons { + position: relative; } - > thead > tr > th{ - border-bottom-width: 1px; - font-size: 12px; - text-transform: uppercase; - font-weight: $font-weight-extra-bold; - border: 0; - color: rgba($white, 0.7); - } - - .radio, - .checkbox{ - margin-top: 0; - margin-bottom: 0; - padding: 0; - width: 15px; - - .icons{ - position: relative; - } - - label{ - &:after, - &:before{ - top: -17px; - left: -3px; - } - } - } - > thead > tr > th, - > tbody > tr > th, - > tfoot > tr > th, - > thead > tr > td, - > tbody > tr > td, - > tfoot > tr > td{ - border-color: rgba(255, 255, 255, 0.1); - padding: 12px 7px; - vertical-align: middle; - } - - &.table-shopping tbody tr:last-child td{ - border: none; - } - - .th-description{ - max-width: 150px; - } - .td-price{ - font-size: 26px; - font-weight: $font-weight-light; - margin-top: 5px; - position: relative; - top: 4px; - text-align: right; - } - .td-total{ - font-weight: $font-weight-bold; - font-size: $h5-font-size; - padding-top: 20px; - text-align: right; + label { + &:after, + &:before { + top: -17px; + left: -3px; + } } + } + > thead > tr > th, + > tbody > tr > th, + > tfoot > tr > th, + > thead > tr > td, + > tbody > tr > td, + > tfoot > tr > td { + border-color: rgba(255, 255, 255, 0.1); + padding: 12px 7px; + vertical-align: middle; + } + + &.table-shopping tbody tr:last-child td { + border: none; + } - .td-actions .btn{ + .th-description { + max-width: 150px; + } + .td-price { + font-size: 26px; + font-weight: $font-weight-light; + margin-top: 5px; + position: relative; + top: 4px; + text-align: right; + } + .td-total { + font-weight: $font-weight-bold; + font-size: $h5-font-size; + padding-top: 20px; + text-align: right; + } + + .td-actions .btn { margin: 0px; - } + } - > tbody > tr{ - position: relative; - } + > tbody > tr { + position: relative; + } - > tfoot > tr { - color: hsla(0,0%,100%,.7); - text-transform: uppercase; - } + > tfoot > tr { + color: hsla(0, 0%, 100%, 0.7); + text-transform: uppercase; + } } -.table-responsive{ +.table-responsive { overflow: scroll; padding-bottom: 10px; } -#tables .table-responsive{ - margin-bottom: 30px; +#tables .table-responsive { + margin-bottom: 30px; } -table.tablesorter thead tr .header{ - background: url("/img/bg.gif") no-repeat center right; +table.tablesorter thead tr .header { + // background: url("/img/bg.gif") no-repeat center right; cursor: pointer; } table.tablesorter thead tr .headerSortUp { - background-image: url("/img/asc.gif"); + // background-image: url("/img/asc.gif"); } table.tablesorter thead tr .headerSortDown { - background-image: url("/img/desc.gif"); + // background-image: url("/img/desc.gif"); } // datatables .dataTables_wrapper { .table-striped tbody tr:nth-of-type(odd) { - background-color: rgba(0,0,0,.05); + background-color: rgba(0, 0, 0, 0.05); } .form-control-sm { diff --git a/src/assets/sass/black-dashboard/custom/_type.scss b/src/assets/sass/black-dashboard/custom/_type.scss index e718195f..c0b79fdc 100644 --- a/src/assets/sass/black-dashboard/custom/_type.scss +++ b/src/assets/sass/black-dashboard/custom/_type.scss @@ -3,12 +3,21 @@ body { -webkit-font-smoothing: antialiased; } -h1, h2, h3, h4, h5, h6, -.h1, .h2, .h3, .h4, .h5, .h6 { +h1, +h2, +h3, +h4, +h5, +h6, +.h1, +.h2, +.h3, +.h4, +.h5, +.h6 { line-height: $headings-line-height; - } -p{ +p { font-weight: $font-weight-light; } @@ -16,159 +25,174 @@ button, input, optgroup, select, -textarea{ - font-family: $font-family-base; -} -.card{ - h1,h2,h3,h4,h5,h6,p{ +textarea { + font-family: $font-family-base; +} +.card { + h1, + h2, + h3, + h4, + h5, + h6, + p { color: $opacity-8; } } -h1,h2,h3,h4,h5,h6{ - font-weight: $font-weight-normal; - color: $opacity-8; +h1, +h2, +h3, +h4, +h5, +h6 { + font-weight: $font-weight-normal; + color: $opacity-8; } -a{ - color: $primary-states; - font-weight: $font-weight-light; - &:hover, - &:focus{ - color: $primary; - } +a { + color: $primary-states; + font-weight: $font-weight-light; + &:hover, + &:focus { + color: $primary; + } } -h1, .h1 { - line-height: 1.05; - margin-bottom: $margin-base-vertical * 2; - - small{ - font-weight: $font-weight-bold; - text-transform: uppercase; - opacity: .8; - } +h1, +.h1 { + line-height: 1.05; + margin-bottom: $margin-base-vertical * 2; + small { + font-weight: $font-weight-bold; + text-transform: uppercase; + opacity: 0.8; + } } -h2, .h2{ - margin-bottom: $margin-base-vertical * 2; - line-height: 1.2; - +h2, +.h2 { + margin-bottom: $margin-base-vertical * 2; + line-height: 1.2; } -h3, .h3{ - margin-bottom: $margin-base-vertical * 2; - line-height: 1.4em; +h3, +.h3 { + margin-bottom: $margin-base-vertical * 2; + line-height: 1.4em; } -h4, .h4{ - line-height: 1.45em; - margin-bottom: $margin-base-vertical; +h4, +.h4 { + line-height: 1.45em; + margin-bottom: $margin-base-vertical; - & + .category, - &.title + .category{ - margin-top: -10px; - } + & + .category, + &.title + .category { + margin-top: -10px; + } } -h5, .h5 { - line-height: 1.4em; - margin-bottom: 15px; +h5, +.h5 { + line-height: 1.4em; + margin-bottom: 15px; } -h6, .h6{ - text-transform: uppercase; - font-weight: $font-weight-bold; +h6, +.h6 { + text-transform: uppercase; + font-weight: $font-weight-bold; } -p{ - color: $opacity-8; - margin-bottom: 5px; +p { + color: $opacity-8; + margin-bottom: 5px; - &.description{ - font-size: 1.14em; - } + &.description { + font-size: 1.14em; + } } +.title { + font-weight: $font-weight-bold; + &.title-up { + text-transform: uppercase; -.title{ - font-weight: $font-weight-bold; - &.title-up{ - text-transform: uppercase; - - a{ - color: $black; - text-decoration: none; - } - } - & + .category{ - margin-top: -10px; + a { + color: $black; + text-decoration: none; } + } + & + .category { + margin-top: -10px; + } } .description, .card-description, .footer-big p, -.card .footer .stats{ - color: $dark-gray; - font-weight: $font-weight-light; +.card .footer .stats { + color: $dark-gray; + font-weight: $font-weight-light; } .category, -.card-category{ - text-transform: capitalize; - font-weight: $font-weight-normal; - color: rgba($white, 0.6); - font-size: $font-size-sm; +.card-category { + text-transform: capitalize; + font-weight: $font-weight-normal; + color: rgba($white, 0.6); + font-size: $font-size-sm; } -.card-category{ - font-size: $font-size-sm; +.card-category { + font-size: $font-size-sm; } -.blockquote{ - border-left: none; - border: 1px solid $default; - padding: 20px; - font-size: $blockquote-font-size; - line-height: 1.8; +.blockquote { + border-left: none; + border: 1px solid $default; + padding: 20px; + font-size: $blockquote-font-size; + line-height: 1.8; - small{ - color: $default; - font-size: $font-size-sm; - text-transform: uppercase; - } + small { + color: $default; + font-size: $font-size-sm; + text-transform: uppercase; + } - &.blockquote-primary{ - border-color: $primary; - color: $primary; + &.blockquote-primary { + border-color: $primary; + color: $primary; - small{ - color: $primary; - } + small { + color: $primary; } + } - &.blockquote-danger{ - border-color: $danger; - color: $danger; + &.blockquote-danger { + border-color: $danger; + color: $danger; - small{ - color: $danger; - } + small { + color: $danger; } + } - &.blockquote-white{ - border-color: $opacity-8; - color: $white; + &.blockquote-white { + border-color: $opacity-8; + color: $white; - small{ - color: $opacity-8; - } + small { + color: $opacity-8; } + } } -ul li, ol li{ +ul li, +ol li { color: $white; } -pre{ +pre { color: $opacity-8; } -hr{ - border-top: 1px solid rgba(0,0,0,0.1); +hr { + border-top: 1px solid rgba(0, 0, 0, 0.1); margin-top: $spacer; margin-bottom: $spacer; } diff --git a/src/assets/sass/black-dashboard/custom/_variables.scss b/src/assets/sass/black-dashboard/custom/_variables.scss index 1022b42a..029a6e2d 100644 --- a/src/assets/sass/black-dashboard/custom/_variables.scss +++ b/src/assets/sass/black-dashboard/custom/_variables.scss @@ -4,227 +4,229 @@ @import "mixins"; // Global settings -$enable-caret: true !default; -$enable-rounded: true !default; -$enable-shadows: true !default; -$enable-gradients: false !default; -$enable-transitions: true !default; -$enable-grid-classes: true !default; -$enable-print-styles: true !default; - +$enable-caret: true !default; +$enable-rounded: true !default; +$enable-shadows: true !default; +$enable-gradients: false !default; +$enable-transitions: true !default; +$enable-grid-classes: true !default; +$enable-print-styles: true !default; // Color system -$white: #ffffff !default; +$white: #ffffff !default; $gray-100: #f6f9fc !default; $gray-200: #e9ecef !default; $gray-300: #e3e3e3 !default; $gray-400: #ced4da !default; $gray-500: #adb5bd !default; -$gray-600: #6c757d !default; // Line footer color -$gray-700: #525f7f !default; // Line p color -$gray-800: #32325d !default; // Line heading color +$gray-600: #6c757d !default; // Line footer color +$gray-700: #525f7f !default; // Line p color +$gray-800: #32325d !default; // Line heading color $gray-900: #212529 !default; -$link-disabled: #666666 !default; -$transparent-bg: transparent !default; -$light-bg: #f5f6fa !default; -$dark-background: #555555 !default; - +$link-disabled: #666666 !default; +$transparent-bg: transparent !default; +$light-bg: #f5f6fa !default; +$dark-background: #555555 !default; $grays: () !default; -$grays: map-merge(( - "100": $gray-100, - "200": $gray-200, - "300": $gray-300, - "400": $gray-400, - "500": $gray-500, - "600": $gray-600, - "700": $gray-700, - "800": $gray-800, - "900": $gray-900 -), $grays); - -$blue: #5e72e4 !default; -$indigo: #5603ad !default; -$purple: #8965e0 !default; -$pink: #f3a4b5 !default; -$red: #f5365c !default; -$orange: #fb6340 !default; -$yellow: #ffd600 !default; -$green: #2dce89 !default; -$teal: #11cdef !default; -$cyan: #2bffc6 !default; - -$line-height-lg: 1.625rem !default; -$line-height-sm: 1.5 !default; -$line-height: 1.35em !default; - - -$opacity-gray-3: rgba(222,222,222, .3) !default; -$opacity-gray-5: rgba(222,222,222, .5) !default; -$opacity-gray-8: rgba(222,222,222, .8) !default; - +$grays: map-merge( + ( + "100": $gray-100, + "200": $gray-200, + "300": $gray-300, + "400": $gray-400, + "500": $gray-500, + "600": $gray-600, + "700": $gray-700, + "800": $gray-800, + "900": $gray-900, + ), + $grays +); -$opacity-5: rgba(255,255,255, .5) !default; -$opacity-6: rgba(255,255,255, .6) !default; -$opacity-8: rgba(255,255,255, .8) !default; +$blue: #5e72e4 !default; +$indigo: #5603ad !default; +$purple: #8965e0 !default; +$pink: #f3a4b5 !default; +$red: #f5365c !default; +$orange: #fb6340 !default; +$yellow: #ffd600 !default; +$green: #2dce89 !default; +$teal: #11cdef !default; +$cyan: #2bffc6 !default; +$line-height-lg: 1.625rem !default; +$line-height-sm: 1.5 !default; +$line-height: 1.35em !default; +$opacity-gray-3: rgba(222, 222, 222, 0.3) !default; +$opacity-gray-5: rgba(222, 222, 222, 0.5) !default; +$opacity-gray-8: rgba(222, 222, 222, 0.8) !default; -$opacity-1: rgba(255,255,255, .1) !default; -$opacity-2: rgba(255,255,255, .2) !default; +$opacity-5: rgba(255, 255, 255, 0.5) !default; +$opacity-6: rgba(255, 255, 255, 0.6) !default; +$opacity-8: rgba(255, 255, 255, 0.8) !default; +$opacity-1: rgba(255, 255, 255, 0.1) !default; +$opacity-2: rgba(255, 255, 255, 0.2) !default; // end beniamin $colors: () !default; -$colors: map-merge(( - "blue": $blue, - "indigo": $indigo, - "purple": $purple, - "pink": $pink, - "red": $red, - "orange": $orange, - "yellow": $yellow, - "green": $green, - "teal": $teal, - "cyan": $cyan, - "white": $white, - "gray": $gray-600, - "light": $gray-400, - "lighter": $gray-200, - "gray-dark": $gray-800 -), $colors); - -$default-color-opacity: rgba(182, 182, 182, .6) !default; -$orange-color: #f96332 !default; - -$default: #344675 !default; -$primary: #e14eca !default; -$secondary: #f4f5f7 !default; -$success: #00f2c3 !default; -$info: #1d8cf8 !default; -$warning: #ff8d72 !default; -$danger: #fd5d93 !default; -$black: #222a42 !default; -$vue: #42b883 !default; +$colors: map-merge( + ( + "blue": $blue, + "indigo": $indigo, + "purple": $purple, + "pink": $pink, + "red": $red, + "orange": $orange, + "yellow": $yellow, + "green": $green, + "teal": $teal, + "cyan": $cyan, + "white": $white, + "gray": $gray-600, + "light": $gray-400, + "lighter": $gray-200, + "gray-dark": $gray-800, + ), + $colors +); + +$default-color-opacity: rgba(182, 182, 182, 0.6) !default; +$orange-color: #f96332 !default; + +$default: #344675 !default; +$primary: #e14eca !default; +$secondary: #f4f5f7 !default; +$success: #00f2c3 !default; +$info: #1d8cf8 !default; +$warning: #ff8d72 !default; +$danger: #fd5d93 !default; +$black: #222a42 !default; +$vue: #42b883 !default; // gradient -$default-states: #263148 !default; -$primary-states: #ba54f5 !default; -$success-states: #0098f0 !default; -$info-states: #3358f4 !default; -$warning-states: #ff6491 !default; -$danger-states: #ec250d !default; -$black-states: #1d253b !default; -$vue-states: #389466 !default; - -$background-black: #1e1e2f !default; -$background-states-black: #1e1e24 !default; +$default-states: #263148 !default; +$primary-states: #ba54f5 !default; +$success-states: #0098f0 !default; +$info-states: #3358f4 !default; +$warning-states: #ff6491 !default; +$danger-states: #ec250d !default; +$black-states: #1d253b !default; +$vue-states: #389466 !default; + +$background-black: #1e1e2f !default; +$background-states-black: #1e1e24 !default; // opacity -$default-opacity: rgba(182, 182, 182, .6) !default; -$primary-opacity: rgba(249, 99, 50, .3) !default; -$success-opacity: rgba(24, 206, 15, .3) !default; -$info-opacity: rgba(44, 168, 255, .3) !default; -$warning-opacity: rgba(255, 178, 54, .3) !default; -$danger-opacity: rgba(255, 54, 54, .3) !default; - -$light-gray: #E3E3E3 !default; -$medium-gray: #DDDDDD !default; -$dark-gray: #9A9A9A !default; -$card-stats-gray: #808080 !default; -$active-gray: #777777 !default; -$nav-gray: #444444 !default; -$search-gray: #b7b7b7 !default; -$calendar-gray: #9499a7 !default; -$active-blue: #00bbff !default; - - - -$light: $gray-500 !default; -$dark: $gray-900 !default; -$darker: darken($gray-900, 15%) !default; - -$facebook: #3b5998 !default; -$facebook-states: darken($facebook, 5%) !default; -$twitter: #55acee !default; -$twitter-states: darken($twitter, 5%) !default; -$google-plus: #dd4b39 !default; -$google-plus-states: darken($google-plus, 5%) !default; -$instagram: #125688 !default; -$instagram-states: lighten($instagram, 6%) !default; -$linkedin: #0077B5 !default; -$linkedin-states: darken($linkedin, 5%) !default; -$pinterest: #cc2127 !default; -$pinterest-states: lighten($pinterest, 6%) !default; -$youtube: #e52d27 !default; -$youtube-states: lighten($youtube, 6%) !default; -$dribbble: #ea4c89 !default; -$dribbble-states: lighten($dribbble, 6%) !default; -$github: #333333 !default; -$github-states: #ccc !default; -$reddit: #ff4500 !default; -$reddit-states: lighten($reddit, 6%) !default; -$tumblr: #35465c !default; -$tumblr-states: lighten($tumblr, 6%) !default; -$behance: #1769ff !default; -$behance-states: lighten($behance, 6%) !default; +$default-opacity: rgba(182, 182, 182, 0.6) !default; +$primary-opacity: rgba(249, 99, 50, 0.3) !default; +$success-opacity: rgba(24, 206, 15, 0.3) !default; +$info-opacity: rgba(44, 168, 255, 0.3) !default; +$warning-opacity: rgba(255, 178, 54, 0.3) !default; +$danger-opacity: rgba(255, 54, 54, 0.3) !default; + +$light-gray: #e3e3e3 !default; +$medium-gray: #dddddd !default; +$dark-gray: #9a9a9a !default; +$card-stats-gray: #808080 !default; +$active-gray: #777777 !default; +$nav-gray: #444444 !default; +$search-gray: #b7b7b7 !default; +$calendar-gray: #9499a7 !default; +$active-blue: #00bbff !default; + +$light: $gray-500 !default; +$dark: $gray-900 !default; +$darker: darken($gray-900, 15%) !default; + +$facebook: #3b5998 !default; +$facebook-states: darken($facebook, 5%) !default; +$twitter: #55acee !default; +$twitter-states: darken($twitter, 5%) !default; +$google-plus: #dd4b39 !default; +$google-plus-states: darken($google-plus, 5%) !default; +$instagram: #125688 !default; +$instagram-states: lighten($instagram, 6%) !default; +$linkedin: #0077b5 !default; +$linkedin-states: darken($linkedin, 5%) !default; +$pinterest: #cc2127 !default; +$pinterest-states: lighten($pinterest, 6%) !default; +$youtube: #e52d27 !default; +$youtube-states: lighten($youtube, 6%) !default; +$dribbble: #ea4c89 !default; +$dribbble-states: lighten($dribbble, 6%) !default; +$github: #333333 !default; +$github-states: #ccc !default; +$reddit: #ff4500 !default; +$reddit-states: lighten($reddit, 6%) !default; +$tumblr: #35465c !default; +$tumblr-states: lighten($tumblr, 6%) !default; +$behance: #1769ff !default; +$behance-states: lighten($behance, 6%) !default; $theme-colors: () !default; -$theme-colors: map-merge(( - "default": $default, - "primary": $primary, - "secondary": $secondary, - "success": $success, - "info": $info, - "warning": $warning, - "danger": $danger, - "white": $white, - "neutral": $white, - "dark": $dark, - "darker": $darker -), $theme-colors); +$theme-colors: map-merge( + ( + "default": $default, + "primary": $primary, + "secondary": $secondary, + "success": $success, + "info": $info, + "warning": $warning, + "danger": $danger, + "white": $white, + "neutral": $white, + "dark": $dark, + "darker": $darker, + ), + $theme-colors +); $brand-colors: () !default; -$brand-colors: map-merge(( - "facebook": $facebook, - "twitter": $twitter, - "google-plus": $google-plus, - "instagram": $instagram, - "pinterest": $pinterest, - "youtube": $youtube, - "dribbble": $dribbble, - "github": $github, - "reddit": $reddit, - "behance": $behance, - "tumblr": $tumblr, - "linkedin": $linkedin, -), $brand-colors); - +$brand-colors: map-merge( + ( + "facebook": $facebook, + "twitter": $twitter, + "google-plus": $google-plus, + "instagram": $instagram, + "pinterest": $pinterest, + "youtube": $youtube, + "dribbble": $dribbble, + "github": $github, + "reddit": $reddit, + "behance": $behance, + "tumblr": $tumblr, + "linkedin": $linkedin, + ), + $brand-colors +); /* brand Colors */ -$brand-primary: $primary !default; -$brand-info: $info !default; -$brand-success: $success !default; -$brand-warning: $warning !default; -$brand-danger: $danger !default; -$brand-inverse: $black !default; - -$topbar-x: topbar-x !default; -$topbar-back: topbar-back !default; -$bottombar-x: bottombar-x !default; -$bottombar-back: bottombar-back !default; +$brand-primary: $primary !default; +$brand-info: $info !default; +$brand-success: $success !default; +$brand-warning: $warning !default; +$brand-danger: $danger !default; +$brand-inverse: $black !default; + +$topbar-x: topbar-x !default; +$topbar-back: topbar-back !default; +$bottombar-x: bottombar-x !default; +$bottombar-back: bottombar-back !default; // Set a specific jump point for requesting color jumps -$theme-color-interval: 8% !default; +$theme-color-interval: 8% !default; // The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255. -$yiq-contrasted-threshold: 200 !default; +$yiq-contrasted-threshold: 200 !default; // Customize the light and dark text colors for use in our YIQ color contrast function. -$yiq-text-dark: $gray-900 !default; -$yiq-text-light: $white !default; +$yiq-text-dark: $gray-900 !default; +$yiq-text-light: $white !default; // Action colors @@ -235,30 +237,31 @@ $favorite-color: $yellow !default; $like-color: $blue !default; $love-color: $red !default; - // Body $body-bg: $background-black !default; $body-color: $gray-700 !default; - // Sections $section-colors: () !default; -$section-colors: map-merge(( - "primary": $body-bg, - "secondary": $secondary, - "light": $gray-400, - "dark": $dark, - "darker": $darker -), $section-colors); +$section-colors: map-merge( + ( + "primary": $body-bg, + "secondary": $secondary, + "light": $gray-400, + "dark": $dark, + "darker": $darker, + ), + $section-colors +); // Links -$link-color: $primary !default; -$link-decoration: none !default; -$link-hover-color: darken($link-color, 15%); -$link-hover-decoration: none !default; +$link-color: $primary !default; +$link-decoration: none !default; +$link-hover-color: darken($link-color, 15%); +$link-hover-decoration: none !default; // Grid breakpoints @@ -267,509 +270,524 @@ $grid-breakpoints: ( sm: 576px, md: 768px, lg: 992px, - xl: 1200px + xl: 1200px, ); @include _assert-ascending($grid-breakpoints, "$grid-breakpoints"); @include _assert-starts-at-zero($grid-breakpoints); - // Grid containers // // Define the maximum width of `.container` for different screen sizes. - // Spacing $spacer: 1rem !default; $spacers: () !default; -$spacers: map-merge(( - 0: 0, - 1: ($spacer * .25), - 2: ($spacer * .5), - 3: $spacer, - 4: ($spacer * 1.5), - 5: ($spacer * 3), - 'sm': ($spacer * 2), - 'md': ($spacer * 4), - 'lg': ($spacer * 6), - 'xl': ($spacer * 8) -), $spacers); - -$padding-base-vertical: .5rem !default; -$padding-base-horizontal: .7rem !default; +$spacers: map-merge( + ( + 0: 0, + 1: ( + $spacer * 0.25, + ), + 2: ( + $spacer * 0.5, + ), + 3: $spacer, + 4: ( + $spacer * 1.5, + ), + 5: ( + $spacer * 3, + ), + "sm": ( + $spacer * 2, + ), + "md": ( + $spacer * 4, + ), + "lg": ( + $spacer * 6, + ), + "xl": ( + $spacer * 8, + ), + ), + $spacers +); -$padding-btn-vertical: 11px !default; -$padding-btn-horizontal: 40px !default; +$padding-base-vertical: 0.5rem !default; +$padding-base-horizontal: 0.7rem !default; -$padding-round-horizontal: 23px !default; +$padding-btn-vertical: 11px !default; +$padding-btn-horizontal: 40px !default; -$padding-lg-vertical: 15px !default; +$padding-round-horizontal: 23px !default; -$padding-input-vertical: 11px !default; -$padding-input-horizontal: 19px !default; +$padding-lg-vertical: 15px !default; +$padding-input-vertical: 11px !default; +$padding-input-horizontal: 19px !default; -$margin-lg-vertical: 30px !default; -$margin-base-vertical: 15px !default; +$margin-lg-vertical: 30px !default; +$margin-base-vertical: 15px !default; // This variable affects the `.h-*` and `.w-*` classes. $sizes: () !default; -$sizes: map-merge(( - 25: 25%, - 50: 50%, - 75: 75%, - 100: 100% -), $sizes); +$sizes: map-merge( + ( + 25: 25%, + 50: 50%, + 75: 75%, + 100: 100%, + ), + $sizes +); // Components -$shape-height-xl: 1.5 !default; -$shape-height-lg: 1.5 !default; -$shape-height-sm: 1.5 !default; +$shape-height-xl: 1.5 !default; +$shape-height-lg: 1.5 !default; +$shape-height-sm: 1.5 !default; // border -$none: 0 !default; -$border-thin: 1px !default; -$border-thick: 2px !default; -$border-width: .0625rem !default; -$border-color: $gray-200 !default; - -$border-radius: .25rem !default; -$border-radius-xl: 0.875rem !default; -$border-radius-lg: 0.4285rem !default; -$border-radius-sm: 0.2857rem !default; -$border-radius-xs: 0.1428rem !default; - -$margin-bottom: 10px !default; -$border: 1px solid !default; - -$box-shadow-sm: 0 .125rem .25rem rgba($black, .075); -$box-shadow: 0 15px 35px rgba(50,50,93,.1), 0 5px 15px rgba(0,0,0,.07); -$box-shadow-lg: 0 1rem 3rem rgba($black, .175); - -$dropdown-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.125); -$box-shadow-raised: 0px 10px 25px 0px rgba(0, 0, 0, 0.3); -$box-shadow: 0 1px 20px 0px rgba(0, 0, 0, 0.1); -$sidebar-box-shadow: 0px 2px 22px 0 rgba(0, 0, 0,.20), 0px 2px 30px 0 rgba(0, 0, 0,.35); - -$component-active-color: $white !default; -$component-active-bg: theme-color("primary") !default; +$none: 0 !default; +$border-thin: 1px !default; +$border-thick: 2px !default; +$border-width: 0.0625rem !default; +$border-color: $gray-200 !default; + +$border-radius: 0.25rem !default; +$border-radius-xl: 0.875rem !default; +$border-radius-lg: 0.4285rem !default; +$border-radius-sm: 0.2857rem !default; +$border-radius-xs: 0.1428rem !default; + +$margin-bottom: 10px !default; +$border: 1px solid !default; + +$box-shadow-sm: 0 0.125rem 0.25rem rgba($black, 0.075); +$box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07); +$box-shadow-lg: 0 1rem 3rem rgba($black, 0.175); + +$dropdown-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.125); +$box-shadow-raised: 0px 10px 25px 0px rgba(0, 0, 0, 0.3); +$box-shadow: 0 1px 20px 0px rgba(0, 0, 0, 0.1); +$sidebar-box-shadow: 0px 2px 22px 0 rgba(0, 0, 0, 0.2), + 0px 2px 30px 0 rgba(0, 0, 0, 0.35); + +$component-active-color: $white !default; +$component-active-bg: theme-color("primary") !default; $component-active-border-color: theme-color("primary") !default; -$component-hover-color: $gray-300 !default; -$component-hover-bg: $gray-300 !default; +$component-hover-color: $gray-300 !default; +$component-hover-bg: $gray-300 !default; $component-hover-border-color: $gray-300 !default; -$caret-width: .3em !default; - -$transition-base: all .15s ease !default; -$transition-fade: opacity .15s linear !default; -$transition-collapse: height .35s ease !default; +$caret-width: 0.3em !default; -$fast-transition-time: 150ms !default; +$transition-base: all 0.15s ease !default; +$transition-fade: opacity 0.15s linear !default; +$transition-collapse: height 0.35s ease !default; -$transition-linear: linear !default; -$transition-bezier: cubic-bezier(0.34, 1.61, 0.7, 1) !default; -$transition-ease: ease 0s; +$fast-transition-time: 150ms !default; -$select-coordinates: 50% -40px !default; -$general-transition-time: 300ms !default; +$transition-linear: linear !default; +$transition-bezier: cubic-bezier(0.34, 1.61, 0.7, 1) !default; +$transition-ease: ease 0s; +$select-coordinates: 50% -40px !default; +$general-transition-time: 300ms !default; // Fonts -$font-family-base: 'Poppins', sans-serif !default; -$font-family-alt: 'Poppins', sans-serif !default; +$font-family-base: "Poppins", sans-serif !default; +$font-family-alt: "Poppins", sans-serif !default; -$font-size-dash: .875rem !default; +$font-size-dash: 0.875rem !default; -$font-size-base: $font-size-dash !default; // Assumes the browser default, typically `16px` -$font-size-xl: ($font-size-base * 1.428); -$font-size-lg: ($font-size-base * 1.142); -$font-size-sm: ($font-size-base * .85714286); -$font-size-xs: ($font-size-base * .714); +$font-size-base: $font-size-dash !default; // Assumes the browser default, typically `16px` +$font-size-xl: ($font-size-base * 1.428); +$font-size-lg: ($font-size-base * 1.142); +$font-size-sm: ($font-size-base * 0.85714286); +$font-size-xs: ($font-size-base * 0.714); -$h1-font-size: $font-size-base * 2.35714285 !default; //2.1875rem -$h2-font-size: $font-size-base * 1.9285714 !default; -$h3-font-size: $font-size-base * 1.642857 !default; -$h4-font-size: $font-size-base * 1.2142857 !default; -$h5-font-size: $font-size-base * 0.9285714 !default; -$h6-font-size: $font-size-base * 0.8571428 !default; +$h1-font-size: $font-size-base * 2.35714285 !default; //2.1875rem +$h2-font-size: $font-size-base * 1.9285714 !default; +$h3-font-size: $font-size-base * 1.642857 !default; +$h4-font-size: $font-size-base * 1.2142857 !default; +$h5-font-size: $font-size-base * 0.9285714 !default; +$h6-font-size: $font-size-base * 0.8571428 !default; -$font-weight-light: 300 !default; -$font-weight-normal: 400 !default; -$font-weight-bold: 600 !default; -$font-weight-extra-bold: 700 !default; +$font-weight-light: 300 !default; +$font-weight-normal: 400 !default; +$font-weight-bold: 600 !default; +$font-weight-extra-bold: 700 !default; -$font-paragraph: 1rem !default; +$font-paragraph: 1rem !default; -$font-weight-base: $font-weight-normal !default; -$shape-height-base: 1.428571 !default; +$font-weight-base: $font-weight-normal !default; +$shape-height-base: 1.428571 !default; -$headings-margin-bottom: ($spacer / 2); -$headings-font-family: inherit !default; -$headings-font-weight: $font-weight-normal !default; -$headings-line-height: 1.2 !default; -$headings-color: $gray-800 !default; +$headings-margin-bottom: ($spacer / 2); +$headings-font-family: inherit !default; +$headings-font-weight: $font-weight-normal !default; +$headings-line-height: 1.2 !default; +$headings-color: $gray-800 !default; -$heading-letter-spacing: .025em !default; -$heading-font-size: .95rem !default; -$heading-text-transform: uppercase !default; -$heading-font-weight: $headings-font-weight !default; +$heading-letter-spacing: 0.025em !default; +$heading-font-size: 0.95rem !default; +$heading-text-transform: uppercase !default; +$heading-font-weight: $headings-font-weight !default; -$heading-title-letter-spacing: .025em !default; -$heading-title-font-size: 1.375rem !default; -$heading-title-font-weight: $font-weight-bold !default; -$heading-title-text-transform: uppercase !default; +$heading-title-letter-spacing: 0.025em !default; +$heading-title-font-size: 1.375rem !default; +$heading-title-font-weight: $font-weight-bold !default; +$heading-title-text-transform: uppercase !default; -$heading-section-letter-spacing: .025em !default; -$heading-section-font-size: 1.375rem !default; -$heading-section-font-weight: $font-weight-bold !default; -$heading-section-text-transform: uppercase !default; +$heading-section-letter-spacing: 0.025em !default; +$heading-section-font-size: 1.375rem !default; +$heading-section-font-weight: $font-weight-bold !default; +$heading-section-text-transform: uppercase !default; -$display1-size: 3.3rem !default; -$display2-size: 2.75rem !default; -$display3-size: 2.1875rem !default; -$display4-size: 1.6275rem !default; +$display1-size: 3.3rem !default; +$display2-size: 2.75rem !default; +$display3-size: 2.1875rem !default; +$display4-size: 1.6275rem !default; -$display1-weight: $font-weight-bold !default; -$display2-weight: $font-weight-bold !default; -$display3-weight: $font-weight-bold !default; -$display4-weight: $font-weight-bold !default; -$display-line-height: $headings-line-height !default; +$display1-weight: $font-weight-bold !default; +$display2-weight: $font-weight-bold !default; +$display3-weight: $font-weight-bold !default; +$display4-weight: $font-weight-bold !default; +$display-line-height: $headings-line-height !default; -$paragraph-font-size: 0.625rem !default; -$paragraph-font-weight: 300 !default; -$paragraph-line-height: 1.7 !default; +$paragraph-font-size: 0.625rem !default; +$paragraph-font-weight: 300 !default; +$paragraph-line-height: 1.7 !default; -$lead-font-size: ($paragraph-font-size * 1.25); -$lead-font-weight: 300 !default; +$lead-font-size: ($paragraph-font-size * 1.25); +$lead-font-weight: 300 !default; -$small-font-size: 80% !default; +$small-font-size: 80% !default; -$text-muted: $gray-600 !default; +$text-muted: $gray-600 !default; -$blockquote-small-color: $gray-600 !default; -$blockquote-font-size: ($font-size-base * 1.1); +$blockquote-small-color: $gray-600 !default; +$blockquote-font-size: ($font-size-base * 1.1); -$hr-border-color: rgba($black, .1); -$hr-border-width: $border-width !default; +$hr-border-color: rgba($black, 0.1); +$hr-border-width: $border-width !default; -$mark-padding: .2em !default; +$mark-padding: 0.2em !default; -$dt-font-weight: $font-weight-bold !default; +$dt-font-weight: $font-weight-bold !default; -$list-inline-padding: .5rem !default; +$list-inline-padding: 0.5rem !default; -$mark-bg: #fcf8e3 !default; - -$hr-margin-y: $spacer * 2 !default; +$mark-bg: #fcf8e3 !default; +$hr-margin-y: $spacer * 2 !default; // Icons -$icon-size: auto !default; -$icon-size-regular: 2.375rem !default; -$icon-font-size-regular: 0.9375rem !default; -$icon-font-size-sm: 0.6875rem !default; -$icon-size-sm: 1.875rem !default; -$icon-font-size-lg: 1.325rem !default; -$icon-size-lg: 3.6rem !default; -$icon-size-xl: 5rem !default; - +$icon-size: auto !default; +$icon-size-regular: 2.375rem !default; +$icon-font-size-regular: 0.9375rem !default; +$icon-font-size-sm: 0.6875rem !default; +$icon-size-sm: 1.875rem !default; +$icon-font-size-lg: 1.325rem !default; +$icon-size-lg: 3.6rem !default; +$icon-size-xl: 5rem !default; // Tables -$table-cell-padding: 1rem !default; -$table-cell-padding-sm: .3rem !default; - -$table-bg: transparent !default; -$table-accent-bg: rgba($black, .05); -$table-hover-bg: rgba($black, .075); -$table-active-bg: $table-hover-bg !default; +$table-cell-padding: 1rem !default; +$table-cell-padding-sm: 0.3rem !default; -$table-border-width: $border-width !default; -$table-border-color: $gray-300 !default; +$table-bg: transparent !default; +$table-accent-bg: rgba($black, 0.05); +$table-hover-bg: rgba($black, 0.075); +$table-active-bg: $table-hover-bg !default; -$table-head-bg: $gray-200 !default; -$table-head-color: $gray-700 !default; +$table-border-width: $border-width !default; +$table-border-color: $gray-300 !default; -$table-dark-bg: $gray-900 !default; -$table-dark-accent-bg: rgba($white, .05); -$table-dark-hover-bg: rgba($white, .075); -$table-dark-border-color: lighten($gray-900, 7.5%); -$table-dark-color: $body-bg !default; +$table-head-bg: $gray-200 !default; +$table-head-color: $gray-700 !default; +$table-dark-bg: $gray-900 !default; +$table-dark-accent-bg: rgba($white, 0.05); +$table-dark-hover-bg: rgba($white, 0.075); +$table-dark-border-color: lighten($gray-900, 7.5%); +$table-dark-color: $body-bg !default; // Buttons + Forms -$input-btn-padding-y: .5rem !default; -$input-btn-padding-x: .7rem !default; -$input-btn-line-height: $shape-height-base !default; +$input-btn-padding-y: 0.5rem !default; +$input-btn-padding-x: 0.7rem !default; +$input-btn-line-height: $shape-height-base !default; -$input-btn-focus-width: 0 !default; -$input-btn-focus-color: rgba($component-active-bg, 1); +$input-btn-focus-width: 0 !default; +$input-btn-focus-color: rgba($component-active-bg, 1); //$input-btn-focus-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.04); -$input-btn-focus-box-shadow: none !default; +$input-btn-focus-box-shadow: none !default; -$input-btn-padding-y-sm: .25rem !default; -$input-btn-padding-x-sm: .5rem !default; -$input-btn-line-height-sm: 1.35 !default; +$input-btn-padding-y-sm: 0.25rem !default; +$input-btn-padding-x-sm: 0.5rem !default; +$input-btn-line-height-sm: 1.35 !default; -$input-btn-padding-y-lg: .875rem !default; -$input-btn-padding-x-lg: 1rem !default; -$input-btn-line-height-lg: 1.35 !default; +$input-btn-padding-y-lg: 0.875rem !default; +$input-btn-padding-x-lg: 1rem !default; +$input-btn-line-height-lg: 1.35 !default; -$input-btn-border-width: 1px !default; +$input-btn-border-width: 1px !default; -$input-btn-font-size-sm: .75rem !default; -$input-btn-font-size: .875rem !default; -$input-btn-font-size-lg: .875rem !default; +$input-btn-font-size-sm: 0.75rem !default; +$input-btn-font-size: 0.875rem !default; +$input-btn-font-size-lg: 0.875rem !default; -$input-padding-vertical: 11px !default; -$input-padding-horizontal: 19px !default; +$input-padding-vertical: 11px !default; +$input-padding-horizontal: 19px !default; // Buttons -$btn-padding-y: 11px !default; -$btn-padding-x: 40px !default; -$btn-line-height: $line-height !default; - -$btn-padding-y-sm: 5px !default; -$btn-padding-x-sm: 15px !default; -$btn-line-height-sm: $input-btn-line-height-sm !default; - -$btn-padding-y-lg: 15px !default; -$btn-padding-x-lg: 48px !default; -$btn-line-height-lg: $input-btn-line-height-lg !default; - -$btn-border-width: $input-btn-border-width !default; +$btn-padding-y: 11px !default; +$btn-padding-x: 40px !default; +$btn-line-height: $line-height !default; -$btn-font-size-lg: 1em !default; -$btn-font-weight: 600 !default; -$btn-text-transform: uppercase !default; -$btn-letter-spacing: .025em !default; -$btn-box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08); -$btn-hover-box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08); -$btn-focus-box-shadow: $btn-hover-box-shadow !default; -$btn-focus-width: $input-btn-focus-width !default; +$btn-padding-y-sm: 5px !default; +$btn-padding-x-sm: 15px !default; +$btn-line-height-sm: $input-btn-line-height-sm !default; +$btn-padding-y-lg: 15px !default; +$btn-padding-x-lg: 48px !default; +$btn-line-height-lg: $input-btn-line-height-lg !default; -$btn-active-box-shadow: none !default; -$btn-round-radius: 30px !default; +$btn-border-width: $input-btn-border-width !default; +$btn-font-size-lg: 1em !default; +$btn-font-weight: 600 !default; +$btn-text-transform: uppercase !default; +$btn-letter-spacing: 0.025em !default; +$btn-box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); +$btn-hover-box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), + 0 3px 6px rgba(0, 0, 0, 0.08); +$btn-focus-box-shadow: $btn-hover-box-shadow !default; +$btn-focus-width: $input-btn-focus-width !default; +$btn-active-box-shadow: none !default; +$btn-round-radius: 30px !default; // Forms -$input-padding-y: $input-btn-padding-y !default; -$input-padding-x: $input-btn-padding-x !default; -$input-line-height: $input-btn-line-height !default; +$input-padding-y: $input-btn-padding-y !default; +$input-padding-x: $input-btn-padding-x !default; +$input-line-height: $input-btn-line-height !default; -$input-padding-y-sm: $input-btn-padding-y-sm !default; -$input-padding-x-sm: $input-btn-padding-x-sm !default; -$input-line-height-sm: $input-btn-line-height-sm !default; +$input-padding-y-sm: $input-btn-padding-y-sm !default; +$input-padding-x-sm: $input-btn-padding-x-sm !default; +$input-line-height-sm: $input-btn-line-height-sm !default; -$input-padding-y-lg: $input-btn-padding-y-lg !default; -$input-padding-x-lg: $input-btn-padding-x-lg !default; -$input-line-height-lg: $input-btn-line-height-lg !default; +$input-padding-y-lg: $input-btn-padding-y-lg !default; +$input-padding-x-lg: $input-btn-padding-x-lg !default; +$input-line-height-lg: $input-btn-line-height-lg !default; -$input-border-radius: $border-radius !default; -$input-border-radius-xl: $border-radius-xl !default; -$input-border-radius-lg: $border-radius-lg !default; -$input-border-radius-sm: $border-radius-sm !default; +$input-border-radius: $border-radius !default; +$input-border-radius-xl: $border-radius-xl !default; +$input-border-radius-lg: $border-radius-lg !default; +$input-border-radius-sm: $border-radius-sm !default; -$input-bg: $transparent-bg !default; -$input-disabled-bg: $gray-200 !default; +$input-bg: $transparent-bg !default; +$input-disabled-bg: $gray-200 !default; -$input-muted-bg: #EDF0F5 !default; +$input-muted-bg: #edf0f5 !default; -$input-alternative-box-shadow: 0 1px 3px rgba(50,50,93,.15), 0 1px 0 rgba(0,0,0,.02); -$input-focus-alternative-box-shadow: 0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08); +$input-alternative-box-shadow: 0 1px 3px rgba(50, 50, 93, 0.15), + 0 1px 0 rgba(0, 0, 0, 0.02); +$input-focus-alternative-box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), + 0 1px 3px rgba(0, 0, 0, 0.08); -$input-color: $opacity-8 !default; -$input-border-color: #cad1d7 !default; -$input-border-width: $input-btn-border-width !default; -$input-box-shadow: none !default; // 0 1px 3px 0 $gray-400 !default; +$input-color: $opacity-8 !default; +$input-border-color: #cad1d7 !default; +$input-border-width: $input-btn-border-width !default; +$input-box-shadow: none !default; // 0 1px 3px 0 $gray-400 !default; -$input-focus-bg: $white !default; -$input-focus-border-color: rgba(50,151,211,.25); -$input-focus-color: $input-color !default; -$input-focus-width: 0 !default; -$input-focus-box-shadow: none !default; //0 1px 3px 0 $gray-500 !default; +$input-focus-bg: $white !default; +$input-focus-border-color: rgba(50, 151, 211, 0.25); +$input-focus-color: $input-color !default; +$input-focus-width: 0 !default; +$input-focus-box-shadow: none !default; //0 1px 3px 0 $gray-500 !default; -$input-placeholder-color: $gray-500 !default; -$input-focus-placeholder-color: $gray-500 !default; +$input-placeholder-color: $gray-500 !default; +$input-focus-placeholder-color: $gray-500 !default; -$input-height-border: $input-border-width * 2 !default; -$input-height-inner: ($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2) !default; -$input-height: calc(#{$input-height-inner} + #{$input-height-border}) !default; - -$input-transition: all .2s cubic-bezier(0.68, -0.55, 0.265, 1.55); +$input-height-border: $input-border-width * 2 !default; +$input-height-inner: ($font-size-base * $input-btn-line-height) + + ($input-btn-padding-y * 2) !default; +$input-height: calc(#{$input-height-inner} + #{$input-height-border}) !default; +$input-transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55); // Input groups -$input-group-addon-color: $input-placeholder-color !default; -$input-group-addon-bg: $input-bg !default; -$input-group-addon-border-color: $input-border-color !default; - -$input-group-addon-focus-color: $input-focus-color !default; -$input-group-addon-focus-bg: $input-focus-bg !default; -$input-group-addon-focus-border-color: $input-focus-border-color !default; +$input-group-addon-color: $input-placeholder-color !default; +$input-group-addon-bg: $input-bg !default; +$input-group-addon-border-color: $input-border-color !default; +$input-group-addon-focus-color: $input-focus-color !default; +$input-group-addon-focus-bg: $input-focus-bg !default; +$input-group-addon-focus-border-color: $input-focus-border-color !default; // Custom forms -$custom-control-gutter: 1.75rem !default; -$custom-control-spacer-x: 1rem !default; -$custom-control-indicator-size: 1.25rem !default; +$custom-control-gutter: 1.75rem !default; +$custom-control-spacer-x: 1rem !default; +$custom-control-indicator-size: 1.25rem !default; -$custom-control-indicator-bg: $input-bg !default; -$custom-control-indicator-border-width: 1px !default; -$custom-control-indicator-border-color: $input-border-color !default; -$custom-control-indicator-box-shadow: none !default; +$custom-control-indicator-bg: $input-bg !default; +$custom-control-indicator-border-width: 1px !default; +$custom-control-indicator-border-color: $input-border-color !default; +$custom-control-indicator-box-shadow: none !default; -$custom-control-indicator-focus-box-shadow: $custom-control-indicator-box-shadow !default; +$custom-control-indicator-focus-box-shadow: $custom-control-indicator-box-shadow !default; -$custom-control-indicator-hover-color: $component-hover-color !default; -$custom-control-indicator-hover-bg: $component-hover-bg !default; -$custom-control-indicator-hover-border-color: $component-hover-border-color !default; +$custom-control-indicator-hover-color: $component-hover-color !default; +$custom-control-indicator-hover-bg: $component-hover-bg !default; +$custom-control-indicator-hover-border-color: $component-hover-border-color !default; -$custom-control-indicator-active-color: $component-active-color !default; -$custom-control-indicator-active-bg: $component-active-bg !default; -$custom-control-indicator-active-border-color: $component-active-border-color !default; -$custom-control-indicator-active-box-shadow: $custom-control-indicator-box-shadow !default; +$custom-control-indicator-active-color: $component-active-color !default; +$custom-control-indicator-active-bg: $component-active-bg !default; +$custom-control-indicator-active-border-color: $component-active-border-color !default; +$custom-control-indicator-active-box-shadow: $custom-control-indicator-box-shadow !default; -$custom-control-indicator-checked-color: $component-active-color !default; -$custom-control-indicator-checked-bg: $component-active-bg !default; +$custom-control-indicator-checked-color: $component-active-color !default; +$custom-control-indicator-checked-bg: $component-active-bg !default; $custom-control-indicator-checked-border-color: $component-active-border-color !default; -$custom-control-indicator-checked-box-shadow: $custom-control-indicator-box-shadow !default; -$custom-control-indicator-checked-disabled-bg: rgba(theme-color("primary"), .5); +$custom-control-indicator-checked-box-shadow: $custom-control-indicator-box-shadow !default; +$custom-control-indicator-checked-disabled-bg: rgba( + theme-color("primary"), + 0.5 +); -$custom-control-indicator-disabled-bg: $gray-200 !default; -$custom-control-label-disabled-color: $gray-600 !default; +$custom-control-indicator-disabled-bg: $gray-200 !default; +$custom-control-label-disabled-color: $gray-600 !default; -$custom-checkbox-indicator-border-radius: $border-radius-sm !default; +$custom-checkbox-indicator-border-radius: $border-radius-sm !default; //$custom-checkbox-indicator-icon-checked: str-replace(url("data:image/svg+xml !default;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"), "#", "%23") !default; -$custom-toggle-slider-bg: #ddd !default; -$custom-toggle-checked-bg: theme-color("primary") !default; +$custom-toggle-slider-bg: #ddd !default; +$custom-toggle-checked-bg: theme-color("primary") !default; // Form validation -$form-feedback-valid-bg: lighten($success, 15%); -$form-feedback-valid-color: theme-color("success") !default; -$form-feedback-invalid-bg: lighten($warning, 15%); -$form-feedback-invalid-color: theme-color("warning") !default; - +$form-feedback-valid-bg: lighten($success, 15%); +$form-feedback-valid-color: theme-color("success") !default; +$form-feedback-invalid-bg: lighten($warning, 15%); +$form-feedback-invalid-color: theme-color("warning") !default; // Allows for customizing button radius independently from global border radius -$btn-border-radius: $input-border-radius !default; -$btn-border-radius-xl: $input-border-radius-xl !default; -$btn-border-radius-lg: $input-border-radius-lg !default; -$btn-border-radius-sm: $input-border-radius !default; - +$btn-border-radius: $input-border-radius !default; +$btn-border-radius-xl: $input-border-radius-xl !default; +$btn-border-radius-lg: $input-border-radius-lg !default; +$btn-border-radius-sm: $input-border-radius !default; // No UI Slider -$noui-target-bg: #eceeef !default; -$noui-target-thickness: 5px !default; -$noui-target-border-radius: 5px !default; -$noui-target-border-color: 0 !default; -$noui-target-box-shadow: inset 0 1px 2px rgba(90,97,105,.1); +$noui-target-bg: #eceeef !default; +$noui-target-thickness: 5px !default; +$noui-target-border-radius: 5px !default; +$noui-target-border-color: 0 !default; +$noui-target-box-shadow: inset 0 1px 2px rgba(90, 97, 105, 0.1); -$noui-slider-connect-bg: $primary !default; +$noui-slider-connect-bg: $primary !default; $noui-slider-connect-disabled-bg: #b2b2b2 !default; -$noui-handle-width: 15px !default; -$noui-handle-bg: theme-color("primary") !default; -$noui-handle-border: 0 !default; -$noui-handle-border-radius: 100% !default; - -$noui-origin-border-radius: 2px !default; +$noui-handle-width: 15px !default; +$noui-handle-bg: theme-color("primary") !default; +$noui-handle-border: 0 !default; +$noui-handle-border-radius: 100% !default; +$noui-origin-border-radius: 2px !default; // Dropdown -$dropdown-bg: $white !default; -$dropdown-border-width: 0 !default; -$dropdown-border-color: rgba($black, .15); -$dropdown-border-radius: $border-radius-xs !default; -$dropdown-box-shadow: 0 50px 100px rgba(50, 50, 93, .1), 0 15px 35px rgba(50, 50, 93, .15), 0 5px 15px rgba(0, 0, 0, .1); +$dropdown-bg: $white !default; +$dropdown-border-width: 0 !default; +$dropdown-border-color: rgba($black, 0.15); +$dropdown-border-radius: $border-radius-xs !default; +$dropdown-box-shadow: 0 50px 100px rgba(50, 50, 93, 0.1), + 0 15px 35px rgba(50, 50, 93, 0.15), 0 5px 15px rgba(0, 0, 0, 0.1); -$dropdown-link-active-color: $component-active-color !default; -$dropdown-link-active-bg: $component-active-bg !default; +$dropdown-link-active-color: $component-active-color !default; +$dropdown-link-active-bg: $component-active-bg !default; // Navs -$nav-link-padding-y: .5rem !default; -$nav-link-padding-x: 1rem !default; -$nav-link-color: $gray-700 !default; -$nav-link-disabled-color: $gray-600 !default; +$nav-link-padding-y: 0.5rem !default; +$nav-link-padding-x: 1rem !default; +$nav-link-color: $gray-700 !default; +$nav-link-disabled-color: $gray-600 !default; -$nav-pills-padding-y: .75rem !default; -$nav-pills-padding-x: 1rem !default; +$nav-pills-padding-y: 0.75rem !default; +$nav-pills-padding-x: 1rem !default; -$nav-pills-space-x: 1rem !default; +$nav-pills-space-x: 1rem !default; -$nav-pills-bg: $white; -$nav-pills-border-width: 1px !default; -$nav-pills-border-color: theme-color("primary") !default; -$nav-pills-border-radius: $border-radius !default; +$nav-pills-bg: $white; +$nav-pills-border-width: 1px !default; +$nav-pills-border-color: theme-color("primary") !default; +$nav-pills-border-radius: $border-radius !default; -$nav-pills-link-color: theme-color("primary") !default; -$nav-pills-link-hover-color: darken(theme-color("primary"), 5%); -$nav-pills-link-active-color: color-yiq(theme-color("primary")); -$nav-pills-link-active-bg: theme-color("primary") !default; -$nav-pills-box-shadow: $btn-box-shadow !default; +$nav-pills-link-color: theme-color("primary") !default; +$nav-pills-link-hover-color: darken(theme-color("primary"), 5%); +$nav-pills-link-active-color: color-yiq(theme-color("primary")); +$nav-pills-link-active-bg: theme-color("primary") !default; +$nav-pills-box-shadow: $btn-box-shadow !default; // Navbar -$navbar-transition: all .15s linear !default; -$navbar-padding-y: .625rem !default; -$navbar-padding-x: .9375rem !default; +$navbar-transition: all 0.15s linear !default; +$navbar-padding-y: 0.625rem !default; +$navbar-padding-x: 0.9375rem !default; -$navbar-nav-link-padding-x: 1rem !default; -$navbar-nav-link-padding-y: 1rem !default; +$navbar-nav-link-padding-x: 1rem !default; +$navbar-nav-link-padding-y: 1rem !default; -$navbar-nav-link-font-family: $font-family-alt !default; -$navbar-nav-link-font-size: .9rem !default; -$navbar-nav-link-font-weight: 400 !default; -$navbar-nav-link-text-transform: normal !default; -$navbar-nav-link-letter-spacing: 0 !default; -$navbar-nav-link-border-radius: $border-radius !default; +$navbar-nav-link-font-family: $font-family-alt !default; +$navbar-nav-link-font-size: 0.9rem !default; +$navbar-nav-link-font-weight: 400 !default; +$navbar-nav-link-text-transform: normal !default; +$navbar-nav-link-letter-spacing: 0 !default; +$navbar-nav-link-border-radius: $border-radius !default; /* navbar color */ -$navbar-color: #1a1e34 !default; -$navbar-dark-bg: transparent !default; -$navbar-dark-hover-bg: rgba(255, 255, 255, .1); -$navbar-dark-active-bg: rgba(255, 255, 255, .1); -$navbar-dark-color: rgba($white, .95); -$navbar-dark-hover-color: rgba($white, .65); -$navbar-dark-active-color: rgba($white, .65); -$navbar-dark-disabled-color: rgba($white, .25); -$navbar-dark-toggler-border-color: transparent !default; - -$navbar-light-bg: transparent !default; -$navbar-light-hover-bg: rgba(0, 0, 0, .1); -$navbar-light-active-bg: rgba(0, 0, 0, .1); -$navbar-light-color: rgba($black, .5); -$navbar-light-hover-color: rgba($black, .7); -$navbar-light-active-color: rgba($black, .9); -$navbar-light-disabled-color: rgba($black, .3); -$navbar-light-toggler-icon-bg: str-replace(url("data:image/svg+xml !default;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default; +$navbar-color: #1a1e34 !default; +$navbar-dark-bg: transparent !default; +$navbar-dark-hover-bg: rgba(255, 255, 255, 0.1); +$navbar-dark-active-bg: rgba(255, 255, 255, 0.1); +$navbar-dark-color: rgba($white, 0.95); +$navbar-dark-hover-color: rgba($white, 0.65); +$navbar-dark-active-color: rgba($white, 0.65); +$navbar-dark-disabled-color: rgba($white, 0.25); +$navbar-dark-toggler-border-color: transparent !default; + +$navbar-light-bg: transparent !default; +$navbar-light-hover-bg: rgba(0, 0, 0, 0.1); +$navbar-light-active-bg: rgba(0, 0, 0, 0.1); +$navbar-light-color: rgba($black, 0.5); +$navbar-light-hover-color: rgba($black, 0.7); +$navbar-light-active-color: rgba($black, 0.9); +$navbar-light-disabled-color: rgba($black, 0.3); +$navbar-light-toggler-icon-bg: str-replace(url("data:image/svg+xml !default;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default; $navbar-light-toggler-border-color: transparent !default; -$full-width: 100% !default; -$navbar-padding: 10px 15px !default; - +$full-width: 100% !default; +$navbar-padding: 10px 15px !default; // Alerts -$alert-padding-y: .9rem !default; +$alert-padding-y: 0.9rem !default; $alert-padding-x: 1.25rem !default; $alert-border-radius: $border-radius-sm !default; @@ -777,184 +795,177 @@ $alert-bg-level: -2 !default; $alert-border-level: -2 !default; $alert-color-level: 0 !default; - // List group -$list-group-bg: $white !default; -$list-group-border-color: $border-color !default; //rgba($black, .125); -$list-group-border-width: $border-width !default; -$list-group-border-radius: $border-radius !default; - -$list-group-item-padding-y: 1rem !default; -$list-group-item-padding-x: 1rem !default; +$list-group-bg: $white !default; +$list-group-border-color: $border-color !default; //rgba($black, .125); +$list-group-border-width: $border-width !default; +$list-group-border-radius: $border-radius !default; -$list-group-hover-bg: $gray-100 !default; -$list-group-active-color: $component-active-color !default; -$list-group-active-bg: $component-active-bg !default; -$list-group-active-border-color: $list-group-active-bg !default; +$list-group-item-padding-y: 1rem !default; +$list-group-item-padding-x: 1rem !default; -$list-group-disabled-color: $gray-600 !default; -$list-group-disabled-bg: $list-group-bg !default; +$list-group-hover-bg: $gray-100 !default; +$list-group-active-color: $component-active-color !default; +$list-group-active-bg: $component-active-bg !default; +$list-group-active-border-color: $list-group-active-bg !default; -$list-group-action-color: $gray-700 !default; -$list-group-action-hover-color: $list-group-action-color !default; +$list-group-disabled-color: $gray-600 !default; +$list-group-disabled-bg: $list-group-bg !default; -$list-group-action-active-color: $list-group-action-color !default; -$list-group-action-active-bg: $gray-200 !default; +$list-group-action-color: $gray-700 !default; +$list-group-action-hover-color: $list-group-action-color !default; +$list-group-action-active-color: $list-group-action-color !default; +$list-group-action-active-bg: $gray-200 !default; // Close -$close-font-size: $font-size-base * 1.5 !default; -$close-font-weight: $font-weight-bold !default; -$close-bg: transparent !default; -$close-hover-bg: transparent !default; -$close-color: rgba(0, 0, 0, .6); -$close-hover-color: rgba(0, 0, 0, .9); -$close-text-shadow: none !default; - +$close-font-size: $font-size-base * 1.5 !default; +$close-font-weight: $font-weight-bold !default; +$close-bg: transparent !default; +$close-hover-bg: transparent !default; +$close-color: rgba(0, 0, 0, 0.6); +$close-hover-color: rgba(0, 0, 0, 0.9); +$close-text-shadow: none !default; // Popovers -$popover-font-size: $font-size-sm !default; -$popover-bg: $white !default; -$popover-max-width: 276px !default; -$popover-border-width: 1px !default; -$popover-border-color: rgba($black, .05); -$popover-border-radius: $border-radius-lg !default; -$popover-box-shadow: 0px .5rem 2rem 0px rgba($black, .2); +$popover-font-size: $font-size-sm !default; +$popover-bg: $white !default; +$popover-max-width: 276px !default; +$popover-border-width: 1px !default; +$popover-border-color: rgba($black, 0.05); +$popover-border-radius: $border-radius-lg !default; +$popover-box-shadow: 0px 0.5rem 2rem 0px rgba($black, 0.2); -$popover-header-bg: $popover-bg !default; -$popover-header-color: $headings-color !default; -$popover-header-padding-y: .75rem !default; -$popover-header-padding-x: .75rem !default; +$popover-header-bg: $popover-bg !default; +$popover-header-color: $headings-color !default; +$popover-header-padding-y: 0.75rem !default; +$popover-header-padding-x: 0.75rem !default; -$popover-body-color: $body-color !default; -$popover-body-padding-y: $popover-header-padding-y !default; -$popover-body-padding-x: $popover-header-padding-x !default; +$popover-body-color: $body-color !default; +$popover-body-padding-y: $popover-header-padding-y !default; +$popover-body-padding-x: $popover-header-padding-x !default; -$popover-arrow-width: 1.5rem !default; -$popover-arrow-height: .75rem !default; -$popover-arrow-color: $popover-bg !default; +$popover-arrow-width: 1.5rem !default; +$popover-arrow-height: 0.75rem !default; +$popover-arrow-color: $popover-bg !default; -$popover-arrow-outer-color: transparent !default; +$popover-arrow-outer-color: transparent !default; // Breadcrumbs -$breadcrumb-bg: $black-states !default; -$breadcrumb-divider-color: $white !default; -$breadcrumb-active-color: $white !default; - - - +$breadcrumb-bg: $black-states !default; +$breadcrumb-divider-color: $white !default; +$breadcrumb-active-color: $white !default; // Badges -$badge-font-size: $font-size-xs !default; -$badge-font-weight: $font-weight-extra-bold !default; -$badge-padding-y: .25rem !default; -$badge-padding-x: .5rem !default; -$badge-border-radius: $border-radius !default; -$badge-text-transfom: uppercase; +$badge-font-size: $font-size-xs !default; +$badge-font-weight: $font-weight-extra-bold !default; +$badge-padding-y: 0.25rem !default; +$badge-padding-x: 0.5rem !default; +$badge-border-radius: $border-radius !default; +$badge-text-transfom: uppercase; -$badge-pill-padding-x: .875em !default; -$badge-pill-border-radius: $border-radius-xl !default; +$badge-pill-padding-x: 0.875em !default; +$badge-pill-border-radius: $border-radius-xl !default; -$badge-circle-size: 2rem; +$badge-circle-size: 2rem; // Pagination -$pagination-padding-y: 0 !default; -$pagination-padding-x: .6875rem !default; - +$pagination-padding-y: 0 !default; +$pagination-padding-x: 0.6875rem !default; -$pagination-color: $white !default; -$pagination-bg: transparent !default; -$pagination-border-width: $border-width !default; -$pagination-border-color: $gray-300 !default; +$pagination-color: $white !default; +$pagination-bg: transparent !default; +$pagination-border-width: $border-width !default; +$pagination-border-color: $gray-300 !default; //$pagination-focus-box-shadow: $btn-hover-box-shadow !default; -$pagination-hover-color: $gray-600 !default; -$pagination-hover-bg: $gray-300 !default; -$pagination-hover-border-color: $gray-300 !default; - -$pagination-active-color: $component-active-color !default; -$pagination-active-bg: $component-active-bg !default; -$pagination-active-border-color: $pagination-active-bg !default; -$pagination-active-box-shadow: $btn-hover-box-shadow !default; +$pagination-hover-color: $gray-600 !default; +$pagination-hover-bg: $gray-300 !default; +$pagination-hover-border-color: $gray-300 !default; -$pagination-disabled-color: $gray-600 !default; -$pagination-disabled-bg: transparent !default; -$pagination-disabled-border-color: $gray-300 !default; +$pagination-active-color: $component-active-color !default; +$pagination-active-bg: $component-active-bg !default; +$pagination-active-border-color: $pagination-active-bg !default; +$pagination-active-box-shadow: $btn-hover-box-shadow !default; +$pagination-disabled-color: $gray-600 !default; +$pagination-disabled-bg: transparent !default; +$pagination-disabled-border-color: $gray-300 !default; // Cards -$card-spacer-y: 1.25rem !default; -$card-spacer-x: 1.5rem !default; -$card-border-width: $border-width !default; -$card-border-radius: $border-radius-sm !default; -$card-border-color: rgba($black, .05); -$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}); -$card-cap-bg: $gray-100 !default; -$card-bg: $white !default; -$card-black-background: #27293d !default; -$card-img-overlay-padding: 1.25rem !default; +$card-spacer-y: 1.25rem !default; +$card-spacer-x: 1.5rem !default; +$card-border-width: $border-width !default; +$card-border-radius: $border-radius-sm !default; +$card-border-color: rgba($black, 0.05); +$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}); +$card-cap-bg: $gray-100 !default; +$card-bg: $white !default; +$card-black-background: #27293d !default; +$card-img-overlay-padding: 1.25rem !default; //$card-group-margin: ($grid-gutter-width / 2); //$card-deck-margin: $card-group-margin !default; -$card-columns-count: 3 !default; -$card-columns-gap: 1.25rem !default; -$card-columns-margin: $card-spacer-y !default; +$card-columns-count: 3 !default; +$card-columns-gap: 1.25rem !default; +$card-columns-margin: $card-spacer-y !default; // Tooltips -$tooltip-font-size: $font-size-sm !default; -$tooltip-max-width: 200px !default; -$tooltip-color: $black !default; -$tooltip-bg: $white !default; -$tooltip-border-radius: $border-radius !default; -$tooltip-opacity: .9 !default; -$tooltip-padding-y: .25rem !default; -$tooltip-padding-x: .5rem !default; -$tooltip-margin: 0 !default; +$tooltip-font-size: $font-size-sm !default; +$tooltip-max-width: 200px !default; +$tooltip-color: $black !default; +$tooltip-bg: $white !default; +$tooltip-border-radius: $border-radius !default; +$tooltip-opacity: 0.9 !default; +$tooltip-padding-y: 0.25rem !default; +$tooltip-padding-x: 0.5rem !default; +$tooltip-margin: 0 !default; -$tooltip-arrow-width: .8rem !default; -$tooltip-arrow-height: .4rem !default; -$tooltip-arrow-color: $tooltip-bg !default; +$tooltip-arrow-width: 0.8rem !default; +$tooltip-arrow-height: 0.4rem !default; +$tooltip-arrow-color: $tooltip-bg !default; // Modals -$modal-inner-padding: 24px 24px 16px 24px !default; - -$modal-lg: 800px !default; -$modal-md: 500px !default; -$modal-sm: 380px !default; -$modal-title-line-height: 1.1; -$modal-content-bg: $white !default; -$modal-content-border-color: rgba($black, .2); -$modal-content-border-width: 1px !default; -$modal-content-border-radius: $border-radius-sm !default; -$modal-content-box-shadow-xs: 0px 10px 50px 0px rgba(0, 0, 0, 0.5); -$modal-content-box-shadow-sm-up: 0 15px 35px rgba(50,50,93,.2), 0 5px 15px rgba(0,0,0,.17); - -$modal-backdrop-bg: $black !default; -$modal-backdrop-opacity: .16 !default; -$modal-header-border-color: $gray-200 !default; -$modal-footer-border-color: $modal-header-border-color !default; -$modal-header-border-width: $modal-content-border-width !default; -$modal-footer-border-width: $modal-header-border-width !default; -$modal-header-padding: 24px 24px 0 24px !default; +$modal-inner-padding: 24px 24px 16px 24px !default; + +$modal-lg: 800px !default; +$modal-md: 500px !default; +$modal-sm: 380px !default; +$modal-title-line-height: 1.1; +$modal-content-bg: $white !default; +$modal-content-border-color: rgba($black, 0.2); +$modal-content-border-width: 1px !default; +$modal-content-border-radius: $border-radius-sm !default; +$modal-content-box-shadow-xs: 0px 10px 50px 0px rgba(0, 0, 0, 0.5); +$modal-content-box-shadow-sm-up: 0 15px 35px rgba(50, 50, 93, 0.2), + 0 5px 15px rgba(0, 0, 0, 0.17); + +$modal-backdrop-bg: $black !default; +$modal-backdrop-opacity: 0.16 !default; +$modal-header-border-color: $gray-200 !default; +$modal-footer-border-color: $modal-header-border-color !default; +$modal-header-border-width: $modal-content-border-width !default; +$modal-footer-border-width: $modal-header-border-width !default; +$modal-header-padding: 24px 24px 0 24px !default; // Progress bars -$progress-height: .5rem !default; -$progress-bg: rgba(0, 0, 0, 0.3) !default; -$progress-border-radius: $border-radius-xl !default; -$progress-box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.3) !default; -$progress-bar-color: $white !default; +$progress-height: 0.5rem !default; +$progress-bg: rgba(0, 0, 0, 0.3) !default; +$progress-border-radius: $border-radius-xl !default; +$progress-box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.3) !default; +$progress-bar-color: $white !default; // Datepicker @@ -974,10 +985,13 @@ $datepicker-header-cell-border-radius: $border-radius !default; $datepicker-active-color: $white !default; $datepicker-active-background: theme-color("primary") !default; -$datepicker-active-box-shadow: none !default; +$datepicker-active-box-shadow: none !default; $datepicker-range-background: theme-color("primary") !default; -$datepicker-range-cell-focused-background: darken($datepicker-range-background, 5%); +$datepicker-range-cell-focused-background: darken( + $datepicker-range-background, + 5% +); $datepicker-range-color: $white !default; $datepicker-range-highlighted-bg: $gray-200 !default; @@ -985,10 +999,9 @@ $datepicker-dropdown-border: lighten($gray-400, 40%); $datepicker-dropdown-bg: $white !default; $datepicker-highlighted-bg: $datepicker-active-background !default; - // Footer -$footer-link-font-size: .85rem !default; +$footer-link-font-size: 0.85rem !default; $footer-bg: theme-color("secondary") !default; $footer-color: $gray-600 !default; $footer-link-color: $gray-600 !default; diff --git a/src/assets/sass/black-dashboard/custom/_white-content.scss b/src/assets/sass/black-dashboard/custom/_white-content.scss index cbe626e3..994ac516 100644 --- a/src/assets/sass/black-dashboard/custom/_white-content.scss +++ b/src/assets/sass/black-dashboard/custom/_white-content.scss @@ -1,221 +1,233 @@ -.white-content{ - +.white-content { background: $light-bg; - .navbar.navbar-transparent .navbar-brand{ + .navbar.navbar-transparent .navbar-brand { color: $black-states; } - .navbar.navbar-transparent .navbar-toggler-bar{ + .navbar.navbar-transparent .navbar-toggler-bar { background: $black-states; } - .navbar.navbar-transparent .navbar-nav li a:not(.dropdown-item){ + .navbar.navbar-transparent .navbar-nav li a:not(.dropdown-item) { + color: $black-states; + & i { color: $black-states; - & i{ - color: $black-states; - } + } } - .navbar.navbar-transparent .navbar-minimize button i{ + .navbar.navbar-transparent .navbar-minimize button i { color: $black-states; } - .navbar.navbar-transparent .search-bar.input-group i{ + .navbar.navbar-transparent .search-bar.input-group i { color: $black-states; } - .navbar.navbar-transparent .search-bar.input-group .form-control{ + .navbar.navbar-transparent .search-bar.input-group .form-control { color: $default; - &::placeholder{ + &::placeholder { color: $dark-gray; } } - .sidebar{ - box-shadow: 0 2px 22px 0 rgba(0,0,0,.1), 0 4px 20px 0 rgba(0,0,0,.15); - p{ + .sidebar { + box-shadow: 0 2px 22px 0 rgba(0, 0, 0, 0.1), + 0 4px 20px 0 rgba(0, 0, 0, 0.15); + p { color: $opacity-8; } } - .main-panel{ + .main-panel { background: $light-bg; } - h1, h2, h3, h4, h5, h6, p, ol li, ul li, pre { + h1, + h2, + h3, + h4, + h5, + h6, + p, + ol li, + ul li, + pre { color: $black-states; } - .font-icon-detail i{ + .font-icon-detail i { color: $black; } - .btn:not([data-action]):hover{ - box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08); + .btn:not([data-action]):hover { + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); } - .btn-neutral.btn-link{ + .btn-neutral.btn-link { color: rgba($black, 0.7); } //style for inputs - @include form-control-placeholder(rgba($black,0.4), 1); - .has-danger{ - .form-control, .input-group-prepend .input-group-text{ - border-color: $danger-states; - } + @include form-control-placeholder(rgba($black, 0.4), 1); + .has-danger { + .form-control, + .input-group-prepend .input-group-text { + border-color: $danger-states; } + } - .input-group-prepend .input-group-text{ - border-color: rgba($black-states,0.5); - color: $black-states; - } + .input-group-prepend .input-group-text { + border-color: rgba($black-states, 0.5); + color: $black-states; + } - .form-control{ - color: $black; - border-color: rgba($black-states,0.5); - &:focus{ - border-color: $primary; - } + .form-control { + color: $black; + border-color: rgba($black-states, 0.5); + &:focus { + border-color: $primary; } + } .form-group.no-border, - .input-group.no-border{ - .form-control, - .form-control + .input-group-prepend .input-group-text, - .form-control + .input-group-append .input-group-text, - .input-group-prepend .input-group-text, - .input-group-append .input-group-text{ - background-color: $opacity-gray-3; - &:focus, - &:active, - &:active{ - background-color: $opacity-gray-5; - } + .input-group.no-border { + .form-control, + .form-control + .input-group-prepend .input-group-text, + .form-control + .input-group-append .input-group-text, + .input-group-prepend .input-group-text, + .input-group-append .input-group-text { + background-color: $opacity-gray-3; + &:focus, + &:active, + &:active { + background-color: $opacity-gray-5; } + } - .form-control{ - &:focus{ - & + .input-group-prepend .input-group-text, - & + .input-group-append .input-group-text{ - - background-color: $transparent-bg; - } - } + .form-control { + &:focus { + & + .input-group-prepend .input-group-text, + & + .input-group-append .input-group-text { + background-color: $transparent-bg; + } } - - + } } - .input-group[disabled]{ - .input-group-prepend .input-group-text, - .input-group-append .input-group-text{ - background-color: $black; - } + .input-group[disabled] { + .input-group-prepend .input-group-text, + .input-group-append .input-group-text { + background-color: $black; + } } - .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control{ + .form-control[disabled], + .form-control[readonly], + fieldset[disabled] .form-control { background: $light-gray; - border-color: rgba($black-states,0.3); + border-color: rgba($black-states, 0.3); } - .input-group-focus{ - .input-group-prepend .input-group-text, - .input-group-append .input-group-text, - .form-control{ - border-color: $primary; - } - - &.no-border{ - .input-group-prepend .input-group-text, - .input-group-append .input-group-text{ + .input-group-focus { + .input-group-prepend .input-group-text, + .input-group-append .input-group-text, + .form-control { + border-color: $primary; + } - background-color: $opacity-gray-5; - } + &.no-border { + .input-group-prepend .input-group-text, + .input-group-append .input-group-text { + background-color: $opacity-gray-5; } + } } .input-group-prepend .input-group-text { - border-right: none; + border-right: none; } .input-group-append .input-group-text { - border-left: none; + border-left: none; } - .has-danger .form-control:focus, .has-success.input-group-focus .input-group-append .input-group-text, .has-success.input-group-focus .input-group-prepend .input-group-text { + .has-danger .form-control:focus, + .has-success.input-group-focus .input-group-append .input-group-text, + .has-success.input-group-focus .input-group-prepend .input-group-text { border-color: $danger-states; } - .has-success .form-control:focus, .has-success.input-group-focus .input-group-append .input-group-text, .has-success.input-group-focus .input-group-prepend .input-group-text { + .has-success .form-control:focus, + .has-success.input-group-focus .input-group-append .input-group-text, + .has-success.input-group-focus .input-group-prepend .input-group-text { border-color: darken($success, 10%); } - .btn.btn-link{ - &:hover,&:active, &:focus{ + .btn.btn-link { + &:hover, + &:active, + &:focus { color: $dark-gray !important; } } - .btn-group .btn.active{ - box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08); + .btn-group .btn.active { + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); } - .card:not(.card-white){ + .card:not(.card-white) { background: $white; box-shadow: 0 1px 15px 0 rgba(123, 123, 123, 0.05); - .card-header{ + .card-header { color: $black; - a[data-toggle="collapse"]{ + a[data-toggle="collapse"] { color: $black; } } - .card-header .card-title, .card-body .card-title{ + .card-header .card-title, + .card-body .card-title { color: $black-states; } - .card-body{ - .card-category, .card-description{ + .card-body { + .card-category, + .card-description { color: $black-states; } } - - label:not(.btn){ + label:not(.btn) { color: $default; } - - &.nav-pills .nav-item .nav-link { - color: $nav-gray; - background-color: hsla(0,0%,87%,.3); - &:not(.active):hover{ - background: hsla(0,0%,87%,.5); - } - &.active{ - color: $white; - - } + &.nav-pills .nav-item .nav-link { + color: $nav-gray; + background-color: hsla(0, 0%, 87%, 0.3); + &:not(.active):hover { + background: hsla(0, 0%, 87%, 0.5); + } + &.active { + color: $white; + } } .tab-content .tab-pane { - color: $nav-gray; + color: $nav-gray; } - - .card{ + .card { box-shadow: none; } - &.card-plain{ + &.card-plain { background: $transparent-bg; box-shadow: none; } - &.card-tasks{ - .card-body{ - i{ - color: rgba(34,42,66,0.7); - &:hover{ + &.card-tasks { + .card-body { + i { + color: rgba(34, 42, 66, 0.7); + &:hover { color: $black; } } @@ -223,11 +235,9 @@ } } - .table{ - - > tbody > tr > td { - color: rgba($black, 0.7) !important; - + .table { + > tbody > tr > td { + color: rgba($black, 0.7) !important; } > thead > tr > th, @@ -235,65 +245,75 @@ > tfoot > tr > th, > thead > tr > td, > tbody > tr > td, - > tfoot > tr > td{ - border-color: rgba($black, 0.2); - padding: 12px 7px; - vertical-align: middle; + > tfoot > tr > td { + border-color: rgba($black, 0.2); + padding: 12px 7px; + vertical-align: middle; } - > thead > tr > th, button.btn-neutral.btn-link{ + > thead > tr > th, + button.btn-neutral.btn-link { color: rgba($black, 0.7); } } - .footer ul li a{ + .footer ul li a { color: $black-states; } - .footer .copyright{ + .footer .copyright { color: $black-states; } - .progress-container, .progress-container.progress.sm{ - .progress{ - background: rgba($black,0.1); - box-shadow: 0 0 0 3px rgba($black,0.1); - .progress-value{ - color: $default; - } + .progress-container, + .progress-container.progress.sm { + .progress { + background: rgba($black, 0.1); + box-shadow: 0 0 0 3px rgba($black, 0.1); + .progress-value { + color: $default; } + } - .progress-badge{ - color: $black-states; - } + .progress-badge { + color: $black-states; + } } - .full-page{ - background: $light-bg; - - h1, h2, h3, h4, h5, h6, p, ol li, ul li, pre { - color: $black-states; - } + .full-page { + background: $light-bg; - .description{ - color: $dark-gray; - } + h1, + h2, + h3, + h4, + h5, + h6, + p, + ol li, + ul li, + pre { + color: $black-states; + } - .footer ul li a{ - color: $black-states; - } + .description { + color: $dark-gray; + } - .footer .copyright{ - color: $black-states; - } - } + .footer ul li a { + color: $black-states; + } - .nav-pills .nav-item .nav-link:not(.active){ - background: darken($light-bg,10%); - color: $black-states; - &:hover{ - background: darken($white,20%); + .footer .copyright { + color: $black-states; + } + } - } - } + .nav-pills .nav-item .nav-link:not(.active) { + background: darken($light-bg, 10%); + color: $black-states; + &:hover { + background: darken($white, 20%); + } + } } diff --git a/src/assets/sass/black-dashboard/custom/cards/_card-chart.scss b/src/assets/sass/black-dashboard/custom/cards/_card-chart.scss index 3eb2c82e..5f9a1b9c 100644 --- a/src/assets/sass/black-dashboard/custom/cards/_card-chart.scss +++ b/src/assets/sass/black-dashboard/custom/cards/_card-chart.scss @@ -1,30 +1,30 @@ .card-chart { overflow: hidden; - .card-header{ - .card-title{ - i{ + .card-header { + .card-title { + i { font-size: 16px; margin-right: 5px; margin-bottom: 3px; } } - .card-category{ + .card-category { margin-bottom: 5px; } } - .card-body{ - padding-left: 5px; - padding-right: 5px; - .tab-space{ - padding: 0; - } + .card-body { + padding-left: 5px; + padding-right: 5px; + .tab-space { + padding: 0; } - .table{ + } + .table { margin-bottom: 0; - td{ + td { border-top: none; - border-bottom: 1px solid rgba($white,0.1); + border-bottom: 1px solid rgba($white, 0.1); } } @@ -40,34 +40,32 @@ .card-footer { margin-top: 15px; - .stats{ + .stats { color: $dark-gray; } } - .dropdown{ + .dropdown { position: absolute; right: 20px; top: 20px; - .btn{ + .btn { margin: 0; } } - &.card-chart-pie{ - .chart-area{ + &.card-chart-pie { + .chart-area { padding: 10px 0 25px; height: auto; } - .card-title{ + .card-title { margin-bottom: 10px; - i{ + i { font-size: 1rem; } } - } - } diff --git a/src/assets/sass/black-dashboard/custom/cards/_card-plain.scss b/src/assets/sass/black-dashboard/custom/cards/_card-plain.scss index 34066287..e67403fb 100644 --- a/src/assets/sass/black-dashboard/custom/cards/_card-plain.scss +++ b/src/assets/sass/black-dashboard/custom/cards/_card-plain.scss @@ -10,7 +10,7 @@ } &:not(.card-subcategories).card-body { - padding-left: 0; - padding-right: 0; + padding-left: 0; + padding-right: 0; } } diff --git a/src/assets/sass/black-dashboard/custom/cards/_card-user.scss b/src/assets/sass/black-dashboard/custom/cards/_card-user.scss index aa2ab39e..8ee6f48f 100644 --- a/src/assets/sass/black-dashboard/custom/cards/_card-user.scss +++ b/src/assets/sass/black-dashboard/custom/cards/_card-user.scss @@ -1,77 +1,75 @@ .card-user { overflow: hidden; - .image { - height: 120px; - } - - .author { - text-align: center; - text-transform: none; - margin-top: 25px; - - a + p.description { - margin-top: -7px; - } + .image { + height: 120px; + } - .block { - position: absolute; - height: 100px; - width: 250px; - &.block-one { - @include linear-gradient-right(rgba($primary,0.6), rgba($primary,0)); - @include nc-rotate(150deg,10); - margin-top: -90px; - margin-left: -50px; - } + .author { + text-align: center; + text-transform: none; + margin-top: 25px; - &.block-two { - @include linear-gradient-right(rgba($primary,0.6), rgba($primary,0)); - @include nc-rotate(30deg,10); - margin-top: -40px; - margin-left: -100px; - } + a + p.description { + margin-top: -7px; + } - &.block-three { - @include linear-gradient-right(rgba($primary,0.6), rgba($primary,0)); - @include nc-rotate(170deg,10); - margin-top: -70px; - right: -45px; + .block { + position: absolute; + height: 100px; + width: 250px; + &.block-one { + @include linear-gradient-right(rgba($primary, 0.6), rgba($primary, 0)); + @include nc-rotate(150deg, 10); + margin-top: -90px; + margin-left: -50px; + } - } + &.block-two { + @include linear-gradient-right(rgba($primary, 0.6), rgba($primary, 0)); + @include nc-rotate(30deg, 10); + margin-top: -40px; + margin-left: -100px; + } - &.block-four { - @include linear-gradient-right(rgba($primary,0.6), rgba($primary,0)); - @include nc-rotate(150deg,10); - margin-top: -25px; - right: -45px; + &.block-three { + @include linear-gradient-right(rgba($primary, 0.6), rgba($primary, 0)); + @include nc-rotate(170deg, 10); + margin-top: -70px; + right: -45px; + } - } - } + &.block-four { + @include linear-gradient-right(rgba($primary, 0.6), rgba($primary, 0)); + @include nc-rotate(150deg, 10); + margin-top: -25px; + right: -45px; + } } + } - .avatar { - width: 124px; - height: 124px; - border: 5px solid lighten($black,5%); - border-bottom-color: $transparent-bg; - background-color: $transparent-bg; - position: relative; - } + .avatar { + width: 124px; + height: 124px; + border: 5px solid lighten($black, 5%); + border-bottom-color: $transparent-bg; + background-color: $transparent-bg; + position: relative; + } - .card-body { - min-height: 240px; - } + .card-body { + min-height: 240px; + } - hr { - margin: 5px 15px; - } + hr { + margin: 5px 15px; + } - .button-container { - margin-bottom: 6px; - text-align: center; - } + .button-container { + margin-bottom: 6px; + text-align: center; + } - .card-description { - margin-top: 30px; - } + .card-description { + margin-top: 30px; + } } diff --git a/src/assets/sass/black-dashboard/custom/mixins/_alert.scss b/src/assets/sass/black-dashboard/custom/mixins/_alert.scss index 5fc40577..81aa29e1 100644 --- a/src/assets/sass/black-dashboard/custom/mixins/_alert.scss +++ b/src/assets/sass/black-dashboard/custom/mixins/_alert.scss @@ -1,14 +1,14 @@ @mixin alert-variant($background, $border, $color) { - color: color-yiq($background); - // @include gradient-bg($background); - background-color: lighten($background, 5%); - border-color: $border; + color: color-yiq($background); + // @include gradient-bg($background); + background-color: lighten($background, 5%); + border-color: $border; - hr { - border-top-color: darken($border, 5%); - } + hr { + border-top-color: darken($border, 5%); + } - .alert-link { - color: darken($color, 10%); - } + .alert-link { + color: darken($color, 10%); + } } diff --git a/src/assets/sass/black-dashboard/custom/mixins/_background-variant.scss b/src/assets/sass/black-dashboard/custom/mixins/_background-variant.scss index d6bc3c00..6388caca 100644 --- a/src/assets/sass/black-dashboard/custom/mixins/_background-variant.scss +++ b/src/assets/sass/black-dashboard/custom/mixins/_background-variant.scss @@ -1,18 +1,22 @@ // Contextual backgrounds @mixin bg-variant($parent, $color) { - #{$parent} { - background-color: $color !important; - } - a#{$parent}, - button#{$parent} { - @include hover-focus { - background-color: darken($color, 10%) !important; - } + #{$parent} { + background-color: $color !important; + } + a#{$parent}, + button#{$parent} { + @include hover-focus { + background-color: darken($color, 10%) !important; } + } } @mixin bg-gradient-variant($parent, $color) { - #{$parent} { - background: linear-gradient(87deg, $color 0, adjust-hue($color, 25%) 100%) !important; - } + #{$parent} { + background: linear-gradient( + 87deg, + $color 0, + adjust-hue($color, 25%) 100% + ) !important; + } } diff --git a/src/assets/sass/black-dashboard/custom/mixins/_badges.scss b/src/assets/sass/black-dashboard/custom/mixins/_badges.scss index c54fd896..05285822 100644 --- a/src/assets/sass/black-dashboard/custom/mixins/_badges.scss +++ b/src/assets/sass/black-dashboard/custom/mixins/_badges.scss @@ -9,7 +9,7 @@ background-color: darken($bg, 3%); } } - .tagsinput-remove-link{ - color: $white; + .tagsinput-remove-link { + color: $white; } } diff --git a/src/assets/sass/black-dashboard/custom/mixins/_buttons.scss b/src/assets/sass/black-dashboard/custom/mixins/_buttons.scss index 54f0fd94..ac260cb8 100644 --- a/src/assets/sass/black-dashboard/custom/mixins/_buttons.scss +++ b/src/assets/sass/black-dashboard/custom/mixins/_buttons.scss @@ -1,343 +1,408 @@ @mixin btn-styles($btn-color, $btn-states-color) { @include diagonal-gradient($btn-color, $btn-states-color); - background-color: $btn-color; - transition: all 0.15s ease; + background-color: $btn-color; + transition: all 0.15s ease; + box-shadow: none; + &.animation-on-hover:hover { + background-position: bottom left; + transition: 0.3s ease-in-out; + } + + &:hover, + &:focus, + &:active, + &.active, + &:active:focus, + &:active:hover, + &.active:focus, + &.active:hover { + background-color: $btn-states-color !important; + background-image: linear-gradient( + to bottom left, + $btn-color, + $btn-states-color, + $btn-color + ) !important; + background-image: -webkit-linear-gradient( + to bottom left, + $btn-color, + $btn-states-color, + $btn-color + ) !important; + background-image: -o-linear-gradient( + to bottom left, + $btn-color, + $btn-states-color, + $btn-color + ) !important; + background-image: -moz-linear-gradient( + to bottom left, + $btn-color, + $btn-states-color, + $btn-color + ) !important; + color: $white; box-shadow: none; - &.animation-on-hover:hover{ - background-position: bottom left; - transition:0.3s ease-in-out; - } + } + &:active { + box-shadow: none !important; + transform: translateY(1px) !important; + transition: all 0.15s ease; + } + + &:not([data-action]):hover { + box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4); + transform: translateY(-1px); + -webkit-transform: translateY(-1px); + } + + &.disabled, + &:disabled, + &[disabled], + fieldset[disabled] & { + &, &:hover, &:focus, + &.focus, &:active, - &.active, - &:active:focus, - &:active:hover, - &.active:focus, - &.active:hover - { - background-color: $btn-states-color !important; - background-image: linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important; - background-image: -webkit-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important; - background-image: -o-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important; - background-image: -moz-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important; - color: $white; - box-shadow: none; + &.active { + background-color: $btn-color; + border-color: $btn-color; } + } - &:active{ - box-shadow: none !important; - transform: translateY(1px) !important; - transition: all .15s ease; - } + // btn-neutral style + @if $btn-color == $white { + color: $primary; - &:not([data-action]):hover{ + &.btn-danger { + color: $danger; - box-shadow: 2px 2px 6px rgba(0,0,0,0.4); - transform: translateY(-1px); - -webkit-transform: translateY(-1px); + &:hover, + &:focus, + &:active, + &:active:focus { + color: $danger-states; + } } - &.disabled, - &:disabled, - &[disabled], - fieldset[disabled] & { - &, - &:hover, - &:focus, - &.focus, - &:active, - &.active { - background-color: $btn-color; - border-color: $btn-color; - } + &.btn-info { + color: $info; + + &:hover, + &:focus, + &:active, + &:active:focus { + color: $info-states; + } } - // btn-neutral style - @if $btn-color == $white{ - color: $primary; - - &.btn-danger{ - color: $danger; - - &:hover, - &:focus, - &:active, - &:active:focus{ - color: $danger-states; - } - } - - &.btn-info{ - color: $info; - - &:hover, - &:focus, - &:active, - &:active:focus{ - color: $info-states; - } - } - - &.btn-warning{ - color: $warning; - - &:hover, - &:focus, - &:active, - &:active:focus{ - color: $warning-states; - } - } - - &.btn-success{ - color: $success; - - &:hover, - &:focus, - &:active, - &:active:focus{ - color: $success-states; - } - } - - &.btn-default{ - color: $default; - - &:hover, - &:focus, - &:active, - &:active:focus{ - color: $default-states; - } - } - - &.active, - &:active, - &:active:focus, - &:active:hover, - &.active:focus, - &.active:hover, - .show > &.dropdown-toggle, - .show > &.dropdown-toggle:focus, - .show > &.dropdown-toggle:hover { - background-color: $white; - color: $primary-states; - box-shadow: none; - } - - &:hover, - &:focus{ - color: $primary-states; - - &:not(.nav-link){ - box-shadow: none; - } - - } + &.btn-warning { + color: $warning; - } @else { - color: $white; + &:hover, + &:focus, + &:active, + &:active:focus { + color: $warning-states; + } } - &.btn-simple{ - color: $btn-color; - border-color: $btn-color; - background: $transparent-bg; - - &:hover, - &:focus, - &:active, - &:not(:disabled):not(.disabled):active{ - color: $btn-color; - border-color: $btn-color; - background-color: $transparent-bg !important; - background-image: none !important; - box-shadow: none; - } - - &.active{ - border-color: $btn-color !important; - &:hover, - &:focus, - &:active, - &:not(:disabled):not(.disabled):active{ - color: $white; - border-color: $btn-color; - background-image: linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important; - background-image: -webkit-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important; - background-image: -o-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important; - background-image: -moz-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important; - background-color: $btn-states-color !important; - box-shadow: none; - } - } - } + &.btn-success { + color: $success; - &.btn-link{ - color: $btn-color; - &:hover, - &:focus, - &:active{ - background-color: $transparent-bg !important; - background-image: none !important; - color: $white !important; - text-decoration: none; - box-shadow: none; - } + &:hover, + &:focus, + &:active, + &:active:focus { + color: $success-states; + } } -} -@mixin button-variant($background, $border, $hover-background: darken($background, 0%), $hover-border: darken($border, 0%), $active-background: darken($background, 10%), $active-border: darken($border, 0%)) { - color: color-yiq($background); - @include gradient-bg($background); - border-color: $border; - @include box-shadow($btn-box-shadow); + &.btn-default { + color: $default; - @include hover { - color: color-yiq($hover-background); - @include gradient-bg($hover-background); - border-color: $hover-border; + &:hover, + &:focus, + &:active, + &:active:focus { + color: $default-states; + } } - &:focus, - &.focus { - // Avoid using mixin so we can pass custom focus shadow properly - @if $enable-shadows { - box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5); - } - @else { - box-shadow: 0 0 0 $btn-focus-width rgba($border, .5); - } - } // Disabled comes first so active can properly restyle - &.disabled, - &:disabled { - color: color-yiq($background); - background-color: $background; - border-color: $border; + &.active, + &:active, + &:active:focus, + &:active:hover, + &.active:focus, + &.active:hover, + .show > &.dropdown-toggle, + .show > &.dropdown-toggle:focus, + .show > &.dropdown-toggle:hover { + background-color: $white; + color: $primary-states; + box-shadow: none; } - &:not(:disabled):not(.disabled):active, - &:not(:disabled):not(.disabled).active, - .show>&.dropdown-toggle { - color: color-yiq($active-background); - background-color: $active-background; - @if $enable-gradients { - background-image: none; // Remove the gradient for the pressed/active state - } - border-color: $active-border; - - &:focus { - // Avoid using mixin so we can pass custom focus shadow properly - @if $enable-shadows { - box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5); - } - @else { - box-shadow: 0 0 0 $btn-focus-width rgba($border, .5); - } - } + &:hover, + &:focus { + color: $primary-states; + + &:not(.nav-link) { + box-shadow: none; + } } -} + } @else { + color: $white; + } -@mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) { - color: $color; - background-color: transparent; - background-image: none; - border-color: $color; + &.btn-simple { + color: $btn-color; + border-color: $btn-color; + background: $transparent-bg; - &:hover { - color: $color-hover; - background-color: $active-background; - border-color: $active-border; + &:hover, + &:focus, + &:active, + &:not(:disabled):not(.disabled):active { + color: $btn-color; + border-color: $btn-color; + background-color: $transparent-bg !important; + background-image: none !important; + box-shadow: none; + } + + &.active { + border-color: $btn-color !important; + &:hover, + &:focus, + &:active, + &:not(:disabled):not(.disabled):active { + color: $white; + border-color: $btn-color; + background-image: linear-gradient( + to bottom left, + $btn-color, + $btn-states-color, + $btn-color + ) !important; + background-image: -webkit-linear-gradient( + to bottom left, + $btn-color, + $btn-states-color, + $btn-color + ) !important; + background-image: -o-linear-gradient( + to bottom left, + $btn-color, + $btn-states-color, + $btn-color + ) !important; + background-image: -moz-linear-gradient( + to bottom left, + $btn-color, + $btn-states-color, + $btn-color + ) !important; + background-color: $btn-states-color !important; + box-shadow: none; + } } + } + &.btn-link { + color: $btn-color; + &:hover, &:focus, - &.focus { - box-shadow: 0 0 0 $btn-focus-width rgba($color, .5); + &:active { + background-color: $transparent-bg !important; + background-image: none !important; + color: $white !important; + text-decoration: none; + box-shadow: none; } + } +} - &.disabled, - &:disabled { - color: $color; - background-color: transparent; +@mixin button-variant( + $background, + $border, + $hover-background: darken($background, 0%), + $hover-border: darken($border, 0%), + $active-background: darken($background, 10%), + $active-border: darken($border, 0%) +) { + color: color-yiq($background); + @include gradient-bg($background); + border-color: $border; + @include box-shadow($btn-box-shadow); + + @include hover { + color: color-yiq($hover-background); + @include gradient-bg($hover-background); + border-color: $hover-border; + } + + &:focus, + &.focus { + // Avoid using mixin so we can pass custom focus shadow properly + @if $enable-shadows { + box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba($border, 0.5); + } @else { + box-shadow: 0 0 0 $btn-focus-width rgba($border, 0.5); + } + } // Disabled comes first so active can properly restyle + &.disabled, + &:disabled { + color: color-yiq($background); + background-color: $background; + border-color: $border; + } + + &:not(:disabled):not(.disabled):active, + &:not(:disabled):not(.disabled).active, + .show > &.dropdown-toggle { + color: color-yiq($active-background); + background-color: $active-background; + @if $enable-gradients { + background-image: none; // Remove the gradient for the pressed/active state } + border-color: $active-border; + + &:focus { + // Avoid using mixin so we can pass custom focus shadow properly + @if $enable-shadows { + box-shadow: $btn-active-box-shadow, + 0 0 0 $btn-focus-width rgba($border, 0.5); + } @else { + box-shadow: 0 0 0 $btn-focus-width rgba($border, 0.5); + } + } + } +} - &:not(:disabled):not(.disabled):active, - &:not(:disabled):not(.disabled).active, - .show>&.dropdown-toggle { - color: color-yiq($active-background); - background-color: $active-background; - border-color: $active-border; - - &:focus { - // Avoid using mixin so we can pass custom focus shadow properly - @if $enable-shadows and $btn-active-box-shadow !=none { - box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5); - } - @else { - box-shadow: 0 0 0 $btn-focus-width rgba($color, .5); - } - } +@mixin button-outline-variant( + $color, + $color-hover: color-yiq($color), + $active-background: $color, + $active-border: $color +) { + color: $color; + background-color: transparent; + background-image: none; + border-color: $color; + + &:hover { + color: $color-hover; + background-color: $active-background; + border-color: $active-border; + } + + &:focus, + &.focus { + box-shadow: 0 0 0 $btn-focus-width rgba($color, 0.5); + } + + &.disabled, + &:disabled { + color: $color; + background-color: transparent; + } + + &:not(:disabled):not(.disabled):active, + &:not(:disabled):not(.disabled).active, + .show > &.dropdown-toggle { + color: color-yiq($active-background); + background-color: $active-background; + border-color: $active-border; + + &:focus { + // Avoid using mixin so we can pass custom focus shadow properly + @if $enable-shadows and $btn-active-box-shadow !=none { + box-shadow: $btn-active-box-shadow, + 0 0 0 $btn-focus-width rgba($color, 0.5); + } @else { + box-shadow: 0 0 0 $btn-focus-width rgba($color, 0.5); + } } + } } // Button sizes -@mixin btn-size($padding-vertical, $padding-horizontal, $font-size, $border){ - font-size: $font-size; - border-radius: $border; - padding: $padding-vertical $padding-horizontal; - - &.btn-simple{ - padding: $padding-vertical - 1 $padding-horizontal - 1; - } - +@mixin btn-size($padding-vertical, $padding-horizontal, $font-size, $border) { + font-size: $font-size; + border-radius: $border; + padding: $padding-vertical $padding-horizontal; + + &.btn-simple { + padding: $padding-vertical - 1 $padding-horizontal - 1; + } } // for social buttons -@mixin social-buttons-color ($color, $state-color){ - @include diagonal-gradient($color, darken($color,20%)); - //background-color: $color; +@mixin social-buttons-color($color, $state-color) { + @include diagonal-gradient($color, darken($color, 20%)); + //background-color: $color; + color: $white; + background-size: 210% 210%; + background-position: top right; + background-repeat: space; + + &:focus, + &:active, + &:hover { + background-color: $state-color; + background-image: linear-gradient( + to bottom left, + $color, + darken($color, 20%), + $color + ) !important; + background-image: -webkit-linear-gradient( + to bottom left, + $color, + darken($color, 20%), + $color + ) !important; + background-image: -o-linear-gradient( + to bottom left, + $color, + darken($color, 20%), + $color + ) !important; + background-image: -moz-linear-gradient( + to bottom left, + $color, + darken($color, 20%), + $color + ) !important; color: $white; - background-size: 210% 210%; - background-position: top right; - background-repeat: space; + } - &:focus, - &:active, - &:hover{ - background-color: $state-color; - background-image: linear-gradient(to bottom left, $color, darken($color,20%), $color) !important; - background-image: -webkit-linear-gradient(to bottom left, $color, darken($color,20%), $color) !important; - background-image: -o-linear-gradient(to bottom left, $color, darken($color,20%), $color) !important; - background-image: -moz-linear-gradient(to bottom left, $color, darken($color,20%), $color) !important; - color: $white; - } + &.btn-simple { + color: $state-color; + background-color: $transparent-bg; + background-image: none !important; + box-shadow: none; + border-color: $state-color; - &.btn-simple{ - color: $state-color; - background-color: $transparent-bg; - background-image: none !important; - box-shadow: none; - border-color: $state-color; - - &:hover, - &:focus, - &:active{ - color: $state-color; - border-color: $state-color; - } + &:hover, + &:focus, + &:active { + color: $state-color; + border-color: $state-color; } + } - &.btn-neutral{ - color: $color; - background-color: $white; - + &.btn-neutral { + color: $color; + background-color: $white; - &:hover, - &:focus, - &:active{ - color: $state-color; - } + &:hover, + &:focus, + &:active { + color: $state-color; } + } } diff --git a/src/assets/sass/black-dashboard/custom/mixins/_dropdown.scss b/src/assets/sass/black-dashboard/custom/mixins/_dropdown.scss index 101e525f..7abd8350 100644 --- a/src/assets/sass/black-dashboard/custom/mixins/_dropdown.scss +++ b/src/assets/sass/black-dashboard/custom/mixins/_dropdown.scss @@ -1,26 +1,29 @@ -@mixin dropdown-colors($brand-color, $dropdown-header-color, $dropdown-color, $background-color ) { - background-color: $brand-color; +@mixin dropdown-colors( + $brand-color, + $dropdown-header-color, + $dropdown-color, + $background-color +) { + background-color: $brand-color; - &:before{ - color: $brand-color; - } - - .dropdown-header:not([href]):not([tabindex]){ - color: $dropdown-header-color; - } + &:before { + color: $brand-color; + } - .dropdown-item{ - color: $dropdown-color; + .dropdown-header:not([href]):not([tabindex]) { + color: $dropdown-header-color; + } - &:hover, - &:focus{ - background-color: $background-color; - } - } + .dropdown-item { + color: $dropdown-color; - .dropdown-divider{ - background-color: $background-color; + &:hover, + &:focus { + background-color: $background-color; } + } - + .dropdown-divider { + background-color: $background-color; + } } diff --git a/src/assets/sass/black-dashboard/custom/mixins/_forms.scss b/src/assets/sass/black-dashboard/custom/mixins/_forms.scss index 0cee9d9c..c11e6729 100644 --- a/src/assets/sass/black-dashboard/custom/mixins/_forms.scss +++ b/src/assets/sass/black-dashboard/custom/mixins/_forms.scss @@ -13,7 +13,6 @@ } } - @mixin form-validation-state($state, $color) { .#{$state}-feedback { display: none; @@ -29,13 +28,13 @@ z-index: 5; display: none; max-width: 100%; // Contain to parent when possible - padding: .5rem; - margin-top: .1rem; - font-size: .875rem; + padding: 0.5rem; + margin-top: 0.1rem; + font-size: 0.875rem; line-height: 1; color: $white; - background-color: rgba($color, .8); - border-radius: .2rem; + background-color: rgba($color, 0.8); + border-radius: 0.2rem; } .form-control, @@ -96,7 +95,8 @@ &:focus { ~ .custom-control-label::before { - box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-focus-width rgba($color, .25); + box-shadow: 0 0 0 1px $body-bg, + 0 0 0 $input-focus-width rgba($color, 0.25); } } } @@ -109,7 +109,9 @@ ~ .custom-file-label { border-color: $color; - &::before { border-color: inherit; } + &::before { + border-color: inherit; + } } ~ .#{$state}-feedback, @@ -119,7 +121,7 @@ &:focus { ~ .custom-file-label { - box-shadow: 0 0 0 $input-focus-width rgba($color, .25); + box-shadow: 0 0 0 $input-focus-width rgba($color, 0.25); } } } diff --git a/src/assets/sass/black-dashboard/custom/mixins/_icon.scss b/src/assets/sass/black-dashboard/custom/mixins/_icon.scss index 88199859..a751c506 100644 --- a/src/assets/sass/black-dashboard/custom/mixins/_icon.scss +++ b/src/assets/sass/black-dashboard/custom/mixins/_icon.scss @@ -1,4 +1,4 @@ @mixin icon-shape-variant($color) { - color: saturate(darken($color, 10%), 10); - background-color: transparentize(lighten($color, 10%), .5); -} \ No newline at end of file + color: saturate(darken($color, 10%), 10); + background-color: transparentize(lighten($color, 10%), 0.5); +} diff --git a/src/assets/sass/black-dashboard/custom/mixins/_inputs.scss b/src/assets/sass/black-dashboard/custom/mixins/_inputs.scss index ee1e4a99..44385053 100644 --- a/src/assets/sass/black-dashboard/custom/mixins/_inputs.scss +++ b/src/assets/sass/black-dashboard/custom/mixins/_inputs.scss @@ -1,127 +1,132 @@ -@mixin input-size($padding-vertical, $padding-horizontal){ - padding: $padding-vertical $padding-horizontal; +@mixin input-size($padding-vertical, $padding-horizontal) { + padding: $padding-vertical $padding-horizontal; } -@mixin form-control-placeholder($color, $opacity){ - .form-control::-moz-placeholder{ - color: $color; - @include opacity(1); - } - .form-control:-moz-placeholder{ - color: $color; - @include opacity(1); - } - .form-control::-webkit-input-placeholder{ - color: $color; - @include opacity(1); - } - .form-control:-ms-input-placeholder{ - color: $color; - @include opacity(1); - } +@mixin form-control-placeholder($color, $opacity) { + .form-control::-moz-placeholder { + color: $color; + @include opacity(1); + } + .form-control:-moz-placeholder { + color: $color; + @include opacity(1); + } + .form-control::-webkit-input-placeholder { + color: $color; + @include opacity(1); + } + .form-control:-ms-input-placeholder { + color: $color; + @include opacity(1); + } } @mixin placeholder() { - &::-moz-placeholder {@content; } // Firefox - &:-ms-input-placeholder {@content; } // Internet Explorer 10+ - &::-webkit-input-placeholder {@content; } // Safari and Chrome + &::-moz-placeholder { + @content; + } // Firefox + &:-ms-input-placeholder { + @content; + } // Internet Explorer 10+ + &::-webkit-input-placeholder { + @content; + } // Safari and Chrome } -@mixin light-form(){ - border-radius: 0; - border:0; - padding: 0; - background-color: transparent; - +@mixin light-form() { + border-radius: 0; + border: 0; + padding: 0; + background-color: transparent; } - @mixin form-control-lg-padding($padding-vertical, $padding-horizontal) { - .form-group.no-border.form-control-lg, - .input-group.no-border.form-control-lg{ - .input-group-append .input-group-text{ - padding: $padding-vertical 0 $padding-vertical $padding-horizontal; - } - - .form-control{ - padding: $padding-vertical $padding-horizontal; - - & + .input-group-prepend .input-group-text, - & + .input-group-append .input-group-text{ - padding: $padding-vertical $padding-horizontal $padding-vertical 0; - } - - - } + .form-group.no-border.form-control-lg, + .input-group.no-border.form-control-lg { + .input-group-append .input-group-text { + padding: $padding-vertical 0 $padding-vertical $padding-horizontal; } - .form-group.form-control-lg, - .input-group.form-control-lg{ - .form-control{ - padding: $padding-vertical - 1 $padding-horizontal - 1; - height: 100%; + .form-control { + padding: $padding-vertical $padding-horizontal; - & + .input-group-prepend .input-group-text, - & + .input-group-append .input-group-text{ - padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 0; - } - } + & + .input-group-prepend .input-group-text, + & + .input-group-append .input-group-text { + padding: $padding-vertical $padding-horizontal $padding-vertical 0; + } + } + } + + .form-group.form-control-lg, + .input-group.form-control-lg { + .form-control { + padding: $padding-vertical - 1 $padding-horizontal - 1; + height: 100%; + + & + .input-group-prepend .input-group-text, + & + .input-group-append .input-group-text { + padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - + 1 0; + } + } - .input-group-prepend .input-group-text, - .input-group-append .input-group-text{ - padding: $padding-vertical - 1 0 $padding-vertical $padding-horizontal - 1; + .input-group-prepend .input-group-text, + .input-group-append .input-group-text { + padding: $padding-vertical - 1 0 $padding-vertical $padding-horizontal - 1; - & + .form-control{ - padding: $padding-vertical $padding-horizontal - 1 $padding-vertical $padding-horizontal - 3; - } - } + & + .form-control { + padding: $padding-vertical $padding-horizontal - 1 $padding-vertical + $padding-horizontal - 3; + } } + } } - - @mixin input-base-padding($padding-vertical, $padding-horizontal) { - .form-group.no-border, - .input-group.no-border{ - .form-control{ - padding: $padding-vertical $padding-horizontal; - - & + .input-group-prepend .input-group-text, - & + .input-group-append .input-group-text{ - padding: $padding-vertical $padding-horizontal $padding-vertical 0; - } - } - - .input-group-prepend .input-group-text, - .input-group-append .input-group-text{ - padding: $padding-vertical 0 $padding-vertical $padding-horizontal; - } + .form-group.no-border, + .input-group.no-border { + .form-control { + padding: $padding-vertical $padding-horizontal; + + & + .input-group-prepend .input-group-text, + & + .input-group-append .input-group-text { + padding: $padding-vertical $padding-horizontal $padding-vertical 0; + } } - .form-group, - .input-group{ - .form-control{ - padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 $padding-horizontal - 1; - - & + .input-group-prepend .input-group-text, - & + .input-group-append .input-group-text{ - padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 0; - } - } - - .input-group-prepend .input-group-text, - .input-group-append .input-group-text{ - padding: $padding-vertical - 1 0 $padding-vertical - 1 $padding-horizontal - 1; + .input-group-prepend .input-group-text, + .input-group-append .input-group-text { + padding: $padding-vertical 0 $padding-vertical $padding-horizontal; + } + } + + .form-group, + .input-group { + .form-control { + padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - + 1 $padding-horizontal - 1; + + & + .input-group-prepend .input-group-text, + & + .input-group-append .input-group-text { + padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - + 1 0; + } + } - & + .form-control, - & ~ .form-control{ - padding:$padding-vertical - 1 $padding-horizontal $padding-vertical $padding-horizontal - 3; - } - } + .input-group-prepend .input-group-text, + .input-group-append .input-group-text { + padding: $padding-vertical - 1 0 $padding-vertical - 1 $padding-horizontal - + 1; + + & + .form-control, + & ~ .form-control { + padding: $padding-vertical - 1 $padding-horizontal $padding-vertical + $padding-horizontal - 3; + } } + } } - //color1 = $opacity-5 //color2 = $opacity-8 //color3 = $white-color @@ -129,106 +134,102 @@ //color5 = $opacity-1 //color6 = $opacity-2 - @mixin input-coloured-bg($color1, $color2, $color3, $color4, $color5, $color6) { - @include form-control-placeholder(rgba($white, 0.4), 1); - - .form-control{ - border-color: $color1; - color: $color2; + @include form-control-placeholder(rgba($white, 0.4), 1); - &:focus{ - border-color: $color3; - background-color: $color4; - color: $color3; - } - } + .form-control { + border-color: $color1; + color: $color2; - .has-success, - .has-danger{ - &:after{ - color: $color3; - } + &:focus { + border-color: $color3; + background-color: $color4; + color: $color3; } + } - .has-danger{ - .form-control{ - background-color: $color4; - } + .has-success, + .has-danger { + &:after { + color: $color3; } + } - .input-group-prepend{ - margin-right: 0; + .has-danger { + .form-control { + background-color: $color4; } + } - .input-group-prepend .input-group-text, - .input-group-append .input-group-text{ - background-color: rgba($background-black, 0.2); - border-color: $color1; - color: $color2; + .input-group-prepend { + margin-right: 0; + } + .input-group-prepend .input-group-text, + .input-group-append .input-group-text { + background-color: rgba($background-black, 0.2); + border-color: $color1; + color: $color2; + } + .input-group-focus { + .input-group-prepend .input-group-text, + .input-group-append .input-group-text { + background-color: rgba($background-black, 0.3); + border-color: $color3; + color: $color3; } - - .input-group-focus{ - .input-group-prepend .input-group-text, - .input-group-append .input-group-text{ - background-color: rgba($background-black, 0.3); - border-color: $color3; - color: $color3; - } + } + + .form-group.no-border, + .input-group.no-border { + .form-control { + background-color: rgba($background-black, 0.2); + color: $color2; + + &:focus, + &:active, + &:active { + background-color: rgba($background-black, 0.3); + color: $color3; + } } - .form-group.no-border, - .input-group.no-border{ - .form-control{ - background-color: rgba($background-black,0.2); - color: $color2; - - &:focus, - &:active, - &:active{ - background-color: rgba($background-black,0.3); - color: $color3; - } - } - - .form-control + .input-group-prepend .input-group-text, - .form-control + .input-group-append .input-group-text{ - background-color: rgba($background-black,0.2);; - - &:focus, - &:active, - &:active{ - background-color: rgba($background-black,0.3); - color: $color3; - } - } + .form-control + .input-group-prepend .input-group-text, + .form-control + .input-group-append .input-group-text { + background-color: rgba($background-black, 0.2); - .form-control{ - &:focus{ - & + .input-group-prepend .input-group-text, - & + .input-group-append .input-group-text{ - background-color: rgba($background-black, 0.3); - color: $color3; - } - } - } + &:focus, + &:active, + &:active { + background-color: rgba($background-black, 0.3); + color: $color3; + } + } - .input-group-prepend .input-group-text, - .input-group-append .input-group-text{ - background-color: rgba($background-black, 0.2); - border: none; - color: $color2; + .form-control { + &:focus { + & + .input-group-prepend .input-group-text, + & + .input-group-append .input-group-text { + background-color: rgba($background-black, 0.3); + color: $color3; } + } + } - &.input-group-focus{ - .input-group-prepend .input-group-text, - .input-group-append .input-group-text{ - background-color: rgba($background-black, 0.3); - color: $color3; - } - } + .input-group-prepend .input-group-text, + .input-group-append .input-group-text { + background-color: rgba($background-black, 0.2); + border: none; + color: $color2; } + &.input-group-focus { + .input-group-prepend .input-group-text, + .input-group-append .input-group-text { + background-color: rgba($background-black, 0.3); + color: $color3; + } + } + } } diff --git a/src/assets/sass/black-dashboard/custom/mixins/_modals.scss b/src/assets/sass/black-dashboard/custom/mixins/_modals.scss index 78869947..8c23700d 100644 --- a/src/assets/sass/black-dashboard/custom/mixins/_modals.scss +++ b/src/assets/sass/black-dashboard/custom/mixins/_modals.scss @@ -1,15 +1,20 @@ @mixin modal-colors($bg-color, $color) { - .modal-content{ - background-color: $bg-color; - color: $color; - } - - .modal-body p{ - color: rgba($white, 0.8); - } - - //inputs - @include input-coloured-bg($opacity-5, $white, $white, $transparent-bg, $opacity-1, $opacity-2); + .modal-content { + background-color: $bg-color; + color: $color; + } + .modal-body p { + color: rgba($white, 0.8); + } + //inputs + @include input-coloured-bg( + $opacity-5, + $white, + $white, + $transparent-bg, + $opacity-1, + $opacity-2 + ); } diff --git a/src/assets/sass/black-dashboard/custom/mixins/_page-header.scss b/src/assets/sass/black-dashboard/custom/mixins/_page-header.scss index 713dfd36..002330f4 100644 --- a/src/assets/sass/black-dashboard/custom/mixins/_page-header.scss +++ b/src/assets/sass/black-dashboard/custom/mixins/_page-header.scss @@ -1,7 +1,19 @@ -@mixin linear-gradient($color1, $color2){ - background: $color1; /* For browsers that do not support gradients */ - background: -webkit-linear-gradient(90deg, $color1 , $color2); /* For Safari 5.1 to 6.0 */ - background: -o-linear-gradient(90deg, $color1, $color2); /* For Opera 11.1 to 12.0 */ - background: -moz-linear-gradient(90deg, $color1, $color2); /* For Firefox 3.6 to 15 */ - background: linear-gradient(0deg, $color1 , $color2); /* Standard syntax */ +@mixin linear-gradient($color1, $color2) { + background: $color1; /* For browsers that do not support gradients */ + background: -webkit-linear-gradient( + 90deg, + $color1, + $color2 + ); /* For Safari 5.1 to 6.0 */ + background: -o-linear-gradient( + 90deg, + $color1, + $color2 + ); /* For Opera 11.1 to 12.0 */ + background: -moz-linear-gradient( + 90deg, + $color1, + $color2 + ); /* For Firefox 3.6 to 15 */ + background: linear-gradient(0deg, $color1, $color2); /* Standard syntax */ } diff --git a/src/assets/sass/black-dashboard/custom/mixins/_popovers.scss b/src/assets/sass/black-dashboard/custom/mixins/_popovers.scss index 3734e262..e0e8dade 100644 --- a/src/assets/sass/black-dashboard/custom/mixins/_popovers.scss +++ b/src/assets/sass/black-dashboard/custom/mixins/_popovers.scss @@ -4,15 +4,15 @@ .popover-header { background-color: $background; color: color-yiq($background); - opacity: .6; + opacity: 0.6; } .popover-body { color: color-yiq($background); } - .popover-header{ - border-color: rgba(color-yiq($background), .2); + .popover-header { + border-color: rgba(color-yiq($background), 0.2); } &.bs-popover-top { diff --git a/src/assets/sass/black-dashboard/custom/mixins/_vendor-prefixes.scss b/src/assets/sass/black-dashboard/custom/mixins/_vendor-prefixes.scss index aab5e888..03b152e3 100644 --- a/src/assets/sass/black-dashboard/custom/mixins/_vendor-prefixes.scss +++ b/src/assets/sass/black-dashboard/custom/mixins/_vendor-prefixes.scss @@ -1,188 +1,330 @@ - -@mixin transform-translate-x($value){ - -webkit-transform: translate3d($value, 0, 0); - -moz-transform: translate3d($value, 0, 0); - -o-transform: translate3d($value, 0, 0); - -ms-transform: translate3d($value, 0, 0); - transform: translate3d($value, 0, 0); +@mixin transform-translate-x($value) { + -webkit-transform: translate3d($value, 0, 0); + -moz-transform: translate3d($value, 0, 0); + -o-transform: translate3d($value, 0, 0); + -ms-transform: translate3d($value, 0, 0); + transform: translate3d($value, 0, 0); } -@mixin transform-translate-y($value){ - -webkit-transform: translate3d(0,$value,0); - -moz-transform: translate3d(0,$value,0); - -o-transform: translate3d(0,$value,0); - -ms-transform: translate3d(0,$value,0); - transform: translate3d(0,$value,0); +@mixin transform-translate-y($value) { + -webkit-transform: translate3d(0, $value, 0); + -moz-transform: translate3d(0, $value, 0); + -o-transform: translate3d(0, $value, 0); + -ms-transform: translate3d(0, $value, 0); + transform: translate3d(0, $value, 0); } -@mixin transitions($time, $type){ - -webkit-transition: all $time $type; - -moz-transition: all $time $type; - -o-transition: all $time $type; - -ms-transition: all $time $type; - transition: all $time $type; +@mixin transitions($time, $type) { + -webkit-transition: all $time $type; + -moz-transition: all $time $type; + -o-transition: all $time $type; + -ms-transition: all $time $type; + transition: all $time $type; } -@mixin diagonal-gradient($start-color, $end-color){ +@mixin diagonal-gradient($start-color, $end-color) { background: $start-color; - background-image: -webkit-linear-gradient(to bottom left, $start-color, $end-color, $start-color); - background-image: -o-linear-gradient(to bottom left, $start-color, $end-color, $start-color); - background-image: -moz-linear-gradient(to bottom left, $start-color, $end-color, $start-color); - background-image: linear-gradient(to bottom left, $start-color, $end-color, $start-color); + background-image: -webkit-linear-gradient( + to bottom left, + $start-color, + $end-color, + $start-color + ); + background-image: -o-linear-gradient( + to bottom left, + $start-color, + $end-color, + $start-color + ); + background-image: -moz-linear-gradient( + to bottom left, + $start-color, + $end-color, + $start-color + ); + background-image: linear-gradient( + to bottom left, + $start-color, + $end-color, + $start-color + ); background-size: 210% 210%; background-position: top right; } -@mixin bar-animation($type){ - -webkit-animation: $type 500ms linear 0s; - -moz-animation: $type 500ms linear 0s; - animation: $type 500ms 0s; - -webkit-animation-fill-mode: forwards; - -moz-animation-fill-mode: forwards; - animation-fill-mode: forwards; +@mixin bar-animation($type) { + -webkit-animation: $type 500ms linear 0s; + -moz-animation: $type 500ms linear 0s; + animation: $type 500ms 0s; + -webkit-animation-fill-mode: forwards; + -moz-animation-fill-mode: forwards; + animation-fill-mode: forwards; } -@mixin rotate-180(){ - filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); - -webkit-transform: rotate(180deg); - -ms-transform: rotate(180deg); - transform: rotate(180deg); +@mixin rotate-180() { + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); } @mixin transform-translate-y-dropdown($value) { - -webkit-transform: translate3d(0,$value,0) !important; - -moz-transform: translate3d(0,$value,0) !important; - -o-transform: translate3d(0,$value,0) !important; - -ms-transform: translate3d(0,$value,0) !important; - transform: translate3d(0,$value,0) !important; + -webkit-transform: translate3d(0, $value, 0) !important; + -moz-transform: translate3d(0, $value, 0) !important; + -o-transform: translate3d(0, $value, 0) !important; + -ms-transform: translate3d(0, $value, 0) !important; + transform: translate3d(0, $value, 0) !important; } -@mixin linear-gradient($color, $states-color){ - background: $color; - background: -webkit-linear-gradient(0deg, $color 0%, $states-color 100%); - background: -o-linear-gradient(0deg, $color 0%, $states-color 100%); - background: -moz-linear-gradient(0deg, $color 0%, $states-color 100%); - background: linear-gradient(0deg, $color 0%, $states-color 100%); +@mixin linear-gradient($color, $states-color) { + background: $color; + background: -webkit-linear-gradient(0deg, $color 0%, $states-color 100%); + background: -o-linear-gradient(0deg, $color 0%, $states-color 100%); + background: -moz-linear-gradient(0deg, $color 0%, $states-color 100%); + background: linear-gradient(0deg, $color 0%, $states-color 100%); } -@mixin linear-gradient-right($color, $states-color){ - background: $color; - background: -webkit-linear-gradient(to right, $color 0%, $states-color 100%); - background: -o-linear-gradient(to right, $color 0%, $states-color 100%); - background: -moz-linear-gradient(to right, $color 0%, $states-color 100%); - background: linear-gradient(to right, $color 0%, $states-color 100%); +@mixin linear-gradient-right($color, $states-color) { + background: $color; + background: -webkit-linear-gradient(to right, $color 0%, $states-color 100%); + background: -o-linear-gradient(to right, $color 0%, $states-color 100%); + background: -moz-linear-gradient(to right, $color 0%, $states-color 100%); + background: linear-gradient(to right, $color 0%, $states-color 100%); } -@mixin sidebar-color($color){ - &:after{ +@mixin sidebar-color($color) { + &:after { background: $color; } - .nav li.active > a{ + .nav li.active > a { color: $color; - i{ + i { color: $color; } } } @mixin transition-input-focus-color() { - -webkit-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out; - -moz-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out; - -o-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out; - -ms-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out; - transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out; + -webkit-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, + background-color 0.3s ease-in-out; + -moz-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, + background-color 0.3s ease-in-out; + -o-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, + background-color 0.3s ease-in-out; + -ms-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, + background-color 0.3s ease-in-out; + transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, + background-color 0.3s ease-in-out; } -@mixin topbar-x-rotation(){ - @keyframes topbar-x { - 0% {top: 0px; transform: rotate(0deg); } - 45% {top: 6px; transform: rotate(145deg); } - 75% {transform: rotate(130deg); } - 100% {transform: rotate(135deg); } +@mixin topbar-x-rotation() { + @keyframes topbar-x { + 0% { + top: 0px; + transform: rotate(0deg); + } + 45% { + top: 6px; + transform: rotate(145deg); + } + 75% { + transform: rotate(130deg); + } + 100% { + transform: rotate(135deg); + } + } + @-webkit-keyframes topbar-x { + 0% { + top: 0px; + -webkit-transform: rotate(0deg); + } + 45% { + top: 6px; + -webkit-transform: rotate(145deg); + } + 75% { + -webkit-transform: rotate(130deg); + } + 100% { + -webkit-transform: rotate(135deg); + } + } + @-moz-keyframes topbar-x { + 0% { + top: 0px; + -moz-transform: rotate(0deg); + } + 45% { + top: 6px; + -moz-transform: rotate(145deg); } - @-webkit-keyframes topbar-x { - 0% {top: 0px; -webkit-transform: rotate(0deg); } - 45% {top: 6px; -webkit-transform: rotate(145deg); } - 75% {-webkit-transform: rotate(130deg); } - 100% { -webkit-transform: rotate(135deg); } + 75% { + -moz-transform: rotate(130deg); } - @-moz-keyframes topbar-x { - 0% {top: 0px; -moz-transform: rotate(0deg); } - 45% {top: 6px; -moz-transform: rotate(145deg); } - 75% {-moz-transform: rotate(130deg); } - 100% { -moz-transform: rotate(135deg); } + 100% { + -moz-transform: rotate(135deg); } + } } -@mixin topbar-back-rotation(){ - @keyframes topbar-back { - 0% { top: 6px; transform: rotate(135deg); } - 45% { transform: rotate(-10deg); } - 75% { transform: rotate(5deg); } - 100% { top: 0px; transform: rotate(0); } +@mixin topbar-back-rotation() { + @keyframes topbar-back { + 0% { + top: 6px; + transform: rotate(135deg); + } + 45% { + transform: rotate(-10deg); + } + 75% { + transform: rotate(5deg); + } + 100% { + top: 0px; + transform: rotate(0); } + } - @-webkit-keyframes topbar-back { - 0% { top: 6px; -webkit-transform: rotate(135deg); } - 45% { -webkit-transform: rotate(-10deg); } - 75% { -webkit-transform: rotate(5deg); } - 100% { top: 0px; -webkit-transform: rotate(0); } + @-webkit-keyframes topbar-back { + 0% { + top: 6px; + -webkit-transform: rotate(135deg); + } + 45% { + -webkit-transform: rotate(-10deg); + } + 75% { + -webkit-transform: rotate(5deg); } + 100% { + top: 0px; + -webkit-transform: rotate(0); + } + } - @-moz-keyframes topbar-back { - 0% { top: 6px; -moz-transform: rotate(135deg); } - 45% { -moz-transform: rotate(-10deg); } - 75% { -moz-transform: rotate(5deg); } - 100% { top: 0px; -moz-transform: rotate(0); } + @-moz-keyframes topbar-back { + 0% { + top: 6px; + -moz-transform: rotate(135deg); + } + 45% { + -moz-transform: rotate(-10deg); } + 75% { + -moz-transform: rotate(5deg); + } + 100% { + top: 0px; + -moz-transform: rotate(0); + } + } } -@mixin bottombar-x-rotation(){ - @keyframes bottombar-x { - 0% {bottom: 0px; transform: rotate(0deg);} - 45% {bottom: 6px; transform: rotate(-145deg);} - 75% {transform: rotate(-130deg);} - 100% {transform: rotate(-135deg);} +@mixin bottombar-x-rotation() { + @keyframes bottombar-x { + 0% { + bottom: 0px; + transform: rotate(0deg); } - @-webkit-keyframes bottombar-x { - 0% {bottom: 0px; -webkit-transform: rotate(0deg);} - 45% {bottom: 6px; -webkit-transform: rotate(-145deg);} - 75% {-webkit-transform: rotate(-130deg);} - 100% {-webkit-transform: rotate(-135deg);} + 45% { + bottom: 6px; + transform: rotate(-145deg); } - @-moz-keyframes bottombar-x { - 0% {bottom: 0px; -moz-transform: rotate(0deg);} - 45% {bottom: 6px; -moz-transform: rotate(-145deg);} - 75% {-moz-transform: rotate(-130deg);} - 100% {-moz-transform: rotate(-135deg);} + 75% { + transform: rotate(-130deg); } + 100% { + transform: rotate(-135deg); + } + } + @-webkit-keyframes bottombar-x { + 0% { + bottom: 0px; + -webkit-transform: rotate(0deg); + } + 45% { + bottom: 6px; + -webkit-transform: rotate(-145deg); + } + 75% { + -webkit-transform: rotate(-130deg); + } + 100% { + -webkit-transform: rotate(-135deg); + } + } + @-moz-keyframes bottombar-x { + 0% { + bottom: 0px; + -moz-transform: rotate(0deg); + } + 45% { + bottom: 6px; + -moz-transform: rotate(-145deg); + } + 75% { + -moz-transform: rotate(-130deg); + } + 100% { + -moz-transform: rotate(-135deg); + } + } } -@mixin bottombar-back-rotation{ - @keyframes bottombar-back { - 0% { bottom: 6px;transform: rotate(-135deg);} - 45% { transform: rotate(10deg);} - 75% { transform: rotate(-5deg);} - 100% { bottom: 0px;transform: rotate(0);} +@mixin bottombar-back-rotation { + @keyframes bottombar-back { + 0% { + bottom: 6px; + transform: rotate(-135deg); } - @-webkit-keyframes bottombar-back { - 0% {bottom: 6px;-webkit-transform: rotate(-135deg);} - 45% {-webkit-transform: rotate(10deg);} - 75% {-webkit-transform: rotate(-5deg);} - 100% {bottom: 0px;-webkit-transform: rotate(0);} + 45% { + transform: rotate(10deg); } - @-moz-keyframes bottombar-back { - 0% {bottom: 6px;-moz-transform: rotate(-135deg);} - 45% {-moz-transform: rotate(10deg);} - 75% {-moz-transform: rotate(-5deg);} - 100% {bottom: 0px;-moz-transform: rotate(0);} + 75% { + transform: rotate(-5deg); } - + 100% { + bottom: 0px; + transform: rotate(0); + } + } + @-webkit-keyframes bottombar-back { + 0% { + bottom: 6px; + -webkit-transform: rotate(-135deg); + } + 45% { + -webkit-transform: rotate(10deg); + } + 75% { + -webkit-transform: rotate(-5deg); + } + 100% { + bottom: 0px; + -webkit-transform: rotate(0); + } + } + @-moz-keyframes bottombar-back { + 0% { + bottom: 6px; + -moz-transform: rotate(-135deg); + } + 45% { + -moz-transform: rotate(10deg); + } + 75% { + -moz-transform: rotate(-5deg); + } + 100% { + bottom: 0px; + -moz-transform: rotate(0); + } + } } - @mixin nc-rotate($degrees, $rotation) { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation}); -webkit-transform: rotate($degrees); diff --git a/src/assets/sass/black-dashboard/custom/mixins/_wizard.scss b/src/assets/sass/black-dashboard/custom/mixins/_wizard.scss index 211a51c5..b1de2c96 100644 --- a/src/assets/sass/black-dashboard/custom/mixins/_wizard.scss +++ b/src/assets/sass/black-dashboard/custom/mixins/_wizard.scss @@ -1,26 +1,26 @@ @mixin set-wizard-color($color) { - .progress-with-circle .progress-bar{ - background: $color; - } + .progress-with-circle .progress-bar { + background: $color; + } - .nav-pills .nav-item .nav-link{ - color: $color; + .nav-pills .nav-item .nav-link { + color: $color; - &.checked, &.active{ - background: $color; - color: white; - } - &:hover{ - background: $white; - } - } - - .nav-pills .nav-item .nav-link.active, - .nav-pills .nav-item .nav-link.checked:focus, - .nav-pills .nav-item .nav-link.checked:hover, - .nav-pills .nav-item .nav-link.active:focus, - .nav-pills .nav-item .nav-link.active:hover{ - background: $color; - } + &.checked, + &.active { + background: $color; + color: white; + } + &:hover { + background: $white; + } + } + .nav-pills .nav-item .nav-link.active, + .nav-pills .nav-item .nav-link.checked:focus, + .nav-pills .nav-item .nav-link.checked:hover, + .nav-pills .nav-item .nav-link.active:focus, + .nav-pills .nav-item .nav-link.active:hover { + background: $color; + } } diff --git a/src/assets/sass/black-dashboard/custom/utilities/_backgrounds.scss b/src/assets/sass/black-dashboard/custom/utilities/_backgrounds.scss index 037d12f2..ec1ff910 100644 --- a/src/assets/sass/black-dashboard/custom/utilities/_backgrounds.scss +++ b/src/assets/sass/black-dashboard/custom/utilities/_backgrounds.scss @@ -1,42 +1,40 @@ @each $color, $value in $colors { - @include bg-variant(".bg-#{$color}", $value); + @include bg-variant(".bg-#{$color}", $value); } @each $color, $value in $theme-colors { - @include bg-gradient-variant(".bg-gradient-#{$color}", $value); + @include bg-gradient-variant(".bg-gradient-#{$color}", $value); } -@each $color, $value in $colors { - @include bg-gradient-variant(".bg-gradient-#{$color}", $value); +@each $color, $value in $colors { + @include bg-gradient-variant(".bg-gradient-#{$color}", $value); } - // Sections section { - //background-color: section-color("primary"); + //background-color: section-color("primary"); } @each $color, $value in $section-colors { - @include bg-variant(".section-#{$color}", $value); + @include bg-variant(".section-#{$color}", $value); } @each $color, $value in $theme-colors { - @include bg-gradient-variant(".bg-gradient-#{$color}", $value); + @include bg-gradient-variant(".bg-gradient-#{$color}", $value); } - // Shape (svg) fill colors @each $color, $value in $theme-colors { - .fill-#{$color} { - fill: $value; - } + .fill-#{$color} { + fill: $value; + } - .stroke-#{$color} { - stroke: $value; - } + .stroke-#{$color} { + stroke: $value; + } } .fill-opacity-8 { - fill-opacity: .8; -} \ No newline at end of file + fill-opacity: 0.8; +} diff --git a/src/assets/sass/black-dashboard/custom/utilities/_floating.scss b/src/assets/sass/black-dashboard/custom/utilities/_floating.scss index 357a2dc7..fc6b4478 100644 --- a/src/assets/sass/black-dashboard/custom/utilities/_floating.scss +++ b/src/assets/sass/black-dashboard/custom/utilities/_floating.scss @@ -1,54 +1,54 @@ .floating { - animation: floating 3s ease infinite; - will-change: transform; + animation: floating 3s ease infinite; + will-change: transform; - &:hover { - animation-play-state: paused; - } + &:hover { + animation-play-state: paused; + } } .floating-lg { - animation: floating-lg 3s ease infinite; + animation: floating-lg 3s ease infinite; } .floating-sm { - animation: floating-sm 3s ease infinite; + animation: floating-sm 3s ease infinite; } // Keyframes @keyframes floating-lg { - 0% { - transform: translateY(0px) - } - 50% { - transform: translateY(15px) - } - 100% { - transform: translateY(0px) - } + 0% { + transform: translateY(0px); + } + 50% { + transform: translateY(15px); + } + 100% { + transform: translateY(0px); + } } @keyframes floating { - 0% { - transform: translateY(0px) - } - 50% { - transform: translateY(10px) - } - 100% { - transform: translateY(0px) - } + 0% { + transform: translateY(0px); + } + 50% { + transform: translateY(10px); + } + 100% { + transform: translateY(0px); + } } @keyframes floating-sm { - 0% { - transform: translateY(0px) - } - 50% { - transform: translateY(5px) - } - 100% { - transform: translateY(0px) - } -} \ No newline at end of file + 0% { + transform: translateY(0px); + } + 50% { + transform: translateY(5px); + } + 100% { + transform: translateY(0px); + } +} diff --git a/src/assets/sass/black-dashboard/custom/utilities/_helper.scss b/src/assets/sass/black-dashboard/custom/utilities/_helper.scss index f0faa589..c1986b35 100644 --- a/src/assets/sass/black-dashboard/custom/utilities/_helper.scss +++ b/src/assets/sass/black-dashboard/custom/utilities/_helper.scss @@ -1,62 +1,62 @@ // Image .img-center { - display: block; - margin-left: auto; - margin-right: auto; + display: block; + margin-left: auto; + margin-right: auto; } // Clearfix .floatfix { - &:before, - &:after { - content: ''; - display: table; - } - &:after { - clear: both; - } + &:before, + &:after { + content: ""; + display: table; + } + &:after { + clear: both; + } } // Overflows .overflow-visible { - overflow: visible !important; + overflow: visible !important; } .overflow-hidden { - overflow: hidden !important; + overflow: hidden !important; } // Opacity classes .opacity-1 { - opacity: .1 !important; + opacity: 0.1 !important; } .opacity-2 { - opacity: .2 !important; + opacity: 0.2 !important; } .opacity-3 { - opacity: .3 !important; + opacity: 0.3 !important; } .opacity-4 { - opacity: .4 !important; + opacity: 0.4 !important; } .opacity-5 { - opacity: .5 !important; + opacity: 0.5 !important; } .opacity-6 { - opacity: .6 !important; + opacity: 0.6 !important; } .opacity-7 { - opacity: .7 !important; + opacity: 0.7 !important; } .opacity-8 { - opacity: .8 !important; + opacity: 0.8 !important; } .opacity-8 { - opacity: .9 !important; + opacity: 0.9 !important; } .opacity-10 { - opacity: 1 !important; -} \ No newline at end of file + opacity: 1 !important; +} diff --git a/src/assets/sass/black-dashboard/custom/utilities/_position.scss b/src/assets/sass/black-dashboard/custom/utilities/_position.scss index d7aa5a9e..bbfe9fab 100644 --- a/src/assets/sass/black-dashboard/custom/utilities/_position.scss +++ b/src/assets/sass/black-dashboard/custom/utilities/_position.scss @@ -1,19 +1,19 @@ @each $size, $value in $spacers { - .top-#{$size} { - top: $value; - } - .right-#{$size} { - right: $value; - } - .bottom-#{$size} { - bottom: $value; - } - .left-#{$size} { - left: $value; - } + .top-#{$size} { + top: $value; + } + .right-#{$size} { + right: $value; + } + .bottom-#{$size} { + bottom: $value; + } + .left-#{$size} { + left: $value; + } } .center { - left: 50%; - transform: translateX(-50%); -} \ No newline at end of file + left: 50%; + transform: translateX(-50%); +} diff --git a/src/assets/sass/black-dashboard/custom/utilities/_shadows.scss b/src/assets/sass/black-dashboard/custom/utilities/_shadows.scss index 01f4f3c5..2bbe333f 100644 --- a/src/assets/sass/black-dashboard/custom/utilities/_shadows.scss +++ b/src/assets/sass/black-dashboard/custom/utilities/_shadows.scss @@ -1,10 +1,18 @@ [class*="shadow"] { - @if $enable-transitions { - transition: $transition-base; - } + @if $enable-transitions { + transition: $transition-base; + } } -.shadow-sm--hover:hover { box-shadow: $box-shadow-sm !important; } -.shadow--hover:hover { box-shadow: $box-shadow !important; } -.shadow-lg--hover:hover { box-shadow: $box-shadow-lg !important; } -.shadow-none--hover:hover { box-shadow: none !important; } +.shadow-sm--hover:hover { + box-shadow: $box-shadow-sm !important; +} +.shadow--hover:hover { + box-shadow: $box-shadow !important; +} +.shadow-lg--hover:hover { + box-shadow: $box-shadow-lg !important; +} +.shadow-none--hover:hover { + box-shadow: none !important; +} diff --git a/src/assets/sass/black-dashboard/custom/utilities/_sizing.scss b/src/assets/sass/black-dashboard/custom/utilities/_sizing.scss index 4361abfb..0b0ce14a 100644 --- a/src/assets/sass/black-dashboard/custom/utilities/_sizing.scss +++ b/src/assets/sass/black-dashboard/custom/utilities/_sizing.scss @@ -1,5 +1,5 @@ // Height values in vh .h-100vh { - height: 100vh !important; + height: 100vh !important; } diff --git a/src/assets/sass/black-dashboard/custom/utilities/_spacing.scss b/src/assets/sass/black-dashboard/custom/utilities/_spacing.scss index 32a00612..dbb68f77 100644 --- a/src/assets/sass/black-dashboard/custom/utilities/_spacing.scss +++ b/src/assets/sass/black-dashboard/custom/utilities/_spacing.scss @@ -1,105 +1,103 @@ // Spacing columns vertically .row.row-grid > [class*="col-"] + [class*="col-"] { - margin-top: 3rem; + margin-top: 3rem; } @include media-breakpoint-up(lg) { - .row.row-grid > [class*="col-lg-"] + [class*="col-lg-"] { - margin-top: 0; - } + .row.row-grid > [class*="col-lg-"] + [class*="col-lg-"] { + margin-top: 0; + } } @include media-breakpoint-up(md) { - .row.row-grid > [class*="col-md-"] + [class*="col-md-"] { - margin-top: 0; - } + .row.row-grid > [class*="col-md-"] + [class*="col-md-"] { + margin-top: 0; + } } @include media-breakpoint-up(sm) { - .row.row-grid > [class*="col-sm-"] + [class*="col-sm-"] { - margin-top: 0; - } + .row.row-grid > [class*="col-sm-"] + [class*="col-sm-"] { + margin-top: 0; + } } .row-grid + .row-grid { - margin-top: 3rem; + margin-top: 3rem; } // Negative margins and paddings -@media(min-width: 992px) { - [class*="mt--"], - [class*="mr--"], - [class*="mb--"], - [class*="ml--"] { - position: relative; - z-index: 5; - } +@media (min-width: 992px) { + [class*="mt--"], + [class*="mr--"], + [class*="mb--"], + [class*="ml--"] { + position: relative; + z-index: 5; + } + // Large negative margins in pixels - // Large negative margins in pixels + .mt--100 { + margin-top: -100px !important; + } + .mr--100 { + margin-right: -100px !important; + } + .mb--100 { + margin-bottom: -100px !important; + } + .ml--100 { + margin-left: -100px !important; + } + .mt--150 { + margin-top: -150px !important; + } + .mb--150 { + margin-bottom: -150px !important; + } + .mt--200 { + margin-top: -200px !important; + } + .mb--200 { + margin-bottom: -200px !important; + } + .mt--300 { + margin-top: -300px !important; + } + .mb--300 { + margin-bottom: -300px !important; + } - .mt--100 { - margin-top: -100px !important; - } - .mr--100 { - margin-right: -100px !important; - } - .mb--100 { - margin-bottom: -100px !important; - } - .ml--100 { - margin-left: -100px !important; - } - .mt--150 { - margin-top: -150px !important; - } - .mb--150 { - margin-bottom: -150px !important; - } - .mt--200 { - margin-top: -200px !important; - } - .mb--200 { - margin-bottom: -200px !important; - } - .mt--300 { - margin-top: -300px !important; - } - .mb--300 { - margin-bottom: -300px !important; - } + // Large margins in pixels - - // Large margins in pixels - - .pt-100 { - padding-top: 100px !important; - } - .pb-100 { - padding-bottom: 100px !important; - } - .pt-150 { - padding-top: 150px !important; - } - .pb-150 { - padding-bottom: 150px !important; - } - .pt-200 { - padding-top: 200px !important; - } - .pb-200 { - padding-bottom: 200px !important; - } - .pt-250 { - padding-top: 250px !important; - } - .pb-250 { - padding-bottom: 250px !important; - } - .pt-300 { - padding-top: 300px!important; - } - .pb-300 { - padding-bottom: 300px!important; - } + .pt-100 { + padding-top: 100px !important; + } + .pb-100 { + padding-bottom: 100px !important; + } + .pt-150 { + padding-top: 150px !important; + } + .pb-150 { + padding-bottom: 150px !important; + } + .pt-200 { + padding-top: 200px !important; + } + .pb-200 { + padding-bottom: 200px !important; + } + .pt-250 { + padding-top: 250px !important; + } + .pb-250 { + padding-bottom: 250px !important; + } + .pt-300 { + padding-top: 300px !important; + } + .pb-300 { + padding-bottom: 300px !important; + } } diff --git a/src/assets/sass/black-dashboard/custom/utilities/_text.scss b/src/assets/sass/black-dashboard/custom/utilities/_text.scss index 417d21af..68d38f42 100644 --- a/src/assets/sass/black-dashboard/custom/utilities/_text.scss +++ b/src/assets/sass/black-dashboard/custom/utilities/_text.scss @@ -1,40 +1,80 @@ // Weight and italics -.font-weight-300 { font-weight: 300 !important; } -.font-weight-400 { font-weight: 400 !important; } -.font-weight-500 { font-weight: 500 !important; } -.font-weight-600 { font-weight: 600 !important; } -.font-weight-700 { font-weight: 700 !important; } -.font-weight-800 { font-weight: 800 !important; } -.font-weight-900 { font-weight: 900 !important; } - +.font-weight-300 { + font-weight: 300 !important; +} +.font-weight-400 { + font-weight: 400 !important; +} +.font-weight-500 { + font-weight: 500 !important; +} +.font-weight-600 { + font-weight: 600 !important; +} +.font-weight-700 { + font-weight: 700 !important; +} +.font-weight-800 { + font-weight: 800 !important; +} +.font-weight-900 { + font-weight: 900 !important; +} // Text decorations -.text-underline { text-decoration: underline; } -.text-through { text-decoration: line-through; } - +.text-underline { + text-decoration: underline; +} +.text-through { + text-decoration: line-through; +} // Line heights -.lh-100 { line-height: 1; } -.lh-110 { line-height: 1.1; } -.lh-120 { line-height: 1.2; } -.lh-130 { line-height: 1.3; } -.lh-140 { line-height: 1.4; } -.lh-150 { line-height: 1.5; } -.lh-160 { line-height: 1.6; } -.lh-170 { line-height: 1.7; } -.lh-180 { line-height: 1.8; } +.lh-100 { + line-height: 1; +} +.lh-110 { + line-height: 1.1; +} +.lh-120 { + line-height: 1.2; +} +.lh-130 { + line-height: 1.3; +} +.lh-140 { + line-height: 1.4; +} +.lh-150 { + line-height: 1.5; +} +.lh-160 { + line-height: 1.6; +} +.lh-170 { + line-height: 1.7; +} +.lh-180 { + line-height: 1.8; +} //Contextual colors -.text-muted { color: $text-muted !important; } - - +.text-muted { + color: $text-muted !important; +} // Letter spacings -.ls-1 { letter-spacing: .0625rem; } -.ls-15 { letter-spacing: .09375rem; } -.ls-2 { letter-spacing: 0.125rem; } +.ls-1 { + letter-spacing: 0.0625rem; +} +.ls-15 { + letter-spacing: 0.09375rem; +} +.ls-2 { + letter-spacing: 0.125rem; +} diff --git a/src/assets/sass/black-dashboard/custom/utilities/_transform.scss b/src/assets/sass/black-dashboard/custom/utilities/_transform.scss index 1f0d4b13..e01f014f 100644 --- a/src/assets/sass/black-dashboard/custom/utilities/_transform.scss +++ b/src/assets/sass/black-dashboard/custom/utilities/_transform.scss @@ -1,8 +1,10 @@ @include media-breakpoint-up(lg) { - .transform-perspective-right { - transform: scale(1) perspective(1040px) rotateY(-11deg) rotateX(2deg) rotate(2deg); - } - .transform-perspective-left{ - transform: scale(1) perspective(2000px) rotateY(11deg) rotateX(2deg) rotate(-2deg) - } + .transform-perspective-right { + transform: scale(1) perspective(1040px) rotateY(-11deg) rotateX(2deg) + rotate(2deg); + } + .transform-perspective-left { + transform: scale(1) perspective(2000px) rotateY(11deg) rotateX(2deg) + rotate(-2deg); + } } diff --git a/src/assets/sass/black-dashboard/custom/vendor/_plugin-animate-bootstrap-notify.scss b/src/assets/sass/black-dashboard/custom/vendor/_plugin-animate-bootstrap-notify.scss index 387d1521..56b71d2a 100644 --- a/src/assets/sass/black-dashboard/custom/vendor/_plugin-animate-bootstrap-notify.scss +++ b/src/assets/sass/black-dashboard/custom/vendor/_plugin-animate-bootstrap-notify.scss @@ -1,35 +1,5 @@ - - - - - - - - - - - - - - - - // This file was modified by Creative Tim to keep only the animation that we need for Bootstrap Notify - - - - - - - - - - - - - - @charset "UTF-8"; /*! @@ -58,45 +28,61 @@ Copyright (c) 2015 Daniel Eden .animated.bounceIn, .animated.bounceOut { - -webkit-animation-duration: .75s; - animation-duration: .75s; + -webkit-animation-duration: 0.75s; + animation-duration: 0.75s; } .animated.flipOutX, .animated.flipOutY { - -webkit-animation-duration: .75s; - animation-duration: .75s; + -webkit-animation-duration: 0.75s; + animation-duration: 0.75s; } @-webkit-keyframes shake { - from, to { + from, + to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } - 10%, 30%, 50%, 70%, 90% { + 10%, + 30%, + 50%, + 70%, + 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } - 20%, 40%, 60%, 80% { + 20%, + 40%, + 60%, + 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } @keyframes shake { - from, to { + from, + to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } - 10%, 30%, 50%, 70%, 90% { + 10%, + 30%, + 50%, + 70%, + 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } - 20%, 40%, 60%, 80% { + 20%, + 40%, + 60%, + 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } @@ -107,8 +93,6 @@ Copyright (c) 2015 Daniel Eden animation-name: shake; } - - @-webkit-keyframes fadeInDown { from { opacity: 0; @@ -142,7 +126,6 @@ Copyright (c) 2015 Daniel Eden animation-name: fadeInDown; } - @-webkit-keyframes fadeOut { from { opacity: 1; diff --git a/src/assets/sass/black-dashboard/custom/vendor/_plugin-perfect-scrollbar.scss b/src/assets/sass/black-dashboard/custom/vendor/_plugin-perfect-scrollbar.scss index b4863922..57af3e0e 100644 --- a/src/assets/sass/black-dashboard/custom/vendor/_plugin-perfect-scrollbar.scss +++ b/src/assets/sass/black-dashboard/custom/vendor/_plugin-perfect-scrollbar.scss @@ -15,8 +15,8 @@ .ps__rail-x { display: none; opacity: 0; - transition: background-color .2s linear, opacity .2s linear; - -webkit-transition: background-color .2s linear, opacity .2s linear; + transition: background-color 0.2s linear, opacity 0.2s linear; + -webkit-transition: background-color 0.2s linear, opacity 0.2s linear; height: 15px; /* there must be 'bottom' or 'top' for ps__rail-x */ bottom: 0px; @@ -27,8 +27,8 @@ .ps__rail-y { display: none; opacity: 0; - transition: background-color .2s linear, opacity .2s linear; - -webkit-transition: background-color .2s linear, opacity .2s linear; + transition: background-color 0.2s linear, opacity 0.2s linear; + -webkit-transition: background-color 0.2s linear, opacity 0.2s linear; width: 15px; /* there must be 'right' or 'left' for ps__rail-y */ right: 0; @@ -67,8 +67,8 @@ .ps__thumb-x { background-color: #aaa; border-radius: 6px; - transition: background-color .2s linear, height .2s ease-in-out; - -webkit-transition: background-color .2s linear, height .2s ease-in-out; + transition: background-color 0.2s linear, height 0.2s ease-in-out; + -webkit-transition: background-color 0.2s linear, height 0.2s ease-in-out; height: 6px; /* there must be 'bottom' for ps__thumb-x */ bottom: 2px; @@ -79,8 +79,8 @@ .ps__thumb-y { background-color: #aaa; border-radius: 6px; - transition: background-color .2s linear, width .2s ease-in-out; - -webkit-transition: background-color .2s linear, width .2s ease-in-out; + transition: background-color 0.2s linear, width 0.2s ease-in-out; + -webkit-transition: background-color 0.2s linear, width 0.2s ease-in-out; width: 6px; /* there must be 'right' for ps__thumb-y */ right: 2px; diff --git a/src/assets/sass/black-dashboard/plugins/_plugin-perfect-scrollbar.scss b/src/assets/sass/black-dashboard/plugins/_plugin-perfect-scrollbar.scss index b4863922..57af3e0e 100644 --- a/src/assets/sass/black-dashboard/plugins/_plugin-perfect-scrollbar.scss +++ b/src/assets/sass/black-dashboard/plugins/_plugin-perfect-scrollbar.scss @@ -15,8 +15,8 @@ .ps__rail-x { display: none; opacity: 0; - transition: background-color .2s linear, opacity .2s linear; - -webkit-transition: background-color .2s linear, opacity .2s linear; + transition: background-color 0.2s linear, opacity 0.2s linear; + -webkit-transition: background-color 0.2s linear, opacity 0.2s linear; height: 15px; /* there must be 'bottom' or 'top' for ps__rail-x */ bottom: 0px; @@ -27,8 +27,8 @@ .ps__rail-y { display: none; opacity: 0; - transition: background-color .2s linear, opacity .2s linear; - -webkit-transition: background-color .2s linear, opacity .2s linear; + transition: background-color 0.2s linear, opacity 0.2s linear; + -webkit-transition: background-color 0.2s linear, opacity 0.2s linear; width: 15px; /* there must be 'right' or 'left' for ps__rail-y */ right: 0; @@ -67,8 +67,8 @@ .ps__thumb-x { background-color: #aaa; border-radius: 6px; - transition: background-color .2s linear, height .2s ease-in-out; - -webkit-transition: background-color .2s linear, height .2s ease-in-out; + transition: background-color 0.2s linear, height 0.2s ease-in-out; + -webkit-transition: background-color 0.2s linear, height 0.2s ease-in-out; height: 6px; /* there must be 'bottom' for ps__thumb-x */ bottom: 2px; @@ -79,8 +79,8 @@ .ps__thumb-y { background-color: #aaa; border-radius: 6px; - transition: background-color .2s linear, width .2s ease-in-out; - -webkit-transition: background-color .2s linear, width .2s ease-in-out; + transition: background-color 0.2s linear, width 0.2s ease-in-out; + -webkit-transition: background-color 0.2s linear, width 0.2s ease-in-out; width: 6px; /* there must be 'right' for ps__thumb-y */ right: 2px; diff --git a/src/components/BaseAlert.vue b/src/components/BaseAlert.vue index 636f1cf8..ed526564 100644 --- a/src/components/BaseAlert.vue +++ b/src/components/BaseAlert.vue @@ -1,14 +1,24 @@ diff --git a/src/components/BaseButton.vue b/src/components/BaseButton.vue index 8a7c7f3f..3486e0fa 100644 --- a/src/components/BaseButton.vue +++ b/src/components/BaseButton.vue @@ -6,15 +6,16 @@ @click="handleClick" class="btn" :class="[ - {'btn-round': round}, - {'btn-block': block}, - {'btn-icon btn-fab': icon}, - {[`btn-${type}`]: type}, - {[`btn-${size}`]: size}, - {'btn-simple': simple}, - {'btn-link': link}, - {'disabled': disabled && tag !== 'button'} - ]"> + { 'btn-round': round }, + { 'btn-block': block }, + { 'btn-icon btn-fab': icon }, + { [`btn-${type}`]: type }, + { [`btn-${size}`]: size }, + { 'btn-simple': simple }, + { 'btn-link': link }, + { disabled: disabled && tag !== 'button' }, + ]" + > @@ -28,7 +29,7 @@ export default { tag: { type: String, default: "button", - description: "Button html tag" + description: "Button html tag", }, round: Boolean, icon: Boolean, @@ -38,33 +39,32 @@ export default { type: { type: String, default: "default", - description: "Button type (primary|secondary|danger etc)" + description: "Button type (primary|secondary|danger etc)", }, nativeType: { type: String, default: "button", - description: "Button native type (e.g button, input etc)" + description: "Button native type (e.g button, input etc)", }, size: { type: String, default: "", - description: "Button size (sm|lg)" + description: "Button size (sm|lg)", }, simple: { type: Boolean, - description: "Whether button is simple (outlined)" + description: "Whether button is simple (outlined)", }, link: { type: Boolean, - description: "Whether button is a link (no borders or background)" + description: "Whether button is a link (no borders or background)", }, }, methods: { handleClick(evt) { this.$emit("click", evt); - } - } + }, + }, }; - + diff --git a/src/components/BaseCheckbox.vue b/src/components/BaseCheckbox.vue index 90821923..3404c8f9 100644 --- a/src/components/BaseCheckbox.vue +++ b/src/components/BaseCheckbox.vue @@ -1,12 +1,13 @@ diff --git a/src/components/BaseDropdown.vue b/src/components/BaseDropdown.vue index d7978656..655fcfba 100644 --- a/src/components/BaseDropdown.vue +++ b/src/components/BaseDropdown.vue @@ -1,9 +1,11 @@ diff --git a/src/components/BaseNav.vue b/src/components/BaseNav.vue index 7303173a..89fc38ce 100755 --- a/src/components/BaseNav.vue +++ b/src/components/BaseNav.vue @@ -1,86 +1,93 @@ - + diff --git a/src/components/BaseRadio.vue b/src/components/BaseRadio.vue index 459a6299..c71da016 100755 --- a/src/components/BaseRadio.vue +++ b/src/components/BaseRadio.vue @@ -1,12 +1,17 @@ - + diff --git a/src/components/Cards/StatsCard.vue b/src/components/Cards/StatsCard.vue index 0ea88237..79cf69e0 100644 --- a/src/components/Cards/StatsCard.vue +++ b/src/components/Cards/StatsCard.vue @@ -10,11 +10,10 @@
-
+
- - + diff --git a/src/components/Charts/BarChart.js b/src/components/Charts/BarChart.js index 80a8c741..14919c6a 100644 --- a/src/components/Charts/BarChart.js +++ b/src/components/Charts/BarChart.js @@ -1,54 +1,69 @@ -import { Bar, mixins } from 'vue-chartjs'; +import { Bar, mixins } from "vue-chartjs"; export default { - name: 'bar-chart', + name: "bar-chart", extends: Bar, mixins: [mixins.reactiveProp], props: { extraOptions: Object, gradientColors: { type: Array, - default: () => ['rgba(72,72,176,0.2)', 'rgba(72,72,176,0.0)', 'rgba(119,52,169,0)'], - validator: val =>{ + default: () => [ + "rgba(72,72,176,0.2)", + "rgba(72,72,176,0.0)", + "rgba(119,52,169,0)", + ], + validator: (val) => { return val.length > 2; - } + }, }, gradientStops: { type: Array, default: () => [1, 0.4, 0], - validator: val =>{ + validator: (val) => { return val.length > 2; - } - } + }, + }, }, data() { return { - ctx: null + ctx: null, }; }, methods: { updateGradients(chartData) { - if(!chartData) return; - const ctx = this.ctx || document.getElementById(this.chartId).getContext('2d'); + if (!chartData) return; + const ctx = + this.ctx || document.getElementById(this.chartId).getContext("2d"); const gradientStroke = ctx.createLinearGradient(0, 230, 0, 50); - gradientStroke.addColorStop(this.gradientStops[0], this.gradientColors[0]); - gradientStroke.addColorStop(this.gradientStops[1], this.gradientColors[1]); - gradientStroke.addColorStop(this.gradientStops[2], this.gradientColors[2]); - chartData.datasets.forEach(set => { + gradientStroke.addColorStop( + this.gradientStops[0], + this.gradientColors[0] + ); + gradientStroke.addColorStop( + this.gradientStops[1], + this.gradientColors[1] + ); + gradientStroke.addColorStop( + this.gradientStops[2], + this.gradientColors[2] + ); + chartData.datasets.forEach((set) => { set.backgroundColor = gradientStroke; }); - } + }, }, mounted() { - this.$watch('chartData', (newVal, oldVal) => { - this.updateGradients(newVal); - if (!oldVal) { - this.renderChart( - this.chartData, - this.extraOptions - ); - } - }, { immediate: true }); - } + this.$watch( + "chartData", + (newVal, oldVal) => { + this.updateGradients(newVal); + if (!oldVal) { + this.renderChart(this.chartData, this.extraOptions); + } + }, + { immediate: true } + ); + }, }; diff --git a/src/components/Charts/LineChart.js b/src/components/Charts/LineChart.js index d30f0182..bb65a1de 100644 --- a/src/components/Charts/LineChart.js +++ b/src/components/Charts/LineChart.js @@ -1,54 +1,69 @@ -import { Line, mixins } from 'vue-chartjs'; +import { Line, mixins } from "vue-chartjs"; export default { - name: 'line-chart', + name: "line-chart", extends: Line, mixins: [mixins.reactiveProp], props: { extraOptions: Object, gradientColors: { type: Array, - default: () => ['rgba(72,72,176,0.2)', 'rgba(72,72,176,0.0)', 'rgba(119,52,169,0)'], - validator: val => { + default: () => [ + "rgba(72,72,176,0.2)", + "rgba(72,72,176,0.0)", + "rgba(119,52,169,0)", + ], + validator: (val) => { return val.length > 2; - } + }, }, gradientStops: { type: Array, default: () => [1, 0.4, 0], - validator: val => { + validator: (val) => { return val.length > 2; - } - } + }, + }, }, data() { return { - ctx: null + ctx: null, }; }, methods: { updateGradients(chartData) { - if(!chartData) return; - const ctx = this.ctx || document.getElementById(this.chartId).getContext('2d'); + if (!chartData) return; + const ctx = + this.ctx || document.getElementById(this.chartId).getContext("2d"); const gradientStroke = ctx.createLinearGradient(0, 230, 0, 50); - gradientStroke.addColorStop(this.gradientStops[0], this.gradientColors[0]); - gradientStroke.addColorStop(this.gradientStops[1], this.gradientColors[1]); - gradientStroke.addColorStop(this.gradientStops[2], this.gradientColors[2]); - chartData.datasets.forEach(set => { + gradientStroke.addColorStop( + this.gradientStops[0], + this.gradientColors[0] + ); + gradientStroke.addColorStop( + this.gradientStops[1], + this.gradientColors[1] + ); + gradientStroke.addColorStop( + this.gradientStops[2], + this.gradientColors[2] + ); + chartData.datasets.forEach((set) => { set.backgroundColor = gradientStroke; }); - } + }, }, mounted() { - this.$watch('chartData', (newVal, oldVal) => { - this.updateGradients(this.chartData); - if (!oldVal) { - this.renderChart( - this.chartData, - this.extraOptions - ); - } - }, { immediate: true }); - } + this.$watch( + "chartData", + (newVal, oldVal) => { + this.updateGradients(this.chartData); + if (!oldVal) { + this.renderChart(this.chartData, this.extraOptions); + } + }, + { immediate: true } + ); + }, }; diff --git a/src/components/Charts/config.js b/src/components/Charts/config.js index 8227a0de..5829c3b6 100644 --- a/src/components/Charts/config.js +++ b/src/components/Charts/config.js @@ -1,222 +1,237 @@ - export const basicOptions = { maintainAspectRatio: false, legend: { - display: false + display: false, }, responsive: true, }; export let blueChartOptions = { ...basicOptions, tooltips: { - backgroundColor: '#f5f5f5', - titleFontColor: '#333', - bodyFontColor: '#666', + backgroundColor: "#f5f5f5", + titleFontColor: "#333", + bodyFontColor: "#666", bodySpacing: 4, xPadding: 12, mode: "nearest", intersect: 0, - position: "nearest" + position: "nearest", }, scales: { - yAxes: [{ - barPercentage: 1.6, - gridLines: { - drawBorder: false, - color: 'rgba(29,140,248,0.0)', - zeroLineColor: "transparent", + yAxes: [ + { + barPercentage: 1.6, + gridLines: { + drawBorder: false, + color: "rgba(29,140,248,0.0)", + zeroLineColor: "transparent", + }, + ticks: { + suggestedMin: 60, + suggestedMax: 125, + padding: 20, + fontColor: "#2380f7", + }, }, - ticks: { - suggestedMin: 60, - suggestedMax: 125, - padding: 20, - fontColor: "#2380f7" - } - }], + ], - xAxes: [{ - barPercentage: 1.6, - gridLines: { - drawBorder: false, - color: 'rgba(29,140,248,0.1)', - zeroLineColor: "transparent", + xAxes: [ + { + barPercentage: 1.6, + gridLines: { + drawBorder: false, + color: "rgba(29,140,248,0.1)", + zeroLineColor: "transparent", + }, + ticks: { + padding: 20, + fontColor: "#2380f7", + }, }, - ticks: { - padding: 20, - fontColor: "#2380f7" - } - }] - } -} + ], + }, +}; export let purpleChartOptions = { ...basicOptions, tooltips: { - backgroundColor: '#f5f5f5', - titleFontColor: '#333', - bodyFontColor: '#666', + backgroundColor: "#f5f5f5", + titleFontColor: "#333", + bodyFontColor: "#666", bodySpacing: 4, xPadding: 12, mode: "nearest", intersect: 0, - position: "nearest" + position: "nearest", }, scales: { - yAxes: [{ - barPercentage: 1.6, - gridLines: { - drawBorder: false, - color: 'rgba(29,140,248,0.0)', - zeroLineColor: "transparent", + yAxes: [ + { + barPercentage: 1.6, + gridLines: { + drawBorder: false, + color: "rgba(29,140,248,0.0)", + zeroLineColor: "transparent", + }, + ticks: { + suggestedMin: 60, + suggestedMax: 125, + padding: 20, + fontColor: "#9a9a9a", + }, }, - ticks: { - suggestedMin: 60, - suggestedMax: 125, - padding: 20, - fontColor: "#9a9a9a" - } - }], + ], - xAxes: [{ - barPercentage: 1.6, - gridLines: { - drawBorder: false, - color: 'rgba(225,78,202,0.1)', - zeroLineColor: "transparent", + xAxes: [ + { + barPercentage: 1.6, + gridLines: { + drawBorder: false, + color: "rgba(225,78,202,0.1)", + zeroLineColor: "transparent", + }, + ticks: { + padding: 20, + fontColor: "#9a9a9a", + }, }, - ticks: { - padding: 20, - fontColor: "#9a9a9a" - } - }] - } -} + ], + }, +}; export let orangeChartOptions = { ...basicOptions, tooltips: { - backgroundColor: '#f5f5f5', - titleFontColor: '#333', - bodyFontColor: '#666', + backgroundColor: "#f5f5f5", + titleFontColor: "#333", + bodyFontColor: "#666", bodySpacing: 4, xPadding: 12, mode: "nearest", intersect: 0, - position: "nearest" + position: "nearest", }, scales: { - yAxes: [{ - barPercentage: 1.6, - gridLines: { - drawBorder: false, - color: 'rgba(29,140,248,0.0)', - zeroLineColor: "transparent", + yAxes: [ + { + barPercentage: 1.6, + gridLines: { + drawBorder: false, + color: "rgba(29,140,248,0.0)", + zeroLineColor: "transparent", + }, + ticks: { + suggestedMin: 50, + suggestedMax: 110, + padding: 20, + fontColor: "#ff8a76", + }, }, - ticks: { - suggestedMin: 50, - suggestedMax: 110, - padding: 20, - fontColor: "#ff8a76" - } - }], + ], - xAxes: [{ - barPercentage: 1.6, - gridLines: { - drawBorder: false, - color: 'rgba(220,53,69,0.1)', - zeroLineColor: "transparent", + xAxes: [ + { + barPercentage: 1.6, + gridLines: { + drawBorder: false, + color: "rgba(220,53,69,0.1)", + zeroLineColor: "transparent", + }, + ticks: { + padding: 20, + fontColor: "#ff8a76", + }, }, - ticks: { - padding: 20, - fontColor: "#ff8a76" - } - }] - } - -} + ], + }, +}; export let greenChartOptions = { ...basicOptions, tooltips: { - backgroundColor: '#f5f5f5', - titleFontColor: '#333', - bodyFontColor: '#666', + backgroundColor: "#f5f5f5", + titleFontColor: "#333", + bodyFontColor: "#666", bodySpacing: 4, xPadding: 12, mode: "nearest", intersect: 0, - position: "nearest" + position: "nearest", }, scales: { - yAxes: [{ - barPercentage: 1.6, - gridLines: { - drawBorder: false, - color: 'rgba(29,140,248,0.0)', - zeroLineColor: "transparent", + yAxes: [ + { + barPercentage: 1.6, + gridLines: { + drawBorder: false, + color: "rgba(29,140,248,0.0)", + zeroLineColor: "transparent", + }, + ticks: { + suggestedMin: 50, + suggestedMax: 125, + padding: 20, + fontColor: "#9e9e9e", + }, }, - ticks: { - suggestedMin: 50, - suggestedMax: 125, - padding: 20, - fontColor: "#9e9e9e" - } - }], + ], - xAxes: [{ - barPercentage: 1.6, - gridLines: { - drawBorder: false, - color: 'rgba(0,242,195,0.1)', - zeroLineColor: "transparent", + xAxes: [ + { + barPercentage: 1.6, + gridLines: { + drawBorder: false, + color: "rgba(0,242,195,0.1)", + zeroLineColor: "transparent", + }, + ticks: { + padding: 20, + fontColor: "#9e9e9e", + }, }, - ticks: { - padding: 20, - fontColor: "#9e9e9e" - } - }] - } -} + ], + }, +}; export let barChartOptions = { ...basicOptions, tooltips: { - backgroundColor: '#f5f5f5', - titleFontColor: '#333', - bodyFontColor: '#666', + backgroundColor: "#f5f5f5", + titleFontColor: "#333", + bodyFontColor: "#666", bodySpacing: 4, xPadding: 12, mode: "nearest", intersect: 0, - position: "nearest" + position: "nearest", }, scales: { - yAxes: [{ - - gridLines: { - drawBorder: false, - color: 'rgba(29,140,248,0.1)', - zeroLineColor: "transparent", + yAxes: [ + { + gridLines: { + drawBorder: false, + color: "rgba(29,140,248,0.1)", + zeroLineColor: "transparent", + }, + ticks: { + suggestedMin: 60, + suggestedMax: 120, + padding: 20, + fontColor: "#9e9e9e", + }, }, - ticks: { - suggestedMin: 60, - suggestedMax: 120, - padding: 20, - fontColor: "#9e9e9e" - } - }], - xAxes: [{ - - gridLines: { - drawBorder: false, - color: 'rgba(29,140,248,0.1)', - zeroLineColor: "transparent", + ], + xAxes: [ + { + gridLines: { + drawBorder: false, + color: "rgba(29,140,248,0.1)", + zeroLineColor: "transparent", + }, + ticks: { + padding: 20, + fontColor: "#9e9e9e", + }, }, - ticks: { - padding: 20, - fontColor: "#9e9e9e" - } - }] - } - -} + ], + }, +}; diff --git a/src/components/CloseButton.vue b/src/components/CloseButton.vue index 7557943c..dcbdd7e8 100755 --- a/src/components/CloseButton.vue +++ b/src/components/CloseButton.vue @@ -1,14 +1,17 @@ - + diff --git a/src/components/Inputs/BaseInput.vue b/src/components/Inputs/BaseInput.vue index 6111bfe6..09d47e66 100644 --- a/src/components/Inputs/BaseInput.vue +++ b/src/components/Inputs/BaseInput.vue @@ -1,12 +1,14 @@ - + diff --git a/src/components/Modal.vue b/src/components/Modal.vue index df4b3fda..b2dc5c94 100644 --- a/src/components/Modal.vue +++ b/src/components/Modal.vue @@ -1,26 +1,48 @@ @@ -45,17 +66,17 @@ import { SlideYUpTransition } from "vue2-transitions"; export default { name: "modal", components: { - SlideYUpTransition + SlideYUpTransition, }, props: { show: Boolean, showClose: { type: Boolean, - default: true + default: true, }, centered: { type: Boolean, - default: true + default: true, }, type: { type: String, @@ -64,43 +85,43 @@ export default { let acceptedValues = ["", "notice", "mini"]; return acceptedValues.indexOf(value) !== -1; }, - description: 'Modal type (notice|mini|"") ' + description: 'Modal type (notice|mini|"") ', }, modalClasses: { type: [Object, String], - description: "Modal dialog css classes" + description: "Modal dialog css classes", }, modalContentClasses: { type: [Object, String], - description: "Modal dialog content css classes" + description: "Modal dialog content css classes", }, gradient: { type: String, - description: "Modal gradient type (danger, primary etc)" + description: "Modal gradient type (danger, primary etc)", }, headerClasses: { type: [Object, String], - description: "Modal Header css classes" + description: "Modal Header css classes", }, bodyClasses: { type: [Object, String], - description: "Modal Body css classes" + description: "Modal Body css classes", }, footerClasses: { type: [Object, String], - description: "Modal Footer css classes" + description: "Modal Footer css classes", }, animationDuration: { type: Number, default: 500, - description: "Modal transition duration" - } + description: "Modal transition duration", + }, }, methods: { closeModal() { this.$emit("update:show", false); this.$emit("close"); - } + }, }, watch: { show(val) { @@ -110,8 +131,8 @@ export default { } else { documentClasses.remove("modal-open"); } - } - } + }, + }, }; + diff --git a/src/components/NotificationPlugin/Notification.vue b/src/components/NotificationPlugin/Notification.vue index 674f4b8e..959a38f9 100644 --- a/src/components/NotificationPlugin/Notification.vue +++ b/src/components/NotificationPlugin/Notification.vue @@ -1,39 +1,52 @@ + diff --git a/src/components/SidebarPlugin/index.js b/src/components/SidebarPlugin/index.js index f1aea08c..34ea1148 100644 --- a/src/components/SidebarPlugin/index.js +++ b/src/components/SidebarPlugin/index.js @@ -6,21 +6,21 @@ const SidebarStore = { sidebarLinks: [], displaySidebar(value) { this.showSidebar = value; - } + }, }; const SidebarPlugin = { install(Vue) { let app = new Vue({ data: { - sidebarStore: SidebarStore - } + sidebarStore: SidebarStore, + }, }); Vue.prototype.$sidebar = app.sidebarStore; Vue.component("side-bar", Sidebar); Vue.component("sidebar-link", SidebarLink); - } + }, }; export default SidebarPlugin; diff --git a/src/components/index.js b/src/components/index.js index ac018d73..ae322875 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -28,5 +28,5 @@ export { BaseButton, BaseAlert, SidebarPlugin, - BaseNav + BaseNav, }; diff --git a/src/config.js b/src/config.js index a4cb2a21..df61bbc2 100644 --- a/src/config.js +++ b/src/config.js @@ -5,6 +5,10 @@ export default { info: "#1d8cf8", danger: "#fd5d93", teal: "#00d6b4", - primaryGradient: ['rgba(76, 211, 150, 0.1)', 'rgba(53, 183, 125, 0)', 'rgba(119,52,169,0)'], - } -} + primaryGradient: [ + "rgba(76, 211, 150, 0.1)", + "rgba(53, 183, 125, 0)", + "rgba(119,52,169,0)", + ], + }, +}; diff --git a/src/directives/click-ouside.js b/src/directives/click-ouside.js index e4c70f52..a278d84c 100644 --- a/src/directives/click-ouside.js +++ b/src/directives/click-ouside.js @@ -7,9 +7,9 @@ export default { vnode.context[binding.expression](event); } }; - document.body.addEventListener('click', el.clickOutsideEvent) + document.body.addEventListener("click", el.clickOutsideEvent); }, unbind: function (el) { - document.body.removeEventListener('click', el.clickOutsideEvent) + document.body.removeEventListener("click", el.clickOutsideEvent); }, -} +}; diff --git a/src/i18n.js b/src/i18n.js index d868c76f..2cca10c3 100644 --- a/src/i18n.js +++ b/src/i18n.js @@ -1,23 +1,27 @@ -import Vue from 'vue' -import VueI18n from 'vue-i18n' +import Vue from "vue"; +import VueI18n from "vue-i18n"; -Vue.use(VueI18n) +Vue.use(VueI18n); -function loadLocaleMessages () { - const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i) - const messages = {} - locales.keys().forEach(key => { - const matched = key.match(/([a-z0-9]+)\./i) +function loadLocaleMessages() { + const locales = require.context( + "./locales", + true, + /[A-Za-z0-9-_,\s]+\.json$/i + ); + const messages = {}; + locales.keys().forEach((key) => { + const matched = key.match(/([a-z0-9]+)\./i); if (matched && matched.length > 1) { - const locale = matched[1] - messages[locale] = locales(key) + const locale = matched[1]; + messages[locale] = locales(key); } - }) - return messages + }); + return messages; } export default new VueI18n({ - locale: process.env.VUE_APP_I18N_LOCALE || 'en', - fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en', - messages: loadLocaleMessages() -}) + locale: process.env.VUE_APP_I18N_LOCALE || "en", + fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || "en", + messages: loadLocaleMessages(), +}); diff --git a/src/layout/dashboard/Content.vue b/src/layout/dashboard/Content.vue index 93032dba..a5e0c656 100644 --- a/src/layout/dashboard/Content.vue +++ b/src/layout/dashboard/Content.vue @@ -7,10 +7,10 @@ diff --git a/src/layout/dashboard/ContentFooter.vue b/src/layout/dashboard/ContentFooter.vue index 6308a4b0..5fb056c9 100644 --- a/src/layout/dashboard/ContentFooter.vue +++ b/src/layout/dashboard/ContentFooter.vue @@ -8,9 +8,7 @@ - + diff --git a/src/layout/dashboard/DashboardLayout.vue b/src/layout/dashboard/DashboardLayout.vue index cda7e1cc..d6b059ee 100644 --- a/src/layout/dashboard/DashboardLayout.vue +++ b/src/layout/dashboard/DashboardLayout.vue @@ -2,29 +2,58 @@
- - - +
- + diff --git a/src/layout/dashboard/MobileMenu.vue b/src/layout/dashboard/MobileMenu.vue index 0917ac98..597e8301 100644 --- a/src/layout/dashboard/MobileMenu.vue +++ b/src/layout/dashboard/MobileMenu.vue @@ -6,5 +6,4 @@ - + diff --git a/src/layout/dashboard/TopNavbar.vue b/src/layout/dashboard/TopNavbar.vue index 3496f23f..bdea4bc9 100644 --- a/src/layout/dashboard/TopNavbar.vue +++ b/src/layout/dashboard/TopNavbar.vue @@ -1,26 +1,36 @@ - + diff --git a/src/layout/starter/Content.vue b/src/layout/starter/Content.vue index 93032dba..a5e0c656 100644 --- a/src/layout/starter/Content.vue +++ b/src/layout/starter/Content.vue @@ -7,10 +7,10 @@ diff --git a/src/layout/starter/MobileMenu.vue b/src/layout/starter/MobileMenu.vue index 0917ac98..597e8301 100644 --- a/src/layout/starter/MobileMenu.vue +++ b/src/layout/starter/MobileMenu.vue @@ -6,5 +6,4 @@ - + diff --git a/src/layout/starter/SampleFooter.vue b/src/layout/starter/SampleFooter.vue index b443d6b4..cee0b673 100644 --- a/src/layout/starter/SampleFooter.vue +++ b/src/layout/starter/SampleFooter.vue @@ -2,21 +2,25 @@ - + diff --git a/src/layout/starter/SampleLayout.vue b/src/layout/starter/SampleLayout.vue index 912023b2..3539b124 100755 --- a/src/layout/starter/SampleLayout.vue +++ b/src/layout/starter/SampleLayout.vue @@ -2,40 +2,39 @@
- - - +
- + diff --git a/src/layout/starter/SampleNavbar.vue b/src/layout/starter/SampleNavbar.vue index 76cbb258..db37428b 100644 --- a/src/layout/starter/SampleNavbar.vue +++ b/src/layout/starter/SampleNavbar.vue @@ -1,24 +1,31 @@ - + diff --git a/src/layout/starter/SamplePage.vue b/src/layout/starter/SamplePage.vue index e56df8cf..a0d8b309 100755 --- a/src/layout/starter/SamplePage.vue +++ b/src/layout/starter/SamplePage.vue @@ -3,10 +3,10 @@ diff --git a/src/locales/ar.json b/src/locales/ar.json index d66a36ae..cfa8055f 100644 --- a/src/locales/ar.json +++ b/src/locales/ar.json @@ -5,11 +5,7 @@ "performance": "أداء", "simpleTable": "جدول بسيط", "totalShipments": "مجموع الشحنات", - "chartCategories": [ - "حسابات", - "المشتريات", - "جلسات" - ], + "chartCategories": ["حسابات", "المشتريات", "جلسات"], "tasks": "تتبع", "today": "اليوم", "dropdown": { @@ -19,12 +15,7 @@ }, "usersTable": { "title": "جدول بسيط", - "columns": [ - "اسم", - "بلد", - "مدينة", - "راتب" - ], + "columns": ["اسم", "بلد", "مدينة", "راتب"], "data": [ { "id": 1, diff --git a/src/locales/en.json b/src/locales/en.json index 284e8463..cecbf459 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -5,11 +5,7 @@ "performance": "Performance", "simpleTable": "Simple Table", "totalShipments": "Total Shipments", - "chartCategories": [ - "Accounts", - "Purchases", - "Sessions" - ], + "chartCategories": ["Accounts", "Purchases", "Sessions"], "tasks": "Tasks({count})", "today": "Today", "dropdown": { @@ -19,12 +15,7 @@ }, "usersTable": { "title": "Simple Table", - "columns": [ - "Name", - "Country", - "City", - "Salary" - ], + "columns": ["Name", "Country", "City", "Salary"], "data": [ { "id": 1, diff --git a/src/main.js b/src/main.js index d493fa62..105f6e97 100644 --- a/src/main.js +++ b/src/main.js @@ -1,10 +1,10 @@ /* ========================================================= - * Vue Black Dashboard - v1.1.2 + * Vue Black Dashboard - v1.1.3 ========================================================= * Product Page: https://www.creative-tim.com/product/black-dashboard - * Copyright 2023 Creative Tim (http://www.creative-tim.com) + * Copyright 2024 Creative Tim (http://www.creative-tim.com) ========================================================= @@ -13,21 +13,19 @@ */ import Vue from "vue"; import VueRouter from "vue-router"; -import RouterPrefetch from 'vue-router-prefetch' +import RouterPrefetch from "vue-router-prefetch"; import App from "./App"; // TIP: change to import router from "./router/starterRouter"; to start with a clean layout import router from "./router/index"; import BlackDashboard from "./plugins/blackDashboard"; -import i18n from "./i18n" -import './registerServiceWorker' +import i18n from "./i18n"; +import "./registerServiceWorker"; Vue.use(BlackDashboard); Vue.use(VueRouter); Vue.use(RouterPrefetch); - -/* eslint-disable no-new */ new Vue({ router, i18n, - render: h => h(App) + render: (h) => h(App), }).$mount("#app"); diff --git a/src/pages/Dashboard.vue b/src/pages/Dashboard.vue index ecc99b02..356e2802 100644 --- a/src/pages/Dashboard.vue +++ b/src/pages/Dashboard.vue @@ -1,93 +1,115 @@ - + diff --git a/src/pages/Dashboard/TaskList.vue b/src/pages/Dashboard/TaskList.vue index cd3227c0..6d596cc8 100644 --- a/src/pages/Dashboard/TaskList.vue +++ b/src/pages/Dashboard/TaskList.vue @@ -1,35 +1,32 @@ - + diff --git a/src/pages/Dashboard/UserTable.vue b/src/pages/Dashboard/UserTable.vue index 349d3fa2..b64020d5 100644 --- a/src/pages/Dashboard/UserTable.vue +++ b/src/pages/Dashboard/UserTable.vue @@ -1,21 +1,22 @@ - + diff --git a/src/pages/Icons.vue b/src/pages/Icons.vue index 87059e38..f28476c9 100644 --- a/src/pages/Icons.vue +++ b/src/pages/Icons.vue @@ -2,810 +2,819 @@
100 Awesome Nucleo Icons
-

Handcrafted by our friends from NucleoApp

+

+ Handcrafted by our friends from + NucleoApp +

-
+

icon-alert-circle-exc

-
-
+

icon-align-center

-
-
+

icon-align-left-2

-
-
+

icon-app

-
-
+

icon-atom

-
-
-
+

icon-attach-87

-
-
+

icon-badge

-
-
+

icon-bag-16

-
-
+

icon-bank

-
-
-
+

icon-basket-simple

-
-
-
+

icon-bell-55

-
-
-
+

icon-bold

-
-
-
+

icon-book-bookmark

-
-
-
+

icon-double-right

-
-
-
+

icon-bulb-63

-
-
-
+

icon-bullet-list-67

-
-
-
+

icon-bus-front-12

-
-
-
+

icon-button-power

-
-
-
+

icon-camera-18

-
-
-
+

icon-calendar-60

-
-
-
+

icon-caps-small

-
-
-
+

icon-cart

-
-
-
+

icon-chart-bar-32

-
-
-
+

icon-chart-pie-36

-
-
-
+

icon-chat-33

-
-
-
+

icon-check-2

-
-
-
+

icon-cloud-download-93

-
-
-
+

icon-cloud-upload-94

-
-
-
+

icon-coins

-
-
-
+

icon-compass-05

-
-
-
+

icon-controller

-
-
-
+

icon-credit-card

-
-
-
+

icon-delivery-fast

-
-
-
+

icon-email-85

-
-
-
+

icon-gift-2

-
-
-
+

icon-globe-2

-
-
-
+

icon-headphones

-
-
-
+

icon-heart-2

-
-
-
+

icon-html5

-
-
-
+

icon-double-left

-
-
-
+

icon-image-02

-
-
-
+

icon-istanbul

-
-
-
+

icon-key-25

-
-
-
+

icon-laptop

-
-
-
+

icon-light-3

-
-
-
+

icon-link-72

-
-
-
+

icon-lock-circle

-
-
-
+

icon-map-big

-
-
-
+

icon-minimal-down

-
-
-
+

icon-minimal-left

-
-
-
+

icon-minimal-right

-
-
-
+

icon-minimal-up

-
-
-
+

icon-mobile

-
-
-
+

icon-molecule-40

-
-
-
+

icon-money-coins

-
-
-
+

icon-notes

-
-
-
+

icon-palette

-
-
-
+

icon-paper

-
-
-
+

icon-pin

-
-
-
+

icon-planet

-
-
-
+

icon-puzzle-10

-
-
-
+

icon-pencil

-
-
-
+

icon-satisfied

-
-
-
+

icon-scissors

-
-
-
+

icon-send

-
-
-
+

icon-settings-gear-63

-
-
-
+

icon-settings

-
-
-
+

icon-wifi

-
-
-
+

icon-single-02

-
-
-
+

icon-single-copy-04

-
-
-
+

icon-sound-wave

-
-
-
+

icon-spaceship

-
-
-
+

icon-square-pin

-
-
-
+

icon-support-17

-
-
-
+

icon-tablet-2

-
-
-
+

icon-tag

-
-
-
+

icon-tap-02

-
-
-
+

icon-tie-bow

-
-
-
+

icon-time-alarm

-
-
-
+

icon-trash-simple

-
-
-
+

icon-trophy

-
-
-
+

icon-tv-2

-
-
-
+

icon-upload

-
-
-
+

icon-user-run

-
-
-
+

icon-vector

-
-
-
+

icon-video-66

-
-
-
+

icon-wallet-43

-
-
-
+

icon-volume-98

-
-
-
+

icon-watch-time

-
-
-
+

icon-world

-
-
-
+

icon-zoom-split

-
-
-
+

icon-refresh-01

-
-
-
+

icon-refresh-02

-
-
-
+

icon-shape-star

-
-
-
+

icon-components

-
-
-
+

icon-triangle-right-17

-
-
-
+

icon-button-pause

-
-
-
+
-

icon-simple-remove

-
-
+

icon-simple-add

-
-
-
+

icon-simple-delete

-
-
-
@@ -813,5 +822,4 @@ - + diff --git a/src/pages/Maps.vue b/src/pages/Maps.vue index 49935c88..5ff3589e 100644 --- a/src/pages/Maps.vue +++ b/src/pages/Maps.vue @@ -1,8 +1,7 @@ - + diff --git a/src/pages/NotFoundPage.vue b/src/pages/NotFoundPage.vue index 9820532a..4062c742 100644 --- a/src/pages/NotFoundPage.vue +++ b/src/pages/NotFoundPage.vue @@ -4,20 +4,27 @@
@@ -31,7 +38,9 @@

404 Not Found

-

Oops! It seems that this page does not exist.

+

+ Oops! It seems that this page does not exist. +

@@ -42,10 +51,10 @@ diff --git a/src/pages/Notifications.vue b/src/pages/Notifications.vue index 9282c8ad..c4260e63 100644 --- a/src/pages/Notifications.vue +++ b/src/pages/Notifications.vue @@ -11,11 +11,18 @@ - This is a notification with close button and icon. + This is a notification with close button and icon. - This is a notification with close button and icon and have many lines. You can see that the icon and the close button are always vertically aligned. This is a beautiful notification. So you don't have to worry about the style. + This is a notification with close button and icon and have many + lines. You can see that the icon and the close button are always + vertically aligned. This is a beautiful notification. So you don't + have to worry about the style.
@@ -23,19 +30,34 @@

Notifications states

- Primary - This is a regular notification made with ".alert-primary" + Primary - This is a regular notification made with + ".alert-primary" - Info - This is a regular notification made with ".alert-info" + Info - This is a regular notification made with + ".alert-info" - Success - This is a regular notification made with ".alert-success" + Success - This is a regular notification made with + ".alert-success" - Warning - This is a regular notification made with ".alert-warning" + Warning - This is a regular notification made with + ".alert-warning" - Danger - This is a regular notification made with ".alert-danger" + Danger - This is a regular notification made with + ".alert-danger"
@@ -54,13 +76,28 @@
- Top Left + Top Left
- Top Center + Top Center
- Top Right + Top Right
@@ -69,13 +106,28 @@
- Bottom Left + Bottom Left
- Bottom Center + Bottom Center
- Bottom Right + Bottom Right
@@ -86,35 +138,34 @@
- + diff --git a/src/pages/Notifications/NotificationTemplate.vue b/src/pages/Notifications/NotificationTemplate.vue index b5a1bbf3..f24fb3ba 100644 --- a/src/pages/Notifications/NotificationTemplate.vue +++ b/src/pages/Notifications/NotificationTemplate.vue @@ -1,9 +1,12 @@ diff --git a/src/pages/Profile.vue b/src/pages/Profile.vue index ab897621..d26f423e 100644 --- a/src/pages/Profile.vue +++ b/src/pages/Profile.vue @@ -1,8 +1,7 @@ - + diff --git a/src/pages/Profile/EditProfileForm.vue b/src/pages/Profile/EditProfileForm.vue index 8e277a02..04117834 100644 --- a/src/pages/Profile/EditProfileForm.vue +++ b/src/pages/Profile/EditProfileForm.vue @@ -99,9 +99,9 @@ export default { type: Object, default: () => { return {}; - } - } - } + }, + }, + }, }; diff --git a/src/pages/Profile/UserCard.vue b/src/pages/Profile/UserCard.vue index 4e1a8584..5b715149 100644 --- a/src/pages/Profile/UserCard.vue +++ b/src/pages/Profile/UserCard.vue @@ -1,23 +1,22 @@ - + diff --git a/src/pages/TableList.vue b/src/pages/TableList.vue index d43a072c..3296a49c 100644 --- a/src/pages/TableList.vue +++ b/src/pages/TableList.vue @@ -1,28 +1,32 @@ - + diff --git a/src/pages/Typography.vue b/src/pages/Typography.vue index 8230470a..de6cb474 100644 --- a/src/pages/Typography.vue +++ b/src/pages/Typography.vue @@ -8,95 +8,95 @@
-

- Header 1The Life of Black Dashboard

+

Header 1The Life of Black Dashboard

-

- Header 2The Life of Black Dashboard

+

Header 2The Life of Black Dashboard

-

- Header 3The Life of Black Dashboard

+

Header 3The Life of Black Dashboard

-

- Header 4The Life of Black Dashboard

+

Header 4The Life of Black Dashboard

-
- Header 5The Life of Black Dashboard
+
Header 5The Life of Black Dashboard
-
- Header 6The Life of Black Dashboard
+
Header 6The Life of Black Dashboard

Paragraph - I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. - I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push - possibilities, to show people, this is the level that things could be at. + I will be the leader of a company that ends up being worth + billions of dollars, because I got the answers. I understand + culture. I am the nucleus. I think that’s a responsibility that I + have, to push possibilities, to show people, this is the level + that things could be at.

Quote

- "I will be the leader of a company that ends up being worth billions of dollars, because I got the - answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push - possibilities, to show people, this is the level that things could be at." -
-
- - - Noaa - + "I will be the leader of a company that ends up being worth + billions of dollars, because I got the answers. I understand + culture. I am the nucleus. I think that’s a responsibility that + I have, to push possibilities, to show people, this is the level + that things could be at." +
+
+ - Noaa

Muted Text

- I will be the leader of a company that ends up being worth billions of dollars, because I got the - answers... + I will be the leader of a company that ends up being worth + billions of dollars, because I got the answers...

Primary Text

- I will be the leader of a company that ends up being worth billions of dollars, because I got the - answers...

+ I will be the leader of a company that ends up being worth + billions of dollars, because I got the answers... +

Info Text

- I will be the leader of a company that ends up being worth billions of dollars, because I got the - answers...

+ I will be the leader of a company that ends up being worth + billions of dollars, because I got the answers... +

Success Text

- I will be the leader of a company that ends up being worth billions of dollars, because I got the - answers...

+ I will be the leader of a company that ends up being worth + billions of dollars, because I got the answers... +

Warning Text

- I will be the leader of a company that ends up being worth billions of dollars, because I got the - answers... + I will be the leader of a company that ends up being worth + billions of dollars, because I got the answers...

Danger Text

- I will be the leader of a company that ends up being worth billions of dollars, because I got the - answers...

+ I will be the leader of a company that ends up being worth + billions of dollars, because I got the answers... +

Small Tag Header with small subtitle -
+
Use "small" tag for the headers

@@ -148,8 +148,9 @@
Code -

This is - .css-class-as-code, an example of an inline code element. Wrap inline code within a +

+ This is .css-class-as-code, an example of an inline + code element. Wrap inline code within a <code>...</code>tag.

1. #This is an example of preformatted text.
2. #Here is another line of code
@@ -160,7 +161,6 @@
- + diff --git a/src/plugins/RTLPlugin.js b/src/plugins/RTLPlugin.js index cfcef3fd..89b59c63 100644 --- a/src/plugins/RTLPlugin.js +++ b/src/plugins/RTLPlugin.js @@ -3,37 +3,37 @@ export default { let app = new Vue({ data() { return { - isRTL: false - } + isRTL: false, + }; }, methods: { getDocClasses() { - return document.body.classList + return document.body.classList; }, enableRTL() { this.isRTL = true; - this.getDocClasses().add('rtl'); - this.getDocClasses().add('menu-on-right'); + this.getDocClasses().add("rtl"); + this.getDocClasses().add("menu-on-right"); this.toggleBootstrapRTL(true); }, disableRTL() { this.isRTL = false; - this.getDocClasses().remove('rtl'); - this.getDocClasses().remove('menu-on-right'); + this.getDocClasses().remove("rtl"); + this.getDocClasses().remove("menu-on-right"); this.toggleBootstrapRTL(false); }, toggleBootstrapRTL(value) { - for (let i=0; i < document.styleSheets.length; i++){ + for (let i = 0; i < document.styleSheets.length; i++) { let styleSheet = document.styleSheets[i]; let { href } = styleSheet; - if(href && href.endsWith('bootstrap-rtl.css')){ + if (href && href.endsWith("bootstrap-rtl.css")) { styleSheet.disabled = !value; } } - } - } + }, + }, }); Vue.prototype.$rtl = app; - } -} + }, +}; diff --git a/src/plugins/blackDashboard.js b/src/plugins/blackDashboard.js index fb6bbcfc..3a3efdf9 100644 --- a/src/plugins/blackDashboard.js +++ b/src/plugins/blackDashboard.js @@ -16,5 +16,5 @@ export default { Vue.use(SideBar); Vue.use(Notify); Vue.use(RTLPlugin); - } -} + }, +}; diff --git a/src/plugins/globalComponents.js b/src/plugins/globalComponents.js index 2a603058..d302b7b4 100644 --- a/src/plugins/globalComponents.js +++ b/src/plugins/globalComponents.js @@ -1,4 +1,10 @@ -import { BaseInput, Card, BaseDropdown, BaseButton, BaseCheckbox } from "../components/index"; +import { + BaseInput, + Card, + BaseDropdown, + BaseButton, + BaseCheckbox, +} from "../components/index"; /** * You can register global components here and use them as a plugin in your main Vue instance */ @@ -10,7 +16,7 @@ const GlobalComponents = { Vue.component(BaseDropdown.name, BaseDropdown); Vue.component(BaseButton.name, BaseButton); Vue.component(BaseCheckbox.name, BaseCheckbox); - } + }, }; export default GlobalComponents; diff --git a/src/plugins/globalDirectives.js b/src/plugins/globalDirectives.js index 3fb38d07..c44c4894 100755 --- a/src/plugins/globalDirectives.js +++ b/src/plugins/globalDirectives.js @@ -1,14 +1,13 @@ -import clickOutside from '../directives/click-ouside.js'; - +import clickOutside from "../directives/click-ouside.js"; /** * You can register global directives here and use them as a plugin in your main Vue instance */ const GlobalDirectives = { - install (Vue) { - Vue.directive('click-outside', clickOutside); - } -} + install(Vue) { + Vue.directive("click-outside", clickOutside); + }, +}; -export default GlobalDirectives +export default GlobalDirectives; diff --git a/src/registerServiceWorker.js b/src/registerServiceWorker.js index 4b280e51..08c25bc6 100644 --- a/src/registerServiceWorker.js +++ b/src/registerServiceWorker.js @@ -1,35 +1,37 @@ /* eslint-disable no-console */ -import { register } from 'register-service-worker' +import { register } from "register-service-worker"; -if (process.env.NODE_ENV === 'production') { +if (process.env.NODE_ENV === "production") { register(`${process.env.BASE_URL}service-worker.js`, { registrationOptions: { scope: process.env.BASE_URL, }, - ready () { + ready() { console.log( - 'App is being served from cache by a service worker.\n' + - 'For more details, visit https://goo.gl/AFskqB' - ) + "App is being served from cache by a service worker.\n" + + "For more details, visit https://goo.gl/AFskqB" + ); }, - registered () { - console.log('Service worker has been registered.') + registered() { + console.log("Service worker has been registered."); }, - cached () { - console.log('Content has been cached for offline use.') + cached() { + console.log("Content has been cached for offline use."); }, - updatefound () { - console.log('New content is downloading.') + updatefound() { + console.log("New content is downloading."); }, - updated () { - console.log('New content is available; please refresh.') + updated() { + console.log("New content is available; please refresh."); }, - offline () { - console.log('No internet connection found. App is running in offline mode.') + offline() { + console.log( + "No internet connection found. App is running in offline mode." + ); + }, + error(error) { + console.error("Error during service worker registration:", error); }, - error (error) { - console.error('Error during service worker registration:', error) - } - }) + }); } diff --git a/src/router/index.js b/src/router/index.js index 1670c1f3..4815a406 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -7,11 +7,11 @@ const router = new VueRouter({ linkExactActiveClass: "active", scrollBehavior: (to) => { if (to.hash) { - return {selector: to.hash} + return { selector: to.hash }; } else { - return { x: 0, y: 0 } + return { x: 0, y: 0 }; } - } + }, }); export default router; diff --git a/src/router/routes.js b/src/router/routes.js index 8a0ef303..45634686 100644 --- a/src/router/routes.js +++ b/src/router/routes.js @@ -3,13 +3,19 @@ import DashboardLayout from "@/layout/dashboard/DashboardLayout.vue"; import NotFound from "@/pages/NotFoundPage.vue"; // Admin pages -const Dashboard = () => import(/* webpackChunkName: "dashboard" */"@/pages/Dashboard.vue"); -const Profile = () => import(/* webpackChunkName: "common" */ "@/pages/Profile.vue"); -const Notifications = () => import(/* webpackChunkName: "common" */"@/pages/Notifications.vue"); -const Icons = () => import(/* webpackChunkName: "common" */ "@/pages/Icons.vue"); +const Dashboard = () => + import(/* webpackChunkName: "dashboard" */ "@/pages/Dashboard.vue"); +const Profile = () => + import(/* webpackChunkName: "common" */ "@/pages/Profile.vue"); +const Notifications = () => + import(/* webpackChunkName: "common" */ "@/pages/Notifications.vue"); +const Icons = () => + import(/* webpackChunkName: "common" */ "@/pages/Icons.vue"); const Maps = () => import(/* webpackChunkName: "common" */ "@/pages/Maps.vue"); -const Typography = () => import(/* webpackChunkName: "common" */ "@/pages/Typography.vue"); -const TableList = () => import(/* webpackChunkName: "common" */ "@/pages/TableList.vue"); +const Typography = () => + import(/* webpackChunkName: "common" */ "@/pages/Typography.vue"); +const TableList = () => + import(/* webpackChunkName: "common" */ "@/pages/TableList.vue"); const routes = [ { @@ -20,39 +26,39 @@ const routes = [ { path: "dashboard", name: "dashboard", - component: Dashboard + component: Dashboard, }, { path: "profile", name: "profile", - component: Profile + component: Profile, }, { path: "notifications", name: "notifications", - component: Notifications + component: Notifications, }, { path: "icons", name: "icons", - component: Icons + component: Icons, }, { path: "maps", name: "maps", - component: Maps + component: Maps, }, { path: "typography", name: "typography", - component: Typography + component: Typography, }, { path: "table-list", name: "table-list", - component: TableList - } - ] + component: TableList, + }, + ], }, { path: "*", component: NotFound }, ]; diff --git a/src/router/starterRouter.js b/src/router/starterRouter.js index 0cacc83b..890053dd 100644 --- a/src/router/starterRouter.js +++ b/src/router/starterRouter.js @@ -1,24 +1,24 @@ -import Vue from 'vue'; -import Router from 'vue-router'; -import DashboardLayout from '../layout/starter/SampleLayout.vue'; -import Starter from '../layout/starter/SamplePage.vue'; +import Vue from "vue"; +import Router from "vue-router"; +import DashboardLayout from "../layout/starter/SampleLayout.vue"; +import Starter from "../layout/starter/SamplePage.vue"; Vue.use(Router); export default new Router({ routes: [ { - path: '/', - name: 'home', - redirect: '/dashboard', + path: "/", + name: "home", + redirect: "/dashboard", component: DashboardLayout, children: [ { - path: 'dashboard', - name: 'dashboard', - components: { default: Starter } - } - ] - } - ] + path: "dashboard", + name: "dashboard", + components: { default: Starter }, + }, + ], + }, + ], }); diff --git a/vue.config.js b/vue.config.js index 5a7829d7..6e97aae2 100644 --- a/vue.config.js +++ b/vue.config.js @@ -1,4 +1,4 @@ -const webpack = require('webpack'); +const webpack = require("webpack"); module.exports = { lintOnSave: false, @@ -6,32 +6,32 @@ module.exports = { // Set up all the aliases we use in our app. resolve: { alias: { - 'chart.js': 'chart.js/dist/Chart.js' - } + "chart.js": "chart.js/dist/Chart.js", + }, }, plugins: [ new webpack.optimize.LimitChunkCountPlugin({ - maxChunks: 6 - }) - ] + maxChunks: 6, + }), + ], }, pwa: { - name: 'Vue Black Dashboard', - themeColor: '#344675', - msTileColor: '#344675', - appleMobileWebAppCapable: 'yes', - appleMobileWebAppStatusBarStyle: '#344675' + name: "Vue Black Dashboard", + themeColor: "#344675", + msTileColor: "#344675", + appleMobileWebAppCapable: "yes", + appleMobileWebAppStatusBarStyle: "#344675", }, pluginOptions: { i18n: { - locale: 'en', - fallbackLocale: 'en', - localeDir: 'locales', - enableInSFC: false - } + locale: "en", + fallbackLocale: "en", + localeDir: "locales", + enableInSFC: false, + }, }, css: { // Enable CSS source maps. - sourceMap: process.env.NODE_ENV !== 'production' - } + sourceMap: process.env.NODE_ENV !== "production", + }, };