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


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


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


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


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


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


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


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


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


--------------------------------------------------------------------------------
/demo-preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mortezakarimi/Adminator-admin-dashboard-rtl/HEAD/demo-preview.png


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


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


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


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


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


--------------------------------------------------------------------------------
/webpack/rules/svg.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   test: /\.(svg)$/i,
3 |   exclude: /(node_modules)/,
4 |   type: 'asset',
5 | };
6 | 


--------------------------------------------------------------------------------
/src/assets/static/images/404.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mortezakarimi/Adminator-admin-dashboard-rtl/HEAD/src/assets/static/images/404.png


--------------------------------------------------------------------------------
/src/assets/static/images/500.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mortezakarimi/Adminator-admin-dashboard-rtl/HEAD/src/assets/static/images/500.png


--------------------------------------------------------------------------------
/src/assets/static/images/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mortezakarimi/Adminator-admin-dashboard-rtl/HEAD/src/assets/static/images/bg.jpg


--------------------------------------------------------------------------------
/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/static/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mortezakarimi/Adminator-admin-dashboard-rtl/HEAD/src/assets/static/images/logo.png


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


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


--------------------------------------------------------------------------------
/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/utils/layout/utils/layers.scss:
--------------------------------------------------------------------------------
1 | .layers {
2 |   display: flex;
3 |   flex-flow: column nowrap;
4 |   align-items: center;
5 | }
6 | 


--------------------------------------------------------------------------------
/webpack/rules/images.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   test: /\.(png|gif|jpg?g)$/i,
3 |   exclude: /(node_modules)/,
4 |   type: 'asset/resource',
5 | };
6 | 


--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | # These are supported funding model platforms
2 | 
3 | github: 'mortezakarimi'
4 | custom: ['https://www.buymeacoffee.com/mortezakarimi']
5 | 


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


--------------------------------------------------------------------------------
/src/assets/static/fonts/icons/themify/themify.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mortezakarimi/Adminator-admin-dashboard-rtl/HEAD/src/assets/static/fonts/icons/themify/themify.eot


--------------------------------------------------------------------------------
/src/assets/static/fonts/icons/themify/themify.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mortezakarimi/Adminator-admin-dashboard-rtl/HEAD/src/assets/static/fonts/icons/themify/themify.ttf


--------------------------------------------------------------------------------
/src/assets/static/images/datatables/sort_asc.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mortezakarimi/Adminator-admin-dashboard-rtl/HEAD/src/assets/static/images/datatables/sort_asc.png


--------------------------------------------------------------------------------
/src/assets/static/images/datatables/sort_both.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mortezakarimi/Adminator-admin-dashboard-rtl/HEAD/src/assets/static/images/datatables/sort_both.png


--------------------------------------------------------------------------------
/src/assets/static/images/datatables/sort_desc.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mortezakarimi/Adminator-admin-dashboard-rtl/HEAD/src/assets/static/images/datatables/sort_desc.png


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


--------------------------------------------------------------------------------
/src/assets/static/fonts/icons/themify/themify.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mortezakarimi/Adminator-admin-dashboard-rtl/HEAD/src/assets/static/fonts/icons/themify/themify.woff


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


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


--------------------------------------------------------------------------------
/src/assets/static/fonts/icons/fontawesome/FontAwesome.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mortezakarimi/Adminator-admin-dashboard-rtl/HEAD/src/assets/static/fonts/icons/fontawesome/FontAwesome.otf


--------------------------------------------------------------------------------
/src/assets/static/images/datatables/sort_asc_disabled.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mortezakarimi/Adminator-admin-dashboard-rtl/HEAD/src/assets/static/images/datatables/sort_asc_disabled.png


--------------------------------------------------------------------------------
/src/assets/static/images/datatables/sort_desc_disabled.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mortezakarimi/Adminator-admin-dashboard-rtl/HEAD/src/assets/static/images/datatables/sort_desc_disabled.png


--------------------------------------------------------------------------------
/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/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 | 


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


--------------------------------------------------------------------------------
/src/assets/static/fonts/icons/fontawesome/fontawesome-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mortezakarimi/Adminator-admin-dashboard-rtl/HEAD/src/assets/static/fonts/icons/fontawesome/fontawesome-webfont.eot


--------------------------------------------------------------------------------
/src/assets/static/fonts/icons/fontawesome/fontawesome-webfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mortezakarimi/Adminator-admin-dashboard-rtl/HEAD/src/assets/static/fonts/icons/fontawesome/fontawesome-webfont.ttf


--------------------------------------------------------------------------------
/src/assets/static/fonts/icons/fontawesome/fontawesome-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mortezakarimi/Adminator-admin-dashboard-rtl/HEAD/src/assets/static/fonts/icons/fontawesome/fontawesome-webfont.woff


--------------------------------------------------------------------------------
/src/assets/static/fonts/icons/fontawesome/fontawesome-webfont.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mortezakarimi/Adminator-admin-dashboard-rtl/HEAD/src/assets/static/fonts/icons/fontawesome/fontawesome-webfont.woff2


--------------------------------------------------------------------------------
/.prettierrc.yaml:
--------------------------------------------------------------------------------
 1 | printWidth: 100
 2 | tabWidth: 2
 3 | useTabs: false
 4 | singleQuote: true
 5 | semi: true
 6 | quoteProps: preserve
 7 | bracketSpacing: true
 8 | bracketSameLine: true
 9 | endOfLine: crlf
10 | 


--------------------------------------------------------------------------------
/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


--------------------------------------------------------------------------------
/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 'loader';
8 | @import 'footer';
9 | 


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


--------------------------------------------------------------------------------
/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/styles/spec/settings/borders.scss:
--------------------------------------------------------------------------------
1 | // ---------------------------------------------------------
2 | // @Borders
3 | // ---------------------------------------------------------
4 | 
5 | $border-width: 1px;
6 | $border-color: rgb(0 0 0 / 6.25%);
7 | 


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


--------------------------------------------------------------------------------
/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/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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.";


--------------------------------------------------------------------------------
/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/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/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/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/styles/spec/settings/fonts.scss:
--------------------------------------------------------------------------------
1 | /* rtl:raw:
2 | @import "vazirmatn/Vazirmatn-font-face.css";
3 | */
4 | $font-primary: roboto, -apple-system, system-ui, blinkmacsystemfont, "Segoe UI", "Helvetica Neue", arial, sans-serif #{'/*rtl:prepend:"Vazirmatn", */'};
5 | $font-secondary: $font-primary;
6 | $font-size-base: 0.875rem;
7 | 


--------------------------------------------------------------------------------
/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/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/placeholder.scss:
--------------------------------------------------------------------------------
 1 | // ----------------------------------------------------------
 2 | // @Placeholder
 3 | // ----------------------------------------------------------
 4 | 
 5 | @mixin placeholder {
 6 |   &::input-placeholder { @content; }
 7 |   &:placeholder { @content; }
 8 |   &::placeholder { @content; }
 9 |   &:input-placeholder { @content; }
10 | }
11 | 


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


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


--------------------------------------------------------------------------------
/.stylelintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "stylelint-config-standard-scss",
 3 |   "plugins": ["stylelint-scss"],
 4 |   "rules": {
 5 |     "at-rule-no-unknown": null,
 6 |     "at-rule-empty-line-before": null,
 7 |     "selector-class-pattern": null,
 8 |     "scss/at-mixin-pattern": null,
 9 |     "scss/dollar-variable-pattern": null,
10 |     "selector-pseudo-element-no-unknown": null,
11 |     "selector-type-no-unknown": null,
12 |     "selector-pseudo-class-no-unknown": null
13 |   }
14 | }
15 | 


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


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


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/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 | 
22 |   // overflow: hidden;
23 | }
24 | 
25 | .peers-greed > .peer,
26 | .peers-greed > .peers {
27 |   flex: 1 1 auto;
28 | }
29 | 
30 | .peer > img {
31 |   max-width: none;
32 | }
33 | 
34 | .peer-greed > img {
35 |   max-width: 100%;
36 | }
37 | 


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


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/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 weatherType = list[i],
23 |       elements = document.getElementsByClassName(weatherType);
24 |     let j = elements.length;
25 | 
26 |     while (j--) {
27 |       icons.set(elements[j], weatherType);
28 |     }
29 |   }
30 | 
31 |   icons.play();
32 | }());
33 | 


--------------------------------------------------------------------------------
/.github/workflows/gh-pages.yml:
--------------------------------------------------------------------------------
 1 | name: Publish to Github Pages
 2 | 
 3 | on:
 4 |   push:
 5 |     branches: [ "master-rtl" ]
 6 | permissions:
 7 |   contents: write
 8 | 
 9 | jobs:
10 |   deploy:
11 |     concurrency: ci-${{ github.ref }}
12 |     runs-on: ubuntu-latest
13 |     steps:
14 |       - name: Checkout 🛎️
15 |         uses: actions/checkout@v4
16 | 
17 |       - name: Use Node.js ${{ matrix.node-version }}
18 |         uses: actions/setup-node@v4
19 |         with:
20 |           node-version: ${{ matrix.node-version }}
21 | 
22 |       - name: Build ⚙
23 |         run: |
24 |           npm install
25 |           npm run release:minified
26 | 
27 |       - name: Deploy 🚀
28 |         uses: JamesIves/github-pages-deploy-action@v4
29 |         with:
30 |           folder: 'dist' #
31 | 


--------------------------------------------------------------------------------
/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 |   animation: sk-scaleout 1.0s infinite ease-in-out;
23 | }
24 | 
25 | @keyframes sk-scaleout {
26 |   0% { transform: scale(0) }
27 | 
28 |   100% {
29 |     transform: scale(1.0);
30 |     opacity: 0;
31 |   }
32 | }
33 | 
34 | @keyframes sk-scaleout {
35 |   0% {
36 |     transform: scale(0);
37 |   }
38 | 
39 |  100% {
40 |     transform: scale(1.0);
41 |     opacity: 0;
42 |   }
43 | }
44 | 


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


--------------------------------------------------------------------------------
/.github/workflows/merge.yml:
--------------------------------------------------------------------------------
 1 | name: Merge checks
 2 | 
 3 | on:
 4 |   pull_request:
 5 |     branches:
 6 |       - master-rtl
 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@v4
18 | 
19 |     - name: Use Node.js ${{ matrix.node-version }}
20 |       uses: actions/setup-node@v4
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 "version=v$(./ci/getVersion.sh)" >> $GITHUB_OUTPUT
31 |       id: version
32 | 
33 |     - name: Verify version
34 |       run: |
35 |         ./ci/verifyVersion.sh ${{ steps.version.outputs.version }}
36 | 


--------------------------------------------------------------------------------
/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/500.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="fa" dir="rtl">
 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'>خطای داخلی سرور</h3>
17 |         <p class='mB-30 fsz-def c-grey-700'>مشکلی در سرورهای ما وجود دارد، لطفاً بعداً دوباره امتحان کنید.</p>
18 |         <div>
19 |           <a href="index.html" type='primary' class='btn btn-primary'>رفتن به خانه</a>
20 |         </div>
21 |       </div>
22 |     </div>
23 |   </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/src/404.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="fa" dir="rtl">
 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'>اوپس صفحه یافت نشد</h3>
17 |         <p class='mB-30 fsz-def c-grey-700'>صفحه‌ای که به دنبال آن هستید یافت نشد و یا جا به جا شده است.</p>
18 |         <div>
19 |           <a href="index.html" type='primary' class='btn btn-primary'>رفتن به خانه</a>
20 |         </div>
21 |       </div>
22 |     </div>
23 |   </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/webpack/plugins/imageminPlugin.js:
--------------------------------------------------------------------------------
 1 | const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
 2 | 
 3 | module.exports = [
 4 |   new ImageMinimizerPlugin({
 5 |     minimizer: {
 6 |       implementation: ImageMinimizerPlugin.sharpMinify,
 7 |       options: {
 8 |         encodeOptions: {
 9 |           // Your options for `sharp`
10 |           // https://sharp.pixelplumbing.com/api-output
11 |         },
12 |       },
13 |     },
14 |   }),
15 |   new ImageMinimizerPlugin({
16 |     minimizer: {
17 |       implementation: ImageMinimizerPlugin.svgoMinify,
18 |       options: {
19 |         encodeOptions: {
20 |           // Pass over SVGs multiple times to ensure all optimizations are applied. False by default
21 |           multipass: true,
22 |           plugins: [
23 |             // set of built-in plugins enabled by default
24 |             // see: https://github.com/svg/svgo#default-preset
25 |             'preset-default',
26 |           ],
27 |         },
28 |       },
29 |     },
30 |   }),
31 | ];
32 | 


--------------------------------------------------------------------------------
/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 |   const popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
10 |   // eslint-disable-next-line no-unused-vars
11 |   const popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
12 |     return new bootstrap.Popover(popoverTriggerEl);
13 |   });
14 | 
15 |   // ------------------------------------------------------
16 |   // @Tooltips
17 |   // ------------------------------------------------------
18 | 
19 |   const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
20 |   // eslint-disable-next-line no-unused-vars
21 |   const tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
22 |     return new bootstrap.Tooltip(tooltipTriggerEl);
23 |   });
24 | }());
25 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | $breakpoints: (
11 |   "xl\\+" "screen and (min-width: #{$breakpoint-xl})",
12 |   "lg\\+" "screen and (min-width: #{$breakpoint-lg})",
13 |   "md\\+" "screen and (min-width: #{$breakpoint-md})",
14 |   "sm\\+" "screen and (min-width: #{$breakpoint-sm})",
15 |   "xs\\+" "screen and (min-width: #{$breakpoint-xs})",
16 | 
17 |   "xl-" "screen and (max-width: #{$breakpoint-xl - 1px})",
18 |   "lg-" "screen and (max-width: #{$breakpoint-lg - 1px})",
19 |   "md-" "screen and (max-width: #{$breakpoint-md - 1px})",
20 |   "sm-" "screen and (max-width: #{$breakpoint-sm - 1px})",
21 | 
22 |   "lg" "screen and (min-width: #{$breakpoint-lg - 1px}) and (max-width: #{$breakpoint-xl - 1px})",
23 |   "md" "screen and (min-width: #{$breakpoint-md - 1px}) and (max-width: #{$breakpoint-lg - 1px})",
24 |   "sm" "screen and (min-width: #{$breakpoint-sm - 1px}) and (max-width: #{$breakpoint-md - 1px})",
25 | );
26 | 


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


--------------------------------------------------------------------------------
/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/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>


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


--------------------------------------------------------------------------------
/.github/workflows/release.yml:
--------------------------------------------------------------------------------
 1 | name: NodeJS with Webpack
 2 | 
 3 | on:
 4 |   push:
 5 |     branches: [ "master-rtl" ]
 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@v4
17 | 
18 |     - name: Use Node.js ${{ matrix.node-version }}
19 |       uses: actions/setup-node@v4
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 "version=v$(./ci/getVersion.sh)" >> $GITHUB_OUTPUT
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@v2
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
51 | 


--------------------------------------------------------------------------------
/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 |   window.addEventListener('load', () => {
16 |     /**
17 |      * Trigger window resize event after page load
18 |      * for recalculation of masonry layout.
19 |      */
20 |     window.dispatchEvent(EVENT);
21 |   });
22 | 
23 |   // ------------------------------------------------------
24 |   // @External Links
25 |   // ------------------------------------------------------
26 | 
27 |   // Open external links in new window
28 |   $('a')
29 |     .filter('[href^="http"], [href^="//"]')
30 |     .not(`[href*="${window.location.host}"]`)
31 |     .attr('rel', 'noopener noreferrer')
32 |     .attr('target', '_blank');
33 | 
34 |   // ------------------------------------------------------
35 |   // @Resize Trigger
36 |   // ------------------------------------------------------
37 | 
38 |   // Trigger resize on any element click
39 |   document.addEventListener('click', () => {
40 |     window.dispatchEvent(window.EVENT);
41 |   });
42 | }());
43 | 


--------------------------------------------------------------------------------
/.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 | 


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


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/.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 | }


--------------------------------------------------------------------------------
/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 | // @Loading Dependencies
17 | // ---------------------
18 | 
19 | const path = require('path');
20 | 
21 | // --------------------
22 | // @Environment Holders
23 | // --------------------
24 | 
25 | const NODE_ENV = process.env.NODE_ENV || 'development',
26 |   IS_DEVELOPMENT = NODE_ENV === 'development',
27 |   IS_PRODUCTION = NODE_ENV === 'production',
28 |   MINIFY = process.env.MINIFY === 'true';
29 | 
30 | // ------
31 | // @Utils
32 | // ------
33 | 
34 | const dir = (src) => path.join(__dirname, src);
35 | 
36 | // ----------
37 | // @App Paths
38 | // ----------
39 | 
40 | const paths = {
41 |   src: dir('../src'),
42 |   build: dir('../dist'),
43 | };
44 | 
45 | // -------------------
46 | // @Output Files Names
47 | // -------------------
48 | 
49 | const outputFiles = {
50 |   bundle: 'bundle.js',
51 |   vendor: 'vendor.js',
52 |   css: 'style.css',
53 | };
54 | 
55 | // --------------------
56 | // @Entries Files Names
57 | // --------------------
58 | 
59 | const entries = {
60 |   js: 'index.js',
61 | };
62 | 
63 | // -----------------
64 | // @Exporting Module
65 | // -----------------
66 | 
67 | module.exports = {
68 |   paths,
69 |   outputFiles,
70 |   entries,
71 |   NODE_ENV,
72 |   IS_DEVELOPMENT,
73 |   IS_PRODUCTION,
74 |   MINIFY,
75 | };
76 | 


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


--------------------------------------------------------------------------------
/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/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.parent().parent().children('li.open').children('.dropdown-menu')
17 |         .slideUp(200);
18 |       $this.parent().parent().children('li.open').children('a')
19 |         .removeClass('open');
20 |       $this.parent().parent().children('li.open').removeClass('open');
21 |       $this
22 |         .parent()
23 |         .children('.dropdown-menu')
24 |         .slideDown(200, () => {
25 |           $this.parent().addClass('open');
26 |         });
27 |     }
28 |   });
29 | 
30 |   // Sidebar Activity Class
31 |   const sidebarLinks = $('.sidebar').find('.sidebar-link');
32 | 
33 |   sidebarLinks
34 |     .each((index, el) => {
35 |       $(el).removeClass('active');
36 |     })
37 |     .filter(function () {
38 |       const href = $(this).attr('href');
39 |       const pattern = href[0] === '/' ? href.substr(1) : href;
40 |       return pattern === window.location.pathname.substr(1);
41 |     })
42 |     .addClass('active');
43 | 
44 |   // ٍSidebar Toggle
45 |   $('.sidebar-toggle').on('click', (e) => {
46 |     $('.app').toggleClass('is-collapsed');
47 |     e.preventDefault();
48 |   });
49 | 
50 |   /**
51 |    * Wait untill sidebar fully toggled (animated in/out)
52 |    * then trigger window resize event in order to recalculate
53 |    * masonry layout widths and gutters.
54 |    */
55 |   $('#sidebar-toggle').click((e) => {
56 |     e.preventDefault();
57 |     setTimeout(() => {
58 |       window.dispatchEvent(window.EVENT);
59 |     }, 300);
60 |   });
61 | }());
62 | 


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


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


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


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


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


--------------------------------------------------------------------------------
/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 |           {
20 |             'featureType': 'landscape',
21 |             'stylers': [
22 |               { 'hue': '#FFBB00' },
23 |               { 'saturation': 43.400000000000006 },
24 |               { 'lightness': 37.599999999999994 },
25 |               { 'gamma': 1 },
26 |             ],
27 |           },
28 |           {
29 |             'featureType': 'road.highway',
30 |             'stylers': [
31 |               { 'hue': '#FFC200' },
32 |               { 'saturation': -61.8 },
33 |               { 'lightness': 45.599999999999994 },
34 |               { 'gamma': 1 },
35 |             ],
36 |           },
37 |           {
38 |             'featureType': 'road.arterial',
39 |             'stylers': [
40 |               { 'hue': '#FF0300' },
41 |               { 'saturation': -100 },
42 |               { 'lightness': 51.19999999999999 },
43 |               { 'gamma': 1 },
44 |             ],
45 |           },
46 |           {
47 |             'featureType': 'road.local',
48 |             'stylers': [
49 |               { 'hue': '#FF0300' },
50 |               { 'saturation': -100 },
51 |               { 'lightness': 52 },
52 |               { 'gamma': 1 },
53 |             ],
54 |           },
55 |           {
56 |             'featureType': 'water',
57 |             'stylers': [
58 |               { 'hue': '#0078FF' },
59 |               { 'saturation': -13.200000000000003 },
60 |               { 'lightness': 2.4000000000000057 },
61 |               { 'gamma': 1 },
62 |             ],
63 |           },
64 |           {
65 |             'featureType': 'poi',
66 |             'stylers': [
67 |               { 'hue': '#00FF6A' },
68 |               { 'saturation': -1.0989010989011234 },
69 |               { 'lightness': 11.200000000000017 },
70 |               { 'gamma': 1 },
71 |             ],
72 |           },
73 |         ],
74 |       };
75 | 
76 |       const map = new google.maps.Map(document.getElementById('google-map'), mapOptions);
77 | 
78 |       new google.maps.Marker({
79 |         map,
80 |         position: new google.maps.LatLng(latitude, longitude),
81 |         visible: true,
82 |       });
83 |     });
84 |   }
85 | }());
86 | 


--------------------------------------------------------------------------------
/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/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/test.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="fa" dir="rtl">
 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 |     <!-- ### $App Screen Footer ### -->
92 |     <footer class="bdT ta-c p-30 lh-0 fsz-sm c-grey-600">
93 |       <span>کپی رایت © ۲۰۲۴ طراحی توسط <a href="https://colorlib.com" target='_blank' rel="nofollow noopener noreferrer" title="Colorlib">Colorlib</a> راست چین شده توسط <a href='https://morteza-karimi.ir'>مرتضی کریمی</a> . تمامی حقوق محفوظ است.</span>
94 |     </footer>
95 |   </div>
96 | </body>
97 | </html>
98 | 


--------------------------------------------------------------------------------
/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 | import countries from './countries';
  7 | 
  8 | export default (function () {
  9 |   const vectorMapInit = () => {
 10 |     if ($('#world-map-marker').length > 0) {
 11 |       // This is a hack, as the .empty() did not do the work
 12 |       $('#vmap').remove();
 13 | 
 14 |       // we recreate (after removing it) the container div, to reset all the data of the map
 15 |       $('#world-map-marker').append(`
 16 |         <div
 17 |           id="vmap"
 18 |           style="
 19 |             height: 490px;
 20 |             position: relative;
 21 |             overflow: hidden;
 22 |             background-color: transparent;
 23 |           "
 24 |         >
 25 |         </div>
 26 |       `);
 27 | 
 28 |       $('#vmap').vectorMap({
 29 |         map: 'world_mill',
 30 |         backgroundColor: '#fff',
 31 |         borderColor: '#fff',
 32 |         borderOpacity: 0.25,
 33 |         borderWidth: 0,
 34 |         color: '#e6e6e6',
 35 |         regionStyle: {
 36 |           initial: {
 37 |             fill: '#e4ecef',
 38 |           },
 39 |         },
 40 |         onRegionTipShow: (e, el, code) => {
 41 |           el.html(countries.find((c) => c.code === code)?.name_fa);
 42 |         },
 43 |         markerStyle: {
 44 |           initial: {
 45 |             r: 7,
 46 |             'fill': '#fff',
 47 |             'fill-opacity': 1,
 48 |             'stroke': '#000',
 49 |             'stroke-width': 2,
 50 |             'stroke-opacity': 0.4,
 51 |           },
 52 |         },
 53 | 
 54 |         markers: [
 55 |           {
 56 |             latLng: [21.0, 78.0],
 57 |             name: 'هند : ۳۵۰',
 58 |           },
 59 |           {
 60 |             latLng: [-33.0, 151.0],
 61 |             name: 'استرالیا : ۲۵۰',
 62 |           },
 63 |           {
 64 |             latLng: [36.77, -119.41],
 65 |             name: 'آمریکا : ۲۵۰',
 66 |           },
 67 |           {
 68 |             latLng: [55.37, -3.41],
 69 |             name: 'بریتانیا   : ۲۵۰',
 70 |           },
 71 |           {
 72 |             latLng: [25.2, 55.27],
 73 |             name: 'امارات متحده عربی : ۲۵۰',
 74 |           },
 75 |         ],
 76 |         series: {
 77 |           regions: [
 78 |             {
 79 |               values: {
 80 |                 'US': 298,
 81 |                 'SA': 200,
 82 |                 'AU': 760,
 83 |                 'IN': 200,
 84 |                 'GB': 120,
 85 |               },
 86 |               scale: ['#03a9f3', '#02a7f1'],
 87 |               normalizeFunction: 'polynomial',
 88 |             },
 89 |           ],
 90 |         },
 91 |         hoverOpacity: null,
 92 |         normalizeFunction: 'linear',
 93 |         zoomOnScroll: false,
 94 |         scaleColors: ['#b6d6ff', '#005ace'],
 95 |         selectedColor: '#c9dfaf',
 96 |         selectedRegions: [],
 97 |         enableZoom: false,
 98 |         hoverColor: '#fff',
 99 |       });
100 |     }
101 |   };
102 | 
103 |   vectorMapInit();
104 |   $(window).resize(debounce(vectorMapInit, 150));
105 | }());
106 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "adminator-rtl",
 3 |   "version": "2.1.2",
 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",
16 |     "lint": "npm run lint:js && npm run lint:scss"
17 |   },
18 |   "devDependencies": {
19 |     "@babel/core": "^7.24.7",
20 |     "@babel/eslint-parser": "^7.24.7",
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.7",
24 |     "@babel/preset-env": "^7.24.7",
25 |     "@babel/runtime": "^7.24.7",
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.2",
34 |     "css-minimizer-webpack-plugin": "^7.0.0",
35 |     "eslint": "^8.57.0",
36 |     "eslint-config-airbnb-base": "^15.0.0",
37 |     "eslint-formatter-table": "^7.32.1",
38 |     "eslint-plugin-import": "^2.29.1",
39 |     "html-webpack-plugin": "^5.6.0",
40 |     "imagemin-webpack-plugin": "^2.4.2",
41 |     "mini-css-extract-plugin": "^2.9.0",
42 |     "postcss": "^8.4.38",
43 |     "postcss-loader": "^8.1.1",
44 |     "postcss-preset-env": "^9.5.14",
45 |     "sass": "^1.77.6",
46 |     "sass-loader": "^14.2.1",
47 |     "shx": "^0.3.4",
48 |     "style-loader": "^4.0.0",
49 |     "stylelint": "^16.6.1",
50 |     "stylelint-config-standard": "^36.0.1",
51 |     "stylelint-config-standard-scss": "^13.1.0",
52 |     "stylelint-scss": "^6.3.2",
53 |     "webpack": "^5.92.1",
54 |     "webpack-cli": "^5.1.4",
55 |     "webpack-dashboard": "^3.3.8",
56 |     "webpack-dev-server": "^5.0.4"
57 |   },
58 |   "dependencies": {
59 |     "@fullcalendar/core": "^6.1.14",
60 |     "@fullcalendar/daygrid": "^6.1.14",
61 |     "@fullcalendar/interaction": "^6.1.14",
62 |     "@fullcalendar/list": "^6.1.14",
63 |     "@fullcalendar/timegrid": "^6.1.14",
64 |     "@popperjs/core": "^2.11.8",
65 |     "babel-polyfill": "^6.26.0",
66 |     "bootstrap": "^5.3.3",
67 |     "bootstrap-datepicker": "^1.10.0",
68 |     "brand-colors": "^2.1.1",
69 |     "chart.js": "^4.4.3",
70 |     "datatables": "^1.10.18",
71 |     "easy-pie-chart": "^2.1.7",
72 |     "file-loader": "^6.2.0",
73 |     "jquery": "^3.7.1",
74 |     "jquery-sparkline": "^2.4.0",
75 |     "jvectormap": "^2.0.4",
76 |     "load-google-maps-api": "^2.0.2",
77 |     "lodash": "^4.17.21",
78 |     "masonry-layout": "^4.2.2",
79 |     "moment": "^2.30.1",
80 |     "perfect-scrollbar": "^1.5.5",
81 |     "rtlcss": "^4.1.1",
82 |     "skycons": "^1.0.0",
83 |     "vazirmatn": "^33.0.3"
84 |   }
85 | }
86 | 


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


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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/signup.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="fa" dir="rtl">
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  6 |     <title>ثبت‌نام</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">ثبت‌نام</h4>
 79 |         <form>
 80 |           <div class="mb-3">
 81 |             <label class="form-label" class="text-normal text-dark">نام کاربری</label>
 82 |             <input type="text" class="form-control" Placeholder='Morteza Karimi'>
 83 |           </div>
 84 |           <div class="mb-3">
 85 |             <label class="form-label" class="text-normal text-dark">آدرس ایمیل</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">رمزعبور</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">تایید رمزعبور</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">ثبت‌نام</button>
 98 |           </div>
 99 |         </form>
100 |       </div>
101 |     </div>
102 | 
103 |   </body>
104 | </html>
105 | 


--------------------------------------------------------------------------------
/src/signin.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="fa" dir="rtl">
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  6 |     <title>ورود</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">ورود</h4>
 79 |         <form>
 80 |           <div class="mb-3">
 81 |             <label class="text-normal text-dark form-label">نام‌کاربری</label>
 82 |             <input type="email" class="form-control" placeholder="Morteza Karimi">
 83 |           </div>
 84 |           <div class="mb-3">
 85 |             <label class="text-normal text-dark form-label">رمزعبور</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">مرا به خاطر بسپار</span>
 95 |                   </label>
 96 |                 </div>
 97 |               </div>
 98 |               <div class="peer">
 99 |                 <button class="btn btn-primary btn-color">ورود</button>
100 |               </div>
101 |             </div>
102 |           </div>
103 |         </form>
104 |       </div>
105 |     </div>
106 |   </body>
107 | </html>
108 | 


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


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


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


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


--------------------------------------------------------------------------------
/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([5, 6, 7, 9, 9, 5, 3, 2, 2, 4, 6, 7], {
 67 |     type: 'line',
 68 |     resize: true,
 69 |     height: '20',
 70 |   });
 71 | 
 72 |   $('#compositebar').sparkline('html', {
 73 |     type: 'bar',
 74 |     resize: true,
 75 |     barColor: '#aaf',
 76 |     height: '20',
 77 |   });
 78 | 
 79 |   $('#compositebar').sparkline([4, 1, 5, 7, 9, 9, 8, 7, 6, 6, 4, 7, 8, 4, 3, 2, 2, 5, 6, 7], {
 80 |     composite: true,
 81 |     fillColor: false,
 82 |     lineColor: 'red',
 83 |     resize: true,
 84 |     height: '20',
 85 |   });
 86 | 
 87 |   $('#normalline').sparkline('html', {
 88 |     fillColor: false,
 89 |     normalRangeMin: -1,
 90 |     resize: true,
 91 |     normalRangeMax: 8,
 92 |     height: '20',
 93 |   });
 94 | 
 95 |   $('.sparktristate').sparkline('html', {
 96 |     type: 'tristate',
 97 |     resize: true,
 98 |     height: '20',
 99 |   });
100 | 
101 |   $('.sparktristatecols').sparkline('html', {
102 |     type: 'tristate',
103 |     colorMap: {
104 |       '-2': '#fa7',
105 |       resize: true,
106 |       '2': '#44f',
107 |       height: '20',
108 |     },
109 |   });
110 | 
111 |   const values = [5, 4, 5, -2, 0, 3, -5, 6, 7, 9, 9, 5, -3, -2, 2, -4];
112 |   const valuesAlt = [1, 1, 0, 1, -1, -1, 1, -1, 0, 0, 1, 1];
113 | 
114 |   $('.sparkline').sparkline(values, {
115 |     type: 'line',
116 |     barWidth: 4,
117 |     barSpacing: 5,
118 |     fillColor: '',
119 |     lineColor: COLORS['red-500'],
120 |     lineWidth: 2,
121 |     spotRadius: 3,
122 |     spotColor: COLORS['red-500'],
123 |     maxSpotColor: COLORS['red-500'],
124 |     minSpotColor: COLORS['red-500'],
125 |     highlightSpotColor: COLORS['red-500'],
126 |     highlightLineColor: '',
127 |     tooltipSuffix: ' Bzzt',
128 |     tooltipPrefix: 'Hello ',
129 |     width: 100,
130 |     height: undefined,
131 |     barColor: '9f0',
132 |     negBarColor: 'ff0',
133 |     stackedBarColor: ['ff0', '9f0', '999', 'f60'],
134 |     sliceColors: ['ff0', '9f0', '000', 'f60'],
135 |     offset: '30',
136 |     borderWidth: 1,
137 |     borderColor: '000',
138 |   });
139 | 
140 |   $('.sparkbar').sparkline(values, {
141 |     type: 'bar',
142 |     barWidth: 4,
143 |     barSpacing: 1,
144 |     fillColor: '',
145 |     lineColor: COLORS['deep-purple-500'],
146 |     tooltipSuffix: 'Celsius',
147 |     width: 100,
148 |     barColor: '39f',
149 |     negBarColor: COLORS['deep-purple-500'],
150 |     stackedBarColor: ['ff0', '9f0', '999', 'f60'],
151 |     sliceColors: ['ff0', '9f0', '000', 'f60'],
152 |     offset: '30',
153 |     borderWidth: 1,
154 |     borderColor: '000',
155 |   });
156 | 
157 |   $('.sparktri').sparkline(valuesAlt, {
158 |     type: 'tristate',
159 |     barWidth: 4,
160 |     barSpacing: 1,
161 |     fillColor: '',
162 |     lineColor: COLORS['light-blue-500'],
163 |     tooltipSuffix: 'Celsius',
164 |     width: 100,
165 |     barColor: COLORS['light-blue-500'],
166 |     posBarColor: COLORS['light-blue-500'],
167 |     negBarColor: 'f90',
168 |     zeroBarColor: '000',
169 |     stackedBarColor: ['ff0', '9f0', '999', 'f60'],
170 |     sliceColors: ['ff0', '9f0', '000', 'f60'],
171 |     offset: '30',
172 |     borderWidth: 1,
173 |     borderColor: '000',
174 |   });
175 | 
176 |   $('.sparkdisc').sparkline(values, {
177 |     type: 'discrete',
178 |     barWidth: 4,
179 |     barSpacing: 5,
180 |     fillColor: '',
181 |     lineColor: '9f0',
182 |     tooltipSuffix: 'Celsius',
183 |     width: 100,
184 |     barColor: '9f0',
185 | 
186 |     negBarColor: 'f90',
187 | 
188 |     stackedBarColor: ['ff0', '9f0', '999', 'f60'],
189 |     sliceColors: ['ff0', '9f0', '000', 'f60'],
190 |     offset: '30',
191 |     borderWidth: 1,
192 |     borderColor: '000',
193 |   });
194 | 
195 |   $('.sparkbull').sparkline(values, {
196 |     type: 'bullet',
197 |     barWidth: 4,
198 |     barSpacing: 5,
199 |     fillColor: '',
200 |     lineColor: COLORS['amber-500'],
201 |     tooltipSuffix: 'Celsius',
202 |     height: 'auto',
203 |     width: 'auto',
204 |     targetWidth: 'auto',
205 |     barColor: COLORS['amber-500'],
206 |     negBarColor: 'ff0',
207 |     stackedBarColor: ['ff0', '9f0', '999', 'f60'],
208 |     sliceColors: ['ff0', '9f0', '000', 'f60'],
209 |     offset: '30',
210 |     borderWidth: 1,
211 |     borderColor: '000',
212 |   });
213 | 
214 |   $('.sparkbox').sparkline(values, {
215 |     type: 'box',
216 |     barWidth: 4,
217 |     barSpacing: 5,
218 |     fillColor: '',
219 |     lineColor: '9f0',
220 |     tooltipSuffix: 'Celsius',
221 |     width: 100,
222 |     barColor: '9f0',
223 |     negBarColor: 'ff0',
224 |     stackedBarColor: ['ff0', '9f0', '999', 'f60'],
225 |     sliceColors: ['ff0', '9f0', '000', 'f60'],
226 |     offset: '30',
227 |     borderWidth: 1,
228 |     borderColor: '000',
229 |   });
230 | }());
231 | 


--------------------------------------------------------------------------------
/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/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: 0; }
 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: 0; }
 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/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/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 { COLORS, GREYS };
272 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Adminator RTL Bootstrap 5 Admin Template
  2 | **Adminator RTL** 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://morteza-karimi.ir/Adminator-admin-dashboard-rtl/index.html
  3 | 
  4 | # Preview
  5 | 
  6 | ### Screenshot
  7 | 
  8 | ![Adminator RTL admin dashboard template preview](./demo-preview.png)
  9 | 
 10 | ### Demo Site: [Here](https://morteza-karimi.ir/Adminator-admin-dashboard-rtl/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/mortezakarimi/Adminator-admin-dashboard-rtl/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/mortezakarimi/Adminator-admin-dashboard-rtl.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 | - [Vazirmatn](https://rastikerdar.github.io/vazirmatn/)
151 | 
152 | ## Changelog
153 | #### V 1.0.0
154 | Initial Release
155 | 
156 | ## Authors
157 | [Colorlib](https://colorlib.com)
158 | [Morteza Karimi](https://morteza-karimi.ir)
159 | 
160 | ## More info
161 | - [Bootstrap Dashboards](https://colorlib.com/wp/free-bootstrap-admin-dashboard-templates/)
162 | - [Bootstrap Templates](https://colorlib.com/wp/free-bootstrap-templates/)
163 | - [HTML Templates](https://colorlib.com/wp/free-html-website-templates/)
164 | - [Free Admin Dashboards](https://colorlib.com/wp/free-html5-admin-dashboard-templates/)
165 | - [Website Templates](https://colorlib.com/wp/templates/)
166 | - [Free CSS Templates](https://colorlib.com/wp/free-css-website-templates/)
167 | - [WordPress Themes](https://colorlib.com/wp/free-wordpress-themes/)
168 | 
169 | ## License
170 | 
171 | 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.
172 | 


--------------------------------------------------------------------------------
/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 | 
250 | .mX-a { margin-left: auto !important;
251 |         margin-right: auto !important; }
252 | .mT-a { margin-top: auto !important; }
253 | .mR-a { margin-right: auto !important; }
254 | .mB-a { margin-bottom: auto !important; }
255 | .mL-a { margin-left: auto !important; }
256 | 
257 | @if $responsive == true {
258 |   @include generateResponsive {
259 |     .m-a\@#{$breakpointAlias}  { margin: auto !important; }
260 |     .mX-a\@#{$breakpointAlias} { margin-left: auto !important;
261 |                                  margin-right: auto !important; }
262 |     .mT-a\@#{$breakpointAlias} { margin-top: auto !important; }
263 |     .mR-a\@#{$breakpointAlias} { margin-right: auto !important; }
264 |     .mB-a\@#{$breakpointAlias} { margin-bottom: auto !important; }
265 |     .mL-a\@#{$breakpointAlias} { margin-left: auto !important; }
266 |   }
267 | }
268 | 


--------------------------------------------------------------------------------
/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 | /* stylelint-disable no-descending-specificity */
 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 | 
179 |   border-right: 1px solid $border-color;
180 |   height: calc(100vh - #{$header-height});
181 |   list-style: none;
182 |   margin: 0;
183 |   overflow: auto;
184 |   padding: 0;
185 |   position: relative;
186 | 
187 |   .dropdown-toggle::after {
188 |     display: none;
189 |   }
190 | 
191 |   .sidebar-link {
192 |     &.actived::before {
193 |       background: $md-blue-500;
194 |       border-radius: 50%;
195 |       content: '';
196 |       display: block;
197 |       height: 8px;
198 |       left: -4px;
199 |       position: absolute;
200 |       top: calc(50% - 4px);
201 |       width: 8px;
202 |     }
203 |   }
204 | 
205 |   li {
206 |     position: relative;
207 | 
208 |     &.dropdown {
209 |       .arrow {
210 |         font-size: 10px;
211 |         line-height: 40px;
212 |         position: absolute;
213 |         right: 30px;
214 |         transition: all 0.05s ease-in;
215 | 
216 |         @include to($breakpoint-md) {
217 |           right: 25px;
218 |         }
219 |       }
220 | 
221 |       &.open {
222 |         > a {
223 |           color: $default-dark;
224 | 
225 |           .icon-holder {
226 |             color: $default-info;
227 |           }
228 | 
229 |           > .arrow {
230 |             transform: rotate(90deg);
231 |           }
232 |         }
233 | 
234 |         > .dropdown-menu {
235 |           display: block;
236 | 
237 |           .dropdown-menu {
238 |             padding-left: 20px;
239 |           }
240 | 
241 |           .arrow {
242 |             line-height: 25px;
243 |           }
244 |         }
245 |       }
246 |     }
247 | 
248 |     a {
249 |       color: $default-text-color;
250 |       transition: all 0.3s ease;
251 | 
252 |       &:hover,
253 |       &:focus {
254 |         color: $default-dark;
255 |         text-decoration: none;
256 | 
257 |         .icon-holder {
258 |           color: $default-info;
259 |         }
260 |       }
261 |     }
262 |   }
263 | 
264 |   > li {
265 |     &.dropdown {
266 |       ul {
267 |         &.dropdown-menu {
268 |           background-color: transparent;
269 |           border-radius: 0;
270 |           border: 0;
271 |           box-shadow: none;
272 |           float: none;
273 |           padding-left: 50px;
274 |           padding-top: 0;
275 |           position: relative;
276 |           width: 100%;
277 | 
278 |           > li {
279 |             > a {
280 |               display: block;
281 |               padding: 10px 15px;
282 | 
283 |               &:hover,
284 |               &:focus {
285 |                 background-color: transparent;
286 |                 color: $default-dark;
287 |               }
288 |             }
289 | 
290 |             &.actived {
291 |               a {
292 |                 color: $default-dark;
293 |               }
294 |             }
295 |           }
296 |         }
297 |       }
298 |     }
299 | 
300 |     > a {
301 |       display: block;
302 |       font-size: 15px;
303 |       font-weight: 500;
304 |       padding: 5px 15px;
305 |       position: relative;
306 |       white-space: nowrap;
307 | 
308 |       .icon-holder {
309 |         border-radius: 6px;
310 |         display: inline-block;
311 |         font-size: 17px;
312 |         height: 35px;
313 |         left: 0;
314 |         line-height: 35px;
315 |         margin-right: 14px;
316 |         position: relative;
317 |         text-align: center;
318 |         transition: all 0.3s ease;
319 |         width: 35px;
320 |       }
321 |     }
322 |   }
323 | }
324 | 
325 | // ---------------------------------------------------------
326 | // @Sidebar Collapsed
327 | // ---------------------------------------------------------
328 | 
329 | .is-collapsed {
330 |   .sidebar {
331 |     @include from($breakpoint-xl) {
332 |       width: $collapsed-size;
333 | 
334 |       .sidebar-inner {
335 |         .sidebar-logo {
336 |           border-bottom: 1px solid transparent;
337 |           padding: 0;
338 |         }
339 | 
340 |         .sidebar-menu {
341 |           overflow-x: hidden;
342 | 
343 |           > li {
344 |             > a {
345 |               .title {
346 |                 display: none;
347 |               }
348 |             }
349 |           }
350 | 
351 |           li {
352 |             &.dropdown {
353 |               .arrow {
354 |                 opacity: 0;
355 |               }
356 | 
357 |               &.open {
358 |                 ul.dropdown-menu {
359 |                   display: none !important;
360 |                 }
361 |               }
362 |             }
363 |           }
364 |         }
365 |       }
366 | 
367 |       &:hover {
368 |         width: $offscreen-size;
369 | 
370 |         .sidebar-inner {
371 |           .sidebar-logo {
372 |             border-bottom: 1px solid $border-color;
373 |             padding: 0 20px;
374 |           }
375 | 
376 |           .sidebar-menu {
377 |             > li {
378 |               > a {
379 |                 .title {
380 |                   display: inline-block;
381 |                 }
382 |               }
383 |             }
384 | 
385 |             li {
386 |               &.dropdown {
387 |                 .arrow {
388 |                   opacity: 1;
389 |                 }
390 |               }
391 | 
392 |               &.open {
393 |                 > ul.dropdown-menu {
394 |                   display: block !important;
395 |                 }
396 |               }
397 |             }
398 |           }
399 |         }
400 |       }
401 |     }
402 | 
403 |     @include between($breakpoint-md, $breakpoint-xl) {
404 |       width: $offscreen-size;
405 | 
406 |       .sidebar-inner {
407 |         .sidebar-logo {
408 |           border-bottom: 1px solid $border-color;
409 |           padding: 0 20px;
410 | 
411 |           > a {
412 |             .logo {
413 |               background-position: center left;
414 |               width: 150px;
415 |             }
416 |           }
417 |         }
418 | 
419 |         .sidebar-menu {
420 |           > li {
421 |             > a {
422 |               .title {
423 |                 display: inline-block;
424 |               }
425 |             }
426 |           }
427 | 
428 |           li {
429 |             &.dropdown {
430 |               .arrow {
431 |                 opacity: 1;
432 |               }
433 |             }
434 | 
435 |             &.open {
436 |               > ul.dropdown-menu {
437 |                 display: block !important;
438 |               }
439 |             }
440 |           }
441 |         }
442 |       }
443 |     }
444 | 
445 |     @include to($breakpoint-md) {
446 |       left: 0;
447 |     }
448 |   }
449 | }
450 | /* stylelint-enable no-descending-specificity */
451 | 


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