├── .babelrc
├── .editorconfig
├── .eslintrc.json
├── .gitattributes
├── .github
    ├── ISSUE_TEMPLATE.md
    └── workflows
    │   ├── merge.yml
    │   └── release.yml
├── .gitignore
├── .nvmrc
├── .stylelintrc.json
├── CHANGELOG.md
├── CODE_OF_CONDUCT.md
├── LICENSE
├── README.md
├── browserslist
├── ci
    ├── getVersion.sh
    └── verifyVersion.sh
├── forms.php
├── package-lock.json
├── package.json
├── src
    ├── 404.html
    ├── 500.html
    ├── assets
    │   ├── scripts
    │   │   ├── charts
    │   │   │   ├── chartJS
    │   │   │   │   └── index.js
    │   │   │   ├── easyPieChart
    │   │   │   │   └── index.js
    │   │   │   ├── index.js
    │   │   │   └── sparkline
    │   │   │   │   └── index.js
    │   │   ├── chat
    │   │   │   └── index.js
    │   │   ├── constants
    │   │   │   └── colors.js
    │   │   ├── datatable
    │   │   │   └── index.js
    │   │   ├── datepicker
    │   │   │   └── index.js
    │   │   ├── email
    │   │   │   └── index.js
    │   │   ├── fullcalendar
    │   │   │   └── index.js
    │   │   ├── googleMaps
    │   │   │   └── index.js
    │   │   ├── index.js
    │   │   ├── masonry
    │   │   │   └── index.js
    │   │   ├── popover
    │   │   │   └── index.js
    │   │   ├── scrollbar
    │   │   │   └── index.js
    │   │   ├── search
    │   │   │   └── index.js
    │   │   ├── sidebar
    │   │   │   └── index.js
    │   │   ├── skycons
    │   │   │   └── index.js
    │   │   ├── utils
    │   │   │   └── index.js
    │   │   └── vectorMaps
    │   │   │   ├── index.js
    │   │   │   └── jquery-jvectormap-world-mill.js
    │   ├── static
    │   │   ├── fonts
    │   │   │   └── icons
    │   │   │   │   ├── fontawesome
    │   │   │   │       ├── FontAwesome.otf
    │   │   │   │       ├── fontawesome-webfont.eot
    │   │   │   │       ├── fontawesome-webfont.svg
    │   │   │   │       ├── fontawesome-webfont.ttf
    │   │   │   │       ├── fontawesome-webfont.woff
    │   │   │   │       └── fontawesome-webfont.woff2
    │   │   │   │   └── themify
    │   │   │   │       ├── themify.eot
    │   │   │   │       ├── themify.svg
    │   │   │   │       ├── themify.ttf
    │   │   │   │       └── themify.woff
    │   │   └── images
    │   │   │   ├── 404.png
    │   │   │   ├── 500.png
    │   │   │   ├── bg.jpg
    │   │   │   ├── datatables
    │   │   │       ├── sort_asc.png
    │   │   │       ├── sort_asc_disabled.png
    │   │   │       ├── sort_both.png
    │   │   │       ├── sort_desc.png
    │   │   │       └── sort_desc_disabled.png
    │   │   │   ├── logo.png
    │   │   │   └── logo.svg
    │   └── styles
    │   │   ├── index.scss
    │   │   ├── spec
    │   │       ├── components
    │   │       │   ├── easyPieChart.scss
    │   │       │   ├── footer.scss
    │   │       │   ├── forms.scss
    │   │       │   ├── index.scss
    │   │       │   ├── loader.scss
    │   │       │   ├── masonry.scss
    │   │       │   ├── pageContainer.scss
    │   │       │   ├── progressBar.scss
    │   │       │   ├── sidebar.scss
    │   │       │   └── topbar.scss
    │   │       ├── generic
    │   │       │   ├── base.scss
    │   │       │   └── index.scss
    │   │       ├── index.scss
    │   │       ├── screens
    │   │       │   ├── chat.scss
    │   │       │   ├── email.scss
    │   │       │   └── index.scss
    │   │       ├── settings
    │   │       │   ├── baseColors.scss
    │   │       │   ├── borders.scss
    │   │       │   ├── breakpoints.scss
    │   │       │   ├── fonts.scss
    │   │       │   ├── index.scss
    │   │       │   └── materialColors.scss
    │   │       ├── tools
    │   │       │   ├── index.scss
    │   │       │   └── mixins
    │   │       │   │   ├── clearfix.scss
    │   │       │   │   ├── index.scss
    │   │       │   │   ├── mediaQueriesRanges.scss
    │   │       │   │   └── placeholder.scss
    │   │       └── utils
    │   │       │   ├── colors.scss
    │   │       │   ├── index.scss
    │   │       │   └── layout
    │   │       │       ├── helpers
    │   │       │           ├── border.scss
    │   │       │           ├── flex.scss
    │   │       │           ├── index.scss
    │   │       │           ├── layout.scss
    │   │       │           ├── lists.scss
    │   │       │           ├── margin.scss
    │   │       │           ├── objects.scss
    │   │       │           ├── padding.scss
    │   │       │           ├── positions.scss
    │   │       │           ├── pseudo.scss
    │   │       │           ├── sizes.scss
    │   │       │           └── typography.scss
    │   │       │       ├── index.scss
    │   │       │       ├── mixins
    │   │       │           ├── generateResponsive.scss
    │   │       │           ├── index.scss
    │   │       │           └── mediaQueryCondition.scss
    │   │       │       └── utils
    │   │       │           ├── center.scss
    │   │       │           ├── gap.scss
    │   │       │           ├── index.scss
    │   │       │           ├── layers.scss
    │   │       │           └── peers.scss
    │   │   └── vendor
    │   │       ├── datepicker.scss
    │   │       ├── font-awesome.css
    │   │       ├── fullcalendar.scss
    │   │       ├── index.scss
    │   │       ├── jquery.datatables.scss
    │   │       ├── perfectScrollbar.scss
    │   │       ├── sparkline.scss
    │   │       └── themify-icons.css
    ├── basic-table.html
    ├── blank.html
    ├── buttons.html
    ├── calendar.html
    ├── charts.html
    ├── chat.html
    ├── compose.html
    ├── datatable.html
    ├── email.html
    ├── forms.html
    ├── google-maps.html
    ├── index.html
    ├── signin.html
    ├── signup.html
    ├── test.html
    ├── ui.html
    └── vector-maps.html
├── webpack.config.js
└── webpack
    ├── config.js
    ├── devServer.js
    ├── manifest.js
    ├── plugins
        ├── caseSensitivePlugin.js
        ├── copyPlugin.js
        ├── dashboardPlugin.js
        ├── extractPlugin.js
        ├── htmlPlugin.js
        ├── imageminPlugin.js
        ├── index.js
        └── internal.js
    └── rules
        ├── css.js
        ├── fonts.js
        ├── images.js
        ├── index.js
        ├── js.js
        └── sass.js


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["@babel/preset-env"],
3 |   "plugins": [
4 |     "@babel/plugin-proposal-class-properties",
5 |     "@babel/plugin-proposal-object-rest-spread"
6 |   ]
7 | }


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # -----------------------------
 2 | # General
 3 | # -----------------------------
 4 | 
 5 | # EditorConfig helps developers define and maintain consistent
 6 | # coding styles between different editors and IDEs
 7 | # editorconfig.org
 8 | 
 9 | # top-most EditorConfig file
10 | root = true
11 | 
12 | 
13 | 
14 | # -----------------------------
15 | # All Files
16 | # -----------------------------
17 | 
18 | [*]
19 | end_of_line = lf
20 | charset = utf-8
21 | insert_final_newline = true
22 | trim_trailing_whitespace = true
23 | indent_style = space
24 | indent_size = 2
25 | 
26 | 
27 | 
28 | # -----------------------------
29 | # Markdown Files
30 | # -----------------------------
31 | 
32 | [*.md]
33 | trim_trailing_whitespace = false
34 | 


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "airbnb-base",
 3 |   "parser": "@babel/eslint-parser",
 4 |   "settings": {
 5 |     "ecmascript": 7
 6 |   },
 7 |   "parserOptions": {
 8 |     "ecmaVersion": 2018,
 9 |     "ecmaFeatures": {
10 |       "modules": true,
11 |       "destructuring": true,
12 |       "classes": true,
13 |       "forOf": true,
14 |       "blockBindings": true,
15 |       "arrowFunctions": true
16 |     }
17 |   },
18 |   "env": {
19 |     "browser": true
20 |   },
21 |   "rules": {
22 |     "arrow-body-style": 0,
23 |     "prefer-arrow-callback": 0,
24 |     "arrow-parens": 0,
25 |     "no-param-reassign": 0,
26 |     "no-new": 0,
27 |     "consistent-return": 0,
28 |     "key-spacing": 0,
29 |     "no-multi-spaces": 0,
30 |     "no-underscore-dangle": 0,
31 |     "one-var": 0,
32 |     "global-require": 0,
33 |     "class-methods-use-this": 0,
34 |     "comma-dangle": ["error", {
35 |       "arrays": "always-multiline",
36 |       "objects": "always-multiline",
37 |       "imports": "always-multiline",
38 |       "exports": "always-multiline",
39 |       "functions": "never"
40 |     }],
41 |     "func-names": 0,
42 |     "function-paren-newline": 0,
43 |     "indent": 2,
44 |     "new-cap": 0,
45 |     "no-plusplus": 0,
46 |     "no-return-assign": 0,
47 |     "quote-props": 0,
48 |     "template-curly-spacing": 0,
49 |     "no-unused-expressions": 0,
50 |     "import/extensions": 0,
51 |     "import/no-extraneous-dependencies": 0,
52 |     "import/no-unresolved": 0,
53 |     "import/prefer-default-export": 0,
54 |     "linebreak-style": ["error", "windows"]
55 |   }
56 | }


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
 1 | # -----------------------------
 2 | # General
 3 | # -----------------------------
 4 | 
 5 | # AUTO-DETECT - Handle line endings automatically for files detected
 6 | # as text and leave all files detected as binary untouched.
 7 | # This will handle all files NOT defined below.
 8 | 
 9 | * text=auto
10 | 
11 | 
12 | 
13 | # -----------------------------
14 | # Source Code
15 | # -----------------------------
16 | 
17 | *.css    text
18 | *.html   text
19 | *.js     text
20 | *.json   text
21 | *.scss   text
22 | 
23 | 
24 | 
25 | # -----------------------------
26 | # Documentation
27 | # -----------------------------
28 | 
29 | *.md         text
30 | CHANGELOG    text
31 | LICENSE      text
32 | 
33 | 
34 | 
35 | # -----------------------------
36 | # Configs
37 | # -----------------------------
38 | 
39 | .editorconfig  text
40 | .gitattributes text
41 | .gitconfig     text
42 | .gitignore     text
43 | .babelrc       text
44 | .stylelintrc   text
45 | .eslintrc      text
46 | .yarnclean     text
47 | *.yml          text
48 | browserlist    text
49 | yarn.lock      text
50 | 
51 | 
52 | 
53 | # -----------------------------
54 | # Graphics
55 | # -----------------------------
56 | 
57 | *.gif  binary
58 | *.ico  binary
59 | *.jpg  binary
60 | *.jpeg binary
61 | *.png  binary
62 | *.svg  text
63 | 
64 | 
65 | 
66 | # -----------------------------
67 | # Fonts
68 | # -----------------------------
69 | 
70 | *.ttf   binary
71 | *.eot   binary
72 | *.otf   binary
73 | *.woff  binary
74 | *.woff2 binary
75 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE.md:
--------------------------------------------------------------------------------
 1 | <!--
 2 | PLEASE HELP US PROCESS GITHUB ISSUES FASTER BY PROVIDING THE FOLLOWING INFORMATION.
 3 | ISSUES MISSING IMPORTANT INFORMATION MAY BE CLOSED WITHOUT INVESTIGATION.
 4 | 
 5 | PLEASE SEARCH GITHUB FOR A SIMILAR ISSUE OR PR BEFORE SUBMITTING 
 6 | -->
 7 | 
 8 | <!-- DON'T FORGET REMOVE UNNECESSARY -->
 9 | <h1>Bug report</h1>
10 | <h1>Feature request</h1>
11 | <h1>Support request</h1>
12 | <h1>Documentation issue</h1>
13 | 
14 | <!-- Optionally describe the motivation or the concrete use case -->
15 | 
16 | # Current behavior
17 | <!-- Describe how the issue manifests -->
18 | 
19 | # Expected behavior 
20 | <!-- Describe what the desired behavior would be. -->
21 | <!-- For bug reports please provide the *STEPS TO REPRODUCE* and if possible a *MINIMAL DEMO* of the problem -->
22 | 
23 | # Environment
24 | Platform: 
25 | Browser: 
26 | 
27 | For building issues:
28 | Node:           
29 | NPM:          
30 | <!-- run `node --version` -->
31 | <!-- run `npm --version` -->
32 | 


--------------------------------------------------------------------------------
/.github/workflows/merge.yml:
--------------------------------------------------------------------------------
 1 | name: Merge checks
 2 | 
 3 | on:  
 4 |   pull_request:
 5 |     branches:
 6 |       - master
 7 | 
 8 | jobs:
 9 |   build:
10 |     runs-on: ubuntu-latest
11 | 
12 |     strategy:
13 |       matrix:
14 |         node-version: [20.x]
15 |     
16 |     steps:
17 |     - uses: actions/checkout@v3
18 | 
19 |     - name: Use Node.js ${{ matrix.node-version }}
20 |       uses: actions/setup-node@v3
21 |       with:
22 |         node-version: ${{ matrix.node-version }}
23 | 
24 |     - name: Build
25 |       run: |
26 |         npm install
27 |         npm run build
28 |     
29 |     - name: Get version
30 |       run: echo "::set-output name=version::v$(./ci/getVersion.sh)"
31 |       id: version
32 | 
33 |     - name: Verify version
34 |       run: |
35 |         ./ci/verifyVersion.sh ${{ steps.version.outputs.version }}


--------------------------------------------------------------------------------
/.github/workflows/release.yml:
--------------------------------------------------------------------------------
 1 | name: NodeJS with Webpack
 2 | 
 3 | on:
 4 |   push:
 5 |     branches: [ "master" ]
 6 | 
 7 | jobs:
 8 |   build:
 9 |     runs-on: ubuntu-latest
10 | 
11 |     strategy:
12 |       matrix:
13 |         node-version: [20.x]
14 |     
15 |     steps:
16 |     - uses: actions/checkout@v3
17 | 
18 |     - name: Use Node.js ${{ matrix.node-version }}
19 |       uses: actions/setup-node@v3
20 |       with:
21 |         node-version: ${{ matrix.node-version }}
22 | 
23 |     - name: Build
24 |       run: |
25 |         npm install
26 |         npm run release:minified
27 |         zip -r -j static_minified.zip dist/*
28 |         npm run release:unminified
29 |         zip -r -j static_unminified.zip dist/*
30 |     
31 |     - name: Get version
32 |       run: echo "::set-output name=version::v$(./ci/getVersion.sh)"
33 |       id: version
34 | 
35 |     - name: Verify version
36 |       run: |
37 |         ./ci/verifyVersion.sh ${{ steps.version.outputs.version }}
38 | 
39 |     # Verify changelog has entry with new version
40 |     - name: Release
41 |       uses: softprops/action-gh-release@v1
42 |       with:
43 |         name: ${{ steps.version.outputs.version }}
44 |         tag_name: ${{ steps.version.outputs.version }}
45 |         files: |
46 |           static_minified.zip
47 |           static_unminified.zip
48 |         fail_on_unmatched_files: true
49 |         prerelease: false
50 |         draft: false


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # ----------------------------
 2 | # Generated Files & Folders
 3 | # ----------------------------
 4 | 
 5 | # [1] : Windows thumbnail cache files.
 6 | # [2] : Folder config file.
 7 | # [3] : Recycle Bin used on file shares.
 8 | 
 9 | .idea
10 | .DS_Store
11 | .sass-cache
12 | Thumbs.db     # [1]
13 | ehthumbs.db   # [1]
14 | Desktop.ini   # [2]
15 | $RECYCLE.BIN  # [3]
16 | 
17 | # ----------------------------
18 | # Packaging
19 | # ----------------------------
20 | 
21 | logs
22 | *.log
23 | npm-debug.log*
24 | node_modules
25 | yarn.lock
26 | 
27 | # ----------------------------
28 | # Project Folders
29 | # ----------------------------
30 | 
31 | build/
32 | dist/
33 | 


--------------------------------------------------------------------------------
/.nvmrc:
--------------------------------------------------------------------------------
1 | 20
2 | 


--------------------------------------------------------------------------------
/.stylelintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "stylelint-config-standard",
3 |   "rules": {
4 |     "at-rule-no-unknown": null,
5 |     "at-rule-empty-line-before": null,
6 |     "selector-list-comma-newline-after": null,
7 |     "block-opening-brace-space-before": null
8 |   }
9 | }


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | # Changelog
 2 | 
 3 | ## [2.1.0]
 4 | - Upgraded all dependencies
 5 | 
 6 | ## [2.0.0]
 7 | 
 8 | ### Changed
 9 | - Upgrade to Bootstrap 5
10 | 
11 | ## [1.1.0]
12 | 
13 | ### Changed
14 | - Upgrade to webpack 5
15 | 
16 | ## [1.0.0]
17 | 
18 | ### Added
19 | - Intial release
20 | 


--------------------------------------------------------------------------------
/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 support at colorlib.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 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 Aigars Silkalns
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in 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 | # Adminator Bootstrap 5 Admin Template
  2 | **Adminator** is a responsive Bootstrap 5 Admin Template. It provides you with a collection of ready to use code snippets and utilities, custom pages, a collection of applications and some useful widgets. Preview of this awesome admin template available here: https://colorlib.com/polygon/adminator/index.html
  3 | 
  4 | # Preview
  5 | 
  6 | ### Screenshot
  7 | 
  8 | ![Adminator admin dashboard template preview](https://colorlib.com/wp/wp-content/uploads/sites/2/adminator-free-admin-dashboard-template.jpg)
  9 | 
 10 | ### Demo Site: [Here](https://colorlib.com/polygon/adminator/index.html)
 11 | 
 12 | ## TOC
 13 | - [Getting Started](#getting-started)
 14 |   - [Prerequisites](#prerequisites)
 15 |   - [Installing & Local Development](#installing--local-development)
 16 | - [Adminator for other platforms and frameworks](#adminator-for-other-platforms-and-frameworks)
 17 | - [Files/Folder Structure](#filesfolders-structure)
 18 | - [Deployment](#deployment)
 19 | - [Built With](#built-with)
 20 | - [Changelog](#changelog)
 21 | - [Authors](#authors)
 22 | - [License](#license)
 23 | 
 24 | 
 25 | ## Getting Started
 26 | In order to run **Adminator** on your local machine all what you need to do is to have the prerequisites stated below installed on your machine and follow the installation steps down below. Prebuilt static assets can be found under [releases](https://github.com/puikinsh/Adminator-admin-dashboard/releases).
 27 | 
 28 | #### Prerequisites
 29 |   - Node.js 14+
 30 |   - Yarn or NPM
 31 |   - Git
 32 |   - libpng-dev *linux only*
 33 | 
 34 | #### Installing & Local Development
 35 | Start by typing the following commands in your terminal in order to get **Adminator** full package on your machine and starting a local development server with live reload feature.
 36 | 
 37 | ```
 38 | > git clone https://github.com/puikinsh/Adminator-admin-dashboard.git adminator
 39 | > cd adminator
 40 | > npm install
 41 | > npm run dev
 42 | ```
 43 | ## Adminator for other platforms and frameworks
 44 | * [Adminator right to left](https://github.com/mortezakarimi/Adminator-admin-dashboard-rtl) Adminator modified to work with right to left languages like Persian and Arabic
 45 | 
 46 | ## Files/Folders Structure
 47 | Here is a brief explanation of the template folder structure and some of its main files usage:
 48 | 
 49 | ```
 50 | └── src                         # Contains all template source files.
 51 | │   └── assets                  # Contains JS, CSS, images and icon fonts.
 52 | │   │   └── scripts             # Contains all JavaScript files.
 53 | │   │   │   └── charts          # Chart.js, Sparkline & Pie Chart plugins init.
 54 | │   │   │   └── chat            # All chat app JS code.
 55 | │   │   │   └── constants       # Template constant values like color values.
 56 | │   │   │   └── datatable       # Date table plugin init.
 57 | │   │   │   └── datepicker      # Bootstrap datepicker init.
 58 | │   │   │   └── email           # All email app code.
 59 | │   │   │   └── fullcalendar    # Fullcalendar plugin init.
 60 | │   │   │   └── googleMaps      # Google maps API integration code.
 61 | │   │   │   └── masonry         # Masonry layout code.
 62 | │   │   │   └── popover         # Bootstrap popover plugin init.
 63 | │   │   │   └── scrollbar       # Perfect scrollbar plugin init.
 64 | │   │   │   └── search          # Topbar toggle search init.
 65 | │   │   │   └── sidebar         # Sidebar JS code.
 66 | │   │   │   └── skycons         # Animated icons plugin init.
 67 | │   │   │   └── utils           # Basic utils used for proper rendering.
 68 | │   │   │   └── vectorMaps      # Vector maps plugin init.
 69 | │   │   │   └── index.js        # Indicator file.
 70 | │   │   │
 71 | │   │   └── static              # Contains the non-code files.
 72 | │   │   │   └── fonts           # Contains icon fonts.
 73 | │   │   │   └── images          # Contains all template images/svg.
 74 | │   │   │
 75 | │   │   └── styles              # Contains all SCSS files.
 76 | │   │       └── spec            # Contains custom SCSS files.
 77 | │   │       │   └── components  # Contains all template components.
 78 | │   │       │   └── generic     # Contains basic scaffolding styles.
 79 | │   │       │   └── screens     # Contains views specific styles.
 80 | │   │       │   └── settings    # Contains all template variables.
 81 | │   │       │   └── tools       # Contains all mixins.
 82 | │   │       │   └── utils       # Contains helper classes.
 83 | │   │       │   └── index.scss  # Indicator file.
 84 | │   │       │
 85 | │   │       └── vendor          # Contains all plugin files & custom styles.
 86 | │   │       └── index.scss      # Indicator file.
 87 | │   │
 88 | │   └── *.html                  # All HTML pages files .
 89 | └── webpack                     # Contains Webpack init code.
 90 | │   └── plugins                 # Contains all Webpack plugins config.
 91 | │   └── rules                   # Contains Loaders config code.
 92 | │   └── config.js               # Contains Webpack config object.
 93 | │   └── devServer.js            # Webpack dev server config code.
 94 | │   └── manifest.js             # All build system constants.
 95 | │
 96 | └── .babelrc                    # Babel ES6 Transpiler.
 97 | └── .editorconfig               # Keep same coding styles between code editors.
 98 | └── .eslintrc.yml               # JavaScript Linting.
 99 | └── .gitattributes              # Git Attributes.
100 | └── .gitignore                  # Ignored files in Git.
101 | └── .stylelintrc.yml            # SCSS/CSS Linting.
102 | └── browserslist                # Supported Browsers.
103 | └── CHANGELOG.md                # Versioning.
104 | └── package.json                # Package metadata.
105 | └── README.md                   # Manual file.
106 | └── webpack.config.js           # Webpack main config file.
107 | └── yarn.lock                   # Yarn metadata.
108 | ```
109 | 
110 | ## Deployment
111 | In deployment process, you have two commands:
112 | 
113 | 1. Build command
114 | Used to generate the final result of compiling src files into build folder. This can be achieved by running the following command:
115 | ```
116 | > npm run build
117 | ```
118 | 
119 | 2. Preview command
120 | Used to create a local dev server in order to preview the final output of build process. This can be achieved by running the following command:
121 | ```
122 | > npm run preview
123 | ```
124 | 
125 | ## Built With
126 | - [Babel](https://babeljs.io/)
127 | - [Webpack](https://webpack.js.org/)
128 | - [Eslint](https://eslint.org/)
129 | - [Sass](http://sass-lang.com/)
130 | - [Postcss](http://postcss.org/)
131 | - [Stylelint](https://stylelint.io/)
132 | - [Bootstrap](http://getbootstrap.com/)
133 | - [Chart.js](http://www.chartjs.org/)
134 | - [Datatables](https://datatables.net/)
135 | - [Easy Pie Chart](http://rendro.github.io/easy-pie-chart/)
136 | - [Fullcalendar](https://fullcalendar.io/)
137 | - [Jquery](https://jquery.com/)
138 | - [Jquery Sparkline](https://omnipotent.net/jquery.sparkline/)
139 | - [Jvectormap](http://jvectormap.com/)
140 | - [Load Google Maps API](https://github.com/yuanqing/load-google-maps-api)
141 | - [Lodash](https://lodash.com/)
142 | - [Masonry](https://masonry.desandro.com/)
143 | - [Moment](https://momentjs.com/)
144 | - [Perfect Scrollbar](https://github.com/utatti/perfect-scrollbar)
145 | - [Skycons](https://darkskyapp.github.io/skycons/)
146 | - [Fontawesome](http://fontawesome.io/)
147 | - [Themify Icons](https://themify.me/themify-icons)
148 | - [Roboto Font](https://fonts.google.com/specimen/Roboto)
149 | - [Bootstrap Datepicker](https://bootstrap-datepicker.readthedocs.io/en/latest/)
150 | 
151 | ## Changelog
152 | #### V 1.0.0
153 | Initial Release
154 | 
155 | ## Authors
156 | [Colorlib](https://colorlib.com)
157 | 
158 | ## More info
159 | - [Bootstrap Dashboards](https://colorlib.com/wp/free-bootstrap-admin-dashboard-templates/)
160 | - [Bootstrap Templates](https://colorlib.com/wp/free-bootstrap-templates/)
161 | - [HTML Templates](https://colorlib.com/wp/free-html-website-templates/)
162 | - [Free Admin Dashboards](https://colorlib.com/wp/free-html5-admin-dashboard-templates/)
163 | - [Website Templates](https://colorlib.com/wp/templates/)
164 | - [Free CSS Templates](https://colorlib.com/wp/free-css-website-templates/)
165 | - [WordPress Themes](https://colorlib.com/wp/free-wordpress-themes/)
166 | 
167 | ## License
168 | 
169 | Adminator is licensed under The MIT License (MIT). Which means that you can use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the final products. But you always need to state that Colorlib is the original author of this template.
170 | 


--------------------------------------------------------------------------------
/browserslist:
--------------------------------------------------------------------------------
 1 | # https://github.com/browserslist/browserslist#readme
 2 | 
 3 | >= 0.5%
 4 | last 2 major versions
 5 | not dead
 6 | Chrome >= 60
 7 | Firefox >= 60
 8 | Firefox ESR
 9 | iOS >= 12
10 | Safari >= 12
11 | not Explorer <= 11


--------------------------------------------------------------------------------
/ci/getVersion.sh:
--------------------------------------------------------------------------------
1 | echo $(sed 's/.*"version": "\(.*\)".*/\1/;t;d' ./package.json)


--------------------------------------------------------------------------------
/ci/verifyVersion.sh:
--------------------------------------------------------------------------------
1 | VERSION=$1
2 | TAG_EXISTS=$(git ls-remote --tags origin $VERSION | wc -l)
3 | 
4 | if [ $TAG_EXISTS -eq "1" ]; then
5 |    echo "The tag '$VERSION' already exists. Please update version in package.json.";
6 |    exit 1;
7 | fi
8 | 
9 | echo "The tag '$VERSION' does not exist - success.";


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "adminator",
 3 |   "version": "2.1.0",
 4 |   "private": true,
 5 |   "description": "HTML Admin Template",
 6 |   "scripts": {
 7 |     "start": "webpack server",
 8 |     "dev": "webpack-dashboard -t 'Project' -- webpack server",
 9 |     "clean": "shx rm -rf ./dist",
10 |     "build": "npm run clean && cross-env webpack",
11 |     "release:minified": "npm run clean && NODE_ENV=production MINIFY=true cross-env webpack",
12 |     "release:unminified": "npm run clean && NODE_ENV=production MINIFY=false cross-env webpack",
13 |     "preview": "cross-env webpack server",
14 |     "lint:js": "eslint ./src ./webpack ./*.js -f table --ext .js --ext .jsx",
15 |     "lint:scss": "stylelint ./src/**/*.scss --syntax scss",
16 |     "lint": "npm run lint:js && npm run lint:scss"
17 |   },
18 |   "devDependencies": {
19 |     "@babel/core": "^7.24.5",
20 |     "@babel/eslint-parser": "^7.24.5",
21 |     "@babel/plugin-proposal-class-properties": "^7.13.0",
22 |     "@babel/plugin-proposal-object-rest-spread": "^7.13.8",
23 |     "@babel/plugin-transform-runtime": "^7.24.3",
24 |     "@babel/preset-env": "^7.24.5",
25 |     "@babel/runtime": "^7.24.5",
26 |     "babel-core": "^6.26.3",
27 |     "babel-loader": "^9.1.3",
28 |     "babel-preset-env": "^1.7.0",
29 |     "babel-preset-stage-0": "^6.24.1",
30 |     "case-sensitive-paths-webpack-plugin": "^2.4.0",
31 |     "copy-webpack-plugin": "^12.0.2",
32 |     "cross-env": "^7.0.3",
33 |     "css-loader": "^7.1.1",
34 |     "css-minimizer-webpack-plugin": "^7.0.0",
35 |     "eslint": "^8.55.0",
36 |     "eslint-config-airbnb-base": "^15.0.0",
37 |     "eslint-plugin-import": "^2.29.1",
38 |     "html-webpack-plugin": "^5.6.0",
39 |     "imagemin-webpack-plugin": "^2.4.2",
40 |     "mini-css-extract-plugin": "^2.9.0",
41 |     "postcss": "^8.4.38",
42 |     "postcss-loader": "^8.1.1",
43 |     "postcss-preset-env": "^9.5.13",
44 |     "sass": "^1.77.1",
45 |     "sass-loader": "^14.2.1",
46 |     "shx": "^0.3.3",
47 |     "style-loader": "^4.0.0",
48 |     "stylelint": "^16.5.0",
49 |     "stylelint-config-standard": "^36.0.0",
50 |     "webpack": "^5.91.0",
51 |     "webpack-cli": "^5.1.4",
52 |     "webpack-dashboard": "^3.3.1",
53 |     "webpack-dev-server": "^5.0.4"
54 |   },
55 |   "dependencies": {
56 |     "@fullcalendar/core": "^6.1.11",
57 |     "@fullcalendar/daygrid": "^6.1.11",
58 |     "@fullcalendar/interaction": "^6.1.11",
59 |     "@fullcalendar/list": "^6.1.11",
60 |     "@fullcalendar/timegrid": "^6.1.11",
61 |     "@popperjs/core": "^2.11.6",
62 |     "babel-polyfill": "^6.26.0",
63 |     "bootstrap": "^5.3.3",
64 |     "bootstrap-datepicker": "^1.9.0",
65 |     "brand-colors": "^2.1.1",
66 |     "chart.js": "^4.4.2",
67 |     "datatables": "^1.10.18",
68 |     "easy-pie-chart": "^2.1.7",
69 |     "file-loader": "^6.2.0",
70 |     "jquery": "^3.6.0",
71 |     "jquery-sparkline": "^2.4.0",
72 |     "jvectormap": "^2.0.4",
73 |     "load-google-maps-api": "^2.0.2",
74 |     "lodash": "^4.17.21",
75 |     "masonry-layout": "^4.2.2",
76 |     "moment": "^2.30.1",
77 |     "perfect-scrollbar": "^1.5.1",
78 |     "skycons": "^1.0.0"
79 |   }
80 | }
81 | 


--------------------------------------------------------------------------------
/src/404.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 6 |     <title>404</title>
 7 |   </head>
 8 |   <body class="app">
 9 |     <div class='pos-a t-0 l-0 bgc-white w-100 h-100 d-f fxd-r fxw-w ai-c jc-c pos-r p-30'>
10 |       <div class='mR-60'>
11 |         <img alt='#' src='assets/static/images/404.png' />
12 |       </div>
13 | 
14 |       <div class='d-f jc-c fxd-c'>
15 |         <h1 class='mB-30 fw-900 lh-1 c-red-500' style="font-size: 60px;">404</h1>
16 |         <h3 class='mB-10 fsz-lg c-grey-900 tt-c'>Oops Page Not Found</h3>
17 |         <p class='mB-30 fsz-def c-grey-700'>The page you are looking for does not exist or has been moved.</p>
18 |         <div>
19 |           <a href="index.html" type='primary' class='btn btn-primary'>Go to Home</a>
20 |         </div>
21 |       </div>
22 |     </div>
23 |   </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/src/500.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 6 |     <title>500</title>
 7 |   </head>
 8 |   <body class="app">
 9 |     <div class='pos-a t-0 l-0 bgc-white w-100 h-100 d-f fxd-r fxw-w ai-c jc-c pos-r p-30'>
10 |       <div class='mR-60'>
11 |         <img alt='#' src='assets/static/images/500.png' />
12 |       </div>
13 | 
14 |       <div class='d-f jc-c fxd-c'>
15 |         <h1 class='mB-30 fw-900 lh-1 c-red-500' style="font-size: 60px;">500</h1>
16 |         <h3 class='mB-10 fsz-lg c-grey-900 tt-c'>Internal server error</h3>
17 |         <p class='mB-30 fsz-def c-grey-700'>Something goes wrong with our servers, please try again later.</p>
18 |         <div>
19 |           <a href="index.html" type='primary' class='btn btn-primary'>Go to Home</a>
20 |         </div>
21 |       </div>
22 |     </div>
23 |   </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/src/assets/scripts/charts/chartJS/index.js:
--------------------------------------------------------------------------------
  1 | import Chart from 'chart.js/auto';
  2 | import { COLORS } from '../../constants/colors';
  3 | 
  4 | export default (function () {
  5 |   // ------------------------------------------------------
  6 |   // @Line Charts
  7 |   // ------------------------------------------------------
  8 | 
  9 |   const lineChartBox = document.getElementById('line-chart');
 10 | 
 11 |   if (lineChartBox) {
 12 |     const lineCtx = lineChartBox.getContext('2d');
 13 |     lineChartBox.height = 80;
 14 | 
 15 |     new Chart(lineCtx, {
 16 |       type: 'line',
 17 |       data: {
 18 |         labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
 19 |         datasets: [{
 20 |           label                : 'Series A',
 21 |           backgroundColor      : 'rgba(237, 231, 246, 0.5)',
 22 |           borderColor          : COLORS['deep-purple-500'],
 23 |           pointBackgroundColor : COLORS['deep-purple-700'],
 24 |           borderWidth          : 2,
 25 |           data                 : [60, 50, 70, 60, 50, 70, 60],
 26 |         }, {
 27 |           label                : 'Series B',
 28 |           backgroundColor      : 'rgba(232, 245, 233, 0.5)',
 29 |           borderColor          : COLORS['blue-500'],
 30 |           pointBackgroundColor : COLORS['blue-700'],
 31 |           borderWidth          : 2,
 32 |           data                 : [70, 75, 85, 70, 75, 85, 70],
 33 |         }],
 34 |       },
 35 | 
 36 |       options: {
 37 |         legend: {
 38 |           display: false,
 39 |         },
 40 |       },
 41 | 
 42 |     });
 43 |   }
 44 | 
 45 |   // ------------------------------------------------------
 46 |   // @Bar Charts
 47 |   // ------------------------------------------------------
 48 | 
 49 |   const barChartBox = document.getElementById('bar-chart');
 50 | 
 51 |   if (barChartBox) {
 52 |     const barCtx = barChartBox.getContext('2d');
 53 | 
 54 |     new Chart(barCtx, {
 55 |       type: 'bar',
 56 |       data: {
 57 |         labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
 58 |         datasets: [{
 59 |           label           : 'Dataset 1',
 60 |           backgroundColor : COLORS['deep-purple-500'],
 61 |           borderColor     : COLORS['deep-purple-800'],
 62 |           borderWidth     : 1,
 63 |           data            : [10, 50, 20, 40, 60, 30, 70],
 64 |         }, {
 65 |           label           : 'Dataset 2',
 66 |           backgroundColor : COLORS['light-blue-500'],
 67 |           borderColor     : COLORS['light-blue-800'],
 68 |           borderWidth     : 1,
 69 |           data            : [10, 50, 20, 40, 60, 30, 70],
 70 |         }],
 71 |       },
 72 | 
 73 |       options: {
 74 |         responsive: true,
 75 |         legend: {
 76 |           position: 'bottom',
 77 |         },
 78 |       },
 79 |     });
 80 |   }
 81 | 
 82 |   // ------------------------------------------------------
 83 |   // @Area Charts
 84 |   // ------------------------------------------------------
 85 | 
 86 |   const areaChartBox = document.getElementById('area-chart');
 87 | 
 88 |   if (areaChartBox) {
 89 |     const areaCtx = areaChartBox.getContext('2d');
 90 | 
 91 |     new Chart(areaCtx, {
 92 |       type: 'line',
 93 |       data: {
 94 |         labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
 95 |         datasets: [{
 96 |           backgroundColor : 'rgba(3, 169, 244, 0.5)',
 97 |           borderColor     : COLORS['light-blue-800'],
 98 |           data            : [10, 50, 20, 40, 60, 30, 70],
 99 |           label           : 'Dataset',
100 |           fill            : 'start',
101 |         }],
102 |       },
103 |     });
104 |   }
105 | 
106 |   // ------------------------------------------------------
107 |   // @Scatter Charts
108 |   // ------------------------------------------------------
109 | 
110 |   const scatterChartBox = document.getElementById('scatter-chart');
111 | 
112 |   if (scatterChartBox) {
113 |     const scatterCtx = scatterChartBox.getContext('2d');
114 | 
115 |     new Chart(scatterCtx, {
116 |       type: 'scatter',
117 |       data: {
118 |         datasets: [{
119 |           label           : 'My First dataset',
120 |           borderColor     : COLORS['red-500'],
121 |           backgroundColor : COLORS['red-500'],
122 |           data: [
123 |             { x: 10, y: 20 },
124 |             { x: 30, y: 40 },
125 |             { x: 50, y: 60 },
126 |             { x: 70, y: 80 },
127 |             { x: 90, y: 100 },
128 |             { x: 110, y: 120 },
129 |             { x: 130, y: 140 },
130 |           ],
131 |         }, {
132 |           label           : 'My Second dataset',
133 |           borderColor     : COLORS['green-500'],
134 |           backgroundColor : COLORS['green-500'],
135 |           data: [
136 |             { x: 150, y: 160 },
137 |             { x: 170, y: 180 },
138 |             { x: 190, y: 200 },
139 |             { x: 210, y: 220 },
140 |             { x: 230, y: 240 },
141 |             { x: 250, y: 260 },
142 |             { x: 270, y: 280 },
143 |           ],
144 |         }],
145 |       },
146 |     });
147 |   }
148 | }())
149 | 


--------------------------------------------------------------------------------
/src/assets/scripts/charts/easyPieChart/index.js:
--------------------------------------------------------------------------------
 1 | import * as $ from 'jquery';
 2 | import 'easy-pie-chart/dist/jquery.easypiechart.min.js';
 3 | 
 4 | export default (function () {
 5 |   if ($('.easy-pie-chart').length > 0) {
 6 |     $('.easy-pie-chart').easyPieChart({
 7 |       onStep(from, to, percent) {
 8 |         this.el.children[0].innerHTML = `${Math.round(percent)} %`;
 9 |       },
10 |     });
11 |   }
12 | }())
13 | 
14 | 


--------------------------------------------------------------------------------
/src/assets/scripts/charts/index.js:
--------------------------------------------------------------------------------
1 | import './chartJS';
2 | import './easyPieChart';
3 | import './sparkline';
4 | 


--------------------------------------------------------------------------------
/src/assets/scripts/charts/sparkline/index.js:
--------------------------------------------------------------------------------
  1 | import * as $ from 'jquery';
  2 | import 'jquery-sparkline';
  3 | import { debounce } from 'lodash';
  4 | import { COLORS } from '../../constants/colors';
  5 | 
  6 | export default (function () {
  7 |   // ------------------------------------------------------
  8 |   // @Dashboard Sparklines
  9 |   // ------------------------------------------------------
 10 | 
 11 |   const drawSparklines = () => {
 12 |     if ($('#sparklinedash').length > 0) {
 13 |       $('#sparklinedash').sparkline([0, 5, 6, 10, 9, 12, 4, 9], {
 14 |         type: 'bar',
 15 |         height: '20',
 16 |         barWidth: '3',
 17 |         resize: true,
 18 |         barSpacing: '3',
 19 |         barColor: '#4caf50',
 20 |       });
 21 |     }
 22 | 
 23 |     if ($('#sparklinedash2').length > 0) {
 24 |       $('#sparklinedash2').sparkline([0, 5, 6, 10, 9, 12, 4, 9], {
 25 |         type: 'bar',
 26 |         height: '20',
 27 |         barWidth: '3',
 28 |         resize: true,
 29 |         barSpacing: '3',
 30 |         barColor: '#9675ce',
 31 |       });
 32 |     }
 33 | 
 34 |     if ($('#sparklinedash3').length > 0) {
 35 |       $('#sparklinedash3').sparkline([0, 5, 6, 10, 9, 12, 4, 9], {
 36 |         type: 'bar',
 37 |         height: '20',
 38 |         barWidth: '3',
 39 |         resize: true,
 40 |         barSpacing: '3',
 41 |         barColor: '#03a9f3',
 42 |       });
 43 |     }
 44 | 
 45 |     if ($('#sparklinedash4').length > 0) {
 46 |       $('#sparklinedash4').sparkline([0, 5, 6, 10, 9, 12, 4, 9], {
 47 |         type: 'bar',
 48 |         height: '20',
 49 |         barWidth: '3',
 50 |         resize: true,
 51 |         barSpacing: '3',
 52 |         barColor: '#f96262',
 53 |       });
 54 |     }
 55 |   };
 56 | 
 57 |   drawSparklines();
 58 | 
 59 |   // Redraw sparklines on resize
 60 |   $(window).resize(debounce(drawSparklines, 150));
 61 | 
 62 |   // ------------------------------------------------------
 63 |   // @Other Sparklines
 64 |   // ------------------------------------------------------
 65 | 
 66 |   $('#sparkline').sparkline(
 67 |     [5, 6, 7, 9, 9, 5, 3, 2, 2, 4, 6, 7],
 68 |     {
 69 |       type: 'line',
 70 |       resize: true,
 71 |       height: '20',
 72 |     }
 73 |   );
 74 | 
 75 |   $('#compositebar').sparkline(
 76 |     'html',
 77 |     {
 78 |       type: 'bar',
 79 |       resize: true,
 80 |       barColor: '#aaf',
 81 |       height: '20',
 82 |     }
 83 |   );
 84 | 
 85 |   $('#compositebar').sparkline(
 86 |     [4, 1, 5, 7, 9, 9, 8, 7, 6, 6, 4, 7, 8, 4, 3, 2, 2, 5, 6, 7],
 87 |     {
 88 |       composite: true,
 89 |       fillColor: false,
 90 |       lineColor: 'red',
 91 |       resize: true,
 92 |       height: '20',
 93 |     }
 94 |   );
 95 | 
 96 |   $('#normalline').sparkline(
 97 |     'html',
 98 |     {
 99 |       fillColor: false,
100 |       normalRangeMin: -1,
101 |       resize: true,
102 |       normalRangeMax: 8,
103 |       height: '20',
104 |     }
105 |   );
106 | 
107 |   $('.sparktristate').sparkline(
108 |     'html',
109 |     {
110 |       type: 'tristate',
111 |       resize: true,
112 |       height: '20',
113 |     }
114 |   );
115 | 
116 |   $('.sparktristatecols').sparkline(
117 |     'html',
118 |     {
119 |       type: 'tristate',
120 |       colorMap: {
121 |         '-2': '#fa7',
122 |         resize: true,
123 |         '2': '#44f',
124 |         height: '20',
125 |       },
126 |     }
127 |   );
128 | 
129 |   const values    = [5, 4, 5, -2, 0, 3, -5, 6, 7, 9, 9, 5, -3, -2, 2, -4];
130 |   const valuesAlt = [1, 1, 0, 1, -1, -1, 1, -1, 0, 0, 1, 1];
131 | 
132 |   $('.sparkline').sparkline(values, {
133 |     type: 'line',
134 |     barWidth: 4,
135 |     barSpacing: 5,
136 |     fillColor: '',
137 |     lineColor: COLORS['red-500'],
138 |     lineWidth: 2,
139 |     spotRadius: 3,
140 |     spotColor: COLORS['red-500'],
141 |     maxSpotColor: COLORS['red-500'],
142 |     minSpotColor: COLORS['red-500'],
143 |     highlightSpotColor: COLORS['red-500'],
144 |     highlightLineColor: '',
145 |     tooltipSuffix: ' Bzzt',
146 |     tooltipPrefix: 'Hello ',
147 |     width: 100,
148 |     height: undefined,
149 |     barColor: '9f0',
150 |     negBarColor: 'ff0',
151 |     stackedBarColor: ['ff0', '9f0', '999', 'f60'],
152 |     sliceColors: ['ff0', '9f0', '000', 'f60'],
153 |     offset: '30',
154 |     borderWidth: 1,
155 |     borderColor: '000',
156 |   });
157 | 
158 |   $('.sparkbar').sparkline(values, {
159 |     type: 'bar',
160 |     barWidth: 4,
161 |     barSpacing: 1,
162 |     fillColor: '',
163 |     lineColor: COLORS['deep-purple-500'],
164 |     tooltipSuffix: 'Celsius',
165 |     width: 100,
166 |     barColor: '39f',
167 |     negBarColor: COLORS['deep-purple-500'],
168 |     stackedBarColor: ['ff0', '9f0', '999', 'f60'],
169 |     sliceColors: ['ff0', '9f0', '000', 'f60'],
170 |     offset: '30',
171 |     borderWidth: 1,
172 |     borderColor: '000',
173 |   });
174 | 
175 |   $('.sparktri').sparkline(valuesAlt, {
176 |     type: 'tristate',
177 |     barWidth: 4,
178 |     barSpacing: 1,
179 |     fillColor: '',
180 |     lineColor: COLORS['light-blue-500'],
181 |     tooltipSuffix: 'Celsius',
182 |     width: 100,
183 |     barColor: COLORS['light-blue-500'],
184 |     posBarColor: COLORS['light-blue-500'],
185 |     negBarColor: 'f90',
186 |     zeroBarColor: '000',
187 |     stackedBarColor: ['ff0', '9f0', '999', 'f60'],
188 |     sliceColors: ['ff0', '9f0', '000', 'f60'],
189 |     offset: '30',
190 |     borderWidth: 1,
191 |     borderColor: '000',
192 |   });
193 | 
194 |   $('.sparkdisc').sparkline(values, {
195 |     type: 'discrete',
196 |     barWidth: 4,
197 |     barSpacing: 5,
198 |     fillColor: '',
199 |     lineColor: '9f0',
200 |     tooltipSuffix: 'Celsius',
201 |     width: 100,
202 |     barColor: '9f0',
203 | 
204 |     negBarColor: 'f90',
205 | 
206 |     stackedBarColor: ['ff0', '9f0', '999', 'f60'],
207 |     sliceColors: ['ff0', '9f0', '000', 'f60'],
208 |     offset: '30',
209 |     borderWidth: 1,
210 |     borderColor: '000',
211 |   });
212 | 
213 |   $('.sparkbull').sparkline(values, {
214 |     type: 'bullet',
215 |     barWidth: 4,
216 |     barSpacing: 5,
217 |     fillColor: '',
218 |     lineColor: COLORS['amber-500'],
219 |     tooltipSuffix: 'Celsius',
220 |     height: 'auto',
221 |     width: 'auto',
222 |     targetWidth: 'auto',
223 |     barColor: COLORS['amber-500'],
224 |     negBarColor: 'ff0',
225 |     stackedBarColor: ['ff0', '9f0', '999', 'f60'],
226 |     sliceColors: ['ff0', '9f0', '000', 'f60'],
227 |     offset: '30',
228 |     borderWidth: 1,
229 |     borderColor: '000',
230 |   });
231 | 
232 |   $('.sparkbox').sparkline(values, {
233 |     type: 'box',
234 |     barWidth: 4,
235 |     barSpacing: 5,
236 |     fillColor: '',
237 |     lineColor: '9f0',
238 |     tooltipSuffix: 'Celsius',
239 |     width: 100,
240 |     barColor: '9f0',
241 |     negBarColor: 'ff0',
242 |     stackedBarColor: ['ff0', '9f0', '999', 'f60'],
243 |     sliceColors: ['ff0', '9f0', '000', 'f60'],
244 |     offset: '30',
245 |     borderWidth: 1,
246 |     borderColor: '000',
247 |   });
248 | }())
249 | 


--------------------------------------------------------------------------------
/src/assets/scripts/chat/index.js:
--------------------------------------------------------------------------------
1 | import * as $ from 'jquery';
2 | 
3 | export default (function () {
4 |   $('#chat-sidebar-toggle').on('click', e => {
5 |     $('#chat-sidebar').toggleClass('open');
6 |     e.preventDefault();
7 |   });
8 | }())
9 | 


--------------------------------------------------------------------------------
/src/assets/scripts/constants/colors.js:
--------------------------------------------------------------------------------
  1 | const COLORS = {
  2 |   'white'                 : '#ffffff',
  3 |   'red-50'                : '#ffebee',
  4 |   'red-100'               : '#ffcdd2',
  5 |   'red-200'               : '#ef9a9a',
  6 |   'red-300'               : '#e57373',
  7 |   'red-400'               : '#ef5350',
  8 |   'red-500'               : '#f44336',
  9 |   'red-600'               : '#e53935',
 10 |   'red-700'               : '#d32f2f',
 11 |   'red-800'               : '#c62828',
 12 |   'red-900'               : '#b71c1c',
 13 |   'red-a100'              : '#ff8a80',
 14 |   'red-a200'              : '#ff5252',
 15 |   'red-a400'              : '#ff1744',
 16 |   'red-a700'              : '#d50000',
 17 |   'pink-50'               : '#fce4ec',
 18 |   'pink-100'              : '#f8bbd0',
 19 |   'pink-200'              : '#f48fb1',
 20 |   'pink-300'              : '#f06292',
 21 |   'pink-400'              : '#ec407a',
 22 |   'pink-500'              : '#e91e63',
 23 |   'pink-600'              : '#d81b60',
 24 |   'pink-700'              : '#c2185b',
 25 |   'pink-800'              : '#ad1457',
 26 |   'pink-900'              : '#880e4f',
 27 |   'pink-a100'             : '#ff80ab',
 28 |   'pink-a200'             : '#ff4081',
 29 |   'pink-a400'             : '#f50057',
 30 |   'pink-a700'             : '#c51162',
 31 |   'purple-50'             : '#f3e5f5',
 32 |   'purple-100'            : '#e1bee7',
 33 |   'purple-200'            : '#ce93d8',
 34 |   'purple-300'            : '#ba68c8',
 35 |   'purple-400'            : '#ab47bc',
 36 |   'purple-500'            : '#9c27b0',
 37 |   'purple-600'            : '#8e24aa',
 38 |   'purple-700'            : '#7b1fa2',
 39 |   'purple-800'            : '#6a1b9a',
 40 |   'purple-900'            : '#4a148c',
 41 |   'purple-a100'           : '#ea80fc',
 42 |   'purple-a200'           : '#e040fb',
 43 |   'purple-a400'           : '#d500f9',
 44 |   'purple-a700'           : '#aa00ff',
 45 |   'deep-purple-50'        : '#ede7f6',
 46 |   'deep-purple-100'       : '#d1c4e9',
 47 |   'deep-purple-200'       : '#b39ddb',
 48 |   'deep-purple-300'       : '#9575cd',
 49 |   'deep-purple-400'       : '#7e57c2',
 50 |   'deep-purple-500'       : '#673ab7',
 51 |   'deep-purple-600'       : '#5e35b1',
 52 |   'deep-purple-700'       : '#512da8',
 53 |   'deep-purple-800'       : '#4527a0',
 54 |   'deep-purple-900'       : '#311b92',
 55 |   'deep-purple-a100'      : '#b388ff',
 56 |   'deep-purple-a200'      : '#7c4dff',
 57 |   'deep-purple-a400'      : '#651fff',
 58 |   'deep-purple-a700'      : '#6200ea',
 59 |   'indigo-50'             : '#e8eaf6',
 60 |   'indigo-100'            : '#c5cae9',
 61 |   'indigo-200'            : '#9fa8da',
 62 |   'indigo-300'            : '#7986cb',
 63 |   'indigo-400'            : '#5c6bc0',
 64 |   'indigo-500'            : '#3f51b5',
 65 |   'indigo-600'            : '#3949ab',
 66 |   'indigo-700'            : '#303f9f',
 67 |   'indigo-800'            : '#283593',
 68 |   'indigo-900'            : '#1a237e',
 69 |   'indigo-a100'           : '#8c9eff',
 70 |   'indigo-a200'           : '#536dfe',
 71 |   'indigo-a400'           : '#3d5afe',
 72 |   'indigo-a700'           : '#304ffe',
 73 |   'blue-50'               : '#e3f2fd',
 74 |   'blue-100'              : '#bbdefb',
 75 |   'blue-200'              : '#90caf9',
 76 |   'blue-300'              : '#64b5f6',
 77 |   'blue-400'              : '#42a5f5',
 78 |   'blue-500'              : '#2196f3',
 79 |   'blue-600'              : '#1e88e5',
 80 |   'blue-700'              : '#1976d2',
 81 |   'blue-800'              : '#1565c0',
 82 |   'blue-900'              : '#0d47a1',
 83 |   'blue-a100'             : '#82b1ff',
 84 |   'blue-a200'             : '#448aff',
 85 |   'blue-a400'             : '#2979ff',
 86 |   'blue-a700'             : '#2962ff',
 87 |   'light-blue-50'         : '#e1f5fe',
 88 |   'light-blue-100'        : '#b3e5fc',
 89 |   'light-blue-200'        : '#81d4fa',
 90 |   'light-blue-300'        : '#4fc3f7',
 91 |   'light-blue-400'        : '#29b6f6',
 92 |   'light-blue-500'        : '#03a9f4',
 93 |   'light-blue-600'        : '#039be5',
 94 |   'light-blue-700'        : '#0288d1',
 95 |   'light-blue-800'        : '#0277bd',
 96 |   'light-blue-900'        : '#01579b',
 97 |   'light-blue-a100'       : '#80d8ff',
 98 |   'light-blue-a200'       : '#40c4ff',
 99 |   'light-blue-a400'       : '#00b0ff',
100 |   'light-blue-a700'       : '#0091ea',
101 |   'cyan-50'               : '#e0f7fa',
102 |   'cyan-100'              : '#b2ebf2',
103 |   'cyan-200'              : '#80deea',
104 |   'cyan-300'              : '#4dd0e1',
105 |   'cyan-400'              : '#26c6da',
106 |   'cyan-500'              : '#00bcd4',
107 |   'cyan-600'              : '#00acc1',
108 |   'cyan-700'              : '#0097a7',
109 |   'cyan-800'              : '#00838f',
110 |   'cyan-900'              : '#006064',
111 |   'cyan-a100'             : '#84ffff',
112 |   'cyan-a200'             : '#18ffff',
113 |   'cyan-a400'             : '#00e5ff',
114 |   'cyan-a700'             : '#00b8d4',
115 |   'teal-50'               : '#e0f2f1',
116 |   'teal-100'              : '#b2dfdb',
117 |   'teal-200'              : '#80cbc4',
118 |   'teal-300'              : '#4db6ac',
119 |   'teal-400'              : '#26a69a',
120 |   'teal-500'              : '#009688',
121 |   'teal-600'              : '#00897b',
122 |   'teal-700'              : '#00796b',
123 |   'teal-800'              : '#00695c',
124 |   'teal-900'              : '#004d40',
125 |   'teal-a100'             : '#a7ffeb',
126 |   'teal-a200'             : '#64ffda',
127 |   'teal-a400'             : '#1de9b6',
128 |   'teal-a700'             : '#00bfa5',
129 |   'green-50'              : '#e8f5e9',
130 |   'green-100'             : '#c8e6c9',
131 |   'green-200'             : '#a5d6a7',
132 |   'green-300'             : '#81c784',
133 |   'green-400'             : '#66bb6a',
134 |   'green-500'             : '#4caf50',
135 |   'green-600'             : '#43a047',
136 |   'green-700'             : '#388e3c',
137 |   'green-800'             : '#2e7d32',
138 |   'green-900'             : '#1b5e20',
139 |   'green-a100'            : '#b9f6ca',
140 |   'green-a200'            : '#69f0ae',
141 |   'green-a400'            : '#00e676',
142 |   'green-a700'            : '#00c853',
143 |   'light-green-50'        : '#f1f8e9',
144 |   'light-green-100'       : '#dcedc8',
145 |   'light-green-200'       : '#c5e1a5',
146 |   'light-green-300'       : '#aed581',
147 |   'light-green-400'       : '#9ccc65',
148 |   'light-green-500'       : '#8bc34a',
149 |   'light-green-600'       : '#7cb342',
150 |   'light-green-700'       : '#689f38',
151 |   'light-green-800'       : '#558b2f',
152 |   'light-green-900'       : '#33691e',
153 |   'light-green-a100'      : '#ccff90',
154 |   'light-green-a200'      : '#b2ff59',
155 |   'light-green-a400'      : '#76ff03',
156 |   'light-green-a700'      : '#64dd17',
157 |   'lime-50'               : '#f9fbe7',
158 |   'lime-100'              : '#f0f4c3',
159 |   'lime-200'              : '#e6ee9c',
160 |   'lime-300'              : '#dce775',
161 |   'lime-400'              : '#d4e157',
162 |   'lime-500'              : '#cddc39',
163 |   'lime-600'              : '#c0ca33',
164 |   'lime-700'              : '#afb42b',
165 |   'lime-800'              : '#9e9d24',
166 |   'lime-900'              : '#827717',
167 |   'lime-a100'             : '#f4ff81',
168 |   'lime-a200'             : '#eeff41',
169 |   'lime-a400'             : '#c6ff00',
170 |   'lime-a700'             : '#aeea00',
171 |   'yellow-50'             : '#fffde7',
172 |   'yellow-100'            : '#fff9c4',
173 |   'yellow-200'            : '#fff59d',
174 |   'yellow-300'            : '#fff176',
175 |   'yellow-400'            : '#ffee58',
176 |   'yellow-500'            : '#ffeb3b',
177 |   'yellow-600'            : '#fdd835',
178 |   'yellow-700'            : '#fbc02d',
179 |   'yellow-800'            : '#f9a825',
180 |   'yellow-900'            : '#f57f17',
181 |   'yellow-a100'           : '#ffff8d',
182 |   'yellow-a200'           : '#ffff00',
183 |   'yellow-a400'           : '#ffea00',
184 |   'yellow-a700'           : '#ffd600',
185 |   'amber-50'              : '#fff8e1',
186 |   'amber-100'             : '#ffecb3',
187 |   'amber-200'             : '#ffe082',
188 |   'amber-300'             : '#ffd54f',
189 |   'amber-400'             : '#ffca28',
190 |   'amber-500'             : '#ffc107',
191 |   'amber-600'             : '#ffb300',
192 |   'amber-700'             : '#ffa000',
193 |   'amber-800'             : '#ff8f00',
194 |   'amber-900'             : '#ff6f00',
195 |   'amber-a100'            : '#ffe57f',
196 |   'amber-a200'            : '#ffd740',
197 |   'amber-a400'            : '#ffc400',
198 |   'amber-a700'            : '#ffab00',
199 |   'orange-50'             : '#fff3e0',
200 |   'orange-100'            : '#ffe0b2',
201 |   'orange-200'            : '#ffcc80',
202 |   'orange-300'            : '#ffb74d',
203 |   'orange-400'            : '#ffa726',
204 |   'orange-500'            : '#ff9800',
205 |   'orange-600'            : '#fb8c00',
206 |   'orange-700'            : '#f57c00',
207 |   'orange-800'            : '#ef6c00',
208 |   'orange-900'            : '#e65100',
209 |   'orange-a100'           : '#ffd180',
210 |   'orange-a200'           : '#ffab40',
211 |   'orange-a400'           : '#ff9100',
212 |   'orange-a700'           : '#ff6d00',
213 |   'deep-orange-50'        : '#fbe9e7',
214 |   'deep-orange-100'       : '#ffccbc',
215 |   'deep-orange-200'       : '#ffab91',
216 |   'deep-orange-300'       : '#ff8a65',
217 |   'deep-orange-400'       : '#ff7043',
218 |   'deep-orange-500'       : '#ff5722',
219 |   'deep-orange-600'       : '#f4511e',
220 |   'deep-orange-700'       : '#e64a19',
221 |   'deep-orange-800'       : '#d84315',
222 |   'deep-orange-900'       : '#bf360c',
223 |   'deep-orange-a100'      : '#ff9e80',
224 |   'deep-orange-a200'      : '#ff6e40',
225 |   'deep-orange-a400'      : '#ff3d00',
226 |   'deep-orange-a700'      : '#dd2c00',
227 |   'brown-50'              : '#efebe9',
228 |   'brown-100'             : '#d7ccc8',
229 |   'brown-200'             : '#bcaaa4',
230 |   'brown-300'             : '#a1887f',
231 |   'brown-400'             : '#8d6e63',
232 |   'brown-500'             : '#795548',
233 |   'brown-600'             : '#6d4c41',
234 |   'brown-700'             : '#5d4037',
235 |   'brown-800'             : '#4e342e',
236 |   'brown-900'             : '#3e2723',
237 |   'grey-50'               : '#fafafa',
238 |   'grey-100'              : '#f5f5f5',
239 |   'grey-200'              : '#eeeeee',
240 |   'grey-300'              : '#e0e0e0',
241 |   'grey-400'              : '#bdbdbd',
242 |   'grey-500'              : '#9e9e9e',
243 |   'grey-600'              : '#757575',
244 |   'grey-700'              : '#616161',
245 |   'grey-800'              : '#424242',
246 |   'grey-900'              : '#212121',
247 |   'blue-grey-50'          : '#eceff1',
248 |   'blue-grey-100'         : '#cfd8dc',
249 |   'blue-grey-200'         : '#b0bec5',
250 |   'blue-grey-300'         : '#90a4ae',
251 |   'blue-grey-400'         : '#78909c',
252 |   'blue-grey-500'         : '#607d8b',
253 |   'blue-grey-600'         : '#546e7a',
254 |   'blue-grey-700'         : '#455a64',
255 |   'blue-grey-800'         : '#37474f',
256 |   'blue-grey-900'         : '#263238',
257 | };
258 | 
259 | const GREYS = {
260 |   'grey-100' : '#f9fafb',
261 |   'grey-200' : '#f2f3f5',
262 |   'grey-300' : '#e6eaf0',
263 |   'grey-400' : '#d3d9e3',
264 |   'grey-500' : '#b9c2d0',
265 |   'grey-600' : '#7c8695',
266 |   'grey-700' : '#72777a',
267 |   'grey-800' : '#565a5c',
268 |   'grey-900' : '#313435',
269 | };
270 | 
271 | export {
272 |   COLORS,
273 |   GREYS,
274 | };
275 | 


--------------------------------------------------------------------------------
/src/assets/scripts/datatable/index.js:
--------------------------------------------------------------------------------
1 | import * as $ from 'jquery';
2 | import 'datatables';
3 | 
4 | export default (function () {
5 |   $('#dataTable').DataTable();
6 | }());
7 | 


--------------------------------------------------------------------------------
/src/assets/scripts/datepicker/index.js:
--------------------------------------------------------------------------------
1 | import * as $ from 'jquery';
2 | import 'bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js';
3 | import 'bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css';
4 | 
5 | export default (function () {
6 |   $('.start-date').datepicker();
7 |   $('.end-date').datepicker();
8 | }())
9 | 


--------------------------------------------------------------------------------
/src/assets/scripts/email/index.js:
--------------------------------------------------------------------------------
 1 | import * as $ from 'jquery';
 2 | 
 3 | export default (function () {
 4 |   $('.email-side-toggle').on('click', e => {
 5 |     $('.email-app').toggleClass('side-active');
 6 |     e.preventDefault();
 7 |   });
 8 | 
 9 |   $('.email-list-item, .back-to-mailbox').on('click', e => {
10 |     $('.email-content').toggleClass('open');
11 |     e.preventDefault();
12 |   });
13 | }())
14 | 


--------------------------------------------------------------------------------
/src/assets/scripts/fullcalendar/index.js:
--------------------------------------------------------------------------------
 1 | import { Calendar } from '@fullcalendar/core';
 2 | import interactionPlugin from '@fullcalendar/interaction';
 3 | import dayGridPlugin from '@fullcalendar/daygrid';
 4 | import timeGridPlugin from '@fullcalendar/timegrid';
 5 | import listPlugin from '@fullcalendar/list';
 6 | 
 7 | document.addEventListener('DOMContentLoaded', function () {
 8 |   const calendarEl = document.getElementById('calendar');
 9 | 
10 |   // element found in dom ?
11 |   if (calendarEl == null) {
12 |     return;
13 |   }
14 | 
15 |   const calendar = new Calendar(calendarEl, {
16 |     plugins: [interactionPlugin, dayGridPlugin, timeGridPlugin, listPlugin],
17 |     headerToolbar: {
18 |       left: 'prev,next today',
19 |       center: 'title',
20 |       right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek',
21 |     },
22 |     initialDate: '2024-01-12',
23 |     navLinks: true, // can click day/week names to navigate views
24 |     editable: true,
25 |     dayMaxEvents: true, // allow "more" link when too many events
26 |     events: [
27 |       {
28 |         title: 'All Day Event',
29 |         start: '2024-01-01',
30 |       },
31 |       {
32 |         title: 'Long Event',
33 |         start: '2024-01-07',
34 |         end: '2024-01-10',
35 |       },
36 |       {
37 |         groupId: 999,
38 |         title: 'Repeating Event',
39 |         start: '2024-01-09T16:00:00',
40 |       },
41 |       {
42 |         groupId: 999,
43 |         title: 'Repeating Event',
44 |         start: '2024-01-16T16:00:00',
45 |       },
46 |       {
47 |         title: 'Conference',
48 |         start: '2024-01-11',
49 |         end: '2024-01-13',
50 |       },
51 |       {
52 |         title: 'Meeting',
53 |         start: '2024-01-12T10:30:00',
54 |         end: '2024-01-12T12:30:00',
55 |       },
56 |       {
57 |         title: 'Lunch',
58 |         start: '2024-01-12T12:00:00',
59 |       },
60 |       {
61 |         title: 'Meeting',
62 |         start: '2024-01-12T14:30:00',
63 |       },
64 |       {
65 |         title: 'Happy Hour',
66 |         start: '2024-01-12T17:30:00',
67 |       },
68 |       {
69 |         title: 'Dinner',
70 |         start: '2024-01-12T20:00:00',
71 |       },
72 |       {
73 |         title: 'Birthday Party',
74 |         start: '2024-01-13T07:00:00',
75 |       },
76 |       {
77 |         title: 'Click for Google',
78 |         url: 'http://google.com/',
79 |         start: '2024-01-28',
80 |       },
81 |     ],
82 |   });
83 | 
84 |   calendar.render();
85 | });
86 | 


--------------------------------------------------------------------------------
/src/assets/scripts/googleMaps/index.js:
--------------------------------------------------------------------------------
 1 | import * as $ from 'jquery';
 2 | import loadGoogleMapsAPI  from 'load-google-maps-api';
 3 | 
 4 | export default (function () {
 5 |   if ($('#google-map').length > 0) {
 6 |     loadGoogleMapsAPI({
 7 |       key: 'AIzaSyDW8td30_gj6sGXjiMU0ALeMu1SDEwUnEA',
 8 |     }).then(() => {
 9 |       const latitude  = 26.8206;
10 |       const longitude = 30.8025;
11 |       const mapZoom   = 5;
12 |       const { google }    = window;
13 | 
14 |       const mapOptions = {
15 |         center    : new google.maps.LatLng(latitude, longitude),
16 |         zoom      : mapZoom,
17 |         mapTypeId : google.maps.MapTypeId.ROADMAP,
18 |         styles: [{
19 |           'featureType': 'landscape',
20 |           'stylers': [
21 |             { 'hue'        : '#FFBB00' },
22 |             { 'saturation' : 43.400000000000006 },
23 |             { 'lightness'  : 37.599999999999994 },
24 |             { 'gamma'      : 1 },
25 |           ],
26 |         }, {
27 |           'featureType': 'road.highway',
28 |           'stylers': [
29 |             { 'hue'        : '#FFC200' },
30 |             { 'saturation' : -61.8 },
31 |             { 'lightness'  : 45.599999999999994 },
32 |             { 'gamma'      : 1 },
33 |           ],
34 |         }, {
35 |           'featureType': 'road.arterial',
36 |           'stylers': [
37 |             { 'hue'        : '#FF0300' },
38 |             { 'saturation' : -100 },
39 |             { 'lightness'  : 51.19999999999999 },
40 |             { 'gamma'      : 1 },
41 |           ],
42 |         }, {
43 |           'featureType': 'road.local',
44 |           'stylers': [
45 |             { 'hue'        : '#FF0300' },
46 |             { 'saturation' : -100 },
47 |             { 'lightness'  : 52 },
48 |             { 'gamma'      : 1 },
49 |           ],
50 |         }, {
51 |           'featureType': 'water',
52 |           'stylers': [
53 |             { 'hue'        : '#0078FF' },
54 |             { 'saturation' : -13.200000000000003 },
55 |             { 'lightness'  : 2.4000000000000057 },
56 |             { 'gamma'      : 1 },
57 |           ],
58 |         }, {
59 |           'featureType': 'poi',
60 |           'stylers': [
61 |             { 'hue'        : '#00FF6A' },
62 |             { 'saturation' : -1.0989010989011234 },
63 |             { 'lightness'  : 11.200000000000017 },
64 |             { 'gamma'      : 1 },
65 |           ],
66 |         }],
67 |       };
68 | 
69 |       const map = new google.maps.Map(document.getElementById('google-map'), mapOptions);
70 | 
71 |       new google.maps.Marker({
72 |         map,
73 |         position : new google.maps.LatLng(latitude, longitude),
74 |         visible  : true,
75 |       });
76 |     });
77 |   }
78 | }())
79 | 


--------------------------------------------------------------------------------
/src/assets/scripts/index.js:
--------------------------------------------------------------------------------
 1 | // import "@popperjs/core";
 2 | import bootstrap from 'bootstrap';
 3 | 
 4 | import '../styles/index.scss';
 5 | import './fullcalendar';
 6 | import './masonry';
 7 | import './charts';
 8 | import './popover';
 9 | import './scrollbar';
10 | import './search';
11 | import './sidebar';
12 | import './skycons';
13 | import './vectorMaps';
14 | import './chat';
15 | import './datatable';
16 | import './datepicker';
17 | import './email';
18 | import './googleMaps';
19 | import './utils';
20 | 


--------------------------------------------------------------------------------
/src/assets/scripts/masonry/index.js:
--------------------------------------------------------------------------------
 1 | import * as $ from 'jquery';
 2 | import Masonry from 'masonry-layout';
 3 | 
 4 | export default (function () {
 5 |   window.addEventListener('load', () => {
 6 |     if ($('.masonry').length > 0) {
 7 |       new Masonry('.masonry', {
 8 |         itemSelector: '.masonry-item',
 9 |         columnWidth: '.masonry-sizer',
10 |         percentPosition: true,
11 |       });
12 |     }
13 |   });
14 | }());
15 | 


--------------------------------------------------------------------------------
/src/assets/scripts/popover/index.js:
--------------------------------------------------------------------------------
 1 | // import * as $ from 'jquery';
 2 | import * as bootstrap from 'bootstrap'
 3 | 
 4 | export default (function () {
 5 |   // ------------------------------------------------------
 6 |   // @Popover
 7 |   // ------------------------------------------------------
 8 | 
 9 |   var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
10 | var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
11 |   return new bootstrap.Popover(popoverTriggerEl)
12 | })
13 | 
14 |   // ------------------------------------------------------
15 |   // @Tooltips
16 |   // ------------------------------------------------------
17 | 
18 |   var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
19 | var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
20 |   return new bootstrap.Tooltip(tooltipTriggerEl)
21 | })
22 | }());
23 | 


--------------------------------------------------------------------------------
/src/assets/scripts/scrollbar/index.js:
--------------------------------------------------------------------------------
 1 | import * as $ from 'jquery';
 2 | import PerfectScrollbar from 'perfect-scrollbar';
 3 | 
 4 | export default (function () {
 5 |   const scrollables = $('.scrollable');
 6 |   if (scrollables.length > 0) {
 7 |     scrollables.each((index, el) => {
 8 |       new PerfectScrollbar(el);
 9 |     });
10 |   }
11 | }());
12 | 


--------------------------------------------------------------------------------
/src/assets/scripts/search/index.js:
--------------------------------------------------------------------------------
 1 | import * as $ from 'jquery';
 2 | 
 3 | export default (function () {
 4 |   $('.search-toggle').on('click', e => {
 5 |     $('.search-box, .search-input').toggleClass('active');
 6 |     $('.search-input input').focus();
 7 |     e.preventDefault();
 8 |   });
 9 | }());
10 | 


--------------------------------------------------------------------------------
/src/assets/scripts/sidebar/index.js:
--------------------------------------------------------------------------------
 1 | import * as $ from 'jquery';
 2 | 
 3 | export default (function () {
 4 |   // Sidebar links
 5 |   $('.sidebar .sidebar-menu li a').on('click', function () {
 6 |     const $this = $(this);
 7 | 
 8 |     if ($this.parent().hasClass('open')) {
 9 |       $this
10 |         .parent()
11 |         .children('.dropdown-menu')
12 |         .slideUp(200, () => {
13 |           $this.parent().removeClass('open');
14 |         });
15 |     } else {
16 |       $this
17 |         .parent()
18 |         .parent()
19 |         .children('li.open')
20 |         .children('.dropdown-menu')
21 |         .slideUp(200);
22 | 
23 |       $this
24 |         .parent()
25 |         .parent()
26 |         .children('li.open')
27 |         .children('a')
28 |         .removeClass('open');
29 | 
30 |       $this
31 |         .parent()
32 |         .parent()
33 |         .children('li.open')
34 |         .removeClass('open');
35 | 
36 |       $this
37 |         .parent()
38 |         .children('.dropdown-menu')
39 |         .slideDown(200, () => {
40 |           $this.parent().addClass('open');
41 |         });
42 |     }
43 |   });
44 | 
45 |   // Sidebar Activity Class
46 |   const sidebarLinks = $('.sidebar').find('.sidebar-link');
47 | 
48 |   sidebarLinks
49 |     .each((index, el) => {
50 |       $(el).removeClass('active');
51 |     })
52 |     .filter(function () {
53 |       const href = $(this).attr('href');
54 |       const pattern = href[0] === '/' ? href.substr(1) : href;
55 |       return pattern === (window.location.pathname).substr(1);
56 |     })
57 |     .addClass('active');
58 | 
59 |   // ٍSidebar Toggle
60 |   $('.sidebar-toggle').on('click', e => {
61 |     $('.app').toggleClass('is-collapsed');
62 |     e.preventDefault();
63 |   });
64 | 
65 |   /**
66 |    * Wait untill sidebar fully toggled (animated in/out)
67 |    * then trigger window resize event in order to recalculate
68 |    * masonry layout widths and gutters.
69 |    */
70 |   $('#sidebar-toggle').click(e => {
71 |     e.preventDefault();
72 |     setTimeout(() => {
73 |       window.dispatchEvent(window.EVENT);
74 |     }, 300);
75 |   });
76 | }());
77 | 


--------------------------------------------------------------------------------
/src/assets/scripts/skycons/index.js:
--------------------------------------------------------------------------------
 1 | import SkyconsInit from 'skycons';
 2 | 
 3 | const Skycons = SkyconsInit(window);
 4 | 
 5 | export default (function () {
 6 |   const icons = new Skycons({ 'color': '#ff6849' });
 7 |   const list  = [
 8 |     'clear-day',
 9 |     'clear-night',
10 |     'partly-cloudy-day',
11 |     'partly-cloudy-night',
12 |     'cloudy',
13 |     'rain',
14 |     'sleet',
15 |     'snow',
16 |     'wind',
17 |     'fog',
18 |   ];
19 |   let i = list.length;
20 | 
21 |   while (i--) {
22 |     const
23 |       weatherType = list[i],
24 |       elements    = document.getElementsByClassName(weatherType);
25 |     let j = elements.length;
26 | 
27 |     while (j--) {
28 |       icons.set(elements[j], weatherType);
29 |     }
30 |   }
31 | 
32 |   icons.play();
33 | }());
34 | 


--------------------------------------------------------------------------------
/src/assets/scripts/utils/index.js:
--------------------------------------------------------------------------------
 1 | import * as $ from 'jquery';
 2 | 
 3 | export default (function () {
 4 |   // ------------------------------------------------------
 5 |   // @Window Resize
 6 |   // ------------------------------------------------------
 7 | 
 8 |   /**
 9 |    * NOTE: Register resize event for Masonry layout
10 |    */
11 |   const EVENT = document.createEvent('UIEvents');
12 |   window.EVENT = EVENT;
13 |   EVENT.initUIEvent('resize', true, false, window, 0);
14 | 
15 | 
16 |   window.addEventListener('load', () => {
17 |     /**
18 |      * Trigger window resize event after page load
19 |      * for recalculation of masonry layout.
20 |      */
21 |     window.dispatchEvent(EVENT);
22 |   });
23 | 
24 |   // ------------------------------------------------------
25 |   // @External Links
26 |   // ------------------------------------------------------
27 | 
28 |   // Open external links in new window
29 |   $('a')
30 |     .filter('[href^="http"], [href^="//"]')
31 |     .not(`[href*="${window.location.host}"]`)
32 |     .attr('rel', 'noopener noreferrer')
33 |     .attr('target', '_blank');
34 | 
35 |   // ------------------------------------------------------
36 |   // @Resize Trigger
37 |   // ------------------------------------------------------
38 | 
39 |   // Trigger resize on any element click
40 |   document.addEventListener('click', () => {
41 |     window.dispatchEvent(window.EVENT);
42 |   });
43 | }());
44 | 


--------------------------------------------------------------------------------
/src/assets/scripts/vectorMaps/index.js:
--------------------------------------------------------------------------------
 1 | import * as $ from 'jquery';
 2 | import 'jvectormap';
 3 | import 'jvectormap/jquery-jvectormap.css';
 4 | import './jquery-jvectormap-world-mill.js';
 5 | import { debounce } from 'lodash';
 6 | 
 7 | export default (function () {
 8 |   const vectorMapInit = () => {
 9 |     if ($('#world-map-marker').length > 0) {
10 |       // This is a hack, as the .empty() did not do the work
11 |       $('#vmap').remove();
12 | 
13 |       // we recreate (after removing it) the container div, to reset all the data of the map
14 |       $('#world-map-marker').append(`
15 |         <div
16 |           id="vmap"
17 |           style="
18 |             height: 490px;
19 |             position: relative;
20 |             overflow: hidden;
21 |             background-color: transparent;
22 |           "
23 |         >
24 |         </div>
25 |       `);
26 | 
27 |       $('#vmap').vectorMap({
28 |         map: 'world_mill',
29 |         backgroundColor: '#fff',
30 |         borderColor: '#fff',
31 |         borderOpacity: 0.25,
32 |         borderWidth: 0,
33 |         color: '#e6e6e6',
34 |         regionStyle : {
35 |           initial : {
36 |             fill : '#e4ecef',
37 |           },
38 |         },
39 | 
40 |         markerStyle: {
41 |           initial: {
42 |             r: 7,
43 |             'fill': '#fff',
44 |             'fill-opacity':1,
45 |             'stroke': '#000',
46 |             'stroke-width' : 2,
47 |             'stroke-opacity': 0.4,
48 |           },
49 |         },
50 | 
51 |         markers : [{
52 |           latLng : [21.00, 78.00],
53 |           name : 'INDIA : 350',
54 |         }, {
55 |           latLng : [-33.00, 151.00],
56 |           name : 'Australia : 250',
57 |         }, {
58 |           latLng : [36.77, -119.41],
59 |           name : 'USA : 250',
60 |         }, {
61 |           latLng : [55.37, -3.41],
62 |           name : 'UK   : 250',
63 |         }, {
64 |           latLng : [25.20, 55.27],
65 |           name : 'UAE : 250',
66 |         }],
67 |         series: {
68 |           regions: [{
69 |             values: {
70 |               'US': 298,
71 |               'SA': 200,
72 |               'AU': 760,
73 |               'IN': 200,
74 |               'GB': 120,
75 |             },
76 |             scale: ['#03a9f3', '#02a7f1'],
77 |             normalizeFunction: 'polynomial',
78 |           }],
79 |         },
80 |         hoverOpacity: null,
81 |         normalizeFunction: 'linear',
82 |         zoomOnScroll: false,
83 |         scaleColors: ['#b6d6ff', '#005ace'],
84 |         selectedColor: '#c9dfaf',
85 |         selectedRegions: [],
86 |         enableZoom: false,
87 |         hoverColor: '#fff',
88 |       });
89 |     }
90 |   };
91 | 
92 |   vectorMapInit();
93 |   $(window).resize(debounce(vectorMapInit, 150));
94 | })();
95 | 


--------------------------------------------------------------------------------
/src/assets/static/fonts/icons/fontawesome/FontAwesome.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/puikinsh/Adminator-admin-dashboard/6389368ded918cae37f216d78529a5a8305b7afd/src/assets/static/fonts/icons/fontawesome/FontAwesome.otf


--------------------------------------------------------------------------------
/src/assets/static/fonts/icons/fontawesome/fontawesome-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/puikinsh/Adminator-admin-dashboard/6389368ded918cae37f216d78529a5a8305b7afd/src/assets/static/fonts/icons/fontawesome/fontawesome-webfont.eot


--------------------------------------------------------------------------------
/src/assets/static/fonts/icons/fontawesome/fontawesome-webfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/puikinsh/Adminator-admin-dashboard/6389368ded918cae37f216d78529a5a8305b7afd/src/assets/static/fonts/icons/fontawesome/fontawesome-webfont.ttf


--------------------------------------------------------------------------------
/src/assets/static/fonts/icons/fontawesome/fontawesome-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/puikinsh/Adminator-admin-dashboard/6389368ded918cae37f216d78529a5a8305b7afd/src/assets/static/fonts/icons/fontawesome/fontawesome-webfont.woff


--------------------------------------------------------------------------------
/src/assets/static/fonts/icons/fontawesome/fontawesome-webfont.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/puikinsh/Adminator-admin-dashboard/6389368ded918cae37f216d78529a5a8305b7afd/src/assets/static/fonts/icons/fontawesome/fontawesome-webfont.woff2


--------------------------------------------------------------------------------
/src/assets/static/fonts/icons/themify/themify.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/puikinsh/Adminator-admin-dashboard/6389368ded918cae37f216d78529a5a8305b7afd/src/assets/static/fonts/icons/themify/themify.eot


--------------------------------------------------------------------------------
/src/assets/static/fonts/icons/themify/themify.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/puikinsh/Adminator-admin-dashboard/6389368ded918cae37f216d78529a5a8305b7afd/src/assets/static/fonts/icons/themify/themify.ttf


--------------------------------------------------------------------------------
/src/assets/static/fonts/icons/themify/themify.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/puikinsh/Adminator-admin-dashboard/6389368ded918cae37f216d78529a5a8305b7afd/src/assets/static/fonts/icons/themify/themify.woff


--------------------------------------------------------------------------------
/src/assets/static/images/404.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/puikinsh/Adminator-admin-dashboard/6389368ded918cae37f216d78529a5a8305b7afd/src/assets/static/images/404.png


--------------------------------------------------------------------------------
/src/assets/static/images/500.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/puikinsh/Adminator-admin-dashboard/6389368ded918cae37f216d78529a5a8305b7afd/src/assets/static/images/500.png


--------------------------------------------------------------------------------
/src/assets/static/images/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/puikinsh/Adminator-admin-dashboard/6389368ded918cae37f216d78529a5a8305b7afd/src/assets/static/images/bg.jpg


--------------------------------------------------------------------------------
/src/assets/static/images/datatables/sort_asc.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/puikinsh/Adminator-admin-dashboard/6389368ded918cae37f216d78529a5a8305b7afd/src/assets/static/images/datatables/sort_asc.png


--------------------------------------------------------------------------------
/src/assets/static/images/datatables/sort_asc_disabled.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/puikinsh/Adminator-admin-dashboard/6389368ded918cae37f216d78529a5a8305b7afd/src/assets/static/images/datatables/sort_asc_disabled.png


--------------------------------------------------------------------------------
/src/assets/static/images/datatables/sort_both.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/puikinsh/Adminator-admin-dashboard/6389368ded918cae37f216d78529a5a8305b7afd/src/assets/static/images/datatables/sort_both.png


--------------------------------------------------------------------------------
/src/assets/static/images/datatables/sort_desc.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/puikinsh/Adminator-admin-dashboard/6389368ded918cae37f216d78529a5a8305b7afd/src/assets/static/images/datatables/sort_desc.png


--------------------------------------------------------------------------------
/src/assets/static/images/datatables/sort_desc_disabled.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/puikinsh/Adminator-admin-dashboard/6389368ded918cae37f216d78529a5a8305b7afd/src/assets/static/images/datatables/sort_desc_disabled.png


--------------------------------------------------------------------------------
/src/assets/static/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/puikinsh/Adminator-admin-dashboard/6389368ded918cae37f216d78529a5a8305b7afd/src/assets/static/images/logo.png


--------------------------------------------------------------------------------
/src/assets/static/images/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3388.25 3014.2"><title>react-1</title><circle cx="1694.17" cy="1504.25" r="302.6" fill="#fff"/><path d="M1806.5,1191.9c406.2,0,783.6,58.3,1068.1,156.2,342.8,118,553.6,296.9,553.6,458.9,0,168.8-223.4,358.9-591.5,480.8-278.3,92.2-644.6,140.4-1030.2,140.4-395.4,0-769.7-45.2-1051.2-141.4C399.2,2165.1,184.7,1972.6,184.7,1807c0-160.7,201.3-338.2,539.3-456,285.6-99.5,672.3-159.1,1082.5-159.1Z" transform="translate(-112.33 -302.85)" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="144.75"/><path d="M1271,1501.3c202.9-351.9,442-649.7,669-847.2,273.5-238,533.8-331.2,674.1-250.3,146.2,84.3,199.3,372.8,121,752.7-59.2,287.2-200.4,628.5-393.1,962.6-197.5,342.5-423.7,644.2-647.6,840-283.3,247.7-557.3,337.3-700.7,254.6-139.2-80.3-192.4-343.3-125.7-695,56.4-297.4,198-662.1,403-1017.4Z" transform="translate(-112.33 -302.85)" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="144.75"/><path d="M1271.5,2119.8C1068,1768.2,929.4,1412.4,871.6,1117.1c-69.6-355.8-20.4-627.9,119.8-709,146.1-84.6,422.5,13.5,712.5,271,219.3,194.7,444.4,487.5,637.6,821.3,198.1,342.2,346.6,688.8,404.3,980.5,73.1,369.2,13.9,651.3-129.4,734.2-139.1,80.5-393.5-4.7-664.9-238.2-229.2-197.3-474.5-502.1-680-857.1Z" transform="translate(-112.33 -302.85)" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="144.75"/></svg>


--------------------------------------------------------------------------------
/src/assets/styles/index.scss:
--------------------------------------------------------------------------------
1 | @import 'spec/settings/index';
2 | @import 'spec/tools/index';
3 | @import "bootstrap/scss/bootstrap";
4 | @import 'spec/index';
5 | @import 'vendor/index';
6 | 
7 | 


--------------------------------------------------------------------------------
/src/assets/styles/spec/components/easyPieChart.scss:
--------------------------------------------------------------------------------
 1 | .easy-pie-chart {
 2 |   position: relative;
 3 | 
 4 |   span {
 5 |     position: absolute;
 6 |     top: 50%;
 7 |     left: 50%;
 8 |     transform: translate(-50%, -50%);
 9 |     line-height: 0;
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/src/assets/styles/spec/components/footer.scss:
--------------------------------------------------------------------------------
1 | footer {
2 |   z-index: 1;
3 |   position: relative;
4 | }
5 | 


--------------------------------------------------------------------------------
/src/assets/styles/spec/components/forms.scss:
--------------------------------------------------------------------------------
  1 | .checkbox label {
  2 |   display: inline-block;
  3 |   vertical-align: middle;
  4 |   position: relative;
  5 |   padding-left: 17px;
  6 |   margin-bottom: 0;
  7 | }
  8 | 
  9 | .checkbox label::before {
 10 |   content: "";
 11 |   display: inline-block;
 12 |   position: absolute;
 13 |   width: 17px;
 14 |   height: 17px;
 15 |   left: 0;
 16 |   top: 50%;
 17 |   transform: translateY(-50%);
 18 |   margin-left: -12px;
 19 |   border: 1px solid $grey-300;
 20 |   border-radius: 3px;
 21 |   background-color: $md-white;
 22 |   -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
 23 |   -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
 24 |   transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
 25 | }
 26 | 
 27 | .checkbox label::after {
 28 |   display: inline-block;
 29 |   position: absolute;
 30 |   width: 17px;
 31 |   height: 17px;
 32 |   text-align: center;
 33 |   font-size: 10px !important;
 34 |   line-height: 17px;
 35 |   left: 0;
 36 |   top: 50%;
 37 |   transform: translateY(-50%);
 38 |   margin-left: -12px;
 39 |   color: $grey-500;
 40 | }
 41 | 
 42 | .checkbox input[type="checkbox"] {
 43 |   opacity: 0;
 44 |   z-index: 1;
 45 | }
 46 | 
 47 | .checkbox input[type="checkbox"]:focus + label::before {
 48 |   outline: thin dotted;
 49 |   outline: 5px auto -webkit-focus-ring-color;
 50 |   outline-offset: -2px;
 51 | }
 52 | 
 53 | .checkbox input[type="checkbox"]:checked + label::after {
 54 |   font-family: 'FontAwesome';
 55 |   content: "\f00c";
 56 |   font-size: 13px;
 57 | }
 58 | 
 59 | .checkbox input[type="checkbox"]:disabled + label {
 60 |   opacity: 0.65;
 61 | }
 62 | 
 63 | .checkbox input[type="checkbox"]:disabled + label::before {
 64 |   background-color: $grey-400;
 65 |   cursor: not-allowed;
 66 | }
 67 | 
 68 | .checkbox.checkbox-circle label::before {
 69 |   border-radius: 50%;
 70 | }
 71 | 
 72 | .checkbox.checkbox-inline {
 73 |   margin-top: 0;
 74 | }
 75 | 
 76 | .checkbox-primary input[type="checkbox"]:checked + label::before {
 77 |   background-color: $default-primary;
 78 |   border-color: $default-primary;
 79 | }
 80 | 
 81 | .checkbox-primary input[type="checkbox"]:checked + label::after {
 82 |   color: #fff;
 83 | }
 84 | 
 85 | .checkbox-danger input[type="checkbox"]:checked + label::before {
 86 |   background-color: $default-danger;
 87 |   border-color: $default-danger;
 88 | }
 89 | 
 90 | .checkbox-danger input[type="checkbox"]:checked + label::after {
 91 |   color: $md-white;
 92 | }
 93 | 
 94 | .checkbox-info input[type="checkbox"]:checked + label::before {
 95 |   background-color: $default-info;
 96 |   border-color: $default-info;
 97 | }
 98 | 
 99 | .checkbox-info input[type="checkbox"]:checked + label::after {
100 |   color: $md-white;
101 | }
102 | 
103 | .checkbox-warning input[type="checkbox"]:checked + label::before {
104 |   background-color: $default-warning;
105 |   border-color: $default-warning;
106 | }
107 | 
108 | .checkbox-warning input[type="checkbox"]:checked + label::after {
109 |   color: $md-white;
110 | }
111 | 
112 | .checkbox-success input[type="checkbox"]:checked + label::before {
113 |   background-color: $default-success;
114 |   border-color: $default-success;
115 | }
116 | 
117 | .checkbox-success input[type="checkbox"]:checked + label::after {
118 |   color: $md-white;
119 | }
120 | 
121 | .radio {
122 |   padding-left: 20px;
123 | }
124 | 
125 | .radio label {
126 |   display: inline-block;
127 |   vertical-align: middle;
128 |   position: relative;
129 |   padding-left: 5px;
130 | }
131 | 
132 | .radio label::before {
133 |   content: "";
134 |   display: inline-block;
135 |   position: absolute;
136 |   width: 17px;
137 |   height: 17px;
138 |   left: 0;
139 |   margin-left: -20px;
140 |   border: 1px solid #cccccc;
141 |   border-radius: 50%;
142 |   background-color: #fff;
143 |   -webkit-transition: border 0.15s ease-in-out;
144 |   -o-transition: border 0.15s ease-in-out;
145 |   transition: border 0.15s ease-in-out;
146 | }
147 | 
148 | .radio label::after {
149 |   display: inline-block;
150 |   position: absolute;
151 |   content: " ";
152 |   width: 11px;
153 |   height: 11px;
154 |   left: 3px;
155 |   top: 3px;
156 |   margin-left: -20px;
157 |   border-radius: 50%;
158 |   background-color: #555555;
159 |   -webkit-transform: scale(0, 0);
160 |   -ms-transform: scale(0, 0);
161 |   -o-transform: scale(0, 0);
162 |   transform: scale(0, 0);
163 |   -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
164 |   -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
165 |   -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
166 |   transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
167 | }
168 | 
169 | .radio input[type="radio"] {
170 |   opacity: 0;
171 |   z-index: 1;
172 | }
173 | 
174 | .radio input[type="radio"]:focus + label::before {
175 |   outline: thin dotted;
176 |   outline: 5px auto -webkit-focus-ring-color;
177 |   outline-offset: -2px;
178 | }
179 | 
180 | .radio input[type="radio"]:checked + label::after {
181 |   -webkit-transform: scale(1, 1);
182 |   -ms-transform: scale(1, 1);
183 |   -o-transform: scale(1, 1);
184 |   transform: scale(1, 1);
185 | }
186 | 
187 | .radio input[type="radio"]:disabled + label {
188 |   opacity: 0.65;
189 | }
190 | 
191 | .radio input[type="radio"]:disabled + label::before {
192 |   cursor: not-allowed;
193 | }
194 | 
195 | .radio.radio-inline {
196 |   margin-top: 0;
197 | }
198 | 
199 | .radio-primary input[type="radio"] + label::after {
200 |   background-color: #428bca;
201 | }
202 | 
203 | .radio-primary input[type="radio"]:checked + label::before {
204 |   border-color: #428bca;
205 | }
206 | 
207 | .radio-primary input[type="radio"]:checked + label::after {
208 |   background-color: #428bca;
209 | }
210 | 
211 | .radio-danger input[type="radio"] + label::after {
212 |   background-color: #d9534f;
213 | }
214 | 
215 | .radio-danger input[type="radio"]:checked + label::before {
216 |   border-color: #d9534f;
217 | }
218 | 
219 | .radio-danger input[type="radio"]:checked + label::after {
220 |   background-color: #d9534f;
221 | }
222 | 
223 | .radio-info input[type="radio"] + label::after {
224 |   background-color: #5bc0de;
225 | }
226 | 
227 | .radio-info input[type="radio"]:checked + label::before {
228 |   border-color: #5bc0de;
229 | }
230 | 
231 | .radio-info input[type="radio"]:checked + label::after {
232 |   background-color: #5bc0de;
233 | }
234 | 
235 | .radio-warning input[type="radio"] + label::after {
236 |   background-color: #f0ad4e;
237 | }
238 | 
239 | .radio-warning input[type="radio"]:checked + label::before {
240 |   border-color: #f0ad4e;
241 | }
242 | 
243 | .radio-warning input[type="radio"]:checked + label::after {
244 |   background-color: #f0ad4e;
245 | }
246 | 
247 | .radio-success input[type="radio"] + label::after {
248 |   background-color: #5cb85c;
249 | }
250 | 
251 | .radio-success input[type="radio"]:checked + label::before {
252 |   border-color: #5cb85c;
253 | }
254 | 
255 | .radio-success input[type="radio"]:checked + label::after {
256 |   background-color: #5cb85c;
257 | }
258 | 


--------------------------------------------------------------------------------
/src/assets/styles/spec/components/index.scss:
--------------------------------------------------------------------------------
 1 | @import 'sidebar';
 2 | @import 'topbar';
 3 | @import 'pageContainer';
 4 | @import 'progressBar';
 5 | @import 'easyPieChart';
 6 | @import 'forms';
 7 | @import 'masonry';
 8 | @import 'loader';
 9 | @import 'footer';
10 | 


--------------------------------------------------------------------------------
/src/assets/styles/spec/components/loader.scss:
--------------------------------------------------------------------------------
 1 | #loader {
 2 |   transition: all 0.3s ease-in-out;
 3 |   opacity: 1;
 4 |   display: default;
 5 | }
 6 | 
 7 | #loader.fadeOut {
 8 |   opacity: 0;
 9 |   display: none;
10 | }
11 | 
12 | 
13 | 
14 | .spinner {
15 |   width: 40px;
16 |   height: 40px;
17 |   position: absolute;
18 |   top: calc(50% - 20px);
19 |   left: calc(50% - 20px);
20 |   background-color: #333;
21 |   border-radius: 100%;
22 |   -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
23 |   animation: sk-scaleout 1.0s infinite ease-in-out;
24 | }
25 | 
26 | @-webkit-keyframes sk-scaleout {
27 |   0% { -webkit-transform: scale(0) }
28 |   100% {
29 |     -webkit-transform: scale(1.0);
30 |     opacity: 0;
31 |   }
32 | }
33 | 
34 | @keyframes sk-scaleout {
35 |   0% {
36 |     -webkit-transform: scale(0);
37 |     transform: scale(0);
38 |   } 100% {
39 |     -webkit-transform: scale(1.0);
40 |     transform: scale(1.0);
41 |     opacity: 0;
42 |   }
43 | }
44 | 


--------------------------------------------------------------------------------
/src/assets/styles/spec/components/masonry.scss:
--------------------------------------------------------------------------------
1 | 
2 | 


--------------------------------------------------------------------------------
/src/assets/styles/spec/components/pageContainer.scss:
--------------------------------------------------------------------------------
 1 | // ---------------------------------------------------------
 2 | // @TOC
 3 | // ---------------------------------------------------------
 4 | 
 5 | // + @Page Container
 6 | // + @Main Content
 7 | // + @Full Container
 8 | // + @Collapsed State
 9 | 
10 | // ---------------------------------------------------------
11 | // @Page Container
12 | // ---------------------------------------------------------
13 | 
14 | .page-container {
15 |   min-height: 100vh;
16 |   padding-left: $offscreen-size;
17 |   transition: all 0.2s ease;
18 | 
19 |   @include between($breakpoint-md, $breakpoint-xl) {
20 |     padding-left: $collapsed-size;
21 |   }
22 | 
23 |   @include to($breakpoint-md) {
24 |     padding-left: 0;
25 |   }
26 | }
27 | 
28 | // ---------------------------------------------------------
29 | // @Main Content
30 | // ---------------------------------------------------------
31 | 
32 | .main-content {
33 |   padding: 85px 20px 20px;
34 |   min-height: calc(100vh - 61px);
35 | 
36 |   @include to($breakpoint-md) {
37 |     padding: 85px 5px 5px;
38 |   }
39 | }
40 | 
41 | .remain-height {
42 |   height: calc(100vh - 126px);
43 | }
44 | 
45 | // ---------------------------------------------------------
46 | // @Full Container
47 | // ---------------------------------------------------------
48 | 
49 | .full-container {
50 |   left: $offscreen-size;
51 |   min-height: calc(100vh - #{$header-height});
52 |   position: absolute;
53 |   right: 0;
54 |   top: $header-height;
55 |   transition: all 0.2s ease;
56 | 
57 |   @include between($breakpoint-md, $breakpoint-xl) {
58 |     left: 0;
59 |     padding-left: $collapsed-size;
60 |   }
61 | 
62 |   @include to($breakpoint-md) {
63 |     left: 0;
64 |   }
65 | }
66 | 
67 | // ---------------------------------------------------------
68 | // @Collapsed State
69 | // ---------------------------------------------------------
70 | 
71 | .is-collapsed {
72 |   .page-container {
73 |     padding-left: $collapsed-size;
74 | 
75 |     @include to($breakpoint-md) {
76 |       padding-left: 0;
77 |     }
78 | 
79 |     @include between($breakpoint-md, $breakpoint-xl) {
80 |       padding-left: $offscreen-size;
81 |     }
82 |   }
83 | 
84 |   .full-container {
85 |     left: $collapsed-size;
86 | 
87 |     @include to($breakpoint-md) {
88 |       left: 0;
89 |     }
90 | 
91 |     @include between($breakpoint-md, $breakpoint-xl) {
92 |       left: $offscreen-size;
93 |       padding-left: 0;
94 |     }
95 |   }
96 | }
97 | 


--------------------------------------------------------------------------------
/src/assets/styles/spec/components/progressBar.scss:
--------------------------------------------------------------------------------
1 | .progress {
2 |   height: 4px;
3 |   background-color: #eaeef3;
4 |   border-radius: 4px;
5 |   margin-bottom: 10px;
6 | }
7 | 


--------------------------------------------------------------------------------
/src/assets/styles/spec/components/sidebar.scss:
--------------------------------------------------------------------------------
  1 | // ---------------------------------------------------------
  2 | // @TOC
  3 | // ---------------------------------------------------------
  4 | 
  5 | // + @Sidebar
  6 | // + @Sidebar Inner
  7 | // + @Sidebar Header
  8 | // + @Sidebar Menu
  9 | // + @Sidebar Collapsed
 10 | 
 11 | // ---------------------------------------------------------
 12 | // @Sidebar
 13 | // ---------------------------------------------------------
 14 | 
 15 | .sidebar {
 16 |   background-color: $default-white;
 17 |   bottom: 0;
 18 |   overflow: hidden;
 19 |   position: fixed;
 20 |   top: 0;
 21 |   transition: all 0.2s ease;
 22 |   width: $offscreen-size;
 23 |   z-index: 1000;
 24 | 
 25 |   ul {
 26 |     list-style-type: none;
 27 |   }
 28 | 
 29 |   @include between($breakpoint-md, $breakpoint-xl) {
 30 |     width: $collapsed-size;
 31 | 
 32 |     .sidebar-inner {
 33 |       .sidebar-logo {
 34 |         border-bottom: 1px solid transparent;
 35 |         padding: 0;
 36 | 
 37 |         a {
 38 |           .logo {
 39 |             background-position: center center;
 40 |             width: $collapsed-size;
 41 |           }
 42 |         }
 43 |       }
 44 | 
 45 |       .sidebar-menu {
 46 |         overflow-x: hidden;
 47 | 
 48 |         > li {
 49 |           > a {
 50 |             .title {
 51 |               display: none;
 52 |             }
 53 |           }
 54 |         }
 55 | 
 56 |         li {
 57 |           &.dropdown {
 58 |             .arrow {
 59 |               opacity: 0;
 60 |             }
 61 | 
 62 |             &.open {
 63 |               ul.dropdown-menu {
 64 |                 display: none !important;
 65 |               }
 66 |             }
 67 |           }
 68 |         }
 69 |       }
 70 |     }
 71 | 
 72 |     &:hover {
 73 |       width: $offscreen-size;
 74 | 
 75 |       .sidebar-inner {
 76 |         .sidebar-logo {
 77 |           border-bottom: 1px solid $border-color;
 78 |           padding: 0 20px;
 79 |         }
 80 | 
 81 |         .sidebar-menu {
 82 |           > li {
 83 |             > a {
 84 |               .title {
 85 |                 display: inline-block;
 86 |               }
 87 |             }
 88 |           }
 89 | 
 90 |           li {
 91 |             &.dropdown {
 92 |               .arrow {
 93 |                 opacity: 1;
 94 |               }
 95 |             }
 96 | 
 97 |             &.open {
 98 |               > ul.dropdown-menu {
 99 |                 display: block !important;
100 |               }
101 |             }
102 |           }
103 |         }
104 |       }
105 |     }
106 |   }
107 | 
108 |   @include to($breakpoint-md) {
109 |     left: -$offscreen-size;
110 |     width: calc(#{$offscreen-size} - 30px);
111 |   }
112 | }
113 | 
114 | // ---------------------------------------------------------
115 | // @Sidebar Inner
116 | // ---------------------------------------------------------
117 | 
118 | .sidebar-inner {
119 |   position: relative;
120 |   height: 100%;
121 | }
122 | 
123 | // ---------------------------------------------------------
124 | // @Sidebar Header
125 | // ---------------------------------------------------------
126 | 
127 | .sidebar-logo {
128 |   border-bottom: 1px solid $border-color;
129 |   border-right: 1px solid $border-color;
130 |   line-height: 0;
131 |   padding: 0 20px;
132 |   transition: all 0.2s ease;
133 | 
134 |   a {
135 |     display: inline-block;
136 |     width: 100%;
137 | 
138 |     .logo {
139 |       background-position: center left;
140 |       background-repeat: no-repeat;
141 |       display: inline-block;
142 |       min-height: calc(#{$header-height} - 1px);
143 |       width: 100%;
144 |       width: 70px;
145 |     }
146 | 
147 |     .logo-text {
148 |       color: $grey-900;
149 |     }
150 |   }
151 | 
152 |   .mobile-toggle {
153 |     display: none;
154 |     float: right;
155 |     font-size: 18px;
156 |     line-height: calc(#{$header-height} - 1px);
157 | 
158 |     a {
159 |       color: $default-text-color;
160 |     }
161 | 
162 |     @include to($breakpoint-md) {
163 |       display: inline-block;
164 |     }
165 | 
166 |     @include between($breakpoint-md, $breakpoint-xl) {
167 |       display: none;
168 |     }
169 |   }
170 | }
171 | 
172 | // ---------------------------------------------------------
173 | // @Sidebar Menu
174 | // ---------------------------------------------------------
175 | 
176 | .sidebar-menu {
177 |   @include clearfix;
178 |   border-right: 1px solid $border-color;
179 |   height: calc(100vh - #{$header-height});
180 |   list-style: none;
181 |   margin: 0;
182 |   overflow: auto;
183 |   padding: 0;
184 |   position: relative;
185 | 
186 |   .dropdown-toggle::after {
187 |     display: none;
188 |   }
189 | 
190 |   .sidebar-link {
191 |     &.actived::before {
192 |       background: $md-blue-500;
193 |       border-radius: 50%;
194 |       content: '';
195 |       display: block;
196 |       height: 8px;
197 |       left: -4px;
198 |       position: absolute;
199 |       top: calc(50% - 4px);
200 |       width: 8px;
201 |     }
202 |   }
203 | 
204 |   li {
205 |     position: relative;
206 | 
207 |     &.dropdown {
208 |       .arrow {
209 |         font-size: 10px;
210 |         line-height: 40px;
211 |         position: absolute;
212 |         right: 30px;
213 |         transition: all 0.05s ease-in;
214 | 
215 |         @include to($breakpoint-md) {
216 |           right: 25px;
217 |         }
218 |       }
219 | 
220 |       &.open {
221 |         > a {
222 |           color: $default-dark;
223 | 
224 |           .icon-holder {
225 |             color: $default-info;
226 |           }
227 | 
228 |           > .arrow {
229 |             transform: rotate(90deg);
230 |           }
231 |         }
232 | 
233 |         > .dropdown-menu {
234 |           display: block;
235 | 
236 |           .dropdown-menu {
237 |             padding-left: 20px;
238 |           }
239 | 
240 |           .arrow {
241 |             line-height: 25px;
242 |           }
243 |         }
244 |       }
245 |     }
246 | 
247 |     a {
248 |       color: $default-text-color;
249 |       transition: all 0.3s ease;
250 | 
251 |       &:hover,
252 |       &:focus {
253 |         color: $default-dark;
254 |         text-decoration: none;
255 | 
256 |         .icon-holder {
257 |           color: $default-info;
258 |         }
259 |       }
260 |     }
261 |   }
262 | 
263 |   > li {
264 |     &.dropdown {
265 |       ul {
266 |         &.dropdown-menu {
267 |           background-color: transparent;
268 |           border-radius: 0;
269 |           border: 0;
270 |           box-shadow: none;
271 |           float: none;
272 |           padding-left: 50px;
273 |           padding-top: 0;
274 |           position: relative;
275 |           width: 100%;
276 | 
277 |           > li {
278 |             > a {
279 |               display: block;
280 |               padding: 10px 15px;
281 | 
282 |               &:hover,
283 |               &:focus {
284 |                 background-color: transparent;
285 |                 color: $default-dark;
286 |               }
287 |             }
288 | 
289 |             &.actived {
290 |               a {
291 |                 color: $default-dark;
292 |               }
293 |             }
294 |           }
295 |         }
296 |       }
297 |     }
298 | 
299 |     > a {
300 |       display: block;
301 |       font-size: 15px;
302 |       font-weight: 500;
303 |       padding: 5px 15px;
304 |       position: relative;
305 |       white-space: nowrap;
306 | 
307 |       .icon-holder {
308 |         border-radius: 6px;
309 |         display: inline-block;
310 |         font-size: 17px;
311 |         height: 35px;
312 |         left: 0;
313 |         line-height: 35px;
314 |         margin-right: 14px;
315 |         position: relative;
316 |         text-align: center;
317 |         transition: all 0.3s ease;
318 |         width: 35px;
319 |       }
320 |     }
321 |   }
322 | }
323 | 
324 | // ---------------------------------------------------------
325 | // @Sidebar Collapsed
326 | // ---------------------------------------------------------
327 | 
328 | .is-collapsed {
329 |   .sidebar {
330 |     @include from($breakpoint-xl) {
331 |       width: $collapsed-size;
332 | 
333 |       .sidebar-inner {
334 |         .sidebar-logo {
335 |           border-bottom: 1px solid transparent;
336 |           padding: 0;
337 |         }
338 | 
339 |         .sidebar-menu {
340 |           overflow-x: hidden;
341 | 
342 |           > li {
343 |             > a {
344 |               .title {
345 |                 display: none;
346 |               }
347 |             }
348 |           }
349 | 
350 |           li {
351 |             &.dropdown {
352 |               .arrow {
353 |                 opacity: 0;
354 |               }
355 | 
356 |               &.open {
357 |                 ul.dropdown-menu {
358 |                   display: none !important;
359 |                 }
360 |               }
361 |             }
362 |           }
363 |         }
364 |       }
365 | 
366 |       &:hover {
367 |         width: $offscreen-size;
368 | 
369 |         .sidebar-inner {
370 |           .sidebar-logo {
371 |             border-bottom: 1px solid $border-color;
372 |             padding: 0 20px;
373 |           }
374 | 
375 |           .sidebar-menu {
376 |             > li {
377 |               > a {
378 |                 .title {
379 |                   display: inline-block;
380 |                 }
381 |               }
382 |             }
383 | 
384 |             li {
385 |               &.dropdown {
386 |                 .arrow {
387 |                   opacity: 1;
388 |                 }
389 |               }
390 | 
391 |               &.open {
392 |                 > ul.dropdown-menu {
393 |                   display: block !important;
394 |                 }
395 |               }
396 |             }
397 |           }
398 |         }
399 |       }
400 |     }
401 | 
402 |     @include between($breakpoint-md, $breakpoint-xl) {
403 |       width: $offscreen-size;
404 | 
405 |       .sidebar-inner {
406 |         .sidebar-logo {
407 |           border-bottom: 1px solid $border-color;
408 |           padding: 0 20px;
409 | 
410 |           > a {
411 |             .logo {
412 |               background-position: center left;
413 |               width: 150px;
414 |             }
415 |           }
416 |         }
417 | 
418 |         .sidebar-menu {
419 |           > li {
420 |             > a {
421 |               .title {
422 |                 display: inline-block;
423 |               }
424 |             }
425 |           }
426 | 
427 |           li {
428 |             &.dropdown {
429 |               .arrow {
430 |                 opacity: 1;
431 |               }
432 |             }
433 | 
434 |             &.open {
435 |               > ul.dropdown-menu {
436 |                 display: block !important;
437 |               }
438 |             }
439 |           }
440 |         }
441 |       }
442 |     }
443 | 
444 |     @include to($breakpoint-md) {
445 |       left: 0;
446 |     }
447 |   }
448 | }
449 | 


--------------------------------------------------------------------------------
/src/assets/styles/spec/components/topbar.scss:
--------------------------------------------------------------------------------
  1 | // ---------------------------------------------------------
  2 | // @TOC
  3 | 
  4 | // + @Topbar
  5 | // + @Collapsed State
  6 | 
  7 | // ---------------------------------------------------------
  8 | // @Topbar
  9 | // ---------------------------------------------------------
 10 | 
 11 | .header {
 12 |   background-color: $default-white;
 13 |   border-bottom: 1px solid $border-color;
 14 |   display: block;
 15 |   margin-bottom: 0;
 16 |   padding: 0;
 17 |   position: fixed;
 18 |   transition: all 0.2s ease;
 19 |   width: calc(100% - #{$offscreen-size});
 20 |   z-index: 800;
 21 | 
 22 |   @include to($breakpoint-md) {
 23 |     width: 100%;
 24 |   }
 25 | 
 26 |   @include between($breakpoint-md, $breakpoint-xl) {
 27 |     width: calc(100% - #{$collapsed-size});
 28 |   }
 29 | 
 30 |   .header-container {
 31 |     @include clearfix;
 32 | 
 33 |     height: $header-height;
 34 | 
 35 |     .nav-left,
 36 |     .nav-right {
 37 |       list-style: none;
 38 |       margin-bottom: 0;
 39 |       padding-left: 0;
 40 |       position: relative;
 41 | 
 42 |       > li {
 43 |         float: left;
 44 | 
 45 |         > a {
 46 |           color: $default-text-color;
 47 |           display: block;
 48 |           line-height: $header-height;
 49 |           min-height: $header-height;
 50 |           padding: 0 15px;
 51 |           transition: all 0.2s ease-in-out;
 52 | 
 53 |           i {
 54 |             font-size: 17px;
 55 |           }
 56 | 
 57 |           &:hover,
 58 |           &:focus {
 59 |             color: $default-dark;
 60 |             text-decoration: none;
 61 |           }
 62 | 
 63 |           @include to($breakpoint-md) {
 64 |             padding: 0 15px;
 65 |           }
 66 |         }
 67 |       }
 68 | 
 69 |       .notifications {
 70 |         position: relative;
 71 | 
 72 |         .counter {
 73 |           background-color: $default-danger;
 74 |           border-radius: 50px;
 75 |           color: $default-white;
 76 |           font-size: 10px;
 77 |           line-height: 1;
 78 |           padding: 3px 5.5px;
 79 |           position: absolute;
 80 |           right: 6px;
 81 |           top: 12px;
 82 |         }
 83 | 
 84 |         .dropdown-menu {
 85 |           min-width: 350px;
 86 |           padding: 0;
 87 | 
 88 |           @include to($breakpoint-sm) {
 89 |             max-width: 300px;
 90 |           }
 91 |         }
 92 |       }
 93 |     }
 94 | 
 95 |     .dropdown-menu {
 96 |       // display: block;
 97 |       margin: 0;
 98 |       transform-origin: top right;
 99 |       // transform: scale(0, 0);
100 |       transition: transform 0.15s ease-out;
101 | 
102 |       .divider {
103 |         border-bottom: 1px solid $border-color;
104 |         height: 1px;
105 |         overflow: hidden;
106 |       }
107 | 
108 |       > li {
109 |         > a {
110 |           transition: all 0.2s ease-out;
111 |         }
112 |       }
113 |     }
114 | 
115 |     .show {
116 |       .dropdown-menu {
117 |         transform: scale(1, 1);
118 |       }
119 |     }
120 | 
121 |     .nav-left {
122 |       float: left;
123 |       margin-left: 15px;
124 |     }
125 | 
126 |     .nav-right {
127 |       float: right;
128 | 
129 |       .dropdown-menu {
130 |         left: auto;
131 |         right: 0;
132 | 
133 |         > li {
134 |           width: 100%;
135 | 
136 |           > a {
137 |             line-height: 1.5;
138 |             min-height: auto;
139 |             padding: 10px 15px;
140 |           }
141 |         }
142 |       }
143 |     }
144 |   }
145 | 
146 |   .search-box {
147 |     .search-icon-close {
148 |       display: none;
149 |     }
150 | 
151 |     &.active {
152 |       .search-icon {
153 |         display: none;
154 |       }
155 | 
156 |       .search-icon-close {
157 |         display: inline-block;
158 |       }
159 |     }
160 |   }
161 | 
162 |   .search-input {
163 |     display: none;
164 | 
165 |     &.active {
166 |       display: inline-block;
167 |     }
168 | 
169 |     input {
170 |       background-color: transparent;
171 |       border: 0;
172 |       box-shadow: none;
173 |       font-size: 18px;
174 |       height: 40px;
175 |       margin-top: 12px;
176 |       outline: none;
177 |       padding: 5px;
178 | 
179 |       @include to($breakpoint-sm) {
180 |         width: 85px;
181 |       }
182 | 
183 |       @include placeholder {
184 |         color: lighten($default-text-color, 20%);
185 |         font-style: italic;
186 |       }
187 |     }
188 |   }
189 | }
190 | 
191 | // ---------------------------------------------------------
192 | // @Collapsed State
193 | // ---------------------------------------------------------
194 | 
195 | .is-collapsed {
196 |   .header {
197 |     width: calc(100% - #{$collapsed-size});
198 | 
199 |     @include to($breakpoint-md) {
200 |       width: 100%;
201 |     }
202 | 
203 |     @include between($breakpoint-md, $breakpoint-xl) {
204 |       width: calc(100% - #{$offscreen-size});
205 |     }
206 |   }
207 | }
208 | 


--------------------------------------------------------------------------------
/src/assets/styles/spec/generic/base.scss:
--------------------------------------------------------------------------------
 1 | html, html a, body {
 2 |   -webkit-font-smoothing: antialiased;
 3 | }
 4 | 
 5 | a {
 6 |   transition: all 0.3s ease-in-out;
 7 |   text-decoration: none;
 8 | }
 9 | 
10 | body {
11 |   font-family: $font-primary;
12 |   font-size: 14px;
13 |   color: $default-text-color;
14 |   line-height: 1.5;
15 |   letter-spacing: 0.2px;
16 |   overflow-x: hidden;
17 | }
18 | 
19 | h1,
20 | h2,
21 | h3,
22 | h4,
23 | h5,
24 | h6 {
25 |   font-family: $font-secondary;
26 |   letter-spacing: 0.5px;
27 |   line-height: 1.5;
28 | 
29 |   a {
30 |     font-family: $font-secondary;
31 |   }
32 | 
33 |   small {
34 |     font-weight: 300;
35 |     color: lighten($default-dark, 5%);
36 |   }
37 | }
38 | 
39 | p {
40 |   font-family: $font-primary;
41 |   line-height: 1.9;
42 | }
43 | 
44 | .lead {
45 |   font-size: 18px;
46 | }
47 | 
48 | ul {
49 |   margin-bottom: 0;
50 | }
51 | 
52 | a {
53 |   color: $default-info;
54 | 
55 |   &:hover,
56 |   &:focus {
57 |     text-decoration: none;
58 |     color: darken($default-info, 10%);
59 |   }
60 | 
61 |   &:focus {
62 |     outline: none;
63 |   }
64 | 
65 |   &.text-gray {
66 |     &:hover,
67 |     &:focus,
68 |     &.active {
69 |       color: $default-dark !important;
70 |     }
71 |   }
72 | }
73 | 
74 | :focus {
75 |   outline: none;
76 | }
77 | 
78 | hr {
79 |   border-top: 1px solid $border-color;
80 | }
81 | 
82 | 
83 | a.btn {
84 |     color:#fff;
85 |   }
86 | 
87 | a.btn:hover {
88 |   color:#fff;
89 | }
90 | 
91 | .btn-color {
92 |   color:#fff;
93 | }
94 | 
95 | .btn-color:hover {
96 |   color:#fff;
97 | }
98 | 


--------------------------------------------------------------------------------
/src/assets/styles/spec/generic/index.scss:
--------------------------------------------------------------------------------
1 | @import 'base';
2 | 


--------------------------------------------------------------------------------
/src/assets/styles/spec/index.scss:
--------------------------------------------------------------------------------
1 | @import 'generic/index';
2 | @import 'components/index';
3 | @import 'screens/index';
4 | @import 'utils/index';
5 | 


--------------------------------------------------------------------------------
/src/assets/styles/spec/screens/chat.scss:
--------------------------------------------------------------------------------
 1 | #chat-sidebar {
 2 |   width: 250px;
 3 |   height: calc(100vh - #{$header-height} - 60px);
 4 |   overflow: auto;
 5 | 
 6 |   @include to($breakpoint-md) {
 7 |     transition: all 0.3s ease-in-out;
 8 |     margin-left: -250px;
 9 | 
10 |     &.open {
11 |       margin-left: 0;
12 |     }
13 |   }
14 | }
15 | 
16 | #chat-box {
17 |   height: calc(100vh - #{$header-height} - 60px);
18 |   overflow: auto;
19 | }
20 | 


--------------------------------------------------------------------------------
/src/assets/styles/spec/screens/email.scss:
--------------------------------------------------------------------------------
  1 | .email-app {
  2 |   .email-side-nav {
  3 |     background: $default-white;
  4 |     position: fixed;
  5 |     border-right: 1px solid $border-color;
  6 |     float: left;
  7 |     width: 250px;
  8 |     transition: all 0.3s ease-in-out;
  9 | 
 10 |     @include to($breakpoint-md) {
 11 |       z-index: 1;
 12 |       left: -250px;
 13 |     }
 14 |   }
 15 | 
 16 |   .email-wrapper {
 17 |     margin: 0;
 18 |     padding: 0;
 19 |     overflow: auto;
 20 |     min-height: 100%;
 21 |     transition: all 0.3s ease-in-out;
 22 | 
 23 |     @include to($breakpoint-md) {
 24 |       position: absolute;
 25 |       left: 0;
 26 |       width: 100%;
 27 |       overflow-x: hidden;
 28 |     }
 29 | 
 30 |     @include from($breakpoint-md) {
 31 |       margin-left: 250px;
 32 |     }
 33 | 
 34 |     .email-list {
 35 |       position: relative;
 36 |       padding: 0;
 37 |       width: 100%;
 38 |       overflow-y: hidden;
 39 |       background-color: $default-white;
 40 |       height: calc(100vh - #{$header-height});
 41 | 
 42 |       @include to($breakpoint-md) {
 43 |         max-height: calc(100vh - 65px);
 44 |       }
 45 | 
 46 |       @include from($breakpoint-md) {
 47 |         width: 40%;
 48 |         border-right: 1px solid $border-color;
 49 |         float: left;
 50 |       }
 51 |     }
 52 | 
 53 |     .email-content {
 54 |       float: left;
 55 |       width: 60%;
 56 |       position: relative;
 57 |       padding: 0;
 58 |       background-color: $default-white;
 59 |       // min-height: calc(100vh - #{$header-height});
 60 | 
 61 |       &.no-inbox-view {
 62 |         width: 100%;
 63 |       }
 64 | 
 65 |       @include to($breakpoint-md) {
 66 |         position: absolute;
 67 |         top: 0;
 68 |         left: 100%;
 69 |         width: 100%;
 70 |         height: 100%;
 71 |         transition: all 0.3s ease-in-out;
 72 |         max-height: calc(100vh - #{$header-height});
 73 |         overflow-y: scroll;
 74 | 
 75 |         &.open {
 76 |           left: 0;
 77 |         }
 78 |       }
 79 |     }
 80 | 
 81 |       .email-compose {
 82 |         position: relative;
 83 |       .email-compose-body {
 84 |         padding: 30px 20px;
 85 | 
 86 |       }
 87 |       }
 88 |     }
 89 | 
 90 | 
 91 |     &.side-active {
 92 |       .email-side-nav {
 93 |         @include to($breakpoint-md) {
 94 |           left: 0;
 95 |         }
 96 |       }
 97 | 
 98 |       .email-wrapper {
 99 |         @include to($breakpoint-md) {
100 |           left: 250px;
101 |         }
102 |       }
103 |     }
104 | }
105 | 


--------------------------------------------------------------------------------
/src/assets/styles/spec/screens/index.scss:
--------------------------------------------------------------------------------
1 | @import 'chat';
2 | @import 'email';
3 | 


--------------------------------------------------------------------------------
/src/assets/styles/spec/settings/baseColors.scss:
--------------------------------------------------------------------------------
  1 | // ---------------------------------------------------------
  2 | // @TOC
  3 | // ---------------------------------------------------------
  4 | 
  5 | // + @Greyscale Colors
  6 | // + @Bootstrap Color System
  7 | // + @Default Colors
  8 | // + @Inverted Colors
  9 | // + @Others
 10 | // + @Header Themes
 11 | // + @Social Networks Colors
 12 | 
 13 | // ---------------------------------------------------------
 14 | // @Greyscale Colors
 15 | // ---------------------------------------------------------
 16 | 
 17 | // Colors below are ordered from lightest to darkest
 18 | 
 19 | $grey-100             : #f9fafb;
 20 | $grey-200             : #f2f3f5;
 21 | $grey-300             : #e6eaf0;
 22 | $grey-400             : #d3d9e3;
 23 | $grey-500             : #b9c2d0;
 24 | $grey-600             : #7c8695;
 25 | $grey-700             : #72777a;
 26 | $grey-800             : #565a5c;
 27 | $grey-900             : #313435;
 28 | 
 29 | $grey-colors-alt: (
 30 |   grey-100 : #f9fafb,
 31 |   grey-200 : #f2f3f5,
 32 |   grey-300 : #e6eaf0,
 33 |   grey-400 : #d3d9e3,
 34 |   grey-500 : #b9c2d0,
 35 |   grey-600 : #7c8695,
 36 |   grey-700 : #72777a,
 37 |   grey-800 : #565a5c,
 38 |   grey-900 : #313435,
 39 | );
 40 | 
 41 | // ---------------------------------------------------------
 42 | // @Bootstrap Color System
 43 | // ---------------------------------------------------------
 44 | 
 45 | $blue   : $md-blue-500;
 46 | $indigo : $md-indigo-500;
 47 | $purple : $md-purple-500;
 48 | $pink   : $md-pink-500;
 49 | $red    : $md-red-500;
 50 | $orange : $md-orange-500;
 51 | $yellow : $md-yellow-500;
 52 | $green  : $md-green-500;
 53 | $teal   : $md-teal-500;
 54 | $cyan   : $md-cyan-500;
 55 | 
 56 | // ---------------------------------------------------------
 57 | // @Default Colors
 58 | // ---------------------------------------------------------
 59 | 
 60 | $default-danger       : #ff3c7e;
 61 | $default-dark         : #313435;
 62 | $default-grey         : #565a5c;
 63 | $default-info         : #0f9aee;
 64 | $default-primary      : #7774e7;
 65 | $default-success      : #37c936;
 66 | $default-text-color   : #72777a;
 67 | $default-warning      : #fc0;
 68 | $default-white        : #fff;
 69 | 
 70 | // ---------------------------------------------------------
 71 | // @Inverted Colors
 72 | // ---------------------------------------------------------
 73 | 
 74 | $inverse-danger       : lighten($default-danger, 35%);
 75 | $inverse-info         : lighten($default-info, 45%);
 76 | $inverse-primary      : lighten($default-primary, 30%);
 77 | $inverse-success      : lighten($default-success, 45%);
 78 | $inverse-warning      : lighten($default-warning, 45%);
 79 | 
 80 | // ---------------------------------------------------------
 81 | // @Others
 82 | // ---------------------------------------------------------
 83 | 
 84 | $border-color         : #e6ecf5;
 85 | $collapsed-size       : 70px;
 86 | $header-height        : 65px;
 87 | $offscreen-size       : 280px;
 88 | $side-nav-dark        : #313644;
 89 | $side-nav-dark-border : rgba(120, 130, 140, 0.3);
 90 | $side-nav-dark-font   : #99abb4;
 91 | 
 92 | // ---------------------------------------------------------
 93 | // @Header Themes
 94 | // ---------------------------------------------------------
 95 | 
 96 | $theme-danger         : #f53f61;
 97 | $theme-dark           : lighten($side-nav-dark, 10%);
 98 | $theme-info           : $default-info;
 99 | $theme-primary        : $default-primary;
100 | $theme-success        : desaturate($default-success, 5%);
101 | 


--------------------------------------------------------------------------------
/src/assets/styles/spec/settings/borders.scss:
--------------------------------------------------------------------------------
1 | // ---------------------------------------------------------
2 | // @Borders
3 | // ---------------------------------------------------------
4 | 
5 | $border-width: 1px;
6 | $border-color: rgba(0, 0, 0, 0.0625);
7 | 


--------------------------------------------------------------------------------
/src/assets/styles/spec/settings/breakpoints.scss:
--------------------------------------------------------------------------------
 1 | // ---------------------------------------------------------
 2 | // @Breakpoints
 3 | // ---------------------------------------------------------
 4 | 
 5 | $breakpoint-xl : 1440px;
 6 | $breakpoint-lg : 1200px;
 7 | $breakpoint-md : 992px;
 8 | $breakpoint-sm : 768px;
 9 | $breakpoint-xs : 0;
10 | 
11 | $breakpoints: (
12 |   "xl\\+" "screen and (min-width: #{$breakpoint-xl})",
13 |   "lg\\+" "screen and (min-width: #{$breakpoint-lg})",
14 |   "md\\+" "screen and (min-width: #{$breakpoint-md})",
15 |   "sm\\+" "screen and (min-width: #{$breakpoint-sm})",
16 |   "xs\\+" "screen and (min-width: #{$breakpoint-xs})",
17 | 
18 |   "xl-" "screen and (max-width: #{$breakpoint-xl - 1px})",
19 |   "lg-" "screen and (max-width: #{$breakpoint-lg - 1px})",
20 |   "md-" "screen and (max-width: #{$breakpoint-md - 1px})",
21 |   "sm-" "screen and (max-width: #{$breakpoint-sm - 1px})",
22 | 
23 |   "lg" "screen and (min-width: #{$breakpoint-lg - 1px}) and (max-width: #{$breakpoint-xl - 1px})",
24 |   "md" "screen and (min-width: #{$breakpoint-md - 1px}) and (max-width: #{$breakpoint-lg - 1px})",
25 |   "sm" "screen and (min-width: #{$breakpoint-sm - 1px}) and (max-width: #{$breakpoint-md - 1px})",
26 | );
27 | 


--------------------------------------------------------------------------------
/src/assets/styles/spec/settings/fonts.scss:
--------------------------------------------------------------------------------
1 | $font-primary:
2 |   Roboto, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
3 | $font-secondary: $font-primary;
4 | $font-size-base:              0.875rem;
5 | 


--------------------------------------------------------------------------------
/src/assets/styles/spec/settings/index.scss:
--------------------------------------------------------------------------------
1 | @import 'breakpoints';
2 | @import 'fonts';
3 | @import 'brand-colors/dist/latest/scss/brand-colors.latest.scss';
4 | @import 'materialColors';
5 | @import 'baseColors';
6 | @import 'borders';
7 | 


--------------------------------------------------------------------------------
/src/assets/styles/spec/tools/index.scss:
--------------------------------------------------------------------------------
1 | @import 'mixins/index';
2 | 


--------------------------------------------------------------------------------
/src/assets/styles/spec/tools/mixins/clearfix.scss:
--------------------------------------------------------------------------------
 1 | //----------------------------------------------------------
 2 | // @Clearfix
 3 | //----------------------------------------------------------
 4 | 
 5 | @mixin clearfix {
 6 |   &::before,
 7 |   &::after {
 8 |     content: ' ';
 9 |     display: table;
10 |   }
11 | 
12 |   &::after {
13 |     clear: both;
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/src/assets/styles/spec/tools/mixins/index.scss:
--------------------------------------------------------------------------------
1 | @import 'placeholder';
2 | @import 'clearfix';
3 | @import 'mediaQueriesRanges';
4 | 


--------------------------------------------------------------------------------
/src/assets/styles/spec/tools/mixins/mediaQueriesRanges.scss:
--------------------------------------------------------------------------------
 1 | // ---------------------------------------------------------
 2 | // @TOC
 3 | // ---------------------------------------------------------
 4 | 
 5 | // + @General Media Query
 6 | // + @All Above Media Query
 7 | // + @All Under Media Query
 8 | // + @Between Two Devices Media Query
 9 | 
10 | // ---------------------------------------------------------
11 | // @General Media Query Mixin
12 | // ---------------------------------------------------------
13 | 
14 | // Mixin used for custom rules that don't follow
15 | // any of the following premade media queries.
16 | 
17 | @mixin mq($condition) {
18 |   @media #{$condition} {
19 |     @content;
20 |   }
21 | }
22 | 
23 | // ---------------------------------------------------------
24 | // @All Above Media Query Mixin
25 | // ---------------------------------------------------------
26 | 
27 | // Mixin used to match certain breakpoint
28 | // and all devices above it.
29 | 
30 | @mixin from($breakpoint) {
31 |   @media screen and (min-width: $breakpoint){
32 |     @content;
33 |   }
34 | }
35 | 
36 | // ---------------------------------------------------------
37 | // @All Under Media Query Mixin
38 | // ---------------------------------------------------------
39 | 
40 | // Mixin used to match all devices under certain breakpoint.
41 | 
42 | @mixin to($breakpoint) {
43 |   @media screen and (max-width: $breakpoint - 1px) {
44 |     @content;
45 |   }
46 | }
47 | 
48 | // ---------------------------------------------------------
49 | // @Between Two Devices Media Query Mixin
50 | // ---------------------------------------------------------
51 | 
52 | // Mixin used to match the devices between 2 breakpoints.
53 | 
54 | @mixin between($start, $end){
55 |   @media screen and (min-width: $start) and (max-width: $end - 1px) {
56 |     @content;
57 |   }
58 | }
59 | 


--------------------------------------------------------------------------------
/src/assets/styles/spec/tools/mixins/placeholder.scss:
--------------------------------------------------------------------------------
 1 | //----------------------------------------------------------
 2 | // @Placeholder
 3 | //----------------------------------------------------------
 4 | 
 5 | @mixin placeholder {
 6 |   &::-webkit-input-placeholder { @content; }
 7 |   &:-moz-placeholder { @content; }
 8 |   &::-moz-placeholder { @content; }
 9 |   &:-ms-input-placeholder { @content; }
10 | }
11 | 


--------------------------------------------------------------------------------
/src/assets/styles/spec/utils/colors.scss:
--------------------------------------------------------------------------------
 1 | // ---------------------------------------------------------
 2 | // @TOC
 3 | // ---------------------------------------------------------
 4 | 
 5 | // + @Material Color
 6 | // + @Grey Colors
 7 | 
 8 | // ---------------------------------------------------------
 9 | // @Material Color
10 | // ---------------------------------------------------------
11 | 
12 | @each $item, $color in $md-colors {
13 |   .c-#{"" + $item},     .cH-#{"" + $item}:hover      { color: $color !important; }
14 |   .bgc-#{"" + $item},   .bgcH-#{"" + $item}:hover    { background-color: $color !important; }
15 |   .bdc-#{"" + $item},   .bdcH-#{"" + $item}:hover    { border-color: $color !important; }
16 |   .fill-#{"" + $item},  .fillH-#{"" + $item}:hover   { fill: $color !important; }
17 |   .str-#{"" + $item},   .strH-#{"" + $item}:hover    { stroke: $color !important; }
18 | }
19 | 
20 | // ---------------------------------------------------------
21 | // @Grey Colors
22 | // ---------------------------------------------------------
23 | 
24 | @each $item, $color in $grey-colors-alt {
25 |   .c-#{"" + $item},     .cH-#{"" + $item}:hover      { color: $color !important; }
26 |   .bgc-#{"" + $item},   .bgcH-#{"" + $item}:hover    { background-color: $color !important; }
27 |   .bdc-#{"" + $item},   .bdcH-#{"" + $item}:hover    { border-color: $color !important; }
28 |   .fill-#{"" + $item},  .fillH-#{"" + $item}:hover   { fill: $color !important; }
29 |   .str-#{"" + $item},   .strH-#{"" + $item}:hover    { stroke: $color !important; }
30 | }
31 | 


--------------------------------------------------------------------------------
/src/assets/styles/spec/utils/index.scss:
--------------------------------------------------------------------------------
1 | @import 'layout/index';
2 | @import 'colors';
3 | 


--------------------------------------------------------------------------------
/src/assets/styles/spec/utils/layout/helpers/border.scss:
--------------------------------------------------------------------------------
 1 | // ---------------------------------------------------------
 2 | // @TOC
 3 | // ---------------------------------------------------------
 4 | 
 5 | // + @Quick Border Helpers
 6 | // + @Border Width
 7 | // + @Border Radius
 8 | // + @Border Style
 9 | 
10 | // ---------------------------------------------------------
11 | // @Quick Border Helpers
12 | // ---------------------------------------------------------
13 | 
14 | .bd  { border: #{$border-width} solid #{$border-color} !important; }
15 | .bdT { border-top: #{$border-width} solid #{$border-color} !important; }
16 | .bdR { border-right: #{$border-width} solid #{$border-color} !important; }
17 | .bdB { border-bottom: #{$border-width} solid #{$border-color} !important; }
18 | .bdL { border-left: #{$border-width} solid #{$border-color} !important; }
19 | 
20 | // ---------------------------------------------------------
21 | // @Border Width
22 | // ---------------------------------------------------------
23 | 
24 | @for $i from 0 through 5 {
25 |   .bdw-#{$i}  { border-width: #{$i}px !important; }
26 |   .bdwT-#{$i} { border-top-width: #{$i}px !important; }
27 |   .bdwR-#{$i} { border-right-width: #{$i}px !important; }
28 |   .bdwB-#{$i} { border-bottom-width: #{$i}px !important; }
29 |   .bdwL-#{$i} { border-left-width: #{$i}px !important; }
30 | }
31 | 
32 | // ---------------------------------------------------------
33 | // @Border Radius
34 | // ---------------------------------------------------------
35 | 
36 | @for $i from 0 to 5 {
37 |   .bdrs-#{$i} { border-radius: #{$i}px !important; }
38 | 
39 |   .bdrsT-#{$i} {
40 |     border-top-left-radius: #{$i}px !important;
41 |     border-top-right-radius: #{$i}px !important;
42 |   }
43 | 
44 |   .bdrsR-#{$i} {
45 |     border-top-right-radius: #{$i}px !important;
46 |     border-bottom-right-radius: #{$i}px !important;
47 |   }
48 | 
49 |   .bdrsB-#{$i} {
50 |     border-bottom-left-radius: #{$i}px !important;
51 |     border-bottom-right-radius: #{$i}px !important;
52 |   }
53 | 
54 |   .bdrsL-#{$i} {
55 |     border-top-left-radius: #{$i}px !important;
56 |     border-bottom-left-radius: #{$i}px !important;
57 |   }
58 | }
59 | 
60 | .bdrs-50p  { border-radius: 50% !important; }
61 | .bdrs-10em { border-radius: 10em !important; }
62 | 
63 | // ---------------------------------------------------------
64 | // @Border Style
65 | // ---------------------------------------------------------
66 | 
67 | .bds-n  { border-style: none !important; }
68 | .bds-s  { border-style: solid !important; }
69 | .bds-dt { border-style: dotted !important; }
70 | .bds-ds { border-style: dashed !important; }
71 | .bds-db { border-style: double !important; }
72 | .bds-g  { border-style: groove !important; }
73 | .bds-r  { border-style: ridge !important; }
74 | .bds-i  { border-style: inset !important; }
75 | .bds-o  { border-style: outset !important; }
76 | 


--------------------------------------------------------------------------------
/src/assets/styles/spec/utils/layout/helpers/flex.scss:
--------------------------------------------------------------------------------
  1 | // ---------------------------------------------------------
  2 | // @TOC
  3 | // ---------------------------------------------------------
  4 | 
  5 | // + @Variables
  6 | // + @Flex Wrap
  7 | // + @Flex Direction
  8 | // + @Flex
  9 | // + @Flex Basis
 10 | // + @Flex Grow
 11 | // + @Flex Shrink
 12 | // + @Flex Order
 13 | 
 14 | // ---------------------------------------------------------
 15 | // @Variables
 16 | // ---------------------------------------------------------
 17 | 
 18 | $responsive: true;
 19 | 
 20 | // ---------------------------------------------------------
 21 | // @Display
 22 | // ---------------------------------------------------------
 23 | 
 24 | .d-f     { display: flex; }
 25 | .d-if    { display: inline-flex; }
 26 | 
 27 | @if ($responsive == true) {
 28 |   @include generateResponsive() {
 29 |     .d-f\@#{$breakpointAlias}     { display: flex; }
 30 |     .d-if\@#{$breakpointAlias}    { display: inline-flex; }
 31 |   }
 32 | }
 33 | 
 34 | // ---------------------------------------------------------
 35 | // @Flex Wrap
 36 | // ---------------------------------------------------------
 37 | 
 38 | .fxw-w   { flex-wrap: wrap; }
 39 | .fxw-wr  { flex-wrap: wrap-reverse; }
 40 | .fxw-nw  { flex-wrap: nowrap; }
 41 | 
 42 | @if ($responsive == true) {
 43 |   @include generateResponsive() {
 44 |     .fxw-w\@#{$breakpointAlias}   { flex-wrap: wrap; }
 45 |     .fxw-wr\@#{$breakpointAlias}  { flex-wrap: wrap-reverse; }
 46 |     .fxw-nw\@#{$breakpointAlias}  { flex-wrap: nowrap; }
 47 |   }
 48 | }
 49 | 
 50 | // ---------------------------------------------------------
 51 | // @Flex Direction
 52 | // ---------------------------------------------------------
 53 | 
 54 | .fxd-c   { flex-direction: column; }
 55 | .fxd-cr  { flex-direction: column-reverse; }
 56 | .fxd-r   { flex-direction: row; }
 57 | .fxd-rr  { flex-direction: row-reverse; }
 58 | 
 59 | @if ($responsive == true) {
 60 |   @include generateResponsive() {
 61 |     .fxd-c\@#{$breakpointAlias}   { flex-direction: column; }
 62 |     .fxd-cr\@#{$breakpointAlias}  { flex-direction: column-reverse; }
 63 |     .fxd-r\@#{$breakpointAlias}   { flex-direction: row; }
 64 |     .fxd-rr\@#{$breakpointAlias}  { flex-direction: row-reverse; }
 65 |   }
 66 | }
 67 | 
 68 | // ---------------------------------------------------------
 69 | // @Align Items
 70 | // ---------------------------------------------------------
 71 | 
 72 | .ai-fs   { align-items: flex-start; }
 73 | .ai-fe   { align-items: flex-end; }
 74 | .ai-c    { align-items: center; }
 75 | .ai-b    { align-items: baseline; }
 76 | .ai-s    { align-items: stretch; }
 77 | 
 78 | @if ($responsive == true) {
 79 |   @include generateResponsive() {
 80 |     .ai-fs\@#{$breakpointAlias}   { align-items: flex-start; }
 81 |     .ai-fe\@#{$breakpointAlias}   { align-items: flex-end; }
 82 |     .ai-c\@#{$breakpointAlias}    { align-items: center; }
 83 |     .ai-b\@#{$breakpointAlias}    { align-items: baseline; }
 84 |     .ai-s\@#{$breakpointAlias}    { align-items: stretch; }
 85 |   }
 86 | }
 87 | 
 88 | // ---------------------------------------------------------
 89 | // @Align Self
 90 | // ---------------------------------------------------------
 91 | 
 92 | .as-fs   { align-self: flex-start; }
 93 | .as-fe   { align-self: flex-end; }
 94 | .as-c    { align-self: center; }
 95 | .as-b    { align-self: baseline; }
 96 | .as-s    { align-self: stretch; }
 97 | 
 98 | @if ($responsive == true) {
 99 |   @include generateResponsive() {
100 |     .as-fs\@#{$breakpointAlias}   { align-self: flex-start; }
101 |     .as-fe\@#{$breakpointAlias}   { align-self: flex-end; }
102 |     .as-c\@#{$breakpointAlias}    { align-self: center; }
103 |     .as-b\@#{$breakpointAlias}    { align-self: baseline; }
104 |     .as-s\@#{$breakpointAlias}    { align-self: stretch; }
105 |   }
106 | }
107 | 
108 | // ---------------------------------------------------------
109 | // @Align Content
110 | // ---------------------------------------------------------
111 | 
112 | .ac-fs   { align-content: flex-start; }
113 | .ac-fe   { align-content: flex-end; }
114 | .ac-c    { align-content: center; }
115 | .ac-s    { align-content: stretch; }
116 | .ac-sb   { align-content: space-between; }
117 | .ac-sa   { align-content: space-around; }
118 | 
119 | @if ($responsive == true) {
120 |   @include generateResponsive() {
121 |     .ac-fs\@#{$breakpointAlias}   { align-content: flex-start; }
122 |     .ac-fe\@#{$breakpointAlias}   { align-content: flex-end; }
123 |     .ac-c\@#{$breakpointAlias}    { align-content: center; }
124 |     .ac-s\@#{$breakpointAlias}    { align-content: stretch; }
125 |     .ac-sb\@#{$breakpointAlias}   { align-content: space-between; }
126 |     .ac-sa\@#{$breakpointAlias}   { align-content: space-around; }
127 |   }
128 | }
129 | 
130 | // ---------------------------------------------------------
131 | // @Justify Content
132 | // ---------------------------------------------------------
133 | 
134 | .jc-fs   { justify-content: flex-start; }
135 | .jc-fe   { justify-content: flex-end; }
136 | .jc-c    { justify-content: center; }
137 | .jc-sb   { justify-content: space-between; }
138 | .jc-sa   { justify-content: space-around; }
139 | 
140 | @if ($responsive == true) {
141 |   @include generateResponsive() {
142 |     .jc-fs\@#{$breakpointAlias}   { justify-content: flex-start; }
143 |     .jc-fe\@#{$breakpointAlias}   { justify-content: flex-end; }
144 |     .jc-c\@#{$breakpointAlias}    { justify-content: center; }
145 |     .jc-sb\@#{$breakpointAlias}   { justify-content: space-between; }
146 |     .jc-sa\@#{$breakpointAlias}   { justify-content: space-around; }
147 |   }
148 | }
149 | 
150 | // ---------------------------------------------------------
151 | // @Flex
152 | // ---------------------------------------------------------
153 | 
154 | .fx-n    { flex: none; }
155 | .fx-1    { flex: 1; }
156 | 
157 | @if ($responsive == true) {
158 |   @include generateResponsive() {
159 |     .fx-n\@#{$breakpointAlias}    { flex: none; }
160 |     .fx-1\@#{$breakpointAlias}    { flex: 1; }
161 |   }
162 | }
163 | 
164 | // ---------------------------------------------------------
165 | // @Flex Basis
166 | // ---------------------------------------------------------
167 | 
168 | .fxb-a   { flex-basis: auto; }
169 | .fxb-0   { flex-basis: 0; }
170 | 
171 | @if ($responsive == true) {
172 |   @include generateResponsive() {
173 |     .fxb-a\@#{$breakpointAlias}   { flex-basis: auto; }
174 |     .fxb-0\@#{$breakpointAlias}   { flex-basis: 0; }
175 |   }
176 | }
177 | 
178 | // ---------------------------------------------------------
179 | // @Flex Grow
180 | // ---------------------------------------------------------
181 | 
182 | .fxg-1   { flex-grow: 1; }
183 | .fxg-0   { flex-grow: 0; }
184 | 
185 | @if ($responsive == true) {
186 |   @include generateResponsive() {
187 |     .fxg-1\@#{$breakpointAlias}   { flex-grow: 1; }
188 |     .fxg-0\@#{$breakpointAlias}   { flex-grow: 0; }
189 |   }
190 | }
191 | 
192 | // ---------------------------------------------------------
193 | // @Flex Shrink
194 | // ---------------------------------------------------------
195 | 
196 | .fxs-1   { flex-shrink: 1; }
197 | .fxs-0   { flex-shrink: 0; }
198 | 
199 | @if ($responsive == true) {
200 |   @include generateResponsive() {
201 |     .fxs-1\@#{$breakpointAlias}   { flex-shrink: 1; }
202 |     .fxs-0\@#{$breakpointAlias}   { flex-shrink: 0; }
203 |   }
204 | }
205 | 
206 | // ---------------------------------------------------------
207 | // @Flex Order
208 | // ---------------------------------------------------------
209 | 
210 | @for $i from 0 through 12 {
211 |   .ord-#{$i} { order: $i; }
212 | 
213 |   @if ($responsive == true) {
214 |     @include generateResponsive() {
215 |       .ord-#{$i}\@#{$breakpointAlias} { order: $i; }
216 |     }
217 |   }
218 | }
219 | 


--------------------------------------------------------------------------------
/src/assets/styles/spec/utils/layout/helpers/index.scss:
--------------------------------------------------------------------------------
 1 | @import 'flex';
 2 | @import 'layout';
 3 | @import 'lists';
 4 | @import 'margin';
 5 | @import 'objects';
 6 | @import 'padding';
 7 | @import 'positions';
 8 | @import 'sizes';
 9 | @import 'typography';
10 | @import 'border';
11 | @import 'pseudo';
12 | 


--------------------------------------------------------------------------------
/src/assets/styles/spec/utils/layout/helpers/layout.scss:
--------------------------------------------------------------------------------
  1 | // ---------------------------------------------------------
  2 | // @TOC
  3 | // ---------------------------------------------------------
  4 | 
  5 | // + @Variables
  6 | // + @Display
  7 | // + @Overflow
  8 | // + @Float
  9 | // + @Vertical Align
 10 | // + @Position
 11 | // + @Z-Index
 12 | 
 13 | // ---------------------------------------------------------
 14 | // @Variables
 15 | // ---------------------------------------------------------
 16 | 
 17 | $responsive: true;
 18 | 
 19 | // ---------------------------------------------------------
 20 | // @Display
 21 | // ---------------------------------------------------------
 22 | 
 23 | .d-b          { display: block !important; }
 24 | .d-ib         { display: inline-block !important; }
 25 | .d-i          { display: inline !important; }
 26 | .d-tb         { display: table !important; }
 27 | .d-tbc        { display: table-cell !important; }
 28 | .d-n          { display: none !important; }
 29 | 
 30 | @if ($responsive == true) {
 31 |   @include generateResponsive() {
 32 |     .d-b\@#{$breakpointAlias}      { display: block !important; }
 33 |     .d-ib\@#{$breakpointAlias}     { display: inline-block !important; }
 34 |     .d-i\@#{$breakpointAlias}      { display: inline !important; }
 35 |     .d-tb\@#{$breakpointAlias}     { display: table !important; }
 36 |     .d-tbc\@#{$breakpointAlias}    { display: table-cell !important; }
 37 |     .d-n\@#{$breakpointAlias}      { display: none !important; }
 38 |   }
 39 | }
 40 | 
 41 | // ---------------------------------------------------------
 42 | // @Overflow
 43 | // ---------------------------------------------------------
 44 | 
 45 | .ov-h         { overflow: hidden !important; }
 46 | .ov-a         { overflow: auto !important; }
 47 | .ov-s         { overflow: scroll !important; }
 48 | 
 49 | .ovY-h        { overflow-y: hidden !important; }
 50 | .ovX-h        { overflow-x: hidden !important; }
 51 | .ovY-a        { overflow-y: auto !important; }
 52 | .ovX-a        { overflow-x: auto !important; }
 53 | .ovY-s        { overflow-y: scroll !important; }
 54 | .ovX-s        { overflow-x: scroll !important; }
 55 | 
 56 | @if ($responsive == true) {
 57 |   @include generateResponsive() {
 58 |     .ov-h\@#{$breakpointAlias}     { overflow: hidden !important; }
 59 |     .ov-a\@#{$breakpointAlias}     { overflow: auto !important; }
 60 |     .ov-s\@#{$breakpointAlias}     { overflow: scroll !important; }
 61 | 
 62 |     .ovY-h\@#{$breakpointAlias}    { overflow-y: hidden !important; }
 63 |     .ovX-h\@#{$breakpointAlias}    { overflow-x: hidden !important; }
 64 |     .ovY-a\@#{$breakpointAlias}    { overflow-y: auto !important; }
 65 |     .ovX-a\@#{$breakpointAlias}    { overflow-x: auto !important; }
 66 |     .ovY-s\@#{$breakpointAlias}    { overflow-y: scroll !important; }
 67 |     .ovX-s\@#{$breakpointAlias}    { overflow-x: scroll !important; }
 68 |   }
 69 | }
 70 | 
 71 | // ---------------------------------------------------------
 72 | // @Float
 73 | // ---------------------------------------------------------
 74 | 
 75 | .fl-l         { float: left !important; }
 76 | .fl-r         { float: right !important; }
 77 | .fl-n         { float: none !important; }
 78 | 
 79 | @if ($responsive == true) {
 80 |   @include generateResponsive() {
 81 |     .fl-l\@#{$breakpointAlias}     { float: left !important; }
 82 |     .fl-r\@#{$breakpointAlias}     { float: right !important; }
 83 |     .fl-n\@#{$breakpointAlias}     { float: none !important; }
 84 |   }
 85 | }
 86 | 
 87 | // ---------------------------------------------------------
 88 | // @Vertical Align
 89 | // ---------------------------------------------------------
 90 | 
 91 | .va-t         { vertical-align: top !important; }
 92 | .va-m         { vertical-align: middle !important; }
 93 | .va-b         { vertical-align: bottom !important; }
 94 | 
 95 | @if ($responsive == true) {
 96 |   @include generateResponsive() {
 97 |     .va-t\@#{$breakpointAlias}     { vertical-align: top !important; }
 98 |     .va-m\@#{$breakpointAlias}     { vertical-align: middle !important; }
 99 |     .va-b\@#{$breakpointAlias}     { vertical-align: bottom !important; }
100 |   }
101 | }
102 | 
103 | // ---------------------------------------------------------
104 | // @Position
105 | // ---------------------------------------------------------
106 | 
107 | .pos-s        { position: static !important; }
108 | .pos-st       { position: sticky !important; }
109 | .pos-r        { position: relative !important; }
110 | .pos-a        { position: absolute !important; }
111 | .pos-f        { position: fixed !important; }
112 | 
113 | @if ($responsive == true) {
114 |   @include generateResponsive() {
115 |     .pos-s\@#{$breakpointAlias}    { position: static !important; }
116 |     .pos-st\@#{$breakpointAlias}   { position: sticky !important; }
117 |     .pos-r\@#{$breakpointAlias}    { position: relative !important; }
118 |     .pos-a\@#{$breakpointAlias}    { position: absolute !important; }
119 |     .pos-f\@#{$breakpointAlias}    { position: fixed !important; }
120 |   }
121 | }
122 | 
123 | // ---------------------------------------------------------
124 | // @Z-Index
125 | // ---------------------------------------------------------
126 | 
127 | @for $i from 0 through 9 {
128 |   .z-#{$i} { z-index: ($i * 1000) !important; }
129 | 
130 |   @if ($responsive == true) {
131 |     @include generateResponsive() {
132 |       .z-#{$i}\@#{$breakpointAlias} { z-index: ($i * 1000) !important; }
133 |     }
134 |   }
135 | }
136 | 


--------------------------------------------------------------------------------
/src/assets/styles/spec/utils/layout/helpers/lists.scss:
--------------------------------------------------------------------------------
 1 | // ---------------------------------------------------------
 2 | // @TOC
 3 | // ---------------------------------------------------------
 4 | 
 5 | // + @List Style Position
 6 | // + @List Style Type
 7 | 
 8 | // ---------------------------------------------------------
 9 | // @List Style Position
10 | // ---------------------------------------------------------
11 | 
12 | .lisp-i { list-style-position: inside; }
13 | .lisp-o { list-style-position: outside; }
14 | 
15 | // ---------------------------------------------------------
16 | // @List Style Type
17 | // ---------------------------------------------------------
18 | 
19 | .lis-n  { list-style: none; }
20 | .list-c { list-style-type: circle; }
21 | .list-s { list-style-type: square; }
22 | .list-u { list-style-type: upper-roman; }
23 | .list-l { list-style-type: lower-alpha; }
24 | 


--------------------------------------------------------------------------------
/src/assets/styles/spec/utils/layout/helpers/margin.scss:
--------------------------------------------------------------------------------
  1 | // ---------------------------------------------------------
  2 | // @TOC
  3 | // ---------------------------------------------------------
  4 | 
  5 | // + @Variables
  6 | // + @Margin (0 > 4 Step 1)
  7 | // + @Margin (5 > 35 Step 5)
  8 | // + @Margin (40 > 160 Step 10)
  9 | // + @Margin Auto
 10 | 
 11 | // ---------------------------------------------------------
 12 | // @Variables
 13 | // ---------------------------------------------------------
 14 | 
 15 | $responsive: true;
 16 | 
 17 | // ---------------------------------------------------------
 18 | // @Padding (0 > 4 Step 1)
 19 | // ---------------------------------------------------------
 20 | 
 21 | @for $i from 0 through 4 {
 22 |   .m-#{$i}  { margin: #{$i}px !important; }
 23 |   .mT-#{$i} { margin-top: #{$i}px !important; }
 24 |   .mR-#{$i} { margin-right: #{$i}px !important; }
 25 |   .mB-#{$i} { margin-bottom: #{$i}px !important; }
 26 |   .mL-#{$i} { margin-left: #{$i}px !important; }
 27 | 
 28 |   .mY-#{$i} {
 29 |     margin-top: #{$i}px !important;
 30 |     margin-bottom: #{$i}px !important;
 31 |   }
 32 | 
 33 |   .mX-#{$i} {
 34 |     margin-left: #{$i}px !important;
 35 |     margin-right: #{$i}px !important;
 36 |   }
 37 | 
 38 |   .m-nv-#{$i}  { margin: -#{$i}px !important; }
 39 |   .mT-nv-#{$i} { margin-top: -#{$i}px !important; }
 40 |   .mR-nv-#{$i} { margin-right: -#{$i}px !important; }
 41 |   .mB-nv-#{$i} { margin-bottom:- #{$i}px !important; }
 42 |   .mL-nv-#{$i} { margin-left: -#{$i}px !important; }
 43 | 
 44 |   .mY-nv-#{$i} {
 45 |     margin-top: -#{$i}px !important;
 46 |     margin-bottom: -#{$i}px !important;
 47 |   }
 48 | 
 49 |   .mX-nv-#{$i} {
 50 |     margin-left: -#{$i}px !important;
 51 |     margin-right: -#{$i}px !important;
 52 |   }
 53 | 
 54 |   @if ($responsive == true) {
 55 |     @include generateResponsive() {
 56 |       .m-#{$i}\@#{$breakpointAlias}  { margin: #{$i}px !important; }
 57 |       .mT-#{$i}\@#{$breakpointAlias} { margin-top: #{$i}px !important; }
 58 |       .mR-#{$i}\@#{$breakpointAlias} { margin-right: #{$i}px !important; }
 59 |       .mB-#{$i}\@#{$breakpointAlias} { margin-bottom: #{$i}px !important; }
 60 |       .mL-#{$i}\@#{$breakpointAlias} { margin-left: #{$i}px !important; }
 61 | 
 62 |       .mY-#{$i}\@#{$breakpointAlias} {
 63 |         margin-top: #{$i}px !important;
 64 |         margin-bottom: #{$i}px !important;
 65 |       }
 66 | 
 67 |       .mX-#{$i}\@#{$breakpointAlias} {
 68 |         margin-left: #{$i}px !important;
 69 |         margin-right: #{$i}px !important;
 70 |       }
 71 | 
 72 |       .m-nv-#{$i}\@#{$breakpointAlias}  { margin: -#{$i}px !important; }
 73 |       .mT-nv-#{$i}\@#{$breakpointAlias} { margin-top: -#{$i}px !important; }
 74 |       .mR-nv-#{$i}\@#{$breakpointAlias} { margin-right: -#{$i}px !important; }
 75 |       .mB-nv-#{$i}\@#{$breakpointAlias} { margin-bottom: -#{$i}px !important; }
 76 |       .mL-nv-#{$i}\@#{$breakpointAlias} { margin-left: -#{$i}px !important; }
 77 | 
 78 |       .mY-nv-#{$i}\@#{$breakpointAlias} {
 79 |         margin-top: -#{$i}px !important;
 80 |         margin-bottom: -#{$i}px !important;
 81 |       }
 82 | 
 83 |       .mX-nv-#{$i}\@#{$breakpointAlias} {
 84 |         margin-left: -#{$i}px !important;
 85 |         margin-right: -#{$i}px !important;
 86 |       }
 87 |     }
 88 |   }
 89 | }
 90 | 
 91 | // ---------------------------------------------------------
 92 | // @Padding (5 > 35 Step 5)
 93 | // ---------------------------------------------------------
 94 | 
 95 | @for $i from 5 through 35 {
 96 |   @if $i % 5 == 0 {
 97 |     .m-#{$i}  { margin: #{$i}px !important; }
 98 |     .mT-#{$i} { margin-top: #{$i}px !important; }
 99 |     .mR-#{$i} { margin-right: #{$i}px !important; }
100 |     .mB-#{$i} { margin-bottom: #{$i}px !important; }
101 |     .mL-#{$i} { margin-left: #{$i}px !important; }
102 | 
103 |     .mY-#{$i} {
104 |       margin-top: #{$i}px !important;
105 |       margin-bottom: #{$i}px !important;
106 |     }
107 | 
108 |     .mX-#{$i} {
109 |       margin-left: #{$i}px !important;
110 |       margin-right: #{$i}px !important;
111 |     }
112 | 
113 |     .m-nv-#{$i}  { margin: -#{$i}px !important; }
114 |     .mT-nv-#{$i} { margin-top: -#{$i}px !important; }
115 |     .mR-nv-#{$i} { margin-right: -#{$i}px !important; }
116 |     .mB-nv-#{$i} { margin-bottom: -#{$i}px !important; }
117 |     .mL-nv-#{$i} { margin-left: -#{$i}px !important; }
118 | 
119 |     .mY-nv-#{$i} {
120 |       margin-top: -#{$i}px !important;
121 |       margin-bottom: -#{$i}px !important;
122 |     }
123 | 
124 |     .mX-nv-#{$i} {
125 |       margin-left: -#{$i}px !important;
126 |       margin-right: -#{$i}px !important;
127 |     }
128 | 
129 |     @if ($responsive == true) {
130 |       @include generateResponsive() {
131 |         .m-#{$i}\@#{$breakpointAlias}  { margin: #{$i}px !important; }
132 |         .mT-#{$i}\@#{$breakpointAlias} { margin-top: #{$i}px !important; }
133 |         .mR-#{$i}\@#{$breakpointAlias} { margin-right: #{$i}px !important; }
134 |         .mB-#{$i}\@#{$breakpointAlias} { margin-bottom: #{$i}px !important; }
135 |         .mL-#{$i}\@#{$breakpointAlias} { margin-left: #{$i}px !important; }
136 | 
137 |         .mY-#{$i}\@#{$breakpointAlias} {
138 |           margin-top: #{$i}px !important;
139 |           margin-bottom: #{$i}px !important;
140 |         }
141 | 
142 |         .mX-#{$i}\@#{$breakpointAlias} {
143 |           margin-left: #{$i}px !important;
144 |           margin-right: #{$i}px !important;
145 |         }
146 | 
147 |         .m-nv-#{$i}\@#{$breakpointAlias}  { margin: -#{$i}px !important; }
148 |         .mT-nv-#{$i}\@#{$breakpointAlias} { margin-top: -#{$i}px !important; }
149 |         .mR-nv-#{$i}\@#{$breakpointAlias} { margin-right: -#{$i}px !important; }
150 |         .mB-nv-#{$i}\@#{$breakpointAlias} { margin-bottom: -#{$i}px !important; }
151 |         .mL-nv-#{$i}\@#{$breakpointAlias} { margin-left: -#{$i}px !important; }
152 | 
153 |         .mY-nv-#{$i}\@#{$breakpointAlias} {
154 |           margin-top: -#{$i}px !important;
155 |           margin-bottom: -#{$i}px !important;
156 |         }
157 | 
158 |         .mX-nv-#{$i}\@#{$breakpointAlias} {
159 |           margin-left: -#{$i}px !important;
160 |           margin-right: -#{$i}px !important;
161 |         }
162 |       }
163 |     }
164 |   }
165 | }
166 | 
167 | // ---------------------------------------------------------
168 | // @Padding (40 > 160 Step 10)
169 | // ---------------------------------------------------------
170 | 
171 | @for $i from 40 through 160 {
172 |   @if $i % 10 == 0 {
173 | 
174 |     .m-#{$i}  { margin: #{$i}px !important; }
175 |     .mT-#{$i} { margin-top: #{$i}px !important; }
176 |     .mR-#{$i} { margin-right: #{$i}px !important; }
177 |     .mB-#{$i} { margin-bottom: #{$i}px !important; }
178 |     .mL-#{$i} { margin-left: #{$i}px !important; }
179 | 
180 |     .mY-#{$i} {
181 |       margin-top: #{$i}px !important;
182 |       margin-bottom: #{$i}px !important;
183 |     }
184 | 
185 |     .mX-#{$i} {
186 |       margin-left: #{$i}px !important;
187 |       margin-right: #{$i}px !important;
188 |     }
189 | 
190 |     .m-nv-#{$i}  { margin: -#{$i}px !important; }
191 |     .mT-nv-#{$i} { margin-top: -#{$i}px !important; }
192 |     .mR-nv-#{$i} { margin-right: -#{$i}px !important; }
193 |     .mB-nv-#{$i} { margin-bottom: -#{$i}px !important; }
194 |     .mL-nv-#{$i} { margin-left: -#{$i}px !important; }
195 | 
196 |     .mY-nv-#{$i} {
197 |       margin-top: -#{$i}px !important;
198 |       margin-bottom: -#{$i}px !important;
199 |     }
200 | 
201 |     .mX-nv-#{$i} {
202 |       margin-left: -#{$i}px !important;
203 |       margin-right: -#{$i}px !important;
204 |     }
205 | 
206 |     @if ($responsive == true) {
207 |       @include generateResponsive() {
208 |         .m-#{$i}\@#{$breakpointAlias}  { margin: #{$i}px !important; }
209 |         .mT-#{$i}\@#{$breakpointAlias} { margin-top: #{$i}px !important; }
210 |         .mR-#{$i}\@#{$breakpointAlias} { margin-right: #{$i}px !important; }
211 |         .mB-#{$i}\@#{$breakpointAlias} { margin-bottom: #{$i}px !important; }
212 |         .mL-#{$i}\@#{$breakpointAlias} { margin-left: #{$i}px !important; }
213 | 
214 |         .mY-#{$i}\@#{$breakpointAlias} {
215 |           margin-top: #{$i}px !important;
216 |           margin-bottom: #{$i}px !important;
217 |         }
218 | 
219 |         .mX-#{$i}\@#{$breakpointAlias} {
220 |           margin-left: #{$i}px !important;
221 |           margin-right: #{$i}px !important;
222 |         }
223 | 
224 |         .m-nv-#{$i}\@#{$breakpointAlias}  { margin: -#{$i}px !important; }
225 |         .mT-nv-#{$i}\@#{$breakpointAlias} { margin-top: -#{$i}px !important; }
226 |         .mR-nv-#{$i}\@#{$breakpointAlias} { margin-right: -#{$i}px !important; }
227 |         .mB-nv-#{$i}\@#{$breakpointAlias} { margin-bottom: -#{$i}px !important; }
228 |         .mL-nv-#{$i}\@#{$breakpointAlias} { margin-left: -#{$i}px !important; }
229 | 
230 |         .mY-nv-#{$i}\@#{$breakpointAlias} {
231 |           margin-top: -#{$i}px !important;
232 |           margin-bottom: -#{$i}px !important;
233 |         }
234 | 
235 |         .mX-nv-#{$i}\@#{$breakpointAlias} {
236 |           margin-left: -#{$i}px !important;
237 |           margin-right: -#{$i}px !important;
238 |         }
239 |       }
240 |     }
241 |   }
242 | }
243 | 
244 | // ---------------------------------------------------------
245 | // @Padding Auto
246 | // ---------------------------------------------------------
247 | 
248 | .m-a  { margin: auto !important; }
249 | .mX-a { margin-left: auto !important; margin-right: auto !important; }
250 | .mT-a { margin-top: auto !important; }
251 | .mR-a { margin-right: auto !important; }
252 | .mB-a { margin-bottom: auto !important; }
253 | .mL-a { margin-left: auto !important; }
254 | 
255 | @if ($responsive == true) {
256 |   @include generateResponsive() {
257 |     .m-a\@#{$breakpointAlias}  { margin: auto !important; }
258 |     .mX-a\@#{$breakpointAlias} { margin-left: auto !important; margin-right: auto !important; }
259 |     .mT-a\@#{$breakpointAlias} { margin-top: auto !important; }
260 |     .mR-a\@#{$breakpointAlias} { margin-right: auto !important; }
261 |     .mB-a\@#{$breakpointAlias} { margin-bottom: auto !important; }
262 |     .mL-a\@#{$breakpointAlias} { margin-left: auto !important; }
263 |   }
264 | }
265 | 


--------------------------------------------------------------------------------
/src/assets/styles/spec/utils/layout/helpers/objects.scss:
--------------------------------------------------------------------------------
 1 | // ---------------------------------------------------------
 2 | // @TOC
 3 | // ---------------------------------------------------------
 4 | 
 5 | // + @Background Size
 6 | // + @Background Position
 7 | // + @Background Repeat
 8 | // + @Object Fit
 9 | // + @Resize
10 | // + @Opacity
11 | // + @Cursor
12 | // + @Visibility
13 | 
14 | // ---------------------------------------------------------
15 | // @Background Size
16 | // ---------------------------------------------------------
17 | 
18 | .bgsz-cv   { background-size: cover; }
19 | .bgsz-ct   { background-size: contain; }
20 | .bgsz-full { background-size: 100% 100%; }
21 | 
22 | // ---------------------------------------------------------
23 | // @Background Position
24 | // ---------------------------------------------------------
25 | 
26 | .bgpX-c    { background-position-x: center; }
27 | .bgpX-t    { background-position-x: top; }
28 | .bgpX-r    { background-position-x: right; }
29 | .bgpX-l    { background-position-x: left; }
30 | .bgpX-b    { background-position-x: bottom; }
31 | .bgpY-c    { background-position-y: center; }
32 | .bgpY-t    { background-position-y: top; }
33 | .bgpY-r    { background-position-y: right; }
34 | .bgpY-l    { background-position-y: left; }
35 | .bgpY-b    { background-position-y: bottom; }
36 | 
37 | // ---------------------------------------------------------
38 | // @Background Repeat
39 | // ---------------------------------------------------------
40 | 
41 | .bgr-n     { background-repeat: no-repeat; }
42 | .bgr-y     { background-repeat: repeat-y; }
43 | .bgr-x     { background-repeat: repeat-x; }
44 | 
45 | // ---------------------------------------------------------
46 | // @Object Fit
47 | // ---------------------------------------------------------
48 | 
49 | .of-ct     { object-fit: contain; }
50 | .of-cv     { object-fit: cover; }
51 | .of-f      { object-fit: fill; }
52 | .of-n      { object-fit: none; }
53 | .of-sd     { object-fit: scale-down; }
54 | 
55 | // ---------------------------------------------------------
56 | // @Resize
57 | // ---------------------------------------------------------
58 | 
59 | .rsz-v     { resize: vertical; }
60 | .rsz-h     { resize: horizontal; }
61 | 
62 | // ---------------------------------------------------------
63 | // @Opacity
64 | // ---------------------------------------------------------
65 | 
66 | .op-0      { opacity: 0; }
67 | .op-10p    { opacity: 0.1; }
68 | .op-20p    { opacity: 0.2; }
69 | .op-30p    { opacity: 0.3; }
70 | .op-40p    { opacity: 0.4; }
71 | .op-50p    { opacity: 0.5; }
72 | .op-60p    { opacity: 0.6; }
73 | .op-70p    { opacity: 0.7; }
74 | .op-80p    { opacity: 0.8; }
75 | .op-90p    { opacity: 0.9; }
76 | .op-100p   { opacity: 1; }
77 | 
78 | // ---------------------------------------------------------
79 | // @Cursor
80 | // ---------------------------------------------------------
81 | 
82 | .cur-na    { cursor: not-allowed; }
83 | .cur-p     { cursor: pointer; }
84 | .cur-a     { cursor: auto; }
85 | 
86 | // ---------------------------------------------------------
87 | // @Visibility
88 | // ---------------------------------------------------------
89 | 
90 | .vis-v     { visibility: visible; }
91 | .vis-h     { visibility: hidden; }
92 | 


--------------------------------------------------------------------------------
/src/assets/styles/spec/utils/layout/helpers/padding.scss:
--------------------------------------------------------------------------------
  1 | // ---------------------------------------------------------
  2 | // @TOC
  3 | // ---------------------------------------------------------
  4 | 
  5 | // + @Variables
  6 | // + @Padding (0 > 4 Step 1)
  7 | // + @Padding (5 > 35 Step 5)
  8 | // + @Padding (40 > 160 Step 10)
  9 | // + @Padding Auto
 10 | 
 11 | // ---------------------------------------------------------
 12 | // @Variables
 13 | // ---------------------------------------------------------
 14 | 
 15 | $responsive: true;
 16 | 
 17 | // ---------------------------------------------------------
 18 | // @Padding (0 > 4 Step 1)
 19 | // ---------------------------------------------------------
 20 | 
 21 | @for $i from 0 through 4 {
 22 |   .p-#{$i}  { padding: #{$i}px !important; }
 23 |   .pT-#{$i} { padding-top: #{$i}px !important; }
 24 |   .pR-#{$i} { padding-right: #{$i}px !important; }
 25 |   .pB-#{$i} { padding-bottom: #{$i}px !important; }
 26 |   .pL-#{$i} { padding-left: #{$i}px !important; }
 27 | 
 28 |   .pY-#{$i} {
 29 |     padding-top: #{$i}px !important;
 30 |     padding-bottom: #{$i}px !important;
 31 |   }
 32 | 
 33 |   .pX-#{$i} {
 34 |     padding-left: #{$i}px !important;
 35 |     padding-right: #{$i}px !important;
 36 |   }
 37 | 
 38 |   @if ($responsive == true) {
 39 |     @include generateResponsive() {
 40 |       .p-#{$i}\@#{$breakpointAlias}  { padding: #{$i}px !important; }
 41 |       .pT-#{$i}\@#{$breakpointAlias} { padding-top: #{$i}px !important; }
 42 |       .pR-#{$i}\@#{$breakpointAlias} { padding-right: #{$i}px !important; }
 43 |       .pB-#{$i}\@#{$breakpointAlias} { padding-bottom: #{$i}px !important; }
 44 |       .pL-#{$i}\@#{$breakpointAlias} { padding-left: #{$i}px !important; }
 45 | 
 46 |       .pY-#{$i}\@#{$breakpointAlias} {
 47 |         padding-top: #{$i}px !important;
 48 |         padding-bottom: #{$i}px !important;
 49 |       }
 50 | 
 51 |       .pX-#{$i}\@#{$breakpointAlias} {
 52 |         padding-left: #{$i}px !important;
 53 |         padding-right: #{$i}px !important;
 54 |       }
 55 |     }
 56 |   }
 57 | }
 58 | 
 59 | // ---------------------------------------------------------
 60 | // @Padding (5 > 35 Step 5)
 61 | // ---------------------------------------------------------
 62 | 
 63 | @for $i from 5 through 35 {
 64 |   @if $i % 5 == 0 {
 65 |     .p-#{$i}  { padding: #{$i}px !important; }
 66 |     .pT-#{$i} { padding-top: #{$i}px !important; }
 67 |     .pR-#{$i} { padding-right: #{$i}px !important; }
 68 |     .pB-#{$i} { padding-bottom: #{$i}px !important; }
 69 |     .pL-#{$i} { padding-left: #{$i}px !important; }
 70 | 
 71 |     .pY-#{$i} {
 72 |       padding-top: #{$i}px !important;
 73 |       padding-bottom: #{$i}px !important;
 74 |     }
 75 | 
 76 |     .pX-#{$i} {
 77 |       padding-left: #{$i}px !important;
 78 |       padding-right: #{$i}px !important;
 79 |     }
 80 | 
 81 |     @if ($responsive == true) {
 82 |       @include generateResponsive() {
 83 |         .p-#{$i}\@#{$breakpointAlias}  { padding: #{$i}px !important; }
 84 |         .pT-#{$i}\@#{$breakpointAlias} { padding-top: #{$i}px !important; }
 85 |         .pR-#{$i}\@#{$breakpointAlias} { padding-right: #{$i}px !important; }
 86 |         .pB-#{$i}\@#{$breakpointAlias} { padding-bottom: #{$i}px !important; }
 87 |         .pL-#{$i}\@#{$breakpointAlias} { padding-left: #{$i}px !important; }
 88 | 
 89 |         .pY-#{$i}\@#{$breakpointAlias} {
 90 |           padding-top: #{$i}px !important;
 91 |           padding-bottom: #{$i}px !important;
 92 |         }
 93 | 
 94 |         .pX-#{$i}\@#{$breakpointAlias} {
 95 |           padding-left: #{$i}px !important;
 96 |           padding-right: #{$i}px !important;
 97 |         }
 98 |       }
 99 |     }
100 |   }
101 | }
102 | 
103 | // ---------------------------------------------------------
104 | // @Padding (40 > 160 Step 10)
105 | // ---------------------------------------------------------
106 | 
107 | @for $i from 40 through 160 {
108 |   @if $i % 10 == 0 {
109 |     .p-#{$i}  { padding: #{$i}px !important; }
110 |     .pT-#{$i} { padding-top: #{$i}px !important; }
111 |     .pR-#{$i} { padding-right: #{$i}px !important; }
112 |     .pB-#{$i} { padding-bottom: #{$i}px !important; }
113 |     .pL-#{$i} { padding-left: #{$i}px !important; }
114 | 
115 |     .pY-#{$i} {
116 |       padding-top: #{$i}px !important;
117 |       padding-bottom: #{$i}px !important;
118 |     }
119 | 
120 |     .pX-#{$i} {
121 |       padding-left: #{$i}px !important;
122 |       padding-right: #{$i}px !important;
123 |     }
124 | 
125 |     @if ($responsive == true) {
126 |       @include generateResponsive() {
127 |         .p-#{$i}\@#{$breakpointAlias}  { padding: #{$i}px !important; }
128 |         .pT-#{$i}\@#{$breakpointAlias} { padding-top: #{$i}px !important; }
129 |         .pR-#{$i}\@#{$breakpointAlias} { padding-right: #{$i}px !important; }
130 |         .pB-#{$i}\@#{$breakpointAlias} { padding-bottom: #{$i}px !important; }
131 |         .pL-#{$i}\@#{$breakpointAlias} { padding-left: #{$i}px !important; }
132 | 
133 |         .pY-#{$i}\@#{$breakpointAlias} {
134 |           padding-top: #{$i}px !important;
135 |           padding-bottom: #{$i}px !important;
136 |         }
137 | 
138 |         .pX-#{$i}\@#{$breakpointAlias} {
139 |           padding-left: #{$i}px !important;
140 |           padding-right: #{$i}px !important;
141 |         }
142 |       }
143 |     }
144 |   }
145 | }
146 | 


--------------------------------------------------------------------------------
/src/assets/styles/spec/utils/layout/helpers/positions.scss:
--------------------------------------------------------------------------------
  1 | // ---------------------------------------------------------
  2 | // @TOC
  3 | // ---------------------------------------------------------
  4 | 
  5 | // + @Variables
  6 | // + @Position (0 > 4 Step 1)
  7 | // + @Position (5 > 35 Step 5)
  8 | // + @Position (40 > 160 Step 10)
  9 | 
 10 | // ---------------------------------------------------------
 11 | // @Variables
 12 | // ---------------------------------------------------------
 13 | 
 14 | $responsive: true;
 15 | 
 16 | // ---------------------------------------------------------
 17 | // @Position (0 > 4 Step 1)
 18 | // ---------------------------------------------------------
 19 | 
 20 | @for $i from 0 through 4 {
 21 |   .t-#{$i} { top: #{$i}px; }
 22 |   .r-#{$i} { right: #{$i}px; }
 23 |   .b-#{$i} { bottom: #{$i}px; }
 24 |   .l-#{$i} { left: #{$i}px; }
 25 | 
 26 |   @if ($responsive == true) {
 27 |     @include generateResponsive() {
 28 |       .t-#{$i}\@#{$breakpointAlias} { top: #{$i}px; }
 29 |       .r-#{$i}\@#{$breakpointAlias} { right: #{$i}px; }
 30 |       .b-#{$i}\@#{$breakpointAlias} { bottom: #{$i}px; }
 31 |       .l-#{$i}\@#{$breakpointAlias} { left: #{$i}px; }
 32 |     }
 33 |   }
 34 | }
 35 | 
 36 | // ---------------------------------------------------------
 37 | // @Position (5 > 35 Step 5)
 38 | // ---------------------------------------------------------
 39 | 
 40 | @for $i from 5 through 35 {
 41 |   @if $i % 5 == 0 {
 42 |     .t-#{$i} { top: #{$i}px; }
 43 |     .r-#{$i} { right: #{$i}px; }
 44 |     .b-#{$i} { bottom: #{$i}px; }
 45 |     .l-#{$i} { left: #{$i}px; }
 46 | 
 47 |     @if ($responsive == true) {
 48 |       @include generateResponsive() {
 49 |         .t-#{$i}\@#{$breakpointAlias} { top: #{$i}px; }
 50 |         .r-#{$i}\@#{$breakpointAlias} { right: #{$i}px; }
 51 |         .b-#{$i}\@#{$breakpointAlias} { bottom: #{$i}px; }
 52 |         .l-#{$i}\@#{$breakpointAlias} { left: #{$i}px; }
 53 |       }
 54 |     }
 55 |   }
 56 | }
 57 | 
 58 | // ---------------------------------------------------------
 59 | // @Position (40 > 160 Step 10)
 60 | // ---------------------------------------------------------
 61 | 
 62 | @for $i from 40 through 160 {
 63 |   @if $i % 10 == 0 {
 64 |     .t-#{$i} { top: #{$i}px; }
 65 |     .r-#{$i} { right: #{$i}px; }
 66 |     .b-#{$i} { bottom: #{$i}px; }
 67 |     .l-#{$i} { left: #{$i}px; }
 68 | 
 69 |     @if ($responsive == true) {
 70 |       @include generateResponsive() {
 71 |         .t-#{$i}\@#{$breakpointAlias} { top: #{$i}px; }
 72 |         .r-#{$i}\@#{$breakpointAlias} { right: #{$i}px; }
 73 |         .b-#{$i}\@#{$breakpointAlias} { bottom: #{$i}px; }
 74 |         .l-#{$i}\@#{$breakpointAlias} { left: #{$i}px; }
 75 |       }
 76 |     }
 77 |   }
 78 | }
 79 | 
 80 | // ---------------------------------------------------------
 81 | // @Position (50%)
 82 | // ---------------------------------------------------------
 83 | 
 84 | .tl-50p {
 85 |   top: 50%;
 86 |   left: 50%;
 87 | }
 88 | 
 89 | .tr-50p {
 90 |   top: 50%;
 91 |   right: 50%;
 92 | }
 93 | 
 94 | .t-50p { top: 50%; }
 95 | .r-50p { right: 50%; }
 96 | .b-50p { bottom: 50%; }
 97 | .l-50p { left: 50%; }
 98 | 
 99 | @if ($responsive == true) {
100 |   @include generateResponsive() {
101 |     .tl-50p\@#{$breakpointAlias} {
102 |       top: 50%;
103 |       left: 50%;
104 |     }
105 | 
106 |     .tr-50p\@#{$breakpointAlias} {
107 |       top: 50%;
108 |       right: 50%;
109 |     }
110 | 
111 |     .t-50p\@#{$breakpointAlias} { top: 50%; }
112 |     .r-50p\@#{$breakpointAlias} { right: 50%; }
113 |     .b-50p\@#{$breakpointAlias} { bottom: 50%; }
114 |     .l-50p\@#{$breakpointAlias} { left: 50%; }
115 |   }
116 | }
117 | 


--------------------------------------------------------------------------------
/src/assets/styles/spec/utils/layout/helpers/pseudo.scss:
--------------------------------------------------------------------------------
1 | // ---------------------------------------------------------
2 | // @Pseudo Elements
3 | // ---------------------------------------------------------
4 | 
5 | .no-after::after   { display: none !important; }
6 | .no-before::before { display: none !important; }
7 | 


--------------------------------------------------------------------------------
/src/assets/styles/spec/utils/layout/helpers/sizes.scss:
--------------------------------------------------------------------------------
  1 | // ---------------------------------------------------------
  2 | // @TOC
  3 | // ---------------------------------------------------------
  4 | 
  5 | // + @Variables
  6 | // + @Fixed Width
  7 | // + @Relative Width
  8 | // + @Fixed Height
  9 | // + @Max Size
 10 | 
 11 | // ---------------------------------------------------------
 12 | // @Variables
 13 | // ---------------------------------------------------------
 14 | 
 15 | $responsive: true;
 16 | 
 17 | // ---------------------------------------------------------
 18 | // @Fixed Width
 19 | // ---------------------------------------------------------
 20 | 
 21 | .w-1\/4r, .sz-1\/4r    { width: 0.25rem; }
 22 | .w-1\/2r, .sz-1\/2r    { width: 0.5rem; }
 23 | .w-3\/4r, .sz-3\/4r    { width: 0.75rem; }
 24 | .w-1r, .sz-1r          { width: 1rem; }
 25 | .w-3\/2r, .sz-3\/2r    { width: 1.5rem; }
 26 | .w-2r, .sz-2r          { width: 2rem; }
 27 | .w-5\/2r, .sz-5\/2r    { width: 2.5rem; }
 28 | .w-3r, .sz-3r          { width: 3rem; }
 29 | .w-7\/2r, .sz-7\/2r    { width: 3.5rem; }
 30 | .w-4r, .sz-4r          { width: 4rem; }
 31 | .w-9\/2r, .sz-9\/2r    { width: 4.5rem; }
 32 | .w-5r, .sz-5r          { width: 5rem; }
 33 | .w-11\/2r, .sz-11\/2r  { width: 5.5rem; }
 34 | .w-6r, .sz-6r          { width: 6rem; }
 35 | 
 36 | @if ($responsive == true) {
 37 |   @include generateResponsive() {
 38 |     .w-1\/4r\@#{$breakpointAlias}, .sz-1\/4r\@#{$breakpointAlias}    { width: 0.25rem; }
 39 |     .w-1\/2r\@#{$breakpointAlias}, .sz-1\/2r\@#{$breakpointAlias}    { width: 0.5rem; }
 40 |     .w-3\/4r\@#{$breakpointAlias}, .sz-3\/4r\@#{$breakpointAlias}    { width: 0.75rem; }
 41 |     .w-1r\@#{$breakpointAlias}, .sz-1r\@#{$breakpointAlias}          { width: 1rem; }
 42 |     .w-3\/2r\@#{$breakpointAlias}, .sz-3\/2r\@#{$breakpointAlias}    { width: 1.5rem; }
 43 |     .w-2r\@#{$breakpointAlias}, .sz-2r\@#{$breakpointAlias}          { width: 2rem; }
 44 |     .w-5\/2r\@#{$breakpointAlias}, .sz-5\/2r\@#{$breakpointAlias}    { width: 2.5rem; }
 45 |     .w-3r\@#{$breakpointAlias}, .sz-3r\@#{$breakpointAlias}          { width: 3rem; }
 46 |     .w-7\/2r\@#{$breakpointAlias}, .sz-7\/2r\@#{$breakpointAlias}    { width: 3.5rem; }
 47 |     .w-4r\@#{$breakpointAlias}, .sz-4r\@#{$breakpointAlias}          { width: 4rem; }
 48 |     .w-9\/2r\@#{$breakpointAlias}, .sz-9\/2r\@#{$breakpointAlias}    { width: 4.5rem; }
 49 |     .w-5r\@#{$breakpointAlias}, .sz-5r\@#{$breakpointAlias}          { width: 5rem; }
 50 |     .w-11\/2r\@#{$breakpointAlias}, .sz-11\/2r\@#{$breakpointAlias}  { width: 5.5rem; }
 51 |     .w-6r\@#{$breakpointAlias}, .sz-6r\@#{$breakpointAlias}          { width: 6rem; }
 52 |   }
 53 | }
 54 | 
 55 | // ---------------------------------------------------------
 56 | // @Relative Width
 57 | // ---------------------------------------------------------
 58 | 
 59 | .w-0     { width: 0px; }
 60 | .w-10p   { width: 10%; }
 61 | .w-20p   { width: 20%; }
 62 | .w-30p   { width: 30%; }
 63 | .w-40p   { width: 40%; }
 64 | .w-50p   { width: 50%; }
 65 | .w-60p   { width: 60%; }
 66 | .w-70p   { width: 70%; }
 67 | .w-80p   { width: 80%; }
 68 | .w-90p   { width: 90%; }
 69 | .w-100p  { width: 100%; }
 70 | .w-1px   { width: 1px; }
 71 | .w-a     { width: auto; }
 72 | 
 73 | @if ($responsive == true) {
 74 |   @include generateResponsive() {
 75 |     .w-0\@#{$breakpointAlias}     { width: 0px; }
 76 |     .w-10p\@#{$breakpointAlias}   { width: 10%; }
 77 |     .w-20p\@#{$breakpointAlias}   { width: 20%; }
 78 |     .w-30p\@#{$breakpointAlias}   { width: 30%; }
 79 |     .w-40p\@#{$breakpointAlias}   { width: 40%; }
 80 |     .w-50p\@#{$breakpointAlias}   { width: 50%; }
 81 |     .w-60p\@#{$breakpointAlias}   { width: 60%; }
 82 |     .w-70p\@#{$breakpointAlias}   { width: 70%; }
 83 |     .w-80p\@#{$breakpointAlias}   { width: 80%; }
 84 |     .w-90p\@#{$breakpointAlias}   { width: 90%; }
 85 |     .w-100p\@#{$breakpointAlias}  { width: 100%; }
 86 |     .w-1px\@#{$breakpointAlias}   { width: 1px; }
 87 |     .w-a\@#{$breakpointAlias}     { width: auto; }
 88 |   }
 89 | }
 90 | 
 91 | // ---------------------------------------------------------
 92 | // @Fixed Height
 93 | // ---------------------------------------------------------
 94 | 
 95 | .h-1\/4r, .sz-1\/4r    { height: 0.25rem; }
 96 | .h-1\/2r, .sz-1\/2r    { height: 0.5rem; }
 97 | .h-3\/4r, .sz-3\/4r    { height: 0.75rem; }
 98 | .h-1r, .sz-1r          { height: 1rem; }
 99 | .h-3\/2r, .sz-3\/2r    { height: 1.5rem; }
100 | .h-2r, .sz-2r          { height: 2rem; }
101 | .h-5\/2r, .sz-5\/2r    { height: 2.5rem; }
102 | .h-3r, .sz-3r          { height: 3rem; }
103 | .h-7\/2r, .sz-7\/2r    { height: 3.5rem; }
104 | .h-4r, .sz-4r          { height: 4rem; }
105 | .h-9\/2r, .sz-9\/2r    { height: 4.5rem; }
106 | .h-5r, .sz-5r          { height: 5rem; }
107 | .h-11\/2r, .sz-11\/2r  { height: 5.5rem; }
108 | .h-6r, .sz-6r          { height: 6rem; }
109 | 
110 | @if ($responsive == true) {
111 |   @include generateResponsive() {
112 |     .h-1\/4r\@#{$breakpointAlias}, .sz-1\/4r\@#{$breakpointAlias}    { height: 0.25rem; }
113 |     .h-1\/2r\@#{$breakpointAlias}, .sz-1\/2r\@#{$breakpointAlias}    { height: 0.5rem; }
114 |     .h-3\/4r\@#{$breakpointAlias}, .sz-3\/4r\@#{$breakpointAlias}    { height: 0.75rem; }
115 |     .h-1r\@#{$breakpointAlias}, .sz-1r\@#{$breakpointAlias}          { height: 1rem; }
116 |     .h-3\/2r\@#{$breakpointAlias}, .sz-3\/2r\@#{$breakpointAlias}    { height: 1.5rem; }
117 |     .h-2r\@#{$breakpointAlias}, .sz-2r\@#{$breakpointAlias}          { height: 2rem; }
118 |     .h-5\/2r\@#{$breakpointAlias}, .sz-5\/2r\@#{$breakpointAlias}    { height: 2.5rem; }
119 |     .h-3r\@#{$breakpointAlias}, .sz-3r\@#{$breakpointAlias}          { height: 3rem; }
120 |     .h-7\/2r\@#{$breakpointAlias}, .sz-7\/2r\@#{$breakpointAlias}    { height: 3.5rem; }
121 |     .h-4r\@#{$breakpointAlias}, .sz-4r\@#{$breakpointAlias}          { height: 4rem; }
122 |     .h-9\/2r\@#{$breakpointAlias}, .sz-9\/2r\@#{$breakpointAlias}    { height: 4.5rem; }
123 |     .h-5r\@#{$breakpointAlias}, .sz-5r\@#{$breakpointAlias}          { height: 5rem; }
124 |     .h-11\/2r\@#{$breakpointAlias}, .sz-11\/2r\@#{$breakpointAlias}  { height: 5.5rem; }
125 |     .h-6r\@#{$breakpointAlias}, .sz-6r\@#{$breakpointAlias}          { height: 6rem; }
126 |   }
127 | }
128 | 
129 | .h-0     { height: 0; }
130 | .h-auto  { height: auto; }
131 | .h-100p  { height: 100%; }
132 | .h-100vh { height: 100vh; }
133 | 
134 | @if ($responsive == true) {
135 |   @include generateResponsive() {
136 |     .h-0\@#{$breakpointAlias}     { height: 0; }
137 |     .h-auto\@#{$breakpointAlias}  { height: auto; }
138 |     .h-100p\@#{$breakpointAlias}  { height: 100%; }
139 |     .h-100vh\@#{$breakpointAlias} { height: 100vh; }
140 |   }
141 | }
142 | 
143 | // ---------------------------------------------------------
144 | // @Max Size
145 | // ---------------------------------------------------------
146 | 
147 | .mw-100p { max-width: 100%; }
148 | .mh-100p { max-height: 100%; }
149 | 
150 | @if ($responsive == true) {
151 |   @include generateResponsive() {
152 |     .mw-100p\@#{$breakpointAlias} { max-width: 100%; }
153 |     .mh-100p\@#{$breakpointAlias} { max-height: 100%; }
154 |   }
155 | }
156 | 


--------------------------------------------------------------------------------
/src/assets/styles/spec/utils/layout/helpers/typography.scss:
--------------------------------------------------------------------------------
  1 | 
  2 | // ---------------------------------------------------------
  3 | // @TOC
  4 | // ---------------------------------------------------------
  5 | 
  6 | // + @Variables
  7 | // + @Text Align
  8 | // + @Text Transform
  9 | // + @Font Style
 10 | // + @Text Decoration
 11 | // + @White Space
 12 | // + @Word Break
 13 | // + @Word Wrap
 14 | // + @Text Overflow
 15 | // + @Font Size
 16 | // + @Font Weight
 17 | // + @Line Height
 18 | 
 19 | // ---------------------------------------------------------
 20 | // @Variables
 21 | // ---------------------------------------------------------
 22 | 
 23 | $responsive: true;
 24 | 
 25 | // ---------------------------------------------------------
 26 | // @Text Align
 27 | // ---------------------------------------------------------
 28 | 
 29 | .ta-c { text-align: center !important; }
 30 | .ta-l { text-align: left !important; }
 31 | .ta-r { text-align: right !important; }
 32 | 
 33 | @if ($responsive == true) {
 34 |   @include generateResponsive() {
 35 |     .ta-c\@#{$breakpointAlias} { text-align: center !important; }
 36 |     .ta-l\@#{$breakpointAlias} { text-align: left !important; }
 37 |     .ta-r\@#{$breakpointAlias} { text-align: right !important; }
 38 |   }
 39 | }
 40 | 
 41 | // ---------------------------------------------------------
 42 | // @Text Transform
 43 | // ---------------------------------------------------------
 44 | 
 45 | .tt-n { text-transform: none !important; }
 46 | .tt-u { text-transform: uppercase !important; }
 47 | .tt-l { text-transform: lowercase !important; }
 48 | .tt-c { text-transform: capitalize !important; }
 49 | 
 50 | // ---------------------------------------------------------
 51 | // @Font Style
 52 | // ---------------------------------------------------------
 53 | 
 54 | .fs-i { font-style: italic !important; }
 55 | .fs-o { font-style: oblique !important; }
 56 | 
 57 | // ---------------------------------------------------------
 58 | // @Text Decoration
 59 | // ---------------------------------------------------------
 60 | 
 61 | .td-n { text-decoration: none !important; }
 62 | .td-o { text-decoration: overline !important; }
 63 | .td-lt { text-decoration: line-through !important; }
 64 | .td-u { text-decoration: underline !important; }
 65 | 
 66 | // ---------------------------------------------------------
 67 | // @White Space
 68 | // ---------------------------------------------------------
 69 | 
 70 | .whs-nw { white-space: nowrap !important; }
 71 | .whs-p { white-space: pre !important; }
 72 | .whs-n { white-space: normal !important; }
 73 | 
 74 | // ---------------------------------------------------------
 75 | // @Word Break
 76 | // ---------------------------------------------------------
 77 | 
 78 | .wob-n { word-break: normal !important; }
 79 | .wob-ba { word-break: break-all !important; }
 80 | .wob-k { word-break: keep-all !important; }
 81 | 
 82 | // ---------------------------------------------------------
 83 | // @Word Wrap
 84 | // ---------------------------------------------------------
 85 | 
 86 | .wow-bw { word-wrap: break-word !important; }
 87 | .wow-n { word-wrap: normal !important; }
 88 | 
 89 | // ---------------------------------------------------------
 90 | // @Text Overflow
 91 | // ---------------------------------------------------------
 92 | 
 93 | .tov-e { text-overflow: ellipsis !important; }
 94 | 
 95 | // ---------------------------------------------------------
 96 | // @Font Size
 97 | // ---------------------------------------------------------
 98 | 
 99 | .fsz-xs   { font-size: 0.75rem !important; }
100 | .fsz-sm   { font-size: 0.87rem !important; }
101 | .fsz-def  { font-size: 1rem !important; }
102 | .fsz-md   { font-size: 1.15rem !important; }
103 | .fsz-lg   { font-size: 1.4rem !important; }
104 | .fsz-xl   { font-size: 1.7rem !important; }
105 | 
106 | // ---------------------------------------------------------
107 | // @Font Weight
108 | // ---------------------------------------------------------
109 | 
110 | .fw-100 { font-weight: 100 !important; }
111 | .fw-200 { font-weight: 200 !important; }
112 | .fw-300 { font-weight: 300 !important; }
113 | .fw-400 { font-weight: 400 !important; }
114 | .fw-500 { font-weight: 500 !important; }
115 | .fw-600 { font-weight: 600 !important; }
116 | .fw-700 { font-weight: 700 !important; }
117 | .fw-800 { font-weight: 800 !important; }
118 | .fw-900 { font-weight: 900 !important; }
119 | 
120 | // ---------------------------------------------------------
121 | // @Line Height
122 | // ---------------------------------------------------------
123 | 
124 | .lh-0    { line-height: 0 !important; }
125 | .lh-1    { line-height: 1 !important; }
126 | .lh-3\/2 { line-height: 1.5 !important; }
127 | 


--------------------------------------------------------------------------------
/src/assets/styles/spec/utils/layout/index.scss:
--------------------------------------------------------------------------------
1 | @import 'mixins/index';
2 | @import 'utils/index';
3 | @import 'helpers/index';
4 | 


--------------------------------------------------------------------------------
/src/assets/styles/spec/utils/layout/mixins/generateResponsive.scss:
--------------------------------------------------------------------------------
 1 | // ---------------------------------------------------------
 2 | // @Responsive Suffix Generator
 3 | // ---------------------------------------------------------
 4 | 
 5 | // Mixin used to generate responsive suffixes for classes (i.e. m-10@sm+).
 6 | 
 7 | 
 8 | @mixin generateResponsive() {
 9 |   @each $breakpoint in $breakpoints {
10 |     $breakpointAlias     : nth($breakpoint, 1) !global;
11 |     $breakpointCondition : nth($breakpoint, 2);
12 | 
13 |     @include mediaQueryCondition($breakpointAlias) {
14 |       @content;
15 |     }
16 | 
17 |     $breakpointAlias: null !global;
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/src/assets/styles/spec/utils/layout/mixins/index.scss:
--------------------------------------------------------------------------------
1 | @import 'mediaQueryCondition';
2 | @import 'generateResponsive';
3 | 


--------------------------------------------------------------------------------
/src/assets/styles/spec/utils/layout/mixins/mediaQueryCondition.scss:
--------------------------------------------------------------------------------
 1 | // ---------------------------------------------------------
 2 | // @Media Queries Generator
 3 | // ---------------------------------------------------------
 4 | 
 5 | // Mixin used to generate responsive versions of css rules.
 6 | 
 7 | @mixin mediaQueryCondition($mq) {
 8 |   $breakpointFound: false;
 9 | 
10 |   @each $breakpoint in $breakpoints {
11 |     $alias: nth($breakpoint, 1);
12 |     $condition: nth($breakpoint, 2);
13 | 
14 |     @if $mq == $alias and $condition {
15 |       $breakpointFound: true;
16 | 
17 |       @media #{$condition} {
18 |         @content;
19 |       }
20 |     }
21 |   }
22 | 
23 |   @if $breakpointFound == false {
24 |     @warn "Oops! Breakpoint ‘#{$mq}’ does not exist \:";
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/src/assets/styles/spec/utils/layout/utils/center.scss:
--------------------------------------------------------------------------------
 1 | // ---------------------------------------------------------
 2 | // @TOC
 3 | // ---------------------------------------------------------
 4 | 
 5 | // + @Variables
 6 | // + @Centering
 7 | 
 8 | // ---------------------------------------------------------
 9 | // @Variables
10 | // ---------------------------------------------------------
11 | 
12 | $responsive: true;
13 | 
14 | // ---------------------------------------------------------
15 | // @Centering
16 | // ---------------------------------------------------------
17 | 
18 | .centerY {
19 |   top: 50%;
20 |   transform: translateY(-50%);
21 | }
22 | 
23 | .centerX {
24 |   left: 50%;
25 |   transform: translateX(-50%);
26 | }
27 | 
28 | .centerXY {
29 |   top: 50%;
30 |   left: 50%;
31 |   transform: translate(-50%, -50%);
32 | }
33 | 
34 | @if ($responsive == true) {
35 |   @include generateResponsive() {
36 |     .centerY\@#{$breakpointAlias} {
37 |       top: 50%;
38 |       transform: translateY(-50%);
39 |     }
40 | 
41 |     .centerX\@#{$breakpointAlias} {
42 |       left: 50%;
43 |       transform: translateX(-50%);
44 |     }
45 | 
46 |     .centerXY\@#{$breakpointAlias} {
47 |       top: 50%;
48 |       left: 50%;
49 |       transform: translate(-50%, -50%);
50 |     }
51 |   }
52 | }
53 | 


--------------------------------------------------------------------------------
/src/assets/styles/spec/utils/layout/utils/gap.scss:
--------------------------------------------------------------------------------
  1 | @use "sass:math";
  2 | 
  3 | // ---------------------------------------------------------
  4 | // @TOC
  5 | // ---------------------------------------------------------
  6 | 
  7 | // + @Variables
  8 | // + @Base
  9 | // + @Gap (0 > 4 Step 1)
 10 | // + @Gap (5 > 35 Step 5)
 11 | // + @Gap (40 > 160 Step 10)
 12 | 
 13 | // ---------------------------------------------------------
 14 | // @Variables
 15 | // ---------------------------------------------------------
 16 | 
 17 | $responsive: true;
 18 | 
 19 | // ---------------------------------------------------------
 20 | // @Base
 21 | // ---------------------------------------------------------
 22 | 
 23 | [class*='gap'] {
 24 |   width: auto !important;
 25 |   overflow: hidden !important;
 26 | }
 27 | 
 28 | // ---------------------------------------------------------
 29 | // @Gap (0 > 4 Step 1)
 30 | // ---------------------------------------------------------
 31 | 
 32 | @for $i from 0 through 4 {
 33 |   .gapX-#{$i} {
 34 |     margin-left: #{math.div($i, -2)}px !important;
 35 |     margin-right: #{math.div($i, -2)}px !important;
 36 | 
 37 |     & > * {
 38 |       padding-left: #{math.div($i, 2)}px !important;
 39 |       padding-right: #{math.div($i, 2)}px !important;
 40 |     }
 41 |   }
 42 | 
 43 |   .gapY-#{$i} {
 44 |     margin-top: #{math.div($i, -2)}px !important;
 45 |     margin-bottom: #{math.div($i, -2)}px !important;
 46 | 
 47 |     & > * {
 48 |       padding-top: #{math.div($i, 2)}px !important;
 49 |       padding-bottom: #{math.div($i, 2)}px !important;
 50 |     }
 51 |   }
 52 | 
 53 |   .gap-#{$i} {
 54 |     margin: #{math.div($i, -2)}px !important;
 55 | 
 56 |     & > * {
 57 |       padding: #{math.div($i, 2)}px !important;
 58 |     }
 59 |   }
 60 | 
 61 |   @if ($responsive == true) {
 62 |     @include generateResponsive() {
 63 |       .gapX-#{$i}\@#{$breakpointAlias} {
 64 |         margin-left: #{math.div($i, -2)}px !important;
 65 |         margin-right: #{math.div($i, -2)}px !important;
 66 | 
 67 |         & > * {
 68 |           padding-left: #{math.div($i, 2)}px !important;
 69 |           padding-right: #{math.div($i, 2)}px !important;
 70 |         }
 71 |       }
 72 | 
 73 |       .gapY-#{$i}\@#{$breakpointAlias} {
 74 |         margin-top: #{math.div($i, -2)}px !important;
 75 |         margin-bottom: #{math.div($i, -2)}px !important;
 76 | 
 77 |         & > * {
 78 |           padding-top: #{math.div($i, 2)}px !important;
 79 |           padding-bottom: #{math.div($i, 2)}px !important;
 80 |         }
 81 |       }
 82 | 
 83 |       .gap-#{$i}\@#{$breakpointAlias} {
 84 |         margin: #{math.div($i, -2)}px !important;
 85 | 
 86 |         & > * {
 87 |           padding: #{math.div($i, 2)}px !important;
 88 |         }
 89 |       }
 90 |     }
 91 |   }
 92 | }
 93 | 
 94 | // ---------------------------------------------------------
 95 | // @Gap (5 > 35 Step 5)
 96 | // ---------------------------------------------------------
 97 | 
 98 | @for $i from 5 through 35 {
 99 |   @if $i % 5 == 0 {
100 |     .gapX-#{$i} {
101 |       margin-left: #{math.div($i, -2)}px !important;
102 |       margin-right: #{math.div($i, -2)}px !important;
103 | 
104 |       & > * {
105 |         padding-left: #{math.div($i, 2)}px !important;
106 |         padding-right: #{math.div($i, 2)}px !important;
107 |       }
108 |     }
109 | 
110 |     .gapY-#{$i} {
111 |       margin-top: #{math.div($i, -2)}px !important;
112 |       margin-bottom: #{math.div($i, -2)}px !important;
113 | 
114 |       & > * {
115 |         padding-top: #{math.div($i, 2)}px !important;
116 |         padding-bottom: #{math.div($i, 2)}px !important;
117 |       }
118 |     }
119 | 
120 |     .gap-#{$i} {
121 |       margin: #{math.div($i, -2)}px !important;
122 | 
123 |       & > * {
124 |         padding: #{math.div($i, 2)}px !important;
125 |       }
126 |     }
127 | 
128 |     @if ($responsive == true) {
129 |       @include generateResponsive() {
130 |         .gapX-#{$i}\@#{$breakpointAlias} {
131 |           margin-left: #{math.div($i, -2)}px !important;
132 |           margin-right: #{math.div($i, -2)}px !important;
133 | 
134 |           & > * {
135 |             padding-left: #{math.div($i, 2)}px !important;
136 |             padding-right: #{math.div($i, 2)}px !important;
137 |           }
138 |         }
139 | 
140 |         .gapY-#{$i}\@#{$breakpointAlias} {
141 |           margin-top: #{math.div($i, -2)}px !important;
142 |           margin-bottom: #{math.div($i, -2)}px !important;
143 | 
144 |           & > * {
145 |             padding-top: #{math.div($i, 2)}px !important;
146 |             padding-bottom: #{math.div($i, 2)}px !important;
147 |           }
148 |         }
149 | 
150 |         .gap-#{$i}\@#{$breakpointAlias} {
151 |           margin: #{math.div($i, -2)}px !important;
152 | 
153 |           & > * {
154 |             padding: #{math.div($i, 2)}px !important;
155 |           }
156 |         }
157 |       }
158 |     }
159 |   }
160 | }
161 | 
162 | // ---------------------------------------------------------
163 | // @Gap (40 > 160 Step 10)
164 | // ---------------------------------------------------------
165 | 
166 | @for $i from 40 through 160 {
167 |   @if $i % 10 == 0 {
168 |     .gapX-#{$i} {
169 |       margin-left: #{math.div($i, -2)}px !important;
170 |       margin-right: #{math.div($i, -2)}px !important;
171 | 
172 |       & > * {
173 |         padding-left: #{math.div($i, 2)}px !important;
174 |         padding-right: #{math.div($i, 2)}px !important;
175 |       }
176 |     }
177 | 
178 |     .gapY-#{$i} {
179 |       margin-top: #{math.div($i, -2)}px !important;
180 |       margin-bottom: #{math.div($i, -2)}px !important;
181 | 
182 |       & > * {
183 |         padding-top: #{math.div($i, 2)}px !important;
184 |         padding-bottom: #{math.div($i, 2)}px !important;
185 |       }
186 |     }
187 | 
188 |     .gap-#{$i} {
189 |       margin: #{math.div($i, -2)}px !important;
190 | 
191 |       & > * {
192 |         padding: #{math.div($i, 2)}px !important;
193 |       }
194 |     }
195 | 
196 |     @if ($responsive == true) {
197 |       @include generateResponsive() {
198 |         .gapX-#{$i}\@#{$breakpointAlias} {
199 |           margin-left: #{math.div($i, -2)}px !important;
200 |           margin-right: #{math.div($i, -2)}px !important;
201 | 
202 |           & > * {
203 |             padding-left: #{math.div($i, 2)}px !important;
204 |             padding-right: #{math.div($i, 2)}px !important;
205 |           }
206 |         }
207 | 
208 |         .gapY-#{$i}\@#{$breakpointAlias} {
209 |           margin-top: #{math.div($i, -2)}px !important;
210 |           margin-bottom: #{math.div($i, -2)}px !important;
211 | 
212 |           & > * {
213 |             padding-top: #{math.div($i, 2)}px !important;
214 |             padding-bottom: #{math.div($i, 2)}px !important;
215 |           }
216 |         }
217 | 
218 |         .gap-#{$i}\@#{$breakpointAlias} {
219 |           margin: #{math.div($i, -2)}px !important;
220 | 
221 |           & > * {
222 |             padding: #{math.div($i, 2)}px !important;
223 |           }
224 |         }
225 |       }
226 |     }
227 |   }
228 | }
229 | 


--------------------------------------------------------------------------------
/src/assets/styles/spec/utils/layout/utils/index.scss:
--------------------------------------------------------------------------------
1 | @import 'center';
2 | @import 'gap';
3 | @import 'peers';
4 | @import 'layers';
5 | 
6 | 


--------------------------------------------------------------------------------
/src/assets/styles/spec/utils/layout/utils/layers.scss:
--------------------------------------------------------------------------------
1 | .layers {
2 |   display: flex;
3 |   flex-flow: column nowrap;
4 |   align-items: center;
5 | }
6 | 


--------------------------------------------------------------------------------
/src/assets/styles/spec/utils/layout/utils/peers.scss:
--------------------------------------------------------------------------------
 1 | .peers {
 2 |   box-sizing: border-box;
 3 |   display: flex !important;
 4 |   align-items: flex-start;
 5 |   justify-content: flex-start;
 6 |   flex-flow: row wrap;
 7 |   height: auto;
 8 |   max-width: 100%;
 9 |   margin: 0;
10 |   padding: 0;
11 | }
12 | 
13 | .peer {
14 |   display: block;
15 |   height: auto;
16 |   flex: 0 0 auto;
17 | }
18 | 
19 | .peer-greed {
20 |   flex: 1 1 auto;
21 |   // overflow: hidden;
22 | }
23 | 
24 | .peers-greed > .peer,
25 | .peers-greed > .peers {
26 |   flex: 1 1 auto;
27 | }
28 | 
29 | .peer > img {
30 |   max-width: none;
31 | }
32 | 
33 | .peer-greed > img {
34 |   max-width: 100%;
35 | }
36 | 


--------------------------------------------------------------------------------
/src/assets/styles/vendor/datepicker.scss:
--------------------------------------------------------------------------------
  1 | .datepicker {
  2 |   border-radius: 0;
  3 |   padding: 25px;
  4 |   box-shadow: none;
  5 |   border: 1px solid $border-color;
  6 | 
  7 |   table {
  8 |     tr {
  9 |       th,
 10 |       td {
 11 |         border-radius: 0;
 12 |         width: 40px;
 13 |         height: 35px;
 14 |       }
 15 | 
 16 |       td {
 17 |         transition: all 0.2s ease-in-out;
 18 | 
 19 |         span {
 20 |           border-radius: 0;
 21 |         }
 22 |       }
 23 |     }
 24 |   }
 25 | }
 26 | 
 27 | .datepicker table tr td span.active:active,
 28 | .datepicker table tr td span.active:hover:active,
 29 | .datepicker table tr td span.active.disabled:active,
 30 | .datepicker table tr td span.active.disabled:hover:active,
 31 | .datepicker table tr td span.active.active,
 32 | .datepicker table tr td span.active:hover.active,
 33 | .datepicker table tr td span.active.disabled.active,
 34 | .datepicker table tr td span.active.disabled:hover.active,
 35 | .datepicker table tr td span.active.active:hover,
 36 | .datepicker table tr td span.active:hover.active:hover,
 37 | .datepicker table tr td.active:active,
 38 | .datepicker table tr td.active.highlighted:active,
 39 | .datepicker table tr td.active.active,
 40 | .datepicker table tr td.active.highlighted.active,
 41 | .datepicker table tr td.active:active:hover,
 42 | .datepicker table tr td.active.highlighted:active:hover,
 43 | .datepicker table tr td.active.active:hover,
 44 | .datepicker table tr td.active.highlighted.active:hover,
 45 | .datepicker table tr td.active:active:focus,
 46 | .datepicker table tr td.active.highlighted:active:focus,
 47 | .datepicker table tr td.active.active:focus,
 48 | .datepicker table tr td.active.highlighted.active:focus,
 49 | .datepicker table tr td.active:active.focus,
 50 | .datepicker table tr td.active.highlighted:active.focus,
 51 | .datepicker table tr td.active.active.focus,
 52 | .datepicker table tr td.active.highlighted.active.focus {
 53 |   color: $default-white;
 54 |   background-color: $default-primary;
 55 |   border-color: transparent;
 56 | }
 57 | 
 58 | .datepicker table tr td span:hover,
 59 | .datepicker table tr td span.focused {
 60 |   background: $default-primary;
 61 |   color: #fff;
 62 | }
 63 | 
 64 | .datepicker table tr td.day:hover,
 65 | .datepicker table tr td.focused {
 66 |   background: $default-primary;
 67 |   color: #fff;
 68 |   cursor: pointer;
 69 | }
 70 | 
 71 | .datepicker .datepicker-switch:hover,
 72 | .datepicker .prev:hover,
 73 | .datepicker .next:hover,
 74 | .datepicker tfoot tr th:hover {
 75 |   background: $default-primary;
 76 |   color: #fff;
 77 |   cursor: pointer;
 78 | }
 79 | 
 80 | .datepicker-inline {
 81 |   width: 330px;
 82 | }
 83 | 
 84 | .daterangepicker {
 85 |   border-radius: 0;
 86 |   padding: 30px;
 87 |   box-shadow: none;
 88 |   border: 1px solid $border-color;
 89 | 
 90 |   .input-mini {
 91 |     border-radius: 0;
 92 |     margin-bottom: 20px;
 93 |     height: 40px;
 94 |     padding: 0 6px 0 35px;
 95 | 
 96 |     &.active {
 97 |       border-radius: 0;
 98 |       border-color: lighten($default-info, 20%);
 99 |     }
100 |   }
101 | 
102 |   .daterangepicker_input {
103 |     i {
104 |       position: absolute;
105 |       left: 10px;
106 |       top: 13px;
107 |     }
108 |   }
109 | 
110 |   td,
111 |   th {
112 |     border-radius: 0;
113 |     width: 40px;
114 |     height: 35px;
115 | 
116 |     &.available{
117 |       &:hover{
118 |         background: $default-primary;
119 |         color: #fff;
120 |       }
121 |     }
122 |   }
123 | 
124 |   td {
125 |     &.in-range {
126 |       background-color: transparent;
127 |       color: $default-primary;
128 |     }
129 | 
130 |     &.active {
131 |       background-color: $default-primary;
132 |       border-color: transparent;
133 |       color: #fff;
134 | 
135 |       &:hover {
136 |         background-color: $default-primary;
137 |         border-color: transparent;
138 |         color: #fff;
139 |       }
140 |     }
141 | 
142 |     &.start-date {
143 |       border-radius: 0;
144 | 
145 |       &.end-date {
146 |         border-radius: 0;
147 |       }
148 |     }
149 | 
150 |     &.end-date {
151 |       border-radius: 0;
152 |     }
153 |   }
154 | 
155 |   select {
156 |     &.hourselect,
157 |     &.minuteselect,
158 |     &.secondselect,
159 |     &.ampmselect {
160 |       border: 1px solid $border-color;
161 |       min-height: 30px;
162 |     }
163 |   }
164 | 
165 |   .calendar-time {
166 |     i {
167 |       top: 8px;
168 |       left: 35px;
169 |     }
170 |   }
171 | 
172 |   @include from($breakpoint-sm) {
173 |     .calendar {
174 |       margin-right: 20px !important;
175 |     }
176 |   }
177 | }
178 | 
179 | 


--------------------------------------------------------------------------------
/src/assets/styles/vendor/fullcalendar.scss:
--------------------------------------------------------------------------------
 1 | .fc {
 2 |   background-color: $default-white;
 3 |   border: 1px solid $border-color;
 4 | 
 5 |   th {
 6 |     text-align: center;
 7 |     padding: 15px;
 8 |     background-color: transparent;
 9 |     color: $default-text-color;
10 |     font-size: 12px;
11 |     text-transform: uppercase;
12 |     border-right-width: 0;
13 |     border-left-width: 0;
14 |   }
15 | 
16 |   button {
17 |     background-color: $default-white;
18 |     background-image: none;
19 |     height: 37px;
20 |     padding: 0 15px;
21 |     color: darken($default-text-color, 10%);
22 | 
23 |     &.fc-state-default {
24 |       border-color: $border-color;
25 |       box-shadow: none;
26 |     }
27 | 
28 |     &.fc-state-active {
29 |       box-shadow: none;
30 |       background-color: $border-color;
31 |     }
32 |   }
33 | }
34 | 
35 | .fc-toolbar {
36 |   padding: 20px 20px 0;
37 | }
38 | 
39 | .fc-view,
40 | .fc-view > table {
41 |   background-color: $default-white;
42 | }
43 | 
44 | .fc-basic-view td.fc-day-number,
45 | .fc-basic-view td.fc-week-number span {
46 |   padding: 7px 15px;
47 | }
48 | 
49 | .fc-unthemed {
50 |   .fc-content,
51 |   .fc-divider,
52 |   .fc-popover,
53 |   .fc-row,
54 |   tbody,
55 |   td,
56 |   th,
57 |   thead {
58 |     border-color: $border-color;
59 |   }
60 | 
61 |   .fc-today {
62 |     background-color: transparent;
63 |   }
64 | }
65 | 
66 | .fc-basic-view {
67 |   .fc-day-number {
68 |     &.fc-today {
69 |       background-color: $default-info;
70 |       color: $default-white;
71 |       display: inline-block;
72 |       float: right;
73 |       border-radius: 50%;
74 |       padding: 6px 8px;
75 |       line-height: 1;
76 |       margin: 4px 4px 0 0;
77 |     }
78 |   }
79 | }
80 | 
81 | .fc-event-container {
82 |   .fc-event {
83 |     border-radius: 0;
84 |     border: 0;
85 |     background-color: $inverse-info;
86 |     color: $default-info !important;
87 |     font-size: 12px;
88 |     line-height: 2.5;
89 |     padding: 0 15px;
90 |   }
91 | 
92 |   .fc-day-grid-event {
93 |     margin: 1px 5px 5px;
94 |   }
95 | }
96 | 


--------------------------------------------------------------------------------
/src/assets/styles/vendor/index.scss:
--------------------------------------------------------------------------------
1 | @import 'perfect-scrollbar/css/perfect-scrollbar';
2 | @import 'themify-icons';
3 | @import 'font-awesome';
4 | @import 'perfectScrollbar';
5 | @import 'sparkline';
6 | @import 'jquery.datatables';
7 | @import 'fullcalendar';
8 | @import 'datepicker';
9 | 


--------------------------------------------------------------------------------
/src/assets/styles/vendor/jquery.datatables.scss:
--------------------------------------------------------------------------------
  1 | table {
  2 |   &.dataTable {
  3 |     &.no-footer {
  4 |       border-bottom: 1px solid $border-color;
  5 |       margin-bottom: 20px;
  6 |     }
  7 |   }
  8 | }
  9 | 
 10 | .sorting_asc {
 11 |   &:focus {
 12 |     outline: none;
 13 |   }
 14 | }
 15 | 
 16 | .dataTables_wrapper {
 17 |   overflow: hidden;
 18 |   padding-bottom: 5px;
 19 | 
 20 |   .dataTables_length{
 21 |     color: $default-dark;
 22 |     float: left;
 23 | 
 24 |     @include to($breakpoint-sm) {
 25 |       text-align: left;
 26 |     }
 27 | 
 28 |     select {
 29 |       border: 1px solid $border-color;
 30 |       border-radius: 2px;
 31 |       box-shadow: none;
 32 |       height: 35px;
 33 |       font-size: 14px;
 34 |       padding: 5px;
 35 |       margin-left: 5px;
 36 |       margin-right: 5px;
 37 |       color: $default-text-color;
 38 |       transition: all 0.2s ease-in;
 39 |     }
 40 |   }
 41 | 
 42 |   .dataTables_filter {
 43 |     color: $default-dark;
 44 |     float: right;
 45 | 
 46 |     @include to($breakpoint-sm) {
 47 |       text-align: left;
 48 |     }
 49 | 
 50 |     input {
 51 |       border: 1px solid $border-color;
 52 |       border-radius: 2px;
 53 |       box-shadow: none;
 54 |       height: 35px;
 55 |       font-size: 14px;
 56 |       margin-left: 15px;
 57 |       padding: 5px;
 58 |       color: $default-text-color;
 59 |       transition: all 0.2s ease-in;
 60 |     }
 61 |   }
 62 | 
 63 |   .dataTables_info {
 64 |     color: $default-text-color;
 65 |     float: left;
 66 |   }
 67 | 
 68 |   .dataTables_processing {
 69 |     color: $default-dark;
 70 |   }
 71 | 
 72 |   .dataTables_paginate {
 73 |     color: $default-text-color;
 74 |     float: right;
 75 | 
 76 |     .paginate_button {
 77 |       color: $default-text-color !important;
 78 |       padding: 6px 12px;
 79 |       border-radius: 2px;
 80 |       margin-right: 10px;
 81 |       transition: all 0.2s ease-in-out;
 82 |       text-decoration: none;
 83 | 
 84 |       &.next,
 85 |       &.previous,
 86 |       &.first,
 87 |       &.last {
 88 |         border-radius: 2px;
 89 |         text-decoration: none;
 90 | 
 91 |         &:hover,
 92 |         &:focus {
 93 |           color: #fff !important;
 94 |         }
 95 | 
 96 |         &.disabled {
 97 |           opacity: 0.4;
 98 |           pointer-events: none;
 99 |         }
100 |       }
101 | 
102 |       &:hover {
103 |         color: #fff !important;
104 |         background: $default-primary;
105 |       }
106 | 
107 |       &.current {
108 |         color: #fff !important;
109 |         background: $default-primary;
110 | 
111 |         &:hover {
112 |           color: $default-white !important;
113 |           background: $default-primary;
114 |         }
115 |       }
116 |     }
117 |   }
118 | 
119 |   .status {
120 |     width: 5px;
121 |     height: 5px;
122 |   }
123 | }
124 | 
125 | 


--------------------------------------------------------------------------------
/src/assets/styles/vendor/perfectScrollbar.scss:
--------------------------------------------------------------------------------
1 | .ps__rail-y {
2 |   right: 0 !important;
3 |   left: auto !important;
4 | }
5 | 


--------------------------------------------------------------------------------
/src/assets/styles/vendor/sparkline.scss:
--------------------------------------------------------------------------------
1 | #jqstooltip {
2 |   width: auto !important;
3 |   height: auto !important;
4 |   padding: 5px 10px !important;
5 |   border-radius: 2px !important;
6 | }
7 | 


--------------------------------------------------------------------------------
/src/signin.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  6 |     <title>Sign In</title>
  7 |     <style>
  8 |       #loader {
  9 |         transition: all 0.3s ease-in-out;
 10 |         opacity: 1;
 11 |         visibility: visible;
 12 |         position: fixed;
 13 |         height: 100vh;
 14 |         width: 100%;
 15 |         background: #fff;
 16 |         z-index: 90000;
 17 |       }
 18 | 
 19 |       #loader.fadeOut {
 20 |         opacity: 0;
 21 |         visibility: hidden;
 22 |       }
 23 | 
 24 |       .spinner {
 25 |         width: 40px;
 26 |         height: 40px;
 27 |         position: absolute;
 28 |         top: calc(50% - 20px);
 29 |         left: calc(50% - 20px);
 30 |         background-color: #333;
 31 |         border-radius: 100%;
 32 |         -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
 33 |         animation: sk-scaleout 1.0s infinite ease-in-out;
 34 |       }
 35 | 
 36 |       @-webkit-keyframes sk-scaleout {
 37 |         0% { -webkit-transform: scale(0) }
 38 |         100% {
 39 |           -webkit-transform: scale(1.0);
 40 |           opacity: 0;
 41 |         }
 42 |       }
 43 | 
 44 |       @keyframes sk-scaleout {
 45 |         0% {
 46 |           -webkit-transform: scale(0);
 47 |           transform: scale(0);
 48 |         } 100% {
 49 |           -webkit-transform: scale(1.0);
 50 |           transform: scale(1.0);
 51 |           opacity: 0;
 52 |         }
 53 |       }
 54 |     </style>
 55 |   </head>
 56 |   <body class="app">
 57 |     <div id='loader'>
 58 |       <div class="spinner"></div>
 59 |     </div>
 60 | 
 61 |     <script>
 62 |       window.addEventListener('load', function load() {
 63 |         const loader = document.getElementById('loader');
 64 |         setTimeout(function() {
 65 |           loader.classList.add('fadeOut');
 66 |         }, 300);
 67 |       });
 68 |     </script>
 69 |     <div class="peers ai-s fxw-nw h-100vh">
 70 |       <div class="d-n@sm- peer peer-greed h-100 pos-r bgr-n bgpX-c bgpY-c bgsz-cv" style='background-image: url("assets/static/images/bg.jpg")'>
 71 |         <div class="pos-a centerXY">
 72 |           <div class="bgc-white bdrs-50p pos-r" style='width: 120px; height: 120px;'>
 73 |             <img class="pos-a centerXY" src="assets/static/images/logo.png" alt="">
 74 |           </div>
 75 |         </div>
 76 |       </div>
 77 |       <div class="col-12 col-md-4 peer pX-40 pY-80 h-100 bgc-white scrollable pos-r" style='min-width: 320px;'>
 78 |         <h4 class="fw-300 c-grey-900 mB-40">Login</h4>
 79 |         <form>
 80 |           <div class="mb-3">
 81 |             <label class="text-normal text-dark form-label">Username</label>
 82 |             <input type="email" class="form-control" placeholder="John Doe">
 83 |           </div>
 84 |           <div class="mb-3">
 85 |             <label class="text-normal text-dark form-label">Password</label>
 86 |             <input type="password" class="form-control" placeholder="Password">
 87 |           </div>
 88 |           <div class="">
 89 |             <div class="peers ai-c jc-sb fxw-nw">
 90 |               <div class="peer">
 91 |                 <div class="checkbox checkbox-circle checkbox-info peers ai-c">
 92 |                   <input type="checkbox" id="inputCall1" name="inputCheckboxesCall" class="peer">
 93 |                   <label for="inputCall1" class=" peers peer-greed js-sb ai-c form-label">
 94 |                     <span class="peer peer-greed">Remember Me</span>
 95 |                   </label>
 96 |                 </div>
 97 |               </div>
 98 |               <div class="peer">
 99 |                 <button class="btn btn-primary btn-color">Login</button>
100 |               </div>
101 |             </div>
102 |           </div>
103 |         </form>
104 |       </div>
105 |     </div>
106 |   </body>
107 | </html>
108 | 


--------------------------------------------------------------------------------
/src/signup.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  6 |     <title>Sign Up</title>
  7 |     <style>
  8 |       #loader {
  9 |         transition: all 0.3s ease-in-out;
 10 |         opacity: 1;
 11 |         visibility: visible;
 12 |         position: fixed;
 13 |         height: 100vh;
 14 |         width: 100%;
 15 |         background: #fff;
 16 |         z-index: 90000;
 17 |       }
 18 | 
 19 |       #loader.fadeOut {
 20 |         opacity: 0;
 21 |         visibility: hidden;
 22 |       }
 23 | 
 24 |       .spinner {
 25 |         width: 40px;
 26 |         height: 40px;
 27 |         position: absolute;
 28 |         top: calc(50% - 20px);
 29 |         left: calc(50% - 20px);
 30 |         background-color: #333;
 31 |         border-radius: 100%;
 32 |         -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
 33 |         animation: sk-scaleout 1.0s infinite ease-in-out;
 34 |       }
 35 | 
 36 |       @-webkit-keyframes sk-scaleout {
 37 |         0% { -webkit-transform: scale(0) }
 38 |         100% {
 39 |           -webkit-transform: scale(1.0);
 40 |           opacity: 0;
 41 |         }
 42 |       }
 43 | 
 44 |       @keyframes sk-scaleout {
 45 |         0% {
 46 |           -webkit-transform: scale(0);
 47 |           transform: scale(0);
 48 |         } 100% {
 49 |           -webkit-transform: scale(1.0);
 50 |           transform: scale(1.0);
 51 |           opacity: 0;
 52 |         }
 53 |       }
 54 |     </style>
 55 |   </head>
 56 |   <body class="app">
 57 |     <div id='loader'>
 58 |       <div class="spinner"></div>
 59 |     </div>
 60 | 
 61 |     <script>
 62 |       window.addEventListener('load', function load() {
 63 |         const loader = document.getElementById('loader');
 64 |         setTimeout(function() {
 65 |           loader.classList.add('fadeOut');
 66 |         }, 300);
 67 |       });
 68 |     </script>
 69 |     <div class="peers ai-s fxw-nw h-100vh">
 70 |       <div class="peer peer-greed h-100 pos-r bgr-n bgpX-c bgpY-c bgsz-cv" style='background-image: url("assets/static/images/bg.jpg")'>
 71 |         <div class="pos-a centerXY">
 72 |           <div class="bgc-white bdrs-50p pos-r" style='width: 120px; height: 120px;'>
 73 |             <img class="pos-a centerXY" src="assets/static/images/logo.png" alt="">
 74 |           </div>
 75 |         </div>
 76 |       </div>
 77 |       <div class="col-12 col-md-4 peer pX-40 pY-80 h-100 bgc-white scrollable pos-r" style='min-width: 320px;'>
 78 |         <h4 class="fw-300 c-grey-900 mB-40">Register</h4>
 79 |         <form>
 80 |           <div class="mb-3">
 81 |             <label class="form-label" class="text-normal text-dark">Username</label>
 82 |             <input type="text" class="form-control" Placeholder='John Doe'>
 83 |           </div>
 84 |           <div class="mb-3">
 85 |             <label class="form-label" class="text-normal text-dark">Email Address</label>
 86 |             <input type="email" class="form-control" Placeholder='name@email.com'>
 87 |           </div>
 88 |           <div class="mb-3">
 89 |             <label class="form-label" class="text-normal text-dark">Password</label>
 90 |             <input type="password" class="form-control" placeholder="Password">
 91 |           </div>
 92 |           <div class="mb-3">
 93 |             <label class="form-label" class="text-normal text-dark">Confirm Password</label>
 94 |             <input type="password" class="form-control" placeholder="Password">
 95 |           </div>
 96 |           <div class="mb-3">
 97 |             <button class="btn btn-primary btn-color">Register</button>
 98 |           </div>
 99 |         </form>
100 |       </div>
101 |     </div>
102 | 
103 |   </body>
104 | </html>
105 | 


--------------------------------------------------------------------------------
/src/test.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 6 |   <title>Test</title>
 7 |   <style>
 8 |     #loader {
 9 |       transition: all 0.3s ease-in-out;
10 |       opacity: 1;
11 |       visibility: visible;
12 |       position: fixed;
13 |       height: 100vh;
14 |       width: 100%;
15 |       background: #fff;
16 |       z-index: 90000;
17 |     }
18 | 
19 |     #loader.fadeOut {
20 |       opacity: 0;
21 |       visibility: hidden;
22 |     }
23 | 
24 | 
25 | 
26 |     .spinner {
27 |       width: 40px;
28 |       height: 40px;
29 |       position: absolute;
30 |       top: calc(50% - 20px);
31 |       left: calc(50% - 20px);
32 |       background-color: #333;
33 |       border-radius: 100%;
34 |       -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
35 |       animation: sk-scaleout 1.0s infinite ease-in-out;
36 |     }
37 | 
38 |     @-webkit-keyframes sk-scaleout {
39 |       0% { -webkit-transform: scale(0) }
40 |       100% {
41 |         -webkit-transform: scale(1.0);
42 |         opacity: 0;
43 |       }
44 |     }
45 | 
46 |     @keyframes sk-scaleout {
47 |       0% {
48 |         -webkit-transform: scale(0);
49 |         transform: scale(0);
50 |       } 100% {
51 |         -webkit-transform: scale(1.0);
52 |         transform: scale(1.0);
53 |         opacity: 0;
54 |       }
55 |     }
56 |   </style>
57 | </head>
58 | <body class="app">
59 |   <div id='loader'>
60 |     <div class="spinner"></div>
61 |   </div>
62 | 
63 |   <script>
64 |     window.addEventListener('load', function load() {
65 |       const loader = document.getElementById('loader');
66 |       setTimeout(function() {
67 |           loader.classList.add('fadeOut');
68 |       }, 300);
69 |     });
70 |   </script>
71 |   <div class="page-container">
72 |     <!-- <div class="header navbar">
73 |       <div class="header-container">
74 |         
75 |       </div>
76 |       
77 |     </div> -->
78 |     <main class='main-content bgc-grey-100'>
79 |       <div id='mainContent'>
80 |         <div class="full-container">
81 |           <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
82 |             Tooltip on top
83 |           </button>
84 |           <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
85 |             Tooltip on top
86 |           </button>
87 | 
88 |         </div>
89 |       </div>
90 |     </main>
91 |     <footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
92 |       <span>Copyright © 2024 Designed by <a href="https://colorlib.com" target="_blank" rel="nofollow noopener noreferrer" title="Colorlib">Colorlib</a>. All rights reserved.</span>
93 |     </footer>
94 |   </div>
95 | </body>
96 | </html>


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const config = require('./webpack/config');
2 | 
3 | module.exports = config;
4 | 


--------------------------------------------------------------------------------
/webpack/config.js:
--------------------------------------------------------------------------------
 1 | // ------------------
 2 | // @Table of Contents
 3 | // ------------------
 4 | 
 5 | /**
 6 |  * + @Loading Dependencies
 7 |  * + @Entry Point Setup
 8 |  * + @Path Resolving
 9 |  * + @Exporting Module
10 |  */
11 | 
12 | 
13 | // ---------------------
14 | // @Loading Dependencies
15 | // ---------------------
16 | 
17 | const
18 |   path = require('path'),
19 |   manifest = require('./manifest'),
20 |   devServer = require('./devServer'),
21 |   rules = require('./rules'),
22 |   plugins = require('./plugins');
23 | 
24 | const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
25 | const TerserPlugin = require("terser-webpack-plugin");
26 | 
27 | // ------------------
28 | // @Entry Point Setup
29 | // ------------------
30 | 
31 | const
32 |   entry = [
33 |     path.join(manifest.paths.src, 'assets', 'scripts', manifest.entries.js),
34 |   ];
35 | 
36 | 
37 | // ---------------
38 | // @Path Resolving
39 | // ---------------
40 | 
41 | const resolve = {
42 |   extensions: ['.webpack-loader.js', '.web-loader.js', '.loader.js', '.js'],
43 |   modules: [
44 |     path.join(__dirname, '../node_modules'),
45 |     path.join(manifest.paths.src, ''),
46 |   ],
47 | };
48 | 
49 | const optimization = {
50 |   minimize: manifest.MINIFY
51 | };
52 | 
53 | if (manifest.MINIFY) {
54 |   optimization.minimizer = [
55 |     new CssMinimizerPlugin(),
56 |     new TerserPlugin()
57 |   ];
58 | }
59 | 
60 | // -----------------
61 | // @Exporting Module
62 | // -----------------
63 | module.exports = {
64 |   devtool: manifest.IS_PRODUCTION ? false : 'source-map',
65 |   context: path.join(manifest.paths.src, manifest.entries.js),
66 |   // watch: !manifest.IS_PRODUCTION,
67 |   entry,
68 |   mode: manifest.NODE_ENV,
69 |   // output: {
70 |   //   path: manifest.paths.build,
71 |   //   publicPath: '',
72 |   //   filename: manifest.outputFiles.bundle,
73 |   // },
74 |   module: {
75 |     rules,
76 |   },
77 |   optimization: optimization,
78 |   resolve,
79 |   plugins,
80 |   devServer,
81 | };
82 | 


--------------------------------------------------------------------------------
/webpack/devServer.js:
--------------------------------------------------------------------------------
 1 | // ---------------------
 2 | // @Loading Dependencies
 3 | // ---------------------
 4 | 
 5 | const
 6 |   manifest = require('./manifest');
 7 | 
 8 | 
 9 | // ------------------
10 | // @DevServer Configs
11 | // ------------------
12 | 
13 | /**
14 |  * [1] : To enable local network testing
15 |  */
16 | 
17 | const devServer = {
18 |   static: {
19 |     directory: manifest.IS_PRODUCTION ? manifest.paths.build : manifest.paths.src,
20 |     watch: true,
21 |   },
22 |   historyApiFallback: true,
23 |   port: manifest.IS_PRODUCTION ? 3001 : 3000,
24 |   compress: manifest.IS_PRODUCTION,
25 |   client: {
26 |     overlay: true,
27 |     progress: !manifest.IS_PRODUCTION,
28 |   },
29 |   hot: !manifest.IS_PRODUCTION,
30 |   host: '0.0.0.0',
31 |   allowedHosts: 'all', // [1]
32 |   devMiddleware: {
33 |     stats: {
34 |       assets: true,
35 |       children: false,
36 |       chunks: false,
37 |       hash: false,
38 |       modules: false,
39 |       publicPath: false,
40 |       timings: true,
41 |       version: false,
42 |       warnings: true,
43 |       colors: true,
44 |     },
45 |   },
46 | };
47 | 
48 | 
49 | // -----------------
50 | // @Exporting Module
51 | // -----------------
52 | 
53 | module.exports = devServer;


--------------------------------------------------------------------------------
/webpack/manifest.js:
--------------------------------------------------------------------------------
 1 | // ------------------
 2 | // @Table of Contents
 3 | // ------------------
 4 | 
 5 | /**
 6 |  * + @Loading Dependencies
 7 |  * + @Environment Holders
 8 |  * + @Utils
 9 |  * + @App Paths
10 |  * + @Output Files Names
11 |  * + @Entries Files Names
12 |  * + @Exporting Module
13 |  */
14 | 
15 | 
16 | // ---------------------
17 | // @Loading Dependencies
18 | // ---------------------
19 | 
20 | const path = require('path');
21 | 
22 | 
23 | // --------------------
24 | // @Environment Holders
25 | // --------------------
26 | 
27 | const
28 |   NODE_ENV       = process.env.NODE_ENV || 'development',
29 |   IS_DEVELOPMENT = NODE_ENV === 'development',
30 |   IS_PRODUCTION  = NODE_ENV === 'production',
31 |   MINIFY         = process.env.MINIFY === 'true';
32 | 
33 | // ------
34 | // @Utils
35 | // ------
36 | 
37 | const
38 |   dir = src => path.join(__dirname, src);
39 | 
40 | 
41 | // ----------
42 | // @App Paths
43 | // ----------
44 | 
45 | const
46 |   paths = {
47 |     src   : dir('../src'),
48 |     build : dir('../dist'),
49 |   };
50 | 
51 | 
52 | // -------------------
53 | // @Output Files Names
54 | // -------------------
55 | 
56 | const
57 |   outputFiles = {
58 |     bundle : 'bundle.js',
59 |     vendor : 'vendor.js',
60 |     css    : 'style.css',
61 |   };
62 | 
63 | 
64 | // --------------------
65 | // @Entries Files Names
66 | // --------------------
67 | 
68 | const
69 |   entries = {
70 |     js   : 'index.js',
71 |   };
72 | 
73 | 
74 | // -----------------
75 | // @Exporting Module
76 | // -----------------
77 | 
78 | module.exports = {
79 |   paths,
80 |   outputFiles,
81 |   entries,
82 |   NODE_ENV,
83 |   IS_DEVELOPMENT,
84 |   IS_PRODUCTION,
85 |   MINIFY
86 | };
87 | 


--------------------------------------------------------------------------------
/webpack/plugins/caseSensitivePlugin.js:
--------------------------------------------------------------------------------
1 | const
2 |   CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
3 | 
4 | module.exports = new CaseSensitivePathsPlugin();
5 | 


--------------------------------------------------------------------------------
/webpack/plugins/copyPlugin.js:
--------------------------------------------------------------------------------
 1 | const
 2 |   path              = require('path'),
 3 |   manifest          = require('../manifest'),
 4 |   CopyWebpackPlugin = require('copy-webpack-plugin');
 5 | 
 6 | module.exports = new CopyWebpackPlugin({
 7 |   patterns: [
 8 |   {
 9 |     from : path.join(manifest.paths.src, 'assets/static'),
10 |     to   : path.join(manifest.paths.build, 'assets/static'),
11 |   },
12 | ]
13 | });
14 | 


--------------------------------------------------------------------------------
/webpack/plugins/dashboardPlugin.js:
--------------------------------------------------------------------------------
1 | const
2 |   DashboardPlugin = require('webpack-dashboard/plugin');
3 | 
4 | module.exports = new DashboardPlugin();
5 | 


--------------------------------------------------------------------------------
/webpack/plugins/extractPlugin.js:
--------------------------------------------------------------------------------
1 | const
2 |   manifest          = require('../manifest'),
3 |   ExtractTextPlugin = require('mini-css-extract-plugin');
4 | 
5 | module.exports = new ExtractTextPlugin({
6 |   filename: manifest.outputFiles.css,
7 |   // allChunks: true,
8 | });
9 | 


--------------------------------------------------------------------------------
/webpack/plugins/htmlPlugin.js:
--------------------------------------------------------------------------------
 1 | const
 2 |   path              = require('path'),
 3 |   manifest          = require('../manifest'),
 4 |   HtmlWebpackPlugin = require('html-webpack-plugin');
 5 | 
 6 | const titles = {
 7 |   'index': 'Dashboard',
 8 |   'blank': 'Blank',
 9 |   'buttons': 'Buttons',
10 |   'calendar': 'Calendar',
11 |   'charts': 'Charts',
12 |   'chat': 'Chat',
13 |   'compose': 'Compose',
14 |   'datatable': 'Datatable',
15 |   'email': 'Email',
16 |   'forms': 'Forms',
17 |   'google-maps': 'Google Maps',
18 |   'signin': 'Signin',
19 |   'signup': 'Signup',
20 |   'ui': 'UI',
21 |   'vector-maps': 'Vector Maps',
22 |   '404': '404',
23 |   '500': '500',
24 |   'basic-table': 'Basic Table',
25 |   'test': 'Test',
26 | };
27 | 
28 | let minify = {
29 |   collapseWhitespace: false,
30 |   minifyCSS: false,
31 |   minifyJS: false,
32 |   removeComments: true,
33 |   useShortDoctype: false,
34 | };
35 | 
36 | if (manifest.MINIFY) {
37 |   minify = {
38 |     collapseWhitespace: true,
39 |     minifyCSS: true,
40 |     minifyJS: true,
41 |     removeComments: true,
42 |     useShortDoctype: true,
43 |   };
44 | }
45 | 
46 | 
47 | module.exports = Object.keys(titles).map(title => {
48 |   return new HtmlWebpackPlugin({
49 |     template: path.join(manifest.paths.src, `${title}.html`),
50 |     path: manifest.paths.build,
51 |     filename: `${title}.html`,
52 |     inject: true,
53 |     minify: minify
54 |   });
55 | });
56 | 


--------------------------------------------------------------------------------
/webpack/plugins/imageminPlugin.js:
--------------------------------------------------------------------------------
1 | const
2 |   manifest          = require('../manifest'),
3 |   ImageminPlugin    = require('imagemin-webpack-plugin').default;
4 | 
5 | module.exports = new ImageminPlugin({
6 |   disable: manifest.IS_DEVELOPMENT,
7 | });
8 | 


--------------------------------------------------------------------------------
/webpack/plugins/index.js:
--------------------------------------------------------------------------------
 1 | const
 2 |   manifest          = require('../manifest');
 3 | 
 4 | const plugins = [];
 5 | 
 6 | plugins.push(
 7 |   require('./imageminPlugin'),
 8 |   ...(require('./htmlPlugin')),
 9 |   ...(require('./internal')),
10 |   require('./caseSensitivePlugin'),
11 |   require('./extractPlugin'),
12 |   require('./copyPlugin')
13 | );
14 | 
15 | if (manifest.IS_DEVELOPMENT) {
16 |   plugins.push(require('./dashboardPlugin'));
17 | }
18 | 
19 | if (manifest.IS_PRODUCTION) {
20 |   plugins.push(require('./copyPlugin'));
21 | }
22 | 
23 | module.exports = plugins;
24 | 


--------------------------------------------------------------------------------
/webpack/plugins/internal.js:
--------------------------------------------------------------------------------
  1 | // ------------------
  2 | // @Table of Contents
  3 | // ------------------
  4 | 
  5 | /**
  6 |  * + @Loading Dependencies
  7 |  * + @Common Plugins
  8 |  * + @Merging Production Plugins
  9 |  * + @Merging Development Plugins
 10 |  * + @Exporting Module
 11 |  */
 12 | 
 13 | 
 14 | // ---------------------
 15 | // @Loading Dependencies
 16 | // ---------------------
 17 | 
 18 | const
 19 |   manifest = require('../manifest'),
 20 |   webpack  = require('webpack');
 21 | 
 22 | 
 23 | // ---------------
 24 | // @Common Plugins
 25 | // ---------------
 26 | 
 27 | const
 28 |   plugins  = [];
 29 | 
 30 | plugins.push(
 31 |   // new webpack.DefinePlugin({
 32 |   //   'process.env': {
 33 |   //     NODE_ENV: JSON.stringify(manifest.NODE_ENV),
 34 |   //   },
 35 |   // }),
 36 | 
 37 | 
 38 |   // new webpack.optimize.CommonsChunkPlugin({
 39 |   //   name: 'vendor',
 40 |   //   filename: manifest.outputFiles.vendor,
 41 |   //   minChunks(module) {
 42 |   //     const { context } = module;
 43 |   //     return context && context.indexOf('node_modules') >= 0;
 44 |   //   },
 45 |   // }),
 46 | 
 47 |   new webpack.ProvidePlugin({
 48 |     $: 'jquery',
 49 |     jQuery: 'jquery',
 50 |     'window.jQuery': 'jquery',
 51 |     // Popper: ['popper.js', 'default'],
 52 |   })
 53 | );
 54 | 
 55 | 
 56 | // ---------------------------
 57 | // @Merging Production Plugins
 58 | // ---------------------------
 59 | 
 60 | // if (manifest.IS_PRODUCTION) {
 61 | //   plugins.push(
 62 | //     new webpack.optimize.UglifyJsPlugin({
 63 | //       compress: {
 64 | //         comparisons   : true,
 65 | //         conditionals  : true,
 66 | //         dead_code     : true,
 67 | //         drop_debugger : true,
 68 | //         evaluate      : true,
 69 | //         if_return     : true,
 70 | //         join_vars     : true,
 71 | //         screw_ie8     : true,
 72 | //         sequences     : true,
 73 | //         unused        : true,
 74 | //         warnings      : false,
 75 | //       },
 76 | 
 77 | //       output: {
 78 | //         comments: false,
 79 | //       },
 80 | //     })
 81 | //   );
 82 | // }
 83 | 
 84 | 
 85 | // ----------------------------
 86 | // @Merging Development Plugins
 87 | // ----------------------------
 88 | 
 89 | if (manifest.IS_DEVELOPMENT) {
 90 |   plugins.push(
 91 |     // new webpack.NoEmitOnErrorsPlugin(),
 92 |     // new webpack.NamedModulesPlugin(),
 93 |     new webpack.HotModuleReplacementPlugin()
 94 |   );
 95 | }
 96 | 
 97 | 
 98 | // -----------------
 99 | // @Exporting Module
100 | // -----------------
101 | 
102 | module.exports = plugins;
103 | 


--------------------------------------------------------------------------------
/webpack/rules/css.js:
--------------------------------------------------------------------------------
 1 | // ------------------
 2 | // @Table of Contents
 3 | // ------------------
 4 | 
 5 | /**
 6 |  * + @Loading Dependencies
 7 |  * + @Common Loaders
 8 |  * + @Merging Production Loaders
 9 |  * + @Merging Development Loaders
10 |  * + @Exporting Module
11 |  */
12 | 
13 | 
14 | // ---------------------
15 | // @Loading Dependencies
16 | // ---------------------
17 | 
18 | const
19 |   manifest          = require('../manifest'),
20 |   ExtractTextPlugin = require('mini-css-extract-plugin');
21 | 
22 | 
23 | // ---------------
24 | // @Common Loaders
25 | // ---------------
26 | 
27 | let rule = {};
28 | 
29 | const loaders = [
30 |   {
31 |     loader: 'css-loader',
32 |     options: {
33 |       sourceMap : manifest.IS_DEVELOPMENT,
34 |       importLoaders: 1,
35 |     },
36 |   },
37 | ];
38 | 
39 | 
40 | // ---------------------------
41 | // @Merging Production Loaders
42 | // ---------------------------
43 | 
44 | if (manifest.IS_PRODUCTION) {
45 |   rule = {
46 |     test: /\.css$/,
47 |     use: [{
48 |         loader: ExtractTextPlugin.loader,
49 |     }].concat(loaders),
50 |   };
51 | }
52 | 
53 | 
54 | // ----------------------------
55 | // @Merging Development Loaders
56 | // ----------------------------
57 | 
58 | if (manifest.IS_DEVELOPMENT) {
59 |   rule = {
60 |     test: /\.css$/,
61 |     use: [{
62 |       loader: 'style-loader',
63 |     }].concat(loaders),
64 |   };
65 | }
66 | 
67 | 
68 | // -----------------
69 | // @Exporting Module
70 | // -----------------
71 | 
72 | module.exports = rule;
73 | 


--------------------------------------------------------------------------------
/webpack/rules/fonts.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   test: /\.(eot|svg|ttf|woff|woff2)$/,
3 |   exclude : /(node_modules)/,
4 |   type: 'asset/resource',
5 | };


--------------------------------------------------------------------------------
/webpack/rules/images.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   test    : /\.(png|gif|jpg?g|svg)$/i,
 3 |   exclude : /(node_modules)/,
 4 |   use     : [{
 5 |     loader: 'file-loader',
 6 |     options: {
 7 |       outputPath: 'assets',
 8 |     },
 9 |   }],
10 | };
11 | 


--------------------------------------------------------------------------------
/webpack/rules/index.js:
--------------------------------------------------------------------------------
1 | module.exports = [
2 |   require('./js'),
3 |   require('./images'),
4 |   require('./css'),
5 |   require('./sass'),
6 |   require('./fonts'),
7 | ];
8 | 


--------------------------------------------------------------------------------
/webpack/rules/js.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   test    : /\.(js)$/,
3 |   exclude : /(node_modules|build|dist\/)/,
4 |   use     : ['babel-loader'],
5 | };
6 | 


--------------------------------------------------------------------------------
/webpack/rules/sass.js:
--------------------------------------------------------------------------------
 1 | // ------------------
 2 | // @Table of Contents
 3 | // ------------------
 4 | 
 5 | /**
 6 |  * + @Loading Dependencies
 7 |  * + @Common Loaders
 8 |  * + @Exporting Module
 9 |  */
10 | 
11 | 
12 | // ---------------------
13 | // @Loading Dependencies
14 | // ---------------------
15 | 
16 | const
17 |   manifest          = require('../manifest'),
18 |   path              = require('path'),
19 |   cssNext           = require('postcss-preset-env'),
20 |   ExtractTextPlugin = require('mini-css-extract-plugin');
21 | 
22 | // ---------------
23 | // @Common Loaders
24 | // ---------------
25 | 
26 | const loaders = [
27 |   {
28 |     loader: 'css-loader',
29 |     options: {
30 |       sourceMap : manifest.IS_DEVELOPMENT
31 |     },
32 |   },
33 |   {
34 |     loader: 'postcss-loader',
35 |     options: {
36 |       sourceMap: manifest.IS_DEVELOPMENT,
37 |       postcssOptions: {
38 |         plugins: [
39 |           [
40 |             cssNext(),
41 |           ],
42 |         ],
43 |       },
44 |     },
45 |   },
46 |   {
47 |     loader: 'sass-loader',
48 |     options: {
49 |       sourceMap: manifest.IS_DEVELOPMENT,
50 |       sassOptions: {
51 |         outputStyle: manifest.MINIFY ? 'compressed' : 'expanded',
52 |         includePaths: [
53 |           path.join('../../', 'node_modules'),
54 |           path.join(manifest.paths.src, 'assets', 'styles'),
55 |           path.join(manifest.paths.src, ''),
56 |         ],
57 |       },
58 |     }
59 |   }
60 | ];
61 | 
62 | if (manifest.IS_PRODUCTION) {
63 |   loaders.unshift(ExtractTextPlugin.loader);
64 | } else {
65 |   loaders.unshift({
66 |     loader: 'style-loader',
67 |   });
68 | }
69 | 
70 | const rule = {
71 |   test: /\.scss$/,
72 |   use: loaders
73 | };
74 | 
75 | // -----------------
76 | // @Exporting Module
77 | // -----------------
78 | 
79 | module.exports = rule;
80 | 


--------------------------------------------------------------------------------