첫커밋
This commit is contained in:
9
.editorconfig
Normal file
9
.editorconfig
Normal file
@@ -0,0 +1,9 @@
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
end_of_line = lf
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
14
.eslintrc.js
Normal file
14
.eslintrc.js
Normal file
@@ -0,0 +1,14 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
env: {
|
||||
node: true
|
||||
},
|
||||
extends: ['plugin:vue/essential'],
|
||||
rules: {
|
||||
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
|
||||
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
|
||||
},
|
||||
parserOptions: {
|
||||
parser: 'babel-eslint'
|
||||
}
|
||||
};
|
||||
15
.gitattributes
vendored
Normal file
15
.gitattributes
vendored
Normal file
@@ -0,0 +1,15 @@
|
||||
# Auto detect text files and perform LF normalization
|
||||
*.scss linguist-language=Vue
|
||||
*.css linguist-language=Vue
|
||||
|
||||
# Standard to msysgit
|
||||
*.doc diff=astextplain
|
||||
*.DOC diff=astextplain
|
||||
*.docx diff=astextplain
|
||||
*.DOCX diff=astextplain
|
||||
*.dot diff=astextplain
|
||||
*.DOT diff=astextplain
|
||||
*.pdf diff=astextplain
|
||||
*.PDF diff=astextplain
|
||||
*.rtf diff=astextplain
|
||||
*.RTF diff=astextplain
|
||||
17
.gitignore
vendored
Normal file
17
.gitignore
vendored
Normal file
@@ -0,0 +1,17 @@
|
||||
.DS_Store
|
||||
node_modules/
|
||||
dist/
|
||||
.cache/
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
test/unit/coverage
|
||||
|
||||
package-lock.json
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
8
.postcssrc.js
Normal file
8
.postcssrc.js
Normal file
@@ -0,0 +1,8 @@
|
||||
// https://github.com/michael-ciniawsky/postcss-load-config
|
||||
|
||||
module.exports = {
|
||||
plugins: {
|
||||
// to edit target browsers: use "browserslist" field in package.json
|
||||
autoprefixer: {}
|
||||
}
|
||||
};
|
||||
2
CHANGELOG.md
Normal file
2
CHANGELOG.md
Normal file
@@ -0,0 +1,2 @@
|
||||
## [1.0.0] - 2020-07-27
|
||||
### Initial Release
|
||||
13
ISSUE_TEMPLATE.md
Normal file
13
ISSUE_TEMPLATE.md
Normal file
@@ -0,0 +1,13 @@
|
||||
<!--
|
||||
IMPORTANT: Please use the following link to create a new issue:
|
||||
|
||||
https://www.creative-tim.com/new-issue/bootstrap-vue-argon-dashboard
|
||||
|
||||
**If your issue was not created using the app above, it will be closed immediately.**
|
||||
-->
|
||||
|
||||
<!--
|
||||
Love Creative Tim? Do you need Angular, React, Vuejs or HTML? You can visit:
|
||||
👉 https://www.creative-tim.com/bundles
|
||||
👉 https://www.creative-tim.com
|
||||
-->
|
||||
14
babel.config.js
Normal file
14
babel.config.js
Normal file
@@ -0,0 +1,14 @@
|
||||
module.exports = {
|
||||
"presets": [
|
||||
"@vue/app"
|
||||
],
|
||||
"plugins": [
|
||||
[
|
||||
"component",
|
||||
{
|
||||
"libraryName": "element-ui",
|
||||
"styleLibraryName": "theme-chalk"
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
12
intelij.webpack.js
Normal file
12
intelij.webpack.js
Normal file
@@ -0,0 +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');
|
||||
|
||||
module.exports = {
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': path.resolve(__dirname, 'src')
|
||||
}
|
||||
}
|
||||
};
|
||||
60
package.json
Normal file
60
package.json
Normal file
@@ -0,0 +1,60 @@
|
||||
{
|
||||
"name": "bootstrap-vue-argon-dashboard",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve --open",
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint",
|
||||
"dev": "npm run serve"
|
||||
},
|
||||
"dependencies": {
|
||||
"bootstrap": "4.3.1",
|
||||
"bootstrap-vue": "^2.5.0",
|
||||
"chart.js": "^2.9.3",
|
||||
"d3": "^5.7.0",
|
||||
"datamaps": "^0.5.9",
|
||||
"date-fns": "^1.30.1",
|
||||
"dropzone": "^5.5.1",
|
||||
"element-ui": "2.4.11",
|
||||
"es6-promise": "^4.1.1",
|
||||
"flatpickr": "^4.5.7",
|
||||
"fuse.js": "^3.2.0",
|
||||
"google-maps": "^3.2.1",
|
||||
"nouislider": "^12.1.0",
|
||||
"perfect-scrollbar": "^1.3.0",
|
||||
"quill": "^1.3.6",
|
||||
"sweetalert2": "^9.5.4",
|
||||
"vee-validate": "^3.2.1",
|
||||
"vue": "^2.6.11",
|
||||
"vue-chartjs": "^3.5.0",
|
||||
"vue-clipboard2": "^0.3.0",
|
||||
"vue-flatpickr-component": "^8.1.2",
|
||||
"vue-loading-spinner": "^1.0.11",
|
||||
"vue-router": "^3.0.6",
|
||||
"vue2-transitions": "^0.2.3",
|
||||
"vuex": "^3.6.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "^3.7.0",
|
||||
"@vue/cli-plugin-eslint": "^3.7.0",
|
||||
"@vue/cli-service": "^3.7.0",
|
||||
"@vue/eslint-config-prettier": "^4.0.1",
|
||||
"babel-plugin-component": "^1.1.0",
|
||||
"node-sass": "^4.12.0",
|
||||
"sass-loader": "^7.1.0",
|
||||
"vue-template-compiler": "^2.6.11"
|
||||
},
|
||||
"postcss": {
|
||||
"plugins": {
|
||||
"autoprefixer": {}
|
||||
}
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not ie <= 10"
|
||||
],
|
||||
"author": "Creative Tim - https://www.creative-tim.com/",
|
||||
"description": "BootstrapVue Argon Dashboard"
|
||||
}
|
||||
BIN
public/favicon.png
Normal file
BIN
public/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
public/img/brand/favicon.png
Normal file
BIN
public/img/brand/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
public/img/brand/green.png
Normal file
BIN
public/img/brand/green.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
BIN
public/img/brand/haku.png
Normal file
BIN
public/img/brand/haku.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
BIN
public/img/brand/white.png
Normal file
BIN
public/img/brand/white.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
BIN
public/img/icons/cards/bitcoin.png
Normal file
BIN
public/img/icons/cards/bitcoin.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 763 B |
BIN
public/img/icons/cards/mastercard.png
Normal file
BIN
public/img/icons/cards/mastercard.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
public/img/icons/cards/paypal.png
Normal file
BIN
public/img/icons/cards/paypal.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 766 B |
BIN
public/img/icons/cards/visa.png
Normal file
BIN
public/img/icons/cards/visa.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 737 B |
12
public/img/icons/common/github.svg
Normal file
12
public/img/icons/common/github.svg
Normal file
@@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="36px" height="36px" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>UI/icons/dark/github</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs/>
|
||||
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="UI/icons/dark/github" fill="#182359">
|
||||
<path d="M17.9985267,2 C9.16436969,2 2,9.16338746 2,18.0004911 C2,25.0695847 6.58405721,31.0660855 12.9420179,33.1818042 C13.7425335,33.3291384 14.0342552,32.8350778 14.0342552,32.4107554 C14.0342552,32.0306332 14.020504,31.0248319 14.0126462,29.6899843 C9.56217195,30.6564965 8.62316216,27.5447988 8.62316216,27.5447988 C7.89533135,25.696246 6.84631204,25.2041499 6.84631204,25.2041499 C5.3935971,24.2120998 6.95632156,24.2317444 6.95632156,24.2317444 C8.56226404,24.3447006 9.40697996,25.8809049 9.40697996,25.8809049 C10.834157,28.3256699 13.1522146,27.6194481 14.063722,27.2098591 C14.2090917,26.1765554 14.6226097,25.4713159 15.0793456,25.0715492 C11.5266276,24.6678535 7.7912152,23.294699 7.7912152,17.163633 C7.7912152,15.417232 8.41492986,13.9880905 9.43841125,12.8703152 C9.27339697,12.4656374 8.72433162,10.8380859 9.5955677,8.63593112 C9.5955677,8.63593112 10.9382731,8.20571534 13.9949661,10.2762516 C15.27088,9.9206851 16.6401056,9.7438841 18.0004911,9.7370085 C19.3598944,9.7438841 20.7281378,9.9206851 22.0060161,10.2762516 C25.0607447,8.20571534 26.4014856,8.63593112 26.4014856,8.63593112 C27.2746861,10.8380859 26.7256208,12.4656374 26.5615888,12.8703152 C27.5870346,13.9880905 28.2058381,15.417232 28.2058381,17.163633 C28.2058381,23.3104147 24.4645324,24.6629424 20.9010099,25.0587802 C21.4746309,25.5528408 21.9863716,26.5291752 21.9863716,28.0211793 C21.9863716,30.1604715 21.966727,31.8862457 21.966727,32.4107554 C21.966727,32.8390067 22.255502,33.3369962 23.0668222,33.180822 C29.4198717,31.0601921 34,25.0676202 34,18.0004911 C34,9.16338746 26.8356303,2 17.9985267,2" id="icons/icon-github"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
17
public/img/icons/common/google.svg
Normal file
17
public/img/icons/common/google.svg
Normal file
@@ -0,0 +1,17 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="36px" height="36px" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>UI/icons/color/google</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs/>
|
||||
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="UI/icons/color/google">
|
||||
<g id="Group" transform="translate(2.000000, 2.000000)">
|
||||
<path d="M32.4365525,16.6024012 C32.4365525,15.4515967 32.3313665,14.344128 32.1357206,13.2820585 L16.5492615,13.2820585 L16.5492615,19.5616128 L25.4557094,19.5616128 C25.0721312,21.5908257 23.9059692,23.3098098 22.1535707,24.4613022 L22.1535707,28.5341733 L27.5019274,28.5341733 C30.631561,25.7077204 32.4365525,21.5461142 32.4365525,16.6024012 L32.4365525,16.6024012 Z" id="Shape" fill="#4285F4"/>
|
||||
<path d="M16.5492615,32.4674071 C21.0175621,32.4674071 24.7635856,31.0139403 27.5019274,28.5341733 L22.1535707,24.4613022 C20.6718508,25.4353244 18.7756982,26.0110706 16.5492615,26.0110706 C12.2387399,26.0110706 8.59088994,23.1557272 7.2893887,19.3181072 L1.76011213,19.3181072 L1.76011213,23.5244249 C4.48302664,28.8299569 10.0796222,32.4674071 16.5492615,32.4674071 L16.5492615,32.4674071 Z" id="Shape" fill="#34A853"/>
|
||||
<path d="M7.2893887,19.3181072 C6.95840347,18.344085 6.77047118,17.3033395 6.77047118,16.2337035 C6.77047118,15.1640676 6.95840347,14.1233221 7.2893887,13.1492999 L7.2893887,8.94298219 L1.76011213,8.94298219 C0.639530783,11.1345322 0,13.6142992 0,16.2337035 C0,18.8531079 0.639530783,21.3328749 1.76011213,23.5244249 L7.2893887,19.3181072 L7.2893887,19.3181072 Z" id="Shape" fill="#FBBC05"/>
|
||||
<path d="M16.5492615,6.4563365 C18.9790577,6.4563365 21.160615,7.27558824 22.8758478,8.88382548 L27.6225407,4.22764161 C24.755872,1.60892511 21.0098485,0 16.5492615,0 C10.0803235,0 4.48302664,3.63813805 1.76011213,8.94298219 L7.2893887,13.1492999 C8.59088994,9.31236774 12.2394411,6.4563365 16.5492615,6.4563365 Z" id="Shape" fill="#EA4335"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
BIN
public/img/icons/flags/DE.png
Normal file
BIN
public/img/icons/flags/DE.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 316 B |
BIN
public/img/icons/flags/GB.png
Normal file
BIN
public/img/icons/flags/GB.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 620 B |
BIN
public/img/icons/flags/US.png
Normal file
BIN
public/img/icons/flags/US.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 426 B |
BIN
public/img/theme/angular.jpg
Normal file
BIN
public/img/theme/angular.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
BIN
public/img/theme/bootstrap.jpg
Normal file
BIN
public/img/theme/bootstrap.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
BIN
public/img/theme/img-1-1000x600.jpg
Normal file
BIN
public/img/theme/img-1-1000x600.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 117 KiB |
BIN
public/img/theme/img-1-1000x900.jpg
Normal file
BIN
public/img/theme/img-1-1000x900.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
BIN
public/img/theme/landing-1.png
Normal file
BIN
public/img/theme/landing-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
BIN
public/img/theme/landing-2.png
Normal file
BIN
public/img/theme/landing-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
BIN
public/img/theme/landing-3.png
Normal file
BIN
public/img/theme/landing-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
BIN
public/img/theme/profile-cover.jpg
Normal file
BIN
public/img/theme/profile-cover.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 533 KiB |
BIN
public/img/theme/react.jpg
Normal file
BIN
public/img/theme/react.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
BIN
public/img/theme/sketch.jpg
Normal file
BIN
public/img/theme/sketch.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
BIN
public/img/theme/team-1.jpg
Normal file
BIN
public/img/theme/team-1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 85 KiB |
BIN
public/img/theme/team-2.jpg
Normal file
BIN
public/img/theme/team-2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 187 KiB |
BIN
public/img/theme/team-3.jpg
Normal file
BIN
public/img/theme/team-3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 109 KiB |
BIN
public/img/theme/team-4.jpg
Normal file
BIN
public/img/theme/team-4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
BIN
public/img/theme/team-5.jpg
Normal file
BIN
public/img/theme/team-5.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 85 KiB |
BIN
public/img/theme/vue.jpg
Normal file
BIN
public/img/theme/vue.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
38
public/index.html
Normal file
38
public/index.html
Normal file
@@ -0,0 +1,38 @@
|
||||
<!--
|
||||
|
||||
=========================================================
|
||||
* BootstrapVue Argon Dashboard - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/bootstrap-vue-argon-dashboard
|
||||
* Copyright 2020 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
* Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
-->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="icon" type="image/png" sizes="96x96" href="<%= webpackConfig.output.publicPath %>favicon.png">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
|
||||
<title>BootstrapVue Argon Dashboard by Creative Tim</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
|
||||
<!-- Fonts -->
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700">
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper" id="app">
|
||||
|
||||
</div>
|
||||
<!-- built files will be auto injected -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
8
src/App.vue
Normal file
8
src/App.vue
Normal file
@@ -0,0 +1,8 @@
|
||||
<template>
|
||||
<router-view></router-view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
}
|
||||
</script>
|
||||
BIN
src/assets/logo.png
Normal file
BIN
src/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
70
src/assets/scss/argon.scss
Normal file
70
src/assets/scss/argon.scss
Normal file
@@ -0,0 +1,70 @@
|
||||
/*!
|
||||
|
||||
=========================================================
|
||||
* Vue Argon Dashboard - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/argon-dashboard
|
||||
* Copyright 2019 Creative Tim (https://www.creative-tim.com)
|
||||
* Licensed under MIT (https://github.com/creativetimofficial/argon-dashboard/blob/master/LICENSE.md)
|
||||
|
||||
* Coded by Creative Tim
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
*/
|
||||
|
||||
// Core
|
||||
|
||||
@import "custom/functions";
|
||||
@import "custom/variables";
|
||||
@import "custom/mixins";
|
||||
|
||||
// Bootstrap (4.1.3) components
|
||||
|
||||
@import "~bootstrap/scss/root";
|
||||
@import "~bootstrap/scss/reboot";
|
||||
@import "~bootstrap/scss/type";
|
||||
@import "~bootstrap/scss/images";
|
||||
@import "~bootstrap/scss/code";
|
||||
@import "~bootstrap/scss/grid";
|
||||
@import "~bootstrap/scss/tables";
|
||||
@import "~bootstrap/scss/forms";
|
||||
@import "~bootstrap/scss/buttons";
|
||||
@import "~bootstrap/scss/transitions";
|
||||
@import "~bootstrap/scss/dropdown";
|
||||
@import "~bootstrap/scss/button-group";
|
||||
@import "~bootstrap/scss/input-group";
|
||||
@import "~bootstrap/scss/custom-forms";
|
||||
@import "~bootstrap/scss/nav";
|
||||
@import "~bootstrap/scss/navbar";
|
||||
@import "~bootstrap/scss/card";
|
||||
@import "~bootstrap/scss/breadcrumb";
|
||||
@import "~bootstrap/scss/pagination";
|
||||
@import "~bootstrap/scss/badge";
|
||||
@import "~bootstrap/scss/jumbotron";
|
||||
@import "~bootstrap/scss/alert";
|
||||
@import "~bootstrap/scss/progress";
|
||||
@import "~bootstrap/scss/media";
|
||||
@import "~bootstrap/scss/list-group";
|
||||
@import "~bootstrap/scss/close";
|
||||
@import "~bootstrap/scss/modal";
|
||||
@import "~bootstrap/scss/tooltip";
|
||||
@import "~bootstrap/scss/popover";
|
||||
@import "~bootstrap/scss/carousel";
|
||||
@import "~bootstrap/scss/utilities";
|
||||
@import "~bootstrap/scss/print";
|
||||
|
||||
// Argon utilities and components
|
||||
|
||||
@import "custom/reboot";
|
||||
@import "custom/utilities";
|
||||
@import "custom/components";
|
||||
|
||||
// Vendor (Plugins)
|
||||
|
||||
@import "custom/vendors";
|
||||
|
||||
|
||||
39
src/assets/scss/core/alerts/_alert-dismissible.scss
Normal file
39
src/assets/scss/core/alerts/_alert-dismissible.scss
Normal file
@@ -0,0 +1,39 @@
|
||||
//
|
||||
// Dismissible alert
|
||||
//
|
||||
|
||||
.alert-dismissible {
|
||||
.close {
|
||||
top: 50%;
|
||||
right: $alert-padding-x;
|
||||
padding: 0;
|
||||
transform: translateY(-50%);
|
||||
color: rgba($white, .6);
|
||||
opacity: 1;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: rgba($white, .9);
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
top: 1rem;
|
||||
right: .5rem;
|
||||
}
|
||||
|
||||
&>span:not(.sr-only) {
|
||||
font-size: 1.5rem;
|
||||
background-color: transparent;
|
||||
color: rgba($white, .6);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
&>span:not(.sr-only) {
|
||||
background-color: transparent;
|
||||
color: rgba($white, .9);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
46
src/assets/scss/core/alerts/_alert.scss
Normal file
46
src/assets/scss/core/alerts/_alert.scss
Normal file
@@ -0,0 +1,46 @@
|
||||
//
|
||||
// Alert
|
||||
//
|
||||
|
||||
.alert {
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
|
||||
// Alert heading
|
||||
|
||||
.alert-heading {
|
||||
font-weight: $font-weight-bold;
|
||||
font-size: $h4-font-size;
|
||||
margin-top: .15rem;
|
||||
}
|
||||
|
||||
|
||||
// Alert icon
|
||||
.alert-icon {
|
||||
font-size: 1.25rem;
|
||||
margin-right: 1.25rem;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
|
||||
i.ni {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Alert text next to an alert icon
|
||||
.alert-text {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
||||
// Alert links
|
||||
|
||||
[class*="alert-"] {
|
||||
.alert-link {
|
||||
color: $white;
|
||||
border-bottom: 1px dotted rgba($white, .5);
|
||||
}
|
||||
}
|
||||
22
src/assets/scss/core/avatars/_avatar-group.scss
Normal file
22
src/assets/scss/core/avatars/_avatar-group.scss
Normal file
@@ -0,0 +1,22 @@
|
||||
//
|
||||
// Avatar group
|
||||
//
|
||||
|
||||
// General styles
|
||||
|
||||
.avatar-group {
|
||||
.avatar {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
border: 2px solid $card-bg;
|
||||
|
||||
&:hover {
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar + .avatar {
|
||||
margin-left: -1rem;
|
||||
|
||||
}
|
||||
}
|
||||
42
src/assets/scss/core/avatars/_avatar.scss
Normal file
42
src/assets/scss/core/avatars/_avatar.scss
Normal file
@@ -0,0 +1,42 @@
|
||||
//
|
||||
// Avatar
|
||||
//
|
||||
|
||||
// General styles
|
||||
|
||||
.avatar {
|
||||
color: $white;
|
||||
background-color: $gray-500;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1rem;
|
||||
border-radius: 50%;
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
+ .avatar-content {
|
||||
display: inline-block;
|
||||
margin-left: .75rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Avatar size variations
|
||||
|
||||
.avatar-lg {
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
|
||||
.avatar-sm {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
17
src/assets/scss/core/badges/_badge-circle.scss
Normal file
17
src/assets/scss/core/badges/_badge-circle.scss
Normal file
@@ -0,0 +1,17 @@
|
||||
//
|
||||
// Circle badge
|
||||
//
|
||||
|
||||
|
||||
// General styles
|
||||
|
||||
.badge-circle {
|
||||
text-align: center;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
font-size: .875rem;
|
||||
}
|
||||
42
src/assets/scss/core/badges/_badge-dot.scss
Normal file
42
src/assets/scss/core/badges/_badge-dot.scss
Normal file
@@ -0,0 +1,42 @@
|
||||
//
|
||||
// Dot badge
|
||||
//
|
||||
|
||||
|
||||
// General styles
|
||||
|
||||
.badge-dot {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
background: transparent;
|
||||
font-weight: $font-weight-normal;
|
||||
font-size: $font-size-sm;
|
||||
text-transform: none;
|
||||
|
||||
strong {
|
||||
color: $gray-800;
|
||||
}
|
||||
|
||||
i {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: .375rem;
|
||||
height: .375rem;
|
||||
border-radius: 50%;
|
||||
margin-right: .375rem;
|
||||
}
|
||||
|
||||
&.badge-md {
|
||||
i {
|
||||
width: .5rem;
|
||||
height: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.badge-lg {
|
||||
i {
|
||||
width: .625rem;
|
||||
height: .625rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
55
src/assets/scss/core/badges/_badge.scss
Normal file
55
src/assets/scss/core/badges/_badge.scss
Normal file
@@ -0,0 +1,55 @@
|
||||
//
|
||||
// Badge
|
||||
//
|
||||
|
||||
|
||||
// General styles
|
||||
|
||||
.badge {
|
||||
text-transform: $badge-text-transfom;
|
||||
|
||||
a {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Size variations
|
||||
|
||||
.badge-md {
|
||||
padding: .65em 1em;
|
||||
}
|
||||
|
||||
.badge-lg {
|
||||
padding: .85em 1.375em;
|
||||
}
|
||||
|
||||
|
||||
// Multiple inline badges
|
||||
|
||||
.badge-inline {
|
||||
margin-right: .625rem;
|
||||
|
||||
+ span {
|
||||
top: 2px;
|
||||
position: relative;
|
||||
|
||||
> a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Badge spacing inside a btn with some text
|
||||
|
||||
.btn {
|
||||
.badge {
|
||||
&:not(:first-child) {
|
||||
margin-left: .5rem;
|
||||
}
|
||||
&:not(:last-child) {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
12
src/assets/scss/core/buttons/_button-brand.scss
Normal file
12
src/assets/scss/core/buttons/_button-brand.scss
Normal file
@@ -0,0 +1,12 @@
|
||||
//
|
||||
// Brand buttons
|
||||
//
|
||||
|
||||
|
||||
// Color variations
|
||||
|
||||
@each $color, $value in $brand-colors {
|
||||
.btn-#{$color} {
|
||||
@include button-variant($value, $value);
|
||||
}
|
||||
}
|
||||
92
src/assets/scss/core/buttons/_button-icon.scss
Normal file
92
src/assets/scss/core/buttons/_button-icon.scss
Normal file
@@ -0,0 +1,92 @@
|
||||
//
|
||||
// Icon buttons
|
||||
//
|
||||
|
||||
.btn-icon {
|
||||
.btn-inner--icon {
|
||||
img {
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-inner--text:not(:first-child) {
|
||||
margin-left: 0.75em;
|
||||
}
|
||||
|
||||
.btn-inner--text:not(:last-child) {
|
||||
margin-right: 0.75em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Button only with icon and NO text
|
||||
|
||||
.btn-icon-only {
|
||||
width: 2.375rem;
|
||||
height: 2.375rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
a.btn-icon-only {
|
||||
line-height: 2.5;
|
||||
}
|
||||
|
||||
.btn-icon-only.btn-sm {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Clipboard button
|
||||
// dedicated element for copying icons
|
||||
//
|
||||
|
||||
.btn-icon-clipboard {
|
||||
margin: 0;
|
||||
padding: 1.5rem;
|
||||
font-size: $font-size-base;
|
||||
font-weight: $font-weight-normal;
|
||||
line-height: 1.25;
|
||||
color: $gray-800;
|
||||
background-color: $gray-100;
|
||||
border-radius: $border-radius;
|
||||
border: 0;
|
||||
text-align: left;
|
||||
font-family: inherit;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
text-decoration: none;
|
||||
-moz-appearance: none;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
margin: .5rem 0;
|
||||
|
||||
&:hover {
|
||||
background-color: $white;
|
||||
box-shadow: rgba(0, 0, 0, .1) 0 0 0 1px, rgba(0, 0, 0, .1) 0 4px 16px;
|
||||
}
|
||||
|
||||
> div {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
i {
|
||||
box-sizing: content-box;
|
||||
color: theme-color("primary");
|
||||
vertical-align: middle;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.5;
|
||||
margin-left: 16px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
91
src/assets/scss/core/buttons/_button.scss
Normal file
91
src/assets/scss/core/buttons/_button.scss
Normal file
@@ -0,0 +1,91 @@
|
||||
//
|
||||
// Icon buttons
|
||||
//
|
||||
|
||||
// General styles
|
||||
|
||||
.btn {
|
||||
position: relative;
|
||||
text-transform: $btn-text-transform;
|
||||
transition: $transition-base;
|
||||
letter-spacing: $btn-letter-spacing;
|
||||
font-size: $input-btn-font-size;
|
||||
will-change: transform;
|
||||
|
||||
&:hover {
|
||||
@include box-shadow($btn-hover-box-shadow);
|
||||
transform: translateY($btn-hover-translate-y);
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
|
||||
// Icons
|
||||
|
||||
i:not(:first-child),
|
||||
svg:not(:first-child) {
|
||||
margin-left: .5rem;
|
||||
}
|
||||
|
||||
i:not(:last-child),
|
||||
svg:not(:last-child) {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Remove translateY and margin animation when btn is included in a btn-group or input-group
|
||||
|
||||
.btn-group,
|
||||
.input-group {
|
||||
.btn {
|
||||
margin-right: 0;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Size variations
|
||||
|
||||
.btn-sm {
|
||||
font-size: $input-btn-font-size-sm;
|
||||
}
|
||||
|
||||
.btn-lg {
|
||||
font-size: $input-btn-font-size-lg;
|
||||
}
|
||||
|
||||
|
||||
// Some quick fixes (to revise)
|
||||
|
||||
// Fixes
|
||||
[class*="btn-outline-"] {
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.btn-outline-secondary {
|
||||
color: darken(theme-color("secondary"), 50%);
|
||||
}
|
||||
|
||||
.btn-inner--icon {
|
||||
i:not(.fa) {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-link {
|
||||
font-weight: $btn-font-weight;
|
||||
box-shadow: none;
|
||||
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-neutral {
|
||||
color: theme-color("primary");
|
||||
}
|
||||
10
src/assets/scss/core/cards/_card-animations.scss
Normal file
10
src/assets/scss/core/cards/_card-animations.scss
Normal file
@@ -0,0 +1,10 @@
|
||||
//
|
||||
// Card with hover animations
|
||||
//
|
||||
|
||||
.card-lift--hover {
|
||||
&:hover {
|
||||
transform: translateY(-20px);
|
||||
@include transition($transition-base);
|
||||
}
|
||||
}
|
||||
17
src/assets/scss/core/cards/_card-blockquote.scss
Normal file
17
src/assets/scss/core/cards/_card-blockquote.scss
Normal file
@@ -0,0 +1,17 @@
|
||||
//
|
||||
// Card with blockquote
|
||||
//
|
||||
|
||||
.card-blockquote {
|
||||
padding: 2rem;
|
||||
position: relative;
|
||||
|
||||
.svg-bg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 95px;
|
||||
position: absolute;
|
||||
top: -94px;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
49
src/assets/scss/core/cards/_card-profile.scss
Normal file
49
src/assets/scss/core/cards/_card-profile.scss
Normal file
@@ -0,0 +1,49 @@
|
||||
//
|
||||
// Profile card
|
||||
//
|
||||
|
||||
.card-profile-image {
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
max-width: 180px;
|
||||
border-radius: $border-radius;
|
||||
@extend .shadow;
|
||||
transform: translate(-50%,-30%);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transition: $transition-base;
|
||||
|
||||
&:hover {
|
||||
transform: translate(-50%, -33%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-profile-stats {
|
||||
padding: 1rem 0;
|
||||
|
||||
> div {
|
||||
text-align: center;
|
||||
margin-right: 1rem;
|
||||
padding: .875rem;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.heading {
|
||||
font-size: 1.1rem;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
}
|
||||
.description {
|
||||
font-size: .875rem;
|
||||
color: $gray-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-profile-actions {
|
||||
padding: .875rem;
|
||||
}
|
||||
16
src/assets/scss/core/cards/_card-stats.scss
Normal file
16
src/assets/scss/core/cards/_card-stats.scss
Normal file
@@ -0,0 +1,16 @@
|
||||
//
|
||||
// Card stats
|
||||
//
|
||||
|
||||
.card-stats {
|
||||
.card-body {
|
||||
padding: 1rem 1.5rem;
|
||||
}
|
||||
|
||||
.card-status-bullet {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
transform: translate(50%, -50%);
|
||||
}
|
||||
}
|
||||
8
src/assets/scss/core/cards/_card.scss
Normal file
8
src/assets/scss/core/cards/_card.scss
Normal file
@@ -0,0 +1,8 @@
|
||||
//
|
||||
// Card
|
||||
//
|
||||
|
||||
|
||||
.card-translucent {
|
||||
background-color: rgba(18, 91, 152, 0.08);
|
||||
}
|
||||
69
src/assets/scss/core/charts/_chart.scss
Normal file
69
src/assets/scss/core/charts/_chart.scss
Normal file
@@ -0,0 +1,69 @@
|
||||
//
|
||||
// Chart
|
||||
//
|
||||
|
||||
.chart {
|
||||
position: relative;
|
||||
height: $chart-height;
|
||||
}
|
||||
|
||||
|
||||
// Size variations
|
||||
|
||||
.chart-sm {
|
||||
height: $chart-height-sm;
|
||||
}
|
||||
|
||||
|
||||
// Legend
|
||||
|
||||
.chart-legend {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: $chart-legend-margin-top;
|
||||
font-size: $chart-legend-font-size;
|
||||
text-align: center;
|
||||
color: $chart-legend-color;
|
||||
}
|
||||
|
||||
.chart-legend-item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
+ .chart-legend-item {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-legend-indicator {
|
||||
display: inline-block;
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
margin-right: 0.375rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
|
||||
// Tooltip
|
||||
|
||||
#chart-tooltip {
|
||||
z-index: 0;
|
||||
|
||||
.arrow {
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateX(-.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Chart info overlay
|
||||
|
||||
.chart-info-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 5%;
|
||||
max-width: 350px;
|
||||
padding: 20px;
|
||||
z-index: 1;
|
||||
}
|
||||
34
src/assets/scss/core/close/_close.scss
Normal file
34
src/assets/scss/core/close/_close.scss
Normal file
@@ -0,0 +1,34 @@
|
||||
//
|
||||
// Close
|
||||
//
|
||||
|
||||
.close {
|
||||
@if $enable-transitions {
|
||||
transition: $transition-base;
|
||||
}
|
||||
|
||||
&>span:not(.sr-only) {
|
||||
background-color: $close-bg;
|
||||
color: $close-color;
|
||||
line-height: 17px;
|
||||
height: 1.25rem;
|
||||
width: 1.25rem;
|
||||
border-radius: 50%;
|
||||
font-size: 1.25rem;
|
||||
display: block;
|
||||
@if $enable-transitions {
|
||||
transition: $transition-base;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $close-hover-bg;
|
||||
color: $close-hover-color;
|
||||
outline: none;
|
||||
|
||||
span:not(.sr-only) {
|
||||
background-color: $close-hover-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
37
src/assets/scss/core/custom-forms/_custom-checkbox.scss
Normal file
37
src/assets/scss/core/custom-forms/_custom-checkbox.scss
Normal file
@@ -0,0 +1,37 @@
|
||||
//
|
||||
// Custom checkbox
|
||||
//
|
||||
|
||||
.custom-checkbox {
|
||||
.custom-control-input ~ .custom-control-label {
|
||||
cursor: pointer;
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
|
||||
.custom-control-input {
|
||||
&:checked {
|
||||
~ .custom-control-label {
|
||||
&::before {
|
||||
border-color: $custom-control-indicator-checked-border-color;
|
||||
}
|
||||
&::after {
|
||||
background-image: $custom-checkbox-indicator-icon-checked;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
~ .custom-control-label {
|
||||
&::before {
|
||||
border-color: $custom-control-indicator-disabled-bg;
|
||||
}
|
||||
}
|
||||
|
||||
&:checked {
|
||||
&::before {
|
||||
border-color: $custom-control-indicator-checked-disabled-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
51
src/assets/scss/core/custom-forms/_custom-control.scss
Normal file
51
src/assets/scss/core/custom-forms/_custom-control.scss
Normal file
@@ -0,0 +1,51 @@
|
||||
//
|
||||
// Custom control
|
||||
// additional styles for custom checkboxes, radios and other
|
||||
//
|
||||
|
||||
.custom-control-label {
|
||||
// Background-color and (when enabled) gradient
|
||||
&::before {
|
||||
border: $custom-control-indicator-border-width solid $custom-control-indicator-border-color;
|
||||
@if $enable-transitions {
|
||||
transition: $input-transition;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-control-label {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
// Alternative style
|
||||
|
||||
.custom-control-alternative {
|
||||
.custom-control-label {
|
||||
// Background-color and (when enabled) gradient
|
||||
&::before {
|
||||
border: 0;
|
||||
box-shadow: $input-alternative-box-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-control-input {
|
||||
&:checked {
|
||||
~ .custom-control-label {
|
||||
&::before {
|
||||
box-shadow: $input-focus-alternative-box-shadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:active~.custom-control-label::before,
|
||||
&:focus~.custom-control-label::before {
|
||||
box-shadow: $input-alternative-box-shadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
37
src/assets/scss/core/custom-forms/_custom-form.scss
Normal file
37
src/assets/scss/core/custom-forms/_custom-form.scss
Normal file
@@ -0,0 +1,37 @@
|
||||
//
|
||||
// Custom checkbox
|
||||
//
|
||||
|
||||
.custom-checkbox {
|
||||
.custom-control-input ~ .custom-control-label {
|
||||
cursor: pointer;
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
|
||||
.custom-control-input {
|
||||
&:checked {
|
||||
~ .custom-control-label {
|
||||
&::before {
|
||||
border-color: $custom-control-indicator-checked-border-color;
|
||||
}
|
||||
&::after {
|
||||
background-image: $custom-checkbox-indicator-icon-checked;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
~ .custom-control-label {
|
||||
&::before {
|
||||
border-color: $custom-control-indicator-disabled-bg;
|
||||
}
|
||||
}
|
||||
|
||||
&:checked {
|
||||
&::before {
|
||||
border-color: $custom-control-indicator-checked-disabled-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
37
src/assets/scss/core/custom-forms/_custom-radio.scss
Normal file
37
src/assets/scss/core/custom-forms/_custom-radio.scss
Normal file
@@ -0,0 +1,37 @@
|
||||
//
|
||||
// Custom radio
|
||||
//
|
||||
|
||||
.custom-radio {
|
||||
.custom-control-input ~ .custom-control-label {
|
||||
cursor: pointer;
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
|
||||
.custom-control-input {
|
||||
&:checked {
|
||||
~ .custom-control-label {
|
||||
&::before {
|
||||
border-color: $custom-control-indicator-checked-border-color;
|
||||
}
|
||||
&::after {
|
||||
background-image: $custom-radio-indicator-icon-checked;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
~ .custom-control-label {
|
||||
&::before {
|
||||
border-color: $custom-control-indicator-disabled-bg;
|
||||
}
|
||||
}
|
||||
|
||||
&:checked {
|
||||
&::before {
|
||||
border-color: $custom-control-indicator-checked-disabled-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
66
src/assets/scss/core/custom-forms/_custom-toggle.scss
Normal file
66
src/assets/scss/core/custom-forms/_custom-toggle.scss
Normal file
@@ -0,0 +1,66 @@
|
||||
//
|
||||
// Custom toggle
|
||||
//
|
||||
|
||||
.custom-toggle {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: $custom-toggle-width;
|
||||
height: 1.5rem;
|
||||
|
||||
input {
|
||||
display: none;
|
||||
|
||||
&:checked {
|
||||
+ .custom-toggle-slider {
|
||||
border: $custom-control-indicator-border-width solid $custom-control-indicator-checked-border-color;
|
||||
|
||||
&:before {
|
||||
background: $custom-toggle-checked-bg;
|
||||
transform: translateX(1.625rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
+ .custom-toggle-slider {
|
||||
border: $custom-control-indicator-border-width solid $custom-control-indicator-disabled-bg;
|
||||
}
|
||||
|
||||
&:checked {
|
||||
+ .custom-toggle-slider {
|
||||
border: $custom-control-indicator-border-width solid $custom-control-indicator-disabled-bg;
|
||||
|
||||
&:before {
|
||||
background-color: lighten($custom-control-indicator-checked-bg, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.custom-toggle-slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border: $custom-control-indicator-border-width solid $input-border-color;
|
||||
border-radius: 34px !important;
|
||||
background-color: transparent;
|
||||
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
left: 2px;
|
||||
bottom: 2px;
|
||||
border-radius: 50% !important;
|
||||
background-color: $custom-toggle-slider-bg;
|
||||
transition: $input-transition;
|
||||
}
|
||||
}
|
||||
79
src/assets/scss/core/dropdowns/_dropdown.scss
Normal file
79
src/assets/scss/core/dropdowns/_dropdown.scss
Normal file
@@ -0,0 +1,79 @@
|
||||
//
|
||||
// Dropdown
|
||||
//
|
||||
|
||||
// General styles
|
||||
|
||||
.dropdown,
|
||||
.dropup,
|
||||
.dropright,
|
||||
.dropleft {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
min-width: 12rem;
|
||||
|
||||
.dropdown-item {
|
||||
padding: .5rem 1rem;
|
||||
font-size: $font-size-sm;
|
||||
> i,
|
||||
> svg {
|
||||
margin-right: 1rem;
|
||||
font-size: 1rem;
|
||||
vertical-align: -17%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-header {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
color: $gray-100;
|
||||
font-size: .625rem;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
|
||||
// Media components inside dropdown link
|
||||
|
||||
.dropdown-menu {
|
||||
a.media {
|
||||
|
||||
> div {
|
||||
&:first-child {
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
color: $gray-600;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.heading,
|
||||
p {
|
||||
color: theme-color("default") !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Size variations
|
||||
|
||||
.dropdown-menu-sm {
|
||||
min-width: 100px;
|
||||
border: $border-radius-lg;
|
||||
}
|
||||
|
||||
.dropdown-menu-lg {
|
||||
min-width: 260px;
|
||||
border-radius: $border-radius-lg;
|
||||
}
|
||||
|
||||
.dropdown-menu-xl {
|
||||
min-width: 450px;
|
||||
border-radius: $border-radius-lg;
|
||||
}
|
||||
98
src/assets/scss/core/footers/_footer.scss
Normal file
98
src/assets/scss/core/footers/_footer.scss
Normal file
@@ -0,0 +1,98 @@
|
||||
//
|
||||
// Footer
|
||||
//
|
||||
|
||||
|
||||
// General styles
|
||||
|
||||
.footer {
|
||||
background: $footer-bg;
|
||||
padding: $footer-padding-y $footer-padding-x;
|
||||
|
||||
.col-footer {
|
||||
.heading {
|
||||
color: $footer-heading-color;
|
||||
letter-spacing: 0;
|
||||
font-size: $footer-heading-font-size;
|
||||
text-transform: uppercase;
|
||||
font-weight: $font-weight-bold;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.nav .nav-item .nav-link,
|
||||
.footer-link {
|
||||
color: $footer-link-color !important;
|
||||
|
||||
&:hover {
|
||||
color: $footer-link-hover-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.list-unstyled li a {
|
||||
display: inline-block;
|
||||
padding: .125rem 0;
|
||||
color: $footer-link-color;
|
||||
font-size: $footer-link-font-size;
|
||||
|
||||
&:hover {
|
||||
color: $footer-link-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
.copyright {
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Dark footer
|
||||
|
||||
.footer-dark {
|
||||
.col-footer .heading {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Footer nav used for copyright and some links, but not limited to this
|
||||
|
||||
.nav-footer {
|
||||
.nav-link {
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
|
||||
.nav-item:last-child {
|
||||
.nav-link {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Footer with cards over
|
||||
|
||||
.footer.has-cards {
|
||||
overflow: hidden;
|
||||
padding-top: 500px;
|
||||
margin-top: -420px;
|
||||
position: relative;
|
||||
background: transparent;
|
||||
pointer-events: none;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 600px;
|
||||
height: 2000px;
|
||||
background: theme-color("secondary");
|
||||
transform: skew(0,-8deg);
|
||||
}
|
||||
|
||||
.container {
|
||||
pointer-events: auto;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
71
src/assets/scss/core/forms/_form-validation.scss
Normal file
71
src/assets/scss/core/forms/_form-validation.scss
Normal file
@@ -0,0 +1,71 @@
|
||||
//
|
||||
// Form validation
|
||||
//
|
||||
|
||||
// Validation
|
||||
|
||||
.has-success,
|
||||
.has-danger {
|
||||
position: relative;
|
||||
|
||||
&:after, {
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
line-height: 19px;
|
||||
text-align: center;
|
||||
font-family: 'NucleoIcons';
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 2px;
|
||||
transform: translateY(50%);
|
||||
border-radius: 50%;
|
||||
font-size: 9px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.has-success {
|
||||
&:after {
|
||||
content: "\ea26";
|
||||
color: daken($form-feedback-valid-color, 18%);
|
||||
background-color: $form-feedback-valid-bg;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
background-color: $input-focus-bg;
|
||||
|
||||
&:focus {
|
||||
border-color: $input-focus-border-color;
|
||||
}
|
||||
|
||||
|
||||
// Placeholder
|
||||
|
||||
&::placeholder {
|
||||
color: $form-feedback-valid-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.has-danger {
|
||||
&:after {
|
||||
content: "\ea53";
|
||||
color: daken($form-feedback-invalid-color, 18%);
|
||||
background-color: $form-feedback-invalid-bg;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
background-color: $input-focus-bg;
|
||||
|
||||
&:focus {
|
||||
border-color: $input-focus-border-color;
|
||||
}
|
||||
|
||||
// Placeholder
|
||||
|
||||
&::placeholder {
|
||||
color: $form-feedback-invalid-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
78
src/assets/scss/core/forms/_form.scss
Normal file
78
src/assets/scss/core/forms/_form.scss
Normal file
@@ -0,0 +1,78 @@
|
||||
//
|
||||
// Forms
|
||||
//
|
||||
|
||||
|
||||
// Labels
|
||||
|
||||
.form-control-label {
|
||||
color: $gray-700;
|
||||
font-size: $font-size-sm;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
|
||||
// Text inputs
|
||||
|
||||
.form-control {
|
||||
font-size: $input-btn-font-size;
|
||||
|
||||
&:focus {
|
||||
&::placeholder {
|
||||
color: $input-focus-placeholder-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Textarea
|
||||
|
||||
textarea[resize="none"] {
|
||||
resize: none!important;
|
||||
}
|
||||
|
||||
textarea[resize="both"] {
|
||||
resize: both!important;
|
||||
}
|
||||
|
||||
textarea[resize="vertical"] {
|
||||
resize: vertical!important;
|
||||
}
|
||||
|
||||
textarea[resize="horizontal"] {
|
||||
resize: horizontal!important;
|
||||
}
|
||||
|
||||
|
||||
// Form input variations
|
||||
|
||||
// Muted input
|
||||
|
||||
.form-control-muted {
|
||||
background-color: $input-muted-bg;
|
||||
border-color: $input-muted-bg;
|
||||
box-shadow: none;
|
||||
|
||||
&:focus {
|
||||
background-color: $input-focus-muted-bg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Alternative input
|
||||
|
||||
.form-control-alternative {
|
||||
box-shadow: $input-alternative-box-shadow;
|
||||
border: 0;
|
||||
transition: box-shadow .15s ease;
|
||||
|
||||
&:focus {
|
||||
box-shadow: $input-focus-alternative-box-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
// Size variations: Fixes to the bootstrap defaults
|
||||
|
||||
.form-control-lg {
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
70
src/assets/scss/core/forms/_input-group.scss
Normal file
70
src/assets/scss/core/forms/_input-group.scss
Normal file
@@ -0,0 +1,70 @@
|
||||
//
|
||||
// Input group
|
||||
//
|
||||
|
||||
.input-group {
|
||||
box-shadow: $input-box-shadow;
|
||||
border-radius: $input-border-radius;
|
||||
transition: $transition-base;
|
||||
|
||||
.form-control {
|
||||
box-shadow: none;
|
||||
|
||||
&:not(:first-child) {
|
||||
border-left: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
&:not(:last-child) {
|
||||
border-right: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-text {
|
||||
transition: $input-transition;
|
||||
}
|
||||
|
||||
|
||||
// Alternative input groups related to .form-control-alternative
|
||||
|
||||
|
||||
.input-group-alternative {
|
||||
box-shadow: $input-alternative-box-shadow;
|
||||
border: 0;
|
||||
transition: box-shadow .15s ease;
|
||||
|
||||
.form-control,
|
||||
.input-group-text {
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.focused {
|
||||
.input-group-alternative {
|
||||
box-shadow: $input-focus-alternative-box-shadow !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// .focus class is applied dinamycally from theme.js
|
||||
|
||||
.focused {
|
||||
.input-group {
|
||||
box-shadow: $input-focus-box-shadow;
|
||||
}
|
||||
|
||||
.input-group-text {
|
||||
color: $input-group-addon-focus-color;
|
||||
background-color: $input-group-addon-focus-bg;
|
||||
border-color: $input-group-addon-focus-border-color;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
border-color: $input-group-addon-focus-border-color;
|
||||
}
|
||||
}
|
||||
7
src/assets/scss/core/headers/_header.scss
Normal file
7
src/assets/scss/core/headers/_header.scss
Normal file
@@ -0,0 +1,7 @@
|
||||
//
|
||||
// Header
|
||||
//
|
||||
|
||||
.header {
|
||||
position: relative;
|
||||
}
|
||||
42
src/assets/scss/core/icons/_icon-shape.scss
Normal file
42
src/assets/scss/core/icons/_icon-shape.scss
Normal file
@@ -0,0 +1,42 @@
|
||||
//
|
||||
// Icon shape
|
||||
//
|
||||
|
||||
|
||||
.icon-shape {
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
|
||||
|
||||
i, svg {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
&.icon-lg {
|
||||
i, svg {
|
||||
font-size: 1.625rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.icon-sm {
|
||||
i, svg {
|
||||
font-size: .875rem;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.icon-shape-#{$color} {
|
||||
@include icon-shape-variant(theme-color($color));
|
||||
}
|
||||
}
|
||||
65
src/assets/scss/core/icons/_icon.scss
Normal file
65
src/assets/scss/core/icons/_icon.scss
Normal file
@@ -0,0 +1,65 @@
|
||||
//
|
||||
// Icon
|
||||
//
|
||||
|
||||
.icon {
|
||||
width: $icon-size;
|
||||
height: $icon-size;
|
||||
|
||||
i, svg {
|
||||
font-size: $icon-size - .75;
|
||||
}
|
||||
|
||||
+ .icon-text {
|
||||
padding-left: 1rem;
|
||||
width: calc(100% - #{$icon-size} - 1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Extra large icons
|
||||
|
||||
.icon-xl {
|
||||
width: $icon-size-xl;
|
||||
height: $icon-size-xl;
|
||||
|
||||
i, svg {
|
||||
font-size: $icon-size-xl - .75;
|
||||
}
|
||||
|
||||
+ .icon-text {
|
||||
width: calc(100% - #{$icon-size-xl} - 1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Large icons
|
||||
|
||||
.icon-lg {
|
||||
width: $icon-size-lg;
|
||||
height: $icon-size-lg;
|
||||
|
||||
i, svg {
|
||||
font-size: $icon-size-lg - .75;
|
||||
}
|
||||
|
||||
+ .icon-text {
|
||||
width: calc(100% - #{$icon-size-lg} - 1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Small icon
|
||||
|
||||
.icon-sm {
|
||||
width: $icon-size-sm;
|
||||
height: $icon-size-sm;
|
||||
|
||||
i, svg {
|
||||
font-size: $icon-size-sm - .75;
|
||||
}
|
||||
|
||||
+ .icon-text {
|
||||
width: calc(100% - #{$icon-size-sm} - 1);
|
||||
}
|
||||
}
|
||||
46
src/assets/scss/core/list-groups/_list-group.scss
Normal file
46
src/assets/scss/core/list-groups/_list-group.scss
Normal file
@@ -0,0 +1,46 @@
|
||||
//
|
||||
// List group
|
||||
//
|
||||
|
||||
|
||||
// Space list items
|
||||
|
||||
.list-group-space {
|
||||
.list-group-item {
|
||||
margin-bottom: 1.5rem;
|
||||
@include border-radius($list-group-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Extended list group components
|
||||
|
||||
.list-group-img {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
border-radius: 50%;
|
||||
vertical-align: top;
|
||||
margin: -.1rem 1.2rem 0 -.2rem;
|
||||
}
|
||||
|
||||
.list-group-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
> p {
|
||||
color: $gray-500;
|
||||
line-height: 1.5;
|
||||
margin: .2rem 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.list-group-heading {
|
||||
font-size: $font-size-base;
|
||||
color: $gray-800;
|
||||
|
||||
> small {
|
||||
float: right;
|
||||
color: $gray-500;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
10
src/assets/scss/core/maps/_map.scss
Normal file
10
src/assets/scss/core/maps/_map.scss
Normal file
@@ -0,0 +1,10 @@
|
||||
//
|
||||
// Map
|
||||
//
|
||||
|
||||
.map-canvas {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: $map-height;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
12
src/assets/scss/core/masks/_mask.scss
Normal file
12
src/assets/scss/core/masks/_mask.scss
Normal file
@@ -0,0 +1,12 @@
|
||||
//
|
||||
// Mask
|
||||
//
|
||||
|
||||
.mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@include transition($transition-base);
|
||||
}
|
||||
13
src/assets/scss/core/mixins/_alert.scss
Normal file
13
src/assets/scss/core/mixins/_alert.scss
Normal file
@@ -0,0 +1,13 @@
|
||||
@mixin alert-variant($background, $border, $color) {
|
||||
color: color-yiq($background);
|
||||
@include gradient-bg($background);
|
||||
border-color: $border;
|
||||
|
||||
hr {
|
||||
border-top-color: darken($border, 5%);
|
||||
}
|
||||
|
||||
.alert-link {
|
||||
color: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
30
src/assets/scss/core/mixins/_background-variant.scss
Normal file
30
src/assets/scss/core/mixins/_background-variant.scss
Normal file
@@ -0,0 +1,30 @@
|
||||
// Contextual backgrounds
|
||||
@mixin bg-variant($parent, $color, $ignore-warning: true) {
|
||||
#{$parent} {
|
||||
background-color: $color !important;
|
||||
}
|
||||
a#{$parent},
|
||||
button#{$parent} {
|
||||
@include hover-focus {
|
||||
background-color: darken($color, 10%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin bg-gradient-variant($parent, $color, $ignore-warning: true) {
|
||||
#{$parent} {
|
||||
background: linear-gradient(87deg, $color 0, adjust-hue($color, 25%) 100%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin bg-translucent-variant($parent, $color, $ignore-warning: true) {
|
||||
#{$parent} {
|
||||
background-color: darken(rgba($color, $translucent-color-opacity), 7%) !important;
|
||||
}
|
||||
a#{$parent},
|
||||
button#{$parent} {
|
||||
@include hover-focus {
|
||||
background-color: darken(rgba($color, $translucent-color-opacity), 12%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
12
src/assets/scss/core/mixins/_badge.scss
Normal file
12
src/assets/scss/core/mixins/_badge.scss
Normal file
@@ -0,0 +1,12 @@
|
||||
@mixin badge-variant($bg) {
|
||||
color: saturate(darken($bg, 10%), 10);
|
||||
background-color: transparentize(lighten($bg, 25%), .5);
|
||||
|
||||
&[href] {
|
||||
@include hover-focus {
|
||||
color: color-yiq($bg);
|
||||
text-decoration: none;
|
||||
background-color: darken($bg, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
105
src/assets/scss/core/mixins/_buttons.scss
Normal file
105
src/assets/scss/core/mixins/_buttons.scss
Normal file
@@ -0,0 +1,105 @@
|
||||
@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, .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;
|
||||
}
|
||||
|
||||
&: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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@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, .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, .5);
|
||||
}
|
||||
@else {
|
||||
box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Button sizes
|
||||
@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; // Manually declare to provide an override to the browser default
|
||||
@if $enable-rounded {
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
@else {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
127
src/assets/scss/core/mixins/_forms.scss
Normal file
127
src/assets/scss/core/mixins/_forms.scss
Normal file
@@ -0,0 +1,127 @@
|
||||
@mixin form-control-focus($ignore-warning: true) {
|
||||
&:focus {
|
||||
color: $input-focus-color;
|
||||
background-color: $input-focus-bg;
|
||||
border-color: $input-focus-border-color;
|
||||
outline: 0;
|
||||
// Avoid using mixin so we can pass custom focus shadow properly
|
||||
@if $enable-shadows {
|
||||
box-shadow: $input-box-shadow, $input-focus-box-shadow;
|
||||
} @else {
|
||||
box-shadow: $input-focus-box-shadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@mixin form-validation-state($state, $color, $icon) {
|
||||
.#{$state}-feedback {
|
||||
display: none;
|
||||
width: 100%;
|
||||
margin-top: $form-feedback-margin-top;
|
||||
font-size: $form-feedback-font-size;
|
||||
color: $color;
|
||||
}
|
||||
|
||||
.#{$state}-tooltip {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
z-index: 5;
|
||||
display: none;
|
||||
max-width: 100%; // Contain to parent when possible
|
||||
padding: .5rem;
|
||||
margin-top: .1rem;
|
||||
font-size: .875rem;
|
||||
line-height: 1;
|
||||
color: #fff;
|
||||
background-color: rgba($color, .8);
|
||||
border-radius: .2rem;
|
||||
}
|
||||
|
||||
.form-control,
|
||||
.custom-select {
|
||||
.was-validated &:#{$state},
|
||||
&.is-#{$state} {
|
||||
border-color: $color;
|
||||
|
||||
&:focus {
|
||||
border-color: $color;
|
||||
//box-shadow: 0 1px $input-focus-width 0 rgba($color, .75);
|
||||
}
|
||||
|
||||
~ .#{$state}-feedback,
|
||||
~ .#{$state}-tooltip {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-check-input {
|
||||
.was-validated &:#{$state},
|
||||
&.is-#{$state} {
|
||||
~ .form-check-label {
|
||||
color: $color;
|
||||
}
|
||||
|
||||
~ .#{$state}-feedback,
|
||||
~ .#{$state}-tooltip {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.custom-control-input {
|
||||
.was-validated &:#{$state},
|
||||
&.is-#{$state} {
|
||||
~ .custom-control-label {
|
||||
color: $color;
|
||||
|
||||
&::before {
|
||||
background-color: lighten($color, 25%);
|
||||
border-color: lighten($color, 25%);
|
||||
}
|
||||
}
|
||||
|
||||
~ .#{$state}-feedback,
|
||||
~ .#{$state}-tooltip {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:checked {
|
||||
~ .custom-control-label::before {
|
||||
@include gradient-bg(lighten($color, 10%));
|
||||
border-color: lighten($color, 25%);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
~ .custom-control-label::before {
|
||||
box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-focus-width rgba($color, .25);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// custom file
|
||||
.custom-file-input {
|
||||
.was-validated &:#{$state},
|
||||
&.is-#{$state} {
|
||||
~ .custom-file-label {
|
||||
border-color: $color;
|
||||
|
||||
&::before { border-color: inherit; }
|
||||
}
|
||||
|
||||
~ .#{$state}-feedback,
|
||||
~ .#{$state}-tooltip {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
~ .custom-file-label {
|
||||
box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
4
src/assets/scss/core/mixins/_icon.scss
Normal file
4
src/assets/scss/core/mixins/_icon.scss
Normal file
@@ -0,0 +1,4 @@
|
||||
@mixin icon-shape-variant($color) {
|
||||
color: saturate(darken($color, 10%), 10);
|
||||
background-color: transparentize(lighten($color, 10%), .5);
|
||||
}
|
||||
23
src/assets/scss/core/mixins/_modals.scss
Normal file
23
src/assets/scss/core/mixins/_modals.scss
Normal file
@@ -0,0 +1,23 @@
|
||||
@mixin modal-variant($background) {
|
||||
.modal-title {
|
||||
color: color-yiq($background);
|
||||
}
|
||||
.modal-header,
|
||||
.modal-footer {
|
||||
border-color: rgba(color-yiq($background), .075);
|
||||
}
|
||||
.modal-content {
|
||||
background-color: $background;
|
||||
color: color-yiq($background);
|
||||
|
||||
.heading {
|
||||
color: color-yiq($background);
|
||||
}
|
||||
}
|
||||
|
||||
.close {
|
||||
&>span:not(.sr-only) {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
36
src/assets/scss/core/mixins/_popover.scss
Normal file
36
src/assets/scss/core/mixins/_popover.scss
Normal file
@@ -0,0 +1,36 @@
|
||||
@mixin popover-variant($background) {
|
||||
|
||||
background-color: $background;
|
||||
|
||||
.popover-header {
|
||||
background-color: $background;
|
||||
color: color-yiq($background);
|
||||
}
|
||||
|
||||
.popover-body {
|
||||
color: color-yiq($background);
|
||||
}
|
||||
.popover-header{
|
||||
border-color: rgba(color-yiq($background), .2);
|
||||
}
|
||||
&.bs-popover-top {
|
||||
.arrow::after {
|
||||
border-top-color: $background;
|
||||
}
|
||||
}
|
||||
&.bs-popover-right {
|
||||
.arrow::after {
|
||||
border-right-color: $background;
|
||||
}
|
||||
}
|
||||
&.bs-popover-bottom {
|
||||
.arrow::after {
|
||||
border-bottom-color: $background;
|
||||
}
|
||||
}
|
||||
&.bs-popover-left {
|
||||
.arrow::after {
|
||||
border-left-color: $background;
|
||||
}
|
||||
}
|
||||
}
|
||||
25
src/assets/scss/core/modals/_modal.scss
Normal file
25
src/assets/scss/core/modals/_modal.scss
Normal file
@@ -0,0 +1,25 @@
|
||||
//
|
||||
// Modal
|
||||
//
|
||||
|
||||
|
||||
// Fluid modal
|
||||
|
||||
.modal-fluid {
|
||||
.modal-dialog {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.modal-content {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Background color variations
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.modal-#{$color} {
|
||||
@include modal-variant($value);
|
||||
}
|
||||
}
|
||||
125
src/assets/scss/core/navbars/_navbar-collapse.scss
Normal file
125
src/assets/scss/core/navbars/_navbar-collapse.scss
Normal file
@@ -0,0 +1,125 @@
|
||||
//
|
||||
// Navabar collapse
|
||||
//
|
||||
|
||||
// Collapse
|
||||
|
||||
.navbar-collapse-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
.navbar-nav {
|
||||
.nav-link {
|
||||
padding: .625rem 0;
|
||||
color: theme-color("default") !important;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
box-shadow: none;
|
||||
min-width: auto;
|
||||
|
||||
.media {
|
||||
svg {
|
||||
width: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-collapse {
|
||||
width: calc(100% - 1.4rem);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1050;
|
||||
margin: .7rem;
|
||||
overflow-y: auto;
|
||||
height: auto !important;
|
||||
opacity: 0;
|
||||
|
||||
.navbar-toggler {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
border-radius: 2px;
|
||||
opacity: 1;
|
||||
background: #283448;
|
||||
}
|
||||
|
||||
:nth-child(1) {
|
||||
transform: rotate(135deg);
|
||||
}
|
||||
|
||||
:nth-child(2) {
|
||||
transform: rotate(-135deg);
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-collapse-header {
|
||||
display: block;
|
||||
padding-bottom: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, .1);
|
||||
}
|
||||
|
||||
.collapse-brand {
|
||||
img {
|
||||
height: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
.collapse-close {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-collapse.collapsing,
|
||||
.navbar-collapse.show {
|
||||
padding: 1.5rem;
|
||||
border-radius: $border-radius;
|
||||
background: #FFF;
|
||||
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);
|
||||
animation: show-navbar-collapse .2s ease forwards;
|
||||
}
|
||||
|
||||
.navbar-collapse.collapsing-out {
|
||||
animation: hide-navbar-collapse .2s ease forwards;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes show-navbar-collapse {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(.95);
|
||||
transform-origin: 100% 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes hide-navbar-collapse {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
transform-origin: 100% 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: scale(.95);
|
||||
}
|
||||
}
|
||||
101
src/assets/scss/core/navbars/_navbar-dropdown.scss
Normal file
101
src/assets/scss/core/navbars/_navbar-dropdown.scss
Normal file
@@ -0,0 +1,101 @@
|
||||
// Dropdown menu
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
.navbar {
|
||||
.dropdown-menu {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dropdown-menu-arrow {
|
||||
&:before {
|
||||
background: $dropdown-bg;
|
||||
box-shadow: none;
|
||||
content: '';
|
||||
display: block;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
left: 20px;
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
transform: rotate(-45deg) translateY(12px);
|
||||
z-index: -5;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu-right {
|
||||
&:before {
|
||||
right: 20px;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.navbar-nav-hover) {
|
||||
.dropdown-menu {
|
||||
&.show {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
animation: show-navbar-dropdown .25s ease forwards;
|
||||
}
|
||||
|
||||
&.close {
|
||||
display: block;
|
||||
animation: hide-navbar-dropdown .15s ease backwards;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.navbar-nav-hover {
|
||||
.dropdown-menu {
|
||||
opacity: 0;
|
||||
display: block;
|
||||
pointer-events: none;
|
||||
transform: translate(0, 10px) perspective(200px) rotateX(-2deg);
|
||||
transition: visibility 0.25s, opacity 0.25s, transform 0.25s;
|
||||
}
|
||||
|
||||
.nav-item.dropdown:hover > .dropdown-menu {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
visibility: visible;
|
||||
transform: translate(0, 0);
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu-inner {
|
||||
position: relative;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
|
||||
// Keyframes
|
||||
|
||||
@keyframes show-navbar-dropdown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate(0, 10px) perspective(200px) rotateX(-2deg);
|
||||
transition: visibility 0.25s, opacity 0.25s, transform 0.25s;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes hide-navbar-dropdown {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translate(0, 10px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
69
src/assets/scss/core/navbars/_navbar-search.scss
Normal file
69
src/assets/scss/core/navbars/_navbar-search.scss
Normal file
@@ -0,0 +1,69 @@
|
||||
//
|
||||
// Navbar search
|
||||
//
|
||||
|
||||
.navbar-search {
|
||||
.input-group {
|
||||
border-radius: $navbar-search-border-radius;
|
||||
border: $navbar-search-border-width solid;
|
||||
background-color: transparent;
|
||||
|
||||
.input-group-text {
|
||||
background-color: transparent;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control {
|
||||
width: $navbar-search-width;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-search-dark {
|
||||
.input-group {
|
||||
border-color: $navbar-search-dark-border-color;
|
||||
}
|
||||
|
||||
.input-group-text {
|
||||
color: $navbar-search-dark-color;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
color: $navbar-search-dark-focus-color;
|
||||
|
||||
&::placeholder {
|
||||
color: $navbar-search-dark-color;
|
||||
}
|
||||
}
|
||||
|
||||
.focused {
|
||||
.input-group {
|
||||
border-color: $navbar-search-dark-focus-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-search-light {
|
||||
.input-group {
|
||||
border-color: $navbar-search-light-border-color;
|
||||
}
|
||||
|
||||
.input-group-text {
|
||||
color: $navbar-search-light-color;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
color: $navbar-search-light-focus-color;
|
||||
|
||||
&::placeholder {
|
||||
color: $navbar-search-light-color;
|
||||
}
|
||||
}
|
||||
|
||||
.focused {
|
||||
.input-group {
|
||||
border-color: $navbar-search-light-focus-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
286
src/assets/scss/core/navbars/_navbar-vertical.scss
Normal file
286
src/assets/scss/core/navbars/_navbar-vertical.scss
Normal file
@@ -0,0 +1,286 @@
|
||||
//
|
||||
// Vertical navbar
|
||||
//
|
||||
|
||||
|
||||
// Vertical
|
||||
//
|
||||
// Creates a vertically aligned version of the navbar
|
||||
.navbar-vertical {
|
||||
box-shadow: $navbar-vertical-box-shadow;
|
||||
|
||||
.navbar {
|
||||
border-width: 0 0 1px 0;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
|
||||
// Navbar light
|
||||
|
||||
.navbar-light {
|
||||
background-color: $navbar-light-bg;
|
||||
border-color: $navbar-light-border-color;
|
||||
}
|
||||
|
||||
|
||||
// Navbar brand
|
||||
|
||||
.navbar-brand {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.navbar-brand-img,
|
||||
.navbar-brand > img {
|
||||
max-width: 100%;
|
||||
max-height: 2rem;
|
||||
}
|
||||
|
||||
|
||||
// Navbar collapse
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
.navbar-collapse {
|
||||
margin-left: -$navbar-padding-x;
|
||||
margin-right: -$navbar-padding-x;
|
||||
padding-left: $navbar-padding-x;
|
||||
padding-right: $navbar-padding-x;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
display: block;
|
||||
margin: $navbar-padding-y (-$navbar-padding-x);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Navbar navigaton
|
||||
|
||||
.navbar-nav {
|
||||
margin-left: -$navbar-padding-x;
|
||||
margin-right: -$navbar-padding-x;
|
||||
|
||||
|
||||
// Navbar link
|
||||
|
||||
.nav-link {
|
||||
padding-left: $navbar-padding-x;
|
||||
padding-right: $navbar-padding-x;
|
||||
font-size: $navbar-nav-link-font-size;
|
||||
|
||||
&.active {
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: $nav-link-padding-y;
|
||||
bottom: $nav-link-padding-y;
|
||||
border-left: 2px solid $primary;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Icon
|
||||
|
||||
> i {
|
||||
min-width: $navbar-icon-min-width;
|
||||
font-size: .9375rem;
|
||||
line-height: ($font-size-base * $line-height-base);
|
||||
}
|
||||
|
||||
|
||||
// Dropdown
|
||||
|
||||
.dropdown-menu {
|
||||
border: none;
|
||||
|
||||
.dropdown-menu {
|
||||
margin-left: $dropdown-item-padding-x / 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Navbar navigation
|
||||
.navbar-nav .nav-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navbar-nav .nav-link[data-toggle="collapse"] {
|
||||
&:after {
|
||||
display: inline-block;
|
||||
font-style: normal;
|
||||
font-variant: normal;
|
||||
text-rendering: auto;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-family: 'Font Awesome 5 Free';
|
||||
font-weight: 700;
|
||||
content: "\f105";
|
||||
margin-left: auto;
|
||||
color: $text-muted;
|
||||
transition: $transition-base;
|
||||
} // Expanded
|
||||
&[aria-expanded="true"] {
|
||||
|
||||
&:after {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Second level
|
||||
.navbar-nav .nav .nav-link {
|
||||
padding-left: $navbar-padding-x + $navbar-icon-min-width;
|
||||
}
|
||||
|
||||
// Third level
|
||||
.navbar-nav .nav .nav .nav-link {
|
||||
padding-left: $navbar-padding-x * 1.5 + $navbar-icon-min-width;
|
||||
}
|
||||
|
||||
|
||||
// Navbar heading
|
||||
.navbar-heading {
|
||||
padding-top: $nav-link-padding-y;
|
||||
padding-bottom: $nav-link-padding-y;
|
||||
font-size: $font-size-xs;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .04em;
|
||||
}
|
||||
|
||||
|
||||
// Expanded navbar specific styles
|
||||
&.navbar-expand {
|
||||
@each $breakpoint,
|
||||
$dimension in $grid-breakpoints {
|
||||
|
||||
&-#{$breakpoint} {
|
||||
@include media-breakpoint-up(#{$breakpoint}) {
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
max-width: $navbar-vertical-width;
|
||||
padding-left: $navbar-vertical-padding-x;
|
||||
padding-right: $navbar-vertical-padding-x;
|
||||
|
||||
overflow-y: auto;
|
||||
|
||||
// Container
|
||||
>[class*="container"] {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
min-height: 100%;
|
||||
padding-left: 0;
|
||||
padding-right: 0; // Target IE 10 & 11
|
||||
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
|
||||
min-height: none;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Fixes the vertical navbar to the left
|
||||
&.fixed-left {
|
||||
left: 0;
|
||||
border-width: 0 1px 0 0;
|
||||
}
|
||||
|
||||
|
||||
// Fixed the vertical navbar to the right
|
||||
&.fixed-right {
|
||||
right: 0;
|
||||
border-width: 0 0 0 1px;
|
||||
}
|
||||
|
||||
|
||||
// Navbar collapse
|
||||
.navbar-collapse {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
margin-left: -$navbar-vertical-padding-x;
|
||||
margin-right: -$navbar-vertical-padding-x;
|
||||
padding-left: $navbar-vertical-padding-x;
|
||||
padding-right: $navbar-vertical-padding-x;
|
||||
|
||||
> * {
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Navbar navigation
|
||||
.navbar-nav {
|
||||
flex-direction: column;
|
||||
margin-left: -$navbar-vertical-padding-x;
|
||||
margin-right: -$navbar-vertical-padding-x;
|
||||
}
|
||||
|
||||
.navbar-nav .nav-link {
|
||||
padding: $navbar-vertical-nav-link-padding-y $navbar-vertical-nav-link-padding-x;
|
||||
|
||||
&.active {
|
||||
&:before {
|
||||
top: $nav-link-padding-y;
|
||||
bottom: $nav-link-padding-y;
|
||||
left: 0;
|
||||
right: auto;
|
||||
border-left: 2px solid $primary;
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Second level
|
||||
.navbar-nav .nav .nav-link {
|
||||
padding-left: $navbar-vertical-padding-x + $navbar-icon-min-width;
|
||||
}
|
||||
|
||||
|
||||
// Third level
|
||||
.navbar-nav .nav .nav .nav-link {
|
||||
padding-left: $navbar-vertical-padding-x * 1.5 + $navbar-icon-min-width;
|
||||
}
|
||||
|
||||
// Navbar brand
|
||||
.navbar-brand {
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding-top: (2rem - $navbar-padding-y);
|
||||
padding-bottom: (2rem - $navbar-padding-y);
|
||||
}
|
||||
|
||||
.navbar-brand-img {
|
||||
max-height: 2.5rem;
|
||||
}
|
||||
|
||||
// Navbar user
|
||||
.navbar-user {
|
||||
margin-left: -$navbar-vertical-padding-x;
|
||||
margin-right: -$navbar-vertical-padding-x;
|
||||
padding-top: $spacer;
|
||||
padding-bottom: $spacer - $navbar-padding-y;
|
||||
padding-left: $navbar-vertical-padding-x;
|
||||
padding-right: $navbar-vertical-padding-x;
|
||||
border-top: 1px solid $border-color;
|
||||
|
||||
// Dropup menu
|
||||
.dropup .dropdown-menu {
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
153
src/assets/scss/core/navbars/_navbar.scss
Normal file
153
src/assets/scss/core/navbars/_navbar.scss
Normal file
@@ -0,0 +1,153 @@
|
||||
//
|
||||
// Navbar
|
||||
//
|
||||
|
||||
|
||||
// Navbar links
|
||||
|
||||
.navbar-horizontal {
|
||||
.navbar-nav {
|
||||
.nav-link {
|
||||
font-size: $navbar-nav-link-font-size;
|
||||
font-weight: $navbar-nav-link-font-weight;
|
||||
text-transform: $navbar-nav-link-text-transform;
|
||||
letter-spacing: $navbar-nav-link-letter-spacing;
|
||||
@include transition($navbar-transition);
|
||||
|
||||
.nav-link-inner--text {
|
||||
margin-left: .25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Navbar brand (logo)
|
||||
|
||||
.navbar-brand {
|
||||
font-size: $font-size-sm;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
font-size: .875rem;
|
||||
letter-spacing: .05px;
|
||||
|
||||
img {
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-dark {
|
||||
.navbar-brand {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-light {
|
||||
.navbar-brand {
|
||||
color: $gray-800;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
.nav-item {
|
||||
.media:not(:last-child){
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
.navbar-nav {
|
||||
.nav-item {
|
||||
margin-right: .5rem;
|
||||
|
||||
[data-toggle="dropdown"]::after {
|
||||
transition: $transition-base;
|
||||
}
|
||||
|
||||
&.show {
|
||||
[data-toggle="dropdown"]::after {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-link {
|
||||
padding-top: $navbar-nav-link-padding-y;
|
||||
padding-bottom: $navbar-nav-link-padding-y;
|
||||
border-radius: $navbar-nav-link-border-radius;
|
||||
|
||||
i {
|
||||
margin-right: .625rem;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link-icon {
|
||||
padding-left: .5rem !important;
|
||||
padding-right: .5rem !important;
|
||||
font-size: 1rem;
|
||||
border-radius: $navbar-nav-link-border-radius;
|
||||
|
||||
i {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Transparent navbar
|
||||
|
||||
.navbar-transparent {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 100;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
|
||||
.navbar-brand {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
.navbar-toggler-icon {
|
||||
background-image: $navbar-dark-toggler-icon-bg;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
.navbar-transparent {
|
||||
.navbar-nav {
|
||||
.nav-link {
|
||||
color: $navbar-dark-color;
|
||||
|
||||
@include hover-focus {
|
||||
color: $navbar-dark-hover-color;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: $navbar-dark-disabled-color;
|
||||
}
|
||||
}
|
||||
|
||||
.show > .nav-link,
|
||||
.active > .nav-link,
|
||||
.nav-link.show,
|
||||
.nav-link.active {
|
||||
color: $navbar-dark-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
color: $navbar-dark-color;
|
||||
|
||||
@include hover-focus {
|
||||
color: $navbar-dark-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
66
src/assets/scss/core/navs/_nav-pills.scss
Normal file
66
src/assets/scss/core/navs/_nav-pills.scss
Normal file
@@ -0,0 +1,66 @@
|
||||
//
|
||||
// Nav pills
|
||||
//
|
||||
|
||||
|
||||
// General styles
|
||||
|
||||
.nav-pills {
|
||||
.nav-item:not(:last-child) {
|
||||
padding-right: $nav-pills-space-x;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding: $nav-pills-padding-y $nav-pills-padding-x;
|
||||
color: $nav-pills-link-color;
|
||||
font-weight: 500;
|
||||
font-size: $font-size-sm;
|
||||
box-shadow: $nav-pills-box-shadow;
|
||||
background-color: $nav-pills-bg;
|
||||
transition: $transition-base;
|
||||
|
||||
&:hover {
|
||||
color: $nav-pills-link-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link.active,
|
||||
.show > .nav-link {
|
||||
color: $nav-pills-link-active-color;
|
||||
background-color: $nav-pills-link-active-bg;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
.nav-item {
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
.nav-pills:not(.nav-pills-circle) {
|
||||
.nav-item {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Rounded circle nav pills
|
||||
|
||||
.nav-pills-circle {
|
||||
.nav-link {
|
||||
text-align: center;
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
padding: 0;
|
||||
line-height: 60px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.nav-link-icon {
|
||||
i, svg {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
33
src/assets/scss/core/navs/_nav.scss
Normal file
33
src/assets/scss/core/navs/_nav.scss
Normal file
@@ -0,0 +1,33 @@
|
||||
//
|
||||
// Nav
|
||||
//
|
||||
|
||||
|
||||
// Nav wrapper (container)
|
||||
|
||||
// Nav wrapper
|
||||
.nav-wrapper {
|
||||
padding: 1rem 0;
|
||||
@include border-top-radius($card-border-radius);
|
||||
|
||||
+ .card {
|
||||
@include border-top-radius(0);
|
||||
@include border-bottom-radius($card-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Nav links
|
||||
|
||||
.nav-link {
|
||||
color: $nav-link-color;
|
||||
|
||||
&:hover {
|
||||
color: $nav-link-hover-color;
|
||||
}
|
||||
|
||||
i.ni {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
}
|
||||
48
src/assets/scss/core/paginations/_pagination.scss
Normal file
48
src/assets/scss/core/paginations/_pagination.scss
Normal file
@@ -0,0 +1,48 @@
|
||||
//
|
||||
// Pagination
|
||||
//
|
||||
|
||||
|
||||
.page-item {
|
||||
&.active .page-link {
|
||||
box-shadow: $pagination-active-box-shadow;
|
||||
}
|
||||
|
||||
.page-link,
|
||||
span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
margin: 0 3px;
|
||||
border-radius: 50% !important;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Size variations
|
||||
|
||||
.pagination-lg {
|
||||
.page-item {
|
||||
.page-link,
|
||||
span {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
line-height: 46px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-sm {
|
||||
.page-item {
|
||||
.page-link,
|
||||
span {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
21
src/assets/scss/core/popovers/_popover.scss
Normal file
21
src/assets/scss/core/popovers/_popover.scss
Normal file
@@ -0,0 +1,21 @@
|
||||
//
|
||||
// Popover
|
||||
//
|
||||
|
||||
|
||||
.popover {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.popover-header {
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
|
||||
// Alternative colors
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.popover-#{$color} {
|
||||
@include popover-variant($value);
|
||||
}
|
||||
}
|
||||
79
src/assets/scss/core/progresses/_progress.scss
Normal file
79
src/assets/scss/core/progresses/_progress.scss
Normal file
@@ -0,0 +1,79 @@
|
||||
//
|
||||
// Progress
|
||||
//
|
||||
|
||||
|
||||
// Progress container
|
||||
|
||||
.progress-wrapper {
|
||||
position: relative;
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
|
||||
|
||||
// General styles
|
||||
|
||||
.progress {
|
||||
height: 8px;
|
||||
margin-bottom: $spacer;
|
||||
overflow: hidden;
|
||||
border-radius: $border-radius-sm;
|
||||
background-color: $progress-bg;
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.sr-only {
|
||||
width: auto;
|
||||
height: 20px;
|
||||
margin: 0 0 0 30px;
|
||||
left: 0;
|
||||
clip: auto;
|
||||
line-height: 20px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Progress inner elements
|
||||
|
||||
.progress-heading {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin: 0 0 2px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.progress-info{
|
||||
margin-bottom: .5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.progress-label {
|
||||
span {
|
||||
display: inline-block;
|
||||
color: $primary;
|
||||
font-size: .625rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
background: rgba($primary, .1);
|
||||
padding: .25rem 1rem;
|
||||
border-radius: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-percentage {
|
||||
text-align: right;
|
||||
span {
|
||||
display: inline-block;
|
||||
color: $gray-600;
|
||||
font-size: .875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
54
src/assets/scss/core/separators/_separator.scss
Normal file
54
src/assets/scss/core/separators/_separator.scss
Normal file
@@ -0,0 +1,54 @@
|
||||
//
|
||||
// Separator
|
||||
// add svg on top or bottom of a section for a more stylish visual
|
||||
//
|
||||
|
||||
|
||||
.separator {
|
||||
position: absolute;
|
||||
top: auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
transform: translateZ(0);
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.separator-top {
|
||||
top: 0;
|
||||
bottom: auto;
|
||||
|
||||
svg {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.separator-bottom {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
|
||||
svg {
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.separator-inverse {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
// Styles
|
||||
|
||||
.separator-skew {
|
||||
height: 60px;
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
height: 70px;
|
||||
}
|
||||
}
|
||||
118
src/assets/scss/core/tables/_table.scss
Normal file
118
src/assets/scss/core/tables/_table.scss
Normal file
@@ -0,0 +1,118 @@
|
||||
//
|
||||
// Table
|
||||
//
|
||||
|
||||
|
||||
// General styles
|
||||
|
||||
.table {
|
||||
thead th {
|
||||
padding-top: $table-head-spacer-y;
|
||||
padding-bottom: $table-head-spacer-y;
|
||||
font-size: $table-head-font-size;
|
||||
text-transform: $table-head-text-transform;
|
||||
letter-spacing: $table-head-letter-spacing;
|
||||
border-bottom: $table-border-width solid $table-border-color;
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: $table-head-font-weight;
|
||||
}
|
||||
|
||||
td {
|
||||
.progress {
|
||||
height: 3px;
|
||||
width: 120px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
font-size: $table-body-font-size;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
// Vetical align table content
|
||||
|
||||
&.align-items-center {
|
||||
td,
|
||||
th {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Styles for dark table
|
||||
|
||||
.thead-dark {
|
||||
th {
|
||||
background-color: $table-dark-head-bg;
|
||||
color: $table-dark-head-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Styles for light table
|
||||
|
||||
.thead-light {
|
||||
th {
|
||||
background-color: $table-head-bg;
|
||||
color: $table-head-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Add transition for hover state
|
||||
|
||||
.table-hover {
|
||||
tr {
|
||||
@include transition($transition-base);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Flush tables
|
||||
|
||||
.table-flush {
|
||||
td,
|
||||
th {
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
&:first-child {
|
||||
td,
|
||||
th {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
td,
|
||||
th {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Tables inside cards
|
||||
|
||||
.card {
|
||||
.table {
|
||||
margin-bottom: 0;
|
||||
|
||||
td,
|
||||
th {
|
||||
padding-left: $card-spacer-x;
|
||||
padding-right: $card-spacer-x;
|
||||
}
|
||||
}
|
||||
}
|
||||
22
src/assets/scss/core/type/_article.scss
Normal file
22
src/assets/scss/core/type/_article.scss
Normal file
@@ -0,0 +1,22 @@
|
||||
//
|
||||
// Article
|
||||
//
|
||||
|
||||
article {
|
||||
h4:not(:first-child),
|
||||
h5:not(:first-child) {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
h4, h5 {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 3rem 0;
|
||||
}
|
||||
|
||||
h5 + figure {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
14
src/assets/scss/core/type/_display.scss
Normal file
14
src/assets/scss/core/type/_display.scss
Normal file
@@ -0,0 +1,14 @@
|
||||
//
|
||||
// Display
|
||||
//
|
||||
|
||||
|
||||
.display-1,
|
||||
.display-2,
|
||||
.display-3,
|
||||
.display-4 {
|
||||
span {
|
||||
display: block;
|
||||
font-weight: $font-weight-light;
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user