admin lte

This commit is contained in:
2020-04-03 21:59:03 -05:00
parent 59d7072ab4
commit 12b97490e3
2181 changed files with 834674 additions and 0 deletions

View File

@@ -0,0 +1,14 @@
{
"presets": [
[
"@babel/preset-env",
{
"loose": true,
"modules": false
}
]
],
"plugins": [
"@babel/plugin-external-helpers"
]
}

View File

@@ -0,0 +1,15 @@
{
"name": "admin-lte",
"homepage": "https://github.com/almasaeed2010/AdminLTE",
"version": "3.0.4",
"_release": "3.0.4",
"_resolution": {
"type": "version",
"tag": "v3.0.4",
"commit": "4723bccf4321f28d9ac8ec4f8c64b785e277ba71"
},
"_source": "https://github.com/almasaeed2010/AdminLTE.git",
"_target": "^3.0.4",
"_originalSource": "admin-lte",
"_direct": true
}

View File

@@ -0,0 +1,13 @@
# https://github.com/browserslist/browserslist#readme
>= 1%
last 1 major version
not dead
Chrome >= 45
Firefox >= 38
Edge >= 12
Explorer >= 10
iOS >= 9
Safari >= 9
Android >= 4.4
Opera >= 30

View File

@@ -0,0 +1,9 @@
root = true
[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
indent_style = space
indent_size = 2

View File

@@ -0,0 +1,5 @@
**/*.min.js
**/plugins/*
**/dist/*
**/build/npm
ad.js

View File

@@ -0,0 +1,300 @@
{
"root": true,
"parser": "babel-eslint",
"env": {
"browser": true,
"es6": true,
"amd": true
},
"extends": "eslint:recommended",
"plugins": [
"compat"
],
"globals": {
"jQuery": true
},
"rules": {
// Possible Errors
"no-await-in-loop": "error",
"no-extra-parens": "error",
"no-prototype-builtins": "error",
"no-template-curly-in-string": "error",
"compat/compat": "error",
"valid-jsdoc": "error",
// Best Practices
"accessor-pairs": "error",
"array-callback-return": "error",
"block-scoped-var": "error",
"class-methods-use-this": "off",
"complexity": "error",
"consistent-return": "error",
"curly": "error",
"default-case": "error",
"dot-location": [
"error",
"property"
],
"dot-notation": "error",
"eqeqeq": "error",
"guard-for-in": "error",
"no-alert": "error",
"no-caller": "error",
"no-div-regex": "error",
"no-else-return": "error",
"no-empty-function": "error",
"no-eq-null": "error",
"no-eval": "error",
"no-extend-native": "error",
"no-extra-bind": "error",
"no-extra-label": "error",
"no-floating-decimal": "error",
"no-implicit-coercion": "error",
"no-implicit-globals": "error",
"no-implied-eval": "error",
"no-invalid-this": "off",
"no-iterator": "error",
"no-labels": "error",
"no-lone-blocks": "error",
"no-loop-func": "error",
"no-magic-numbers": [
"error",
{
"ignore": [
-1,
0,
1
],
"ignoreArrayIndexes": true
}
],
"no-multi-spaces": [
"error",
{
"ignoreEOLComments": true,
"exceptions": {
"AssignmentExpression": true,
"ArrowFunctionExpression": true,
"CallExpression": true,
"VariableDeclarator": true
}
}
],
"no-multi-str": "error",
"no-new": "error",
"no-new-func": "error",
"no-new-wrappers": "error",
"no-octal-escape": "error",
"no-param-reassign": "off",
"no-proto": "error",
"no-restricted-properties": "error",
"no-return-assign": "error",
"no-return-await": "error",
"no-script-url": "error",
"no-self-compare": "error",
"no-sequences": "error",
"no-throw-literal": "error",
"no-unmodified-loop-condition": "error",
"no-unused-expressions": "error",
"no-useless-call": "error",
"no-useless-concat": "error",
"no-useless-return": "error",
"no-void": "error",
"no-warning-comments": "off",
"no-with": "error",
"prefer-promise-reject-errors": "error",
"radix": "error",
"require-await": "error",
"vars-on-top": "error",
"wrap-iife": "error",
"yoda": "error",
// Strict Mode
"strict": "error",
// Variables
"init-declarations": "off",
"no-catch-shadow": "error",
"no-label-var": "error",
"no-restricted-globals": "error",
"no-shadow": "off",
"no-shadow-restricted-names": "error",
"no-undef-init": "error",
"no-undefined": "error",
"no-use-before-define": "off",
// Node.js and CommonJS
"callback-return": "off",
"global-require": "error",
"handle-callback-err": "error",
"no-mixed-requires": "error",
"no-new-require": "error",
"no-path-concat": "error",
"no-process-env": "error",
"no-process-exit": "error",
"no-restricted-modules": "error",
"no-sync": "error",
// Stylistic Issues
"array-bracket-spacing": "error",
"block-spacing": "error",
"brace-style": "error",
"camelcase": "error",
"capitalized-comments": "off",
"comma-dangle": "error",
"comma-spacing": "error",
"comma-style": "error",
"computed-property-spacing": "error",
"consistent-this": "error",
"eol-last": "error",
"func-call-spacing": "error",
"func-name-matching": "error",
"func-names": "off",
"func-style": [
"error",
"declaration"
],
"id-blacklist": "error",
"id-length": "off",
"id-match": "error",
"indent": [
"error",
2,
{
"SwitchCase": 1
}
],
"jsx-quotes": "error",
"key-spacing": "off",
"keyword-spacing": "error",
"linebreak-style": [
"error",
"unix"
],
"line-comment-position": "off",
"lines-around-comment": "off",
"lines-around-directive": "error",
"max-depth": [
"error",
10
],
"max-len": "off",
"max-lines": "off",
"max-nested-callbacks": "error",
"max-params": "off",
"max-statements": "off",
"max-statements-per-line": "error",
"multiline-ternary": "off",
"new-cap": [
"error",
{
"capIsNewExceptionPattern": "$.*"
}
],
"newline-after-var": "off",
"newline-per-chained-call": [
"error",
{
"ignoreChainWithDepth": 5
}
],
"new-parens": "error",
"no-array-constructor": "error",
"no-bitwise": "error",
"no-continue": "off",
"no-inline-comments": "off",
"no-lonely-if": "error",
"no-mixed-operators": "off",
"no-multi-assign": "error",
"no-multiple-empty-lines": "error",
"nonblock-statement-body-position": "error",
"no-negated-condition": "off",
"no-nested-ternary": "error",
"no-new-object": "error",
"no-plusplus": "off",
"no-restricted-syntax": "error",
"no-tabs": "error",
"no-ternary": "off",
"no-trailing-spaces": "error",
"no-underscore-dangle": "off",
"no-unneeded-ternary": "error",
"no-whitespace-before-property": "error",
"object-curly-newline": [
"error",
{
"minProperties": 1
}
],
"object-curly-spacing": [
"error",
"always"
],
"object-property-newline": "error",
"one-var": [
"error",
"never"
],
"one-var-declaration-per-line": "error",
"operator-assignment": "error",
"operator-linebreak": "error",
"padded-blocks": [
"error",
"never"
],
"padding-line-between-statements": "off",
"quote-props": [
"error",
"as-needed"
],
"quotes": [
"error",
"single"
],
"require-jsdoc": "off",
"semi": [
"error",
"never"
],
"semi-spacing": "error",
"sort-keys": "off",
"sort-vars": "error",
"space-before-blocks": "error",
"space-before-function-paren": [
"error",
{
"anonymous": "always",
"named": "never"
}
],
"space-in-parens": "error",
"space-infix-ops": "error",
"space-unary-ops": "error",
"spaced-comment": "error",
"template-tag-spacing": "error",
"unicode-bom": "error",
"wrap-regex": "off",
// ECMAScript 6
"arrow-body-style": [
"error",
"as-needed"
],
"arrow-parens": "error",
"arrow-spacing": "error",
"generator-star-spacing": "error",
"no-confusing-arrow": "error",
"no-duplicate-imports": "error",
"no-restricted-imports": "error",
"no-useless-computed-key": "error",
"no-useless-constructor": "error",
"no-useless-rename": "error",
"no-var": "error",
"object-shorthand": "error",
"prefer-arrow-callback": "error",
"prefer-const": "error",
"prefer-destructuring": "off",
"prefer-numeric-literals": "error",
"prefer-rest-params": "error",
"prefer-spread": "error",
"prefer-template": "error",
"rest-spread-spacing": "error",
"sort-imports": "error",
"symbol-description": "error",
"template-curly-spacing": "error",
"yield-star-spacing": "error"
}
}

View File

@@ -0,0 +1,32 @@
---
name: Bug report for AdminLTE v2.4.x
about: Create a report to help us improve AdminLTE v2.4.x
title: "[BUG]"
labels: type:bug, version:2.4.x
assignees: ''
---
**Describe the bug**
A clear and concise description of what the bug is.
**To Reproduce**
Steps to reproduce the behavior:
1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error
**Expected behavior**
A clear and concise description of what you expected to happen.
**Screenshots**
If applicable, add screenshots to help explain your problem.
**Environment (please complete the following information):**
- AdminLTE Version: [e.g. v2.4.18]
- Operating System: [e.g. macOS Catalina]
- Browser (Version): [e.g. Chrome (Latest)]
**Additional context**
Add any other context about the problem here.

View File

@@ -0,0 +1,32 @@
---
name: Bug report for AdminLTE v3.x
about: Create a report to help us improve AdminLTE v3.x
title: "[BUG]"
labels: type:bug, version:3.x
assignees: ''
---
**Describe the bug**
A clear and concise description of what the bug is.
**To Reproduce**
Steps to reproduce the behavior:
1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error
**Expected behavior**
A clear and concise description of what you expected to happen.
**Screenshots**
If applicable, add screenshots to help explain your problem.
**Environment (please complete the following information):**
- AdminLTE Version: [e.g. v3.0.0]
- Operating System: [e.g. macOS Catalina]
- Browser (Version): [e.g. Chrome (Latest)]
**Additional context**
Add any other context about the problem here.

View File

@@ -0,0 +1,20 @@
---
name: Feature request for AdminLTE v3.x
about: Suggest an idea for this project
title: "[FEATURE]"
labels: type:enhancement, version:3.x
assignees: ''
---
**Is your feature request related to a problem? Please describe.**
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
**Describe the solution you'd like**
A clear and concise description of what you want to happen.
**Describe alternatives you've considered**
A clear and concise description of any alternative solutions or features you've considered.
**Additional context**
Add any other context or screenshots about the feature request here.

View File

@@ -0,0 +1,38 @@
// System / Log files
*.DS_Store
*.log
// Archives
*.zip
// Sass Cache
.sass-cache
// Project files
.idea
nbproject
nbproject/private
.vscode/
.vs/
// Node / Bower
node_modules/
bower_components/
// Plugins
/plugins/*/*.md
/plugins/*/*.html
/plugins/*/package.json
// Docs
Gemfile.lock
docs/_site
docs_html/
.jekyll-cache/
.jekyll-metadata
// ETC
TODO
test.html
ad.js

View File

@@ -0,0 +1 @@
!/docs_html/

View File

@@ -0,0 +1,25 @@
language: node_js
node_js:
- 8
- 10
- 11
- 12
env:
- INSTALL=yarn
- INSTALL=npm
matrix:
fast_finish: true
exclude:
- node_js: 8
env: INSTALL=yarn
install:
- if [ "yarn" == $INSTALL ]; then yarn install; fi
- if [ "npm" == $INSTALL ]; then npm install; fi
script:
- echo 'Tests must be configured'

View File

@@ -0,0 +1,20 @@
The MIT License (MIT)
Copyright (c) 2014-2018 almasaeed2010
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

View File

@@ -0,0 +1,115 @@
Introduction
============
[![Build Status](https://img.shields.io/travis/ColorlibHQ/AdminLTE/master.svg)](https://travis-ci.org/ColorlibHQ/AdminLTE)
[![npm version](https://img.shields.io/npm/v/admin-lte/latest.svg)](https://www.npmjs.com/package/admin-lte)
[![Packagist](https://img.shields.io/packagist/v/almasaeed2010/adminlte.svg)](https://packagist.org/packages/almasaeed2010/adminlte)
[![CDNJS](https://img.shields.io/cdnjs/v/admin-lte.svg)](https://cdnjs.com/libraries/admin-lte)
**AdminLTE** is a fully responsive administration template. Based on **[Bootstrap 4](https://getbootstrap.com)** framework.
Highly customizable and easy to use. Fits many screen resolutions from small mobile devices to large desktops.
**Preview on [AdminLTE.io](https://adminlte.io/themes/v3)**
Looking for Premium Templates?
------------------------------
AdminLTE.io just opened a new premium templates page. Hand picked to ensure the best quality and the most affordable
prices. Visit https://adminlte.io/premium for more information.
!["AdminLTE Presentation"](https://adminlte.io/AdminLTE3.png "AdminLTE Presentation")
**AdminLTE** has been carefully coded with clear comments in all of its JS, SCSS and HTML files.
SCSS has been used to increase code customizability.
Installation
------------
There are multiple ways to install AdminLTE.
#### Download:
Download from [Github releases](https://github.com/ColorlibHQ/AdminLTE/releases).
#### Using The Command Line:
__Via NPM__
```bash
npm install admin-lte@^3.0 --save
```
__Via Yarn__
```bash
yarn add admin-lte@^3.0
```
__Via Composer__
```bash
composer require "almasaeed2010/adminlte=~3.0"
```
__Via Git__
- Clone to your machine
```
git clone https://github.com/ColorlibHQ/AdminLTE.git
```
Documentation
-------------
Visit the [online documentation](https://adminlte.io/docs/3.0/) for the most
updated guide. Information will be added on a weekly basis.
Browser Support
---------------
- IE 10+
- Firefox (latest)
- Chrome (latest)
- Safari (latest)
- Opera (latest)
Contribution
------------
Contribution are always **welcome and recommended**! Here is how:
- Fork the repository ([here is the guide](https://help.github.com/articles/fork-a-repo/)).
- Clone to your machine ```git clone https://github.com/YOUR_USERNAME/AdminLTE.git```
- Create a new branch
- Make your changes
- Create a pull request
#### Compile dist files
To compile the dist files you need nodejs/npm, clone/download the repo then:
1. `npm install` (install npm deps)
2. _Optional:_ `npm run dev` (developer mode, autocompile with browsersync support for live demo)
3. `npm run production` (compile css/js files)
#### Contribution Requirements:
- When you contribute, you agree to give a non-exclusive license to AdminLTE.io to use that contribution in any context as we (AdminLTE.io) see appropriate.
- If you use content provided by another party, it must be appropriately licensed using an [open source](http://opensource.org/licenses) license.
- Contributions are only accepted through Github pull requests.
- Finally, contributed code must work in all supported browsers (see above for browser support).
License
-------
AdminLTE is an open source project by [AdminLTE.io](https://adminlte.io) that is licensed under [MIT](http://opensource.org/licenses/MIT). AdminLTE.io
reserves the right to change the license of future releases.
Legacy Releases
---------------
- [AdminLTE 2](https://github.com/ColorlibHQ/AdminLTE/releases/tag/v2.4.18)
- [AdminLTE 1](https://github.com/ColorlibHQ/AdminLTE/releases/tag/1.3.1)
Change log
----------
Visit the [releases](https://github.com/ColorlibHQ/AdminLTE/releases) page to view the changelog
Image Credits
-------------
[Pixeden](http://www.pixeden.com/psd-web-elements/flat-responsive-showcase-psd)
[Graphicsfuel](http://www.graphicsfuel.com/2013/02/13-high-resolution-blur-backgrounds/)
[Pickaface](http://pickaface.net/)
[Unsplash](https://unsplash.com/)
[Uifaces](http://uifaces.com/)

View File

@@ -0,0 +1,14 @@
'use strict'
module.exports = (ctx) => ({
map: ctx.file.dirname.includes('examples') ? false : {
inline: false,
annotation: true,
sourcesContent: true
},
plugins: {
autoprefixer: {
cascade: false
}
}
})

View File

@@ -0,0 +1,29 @@
import babel from 'rollup-plugin-babel'
const pkg = require('../../package')
const year = new Date().getFullYear()
const globals = {
jquery: 'jQuery'
}
export default {
input : 'build/js/AdminLTE.js',
output : {
banner: `/*!
* AdminLTE v${pkg.version} (${pkg.homepage})
* Copyright 2014-${year} ${pkg.author}
* Licensed under MIT (https://github.com/ColorlibHQ/AdminLTE/blob/master/LICENSE)
*/`,
file : 'dist/js/adminlte.js',
format: 'umd',
globals,
name : 'adminlte'
},
plugins: [
babel({
exclude: 'node_modules/**',
externalHelpers: true
})
]
}

View File

@@ -0,0 +1,44 @@
{
"esnext": true,
"verbose": true,
"disallowEmptyBlocks": true,
"disallowKeywords": ["with"],
"disallowMixedSpacesAndTabs": true,
"disallowMultipleLineStrings": true,
"disallowMultipleVarDecl": true,
"disallowQuotedKeysInObjects": "allButReserved",
"disallowSpaceAfterPrefixUnaryOperators": ["++", "--", "+", "-", "~", "!"],
"disallowSpaceBeforeBinaryOperators": [","],
"disallowSpaceBeforePostfixUnaryOperators": ["++", "--"],
"disallowSpacesInFunctionDeclaration": { "beforeOpeningRoundBrace": true },
"disallowSpacesInNamedFunctionExpression": { "beforeOpeningRoundBrace": true },
"disallowSpacesInsideArrayBrackets": true,
"disallowSpacesInsideParentheses": true,
"disallowTrailingComma": true,
"disallowTrailingWhitespace": true,
"requireCamelCaseOrUpperCaseIdentifiers": true,
"requireCapitalizedConstructors": true,
"requireCommaBeforeLineBreak": true,
"requireDollarBeforejQueryAssignment": true,
"requireDotNotation": true,
"requireLineFeedAtFileEnd": true,
"requirePaddingNewLinesAfterUseStrict": true,
"requirePaddingNewLinesBeforeExport": true,
"requireSpaceAfterBinaryOperators": ["+", "-", "/", "*", "=", "==", "===", "!=", "!==", ">", "<", ">=", "<="],
"requireSpaceAfterKeywords": ["if", "else", "for", "while", "do", "switch", "return", "try", "catch"],
"requireSpaceAfterLineComment": true,
"requireSpaceBeforeBinaryOperators": ["+", "-", "/", "*", "=", "==", "===", "!=", "!==", ">", "<", ">=", "<="],
"requireSpaceBetweenArguments": true,
"requireSpacesInAnonymousFunctionExpression": { "beforeOpeningCurlyBrace": true, "beforeOpeningRoundBrace": true, "allExcept": ["shorthand"] },
"requireSpacesInConditionalExpression": true,
"requireSpacesInForStatement": true,
"requireSpacesInFunctionDeclaration": { "beforeOpeningCurlyBrace": true },
"requireSpacesInFunctionExpression": { "beforeOpeningCurlyBrace": true },
"requireSpacesInNamedFunctionExpression": { "beforeOpeningCurlyBrace": true },
"requireSpacesInsideObjectBrackets": "allButNested",
"validateAlignedFunctionParameters": true,
"validateIndentation": 2,
"validateLineBreaks": "LF",
"validateNewlineAfterArrayElements": true,
"validateQuoteMarks": "'"
}

View File

@@ -0,0 +1,23 @@
import ControlSidebar from './ControlSidebar'
import Layout from './Layout'
import PushMenu from './PushMenu'
import Treeview from './Treeview'
import DirectChat from './DirectChat'
import TodoList from './TodoList'
import CardWidget from './CardWidget'
import CardRefresh from './CardRefresh'
import Dropdown from './Dropdown'
import Toasts from './Toasts'
export {
ControlSidebar,
Layout,
PushMenu,
Treeview,
DirectChat,
TodoList,
CardWidget,
CardRefresh,
Dropdown,
Toasts
}

View File

@@ -0,0 +1,168 @@
/**
* --------------------------------------------
* AdminLTE CardRefresh.js
* License MIT
* --------------------------------------------
*/
const CardRefresh = (($) => {
/**
* Constants
* ====================================================
*/
const NAME = 'CardRefresh'
const DATA_KEY = 'lte.cardrefresh'
const EVENT_KEY = `.${DATA_KEY}`
const JQUERY_NO_CONFLICT = $.fn[NAME]
const Event = {
LOADED: `loaded${EVENT_KEY}`,
OVERLAY_ADDED: `overlay.added${EVENT_KEY}`,
OVERLAY_REMOVED: `overlay.removed${EVENT_KEY}`,
}
const ClassName = {
CARD: 'card',
}
const Selector = {
CARD: `.${ClassName.CARD}`,
DATA_REFRESH: '[data-card-widget="card-refresh"]',
}
const Default = {
source: '',
sourceSelector: '',
params: {},
trigger: Selector.DATA_REFRESH,
content: '.card-body',
loadInContent: true,
loadOnInit: true,
responseType: '',
overlayTemplate: '<div class="overlay"><i class="fas fa-2x fa-sync-alt fa-spin"></i></div>',
onLoadStart: function () {
},
onLoadDone: function (response) {
return response;
}
}
class CardRefresh {
constructor(element, settings) {
this._element = element
this._parent = element.parents(Selector.CARD).first()
this._settings = $.extend({}, Default, settings)
this._overlay = $(this._settings.overlayTemplate)
if (element.hasClass(ClassName.CARD)) {
this._parent = element
}
if (this._settings.source === '') {
throw new Error('Source url was not defined. Please specify a url in your CardRefresh source option.');
}
}
load() {
this._addOverlay()
this._settings.onLoadStart.call($(this))
$.get(this._settings.source, this._settings.params, function (response) {
if (this._settings.loadInContent) {
if (this._settings.sourceSelector != '') {
response = $(response).find(this._settings.sourceSelector).html()
}
this._parent.find(this._settings.content).html(response)
}
this._settings.onLoadDone.call($(this), response)
this._removeOverlay();
}.bind(this), this._settings.responseType !== '' && this._settings.responseType)
const loadedEvent = $.Event(Event.LOADED)
$(this._element).trigger(loadedEvent)
}
_addOverlay() {
this._parent.append(this._overlay)
const overlayAddedEvent = $.Event(Event.OVERLAY_ADDED)
$(this._element).trigger(overlayAddedEvent)
};
_removeOverlay() {
this._parent.find(this._overlay).remove()
const overlayRemovedEvent = $.Event(Event.OVERLAY_REMOVED)
$(this._element).trigger(overlayRemovedEvent)
};
// Private
_init(card) {
$(this).find(this._settings.trigger).on('click', () => {
this.load()
})
if (this._settings.loadOnInit) {
this.load()
}
}
// Static
static _jQueryInterface(config) {
let data = $(this).data(DATA_KEY)
const _options = $.extend({}, Default, $(this).data())
if (!data) {
data = new CardRefresh($(this), _options)
$(this).data(DATA_KEY, typeof config === 'string' ? data: config)
}
if (typeof config === 'string' && config.match(/load/)) {
data[config]()
} else {
data._init($(this))
}
}
}
/**
* Data API
* ====================================================
*/
$(document).on('click', Selector.DATA_REFRESH, function (event) {
if (event) {
event.preventDefault()
}
CardRefresh._jQueryInterface.call($(this), 'load')
})
$(document).ready(function () {
$(Selector.DATA_REFRESH).each(function() {
CardRefresh._jQueryInterface.call($(this))
})
})
/**
* jQuery API
* ====================================================
*/
$.fn[NAME] = CardRefresh._jQueryInterface
$.fn[NAME].Constructor = CardRefresh
$.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT
return CardRefresh._jQueryInterface
}
return CardRefresh
})(jQuery)
export default CardRefresh

View File

@@ -0,0 +1,253 @@
/**
* --------------------------------------------
* AdminLTE CardWidget.js
* License MIT
* --------------------------------------------
*/
const CardWidget = (($) => {
/**
* Constants
* ====================================================
*/
const NAME = 'CardWidget'
const DATA_KEY = 'lte.cardwidget'
const EVENT_KEY = `.${DATA_KEY}`
const JQUERY_NO_CONFLICT = $.fn[NAME]
const Event = {
EXPANDED: `expanded${EVENT_KEY}`,
COLLAPSED: `collapsed${EVENT_KEY}`,
MAXIMIZED: `maximized${EVENT_KEY}`,
MINIMIZED: `minimized${EVENT_KEY}`,
REMOVED: `removed${EVENT_KEY}`
}
const ClassName = {
CARD: 'card',
COLLAPSED: 'collapsed-card',
COLLAPSING: 'collapsing-card',
EXPANDING: 'expanding-card',
WAS_COLLAPSED: 'was-collapsed',
MAXIMIZED: 'maximized-card',
}
const Selector = {
DATA_REMOVE: '[data-card-widget="remove"]',
DATA_COLLAPSE: '[data-card-widget="collapse"]',
DATA_MAXIMIZE: '[data-card-widget="maximize"]',
CARD: `.${ClassName.CARD}`,
CARD_HEADER: '.card-header',
CARD_BODY: '.card-body',
CARD_FOOTER: '.card-footer',
COLLAPSED: `.${ClassName.COLLAPSED}`,
}
const Default = {
animationSpeed: 'normal',
collapseTrigger: Selector.DATA_COLLAPSE,
removeTrigger: Selector.DATA_REMOVE,
maximizeTrigger: Selector.DATA_MAXIMIZE,
collapseIcon: 'fa-minus',
expandIcon: 'fa-plus',
maximizeIcon: 'fa-expand',
minimizeIcon: 'fa-compress',
}
class CardWidget {
constructor(element, settings) {
this._element = element
this._parent = element.parents(Selector.CARD).first()
if (element.hasClass(ClassName.CARD)) {
this._parent = element
}
this._settings = $.extend({}, Default, settings)
}
collapse() {
this._parent.addClass(ClassName.COLLAPSING).children(`${Selector.CARD_BODY}, ${Selector.CARD_FOOTER}`)
.slideUp(this._settings.animationSpeed, () => {
this._parent.addClass(ClassName.COLLAPSED).removeClass(ClassName.COLLAPSING)
})
this._parent.find('> ' + Selector.CARD_HEADER + ' ' + this._settings.collapseTrigger + ' .' + this._settings.collapseIcon)
.addClass(this._settings.expandIcon)
.removeClass(this._settings.collapseIcon)
const collapsed = $.Event(Event.COLLAPSED)
this._element.trigger(collapsed, this._parent)
}
expand() {
this._parent.addClass(ClassName.EXPANDING).children(`${Selector.CARD_BODY}, ${Selector.CARD_FOOTER}`)
.slideDown(this._settings.animationSpeed, () => {
this._parent.removeClass(ClassName.COLLAPSED).removeClass(ClassName.EXPANDING)
})
this._parent.find('> ' + Selector.CARD_HEADER + ' ' + this._settings.collapseTrigger + ' .' + this._settings.expandIcon)
.addClass(this._settings.collapseIcon)
.removeClass(this._settings.expandIcon)
const expanded = $.Event(Event.EXPANDED)
this._element.trigger(expanded, this._parent)
}
remove() {
this._parent.slideUp()
const removed = $.Event(Event.REMOVED)
this._element.trigger(removed, this._parent)
}
toggle() {
if (this._parent.hasClass(ClassName.COLLAPSED)) {
this.expand()
return
}
this.collapse()
}
maximize() {
this._parent.find(this._settings.maximizeTrigger + ' .' + this._settings.maximizeIcon)
.addClass(this._settings.minimizeIcon)
.removeClass(this._settings.maximizeIcon)
this._parent.css({
'height': this._parent.height(),
'width': this._parent.width(),
'transition': 'all .15s'
}).delay(150).queue(function(){
$(this).addClass(ClassName.MAXIMIZED)
$('html').addClass(ClassName.MAXIMIZED)
if ($(this).hasClass(ClassName.COLLAPSED)) {
$(this).addClass(ClassName.WAS_COLLAPSED)
}
$(this).dequeue()
})
const maximized = $.Event(Event.MAXIMIZED)
this._element.trigger(maximized, this._parent)
}
minimize() {
this._parent.find(this._settings.maximizeTrigger + ' .' + this._settings.minimizeIcon)
.addClass(this._settings.maximizeIcon)
.removeClass(this._settings.minimizeIcon)
this._parent.css('cssText', 'height:' + this._parent[0].style.height + ' !important;' +
'width:' + this._parent[0].style.width + ' !important; transition: all .15s;'
).delay(10).queue(function(){
$(this).removeClass(ClassName.MAXIMIZED)
$('html').removeClass(ClassName.MAXIMIZED)
$(this).css({
'height': 'inherit',
'width': 'inherit'
})
if ($(this).hasClass(ClassName.WAS_COLLAPSED)) {
$(this).removeClass(ClassName.WAS_COLLAPSED)
}
$(this).dequeue()
})
const MINIMIZED = $.Event(Event.MINIMIZED)
this._element.trigger(MINIMIZED, this._parent)
}
toggleMaximize() {
if (this._parent.hasClass(ClassName.MAXIMIZED)) {
this.minimize()
return
}
this.maximize()
}
// Private
_init(card) {
this._parent = card
$(this).find(this._settings.collapseTrigger).click(() => {
this.toggle()
})
$(this).find(this._settings.maximizeTrigger).click(() => {
this.toggleMaximize()
})
$(this).find(this._settings.removeTrigger).click(() => {
this.remove()
})
}
// Static
static _jQueryInterface(config) {
let data = $(this).data(DATA_KEY)
const _options = $.extend({}, Default, $(this).data())
if (!data) {
data = new CardWidget($(this), _options)
$(this).data(DATA_KEY, typeof config === 'string' ? data: config)
}
if (typeof config === 'string' && config.match(/collapse|expand|remove|toggle|maximize|minimize|toggleMaximize/)) {
data[config]()
} else if (typeof config === 'object') {
data._init($(this))
}
}
}
/**
* Data API
* ====================================================
*/
$(document).on('click', Selector.DATA_COLLAPSE, function (event) {
if (event) {
event.preventDefault()
}
CardWidget._jQueryInterface.call($(this), 'toggle')
})
$(document).on('click', Selector.DATA_REMOVE, function (event) {
if (event) {
event.preventDefault()
}
CardWidget._jQueryInterface.call($(this), 'remove')
})
$(document).on('click', Selector.DATA_MAXIMIZE, function (event) {
if (event) {
event.preventDefault()
}
CardWidget._jQueryInterface.call($(this), 'toggleMaximize')
})
/**
* jQuery API
* ====================================================
*/
$.fn[NAME] = CardWidget._jQueryInterface
$.fn[NAME].Constructor = CardWidget
$.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT
return CardWidget._jQueryInterface
}
return CardWidget
})(jQuery)
export default CardWidget

View File

@@ -0,0 +1,292 @@
/**
* --------------------------------------------
* AdminLTE ControlSidebar.js
* License MIT
* --------------------------------------------
*/
const ControlSidebar = (($) => {
/**
* Constants
* ====================================================
*/
const NAME = 'ControlSidebar'
const DATA_KEY = 'lte.controlsidebar'
const EVENT_KEY = `.${DATA_KEY}`
const JQUERY_NO_CONFLICT = $.fn[NAME]
const DATA_API_KEY = '.data-api'
const Event = {
COLLAPSED: `collapsed${EVENT_KEY}`,
EXPANDED: `expanded${EVENT_KEY}`,
}
const Selector = {
CONTROL_SIDEBAR: '.control-sidebar',
CONTROL_SIDEBAR_CONTENT: '.control-sidebar-content',
DATA_TOGGLE: '[data-widget="control-sidebar"]',
CONTENT: '.content-wrapper',
HEADER: '.main-header',
FOOTER: '.main-footer',
}
const ClassName = {
CONTROL_SIDEBAR_ANIMATE: 'control-sidebar-animate',
CONTROL_SIDEBAR_OPEN: 'control-sidebar-open',
CONTROL_SIDEBAR_SLIDE: 'control-sidebar-slide-open',
LAYOUT_FIXED: 'layout-fixed',
NAVBAR_FIXED: 'layout-navbar-fixed',
NAVBAR_SM_FIXED: 'layout-sm-navbar-fixed',
NAVBAR_MD_FIXED: 'layout-md-navbar-fixed',
NAVBAR_LG_FIXED: 'layout-lg-navbar-fixed',
NAVBAR_XL_FIXED: 'layout-xl-navbar-fixed',
FOOTER_FIXED: 'layout-footer-fixed',
FOOTER_SM_FIXED: 'layout-sm-footer-fixed',
FOOTER_MD_FIXED: 'layout-md-footer-fixed',
FOOTER_LG_FIXED: 'layout-lg-footer-fixed',
FOOTER_XL_FIXED: 'layout-xl-footer-fixed',
}
const Default = {
controlsidebarSlide: true,
scrollbarTheme : 'os-theme-light',
scrollbarAutoHide: 'l',
}
/**
* Class Definition
* ====================================================
*/
class ControlSidebar {
constructor(element, config) {
this._element = element
this._config = config
this._init()
}
// Public
collapse() {
// Show the control sidebar
if (this._config.controlsidebarSlide) {
$('html').addClass(ClassName.CONTROL_SIDEBAR_ANIMATE)
$('body').removeClass(ClassName.CONTROL_SIDEBAR_SLIDE).delay(300).queue(function(){
$(Selector.CONTROL_SIDEBAR).hide()
$('html').removeClass(ClassName.CONTROL_SIDEBAR_ANIMATE)
$(this).dequeue()
})
} else {
$('body').removeClass(ClassName.CONTROL_SIDEBAR_OPEN)
}
const collapsedEvent = $.Event(Event.COLLAPSED)
$(this._element).trigger(collapsedEvent)
}
show() {
// Collapse the control sidebar
if (this._config.controlsidebarSlide) {
$('html').addClass(ClassName.CONTROL_SIDEBAR_ANIMATE)
$(Selector.CONTROL_SIDEBAR).show().delay(10).queue(function(){
$('body').addClass(ClassName.CONTROL_SIDEBAR_SLIDE).delay(300).queue(function(){
$('html').removeClass(ClassName.CONTROL_SIDEBAR_ANIMATE)
$(this).dequeue()
})
$(this).dequeue()
})
} else {
$('body').addClass(ClassName.CONTROL_SIDEBAR_OPEN)
}
const expandedEvent = $.Event(Event.EXPANDED)
$(this._element).trigger(expandedEvent)
}
toggle() {
const shouldClose = $('body').hasClass(ClassName.CONTROL_SIDEBAR_OPEN) || $('body')
.hasClass(ClassName.CONTROL_SIDEBAR_SLIDE)
if (shouldClose) {
// Close the control sidebar
this.collapse()
} else {
// Open the control sidebar
this.show()
}
}
// Private
_init() {
this._fixHeight()
this._fixScrollHeight()
$(window).resize(() => {
this._fixHeight()
this._fixScrollHeight()
})
$(window).scroll(() => {
if ($('body').hasClass(ClassName.CONTROL_SIDEBAR_OPEN) || $('body').hasClass(ClassName.CONTROL_SIDEBAR_SLIDE)) {
this._fixScrollHeight()
}
})
}
_fixScrollHeight() {
const heights = {
scroll: $(document).height(),
window: $(window).height(),
header: $(Selector.HEADER).outerHeight(),
footer: $(Selector.FOOTER).outerHeight(),
}
const positions = {
bottom: Math.abs((heights.window + $(window).scrollTop()) - heights.scroll),
top: $(window).scrollTop(),
}
let navbarFixed = false;
let footerFixed = false;
if ($('body').hasClass(ClassName.LAYOUT_FIXED)) {
if (
$('body').hasClass(ClassName.NAVBAR_FIXED)
|| $('body').hasClass(ClassName.NAVBAR_SM_FIXED)
|| $('body').hasClass(ClassName.NAVBAR_MD_FIXED)
|| $('body').hasClass(ClassName.NAVBAR_LG_FIXED)
|| $('body').hasClass(ClassName.NAVBAR_XL_FIXED)
) {
if ($(Selector.HEADER).css("position") === "fixed") {
navbarFixed = true;
}
}
if (
$('body').hasClass(ClassName.FOOTER_FIXED)
|| $('body').hasClass(ClassName.FOOTER_SM_FIXED)
|| $('body').hasClass(ClassName.FOOTER_MD_FIXED)
|| $('body').hasClass(ClassName.FOOTER_LG_FIXED)
|| $('body').hasClass(ClassName.FOOTER_XL_FIXED)
) {
if ($(Selector.FOOTER).css("position") === "fixed") {
footerFixed = true;
}
}
if (positions.top === 0 && positions.bottom === 0) {
$(Selector.CONTROL_SIDEBAR).css('bottom', heights.footer);
$(Selector.CONTROL_SIDEBAR).css('top', heights.header);
$(Selector.CONTROL_SIDEBAR + ', ' + Selector.CONTROL_SIDEBAR + ' ' + Selector.CONTROL_SIDEBAR_CONTENT).css('height', heights.window - (heights.header + heights.footer))
} else if (positions.bottom <= heights.footer) {
if (footerFixed === false) {
$(Selector.CONTROL_SIDEBAR).css('bottom', heights.footer - positions.bottom);
$(Selector.CONTROL_SIDEBAR + ', ' + Selector.CONTROL_SIDEBAR + ' ' + Selector.CONTROL_SIDEBAR_CONTENT).css('height', heights.window - (heights.footer - positions.bottom))
} else {
$(Selector.CONTROL_SIDEBAR).css('bottom', heights.footer);
}
} else if (positions.top <= heights.header) {
if (navbarFixed === false) {
$(Selector.CONTROL_SIDEBAR).css('top', heights.header - positions.top);
$(Selector.CONTROL_SIDEBAR + ', ' + Selector.CONTROL_SIDEBAR + ' ' + Selector.CONTROL_SIDEBAR_CONTENT).css('height', heights.window - (heights.header - positions.top))
} else {
$(Selector.CONTROL_SIDEBAR).css('top', heights.header);
}
} else {
if (navbarFixed === false) {
$(Selector.CONTROL_SIDEBAR).css('top', 0);
$(Selector.CONTROL_SIDEBAR + ', ' + Selector.CONTROL_SIDEBAR + ' ' + Selector.CONTROL_SIDEBAR_CONTENT).css('height', heights.window)
} else {
$(Selector.CONTROL_SIDEBAR).css('top', heights.header);
}
}
}
}
_fixHeight() {
const heights = {
window: $(window).height(),
header: $(Selector.HEADER).outerHeight(),
footer: $(Selector.FOOTER).outerHeight(),
}
if ($('body').hasClass(ClassName.LAYOUT_FIXED)) {
let sidebarHeight = heights.window - heights.header;
if (
$('body').hasClass(ClassName.FOOTER_FIXED)
|| $('body').hasClass(ClassName.FOOTER_SM_FIXED)
|| $('body').hasClass(ClassName.FOOTER_MD_FIXED)
|| $('body').hasClass(ClassName.FOOTER_LG_FIXED)
|| $('body').hasClass(ClassName.FOOTER_XL_FIXED)
) {
if ($(Selector.FOOTER).css("position") === "fixed") {
sidebarHeight = heights.window - heights.header - heights.footer;
}
}
$(Selector.CONTROL_SIDEBAR + ' ' + Selector.CONTROL_SIDEBAR_CONTENT).css('height', sidebarHeight)
if (typeof $.fn.overlayScrollbars !== 'undefined') {
$(Selector.CONTROL_SIDEBAR + ' ' + Selector.CONTROL_SIDEBAR_CONTENT).overlayScrollbars({
className : this._config.scrollbarTheme,
sizeAutoCapable : true,
scrollbars : {
autoHide: this._config.scrollbarAutoHide,
clickScrolling : true
}
})
}
}
}
// Static
static _jQueryInterface(operation) {
return this.each(function () {
let data = $(this).data(DATA_KEY)
const _options = $.extend({}, Default, $(this).data())
if (!data) {
data = new ControlSidebar(this, _options)
$(this).data(DATA_KEY, data)
}
if (data[operation] === 'undefined') {
throw new Error(`${operation} is not a function`)
}
data[operation]()
})
}
}
/**
*
* Data Api implementation
* ====================================================
*/
$(document).on('click', Selector.DATA_TOGGLE, function (event) {
event.preventDefault()
ControlSidebar._jQueryInterface.call($(this), 'toggle')
})
/**
* jQuery API
* ====================================================
*/
$.fn[NAME] = ControlSidebar._jQueryInterface
$.fn[NAME].Constructor = ControlSidebar
$.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT
return ControlSidebar._jQueryInterface
}
return ControlSidebar
})(jQuery)
export default ControlSidebar

View File

@@ -0,0 +1,92 @@
/**
* --------------------------------------------
* AdminLTE DirectChat.js
* License MIT
* --------------------------------------------
*/
const DirectChat = (($) => {
/**
* Constants
* ====================================================
*/
const NAME = 'DirectChat'
const DATA_KEY = 'lte.directchat'
const EVENT_KEY = `.${DATA_KEY}`
const JQUERY_NO_CONFLICT = $.fn[NAME]
const DATA_API_KEY = '.data-api'
const Event = {
TOGGLED: `toggled{EVENT_KEY}`
}
const Selector = {
DATA_TOGGLE: '[data-widget="chat-pane-toggle"]',
DIRECT_CHAT: '.direct-chat'
};
const ClassName = {
DIRECT_CHAT_OPEN: 'direct-chat-contacts-open'
};
/**
* Class Definition
* ====================================================
*/
class DirectChat {
constructor(element, config) {
this._element = element
}
toggle() {
$(this._element).parents(Selector.DIRECT_CHAT).first().toggleClass(ClassName.DIRECT_CHAT_OPEN);
const toggledEvent = $.Event(Event.TOGGLED)
$(this._element).trigger(toggledEvent)
}
// Static
static _jQueryInterface(config) {
return this.each(function () {
let data = $(this).data(DATA_KEY)
if (!data) {
data = new DirectChat($(this))
$(this).data(DATA_KEY, data)
}
data[config]()
})
}
}
/**
*
* Data Api implementation
* ====================================================
*/
$(document).on('click', Selector.DATA_TOGGLE, function (event) {
if (event) event.preventDefault();
DirectChat._jQueryInterface.call($(this), 'toggle');
});
/**
* jQuery API
* ====================================================
*/
$.fn[NAME] = DirectChat._jQueryInterface
$.fn[NAME].Constructor = DirectChat
$.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT
return DirectChat._jQueryInterface
}
return DirectChat
})(jQuery)
export default DirectChat

View File

@@ -0,0 +1,143 @@
/**
* --------------------------------------------
* AdminLTE Dropdown.js
* License MIT
* --------------------------------------------
*/
const Dropdown = (($) => {
/**
* Constants
* ====================================================
*/
const NAME = 'Dropdown'
const DATA_KEY = 'lte.dropdown'
const EVENT_KEY = `.${DATA_KEY}`
const JQUERY_NO_CONFLICT = $.fn[NAME]
const Selector = {
NAVBAR: '.navbar',
DROPDOWN_MENU: '.dropdown-menu',
DROPDOWN_MENU_ACTIVE: '.dropdown-menu.show',
DROPDOWN_TOGGLE: '[data-toggle="dropdown"]',
}
const ClassName = {
DROPDOWN_HOVER: 'dropdown-hover',
DROPDOWN_RIGHT: 'dropdown-menu-right'
}
const Default = {
}
/**
* Class Definition
* ====================================================
*/
class Dropdown {
constructor(element, config) {
this._config = config
this._element = element
}
// Public
toggleSubmenu() {
this._element.siblings().show().toggleClass("show")
if (! this._element.next().hasClass('show')) {
this._element.parents('.dropdown-menu').first().find('.show').removeClass("show").hide()
}
this._element.parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
$('.dropdown-submenu .show').removeClass("show").hide()
})
}
fixPosition() {
let elm = $(Selector.DROPDOWN_MENU_ACTIVE)
if (elm.length !== 0) {
if (elm.hasClass(ClassName.DROPDOWN_RIGHT)) {
elm.css('left', 'inherit')
elm.css('right', 0)
} else {
elm.css('left', 0)
elm.css('right', 'inherit')
}
let offset = elm.offset()
let width = elm.width()
let windowWidth = $(window).width()
let visiblePart = windowWidth - offset.left
if (offset.left < 0) {
elm.css('left', 'inherit')
elm.css('right', (offset.left - 5))
} else {
if (visiblePart < width) {
elm.css('left', 'inherit')
elm.css('right', 0)
}
}
}
}
// Static
static _jQueryInterface(config) {
return this.each(function () {
let data = $(this).data(DATA_KEY)
const _config = $.extend({}, Default, $(this).data())
if (!data) {
data = new Dropdown($(this), _config)
$(this).data(DATA_KEY, data)
}
if (config === 'toggleSubmenu' || config == 'fixPosition') {
data[config]()
}
})
}
}
/**
* Data API
* ====================================================
*/
$(Selector.DROPDOWN_MENU + ' ' + Selector.DROPDOWN_TOGGLE).on("click", function(event) {
event.preventDefault()
event.stopPropagation()
Dropdown._jQueryInterface.call($(this), 'toggleSubmenu')
});
$(Selector.NAVBAR + ' ' + Selector.DROPDOWN_TOGGLE).on("click", function(event) {
event.preventDefault()
setTimeout(function() {
Dropdown._jQueryInterface.call($(this), 'fixPosition')
}, 1)
});
/**
* jQuery API
* ====================================================
*/
$.fn[NAME] = Dropdown._jQueryInterface
$.fn[NAME].Constructor = Dropdown
$.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT
return Dropdown._jQueryInterface
}
return Dropdown
})(jQuery)
export default Dropdown

View File

@@ -0,0 +1,242 @@
/**
* --------------------------------------------
* AdminLTE Layout.js
* License MIT
* --------------------------------------------
*/
const Layout = (($) => {
/**
* Constants
* ====================================================
*/
const NAME = 'Layout'
const DATA_KEY = 'lte.layout'
const EVENT_KEY = `.${DATA_KEY}`
const JQUERY_NO_CONFLICT = $.fn[NAME]
const Event = {
SIDEBAR: 'sidebar'
}
const Selector = {
HEADER : '.main-header',
MAIN_SIDEBAR : '.main-sidebar',
SIDEBAR : '.main-sidebar .sidebar',
CONTENT : '.content-wrapper',
BRAND : '.brand-link',
CONTENT_HEADER : '.content-header',
WRAPPER : '.wrapper',
CONTROL_SIDEBAR: '.control-sidebar',
CONTROL_SIDEBAR_CONTENT: '.control-sidebar-content',
CONTROL_SIDEBAR_BTN: '[data-widget="control-sidebar"]',
LAYOUT_FIXED : '.layout-fixed',
FOOTER : '.main-footer',
PUSHMENU_BTN : '[data-widget="pushmenu"]',
LOGIN_BOX : '.login-box',
REGISTER_BOX : '.register-box'
}
const ClassName = {
HOLD : 'hold-transition',
SIDEBAR : 'main-sidebar',
CONTENT_FIXED : 'content-fixed',
SIDEBAR_FOCUSED: 'sidebar-focused',
LAYOUT_FIXED : 'layout-fixed',
NAVBAR_FIXED : 'layout-navbar-fixed',
FOOTER_FIXED : 'layout-footer-fixed',
LOGIN_PAGE : 'login-page',
REGISTER_PAGE : 'register-page',
CONTROL_SIDEBAR_SLIDE_OPEN: 'control-sidebar-slide-open',
CONTROL_SIDEBAR_OPEN: 'control-sidebar-open',
}
const Default = {
scrollbarTheme : 'os-theme-light',
scrollbarAutoHide: 'l',
panelAutoHeight: true,
loginRegisterAutoHeight: true,
}
/**
* Class Definition
* ====================================================
*/
class Layout {
constructor(element, config) {
this._config = config
this._element = element
this._init()
}
// Public
fixLayoutHeight(extra = null) {
let control_sidebar = 0
if ($('body').hasClass(ClassName.CONTROL_SIDEBAR_SLIDE_OPEN) || $('body').hasClass(ClassName.CONTROL_SIDEBAR_OPEN) || extra == 'control_sidebar') {
control_sidebar = $(Selector.CONTROL_SIDEBAR_CONTENT).height()
}
const heights = {
window: $(window).height(),
header: $(Selector.HEADER).length !== 0 ? $(Selector.HEADER).outerHeight() : 0,
footer: $(Selector.FOOTER).length !== 0 ? $(Selector.FOOTER).outerHeight() : 0,
sidebar: $(Selector.SIDEBAR).length !== 0 ? $(Selector.SIDEBAR).height() : 0,
control_sidebar: control_sidebar,
}
const max = this._max(heights)
let offset = this._config.panelAutoHeight
if (offset === true) {
offset = 0;
}
if (offset !== false) {
if (max == heights.control_sidebar) {
$(Selector.CONTENT).css('min-height', (max + offset))
} else if (max == heights.window) {
$(Selector.CONTENT).css('min-height', (max + offset) - heights.header - heights.footer)
} else {
$(Selector.CONTENT).css('min-height', (max + offset) - heights.header)
}
}
if ($('body').hasClass(ClassName.LAYOUT_FIXED)) {
if (offset !== false) {
$(Selector.CONTENT).css('min-height', (max + offset) - heights.header - heights.footer)
}
if (typeof $.fn.overlayScrollbars !== 'undefined') {
$(Selector.SIDEBAR).overlayScrollbars({
className : this._config.scrollbarTheme,
sizeAutoCapable : true,
scrollbars : {
autoHide: this._config.scrollbarAutoHide,
clickScrolling : true
}
})
}
}
}
fixLoginRegisterHeight() {
if ($(Selector.LOGIN_BOX + ', ' + Selector.REGISTER_BOX).length === 0) {
$('body, html').css('height', 'auto')
} else if ($(Selector.LOGIN_BOX + ', ' + Selector.REGISTER_BOX).length !== 0) {
let box_height = $(Selector.LOGIN_BOX + ', ' + Selector.REGISTER_BOX).height()
if ($('body').css('min-height') !== box_height) {
$('body').css('min-height', box_height)
}
}
}
// Private
_init() {
// Activate layout height watcher
this.fixLayoutHeight()
if (this._config.loginRegisterAutoHeight === true) {
this.fixLoginRegisterHeight()
} else if (Number.isInteger(this._config.loginRegisterAutoHeight)) {
setInterval(this.fixLoginRegisterHeight, this._config.loginRegisterAutoHeight);
}
$(Selector.SIDEBAR)
.on('collapsed.lte.treeview expanded.lte.treeview', () => {
this.fixLayoutHeight()
})
$(Selector.PUSHMENU_BTN)
.on('collapsed.lte.pushmenu shown.lte.pushmenu', () => {
this.fixLayoutHeight()
})
$(Selector.CONTROL_SIDEBAR_BTN)
.on('collapsed.lte.controlsidebar', () => {
this.fixLayoutHeight()
})
.on('expanded.lte.controlsidebar', () => {
this.fixLayoutHeight('control_sidebar')
})
$(window).resize(() => {
this.fixLayoutHeight()
})
$('body.hold-transition').removeClass('hold-transition')
}
_max(numbers) {
// Calculate the maximum number in a list
let max = 0
Object.keys(numbers).forEach((key) => {
if (numbers[key] > max) {
max = numbers[key]
}
})
return max
}
// Static
static _jQueryInterface(config = '') {
return this.each(function () {
let data = $(this).data(DATA_KEY)
const _options = $.extend({}, Default, $(this).data())
if (!data) {
data = new Layout($(this), _options)
$(this).data(DATA_KEY, data)
}
if (config === 'init' || config === '') {
data['_init']()
} else if (config === 'fixLayoutHeight' || config === 'fixLoginRegisterHeight') {
data[config]()
}
})
}
}
/**
* Data API
* ====================================================
*/
$(window).on('load', () => {
Layout._jQueryInterface.call($('body'))
})
$(Selector.SIDEBAR + ' a').on('focusin', () => {
$(Selector.MAIN_SIDEBAR).addClass(ClassName.SIDEBAR_FOCUSED);
})
$(Selector.SIDEBAR + ' a').on('focusout', () => {
$(Selector.MAIN_SIDEBAR).removeClass(ClassName.SIDEBAR_FOCUSED);
})
/**
* jQuery API
* ====================================================
*/
$.fn[NAME] = Layout._jQueryInterface
$.fn[NAME].Constructor = Layout
$.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT
return Layout._jQueryInterface
}
return Layout
})(jQuery)
export default Layout

View File

@@ -0,0 +1,225 @@
/**
* --------------------------------------------
* AdminLTE PushMenu.js
* License MIT
* --------------------------------------------
*/
const PushMenu = (($) => {
/**
* Constants
* ====================================================
*/
const NAME = 'PushMenu'
const DATA_KEY = 'lte.pushmenu'
const EVENT_KEY = `.${DATA_KEY}`
const JQUERY_NO_CONFLICT = $.fn[NAME]
const Event = {
COLLAPSED: `collapsed${EVENT_KEY}`,
SHOWN: `shown${EVENT_KEY}`
}
const Default = {
autoCollapseSize: 992,
enableRemember: false,
noTransitionAfterReload: true
}
const Selector = {
TOGGLE_BUTTON: '[data-widget="pushmenu"]',
SIDEBAR_MINI: '.sidebar-mini',
SIDEBAR_COLLAPSED: '.sidebar-collapse',
BODY: 'body',
OVERLAY: '#sidebar-overlay',
WRAPPER: '.wrapper'
}
const ClassName = {
COLLAPSED: 'sidebar-collapse',
OPEN: 'sidebar-open',
CLOSED: 'sidebar-closed'
}
/**
* Class Definition
* ====================================================
*/
class PushMenu {
constructor(element, options) {
this._element = element
this._options = $.extend({}, Default, options)
if (!$(Selector.OVERLAY).length) {
this._addOverlay()
}
this._init()
}
// Public
expand() {
if (this._options.autoCollapseSize) {
if ($(window).width() <= this._options.autoCollapseSize) {
$(Selector.BODY).addClass(ClassName.OPEN)
}
}
$(Selector.BODY).removeClass(ClassName.COLLAPSED).removeClass(ClassName.CLOSED)
if(this._options.enableRemember) {
localStorage.setItem(`remember${EVENT_KEY}`, ClassName.OPEN)
}
const shownEvent = $.Event(Event.SHOWN)
$(this._element).trigger(shownEvent)
}
collapse() {
if (this._options.autoCollapseSize) {
if ($(window).width() <= this._options.autoCollapseSize) {
$(Selector.BODY).removeClass(ClassName.OPEN).addClass(ClassName.CLOSED)
}
}
$(Selector.BODY).addClass(ClassName.COLLAPSED)
if(this._options.enableRemember) {
localStorage.setItem(`remember${EVENT_KEY}`, ClassName.COLLAPSED)
}
const collapsedEvent = $.Event(Event.COLLAPSED)
$(this._element).trigger(collapsedEvent)
}
toggle() {
if (!$(Selector.BODY).hasClass(ClassName.COLLAPSED)) {
this.collapse()
} else {
this.expand()
}
}
autoCollapse(resize = false) {
if (this._options.autoCollapseSize) {
if ($(window).width() <= this._options.autoCollapseSize) {
if (!$(Selector.BODY).hasClass(ClassName.OPEN)) {
this.collapse()
}
} else if (resize == true) {
if ($(Selector.BODY).hasClass(ClassName.OPEN)) {
$(Selector.BODY).removeClass(ClassName.OPEN)
} else if($(Selector.BODY).hasClass(ClassName.CLOSED)) {
this.expand()
}
}
}
}
remember() {
if(this._options.enableRemember) {
let toggleState = localStorage.getItem(`remember${EVENT_KEY}`)
if (toggleState == ClassName.COLLAPSED){
if (this._options.noTransitionAfterReload) {
$("body").addClass('hold-transition').addClass(ClassName.COLLAPSED).delay(50).queue(function() {
$(this).removeClass('hold-transition')
$(this).dequeue()
})
} else {
$("body").addClass(ClassName.COLLAPSED)
}
} else {
if (this._options.noTransitionAfterReload) {
$("body").addClass('hold-transition').removeClass(ClassName.COLLAPSED).delay(50).queue(function() {
$(this).removeClass('hold-transition')
$(this).dequeue()
})
} else {
$("body").removeClass(ClassName.COLLAPSED)
}
}
}
}
// Private
_init() {
this.remember()
this.autoCollapse()
$(window).resize(() => {
this.autoCollapse(true)
})
}
_addOverlay() {
const overlay = $('<div />', {
id: 'sidebar-overlay'
})
overlay.on('click', () => {
this.collapse()
})
$(Selector.WRAPPER).append(overlay)
}
// Static
static _jQueryInterface(operation) {
return this.each(function () {
let data = $(this).data(DATA_KEY)
const _options = $.extend({}, Default, $(this).data())
if (!data) {
data = new PushMenu(this, _options)
$(this).data(DATA_KEY, data)
}
if (typeof operation === 'string' && operation.match(/collapse|expand|toggle/)) {
data[operation]()
}
})
}
}
/**
* Data API
* ====================================================
*/
$(document).on('click', Selector.TOGGLE_BUTTON, (event) => {
event.preventDefault()
let button = event.currentTarget
if ($(button).data('widget') !== 'pushmenu') {
button = $(button).closest(Selector.TOGGLE_BUTTON)
}
PushMenu._jQueryInterface.call($(button), 'toggle')
})
$(window).on('load', () => {
PushMenu._jQueryInterface.call($(Selector.TOGGLE_BUTTON))
})
/**
* jQuery API
* ====================================================
*/
$.fn[NAME] = PushMenu._jQueryInterface
$.fn[NAME].Constructor = PushMenu
$.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT
return PushMenu._jQueryInterface
}
return PushMenu
})(jQuery)
export default PushMenu

View File

@@ -0,0 +1,127 @@
/**
* --------------------------------------------
* AdminLTE SiteSearch.js
* License MIT
* --------------------------------------------
*/
const SiteSearch = (($) => {
/**
* Constants
* ====================================================
*/
const NAME = 'SiteSearch'
const DATA_KEY = 'lte.site-search'
const EVENT_KEY = `.${DATA_KEY}`
const JQUERY_NO_CONFLICT = $.fn[NAME]
const Event = {}
const Selector = {
TOGGLE_BUTTON : '[data-widget="site-search"]',
SEARCH_BLOCK : '.site-search-block',
SEARCH_BACKDROP: '.site-search-backdrop',
SEARCH_INPUT : '.site-search-block .form-control'
}
const ClassName = {
OPEN: 'site-search-open'
}
const Default = {
transitionSpeed: 300
}
/**
* Class Definition
* ====================================================
*/
class SiteSearch {
constructor(_element, _options) {
this.element = _element
this.options = $.extend({}, Default, _options)
}
// Public
open() {
$(Selector.SEARCH_BLOCK).slideDown(this.options.transitionSpeed)
$(Selector.SEARCH_BACKDROP).show(0)
$(Selector.SEARCH_INPUT).focus()
$(Selector.SEARCH_BLOCK).addClass(ClassName.OPEN)
}
close() {
$(Selector.SEARCH_BLOCK).slideUp(this.options.transitionSpeed)
$(Selector.SEARCH_BACKDROP).hide(0)
$(Selector.SEARCH_BLOCK).removeClass(ClassName.OPEN)
}
toggle() {
if ($(Selector.SEARCH_BLOCK).hasClass(ClassName.OPEN)) {
this.close()
} else {
this.open()
}
}
// Static
static _jQueryInterface(options) {
return this.each(function () {
let data = $(this).data(DATA_KEY)
if (!data) {
data = new SiteSearch(this, options)
$(this).data(DATA_KEY, data)
}
if (!/toggle|close/.test(options)) {
throw Error(`Undefined method ${options}`)
}
data[options]()
})
}
}
/**
* Data API
* ====================================================
*/
$(document).on('click', Selector.TOGGLE_BUTTON, (event) => {
event.preventDefault()
let button = $(event.currentTarget)
if (button.data('widget') !== 'site-search') {
button = button.closest(Selector.TOGGLE_BUTTON)
}
SiteSearch._jQueryInterface.call(button, 'toggle')
})
$(document).on('click', Selector.SEARCH_BACKDROP, (event) => {
const backdrop = $(event.currentTarget)
SiteSearch._jQueryInterface.call(backdrop, 'close')
})
/**
* jQuery API
* ====================================================
*/
$.fn[NAME] = SiteSearch._jQueryInterface
$.fn[NAME].Constructor = SiteSearch
$.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT
return SiteSearch._jQueryInterface
}
return SiteSearch
})(jQuery)
export default SiteSearch

View File

@@ -0,0 +1,229 @@
/**
* --------------------------------------------
* AdminLTE Toasts.js
* License MIT
* --------------------------------------------
*/
const Toasts = (($) => {
/**
* Constants
* ====================================================
*/
const NAME = 'Toasts'
const DATA_KEY = 'lte.toasts'
const EVENT_KEY = `.${DATA_KEY}`
const JQUERY_NO_CONFLICT = $.fn[NAME]
const Event = {
INIT: `init${EVENT_KEY}`,
CREATED: `created${EVENT_KEY}`,
REMOVED: `removed${EVENT_KEY}`,
}
const Selector = {
BODY: 'toast-body',
CONTAINER_TOP_RIGHT: '#toastsContainerTopRight',
CONTAINER_TOP_LEFT: '#toastsContainerTopLeft',
CONTAINER_BOTTOM_RIGHT: '#toastsContainerBottomRight',
CONTAINER_BOTTOM_LEFT: '#toastsContainerBottomLeft',
}
const ClassName = {
TOP_RIGHT: 'toasts-top-right',
TOP_LEFT: 'toasts-top-left',
BOTTOM_RIGHT: 'toasts-bottom-right',
BOTTOM_LEFT: 'toasts-bottom-left',
FADE: 'fade',
}
const Position = {
TOP_RIGHT: 'topRight',
TOP_LEFT: 'topLeft',
BOTTOM_RIGHT: 'bottomRight',
BOTTOM_LEFT: 'bottomLeft',
}
const Id = {
CONTAINER_TOP_RIGHT: 'toastsContainerTopRight',
CONTAINER_TOP_LEFT: 'toastsContainerTopLeft',
CONTAINER_BOTTOM_RIGHT: 'toastsContainerBottomRight',
CONTAINER_BOTTOM_LEFT: 'toastsContainerBottomLeft',
}
const Default = {
position: Position.TOP_RIGHT,
fixed: true,
autohide: false,
autoremove: true,
delay: 1000,
fade: true,
icon: null,
image: null,
imageAlt: null,
imageHeight: '25px',
title: null,
subtitle: null,
close: true,
body: null,
class: null,
}
/**
* Class Definition
* ====================================================
*/
class Toasts {
constructor(element, config) {
this._config = config
this._prepareContainer();
const initEvent = $.Event(Event.INIT)
$('body').trigger(initEvent)
}
// Public
create() {
var toast = $('<div class="toast" role="alert" aria-live="assertive" aria-atomic="true"/>')
toast.data('autohide', this._config.autohide)
toast.data('animation', this._config.fade)
if (this._config.class) {
toast.addClass(this._config.class)
}
if (this._config.delay && this._config.delay != 500) {
toast.data('delay', this._config.delay)
}
var toast_header = $('<div class="toast-header">')
if (this._config.image != null) {
var toast_image = $('<img />').addClass('rounded mr-2').attr('src', this._config.image).attr('alt', this._config.imageAlt)
if (this._config.imageHeight != null) {
toast_image.height(this._config.imageHeight).width('auto')
}
toast_header.append(toast_image)
}
if (this._config.icon != null) {
toast_header.append($('<i />').addClass('mr-2').addClass(this._config.icon))
}
if (this._config.title != null) {
toast_header.append($('<strong />').addClass('mr-auto').html(this._config.title))
}
if (this._config.subtitle != null) {
toast_header.append($('<small />').html(this._config.subtitle))
}
if (this._config.close == true) {
var toast_close = $('<button data-dismiss="toast" />').attr('type', 'button').addClass('ml-2 mb-1 close').attr('aria-label', 'Close').append('<span aria-hidden="true">&times;</span>')
if (this._config.title == null) {
toast_close.toggleClass('ml-2 ml-auto')
}
toast_header.append(toast_close)
}
toast.append(toast_header)
if (this._config.body != null) {
toast.append($('<div class="toast-body" />').html(this._config.body))
}
$(this._getContainerId()).prepend(toast)
const createdEvent = $.Event(Event.CREATED)
$('body').trigger(createdEvent)
toast.toast('show')
if (this._config.autoremove) {
toast.on('hidden.bs.toast', function () {
$(this).delay(200).remove();
const removedEvent = $.Event(Event.REMOVED)
$('body').trigger(removedEvent)
})
}
}
// Static
_getContainerId() {
if (this._config.position == Position.TOP_RIGHT) {
return Selector.CONTAINER_TOP_RIGHT;
} else if (this._config.position == Position.TOP_LEFT) {
return Selector.CONTAINER_TOP_LEFT;
} else if (this._config.position == Position.BOTTOM_RIGHT) {
return Selector.CONTAINER_BOTTOM_RIGHT;
} else if (this._config.position == Position.BOTTOM_LEFT) {
return Selector.CONTAINER_BOTTOM_LEFT;
}
}
_prepareContainer() {
if ($(this._getContainerId()).length === 0) {
var container = $('<div />').attr('id', this._getContainerId().replace('#', ''))
if (this._config.position == Position.TOP_RIGHT) {
container.addClass(ClassName.TOP_RIGHT)
} else if (this._config.position == Position.TOP_LEFT) {
container.addClass(ClassName.TOP_LEFT)
} else if (this._config.position == Position.BOTTOM_RIGHT) {
container.addClass(ClassName.BOTTOM_RIGHT)
} else if (this._config.position == Position.BOTTOM_LEFT) {
container.addClass(ClassName.BOTTOM_LEFT)
}
$('body').append(container)
}
if (this._config.fixed) {
$(this._getContainerId()).addClass('fixed')
} else {
$(this._getContainerId()).removeClass('fixed')
}
}
// Static
static _jQueryInterface(option, config) {
return this.each(function () {
const _options = $.extend({}, Default, config)
var toast = new Toasts($(this), _options)
if (option === 'create') {
toast[option]()
}
})
}
}
/**
* jQuery API
* ====================================================
*/
$.fn[NAME] = Toasts._jQueryInterface
$.fn[NAME].Constructor = Toasts
$.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT
return Toasts._jQueryInterface
}
return Toasts
})(jQuery)
export default Toasts

View File

@@ -0,0 +1,122 @@
/**
* --------------------------------------------
* AdminLTE TodoList.js
* License MIT
* --------------------------------------------
*/
const TodoList = (($) => {
/**
* Constants
* ====================================================
*/
const NAME = 'TodoList'
const DATA_KEY = 'lte.todolist'
const EVENT_KEY = `.${DATA_KEY}`
const JQUERY_NO_CONFLICT = $.fn[NAME]
const Selector = {
DATA_TOGGLE: '[data-widget="todo-list"]'
}
const ClassName = {
TODO_LIST_DONE: 'done'
}
const Default = {
onCheck: function (item) {
return item;
},
onUnCheck: function (item) {
return item;
}
}
/**
* Class Definition
* ====================================================
*/
class TodoList {
constructor(element, config) {
this._config = config
this._element = element
this._init()
}
// Public
toggle(item) {
item.parents('li').toggleClass(ClassName.TODO_LIST_DONE);
if (! $(item).prop('checked')) {
this.unCheck($(item));
return;
}
this.check(item);
}
check (item) {
this._config.onCheck.call(item);
}
unCheck (item) {
this._config.onUnCheck.call(item);
}
// Private
_init() {
var that = this
$(Selector.DATA_TOGGLE).find('input:checkbox:checked').parents('li').toggleClass(ClassName.TODO_LIST_DONE)
$(Selector.DATA_TOGGLE).on('change', 'input:checkbox', (event) => {
that.toggle($(event.target))
})
}
// Static
static _jQueryInterface(config) {
return this.each(function () {
let data = $(this).data(DATA_KEY)
const _options = $.extend({}, Default, $(this).data())
if (!data) {
data = new TodoList($(this), _options)
$(this).data(DATA_KEY, data)
}
if (config === 'init') {
data[config]()
}
})
}
}
/**
* Data API
* ====================================================
*/
$(window).on('load', () => {
TodoList._jQueryInterface.call($(Selector.DATA_TOGGLE))
})
/**
* jQuery API
* ====================================================
*/
$.fn[NAME] = TodoList._jQueryInterface
$.fn[NAME].Constructor = TodoList
$.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT
return TodoList._jQueryInterface
}
return TodoList
})(jQuery)
export default TodoList

View File

@@ -0,0 +1,185 @@
/**
* --------------------------------------------
* AdminLTE Treeview.js
* License MIT
* --------------------------------------------
*/
const Treeview = (($) => {
/**
* Constants
* ====================================================
*/
const NAME = 'Treeview'
const DATA_KEY = 'lte.treeview'
const EVENT_KEY = `.${DATA_KEY}`
const JQUERY_NO_CONFLICT = $.fn[NAME]
const Event = {
SELECTED : `selected${EVENT_KEY}`,
EXPANDED : `expanded${EVENT_KEY}`,
COLLAPSED : `collapsed${EVENT_KEY}`,
LOAD_DATA_API: `load${EVENT_KEY}`
}
const Selector = {
LI : '.nav-item',
LINK : '.nav-link',
TREEVIEW_MENU: '.nav-treeview',
OPEN : '.menu-open',
DATA_WIDGET : '[data-widget="treeview"]'
}
const ClassName = {
LI : 'nav-item',
LINK : 'nav-link',
TREEVIEW_MENU : 'nav-treeview',
OPEN : 'menu-open',
SIDEBAR_COLLAPSED: 'sidebar-collapse'
}
const Default = {
trigger : `${Selector.DATA_WIDGET} ${Selector.LINK}`,
animationSpeed : 300,
accordion : true,
expandSidebar : false,
sidebarButtonSelector: '[data-widget="pushmenu"]'
}
/**
* Class Definition
* ====================================================
*/
class Treeview {
constructor(element, config) {
this._config = config
this._element = element
}
// Public
init() {
this._setupListeners()
}
expand(treeviewMenu, parentLi) {
const expandedEvent = $.Event(Event.EXPANDED)
if (this._config.accordion) {
const openMenuLi = parentLi.siblings(Selector.OPEN).first()
const openTreeview = openMenuLi.find(Selector.TREEVIEW_MENU).first()
this.collapse(openTreeview, openMenuLi)
}
treeviewMenu.stop().slideDown(this._config.animationSpeed, () => {
parentLi.addClass(ClassName.OPEN)
$(this._element).trigger(expandedEvent)
})
if (this._config.expandSidebar) {
this._expandSidebar()
}
}
collapse(treeviewMenu, parentLi) {
const collapsedEvent = $.Event(Event.COLLAPSED)
treeviewMenu.stop().slideUp(this._config.animationSpeed, () => {
parentLi.removeClass(ClassName.OPEN)
$(this._element).trigger(collapsedEvent)
treeviewMenu.find(`${Selector.OPEN} > ${Selector.TREEVIEW_MENU}`).slideUp()
treeviewMenu.find(Selector.OPEN).removeClass(ClassName.OPEN)
})
}
toggle(event) {
const $relativeTarget = $(event.currentTarget)
const $parent = $relativeTarget.parent()
let treeviewMenu = $parent.find('> ' + Selector.TREEVIEW_MENU)
if (!treeviewMenu.is(Selector.TREEVIEW_MENU)) {
if (!$parent.is(Selector.LI)) {
treeviewMenu = $parent.parent().find('> ' + Selector.TREEVIEW_MENU)
}
if (!treeviewMenu.is(Selector.TREEVIEW_MENU)) {
return
}
}
event.preventDefault()
const parentLi = $relativeTarget.parents(Selector.LI).first()
const isOpen = parentLi.hasClass(ClassName.OPEN)
if (isOpen) {
this.collapse($(treeviewMenu), parentLi)
} else {
this.expand($(treeviewMenu), parentLi)
}
}
// Private
_setupListeners() {
$(document).on('click', this._config.trigger, (event) => {
this.toggle(event)
})
}
_expandSidebar() {
if ($('body').hasClass(ClassName.SIDEBAR_COLLAPSED)) {
$(this._config.sidebarButtonSelector).PushMenu('expand')
}
}
// Static
static _jQueryInterface(config) {
return this.each(function () {
let data = $(this).data(DATA_KEY)
const _options = $.extend({}, Default, $(this).data())
if (!data) {
data = new Treeview($(this), _options)
$(this).data(DATA_KEY, data)
}
if (config === 'init') {
data[config]()
}
})
}
}
/**
* Data API
* ====================================================
*/
$(window).on(Event.LOAD_DATA_API, () => {
$(Selector.DATA_WIDGET).each(function () {
Treeview._jQueryInterface.call($(this), 'init')
})
})
/**
* jQuery API
* ====================================================
*/
$.fn[NAME] = Treeview._jQueryInterface
$.fn[NAME].Constructor = Treeview
$.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT
return Treeview._jQueryInterface
}
return Treeview
})(jQuery)
export default Treeview

View File

@@ -0,0 +1,46 @@
const Plugins = [
// AdminLTE Dist
{
from: 'dist/css/',
to : 'docs/assets/css/'
},
{
from: 'dist/js/',
to : 'docs/assets/js/'
},
// jQuery
{
from: 'node_modules/jquery/dist/',
to : 'docs/assets/plugins/jquery/'
},
// Popper
{
from: 'node_modules/popper.js/dist/',
to : 'docs/assets/plugins/popper/'
},
// Bootstrap
{
from: 'node_modules/bootstrap/dist/js/',
to : 'docs/assets/plugins/bootstrap/js/'
},
// Font Awesome
{
from: 'node_modules/@fortawesome/fontawesome-free/css/',
to : 'docs/assets/plugins/fontawesome-free/css/'
},
{
from: 'node_modules/@fortawesome/fontawesome-free/webfonts/',
to : 'docs/assets/plugins/fontawesome-free/webfonts/'
},
// overlayScrollbars
{
from: 'node_modules/overlayscrollbars/js/',
to : 'docs/assets/plugins/overlayScrollbars/js/'
},
{
from: 'node_modules/overlayscrollbars/css/',
to : 'docs/assets/plugins/overlayScrollbars/css/'
}
]
module.exports = Plugins

View File

@@ -0,0 +1,43 @@
const Plugins = require('./DocsPlugins')
const fse = require('fs-extra')
class Publish {
constructor() {
this.options = {
verbose: false
}
this.getArguments()
}
getArguments() {
if (process.argv.length > 2) {
let arg = process.argv[2]
switch (arg) {
case '-v':
case '--verbose':
this.options.verbose = true
break
default:
throw new Error(`Unknown option ${arg}`)
}
}
}
run() {
// Publish files
Plugins.forEach((module) => {
try {
fse.copySync(module.from, module.to)
if (this.options.verbose) {
console.log(`Copied ${module.from} to ${module.to}`)
}
} catch (err) {
console.error(`Error: ${err}`)
}
})
}
}
(new Publish()).run()

View File

@@ -0,0 +1,399 @@
const Plugins = [
// jQuery
{
from: 'node_modules/jquery/dist',
to : 'plugins/jquery'
},
// Popper
{
from: 'node_modules/popper.js/dist',
to : 'plugins/popper'
},
// Bootstrap
{
from: 'node_modules/bootstrap/dist/js',
to : 'plugins/bootstrap/js'
},
// Font Awesome
{
from: 'node_modules/@fortawesome/fontawesome-free/css',
to : 'plugins/fontawesome-free/css'
},
{
from: 'node_modules/@fortawesome/fontawesome-free/webfonts',
to : 'plugins/fontawesome-free/webfonts'
},
// overlayScrollbars
{
from: 'node_modules/overlayscrollbars/js',
to : 'plugins/overlayScrollbars/js'
},
{
from: 'node_modules/overlayscrollbars/css',
to : 'plugins/overlayScrollbars/css'
},
// Chart.js
{
from: 'node_modules/chart.js/dist/',
to : 'plugins/chart.js'
},
// jQuery UI
{
from: 'node_modules/jquery-ui-dist/',
to : 'plugins/jquery-ui'
},
// Flot
{
from: 'node_modules/flot/dist/es5/',
to : 'plugins/flot'
},
// Summernote
{
from: 'node_modules/summernote/dist/',
to : 'plugins/summernote'
},
// Bootstrap Slider
{
from: 'node_modules/bootstrap-slider/dist/',
to : 'plugins/bootstrap-slider'
},
{
from: 'node_modules/bootstrap-slider/dist/css',
to : 'plugins/bootstrap-slider/css'
},
// Bootstrap Colorpicker
{
from: 'node_modules/bootstrap-colorpicker/dist/js',
to : 'plugins/bootstrap-colorpicker/js'
},
{
from: 'node_modules/bootstrap-colorpicker/dist/css',
to : 'plugins/bootstrap-colorpicker/css'
},
// Tempusdominus Bootstrap 4
{
from: 'node_modules/tempusdominus-bootstrap-4/build/js',
to : 'plugins/tempusdominus-bootstrap-4/js'
},
{
from: 'node_modules/tempusdominus-bootstrap-4/build/css',
to : 'plugins/tempusdominus-bootstrap-4/css'
},
// Moment
{
from: 'node_modules/moment/min',
to : 'plugins/moment'
},
{
from: 'node_modules/moment/locale',
to : 'plugins/moment/locale'
},
// FastClick
{
from: 'node_modules/fastclick/lib',
to : 'plugins/fastclick'
},
// Date Range Picker
{
from: 'node_modules/daterangepicker/',
to : 'plugins/daterangepicker'
},
// DataTables
{
from: 'node_modules/pdfmake/build',
to: 'plugins/pdfmake'
},
{
from: 'node_modules/jszip/dist',
to: 'plugins/jszip'
},
{
from: 'node_modules/datatables.net/js',
to: 'plugins/datatables'
},
{
from: 'node_modules/datatables.net-bs4/js',
to: 'plugins/datatables-bs4/js'
},
{
from: 'node_modules/datatables.net-bs4/css',
to: 'plugins/datatables-bs4/css'
},
{
from: 'node_modules/datatables.net-autofill/js',
to: 'plugins/datatables-autofill/js'
},
{
from: 'node_modules/datatables.net-autofill-bs4/js',
to: 'plugins/datatables-autofill/js'
},
{
from: 'node_modules/datatables.net-autofill-bs4/css',
to: 'plugins/datatables-autofill/css'
},
{
from: 'node_modules/datatables.net-buttons/js',
to: 'plugins/datatables-buttons/js'
},
{
from: 'node_modules/datatables.net-buttons-bs4/js',
to: 'plugins/datatables-buttons/js'
},
{
from: 'node_modules/datatables.net-buttons-bs4/css',
to: 'plugins/datatables-buttons/css'
},
{
from: 'node_modules/datatables.net-colreorder/js',
to: 'plugins/datatables-colreorder/js'
},
{
from: 'node_modules/datatables.net-colreorder-bs4/js',
to: 'plugins/datatables-colreorder/js'
},
{
from: 'node_modules/datatables.net-colreorder-bs4/css',
to: 'plugins/datatables-colreorder/css'
},
{
from: 'node_modules/datatables.net-fixedcolumns/js',
to: 'plugins/datatables-fixedcolumns/js'
},
{
from: 'node_modules/datatables.net-fixedcolumns-bs4/js',
to: 'plugins/datatables-fixedcolumns/js'
},
{
from: 'node_modules/datatables.net-fixedcolumns-bs4/css',
to: 'plugins/datatables-fixedcolumns/css'
},
{
from: 'node_modules/datatables.net-fixedheader/js',
to: 'plugins/datatables-fixedheader/js'
},
{
from: 'node_modules/datatables.net-fixedheader-bs4/js',
to: 'plugins/datatables-fixedheader/js'
},
{
from: 'node_modules/datatables.net-fixedheader-bs4/css',
to: 'plugins/datatables-fixedheader/css'
},
{
from: 'node_modules/datatables.net-keytable/js',
to: 'plugins/datatables-keytable/js'
},
{
from: 'node_modules/datatables.net-keytable-bs4/js',
to: 'plugins/datatables-keytable/js'
},
{
from: 'node_modules/datatables.net-keytable-bs4/css',
to: 'plugins/datatables-keytable/css'
},
{
from: 'node_modules/datatables.net-responsive/js',
to: 'plugins/datatables-responsive/js'
},
{
from: 'node_modules/datatables.net-responsive-bs4/js',
to: 'plugins/datatables-responsive/js'
},
{
from: 'node_modules/datatables.net-responsive-bs4/css',
to: 'plugins/datatables-responsive/css'
},
{
from: 'node_modules/datatables.net-rowgroup/js',
to: 'plugins/datatables-rowgroup/js'
},
{
from: 'node_modules/datatables.net-rowgroup-bs4/js',
to: 'plugins/datatables-rowgroup/js'
},
{
from: 'node_modules/datatables.net-rowgroup-bs4/css',
to: 'plugins/datatables-rowgroup/css'
},
{
from: 'node_modules/datatables.net-rowreorder/js',
to: 'plugins/datatables-rowreorder/js'
},
{
from: 'node_modules/datatables.net-rowreorder-bs4/js',
to: 'plugins/datatables-rowreorder/js'
},
{
from: 'node_modules/datatables.net-rowreorder-bs4/css',
to: 'plugins/datatables-rowreorder/css'
},
{
from: 'node_modules/datatables.net-scroller/js',
to: 'plugins/datatables-scroller/js'
},
{
from: 'node_modules/datatables.net-scroller-bs4/js',
to: 'plugins/datatables-scroller/js'
},
{
from: 'node_modules/datatables.net-scroller-bs4/css',
to: 'plugins/datatables-scroller/css'
},
{
from: 'node_modules/datatables.net-select/js',
to: 'plugins/datatables-select/js'
},
{
from: 'node_modules/datatables.net-select-bs4/js',
to: 'plugins/datatables-select/js'
},
{
from: 'node_modules/datatables.net-select-bs4/css',
to: 'plugins/datatables-select/css'
},
// Fullcalendar
{
from: 'node_modules/@fullcalendar/core/',
to : 'plugins/fullcalendar'
},
{
from: 'node_modules/@fullcalendar/bootstrap/',
to : 'plugins/fullcalendar-bootstrap'
},
{
from: 'node_modules/@fullcalendar/daygrid/',
to : 'plugins/fullcalendar-daygrid'
},
{
from: 'node_modules/@fullcalendar/timegrid/',
to : 'plugins/fullcalendar-timegrid'
},
{
from: 'node_modules/@fullcalendar/interaction/',
to : 'plugins/fullcalendar-interaction'
},
// icheck bootstrap
{
from: 'node_modules/icheck-bootstrap/',
to : 'plugins/icheck-bootstrap'
},
// inputmask
{
from: 'node_modules/inputmask/dist/',
to : 'plugins/inputmask'
},
// ion-rangeslider
{
from: 'node_modules/ion-rangeslider/',
to : 'plugins/ion-rangeslider'
},
// JQVMap (jqvmap-novulnerability)
{
from: 'node_modules/jqvmap-novulnerability/dist/',
to : 'plugins/jqvmap'
},
// jQuery Mapael
{
from: 'node_modules/jquery-mapael/js/',
to : 'plugins/jquery-mapael'
},
// Raphael
{
from: 'node_modules/raphael/',
to : 'plugins/raphael'
},
// jQuery Mousewheel
{
from: 'node_modules/jquery-mousewheel/',
to : 'plugins/jquery-mousewheel'
},
// jQuery Knob
{
from: 'node_modules/jquery-knob-chif/dist/',
to : 'plugins/jquery-knob'
},
// pace-progress
{
from: 'node_modules/@lgaitan/pace-progress/dist/',
to : 'plugins/pace-progress'
},
// Select2
{
from: 'node_modules/select2/dist/',
to : 'plugins/select2'
},
{
from: 'node_modules/@ttskch/select2-bootstrap4-theme/dist/',
to : 'plugins/select2-bootstrap4-theme'
},
// Sparklines
{
from: 'node_modules/sparklines/source/',
to : 'plugins/sparklines'
},
// SweetAlert2
{
from: 'node_modules/sweetalert2/dist/',
to : 'plugins/sweetalert2'
},
{
from: 'node_modules/@sweetalert2/theme-bootstrap-4/',
to : 'plugins/sweetalert2-theme-bootstrap-4'
},
// Toastr
{
from: 'node_modules/toastr/build/',
to : 'plugins/toastr'
},
// jsGrid
{
from: 'node_modules/jsgrid/dist',
to: 'plugins/jsgrid'
},
{
from: 'node_modules/jsgrid/demos/',
to: 'plugins/jsgrid/demos'
},
// flag-icon-css
{
from: 'node_modules/flag-icon-css/css',
to: 'plugins/flag-icon-css/css'
},
{
from: 'node_modules/flag-icon-css/flags',
to: 'plugins/flag-icon-css/flags'
},
// bootstrap4-duallistbox
{
from: 'node_modules/bootstrap4-duallistbox/dist',
to: 'plugins/bootstrap4-duallistbox/'
},
// filterizr
{
from: 'node_modules/filterizr/dist',
to: 'plugins/filterizr/'
},
// ekko-lightbox
{
from: 'node_modules/ekko-lightbox/dist',
to: 'plugins/ekko-lightbox/'
},
// bootstrap-switch
{
from: 'node_modules/bootstrap-switch/dist',
to: 'plugins/bootstrap-switch/'
},
// jQuery Validate
{
from: 'node_modules/jquery-validation/dist/',
to : 'plugins/jquery-validation'
},
// bs-custom-file-input
{
from: 'node_modules/bs-custom-file-input/dist/',
to : 'plugins/bs-custom-file-input'
},
]
module.exports = Plugins

View File

@@ -0,0 +1,47 @@
const Plugins = require('./Plugins')
const fse = require('fs-extra')
class Publish {
constructor() {
this.options = {
verbose: false
}
this.getArguments()
}
getArguments() {
if (process.argv.length > 2) {
let arg = process.argv[2]
switch (arg) {
case '-v':
case '--verbose':
this.options.verbose = true
break
default:
throw new Error(`Unknown option ${arg}`)
}
}
}
run() {
// Publish files
Plugins.forEach((module) => {
try {
if (fse.existsSync(module.from)) {
fse.copySync(module.from, module.to)
} else {
fse.copySync(module.from.replace('node_modules/', '../'), module.to)
}
if (this.options.verbose) {
console.log(`Copied ${module.from} to ${module.to}`)
}
} catch (err) {
console.error(`Error: ${err}`)
}
})
}
}
(new Publish()).run()

View File

@@ -0,0 +1,23 @@
{
"adjoining-classes": false,
"box-sizing": false,
"box-model": false,
"compatible-vendor-prefixes": false,
"floats": false,
"font-sizes": false,
"gradients": false,
"important": false,
"known-properties": false,
"outline-none": false,
"qualified-headings": false,
"regex-selectors": false,
"shorthand": false,
"text-indent": false,
"unique-headings": false,
"universal-selector": false,
"unqualified-attributes": false,
"ids": false,
"fallback-colors": false,
"vendor-prefix": false,
"import": false
}

View File

@@ -0,0 +1,20 @@
/*!
* AdminLTE v3.0.4
* Only Components
* Author: Colorlib
* Website: AdminLTE.io <http://adminlte.io>
* License: Open source - MIT <http://opensource.org/licenses/MIT>
*/
// Bootstrap
// ---------------------------------------------------
@import '~bootstrap/scss/functions';
@import 'bootstrap-variables';
@import '~bootstrap/scss/mixins';
// @import '~bootstrap/scss/bootstrap';
// Variables and Mixins
// ---------------------------------------------------
@import 'variables';
@import 'mixins';
@import 'parts/components';

View File

@@ -0,0 +1,20 @@
/*!
* AdminLTE v3.0.4
* Only Core
* Author: Colorlib
* Website: AdminLTE.io <http://adminlte.io>
* License: Open source - MIT <http://opensource.org/licenses/MIT>
*/
// Bootstrap
// ---------------------------------------------------
@import '~bootstrap/scss/functions';
@import 'bootstrap-variables';
@import '~bootstrap/scss/bootstrap';
// Variables and Mixins
// ---------------------------------------------------
@import 'variables';
@import 'mixins';
@import 'parts/core';
@import 'parts/miscellaneous';

View File

@@ -0,0 +1,20 @@
/*!
* AdminLTE v3.0.4
* Only Extra Components
* Author: Colorlib
* Website: AdminLTE.io <http://adminlte.io>
* License: Open source - MIT <http://opensource.org/licenses/MIT>
*/
// Bootstrap
// ---------------------------------------------------
@import '~bootstrap/scss/functions';
@import 'bootstrap-variables';
@import '~bootstrap/scss/mixins';
// @import '~bootstrap/scss/bootstrap';
// Variables and Mixins
// ---------------------------------------------------
@import 'variables';
@import 'mixins';
@import 'parts/extra-components';

View File

@@ -0,0 +1,20 @@
/*!
* AdminLTE v3.0.4
* Only Pages
* Author: Colorlib
* Website: AdminLTE.io <http://adminlte.io>
* License: Open source - MIT <http://opensource.org/licenses/MIT>
*/
// Bootstrap
// ---------------------------------------------------
@import '~bootstrap/scss/functions';
@import 'bootstrap-variables';
@import '~bootstrap/scss/mixins';
@import '~bootstrap/scss/close';
// Variables and Mixins
// ---------------------------------------------------
@import 'variables';
@import 'mixins';
@import 'parts/pages';

View File

@@ -0,0 +1,20 @@
/*!
* AdminLTE v3.0.4
* Only Plugins
* Author: Colorlib
* Website: AdminLTE.io <http://adminlte.io>
* License: Open source - MIT <http://opensource.org/licenses/MIT>
*/
// Bootstrap
// ---------------------------------------------------
@import '~bootstrap/scss/functions';
@import 'bootstrap-variables';
@import '~bootstrap/scss/mixins';
// @import '~bootstrap/scss/bootstrap';
// Variables and Mixins
// ---------------------------------------------------
@import 'variables';
@import 'mixins';
@import 'parts/plugins';

View File

@@ -0,0 +1,27 @@
/*!
* AdminLTE v3.0.4
* Author: Colorlib
* Website: AdminLTE.io <http://adminlte.io>
* License: Open source - MIT <http://opensource.org/licenses/MIT>
*/
//
// ------------------------------------------------------------------
// This file is to be included in your custom SCSS. Before importing
// this file, you should include your custom AdminLTE and Bootstrap
// variables followed by bootstrap.scss and then this file. It's
// ok to import this file without custom variables too!
// NOTE: be sure to keep the license notice in the generated css.
// ------------------------------------------------------------------
//
// Variables and Mixins
// ---------------------------------------------------
@import 'bootstrap-variables';
@import 'variables';
@import 'mixins';
@import 'parts/core';
@import 'parts/components';
@import 'parts/extra-components';
@import 'parts/pages';
@import 'parts/plugins';
@import 'parts/miscellaneous';

View File

@@ -0,0 +1,24 @@
/*!
* AdminLTE v3.0.4
* Author: Colorlib
* Website: AdminLTE.io <http://adminlte.io>
* License: Open source - MIT <http://opensource.org/licenses/MIT>
*/
// Bootstrap
// ---------------------------------------------------
@import '~bootstrap/scss/functions';
@import 'bootstrap-variables';
@import '~bootstrap/scss/bootstrap';
// Variables and Mixins
// ---------------------------------------------------
@import 'variables';
@import 'mixins';
@import 'parts/core';
@import 'parts/components';
@import 'parts/extra-components';
@import 'parts/pages';
@import 'parts/plugins';
@import 'parts/miscellaneous';

View File

@@ -0,0 +1,36 @@
//
// Component: Alert
//
.alert {
.icon {
margin-right: 10px;
}
.close {
color: $black;
opacity: .2;
&:hover {
opacity: .5;
}
}
a {
color: $white;
text-decoration: underline;
}
}
//Alert Variants
@each $color, $value in $theme-colors {
.alert-#{$color} {
color: color-yiq($value);
background: $value;
border-color: darken($value, 5%);
}
.alert-default-#{$color} {
@include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level));
}
}

View File

@@ -0,0 +1,910 @@
// Variables
//
// Variables should follow the `$component-state-property-size` formula for
// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
//
// Color system
//
// stylelint-disable
$white: #ffffff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #6c757d !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
$black: #000 !default;
$grays: () !default;
$grays: map-merge((
"100": $gray-100,
"200": $gray-200,
"300": $gray-300,
"400": $gray-400,
"500": $gray-500,
"600": $gray-600,
"700": $gray-700,
"800": $gray-800,
"900": $gray-900
), $grays);
$blue: #007bff !default;
$indigo: #6610f2 !default;
$purple: #6f42c1 !default;
$pink: #e83e8c !default;
$red: #dc3545 !default;
$orange: #fd7e14 !default;
$yellow: #ffc107 !default;
$green: #28a745 !default;
$teal: #20c997 !default;
$cyan: #17a2b8 !default;
$colors: () !default;
$colors: map-merge((
"blue": $blue,
"indigo": $indigo,
"purple": $purple,
"pink": $pink,
"red": $red,
"orange": $orange,
"yellow": $yellow,
"green": $green,
"teal": $teal,
"cyan": $cyan,
"white": $white,
"gray": $gray-600,
"gray-dark": $gray-800
), $colors);
$primary: $blue !default;
$secondary: $gray-600 !default;
$success: $green !default;
$info: $cyan !default;
$warning: $yellow !default;
$danger: $red !default;
$light: $gray-100 !default;
$dark: $gray-800 !default;
$theme-colors: () !default;
$theme-colors: map-merge((
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
), $theme-colors);
// stylelint-enable
// Set a specific jump point for requesting color jumps
$theme-color-interval: 8% !default;
// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
$yiq-contrasted-threshold: 150 !default;
// Customize the light and dark text colors for use in our YIQ color contrast function.
$yiq-text-dark: #1F2D3D !default;
$yiq-text-light: $white !default;
// Options
//
// Quickly modify global styling by enabling or disabling optional features.
$enable-caret: true !default;
$enable-rounded: true !default;
$enable-shadows: true !default;
$enable-gradients: false !default;
$enable-transitions: true !default;
$enable-prefers-reduced-motion-media-query: true !default;
$enable-hover-media-query: false !default; // Deprecated, no longer affects any compiled CSS
$enable-grid-classes: true !default;
$enable-pointer-cursor-for-buttons: true !default;
$enable-print-styles: true !default;
$enable-responsive-font-sizes: false !default;
$enable-validation-icons: true !default;
$enable-deprecation-messages: true !default;
// Spacing
//
// Control the default styling of most Bootstrap elements by modifying these
// variables. Mostly focused on spacing.
// You can add more entries to the $spacers map, should you need more variation.
// stylelint-disable
$spacer: 1rem !default;
$spacers: () !default;
$spacers: map-merge((
0: 0,
1: ($spacer * .25),
2: ($spacer * .5),
3: $spacer,
4: ($spacer * 1.5),
5: ($spacer * 3)
), $spacers);
// This variable affects the `.h-*` and `.w-*` classes.
$sizes: () !default;
$sizes: map-merge((
25: 25%,
50: 50%,
75: 75%,
100: 100%
), $sizes);
// stylelint-enable
// Body
//
// Settings for the `<body>` element.
$body-bg: $white !default;
$body-color: $gray-900 !default;
// Links
//
// Style anchor elements.
$link-color: theme-color("primary") !default;
$link-decoration: none !default;
$link-hover-color: darken($link-color, 15%) !default;
$link-hover-decoration: none !default;
// Paragraphs
//
// Style p element.
$paragraph-margin-bottom: 1rem !default;
// Grid breakpoints
//
// Define the minimum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
) !default;
@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
@include _assert-starts-at-zero($grid-breakpoints);
// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px
) !default;
@include _assert-ascending($container-max-widths, "$container-max-widths");
// Grid columns
//
// Set the number of columns and specify the width of the gutters.
$grid-columns: 12 !default;
$grid-gutter-width: 15px !default;
// Components
//
// Define common padding and border radius sizes and more.
$line-height-lg: 1.5 !default;
$line-height-sm: 1.5 !default;
$border-width: 1px !default;
$border-color: $gray-300 !default;
$border-radius: .25rem !default;
$border-radius-lg: .3rem !default;
$border-radius-sm: .2rem !default;
$component-active-color: $white !default;
$component-active-bg: theme-color("primary") !default;
$caret-width: .3em !default;
$transition-base: all .2s ease-in-out !default;
$transition-fade: opacity .15s linear !default;
$transition-collapse: height .35s ease !default;
// Fonts
//
// Font, line-height, and color for body text, headings, and more.
// stylelint-disable value-keyword-case
$font-family-sans-serif: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
$font-family-base: $font-family-sans-serif !default;
// stylelint-enable value-keyword-case
$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
$font-size-lg: ($font-size-base * 1.25) !default;
$font-size-sm: ($font-size-base * .875) !default;
$font-weight-light: 300 !default;
$font-weight-normal: 400 !default;
$font-weight-bold: 700 !default;
$font-weight-base: $font-weight-normal !default;
$line-height-base: 1.5 !default;
$h1-font-size: $font-size-base * 2.5 !default;
$h2-font-size: $font-size-base * 2 !default;
$h3-font-size: $font-size-base * 1.75 !default;
$h4-font-size: $font-size-base * 1.5 !default;
$h5-font-size: $font-size-base * 1.25 !default;
$h6-font-size: $font-size-base !default;
$headings-margin-bottom: ($spacer / 2) !default;
$headings-font-family: inherit !default;
$headings-font-weight: 500 !default;
$headings-line-height: 1.2 !default;
$headings-color: inherit !default;
$display1-size: 6rem !default;
$display2-size: 5.5rem !default;
$display3-size: 4.5rem !default;
$display4-size: 3.5rem !default;
$display1-weight: 300 !default;
$display2-weight: 300 !default;
$display3-weight: 300 !default;
$display4-weight: 300 !default;
$display-line-height: $headings-line-height !default;
$lead-font-size: ($font-size-base * 1.25) !default;
$lead-font-weight: 300 !default;
$small-font-size: 80% !default;
$text-muted: $gray-600 !default;
$blockquote-small-color: $gray-600 !default;
$blockquote-font-size: ($font-size-base * 1.25) !default;
$hr-border-color: rgba($black, .1) !default;
$hr-border-width: $border-width !default;
$mark-padding: .2em !default;
$dt-font-weight: $font-weight-bold !default;
$kbd-box-shadow: inset 0 -.1rem 0 rgba($black, .25) !default;
$nested-kbd-font-weight: $font-weight-bold !default;
$list-inline-padding: .5rem !default;
$mark-bg: #fcf8e3 !default;
$hr-margin-y: $spacer !default;
// Tables
//
// Customizes the `.table` component with basic values, each used across all table variations.
$table-cell-padding: .75rem !default;
$table-cell-padding-sm: .3rem !default;
$table-bg: transparent !default;
$table-accent-bg: rgba($black, .05) !default;
$table-hover-bg: rgba($black, .075) !default;
$table-active-bg: $table-hover-bg !default;
$table-border-width: $border-width !default;
$table-border-color: $gray-300 !default;
$table-head-bg: $gray-200 !default;
$table-head-color: $gray-700 !default;
$table-dark-bg: $gray-900 !default;
$table-dark-accent-bg: rgba($white, .05) !default;
$table-dark-hover-bg: rgba($white, .075) !default;
$table-dark-border-color: lighten($gray-900, 10%) !default;
$table-dark-color: $body-bg !default;
// Buttons + Forms
//
// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
$input-btn-padding-y: .375rem !default;
$input-btn-padding-x: .75rem !default;
$input-btn-line-height: $line-height-base !default;
$input-btn-focus-width: .2rem !default;
$input-btn-focus-color: rgba($component-active-bg, .25) !default;
$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default;
$input-btn-padding-y-sm: .25rem !default;
$input-btn-padding-x-sm: .5rem !default;
$input-btn-line-height-sm: $line-height-sm !default;
$input-btn-padding-y-lg: .5rem !default;
$input-btn-padding-x-lg: 1rem !default;
$input-btn-line-height-lg: $line-height-lg !default;
$input-btn-border-width: $border-width !default;
// Buttons
//
// For each of Bootstrap's buttons, define text, background, and border color.
$btn-padding-y: $input-btn-padding-y !default;
$btn-padding-x: $input-btn-padding-x !default;
$btn-line-height: $input-btn-line-height !default;
$btn-padding-y-sm: $input-btn-padding-y-sm !default;
$btn-padding-x-sm: $input-btn-padding-x-sm !default;
$btn-line-height-sm: $input-btn-line-height-sm !default;
$btn-padding-y-lg: $input-btn-padding-y-lg !default;
$btn-padding-x-lg: $input-btn-padding-x-lg !default;
$btn-line-height-lg: $input-btn-line-height-lg !default;
$btn-border-width: $input-btn-border-width !default;
$btn-font-weight: $font-weight-normal !default;
$btn-box-shadow: none !default;
$btn-focus-width: 0 !default;
$btn-focus-box-shadow: none !default;
$btn-disabled-opacity: .65 !default;
$btn-active-box-shadow: none !default;
$btn-link-disabled-color: $gray-600 !default;
$btn-block-spacing-y: .5rem !default;
// Allows for customizing button radius independently from global border radius
$btn-border-radius: $border-radius !default;
$btn-border-radius-lg: $border-radius-lg !default;
$btn-border-radius-sm: $border-radius-sm !default;
$btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
// Forms
$input-padding-y: $input-btn-padding-y !default;
$input-padding-x: $input-btn-padding-x !default;
$input-line-height: $input-btn-line-height !default;
$input-padding-y-sm: $input-btn-padding-y-sm !default;
$input-padding-x-sm: $input-btn-padding-x-sm !default;
$input-line-height-sm: $input-btn-line-height-sm !default;
$input-padding-y-lg: $input-btn-padding-y-lg !default;
$input-padding-x-lg: $input-btn-padding-x-lg !default;
$input-line-height-lg: $input-btn-line-height-lg !default;
$input-bg: $white !default;
$input-disabled-bg: $gray-200 !default;
$input-color: $gray-700 !default;
$input-border-color: $gray-400 !default;
$input-border-width: $input-btn-border-width !default;
$input-box-shadow: inset 0 0 0 rgba($black, 0) !default;
$input-border-radius: $border-radius !default;
$input-border-radius-lg: $border-radius-lg !default;
$input-border-radius-sm: $border-radius-sm !default;
$input-focus-bg: $input-bg !default;
$input-focus-border-color: lighten($component-active-bg, 25%) !default;
$input-focus-color: $input-color !default;
$input-focus-width: 0 !default;
$input-focus-box-shadow: none !default;
$input-placeholder-color: lighten($gray-600, 15%) !default;
$input-height-border: $input-border-width * 2 !default;
$input-height-inner: ($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2) !default;
$input-height-inner-half: calc(#{$input-line-height * .5em} + #{$input-padding-y}) !default;
$input-height-inner-quarter: calc(#{$input-line-height * .25em} + #{$input-padding-y / 2}) !default;
$input-height: calc(#{$input-height-inner} + #{$input-height-border}) !default;
$input-height-inner-sm: ($font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2) !default;
$input-height-sm: calc(#{$input-height-inner-sm} + #{$input-height-border}) !default;
$input-height-inner-lg: ($font-size-lg * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2) !default;
$input-height-lg: calc(#{$input-height-inner-lg} + #{$input-height-border}) !default;
$input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
$form-text-margin-top: .25rem !default;
$form-check-input-gutter: 1.25rem !default;
$form-check-input-margin-y: .3rem !default;
$form-check-input-margin-x: .25rem !default;
$form-check-inline-margin-x: .75rem !default;
$form-check-inline-input-margin-x: .3125rem !default;
$form-group-margin-bottom: 1rem !default;
$input-group-addon-color: $input-color !default;
$input-group-addon-bg: $gray-200 !default;
$input-group-addon-border-color: $input-border-color !default;
$custom-control-gutter: .5rem !default;
$custom-control-spacer-x: 1rem !default;
$custom-control-indicator-size: 1rem !default;
$custom-control-indicator-bg: $gray-300 !default;
$custom-control-indicator-bg-size: 50% 50% !default;
$custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba($black, .1) !default;
$custom-control-indicator-disabled-bg: $gray-200 !default;
$custom-control-label-disabled-color: $gray-600 !default;
$custom-control-indicator-checked-color: $component-active-color !default;
$custom-control-indicator-checked-bg: $component-active-bg !default;
$custom-control-indicator-checked-disabled-bg: rgba(theme-color("primary"), .5) !default;
$custom-control-indicator-checked-box-shadow: none !default;
$custom-control-indicator-focus-box-shadow: 0 0 0 1px $body-bg, $input-btn-focus-box-shadow !default;
$custom-control-indicator-active-color: $component-active-color !default;
$custom-control-indicator-active-bg: lighten($component-active-bg, 35%) !default;
$custom-control-indicator-active-box-shadow: none !default;
$custom-checkbox-indicator-border-radius: $border-radius !default;
$custom-checkbox-indicator-icon-checked: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"), "#", "%23") !default;
$custom-checkbox-indicator-indeterminate-bg: $component-active-bg !default;
$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default;
$custom-checkbox-indicator-icon-indeterminate: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/%3E%3C/svg%3E"), "#", "%23") !default;
$custom-checkbox-indicator-indeterminate-box-shadow: none !default;
$custom-radio-indicator-border-radius: 50% !default;
$custom-radio-indicator-icon-checked: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$custom-control-indicator-checked-color}'/%3E%3C/svg%3E"), "#", "%23") !default;
$custom-select-padding-y: .375rem !default;
$custom-select-padding-x: .75rem !default;
$custom-select-height: $input-height !default;
$custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator
$custom-select-line-height: $input-btn-line-height !default;
$custom-select-color: $input-color !default;
$custom-select-disabled-color: $gray-600 !default;
$custom-select-bg: $white !default;
$custom-select-disabled-bg: $gray-200 !default;
$custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions
$custom-select-indicator-color: $gray-800 !default;
$custom-select-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"), "#", "%23") !default;
$custom-select-border-width: $input-btn-border-width !default;
$custom-select-border-color: $input-border-color !default;
$custom-select-border-radius: $border-radius !default;
$custom-select-focus-border-color: $input-focus-border-color !default;
$custom-select-focus-box-shadow: none !default;
$custom-select-font-size-sm: 75% !default;
$custom-select-height-sm: $input-height-sm !default;
$custom-select-font-size-lg: 125% !default;
$custom-select-height-lg: $input-height-lg !default;
$custom-file-height: $input-height !default;
$custom-file-focus-border-color: $input-focus-border-color !default;
$custom-file-focus-box-shadow: $custom-select-focus-box-shadow !default;
$custom-file-padding-y: $input-btn-padding-y !default;
$custom-file-padding-x: $input-btn-padding-x !default;
$custom-file-line-height: $input-btn-line-height !default;
$custom-file-color: $input-color !default;
$custom-file-bg: $input-bg !default;
$custom-file-border-width: $input-btn-border-width !default;
$custom-file-border-color: $input-border-color !default;
$custom-file-border-radius: $input-border-radius !default;
$custom-file-box-shadow: $custom-select-focus-box-shadow !default;
$custom-file-button-color: $custom-file-color !default;
$custom-file-button-bg: $input-group-addon-bg !default;
$custom-file-text: (
en: "Browse"
) !default;
$custom-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-btn-focus-box-shadow !default;
// Form validation
$form-feedback-margin-top: $form-text-margin-top !default;
$form-feedback-font-size: $small-font-size !default;
$form-feedback-valid-color: theme-color("success") !default;
$form-feedback-invalid-color: theme-color("danger") !default;
// Dropdowns
//
// Dropdown menu container and contents.
$dropdown-min-width: 10rem !default;
$dropdown-padding-y: .5rem !default;
$dropdown-spacer: .125rem !default;
$dropdown-bg: $white !default;
$dropdown-border-color: rgba($black, .15) !default;
$dropdown-border-radius: $border-radius !default;
$dropdown-border-width: $border-width !default;
$dropdown-divider-bg: $gray-200 !default;
$dropdown-box-shadow: 0 .5rem 1rem rgba($black, .175) !default;
$dropdown-link-color: $gray-900 !default;
$dropdown-link-hover-color: darken($gray-900, 5%) !default;
$dropdown-link-hover-bg: $gray-100 !default;
$dropdown-link-active-color: $component-active-color !default;
$dropdown-link-active-bg: $component-active-bg !default;
$dropdown-link-disabled-color: $gray-600 !default;
$dropdown-item-padding-y: .25rem !default;
$dropdown-item-padding-x: 1rem !default;
$dropdown-header-color: $gray-600 !default;
// Z-index master list
//
// Warning: Avoid customizing these values. They're used for a bird's eye view
// of components dependent on the z-axis and are designed to all work together.
$zindex-dropdown: 1000 !default;
$zindex-sticky: 1020 !default;
$zindex-fixed: 1030 !default;
$zindex-modal-backdrop: 1040 !default;
$zindex-modal: 1050 !default;
$zindex-popover: 1060 !default;
$zindex-tooltip: 1070 !default;
// Navs
$nav-link-padding-y: .5rem !default;
$nav-link-padding-x: 1rem !default;
$nav-link-disabled-color: $gray-600 !default;
$nav-tabs-border-color: $gray-300 !default;
$nav-tabs-border-width: $border-width !default;
$nav-tabs-border-radius: $border-radius !default;
$nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color !default;
$nav-tabs-link-active-color: $gray-700 !default;
$nav-tabs-link-active-bg: $body-bg !default;
$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;
$nav-pills-border-radius: $border-radius !default;
$nav-pills-link-active-color: $component-active-color !default;
$nav-pills-link-active-bg: $component-active-bg !default;
// Navbar
$navbar-padding-y: ($spacer / 2) !default;
$navbar-padding-x: ($spacer / 2) !default;
$navbar-nav-link-padding-x: 1rem !default;
$navbar-brand-font-size: $font-size-lg !default;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
$nav-link-height: ($font-size-base * $line-height-base + $nav-link-padding-y * 2) !default;
$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;
$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) / 2 !default;
$navbar-toggler-padding-y: .25rem !default;
$navbar-toggler-padding-x: .75rem !default;
$navbar-toggler-font-size: $font-size-lg !default;
$navbar-toggler-border-radius: $btn-border-radius !default;
$navbar-dark-color: rgba($white, .75) !default;
$navbar-dark-hover-color: rgba($white, 1) !default;
$navbar-dark-active-color: $white !default;
$navbar-dark-disabled-color: rgba($white, .25) !default;
$navbar-dark-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
$navbar-dark-toggler-border-color: rgba($white, .1) !default;
$navbar-light-color: rgba($black, .5) !default;
$navbar-light-hover-color: rgba($black, .7) !default;
$navbar-light-active-color: rgba($black, .9) !default;
$navbar-light-disabled-color: rgba($black, .3) !default;
$navbar-light-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
$navbar-light-toggler-border-color: rgba($black, .1) !default;
// Pagination
$pagination-padding-y: .5rem !default;
$pagination-padding-x: .75rem !default;
$pagination-padding-y-sm: .25rem !default;
$pagination-padding-x-sm: .5rem !default;
$pagination-padding-y-lg: .75rem !default;
$pagination-padding-x-lg: 1.5rem !default;
$pagination-line-height: 1.25 !default;
$pagination-color: $link-color !default;
$pagination-bg: $white !default;
$pagination-border-width: $border-width !default;
$pagination-border-color: $gray-300 !default;
$pagination-focus-box-shadow: $input-btn-focus-box-shadow !default;
$pagination-hover-color: $link-hover-color !default;
$pagination-hover-bg: $gray-200 !default;
$pagination-hover-border-color: $gray-300 !default;
$pagination-active-color: $component-active-color !default;
$pagination-active-bg: $component-active-bg !default;
$pagination-active-border-color: $pagination-active-bg !default;
$pagination-disabled-color: $gray-600 !default;
$pagination-disabled-bg: $white !default;
$pagination-disabled-border-color: $gray-300 !default;
// Jumbotron
$jumbotron-padding: 2rem !default;
$jumbotron-bg: $gray-200 !default;
// Cards
$card-spacer-y: .75rem !default;
$card-spacer-x: 1.25rem !default;
$card-border-width: 0 !default; //$border-width !default;
$card-border-radius: $border-radius !default;
$card-border-color: rgba($black, .125) !default;
$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default;
$card-cap-bg: rgba($black, .03) !default;
$card-bg: $white !default;
$card-img-overlay-padding: 1.25rem !default;
$card-group-margin: ($grid-gutter-width / 2) !default;
$card-deck-margin: $card-group-margin !default;
$card-columns-count: 3 !default;
$card-columns-gap: 1.25rem !default;
$card-columns-margin: $card-spacer-y !default;
// Tooltips
$tooltip-font-size: $font-size-sm !default;
$tooltip-max-width: 200px !default;
$tooltip-color: $white !default;
$tooltip-bg: $black !default;
$tooltip-border-radius: $border-radius !default;
$tooltip-opacity: .9 !default;
$tooltip-padding-y: .25rem !default;
$tooltip-padding-x: .5rem !default;
$tooltip-margin: 0 !default;
$tooltip-arrow-width: .8rem !default;
$tooltip-arrow-height: .4rem !default;
$tooltip-arrow-color: $tooltip-bg !default;
// Form tooltips must come after regular tooltips
$form-feedback-tooltip-padding-y: $tooltip-padding-y !default;
$form-feedback-tooltip-padding-x: $tooltip-padding-x !default;
$form-feedback-tooltip-font-size: $tooltip-font-size !default;
$form-feedback-tooltip-line-height: $line-height-base !default;
$form-feedback-tooltip-opacity: $tooltip-opacity !default;
$form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
// Popovers
$popover-font-size: $font-size-sm !default;
$popover-bg: $white !default;
$popover-max-width: 276px !default;
$popover-border-width: $border-width !default;
$popover-border-color: rgba($black, .2) !default;
$popover-border-radius: $border-radius-lg !default;
$popover-box-shadow: 0 .25rem .5rem rgba($black, .2) !default;
$popover-header-bg: darken($popover-bg, 3%) !default;
$popover-header-color: $headings-color !default;
$popover-header-padding-y: .5rem !default;
$popover-header-padding-x: .75rem !default;
$popover-body-color: $body-color !default;
$popover-body-padding-y: $popover-header-padding-y !default;
$popover-body-padding-x: $popover-header-padding-x !default;
$popover-arrow-width: 1rem !default;
$popover-arrow-height: .5rem !default;
$popover-arrow-color: $popover-bg !default;
$popover-arrow-outer-color: fade-in($popover-border-color, .05) !default;
// Badges
$badge-font-size: 75% !default;
$badge-font-weight: $font-weight-bold !default;
$badge-padding-y: .25em !default;
$badge-padding-x: .4em !default;
$badge-border-radius: $border-radius !default;
$badge-pill-padding-x: .6em !default;
// Use a higher than normal value to ensure completely rounded edges when
// customizing padding or font-size on labels.
$badge-pill-border-radius: 10rem !default;
// Modals
// Padding applied to the modal body
$modal-inner-padding: 1rem !default;
$modal-dialog-margin: .5rem !default;
$modal-dialog-margin-y-sm-up: 1.75rem !default;
$modal-title-line-height: $line-height-base !default;
$modal-content-bg: $white !default;
$modal-content-border-color: rgba($black, .2) !default;
$modal-content-border-width: $border-width !default;
$modal-content-box-shadow-xs: 0 .25rem .5rem rgba($black, .5) !default;
$modal-content-box-shadow-sm-up: 0 .5rem 1rem rgba($black, .5) !default;
$modal-backdrop-bg: $black !default;
$modal-backdrop-opacity: .5 !default;
$modal-header-border-color: $gray-200 !default;
$modal-footer-border-color: $modal-header-border-color !default;
$modal-header-border-width: $modal-content-border-width !default;
$modal-footer-border-width: $modal-header-border-width !default;
$modal-header-padding: 1rem !default;
$modal-lg: 800px !default;
$modal-md: 500px !default;
$modal-sm: 300px !default;
$modal-transition: transform .3s ease-out !default;
// Alerts
//
// Define alert colors, border radius, and padding.
$alert-padding-y: .75rem !default;
$alert-padding-x: 1.25rem !default;
$alert-margin-bottom: 1rem !default;
$alert-border-radius: $border-radius !default;
$alert-link-font-weight: $font-weight-bold !default;
$alert-border-width: $border-width !default;
$alert-bg-level: -10 !default;
$alert-border-level: -9 !default;
$alert-color-level: 6 !default;
// Progress bars
$progress-height: 1rem !default;
$progress-font-size: ($font-size-base * .75) !default;
$progress-bg: $gray-200 !default;
$progress-border-radius: $border-radius !default;
$progress-box-shadow: inset 0 .1rem .1rem rgba($black, .1) !default;
$progress-bar-color: $white !default;
$progress-bar-bg: theme-color("primary") !default;
$progress-bar-animation-timing: 1s linear infinite !default;
$progress-bar-transition: width .6s ease !default;
// List group
$list-group-bg: $white !default;
$list-group-border-color: rgba($black, .125) !default;
$list-group-border-width: $border-width !default;
$list-group-border-radius: $border-radius !default;
$list-group-item-padding-y: .75rem !default;
$list-group-item-padding-x: 1.25rem !default;
$list-group-hover-bg: $gray-100 !default;
$list-group-active-color: $component-active-color !default;
$list-group-active-bg: $component-active-bg !default;
$list-group-active-border-color: $list-group-active-bg !default;
$list-group-disabled-color: $gray-600 !default;
$list-group-disabled-bg: $list-group-bg !default;
$list-group-action-color: $gray-700 !default;
$list-group-action-hover-color: $list-group-action-color !default;
$list-group-action-active-color: $body-color !default;
$list-group-action-active-bg: $gray-200 !default;
// Image thumbnails
$thumbnail-padding: .25rem !default;
$thumbnail-bg: $body-bg !default;
$thumbnail-border-width: $border-width !default;
$thumbnail-border-color: $gray-300 !default;
$thumbnail-border-radius: $border-radius !default;
$thumbnail-box-shadow: 0 1px 2px rgba($black, .075) !default;
// Figures
$figure-caption-font-size: 90% !default;
$figure-caption-color: $gray-600 !default;
// Breadcrumbs
$breadcrumb-padding-y: .75rem !default;
$breadcrumb-padding-x: 1rem !default;
$breadcrumb-item-padding: .5rem !default;
$breadcrumb-margin-bottom: 1rem !default;
$breadcrumb-bg: $gray-200 !default;
$breadcrumb-divider-color: $gray-600 !default;
$breadcrumb-active-color: $gray-600 !default;
$breadcrumb-divider: "/" !default;
// Carousel
$carousel-control-color: $white !default;
$carousel-control-width: 15% !default;
$carousel-control-opacity: .5 !default;
$carousel-indicator-width: 30px !default;
$carousel-indicator-height: 3px !default;
$carousel-indicator-spacer: 3px !default;
$carousel-indicator-active-bg: $white !default;
$carousel-caption-width: 70% !default;
$carousel-caption-color: $white !default;
$carousel-control-icon-width: 20px !default;
$carousel-control-prev-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"), "#", "%23") !default;
$carousel-control-next-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"), "#", "%23") !default;
$carousel-transition: transform .6s ease !default;
// Close
$close-font-size: $font-size-base * 1.5 !default;
$close-font-weight: $font-weight-bold !default;
$close-color: $black !default;
$close-text-shadow: 0 1px 0 $white !default;
// Code
$code-font-size: 87.5% !default;
$code-color: $pink !default;
$kbd-padding-y: .2rem !default;
$kbd-padding-x: .4rem !default;
$kbd-font-size: $code-font-size !default;
$kbd-color: $white !default;
$kbd-bg: $gray-900 !default;
$pre-color: $gray-900 !default;
$pre-scrollable-max-height: 340px !default;
// Printing
$print-page-size: a3 !default;
$print-body-min-width: map-get($grid-breakpoints, "lg") !default;

View File

@@ -0,0 +1,76 @@
//
// Component: Brand
//
.brand-link {
$brand-link-padding-y: $navbar-brand-padding-y + $navbar-padding-y;
display: block;
font-size: $navbar-brand-font-size;
line-height: $line-height-lg;
padding: $brand-link-padding-y $sidebar-padding-x;
transition: width $transition-speed $transition-fn;
white-space: nowrap;
&:hover {
color: $white;
text-decoration: none;
}
.text-sm & {
font-size: inherit;
}
[class*='sidebar-dark'] & {
border-bottom: 1px solid lighten($dark, 10%);
color: rgba($white, .8);
}
[class*='sidebar-light'] & {
border-bottom: 1px solid $gray-300;
color: rgba($black, .8);
}
.brand-image {
float: left;
line-height: .8;
margin-left: .8rem;
margin-right: .5rem;
margin-top: -3px;
max-height: 33px;
width: auto;
}
.brand-image-xs {
float: left;
line-height: .8;
margin-top: -.1rem;
max-height: 33px;
width: auto;
}
.brand-image-xl {
line-height: .8;
max-height: 40px;
width: auto;
}
&.text-sm,
.text-sm & {
.brand-image {
height: 29px;
margin-bottom: -.25rem;
margin-left: .95rem;
margin-top: -.25rem;
}
.brand-image-xs {
margin-top: -.2rem;
max-height: 29px;
}
.brand-image-xl {
margin-top: -.225rem;
max-height: 38px;
}
}
}

View File

@@ -0,0 +1,108 @@
//
// Component: Button
//
.btn {
&.disabled,
&:disabled {
cursor: not-allowed;
}
// Flat buttons
&.btn-flat {
@include border-radius(0);
border-width: 1px;
box-shadow: none;
}
// input file btn
&.btn-file {
overflow: hidden;
position: relative;
> input[type='file'] {
background: $white;
cursor: inherit;
display: block;
font-size: 100px;
min-height: 100%;
min-width: 100%;
opacity: 0;
outline: none;
position: absolute;
right: 0;
text-align: right;
top: 0;
}
}
.text-sm & {
font-size: $font-size-sm !important;
}
}
// Button color variations
.btn-default {
background-color: $button-default-background-color;
border-color: $button-default-border-color;
color: $button-default-color;
&:hover,
&:active,
&.hover {
background-color: darken($button-default-background-color, 5%);
color: darken($button-default-color, 10%);
}
}
// Application buttons
.btn-app {
@include border-radius(3px);
background-color: $button-default-background-color;
border: 1px solid $button-default-border-color;
color: $gray-600;
font-size: 12px;
height: 60px;
margin: 0 0 10px 10px;
min-width: 80px;
padding: 15px 5px;
position: relative;
text-align: center;
// Icons within the btn
> .fa,
> .fas,
> .far,
> .fab,
> .glyphicon,
> .ion {
display: block;
font-size: 20px;
}
&:hover {
background: $button-default-background-color;
border-color: darken($button-default-border-color, 20%);
color: $button-default-color;
}
&:active,
&:focus {
@include box-shadow(inset 0 3px 5px rgba($black, 0.125));
}
// The badge
> .badge {
font-size: 10px;
font-weight: 400;
position: absolute;
right: -10px;
top: -3px;
}
}
// Extra Button Size
.btn-xs {
@include button-size($button-padding-y-xs, $button-padding-x-xs, $button-font-size-xs, $button-line-height-xs, $button-border-radius-xs);
}

View File

@@ -0,0 +1,51 @@
//
// Component: Callout
//
// Base styles (regardless of theme)
.callout {
@if $enable-rounded {
@include border-radius($border-radius);
}
@if $enable-shadows {
box-shadow: map-get($elevations, 1);
} @else {
border: 1px solid $gray-300;
}
background-color: $white;
border-left: 5px solid $gray-200;
margin-bottom: map-get($spacers, 3);
padding: 1rem;
a {
color: $gray-700;
text-decoration: underline;
&:hover {
color: $gray-200;
}
}
p:last-child {
margin-bottom: 0;
}
// Themes for different contexts
&.callout-danger {
border-left-color: darken(theme-color('danger'), 10%);
}
&.callout-warning {
border-left-color: darken(theme-color('warning'), 10%);
}
&.callout-info {
border-left-color: darken(theme-color('info'), 10%);
}
&.callout-success {
border-left-color: darken(theme-color('success'), 10%);
}
}

View File

@@ -0,0 +1,474 @@
//
// Component: Cards
//
// Color variants
@each $name, $color in $theme-colors {
@include cards-variant($name, $color);
}
@each $name, $color in $colors {
@include cards-variant($name, $color);
}
.card {
@include box-shadow($card-shadow);
margin-bottom: map-get($spacers, 3);
&.bg-dark {
.card-header {
border-color: $card-dark-border-color;
}
&,
.card-body {
color: $white;
}
}
&.maximized-card {
height: 100% !important;
left: 0;
max-height: 100% !important;
max-width: 100% !important;
position: fixed;
top: 0;
width: 100% !important;
z-index: 9999;
&.was-collapsed .card-body {
display: block !important;
}
[data-widget='collapse'] {
display: none;
}
.card-header,
.card-footer {
@include border-radius(0 !important);
}
}
// collapsed mode
&.collapsed-card {
.card-body,
.card-footer {
display: none;
}
}
.nav.flex-column {
> li {
border-bottom: 1px solid $card-border-color;
margin: 0;
&:last-of-type {
border-bottom: 0;
}
}
}
// fixed height to 300px
&.height-control {
.card-body {
max-height: 300px;
overflow: auto;
}
}
.border-right {
border-right: 1px solid $card-border-color;
}
.border-left {
border-left: 1px solid $card-border-color;
}
&.card-tabs {
&:not(.card-outline) {
& > .card-header {
border-bottom: 0;
.nav-item {
&:first-child .nav-link {
margin-left: -1px;
}
}
}
}
&.card-outline {
.nav-item {
border-bottom: 0;
&:first-child .nav-link {
border-left: 0;
margin-left: 0;
}
}
}
.card-tools {
margin: .3rem .5rem;
}
&:not(.expanding-card).collapsed-card {
.card-header {
border-bottom: 0;
.nav-tabs {
border-bottom: 0;
.nav-item {
margin-bottom: 0;
}
}
}
}
&.expanding-card {
.card-header {
.nav-tabs {
.nav-item {
margin-bottom: -1px;
}
}
}
}
}
&.card-outline-tabs {
border-top: 0;
.card-header {
.nav-item {
&:first-child .nav-link {
border-left: 0;
margin-left: 0;
}
}
a {
border-top: 3px solid transparent;
&:hover {
border-top: 3px solid $nav-tabs-border-color;
}
&.active {
&:hover {
margin-top: 0;
}
}
}
}
.card-tools {
margin: .5rem .5rem .3rem;
}
&:not(.expanding-card).collapsed-card .card-header {
border-bottom: 0;
.nav-tabs {
border-bottom: 0;
.nav-item {
margin-bottom: 0;
}
}
}
&.expanding-card {
.card-header {
.nav-tabs {
.nav-item {
margin-bottom: -1px;
}
}
}
}
}
}
// Maximized Card Body Scroll fix
html.maximized-card {
overflow: hidden;
}
// Add clearfix to header, body and footer
.card-header,
.card-body,
.card-footer {
@include clearfix;
}
// Box header
.card-header {
background-color: transparent;
border-bottom: 1px solid $card-border-color;
padding: (($card-spacer-y / 2) * 2) $card-spacer-x;
position: relative;
@if $enable-rounded {
@include border-top-radius($border-radius);
}
.collapsed-card & {
border-bottom: 0;
}
> .card-tools {
float: right;
margin-right: -$card-spacer-x / 2;
.input-group,
.nav,
.pagination {
margin-bottom: -$card-spacer-y / 2.5;
margin-top: -$card-spacer-y / 2.5;
}
[data-toggle='tooltip'] {
position: relative;
}
}
}
.card-title {
float: left;
font-size: $card-title-font-size;
font-weight: $card-title-font-weight;
margin: 0;
}
.card-text {
clear: both;
}
// Box Tools Buttons
.btn-tool {
background: transparent;
color: $gray-500;
font-size: $font-size-sm;
margin: -(($card-spacer-y / 2) * 2) 0;
padding: .25rem .5rem;
.btn-group.show &,
&:hover {
color: $gray-700;
}
.show &,
&:focus {
box-shadow: none !important;
}
}
.text-sm {
.card-title {
font-size: $card-title-font-size-sm;
}
.nav-link {
padding: $card-nav-link-padding-sm-y $card-nav-link-padding-sm-x;
}
}
// Box Body
.card-body {
// @include border-radius-sides(0, 0, $border-radius, $border-radius);
// .no-header & {
// @include border-top-radius($border-radius);
// }
// Tables within the box body
> .table {
margin-bottom: 0;
> thead > tr > th,
> thead > tr > td {
border-top-width: 0;
}
}
// Calendar within the box body
.fc {
margin-top: 5px;
}
.full-width-chart {
margin: -19px;
}
&.p-0 .full-width-chart {
margin: -9px;
}
}
.chart-legend {
@include list-unstyled;
margin: 10px 0;
> li {
@media (max-width: map-get($grid-breakpoints, sm)) {
float: left;
margin-right: 10px;
}
}
}
// Comment Box
.card-comments {
background: $gray-100;
.card-comment {
@include clearfix;
border-bottom: 1px solid $gray-200;
padding: 8px 0;
&:last-of-type {
border-bottom: 0;
}
&:first-of-type {
padding-top: 0;
}
img {
height: $card-img-size;
width: $card-img-size;
float: left;
}
}
.comment-text {
color: lighten($gray-700, 20%);
margin-left: 40px;
}
.username {
color: $gray-700;
display: block;
font-weight: 600;
}
.text-muted {
font-size: 12px;
font-weight: 400;
}
}
// Widgets
//-----------
// Widget: TODO LIST
.todo-list {
list-style: none;
margin: 0;
overflow: auto;
padding: 0;
// Todo list element
> li {
@include border-radius(2px);
background: $gray-100;
border-left: 2px solid $gray-200;
color: $gray-700;
margin-bottom: 2px;
padding: 10px;
&:last-of-type {
margin-bottom: 0;
}
> input[type='checkbox'] {
margin: 0 10px 0 5px;
}
.text {
display: inline-block;
font-weight: 600;
margin-left: 5px;
}
// Time labels
.badge {
font-size: .7rem;
margin-left: 10px;
}
// Tools and options box
.tools {
color: theme-color('danger');
display: none;
float: right;
// icons
> .fa,
> .fas,
> .far,
> .fab,
> .glyphicon,
> .ion {
cursor: pointer;
margin-right: 5px;
}
}
&:hover .tools {
display: inline-block;
}
&.done {
color: darken($gray-500, 25%);
.text {
font-weight: 500;
text-decoration: line-through;
}
.badge {
background: $gray-500 !important;
}
}
}
// Color variants
@each $name, $color in $theme-colors {
.#{$name} {
border-left-color: $color;
}
}
@each $name, $color in $colors {
.#{$name} {
border-left-color: $color;
}
}
.handle {
cursor: move;
display: inline-block;
margin: 0 5px;
}
}
// END TODO WIDGET
// Input in box
.card-input {
max-width: 200px;
}
// Nav Tabs override
.card-default {
.nav-item {
&:first-child .nav-link {
border-left: 0;
}
}
}

View File

@@ -0,0 +1,24 @@
//
// Component: Carousel
//
.carousel-control {
&.left,
&.right {
background-image: none;
}
> .fa,
> .fas,
> .far,
> .fab,
> .glyphicon,
> .ion {
display: inline-block;
font-size: 40px;
margin-top: -20px;
position: absolute;
top: 50%;
z-index: 5;
}
}

View File

@@ -0,0 +1,91 @@
//
// Misc: Colors
//
// Background colors (theme colors)
@each $name, $color in $theme-colors {
@include background-variant($name, $color);
}
// Background colors (colors)
@each $name, $color in $colors {
@include background-variant($name, $color);
}
.bg-gray {
background-color: $gray-500;
color: color-yiq($gray-500);
}
.bg-gray-light {
background-color: lighten($gray-200, 3%);
color: color-yiq(lighten($gray-200, 3%)) !important;
}
.bg-black {
background-color: $black;
color: color-yiq($black) !important;
}
.bg-white {
background-color: $white;
color: color-yiq($white) !important;
}
// Gradient Background colors (theme colors)
@each $name, $color in $theme-colors {
@include background-gradient-variant($name, $color);
}
// Gradient Background colors (colors)
@each $name, $color in $colors {
@include background-gradient-variant($name, $color);
}
// Backgrund Color Disabled
[class^='bg-'].disabled {
opacity: .65;
}
// Text muted hover
a.text-muted:hover {
color: theme-color(primary) !important;
}
// Link Styles
.link-muted {
color: darken($gray-500, 30%);
&:hover,
&:focus {
color: darken($gray-500, 40%);
}
}
.link-black {
color: $gray-600;
&:hover,
&:focus {
color: lighten($gray-500, 20%);
}
}
// Accent colors (theme colors)
@each $name, $color in $theme-colors {
@include accent-variant($name, $color);
}
// Accent colors (colors)
@each $name, $color in $colors {
@include accent-variant($name, $color);
}
// Accent button override fix
[class*="accent-"] {
@each $name, $color in $theme-colors {
a.btn-#{$name} {
color: color-yiq($color);
}
}
}

View File

@@ -0,0 +1,178 @@
//
// Component: Control Sidebar
//
html.control-sidebar-animate {
overflow-x: hidden;
}
.control-sidebar {
bottom: $main-footer-height;
position: absolute;
top: $main-header-height;
z-index: $zindex-control-sidebar;
&,
&::before {
bottom: $main-footer-height;
display: none;
right: -$control-sidebar-width;
width: $control-sidebar-width;
@include transition(right $transition-speed $transition-fn, display $transition-speed $transition-fn);
}
&::before {
content: '';
display: block;
position: fixed;
top: 0;
z-index: -1;
}
}
body.text-sm {
.control-sidebar {
bottom: $main-footer-height-sm;
top: $main-header-height-sm;
}
}
.main-header.text-sm ~ .control-sidebar {
top: $main-header-height-sm;
}
.main-footer.text-sm ~ .control-sidebar {
bottom: $main-footer-height-sm;
}
.control-sidebar-push-slide {
.content-wrapper,
.main-footer {
@include transition(margin-right $transition-speed $transition-fn);
}
}
// Control sidebar open state
.control-sidebar-open {
.control-sidebar {
display: block;
&,
&::before {
right: 0;
}
}
&.control-sidebar-push,
&.control-sidebar-push-slide {
.content-wrapper,
.main-footer {
margin-right: $control-sidebar-width;
}
}
}
// Control sidebar slide over content state
.control-sidebar-slide-open {
.control-sidebar {
display: block;
&,
&::before {
right: 0;
@include transition(right $transition-speed $transition-fn, display $transition-speed $transition-fn);
}
}
&.control-sidebar-push,
&.control-sidebar-push-slide {
.content-wrapper,
.main-footer {
margin-right: $control-sidebar-width;
}
}
}
// Dark skin
.control-sidebar-dark {
&,
a,
.nav-link {
color: $sidebar-dark-color;
}
// Background
& {
background: $sidebar-dark-bg;
}
a:hover {
color: $sidebar-dark-hover-color;
}
// Headers and labels
h1,
h2,
h3,
h4,
h5,
h6,
label {
color: $sidebar-dark-hover-color;
}
// Tabs
.nav-tabs {
background-color: $sidebar-dark-hover-bg;
border-bottom: 0;
margin-bottom: 5px;
.nav-item {
margin: 0;
}
.nav-link {
border-radius: 0;
padding: 10px 20px;
position: relative;
text-align: center;
&,
&:hover,
&:active,
&:focus,
&.active {
border: 0;
}
&:hover,
&:active,
&:focus,
&.active {
border-bottom-color: transparent;
border-left-color: transparent;
border-top-color: transparent;
color: $sidebar-dark-hover-color;
}
&.active {
background-color: $sidebar-dark-bg;
}
}
}
.tab-pane {
padding: 10px 15px;
}
}
// Light skin
.control-sidebar-light {
color: lighten($sidebar-light-color, 10%);
// Background
& {
background: $sidebar-light-bg;
border-left: $main-header-bottom-border;
}
}

View File

@@ -0,0 +1,224 @@
//
// Component: Direct Chat
//
.direct-chat {
.card-body {
overflow-x: hidden;
padding: 0;
position: relative;
}
&.chat-pane-open {
.direct-chat-contacts {
@include translate(0, 0);
}
}
&.timestamp-light {
.direct-chat-timestamp {
color: lighten(color-yiq($yiq-text-light), 10%);
}
}
&.timestamp-dark {
.direct-chat-timestamp {
color: darken(color-yiq($yiq-text-dark), 20%);
}
}
}
.direct-chat-messages {
@include translate(0, 0);
height: 250px;
overflow: auto;
padding: 10px;
}
.direct-chat-msg,
.direct-chat-text {
display: block;
}
.direct-chat-msg {
@include clearfix;
margin-bottom: 10px;
}
.direct-chat-messages,
.direct-chat-contacts {
transition: transform .5s ease-in-out;
}
.direct-chat-text {
@if $enable-rounded {
@include border-radius($border-radius-lg);
}
background: $direct-chat-default-msg-bg;
border: 1px solid $direct-chat-default-msg-border-color;
color: $direct-chat-default-font-color;
margin: 5px 0 0 50px;
padding: 5px 10px;
position: relative;
//Create the arrow
&::after,
&::before {
border: solid transparent;
border-right-color: $direct-chat-default-msg-border-color;
content: ' ';
height: 0;
pointer-events: none;
position: absolute;
right: 100%;
top: 15px;
width: 0;
}
&::after {
border-width: 5px;
margin-top: -5px;
}
&::before {
border-width: 6px;
margin-top: -6px;
}
.right & {
margin-left: 0;
margin-right: 50px;
&::after,
&::before {
border-left-color: $direct-chat-default-msg-border-color;
border-right-color: transparent;
left: 100%;
right: auto;
}
}
}
.direct-chat-img {
@include border-radius(50%);
float: left;
height: 40px;
width: 40px;
.right & {
float: right;
}
}
.direct-chat-infos {
display: block;
font-size: $font-size-sm;
margin-bottom: 2px;
}
.direct-chat-name {
font-weight: 600;
}
.direct-chat-timestamp {
color: darken($gray-500, 25%);
}
//Direct chat contacts pane
.direct-chat-contacts-open {
.direct-chat-contacts {
@include translate(0, 0);
}
}
.direct-chat-contacts {
@include translate(101%, 0);
background: $dark;
bottom: 0;
color: $white;
height: 250px;
overflow: auto;
position: absolute;
top: 0;
width: 100%;
}
.direct-chat-contacts-light {
background: $light;
.contacts-list-name {
color: $gray-700;
}
.contacts-list-date {
color: $gray-600;
}
.contacts-list-msg {
color: darken($gray-600, 10%);
}
}
//Contacts list -- for displaying contacts in direct chat contacts pane
.contacts-list {
@include list-unstyled;
> li {
@include clearfix;
border-bottom: 1px solid rgba($black, 0.2);
margin: 0;
padding: 10px;
&:last-of-type {
border-bottom: 0;
}
}
}
.contacts-list-img {
@include border-radius(50%);
float: left;
width: 40px;
}
.contacts-list-info {
color: $white;
margin-left: 45px;
}
.contacts-list-name,
.contacts-list-status {
display: block;
}
.contacts-list-name {
font-weight: 600;
}
.contacts-list-status {
font-size: $font-size-sm;
}
.contacts-list-date {
color: $gray-400;
font-weight: normal;
}
.contacts-list-msg {
color: darken($gray-400, 10%);
}
// Color variants
@each $name, $color in $theme-colors {
.direct-chat-#{$name} {
@include direct-chat-variant($color);
}
}
@each $name, $color in $colors {
.direct-chat-#{$name} {
@include direct-chat-variant($color);
}
}

View File

@@ -0,0 +1,272 @@
//
// Component: Dropdown
//
// General Dropdown Rules
//.dropdown-item {
// &:first-of-type {
// @include border-top-radius($border-radius);
// }
// &:last-of-type {
// @include border-bottom-radius($border-radius);
// }
//}
.text-sm {
.dropdown-menu {
font-size: $font-size-sm !important;
}
.dropdown-toggle::after {
vertical-align: .2rem
}
}
.dropdown-item-title {
font-size: $font-size-base;
margin: 0;
}
.dropdown-icon {
&::after {
margin-left: 0;
}
}
// Dropdown Sizes
.dropdown-menu-lg {
max-width: 300px;
min-width: 280px;
padding: 0;
.dropdown-divider {
margin: 0;
}
.dropdown-item {
padding: $dropdown-padding-y $dropdown-item-padding-x;
}
p {
margin: 0;
white-space: normal;
}
}
// Dropdown Submenu
.dropdown-submenu {
position: relative;
& > a:after {
@include caret-right;
float: right;
margin-left: .5rem;
margin-top: .5rem;
}
& > .dropdown-menu {
left: 100%;
margin-left: 0px;
margin-top: 0px;
top: 0;
}
}
// Dropdown Hover
.dropdown-hover {
&:hover,
&.nav-item.dropdown:hover,
.dropdown-submenu:hover,
&.dropdown-submenu:hover {
> .dropdown-menu {
display: block;
}
}
}
// Dropdown Sizes
.dropdown-menu-xl {
max-width: 420px;
min-width: 360px;
padding: 0;
.dropdown-divider {
margin: 0;
}
.dropdown-item {
padding: $dropdown-padding-y $dropdown-item-padding-x;
}
p {
margin: 0;
white-space: normal;
}
}
// Dropdown header and footer
.dropdown-footer,
.dropdown-header {
display: block;
font-size: $font-size-sm;
padding: .5rem $dropdown-item-padding-x;
text-align: center;
}
// Add fade animation to dropdown menus by appending
// the class .animated-dropdown-menu to the .dropdown-menu ul (or ol)
.open:not(.dropup) > .animated-dropdown-menu {
@include animation(flipInX .7s both);
backface-visibility: visible !important;
}
@keyframes flipInX {
0% {
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transition-timing-function: ease-in;
opacity: 0;
}
40% {
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transition-timing-function: ease-in;
}
60% {
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1;
}
80% {
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}
100% {
transform: perspective(400px);
}
}
// Fix dropdown menu in navbars
.navbar-custom-menu > .navbar-nav {
> li {
position: relative;
> .dropdown-menu {
position: absolute;
right: 0;
left: auto;
}
}
}
@include media-breakpoint-down(sm) {
.navbar-custom-menu > .navbar-nav {
float: right;
> li {
position: static;
> .dropdown-menu {
position: absolute;
right: 5%;
left: auto;
border: 1px solid #ddd;
background: $white;
}
}
}
}
// User Menu
.navbar-nav > .user-menu {
> .nav-link:after {
content:none;
}
> .dropdown-menu {
@include border-top-radius(0);
padding: 0;
width: 280px;
&,
> .user-body {
@include border-bottom-radius(4px);
}
// Header menu
> li.user-header {
height: 175px;
padding: 10px;
text-align: center;
// User image
> img {
z-index: 5;
height: 90px;
width: 90px;
border: 3px solid;
border-color: transparent;
border-color: rgba(255, 255, 255, 0.2);
}
> p {
z-index: 5;
font-size: 17px;
//text-shadow: 2px 2px 3px #333333;
margin-top: 10px;
> small {
display: block;
font-size: 12px;
}
}
}
// Menu Body
> .user-body {
@include clearfix;
border-bottom: 1px solid $gray-700;
border-top: 1px solid $gray-300;
padding: 15px;
a {
@include media-breakpoint-up(sm) {
background: $white !important;
color: $gray-700 !important;
}
}
}
// Menu Footer
> .user-footer {
@include clearfix;
background-color: $gray-100;
padding: 10px;
.btn-default {
color: $gray-600;
&:hover {
@include media-breakpoint-up(sm) {
background-color: $gray-100;
}
}
}
}
}
.user-image {
@include media-breakpoint-up(sm) {
float: none;
line-height: 10px;
margin-right: .4rem;
margin-top: -8px;
}
border-radius: 50%;
float: left;
height: $sidebar-user-image-width;
margin-right: 10px;
margin-top: -2px;
width: $sidebar-user-image-width;
}
}

View File

@@ -0,0 +1,14 @@
//
// Component: Elevation
//
.elevation-0 {
box-shadow: none !important;
}
// Background colors (colors)
@each $name, $value in $elevations {
.elevation-#{$name} {
box-shadow: $value !important;
}
}

View File

@@ -0,0 +1,277 @@
//
// Component: Forms
//
.form-group {
&.has-icon {
position: relative;
.form-control {
padding-right: 35px;
}
.form-icon {
background-color: transparent;
border: 0;
cursor: pointer;
font-size: 1rem;
// margin-top: -3px;
padding: $input-btn-padding-y $input-btn-padding-x;
position: absolute;
right: 3px;
top: 0;
}
}
}
// Button groups
.btn-group-vertical {
.btn {
&.btn-flat:first-of-type,
&.btn-flat:last-of-type {
@include border-radius(0);
}
}
}
// Support icons in form-control
.form-control-feedback {
&.fa,
&.fas,
&.far,
&.fab,
&.glyphicon,
&.ion {
line-height: $input-height;
}
}
.input-lg + .form-control-feedback,
.input-group-lg + .form-control-feedback {
&.fa,
&.fas,
&.far,
&.fab,
&.glyphicon,
&.ion {
line-height: $input-height-lg;
}
}
.form-group-lg {
.form-control + .form-control-feedback {
&.fa,
&.fas,
&.far,
&.fab,
&.glyphicon,
&.ion {
line-height: $input-height-lg;
}
}
}
.input-sm + .form-control-feedback,
.input-group-sm + .form-control-feedback {
&.fa,
&.fas,
&.far,
&.fab,
&.glyphicon,
&.ion {
line-height: $input-height-sm;
}
}
.form-group-sm {
.form-control + .form-control-feedback {
&.fa,
&.fas,
&.far,
&.fab,
&.glyphicon,
&.ion {
line-height: $input-height-sm;
}
}
}
label:not(.form-check-label):not(.custom-file-label) {
font-weight: $font-weight-bold;
}
.warning-feedback {
@include font-size($form-feedback-font-size);
color: theme-color('warning');
display: none;
margin-top: $form-feedback-margin-top;
width: 100%;
}
.warning-tooltip {
@include border-radius($form-feedback-tooltip-border-radius);
@include font-size($form-feedback-tooltip-font-size);
background-color: rgba(theme-color('warning'), $form-feedback-tooltip-opacity);
color: color-yiq(theme-color('warning'));
display: none;
line-height: $form-feedback-tooltip-line-height;
margin-top: .1rem;
max-width: 100%; // Contain to parent when possible
padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
position: absolute;
top: 100%;
z-index: 5;
}
.form-control {
&.is-warning {
border-color: theme-color('warning');
@if $enable-validation-icons {
// padding-right: $input-height-inner;
// background-image: none;
// background-repeat: no-repeat;
// background-position: center right $input-height-inner-quarter;
// background-size: $input-height-inner-half $input-height-inner-half;
}
&:focus {
border-color: theme-color('warning');
box-shadow: 0 0 0 $input-focus-width rgba(theme-color('warning'), .25);
}
~ .warning-feedback,
~ .warning-tooltip {
display: block;
}
}
}
// stylelint-disable-next-line selector-no-qualifying-type
textarea.form-control {
&.is-warning {
@if $enable-validation-icons {
padding-right: $input-height-inner;
background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
}
}
}
.custom-select {
&.is-warning {
border-color: theme-color('warning');
@if $enable-validation-icons {
// padding-right: $custom-select-feedback-icon-padding-right;
// background: $custom-select-background, none $custom-select-bg no-repeat $custom-select-feedback-icon-position / $custom-select-feedback-icon-size;
}
&:focus {
border-color: theme-color('warning');
box-shadow: 0 0 0 $input-focus-width rgba(theme-color('warning'), .25);
}
~ .warning-feedback,
~ .warning-tooltip {
display: block;
}
}
}
.form-control-file {
&.is-warning {
~ .warning-feedback,
~ .warning-tooltip {
display: block;
}
}
}
.form-check-input {
&.is-warning {
~ .form-check-label {
color: theme-color('warning');
}
~ .warning-feedback,
~ .warning-tooltip {
display: block;
}
}
}
.custom-control-input.is-warning {
~ .custom-control-label {
color: theme-color('warning');
&::before {
border-color: theme-color('warning');
}
}
~ .warning-feedback,
~ .warning-tooltip {
display: block;
}
&:checked {
~ .custom-control-label::before {
@include gradient-bg(lighten(theme-color('warning'), 10%));
border-color: lighten(theme-color('warning'), 10%);
}
}
&:focus {
~ .custom-control-label::before {
box-shadow: 0 0 0 $input-focus-width rgba(theme-color('warning'), .25);
}
&:not(:checked) ~ .custom-control-label::before {
border-color: theme-color('warning');
}
}
}
// custom file
.custom-file-input {
&.is-warning {
~ .custom-file-label {
border-color: theme-color('warning');
}
~ .warning-feedback,
~ .warning-tooltip {
display: block;
}
&:focus {
~ .custom-file-label {
border-color: theme-color('warning');
box-shadow: 0 0 0 $input-focus-width rgba(theme-color('warning'), .25);
}
}
}
}
// custom switch color variations
.custom-switch {
@each $name, $color in $theme-colors {
@include custom-switch-variant($name, $color);
}
@each $name, $color in $colors {
@include custom-switch-variant($name, $color);
}
}
// custom range color variations
.custom-range {
@each $name, $color in $theme-colors {
@include custom-range-variant($name, $color);
}
@each $name, $color in $colors {
@include custom-range-variant($name, $color);
}
}

View File

@@ -0,0 +1,140 @@
//
// Component: Info Box
//
.info-box {
@include box-shadow($card-shadow);
@include border-radius($border-radius);
background: $white;
display: flex;
margin-bottom: map-get($spacers, 3);
min-height: 80px;
padding: .5rem;
position: relative;
.progress {
background-color: rgba($black, .125);
height: 2px;
margin: 5px 0;
.progress-bar {
background-color: $white;
}
}
.info-box-icon {
@if $enable-rounded {
border-radius: $border-radius;
}
align-items: center;
display: flex;
font-size: 1.875rem;
justify-content: center;
text-align: center;
width: 70px;
> img {
max-width: 100%;
}
}
.info-box-content {
flex: 1;
padding: 5px 10px;
}
.info-box-number {
display: block;
font-weight: $font-weight-bold;
}
.progress-description,
.info-box-text {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@each $name, $color in $theme-colors {
.info-box {
.bg-#{$name},
.bg-gradient-#{$name} {
color: color-yiq($color);
.progress-bar {
background-color: color-yiq($color);
}
}
}
}
.info-box-more {
display: block;
}
.progress-description {
margin: 0;
}
@include media-breakpoint-up(md) {
.col-xl-2 &,
.col-lg-2 &,
.col-md-2 & {
.progress-description {
display: none;
}
}
.col-xl-3 &,
.col-lg-3 &,
.col-md-3 & {
.progress-description {
display: none;
}
}
}
@include media-breakpoint-up(lg) {
.col-xl-2 &,
.col-lg-2 &,
.col-md-2 & {
.progress-description {
@include font-size(.75rem);
display: block;
}
}
.col-xl-3 &,
.col-lg-3 &,
.col-md-3 & {
.progress-description {
@include font-size(.75rem);
display: block;
}
}
}
@include media-breakpoint-up(xl) {
.col-xl-2 &,
.col-lg-2 &,
.col-md-2 & {
.progress-description {
@include font-size(1rem);
display: block;
}
}
.col-xl-3 &,
.col-lg-3 &,
.col-md-3 & {
.progress-description {
@include font-size(1rem);
display: block;
}
}
}
}

View File

@@ -0,0 +1,631 @@
//
// Core: Layout
//
html.scroll-smooth {
scroll-behavior: smooth;
}
html,
body,
.wrapper {
min-height: 100%;
}
.wrapper {
position: relative;
& .content-wrapper {
min-height: calc(100vh - #{$main-header-height} - #{$main-footer-height});
}
.layout-boxed & {
@include box-shadow(0 0 10 rgba($black, .3));
&,
&::before {
margin: 0 auto;
max-width: $boxed-layout-max-width;
}
& .main-sidebar {
left: inherit;
}
}
@supports not (-webkit-touch-callout: none) {
.layout-fixed & .sidebar {
height: calc(100vh - (#{$main-header-height-inner} + #{$main-header-bottom-border-width}));
}
.layout-fixed.text-sm & .sidebar {
height: calc(100vh - (#{$main-header-height-sm-inner} + #{$main-header-bottom-border-width}));
}
}
.layout-navbar-fixed.layout-fixed & {
.control-sidebar {
top: $main-header-height;
}
.main-header.text-sm ~ .control-sidebar {
top: $main-header-height-sm;
}
.sidebar {
margin-top: $main-header-height;
}
.brand-link.text-sm ~ .sidebar {
margin-top: $main-header-height-sm;
}
}
.layout-navbar-fixed.layout-fixed.text-sm & {
.control-sidebar {
top: $main-header-height-sm;
}
.sidebar {
margin-top: $main-header-height-sm;
}
}
.layout-navbar-fixed.sidebar-mini.sidebar-collapse &,
.layout-navbar-fixed.sidebar-mini-md.sidebar-collapse & {
.brand-link {
height: $main-header-height;
width: $sidebar-mini-width;
&.text-sm {
height: $main-header-height-sm;
}
}
}
.layout-navbar-fixed.sidebar-mini.sidebar-collapse.text-sm &,
.layout-navbar-fixed.sidebar-mini-md.sidebar-collapse.text-sm & {
.brand-link {
height: $main-header-height-sm;
}
}
body:not(.layout-fixed).layout-navbar-fixed & {
.main-sidebar {
margin-top: calc(#{$main-header-height} / -1);
.sidebar {
margin-top: $main-header-height;
}
}
}
body:not(.layout-fixed).layout-navbar-fixed.text-sm & {
.main-sidebar {
margin-top: calc(#{$main-header-height-sm} / -1);
.sidebar {
margin-top: $main-header-height-sm;
}
}
}
.layout-navbar-fixed & {
.control-sidebar {
top: 0;
}
a.anchor {
display: block;
position: relative;
top: calc((#{$main-header-height-inner} + #{$main-header-bottom-border-width} + (#{$main-header-link-padding-y} * 2)) / -1);
}
.main-sidebar:hover {
.brand-link {
transition: width $transition-speed $transition-fn;
width: $sidebar-width;
}
}
.brand-link {
overflow: hidden;
position: fixed;
top: 0;
transition: width $transition-speed $transition-fn;
width: $sidebar-width;
z-index: $zindex-main-header + 1;
}
// Sidebar variants brand-link fix
@each $name, $color in $theme-colors {
.sidebar-dark-#{$name} .brand-link:not([class*="navbar"]) {
background-color: $sidebar-dark-bg;
}
.sidebar-light-#{$name} .brand-link:not([class*="navbar"]) {
background-color: $sidebar-light-bg;
}
}
.content-wrapper {
margin-top: $main-header-height;
}
.main-header.text-sm ~ .content-wrapper {
margin-top: $main-header-height-sm;
}
.main-header {
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: $zindex-main-header - 1;
}
}
.layout-navbar-fixed.text-sm & {
.content-wrapper {
margin-top: $main-header-height-sm;
}
}
.layout-navbar-not-fixed & {
.brand-link {
position: static;
}
.sidebar,
.content-wrapper {
margin-top: 0;
}
.main-header {
position: static;
}
}
.layout-navbar-not-fixed.layout-fixed & {
.sidebar {
margin-top: 0;
}
}
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
.layout#{$infix}-navbar-fixed.layout-fixed & {
.control-sidebar {
top: $main-header-height;
}
.text-sm & .main-header ~ .control-sidebar,
.main-header.text-sm ~ .control-sidebar {
top: $main-header-height-sm;
}
.sidebar {
margin-top: $main-header-height;
}
.text-sm & .brand-link ~ .sidebar,
.brand-link.text-sm ~ .sidebar {
margin-top: $main-header-height-sm;
}
}
.layout#{$infix}-navbar-fixed.layout-fixed.text-sm & {
.control-sidebar {
top: $main-header-height-sm;
}
.sidebar {
margin-top: $main-header-height-sm;
}
}
.layout#{$infix}-navbar-fixed & {
.control-sidebar {
top: 0;
}
a.anchor {
display: block;
position: relative;
top: calc((#{$main-header-height-inner} + #{$main-header-bottom-border-width} + (#{$main-header-link-padding-y} * 2)) / -1);
}
&.sidebar-collapse {
.brand-link {
height: $main-header-height;
transition: width $transition-speed $transition-fn;
width: $sidebar-mini-width;
.text-sm &,
&.text-sm {
height: $main-header-height-sm;
}
}
.main-sidebar:hover {
.brand-link {
transition: width $transition-speed $transition-fn;
width: $sidebar-width;
}
}
}
.brand-link {
overflow: hidden;
position: fixed;
top: 0;
transition: width $transition-speed $transition-fn;
width: $sidebar-width;
z-index: $zindex-main-header + 1;
}
// Sidebar variants brand-link fix
@each $name, $color in $theme-colors {
.sidebar-dark-#{$name} .brand-link:not([class*="navbar"]) {
background-color: $sidebar-dark-bg;
}
.sidebar-light-#{$name} .brand-link:not([class*="navbar"]) {
background-color: $sidebar-light-bg;
}
}
.content-wrapper {
margin-top: $main-header-height;
}
.text-sm & .main-header ~ .content-wrapper,
.main-header.text-sm ~ .content-wrapper {
margin-top: $main-header-height-sm;
}
.main-header {
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: $zindex-main-sidebar - 1;
}
}
.layout#{$infix}-navbar-fixed.text-sm & {
.content-wrapper {
margin-top: $main-header-height-sm;
}
}
body:not(.layout-fixed).layout#{$infix}-navbar-fixed & {
.main-sidebar {
margin-top: calc(#{$main-header-height} / -1);
.sidebar {
margin-top: $main-header-height;
}
}
}
body:not(.layout-fixed).layout#{$infix}-navbar-fixed.text-sm & {
.main-sidebar {
margin-top: calc(#{$main-header-height-sm} / -1);
.sidebar {
margin-top: $main-header-height-sm;
}
}
}
.layout#{$infix}-navbar-not-fixed & {
.brand-link {
position: static;
}
.sidebar,
.content-wrapper {
margin-top: 0;
}
.main-header {
position: static;
}
}
.layout#{$infix}-navbar-not-fixed.layout-fixed & {
.sidebar {
margin-top: 0;
}
}
}
}
.layout-footer-fixed & {
.control-sidebar {
bottom: 0;
}
}
.layout-footer-fixed & {
.main-footer {
bottom: 0;
left: 0;
position: fixed;
right: 0;
z-index: $zindex-main-footer;
}
}
.layout-footer-not-fixed & {
.main-footer {
position: static;
}
.content-wrapper {
margin-bottom: 0;
}
}
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
.layout#{$infix}-footer-fixed & {
.control-sidebar {
bottom: 0;
}
}
.layout#{$infix}-footer-fixed & {
.main-footer {
bottom: 0;
left: 0;
position: fixed;
right: 0;
z-index: $zindex-main-footer;
}
.content-wrapper {
padding-bottom: $main-footer-height;
}
}
.layout#{$infix}-footer-not-fixed & {
.main-footer {
position: static;
}
}
}
}
.layout-top-nav & {
margin-left: 0;
.main-header {
.brand-image {
margin-top: -.5rem;
margin-right: .2rem;
height: 33px;
}
}
& .main-sidebar {
bottom: inherit;
height: inherit;
}
& .content-wrapper,
& .main-header,
& .main-footer {
margin-left: 0;
}
}
}
body.sidebar-collapse:not(.sidebar-mini-md):not(.sidebar-mini) {
.content-wrapper,
.main-footer,
.main-header {
&,
&::before {
margin-left: 0;
}
}
}
body:not(.sidebar-mini-md) {
.content-wrapper,
.main-footer,
.main-header {
@include media-breakpoint-up(md) {
@include transition(margin-left $transition-speed $transition-fn);
margin-left: $sidebar-width;
.sidebar-collapse & {
margin-left: 0;
}
}
@include media-breakpoint-down(md) {
&,
&::before {
margin-left: 0;
}
}
}
}
.sidebar-mini-md {
.content-wrapper,
.main-footer,
.main-header {
@include media-breakpoint-up(md) {
@include transition(margin-left $transition-speed $transition-fn);
margin-left: $sidebar-width;
.sidebar-collapse & {
margin-left: $sidebar-mini-width;
}
}
@include media-breakpoint-down(md) {
&,
&::before {
margin-left: $sidebar-mini-width;
}
}
}
}
.content-wrapper {
background: $main-bg;
> .content {
padding: $content-padding-y $content-padding-x;
}
}
.main-sidebar {
&,
&::before {
$local-sidebar-transition: margin-left $transition-speed $transition-fn, width $transition-speed $transition-fn;
@include transition($local-sidebar-transition);
width: $sidebar-width;
}
.sidebar-collapse:not(.sidebar-mini):not(.sidebar-mini-md) & {
&,
&::before {
box-shadow: none !important;
}
}
.sidebar-collapse & {
&,
&::before {
margin-left: -$sidebar-width;
}
.nav-sidebar.nav-child-indent .nav-treeview {
padding: 0;
}
}
@include media-breakpoint-down(sm) {
&,
&::before {
box-shadow: none !important;
margin-left: -$sidebar-width;
}
.sidebar-open & {
&,
&::before {
margin-left: 0;
}
}
}
}
:not(.layout-fixed) {
.main-sidebar {
height: inherit;
min-height: 100%;
position: absolute;
top: 0;
}
}
.layout-fixed {
.brand-link {
width: $sidebar-width;
}
.main-sidebar {
bottom: 0;
float: none;
height: 100vh;
left: 0;
position: fixed;
top: 0;
}
.control-sidebar {
bottom: 0;
float: none;
height: 100vh;
position: fixed;
top: 0;
.control-sidebar-content {
height: calc(100vh - #{$main-header-height});
}
}
}
@supports (-webkit-touch-callout: none) {
.layout-fixed {
.main-sidebar {
height: inherit;
}
}
}
.main-footer {
background: $main-footer-bg;
border-top: $main-footer-border-top;
color: lighten($gray-700, 25%);
padding: $main-footer-padding;
.text-sm &,
&.text-sm {
padding: $main-footer-padding-sm;
}
}
.content-header {
padding: 15px $content-padding-x;
.text-sm & {
padding: 10px $content-padding-x;
}
h1 {
font-size: 1.8rem;
margin: 0;
.text-sm & {
font-size: 1.5rem;
}
}
.breadcrumb {
background: transparent;
line-height: 1.8rem;
margin-bottom: 0;
padding: 0;
.text-sm & {
line-height: 1.5rem;
}
}
}
.hold-transition {
.content-wrapper,
.main-header,
.main-sidebar,
.main-sidebar *,
.control-sidebar,
.control-sidebar *,
.main-footer {
transition: none !important;
}
}

View File

@@ -0,0 +1,138 @@
//
// Component: Main Header
//
.main-header {
border-bottom: $main-header-bottom-border;
z-index: $zindex-main-header;
.nav-link {
height: $nav-link-height;
position: relative;
}
.text-sm &,
&.text-sm {
.nav-link {
height: $nav-link-sm-height;
padding: $nav-link-sm-padding-y $nav-link-padding-x;
> .fa,
> .fas,
> .far,
> .fab,
> .glyphicon,
> .ion {
font-size: $font-size-sm;
}
}
}
.navbar-nav {
.nav-item {
margin: 0;
}
&[class*='-right'] {
.dropdown-menu {
left: auto;
margin-top: -3px;
right: 0;
@media (max-width: breakpoint-max(xs)) {
left: 0;
right: auto;
}
}
}
}
}
// Add this class to images within a nav-link
.navbar-img {
height: $main-header-height / 2;
width: auto;
}
// Navbar badge
.navbar-badge {
font-size: .6rem;
font-weight: 300;
padding: 2px 4px;
position: absolute;
right: 5px;
top: 9px;
}
.btn-navbar {
background-color: transparent;
border-left-width: 0;
}
.form-control-navbar {
border-right-width: 0;
& + .input-group-append {
margin-left: 0;
}
}
.form-control-navbar,
.btn-navbar {
transition: none;
}
.navbar-dark {
.form-control-navbar,
.btn-navbar {
background-color: $main-header-dark-form-control-bg;
border: $main-header-dark-form-control-border;
}
.form-control-navbar {
&::placeholder {
color: $main-header-dark-placeholder-color;
}
+ .input-group-append > .btn-navbar {
color: $main-header-dark-placeholder-color;
}
&:focus {
&,
& + .input-group-append .btn-navbar {
background-color: $main-header-dark-form-control-focused-bg;
border: $main-header-dark-form-control-focused-border !important;
color: $main-header-dark-form-control-focused-color;
}
}
}
}
.navbar-light {
.form-control-navbar,
.btn-navbar {
background-color: $main-header-light-form-control-bg;
border: $main-header-light-form-control-border;
}
.form-control-navbar {
&::placeholder {
color: $main-header-light-placeholder-color;
}
+ .input-group-append > .btn-navbar {
color: $main-header-light-placeholder-color;
}
&:focus {
&,
& + .input-group-append .btn-navbar {
background-color: $main-header-light-form-control-focused-bg;
border: $main-header-light-form-control-focused-border !important;
color: $main-header-light-form-control-focused-color;
}
}
}
}

View File

@@ -0,0 +1,911 @@
//
// Component: Main Sidebar
//
.main-sidebar {
height: 100vh;
overflow-y: hidden;
z-index: $zindex-main-sidebar;
// Remove Firefox Focusring
a {
&:-moz-focusring {
border: 0;
outline: none;
}
}
}
.sidebar {
height: calc(100% - (#{$main-header-height-inner} + #{$main-header-bottom-border-width}));
overflow-y: auto;
padding-bottom: $sidebar-padding-y;
padding-left: $sidebar-padding-x;
padding-right: $sidebar-padding-x;
padding-top: $sidebar-padding-y;
}
// Sidebar user panel
.user-panel {
position: relative;
[class*='sidebar-dark'] & {
border-bottom: 1px solid lighten($dark, 12%);
}
[class*='sidebar-light'] & {
border-bottom: 1px solid $gray-300;
}
&,
.info {
overflow: hidden;
white-space: nowrap;
}
.image {
display: inline-block;
padding-left: $nav-link-padding-x - .2;
}
img {
height: auto;
width: $sidebar-user-image-width;
}
.info {
display: inline-block;
padding: 5px 5px 5px 10px;
}
.status,
.dropdown-menu {
font-size: $font-size-sm;
}
}
// Sidebar navigation menu
.nav-sidebar {
// All levels
.nav-item {
> .nav-link {
margin-bottom: .2rem;
.right {
@include transition(transform $transition-fn $transition-speed);
}
}
}
.nav-link > .right,
.nav-link > p > .right {
position: absolute;
right: 1rem;
top: .7rem;
i,
span {
margin-left: .5rem;
}
&:nth-child(2) {
right: 2.2rem;
}
}
.menu-open {
> .nav-treeview {
display: block;
}
> .nav-link {
i.right {
@include rotate(-90deg);
}
}
}
// First Level
> .nav-item {
margin-bottom: 0;
.nav-icon {
margin-left: .05rem;
font-size: 1.2rem;
margin-right: .2rem;
text-align: center;
width: $sidebar-nav-icon-width;
&.fa,
&.fas,
&.far,
&.fab,
&.glyphicon,
&.ion {
font-size: 1.1rem;
}
}
.float-right {
margin-top: 3px;
}
}
// Tree view menu
.nav-treeview {
display: none;
list-style: none;
padding: 0;
> .nav-item {
> .nav-link {
> .nav-icon {
width: $sidebar-nav-icon-width;
}
}
}
}
&.nav-child-indent {
.nav-treeview {
transition: padding $transition-speed $transition-fn;
padding-left: 1rem;
.text-sm & {
padding-left: .5rem;
}
}
&.nav-legacy {
.nav-treeview {
.nav-treeview {
padding-left: 2rem;
margin-left: -1rem;
.text-sm & {
padding-left: 1rem;
margin-left: -.5rem;
}
}
}
}
}
.nav-header {
font-size: .9rem;
padding: $nav-link-padding-y;
&:not(:first-of-type) {
padding: 1.7rem 1rem .5rem;
}
}
.nav-link p {
display: inline-block;
margin: 0;
}
}
#sidebar-overlay {
@include media-breakpoint-down(md) {
.sidebar-open & {
display: block;
}
}
background-color: rgba($black, 0.1);
bottom: 0;
display: none;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: $zindex-main-sidebar - 1;
}
[class*='sidebar-light-'] {
// Sidebar background color
background-color: $sidebar-light-bg;
// User Panel (resides in the sidebar)
.user-panel {
a:hover {
color: $sidebar-light-hover-color;
}
.status {
background: $sidebar-light-hover-bg;
color: $sidebar-light-color;
&:hover,
&:focus,
&:active {
background: darken($sidebar-light-hover-bg, 3%);
color: $sidebar-light-hover-color;
}
}
.dropdown-menu {
@include box-shadow(0 2px 4px rgba(0, 0, 0, .4));
border-color: darken($sidebar-light-hover-bg, 5%);
}
.dropdown-item {
color: $body-color;
}
}
// Sidebar Menu. First level links
.nav-sidebar > .nav-item {
// links
> .nav-link {
// border-left: 3px solid transparent;
&:active,
&:focus {
color: $sidebar-light-color;
}
}
// Hover and active states
&.menu-open > .nav-link,
&:hover > .nav-link {
background-color: $sidebar-light-hover-bg;
color: $sidebar-light-hover-color;
}
> .nav-link.active {
color: $sidebar-light-active-color;
@if $enable-shadows {
box-shadow: map-get($elevations, 1);
}
}
// First Level Submenu
> .nav-treeview {
background: $sidebar-light-submenu-bg;
}
}
// Section Heading
.nav-header {
background: inherit;
color: darken($sidebar-light-color, 5%);
}
// All links within the sidebar menu
.sidebar {
a {
color: $sidebar-light-color;
&:hover {
text-decoration: none;
}
}
}
// All submenus
.nav-treeview {
> .nav-item {
> .nav-link {
color: $sidebar-light-submenu-color;
}
> .nav-link.active {
&,
&:hover {
background-color: $sidebar-light-submenu-active-bg;
color: $sidebar-light-submenu-active-color;
}
}
> .nav-link:hover {
background-color: $sidebar-light-submenu-hover-bg;
}
}
}
// Flat style
.nav-flat {
.nav-item {
.nav-treeview {
.nav-treeview {
border-color: $sidebar-light-submenu-active-bg;
}
> .nav-item {
> .nav-link {
&,
&.active {
border-color: $sidebar-light-submenu-active-bg;
}
}
}
}
}
}
}
[class*='sidebar-dark-'] {
// Sidebar background color
background-color: $sidebar-dark-bg;
// User Panel (resides in the sidebar)
.user-panel {
a:hover {
color: $sidebar-dark-hover-color;
}
.status {
background: $sidebar-dark-hover-bg;
color: $sidebar-dark-color;
&:hover,
&:focus,
&:active {
background: darken($sidebar-dark-hover-bg, 3%);
color: $sidebar-dark-hover-color;
}
}
.dropdown-menu {
@include box-shadow(0 2px 4px rgba(0, 0, 0, .4));
border-color: darken($sidebar-dark-hover-bg, 5%);
}
.dropdown-item {
color: $body-color;
}
}
// Sidebar Menu. First level links
.nav-sidebar > .nav-item {
// links
> .nav-link {
// border-left: 3px solid transparent;
&:active {
color: $sidebar-dark-color;
}
}
// Hover and active states
&.menu-open > .nav-link,
&:hover > .nav-link,
& > .nav-link:focus {
background-color: $sidebar-dark-hover-bg;
color: $sidebar-dark-hover-color;
}
> .nav-link.active {
color: $sidebar-dark-hover-color;
@if $enable-shadows {
box-shadow: map-get($elevations, 1);
}
}
// First Level Submenu
> .nav-treeview {
background: $sidebar-dark-submenu-bg;
}
}
// Section Heading
.nav-header {
background: inherit; //darken($sidebar-dark-bg, 3%);
color: lighten($sidebar-dark-color, 5%);
}
// All links within the sidebar menu
.sidebar {
a {
color: $sidebar-dark-color;
&:hover,
&:focus {
text-decoration: none;
}
}
}
// All submenus
.nav-treeview {
> .nav-item {
> .nav-link {
color: $sidebar-dark-submenu-color;
&:hover,
&:focus {
background-color: $sidebar-dark-submenu-hover-bg;
color: $sidebar-dark-submenu-hover-color;
}
}
> .nav-link.active {
&,
&:hover,
&:focus {
background-color: $sidebar-dark-submenu-active-bg;
color: $sidebar-dark-submenu-active-color;
}
}
}
}
// Flat Style
.nav-flat {
.nav-item {
.nav-treeview {
.nav-treeview {
border-color: $sidebar-dark-submenu-active-bg;
}
> .nav-item {
> .nav-link {
&,
&.active {
border-color: $sidebar-dark-submenu-active-bg;
}
}
}
}
}
}
}
// Sidebar variants
@each $name, $color in $theme-colors {
.sidebar-dark-#{$name},
.sidebar-light-#{$name} {
@include sidebar-color($color)
}
}
@each $name, $color in $colors {
.sidebar-dark-#{$name},
.sidebar-light-#{$name} {
@include sidebar-color($color)
}
}
.sidebar-mini .main-sidebar:not(.sidebar-no-expand),
.sidebar-mini-md .main-sidebar:not(.sidebar-no-expand),
.sidebar-mini .main-sidebar:not(.sidebar-no-expand):hover,
.sidebar-mini-md .main-sidebar:not(.sidebar-no-expand):hover,
.sidebar-mini .main-sidebar.sidebar-focused,
.sidebar-mini-md .main-sidebar.sidebar-focused {
.nav-compact.nav-sidebar.nav-child-indent:not(.nav-flat) .nav-treeview {
padding-left: 1rem;
margin-left: -.5rem;
}
}
// Nav Flat
.nav-flat {
margin: (-$sidebar-padding-x/2) (-$sidebar-padding-x) 0;
.nav-item {
> .nav-link {
border-radius: 0;
margin-bottom: 0;
> .nav-icon {
margin-left: .55rem;
}
}
}
&:not(.nav-child-indent) {
.nav-treeview {
.nav-item {
> .nav-link {
> .nav-icon {
margin-left: .4rem;
}
}
}
}
}
&.nav-child-indent {
.nav-treeview {
padding-left: 0;
.nav-icon {
margin-left: .85rem;
}
.nav-treeview {
border-left: .2rem solid;
.nav-icon {
margin-left: 1.15rem;
}
.nav-treeview {
.nav-icon {
margin-left: 1.45rem;
}
.nav-treeview {
.nav-icon {
margin-left: 1.75rem;
}
.nav-treeview {
.nav-icon {
margin-left: 2.05rem;
}
}
}
}
}
}
}
.sidebar-collapse &.nav-child-indent {
.nav-treeview {
.nav-icon {
margin-left: .55rem;
}
.nav-link {
padding-left: calc(#{$nav-link-padding-x} - .2rem);
}
.nav-treeview {
.nav-icon {
margin-left: .35rem;
}
.nav-treeview {
.nav-icon {
margin-left: .15rem;
}
.nav-treeview {
.nav-icon {
margin-left: -.15rem;
}
.nav-treeview {
.nav-icon {
margin-left: -.35rem;
}
}
}
}
}
}
}
.sidebar-mini .main-sidebar:not(.sidebar-no-expand):hover &,
.sidebar-mini-md .main-sidebar:not(.sidebar-no-expand):hover &,
.sidebar-mini .main-sidebar.sidebar-focused &,
.sidebar-mini-md .main-sidebar.sidebar-focused & {
&.nav-compact.nav-sidebar .nav-treeview {
.nav-icon {
margin-left: .4rem;
}
}
&.nav-sidebar.nav-child-indent .nav-treeview {
.nav-icon {
margin-left: .85rem;
}
.nav-treeview {
.nav-icon {
margin-left: 1.15rem;
}
.nav-treeview {
.nav-icon {
margin-left: 1.45rem;
}
.nav-treeview {
.nav-icon {
margin-left: 1.75rem;
}
.nav-treeview {
.nav-icon {
margin-left: 2.05rem;
}
}
}
}
}
}
}
.nav-icon {
@include transition(margin-left $transition-fn $transition-speed);
}
.nav-treeview {
.nav-icon {
margin-left: -.2rem;
}
}
&.nav-sidebar > .nav-item {
.nav-treeview,
> .nav-treeview {
background: rgba($white, .05);
.nav-item {
> .nav-link {
border-left: .2rem solid;
}
}
}
}
}
.nav-legacy {
margin: (-$sidebar-padding-x/2) (-$sidebar-padding-x) 0;
&.nav-sidebar .nav-item {
> .nav-link {
border-radius: 0;
margin-bottom: 0;
> .nav-icon {
margin-left: .55rem;
.text-sm & {
margin-left: .75rem;
}
}
}
}
&.nav-sidebar > .nav-item {
> .nav-link {
&.active {
background: inherit;
border-left: 3px solid transparent;
box-shadow: none;
> .nav-icon {
margin-left: calc(.55rem - 3px);
.text-sm & {
margin-left: calc(.75rem - 3px);
}
}
}
}
}
.text-sm &.nav-sidebar.nav-flat .nav-treeview {
.nav-item {
> .nav-link {
> .nav-icon {
margin-left: calc(.75rem - 3px);
}
}
}
}
.sidebar-mini &,
.sidebar-mini-md & {
> .nav-item .nav-link {
.nav-icon {
@include transition(margin-left $transition-fn $transition-speed);
margin-left: .75rem;
}
}
}
.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused &.nav-child-indent,
.sidebar-mini.sidebar-collapse .main-sidebar:hover &.nav-child-indent,
.sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused &.nav-child-indent,
.sidebar-mini-md.sidebar-collapse .main-sidebar:hover &.nav-child-indent {
.nav-treeview {
padding-left: 1rem;
.nav-treeview {
padding-left: 2rem;
margin-left: -1rem;
}
}
}
.sidebar-mini.sidebar-collapse.text-sm .main-sidebar.sidebar-focused &.nav-child-indent,
.sidebar-mini.sidebar-collapse.text-sm .main-sidebar:hover &.nav-child-indent,
.sidebar-mini-md.sidebar-collapse.text-sm .main-sidebar.sidebar-focused &.nav-child-indent,
.sidebar-mini-md.sidebar-collapse.text-sm .main-sidebar:hover &.nav-child-indent {
.nav-treeview {
padding-left: .5rem;
.nav-treeview {
padding-left: 1rem;
margin-left: -.5rem;
}
}
}
.sidebar-mini.sidebar-collapse &,
.sidebar-mini-md.sidebar-collapse & {
> .nav-item > .nav-link {
.nav-icon {
margin-left: .55rem;
}
&.active {
> .nav-icon{
margin-left: .36rem;
}
}
}
&.nav-child-indent {
.nav-treeview {
.nav-treeview {
padding-left: 0;
margin-left: 0;
}
}
}
}
.sidebar-mini.sidebar-collapse.text-sm &,
.sidebar-mini-md.sidebar-collapse.text-sm & {
> .nav-item > .nav-link {
.nav-icon {
margin-left: .75rem;
}
&.active {
> .nav-icon{
margin-left: calc(.75rem - 3px);
}
}
}
}
[class*='sidebar-dark'] & {
&.nav-sidebar > .nav-item {
.nav-treeview,
> .nav-treeview {
background: rgba($white, .05);
}
> .nav-link.active {
color: $sidebar-dark-active-color;
}
}
.nav-treeview > .nav-item > .nav-link {
&.active,
&:focus,
&:hover {
background: none;
color: $sidebar-dark-active-color;
}
}
}
[class*='sidebar-light'] & {
&.nav-sidebar > .nav-item {
.nav-treeview,
> .nav-treeview {
background: rgba($black, .05);
}
> .nav-link.active {
color: $sidebar-light-active-color;
}
}
.nav-treeview > .nav-item > .nav-link {
&.active,
&:focus,
&:hover {
background: none;
color: $sidebar-light-active-color;
}
}
}
}
.nav-collapse-hide-child {
.menu-open > .nav-treeview {
max-height: min-content;
opacity: 1;
}
.sidebar-collapse & {
.menu-open > .nav-treeview {
max-height: 0;
opacity: 0;
}
}
.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused &,
.sidebar-mini.sidebar-collapse .main-sidebar:hover &,
.sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused &,
.sidebar-mini-md.sidebar-collapse .main-sidebar:hover & {
.menu-open > .nav-treeview {
max-height: min-content;
opacity: 1;
}
}
}
// Nav Compact
.nav-compact {
.nav-link,
.nav-header {
padding-top: ($nav-link-padding-y / 2);
padding-bottom: ($nav-link-padding-y / 2);
}
.nav-header:not(:first-of-type) {
padding-top: ($nav-link-padding-y * 1.5);
padding-bottom: ($nav-link-padding-y / 2);
}
.nav-link > .right,
.nav-link > p > .right {
top: .465rem;
}
.text-sm & {
.nav-link > .right,
.nav-link > p > .right {
top: .7rem;
}
}
}
// Sidebar Form Control
[class*='sidebar-dark'] {
.form-control-sidebar,
.btn-sidebar {
background: lighten($sidebar-dark-bg, 5%);
border: 1px solid lighten($sidebar-dark-bg, 15%);
color: lighten(color-yiq(lighten($sidebar-dark-bg, 5%)), 15%);
}
.form-control-sidebar:focus,
.btn-sidebar:focus {
border: 1px solid lighten($sidebar-dark-bg, 30%);
}
.btn-sidebar:hover {
background: lighten($sidebar-dark-bg, 7.5%);
}
.btn-sidebar:focus {
background: lighten($sidebar-dark-bg, 10%);
}
}
[class*='sidebar-light'] {
.form-control-sidebar,
.btn-sidebar {
background: darken($sidebar-light-bg, 5%);
border: 1px solid darken($sidebar-light-bg, 15%);
color: color-yiq(darken($sidebar-light-bg, 5%));
}
.form-control-sidebar:focus,
.btn-sidebar:focus {
border: 1px solid darken($sidebar-light-bg, 30%);
}
.btn-sidebar:hover {
background: darken($sidebar-light-bg, 7.5%);
}
.btn-sidebar:focus {
background: darken($sidebar-light-bg, 10%);
}
}

View File

@@ -0,0 +1,479 @@
//
// Misc: Miscellaneous
//
.border-transparent {
border-color: transparent !important;
}
// Description Blocks
.description-block {
display: block;
margin: 10px 0;
text-align: center;
&.margin-bottom {
margin-bottom: 25px;
}
> .description-header {
font-size: 16px;
font-weight: 600;
margin: 0;
padding: 0;
}
> .description-text {
text-transform: uppercase;
}
// Description Block Extension
.description-icon {
font-size: 16px;
}
}
// List utility classes
.list-group-unbordered {
> .list-group-item {
border-left: 0;
border-radius: 0;
border-right: 0;
padding-left: 0;
padding-right: 0;
}
}
.list-header {
color: $gray-600;
font-size: 15px;
font-weight: bold;
padding: 10px 4px;
}
.list-seperator {
background: $card-border-color;
height: 1px;
margin: 15px 0 9px;
}
.list-link {
> a {
color: $gray-600;
padding: 4px;
&:hover {
color: $gray-900;
}
}
}
// User block
.user-block {
float: left;
img {
float: left;
height: 40px;
width: 40px;
}
.username,
.description,
.comment {
display: block;
margin-left: 50px;
}
.username {
font-size: 16px;
font-weight: 600;
margin-top: -1px;
}
.description {
color: $gray-600;
font-size: 13px;
margin-top: -3px;
}
&.user-block-sm {
img {
width: $img-size-sm;
height: $img-size-sm;
}
.username,
.description,
.comment {
margin-left: 40px;
}
.username {
font-size: 14px;
}
}
}
// Image sizes
.img-sm,
.img-md,
.img-lg {
float: left;
}
.img-sm {
height: $img-size-sm;
width: $img-size-sm;
+ .img-push {
margin-left: $img-size-sm + $img-size-push;
}
}
.img-md {
width: $img-size-md;
height: $img-size-md;
+ .img-push {
margin-left: $img-size-md + $img-size-push;
}
}
.img-lg {
width: $img-size-lg;
height: $img-size-lg;
+ .img-push {
margin-left: $img-size-lg + $img-size-push;
}
}
// Image bordered
.img-bordered {
border: 3px solid $gray-500;
padding: 3px;
}
.img-bordered-sm {
border: 2px solid $gray-500;
padding: 2px;
}
// Rounded and Circle Images
.img-rounded {
@include border-radius($border-radius)
}
.img-circle {
@include border-radius(50%);
}
// Image sizes
.img-size-64,
.img-size-50,
.img-size-32 {
height: auto;
}
.img-size-64 {
width: 64px;
}
.img-size-50 {
width: 50px;
}
.img-size-32 {
width: 32px;
}
// Block sizes
.size-32,
.size-40,
.size-50 {
display: block;
text-align: center;
}
.size-32 {
height: 32px;
line-height: 32px;
width: 32px;
}
.size-40 {
height: 40px;
line-height: 40px;
width: 40px;
}
.size-50 {
height: 50px;
line-height: 50px;
width: 50px;
}
// General attachemnt block
.attachment-block {
background: $gray-100;
border: 1px solid $card-border-color;
margin-bottom: 10px;
padding: 5px;
.attachment-img {
float: left;
height: auto;
max-height: 100px;
max-width: 100px;
}
.attachment-pushed {
margin-left: 110px;
}
.attachment-heading {
margin: 0;
}
.attachment-text {
color: $gray-700;
}
}
// Overlays for Card, InfoBox & SmallBox
.card,
.overlay-wrapper,
.info-box,
.small-box {
// Box overlay for LOADING STATE effect
> .overlay,
> .loading-img {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.overlay {
@include border-radius($border-radius);
align-items: center;
background: rgba($white, 0.7);
display: flex;
justify-content: center;
z-index: 50;
> .fa,
> .fas,
> .far,
> .fab,
> .glyphicon,
> .ion {
color: $gray-800;
}
&.dark {
background: rgba($black, 0.5);
> .fa,
> .fas,
> .far,
> .fab,
> .glyphicon,
> .ion {
color: $gray-400;
}
}
}
}
.tab-pane {
// Box overlay for LOADING STATE effect on Tab Panels
> .overlay-wrapper {
position: relative;
> .overlay {
border-top-left-radius: 0;
border-top-right-radius: 0;
flex-direction: column;
margin-top: -$card-spacer-x;
margin-left: -$card-spacer-x;
height: calc(100% + 2 * #{$card-spacer-x});
width: calc(100% + 2 * #{$card-spacer-x});
&.dark {
color: $white;
}
}
}
}
// Ribbon
.ribbon-wrapper {
height: $ribbon-wrapper-size;
overflow: hidden;
position: absolute;
right: -2px;
top: -2px;
width: $ribbon-wrapper-size;
z-index: 10;
&.ribbon-lg {
height: $ribbon-lg-wrapper-size;
width: $ribbon-lg-wrapper-size;
.ribbon {
right: $ribbon-lg-right;
top: $ribbon-lg-top;
width: $ribbon-lg-width;
}
}
&.ribbon-xl {
height: $ribbon-xl-wrapper-size;
width: $ribbon-xl-wrapper-size;
.ribbon {
right: $ribbon-xl-right;
top: $ribbon-xl-top;
width: $ribbon-xl-width;
}
}
.ribbon {
box-shadow: 0 0 $ribbon-border-size rgba($black, .3);
font-size: $ribbon-font-size;
line-height: $ribbon-line-height;
padding: $ribbon-padding;
position: relative;
right: $ribbon-right;
text-align: center;
text-shadow: 0 -1px 0 rgba($black, .4);
text-transform: uppercase;
top: $ribbon-top;
transform: rotate(45deg);
width: $ribbon-width;
&::before,
&::after {
border-left: $ribbon-border-size solid transparent;
border-right: $ribbon-border-size solid transparent;
border-top: $ribbon-border-size solid #9e9e9e;
bottom: -$ribbon-border-size;
content: '';
position: absolute;
}
&::before {
left: 0;
}
&::after {
right: 0;
}
}
}
// Scroll To Top
.back-to-top {
bottom: 1.25rem;
position: fixed;
right: 1.25rem;
z-index: $zindex-control-sidebar + 1;
&:focus {
box-shadow: none;
}
}
// Pre
pre {
padding: .75rem;
}
// Blockquotes styles
blockquote {
background: $white;
border-left: .7rem solid $primary;
margin: 1.5em .7rem;
padding: 0.5em .7rem;
.box & {
background: $gray-200;
}
p:last-child {
margin-bottom: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: $primary;
font-size: 1.25rem;
font-weight: 600;
}
@each $color, $value in $theme-colors {
&.quote-#{$color} {
border-color: $value;
h1,
h2,
h3,
h4,
h5,
h6 {
color: $value;
}
}
}
@each $color, $value in $colors {
&.quote-#{$color} {
border-color: $value;
h1,
h2,
h3,
h4,
h5,
h6 {
color: $value;
}
}
}
}
// Tab Custom Content
.tab-custom-content {
border-top: $nav-tabs-border-width solid $nav-tabs-border-color;
margin-top: .5rem;
padding-top: .5rem;
}
.nav + .tab-custom-content {
border-top: none;
border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
margin-top: 0;
margin-bottom: .5rem;
padding-bottom: .5rem;
}
// Badge BTN Style
.badge-btn {
border-radius: $button-border-radius-xs;
font-size: $button-font-size-xs;
font-weight: 400;
padding: $button-padding-y-xs*2 $button-padding-x-xs*2;
}
.badge-btn.badge-pill {
padding: .375rem .6rem;
}

View File

@@ -0,0 +1,13 @@
//
// General: Mixins
//
@import 'mixins/cards';
@import 'mixins/sidebar';
@import 'mixins/navbar';
@import 'mixins/accent';
@import 'mixins/custom-forms';
@import 'mixins/backgrounds';
@import 'mixins/direct-chat';
@import 'mixins/toasts';
@import 'mixins/miscellaneous';

View File

@@ -0,0 +1,40 @@
//
// Component: Modals
//
// Overlay
.modal-dialog {
.overlay {
background-color: $black;
display: block;
height: 100%;
left: 0;
opacity: .7;
position: absolute;
top: 0;
width: 100%;
z-index: ($zindex-modal + 2);
}
}
// BG Color Variations Fixes
.modal-content {
&.bg-warning {
.modal-header,
.modal-footer {
border-color: $gray-800;
}
}
&.bg-primary,
&.bg-secondary,
&.bg-info,
&.bg-danger,
&.bg-success, {
.close {
color: $white;
text-shadow: 0 1px 0 #000;
}
}
}

View File

@@ -0,0 +1,100 @@
//
// Component: Nav
//
.nav-pills {
.nav-link {
color: $gray-600;
&:not(.active):hover {
color: theme-color('primary');
}
}
.nav-item {
&.dropdown.show {
.nav-link:hover {
color: $dropdown-link-active-color;
}
}
}
}
// Vertical Tabs
.nav-tabs.flex-column {
border-bottom: 0;
border-right: $nav-tabs-border-width solid $nav-tabs-border-color;
.nav-link {
border-bottom-left-radius: $nav-tabs-border-radius;
border-top-right-radius: 0;
margin-right: -$nav-tabs-border-width;
@include hover-focus {
border-color: $gray-200 transparent $gray-200 $gray-200;
}
}
.nav-link.active,
.nav-item.show .nav-link {
border-color: $gray-300 transparent $gray-300 $gray-300;
}
&.nav-tabs-right {
border-left: $nav-tabs-border-width solid $nav-tabs-border-color;
border-right: 0;
.nav-link {
border-bottom-left-radius: 0;
border-bottom-right-radius: $nav-tabs-border-radius;
border-top-left-radius: 0;
border-top-right-radius: $nav-tabs-border-radius;
margin-left: -$nav-tabs-border-width;
@include hover-focus {
border-color: $gray-200 $gray-200 $gray-200 transparent;
}
}
.nav-link.active,
.nav-item.show .nav-link {
border-color: $gray-300 $gray-300 $gray-300 transparent;
}
}
}
.navbar-no-expand {
flex-direction: row;
.nav-link {
padding-left: $navbar-nav-link-padding-x;
padding-right: $navbar-nav-link-padding-x;
}
.dropdown-menu {
position: absolute;
}
}
// Color variants
@each $color, $value in $theme-colors {
@if $color == dark or $color == light {
.navbar-#{$color} {
background-color: $value;
}
}
}
@each $color, $value in $theme-colors {
@if $color != dark and $color != light {
.navbar-#{$color} {
background-color: $value;
}
}
}
@each $color, $value in $colors {
.navbar-#{$color} {
background-color: $value;
}
}

View File

@@ -0,0 +1,52 @@
//
// Misc: Print
//
@media print {
//Add to elements that you do not want to show when printing
.no-print {
display: none !important;
}
//Elements that we want to hide when printing
.main-sidebar,
.main-header,
.content-header {
@extend .no-print;
}
//This is the only element that should appear, so let's remove the margins
.content-wrapper,
.main-footer {
@include translate(0, 0);
margin-left: 0 !important;
min-height: 0 !important;
}
.layout-fixed .content-wrapper {
padding-top: 0 !important;
}
//Invoice printing
.invoice {
border: 0;
margin: 0;
padding: 0;
width: 100%;
}
.invoice-col {
float: left;
width: 33.3333333%;
}
//Make sure table content displays properly
.table-responsive {
overflow: auto;
> .table tr th,
> .table tr td {
white-space: normal !important;
}
}
}

View File

@@ -0,0 +1,54 @@
//
// Component: Products
//
.products-list {
list-style: none;
margin: 0;
padding: 0;
> .item {
@include clearfix;
@if $enable-rounded {
@include border-radius($border-radius);
}
background: $white;
padding: 10px 0;
}
.product-img {
float: left;
img {
height: 50px;
width: 50px;
}
}
.product-info {
margin-left: 60px;
}
.product-title {
font-weight: 600;
}
.product-description {
color: $gray-600;
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.product-list-in-card > .item {
@include border-radius(0);
border-bottom: 1px solid $card-border-color;
&:last-of-type {
border-bottom-width: 0;
}
}

View File

@@ -0,0 +1,66 @@
//
// Component: Progress Bar
//
//General CSS
.progress {
@include box-shadow(none);
@include border-radius($progress-bar-border-radius);
// Vertical bars
&.vertical {
display: inline-block;
height: 200px;
margin-right: 10px;
position: relative;
width: 30px;
> .progress-bar {
bottom: 0;
position: absolute;
width: 100%;
}
//Sizes
&.sm,
&.progress-sm {
width: 20px;
}
&.xs,
&.progress-xs {
width: 10px;
}
&.xxs,
&.progress-xxs {
width: 3px;
}
}
}
.progress-group {
margin-bottom: map-get($spacers, 2);
}
// size variation
.progress-sm {
height: 10px;
}
.progress-xs {
height: 7px;
}
.progress-xxs {
height: 3px;
}
// Remove margins from progress bars when put in a table
.table {
tr > td {
.progress {
margin: 0;
}
}
}

View File

@@ -0,0 +1,148 @@
//
// Component: Sidebar Mini
//
// Logo style
.logo-xs,
.logo-xl {
opacity: 1;
position: absolute;
visibility: visible;
&.brand-image-xs {
left: 18px;
top: 12px;
}
&.brand-image-xl {
left: 12px;
top: 6px;
}
}
.logo-xs {
opacity: 0;
visibility: hidden;
&.brand-image-xl {
left: 16px;
top: 8px;
}
}
.brand-link {
&.logo-switch {
&::before {
content: '\00a0';
}
}
}
// Add sidebar-mini class to the body tag to activate this feature
.sidebar-mini {
@include media-breakpoint-up(lg) {
@include sidebar-mini-breakpoint;
}
}
@include media-breakpoint-down(md) {
.sidebar-mini.sidebar-collapse .main-sidebar {
box-shadow: none !important;
}
}
.sidebar-mini-md {
@include media-breakpoint-up(md) {
@include sidebar-mini-breakpoint;
}
}
@include media-breakpoint-down(sm) {
.sidebar-mini-md.sidebar-collapse .main-sidebar {
box-shadow: none !important;
}
}
.sidebar-collapse {
.main-sidebar.sidebar-focused,
.main-sidebar:hover {
.nav-header {
display: inline-block;
}
}
.sidebar-no-expand.main-sidebar.sidebar-focused,
.sidebar-no-expand.main-sidebar:hover {
width: $sidebar-mini-width;
.nav-header {
display: none;
}
.brand-link {
width: $sidebar-mini-width !important;
}
.user-panel .image {
float: none !important;
}
.logo-xs {
opacity: 1;
visibility: visible;
}
.logo-xl {
opacity: 0;
visibility: hidden;
}
.nav-sidebar.nav-child-indent .nav-treeview {
padding-left: 0;
}
.brand-text,
.user-panel > .info,
.nav-sidebar .nav-link p {
margin-left: -10px;
opacity: 0;
visibility: hidden;
width: 0;
}
.nav-sidebar > .nav-item .nav-icon {
margin-right: 0;
}
}
}
.nav-sidebar {
position: relative;
&:hover {
overflow: visible;
}
}
.sidebar-form,
.nav-sidebar > .nav-header {
overflow: hidden;
text-overflow: clip;
}
.nav-sidebar .nav-item > .nav-link {
position: relative;
> .float-right {
margin-top: -7px;
position: absolute;
right: 10px;
top: 50%;
}
}
.sidebar .nav-link p,
.main-sidebar .brand-text,
.main-sidebar .logo-xs,
.main-sidebar .logo-xl,
.sidebar .user-panel .info {
@include transition(margin-left $transition-speed linear, opacity $transition-speed ease, visibility $transition-speed ease)
}

View File

@@ -0,0 +1,152 @@
//
// Component: Small Box
//
.small-box {
@include border-radius($border-radius);
@include box-shadow($card-shadow);
display: block;
margin-bottom: 20px;
position: relative;
// content wrapper
> .inner {
padding: 10px;
}
> .small-box-footer {
background: rgba($black, 0.1);
color: rgba($white, 0.8);
display: block;
padding: 3px 0;
position: relative;
text-align: center;
text-decoration: none;
z-index: 10;
&:hover {
background: rgba($black, 0.15);
color: $white;
}
}
h3 {
@include font-size(2.2rem);
font-weight: bold;
margin: 0 0 10px 0;
padding: 0;
white-space: nowrap;
}
@include media-breakpoint-up(lg) {
.col-xl-2 &,
.col-lg-2 &,
.col-md-2 & {
h3 {
@include font-size(1.6rem);
}
}
.col-xl-3 &,
.col-lg-3 &,
.col-md-3 & {
h3 {
@include font-size(1.6rem);
}
}
}
@include media-breakpoint-up(xl) {
.col-xl-2 &,
.col-lg-2 &,
.col-md-2 & {
h3 {
@include font-size(2.2rem);
}
}
.col-xl-3 &,
.col-lg-3 &,
.col-md-3 & {
h3 {
@include font-size(2.2rem);
}
}
}
p {
font-size: 1rem;
> small {
color: $gray-100;
display: block;
font-size: 0.9rem;
margin-top: 5px;
}
}
h3,
p {
z-index: 5;
}
// the icon
.icon {
color: rgba($black, 0.15);
z-index: 0;
> i {
font-size: 90px;
position: absolute;
right: 15px;
top: 15px;
transition: all $transition-speed linear;
&.fa,
&.fas,
&.far,
&.fab,
&.glyphicon,
&.ion {
font-size: 70px;
top: 20px;
}
}
}
// Small box hover state
&:hover {
text-decoration: none;
// Animate icons on small box hover
.icon > i {
font-size: 95px;
&.fa,
&.fas,
&.far,
&.fab,
&.glyphicon,
&.ion {
font-size: 75px;
}
}
}
}
@include media-breakpoint-down(sm) {
// No need for icons on very small devices
.small-box {
text-align: center;
.icon {
display: none;
}
p {
font-size: 12px;
}
}
}

View File

@@ -0,0 +1,93 @@
//
// Component: Social Widgets
//
//General widget style
.card-widget {
border: 0;
position: relative;
}
//User Widget Style 1
.widget-user {
//User name container
.widget-user-header {
@if $enable-rounded {
@include border-top-radius($border-radius);
}
height: 135px;
padding: 1rem;
text-align: center;
}
//User name
.widget-user-username {
font-size: 25px;
font-weight: 300;
margin-bottom: 0;
margin-top: 0;
text-shadow: 0 1px 1px rgba($black, 0.2);
}
//User single line description
.widget-user-desc {
margin-top: 0;
}
//User image container
.widget-user-image {
left: 50%;
margin-left: -45px;
position: absolute;
top: 80px;
> img {
border: 3px solid $white;
height: auto;
width: 90px;
}
}
.card-footer {
padding-top: 50px;
}
}
//User Widget Style 2
.widget-user-2 {
//User name container
.widget-user-header {
@include border-top-radius($border-radius);
padding: 1rem;
}
//User name
.widget-user-username {
font-size: 25px;
font-weight: 300;
margin-bottom: 5px;
margin-top: 5px;
}
//User single line description
.widget-user-desc {
margin-top: 0;
}
.widget-user-username,
.widget-user-desc {
margin-left: 75px;
}
//User image container
.widget-user-image {
> img {
float: left;
height: auto;
width: 65px;
}
}
}

View File

@@ -0,0 +1,74 @@
//
// Component: Table
//
.table {
&:not(.table-dark) {
color: inherit;
}
// fixed table head
&.table-head-fixed {
thead tr:nth-child(1) th {
background-color: $white;
border-bottom: 0;
box-shadow: inset 0 1px 0 $table-border-color,
inset 0 -1px 0 $table-border-color;
position: sticky;
top: 0;
z-index: 10;
}
&.table-dark {
thead tr {
&:nth-child(1) th {
background-color: $table-dark-bg;
box-shadow: inset 0 1px 0 $table-dark-border-color,
inset 0 -1px 0 $table-dark-border-color;
}
}
}
}
// no border
&.no-border {
&,
td,
th {
border: 0;
}
}
// .text-center in tables
&.text-center {
&,
td,
th {
text-align: center;
}
}
&.table-valign-middle {
thead > tr > th,
thead > tr > td,
tbody > tr > th,
tbody > tr > td {
vertical-align: middle;
}
}
.card-body.p-0 & {
thead > tr > th,
thead > tr > td,
tbody > tr > th,
tbody > tr > td {
&:first-of-type {
padding-left: map-get($spacers, 4);
}
&:last-of-type {
padding-right: map-get($spacers, 4);
}
}
}
}

View File

@@ -0,0 +1,37 @@
//
// Component: Text
//
// text modification
.text-bold {
&, &.table td, &.table th {
font-weight: 700;
}
}
.text-xs {
font-size: $font-size-xs !important;
}
.text-sm {
font-size: $font-size-sm !important;
}
.text-md {
font-size: $font-size-base !important;
}
.text-lg {
font-size: $font-size-lg !important;
}
.text-xl {
font-size: $font-size-xl !important;
}
// text color variations
@each $name, $color in $colors {
.text-#{$name} {
color: #{$color};
}
}

View File

@@ -0,0 +1,127 @@
//
// Component: Timeline
//
.timeline {
margin: 0 0 45px;
padding: 0;
position: relative;
// The line
&::before {
@include border-radius($border-radius);
background: $gray-300;
bottom: 0;
content: '';
left: 31px;
margin: 0;
position: absolute;
top: 0;
width: 4px;
}
// Element
> div {
&::before,
&::after {
content: "";
display: table;
}
margin-bottom: 15px;
margin-right: 10px;
position: relative;
// The content
> .timeline-item {
@include box-shadow($card-shadow);
@include border-radius($border-radius);
background: $white;
color: $gray-700;
margin-left: 60px;
margin-right: 15px;
margin-top: 0;
padding: 0;
position: relative;
// The time and header
> .time {
color: #999;
float: right;
font-size: 12px;
padding: 10px;
}
// Header
> .timeline-header {
border-bottom: 1px solid $card-border-color;
color: $gray-700;
font-size: 16px;
line-height: 1.1;
margin: 0;
padding: 10px;
// Link in header
> a {
font-weight: 600;
}
}
// Item body and footer
> .timeline-body,
> .timeline-footer {
padding: 10px;
}
> .timeline-body {
> img {
margin: 10px;
}
> dl, ol, ul {
margin: 0;
}
}
> .timeline-footer {
> a {
color: $white;
}
}
}
// The icons at line
> .fa,
> .fas,
> .far,
> .fab,
> .glyphicon,
> .ion {
background: $gray-500;
border-radius: 50%;
font-size: 15px;
height: 30px;
left: 18px;
line-height: 30px;
position: absolute;
text-align: center;
top: 0;
width: 30px;
}
}
// Time label
> .time-label {
> span {
@include border-radius(4px);
background-color: $white;
display: inline-block;
font-weight: 600;
padding: 5px;
}
}
}
.timeline-inverse {
> div {
> .timeline-item {
@include box-shadow(none);
background: $gray-100;
border: 1px solid $gray-300;
> .timeline-header {
border-bottom-color: $gray-300;
}
}
}
}

View File

@@ -0,0 +1,56 @@
//
// Component: Toasts
//
.toasts-top-right {
position: absolute;
right: 0;
top: 0;
z-index: $zindex-toasts;
&.fixed {
position: fixed;
}
}
.toasts-top-left {
left: 0;
position: absolute;
top: 0;
z-index: $zindex-toasts;
&.fixed {
position: fixed;
}
}
.toasts-bottom-right {
bottom: 0;
position: absolute;
right: 0;
z-index: $zindex-toasts;
&.fixed {
position: fixed;
}
}
.toasts-bottom-left {
bottom: 0;
left: 0;
position: absolute;
z-index: $zindex-toasts;
&.fixed {
position: fixed;
}
}
.toast {
@each $name, $color in $theme-colors {
@include toast-variant($name, $color);
}
@each $name, $color in $colors {
@include toast-variant($name, $color);
}
}

View File

@@ -0,0 +1,45 @@
//
// Component: Users List
//
.users-list {
@include list-unstyled;
> li {
float: left;
padding: 10px;
text-align: center;
width: 25%;
img {
@include border-radius(50%);
height: auto;
max-width: 100%;
}
> a:hover {
&,
.users-list-name {
color: #999;
}
}
}
}
.users-list-name,
.users-list-date {
display: block;
}
.users-list-name {
color: $gray-700;
font-size: $font-size-sm;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.users-list-date {
color: darken($gray-500, 20%);
font-size: 12px;
}

View File

@@ -0,0 +1,237 @@
//
// Core: Variables
//
// COLORS
// --------------------------------------------------------
$blue: #0073b7 !default;
$lightblue: #3c8dbc !default;
$navy: #001f3f !default;
$teal: #39cccc !default;
$olive: #3d9970 !default;
$lime: #01ff70 !default;
$orange: #ff851b !default;
$fuchsia: #f012be !default;
$purple: #605ca8 !default;
$maroon: #d81b60 !default;
$black: #111 !default;
$gray-x-light: #d2d6de !default;
$colors: map-merge((
'lightblue': $lightblue,
'navy': $navy,
'olive': $olive,
'lime': $lime,
'fuchsia': $fuchsia,
'maroon': $maroon,
), $colors);
// LAYOUT
// --------------------------------------------------------
$font-size-root: 1rem !default;
// Sidebar
$sidebar-width: 250px !default;
$sidebar-padding-x: 0.5rem !default;
$sidebar-padding-y: 0 !default;
// Boxed layout maximum width
$boxed-layout-max-width: 1250px !default;
// When to show the smaller logo
$screen-header-collapse: map-get($grid-breakpoints, md) !default;
// Body background (Affects main content background only)
$main-bg: #f4f6f9 !default;
// Content padding
$content-padding-y: 0 !default;
$content-padding-x: $navbar-padding-x !default;
// IMAGE SIZES
// --------------------------------------------------------
$img-size-sm: 1.875rem !default;
$img-size-md: 3.75rem !default;
$img-size-lg: 6.25rem !default;
$img-size-push: .625rem !default;
// MAIN HEADER
// --------------------------------------------------------
$main-header-bottom-border-width: $border-width !default;
$main-header-bottom-border-color: $gray-300 !default;
$main-header-bottom-border: $main-header-bottom-border-width solid $main-header-bottom-border-color !default;
$main-header-link-padding-y: $navbar-padding-y !default;
$main-header-link-padding-x: $navbar-padding-x !default;
$main-header-brand-padding-y: $navbar-brand-padding-y !default;
$main-header-brand-padding-x: $navbar-padding-x !default;
$main-header-height-inner: ($nav-link-height + ($main-header-link-padding-y * 2)) !default;
$main-header-height: calc(#{$main-header-height-inner} + #{$main-header-bottom-border-width}) !default;
$nav-link-sm-padding-y: .35rem !default;
$nav-link-sm-height: ($font-size-sm * $line-height-sm + $nav-link-sm-padding-y * 1.785) !default;
$main-header-height-sm-inner: ($nav-link-sm-height + ($main-header-link-padding-y * 2)) !default;
$main-header-height-sm: calc(#{$main-header-height-sm-inner} + #{$main-header-bottom-border-width}) !default;
// Main header skins
$main-header-dark-form-control-bg: hsla(100, 100%, 100%, 0.2) !default;
$main-header-dark-form-control-focused-bg: hsla(100, 100%, 100%, 0.6) !default;
$main-header-dark-form-control-focused-color: $gray-800 !default;
$main-header-dark-form-control-border: 0 !default;
$main-header-dark-form-control-focused-border: 0 !default;
$main-header-dark-placeholder-color: hsla(100, 100%, 100%, 0.6) !default;
$main-header-light-form-control-bg: darken($gray-100, 2%) !default;
$main-header-light-form-control-focused-bg: $gray-200 !default;
$main-header-light-form-control-focused-color: $gray-800 !default;
$main-header-light-form-control-border: 0 !default;
$main-header-light-form-control-focused-border: 0 !default;
$main-header-light-placeholder-color: hsla(0, 0%, 0%, 0.6) !default;
// MAIN FOOTER
// --------------------------------------------------------
$main-footer-padding: 1rem !default;
$main-footer-padding-sm: $main-footer-padding * .812 !default;
$main-footer-border-top-width: 1px !default;
$main-footer-border-top-color: $gray-300 !default;
$main-footer-border-top: $main-footer-border-top-width solid $main-footer-border-top-color !default;
$main-footer-height-inner: (($font-size-root * $line-height-base) + ($main-footer-padding * 2)) !default;
$main-footer-height: calc(#{$main-footer-height-inner} + #{$main-footer-border-top-width}) !default;
$main-footer-height-sm-inner: (($font-size-sm * $line-height-base) + ($main-footer-padding-sm * 2)) !default;
$main-footer-height-sm: calc(#{$main-footer-height-sm-inner} + #{$main-footer-border-top-width}) !default;
$main-footer-bg: $white !default;
// SIDEBAR SKINS
// --------------------------------------------------------
// Dark sidebar
$sidebar-dark-bg: $dark !default;
$sidebar-dark-hover-bg: hsla(100, 100%, 100%, 0.1) !default;
$sidebar-dark-color: #C2C7D0 !default;
$sidebar-dark-hover-color: $white !default;
$sidebar-dark-active-color: $white !default;
$sidebar-dark-submenu-bg: transparent !default;
$sidebar-dark-submenu-color: #C2C7D0 !default;
$sidebar-dark-submenu-hover-color: $white !default;
$sidebar-dark-submenu-hover-bg: $sidebar-dark-hover-bg !default;
$sidebar-dark-submenu-active-color: $sidebar-dark-bg !default;
$sidebar-dark-submenu-active-bg: hsla(100, 100%, 100%, 0.9) !default;
$sidebar-dark-header-color: $white !default;
// Light sidebar
$sidebar-light-bg: $white !default;
$sidebar-light-hover-bg: rgba($black, .1) !default;
$sidebar-light-color: $gray-800 !default;
$sidebar-light-hover-color: $gray-900 !default;
$sidebar-light-active-color: $black !default;
$sidebar-light-submenu-bg: transparent !default;
$sidebar-light-submenu-color: #777 !default;
$sidebar-light-submenu-hover-color: #000 !default;
$sidebar-light-submenu-hover-bg: $sidebar-light-hover-bg !default;
$sidebar-light-submenu-active-color: $sidebar-light-hover-color !default;
$sidebar-light-submenu-active-bg: $sidebar-light-submenu-hover-bg !default;
$sidebar-light-header-color: $gray-800 !default;
// SIDEBAR MINI
// --------------------------------------------------------
$sidebar-mini-width: ($nav-link-padding-x + $sidebar-padding-x + .8rem) * 2 !default;
$sidebar-nav-icon-width: $sidebar-mini-width - (($sidebar-padding-x + $nav-link-padding-x) * 2) !default;
$sidebar-user-image-width: $sidebar-nav-icon-width + ($nav-link-padding-x / 2) !default;
// CONTROL SIDEBAR
// --------------------------------------------------------
$control-sidebar-width: $sidebar-width !default;
// Cards
// --------------------------------------------------------
$card-border-color: $gray-100 !default;
$card-dark-border-color: lighten($gray-900, 10%) !default;
$card-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2) !default;
$card-title-font-size: 1.1rem !default;
$card-title-font-size-sm: 1rem !default;
$card-title-font-weight: $font-weight-normal !default;
$card-nav-link-padding-sm-y: .4rem !default;
$card-nav-link-padding-sm-x: .8rem !default;
$card-img-size: $img-size-sm !default;
// PROGRESS BARS
// --------------------------------------------------------
$progress-bar-border-radius: 1px !default;
$progress-bar-sm-border-radius: 1px !default;
$progress-bar-xs-border-radius: 1px !default;
// DIRECT CHAT
// --------------------------------------------------------
$direct-chat-height: 250px !default;
$direct-chat-default-msg-bg: $gray-x-light !default;
$direct-chat-default-font-color: #444 !default;
$direct-chat-default-msg-border-color: $gray-x-light !default;
// CHAT WIDGET
// --------------------------------------------------------
$attachment-border-radius: 3px !default;
// Z-INDEX
// --------------------------------------------------------
$zindex-main-header: $zindex-fixed + 4 !default;
$zindex-main-sidebar: $zindex-fixed + 8 !default;
$zindex-main-footer: $zindex-fixed + 2 !default;
$zindex-control-sidebar: $zindex-fixed + 1 !default;
$zindex-sidebar-mini-links: 010 !default;
$zindex-toasts: $zindex-main-sidebar + 2 !default;
// TRANSITIONS SETTINGS
// --------------------------------------------------------
// Transition global options
$transition-speed: 0.3s !default;
$transition-fn: ease-in-out !default;
// TEXT
// --------------------------------------------------------
$font-size-xs: ($font-size-base * .75) !default;
$font-size-xl: ($font-size-base * 2) !default;
// BUTTON
// --------------------------------------------------------
$button-default-background-color: $gray-100 !default;
$button-default-color: #444 !default;
$button-default-border-color: #ddd !default;
$button-padding-y-xs: .125rem !default;
$button-padding-x-xs: .25rem !default;
$button-line-height-xs: $line-height-sm !default;
$button-font-size-xs: ($font-size-base * .75) !default;
$button-border-radius-xs: .15rem !default;
// ELEVATION
// --------------------------------------------------------
$elevations: ();
$elevations: map-merge((
1: unquote('0 1px 3px ' + rgba($black, 0.12) + ', 0 1px 2px ' + rgba($black, 0.24)),
2: unquote('0 3px 6px ' + rgba($black, 0.16) + ', 0 3px 6px ' + rgba($black, 0.23)),
3: unquote('0 10px 20px ' + rgba($black, 0.19) + ', 0 6px 6px ' + rgba($black, 0.23)),
4: unquote('0 14px 28px ' + rgba($black, 0.25) + ', 0 10px 10px ' + rgba($black, 0.22)),
5: unquote('0 19px 38px ' + rgba($black, 0.30) + ', 0 15px 12px ' + rgba($black, 0.22)),
), $elevations);
// RIBBON
// --------------------------------------------------------
$ribbon-border-size: 3px !default;
$ribbon-line-height: 100% !default;
$ribbon-padding: .375rem 0 !default;
$ribbon-font-size: .8rem !default;
$ribbon-width: 90px !default;
$ribbon-wrapper-size: 70px !default;
$ribbon-top: 10px !default;
$ribbon-right: -2px !default;
$ribbon-lg-wrapper-size: 120px !default;
$ribbon-lg-width: 160px !default;
$ribbon-lg-top: 26px !default;
$ribbon-lg-right: 0px !default;
$ribbon-xl-wrapper-size: 180px !default;
$ribbon-xl-width: 240px !default;
$ribbon-xl-top: 47px !default;
$ribbon-xl-right: 4px !default;

View File

@@ -0,0 +1,94 @@
//
// Mixins: Accent
//
// Accent Variant
@mixin accent-variant($name, $color) {
.accent-#{$name} {
$link-color: $color;
$link-hover-color: darken($color, 15%);
$pagination-active-bg: $color;
$pagination-active-border-color: $color;
.btn-link,
a:not(.dropdown-item):not(.btn-app):not(.nav-link):not(.brand-link):not(.page-link) {
color: $link-color;
@include hover {
color: $link-hover-color;
}
}
.dropdown-item {
&:active,
&.active {
background: $color;
color: color-yiq($color);
}
}
.custom-control-input:checked ~ .custom-control-label {
&::before {
background: $color;
border-color: darken($color, 20%);
}
&::after {
$newColor: color-yiq($color);
background-image: str-replace($custom-checkbox-indicator-icon-checked, str-replace(#{$custom-control-indicator-checked-color}, '#', '%23'), str-replace(#{$newColor}, '#', '%23'));
}
}
.form-control:focus:not(.is-invalid):not(.is-warning):not(.is-valid),
.custom-select:focus,
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before,
.custom-file-input:focus ~ .custom-file-label {
border-color: lighten($color, 25%);
}
.page-item {
.page-link {
color: $link-color;
}
&.active a,
&.active .page-link {
background-color: $pagination-active-bg;
border-color: $pagination-active-border-color;
color: $pagination-active-color;
}
&.disabled a,
&.disabled .page-link {
background-color: $pagination-disabled-bg;
border-color: $pagination-disabled-border-color;
color: $pagination-disabled-color;
}
}
[class*="sidebar-dark-"] {
.sidebar {
a:not(.dropdown-item):not(.btn-app):not(.nav-link):not(.brand-link) {
color: $sidebar-dark-color;
@include hover {
color: $sidebar-dark-hover-color;
}
}
}
}
[class*="sidebar-light-"] {
.sidebar {
a:not(.dropdown-item):not(.btn-app):not(.nav-link):not(.brand-link) {
color: $sidebar-light-color;
@include hover {
color: $sidebar-light-hover-color;
}
}
}
}
}
}

View File

@@ -0,0 +1,64 @@
//
// Mixins: Backgrounds
//
// Background Variant
@mixin background-variant($name, $color) {
.bg-#{$name} {
background-color: #{$color} !important;
&,
> a {
color: color-yiq($color) !important;
}
&.btn {
&:hover {
border-color: darken($color, 10%);
color: darken(color-yiq($color), 7.5%);
}
&:not(:disabled):not(.disabled):active,
&:not(:disabled):not(.disabled).active,
&:active,
&.active {
background-color: darken($color, 10%) !important;
border-color: darken($color, 12.5%);
color: color-yiq(darken($color, 10%));
}
}
}
}
// Background Gradient Variant
@mixin background-gradient-variant($name, $color) {
.bg-gradient-#{$name} {
@include bg-gradient-variant('&', $color);
color: color-yiq($color);
&.btn {
&.disabled,
&:disabled,
&:not(:disabled):not(.disabled):active,
&:not(:disabled):not(.disabled).active,
.show > &.dropdown-toggle {
background-image: none !important;
}
&:hover {
@include bg-gradient-variant('&', darken($color, 7.5%));
border-color: darken($color, 10%);
color: darken(color-yiq($color), 7.5%);
}
&:not(:disabled):not(.disabled):active,
&:not(:disabled):not(.disabled).active,
&:active,
&.active {
@include bg-gradient-variant('&', darken($color, 10%));
border-color: darken($color, 12.5%);
color: color-yiq(darken($color, 10%));
}
}
}
}

View File

@@ -0,0 +1,82 @@
//
// Mixins: Cards Variant
//
@mixin cards-variant($name, $color) {
.card-#{$name} {
&:not(.card-outline) {
> .card-header {
background-color: $color;
&,
a {
color: color-yiq($color);
}
a.active {
color: color-yiq($white);
}
}
}
&.card-outline {
border-top: 3px solid $color;
}
&.card-outline-tabs {
> .card-header {
a {
&:hover {
border-top: 3px solid $nav-tabs-border-color;
}
&.active {
border-top: 3px solid $color;
}
}
}
}
}
.bg-#{$name},
.bg-gradient-#{$name},
.card-#{$name}:not(.card-outline) {
.btn-tool {
color: rgba(color-yiq($color), 0.8);
&:hover {
color: color-yiq($color);
}
}
}
.card.bg-#{$name},
.card.bg-gradient-#{$name} {
.bootstrap-datetimepicker-widget {
.table td,
.table th {
border: none;
}
table thead tr:first-child th:hover,
table td.day:hover,
table td.hour:hover,
table td.minute:hover,
table td.second:hover {
background: darken($color, 8%);
color: color-yiq($color);
}
table td.today::before {
border-bottom-color: color-yiq($color);
}
table td.active,
table td.active:hover {
background: lighten($color, 10%);
color: color-yiq($color);
}
}
}
}

View File

@@ -0,0 +1,81 @@
//
// Mixins: Custom Forms
//
// Custom Switch Variant
@mixin custom-switch-variant($name, $color) {
&.custom-switch-off-#{$name} {
& .custom-control-input ~ .custom-control-label::before {
background: #{$color};
border-color: darken($color, 20%);
}
& .custom-control-input:focus ~ .custom-control-label::before {
box-shadow: 0 0 0 1px $body-bg, 0 0 0 2px rgba($color, .25);
}
& .custom-control-input ~ .custom-control-label::after {
background: darken($color, 25%);
}
}
&.custom-switch-on-#{$name} {
& .custom-control-input:checked ~ .custom-control-label::before {
background: #{$color};
border-color: darken($color, 20%);
}
& .custom-control-input:checked:focus ~ .custom-control-label::before {
box-shadow: 0 0 0 1px $body-bg, 0 0 0 2px rgba($color, .25);
}
& .custom-control-input:checked ~ .custom-control-label::after {
background: lighten($color, 30%);
}
}
}
// Custom Range Variant
@mixin custom-range-variant($name, $color) {
&.custom-range-#{$name} {
&:focus {
outline: none;
&::-webkit-slider-thumb {
box-shadow: 0 0 0 1px $body-bg, 0 0 0 2px rgba($color, .25);
}
&::-moz-range-thumb {
box-shadow: 0 0 0 1px $body-bg, 0 0 0 2px rgba($color, .25);
}
&::-ms-thumb {
box-shadow: 0 0 0 1px $body-bg, 0 0 0 2px rgba($color, .25);
}
}
&::-webkit-slider-thumb {
background-color: $color;
&:active {
background-color: lighten($color, 35%);
}
}
&::-moz-range-thumb {
background-color: $color;
&:active {
background-color: lighten($color, 35%);
}
}
&::-ms-thumb {
background-color: $color;
&:active {
background-color: lighten($color, 35%);
}
}
}
}

View File

@@ -0,0 +1,17 @@
//
// Mixins: Direct Chat
//
// Direct Chat Variant
@mixin direct-chat-variant($bg-color, $color: #fff) {
.right > .direct-chat-text {
background: $bg-color;
border-color: $bg-color;
color: color-yiq($bg-color);
&::after,
&::before {
border-left-color: $bg-color;
}
}
}

View File

@@ -0,0 +1,35 @@
//
// Mixins: Miscellaneous
//
// ETC
@mixin translate($x, $y) {
transform: translate($x, $y);
}
// Different radius each side
@mixin border-radius-sides($top-left, $top-right, $bottom-left, $bottom-right) {
border-radius: $top-left $top-right $bottom-left $bottom-right;
}
@mixin calc($property, $expression) {
#{$property}: calc(#{$expression});
}
@mixin rotate($value) {
transform: rotate($value);
}
@mixin animation($animation) {
animation: $animation;
}
// Gradient background
@mixin gradient($color: #F5F5F5, $start: #EEE, $stop: #FFF) {
background: $color;
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, $start), color-stop(1, $stop));
background: -ms-linear-gradient(bottom, $start, $stop);
background: -moz-linear-gradient(center bottom, $start 0%, $stop 100%);
background: -o-linear-gradient($stop, $start);
}

View File

@@ -0,0 +1,34 @@
//
// Mixins: Navbar
//
// Navbar Variant
@mixin navbar-variant($color, $font-color: rgba(255, 255, 255, 0.8), $hover-color: #f6f6f6, $hover-bg: rgba(0, 0, 0, 0.1)) {
background-color: $color;
.nav > li > a {
color: $font-color;
}
.nav > li > a:hover,
.nav > li > a:active,
.nav > li > a:focus,
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus,
.nav > .active > a {
background: $hover-bg;
color: $hover-color;
}
// Add color to the sidebar toggle button
.sidebar-toggle {
color: $font-color;
&:hover,
&:focus {
background: $hover-bg;
color: $hover-color;
}
}
}

View File

@@ -0,0 +1,155 @@
//
// Mixins: Sidebar
//
// Sidebar Color
@mixin sidebar-color($color) {
.nav-sidebar > .nav-item {
& > .nav-link.active {
background-color: $color;
color: color-yiq($color);
}
}
.nav-sidebar.nav-legacy > .nav-item {
& > .nav-link.active {
border-color: $color;
}
}
}
// Sidebar Mini Breakpoints
@mixin sidebar-mini-breakpoint() {
// A fix for text overflow while transitioning from sidebar mini to full sidebar
.nav-sidebar,
.nav-sidebar > .nav-header,
.nav-sidebar .nav-link {
white-space: nowrap;
overflow: hidden;
}
// When the sidebar is collapsed...
&.sidebar-collapse {
.d-hidden-mini {
display: none;
}
// Apply the new margins to the main content and footer
.content-wrapper,
.main-footer,
.main-header {
margin-left: $sidebar-mini-width !important;
}
// Make the sidebar headers
.nav-sidebar .nav-header {
display: none;
}
.nav-sidebar .nav-link p {
width: 0;
}
.sidebar .user-panel > .info,
.nav-sidebar .nav-link p,
.brand-text {
margin-left: -10px;
opacity: 0;
visibility: hidden;
}
.logo-xl {
opacity: 0;
visibility: hidden;
}
.logo-xs {
display: inline-block;
opacity: 1;
visibility: visible;
}
// Modify the sidebar to shrink instead of disappearing
.main-sidebar {
overflow-x: hidden;
&,
&::before {
// Don't go away! Just shrink
margin-left: 0;
width: $sidebar-mini-width;
}
.user-panel {
.image {
float: none;
}
}
&:hover,
&.sidebar-focused {
width: $sidebar-width;
.brand-link {
width: $sidebar-width;
}
.user-panel {
text-align: left;
.image {
float: left;
}
}
.user-panel > .info,
.nav-sidebar .nav-link p,
.brand-text,
.logo-xl {
display: inline-block;
margin-left: 0;
opacity: 1;
visibility: visible;
}
.logo-xs {
opacity: 0;
visibility: hidden;
}
.brand-image {
margin-right: .5rem;
}
// Make the sidebar links, menus, labels, badges
// and angle icons disappear
.sidebar-form,
.user-panel > .info {
display: block !important;
-webkit-transform: translateZ(0);
}
.nav-sidebar > .nav-item > .nav-link > span {
display: inline-block !important;
}
}
}
// Make an element visible only when sidebar mini is active
.visible-sidebar-mini {
display: block !important;
}
&.layout-fixed {
.main-sidebar:hover {
.brand-link {
width: $sidebar-width;
}
}
.brand-link {
width: $sidebar-mini-width;
}
}
}
}

View File

@@ -0,0 +1,23 @@
//
// Mixins: Toasts
//
// Toast Variant
@mixin toast-variant($name, $color) {
&.bg-#{$name} {
background: rgba($color, .9) !important;
@if (color-yiq($color) == $yiq-text-light) {
.close {
color: color-yiq($color);
text-shadow: 0 1px 0 #000;
}
}
.toast-header {
background: rgba($color, .85);
color: color-yiq($color);
}
}
}

View File

@@ -0,0 +1,43 @@
//
// Pages: 400 and 500 error pages
//
.error-page {
margin: 20px auto 0;
width: 600px;
@include media-breakpoint-down(sm) {
width: 100%;
}
//For the error number e.g: 404
> .headline {
float: left;
font-size: 100px;
font-weight: 300;
@include media-breakpoint-down(sm) {
float: none;
text-align: center;
}
}
//For the message
> .error-content {
display: block;
margin-left: 190px;
@include media-breakpoint-down(sm) {
margin-left: 0;
}
> h3 {
font-size: 25px;
font-weight: 300;
@include media-breakpoint-down(sm) {
text-align: center;
}
}
}
}

View File

@@ -0,0 +1,45 @@
//
// Pages: E-commerce
//
// product image
.product-image {
@include img-fluid;
width: 100%;
}
// product image thumbnails list
.product-image-thumbs {
align-items: stretch;
display: flex;
margin-top: 2rem;
}
// product image thumbnail
.product-image-thumb {
@include box-shadow($thumbnail-box-shadow);
@include border-radius($thumbnail-border-radius);
background-color: $thumbnail-bg;
border: $thumbnail-border-width solid $thumbnail-border-color;
display: flex;
margin-right: 1rem;
max-width: 6.5rem + ($thumbnail-padding * 2);
padding: $thumbnail-padding * 2;
img {
@include img-fluid;
align-self: center;
}
&:hover {
opacity: 0.5;
}
}
// product share
.product-share {
a {
margin-right: .5rem;
}
}

View File

@@ -0,0 +1,13 @@
//
// Pages: Invoice
//
.invoice {
background: $white;
border: 1px solid $card-border-color;
position: relative;
}
.invoice-title {
margin-top: 0;
}

View File

@@ -0,0 +1,78 @@
//
// Pages: Lock Screen
//
// ADD THIS CLASS TO THE <BODY> TAG
.lockscreen {
background: $gray-200;
// User name [optional]
.lockscreen-name {
font-weight: 600;
text-align: center;
}
}
.lockscreen-logo {
font-size: 35px;
font-weight: 300;
margin-bottom: 25px;
text-align: center;
a {
color: $gray-700;
}
}
.lockscreen-wrapper {
margin: 0 auto;
margin-top: 10%;
max-width: 400px;
}
// Will contain the image and the sign in form
.lockscreen-item {
@include border-radius(4px);
background: $white;
margin: 10px auto 30px;
padding: 0;
position: relative;
width: 290px;
}
// User image
.lockscreen-image {
@include border-radius(50%);
background: $white;
left: -10px;
padding: 5px;
position: absolute;
top: -25px;
z-index: 10;
> img {
@include border-radius(50%);
height: 70px;
width: 70px;
}
}
// Contains the password input and the login button
.lockscreen-credentials {
margin-left: 70px;
.form-control {
border: 0;
}
.btn {
background-color: $white;
border: 0;
padding: 0 10px;
}
}
.lockscreen-footer {
margin-top: 10px;
}

View File

@@ -0,0 +1,97 @@
//
// Pages: Login & Register
//
.login-logo,
.register-logo {
font-size: 2.1rem;
font-weight: 300;
margin-bottom: .9rem;
text-align: center;
a {
color: $gray-700;
}
}
.login-page,
.register-page {
align-items: center;
background: $gray-200;
display: flex;
flex-direction: column;
height: 100vh;
justify-content: center;
}
.login-box,
.register-box {
width: 360px;
@media (max-width: map-get($grid-breakpoints, sm)) {
margin-top: .5rem;
width: 90%;
}
}
.login-card-body,
.register-card-body {
background: $white;
border-top: 0;
color: #666;
padding: 20px;
.input-group {
.form-control {
border-right: 0;
&:focus {
box-shadow: none;
& ~ .input-group-append .input-group-text {
border-color: $input-focus-border-color;
}
}
&.is-valid {
&:focus {
box-shadow: none;
}
& ~ .input-group-append .input-group-text {
border-color: $success;
}
}
&.is-invalid {
&:focus {
box-shadow: none;
}
& ~ .input-group-append .input-group-text {
border-color: $danger;
}
}
}
.input-group-text {
background-color: transparent;
border-bottom-right-radius: $border-radius;
border-left: 0;
border-top-right-radius: $border-radius;
color: #777;
transition: $input-transition;
}
}
}
.login-box-msg,
.register-box-msg {
margin: 0;
padding: 0 20px 20px;
text-align: center;
}
.social-auth-links {
margin: 10px 0;
}

View File

@@ -0,0 +1,99 @@
//
// Pages: Mailbox
//
.mailbox-messages {
> .table {
margin: 0;
}
}
.mailbox-controls {
padding: 5px;
&.with-border {
border-bottom: 1px solid $card-border-color;
}
}
.mailbox-read-info {
border-bottom: 1px solid $card-border-color;
padding: 10px;
h3 {
font-size: 20px;
margin: 0;
}
h5 {
margin: 0;
padding: 5px 0 0;
}
}
.mailbox-read-time {
color: #999;
font-size: 13px;
}
.mailbox-read-message {
padding: 10px;
}
.mailbox-attachments {
@include list-unstyled;
li {
border: 1px solid #eee;
float: left;
margin-bottom: 10px;
margin-right: 10px;
width: 200px;
}
}
.mailbox-attachment-name {
color: #666;
font-weight: bold;
}
.mailbox-attachment-icon,
.mailbox-attachment-info,
.mailbox-attachment-size {
display: block;
}
.mailbox-attachment-info {
background: $gray-100;
padding: 10px;
}
.mailbox-attachment-size {
color: #999;
font-size: 12px;
> span {
display: inline-block;
padding-top: 0.75rem;
}
}
.mailbox-attachment-icon {
color: #666;
font-size: 65px;
max-height: 132.5px;
padding: 20px 10px;
text-align: center;
&.has-img {
padding: 0;
> img {
height: auto;
max-width: 100%;
}
}
}
.mailbox-attachment-close {
@extend .close;
}

View File

@@ -0,0 +1,37 @@
//
// Pages: Profile
//
.profile-user-img {
border: 3px solid $gray-500;
margin: 0 auto;
padding: 3px;
width: 100px;
}
.profile-username {
font-size: 21px;
margin-top: 5px;
}
.post {
border-bottom: 1px solid $gray-500;
color: #666;
margin-bottom: 15px;
padding-bottom: 15px;
&:last-of-type {
border-bottom: 0;
margin-bottom: 0;
padding-bottom: 0;
}
.user-block {
margin-bottom: 15px;
width: 100%;
}
.row {
width: 100%;
}
}

View File

@@ -0,0 +1,26 @@
//
// Pages: Projects
//
.projects {
td {
vertical-align: middle;
}
.list-inline {
margin-bottom: 0;
}
// table avatar
img.table-avatar,
.table-avatar img {
border-radius: 50%;
display: inline;
width: 2.5rem;
}
// project state
.project-state {
text-align: center;
}
}

View File

@@ -0,0 +1,14 @@
//
// Part: Components
//
@import '../forms';
@import '../progress-bars';
@import '../cards';
@import '../modals';
@import '../toasts';
@import '../buttons';
@import '../callout';
@import '../alerts';
@import '../table';
@import '../carousel';

View File

@@ -0,0 +1,12 @@
//
// Part: Core
//
@import '../layout';
@import '../main-header';
@import '../brand';
@import '../main-sidebar';
@import '../sidebar-mini';
@import '../control-sidebar';
@import '../dropdown';
@import '../navs';

View File

@@ -0,0 +1,11 @@
//
// Part: Extra Components
//
@import '../small-box';
@import '../info-box';
@import '../timeline';
@import '../products';
@import '../direct-chat';
@import '../users-list';
@import '../social-widgets';

View File

@@ -0,0 +1,9 @@
//
// Part: Miscellaneous
//
@import '../miscellaneous';
@import '../print';
@import '../text';
@import '../elevation';
@import '../colors';

View File

@@ -0,0 +1,12 @@
//
// Part: Pages
//
@import '../pages/mailbox';
@import '../pages/lockscreen';
@import '../pages/login_and_register';
@import '../pages/404_500_errors';
@import '../pages/invoice';
@import '../pages/profile';
@import '../pages/e-commerce';
@import '../pages/projects';

View File

@@ -0,0 +1,16 @@
//
// Part: Plugins
//
@import '../plugins/mixins';
@import '../plugins/fullcalendar';
@import '../plugins/select2';
@import '../plugins/bootstrap-slider';
@import '../plugins/icheck-bootstrap';
@import '../plugins/mapael';
@import '../plugins/jqvmap';
@import '../plugins/sweetalert2';
@import '../plugins/toastr';
@import '../plugins/pace';
@import '../plugins/bootstrap-switch';
@import '../plugins/miscellaneous';

View File

@@ -0,0 +1,35 @@
//
// Plugin: Bootstrap Slider
//
// Tooltip fix
.slider .tooltip.in {
opacity: $tooltip-opacity;
}
// Style override
.slider {
&.slider-vertical {
height: 100%;
}
&.slider-horizontal {
width: 100%;
}
}
// Colors
@each $name, $color in $theme-colors {
.slider-#{$name} .slider {
.slider-selection {
background: $color;
}
}
}
@each $name, $color in $colors {
.slider-#{$name} .slider {
.slider-selection {
background: $color;
}
}
}

View File

@@ -0,0 +1,175 @@
/**
* bootstrap-switch - Turn checkboxes and radio buttons into toggle switches.
*
* @version v3.4 (MODDED)
* @homepage https://bttstrp.github.io/bootstrap-switch
* @author Mattia Larentis <mattia@larentis.eu> (http://larentis.eu)
* @license MIT
*/
$bootstrap-switch-border-radius: $btn-border-radius;
$bootstrap-switch-handle-border-radius: .1rem;
.bootstrap-switch {
border: $input-border-width solid $input-border-color;
border-radius: $bootstrap-switch-border-radius;
cursor: pointer;
direction: ltr;
display: inline-block;
line-height: .5rem;
overflow: hidden;
position: relative;
text-align: left;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
user-select: none;
vertical-align: middle;
z-index: 0;
.bootstrap-switch-container {
border-radius: $bootstrap-switch-border-radius;
display: inline-block;
top: 0;
transform: translate3d(0, 0, 0);
}
&:focus-within {
box-shadow: $input-btn-focus-box-shadow;
}
.bootstrap-switch-handle-on,
.bootstrap-switch-handle-off,
.bootstrap-switch-label {
box-sizing: border-box;
cursor: pointer;
display: table-cell;
font-size: 1rem;
font-weight: 500;
line-height: 1.2rem;
padding: .25rem .5rem;
vertical-align: middle;
}
.bootstrap-switch-handle-on,
.bootstrap-switch-handle-off {
text-align: center;
z-index: 1;
&.bootstrap-switch-default {
background: $gray-200;
color: color-yiq($gray-200);
}
@each $name, $color in $theme-colors {
&.bootstrap-switch-#{$name} {
background: $color;
color: color-yiq($color);
}
}
@each $name, $color in $colors {
&.bootstrap-switch-#{$name} {
background: $color;
color: color-yiq($color);
}
}
}
.bootstrap-switch-handle-on {
border-bottom-left-radius: $bootstrap-switch-handle-border-radius;
border-top-left-radius: $bootstrap-switch-handle-border-radius;
}
.bootstrap-switch-handle-off {
border-bottom-right-radius: $bootstrap-switch-handle-border-radius;
border-top-right-radius: $bootstrap-switch-handle-border-radius;
}
input[type='radio'],
input[type='checkbox'] {
filter: alpha(opacity=0);
left: 0;
margin: 0;
opacity: 0;
position: absolute;
top: 0;
visibility: hidden;
z-index: -1;
}
&.bootstrap-switch-mini {
.bootstrap-switch-handle-on,
.bootstrap-switch-handle-off,
.bootstrap-switch-label {
font-size: .875rem;
line-height: 1.5;
padding: .1rem .3rem;
}
}
&.bootstrap-switch-small {
.bootstrap-switch-handle-on,
.bootstrap-switch-handle-off,
.bootstrap-switch-label {
font-size: .875rem;
line-height: 1.5;
padding: .2rem .4rem;
}
}
&.bootstrap-switch-large {
.bootstrap-switch-handle-on,
.bootstrap-switch-handle-off,
.bootstrap-switch-label {
font-size: 1.25rem;
line-height: 1.3333333rem;
padding: .3rem .5rem;
}
}
&.bootstrap-switch-disabled,
&.bootstrap-switch-readonly,
&.bootstrap-switch-indeterminate {
cursor: default;
.bootstrap-switch-handle-on,
.bootstrap-switch-handle-off,
.bootstrap-switch-label {
cursor: default;
filter: alpha(opacity=50);
opacity: .5;
}
}
&.bootstrap-switch-animate .bootstrap-switch-container {
transition: margin-left .5s;
}
&.bootstrap-switch-inverse {
.bootstrap-switch-handle-on {
border-radius: 0 $bootstrap-switch-handle-border-radius $bootstrap-switch-handle-border-radius 0;
}
.bootstrap-switch-handle-off {
border-radius: $bootstrap-switch-handle-border-radius 0 0 $bootstrap-switch-handle-border-radius;
}
}
// &.bootstrap-switch-focused {
// border-color: $input-btn-focus-color;
// box-shadow: $input-btn-focus-box-shadow;
// outline: 0;
// }
&.bootstrap-switch-on .bootstrap-switch-label,
&.bootstrap-switch-inverse.bootstrap-switch-off .bootstrap-switch-label {
border-bottom-right-radius: $bootstrap-switch-handle-border-radius;
border-top-right-radius: $bootstrap-switch-handle-border-radius;
}
&.bootstrap-switch-off .bootstrap-switch-label,
&.bootstrap-switch-inverse.bootstrap-switch-on .bootstrap-switch-label {
border-bottom-left-radius: $bootstrap-switch-handle-border-radius;
border-top-left-radius: $bootstrap-switch-handle-border-radius;
}
}

View File

@@ -0,0 +1,131 @@
//
// Plugin: Full Calendar
//
// Buttons
.fc-button {
background: $gray-100;
background-image: none;
border-bottom-color: #ddd;
border-color: #ddd;
color: $gray-700;
&:hover,
&:active,
&.hover {
background-color: #e9e9e9;
}
}
// Calendar title
.fc-header-title h2 {
color: #666;
font-size: 15px;
line-height: 1.6em;
margin-left: 10px;
}
.fc-header-right {
padding-right: 10px;
}
.fc-header-left {
padding-left: 10px;
}
// Calendar table header cells
.fc-widget-header {
background: #fafafa;
}
.fc-grid {
border: 0;
width: 100%;
}
.fc-widget-header:first-of-type,
.fc-widget-content:first-of-type {
border-left: 0;
border-right: 0;
}
.fc-widget-header:last-of-type,
.fc-widget-content:last-of-type {
border-right: 0;
}
.fc-toolbar,
.fc-toolbar.fc-header-toolbar {
margin: 0;
padding: 1rem;
}
@include media-breakpoint-down(xs) {
.fc-toolbar {
flex-direction: column;
.fc-left {
order: 1;
margin-bottom: .5rem;
}
.fc-center {
order: 0;
margin-bottom: .375rem;
}
.fc-right {
order: 2;
}
}
}
.fc-day-number {
font-size: 20px;
font-weight: 300;
padding-right: 10px;
}
.fc-color-picker {
list-style: none;
margin: 0;
padding: 0;
> li {
float: left;
font-size: 30px;
line-height: 30px;
margin-right: 5px;
.fa,
.fas,
.far,
.fab,
.glyphicon,
.ion {
transition: transform linear .3s;
&:hover {
@include rotate(30deg);
}
}
}
}
#add-new-event {
transition: all linear .3s;
}
.external-event {
@include box-shadow($card-shadow);
border-radius: $border-radius;
cursor: move;
font-weight: bold;
margin-bottom: 4px;
padding: 5px 10px;
&:hover {
@include box-shadow(inset 0 0 90px rgba(0, 0, 0, 0.2));
}
}

Some files were not shown because too many files have changed in this diff Show More