Implement Bootstrap 5 and Vue 3, Remove BootstrapVue, jQuery and Other Libraries
This commit is contained in:
Buster Neece
GitHub
parent
3df9dda071
commit
072b861d94
11
CHANGELOG.md
11
CHANGELOG.md
|
|
@ -15,6 +15,17 @@ release channel, you can take advantage of these new features and fixes.
|
|||
|
||||
## Code Quality/Technical Changes
|
||||
|
||||
- **Frontend Overhaul**: We have updated the code that powers the browser-facing frontend of our application. In
|
||||
particular, we've upgraded from Bootstrap 4 to 5. Most users of the application won't need to change anything as a
|
||||
result of this, but if you use custom CSS or JavaScript, the following changes will be necessary:
|
||||
- jQuery has been removed. If you used jQuery, you can likely replace any jQuery code with vanilla javascript. See
|
||||
migration guides like this one for help: https://tobiasahlin.com/blog/move-from-jquery-to-vanilla-javascript/
|
||||
- The theme selectors have changed from `[data-theme="dark/light"]` to `[data-bs-theme="dark/light"]`.
|
||||
- Several colors and parameters can be customized just by changing CSS variables. For more information on the
|
||||
specific CSS variables exposed by Bootstrap 5, visit this
|
||||
page: https://getbootstrap.com/docs/5.3/customize/css-variables/
|
||||
- Several class names and identifiers have been renamed. Use the Inspect Element tool to identify the new names.
|
||||
|
||||
## Bug Fixes
|
||||
|
||||
- When adding media to playlists, the system will no longer remove the media from all playlists and then re-add it; it
|
||||
|
|
|
|||
|
|
@ -17,13 +17,6 @@ return static function (App\Event\BuildStationMenu $e) {
|
|||
$backendConfig = $station->getBackendConfig();
|
||||
|
||||
$router = $request->getRouter();
|
||||
$frontendEnum = $station->getFrontendType();
|
||||
|
||||
$willDisconnectMessage = __('Restart broadcasting? This will disconnect any current listeners.');
|
||||
$willNotDisconnectMessage = __('Reload broadcasting? Current listeners will not be disconnected.');
|
||||
|
||||
$reloadSupported = $frontendEnum->supportsReload();
|
||||
$reloadMessage = $reloadSupported ? $willNotDisconnectMessage : $willDisconnectMessage;
|
||||
|
||||
$settings = $e->getSettings();
|
||||
|
||||
|
|
@ -35,20 +28,17 @@ return static function (App\Event\BuildStationMenu $e) {
|
|||
'label' => __('Start Station'),
|
||||
'title' => __('Ready to start broadcasting? Click to start your station.'),
|
||||
'icon' => 'refresh',
|
||||
'url' => $router->fromHere('api:stations:reload'),
|
||||
'class' => 'api-call text-success',
|
||||
'confirm' => $reloadMessage,
|
||||
'url' => $router->fromHere('stations:restart:index'),
|
||||
'class' => 'text-success',
|
||||
'visible' => $hasLocalServices && !$station->getHasStarted(),
|
||||
'permission' => StationPermissions::Broadcasting,
|
||||
],
|
||||
'restart_station' => [
|
||||
'label' => __('Reload to Apply Changes'),
|
||||
'title' => __('Click to restart your station and apply configuration changes.'),
|
||||
'icon' => 'refresh',
|
||||
'url' => $router->fromHere('api:stations:reload'),
|
||||
'class' => 'api-call text-warning btn-restart-station '
|
||||
'url' => $router->fromHere('stations:restart:index'),
|
||||
'class' => 'text-warning btn-restart-station '
|
||||
. (!$station->getNeedsRestart() ? 'd-none' : ''),
|
||||
'confirm' => $reloadMessage,
|
||||
'visible' => $hasLocalServices && $station->getHasStarted(),
|
||||
'permission' => StationPermissions::Broadcasting,
|
||||
],
|
||||
|
|
@ -258,19 +248,10 @@ return static function (App\Event\BuildStationMenu $e) {
|
|||
'permission' => StationPermissions::Broadcasting,
|
||||
'visible' => $station->supportsAutoDjQueue(),
|
||||
],
|
||||
'reload' => [
|
||||
'label' => __('Reload Configuration'),
|
||||
'class' => 'api-call',
|
||||
'url' => $router->fromHere('api:stations:reload'),
|
||||
'confirm' => $willNotDisconnectMessage,
|
||||
'permission' => StationPermissions::Broadcasting,
|
||||
'visible' => $hasLocalServices && $reloadSupported,
|
||||
],
|
||||
'restart' => [
|
||||
'label' => __('Restart Broadcasting'),
|
||||
'class' => 'api-call',
|
||||
'url' => $router->fromHere('api:stations:restart'),
|
||||
'confirm' => $willDisconnectMessage,
|
||||
'url' => $router->fromHere('stations:restart:index'),
|
||||
'permission' => StationPermissions::Broadcasting,
|
||||
'visible' => $hasLocalServices,
|
||||
],
|
||||
|
|
|
|||
|
|
@ -121,6 +121,10 @@ return static function (RouteCollectorProxy $app) {
|
|||
}
|
||||
)->add(new Middleware\Permissions(StationPermissions::Reports, true));
|
||||
|
||||
$group->get('/restart', Controller\Stations\RestartAction::class)
|
||||
->setName('stations:restart:index')
|
||||
->add(new Middleware\Permissions(StationPermissions::Broadcasting, true));
|
||||
|
||||
$group->get('/sftp_users', Controller\Stations\SftpUsersAction::class)
|
||||
->setName('stations:sftp_users:index')
|
||||
->add(new Middleware\StationSupportsFeature(StationFeatures::Sftp))
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ module.exports = {
|
|||
"alignAttributesVertically": true
|
||||
}],
|
||||
"vue/no-v-html": "off",
|
||||
"vue/no-mutating-props": "off"
|
||||
"vue/no-mutating-props": "off",
|
||||
'vue/no-multiple-template-root': "off"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,30 +20,12 @@ const mode = gulpmode();
|
|||
const run = run_command.default;
|
||||
|
||||
const jsFiles = {
|
||||
'jquery': {
|
||||
base: 'node_modules/jquery/dist',
|
||||
files: [
|
||||
'node_modules/jquery/dist/jquery.min.js'
|
||||
]
|
||||
},
|
||||
'bootstrap': {
|
||||
base: null,
|
||||
files: [
|
||||
'node_modules/bootstrap/dist/js/bootstrap.bundle.min.js'
|
||||
]
|
||||
},
|
||||
'bootstrap-notify': {
|
||||
base: 'node_modules/bootstrap-notify',
|
||||
files: [
|
||||
'node_modules/bootstrap-notify/bootstrap-notify.min.js'
|
||||
]
|
||||
},
|
||||
'sweetalert2': {
|
||||
base: 'node_modules/sweetalert2/dist',
|
||||
files: [
|
||||
'node_modules/sweetalert2/dist/sweetalert2.min.js'
|
||||
]
|
||||
},
|
||||
'material-icons': {
|
||||
files: [
|
||||
'font/*'
|
||||
|
|
@ -56,11 +38,6 @@ const jsFiles = {
|
|||
'node_modules/roboto-fontface/fonts/roboto/*'
|
||||
]
|
||||
},
|
||||
'luxon': {
|
||||
files: [
|
||||
'node_modules/luxon/build/global/luxon.min.js'
|
||||
]
|
||||
},
|
||||
'webcaster': {
|
||||
base: null,
|
||||
files: [
|
||||
|
|
@ -108,18 +85,12 @@ task('concat-js', function () {
|
|||
|
||||
task('build-vue', run('webpack -c webpack.config.mjs'));
|
||||
|
||||
task('build-js', function () {
|
||||
return src(['./js/*.js'])
|
||||
.pipe(init())
|
||||
.pipe(uglify())
|
||||
.pipe(write())
|
||||
.pipe(dest('../web/static/dist'));
|
||||
});
|
||||
|
||||
task('build-css', function () {
|
||||
return src(['./scss/style.scss'])
|
||||
.pipe(mode.development(init()))
|
||||
.pipe(sass())
|
||||
.pipe(mode.development(init()))
|
||||
.pipe(sass({
|
||||
includePaths: ['node_modules']
|
||||
}))
|
||||
.pipe(clean_css())
|
||||
.pipe(mode.development(write()))
|
||||
.pipe(dest('../web/static/dist'));
|
||||
|
|
@ -133,13 +104,13 @@ task('watch', function () {
|
|||
], buildAll);
|
||||
});
|
||||
|
||||
const buildAll = series('clean', parallel('concat-js', 'build-vue', 'build-js', 'build-css', 'bundle-deps'), function () {
|
||||
const buildAll = series('clean', parallel('concat-js', 'build-vue', 'build-css', 'bundle-deps'), function () {
|
||||
return src(['../web/static/dist/**/*.{js,css}'], {base: '../web/static/'})
|
||||
.pipe(rev())
|
||||
.pipe(revdel())
|
||||
.pipe(dest('../web/static/'))
|
||||
.pipe(manifest('assets.json'))
|
||||
.pipe(dest('../web/static/'));
|
||||
.pipe(rev())
|
||||
.pipe(revdel())
|
||||
.pipe(dest('../web/static/'))
|
||||
.pipe(manifest('assets.json'))
|
||||
.pipe(dest('../web/static/'));
|
||||
});
|
||||
|
||||
export { buildAll as default };
|
||||
|
|
|
|||
|
|
@ -1,51 +0,0 @@
|
|||
function confirmDangerousAction (el) {
|
||||
let $el = $(el);
|
||||
|
||||
if (!$el.is('a')) {
|
||||
$el = $el.closest('a');
|
||||
}
|
||||
|
||||
let confirmTitle = App.lang.confirm;
|
||||
if ($el.data('confirm-title')) {
|
||||
confirmTitle = $el.data('confirm-title');
|
||||
}
|
||||
|
||||
let dangerMode = true;
|
||||
if ($el.hasClass('btn-success') || $el.hasClass('btn-outline-success')) {
|
||||
dangerMode = false;
|
||||
}
|
||||
|
||||
let buttonText;
|
||||
if ($el.find('span').length > 0) {
|
||||
// jQuery trick to pull an item's text without inner HTML elements.
|
||||
// https://stackoverflow.com/questions/8624592/how-to-get-only-direct-text-without-tags-with-jquery-in-html
|
||||
buttonText = $el.find('span').first().text();
|
||||
} else {
|
||||
buttonText = $el.clone().children().remove().end().text();
|
||||
}
|
||||
|
||||
return Swal.fire({
|
||||
title: confirmTitle,
|
||||
confirmButtonText: buttonText,
|
||||
confirmButtonColor: dangerMode ? '#e64942' : '#3085d6',
|
||||
showCancelButton: true,
|
||||
focusCancel: dangerMode
|
||||
});
|
||||
}
|
||||
|
||||
$(function () {
|
||||
|
||||
$('a.btn-danger,a.btn[data-confirm-title]').on('click', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
const linkUrl = $(this).attr('href');
|
||||
confirmDangerousAction(e.target).then((result) => {
|
||||
if (result.value) {
|
||||
window.location.href = linkUrl;
|
||||
}
|
||||
});
|
||||
return false;
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
(() => {
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
document.querySelector('#navbar-toggle').addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
document.querySelector('#sidebar').classList.toggle('show');
|
||||
});
|
||||
});
|
||||
})();
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
function notify (message, type, options) {
|
||||
|
||||
if (typeof options === 'boolean') {
|
||||
options = {
|
||||
minimal: options
|
||||
}
|
||||
} else if (typeof options === 'undefined') {
|
||||
options = {}
|
||||
}
|
||||
|
||||
var growlSettings = {
|
||||
type: type,
|
||||
allow_dismiss: true,
|
||||
label: 'Cancel',
|
||||
className: 'btn-xs btn-inverse align-right',
|
||||
placement: {
|
||||
from: 'top',
|
||||
align: 'right'
|
||||
},
|
||||
delay: 10000,
|
||||
z_index: 8,
|
||||
animate: {
|
||||
enter: 'animated fadeIn',
|
||||
exit: 'animated fadeOut'
|
||||
},
|
||||
offset: {
|
||||
x: 20,
|
||||
y: 85
|
||||
}
|
||||
}
|
||||
|
||||
if ($('body').hasClass('page-minimal')) {
|
||||
growlSettings.placement.from = 'top';
|
||||
growlSettings.placement.align = 'center';
|
||||
growlSettings.offset.y = 20;
|
||||
}
|
||||
|
||||
$.notify({ message: message }, $.extend({}, growlSettings, options));
|
||||
}
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
}
|
||||
|
||||
const setTheme = theme => {
|
||||
document.documentElement.setAttribute('data-theme', theme)
|
||||
document.documentElement.setAttribute('data-bs-theme', theme)
|
||||
|
||||
document.documentElement.dispatchEvent(new CustomEvent(
|
||||
"theme-change",
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
));
|
||||
}
|
||||
|
||||
const currentTheme = document.documentElement.getAttribute('data-theme');
|
||||
const currentTheme = document.documentElement.getAttribute('data-bs-theme');
|
||||
if (currentTheme !== 'light' && currentTheme !== 'dark') {
|
||||
setTheme(getPreferredTheme())
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
(() => {
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
document.querySelectorAll('.toast-notification').forEach((el) => {
|
||||
const toast = new bootstrap.Toast(el);
|
||||
toast.show();
|
||||
});
|
||||
});
|
||||
})();
|
||||
|
|
@ -1,640 +0,0 @@
|
|||
/*!
|
||||
* Daemonite Material v4.1.1 (http://daemonite.github.io/material/)
|
||||
* Copyright 2011-2018 Daemon Pty Ltd
|
||||
* Licensed under MIT (https://github.com/Daemonite/material/blob/master/LICENSE)
|
||||
*/
|
||||
|
||||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('jquery')) :
|
||||
typeof define === 'function' && define.amd ? define(['exports', 'jquery'], factory) :
|
||||
(factory((global.material = {}),global.jQuery));
|
||||
}(this, (function (exports,$) { 'use strict';
|
||||
|
||||
$ = $ && $.hasOwnProperty('default') ? $['default'] : $;
|
||||
|
||||
/*
|
||||
* Expansion panel plugins expands a collapsed panel in full upon selecting
|
||||
*/
|
||||
|
||||
var ExpansionPanel = function ($$$1) {
|
||||
// constants >>>
|
||||
var DATA_KEY = 'bs.collapse';
|
||||
var EVENT_KEY = "." + DATA_KEY;
|
||||
var ClassName = {
|
||||
SHOW: 'show',
|
||||
SHOW_PREDECESSOR: 'show-predecessor'
|
||||
};
|
||||
var Event = {
|
||||
HIDE: "hide" + EVENT_KEY,
|
||||
SHOW: "show" + EVENT_KEY
|
||||
};
|
||||
var Selector = {
|
||||
PANEL: '.expansion-panel',
|
||||
PANEL_BODY: '.expansion-panel .collapse' // <<< constants
|
||||
|
||||
};
|
||||
$$$1(document).on("" + Event.HIDE, Selector.PANEL_BODY, function () {
|
||||
var target = $$$1(this).closest(Selector.PANEL);
|
||||
target.removeClass(ClassName.SHOW);
|
||||
var predecessor = target.prev(Selector.PANEL);
|
||||
|
||||
if (predecessor.length) {
|
||||
predecessor.removeClass(ClassName.SHOW_PREDECESSOR);
|
||||
}
|
||||
}).on("" + Event.SHOW, Selector.PANEL_BODY, function () {
|
||||
var target = $$$1(this).closest(Selector.PANEL);
|
||||
target.addClass(ClassName.SHOW);
|
||||
var predecessor = target.prev(Selector.PANEL);
|
||||
|
||||
if (predecessor.length) {
|
||||
predecessor.addClass(ClassName.SHOW_PREDECESSOR);
|
||||
}
|
||||
});
|
||||
}($);
|
||||
|
||||
/*
|
||||
* Floating label plugin moves inline label to float above the field
|
||||
* when a user engages with the assosciated text input field
|
||||
*/
|
||||
|
||||
var FloatingLabel = function ($$$1) {
|
||||
// constants >>>
|
||||
var DATA_KEY = 'md.floatinglabel';
|
||||
var EVENT_KEY = "." + DATA_KEY;
|
||||
var NAME = 'floatinglabel';
|
||||
var NO_CONFLICT = $$$1.fn[NAME];
|
||||
var ClassName = {
|
||||
IS_FOCUSED: 'is-focused',
|
||||
HAS_VALUE: 'has-value'
|
||||
};
|
||||
var Event = {
|
||||
CHANGE: "change" + EVENT_KEY,
|
||||
FOCUSIN: "focusin" + EVENT_KEY,
|
||||
FOCUSOUT: "focusout" + EVENT_KEY
|
||||
};
|
||||
var Selector = {
|
||||
DATA_PARENT: '.floating-label',
|
||||
DATA_TOGGLE: '.floating-label .custom-select, .floating-label .form-control' // <<< constants
|
||||
|
||||
};
|
||||
|
||||
var FloatingLabel =
|
||||
/*#__PURE__*/
|
||||
function () {
|
||||
function FloatingLabel(element) {
|
||||
this._element = element;
|
||||
this._parent = $$$1(element).closest(Selector.DATA_PARENT)[0];
|
||||
}
|
||||
|
||||
var _proto = FloatingLabel.prototype;
|
||||
|
||||
_proto.change = function change() {
|
||||
if ($$$1(this._element).val() || $$$1(this._element).is('select') && $$$1('option:first-child', $$$1(this._element)).html().replace(' ', '') !== '') {
|
||||
$$$1(this._parent).addClass(ClassName.HAS_VALUE);
|
||||
} else {
|
||||
$$$1(this._parent).removeClass(ClassName.HAS_VALUE);
|
||||
}
|
||||
};
|
||||
|
||||
_proto.focusin = function focusin() {
|
||||
$$$1(this._parent).addClass(ClassName.IS_FOCUSED);
|
||||
};
|
||||
|
||||
_proto.focusout = function focusout() {
|
||||
$$$1(this._parent).removeClass(ClassName.IS_FOCUSED);
|
||||
};
|
||||
|
||||
FloatingLabel._jQueryInterface = function _jQueryInterface(event) {
|
||||
return this.each(function () {
|
||||
var _event = event ? event : 'change';
|
||||
|
||||
var data = $$$1(this).data(DATA_KEY);
|
||||
|
||||
if (!data) {
|
||||
data = new FloatingLabel(this);
|
||||
$$$1(this).data(DATA_KEY, data);
|
||||
}
|
||||
|
||||
if (typeof _event === 'string') {
|
||||
if (typeof data[_event] === 'undefined') {
|
||||
throw new Error("No method named \"" + _event + "\"");
|
||||
}
|
||||
|
||||
data[_event]();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return FloatingLabel;
|
||||
}();
|
||||
|
||||
$$$1(document).on(Event.CHANGE + " " + Event.FOCUSIN + " " + Event.FOCUSOUT, Selector.DATA_TOGGLE, function (event) {
|
||||
FloatingLabel._jQueryInterface.call($$$1(this), event.type);
|
||||
});
|
||||
$$$1.fn[NAME] = FloatingLabel._jQueryInterface;
|
||||
$$$1.fn[NAME].Constructor = FloatingLabel;
|
||||
|
||||
$$$1.fn[NAME].noConflict = function () {
|
||||
$$$1.fn[NAME] = NO_CONFLICT;
|
||||
return FloatingLabel._jQueryInterface;
|
||||
};
|
||||
|
||||
return FloatingLabel;
|
||||
}($);
|
||||
|
||||
function _defineProperties(target, props) {
|
||||
for (var i = 0; i < props.length; i++) {
|
||||
var descriptor = props[i];
|
||||
descriptor.enumerable = descriptor.enumerable || false;
|
||||
descriptor.configurable = true;
|
||||
if ("value" in descriptor) descriptor.writable = true;
|
||||
Object.defineProperty(target, descriptor.key, descriptor);
|
||||
}
|
||||
}
|
||||
|
||||
function _createClass(Constructor, protoProps, staticProps) {
|
||||
if (protoProps) _defineProperties(Constructor.prototype, protoProps);
|
||||
if (staticProps) _defineProperties(Constructor, staticProps);
|
||||
return Constructor;
|
||||
}
|
||||
|
||||
function _defineProperty(obj, key, value) {
|
||||
if (key in obj) {
|
||||
Object.defineProperty(obj, key, {
|
||||
value: value,
|
||||
enumerable: true,
|
||||
configurable: true,
|
||||
writable: true
|
||||
});
|
||||
} else {
|
||||
obj[key] = value;
|
||||
}
|
||||
|
||||
return obj;
|
||||
}
|
||||
|
||||
function _objectSpread(target) {
|
||||
for (var i = 1; i < arguments.length; i++) {
|
||||
var source = arguments[i] != null ? arguments[i] : {};
|
||||
var ownKeys = Object.keys(source);
|
||||
|
||||
if (typeof Object.getOwnPropertySymbols === 'function') {
|
||||
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
|
||||
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
|
||||
}));
|
||||
}
|
||||
|
||||
ownKeys.forEach(function (key) {
|
||||
_defineProperty(target, key, source[key]);
|
||||
});
|
||||
}
|
||||
|
||||
return target;
|
||||
}
|
||||
|
||||
/*
|
||||
* Global util js
|
||||
* Based on Bootstrap's (v4.1.X) `util.js`
|
||||
*/
|
||||
|
||||
var Util = function ($$$1) {
|
||||
var MAX_UID = 1000000;
|
||||
var MILLISECONDS_MULTIPLIER = 1000;
|
||||
var TRANSITION_END = 'transitionend';
|
||||
|
||||
function getSpecialTransitionEndEvent() {
|
||||
return {
|
||||
bindType: TRANSITION_END,
|
||||
delegateType: TRANSITION_END,
|
||||
handle: function handle(event) {
|
||||
if ($$$1(event.target).is(this)) {
|
||||
return event.handleObj.handler.apply(this, arguments); // eslint-disable-line prefer-rest-params
|
||||
}
|
||||
|
||||
return undefined; // eslint-disable-line no-undefined
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function setTransitionEndSupport() {
|
||||
$$$1.fn.emulateTransitionEnd = transitionEndEmulator;
|
||||
$$$1.event.special[Util.TRANSITION_END] = getSpecialTransitionEndEvent();
|
||||
}
|
||||
|
||||
function toType(obj) {
|
||||
return {}.toString.call(obj).match(/\s([a-z]+)/i)[1].toLowerCase();
|
||||
}
|
||||
|
||||
function transitionEndEmulator(duration) {
|
||||
var _this = this;
|
||||
|
||||
var called = false;
|
||||
$$$1(this).one(Util.TRANSITION_END, function () {
|
||||
called = true;
|
||||
});
|
||||
setTimeout(function () {
|
||||
if (!called) {
|
||||
Util.triggerTransitionEnd(_this);
|
||||
}
|
||||
}, duration);
|
||||
return this;
|
||||
}
|
||||
|
||||
var Util = {
|
||||
TRANSITION_END: 'mdTransitionEnd',
|
||||
getSelectorFromElement: function getSelectorFromElement(element) {
|
||||
var selector = element.getAttribute('data-target');
|
||||
|
||||
if (!selector || selector === '#') {
|
||||
selector = element.getAttribute('href') || '';
|
||||
}
|
||||
|
||||
try {
|
||||
var $selector = $$$1(document).find(selector);
|
||||
return $selector.length > 0 ? selector : null;
|
||||
} catch (err) {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
getTransitionDurationFromElement: function getTransitionDurationFromElement(element) {
|
||||
if (!element) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
var transitionDuration = $$$1(element).css('transition-duration');
|
||||
|
||||
if (!transitionDuration) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
transitionDuration = transitionDuration.split(',')[0];
|
||||
return parseFloat(transitionDuration) * MILLISECONDS_MULTIPLIER;
|
||||
},
|
||||
getUID: function getUID(prefix) {
|
||||
do {
|
||||
// eslint-disable-next-line no-bitwise
|
||||
prefix += ~~(Math.random() * MAX_UID);
|
||||
} while (document.getElementById(prefix));
|
||||
|
||||
return prefix;
|
||||
},
|
||||
isElement: function isElement(obj) {
|
||||
return (obj[0] || obj).nodeType;
|
||||
},
|
||||
reflow: function reflow(element) {
|
||||
return element.offsetHeight;
|
||||
},
|
||||
supportsTransitionEnd: function supportsTransitionEnd() {
|
||||
return Boolean(TRANSITION_END);
|
||||
},
|
||||
triggerTransitionEnd: function triggerTransitionEnd(element) {
|
||||
$$$1(element).trigger(TRANSITION_END);
|
||||
},
|
||||
typeCheckConfig: function typeCheckConfig(componentName, config, configTypes) {
|
||||
for (var property in configTypes) {
|
||||
if (Object.prototype.hasOwnProperty.call(configTypes, property)) {
|
||||
var expectedTypes = configTypes[property];
|
||||
var value = config[property];
|
||||
var valueType = value && Util.isElement(value) ? 'element' : toType(value);
|
||||
|
||||
if (!new RegExp(expectedTypes).test(valueType)) {
|
||||
throw new Error(componentName.toUpperCase() + ": " + ("Option \"" + property + "\" provided type \"" + valueType + "\" ") + ("but expected type \"" + expectedTypes + "\"."));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
setTransitionEndSupport();
|
||||
return Util;
|
||||
}($);
|
||||
|
||||
/*
|
||||
* Navigation drawer plguin
|
||||
* Based on Bootstrap's (v4.1.X) `modal.js`
|
||||
*/
|
||||
|
||||
var NavDrawer = function ($$$1) {
|
||||
// constants >>>
|
||||
var DATA_API_KEY = '.data-api';
|
||||
var DATA_KEY = 'md.navdrawer';
|
||||
var ESCAPE_KEYCODE = 27;
|
||||
var EVENT_KEY = "." + DATA_KEY;
|
||||
var NAME = 'navdrawer';
|
||||
var NO_CONFLICT = $$$1.fn[NAME];
|
||||
var ClassName = {
|
||||
BACKDROP: 'navdrawer-backdrop',
|
||||
OPEN: 'navdrawer-open',
|
||||
SHOW: 'show'
|
||||
};
|
||||
var Default = {
|
||||
breakpoint: '',
|
||||
keyboard: true,
|
||||
show: true,
|
||||
type: 'default'
|
||||
};
|
||||
var DefaultType = {
|
||||
keyboard: 'boolean',
|
||||
show: 'boolean',
|
||||
type: 'string'
|
||||
};
|
||||
var Event = {
|
||||
CLICK_DATA_API: "click" + EVENT_KEY + DATA_API_KEY,
|
||||
CLICK_DISMISS: "click.dismiss" + EVENT_KEY,
|
||||
FOCUSIN: "focusin" + EVENT_KEY,
|
||||
HIDDEN: "hidden" + EVENT_KEY,
|
||||
HIDE: "hide" + EVENT_KEY,
|
||||
KEYDOWN_DISMISS: "keydown.dismiss" + EVENT_KEY,
|
||||
MOUSEDOWN_DISMISS: "mousedown.dismiss" + EVENT_KEY,
|
||||
MOUSEUP_DISMISS: "mouseup.dismiss" + EVENT_KEY,
|
||||
SHOW: "show" + EVENT_KEY,
|
||||
SHOWN: "shown" + EVENT_KEY
|
||||
};
|
||||
var Selector = {
|
||||
CONTENT: '.navdrawer-content',
|
||||
DATA_DISMISS: '[data-dismiss="navdrawer"]',
|
||||
DATA_TOGGLE: '[data-toggle="navdrawer"]' // <<< constants
|
||||
|
||||
};
|
||||
|
||||
var NavDrawer =
|
||||
/*#__PURE__*/
|
||||
function () {
|
||||
function NavDrawer(element, config) {
|
||||
this._backdrop = null;
|
||||
this._config = this._getConfig(config);
|
||||
this._content = $$$1(element).find(Selector.CONTENT)[0];
|
||||
this._element = element;
|
||||
this._ignoreBackdropClick = false;
|
||||
this._isShown = false;
|
||||
this._typeBreakpoint = this._config.breakpoint === '' ? '' : "-" + this._config.breakpoint;
|
||||
}
|
||||
|
||||
var _proto = NavDrawer.prototype;
|
||||
|
||||
_proto.hide = function hide(event) {
|
||||
var _this = this;
|
||||
|
||||
if (event) {
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
if (this._isTransitioning || !this._isShown) {
|
||||
return;
|
||||
}
|
||||
|
||||
var hideEvent = $$$1.Event(Event.HIDE);
|
||||
$$$1(this._element).trigger(hideEvent);
|
||||
|
||||
if (!this._isShown || hideEvent.isDefaultPrevented()) {
|
||||
return;
|
||||
}
|
||||
|
||||
this._isShown = false;
|
||||
this._isTransitioning = true;
|
||||
|
||||
this._setEscapeEvent();
|
||||
|
||||
$$$1(document).off(Event.FOCUSIN);
|
||||
$$$1(document.body).removeClass(ClassName.OPEN + "-" + this._config.type + this._typeBreakpoint);
|
||||
$$$1(this._element).removeClass(ClassName.SHOW);
|
||||
$$$1(this._element).off(Event.CLICK_DISMISS);
|
||||
$$$1(this._content).off(Event.MOUSEDOWN_DISMISS);
|
||||
var transitionDuration = Util.getTransitionDurationFromElement(this._content);
|
||||
$$$1(this._content).one(Util.TRANSITION_END, function (event) {
|
||||
return _this._hideNavdrawer(event);
|
||||
}).emulateTransitionEnd(transitionDuration);
|
||||
|
||||
this._showBackdrop();
|
||||
};
|
||||
|
||||
_proto.show = function show(relatedTarget) {
|
||||
var _this2 = this;
|
||||
|
||||
if (this._isTransitioning || this._isShown) {
|
||||
return;
|
||||
}
|
||||
|
||||
this._isTransitioning = true;
|
||||
var showEvent = $$$1.Event(Event.SHOW, {
|
||||
relatedTarget: relatedTarget
|
||||
});
|
||||
$$$1(this._element).trigger(showEvent);
|
||||
|
||||
if (this._isShown || showEvent.isDefaultPrevented()) {
|
||||
return;
|
||||
}
|
||||
|
||||
this._isShown = true;
|
||||
|
||||
this._setEscapeEvent();
|
||||
|
||||
$$$1(this._element).addClass(NAME + "-" + this._config.type + this._typeBreakpoint);
|
||||
$$$1(this._element).on(Event.CLICK_DISMISS, Selector.DATA_DISMISS, function (event) {
|
||||
return _this2.hide(event);
|
||||
});
|
||||
$$$1(this._content).on(Event.MOUSEDOWN_DISMISS, function () {
|
||||
$$$1(_this2._element).one(Event.MOUSEUP_DISMISS, function (event) {
|
||||
if ($$$1(event.target).is(_this2._element)) {
|
||||
_this2._ignoreBackdropClick = true;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
this._showBackdrop();
|
||||
|
||||
this._showElement(relatedTarget);
|
||||
};
|
||||
|
||||
_proto.toggle = function toggle(relatedTarget) {
|
||||
return this._isShown ? this.hide() : this.show(relatedTarget);
|
||||
};
|
||||
|
||||
_proto._enforceFocus = function _enforceFocus() {
|
||||
var _this3 = this;
|
||||
|
||||
$$$1(document).off(Event.FOCUSIN).on(Event.FOCUSIN, function (event) {
|
||||
if (document !== event.target && _this3._element !== event.target && $$$1(_this3._element).has(event.target).length === 0) {
|
||||
_this3._element.focus();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
_proto._getConfig = function _getConfig(config) {
|
||||
config = _objectSpread({}, Default, config);
|
||||
Util.typeCheckConfig(NAME, config, DefaultType);
|
||||
return config;
|
||||
};
|
||||
|
||||
_proto._hideNavdrawer = function _hideNavdrawer() {
|
||||
this._element.style.display = 'none';
|
||||
|
||||
this._element.setAttribute('aria-hidden', true);
|
||||
|
||||
this._isTransitioning = false;
|
||||
$$$1(this._element).trigger(Event.HIDDEN);
|
||||
};
|
||||
|
||||
_proto._removeBackdrop = function _removeBackdrop() {
|
||||
if (this._backdrop) {
|
||||
$$$1(this._backdrop).remove();
|
||||
this._backdrop = null;
|
||||
}
|
||||
};
|
||||
|
||||
_proto._setEscapeEvent = function _setEscapeEvent() {
|
||||
var _this4 = this;
|
||||
|
||||
if (this._isShown && this._config.keyboard) {
|
||||
$$$1(this._element).on(Event.KEYDOWN_DISMISS, function (event) {
|
||||
if (event.which === ESCAPE_KEYCODE) {
|
||||
event.preventDefault();
|
||||
|
||||
_this4.hide();
|
||||
}
|
||||
});
|
||||
} else if (!this._isShown) {
|
||||
$$$1(this._element).off(Event.KEYDOWN_DISMISS);
|
||||
}
|
||||
};
|
||||
|
||||
_proto._showBackdrop = function _showBackdrop() {
|
||||
var _this5 = this;
|
||||
|
||||
if (this._isShown) {
|
||||
this._backdrop = document.createElement('div');
|
||||
$$$1(this._backdrop).addClass(ClassName.BACKDROP).addClass(ClassName.BACKDROP + "-" + this._config.type + this._typeBreakpoint).appendTo(document.body);
|
||||
$$$1(this._element).on(Event.CLICK_DISMISS, function (event) {
|
||||
if (_this5._ignoreBackdropClick) {
|
||||
_this5._ignoreBackdropClick = false;
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.target !== event.currentTarget) {
|
||||
return;
|
||||
}
|
||||
|
||||
_this5.hide();
|
||||
});
|
||||
Util.reflow(this._backdrop);
|
||||
$$$1(this._backdrop).addClass(ClassName.SHOW);
|
||||
} else if (!this._isShown && this._backdrop) {
|
||||
$$$1(this._backdrop).removeClass(ClassName.SHOW);
|
||||
|
||||
this._removeBackdrop();
|
||||
}
|
||||
};
|
||||
|
||||
_proto._showElement = function _showElement(relatedTarget) {
|
||||
var _this6 = this;
|
||||
|
||||
if (!this._element.parentNode || this._element.parentNode.nodeType !== Node.ELEMENT_NODE) {
|
||||
document.body.appendChild(this._element);
|
||||
}
|
||||
|
||||
this._element.style.display = 'block';
|
||||
|
||||
this._element.removeAttribute('aria-hidden');
|
||||
|
||||
Util.reflow(this._element);
|
||||
$$$1(document.body).addClass(ClassName.OPEN + "-" + this._config.type + this._typeBreakpoint);
|
||||
$$$1(this._element).addClass(ClassName.SHOW);
|
||||
|
||||
this._enforceFocus();
|
||||
|
||||
var shownEvent = $$$1.Event(Event.SHOWN, {
|
||||
relatedTarget: relatedTarget
|
||||
});
|
||||
|
||||
var transitionComplete = function transitionComplete() {
|
||||
_this6._element.focus();
|
||||
|
||||
_this6._isTransitioning = false;
|
||||
$$$1(_this6._element).trigger(shownEvent);
|
||||
};
|
||||
|
||||
var transitionDuration = Util.getTransitionDurationFromElement(this._content);
|
||||
$$$1(this._content).one(Util.TRANSITION_END, transitionComplete).emulateTransitionEnd(transitionDuration);
|
||||
};
|
||||
|
||||
NavDrawer._jQueryInterface = function _jQueryInterface(config, relatedTarget) {
|
||||
return this.each(function () {
|
||||
var _config = _objectSpread({}, Default, $$$1(this).data(), typeof config === 'object' && config ? config : {});
|
||||
|
||||
var data = $$$1(this).data(DATA_KEY);
|
||||
|
||||
if (!data) {
|
||||
data = new NavDrawer(this, _config);
|
||||
$$$1(this).data(DATA_KEY, data);
|
||||
}
|
||||
|
||||
if (typeof config === 'string') {
|
||||
if (typeof data[config] === 'undefined') {
|
||||
throw new TypeError("No method named \"" + config + "\"");
|
||||
}
|
||||
|
||||
data[config](relatedTarget);
|
||||
} else if (_config.show) {
|
||||
data.show(relatedTarget);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
_createClass(NavDrawer, null, [{
|
||||
key: "Default",
|
||||
get: function get() {
|
||||
return Default;
|
||||
}
|
||||
}]);
|
||||
|
||||
return NavDrawer;
|
||||
}();
|
||||
|
||||
$$$1(document).on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) {
|
||||
var _this7 = this;
|
||||
|
||||
var selector = Util.getSelectorFromElement(this);
|
||||
var target;
|
||||
|
||||
if (selector) {
|
||||
target = $$$1(selector)[0];
|
||||
}
|
||||
|
||||
var config = $$$1(target).data(DATA_KEY) ? 'toggle' : _objectSpread({}, $$$1(target).data(), $$$1(this).data());
|
||||
|
||||
if (this.tagName === 'A' || this.tagName === 'AREA') {
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
var $target = $$$1(target).one(Event.SHOW, function (showEvent) {
|
||||
if (showEvent.isDefaultPrevented()) {
|
||||
return;
|
||||
}
|
||||
|
||||
$target.one(Event.HIDDEN, function () {
|
||||
if ($$$1(_this7).is(':visible')) {
|
||||
_this7.focus();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
NavDrawer._jQueryInterface.call($$$1(target), config, this);
|
||||
});
|
||||
$$$1.fn[NAME] = NavDrawer._jQueryInterface;
|
||||
$$$1.fn[NAME].Constructor = NavDrawer;
|
||||
|
||||
$$$1.fn[NAME].noConflict = function () {
|
||||
$$$1.fn[NAME] = NO_CONFLICT;
|
||||
return NavDrawer._jQueryInterface;
|
||||
};
|
||||
|
||||
return NavDrawer;
|
||||
}($);
|
||||
|
||||
exports.Util = Util;
|
||||
exports.ExpansionPanel = ExpansionPanel;
|
||||
exports.FloatingLabel = FloatingLabel;
|
||||
exports.NavDrawer = NavDrawer;
|
||||
|
||||
Object.defineProperty(exports, '__esModule', { value: true });
|
||||
|
||||
})));
|
||||
|
|
@ -2,9 +2,6 @@
|
|||
"compilerOptions": {
|
||||
"paths": {
|
||||
"~/*": ["./vue/*"]
|
||||
},
|
||||
},
|
||||
"vueCompilerOptions": {
|
||||
"target": 3
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -8,29 +8,49 @@
|
|||
"import-locales": "gettext-compile --output ../translations/translations.json $(find ../translations/*.UTF-8/LC_MESSAGES -type f -name 'default.po')"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/core": "^7.15.5",
|
||||
"@babel/preset-env": "^7.15.6",
|
||||
"@codemirror/lang-css": "^6.0.1",
|
||||
"@codemirror/lang-javascript": "^6.1.2",
|
||||
"@fancyapps/fancybox": "^3.5.7",
|
||||
"@flowjs/flow.js": "^2.14.1",
|
||||
"@fullcalendar/bootstrap5": "^6.1.8",
|
||||
"@fullcalendar/core": "^6",
|
||||
"@fullcalendar/daygrid": "^6",
|
||||
"@fullcalendar/luxon3": "^6",
|
||||
"@fullcalendar/timegrid": "^6",
|
||||
"@fullcalendar/vue3": "^6",
|
||||
"@vue/compat": "^3.2.45",
|
||||
"@oruga-ui/oruga-next": "^0.6.0",
|
||||
"@oruga-ui/theme-bootstrap": "^0.1.1",
|
||||
"@popperjs/core": "^2.11.8",
|
||||
"@vuelidate/core": "^2.0.0",
|
||||
"@vuelidate/validators": "^2.0.0",
|
||||
"@vuepic/vue-datepicker": "^5.4.0",
|
||||
"@vueuse/core": "^10",
|
||||
"axios": "^1",
|
||||
"bootstrap": "^4.6.0 <5",
|
||||
"bootstrap-notify": "^3.1.3",
|
||||
"bootstrap-vue": "^2.21.2",
|
||||
"bootstrap": "^5.3.0",
|
||||
"chart.js": "^4.0.1",
|
||||
"chartjs-adapter-luxon": "^1.1.0",
|
||||
"chartjs-plugin-zoom": "^2.0.0",
|
||||
"codemirror": "^6",
|
||||
"hls.js": "^1.1.5",
|
||||
"leaflet": "^1.7.1",
|
||||
"leaflet-defaulticon-compatibility": "^0.1.1",
|
||||
"leaflet.fullscreen": "^2",
|
||||
"lodash": "^4.17.21",
|
||||
"luxon": "^3",
|
||||
"material-icons": "^1",
|
||||
"pinia": "^2.0.28",
|
||||
"roboto-fontface": "^0.10.0",
|
||||
"sweetalert2": "11.4.8",
|
||||
"vue": "^3.2",
|
||||
"vue-axios": "^3.5",
|
||||
"vue-codemirror6": "1.1.1",
|
||||
"vue3-gettext": "^2.3.4",
|
||||
"vuedraggable": "^4.1.0",
|
||||
"wavesurfer.js": "^6",
|
||||
"zxcvbn": "^4.4.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.15.5",
|
||||
"@babel/preset-env": "^7.15.6",
|
||||
"css-loader": "^6.5.0",
|
||||
"del": "^7",
|
||||
"easygettext": "^2.17.0",
|
||||
|
|
@ -49,38 +69,12 @@
|
|||
"gulp-run-command": "0.0.10",
|
||||
"gulp-sourcemaps": "^3",
|
||||
"gulp-uglify": "^3.0.2",
|
||||
"hls.js": "^1.1.5",
|
||||
"humanize-duration": "^3.27.0",
|
||||
"imports-loader": "^4",
|
||||
"jquery": "^3.6.0",
|
||||
"leaflet": "^1.7.1",
|
||||
"leaflet-defaulticon-compatibility": "^0.1.1",
|
||||
"leaflet.fullscreen": "^2",
|
||||
"lodash": "^4.17.21",
|
||||
"luxon": "^3",
|
||||
"material-icons": "^1",
|
||||
"moment": "^2.29.1",
|
||||
"moment-timezone": "^0.5.33",
|
||||
"pinia": "^2.0.28",
|
||||
"popper.js": "^1.16.1",
|
||||
"prettier": "^2",
|
||||
"roboto-fontface": "^0.10.0",
|
||||
"sass": "^1.39.2",
|
||||
"sass-loader": "^13",
|
||||
"store": "^2",
|
||||
"sweetalert2": "11.4.8",
|
||||
"vue": "^3.2",
|
||||
"vue-axios": "^3.5",
|
||||
"vue-codemirror6": "1.1.1",
|
||||
"vue-loader": "^17",
|
||||
"vue-style-loader": "^4.1.3",
|
||||
"vue3-daterange-picker": "^1",
|
||||
"vue3-gettext": "^2.3.4",
|
||||
"vuedraggable": "^2.24.1",
|
||||
"wavesurfer.js": "^6",
|
||||
"webpack": "^5.52.1",
|
||||
"webpack-assets-manifest": "^5",
|
||||
"webpack-cli": "^5",
|
||||
"zxcvbn": "^4.4.2"
|
||||
"webpack-cli": "^5"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,43 @@
|
|||
// Configuration
|
||||
@import "bootstrap/scss/maps";
|
||||
@import "bootstrap/scss/mixins";
|
||||
@import "bootstrap/scss/utilities";
|
||||
|
||||
// Layout & components
|
||||
@import "bootstrap/scss/root";
|
||||
@import "bootstrap/scss/reboot";
|
||||
@import "bootstrap/scss/type";
|
||||
@import "bootstrap/scss/images";
|
||||
@import "bootstrap/scss/containers";
|
||||
@import "bootstrap/scss/grid";
|
||||
@import "bootstrap/scss/tables";
|
||||
@import "bootstrap/scss/forms";
|
||||
@import "bootstrap/scss/buttons";
|
||||
@import "bootstrap/scss/transitions";
|
||||
@import "bootstrap/scss/dropdown";
|
||||
@import "bootstrap/scss/button-group";
|
||||
@import "bootstrap/scss/nav";
|
||||
@import "bootstrap/scss/navbar";
|
||||
@import "bootstrap/scss/card";
|
||||
@import "bootstrap/scss/accordion";
|
||||
@import "bootstrap/scss/breadcrumb";
|
||||
@import "bootstrap/scss/pagination";
|
||||
@import "bootstrap/scss/badge";
|
||||
@import "bootstrap/scss/alert";
|
||||
@import "bootstrap/scss/progress";
|
||||
@import "bootstrap/scss/list-group";
|
||||
@import "bootstrap/scss/close";
|
||||
@import "bootstrap/scss/toasts";
|
||||
@import "bootstrap/scss/modal";
|
||||
// @import "bootstrap/scss/tooltip";
|
||||
// @import "bootstrap/scss/popover";
|
||||
// @import "bootstrap/scss/carousel";
|
||||
@import "bootstrap/scss/spinners";
|
||||
// @import "bootstrap/scss/offcanvas";
|
||||
// @import "bootstrap/scss/placeholders";
|
||||
|
||||
// Helpers
|
||||
@import "bootstrap/scss/helpers";
|
||||
|
||||
// Utilities
|
||||
@import "bootstrap/scss/utilities/api";
|
||||
|
|
@ -1,730 +0,0 @@
|
|||
// Material colour palette
|
||||
// Based on https://material.google.com/style/color.html#color-color-palette
|
||||
|
||||
$material-color-amber-050: #fff8e1 !default;
|
||||
$material-color-amber-100: #ffecb3 !default;
|
||||
$material-color-amber-200: #ffe082 !default;
|
||||
$material-color-amber-300: #ffd54f !default;
|
||||
$material-color-amber-400: #ffca28 !default;
|
||||
$material-color-amber-500: #ffc107 !default;
|
||||
$material-color-amber-600: #ffb300 !default;
|
||||
$material-color-amber-700: #ffa000 !default;
|
||||
$material-color-amber-800: #ff8f00 !default;
|
||||
$material-color-amber-900: #ff6f00 !default;
|
||||
$material-color-amber-a100: #ffe57f !default;
|
||||
$material-color-amber-a200: #ffd740 !default;
|
||||
$material-color-amber-a400: #ffc400 !default;
|
||||
$material-color-amber-a700: #ffab00 !default;
|
||||
|
||||
$material-color-blue-050: #e3f2fd !default;
|
||||
$material-color-blue-100: #bbdefb !default;
|
||||
$material-color-blue-200: #90caf9 !default;
|
||||
$material-color-blue-300: #64b5f6 !default;
|
||||
$material-color-blue-400: #42a5f5 !default;
|
||||
$material-color-blue-500: #2196f3 !default;
|
||||
$material-color-blue-600: #1e88e5 !default;
|
||||
$material-color-blue-700: #1976d2 !default;
|
||||
$material-color-blue-800: #1565c0 !default;
|
||||
$material-color-blue-900: #0d47a1 !default;
|
||||
$material-color-blue-a100: #82b1ff !default;
|
||||
$material-color-blue-a200: #448aff !default;
|
||||
$material-color-blue-a400: #2979ff !default;
|
||||
$material-color-blue-a700: #2962ff !default;
|
||||
|
||||
$material-color-blue-grey-050: #eceff1 !default;
|
||||
$material-color-blue-grey-100: #cfd8dc !default;
|
||||
$material-color-blue-grey-200: #b0bec5 !default;
|
||||
$material-color-blue-grey-300: #90a4ae !default;
|
||||
$material-color-blue-grey-400: #78909c !default;
|
||||
$material-color-blue-grey-500: #607d8b !default;
|
||||
$material-color-blue-grey-600: #546e7a !default;
|
||||
$material-color-blue-grey-700: #455a64 !default;
|
||||
$material-color-blue-grey-800: #37474f !default;
|
||||
$material-color-blue-grey-900: #263238 !default;
|
||||
|
||||
$material-color-brown-050: #efebe9 !default;
|
||||
$material-color-brown-100: #d7ccc8 !default;
|
||||
$material-color-brown-200: #bcaaa4 !default;
|
||||
$material-color-brown-300: #a1887f !default;
|
||||
$material-color-brown-400: #8d6e63 !default;
|
||||
$material-color-brown-500: #795548 !default;
|
||||
$material-color-brown-600: #6d4c41 !default;
|
||||
$material-color-brown-700: #5d4037 !default;
|
||||
$material-color-brown-800: #4e342e !default;
|
||||
$material-color-brown-900: #3e2723 !default;
|
||||
|
||||
$material-color-cyan-050: #e0f7fa !default;
|
||||
$material-color-cyan-100: #b2ebf2 !default;
|
||||
$material-color-cyan-200: #80deea !default;
|
||||
$material-color-cyan-300: #4dd0e1 !default;
|
||||
$material-color-cyan-400: #26c6da !default;
|
||||
$material-color-cyan-500: #00bcd4 !default;
|
||||
$material-color-cyan-600: #00acc1 !default;
|
||||
$material-color-cyan-700: #0097a7 !default;
|
||||
$material-color-cyan-800: #00838f !default;
|
||||
$material-color-cyan-900: #006064 !default;
|
||||
$material-color-cyan-a100: #84ffff !default;
|
||||
$material-color-cyan-a200: #18ffff !default;
|
||||
$material-color-cyan-a400: #00e5ff !default;
|
||||
$material-color-cyan-a700: #00b8d4 !default;
|
||||
|
||||
$material-color-deep-orange-050: #fbe9e7 !default;
|
||||
$material-color-deep-orange-100: #ffccbc !default;
|
||||
$material-color-deep-orange-200: #ffab91 !default;
|
||||
$material-color-deep-orange-300: #ff8a65 !default;
|
||||
$material-color-deep-orange-400: #ff7043 !default;
|
||||
$material-color-deep-orange-500: #ff5722 !default;
|
||||
$material-color-deep-orange-600: #f4511e !default;
|
||||
$material-color-deep-orange-700: #e64a19 !default;
|
||||
$material-color-deep-orange-800: #d84315 !default;
|
||||
$material-color-deep-orange-900: #bf360c !default;
|
||||
$material-color-deep-orange-a100: #ff9e80 !default;
|
||||
$material-color-deep-orange-a200: #ff6e40 !default;
|
||||
$material-color-deep-orange-a400: #ff3d00 !default;
|
||||
$material-color-deep-orange-a700: #dd2c00 !default;
|
||||
|
||||
$material-color-deep-purple-050: #ede7f6 !default;
|
||||
$material-color-deep-purple-100: #d1c4e9 !default;
|
||||
$material-color-deep-purple-200: #b39ddb !default;
|
||||
$material-color-deep-purple-300: #9575cd !default;
|
||||
$material-color-deep-purple-400: #7e57c2 !default;
|
||||
$material-color-deep-purple-500: #673ab7 !default;
|
||||
$material-color-deep-purple-600: #5e35b1 !default;
|
||||
$material-color-deep-purple-700: #512da8 !default;
|
||||
$material-color-deep-purple-800: #4527a0 !default;
|
||||
$material-color-deep-purple-900: #311b92 !default;
|
||||
$material-color-deep-purple-a100: #b388ff !default;
|
||||
$material-color-deep-purple-a200: #7c4dff !default;
|
||||
$material-color-deep-purple-a400: #651fff !default;
|
||||
$material-color-deep-purple-a700: #6200ea !default;
|
||||
|
||||
$material-color-green-050: #e8f5e9 !default;
|
||||
$material-color-green-100: #c8e6c9 !default;
|
||||
$material-color-green-200: #a5d6a7 !default;
|
||||
$material-color-green-300: #81c784 !default;
|
||||
$material-color-green-400: #66bb6a !default;
|
||||
$material-color-green-500: #4caf50 !default;
|
||||
$material-color-green-600: #43a047 !default;
|
||||
$material-color-green-700: #388e3c !default;
|
||||
$material-color-green-800: #2e7d32 !default;
|
||||
$material-color-green-900: #1b5e20 !default;
|
||||
$material-color-green-a100: #b9f6ca !default;
|
||||
$material-color-green-a200: #69f0ae !default;
|
||||
$material-color-green-a400: #00e676 !default;
|
||||
$material-color-green-a700: #00c853 !default;
|
||||
|
||||
$material-color-grey-050: #fafafa !default;
|
||||
$material-color-grey-100: #f5f5f5 !default;
|
||||
$material-color-grey-200: #eeeeee !default;
|
||||
$material-color-grey-300: #e0e0e0 !default;
|
||||
$material-color-grey-400: #bdbdbd !default;
|
||||
$material-color-grey-500: #9e9e9e !default;
|
||||
$material-color-grey-600: #757575 !default;
|
||||
$material-color-grey-700: #616161 !default;
|
||||
$material-color-grey-800: #424242 !default;
|
||||
$material-color-grey-900: #212121 !default;
|
||||
|
||||
$material-color-indigo-050: #e8eaf6 !default;
|
||||
$material-color-indigo-100: #c5cae9 !default;
|
||||
$material-color-indigo-200: #9fa8da !default;
|
||||
$material-color-indigo-300: #7986cb !default;
|
||||
$material-color-indigo-400: #5c6bc0 !default;
|
||||
$material-color-indigo-500: #3f51b5 !default;
|
||||
$material-color-indigo-600: #3949ab !default;
|
||||
$material-color-indigo-700: #303f9f !default;
|
||||
$material-color-indigo-800: #283593 !default;
|
||||
$material-color-indigo-900: #1a237e !default;
|
||||
$material-color-indigo-a100: #8c9eff !default;
|
||||
$material-color-indigo-a200: #536dfe !default;
|
||||
$material-color-indigo-a400: #3d5afe !default;
|
||||
$material-color-indigo-a700: #304ffe !default;
|
||||
|
||||
$material-color-light-blue-050: #e1f5fe !default;
|
||||
$material-color-light-blue-100: #b3e5fc !default;
|
||||
$material-color-light-blue-200: #81d4fa !default;
|
||||
$material-color-light-blue-300: #4fc3f7 !default;
|
||||
$material-color-light-blue-400: #29b6f6 !default;
|
||||
$material-color-light-blue-500: #03a9f4 !default;
|
||||
$material-color-light-blue-600: #039be5 !default;
|
||||
$material-color-light-blue-700: #0288d1 !default;
|
||||
$material-color-light-blue-800: #0277bd !default;
|
||||
$material-color-light-blue-900: #01579b !default;
|
||||
$material-color-light-blue-a100: #80d8ff !default;
|
||||
$material-color-light-blue-a200: #40c4ff !default;
|
||||
$material-color-light-blue-a400: #00b0ff !default;
|
||||
$material-color-light-blue-a700: #0091ea !default;
|
||||
|
||||
$material-color-light-green-050: #f1f8e9 !default;
|
||||
$material-color-light-green-100: #dcedc8 !default;
|
||||
$material-color-light-green-200: #c5e1a5 !default;
|
||||
$material-color-light-green-300: #aed581 !default;
|
||||
$material-color-light-green-400: #9ccc65 !default;
|
||||
$material-color-light-green-500: #8bc34a !default;
|
||||
$material-color-light-green-600: #7cb342 !default;
|
||||
$material-color-light-green-700: #689f38 !default;
|
||||
$material-color-light-green-800: #558b2f !default;
|
||||
$material-color-light-green-900: #33691e !default;
|
||||
$material-color-light-green-a100: #ccff90 !default;
|
||||
$material-color-light-green-a200: #b2ff59 !default;
|
||||
$material-color-light-green-a400: #76ff03 !default;
|
||||
$material-color-light-green-a700: #64dd17 !default;
|
||||
|
||||
$material-color-lime-050: #f9fbe7 !default;
|
||||
$material-color-lime-100: #f0f4c3 !default;
|
||||
$material-color-lime-200: #e6ee9c !default;
|
||||
$material-color-lime-300: #dce775 !default;
|
||||
$material-color-lime-400: #d4e157 !default;
|
||||
$material-color-lime-500: #cddc39 !default;
|
||||
$material-color-lime-600: #c0ca33 !default;
|
||||
$material-color-lime-700: #afb42b !default;
|
||||
$material-color-lime-800: #9e9d24 !default;
|
||||
$material-color-lime-900: #827717 !default;
|
||||
$material-color-lime-a100: #f4ff81 !default;
|
||||
$material-color-lime-a200: #eeff41 !default;
|
||||
$material-color-lime-a400: #c6ff00 !default;
|
||||
$material-color-lime-a700: #aeea00 !default;
|
||||
|
||||
$material-color-orange-050: #fff3e0 !default;
|
||||
$material-color-orange-100: #ffe0b2 !default;
|
||||
$material-color-orange-200: #ffcc80 !default;
|
||||
$material-color-orange-300: #ffb74d !default;
|
||||
$material-color-orange-400: #ffa726 !default;
|
||||
$material-color-orange-500: #ff9800 !default;
|
||||
$material-color-orange-600: #fb8c00 !default;
|
||||
$material-color-orange-700: #f57c00 !default;
|
||||
$material-color-orange-800: #ef6c00 !default;
|
||||
$material-color-orange-900: #e65100 !default;
|
||||
$material-color-orange-a100: #ffd180 !default;
|
||||
$material-color-orange-a200: #ffab40 !default;
|
||||
$material-color-orange-a400: #ff9100 !default;
|
||||
$material-color-orange-a700: #ff6d00 !default;
|
||||
|
||||
$material-color-pink-050: #fce4ec !default;
|
||||
$material-color-pink-100: #f8bbd0 !default;
|
||||
$material-color-pink-200: #f48fb1 !default;
|
||||
$material-color-pink-300: #f06292 !default;
|
||||
$material-color-pink-400: #ec407a !default;
|
||||
$material-color-pink-500: #e91e63 !default;
|
||||
$material-color-pink-600: #d81b60 !default;
|
||||
$material-color-pink-700: #c2185b !default;
|
||||
$material-color-pink-800: #ad1457 !default;
|
||||
$material-color-pink-900: #880e4f !default;
|
||||
$material-color-pink-a100: #ff80ab !default;
|
||||
$material-color-pink-a200: #ff4081 !default;
|
||||
$material-color-pink-a400: #f50057 !default;
|
||||
$material-color-pink-a700: #c51162 !default;
|
||||
|
||||
$material-color-purple-050: #f3e5f5 !default;
|
||||
$material-color-purple-100: #e1bee7 !default;
|
||||
$material-color-purple-200: #ce93d8 !default;
|
||||
$material-color-purple-300: #ba68c8 !default;
|
||||
$material-color-purple-400: #ab47bc !default;
|
||||
$material-color-purple-500: #9c27b0 !default;
|
||||
$material-color-purple-600: #8e24aa !default;
|
||||
$material-color-purple-700: #7b1fa2 !default;
|
||||
$material-color-purple-800: #6a1b9a !default;
|
||||
$material-color-purple-900: #4a148c !default;
|
||||
$material-color-purple-a100: #ea80fc !default;
|
||||
$material-color-purple-a200: #e040fb !default;
|
||||
$material-color-purple-a400: #d500f9 !default;
|
||||
$material-color-purple-a700: #aa00ff !default;
|
||||
|
||||
$material-color-red-050: #ffebee !default;
|
||||
$material-color-red-100: #ffcdd2 !default;
|
||||
$material-color-red-200: #ef9a9a !default;
|
||||
$material-color-red-300: #e57373 !default;
|
||||
$material-color-red-400: #ef5350 !default;
|
||||
$material-color-red-500: #f44336 !default;
|
||||
$material-color-red-600: #e53935 !default;
|
||||
$material-color-red-700: #d32f2f !default;
|
||||
$material-color-red-800: #c62828 !default;
|
||||
$material-color-red-900: #b71c1c !default;
|
||||
$material-color-red-a100: #ff8a80 !default;
|
||||
$material-color-red-a200: #ff5252 !default;
|
||||
$material-color-red-a400: #ff1744 !default;
|
||||
$material-color-red-a700: #d50000 !default;
|
||||
|
||||
$material-color-teal-050: #e0f2f1 !default;
|
||||
$material-color-teal-100: #b2dfdb !default;
|
||||
$material-color-teal-200: #80cbc4 !default;
|
||||
$material-color-teal-300: #4db6ac !default;
|
||||
$material-color-teal-400: #26a69a !default;
|
||||
$material-color-teal-500: #009688 !default;
|
||||
$material-color-teal-600: #00897b !default;
|
||||
$material-color-teal-700: #00796b !default;
|
||||
$material-color-teal-800: #00695c !default;
|
||||
$material-color-teal-900: #004d40 !default;
|
||||
$material-color-teal-a100: #a7ffeb !default;
|
||||
$material-color-teal-a200: #64ffda !default;
|
||||
$material-color-teal-a400: #1de9b6 !default;
|
||||
$material-color-teal-a700: #00bfa5 !default;
|
||||
|
||||
$material-color-yellow-050: #fffde7 !default;
|
||||
$material-color-yellow-100: #fff9c4 !default;
|
||||
$material-color-yellow-200: #fff59d !default;
|
||||
$material-color-yellow-300: #fff176 !default;
|
||||
$material-color-yellow-400: #ffee58 !default;
|
||||
$material-color-yellow-500: #ffeb3b !default;
|
||||
$material-color-yellow-600: #fdd835 !default;
|
||||
$material-color-yellow-700: #fbc02d !default;
|
||||
$material-color-yellow-800: #f9a825 !default;
|
||||
$material-color-yellow-900: #f57f17 !default;
|
||||
$material-color-yellow-a100: #ffff8d !default;
|
||||
$material-color-yellow-a200: #ffff00 !default;
|
||||
$material-color-yellow-a400: #ffea00 !default;
|
||||
$material-color-yellow-a700: #ffd600 !default;
|
||||
|
||||
// stylelint-disable scss/dollar-variable-default
|
||||
$ambers: () !default;
|
||||
$ambers: map-merge(
|
||||
(
|
||||
50: $material-color-amber-050,
|
||||
100: $material-color-amber-100,
|
||||
200: $material-color-amber-200,
|
||||
300: $material-color-amber-300,
|
||||
400: $material-color-amber-400,
|
||||
500: $material-color-amber-500,
|
||||
600: $material-color-amber-600,
|
||||
700: $material-color-amber-700,
|
||||
800: $material-color-amber-800,
|
||||
900: $material-color-amber-900,
|
||||
a100: $material-color-amber-a100,
|
||||
a200: $material-color-amber-a200,
|
||||
a400: $material-color-amber-a400,
|
||||
a700: $material-color-amber-a700
|
||||
),
|
||||
$ambers
|
||||
);
|
||||
|
||||
$blues: () !default;
|
||||
$blues: map-merge(
|
||||
(
|
||||
50: $material-color-blue-050,
|
||||
100: $material-color-blue-100,
|
||||
200: $material-color-blue-200,
|
||||
300: $material-color-blue-300,
|
||||
400: $material-color-blue-400,
|
||||
500: $material-color-blue-500,
|
||||
600: $material-color-blue-600,
|
||||
700: $material-color-blue-700,
|
||||
800: $material-color-blue-800,
|
||||
900: $material-color-blue-900,
|
||||
a100: $material-color-blue-a100,
|
||||
a200: $material-color-blue-a200,
|
||||
a400: $material-color-blue-a400,
|
||||
a700: $material-color-blue-a700
|
||||
),
|
||||
$blues
|
||||
);
|
||||
|
||||
$blue-greys: () !default;
|
||||
$blue-greys: map-merge(
|
||||
(
|
||||
50: $material-color-blue-grey-050,
|
||||
100: $material-color-blue-grey-100,
|
||||
200: $material-color-blue-grey-200,
|
||||
300: $material-color-blue-grey-300,
|
||||
400: $material-color-blue-grey-400,
|
||||
500: $material-color-blue-grey-500,
|
||||
600: $material-color-blue-grey-600,
|
||||
700: $material-color-blue-grey-700,
|
||||
800: $material-color-blue-grey-800,
|
||||
900: $material-color-blue-grey-900
|
||||
),
|
||||
$blue-greys
|
||||
);
|
||||
|
||||
$browns: () !default;
|
||||
$browns: map-merge(
|
||||
(
|
||||
50: $material-color-brown-050,
|
||||
100: $material-color-brown-100,
|
||||
200: $material-color-brown-200,
|
||||
300: $material-color-brown-300,
|
||||
400: $material-color-brown-400,
|
||||
500: $material-color-brown-500,
|
||||
600: $material-color-brown-600,
|
||||
700: $material-color-brown-700,
|
||||
800: $material-color-brown-800,
|
||||
900: $material-color-brown-900
|
||||
),
|
||||
$browns
|
||||
);
|
||||
|
||||
$cyans: () !default;
|
||||
$cyans: map-merge(
|
||||
(
|
||||
50: $material-color-cyan-050,
|
||||
100: $material-color-cyan-100,
|
||||
200: $material-color-cyan-200,
|
||||
300: $material-color-cyan-300,
|
||||
400: $material-color-cyan-400,
|
||||
500: $material-color-cyan-500,
|
||||
600: $material-color-cyan-600,
|
||||
700: $material-color-cyan-700,
|
||||
800: $material-color-cyan-800,
|
||||
900: $material-color-cyan-900,
|
||||
a100: $material-color-cyan-a100,
|
||||
a200: $material-color-cyan-a200,
|
||||
a400: $material-color-cyan-a400,
|
||||
a700: $material-color-cyan-a700
|
||||
),
|
||||
$cyans
|
||||
);
|
||||
|
||||
$deep-oranges: () !default;
|
||||
$deep-oranges: map-merge(
|
||||
(
|
||||
50: $material-color-deep-orange-050,
|
||||
100: $material-color-deep-orange-100,
|
||||
200: $material-color-deep-orange-200,
|
||||
300: $material-color-deep-orange-300,
|
||||
400: $material-color-deep-orange-400,
|
||||
500: $material-color-deep-orange-500,
|
||||
600: $material-color-deep-orange-600,
|
||||
700: $material-color-deep-orange-700,
|
||||
800: $material-color-deep-orange-800,
|
||||
900: $material-color-deep-orange-900,
|
||||
a100: $material-color-deep-orange-a100,
|
||||
a200: $material-color-deep-orange-a200,
|
||||
a400: $material-color-deep-orange-a400,
|
||||
a700: $material-color-deep-orange-a700
|
||||
),
|
||||
$deep-oranges
|
||||
);
|
||||
|
||||
$deep-purples: () !default;
|
||||
$deep-purples: map-merge(
|
||||
(
|
||||
50: $material-color-deep-purple-050,
|
||||
100: $material-color-deep-purple-100,
|
||||
200: $material-color-deep-purple-200,
|
||||
300: $material-color-deep-purple-300,
|
||||
400: $material-color-deep-purple-400,
|
||||
500: $material-color-deep-purple-500,
|
||||
600: $material-color-deep-purple-600,
|
||||
700: $material-color-deep-purple-700,
|
||||
800: $material-color-deep-purple-800,
|
||||
900: $material-color-deep-purple-900,
|
||||
a100: $material-color-deep-purple-a100,
|
||||
a200: $material-color-deep-purple-a200,
|
||||
a400: $material-color-deep-purple-a400,
|
||||
a700: $material-color-deep-purple-a700
|
||||
),
|
||||
$deep-purples
|
||||
);
|
||||
|
||||
$greens: () !default;
|
||||
$greens: map-merge(
|
||||
(
|
||||
50: $material-color-green-050,
|
||||
100: $material-color-green-100,
|
||||
200: $material-color-green-200,
|
||||
300: $material-color-green-300,
|
||||
400: $material-color-green-400,
|
||||
500: $material-color-green-500,
|
||||
600: $material-color-green-600,
|
||||
700: $material-color-green-700,
|
||||
800: $material-color-green-800,
|
||||
900: $material-color-green-900,
|
||||
a100: $material-color-green-a100,
|
||||
a200: $material-color-green-a200,
|
||||
a400: $material-color-green-a400,
|
||||
a700: $material-color-green-a700
|
||||
),
|
||||
$greens
|
||||
);
|
||||
|
||||
$greys: () !default;
|
||||
$greys: map-merge(
|
||||
(
|
||||
50: $material-color-grey-050,
|
||||
100: $material-color-grey-100,
|
||||
200: $material-color-grey-200,
|
||||
300: $material-color-grey-300,
|
||||
400: $material-color-grey-400,
|
||||
500: $material-color-grey-500,
|
||||
600: $material-color-grey-600,
|
||||
700: $material-color-grey-700,
|
||||
800: $material-color-grey-800,
|
||||
900: $material-color-grey-900
|
||||
),
|
||||
$greys
|
||||
);
|
||||
|
||||
$indigos: () !default;
|
||||
$indigos: map-merge(
|
||||
(
|
||||
50: $material-color-indigo-050,
|
||||
100: $material-color-indigo-100,
|
||||
200: $material-color-indigo-200,
|
||||
300: $material-color-indigo-300,
|
||||
400: $material-color-indigo-400,
|
||||
500: $material-color-indigo-500,
|
||||
600: $material-color-indigo-600,
|
||||
700: $material-color-indigo-700,
|
||||
800: $material-color-indigo-800,
|
||||
900: $material-color-indigo-900,
|
||||
a100: $material-color-indigo-a100,
|
||||
a200: $material-color-indigo-a200,
|
||||
a400: $material-color-indigo-a400,
|
||||
a700: $material-color-indigo-a700
|
||||
),
|
||||
$indigos
|
||||
);
|
||||
|
||||
$light-blues: () !default;
|
||||
$light-blues: map-merge(
|
||||
(
|
||||
50: $material-color-light-blue-050,
|
||||
100: $material-color-light-blue-100,
|
||||
200: $material-color-light-blue-200,
|
||||
300: $material-color-light-blue-300,
|
||||
400: $material-color-light-blue-400,
|
||||
500: $material-color-light-blue-500,
|
||||
600: $material-color-light-blue-600,
|
||||
700: $material-color-light-blue-700,
|
||||
800: $material-color-light-blue-800,
|
||||
900: $material-color-light-blue-900,
|
||||
a100: $material-color-light-blue-a100,
|
||||
a200: $material-color-light-blue-a200,
|
||||
a400: $material-color-light-blue-a400,
|
||||
a700: $material-color-light-blue-a700
|
||||
),
|
||||
$light-blues
|
||||
);
|
||||
|
||||
$light-greens: () !default;
|
||||
$light-greens: map-merge(
|
||||
(
|
||||
50: $material-color-light-green-050,
|
||||
100: $material-color-light-green-100,
|
||||
200: $material-color-light-green-200,
|
||||
300: $material-color-light-green-300,
|
||||
400: $material-color-light-green-400,
|
||||
500: $material-color-light-green-500,
|
||||
600: $material-color-light-green-600,
|
||||
700: $material-color-light-green-700,
|
||||
800: $material-color-light-green-800,
|
||||
900: $material-color-light-green-900,
|
||||
a100: $material-color-light-green-a100,
|
||||
a200: $material-color-light-green-a200,
|
||||
a400: $material-color-light-green-a400,
|
||||
a700: $material-color-light-green-a700
|
||||
),
|
||||
$light-greens
|
||||
);
|
||||
|
||||
$limes: () !default;
|
||||
$limes: map-merge(
|
||||
(
|
||||
50: $material-color-lime-050,
|
||||
100: $material-color-lime-100,
|
||||
200: $material-color-lime-200,
|
||||
300: $material-color-lime-300,
|
||||
400: $material-color-lime-400,
|
||||
500: $material-color-lime-500,
|
||||
600: $material-color-lime-600,
|
||||
700: $material-color-lime-700,
|
||||
800: $material-color-lime-800,
|
||||
900: $material-color-lime-900,
|
||||
a100: $material-color-lime-a100,
|
||||
a200: $material-color-lime-a200,
|
||||
a400: $material-color-lime-a400,
|
||||
a700: $material-color-lime-a700
|
||||
),
|
||||
$limes
|
||||
);
|
||||
|
||||
$oranges: () !default;
|
||||
$oranges: map-merge(
|
||||
(
|
||||
50: $material-color-orange-050,
|
||||
100: $material-color-orange-100,
|
||||
200: $material-color-orange-200,
|
||||
300: $material-color-orange-300,
|
||||
400: $material-color-orange-400,
|
||||
500: $material-color-orange-500,
|
||||
600: $material-color-orange-600,
|
||||
700: $material-color-orange-700,
|
||||
800: $material-color-orange-800,
|
||||
900: $material-color-orange-900,
|
||||
a100: $material-color-orange-a100,
|
||||
a200: $material-color-orange-a200,
|
||||
a400: $material-color-orange-a400,
|
||||
a700: $material-color-orange-a700
|
||||
),
|
||||
$oranges
|
||||
);
|
||||
|
||||
$pinks: () !default;
|
||||
$pinks: map-merge(
|
||||
(
|
||||
50: $material-color-pink-050,
|
||||
100: $material-color-pink-100,
|
||||
200: $material-color-pink-200,
|
||||
300: $material-color-pink-300,
|
||||
400: $material-color-pink-400,
|
||||
500: $material-color-pink-500,
|
||||
600: $material-color-pink-600,
|
||||
700: $material-color-pink-700,
|
||||
800: $material-color-pink-800,
|
||||
900: $material-color-pink-900,
|
||||
a100: $material-color-pink-a100,
|
||||
a200: $material-color-pink-a200,
|
||||
a400: $material-color-pink-a400,
|
||||
a700: $material-color-pink-a700
|
||||
),
|
||||
$pinks
|
||||
);
|
||||
|
||||
$purples: () !default;
|
||||
$purples: map-merge(
|
||||
(
|
||||
50: $material-color-purple-050,
|
||||
100: $material-color-purple-100,
|
||||
200: $material-color-purple-200,
|
||||
300: $material-color-purple-300,
|
||||
400: $material-color-purple-400,
|
||||
500: $material-color-purple-500,
|
||||
600: $material-color-purple-600,
|
||||
700: $material-color-purple-700,
|
||||
800: $material-color-purple-800,
|
||||
900: $material-color-purple-900,
|
||||
a100: $material-color-purple-a100,
|
||||
a200: $material-color-purple-a200,
|
||||
a400: $material-color-purple-a400,
|
||||
a700: $material-color-purple-a700
|
||||
),
|
||||
$purples
|
||||
);
|
||||
|
||||
$reds: () !default;
|
||||
$reds: map-merge(
|
||||
(
|
||||
50: $material-color-red-050,
|
||||
100: $material-color-red-100,
|
||||
200: $material-color-red-200,
|
||||
300: $material-color-red-300,
|
||||
400: $material-color-red-400,
|
||||
500: $material-color-red-500,
|
||||
600: $material-color-red-600,
|
||||
700: $material-color-red-700,
|
||||
800: $material-color-red-800,
|
||||
900: $material-color-red-900,
|
||||
a100: $material-color-red-a100,
|
||||
a200: $material-color-red-a200,
|
||||
a400: $material-color-red-a400,
|
||||
a700: $material-color-red-a700
|
||||
),
|
||||
$reds
|
||||
);
|
||||
|
||||
$teals: () !default;
|
||||
$teals: map-merge(
|
||||
(
|
||||
50: $material-color-teal-050,
|
||||
100: $material-color-teal-100,
|
||||
200: $material-color-teal-200,
|
||||
300: $material-color-teal-300,
|
||||
400: $material-color-teal-400,
|
||||
500: $material-color-teal-500,
|
||||
600: $material-color-teal-600,
|
||||
700: $material-color-teal-700,
|
||||
800: $material-color-teal-800,
|
||||
900: $material-color-teal-900,
|
||||
a100: $material-color-teal-a100,
|
||||
a200: $material-color-teal-a200,
|
||||
a400: $material-color-teal-a400,
|
||||
a700: $material-color-teal-a700
|
||||
),
|
||||
$teals
|
||||
);
|
||||
|
||||
$yellows: () !default;
|
||||
$yellows: map-merge(
|
||||
(
|
||||
50: $material-color-yellow-050,
|
||||
100: $material-color-yellow-100,
|
||||
200: $material-color-yellow-200,
|
||||
300: $material-color-yellow-300,
|
||||
400: $material-color-yellow-400,
|
||||
500: $material-color-yellow-500,
|
||||
600: $material-color-yellow-600,
|
||||
700: $material-color-yellow-700,
|
||||
800: $material-color-yellow-800,
|
||||
900: $material-color-yellow-900,
|
||||
a100: $material-color-yellow-a100,
|
||||
a200: $material-color-yellow-a200,
|
||||
a400: $material-color-yellow-a400,
|
||||
a700: $material-color-yellow-a700
|
||||
),
|
||||
$yellows
|
||||
);
|
||||
|
||||
$colors: () !default;
|
||||
$colors: map-merge(
|
||||
(
|
||||
'amber': $material-color-amber-500,
|
||||
'blue': $material-color-blue-500,
|
||||
'blue-grey': $material-color-blue-grey-500,
|
||||
'brown': $material-color-brown-500,
|
||||
'cyan': $material-color-cyan-500,
|
||||
'deep-orange': $material-color-deep-orange-500,
|
||||
'deep-purple': $material-color-deep-purple-500,
|
||||
'green': $material-color-green-500,
|
||||
'grey': $material-color-grey-500,
|
||||
'indigo': $material-color-indigo-500,
|
||||
'light-blue': $material-color-light-blue-500,
|
||||
'light-green': $material-color-light-green-500,
|
||||
'lime': $material-color-lime-500,
|
||||
'orange': $material-color-orange-500,
|
||||
'pink': $material-color-pink-500,
|
||||
'purple': $material-color-purple-500,
|
||||
'red': $material-color-red-500,
|
||||
'teal': $material-color-teal-500,
|
||||
'yellow': $material-color-yellow-500
|
||||
),
|
||||
$colors
|
||||
);
|
||||
// stylelint-enable
|
||||
|
||||
// Black and white
|
||||
// Based on https://material.google.com/style/color.html#color-text-background-colors
|
||||
|
||||
$black: #000000 !default;
|
||||
|
||||
$black-primary-opacity: 0.87 !default;
|
||||
$black-secondary-opacity: 0.65 !default;
|
||||
$black-hint-opacity: 0.5 !default;
|
||||
$black-divider-opacity: 0.12 !default;
|
||||
|
||||
$black-primary: rgba(red($black), green($black), blue($black), $black-primary-opacity) !default;
|
||||
$black-secondary: rgba(red($black), green($black), blue($black), $black-secondary-opacity) !default;
|
||||
$black-hint: rgba(red($black), green($black), blue($black), $black-hint-opacity) !default;
|
||||
$black-divider: rgba(red($black), green($black), blue($black), $black-divider-opacity) !default;
|
||||
|
||||
$white: #ffffff !default;
|
||||
|
||||
$white-primary-opacity: 1 !default;
|
||||
$white-secondary-opacity: 0.7 !default;
|
||||
$white-hint-opacity: 0.5 !default;
|
||||
$white-divider-opacity: 0.12 !default;
|
||||
|
||||
$white-primary: rgba(red($white), green($white), blue($white), $white-primary-opacity) !default;
|
||||
$white-secondary: rgba(red($white), green($white), blue($white), $white-secondary-opacity) !default;
|
||||
$white-hint: rgba(red($white), green($white), blue($white), $white-hint-opacity) !default;
|
||||
$white-divider: rgba(red($white), green($white), blue($white), $white-divider-opacity) !default;
|
||||
|
||||
// Theme
|
||||
// Based on https://material.google.com/style/color.html#color-themes
|
||||
|
||||
$dark-theme-1: #22252f !default;
|
||||
$dark-theme-2: #242731;
|
||||
$dark-theme-3: #2D2F39 !default;
|
||||
$dark-theme-4: #3a3c43;
|
||||
|
||||
$light-theme-1: #edecec !default;
|
||||
$light-theme-2: #f7f7f7 !default;
|
||||
$light-theme-3: $material-color-grey-050 !default;
|
||||
$light-theme-4: #ffffff !default;
|
||||
|
|
@ -1,84 +0,0 @@
|
|||
@import 'colors';
|
||||
@import 'functions';
|
||||
@import 'mixins';
|
||||
|
||||
// Sass option
|
||||
$enable-grid-classes: true !default;
|
||||
$enable-print-styles: true !default;
|
||||
|
||||
// Variables
|
||||
@import 'variables/elevation-shadow';
|
||||
@import 'variables/grid';
|
||||
@import 'variables/palette';
|
||||
@import 'variables/spacer';
|
||||
@import 'variables/transition';
|
||||
@import 'variables/typography';
|
||||
@import 'variables/variable-bootstrap';
|
||||
@import 'variables/variable-material';
|
||||
|
||||
@import 'azuracast/variables';
|
||||
|
||||
// Base CSS
|
||||
@import 'base/base-colors';
|
||||
@import 'base/typography-colors';
|
||||
|
||||
// Bootstrap components
|
||||
// Components covered in Bootstrap's css but not in Material design
|
||||
@import 'bootstrap/alert-colors';
|
||||
@import 'bootstrap/badge-colors';
|
||||
@import 'bootstrap/breadcrumb-colors';
|
||||
@import 'bootstrap/close-colors';
|
||||
@import 'bootstrap/code-colors';
|
||||
@import 'bootstrap/form-colors';
|
||||
@import 'bootstrap/image-colors';
|
||||
@import 'bootstrap/nav-colors';
|
||||
@import 'bootstrap/pagination-colors';
|
||||
@import 'bootstrap/popover-colors';
|
||||
|
||||
// Material components
|
||||
// Components covered in Material design (https://material.google.com/components)
|
||||
@import 'material/button-colors';
|
||||
@import 'material/button-flat-colors';
|
||||
@import 'material/button-group-colors';
|
||||
@import 'material/card-colors';
|
||||
@import 'material/chip-colors';
|
||||
@import 'material/data-table-colors';
|
||||
@import 'material/dialog-colors';
|
||||
@import 'material/expansion-panel-colors';
|
||||
@import 'material/menu-colors';
|
||||
@import 'material/navdrawer-colors';
|
||||
@import 'material/picker-colors';
|
||||
@import 'material/progress-colors';
|
||||
@import 'material/progress-circular-colors';
|
||||
@import 'material/selection-control-colors';
|
||||
@import 'material/slider-colors';
|
||||
@import 'material/snackbar-colors';
|
||||
@import 'material/stepper-colors';
|
||||
@import 'material/tab-colors';
|
||||
@import 'material/text-field-colors';
|
||||
@import 'material/text-field-box-colors';
|
||||
@import 'material/text-field-floating-label-colors';
|
||||
@import 'material/text-field-input-group-colors';
|
||||
@import 'material/toolbar-colors';
|
||||
@import 'material/tooltip-colors';
|
||||
|
||||
// Utilities
|
||||
@import 'utilities/border-colors';
|
||||
@import 'utilities/background-colors';
|
||||
@import 'utilities/text-colors';
|
||||
|
||||
// Overrides for specific third-party products
|
||||
@import 'vendors/bootgrid-colors';
|
||||
@import 'vendors/daterangepicker-colors';
|
||||
@import 'vendors/fullcalendar-colors';
|
||||
@import 'vendors/waveform-colors';
|
||||
@import 'vendors/sweetalert2-colors';
|
||||
|
||||
// Overrides for the Daemonite Material theme
|
||||
@import 'azuracast/overrides/body-colors';
|
||||
@import 'azuracast/overrides/forms-colors';
|
||||
@import 'azuracast/overrides/file-uploads-colors';
|
||||
|
||||
// Individual AzuraCast pages
|
||||
@import 'azuracast/pages/embed-colors';
|
||||
@import 'azuracast/pages/public-colors';
|
||||
|
|
@ -1,112 +0,0 @@
|
|||
@import 'colors';
|
||||
@import 'functions';
|
||||
@import 'mixins';
|
||||
|
||||
// Sass option
|
||||
$enable-grid-classes: true !default;
|
||||
$enable-print-styles: true !default;
|
||||
|
||||
// Variables
|
||||
@import 'variables/elevation-shadow';
|
||||
@import 'variables/grid';
|
||||
@import 'variables/palette';
|
||||
@import 'variables/spacer';
|
||||
@import 'variables/transition';
|
||||
@import 'variables/typography';
|
||||
@import 'variables/variable-bootstrap';
|
||||
@import 'variables/variable-material';
|
||||
|
||||
@import 'azuracast/variables';
|
||||
|
||||
// Base CSS
|
||||
@import 'base/base';
|
||||
@import 'base/grid';
|
||||
@import 'base/typography';
|
||||
|
||||
// Bootstrap components
|
||||
// Components covered in Bootstrap's css but not in Material design
|
||||
@import 'bootstrap/alert';
|
||||
@import 'bootstrap/badge';
|
||||
@import 'bootstrap/breadcrumb';
|
||||
@import 'bootstrap/close';
|
||||
@import 'bootstrap/code';
|
||||
@import 'bootstrap/form';
|
||||
@import 'bootstrap/image';
|
||||
@import 'bootstrap/media';
|
||||
@import 'bootstrap/nav';
|
||||
@import 'bootstrap/pagination';
|
||||
@import 'bootstrap/popover';
|
||||
@import 'bootstrap/responsive-embed';
|
||||
@import 'bootstrap/spinner';
|
||||
@import 'bootstrap/transition';
|
||||
@import 'bootstrap/toasts';
|
||||
|
||||
// Material components
|
||||
// Components covered in Material design (https://material.google.com/components)
|
||||
@import 'material/button';
|
||||
@import 'material/button-flat';
|
||||
@import 'material/button-float';
|
||||
@import 'material/button-group';
|
||||
@import 'material/card';
|
||||
@import 'material/chip';
|
||||
@import 'material/data-table';
|
||||
@import 'material/dialog';
|
||||
@import 'material/expansion-panel';
|
||||
@import 'material/menu';
|
||||
@import 'material/navdrawer';
|
||||
@import 'material/picker';
|
||||
@import 'material/progress';
|
||||
@import 'material/progress-circular';
|
||||
@import 'material/selection-control';
|
||||
@import 'material/slider';
|
||||
@import 'material/snackbar';
|
||||
@import 'material/stepper';
|
||||
@import 'material/tab';
|
||||
@import 'material/text-field';
|
||||
@import 'material/text-field-box';
|
||||
@import 'material/text-field-floating-label';
|
||||
@import 'material/text-field-input-group';
|
||||
@import 'material/toolbar';
|
||||
@import 'material/tooltip';
|
||||
|
||||
// Utilities
|
||||
@import 'utilities/align';
|
||||
@import 'utilities/border';
|
||||
@import 'utilities/clearfix';
|
||||
@import 'utilities/display';
|
||||
@import 'utilities/flex';
|
||||
@import 'utilities/float';
|
||||
@import 'utilities/position';
|
||||
@import 'utilities/screenreader';
|
||||
@import 'utilities/shadows';
|
||||
@import 'utilities/sizing';
|
||||
@import 'utilities/spacing';
|
||||
@import 'utilities/text';
|
||||
@import 'utilities/visibility';
|
||||
@import 'utilities/material-icons';
|
||||
|
||||
// Very basic print styles
|
||||
@import 'print';
|
||||
|
||||
// Overrides for specific third-party products
|
||||
@import 'vendors/fullcalendar';
|
||||
|
||||
// Overrides for the Daemonite Material theme
|
||||
@import 'azuracast/overrides/body';
|
||||
@import 'azuracast/overrides/buttons';
|
||||
@import 'azuracast/overrides/card';
|
||||
@import 'azuracast/overrides/footer';
|
||||
@import 'azuracast/overrides/forms';
|
||||
@import 'azuracast/overrides/header';
|
||||
@import 'azuracast/overrides/modal';
|
||||
@import 'azuracast/overrides/material-icons';
|
||||
@import 'azuracast/overrides/progressbar';
|
||||
@import 'azuracast/overrides/stepper';
|
||||
@import 'azuracast/overrides/tables';
|
||||
@import 'azuracast/overrides/toasts';
|
||||
|
||||
// Individual AzuraCast pages
|
||||
@import 'azuracast/pages/search';
|
||||
@import 'azuracast/pages/embed';
|
||||
@import 'azuracast/pages/public';
|
||||
@import 'azuracast/pages/log_viewer';
|
||||
|
|
@ -1,79 +0,0 @@
|
|||
@use "sass:math";
|
||||
|
||||
@mixin _assert-ascending($map, $map-name) {
|
||||
$prev-key: null;
|
||||
$prev-num: null;
|
||||
|
||||
@each $key, $num in $map {
|
||||
@if $prev-num == null {
|
||||
// Do nothing
|
||||
} @else if not comparable($num, $prev-num) {
|
||||
@warn 'Potentially invalid value for #{$map-name}: This map must be in ascending order, but key "#{$key}" has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key "#{$prev-key}"!';
|
||||
} @else if $num <= $prev-num {
|
||||
@warn 'Invalid value for #{$map-name}: This map must be in ascending order, but key "#{$key}" has value #{$num} which is not greater than #{$prev-num}, the value of the previous key "#{$prev-key}"!';
|
||||
}
|
||||
|
||||
$prev-key: $key;
|
||||
$prev-num: $num;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin _assert-starts-at-zero($map) {
|
||||
$first-value: nth(map-values($map), 1);
|
||||
|
||||
@if $first-value != 0 {
|
||||
@warn 'First breakpoint in `$grid-breakpoints` must start at 0, but starts at #{$first-value}.';
|
||||
}
|
||||
}
|
||||
|
||||
// Colour contrast
|
||||
|
||||
@function color-yiq($color) {
|
||||
$r: red($color);
|
||||
$g: green($color);
|
||||
$b: blue($color);
|
||||
|
||||
$yiq: (($r * 299) + ($g * 587) + ($b * 114)) * 0.001;
|
||||
|
||||
@if ($yiq >= $yiq-contrasted-threshold) {
|
||||
@return $yiq-text-dark;
|
||||
} @else {
|
||||
@return $yiq-text-light;
|
||||
}
|
||||
}
|
||||
|
||||
// Replace `$key` with `$replace` in `$content`
|
||||
|
||||
@function str-replace($content, $key, $replace: '') {
|
||||
$index: str-index($content, $key);
|
||||
|
||||
@if $index {
|
||||
@return str-slice($content, 1, $index - 1) + $replace + str-replace(str-slice($content, $index + str-length($key)), $key, $replace);
|
||||
} @else {
|
||||
@return $content;
|
||||
}
|
||||
}
|
||||
|
||||
// Retrieve a colour
|
||||
|
||||
@function color($key: amber) {
|
||||
@return map-get($colors, $key);
|
||||
}
|
||||
|
||||
@function theme-color($key: primary) {
|
||||
@return map-get(map-get($theme-colors, $key), color);
|
||||
}
|
||||
|
||||
@function theme-color-dark($key: primary) {
|
||||
@return map-get(map-get($theme-colors, $key), dark);
|
||||
}
|
||||
|
||||
@function theme-color-light($key: primary) {
|
||||
@return map-get(map-get($theme-colors, $key), light);
|
||||
}
|
||||
|
||||
// Strip unit
|
||||
|
||||
@function strip-unit($val) {
|
||||
@return math.div($val, $val * 0 + 1);
|
||||
}
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
@import 'mixins/background-variant';
|
||||
@import 'mixins/border-radius';
|
||||
@import 'mixins/breakpoint';
|
||||
@import 'mixins/clearfix';
|
||||
@import 'mixins/float';
|
||||
@import 'mixins/font-size';
|
||||
@import 'mixins/form';
|
||||
@import 'mixins/grid';
|
||||
@import 'mixins/grid-framework';
|
||||
@import 'mixins/hover';
|
||||
@import 'mixins/image';
|
||||
@import 'mixins/list';
|
||||
@import 'mixins/material-icons';
|
||||
@import 'mixins/nav-divider';
|
||||
@import 'mixins/reset-text';
|
||||
@import 'mixins/screenreader';
|
||||
@import 'mixins/text-alignment';
|
||||
@import 'mixins/text-emphasis';
|
||||
@import 'mixins/text-hide';
|
||||
@import 'mixins/text-truncate';
|
||||
@import 'mixins/transition';
|
||||
@import 'mixins/typography';
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
// Load Oruga UI
|
||||
@import '@oruga-ui/theme-bootstrap/dist/scss/components/utils/_all.scss';
|
||||
|
||||
// @import '@oruga-ui/theme-bootstrap/dist/scss/components/_autocomplete.scss';
|
||||
// @import '@oruga-ui/theme-bootstrap/dist/scss/components/_button.scss';
|
||||
// @import '@oruga-ui/theme-bootstrap/dist/scss/components/_checkbox.scss';
|
||||
// @import '@oruga-ui/theme-bootstrap/dist/scss/components/_collapse.scss';
|
||||
@import '@oruga-ui/theme-bootstrap/dist/scss/components/_datepicker.scss';
|
||||
// @import '@oruga-ui/theme-bootstrap/dist/scss/components/_dropdown.scss';
|
||||
// @import '@oruga-ui/theme-bootstrap/dist/scss/components/_form.scss';
|
||||
// @import '@oruga-ui/theme-bootstrap/dist/scss/components/_field.scss';
|
||||
// @import '@oruga-ui/theme-bootstrap/dist/scss/components/_icon.scss';
|
||||
// @import '@oruga-ui/theme-bootstrap/dist/scss/components/_loading.scss';
|
||||
@import '@oruga-ui/theme-bootstrap/dist/scss/components/_modal.scss';
|
||||
@import '@oruga-ui/theme-bootstrap/dist/scss/components/_notification.scss';
|
||||
// @import '@oruga-ui/theme-bootstrap/dist/scss/components/_pagination.scss';
|
||||
// @import '@oruga-ui/theme-bootstrap/dist/scss/components/_radio.scss';
|
||||
// @import '@oruga-ui/theme-bootstrap/dist/scss/components/_select.scss';
|
||||
// @import '@oruga-ui/theme-bootstrap/dist/scss/components/_sidebar.scss';
|
||||
// @import '@oruga-ui/theme-bootstrap/dist/scss/components/_skeleton.scss';
|
||||
// @import '@oruga-ui/theme-bootstrap/dist/scss/components/_slider.scss';
|
||||
// @import '@oruga-ui/theme-bootstrap/dist/scss/components/_steps.scss';
|
||||
// @import '@oruga-ui/theme-bootstrap/dist/scss/components/_switch.scss';
|
||||
// @import '@oruga-ui/theme-bootstrap/dist/scss/components/_tab.scss';
|
||||
@import '@oruga-ui/theme-bootstrap/dist/scss/components/_table.scss';
|
||||
// @import '@oruga-ui/theme-bootstrap/dist/scss/components/_taginput.scss';
|
||||
@import '@oruga-ui/theme-bootstrap/dist/scss/components/_timepicker.scss';
|
||||
// @import '@oruga-ui/theme-bootstrap/dist/scss/components/_tooltip.scss';
|
||||
@import '@oruga-ui/theme-bootstrap/dist/scss/components/_upload.scss';
|
||||
|
||||
.table-component {
|
||||
.table-wrapper {
|
||||
.table {
|
||||
th {
|
||||
&.is-current-sort {
|
||||
background-color: var(--bs-tertiary-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loading {
|
||||
&__overlay {
|
||||
background-color: rgba(var(--bs-body-bg-rgb), .5)
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker {
|
||||
.datepicker-table {
|
||||
.datepicker-body {
|
||||
.datepicker-row {
|
||||
.datepicker-cell {
|
||||
color: var(--bs-body-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.timepicker {
|
||||
.dropdown-item:hover {
|
||||
background-color: var(--bs-dropdown-link-hover-bg);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,138 +0,0 @@
|
|||
// stylelint-disable declaration-no-important
|
||||
|
||||
@if $enable-print-styles {
|
||||
@media print {
|
||||
@page {
|
||||
size: $print-page-size;
|
||||
}
|
||||
|
||||
*,
|
||||
*::after,
|
||||
*::before {
|
||||
box-shadow: none !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
a:not(.btn) {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
// stylelint-disable-next-line selector-no-qualifying-type
|
||||
abbr[title]::after {
|
||||
content: ' (" attr(title) ") ';
|
||||
}
|
||||
|
||||
blockquote {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
body {
|
||||
min-width: $print-body-min-width !important;
|
||||
}
|
||||
|
||||
h2,
|
||||
h3,
|
||||
p {
|
||||
orphans: 3;
|
||||
widows: 3;
|
||||
}
|
||||
|
||||
h2,
|
||||
h3 {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
img {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
pre {
|
||||
page-break-inside: avoid;
|
||||
white-space: pre-wrap !important;
|
||||
}
|
||||
|
||||
thead {
|
||||
display: table-header-group;
|
||||
}
|
||||
|
||||
tr {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
.card {
|
||||
border: $border-width solid $border-color-solid;
|
||||
}
|
||||
|
||||
.container {
|
||||
min-width: $print-body-min-width !important;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
border: $border-width solid $border-color-solid;
|
||||
}
|
||||
|
||||
.list-group-item {
|
||||
border: $border-width solid $border-color-solid;
|
||||
margin-bottom: ($border-width * -1);
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.list-group-flush {
|
||||
&:first-child .list-group-item:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
&:last-child .list-group-item:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.list-group-item {
|
||||
border-right: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
border-bottom: $border-width solid $border-color-solid;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.popover {
|
||||
border: $border-width solid $border-color-solid;
|
||||
}
|
||||
|
||||
.table {
|
||||
td,
|
||||
th {
|
||||
background-color: $white !important;
|
||||
}
|
||||
}
|
||||
|
||||
.table-bordered {
|
||||
border: $border-width solid $border-color-solid;
|
||||
}
|
||||
|
||||
.table-dark {
|
||||
color: inherit;
|
||||
|
||||
td,
|
||||
th,
|
||||
.table {
|
||||
border-color: $border-color-solid;
|
||||
}
|
||||
}
|
||||
|
||||
.table .thead-dark {
|
||||
td,
|
||||
th {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
@function color-contrast($background, $color-contrast-dark: $color-contrast-dark, $color-contrast-light: $color-contrast-light, $min-contrast-ratio: $min-contrast-ratio) {
|
||||
$foregrounds: $color-contrast-light, $color-contrast-dark, $white, $black;
|
||||
$max-ratio: 0;
|
||||
$max-ratio-color: null;
|
||||
|
||||
@if $background == $primary {
|
||||
@return $white;
|
||||
}
|
||||
|
||||
@each $color in $foregrounds {
|
||||
$contrast-ratio: contrast-ratio($background, $color);
|
||||
@if $contrast-ratio > $min-contrast-ratio {
|
||||
@return $color;
|
||||
} @else if $contrast-ratio > $max-ratio {
|
||||
$max-ratio: $contrast-ratio;
|
||||
$max-ratio-color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
@warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$background}...";
|
||||
|
||||
@return $max-ratio-color;
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
:root,
|
||||
[data-bs-theme="light"] {
|
||||
--public-page-bg: url('../img/hexbg.webp');
|
||||
--scrollbar-color: #{$gray-400};
|
||||
}
|
||||
|
||||
[data-bs-theme="light"] {
|
||||
--bs-body-bg: rgb(252, 252, 252);
|
||||
}
|
||||
|
||||
@include color-mode(dark, true) {
|
||||
--public-page-bg: url('../img/hexbg_dark.webp');
|
||||
--scrollbar-color: #{$gray-800};
|
||||
}
|
||||
|
|
@ -1,4 +1,50 @@
|
|||
// Default background of public pages
|
||||
$public-page-bg: if($theme == 'light', '../img/hexbg.webp', '../img/hexbg_dark.webp');
|
||||
$primary: #1e88e5;
|
||||
|
||||
$scrollbar-color: if($theme == 'light', $material-color-grey-400, $material-color-grey-800);
|
||||
$body-bg-dark: #22252f;
|
||||
|
||||
$card-cap-padding-y: 1rem;
|
||||
|
||||
$font-family-sans-serif: "Roboto", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
$font-size-root: 14px;
|
||||
|
||||
$link-decoration: none;
|
||||
|
||||
$header-nav-height: 5.15rem;
|
||||
|
||||
$navbar-light-brand-color: #FFF;
|
||||
$navbar-dark-brand-color: #FFF;
|
||||
|
||||
$navbar-light-color: #FFF;
|
||||
$navbar-dark-color: #FFF;
|
||||
|
||||
$navbar-light-brand-hover-color: $navbar-light-color;
|
||||
$navbar-dark-brand-hover-color: $navbar-dark-color;
|
||||
|
||||
$list-group-item-padding-y: 1rem;
|
||||
|
||||
$dropdown-item-padding-y: .75rem;
|
||||
|
||||
$input-btn-padding-y: .75rem;
|
||||
$input-btn-padding-x: .5rem;
|
||||
|
||||
$btn-font-size: 1rem;
|
||||
$btn-sm-font-size: .9rem;
|
||||
|
||||
$btn-padding-x: .75rem;
|
||||
|
||||
$card-border-width: 0;
|
||||
$card-cap-padding-y: 1.1rem;
|
||||
$card-cap-padding-x: 1.1rem;
|
||||
|
||||
$badge-padding-x: 0.75rem;
|
||||
$badge-padding-y: 0.45rem;
|
||||
$badge-font-size: 0.9rem;
|
||||
$badge-font-weight: normal;
|
||||
|
||||
$table-border-width: 0;
|
||||
|
||||
$modal-border-width: 0;
|
||||
|
||||
$progress-bar-bg: #3f51b5;
|
||||
|
||||
$enable-grid-classes: true;
|
||||
|
|
|
|||
|
|
@ -1,11 +0,0 @@
|
|||
::-webkit-scrollbar-track {
|
||||
background: $body-bg;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: $scrollbar-color;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner {
|
||||
background: $body-bg;
|
||||
}
|
||||
|
|
@ -2,20 +2,16 @@ body {
|
|||
position: relative;
|
||||
|
||||
#main {
|
||||
padding-bottom: 75px;
|
||||
padding-top: 100px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
padding-bottom: 4rem;
|
||||
padding-top: ($header-nav-height + ($container-padding-x * .5));
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
&.has-sidebar #main {
|
||||
margin-left: $navdrawer-width;
|
||||
}
|
||||
min-height: 100vh;
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
background: var(--bs-body-bg);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
|
|
@ -26,8 +22,10 @@ body {
|
|||
::-webkit-scrollbar-thumb {
|
||||
margin: 2px 0;
|
||||
border-radius: 10px;
|
||||
background: var(--scrollbar-color);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner {
|
||||
border: 0;
|
||||
background: var(--bs-body-bg);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,29 +1,66 @@
|
|||
.btn > .material-icons {
|
||||
margin-right: calc($btn-padding-x / 2);
|
||||
}
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
.btn-lg > .material-icons {
|
||||
margin-right: calc($btn-padding-x-lg / 2);
|
||||
}
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
|
||||
.btn-sm > .material-icons {
|
||||
margin-right: calc($btn-padding-x-sm / 2);
|
||||
}
|
||||
& > .material-icons {
|
||||
font-size: 1.5rem;
|
||||
margin-right: calc($btn-padding-x / 2);
|
||||
|
||||
.btn,
|
||||
.btn-lg,
|
||||
.btn-sm {
|
||||
.material-icons:only-child {
|
||||
margin-right: 0;
|
||||
+ span {
|
||||
padding-right: 0.15rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-xl > .material-icons {
|
||||
font-size: 2.75rem;
|
||||
margin-right: calc($btn-padding-x-lg / 2);
|
||||
}
|
||||
|
||||
&.btn-lg > .material-icons {
|
||||
font-size: 1.75rem;
|
||||
margin-right: calc($btn-padding-x-lg / 2);
|
||||
}
|
||||
|
||||
&.btn-sm > .material-icons {
|
||||
font-size: 1rem;
|
||||
margin-right: calc($btn-padding-x-sm / 2);
|
||||
}
|
||||
|
||||
&,
|
||||
&.btn-lg,
|
||||
&.btn-sm {
|
||||
.material-icons:only-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-sm {
|
||||
font-size: $btn-sm-font-size;
|
||||
}
|
||||
|
||||
&.btn-link {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
& > * {
|
||||
margin-right: .5rem;
|
||||
margin-right: .75rem;
|
||||
}
|
||||
|
||||
& > *:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.block-buttons {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
|
||||
.btn {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,59 @@
|
|||
.outside-card-header {
|
||||
&:first-child {
|
||||
padding-top: 0;
|
||||
h1, h2, h3, h4 {
|
||||
@include font-size($h2-font-size);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
padding: $card-padding-y $card-padding-x;
|
||||
margin-bottom: $card-inner-spacer-y;
|
||||
padding: $card-spacer-y $card-spacer-x;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.card {
|
||||
box-shadow: 0 0 4px 0 rgba(0, 0, 0, .14), 0 3px 4px 0 rgba(0, 0, 0, .12), 0 1px 5px 0 rgba(0, 0, 0, .2);
|
||||
|
||||
.card-title {
|
||||
@include font-size($h4-font-size);
|
||||
font-weight: 400;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.card-subtitle {
|
||||
@include font-size($h5-font-size);
|
||||
font-weight: normal;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.alert {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.card-header,
|
||||
.alert {
|
||||
&:first-child {
|
||||
border-top-left-radius: var(--bs-card-border-radius);
|
||||
border-top-right-radius: var(--bs-card-border-radius);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom-left-radius: var(--bs-card-border-radius);
|
||||
border-bottom-right-radius: var(--bs-card-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
.card-body-flush {
|
||||
margin: (0-$card-cap-padding-y) (0-$card-cap-padding-x);
|
||||
}
|
||||
|
||||
nav.nav-tabs {
|
||||
background: var(--bs-tertiary-bg);
|
||||
|
||||
margin: (0-$card-cap-padding-y) (0-$card-cap-padding-x) 0 (0-$card-cap-padding-x);
|
||||
padding: $card-cap-padding-y $card-cap-padding-x 0 $card-cap-padding-x;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.row-of-cards {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
.dropdown-menu {
|
||||
border: none;
|
||||
box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.3);
|
||||
|
||||
.form-check {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
div.flow-upload {
|
||||
div.file-drop-target {
|
||||
border: 4px dashed $theme-color-3;
|
||||
border: 4px dashed var(--bs-secondary-bg);
|
||||
color: #5e5e5e;
|
||||
|
||||
&.drag_over {
|
||||
border: 4px dashed $theme-color-4;
|
||||
border: 4px dashed var(--bs-tertiary-color);
|
||||
color: $text-muted;
|
||||
}
|
||||
}
|
||||
|
|
@ -5,14 +5,7 @@
|
|||
right: 0;
|
||||
bottom: 0;
|
||||
text-align: center;
|
||||
height: 75px;
|
||||
height: 50px;
|
||||
|
||||
padding-top: 20px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
body.has-sidebar #footer {
|
||||
left: $navdrawer-width;
|
||||
}
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,56 +0,0 @@
|
|||
select.form-control, select.custom-select {
|
||||
option, optgroup {
|
||||
background: $menu-bg;
|
||||
}
|
||||
|
||||
&[multiple] {
|
||||
option:checked, optgroup:checked {
|
||||
background: theme-color-dark(primary);
|
||||
color: theme-color-light(light);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form {
|
||||
fieldset {
|
||||
div.fieldset-legend,
|
||||
legend.col-form-label {
|
||||
border-color: theme-color-dark(primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-group {
|
||||
&.has-error {
|
||||
.form-text {
|
||||
color: theme-color(danger);
|
||||
}
|
||||
|
||||
.form-control {
|
||||
border-color: theme-color(danger);
|
||||
box-shadow: inset 0 ($textfield-border-width-hover * -1) 0 ($textfield-border-width * -1) theme-color(danger);
|
||||
}
|
||||
}
|
||||
|
||||
&.has-warning {
|
||||
.form-text {
|
||||
color: theme-color(warning);
|
||||
}
|
||||
|
||||
.form-control {
|
||||
border-color: theme-color(warning);
|
||||
box-shadow: inset 0 ($textfield-border-width-hover * -1) 0 ($textfield-border-width * -1) theme-color(warning);
|
||||
}
|
||||
}
|
||||
|
||||
&.has-success {
|
||||
.form-text {
|
||||
color: theme-color(success);
|
||||
}
|
||||
|
||||
.form-control {
|
||||
border-color: theme-color(success);
|
||||
box-shadow: inset 0 ($textfield-border-width-hover * -1) 0 ($textfield-border-width * -1) theme-color(success);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,47 +1,101 @@
|
|||
input, textarea {
|
||||
&.text-preformatted {
|
||||
font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
|
||||
font-family: $font-family-monospace;
|
||||
}
|
||||
}
|
||||
|
||||
.form-check,
|
||||
.custom-checkbox {
|
||||
margin-bottom: 0.35rem;
|
||||
|
||||
.form-check-input,
|
||||
.custom-control-input {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
cursor: pointer;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.form-check-label,
|
||||
.custom-control-label {
|
||||
margin-left: 0.5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.custom-control-label {
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-text {
|
||||
padding: .75rem;
|
||||
}
|
||||
|
||||
.form {
|
||||
.row {
|
||||
margin-bottom: 1rem;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.form-group {
|
||||
& > label {
|
||||
margin-bottom: .5rem !important;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.form-text {
|
||||
margin-top: .5rem;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
label.required {
|
||||
&:after {
|
||||
content: " *";
|
||||
color: $red-700;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control:not([type="file"]),
|
||||
.form-select {
|
||||
padding: .75rem;
|
||||
}
|
||||
|
||||
.form-select {
|
||||
option {
|
||||
border-radius: var(--bs-border-radius);
|
||||
padding: .5rem;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--bs-secondary-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
fieldset {
|
||||
margin-bottom: 1rem;
|
||||
|
||||
legend {
|
||||
border-bottom: 2px dotted;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
div.fieldset-legend,
|
||||
legend.col-form-label {
|
||||
p {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
border-bottom: 2px dotted;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.row {
|
||||
margin-bottom: 1rem;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.form-group {
|
||||
& > label {
|
||||
margin-bottom: .5rem !important;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
label.required {
|
||||
&:after {
|
||||
content: " *";
|
||||
color: $material-color-red-700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > fieldset:last-of-type {
|
||||
|
|
|
|||
|
|
@ -4,14 +4,19 @@ header.navbar {
|
|||
background-repeat: no-repeat;
|
||||
background-size: 500px 100px, cover;
|
||||
|
||||
min-height: $header-nav-height;
|
||||
padding: 1rem;
|
||||
|
||||
color: $white !important;
|
||||
|
||||
.navbar-brand {
|
||||
font-size: 2.5rem;
|
||||
font-size: 3rem;
|
||||
letter-spacing: -2px;
|
||||
line-height: 1;
|
||||
font-weight: normal;
|
||||
align-items: baseline;
|
||||
height: 2.5rem;
|
||||
text-shadow: 0 0 2px #000;
|
||||
padding: 0;
|
||||
|
||||
b {
|
||||
font-weight: bold;
|
||||
|
|
@ -19,13 +24,21 @@ header.navbar {
|
|||
|
||||
small {
|
||||
padding-left: .75rem;
|
||||
font-size: 1.2rem;
|
||||
font-size: 1.5rem;
|
||||
letter-spacing: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
border: 0;
|
||||
line-height: 1rem;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
.dropdown-item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
i {
|
||||
font-size: 20px;
|
||||
width: 2rem;
|
||||
|
|
|
|||
|
|
@ -1,18 +0,0 @@
|
|||
.material-icons {
|
||||
&.xl {
|
||||
@include reset-material-icons($material-icon-size * 2);
|
||||
line-height: 0.5em;
|
||||
}
|
||||
|
||||
.btn > & {
|
||||
margin-right: calc($btn-padding-x / 2);
|
||||
}
|
||||
|
||||
.btn-lg > & {
|
||||
margin-right: calc($btn-padding-x-lg / 2);
|
||||
}
|
||||
|
||||
.btn-sm > & {
|
||||
margin-right: calc($btn-padding-x-sm / 2);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +1,14 @@
|
|||
@use "sass:math";
|
||||
|
||||
.modal-content {
|
||||
box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
ul.nav-tabs {
|
||||
margin: (0 - math.div($dialog-padding-y, 2)) (0-$dialog-padding-y) 0 (0-$dialog-padding-y);
|
||||
padding: 0 $dialog-padding-y;
|
||||
nav.nav-tabs {
|
||||
background: var(--bs-tertiary-bg);
|
||||
|
||||
margin: (0-$modal-inner-padding) (0-$modal-inner-padding) 0 (0-$modal-inner-padding);
|
||||
padding: math.div($modal-inner-padding, 2) $modal-inner-padding 0 $modal-inner-padding;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
.nav {
|
||||
.nav-link {
|
||||
cursor: pointer;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
body.page-full {
|
||||
.notices {
|
||||
padding: ($header-nav-height + 1rem) 1rem 1rem 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
article.alert {
|
||||
button.btn-close {
|
||||
padding: 0.8rem;
|
||||
}
|
||||
|
||||
.alert-wrapper {
|
||||
padding-right: 2rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
/*
|
||||
* Overrides to handle Oruga not properly styling pagination controls.
|
||||
*/
|
||||
|
||||
.pagination-wrapper {
|
||||
display: contents;
|
||||
|
||||
.pagination-prev,
|
||||
.pagination-next {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ul.pagination {
|
||||
margin-bottom: 0;
|
||||
|
||||
li span {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: var(--bs-pagination-padding-y) var(--bs-pagination-padding-x);
|
||||
font-size: var(--bs-pagination-font-size);
|
||||
color: var(--bs-pagination-disabled-color);
|
||||
background-color: var(--bs-pagination-disabled-bg);
|
||||
border: var(--bs-pagination-border-width) solid var(--bs-pagination-border-color);
|
||||
}
|
||||
|
||||
li:first-child a,
|
||||
li:first-child span {
|
||||
border-top-left-radius: var(--bs-pagination-border-radius);
|
||||
border-bottom-left-radius: var(--bs-pagination-border-radius);
|
||||
}
|
||||
|
||||
li:last-child a,
|
||||
li:last-child span {
|
||||
border-top-right-radius: var(--bs-pagination-border-radius);
|
||||
border-bottom-right-radius: var(--bs-pagination-border-radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
.stepper-horiz {
|
||||
margin-top: -1.5rem;
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
.swal2-popup {
|
||||
border: none;
|
||||
box-shadow: 0 0 4px 0 rgba(0, 0, 0, .14), 0 3px 4px 0 rgba(0, 0, 0, .12), 0 1px 5px 0 rgba(0, 0, 0, .2);
|
||||
|
||||
.swal2-actions {
|
||||
.swal2-styled {
|
||||
&.swal2-confirm {
|
||||
background-color: var(--bs-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,27 +1,57 @@
|
|||
div.datatable-toolbar-top,
|
||||
div.datatable-toolbar-bottom {
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
$aligns: top, text-top, middle, baseline, text-bottom, bottom;
|
||||
div.datatable-main {
|
||||
table {
|
||||
tr > th:first-child,
|
||||
tr > td:first-child {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
table {
|
||||
tr > th:last-child,
|
||||
tr > td:last-child {
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
@each $align in $aligns {
|
||||
&.align-#{$align} tr,
|
||||
tr.align-#{$align} {
|
||||
td, th {
|
||||
vertical-align: $align;
|
||||
&.table-selectable {
|
||||
tr > th:first-child,
|
||||
tr > td:first-child {
|
||||
width: .1%;
|
||||
white-space: nowrap;
|
||||
padding-right: 0.1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tr.text-center {
|
||||
td, th {
|
||||
text-align: center;
|
||||
th.shrink,
|
||||
td.shrink {
|
||||
width: 0.1%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.form-check,
|
||||
.form-check input,
|
||||
.form-check label {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
td, th {
|
||||
&.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.table {
|
||||
thead th {
|
||||
font-size: 1.2rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
tbody td {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
> :not(caption) > * > * {
|
||||
padding: 1rem 1rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,4 +5,8 @@ body.page-full {
|
|||
.b-toaster.b-toaster-top-full {
|
||||
top: 72px;
|
||||
}
|
||||
|
||||
div.toast-notification.top-0 {
|
||||
top: 72px !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
body.embed-social {
|
||||
background: $card-bg !important;
|
||||
}
|
||||
|
|
@ -10,4 +10,5 @@ body.embed {
|
|||
body.embed-social {
|
||||
min-height: auto;
|
||||
padding: 1rem;
|
||||
background: var(--bs-card-bg) !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
textarea.log-viewer {
|
||||
white-space: pre;
|
||||
font-family: $font-family-monospace;
|
||||
font-size: $font-size-caption;
|
||||
font-size: $font-size-sm;
|
||||
min-height: 300px !important;
|
||||
max-height: 500px;
|
||||
overflow-x: auto;
|
||||
|
|
|
|||
|
|
@ -1,9 +0,0 @@
|
|||
body.page-minimal {
|
||||
background: $body-bg url($public-page-bg);
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
|
||||
footer {
|
||||
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, 0 0 4px #000;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,17 +1,18 @@
|
|||
@use "sass:math";
|
||||
|
||||
body.page-minimal {
|
||||
background: var(--bs-body-bg) var(--public-page-bg);
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
|
||||
footer {
|
||||
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, 0 0 4px #000;
|
||||
}
|
||||
|
||||
.public-page {
|
||||
height: 100vh;
|
||||
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
height: 100dvh;
|
||||
|
||||
display: flex;
|
||||
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
|
|
@ -22,15 +23,7 @@ body.page-minimal {
|
|||
position: relative;
|
||||
|
||||
.card-title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.btn-float {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
margin-top: (0 - math.div($btn-float-size, 2));
|
||||
margin-right: (0 - math.div($btn-float-size, 2));
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -45,7 +38,7 @@ body.page-minimal {
|
|||
&.error-content {
|
||||
.card {
|
||||
.card-body {
|
||||
padding: ($card-padding-y * 2) ($card-padding-y * 2);
|
||||
padding: ($card-cap-padding-y * 2) ($card-cap-padding-y * 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,40 +0,0 @@
|
|||
body {
|
||||
background-color: $body-bg;
|
||||
color: $body-color;
|
||||
}
|
||||
|
||||
label {
|
||||
color: $textfield-hint-color;
|
||||
}
|
||||
|
||||
legend {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
color: $link-color;
|
||||
|
||||
@include active-focus-hover {
|
||||
color: $link-color-hover;
|
||||
}
|
||||
}
|
||||
|
||||
a:not([href]):not([tabindex]) {
|
||||
color: inherit;
|
||||
|
||||
@include active-focus-hover {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// Table
|
||||
|
||||
caption {
|
||||
color: $table-caption-color;
|
||||
}
|
||||
|
||||
mark {
|
||||
background-color: $mark-bg;
|
||||
color: $mark-color;
|
||||
}
|
||||
|
|
@ -1,387 +0,0 @@
|
|||
:root {
|
||||
@each $bp, $value in $grid-breakpoints {
|
||||
--breakpoint-#{$bp}: #{$value};
|
||||
}
|
||||
|
||||
--font-family-monospace: #{inspect($font-family-monospace)};
|
||||
--font-family-sans-serif: #{inspect($font-family-sans-serif)};
|
||||
--font-family-serif: #{inspect($font-family-serif)};
|
||||
}
|
||||
|
||||
// stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
|
||||
|
||||
// Box sizing
|
||||
|
||||
*,
|
||||
*::after,
|
||||
*::before {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
@at-root {
|
||||
// stylelint-disable-next-line at-rule-no-vendor-prefix
|
||||
@-ms-viewport {
|
||||
width: device-width;
|
||||
}
|
||||
}
|
||||
|
||||
// Document
|
||||
|
||||
article,
|
||||
aside,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
main,
|
||||
nav,
|
||||
section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body {
|
||||
@include text-align(left);
|
||||
|
||||
font-family: $font-family-base;
|
||||
font-size: $font-size-base;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-weight: $font-weight-base;
|
||||
line-height: $line-height-base;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
font-family: sans-serif;
|
||||
line-height: 1.15;
|
||||
text-size-adjust: 100%;
|
||||
-ms-overflow-style: scrollbar;
|
||||
-webkit-tap-highlight-color: $webkit-tap-highlight-color;
|
||||
}
|
||||
|
||||
[tabindex='-1']:focus {
|
||||
outline: 0 !important;
|
||||
}
|
||||
|
||||
// Code
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: $font-family-monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin-top: 0;
|
||||
margin-bottom: $pre-margin-y;
|
||||
overflow: auto;
|
||||
-ms-overflow-style: scrollbar;
|
||||
}
|
||||
|
||||
// Content grouping
|
||||
|
||||
figure {
|
||||
margin: 0 0 $paragraph-margin-y;
|
||||
}
|
||||
|
||||
hr {
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
// Form
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
button,
|
||||
html [type='button'],
|
||||
[type='reset'],
|
||||
[type='submit'] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type='button']::-moz-focus-inner,
|
||||
[type='reset']::-moz-focus-inner,
|
||||
[type='submit']::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
button,
|
||||
input {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
outline: 1px dotted;
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
input {
|
||||
&[type='checkbox'],
|
||||
&[type='radio'] {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&[type='checkbox'] + label,
|
||||
&[type='radio'] + label {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&[type='checkbox'][disabled] + label,
|
||||
&[type='radio'][disabled] + label {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&[type='date'],
|
||||
&[type='datetime-local'],
|
||||
&[type='month'],
|
||||
&[type='time'] {
|
||||
-webkit-appearance: listbox;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
@include typography-subheading;
|
||||
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
legend {
|
||||
@include typography-headline;
|
||||
|
||||
display: block;
|
||||
margin-bottom: $headings-margin-y;
|
||||
max-width: 100%;
|
||||
padding: 0;
|
||||
white-space: normal;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
output {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
select {
|
||||
&[multiple],
|
||||
&[size] {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
[type='number']::-webkit-inner-spin-button,
|
||||
[type='number']::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
[type='search'] {
|
||||
-webkit-appearance: none;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
[type='search']::-webkit-search-cancel-button,
|
||||
[type='search']::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
// Hidden
|
||||
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
// Images
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Interactive
|
||||
|
||||
summary {
|
||||
cursor: pointer;
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
// Link
|
||||
|
||||
a {
|
||||
text-decoration: $link-decoration;
|
||||
-webkit-text-decoration-skip: objects;
|
||||
|
||||
@include active-focus-hover {
|
||||
text-decoration: $link-decoration-hover;
|
||||
}
|
||||
}
|
||||
|
||||
a:not([href]):not([tabindex]) {
|
||||
text-decoration: none;
|
||||
|
||||
@include active-focus-hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Scripting
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Table
|
||||
|
||||
caption {
|
||||
@include text-align(left);
|
||||
@include typography-caption;
|
||||
|
||||
caption-side: bottom;
|
||||
min-height: $table-thead-cell-height;
|
||||
padding: $table-thead-padding-y $table-cell-padding-x-alt;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
th {
|
||||
@include text-align(left);
|
||||
}
|
||||
|
||||
// Typography
|
||||
|
||||
abbr {
|
||||
&[data-original-title],
|
||||
&[title] {
|
||||
border-bottom: 0;
|
||||
cursor: help;
|
||||
text-decoration: underline dotted;
|
||||
}
|
||||
}
|
||||
|
||||
address {
|
||||
font-style: normal;
|
||||
line-height: inherit;
|
||||
margin-bottom: $paragraph-margin-y;
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 0 0 $paragraph-margin-y;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-bottom: $headings-margin-y;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
dl,
|
||||
ol,
|
||||
ul {
|
||||
margin-top: 0;
|
||||
margin-bottom: $paragraph-margin-y;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: $dt-font-weight;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: $headings-margin-y;
|
||||
}
|
||||
|
||||
ol ol,
|
||||
ol ul,
|
||||
ul ol,
|
||||
ul ul {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: $paragraph-margin-y;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
// Column
|
||||
|
||||
@if $enable-grid-classes {
|
||||
@include make-grid-columns;
|
||||
}
|
||||
|
||||
// Container
|
||||
|
||||
@if $enable-grid-classes {
|
||||
.container {
|
||||
@include make-container;
|
||||
@include make-container-max-widths;
|
||||
}
|
||||
}
|
||||
|
||||
@if $enable-grid-classes {
|
||||
.container-fluid {
|
||||
@include make-container;
|
||||
}
|
||||
}
|
||||
|
||||
// Row
|
||||
|
||||
@if $enable-grid-classes {
|
||||
.row {
|
||||
@include make-row;
|
||||
}
|
||||
|
||||
.no-gutters {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
|
||||
> .col,
|
||||
> [class*='col-'] {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
// Blockquote
|
||||
|
||||
.blockquote {
|
||||
border-left: $blockquote-border-width solid $blockquote-border-color;
|
||||
}
|
||||
|
||||
.blockquote-footer {
|
||||
color: $blockquote-small-color;
|
||||
}
|
||||
|
||||
// Emphasis
|
||||
|
||||
mark,
|
||||
.mark {
|
||||
background-color: $mark-bg;
|
||||
color: $mark-color;
|
||||
}
|
||||
|
||||
// Headings - bootstrap classes
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
.h1,
|
||||
.h2,
|
||||
.h3,
|
||||
.h4,
|
||||
.h5,
|
||||
.h6 {
|
||||
color: $headings-color;
|
||||
}
|
||||
|
||||
// Hr
|
||||
|
||||
hr {
|
||||
border-top: $hr-border-width solid $hr-border-color;
|
||||
}
|
||||
|
|
@ -1,178 +0,0 @@
|
|||
// Blockquote
|
||||
|
||||
.blockquote {
|
||||
@include typography-title;
|
||||
|
||||
margin-bottom: $paragraph-margin-y;
|
||||
padding: 0 $spacer;
|
||||
}
|
||||
|
||||
.blockquote-footer {
|
||||
@include typography-caption;
|
||||
|
||||
display: block;
|
||||
margin-top: $spacer-xs;
|
||||
|
||||
&::before {
|
||||
content: '\2014 \00A0';
|
||||
}
|
||||
}
|
||||
|
||||
// Emphasis
|
||||
|
||||
mark,
|
||||
.mark {
|
||||
padding: $mark-padding;
|
||||
}
|
||||
|
||||
small,
|
||||
.small {
|
||||
font-size: $small-font-size;
|
||||
font-weight: $font-weight-regular;
|
||||
}
|
||||
|
||||
.xs {
|
||||
font-size: 70%;
|
||||
font-weight: $font-weight-regular;
|
||||
}
|
||||
|
||||
.initialism {
|
||||
font-size: 90%;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
// Headings
|
||||
|
||||
.typography-display-4 {
|
||||
@include typography-display-4;
|
||||
}
|
||||
|
||||
.typography-display-3 {
|
||||
@include typography-display-3;
|
||||
}
|
||||
|
||||
.typography-display-2 {
|
||||
@include typography-display-2;
|
||||
}
|
||||
|
||||
.typography-display-1 {
|
||||
@include typography-display-1;
|
||||
}
|
||||
|
||||
.typography-headline {
|
||||
@include typography-headline;
|
||||
}
|
||||
|
||||
.typography-title {
|
||||
@include typography-title;
|
||||
}
|
||||
|
||||
.typography-subheading {
|
||||
@include typography-subheading;
|
||||
}
|
||||
|
||||
.typography-body-2 {
|
||||
@include typography-body-2;
|
||||
}
|
||||
|
||||
.typography-body-1 {
|
||||
@include typography-body-1;
|
||||
}
|
||||
|
||||
.typography-caption {
|
||||
@include typography-caption;
|
||||
}
|
||||
|
||||
// Headings - bootstrap classes
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
.h1,
|
||||
.h2,
|
||||
.h3,
|
||||
.h4,
|
||||
.h5,
|
||||
.h6 {
|
||||
font-family: $headings-font-family;
|
||||
margin-bottom: $headings-margin-y;
|
||||
}
|
||||
|
||||
h1,
|
||||
.h1 {
|
||||
@include typography-display-2;
|
||||
}
|
||||
|
||||
h2,
|
||||
.h2 {
|
||||
@include typography-display-1;
|
||||
}
|
||||
|
||||
h3,
|
||||
.h3 {
|
||||
@include typography-headline;
|
||||
}
|
||||
|
||||
h4,
|
||||
.h4 {
|
||||
@include typography-title;
|
||||
}
|
||||
|
||||
h5,
|
||||
.h5 {
|
||||
@include typography-subheading;
|
||||
}
|
||||
|
||||
h6,
|
||||
.h6 {
|
||||
@include typography-body-2;
|
||||
}
|
||||
|
||||
.display-1 {
|
||||
@include typography-display-4;
|
||||
}
|
||||
|
||||
.display-2 {
|
||||
@include typography-display-3;
|
||||
}
|
||||
|
||||
.display-3 {
|
||||
@include typography-display-2;
|
||||
}
|
||||
|
||||
.display-4 {
|
||||
@include typography-display-1;
|
||||
}
|
||||
|
||||
.lead {
|
||||
@include typography-title;
|
||||
}
|
||||
|
||||
// Hr
|
||||
|
||||
hr {
|
||||
border: 0;
|
||||
margin-top: $paragraph-margin-y;
|
||||
margin-bottom: $paragraph-margin-y;
|
||||
}
|
||||
|
||||
// List
|
||||
|
||||
.list-inline {
|
||||
@include list-unstyled;
|
||||
}
|
||||
|
||||
.list-inline-item {
|
||||
display: inline-block;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: $list-inline-inner-spacer-x;
|
||||
}
|
||||
}
|
||||
|
||||
.list-unstyled {
|
||||
@include list-unstyled;
|
||||
}
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
@each $color, $values in $theme-colors {
|
||||
.alert-#{$color} {
|
||||
background-color: theme-color-light($color);
|
||||
color: color-yiq(theme-color-light($color));
|
||||
}
|
||||
}
|
||||
|
||||
.alert-dismissible {
|
||||
.close {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-heading {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.alert-link {
|
||||
color: inherit;
|
||||
|
||||
@include active-focus-hover {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
.alert {
|
||||
@include border-radius($alert-border-radius);
|
||||
|
||||
border: 0;
|
||||
display: block;
|
||||
margin-bottom: $alert-margin-y;
|
||||
padding: $alert-padding-y $alert-padding-x;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// Dismissible
|
||||
|
||||
.alert-dismissible {
|
||||
padding-right: ($alert-padding-x * 2 + $close-font-size);
|
||||
|
||||
.close {
|
||||
padding: ($alert-padding-y - ($close-font-size - $font-size-base * $line-height-base) * 0.5) $alert-padding-x;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Misc
|
||||
.alert-link {
|
||||
font-weight: $alert-link-font-weight;
|
||||
}
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
@each $color, $values in $theme-colors {
|
||||
.badge-#{$color} {
|
||||
background-color: theme-color($color);
|
||||
color: color-yiq(theme-color($color));
|
||||
|
||||
&[href] {
|
||||
@include active-focus-hover {
|
||||
background-color: theme-color-dark($color);
|
||||
color: color-yiq(theme-color-dark($color));
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
small.badge, .badge.small {
|
||||
font-size: 70%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.badge {
|
||||
@include border-radius($badge-border-radius);
|
||||
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
font-size: inherit;
|
||||
font-weight: $badge-font-weight;
|
||||
line-height: inherit;
|
||||
padding-right: $badge-padding-x;
|
||||
padding-left: $badge-padding-x;
|
||||
text-align: center;
|
||||
vertical-align: baseline;
|
||||
white-space: nowrap;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.btn & {
|
||||
margin-top: -1px;
|
||||
margin-bottom: -1px;
|
||||
padding-top: 1px;
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
// Pill badges with extra rounded corners
|
||||
|
||||
.badge-pill {
|
||||
@include border-radius(1em);
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
.breadcrumb {
|
||||
background-color: $breadcrumb-bg;
|
||||
}
|
||||
|
||||
.breadcrumb-item {
|
||||
color: $breadcrumb-item-color;
|
||||
|
||||
@include active-focus-hover {
|
||||
color: $breadcrumb-item-color-hover;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $breadcrumb-item-color-hover;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
.breadcrumb {
|
||||
@include border-radius($breadcrumb-border-radius);
|
||||
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
list-style: none;
|
||||
margin-bottom: $breadcrumb-margin-y;
|
||||
min-height: $breadcrumb-height;
|
||||
padding: $breadcrumb-padding-y $breadcrumb-padding-x;
|
||||
}
|
||||
|
||||
.breadcrumb-item {
|
||||
@include transition-standard(color);
|
||||
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
||||
&.active {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
+ .breadcrumb-item {
|
||||
margin-left: $breadcrumb-inner-spacer-x;
|
||||
|
||||
&::before {
|
||||
@include setup-material-icons-bg;
|
||||
@include material-icons-bg($breadcrumb-item-icon);
|
||||
|
||||
display: inline-block;
|
||||
margin-right: $breadcrumb-inner-spacer-x;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
.close {
|
||||
color: $close-color;
|
||||
}
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
.close {
|
||||
@include transition-standard(color);
|
||||
|
||||
appearance: none;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
border: 0;
|
||||
float: right;
|
||||
font-size: $close-font-size;
|
||||
font-weight: $close-font-weight;
|
||||
line-height: 1;
|
||||
padding: 0;
|
||||
|
||||
@include active-focus-hover {
|
||||
color: $close-color-hover;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&:not(:disabled):not(.disabled) {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
code {
|
||||
background-color: $code-bg;
|
||||
color: $code-color;
|
||||
|
||||
a > & {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
kbd {
|
||||
background-color: $kbd-bg;
|
||||
color: $kbd-color;
|
||||
}
|
||||
|
||||
pre {
|
||||
color: $pre-color;
|
||||
|
||||
code {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
code {
|
||||
@include border-radius($code-border-radius);
|
||||
|
||||
font-size: $code-font-size;
|
||||
padding: $code-padding-y $code-padding-x;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
kbd {
|
||||
@include border-radius($code-border-radius);
|
||||
|
||||
font-size: $code-font-size;
|
||||
padding: $code-padding-y $code-padding-x;
|
||||
|
||||
kbd {
|
||||
font-size: 100%;
|
||||
font-weight: bolder;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
@include border-radius($code-border-radius);
|
||||
|
||||
display: block;
|
||||
font-size: $code-font-size;
|
||||
|
||||
code {
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
font-size: inherit;
|
||||
padding: 0;
|
||||
word-break: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.pre-scrollable {
|
||||
max-height: $pre-scrollable-max-height;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
.form-check-input {
|
||||
&:disabled ~ .form-check-label {
|
||||
color: $textfield-color-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
.form-check-label {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.form-text {
|
||||
color: $textfield-hint-color;
|
||||
}
|
||||
|
||||
.form-control-plaintext {
|
||||
color: $textfield-plaintext-color;
|
||||
}
|
||||
|
||||
.col-form-label {
|
||||
color: inherit;
|
||||
}
|
||||
|
|
@ -1,167 +0,0 @@
|
|||
// Checkbox and radio button
|
||||
|
||||
@use "sass:math";
|
||||
|
||||
.form-check {
|
||||
display: block;
|
||||
margin-bottom: $textfield-margin-y;
|
||||
padding-left: $form-check-input-gutter;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.form-check-inline {
|
||||
display: inline-block;
|
||||
margin-right: $form-check-inline-margin-x;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.form-check-input {
|
||||
margin-top: (math.div($font-size-base * $line-height-base - $font-size-base, 3) * 2);
|
||||
margin-left: ($form-check-input-gutter * -1);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.form-check-label {
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
// Form group
|
||||
|
||||
.form-group {
|
||||
margin-bottom: $form-group-margin-y;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-right: math.div($textfield-margin-x, -2);
|
||||
margin-left: math.div($textfield-margin-x, -2);
|
||||
|
||||
> .col,
|
||||
> [class*='col-'] {
|
||||
padding-right: ($textfield-margin-x * 0.5);
|
||||
padding-left: ($textfield-margin-x * 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
// Inline
|
||||
|
||||
.form-inline {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
|
||||
.custom-file,
|
||||
.custom-select {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.form-check {
|
||||
margin-bottom: 0;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.form-control,
|
||||
.form-control-file {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.form-control-plaintext {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
flex-flow: row wrap;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Label
|
||||
|
||||
.col-form-label {
|
||||
font-size: $font-size-base;
|
||||
line-height: math.div($textfield-font-size * $textfield-line-height, $font-size-base);
|
||||
padding-top: $textfield-padding-y;
|
||||
padding-bottom: $textfield-padding-y;
|
||||
}
|
||||
|
||||
.col-form-label-lg {
|
||||
font-size: (math.div($font-size-base, $textfield-font-size) * $textfield-font-size-lg);
|
||||
line-height: math.div($textfield-line-height-lg, math.div($font-size-base, $textfield-font-size));
|
||||
padding-top: $textfield-padding-y-lg;
|
||||
padding-bottom: $textfield-padding-y-lg;
|
||||
}
|
||||
|
||||
.col-form-label-sm {
|
||||
font-size: (math.div($font-size-base, $textfield-font-size) * $textfield-font-size-sm);
|
||||
line-height: math.div($textfield-line-height-sm, math.div($font-size-base, $textfield-font-size));
|
||||
padding-top: $textfield-padding-y-sm;
|
||||
padding-bottom: $textfield-padding-y-sm;
|
||||
}
|
||||
|
||||
// Misc
|
||||
|
||||
.form-text {
|
||||
@include typography-caption;
|
||||
|
||||
display: block;
|
||||
margin-top: $textfield-margin-y;
|
||||
|
||||
.custom-select-lg + &,
|
||||
.floating-label-lg + &,
|
||||
.floating-label-lg .custom-select + &,
|
||||
.floating-label-lg .form-control + &,
|
||||
.floating-label-lg .form-control-file + &,
|
||||
.form-control-lg + &,
|
||||
.textfield-box-lg + &,
|
||||
.textfield-box-lg .custom-select + &,
|
||||
.textfield-box-lg .form-control + &,
|
||||
.textfield-box-lg .form-control-file + & {
|
||||
margin-top: $textfield-margin-y-lg;
|
||||
}
|
||||
|
||||
.custom-select-sm + &,
|
||||
.floating-label-sm + &,
|
||||
.floating-label-sm .custom-select + &,
|
||||
.floating-label-sm .form-control + &,
|
||||
.floating-label-sm .form-control-file + &,
|
||||
.form-control-sm + &,
|
||||
.textfield-box-sm + &,
|
||||
.textfield-box-sm .custom-select + &,
|
||||
.textfield-box-sm .form-control + &,
|
||||
.textfield-box-sm .form-control-file + & {
|
||||
margin-top: $textfield-margin-y-sm;
|
||||
}
|
||||
}
|
||||
|
||||
// Readonly control as plain text
|
||||
|
||||
.form-control-plaintext {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
border-radius: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 0 $textfield-border-width;
|
||||
box-shadow: none;
|
||||
display: block;
|
||||
font-size: $textfield-font-size;
|
||||
line-height: $textfield-line-height;
|
||||
padding: $textfield-padding-y 0 calc(#{$textfield-padding-y} - #{$textfield-border-width});
|
||||
width: 100%;
|
||||
|
||||
&.form-control-sm,
|
||||
&.form-control-lg {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
.figure-caption {
|
||||
color: $figure-caption-color;
|
||||
}
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
.figure {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.figure-caption {
|
||||
@include typography-caption;
|
||||
}
|
||||
|
||||
.figure-img {
|
||||
line-height: 1;
|
||||
margin-bottom: $figure-img-margin-y;
|
||||
}
|
||||
|
||||
.img-fluid {
|
||||
@include img-fluid;
|
||||
}
|
||||
|
||||
.img-thumbnail {
|
||||
@include img-fluid;
|
||||
|
||||
box-shadow: $thumbnail-box-shadow;
|
||||
}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
.media {
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.media-body {
|
||||
flex: 1;
|
||||
}
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
.nav-link {
|
||||
&.disabled {
|
||||
color: $nav-link-color-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-pills {
|
||||
.nav-link {
|
||||
color: $nav-pills-color;
|
||||
|
||||
@include active-focus-hover {
|
||||
background-color: $nav-pills-bg-hover;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $nav-pills-color-active;
|
||||
background-color: $nav-pills-bg-hover;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: $nav-link-color-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
.show > .nav-link {
|
||||
background-color: $nav-pills-bg-hover;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,83 +0,0 @@
|
|||
.nav {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
list-style: none;
|
||||
margin-bottom: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
display: block;
|
||||
padding: $nav-link-padding-y $nav-link-padding-x;
|
||||
|
||||
@include active-focus-hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
// Justified
|
||||
|
||||
.nav-fill {
|
||||
.nav-item {
|
||||
flex: 1 1 auto;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-justified {
|
||||
.nav-item {
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
// Pills
|
||||
|
||||
.nav-pills {
|
||||
.nav-link {
|
||||
@include border-radius($nav-pills-border-radius);
|
||||
@include transition-standard(background-color, color, opacity);
|
||||
|
||||
opacity: $nav-pills-link-opacity;
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
background-color: transparent;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:active {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.show > .nav-link {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// N.B. Tabs are defined in Material design
|
||||
// (https://material.google.com/components/tabs.html)
|
||||
// therefore, tabs are styled in /assets/sass/material/_tab.scss
|
||||
|
||||
// Tabs (helper classes to work with tabs JavaScript)
|
||||
|
||||
.tab-content {
|
||||
// Hide to start
|
||||
> .tab-pane {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Show when activated
|
||||
> .active {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
.pagination {
|
||||
background-color: $pagination-bg;
|
||||
}
|
||||
|
||||
.page-link {
|
||||
color: $pagination-color;
|
||||
|
||||
@include active-focus-hover {
|
||||
color: $pagination-color;
|
||||
}
|
||||
|
||||
&.active,
|
||||
&:active {
|
||||
background-color: $btn-bg-active;
|
||||
}
|
||||
|
||||
.page-item.active & {
|
||||
background-color: $btn-bg-active;
|
||||
}
|
||||
|
||||
.page-item.disabled & {
|
||||
color: $pagination-color-disabled;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
.pagination {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
padding: $pagination-padding-y $pagination-padding-x;
|
||||
}
|
||||
|
||||
.page-link {
|
||||
@include border-radius($pagination-border-radius);
|
||||
@include transition-standard(color);
|
||||
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
border: 0;
|
||||
|
||||
display: block;
|
||||
font-size: $btn-font-size;
|
||||
font-weight: $btn-font-weight;
|
||||
line-height: $btn-line-height;
|
||||
margin-left: $pagination-inner-spacer-x;
|
||||
padding: $btn-padding-y $btn-padding-x;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
|
||||
@include active-focus-hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@include focus-hover {
|
||||
background-image: linear-gradient(to bottom, $btn-overlay, $btn-overlay);
|
||||
}
|
||||
|
||||
&.active,
|
||||
&:active {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&:not(:disabled):not(.disabled) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.page-item:first-child & {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.page-item.disabled & {
|
||||
background-color: transparent;
|
||||
cursor: auto;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-lg .page-link {
|
||||
font-size: $btn-font-size-lg;
|
||||
padding: $btn-padding-y-lg $btn-padding-x-lg;
|
||||
}
|
||||
|
||||
.pagination-sm .page-link {
|
||||
font-size: $btn-font-size-sm;
|
||||
padding: $btn-padding-y-sm $btn-padding-x-sm;
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
.popover {
|
||||
background-color: $popover-bg;
|
||||
}
|
||||
|
|
@ -1,49 +0,0 @@
|
|||
// N.B. Material design specifically discouragaes the usage of tooltips with rich information
|
||||
// (https://material.google.com/components/tooltips.html#tooltips-usage)
|
||||
// Therefore, popovers are styled as Material design's dialogs
|
||||
|
||||
.popover {
|
||||
@include reset-text;
|
||||
@include border-radius($popover-border-radius);
|
||||
|
||||
box-shadow: map-get($popover-elevation-shadow, shadow);
|
||||
display: block;
|
||||
font-size: $popover-font-size;
|
||||
margin: $popover-margin;
|
||||
max-width: $popover-max-width;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: map-get($popover-elevation-shadow, elevation);
|
||||
}
|
||||
|
||||
.popover-body {
|
||||
padding: $popover-padding-y $popover-padding-x;
|
||||
|
||||
> :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.popover-header {
|
||||
@include typography-title;
|
||||
|
||||
margin-bottom: 0;
|
||||
padding: $popover-padding-y $popover-padding-x 0;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: $popover-padding-y;
|
||||
}
|
||||
}
|
||||
|
||||
// Desktop
|
||||
|
||||
@include media-breakpoint-up($popover-breakpoint) {
|
||||
.popover {
|
||||
margin: $popover-margin-desktop;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
@use "sass:math";
|
||||
|
||||
.embed-responsive {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
}
|
||||
|
||||
embed,
|
||||
iframe,
|
||||
object,
|
||||
video,
|
||||
.embed-responsive-item {
|
||||
border: 0;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.embed-responsive-1by1 {
|
||||
&::before {
|
||||
padding-top: percentage(math.div(1, 1));
|
||||
}
|
||||
}
|
||||
|
||||
.embed-responsive-4by3 {
|
||||
&::before {
|
||||
padding-top: percentage(3 * 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
.embed-responsive-16by9 {
|
||||
&::before {
|
||||
padding-top: percentage(math.div(9, 16));
|
||||
}
|
||||
}
|
||||
|
||||
.embed-responsive-21by9 {
|
||||
&::before {
|
||||
padding-top: percentage(math.div(9, 21));
|
||||
}
|
||||
}
|
||||
|
|
@ -1,58 +0,0 @@
|
|||
//
|
||||
// Rotating border
|
||||
//
|
||||
|
||||
@keyframes spinner-border {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.spinner-border {
|
||||
display: inline-block;
|
||||
width: $spinner-width;
|
||||
height: $spinner-height;
|
||||
vertical-align: text-bottom;
|
||||
border: $spinner-border-width solid currentColor;
|
||||
border-right-color: transparent;
|
||||
// stylelint-disable-next-line property-disallowed-list
|
||||
border-radius: 50%;
|
||||
animation: spinner-border .75s linear infinite;
|
||||
}
|
||||
|
||||
.spinner-border-sm {
|
||||
width: $spinner-width-sm;
|
||||
height: $spinner-height-sm;
|
||||
border-width: $spinner-border-width-sm;
|
||||
}
|
||||
|
||||
//
|
||||
// Growing circle
|
||||
//
|
||||
|
||||
@keyframes spinner-grow {
|
||||
0% {
|
||||
transform: scale(0);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.spinner-grow {
|
||||
display: inline-block;
|
||||
width: $spinner-width;
|
||||
height: $spinner-height;
|
||||
vertical-align: text-bottom;
|
||||
background-color: currentColor;
|
||||
// stylelint-disable-next-line property-disallowed-list
|
||||
border-radius: 50%;
|
||||
opacity: 0;
|
||||
animation: spinner-grow .75s linear infinite;
|
||||
}
|
||||
|
||||
.spinner-grow-sm {
|
||||
width: $spinner-width-sm;
|
||||
height: $spinner-height-sm;
|
||||
}
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
.toast {
|
||||
// Prevents from shrinking in IE11, when in a flex container
|
||||
// See https://github.com/twbs/bootstrap/issues/28341
|
||||
flex-basis: $toast-max-width;
|
||||
max-width: $toast-max-width;
|
||||
@include font-size($toast-font-size);
|
||||
background-clip: padding-box;
|
||||
border: $toast-border-width solid $toast-border-color;
|
||||
box-shadow: $toast-box-shadow;
|
||||
opacity: 0;
|
||||
@include border-radius($toast-border-radius);
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: $toast-padding-x;
|
||||
}
|
||||
|
||||
&.showing {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.show {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.hide {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.toast-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: $toast-padding-y $toast-padding-x;
|
||||
background-clip: padding-box;
|
||||
border-bottom: $toast-border-width solid $toast-header-border-color;
|
||||
@include border-top-radius(subtract($toast-border-radius, $toast-border-width));
|
||||
}
|
||||
|
||||
.toast-body {
|
||||
padding: $toast-padding-x; // apply to both vertical and horizontal
|
||||
}
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
.collapse {
|
||||
display: none;
|
||||
|
||||
&.show {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
// stylelint-disable-next-line selector-no-qualifying-type
|
||||
tbody.collapse.show {
|
||||
display: table-row-group;
|
||||
}
|
||||
|
||||
// stylelint-disable-next-line selector-no-qualifying-type
|
||||
tr.collapse.show {
|
||||
display: table-row;
|
||||
}
|
||||
|
||||
.collapsing {
|
||||
@include transition-standard(height);
|
||||
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.fade {
|
||||
@include transition-standard(opacity);
|
||||
|
||||
opacity: 0;
|
||||
|
||||
&.show {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,70 +0,0 @@
|
|||
.btn {
|
||||
background-color: transparent;
|
||||
color: $btn-color;
|
||||
|
||||
@include active-focus-hover {
|
||||
color: $btn-color;
|
||||
}
|
||||
|
||||
@include focus-hover {
|
||||
background-image: linear-gradient(to bottom, $btn-overlay, $btn-overlay);
|
||||
}
|
||||
|
||||
&.active,
|
||||
&:active {
|
||||
background-color: $btn-bg-active;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
background-color: $btn-bg-disabled;
|
||||
color: $btn-color-disabled;
|
||||
}
|
||||
|
||||
.show > &.dropdown-toggle {
|
||||
background-image: linear-gradient(to bottom, $btn-overlay, $btn-overlay);
|
||||
}
|
||||
}
|
||||
|
||||
@each $color, $values in $theme-colors {
|
||||
.btn-#{$color} {
|
||||
background-color: theme-color($color);
|
||||
color: color-yiq(theme-color($color));
|
||||
|
||||
@include active-focus-hover {
|
||||
color: color-yiq(theme-color($color));
|
||||
}
|
||||
|
||||
&.active,
|
||||
&:active {
|
||||
background-color: theme-color-dark($color);
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
background-color: $btn-bg-disabled;
|
||||
color: $btn-color-disabled;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[class*='bg-dark'] :not([class*='bg-light']) .btn {
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
background-color: $btn-bg-disabled-inverse;
|
||||
color: $btn-color-disabled-inverse;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-link {
|
||||
color: $link-color;
|
||||
|
||||
@include active-focus-hover {
|
||||
color: $link-color-hover;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
color: $btn-color-disabled;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
@each $color, $values in $theme-colors {
|
||||
.btn-flat-#{$color},
|
||||
.btn-outline-#{$color} {
|
||||
@include plain-active-focus-hover {
|
||||
color: theme-color($color);
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
color: $btn-color-disabled;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-flat-light,
|
||||
.btn-outline-light {
|
||||
@include focus-hover {
|
||||
background-image: linear-gradient(to bottom, $btn-overlay-inverse, $btn-overlay-inverse);
|
||||
}
|
||||
|
||||
&.active,
|
||||
&:active {
|
||||
background-color: $btn-bg-active-inverse;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
[class*='btn-flat'],
|
||||
[class*='btn-outline'] {
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
|
||||
&.active,
|
||||
&:active {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
.btn-float {
|
||||
border-radius: 50%;
|
||||
box-shadow: map-get($btn-float-elevation-shadow, shadow);
|
||||
height: $btn-float-size;
|
||||
line-height: $btn-float-size;
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
width: $btn-float-size;
|
||||
|
||||
&.active,
|
||||
&:active {
|
||||
box-shadow: map-get($btn-float-elevation-shadow-active, shadow);
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.btn-sm {
|
||||
height: $btn-float-size-sm;
|
||||
line-height: $btn-float-size-sm;
|
||||
width: $btn-float-size-sm;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-float-dropdown {
|
||||
.dropdown-menu {
|
||||
border-radius: 0;
|
||||
margin-top: $btn-float-dropdown-inner-spacer-y;
|
||||
min-width: $btn-float-size;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
text-align: center;
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.btn-float {
|
||||
display: block;
|
||||
margin-right: auto;
|
||||
margin-bottom: $btn-float-dropdown-inner-spacer-y;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
.btn-group,
|
||||
.btn-group-vertical {
|
||||
background-color: $btn-group-bg;
|
||||
|
||||
@each $color, $values in $theme-colors {
|
||||
> .btn-#{$color} {
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
background-color: theme-color-light($color);
|
||||
color: color-yiq(theme-color-light($color));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,164 +0,0 @@
|
|||
.btn-group,
|
||||
.btn-group-vertical {
|
||||
@include border-radius($btn-border-radius);
|
||||
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
|
||||
> .btn {
|
||||
@include transition-standard(border-color, opacity);
|
||||
|
||||
box-shadow: none;
|
||||
flex: 0 1 auto;
|
||||
min-width: 0;
|
||||
|
||||
&.active,
|
||||
&:active {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
opacity: $btn-group-toggle-opacity;
|
||||
}
|
||||
|
||||
&[class*='btn-outline'] {
|
||||
opacity: $btn-group-toggle-opacity;
|
||||
|
||||
&.active,
|
||||
&:active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .btn-group,
|
||||
> .btn-group-vertical {
|
||||
@include border-radius(0);
|
||||
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
&.show > .btn.dropdown-toggle {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
> .btn,
|
||||
> .btn-group {
|
||||
margin-left: ($btn-group-inner-spacer-x * -1);
|
||||
}
|
||||
|
||||
> .btn:first-child,
|
||||
> .btn-group:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
> .btn:not(:first-child),
|
||||
> .btn-group:not(:first-child) > .btn {
|
||||
@include border-left-radius(0);
|
||||
}
|
||||
|
||||
> .btn:not(:last-child):not(.dropdown-toggle),
|
||||
> .btn-group:not(:last-child) > .btn,
|
||||
> .dropdown-toggle:not(:last-of-type) {
|
||||
@include border-right-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group-vertical {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
> .btn,
|
||||
> .btn-group {
|
||||
margin-top: ($btn-group-inner-spacer-y * -1);
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
> .btn:first-child,
|
||||
> .btn-group:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
> .btn:not(:first-child),
|
||||
> .btn-group:not(:first-child) > .btn {
|
||||
@include border-top-radius(0);
|
||||
}
|
||||
|
||||
> .btn:not(:last-child):not(.dropdown-toggle),
|
||||
> .btn-group:not(:last-child) > .btn,
|
||||
> .dropdown-toggle:not(:last-of-type) {
|
||||
@include border-bottom-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group-fluid {
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.btn-group-lg > .btn {
|
||||
@extend %btn-lg;
|
||||
}
|
||||
|
||||
.btn-group-sm > .btn {
|
||||
@extend %btn-sm;
|
||||
}
|
||||
|
||||
// Checkbox and radio options
|
||||
|
||||
[data-toggle='buttons'] {
|
||||
> .btn,
|
||||
> .btn-group > .btn {
|
||||
margin-bottom: 0;
|
||||
|
||||
[type='checkbox'],
|
||||
[type='radio'] {
|
||||
clip: rect(0, 0, 0, 0);
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Split button dropdown
|
||||
|
||||
.dropdown-toggle.dropdown-toggle-split {
|
||||
padding-right: $caret-spacing;
|
||||
padding-left: $caret-spacing;
|
||||
|
||||
&::after {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.dropleft & {
|
||||
&::before {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Toolbar
|
||||
|
||||
.btn-toolbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
|
||||
.input-group {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,116 +0,0 @@
|
|||
.btn {
|
||||
@include border-radius($btn-border-radius);
|
||||
@include transition-standard(box-shadow);
|
||||
|
||||
border: 0;
|
||||
display: inline-block;
|
||||
font-size: $btn-font-size;
|
||||
font-weight: $btn-font-weight;
|
||||
line-height: $btn-line-height;
|
||||
margin: 0;
|
||||
max-width: 100%;
|
||||
min-width: $btn-min-width;
|
||||
padding: $btn-padding-y $btn-padding-x;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
user-select: none;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
|
||||
@include active-focus-hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&.active,
|
||||
&:active {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
background-image: none;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&:not(:disabled):not(.disabled) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.show > &.dropdown-toggle {
|
||||
background-image: linear-gradient(to bottom, $btn-overlay, $btn-overlay);
|
||||
}
|
||||
}
|
||||
|
||||
a.btn.disabled,
|
||||
fieldset:disabled a.btn {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.btn-lg,
|
||||
%btn-lg {
|
||||
font-size: $btn-font-size-lg;
|
||||
padding: $btn-padding-y-lg $btn-padding-x-lg;
|
||||
}
|
||||
|
||||
.btn-sm,
|
||||
%btn-sm {
|
||||
font-size: $btn-font-size-sm;
|
||||
padding: $btn-padding-y-sm $btn-padding-x-sm;
|
||||
}
|
||||
|
||||
.btn-block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
||||
+ .btn-block {
|
||||
margin-top: $btn-block-margin-y;
|
||||
}
|
||||
}
|
||||
|
||||
[type='button'],
|
||||
[type='reset'],
|
||||
[type='submit'] {
|
||||
&.btn-block {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// Link button
|
||||
|
||||
.btn-link {
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
font-weight: $font-weight-regular;
|
||||
text-decoration: $link-decoration;
|
||||
text-transform: none;
|
||||
|
||||
@include active-focus-hover {
|
||||
text-decoration: $link-decoration-hover;
|
||||
}
|
||||
|
||||
@include focus-hover {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
&.active,
|
||||
&:active {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
background-color: transparent;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
// No minimum width
|
||||
|
||||
.btn-fluid {
|
||||
min-width: 0;
|
||||
}
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
.card {
|
||||
background-color: $card-bg;
|
||||
|
||||
@each $color, $values in $theme-colors {
|
||||
&.border-#{$color} {
|
||||
box-shadow: map-get($card-elevation-shadow, shadow), inset 0 0 0 $card-border-width theme-color($color);
|
||||
|
||||
&[href],
|
||||
&[tabindex] {
|
||||
@include active-focus-hover {
|
||||
box-shadow: map-get($card-elevation-shadow-hover, shadow), inset 0 0 0 $card-border-width theme-color($color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
border-top: $card-border-width solid $card-border-color;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
border-bottom: $card-border-width solid $card-border-color;
|
||||
}
|
||||
|
||||
.card-header.bg-primary-dark {
|
||||
.card-title,
|
||||
.card-subtitle {
|
||||
color: $white-primary;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: $white-hint !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,335 +0,0 @@
|
|||
@use "sass:math";
|
||||
|
||||
.card {
|
||||
@include border-radius($card-border-radius);
|
||||
|
||||
box-shadow: map-get($card-elevation-shadow, shadow);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
position: relative;
|
||||
word-wrap: break-word;
|
||||
|
||||
&[href],
|
||||
&[tabindex] {
|
||||
@include active-focus-hover {
|
||||
box-shadow: map-get($card-elevation-shadow-hover, shadow);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Accordion
|
||||
|
||||
.accordion {
|
||||
.card:first-of-type {
|
||||
@include border-bottom-radius(0);
|
||||
}
|
||||
|
||||
.card:last-of-type {
|
||||
@include border-top-radius(0);
|
||||
}
|
||||
|
||||
.card:not(:first-of-type):not(:last-of-type) {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.card:not(:first-of-type) {
|
||||
.card-body:first-child,
|
||||
.card-footer:first-child,
|
||||
.card-header:first-child {
|
||||
@include border-top-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
.card:not(:last-of-type) {
|
||||
.card-body:last-child,
|
||||
.card-footer:last-child,
|
||||
.card-header:last-child {
|
||||
@include border-bottom-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
.collapse,
|
||||
.collapsing {
|
||||
.card-body:first-child,
|
||||
.card-footer:first-child,
|
||||
.card-header:first-child {
|
||||
@include border-top-radius(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Action
|
||||
|
||||
.card-actions {
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
padding: $card-action-padding-y ($card-action-padding-x - $card-action-inner-spacer-x) ($card-action-padding-y - $card-action-inner-spacer-y) $card-action-padding-x;
|
||||
|
||||
&:first-child {
|
||||
@include border-top-radius($card-border-radius);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
@include border-bottom-radius($card-border-radius);
|
||||
}
|
||||
|
||||
.btn {
|
||||
@include text-truncate;
|
||||
|
||||
flex: 0 1 auto;
|
||||
margin-right: $card-action-inner-spacer-x;
|
||||
margin-bottom: $card-action-inner-spacer-y;
|
||||
min-width: 0;
|
||||
padding-right: $card-action-inner-spacer-x;
|
||||
padding-left: $card-action-inner-spacer-x;
|
||||
}
|
||||
|
||||
// Fix for "overflow: hidden" + "text-overflow: ellipsis" bug in Safari - see issue #869
|
||||
.btn::after {
|
||||
content: "\0000a0";
|
||||
display: inline-block;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.dropdown-toggle::after {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Body
|
||||
|
||||
.card-body {
|
||||
flex: 1 1 auto;
|
||||
padding: $card-padding-y $card-padding-x;
|
||||
|
||||
&:first-child {
|
||||
@include border-top-radius($card-border-radius);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
@include border-bottom-radius($card-border-radius);
|
||||
}
|
||||
|
||||
> :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Footer
|
||||
|
||||
.card-footer {
|
||||
padding: $card-padding-y $card-padding-x;
|
||||
|
||||
&:first-child {
|
||||
@include border-top-radius($card-border-radius);
|
||||
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
@include border-bottom-radius($card-border-radius);
|
||||
}
|
||||
|
||||
> :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Header
|
||||
|
||||
.card-header {
|
||||
margin-bottom: 0;
|
||||
padding: $card-padding-y $card-padding-x;
|
||||
|
||||
&:first-child {
|
||||
@include border-top-radius($card-border-radius);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
@include border-bottom-radius($card-border-radius);
|
||||
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
+ .list-group .list-group-item:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.card-header-pills {
|
||||
margin: ($card-padding-y * -1) ($card-padding-x * -1);
|
||||
padding: $card-action-padding-y ($card-action-padding-x - $card-action-inner-spacer-x) ($card-action-padding-y - $card-action-inner-spacer-y) $card-action-padding-x;
|
||||
|
||||
.nav-link {
|
||||
margin-right: $card-action-inner-spacer-x;
|
||||
margin-bottom: $card-action-inner-spacer-y;
|
||||
padding-right: $card-action-inner-spacer-x;
|
||||
padding-left: $card-action-inner-spacer-x;
|
||||
}
|
||||
}
|
||||
|
||||
.card-header-tabs {
|
||||
margin: ($card-padding-y * -1) ($card-padding-x * -1) calc(#{$card-padding-y * -1} - #{$card-border-width});
|
||||
}
|
||||
|
||||
// Image
|
||||
|
||||
.card-img {
|
||||
@include border-radius($card-border-radius);
|
||||
}
|
||||
|
||||
.card-img-bottom {
|
||||
@include border-bottom-radius($card-border-radius);
|
||||
}
|
||||
|
||||
.card-img-top {
|
||||
@include border-top-radius($card-border-radius);
|
||||
}
|
||||
|
||||
// Image overlay
|
||||
|
||||
.card-img-overlay {
|
||||
max-height: 100%;
|
||||
padding: $card-padding-y $card-padding-x;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
// Set
|
||||
|
||||
.card-columns {
|
||||
column-count: $card-columns-count;
|
||||
column-gap: $card-margin-x;
|
||||
margin-top: math.div($card-margin-y, -2);
|
||||
margin-bottom: ($card-margin-y * 0.5);
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
column-count: $card-columns-count-desktop;
|
||||
}
|
||||
|
||||
.card {
|
||||
display: inline-flex;
|
||||
margin-top: ($card-margin-y * 0.5);
|
||||
margin-bottom: ($card-margin-y * 0.5);
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.card-deck {
|
||||
@include media-breakpoint-up(sm) {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
margin-right: math.div($card-margin-x, -2);
|
||||
margin-left: math.div($card-margin-x, -2);
|
||||
}
|
||||
|
||||
.card {
|
||||
margin-bottom: $card-margin-y;
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
flex: 1 0 0;
|
||||
margin-right: ($card-margin-x * 0.5);
|
||||
margin-left: ($card-margin-x * 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-group {
|
||||
@include media-breakpoint-up(sm) {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin-bottom: $card-margin-y;
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
flex: 1 0 0;
|
||||
|
||||
&:first-child:not(:last-child) {
|
||||
@include border-right-radius(0);
|
||||
|
||||
.card-actions,
|
||||
.card-body,
|
||||
.card-footer,
|
||||
.card-header,
|
||||
.card-img,
|
||||
.card-img-bottom,
|
||||
.card-img-top {
|
||||
@include border-right-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child:not(:first-child) {
|
||||
@include border-left-radius(0);
|
||||
|
||||
.card-actions,
|
||||
.card-body,
|
||||
.card-footer,
|
||||
.card-header,
|
||||
.card-img,
|
||||
.card-img-bottom,
|
||||
.card-img-top {
|
||||
@include border-left-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:first-child):not(:last-child) {
|
||||
@include border-radius(0);
|
||||
|
||||
.card-actions,
|
||||
.card-body,
|
||||
.card-footer,
|
||||
.card-header,
|
||||
.card-img,
|
||||
.card-img-bottom,
|
||||
.card-img-top {
|
||||
@include border-radius(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Text and title
|
||||
|
||||
.card-link {
|
||||
@include active-focus-hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
+ .card-link {
|
||||
margin-left: $card-inner-spacer-x;
|
||||
}
|
||||
}
|
||||
|
||||
.card-subtitle {
|
||||
@include typography-subheading;
|
||||
|
||||
margin-top: ($card-inner-spacer-y * -1);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.card-text:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
@include typography-headline;
|
||||
|
||||
margin-bottom: $card-inner-spacer-y;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
.chip {
|
||||
background-color: $chip-bg;
|
||||
color: $chip-color;
|
||||
}
|
||||
|
||||
@each $color, $values in $theme-colors {
|
||||
.chip-#{$color} {
|
||||
background-color: theme-color($color);
|
||||
color: color-yiq(theme-color($color));
|
||||
}
|
||||
}
|
||||
|
||||
.chip-action {
|
||||
@include active-focus-hover {
|
||||
box-shadow: map-get($chip-elevation-shadow-hover, shadow);
|
||||
color: $chip-color;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: $chip-bg-active;
|
||||
}
|
||||
}
|
||||
|
||||
.chip-icon {
|
||||
background-color: $chip-icon-bg;
|
||||
color: color-yiq($chip-icon-bg);
|
||||
}
|
||||
|
|
@ -1,72 +0,0 @@
|
|||
.chip {
|
||||
align-items: center;
|
||||
border: 0;
|
||||
border-radius: ($chip-height * 0.5);
|
||||
display: inline-flex;
|
||||
font-size: $chip-font-size;
|
||||
font-weight: $chip-font-weight;
|
||||
height: $chip-height;
|
||||
justify-content: center;
|
||||
line-height: $chip-line-height;
|
||||
padding-right: $chip-padding-x;
|
||||
padding-left: $chip-padding-x;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.close {
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
margin-right: ($chip-inner-spacer-x - $chip-padding-x);
|
||||
margin-left: $chip-inner-spacer-x;
|
||||
min-height: $material-icon-size;
|
||||
min-width: $material-icon-size;
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.chip-action {
|
||||
@include transition-standard(background-color, box-shadow);
|
||||
|
||||
@include active-focus-hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.chip-icon {
|
||||
@include text-truncate;
|
||||
|
||||
align-items: center;
|
||||
border-radius: ($chip-height * 0.5);
|
||||
display: inline-flex;
|
||||
flex-shrink: 0;
|
||||
font-size: $chip-icon-font-size;
|
||||
font-style: normal;
|
||||
font-weight: $chip-font-weight;
|
||||
height: $chip-height;
|
||||
justify-content: center;
|
||||
margin-right: ($chip-inner-spacer-x * 2);
|
||||
margin-left: ($chip-padding-x * -1);
|
||||
order: -1;
|
||||
text-align: center;
|
||||
width: $chip-height;
|
||||
}
|
||||
|
||||
.chip-img {
|
||||
border-radius: ($chip-height * 0.5);
|
||||
flex-shrink: 0;
|
||||
height: $chip-height;
|
||||
margin-right: ($chip-inner-spacer-x * 2);
|
||||
margin-left: ($chip-padding-x * -1);
|
||||
order: -1;
|
||||
width: auto;
|
||||
}
|
||||
|
|
@ -1,138 +0,0 @@
|
|||
.table {
|
||||
background-color: $table-bg;
|
||||
|
||||
td,
|
||||
th {
|
||||
border-top: $table-border-width solid $table-border-color;
|
||||
}
|
||||
|
||||
tbody {
|
||||
color: $table-tbody-color;
|
||||
}
|
||||
|
||||
tfoot {
|
||||
color: $table-tfoot-color;
|
||||
}
|
||||
|
||||
thead {
|
||||
color: $table-thead-color;
|
||||
}
|
||||
|
||||
.table {
|
||||
border-top: $table-border-width solid $table-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.table-bordered {
|
||||
border: $table-border-width solid $table-border-color;
|
||||
}
|
||||
|
||||
.table-striped {
|
||||
tbody tr:nth-of-type(#{$table-striped-order}) {
|
||||
background-color: $table-bg-accent;
|
||||
}
|
||||
}
|
||||
|
||||
.table-hover {
|
||||
tbody tr {
|
||||
@include hover {
|
||||
background-color: $table-bg-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $color, $values in $theme-colors {
|
||||
.table-#{$color} {
|
||||
&,
|
||||
> td,
|
||||
> th {
|
||||
background-color: theme-color-light($color);
|
||||
color: color-yiq(theme-color-light($color));
|
||||
}
|
||||
|
||||
.table-hover & {
|
||||
@include hover {
|
||||
&,
|
||||
> td,
|
||||
> th {
|
||||
background-color: theme-color($color);
|
||||
color: color-yiq(theme-color($color));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-active {
|
||||
&,
|
||||
> td,
|
||||
> th {
|
||||
background-color: $table-bg-active;
|
||||
color: color-yiq($table-bg-active);
|
||||
}
|
||||
|
||||
.table-hover & {
|
||||
@include hover {
|
||||
&,
|
||||
> td,
|
||||
> th {
|
||||
background-color: $table-bg-active-hover;
|
||||
color: color-yiq($table-bg-active-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// stylelint-disable-next-line no-duplicate-selectors
|
||||
.table {
|
||||
.thead-dark {
|
||||
td,
|
||||
th {
|
||||
background-color: $table-dark-bg;
|
||||
color: $table-dark-color;
|
||||
}
|
||||
}
|
||||
|
||||
.thead-light {
|
||||
td,
|
||||
th {
|
||||
background-color: $table-thead-bg;
|
||||
color: $table-thead-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-dark {
|
||||
background-color: $table-dark-bg;
|
||||
color: $table-dark-color;
|
||||
|
||||
&.table-bordered {
|
||||
border-color: $table-dark-border-color;
|
||||
}
|
||||
|
||||
&.table-striped {
|
||||
tbody tr:nth-of-type(odd) {
|
||||
background-color: $table-dark-bg-accent;
|
||||
}
|
||||
}
|
||||
|
||||
&.table-hover {
|
||||
tbody tr {
|
||||
@include hover {
|
||||
background-color: $table-dark-bg-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tbody,
|
||||
tfoot,
|
||||
thead {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
td,
|
||||
th,
|
||||
.table {
|
||||
border-color: $table-dark-border-color;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,182 +0,0 @@
|
|||
.table {
|
||||
border: 0;
|
||||
margin-bottom: $table-margin-y;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
|
||||
td,
|
||||
th {
|
||||
line-height: $table-line-height;
|
||||
padding-right: $table-cell-padding-x;
|
||||
padding-left: $table-cell-padding-x;
|
||||
vertical-align: top;
|
||||
|
||||
&:first-child {
|
||||
padding-left: $table-cell-padding-x-alt;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-right: $table-cell-padding-x-alt;
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
td,
|
||||
th {
|
||||
font-size: $table-tbody-font-size;
|
||||
font-weight: $table-tbody-font-weight;
|
||||
height: $table-tbody-cell-height;
|
||||
padding-top: $table-tbody-padding-y;
|
||||
padding-bottom: $table-tbody-padding-y;
|
||||
}
|
||||
}
|
||||
|
||||
tfoot {
|
||||
td,
|
||||
th {
|
||||
font-size: $table-tfoot-font-size;
|
||||
font-weight: $table-tfoot-font-weight;
|
||||
height: $table-tfoot-cell-height;
|
||||
padding-top: $table-tfoot-padding-y;
|
||||
padding-bottom: $table-tfoot-padding-y;
|
||||
}
|
||||
}
|
||||
|
||||
thead {
|
||||
td,
|
||||
th {
|
||||
font-size: $table-thead-font-size;
|
||||
font-weight: $table-thead-font-weight;
|
||||
height: $table-thead-cell-height;
|
||||
padding-top: $table-thead-padding-y;
|
||||
padding-bottom: $table-thead-padding-y;
|
||||
}
|
||||
}
|
||||
|
||||
.card > & {
|
||||
&:first-child {
|
||||
&,
|
||||
> :first-child,
|
||||
> :first-child > tr:first-child {
|
||||
@include border-top-radius($card-border-radius);
|
||||
}
|
||||
|
||||
> :first-child > tr:first-child {
|
||||
// stylelint-disable selector-max-compound-selectors
|
||||
td,
|
||||
th {
|
||||
&:first-child {
|
||||
border-top-left-radius: $card-border-radius;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-top-right-radius: $card-border-radius;
|
||||
}
|
||||
}
|
||||
// stylelint-enable
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
&,
|
||||
> :last-child,
|
||||
> :last-child > tr:last-child {
|
||||
@include border-bottom-radius($card-border-radius);
|
||||
}
|
||||
|
||||
> :last-child > tr:last-child {
|
||||
// stylelint-disable selector-max-compound-selectors
|
||||
td,
|
||||
th {
|
||||
&:first-child {
|
||||
border-bottom-left-radius: $card-border-radius;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom-right-radius: $card-border-radius;
|
||||
}
|
||||
}
|
||||
// stylelint-enable
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> :first-child > tr:first-child {
|
||||
td,
|
||||
th {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-borderless {
|
||||
td,
|
||||
th,
|
||||
.table {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.table-bordered {
|
||||
.card > & {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.table-sm {
|
||||
td,
|
||||
th {
|
||||
padding-right: $table-sm-cell-padding-x;
|
||||
padding-left: $table-sm-cell-padding-x;
|
||||
|
||||
&:first-child {
|
||||
padding-left: $table-sm-cell-padding-x-alt;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-right: $table-sm-cell-padding-x-alt;
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
td,
|
||||
th {
|
||||
height: $table-sm-tbody-cell-height;
|
||||
padding-top: $table-sm-tbody-padding-y;
|
||||
padding-bottom: $table-sm-tbody-padding-y;
|
||||
}
|
||||
}
|
||||
|
||||
tfoot {
|
||||
td,
|
||||
th {
|
||||
padding-top: $table-sm-tfoot-padding-y;
|
||||
padding-bottom: $table-sm-tfoot-padding-y;
|
||||
}
|
||||
}
|
||||
|
||||
thead {
|
||||
td,
|
||||
th {
|
||||
height: $table-sm-thead-cell-height;
|
||||
padding-top: $table-sm-thead-padding-y;
|
||||
padding-bottom: $table-sm-thead-padding-y;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-responsive {
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
$next: breakpoint-next($breakpoint);
|
||||
$infix: breakpoint-infix($next);
|
||||
|
||||
&#{$infix} {
|
||||
@include media-breakpoint-down($breakpoint) {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
width: 100%;
|
||||
-ms-overflow-style: -ms-autohiding-scrollbar;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
.modal-backdrop {
|
||||
background-color: $dialog-backdrop-bg;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: $dialog-content-bg;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
.btn {
|
||||
background-color: transparent;
|
||||
|
||||
@each $color, $values in $theme-colors {
|
||||
&-#{$color} {
|
||||
@include plain-active-focus-hover {
|
||||
color: theme-color($color);
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
color: $btn-color-disabled;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.active,
|
||||
&:active {
|
||||
background-color: $btn-bg-active;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,188 +0,0 @@
|
|||
.modal {
|
||||
display: none;
|
||||
outline: 0;
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: map-get($dialog-elevation-shadow, elevation);
|
||||
|
||||
&.fade {
|
||||
@include transition-standard-complex(opacity);
|
||||
|
||||
.modal-dialog {
|
||||
@include transition-standard-complex(transform);
|
||||
|
||||
transform: scale($dialog-transition-scale);
|
||||
}
|
||||
}
|
||||
|
||||
&.show .modal-dialog {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.modal-open {
|
||||
overflow: hidden;
|
||||
|
||||
.modal {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Backdrop
|
||||
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: (map-get($dialog-elevation-shadow, elevation) - 1);
|
||||
}
|
||||
|
||||
// Dialog
|
||||
|
||||
.modal-content {
|
||||
@include border-radius($dialog-border-radius);
|
||||
|
||||
box-shadow: map-get($dialog-elevation-shadow, shadow);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
outline: 0;
|
||||
pointer-events: auto;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.modal-dialog {
|
||||
margin: $dialog-margin-y auto;
|
||||
max-width: $dialog-width;
|
||||
pointer-events: none;
|
||||
position: relative;
|
||||
width: calc(100% - #{$dialog-margin-x} * 2);
|
||||
}
|
||||
|
||||
.modal-dialog-centered {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
min-height: calc(100% - #{$dialog-margin-y} * 2);
|
||||
}
|
||||
|
||||
.modal-lg {
|
||||
max-width: $dialog-width-lg;
|
||||
}
|
||||
|
||||
.modal-sm {
|
||||
max-width: $dialog-width-sm;
|
||||
}
|
||||
|
||||
// Misc
|
||||
|
||||
.modal-body {
|
||||
flex: 1 1 auto;
|
||||
padding: $dialog-padding-y $dialog-padding-x;
|
||||
position: relative;
|
||||
|
||||
&:first-child {
|
||||
@include border-top-radius($dialog-border-radius);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
@include border-bottom-radius($dialog-border-radius);
|
||||
}
|
||||
|
||||
.modal-header + & {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
> :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
align-items: flex-end;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: $dialog-footer-padding-y $dialog-footer-padding-x $dialog-footer-padding-y ($dialog-footer-padding-x - $dialog-footer-inner-spacer-x);
|
||||
|
||||
&:first-child {
|
||||
@include border-top-radius($dialog-border-radius);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
@include border-bottom-radius($dialog-border-radius);
|
||||
}
|
||||
|
||||
.btn {
|
||||
box-shadow: none;
|
||||
max-width: calc(50% - #{$dialog-footer-inner-spacer-x});
|
||||
min-width: $dialog-footer-btn-min-width;
|
||||
overflow: hidden;
|
||||
padding-right: $dialog-footer-inner-spacer-x;
|
||||
padding-left: $dialog-footer-inner-spacer-x;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&.active,
|
||||
&:active {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
> * {
|
||||
margin-left: $dialog-footer-inner-spacer-x;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-footer-stacked {
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
padding-top: 0;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
|
||||
.btn {
|
||||
@include text-align(right);
|
||||
|
||||
border-radius: 0;
|
||||
margin-left: 0;
|
||||
max-width: none;
|
||||
padding: $dialog-footer-btn-stacked-padding-y $dialog-footer-btn-stacked-padding-x;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: $dialog-padding-y $dialog-padding-x;
|
||||
|
||||
&:first-child {
|
||||
@include border-top-radius($dialog-border-radius);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
@include border-bottom-radius($dialog-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include typography-title;
|
||||
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// Scrollbar measure
|
||||
|
||||
.modal-scrollbar-measure {
|
||||
height: 50px;
|
||||
overflow: scroll;
|
||||
position: absolute;
|
||||
top: -99999px;
|
||||
width: 50px;
|
||||
}
|
||||
|
|
@ -1,78 +0,0 @@
|
|||
.list-group-item {
|
||||
background-color: $expansion-panel-bg;
|
||||
color: $expansion-panel-color;
|
||||
|
||||
@include active-focus-hover {
|
||||
color: $expansion-panel-color;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: $expansion-panel-bg-active;
|
||||
color: $expansion-panel-color;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
background-color: $expansion-panel-bg;
|
||||
color: $expansion-panel-color-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
.list-group-item-action {
|
||||
color: $expansion-panel-color;
|
||||
|
||||
@include active-focus-hover {
|
||||
background-color: $expansion-panel-bg-active;
|
||||
color: $expansion-panel-color;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
background-color: $expansion-panel-bg;
|
||||
color: $expansion-panel-color-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
@each $color, $values in $theme-colors {
|
||||
.list-group-item-#{$color} {
|
||||
background-color: theme-color-light($color);
|
||||
color: color-yiq(theme-color-light($color));
|
||||
|
||||
&.active {
|
||||
background-color: theme-color($color);
|
||||
color: color-yiq(theme-color($color));
|
||||
}
|
||||
|
||||
&.list-group-item-action {
|
||||
@include active-focus-hover {
|
||||
background-color: theme-color($color);
|
||||
color: color-yiq(theme-color($color));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.expansion-panel-toggler {
|
||||
color: inherit;
|
||||
|
||||
@include active-focus-hover {
|
||||
background-color: $expansion-panel-bg-active;
|
||||
color: $expansion-panel-color;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
background-color: $expansion-panel-bg;
|
||||
color: $expansion-panel-color-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
.list-group-flush {
|
||||
.list-group-item {
|
||||
border-top: $expansion-panel-border-width solid $expansion-panel-border-color;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: $expansion-panel-border-width solid $expansion-panel-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,188 +0,0 @@
|
|||
.list-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.list-group-item {
|
||||
@include transition-standard(background-color, color);
|
||||
|
||||
box-shadow: map-get($expansion-panel-elevation-shadow, shadow);
|
||||
display: block;
|
||||
font-size: $expansion-panel-font-size;
|
||||
line-height: $expansion-panel-line-height;
|
||||
min-height: $expansion-panel-height;
|
||||
padding: $expansion-panel-padding-y $expansion-panel-padding-x;
|
||||
position: relative;
|
||||
|
||||
@include active-focus-hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
@include border-bottom-radius($expansion-panel-border-radius);
|
||||
}
|
||||
|
||||
.card & {
|
||||
padding-right: $card-padding-x;
|
||||
padding-left: $card-padding-x;
|
||||
}
|
||||
}
|
||||
|
||||
.list-group-item-action {
|
||||
text-align: inherit;
|
||||
width: 100%;
|
||||
|
||||
@include active-focus-hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Expansion panel
|
||||
|
||||
.expansion-panel {
|
||||
@include transition-standard(background-color, color, margin);
|
||||
|
||||
padding: 0;
|
||||
|
||||
&.show {
|
||||
border-radius: $expansion-panel-border-radius;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: $expansion-panel-margin-y;
|
||||
|
||||
.card & {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: $expansion-panel-margin-y;
|
||||
|
||||
.card & {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
+ .expansion-panel {
|
||||
@include border-top-radius($expansion-panel-border-radius);
|
||||
|
||||
&.show {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.card & {
|
||||
@include border-top-radius(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.show-predecessor {
|
||||
@include border-bottom-radius($expansion-panel-border-radius);
|
||||
|
||||
.card & {
|
||||
@include border-bottom-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
.card & {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.expansion-panel-body {
|
||||
padding: $expansion-panel-inner-spacer-y $expansion-panel-padding-x;
|
||||
|
||||
.card & {
|
||||
padding-right: $card-padding-x;
|
||||
padding-left: $card-padding-x;
|
||||
}
|
||||
}
|
||||
|
||||
.expansion-panel-footer {
|
||||
align-items: flex-end;
|
||||
border-top: $expansion-panel-border-width solid $expansion-panel-border-color;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: $expansion-panel-inner-spacer-y $expansion-panel-footer-padding-x ($expansion-panel-inner-spacer-y - $expansion-panel-footer-inner-spacer-y) ($expansion-panel-footer-padding-x - $expansion-panel-footer-inner-spacer-x);
|
||||
|
||||
.card & {
|
||||
padding-right: $card-padding-x;
|
||||
padding-left: ($card-padding-x - $expansion-panel-footer-inner-spacer-x);
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin-bottom: $expansion-panel-footer-inner-spacer-y;
|
||||
margin-left: $expansion-panel-footer-inner-spacer-x;
|
||||
min-width: $expansion-panel-footer-btn-min-width;
|
||||
padding-right: $expansion-panel-footer-inner-spacer-x;
|
||||
padding-left: $expansion-panel-footer-inner-spacer-x;
|
||||
|
||||
.card & {
|
||||
padding-right: ($card-padding-x - $expansion-panel-footer-padding-x);
|
||||
padding-left: ($card-padding-x - $expansion-panel-footer-padding-x);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.expansion-panel-icon {
|
||||
flex-shrink: 0;
|
||||
margin-left: $expansion-panel-inner-spacer-x;
|
||||
|
||||
.collapsed-hide {
|
||||
[data-toggle='collapse'].collapsed & {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.collapsed-show {
|
||||
[data-toggle='collapse']:not(.collapsed) & {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.expansion-panel-toggler {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
min-height: $expansion-panel-height;
|
||||
padding: $expansion-panel-padding-y $expansion-panel-padding-x;
|
||||
text-align: inherit;
|
||||
width: 100%;
|
||||
|
||||
@include active-focus-hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.card & {
|
||||
padding-right: $card-padding-x;
|
||||
padding-left: $card-padding-x;
|
||||
}
|
||||
}
|
||||
|
||||
// Flush
|
||||
|
||||
.list-group-flush {
|
||||
&:first-child .list-group-item:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
&:last-child .list-group-item:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.list-group-item {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,117 @@
|
|||
@use "sass:math";
|
||||
|
||||
@font-face {
|
||||
font-family: 'Material Icons';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url('lib/material-icons/material-icons.woff2') format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Material Icons Outlined';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url('lib/material-icons/material-icons-outlined.woff2') format('woff2');
|
||||
}
|
||||
|
||||
@mixin reset-material-icons($size: $material-icon-size) {
|
||||
font-size: $size;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
@mixin set-material-icons {
|
||||
@include reset-material-icons;
|
||||
|
||||
font-family: 'Material Icons';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px; /* Preferred icon size */
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
direction: ltr;
|
||||
|
||||
/* Support for all WebKit browsers. */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
/* Support for Safari and Chrome. */
|
||||
text-rendering: optimizeLegibility;
|
||||
|
||||
/* Support for Firefox. */
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
/* Support for IE. */
|
||||
font-feature-settings: 'liga';
|
||||
}
|
||||
|
||||
@mixin setup-material-icons-bg($size: $material-icon-size) {
|
||||
content: "";
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
height: $size;
|
||||
width: $size;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
@mixin material-icons-bg($icon) {
|
||||
background-image: $icon;
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
font-family: 'Material Icons';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
-webkit-font-feature-settings: 'liga';
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
&.outlined {
|
||||
font-family: 'Material Icons Outlined';
|
||||
}
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
@include reset-material-icons;
|
||||
|
||||
&.lg {
|
||||
@include reset-material-icons($material-icon-size-lg);
|
||||
}
|
||||
|
||||
&.xl {
|
||||
@include reset-material-icons($material-icon-size-xl);
|
||||
}
|
||||
|
||||
&.sm {
|
||||
@include reset-material-icons($material-icon-size-sm);
|
||||
}
|
||||
|
||||
&.inline {
|
||||
line-height: 1 !important;
|
||||
}
|
||||
|
||||
.btn > & {
|
||||
margin-right: calc($btn-padding-x / 2);
|
||||
}
|
||||
|
||||
.btn-lg > & {
|
||||
margin-right: calc($btn-padding-x-lg / 2);
|
||||
}
|
||||
|
||||
.btn-sm > & {
|
||||
margin-right: calc($btn-padding-x-sm / 2);
|
||||
}
|
||||
}
|
||||
|
||||
.material-icons-inline {
|
||||
font-size: inherit;
|
||||
line-height: 1;
|
||||
}
|
||||
|
|
@ -1,72 +0,0 @@
|
|||
.dropdown-menu {
|
||||
color: inherit;
|
||||
|
||||
&::before {
|
||||
background-color: $menu-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-divider {
|
||||
@include nav-divider($menu-divider-bg);
|
||||
}
|
||||
|
||||
.dropdown-header {
|
||||
color: $menu-header-color;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
color: $menu-link-color;
|
||||
|
||||
@include active-focus-hover {
|
||||
background-color: $menu-link-bg-hover;
|
||||
color: $menu-link-color;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: $menu-link-bg-hover;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
background-color: transparent;
|
||||
color: $menu-link-color-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-item-text {
|
||||
color: $menu-link-color;
|
||||
}
|
||||
|
||||
// Toggle
|
||||
|
||||
.dropdown-toggle {
|
||||
&::after {
|
||||
border-top: $caret-width solid $text-color;
|
||||
border-right: $caret-width solid transparent;
|
||||
border-bottom: 0;
|
||||
border-left: $caret-width solid transparent;
|
||||
|
||||
.dropright & {
|
||||
border-top: $caret-width solid transparent;
|
||||
border-right: 0;
|
||||
border-bottom: $caret-width solid transparent;
|
||||
border-left: $caret-width solid $text-color;
|
||||
}
|
||||
|
||||
.dropup & {
|
||||
border-top: 0;
|
||||
border-right: $caret-width solid transparent;
|
||||
border-bottom: $caret-width solid $text-color;
|
||||
border-left: $caret-width solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.dropleft & {
|
||||
&::before {
|
||||
border-top: $caret-width solid transparent;
|
||||
border-right: $caret-width solid $text-color;
|
||||
border-bottom: $caret-width solid transparent;
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,473 +0,0 @@
|
|||
@use "sass:math";
|
||||
|
||||
.dropdown,
|
||||
.dropleft,
|
||||
.dropright,
|
||||
.dropup {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
@include border-radius($menu-border-radius);
|
||||
@include text-align(left);
|
||||
|
||||
background-color: transparent;
|
||||
display: none;
|
||||
float: left;
|
||||
font-size: $menu-font-size;
|
||||
font-weight: $menu-font-weight;
|
||||
line-height: $menu-line-height;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
min-width: $menu-min-width;
|
||||
padding: $menu-padding-y 0;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
z-index: map-get($menu-elevation-shadow, elevation);
|
||||
|
||||
&.show {
|
||||
display: block;
|
||||
|
||||
&::before,
|
||||
> * {
|
||||
animation-duration: $transition-duration-mobile;
|
||||
animation-timing-function: $transition-timing-function-standard;
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
animation-duration: $transition-duration-tablet;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
animation-duration: $transition-duration-desktop;
|
||||
}
|
||||
|
||||
@media screen and (prefers-reduced-motion: reduce) {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
animation-name: dropdown-menu-show;
|
||||
}
|
||||
|
||||
> * {
|
||||
animation-name: dropdown-item-show;
|
||||
}
|
||||
|
||||
> :nth-child(1) {
|
||||
animation-name: dropdown-item-show-1;
|
||||
}
|
||||
|
||||
> :nth-child(2) {
|
||||
animation-name: dropdown-item-show-2;
|
||||
}
|
||||
|
||||
> :nth-child(3) {
|
||||
animation-name: dropdown-item-show-3;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
@include border-radius($menu-border-radius);
|
||||
|
||||
box-shadow: map-get($menu-elevation-shadow, shadow);
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
transform-origin: 0 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.nav:not(.flex-column):not(.flex-column-reverse) & {
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
margin-top: (($btn-height + $menu-padding-y) * -1 + math.div($menu-link-height - $btn-height, -2));
|
||||
|
||||
&::before {
|
||||
transform-origin: 0 ($menu-link-height * 0.5 + $menu-padding-y);
|
||||
}
|
||||
}
|
||||
|
||||
.show > a {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.dropdown-menu-right:not([x-placement]) {
|
||||
right: 0;
|
||||
left: auto;
|
||||
|
||||
&.menu::before {
|
||||
transform-origin: 100% ($menu-link-height * 0.5 + $menu-padding-y);
|
||||
}
|
||||
|
||||
&::before {
|
||||
transform-origin: 100% 0;
|
||||
}
|
||||
}
|
||||
|
||||
.dropleft {
|
||||
.dropdown-menu:not([x-placement]) {
|
||||
top: 0;
|
||||
right: 100%;
|
||||
left: auto;
|
||||
|
||||
&.menu {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&::before {
|
||||
transform-origin: 100% 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropright {
|
||||
.dropdown-menu:not([x-placement]) {
|
||||
top: 0;
|
||||
left: 100%;
|
||||
|
||||
&.menu {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&::before {
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropup {
|
||||
.dropdown-menu:not([x-placement]) {
|
||||
top: auto;
|
||||
bottom: 100%;
|
||||
|
||||
&.menu {
|
||||
margin-top: 0;
|
||||
margin-bottom: (($btn-height + $menu-padding-y) * -1 + math.div($menu-link-height - $btn-height, -2));
|
||||
|
||||
&::before {
|
||||
transform-origin: 0 calc(100% - #{$menu-link-height * 0.5 + $menu-padding-y});
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
transform-origin: 0 100%;
|
||||
}
|
||||
|
||||
> :nth-child(1),
|
||||
> :nth-child(2),
|
||||
> :nth-child(3) {
|
||||
animation-name: dropdown-item-show;
|
||||
}
|
||||
|
||||
> :nth-last-child(1) {
|
||||
animation-name: dropdown-item-show-1;
|
||||
}
|
||||
|
||||
> :nth-last-child(2) {
|
||||
animation-name: dropdown-item-show-2;
|
||||
}
|
||||
|
||||
> :nth-last-child(3) {
|
||||
animation-name: dropdown-item-show-3;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu-right:not([x-placement]) {
|
||||
&.menu::before {
|
||||
transform-origin: 100% calc(100% - #{$menu-link-height * 0.5 + $menu-padding-y});
|
||||
}
|
||||
|
||||
&::before {
|
||||
transform-origin: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu[x-placement='bottom-end']::before,
|
||||
.dropdown-menu[x-placement='left-start']::before {
|
||||
transform-origin: 100% 0;
|
||||
}
|
||||
|
||||
.dropdown-menu[x-placement='top-end'].show,
|
||||
.dropdown-menu[x-placement='top-start'].show {
|
||||
> :nth-child(1),
|
||||
> :nth-child(2),
|
||||
> :nth-child(3) {
|
||||
animation-name: dropdown-item-show;
|
||||
}
|
||||
|
||||
> :nth-last-child(1) {
|
||||
animation-name: dropdown-item-show-1;
|
||||
}
|
||||
|
||||
> :nth-last-child(2) {
|
||||
animation-name: dropdown-item-show-2;
|
||||
}
|
||||
|
||||
> :nth-last-child(3) {
|
||||
animation-name: dropdown-item-show-3;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu[x-placement='top-end']::before {
|
||||
transform-origin: 100% 100%;
|
||||
}
|
||||
|
||||
.dropdown-menu[x-placement='top-start']::before {
|
||||
transform-origin: 0 100%;
|
||||
}
|
||||
|
||||
.menu[x-placement='bottom-end']::before {
|
||||
transform-origin: 100% ($menu-link-height * 0.5 + $menu-padding-y);
|
||||
}
|
||||
|
||||
.menu[x-placement='left-start'],
|
||||
.menu[x-placement='right-start'] {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.menu[x-placement='left-start']::before {
|
||||
transform-origin: 100% 0;
|
||||
}
|
||||
|
||||
.menu[x-placement='right-start']::before {
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
|
||||
.menu[x-placement='top-end'],
|
||||
.menu[x-placement='top-start'] {
|
||||
margin-top: 0;
|
||||
margin-bottom: (($btn-height + $menu-padding-y) * -1 + math.div($menu-link-height - $btn-height, -2));
|
||||
}
|
||||
|
||||
.menu[x-placement='top-end']::before {
|
||||
transform-origin: 100% calc(100% - #{$menu-link-height * 0.5 + $menu-padding-y});
|
||||
}
|
||||
|
||||
.menu[x-placement='top-start']::before {
|
||||
transform-origin: 0 calc(100% - #{$menu-link-height * 0.5 + $menu-padding-y});
|
||||
}
|
||||
|
||||
@keyframes dropdown-item-show {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
99% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dropdown-item-show-1 {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
40% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dropdown-item-show-2 {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dropdown-item-show-3 {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
80% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dropdown-menu-show {
|
||||
0% {
|
||||
transform: scale(0, 0);
|
||||
}
|
||||
|
||||
20% {
|
||||
transform: scale(math.div(1, 3), 0);
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: scale(math.div(2, 3), 0.25);
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: scale(1, 0.5);
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: scale(1, 0.75);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes menu-animation {
|
||||
0% {
|
||||
margin-top: (($menu-link-height + $menu-padding-y) * -1);
|
||||
}
|
||||
|
||||
100% {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Cascading menu for desktop
|
||||
|
||||
.dropdown-menu-sm,
|
||||
.menu-cascading {
|
||||
font-size: $menu-font-size-cascading;
|
||||
line-height: $menu-line-height-cascading;
|
||||
padding-top: $menu-padding-y-cascading;
|
||||
padding-bottom: $menu-padding-y-cascading;
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
min-width: $menu-min-width-cascading;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-cascading {
|
||||
margin-top: (($menu-link-height-cascading - ($menu-link-height-cascading - $menu-line-height-cascading) * 0.5) * -1 + $menu-padding-y-cascading * -1);
|
||||
|
||||
&[x-placement='top-end'],
|
||||
&[x-placement='top-start'] {
|
||||
margin-top: 0;
|
||||
margin-bottom: (($menu-link-height-cascading - ($menu-link-height-cascading - $menu-line-height-cascading) * 0.5) * -1 + $menu-padding-y-cascading * -1);
|
||||
}
|
||||
|
||||
&[x-placement='top-end']::before {
|
||||
transform-origin: 100% calc(100% - #{$menu-link-height-cascading * 0.5 + $menu-padding-y-cascading});
|
||||
}
|
||||
|
||||
&[x-placement='top-start']::before {
|
||||
transform-origin: 0 calc(100% - #{$menu-link-height-cascading * 0.5 + $menu-padding-y-cascading});
|
||||
}
|
||||
}
|
||||
|
||||
// Header
|
||||
|
||||
.dropdown-header {
|
||||
display: block;
|
||||
font-size: $menu-font-size;
|
||||
font-weight: bolder;
|
||||
line-height: $menu-line-height;
|
||||
margin: 0;
|
||||
padding: $menu-link-padding-y $menu-link-padding-x;
|
||||
white-space: nowrap;
|
||||
|
||||
.dropdown-menu-sm &,
|
||||
.menu-cascading & {
|
||||
font-size: $menu-font-size-cascading;
|
||||
line-height: $menu-line-height-cascading;
|
||||
padding: $menu-link-padding-y-cascading $menu-link-padding-x-cascading;
|
||||
}
|
||||
}
|
||||
|
||||
// Link
|
||||
|
||||
.dropdown-item {
|
||||
@include transition-standard(background-color, color);
|
||||
|
||||
background: none;
|
||||
border: 0;
|
||||
clear: both;
|
||||
display: block;
|
||||
font-weight: inherit;
|
||||
padding: $menu-link-padding-y $menu-link-padding-x;
|
||||
position: relative;
|
||||
text-align: inherit;
|
||||
transform-origin: 0 0;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
|
||||
@include active-focus-hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.dropdown-menu-sm &,
|
||||
.menu-cascading & {
|
||||
padding: $menu-link-padding-y-cascading $menu-link-padding-x-cascading;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-item-text {
|
||||
display: block;
|
||||
font-weight: inherit;
|
||||
padding: $menu-link-padding-y $menu-link-padding-x;
|
||||
transform-origin: 0 0;
|
||||
|
||||
.dropdown-menu-sm &,
|
||||
.menu-cascading & {
|
||||
padding: $menu-link-padding-y-cascading $menu-link-padding-x-cascading;
|
||||
}
|
||||
}
|
||||
|
||||
// Toggle
|
||||
|
||||
.dropdown-toggle {
|
||||
&::after {
|
||||
display: inline-block;
|
||||
margin-left: $caret-spacing;
|
||||
vertical-align: $caret-vertical-align;
|
||||
content: "";
|
||||
}
|
||||
|
||||
&:empty::after {
|
||||
margin-left: ($caret-spacing * -1);
|
||||
}
|
||||
|
||||
.dropleft & {
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&::before {
|
||||
display: inline-block;
|
||||
margin-right: $caret-spacing;
|
||||
vertical-align: $caret-vertical-align;
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,89 +0,0 @@
|
|||
.navdrawer-backdrop {
|
||||
background-color: $navdrawer-backdrop-bg;
|
||||
}
|
||||
|
||||
.navdrawer-content {
|
||||
background-color: $navdrawer-content-bg;
|
||||
}
|
||||
|
||||
.navdrawer-divider {
|
||||
@include nav-divider($navdrawer-divider-bg);
|
||||
}
|
||||
|
||||
.navdrawer-header {
|
||||
background-color: $navdrawer-header-bg;
|
||||
border-bottom: $navdrawer-header-border-width solid $navdrawer-header-border-color;
|
||||
}
|
||||
|
||||
.navdrawer-subheader {
|
||||
color: $navdrawer-subheader-color;
|
||||
}
|
||||
|
||||
.navdrawer-nav {
|
||||
.nav-link {
|
||||
color: $navdrawer-nav-link-color;
|
||||
|
||||
@include active-focus-hover {
|
||||
background-color: $navdrawer-nav-link-bg-hover;
|
||||
}
|
||||
|
||||
&.active,
|
||||
&:active {
|
||||
color: $navdrawer-nav-link-color-active;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
background-color: transparent;
|
||||
color: $navdrawer-nav-link-color-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
.active > .nav-link {
|
||||
color: $navdrawer-nav-link-color-active;
|
||||
}
|
||||
}
|
||||
|
||||
.navdrawer-nav-icon {
|
||||
color: $navdrawer-nav-icon-color;
|
||||
width: $navdrawer-nav-icon-width;
|
||||
|
||||
.nav-link:active &,
|
||||
.nav-link.active & {
|
||||
color: $navdrawer-nav-link-color-active;
|
||||
}
|
||||
}
|
||||
|
||||
.active > .nav-link .navdrawer-nav-icon {
|
||||
color: $navdrawer-nav-link-color-active;
|
||||
}
|
||||
|
||||
// Permanent, persistent and temporary variations
|
||||
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
$next: breakpoint-next($breakpoint);
|
||||
$infix: breakpoint-infix($next);
|
||||
|
||||
.navdrawer-permanent#{$infix} {
|
||||
border-right: $navdrawer-border-width solid $navdrawer-border-color;
|
||||
|
||||
&.navdrawer-right {
|
||||
border-left: $navdrawer-border-width solid $navdrawer-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.navdrawer-persistent#{$infix} {
|
||||
&.navdrawer-persistent-clipped {
|
||||
border-top: $navdrawer-border-width solid $navdrawer-border-color;
|
||||
}
|
||||
|
||||
&.navdrawer-right {
|
||||
.navdrawer-content {
|
||||
border-left: $navdrawer-border-width solid $navdrawer-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.navdrawer-content {
|
||||
border-right: $navdrawer-border-width solid $navdrawer-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue