├── .editorconfig ├── .gitignore ├── LICENSE ├── README.md ├── dist ├── 401.html ├── 404.html ├── 500.html ├── assets │ ├── demo │ │ ├── chart-area-demo.js │ │ ├── chart-bar-demo.js │ │ ├── chart-pie-demo.js │ │ └── datatables-demo.js │ └── img │ │ └── error-404-monochrome.svg ├── charts.html ├── css │ └── styles.css ├── index.html ├── js │ ├── datatables-simple-demo.js │ └── scripts.js ├── layout-sidenav-light.html ├── layout-static.html ├── login.html ├── password.html ├── register.html └── tables.html ├── package-lock.json ├── package.json ├── scripts ├── build-assets.js ├── build-pug.js ├── build-scripts.js ├── build-scss.js ├── clean.js ├── render-assets.js ├── render-pug.js ├── render-scripts.js ├── render-scss.js ├── sb-watch.js ├── start-debug.js └── start.js └── src ├── assets ├── demo │ ├── chart-area-demo.js │ ├── chart-bar-demo.js │ ├── chart-pie-demo.js │ └── datatables-demo.js └── img │ └── error-404-monochrome.svg ├── js ├── datatables-simple-demo.js └── scripts.js ├── pug ├── layouts │ ├── authentication.pug │ ├── dashboard.pug │ ├── error.pug │ └── includes │ │ ├── footer.pug │ │ ├── head │ │ ├── css.pug │ │ ├── icons.pug │ │ ├── meta.pug │ │ └── title.pug │ │ ├── navigation │ │ ├── sidenav.pug │ │ └── topnav.pug │ │ └── scripts.pug └── pages │ ├── 401.pug │ ├── 404.pug │ ├── 500.pug │ ├── charts.pug │ ├── includes │ ├── datatable.pug │ └── page-header.pug │ ├── index.pug │ ├── layout-sidenav-light.pug │ ├── layout-static.pug │ ├── login.pug │ ├── password.pug │ ├── register.pug │ └── tables.pug └── scss ├── _global.scss ├── _variables.scss ├── layout ├── _authentication.scss ├── _dashboard-default.scss ├── _dashboard-fixed.scss └── _error.scss ├── navigation ├── _nav.scss ├── _topnav.scss └── sidenav │ ├── _sidenav-dark.scss │ ├── _sidenav-light.scss │ └── _sidenav.scss ├── plugins └── simple-datatables.scss ├── styles.scss └── variables ├── _navigation.scss └── _spacing.scss /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 4 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2013-2023 Start Bootstrap LLC 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [Start Bootstrap - SB Admin](https://startbootstrap.com/template/sb-admin/) 2 | 3 | [SB Admin](https://startbootstrap.com/template/sb-admin/) is an open source, admin dashboard template for [Bootstrap](https://getbootstrap.com/) created by [Start Bootstrap](https://startbootstrap.com/). 4 | 5 | ## Preview 6 | 7 | [![SB Admin Preview](https://assets.startbootstrap.com/img/screenshots/templates/sb-admin.png)](https://startbootstrap.github.io/startbootstrap-sb-admin/) 8 | 9 | **[View Live Preview](https://startbootstrap.github.io/startbootstrap-sb-admin/)** 10 | 11 | ## Status 12 | 13 | [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/StartBootstrap/startbootstrap-sb-admin/master/LICENSE) 14 | [![npm version](https://img.shields.io/npm/v/startbootstrap-sb-admin.svg)](https://www.npmjs.com/package/startbootstrap-sb-admin) 15 | 16 | ## Download and Installation 17 | 18 | To begin using this template, choose one of the following options to get started: 19 | 20 | * [Download the latest release on Start Bootstrap](https://startbootstrap.com/template/sb-admin/) 21 | * Install via npm: `npm i startbootstrap-sb-admin` 22 | * Clone the repo: `git clone https://github.com/StartBootstrap/startbootstrap-sb-admin.git` 23 | * [Fork, Clone, or Download on GitHub](https://github.com/StartBootstrap/startbootstrap-sb-admin) 24 | 25 | ## Usage 26 | 27 | ### Basic Usage 28 | 29 | After downloading, simply edit the HTML and CSS files included with `dist` directory. These are the only files you need to worry about, you can ignore everything else! To preview the changes you make to the code, you can open the `index.html` file in your web browser. 30 | 31 | ### Advanced Usage 32 | 33 | Clone the source files of the theme and navigate into the theme's root directory. Run `npm install` and then run `npm start` which will open up a preview of the template in your default browser, watch for changes to core template files, and live reload the browser when changes are saved. You can view the `package.json` file to see which scripts are included. 34 | 35 | #### npm Scripts 36 | 37 | * `npm run build` builds the project - this builds assets, HTML, JS, and CSS into `dist` 38 | * `npm run build:assets` copies the files in the `src/assets/` directory into `dist` 39 | * `npm run build:pug` compiles the Pug located in the `src/pug/` directory into `dist` 40 | * `npm run build:scripts` brings the `src/js/scripts.js` file into `dist` 41 | * `npm run build:scss` compiles the SCSS files located in the `src/scss/` directory into `dist` 42 | * `npm run clean` deletes the `dist` directory to prepare for rebuilding the project 43 | * `npm run start:debug` runs the project in debug mode 44 | * `npm start` or `npm run start` runs the project, launches a live preview in your default browser, and watches for changes made to files in `src` 45 | 46 | You must have npm installed in order to use this build environment. 47 | 48 | ## Bugs and Issues 49 | 50 | Have a bug or an issue with this template? [Open a new issue](https://github.com/StartBootstrap/startbootstrap-sb-admin/issues) here on GitHub or leave a comment on the [template overview page at Start Bootstrap](https://startbootstrap.com/template/sb-admin/). 51 | 52 | ## Custom Builds 53 | 54 | You can hire Start Bootstrap to create a custom build of any template, or create something from scratch using Bootstrap. For more information, visit the **[custom design services page](https://startbootstrap.com/bootstrap-design-services/)**. 55 | 56 | ## About 57 | 58 | Start Bootstrap is an open source library of free Bootstrap templates and themes. All of the free templates and themes on Start Bootstrap are released under the MIT license, which means you can use them for any purpose, even for commercial projects. 59 | 60 | * 61 | * 62 | 63 | Start Bootstrap was created by and is maintained by **[David Miller](https://davidmiller.io/)**. 64 | 65 | * 66 | * 67 | * 68 | 69 | Start Bootstrap is based on the [Bootstrap](https://getbootstrap.com/) framework created by [Mark Otto](https://twitter.com/mdo) and [Jacob Thorton](https://twitter.com/fat). 70 | 71 | ## Copyright and License 72 | 73 | Copyright 2013-2023 Start Bootstrap LLC. Code released under the [MIT](https://github.com/StartBootstrap/startbootstrap-sb-admin/blob/master/LICENSE) license. 74 | -------------------------------------------------------------------------------- /dist/401.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 404 Error - SB Admin 10 | 11 | 12 | 13 | 14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |

401

22 |

Unauthorized

23 |

Access to this resource is denied.

24 | 25 | 26 | Return to Dashboard 27 | 28 |
29 |
30 |
31 |
32 |
33 |
34 | 48 |
49 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /dist/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 404 Error - SB Admin 10 | 11 | 12 | 13 | 14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 | 22 |

This requested URL was not found on this server.

23 | 24 | 25 | Return to Dashboard 26 | 27 |
28 |
29 |
30 |
31 |
32 |
33 | 47 |
48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /dist/500.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 404 Error - SB Admin 10 | 11 | 12 | 13 | 14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |

500

22 |

Internal Server Error

23 | 24 | 25 | Return to Dashboard 26 | 27 |
28 |
29 |
30 |
31 |
32 |
33 | 47 |
48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /dist/assets/demo/chart-area-demo.js: -------------------------------------------------------------------------------- 1 | // Set new default font family and font color to mimic Bootstrap's default styling 2 | Chart.defaults.global.defaultFontFamily = '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif'; 3 | Chart.defaults.global.defaultFontColor = '#292b2c'; 4 | 5 | // Area Chart Example 6 | var ctx = document.getElementById("myAreaChart"); 7 | var myLineChart = new Chart(ctx, { 8 | type: 'line', 9 | data: { 10 | labels: ["Mar 1", "Mar 2", "Mar 3", "Mar 4", "Mar 5", "Mar 6", "Mar 7", "Mar 8", "Mar 9", "Mar 10", "Mar 11", "Mar 12", "Mar 13"], 11 | datasets: [{ 12 | label: "Sessions", 13 | lineTension: 0.3, 14 | backgroundColor: "rgba(2,117,216,0.2)", 15 | borderColor: "rgba(2,117,216,1)", 16 | pointRadius: 5, 17 | pointBackgroundColor: "rgba(2,117,216,1)", 18 | pointBorderColor: "rgba(255,255,255,0.8)", 19 | pointHoverRadius: 5, 20 | pointHoverBackgroundColor: "rgba(2,117,216,1)", 21 | pointHitRadius: 50, 22 | pointBorderWidth: 2, 23 | data: [10000, 30162, 26263, 18394, 18287, 28682, 31274, 33259, 25849, 24159, 32651, 31984, 38451], 24 | }], 25 | }, 26 | options: { 27 | scales: { 28 | xAxes: [{ 29 | time: { 30 | unit: 'date' 31 | }, 32 | gridLines: { 33 | display: false 34 | }, 35 | ticks: { 36 | maxTicksLimit: 7 37 | } 38 | }], 39 | yAxes: [{ 40 | ticks: { 41 | min: 0, 42 | max: 40000, 43 | maxTicksLimit: 5 44 | }, 45 | gridLines: { 46 | color: "rgba(0, 0, 0, .125)", 47 | } 48 | }], 49 | }, 50 | legend: { 51 | display: false 52 | } 53 | } 54 | }); 55 | -------------------------------------------------------------------------------- /dist/assets/demo/chart-bar-demo.js: -------------------------------------------------------------------------------- 1 | // Set new default font family and font color to mimic Bootstrap's default styling 2 | Chart.defaults.global.defaultFontFamily = '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif'; 3 | Chart.defaults.global.defaultFontColor = '#292b2c'; 4 | 5 | // Bar Chart Example 6 | var ctx = document.getElementById("myBarChart"); 7 | var myLineChart = new Chart(ctx, { 8 | type: 'bar', 9 | data: { 10 | labels: ["January", "February", "March", "April", "May", "June"], 11 | datasets: [{ 12 | label: "Revenue", 13 | backgroundColor: "rgba(2,117,216,1)", 14 | borderColor: "rgba(2,117,216,1)", 15 | data: [4215, 5312, 6251, 7841, 9821, 14984], 16 | }], 17 | }, 18 | options: { 19 | scales: { 20 | xAxes: [{ 21 | time: { 22 | unit: 'month' 23 | }, 24 | gridLines: { 25 | display: false 26 | }, 27 | ticks: { 28 | maxTicksLimit: 6 29 | } 30 | }], 31 | yAxes: [{ 32 | ticks: { 33 | min: 0, 34 | max: 15000, 35 | maxTicksLimit: 5 36 | }, 37 | gridLines: { 38 | display: true 39 | } 40 | }], 41 | }, 42 | legend: { 43 | display: false 44 | } 45 | } 46 | }); 47 | -------------------------------------------------------------------------------- /dist/assets/demo/chart-pie-demo.js: -------------------------------------------------------------------------------- 1 | // Set new default font family and font color to mimic Bootstrap's default styling 2 | Chart.defaults.global.defaultFontFamily = '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif'; 3 | Chart.defaults.global.defaultFontColor = '#292b2c'; 4 | 5 | // Pie Chart Example 6 | var ctx = document.getElementById("myPieChart"); 7 | var myPieChart = new Chart(ctx, { 8 | type: 'pie', 9 | data: { 10 | labels: ["Blue", "Red", "Yellow", "Green"], 11 | datasets: [{ 12 | data: [12.21, 15.58, 11.25, 8.32], 13 | backgroundColor: ['#007bff', '#dc3545', '#ffc107', '#28a745'], 14 | }], 15 | }, 16 | }); 17 | -------------------------------------------------------------------------------- /dist/assets/demo/datatables-demo.js: -------------------------------------------------------------------------------- 1 | // Call the dataTables jQuery plugin 2 | $(document).ready(function() { 3 | $('#dataTable').DataTable(); 4 | }); 5 | -------------------------------------------------------------------------------- /dist/assets/img/error-404-monochrome.svg: -------------------------------------------------------------------------------- 1 | error-404-monochrome -------------------------------------------------------------------------------- /dist/charts.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Charts - SB Admin 10 | 11 | 12 | 13 | 14 | 39 |
40 |
41 | 108 |
109 |
110 |
111 |
112 |

Charts

113 |
    114 |
  1. Dashboard
    2. 115 |
  2. Charts
    3. 116 |
117 |
118 |
119 | Chart.js is a third party plugin that is used to generate the charts in this template. The charts below have been customized - for further customization options, please visit the official 120 | Chart.js documentation 121 | . 122 |
123 |
124 |
125 |
126 | 127 | Area Chart Example 128 |
129 |
130 |
Updated yesterday at 11:59 PM
131 |
132 |
133 |
134 |
135 |
136 | 137 | Bar Chart Example 138 |
139 |
140 |
Updated yesterday at 11:59 PM
141 |
142 |
143 |
144 |
145 |
146 | 147 | Pie Chart Example 148 |
149 |
150 |
Updated yesterday at 11:59 PM
151 |
152 |
153 |
154 |
155 |
156 | 168 |
169 |
170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | -------------------------------------------------------------------------------- /dist/js/datatables-simple-demo.js: -------------------------------------------------------------------------------- 1 | window.addEventListener('DOMContentLoaded', event => { 2 | // Simple-DataTables 3 | // https://github.com/fiduswriter/Simple-DataTables/wiki 4 | 5 | const datatablesSimple = document.getElementById('datatablesSimple'); 6 | if (datatablesSimple) { 7 | new simpleDatatables.DataTable(datatablesSimple); 8 | } 9 | }); 10 | -------------------------------------------------------------------------------- /dist/js/scripts.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Start Bootstrap - SB Admin v7.0.7 (https://startbootstrap.com/template/sb-admin) 3 | * Copyright 2013-2023 Start Bootstrap 4 | * Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-sb-admin/blob/master/LICENSE) 5 | */ 6 | // 7 | // Scripts 8 | // 9 | 10 | window.addEventListener('DOMContentLoaded', event => { 11 | 12 | // Toggle the side navigation 13 | const sidebarToggle = document.body.querySelector('#sidebarToggle'); 14 | if (sidebarToggle) { 15 | // Uncomment Below to persist sidebar toggle between refreshes 16 | // if (localStorage.getItem('sb|sidebar-toggle') === 'true') { 17 | // document.body.classList.toggle('sb-sidenav-toggled'); 18 | // } 19 | sidebarToggle.addEventListener('click', event => { 20 | event.preventDefault(); 21 | document.body.classList.toggle('sb-sidenav-toggled'); 22 | localStorage.setItem('sb|sidebar-toggle', document.body.classList.contains('sb-sidenav-toggled')); 23 | }); 24 | } 25 | 26 | }); 27 | -------------------------------------------------------------------------------- /dist/layout-sidenav-light.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Sidenav Light - SB Admin 10 | 11 | 12 | 13 | 14 | 39 |
40 |
41 | 108 |
109 |
110 |
111 |
112 |

Sidenav Light

113 |
    114 |
  1. Dashboard
    2. 115 |
  2. Sidenav Light
    3. 116 |
117 |
118 |
119 | This page is an example of using the light side navigation option. By appending the 120 | .sb-sidenav-light 121 | class to the 122 | .sb-sidenav 123 | class, the side navigation will take on a light color scheme. The 124 | .sb-sidenav-dark 125 | is also available for a darker option. 126 |
127 |
128 |
129 |
130 | 142 |
143 |
144 | 145 | 146 | 147 | 148 | -------------------------------------------------------------------------------- /dist/layout-static.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Static Navigation - SB Admin 10 | 11 | 12 | 13 | 14 | 39 |
40 |
41 | 108 |
109 |
110 |
111 |
112 |

Static Navigation

113 |
    114 |
  1. Dashboard
    2. 115 |
  2. Static Navigation
    3. 116 |
117 |
118 |
119 |

120 | This page is an example of using static navigation. By removing the 121 | .sb-nav-fixed 122 | class from the 123 | body 124 | , the top navigation and side navigation will become static on scroll. Scroll down this page to see an example. 125 |

126 |
127 |
128 |
129 |
When scrolling, the navigation stays at the top of the page. This is the end of the static navigation demo.
130 |
131 |
132 | 144 |
145 |
146 | 147 | 148 | 149 | 150 | -------------------------------------------------------------------------------- /dist/login.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Login - SB Admin 10 | 11 | 12 | 13 | 14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |

Login

22 |
23 |
24 |
25 | 26 | 27 |
28 |
29 | 30 | 31 |
32 |
33 | 34 | 35 |
36 |
37 | Forgot Password? 38 | Login 39 |
40 |
41 |
42 |
43 |
Need an account? Sign up!
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 | 65 |
66 | 67 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /dist/password.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Password Reset - SB Admin 10 | 11 | 12 | 13 | 14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |

Password Recovery

22 |
23 |
Enter your email address and we will send you a link to reset your password.
24 |
25 |
26 | 27 | 28 |
29 |
30 | Return to login 31 | Reset Password 32 |
33 |
34 |
35 |
36 |
Need an account? Sign up!
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 | 58 |
59 | 60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /dist/register.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Register - SB Admin 10 | 11 | 12 | 13 | 14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |

Create Account

22 |
23 |
24 |
25 |
26 |
27 | 28 | 29 |
30 |
31 |
32 |
33 | 34 | 35 |
36 |
37 |
38 |
39 | 40 | 41 |
42 |
43 |
44 |
45 | 46 | 47 |
48 |
49 |
50 |
51 | 52 | 53 |
54 |
55 |
56 |
57 |
Create Account
58 |
59 |
60 |
61 |
62 |
Have an account? Go to login
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 | 84 |
85 | 86 | 87 | 88 | 89 | -------------------------------------------------------------------------------- /dist/tables.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Tables - SB Admin 10 | 11 | 12 | 13 | 14 | 15 | 40 |
41 |
42 | 109 |
110 |
111 |
112 |
113 |

Tables

114 |
    115 |
  1. Dashboard
    2. 116 |
  2. Tables
    3. 117 |
118 |
119 |
120 | DataTables is a third party plugin that is used to generate the demo table below. For more information about DataTables, please visit the 121 | official DataTables documentation 122 | . 123 |
124 |
125 |
126 |
127 | 128 | DataTable Example 129 |
130 |
131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 | 289 | 290 | 291 | 292 | 293 | 294 | 295 | 296 | 297 | 298 | 299 | 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | 309 | 310 | 311 | 312 | 313 | 314 | 315 | 316 | 317 | 318 | 319 | 320 | 321 | 322 | 323 | 324 | 325 | 326 | 327 | 328 | 329 | 330 | 331 | 332 | 333 | 334 | 335 | 336 | 337 | 338 | 339 | 340 | 341 | 342 | 343 | 344 | 345 | 346 | 347 | 348 | 349 | 350 | 351 | 352 | 353 | 354 | 355 | 356 | 357 | 358 | 359 | 360 | 361 | 362 | 363 | 364 | 365 | 366 | 367 | 368 | 369 | 370 | 371 | 372 | 373 | 374 | 375 | 376 | 377 | 378 | 379 | 380 | 381 | 382 | 383 | 384 | 385 | 386 | 387 | 388 | 389 | 390 | 391 | 392 | 393 | 394 | 395 | 396 | 397 | 398 | 399 | 400 | 401 | 402 | 403 | 404 | 405 | 406 | 407 | 408 | 409 | 410 | 411 | 412 | 413 | 414 | 415 | 416 | 417 | 418 | 419 | 420 | 421 | 422 | 423 | 424 | 425 | 426 | 427 | 428 | 429 | 430 | 431 | 432 | 433 | 434 | 435 | 436 | 437 | 438 | 439 | 440 | 441 | 442 | 443 | 444 | 445 | 446 | 447 | 448 | 449 | 450 | 451 | 452 | 453 | 454 | 455 | 456 | 457 | 458 | 459 | 460 | 461 | 462 | 463 | 464 | 465 | 466 | 467 | 468 | 469 | 470 | 471 | 472 | 473 | 474 | 475 | 476 | 477 | 478 | 479 | 480 | 481 | 482 | 483 | 484 | 485 | 486 | 487 | 488 | 489 | 490 | 491 | 492 | 493 | 494 | 495 | 496 | 497 | 498 | 499 | 500 | 501 | 502 | 503 | 504 | 505 | 506 | 507 | 508 | 509 | 510 | 511 | 512 | 513 | 514 | 515 | 516 | 517 | 518 | 519 | 520 | 521 | 522 | 523 | 524 | 525 | 526 | 527 | 528 | 529 | 530 | 531 | 532 | 533 | 534 | 535 | 536 | 537 | 538 | 539 | 540 | 541 | 542 | 543 | 544 | 545 | 546 | 547 | 548 | 549 | 550 | 551 | 552 | 553 | 554 | 555 | 556 | 557 | 558 | 559 | 560 | 561 | 562 | 563 | 564 | 565 | 566 | 567 | 568 | 569 | 570 | 571 | 572 | 573 | 574 | 575 | 576 | 577 | 578 | 579 | 580 | 581 | 582 | 583 | 584 | 585 | 586 | 587 | 588 | 589 | 590 | 591 | 592 | 593 | 594 | 595 | 596 | 597 | 598 | 599 | 600 | 601 | 602 | 603 | 604 | 605 | 606 | 607 | 608 | 609 | 610 |
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
611 |
612 |
613 |
614 |
615 | 627 |
628 |
629 | 630 | 631 | 632 | 633 | 634 | 635 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "SB Admin", 3 | "name": "startbootstrap-sb-admin", 4 | "version": "7.0.7", 5 | "scripts": { 6 | "build": "npm run clean && npm run build:pug && npm run build:scss && npm run build:scripts && npm run build:assets", 7 | "build:assets": "node scripts/build-assets.js", 8 | "build:pug": "node scripts/build-pug.js", 9 | "build:scripts": "node scripts/build-scripts.js", 10 | "build:scss": "node scripts/build-scss.js", 11 | "clean": "node scripts/clean.js", 12 | "start": "npm run build && node scripts/start.js", 13 | "start:debug": "npm run build && node scripts/start-debug.js" 14 | }, 15 | "description": "A free admin dashboard template based on Bootstrap 4, created by Start Bootstrap.", 16 | "keywords": [ 17 | "css", 18 | "sass", 19 | "html", 20 | "responsive", 21 | "theme", 22 | "template", 23 | "admin", 24 | "app", 25 | "dashboard" 26 | ], 27 | "homepage": "https://startbootstrap.com/template/sb-admin", 28 | "bugs": { 29 | "url": "https://github.com/StartBootstrap/startbootstrap-sb-admin/issues", 30 | "email": "feedback@startbootstrap.com" 31 | }, 32 | "license": "MIT", 33 | "author": "Start Bootstrap", 34 | "contributors": [ 35 | "David Miller (https://davidmiller.io/)" 36 | ], 37 | "repository": { 38 | "type": "git", 39 | "url": "https://github.com/StartBootstrap/startbootstrap-sb-admin.git" 40 | }, 41 | "dependencies": { 42 | "bootstrap": "5.2.3" 43 | }, 44 | "devDependencies": { 45 | "autoprefixer": "10.4.14", 46 | "browser-sync": "2.29.1", 47 | "chokidar": "3.5.3", 48 | "concurrently": "6.3.0", 49 | "postcss": "8.4.21", 50 | "prettier": "2.8.6", 51 | "pug": "3.0.2", 52 | "sass": "1.60.0", 53 | "shelljs": "0.8.5", 54 | "upath": "2.0.1" 55 | } 56 | } -------------------------------------------------------------------------------- /scripts/build-assets.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const renderAssets = require('./render-assets'); 4 | 5 | renderAssets(); -------------------------------------------------------------------------------- /scripts/build-pug.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | const upath = require('upath'); 3 | const sh = require('shelljs'); 4 | const renderPug = require('./render-pug'); 5 | 6 | const srcPath = upath.resolve(upath.dirname(__filename), '../src'); 7 | 8 | sh.find(srcPath).forEach(_processFile); 9 | 10 | function _processFile(filePath) { 11 | if ( 12 | filePath.match(/\.pug$/) 13 | && !filePath.match(/include/) 14 | && !filePath.match(/mixin/) 15 | && !filePath.match(/\/pug\/layouts\//) 16 | ) { 17 | renderPug(filePath); 18 | } 19 | } -------------------------------------------------------------------------------- /scripts/build-scripts.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const renderScripts = require('./render-scripts'); 4 | 5 | renderScripts(); -------------------------------------------------------------------------------- /scripts/build-scss.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const renderSCSS = require('./render-scss'); 4 | 5 | renderSCSS(); 6 | -------------------------------------------------------------------------------- /scripts/clean.js: -------------------------------------------------------------------------------- 1 | const sh = require('shelljs'); 2 | const upath = require('upath'); 3 | 4 | const destPath = upath.resolve(upath.dirname(__filename), '../dist'); 5 | 6 | sh.rm('-rf', `${destPath}/*`) 7 | 8 | -------------------------------------------------------------------------------- /scripts/render-assets.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | const fs = require('fs'); 3 | const upath = require('upath'); 4 | const sh = require('shelljs'); 5 | 6 | module.exports = function renderAssets() { 7 | const sourcePath = upath.resolve(upath.dirname(__filename), '../src/assets'); 8 | const destPath = upath.resolve(upath.dirname(__filename), '../dist/.'); 9 | 10 | sh.cp('-R', sourcePath, destPath) 11 | }; -------------------------------------------------------------------------------- /scripts/render-pug.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | const fs = require('fs'); 3 | const upath = require('upath'); 4 | const pug = require('pug'); 5 | const sh = require('shelljs'); 6 | const prettier = require('prettier'); 7 | 8 | module.exports = function renderPug(filePath) { 9 | const destPath = filePath.replace(/src\/pug\/\pages/, 'dist').replace(/\.pug$/, '.html'); 10 | const srcPath = upath.resolve(upath.dirname(__filename), '../src'); 11 | 12 | console.log(`### INFO: Rendering ${filePath} to ${destPath}`); 13 | const html = pug.renderFile(filePath, { 14 | doctype: 'html', 15 | filename: filePath, 16 | basedir: srcPath 17 | }); 18 | 19 | const destPathDirname = upath.dirname(destPath); 20 | if (!sh.test('-e', destPathDirname)) { 21 | sh.mkdir('-p', destPathDirname); 22 | } 23 | 24 | const prettified = prettier.format(html, { 25 | printWidth: 1000, 26 | tabWidth: 4, 27 | singleQuote: true, 28 | proseWrap: 'preserve', 29 | endOfLine: 'lf', 30 | parser: 'html', 31 | htmlWhitespaceSensitivity: 'ignore' 32 | }); 33 | 34 | fs.writeFileSync(destPath, prettified); 35 | }; -------------------------------------------------------------------------------- /scripts/render-scripts.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | const fs = require('fs'); 3 | const packageJSON = require('../package.json'); 4 | const upath = require('upath'); 5 | const sh = require('shelljs'); 6 | 7 | module.exports = function renderScripts() { 8 | 9 | const sourcePath = upath.resolve(upath.dirname(__filename), '../src/js'); 10 | const destPath = upath.resolve(upath.dirname(__filename), '../dist/.'); 11 | 12 | sh.cp('-R', sourcePath, destPath) 13 | 14 | const sourcePathScriptsJS = upath.resolve(upath.dirname(__filename), '../src/js/scripts.js'); 15 | const destPathScriptsJS = upath.resolve(upath.dirname(__filename), '../dist/js/scripts.js'); 16 | 17 | const copyright = `/*! 18 | * Start Bootstrap - ${packageJSON.title} v${packageJSON.version} (${packageJSON.homepage}) 19 | * Copyright 2013-${new Date().getFullYear()} ${packageJSON.author} 20 | * Licensed under ${packageJSON.license} (https://github.com/StartBootstrap/${packageJSON.name}/blob/master/LICENSE) 21 | */ 22 | ` 23 | const scriptsJS = fs.readFileSync(sourcePathScriptsJS); 24 | 25 | fs.writeFileSync(destPathScriptsJS, copyright + scriptsJS); 26 | }; -------------------------------------------------------------------------------- /scripts/render-scss.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | const autoprefixer = require('autoprefixer') 3 | const fs = require('fs'); 4 | const packageJSON = require('../package.json'); 5 | const upath = require('upath'); 6 | const postcss = require('postcss') 7 | const sass = require('sass'); 8 | const sh = require('shelljs'); 9 | 10 | const stylesPath = '../src/scss/styles.scss'; 11 | const destPath = upath.resolve(upath.dirname(__filename), '../dist/css/styles.css'); 12 | 13 | module.exports = function renderSCSS() { 14 | 15 | const results = sass.renderSync({ 16 | data: entryPoint, 17 | includePaths: [ 18 | upath.resolve(upath.dirname(__filename), '../node_modules') 19 | ], 20 | }); 21 | 22 | const destPathDirname = upath.dirname(destPath); 23 | if (!sh.test('-e', destPathDirname)) { 24 | sh.mkdir('-p', destPathDirname); 25 | } 26 | 27 | postcss([ autoprefixer ]).process(results.css, {from: 'styles.css', to: 'styles.css'}).then(result => { 28 | result.warnings().forEach(warn => { 29 | console.warn(warn.toString()) 30 | }) 31 | fs.writeFileSync(destPath, result.css.toString()); 32 | }) 33 | 34 | }; 35 | 36 | const entryPoint = `/*! 37 | * Start Bootstrap - ${packageJSON.title} v${packageJSON.version} (${packageJSON.homepage}) 38 | * Copyright 2013-${new Date().getFullYear()} ${packageJSON.author} 39 | * Licensed under ${packageJSON.license} (https://github.com/StartBootstrap/${packageJSON.name}/blob/master/LICENSE) 40 | */ 41 | @import "${stylesPath}" 42 | ` -------------------------------------------------------------------------------- /scripts/sb-watch.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const _ = require('lodash'); 4 | const chokidar = require('chokidar'); 5 | const upath = require('upath'); 6 | const renderAssets = require('./render-assets'); 7 | const renderPug = require('./render-pug'); 8 | const renderScripts = require('./render-scripts'); 9 | const renderSCSS = require('./render-scss'); 10 | 11 | const watcher = chokidar.watch('src', { 12 | persistent: true, 13 | }); 14 | 15 | let READY = false; 16 | 17 | process.title = 'pug-watch'; 18 | process.stdout.write('Loading'); 19 | let allPugFiles = {}; 20 | 21 | watcher.on('add', filePath => _processFile(upath.normalize(filePath), 'add')); 22 | watcher.on('change', filePath => _processFile(upath.normalize(filePath), 'change')); 23 | watcher.on('ready', () => { 24 | READY = true; 25 | console.log(' READY TO ROLL!'); 26 | }); 27 | 28 | _handleSCSS(); 29 | 30 | function _processFile(filePath, watchEvent) { 31 | 32 | if (!READY) { 33 | if (filePath.match(/\.pug$/)) { 34 | if (!filePath.match(/includes/) && !filePath.match(/mixins/) && !filePath.match(/\/pug\/layouts\//)) { 35 | allPugFiles[filePath] = true; 36 | } 37 | } 38 | process.stdout.write('.'); 39 | return; 40 | } 41 | 42 | console.log(`### INFO: File event: ${watchEvent}: ${filePath}`); 43 | 44 | if (filePath.match(/\.pug$/)) { 45 | return _handlePug(filePath, watchEvent); 46 | } 47 | 48 | if (filePath.match(/\.scss$/)) { 49 | if (watchEvent === 'change') { 50 | return _handleSCSS(filePath, watchEvent); 51 | } 52 | return; 53 | } 54 | 55 | if (filePath.match(/src\/js\//)) { 56 | return renderScripts(); 57 | } 58 | 59 | if (filePath.match(/src\/assets\//)) { 60 | return renderAssets(); 61 | } 62 | 63 | } 64 | 65 | function _handlePug(filePath, watchEvent) { 66 | if (watchEvent === 'change') { 67 | if (filePath.match(/includes/) || filePath.match(/mixins/) || filePath.match(/\/pug\/layouts\//)) { 68 | return _renderAllPug(); 69 | } 70 | return renderPug(filePath); 71 | } 72 | if (!filePath.match(/includes/) && !filePath.match(/mixins/) && !filePath.match(/\/pug\/layouts\//)) { 73 | return renderPug(filePath); 74 | } 75 | } 76 | 77 | function _renderAllPug() { 78 | console.log('### INFO: Rendering All'); 79 | _.each(allPugFiles, (value, filePath) => { 80 | renderPug(filePath); 81 | }); 82 | } 83 | 84 | function _handleSCSS() { 85 | renderSCSS(); 86 | } -------------------------------------------------------------------------------- /scripts/start-debug.js: -------------------------------------------------------------------------------- 1 | const concurrently = require('concurrently'); 2 | const upath = require('upath'); 3 | 4 | const browserSyncPath = upath.resolve(upath.dirname(__filename), '../node_modules/.bin/browser-sync'); 5 | 6 | concurrently([ 7 | { command: 'node --inspect scripts/sb-watch.js', name: 'SB_WATCH', prefixColor: 'bgBlue.bold' }, 8 | { 9 | command: `${browserSyncPath} dist -w --no-online`, 10 | name: 'SB_BROWSER_SYNC', 11 | prefixColor: 'bgBlue.bold', 12 | } 13 | ], { 14 | prefix: 'name', 15 | killOthers: ['failure', 'success'], 16 | }).then(success, failure); 17 | 18 | function success() { 19 | console.log('Success'); 20 | } 21 | 22 | function failure() { 23 | console.log('Failure'); 24 | } -------------------------------------------------------------------------------- /scripts/start.js: -------------------------------------------------------------------------------- 1 | const concurrently = require('concurrently'); 2 | const upath = require('upath'); 3 | 4 | const browserSyncPath = upath.resolve(upath.dirname(__filename), '../node_modules/.bin/browser-sync'); 5 | 6 | concurrently([ 7 | { command: 'node scripts/sb-watch.js', name: 'SB_WATCH', prefixColor: 'bgBlue.bold' }, 8 | { 9 | command: `"${browserSyncPath}" --reload-delay 2000 --reload-debounce 2000 dist -w --no-online`, 10 | name: 'SB_BROWSER_SYNC', 11 | prefixColor: 'bgGreen.bold', 12 | } 13 | ], { 14 | prefix: 'name', 15 | killOthers: ['failure', 'success'], 16 | }).then(success, failure); 17 | 18 | function success() { 19 | console.log('Success'); 20 | } 21 | 22 | function failure() { 23 | console.log('Failure'); 24 | } -------------------------------------------------------------------------------- /src/assets/demo/chart-area-demo.js: -------------------------------------------------------------------------------- 1 | // Set new default font family and font color to mimic Bootstrap's default styling 2 | Chart.defaults.global.defaultFontFamily = '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif'; 3 | Chart.defaults.global.defaultFontColor = '#292b2c'; 4 | 5 | // Area Chart Example 6 | var ctx = document.getElementById("myAreaChart"); 7 | var myLineChart = new Chart(ctx, { 8 | type: 'line', 9 | data: { 10 | labels: ["Mar 1", "Mar 2", "Mar 3", "Mar 4", "Mar 5", "Mar 6", "Mar 7", "Mar 8", "Mar 9", "Mar 10", "Mar 11", "Mar 12", "Mar 13"], 11 | datasets: [{ 12 | label: "Sessions", 13 | lineTension: 0.3, 14 | backgroundColor: "rgba(2,117,216,0.2)", 15 | borderColor: "rgba(2,117,216,1)", 16 | pointRadius: 5, 17 | pointBackgroundColor: "rgba(2,117,216,1)", 18 | pointBorderColor: "rgba(255,255,255,0.8)", 19 | pointHoverRadius: 5, 20 | pointHoverBackgroundColor: "rgba(2,117,216,1)", 21 | pointHitRadius: 50, 22 | pointBorderWidth: 2, 23 | data: [10000, 30162, 26263, 18394, 18287, 28682, 31274, 33259, 25849, 24159, 32651, 31984, 38451], 24 | }], 25 | }, 26 | options: { 27 | scales: { 28 | xAxes: [{ 29 | time: { 30 | unit: 'date' 31 | }, 32 | gridLines: { 33 | display: false 34 | }, 35 | ticks: { 36 | maxTicksLimit: 7 37 | } 38 | }], 39 | yAxes: [{ 40 | ticks: { 41 | min: 0, 42 | max: 40000, 43 | maxTicksLimit: 5 44 | }, 45 | gridLines: { 46 | color: "rgba(0, 0, 0, .125)", 47 | } 48 | }], 49 | }, 50 | legend: { 51 | display: false 52 | } 53 | } 54 | }); 55 | -------------------------------------------------------------------------------- /src/assets/demo/chart-bar-demo.js: -------------------------------------------------------------------------------- 1 | // Set new default font family and font color to mimic Bootstrap's default styling 2 | Chart.defaults.global.defaultFontFamily = '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif'; 3 | Chart.defaults.global.defaultFontColor = '#292b2c'; 4 | 5 | // Bar Chart Example 6 | var ctx = document.getElementById("myBarChart"); 7 | var myLineChart = new Chart(ctx, { 8 | type: 'bar', 9 | data: { 10 | labels: ["January", "February", "March", "April", "May", "June"], 11 | datasets: [{ 12 | label: "Revenue", 13 | backgroundColor: "rgba(2,117,216,1)", 14 | borderColor: "rgba(2,117,216,1)", 15 | data: [4215, 5312, 6251, 7841, 9821, 14984], 16 | }], 17 | }, 18 | options: { 19 | scales: { 20 | xAxes: [{ 21 | time: { 22 | unit: 'month' 23 | }, 24 | gridLines: { 25 | display: false 26 | }, 27 | ticks: { 28 | maxTicksLimit: 6 29 | } 30 | }], 31 | yAxes: [{ 32 | ticks: { 33 | min: 0, 34 | max: 15000, 35 | maxTicksLimit: 5 36 | }, 37 | gridLines: { 38 | display: true 39 | } 40 | }], 41 | }, 42 | legend: { 43 | display: false 44 | } 45 | } 46 | }); 47 | -------------------------------------------------------------------------------- /src/assets/demo/chart-pie-demo.js: -------------------------------------------------------------------------------- 1 | // Set new default font family and font color to mimic Bootstrap's default styling 2 | Chart.defaults.global.defaultFontFamily = '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif'; 3 | Chart.defaults.global.defaultFontColor = '#292b2c'; 4 | 5 | // Pie Chart Example 6 | var ctx = document.getElementById("myPieChart"); 7 | var myPieChart = new Chart(ctx, { 8 | type: 'pie', 9 | data: { 10 | labels: ["Blue", "Red", "Yellow", "Green"], 11 | datasets: [{ 12 | data: [12.21, 15.58, 11.25, 8.32], 13 | backgroundColor: ['#007bff', '#dc3545', '#ffc107', '#28a745'], 14 | }], 15 | }, 16 | }); 17 | -------------------------------------------------------------------------------- /src/assets/demo/datatables-demo.js: -------------------------------------------------------------------------------- 1 | // Call the dataTables jQuery plugin 2 | $(document).ready(function() { 3 | $('#dataTable').DataTable(); 4 | }); 5 | -------------------------------------------------------------------------------- /src/assets/img/error-404-monochrome.svg: -------------------------------------------------------------------------------- 1 | error-404-monochrome -------------------------------------------------------------------------------- /src/js/datatables-simple-demo.js: -------------------------------------------------------------------------------- 1 | window.addEventListener('DOMContentLoaded', event => { 2 | // Simple-DataTables 3 | // https://github.com/fiduswriter/Simple-DataTables/wiki 4 | 5 | const datatablesSimple = document.getElementById('datatablesSimple'); 6 | if (datatablesSimple) { 7 | new simpleDatatables.DataTable(datatablesSimple); 8 | } 9 | }); 10 | -------------------------------------------------------------------------------- /src/js/scripts.js: -------------------------------------------------------------------------------- 1 | // 2 | // Scripts 3 | // 4 | 5 | window.addEventListener('DOMContentLoaded', event => { 6 | 7 | // Toggle the side navigation 8 | const sidebarToggle = document.body.querySelector('#sidebarToggle'); 9 | if (sidebarToggle) { 10 | // Uncomment Below to persist sidebar toggle between refreshes 11 | // if (localStorage.getItem('sb|sidebar-toggle') === 'true') { 12 | // document.body.classList.toggle('sb-sidenav-toggled'); 13 | // } 14 | sidebarToggle.addEventListener('click', event => { 15 | event.preventDefault(); 16 | document.body.classList.toggle('sb-sidenav-toggled'); 17 | localStorage.setItem('sb|sidebar-toggle', document.body.classList.contains('sb-sidenav-toggled')); 18 | }); 19 | } 20 | 21 | }); 22 | -------------------------------------------------------------------------------- /src/pug/layouts/authentication.pug: -------------------------------------------------------------------------------- 1 | doctype html 2 | 3 | block config 4 | - var pageTitle = "Page Title" 5 | 6 | html(lang='en') 7 | 8 | head 9 | 10 | include includes/head/meta.pug 11 | include includes/head/title.pug 12 | include includes/head/css.pug 13 | include includes/head/icons.pug 14 | 15 | body.bg-primary 16 | 17 | #layoutAuthentication 18 | 19 | #layoutAuthentication_content 20 | 21 | main 22 | 23 | block content 24 | 25 | #layoutAuthentication_footer 26 | 27 | include includes/footer.pug 28 | 29 | include includes/scripts.pug 30 | -------------------------------------------------------------------------------- /src/pug/layouts/dashboard.pug: -------------------------------------------------------------------------------- 1 | doctype html 2 | 3 | block config 4 | - var pageTitle = "Page Title" 5 | 6 | html(lang='en') 7 | 8 | head 9 | 10 | include includes/head/meta.pug 11 | include includes/head/title.pug 12 | include includes/head/css.pug 13 | include includes/head/icons.pug 14 | 15 | body(class=bodyClass) 16 | 17 | include includes/navigation/topnav.pug 18 | 19 | #layoutSidenav 20 | 21 | #layoutSidenav_nav 22 | 23 | include includes/navigation/sidenav.pug 24 | 25 | #layoutSidenav_content 26 | 27 | main 28 | 29 | block content 30 | 31 | include includes/footer.pug 32 | 33 | include includes/scripts.pug 34 | -------------------------------------------------------------------------------- /src/pug/layouts/error.pug: -------------------------------------------------------------------------------- 1 | doctype html 2 | 3 | block config 4 | - var pageTitle = "404 Error" 5 | 6 | html(lang='en') 7 | 8 | head 9 | 10 | include includes/head/meta.pug 11 | include includes/head/title.pug 12 | include includes/head/css.pug 13 | include includes/head/icons.pug 14 | 15 | body 16 | 17 | #layoutError 18 | 19 | #layoutError_content 20 | 21 | main 22 | 23 | block content 24 | 25 | #layoutError_footer 26 | 27 | include includes/footer.pug 28 | 29 | include includes/scripts.pug 30 | -------------------------------------------------------------------------------- /src/pug/layouts/includes/footer.pug: -------------------------------------------------------------------------------- 1 | footer.py-4.bg-light.mt-auto 2 | .container-fluid.px-4 3 | .d-flex.align-items-center.justify-content-between.small 4 | .text-muted 5 | | Copyright © Your Website 2023 6 | div 7 | a(href='#') Privacy Policy 8 | | 9 | | · 10 | | 11 | a(href='#') Terms & Conditions 12 | -------------------------------------------------------------------------------- /src/pug/layouts/includes/head/css.pug: -------------------------------------------------------------------------------- 1 | block css 2 | link(href='css/styles.css', rel='stylesheet') 3 | -------------------------------------------------------------------------------- /src/pug/layouts/includes/head/icons.pug: -------------------------------------------------------------------------------- 1 | script(src='https://use.fontawesome.com/releases/v6.3.0/js/all.js', crossorigin="anonymous") 2 | -------------------------------------------------------------------------------- /src/pug/layouts/includes/head/meta.pug: -------------------------------------------------------------------------------- 1 | block meta 2 | meta(charset='utf-8') 3 | meta(http-equiv='X-UA-Compatible', content='IE=edge') 4 | meta(name='viewport', content='width=device-width, initial-scale=1, shrink-to-fit=no') 5 | meta(name='description', content='') 6 | meta(name='author', content='') 7 | -------------------------------------------------------------------------------- /src/pug/layouts/includes/head/title.pug: -------------------------------------------------------------------------------- 1 | title #{pageTitle} - SB Admin 2 | -------------------------------------------------------------------------------- /src/pug/layouts/includes/navigation/sidenav.pug: -------------------------------------------------------------------------------- 1 | nav(class=['sb-sidenav', 'accordion'] class=sidenavStyle)#sidenavAccordion 2 | 3 | .sb-sidenav-menu 4 | 5 | .nav 6 | 7 | .sb-sidenav-menu-heading 8 | | Core 9 | 10 | a.nav-link(href='index.html') 11 | .sb-nav-link-icon 12 | i.fas.fa-tachometer-alt 13 | | Dashboard 14 | 15 | .sb-sidenav-menu-heading 16 | | Interface 17 | 18 | a.nav-link.collapsed(href='#', data-bs-toggle='collapse' data-bs-target='#collapseLayouts' aria-expanded='false' aria-controls='collapseLayouts') 19 | .sb-nav-link-icon 20 | i.fas.fa-columns 21 | | Layouts 22 | .sb-sidenav-collapse-arrow 23 | i.fas.fa-angle-down 24 | #collapseLayouts.collapse(aria-labelledby='headingOne', data-bs-parent='#sidenavAccordion') 25 | nav.sb-sidenav-menu-nested.nav 26 | a.nav-link(href='layout-static.html') Static Navigation 27 | a.nav-link(href='layout-sidenav-light.html') Light Sidenav 28 | 29 | a.nav-link.collapsed(href='#', data-bs-toggle='collapse' data-bs-target='#collapsePages' aria-expanded='false' aria-controls='collapsePages') 30 | .sb-nav-link-icon 31 | i.fas.fa-book-open 32 | | Pages 33 | .sb-sidenav-collapse-arrow 34 | i.fas.fa-angle-down 35 | #collapsePages.collapse(aria-labelledby='headingTwo', data-bs-parent='#sidenavAccordion') 36 | nav.sb-sidenav-menu-nested.nav.accordion#sidenavAccordionPages 37 | a.nav-link.collapsed(href='#', data-bs-toggle='collapse' data-bs-target='#pagesCollapseAuth' aria-expanded='false' aria-controls='pagesCollapseAuth') 38 | | Authentication 39 | .sb-sidenav-collapse-arrow 40 | i.fas.fa-angle-down 41 | #pagesCollapseAuth.collapse(aria-labelledby='headingOne', data-bs-parent='#sidenavAccordionPages') 42 | nav.sb-sidenav-menu-nested.nav 43 | a.nav-link(href='login.html') Login 44 | a.nav-link(href='register.html') Register 45 | a.nav-link(href='password.html') Forgot Password 46 | a.nav-link.collapsed(href='#', data-bs-toggle='collapse' data-bs-target='#pagesCollapseError' aria-expanded='false' aria-controls='pagesCollapseError') 47 | | Error 48 | .sb-sidenav-collapse-arrow 49 | i.fas.fa-angle-down 50 | #pagesCollapseError.collapse(aria-labelledby='headingOne', data-bs-parent='#sidenavAccordionPages') 51 | nav.sb-sidenav-menu-nested.nav 52 | a.nav-link(href='401.html') 401 Page 53 | a.nav-link(href='404.html') 404 Page 54 | a.nav-link(href='500.html') 500 Page 55 | 56 | .sb-sidenav-menu-heading 57 | | Addons 58 | 59 | a.nav-link(href='charts.html') 60 | .sb-nav-link-icon 61 | i.fas.fa-chart-area 62 | | Charts 63 | 64 | a.nav-link(href='tables.html') 65 | .sb-nav-link-icon 66 | i.fas.fa-table 67 | | Tables 68 | 69 | .sb-sidenav-footer 70 | 71 | .small Logged in as: 72 | | Start Bootstrap 73 | -------------------------------------------------------------------------------- /src/pug/layouts/includes/navigation/topnav.pug: -------------------------------------------------------------------------------- 1 | nav.sb-topnav.navbar.navbar-expand.navbar-dark.bg-dark 2 | 3 | // Navbar Brand 4 | a.navbar-brand.ps-3(href='index.html') 5 | | Start Bootstrap 6 | 7 | // Sidebar Toggle 8 | button#sidebarToggle.btn.btn-link.btn-sm.order-1.order-lg-0.me-4.me-lg-0(href='#!') 9 | i.fas.fa-bars 10 | 11 | // Navbar Search 12 | form.d-none.d-md-inline-block.form-inline.ms-auto.me-0.me-md-3.my-2.my-md-0 13 | .input-group 14 | input.form-control(type='text', placeholder='Search for...', aria-label='Search for...', aria-describedby='btnNavbarSearch') 15 | button#btnNavbarSearch.btn.btn-primary(type='button') 16 | i.fas.fa-search 17 | 18 | // Navbar 19 | ul.navbar-nav.ms-auto.ms-md-0.me-3.me-lg-4 20 | li.nav-item.dropdown 21 | a#navbarDropdown.nav-link.dropdown-toggle(href='#' role='button' data-bs-toggle='dropdown' aria-expanded='false') 22 | i.fas.fa-user.fa-fw 23 | ul.dropdown-menu.dropdown-menu-end(aria-labelledby='navbarDropdown') 24 | li 25 | a.dropdown-item(href='#!') Settings 26 | li 27 | a.dropdown-item(href='#!') Activity Log 28 | li 29 | hr.dropdown-divider 30 | li 31 | a.dropdown-item(href='#!') Logout 32 | 33 | -------------------------------------------------------------------------------- /src/pug/layouts/includes/scripts.pug: -------------------------------------------------------------------------------- 1 | block scripts 2 | //- Load Bootstrap JS Bundle 3 | script(src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js', crossorigin='anonymous') 4 | //- Load Global Template Scripts 5 | script(src='js/scripts.js') 6 | -------------------------------------------------------------------------------- /src/pug/pages/401.pug: -------------------------------------------------------------------------------- 1 | extends ../layouts/error.pug 2 | 3 | block content 4 | .container 5 | .row.justify-content-center 6 | .col-lg-6 7 | .text-center.mt-4 8 | h1.display-1 401 9 | p.lead Unauthorized 10 | p Access to this resource is denied. 11 | a(href='index.html') 12 | i.fas.fa-arrow-left.me-1 13 | | Return to Dashboard 14 | -------------------------------------------------------------------------------- /src/pug/pages/404.pug: -------------------------------------------------------------------------------- 1 | extends ../layouts/error.pug 2 | 3 | block content 4 | .container 5 | .row.justify-content-center 6 | .col-lg-6 7 | .text-center.mt-4 8 | img.mb-4.img-error(src='assets/img/error-404-monochrome.svg') 9 | p.lead This requested URL was not found on this server. 10 | a(href='index.html') 11 | i.fas.fa-arrow-left.me-1 12 | | Return to Dashboard 13 | -------------------------------------------------------------------------------- /src/pug/pages/500.pug: -------------------------------------------------------------------------------- 1 | extends ../layouts/error.pug 2 | 3 | block content 4 | .container 5 | .row.justify-content-center 6 | .col-lg-6 7 | .text-center.mt-4 8 | h1.display-1 500 9 | p.lead Internal Server Error 10 | a(href='index.html') 11 | i.fas.fa-arrow-left.me-1 12 | | Return to Dashboard 13 | -------------------------------------------------------------------------------- /src/pug/pages/charts.pug: -------------------------------------------------------------------------------- 1 | extends ../layouts/dashboard.pug 2 | 3 | block config 4 | - var bodyClass = 'sb-nav-fixed' 5 | - var pageTitle = 'Charts' 6 | - var sidenavStyle = 'sb-sidenav-dark' 7 | 8 | block content 9 | .container-fluid.px-4 10 | include includes/page-header.pug 11 | .card.mb-4 12 | .card-body. 13 | Chart.js is a third party plugin that is used to generate the charts in this template. The charts below have been customized - for further customization options, please visit the official Chart.js documentation. 14 | .card.mb-4 15 | .card-header 16 | i.fas.fa-chart-area.me-1 17 | | Area Chart Example 18 | .card-body 19 | canvas#myAreaChart(width='100%', height='30') 20 | .card-footer.small.text-muted Updated yesterday at 11:59 PM 21 | .row 22 | .col-lg-6 23 | .card.mb-4 24 | .card-header 25 | i.fas.fa-chart-bar.me-1 26 | | Bar Chart Example 27 | .card-body 28 | canvas#myBarChart(width='100%', height='50') 29 | .card-footer.small.text-muted Updated yesterday at 11:59 PM 30 | .col-lg-6 31 | .card.mb-4 32 | .card-header 33 | i.fas.fa-chart-pie.me-1 34 | | Pie Chart Example 35 | .card-body 36 | canvas#myPieChart(width='100%', height='50') 37 | .card-footer.small.text-muted Updated yesterday at 11:59 PM 38 | 39 | append scripts 40 | script(src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js', crossorigin='anonymous') 41 | script(src='assets/demo/chart-area-demo.js') 42 | script(src='assets/demo/chart-bar-demo.js') 43 | script(src='assets/demo/chart-pie-demo.js') 44 | -------------------------------------------------------------------------------- /src/pug/pages/includes/datatable.pug: -------------------------------------------------------------------------------- 1 | table#datatablesSimple 2 | thead 3 | tr 4 | th Name 5 | th Position 6 | th Office 7 | th Age 8 | th Start date 9 | th Salary 10 | tfoot 11 | tr 12 | th Name 13 | th Position 14 | th Office 15 | th Age 16 | th Start date 17 | th Salary 18 | tbody 19 | tr 20 | td Tiger Nixon 21 | td System Architect 22 | td Edinburgh 23 | td 61 24 | td 2011/04/25 25 | td $320,800 26 | tr 27 | td Garrett Winters 28 | td Accountant 29 | td Tokyo 30 | td 63 31 | td 2011/07/25 32 | td $170,750 33 | tr 34 | td Ashton Cox 35 | td Junior Technical Author 36 | td San Francisco 37 | td 66 38 | td 2009/01/12 39 | td $86,000 40 | tr 41 | td Cedric Kelly 42 | td Senior Javascript Developer 43 | td Edinburgh 44 | td 22 45 | td 2012/03/29 46 | td $433,060 47 | tr 48 | td Airi Satou 49 | td Accountant 50 | td Tokyo 51 | td 33 52 | td 2008/11/28 53 | td $162,700 54 | tr 55 | td Brielle Williamson 56 | td Integration Specialist 57 | td New York 58 | td 61 59 | td 2012/12/02 60 | td $372,000 61 | tr 62 | td Herrod Chandler 63 | td Sales Assistant 64 | td San Francisco 65 | td 59 66 | td 2012/08/06 67 | td $137,500 68 | tr 69 | td Rhona Davidson 70 | td Integration Specialist 71 | td Tokyo 72 | td 55 73 | td 2010/10/14 74 | td $327,900 75 | tr 76 | td Colleen Hurst 77 | td Javascript Developer 78 | td San Francisco 79 | td 39 80 | td 2009/09/15 81 | td $205,500 82 | tr 83 | td Sonya Frost 84 | td Software Engineer 85 | td Edinburgh 86 | td 23 87 | td 2008/12/13 88 | td $103,600 89 | tr 90 | td Jena Gaines 91 | td Office Manager 92 | td London 93 | td 30 94 | td 2008/12/19 95 | td $90,560 96 | tr 97 | td Quinn Flynn 98 | td Support Lead 99 | td Edinburgh 100 | td 22 101 | td 2013/03/03 102 | td $342,000 103 | tr 104 | td Charde Marshall 105 | td Regional Director 106 | td San Francisco 107 | td 36 108 | td 2008/10/16 109 | td $470,600 110 | tr 111 | td Haley Kennedy 112 | td Senior Marketing Designer 113 | td London 114 | td 43 115 | td 2012/12/18 116 | td $313,500 117 | tr 118 | td Tatyana Fitzpatrick 119 | td Regional Director 120 | td London 121 | td 19 122 | td 2010/03/17 123 | td $385,750 124 | tr 125 | td Michael Silva 126 | td Marketing Designer 127 | td London 128 | td 66 129 | td 2012/11/27 130 | td $198,500 131 | tr 132 | td Paul Byrd 133 | td Chief Financial Officer (CFO) 134 | td New York 135 | td 64 136 | td 2010/06/09 137 | td $725,000 138 | tr 139 | td Gloria Little 140 | td Systems Administrator 141 | td New York 142 | td 59 143 | td 2009/04/10 144 | td $237,500 145 | tr 146 | td Bradley Greer 147 | td Software Engineer 148 | td London 149 | td 41 150 | td 2012/10/13 151 | td $132,000 152 | tr 153 | td Dai Rios 154 | td Personnel Lead 155 | td Edinburgh 156 | td 35 157 | td 2012/09/26 158 | td $217,500 159 | tr 160 | td Jenette Caldwell 161 | td Development Lead 162 | td New York 163 | td 30 164 | td 2011/09/03 165 | td $345,000 166 | tr 167 | td Yuri Berry 168 | td Chief Marketing Officer (CMO) 169 | td New York 170 | td 40 171 | td 2009/06/25 172 | td $675,000 173 | tr 174 | td Caesar Vance 175 | td Pre-Sales Support 176 | td New York 177 | td 21 178 | td 2011/12/12 179 | td $106,450 180 | tr 181 | td Doris Wilder 182 | td Sales Assistant 183 | td Sidney 184 | td 23 185 | td 2010/09/20 186 | td $85,600 187 | tr 188 | td Angelica Ramos 189 | td Chief Executive Officer (CEO) 190 | td London 191 | td 47 192 | td 2009/10/09 193 | td $1,200,000 194 | tr 195 | td Gavin Joyce 196 | td Developer 197 | td Edinburgh 198 | td 42 199 | td 2010/12/22 200 | td $92,575 201 | tr 202 | td Jennifer Chang 203 | td Regional Director 204 | td Singapore 205 | td 28 206 | td 2010/11/14 207 | td $357,650 208 | tr 209 | td Brenden Wagner 210 | td Software Engineer 211 | td San Francisco 212 | td 28 213 | td 2011/06/07 214 | td $206,850 215 | tr 216 | td Fiona Green 217 | td Chief Operating Officer (COO) 218 | td San Francisco 219 | td 48 220 | td 2010/03/11 221 | td $850,000 222 | tr 223 | td Shou Itou 224 | td Regional Marketing 225 | td Tokyo 226 | td 20 227 | td 2011/08/14 228 | td $163,000 229 | tr 230 | td Michelle House 231 | td Integration Specialist 232 | td Sidney 233 | td 37 234 | td 2011/06/02 235 | td $95,400 236 | tr 237 | td Suki Burks 238 | td Developer 239 | td London 240 | td 53 241 | td 2009/10/22 242 | td $114,500 243 | tr 244 | td Prescott Bartlett 245 | td Technical Author 246 | td London 247 | td 27 248 | td 2011/05/07 249 | td $145,000 250 | tr 251 | td Gavin Cortez 252 | td Team Leader 253 | td San Francisco 254 | td 22 255 | td 2008/10/26 256 | td $235,500 257 | tr 258 | td Martena Mccray 259 | td Post-Sales support 260 | td Edinburgh 261 | td 46 262 | td 2011/03/09 263 | td $324,050 264 | tr 265 | td Unity Butler 266 | td Marketing Designer 267 | td San Francisco 268 | td 47 269 | td 2009/12/09 270 | td $85,675 271 | tr 272 | td Howard Hatfield 273 | td Office Manager 274 | td San Francisco 275 | td 51 276 | td 2008/12/16 277 | td $164,500 278 | tr 279 | td Hope Fuentes 280 | td Secretary 281 | td San Francisco 282 | td 41 283 | td 2010/02/12 284 | td $109,850 285 | tr 286 | td Vivian Harrell 287 | td Financial Controller 288 | td San Francisco 289 | td 62 290 | td 2009/02/14 291 | td $452,500 292 | tr 293 | td Timothy Mooney 294 | td Office Manager 295 | td London 296 | td 37 297 | td 2008/12/11 298 | td $136,200 299 | tr 300 | td Jackson Bradshaw 301 | td Director 302 | td New York 303 | td 65 304 | td 2008/09/26 305 | td $645,750 306 | tr 307 | td Olivia Liang 308 | td Support Engineer 309 | td Singapore 310 | td 64 311 | td 2011/02/03 312 | td $234,500 313 | tr 314 | td Bruno Nash 315 | td Software Engineer 316 | td London 317 | td 38 318 | td 2011/05/03 319 | td $163,500 320 | tr 321 | td Sakura Yamamoto 322 | td Support Engineer 323 | td Tokyo 324 | td 37 325 | td 2009/08/19 326 | td $139,575 327 | tr 328 | td Thor Walton 329 | td Developer 330 | td New York 331 | td 61 332 | td 2013/08/11 333 | td $98,540 334 | tr 335 | td Finn Camacho 336 | td Support Engineer 337 | td San Francisco 338 | td 47 339 | td 2009/07/07 340 | td $87,500 341 | tr 342 | td Serge Baldwin 343 | td Data Coordinator 344 | td Singapore 345 | td 64 346 | td 2012/04/09 347 | td $138,575 348 | tr 349 | td Zenaida Frank 350 | td Software Engineer 351 | td New York 352 | td 63 353 | td 2010/01/04 354 | td $125,250 355 | tr 356 | td Zorita Serrano 357 | td Software Engineer 358 | td San Francisco 359 | td 56 360 | td 2012/06/01 361 | td $115,000 362 | tr 363 | td Jennifer Acosta 364 | td Junior Javascript Developer 365 | td Edinburgh 366 | td 43 367 | td 2013/02/01 368 | td $75,650 369 | tr 370 | td Cara Stevens 371 | td Sales Assistant 372 | td New York 373 | td 46 374 | td 2011/12/06 375 | td $145,600 376 | tr 377 | td Hermione Butler 378 | td Regional Director 379 | td London 380 | td 47 381 | td 2011/03/21 382 | td $356,250 383 | tr 384 | td Lael Greer 385 | td Systems Administrator 386 | td London 387 | td 21 388 | td 2009/02/27 389 | td $103,500 390 | tr 391 | td Jonas Alexander 392 | td Developer 393 | td San Francisco 394 | td 30 395 | td 2010/07/14 396 | td $86,500 397 | tr 398 | td Shad Decker 399 | td Regional Director 400 | td Edinburgh 401 | td 51 402 | td 2008/11/13 403 | td $183,000 404 | tr 405 | td Michael Bruce 406 | td Javascript Developer 407 | td Singapore 408 | td 29 409 | td 2011/06/27 410 | td $183,000 411 | tr 412 | td Donna Snider 413 | td Customer Support 414 | td New York 415 | td 27 416 | td 2011/01/25 417 | td $112,000 418 | -------------------------------------------------------------------------------- /src/pug/pages/includes/page-header.pug: -------------------------------------------------------------------------------- 1 | h1.mt-4 #{pageTitle} 2 | if index 3 | ol.breadcrumb.mb-4 4 | li.breadcrumb-item.active #{pageTitle} 5 | else 6 | ol.breadcrumb.mb-4 7 | li.breadcrumb-item 8 | a(href='index.html') Dashboard 9 | li.breadcrumb-item.active #{pageTitle} 10 | -------------------------------------------------------------------------------- /src/pug/pages/index.pug: -------------------------------------------------------------------------------- 1 | extends ../layouts/dashboard.pug 2 | 3 | block config 4 | - var bodyClass = 'sb-nav-fixed' 5 | - var pageTitle = 'Dashboard'; 6 | - var index = true; 7 | - var sidenavStyle = 'sb-sidenav-dark' 8 | 9 | prepend css 10 | //- Load Simple DataTables Stylesheet 11 | link(href='https://cdn.jsdelivr.net/npm/simple-datatables@7.1.2/dist/style.min.css', rel='stylesheet') 12 | 13 | block content 14 | .container-fluid.px-4 15 | include includes/page-header.pug 16 | .row 17 | .col-xl-3.col-md-6 18 | .card.bg-primary.text-white.mb-4 19 | .card-body 20 | | Primary Card 21 | .card-footer.d-flex.align-items-center.justify-content-between 22 | a(href='#').small.text-white.stretched-link 23 | | View Details 24 | .small.text-white 25 | i.fas.fa-angle-right 26 | .col-xl-3.col-md-6 27 | .card.bg-warning.text-white.mb-4 28 | .card-body 29 | | Warning Card 30 | .card-footer.d-flex.align-items-center.justify-content-between 31 | a(href='#').small.text-white.stretched-link 32 | | View Details 33 | .small.text-white 34 | i.fas.fa-angle-right 35 | .col-xl-3.col-md-6 36 | .card.bg-success.text-white.mb-4 37 | .card-body 38 | | Success Card 39 | .card-footer.d-flex.align-items-center.justify-content-between 40 | a(href='#').small.text-white.stretched-link 41 | | View Details 42 | .small.text-white 43 | i.fas.fa-angle-right 44 | .col-xl-3.col-md-6 45 | .card.bg-danger.text-white.mb-4 46 | .card-body 47 | | Danger Card 48 | .card-footer.d-flex.align-items-center.justify-content-between 49 | a(href='#').small.text-white.stretched-link 50 | | View Details 51 | .small.text-white 52 | i.fas.fa-angle-right 53 | .row 54 | 55 | .col-xl-6 56 | .card.mb-4 57 | .card-header 58 | i.fas.fa-chart-area.me-1 59 | | Area Chart Example 60 | .card-body 61 | canvas#myAreaChart(width='100%', height='40') 62 | 63 | .col-xl-6 64 | .card.mb-4 65 | .card-header 66 | i.fas.fa-chart-bar.me-1 67 | | Bar Chart Example 68 | .card-body 69 | canvas#myBarChart(width='100%', height='40') 70 | 71 | .card.mb-4 72 | .card-header 73 | i.fas.fa-table.me-1 74 | | DataTable Example 75 | .card-body 76 | include includes/datatable.pug 77 | 78 | 79 | append scripts 80 | //- Load Chart.js and demos 81 | script(src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js', crossorigin='anonymous') 82 | script(src='assets/demo/chart-area-demo.js') 83 | script(src='assets/demo/chart-bar-demo.js') 84 | 85 | //- Load Simple DataTables Scripts 86 | script(src='https://cdn.jsdelivr.net/npm/simple-datatables@7.1.2/dist/umd/simple-datatables.min.js', crossorigin='anonymous') 87 | script(src='js/datatables-simple-demo.js') -------------------------------------------------------------------------------- /src/pug/pages/layout-sidenav-light.pug: -------------------------------------------------------------------------------- 1 | extends ../layouts/dashboard.pug 2 | 3 | block config 4 | - var bodyClass = 'sb-nav-fixed' 5 | - var pageTitle = 'Sidenav Light' 6 | - var sidenavStyle = 'sb-sidenav-light' 7 | 8 | block content 9 | .container-fluid.px-4 10 | include includes/page-header.pug 11 | 12 | .card.mb-4 13 | .card-body. 14 | This page is an example of using the light side navigation option. By appending the .sb-sidenav-light class to the .sb-sidenav class, the side navigation will take on a light color scheme. The .sb-sidenav-dark is also available for a darker option. 15 | -------------------------------------------------------------------------------- /src/pug/pages/layout-static.pug: -------------------------------------------------------------------------------- 1 | extends ../layouts/dashboard.pug 2 | 3 | block config 4 | - var pageTitle = 'Static Navigation' 5 | - var sidenavStyle = 'sb-sidenav-dark' 6 | 7 | block content 8 | .container-fluid.px-4 9 | include includes/page-header.pug 10 | 11 | .card.mb-4 12 | .card-body 13 | p.mb-0. 14 | This page is an example of using static navigation. By removing the .sb-nav-fixed class from the body, the top navigation and side navigation will become static on scroll. Scroll down this page to see an example. 15 | 16 | div(style='height: 100vh;') 17 | 18 | .card.mb-4 19 | .card-body 20 | | When scrolling, the navigation stays at the top of the page. This is the end of the static navigation demo. 21 | -------------------------------------------------------------------------------- /src/pug/pages/login.pug: -------------------------------------------------------------------------------- 1 | extends ../layouts/authentication.pug 2 | 3 | block config 4 | - var pageTitle = 'Login' 5 | 6 | block content 7 | .container 8 | .row.justify-content-center 9 | .col-lg-5 10 | .card.shadow-lg.border-0.rounded-lg.mt-5 11 | .card-header 12 | h3.text-center.font-weight-light.my-4 Login 13 | .card-body 14 | form 15 | .form-floating.mb-3 16 | input#inputEmail.form-control(type='email', placeholder='name@example.com') 17 | label(for='inputEmail') Email address 18 | .form-floating.mb-3 19 | input#inputPassword.form-control(type='password', placeholder='Password') 20 | label(for='inputPassword') Password 21 | .form-check.mb-3 22 | input#inputRememberPassword.form-check-input(type='checkbox', value='') 23 | label.form-check-label(for='inputRememberPassword') 24 | | Remember Password 25 | .d-flex.align-items-center.justify-content-between.mt-4.mb-0 26 | a.small(href='password.html') Forgot Password? 27 | a.btn.btn-primary(href='index.html') Login 28 | .card-footer.text-center.py-3 29 | .small 30 | a(href='register.html') Need an account? Sign up! 31 | -------------------------------------------------------------------------------- /src/pug/pages/password.pug: -------------------------------------------------------------------------------- 1 | extends ../layouts/authentication.pug 2 | 3 | block config 4 | - var pageTitle = 'Password Reset' 5 | 6 | block content 7 | .container 8 | .row.justify-content-center 9 | .col-lg-5 10 | .card.shadow-lg.border-0.rounded-lg.mt-5 11 | .card-header 12 | h3.text-center.font-weight-light.my-4 Password Recovery 13 | .card-body 14 | .small.mb-3.text-muted Enter your email address and we will send you a link to reset your password. 15 | form 16 | .form-floating.mb-3 17 | input#inputEmail.form-control(type='email', placeholder='name@example.com') 18 | label(for='inputEmail') Email address 19 | .d-flex.align-items-center.justify-content-between.mt-4.mb-0 20 | a.small(href='login.html') Return to login 21 | a.btn.btn-primary(href='login.html') Reset Password 22 | .card-footer.text-center.py-3 23 | .small 24 | a(href='register.html') Need an account? Sign up! 25 | -------------------------------------------------------------------------------- /src/pug/pages/register.pug: -------------------------------------------------------------------------------- 1 | extends ../layouts/authentication.pug 2 | 3 | block config 4 | - var pageTitle = 'Register' 5 | 6 | block content 7 | .container 8 | .row.justify-content-center 9 | .col-lg-7 10 | .card.shadow-lg.border-0.rounded-lg.mt-5 11 | .card-header 12 | h3.text-center.font-weight-light.my-4 Create Account 13 | .card-body 14 | form 15 | .row.mb-3 16 | .col-md-6 17 | .form-floating.mb-3.mb-md-0 18 | input#inputFirstName.form-control(type='text', placeholder='Enter your first name') 19 | label(for='inputFirstName') First name 20 | .col-md-6 21 | .form-floating 22 | input#inputLastName.form-control(type='text', placeholder='Enter your last name') 23 | label(for='inputLastName') Last name 24 | .form-floating.mb-3 25 | input#inputEmail.form-control(type='email', placeholder='name@example.com') 26 | label(for='inputEmail') Email address 27 | .row.mb-3 28 | .col-md-6 29 | .form-floating.mb-3.mb-md-0 30 | input#inputPassword.form-control(type='password', placeholder='Create a password') 31 | label(for='inputPassword') Password 32 | .col-md-6 33 | .form-floating.mb-3.mb-md-0 34 | input#inputPasswordConfirm.form-control(type='password', placeholder='Confirm password') 35 | label(for='inputPasswordConfirm') Confirm Password 36 | .mt-4.mb-0 37 | .d-grid 38 | a.btn.btn-primary.btn-block(href='login.html') Create Account 39 | .card-footer.text-center.py-3 40 | .small 41 | a(href='login.html') Have an account? Go to login 42 | -------------------------------------------------------------------------------- /src/pug/pages/tables.pug: -------------------------------------------------------------------------------- 1 | extends ../layouts/dashboard.pug 2 | 3 | block config 4 | - var bodyClass = 'sb-nav-fixed' 5 | - var pageTitle = 'Tables' 6 | - var sidenavStyle = 'sb-sidenav-dark' 7 | 8 | prepend css 9 | //- Load Simple DataTables Stylesheet 10 | link(href='https://cdn.jsdelivr.net/npm/simple-datatables@7.1.2/dist/style.min.css', rel='stylesheet') 11 | 12 | block content 13 | .container-fluid.px-4 14 | include includes/page-header.pug 15 | .card.mb-4 16 | .card-body. 17 | DataTables is a third party plugin that is used to generate the demo table below. For more information about DataTables, please visit the official DataTables documentation. 18 | .card.mb-4 19 | .card-header 20 | i.fas.fa-table.me-1 21 | | DataTable Example 22 | .card-body 23 | include includes/datatable.pug 24 | 25 | 26 | append scripts 27 | //- Load Simple DataTables Scripts 28 | script(src='https://cdn.jsdelivr.net/npm/simple-datatables@7.1.2/dist/umd/simple-datatables.min.js', crossorigin='anonymous') 29 | script(src='js/datatables-simple-demo.js') -------------------------------------------------------------------------------- /src/scss/_global.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Global 3 | // 4 | 5 | html, 6 | body { 7 | height: 100%; 8 | } 9 | -------------------------------------------------------------------------------- /src/scss/_variables.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Variables 3 | // 4 | 5 | // Import Bootstrap variables for use within theme 6 | @import "bootstrap/scss/functions.scss"; 7 | @import "bootstrap/scss/variables.scss"; 8 | 9 | // Import spacing variables 10 | @import "./variables/spacing.scss"; 11 | 12 | // Import navigation variables 13 | @import "./variables/navigation.scss"; 14 | -------------------------------------------------------------------------------- /src/scss/layout/_authentication.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Authentication layout 3 | // 4 | 5 | #layoutAuthentication { 6 | display: flex; 7 | flex-direction: column; 8 | min-height: 100vh; 9 | 10 | #layoutAuthentication_content { 11 | min-width: 0; 12 | flex-grow: 1; 13 | } 14 | 15 | #layoutAuthentication_footer { 16 | min-width: 0; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/scss/layout/_dashboard-default.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Default dashboard layout 3 | // 4 | 5 | // Default behavior for the sidenav layout 6 | // The default positioning for the sidenav is a static position 7 | 8 | #layoutSidenav { 9 | display: flex; 10 | 11 | // Wraps the .sb-sidenav element and sets the size 12 | #layoutSidenav_nav { 13 | flex-basis: $sidenav-base-width; 14 | flex-shrink: 0; 15 | transition: transform 0.15s ease-in-out; 16 | z-index: $zindex-sidenav; 17 | // Mobile first transform - by default the sidenav will be moved off-canvas 18 | transform: translateX(-$sidenav-base-width); 19 | } 20 | 21 | // Wraps the content when using the sidenav layout 22 | #layoutSidenav_content { 23 | position: relative; 24 | display: flex; 25 | flex-direction: column; 26 | justify-content: space-between; 27 | min-width: 0; 28 | flex-grow: 1; 29 | min-height: calc(100vh - #{$topnav-base-height}); 30 | margin-left: -$sidenav-base-width; 31 | } 32 | } 33 | 34 | // Default behavior for the static sidenav collapse 35 | .sb-sidenav-toggled { 36 | #layoutSidenav { 37 | #layoutSidenav_nav { 38 | transform: translateX(0); 39 | } 40 | 41 | #layoutSidenav_content { 42 | &:before { 43 | content: ""; 44 | display: block; 45 | position: absolute; 46 | top: 0; 47 | left: 0; 48 | width: 100%; 49 | height: 100%; 50 | background: $black; 51 | z-index: $zindex-content; 52 | opacity: 0.5; 53 | transition: opacity 0.3s ease-in-out; 54 | } 55 | } 56 | } 57 | } 58 | 59 | // Responsive styling for the sidenav layout 60 | @include media-breakpoint-up(lg) { 61 | #layoutSidenav { 62 | #layoutSidenav_nav { 63 | transform: translateX(0); 64 | } 65 | 66 | #layoutSidenav_content { 67 | margin-left: 0; 68 | transition: margin 0.15s ease-in-out; 69 | } 70 | } 71 | 72 | // Behavior for the sidenav collapse on screens larger than the med breakpoint 73 | .sb-sidenav-toggled { 74 | #layoutSidenav { 75 | #layoutSidenav_nav { 76 | transform: translateX(-$sidenav-base-width); 77 | } 78 | 79 | #layoutSidenav_content { 80 | margin-left: -$sidenav-base-width; 81 | 82 | // Removes the sidenav overlay on screens larger than the med breakpoint 83 | &:before { 84 | display: none; 85 | } 86 | } 87 | } 88 | } 89 | } 90 | -------------------------------------------------------------------------------- /src/scss/layout/_dashboard-fixed.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Fixed dashboard layout 3 | // 4 | 5 | .sb-nav-fixed { 6 | .sb-topnav { 7 | @extend .fixed-top; 8 | z-index: $zindex-topnav; 9 | } 10 | 11 | #layoutSidenav { 12 | #layoutSidenav_nav { 13 | @extend .fixed-top; 14 | width: $sidenav-base-width; 15 | height: 100vh; 16 | z-index: $zindex-sidenav; 17 | 18 | .sb-sidenav { 19 | padding-top: $topnav-base-height; 20 | 21 | .sb-sidenav-menu { 22 | overflow-y: auto; 23 | } 24 | } 25 | } 26 | 27 | #layoutSidenav_content { 28 | padding-left: $sidenav-base-width; 29 | top: $topnav-base-height; 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/scss/layout/_error.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Error page layout 3 | // 4 | 5 | #layoutError { 6 | display: flex; 7 | flex-direction: column; 8 | min-height: 100vh; 9 | 10 | #layoutError_content { 11 | min-width: 0; 12 | flex-grow: 1; 13 | } 14 | 15 | #layoutError_footer { 16 | min-width: 0; 17 | } 18 | } 19 | 20 | .img-error { 21 | max-width: 20rem; 22 | } 23 | -------------------------------------------------------------------------------- /src/scss/navigation/_nav.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Nav 3 | // 4 | 5 | // Add styling for icons used within nav links 6 | .nav, 7 | .sb-sidenav-menu { 8 | .nav-link .sb-nav-link-icon { 9 | margin-right: 0.5rem; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/scss/navigation/_topnav.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Topnav 3 | // 4 | 5 | .sb-topnav { 6 | padding-left: 0; 7 | height: $topnav-base-height; 8 | z-index: $zindex-topnav; 9 | 10 | .navbar-brand { 11 | width: $sidenav-base-width; 12 | padding-left: $navbar-padding-x; 13 | padding-right: $navbar-padding-x; 14 | margin: 0; 15 | } 16 | 17 | &.navbar-dark { 18 | #sidebarToggle { 19 | color: $topnav-dark-toggler-color; 20 | } 21 | } 22 | 23 | &.navbar-light { 24 | #sidebarToggle { 25 | color: $topnav-light-toggler-color; 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/scss/navigation/sidenav/_sidenav-dark.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Sidenav Dark 3 | // 4 | 5 | // Dark theme for sidenav 6 | // Append .sb-sidenav-dark to .sb-sidenav to use 7 | 8 | .sb-sidenav-dark { 9 | background-color: $sidenav-dark-bg; 10 | color: $sidenav-dark-color; 11 | 12 | .sb-sidenav-menu { 13 | .sb-sidenav-menu-heading { 14 | color: $sidenav-dark-heading-color; 15 | } 16 | 17 | .nav-link { 18 | color: $sidenav-dark-link-color; 19 | 20 | .sb-nav-link-icon { 21 | color: $sidenav-dark-icon-color; 22 | } 23 | 24 | .sb-sidenav-collapse-arrow { 25 | color: $sidenav-dark-icon-color; 26 | } 27 | 28 | &:hover { 29 | color: $sidenav-dark-link-active-color; 30 | } 31 | 32 | &.active { 33 | color: $sidenav-dark-link-active-color; 34 | 35 | .sb-nav-link-icon { 36 | color: $sidenav-dark-link-active-color; 37 | } 38 | } 39 | } 40 | } 41 | 42 | .sb-sidenav-footer { 43 | background-color: $sidenav-dark-footer-bg; 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /src/scss/navigation/sidenav/_sidenav-light.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Sidenav Light 3 | // 4 | 5 | // Light theme for sidenav 6 | // Append .sb-sidenav-light to .sb-sidenav to use 7 | 8 | .sb-sidenav-light { 9 | background-color: $sidenav-light-bg; 10 | color: $sidenav-light-color; 11 | 12 | .sb-sidenav-menu { 13 | .sb-sidenav-menu-heading { 14 | color: $sidenav-light-heading-color; 15 | } 16 | 17 | .nav-link { 18 | color: $sidenav-light-link-color; 19 | 20 | .sb-nav-link-icon { 21 | color: $sidenav-light-icon-color; 22 | } 23 | 24 | .sb-sidenav-collapse-arrow { 25 | color: $sidenav-light-icon-color; 26 | } 27 | 28 | &:hover { 29 | color: $sidenav-light-link-active-color; 30 | } 31 | 32 | &.active { 33 | color: $sidenav-light-link-active-color; 34 | 35 | .sb-nav-link-icon { 36 | color: $sidenav-light-link-active-color; 37 | } 38 | } 39 | } 40 | } 41 | 42 | .sb-sidenav-footer { 43 | background-color: $sidenav-light-footer-bg; 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /src/scss/navigation/sidenav/_sidenav.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Sidenav 3 | // 4 | 5 | // Base styling for the sidenav 6 | 7 | .sb-sidenav { 8 | display: flex; 9 | flex-direction: column; 10 | height: 100%; 11 | flex-wrap: nowrap; 12 | 13 | .sb-sidenav-menu { 14 | flex-grow: 1; 15 | 16 | .nav { 17 | flex-direction: column; 18 | flex-wrap: nowrap; 19 | 20 | .sb-sidenav-menu-heading { 21 | padding: 1.75rem 1rem 0.75rem; 22 | font-size: 0.75rem; 23 | font-weight: bold; 24 | text-transform: uppercase; 25 | } 26 | 27 | .nav-link { 28 | display: flex; 29 | align-items: center; 30 | padding-top: 0.75rem; 31 | padding-bottom: 0.75rem; 32 | position: relative; 33 | 34 | .sb-nav-link-icon { 35 | font-size: 0.9rem; 36 | } 37 | 38 | .sb-sidenav-collapse-arrow { 39 | display: inline-block; 40 | margin-left: auto; 41 | transition: transform 0.15s ease; 42 | } 43 | 44 | &.collapsed { 45 | .sb-sidenav-collapse-arrow { 46 | transform: rotate(-90deg); 47 | } 48 | } 49 | } 50 | 51 | .sb-sidenav-menu-nested { 52 | margin-left: 1.5rem; 53 | flex-direction: column; 54 | } 55 | } 56 | } 57 | 58 | .sb-sidenav-footer { 59 | padding: 0.75rem; 60 | flex-shrink: 0; 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /src/scss/plugins/simple-datatables.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Simple DataTables 3 | // 4 | 5 | // 6 | // Simple DataTables is a third party plugin included with this 7 | // theme to create functional data tables 8 | // 9 | // Plugin docs: https://github.com/fiduswriter/Simple-DataTables 10 | // 11 | 12 | // Override the Simple DataTables Styling 13 | 14 | // Sets default responsiveness of the dataTable 15 | 16 | .datatable-wrapper .datatable-container { 17 | @extend .table-responsive; 18 | font-size: $font-size-sm; 19 | } 20 | 21 | .datatable-wrapper.no-header .datatable-container { 22 | border-top: none; 23 | } 24 | 25 | .datatable-wrapper.no-footer .datatable-container { 26 | border-bottom: none; 27 | } 28 | 29 | .datatable-top { 30 | padding: 0 0 1rem; 31 | } 32 | 33 | .datatable-bottom { 34 | padding: 0; 35 | } 36 | 37 | .datatable-top>nav:first-child, 38 | .datatable-top>div:first-child, 39 | .datatable-bottom>nav:first-child, 40 | .datatable-bottom>div:first-child { 41 | float: left; 42 | } 43 | 44 | .datatable-top>nav:last-child, 45 | .datatable-top>div:last-child, 46 | .datatable-bottom>nav:last-child, 47 | .datatable-bottom>div:last-child { 48 | float: right; 49 | } 50 | 51 | .datatable-selector { 52 | @extend .form-select; 53 | width: auto; 54 | display: inline-block; 55 | padding-left: 1.125rem; 56 | padding-right: 2.125rem; 57 | margin-right: 0.25rem; 58 | } 59 | 60 | .datatable-input { 61 | @extend .form-control; 62 | } 63 | 64 | .datatable-info { 65 | margin: 7px 0; 66 | } 67 | 68 | /* PAGER */ 69 | 70 | .datatable-pagination ul { 71 | @extend .pagination; 72 | } 73 | 74 | .datatable-pagination li { 75 | @extend .page-item; 76 | } 77 | 78 | .datatable-pagination a { 79 | @extend .page-link; 80 | } 81 | 82 | .datatable-pagination a:hover { 83 | background-color: $pagination-hover-bg; 84 | } 85 | 86 | .datatable-pagination .active a, 87 | .datatable-pagination .active a:focus, 88 | .datatable-pagination .active a:hover { 89 | background-color: $pagination-active-bg; 90 | } 91 | 92 | .datatable-pagination .ellipsis a, 93 | .datatable-pagination .disabled a, 94 | .datatable-pagination .disabled a:focus, 95 | .datatable-pagination .disabled a:hover { 96 | cursor: not-allowed; 97 | } 98 | 99 | .datatable-pagination .disabled a, 100 | .datatable-pagination .disabled a:focus, 101 | .datatable-pagination .disabled a:hover { 102 | cursor: not-allowed; 103 | opacity: 0.4; 104 | } 105 | 106 | .datatable-pagination .pager a { 107 | font-weight: bold; 108 | } 109 | 110 | /* TABLE */ 111 | 112 | .datatable-table { 113 | @extend .table; 114 | @extend .table-bordered; 115 | @extend .table-hover; 116 | border-collapse: collapse; 117 | } 118 | 119 | .datatable-table>tbody>tr>td, 120 | .datatable-table>tbody>tr>th, 121 | .datatable-table>tfoot>tr>td, 122 | .datatable-table>tfoot>tr>th, 123 | .datatable-table>thead>tr>td, 124 | .datatable-table>thead>tr>th { 125 | vertical-align: top; 126 | padding: $table-cell-padding-y $table-cell-padding-x; 127 | } 128 | 129 | .datatable-table>thead>tr>th { 130 | vertical-align: bottom; 131 | text-align: left; 132 | border-bottom: none; 133 | } 134 | 135 | .datatable-table>tfoot>tr>th { 136 | vertical-align: bottom; 137 | text-align: left; 138 | } 139 | 140 | .datatable-table th { 141 | vertical-align: bottom; 142 | text-align: left; 143 | } 144 | 145 | .datatable-table th a { 146 | text-decoration: none; 147 | color: inherit; 148 | } 149 | 150 | .datatable-sorter { 151 | display: inline-block; 152 | height: 100%; 153 | position: relative; 154 | width: 100%; 155 | padding-right: 1rem; 156 | } 157 | 158 | .datatable-sorter::before, 159 | .datatable-sorter::after { 160 | content: ""; 161 | height: 0; 162 | width: 0; 163 | position: absolute; 164 | right: 4px; 165 | border-left: 4px solid transparent; 166 | border-right: 4px solid transparent; 167 | opacity: 0.2; 168 | } 169 | 170 | .datatable-sorter::before { 171 | bottom: 4px; 172 | } 173 | 174 | .datatable-sorter::after { 175 | top: 0px; 176 | } 177 | 178 | .asc .datatable-sorter::after, 179 | .desc .datatable-sorter::before { 180 | opacity: 0.6; 181 | } 182 | 183 | .datatables-empty { 184 | text-align: center; 185 | } 186 | 187 | .datatable-top::after, 188 | .datatable-bottom::after { 189 | clear: both; 190 | content: " "; 191 | display: table; 192 | } 193 | 194 | .datatable-pagination li.datatable-hidden { 195 | visibility: visible; 196 | } 197 | 198 | // DataTable button 199 | 200 | .btn-datatable { 201 | height: 20px !important; 202 | width: 20px !important; 203 | font-size: 0.75rem; 204 | border-radius: $border-radius !important; 205 | } 206 | -------------------------------------------------------------------------------- /src/scss/styles.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Styles 3 | // 4 | 5 | // Import Custom Variables 6 | @import "variables.scss"; 7 | 8 | // Import Bootstrap 9 | @import "bootstrap/scss/bootstrap.scss"; 10 | 11 | // Import Custom SCSS 12 | @import "global.scss"; 13 | 14 | // Layout 15 | @import "layout/authentication.scss"; 16 | @import "layout/dashboard-default.scss"; 17 | @import "layout/dashboard-fixed.scss"; 18 | @import "layout/error.scss"; 19 | 20 | // Navigation 21 | @import "navigation/nav.scss"; 22 | @import "navigation/topnav.scss"; 23 | @import "navigation/sidenav/sidenav.scss"; 24 | @import "navigation/sidenav/sidenav-dark.scss"; 25 | @import "navigation/sidenav/sidenav-light.scss"; 26 | 27 | // Plugins 28 | @import "plugins/simple-datatables.scss"; 29 | -------------------------------------------------------------------------------- /src/scss/variables/_navigation.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Navigation 3 | // 4 | 5 | // Z index variables 6 | $zindex-content: 1037 !default; 7 | $zindex-sidenav: 1038 !default; 8 | $zindex-topnav: 1039 !default; 9 | 10 | // Color variables for the sidenav 11 | 12 | // -- Sidenav Dark 13 | $sidenav-dark-bg: $gray-900; 14 | $sidenav-dark-color: fade-out($white, 0.5); 15 | $sidenav-dark-heading-color: fade-out($white, 0.75); 16 | $sidenav-dark-link-color: fade-out($white, 0.5); 17 | $sidenav-dark-link-active-color: $white; 18 | $sidenav-dark-icon-color: fade-out($white, 0.75); 19 | $sidenav-dark-footer-bg: $gray-800; 20 | 21 | // -- Sidenav Light 22 | $sidenav-light-bg: $gray-100; 23 | $sidenav-light-color: $gray-900; 24 | $sidenav-light-heading-color: $gray-500; 25 | $sidenav-light-link-color: $sidenav-light-color; 26 | $sidenav-light-link-active-color: $primary; 27 | $sidenav-light-icon-color: $gray-500; 28 | $sidenav-light-footer-bg: $gray-200; 29 | 30 | // Color variables for the topnav 31 | $topnav-dark-toggler-color: fade-out($white, 0.5); 32 | $topnav-light-toggler-color: $gray-900; 33 | -------------------------------------------------------------------------------- /src/scss/variables/_spacing.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Spacing 3 | // 4 | 5 | // Spacing variables for navigation 6 | $topnav-base-height: 56px; 7 | $sidenav-base-width: 225px; 8 | --------------------------------------------------------------------------------