13 |
51 |
--------------------------------------------------------------------------------
/Views/Auth/LoginBasic.cshtml:
--------------------------------------------------------------------------------
1 | @{
2 | Layout = "_BlankLayout";
3 | ViewData["Title"] = "Login Basic - Pages";
4 | }
5 |
6 | @section PageStyles {
7 |
8 | }
9 |
10 | @* ************** Content ************** *@
11 |
12 |
14 |
50 |
15 |
16 |
17 | 
46 | 
47 | 
48 |
49 |
18 |
19 |
25 |
26 |
44 |
45 |
27 |
43 | Forgot Password? 🔒
28 |Enter your email and we'll send you instructions to reset your password
29 | 36 |
37 |
38 |
39 | Back to login
40 |
41 |
42 |
46 |
47 |
48 |
13 |
78 |
--------------------------------------------------------------------------------
/Views/Auth/RegisterBasic.cshtml:
--------------------------------------------------------------------------------
1 | @{
2 | Layout = "_BlankLayout";
3 | ViewData["Title"] = "Register Basic - Pages";
4 | }
5 |
6 | @section PageStyles {
7 |
8 | }
9 |
10 | @* ************** Content ************** *@
11 |
12 |
14 |
77 |
15 |
16 |
17 |
73 |
74 |
75 |
76 |
18 |
19 |
25 |
26 |
27 |
71 |
72 |
28 |
70 | Welcome to @TempData.Peek("appName")! 👋🏻
29 |Please sign-in to your account and start the adventure
30 | 31 | 62 | 63 |64 | New on our platform? 65 | 66 | Create an account 67 | 68 |
69 |
73 |
74 |
75 |
13 |
78 |
--------------------------------------------------------------------------------
/Views/ExtendedUi/TextDivider.cshtml:
--------------------------------------------------------------------------------
1 | @{
2 | ViewData["Title"] = "Text Divider - Extended UI";
3 | }
4 |
5 | @* ************** Content ************** *@
6 |
14 |
77 |
15 |
16 |
17 |
73 |
74 |
75 |
76 |
18 |
19 |
25 |
26 |
71 |
72 |
27 |
70 | Adventure starts here 🚀
28 |Make your app management easy and fun!
29 | 30 | 62 | 63 |64 | Already have an account? 65 | 66 | Sign in instead 67 | 68 |
69 |
73 |
74 |
75 |
7 |
8 |
133 |
--------------------------------------------------------------------------------
/Views/Home/Index.cshtml:
--------------------------------------------------------------------------------
1 | @{
2 | ViewData["Title"] = "Home Page";
3 | }
4 |
5 |
9 |
18 |
19 |
20 |
21 |
10 |
17 | Basic
11 |
12 |
16 |
13 |
15 | Text
14 |
22 |
43 |
44 |
45 |
46 |
23 |
42 | Alignment
24 |
25 |
41 |
26 |
28 | Start
27 |
29 |
31 | Start-Center
30 |
32 |
34 | Center (Default)
33 |
35 |
37 | End-Center
36 |
38 |
40 | End
39 |
47 |
71 |
72 |
73 |
74 |
48 |
70 | Colors
49 |
50 |
69 |
51 |
53 | Primary
52 |
54 |
56 | Success
55 |
57 |
59 | Danger
58 |
60 |
62 | Warning
61 |
63 |
65 | Info
64 |
66 |
68 | Dark
67 |
75 |
106 |
107 |
108 |
109 |
76 |
105 | Icons
77 |
78 |
104 |
79 |
83 |
80 |
81 |
82 |
84 |
88 |
85 |
86 |
87 |
89 |
93 |
90 |
91 |
92 |
94 |
98 |
95 |
96 |
97 |
99 |
103 |
100 |
101 |
102 |
110 |
131 |
132 |
111 |
130 | Styles
112 |
113 |
129 |
114 |
118 |
115 | Solid (Default)
116 |
117 |
119 |
123 |
120 | Dotted
121 |
122 |
124 |
128 |
125 | Dashed
126 |
127 |
6 |
9 |
--------------------------------------------------------------------------------
/Views/Home/Privacy.cshtml:
--------------------------------------------------------------------------------
1 | @{
2 | ViewData["Title"] = "Privacy Policy";
3 | }
4 | Welcome
7 |Learn about building Web apps with ASP.NET Core.
8 |@ViewData["Title"]
5 | 6 |Use this page to detail your site's privacy policy.
7 | -------------------------------------------------------------------------------- /Views/LayoutExamples/Blank.cshtml: -------------------------------------------------------------------------------- 1 | @{ 2 | ViewData["Title"] = "Blank layout - Layouts"; 3 | Layout = "_BlankLayout"; 4 | } 5 | @* ************** Content ************** *@ 6 | 7 |Blank Page
8 | -------------------------------------------------------------------------------- /Views/LayoutExamples/Container.cshtml: -------------------------------------------------------------------------------- 1 | @{ 2 | ViewData["Title"] = "Container layout - Layouts"; 3 | } 4 | @* ************** Content ************** *@ 5 | 6 |
7 |
15 |
--------------------------------------------------------------------------------
/Views/LayoutExamples/Fluid.cshtml:
--------------------------------------------------------------------------------
1 | @{
2 | ViewData["Title"] = "Fluid layout - Layouts";
3 | ViewData["container"] = (ViewData["container"] ?? "container-fluid");
4 | ViewData["containerNav"] = (ViewData["containerNav"] ?? "container-fluid");
5 | }
6 | @* ************** Content ************** *@
7 |
8 |
8 | 
9 |
10 |
9 |
11 |
14 | Layout container
12 |Container layout sets a max-width at each responsive breakpoint.
9 |
17 |
--------------------------------------------------------------------------------
/Views/LayoutExamples/WithoutMenu.cshtml:
--------------------------------------------------------------------------------
1 | @{
2 | ViewData["Title"] = "Without Menu layout - Layouts";
3 | ViewData["navbarHideToggle"] = true;
4 | ViewData["isMenu"] = false;
5 | ViewData["menuFixed"] = "";
6 | }
7 | @* ************** Content ************** *@
8 |
9 |
10 | 
11 |
12 |
11 |
13 |
16 | Layout fluid
14 |Fluid layout sets a 100% width at each responsive breakpoint.
10 |
18 |
--------------------------------------------------------------------------------
/Views/LayoutExamples/WithoutNavbar.cshtml:
--------------------------------------------------------------------------------
1 | @{
2 | ViewData["Title"] = "Without Navbar layout - Layouts";
3 | ViewData["isNavbar"] = false;
4 | ViewData["navbarType"] = "layout-navbar-hidden";
5 | }
6 | @* ************** Content ************** *@
7 |
8 |
11 | 
12 |
13 |
12 |
14 |
17 | Layout without Menu (Navigation)
15 | 16 |
9 |
17 |
--------------------------------------------------------------------------------
/Views/Pages/MiscError.cshtml:
--------------------------------------------------------------------------------
1 | @{
2 | Layout = "_BlankLayout";
3 | ViewData["Title"] = "Error - Pages";
4 | }
5 |
6 | @section PageStyles {
7 |
8 | }
9 |
10 | @* ************** Content ************** *@
11 |
12 |
10 | 
11 |
12 |
11 |
13 |
16 | Layout without Navbar
14 |Layout does not contain Navbar component.
15 |
13 |
27 |
28 |
--------------------------------------------------------------------------------
/Views/Pages/MiscUnderMaintenance.cshtml:
--------------------------------------------------------------------------------
1 | @{
2 | Layout = "_BlankLayout";
3 | ViewData["Title"] = "Under Maintenance - Pages";
4 | }
5 |
6 | @section PageStyles {
7 |
8 | }
9 |
10 | @* ************** Content ************** *@
11 |
12 | 404
14 |Page Not Found 🙄
15 |we couldn't find the page you are looking for
16 | 26 |
19 | 
21 |
13 |
26 |
27 |
--------------------------------------------------------------------------------
/Views/Shared/Error.cshtml:
--------------------------------------------------------------------------------
1 | @model ErrorViewModel
2 | @{
3 | ViewData["Title"] = "Error";
4 | }
5 |
6 | Under Maintenance! 🚧
14 |Sorry for the inconvenience but we're performing some maintenance at the moment
15 | 25 |
20 | Error.
7 |An error occurred while processing your request.
8 | 9 | @if (Model.ShowRequestId) 10 | { 11 |
12 | Request ID: @Model.RequestId
13 |
Development Mode
17 |18 | Swapping to Development environment will display more detailed information about the error that occurred. 19 |
20 |21 | The Development environment shouldn't be enabled for deployed applications. 22 | It can result in displaying sensitive information from exceptions to end users. 23 | For local debugging, enable the Development environment by setting the ASPNETCORE_ENVIRONMENT environment variable to Development 24 | and restarting the app. 25 |
26 | -------------------------------------------------------------------------------- /Views/Shared/Sections/Footer/_Footer.cshtml: -------------------------------------------------------------------------------- 1 | @{ 2 | TempData.Keep(); 3 | ViewData["containerNav"] = (ViewData["containerNav"] ??= "container-fluid"); 4 | } 5 | 6 | 7 | 24 | 25 | -------------------------------------------------------------------------------- /Views/Shared/Sections/Navbar/_Navbar.cshtml: -------------------------------------------------------------------------------- 1 | @{ 2 | TempData.Keep(); 3 | @* ViewData["navbarDetached"] = (ViewData["navbarDetached"] ?? "navbar-detached"); *@ 4 | ViewData["navbarDetached"] = (ViewData["navbarDetached"] ??= null); 5 | ViewData["containerNav"] = (ViewData["containerNav"] ??= "container-fluid"); 6 | } 7 | @if (@ViewData["navbarDetached"] != null) 8 | { 9 | 14 | } 15 | else 16 | { 17 | 24 | 25 | } 26 | -------------------------------------------------------------------------------- /Views/Shared/Sections/_Scripts.cshtml: -------------------------------------------------------------------------------- 1 |
7 |
8 |
94 |
--------------------------------------------------------------------------------
/Views/Ui/Footer.cshtml:
--------------------------------------------------------------------------------
1 | @{
2 | ViewData["Title"] = "Footer - UI elements";
3 | }
4 |
5 | @* ************** Content ************** *@
6 |
7 |
24 |
25 |
9 |
42 |
43 |
44 |
10 |
41 | Basic Alerts
11 |
12 |
40 |
13 | This is a primary alert — check it out!
14 |
15 |
16 |
17 | This is a secondary alert — check it out!
18 |
19 |
20 |
21 | This is a success alert — check it out!
22 |
23 |
24 |
25 | This is a danger alert — check it out!
26 |
27 |
28 |
29 | This is a warning alert — check it out!
30 |
31 |
32 |
33 | This is an info alert — check it out!
34 |
35 |
36 |
37 | This is a dark alert — check it out!
38 |
39 |
45 |
92 |
93 |
46 |
91 | Dismissible Alerts
47 |
48 |
90 |
49 | This is a primary dismissible alert — check it out!
50 |
52 |
53 |
54 |
55 | This is a secondary dismissible alert — check it out!
56 |
58 |
59 |
60 |
61 | This is a success dismissible alert — check it out!
62 |
64 |
65 |
66 |
67 | This is a danger dismissible alert — check it out!
68 |
70 |
71 |
72 |
73 | This is a warning dismissible alert — check it out!
74 |
76 |
77 |
78 |
79 | This is an info dismissible alert — check it out!
80 |
82 |
83 |
84 |
85 | This is a dark dismissible alert — check it out!
86 |
88 |
89 | 26 | 27 | 28 | 60 | 61 | -------------------------------------------------------------------------------- /Views/Ui/TooltipsPopovers.cshtml: -------------------------------------------------------------------------------- 1 | @{ 2 | ViewData["Title"] = "Tooltips and popovers - UI elements"; 3 | } 4 | @section PageScripts { 5 | 6 | } 7 | @* ************** Content ************** *@ 8 | 9 |
10 |
37 |
38 |
39 |
40 | Tooltips
11 |
12 |
36 | Directions
13 |
14 |
35 |
15 |
18 |
19 |
20 |
23 |
24 |
25 |
28 |
29 |
30 |
33 |
34 |
41 |
69 |
70 |
--------------------------------------------------------------------------------
/Views/_Partials/_Macros.cshtml:
--------------------------------------------------------------------------------
1 |
13 |
--------------------------------------------------------------------------------
/Views/_ViewImports.cshtml:
--------------------------------------------------------------------------------
1 | @using AspnetCoreMvcFull
2 | @using AspnetCoreMvcFull.Models
3 | @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
4 |
--------------------------------------------------------------------------------
/Views/_ViewStart.cshtml:
--------------------------------------------------------------------------------
1 | @{
2 | // Availabel Layout option added for this template :
3 | // _ContentNavbarLayout : Vertical Layout
4 | // _BlankLayout : Blank Layout
5 | // _HorizontalLayout : Horizontal Layout
6 | // _NavbarFullLayout : Full Navbar Layout
7 | Layout = "_ContentNavbarLayout";
8 | }
9 |
--------------------------------------------------------------------------------
/appsettings.Development.json:
--------------------------------------------------------------------------------
1 | {
2 | "Logging": {
3 | "LogLevel": {
4 | "Default": "Information",
5 | "Microsoft.AspNetCore": "Warning"
6 | }
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/appsettings.json:
--------------------------------------------------------------------------------
1 | {
2 | "Logging": {
3 | "LogLevel": {
4 | "Default": "Information",
5 | "Microsoft.AspNetCore": "Warning"
6 | }
7 | },
8 | "AllowedHosts": "*"
9 | }
--------------------------------------------------------------------------------
/build-config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | base: {
3 | // Excludes folders relative to `root` directory.
4 | exclude: [
5 | 'html',
6 | 'html-starter',
7 | 'html-demo',
8 | 'dist',
9 | 'build',
10 | 'assets',
11 | 'tasks',
12 | 'node_modules',
13 | '_temp',
14 | 'node-script'
15 | ]
16 | },
17 | development: {
18 | // Build path can be both relative or absolute.
19 | // Current dist path is `./assets/vendor` which will be used by templates from `html\` directory. Set distPath: './dist' to generate assets in dist folder.
20 | distPath: './wwwroot',
21 |
22 | // Minify assets.
23 | minify: false,
24 |
25 | // Generate sourcemaps.
26 | sourcemaps: false,
27 |
28 | // https://webpack.js.org/configuration/devtool/#development
29 | devtool: 'eval-source-map',
30 |
31 | // Remove sourcemaps, *.dist.js and *.dist.css files before build
32 | cleanDist: true,
33 | fastDev: true
34 | },
35 | production: {
36 | // Build path can be both relative or absolute.
37 | // Current dist path is `./assets/vendor` which will be used by templates from `html\` directory. Set distPath: './dist' to generate assets in dist folder.
38 | distPath: './wwwroot',
39 |
40 | // Minify assets.
41 | // Note: Webpack will minify js sources in production mode regardless to this option
42 | minify: true,
43 |
44 | // Generate sourcemaps.
45 |
46 | sourcemaps: false,
47 | // https://webpack.js.org/configuration/devtool/#production
48 | devtool: '#source-map',
49 |
50 | // Remove sourcemaps, *.dist.js and *.dist.css files before build
51 | cleanDist: true,
52 | fastDev: false
53 | }
54 | };
55 |
--------------------------------------------------------------------------------
/documentation.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Popovers
42 |
43 |
68 | Directions
44 |
45 |
67 |
46 |
49 |
50 |
51 |
52 |
55 |
56 |
57 |
60 |
61 |
62 |
65 |
66 | If you do not redirect please visit : https://demos.themeselection.com/materio-bootstrap-html-admin-template/documentation/net-core-mvc-introduction.html 13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /hire-us.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |If you do not redirect please visit : https://themeselection.com/hire-us/
12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Materio-bootstrap-html-aspnet-core-mvc-admin-template-free", 3 | "description": "Most Powerful & Comprehensive Free Bootstrap 5 HTML Admin Dashboard Template built for developers! 🚀", 4 | "license": "MIT", 5 | "version": "2.0.0", 6 | "author": { 7 | "name": "ThemeSelection", 8 | "url": "https://themeselection.com/" 9 | }, 10 | "bugs": { 11 | "url": "https://github.com/themeselection/materio-bootstrap-html-admin-template-free/issues" 12 | }, 13 | "private": false, 14 | "repository": { 15 | "type": "git", 16 | "url": "git+https://github.com/themeselection/materio-bootstrap-html-admin-template-free.git" 17 | }, 18 | "homepage": "https://themeselection.com/products/materio-free-bootstrap-html-admin-template/", 19 | "keywords": [ 20 | "bootstrap", 21 | "front-end", 22 | "admin", 23 | "framework", 24 | "admin-dashboard", 25 | "webapp", 26 | "bootstrap5", 27 | "themeselection", 28 | "freebies" 29 | ], 30 | "scripts": { 31 | "build": "npx gulp build", 32 | "build:js": "npx gulp build:js", 33 | "build:css": "npx gulp build:css", 34 | "build:fonts": "npx gulp build:fonts", 35 | "build:prod": "npx gulp build --env=production", 36 | "build:prod:js": "npx gulp build:js --env=production", 37 | "build:prod:css": "npx gulp build:css --env=production", 38 | "build:prod:fonts": "npx gulp build:fonts --env=production", 39 | "watch": "npx gulp watch", 40 | "serve": "npx gulp serve" 41 | }, 42 | "dependencies": { 43 | "jquery-validation-unobtrusive": "~4.0.0", 44 | "@popperjs/core": "^2.11.8", 45 | "apexcharts-clevision": "^3.28.5", 46 | "bootstrap": "~5.3.3", 47 | "highlight.js": "~11.9.0", 48 | "jquery": "~3.7.1", 49 | "masonry-layout": "~4.2.2", 50 | "node-waves": "~0.7.6", 51 | "perfect-scrollbar": "~1.5.5", 52 | "remixicon": "^4.2.0" 53 | }, 54 | "devDependencies": { 55 | "@babel/core": "~7.23.9", 56 | "@babel/plugin-proposal-object-rest-spread": "~7.20.7", 57 | "@babel/plugin-transform-object-rest-spread": "7.23.4", 58 | "@babel/plugin-transform-destructuring": "~7.23.3", 59 | "@babel/plugin-transform-template-literals": "~7.23.3", 60 | "@babel/preset-env": "~7.23.9", 61 | "ajv": "^8.17.1", 62 | "ansi-colors": "~4.1.3", 63 | "babel-loader": "~9.1.3", 64 | "browser-sync": "^3.0.2", 65 | "color-support": "~1.1.3", 66 | "css-loader": "~6.9.1", 67 | "deepmerge": "~4.3.1", 68 | "del": "~6.1.1", 69 | "eslint": "^8.57.0", 70 | "eslint-config-airbnb-base": "^15.0.0", 71 | "eslint-config-prettier": "^9.1.0", 72 | "eslint-plugin-import": "^2.29.1", 73 | "eslint-plugin-prettier": "^5.2.1", 74 | "fancy-log": "~2.0.0", 75 | "gulp": "~4.0.2", 76 | "gulp-autoprefixer": "~8.0.0", 77 | "gulp-dart-sass": "^1.1.0", 78 | "gulp-environment": "~1.5.2", 79 | "gulp-exec": "^5.0.0", 80 | "gulp-if": "~3.0.0", 81 | "gulp-rename": "~2.0.0", 82 | "gulp-replace": "~1.1.4", 83 | "gulp-sourcemaps": "~3.0.0", 84 | "gulp-uglify": "^3.0.2", 85 | "gulp-useref": "^5.0.0", 86 | "html-loader": "~4.2.0", 87 | "js-beautify": "^1.15.1", 88 | "prettier": "^3.3.3", 89 | "sass": "^1.76.0", 90 | "sass-loader": "~14.0.0", 91 | "string-replace-webpack-plugin": "~0.1.3", 92 | "style-loader": "~3.3.4", 93 | "terser-webpack-plugin": "~5.3.10", 94 | "webpack": "~5.89.0", 95 | "yarn": "~1.22.22" 96 | }, 97 | "overrides": { 98 | "prop-types": "15.8.1", 99 | "sass": "1.76.0" 100 | }, 101 | "resolutions": { 102 | "prop-types": "15.8.1", 103 | "sass": "1.76.0" 104 | }, 105 | "gulp-environment": { 106 | "environments": [ 107 | { 108 | "name": "development", 109 | "aliases": [ 110 | "dev" 111 | ] 112 | }, 113 | { 114 | "name": "production", 115 | "aliases": [ 116 | "prod" 117 | ] 118 | } 119 | ], 120 | "default": "development" 121 | } 122 | } 123 | -------------------------------------------------------------------------------- /src/fonts/remixicon/remixicon.scss: -------------------------------------------------------------------------------- 1 | [class^='ri-'], 2 | [class*=' ri-'] { 3 | font-family: 'remixicon' !important; 4 | font-style: normal; 5 | -webkit-font-smoothing: antialiased; 6 | -moz-osx-font-smoothing: grayscale; 7 | font-size: 18px; 8 | line-height: 1; 9 | vertical-align: middle; 10 | &:before { 11 | display: inline-block; 12 | } 13 | &.ri-24px::before { 14 | font-size: 24px; 15 | } 16 | } 17 | 18 | .ri-10px { 19 | &, 20 | &:before { 21 | font-size: 10px; 22 | } 23 | } 24 | .ri-12px { 25 | &, 26 | &:before { 27 | font-size: 12px; 28 | } 29 | } 30 | .ri-14px { 31 | &, 32 | &:before { 33 | font-size: 14px; 34 | } 35 | } 36 | .ri-16px { 37 | &, 38 | &:before { 39 | font-size: 16px; 40 | } 41 | } 42 | .ri-18px { 43 | &, 44 | &:before { 45 | font-size: 18px; 46 | } 47 | } 48 | .ri-20px { 49 | &, 50 | &:before { 51 | font-size: 20px; 52 | } 53 | } 54 | .ri-22px { 55 | &, 56 | &:before { 57 | font-size: 22px; 58 | } 59 | } 60 | .ri-24px { 61 | &, 62 | &:before { 63 | font-size: 24px; 64 | } 65 | } 66 | .ri-26px { 67 | &, 68 | &:before { 69 | font-size: 26px; 70 | } 71 | } 72 | .ri-28px { 73 | &, 74 | &:before { 75 | font-size: 28px; 76 | } 77 | } 78 | .ri-30px { 79 | &, 80 | &:before { 81 | font-size: 30px; 82 | } 83 | } 84 | .ri-32px { 85 | &, 86 | &:before { 87 | font-size: 32px; 88 | } 89 | } 90 | .ri-36px { 91 | &, 92 | &:before { 93 | font-size: 36px; 94 | } 95 | } 96 | .ri-40px { 97 | &, 98 | &:before { 99 | font-size: 40px; 100 | } 101 | } 102 | .ri-42px { 103 | &, 104 | &:before { 105 | font-size: 42px; 106 | } 107 | } 108 | .ri-48px { 109 | &, 110 | &:before { 111 | font-size: 48px; 112 | } 113 | } 114 | 115 | .ri-rotate-45:before { 116 | transform: rotate(45deg); 117 | } 118 | 119 | .ri-rotate-90:before { 120 | transform: rotate(90deg); 121 | } 122 | 123 | .ri-rotate-135:before { 124 | transform: rotate(135deg); 125 | } 126 | 127 | .ri-rotate-180:before { 128 | transform: rotate(180deg); 129 | } 130 | 131 | .ri-rotate-225:before { 132 | transform: rotate(225deg); 133 | } 134 | 135 | .ri-rotate-270:before { 136 | transform: rotate(270deg); 137 | } 138 | 139 | .ri-rotate-315:before { 140 | transform: rotate(315deg); 141 | } 142 | 143 | .ri-flip-h:before { 144 | transform: scaleX(-1); 145 | filter: FlipH; 146 | -ms-filter: 'FlipH'; 147 | } 148 | 149 | .ri-flip-v:before { 150 | transform: scaleY(-1); 151 | filter: FlipV; 152 | -ms-filter: 'FlipV'; 153 | } 154 | .ri-spin:before { 155 | animation: ri-spin 2s infinite linear; 156 | } 157 | 158 | @keyframes ri-spin { 159 | 0% { 160 | transform: rotate(0deg); 161 | } 162 | 100% { 163 | transform: rotate(359deg); 164 | } 165 | } 166 | @import '../../../node_modules/remixicon/fonts/remixicon'; 167 | -------------------------------------------------------------------------------- /src/js/bootstrap.js: -------------------------------------------------------------------------------- 1 | import * as bootstrap from 'bootstrap' 2 | 3 | try { 4 | window.bootstrap = bootstrap 5 | } catch (e) {} 6 | 7 | export { bootstrap } 8 | -------------------------------------------------------------------------------- /src/libs/apex-charts/apex-charts.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Apex Charts 3 | */ 4 | @use '../../scss/_bootstrap-extended/include' as light; 5 | @import '../../scss/_custom-variables/libs'; 6 | @import 'apexcharts-clevision/dist/apexcharts'; 7 | 8 | // Light style 9 | @if $enable-light-style { 10 | .light-style { 11 | .apexcharts-canvas { 12 | .apexcharts-tooltip { 13 | background: light.$card-bg; 14 | border-color: light.$border-color; 15 | box-shadow: light.$popover-box-shadow; 16 | .apexcharts-tooltip-title { 17 | background: light.$card-bg; 18 | border-color: light.$border-color; 19 | font-family: light.$font-family-base !important; 20 | } 21 | &.apexcharts-theme-light { 22 | color: light.$headings-color; 23 | } 24 | &.apexcharts-theme-dark { 25 | color: light.$white; 26 | } 27 | .apexcharts-tooltip-title { 28 | font-weight: light.$headings-font-weight; 29 | } 30 | } 31 | .apexcharts-xaxistooltip, 32 | .apexcharts-yaxistooltip { 33 | background: light.$body-bg; 34 | border-color: light.$border-color; 35 | color: light.$headings-color; 36 | &.apexcharts-xaxistooltip-bottom, 37 | &.apexcharts-yaxistooltip-bottom { 38 | &:after { 39 | border-bottom-color: light.$body-bg; 40 | } 41 | &:before { 42 | border-bottom-color: light.$border-color; 43 | } 44 | } 45 | &.apexcharts-xaxistooltip-left, 46 | &.apexcharts-yaxistooltip-left { 47 | &:after { 48 | border-left-color: light.$body-bg; 49 | } 50 | &:before { 51 | border-left-color: light.$border-color; 52 | } 53 | } 54 | &.apexcharts-xaxistooltip-right, 55 | &.apexcharts-yaxistooltip-right { 56 | &:after { 57 | border-right-color: light.$body-bg; 58 | } 59 | &:before { 60 | border-right-color: light.$border-color; 61 | } 62 | } 63 | &.apexcharts-xaxistooltip-top, 64 | &.apexcharts-yaxistooltip-top { 65 | &:after { 66 | border-top-color: light.$body-bg; 67 | } 68 | &:before { 69 | border-top-color: light.$border-color; 70 | } 71 | } 72 | } 73 | .apexcharts-tooltip-text { 74 | font-family: light.$font-family-base !important; 75 | filter: none; 76 | } 77 | .apexcharts-marker { 78 | filter: drop-shadow(0 2px 4px #a1acb866); 79 | } 80 | } 81 | } 82 | } 83 | // bar charts with radius hover fix 84 | #orderStatisticsChart, 85 | #totalRevenueChart, 86 | #expensesBarChart { 87 | .apexcharts-xcrosshairs.apexcharts-active, 88 | .apexcharts-ycrosshairs.apexcharts-active { 89 | opacity: 0; 90 | } 91 | } 92 | -------------------------------------------------------------------------------- /src/libs/apex-charts/apexcharts.js: -------------------------------------------------------------------------------- 1 | import ApexCharts from 'apexcharts-clevision'; 2 | 3 | try { 4 | window.ApexCharts = ApexCharts; 5 | } catch (e) {} 6 | 7 | export { ApexCharts }; 8 | -------------------------------------------------------------------------------- /src/libs/highlight/highlight-github.scss: -------------------------------------------------------------------------------- 1 | @import 'highlight.js/styles/github.css'; 2 | -------------------------------------------------------------------------------- /src/libs/highlight/highlight.js: -------------------------------------------------------------------------------- 1 | import hljs from 'highlight.js'; 2 | 3 | try { 4 | window.hljs = hljs; 5 | } catch (e) {} 6 | 7 | export { hljs }; 8 | -------------------------------------------------------------------------------- /src/libs/highlight/highlight.scss: -------------------------------------------------------------------------------- 1 | @import 'highlight.js/styles/atom-one-light'; 2 | -------------------------------------------------------------------------------- /src/libs/jquery/jquery.js: -------------------------------------------------------------------------------- 1 | import jQuery from 'jquery/dist/jquery'; 2 | 3 | const $ = jQuery; 4 | try { 5 | window.jQuery = window.$ = jQuery; 6 | } catch (e) {} 7 | 8 | export { jQuery, $ }; 9 | -------------------------------------------------------------------------------- /src/libs/masonry/masonry.js: -------------------------------------------------------------------------------- 1 | import Masonry from 'masonry-layout'; 2 | 3 | try { 4 | window.Masonry = Masonry; 5 | } catch (e) {} 6 | 7 | export { Masonry }; 8 | -------------------------------------------------------------------------------- /src/libs/node-waves/node-waves.js: -------------------------------------------------------------------------------- 1 | import nodeWaves from 'node-waves/src/js/waves'; 2 | 3 | export { nodeWaves }; 4 | -------------------------------------------------------------------------------- /src/libs/node-waves/node-waves.scss: -------------------------------------------------------------------------------- 1 | // Waves 2 | // ******************************************************************************* 3 | 4 | @import '../../../node_modules/node-waves/src/scss/waves'; 5 | -------------------------------------------------------------------------------- /src/libs/perfect-scrollbar/perfect-scrollbar.js: -------------------------------------------------------------------------------- 1 | import PerfectScrollbar from 'perfect-scrollbar/dist/perfect-scrollbar'; 2 | 3 | try { 4 | window.PerfectScrollbar = PerfectScrollbar; 5 | } catch (e) {} 6 | 7 | export { PerfectScrollbar }; 8 | -------------------------------------------------------------------------------- /src/libs/perfect-scrollbar/perfect-scrollbar.scss: -------------------------------------------------------------------------------- 1 | @use '../../scss/_bootstrap-extended/include' as light; 2 | @import '../../scss/_custom-variables/libs'; 3 | @import 'perfect-scrollbar/css/perfect-scrollbar'; 4 | 5 | $ps-width: 0.25rem !default; 6 | $ps-hover-width: 0.375rem !default; 7 | 8 | .ps { 9 | position: relative; 10 | } 11 | 12 | .ps__rail-x { 13 | height: $ps-width; 14 | } 15 | 16 | .ps__rail-y { 17 | width: $ps-width; 18 | z-index: 3; 19 | } 20 | 21 | .ps__rail-x, 22 | .ps__rail-y, 23 | .ps__thumb-x, 24 | .ps__thumb-y { 25 | border-radius: 10rem; 26 | } 27 | .ps__rail-x:hover, 28 | .ps__rail-x:focus, 29 | .ps__rail-x.ps--clicking, 30 | .ps__rail-x:hover > .ps__thumb-x, 31 | .ps__rail-x:focus > .ps__thumb-x, 32 | .ps__rail-x.ps--clicking > .ps__thumb-x { 33 | height: $ps-hover-width; 34 | } 35 | 36 | .ps__rail-y:hover, 37 | .ps__rail-y:focus, 38 | .ps__rail-y.ps--clicking, 39 | .ps__rail-y:hover > .ps__thumb-y, 40 | .ps__rail-y:focus > .ps__thumb-y, 41 | .ps__rail-y.ps--clicking > .ps__thumb-y { 42 | width: $ps-hover-width; 43 | } 44 | 45 | .ps__thumb-x { 46 | height: $ps-width; 47 | bottom: 0; 48 | } 49 | 50 | .ps__thumb-y { 51 | width: $ps-width; 52 | right: 0; 53 | } 54 | 55 | // Light layout 56 | @if $enable-light-style { 57 | .light-style { 58 | .ps__thumb-x, 59 | .ps__thumb-y { 60 | background-color: light.$gray-400; 61 | } 62 | 63 | .ps__rail-x:hover, 64 | .ps__rail-y:hover, 65 | .ps__rail-x:focus, 66 | .ps__rail-y:focus, 67 | .ps__rail-x.ps--clicking, 68 | .ps__rail-y.ps--clicking { 69 | background-color: light.$gray-200; 70 | } 71 | 72 | .ps__rail-x:hover > .ps__thumb-x, 73 | .ps__rail-y:hover > .ps__thumb-y, 74 | .ps__rail-x:focus > .ps__thumb-x, 75 | .ps__rail-y:focus > .ps__thumb-y, 76 | .ps__rail-x.ps--clicking > .ps__thumb-x, 77 | .ps__rail-y.ps--clicking > .ps__thumb-y { 78 | background-color: light.$gray-700; 79 | } 80 | 81 | .ps-inverted { 82 | .ps__rail-x:hover, 83 | .ps__rail-y:hover, 84 | .ps__rail-x:focus, 85 | .ps__rail-y:focus, 86 | .ps__rail-x.ps--clicking, 87 | .ps__rail-y.ps--clicking { 88 | background-color: rgba(#fff, 0.5); 89 | } 90 | 91 | .ps__thumb-x, 92 | .ps__thumb-y { 93 | background-color: rgba(#fff, 0.7); 94 | } 95 | 96 | .ps__rail-x:hover > .ps__thumb-x, 97 | .ps__rail-y:hover > .ps__thumb-y, 98 | .ps__rail-x:focus > .ps__thumb-x, 99 | .ps__rail-y:focus > .ps__thumb-y, 100 | .ps__rail-x.ps--clicking > .ps__thumb-x, 101 | .ps__rail-y.ps--clicking > .ps__thumb-y { 102 | background-color: #fff; 103 | } 104 | } 105 | } 106 | } 107 | 108 | // Firefox width issue fixed 109 | @supports (-moz-appearance: none) { 110 | #both-scrollbars-example { 111 | max-width: 1080px; 112 | margin: 0 auto; 113 | padding-left: 0; 114 | padding-right: 0; 115 | } 116 | } 117 | -------------------------------------------------------------------------------- /src/libs/popper/popper.js: -------------------------------------------------------------------------------- 1 | import Popper from '@popperjs/core/dist/umd/popper.min'; 2 | 3 | // Required to enable animations on dropdowns/tooltips/popovers 4 | // Popper.Defaults.modifiers.computeStyle.gpuAcceleration = false 5 | 6 | try { 7 | window.Popper = Popper; 8 | } catch (e) {} 9 | 10 | export { Popper }; 11 | -------------------------------------------------------------------------------- /src/scss/_bootstrap-extended.scss: -------------------------------------------------------------------------------- 1 | @import '_bootstrap-extended/include'; 2 | 3 | // Import bootstrap extended scss 4 | @import '_bootstrap-extended/root'; 5 | @import '_bootstrap-extended/reboot'; 6 | @import '_bootstrap-extended/type'; 7 | @import '_bootstrap-extended/utilities'; 8 | @import '_bootstrap-extended/tables'; 9 | @import '_bootstrap-extended/buttons'; 10 | @import '_bootstrap-extended/button-group'; 11 | @import '_bootstrap-extended/badge'; 12 | @import '_bootstrap-extended/dropdown'; 13 | @import '_bootstrap-extended/nav'; 14 | @import '_bootstrap-extended/pagination'; 15 | @import '_bootstrap-extended/alert'; 16 | @import '_bootstrap-extended/tooltip'; 17 | @import '_bootstrap-extended/popover'; 18 | @import '_bootstrap-extended/forms'; 19 | @import '_bootstrap-extended/modal'; 20 | @import '_bootstrap-extended/progress'; 21 | @import '_bootstrap-extended/breadcrumb'; 22 | @import '_bootstrap-extended/list-group'; 23 | @import '_bootstrap-extended/navbar'; 24 | @import '_bootstrap-extended/card'; 25 | @import '_bootstrap-extended/accordion'; 26 | @import '_bootstrap-extended/close'; 27 | @import '_bootstrap-extended/toasts'; 28 | @import '_bootstrap-extended/carousel'; 29 | @import '_bootstrap-extended/spinners'; 30 | @import '_bootstrap-extended/offcanvas'; 31 | 32 | // Common Utilities 33 | @import 'bootstrap/scss/utilities/api'; 34 | 35 | // LTR Utilities 36 | @include ltr-only { 37 | @import '_bootstrap-extended/utilities-ltr'; 38 | @import 'bootstrap/scss/utilities/api'; 39 | } 40 | -------------------------------------------------------------------------------- /src/scss/_bootstrap-extended/_alert.scss: -------------------------------------------------------------------------------- 1 | // Alerts 2 | // ******************************************************************************* 3 | 4 | // Alert mixins 5 | @each $state, $value in $theme-colors { 6 | @if $state != primary and $state != light { 7 | @include template-alert-variant('.alert-#{$state}', $value); 8 | } 9 | } 10 | 11 | // Adjust close link position 12 | .alert-dismissible { 13 | .btn-close { 14 | padding: $alert-padding-y * 1.375 $alert-padding-x; 15 | } 16 | } 17 | 18 | // Alert and alert-icon styles 19 | .alert { 20 | line-height: 1.375rem; 21 | .alert-icon { 22 | color: $white; 23 | height: $alert-icon-size; 24 | width: $alert-icon-size; 25 | padding: $spacer * 0.75; 26 | margin-right: $spacer; 27 | display: flex; 28 | align-items: center; 29 | justify-content: center; 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/scss/_bootstrap-extended/_badge.scss: -------------------------------------------------------------------------------- 1 | // Badges 2 | // ? Bootstrap use bg-label-variant and bg color for solid and label style, hence we have not created mixin for that. 3 | // ******************************************************************************* 4 | 5 | .badge { 6 | line-height: $line-height-base; 7 | } 8 | // Badge Center Style 9 | 10 | .badge-center { 11 | padding: 3px; 12 | line-height: 1.375; 13 | @include badge-size($badge-height, $badge-width, $badge-center-font-size); 14 | i { 15 | font-size: 0.8rem; 16 | &::before { 17 | font-size: 0.8rem; 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/scss/_bootstrap-extended/_breadcrumb.scss: -------------------------------------------------------------------------------- 1 | // Breadcrumbs 2 | // ******************************************************************************* 3 | 4 | .breadcrumb-item, 5 | .breadcrumb-item a { 6 | color: $breadcrumb-color; 7 | line-height: $line-height-lg; 8 | &:hover, 9 | &:focus { 10 | color: $breadcrumb-active-color; 11 | } 12 | } 13 | 14 | .breadcrumb-item.active a { 15 | &, 16 | &:hover, 17 | &:focus, 18 | &:active { 19 | color: inherit; 20 | } 21 | } 22 | 23 | // Breadcrumb divider styles 24 | .breadcrumb-style1, 25 | .breadcrumb-style2 { 26 | .breadcrumb-item + .breadcrumb-item::before { 27 | font-family: 'remixicon'; 28 | } 29 | } 30 | .breadcrumb-style1 .breadcrumb-item + .breadcrumb-item::before { 31 | content: '\EA6E'; 32 | } 33 | .breadcrumb-style2 .breadcrumb-item + .breadcrumb-item::before { 34 | content: '\EA68'; 35 | } 36 | -------------------------------------------------------------------------------- /src/scss/_bootstrap-extended/_button-group.scss: -------------------------------------------------------------------------------- 1 | // Button groups 2 | // ******************************************************************************* 3 | 4 | // * Split button 5 | // ******************************************************************************* 6 | 7 | .btn-group { 8 | .btn { 9 | box-shadow: none !important; 10 | } 11 | } 12 | 13 | .dropdown-toggle-split, 14 | .btn-lg + .dropdown-toggle-split, 15 | .btn-group-lg > .btn + .dropdown-toggle-split, 16 | .input-group-lg .btn + .dropdown-toggle-split, 17 | .btn-xl + .dropdown-toggle-split, 18 | .btn-group-xl > .btn + .dropdown-toggle-split { 19 | padding: 0.92em; 20 | } 21 | 22 | .btn-sm + .dropdown-toggle-split, 23 | .btn-group-sm > .btn + .dropdown-toggle-split, 24 | .input-group-sm .btn + .dropdown-toggle-split { 25 | padding: 0.8em; 26 | } 27 | 28 | .btn-xs + .dropdown-toggle-split, 29 | .btn-group-xs > .btn + .dropdown-toggle-split { 30 | padding: 0.7em; 31 | } 32 | 33 | // * Sizing 34 | // ******************************************************************************* 35 | 36 | .btn-group-xs > .btn { 37 | @extend .btn-xs; 38 | } 39 | 40 | .btn-group-xl > .btn { 41 | @extend .btn-xl; 42 | } 43 | 44 | // Button groups border 45 | 46 | .btn-group > .btn-group:first-child > .btn:not([class*='btn-outline-']):first-child, 47 | .input-group > .btn:not([class*='btn-outline-']):first-child, 48 | :not(.btn-group):not(.input-group) > .btn-group > .btn:not([class*='btn-outline-']):first-child, 49 | .input-group > .btn-group:first-child > .btn:not([class*='btn-outline-']):first-child { 50 | border-left-color: transparent !important; 51 | } 52 | 53 | .btn-group > .btn-group:last-child > .btn:not([class*='btn-outline-']):last-of-type, 54 | .input-group > .btn:not([class*='btn-outline-']):last-of-type, 55 | :not(.btn-group):not(.input-group) > .btn-group > .btn:not([class*='btn-outline-']):last-of-type, 56 | .input-group > .btn-group:last-child > .btn:not([class*='btn-outline-']):last-of-type { 57 | border-right-color: transparent !important; 58 | } 59 | -------------------------------------------------------------------------------- /src/scss/_bootstrap-extended/_carousel.scss: -------------------------------------------------------------------------------- 1 | // Carousel 2 | // ******************************************************************************* 3 | 4 | // 5 | .carousel { 6 | .carousel-item.active, 7 | .carousel-item.carousel-item-start { 8 | h1, 9 | .h1, 10 | h2, 11 | .h2, 12 | h3, 13 | .h3, 14 | h4, 15 | .h4, 16 | h5, 17 | .h5, 18 | h6, 19 | .h6 { 20 | color: $carousel-caption-color; 21 | } 22 | } 23 | } 24 | .carousel.carousel-dark { 25 | .carousel-item.active, 26 | .carousel-item.carousel-item-start { 27 | h1, 28 | .h1, 29 | h2, 30 | .h2, 31 | h3, 32 | .h3, 33 | h4, 34 | .h4, 35 | h5, 36 | .h5, 37 | h6, 38 | .h6 { 39 | color: $carousel-dark-caption-color; 40 | } 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /src/scss/_bootstrap-extended/_close.scss: -------------------------------------------------------------------------------- 1 | // Close buttons 2 | // ******************************************************************************* 3 | 4 | .close:focus { 5 | outline: 0; 6 | } 7 | -------------------------------------------------------------------------------- /src/scss/_bootstrap-extended/_dropdown.scss: -------------------------------------------------------------------------------- 1 | // Dropdowns 2 | // ***************************************************************** 3 | 4 | // On hover outline 5 | [data-trigger='hover'] { 6 | outline: 0; 7 | } 8 | 9 | .dropdown-menu { 10 | box-shadow: $dropdown-box-shadow; 11 | 12 | // Mega dropdown inside the dropdown menu 13 | .mega-dropdown > & { 14 | left: 0 !important; 15 | right: 0 !important; 16 | } 17 | 18 | // Badge within dropdown menu 19 | .badge[class^='float-'], 20 | .badge[class*=' float-'] { 21 | position: relative; 22 | top: 0.071em; 23 | } 24 | } 25 | 26 | // Dropdown item line height 27 | .dropdown-item { 28 | &.active .waves-ripple, 29 | &.disabled .waves-ripple { 30 | display: none; 31 | } 32 | } 33 | 34 | // Hidden dropdown toggle arrow 35 | .dropdown-toggle.hide-arrow, 36 | .dropdown-toggle-hide-arrow > .dropdown-toggle { 37 | &::before, 38 | &::after { 39 | display: none; 40 | } 41 | } 42 | 43 | // Dropdown caret icon 44 | 45 | @if $enable-caret { 46 | .dropstart .dropdown-toggle::before, 47 | .dropend .dropdown-toggle::after { 48 | vertical-align: $caret-vertical-align; 49 | } 50 | .dropdown-toggle-split::after { 51 | margin-left: 0 !important; 52 | } 53 | .dropdown-toggle::after { 54 | margin-top: -0.278rem; 55 | margin-left: 0.8em; 56 | width: 0.55em; 57 | height: 0.55em; 58 | border: 2px solid; 59 | border-top: 0; 60 | border-left: 0; 61 | transform: rotate(45deg); 62 | } 63 | 64 | .dropup .dropdown-toggle::after { 65 | margin-top: 0.25rem; 66 | margin-left: 0.667em; 67 | border: 2px solid; 68 | border-bottom: 0; 69 | border-left: 0; 70 | transform: rotate(-45deg); 71 | } 72 | 73 | .dropend .dropdown-toggle::after { 74 | margin-top: 0; 75 | margin-left: 0.667em; 76 | border: 2px solid; 77 | border-top: 0; 78 | border-left: 0; 79 | transform: rotate(-45deg); 80 | } 81 | 82 | .dropstart .dropdown-toggle::before { 83 | margin-top: 0; 84 | margin-right: 0.667em; 85 | width: 0.55em; 86 | height: 0.55em; 87 | border: 2px solid; 88 | border-top: 0; 89 | border-right: 0; 90 | transform: rotate(45deg); 91 | } 92 | } 93 | -------------------------------------------------------------------------------- /src/scss/_bootstrap-extended/_forms.scss: -------------------------------------------------------------------------------- 1 | // Forms 2 | // ***************************************************************** 3 | 4 | @import 'forms/labels'; 5 | @import 'forms/form-control'; 6 | @import 'forms/form-select'; 7 | @import 'forms/form-check'; 8 | @import 'forms/form-range'; 9 | @import 'forms/input-group'; 10 | @import 'forms/floating-labels'; 11 | @import 'forms/validation'; 12 | -------------------------------------------------------------------------------- /src/scss/_bootstrap-extended/_include.scss: -------------------------------------------------------------------------------- 1 | //Functions 2 | @import 'bootstrap/scss/functions'; // Bootstrap core functions 3 | @import 'functions'; // Bootstrap extended functions 4 | 5 | //Variables 6 | @import '../_custom-variables/bootstrap-extended'; // Bootstrap extended custom variable (for customization purpose) 7 | @import 'variables'; // Bootstrap extended variable 8 | @import 'bootstrap/scss/variables'; // Bootstrap core variable 9 | @import 'bootstrap/scss/maps'; // Bootstrap core variable 10 | 11 | //Mixins 12 | @import 'bootstrap/scss/mixins'; // Bootstrap core mixins 13 | @import 'mixins'; // Bootstrap extended mixins 14 | -------------------------------------------------------------------------------- /src/scss/_bootstrap-extended/_list-group.scss: -------------------------------------------------------------------------------- 1 | // List groups 2 | // ******************************************************************************* 3 | 4 | // List Group Mixin 5 | @each $color, $value in $theme-colors { 6 | @if $color != primary and $color != light { 7 | @include template-list-group-item-variant('.list-group-item-#{$color}', $value); 8 | } 9 | } 10 | .list-group { 11 | .list-group-item-action { 12 | &:not(.active) { 13 | &:active { 14 | color: $list-group-color; 15 | background-color: $list-group-hover-bg !important; 16 | } 17 | } 18 | } 19 | .list-group-item { 20 | line-height: 1.375rem; 21 | padding-bottom: calc($list-group-item-padding-y - 1px); 22 | } 23 | &:not([class*='list-group-flush']) .list-group-item:first-of-type { 24 | padding-top: calc($list-group-item-padding-y - 1px); 25 | } 26 | &[class*='list-group-flush'] .list-group-item:last-of-type { 27 | padding-bottom: $list-group-item-padding-y; 28 | } 29 | &[class*='list-group-horizontal-md'] .list-group-item { 30 | @include media-breakpoint-up(md) { 31 | padding-top: calc($list-group-item-padding-y - 1px); 32 | } 33 | } 34 | } 35 | 36 | .list-group { 37 | // Timeline CSS 38 | &.list-group-timeline { 39 | position: relative; 40 | &:before { 41 | background-color: $border-color; 42 | position: absolute; 43 | content: ''; 44 | width: 1px; 45 | height: 100%; 46 | top: 0; 47 | bottom: 0; 48 | left: 0.2rem; 49 | } 50 | .list-group-item { 51 | border: none; 52 | padding-left: 1.25rem; 53 | &:before { 54 | position: absolute; 55 | display: block; 56 | content: ''; 57 | width: 7px; 58 | height: 7px; 59 | left: 0; 60 | top: 50%; 61 | margin-top: -3.5px; 62 | border-radius: 100%; 63 | } 64 | } 65 | } 66 | 67 | .list-group-item.active { 68 | h1, 69 | .h1, 70 | h2, 71 | .h2, 72 | h3, 73 | .h3, 74 | h4, 75 | .h4, 76 | h5, 77 | .h5, 78 | h6, 79 | .h6 { 80 | color: $list-group-action-active-color; 81 | } 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /src/scss/_bootstrap-extended/_mixins.scss: -------------------------------------------------------------------------------- 1 | // Mixins 2 | // 3 | // Template mixins (custom and overrides) 4 | @import 'mixins/alert'; 5 | @import 'mixins/badge'; 6 | @import 'mixins/buttons'; 7 | @import 'mixins/list-group'; 8 | @import 'mixins/navs'; 9 | @import 'mixins/pagination'; 10 | @import 'mixins/progress'; 11 | @import 'mixins/toasts'; 12 | @import 'mixins/dropdown'; 13 | @import 'mixins/forms'; 14 | @import 'mixins/table-variants'; 15 | @import 'mixins/misc'; // layout, text directions & colors 16 | -------------------------------------------------------------------------------- /src/scss/_bootstrap-extended/_navbar.scss: -------------------------------------------------------------------------------- 1 | // Navbar 2 | // ******************************************************************************* 3 | 4 | .navbar { 5 | z-index: 2; 6 | // ! Fix: navbar dropdown focus outline 7 | .dropdown:focus, 8 | .dropdown-toggle:focus { 9 | outline: 0; 10 | } 11 | .navbar-toggler:focus { 12 | box-shadow: none; 13 | } 14 | } 15 | 16 | .fixed-top { 17 | z-index: $zindex-fixed; 18 | } 19 | 20 | .navbar.navbar-light { 21 | color: $navbar-light-color; 22 | } 23 | 24 | .navbar-light .navbar-nav .nav-link.disabled { 25 | color: $navbar-light-disabled-color !important; 26 | } 27 | 28 | .navbar.navbar-dark { 29 | color: $navbar-dark-color; 30 | } 31 | 32 | .navbar-dark .navbar-nav .nav-link.disabled { 33 | color: $navbar-dark-disabled-color !important; 34 | } 35 | .navbar-nav { 36 | --#{$prefix}nav-link-padding-y: calc(#{$spacer} / 2); 37 | } 38 | 39 | // IE fix 40 | .navbar-collapse, 41 | .navbar-brand, 42 | .navbar-text { 43 | flex-shrink: 1; 44 | } 45 | 46 | // Icons 47 | // .navbar-icon { 48 | // font-size: 130%; 49 | // } 50 | 51 | // Rulers 52 | .navbar-dark hr { 53 | border-color: rgba(255, 255, 255, 0.1); 54 | } 55 | 56 | .navbar-light hr { 57 | border-color: $gray-100; 58 | } 59 | -------------------------------------------------------------------------------- /src/scss/_bootstrap-extended/_offcanvas.scss: -------------------------------------------------------------------------------- 1 | // Offcanvas 2 | // ******************************************************************************* 3 | 4 | .offcanvas { 5 | box-shadow: $offcanvas-box-shadow; 6 | } 7 | -------------------------------------------------------------------------------- /src/scss/_bootstrap-extended/_popover.scss: -------------------------------------------------------------------------------- 1 | // Popovers 2 | // ******************************************************************************* 3 | 4 | .modal-open .popover { 5 | z-index: $zindex-modal + 1; 6 | } 7 | 8 | .popover { 9 | box-shadow: $popover-box-shadow; 10 | 11 | // Popover header padding and font-size 12 | .popover-header { 13 | padding-bottom: 0; 14 | font-size: $h5-font-size; 15 | } 16 | 17 | // Popover body padding 18 | .popover-body { 19 | padding-top: $spacer; 20 | } 21 | 22 | .popover-arrow { 23 | z-index: 1; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/scss/_bootstrap-extended/_progress.scss: -------------------------------------------------------------------------------- 1 | // Progress 2 | // ******************************************************************************* 3 | 4 | .progress { 5 | .progress-bar:last-child { 6 | border-top-right-radius: $progress-border-radius; 7 | border-bottom-right-radius: $progress-border-radius; 8 | } 9 | .progress-bar:first-child { 10 | border-top-left-radius: $progress-border-radius; 11 | border-bottom-left-radius: $progress-border-radius; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/scss/_bootstrap-extended/_reboot.scss: -------------------------------------------------------------------------------- 1 | // Reboot 2 | // 3 | 4 | b, 5 | strong { 6 | font-weight: $font-weight-bold; 7 | } 8 | 9 | a:not([href]) { 10 | color: inherit; 11 | text-decoration: none; 12 | 13 | &:hover { 14 | color: inherit; 15 | text-decoration: none; 16 | } 17 | } 18 | 19 | //! Fix: Autofill input bg and text color issue on different OS and browsers 20 | input:-webkit-autofill, 21 | input:-webkit-autofill:hover, 22 | input:-webkit-autofill:focus, 23 | textarea:-webkit-autofill, 24 | textarea:-webkit-autofill:hover, 25 | textarea:-webkit-autofill:focus, 26 | select:-webkit-autofill, 27 | select:-webkit-autofill:hover, 28 | select:-webkit-autofill:focus, 29 | input:-internal-autofill-selected { 30 | background-clip: text !important; 31 | -webkit-background-clip: text !important; 32 | } 33 | 34 | h1 { 35 | line-height: $h1-line-height; 36 | } 37 | 38 | h2 { 39 | line-height: $h2-line-height; 40 | } 41 | 42 | h3 { 43 | line-height: $h3-line-height; 44 | } 45 | 46 | h4 { 47 | line-height: $h4-line-height; 48 | } 49 | 50 | h5 { 51 | line-height: $h5-line-height; 52 | } 53 | 54 | h6 { 55 | line-height: $h6-line-height; 56 | } 57 | -------------------------------------------------------------------------------- /src/scss/_bootstrap-extended/_root.scss: -------------------------------------------------------------------------------- 1 | // The color-scheme CSS property https://web.dev/color-scheme/ 2 | :root { 3 | color-scheme: #{$color-scheme}; 4 | } 5 | -------------------------------------------------------------------------------- /src/scss/_bootstrap-extended/_spinners.scss: -------------------------------------------------------------------------------- 1 | // Spinners 2 | // 3 | 4 | //Large size 5 | .spinner-border-lg { 6 | width: $spinner-width-lg; 7 | height: $spinner-height-lg; 8 | border-width: $spinner-border-width-lg; 9 | } 10 | 11 | .spinner-grow-lg { 12 | width: $spinner-width-lg; 13 | height: $spinner-height-lg; 14 | border-width: $spinner-border-width-lg; 15 | } 16 | 17 | // * Within button 18 | // ******************************************************************************* 19 | 20 | .btn { 21 | .spinner-border, 22 | .spinner-grow { 23 | position: relative; 24 | top: -0.0625rem; 25 | height: 1em; 26 | width: 1em; 27 | } 28 | 29 | .spinner-border { 30 | border-width: 0.15em; 31 | } 32 | } 33 | 34 | @include keyframes('spinner-border-rtl') { 35 | to { 36 | transform: rotate(-360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/scss/_bootstrap-extended/_tables.scss: -------------------------------------------------------------------------------- 1 | // Tables 2 | // ********************************************************************************/ 3 | 4 | @each $color, $value in $table-variants { 5 | @if $color != primary { 6 | @include template-table-variant($color, $value); 7 | } 8 | } 9 | 10 | // Firefox fix for table head border bottom 11 | .table { 12 | > :not(caption) > * > * { 13 | background-clip: padding-box; 14 | } 15 | tr { 16 | > td { 17 | .dropdown { 18 | position: static; 19 | } 20 | } 21 | } 22 | caption { 23 | padding: $table-cell-padding-y $table-cell-padding-x; 24 | } 25 | &.table-sm { 26 | thead tr th { 27 | padding-block: $table-head-padding-y-sm; 28 | } 29 | } 30 | // Table heading style 31 | th { 32 | text-transform: uppercase; 33 | font-size: $font-size-sm; 34 | letter-spacing: 0.2px; 35 | color: $table-th-color; 36 | } 37 | thead tr th { 38 | border-bottom-color: $table-header-bg-color; 39 | padding-block: $table-head-padding-y; 40 | } 41 | // heading background color except .table-dark and .table-light 42 | &:not(.table-dark):not(.table-light) thead:not(.table-dark):not(.table-light) tr th { 43 | background-color: $table-header-bg-color; 44 | } 45 | } 46 | 47 | // Style for table inside card 48 | .card { 49 | .table { 50 | margin-bottom: 0; 51 | } 52 | } 53 | @supports (-moz-appearance: none) { 54 | .table { 55 | .dropdown-menu.show { 56 | display: inline-table; 57 | } 58 | } 59 | } 60 | 61 | .table-dark th { 62 | color: var(--#{$prefix}table-color); 63 | } 64 | .table-border-bottom-0 { 65 | tr:last-child { 66 | td, 67 | th { 68 | border-bottom-width: 0; 69 | } 70 | } 71 | } 72 | 73 | // Dark Table icon button 74 | .table.table-dark .btn.btn-icon { 75 | color: $table-border-color; 76 | } 77 | 78 | // class for to remove table border bottom 79 | .table-border-bottom-0 { 80 | tr:last-child { 81 | td, 82 | th { 83 | border-bottom-width: 0; 84 | } 85 | } 86 | } 87 | 88 | // .table { 89 | // .btn-group { 90 | // display: block; 91 | // } 92 | // } 93 | 94 | // Flush spacing of left from first column ans right from last column 95 | .table.table-flush-spacing { 96 | thead, 97 | tbody { 98 | tr > td:first-child { 99 | padding-left: 0; 100 | } 101 | tr > td:last-child { 102 | padding-right: 0; 103 | } 104 | } 105 | } 106 | 107 | // * Table inside card 108 | // ******************************************************************************* 109 | 110 | // .card, 111 | .nav-align-top, 112 | .nav-align-right, 113 | .nav-align-bottom, 114 | .nav-align-left { 115 | .table:not(.table-dark), 116 | .table:not(.table-dark) thead:not(.table-dark) th, 117 | .table:not(.table-dark) tfoot:not(.table-dark) th, 118 | .table:not(.table-dark) td { 119 | border-color: $border-inner-color; 120 | } 121 | } 122 | -------------------------------------------------------------------------------- /src/scss/_bootstrap-extended/_toasts.scss: -------------------------------------------------------------------------------- 1 | // Toasts 2 | // ******************************************************************************* 3 | 4 | .bs-toast[class^='bg-'], 5 | .bs-toast[class*=' bg-'] { 6 | border: none; 7 | } 8 | 9 | .toast.bs-toast { 10 | z-index: $zindex-toast; 11 | } 12 | .toast-header { 13 | border-bottom: $border-width solid $toast-header-border-color; 14 | .btn-close { 15 | background-image: str-replace(str-replace($btn-close-bg, '#{$btn-close-color}', $text-muted), '#', '%23'); 16 | padding-top: 0; 17 | padding-bottom: 0; 18 | margin-left: 0.875rem; 19 | background-size: 0.75rem; 20 | } 21 | } 22 | .toast-container { 23 | --#{$prefix}toast-zindex: 9; 24 | } 25 | // Bootstrap Toasts Example 26 | .toast-ex { 27 | position: fixed; 28 | top: 4.1rem; 29 | right: 0.5rem; 30 | } 31 | // Placement Toast example 32 | .toast-placement-ex { 33 | position: fixed; 34 | } 35 | -------------------------------------------------------------------------------- /src/scss/_bootstrap-extended/_tooltip.scss: -------------------------------------------------------------------------------- 1 | // Tooltips 2 | // ******************************************************************************* 3 | 4 | // Open modal tooltip z-index 5 | .modal-open .tooltip { 6 | z-index: $zindex-modal + 2; 7 | } 8 | -------------------------------------------------------------------------------- /src/scss/_bootstrap-extended/_type.scss: -------------------------------------------------------------------------------- 1 | // Type 2 | // 3 | -------------------------------------------------------------------------------- /src/scss/_bootstrap-extended/forms/_form-check.scss: -------------------------------------------------------------------------------- 1 | // Checkboxes and Radios 2 | // ******************************************************************************* 3 | .form-check-input { 4 | cursor: $form-check-label-cursor; 5 | &:disabled { 6 | background-color: $form-check-input-disabled-bg; 7 | border-color: $form-check-input-disabled-bg; 8 | } 9 | &:checked { 10 | box-shadow: $box-shadow-xs; 11 | } 12 | } 13 | 14 | .form-check { 15 | position: relative; 16 | } 17 | 18 | // Only for checkbox and radio (not for bs default switch) 19 | //? .dt-checkboxes-cell class is used for DataTables checkboxes 20 | .form-check:not(.form-switch), 21 | .dt-checkboxes-cell { 22 | // Material shadow 23 | .form-check-input { 24 | position: relative; 25 | transition: all 0.2s; 26 | &::after { 27 | content: ''; 28 | position: absolute; 29 | top: -(px-to-rem(floor(rem-to-px(((($line-height-base * $font-size-base) - 1.125rem) * 0.5))))); 30 | left: -2px; 31 | z-index: 1; 32 | display: block; 33 | width: $form-check-input-width; 34 | height: $form-check-input-width; 35 | border-radius: 50%; 36 | opacity: 0; 37 | transition: all 0.2s; 38 | transform-origin: center; 39 | transform: scale(0) translateZ(0); 40 | } 41 | } 42 | 43 | // Checkbox and Radio bg size for animation transition 44 | .form-check-input[type='checkbox'] { 45 | background-size: 1.1rem; 46 | &:not(:checked):not(:indeterminate) { 47 | background-size: 0rem; 48 | } 49 | &:indeterminate { 50 | box-shadow: $box-shadow-xs; 51 | } 52 | } 53 | .form-check-input[type='radio'] { 54 | background-size: 1.3125rem; 55 | &:not(:checked) { 56 | background-size: 0.75rem; 57 | } 58 | } 59 | // Material shadow display on hover & active 60 | .form-check-input { 61 | &:active, 62 | &:hover { 63 | &::after { 64 | opacity: 1; 65 | transform: scale(2) translateZ(0); 66 | } 67 | } 68 | 69 | &:disabled, 70 | &[disabled] { 71 | &::after { 72 | display: none; 73 | } 74 | } 75 | } 76 | } 77 | 78 | // Switches 79 | // ******************************************************************************* 80 | 81 | .form-switch .form-check-input { 82 | background-color: $form-switch-bg; 83 | border: none; 84 | box-shadow: $form-switch-box-shadow; 85 | &:focus { 86 | box-shadow: $form-switch-box-shadow; 87 | } 88 | } 89 | -------------------------------------------------------------------------------- /src/scss/_bootstrap-extended/forms/_form-control.scss: -------------------------------------------------------------------------------- 1 | // Form control 2 | // ******************************************************************************* 3 | 4 | //? Form control (all size) padding calc due to border increase on focus 5 | .form-control { 6 | padding: calc($input-padding-y - $input-border-width) calc($input-padding-x - $input-border-width); 7 | // border color on hover state 8 | &:hover { 9 | &:not([disabled]):not([focus]) { 10 | border-color: $input-border-hover-color; 11 | } 12 | } 13 | 14 | &:focus { 15 | border-width: $input-focus-border-width; 16 | padding: calc($input-padding-y - $input-focus-border-width) calc($input-padding-x - $input-focus-border-width); 17 | } 18 | &.form-control-lg { 19 | padding: calc($input-padding-y-lg - $input-border-width) calc($input-padding-x-lg - $input-border-width); 20 | &:focus { 21 | padding: calc($input-padding-y-lg - $input-focus-border-width) 22 | calc($input-padding-x-lg - $input-focus-border-width); 23 | } 24 | } 25 | &.form-control-sm { 26 | padding: calc($input-padding-y-sm - $input-border-width) calc($input-padding-x-sm - $input-border-width); 27 | &:focus { 28 | padding: calc($input-padding-y-sm - $input-focus-border-width) 29 | calc($input-padding-x-sm - $input-focus-border-width); 30 | } 31 | } 32 | } 33 | .input-group:has(button) .form-control { 34 | padding: calc($input-padding-y - $input-border-width) calc($input-padding-x - $input-border-width) !important; 35 | border-width: $input-border-width !important; 36 | } 37 | -------------------------------------------------------------------------------- /src/scss/_bootstrap-extended/forms/_form-range.scss: -------------------------------------------------------------------------------- 1 | // Range select 2 | // ******************************************************************************* 3 | 4 | .form-range { 5 | // Chrome specific 6 | &::-webkit-slider-thumb { 7 | box-shadow: $form-range-thumb-box-shadow; 8 | } 9 | 10 | // Mozilla specific 11 | &::-moz-range-thumb { 12 | box-shadow: $form-range-thumb-box-shadow; 13 | } 14 | &:disabled { 15 | &::-webkit-slider-runnable-track { 16 | background-color: $form-range-track-disabled-bg; 17 | } 18 | 19 | &::-moz-range-track { 20 | background-color: $form-range-track-disabled-bg; 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/scss/_bootstrap-extended/forms/_form-select.scss: -------------------------------------------------------------------------------- 1 | // Select 2 | // ******************************************************************************* 3 | 4 | .form-select { 5 | background-clip: padding-box; 6 | &:hover { 7 | &:not([disabled]):not([focus]) { 8 | border-color: $input-border-hover-color; 9 | } 10 | } 11 | &:disabled { 12 | background-image: escape-svg($form-select-disabled-indicator); 13 | } 14 | @include ltr-style { 15 | padding: calc($form-select-padding-y - $form-select-border-width) 16 | calc($form-select-padding-x * 3 - $form-select-border-width) 17 | calc($form-select-padding-y - $form-select-border-width) calc($form-select-padding-x - $form-select-border-width); 18 | } 19 | &:focus { 20 | border-width: $input-focus-border-width; 21 | @include ltr-style { 22 | padding: calc($form-select-padding-y - $input-focus-border-width) 23 | calc($form-select-padding-x * 3 - $input-focus-border-width) 24 | calc($form-select-padding-y - $input-focus-border-width) 25 | calc($form-select-padding-x - $input-focus-border-width); 26 | } 27 | background-position: right calc($input-padding-x - 1px) center; 28 | } 29 | &.form-select-lg { 30 | min-height: $input-height-lg; 31 | background-size: 24px 24px; 32 | @include ltr-style { 33 | padding: calc($form-select-padding-y-lg - $form-select-border-width) 34 | calc($form-select-padding-x-lg * 3 - $form-select-border-width) 35 | calc($form-select-padding-y-lg - $form-select-border-width) 36 | calc($form-select-padding-x-lg - $form-select-border-width); 37 | } 38 | &:focus { 39 | @include ltr-style { 40 | padding: calc($form-select-padding-y-lg - $input-focus-border-width) 41 | calc($form-select-padding-x-lg * 3 - $input-focus-border-width) 42 | calc($form-select-padding-y-lg - $input-focus-border-width) 43 | calc($form-select-padding-x-lg - $input-focus-border-width); 44 | } 45 | background-position: right calc($input-padding-x - 1px) center; 46 | } 47 | } 48 | &.form-select-sm { 49 | min-height: $input-height-sm; 50 | background-size: 20px 20px; 51 | @include ltr-style { 52 | padding: calc($form-select-padding-y-sm - $form-select-border-width) 53 | calc($form-select-padding-x-sm * 3 - $form-select-border-width) 54 | calc($form-select-padding-y-sm - $form-select-border-width) 55 | calc($form-select-padding-x-sm - $form-select-border-width); 56 | } 57 | &:focus { 58 | @include ltr-style { 59 | padding: calc($form-select-padding-y-sm - $input-focus-border-width) 60 | calc($form-select-padding-x-sm * 3 - $input-focus-border-width) 61 | calc($form-select-padding-y-sm - $input-focus-border-width) 62 | calc($form-select-padding-x-sm - $input-focus-border-width); 63 | } 64 | background-position: right calc($input-padding-x - 1px) center; 65 | } 66 | // background-size: 14px 11px; 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /src/scss/_bootstrap-extended/forms/_labels.scss: -------------------------------------------------------------------------------- 1 | // Labels 2 | // ******************************************************************************* 3 | 4 | .form-label, 5 | .col-form-label { 6 | text-transform: $form-label-text-transform; 7 | letter-spacing: $form-label-letter-spacing; 8 | color: $headings-color; 9 | } 10 | // Default (vertical ) form label size 11 | .form-label-lg { 12 | @include font-size($input-font-size-lg); 13 | } 14 | 15 | .form-label-sm { 16 | @include font-size($input-font-size-sm); 17 | } 18 | -------------------------------------------------------------------------------- /src/scss/_bootstrap-extended/forms/_validation.scss: -------------------------------------------------------------------------------- 1 | // Validation states 2 | // ******************************************************************************* 3 | -------------------------------------------------------------------------------- /src/scss/_bootstrap-extended/mixins/_alert.scss: -------------------------------------------------------------------------------- 1 | // Alerts 2 | // ******************************************************************************* 3 | 4 | @mixin alert-variant($background: null, $border: null, $color: null) { 5 | } 6 | 7 | // Basic Alerts 8 | @mixin template-alert-variant($parent, $background) { 9 | $border: if( 10 | $dark-style, 11 | shift-color($background, -$alert-border-scale, $card-bg), 12 | shift-color($background, $alert-border-scale, $card-bg) 13 | ); 14 | $color: $background; 15 | $background: if( 16 | $dark-style, 17 | shade-color($background, $alert-bg-scale, $card-bg), 18 | tint-color($background, $alert-bg-tint-scale, $card-bg) 19 | ); 20 | 21 | #{$parent} { 22 | @include gradient-bg($background); 23 | border-color: $border; 24 | color: $color; 25 | .btn-close { 26 | background-image: str-replace(str-replace($btn-close-bg, '#{$btn-close-color}', $color), '#', '%23'); 27 | } 28 | 29 | .alert-link { 30 | color: $color; 31 | } 32 | } 33 | 34 | #{$parent} { 35 | hr { 36 | background-color: $color !important; 37 | } 38 | .alert-icon { 39 | background-color: $color; 40 | } 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /src/scss/_bootstrap-extended/mixins/_badge.scss: -------------------------------------------------------------------------------- 1 | // Badges 2 | // ******************************************************************************* 3 | 4 | // Size 5 | @mixin badge-size($badge-height, $badge-width, $badge-font-size) { 6 | height: $badge-height; 7 | width: $badge-width; 8 | @include font-size($badge-font-size); 9 | } 10 | -------------------------------------------------------------------------------- /src/scss/_bootstrap-extended/mixins/_caret.scss: -------------------------------------------------------------------------------- 1 | // * Carets 2 | // ******************************************************************************* 3 | 4 | @mixin caret-up($caret-width) { 5 | margin-top: -0; 6 | width: $caret-width; 7 | height: $caret-width; 8 | border: 1px solid; 9 | border-bottom: 0; 10 | border-left: 0; 11 | transform: rotate(-45deg); 12 | } 13 | 14 | @mixin caret-down($caret-width) { 15 | margin-top: -1 * divide($caret-width, 2); 16 | width: $caret-width; 17 | height: $caret-width; 18 | border: 1px solid; 19 | border-top: 0; 20 | border-left: 0; 21 | transform: rotate(45deg); 22 | } 23 | 24 | @mixin caret-left($caret-width) { 25 | margin-top: -1 * divide($caret-width, 2.5); 26 | width: $caret-width; 27 | height: $caret-width; 28 | border: 1px solid; 29 | border-top: 0; 30 | border-right: 0; 31 | transform: rotate(45deg); 32 | } 33 | 34 | @mixin caret-right($caret-width) { 35 | margin-top: -1 * divide($caret-width, 2.5); 36 | width: $caret-width; 37 | height: $caret-width; 38 | border: 1px solid; 39 | border-top: 0; 40 | border-left: 0; 41 | transform: rotate(-45deg); 42 | } 43 | -------------------------------------------------------------------------------- /src/scss/_bootstrap-extended/mixins/_dropdown.scss: -------------------------------------------------------------------------------- 1 | // * Dropdowns 2 | // ******************************************************************************* 3 | 4 | @mixin template-dropdown-variant($parent, $background, $color: null) { 5 | #{$parent} .dropdown-item { 6 | &.waves-effect { 7 | .waves-ripple { 8 | background: radial-gradient( 9 | rgba($color, 0.2) 0, 10 | rgba($color, 0.3) 40%, 11 | rgba($color, 0.4) 50%, 12 | rgba($color, 0.5) 60%, 13 | rgba($white, 0) 70% 14 | ); 15 | } 16 | } 17 | &:not(.disabled).active, 18 | &:not(.disabled):active { 19 | background-color: $background; 20 | color: if($color, $color, color-contrast($background)) !important; 21 | } 22 | } 23 | // ! Important: removed "!important" from the color css below for navbar notification dropdown button 24 | #{$parent}.dropdown-menu > li:not(.disabled) > a:not(.dropdown-item):active, 25 | #{$parent}.dropdown-menu > li.active:not(.disabled) > a:not(.dropdown-item) { 26 | background-color: $background; 27 | color: if($color, $color, color-contrast($background)); 28 | &.btn { 29 | color: color-contrast($background); 30 | } 31 | } 32 | } 33 | 34 | @mixin template-dropdown-theme($background, $color: null) { 35 | @include template-dropdown-variant('', $background, $color); 36 | } 37 | -------------------------------------------------------------------------------- /src/scss/_bootstrap-extended/mixins/_list-group.scss: -------------------------------------------------------------------------------- 1 | // List groups 2 | // ******************************************************************************* 3 | 4 | @mixin list-group-item-variant($state: null, $background: null, $color: null) { 5 | } 6 | 7 | // Basic List groups 8 | @mixin template-list-group-item-variant($parent, $background, $color: null) { 9 | $background-color: if( 10 | $dark-style, 11 | shift-color($background, -$list-group-item-bg-scale, $card-bg), 12 | shift-color($background, $list-group-item-bg-scale, $card-bg) 13 | ); 14 | $border-color: shift-color($background, $list-group-item-color-scale, $card-bg); 15 | $color: shift-color($background, $list-group-item-color-scale); 16 | $hover-background: shade-color($background-color, $list-group-item-bg-hover-scale); 17 | #{$parent} { 18 | border-color: $border-color; 19 | background-color: $background-color; 20 | color: $color !important; 21 | } 22 | 23 | a#{$parent}, 24 | button#{$parent} { 25 | color: $color; 26 | 27 | &.active { 28 | border-color: $background !important; 29 | background-color: $background !important; 30 | color: color-contrast($background) !important; 31 | } 32 | } 33 | } 34 | 35 | @mixin template-list-group-theme($background, $color: null) { 36 | @include template-list-group-item-variant('.list-group-item-primary', $background); 37 | 38 | .list-group-item.active { 39 | background-color: rgba-to-hex(rgba($background, 0.16), $rgba-to-hex-bg); 40 | color: $background; 41 | &.waves-effect { 42 | .waves-ripple { 43 | background: radial-gradient( 44 | rgba($background, 0.2) 0, 45 | rgba($background, 0.3) 40%, 46 | rgba($background, 0.4) 50%, 47 | rgba($background, 0.5) 60%, 48 | rgba($black, 0) 70% 49 | ); 50 | } 51 | } 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /src/scss/_bootstrap-extended/mixins/_misc.scss: -------------------------------------------------------------------------------- 1 | // * Light/Dark layout 2 | // ******************************************************************************* 3 | 4 | // * RTL/LTR 5 | // ******************************************************************************* 6 | 7 | @mixin ltr-only() { 8 | @if $rtl-support { 9 | html:not([dir='rtl']) { 10 | @content; 11 | } 12 | } @else { 13 | @content; 14 | } 15 | } 16 | 17 | @mixin ltr-style() { 18 | @if $rtl-support { 19 | html:not([dir='rtl']) & { 20 | @content; 21 | } 22 | } @else { 23 | @content; 24 | } 25 | } 26 | 27 | // * Keyframes 28 | // ******************************************************************************* 29 | 30 | @mixin keyframes($name) { 31 | @-webkit-keyframes #{$name} { 32 | @content; 33 | } 34 | 35 | @-moz-keyframes #{$name} { 36 | @content; 37 | } 38 | 39 | @keyframes #{$name} { 40 | @content; 41 | } 42 | } 43 | 44 | // * Colors 45 | // ******************************************************************************* 46 | 47 | @mixin bg-color-variant($parent, $color, $rth-color: #000) { 48 | #{$parent} { 49 | background-color: $color !important; 50 | } 51 | 52 | a#{$parent} { 53 | &:hover, 54 | &:focus { 55 | background-color: rgba-to-hex(rgba($color, 0.95), $background: $rth-color) !important; 56 | } 57 | } 58 | } 59 | 60 | @mixin bg-variant($parent, $color, $rth-color: #000) { 61 | @include bg-color-variant($parent, $color); 62 | } 63 | 64 | // BG Label 65 | @mixin bg-label-variant($parent, $background, $color: $background) { 66 | $label-background: if( 67 | $dark-style, 68 | shade-color($background, $btn-label-bg-shade-amount, $card-bg), 69 | tint-color($background, $btn-label-bg-tint-amount, $card-bg) 70 | ); 71 | #{$parent} { 72 | background-color: $label-background !important; 73 | color: if($color, $color, color-contrast($bg)) !important; 74 | } 75 | } 76 | 77 | @mixin text-variant($parent, $color) { 78 | #{$parent} { 79 | color: $color !important; 80 | } 81 | //! Fix: text-body hover color 82 | .text-body, 83 | .text-heading { 84 | &[href]:hover { 85 | color: shift-color($color, $link-shade-percentage) !important; 86 | } 87 | } 88 | } 89 | -------------------------------------------------------------------------------- /src/scss/_bootstrap-extended/mixins/_navs.scss: -------------------------------------------------------------------------------- 1 | // Navs 2 | // ******************************************************************************* 3 | 4 | @mixin template-nav-size($padding-y, $padding-x, $font-size, $line-height) { 5 | > .nav .nav-link, 6 | &.nav .nav-link { 7 | padding: $padding-y $padding-x; 8 | font-size: $font-size; 9 | line-height: $line-height; 10 | } 11 | } 12 | 13 | @mixin template-nav-variant($parent, $background, $color: null) { 14 | // .nav-link class hover theme color for basic nav 15 | .nav .nav-link { 16 | &:hover, 17 | &:focus { 18 | color: shift-color($background, $link-shade-percentage); 19 | } 20 | } 21 | 22 | $pills-selector: if($parent== '', '.nav-pills', '#{$parent}.nav-pills, #{$parent} > .nav-pills'); 23 | 24 | #{$pills-selector} .nav-link.active { 25 | &, 26 | &:hover, 27 | &:focus { 28 | background-color: $background; 29 | color: if($color, $color, color-contrast($background)); 30 | } 31 | } 32 | 33 | #{$parent}.nav-tabs { 34 | .nav-link { 35 | &.active { 36 | &, 37 | &:hover, 38 | &:focus { 39 | color: $background; 40 | } 41 | } 42 | &.waves-effect { 43 | .waves-ripple { 44 | background: radial-gradient( 45 | rgba($background, 0.2) 0, 46 | rgba($background, 0.3) 40%, 47 | rgba($background, 0.4) 50%, 48 | rgba($background, 0.5) 60%, 49 | rgba($white, 0) 70% 50 | ); 51 | } 52 | } 53 | } 54 | .tab-slider { 55 | background-color: $background; 56 | } 57 | } 58 | } 59 | 60 | @mixin template-nav-theme($background, $color: null) { 61 | @include template-nav-variant('', $background, $color); 62 | } 63 | -------------------------------------------------------------------------------- /src/scss/_bootstrap-extended/mixins/_pagination.scss: -------------------------------------------------------------------------------- 1 | // Pagination 2 | // ******************************************************************************* 3 | 4 | // Basic Pagination 5 | @mixin template-pagination-variant($parent, $background, $color: null) { 6 | $hover-background: if( 7 | $dark-style, 8 | shade-color($background, $pagination-hover-bg-scale, $rgba-to-hex-bg), 9 | tint-color($background, $pagination-hover-bg-scale, $rgba-to-hex-bg) 10 | ); 11 | #{$parent} .page-item .page-link, 12 | #{$parent}.pagination li > a:not(.page-link) { 13 | &:hover, 14 | &:focus { 15 | background-color: $hover-background; 16 | color: $background; 17 | } 18 | } 19 | #{$parent} .page-item.active .page-link, 20 | #{$parent}.pagination li.active > a:not(.page-link) { 21 | &, 22 | &:hover, 23 | &:focus, 24 | &:disabled, 25 | &.disabled { 26 | border-color: $background; 27 | background-color: $background; 28 | // @include gradient-bg($pagination-active-bg); 29 | color: if($color, $color, color-contrast($background)); 30 | } 31 | } 32 | #{$parent} .page-item .page-link, 33 | #{$parent}.pagination li > a:not(.page-link) { 34 | &.waves-effect { 35 | .waves-ripple { 36 | background: radial-gradient( 37 | rgba($background, 0.2) 0, 38 | rgba($background, 0.3) 40%, 39 | rgba($background, 0.4) 50%, 40 | rgba($background, 0.5) 60%, 41 | rgba($black, 0) 70% 42 | ); 43 | } 44 | } 45 | } 46 | } 47 | 48 | // Pagination Outline Variant 49 | @mixin template-pagination-outline-variant($parent, $background, $color: null) { 50 | #{$parent} .page-item.active .page-link, 51 | #{$parent}.pagination li.active > a:not(.page-link) { 52 | &, 53 | &:hover, 54 | &:focus { 55 | border-color: $background !important; 56 | color: $background !important; 57 | background-color: rgba-to-hex(rgba($background, 0.16), $rgba-to-hex-bg) !important; 58 | } 59 | &.waves-effect { 60 | .waves-ripple { 61 | background: radial-gradient( 62 | rgba($background, 0.2) 0, 63 | rgba($background, 0.3) 40%, 64 | rgba($background, 0.4) 50%, 65 | rgba($background, 0.5) 60%, 66 | rgba($black, 0) 70% 67 | ); 68 | } 69 | } 70 | } 71 | } 72 | 73 | @mixin template-pagination-theme($background, $color: null) { 74 | @include template-pagination-variant('', $background, $color); 75 | } 76 | -------------------------------------------------------------------------------- /src/scss/_bootstrap-extended/mixins/_progress.scss: -------------------------------------------------------------------------------- 1 | // Progress bars 2 | // ******************************************************************************* 3 | 4 | @mixin template-progress-bar-theme($background, $color: null) { 5 | .progress-bar { 6 | background-color: $background; 7 | } 8 | } 9 | 10 | @mixin template-progress-bar-shadow-variant($parent, $background-shadow) { 11 | $background-shadow: $background-shadow; 12 | } 13 | -------------------------------------------------------------------------------- /src/scss/_bootstrap-extended/mixins/_table-variants.scss: -------------------------------------------------------------------------------- 1 | // Tables 2 | // ******************************************************************************* 3 | 4 | @mixin template-table-variant($parent, $background, $layout-color: $white) { 5 | .table-#{$parent} { 6 | $color: color-contrast(opaque($body-bg, $background)); 7 | $hover-bg: mix($color, $background, percentage($table-hover-bg-factor)); 8 | $striped-bg: mix($color, $background, percentage($table-striped-bg-factor)); 9 | $active-bg: mix($color, $background, percentage($table-active-bg-factor)); 10 | 11 | --#{$variable-prefix}table-bg: #{$background}; 12 | --#{$variable-prefix}table-striped-bg: #{$striped-bg}; 13 | --#{$variable-prefix}table-striped-color: #{color-contrast($striped-bg)}; 14 | --#{$variable-prefix}table-active-bg: #{$active-bg}; 15 | --#{$variable-prefix}table-active-color: #{color-contrast($active-bg)}; 16 | --#{$variable-prefix}table-hover-bg: #{$hover-bg}; 17 | --#{$variable-prefix}table-hover-color: #{color-contrast($hover-bg)}; 18 | 19 | color: $color; 20 | border-color: mix($color, $background, percentage($table-border-factor)); 21 | .btn-icon, 22 | .btn { 23 | color: $color; 24 | } 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/scss/_bootstrap-extended/mixins/_toasts.scss: -------------------------------------------------------------------------------- 1 | // * Toast 2 | // ******************************************************************************* 3 | 4 | @mixin template-toast-variant($parent, $background, $color: null) { 5 | $label-color: if($color, $color, $background); 6 | $color: if($color, $color, color-contrast($background)); 7 | } 8 | 9 | @mixin template-toast-theme($parent, $background, $color: null) { 10 | @include template-toast-variant($parent, $background, $color); 11 | } 12 | -------------------------------------------------------------------------------- /src/scss/_bootstrap.scss: -------------------------------------------------------------------------------- 1 | @import 'bootstrap/scss/mixins/banner'; 2 | @include bsBanner(''); 3 | 4 | @import '_bootstrap-extended/include'; 5 | 6 | // Import bootstrap core scss from node_module 7 | // ! Utilities are customized and added in bootstrap-extended 8 | 9 | // Layout & components 10 | @import 'bootstrap/scss/root'; 11 | @import 'bootstrap/scss/reboot'; 12 | @import 'bootstrap/scss/type'; 13 | @import 'bootstrap/scss/images'; 14 | @import 'bootstrap/scss/containers'; 15 | @import 'bootstrap/scss/grid'; 16 | @import 'bootstrap/scss/tables'; 17 | @import 'bootstrap/scss/forms'; 18 | @import 'bootstrap/scss/buttons'; 19 | @import 'bootstrap/scss/transitions'; 20 | @import 'bootstrap/scss/dropdown'; 21 | @import 'bootstrap/scss/button-group'; 22 | @import 'bootstrap/scss/nav'; 23 | @import 'bootstrap/scss/navbar'; 24 | @import 'bootstrap/scss/card'; 25 | @import 'bootstrap/scss/accordion'; 26 | @import 'bootstrap/scss/breadcrumb'; 27 | @import 'bootstrap/scss/pagination'; 28 | @import 'bootstrap/scss/badge'; 29 | @import 'bootstrap/scss/alert'; 30 | @import 'bootstrap/scss/progress'; 31 | @import 'bootstrap/scss/list-group'; 32 | @import 'bootstrap/scss/close'; 33 | @import 'bootstrap/scss/toasts'; 34 | @import 'bootstrap/scss/modal'; 35 | @import 'bootstrap/scss/tooltip'; 36 | @import 'bootstrap/scss/popover'; 37 | @import 'bootstrap/scss/carousel'; 38 | @import 'bootstrap/scss/spinners'; 39 | @import 'bootstrap/scss/offcanvas'; 40 | @import 'bootstrap/scss/placeholders'; 41 | 42 | // Helpers 43 | @import 'bootstrap/scss/helpers'; 44 | -------------------------------------------------------------------------------- /src/scss/_colors.scss: -------------------------------------------------------------------------------- 1 | @import '_components/include'; 2 | 3 | // * Bootstrap colors (Uncomment required colors) 4 | // ******************************************************************************* 5 | 6 | $bootstrap-colors: ( 7 | // blue: $blue, 8 | // indigo: $indigo, 9 | // purple: $purple, 10 | // pink: $pink, 11 | // orange: $orange, 12 | // teal: $teal 13 | ) !default; 14 | 15 | @each $color-name, $color-value in $bootstrap-colors { 16 | @include bg-variant('.bg-#{$color-name}', $color-value); 17 | @include bg-label-variant('.bg-label-#{$color-name}', $color-value); 18 | 19 | .border-#{$color-name} { 20 | border-color: $color-value !important; 21 | } 22 | 23 | @include template-button-variant('.btn-#{$color-name}', $color-value); 24 | @include template-button-outline-variant('.btn-outline-#{$color-name}', $color-value); 25 | } 26 | 27 | // * Navbar 28 | // ******************************************************************************* 29 | 30 | @each $color, $value in $theme-colors { 31 | @if $color !=primary and $color !=light { 32 | @include template-navbar-style('.navbar.bg-#{$color}', $value); 33 | } 34 | } 35 | 36 | @include template-navbar-style('.navbar.bg-white', #fff, $color: $text-muted, $active-color: $body-color); 37 | @include template-navbar-style('.navbar.bg-light', $light, $color: $body-color, $active-color: $headings-color); 38 | @include template-navbar-style('.navbar.bg-lighter', $gray-50, $color: $body-color, $active-color: $headings-color); 39 | 40 | // * Footer 41 | // ******************************************************************************* 42 | 43 | @each $color, $value in $theme-colors { 44 | @if $color !=primary and $color !=light { 45 | @include template-footer-style('.footer.bg-#{$color}', $value); 46 | } 47 | } 48 | 49 | @include template-footer-style('.footer.bg-white', #fff, $color: $text-muted, $active-color: $body-color); 50 | @include template-footer-style('.footer.bg-light', $light, $color: $body-color, $active-color: $headings-color); 51 | @include template-footer-style('.footer.bg-lighter', $gray-50, $color: $body-color, $active-color: $headings-color); 52 | -------------------------------------------------------------------------------- /src/scss/_components.scss: -------------------------------------------------------------------------------- 1 | @import '_components/include'; 2 | 3 | // Import components scss 4 | @import '_components/base'; 5 | @import '_components/common'; 6 | @import '_components/menu'; 7 | @import '_components/layout'; 8 | @import '_components/app-brand'; 9 | @import '_components/avatar'; 10 | @import '_components/text-divider'; 11 | @import '_components/footer'; 12 | -------------------------------------------------------------------------------- /src/scss/_components/_app-brand.scss: -------------------------------------------------------------------------------- 1 | // App Brand 2 | // ******************************************************************************* 3 | 4 | @import 'mixins/app-brand'; 5 | 6 | .app-brand { 7 | display: flex; 8 | flex-grow: 0; 9 | flex-shrink: 0; 10 | overflow: hidden; 11 | line-height: 1; 12 | min-height: 1px; 13 | align-items: center; 14 | } 15 | // For cover auth pages 16 | .auth-cover-brand { 17 | position: absolute; 18 | z-index: 1; 19 | inset-block-start: 1.8rem; 20 | inset-inline-start: 3rem; 21 | } 22 | 23 | .app-brand-link { 24 | display: flex; 25 | align-items: center; 26 | } 27 | .app-brand-logo { 28 | display: block; 29 | flex-grow: 0; 30 | flex-shrink: 0; 31 | overflow: hidden; 32 | min-height: 1px; 33 | 34 | img, 35 | svg { 36 | display: block; 37 | } 38 | } 39 | 40 | .app-brand-text { 41 | text-transform: uppercase; 42 | flex-shrink: 0; 43 | opacity: 1; 44 | transition: opacity 0.1s ease-in-out; 45 | } 46 | 47 | .app-brand-img-collapsed { 48 | display: none; 49 | } 50 | 51 | .app-brand .layout-menu-toggle { 52 | display: block; 53 | svg { 54 | color: $black; 55 | } 56 | } 57 | 58 | // App brand with vertical menu 59 | .menu-vertical .app-brand { 60 | padding-right: $menu-vertical-link-padding-x - 0.25rem; 61 | padding-left: $menu-vertical-link-padding-x + 0.125rem; 62 | } 63 | 64 | // App brand with vertical menu 65 | .menu-horizontal .app-brand, 66 | .menu-horizontal .app-brand + .menu-divider { 67 | display: none !important; 68 | } 69 | 70 | :not(.layout-menu) > .menu-vertical.menu-collapsed:not(.layout-menu):not(:hover) { 71 | @include template-app-brand-collapsed(); 72 | } 73 | 74 | @include media-breakpoint-up($menu-collapsed-layout-breakpoint) { 75 | .layout-menu-collapsed:not(.layout-menu-hover):not(.layout-menu-offcanvas):not(.layout-menu-fixed-offcanvas) 76 | .layout-menu { 77 | @include template-app-brand-collapsed(); 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /src/scss/_components/_avatar.scss: -------------------------------------------------------------------------------- 1 | // Avatar 2 | // ******************************************************************************* 3 | 4 | // Avatar Styles 5 | .avatar { 6 | position: relative; 7 | width: $avatar-size; 8 | height: $avatar-size; 9 | cursor: pointer; 10 | img { 11 | width: 100%; 12 | height: 100%; 13 | } 14 | // Avatar Initials if no images added 15 | .avatar-initial { 16 | position: absolute; 17 | top: 0; 18 | left: 0; 19 | right: 0; 20 | bottom: 0; 21 | text-transform: uppercase; 22 | display: flex; 23 | align-items: center; 24 | justify-content: center; 25 | color: $white; 26 | background-color: $avatar-bg; 27 | font-size: $avatar-initial; 28 | } 29 | 30 | // Avatar initial size md line height fix 31 | &.avatar-md { 32 | .avatar-initial { 33 | line-height: 1.3; 34 | } 35 | } 36 | 37 | // Avatar Status indication 38 | &.avatar-online, 39 | &.avatar-offline, 40 | &.avatar-away, 41 | &.avatar-busy { 42 | &:after { 43 | content: ''; 44 | position: absolute; 45 | bottom: 0; 46 | right: 3px; 47 | width: 8px; 48 | height: 8px; 49 | border-radius: 100%; 50 | box-shadow: 0 0 0 2px $avatar-group-border; 51 | } 52 | } 53 | &.avatar-online:after { 54 | background-color: $success; 55 | } 56 | &.avatar-offline:after { 57 | background-color: $secondary; 58 | } 59 | &.avatar-away:after { 60 | background-color: $warning; 61 | } 62 | &.avatar-busy:after { 63 | background-color: $danger; 64 | } 65 | } 66 | 67 | // Pull up avatar style 68 | .pull-up { 69 | transition: all 0.25s ease; 70 | &:hover { 71 | transform: translateY(-5px); 72 | box-shadow: $box-shadow; 73 | z-index: 30 !important; 74 | border-radius: 50%; 75 | } 76 | } 77 | 78 | // Avatar Sizes 79 | .avatar-xs { 80 | @include template-avatar-style($avatar-size-xs, $avatar-size-xs, $avatar-initial-xs, 1px); 81 | } 82 | .avatar-sm { 83 | @include template-avatar-style($avatar-size-sm, $avatar-size-sm, $avatar-initial-sm, 2px); 84 | } 85 | .avatar-md { 86 | @include template-avatar-style($avatar-size-md, $avatar-size-md, $avatar-initial-md, 4px); 87 | } 88 | .avatar-lg { 89 | @include template-avatar-style($avatar-size-lg, $avatar-size-lg, $avatar-initial-lg, 5px); 90 | } 91 | .avatar-xl { 92 | @include template-avatar-style($avatar-size-xl, $avatar-size-xl, $avatar-initial-xl, 6px); 93 | } 94 | 95 | // Avatar Group SCSS 96 | .avatar-group { 97 | .avatar { 98 | transition: all 0.25s ease; 99 | img, 100 | .avatar-initial { 101 | border: 2px solid $avatar-group-border; 102 | // box-shadow: 0 0 0 2px $avatar-group-border, inset 0 0 0 1px rgba($black, 0.07); //0 2px 10px 0 rgba($secondary,.3); 103 | } 104 | .avatar-initial { 105 | background-color: $avatar-bg; 106 | } 107 | &:hover { 108 | z-index: 30 !important; 109 | transition: all 0.25s ease; 110 | } 111 | } 112 | } 113 | 114 | // Avatar group z-index 115 | $avatar-group-count: 8; 116 | $avatar-group-zindex: $avatar-group-count; 117 | @for $i from 1 to $avatar-group-count { 118 | .avatar-group { 119 | .avatar:nth-child(#{$i}) { 120 | z-index: $avatar-group-zindex; 121 | } 122 | } 123 | $avatar-group-zindex: $avatar-group-zindex - 1; 124 | } 125 | 126 | // Avatar Group LTR only with sizing 127 | @include ltr-only { 128 | .avatar-group { 129 | // Avatar Group Sizings 130 | .avatar { 131 | margin-left: -0.65rem; 132 | &:first-child { 133 | margin-left: 0 !important; 134 | } 135 | } 136 | .avatar-xs { 137 | margin-left: -0.5rem !important; 138 | } 139 | .avatar-sm { 140 | margin-left: -0.6rem !important; 141 | } 142 | .avatar-md { 143 | margin-left: -0.8rem !important; 144 | } 145 | .avatar-lg { 146 | margin-left: -1rem !important; 147 | } 148 | .avatar-xl { 149 | margin-left: -1.1rem !important; 150 | } 151 | } 152 | } 153 | -------------------------------------------------------------------------------- /src/scss/_components/_base.scss: -------------------------------------------------------------------------------- 1 | // Base 2 | // ******************************************************************************* 3 | 4 | body { 5 | text-rendering: optimizeLegibility; 6 | font-smoothing: antialiased; 7 | -moz-font-feature-settings: 'liga' on; 8 | -webkit-font-smoothing: antialiased; 9 | -moz-osx-font-smoothing: grayscale; 10 | letter-spacing: $letter-spacing; 11 | } 12 | 13 | @include media-breakpoint-up(md) { 14 | button.list-group-item { 15 | outline: none; 16 | } 17 | } 18 | 19 | // * App Overlay 20 | // ******************************************************************************* 21 | 22 | .app-overlay { 23 | position: absolute; 24 | top: 0; 25 | left: 0; 26 | right: 0; 27 | bottom: 0; 28 | background-color: rgba($black, 0.5); 29 | visibility: hidden; 30 | z-index: 3; 31 | transition: all 0.25s ease; 32 | &.show { 33 | visibility: visible; 34 | } 35 | } 36 | 37 | // * Containers 38 | // ******************************************************************************* 39 | 40 | .container, 41 | .container-fluid, 42 | .container-xxl { 43 | padding-right: $container-padding-x-sm; 44 | padding-left: $container-padding-x-sm; 45 | 46 | @include media-breakpoint-up(lg) { 47 | padding-right: $container-padding-x; 48 | padding-left: $container-padding-x; 49 | } 50 | } 51 | 52 | // * Thumbnails 53 | // ******************************************************************************* 54 | 55 | .img-thumbnail { 56 | position: relative; 57 | display: block; 58 | img { 59 | z-index: 1; 60 | } 61 | } 62 | .img-thumbnail-content { 63 | position: absolute; 64 | top: 50%; 65 | left: 50%; 66 | z-index: 3; 67 | display: block; 68 | opacity: 0; 69 | transition: all 0.2s ease-in-out; 70 | transform: translate(-50%, -50%); 71 | 72 | .img-thumbnail:hover &, 73 | .img-thumbnail:focus & { 74 | opacity: 1; 75 | } 76 | } 77 | 78 | // Overlay effect 79 | .img-thumbnail-overlay { 80 | position: absolute; 81 | top: 0; 82 | right: 0; 83 | bottom: 0; 84 | left: 0; 85 | z-index: 2; 86 | display: block; 87 | transition: all 0.2s ease-in-out; 88 | 89 | .img-thumbnail:not(:hover):not(:focus) & { 90 | opacity: 0 !important; 91 | } 92 | } 93 | 94 | .img-thumbnail-shadow { 95 | transition: box-shadow 0.2s; 96 | 97 | &:hover, 98 | &:focus { 99 | box-shadow: 0 5px 20px rgba($black, 0.4); 100 | } 101 | } 102 | 103 | // Zoom-in effect 104 | .img-thumbnail-zoom-in { 105 | overflow: hidden; 106 | 107 | img { 108 | transition: all 0.3s ease-in-out; 109 | transform: translate3d(0); 110 | } 111 | 112 | .img-thumbnail-content { 113 | transform: translate(-50%, -50%) scale(0.6); 114 | } 115 | 116 | &:hover, 117 | &:focus { 118 | img { 119 | transform: scale(1.1); 120 | } 121 | 122 | .img-thumbnail-content { 123 | transform: translate(-50%, -50%) scale(1); 124 | } 125 | } 126 | } 127 | 128 | // ******************************************************************************* 129 | // * Material animations 130 | 131 | @include keyframes(dropdownAnimation) { 132 | 0% { 133 | opacity: 0; 134 | visibility: hidden; 135 | } 136 | 100% { 137 | opacity: 1; 138 | visibility: visible; 139 | } 140 | } 141 | 142 | // * IE Fixes 143 | // ******************************************************************************* 144 | 145 | @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { 146 | // Fix IE parent container height bug when containing image with fluid width 147 | .card, 148 | .card-body, 149 | .media, 150 | .flex-column, 151 | .tab-content { 152 | min-height: 1px; 153 | } 154 | 155 | img { 156 | min-height: 1px; 157 | height: auto; 158 | } 159 | } 160 | 161 | // * Buy now section 162 | // ******************************************************************************* 163 | .buy-now { 164 | .btn-buy-now { 165 | position: fixed; 166 | bottom: 3rem; 167 | 168 | right: $container-padding-x; 169 | z-index: $zindex-menu-fixed; 170 | box-shadow: 0 1px 20px 1px #ea5455 !important; 171 | &:hover { 172 | box-shadow: none !important; 173 | } 174 | } 175 | } 176 | -------------------------------------------------------------------------------- /src/scss/_components/_footer.scss: -------------------------------------------------------------------------------- 1 | // Footer 2 | // ******************************************************************************* 3 | 4 | .footer-link { 5 | display: inline-block; 6 | color: $navbar-light-color; 7 | } 8 | 9 | // Light footer 10 | .footer-light { 11 | color: $navbar-light-color; 12 | 13 | .footer-text { 14 | color: $navbar-light-active-color; 15 | } 16 | 17 | .footer-link { 18 | color: $navbar-light-color; 19 | 20 | &:hover, 21 | &:focus { 22 | color: $navbar-light-hover-color; 23 | } 24 | 25 | &.disabled { 26 | color: $navbar-light-disabled-color !important; 27 | } 28 | } 29 | 30 | .show > .footer-link, 31 | .active > .footer-link, 32 | .footer-link.show, 33 | .footer-link.active { 34 | color: $navbar-light-active-color; 35 | } 36 | 37 | hr { 38 | border-color: $menu-light-border-color; 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /src/scss/_components/_include.scss: -------------------------------------------------------------------------------- 1 | // Include 2 | // ******************************************************************************* 3 | 4 | @import '../_bootstrap-extended/include'; 5 | 6 | //Mixins 7 | @import './_mixins'; // Components mixins 8 | 9 | //Components variables 10 | @import '../_custom-variables/components'; // Components variable (for customization purpose) 11 | @import 'variables'; // Components variable 12 | -------------------------------------------------------------------------------- /src/scss/_components/_mixins.scss: -------------------------------------------------------------------------------- 1 | @import 'mixins/navbar'; 2 | @import 'mixins/footer'; 3 | @import 'mixins/menu'; 4 | @import 'mixins/avatar'; 5 | @import 'mixins/text-divider'; 6 | @import 'mixins/misc'; 7 | -------------------------------------------------------------------------------- /src/scss/_components/_text-divider.scss: -------------------------------------------------------------------------------- 1 | // Divider 2 | // ******************************************************************************* 3 | 4 | @import '../../scss/_custom-variables/libs'; 5 | 6 | .divider { 7 | display: block; 8 | text-align: center; 9 | margin: $divider-margin-y $divider-margin-x; 10 | overflow: hidden; 11 | white-space: nowrap; 12 | 13 | .divider-text { 14 | position: relative; 15 | display: inline-block; 16 | font-size: $divider-font-size; 17 | padding: $divider-text-padding-y $divider-text-padding-x; 18 | color: $headings-color; 19 | 20 | i { 21 | font-size: $divider-icon-size; 22 | &::before { 23 | font-size: $divider-icon-size; 24 | } 25 | } 26 | 27 | &:before, 28 | &:after { 29 | content: ''; 30 | position: absolute; 31 | top: 50%; 32 | width: 100vw; 33 | border-top: 1px solid $divider-color; 34 | } 35 | 36 | &:before { 37 | right: 100%; 38 | } 39 | 40 | &:after { 41 | left: 100%; 42 | } 43 | } 44 | &.text-start { 45 | .divider-text { 46 | padding-left: 0; 47 | } 48 | } 49 | &.text-end { 50 | .divider-text { 51 | padding-right: 0; 52 | } 53 | } 54 | &.text-start-center { 55 | .divider-text { 56 | left: -25%; 57 | } 58 | } 59 | &.text-end-center { 60 | .divider-text { 61 | right: -25%; 62 | } 63 | } 64 | // Dotted Divider 65 | &.divider-dotted .divider-text:before, 66 | &.divider-dotted .divider-text:after, 67 | &.divider-dotted:before, 68 | &.divider-dotted:after { 69 | border-style: dotted; 70 | border-width: 0 1px 1px; 71 | border-color: $divider-color; 72 | } 73 | 74 | // Dashed Divider 75 | &.divider-dashed .divider-text:before, 76 | &.divider-dashed .divider-text:after, 77 | &.divider-dashed:before, 78 | &.divider-dashed:after { 79 | border-style: dashed; 80 | border-width: 0 1px 1px; 81 | border-color: $divider-color; 82 | } 83 | } 84 | 85 | // For Contextual Colors 86 | @each $color, $value in $theme-colors { 87 | @if $color !=primary and $color !=light { 88 | @include template-text-divider-variant('.divider-#{$color}', $value); 89 | } 90 | } 91 | -------------------------------------------------------------------------------- /src/scss/_components/_variables.scss: -------------------------------------------------------------------------------- 1 | // Common 2 | // ******************************************************************************* 3 | 4 | $ui-star-size: 1.1em !default; 5 | $ui-stars-spacer: -0.1em !default; 6 | $ui-star-filled-color: $yellow !default; 7 | 8 | // Navbar (custom navbar) 9 | // ******************************************************************************* 10 | $navbar-height: 4rem !default; 11 | $navbar-suggestion-width: 96% !default; 12 | $navbar-suggestion-height: 28rem !default; 13 | $navbar-suggestion-border-radius: $border-radius-xl !default; 14 | $navbar-dropdown-width: 23.75rem !default; 15 | $navbar-dropdown-content-height: 25.75rem !default; 16 | $navbar-notifications-dropdown-item-padding-y: 0.892rem !default; 17 | $navbar-notifications-dropdown-item-padding-x: 1rem !default; 18 | $navbar-search-shadow: 0px 4px 8px -4px rgba($black, 0.42) !default; 19 | 20 | // Menu 21 | // ******************************************************************************* 22 | 23 | $menu-width: 16.25rem !default; 24 | $menu-collapsed-width: 4.25rem !default; 25 | $menu-collapsed-layout-breakpoint: xl !default; 26 | 27 | $menu-font-size: $font-size-base !default; 28 | 29 | $menu-item-spacer: 0.375rem !default; 30 | 31 | $menu-vertical-link-margin-x: 1.125rem !default; 32 | 33 | $menu-vertical-link-padding-y: 0.5rem !default; 34 | $menu-vertical-link-padding-x: 1.45rem !default; 35 | $menu-vertical-menu-link-padding-y: $menu-vertical-link-padding-y !default; 36 | $menu-vertical-menu-level-spacer: 0.5rem !default; 37 | 38 | $menu-horizontal-spacer-y: 0.7rem !default; 39 | $menu-horizontal-spacer-x: 0.25rem !default; 40 | $menu-horizontal-item-spacer: 0.45rem !default; 41 | $menu-horizontal-link-padding-y: 0.5rem !default; 42 | $menu-horizontal-link-padding-x: 1.7rem !default; 43 | $menu-horizontal-menu-link-padding-y: 0.5rem !default; 44 | $menu-horizontal-sub-menu-icon-size: 0.65rem !default; 45 | $menu-horizontal-menu-level-spacer: 1rem !default; 46 | $menu-horizontal-box-shadow: $navbar-search-shadow !default; 47 | 48 | $menu-sub-width: $menu-width !default; 49 | $menu-sub-box-shadow: $box-shadow-lg !default; 50 | $menu-control-width: 2.25rem !default; 51 | $menu-control-arrow-size: 0.5rem !default; 52 | 53 | $menu-icon-expanded-width: 1.5rem !default; 54 | $menu-icon-expanded-left-spacer: 1.75rem !default; 55 | $menu-icon-expanded-font-size: 1.375rem !default; 56 | $menu-icon-expanded-spacer: 0.5rem !default; 57 | $menu-animation-duration: 0.3s !default; 58 | 59 | $menu-max-levels: 5 !default; 60 | 61 | $menu-dark-border-color: rgba(255, 255, 255, 0.2) !default; 62 | $menu-dark-menu-bg: rgba(0, 0, 0, 0.06) !default; 63 | $menu-light-border-color: rgba(0, 0, 0, 0.06) !default; 64 | $menu-light-menu-bg: rgba(0, 0, 0, 0.05) !default; 65 | 66 | // Footer 67 | // ******************************************************************************* 68 | $footer-fixed-box-shadow: 0px -4px 8px -4px rgba($black, 0.42) !default; 69 | // Avatars 70 | // ******************************************************************************* 71 | 72 | $avatar-size-xl: 4rem !default; 73 | $avatar-size-lg: 3.5rem !default; 74 | $avatar-size-md: 3rem !default; 75 | $avatar-size: 2.5rem !default; // Default 76 | $avatar-size-sm: 2rem !default; 77 | $avatar-size-xs: 1.5rem !default; 78 | 79 | $avatar-initial-xl: 1.875rem !default; 80 | $avatar-initial-lg: 1.5rem !default; 81 | $avatar-initial-md: 1.125rem !default; 82 | $avatar-initial: $font-size-base !default; 83 | $avatar-initial-sm: 0.75rem !default; 84 | $avatar-initial-xs: 0.625rem !default; 85 | 86 | $avatar-group-border: $card-bg !default; 87 | $avatar-bg: #f0eff0 !default; // (C) 88 | 89 | // Text Divider 90 | // ******************************************************************************* 91 | $divider-color: $gray-200 !default; 92 | 93 | $divider-margin-y: 1rem !default; 94 | $divider-margin-x: 0 !default; 95 | 96 | $divider-text-padding-y: 0rem !default; 97 | $divider-text-padding-x: 1rem !default; 98 | 99 | $divider-font-size: 0.9375rem !default; 100 | $divider-icon-size: 1rem !default; 101 | -------------------------------------------------------------------------------- /src/scss/_components/mixins/_app-brand.scss: -------------------------------------------------------------------------------- 1 | // Within menu 2 | @mixin template-app-brand-collapsed() { 3 | .app-brand { 4 | width: $menu-collapsed-width; 5 | } 6 | 7 | .app-brand-logo, 8 | .app-brand-link, 9 | .app-brand-text { 10 | margin-right: auto; 11 | margin-left: auto; 12 | } 13 | 14 | .app-brand-logo ~ .app-brand-text, 15 | .app-brand .layout-menu-toggle { 16 | overflow: hidden; 17 | text-overflow: ellipsis; 18 | white-space: nowrap; 19 | opacity: 0; 20 | } 21 | 22 | .app-brand-img { 23 | display: none; 24 | } 25 | 26 | .app-brand-img-collapsed { 27 | display: block; 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/scss/_components/mixins/_avatar.scss: -------------------------------------------------------------------------------- 1 | // Avatar 2 | // ******************************************************************************* 3 | 4 | @mixin template-avatar-style($height, $width, $font-size, $status-indicator-position: 2px) { 5 | width: $width; 6 | height: $height; 7 | 8 | .avatar-initial { 9 | font-size: $font-size; 10 | } 11 | 12 | &.avatar-online, 13 | &.avatar-offline, 14 | &.avatar-away, 15 | &.avatar-busy { 16 | &:after { 17 | width: $width * 0.2; 18 | height: $height * 0.2; 19 | right: $status-indicator-position; 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/scss/_components/mixins/_footer.scss: -------------------------------------------------------------------------------- 1 | // Footer 2 | // ******************************************************************************* 3 | 4 | @mixin template-footer-style($parent, $bg, $color: null, $active-color: null, $border: null) { 5 | $colors: get-navbar-prop($bg, $active-color, $color, $border); 6 | 7 | #{$parent} { 8 | color: map-get($colors, color); 9 | 10 | .footer-link { 11 | color: map-get($colors, color); 12 | 13 | &:hover, 14 | &:focus { 15 | color: map-get($colors, color); 16 | } 17 | 18 | &.disabled { 19 | color: map-get($colors, disabled-color) !important; 20 | } 21 | } 22 | 23 | .footer-text { 24 | color: map-get($colors, active-color); 25 | } 26 | 27 | .show > .footer-link, 28 | .active > .footer-link, 29 | .footer-link.show, 30 | .footer-link.active { 31 | color: map-get($colors, active-color); 32 | } 33 | 34 | hr { 35 | border-color: map-get($colors, border); 36 | } 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/scss/_components/mixins/_menu.scss: -------------------------------------------------------------------------------- 1 | // Menu 2 | // ******************************************************************************* 3 | 4 | @mixin template-menu-style($parent, $bg, $color: null, $active-color: null, $border: null, $active-bg: null) { 5 | $colors: get-navbar-prop($bg, $active-color, $color, $border); 6 | $contrast-percent: map-get($colors, contrast-percent); 7 | 8 | // Solid color 9 | @if not $active-bg { 10 | $active-bg: rgba-to-hex( 11 | rgba(map-get($colors, bg), 1 - if($contrast-percent < 0.75, 0.025, 0.05)), 12 | if($contrast-percent > 0.25, #fff, #30334e) 13 | ); 14 | } 15 | 16 | // For gradient bg color 17 | $menu-active-bg: linear-gradient(270deg, $active-bg 0%, rgba-to-hex(rgba($active-bg, 0.52)) 100%); 18 | 19 | // For label bg color 20 | $sub-menu-active-bg: rgba-to-hex( 21 | rgba($active-bg, 1 - if($contrast-percent < 0.75, 0.84, 0.84)), 22 | if($contrast-percent > 0.25, #fff, #30334e) 23 | ); 24 | 25 | #{$parent} { 26 | background-color: map-get($colors, bg) !important; 27 | color: map-get($colors, color); 28 | 29 | .menu-link, 30 | .menu-horizontal-prev, 31 | .menu-horizontal-next { 32 | color: map-get($colors, color); 33 | &:hover, 34 | &:focus { 35 | color: map-get($colors, active-color); 36 | } 37 | 38 | &.active { 39 | color: map-get($colors, active-color); 40 | } 41 | } 42 | 43 | .menu-item.disabled .menu-link, 44 | .menu-horizontal-prev.disabled, 45 | .menu-horizontal-next.disabled { 46 | color: map-get($colors, disabled-color) !important; 47 | } 48 | 49 | .menu-item.active:not(.open) > .menu-link:not(.menu-toggle) { 50 | &, 51 | &::before { 52 | color: color-contrast($active-bg) !important; 53 | border-color: color-contrast($active-bg) !important; 54 | } 55 | } 56 | 57 | //vertical menu active item bg color 58 | .menu-item.active > .menu-link:not(.menu-toggle) { 59 | background: $menu-active-bg; 60 | } 61 | 62 | //- 63 | &.menu-horizontal .menu-sub > .menu-item.active > .menu-link:not(.menu-toggle) { 64 | &, 65 | &::before { 66 | background: $sub-menu-active-bg; 67 | color: $active-bg !important; 68 | } 69 | } 70 | 71 | &.menu-horizontal .menu-inner > .menu-item.active > .menu-link.menu-toggle { 72 | background: $menu-active-bg; 73 | &, 74 | &:after { 75 | color: color-contrast($active-bg); 76 | } 77 | } 78 | 79 | .menu-inner-shadow { 80 | background: linear-gradient($bg 5%, rgba($bg, 0.75) 45%, rgba($bg, 0.2) 80%, transparent); 81 | } 82 | .menu-text { 83 | color: map-get($colors, active-color); 84 | } 85 | 86 | .menu-header { 87 | color: map-get($colors, muted-color); 88 | } 89 | 90 | hr, 91 | .menu-divider, 92 | .menu-inner > .menu-item.open > .menu-sub::before { 93 | border-color: map-get($colors, border) !important; 94 | } 95 | 96 | .menu-block::before { 97 | background-color: map-get($colors, muted-color); 98 | } 99 | 100 | .ps__thumb-y, 101 | .ps__rail-y.ps--clicking > .ps__thumb-y { 102 | background: rgba( 103 | map-get($colors, active-color), 104 | if($contrast-percent > 0.75, map-get($colors, opacity) - 0.4, map-get($colors, opacity) - 0.2) 105 | ) !important; 106 | } 107 | } 108 | } 109 | -------------------------------------------------------------------------------- /src/scss/_components/mixins/_misc.scss: -------------------------------------------------------------------------------- 1 | // SVG Color 2 | @mixin template-svg-color($background) { 3 | .svg-illustration svg { 4 | fill: $background; 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /src/scss/_components/mixins/_navbar.scss: -------------------------------------------------------------------------------- 1 | // Navbar 2 | // ******************************************************************************* 3 | 4 | @mixin template-navbar-style($parent, $bg, $color: null, $active-color: null, $border: null) { 5 | $colors: get-navbar-prop($bg, $active-color, $color, $border); 6 | 7 | #{$parent} { 8 | color: map-get($colors, color); 9 | 10 | .navbar-brand, 11 | .navbar-brand a { 12 | color: map-get($colors, active-color); 13 | 14 | &:hover, 15 | &:focus { 16 | color: map-get($colors, active-color); 17 | } 18 | } 19 | 20 | // Navbar search color 21 | .navbar-search-wrapper { 22 | .navbar-search-icon, 23 | .search-input { 24 | color: map-get($colors, color); 25 | } 26 | } 27 | .search-input-wrapper { 28 | .search-input, 29 | .search-toggler { 30 | color: map-get($colors, color); 31 | @include border-top-radius(0); 32 | } 33 | } 34 | 35 | .navbar-nav { 36 | > .nav-link, 37 | > .nav-item > .nav-link, 38 | > .nav > .nav-item > .nav-link { 39 | color: map-get($colors, color); 40 | 41 | &:hover, 42 | &:focus { 43 | color: map-get($colors, active-color); 44 | } 45 | 46 | &.disabled { 47 | color: map-get($colors, disabled-color) !important; 48 | } 49 | } 50 | 51 | .show > .nav-link, 52 | .active > .nav-link, 53 | .nav-link.show, 54 | .nav-link.active { 55 | color: map-get($colors, active-color); 56 | } 57 | } 58 | 59 | .navbar-toggler { 60 | color: map-get($colors, color); 61 | border-color: map-get($colors, border); 62 | } 63 | 64 | .navbar-toggler-icon { 65 | background-image: if( 66 | map-get($colors, active-color) == #fff, 67 | $navbar-dark-toggler-icon-bg, 68 | $navbar-light-toggler-icon-bg 69 | ); 70 | } 71 | 72 | .navbar-text { 73 | color: map-get($colors, color); 74 | 75 | a { 76 | color: map-get($colors, active-color); 77 | 78 | &:hover, 79 | &:focus { 80 | color: map-get($colors, active-color); 81 | } 82 | } 83 | } 84 | 85 | hr { 86 | border-color: map-get($colors, border); 87 | } 88 | } 89 | } 90 | -------------------------------------------------------------------------------- /src/scss/_components/mixins/_text-divider.scss: -------------------------------------------------------------------------------- 1 | // Text Divider 2 | // ******************************************************************************* 3 | 4 | @mixin template-text-divider-variant($divider-color, $background) { 5 | $divider-selector: if($divider-color== '', '', '#{$divider-color}'); 6 | .divider { 7 | &#{$divider-selector} { 8 | .divider-text { 9 | &:before, 10 | &:after { 11 | border-color: $background; 12 | } 13 | } 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/scss/_custom-variables/_bootstrap-extended.scss: -------------------------------------------------------------------------------- 1 | // =================================================================================================================== 2 | // ? TIP: It is recommended to use this file for overriding bootstrap extended variables (_bootstrap-extended/_variables.scss). 3 | // Copy and paste variables as needed, modify their values, and remove the !default flag. 4 | // =================================================================================================================== 5 | 6 | // $font-size-root: 14px !default; 7 | // $success: #00ff00 !default; 8 | -------------------------------------------------------------------------------- /src/scss/_custom-variables/_components.scss: -------------------------------------------------------------------------------- 1 | // ================================================================================================ 2 | // ? TIP: It is recommended to use this file for overriding component variables (_components/_variables.scss). 3 | // Copy and paste variables as needed, modify their values, and remove the !default flag. 4 | // ================================================================================================ 5 | 6 | // $menu-width: 14rem !default; 7 | -------------------------------------------------------------------------------- /src/scss/_custom-variables/_libs.scss: -------------------------------------------------------------------------------- 1 | // ================================================================================================ 2 | // ? TIP: It is recommended to use this file for overriding any library variables from (libs/) folder. 3 | // Copy and paste variables as needed, modify their values, and remove the !default flag. 4 | // ================================================================================================ 5 | 6 | @import 'support'; 7 | -------------------------------------------------------------------------------- /src/scss/_custom-variables/_pages.scss: -------------------------------------------------------------------------------- 1 | // ================================================================================================ 2 | // ? TIP: It is recommended to use this file for overriding any pages variables from the (pages/) folder. 3 | // Copy and paste variables as needed, modify their values, and remove the !default flag. 4 | // ================================================================================================ 5 | 6 | @import 'support'; 7 | -------------------------------------------------------------------------------- /src/scss/_custom-variables/_support.scss: -------------------------------------------------------------------------------- 1 | $enable-light-style: true; 2 | 3 | @mixin app-ltr($has-child: true) { 4 | @content; 5 | } 6 | 7 | @mixin app-ltr-style() { 8 | @content; 9 | } 10 | -------------------------------------------------------------------------------- /src/scss/_theme/_common.scss: -------------------------------------------------------------------------------- 1 | // Theme mixin 2 | // ******************************************************************************* 3 | 4 | @mixin template-common-theme($background, $color: null) { 5 | @include text-variant('.text-primary', $background); 6 | @include bg-variant('.bg-primary', $background); 7 | @include bg-label-variant('.bg-label-primary', $background); 8 | @include template-pagination-theme($background, $color); 9 | @include template-pagination-outline-variant('.pagination-outline-primary', $background); 10 | @include template-progress-bar-theme($background, $color); 11 | @include template-list-group-theme($background, $color); 12 | @include template-alert-variant('.alert-primary', $background); 13 | 14 | // Need to add shift-color as BS5 updated with table variant colors like this 15 | 16 | @include template-table-variant('primary', shift-color($background, $table-bg-scale)); 17 | @include template-button-variant('.btn-primary', $background, $color); 18 | @include template-button-outline-variant('.btn-outline-primary', $background, $color); 19 | @include template-dropdown-theme(rgba-to-hex(rgba($background, 0.16), $rgba-to-hex-bg), $background); 20 | @include template-nav-theme($background, $color); 21 | @include template-form-control-theme($background); 22 | @include template-form-check-theme($background, $color); 23 | @include template-form-switch-theme($background); 24 | @include template-file-input-theme($background); 25 | 26 | @include template-material-form-range-variant('', $background); 27 | @include template-text-divider-variant('.divider-primary', $background); 28 | 29 | @include template-navbar-style('.navbar.bg-primary', $primary-color); 30 | @include template-menu-style('.menu.bg-primary', $primary-color); 31 | @include template-footer-style('.footer.bg-primary', $primary-color); 32 | @include template-float-label-theme($primary-color); 33 | @include template-svg-color($primary-color); 34 | 35 | html:not([dir='rtl']) .border-primary, 36 | html[dir='rtl'] .border-primary { 37 | border-color: $background !important; 38 | } 39 | a { 40 | color: $background; 41 | &:hover { 42 | color: tint-color($background, 10%); 43 | } 44 | } 45 | .fill-primary { 46 | fill: $background; 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /src/scss/_theme/_theme.scss: -------------------------------------------------------------------------------- 1 | // ? Theme related styles common styles 2 | 3 | @import '../_components/include'; 4 | -------------------------------------------------------------------------------- /src/scss/core.scss: -------------------------------------------------------------------------------- 1 | @import 'bootstrap'; 2 | @import 'bootstrap-extended'; 3 | @import 'components'; 4 | @import 'colors'; 5 | -------------------------------------------------------------------------------- /src/scss/pages/page-account-settings.scss: -------------------------------------------------------------------------------- 1 | // * Account Settings 2 | // ******************************************************************************* 3 | 4 | @import '../_custom-variables/pages'; 5 | @import '../_bootstrap-extended/include'; 6 | 7 | .api-key-actions { 8 | position: absolute !important; 9 | top: 0.75rem; 10 | @include app-ltr() { 11 | right: 0.5rem; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/scss/pages/page-auth.scss: -------------------------------------------------------------------------------- 1 | // * Authentication 2 | // ******************************************************************************* 3 | 4 | @use '../_bootstrap-extended/include' as light; 5 | @import '../_custom-variables/pages'; 6 | 7 | $authentication-1-inner-max-width: 460px !default; 8 | 9 | .authentication-wrapper { 10 | display: flex; 11 | flex-basis: 100%; 12 | min-height: 100vh; 13 | width: 100%; 14 | 15 | .authentication-inner { 16 | width: 100%; 17 | } 18 | 19 | &.authentication-basic { 20 | align-items: center; 21 | justify-content: center; 22 | } 23 | .auth-cover-illustration { 24 | z-index: 1; 25 | max-inline-size: 38rem; 26 | } 27 | 28 | .authentication-image-object { 29 | &-left { 30 | position: absolute; 31 | bottom: 6%; 32 | inset-inline-start: 4%; 33 | } 34 | &-right { 35 | position: absolute; 36 | bottom: 7%; 37 | inset-inline-end: 4%; 38 | } 39 | } 40 | 41 | .authentication-image { 42 | z-index: -1; 43 | inline-size: 100%; 44 | position: absolute; 45 | inset-inline-start: 0; 46 | bottom: 0; 47 | } 48 | .authentication-image-model { 49 | width: 768px; 50 | } 51 | 52 | &.authentication-cover { 53 | align-items: flex-start; 54 | .authentication-inner { 55 | min-height: 100vh; 56 | position: relative; 57 | } 58 | .authentication-image { 59 | inset-inline-start: unset; 60 | } 61 | .authentication-image-tree { 62 | position: absolute; 63 | bottom: 4rem; 64 | left: 3rem; 65 | } 66 | } 67 | 68 | &.authentication-basic .authentication-inner { 69 | max-width: $authentication-1-inner-max-width; 70 | } 71 | 72 | // For two-steps auth 73 | .auth-input-wrapper .auth-input { 74 | max-width: 50px; 75 | padding-left: 0.4rem; 76 | padding-right: 0.4rem; 77 | font-size: light.$large-font-size; 78 | } 79 | } 80 | 81 | // Two-steps auth responsive style 82 | @include light.media-breakpoint-down(sm) { 83 | .authentication-wrapper { 84 | .auth-input-wrapper .auth-input { 85 | font-size: light.$h5-font-size; 86 | } 87 | } 88 | } 89 | 90 | // Light Layout 91 | @if $enable-light-style { 92 | .light-style { 93 | .authentication-wrapper .authentication-bg { 94 | background-color: light.$white; 95 | } 96 | } 97 | } 98 | -------------------------------------------------------------------------------- /src/scss/pages/page-icons.scss: -------------------------------------------------------------------------------- 1 | // * Page Icons (Page specific only) 2 | // ******************************************************************************* 3 | 4 | @import '../_bootstrap-extended/include'; 5 | @import '../_custom-variables/pages'; 6 | 7 | #icons-container { 8 | .icon-card { 9 | width: 128px; 10 | } 11 | } 12 | 13 | @media (max-width: 1024px) { 14 | #icons-container { 15 | .icon-card { 16 | width: 126px; 17 | } 18 | } 19 | } 20 | @include media-breakpoint-down(md) { 21 | #icons-container { 22 | .icon-card { 23 | width: 131px; 24 | } 25 | } 26 | } 27 | 28 | @media (max-width: 414px) { 29 | #icons-container { 30 | .icon-card { 31 | width: 110px; 32 | } 33 | } 34 | } 35 | 36 | @media (max-width: 375px) { 37 | #icons-container { 38 | .icon-card { 39 | width: 150px; 40 | } 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /src/scss/pages/page-misc.scss: -------------------------------------------------------------------------------- 1 | // * Miscellaneous 2 | // ******************************************************************************* 3 | 4 | @import '../_bootstrap-extended/include'; 5 | @import '../_custom-variables/pages'; 6 | 7 | // Misc wrapper styles 8 | .misc-wrapper { 9 | display: flex; 10 | flex-direction: column; 11 | align-items: center; 12 | min-height: 100vh; 13 | justify-content: center; 14 | position: relative; 15 | padding: 1.25rem; 16 | } 17 | 18 | // Misc background image styles 19 | .misc-bg { 20 | inline-size: 100%; 21 | position: absolute; 22 | inset-inline-start: 0; 23 | bottom: 0; 24 | } 25 | 26 | // Misc object styles 27 | .misc-object, 28 | .misc-object-right { 29 | position: absolute; 30 | z-index: 1; 31 | } 32 | .misc-object { 33 | bottom: 6%; 34 | left: 3%; 35 | } 36 | .misc-object-right { 37 | bottom: 7%; 38 | right: 3%; 39 | } 40 | 41 | // Misc model style 42 | 43 | .misc-model { 44 | position: relative; 45 | bottom: 3rem; 46 | } 47 | -------------------------------------------------------------------------------- /src/scss/theme-default.scss: -------------------------------------------------------------------------------- 1 | @import './_components/include'; 2 | @import './_theme/common'; 3 | @import './_theme/_theme'; 4 | 5 | $primary-color: #8c57ff; 6 | $body-bg: #f4f5fa; 7 | 8 | body { 9 | background: $body-bg; 10 | } 11 | 12 | .bg-body { 13 | background: $body-bg !important; 14 | } 15 | 16 | @include template-common-theme($primary-color); 17 | 18 | // Navbar 19 | // --------------------------------------------------------------------------- 20 | @include template-navbar-style('.bg-navbar-theme', $body-bg, $color: $headings-color, $active-color: $headings-color); 21 | 22 | // Menu 23 | // --------------------------------------------------------------------------- 24 | 25 | @include template-menu-style( 26 | '.bg-menu-theme', 27 | $body-bg, 28 | $color: $headings-color, 29 | $active-color: $headings-color, 30 | $border: transparent, 31 | $active-bg: $primary-color 32 | ); 33 | @include media-breakpoint-up($menu-collapsed-layout-breakpoint) { 34 | .layout-menu-collapsed.layout-menu-hover .bg-menu-theme { 35 | box-shadow: $box-shadow-lg; 36 | } 37 | } 38 | 39 | // Footer 40 | // --------------------------------------------------------------------------- 41 | @include template-footer-style('.bg-footer-theme', $body-bg, $color: $primary-color, $active-color: $headings-color); 42 | -------------------------------------------------------------------------------- /src/site.scss: -------------------------------------------------------------------------------- 1 | /* Custom styles goes here */ 2 | -------------------------------------------------------------------------------- /wwwroot/css/demo.css: -------------------------------------------------------------------------------- 1 | /* 2 | * demo.css 3 | * File include item demo only specific css only 4 | ******************************************************************************/ 5 | 6 | .menu .app-brand.demo { 7 | height: 64px; 8 | } 9 | 10 | .dark-style .menu .app-brand.demo { 11 | height: 64px; 12 | } 13 | 14 | .app-brand-logo.demo svg { 15 | width: 30px; 16 | height: 24px; 17 | } 18 | 19 | .app-brand-text.demo { 20 | font-size: 1.25rem; 21 | } 22 | 23 | .authentication-wrapper .app-brand-text.demo { 24 | font-size: 1.5rem; 25 | text-transform: capitalize; 26 | } 27 | /* ! For .layout-navbar-fixed added fix padding top tpo .layout-page */ 28 | .layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page { 29 | padding-top: 64px !important; 30 | } 31 | 32 | /* Navbar page z-index issue solution */ 33 | .content-wrapper .navbar { 34 | z-index: auto; 35 | } 36 | 37 | /* 38 | * Content 39 | ******************************************************************************/ 40 | 41 | .demo-blocks > * { 42 | display: block !important; 43 | } 44 | 45 | .demo-inline-spacing > * { 46 | margin: 1rem 0.375rem 0 0 !important; 47 | } 48 | 49 | /* ? .demo-vertical-spacing class is used to have vertical margins between elements. To remove margin-top from the first-child, use .demo-only-element class with .demo-vertical-spacing class. For example, we have used this class in forms-input-groups.html file. */ 50 | .demo-vertical-spacing > * { 51 | margin-top: 1.25rem !important; 52 | margin-bottom: 0 !important; 53 | } 54 | .demo-vertical-spacing.demo-only-element > :first-child { 55 | margin-top: 0 !important; 56 | } 57 | 58 | .demo-vertical-spacing-lg > * { 59 | margin-top: 1.875rem !important; 60 | margin-bottom: 0 !important; 61 | } 62 | .demo-vertical-spacing-lg.demo-only-element > :first-child { 63 | margin-top: 0 !important; 64 | } 65 | 66 | .demo-vertical-spacing-xl > * { 67 | margin-top: 5rem !important; 68 | margin-bottom: 0 !important; 69 | } 70 | .demo-vertical-spacing-xl.demo-only-element > :first-child { 71 | margin-top: 0 !important; 72 | } 73 | 74 | .rtl-only { 75 | display: none !important; 76 | text-align: left !important; 77 | direction: ltr !important; 78 | } 79 | 80 | [dir='rtl'] .rtl-only { 81 | display: block !important; 82 | } 83 | 84 | /* Dropdown buttons going out of small screens */ 85 | @media (max-width: 576px) { 86 | #dropdown-variation-demo .btn-group .text-truncate { 87 | width: 300px; 88 | position: relative; 89 | } 90 | #dropdown-variation-demo .btn-group .text-truncate::after { 91 | position: absolute; 92 | top: 45%; 93 | right: 0.65rem; 94 | } 95 | } 96 | /* 97 | * Layout demo 98 | ******************************************************************************/ 99 | 100 | .layout-demo-wrapper { 101 | display: -webkit-box; 102 | display: -ms-flexbox; 103 | display: flex; 104 | -webkit-box-align: center; 105 | -ms-flex-align: center; 106 | align-items: center; 107 | -webkit-box-orient: vertical; 108 | -webkit-box-direction: normal; 109 | -ms-flex-direction: column; 110 | flex-direction: column; 111 | margin-top: 1.25rem; 112 | } 113 | .layout-demo-placeholder img { 114 | width: 900px; 115 | } 116 | .layout-demo-info { 117 | text-align: center; 118 | margin-top: 1.25rem; 119 | } 120 | -------------------------------------------------------------------------------- /wwwroot/css/site.css: -------------------------------------------------------------------------------- 1 | /* Custom styles goes here */ 2 | -------------------------------------------------------------------------------- /wwwroot/img/avatars/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-bootstrap-html-aspnet-core-mvc-admin-template-free/2ecde34f99cfbb3936df3ea2e1d3df9758517a34/wwwroot/img/avatars/1.png -------------------------------------------------------------------------------- /wwwroot/img/avatars/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-bootstrap-html-aspnet-core-mvc-admin-template-free/2ecde34f99cfbb3936df3ea2e1d3df9758517a34/wwwroot/img/avatars/2.png -------------------------------------------------------------------------------- /wwwroot/img/avatars/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-bootstrap-html-aspnet-core-mvc-admin-template-free/2ecde34f99cfbb3936df3ea2e1d3df9758517a34/wwwroot/img/avatars/3.png -------------------------------------------------------------------------------- /wwwroot/img/avatars/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-bootstrap-html-aspnet-core-mvc-admin-template-free/2ecde34f99cfbb3936df3ea2e1d3df9758517a34/wwwroot/img/avatars/4.png -------------------------------------------------------------------------------- /wwwroot/img/avatars/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-bootstrap-html-aspnet-core-mvc-admin-template-free/2ecde34f99cfbb3936df3ea2e1d3df9758517a34/wwwroot/img/avatars/5.png -------------------------------------------------------------------------------- /wwwroot/img/avatars/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-bootstrap-html-aspnet-core-mvc-admin-template-free/2ecde34f99cfbb3936df3ea2e1d3df9758517a34/wwwroot/img/avatars/6.png -------------------------------------------------------------------------------- /wwwroot/img/avatars/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-bootstrap-html-aspnet-core-mvc-admin-template-free/2ecde34f99cfbb3936df3ea2e1d3df9758517a34/wwwroot/img/avatars/7.png -------------------------------------------------------------------------------- /wwwroot/img/backgrounds/18.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-bootstrap-html-aspnet-core-mvc-admin-template-free/2ecde34f99cfbb3936df3ea2e1d3df9758517a34/wwwroot/img/backgrounds/18.jpg -------------------------------------------------------------------------------- /wwwroot/img/elements/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-bootstrap-html-aspnet-core-mvc-admin-template-free/2ecde34f99cfbb3936df3ea2e1d3df9758517a34/wwwroot/img/elements/1.jpg -------------------------------------------------------------------------------- /wwwroot/img/elements/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-bootstrap-html-aspnet-core-mvc-admin-template-free/2ecde34f99cfbb3936df3ea2e1d3df9758517a34/wwwroot/img/elements/11.jpg -------------------------------------------------------------------------------- /wwwroot/img/elements/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-bootstrap-html-aspnet-core-mvc-admin-template-free/2ecde34f99cfbb3936df3ea2e1d3df9758517a34/wwwroot/img/elements/12.jpg -------------------------------------------------------------------------------- /wwwroot/img/elements/13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-bootstrap-html-aspnet-core-mvc-admin-template-free/2ecde34f99cfbb3936df3ea2e1d3df9758517a34/wwwroot/img/elements/13.jpg -------------------------------------------------------------------------------- /wwwroot/img/elements/17.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-bootstrap-html-aspnet-core-mvc-admin-template-free/2ecde34f99cfbb3936df3ea2e1d3df9758517a34/wwwroot/img/elements/17.jpg -------------------------------------------------------------------------------- /wwwroot/img/elements/18.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-bootstrap-html-aspnet-core-mvc-admin-template-free/2ecde34f99cfbb3936df3ea2e1d3df9758517a34/wwwroot/img/elements/18.jpg -------------------------------------------------------------------------------- /wwwroot/img/elements/19.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-bootstrap-html-aspnet-core-mvc-admin-template-free/2ecde34f99cfbb3936df3ea2e1d3df9758517a34/wwwroot/img/elements/19.jpg -------------------------------------------------------------------------------- /wwwroot/img/elements/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-bootstrap-html-aspnet-core-mvc-admin-template-free/2ecde34f99cfbb3936df3ea2e1d3df9758517a34/wwwroot/img/elements/2.jpg -------------------------------------------------------------------------------- /wwwroot/img/elements/20.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-bootstrap-html-aspnet-core-mvc-admin-template-free/2ecde34f99cfbb3936df3ea2e1d3df9758517a34/wwwroot/img/elements/20.jpg -------------------------------------------------------------------------------- /wwwroot/img/elements/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-bootstrap-html-aspnet-core-mvc-admin-template-free/2ecde34f99cfbb3936df3ea2e1d3df9758517a34/wwwroot/img/elements/3.jpg -------------------------------------------------------------------------------- /wwwroot/img/elements/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-bootstrap-html-aspnet-core-mvc-admin-template-free/2ecde34f99cfbb3936df3ea2e1d3df9758517a34/wwwroot/img/elements/4.jpg -------------------------------------------------------------------------------- /wwwroot/img/elements/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-bootstrap-html-aspnet-core-mvc-admin-template-free/2ecde34f99cfbb3936df3ea2e1d3df9758517a34/wwwroot/img/elements/5.jpg -------------------------------------------------------------------------------- /wwwroot/img/elements/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-bootstrap-html-aspnet-core-mvc-admin-template-free/2ecde34f99cfbb3936df3ea2e1d3df9758517a34/wwwroot/img/elements/7.jpg -------------------------------------------------------------------------------- /wwwroot/img/favicon/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-bootstrap-html-aspnet-core-mvc-admin-template-free/2ecde34f99cfbb3936df3ea2e1d3df9758517a34/wwwroot/img/favicon/favicon.ico -------------------------------------------------------------------------------- /wwwroot/img/icons/brands/asana.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-bootstrap-html-aspnet-core-mvc-admin-template-free/2ecde34f99cfbb3936df3ea2e1d3df9758517a34/wwwroot/img/icons/brands/asana.png -------------------------------------------------------------------------------- /wwwroot/img/icons/brands/aws.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-bootstrap-html-aspnet-core-mvc-admin-template-free/2ecde34f99cfbb3936df3ea2e1d3df9758517a34/wwwroot/img/icons/brands/aws.png -------------------------------------------------------------------------------- /wwwroot/img/icons/brands/behance.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-bootstrap-html-aspnet-core-mvc-admin-template-free/2ecde34f99cfbb3936df3ea2e1d3df9758517a34/wwwroot/img/icons/brands/behance.png -------------------------------------------------------------------------------- /wwwroot/img/icons/brands/dribbble.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-bootstrap-html-aspnet-core-mvc-admin-template-free/2ecde34f99cfbb3936df3ea2e1d3df9758517a34/wwwroot/img/icons/brands/dribbble.png -------------------------------------------------------------------------------- /wwwroot/img/icons/brands/facebook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-bootstrap-html-aspnet-core-mvc-admin-template-free/2ecde34f99cfbb3936df3ea2e1d3df9758517a34/wwwroot/img/icons/brands/facebook.png -------------------------------------------------------------------------------- /wwwroot/img/icons/brands/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-bootstrap-html-aspnet-core-mvc-admin-template-free/2ecde34f99cfbb3936df3ea2e1d3df9758517a34/wwwroot/img/icons/brands/github.png -------------------------------------------------------------------------------- /wwwroot/img/icons/brands/google.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-bootstrap-html-aspnet-core-mvc-admin-template-free/2ecde34f99cfbb3936df3ea2e1d3df9758517a34/wwwroot/img/icons/brands/google.png -------------------------------------------------------------------------------- /wwwroot/img/icons/brands/instagram.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-bootstrap-html-aspnet-core-mvc-admin-template-free/2ecde34f99cfbb3936df3ea2e1d3df9758517a34/wwwroot/img/icons/brands/instagram.png -------------------------------------------------------------------------------- /wwwroot/img/icons/brands/mailchimp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-bootstrap-html-aspnet-core-mvc-admin-template-free/2ecde34f99cfbb3936df3ea2e1d3df9758517a34/wwwroot/img/icons/brands/mailchimp.png -------------------------------------------------------------------------------- /wwwroot/img/icons/brands/slack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-bootstrap-html-aspnet-core-mvc-admin-template-free/2ecde34f99cfbb3936df3ea2e1d3df9758517a34/wwwroot/img/icons/brands/slack.png -------------------------------------------------------------------------------- /wwwroot/img/icons/brands/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-bootstrap-html-aspnet-core-mvc-admin-template-free/2ecde34f99cfbb3936df3ea2e1d3df9758517a34/wwwroot/img/icons/brands/twitter.png -------------------------------------------------------------------------------- /wwwroot/img/icons/misc/aviato.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-bootstrap-html-aspnet-core-mvc-admin-template-free/2ecde34f99cfbb3936df3ea2e1d3df9758517a34/wwwroot/img/icons/misc/aviato.png -------------------------------------------------------------------------------- /wwwroot/img/icons/misc/bitbank.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-bootstrap-html-aspnet-core-mvc-admin-template-free/2ecde34f99cfbb3936df3ea2e1d3df9758517a34/wwwroot/img/icons/misc/bitbank.png -------------------------------------------------------------------------------- /wwwroot/img/icons/misc/triangle-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-bootstrap-html-aspnet-core-mvc-admin-template-free/2ecde34f99cfbb3936df3ea2e1d3df9758517a34/wwwroot/img/icons/misc/triangle-light.png -------------------------------------------------------------------------------- /wwwroot/img/icons/misc/zipcar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-bootstrap-html-aspnet-core-mvc-admin-template-free/2ecde34f99cfbb3936df3ea2e1d3df9758517a34/wwwroot/img/icons/misc/zipcar.png -------------------------------------------------------------------------------- /wwwroot/img/icons/payments/american-bank.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-bootstrap-html-aspnet-core-mvc-admin-template-free/2ecde34f99cfbb3936df3ea2e1d3df9758517a34/wwwroot/img/icons/payments/american-bank.png -------------------------------------------------------------------------------- /wwwroot/img/icons/payments/citi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-bootstrap-html-aspnet-core-mvc-admin-template-free/2ecde34f99cfbb3936df3ea2e1d3df9758517a34/wwwroot/img/icons/payments/citi.png -------------------------------------------------------------------------------- /wwwroot/img/icons/payments/digital-ocean.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-bootstrap-html-aspnet-core-mvc-admin-template-free/2ecde34f99cfbb3936df3ea2e1d3df9758517a34/wwwroot/img/icons/payments/digital-ocean.png -------------------------------------------------------------------------------- /wwwroot/img/icons/payments/gumroad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-bootstrap-html-aspnet-core-mvc-admin-template-free/2ecde34f99cfbb3936df3ea2e1d3df9758517a34/wwwroot/img/icons/payments/gumroad.png -------------------------------------------------------------------------------- /wwwroot/img/icons/payments/mastercard-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-bootstrap-html-aspnet-core-mvc-admin-template-free/2ecde34f99cfbb3936df3ea2e1d3df9758517a34/wwwroot/img/icons/payments/mastercard-2.png -------------------------------------------------------------------------------- /wwwroot/img/icons/payments/stripes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-bootstrap-html-aspnet-core-mvc-admin-template-free/2ecde34f99cfbb3936df3ea2e1d3df9758517a34/wwwroot/img/icons/payments/stripes.png -------------------------------------------------------------------------------- /wwwroot/img/illustrations/404.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-bootstrap-html-aspnet-core-mvc-admin-template-free/2ecde34f99cfbb3936df3ea2e1d3df9758517a34/wwwroot/img/illustrations/404.png -------------------------------------------------------------------------------- /wwwroot/img/illustrations/auth-basic-mask-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-bootstrap-html-aspnet-core-mvc-admin-template-free/2ecde34f99cfbb3936df3ea2e1d3df9758517a34/wwwroot/img/illustrations/auth-basic-mask-light.png -------------------------------------------------------------------------------- /wwwroot/img/illustrations/misc-mask-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-bootstrap-html-aspnet-core-mvc-admin-template-free/2ecde34f99cfbb3936df3ea2e1d3df9758517a34/wwwroot/img/illustrations/misc-mask-light.png -------------------------------------------------------------------------------- /wwwroot/img/illustrations/misc-under-maintenance.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-bootstrap-html-aspnet-core-mvc-admin-template-free/2ecde34f99cfbb3936df3ea2e1d3df9758517a34/wwwroot/img/illustrations/misc-under-maintenance.png -------------------------------------------------------------------------------- /wwwroot/img/illustrations/tree-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-bootstrap-html-aspnet-core-mvc-admin-template-free/2ecde34f99cfbb3936df3ea2e1d3df9758517a34/wwwroot/img/illustrations/tree-3.png -------------------------------------------------------------------------------- /wwwroot/img/illustrations/tree.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-bootstrap-html-aspnet-core-mvc-admin-template-free/2ecde34f99cfbb3936df3ea2e1d3df9758517a34/wwwroot/img/illustrations/tree.png -------------------------------------------------------------------------------- /wwwroot/img/illustrations/trophy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-bootstrap-html-aspnet-core-mvc-admin-template-free/2ecde34f99cfbb3936df3ea2e1d3df9758517a34/wwwroot/img/illustrations/trophy.png -------------------------------------------------------------------------------- /wwwroot/img/layouts/layout-container-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-bootstrap-html-aspnet-core-mvc-admin-template-free/2ecde34f99cfbb3936df3ea2e1d3df9758517a34/wwwroot/img/layouts/layout-container-light.png -------------------------------------------------------------------------------- /wwwroot/img/layouts/layout-fluid-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-bootstrap-html-aspnet-core-mvc-admin-template-free/2ecde34f99cfbb3936df3ea2e1d3df9758517a34/wwwroot/img/layouts/layout-fluid-light.png -------------------------------------------------------------------------------- /wwwroot/img/layouts/layout-without-menu-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-bootstrap-html-aspnet-core-mvc-admin-template-free/2ecde34f99cfbb3936df3ea2e1d3df9758517a34/wwwroot/img/layouts/layout-without-menu-light.png -------------------------------------------------------------------------------- /wwwroot/img/layouts/layout-without-navbar-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-bootstrap-html-aspnet-core-mvc-admin-template-free/2ecde34f99cfbb3936df3ea2e1d3df9758517a34/wwwroot/img/layouts/layout-without-navbar-light.png -------------------------------------------------------------------------------- /wwwroot/js/config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Config 3 | * ------------------------------------------------------------------------------------- 4 | * ! IMPORTANT: Make sure you clear the browser local storage In order to see the config changes in the template. 5 | * ! To clear local storage: (https://www.leadshook.com/help/how-to-clear-local-storage-in-google-chrome-browser/). 6 | */ 7 | 8 | 'use strict'; 9 | 10 | // JS global variables 11 | window.config = { 12 | colors: { 13 | primary: '#8c57ff', 14 | secondary: '#8a8d93', 15 | success: '#56ca00', 16 | info: '#16b1ff', 17 | warning: '#ffb400', 18 | danger: '#ff4c51', 19 | dark: '#4b4b4b', 20 | black: '#2e263d', 21 | white: '#fff', 22 | cardColor: '#fff', 23 | bodyBg: '#f4f5fa', 24 | bodyColor: '#6D6777', 25 | headingColor: '#433C50', 26 | textMuted: '#ABA8B1', 27 | borderColor: '#E6E5E8', 28 | chartBgColor: '#F0F2F8' 29 | } 30 | }; 31 | -------------------------------------------------------------------------------- /wwwroot/js/extended-ui-perfect-scrollbar.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Perfect Scrollbar 3 | */ 4 | 'use strict'; 5 | 6 | document.addEventListener('DOMContentLoaded', function () { 7 | (function () { 8 | const verticalExample = document.getElementById('vertical-example'), 9 | horizontalExample = document.getElementById('horizontal-example'), 10 | horizVertExample = document.getElementById('both-scrollbars-example'); 11 | 12 | // Vertical Example 13 | // -------------------------------------------------------------------- 14 | if (verticalExample) { 15 | new PerfectScrollbar(verticalExample, { 16 | wheelPropagation: false 17 | }); 18 | } 19 | 20 | // Horizontal Example 21 | // -------------------------------------------------------------------- 22 | if (horizontalExample) { 23 | new PerfectScrollbar(horizontalExample, { 24 | wheelPropagation: false, 25 | suppressScrollY: true 26 | }); 27 | } 28 | 29 | // Both vertical and Horizontal Example 30 | // -------------------------------------------------------------------- 31 | if (horizVertExample) { 32 | new PerfectScrollbar(horizVertExample, { 33 | wheelPropagation: false 34 | }); 35 | } 36 | })(); 37 | }); 38 | -------------------------------------------------------------------------------- /wwwroot/js/form-basic-inputs.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Form Basic Inputs 3 | */ 4 | 5 | 'use strict'; 6 | 7 | (function () { 8 | // Indeterminate checkbox 9 | const checkbox = document.getElementById('defaultCheck2'); 10 | checkbox.indeterminate = true; 11 | })(); 12 | -------------------------------------------------------------------------------- /wwwroot/js/pages-account-settings-account.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Account Settings - Account 3 | */ 4 | 5 | 'use strict'; 6 | 7 | document.addEventListener('DOMContentLoaded', function (e) { 8 | (function () { 9 | const deactivateAcc = document.querySelector('#formAccountDeactivation'); 10 | 11 | // Update/reset user image of account page 12 | let accountUserImage = document.getElementById('uploadedAvatar'); 13 | const fileInput = document.querySelector('.account-file-input'), 14 | resetFileInput = document.querySelector('.account-image-reset'); 15 | 16 | if (accountUserImage) { 17 | const resetImage = accountUserImage.src; 18 | fileInput.onchange = () => { 19 | if (fileInput.files[0]) { 20 | accountUserImage.src = window.URL.createObjectURL(fileInput.files[0]); 21 | } 22 | }; 23 | resetFileInput.onclick = () => { 24 | fileInput.value = ''; 25 | accountUserImage.src = resetImage; 26 | }; 27 | } 28 | })(); 29 | }); 30 | -------------------------------------------------------------------------------- /wwwroot/js/site.js: -------------------------------------------------------------------------------- 1 | // Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification 2 | // for details on configuring this project to bundle and minify static web assets. 3 | 4 | // Write your JavaScript code. 5 | -------------------------------------------------------------------------------- /wwwroot/js/ui-modals.js: -------------------------------------------------------------------------------- 1 | /** 2 | * UI Modals 3 | */ 4 | 5 | 'use strict'; 6 | 7 | (function () { 8 | // On hiding modal, remove iframe video/audio to stop playing 9 | const youTubeModal = document.querySelector('#youTubeModal'), 10 | youTubeModalVideo = youTubeModal.querySelector('iframe'); 11 | youTubeModal.addEventListener('hidden.bs.modal', function () { 12 | youTubeModalVideo.setAttribute('src', ''); 13 | }); 14 | 15 | // Function to get and auto play youTube video 16 | const autoPlayYouTubeModal = function () { 17 | const modalTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="modal"]')); 18 | modalTriggerList.map(function (modalTriggerEl) { 19 | modalTriggerEl.onclick = function () { 20 | const theModal = this.getAttribute('data-bs-target'), 21 | videoSRC = this.getAttribute('data-theVideo'), 22 | videoSRCauto = `${videoSRC}?autoplay=1`, 23 | modalVideo = document.querySelector(`${theModal} iframe`); 24 | if (modalVideo) { 25 | modalVideo.setAttribute('src', videoSRCauto); 26 | } 27 | }; 28 | }); 29 | }; 30 | 31 | // Calling function on load 32 | autoPlayYouTubeModal(); 33 | })(); 34 | -------------------------------------------------------------------------------- /wwwroot/js/ui-popover.js: -------------------------------------------------------------------------------- 1 | // /** 2 | // * UI Tooltips & Popovers 3 | // */ 4 | 5 | 'use strict'; 6 | 7 | (function () { 8 | const popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]')); 9 | const popoverList = popoverTriggerList.map(function (popoverTriggerEl) { 10 | // added { html: true, sanitize: false } option to render button in content area of popover 11 | return new bootstrap.Popover(popoverTriggerEl, { html: true, sanitize: false }); 12 | }); 13 | })(); 14 | -------------------------------------------------------------------------------- /wwwroot/js/ui-toasts.js: -------------------------------------------------------------------------------- 1 | /** 2 | * UI Toasts 3 | */ 4 | 5 | 'use strict'; 6 | 7 | (function () { 8 | // Bootstrap toasts example 9 | // -------------------------------------------------------------------- 10 | const toastPlacementExample = document.querySelector('.toast-placement-ex'), 11 | toastPlacementBtn = document.querySelector('#showToastPlacement'); 12 | let selectedType, selectedPlacement, toastPlacement; 13 | 14 | // Dispose toast when open another 15 | function toastDispose(toast) { 16 | if (toast && toast._element !== null) { 17 | if (toastPlacementExample) { 18 | toastPlacementExample.querySelectorAll('i[class^="ri-"]').forEach(function (element) { 19 | element.classList.remove(selectedType); 20 | }); 21 | DOMTokenList.prototype.remove.apply(toastPlacementExample.classList, selectedPlacement); 22 | } 23 | toast.dispose(); 24 | } 25 | } 26 | // Placement Button click 27 | if (toastPlacementBtn) { 28 | toastPlacementBtn.onclick = function () { 29 | if (toastPlacement) { 30 | toastDispose(toastPlacement); 31 | } 32 | selectedType = document.querySelector('#selectTypeOpt').value; 33 | selectedPlacement = document.querySelector('#selectPlacement').value.split(' '); 34 | 35 | toastPlacementExample.querySelectorAll('i[class^="ri-"]').forEach(function (element) { 36 | element.classList.add(selectedType); 37 | }); 38 | DOMTokenList.prototype.add.apply(toastPlacementExample.classList, selectedPlacement); 39 | toastPlacement = new bootstrap.Toast(toastPlacementExample); 40 | toastPlacement.show(); 41 | }; 42 | } 43 | })(); 44 | -------------------------------------------------------------------------------- /wwwroot/vendor/css/pages/page-account-settings.css: -------------------------------------------------------------------------------- 1 | .api-key-actions { 2 | position: absolute !important; 3 | top: 0.75rem; 4 | right: 0.5rem; 5 | } 6 | -------------------------------------------------------------------------------- /wwwroot/vendor/css/pages/page-auth.css: -------------------------------------------------------------------------------- 1 | .authentication-wrapper { 2 | display: flex; 3 | flex-basis: 100%; 4 | min-height: 100vh; 5 | width: 100%; 6 | } 7 | .authentication-wrapper .authentication-inner { 8 | width: 100%; 9 | } 10 | .authentication-wrapper.authentication-basic { 11 | align-items: center; 12 | justify-content: center; 13 | } 14 | .authentication-wrapper .auth-cover-illustration { 15 | z-index: 1; 16 | max-inline-size: 38rem; 17 | } 18 | .authentication-wrapper .authentication-image-object-left { 19 | position: absolute; 20 | bottom: 6%; 21 | inset-inline-start: 4%; 22 | } 23 | .authentication-wrapper .authentication-image-object-right { 24 | position: absolute; 25 | bottom: 7%; 26 | inset-inline-end: 4%; 27 | } 28 | .authentication-wrapper .authentication-image { 29 | z-index: -1; 30 | inline-size: 100%; 31 | position: absolute; 32 | inset-inline-start: 0; 33 | bottom: 0; 34 | } 35 | .authentication-wrapper .authentication-image-model { 36 | width: 768px; 37 | } 38 | .authentication-wrapper.authentication-cover { 39 | align-items: flex-start; 40 | } 41 | .authentication-wrapper.authentication-cover .authentication-inner { 42 | min-height: 100vh; 43 | position: relative; 44 | } 45 | .authentication-wrapper.authentication-cover .authentication-image { 46 | inset-inline-start: unset; 47 | } 48 | .authentication-wrapper.authentication-cover .authentication-image-tree { 49 | position: absolute; 50 | bottom: 4rem; 51 | left: 3rem; 52 | } 53 | .authentication-wrapper.authentication-basic .authentication-inner { 54 | max-width: 460px; 55 | } 56 | .authentication-wrapper .auth-input-wrapper .auth-input { 57 | max-width: 50px; 58 | padding-left: 0.4rem; 59 | padding-right: 0.4rem; 60 | font-size: 150%; 61 | } 62 | 63 | @media (max-width: 575.98px) { 64 | .authentication-wrapper .auth-input-wrapper .auth-input { 65 | font-size: 1.125rem; 66 | } 67 | } 68 | .light-style .authentication-wrapper .authentication-bg { 69 | background-color: #fff; 70 | } 71 | -------------------------------------------------------------------------------- /wwwroot/vendor/css/pages/page-icons.css: -------------------------------------------------------------------------------- 1 | #icons-container .icon-card { 2 | width: 128px; 3 | } 4 | 5 | @media (max-width: 1024px) { 6 | #icons-container .icon-card { 7 | width: 126px; 8 | } 9 | } 10 | @media (max-width: 767.98px) { 11 | #icons-container .icon-card { 12 | width: 131px; 13 | } 14 | } 15 | @media (max-width: 414px) { 16 | #icons-container .icon-card { 17 | width: 110px; 18 | } 19 | } 20 | @media (max-width: 375px) { 21 | #icons-container .icon-card { 22 | width: 150px; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /wwwroot/vendor/css/pages/page-misc.css: -------------------------------------------------------------------------------- 1 | .misc-wrapper { 2 | display: flex; 3 | flex-direction: column; 4 | align-items: center; 5 | min-height: 100vh; 6 | justify-content: center; 7 | position: relative; 8 | padding: 1.25rem; 9 | } 10 | 11 | .misc-bg { 12 | inline-size: 100%; 13 | position: absolute; 14 | inset-inline-start: 0; 15 | bottom: 0; 16 | } 17 | 18 | .misc-object, 19 | .misc-object-right { 20 | position: absolute; 21 | z-index: 1; 22 | } 23 | 24 | .misc-object { 25 | bottom: 6%; 26 | left: 3%; 27 | } 28 | 29 | .misc-object-right { 30 | bottom: 7%; 31 | right: 3%; 32 | } 33 | 34 | .misc-model { 35 | position: relative; 36 | bottom: 3rem; 37 | } 38 | -------------------------------------------------------------------------------- /wwwroot/vendor/fonts/remixicon/remixicon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-bootstrap-html-aspnet-core-mvc-admin-template-free/2ecde34f99cfbb3936df3ea2e1d3df9758517a34/wwwroot/vendor/fonts/remixicon/remixicon.eot -------------------------------------------------------------------------------- /wwwroot/vendor/fonts/remixicon/remixicon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-bootstrap-html-aspnet-core-mvc-admin-template-free/2ecde34f99cfbb3936df3ea2e1d3df9758517a34/wwwroot/vendor/fonts/remixicon/remixicon.ttf -------------------------------------------------------------------------------- /wwwroot/vendor/fonts/remixicon/remixicon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-bootstrap-html-aspnet-core-mvc-admin-template-free/2ecde34f99cfbb3936df3ea2e1d3df9758517a34/wwwroot/vendor/fonts/remixicon/remixicon.woff -------------------------------------------------------------------------------- /wwwroot/vendor/fonts/remixicon/remixicon.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themeselection/materio-bootstrap-html-aspnet-core-mvc-admin-template-free/2ecde34f99cfbb3936df3ea2e1d3df9758517a34/wwwroot/vendor/fonts/remixicon/remixicon.woff2 -------------------------------------------------------------------------------- /wwwroot/vendor/libs/highlight/highlight-github.css: -------------------------------------------------------------------------------- 1 | @import 'highlight.js/styles/github.css'; 2 | -------------------------------------------------------------------------------- /wwwroot/vendor/libs/highlight/highlight.css: -------------------------------------------------------------------------------- 1 | pre code.hljs { 2 | display: block; 3 | overflow-x: auto; 4 | padding: 1em; 5 | } 6 | 7 | code.hljs { 8 | padding: 3px 5px; 9 | } 10 | 11 | /* 12 | 13 | Atom One Light by Daniel Gamage 14 | Original One Light Syntax theme from https://github.com/atom/one-light-syntax 15 | 16 | base: #fafafa 17 | mono-1: #383a42 18 | mono-2: #686b77 19 | mono-3: #a0a1a7 20 | hue-1: #0184bb 21 | hue-2: #4078f2 22 | hue-3: #a626a4 23 | hue-4: #50a14f 24 | hue-5: #e45649 25 | hue-5-2: #c91243 26 | hue-6: #986801 27 | hue-6-2: #c18401 28 | 29 | */ 30 | .hljs { 31 | color: #383a42; 32 | background: #fafafa; 33 | } 34 | 35 | .hljs-comment, 36 | .hljs-quote { 37 | color: #a0a1a7; 38 | font-style: italic; 39 | } 40 | 41 | .hljs-doctag, 42 | .hljs-keyword, 43 | .hljs-formula { 44 | color: #a626a4; 45 | } 46 | 47 | .hljs-section, 48 | .hljs-name, 49 | .hljs-selector-tag, 50 | .hljs-deletion, 51 | .hljs-subst { 52 | color: #e45649; 53 | } 54 | 55 | .hljs-literal { 56 | color: #0184bb; 57 | } 58 | 59 | .hljs-string, 60 | .hljs-regexp, 61 | .hljs-addition, 62 | .hljs-attribute, 63 | .hljs-meta .hljs-string { 64 | color: #50a14f; 65 | } 66 | 67 | .hljs-attr, 68 | .hljs-variable, 69 | .hljs-template-variable, 70 | .hljs-type, 71 | .hljs-selector-class, 72 | .hljs-selector-attr, 73 | .hljs-selector-pseudo, 74 | .hljs-number { 75 | color: #986801; 76 | } 77 | 78 | .hljs-symbol, 79 | .hljs-bullet, 80 | .hljs-link, 81 | .hljs-meta, 82 | .hljs-selector-id, 83 | .hljs-title { 84 | color: #4078f2; 85 | } 86 | 87 | .hljs-built_in, 88 | .hljs-title.class_, 89 | .hljs-class .hljs-title { 90 | color: #c18401; 91 | } 92 | 93 | .hljs-emphasis { 94 | font-style: italic; 95 | } 96 | 97 | .hljs-strong { 98 | font-weight: bold; 99 | } 100 | 101 | .hljs-link { 102 | text-decoration: underline; 103 | } 104 | --------------------------------------------------------------------------------