├── .browserslistrc ├── .github ├── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md └── PULL_REQUEST_TEMPLATE.md ├── .gitignore ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── Gruntfile.js ├── LICENSE ├── README.md ├── docs ├── blank-page.html ├── bootstrap-components.html ├── css │ ├── main.css │ └── main.min.css ├── dashboard.html ├── docs.html ├── form-components.html ├── form-samples.html ├── images │ └── banner.jpg ├── index.html ├── js │ ├── bootstrap.min.js │ ├── jquery-3.7.0.min.js │ ├── main.js │ └── plugins │ │ ├── chart.js │ │ └── jquery.dataTables.min.js ├── page-error.html ├── page-invoice.html ├── page-lockscreen.html ├── page-login.html ├── page-mailbox.html ├── page-user.html ├── table-basic.html ├── table-data-table.html ├── ui-cards.html └── widgets.html ├── node-dev-server.js ├── package-lock.json ├── package.json └── src ├── pug ├── blank-page.pug ├── bootstrap-components.pug ├── dashboard.pug ├── docs.pug ├── form-components.pug ├── form-samples.pug ├── includes │ ├── _head.pug │ ├── _header.pug │ ├── _javascript.pug │ ├── _landing-icons.pug │ └── _sidebar.pug ├── index.pug ├── layouts │ └── _layout.pug ├── page-error.pug ├── page-invoice.pug ├── page-lockscreen.pug ├── page-login.pug ├── page-mailbox.pug ├── page-user.pug ├── table-basic.pug ├── table-data-table.pug ├── ui-cards.pug └── widgets.pug └── sass ├── 1-tools ├── _customize-bootstrap.scss ├── _fonts.scss └── _vars.scss ├── 2-basics ├── _app.scss └── _helpers.scss ├── 3-component ├── _app-title.scss ├── _button-spinner.scss ├── _button.scss ├── _chat.scss ├── _dropdown.scss ├── _header.scss ├── _material-half-bg.scss ├── _material-loader.scss ├── _rtl.scss ├── _sidebar-mini.scss ├── _sidebar.scss ├── _tile.scss └── _widgets.scss ├── 4-pages ├── _docs.scss ├── _error-page.scss ├── _landing-page.scss ├── _lockscreen-material.scss ├── _login-material.scss ├── _mailbox.scss └── _user-profile.scss └── main.scss /.browserslistrc: -------------------------------------------------------------------------------- 1 | last 3 versions -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | 5 | --- 6 | 7 | **Describe the bug** 8 | A clear and concise description of what the bug is. 9 | 10 | **To Reproduce** 11 | Steps to reproduce the behavior: 12 | 1. Go to '...' 13 | 2. Click on '....' 14 | 3. Scroll down to '....' 15 | 4. See error 16 | 17 | **Expected behavior** 18 | A clear and concise description of what you expected to happen. 19 | 20 | **Screenshots** 21 | If applicable, add screenshots to help explain your problem. 22 | 23 | **Desktop (please complete the following information):** 24 | - OS: [e.g. iOS] 25 | - Browser [e.g. chrome, safari] 26 | - Version [e.g. 22] 27 | 28 | **Smartphone (please complete the following information):** 29 | - Device: [e.g. iPhone6] 30 | - OS: [e.g. iOS8.1] 31 | - Browser [e.g. stock browser, safari] 32 | - Version [e.g. 22] 33 | 34 | **Additional context** 35 | Add any other context about the problem here. 36 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | 5 | --- 6 | 7 | **Is your feature request related to a problem? Please describe.** 8 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 9 | 10 | **Describe the solution you'd like** 11 | A clear and concise description of what you want to happen. 12 | 13 | **Describe alternatives you've considered** 14 | A clear and concise description of any alternative solutions or features you've considered. 15 | 16 | **Additional context** 17 | Add any other context or screenshots about the feature request here. 18 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | ## Pull Request Guidelines 2 | Please, go through these steps before you submit a pull request. 3 | 4 | 1. Make sure that your pull request is not a duplicate. 5 | 2. If not, then make sure that: 6 | 7 | 2.1. You have done your changes in a separate branch. Branches MUST have descriptive names that start with either the `fix/` or `feature/` prefixes. Good examples are: `fix/signin-issue` or `feature/issue-templates`. 8 | 9 | 2.2. You have a descriptive commit message with a short title (first line). 10 | 11 | 2.2. You have created one pull request for one purpose only. Create separate branches and separate pull requests for each newly introduced feature or for each fixed issue. 12 | 13 | 2.3. You have only one commit (if not, squash them into one commit). 14 | 15 | 3. **After** these steps, you're ready to open a pull request. 16 | 17 | 3.1. Your pull request MUST NOT target the `master` branch on this repository. Instead target the next version branch. For eg. If the [current stable version](https://github.com/pratikborsadiya/vali-admin/releases/latest) of the theme is `2.3.1` then target the branch for the next version `2.3.2` or `3.0.0` if the next version is a major release. Your changes will be merged in master branch when the next release will happen. 18 | 19 | 3.2. Give a descriptive title to your PR. 20 | 21 | 3.3. Provide a description of your changes. 22 | 23 | 3.4. Put `closes #XXXX` in your comment to auto-close the issue that your PR fixes. 24 | 25 | IMPORTANT: Please review the [CONTRIBUTING.md](../CONTRIBUTING.md) file for detailed contributing guidelines. 26 | 27 | **PLEASE REMOVE THIS TEMPLATE BEFORE SUBMITTING** -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .DS_Store 3 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation. 6 | 7 | ## Our Standards 8 | 9 | Examples of behavior that contributes to creating a positive environment include: 10 | 11 | * Using welcoming and inclusive language 12 | * Being respectful of differing viewpoints and experiences 13 | * Gracefully accepting constructive criticism 14 | * Focusing on what is best for the community 15 | * Showing empathy towards other community members 16 | 17 | Examples of unacceptable behavior by participants include: 18 | 19 | * The use of sexualized language or imagery and unwelcome sexual attention or advances 20 | * Trolling, insulting/derogatory comments, and personal or political attacks 21 | * Public or private harassment 22 | * Publishing others' private information, such as a physical or electronic address, without explicit permission 23 | * Other conduct which could reasonably be considered inappropriate in a professional setting 24 | 25 | ## Our Responsibilities 26 | 27 | Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. 28 | 29 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. 30 | 31 | ## Scope 32 | 33 | This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. 34 | 35 | ## Enforcement 36 | 37 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at pratikborsadiya@gmail.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. 38 | 39 | Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. 40 | 41 | ## Attribution 42 | 43 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version] 44 | 45 | [homepage]: http://contributor-covenant.org 46 | [version]: http://contributor-covenant.org/version/1/4/ 47 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to Vali Admin 2 | 3 | :+1::tada: First off, thanks for taking the time to contribute! :tada::+1: 4 | 5 | The following is a set of guidelines for contributing to Vali Admin. These are mostly guidelines, not rules. Use your best judgment, and feel free to propose changes to this document in a pull request. 6 | 7 | #### Table Of Contents 8 | 9 | [Code of Conduct](#code-of-conduct) 10 | 11 | [How Can I Contribute?](#how-can-i-contribute) 12 | * [Reporting Bugs](#reporting-bugs) 13 | * [Suggesting Enhancements](#suggesting-enhancements) 14 | * [Fixing a bug](#fixing-a-bug) 15 | * [Providing Enhancements](#providing-enhancements) 16 | * [Pull Requests](#pull-requests) 17 | 18 | [Styleguides](#styleguides) 19 | * [Git Commit Messages](#git-commit-messages) 20 | 21 | ## Code of Conduct 22 | 23 | This project and everyone participating in it is governed by the [Contributor Covenant Code of Conduct](CODE_OF_CONDUCT.md). By participating, you are expected to uphold this code. Please report unacceptable behavior to [pratikborsadiya@gmail.com](mailto:pratikborsadiya@gmail.com). 24 | 25 | ## How Can I Contribute? 26 | 27 | ### Reporting Bugs 28 | 29 | This section guides you through submitting a bug report for Vali Admin. Following these guidelines helps maintainers and the community understand your report :pencil:, reproduce the behavior :computer: :computer:, and find related reports :mag_right:. 30 | 31 | Before creating bug reports, please check existing open issues and make sure the issue you are reporting is not already reported and open. When you are creating a bug report, please fill out the required template, the information it asks for helps us resolve issues faster. 32 | 33 | > **Note:** If you find a **Closed** issue that seems like it is the same thing that you're experiencing, open a new issue and include a link to the original issue in the body of your new one. 34 | 35 | #### How Do I Submit A (Good) Bug Report? 36 | 37 | Bugs are tracked as [GitHub issues](https://guides.github.com/features/issues/). Explain the problem and include additional details to help maintainers reproduce the problem: 38 | 39 | * **Use a clear and descriptive title** for the issue to identify the problem. 40 | * **Describe the exact steps which reproduce the problem** in as many details as possible. 41 | * **If you're providing snippets in the issue, use [Markdown code blocks](https://help.github.com/articles/markdown-basics/#multiple-lines)**. 42 | * **Describe the behavior you observed after following the steps** and point out what exactly is the problem with that behavior. 43 | * **Explain which behavior you expected to see instead and why.** 44 | * **Include screenshots and animated GIFs** which show you following the described steps and clearly demonstrate the problem. You can use [this tool](https://www.cockos.com/licecap/) to record GIFs on macOS and Windows, and [this tool](https://github.com/colinkeenan/silentcast) or [this tool](https://github.com/GNOME/byzanz) on Linux. 45 | 46 | ### Suggesting Enhancements 47 | 48 | Just like bugs enhancements can also be suggested as [GitHub issues](https://guides.github.com/features/issues/). 49 | 50 | #### How Do I Submit A (Good) Enhancement Suggestion ? 51 | 52 | * **Use a clear and descriptive title** for the suggestion you are proposing. 53 | * **Include related screenshots or animated GIFs** for better clarity. 54 | * **Describe how would it be useful** for the users. 55 | 56 | ### Fixing a bug 57 | 58 | * If you are considering to fix an open issue please comment on the issue that you are working on fixing the issue and how are you planning to fix it. 59 | * Create a new issue if the one you are fixing is not already open and then comment on the issue that you are fixing it. 60 | * This will let the contributors know that the specific issue is currently being fixed and they shold wait sometime before trying to fix the same issue themselves. 61 | 62 | ### Providing Enhancements 63 | * If you are planning to propose a new feature please open an issue for the same feature request prior to starting work on a feature. 64 | * This will help the contributors and maintainers provide feedback and support for the enhancement you are providing. 65 | 66 | ### Pull requests 67 | Please, go through these steps before you submit a pull request. 68 | 69 | 1. Make sure that your pull request is not a duplicate. 70 | 2. If not, then make sure that: 71 | 72 | 2.1. You have done your changes in a separate branch. Branches MUST have descriptive names that start with either the `fix` or `feature` prefixes. Good examples are: `fix-signin-issue` or `feature-issue-templates`. 73 | 74 | 2.2. You have a descriptive commit message with a short title (first line). 75 | 76 | 2.2. You have created one pull request for one purpose only. Create separate branches and separate pull requests for each newly introduced feature or for each fixed issue. 77 | 78 | 2.3. You have only one commit (if not, squash them into one commit). 79 | 80 | 3. **After** these steps, you're ready to open a pull request. 81 | 82 | 3.1. Your pull request MUST NOT target the `master` branch on this repository. Instead target the next version branch. For eg. If the [current stable version](https://github.com/pratikborsadiya/vali-admin/releases/latest) of the theme is `2.3.1` then target the branch for the next version `2.3.2` or `3.0.0` if the next version is a major release. Your changes will be merged in master branch when the next release will happen. 83 | 84 | 3.2. Give a descriptive title to your PR. 85 | 86 | 3.3. Provide a description of your changes. 87 | 88 | 3.4. Put `closes #XXXX` in your comment to auto-close the issue that your PR fixes. 89 | 90 | ## Styleguides 91 | 92 | ### Git Commit Messages 93 | 94 | * Use the present tense ("Add feature" not "Added feature") 95 | * Use the imperative mood ("Move cursor to..." not "Moves cursor to...") 96 | * Limit the first line to 72 characters or less 97 | * Reference issues and pull requests liberally after the first line 98 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | const sass = require('sass'); 2 | module.exports = function (grunt) { 3 | grunt.initConfig({ 4 | pkg: grunt.file.readJSON('package.json'), 5 | watch: { 6 | options: { livereload: true }, 7 | scss: { 8 | files: ['src/sass/**/*.sass', 'src/sass/**/*.scss'], 9 | tasks: ['sass', 'postcss'], 10 | options: { 11 | interrupt: true 12 | } 13 | }, 14 | pug: { 15 | files: ['src/pug/**/*.pug'], 16 | tasks: ['pug'], 17 | options: { 18 | interrupt: true 19 | } 20 | } 21 | }, 22 | pug: { 23 | compile: { 24 | options: { 25 | pretty: true 26 | }, 27 | files: [{ 28 | src: ['**/*.pug', '!**/_*.pug'], 29 | dest: "docs/", 30 | ext: ".html", 31 | cwd: "src/pug/", 32 | expand: true 33 | }] 34 | } 35 | }, 36 | sass: { 37 | dist: { 38 | options: { 39 | implementation: sass, 40 | outputStyle: 'expanded', 41 | sourceMap: false 42 | }, 43 | files: [{ 44 | expand: true, 45 | cwd: 'src/sass/', 46 | src: ['*.scss'], 47 | dest: 'docs/css/', 48 | ext: '.css' 49 | }] 50 | } 51 | }, 52 | postcss: { 53 | options: { 54 | map: false, 55 | processors: [ 56 | require('autoprefixer')({ overrideBrowserslist: 'last 2 versions' }), // add vendor prefixes 57 | ] 58 | }, 59 | dist: { 60 | src: ['docs/css/*.css'] 61 | } 62 | }, 63 | cssmin: { 64 | target: { 65 | files: [{ 66 | expand: true, 67 | cwd: 'docs/css', 68 | src: ['*.css', '!*.min.css'], 69 | dest: 'docs/css', 70 | ext: '.min.css' 71 | }] 72 | } 73 | } 74 | }); 75 | 76 | // Load the Grunt plugins. 77 | grunt.loadNpmTasks('grunt-sass'); 78 | grunt.loadNpmTasks('grunt-postcss'); 79 | grunt.loadNpmTasks('grunt-contrib-cssmin'); 80 | grunt.loadNpmTasks('grunt-contrib-pug'); 81 | grunt.loadNpmTasks('grunt-contrib-watch'); 82 | 83 | // Set task aliases 84 | grunt.registerTask('default', ['watch']); 85 | grunt.registerTask('build', ['pug', 'sass', 'postcss', 'cssmin']); 86 | }; 87 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016-Present, Pratik Borsadiya 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 must be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vali Admin 2 | 3 | ![vali-admin](http://pratikborsadiya.in/blog/vali-admin/vali-admin-banner.gif) 4 | 5 | [![npm version](https://badge.fury.io/js/vali-admin.svg)](https://badge.fury.io/js/vali-admin) 6 | 7 | Vali is a free, modular and easy to customize admin theme built using [Bootstrap 5](https://getbootstrap.com), [SASS](http://sass-lang.com) and [Pug.js](https://pugjs.org). 8 | 9 | ## Getting started 10 | 11 | Run a `npm install` command in project root directory to install and build dependencies. If you don't want to edit theme you can use the compiled files inside `docs` folder. 12 | 13 | Use `npm run dev` command to watch and compile source files. 14 | 15 | Use `npm run build` command to compile all source files. 16 | 17 | Use `npm run start` command to start a development server using NodeJs. 18 | 19 | > **Note:** 20 | > * The NodeJs server mentioned in `npm run start` command is for development purpose only. DONOT use it as a production server. 21 | 22 | ## Customization 23 | For more information about customizing theme colors please follow the official [documentation](https://pratikborsadiya.in/vali-admin/docs.html). 24 | 25 | ## RTL Support 26 | Please follow the official [documentation](https://pratikborsadiya.in/vali-admin/docs.html) to enable RTL support. 27 | 28 | ## Contributing 29 | Please take a look at [contributing guidelines](CONTRIBUTING.md) if you are considering contributing to the repository. 30 | 31 | ## Contributors 32 | 33 | * **[Pratik Borsadiya](http://pratikborsadiya.in)** - *Project Author* 34 | * **List of [contributors](https://github.com/pratikborsadiya/vali-admin/graphs/contributors)** who participated in this project. 35 | 36 | ## License 37 | 38 | This project is licensed under the [MIT](LICENSE) License 39 | -------------------------------------------------------------------------------- /docs/blank-page.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | Blank Page - Vali Admin 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 83 |
84 | 85 |
86 | 129 |
130 |
131 |
132 |

Blank Page

133 |

Start a beautiful journey here

134 |
135 | 139 |
140 |
141 |
142 |
143 |
Create a beautiful dashboard
144 |
145 |
146 |
147 |
148 | 149 | 150 | 151 | 152 | 153 | 154 | 164 | 165 | -------------------------------------------------------------------------------- /docs/images/banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pratikborsadiya/vali-admin/7130e93e650206d627cbe762ea0827cf592f3b83/docs/images/banner.jpg -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | Vali Admin - Free Bootstrap 5 Dashboard Template 20 | 21 | 22 | 23 | 61 |
62 |
63 |
64 |

Vali Admin - A Free Bootstrap 5 Dashboard Template

65 |

Built with PugJS, SASS, and Bootstrap 5

66 |
DemoGitHub
67 |
68 |
69 |
70 |

Features

71 |
72 |
73 |
74 | 75 | 76 | 77 |
78 |

Free to use and open-source

79 |
80 |
81 |
82 | 83 | 84 | 85 |
86 |

Beautiful and mobile responsive

87 |
88 |
89 |
90 | 91 | 92 | 93 |
94 |

Built with Bootstrap 5, SASS and PUG.js

95 |
96 |
97 |
98 | 99 | 100 | 101 |
102 |

Chart.js integration to display responsive charts

103 |
104 |
105 |
106 | 107 | 108 | 109 |
110 |

Seven pre built pages including login, user profile and print friendly invoice page

111 |
112 |
113 |
114 | 115 | 116 | 117 |
118 |

Data tables with sort, search and paginate functions

119 |
120 |
121 |
122 | 123 | 124 | -------------------------------------------------------------------------------- /docs/js/main.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | "use strict"; 3 | 4 | var treeviewMenu = $('.app-menu'); 5 | 6 | // Toggle Sidebar 7 | $('[data-toggle="sidebar"]').click(function(event) { 8 | event.preventDefault(); 9 | $('.app').toggleClass('sidenav-toggled'); 10 | }); 11 | 12 | // Activate sidebar treeview toggle 13 | $("[data-toggle='treeview']").click(function(event) { 14 | event.preventDefault(); 15 | if(!$(this).parent().hasClass('is-expanded')) { 16 | treeviewMenu.find("[data-toggle='treeview']").parent().removeClass('is-expanded'); 17 | } 18 | $(this).parent().toggleClass('is-expanded'); 19 | }); 20 | 21 | })(); 22 | -------------------------------------------------------------------------------- /docs/page-error.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | Error Page - Vali Admin 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 83 |
84 | 85 |
86 | 129 |
130 |
131 |

Error 404: Page not found

132 |

The page you have requested is not found.

133 |

Go Back

134 |
135 |
136 | 137 | 138 | 139 | 140 | 141 | 142 | 152 | 153 | -------------------------------------------------------------------------------- /docs/page-invoice.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | Invoice - Vali Admin 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 83 |
84 | 85 |
86 | 129 |
130 |
131 |
132 |

Invoice

133 |

A Printable Invoice Format

134 |
135 | 139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |

Vali Inc

147 |
148 |
149 |
Date: 01/01/2016
150 |
151 |
152 |
153 |
From 154 |
Vali Inc.
518 Akshar Avenue
Gandhi Marg
New Delhi
Email: hello@vali.com
155 |
156 |
To 157 |
John Doe
795 Folsom Ave, Suite 600
San Francisco, CA 94107
Phone: (555) 539-1037
Email: john.doe@example.com
158 |
159 |
Invoice #007612

Order ID: 4F3S8J
Payment Due: 2/22/2014
Account: 968-34567
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 |
QtyProductSerial #DescriptionSubtotal
1The Hunger Games455-981-221El snort testosterone trophy driving gloves handsome$41.32
1City of Bones247-925-726Wes Anderson umami biodiesel$75.52
1The Maze Runner545-457-47Terry Richardson helvetica tousled street art master$15.25
1The Fault in Our Stars757-855-857Tousled lomo letterpress$03.44
204 |
205 |
206 |
207 |
Print
208 |
209 |
210 |
211 |
212 |
213 |
214 | 215 | 216 | 217 | 218 | 219 | 220 | 230 | 231 | -------------------------------------------------------------------------------- /docs/page-lockscreen.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Lockscreen - Vali Admin 12 | 13 | 14 |
15 |
16 |
17 |
18 | 21 |
22 |

John Doe

23 |

Account Locked

24 |
25 |
26 | 27 | 28 |
29 |
30 | 31 |
32 |
33 |

Not John ? Login Here.

34 |
35 |
36 | 37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /docs/page-login.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Login - Vali Admin 12 | 13 | 14 |
15 |
16 |
17 |
18 | 21 |
22 | 46 |
47 | 48 |
49 | 50 | 51 |
52 |
53 | 54 |
55 |
56 |

Back to Login

57 |
58 |
59 |
60 |
61 | 62 | 63 | 64 | 65 | 72 | 73 | -------------------------------------------------------------------------------- /docs/ui-cards.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | Cards - Vali Admin 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 83 |
84 | 85 |
86 | 129 |
130 |
131 |
132 |

Cards

133 |

Material design inspired cards

134 |
135 | 140 |
141 |
142 |
143 |
144 |

Card Title

145 |
Hey there, I am a very simple card. I am good at containing small bits of information. I am quite convenient because I require little markup to use effectively.
146 |
Link
147 |
148 |
149 |
150 |
151 |
152 |

All Items

153 |

Add Item

154 |
155 |
156 | Card with action button
157 | Hey there, I am a very simple card. I am good at containing small bits of information. I am quite convenient because I require little markup to use effectively. 158 | 159 | 160 |
161 |
162 |
163 |
164 |
165 |
166 |
167 |

All Items

168 |
169 |
170 |
171 | Card with button group
172 | Hey there, I am a very simple card. I am good at containing small bits of information. I am quite convenient because I require little markup to use effectively. 173 | 174 |
175 |
176 |
177 |
178 |
179 |
180 |
181 | 182 | 183 | 184 |
185 |

Loading

186 |
187 |
188 |

All Items

189 |

Add Item

190 |
191 |
192 | Card with action button
193 | Hey there, I am a very simple card. I am good at containing small bits of information. I am quite convenient because I require little markup to use effectively. 194 |
195 |
196 |
197 |
198 |
199 | 200 | 201 | 202 | 203 | 204 | 205 | 215 | 216 | -------------------------------------------------------------------------------- /docs/widgets.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | Widgets - Vali Admin 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 83 |
84 | 85 |
86 | 129 |
130 |
131 |
132 |

Widgets

133 |

Widgets to interactively display data

134 |
135 | 140 |
141 |
142 |
143 |
144 |
145 |

Users

146 |

5

147 |
148 |
149 |
150 |
151 |
152 |
153 |

Likes

154 |

25

155 |
156 |
157 |
158 |
159 |
160 |
161 |

Uploades

162 |

10

163 |
164 |
165 |
166 |
167 |
168 |
169 |

Stars

170 |

500

171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 |
179 |

Users

180 |

5

181 |
182 |
183 |
184 |
185 |
186 |
187 |

Likes

188 |

25

189 |
190 |
191 |
192 |
193 |
194 |
195 |

Uploades

196 |

10

197 |
198 |
199 |
200 |
201 |
202 |
203 |

Stars

204 |

500

205 |
206 |
207 |
208 |
209 |
210 |
211 |
212 |

Chat

213 |
214 |
215 |
216 |

Hello there!
Good Morning

217 |
218 |
219 |

Hi
Good Morning

220 |
221 |
222 |

How are you?

223 |
224 |
225 |

I'm Fine.

226 |
227 |
228 |
229 | 230 | 231 |
232 |
233 |
234 |
235 |
236 |
237 | 238 | 239 | 240 | 241 | 242 | 243 | 253 | 254 | -------------------------------------------------------------------------------- /node-dev-server.js: -------------------------------------------------------------------------------- 1 | // Node JS development server for Vali Admin 2 | 3 | const http = require("http"); 4 | const url = require("url"); 5 | const path = require("path"); 6 | const fs = require("fs"); 7 | const port = process.argv[2] || 8888; 8 | 9 | http.createServer(function (request, response) { 10 | var uri = url.parse(request.url).pathname, 11 | filename = path.join(process.cwd(), 'docs', uri); 12 | if (uri.includes('..')) { 13 | response.writeHead(403, { 'Content-Type': 'text/plain' }); 14 | response.end(); 15 | return; 16 | } 17 | 18 | var extname = path.extname(filename); 19 | var contentType = 'text/html'; 20 | 21 | switch (extname) { 22 | case '.js': contentType = 'text/javascript'; break; 23 | case '.css': contentType = 'text/css'; break; 24 | case '.ico': contentType = 'image/x-icon'; break; 25 | case '.svg': contentType = 'image/svg+xml'; break; 26 | } 27 | 28 | fs.exists(filename, function (exists) { 29 | if (!exists) { 30 | response.writeHead(404, { "Content-Type": "text/plain" }); 31 | response.write("404 Not Found\n"); 32 | response.end(); 33 | return; 34 | } 35 | 36 | if (fs.statSync(filename).isDirectory()) filename += '/index.html'; 37 | 38 | fs.readFile(filename, "binary", function (err, file) { 39 | if (err) { 40 | response.writeHead(500, { "Content-Type": "text/plain" }); 41 | response.write(err + "\n"); 42 | response.end(); 43 | return; 44 | } 45 | response.writeHead(200, { 'Content-Type': contentType }); 46 | response.write(file, "binary"); 47 | response.end(); 48 | }); 49 | }); 50 | }).listen(parseInt(port, 10)); 51 | 52 | console.log("Server is running on http://localhost:" + port); 53 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vali-admin", 3 | "version": "4.1.0", 4 | "description": "An admin theme built with Bootstrap, sass and PugJs", 5 | "devDependencies": { 6 | "autoprefixer": "^9.8.8", 7 | "grunt": "^1.6.1", 8 | "grunt-contrib-cssmin": "^5.0.0", 9 | "grunt-contrib-pug": "^3.0.0", 10 | "grunt-contrib-watch": "^1.1.0", 11 | "grunt-postcss": "^0.9.0", 12 | "grunt-sass": "^3.1.0", 13 | "sass": "^1.69.3" 14 | }, 15 | "scripts": { 16 | "dev": "grunt watch", 17 | "build": "grunt build --verbose", 18 | "start": "node node-dev-server.js" 19 | }, 20 | "repository": { 21 | "type": "git", 22 | "url": "git+https://github.com/pratikborsadiya/vali-admin.git" 23 | }, 24 | "keywords": [ 25 | "admin", 26 | "dashboard", 27 | "theme" 28 | ], 29 | "author": "Pratik Borsadiya", 30 | "license": "MIT", 31 | "bugs": { 32 | "url": "https://github.com/pratikborsadiya/vali-admin/issues" 33 | }, 34 | "homepage": "http://pratikborsadiya.in/blog/vali-admin", 35 | "dependencies": { 36 | "bootstrap": "^5.3.2" 37 | }, 38 | "files": [ 39 | "docs" 40 | ] 41 | } 42 | -------------------------------------------------------------------------------- /src/pug/blank-page.pug: -------------------------------------------------------------------------------- 1 | extends layouts/_layout.pug 2 | 3 | block variables 4 | - var activePage = 'blank-page'; 5 | - var activeGroup = 'pages'; 6 | 7 | block title 8 | title Blank Page - Vali Admin 9 | 10 | block content 11 | .app-title 12 | div 13 | h1 14 | i.bi.bi-speedometer 15 | | Blank Page 16 | p Start a beautiful journey here 17 | 18 | ul.app-breadcrumb.breadcrumb 19 | li.breadcrumb-item 20 | i.bi.bi-house-door.fs-6 21 | li.breadcrumb-item 22 | a(href='#') Blank Page 23 | 24 | .row 25 | .col-md-12 26 | .tile 27 | .tile-body Create a beautiful dashboard -------------------------------------------------------------------------------- /src/pug/dashboard.pug: -------------------------------------------------------------------------------- 1 | extends layouts/_layout.pug 2 | 3 | block variables 4 | - var activePage = 'dashboard'; 5 | - var activeGroup = 'none'; 6 | 7 | block content 8 | .app-title 9 | div 10 | h1 11 | i.bi.bi-speedometer 12 | | Dashboard 13 | p A free and open source Bootstrap 5 admin template 14 | 15 | ul.app-breadcrumb.breadcrumb 16 | li.breadcrumb-item 17 | i.bi.bi-house-door.fs-6 18 | li.breadcrumb-item 19 | a(href='#') Dashboard 20 | 21 | .row 22 | .col-md-6.col-lg-3 23 | .widget-small.primary.coloured-icon 24 | i.icon.bi.bi-people.fs-1 25 | div.info 26 | h4 Users 27 | p 28 | b 5 29 | 30 | .col-md-6.col-lg-3 31 | .widget-small.info.coloured-icon 32 | i.icon.bi.bi-heart.fs-1 33 | div.info 34 | h4 Likes 35 | p 36 | b 25 37 | 38 | .col-md-6.col-lg-3 39 | .widget-small.warning.coloured-icon 40 | i.icon.bi.bi-folder2.fs-1 41 | div.info 42 | h4 Uploades 43 | p 44 | b 10 45 | 46 | .col-md-6.col-lg-3 47 | .widget-small.danger.coloured-icon 48 | i.icon.bi.bi-star.fs-1 49 | div.info 50 | h4 Stars 51 | p 52 | b 500 53 | .row 54 | .col-md-6 55 | .tile 56 | h3.tile-title Weekly Sales - Last week 57 | .ratio.ratio-16x9 58 | div(id="salesChart") 59 | 60 | .col-md-6 61 | .tile 62 | h3.tile-title Support Requests 63 | .ratio.ratio-16x9 64 | div(id="supportRequestChart") 65 | 66 | 67 | block specific-js 68 | script(type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js") 69 | script(type="text/javascript"). 70 | const salesData = { 71 | xAxis: { 72 | type: 'category', 73 | data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] 74 | }, 75 | yAxis: { 76 | type: 'value', 77 | axisLabel: { 78 | formatter: '${value}' 79 | } 80 | }, 81 | series: [ 82 | { 83 | data: [150, 230, 224, 218, 135, 147, 260], 84 | type: 'line', 85 | smooth: true 86 | } 87 | ], 88 | tooltip: { 89 | trigger: 'axis', 90 | formatter: "{b0}: ${c0}" 91 | } 92 | } 93 | 94 | const supportRequests = { 95 | tooltip: { 96 | trigger: 'item' 97 | }, 98 | legend: { 99 | orient: 'vertical', 100 | left: 'left' 101 | }, 102 | series: [ 103 | { 104 | name: 'Support Requests', 105 | type: 'pie', 106 | radius: '50%', 107 | data: [ 108 | { value: 300, name: 'In Progress' }, 109 | { value: 50, name: 'Delayed' }, 110 | { value: 100, name: 'Complete' } 111 | ], 112 | emphasis: { 113 | itemStyle: { 114 | shadowBlur: 10, 115 | shadowOffsetX: 0, 116 | shadowColor: 'rgba(0, 0, 0, 0.5)' 117 | } 118 | } 119 | } 120 | ] 121 | }; 122 | 123 | const salesChartElement = document.getElementById('salesChart'); 124 | const salesChart = echarts.init(salesChartElement, null, { renderer: 'svg' }); 125 | salesChart.setOption(salesData); 126 | new ResizeObserver(() => salesChart.resize()).observe(salesChartElement); 127 | 128 | const supportChartElement = document.getElementById("supportRequestChart") 129 | const supportChart = echarts.init(supportChartElement, null, { renderer: 'svg' }); 130 | supportChart.setOption(supportRequests); 131 | new ResizeObserver(() => supportChart.resize()).observe(supportChartElement); 132 | 133 | -------------------------------------------------------------------------------- /src/pug/docs.pug: -------------------------------------------------------------------------------- 1 | extends layouts/_layout.pug 2 | 3 | block variables 4 | - var activePage = 'docs'; 5 | - var activeGroup = 'none'; 6 | 7 | block title 8 | title Documentation - Vali Admin 9 | 10 | block content 11 | .app-title 12 | div 13 | h1 14 | i.bi.bi-code-square 15 | | Documentation 16 | p Documentation of vali admin 17 | 18 | ul.app-breadcrumb.breadcrumb 19 | li.breadcrumb-item 20 | i.bi.bi-house-door.fs-6 21 | li.breadcrumb-item 22 | a(href='#') Documentation 23 | 24 | 25 | .tile 26 | .tile-body 27 | .docs(style="max-width: 700px;") 28 | h2.docs-title Directory Structure 29 | 30 | pre.directory-structure. 31 | │ 32 | ├── docs - compiled files 33 | │   ├── css 34 | │   ├── images 35 | │   └── js 36 | └── src - Layout and style source files 37 |     ├── pug - Layout source 38 |     └── sass - Style source 39 | 40 | h2.docs-title#Compilation-of-source-files Compilation of source files 41 | 42 | p The theme is built using SASS and PugJs which are in turn compiled into HTML and CSS by Grunt. If you are not familiar with Grunt, #[a(href="https://24ways.org/2013/grunt-is-not-weird-and-hard/", target="_blank", rel="noopener") here] is an article to get started. If you are familiar with Grunt follow the instruction mentioned bellow to edit or customize the source. 43 | 44 | p If you don't want to edit theme you can use the compiled files directly inside #[code docs] folder. 45 | 46 | p Run #[code npm install] command in project root directory to install and build dependencies. 47 | 48 | p Use #[code npm run dev] task to edit and compile source files on the go or use #[code npm run build] task to compile all source files at once. 49 | 50 | h2.docs-title#Layout-Customization Layout Customization 51 | 52 | p The layout is built using PugJs. All the layout source files are located in #[code src/pug] directory. There are two sub directories inside this directory: 53 | 54 | ol 55 | li #[code layout] - Includes common HTML skeleton layout which is extended by all the pages 56 | li #[code includes] - Includes layout partials like sidebar and navbar and footer 57 | 58 | h2.docs-title#Style-Customization Style Customization 59 | p The styles are written in SASS. All the style files are located in #[code src/sass] directory. There is a file in this directory #[code main.sass] which imports all the files and exported as main.css There are four sub directories inside this directory: 60 | 61 | ol 62 | li #[code 1-tools] - It includes styles of all the external libraries and a file #[code _var.scss] which contains the variables required for the application 63 | li #[code 2-basics] - It contains the basic style like overall structure css and theming options 64 | li #[code 3-component] - It contains the styles for the components like card, widgets, sidebar, navbar etc 65 | li #[code 4-pages] - It contains the styles for the specific pages like login page, lock-screen page 66 | 67 | p To customize the primary color of the theme and sidebar you need to change the variables in the #[code 1-tools/_var.scss]. The detailed documentation about changing the colors is mentioned in this file itself. 68 | 69 | p If you don't want to use particular component or plug-in just comment the import statement for that particular component in #[code src/sass/main.scss] and compile the SASS by running #[code npm run build] command. 70 | 71 | h2.docs-title#Compatibility-with-other-frameworks Compatibility with other frameworks 72 | p This theme is not built for a specific framework or technology like Angular or React etc. But due to it's modular nature it's very easy to incorporate it into any front-end or back-end framework like Angular, React or VueJs or Node JS. The CSS is modular enough to be incorporated in any framework. While the Javascript used to make the components interactive can be used from any of the following framework. 73 | 74 | p If you are using Angular you can use #[a(href="https://angular-ui.github.io/bootstrap/", rel="noopener") ui-bootstrap], for React use #[a(href="https://react-bootstrap.github.io/", rel="noopener") React-Bootstrap] and for VueJs you can use #[a(href="https://yuche.github.io/vue-strap/", rel="noopener") VueStrap]. 75 | 76 | p If you are using Node JS as your web server you can use pug as your layout engine to render html templates as is without compiling them to HTML. More details are available #[a(href="https://pugjs.org/api/express.html", target="_balnk") here]. 77 | 78 | h2.docs-title#RTL-Support RTL Support 79 | 80 | p To enable RTL support 81 | ul 82 | li Uncomment this line #[code @import '3-component/rtl';] in #[code src/sass/main.scss]. 83 | li Add #[code dir="rtl"] attribute to #[code <html>] tag in #[code src/pug/layouts/_layout.pug]. 84 | li Build the source files using #[code npm run build] command. 85 | 86 | h2.docs-title#Contribution-and-Issues Contribution & Issues 87 | 88 | p If you liked the theme do star and fork it on #[a(href="https://github.com/pratikborsadiya/vali-admin", target="_blank", rel="noopener") GitHub]. If you find anything missing or want to contribute to this documentation, the source is available #[a(href="https://github.com/pratikborsadiya/vali-admin/blob/master/src/pug/docs.pug", target="_blank", rel="noopener") here]. If you have an issue or feature request regarding theme please report it #[a(href="https://github.com/pratikborsadiya/vali-admin/issues/new", target="_blank", rel="noopener") here]. -------------------------------------------------------------------------------- /src/pug/form-components.pug: -------------------------------------------------------------------------------- 1 | extends layouts/_layout.pug 2 | 3 | block variables 4 | - var activePage = 'form-components'; 5 | - var activeGroup = 'forms'; 6 | 7 | block title 8 | title Form Components - Vali Admin 9 | 10 | block content 11 | .app-title 12 | div 13 | h1 14 | i.bi.bi-ui-checks 15 | | Form Components 16 | p Bootstrap default form components 17 | 18 | ul.app-breadcrumb.breadcrumb 19 | li.breadcrumb-item 20 | i.bi.bi-house-door.fs-6 21 | li.breadcrumb-item 22 | | Forms 23 | li.breadcrumb-item 24 | a(href="#") Form Components 25 | 26 | .row 27 | .col-md-12 28 | .tile 29 | .row 30 | .col-lg-6 31 | form 32 | .mb-3 33 | label.form-label(for='exampleInputEmail1') Email address 34 | input#exampleInputEmail1.form-control(type='email', aria-describedby='emailHelp', placeholder='Enter email') 35 | small#emailHelp.form-text.text-muted We'll never share your email with anyone else. 36 | .mb-3 37 | label.form-label(for='exampleInputPassword1') Password 38 | input#exampleInputPassword1.form-control(type='password', placeholder='Password') 39 | .mb-3 40 | label.form-label(for='exampleSelect1') Example select 41 | select#exampleSelect1.form-control 42 | option 1 43 | option 2 44 | option 3 45 | option 4 46 | option 5 47 | .mb-3 48 | label.form-label(for='exampleSelect2') Example multiple select 49 | select#exampleSelect2.form-control(multiple='') 50 | option 1 51 | option 2 52 | option 3 53 | option 4 54 | option 5 55 | .mb-3 56 | label.form-label(for='exampleTextarea') Example textarea 57 | textarea#exampleTextarea.form-control(rows='3') 58 | .mb-3 59 | label.form-label(for='exampleInputFile') File input 60 | input#exampleInputFile.form-control(type='file', aria-describedby='fileHelp') 61 | div.form-text.text-muted 62 | | This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line. 63 | fieldset.mb-3 64 | legend Radio buttons 65 | .form-check 66 | label.form-check-label 67 | input#optionsRadios1.form-check-input(type='radio', name='optionsRadios', value='option1', checked='') 68 | | Option one is this and that—be sure to include why it's great 69 | .form-check 70 | label.form-check-label 71 | input#optionsRadios2.form-check-input(type='radio', name='optionsRadios', value='option2') 72 | | Option two can be something else and selecting it will deselect option one 73 | .form-check.disabled 74 | label.form-check-label 75 | input#optionsRadios3.form-check-input(type='radio', name='optionsRadios', value='option3', disabled) 76 | | Option three is disabled 77 | .form-check 78 | label.form-check-label 79 | input.form-check-input(type='checkbox') 80 | | Check me out 81 | 82 | .col-lg-4.offset-lg-1 83 | form 84 | .mb-3 85 | fieldset(disabled='') 86 | label.form-label(for='disabledInput') Disabled input 87 | input#disabledInput.form-control(type='text', placeholder='Disabled input here...', disabled='') 88 | .mb-3 89 | fieldset 90 | label.form-label(for='readOnlyInput') Readonly input 91 | input#readOnlyInput.form-control(type='text', placeholder='Readonly input here…', readonly='') 92 | .mb-3.has-success 93 | label.form-form-label(for='inputSuccess1') Valid input 94 | input#inputValid.form-control.is-valid(type='text') 95 | .form-control-feedback Success! You've done it. 96 | .mb-3.has-danger 97 | label.form-form-label(for='inputDanger1') Invalid input 98 | input#inputInvalid.form-control.is-invalid(type='text') 99 | .form-control-feedback Sorry, that username's taken. Try another? 100 | .mb-3 101 | label.col-form-label.col-form-label-lg(for='inputLarge') Large input 102 | input#inputLarge.form-control.form-control-lg(type='text') 103 | .mb-3 104 | label.col-form-label(for='inputDefault') Default input 105 | input#inputDefault.form-control(type='text') 106 | .mb-3 107 | label.col-form-label.col-form-label-sm(for='inputSmall') Small input 108 | input#inputSmall.form-control.form-control-sm(type='text') 109 | .mb-3 110 | label.form-label Input addons 111 | .mb-3 112 | label.sr-only(for='exampleInputAmount') Amount (in dollars) 113 | .input-group 114 | .input-group-prepend 115 | span.input-group-text $ 116 | input#exampleInputAmount.form-control(type='text', placeholder='Amount') 117 | .input-group-append 118 | span.input-group-text .00 119 | .tile-footer 120 | button.btn.btn-primary(type='submit') Submit -------------------------------------------------------------------------------- /src/pug/form-samples.pug: -------------------------------------------------------------------------------- 1 | extends layouts/_layout.pug 2 | 3 | block variables 4 | - var activePage = 'form-samples'; 5 | - var activeGroup = 'forms'; 6 | 7 | block title 8 | title Form Samples - Vali Admin 9 | 10 | block content 11 | .app-title 12 | div 13 | h1 14 | i.bi.bi-ui-checks 15 | | Form Samples 16 | p Sample forms 17 | 18 | ul.app-breadcrumb.breadcrumb 19 | li.breadcrumb-item 20 | i.bi.bi-house-door.fs-6 21 | li.breadcrumb-item 22 | | Forms 23 | li.breadcrumb-item 24 | a(href="#") Sample Forms 25 | 26 | .row 27 | .col-md-6 28 | .tile 29 | h3.tile-title Vertical Form 30 | .tile-body 31 | form 32 | .mb-3 33 | label.form-label Name 34 | input.form-control(type="text", placeholder="Enter full name") 35 | 36 | .mb-3 37 | label.form-label Email 38 | input.form-control(type="email", placeholder="Enter email address") 39 | 40 | .mb-3 41 | label.form-label Address 42 | textarea.form-control(rows="4", placeholder="Enter your address") 43 | 44 | .mb-3 45 | label.form-label Gender 46 | .form-check 47 | label.form-check-label 48 | input.form-check-input(type='radio', name="gender") 49 | | Male 50 | .form-check 51 | label.form-check-label 52 | input.form-check-input(type='radio', name="gender") 53 | | Female 54 | 55 | .mb-3 56 | label.form-label Identity Proof 57 | input.form-control(type="file") 58 | 59 | .mb-3 60 | .form-check 61 | label.form-check-label 62 | input.form-check-input(type='checkbox') 63 | | I accept the terms and conditions 64 | 65 | .tile-footer 66 | button.btn.btn-primary(type="button") 67 | i.bi.bi-check-circle-fill.me-2 68 | | Register 69 | |     70 | a.btn.btn-secondary(href="#") 71 | i.bi.bi-x-circle-fill.me-2 72 | | Cancel 73 | 74 | .col-md-6 75 | .tile 76 | h3.tile-title Register 77 | .tile-body 78 | form.form-horizontal 79 | .mb-3.row 80 | label.form-label.col-md-3 Name 81 | .col-md-8 82 | input.form-control(type="text", placeholder="Enter full name") 83 | 84 | .mb-3.row 85 | label.form-label.col-md-3 Email 86 | .col-md-8 87 | input.form-control.col-md-8(type="email", placeholder="Enter email address") 88 | 89 | .mb-3.row 90 | label.form-label.col-md-3 Address 91 | .col-md-8 92 | textarea.form-control(rows="4", placeholder="Enter your address") 93 | 94 | .mb-3.row 95 | label.form-label.col-md-3 Gender 96 | .col-md-9 97 | .form-check 98 | label.form-check-label 99 | input.form-check-input(type='radio', name="gender") 100 | | Male 101 | .form-check 102 | label.form-check-label 103 | input.form-check-input(type='radio', name="gender") 104 | | Female 105 | 106 | .mb-3.row 107 | label.form-label.col-md-3 Identity Proof 108 | .col-md-8 109 | input.form-control(type="file") 110 | 111 | .mb-3.row 112 | .col-md-8.col-md-offset-3 113 | .form-check 114 | label.form-check-label 115 | input.form-check-input(type='checkbox') 116 | | I accept the terms and conditions 117 | 118 | .tile-footer 119 | .row 120 | .col-md-8.col-md-offset-3 121 | button.btn.btn-primary(type="button") 122 | i.bi.bi-check-circle-fill.me-2 123 | | Register 124 | |     125 | a.btn.btn-secondary(href="#") 126 | i.bi.bi-x-circle-fill.me-2 127 | | Cancel 128 | .clearix 129 | 130 | .col-md-12 131 | .tile 132 | h3.tile-title Subscribe 133 | 134 | .tile-body 135 | 136 | form.row 137 | 138 | .mb-3.col-md-3 139 | label.form-label Name 140 | input.form-control(type="text", placeholder="Enter your name") 141 | 142 | .mb-3.col-md-3 143 | label.form-label Email 144 | input.form-control(type="text", placeholder="Enter your email") 145 | 146 | .mb-3.col-md-4.align-self-end 147 | button.btn.btn-primary(type="button") 148 | i.bi.bi-check-circle-fill.me-2 149 | | Subscribe 150 | 151 | -------------------------------------------------------------------------------- /src/pug/includes/_head.pug: -------------------------------------------------------------------------------- 1 | meta(charset='utf-8') 2 | meta(http-equiv='X-UA-Compatible', content='IE=edge') 3 | meta(name='viewport', content='width=device-width, initial-scale=1') 4 | 5 | // Main CSS 6 | link(rel='stylesheet', type='text/css', href='css/main.css') 7 | // Font-icon css 8 | link(rel='stylesheet', type='text/css', href='https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css') -------------------------------------------------------------------------------- /src/pug/includes/_header.pug: -------------------------------------------------------------------------------- 1 | header.app-header 2 | a.app-header__logo(href='index.html') Vali 3 | 4 | // Sidebar toggle button 5 | a.app-sidebar__toggle(href='#', data-toggle='sidebar', aria-label="Hide Sidebar") 6 | 7 | // Navbar Right Menu 8 | ul.app-nav 9 | 10 | li.app-search 11 | input.app-search__input(type="search", placeholder="Search") 12 | button.app-search__button: i.bi.bi-search 13 | 14 | //Notification Menu 15 | li.dropdown 16 | a.app-nav__item(href='#', data-bs-toggle='dropdown' aria-label="Show notifications") 17 | i.bi.bi-bell.fs-5 18 | ul.app-notification.dropdown-menu.dropdown-menu-right 19 | li.app-notification__title You have 4 new notifications. 20 | .app-notification__content 21 | li 22 | a.app-notification__item(href='javascript:;') 23 | span.app-notification__icon 24 | i.bi.bi-envelope.fs-4.text-primary 25 | div 26 | p.app-notification__message Lisa sent you a mail 27 | p.app-notification__meta 2 min ago 28 | 29 | li 30 | a.app-notification__item(href='javascript:;') 31 | span.app-notification__icon 32 | i.bi.bi-exclamation-triangle.fs-4.text-warning 33 | div 34 | p.app-notification__message Mail server not working 35 | p.app-notification__meta 5 min ago 36 | 37 | li 38 | a.app-notification__item(href='javascript:;') 39 | span.app-notification__icon 40 | i.bi.bi-cash.fs-4.text-success 41 | div 42 | p.app-notification__message Transaction complete 43 | p.app-notification__meta 2 days ago 44 | 45 | li 46 | a.app-notification__item(href='javascript:;') 47 | span.app-notification__icon 48 | i.bi.bi-envelope.fs-4.text-primary 49 | div 50 | p.app-notification__message Lisa sent you a mail 51 | p.app-notification__meta 2 min ago 52 | 53 | li 54 | a.app-notification__item(href='javascript:;') 55 | span.app-notification__icon 56 | i.bi.bi-exclamation-triangle.fs-4.text-warning 57 | div 58 | p.app-notification__message Mail server not working 59 | p.app-notification__meta 5 min ago 60 | 61 | li 62 | a.app-notification__item(href='javascript:;') 63 | span.app-notification__icon 64 | i.bi.bi-cash.fs-4.text-success 65 | div 66 | p.app-notification__message Transaction complete 67 | p.app-notification__meta 2 days ago 68 | 69 | li.app-notification__footer 70 | a(href='#') See all notifications. 71 | 72 | // User Menu 73 | li.dropdown 74 | a.app-nav__item(href='#', data-bs-toggle='dropdown' aria-label="Open Profile Menu") 75 | i.bi.bi-person.fs-4 76 | ul.dropdown-menu.settings-menu.dropdown-menu-right 77 | li 78 | a.dropdown-item(href='page-user.html') 79 | i.bi.bi-gear.me-2.fs-5 80 | | Settings 81 | li 82 | a.dropdown-item(href='page-user.html') 83 | i.bi.bi-person.me-2.fs-5 84 | | Profile 85 | li 86 | a.dropdown-item(href='page-login.html') 87 | i.bi.bi-box-arrow-right.me-2.fs-5 88 | | Logout 89 | -------------------------------------------------------------------------------- /src/pug/includes/_javascript.pug: -------------------------------------------------------------------------------- 1 | // Essential javascripts for application to work 2 | script(src='js/jquery-3.7.0.min.js') 3 | script(src='js/bootstrap.min.js') 4 | script(src='js/main.js') 5 | -------------------------------------------------------------------------------- /src/pug/includes/_landing-icons.pug: -------------------------------------------------------------------------------- 1 | svg(aria-hidden='true', style='position: absolute; width: 0; height: 0; overflow: hidden;', version='1.1', xmlns='http://www.w3.org/2000/svg', xmlns:xlink='http://www.w3.org/1999/xlink') 2 | defs 3 | symbol#icon-chart(viewbox='0 0 32 32') 4 | title chart 5 | path(stroke-linejoin='round', stroke-linecap='round', stroke-miterlimit='4', stroke-width='2.6667', d='M24 26.667v-13.333') 6 | path(stroke-linejoin='round', stroke-linecap='round', stroke-miterlimit='4', stroke-width='2.6667', d='M16 26.667v-21.333') 7 | path(stroke-linejoin='round', stroke-linecap='round', stroke-miterlimit='4', stroke-width='2.6667', d='M8 26.667v-8') 8 | symbol#icon-globe(viewbox='0 0 32 32') 9 | title globe 10 | path(stroke-linejoin='round', stroke-linecap='round', stroke-miterlimit='4', stroke-width='2.6667', d='M29.333 16c0 7.364-5.97 13.333-13.333 13.333s-13.333-5.97-13.333-13.333c0-7.364 5.97-13.333 13.333-13.333s13.333 5.97 13.333 13.333z') 11 | path(stroke-linejoin='round', stroke-linecap='round', stroke-miterlimit='4', stroke-width='2.6667', d='M2.667 16h26.667') 12 | path(stroke-linejoin='round', stroke-linecap='round', stroke-miterlimit='4', stroke-width='2.6667', d='M16 2.667c3.216 3.512 5.223 8.178 5.333 13.311l0 0.022c-0.111 5.155-2.117 9.822-5.347 13.349l0.014-0.015c-3.216-3.512-5.223-8.178-5.333-13.311l-0-0.022c0.111-5.155 2.117-9.822 5.347-13.349l-0.014 0.015z') 13 | symbol#icon-grid(viewbox='0 0 32 32') 14 | title grid 15 | path(stroke-linejoin='round', stroke-linecap='round', stroke-miterlimit='4', stroke-width='2.6667', d='M4 4h9.333v9.333h-9.333v-9.333z') 16 | path(stroke-linejoin='round', stroke-linecap='round', stroke-miterlimit='4', stroke-width='2.6667', d='M18.667 4h9.333v9.333h-9.333v-9.333z') 17 | path(stroke-linejoin='round', stroke-linecap='round', stroke-miterlimit='4', stroke-width='2.6667', d='M18.667 18.667h9.333v9.333h-9.333v-9.333z') 18 | path(stroke-linejoin='round', stroke-linecap='round', stroke-miterlimit='4', stroke-width='2.6667', d='M4 18.667h9.333v9.333h-9.333v-9.333z') 19 | symbol#icon-layout(viewbox='0 0 32 32') 20 | title layout 21 | path(stroke-linejoin='round', stroke-linecap='round', stroke-miterlimit='4', stroke-width='2.6667', d='M6.667 4h18.667c1.473 0 2.667 1.194 2.667 2.667v18.667c0 1.473-1.194 2.667-2.667 2.667h-18.667c-1.473 0-2.667-1.194-2.667-2.667v-18.667c0-1.473 1.194-2.667 2.667-2.667z') 22 | path(stroke-linejoin='round', stroke-linecap='round', stroke-miterlimit='4', stroke-width='2.6667', d='M4 12h24') 23 | path(stroke-linejoin='round', stroke-linecap='round', stroke-miterlimit='4', stroke-width='2.6667', d='M12 28v-16') 24 | symbol#icon-smartphone(viewbox='0 0 32 32') 25 | title smartphone 26 | path(stroke-linejoin='round', stroke-linecap='round', stroke-miterlimit='4', stroke-width='2.6667', d='M9.333 2.667h13.333c1.473 0 2.667 1.194 2.667 2.667v21.333c0 1.473-1.194 2.667-2.667 2.667h-13.333c-1.473 0-2.667-1.194-2.667-2.667v-21.333c0-1.473 1.194-2.667 2.667-2.667z') 27 | path(stroke-linejoin='round', stroke-linecap='round', stroke-miterlimit='4', stroke-width='2.6667', d='M16 24v0') 28 | symbol#icon-zap(viewbox='0 0 32 32') 29 | title zap 30 | path(stroke-linejoin='round', stroke-linecap='round', stroke-miterlimit='4', stroke-width='2.6667', d='M17.333 2.667l-13.333 16h12l-1.333 10.667 13.333-16h-12l1.333-10.667z') 31 | -------------------------------------------------------------------------------- /src/pug/includes/_sidebar.pug: -------------------------------------------------------------------------------- 1 | .app-sidebar__overlay(data-toggle="sidebar") 2 | aside.app-sidebar 3 | 4 | .app-sidebar__user 5 | img.app-sidebar__user-avatar(src='https://randomuser.me/api/portraits/men/1.jpg', alt='User Image') 6 | div 7 | p.app-sidebar__user-name John Doe 8 | p.app-sidebar__user-designation Frontend Developer 9 | 10 | ul.app-menu 11 | li 12 | a.app-menu__item(href='dashboard.html' class={'active': activePage == 'dashboard'}) 13 | i.app-menu__icon.bi.bi-speedometer 14 | span.app-menu__label Dashboard 15 | 16 | li.treeview(class={'is-expanded': activeGroup == 'ui-elements'}) 17 | a.app-menu__item(href='#', data-toggle='treeview') 18 | i.app-menu__icon.bi.bi-laptop 19 | span.app-menu__label UI Elements 20 | i.treeview-indicator.bi.bi-chevron-right 21 | ul.treeview-menu 22 | li 23 | a.treeview-item(href='bootstrap-components.html' class={'active': activePage == 'ui-bootstrap'}) 24 | i.icon.bi.bi-circle-fill 25 | | Bootstrap Elements 26 | li 27 | a.treeview-item(href='https://icons.getbootstrap.com/', target="_blank", rel="noopener") 28 | i.icon.bi.bi-circle-fill 29 | | Font Icons 30 | li 31 | a.treeview-item(href='ui-cards.html' class={'active': activePage == 'ui-cards'}) 32 | i.icon.bi.bi-circle-fill 33 | | Cards 34 | li 35 | a.treeview-item(href='widgets.html' class={'active': activePage == 'ui-widgets'}) 36 | i.icon.bi.bi-circle-fill 37 | | Widgets 38 | 39 | li.treeview(class={'is-expanded': activeGroup == 'forms'}) 40 | a.app-menu__item(href='#' data-toggle='treeview') 41 | i.app-menu__icon.bi.bi-ui-checks 42 | span.app-menu__label Forms 43 | i.treeview-indicator.bi.bi-chevron-right 44 | ul.treeview-menu 45 | li 46 | a.treeview-item(href='form-components.html' class={'active': activePage == 'form-components'}) 47 | i.icon.bi.bi-circle-fill 48 | | Form Components 49 | li 50 | a.treeview-item(href='form-samples.html' class={'active': activePage == 'form-samples'}) 51 | i.icon.bi.bi-circle-fill 52 | | Form Samples 53 | 54 | li.treeview(class={'is-expanded': activeGroup == 'tables'}) 55 | a.app-menu__item(href='#' data-toggle='treeview') 56 | i.app-menu__icon.bi.bi-table 57 | span.app-menu__label Tables 58 | i.treeview-indicator.bi.bi-chevron-right 59 | ul.treeview-menu 60 | li 61 | a.treeview-item(href='table-basic.html' class={'active': activePage == 'basic-table'}) 62 | i.icon.bi.bi-circle-fill 63 | | Basic Tables 64 | li 65 | a.treeview-item(href='table-data-table.html' class={'active': activePage == 'data-table'}) 66 | i.icon.bi.bi-circle-fill 67 | | Data Tables 68 | 69 | li.treeview(class={'is-expanded': activeGroup == 'pages'}) 70 | a.app-menu__item(href='#' data-toggle='treeview') 71 | i.app-menu__icon.bi.bi-file-earmark 72 | span.app-menu__label Pages 73 | i.treeview-indicator.bi.bi-chevron-right 74 | ul.treeview-menu 75 | li 76 | a.treeview-item(href='blank-page.html' class={'active': activePage == 'blank-page'}) 77 | i.icon.bi.bi-circle-fill 78 | | Blank Page 79 | li 80 | a.treeview-item(href='page-login.html') 81 | i.icon.bi.bi-circle-fill 82 | | Login Page 83 | li 84 | a.treeview-item(href='page-lockscreen.html') 85 | i.icon.bi.bi-circle-fill 86 | | Lockscreen Page 87 | li 88 | a.treeview-item(href='page-user.html' class={'active': activePage == 'user-page'}) 89 | i.icon.bi.bi-circle-fill 90 | | User Page 91 | li 92 | a.treeview-item(href='page-invoice.html' class={'active': activePage == 'invoice-page'}) 93 | i.icon.bi.bi-circle-fill 94 | | Invoice Page 95 | li 96 | a.treeview-item(href='page-mailbox.html' class={'active': activePage == 'mailbox-page'}) 97 | i.icon.bi.bi-circle-fill 98 | | Mailbox 99 | li 100 | a.treeview-item(href='page-error.html' class={'active': activePage == 'error-page'}) 101 | i.icon.bi.bi-circle-fill 102 | | Error Page 103 | 104 | li 105 | a.app-menu__item(href='docs.html' class={'active': activePage == 'docs'}) 106 | i.app-menu__icon.bi.bi-code-square 107 | span.app-menu__label Docs -------------------------------------------------------------------------------- /src/pug/index.pug: -------------------------------------------------------------------------------- 1 | doctype html 2 | html 3 | head 4 | meta(charset='utf-8') 5 | meta(http-equiv='X-UA-Compatible', content='IE=edge') 6 | meta(name='viewport', content='width=device-width, initial-scale=1') 7 | 8 | meta(name="description", content="Vali is a responsive and free dashboard theme/template built with Bootstrap 5, SASS and PUG.js.") 9 | 10 | // Twitter meta 11 | meta(property="twitter:card", content="summary_large_image") 12 | meta(property="twitter:site", content="@pratikborsadiya") 13 | meta(property="twitter:creator", content="@pratikborsadiya") 14 | 15 | // Open Graph Meta 16 | meta(property="og:type", content="website") 17 | meta(property="og:site_name", content="Vali Admin") 18 | meta(property="og:title", content="Vali Admin - Free Bootstrap 5 Dashboard Template") 19 | meta(property='og:url', content='http://pratikborsadiya.in/vali-admin') 20 | meta(property='og:image', content='http://pratikborsadiya.in/blog/vali-admin/hero-social.png') 21 | meta(property="og:description", content="Vali is a responsive and free dashboard theme/template built with Bootstrap 5, SASS and PUG.js.") 22 | 23 | title Vali Admin - Free Bootstrap 5 Dashboard Template 24 | 25 | link(rel='stylesheet', type='text/css', href='css/main.css') 26 | 27 | body.landing-page 28 | include includes/_landing-icons.pug 29 | section.landing-hero 30 | .landing-hero-overlay 31 | .landing-hero-content 32 | h1.landing-hero-title Vali Admin - A Free Bootstrap 5 Dashboard Template 33 | p.landing-hero-description Built with PugJS, SASS, and Bootstrap 5 34 | 35 | div 36 | a.btn.btn-primary.me-4(href="dashboard.html") Demo 37 | a.btn.btn-primary(href="https://github.com/pratikborsadiya/vali-admin" target="_blank" rel="noopener") GitHub 38 | 39 | img.landing-hero-banner(src="images/banner.jpg") 40 | 41 | section.features 42 | h1.features-title Features 43 | 44 | 45 | .features-cards 46 | .features-card 47 | .feature-icon-backdrop 48 | svg.feature-icon: use(xlink:href='#icon-globe') 49 | p.feature-description Free to use and open-source 50 | .features-card 51 | .feature-icon-backdrop 52 | svg.feature-icon: use(xlink:href='#icon-smartphone') 53 | p.feature-description Beautiful and mobile responsive 54 | .features-card 55 | .feature-icon-backdrop 56 | svg.feature-icon: use(xlink:href='#icon-zap') 57 | p.feature-description Built with Bootstrap 5, SASS and PUG.js 58 | .features-card 59 | .feature-icon-backdrop 60 | svg.feature-icon: use(xlink:href='#icon-chart') 61 | p.feature-description Chart.js integration to display responsive charts 62 | .features-card 63 | .feature-icon-backdrop 64 | svg.feature-icon: use(xlink:href='#icon-layout') 65 | p.feature-description Seven pre built pages including login, user profile and print friendly invoice page 66 | .features-card 67 | .feature-icon-backdrop 68 | svg.feature-icon: use(xlink:href='#icon-grid') 69 | p.feature-description Data tables with sort, search and paginate functions 70 | 71 | footer.landing-footer Created by #[b Pratik Borsadiya] & 72 | a(href="https://github.com/pratikborsadiya/vali-admin/graphs/contributors" target="_blank" rel="noopener") contributors -------------------------------------------------------------------------------- /src/pug/layouts/_layout.pug: -------------------------------------------------------------------------------- 1 | doctype html 2 | html(lang="en") 3 | 4 | //- Variables to set active page in sidebar 5 | block variables 6 | - var activePage = 'dashboard'; 7 | - var activeGroup = 'none'; 8 | 9 | head 10 | meta(name="description", content="Vali is a responsive and free admin theme built with Bootstrap 5, SASS and PUG.js. It's fully customizable and modular.") 11 | 12 | // Twitter meta 13 | meta(property="twitter:card", content="summary_large_image") 14 | meta(property="twitter:site", content="@pratikborsadiya") 15 | meta(property="twitter:creator", content="@pratikborsadiya") 16 | 17 | // Open Graph Meta 18 | meta(property="og:type", content="website") 19 | meta(property="og:site_name", content="Vali Admin") 20 | meta(property="og:title", content="Vali - Free Bootstrap 5 admin theme") 21 | meta(property='og:url', content='http://pratikborsadiya.in/blog/vali-admin') 22 | meta(property='og:image', content='http://pratikborsadiya.in/blog/vali-admin/hero-social.png') 23 | meta(property="og:description", content="Vali is a responsive and free admin theme built with Bootstrap 5, SASS and PUG.js. It's fully customizable and modular.") 24 | 25 | block title 26 | title Vali Admin - Free Bootstrap 5 Admin Template 27 | 28 | include ../includes/_head.pug 29 | 30 | body.app.sidebar-mini 31 | 32 | // Navbar 33 | include ../includes/_header.pug 34 | 35 | // Sidebar menu 36 | include ../includes/_sidebar.pug 37 | 38 | main.app-content 39 | block content 40 | 41 | //- Javascripts 42 | include ../includes/_javascript.pug 43 | 44 | // Page specific javascripts 45 | block specific-js 46 | 47 | // Google analytics script 48 | script(type="text/javascript"). 49 | if(document.location.hostname == 'pratikborsadiya.in') { 50 | (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ 51 | (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 52 | m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 53 | })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); 54 | ga('create', 'UA-72504830-1', 'auto'); 55 | ga('send', 'pageview'); 56 | } 57 | -------------------------------------------------------------------------------- /src/pug/page-error.pug: -------------------------------------------------------------------------------- 1 | extends layouts/_layout.pug 2 | 3 | block variables 4 | - var activePage = 'error-page'; 5 | - var activeGroup = 'pages'; 6 | 7 | block title 8 | title Error Page - Vali Admin 9 | 10 | block content 11 | .page-error.tile 12 | h1.text-danger 13 | i.bi.bi-exclamation-circle 14 | | Error 404: Page not found 15 | p The page you have requested is not found. 16 | p: a.btn.btn-primary(href="javascript:window.history.back();") Go Back 17 | -------------------------------------------------------------------------------- /src/pug/page-invoice.pug: -------------------------------------------------------------------------------- 1 | extends layouts/_layout.pug 2 | 3 | block variables 4 | - var activePage = 'invoice-page'; 5 | - var activeGroup = 'pages'; 6 | 7 | block title 8 | title Invoice - Vali Admin 9 | 10 | block content 11 | .app-title 12 | div 13 | h1 14 | i.bi.bi-receipt 15 | | Invoice 16 | p A Printable Invoice Format 17 | 18 | ul.app-breadcrumb.breadcrumb 19 | li.breadcrumb-item 20 | i.bi.bi-house-door.fs-6 21 | li.breadcrumb-item 22 | a(href='#') Invoice 23 | 24 | .row 25 | .col-md-12 26 | .tile 27 | section.invoice 28 | 29 | .row.mb-4 30 | .col-6 31 | h2.page-header 32 | i.bi.bi-globe 33 | | Vali Inc 34 | .col-6 35 | h5.text-end Date: 01/01/2016 36 | 37 | .row.invoice-info 38 | .col-4 39 | | From 40 | address 41 | strong Vali Inc. 42 | br 43 | | 518 Akshar Avenue 44 | br 45 | | Gandhi Marg 46 | br 47 | | New Delhi 48 | br 49 | | Email: hello@vali.com 50 | 51 | .col-4 52 | | To 53 | address 54 | strong John Doe 55 | br 56 | | 795 Folsom Ave, Suite 600 57 | br 58 | | San Francisco, CA 94107 59 | br 60 | | Phone: (555) 539-1037 61 | br 62 | | Email: john.doe@example.com 63 | 64 | .col-4 65 | b Invoice #007612 66 | br 67 | br 68 | b Order ID: 69 | | 4F3S8J 70 | br 71 | b Payment Due: 72 | | 2/22/2014 73 | br 74 | b Account: 75 | | 968-34567 76 | 77 | .row 78 | .col-12.table-responsive 79 | table.table.table-striped 80 | thead 81 | tr 82 | th Qty 83 | th Product 84 | th Serial # 85 | th Description 86 | th Subtotal 87 | tbody 88 | tr 89 | td 1 90 | td The Hunger Games 91 | td 455-981-221 92 | td El snort testosterone trophy driving gloves handsome 93 | td $41.32 94 | tr 95 | td 1 96 | td City of Bones 97 | td 247-925-726 98 | td Wes Anderson umami biodiesel 99 | td $75.52 100 | tr 101 | td 1 102 | td The Maze Runner 103 | td 545-457-47 104 | td Terry Richardson helvetica tousled street art master 105 | td $15.25 106 | tr 107 | td 1 108 | td The Fault in Our Stars 109 | td 757-855-857 110 | td Tousled lomo letterpress 111 | td $03.44 112 | 113 | .row.d-print-none.mt-2 114 | .col-12.text-end 115 | a.btn.btn-primary(href='javascript:window.print();') 116 | i.bi.bi-printer.me-2 117 | | Print 118 | -------------------------------------------------------------------------------- /src/pug/page-lockscreen.pug: -------------------------------------------------------------------------------- 1 | doctype html 2 | html 3 | head 4 | include includes/_head.pug 5 | title Lockscreen - Vali Admin 6 | 7 | body 8 | section.material-half-bg 9 | .cover 10 | 11 | section.lockscreen-content 12 | .logo 13 | h1 Vali 14 | 15 | .lock-box 16 | img.rounded-circle.user-image(src="https://randomuser.me/api/portraits/men/1.jpg") 17 | 18 | h4.text-center.user-name John Doe 19 | 20 | p.text-center.text-muted Account Locked 21 | 22 | form.unlock-form(action="index.html") 23 | .mb-3 24 | label.control-label PASSWORD 25 | input.form-control(type="password", placeholder="Password", autofocus) 26 | 27 | .mb-3.btn-container.d-grid 28 | button.btn.btn-primary.btn-block(type="submit") 29 | i.bi.bi-unlock.me-2.fs-5 30 | | UNLOCK 31 | 32 | p 33 | a(href="page-login.html") Not John ? Login Here. 34 | 35 | include includes/_javascript.pug 36 | -------------------------------------------------------------------------------- /src/pug/page-login.pug: -------------------------------------------------------------------------------- 1 | doctype html 2 | html 3 | head 4 | include includes/_head.pug 5 | title Login - Vali Admin 6 | 7 | body 8 | section.material-half-bg 9 | .cover 10 | 11 | section.login-content 12 | .logo: h1 Vali 13 | 14 | .login-box 15 | form.login-form(action="index.html") 16 | h3.login-head 17 | i.bi.bi-person.me-2 18 | | SIGN IN 19 | .mb-3 20 | label.form-label USERNAME 21 | input.form-control(type="text", placeholder="Email", autofocus) 22 | 23 | .mb-3 24 | label.form-label PASSWORD 25 | input.form-control(type="password", placeholder="Password") 26 | 27 | .mb-3 28 | .utility 29 | .form-check 30 | label.form-check-label 31 | input.form-check-input(type="checkbox") 32 | span.label-text Stay Signed in 33 | p.semibold-text.mb-2 34 | a(href="#" data-toggle="flip") Forgot Password ? 35 | 36 | .mb-3.btn-container.d-grid 37 | button.btn.btn-primary.btn-block 38 | i.bi.bi-box-arrow-in-right.me-2.fs-5 39 | | SIGN IN 40 | 41 | form.forget-form(action="index.html") 42 | h3.login-head 43 | i.bi.bi-person-lock.me-2 44 | | Forgot Password ? 45 | .mb-3 46 | label.form-label EMAIL 47 | input.form-control(type="text", placeholder="Email") 48 | 49 | .mb-3.btn-container.d-grid 50 | button.btn.btn-primary.btn-block 51 | i.bi.bi-unlock.me-2.fs-5 52 | | RESET 53 | 54 | .mb-3.mt-3 55 | p.semibold-text.mb-0 56 | a(href="#" data-toggle="flip") Back to Login 57 | 58 | include includes/_javascript.pug 59 | 60 | script(type="text/javascript"). 61 | // Login Page Flipbox control 62 | $('.login-content [data-toggle="flip"]').click(function() { 63 | $('.login-box').toggleClass('flipped'); 64 | return false; 65 | }); -------------------------------------------------------------------------------- /src/pug/page-mailbox.pug: -------------------------------------------------------------------------------- 1 | extends layouts/_layout.pug 2 | 3 | block variables 4 | - var activePage = 'mailbox-page'; 5 | - var activeGroup = 'pages'; 6 | 7 | block title 8 | title Mailbox - Vali Admin 9 | 10 | block content 11 | .app-title 12 | div 13 | h1 14 | i.bi.bi-envelope-at 15 | | Mailbox 16 | p A Mailbox page sample 17 | 18 | ul.app-breadcrumb.breadcrumb 19 | li.breadcrumb-item 20 | i.bi.bi-house-door.fs-6 21 | li.breadcrumb-item 22 | a(href='#') Mailbox 23 | 24 | .row 25 | .col-md-3 26 | 27 | .d-grid 28 | a.mb-2.btn.btn-primary.btn-block(href="") Compose Mail 29 | 30 | .tile.p-0 31 | h4.tile-title.folder-head Folders 32 | .tile-body 33 | ul.nav.nav-pills.flex-column.mail-nav 34 | li.nav-item 35 | a.nav-link(href='#').d-flex.justify-content-between.align-items-start 36 | span 37 | i.bi.bi-inbox.me-1.fs-5 38 | | Inbox 39 | span.badge.bg-primary.rounded-pill 12 40 | li.nav-item 41 | a.nav-link(href='#') 42 | i.bi.bi-envelope.me-1.fs-5 43 | | Sent 44 | li.nav-item 45 | a.nav-link(href='#') 46 | i.bi.bi-journal-text.me-1.fs-5 47 | | Drafts 48 | li.nav-item 49 | a.nav-link(href='#').d-flex.justify-content-between.align-items-start 50 | span 51 | i.bi.bi-funnel.me-1.fs-5 52 | | Junk 53 | span.badge.bg-primary.rounded-pill 8 54 | li.nav-item 55 | a.nav-link(href='#') 56 | i.bi.bi-trash.me-1.fs-5 57 | | Trash 58 | 59 | .col-md-9 60 | .tile 61 | .mailbox-controls 62 | 63 | .form-check 64 | label 65 | input.form-check-input(type="checkbox") 66 | span.label-text 67 | .btn-group 68 | button.btn.btn-primary.btn-sm(type='button') 69 | i.bi.bi-trash.fs-5 70 | button.btn.btn-primary.btn-sm(type='button') 71 | i.bi.bi-reply.fs-5 72 | button.btn.btn-primary.btn-sm(type='button') 73 | i.bi.bi-share.fs-5 74 | button.btn.btn-primary.btn-sm(type='button') 75 | i.bi.bi-arrow-clockwise.fs-5 76 | 77 | 78 | .table-responsive.mailbox-messages 79 | table.table.table-hover 80 | tbody 81 | tr 82 | td 83 | .form-check 84 | label 85 | input.form-check-input(type="checkbox") 86 | span.label-text 87 | td 88 | a(href='#') 89 | i.bi.bi-star 90 | td 91 | a(href='read-mail.html') John Doe 92 | td.mail-subject 93 | b A report on project almanac 94 | | - Lorem ipsum dolor sit amet adipisicing elit... 95 | td 96 | i.bi.bi-paperclip 97 | td 8 mins ago 98 | tr 99 | td 100 | .form-check 101 | label 102 | input.form-check-input(type="checkbox") 103 | span.label-text 104 | td 105 | a(href='#') 106 | i.bi.bi-star-fill 107 | td 108 | a(href='read-mail.html') John Doe 109 | td 110 | b A report on some good project 111 | | - Lorem ipsum dolor sit amet adipisicing elit... 112 | td 113 | 114 | td 15 mins ago 115 | tr 116 | td 117 | .form-check 118 | label 119 | input.form-check-input(type="checkbox") 120 | span.label-text 121 | td 122 | a(href='#') 123 | i.bi.bi-star 124 | td 125 | a(href='read-mail.html') John Doe 126 | td.mail-subject 127 | b A report on project almanac 128 | | - Lorem ipsum dolor sit amet adipisicing elit... 129 | td 130 | i.bi.bi-paperclip 131 | td 30 mins ago 132 | tr 133 | td 134 | .form-check 135 | label 136 | input.form-check-input(type="checkbox") 137 | span.label-text 138 | td 139 | a(href='#') 140 | i.bi.bi-star-fill 141 | td 142 | a(href='read-mail.html') John Doe 143 | td.mail-subject 144 | b A report on project almanac 145 | | - Lorem ipsum dolor sit amet adipisicing elit... 146 | td 147 | td 25 December 148 | tr 149 | td 150 | .form-check 151 | label 152 | input.form-check-input(type="checkbox") 153 | span.label-text 154 | td 155 | a(href='#') 156 | i.bi.bi-star 157 | td 158 | a(href='read-mail.html') John Doe 159 | td.mail-subject 160 | b A report on project almanac 161 | | - Lorem ipsum dolor sit amet adipisicing elit... 162 | td 163 | i.bi.bi-paperclip 164 | td 20 December 165 | tr 166 | td 167 | .form-check 168 | label 169 | input.form-check-input(type="checkbox") 170 | span.label-text 171 | td 172 | a(href='#') 173 | i.bi.bi-star-fill 174 | td 175 | a(href='read-mail.html') John Doe 176 | td.mail-subject 177 | b A report on project almanac 178 | | - Lorem ipsum dolor sit amet adipisicing elit... 179 | td 180 | td 20 December 181 | tr 182 | td 183 | .form-check 184 | label 185 | input.form-check-input(type="checkbox") 186 | span.label-text 187 | td 188 | a(href='#') 189 | i.bi.bi-star-fill 190 | td 191 | a(href='read-mail.html') John Doe 192 | td.mail-subject 193 | b A report on project almanac 194 | | - Lorem ipsum dolor sit amet adipisicing elit... 195 | td 196 | i.bi.bi-paperclip 197 | td 20 December 198 | tr 199 | td 200 | .form-check 201 | label 202 | input.form-check-input(type="checkbox") 203 | span.label-text 204 | td 205 | a(href='#') 206 | i.bi.bi-star 207 | td 208 | a(href='read-mail.html') John Doe 209 | td.mail-subject 210 | b A report on project almanac 211 | | - Lorem ipsum dolor sit amet adipisicing elit... 212 | td 213 | td 20 December 214 | 215 | 216 | .text-end 217 | span.text-muted.mr-2 Showing 1-15 out of 60 218 | .btn-group.ms-3 219 | button.btn.btn-primary.btn-sm(type='button') 220 | i.bi.bi-chevron-left 221 | button.btn.btn-primary.btn-sm(type='button') 222 | i.bi.bi-chevron-right 223 | -------------------------------------------------------------------------------- /src/pug/page-user.pug: -------------------------------------------------------------------------------- 1 | extends layouts/_layout.pug 2 | 3 | block variables 4 | - var activePage = 'user-page'; 5 | - var activeGroup = 'pages'; 6 | 7 | block title 8 | title User Profile - Vali Admin 9 | 10 | block content 11 | 12 | .row.user 13 | .col-md-12 14 | .profile 15 | .info 16 | img.user-img(src="https://randomuser.me/api/portraits/men/1.jpg") 17 | h4 John Doe 18 | p FrontEnd Developer 19 | .cover-image 20 | 21 | .col-md-3 22 | .tile.p-0 23 | ul.nav.flex-column.nav-tabs.user-tabs 24 | li.nav-item 25 | a.nav-link.active(href='#user-timeline' data-bs-toggle='tab') Timeline 26 | li.nav-item 27 | a.nav-link(href='#user-settings' data-bs-toggle='tab') Settings 28 | 29 | .col-md-9 30 | .tab-content 31 | #user-timeline.tab-pane.active 32 | .timeline-post 33 | .post-media 34 | a(href="#") 35 | img(src="https://randomuser.me/api/portraits/men/1.jpg") 36 | .content 37 | h5: a(href="#") John Doe 38 | p.text-muted 39 | small 2 January at 9:30 40 | .post-content 41 | p Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis tion ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 42 | 43 | ul.post-utility 44 | li.likes 45 | a(href="#") 46 | i.bi.bi-heart.me-1 47 | | Like 48 | 49 | li.shares 50 | a(href="#") 51 | i.bi.bi-share.me-1 52 | | Share 53 | 54 | li.comments 55 | i.bi.bi-chat-square-text.me-1 56 | | 5 Comments 57 | 58 | .timeline-post 59 | .post-media 60 | a(href="#") 61 | img(src="https://randomuser.me/api/portraits/men/1.jpg") 62 | .content 63 | h5: a(href="#") John Doe 64 | p.text-muted 65 | small 2 January at 9:30 66 | .post-content 67 | p Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis tion ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 68 | 69 | ul.post-utility 70 | li.likes 71 | a(href="#") 72 | i.bi.bi-heart.me-1 73 | | Like 74 | 75 | li.shares 76 | a(href="#") 77 | i.bi.bi-share.me-1 78 | | Share 79 | 80 | li.comments 81 | i.bi.bi-chat-square-text.me-1 82 | | 5 Comments 83 | 84 | #user-settings.tab-pane.fade 85 | .tile.user-settings 86 | h4.line-head Settings 87 | 88 | form 89 | .row.mb-4 90 | .col-md-4 91 | label First Name 92 | input.form-control(type="text") 93 | 94 | .col-md-4 95 | label Last Name 96 | input.form-control(type="text") 97 | 98 | .row 99 | .col-md-8.mb-4 100 | label Email 101 | input.form-control(type="text") 102 | 103 | .clearfix 104 | 105 | .col-md-8.mb-4 106 | label Mobile No 107 | input.form-control(type="text") 108 | 109 | .clearfix 110 | 111 | .col-md-8.mb-4 112 | label Office Phone 113 | input.form-control(type="text") 114 | 115 | .clearfix 116 | 117 | .col-md-8.mb-4 118 | label Home Phone 119 | input.form-control(type="text") 120 | 121 | .row.mb-10 122 | .col-md-12 123 | button.btn.btn-primary(type="button") 124 | i.bi.bi-check-circle-fill.me-2 125 | | Save 126 | 127 | 128 | -------------------------------------------------------------------------------- /src/pug/table-basic.pug: -------------------------------------------------------------------------------- 1 | extends layouts/_layout.pug 2 | 3 | block variables 4 | - var activePage = 'basic-table'; 5 | - var activeGroup = 'tables'; 6 | 7 | block title 8 | title Basic Tables - Vali Admin 9 | 10 | block content 11 | .app-title 12 | div 13 | h1 14 | i.bi.bi-table 15 | | Basic Tables 16 | p Basic bootstrap tables 17 | 18 | ul.app-breadcrumb.breadcrumb 19 | li.breadcrumb-item 20 | i.bi.bi-house-door.fs-6 21 | li.breadcrumb-item 22 | | Tables 23 | li.breadcrumb-item.active 24 | a(href="#") Simple Tables 25 | 26 | .row 27 | .col-md-6 28 | .tile 29 | h3.tile-title Simple Table 30 | table.table 31 | thead 32 | tr 33 | th # 34 | th First Name 35 | th Last Name 36 | th Username 37 | tbody 38 | tr 39 | td 1 40 | td Mark 41 | td Otto 42 | td @mdo 43 | tr 44 | td 2 45 | td Jacob 46 | td Thornton 47 | td @fat 48 | tr 49 | td 3 50 | td Larry 51 | td the Bird 52 | td @twitter 53 | 54 | .col-md-6 55 | .tile 56 | h3.tile-title Striped Table 57 | table.table.table-striped 58 | thead 59 | tr 60 | th # 61 | th First Name 62 | th Last Name 63 | th Username 64 | tbody 65 | tr 66 | td 1 67 | td Mark 68 | td Otto 69 | td @mdo 70 | tr 71 | td 2 72 | td Jacob 73 | td Thornton 74 | td @fat 75 | tr 76 | td 3 77 | td Larry 78 | td the Bird 79 | td @twitter 80 | .clearfix 81 | 82 | .col-md-6 83 | .tile 84 | h3.tile-title Bordered Table 85 | table.table.table-bordered 86 | thead 87 | tr 88 | th # 89 | th First Name 90 | th Last Name 91 | th Username 92 | tbody 93 | tr 94 | td 1 95 | td Mark 96 | td Otto 97 | td @mdo 98 | tr 99 | td 2 100 | td Jacob 101 | td Thornton 102 | td @fat 103 | tr 104 | td 3 105 | td Larry 106 | td the Bird 107 | td @twitter 108 | 109 | .col-md-6 110 | .tile 111 | h3.tile-title Table Hover 112 | table.table.table-hover 113 | thead 114 | tr 115 | th # 116 | th First Name 117 | th Last Name 118 | th Username 119 | tbody 120 | tr 121 | td 1 122 | td Mark 123 | td Otto 124 | td @mdo 125 | tr 126 | td 2 127 | td Jacob 128 | td Thornton 129 | td @fat 130 | tr 131 | td 3 132 | td Larry 133 | td the Bird 134 | td @twitter 135 | .clearfix 136 | 137 | .col-md-6 138 | .tile 139 | h3.tile-title Condensed Table 140 | table.table.table-sm 141 | thead 142 | tr 143 | th # 144 | th First Name 145 | th Last Name 146 | th Username 147 | tbody 148 | tr 149 | td 1 150 | td Mark 151 | td Otto 152 | td @mdo 153 | tr 154 | td 2 155 | td Jacob 156 | td Thornton 157 | td @fat 158 | tr 159 | td 3 160 | td Larry 161 | td the Bird 162 | td @twitter 163 | tr 164 | td 4 165 | td Jacob 166 | td Thornton 167 | td @fat 168 | tr 169 | td 5 170 | td Mark 171 | td Otto 172 | td @mdo 173 | 174 | .col-md-6 175 | .tile 176 | h3.tile-title Contextual Classes 177 | table.table 178 | thead 179 | tr 180 | th # 181 | th First Name 182 | th Last Name 183 | th Username 184 | tbody 185 | tr.table-info 186 | td 1 187 | td Mark 188 | td Otto 189 | td @mdo 190 | tr.table-success 191 | td 2 192 | td Jacob 193 | td Thornton 194 | td @fat 195 | tr.table-danger 196 | td 3 197 | td Larry 198 | td the Bird 199 | td @twitter 200 | tr.table-warning 201 | td 4 202 | td Jacob 203 | td Thornton 204 | td @fat 205 | 206 | .clearfix 207 | 208 | .col-md-12 209 | .tile 210 | h3.tile-title Responsive Table 211 | .table-responsive 212 | table.table 213 | thead 214 | tr 215 | th # 216 | th First Name 217 | th Last Name 218 | th Username 219 | tbody 220 | tr 221 | td 1 222 | td Mark 223 | td Otto 224 | td @mdo 225 | tr 226 | td 2 227 | td Jacob 228 | td Thornton 229 | td @fat 230 | tr 231 | td 3 232 | td Larry 233 | td the Bird 234 | td @twitter 235 | tr 236 | td 4 237 | td Jacob 238 | td Thornton 239 | td @fat 240 | 241 | -------------------------------------------------------------------------------- /src/pug/table-data-table.pug: -------------------------------------------------------------------------------- 1 | extends layouts/_layout.pug 2 | 3 | block variables 4 | - var activePage = 'data-table'; 5 | - var activeGroup = 'tables'; 6 | 7 | block title 8 | title Data Table - Vali Admin 9 | 10 | block content 11 | .app-title 12 | div 13 | h1 14 | i.bi.bi-table 15 | | Data Table 16 | p Table to display analytical data effectively 17 | 18 | ul.app-breadcrumb.breadcrumb.side 19 | li.breadcrumb-item 20 | i.bi.bi-house-door.fs-6 21 | li.breadcrumb-item 22 | | Tables 23 | li.breadcrumb-item.active 24 | a(href="#") Data Table 25 | 26 | .row 27 | .col-md-12 28 | .tile 29 | .tile-body 30 | .table-responsive 31 | table.table.table-hover.table-bordered#sampleTable 32 | thead 33 | tr 34 | th Name 35 | th Position 36 | th Office 37 | th Age 38 | th Start date 39 | th Salary 40 | tbody 41 | tr 42 | td Tiger Nixon 43 | td System Architect 44 | td Edinburgh 45 | td 61 46 | td 2011/04/25 47 | td $320,800 48 | tr 49 | td Garrett Winters 50 | td Accountant 51 | td Tokyo 52 | td 63 53 | td 2011/07/25 54 | td $170,750 55 | tr 56 | td Ashton Cox 57 | td Junior Technical Author 58 | td San Francisco 59 | td 66 60 | td 2009/01/12 61 | td $86,000 62 | tr 63 | td Cedric Kelly 64 | td Senior Javascript Developer 65 | td Edinburgh 66 | td 22 67 | td 2012/03/29 68 | td $433,060 69 | tr 70 | td Airi Satou 71 | td Accountant 72 | td Tokyo 73 | td 33 74 | td 2008/11/28 75 | td $162,700 76 | tr 77 | td Brielle Williamson 78 | td Integration Specialist 79 | td New York 80 | td 61 81 | td 2012/12/02 82 | td $372,000 83 | tr 84 | td Herrod Chandler 85 | td Sales Assistant 86 | td San Francisco 87 | td 59 88 | td 2012/08/06 89 | td $137,500 90 | tr 91 | td Rhona Davidson 92 | td Integration Specialist 93 | td Tokyo 94 | td 55 95 | td 2010/10/14 96 | td $327,900 97 | tr 98 | td Colleen Hurst 99 | td Javascript Developer 100 | td San Francisco 101 | td 39 102 | td 2009/09/15 103 | td $205,500 104 | tr 105 | td Sonya Frost 106 | td Software Engineer 107 | td Edinburgh 108 | td 23 109 | td 2008/12/13 110 | td $103,600 111 | tr 112 | td Jena Gaines 113 | td Office Manager 114 | td London 115 | td 30 116 | td 2008/12/19 117 | td $90,560 118 | tr 119 | td Quinn Flynn 120 | td Support Lead 121 | td Edinburgh 122 | td 22 123 | td 2013/03/03 124 | td $342,000 125 | tr 126 | td Charde Marshall 127 | td Regional Director 128 | td San Francisco 129 | td 36 130 | td 2008/10/16 131 | td $470,600 132 | tr 133 | td Haley Kennedy 134 | td Senior Marketing Designer 135 | td London 136 | td 43 137 | td 2012/12/18 138 | td $313,500 139 | tr 140 | td Tatyana Fitzpatrick 141 | td Regional Director 142 | td London 143 | td 19 144 | td 2010/03/17 145 | td $385,750 146 | tr 147 | td Michael Silva 148 | td Marketing Designer 149 | td London 150 | td 66 151 | td 2012/11/27 152 | td $198,500 153 | tr 154 | td Paul Byrd 155 | td Chief Financial Officer (CFO) 156 | td New York 157 | td 64 158 | td 2010/06/09 159 | td $725,000 160 | tr 161 | td Gloria Little 162 | td Systems Administrator 163 | td New York 164 | td 59 165 | td 2009/04/10 166 | td $237,500 167 | tr 168 | td Bradley Greer 169 | td Software Engineer 170 | td London 171 | td 41 172 | td 2012/10/13 173 | td $132,000 174 | tr 175 | td Dai Rios 176 | td Personnel Lead 177 | td Edinburgh 178 | td 35 179 | td 2012/09/26 180 | td $217,500 181 | tr 182 | td Jenette Caldwell 183 | td Development Lead 184 | td New York 185 | td 30 186 | td 2011/09/03 187 | td $345,000 188 | tr 189 | td Yuri Berry 190 | td Chief Marketing Officer (CMO) 191 | td New York 192 | td 40 193 | td 2009/06/25 194 | td $675,000 195 | tr 196 | td Caesar Vance 197 | td Pre-Sales Support 198 | td New York 199 | td 21 200 | td 2011/12/12 201 | td $106,450 202 | tr 203 | td Doris Wilder 204 | td Sales Assistant 205 | td Sidney 206 | td 23 207 | td 2010/09/20 208 | td $85,600 209 | tr 210 | td Angelica Ramos 211 | td Chief Executive Officer (CEO) 212 | td London 213 | td 47 214 | td 2009/10/09 215 | td $1,200,000 216 | tr 217 | td Gavin Joyce 218 | td Developer 219 | td Edinburgh 220 | td 42 221 | td 2010/12/22 222 | td $92,575 223 | tr 224 | td Jennifer Chang 225 | td Regional Director 226 | td Singapore 227 | td 28 228 | td 2010/11/14 229 | td $357,650 230 | tr 231 | td Brenden Wagner 232 | td Software Engineer 233 | td San Francisco 234 | td 28 235 | td 2011/06/07 236 | td $206,850 237 | tr 238 | td Fiona Green 239 | td Chief Operating Officer (COO) 240 | td San Francisco 241 | td 48 242 | td 2010/03/11 243 | td $850,000 244 | tr 245 | td Shou Itou 246 | td Regional Marketing 247 | td Tokyo 248 | td 20 249 | td 2011/08/14 250 | td $163,000 251 | tr 252 | td Michelle House 253 | td Integration Specialist 254 | td Sidney 255 | td 37 256 | td 2011/06/02 257 | td $95,400 258 | tr 259 | td Suki Burks 260 | td Developer 261 | td London 262 | td 53 263 | td 2009/10/22 264 | td $114,500 265 | tr 266 | td Prescott Bartlett 267 | td Technical Author 268 | td London 269 | td 27 270 | td 2011/05/07 271 | td $145,000 272 | tr 273 | td Gavin Cortez 274 | td Team Leader 275 | td San Francisco 276 | td 22 277 | td 2008/10/26 278 | td $235,500 279 | tr 280 | td Martena Mccray 281 | td Post-Sales support 282 | td Edinburgh 283 | td 46 284 | td 2011/03/09 285 | td $324,050 286 | tr 287 | td Unity Butler 288 | td Marketing Designer 289 | td San Francisco 290 | td 47 291 | td 2009/12/09 292 | td $85,675 293 | tr 294 | td Howard Hatfield 295 | td Office Manager 296 | td San Francisco 297 | td 51 298 | td 2008/12/16 299 | td $164,500 300 | tr 301 | td Hope Fuentes 302 | td Secretary 303 | td San Francisco 304 | td 41 305 | td 2010/02/12 306 | td $109,850 307 | tr 308 | td Vivian Harrell 309 | td Financial Controller 310 | td San Francisco 311 | td 62 312 | td 2009/02/14 313 | td $452,500 314 | tr 315 | td Timothy Mooney 316 | td Office Manager 317 | td London 318 | td 37 319 | td 2008/12/11 320 | td $136,200 321 | tr 322 | td Jackson Bradshaw 323 | td Director 324 | td New York 325 | td 65 326 | td 2008/09/26 327 | td $645,750 328 | tr 329 | td Olivia Liang 330 | td Support Engineer 331 | td Singapore 332 | td 64 333 | td 2011/02/03 334 | td $234,500 335 | tr 336 | td Bruno Nash 337 | td Software Engineer 338 | td London 339 | td 38 340 | td 2011/05/03 341 | td $163,500 342 | tr 343 | td Sakura Yamamoto 344 | td Support Engineer 345 | td Tokyo 346 | td 37 347 | td 2009/08/19 348 | td $139,575 349 | tr 350 | td Thor Walton 351 | td Developer 352 | td New York 353 | td 61 354 | td 2013/08/11 355 | td $98,540 356 | tr 357 | td Finn Camacho 358 | td Support Engineer 359 | td San Francisco 360 | td 47 361 | td 2009/07/07 362 | td $87,500 363 | tr 364 | td Serge Baldwin 365 | td Data Coordinator 366 | td Singapore 367 | td 64 368 | td 2012/04/09 369 | td $138,575 370 | tr 371 | td Zenaida Frank 372 | td Software Engineer 373 | td New York 374 | td 63 375 | td 2010/01/04 376 | td $125,250 377 | tr 378 | td Zorita Serrano 379 | td Software Engineer 380 | td San Francisco 381 | td 56 382 | td 2012/06/01 383 | td $115,000 384 | tr 385 | td Jennifer Acosta 386 | td Junior Javascript Developer 387 | td Edinburgh 388 | td 43 389 | td 2013/02/01 390 | td $75,650 391 | tr 392 | td Cara Stevens 393 | td Sales Assistant 394 | td New York 395 | td 46 396 | td 2011/12/06 397 | td $145,600 398 | tr 399 | td Hermione Butler 400 | td Regional Director 401 | td London 402 | td 47 403 | td 2011/03/21 404 | td $356,250 405 | tr 406 | td Lael Greer 407 | td Systems Administrator 408 | td London 409 | td 21 410 | td 2009/02/27 411 | td $103,500 412 | tr 413 | td Jonas Alexander 414 | td Developer 415 | td San Francisco 416 | td 30 417 | td 2010/07/14 418 | td $86,500 419 | tr 420 | td Shad Decker 421 | td Regional Director 422 | td Edinburgh 423 | td 51 424 | td 2008/11/13 425 | td $183,000 426 | tr 427 | td Michael Bruce 428 | td Javascript Developer 429 | td Singapore 430 | td 29 431 | td 2011/06/27 432 | td $183,000 433 | tr 434 | td Donna Snider 435 | td Customer Support 436 | td New York 437 | td 27 438 | td 2011/01/25 439 | td $112,000 440 | 441 | block specific-js 442 | link(rel="stylesheet" href="https://cdn.datatables.net/v/bs5/dt-1.13.4/datatables.min.css") 443 | 444 | // Data table plugin 445 | script(type='text/javascript', src="js/plugins/jquery.dataTables.min.js") 446 | script(type='text/javascript', src="js/plugins/dataTables.bootstrap.min.js") 447 | script(type='text/javascript'). 448 | $('#sampleTable').DataTable(); 449 | -------------------------------------------------------------------------------- /src/pug/ui-cards.pug: -------------------------------------------------------------------------------- 1 | extends layouts/_layout.pug 2 | 3 | block variables 4 | - var activePage = 'ui-cards'; 5 | - var activeGroup = 'ui-elements'; 6 | 7 | block title 8 | title Cards - Vali Admin 9 | 10 | block content 11 | .app-title 12 | div 13 | h1 14 | i.bi.bi-laptop 15 | | Cards 16 | p Material design inspired cards 17 | 18 | ul.app-breadcrumb.breadcrumb 19 | li.breadcrumb-item 20 | i.bi.bi-house-door.fs-6 21 | li.breadcrumb-item UI 22 | li.breadcrumb-item 23 | a(href="#") Cards 24 | 25 | .row 26 | .col-md-6 27 | .tile 28 | h3.tile-title Card Title 29 | .tile-body. 30 | Hey there, I am a very simple card. I am good at containing small bits of information. I am quite convenient because I require little markup to use effectively. 31 | .tile-footer 32 | a.btn.btn-primary(href="#") Link 33 | 34 | .col-md-6 35 | .tile 36 | .tile-title-w-btn 37 | h3.title All Items 38 | p 39 | a.btn.btn-primary.icon-btn(href="") 40 | i.bi.bi-plus-square.me-2 41 | | Add Item 42 | .tile-body. 43 | Card with action button
44 | Hey there, I am a very simple card. I am good at containing small bits of information. I am quite convenient because I require little markup to use effectively. 45 | 46 | 47 | .clearfix 48 | 49 | .col-md-6 50 | .tile 51 | .tile-title-w-btn 52 | h3.title All Items 53 | .btn-group 54 | a.btn.btn-primary(href='#'): i.bi.bi-plus-square.fs-5 55 | a.btn.btn-primary(href='#'): i.bi.bi-pencil-square.fs-5 56 | a.btn.btn-primary(href='#'): i.bi.bi-trash.fs-5 57 | .tile-body. 58 | Card with button group
59 | Hey there, I am a very simple card. I am good at containing small bits of information. I am quite convenient because I require little markup to use effectively. 60 | 61 | .col-md-6 62 | .tile 63 | .overlay 64 | .m-loader.mr-4. 65 | 66 | 67 | 68 | h3.l-text Loading 69 | .tile-title-w-btn 70 | h3.title All Items 71 | p 72 | a.btn.btn-primary.icon-btn(href="") 73 | i.bi.bi-plus-square 74 | | Add Item 75 | .tile-body. 76 | Card with action button
77 | Hey there, I am a very simple card. I am good at containing small bits of information. I am quite convenient because I require little markup to use effectively. 78 | -------------------------------------------------------------------------------- /src/pug/widgets.pug: -------------------------------------------------------------------------------- 1 | extends layouts/_layout.pug 2 | 3 | block variables 4 | - var activePage = 'ui-widgets'; 5 | - var activeGroup = 'ui-elements'; 6 | 7 | block title 8 | title Widgets - Vali Admin 9 | 10 | block content 11 | .app-title 12 | div 13 | h1 14 | i.bi.bi-archive 15 | | Widgets 16 | p Widgets to interactively display data 17 | 18 | ul.app-breadcrumb.breadcrumb 19 | li.breadcrumb-item 20 | i.bi.bi-house-door.fs-6 21 | li.breadcrumb-item 22 | | UI 23 | li.breadcrumb-item 24 | a(href='#') Widgets 25 | 26 | .row 27 | .col-md-3 28 | .widget-small.primary 29 | i.icon.bi.bi-people.fs-1 30 | div.info 31 | h4 Users 32 | p 33 | b 5 34 | 35 | .col-md-3 36 | .widget-small.info 37 | i.icon.bi.bi-heart.fs-1 38 | div.info 39 | h4 Likes 40 | p 41 | b 25 42 | 43 | .col-md-3 44 | .widget-small.warning 45 | i.icon.bi.bi-folder2.fs-1 46 | div.info 47 | h4 Uploades 48 | p 49 | b 10 50 | 51 | .col-md-3 52 | .widget-small.danger 53 | i.icon.bi.bi-star.fs-1 54 | div.info 55 | h4 Stars 56 | p 57 | b 500 58 | 59 | .row 60 | .col-md-3 61 | .widget-small.primary.coloured-icon 62 | i.icon.bi.bi-people.fs-1 63 | div.info 64 | h4 Users 65 | p 66 | b 5 67 | 68 | .col-md-3 69 | .widget-small.info.coloured-icon 70 | i.icon.bi.bi-heart.fs-1 71 | div.info 72 | h4 Likes 73 | p 74 | b 25 75 | 76 | .col-md-3 77 | .widget-small.warning.coloured-icon 78 | i.icon.bi.bi-folder2.fs-1 79 | div.info 80 | h4 Uploades 81 | p 82 | b 10 83 | 84 | .col-md-3 85 | .widget-small.danger.coloured-icon 86 | i.icon.bi.bi-star.fs-1 87 | div.info 88 | h4 Stars 89 | p 90 | b 500 91 | 92 | .row 93 | .col-md-6 94 | .tile 95 | h3.tile-title Chat 96 | .messanger 97 | .messages 98 | .message 99 | img(src="https://randomuser.me/api/portraits/men/4.jpg") 100 | p.info Hello there! 101 | br 102 | | Good Morning 103 | 104 | .message.me 105 | img(src="https://randomuser.me/api/portraits/men/1.jpg") 106 | p.info Hi 107 | br 108 | | Good Morning 109 | 110 | .message 111 | img(src="https://randomuser.me/api/portraits/men/4.jpg") 112 | p.info How are you? 113 | 114 | .message.me 115 | img(src="https://randomuser.me/api/portraits/men/1.jpg") 116 | p.info I'm Fine. 117 | 118 | .sender 119 | input(type="text",placeholder="Send Message") 120 | button.btn.btn-primary(type="button") 121 | i.bi.bi-send.fs-5 122 | 123 | -------------------------------------------------------------------------------- /src/sass/1-tools/_customize-bootstrap.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Customize bootstrap variables to match 3 | // look and feel of the theme 4 | //----------------------------------------------------- 5 | 6 | $primary: $primary-color; 7 | 8 | // Customize typographic styles 9 | $font-size-base: 0.875rem; 10 | $font-family-sans-serif: 'Lato', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 11 | $link-color: $primary-color; 12 | $headings-font-weight: bold; 13 | 14 | // Customize Dropdown styles 15 | $dropdown-padding-y: 0; 16 | $dropdown-spacer: 0; 17 | $dropdown-border-width: 0; 18 | $dropdown-item-padding-y: 8px; 19 | $dropdown-item-padding-x: 20px; 20 | 21 | // Customize button styles 22 | $btn-border-radius: 3px; 23 | $btn-border-radius-lg: 3px; 24 | $btn-border-radius-sm: 3px; 25 | $btn-font-weight: 700; 26 | $btn-transition: box-shadow 0.3s cubic-bezier(0.35, 0, 0.25, 1), transform 0.2s cubic-bezier(0.35, 0, 0.25, 1), background-color 0.3s ease-in-out, border-color 0.3s ease-in-out; 27 | 28 | // Custmize form component styles 29 | 30 | $input-border-radius: 4px; 31 | $input-border-radius-lg: 4px; 32 | $input-border-radius-sm: 4px; 33 | $input-focus-border-color: $primary-color; 34 | $input-btn-border-width: 2px; 35 | $input-btn-focus-box-shadow: none; 36 | $input-btn-focus-width: 0; 37 | -------------------------------------------------------------------------------- /src/sass/1-tools/_fonts.scss: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Lato:300,400,400i,700); 2 | @import url(https://fonts.googleapis.com/css?family=Niconne); 3 | -------------------------------------------------------------------------------- /src/sass/1-tools/_vars.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Application Variables 3 | //----------------------------------------------------- 4 | 5 | // Primary font 6 | $body-font: 'Lato', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 7 | 8 | // 9 | // Theme Colors 10 | // 11 | 12 | $white: #FFF; 13 | 14 | // Primary color is the main color of the application which is used 15 | // for navbar, active links and primary button. 16 | 17 | // ------ Primary Colors from google material design color palette ------ 18 | // Blue : #1565C0 19 | // Teal : #00695C 20 | // Green : #2E7D32 21 | // Brown : #4E342E 22 | // Purple: #4527A0 23 | 24 | $primary-color: #00695C; 25 | 26 | // Complementry color is used to indecate the loading bar on the top 27 | // of the page with pace.js plugin 28 | $complementry-color: adjust_hue($primary-color, 180); 29 | 30 | // ------- Sidebar Width -------- 31 | $sidebar-width: 230px; 32 | 33 | // ------- Sidebar Colors -------- 34 | 35 | // Background color of sidebar 36 | $sidebar-color: #222d32; 37 | 38 | // -- Suggested sidebar background colors 39 | // dark : #222d32 40 | // light : #f8f8f8 41 | 42 | // Sidebar accent varible is used to determine the color of the links 43 | // of the sidebar. The allowed values are 'light' or 'dark' only 44 | $sidebar-accent: dark; 45 | 46 | // The following varibles indecate sidebar link color 47 | // and link hover color when using a dark sidebar color 48 | $sidebar-dark-color: #fff; 49 | $sidebar-dark-link-color: #fff; 50 | 51 | // The following varibles indecate sidebar link color 52 | // and link hover color when using a light sidebar color 53 | $sidebar-light-color: #000; 54 | $sidebar-light-link-color: #333; 55 | -------------------------------------------------------------------------------- /src/sass/2-basics/_app.scss: -------------------------------------------------------------------------------- 1 | // Page common styles 2 | 3 | ::selection { 4 | color: $white; 5 | background-color: darken($primary-color,10%); 6 | } 7 | 8 | .app { 9 | // On large devices make sidebar visible by default 10 | // adding sidenav-toggled class will close sidebar 11 | @media(min-width: 768px) { 12 | &.sidenav-toggled { 13 | .app-content { margin-left: 0; } 14 | .app-sidebar { left: -$sidebar-width; } 15 | .app-sidebar__overlay { visibility: hidden; } 16 | } 17 | } 18 | // On small devices make sidebar collapsed by default 19 | // adding sidenav-toggled class will open sidebar 20 | @media(max-width: 767px) { 21 | overflow-x: hidden; 22 | .app-sidebar { left: -$sidebar-width; } 23 | .app-sidebar__overlay { visibility: hidden; } 24 | &.sidenav-toggled { 25 | .app-content { margin-left: 0; } 26 | .app-sidebar { left: 0; } 27 | .app-sidebar__overlay { visibility: visible; } 28 | } 29 | } 30 | } 31 | 32 | .app-content { 33 | min-height: calc(100vh - 50px); 34 | margin-top: 50px; 35 | padding: 30px; 36 | background-color: #E5E5E5; 37 | transition: margin-left 0.3s ease; 38 | @media(min-width: 768px) { margin-left: $sidebar-width; } 39 | @media(max-width: 767px) { 40 | margin-top: 50px; 41 | min-width: 100%; 42 | } 43 | @media(max-width: 480px) { padding: 15px; } 44 | @media print { 45 | margin: 0; 46 | padding: 0; 47 | background-color: #fff; 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /src/sass/2-basics/_helpers.scss: -------------------------------------------------------------------------------- 1 | // Helper Classes 2 | 3 | .light-text { font-weight: 300 !important; } 4 | .semibold-text { font-weight: 600 !important; } 5 | .line-head { 6 | padding-bottom: 10px; 7 | border-bottom: 1px solid #ddd; 8 | } 9 | -------------------------------------------------------------------------------- /src/sass/3-component/_app-title.scss: -------------------------------------------------------------------------------- 1 | // Componant: Page Title 2 | 3 | .app-title { 4 | display: flex; 5 | align-items: center; 6 | justify-content: space-between; 7 | flex-direction: row; 8 | background-color: #FFF; 9 | margin: (-30px) -30px 30px; 10 | padding: 20px 30px; 11 | box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); 12 | 13 | @media print { display: none; } 14 | @media (max-width: 480px) { 15 | margin: (-15px) -15px 15px; 16 | padding: 20px; 17 | flex-direction: column; 18 | align-items: flex-start; 19 | } 20 | 21 | h1 { 22 | margin: 0; 23 | font-size: 24px; 24 | font-weight: 400; 25 | } 26 | 27 | p { 28 | margin-bottom: 0; 29 | font-style: italic; 30 | @media (max-width: 480px) { display: none; } 31 | } 32 | } 33 | 34 | .app-breadcrumb { 35 | margin-bottom: 0; 36 | text-align: right; 37 | font-weight: 500; 38 | font-size: 13px; 39 | text-transform: capitalize; 40 | padding: 0; 41 | text-align: left; 42 | padding: 0; 43 | background-color: transparent; 44 | @media (max-width: 480px) { margin-top: 10px; } 45 | } -------------------------------------------------------------------------------- /src/sass/3-component/_button-spinner.scss: -------------------------------------------------------------------------------- 1 | // Componant: Button Loader 2 | 3 | .btn-spinner { 4 | display: inline-block; 5 | z-index: 2000; 6 | width: 15px; 7 | height: 15px; 8 | position: relative; 9 | top: 2px; 10 | margin-right: 5px; 11 | border: solid 2px transparent; 12 | border-top-color: #fff; 13 | border-left-color: #fff; 14 | border-radius: 10px; 15 | animation: bSpinner 0.8s linear infinite; 16 | } 17 | 18 | @keyframes bSpinner { 19 | 0% { transform: rotate(0deg) } 20 | 100% { transform: rotate(360deg) } 21 | } 22 | -------------------------------------------------------------------------------- /src/sass/3-component/_button.scss: -------------------------------------------------------------------------------- 1 | // Componant: Dropdown 2 | // Updated styles for bootstrap dropdown 3 | 4 | .btn { 5 | cursor: pointer; 6 | &:not([disabled]):not(.disabled):not(.btn-link):hover, 7 | &:not([disabled]):not(.disabled):not(.btn-link):focus { 8 | text-decoration: none; 9 | transform: translate3d(0, -1px, 0); 10 | box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4); 11 | } 12 | &[disabled] { cursor: not-allowed; } 13 | .icon, 14 | .bi { 15 | font-size: 14px; 16 | margin-right: 5px; 17 | vertical-align: 0px; 18 | } 19 | } -------------------------------------------------------------------------------- /src/sass/3-component/_chat.scss: -------------------------------------------------------------------------------- 1 | // Componant: ChatBox 2 | 3 | .messanger { 4 | display: flex; 5 | flex-direction: column; 6 | 7 | .messages { 8 | flex: 1; 9 | margin: 10px 0; 10 | padding: 0 10px; 11 | max-height: 260px; 12 | overflow-y: auto; 13 | overflow-x: hidden; 14 | 15 | .message { 16 | display: flex; 17 | margin-bottom: 15px; 18 | align-items: flex-start; 19 | 20 | &.me { 21 | flex-direction: row-reverse; 22 | 23 | img { 24 | margin-right: 0; 25 | margin-left: 15px; 26 | } 27 | 28 | .info { 29 | background-color: $primary-color; 30 | color: $white; 31 | 32 | &:before { 33 | display: none; 34 | } 35 | 36 | &:after { 37 | position: absolute; 38 | right: -13px; 39 | top: 0; 40 | content: ""; 41 | width: 0; 42 | height: 0; 43 | border-style: solid; 44 | border-width: 0 16px 16px 0; 45 | border-color: transparent $primary-color transparent transparent; 46 | transform: rotate(270deg); 47 | } 48 | } 49 | } 50 | 51 | img { 52 | border-radius: 50%; 53 | margin-right: 15px; 54 | max-width: 45px; 55 | } 56 | 57 | .info { 58 | margin: 0; 59 | background-color: #ddd; 60 | padding: 5px 10px; 61 | border-radius: 3px; 62 | position: relative; 63 | align-self: flex-start; 64 | 65 | &:before { 66 | position: absolute; 67 | left: -14px; 68 | top: 0; 69 | content: ""; 70 | width: 0; 71 | height: 0; 72 | border-style: solid; 73 | border-width: 0 16px 16px 0; 74 | border-color: transparent #ddd transparent transparent; 75 | } 76 | } 77 | } 78 | } 79 | 80 | .sender { 81 | display: flex; 82 | 83 | input[type="text"] { 84 | flex: 1; 85 | border: 1px solid $primary-color; 86 | outline: none; 87 | padding: 5px 10px; 88 | } 89 | 90 | button { border-radius: 0; } 91 | } 92 | } -------------------------------------------------------------------------------- /src/sass/3-component/_dropdown.scss: -------------------------------------------------------------------------------- 1 | // Componant: Dropdown 2 | // Updated styles for bootstrap dropdown 3 | 4 | .dropdown-menu { 5 | border-radius: 0; 6 | box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 7 | &.dropdown-menu-right { 8 | left: auto; 9 | right: 0; 10 | } 11 | } 12 | 13 | .dropdown-item { 14 | .bi, 15 | .icon { 16 | margin-right: 5px; 17 | vertical-align: middle; 18 | } 19 | } -------------------------------------------------------------------------------- /src/sass/3-component/_header.scss: -------------------------------------------------------------------------------- 1 | /*----- Componant: Top Navigation Bar ----- */ 2 | 3 | .app-header { 4 | position: fixed; 5 | left: 0; 6 | right: 0; 7 | top: 0; 8 | width: 100%; 9 | display: flex; 10 | background-color: $primary-color; 11 | z-index: 1030; 12 | padding-right: 15px; 13 | @media(min-width: 768px) { padding-right: 30px } 14 | @media print { display: none; } 15 | } 16 | 17 | .app-header__logo { 18 | flex: 1 0 auto; 19 | color: #fff; 20 | text-align: center; 21 | font-family: 'Niconne'; 22 | padding: 0 15px; 23 | font-size: 26px; 24 | font-weight: 400; 25 | line-height: 50px; 26 | text-decoration: none; 27 | @media(min-width: 768px) { 28 | flex: 0 0 auto; 29 | display: block; 30 | width: $sidebar-width; 31 | @if $sidebar-accent == dark { 32 | background-color: darken( $primary-color, 5% ); 33 | } 34 | @if $sidebar-accent == light { 35 | background-color: lighten( $primary-color, 5% ); 36 | } 37 | } 38 | &:focus, 39 | &:hover { 40 | text-decoration: none; 41 | color: #fff; 42 | } 43 | } 44 | 45 | .app-sidebar__toggle { 46 | padding: 0 15px; 47 | font-family: bootstrap-icons !important; 48 | color: #fff; 49 | line-height: 2.4; 50 | transition: background-color 0.3s ease; 51 | text-decoration: none; 52 | @media(max-width: 767px) { order: -1; } 53 | &:before { 54 | content: "\f479"; 55 | font-size: 21px; 56 | } 57 | &:focus, 58 | &:hover { 59 | color: #fff; 60 | background-color: darken($primary-color, 10); 61 | text-decoration: none; 62 | } 63 | } 64 | 65 | .app-nav { 66 | @extend .list-unstyled; 67 | display: flex; 68 | margin-bottom: 0; 69 | justify-content: flex-end; 70 | @media(min-width: 768px) { flex: 1 0 auto; } 71 | } 72 | 73 | .app-nav__item { 74 | display: block; 75 | padding: 15px; 76 | line-height: 20px; 77 | color: #fff; 78 | transition: background-color 0.3s ease; 79 | &:hover, 80 | &:focus { 81 | background: rgba(0, 0, 0, 0.1); 82 | color: #f6f6f6; 83 | } 84 | } 85 | 86 | .app-search { 87 | position: relative; 88 | display: flex; 89 | align-self: center; 90 | margin-right: 15px; 91 | padding: 10px 0; 92 | @media(max-width: 480px) { display: none; } 93 | } 94 | 95 | .app-search__input { 96 | border: 0; 97 | padding: 5px 10px; 98 | padding-right: 30px; 99 | border-radius: 2px; 100 | background-color: rgba(255,255,255,0.8); 101 | transition: background-color 0.3s ease; 102 | &::placeholder { color: rgba(0,0,0,0.4); } 103 | } 104 | .app-search__button { 105 | position: absolute; 106 | right: 0; 107 | top: 10px; 108 | bottom: 10px; 109 | padding: 0 10px; 110 | border: 0; 111 | color: rgba(0,0,0,0.8); 112 | background: none; 113 | cursor: pointer; 114 | } 115 | 116 | .app-notification { min-width: 270px; } 117 | .app-notification__title { 118 | padding: 8px 20px; 119 | text-align: center; 120 | background-color: transparentize($primary-color, 0.6); 121 | color: #333; 122 | } 123 | .app-notification__footer { 124 | padding: 8px 20px; 125 | text-align: center; 126 | background-color: #eee; 127 | > a { text-decoration: none; } 128 | } 129 | .app-notification__content { 130 | max-height: 220px; 131 | overflow-y: auto; 132 | &::-webkit-scrollbar { width: 6px; } 133 | &::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); } 134 | } 135 | .app-notification__item { 136 | display: flex; 137 | padding: 8px 20px; 138 | color: inherit; 139 | border-bottom: 1px solid #ddd; 140 | transition: background-color 0.3s ease; 141 | text-decoration: none; 142 | &:focus, 143 | &:hover { 144 | color: inherit; 145 | text-decoration: none; 146 | background-color: #e0e0e0; 147 | } 148 | } 149 | 150 | .app-notification__message, 151 | .app-notification__meta { 152 | margin-bottom: 0; 153 | } 154 | 155 | .app-notification__icon { padding-right: 10px; } 156 | .app-notification__message { line-height: 1.2; } 157 | .app-notification__meta { @extend .text-muted; } 158 | -------------------------------------------------------------------------------- /src/sass/3-component/_material-half-bg.scss: -------------------------------------------------------------------------------- 1 | // Componant: Material Half cover background 2 | //------------------------------------------------- 3 | 4 | .material-half-bg { 5 | height: 100vh; 6 | background-color: #e7e7e7; 7 | position: fixed; 8 | top: 0; 9 | left: 0; 10 | right: 0; 11 | bottom: 0; 12 | z-index: -1; 13 | .cover { 14 | background-color: $primary-color; 15 | height: 50vh; 16 | } 17 | } -------------------------------------------------------------------------------- /src/sass/3-component/_material-loader.scss: -------------------------------------------------------------------------------- 1 | // Componant: Material Loader 2 | 3 | .m-loader { 4 | position: relative; 5 | width: 40px; 6 | &:before { 7 | content: ''; 8 | display: block; 9 | padding-top: 100%; 10 | } 11 | } 12 | 13 | .m-circular { 14 | animation: rotate 1.5s linear infinite; 15 | height: 100%; 16 | transform-origin: center center; 17 | width: 100%; 18 | position: absolute; 19 | top: 0; 20 | bottom: 0; 21 | left: 0; 22 | right: 0; 23 | margin: auto; 24 | } 25 | .path { 26 | stroke-dasharray: 1,200; 27 | stroke-dashoffset: 0; 28 | stroke: $primary-color; 29 | animation: dash 1.5s ease-in-out infinite; 30 | stroke-linecap: round; 31 | } 32 | @keyframes rotate { 33 | 100% { transform: rotate(360deg); } 34 | } 35 | @keyframes dash { 36 | 0% { 37 | stroke-dasharray: 1,200; 38 | stroke-dashoffset: 0; 39 | } 40 | 50% { 41 | stroke-dasharray: 89,200; 42 | stroke-dashoffset: -35px; 43 | } 44 | 100% { 45 | stroke-dasharray: 89,200; 46 | stroke-dashoffset: -124px; 47 | } 48 | } 49 | 50 | 51 | // Usage Example 52 | //
53 | // 54 | // 55 | // 56 | //
-------------------------------------------------------------------------------- /src/sass/3-component/_rtl.scss: -------------------------------------------------------------------------------- 1 | // Componant: RTL 2 | // Right to left support 3 | 4 | [dir=rtl] { 5 | body { 6 | text-align: right; 7 | direction: rtl; 8 | } 9 | 10 | .app-sidebar { 11 | left: auto; 12 | right: 0; 13 | } 14 | 15 | .app-sidebar__user-avatar { 16 | margin-left: 15px; 17 | margin-right: 0; 18 | } 19 | 20 | .dropdown-menu.dropdown-menu-right { 21 | right: auto; 22 | left: 0; 23 | } 24 | 25 | .list-unstyled, 26 | .app-nav, 27 | .app-menu, 28 | .user .user-tabs, 29 | .treeview-menu { 30 | padding-right: 0; 31 | } 32 | 33 | .btn .icon, 34 | .btn .bi, 35 | .treeview-item .icon { 36 | margin-right: 0; 37 | margin-left: 5px; 38 | } 39 | 40 | .modal-header .close { 41 | margin-left: 0; 42 | margin-right: auto; 43 | } 44 | 45 | .modal-footer > :not(:last-child) { 46 | margin-right: 0; 47 | margin-left: 0.25rem; 48 | } 49 | 50 | .widget-small .icon { border-radius: 0 4px 4px 0; } 51 | 52 | .user .timeline-post .post-media img { 53 | margin-right: 0; 54 | margin-left: 10px; 55 | } 56 | 57 | table.table-bordered.dataTable th:last-child, 58 | table.table-bordered.dataTable th:last-child, 59 | table.table-bordered.dataTable td:last-child, 60 | table.table-bordered.dataTable td:last-child { 61 | border-right-width: 1px; 62 | } 63 | 64 | @media(min-width: 768px) { 65 | .app-header { 66 | padding-right: 0; 67 | padding-left: 30px; 68 | } 69 | .app-content { 70 | margin-left: 0; 71 | margin-right: 230px; 72 | transition: margin-right 0.3s ease; 73 | } 74 | .sidebar-mini.sidenav-toggled .app-content { 75 | margin-left: 0; 76 | margin-right: 50px; 77 | } 78 | .sidebar-mini.sidenav-toggled .app-menu__label, 79 | .sidebar-mini.sidenav-toggled .treeview-menu { 80 | left: auto; 81 | right: 50px; 82 | } 83 | .sidebar-mini.sidenav-toggled .treeview .app-menu__label { 84 | border-top-left-radius: 4px; 85 | border-top-right-radius: 0; 86 | border-bottom-left-radius: 0; 87 | } 88 | .sidebar-mini.sidenav-toggled .treeview-menu { 89 | border-bottom-right-radius: 0; 90 | border-bottom-left-radius: 4px; 91 | } 92 | .sidebar-mini.sidenav-toggled .app-menu__label { 93 | border-top-right-radius: 0; 94 | border-bottom-right-radius: 0; 95 | border-top-left-radius: 4px; 96 | border-bottom-left-radius: 4px; 97 | } 98 | } 99 | 100 | @media(max-width: 768px) { 101 | .app.sidenav-toggled .app-sidebar { 102 | left: auto; 103 | right: 0; 104 | } 105 | .app .app-sidebar { 106 | left: auto; 107 | right: -230px; 108 | } 109 | } 110 | } -------------------------------------------------------------------------------- /src/sass/3-component/_sidebar-mini.scss: -------------------------------------------------------------------------------- 1 | // Componant: Sidebar Mini 2 | 3 | @media (min-width: 768px) { 4 | .sidebar-mini.sidenav-toggled { 5 | .app-sidebar__user-name, 6 | .app-sidebar__user-designation, 7 | .treeview-indicator { 8 | display: none; 9 | } 10 | .app-sidebar__user-avatar { 11 | width: 30px; 12 | height: 30px; 13 | } 14 | .app-content { margin-left: 50px; } 15 | .app-sidebar { 16 | left: 0; 17 | width: 50px; 18 | overflow: hidden; 19 | &:hover { overflow: visible; } 20 | } 21 | .app-menu__item { 22 | overflow: hidden; 23 | &:hover { 24 | overflow: visible; 25 | .app-menu__label { opacity: 1; } 26 | & + .treeview-menu { visibility: visible; } 27 | } 28 | } 29 | .app-menu__label { 30 | display: block; 31 | position: absolute; 32 | top: 0; 33 | left: 50px; 34 | min-width: 180px; 35 | padding: 16px 5px 16px 20px; 36 | margin-left: -3px; 37 | line-height: 1; 38 | opacity: 0; 39 | background: darken($sidebar-color, 10); 40 | border-top-right-radius: 4px; 41 | border-bottom-right-radius: 4px; 42 | } 43 | .treeview { 44 | &:hover { 45 | .app-menu__item { 46 | overflow: visible; 47 | background: darken($sidebar-color, 10); 48 | border-left-color: $primary-color; 49 | @if $sidebar-accent == dark { color: $sidebar-dark-link-color } 50 | @if $sidebar-accent == light { color: $primary-color } 51 | } 52 | .app-menu__label { opacity: 1; } 53 | .treeview-menu { 54 | max-height: 100vh; 55 | opacity: 1; 56 | visibility: visible; 57 | z-index: 10; 58 | } 59 | } 60 | .app-menu__label { border-bottom-right-radius: 0; } 61 | } 62 | .treeview-menu { 63 | position: absolute; 64 | left: 50px; 65 | min-width: 180px; 66 | padding: 12px 0; 67 | opacity: 0; 68 | border-bottom-right-radius: 4px; 69 | z-index: 9; 70 | visibility: hidden; 71 | transition: visibility 0.3s ease; 72 | } 73 | } 74 | } -------------------------------------------------------------------------------- /src/sass/3-component/_sidebar.scss: -------------------------------------------------------------------------------- 1 | // Componant: Sidebar 2 | 3 | .app-sidebar { 4 | position: fixed; 5 | top: 0; 6 | bottom: 0; 7 | left: 0; 8 | padding-top: 70px; 9 | width: $sidebar-width; 10 | overflow: auto; 11 | z-index: 10; 12 | background-color: $sidebar-color; 13 | box-shadow: 0px 8px 17px rgba(0, 0, 0, 0.2); 14 | transition: left 0.3s ease, 15 | width 0.3s ease; 16 | &::-webkit-scrollbar { width: 6px; } 17 | &::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); } 18 | @media print { display: none; } 19 | } 20 | 21 | .app-sidebar__overlay { 22 | @media(max-width: 767px) { 23 | position: fixed; 24 | top: 0; 25 | left: 0; 26 | bottom: 0; 27 | right: 0; 28 | z-index: 9; 29 | } 30 | } 31 | 32 | .app-sidebar__user { 33 | display: flex; 34 | align-items: center; 35 | padding: 10px; 36 | margin-bottom: 20px; 37 | @if $sidebar-accent == dark { 38 | color: #fff; 39 | } 40 | } 41 | 42 | .app-sidebar__user-avatar { 43 | @extend .rounded-circle; 44 | flex: 0 0 auto; 45 | margin-right: 15px; 46 | max-width: 45px; 47 | height: auto; 48 | } 49 | 50 | .app-sidebar__user-name { 51 | font-size: 17px; 52 | line-height: 1.3; 53 | } 54 | 55 | .app-sidebar__user-name, 56 | .app-sidebar__user-designation { 57 | white-space: nowrap; 58 | overflow: hidden; 59 | text-overflow: ellipsis; 60 | margin-bottom: 0; 61 | } 62 | 63 | .app-menu { 64 | @extend .list-unstyled; 65 | margin-bottom: 0; 66 | padding-bottom: 40px; 67 | } 68 | 69 | .app-menu__item { 70 | position: relative; 71 | display: flex; 72 | align-items: center; 73 | padding: 12px 15px; 74 | font-size: 1.08em; 75 | border-left: 3px solid transparent; 76 | transition: border-left-color 0.3s ease, 77 | background-color 0.3s ease; 78 | text-decoration: none; 79 | @if $sidebar-accent == dark { color: $sidebar-dark-link-color } 80 | @if $sidebar-accent == light { color: $sidebar-light-link-color } 81 | &.active, 82 | &:hover, 83 | &:focus { 84 | background: darken($sidebar-color, 10); 85 | border-left-color: $primary-color; 86 | text-decoration: none; 87 | @if $sidebar-accent == dark { color: $sidebar-dark-link-color } 88 | @if $sidebar-accent == light { color: $primary-color } 89 | } 90 | } 91 | 92 | .app-menu__icon { 93 | flex: 0 0 auto; 94 | width: 25px; 95 | } 96 | 97 | .app-menu__label { 98 | white-space: nowrap; 99 | flex: 1 1 auto; 100 | } 101 | 102 | .treeview { 103 | &.is-expanded { 104 | [data-toggle='treeview'] { 105 | border-left-color: $primary-color; 106 | background: darken($sidebar-color, 10); 107 | } 108 | .treeview-menu { max-height: 100vh; } 109 | .treeview-indicator { transform: rotate(90deg); } 110 | } 111 | } 112 | 113 | .treeview-menu { 114 | @extend .list-unstyled; 115 | max-height: 0; 116 | overflow: hidden; 117 | transition: max-height 0.3s ease; 118 | @if $sidebar-accent == dark { 119 | background: lighten($sidebar-color, 4) 120 | } 121 | @if $sidebar-accent == light { 122 | background: darken($sidebar-color, 4) 123 | } 124 | } 125 | 126 | .treeview-item { 127 | display: flex; 128 | align-items: center; 129 | padding: 5px 5px 5px 20px; 130 | font-size: 1em; 131 | text-decoration: none; 132 | @if $sidebar-accent == dark { color: $sidebar-dark-link-color } 133 | @if $sidebar-accent == light { color: $sidebar-light-link-color } 134 | &.active, 135 | &:hover, 136 | &:focus { 137 | background: darken($sidebar-color, 10); 138 | text-decoration: none; 139 | @if $sidebar-accent == dark { color: $sidebar-dark-link-color } 140 | @if $sidebar-accent == light { color: $primary-color } 141 | } 142 | .icon { margin-right: 5px; } 143 | } 144 | 145 | .treeview-indicator { 146 | transform-origin: center; 147 | transition: transform 0.3s ease; 148 | } 149 | -------------------------------------------------------------------------------- /src/sass/3-component/_tile.scss: -------------------------------------------------------------------------------- 1 | // Componant: Card 2 | 3 | .tile { 4 | position: relative; 5 | background: #ffffff; 6 | border-radius: 3px; 7 | padding: 20px; 8 | box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2); 9 | margin-bottom: 30px; 10 | transition: all 0.3s ease-in-out; 11 | 12 | @media print { 13 | border: 1px solid #ddd; 14 | box-shadow: none; 15 | } 16 | 17 | &.small { padding: 0; } 18 | 19 | .overlay { 20 | position: absolute; 21 | top: 0; 22 | left: 0; 23 | bottom: 0; 24 | right: 0; 25 | background-color: rgba(255, 255, 255, 0.9); 26 | display: flex; 27 | align-items: center; 28 | justify-content: center; 29 | flex-direction: row; 30 | color: #555; 31 | border-radius: 3px; 32 | 33 | .l-text { 34 | font-size: 24px; 35 | margin-top: 15px; 36 | margin-left: 12px; 37 | } 38 | } 39 | 40 | .tile-title { 41 | margin-top: 0; 42 | margin-bottom: 20px; 43 | font-size: 1.5rem; 44 | } 45 | 46 | .tile-title-w-btn { 47 | display: flex; 48 | justify-content: space-between; 49 | align-items: center; 50 | margin-bottom: 20px; 51 | 52 | p { margin: 0; } 53 | 54 | .title { margin: 0; } 55 | 56 | .side { 57 | margin-bottom: 0; 58 | padding-left: 0; 59 | } 60 | 61 | .btn-group { flex: 0 0 auto; } 62 | } 63 | 64 | .tile-footer { 65 | border-top: 1px solid #ddd; 66 | padding: 20px 0 0 0; 67 | margin-top: 10px; 68 | } 69 | } -------------------------------------------------------------------------------- /src/sass/3-component/_widgets.scss: -------------------------------------------------------------------------------- 1 | // Componant: Widget 2 | 3 | @use "sass:map"; 4 | 5 | .widget-small { 6 | display: flex; 7 | border-radius: 4px; 8 | color: $white; 9 | margin-bottom: 30px; 10 | box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); 11 | 12 | .icon { 13 | display: flex; 14 | min-width: 85px; 15 | align-items: center; 16 | justify-content: center; 17 | padding: 20px; 18 | background-color: rgba(0, 0, 0, 0.2); 19 | border-radius: 4px 0 0 4px; 20 | font-size: 2.5rem; 21 | } 22 | 23 | .info { 24 | flex: 1; 25 | padding: 0 20px; 26 | align-self: center; 27 | 28 | h4 { 29 | text-transform: uppercase; 30 | margin: 0; 31 | margin-bottom: 5px; 32 | font-weight: 400; 33 | font-size: 1.1rem; 34 | } 35 | 36 | p { 37 | margin: 0; 38 | font-size: 16px; 39 | } 40 | } 41 | 42 | &.primary { 43 | background-color: $primary-color; 44 | 45 | &.coloured-icon { 46 | background-color: #fff; 47 | color: #2a2a2a; 48 | 49 | .icon { 50 | background-color: $primary-color; 51 | color: #fff; 52 | } 53 | } 54 | } 55 | 56 | &.info { 57 | background-color: map.get($theme-colors, "info"); 58 | 59 | &.coloured-icon { 60 | background-color: #fff; 61 | color: #2a2a2a; 62 | 63 | .icon { 64 | background-color: map.get($theme-colors, "info"); 65 | color: #fff; 66 | } 67 | } 68 | } 69 | 70 | &.warning { 71 | background-color: map.get($theme-colors,"warning"); 72 | 73 | &.coloured-icon { 74 | background-color: #fff; 75 | color: #2a2a2a; 76 | 77 | .icon { 78 | background-color: map.get($theme-colors,"warning"); 79 | color: #fff; 80 | } 81 | } 82 | } 83 | 84 | &.danger { 85 | background-color: map.get($theme-colors,"danger"); 86 | 87 | &.coloured-icon { 88 | background-color: #fff; 89 | color: #2a2a2a; 90 | 91 | .icon { 92 | background-color: map.get($theme-colors,"danger"); 93 | color: #fff; 94 | } 95 | } 96 | } 97 | } -------------------------------------------------------------------------------- /src/sass/4-pages/_docs.scss: -------------------------------------------------------------------------------- 1 | .docs { 2 | font-size: 16px; 3 | } 4 | 5 | .docs-title { 6 | padding-bottom: 10px; 7 | border-bottom: 1px solid #ddd; 8 | font-size: 20px; 9 | &:not(:first-of-type) { margin-top: 30px; } 10 | } -------------------------------------------------------------------------------- /src/sass/4-pages/_error-page.scss: -------------------------------------------------------------------------------- 1 | // Page: Error 2 | 3 | .page-error { 4 | display: flex; 5 | align-items: center; 6 | justify-content: center; 7 | flex-direction: column; 8 | min-height: calc(100vh - 110px); 9 | margin-bottom: 0; 10 | h1 { 11 | margin: 10px; 12 | font-size: 42px; 13 | } 14 | } -------------------------------------------------------------------------------- /src/sass/4-pages/_landing-page.scss: -------------------------------------------------------------------------------- 1 | .landing-hero { 2 | position: relative; 3 | background-size: cover; 4 | background-repeat: no-repeat; 5 | background-image: url(https://images.unsplash.com/photo-1487621167305-5d248087c724?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1600&h=700&fit=crop&ixid=eyJhcHBfaWQiOjF9); 6 | border-bottom: 1px solid #ddd; 7 | } 8 | 9 | .landing-hero-overlay { 10 | position: absolute; 11 | top: 0; 12 | left: 0; 13 | right: 0; 14 | bottom: 0; 15 | background-color: darken($primary-color, 15); 16 | opacity: 0.5; 17 | z-index: 1; 18 | } 19 | 20 | .landing-hero-content { 21 | display: flex; 22 | flex-direction: column; 23 | justify-content: flex-end;; 24 | position: relative; 25 | padding: 60px 30px 0; 26 | z-index: 2; 27 | text-align: center; 28 | color: #fff; 29 | @media(min-width: 768px) { min-height: 100vh; } 30 | } 31 | 32 | .landing-hero-title { 33 | font-size: 26px; 34 | @media(max-width: 480px) { font-size: 20px; } 35 | } 36 | 37 | .landing-hero-description { font-size: 15px; } 38 | 39 | .landing-hero-banner { 40 | display: block; 41 | width: 100%; 42 | max-width: 900px; 43 | margin: 30px auto 0; 44 | border-radius: 6px 6px 0 0; 45 | } 46 | 47 | .features { 48 | padding: 60px 30px; 49 | } 50 | 51 | .features-title { 52 | font-size: 26px; 53 | text-align: center; 54 | margin-bottom: 30px; 55 | } 56 | 57 | .features-cards { 58 | max-width: 760px; 59 | list-style: none; 60 | margin: 0 auto; 61 | padding-left: 0; 62 | display: grid; 63 | grid-gap: 20px; 64 | grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 65 | } 66 | 67 | .features-card { 68 | border-radius: 4px; 69 | padding: 10px; 70 | font-size: 1.143em; 71 | text-align: center; 72 | } 73 | 74 | .feature-icon-backdrop { 75 | width: 64px; 76 | height: 64px; 77 | margin: 0 auto 8px; 78 | padding: 15px; 79 | border-radius: 50%; 80 | background-color: $primary-color; 81 | } 82 | 83 | .feature-icon { 84 | width: 32px; 85 | height: 32px; 86 | stroke: #fff; 87 | fill: transparent; 88 | } 89 | 90 | .landing-footer { 91 | padding: 20px; 92 | text-align: center; 93 | border-top: 1px solid #ddd; 94 | } 95 | -------------------------------------------------------------------------------- /src/sass/4-pages/_lockscreen-material.scss: -------------------------------------------------------------------------------- 1 | // Page: Login Material 2 | 3 | .lockscreen-content { 4 | display: flex; 5 | flex-direction: column; 6 | align-items: center; 7 | justify-content: center; 8 | min-height: 100vh; 9 | 10 | .logo { 11 | font-family: "Niconne"; 12 | margin-bottom: 40px; 13 | color: #fff; 14 | 15 | h1 { 16 | font-size: 52px; 17 | font-weight: 400; 18 | } 19 | } 20 | 21 | .lock-box { 22 | position: relative; 23 | min-width: 320px; 24 | padding: 20px 40px; 25 | background-color: #fff; 26 | box-shadow: 0px 29px 147.5px 102.5px rgba(0, 0, 0, 0.05), 0px 29px 95px 0px rgba(0, 0, 0, 0.16); 27 | perspective: 800px; 28 | transition: all 0.5s ease-in-out; 29 | 30 | .user-image { 31 | border: 3px solid #fff; 32 | max-width: 100px; 33 | display: block; 34 | margin: 0 auto; 35 | } 36 | 37 | .user-name { margin-bottom: 2px; } 38 | 39 | label { 40 | color: #666; 41 | font-weight: 700; 42 | } 43 | .btn-container { text-align: center; } 44 | } 45 | } -------------------------------------------------------------------------------- /src/sass/4-pages/_login-material.scss: -------------------------------------------------------------------------------- 1 | // Page: Login Material 2 | 3 | .login-content { 4 | display: flex; 5 | flex-direction: column; 6 | align-items: center; 7 | justify-content: center; 8 | min-height: 100vh; 9 | 10 | .logo { 11 | margin-bottom: 40px; 12 | font-family: "Niconne"; 13 | color: #fff; 14 | 15 | h1 { 16 | font-size: 52px; 17 | font-weight: 400; 18 | } 19 | } 20 | 21 | .login-box { 22 | position: relative; 23 | min-width: 350px; 24 | min-height: 390px; 25 | background-color: #fff; 26 | box-shadow: 0px 29px 147.5px 102.5px rgba(0, 0, 0, 0.05), 0px 29px 95px 0px rgba(0, 0, 0, 0.16); 27 | perspective: 800px; 28 | transition: all 0.5s ease-in-out; 29 | 30 | .login-head { 31 | margin-top: 0; 32 | margin-bottom: 20px; 33 | padding-bottom: 20px; 34 | border-bottom: 1px solid #ddd; 35 | text-align: center; 36 | } 37 | 38 | label { 39 | color: #666; 40 | font-weight: 700; 41 | } 42 | 43 | .utility { 44 | display: flex; 45 | padding: 1px; 46 | justify-content: space-between; 47 | align-items: center; 48 | } 49 | 50 | .btn-container { 51 | text-align: center; 52 | margin-bottom: 0; 53 | } 54 | 55 | .login-form, .forget-form { 56 | position: absolute; 57 | top: 0; 58 | bottom: 0; 59 | left: 0; 60 | right: 0; 61 | padding: 40px; 62 | backface-visibility: hidden; 63 | -webkit-backface-visibility: hidden; 64 | transition: all 0.5s ease-in-out; 65 | } 66 | 67 | .forget-form { 68 | opacity: 0; 69 | transform: rotateY(180deg); 70 | } 71 | 72 | &.flipped { 73 | min-height: 300px; 74 | 75 | .login-form { 76 | opacity: 0; 77 | transform: rotateY(-180deg); 78 | } 79 | 80 | .forget-form { 81 | opacity: 1; 82 | transform: rotateY(0deg); 83 | } 84 | } 85 | } 86 | } 87 | 88 | @media (max-width: 351px) { 89 | .login-content { 90 | .login-box { 91 | min-width: 100%; 92 | 93 | .login-form, .forget-form { 94 | width: 100%; 95 | } 96 | } 97 | } 98 | } -------------------------------------------------------------------------------- /src/sass/4-pages/_mailbox.scss: -------------------------------------------------------------------------------- 1 | // Page: Mailbox 2 | 3 | .folder-head { 4 | padding: 10px; 5 | margin-bottom: 0 !important; 6 | border-bottom: 1px solid #ddd; 7 | } 8 | 9 | .mailbox-controls { 10 | margin-bottom: 10px; 11 | border-bottom: 1px solid #ddd; 12 | padding: 0 0 10px 5px; 13 | display: flex; 14 | align-items: center; 15 | justify-content: space-between; 16 | 17 | .animated-checkbox { 18 | .label-text:before { vertical-align: (-7px) !important; } 19 | } 20 | } 21 | 22 | .mail-nav > li > a { 23 | display: block; 24 | background-color: #fff; 25 | color: #2a2a2a; 26 | border-radius: 0; 27 | font-weight: 500; 28 | } 29 | 30 | .mailbox-messages { 31 | table tr td { 32 | border: 0; 33 | padding: 5px; 34 | } 35 | 36 | .mail-subject { 37 | overflow: hidden; 38 | text-overflow: ellipsis; 39 | white-space: nowrap; 40 | max-width: 500px; 41 | } 42 | } -------------------------------------------------------------------------------- /src/sass/4-pages/_user-profile.scss: -------------------------------------------------------------------------------- 1 | // Page: User Profile 2 | 3 | .user { 4 | .profile { 5 | margin: -30px -30px 0 -30px; 6 | position: relative; 7 | 8 | .info { 9 | padding: 30px 60px; 10 | text-align: center; 11 | background-color: #fff; 12 | white-space: nowrap; 13 | background-color: rgba(100, 100, 100, 0.9); 14 | color: #fff; 15 | position: absolute; 16 | top: 0; 17 | bottom: 0; 18 | left: 0; 19 | 20 | img { 21 | border-radius: 50%; 22 | max-width: 110px; 23 | margin-bottom: 20px; 24 | margin-top: 10px; 25 | } 26 | } 27 | 28 | .cover-image { 29 | flex: 1; 30 | background-image: url(https://unsplash.com/photos/dH4JzW5h9Ng/download?w=1920); 31 | background-size: cover; 32 | background-position: center; 33 | min-height: 300px; 34 | } 35 | } 36 | 37 | .user-tabs { 38 | margin-top: 20px; 39 | 40 | .nav-link { 41 | border-left: 3px solid transparent; 42 | padding: 12px 15px; 43 | border-bottom: 0; 44 | font-size: 15px; 45 | border-radius: 0; 46 | 47 | &.active { 48 | border-left-color: $primary-color; 49 | border-bottom: 0; 50 | } 51 | 52 | &:hover, 53 | &:active { 54 | background-color: #eee !important; 55 | border-bottom: 0; 56 | } 57 | } 58 | } 59 | 60 | .tab-content { margin: 20px -10px -10px; } 61 | 62 | .timeline-post { 63 | background-color: #fff; 64 | padding: 20px; 65 | margin-bottom: 20px; 66 | box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); 67 | 68 | .post-media { 69 | display: flex; 70 | align-items: flex-start; 71 | margin-bottom: 15px; 72 | 73 | img { 74 | margin-right: 10px; 75 | max-width: 45px; 76 | height: auto; 77 | border-radius: 4px; 78 | } 79 | 80 | h5 { 81 | margin-top: 0; 82 | margin-bottom: 3px; 83 | font-size: 15px; 84 | } 85 | } 86 | 87 | .post-content { margin-bottom: 20px; } 88 | 89 | .post-utility { 90 | display: flex; 91 | list-style: none; 92 | padding-left: 0; 93 | margin-bottom: 0; 94 | 95 | .likes, 96 | .shares { 97 | margin-right: 10px; 98 | 99 | a { color: #555; } 100 | } 101 | 102 | .comments { 103 | color: #555; 104 | flex: 1; 105 | text-align: right; 106 | } 107 | } 108 | } 109 | 110 | .user-settings { 111 | .line-head { 112 | font-size: 18px; 113 | margin-bottom: 30px; 114 | color: #2a2a2a; 115 | } 116 | 117 | label { color: #666; } 118 | } 119 | } -------------------------------------------------------------------------------- /src/sass/main.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | * Vali Admin 3 | * Author: Pratik Borsadiya 4 | * ================================*/ 5 | 6 | // 1 - TOOLS 7 | //--------------------------------------------------- 8 | 9 | // This files are essential for the theme 10 | @import '1-tools/fonts'; 11 | @import '1-tools/vars'; 12 | @import '1-tools/customize-bootstrap'; 13 | @import '../../node_modules/bootstrap/scss/bootstrap.scss'; 14 | 15 | // 2 - BASICS 16 | //--------------------------------------------------- 17 | 18 | // This styles are essential for theme 19 | @import '2-basics/app'; 20 | @import '2-basics/helpers'; 21 | 22 | // 3 - Component 23 | //--------------------------------------------------- 24 | 25 | @import '3-component/header'; 26 | @import '3-component/sidebar'; 27 | @import '3-component/sidebar-mini'; 28 | 29 | // This styles are optional based on your preferance 30 | @import '3-component/dropdown'; 31 | @import '3-component/button'; 32 | @import '3-component/app-title'; 33 | @import '3-component/tile'; 34 | @import '3-component/material-half-bg'; 35 | @import '3-component/material-loader'; 36 | @import '3-component/button-spinner'; 37 | @import '3-component/widgets'; 38 | @import '3-component/chat'; 39 | 40 | // Include the following style if you need RTL support 41 | // Also you will need to add dir="rtl" attribute to HTML tag 42 | 43 | //@import '3-component/rtl'; 44 | 45 | // 4 -Pages 46 | //--------------------------------------------------- 47 | 48 | // This styles are optional based on your preferance 49 | @import '4-pages/landing-page'; 50 | @import '4-pages/docs'; 51 | @import '4-pages/login-material'; 52 | @import '4-pages/lockscreen-material'; 53 | @import '4-pages/error-page'; 54 | @import '4-pages/mailbox'; 55 | @import '4-pages/user-profile'; 56 | --------------------------------------------------------------------------------