chg: [instance:settings] Support of BS5 in setting page
parent
de8ee047f9
commit
20a7903573
|
@ -158,13 +158,13 @@ function getResolvableID($sectionName, $panelName=false)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
$('.tab-content .input-group-actions .btn-save-setting').click(function() {
|
$('.tab-content .setting-group .btn-save-setting').click(function() {
|
||||||
const $input = $(this).closest('.input-group').find('input, select')
|
const $input = $(this).closest('.input-group').find('input, select')
|
||||||
const settingName = $input.data('setting-name')
|
const settingName = $input.data('setting-name')
|
||||||
const settingValue = $input.val()
|
const settingValue = $input.val()
|
||||||
saveSetting(this, $input, settingName, settingValue)
|
saveSetting(this, $input, settingName, settingValue)
|
||||||
})
|
})
|
||||||
$('.tab-content .input-group-actions .btn-reset-setting').click(function() {
|
$('.tab-content .setting-group .btn-reset-setting').click(function() {
|
||||||
const $btn = $(this)
|
const $btn = $(this)
|
||||||
const $input = $btn.closest('.input-group').find('input, select')
|
const $input = $btn.closest('.input-group').find('input, select')
|
||||||
let oldValue = settingsFlattened[$input.data('setting-name')].value
|
let oldValue = settingsFlattened[$input.data('setting-name')].value
|
||||||
|
@ -213,34 +213,31 @@ function getResolvableID($sectionName, $panelName=false)
|
||||||
|
|
||||||
function removeWarnings($input) {
|
function removeWarnings($input) {
|
||||||
const $inputGroup = $input.closest('.input-group')
|
const $inputGroup = $input.closest('.input-group')
|
||||||
const $inputGroupAppend = $inputGroup.find('.input-group-actions')
|
const $btnSettingAction = $inputGroup.find('.btn-setting-action')
|
||||||
const $saveButton = $inputGroup.find('button.btn-save-setting')
|
const $saveButton = $('.setting-group button.btn-save-setting')
|
||||||
$input.removeClass(['is-invalid', 'border-warning', 'border-danger', 'border-info', 'warning', 'info'])
|
$input.removeClass(['is-invalid', 'border-warning', 'border-danger', 'border-info', 'warning', 'info'])
|
||||||
$inputGroupAppend.removeClass('d-none')
|
$btnSettingAction.removeClass('d-none')
|
||||||
if ($input.is('select') && $input.find('option:selected').data('is-empty-option') == 1) {
|
if ($input.is('select') && $input.find('option:selected').data('is-empty-option') == 1) {
|
||||||
$inputGroupAppend.addClass('d-none') // hide save button if empty selection picked
|
$btnSettingAction.addClass('d-none') // hide save button if empty selection picked
|
||||||
}
|
}
|
||||||
$inputGroup.parent().find('.invalid-feedback').removeClass('d-block')
|
$inputGroup.parent().find('.invalid-feedback').removeClass('d-block')
|
||||||
}
|
}
|
||||||
|
|
||||||
function restoreWarnings($input) {
|
function restoreWarnings($input) {
|
||||||
const $inputGroup = $input.closest('.input-group')
|
const $inputGroup = $input.closest('.input-group')
|
||||||
const $inputGroupAppend = $inputGroup.find('.input-group-actions')
|
const $btnSettingAction = $inputGroup.find('.btn-setting-action')
|
||||||
const $saveButton = $inputGroup.find('button.btn-save-setting')
|
const $saveButton = $('.setting-group button.btn-save-setting')
|
||||||
const setting = settingsFlattened[$input.data('setting-name')]
|
const setting = settingsFlattened[$input.data('setting-name')]
|
||||||
if (setting.error) {
|
if (setting.error) {
|
||||||
borderVariant = setting.severity !== undefined ? variantFromSeverity[setting.severity] : 'warning'
|
borderVariant = setting.severity !== undefined ? variantFromSeverity[setting.severity] : 'warning'
|
||||||
$input.addClass(['is-invalid', `border-${borderVariant}`, borderVariant])
|
$input.addClass(['is-invalid', `border-${borderVariant}`, borderVariant])
|
||||||
if (setting.severity == 'warning') {
|
|
||||||
$input.addClass('warning')
|
|
||||||
}
|
|
||||||
$inputGroup.parent().find('.invalid-feedback').addClass('d-block').text(setting.errorMessage)
|
$inputGroup.parent().find('.invalid-feedback').addClass('d-block').text(setting.errorMessage)
|
||||||
} else {
|
} else {
|
||||||
removeWarnings($input)
|
removeWarnings($input)
|
||||||
}
|
}
|
||||||
const $callout = $input.closest('.settings-group')
|
const $callout = $input.closest('.settings-group')
|
||||||
updateCalloutColors($callout)
|
updateCalloutColors($callout)
|
||||||
$inputGroupAppend.addClass('d-none')
|
$btnSettingAction.addClass('d-none')
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateCalloutColors($callout) {
|
function updateCalloutColors($callout) {
|
||||||
|
@ -285,12 +282,6 @@ function getResolvableID($sectionName, $panelName=false)
|
||||||
.input-group-actions {
|
.input-group-actions {
|
||||||
z-index: 5;
|
z-index: 5;
|
||||||
}
|
}
|
||||||
a.btn-reset-setting {
|
|
||||||
left: -1.25em;
|
|
||||||
}
|
|
||||||
.custom-select ~ div > a.btn-reset-setting {
|
|
||||||
left: -2.5em;
|
|
||||||
}
|
|
||||||
.form-control[type="number"] ~ div > a.btn-reset-setting {
|
.form-control[type="number"] ~ div > a.btn-reset-setting {
|
||||||
left: -3em;
|
left: -3em;
|
||||||
}
|
}
|
||||||
|
|
|
@ -40,18 +40,16 @@
|
||||||
'settingName' => $settingName,
|
'settingName' => $settingName,
|
||||||
]);
|
]);
|
||||||
|
|
||||||
$inputGroupSave = $this->Bootstrap->genNode('div', [
|
$inputGroupSave = $this->Bootstrap->button([
|
||||||
'class' => ['d-none', 'position-relative', 'input-group-actions'],
|
'icon' => 'times',
|
||||||
], implode('', [
|
'variant' => 'secondary',
|
||||||
$this->Bootstrap->genNode('a', [
|
'class' => ['btn-setting-action', 'btn-reset-setting', 'd-none'],
|
||||||
'class' => ['position-absolute', 'fas fa-times', 'p-abs-center-y', 'text-reset text-decoration-none', 'btn-reset-setting'],
|
]);
|
||||||
'href' => '#',
|
$inputGroupSave .= $this->Bootstrap->button([
|
||||||
]),
|
'text' => __('save'),
|
||||||
$this->Bootstrap->genNode('button', [
|
'variant' => 'success',
|
||||||
'class' => ['btn', 'btn-success', 'btn-save-setting'],
|
'class' => ['btn-setting-action', 'btn-save-setting', 'd-none'],
|
||||||
'type' => 'button',
|
]);
|
||||||
], __('save')),
|
|
||||||
]));
|
|
||||||
$inputGroup = $this->Bootstrap->genNode('div', [
|
$inputGroup = $this->Bootstrap->genNode('div', [
|
||||||
'class' => ['input-group'],
|
'class' => ['input-group'],
|
||||||
], implode('', [$input, $inputGroupSave]));
|
], implode('', [$input, $inputGroupSave]));
|
||||||
|
|
|
@ -61,7 +61,7 @@ $cakeDescription = 'Cerebrate';
|
||||||
<?= $this->fetch('meta') ?>
|
<?= $this->fetch('meta') ?>
|
||||||
<?= $this->fetch('css') ?>
|
<?= $this->fetch('css') ?>
|
||||||
<?= $this->fetch('script') ?>
|
<?= $this->fetch('script') ?>
|
||||||
<?= $this->Html->css('bootstrap-additional.css') ?>
|
<?= $this->Html->css('themes/bootstrap-additional.css') ?>
|
||||||
|
|
||||||
<?= $this->Html->script('Tags.tagging') ?>
|
<?= $this->Html->script('Tags.tagging') ?>
|
||||||
<?= $this->Html->css('Tags.tagging') ?>
|
<?= $this->Html->css('Tags.tagging') ?>
|
||||||
|
|
|
@ -1,207 +0,0 @@
|
||||||
/* utils */
|
|
||||||
.mw-75 {
|
|
||||||
max-width: 75% !important;
|
|
||||||
}
|
|
||||||
.mw-50 {
|
|
||||||
max-width: 50% !important;
|
|
||||||
}
|
|
||||||
.mw-25 {
|
|
||||||
max-width: 25% !important;
|
|
||||||
}
|
|
||||||
.mh-75 {
|
|
||||||
max-height: 75% !important;
|
|
||||||
}
|
|
||||||
.mh-50 {
|
|
||||||
max-height: 50% !important;
|
|
||||||
}
|
|
||||||
.mh-25 {
|
|
||||||
max-height: 25% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Toast */
|
|
||||||
.toast {
|
|
||||||
min-width: 250px;
|
|
||||||
}
|
|
||||||
.toast-primary {
|
|
||||||
color: #004085;
|
|
||||||
background-color: #cce5ff;
|
|
||||||
border-color: #b8daff;
|
|
||||||
}
|
|
||||||
.toast-primary strong {
|
|
||||||
color: #002752;
|
|
||||||
}
|
|
||||||
.toast-secondary {
|
|
||||||
color: #383d41;
|
|
||||||
background-color: #e2e3e5;
|
|
||||||
border-color: #d6d8db;
|
|
||||||
}
|
|
||||||
.toast-secondary strong {
|
|
||||||
color: #202326;
|
|
||||||
}
|
|
||||||
.toast-success {
|
|
||||||
color: #155724 !important;
|
|
||||||
background-color: #d4edda !important;
|
|
||||||
border-color: #c3e6cb !important;
|
|
||||||
}
|
|
||||||
.toast-success strong {
|
|
||||||
color: #0b2e13;
|
|
||||||
}
|
|
||||||
.toast-info {
|
|
||||||
color: #0c5460;
|
|
||||||
background-color: #d1ecf1;
|
|
||||||
border-color: #bee5eb;
|
|
||||||
}
|
|
||||||
.toast-info strong {
|
|
||||||
color: #062c33;
|
|
||||||
}
|
|
||||||
.toast-warning {
|
|
||||||
color: #856404;
|
|
||||||
background-color: #fff3cd;
|
|
||||||
border-color: #ffeeba;
|
|
||||||
}
|
|
||||||
.toast-warning strong {
|
|
||||||
color: #533f03;
|
|
||||||
}
|
|
||||||
.toast-danger {
|
|
||||||
color: #721c24;
|
|
||||||
background-color: #f8d7da;
|
|
||||||
border-color: #f5c6cb;
|
|
||||||
}
|
|
||||||
.toast-danger strong {
|
|
||||||
color: #491217;
|
|
||||||
}
|
|
||||||
.toast-light {
|
|
||||||
color: #818182;
|
|
||||||
background-color: #fefefe;
|
|
||||||
border-color: #fdfdfe;
|
|
||||||
}
|
|
||||||
.toast-light strong {
|
|
||||||
color: #686868;
|
|
||||||
}
|
|
||||||
.toast-dark {
|
|
||||||
color: #1b1e21;
|
|
||||||
background-color: #d6d8d9;
|
|
||||||
border-color: #c6c8ca;
|
|
||||||
}
|
|
||||||
.toast-dark strong {
|
|
||||||
color: #040505;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.progress-timeline {
|
|
||||||
padding: 0.2em 0.2em 0.5em 0.2em;
|
|
||||||
}
|
|
||||||
div.progress-timeline ul {
|
|
||||||
position: relative;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
div.progress-timeline li {
|
|
||||||
list-style-type: none;
|
|
||||||
position: relative
|
|
||||||
}
|
|
||||||
div.progress-timeline li.progress-inactive {
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
div.progress-timeline .progress-line {
|
|
||||||
height: 2px;
|
|
||||||
/* background: gray; */
|
|
||||||
}
|
|
||||||
div.progress-timeline .progress-line.progress-inactive {
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.callout {
|
|
||||||
border: 1px solid #00000000;
|
|
||||||
border-left-color: var(--bs-light);
|
|
||||||
border-left-width: 1px;
|
|
||||||
border-left-width: .25rem;
|
|
||||||
border-radius: .25rem;
|
|
||||||
}
|
|
||||||
.callout-primary {
|
|
||||||
border-left-color: var(--bs-primary);
|
|
||||||
}
|
|
||||||
.callout-info {
|
|
||||||
border-left-color: var(--bs-info);
|
|
||||||
}
|
|
||||||
.callout-success {
|
|
||||||
border-left-color: var(--bs-success);
|
|
||||||
}
|
|
||||||
.callout-warning {
|
|
||||||
border-left-color: var(--bs-warning);
|
|
||||||
}
|
|
||||||
.callout-danger {
|
|
||||||
border-left-color: var(--bs-danger);
|
|
||||||
}
|
|
||||||
.callout-dark {
|
|
||||||
border-left-color: var(--bs-dark);
|
|
||||||
}
|
|
||||||
.callout-light {
|
|
||||||
border-left-color: var(--bs-light);
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-control.is-invalid.warning {
|
|
||||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23ffc107' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23ffc107' stroke='none'/%3e%3c/svg%3e")
|
|
||||||
}
|
|
||||||
.form-control.is-invalid.warning:focus {
|
|
||||||
box-shadow: 0 0 0 0.2rem #ffc10740;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-control.is-invalid.info {
|
|
||||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2317a2b8' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%2317a2b8' stroke='none'/%3e%3c/svg%3e")
|
|
||||||
}
|
|
||||||
.form-control.is-invalid.info:focus {
|
|
||||||
box-shadow: 0 0 0 0.2rem #17a2b840;
|
|
||||||
}
|
|
||||||
|
|
||||||
.custom-select.is-invalid.warning {
|
|
||||||
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23ffc107' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23ffc107' stroke='none'/%3e%3c/svg%3e") #fff no-repeat center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
|
||||||
}
|
|
||||||
.custom-select.is-invalid.info {
|
|
||||||
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2317a2b8' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%2317a2b8' stroke='none'/%3e%3c/svg%3e") #fff no-repeat center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-check-input.is-invalid.warning ~ .form-check-label {
|
|
||||||
color: unset;
|
|
||||||
}
|
|
||||||
.form-check-input.is-invalid.warning ~ .form-check-label::before {
|
|
||||||
border-color: #ffc107;
|
|
||||||
}
|
|
||||||
.form-check-input.is-invalid.warning:checked ~ .form-check-label::before {
|
|
||||||
background-color: #ffc107;
|
|
||||||
}
|
|
||||||
.form-check-input.is-invalid.warning:focus:not(:checked) ~ .form-check-label::before {
|
|
||||||
border-color: #ffc107;
|
|
||||||
}
|
|
||||||
.form-check-input.is-invalid.warning:focus ~ .form-check-label::before {
|
|
||||||
box-shadow: 0 0 0 0.2rem #ffc10740;
|
|
||||||
}
|
|
||||||
.form-check-input.is-invalid.info ~ .form-check-label {
|
|
||||||
color: unset;
|
|
||||||
}
|
|
||||||
.form-check-input.is-invalid.info ~ .form-check-label::before {
|
|
||||||
border-color: #17a2b8;
|
|
||||||
}
|
|
||||||
.form-check-input.is-invalid.info:checked ~ .form-check-label::before {
|
|
||||||
background-color: #17a2b8;
|
|
||||||
}
|
|
||||||
.form-check-input.is-invalid.info:focus:not(:checked) ~ .form-check-label::before {
|
|
||||||
border-color: #17a2b8;
|
|
||||||
}
|
|
||||||
.form-check-input.is-invalid.info:focus ~ .form-check-label::before {
|
|
||||||
box-shadow: 0 0 0 0.2rem #17a2b840;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-abs-center-y {
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-abs-center-x {
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-abs-center-both {
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%) translateY(-50%);
|
|
||||||
}
|
|
|
@ -21,78 +21,6 @@
|
||||||
color:black;
|
color:black;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* .sidebar {}
|
|
||||||
|
|
||||||
.side-bar-ul {
|
|
||||||
top: 70px;
|
|
||||||
left:0;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.side-bar-ul li {
|
|
||||||
line-height: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.side-bar-ul .sidebar-header {
|
|
||||||
padding-left: 10px;
|
|
||||||
color: black;
|
|
||||||
}
|
|
||||||
|
|
||||||
.side-bar-ul .sidebar-element {
|
|
||||||
padding-left: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.side-bar-ul li a {
|
|
||||||
display: block;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-header a {
|
|
||||||
color: black;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-element a {
|
|
||||||
color: #999999;
|
|
||||||
}
|
|
||||||
|
|
||||||
.side-bar-ul li a:hover {
|
|
||||||
text-decoration: none;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.side-bar-ul li:hover {
|
|
||||||
background: #007bff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.side-bar-ul .active {
|
|
||||||
background: #007bff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.side-bar-ul .active a {
|
|
||||||
color: white !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.side-bar-ul li a:active, .side-bar-ul li a:focus {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.side-bar-ul>.sidebar-brand {
|
|
||||||
height: 65px;
|
|
||||||
font-size: 18px;
|
|
||||||
line-height: 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.side-bar-ul>.sidebar-brand a {
|
|
||||||
color: #999999;
|
|
||||||
}
|
|
||||||
|
|
||||||
.side-bar-ul>.sidebar-brand a:hover {
|
|
||||||
color: #fff;
|
|
||||||
background: none;
|
|
||||||
} */
|
|
||||||
|
|
||||||
@media(min-width:768px) {
|
@media(min-width:768px) {
|
||||||
#wrapper {
|
#wrapper {
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
|
|
File diff suppressed because it is too large
Load Diff
|
@ -353,9 +353,9 @@ class Toaster {
|
||||||
if (options.title !== false || options.titleHtml !== false) {
|
if (options.title !== false || options.titleHtml !== false) {
|
||||||
var $toastHeaderText
|
var $toastHeaderText
|
||||||
if (options.titleHtml !== false) {
|
if (options.titleHtml !== false) {
|
||||||
$toastHeaderText = $('<div class="mr-auto"/>').html(options.titleHtml);
|
$toastHeaderText = $('<div class="me-auto"/>').html(options.titleHtml);
|
||||||
} else {
|
} else {
|
||||||
$toastHeaderText = $('<strong class="mr-auto"/>').text(options.title)
|
$toastHeaderText = $('<strong class="me-auto"/>').text(options.title)
|
||||||
}
|
}
|
||||||
$toastHeader.append($toastHeaderText)
|
$toastHeader.append($toastHeaderText)
|
||||||
}
|
}
|
||||||
|
@ -369,7 +369,7 @@ class Toaster {
|
||||||
$toastHeader.append($toastHeaderMuted)
|
$toastHeader.append($toastHeaderMuted)
|
||||||
}
|
}
|
||||||
if (options.closeButton) {
|
if (options.closeButton) {
|
||||||
var $closeButton = $('<button type="button" class="ml-2 mb-1 close" data-bs-dismiss="toast" aria-label="Close"></button>')
|
var $closeButton = $('<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>')
|
||||||
.click(function() {
|
.click(function() {
|
||||||
$(this).closest('.toast').data('toastObject').removeToast()
|
$(this).closest('.toast').data('toastObject').removeToast()
|
||||||
})
|
})
|
||||||
|
@ -531,7 +531,7 @@ class ModalFactory {
|
||||||
'confirm-danger',
|
'confirm-danger',
|
||||||
]
|
]
|
||||||
|
|
||||||
static closeButtonHtml = '<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"></button>'
|
static closeButtonHtml = '<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>'
|
||||||
|
|
||||||
/** Create the HTML of the modal and inject it into the DOM */
|
/** Create the HTML of the modal and inject it into the DOM */
|
||||||
makeModal() {
|
makeModal() {
|
||||||
|
|
|
@ -0,0 +1,144 @@
|
||||||
|
@import "../node_modules/bootstrap/scss/functions";
|
||||||
|
@import "../node_modules/bootstrap/scss/variables";
|
||||||
|
@import "../node_modules/bootstrap/scss/mixins";
|
||||||
|
@import "../node_modules/bootstrap/scss/utilities";
|
||||||
|
|
||||||
|
@import "mixins/callout";
|
||||||
|
@import "mixins/toast";
|
||||||
|
@import "mixins/forms-severity";
|
||||||
|
|
||||||
|
/* Callout */
|
||||||
|
.callout {
|
||||||
|
border: 1px solid $gray-200;
|
||||||
|
border-left-color: $gray-200;
|
||||||
|
border-left-width: 1px;
|
||||||
|
border-left-width: .25rem;
|
||||||
|
border-radius: .25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $color, $value in $theme-colors {
|
||||||
|
.callout-#{$color} {
|
||||||
|
@include callout-variant($value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Toasts */
|
||||||
|
$toast-bg-level: -7 !default;
|
||||||
|
$toast-border-level: -6 !default;
|
||||||
|
$toast-color-level: 7 !default;
|
||||||
|
|
||||||
|
.toast {
|
||||||
|
min-width: 250px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $color, $value in $theme-colors {
|
||||||
|
.toast-#{$color} {
|
||||||
|
@include toast-variant(theme-color-level($color, $toast-bg-level), theme-color-level($color, $toast-border-level), theme-color-level($color, $toast-color-level));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Progress Timeline */
|
||||||
|
.progress-timeline {
|
||||||
|
padding: 0.2em 0.2em 0.5em 0.2em;
|
||||||
|
ul {
|
||||||
|
position: relative;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
li {
|
||||||
|
list-style-type: none;
|
||||||
|
position: relative
|
||||||
|
}
|
||||||
|
li.progress-inactive {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
.progress-line {
|
||||||
|
height: 2px;
|
||||||
|
}
|
||||||
|
.progress-line.progress-inactive {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Forms severity */
|
||||||
|
.form-control.is-invalid {
|
||||||
|
&.info {
|
||||||
|
@include form-control-validation-severity-state(theme-color("info"));
|
||||||
|
}
|
||||||
|
&.warning {
|
||||||
|
@include form-control-validation-severity-state(theme-color("warning"));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-select.is-invalid:not([multiple]):not([size]),
|
||||||
|
.form-select.is-invalid:not([multiple])[size="1"]
|
||||||
|
.form-select.is-invalid {
|
||||||
|
&.info {
|
||||||
|
@include form-select-validation-severity-state(theme-color("info"));
|
||||||
|
}
|
||||||
|
&.warning {
|
||||||
|
@include form-select-validation-severity-state(theme-color("warning"));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-check-input.is-invalid {
|
||||||
|
&.info {
|
||||||
|
@include form-check-input-validation-severity-state(theme-color("info"));
|
||||||
|
}
|
||||||
|
&.warning {
|
||||||
|
@include form-check-input-validation-severity-state(theme-color("warning"));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Utilities */
|
||||||
|
// Use bootstrap's utilities API with something like this
|
||||||
|
// $utilities: map-merge(
|
||||||
|
// $utilities,
|
||||||
|
// (
|
||||||
|
// "max-width": map-merge(
|
||||||
|
// map-get($utilities, "max-width"),
|
||||||
|
// (
|
||||||
|
// values: map-merge(
|
||||||
|
// map-get(map-get($utilities, "max-width"), "values"),
|
||||||
|
// (
|
||||||
|
// 25: 25%,
|
||||||
|
// 50: 50%,
|
||||||
|
// 75: 75%,
|
||||||
|
// ),
|
||||||
|
// ),
|
||||||
|
// ),
|
||||||
|
// )
|
||||||
|
// )
|
||||||
|
// );
|
||||||
|
.mw-75 {
|
||||||
|
max-width: 75% !important;
|
||||||
|
}
|
||||||
|
.mw-50 {
|
||||||
|
max-width: 50% !important;
|
||||||
|
}
|
||||||
|
.mw-25 {
|
||||||
|
max-width: 25% !important;
|
||||||
|
}
|
||||||
|
.mh-75 {
|
||||||
|
max-height: 75% !important;
|
||||||
|
}
|
||||||
|
.mh-50 {
|
||||||
|
max-height: 50% !important;
|
||||||
|
}
|
||||||
|
.mh-25 {
|
||||||
|
max-height: 25% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-abs-center-y {
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
.p-abs-center-x {
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
.p-abs-center-both {
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%) translateY(-50%);
|
||||||
|
}
|
|
@ -0,0 +1,4 @@
|
||||||
|
@mixin callout-variant($border) {
|
||||||
|
border-left-color: $border;
|
||||||
|
}
|
||||||
|
|
|
@ -0,0 +1,32 @@
|
||||||
|
@mixin form-control-validation-severity-state($color) {
|
||||||
|
background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='#{$color}' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$color}' stroke='none'/></svg>"));
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
border-color: $color;
|
||||||
|
box-shadow: 0 0 0 $custom-select-focus-width rgba($color, .25);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin form-select-validation-severity-state($color) {
|
||||||
|
background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$color}' stroke='none'/></svg>"));
|
||||||
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
box-shadow: 0 0 0 $custom-select-focus-width rgba($color, .25);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin form-check-input-validation-severity-state($color) {
|
||||||
|
& {
|
||||||
|
border-color: $color;
|
||||||
|
}
|
||||||
|
&:checked {
|
||||||
|
background-color: $color;
|
||||||
|
}
|
||||||
|
& ~ .form-check-label {
|
||||||
|
color: unset;
|
||||||
|
}
|
||||||
|
&:focus {
|
||||||
|
box-shadow: 0 0 0 0.2rem rgba($color, .25);
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,10 @@
|
||||||
|
@mixin toast-variant($background, $border, $color) {
|
||||||
|
color: $color;
|
||||||
|
@include gradient-bg($background);
|
||||||
|
border-color: $border;
|
||||||
|
|
||||||
|
strong {
|
||||||
|
border-top-color: darken($border, 5%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue