delete
This commit is contained in:
zhaoyingjie
parent
ede3d44844
commit
aa9fb002c8
37
.github/CONTRIBUTING.md
vendored
37
.github/CONTRIBUTING.md
vendored
|
|
@ -1,37 +0,0 @@
|
|||
|
||||
# Contributing to AdminLTE
|
||||
|
||||
Contributions are always **welcome and recommended**! Here is how for beginner's: [Get started with open source click here](https://youtu.be/GbqSvJs-6W4)
|
||||
|
||||
1. 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](https://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).
|
||||
2. Installation :
|
||||
* Fork the repository ([here is the guide](https://help.github.com/articles/fork-a-repo/)).
|
||||
* Clone to your machine
|
||||
|
||||
```bash
|
||||
git clone https://github.com/YOUR_USERNAME/AdminLTE.git
|
||||
```
|
||||
* Create a new branch
|
||||
3. Compile dist files (Development) :
|
||||
* To compile the dist files you need Node.js 10 or higher/npm (node package manager)
|
||||
* Delete ./package-lock.json file
|
||||
* `npm install` (install npm deps)
|
||||
* `npm run dev` (developer mode, autocompile with browsersync support for live demo)
|
||||
* Make your changes only in ./build Folder OR package.json OR ./dist/js/demo.js OR package-lock.json OR ./dist/js/pages/ OR ./docs OR in any html files which are necessary for contribution
|
||||
* Do not make changes in ./dist/css/ AND ./dist/js/ AND ./plugins Because it contains compiled files and do not include in PR (Pull Request)
|
||||
* `npm run production` (compile css/js files and test all pages are perfectly working fine, before creating a pull request)
|
||||
4. Create a pull request
|
||||
|
||||
## Online one-click setup for contributing
|
||||
|
||||
You can use Gitpod(an online IDE which is free for Open Source) for working on issues or making PRs (Pull Requests). With a single click it will launch a workspace and automatically:
|
||||
|
||||
- clone the `AdminLTE` repo.
|
||||
- install the dependencies.
|
||||
- run `npm run dev` to start the server.
|
||||
|
||||
[](https://gitpod.io/from-referrer/)
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
---
|
||||
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.1.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.
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
---
|
||||
name: Feature request for AdminLTE v4.x
|
||||
about: Suggest an idea for this project
|
||||
title: "[FEATURE]"
|
||||
labels: type:enhancement, version:4.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.
|
||||
5
.github/codeql/codeql-config.yml
vendored
5
.github/codeql/codeql-config.yml
vendored
|
|
@ -1,5 +0,0 @@
|
|||
name: "CodeQL config"
|
||||
|
||||
paths-ignore:
|
||||
- docs/assets/plugins/
|
||||
- plugins/
|
||||
18
.github/dependabot.yml
vendored
18
.github/dependabot.yml
vendored
|
|
@ -1,18 +0,0 @@
|
|||
version: 2
|
||||
updates:
|
||||
- package-ecosystem: npm
|
||||
directory: "/"
|
||||
schedule:
|
||||
interval: weekly
|
||||
day: monday
|
||||
time: "03:00"
|
||||
open-pull-requests-limit: 10
|
||||
versioning-strategy: increase
|
||||
- package-ecosystem: bundler
|
||||
directory: "/docs/"
|
||||
schedule:
|
||||
interval: weekly
|
||||
day: monday
|
||||
time: "03:00"
|
||||
open-pull-requests-limit: 10
|
||||
versioning-strategy: increase
|
||||
64
.github/workflows/ci.yml
vendored
64
.github/workflows/ci.yml
vendored
|
|
@ -1,64 +0,0 @@
|
|||
name: CI
|
||||
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- master
|
||||
- v4-dev
|
||||
pull_request:
|
||||
branches:
|
||||
- "**"
|
||||
|
||||
env:
|
||||
FORCE_COLOR: 2
|
||||
|
||||
jobs:
|
||||
run:
|
||||
runs-on: ${{ matrix.os }}
|
||||
|
||||
strategy:
|
||||
fail-fast: false
|
||||
matrix:
|
||||
node:
|
||||
- "12.x"
|
||||
- "14.x"
|
||||
- "16.x"
|
||||
os:
|
||||
- "ubuntu-latest"
|
||||
- "macos-latest"
|
||||
- "windows-latest"
|
||||
|
||||
steps:
|
||||
- name: Clone repository
|
||||
uses: actions/checkout@v2
|
||||
|
||||
- name: Use Node.js ${{ matrix.node }}
|
||||
uses: actions/setup-node@v2
|
||||
with:
|
||||
node-version: ${{ matrix.node }}
|
||||
|
||||
- name: Get npm cache directory
|
||||
id: npm-cache
|
||||
run: |
|
||||
echo "::set-output name=dir::$(npm config get cache)"
|
||||
|
||||
- name: Set up npm cache
|
||||
uses: actions/cache@v2
|
||||
with:
|
||||
path: ${{ steps.npm-cache.outputs.dir }}
|
||||
key: ${{ runner.os }}-node-v${{ matrix.node }}-${{ hashFiles('package.json') }}-${{ hashFiles('package-lock.json') }}}
|
||||
restore-keys: |
|
||||
${{ runner.os }}-node-v${{ matrix.node }}-${{ hashFiles('package.json') }}-${{ hashFiles('package-lock.json') }}
|
||||
${{ runner.os }}-node-v${{ matrix.node }}-
|
||||
|
||||
- name: Install npm dependencies
|
||||
run: npm ci
|
||||
|
||||
- name: Build files
|
||||
run: npm run compile
|
||||
|
||||
- name: Run bundlewatch
|
||||
run: npm run bundlewatch
|
||||
if: startsWith(matrix.os, 'ubuntu') && startsWith(matrix.node, '16')
|
||||
env:
|
||||
BUNDLEWATCH_GITHUB_TOKEN: "${{ secrets.BUNDLEWATCH_GITHUB_TOKEN }}"
|
||||
36
.github/workflows/codeql.yml
vendored
36
.github/workflows/codeql.yml
vendored
|
|
@ -1,36 +0,0 @@
|
|||
name: "CodeQL"
|
||||
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- master
|
||||
- v4-dev
|
||||
- "!dependabot/**"
|
||||
pull_request:
|
||||
# The branches below must be a subset of the branches above
|
||||
branches:
|
||||
- master
|
||||
schedule:
|
||||
- cron: "0 0 * * 0"
|
||||
|
||||
jobs:
|
||||
analyze:
|
||||
name: Analyze
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- name: Checkout repository
|
||||
uses: actions/checkout@v2
|
||||
|
||||
# Initializes the CodeQL tools for scanning.
|
||||
- name: Initialize CodeQL
|
||||
uses: github/codeql-action/init@v1
|
||||
with:
|
||||
languages: "javascript"
|
||||
config-file: ./.github/codeql/codeql-config.yml
|
||||
|
||||
- name: Autobuild
|
||||
uses: github/codeql-action/autobuild@v1
|
||||
|
||||
- name: Perform CodeQL Analysis
|
||||
uses: github/codeql-action/analyze@v1
|
||||
60
.github/workflows/docs.yml
vendored
60
.github/workflows/docs.yml
vendored
|
|
@ -1,60 +0,0 @@
|
|||
name: Docs
|
||||
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- master
|
||||
- v4-dev
|
||||
pull_request:
|
||||
branches:
|
||||
- "**"
|
||||
|
||||
env:
|
||||
FORCE_COLOR: 2
|
||||
NODE: 16.x
|
||||
RUBY: 2.7
|
||||
|
||||
jobs:
|
||||
run:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- name: Clone repository
|
||||
uses: actions/checkout@v2
|
||||
|
||||
- name: Set up Node.js
|
||||
uses: actions/setup-node@v2
|
||||
with:
|
||||
node-version: "${{ env.NODE }}"
|
||||
|
||||
- name: Set up Ruby
|
||||
uses: ruby/setup-ruby@v1
|
||||
with:
|
||||
ruby-version: "${{ env.RUBY }}"
|
||||
bundler-cache: true
|
||||
working-directory: docs
|
||||
|
||||
- name: Version info
|
||||
run: |
|
||||
ruby --version
|
||||
gem --version
|
||||
bundle --version
|
||||
java -version
|
||||
|
||||
- name: Set up npm cache
|
||||
uses: actions/cache@v2
|
||||
with:
|
||||
path: ~/.npm
|
||||
key: ${{ runner.os }}-node-v${{ env.NODE }}-${{ hashFiles('package.json') }}-${{ hashFiles('package-lock.json') }}}
|
||||
restore-keys: |
|
||||
${{ runner.os }}-node-v${{ env.NODE }}-${{ hashFiles('package.json') }}-${{ hashFiles('package-lock.json') }}
|
||||
${{ runner.os }}-node-v${{ env.NODE }}-
|
||||
|
||||
- name: Install npm dependencies
|
||||
run: npm ci
|
||||
|
||||
- name: Build docs
|
||||
run: npm run docs-compile
|
||||
|
||||
- name: Run HTML validator
|
||||
run: npm run docs-lint
|
||||
42
.github/workflows/lint.yml
vendored
42
.github/workflows/lint.yml
vendored
|
|
@ -1,42 +0,0 @@
|
|||
name: Lint
|
||||
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- master
|
||||
- v4-dev
|
||||
pull_request:
|
||||
branches:
|
||||
- "**"
|
||||
|
||||
env:
|
||||
FORCE_COLOR: 2
|
||||
NODE: 16.x
|
||||
|
||||
jobs:
|
||||
run:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- name: Clone repository
|
||||
uses: actions/checkout@v2
|
||||
|
||||
- name: Set up Node.js
|
||||
uses: actions/setup-node@v2
|
||||
with:
|
||||
node-version: "${{ env.NODE }}"
|
||||
|
||||
- name: Set up npm cache
|
||||
uses: actions/cache@v2
|
||||
with:
|
||||
path: ~/.npm
|
||||
key: ${{ runner.os }}-node-v${{ env.NODE }}-${{ hashFiles('package.json') }}-${{ hashFiles('package-lock.json') }}}
|
||||
restore-keys: |
|
||||
${{ runner.os }}-node-v${{ env.NODE }}-${{ hashFiles('package.json') }}-${{ hashFiles('package-lock.json') }}
|
||||
${{ runner.os }}-node-v${{ env.NODE }}-
|
||||
|
||||
- name: Install npm dependencies
|
||||
run: npm ci
|
||||
|
||||
- name: Run lint
|
||||
run: npm run lint
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
{
|
||||
"env": {
|
||||
"browser": false,
|
||||
"node": true
|
||||
},
|
||||
"parserOptions": {
|
||||
"sourceType": "script"
|
||||
},
|
||||
"extends": "../../.eslintrc.json",
|
||||
"rules": {
|
||||
"no-console": "off",
|
||||
"strict": "error",
|
||||
"unicorn/prefer-module": "off"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
'use strict'
|
||||
|
||||
module.exports = {
|
||||
map: {
|
||||
inline: false,
|
||||
annotation: true,
|
||||
sourcesContent: true
|
||||
},
|
||||
plugins: [
|
||||
require('autoprefixer')({
|
||||
cascade: false
|
||||
})
|
||||
]
|
||||
}
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
'use strict'
|
||||
|
||||
const { babel } = require('@rollup/plugin-babel')
|
||||
|
||||
const pkg = require('../../package')
|
||||
const year = new Date().getFullYear()
|
||||
const banner = `/*!
|
||||
* AdminLTE v${pkg.version} (${pkg.homepage})
|
||||
* Copyright 2014-${year} ${pkg.author}
|
||||
* Licensed under MIT (https://github.com/ColorlibHQ/AdminLTE/blob/master/LICENSE)
|
||||
*/`
|
||||
|
||||
module.exports = {
|
||||
input: 'build/js/AdminLTE.js',
|
||||
output: {
|
||||
banner,
|
||||
file: 'dist/js/adminlte.js',
|
||||
format: 'umd',
|
||||
globals: {
|
||||
jquery: 'jQuery'
|
||||
},
|
||||
name: 'adminlte'
|
||||
},
|
||||
external: ['jquery'],
|
||||
plugins: [
|
||||
babel({
|
||||
exclude: 'node_modules/**',
|
||||
// Include the helpers in the bundle, at most one copy of each
|
||||
babelHelpers: 'bundled'
|
||||
})
|
||||
]
|
||||
}
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
import CardRefresh from './CardRefresh'
|
||||
import CardWidget from './CardWidget'
|
||||
import ControlSidebar from './ControlSidebar'
|
||||
import DirectChat from './DirectChat'
|
||||
import Dropdown from './Dropdown'
|
||||
import ExpandableTable from './ExpandableTable'
|
||||
import Fullscreen from './Fullscreen'
|
||||
import IFrame from './IFrame'
|
||||
import Layout from './Layout'
|
||||
import PushMenu from './PushMenu'
|
||||
import SidebarSearch from './SidebarSearch'
|
||||
import NavbarSearch from './NavbarSearch'
|
||||
import Toasts from './Toasts'
|
||||
import TodoList from './TodoList'
|
||||
import Treeview from './Treeview'
|
||||
|
||||
export {
|
||||
CardRefresh,
|
||||
CardWidget,
|
||||
ControlSidebar,
|
||||
DirectChat,
|
||||
Dropdown,
|
||||
ExpandableTable,
|
||||
Fullscreen,
|
||||
IFrame,
|
||||
Layout,
|
||||
PushMenu,
|
||||
SidebarSearch,
|
||||
NavbarSearch,
|
||||
Toasts,
|
||||
TodoList,
|
||||
Treeview
|
||||
}
|
||||
|
|
@ -1,166 +0,0 @@
|
|||
/**
|
||||
* --------------------------------------------
|
||||
* AdminLTE CardRefresh.js
|
||||
* License MIT
|
||||
* --------------------------------------------
|
||||
*/
|
||||
|
||||
import $ from 'jquery'
|
||||
|
||||
/**
|
||||
* 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}`
|
||||
const EVENT_OVERLAY_ADDED = `overlay.added${EVENT_KEY}`
|
||||
const EVENT_OVERLAY_REMOVED = `overlay.removed${EVENT_KEY}`
|
||||
|
||||
const CLASS_NAME_CARD = 'card'
|
||||
|
||||
const SELECTOR_CARD = `.${CLASS_NAME_CARD}`
|
||||
const SELECTOR_DATA_REFRESH = '[data-card-widget="card-refresh"]'
|
||||
|
||||
const Default = {
|
||||
source: '',
|
||||
sourceSelector: '',
|
||||
params: {},
|
||||
trigger: SELECTOR_DATA_REFRESH,
|
||||
content: '.card-body',
|
||||
loadInContent: true,
|
||||
loadOnInit: true,
|
||||
loadErrorTemplate: true,
|
||||
responseType: '',
|
||||
overlayTemplate: '<div class="overlay"><i class="fas fa-2x fa-sync-alt fa-spin"></i></div>',
|
||||
errorTemplate: '<span class="text-danger"></span>',
|
||||
onLoadStart() {},
|
||||
onLoadDone(response) {
|
||||
return response
|
||||
},
|
||||
onLoadFail(_jqXHR, _textStatus, _errorThrown) {}
|
||||
}
|
||||
|
||||
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(CLASS_NAME_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, 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()
|
||||
}, this._settings.responseType !== '' && this._settings.responseType)
|
||||
.fail((jqXHR, textStatus, errorThrown) => {
|
||||
this._removeOverlay()
|
||||
|
||||
if (this._settings.loadErrorTemplate) {
|
||||
const msg = $(this._settings.errorTemplate).text(errorThrown)
|
||||
this._parent.find(this._settings.content).empty().append(msg)
|
||||
}
|
||||
|
||||
this._settings.onLoadFail.call($(this), jqXHR, textStatus, errorThrown)
|
||||
})
|
||||
|
||||
$(this._element).trigger($.Event(EVENT_LOADED))
|
||||
}
|
||||
|
||||
_addOverlay() {
|
||||
this._parent.append(this._overlay)
|
||||
$(this._element).trigger($.Event(EVENT_OVERLAY_ADDED))
|
||||
}
|
||||
|
||||
_removeOverlay() {
|
||||
this._parent.find(this._overlay).remove()
|
||||
$(this._element).trigger($.Event(EVENT_OVERLAY_REMOVED))
|
||||
}
|
||||
|
||||
// Private
|
||||
|
||||
_init() {
|
||||
$(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' && /load/.test(config)) {
|
||||
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')
|
||||
})
|
||||
|
||||
$(() => {
|
||||
$(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
|
||||
}
|
||||
|
||||
export default CardRefresh
|
||||
|
|
@ -1,238 +0,0 @@
|
|||
/**
|
||||
* --------------------------------------------
|
||||
* AdminLTE CardWidget.js
|
||||
* License MIT
|
||||
* --------------------------------------------
|
||||
*/
|
||||
|
||||
import $ from 'jquery'
|
||||
|
||||
/**
|
||||
* 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}`
|
||||
const EVENT_COLLAPSED = `collapsed${EVENT_KEY}`
|
||||
const EVENT_MAXIMIZED = `maximized${EVENT_KEY}`
|
||||
const EVENT_MINIMIZED = `minimized${EVENT_KEY}`
|
||||
const EVENT_REMOVED = `removed${EVENT_KEY}`
|
||||
|
||||
const CLASS_NAME_CARD = 'card'
|
||||
const CLASS_NAME_COLLAPSED = 'collapsed-card'
|
||||
const CLASS_NAME_COLLAPSING = 'collapsing-card'
|
||||
const CLASS_NAME_EXPANDING = 'expanding-card'
|
||||
const CLASS_NAME_WAS_COLLAPSED = 'was-collapsed'
|
||||
const CLASS_NAME_MAXIMIZED = 'maximized-card'
|
||||
|
||||
const SELECTOR_DATA_REMOVE = '[data-card-widget="remove"]'
|
||||
const SELECTOR_DATA_COLLAPSE = '[data-card-widget="collapse"]'
|
||||
const SELECTOR_DATA_MAXIMIZE = '[data-card-widget="maximize"]'
|
||||
const SELECTOR_CARD = `.${CLASS_NAME_CARD}`
|
||||
const SELECTOR_CARD_HEADER = '.card-header'
|
||||
const SELECTOR_CARD_BODY = '.card-body'
|
||||
const SELECTOR_CARD_FOOTER = '.card-footer'
|
||||
|
||||
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(CLASS_NAME_CARD)) {
|
||||
this._parent = element
|
||||
}
|
||||
|
||||
this._settings = $.extend({}, Default, settings)
|
||||
}
|
||||
|
||||
collapse() {
|
||||
this._parent.addClass(CLASS_NAME_COLLAPSING).children(`${SELECTOR_CARD_BODY}, ${SELECTOR_CARD_FOOTER}`)
|
||||
.slideUp(this._settings.animationSpeed, () => {
|
||||
this._parent.addClass(CLASS_NAME_COLLAPSED).removeClass(CLASS_NAME_COLLAPSING)
|
||||
})
|
||||
|
||||
this._parent.find(`> ${SELECTOR_CARD_HEADER} ${this._settings.collapseTrigger} .${this._settings.collapseIcon}`)
|
||||
.addClass(this._settings.expandIcon)
|
||||
.removeClass(this._settings.collapseIcon)
|
||||
|
||||
this._element.trigger($.Event(EVENT_COLLAPSED), this._parent)
|
||||
}
|
||||
|
||||
expand() {
|
||||
this._parent.addClass(CLASS_NAME_EXPANDING).children(`${SELECTOR_CARD_BODY}, ${SELECTOR_CARD_FOOTER}`)
|
||||
.slideDown(this._settings.animationSpeed, () => {
|
||||
this._parent.removeClass(CLASS_NAME_COLLAPSED).removeClass(CLASS_NAME_EXPANDING)
|
||||
})
|
||||
|
||||
this._parent.find(`> ${SELECTOR_CARD_HEADER} ${this._settings.collapseTrigger} .${this._settings.expandIcon}`)
|
||||
.addClass(this._settings.collapseIcon)
|
||||
.removeClass(this._settings.expandIcon)
|
||||
|
||||
this._element.trigger($.Event(EVENT_EXPANDED), this._parent)
|
||||
}
|
||||
|
||||
remove() {
|
||||
this._parent.slideUp()
|
||||
this._element.trigger($.Event(EVENT_REMOVED), this._parent)
|
||||
}
|
||||
|
||||
toggle() {
|
||||
if (this._parent.hasClass(CLASS_NAME_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 () {
|
||||
const $element = $(this)
|
||||
|
||||
$element.addClass(CLASS_NAME_MAXIMIZED)
|
||||
$('html').addClass(CLASS_NAME_MAXIMIZED)
|
||||
if ($element.hasClass(CLASS_NAME_COLLAPSED)) {
|
||||
$element.addClass(CLASS_NAME_WAS_COLLAPSED)
|
||||
}
|
||||
|
||||
$element.dequeue()
|
||||
})
|
||||
|
||||
this._element.trigger($.Event(EVENT_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 () {
|
||||
const $element = $(this)
|
||||
|
||||
$element.removeClass(CLASS_NAME_MAXIMIZED)
|
||||
$('html').removeClass(CLASS_NAME_MAXIMIZED)
|
||||
$element.css({
|
||||
height: 'inherit',
|
||||
width: 'inherit'
|
||||
})
|
||||
if ($element.hasClass(CLASS_NAME_WAS_COLLAPSED)) {
|
||||
$element.removeClass(CLASS_NAME_WAS_COLLAPSED)
|
||||
}
|
||||
|
||||
$element.dequeue()
|
||||
})
|
||||
|
||||
this._element.trigger($.Event(EVENT_MINIMIZED), this._parent)
|
||||
}
|
||||
|
||||
toggleMaximize() {
|
||||
if (this._parent.hasClass(CLASS_NAME_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' && /collapse|expand|remove|toggle|maximize|minimize|toggleMaximize/.test(config)) {
|
||||
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
|
||||
}
|
||||
|
||||
export default CardWidget
|
||||
|
|
@ -1,328 +0,0 @@
|
|||
/**
|
||||
* --------------------------------------------
|
||||
* AdminLTE ControlSidebar.js
|
||||
* License MIT
|
||||
* --------------------------------------------
|
||||
*/
|
||||
|
||||
import $ from 'jquery'
|
||||
|
||||
/**
|
||||
* Constants
|
||||
* ====================================================
|
||||
*/
|
||||
|
||||
const NAME = 'ControlSidebar'
|
||||
const DATA_KEY = 'lte.controlsidebar'
|
||||
const EVENT_KEY = `.${DATA_KEY}`
|
||||
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
||||
|
||||
const EVENT_COLLAPSED = `collapsed${EVENT_KEY}`
|
||||
const EVENT_COLLAPSED_DONE = `collapsed-done${EVENT_KEY}`
|
||||
const EVENT_EXPANDED = `expanded${EVENT_KEY}`
|
||||
|
||||
const SELECTOR_CONTROL_SIDEBAR = '.control-sidebar'
|
||||
const SELECTOR_CONTROL_SIDEBAR_CONTENT = '.control-sidebar-content'
|
||||
const SELECTOR_DATA_TOGGLE = '[data-widget="control-sidebar"]'
|
||||
const SELECTOR_HEADER = '.main-header'
|
||||
const SELECTOR_FOOTER = '.main-footer'
|
||||
|
||||
const CLASS_NAME_CONTROL_SIDEBAR_ANIMATE = 'control-sidebar-animate'
|
||||
const CLASS_NAME_CONTROL_SIDEBAR_OPEN = 'control-sidebar-open'
|
||||
const CLASS_NAME_CONTROL_SIDEBAR_SLIDE = 'control-sidebar-slide-open'
|
||||
const CLASS_NAME_LAYOUT_FIXED = 'layout-fixed'
|
||||
const CLASS_NAME_NAVBAR_FIXED = 'layout-navbar-fixed'
|
||||
const CLASS_NAME_NAVBAR_SM_FIXED = 'layout-sm-navbar-fixed'
|
||||
const CLASS_NAME_NAVBAR_MD_FIXED = 'layout-md-navbar-fixed'
|
||||
const CLASS_NAME_NAVBAR_LG_FIXED = 'layout-lg-navbar-fixed'
|
||||
const CLASS_NAME_NAVBAR_XL_FIXED = 'layout-xl-navbar-fixed'
|
||||
const CLASS_NAME_FOOTER_FIXED = 'layout-footer-fixed'
|
||||
const CLASS_NAME_FOOTER_SM_FIXED = 'layout-sm-footer-fixed'
|
||||
const CLASS_NAME_FOOTER_MD_FIXED = 'layout-md-footer-fixed'
|
||||
const CLASS_NAME_FOOTER_LG_FIXED = 'layout-lg-footer-fixed'
|
||||
const CLASS_NAME_FOOTER_XL_FIXED = 'layout-xl-footer-fixed'
|
||||
|
||||
const Default = {
|
||||
controlsidebarSlide: true,
|
||||
scrollbarTheme: 'os-theme-light',
|
||||
scrollbarAutoHide: 'l',
|
||||
target: SELECTOR_CONTROL_SIDEBAR,
|
||||
animationSpeed: 300
|
||||
}
|
||||
|
||||
/**
|
||||
* Class Definition
|
||||
* ====================================================
|
||||
*/
|
||||
|
||||
class ControlSidebar {
|
||||
constructor(element, config) {
|
||||
this._element = element
|
||||
this._config = config
|
||||
}
|
||||
|
||||
// Public
|
||||
|
||||
collapse() {
|
||||
const $body = $('body')
|
||||
const $html = $('html')
|
||||
const { target } = this._config
|
||||
|
||||
// Show the control sidebar
|
||||
if (this._config.controlsidebarSlide) {
|
||||
$html.addClass(CLASS_NAME_CONTROL_SIDEBAR_ANIMATE)
|
||||
$body.removeClass(CLASS_NAME_CONTROL_SIDEBAR_SLIDE).delay(300).queue(function () {
|
||||
$(target).hide()
|
||||
$html.removeClass(CLASS_NAME_CONTROL_SIDEBAR_ANIMATE)
|
||||
$(this).dequeue()
|
||||
})
|
||||
} else {
|
||||
$body.removeClass(CLASS_NAME_CONTROL_SIDEBAR_OPEN)
|
||||
}
|
||||
|
||||
$(this._element).trigger($.Event(EVENT_COLLAPSED))
|
||||
|
||||
setTimeout(() => {
|
||||
$(this._element).trigger($.Event(EVENT_COLLAPSED_DONE))
|
||||
}, this._config.animationSpeed)
|
||||
}
|
||||
|
||||
show() {
|
||||
const $body = $('body')
|
||||
const $html = $('html')
|
||||
|
||||
// Collapse the control sidebar
|
||||
if (this._config.controlsidebarSlide) {
|
||||
$html.addClass(CLASS_NAME_CONTROL_SIDEBAR_ANIMATE)
|
||||
$(this._config.target).show().delay(10).queue(function () {
|
||||
$body.addClass(CLASS_NAME_CONTROL_SIDEBAR_SLIDE).delay(300).queue(function () {
|
||||
$html.removeClass(CLASS_NAME_CONTROL_SIDEBAR_ANIMATE)
|
||||
$(this).dequeue()
|
||||
})
|
||||
$(this).dequeue()
|
||||
})
|
||||
} else {
|
||||
$body.addClass(CLASS_NAME_CONTROL_SIDEBAR_OPEN)
|
||||
}
|
||||
|
||||
this._fixHeight()
|
||||
this._fixScrollHeight()
|
||||
|
||||
$(this._element).trigger($.Event(EVENT_EXPANDED))
|
||||
}
|
||||
|
||||
toggle() {
|
||||
const $body = $('body')
|
||||
const shouldClose = $body.hasClass(CLASS_NAME_CONTROL_SIDEBAR_OPEN) ||
|
||||
$body.hasClass(CLASS_NAME_CONTROL_SIDEBAR_SLIDE)
|
||||
|
||||
if (shouldClose) {
|
||||
// Close the control sidebar
|
||||
this.collapse()
|
||||
} else {
|
||||
// Open the control sidebar
|
||||
this.show()
|
||||
}
|
||||
}
|
||||
|
||||
// Private
|
||||
|
||||
_init() {
|
||||
const $body = $('body')
|
||||
const shouldNotHideAll = $body.hasClass(CLASS_NAME_CONTROL_SIDEBAR_OPEN) ||
|
||||
$body.hasClass(CLASS_NAME_CONTROL_SIDEBAR_SLIDE)
|
||||
|
||||
if (shouldNotHideAll) {
|
||||
$(SELECTOR_CONTROL_SIDEBAR).not(this._config.target).hide()
|
||||
$(this._config.target).css('display', 'block')
|
||||
} else {
|
||||
$(SELECTOR_CONTROL_SIDEBAR).hide()
|
||||
}
|
||||
|
||||
this._fixHeight()
|
||||
this._fixScrollHeight()
|
||||
|
||||
$(window).resize(() => {
|
||||
this._fixHeight()
|
||||
this._fixScrollHeight()
|
||||
})
|
||||
|
||||
$(window).scroll(() => {
|
||||
const $body = $('body')
|
||||
const shouldFixHeight = $body.hasClass(CLASS_NAME_CONTROL_SIDEBAR_OPEN) ||
|
||||
$body.hasClass(CLASS_NAME_CONTROL_SIDEBAR_SLIDE)
|
||||
|
||||
if (shouldFixHeight) {
|
||||
this._fixScrollHeight()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
_isNavbarFixed() {
|
||||
const $body = $('body')
|
||||
return (
|
||||
$body.hasClass(CLASS_NAME_NAVBAR_FIXED) ||
|
||||
$body.hasClass(CLASS_NAME_NAVBAR_SM_FIXED) ||
|
||||
$body.hasClass(CLASS_NAME_NAVBAR_MD_FIXED) ||
|
||||
$body.hasClass(CLASS_NAME_NAVBAR_LG_FIXED) ||
|
||||
$body.hasClass(CLASS_NAME_NAVBAR_XL_FIXED)
|
||||
)
|
||||
}
|
||||
|
||||
_isFooterFixed() {
|
||||
const $body = $('body')
|
||||
return (
|
||||
$body.hasClass(CLASS_NAME_FOOTER_FIXED) ||
|
||||
$body.hasClass(CLASS_NAME_FOOTER_SM_FIXED) ||
|
||||
$body.hasClass(CLASS_NAME_FOOTER_MD_FIXED) ||
|
||||
$body.hasClass(CLASS_NAME_FOOTER_LG_FIXED) ||
|
||||
$body.hasClass(CLASS_NAME_FOOTER_XL_FIXED)
|
||||
)
|
||||
}
|
||||
|
||||
_fixScrollHeight() {
|
||||
const $body = $('body')
|
||||
const $controlSidebar = $(this._config.target)
|
||||
|
||||
if (!$body.hasClass(CLASS_NAME_LAYOUT_FIXED)) {
|
||||
return
|
||||
}
|
||||
|
||||
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()
|
||||
}
|
||||
|
||||
const navbarFixed = this._isNavbarFixed() && $(SELECTOR_HEADER).css('position') === 'fixed'
|
||||
|
||||
const footerFixed = this._isFooterFixed() && $(SELECTOR_FOOTER).css('position') === 'fixed'
|
||||
|
||||
const $controlsidebarContent = $(`${this._config.target}, ${this._config.target} ${SELECTOR_CONTROL_SIDEBAR_CONTENT}`)
|
||||
|
||||
if (positions.top === 0 && positions.bottom === 0) {
|
||||
$controlSidebar.css({
|
||||
bottom: heights.footer,
|
||||
top: heights.header
|
||||
})
|
||||
$controlsidebarContent.css('height', heights.window - (heights.header + heights.footer))
|
||||
} else if (positions.bottom <= heights.footer) {
|
||||
if (footerFixed === false) {
|
||||
const top = heights.header - positions.top
|
||||
$controlSidebar.css('bottom', heights.footer - positions.bottom).css('top', top >= 0 ? top : 0)
|
||||
$controlsidebarContent.css('height', heights.window - (heights.footer - positions.bottom))
|
||||
} else {
|
||||
$controlSidebar.css('bottom', heights.footer)
|
||||
}
|
||||
} else if (positions.top <= heights.header) {
|
||||
if (navbarFixed === false) {
|
||||
$controlSidebar.css('top', heights.header - positions.top)
|
||||
$controlsidebarContent.css('height', heights.window - (heights.header - positions.top))
|
||||
} else {
|
||||
$controlSidebar.css('top', heights.header)
|
||||
}
|
||||
} else if (navbarFixed === false) {
|
||||
$controlSidebar.css('top', 0)
|
||||
$controlsidebarContent.css('height', heights.window)
|
||||
} else {
|
||||
$controlSidebar.css('top', heights.header)
|
||||
}
|
||||
|
||||
if (footerFixed && navbarFixed) {
|
||||
$controlsidebarContent.css('height', '100%')
|
||||
$controlSidebar.css('height', '')
|
||||
} else if (footerFixed || navbarFixed) {
|
||||
$controlsidebarContent.css('height', '100%')
|
||||
$controlsidebarContent.css('height', '')
|
||||
}
|
||||
}
|
||||
|
||||
_fixHeight() {
|
||||
const $body = $('body')
|
||||
const $controlSidebar = $(`${this._config.target} ${SELECTOR_CONTROL_SIDEBAR_CONTENT}`)
|
||||
|
||||
if (!$body.hasClass(CLASS_NAME_LAYOUT_FIXED)) {
|
||||
$controlSidebar.attr('style', '')
|
||||
return
|
||||
}
|
||||
|
||||
const heights = {
|
||||
window: $(window).height(),
|
||||
header: $(SELECTOR_HEADER).outerHeight(),
|
||||
footer: $(SELECTOR_FOOTER).outerHeight()
|
||||
}
|
||||
|
||||
let sidebarHeight = heights.window - heights.header
|
||||
|
||||
if (this._isFooterFixed() && $(SELECTOR_FOOTER).css('position') === 'fixed') {
|
||||
sidebarHeight = heights.window - heights.header - heights.footer
|
||||
}
|
||||
|
||||
$controlSidebar.css('height', sidebarHeight)
|
||||
|
||||
if (typeof $.fn.overlayScrollbars !== 'undefined') {
|
||||
$controlSidebar.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')
|
||||
})
|
||||
|
||||
$(document).ready(() => {
|
||||
ControlSidebar._jQueryInterface.call($(SELECTOR_DATA_TOGGLE), '_init')
|
||||
})
|
||||
|
||||
/**
|
||||
* jQuery API
|
||||
* ====================================================
|
||||
*/
|
||||
|
||||
$.fn[NAME] = ControlSidebar._jQueryInterface
|
||||
$.fn[NAME].Constructor = ControlSidebar
|
||||
$.fn[NAME].noConflict = function () {
|
||||
$.fn[NAME] = JQUERY_NO_CONFLICT
|
||||
return ControlSidebar._jQueryInterface
|
||||
}
|
||||
|
||||
export default ControlSidebar
|
||||
|
|
@ -1,84 +0,0 @@
|
|||
/**
|
||||
* --------------------------------------------
|
||||
* AdminLTE DirectChat.js
|
||||
* License MIT
|
||||
* --------------------------------------------
|
||||
*/
|
||||
|
||||
import $ from 'jquery'
|
||||
|
||||
/**
|
||||
* Constants
|
||||
* ====================================================
|
||||
*/
|
||||
|
||||
const NAME = 'DirectChat'
|
||||
const DATA_KEY = 'lte.directchat'
|
||||
const EVENT_KEY = `.${DATA_KEY}`
|
||||
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
||||
|
||||
const EVENT_TOGGLED = `toggled${EVENT_KEY}`
|
||||
|
||||
const SELECTOR_DATA_TOGGLE = '[data-widget="chat-pane-toggle"]'
|
||||
const SELECTOR_DIRECT_CHAT = '.direct-chat'
|
||||
|
||||
const CLASS_NAME_DIRECT_CHAT_OPEN = 'direct-chat-contacts-open'
|
||||
|
||||
/**
|
||||
* Class Definition
|
||||
* ====================================================
|
||||
*/
|
||||
|
||||
class DirectChat {
|
||||
constructor(element) {
|
||||
this._element = element
|
||||
}
|
||||
|
||||
toggle() {
|
||||
$(this._element).parents(SELECTOR_DIRECT_CHAT).first().toggleClass(CLASS_NAME_DIRECT_CHAT_OPEN)
|
||||
$(this._element).trigger($.Event(EVENT_TOGGLED))
|
||||
}
|
||||
|
||||
// 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
|
||||
}
|
||||
|
||||
export default DirectChat
|
||||
|
|
@ -1,146 +0,0 @@
|
|||
/**
|
||||
* --------------------------------------------
|
||||
* AdminLTE Dropdown.js
|
||||
* License MIT
|
||||
* --------------------------------------------
|
||||
*/
|
||||
|
||||
import $ from 'jquery'
|
||||
|
||||
/**
|
||||
* Constants
|
||||
* ====================================================
|
||||
*/
|
||||
|
||||
const NAME = 'Dropdown'
|
||||
const DATA_KEY = 'lte.dropdown'
|
||||
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
||||
|
||||
const SELECTOR_NAVBAR = '.navbar'
|
||||
const SELECTOR_DROPDOWN_MENU = '.dropdown-menu'
|
||||
const SELECTOR_DROPDOWN_MENU_ACTIVE = '.dropdown-menu.show'
|
||||
const SELECTOR_DROPDOWN_TOGGLE = '[data-toggle="dropdown"]'
|
||||
|
||||
const CLASS_NAME_DROPDOWN_RIGHT = 'dropdown-menu-right'
|
||||
const CLASS_NAME_DROPDOWN_SUBMENU = 'dropdown-submenu'
|
||||
|
||||
// TODO: this is unused; should be removed along with the extend?
|
||||
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(SELECTOR_DROPDOWN_MENU).first().find('.show').removeClass('show').hide()
|
||||
}
|
||||
|
||||
this._element.parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', () => {
|
||||
$('.dropdown-submenu .show').removeClass('show').hide()
|
||||
})
|
||||
}
|
||||
|
||||
fixPosition() {
|
||||
const $element = $(SELECTOR_DROPDOWN_MENU_ACTIVE)
|
||||
|
||||
if ($element.length === 0) {
|
||||
return
|
||||
}
|
||||
|
||||
if ($element.hasClass(CLASS_NAME_DROPDOWN_RIGHT)) {
|
||||
$element.css({
|
||||
left: 'inherit',
|
||||
right: 0
|
||||
})
|
||||
} else {
|
||||
$element.css({
|
||||
left: 0,
|
||||
right: 'inherit'
|
||||
})
|
||||
}
|
||||
|
||||
const offset = $element.offset()
|
||||
const width = $element.width()
|
||||
const visiblePart = $(window).width() - offset.left
|
||||
|
||||
if (offset.left < 0) {
|
||||
$element.css({
|
||||
left: 'inherit',
|
||||
right: offset.left - 5
|
||||
})
|
||||
} else if (visiblePart < width) {
|
||||
$element.css({
|
||||
left: 'inherit',
|
||||
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', event => {
|
||||
event.preventDefault()
|
||||
|
||||
if ($(event.target).parent().hasClass(CLASS_NAME_DROPDOWN_SUBMENU)) {
|
||||
return
|
||||
}
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
export default Dropdown
|
||||
|
|
@ -1,116 +0,0 @@
|
|||
/**
|
||||
* --------------------------------------------
|
||||
* AdminLTE ExpandableTable.js
|
||||
* License MIT
|
||||
* --------------------------------------------
|
||||
*/
|
||||
|
||||
import $ from 'jquery'
|
||||
|
||||
/**
|
||||
* Constants
|
||||
* ====================================================
|
||||
*/
|
||||
|
||||
const NAME = 'ExpandableTable'
|
||||
const DATA_KEY = 'lte.expandableTable'
|
||||
const EVENT_KEY = `.${DATA_KEY}`
|
||||
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
||||
|
||||
const EVENT_EXPANDED = `expanded${EVENT_KEY}`
|
||||
const EVENT_COLLAPSED = `collapsed${EVENT_KEY}`
|
||||
|
||||
const SELECTOR_TABLE = '.expandable-table'
|
||||
const SELECTOR_EXPANDABLE_BODY = '.expandable-body'
|
||||
const SELECTOR_DATA_TOGGLE = '[data-widget="expandable-table"]'
|
||||
const SELECTOR_ARIA_ATTR = 'aria-expanded'
|
||||
|
||||
/**
|
||||
* Class Definition
|
||||
* ====================================================
|
||||
*/
|
||||
class ExpandableTable {
|
||||
constructor(element, options) {
|
||||
this._options = options
|
||||
this._element = element
|
||||
}
|
||||
|
||||
// Public
|
||||
|
||||
init() {
|
||||
$(SELECTOR_DATA_TOGGLE).each((_, $header) => {
|
||||
const $type = $($header).attr(SELECTOR_ARIA_ATTR)
|
||||
const $body = $($header).next(SELECTOR_EXPANDABLE_BODY).children().first().children()
|
||||
if ($type === 'true') {
|
||||
$body.show()
|
||||
} else if ($type === 'false') {
|
||||
$body.hide()
|
||||
$body.parent().parent().addClass('d-none')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
toggleRow() {
|
||||
const $element = this._element
|
||||
const time = 500
|
||||
const $type = $element.attr(SELECTOR_ARIA_ATTR)
|
||||
const $body = $element.next(SELECTOR_EXPANDABLE_BODY).children().first().children()
|
||||
|
||||
$body.stop()
|
||||
if ($type === 'true') {
|
||||
$body.slideUp(time, () => {
|
||||
$element.next(SELECTOR_EXPANDABLE_BODY).addClass('d-none')
|
||||
})
|
||||
$element.attr(SELECTOR_ARIA_ATTR, 'false')
|
||||
$element.trigger($.Event(EVENT_COLLAPSED))
|
||||
} else if ($type === 'false') {
|
||||
$element.next(SELECTOR_EXPANDABLE_BODY).removeClass('d-none')
|
||||
$body.slideDown(time)
|
||||
$element.attr(SELECTOR_ARIA_ATTR, 'true')
|
||||
$element.trigger($.Event(EVENT_EXPANDED))
|
||||
}
|
||||
}
|
||||
|
||||
// Static
|
||||
|
||||
static _jQueryInterface(operation) {
|
||||
return this.each(function () {
|
||||
let data = $(this).data(DATA_KEY)
|
||||
|
||||
if (!data) {
|
||||
data = new ExpandableTable($(this))
|
||||
$(this).data(DATA_KEY, data)
|
||||
}
|
||||
|
||||
if (typeof operation === 'string' && /init|toggleRow/.test(operation)) {
|
||||
data[operation]()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Data API
|
||||
* ====================================================
|
||||
*/
|
||||
$(SELECTOR_TABLE).ready(function () {
|
||||
ExpandableTable._jQueryInterface.call($(this), 'init')
|
||||
})
|
||||
|
||||
$(document).on('click', SELECTOR_DATA_TOGGLE, function () {
|
||||
ExpandableTable._jQueryInterface.call($(this), 'toggleRow')
|
||||
})
|
||||
|
||||
/**
|
||||
* jQuery API
|
||||
* ====================================================
|
||||
*/
|
||||
|
||||
$.fn[NAME] = ExpandableTable._jQueryInterface
|
||||
$.fn[NAME].Constructor = ExpandableTable
|
||||
$.fn[NAME].noConflict = function () {
|
||||
$.fn[NAME] = JQUERY_NO_CONFLICT
|
||||
return ExpandableTable._jQueryInterface
|
||||
}
|
||||
|
||||
export default ExpandableTable
|
||||
|
|
@ -1,130 +0,0 @@
|
|||
/**
|
||||
* --------------------------------------------
|
||||
* AdminLTE Fullscreen.js
|
||||
* License MIT
|
||||
* --------------------------------------------
|
||||
*/
|
||||
|
||||
import $ from 'jquery'
|
||||
|
||||
/**
|
||||
* Constants
|
||||
* ====================================================
|
||||
*/
|
||||
|
||||
const NAME = 'Fullscreen'
|
||||
const DATA_KEY = 'lte.fullscreen'
|
||||
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
||||
|
||||
const SELECTOR_DATA_WIDGET = '[data-widget="fullscreen"]'
|
||||
const SELECTOR_ICON = `${SELECTOR_DATA_WIDGET} i`
|
||||
|
||||
const EVENT_FULLSCREEN_CHANGE = 'webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange'
|
||||
|
||||
const Default = {
|
||||
minimizeIcon: 'fa-compress-arrows-alt',
|
||||
maximizeIcon: 'fa-expand-arrows-alt'
|
||||
}
|
||||
|
||||
/**
|
||||
* Class Definition
|
||||
* ====================================================
|
||||
*/
|
||||
|
||||
class Fullscreen {
|
||||
constructor(_element, _options) {
|
||||
this.element = _element
|
||||
this.options = $.extend({}, Default, _options)
|
||||
}
|
||||
|
||||
// Public
|
||||
|
||||
toggle() {
|
||||
if (document.fullscreenElement ||
|
||||
document.mozFullScreenElement ||
|
||||
document.webkitFullscreenElement ||
|
||||
document.msFullscreenElement) {
|
||||
this.windowed()
|
||||
} else {
|
||||
this.fullscreen()
|
||||
}
|
||||
}
|
||||
|
||||
toggleIcon() {
|
||||
if (document.fullscreenElement ||
|
||||
document.mozFullScreenElement ||
|
||||
document.webkitFullscreenElement ||
|
||||
document.msFullscreenElement) {
|
||||
$(SELECTOR_ICON).removeClass(this.options.maximizeIcon).addClass(this.options.minimizeIcon)
|
||||
} else {
|
||||
$(SELECTOR_ICON).removeClass(this.options.minimizeIcon).addClass(this.options.maximizeIcon)
|
||||
}
|
||||
}
|
||||
|
||||
fullscreen() {
|
||||
if (document.documentElement.requestFullscreen) {
|
||||
document.documentElement.requestFullscreen()
|
||||
} else if (document.documentElement.webkitRequestFullscreen) {
|
||||
document.documentElement.webkitRequestFullscreen()
|
||||
} else if (document.documentElement.msRequestFullscreen) {
|
||||
document.documentElement.msRequestFullscreen()
|
||||
}
|
||||
}
|
||||
|
||||
windowed() {
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen()
|
||||
} else if (document.webkitExitFullscreen) {
|
||||
document.webkitExitFullscreen()
|
||||
} else if (document.msExitFullscreen) {
|
||||
document.msExitFullscreen()
|
||||
}
|
||||
}
|
||||
|
||||
// Static
|
||||
|
||||
static _jQueryInterface(config) {
|
||||
let data = $(this).data(DATA_KEY)
|
||||
|
||||
if (!data) {
|
||||
data = $(this).data()
|
||||
}
|
||||
|
||||
const _options = $.extend({}, Default, typeof config === 'object' ? config : data)
|
||||
const plugin = new Fullscreen($(this), _options)
|
||||
|
||||
$(this).data(DATA_KEY, typeof config === 'object' ? config : data)
|
||||
|
||||
if (typeof config === 'string' && /toggle|toggleIcon|fullscreen|windowed/.test(config)) {
|
||||
plugin[config]()
|
||||
} else {
|
||||
plugin.init()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Data API
|
||||
* ====================================================
|
||||
*/
|
||||
$(document).on('click', SELECTOR_DATA_WIDGET, function () {
|
||||
Fullscreen._jQueryInterface.call($(this), 'toggle')
|
||||
})
|
||||
|
||||
$(document).on(EVENT_FULLSCREEN_CHANGE, () => {
|
||||
Fullscreen._jQueryInterface.call($(SELECTOR_DATA_WIDGET), 'toggleIcon')
|
||||
})
|
||||
|
||||
/**
|
||||
* jQuery API
|
||||
* ====================================================
|
||||
*/
|
||||
|
||||
$.fn[NAME] = Fullscreen._jQueryInterface
|
||||
$.fn[NAME].Constructor = Fullscreen
|
||||
$.fn[NAME].noConflict = function () {
|
||||
$.fn[NAME] = JQUERY_NO_CONFLICT
|
||||
return Fullscreen._jQueryInterface
|
||||
}
|
||||
|
||||
export default Fullscreen
|
||||
|
|
@ -1,460 +0,0 @@
|
|||
/**
|
||||
* --------------------------------------------
|
||||
* AdminLTE IFrame.js
|
||||
* License MIT
|
||||
* --------------------------------------------
|
||||
*/
|
||||
|
||||
import $ from 'jquery'
|
||||
|
||||
/**
|
||||
* Constants
|
||||
* ====================================================
|
||||
*/
|
||||
|
||||
const NAME = 'IFrame'
|
||||
const DATA_KEY = 'lte.iframe'
|
||||
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
||||
|
||||
const SELECTOR_DATA_TOGGLE = '[data-widget="iframe"]'
|
||||
const SELECTOR_DATA_TOGGLE_CLOSE = '[data-widget="iframe-close"]'
|
||||
const SELECTOR_DATA_TOGGLE_SCROLL_LEFT = '[data-widget="iframe-scrollleft"]'
|
||||
const SELECTOR_DATA_TOGGLE_SCROLL_RIGHT = '[data-widget="iframe-scrollright"]'
|
||||
const SELECTOR_DATA_TOGGLE_FULLSCREEN = '[data-widget="iframe-fullscreen"]'
|
||||
const SELECTOR_CONTENT_WRAPPER = '.content-wrapper'
|
||||
const SELECTOR_CONTENT_IFRAME = `${SELECTOR_CONTENT_WRAPPER} iframe`
|
||||
const SELECTOR_TAB_NAV = `${SELECTOR_CONTENT_WRAPPER}.iframe-mode .nav`
|
||||
const SELECTOR_TAB_NAVBAR_NAV = `${SELECTOR_CONTENT_WRAPPER}.iframe-mode .navbar-nav`
|
||||
const SELECTOR_TAB_NAVBAR_NAV_ITEM = `${SELECTOR_TAB_NAVBAR_NAV} .nav-item`
|
||||
const SELECTOR_TAB_NAVBAR_NAV_LINK = `${SELECTOR_TAB_NAVBAR_NAV} .nav-link`
|
||||
const SELECTOR_TAB_CONTENT = `${SELECTOR_CONTENT_WRAPPER}.iframe-mode .tab-content`
|
||||
const SELECTOR_TAB_EMPTY = `${SELECTOR_TAB_CONTENT} .tab-empty`
|
||||
const SELECTOR_TAB_LOADING = `${SELECTOR_TAB_CONTENT} .tab-loading`
|
||||
const SELECTOR_TAB_PANE = `${SELECTOR_TAB_CONTENT} .tab-pane`
|
||||
const SELECTOR_SIDEBAR_MENU_ITEM = '.main-sidebar .nav-item > a.nav-link'
|
||||
const SELECTOR_SIDEBAR_SEARCH_ITEM = '.sidebar-search-results .list-group-item'
|
||||
const SELECTOR_HEADER_MENU_ITEM = '.main-header .nav-item a.nav-link'
|
||||
const SELECTOR_HEADER_DROPDOWN_ITEM = '.main-header a.dropdown-item'
|
||||
const CLASS_NAME_IFRAME_MODE = 'iframe-mode'
|
||||
const CLASS_NAME_FULLSCREEN_MODE = 'iframe-mode-fullscreen'
|
||||
|
||||
const Default = {
|
||||
onTabClick(item) {
|
||||
return item
|
||||
},
|
||||
onTabChanged(item) {
|
||||
return item
|
||||
},
|
||||
onTabCreated(item) {
|
||||
return item
|
||||
},
|
||||
autoIframeMode: true,
|
||||
autoItemActive: true,
|
||||
autoShowNewTab: true,
|
||||
autoDarkMode: false,
|
||||
allowDuplicates: false,
|
||||
allowReload: true,
|
||||
loadingScreen: true,
|
||||
useNavbarItems: true,
|
||||
scrollOffset: 40,
|
||||
scrollBehaviorSwap: false,
|
||||
iconMaximize: 'fa-expand',
|
||||
iconMinimize: 'fa-compress'
|
||||
}
|
||||
|
||||
/**
|
||||
* Class Definition
|
||||
* ====================================================
|
||||
*/
|
||||
|
||||
class IFrame {
|
||||
constructor(element, config) {
|
||||
this._config = config
|
||||
this._element = element
|
||||
this._init()
|
||||
}
|
||||
|
||||
// Public
|
||||
|
||||
onTabClick(item) {
|
||||
this._config.onTabClick(item)
|
||||
}
|
||||
|
||||
onTabChanged(item) {
|
||||
this._config.onTabChanged(item)
|
||||
}
|
||||
|
||||
onTabCreated(item) {
|
||||
this._config.onTabCreated(item)
|
||||
}
|
||||
|
||||
createTab(title, link, uniqueName, autoOpen) {
|
||||
let tabId = `panel-${uniqueName}`
|
||||
let navId = `tab-${uniqueName}`
|
||||
|
||||
if (this._config.allowDuplicates) {
|
||||
tabId += `-${Math.floor(Math.random() * 1000)}`
|
||||
navId += `-${Math.floor(Math.random() * 1000)}`
|
||||
}
|
||||
|
||||
const newNavItem = `<li class="nav-item" role="presentation"><a href="#" class="btn-iframe-close" data-widget="iframe-close" data-type="only-this"><i class="fas fa-times"></i></a><a class="nav-link" data-toggle="row" id="${navId}" href="#${tabId}" role="tab" aria-controls="${tabId}" aria-selected="false">${title}</a></li>`
|
||||
$(SELECTOR_TAB_NAVBAR_NAV).append(unescape(escape(newNavItem)))
|
||||
|
||||
const newTabItem = `<div class="tab-pane fade" id="${tabId}" role="tabpanel" aria-labelledby="${navId}"><iframe src="${link}"></iframe></div>`
|
||||
$(SELECTOR_TAB_CONTENT).append(unescape(escape(newTabItem)))
|
||||
|
||||
if (autoOpen) {
|
||||
if (this._config.loadingScreen) {
|
||||
const $loadingScreen = $(SELECTOR_TAB_LOADING)
|
||||
$loadingScreen.fadeIn()
|
||||
$(`${tabId} iframe`).ready(() => {
|
||||
if (typeof this._config.loadingScreen === 'number') {
|
||||
this.switchTab(`#${navId}`)
|
||||
setTimeout(() => {
|
||||
$loadingScreen.fadeOut()
|
||||
}, this._config.loadingScreen)
|
||||
} else {
|
||||
this.switchTab(`#${navId}`)
|
||||
$loadingScreen.fadeOut()
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.switchTab(`#${navId}`)
|
||||
}
|
||||
}
|
||||
|
||||
this.onTabCreated($(`#${navId}`))
|
||||
}
|
||||
|
||||
openTabSidebar(item, autoOpen = this._config.autoShowNewTab) {
|
||||
let $item = $(item).clone()
|
||||
if ($item.attr('href') === undefined) {
|
||||
$item = $(item).parent('a').clone()
|
||||
}
|
||||
|
||||
$item.find('.right, .search-path').remove()
|
||||
let title = $item.find('p').text()
|
||||
if (title === '') {
|
||||
title = $item.text()
|
||||
}
|
||||
|
||||
const link = $item.attr('href')
|
||||
if (link === '#' || link === '' || link === undefined) {
|
||||
return
|
||||
}
|
||||
|
||||
const uniqueName = link.replace('./', '').replace(/["#&'./:=?[\]]/gi, '-').replace(/(--)/gi, '')
|
||||
const navId = `tab-${uniqueName}`
|
||||
|
||||
if (!this._config.allowDuplicates && $(`#${navId}`).length > 0) {
|
||||
return this.switchTab(`#${navId}`, this._config.allowReload)
|
||||
}
|
||||
|
||||
if ((!this._config.allowDuplicates && $(`#${navId}`).length === 0) || this._config.allowDuplicates) {
|
||||
this.createTab(title, link, uniqueName, autoOpen)
|
||||
}
|
||||
}
|
||||
|
||||
switchTab(item, reload = false) {
|
||||
const $item = $(item)
|
||||
const tabId = $item.attr('href')
|
||||
|
||||
$(SELECTOR_TAB_EMPTY).hide()
|
||||
|
||||
if (reload) {
|
||||
const $loadingScreen = $(SELECTOR_TAB_LOADING)
|
||||
if (this._config.loadingScreen) {
|
||||
$loadingScreen.show(0, () => {
|
||||
$(`${tabId} iframe`).attr('src', $(`${tabId} iframe`).attr('src')).ready(() => {
|
||||
if (this._config.loadingScreen) {
|
||||
if (typeof this._config.loadingScreen === 'number') {
|
||||
setTimeout(() => {
|
||||
$loadingScreen.fadeOut()
|
||||
}, this._config.loadingScreen)
|
||||
} else {
|
||||
$loadingScreen.fadeOut()
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
} else {
|
||||
$(`${tabId} iframe`).attr('src', $(`${tabId} iframe`).attr('src'))
|
||||
}
|
||||
}
|
||||
|
||||
$(`${SELECTOR_TAB_NAVBAR_NAV} .active`).tab('dispose').removeClass('active')
|
||||
|
||||
this._fixHeight()
|
||||
|
||||
$item.tab('show')
|
||||
$item.parents('li').addClass('active')
|
||||
this.onTabChanged($item)
|
||||
|
||||
if (this._config.autoItemActive) {
|
||||
this._setItemActive($(`${tabId} iframe`).attr('src'))
|
||||
}
|
||||
}
|
||||
|
||||
removeActiveTab(type, element) {
|
||||
if (type == 'all') {
|
||||
$(SELECTOR_TAB_NAVBAR_NAV_ITEM).remove()
|
||||
$(SELECTOR_TAB_PANE).remove()
|
||||
$(SELECTOR_TAB_EMPTY).show()
|
||||
} else if (type == 'all-other') {
|
||||
$(`${SELECTOR_TAB_NAVBAR_NAV_ITEM}:not(.active)`).remove()
|
||||
$(`${SELECTOR_TAB_PANE}:not(.active)`).remove()
|
||||
} else if (type == 'only-this') {
|
||||
const $navClose = $(element)
|
||||
const $navItem = $navClose.parent('.nav-item')
|
||||
const $navItemParent = $navItem.parent()
|
||||
const navItemIndex = $navItem.index()
|
||||
const tabId = $navClose.siblings('.nav-link').attr('aria-controls')
|
||||
$navItem.remove()
|
||||
$(`#${tabId}`).remove()
|
||||
if ($(SELECTOR_TAB_CONTENT).children().length == $(`${SELECTOR_TAB_EMPTY}, ${SELECTOR_TAB_LOADING}`).length) {
|
||||
$(SELECTOR_TAB_EMPTY).show()
|
||||
} else {
|
||||
const prevNavItemIndex = navItemIndex - 1
|
||||
this.switchTab($navItemParent.children().eq(prevNavItemIndex).find('a.nav-link'))
|
||||
}
|
||||
} else {
|
||||
const $navItem = $(`${SELECTOR_TAB_NAVBAR_NAV_ITEM}.active`)
|
||||
const $navItemParent = $navItem.parent()
|
||||
const navItemIndex = $navItem.index()
|
||||
$navItem.remove()
|
||||
$(`${SELECTOR_TAB_PANE}.active`).remove()
|
||||
if ($(SELECTOR_TAB_CONTENT).children().length == $(`${SELECTOR_TAB_EMPTY}, ${SELECTOR_TAB_LOADING}`).length) {
|
||||
$(SELECTOR_TAB_EMPTY).show()
|
||||
} else {
|
||||
const prevNavItemIndex = navItemIndex - 1
|
||||
this.switchTab($navItemParent.children().eq(prevNavItemIndex).find('a.nav-link'))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
toggleFullscreen() {
|
||||
if ($('body').hasClass(CLASS_NAME_FULLSCREEN_MODE)) {
|
||||
$(`${SELECTOR_DATA_TOGGLE_FULLSCREEN} i`).removeClass(this._config.iconMinimize).addClass(this._config.iconMaximize)
|
||||
$('body').removeClass(CLASS_NAME_FULLSCREEN_MODE)
|
||||
$(`${SELECTOR_TAB_EMPTY}, ${SELECTOR_TAB_LOADING}`).height('100%')
|
||||
$(SELECTOR_CONTENT_WRAPPER).height('100%')
|
||||
$(SELECTOR_CONTENT_IFRAME).height('100%')
|
||||
} else {
|
||||
$(`${SELECTOR_DATA_TOGGLE_FULLSCREEN} i`).removeClass(this._config.iconMaximize).addClass(this._config.iconMinimize)
|
||||
$('body').addClass(CLASS_NAME_FULLSCREEN_MODE)
|
||||
}
|
||||
|
||||
$(window).trigger('resize')
|
||||
this._fixHeight(true)
|
||||
}
|
||||
|
||||
// Private
|
||||
|
||||
_init() {
|
||||
const usingDefTab = ($(SELECTOR_TAB_CONTENT).children().length > 2)
|
||||
|
||||
this._setupListeners()
|
||||
this._fixHeight(true)
|
||||
|
||||
if (usingDefTab) {
|
||||
const $el = $(`${SELECTOR_TAB_PANE}`).first()
|
||||
// eslint-disable-next-line no-console
|
||||
console.log($el)
|
||||
const uniqueName = $el.attr('id').replace('panel-', '')
|
||||
const navId = `#tab-${uniqueName}`
|
||||
|
||||
this.switchTab(navId, true)
|
||||
}
|
||||
}
|
||||
|
||||
_initFrameElement() {
|
||||
if (window.frameElement && this._config.autoIframeMode) {
|
||||
const $body = $('body')
|
||||
$body.addClass(CLASS_NAME_IFRAME_MODE)
|
||||
|
||||
if (this._config.autoDarkMode) {
|
||||
$body.addClass('dark-mode')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
_navScroll(offset) {
|
||||
const leftPos = $(SELECTOR_TAB_NAVBAR_NAV).scrollLeft()
|
||||
$(SELECTOR_TAB_NAVBAR_NAV).animate({ scrollLeft: (leftPos + offset) }, 250, 'linear')
|
||||
}
|
||||
|
||||
_setupListeners() {
|
||||
$(window).on('resize', () => {
|
||||
setTimeout(() => {
|
||||
this._fixHeight()
|
||||
}, 1)
|
||||
})
|
||||
if ($(SELECTOR_CONTENT_WRAPPER).hasClass(CLASS_NAME_IFRAME_MODE)) {
|
||||
$(document).on('click', `${SELECTOR_SIDEBAR_MENU_ITEM}, ${SELECTOR_SIDEBAR_SEARCH_ITEM}`, e => {
|
||||
e.preventDefault()
|
||||
this.openTabSidebar(e.target)
|
||||
})
|
||||
if (this._config.useNavbarItems) {
|
||||
$(document).on('click', `${SELECTOR_HEADER_MENU_ITEM}, ${SELECTOR_HEADER_DROPDOWN_ITEM}`, e => {
|
||||
e.preventDefault()
|
||||
this.openTabSidebar(e.target)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
$(document).on('click', SELECTOR_TAB_NAVBAR_NAV_LINK, e => {
|
||||
e.preventDefault()
|
||||
this.onTabClick(e.target)
|
||||
this.switchTab(e.target)
|
||||
})
|
||||
$(document).on('click', SELECTOR_TAB_NAVBAR_NAV_LINK, e => {
|
||||
e.preventDefault()
|
||||
this.onTabClick(e.target)
|
||||
this.switchTab(e.target)
|
||||
})
|
||||
$(document).on('click', SELECTOR_DATA_TOGGLE_CLOSE, e => {
|
||||
e.preventDefault()
|
||||
let { target } = e
|
||||
|
||||
if (target.nodeName == 'I') {
|
||||
target = e.target.offsetParent
|
||||
}
|
||||
|
||||
this.removeActiveTab(target.attributes['data-type'] ? target.attributes['data-type'].nodeValue : null, target)
|
||||
})
|
||||
$(document).on('click', SELECTOR_DATA_TOGGLE_FULLSCREEN, e => {
|
||||
e.preventDefault()
|
||||
this.toggleFullscreen()
|
||||
})
|
||||
let mousedown = false
|
||||
let mousedownInterval = null
|
||||
$(document).on('mousedown', SELECTOR_DATA_TOGGLE_SCROLL_LEFT, e => {
|
||||
e.preventDefault()
|
||||
clearInterval(mousedownInterval)
|
||||
|
||||
let { scrollOffset } = this._config
|
||||
|
||||
if (!this._config.scrollBehaviorSwap) {
|
||||
scrollOffset = -scrollOffset
|
||||
}
|
||||
|
||||
mousedown = true
|
||||
this._navScroll(scrollOffset)
|
||||
|
||||
mousedownInterval = setInterval(() => {
|
||||
this._navScroll(scrollOffset)
|
||||
}, 250)
|
||||
})
|
||||
$(document).on('mousedown', SELECTOR_DATA_TOGGLE_SCROLL_RIGHT, e => {
|
||||
e.preventDefault()
|
||||
clearInterval(mousedownInterval)
|
||||
|
||||
let { scrollOffset } = this._config
|
||||
|
||||
if (this._config.scrollBehaviorSwap) {
|
||||
scrollOffset = -scrollOffset
|
||||
}
|
||||
|
||||
mousedown = true
|
||||
this._navScroll(scrollOffset)
|
||||
|
||||
mousedownInterval = setInterval(() => {
|
||||
this._navScroll(scrollOffset)
|
||||
}, 250)
|
||||
})
|
||||
$(document).on('mouseup', () => {
|
||||
if (mousedown) {
|
||||
mousedown = false
|
||||
clearInterval(mousedownInterval)
|
||||
mousedownInterval = null
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
_setItemActive(href) {
|
||||
$(`${SELECTOR_SIDEBAR_MENU_ITEM}, ${SELECTOR_HEADER_DROPDOWN_ITEM}`).removeClass('active')
|
||||
$(SELECTOR_HEADER_MENU_ITEM).parent().removeClass('active')
|
||||
|
||||
const $headerMenuItem = $(`${SELECTOR_HEADER_MENU_ITEM}[href$="${href}"]`)
|
||||
const $headerDropdownItem = $(`${SELECTOR_HEADER_DROPDOWN_ITEM}[href$="${href}"]`)
|
||||
const $sidebarMenuItem = $(`${SELECTOR_SIDEBAR_MENU_ITEM}[href$="${href}"]`)
|
||||
|
||||
$headerMenuItem.each((i, e) => {
|
||||
$(e).parent().addClass('active')
|
||||
})
|
||||
$headerDropdownItem.each((i, e) => {
|
||||
$(e).addClass('active')
|
||||
})
|
||||
$sidebarMenuItem.each((i, e) => {
|
||||
$(e).addClass('active')
|
||||
$(e).parents('.nav-treeview').prevAll('.nav-link').addClass('active')
|
||||
})
|
||||
}
|
||||
|
||||
_fixHeight(tabEmpty = false) {
|
||||
if ($('body').hasClass(CLASS_NAME_FULLSCREEN_MODE)) {
|
||||
const windowHeight = $(window).height()
|
||||
const navbarHeight = $(SELECTOR_TAB_NAV).outerHeight()
|
||||
$(`${SELECTOR_TAB_EMPTY}, ${SELECTOR_TAB_LOADING}, ${SELECTOR_CONTENT_IFRAME}`).height(windowHeight - navbarHeight)
|
||||
$(SELECTOR_CONTENT_WRAPPER).height(windowHeight)
|
||||
} else {
|
||||
const contentWrapperHeight = parseFloat($(SELECTOR_CONTENT_WRAPPER).css('height'))
|
||||
const navbarHeight = $(SELECTOR_TAB_NAV).outerHeight()
|
||||
if (tabEmpty == true) {
|
||||
setTimeout(() => {
|
||||
$(`${SELECTOR_TAB_EMPTY}, ${SELECTOR_TAB_LOADING}`).height(contentWrapperHeight - navbarHeight)
|
||||
}, 50)
|
||||
} else {
|
||||
$(SELECTOR_CONTENT_IFRAME).height(contentWrapperHeight - navbarHeight)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Static
|
||||
|
||||
static _jQueryInterface(config) {
|
||||
if ($(SELECTOR_DATA_TOGGLE).length > 0) {
|
||||
let data = $(this).data(DATA_KEY)
|
||||
|
||||
if (!data) {
|
||||
data = $(this).data()
|
||||
}
|
||||
|
||||
const _options = $.extend({}, Default, typeof config === 'object' ? config : data)
|
||||
localStorage.setItem('AdminLTE:IFrame:Options', JSON.stringify(_options))
|
||||
|
||||
const plugin = new IFrame($(this), _options)
|
||||
|
||||
$(this).data(DATA_KEY, typeof config === 'object' ? config : data)
|
||||
|
||||
if (typeof config === 'string' && /createTab|openTabSidebar|switchTab|removeActiveTab/.test(config)) {
|
||||
plugin[config]()
|
||||
}
|
||||
} else {
|
||||
new IFrame($(this), JSON.parse(localStorage.getItem('AdminLTE:IFrame:Options')))._initFrameElement()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Data API
|
||||
* ====================================================
|
||||
*/
|
||||
|
||||
$(window).on('load', () => {
|
||||
IFrame._jQueryInterface.call($(SELECTOR_DATA_TOGGLE))
|
||||
})
|
||||
|
||||
/**
|
||||
* jQuery API
|
||||
* ====================================================
|
||||
*/
|
||||
|
||||
$.fn[NAME] = IFrame._jQueryInterface
|
||||
$.fn[NAME].Constructor = IFrame
|
||||
$.fn[NAME].noConflict = function () {
|
||||
$.fn[NAME] = JQUERY_NO_CONFLICT
|
||||
return IFrame._jQueryInterface
|
||||
}
|
||||
|
||||
export default IFrame
|
||||
|
|
@ -1,262 +0,0 @@
|
|||
/**
|
||||
* --------------------------------------------
|
||||
* AdminLTE Layout.js
|
||||
* License MIT
|
||||
* --------------------------------------------
|
||||
*/
|
||||
|
||||
import $ from 'jquery'
|
||||
|
||||
/**
|
||||
* Constants
|
||||
* ====================================================
|
||||
*/
|
||||
|
||||
const NAME = 'Layout'
|
||||
const DATA_KEY = 'lte.layout'
|
||||
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
||||
|
||||
const SELECTOR_HEADER = '.main-header'
|
||||
const SELECTOR_MAIN_SIDEBAR = '.main-sidebar'
|
||||
const SELECTOR_SIDEBAR = '.main-sidebar .sidebar'
|
||||
const SELECTOR_CONTENT = '.content-wrapper'
|
||||
const SELECTOR_CONTROL_SIDEBAR_CONTENT = '.control-sidebar-content'
|
||||
const SELECTOR_CONTROL_SIDEBAR_BTN = '[data-widget="control-sidebar"]'
|
||||
const SELECTOR_FOOTER = '.main-footer'
|
||||
const SELECTOR_PUSHMENU_BTN = '[data-widget="pushmenu"]'
|
||||
const SELECTOR_LOGIN_BOX = '.login-box'
|
||||
const SELECTOR_REGISTER_BOX = '.register-box'
|
||||
const SELECTOR_PRELOADER = '.preloader'
|
||||
|
||||
const CLASS_NAME_SIDEBAR_COLLAPSED = 'sidebar-collapse'
|
||||
const CLASS_NAME_SIDEBAR_FOCUSED = 'sidebar-focused'
|
||||
const CLASS_NAME_LAYOUT_FIXED = 'layout-fixed'
|
||||
const CLASS_NAME_CONTROL_SIDEBAR_SLIDE_OPEN = 'control-sidebar-slide-open'
|
||||
const CLASS_NAME_CONTROL_SIDEBAR_OPEN = 'control-sidebar-open'
|
||||
const CLASS_NAME_IFRAME_MODE = 'iframe-mode'
|
||||
|
||||
const Default = {
|
||||
scrollbarTheme: 'os-theme-light',
|
||||
scrollbarAutoHide: 'l',
|
||||
panelAutoHeight: true,
|
||||
panelAutoHeightMode: 'min-height',
|
||||
preloadDuration: 200,
|
||||
loginRegisterAutoHeight: true
|
||||
}
|
||||
|
||||
/**
|
||||
* Class Definition
|
||||
* ====================================================
|
||||
*/
|
||||
|
||||
class Layout {
|
||||
constructor(element, config) {
|
||||
this._config = config
|
||||
this._element = element
|
||||
}
|
||||
|
||||
// Public
|
||||
|
||||
fixLayoutHeight(extra = null) {
|
||||
const $body = $('body')
|
||||
let controlSidebar = 0
|
||||
|
||||
if ($body.hasClass(CLASS_NAME_CONTROL_SIDEBAR_SLIDE_OPEN) || $body.hasClass(CLASS_NAME_CONTROL_SIDEBAR_OPEN) || extra === 'control_sidebar') {
|
||||
controlSidebar = $(SELECTOR_CONTROL_SIDEBAR_CONTENT).outerHeight()
|
||||
}
|
||||
|
||||
const heights = {
|
||||
window: $(window).height(),
|
||||
header: $(SELECTOR_HEADER).length > 0 && !$('body').hasClass('layout-navbar-fixed') ? $(SELECTOR_HEADER).outerHeight() : 0,
|
||||
footer: $(SELECTOR_FOOTER).length > 0 ? $(SELECTOR_FOOTER).outerHeight() : 0,
|
||||
sidebar: $(SELECTOR_SIDEBAR).length > 0 ? $(SELECTOR_SIDEBAR).height() : 0,
|
||||
controlSidebar
|
||||
}
|
||||
|
||||
const max = this._max(heights)
|
||||
let offset = this._config.panelAutoHeight
|
||||
|
||||
if (offset === true) {
|
||||
offset = 0
|
||||
}
|
||||
|
||||
const $contentSelector = $(SELECTOR_CONTENT)
|
||||
|
||||
if (offset !== false) {
|
||||
if (max === heights.controlSidebar) {
|
||||
$contentSelector.css(this._config.panelAutoHeightMode, (max + offset))
|
||||
} else if (max === heights.window) {
|
||||
$contentSelector.css(this._config.panelAutoHeightMode, (max + offset) - heights.header - heights.footer)
|
||||
} else {
|
||||
$contentSelector.css(this._config.panelAutoHeightMode, (max + offset) - heights.header)
|
||||
}
|
||||
|
||||
if (this._isFooterFixed()) {
|
||||
$contentSelector.css(this._config.panelAutoHeightMode, parseFloat($contentSelector.css(this._config.panelAutoHeightMode)) + heights.footer)
|
||||
}
|
||||
}
|
||||
|
||||
if (!$body.hasClass(CLASS_NAME_LAYOUT_FIXED)) {
|
||||
return
|
||||
}
|
||||
|
||||
if (typeof $.fn.overlayScrollbars !== 'undefined') {
|
||||
$(SELECTOR_SIDEBAR).overlayScrollbars({
|
||||
className: this._config.scrollbarTheme,
|
||||
sizeAutoCapable: true,
|
||||
scrollbars: {
|
||||
autoHide: this._config.scrollbarAutoHide,
|
||||
clickScrolling: true
|
||||
}
|
||||
})
|
||||
} else {
|
||||
$(SELECTOR_SIDEBAR).css('overflow-y', 'auto')
|
||||
}
|
||||
}
|
||||
|
||||
fixLoginRegisterHeight() {
|
||||
const $body = $('body')
|
||||
const $selector = $(`${SELECTOR_LOGIN_BOX}, ${SELECTOR_REGISTER_BOX}`)
|
||||
|
||||
if ($body.hasClass(CLASS_NAME_IFRAME_MODE)) {
|
||||
$body.css('height', '100%')
|
||||
$('.wrapper').css('height', '100%')
|
||||
$('html').css('height', '100%')
|
||||
} else if ($selector.length === 0) {
|
||||
$body.css('height', 'auto')
|
||||
$('html').css('height', 'auto')
|
||||
} else {
|
||||
const boxHeight = $selector.height()
|
||||
|
||||
if ($body.css(this._config.panelAutoHeightMode) !== boxHeight) {
|
||||
$body.css(this._config.panelAutoHeightMode, boxHeight)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Private
|
||||
|
||||
_init() {
|
||||
// Activate layout height watcher
|
||||
this.fixLayoutHeight()
|
||||
|
||||
if (this._config.loginRegisterAutoHeight === true) {
|
||||
this.fixLoginRegisterHeight()
|
||||
} else if (this._config.loginRegisterAutoHeight === parseInt(this._config.loginRegisterAutoHeight, 10)) {
|
||||
setInterval(this.fixLoginRegisterHeight, this._config.loginRegisterAutoHeight)
|
||||
}
|
||||
|
||||
$(SELECTOR_SIDEBAR)
|
||||
.on('collapsed.lte.treeview expanded.lte.treeview', () => {
|
||||
this.fixLayoutHeight()
|
||||
})
|
||||
|
||||
$(SELECTOR_MAIN_SIDEBAR)
|
||||
.on('mouseenter mouseleave', () => {
|
||||
if ($('body').hasClass(CLASS_NAME_SIDEBAR_COLLAPSED)) {
|
||||
this.fixLayoutHeight()
|
||||
}
|
||||
})
|
||||
|
||||
$(SELECTOR_PUSHMENU_BTN)
|
||||
.on('collapsed.lte.pushmenu shown.lte.pushmenu', () => {
|
||||
setTimeout(() => {
|
||||
this.fixLayoutHeight()
|
||||
}, 300)
|
||||
})
|
||||
|
||||
$(SELECTOR_CONTROL_SIDEBAR_BTN)
|
||||
.on('collapsed.lte.controlsidebar', () => {
|
||||
this.fixLayoutHeight()
|
||||
})
|
||||
.on('expanded.lte.controlsidebar', () => {
|
||||
this.fixLayoutHeight('control_sidebar')
|
||||
})
|
||||
|
||||
$(window).resize(() => {
|
||||
this.fixLayoutHeight()
|
||||
})
|
||||
|
||||
setTimeout(() => {
|
||||
$('body.hold-transition').removeClass('hold-transition')
|
||||
}, 50)
|
||||
|
||||
setTimeout(() => {
|
||||
const $preloader = $(SELECTOR_PRELOADER)
|
||||
if ($preloader) {
|
||||
$preloader.css('height', 0)
|
||||
setTimeout(() => {
|
||||
$preloader.children().hide()
|
||||
}, 200)
|
||||
}
|
||||
}, this._config.preloadDuration)
|
||||
}
|
||||
|
||||
_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
|
||||
}
|
||||
|
||||
_isFooterFixed() {
|
||||
return $(SELECTOR_FOOTER).css('position') === 'fixed'
|
||||
}
|
||||
|
||||
// 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(CLASS_NAME_SIDEBAR_FOCUSED)
|
||||
})
|
||||
.on('focusout', () => {
|
||||
$(SELECTOR_MAIN_SIDEBAR).removeClass(CLASS_NAME_SIDEBAR_FOCUSED)
|
||||
})
|
||||
|
||||
/**
|
||||
* jQuery API
|
||||
* ====================================================
|
||||
*/
|
||||
|
||||
$.fn[NAME] = Layout._jQueryInterface
|
||||
$.fn[NAME].Constructor = Layout
|
||||
$.fn[NAME].noConflict = function () {
|
||||
$.fn[NAME] = JQUERY_NO_CONFLICT
|
||||
return Layout._jQueryInterface
|
||||
}
|
||||
|
||||
export default Layout
|
||||
|
|
@ -1,113 +0,0 @@
|
|||
/**
|
||||
* --------------------------------------------
|
||||
* AdminLTE NavbarSearch.js
|
||||
* License MIT
|
||||
* --------------------------------------------
|
||||
*/
|
||||
|
||||
import $ from 'jquery'
|
||||
|
||||
/**
|
||||
* Constants
|
||||
* ====================================================
|
||||
*/
|
||||
|
||||
const NAME = 'NavbarSearch'
|
||||
const DATA_KEY = 'lte.navbar-search'
|
||||
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
||||
|
||||
const SELECTOR_TOGGLE_BUTTON = '[data-widget="navbar-search"]'
|
||||
const SELECTOR_SEARCH_BLOCK = '.navbar-search-block'
|
||||
const SELECTOR_SEARCH_INPUT = '.form-control'
|
||||
|
||||
const CLASS_NAME_OPEN = 'navbar-search-open'
|
||||
|
||||
const Default = {
|
||||
resetOnClose: true,
|
||||
target: SELECTOR_SEARCH_BLOCK
|
||||
}
|
||||
|
||||
/**
|
||||
* Class Definition
|
||||
* ====================================================
|
||||
*/
|
||||
|
||||
class NavbarSearch {
|
||||
constructor(_element, _options) {
|
||||
this._element = _element
|
||||
this._config = $.extend({}, Default, _options)
|
||||
}
|
||||
|
||||
// Public
|
||||
|
||||
open() {
|
||||
$(this._config.target).css('display', 'flex').hide().fadeIn().addClass(CLASS_NAME_OPEN)
|
||||
$(`${this._config.target} ${SELECTOR_SEARCH_INPUT}`).focus()
|
||||
}
|
||||
|
||||
close() {
|
||||
$(this._config.target).fadeOut().removeClass(CLASS_NAME_OPEN)
|
||||
|
||||
if (this._config.resetOnClose) {
|
||||
$(`${this._config.target} ${SELECTOR_SEARCH_INPUT}`).val('')
|
||||
}
|
||||
}
|
||||
|
||||
toggle() {
|
||||
if ($(this._config.target).hasClass(CLASS_NAME_OPEN)) {
|
||||
this.close()
|
||||
} else {
|
||||
this.open()
|
||||
}
|
||||
}
|
||||
|
||||
// Static
|
||||
|
||||
static _jQueryInterface(options) {
|
||||
return this.each(function () {
|
||||
let data = $(this).data(DATA_KEY)
|
||||
const _options = $.extend({}, Default, $(this).data())
|
||||
|
||||
if (!data) {
|
||||
data = new NavbarSearch(this, _options)
|
||||
$(this).data(DATA_KEY, data)
|
||||
}
|
||||
|
||||
if (!/toggle|close|open/.test(options)) {
|
||||
throw new 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') !== 'navbar-search') {
|
||||
button = button.closest(SELECTOR_TOGGLE_BUTTON)
|
||||
}
|
||||
|
||||
NavbarSearch._jQueryInterface.call(button, 'toggle')
|
||||
})
|
||||
|
||||
/**
|
||||
* jQuery API
|
||||
* ====================================================
|
||||
*/
|
||||
|
||||
$.fn[NAME] = NavbarSearch._jQueryInterface
|
||||
$.fn[NAME].Constructor = NavbarSearch
|
||||
$.fn[NAME].noConflict = function () {
|
||||
$.fn[NAME] = JQUERY_NO_CONFLICT
|
||||
return NavbarSearch._jQueryInterface
|
||||
}
|
||||
|
||||
export default NavbarSearch
|
||||
|
|
@ -1,229 +0,0 @@
|
|||
/**
|
||||
* --------------------------------------------
|
||||
* AdminLTE PushMenu.js
|
||||
* License MIT
|
||||
* --------------------------------------------
|
||||
*/
|
||||
|
||||
import $ from 'jquery'
|
||||
|
||||
/**
|
||||
* 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}`
|
||||
const EVENT_COLLAPSED_DONE = `collapsed-done${EVENT_KEY}`
|
||||
const EVENT_SHOWN = `shown${EVENT_KEY}`
|
||||
|
||||
const SELECTOR_TOGGLE_BUTTON = '[data-widget="pushmenu"]'
|
||||
const SELECTOR_BODY = 'body'
|
||||
const SELECTOR_OVERLAY = '#sidebar-overlay'
|
||||
const SELECTOR_WRAPPER = '.wrapper'
|
||||
|
||||
const CLASS_NAME_COLLAPSED = 'sidebar-collapse'
|
||||
const CLASS_NAME_OPEN = 'sidebar-open'
|
||||
const CLASS_NAME_IS_OPENING = 'sidebar-is-opening'
|
||||
const CLASS_NAME_CLOSED = 'sidebar-closed'
|
||||
|
||||
const Default = {
|
||||
autoCollapseSize: 992,
|
||||
enableRemember: false,
|
||||
noTransitionAfterReload: true,
|
||||
animationSpeed: 300
|
||||
}
|
||||
|
||||
/**
|
||||
* Class Definition
|
||||
* ====================================================
|
||||
*/
|
||||
|
||||
class PushMenu {
|
||||
constructor(element, options) {
|
||||
this._element = element
|
||||
this._options = $.extend({}, Default, options)
|
||||
|
||||
if ($(SELECTOR_OVERLAY).length === 0) {
|
||||
this._addOverlay()
|
||||
}
|
||||
|
||||
this._init()
|
||||
}
|
||||
|
||||
// Public
|
||||
|
||||
expand() {
|
||||
const $bodySelector = $(SELECTOR_BODY)
|
||||
|
||||
if (this._options.autoCollapseSize && $(window).width() <= this._options.autoCollapseSize) {
|
||||
$bodySelector.addClass(CLASS_NAME_OPEN)
|
||||
}
|
||||
|
||||
$bodySelector.addClass(CLASS_NAME_IS_OPENING).removeClass(`${CLASS_NAME_COLLAPSED} ${CLASS_NAME_CLOSED}`).delay(50).queue(function () {
|
||||
$bodySelector.removeClass(CLASS_NAME_IS_OPENING)
|
||||
$(this).dequeue()
|
||||
})
|
||||
|
||||
if (this._options.enableRemember) {
|
||||
localStorage.setItem(`remember${EVENT_KEY}`, CLASS_NAME_OPEN)
|
||||
}
|
||||
|
||||
$(this._element).trigger($.Event(EVENT_SHOWN))
|
||||
}
|
||||
|
||||
collapse() {
|
||||
const $bodySelector = $(SELECTOR_BODY)
|
||||
|
||||
if (this._options.autoCollapseSize && $(window).width() <= this._options.autoCollapseSize) {
|
||||
$bodySelector.removeClass(CLASS_NAME_OPEN).addClass(CLASS_NAME_CLOSED)
|
||||
}
|
||||
|
||||
$bodySelector.addClass(CLASS_NAME_COLLAPSED)
|
||||
|
||||
if (this._options.enableRemember) {
|
||||
localStorage.setItem(`remember${EVENT_KEY}`, CLASS_NAME_COLLAPSED)
|
||||
}
|
||||
|
||||
$(this._element).trigger($.Event(EVENT_COLLAPSED))
|
||||
|
||||
setTimeout(() => {
|
||||
$(this._element).trigger($.Event(EVENT_COLLAPSED_DONE))
|
||||
}, this._options.animationSpeed)
|
||||
}
|
||||
|
||||
toggle() {
|
||||
if ($(SELECTOR_BODY).hasClass(CLASS_NAME_COLLAPSED)) {
|
||||
this.expand()
|
||||
} else {
|
||||
this.collapse()
|
||||
}
|
||||
}
|
||||
|
||||
autoCollapse(resize = false) {
|
||||
if (!this._options.autoCollapseSize) {
|
||||
return
|
||||
}
|
||||
|
||||
const $bodySelector = $(SELECTOR_BODY)
|
||||
|
||||
if ($(window).width() <= this._options.autoCollapseSize) {
|
||||
if (!$bodySelector.hasClass(CLASS_NAME_OPEN)) {
|
||||
this.collapse()
|
||||
}
|
||||
} else if (resize === true) {
|
||||
if ($bodySelector.hasClass(CLASS_NAME_OPEN)) {
|
||||
$bodySelector.removeClass(CLASS_NAME_OPEN)
|
||||
} else if ($bodySelector.hasClass(CLASS_NAME_CLOSED)) {
|
||||
this.expand()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
remember() {
|
||||
if (!this._options.enableRemember) {
|
||||
return
|
||||
}
|
||||
|
||||
const $body = $('body')
|
||||
const toggleState = localStorage.getItem(`remember${EVENT_KEY}`)
|
||||
|
||||
if (toggleState === CLASS_NAME_COLLAPSED) {
|
||||
if (this._options.noTransitionAfterReload) {
|
||||
$body.addClass('hold-transition').addClass(CLASS_NAME_COLLAPSED).delay(50).queue(function () {
|
||||
$(this).removeClass('hold-transition')
|
||||
$(this).dequeue()
|
||||
})
|
||||
} else {
|
||||
$body.addClass(CLASS_NAME_COLLAPSED)
|
||||
}
|
||||
} else if (this._options.noTransitionAfterReload) {
|
||||
$body.addClass('hold-transition').removeClass(CLASS_NAME_COLLAPSED).delay(50).queue(function () {
|
||||
$(this).removeClass('hold-transition')
|
||||
$(this).dequeue()
|
||||
})
|
||||
} else {
|
||||
$body.removeClass(CLASS_NAME_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' && /collapse|expand|toggle/.test(operation)) {
|
||||
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
|
||||
}
|
||||
|
||||
export default PushMenu
|
||||
|
|
@ -1,299 +0,0 @@
|
|||
/**
|
||||
* --------------------------------------------
|
||||
* AdminLTE SidebarSearch.js
|
||||
* License MIT
|
||||
* --------------------------------------------
|
||||
*/
|
||||
|
||||
import $, { trim } from 'jquery'
|
||||
|
||||
/**
|
||||
* Constants
|
||||
* ====================================================
|
||||
*/
|
||||
|
||||
const NAME = 'SidebarSearch'
|
||||
const DATA_KEY = 'lte.sidebar-search'
|
||||
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
||||
|
||||
const CLASS_NAME_OPEN = 'sidebar-search-open'
|
||||
const CLASS_NAME_ICON_SEARCH = 'fa-search'
|
||||
const CLASS_NAME_ICON_CLOSE = 'fa-times'
|
||||
const CLASS_NAME_HEADER = 'nav-header'
|
||||
const CLASS_NAME_SEARCH_RESULTS = 'sidebar-search-results'
|
||||
const CLASS_NAME_LIST_GROUP = 'list-group'
|
||||
|
||||
const SELECTOR_DATA_WIDGET = '[data-widget="sidebar-search"]'
|
||||
const SELECTOR_SIDEBAR = '.main-sidebar .nav-sidebar'
|
||||
const SELECTOR_NAV_LINK = '.nav-link'
|
||||
const SELECTOR_NAV_TREEVIEW = '.nav-treeview'
|
||||
const SELECTOR_SEARCH_INPUT = `${SELECTOR_DATA_WIDGET} .form-control`
|
||||
const SELECTOR_SEARCH_BUTTON = `${SELECTOR_DATA_WIDGET} .btn`
|
||||
const SELECTOR_SEARCH_ICON = `${SELECTOR_SEARCH_BUTTON} i`
|
||||
const SELECTOR_SEARCH_LIST_GROUP = `.${CLASS_NAME_LIST_GROUP}`
|
||||
const SELECTOR_SEARCH_RESULTS = `.${CLASS_NAME_SEARCH_RESULTS}`
|
||||
const SELECTOR_SEARCH_RESULTS_GROUP = `${SELECTOR_SEARCH_RESULTS} .${CLASS_NAME_LIST_GROUP}`
|
||||
|
||||
const Default = {
|
||||
arrowSign: '->',
|
||||
minLength: 3,
|
||||
maxResults: 7,
|
||||
highlightName: true,
|
||||
highlightPath: false,
|
||||
highlightClass: 'text-light',
|
||||
notFoundText: 'No element found!'
|
||||
}
|
||||
|
||||
const SearchItems = []
|
||||
|
||||
/**
|
||||
* Class Definition
|
||||
* ====================================================
|
||||
*/
|
||||
|
||||
class SidebarSearch {
|
||||
constructor(_element, _options) {
|
||||
this.element = _element
|
||||
this.options = $.extend({}, Default, _options)
|
||||
this.items = []
|
||||
}
|
||||
|
||||
// Public
|
||||
|
||||
init() {
|
||||
if ($(SELECTOR_DATA_WIDGET).length === 0) {
|
||||
return
|
||||
}
|
||||
|
||||
if ($(SELECTOR_DATA_WIDGET).next(SELECTOR_SEARCH_RESULTS).length === 0) {
|
||||
$(SELECTOR_DATA_WIDGET).after(
|
||||
$('<div />', { class: CLASS_NAME_SEARCH_RESULTS })
|
||||
)
|
||||
}
|
||||
|
||||
if ($(SELECTOR_SEARCH_RESULTS).children(SELECTOR_SEARCH_LIST_GROUP).length === 0) {
|
||||
$(SELECTOR_SEARCH_RESULTS).append(
|
||||
$('<div />', { class: CLASS_NAME_LIST_GROUP })
|
||||
)
|
||||
}
|
||||
|
||||
this._addNotFound()
|
||||
|
||||
$(SELECTOR_SIDEBAR).children().each((i, child) => {
|
||||
this._parseItem(child)
|
||||
})
|
||||
}
|
||||
|
||||
search() {
|
||||
const searchValue = $(SELECTOR_SEARCH_INPUT).val().toLowerCase()
|
||||
if (searchValue.length < this.options.minLength) {
|
||||
$(SELECTOR_SEARCH_RESULTS_GROUP).empty()
|
||||
this._addNotFound()
|
||||
this.close()
|
||||
return
|
||||
}
|
||||
|
||||
const searchResults = SearchItems.filter(item => (item.name).toLowerCase().includes(searchValue))
|
||||
const endResults = $(searchResults.slice(0, this.options.maxResults))
|
||||
$(SELECTOR_SEARCH_RESULTS_GROUP).empty()
|
||||
|
||||
if (endResults.length === 0) {
|
||||
this._addNotFound()
|
||||
} else {
|
||||
endResults.each((i, result) => {
|
||||
$(SELECTOR_SEARCH_RESULTS_GROUP).append(this._renderItem(escape(result.name), encodeURI(result.link), result.path))
|
||||
})
|
||||
}
|
||||
|
||||
this.open()
|
||||
}
|
||||
|
||||
open() {
|
||||
$(SELECTOR_DATA_WIDGET).parent().addClass(CLASS_NAME_OPEN)
|
||||
$(SELECTOR_SEARCH_ICON).removeClass(CLASS_NAME_ICON_SEARCH).addClass(CLASS_NAME_ICON_CLOSE)
|
||||
}
|
||||
|
||||
close() {
|
||||
$(SELECTOR_DATA_WIDGET).parent().removeClass(CLASS_NAME_OPEN)
|
||||
$(SELECTOR_SEARCH_ICON).removeClass(CLASS_NAME_ICON_CLOSE).addClass(CLASS_NAME_ICON_SEARCH)
|
||||
}
|
||||
|
||||
toggle() {
|
||||
if ($(SELECTOR_DATA_WIDGET).parent().hasClass(CLASS_NAME_OPEN)) {
|
||||
this.close()
|
||||
} else {
|
||||
this.open()
|
||||
}
|
||||
}
|
||||
|
||||
// Private
|
||||
|
||||
_parseItem(item, path = []) {
|
||||
if ($(item).hasClass(CLASS_NAME_HEADER)) {
|
||||
return
|
||||
}
|
||||
|
||||
const itemObject = {}
|
||||
const navLink = $(item).clone().find(`> ${SELECTOR_NAV_LINK}`)
|
||||
const navTreeview = $(item).clone().find(`> ${SELECTOR_NAV_TREEVIEW}`)
|
||||
|
||||
const link = navLink.attr('href')
|
||||
const name = navLink.find('p').children().remove().end().text()
|
||||
|
||||
itemObject.name = this._trimText(name)
|
||||
itemObject.link = link
|
||||
itemObject.path = path
|
||||
|
||||
if (navTreeview.length === 0) {
|
||||
SearchItems.push(itemObject)
|
||||
} else {
|
||||
const newPath = itemObject.path.concat([itemObject.name])
|
||||
navTreeview.children().each((i, child) => {
|
||||
this._parseItem(child, newPath)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
_trimText(text) {
|
||||
return trim(text.replace(/(\r\n|\n|\r)/gm, ' '))
|
||||
}
|
||||
|
||||
_renderItem(name, link, path) {
|
||||
path = path.join(` ${this.options.arrowSign} `)
|
||||
name = unescape(name)
|
||||
link = decodeURI(link)
|
||||
|
||||
if (this.options.highlightName || this.options.highlightPath) {
|
||||
const searchValue = $(SELECTOR_SEARCH_INPUT).val().toLowerCase()
|
||||
const regExp = new RegExp(searchValue, 'gi')
|
||||
|
||||
if (this.options.highlightName) {
|
||||
name = name.replace(
|
||||
regExp,
|
||||
str => {
|
||||
return `<strong class="${this.options.highlightClass}">${str}</strong>`
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
if (this.options.highlightPath) {
|
||||
path = path.replace(
|
||||
regExp,
|
||||
str => {
|
||||
return `<strong class="${this.options.highlightClass}">${str}</strong>`
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const groupItemElement = $('<a/>', {
|
||||
href: link,
|
||||
class: 'list-group-item'
|
||||
})
|
||||
const searchTitleElement = $('<div/>', {
|
||||
class: 'search-title'
|
||||
}).html(name)
|
||||
const searchPathElement = $('<div/>', {
|
||||
class: 'search-path'
|
||||
}).html(path)
|
||||
|
||||
groupItemElement.append(searchTitleElement).append(searchPathElement)
|
||||
|
||||
return groupItemElement
|
||||
}
|
||||
|
||||
_addNotFound() {
|
||||
$(SELECTOR_SEARCH_RESULTS_GROUP).append(this._renderItem(this.options.notFoundText, '#', []))
|
||||
}
|
||||
|
||||
// Static
|
||||
|
||||
static _jQueryInterface(config) {
|
||||
let data = $(this).data(DATA_KEY)
|
||||
|
||||
if (!data) {
|
||||
data = $(this).data()
|
||||
}
|
||||
|
||||
const _options = $.extend({}, Default, typeof config === 'object' ? config : data)
|
||||
const plugin = new SidebarSearch($(this), _options)
|
||||
|
||||
$(this).data(DATA_KEY, typeof config === 'object' ? config : data)
|
||||
|
||||
if (typeof config === 'string' && /init|toggle|close|open|search/.test(config)) {
|
||||
plugin[config]()
|
||||
} else {
|
||||
plugin.init()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Data API
|
||||
* ====================================================
|
||||
*/
|
||||
$(document).on('click', SELECTOR_SEARCH_BUTTON, event => {
|
||||
event.preventDefault()
|
||||
|
||||
SidebarSearch._jQueryInterface.call($(SELECTOR_DATA_WIDGET), 'toggle')
|
||||
})
|
||||
|
||||
$(document).on('keyup', SELECTOR_SEARCH_INPUT, event => {
|
||||
if (event.keyCode == 38) {
|
||||
event.preventDefault()
|
||||
$(SELECTOR_SEARCH_RESULTS_GROUP).children().last().focus()
|
||||
return
|
||||
}
|
||||
|
||||
if (event.keyCode == 40) {
|
||||
event.preventDefault()
|
||||
$(SELECTOR_SEARCH_RESULTS_GROUP).children().first().focus()
|
||||
return
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
SidebarSearch._jQueryInterface.call($(SELECTOR_DATA_WIDGET), 'search')
|
||||
}, 100)
|
||||
})
|
||||
|
||||
$(document).on('keydown', SELECTOR_SEARCH_RESULTS_GROUP, event => {
|
||||
const $focused = $(':focus')
|
||||
|
||||
if (event.keyCode == 38) {
|
||||
event.preventDefault()
|
||||
|
||||
if ($focused.is(':first-child')) {
|
||||
$focused.siblings().last().focus()
|
||||
} else {
|
||||
$focused.prev().focus()
|
||||
}
|
||||
}
|
||||
|
||||
if (event.keyCode == 40) {
|
||||
event.preventDefault()
|
||||
|
||||
if ($focused.is(':last-child')) {
|
||||
$focused.siblings().first().focus()
|
||||
} else {
|
||||
$focused.next().focus()
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
$(window).on('load', () => {
|
||||
SidebarSearch._jQueryInterface.call($(SELECTOR_DATA_WIDGET), 'init')
|
||||
})
|
||||
|
||||
/**
|
||||
* jQuery API
|
||||
* ====================================================
|
||||
*/
|
||||
|
||||
$.fn[NAME] = SidebarSearch._jQueryInterface
|
||||
$.fn[NAME].Constructor = SidebarSearch
|
||||
$.fn[NAME].noConflict = function () {
|
||||
$.fn[NAME] = JQUERY_NO_CONFLICT
|
||||
return SidebarSearch._jQueryInterface
|
||||
}
|
||||
|
||||
export default SidebarSearch
|
||||
|
|
@ -1,209 +0,0 @@
|
|||
/**
|
||||
* --------------------------------------------
|
||||
* AdminLTE Toasts.js
|
||||
* License MIT
|
||||
* --------------------------------------------
|
||||
*/
|
||||
|
||||
import $ from 'jquery'
|
||||
|
||||
/**
|
||||
* 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}`
|
||||
const EVENT_CREATED = `created${EVENT_KEY}`
|
||||
const EVENT_REMOVED = `removed${EVENT_KEY}`
|
||||
|
||||
const SELECTOR_CONTAINER_TOP_RIGHT = '#toastsContainerTopRight'
|
||||
const SELECTOR_CONTAINER_TOP_LEFT = '#toastsContainerTopLeft'
|
||||
const SELECTOR_CONTAINER_BOTTOM_RIGHT = '#toastsContainerBottomRight'
|
||||
const SELECTOR_CONTAINER_BOTTOM_LEFT = '#toastsContainerBottomLeft'
|
||||
|
||||
const CLASS_NAME_TOP_RIGHT = 'toasts-top-right'
|
||||
const CLASS_NAME_TOP_LEFT = 'toasts-top-left'
|
||||
const CLASS_NAME_BOTTOM_RIGHT = 'toasts-bottom-right'
|
||||
const CLASS_NAME_BOTTOM_LEFT = 'toasts-bottom-left'
|
||||
|
||||
const POSITION_TOP_RIGHT = 'topRight'
|
||||
const POSITION_TOP_LEFT = 'topLeft'
|
||||
const POSITION_BOTTOM_RIGHT = 'bottomRight'
|
||||
const POSITION_BOTTOM_LEFT = 'bottomLeft'
|
||||
|
||||
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()
|
||||
|
||||
$('body').trigger($.Event(EVENT_INIT))
|
||||
}
|
||||
|
||||
// Public
|
||||
|
||||
create() {
|
||||
const 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)
|
||||
}
|
||||
|
||||
const toastHeader = $('<div class="toast-header">')
|
||||
|
||||
if (this._config.image != null) {
|
||||
const toastImage = $('<img />').addClass('rounded mr-2').attr('src', this._config.image).attr('alt', this._config.imageAlt)
|
||||
|
||||
if (this._config.imageHeight != null) {
|
||||
toastImage.height(this._config.imageHeight).width('auto')
|
||||
}
|
||||
|
||||
toastHeader.append(toastImage)
|
||||
}
|
||||
|
||||
if (this._config.icon != null) {
|
||||
toastHeader.append($('<i />').addClass('mr-2').addClass(this._config.icon))
|
||||
}
|
||||
|
||||
if (this._config.title != null) {
|
||||
toastHeader.append($('<strong />').addClass('mr-auto').html(this._config.title))
|
||||
}
|
||||
|
||||
if (this._config.subtitle != null) {
|
||||
toastHeader.append($('<small />').html(this._config.subtitle))
|
||||
}
|
||||
|
||||
if (this._config.close == true) {
|
||||
const toastClose = $('<button data-dismiss="toast" />').attr('type', 'button').addClass('ml-2 mb-1 close').attr('aria-label', 'Close').append('<span aria-hidden="true">×</span>')
|
||||
|
||||
if (this._config.title == null) {
|
||||
toastClose.toggleClass('ml-2 ml-auto')
|
||||
}
|
||||
|
||||
toastHeader.append(toastClose)
|
||||
}
|
||||
|
||||
toast.append(toastHeader)
|
||||
|
||||
if (this._config.body != null) {
|
||||
toast.append($('<div class="toast-body" />').html(this._config.body))
|
||||
}
|
||||
|
||||
$(this._getContainerId()).prepend(toast)
|
||||
|
||||
const $body = $('body')
|
||||
|
||||
$body.trigger($.Event(EVENT_CREATED))
|
||||
toast.toast('show')
|
||||
|
||||
if (this._config.autoremove) {
|
||||
toast.on('hidden.bs.toast', function () {
|
||||
$(this).delay(200).remove()
|
||||
$body.trigger($.Event(EVENT_REMOVED))
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// Static
|
||||
|
||||
_getContainerId() {
|
||||
if (this._config.position == POSITION_TOP_RIGHT) {
|
||||
return SELECTOR_CONTAINER_TOP_RIGHT
|
||||
}
|
||||
|
||||
if (this._config.position == POSITION_TOP_LEFT) {
|
||||
return SELECTOR_CONTAINER_TOP_LEFT
|
||||
}
|
||||
|
||||
if (this._config.position == POSITION_BOTTOM_RIGHT) {
|
||||
return SELECTOR_CONTAINER_BOTTOM_RIGHT
|
||||
}
|
||||
|
||||
if (this._config.position == POSITION_BOTTOM_LEFT) {
|
||||
return SELECTOR_CONTAINER_BOTTOM_LEFT
|
||||
}
|
||||
}
|
||||
|
||||
_prepareContainer() {
|
||||
if ($(this._getContainerId()).length === 0) {
|
||||
const container = $('<div />').attr('id', this._getContainerId().replace('#', ''))
|
||||
if (this._config.position == POSITION_TOP_RIGHT) {
|
||||
container.addClass(CLASS_NAME_TOP_RIGHT)
|
||||
} else if (this._config.position == POSITION_TOP_LEFT) {
|
||||
container.addClass(CLASS_NAME_TOP_LEFT)
|
||||
} else if (this._config.position == POSITION_BOTTOM_RIGHT) {
|
||||
container.addClass(CLASS_NAME_BOTTOM_RIGHT)
|
||||
} else if (this._config.position == POSITION_BOTTOM_LEFT) {
|
||||
container.addClass(CLASS_NAME_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)
|
||||
const 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
|
||||
}
|
||||
|
||||
export default Toasts
|
||||
|
|
@ -1,118 +0,0 @@
|
|||
/**
|
||||
* --------------------------------------------
|
||||
* AdminLTE TodoList.js
|
||||
* License MIT
|
||||
* --------------------------------------------
|
||||
*/
|
||||
|
||||
import $ from 'jquery'
|
||||
|
||||
/**
|
||||
* Constants
|
||||
* ====================================================
|
||||
*/
|
||||
|
||||
const NAME = 'TodoList'
|
||||
const DATA_KEY = 'lte.todolist'
|
||||
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
||||
|
||||
const SELECTOR_DATA_TOGGLE = '[data-widget="todo-list"]'
|
||||
const CLASS_NAME_TODO_LIST_DONE = 'done'
|
||||
|
||||
const Default = {
|
||||
onCheck(item) {
|
||||
return item
|
||||
},
|
||||
onUnCheck(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(CLASS_NAME_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() {
|
||||
const $toggleSelector = this._element
|
||||
|
||||
$toggleSelector.find('input:checkbox:checked').parents('li').toggleClass(CLASS_NAME_TODO_LIST_DONE)
|
||||
$toggleSelector.on('change', 'input:checkbox', event => {
|
||||
this.toggle($(event.target))
|
||||
})
|
||||
}
|
||||
|
||||
// Static
|
||||
|
||||
static _jQueryInterface(config) {
|
||||
return this.each(function () {
|
||||
let data = $(this).data(DATA_KEY)
|
||||
|
||||
if (!data) {
|
||||
data = $(this).data()
|
||||
}
|
||||
|
||||
const _options = $.extend({}, Default, typeof config === 'object' ? config : data)
|
||||
const plugin = new TodoList($(this), _options)
|
||||
|
||||
$(this).data(DATA_KEY, typeof config === 'object' ? config : data)
|
||||
|
||||
if (config === 'init') {
|
||||
plugin[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
|
||||
}
|
||||
|
||||
export default TodoList
|
||||
|
|
@ -1,175 +0,0 @@
|
|||
/**
|
||||
* --------------------------------------------
|
||||
* AdminLTE Treeview.js
|
||||
* License MIT
|
||||
* --------------------------------------------
|
||||
*/
|
||||
|
||||
import $ from 'jquery'
|
||||
|
||||
/**
|
||||
* Constants
|
||||
* ====================================================
|
||||
*/
|
||||
|
||||
const NAME = 'Treeview'
|
||||
const DATA_KEY = 'lte.treeview'
|
||||
const EVENT_KEY = `.${DATA_KEY}`
|
||||
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
||||
|
||||
const EVENT_EXPANDED = `expanded${EVENT_KEY}`
|
||||
const EVENT_COLLAPSED = `collapsed${EVENT_KEY}`
|
||||
const EVENT_LOAD_DATA_API = `load${EVENT_KEY}`
|
||||
|
||||
const SELECTOR_LI = '.nav-item'
|
||||
const SELECTOR_LINK = '.nav-link'
|
||||
const SELECTOR_TREEVIEW_MENU = '.nav-treeview'
|
||||
const SELECTOR_OPEN = '.menu-open'
|
||||
const SELECTOR_DATA_WIDGET = '[data-widget="treeview"]'
|
||||
|
||||
const CLASS_NAME_OPEN = 'menu-open'
|
||||
const CLASS_NAME_IS_OPENING = 'menu-is-opening'
|
||||
const CLASS_NAME_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() {
|
||||
$(`${SELECTOR_LI}${SELECTOR_OPEN} ${SELECTOR_TREEVIEW_MENU}${SELECTOR_OPEN}`).css('display', 'block')
|
||||
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)
|
||||
}
|
||||
|
||||
parentLi.addClass(CLASS_NAME_IS_OPENING)
|
||||
treeviewMenu.stop().slideDown(this._config.animationSpeed, () => {
|
||||
parentLi.addClass(CLASS_NAME_OPEN)
|
||||
$(this._element).trigger(expandedEvent)
|
||||
})
|
||||
|
||||
if (this._config.expandSidebar) {
|
||||
this._expandSidebar()
|
||||
}
|
||||
}
|
||||
|
||||
collapse(treeviewMenu, parentLi) {
|
||||
const collapsedEvent = $.Event(EVENT_COLLAPSED)
|
||||
|
||||
parentLi.removeClass(`${CLASS_NAME_IS_OPENING} ${CLASS_NAME_OPEN}`)
|
||||
treeviewMenu.stop().slideUp(this._config.animationSpeed, () => {
|
||||
$(this._element).trigger(collapsedEvent)
|
||||
treeviewMenu.find(`${SELECTOR_OPEN} > ${SELECTOR_TREEVIEW_MENU}`).slideUp()
|
||||
treeviewMenu.find(SELECTOR_OPEN).removeClass(`${CLASS_NAME_IS_OPENING} ${CLASS_NAME_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(CLASS_NAME_OPEN)
|
||||
|
||||
if (isOpen) {
|
||||
this.collapse($(treeviewMenu), parentLi)
|
||||
} else {
|
||||
this.expand($(treeviewMenu), parentLi)
|
||||
}
|
||||
}
|
||||
|
||||
// Private
|
||||
|
||||
_setupListeners() {
|
||||
const elementId = this._element.attr('id') !== undefined ? `#${this._element.attr('id')}` : ''
|
||||
$(document).on('click', `${elementId}${this._config.trigger}`, event => {
|
||||
this.toggle(event)
|
||||
})
|
||||
}
|
||||
|
||||
_expandSidebar() {
|
||||
if ($('body').hasClass(CLASS_NAME_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
|
||||
}
|
||||
|
||||
export default Treeview
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
{
|
||||
"env": {
|
||||
"browser": false,
|
||||
"node": true
|
||||
},
|
||||
"parserOptions": {
|
||||
"sourceType": "script"
|
||||
},
|
||||
"extends": "../../.eslintrc.json",
|
||||
"rules": {
|
||||
"no-console": "off",
|
||||
"strict": "error",
|
||||
"unicorn/prefer-module": "off"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
'use strict'
|
||||
|
||||
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
|
||||
|
|
@ -1,58 +0,0 @@
|
|||
#!/usr/bin/env node
|
||||
|
||||
'use strict'
|
||||
|
||||
const path = require('path')
|
||||
const fse = require('fs-extra')
|
||||
const fs = require('fs')
|
||||
const Plugins = require('./DocsPlugins')
|
||||
|
||||
class Publish {
|
||||
constructor() {
|
||||
this.options = {
|
||||
verbose: false
|
||||
}
|
||||
|
||||
this.getArguments()
|
||||
}
|
||||
|
||||
getArguments() {
|
||||
if (process.argv.length > 2) {
|
||||
const 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, {
|
||||
// Skip copying dot files
|
||||
filter(src) {
|
||||
return !path.basename(src).startsWith('.')
|
||||
}
|
||||
})
|
||||
|
||||
if (this.options.verbose) {
|
||||
console.log(`Copied ${module.from} to ${module.to}`)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`Error: ${error}`)
|
||||
}
|
||||
})
|
||||
|
||||
const insertText = '---\r\nlayout: page\r\ntitle: \r\n---\r\n'
|
||||
|
||||
fs.writeFileSync('docs/how-to-contribute.md', insertText + fs.readFileSync('.github/CONTRIBUTING.md', 'utf8'))
|
||||
}
|
||||
}
|
||||
|
||||
(new Publish()).run()
|
||||
|
|
@ -1,449 +0,0 @@
|
|||
'use strict'
|
||||
|
||||
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'
|
||||
},
|
||||
{
|
||||
from: 'node_modules/flot/source/',
|
||||
to: 'plugins/flot/plugins'
|
||||
},
|
||||
// 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-searchbuilder/js',
|
||||
to: 'plugins/datatables-searchbuilder/js'
|
||||
},
|
||||
{
|
||||
from: 'node_modules/datatables.net-searchbuilder-bs4/js',
|
||||
to: 'plugins/datatables-searchbuilder/js'
|
||||
},
|
||||
{
|
||||
from: 'node_modules/datatables.net-searchbuilder-bs4/css',
|
||||
to: 'plugins/datatables-searchbuilder/css'
|
||||
},
|
||||
{
|
||||
from: 'node_modules/datatables.net-searchpanes/js',
|
||||
to: 'plugins/datatables-searchpanes/js'
|
||||
},
|
||||
{
|
||||
from: 'node_modules/datatables.net-searchpanes-bs4/js',
|
||||
to: 'plugins/datatables-searchpanes/js'
|
||||
},
|
||||
{
|
||||
from: 'node_modules/datatables.net-searchpanes-bs4/css',
|
||||
to: 'plugins/datatables-searchpanes/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/',
|
||||
to: 'plugins/fullcalendar'
|
||||
},
|
||||
// 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/db.js',
|
||||
to: 'plugins/jsgrid/demos/db.js'
|
||||
},
|
||||
// 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'
|
||||
},
|
||||
// bs-stepper
|
||||
{
|
||||
from: 'node_modules/bs-stepper/dist/',
|
||||
to: 'plugins/bs-stepper'
|
||||
},
|
||||
// CodeMirror
|
||||
{
|
||||
from: 'node_modules/codemirror/lib/',
|
||||
to: 'plugins/codemirror'
|
||||
},
|
||||
{
|
||||
from: 'node_modules/codemirror/addon/',
|
||||
to: 'plugins/codemirror/addon'
|
||||
},
|
||||
{
|
||||
from: 'node_modules/codemirror/keymap/',
|
||||
to: 'plugins/codemirror/keymap'
|
||||
},
|
||||
{
|
||||
from: 'node_modules/codemirror/mode/',
|
||||
to: 'plugins/codemirror/mode'
|
||||
},
|
||||
{
|
||||
from: 'node_modules/codemirror/theme/',
|
||||
to: 'plugins/codemirror/theme'
|
||||
},
|
||||
// dropzonejs
|
||||
{
|
||||
from: 'node_modules/dropzone/dist/',
|
||||
to: 'plugins/dropzone'
|
||||
},
|
||||
// uPlot
|
||||
{
|
||||
from: 'node_modules/uplot/dist/',
|
||||
to: 'plugins/uplot'
|
||||
}
|
||||
]
|
||||
|
||||
module.exports = Plugins
|
||||
|
|
@ -1,59 +0,0 @@
|
|||
#!/usr/bin/env node
|
||||
|
||||
'use strict'
|
||||
|
||||
const path = require('path')
|
||||
const fse = require('fs-extra')
|
||||
const Plugins = require('./Plugins')
|
||||
|
||||
class Publish {
|
||||
constructor() {
|
||||
this.options = {
|
||||
verbose: false
|
||||
}
|
||||
|
||||
this.getArguments()
|
||||
}
|
||||
|
||||
getArguments() {
|
||||
if (process.argv.length > 2) {
|
||||
const 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 => {
|
||||
const fseOptions = {
|
||||
// Skip copying dot files
|
||||
filter(src) {
|
||||
return !path.basename(src).startsWith('.')
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
if (fse.existsSync(module.from)) {
|
||||
fse.copySync(module.from, module.to, fseOptions)
|
||||
} else {
|
||||
fse.copySync(module.from.replace('node_modules/', '../'), module.to, fseOptions)
|
||||
}
|
||||
|
||||
if (this.options.verbose) {
|
||||
console.log(`Copied ${module.from} to ${module.to}`)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`Error: ${error}`)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
(new Publish()).run()
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
#!/usr/bin/env node
|
||||
|
||||
/*!
|
||||
* Script to run vnu-jar if Java is available.
|
||||
* Copyright 2017-2021 The Bootstrap Authors
|
||||
* Copyright 2017-2021 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
*/
|
||||
|
||||
'use strict'
|
||||
|
||||
const childProcess = require('child_process')
|
||||
const vnu = require('vnu-jar')
|
||||
|
||||
childProcess.exec('java -version', (error, stdout, stderr) => {
|
||||
if (error) {
|
||||
console.error('Skipping vnu-jar test; Java is missing.')
|
||||
return
|
||||
}
|
||||
|
||||
const is32bitJava = !/64-Bit/.test(stderr)
|
||||
|
||||
// vnu-jar accepts multiple ignores joined with a `|`.
|
||||
// Also note that the ignores are regular expressions.
|
||||
const ignores = [
|
||||
// "autocomplete" is included in <button> and checkboxes and radio <input>s due to
|
||||
// Firefox's non-standard autocomplete behavior - see https://bugzilla.mozilla.org/show_bug.cgi?id=654072
|
||||
'Attribute “autocomplete” is only allowed when the input type is.*'
|
||||
].join('|')
|
||||
|
||||
const args = [
|
||||
'-jar',
|
||||
vnu,
|
||||
'--asciiquotes',
|
||||
'--skip-non-html',
|
||||
// Ignore the language code warnings
|
||||
'--no-langdetect',
|
||||
'--Werror',
|
||||
`--filterpattern "${ignores}"`,
|
||||
'./*.html',
|
||||
'docs_html/',
|
||||
'pages/'
|
||||
]
|
||||
|
||||
// For the 32-bit Java we need to pass `-Xss512k`
|
||||
if (is32bitJava) {
|
||||
args.splice(0, 0, '-Xss512k')
|
||||
}
|
||||
|
||||
return childProcess.spawn('java', args, {
|
||||
shell: true,
|
||||
stdio: 'inherit'
|
||||
})
|
||||
.on('exit', process.exit)
|
||||
})
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
/*!
|
||||
* AdminLTE v3.2.0-rc
|
||||
* Author: Colorlib
|
||||
* Website: AdminLTE.io <https://adminlte.io>
|
||||
* License: Open source - MIT <https://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 "variables-alt";
|
||||
@import "mixins";
|
||||
|
||||
@import "parts/core";
|
||||
@import "parts/components";
|
||||
@import "parts/extra-components";
|
||||
@import "parts/pages";
|
||||
@import "parts/plugins";
|
||||
@import "parts/miscellaneous";
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
//
|
||||
// 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-color: $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));
|
||||
}
|
||||
}
|
||||
|
||||
@include dark-mode () {
|
||||
@each $color, $value in $theme-colors-alt {
|
||||
.alert-#{$color} {
|
||||
color: color-yiq($value);
|
||||
background-color: $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));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
//
|
||||
// Component: Animation
|
||||
//
|
||||
|
||||
.animation {
|
||||
&__shake {
|
||||
animation: shake 1500ms;
|
||||
}
|
||||
&__wobble {
|
||||
animation: wobble 1500ms;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
|
|
@ -1,922 +0,0 @@
|
|||
// 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: #fff !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;
|
||||
|
||||
// Characters which are escaped by the escape-svg function
|
||||
$escaped-characters: (
|
||||
("<", "%3c"),
|
||||
(">", "%3e"),
|
||||
("#", "%23"),
|
||||
("(", "%28"),
|
||||
(")", "%29"),
|
||||
) !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: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'><path fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>") !default;
|
||||
$custom-select-background: escape-svg($custom-select-indicator) right $custom-select-padding-x center / $custom-select-bg-size no-repeat !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
|
||||
$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-border-radius: $border-radius-lg !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;
|
||||
|
|
@ -1,106 +0,0 @@
|
|||
//
|
||||
// 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%);
|
||||
|
||||
&,
|
||||
.pushmenu {
|
||||
color: rgba($white, .8);
|
||||
|
||||
&:hover {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[class*="sidebar-light"] & {
|
||||
border-bottom: 1px solid $gray-300;
|
||||
|
||||
&,
|
||||
.pushmenu {
|
||||
color: rgba($black, .8);
|
||||
|
||||
&:hover {
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pushmenu {
|
||||
margin-right: $sidebar-padding-x;
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
|
||||
.brand-link {
|
||||
padding: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
&.single {
|
||||
margin-top: -.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,179 +0,0 @@
|
|||
//
|
||||
// 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-color: $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%);
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
color: $button-default-color;
|
||||
background-color: $button-default-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-outline-light {
|
||||
color: darken($light, 20%);
|
||||
border-color: darken($light, 20%);
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
color: darken($light, 20%);
|
||||
border-color: darken($light, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
// 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,
|
||||
> .fal,
|
||||
> .fad,
|
||||
> .svg-inline--fa,
|
||||
> .ion {
|
||||
display: block;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
> .svg-inline--fa {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $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, .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);
|
||||
}
|
||||
|
||||
@include dark-mode () {
|
||||
.btn-default,
|
||||
.btn-app {
|
||||
background-color: lighten($dark, 2.5%);
|
||||
color: $white;
|
||||
border-color: $gray-600;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: lighten($dark, 5%);
|
||||
color: $gray-300;
|
||||
border-color: lighten($gray-600, 2.5%);
|
||||
}
|
||||
}
|
||||
.btn-light {
|
||||
background-color: lighten($dark, 7.5%);
|
||||
color: $white;
|
||||
border-color: $gray-600;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: lighten($dark, 10%);
|
||||
color: $gray-300;
|
||||
border-color: lighten($gray-600, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors-alt {
|
||||
.btn-#{$color} {
|
||||
@if $color == dark {
|
||||
@include button-variant(darken($value, 5%), lighten($value, 10%));
|
||||
} @else {
|
||||
@include button-variant($value, $value);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors-alt {
|
||||
.btn-outline-#{$color} {
|
||||
@if $color == dark {
|
||||
@include button-outline-variant(darken($value, 20%));
|
||||
} @else {
|
||||
@include button-outline-variant($value);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,73 +0,0 @@
|
|||
//
|
||||
// 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%);
|
||||
}
|
||||
}
|
||||
|
||||
@include dark-mode () {
|
||||
.callout {
|
||||
background-color: lighten($dark, 5%);
|
||||
|
||||
&.callout-danger {
|
||||
border-left-color: lighten($danger-alt, 10%);
|
||||
}
|
||||
|
||||
&.callout-warning {
|
||||
border-left-color: lighten($warning-alt, 10%);
|
||||
}
|
||||
|
||||
&.callout-info {
|
||||
border-left-color: lighten($info-alt, 10%);
|
||||
}
|
||||
|
||||
&.callout-success {
|
||||
border-left-color: lighten($success-alt, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,545 +0,0 @@
|
|||
//
|
||||
// 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: $zindex-modal-backdrop;
|
||||
|
||||
&.was-collapsed .card-body {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
[data-card-widgett="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:not(.nav-sidebar) {
|
||||
> 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 {
|
||||
border-left-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.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-color: 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-color: $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-color: $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,
|
||||
> .fal,
|
||||
> .fad,
|
||||
> .svg-inline--fa,
|
||||
> .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-color: $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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include dark-mode () {
|
||||
|
||||
// Color variants
|
||||
@each $name, $color in $theme-colors-alt {
|
||||
@include cards-variant($name, $color);
|
||||
}
|
||||
|
||||
@each $name, $color in $colors-alt {
|
||||
@include cards-variant($name, $color);
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: $dark;
|
||||
color: $white;
|
||||
|
||||
.card {
|
||||
background-color: lighten($dark, 5%);
|
||||
color: $white;
|
||||
}
|
||||
.nav.flex-column > li {
|
||||
border-bottom-color: $gray-600;
|
||||
}
|
||||
.card-footer {
|
||||
background-color: rgba($black, .1);
|
||||
}
|
||||
&.card-outline-tabs .card-header a:hover {
|
||||
border-color: $gray-600;
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
&:not(.card-outline) > .card-header a.active {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.card-comments {
|
||||
background-color: lighten($dark, 1.25%);
|
||||
.username {
|
||||
color: $gray-400;
|
||||
}
|
||||
.card-comment {
|
||||
border-bottom-color: lighten($dark, 7.5%);
|
||||
}
|
||||
}
|
||||
|
||||
.todo-list > li {
|
||||
background-color: lighten($dark, 5%);
|
||||
border-color: lighten($dark, 7.5%);
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.todo-list {
|
||||
@each $name, $color in $theme-colors-alt {
|
||||
.#{$name} {
|
||||
border-left-color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
@each $name, $color in $colors-alt {
|
||||
.#{$name} {
|
||||
border-left-color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
//
|
||||
// Component: Carousel
|
||||
//
|
||||
|
||||
.carousel-control-custom-icon {
|
||||
.carousel-control-prev & {
|
||||
margin-left: -20px;
|
||||
}
|
||||
.carousel-control-next & {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
> .fa,
|
||||
> .fas,
|
||||
> .far,
|
||||
> .fab,
|
||||
> .fal,
|
||||
> .fad,
|
||||
> .svg-inline--fa,
|
||||
> .ion {
|
||||
display: inline-block;
|
||||
font-size: 40px;
|
||||
margin-top: -20px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
z-index: 5;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
.close {
|
||||
float: right;
|
||||
@include font-size($close-font-size);
|
||||
font-weight: $close-font-weight;
|
||||
line-height: 1;
|
||||
color: $close-color;
|
||||
text-shadow: $close-text-shadow;
|
||||
opacity: .5;
|
||||
|
||||
// Override <a>'s hover style
|
||||
@include hover() {
|
||||
color: $close-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:not(:disabled):not(.disabled) {
|
||||
@include hover-focus() {
|
||||
opacity: .75;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Additional properties for button version
|
||||
// iOS requires the button element instead of an anchor tag.
|
||||
// If you want the anchor version, it requires `href="#"`.
|
||||
// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
|
||||
|
||||
// stylelint-disable-next-line selector-no-qualifying-type
|
||||
button.close {
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// Future-proof disabling of clicks on `<a>` elements
|
||||
|
||||
// stylelint-disable-next-line selector-no-qualifying-type
|
||||
a.close.disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
|
@ -1,148 +0,0 @@
|
|||
//
|
||||
// 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include dark-mode () {
|
||||
.bg-light {
|
||||
background-color: lighten($dark, 7.5%) !important;
|
||||
color: $white !important;
|
||||
}
|
||||
.text-black,
|
||||
.text-dark,
|
||||
.link-black,
|
||||
.link-dark {
|
||||
color: $gray-400 !important;
|
||||
}
|
||||
|
||||
// Background colors (theme colors)
|
||||
@each $name, $color in $theme-colors-alt {
|
||||
@include background-variant($name, $color);
|
||||
}
|
||||
|
||||
// Background colors (colors)
|
||||
@each $name, $color in $colors-alt {
|
||||
@include background-variant($name, $color);
|
||||
}
|
||||
|
||||
// Gradient Background colors (theme colors)
|
||||
@each $name, $color in $theme-colors-alt {
|
||||
@include background-gradient-variant($name, $color);
|
||||
}
|
||||
|
||||
// Gradient Background colors (colors)
|
||||
@each $name, $color in $colors-alt {
|
||||
@include background-gradient-variant($name, $color);
|
||||
}
|
||||
|
||||
// Accent colors (theme colors)
|
||||
@each $name, $color in $theme-colors-alt {
|
||||
@include accent-variant($name, $color);
|
||||
}
|
||||
|
||||
[class*="accent-"] {
|
||||
@each $name, $color in $theme-colors-alt {
|
||||
a.btn-#{$name} {
|
||||
color: color-yiq($color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Accent colors (colors)
|
||||
@each $name, $color in $colors-alt {
|
||||
@include accent-variant($name, $color);
|
||||
}
|
||||
|
||||
.border-dark {
|
||||
border-color: lighten($dark, 10%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
|
|
@ -1,179 +0,0 @@
|
|||
//
|
||||
// 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 !important;
|
||||
|
||||
&,
|
||||
&::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 {
|
||||
background-color: $sidebar-dark-bg;
|
||||
|
||||
&,
|
||||
a,
|
||||
.nav-link {
|
||||
color: $sidebar-dark-color;
|
||||
}
|
||||
|
||||
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-color: $sidebar-light-bg;
|
||||
border-left: $main-header-bottom-border;
|
||||
}
|
||||
|
|
@ -1,259 +0,0 @@
|
|||
//
|
||||
// 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-color: $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-color: $dark;
|
||||
bottom: 0;
|
||||
color: $white;
|
||||
height: 250px;
|
||||
overflow: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.direct-chat-contacts-light {
|
||||
background-color: $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, .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: 400;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
|
||||
@include dark-mode () {
|
||||
.direct-chat-text {
|
||||
background-color: lighten($dark, 7.5%);
|
||||
border-color: lighten($dark, 10%);
|
||||
color: $white;
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
border-right-color: lighten($dark, 10%);
|
||||
}
|
||||
}
|
||||
.direct-chat-timestamp {
|
||||
color: $gray-500;
|
||||
}
|
||||
.right > .direct-chat-text {
|
||||
&::after,
|
||||
&::before {
|
||||
border-right-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// Color variants
|
||||
@each $name, $color in $theme-colors-alt {
|
||||
.direct-chat-#{$name} {
|
||||
@include direct-chat-variant($color);
|
||||
}
|
||||
}
|
||||
|
||||
@each $name, $color in $colors-alt {
|
||||
.direct-chat-#{$name} {
|
||||
@include direct-chat-variant($color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,295 +0,0 @@
|
|||
//
|
||||
// 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: 0;
|
||||
margin-top: 0;
|
||||
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;
|
||||
}
|
||||
|
||||
// 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-color: $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, .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-color: $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;
|
||||
}
|
||||
}
|
||||
|
||||
@include dark-mode () {
|
||||
.dropdown-menu {
|
||||
background-color: $dark;
|
||||
color: $white;
|
||||
}
|
||||
.dropdown-item {
|
||||
color: $white;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: lighten($dark, 5%);
|
||||
}
|
||||
}
|
||||
.dropdown-divider {
|
||||
border-color: $gray-600;
|
||||
}
|
||||
|
||||
.navbar-nav > .user-menu > .dropdown-menu {
|
||||
> .user-footer {
|
||||
background-color: lighten($dark, 2.5%);
|
||||
color: $white;
|
||||
|
||||
.btn-default {
|
||||
color: $white;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: lighten($dark, 5%);
|
||||
color: $gray-300;
|
||||
}
|
||||
&:focus {
|
||||
background-color: lighten($dark, 7.5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
> .user-body {
|
||||
border-color: $gray-600;
|
||||
}
|
||||
> .user-body a {
|
||||
background-color: transparent !important;
|
||||
color: $white !important;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $gray-400 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
//
|
||||
// Component: Elevation
|
||||
//
|
||||
|
||||
.elevation-0 {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
// Background colors (colors)
|
||||
@each $name, $value in $elevations {
|
||||
.elevation-#{$name} {
|
||||
box-shadow: $value !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,451 +0,0 @@
|
|||
//
|
||||
// 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,
|
||||
&.fal,
|
||||
&.fad,
|
||||
&.svg-inline--fa,
|
||||
&.ion {
|
||||
line-height: $input-height;
|
||||
}
|
||||
}
|
||||
|
||||
.input-lg + .form-control-feedback,
|
||||
.input-group-lg + .form-control-feedback {
|
||||
&.fa,
|
||||
&.fas,
|
||||
&.far,
|
||||
&.fab,
|
||||
&.fal,
|
||||
&.fad,
|
||||
&.svg-inline--fa,
|
||||
&.ion {
|
||||
line-height: $input-height-lg;
|
||||
}
|
||||
}
|
||||
|
||||
.form-group-lg {
|
||||
.form-control + .form-control-feedback {
|
||||
&.fa,
|
||||
&.fas,
|
||||
&.far,
|
||||
&.fab,
|
||||
&.fal,
|
||||
&.fad,
|
||||
&.svg-inline--fa,
|
||||
&.ion {
|
||||
line-height: $input-height-lg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-sm + .form-control-feedback,
|
||||
.input-group-sm + .form-control-feedback {
|
||||
&.fa,
|
||||
&.fas,
|
||||
&.far,
|
||||
&.fab,
|
||||
&.fal,
|
||||
&.fad,
|
||||
&.svg-inline--fa,
|
||||
&.ion {
|
||||
line-height: $input-height-sm;
|
||||
}
|
||||
}
|
||||
|
||||
.form-group-sm {
|
||||
.form-control + .form-control-feedback {
|
||||
&.fa,
|
||||
&.fas,
|
||||
&.far,
|
||||
&.fab,
|
||||
&.fal,
|
||||
&.fad,
|
||||
&.svg-inline--fa,
|
||||
&.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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// body.text-sm support
|
||||
body.text-sm {
|
||||
.input-group-text {
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
}
|
||||
|
||||
// custom .form-control styles
|
||||
.form-control,
|
||||
.custom-select {
|
||||
&.form-control-border {
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: inherit;
|
||||
|
||||
&.border-width-2 {
|
||||
border-bottom-width: 2px;
|
||||
}
|
||||
&.border-width-3 {
|
||||
border-bottom-width: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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);
|
||||
}
|
||||
}
|
||||
|
||||
// custom control input variations
|
||||
@each $name, $color in $theme-colors {
|
||||
@include custom-control-input-variant($name, $color);
|
||||
}
|
||||
|
||||
@each $name, $color in $colors {
|
||||
@include custom-control-input-variant($name, $color);
|
||||
}
|
||||
|
||||
.custom-control-input-outline {
|
||||
~ .custom-control-label::before {
|
||||
background-color: transparent !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
&:checked ~ .custom-control-label::before {
|
||||
@include gradient-bg(transparent);
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-dark {
|
||||
.btn-navbar,
|
||||
.form-control-navbar {
|
||||
background-color: lighten($sidebar-dark-bg, 5%);
|
||||
border: 1px solid lighten($sidebar-dark-bg, 15%);
|
||||
color: lighten(color-yiq(lighten($sidebar-dark-bg, 5%)), 15%);
|
||||
}
|
||||
.btn-navbar {
|
||||
&:hover {
|
||||
background-color: lighten($sidebar-dark-bg, 7.5%);
|
||||
}
|
||||
&:focus {
|
||||
background-color: lighten($sidebar-dark-bg, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.form-control-navbar + .input-group-prepend,
|
||||
.form-control-navbar + .input-group-append {
|
||||
> .btn-navbar {
|
||||
background-color: lighten($sidebar-dark-bg, 5%);
|
||||
color: $white;
|
||||
border: 1px solid lighten($sidebar-dark-bg, 15%);
|
||||
border-left: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include dark-mode () {
|
||||
.form-control:not(.form-control-navbar):not(.form-control-sidebar),
|
||||
.custom-select,
|
||||
.custom-file-label,
|
||||
.custom-file-label::after,
|
||||
.custom-control-label::before,
|
||||
.input-group-text {
|
||||
background-color: $dark;
|
||||
color: $white;
|
||||
}
|
||||
.form-control:not(.form-control-navbar):not(.form-control-sidebar):not(.is-invalid):not(:focus),
|
||||
.custom-file-label,
|
||||
.custom-file-label::after {
|
||||
border-color: $gray-600;
|
||||
}
|
||||
select {
|
||||
background-color: $dark;
|
||||
color: $white;
|
||||
border-color: $gray-600;
|
||||
}
|
||||
|
||||
.custom-select {
|
||||
background: $dark $custom-select-dark-background;
|
||||
|
||||
&[multiple]{
|
||||
background: $dark;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-text {
|
||||
border-color: $gray-600;
|
||||
}
|
||||
|
||||
.custom-control-input:disabled ~ .custom-control-label::before,
|
||||
.custom-control-input[disabled] ~ .custom-control-label::before {
|
||||
background-color: lighten($dark, 5%);
|
||||
border-color: $gray-600;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
input:-webkit-autofill,
|
||||
input:-webkit-autofill:hover,
|
||||
input:-webkit-autofill:focus,
|
||||
textarea:-webkit-autofill,
|
||||
textarea:-webkit-autofill:hover,
|
||||
textarea:-webkit-autofill:focus,
|
||||
select:-webkit-autofill,
|
||||
select:-webkit-autofill:hover,
|
||||
select:-webkit-autofill:focus {
|
||||
-webkit-text-fill-color: $white;
|
||||
}
|
||||
|
||||
.custom-range {
|
||||
&::-webkit-slider-runnable-track {
|
||||
background-color: lighten($dark, 7.5%);
|
||||
}
|
||||
&::-moz-range-track {
|
||||
background-color: lighten($dark, 7.5%);
|
||||
}
|
||||
&::-ms-track {
|
||||
background-color: lighten($dark, 7.5%);
|
||||
}
|
||||
|
||||
@each $name, $color in $theme-colors-alt {
|
||||
@include custom-range-variant($name, $color);
|
||||
}
|
||||
|
||||
@each $name, $color in $colors-alt {
|
||||
@include custom-range-variant($name, $color);
|
||||
}
|
||||
}
|
||||
|
||||
// custom switch color variations
|
||||
.custom-switch {
|
||||
@each $name, $color in $theme-colors-alt {
|
||||
@include custom-switch-variant($name, $color);
|
||||
}
|
||||
|
||||
@each $name, $color in $colors-alt {
|
||||
@include custom-switch-variant($name, $color);
|
||||
}
|
||||
}
|
||||
|
||||
@each $name, $color in $theme-colors-alt {
|
||||
@include custom-control-input-variant($name, $color);
|
||||
}
|
||||
|
||||
@each $name, $color in $colors-alt {
|
||||
@include custom-control-input-variant($name, $color);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,166 +0,0 @@
|
|||
//
|
||||
// Component: Info Box
|
||||
//
|
||||
|
||||
.info-box {
|
||||
@include box-shadow($card-shadow);
|
||||
@include border-radius($border-radius);
|
||||
|
||||
background-color: $white;
|
||||
display: flex;
|
||||
margin-bottom: map-get($spacers, 3);
|
||||
min-height: 80px;
|
||||
padding: .5rem;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
.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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
line-height: 1.8;
|
||||
flex: 1;
|
||||
padding: 0 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.info-box-number {
|
||||
display: block;
|
||||
margin-top: .25rem;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include dark-mode () {
|
||||
.info-box {
|
||||
background-color: $dark;
|
||||
color: $white;
|
||||
@each $name, $color in $theme-colors-alt {
|
||||
.info-box {
|
||||
.bg-#{$name},
|
||||
.bg-gradient-#{$name} {
|
||||
color: color-yiq($color);
|
||||
|
||||
.progress-bar {
|
||||
background-color: color-yiq($color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,708 +0,0 @@
|
|||
//
|
||||
// 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;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.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 &,
|
||||
.layout-navbar-fixed.sidebar-mini-xs.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 &,
|
||||
.layout-navbar-fixed.sidebar-mini-xs.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;
|
||||
}
|
||||
}
|
||||
|
||||
@each $name, $color in $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;
|
||||
}
|
||||
}
|
||||
|
||||
.main-header.border-bottom-0 ~ .content-wrapper {
|
||||
margin-top: $main-header-height-inner;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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-xs):not(.sidebar-mini-md):not(.sidebar-mini) {
|
||||
.content-wrapper,
|
||||
.main-footer,
|
||||
.main-header {
|
||||
&,
|
||||
&::before {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) {
|
||||
.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) {
|
||||
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) {
|
||||
margin-left: $sidebar-mini-width;
|
||||
}
|
||||
@include media-breakpoint-down(sm) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-mini-xs {
|
||||
.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) {
|
||||
margin-left: $sidebar-mini-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
background-color: $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):not(.sidebar-mini-xs) & {
|
||||
&,
|
||||
&::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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body:not(.layout-fixed) {
|
||||
.main-sidebar {
|
||||
height: inherit;
|
||||
min-height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
||||
.sidebar {
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.layout-fixed {
|
||||
.brand-link {
|
||||
width: $sidebar-width;
|
||||
}
|
||||
|
||||
.main-sidebar {
|
||||
bottom: 0;
|
||||
float: none;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.control-sidebar {
|
||||
bottom: 0;
|
||||
float: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
||||
.control-sidebar-content {
|
||||
height: calc(100vh - #{$main-header-height});
|
||||
overflow-y: auto;
|
||||
@include scrollbar-width-thin();
|
||||
@include scrollbar-color-gray();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@supports (-webkit-touch-callout: none) {
|
||||
.layout-fixed {
|
||||
.main-sidebar {
|
||||
height: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-footer {
|
||||
background-color: $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-color: 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;
|
||||
animation-duration: 0s !important;
|
||||
}
|
||||
}
|
||||
|
||||
@include dark-mode () {
|
||||
background-color: $dark-main-bg;
|
||||
color: $white;
|
||||
|
||||
.wrapper {
|
||||
.layout-navbar-fixed & {
|
||||
@each $name, $color in $theme-colors-alt {
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
|
||||
.layout#{$infix}-navbar-fixed & {
|
||||
@each $name, $color in $theme-colors-alt {
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb-item {
|
||||
&.active,
|
||||
+ .breadcrumb-item::before {
|
||||
color: $gray-500;
|
||||
}
|
||||
}
|
||||
.main-footer {
|
||||
background-color: $dark;
|
||||
border-color: lighten($dark, 10%);
|
||||
}
|
||||
.content-wrapper {
|
||||
background-color: lighten($dark, 7.5%);
|
||||
color: $white;
|
||||
|
||||
.content-header {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,179 +0,0 @@
|
|||
//
|
||||
// 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,
|
||||
> .fal,
|
||||
> .fad,
|
||||
> .svg-inline--fa,
|
||||
> .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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.dropdown-legacy .dropdown-menu {
|
||||
top: $nav-link-height + $navbar-padding-y;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// 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-color: $main-header-dark-form-control-border-color;
|
||||
}
|
||||
|
||||
.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-color: $main-header-dark-form-control-focused-border-color !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-color: $main-header-light-form-control-border-color;
|
||||
}
|
||||
|
||||
.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-color: $main-header-light-form-control-focused-border-color !important;
|
||||
color: $main-header-light-form-control-focused-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-search-block {
|
||||
.form-control-navbar {
|
||||
&:focus {
|
||||
&,
|
||||
+ .input-group-append .btn-navbar {
|
||||
color: $main-header-light-placeholder-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Navbar Search
|
||||
.navbar-search-block {
|
||||
position: absolute;
|
||||
padding: 0 $nav-link-padding-x;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
display: none;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
background-color: initial;
|
||||
|
||||
&.navbar-search-open {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load diff
|
|
@ -1,541 +0,0 @@
|
|||
//
|
||||
// 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: 700;
|
||||
padding: 10px 4px;
|
||||
}
|
||||
|
||||
.list-seperator {
|
||||
background-color: $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-color: $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-color: rgba($white, .7);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
z-index: 50;
|
||||
|
||||
> .fa,
|
||||
> .fas,
|
||||
> .far,
|
||||
> .fab,
|
||||
> .fal,
|
||||
> .fad,
|
||||
> .svg-inline--fa,
|
||||
> .ion {
|
||||
color: $gray-800;
|
||||
}
|
||||
|
||||
&.dark {
|
||||
background-color: rgba($black, .5);
|
||||
|
||||
> .fa,
|
||||
> .fas,
|
||||
> .far,
|
||||
> .fab,
|
||||
> .fal,
|
||||
> .fad,
|
||||
> .svg-inline--fa,
|
||||
> .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-color: $white;
|
||||
border-left: .7rem solid $primary;
|
||||
margin: 1.5em .7rem;
|
||||
padding: .5em .7rem;
|
||||
|
||||
.box & {
|
||||
background-color: $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;
|
||||
}
|
||||
|
||||
@include dark-mode () {
|
||||
a:not(.btn):hover {
|
||||
color: lighten($link-color, 10%);
|
||||
}
|
||||
.attachment-block {
|
||||
background-color: lighten($dark, 3.75%);
|
||||
|
||||
.attachment-text {
|
||||
color: $gray-400;
|
||||
}
|
||||
}
|
||||
blockquote {
|
||||
background-color: lighten($dark, 5%);
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.close,
|
||||
.mailbox-attachment-close {
|
||||
color: $gray-500;
|
||||
text-shadow: 0 1px 0 $gray-700;
|
||||
}
|
||||
.tab-custom-content {
|
||||
border-color: $gray-600;
|
||||
}
|
||||
.list-group-item {
|
||||
background-color: $dark;
|
||||
border-color: $gray-600;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
//
|
||||
// General: Mixins
|
||||
//
|
||||
|
||||
@import "mixins/animations";
|
||||
@import "mixins/scrollbar";
|
||||
@import "mixins/cards";
|
||||
@import "mixins/sidebar";
|
||||
@import "mixins/navbar";
|
||||
@import "mixins/accent";
|
||||
@import "mixins/custom-forms";
|
||||
@import "mixins/backgrounds";
|
||||
@import "mixins/dark-mode";
|
||||
@import "mixins/direct-chat";
|
||||
@import "mixins/toasts";
|
||||
@import "mixins/touch-support";
|
||||
@import "mixins/miscellaneous";
|
||||
|
|
@ -1,76 +0,0 @@
|
|||
//
|
||||
// Component: Modals
|
||||
//
|
||||
|
||||
// Overlay
|
||||
.modal-dialog {
|
||||
.overlay {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
margin: -$modal-content-border-width;
|
||||
z-index: ($zindex-modal + 2);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: rgba($black, .7);
|
||||
color: darken($gray-600, 2.5%);
|
||||
@include border-radius($modal-content-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 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 $black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include dark-mode () {
|
||||
.modal-header,
|
||||
.modal-footer {
|
||||
border-color: $gray-600;
|
||||
}
|
||||
.modal-content {
|
||||
background-color: $dark;
|
||||
|
||||
&.bg-warning {
|
||||
.modal-header,
|
||||
.modal-footer {
|
||||
border-color: $gray-600;
|
||||
}
|
||||
.close {
|
||||
color: $dark !important;
|
||||
text-shadow: 0 1px 0 $gray-700 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.bg-primary,
|
||||
&.bg-secondary,
|
||||
&.bg-info,
|
||||
&.bg-danger,
|
||||
&.bg-success {
|
||||
.modal-header,
|
||||
.modal-footer {
|
||||
border-color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,182 +0,0 @@
|
|||
//
|
||||
// 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;
|
||||
@if $color == dark {
|
||||
border-color: lighten($dark, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
@if $color != dark and $color != light {
|
||||
@include navbar-variant($color, $value);
|
||||
}
|
||||
}
|
||||
|
||||
@each $color, $value in $colors {
|
||||
@include navbar-variant($color, $value);
|
||||
}
|
||||
|
||||
.navbar-nav-not-expanded {
|
||||
flex-direction: row;
|
||||
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding-right: $navbar-nav-link-padding-x;
|
||||
padding-left: $navbar-nav-link-padding-x;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include dark-mode () {
|
||||
.nav-pills .nav-link {
|
||||
color: $gray-400;
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
border-color: lighten($dark, 15%);
|
||||
|
||||
.nav-link:focus,
|
||||
.nav-link:hover {
|
||||
border-color: lighten($dark, 15%);
|
||||
}
|
||||
|
||||
.nav-item.show .nav-link,
|
||||
.nav-link.active {
|
||||
background-color: $dark;
|
||||
border-color: lighten($dark, 15%) lighten($dark, 15%) transparent lighten($dark, 15%);
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&.flex-column {
|
||||
.nav-item.show .nav-link,
|
||||
.nav-link {
|
||||
&.active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
border-color: lighten($dark, 15%) transparent lighten($dark, 15%) lighten($dark, 15%);
|
||||
}
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: lighten($dark, 5%);
|
||||
}
|
||||
}
|
||||
&.nav-tabs-right {
|
||||
border-color: lighten($dark, 15%);
|
||||
.nav-link {
|
||||
&.active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
border-color: lighten($dark, 15%) lighten($dark, 15%) lighten($dark, 15%) transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Color variants
|
||||
@each $color, $value in $theme-colors-alt {
|
||||
@if $color == dark or $color == light {
|
||||
.navbar-#{$color} {
|
||||
background-color: $value;
|
||||
@if $color == dark {
|
||||
border-color: lighten($dark, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors-alt {
|
||||
@if $color != dark and $color != light {
|
||||
@include navbar-variant($color, $value);
|
||||
}
|
||||
}
|
||||
|
||||
@each $color, $value in $colors-alt {
|
||||
@include navbar-variant($color, $value);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,83 +0,0 @@
|
|||
//
|
||||
// Component: Pagination
|
||||
//
|
||||
|
||||
.pagination-month {
|
||||
.page-item {
|
||||
justify-self: stretch;
|
||||
|
||||
.page-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
box-shadow: none;
|
||||
}
|
||||
&:first-child,
|
||||
&:last-child {
|
||||
.page-link {
|
||||
height: 100%;
|
||||
font-size: $font-size-lg;
|
||||
}
|
||||
}
|
||||
.page-month {
|
||||
margin-bottom: 0;
|
||||
font-size: $font-size-lg;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
.page-year {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.pagination-lg {
|
||||
.page-month {
|
||||
font-size: ($font-size-lg * 1.25);
|
||||
}
|
||||
}
|
||||
&.pagination-sm {
|
||||
.page-month {
|
||||
font-size: ($font-size-base);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include dark-mode () {
|
||||
.page-item {
|
||||
&.disabled a,
|
||||
&.disabled .page-link {
|
||||
background-color: lighten($dark, 2.5%) !important;
|
||||
border-color: $gray-600 !important;
|
||||
color: $gray-600;
|
||||
}
|
||||
|
||||
.page-link {
|
||||
color: $primary-alt;
|
||||
}
|
||||
|
||||
&.active {
|
||||
.page-link {
|
||||
background-color: $primary-alt;
|
||||
border-color: $primary-alt;
|
||||
color: $white;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $gray-400 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:not(.active) {
|
||||
.page-link {
|
||||
background-color: $dark;
|
||||
border-color: $gray-600;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: lighten($primary-alt, 5%);
|
||||
background-color: lighten($dark, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
//
|
||||
// Core: Preloader
|
||||
//
|
||||
|
||||
.preloader {
|
||||
display: flex;
|
||||
background-color: $main-bg;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
transition: height 200ms linear;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: $zindex-preloader;
|
||||
}
|
||||
|
||||
@include dark-mode () {
|
||||
.preloader {
|
||||
background-color: $dark-main-bg;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
//
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,68 +0,0 @@
|
|||
//
|
||||
// Component: Products
|
||||
//
|
||||
|
||||
.products-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
> .item {
|
||||
@include clearfix ();
|
||||
|
||||
@if $enable-rounded {
|
||||
@include border-radius($border-radius);
|
||||
}
|
||||
|
||||
background-color: $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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include dark-mode () {
|
||||
.products-list > .item {
|
||||
background-color: $dark;
|
||||
color: $white;
|
||||
border-bottom-color: $gray-600;
|
||||
}
|
||||
|
||||
.product-description {
|
||||
color: $gray-400;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,72 +0,0 @@
|
|||
//
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include dark-mode () {
|
||||
.progress {
|
||||
background: lighten($dark, 7.5%);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
@include dark-mode () {
|
||||
:root {
|
||||
// Custom variable values only support SassScript inside `#{}`.
|
||||
@each $color, $value in $colors-alt {
|
||||
--#{$color}: #{$value};
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors-alt {
|
||||
--#{$color}: #{$value};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
|
|
@ -1,507 +0,0 @@
|
|||
//
|
||||
// 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-mini-xs {
|
||||
@include media-breakpoint-up(xs) {
|
||||
@include sidebar-mini-breakpoint ();
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-mini,
|
||||
.sidebar-mini-md,
|
||||
.sidebar-mini-xs {
|
||||
.main-sidebar {
|
||||
.nav-child-indent .nav-treeview {
|
||||
.nav-link {
|
||||
width: calc(#{$sidebar-width} - #{$sidebar-padding-x} * 2 - 1rem);
|
||||
}
|
||||
|
||||
.nav-treeview {
|
||||
.nav-link {
|
||||
width: calc(#{$sidebar-width} - #{$sidebar-padding-x} * 2 - 2rem);
|
||||
}
|
||||
|
||||
.nav-treeview {
|
||||
.nav-link {
|
||||
width: calc(#{$sidebar-width} - #{$sidebar-padding-x} * 2 - 3rem);
|
||||
}
|
||||
|
||||
.nav-treeview {
|
||||
.nav-link {
|
||||
width: calc(#{$sidebar-width} - #{$sidebar-padding-x} * 2 - 4rem);
|
||||
}
|
||||
|
||||
.nav-treeview {
|
||||
.nav-link {
|
||||
width: calc(#{$sidebar-width} - #{$sidebar-padding-x} * 2 - 5rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-legacy {
|
||||
.nav-link {
|
||||
width: $sidebar-width;
|
||||
}
|
||||
&.nav-child-indent {
|
||||
.nav-treeview {
|
||||
.nav-link {
|
||||
width: calc(#{$sidebar-width} - 1rem);
|
||||
}
|
||||
|
||||
.nav-treeview {
|
||||
.nav-link {
|
||||
width: calc(#{$sidebar-width} - 1rem - 1rem);
|
||||
}
|
||||
|
||||
.nav-treeview {
|
||||
.nav-link {
|
||||
width: calc(#{$sidebar-width} - 1rem - 2rem);
|
||||
}
|
||||
|
||||
.nav-treeview {
|
||||
.nav-link {
|
||||
width: calc(#{$sidebar-width} - 1rem - 3rem);
|
||||
}
|
||||
|
||||
.nav-treeview {
|
||||
.nav-link {
|
||||
width: calc(#{$sidebar-width} - 1rem - 4rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-flat {
|
||||
.nav-link {
|
||||
width: $sidebar-width;
|
||||
}
|
||||
&.nav-child-indent {
|
||||
.nav-treeview {
|
||||
.nav-link {
|
||||
width: calc(#{$sidebar-width});
|
||||
}
|
||||
|
||||
.nav-treeview {
|
||||
.nav-link {
|
||||
width: calc(#{$sidebar-width} - .2rem);
|
||||
}
|
||||
|
||||
.nav-treeview {
|
||||
.nav-link {
|
||||
width: calc(#{$sidebar-width} - .2rem * 2);
|
||||
}
|
||||
|
||||
.nav-treeview {
|
||||
.nav-link {
|
||||
width: calc(#{$sidebar-width} - .2rem * 3);
|
||||
}
|
||||
|
||||
.nav-treeview {
|
||||
.nav-link {
|
||||
width: calc(#{$sidebar-width} - .2rem * 4);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-child-indent.nav-compact .nav-treeview {
|
||||
.nav-link {
|
||||
width: calc(#{$sidebar-width} - #{$sidebar-padding-x} * 2 - .5rem);
|
||||
}
|
||||
|
||||
.nav-treeview {
|
||||
.nav-link {
|
||||
width: calc(#{$sidebar-width} - #{$sidebar-padding-x} * 2 - 1rem);
|
||||
}
|
||||
|
||||
.nav-treeview {
|
||||
.nav-link {
|
||||
width: calc(#{$sidebar-width} - #{$sidebar-padding-x} * 2 - 1.5rem);
|
||||
}
|
||||
|
||||
.nav-treeview {
|
||||
.nav-link {
|
||||
width: calc(#{$sidebar-width} - #{$sidebar-padding-x} * 2 - 2rem);
|
||||
}
|
||||
|
||||
.nav-treeview {
|
||||
.nav-link {
|
||||
width: calc(#{$sidebar-width} - #{$sidebar-padding-x} * 2 - 2.5rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-child-indent.nav-legacy.nav-compact {
|
||||
.nav-link {
|
||||
width: $sidebar-width;
|
||||
}
|
||||
.nav-treeview {
|
||||
.nav-link {
|
||||
width: calc(#{$sidebar-width} - .5rem);
|
||||
}
|
||||
|
||||
.nav-treeview {
|
||||
.nav-link {
|
||||
width: calc(#{$sidebar-width} - .5rem * 2);
|
||||
}
|
||||
|
||||
.nav-treeview {
|
||||
.nav-link {
|
||||
width: calc(#{$sidebar-width} - .5rem * 3);
|
||||
}
|
||||
|
||||
.nav-treeview {
|
||||
.nav-link {
|
||||
width: calc(#{$sidebar-width} - .5rem * 4);
|
||||
}
|
||||
|
||||
.nav-treeview {
|
||||
.nav-link {
|
||||
width: calc(#{$sidebar-width} - .5rem * 5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-link {
|
||||
width: calc(#{$sidebar-width} - #{$sidebar-padding-x} * 2);
|
||||
@include transition(width $transition-fn $transition-speed);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-collapse {
|
||||
&.sidebar-mini,
|
||||
&.sidebar-mini-md,
|
||||
&.sidebar-mini-xs {
|
||||
.main-sidebar {
|
||||
|
||||
// Hide the sidebar search results when mini mode is active.
|
||||
.sidebar-search-results {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-sidebar {
|
||||
.nav-link {
|
||||
width: $sidebar-mini-width - $sidebar-padding-x * 2;
|
||||
}
|
||||
|
||||
&.nav-flat,
|
||||
&.nav-legacy {
|
||||
.nav-link {
|
||||
width: $sidebar-mini-width;
|
||||
}
|
||||
}
|
||||
&.nav-child-indent.nav-compact {
|
||||
.nav-treeview {
|
||||
padding-left: 0 !important;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
width: calc(#{$sidebar-mini-width} - #{$sidebar-padding-x} * 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.sidebar-focused,
|
||||
&:hover {
|
||||
.nav-link {
|
||||
width: calc(#{$sidebar-width} - #{$sidebar-padding-x} * 2);
|
||||
}
|
||||
&:not(.hide-nav-header-on-hover) {
|
||||
.nav-header {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
// Show sidebar search when hover/focus on the sidebar mini mode.
|
||||
&:not(.sidebar-no-expand) {
|
||||
.form-control-sidebar {
|
||||
display: inline-block;
|
||||
}
|
||||
.form-control-sidebar ~ .input-group-append {
|
||||
display: flex;
|
||||
}
|
||||
.sidebar-search-open .sidebar-search-results {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-child-indent {
|
||||
.nav-link {
|
||||
width: calc(#{$sidebar-width} - #{$sidebar-padding-x} * 2);
|
||||
}
|
||||
}
|
||||
.nav-legacy {
|
||||
.nav-link {
|
||||
width: $sidebar-width;
|
||||
}
|
||||
&.nav-child-indent {
|
||||
.nav-treeview {
|
||||
.nav-link {
|
||||
width: calc(#{$sidebar-width} - 1rem);
|
||||
}
|
||||
|
||||
.nav-treeview {
|
||||
.nav-link {
|
||||
width: calc(#{$sidebar-width} - 1rem - 1rem);
|
||||
}
|
||||
|
||||
.nav-treeview {
|
||||
.nav-link {
|
||||
width: calc(#{$sidebar-width} - 1rem - 2rem);
|
||||
}
|
||||
|
||||
.nav-treeview {
|
||||
.nav-link {
|
||||
width: calc(#{$sidebar-width} - 1rem - 3rem);
|
||||
}
|
||||
|
||||
.nav-treeview {
|
||||
.nav-link {
|
||||
width: calc(#{$sidebar-width} - 1rem - 4rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-flat {
|
||||
.nav-link {
|
||||
width: $sidebar-width;
|
||||
}
|
||||
&.nav-child-indent {
|
||||
.nav-treeview {
|
||||
.nav-link {
|
||||
width: calc(#{$sidebar-width});
|
||||
}
|
||||
|
||||
.nav-treeview {
|
||||
.nav-link {
|
||||
width: calc(#{$sidebar-width} - .2rem);
|
||||
}
|
||||
|
||||
.nav-treeview {
|
||||
.nav-link {
|
||||
width: calc(#{$sidebar-width} - .2rem * 2);
|
||||
}
|
||||
|
||||
.nav-treeview {
|
||||
.nav-link {
|
||||
width: calc(#{$sidebar-width} - .2rem * 3);
|
||||
}
|
||||
|
||||
.nav-treeview {
|
||||
.nav-link {
|
||||
width: calc(#{$sidebar-width} - .2rem * 4);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-child-indent.nav-compact {
|
||||
.nav-link {
|
||||
width: calc(#{$sidebar-width} - #{$sidebar-padding-x} * 2);
|
||||
}
|
||||
}
|
||||
.nav-child-indent.nav-legacy.nav-compact {
|
||||
.nav-link {
|
||||
width: $sidebar-width;
|
||||
}
|
||||
.nav-treeview {
|
||||
.nav-link {
|
||||
width: calc(#{$sidebar-width} - .5rem);
|
||||
}
|
||||
|
||||
.nav-treeview {
|
||||
.nav-link {
|
||||
width: calc(#{$sidebar-width} - .5rem * 2);
|
||||
}
|
||||
|
||||
.nav-treeview {
|
||||
.nav-link {
|
||||
width: calc(#{$sidebar-width} - .5rem * 3);
|
||||
}
|
||||
|
||||
.nav-treeview {
|
||||
.nav-link {
|
||||
width: calc(#{$sidebar-width} - .5rem * 4);
|
||||
}
|
||||
|
||||
.nav-treeview {
|
||||
.nav-link {
|
||||
width: calc(#{$sidebar-width} - .5rem * 5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
animation-name: fadeIn;
|
||||
animation-duration: $transition-speed;
|
||||
animation-fill-mode: both;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.logo-xl {
|
||||
animation-name: fadeOut;
|
||||
animation-duration: $transition-speed;
|
||||
animation-fill-mode: both;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.nav-sidebar.nav-child-indent .nav-treeview {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
.brand-text,
|
||||
.user-panel > .info,
|
||||
.nav-sidebar .nav-link p {
|
||||
margin-left: -10px;
|
||||
animation-name: fadeOut;
|
||||
animation-duration: $transition-speed;
|
||||
animation-fill-mode: both;
|
||||
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);
|
||||
}
|
||||
|
|
@ -1,165 +0,0 @@
|
|||
//
|
||||
// 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-color: rgba($black, .1);
|
||||
color: rgba($white, .8);
|
||||
display: block;
|
||||
padding: 3px 0;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
z-index: 10;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba($black, .15);
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
@include font-size(2.2rem);
|
||||
font-weight: 700;
|
||||
margin: 0 0 10px;
|
||||
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: .9rem;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
h3,
|
||||
p {
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
// the icon
|
||||
.icon {
|
||||
color: rgba($black, .15);
|
||||
z-index: 0;
|
||||
|
||||
> i {
|
||||
font-size: 90px;
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 15px;
|
||||
transition: transform $transition-speed linear;
|
||||
|
||||
&.fa,
|
||||
&.fas,
|
||||
&.far,
|
||||
&.fab,
|
||||
&.fal,
|
||||
&.fad,
|
||||
&.ion {
|
||||
font-size: 70px;
|
||||
top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
font-size: 70px;
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 15px;
|
||||
transition: transform $transition-speed linear;
|
||||
}
|
||||
}
|
||||
|
||||
// Small box hover state
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
|
||||
// Animate icons on small box hover
|
||||
.icon {
|
||||
> i {
|
||||
&,
|
||||
&.fa,
|
||||
&.fas,
|
||||
&.far,
|
||||
&.fab,
|
||||
&.fal,
|
||||
&.fad,
|
||||
&.ion {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
> svg {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,93 +0,0 @@
|
|||
//
|
||||
// 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, .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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,155 +0,0 @@
|
|||
//
|
||||
// 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,
|
||||
tfoot > tr > th,
|
||||
tfoot > 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Expandable Table
|
||||
|
||||
.table-hover tbody tr.expandable-body:hover {
|
||||
background-color: inherit !important;
|
||||
}
|
||||
|
||||
[data-widget="expandable-table"] {
|
||||
cursor: pointer;
|
||||
|
||||
i.expandable-table-caret {
|
||||
transition: transform $transition-speed linear;
|
||||
}
|
||||
&[aria-expanded="true"] {
|
||||
td i.expandable-table-caret {
|
||||
// stylelint-disable selector-max-attribute
|
||||
&[class*="right"] {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
&[class*="left"] {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
// stylelint-enable selector-max-attribute
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.expandable-body {
|
||||
> td {
|
||||
padding: 0 !important;
|
||||
width: 100%;
|
||||
|
||||
> div,
|
||||
> p {
|
||||
padding: $table-cell-padding;
|
||||
}
|
||||
}
|
||||
|
||||
.table {
|
||||
width: calc(100% - #{$table-cell-padding});
|
||||
margin: 0 0 0 $table-cell-padding;
|
||||
|
||||
tr:first-child {
|
||||
td,
|
||||
th {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include dark-mode () {
|
||||
.table-bordered {
|
||||
&,
|
||||
td,
|
||||
th {
|
||||
border-color: $gray-600;
|
||||
}
|
||||
}
|
||||
.table-hover {
|
||||
tbody tr:hover {
|
||||
color: $gray-300;
|
||||
background-color: lighten($dark, 2.5%);
|
||||
border-color: $gray-600;
|
||||
}
|
||||
}
|
||||
.table {
|
||||
thead th {
|
||||
border-bottom-color: $gray-600;
|
||||
}
|
||||
th,
|
||||
td {
|
||||
border-top-color: $gray-600;
|
||||
}
|
||||
&.table-head-fixed {
|
||||
thead tr:nth-child(1) th {
|
||||
background-color: lighten($dark, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,51 +0,0 @@
|
|||
//
|
||||
// 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} !important;
|
||||
}
|
||||
}
|
||||
|
||||
@include dark-mode () {
|
||||
.text-muted {
|
||||
color: $gray-500 !important;
|
||||
}
|
||||
|
||||
@each $name, $color in $colors-alt {
|
||||
.text-#{$name} {
|
||||
color: #{$color} !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,155 +0,0 @@
|
|||
//
|
||||
// Component: Timeline
|
||||
//
|
||||
|
||||
.timeline {
|
||||
margin: 0 0 45px;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
// The line
|
||||
&::before {
|
||||
@include border-radius($border-radius);
|
||||
background-color: $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-color: $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,
|
||||
> .fal,
|
||||
> .fad,
|
||||
> .svg-inline--fa,
|
||||
> .ion {
|
||||
background-color: $gray-500;
|
||||
border-radius: 50%;
|
||||
font-size: 16px;
|
||||
height: 30px;
|
||||
left: 18px;
|
||||
line-height: 30px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
width: 30px;
|
||||
}
|
||||
> .svg-inline--fa {
|
||||
padding: 7px;
|
||||
}
|
||||
}
|
||||
// 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-color: $gray-100;
|
||||
border: 1px solid $gray-300;
|
||||
|
||||
> .timeline-header {
|
||||
border-bottom-color: $gray-300;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include dark-mode () {
|
||||
.timeline {
|
||||
&::before {
|
||||
background-color: $gray-600;
|
||||
}
|
||||
> div > .timeline-item {
|
||||
background-color: $dark;
|
||||
color: $white;
|
||||
border-color: $gray-600;
|
||||
|
||||
> .timeline-header {
|
||||
color: $gray-400;
|
||||
border-color: $gray-600;
|
||||
}
|
||||
> .time {
|
||||
color: $gray-400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,77 +0,0 @@
|
|||
//
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
|
||||
@include dark-mode () {
|
||||
.toast {
|
||||
background-color: rgba($dark, .85);
|
||||
color: $white;
|
||||
|
||||
.toast-header {
|
||||
background-color: rgba($dark, .7);
|
||||
color: $gray-100;
|
||||
}
|
||||
|
||||
@each $name, $color in $theme-colors-alt {
|
||||
@include toast-variant($name, $color);
|
||||
}
|
||||
|
||||
@each $name, $color in $colors-alt {
|
||||
@include toast-variant($name, $color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.toast {
|
||||
@each $name, $color in $theme-colors {
|
||||
@include toast-variant($name, $color);
|
||||
}
|
||||
@each $name, $color in $colors {
|
||||
@include toast-variant($name, $color);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
//
|
||||
// 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;
|
||||
}
|
||||
|
||||
@include dark-mode () {
|
||||
.users-list-name {
|
||||
color: $gray-400;
|
||||
}
|
||||
.users-list-date {
|
||||
color: $gray-500;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,107 +0,0 @@
|
|||
//
|
||||
// Core: Variables for Dark Mode
|
||||
//
|
||||
|
||||
// COLORS
|
||||
// --------------------------------------------------------
|
||||
|
||||
// stylelint-disable
|
||||
// Gray color will be default in dark mode
|
||||
$white-alt: $white !default;
|
||||
$gray-100-alt: $gray-100 !default;
|
||||
$gray-200-alt: $gray-200 !default;
|
||||
$gray-300-alt: $gray-300 !default;
|
||||
$gray-400-alt: $gray-400 !default;
|
||||
$gray-500-alt: $gray-500 !default;
|
||||
$gray-600-alt: $gray-600 !default;
|
||||
$gray-700-alt: $gray-700 !default;
|
||||
$gray-800-alt: $gray-800 !default;
|
||||
$gray-900-alt: $gray-900 !default;
|
||||
$black-alt: $black !default;
|
||||
|
||||
$grays-alt: () !default;
|
||||
$grays-alt: map-merge((
|
||||
"100": $gray-100-alt,
|
||||
"200": $gray-200-alt,
|
||||
"300": $gray-300-alt,
|
||||
"400": $gray-400-alt,
|
||||
"500": $gray-500-alt,
|
||||
"600": $gray-600-alt,
|
||||
"700": $gray-700-alt,
|
||||
"800": $gray-800-alt,
|
||||
"900": $gray-900-alt
|
||||
), $grays-alt);
|
||||
|
||||
// Below colors from bootwatch darkly
|
||||
$blue-alt: #3f6791 !default;
|
||||
$indigo-alt: #6610f2 !default;
|
||||
$purple-alt: #6f42c1 !default;
|
||||
$pink-alt: #e83e8c !default;
|
||||
$red-alt: #e74c3c !default;
|
||||
$orange-alt: #fd7e14 !default;
|
||||
$yellow-alt: #f39c12 !default;
|
||||
$green-alt: #00bc8c !default;
|
||||
$teal-alt: #20c997 !default;
|
||||
$cyan-alt: #3498db !default;
|
||||
|
||||
// by darken function
|
||||
$lightblue-alt: lighten(#3c8dbc, 20%) !default;
|
||||
$navy-alt: lighten(#001f3f, 5%) !default;
|
||||
$olive-alt: lighten(#3d9970, 20%) !default;
|
||||
$lime-alt: lighten(#01ff70, 20%) !default;
|
||||
$fuchsia-alt: lighten(#f012be, 20%) !default;
|
||||
$maroon-alt: lighten(#d81b60, 20%) !default;
|
||||
$gray-x-light-alt: lighten(#d2d6de, 20%) !default;
|
||||
|
||||
$colors-alt: () !default;
|
||||
$colors-alt: map-merge((
|
||||
"blue": $blue-alt,
|
||||
"indigo": $indigo-alt,
|
||||
"purple": $purple-alt,
|
||||
"pink": $pink-alt,
|
||||
"red": $red-alt,
|
||||
"orange": $orange-alt,
|
||||
"yellow": $yellow-alt,
|
||||
"green": $green-alt,
|
||||
"teal": $teal-alt,
|
||||
"cyan": $cyan-alt,
|
||||
"white": $white-alt,
|
||||
"gray": $gray-600-alt,
|
||||
"gray-dark": $gray-800-alt
|
||||
), $colors-alt);
|
||||
|
||||
$primary-alt: $blue-alt !default;
|
||||
$secondary-alt: $gray-600-alt !default;
|
||||
$success-alt: $green-alt !default;
|
||||
$info-alt: $cyan-alt !default;
|
||||
$warning-alt: $yellow-alt !default;
|
||||
$danger-alt: $red-alt !default;
|
||||
$light-alt: $gray-100-alt !default;
|
||||
$dark-alt: $gray-800-alt !default;
|
||||
|
||||
$theme-colors-alt: () !default;
|
||||
$theme-colors-alt: map-merge((
|
||||
"primary": $primary-alt,
|
||||
"secondary": $secondary-alt,
|
||||
"success": $success-alt,
|
||||
"info": $info-alt,
|
||||
"warning": $warning-alt,
|
||||
"danger": $danger-alt,
|
||||
"light": $light-alt,
|
||||
"dark": $dark-alt
|
||||
), $theme-colors-alt);
|
||||
|
||||
$colors-alt: map-merge(
|
||||
(
|
||||
"lightblue": $lightblue-alt,
|
||||
"navy": $navy-alt,
|
||||
"olive": $olive-alt,
|
||||
"lime": $lime-alt,
|
||||
"fuchsia": $fuchsia-alt,
|
||||
"maroon": $maroon-alt,
|
||||
),
|
||||
$colors-alt
|
||||
);
|
||||
// stylelint-enable
|
||||
|
||||
//
|
||||
|
|
@ -1,248 +0,0 @@
|
|||
//
|
||||
// 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: .5rem !default;
|
||||
$sidebar-padding-y: 0 !default;
|
||||
$sidebar-custom-height: 4rem !default;
|
||||
$sidebar-custom-height-lg: 6rem !default;
|
||||
$sidebar-custom-height-xl: 8rem !default;
|
||||
$sidebar-custom-padding-x: .85rem !default;
|
||||
$sidebar-custom-padding-y: .5rem !default;
|
||||
|
||||
// Boxed layout maximum width
|
||||
$boxed-layout-max-width: 1250px !default;
|
||||
|
||||
// Body background (Affects main content background only)
|
||||
$main-bg: #f4f6f9 !default;
|
||||
|
||||
$dark-main-bg: lighten($dark, 7.5%) !important;
|
||||
|
||||
// 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-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: $gray-800 !default;
|
||||
$main-header-dark-form-control-focused-bg: $gray-700 !default;
|
||||
$main-header-dark-form-control-focused-color: $gray-400 !default;
|
||||
$main-header-dark-form-control-border-color: $gray-600 !default;
|
||||
$main-header-dark-form-control-focused-border-color: $gray-600 !default;
|
||||
$main-header-dark-placeholder-color: rgba($white, .6) !default;
|
||||
|
||||
$main-header-light-form-control-bg: darken($gray-200, 5%) !default;
|
||||
$main-header-light-form-control-focused-bg: darken($gray-200, 7.5%) !default;
|
||||
$main-header-light-form-control-focused-color: $gray-400 !default;
|
||||
$main-header-light-form-control-border-color: $gray-400 !default;
|
||||
$main-header-light-form-control-focused-border-color: darken($gray-400, 2.5%) !default;
|
||||
$main-header-light-placeholder-color: rgba(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: rgba(255, 255, 255, .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: rgba(255, 255, 255, .9) !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: $black !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 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;
|
||||
|
||||
// DIRECT CHAT
|
||||
// --------------------------------------------------------
|
||||
$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;
|
||||
|
||||
// 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-toasts: $zindex-main-sidebar + 2 !default;
|
||||
$zindex-preloader: 9999 !default;
|
||||
|
||||
// TRANSITIONS SETTINGS
|
||||
// --------------------------------------------------------
|
||||
|
||||
// Transition global options
|
||||
$transition-speed: .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, .12) + ", 0 1px 2px " + rgba($black, .24)),
|
||||
2: unquote("0 3px 6px " + rgba($black, .16) + ", 0 3px 6px " + rgba($black, .23)),
|
||||
3: unquote("0 10px 20px " + rgba($black, .19) + ", 0 6px 6px " + rgba($black, .23)),
|
||||
4: unquote("0 14px 28px " + rgba($black, .25) + ", 0 10px 10px " + rgba($black, .22)),
|
||||
5: unquote("0 19px 38px " + rgba($black, .3) + ", 0 15px 12px " + rgba($black, .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: 0 !default;
|
||||
$ribbon-xl-wrapper-size: 180px !default;
|
||||
$ribbon-xl-width: 240px !default;
|
||||
$ribbon-xl-top: 47px !default;
|
||||
$ribbon-xl-right: 4px !default;
|
||||
|
||||
// CUSTOM FORM SELECT
|
||||
// --------------------------------------------------------
|
||||
|
||||
$custom-select-dark-indicator-color: $white !default;
|
||||
$custom-select-dark-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'><path fill='#{$custom-select-dark-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>") !default;
|
||||
$custom-select-dark-background: escape-svg($custom-select-dark-indicator) right $custom-select-padding-x center / $custom-select-bg-size no-repeat !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
|
||||
|
||||
// ENABLE DARK MODE
|
||||
// --------------------------------------------------------
|
||||
$enable-dark-mode: true !default; // requires `@import "variables-alt";`
|
||||
|
||||
//
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
/*!
|
||||
* AdminLTE v3.2.0-rc
|
||||
* Author: Colorlib
|
||||
* Website: AdminLTE.io <https://adminlte.io>
|
||||
* License: Open source - MIT <https://opensource.org/licenses/MIT>
|
||||
*/
|
||||
|
||||
// Bootstrap
|
||||
// ---------------------------------------------------
|
||||
@import "~bootstrap/scss/functions";
|
||||
@import "bootstrap-variables";
|
||||
@import "~bootstrap/scss/bootstrap";
|
||||
|
||||
// Variables and Mixins
|
||||
// ---------------------------------------------------
|
||||
@import "variables";
|
||||
@import "variables-alt";
|
||||
@import "mixins";
|
||||
|
||||
@import "parts/core";
|
||||
@import "parts/components";
|
||||
@import "parts/extra-components";
|
||||
@import "parts/pages";
|
||||
@import "parts/plugins";
|
||||
@import "parts/miscellaneous";
|
||||
|
|
@ -1,106 +0,0 @@
|
|||
//
|
||||
// Mixins: Accent
|
||||
//
|
||||
|
||||
// Accent Variant
|
||||
@mixin accent-variant($name, $color) {
|
||||
$link-color: $color;
|
||||
.accent-#{$name} {
|
||||
$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):not(.badge):not(.btn),
|
||||
.nav-tabs .nav-link {
|
||||
color: $link-color;
|
||||
|
||||
@include hover () {
|
||||
color: $link-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
&:active,
|
||||
&.active {
|
||||
background-color: $color;
|
||||
color: color-yiq($color);
|
||||
}
|
||||
}
|
||||
|
||||
.custom-control-input:checked ~ .custom-control-label {
|
||||
&::before {
|
||||
background-color: $color;
|
||||
border-color: darken($color, 20%);
|
||||
}
|
||||
|
||||
&::after {
|
||||
$new-color: color-yiq($color);
|
||||
background-image: str-replace($custom-checkbox-indicator-icon-checked, str-replace(#{$custom-control-indicator-checked-color}, "#", "%23"), str-replace(#{$new-color}, "#", "%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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include dark-mode () {
|
||||
&.accent-#{$name} {
|
||||
.page-item {
|
||||
.page-link {
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: lighten($link-color, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,119 +0,0 @@
|
|||
//
|
||||
// Mixins: Animation
|
||||
//
|
||||
|
||||
|
||||
@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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
0% {
|
||||
transform: translate(2px, 1px) rotate(0deg);
|
||||
}
|
||||
10% {
|
||||
transform: translate(-1px, -2px) rotate(-2deg);
|
||||
}
|
||||
20% {
|
||||
transform: translate(-3px, 0) rotate(3deg);
|
||||
}
|
||||
30% {
|
||||
transform: translate(0, 2px) rotate(0deg);
|
||||
}
|
||||
40% {
|
||||
transform: translate(1px, -1px) rotate(1deg);
|
||||
}
|
||||
50% {
|
||||
transform: translate(-1px, 2px) rotate(-1deg);
|
||||
}
|
||||
60% {
|
||||
transform: translate(-3px, 1px) rotate(0deg);
|
||||
}
|
||||
70% {
|
||||
transform: translate(2px, 1px) rotate(-2deg);
|
||||
}
|
||||
80% {
|
||||
transform: translate(-1px, -1px) rotate(4deg);
|
||||
}
|
||||
90% {
|
||||
transform: translate(2px, 2px) rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: translate(1px, -2px) rotate(-1deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes wobble {
|
||||
0% {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
15% {
|
||||
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
|
||||
}
|
||||
|
||||
30% {
|
||||
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
|
||||
}
|
||||
|
||||
45% {
|
||||
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
|
|
@ -1,69 +0,0 @@
|
|||
//
|
||||
// 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} {
|
||||
background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important;
|
||||
color: color-yiq($color);
|
||||
|
||||
&.btn {
|
||||
&:not(:disabled):not(.disabled):active,
|
||||
&:not(:disabled):not(.disabled).active,
|
||||
.show > &.dropdown-toggle {
|
||||
background-image: none !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $color linear-gradient(180deg, mix($body-bg, darken($color, 7.5%), 15%), darken($color, 7.5%)) repeat-x !important;
|
||||
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 linear-gradient(180deg, mix($body-bg, darken($color, 10%), 15%), darken($color, 10%)) repeat-x !important;
|
||||
border-color: darken($color, 12.5%);
|
||||
color: color-yiq(darken($color, 10%));
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&.disabled {
|
||||
background-image: none !important;
|
||||
border-color: $color;
|
||||
color: color-yiq($color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,84 +0,0 @@
|
|||
//
|
||||
// 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) {
|
||||
> .card-header {
|
||||
.btn-tool {
|
||||
color: rgba(color-yiq($color), .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-color: 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-color: lighten($color, 10%);
|
||||
color: color-yiq($color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,123 +0,0 @@
|
|||
//
|
||||
// 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: #{$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-color: darken($color, 25%);
|
||||
}
|
||||
}
|
||||
|
||||
&.custom-switch-on-#{$name} {
|
||||
.custom-control-input:checked ~ .custom-control-label::before {
|
||||
background-color: #{$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-color: 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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Custom Control Input Variant
|
||||
@mixin custom-control-input-variant($name, $color) {
|
||||
$custom-control-indicator-checked-color: $color;
|
||||
$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");
|
||||
$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");
|
||||
|
||||
.custom-control-input-#{$name} {
|
||||
&:checked ~ .custom-control-label::before {
|
||||
border-color: $color;
|
||||
@include gradient-bg($color);
|
||||
}
|
||||
|
||||
&.custom-control-input-outline:checked {
|
||||
&[type="checkbox"] ~ .custom-control-label::after {
|
||||
background-image: $custom-checkbox-indicator-icon-checked !important;
|
||||
}
|
||||
&[type="radio"] ~ .custom-control-label::after {
|
||||
background-image: $custom-radio-indicator-icon-checked !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus ~ .custom-control-label::before {
|
||||
// the mixin is not used here to make sure there is feedback
|
||||
@if $enable-shadows {
|
||||
box-shadow: $input-box-shadow, 0 0 0 $input-btn-focus-width rgba($color, .25);
|
||||
} @else {
|
||||
box-shadow: 0 0 0 $input-btn-focus-width rgba($color, .25);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus:not(:checked) ~ .custom-control-label::before {
|
||||
border-color: lighten($color, 25%);
|
||||
}
|
||||
|
||||
&:not(:disabled):active ~ .custom-control-label::before {
|
||||
background-color: lighten($color, 35%);
|
||||
border-color: lighten($color, 35%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
//
|
||||
// Mixins: Dark Mode Controll
|
||||
//
|
||||
|
||||
@mixin dark-mode {
|
||||
@if $enable-dark-mode {
|
||||
.dark-mode {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
//
|
||||
// Mixins: Direct Chat
|
||||
//
|
||||
|
||||
// Direct Chat Variant
|
||||
@mixin direct-chat-variant($bg-color, $color: $white) {
|
||||
.right > .direct-chat-text {
|
||||
background-color: $bg-color;
|
||||
border-color: $bg-color;
|
||||
color: color-yiq($bg-color);
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
border-left-color: $bg-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
//
|
||||
// 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: $white) {
|
||||
background-color: $color;
|
||||
background-image: gradient(linear, left bottom, left top, color-stop(0, $start), color-stop(1, $stop));
|
||||
}
|
||||
|
||||
//
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
//
|
||||
// Mixins: Navbar
|
||||
//
|
||||
|
||||
// Navbar Variant
|
||||
@mixin navbar-variant($name, $color) {
|
||||
.navbar-#{$name} {
|
||||
background-color: $color;
|
||||
color: color-yiq($color);
|
||||
|
||||
&.navbar-light {
|
||||
.form-control-navbar {
|
||||
&::placeholder {
|
||||
color: rgba($gray-800, .8);
|
||||
}
|
||||
&,
|
||||
+ .input-group-append > .btn-navbar {
|
||||
background-color: darken($color, 4%);
|
||||
border-color: darken($color, 9%);
|
||||
color: rgba($gray-800, .8);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
&::placeholder {
|
||||
color: $gray-800;
|
||||
}
|
||||
&,
|
||||
+ .input-group-append .btn-navbar {
|
||||
background-color: darken($color, 5%);
|
||||
border-color: darken($color, 9%) !important;
|
||||
color: $gray-800;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.navbar-dark {
|
||||
.form-control-navbar {
|
||||
&::placeholder {
|
||||
color: rgba($white, .8);
|
||||
}
|
||||
&,
|
||||
+ .input-group-append > .btn-navbar {
|
||||
background-color: lighten($color, 4%);
|
||||
border-color: lighten($color, 9%);
|
||||
color: rgba($white, .8);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
&::placeholder {
|
||||
color: $white;
|
||||
}
|
||||
&,
|
||||
+ .input-group-append .btn-navbar {
|
||||
background-color: lighten($color, 5%);
|
||||
border-color: lighten($color, 9%) !important;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
//
|
||||
// Mixins: Scrollbar
|
||||
//
|
||||
|
||||
@mixin scrollbar-color-gray() {
|
||||
scrollbar-color: #a9a9a9 transparent;
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #a9a9a9;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-corner {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin scrollbar-width-thin() {
|
||||
scrollbar-width: thin;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: .5rem;
|
||||
height: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin scrollbar-width-none() {
|
||||
scrollbar-width: none;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
|
|
@ -1,165 +0,0 @@
|
|||
//
|
||||
// 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;
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
.sidebar .nav-sidebar .nav-link p {
|
||||
width: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sidebar .user-panel > .info,
|
||||
.sidebar .nav-sidebar .nav-link p,
|
||||
.brand-text {
|
||||
margin-left: -10px;
|
||||
animation-name: fadeOut;
|
||||
animation-duration: $transition-speed;
|
||||
animation-fill-mode: both;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.logo-xl {
|
||||
animation-name: fadeOut;
|
||||
animation-duration: $transition-speed;
|
||||
animation-fill-mode: both;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.logo-xs {
|
||||
display: inline-block;
|
||||
animation-name: fadeIn;
|
||||
animation-duration: $transition-speed;
|
||||
animation-fill-mode: both;
|
||||
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,
|
||||
.sidebar .nav-sidebar .nav-link p,
|
||||
.brand-text,
|
||||
.logo-xl {
|
||||
display: inline-block;
|
||||
margin-left: 0;
|
||||
animation-name: fadeIn;
|
||||
animation-duration: $transition-speed;
|
||||
animation-fill-mode: both;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.logo-xs {
|
||||
animation-name: fadeOut;
|
||||
animation-duration: $transition-speed;
|
||||
animation-fill-mode: both;
|
||||
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;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
//
|
||||
// Mixins: Toasts
|
||||
//
|
||||
|
||||
// Toast Variant
|
||||
@mixin toast-variant($name, $color) {
|
||||
&.bg-#{$name} {
|
||||
background-color: rgba($color, .9) !important;
|
||||
@if (color-yiq($color) == $yiq-text-light) {
|
||||
|
||||
.close {
|
||||
color: color-yiq($color);
|
||||
text-shadow: 0 1px 0 $black;
|
||||
}
|
||||
}
|
||||
|
||||
.toast-header {
|
||||
background-color: rgba($color, .85);
|
||||
color: color-yiq($color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
//
|
||||
// Mixins: Touch Support
|
||||
//
|
||||
|
||||
@mixin on-touch-device {
|
||||
@media (hover: none) and (pointer: coarse) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
//
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
//
|
||||
// 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: .5;
|
||||
}
|
||||
}
|
||||
|
||||
// product share
|
||||
.product-share {
|
||||
a {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,142 +0,0 @@
|
|||
body.iframe-mode {
|
||||
.main-sidebar {
|
||||
display: none;
|
||||
}
|
||||
.content-wrapper {
|
||||
margin-left: 0 !important;
|
||||
margin-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
.main-header,
|
||||
.main-footer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
body.iframe-mode-fullscreen {
|
||||
overflow: hidden;
|
||||
|
||||
&.layout-navbar-fixed .wrapper .content-wrapper {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
height: 100%;
|
||||
|
||||
&.iframe-mode {
|
||||
.btn-iframe-close {
|
||||
color: $danger;
|
||||
position: absolute;
|
||||
line-height: 1;
|
||||
right: .125rem;
|
||||
top: .125rem;
|
||||
z-index: 10;
|
||||
visibility: hidden;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
animation-name: fadeIn;
|
||||
animation-duration: $transition-speed;
|
||||
animation-fill-mode: both;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
@include on-touch-device() {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
.navbar-nav {
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
|
||||
.nav-link {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.nav-item {
|
||||
position: relative;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
.btn-iframe-close {
|
||||
animation-name: fadeIn;
|
||||
animation-duration: $transition-speed;
|
||||
animation-fill-mode: both;
|
||||
visibility: visible;
|
||||
|
||||
@include on-touch-device() {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.tab-content {
|
||||
position: relative;
|
||||
}
|
||||
.tab-pane + .tab-empty {
|
||||
display: none;
|
||||
}
|
||||
.tab-empty {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.tab-loading {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
display: none;
|
||||
background-color: $main-bg;
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
iframe {
|
||||
border: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-bottom: -8px;
|
||||
|
||||
.content-wrapper {
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
body.iframe-mode-fullscreen & {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin-left: 0 !important;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
z-index: $zindex-main-sidebar + 10;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.permanent-btn-iframe-close {
|
||||
.btn-iframe-close {
|
||||
animation: none !important;
|
||||
visibility: visible !important;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@include dark-mode () {
|
||||
.content-wrapper.iframe-mode {
|
||||
.tab-loading {
|
||||
background-color: $dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
//
|
||||
// Pages: Invoice
|
||||
//
|
||||
|
||||
.invoice {
|
||||
background-color: $white;
|
||||
border: 1px solid $card-border-color;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.invoice-title {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@include dark-mode () {
|
||||
.invoice {
|
||||
background-color: $dark;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
.content-wrapper.kanban {
|
||||
height: 1px;
|
||||
|
||||
.content {
|
||||
height: 100%;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
|
||||
.container,
|
||||
.container-fluid {
|
||||
width: max-content;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
}
|
||||
.content-header + .content {
|
||||
height: calc(100% - ((2 * 15px) + (1.8rem * #{$headings-line-height})));
|
||||
}
|
||||
|
||||
.card {
|
||||
.card-body {
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
&.card-row {
|
||||
width: 340px;
|
||||
display: inline-block;
|
||||
margin: 0 .5rem;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
height: calc(100% - (12px + (1.8rem * #{$headings-line-height}) + .5rem));
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.card {
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
.card-header {
|
||||
padding: .5rem .75rem;
|
||||
}
|
||||
.card-body {
|
||||
padding: .75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn-tool {
|
||||
&.btn-link {
|
||||
text-decoration: underline;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,93 +0,0 @@
|
|||
//
|
||||
// Pages: Lock Screen
|
||||
//
|
||||
|
||||
// ADD THIS CLASS TO THE <BODY> TAG
|
||||
.lockscreen {
|
||||
background-color: $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-color: $white;
|
||||
margin: 10px auto 30px;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
width: 290px;
|
||||
}
|
||||
|
||||
// User image
|
||||
.lockscreen-image {
|
||||
@include border-radius(50%);
|
||||
background-color: $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;
|
||||
}
|
||||
|
||||
@include dark-mode () {
|
||||
.lockscreen-item {
|
||||
background-color: $dark;
|
||||
}
|
||||
.lockscreen-logo a {
|
||||
color: $white;
|
||||
}
|
||||
.lockscreen-credentials .btn {
|
||||
background-color: $dark;
|
||||
}
|
||||
.lockscreen-image {
|
||||
background-color: $gray-600;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,118 +0,0 @@
|
|||
//
|
||||
// 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-color: $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%;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.login-card-body,
|
||||
.register-card-body {
|
||||
background-color: $white;
|
||||
border-top: 0;
|
||||
color: #666;
|
||||
padding: 20px;
|
||||
|
||||
.input-group {
|
||||
.form-control {
|
||||
border-right: 0;
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
|
||||
~ .input-group-prepend .input-group-text,
|
||||
~ .input-group-append .input-group-text {
|
||||
border-color: $input-focus-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-valid {
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
~ .input-group-prepend .input-group-text,
|
||||
~ .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;
|
||||
}
|
||||
|
||||
@include dark-mode () {
|
||||
.login-card-body,
|
||||
.register-card-body {
|
||||
background-color: $dark;
|
||||
border-color: $gray-600;
|
||||
color: $white;
|
||||
}
|
||||
.login-logo,
|
||||
.register-logo {
|
||||
a {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,99 +0,0 @@
|
|||
//
|
||||
// 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: 700;
|
||||
}
|
||||
|
||||
.mailbox-attachment-icon,
|
||||
.mailbox-attachment-info,
|
||||
.mailbox-attachment-size {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mailbox-attachment-info {
|
||||
background-color: $gray-100;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.mailbox-attachment-size {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
|
||||
> span {
|
||||
display: inline-block;
|
||||
padding-top: .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;
|
||||
}
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
//
|
||||
// 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%;
|
||||
}
|
||||
}
|
||||
|
||||
@include dark-mode () {
|
||||
.post {
|
||||
color: $white;
|
||||
border-color: $gray-600;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
//
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
//
|
||||
// Part: Components
|
||||
//
|
||||
|
||||
@import "../forms";
|
||||
@import "../progress-bars";
|
||||
@import "../cards";
|
||||
@import "../modals";
|
||||
@import "../toasts";
|
||||
@import "../buttons";
|
||||
@import "../callout";
|
||||
@import "../alerts";
|
||||
@import "../table";
|
||||
@import "../carousel";
|
||||
@import "../close";
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
//
|
||||
// Part: Core
|
||||
//
|
||||
|
||||
@import "../root";
|
||||
@import "../animation-effects";
|
||||
@import "../preloader";
|
||||
@import "../layout";
|
||||
@import "../main-header";
|
||||
@import "../brand";
|
||||
@import "../main-sidebar";
|
||||
@import "../sidebar-mini";
|
||||
@import "../control-sidebar";
|
||||
@import "../dropdown";
|
||||
@import "../navs";
|
||||
@import "../pagination";
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue