Version 0.7.0 #1
@ -1 +0,0 @@
|
|||||||
import './bootstrap';
|
|
7
resources/volt/LICENSE.md
Normal file
7
resources/volt/LICENSE.md
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
Copyright 2021 Themesberg (Crafty Dwarf LLC)
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
2332
resources/volt/images/illustrations/signin.svg
Normal file
2332
resources/volt/images/illustrations/signin.svg
Normal file
File diff suppressed because it is too large
Load Diff
After Width: | Height: | Size: 64 KiB |
5
resources/volt/js/app.js
Normal file
5
resources/volt/js/app.js
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
import.meta.glob([
|
||||||
|
'../images/**',
|
||||||
|
]);
|
||||||
|
import './bootstrap';
|
||||||
|
import './volt.js';
|
362
resources/volt/js/volt.js
Normal file
362
resources/volt/js/volt.js
Normal file
@ -0,0 +1,362 @@
|
|||||||
|
/*
|
||||||
|
|
||||||
|
=========================================================
|
||||||
|
* Volt Pro - Premium Bootstrap 5 Dashboard
|
||||||
|
=========================================================
|
||||||
|
|
||||||
|
* Product Page: https://themesberg.com/product/admin-dashboard/volt-bootstrap-5-dashboard
|
||||||
|
* Copyright 2021 Themesberg (https://www.themesberg.com)
|
||||||
|
|
||||||
|
* Designed and coded by https://themesberg.com
|
||||||
|
|
||||||
|
=========================================================
|
||||||
|
|
||||||
|
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. Please contact us to request a removal. Contact us if you want to remove it.
|
||||||
|
|
||||||
|
*/
|
||||||
|
|
||||||
|
"use strict";
|
||||||
|
const d = document;
|
||||||
|
|
||||||
|
import 'bootstrap';
|
||||||
|
import Swal from 'sweetalert2';
|
||||||
|
import SmoothScroll from 'smooth-scroll';
|
||||||
|
|
||||||
|
d.addEventListener("DOMContentLoaded", function(event) {
|
||||||
|
|
||||||
|
const swalWithBootstrapButtons = Swal.mixin({
|
||||||
|
customClass: {
|
||||||
|
confirmButton: 'btn btn-primary me-3',
|
||||||
|
cancelButton: 'btn btn-gray'
|
||||||
|
},
|
||||||
|
buttonsStyling: false
|
||||||
|
});
|
||||||
|
|
||||||
|
var themeSettingsEl = document.getElementById('theme-settings');
|
||||||
|
var themeSettingsExpandEl = document.getElementById('theme-settings-expand');
|
||||||
|
|
||||||
|
if(themeSettingsEl) {
|
||||||
|
|
||||||
|
var themeSettingsCollapse = new bootstrap.Collapse(themeSettingsEl, {
|
||||||
|
show: true,
|
||||||
|
toggle: false
|
||||||
|
});
|
||||||
|
|
||||||
|
if (window.localStorage.getItem('settings_expanded') === 'true') {
|
||||||
|
themeSettingsCollapse.show();
|
||||||
|
themeSettingsExpandEl.classList.remove('show');
|
||||||
|
} else {
|
||||||
|
themeSettingsCollapse.hide();
|
||||||
|
themeSettingsExpandEl.classList.add('show');
|
||||||
|
}
|
||||||
|
|
||||||
|
themeSettingsEl.addEventListener('hidden.bs.collapse', function () {
|
||||||
|
themeSettingsExpandEl.classList.add('show');
|
||||||
|
window.localStorage.setItem('settings_expanded', false);
|
||||||
|
});
|
||||||
|
|
||||||
|
themeSettingsExpandEl.addEventListener('click', function () {
|
||||||
|
themeSettingsExpandEl.classList.remove('show');
|
||||||
|
window.localStorage.setItem('settings_expanded', true);
|
||||||
|
setTimeout(function() {
|
||||||
|
themeSettingsCollapse.show();
|
||||||
|
}, 300);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// options
|
||||||
|
const breakpoints = {
|
||||||
|
sm: 540,
|
||||||
|
md: 720,
|
||||||
|
lg: 960,
|
||||||
|
xl: 1140
|
||||||
|
};
|
||||||
|
|
||||||
|
var sidebar = document.getElementById('sidebarMenu')
|
||||||
|
if(sidebar && d.body.clientWidth < breakpoints.lg) {
|
||||||
|
sidebar.addEventListener('shown.bs.collapse', function () {
|
||||||
|
document.querySelector('body').style.position = 'fixed';
|
||||||
|
});
|
||||||
|
sidebar.addEventListener('hidden.bs.collapse', function () {
|
||||||
|
document.querySelector('body').style.position = 'relative';
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
var iconNotifications = d.querySelector('.notification-bell');
|
||||||
|
if (iconNotifications) {
|
||||||
|
iconNotifications.addEventListener('shown.bs.dropdown', function () {
|
||||||
|
iconNotifications.classList.remove('unread');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
[].slice.call(d.querySelectorAll('[data-background]')).map(function(el) {
|
||||||
|
el.style.background = 'url(' + el.getAttribute('data-background') + ')';
|
||||||
|
});
|
||||||
|
|
||||||
|
[].slice.call(d.querySelectorAll('[data-background-lg]')).map(function(el) {
|
||||||
|
if(document.body.clientWidth > breakpoints.lg) {
|
||||||
|
el.style.background = 'url(' + el.getAttribute('data-background-lg') + ')';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
[].slice.call(d.querySelectorAll('[data-background-color]')).map(function(el) {
|
||||||
|
el.style.background = 'url(' + el.getAttribute('data-background-color') + ')';
|
||||||
|
});
|
||||||
|
|
||||||
|
[].slice.call(d.querySelectorAll('[data-color]')).map(function(el) {
|
||||||
|
el.style.color = 'url(' + el.getAttribute('data-color') + ')';
|
||||||
|
});
|
||||||
|
|
||||||
|
//Tooltips
|
||||||
|
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
|
||||||
|
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
|
||||||
|
return new bootstrap.Tooltip(tooltipTriggerEl)
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
// Popovers
|
||||||
|
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
|
||||||
|
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
|
||||||
|
return new bootstrap.Popover(popoverTriggerEl)
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
// Datepicker
|
||||||
|
var datepickers = [].slice.call(d.querySelectorAll('[data-datepicker]'))
|
||||||
|
var datepickersList = datepickers.map(function (el) {
|
||||||
|
return new Datepicker(el, {
|
||||||
|
buttonClass: 'btn'
|
||||||
|
});
|
||||||
|
})
|
||||||
|
|
||||||
|
if(d.querySelector('.input-slider-container')) {
|
||||||
|
[].slice.call(d.querySelectorAll('.input-slider-container')).map(function(el) {
|
||||||
|
var slider = el.querySelector(':scope .input-slider');
|
||||||
|
var sliderId = slider.getAttribute('id');
|
||||||
|
var minValue = slider.getAttribute('data-range-value-min');
|
||||||
|
var maxValue = slider.getAttribute('data-range-value-max');
|
||||||
|
|
||||||
|
var sliderValue = el.querySelector(':scope .range-slider-value');
|
||||||
|
var sliderValueId = sliderValue.getAttribute('id');
|
||||||
|
var startValue = sliderValue.getAttribute('data-range-value-low');
|
||||||
|
|
||||||
|
var c = d.getElementById(sliderId),
|
||||||
|
id = d.getElementById(sliderValueId);
|
||||||
|
|
||||||
|
noUiSlider.create(c, {
|
||||||
|
start: [parseInt(startValue)],
|
||||||
|
connect: [true, false],
|
||||||
|
//step: 1000,
|
||||||
|
range: {
|
||||||
|
'min': [parseInt(minValue)],
|
||||||
|
'max': [parseInt(maxValue)]
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (d.getElementById('input-slider-range')) {
|
||||||
|
var c = d.getElementById("input-slider-range"),
|
||||||
|
low = d.getElementById("input-slider-range-value-low"),
|
||||||
|
e = d.getElementById("input-slider-range-value-high"),
|
||||||
|
f = [d, e];
|
||||||
|
|
||||||
|
noUiSlider.create(c, {
|
||||||
|
start: [parseInt(low.getAttribute('data-range-value-low')), parseInt(e.getAttribute('data-range-value-high'))],
|
||||||
|
connect: !0,
|
||||||
|
tooltips: true,
|
||||||
|
range: {
|
||||||
|
min: parseInt(c.getAttribute('data-range-value-min')),
|
||||||
|
max: parseInt(c.getAttribute('data-range-value-max'))
|
||||||
|
}
|
||||||
|
}), c.noUiSlider.on("update", function (a, b) {
|
||||||
|
f[b].textContent = a[b]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
//Chartist
|
||||||
|
|
||||||
|
if(d.querySelector('.ct-chart-sales-value')) {
|
||||||
|
//Chart 5
|
||||||
|
new Chartist.Line('.ct-chart-sales-value', {
|
||||||
|
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||||
|
series: [
|
||||||
|
[0, 10, 30, 40, 80, 60, 100]
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
low: 0,
|
||||||
|
showArea: true,
|
||||||
|
fullWidth: true,
|
||||||
|
plugins: [
|
||||||
|
Chartist.plugins.tooltip()
|
||||||
|
],
|
||||||
|
axisX: {
|
||||||
|
// On the x-axis start means top and end means bottom
|
||||||
|
position: 'end',
|
||||||
|
showGrid: true
|
||||||
|
},
|
||||||
|
axisY: {
|
||||||
|
// On the y-axis start means left and end means right
|
||||||
|
showGrid: false,
|
||||||
|
showLabel: false,
|
||||||
|
labelInterpolationFnc: function(value) {
|
||||||
|
return '$' + (value / 1) + 'k';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if(d.querySelector('.ct-chart-ranking')) {
|
||||||
|
var chart = new Chartist.Bar('.ct-chart-ranking', {
|
||||||
|
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
|
||||||
|
series: [
|
||||||
|
[1, 5, 2, 5, 4, 3],
|
||||||
|
[2, 3, 4, 8, 1, 2],
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
low: 0,
|
||||||
|
showArea: true,
|
||||||
|
plugins: [
|
||||||
|
Chartist.plugins.tooltip()
|
||||||
|
],
|
||||||
|
axisX: {
|
||||||
|
// On the x-axis start means top and end means bottom
|
||||||
|
position: 'end'
|
||||||
|
},
|
||||||
|
axisY: {
|
||||||
|
// On the y-axis start means left and end means right
|
||||||
|
showGrid: false,
|
||||||
|
showLabel: false,
|
||||||
|
offset: 0
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
chart.on('draw', function(data) {
|
||||||
|
if(data.type === 'line' || data.type === 'area') {
|
||||||
|
data.element.animate({
|
||||||
|
d: {
|
||||||
|
begin: 2000 * data.index,
|
||||||
|
dur: 2000,
|
||||||
|
from: data.path.clone().scale(1, 0).translate(0, data.chartRect.height()).stringify(),
|
||||||
|
to: data.path.clone().stringify(),
|
||||||
|
easing: Chartist.Svg.Easing.easeOutQuint
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if(d.querySelector('.ct-chart-traffic-share')) {
|
||||||
|
var data = {
|
||||||
|
series: [70, 20, 10]
|
||||||
|
};
|
||||||
|
|
||||||
|
var sum = function(a, b) { return a + b };
|
||||||
|
|
||||||
|
new Chartist.Pie('.ct-chart-traffic-share', data, {
|
||||||
|
labelInterpolationFnc: function(value) {
|
||||||
|
return Math.round(value / data.series.reduce(sum) * 100) + '%';
|
||||||
|
},
|
||||||
|
low: 0,
|
||||||
|
high: 8,
|
||||||
|
donut: true,
|
||||||
|
donutWidth: 20,
|
||||||
|
donutSolid: true,
|
||||||
|
fullWidth: false,
|
||||||
|
showLabel: false,
|
||||||
|
plugins: [
|
||||||
|
Chartist.plugins.tooltip()
|
||||||
|
],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (d.getElementById('loadOnClick')) {
|
||||||
|
d.getElementById('loadOnClick').addEventListener('click', function () {
|
||||||
|
var button = this;
|
||||||
|
var loadContent = d.getElementById('extraContent');
|
||||||
|
var allLoaded = d.getElementById('allLoadedText');
|
||||||
|
|
||||||
|
button.classList.add('btn-loading');
|
||||||
|
button.setAttribute('disabled', 'true');
|
||||||
|
|
||||||
|
setTimeout(function () {
|
||||||
|
loadContent.style.display = 'block';
|
||||||
|
button.style.display = 'none';
|
||||||
|
allLoaded.style.display = 'block';
|
||||||
|
}, 1500);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
var scroll = new SmoothScroll('a[href*="#"]', {
|
||||||
|
speed: 500,
|
||||||
|
speedAsDuration: true
|
||||||
|
});
|
||||||
|
|
||||||
|
if(d.querySelector('.current-year')){
|
||||||
|
d.querySelector('.current-year').textContent = new Date().getFullYear();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Glide JS
|
||||||
|
|
||||||
|
if (d.querySelector('.glide')) {
|
||||||
|
new Glide('.glide', {
|
||||||
|
type: 'carousel',
|
||||||
|
startAt: 0,
|
||||||
|
perView: 3
|
||||||
|
}).mount();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (d.querySelector('.glide-testimonials')) {
|
||||||
|
new Glide('.glide-testimonials', {
|
||||||
|
type: 'carousel',
|
||||||
|
startAt: 0,
|
||||||
|
perView: 1,
|
||||||
|
autoplay: 2000
|
||||||
|
}).mount();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (d.querySelector('.glide-clients')) {
|
||||||
|
new Glide('.glide-clients', {
|
||||||
|
type: 'carousel',
|
||||||
|
startAt: 0,
|
||||||
|
perView: 5,
|
||||||
|
autoplay: 2000
|
||||||
|
}).mount();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (d.querySelector('.glide-news-widget')) {
|
||||||
|
new Glide('.glide-news-widget', {
|
||||||
|
type: 'carousel',
|
||||||
|
startAt: 0,
|
||||||
|
perView: 1,
|
||||||
|
autoplay: 2000
|
||||||
|
}).mount();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (d.querySelector('.glide-autoplay')) {
|
||||||
|
new Glide('.glide-autoplay', {
|
||||||
|
type: 'carousel',
|
||||||
|
startAt: 0,
|
||||||
|
perView: 3,
|
||||||
|
autoplay: 2000
|
||||||
|
}).mount();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Pricing countup
|
||||||
|
var billingSwitchEl = d.getElementById('billingSwitch');
|
||||||
|
if(billingSwitchEl) {
|
||||||
|
const countUpStandard = new countUp.CountUp('priceStandard', 99, { startVal: 199 });
|
||||||
|
const countUpPremium = new countUp.CountUp('pricePremium', 199, { startVal: 299 });
|
||||||
|
|
||||||
|
billingSwitchEl.addEventListener('change', function() {
|
||||||
|
if(billingSwitch.checked) {
|
||||||
|
countUpStandard.start();
|
||||||
|
countUpPremium.start();
|
||||||
|
} else {
|
||||||
|
countUpStandard.reset();
|
||||||
|
countUpPremium.reset();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
1
resources/volt/scss/_variables.scss
Normal file
1
resources/volt/scss/_variables.scss
Normal file
@ -0,0 +1 @@
|
|||||||
|
// $primary: blue;
|
89
resources/volt/scss/app.scss
Normal file
89
resources/volt/scss/app.scss
Normal file
@ -0,0 +1,89 @@
|
|||||||
|
/*
|
||||||
|
|
||||||
|
=========================================================
|
||||||
|
* Volt - Free Bootstrap 5 Dashboard
|
||||||
|
=========================================================
|
||||||
|
|
||||||
|
* Product Page: https://themesberg.com/product/admin-dashboard/volt-bootstrap-5-dashboard
|
||||||
|
* Copyright 2021 Themesberg (https://www.themesberg.com)
|
||||||
|
|
||||||
|
* Designed and coded by https://themesberg.com
|
||||||
|
|
||||||
|
=========================================================
|
||||||
|
|
||||||
|
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. Please contact us to request a removal. Contact us if you want to remove it.
|
||||||
|
|
||||||
|
*/
|
||||||
|
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
|
||||||
|
|
||||||
|
// update variables here
|
||||||
|
@import "variables";
|
||||||
|
|
||||||
|
@import "bootstrap/scss/functions";
|
||||||
|
@import "volt/variables";
|
||||||
|
|
||||||
|
// Third party
|
||||||
|
@import 'vanillajs-datepicker/sass/datepicker.scss';
|
||||||
|
@import "chartist/dist/scss/chartist.scss";
|
||||||
|
|
||||||
|
// Bootstrap
|
||||||
|
@import "bootstrap/scss/variables";
|
||||||
|
@import "bootstrap/scss/mixins";
|
||||||
|
@import "bootstrap/scss/utilities";
|
||||||
|
|
||||||
|
// Modify utilities here
|
||||||
|
@import "volt/utilities";
|
||||||
|
|
||||||
|
// Bootstrap 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";
|
||||||
|
|
||||||
|
// Helpers
|
||||||
|
@import "bootstrap/scss/helpers";
|
||||||
|
|
||||||
|
// Utilities
|
||||||
|
@import "bootstrap/scss/utilities/api";
|
||||||
|
// scss-docs-end import-stack
|
||||||
|
|
||||||
|
// volt mixins & functions
|
||||||
|
@import "volt/mixins";
|
||||||
|
@import "volt/functions";
|
||||||
|
|
||||||
|
// Layout
|
||||||
|
@import "volt/layout";
|
||||||
|
|
||||||
|
// Components
|
||||||
|
@import "volt/components";
|
||||||
|
|
||||||
|
// Forms
|
||||||
|
@import "volt/forms";
|
||||||
|
|
||||||
|
// write your custom styles here!
|
30
resources/volt/scss/volt/_components.scss
Normal file
30
resources/volt/scss/volt/_components.scss
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
@import "components/body";
|
||||||
|
@import "components/accordions";
|
||||||
|
@import "components/animations";
|
||||||
|
@import "components/alerts";
|
||||||
|
@import "components/avatars";
|
||||||
|
@import "components/badge";
|
||||||
|
@import "components/buttons";
|
||||||
|
@import "components/breadcrumb";
|
||||||
|
@import "components/card";
|
||||||
|
@import "components/carousel";
|
||||||
|
@import "components/close";
|
||||||
|
@import "components/custom-forms";
|
||||||
|
@import "components/charts";
|
||||||
|
@import "components/dropdown";
|
||||||
|
@import "components/icons";
|
||||||
|
@import "components/images";
|
||||||
|
@import "components/list-group";
|
||||||
|
@import "components/modal";
|
||||||
|
@import "components/nav";
|
||||||
|
@import "components/pagination";
|
||||||
|
@import "components/popover";
|
||||||
|
@import "components/progress";
|
||||||
|
@import "components/shapes";
|
||||||
|
@import "components/datepicker";
|
||||||
|
@import "components/steps";
|
||||||
|
@import "components/tables";
|
||||||
|
@import "components/type";
|
||||||
|
@import "components/timelines";
|
||||||
|
@import "components/tooltip";
|
||||||
|
@import "components/scrollbar";
|
4
resources/volt/scss/volt/_forms.scss
Normal file
4
resources/volt/scss/volt/_forms.scss
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
@import "forms/form-control";
|
||||||
|
@import "forms/form-check";
|
||||||
|
@import "forms/input-group";
|
||||||
|
@import "forms/form-select";
|
23
resources/volt/scss/volt/_functions.scss
Executable file
23
resources/volt/scss/volt/_functions.scss
Executable file
@ -0,0 +1,23 @@
|
|||||||
|
// Retrieve color Sass maps
|
||||||
|
|
||||||
|
@function section-color($key: "primary") {
|
||||||
|
@return map-get($section-colors, $key);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Lines colors
|
||||||
|
|
||||||
|
@function shapes-primary-color($key: "step-1-gradient-bg") {
|
||||||
|
@return map-get($shapes-primary-colors, $key);
|
||||||
|
}
|
||||||
|
|
||||||
|
@function shapes-default-color($key: "step-1-gradient-bg") {
|
||||||
|
@return map-get($shapes-default-colors, $key);
|
||||||
|
}
|
||||||
|
|
||||||
|
@function lines-light-color($key: "step-1-gradient-bg") {
|
||||||
|
@return map-get($shapes-light-colors, $key);
|
||||||
|
}
|
||||||
|
|
||||||
|
@function shapes-dark-color($key: "step-1-gradient-bg") {
|
||||||
|
@return map-get($shapes-dark-colors, $key);
|
||||||
|
}
|
5
resources/volt/scss/volt/_layout.scss
Normal file
5
resources/volt/scss/volt/_layout.scss
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
@import "layout/navbar";
|
||||||
|
@import "layout/section";
|
||||||
|
@import "layout/footer";
|
||||||
|
@import "layout/sidebar";
|
||||||
|
@import "layout/sidenav";
|
7
resources/volt/scss/volt/_mixins.scss
Executable file
7
resources/volt/scss/volt/_mixins.scss
Executable file
@ -0,0 +1,7 @@
|
|||||||
|
@import "mixins/animations";
|
||||||
|
@import "mixins/background-variant";
|
||||||
|
@import "mixins/icon";
|
||||||
|
@import "mixins/modals";
|
||||||
|
@import "mixins/popover";
|
||||||
|
@import "mixins/transform";
|
||||||
|
@import "mixins/utilities";
|
95
resources/volt/scss/volt/_utilities.scss
Executable file
95
resources/volt/scss/volt/_utilities.scss
Executable file
@ -0,0 +1,95 @@
|
|||||||
|
// check docs https://v5.getbootstrap.com/docs/5.0/utilities/api/
|
||||||
|
|
||||||
|
$utilities: map-merge(
|
||||||
|
$utilities,
|
||||||
|
(
|
||||||
|
"blur": (
|
||||||
|
property: backdrop-filter,
|
||||||
|
class: blur,
|
||||||
|
values: (
|
||||||
|
0: blur(0),
|
||||||
|
1: blur(1px),
|
||||||
|
2: blur(2px),
|
||||||
|
3: blur(3px),
|
||||||
|
4: blur(4px),
|
||||||
|
5: blur(5px),
|
||||||
|
6: blur(6px),
|
||||||
|
7: blur(7px),
|
||||||
|
8: blur(8px),
|
||||||
|
9: blur(91px),
|
||||||
|
10: blur(10px),
|
||||||
|
11: blur(11px),
|
||||||
|
12: blur(12px),
|
||||||
|
13: blur(13px),
|
||||||
|
14: blur(14px),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
"opacity": (
|
||||||
|
property: opacity,
|
||||||
|
class: o,
|
||||||
|
values: (
|
||||||
|
0: 0,
|
||||||
|
25: 0.25,
|
||||||
|
50: 0.5,
|
||||||
|
75: 0.75,
|
||||||
|
100: 1,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
"z-index": (
|
||||||
|
property: z-index,
|
||||||
|
class: z,
|
||||||
|
values: (
|
||||||
|
0: 0,
|
||||||
|
1: 1,
|
||||||
|
2: 2,
|
||||||
|
3: 3,
|
||||||
|
999: 999,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
"viewport-height": (
|
||||||
|
property: height,
|
||||||
|
class: vh,
|
||||||
|
responsive: true,
|
||||||
|
values: (
|
||||||
|
100: 100vh,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
"font-weight": (
|
||||||
|
property: font-weight,
|
||||||
|
class: fw,
|
||||||
|
values: (
|
||||||
|
light: $font-weight-light,
|
||||||
|
lighter: $font-weight-lighter,
|
||||||
|
normal: $font-weight-normal,
|
||||||
|
bold: $font-weight-bold,
|
||||||
|
bolder: $font-weight-bolder,
|
||||||
|
extrabold: $font-weight-extrabold,
|
||||||
|
black: $font-weight-black,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
"max-width": (
|
||||||
|
property: max-width,
|
||||||
|
class: fmxw,
|
||||||
|
values: (
|
||||||
|
100: 100px,
|
||||||
|
200: 200px,
|
||||||
|
300: 300px,
|
||||||
|
400: 400px,
|
||||||
|
500: 500px,
|
||||||
|
999: 999px,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
"min-height": (
|
||||||
|
property: min-height,
|
||||||
|
class: fmxh,
|
||||||
|
values: (
|
||||||
|
100: 100px,
|
||||||
|
200: 200px,
|
||||||
|
300: 300px,
|
||||||
|
400: 400px,
|
||||||
|
500: 500px,
|
||||||
|
999: 999px,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
)
|
||||||
|
);
|
1660
resources/volt/scss/volt/_variables.scss
Normal file
1660
resources/volt/scss/volt/_variables.scss
Normal file
File diff suppressed because it is too large
Load Diff
6
resources/volt/scss/volt/_vendor.scss
Normal file
6
resources/volt/scss/volt/_vendor.scss
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
// Vendor
|
||||||
|
@import "vendor/headroom";
|
||||||
|
@import "vendor/nouislider";
|
||||||
|
@import "vendor/prism";
|
||||||
|
@import "vendor/chartist/chartist";
|
||||||
|
@import "vendor/datepicker";
|
52
resources/volt/scss/volt/components/_accordions.scss
Executable file
52
resources/volt/scss/volt/components/_accordions.scss
Executable file
@ -0,0 +1,52 @@
|
|||||||
|
/**
|
||||||
|
* = Accordions
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
.accordion-button {
|
||||||
|
text-align: left;
|
||||||
|
&:not(.collapsed) {
|
||||||
|
&::after {
|
||||||
|
background-image: none;
|
||||||
|
@include transform(rotateZ(45deg));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Accordion icon
|
||||||
|
&::after {
|
||||||
|
background-image: none;
|
||||||
|
content: '\f067';
|
||||||
|
font-family: $font-awesome-5;
|
||||||
|
font-size: $font-size-base;
|
||||||
|
font-weight: 900;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover{
|
||||||
|
background-color: $gray-200;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Flush accordion items
|
||||||
|
//
|
||||||
|
// Remove borders and border-radius to keep accordion items edge-to-edge.
|
||||||
|
|
||||||
|
.accordion-flush {
|
||||||
|
.accordion-button {
|
||||||
|
background-color: transparent;
|
||||||
|
&:not(.collapsed) {
|
||||||
|
color: $tertiary;
|
||||||
|
}
|
||||||
|
&:focus {
|
||||||
|
border-color: $gray-300;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.accordion-collapse {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
10
resources/volt/scss/volt/components/_alerts.scss
Normal file
10
resources/volt/scss/volt/components/_alerts.scss
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
.alert-heading{
|
||||||
|
font-weight: $font-weight-bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-icon{
|
||||||
|
margin-bottom: .5rem;
|
||||||
|
span{
|
||||||
|
font-size: $alert-icon-font-size;
|
||||||
|
}
|
||||||
|
}
|
234
resources/volt/scss/volt/components/_animations.scss
Normal file
234
resources/volt/scss/volt/components/_animations.scss
Normal file
@ -0,0 +1,234 @@
|
|||||||
|
|
||||||
|
/**
|
||||||
|
* = Animations
|
||||||
|
*/
|
||||||
|
|
||||||
|
@for $size from 1 to 10 {
|
||||||
|
.animate-up-#{$size},
|
||||||
|
.animate-right-#{$size},
|
||||||
|
.animate-down-#{$size},
|
||||||
|
.animate-left-#{$size},
|
||||||
|
.scale-up-#{$size},
|
||||||
|
.scale-down-#{$size} {
|
||||||
|
transition: $transition-base;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scale-up-#{$size} {
|
||||||
|
&:hover {
|
||||||
|
transform: scale($size * 0.5555555556);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.scale-up-hover-#{$size} {
|
||||||
|
&:hover {
|
||||||
|
& .scale {
|
||||||
|
transform: scale($size * 0.5555555556);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.scale-down-#{$size} {
|
||||||
|
&:hover {
|
||||||
|
transform: scale($size * 0.4);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-up-#{$size} {
|
||||||
|
&:hover,
|
||||||
|
.animate-hover:hover & {
|
||||||
|
@include translate(0, -#{$size}px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.animate-right-#{$size} {
|
||||||
|
&:hover,
|
||||||
|
.animate-hover:hover & {
|
||||||
|
@include translate(#{$size}px, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.animate-down-#{$size} {
|
||||||
|
&:hover,
|
||||||
|
.animate-hover:hover & {
|
||||||
|
@include translate(0, #{$size}px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.animate-left-#{$size} {
|
||||||
|
&:hover,
|
||||||
|
.animate-hover:hover & {
|
||||||
|
@include translate(-#{$size}px, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Keyframes
|
||||||
|
@keyframes show-navbar-collapse {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(.95);
|
||||||
|
transform-origin: 100% 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes hide-navbar-collapse {
|
||||||
|
from {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1);
|
||||||
|
transform-origin: 100% 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(.95);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes show-navbar-dropdown {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translate(0, 10px) perspective(200px) rotateX(-2deg);
|
||||||
|
transition: visibility 0.45s, opacity 0.45s, transform 0.45s;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translate(0, 0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes hide-navbar-dropdown {
|
||||||
|
from {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translate(0, 10px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes show-dropdown {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
transform-origin: perspective(200px) rotateX(-2deg);
|
||||||
|
transition: visibility 0.45s, opacity .5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@keyframes hide-dropdown {
|
||||||
|
from {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translate(0, 10px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bell-shake {
|
||||||
|
&.shaking {
|
||||||
|
animation: bellshake .5s cubic-bezier(.36,.07,.19,.97) both;
|
||||||
|
backface-visibility: hidden;
|
||||||
|
transform-origin: top right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--animate-duration: 1s;
|
||||||
|
--animate-delay: 1s;
|
||||||
|
--animate-repeat: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate__animated {
|
||||||
|
-webkit-animation-duration: 1s;
|
||||||
|
animation-duration: 1s;
|
||||||
|
-webkit-animation-duration: var(--animate-duration);
|
||||||
|
animation-duration: var(--animate-duration);
|
||||||
|
-webkit-animation-fill-mode: both;
|
||||||
|
animation-fill-mode: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate__jackInTheBox {
|
||||||
|
-webkit-animation-name: jackInTheBox;
|
||||||
|
animation-name: jackInTheBox;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bellshake {
|
||||||
|
0% { transform: rotate(0); }
|
||||||
|
15% { transform: rotate(5deg); }
|
||||||
|
30% { transform: rotate(-5deg); }
|
||||||
|
45% { transform: rotate(4deg); }
|
||||||
|
60% { transform: rotate(-4deg); }
|
||||||
|
75% { transform: rotate(2deg); }
|
||||||
|
85% { transform: rotate(-2deg); }
|
||||||
|
92% { transform: rotate(1deg); }
|
||||||
|
100% { transform: rotate(0); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes jackInTheBox {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
-webkit-transform: scale(0.1) rotate(30deg);
|
||||||
|
transform: scale(0.1) rotate(30deg);
|
||||||
|
-webkit-transform-origin: center bottom;
|
||||||
|
transform-origin: center bottom;
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
-webkit-transform: rotate(-10deg);
|
||||||
|
transform: rotate(-10deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
70% {
|
||||||
|
-webkit-transform: rotate(3deg);
|
||||||
|
transform: rotate(3deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
-webkit-transform: scale(1);
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes jackInTheBox {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
-webkit-transform: scale(0.1) rotate(30deg);
|
||||||
|
transform: scale(0.1) rotate(30deg);
|
||||||
|
-webkit-transform-origin: center bottom;
|
||||||
|
transform-origin: center bottom;
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
-webkit-transform: rotate(-10deg);
|
||||||
|
transform: rotate(-10deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
70% {
|
||||||
|
-webkit-transform: rotate(3deg);
|
||||||
|
transform: rotate(3deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
-webkit-transform: scale(1);
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.animate__jackInTheBox {
|
||||||
|
-webkit-animation-name: jackInTheBox;
|
||||||
|
animation-name: jackInTheBox;
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*=shadow] {
|
||||||
|
transition: all .2s ease;
|
||||||
|
}
|
102
resources/volt/scss/volt/components/_avatars.scss
Executable file
102
resources/volt/scss/volt/components/_avatars.scss
Executable file
@ -0,0 +1,102 @@
|
|||||||
|
/**
|
||||||
|
* = Avatars
|
||||||
|
*/
|
||||||
|
|
||||||
|
.avatar + .avatar-content {
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-sm {
|
||||||
|
width: $avatar-sm-y;
|
||||||
|
height: $avatar-sm-x;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: $avatar-sm-y;
|
||||||
|
height: $avatar-sm-x;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
width: $avatar-y;
|
||||||
|
height: $avatar-x;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: $avatar-y;
|
||||||
|
height: $avatar-x;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-md {
|
||||||
|
width: $avatar-md-y;
|
||||||
|
height: $avatar-md-x;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: $avatar-md-y;
|
||||||
|
height: $avatar-md-x;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-lg {
|
||||||
|
width: $avatar-lg-y;
|
||||||
|
height: $avatar-lg-x;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: $avatar-lg-y;
|
||||||
|
height: $avatar-lg-x;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-xl {
|
||||||
|
width: $avatar-xl-y;
|
||||||
|
height: $avatar-xl-x;
|
||||||
|
|
||||||
|
@include media-breakpoint-down(lg) {
|
||||||
|
width: $avatar-lg-y;
|
||||||
|
height: $avatar-lg-x;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.avatar-offline,
|
||||||
|
.avatar-online {
|
||||||
|
&::before {
|
||||||
|
position: absolute;
|
||||||
|
border: 2px solid $white;
|
||||||
|
background-color: $success;
|
||||||
|
display: block;
|
||||||
|
top: 2px;
|
||||||
|
left: 39px;
|
||||||
|
content: "";
|
||||||
|
border-radius: 50%;
|
||||||
|
height: 10px;
|
||||||
|
width: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-offline {
|
||||||
|
&::before {
|
||||||
|
background-color: $danger;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Overlapped avatars
|
||||||
|
.avatar-group {
|
||||||
|
.avatar {
|
||||||
|
position: relative;
|
||||||
|
z-index: 0;
|
||||||
|
|
||||||
|
img {
|
||||||
|
border: 2px solid $white;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar + .avatar {
|
||||||
|
margin-left: -1rem;
|
||||||
|
}
|
||||||
|
}
|
98
resources/volt/scss/volt/components/_badge.scss
Executable file
98
resources/volt/scss/volt/components/_badge.scss
Executable file
@ -0,0 +1,98 @@
|
|||||||
|
/**
|
||||||
|
* = Badges
|
||||||
|
*/
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
font-size:$badge-font-size;
|
||||||
|
font-weight: $badge-font-weight;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.super-badge{
|
||||||
|
vertical-align: super;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Variations
|
||||||
|
.badge-pill {
|
||||||
|
padding-right: $badge-pill-padding-x;
|
||||||
|
padding-left: $badge-pill-padding-x;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Multiple inline badges
|
||||||
|
.badge-inline {
|
||||||
|
margin-right: .625rem;
|
||||||
|
|
||||||
|
& + span {
|
||||||
|
top: 2px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
& > a {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Sizes
|
||||||
|
.badge-sm {
|
||||||
|
padding: .2rem .6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-lg {
|
||||||
|
font-size: $font-size-lg;
|
||||||
|
padding: .35rem .85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
//button badges
|
||||||
|
|
||||||
|
.btn{
|
||||||
|
.badge-corner{
|
||||||
|
position: absolute;
|
||||||
|
top: -50%;
|
||||||
|
right: .5rem;
|
||||||
|
transform: translate(50%,50%);
|
||||||
|
margin: 0;
|
||||||
|
border: 3px solid;
|
||||||
|
padding-left: .5rem;
|
||||||
|
padding-right: .5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//Tags
|
||||||
|
.wi-tags{
|
||||||
|
a {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0.125rem 0.875rem;
|
||||||
|
margin: 0.25rem;
|
||||||
|
line-height: 2;
|
||||||
|
font-size: $font-size-sm;
|
||||||
|
box-shadow: $box-shadow-sm;
|
||||||
|
background-color: $white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pixel-pro-badge{
|
||||||
|
position: relative;
|
||||||
|
font-size: $font-size-sm;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: $font-weight-bold;
|
||||||
|
right: -11px;
|
||||||
|
padding: 4px 12px;
|
||||||
|
top: -30px;
|
||||||
|
background: $white;
|
||||||
|
@include border-radius($border-radius-sm);
|
||||||
|
@include box-shadow($box-shadow-sm);
|
||||||
|
@include media-breakpoint-down(sm){
|
||||||
|
font-size: $font-size-base;
|
||||||
|
right: -13px;
|
||||||
|
padding: 5px 10px;
|
||||||
|
top: -23px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.subscription-badge {
|
||||||
|
top: -19px;
|
||||||
|
right: -12px;
|
||||||
|
font-size: .75rem;
|
||||||
|
}
|
31
resources/volt/scss/volt/components/_body.scss
Normal file
31
resources/volt/scss/volt/components/_body.scss
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
iframe {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
figcaption,
|
||||||
|
figure,
|
||||||
|
main {
|
||||||
|
display: block;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
strong{
|
||||||
|
font-weight: $font-weight-bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:focus {
|
||||||
|
outline: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
font-weight: $font-weight-bold;
|
||||||
|
margin-bottom:.5rem;
|
||||||
|
}
|
56
resources/volt/scss/volt/components/_breadcrumb.scss
Executable file
56
resources/volt/scss/volt/components/_breadcrumb.scss
Executable file
@ -0,0 +1,56 @@
|
|||||||
|
/**
|
||||||
|
* = Breadcrumbs
|
||||||
|
*/
|
||||||
|
|
||||||
|
.breadcrumb-item {
|
||||||
|
font-size: $font-size-xs;
|
||||||
|
&, a {
|
||||||
|
color: $breadcrumb-item-color;
|
||||||
|
font-weight: $breadcrumb-font-weight;
|
||||||
|
font-size: $font-size-xs;
|
||||||
|
@include media-breakpoint-up(sm){
|
||||||
|
font-size: $font-size-sm;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
font-weight: $breadcrumb-active-font-weight;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumb-transparent {
|
||||||
|
background: transparent;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $color, $value in $theme-colors {
|
||||||
|
.breadcrumb-#{$color} {
|
||||||
|
background: $value;
|
||||||
|
.breadcrumb-item{
|
||||||
|
&.active {
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.breadcrumb-transparent {
|
||||||
|
background: transparent;
|
||||||
|
.breadcrumb-item {
|
||||||
|
&.active {
|
||||||
|
color: $value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumb-text-light {
|
||||||
|
.breadcrumb-item {
|
||||||
|
&, a {
|
||||||
|
color: $breadcrumb-item-light-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
color: $breadcrumb-divider-light-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
86
resources/volt/scss/volt/components/_buttons.scss
Executable file
86
resources/volt/scss/volt/components/_buttons.scss
Executable file
@ -0,0 +1,86 @@
|
|||||||
|
/*
|
||||||
|
* = Buttons
|
||||||
|
*/
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
&.btn-circle {
|
||||||
|
border-radius: $circle-radius;
|
||||||
|
}
|
||||||
|
&.btn-md{
|
||||||
|
padding: 0.65rem 1.25rem;
|
||||||
|
}
|
||||||
|
&.btn-xs{
|
||||||
|
padding: .2rem 0.35rem;
|
||||||
|
font-size: 0.55rem;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
&.large-form-btn{
|
||||||
|
padding: 1.2rem 1rem;
|
||||||
|
}
|
||||||
|
&.dashed-outline {
|
||||||
|
border-style: dashed;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.btn-icon-only {
|
||||||
|
width: 2.575rem;
|
||||||
|
height: 2.575rem;
|
||||||
|
padding: 0;
|
||||||
|
@include display-flex();
|
||||||
|
@include justify-content(center);
|
||||||
|
@include align-items(center);
|
||||||
|
|
||||||
|
&.btn-xs {
|
||||||
|
width: 1.7rem;
|
||||||
|
height: 1.7rem;
|
||||||
|
}
|
||||||
|
&.btn-sm {
|
||||||
|
width: 2rem;
|
||||||
|
height: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-upgrade-pro {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 15px;
|
||||||
|
right: 15px;
|
||||||
|
width: 190px;
|
||||||
|
|
||||||
|
@include media-breakpoint-up(md) {
|
||||||
|
left: 35px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fix for darken background color
|
||||||
|
@each $color, $value in $theme-colors {
|
||||||
|
.btn-#{$color} {
|
||||||
|
&:hover{
|
||||||
|
background-color: darken( $value, 5% );
|
||||||
|
border-color: darken( $value, 5% );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Brand (social) buttons
|
||||||
|
@each $color, $value in $brand-colors {
|
||||||
|
.btn-#{$color} {
|
||||||
|
@include button-variant($value, $value);
|
||||||
|
|
||||||
|
&.btn-link {
|
||||||
|
color: $value;
|
||||||
|
background: transparent;
|
||||||
|
box-shadow: none;
|
||||||
|
border:0;
|
||||||
|
border-style: none;
|
||||||
|
&:hover,
|
||||||
|
&:focus,
|
||||||
|
&.active {
|
||||||
|
background-color: transparent !important;
|
||||||
|
box-shadow: none;
|
||||||
|
border: 0;
|
||||||
|
color: $value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
149
resources/volt/scss/volt/components/_card.scss
Executable file
149
resources/volt/scss/volt/components/_card.scss
Executable file
@ -0,0 +1,149 @@
|
|||||||
|
/**
|
||||||
|
* = Cards
|
||||||
|
*/
|
||||||
|
|
||||||
|
.card {
|
||||||
|
position: relative;
|
||||||
|
.card-header{
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.hover-state{
|
||||||
|
&:hover {
|
||||||
|
background-color: $soft;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-cover{
|
||||||
|
@include background-image(no-repeat, cover);
|
||||||
|
height: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-wrapper,
|
||||||
|
.task-wrapper{
|
||||||
|
.card{
|
||||||
|
border:0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.customer-testimonial {
|
||||||
|
.content-wrapper{
|
||||||
|
&:before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 25px;
|
||||||
|
left: -1px;
|
||||||
|
margin-left: .75rem;
|
||||||
|
border: 8px solid $black;
|
||||||
|
border-color: transparent #e0e6ec #e0e6ec transparent;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
-webkit-transform-origin: 0 0;
|
||||||
|
transform-origin: 0 0;
|
||||||
|
@include transform(rotate(135deg));
|
||||||
|
@include box-shadow($box-shadow);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-footer{
|
||||||
|
background-color:transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-stats{
|
||||||
|
padding-left:1.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Card with blockquotes
|
||||||
|
|
||||||
|
.card {
|
||||||
|
.card-blockquote {
|
||||||
|
position: relative;
|
||||||
|
padding: 2rem;
|
||||||
|
|
||||||
|
.svg-bg {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 95px;
|
||||||
|
top: -94px;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Animated cards
|
||||||
|
|
||||||
|
|
||||||
|
.page-preview {
|
||||||
|
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.show-on-hover {
|
||||||
|
position: absolute;
|
||||||
|
bottom: -0;
|
||||||
|
background: rgba($dark, .85);
|
||||||
|
padding: 10px 0;
|
||||||
|
width: 100%;
|
||||||
|
left: 0;
|
||||||
|
opacity: 0;
|
||||||
|
@include transition(.2s);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
|
.show-on-hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-settings {
|
||||||
|
z-index: 99;
|
||||||
|
position: fixed;
|
||||||
|
right: 15px;
|
||||||
|
bottom: 0;
|
||||||
|
|
||||||
|
&, .card-body {
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-settings-close {
|
||||||
|
position: absolute;
|
||||||
|
top: 8px;
|
||||||
|
right: 8px;
|
||||||
|
font-size: .65rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-close {
|
||||||
|
|
||||||
|
&.theme-settings-close{
|
||||||
|
background: transparent escape-svg($btn-close-bg-white) center / $btn-close-width auto no-repeat; // include transparent for button elements
|
||||||
|
border: 0; // for button elements
|
||||||
|
@include border-radius();
|
||||||
|
opacity: $btn-close-opacity;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-settings-expand {
|
||||||
|
right: 15px;
|
||||||
|
bottom: 0;
|
||||||
|
height: 0;
|
||||||
|
@include transition(.3s height);
|
||||||
|
|
||||||
|
&.show {
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $gray-600;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
52
resources/volt/scss/volt/components/_carousel.scss
Executable file
52
resources/volt/scss/volt/components/_carousel.scss
Executable file
@ -0,0 +1,52 @@
|
|||||||
|
/**
|
||||||
|
* = Bootstrap carousels
|
||||||
|
*/
|
||||||
|
|
||||||
|
.carousel-caption {
|
||||||
|
&, h5 {
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//Indicators
|
||||||
|
|
||||||
|
.carousel-indicators {
|
||||||
|
li {
|
||||||
|
height: 10px;
|
||||||
|
width:10px;
|
||||||
|
border-radius:$circle-radius;
|
||||||
|
background:transparent;
|
||||||
|
border:2px solid $white;
|
||||||
|
}
|
||||||
|
.active {
|
||||||
|
opacity: 1;
|
||||||
|
background: $white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//Carousel Controls
|
||||||
|
|
||||||
|
.carousel-control-prev-icon,
|
||||||
|
.carousel-control-next-icon {
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
font-weight: 900;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-control-prev-icon {
|
||||||
|
background-image: none;
|
||||||
|
&::before{
|
||||||
|
content: '\f060';
|
||||||
|
font-family: $font-awesome-5;
|
||||||
|
font-size: $font-size-xxl;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-control-next-icon {
|
||||||
|
background-image: none;
|
||||||
|
&:before{
|
||||||
|
font-family: $font-awesome-5;
|
||||||
|
content: "\f061";
|
||||||
|
font-size: $font-size-xxl;
|
||||||
|
}
|
||||||
|
}
|
52
resources/volt/scss/volt/components/_charts.scss
Normal file
52
resources/volt/scss/volt/components/_charts.scss
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
.ct-bar {
|
||||||
|
stroke-linecap: round;
|
||||||
|
stroke-width: 10px;
|
||||||
|
}
|
||||||
|
.ct-label {
|
||||||
|
fill: $body-color;
|
||||||
|
color: $body-color;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
margin-top: 6px;
|
||||||
|
font-weight: $font-weight-bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ct-slice-pie {
|
||||||
|
stroke: $white;
|
||||||
|
stroke-width: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ct-chart-donut .ct-series {
|
||||||
|
stroke: $white;
|
||||||
|
stroke-width: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ct-chart-pie .ct-label, .ct-chart-donut .ct-label {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: $font-weight-bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small-chart{
|
||||||
|
margin-left:-1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
//Label color Fix for pie chart
|
||||||
|
|
||||||
|
.ct-chart-pie .ct-label, .ct-chart-donut .ct-label {
|
||||||
|
color: #ffffff;
|
||||||
|
fill: #ffffff;
|
||||||
|
font-size: $font-size-base;
|
||||||
|
font-weight: $font-weight-bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ct-series-g{
|
||||||
|
.ct-grid {
|
||||||
|
stroke: #F8BD7A;
|
||||||
|
stroke-width: 2px;
|
||||||
|
stroke-dasharray: 2px;
|
||||||
|
}
|
||||||
|
.ct-label.ct-horizontal.ct-end {
|
||||||
|
margin-left:-9px;
|
||||||
|
margin-top:10px;
|
||||||
|
color: $primary;
|
||||||
|
}
|
||||||
|
}
|
33
resources/volt/scss/volt/components/_close.scss
Executable file
33
resources/volt/scss/volt/components/_close.scss
Executable file
@ -0,0 +1,33 @@
|
|||||||
|
/**
|
||||||
|
* = Close
|
||||||
|
*/
|
||||||
|
|
||||||
|
.close {
|
||||||
|
@if $enable-transitions {
|
||||||
|
transition: $transition-base;
|
||||||
|
}
|
||||||
|
&>span:not(.sr-only) {
|
||||||
|
display: block;
|
||||||
|
height: 1.25rem;
|
||||||
|
width: 1.25rem;
|
||||||
|
background-color: $close-bg;
|
||||||
|
color: $close-color;
|
||||||
|
line-height: 17px;
|
||||||
|
border-radius: 50%;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
@if $enable-transitions {
|
||||||
|
transition: $transition-base;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
background-color: $close-hover-bg;
|
||||||
|
color: $close-hover-color;
|
||||||
|
outline: none;
|
||||||
|
|
||||||
|
span:not(.sr-only) {
|
||||||
|
background-color: $close-hover-bg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
103
resources/volt/scss/volt/components/_custom-forms.scss
Executable file
103
resources/volt/scss/volt/components/_custom-forms.scss
Executable file
@ -0,0 +1,103 @@
|
|||||||
|
/**
|
||||||
|
* = Custom forms
|
||||||
|
*/
|
||||||
|
|
||||||
|
.custom-control-label {
|
||||||
|
// Background-color and (when enabled) gradient
|
||||||
|
&:before {
|
||||||
|
box-shadow: $custom-control-box-shadow;
|
||||||
|
@if $enable-transitions {
|
||||||
|
transition: $input-transition;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
position: relative;
|
||||||
|
top: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-control-label {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-control-input {
|
||||||
|
&:active~.custom-control-label::before {
|
||||||
|
border-color: $custom-control-indicator-active-border-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Custom File Input
|
||||||
|
|
||||||
|
.custom-file-label {
|
||||||
|
background-color: #f3f3f5;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
|
||||||
|
background-color: #f3f3f5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//Select
|
||||||
|
.custom-select{
|
||||||
|
font-size: $input-btn-font-size;
|
||||||
|
box-shadow:none;
|
||||||
|
|
||||||
|
&.custom-select-shadow {
|
||||||
|
box-shadow: $input-box-shadow;
|
||||||
|
transition: box-shadow .15s ease;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
box-shadow: $shadow-input-focus;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Inbox star
|
||||||
|
.rating-star {
|
||||||
|
&.star-lg{
|
||||||
|
label{
|
||||||
|
margin-bottom: .5rem;
|
||||||
|
&::before{
|
||||||
|
font-size: $font-size-xl;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
label {
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
color: $light;
|
||||||
|
&:before {
|
||||||
|
content: "\f005";
|
||||||
|
font-family: "Font Awesome 5 Free";
|
||||||
|
font-weight: 900;
|
||||||
|
transition: all .2s ease;
|
||||||
|
font-size: 1.0625rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
input {
|
||||||
|
position: absolute;
|
||||||
|
z-index: -1;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
>input:checked~label {
|
||||||
|
color: $warning;
|
||||||
|
}
|
||||||
|
|
||||||
|
>label {
|
||||||
|
&:hover {
|
||||||
|
color: $warning;
|
||||||
|
}
|
||||||
|
&:hover~label {
|
||||||
|
color: $warning;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
13
resources/volt/scss/volt/components/_datepicker.scss
Executable file
13
resources/volt/scss/volt/components/_datepicker.scss
Executable file
@ -0,0 +1,13 @@
|
|||||||
|
/**
|
||||||
|
* = Datepickers
|
||||||
|
*/
|
||||||
|
|
||||||
|
.datepicker {
|
||||||
|
|
||||||
|
.datepicker-cell.selected,
|
||||||
|
.datepicker-cell.selected:hover {
|
||||||
|
background: $primary;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
68
resources/volt/scss/volt/components/_dropdown.scss
Executable file
68
resources/volt/scss/volt/components/_dropdown.scss
Executable file
@ -0,0 +1,68 @@
|
|||||||
|
.dropdown-menu {
|
||||||
|
.dropdown-header,
|
||||||
|
.dropdown-item {
|
||||||
|
padding: .5rem 1rem;
|
||||||
|
font-size: $dropdown-font-size;
|
||||||
|
.dropdown-icon{
|
||||||
|
height: 1.25rem;
|
||||||
|
width: 1.25rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-header {
|
||||||
|
color: $dropdown-header-color;
|
||||||
|
font-weight: $dropdown-header-font-weight;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-item {
|
||||||
|
transition: $transition-base;
|
||||||
|
font-weight: $dropdown-item-font-weight;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.show & {
|
||||||
|
animation: show-dropdown .2s ease forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.dropdown-menu-xs {
|
||||||
|
min-width: 120px;
|
||||||
|
max-width: 120px;
|
||||||
|
@include box-shadow($box-shadow-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// Dropown sizes
|
||||||
|
.dropdown-menu-sm {
|
||||||
|
min-width: 100px;
|
||||||
|
border: $border-radius-lg;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu-md {
|
||||||
|
min-width: 180px;
|
||||||
|
border: $border-radius-lg;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu-lg {
|
||||||
|
min-width: 350px;
|
||||||
|
border-radius: $border-radius-lg;
|
||||||
|
@include media-breakpoint-down(sm) {
|
||||||
|
min-width: 300px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// this helps when not only the button should toggle a dropdown
|
||||||
|
[data-toggle]:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
// remove the caret from Bootstrap by default
|
||||||
|
.dropdown-toggle {
|
||||||
|
&:after, .dropend &:after, .dropstart &:before, .dropup &:after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
202
resources/volt/scss/volt/components/_icons.scss
Executable file
202
resources/volt/scss/volt/components/_icons.scss
Executable file
@ -0,0 +1,202 @@
|
|||||||
|
/**
|
||||||
|
* = Icon boxes
|
||||||
|
*/
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
height: $icon-size;
|
||||||
|
|
||||||
|
&.icon-xxs {
|
||||||
|
height: $icon-size-xxs;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.icon-xs {
|
||||||
|
height: $icon-size-xs;
|
||||||
|
}
|
||||||
|
&.icon-sm {
|
||||||
|
height: $icon-size-sm;
|
||||||
|
}
|
||||||
|
&.icon-lg {
|
||||||
|
height: $icon-size-lg;
|
||||||
|
}
|
||||||
|
&.icon-xl {
|
||||||
|
height: $icon-size-xl;
|
||||||
|
}
|
||||||
|
&.icon-xxl {
|
||||||
|
height: $icon-size-xxl;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active-dot {
|
||||||
|
svg {
|
||||||
|
height: 0.7rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Icons included in shapes
|
||||||
|
.icon-shape {
|
||||||
|
width: $icon-shape;
|
||||||
|
height: $icon-shape;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
height: $icon-size;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.icon-xxs {
|
||||||
|
width: $icon-shape-xxs;
|
||||||
|
height: $icon-shape-xxs;
|
||||||
|
svg {
|
||||||
|
height: $icon-size-xxs;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.icon-xs {
|
||||||
|
width: $icon-shape-xs;
|
||||||
|
height: $icon-shape-xs;
|
||||||
|
svg {
|
||||||
|
height: $icon-size-xs;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.icon-sm {
|
||||||
|
width: $icon-shape-sm;
|
||||||
|
height: $icon-shape-sm;
|
||||||
|
svg {
|
||||||
|
height: $icon-size-sm;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.icon-lg {
|
||||||
|
width: $icon-shape-lg;
|
||||||
|
height: $icon-shape-lg;
|
||||||
|
svg {
|
||||||
|
height: $icon-size-lg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.icon-xl {
|
||||||
|
width: $icon-shape-xl;
|
||||||
|
height: $icon-shape-xl;
|
||||||
|
svg {
|
||||||
|
height: $icon-size-xl;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.icon-xxl {
|
||||||
|
width: $icon-shape-xxl;
|
||||||
|
height: $icon-shape-xxl;
|
||||||
|
svg {
|
||||||
|
height: $icon-size-xxl;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Inbox star Icons
|
||||||
|
.rating-star {
|
||||||
|
&:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
color: $warning;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-icon {
|
||||||
|
height: 1.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
//Icons inside table fixed width
|
||||||
|
.w--20 {
|
||||||
|
width: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
//Calendar Icon
|
||||||
|
|
||||||
|
.calendar {
|
||||||
|
width: 3.125rem;
|
||||||
|
line-height: 1;
|
||||||
|
flex-direction: column;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
.calendar-month {
|
||||||
|
background-color: $danger;
|
||||||
|
color: $white;
|
||||||
|
border-radius: $border-radius $border-radius 0 0;
|
||||||
|
padding: 0.275rem;
|
||||||
|
font-weight: $font-weight-bold;
|
||||||
|
}
|
||||||
|
.calendar-day {
|
||||||
|
font-size: $font-size-xl;
|
||||||
|
padding: 0.25rem;
|
||||||
|
background-color: $gray-100;
|
||||||
|
border-top: 0;
|
||||||
|
border-radius: 0 0 $border-radius $border-radius;
|
||||||
|
color: $dark;
|
||||||
|
font-weight: $font-weight-bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//Legend dot
|
||||||
|
|
||||||
|
.dot {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
//Bell notification dot
|
||||||
|
.bell-dot {
|
||||||
|
display: inline-block;
|
||||||
|
position: absolute;
|
||||||
|
top: -11px;
|
||||||
|
right: 6px;
|
||||||
|
height: 10px;
|
||||||
|
width: 10px;
|
||||||
|
border: 2px solid $gray-100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification-bell.unread {
|
||||||
|
&::before {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
background-color: $danger;
|
||||||
|
right: 12px;
|
||||||
|
top: 7px;
|
||||||
|
height: 0.75rem;
|
||||||
|
width: 0.75rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 2px solid $gray-100;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//Index Big Icon
|
||||||
|
.bootstrap-big-icon {
|
||||||
|
position: absolute;
|
||||||
|
opacity: 0.05;
|
||||||
|
transform: rotate(17deg);
|
||||||
|
@include media-breakpoint-up(lg) {
|
||||||
|
right: -20%;
|
||||||
|
bottom: 6%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include media-breakpoint-up(xl) {
|
||||||
|
right: -10%;
|
||||||
|
bottom: 6%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.github-big-icon {
|
||||||
|
position: absolute;
|
||||||
|
right: 80px;
|
||||||
|
svg {
|
||||||
|
color: $gray-400;
|
||||||
|
height:800px;
|
||||||
|
opacity: 0.2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//Colors for icons, shapes and svg's
|
||||||
|
@each $color, $value in $theme-colors {
|
||||||
|
.icon-shape-#{$color} {
|
||||||
|
@include icon-shape-variant($value);
|
||||||
|
}
|
||||||
|
}
|
67
resources/volt/scss/volt/components/_images.scss
Normal file
67
resources/volt/scss/volt/components/_images.scss
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
/**
|
||||||
|
* = Images
|
||||||
|
*/
|
||||||
|
.image-xl {
|
||||||
|
height: 20rem;
|
||||||
|
img{
|
||||||
|
height: 20rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-lg {
|
||||||
|
height: 12rem;
|
||||||
|
img{
|
||||||
|
height: 12rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-md{
|
||||||
|
height: 5.5rem;
|
||||||
|
img{
|
||||||
|
height: 5.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-sm {
|
||||||
|
height: 3rem;
|
||||||
|
img{
|
||||||
|
height: 3rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-xs {
|
||||||
|
height: 1.5rem;
|
||||||
|
img{
|
||||||
|
height: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-small {
|
||||||
|
height: 1rem;
|
||||||
|
img{
|
||||||
|
height: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.full-image{
|
||||||
|
height:100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.language-flag{
|
||||||
|
width: auto;
|
||||||
|
height: 1rem;
|
||||||
|
margin-right: 0.4rem;
|
||||||
|
position: relative;
|
||||||
|
top: -2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-pattern{
|
||||||
|
fill: $gray-100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-bg-image {
|
||||||
|
background-repeat: no-repeat!important;
|
||||||
|
background-position: top center!important;
|
||||||
|
}
|
||||||
|
|
96
resources/volt/scss/volt/components/_list-group.scss
Executable file
96
resources/volt/scss/volt/components/_list-group.scss
Executable file
@ -0,0 +1,96 @@
|
|||||||
|
/**
|
||||||
|
* = List groups
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Space list items
|
||||||
|
.list-group-space {
|
||||||
|
.list-group-item {
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
@include border-radius($list-group-border-radius);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// List group components
|
||||||
|
.list-group-item{
|
||||||
|
border:0;
|
||||||
|
&.active {
|
||||||
|
z-index: 2; // Place active items above their siblings for proper border styling
|
||||||
|
color: $list-group-active-color;
|
||||||
|
background-color: $list-group-active-bg;
|
||||||
|
border-color: $list-group-active-border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
i{
|
||||||
|
width: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-group-img {
|
||||||
|
width: 3rem;
|
||||||
|
height: 3rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
vertical-align: top;
|
||||||
|
margin: -.1rem 1.2rem 0 -.2rem;
|
||||||
|
}
|
||||||
|
.list-group-content {
|
||||||
|
-webkit-box-flex: 1;
|
||||||
|
-ms-flex: 1;
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
|
||||||
|
> p {
|
||||||
|
color: $gray-500;
|
||||||
|
line-height: 1.5;
|
||||||
|
margin: .2rem 0 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.list-group-heading {
|
||||||
|
font-size: $font-size-base;
|
||||||
|
color: $gray-800;
|
||||||
|
|
||||||
|
> small {
|
||||||
|
float: right;
|
||||||
|
color: $gray-500;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.list-group{
|
||||||
|
&.simple-list{
|
||||||
|
.list-group-item{
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
padding: 0.375rem 0.125rem;
|
||||||
|
i{
|
||||||
|
vertical-align: middle;
|
||||||
|
width: 35px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//News list for widgets
|
||||||
|
|
||||||
|
.news-list{
|
||||||
|
.row{
|
||||||
|
> [class*='col']{
|
||||||
|
padding: 0 $spacer/4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> li{
|
||||||
|
&:not(:last-child){
|
||||||
|
margin-bottom: .75rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
img{
|
||||||
|
min-height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
}
|
36
resources/volt/scss/volt/components/_modal.scss
Executable file
36
resources/volt/scss/volt/components/_modal.scss
Executable file
@ -0,0 +1,36 @@
|
|||||||
|
/**
|
||||||
|
* = Modals
|
||||||
|
*/
|
||||||
|
|
||||||
|
.modal{
|
||||||
|
&.static-example{
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content {
|
||||||
|
border: 0;
|
||||||
|
@if $enable-rounded {
|
||||||
|
border-radius: $modal-content-border-radius;
|
||||||
|
} @else {
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-fluid {
|
||||||
|
.modal-dialog {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
.modal-content {
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $color, $value in $theme-colors {
|
||||||
|
.modal-#{$color} {
|
||||||
|
@include modal-variant($value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
256
resources/volt/scss/volt/components/_nav.scss
Executable file
256
resources/volt/scss/volt/components/_nav.scss
Executable file
@ -0,0 +1,256 @@
|
|||||||
|
/**
|
||||||
|
* = Navs
|
||||||
|
*/
|
||||||
|
|
||||||
|
.nav-link {
|
||||||
|
color: $nav-link-color;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&.active {
|
||||||
|
color: $nav-link-hover-color;
|
||||||
|
|
||||||
|
img {
|
||||||
|
opacity : inherit;
|
||||||
|
transition: $transition-base;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//Tabs
|
||||||
|
|
||||||
|
.nav-tabs {
|
||||||
|
.nav-item {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link {
|
||||||
|
border : 0;
|
||||||
|
padding : 1rem 1rem;
|
||||||
|
background-color: $white;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
color : $white;
|
||||||
|
background-color: $primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.nav-dark {
|
||||||
|
.nav-link {
|
||||||
|
&.active {
|
||||||
|
color : $white;
|
||||||
|
background-color: #12358a;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.nav-light {
|
||||||
|
.nav-link {
|
||||||
|
&.active {
|
||||||
|
color : $black;
|
||||||
|
background-color: $light;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $black;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Pills
|
||||||
|
|
||||||
|
.nav-pills {
|
||||||
|
.nav-item:not(:last-child) {
|
||||||
|
padding-right: $nav-pills-space-x;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link {
|
||||||
|
padding : $nav-pills-padding-y $nav-pills-padding-x;
|
||||||
|
transition: $transition-base;
|
||||||
|
box-shadow: $nav-link-shadow;
|
||||||
|
border : $nav-pills-border-width solid $nav-pills-border-color;
|
||||||
|
|
||||||
|
&.avatar-link {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $nav-pills-link-hover-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link.active,
|
||||||
|
.show>.nav-link {
|
||||||
|
color : $nav-pills-link-active-color;
|
||||||
|
background-color: $nav-pills-link-active-bg;
|
||||||
|
border-color : $nav-pills-link-active-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.rounded {
|
||||||
|
.nav-link {
|
||||||
|
border-radius: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.vertical-tab {
|
||||||
|
.nav-link {
|
||||||
|
margin-bottom: .625rem;
|
||||||
|
min-width : 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item:not(:last-child) {
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.bordered-pill-md {
|
||||||
|
.nav-link {
|
||||||
|
border : $border-width-md solid $gray-200;
|
||||||
|
font-weight: $font-weight-bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.vertical-tab {
|
||||||
|
.nav-link {
|
||||||
|
margin-bottom: .625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item:not(:last-child) {
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include media-breakpoint-down(xs) {
|
||||||
|
.nav-item {
|
||||||
|
margin-bottom: $spacer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include media-breakpoint-down(sm) {
|
||||||
|
.nav-pills:not(.nav-pills-circle) {
|
||||||
|
.nav-item {
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Navs circle
|
||||||
|
|
||||||
|
.nav-pill-circle {
|
||||||
|
.nav-link {
|
||||||
|
@include display-flex();
|
||||||
|
text-align : center;
|
||||||
|
height : 80px;
|
||||||
|
width : 80px;
|
||||||
|
padding : 0;
|
||||||
|
box-shadow : $nav-link-shadow;
|
||||||
|
border-radius : $nav-pills-border-circle;
|
||||||
|
align-items : center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
&.avatar-link {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.vertical-tab {
|
||||||
|
.nav-link-icon {
|
||||||
|
|
||||||
|
i,
|
||||||
|
svg {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item:not(:last-child) {
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link-icon {
|
||||||
|
|
||||||
|
i,
|
||||||
|
svg {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
margin : 0;
|
||||||
|
display : block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Navs square
|
||||||
|
|
||||||
|
.nav-pill-square {
|
||||||
|
.nav-link {
|
||||||
|
text-align: center;
|
||||||
|
min-width : 80px;
|
||||||
|
box-shadow: $nav-link-shadow;
|
||||||
|
@include display-flex();
|
||||||
|
align-items : center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.vertical-tab {
|
||||||
|
.nav-link {
|
||||||
|
margin-bottom: .625rem;
|
||||||
|
min-width : 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item:not(:last-child) {
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link-icon {
|
||||||
|
|
||||||
|
i,
|
||||||
|
svg {
|
||||||
|
font-size : 1.25rem;
|
||||||
|
margin : 0;
|
||||||
|
display : block;
|
||||||
|
line-height: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Nav wrapper
|
||||||
|
.nav-wrapper {
|
||||||
|
padding: 1rem 0;
|
||||||
|
@include border-top-radius($card-border-radius);
|
||||||
|
|
||||||
|
+.card {
|
||||||
|
@include border-top-radius(0);
|
||||||
|
@include border-bottom-radius($card-border-radius);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Tabbable tabs
|
||||||
|
//
|
||||||
|
// Hide tabbable panes to start, show them when `.active`
|
||||||
|
|
||||||
|
.tab-content {
|
||||||
|
>.tab-pane {
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
pre {
|
||||||
|
padding: 0;
|
||||||
|
margin : 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
>.active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-pills .nav-item {
|
||||||
|
@include media-breakpoint-up(lg) {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
16
resources/volt/scss/volt/components/_pagination.scss
Executable file
16
resources/volt/scss/volt/components/_pagination.scss
Executable file
@ -0,0 +1,16 @@
|
|||||||
|
/**
|
||||||
|
* = Paginations
|
||||||
|
*/
|
||||||
|
.circle-pagination{
|
||||||
|
.page-link,
|
||||||
|
span{
|
||||||
|
@include display-flex();
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 34px;
|
||||||
|
height: 34px;
|
||||||
|
padding: 0;
|
||||||
|
@include border-radius($circle-radius);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
19
resources/volt/scss/volt/components/_popover.scss
Executable file
19
resources/volt/scss/volt/components/_popover.scss
Executable file
@ -0,0 +1,19 @@
|
|||||||
|
/**
|
||||||
|
* = Popovers
|
||||||
|
*/
|
||||||
|
|
||||||
|
.popover {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.popover-header {
|
||||||
|
font-weight: $font-weight-bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Alternative colors
|
||||||
|
@each $color, $value in $theme-colors {
|
||||||
|
.popover-#{$color} {
|
||||||
|
@include popover-variant($value);
|
||||||
|
}
|
||||||
|
}
|
116
resources/volt/scss/volt/components/_progress.scss
Executable file
116
resources/volt/scss/volt/components/_progress.scss
Executable file
@ -0,0 +1,116 @@
|
|||||||
|
/**
|
||||||
|
* = Progress bars
|
||||||
|
*/
|
||||||
|
|
||||||
|
.progress-wrapper {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar {
|
||||||
|
box-shadow: none;
|
||||||
|
border-radius: 0;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress {
|
||||||
|
height: 6px;
|
||||||
|
margin-bottom: $spacer;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: $progress-bg;
|
||||||
|
font-size: $font-size-xs;
|
||||||
|
font-weight: $font-weight-bold;
|
||||||
|
@include box-shadow(inset 0 1px 2px rgba(0, 0, 0, .1))
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-xl {
|
||||||
|
height: $progress-xl-size;
|
||||||
|
}
|
||||||
|
.progress-lg {
|
||||||
|
height: $progress-lg-size;
|
||||||
|
}
|
||||||
|
.progress-sm {
|
||||||
|
height: $progress-sm-size;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-info{
|
||||||
|
@include display-flex();
|
||||||
|
@include align-items(center);
|
||||||
|
@include justify-content(space-between);
|
||||||
|
margin-bottom: .5rem;
|
||||||
|
|
||||||
|
.progress-label {
|
||||||
|
span {
|
||||||
|
display: inline-block;
|
||||||
|
color: $primary;
|
||||||
|
font-size: $font-size-sm;
|
||||||
|
font-weight: $font-weight-bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-percentage {
|
||||||
|
text-align: right;
|
||||||
|
span {
|
||||||
|
display: inline-block;
|
||||||
|
color: $gray-500;
|
||||||
|
font-size: $font-size-xs;
|
||||||
|
font-weight: $font-weight-bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-xl{
|
||||||
|
.progress-label,
|
||||||
|
.progress-percentage {
|
||||||
|
span {
|
||||||
|
font-size: $font-size-sm;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-percentage {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-tooltip {
|
||||||
|
background: $primary;
|
||||||
|
color: $white;
|
||||||
|
font-weight: $font-weight-bold;
|
||||||
|
padding: .25rem .375rem;
|
||||||
|
line-height: 1;
|
||||||
|
font-size: $font-size-xs;
|
||||||
|
position: relative;
|
||||||
|
border-radius: $border-radius-sm;
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
content: " ";
|
||||||
|
position: absolute;
|
||||||
|
top: 100%;
|
||||||
|
left: 10px;
|
||||||
|
border: solid transparent;
|
||||||
|
height: 0;
|
||||||
|
width: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
border-top-color: $gray;
|
||||||
|
border-width: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes animate-positive{
|
||||||
|
0% { width: 0%; }
|
||||||
|
}
|
||||||
|
@keyframes animate-positive{
|
||||||
|
0% { width: 0%; }
|
||||||
|
}
|
||||||
|
|
||||||
|
//Tooltip arrow color
|
||||||
|
@each $color,
|
||||||
|
$value in $theme-colors {
|
||||||
|
.progress-info{
|
||||||
|
.bg-#{$color} {
|
||||||
|
&::after{
|
||||||
|
border-top-color: $value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
228
resources/volt/scss/volt/components/_scrollbar.scss
Normal file
228
resources/volt/scss/volt/components/_scrollbar.scss
Normal file
@ -0,0 +1,228 @@
|
|||||||
|
[data-simplebar] {
|
||||||
|
position: fixed;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-content: flex-start;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.simplebar-wrapper {
|
||||||
|
overflow: hidden;
|
||||||
|
width: inherit;
|
||||||
|
height: inherit;
|
||||||
|
max-width: inherit;
|
||||||
|
max-height: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.simplebar-mask {
|
||||||
|
direction: inherit;
|
||||||
|
position: absolute;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
width: auto !important;
|
||||||
|
height: auto !important;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.simplebar-offset {
|
||||||
|
direction: inherit !important;
|
||||||
|
box-sizing: inherit !important;
|
||||||
|
resize: none !important;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.simplebar-content-wrapper {
|
||||||
|
direction: inherit;
|
||||||
|
box-sizing: border-box !important;
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
height: 100%; /* Required for horizontal native scrollbar to not appear if parent is taller than natural height */
|
||||||
|
width: auto;
|
||||||
|
max-width: 100%; /* Not required for horizontal scroll to trigger */
|
||||||
|
max-height: 100%; /* Needed for vertical scroll to trigger */
|
||||||
|
scrollbar-width: none;
|
||||||
|
-ms-overflow-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.simplebar-content-wrapper::-webkit-scrollbar,
|
||||||
|
.simplebar-hide-scrollbar::-webkit-scrollbar {
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.simplebar-content:before,
|
||||||
|
.simplebar-content:after {
|
||||||
|
content: ' ';
|
||||||
|
display: table;
|
||||||
|
}
|
||||||
|
|
||||||
|
.simplebar-placeholder {
|
||||||
|
max-height: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
width: 100%;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.simplebar-height-auto-observer-wrapper {
|
||||||
|
box-sizing: inherit !important;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1px;
|
||||||
|
position: relative;
|
||||||
|
float: left;
|
||||||
|
max-height: 1px;
|
||||||
|
overflow: hidden;
|
||||||
|
z-index: -1;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
flex-grow: inherit;
|
||||||
|
flex-shrink: 0;
|
||||||
|
flex-basis: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.simplebar-height-auto-observer {
|
||||||
|
box-sizing: inherit;
|
||||||
|
display: block;
|
||||||
|
opacity: 0;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 1000%;
|
||||||
|
width: 1000%;
|
||||||
|
min-height: 1px;
|
||||||
|
min-width: 1px;
|
||||||
|
overflow: hidden;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.simplebar-track {
|
||||||
|
z-index: 1;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-simplebar].simplebar-dragging .simplebar-content {
|
||||||
|
pointer-events: none;
|
||||||
|
user-select: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-simplebar].simplebar-dragging .simplebar-track {
|
||||||
|
pointer-events: all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.simplebar-scrollbar {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
min-height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.simplebar-scrollbar:before {
|
||||||
|
position: absolute;
|
||||||
|
content: '';
|
||||||
|
background: black;
|
||||||
|
border-radius: 7px;
|
||||||
|
left: 2px;
|
||||||
|
right: 2px;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.2s 0.5s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.simplebar-scrolling .simplebar-scrollbar:before,
|
||||||
|
.simplebar-hover .simplebar-scrollbar:before,
|
||||||
|
.simplebar-mouse-entered .simplebar-scrollbar:before {
|
||||||
|
opacity: 0.5;
|
||||||
|
transition-delay: 0s;
|
||||||
|
transition-duration: 0s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.simplebar-scrollbar.simplebar-visible:before {
|
||||||
|
/* When hovered, remove all transitions from drag handle */
|
||||||
|
opacity: 0.5;
|
||||||
|
transition-delay: 0s;
|
||||||
|
transition-duration: 0s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.simplebar-track.simplebar-vertical {
|
||||||
|
top: 0;
|
||||||
|
width: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.simplebar-scrollbar:before {
|
||||||
|
top: 2px;
|
||||||
|
bottom: 2px;
|
||||||
|
left: 2px;
|
||||||
|
right: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.simplebar-track.simplebar-horizontal {
|
||||||
|
left: 0;
|
||||||
|
height: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.simplebar-track.simplebar-horizontal .simplebar-scrollbar {
|
||||||
|
right: auto;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
min-height: 0;
|
||||||
|
min-width: 10px;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Rtl support */
|
||||||
|
[data-simplebar-direction='rtl'] .simplebar-track.simplebar-vertical {
|
||||||
|
right: auto;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.simplebar-dummy-scrollbar-size {
|
||||||
|
direction: rtl;
|
||||||
|
position: fixed;
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
height: 500px;
|
||||||
|
width: 500px;
|
||||||
|
overflow-y: hidden;
|
||||||
|
overflow-x: scroll;
|
||||||
|
-ms-overflow-style: scrollbar !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.simplebar-dummy-scrollbar-size > div {
|
||||||
|
width: 200%;
|
||||||
|
height: 200%;
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.simplebar-hide-scrollbar {
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
overflow-y: scroll;
|
||||||
|
scrollbar-width: none;
|
||||||
|
-ms-overflow-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.simplebar-scrollbar::before {
|
||||||
|
background-color: darken($dark, 10%);
|
||||||
|
}
|
||||||
|
|
18
resources/volt/scss/volt/components/_shapes.scss
Executable file
18
resources/volt/scss/volt/components/_shapes.scss
Executable file
@ -0,0 +1,18 @@
|
|||||||
|
/**
|
||||||
|
* = Shapes
|
||||||
|
*/
|
||||||
|
|
||||||
|
.avatar-sm {
|
||||||
|
width: $avatar-sm-y;
|
||||||
|
height: $avatar-sm-x;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-md {
|
||||||
|
width: $avatar-md-y;
|
||||||
|
height: $avatar-md-x;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-lg {
|
||||||
|
width: $avatar-lg-y;
|
||||||
|
height: $avatar-lg-x;
|
||||||
|
}
|
61
resources/volt/scss/volt/components/_steps.scss
Executable file
61
resources/volt/scss/volt/components/_steps.scss
Executable file
@ -0,0 +1,61 @@
|
|||||||
|
/**steps
|
||||||
|
* = Accordions
|
||||||
|
*/
|
||||||
|
|
||||||
|
.step{
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 4rem;
|
||||||
|
border-radius: 6px;
|
||||||
|
|
||||||
|
.step-shape{
|
||||||
|
display: inline-flex;
|
||||||
|
width: $step-shape-size;
|
||||||
|
height: $step-shape-size;
|
||||||
|
text-align: center;
|
||||||
|
@include align-items(center);
|
||||||
|
@include justify-content(center);
|
||||||
|
|
||||||
|
i, svg {
|
||||||
|
font-size: $icon-size;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-number{
|
||||||
|
position: absolute;
|
||||||
|
font-weight: $font-weight-bold;
|
||||||
|
top: -10px;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
border-width: $step-border-width;
|
||||||
|
border-style: solid;
|
||||||
|
line-height: 1.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.bordered {
|
||||||
|
border-width: $step-border-width;
|
||||||
|
border-style: solid;
|
||||||
|
|
||||||
|
.step-number {
|
||||||
|
background-color: $white;
|
||||||
|
top:-12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.rounded-circle{
|
||||||
|
.step-number{
|
||||||
|
margin-right:1.275rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-lg{
|
||||||
|
font-size: $step-icon-size;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-layer{
|
||||||
|
@include display-flex();
|
||||||
|
position: absolute;
|
||||||
|
font-size: $step-number-size;
|
||||||
|
z-index: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
}
|
394
resources/volt/scss/volt/components/_tables.scss
Normal file
394
resources/volt/scss/volt/components/_tables.scss
Normal file
@ -0,0 +1,394 @@
|
|||||||
|
// General styles
|
||||||
|
|
||||||
|
.table {
|
||||||
|
|
||||||
|
thead th {
|
||||||
|
padding-top: $table-head-spacer-y;
|
||||||
|
padding-bottom: $table-head-spacer-y;
|
||||||
|
font-size: $table-head-font-size;
|
||||||
|
text-transform: $table-head-text-transform;
|
||||||
|
font-weight: $font-weight-bolder;
|
||||||
|
border-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
font-weight: $font-weight-bold;
|
||||||
|
padding:1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
.progress {
|
||||||
|
height: 3px;
|
||||||
|
width: 120px;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
td,
|
||||||
|
th {
|
||||||
|
font-size: $table-body-font-size;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
// User Table
|
||||||
|
|
||||||
|
&.user-table{
|
||||||
|
thead th{
|
||||||
|
border-top:0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Vetical align table content
|
||||||
|
|
||||||
|
&.align-items-center {
|
||||||
|
td,
|
||||||
|
th {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Styles for dark table
|
||||||
|
|
||||||
|
.thead-dark {
|
||||||
|
th {
|
||||||
|
background-color: $gray-800;
|
||||||
|
color: $white;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: $dark;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Styles for light table
|
||||||
|
|
||||||
|
.thead-light {
|
||||||
|
th {
|
||||||
|
background-color: $gray-100;
|
||||||
|
color: $dark;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: $dark;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Add transition for hover state
|
||||||
|
|
||||||
|
.table-hover {
|
||||||
|
tr {
|
||||||
|
@include transition($transition-base);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Flush tables
|
||||||
|
|
||||||
|
.table-flush {
|
||||||
|
td,
|
||||||
|
th {
|
||||||
|
border-left: 0;
|
||||||
|
border-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
tbody {
|
||||||
|
tr {
|
||||||
|
&:first-child {
|
||||||
|
td,
|
||||||
|
th {
|
||||||
|
border-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
td,
|
||||||
|
th {
|
||||||
|
border-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Tables inside cards
|
||||||
|
|
||||||
|
.card {
|
||||||
|
.table {
|
||||||
|
margin-bottom: 0;
|
||||||
|
|
||||||
|
td,
|
||||||
|
th {
|
||||||
|
padding-left: $card-spacer-x;
|
||||||
|
padding-right: $card-spacer-x;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.table {
|
||||||
|
[data-sort] {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-toggle {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thead-dark {
|
||||||
|
[data-sort] {
|
||||||
|
&::after {
|
||||||
|
content: str-replace(url("data:image/svg+xml;utf8,<svg width='6' height='10' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M3 0L6 4H0L3 0ZM3 10L0 6H6L3 10Z' fill='#{$dark}'/></svg>"), "#", "%23");
|
||||||
|
margin-left: .25rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.thead-light {
|
||||||
|
[data-sort] {
|
||||||
|
&::after {
|
||||||
|
content: str-replace(url("data:image/svg+xml;utf8,<svg width='6' height='10' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M3 0L6 4H0L3 0ZM3 10L0 6H6L3 10Z' fill='#{$dark}'/></svg>"), "#", "%23");
|
||||||
|
margin-left: .25rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dataTables_wrapper {
|
||||||
|
|
||||||
|
.dataTables_info{
|
||||||
|
padding-left: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dataTables_paginate{
|
||||||
|
padding-right: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dataTables_length {
|
||||||
|
label{
|
||||||
|
padding-left:1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dataTables_filter {
|
||||||
|
padding-right: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dataTable-top,
|
||||||
|
.dataTable-bottom {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
@include media-breakpoint-down(md) {
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.dataTable-info {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dataTable-top {
|
||||||
|
padding: 0 0 1rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dataTable-bottom {
|
||||||
|
padding: 1.5rem 0 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dataTable-pagination {
|
||||||
|
display: flex;
|
||||||
|
@include list-unstyled();
|
||||||
|
|
||||||
|
a {
|
||||||
|
padding: $pagination-padding-y $pagination-padding-x;
|
||||||
|
@include font-size(null);
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
@if $pagination-margin-left == (-$pagination-border-width) {
|
||||||
|
&:first-child {
|
||||||
|
a {
|
||||||
|
@include border-start-radius($pagination-border-radius);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
a {
|
||||||
|
@include border-end-radius($pagination-border-radius);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} @else {
|
||||||
|
//Add border-radius to all pageLinks in case they have left margin
|
||||||
|
a {
|
||||||
|
@include border-radius($pagination-border-radius);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> li {
|
||||||
|
&:not(:first-child) a {
|
||||||
|
margin-left: $pagination-margin-left;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active a {
|
||||||
|
z-index: 3;
|
||||||
|
color: $pagination-active-color;
|
||||||
|
@include gradient-bg($pagination-active-bg);
|
||||||
|
border-color: $pagination-active-border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.disabled a {
|
||||||
|
color: $pagination-disabled-color;
|
||||||
|
pointer-events: none;
|
||||||
|
background-color: $pagination-disabled-bg;
|
||||||
|
border-color: $pagination-disabled-border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
color: $pagination-color;
|
||||||
|
text-decoration: if($link-decoration == none, null, none);
|
||||||
|
background-color: $pagination-bg;
|
||||||
|
border: $pagination-border-width solid $pagination-border-color;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
z-index: 2;
|
||||||
|
color: $pagination-hover-color;
|
||||||
|
text-decoration: if($link-hover-decoration == underline, none, null);
|
||||||
|
background-color: $pagination-hover-bg;
|
||||||
|
border-color: $pagination-hover-border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
z-index: 3;
|
||||||
|
outline: $pagination-focus-outline;
|
||||||
|
box-shadow: $pagination-focus-box-shadow;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dataTable-selector {
|
||||||
|
display: inline-block;
|
||||||
|
width: auto;
|
||||||
|
height: $form-select-height;
|
||||||
|
padding: $form-select-padding-y ($form-select-padding-x + $form-select-indicator-padding) $form-select-padding-y $form-select-padding-x;
|
||||||
|
font-family: $form-select-font-family;
|
||||||
|
@include font-size($form-select-font-size);
|
||||||
|
font-weight: $form-select-font-weight;
|
||||||
|
line-height: $form-select-line-height;
|
||||||
|
color: $form-select-color;
|
||||||
|
vertical-align: middle;
|
||||||
|
background-color: $form-select-bg;
|
||||||
|
background-image: escape-svg($form-select-indicator);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: $form-select-bg-position;
|
||||||
|
background-size: $form-select-bg-size;
|
||||||
|
border: $form-select-border-width solid $form-select-border-color;
|
||||||
|
@include border-radius($form-select-border-radius, 0);
|
||||||
|
@include box-shadow($form-select-box-shadow);
|
||||||
|
appearance: none;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
border-color: $form-select-focus-border-color;
|
||||||
|
outline: 0;
|
||||||
|
@if $enable-shadows {
|
||||||
|
@include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
|
||||||
|
} @else {
|
||||||
|
// Avoid using mixin so we can pass custom focus shadow properly
|
||||||
|
box-shadow: $form-select-focus-box-shadow;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-ms-value {
|
||||||
|
// For visual consistency with other platforms/browsers,
|
||||||
|
// suppress the default white text on blue background highlight given to
|
||||||
|
// the selected option text when the (still closed) <select> receives focus
|
||||||
|
// in Edge.
|
||||||
|
// See https://github.com/twbs/bootstrap/issues/19398.
|
||||||
|
color: $input-color;
|
||||||
|
background-color: $input-bg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&[multiple],
|
||||||
|
&[size]:not([size="1"]) {
|
||||||
|
height: auto;
|
||||||
|
padding-right: $form-select-padding-x;
|
||||||
|
background-image: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:disabled {
|
||||||
|
color: $form-select-disabled-color;
|
||||||
|
background-color: $form-select-disabled-bg;
|
||||||
|
border-color: $form-select-disabled-border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Remove outline from select box in FF
|
||||||
|
&:-moz-focusring {
|
||||||
|
color: transparent;
|
||||||
|
text-shadow: 0 0 0 $form-select-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dataTable-input {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
min-height: $input-height;
|
||||||
|
padding: $input-padding-y $input-padding-x;
|
||||||
|
font-family: $input-font-family;
|
||||||
|
@include font-size($input-font-size);
|
||||||
|
font-weight: $input-font-weight;
|
||||||
|
line-height: $input-line-height;
|
||||||
|
color: $input-color;
|
||||||
|
background-color: $input-bg;
|
||||||
|
background-clip: padding-box;
|
||||||
|
border: $input-border-width solid $input-border-color;
|
||||||
|
appearance: none; // Fix appearance for date inputs in Safari
|
||||||
|
|
||||||
|
// Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
|
||||||
|
@include border-radius($input-border-radius, 0);
|
||||||
|
|
||||||
|
@include box-shadow($input-box-shadow);
|
||||||
|
@include transition($input-transition);
|
||||||
|
|
||||||
|
// Customize the `:focus` state to imitate native WebKit styles.
|
||||||
|
&:focus {
|
||||||
|
color: $input-focus-color;
|
||||||
|
background-color: $input-focus-bg;
|
||||||
|
border-color: $input-focus-border-color;
|
||||||
|
outline: 0;
|
||||||
|
@if $enable-shadows {
|
||||||
|
@include box-shadow($input-box-shadow, $input-focus-box-shadow);
|
||||||
|
} @else {
|
||||||
|
// Avoid using mixin so we can pass custom focus shadow properly
|
||||||
|
box-shadow: $input-focus-box-shadow;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Placeholder
|
||||||
|
&::placeholder {
|
||||||
|
color: $input-placeholder-color;
|
||||||
|
// Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Disabled and read-only inputs
|
||||||
|
//
|
||||||
|
// HTML5 says that controls under a fieldset > legend:first-child won't be
|
||||||
|
// disabled if the fieldset is disabled. Due to implementation difficulty, we
|
||||||
|
// don't honor that edge case; we style them as disabled anyway.
|
||||||
|
&:disabled,
|
||||||
|
&[readonly] {
|
||||||
|
background-color: $input-disabled-bg;
|
||||||
|
border-color: $input-disabled-border-color;
|
||||||
|
// iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
22
resources/volt/scss/volt/components/_timelines.scss
Executable file
22
resources/volt/scss/volt/components/_timelines.scss
Executable file
@ -0,0 +1,22 @@
|
|||||||
|
/**
|
||||||
|
* = Timelines
|
||||||
|
*/
|
||||||
|
|
||||||
|
.list-group-timeline {
|
||||||
|
.list-group-item {
|
||||||
|
position: relative;
|
||||||
|
.col-auto{
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
&:not(:last-child){
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 1rem;
|
||||||
|
left: 2.5rem;
|
||||||
|
height: 100%;
|
||||||
|
border-left: 1px solid $light;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
43
resources/volt/scss/volt/components/_tooltip.scss
Executable file
43
resources/volt/scss/volt/components/_tooltip.scss
Executable file
@ -0,0 +1,43 @@
|
|||||||
|
// Wrapper for the tooltip content
|
||||||
|
|
||||||
|
.tooltip-inner {
|
||||||
|
@include box-shadow($box-shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.chartist-tooltip {
|
||||||
|
position: absolute;
|
||||||
|
display: inline-block;
|
||||||
|
opacity: 0;
|
||||||
|
min-width: 5em;
|
||||||
|
padding: .5em;
|
||||||
|
background: $gray-100;
|
||||||
|
border: 1px solid $gray-100;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
color: $dark;
|
||||||
|
font-weight: $font-weight-bold;
|
||||||
|
text-align: center;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 1;
|
||||||
|
transition: $transition-base;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chartist-tooltip:before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 100%;
|
||||||
|
left: 50%;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
margin-left: -15px;
|
||||||
|
border: 15px solid transparent;
|
||||||
|
border-top-color: $gray-100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chartist-tooltip.tooltip-show {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ct-area, .ct-line {
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
170
resources/volt/scss/volt/components/_type.scss
Executable file
170
resources/volt/scss/volt/components/_type.scss
Executable file
@ -0,0 +1,170 @@
|
|||||||
|
/**
|
||||||
|
* = Typography
|
||||||
|
*/
|
||||||
|
|
||||||
|
h1,h2,h3,h4,h5,h6,
|
||||||
|
.h1, .h2, .h3, .h4, .h5, .h6 {
|
||||||
|
font-family: $font-family-sans-serif;
|
||||||
|
font-weight: $headings-font-weight;
|
||||||
|
}
|
||||||
|
|
||||||
|
p, ol li, ul li, .p {
|
||||||
|
font-family: $font-family-base;
|
||||||
|
font-size: $paragraph-font-size;
|
||||||
|
font-weight: $font-weight-normal;
|
||||||
|
line-height: $paragraph-line-height;
|
||||||
|
}
|
||||||
|
|
||||||
|
a, .text-action {
|
||||||
|
color: $link-color;
|
||||||
|
transition: $transition-base;
|
||||||
|
&:hover{
|
||||||
|
color: $link-hover-color;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.lead {
|
||||||
|
+ .btn-wrapper {
|
||||||
|
margin-top: 3rem;
|
||||||
|
}
|
||||||
|
@include media-breakpoint-down(md){
|
||||||
|
font-size: $font-size-base;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.line-through{
|
||||||
|
-webkit-text-decoration: line-through;
|
||||||
|
text-decoration: line-through;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-italic{
|
||||||
|
font-style: italic !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
font-size: $font-size-sm;
|
||||||
|
}
|
||||||
|
|
||||||
|
// underline on hover
|
||||||
|
|
||||||
|
.hover\:underline{
|
||||||
|
&:hover{
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Headings
|
||||||
|
|
||||||
|
.heading {
|
||||||
|
font-size: $h2-font-size;
|
||||||
|
font-weight: $font-weight-bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@include media-breakpoint-down(md){
|
||||||
|
.display-2{
|
||||||
|
font-size: $display4-size;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include media-breakpoint-down(lg){
|
||||||
|
.display-3{
|
||||||
|
font-size: $display4-size;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include media-breakpoint-down(sm){
|
||||||
|
.display-4{
|
||||||
|
font-size: $h4-font-size;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Blockquotes
|
||||||
|
.blockquote {
|
||||||
|
font-style: italic;
|
||||||
|
&.blockquote-large{
|
||||||
|
|
||||||
|
@include media-breakpoint-down(md) {
|
||||||
|
font-size: $font-size-lg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.blockquote-footer{
|
||||||
|
font-size: $font-size-sm;
|
||||||
|
font-weight: $font-weight-bolder;
|
||||||
|
|
||||||
|
@include media-breakpoint-down(md) {
|
||||||
|
font-size: $font-size-lg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Font Sizes
|
||||||
|
|
||||||
|
.font-small {
|
||||||
|
@include font-size($font-size-sm);
|
||||||
|
font-weight: $font-weight-light;
|
||||||
|
}
|
||||||
|
|
||||||
|
.font-base{
|
||||||
|
@include font-size($font-size-base);
|
||||||
|
font-weight: $font-weight-light;
|
||||||
|
}
|
||||||
|
|
||||||
|
.font-medium {
|
||||||
|
@include font-size($font-size-lg);
|
||||||
|
font-weight: $font-weight-light;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//PrismJs text
|
||||||
|
|
||||||
|
code[class*="language-"], pre[class*="language-"]{
|
||||||
|
text-shadow: none;
|
||||||
|
font-family: $font-family-base;
|
||||||
|
font-weight: $font-weight-bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Set color of theme buttons
|
||||||
|
@each $color, $value in $theme-colors {
|
||||||
|
.text-#{$color} {
|
||||||
|
&, &:hover {
|
||||||
|
color: $value !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:not(.btn),h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,.display-1, .display-2, .display-3, .display-4{
|
||||||
|
color: $value;
|
||||||
|
}
|
||||||
|
.text-muted{
|
||||||
|
color: rgba($value,.7) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
article {
|
||||||
|
img {
|
||||||
|
margin: 40px 0;
|
||||||
|
}
|
||||||
|
p, ul, ol, blockquote {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
p, ul li, ol li {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
h1, h2, h3, h4, h5, h6,
|
||||||
|
.h1, .h2, .h3, .h4, .h5, .h6 {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.folder-structure li {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.truncate-text {
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
15
resources/volt/scss/volt/forms/_form-check.scss
Normal file
15
resources/volt/scss/volt/forms/_form-check.scss
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
.form-check-input {
|
||||||
|
&.round-check{
|
||||||
|
&[type="checkbox"] {
|
||||||
|
@include border-radius($form-check-radio-border-radius);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-switch {
|
||||||
|
padding-left: $form-switch-padding-left;
|
||||||
|
|
||||||
|
.form-check-input {
|
||||||
|
height: 1.275em;
|
||||||
|
}
|
||||||
|
}
|
25
resources/volt/scss/volt/forms/_form-control.scss
Normal file
25
resources/volt/scss/volt/forms/_form-control.scss
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
.form-control{
|
||||||
|
|
||||||
|
@include media-breakpoint-up(lg) {
|
||||||
|
&.form-control-lg{
|
||||||
|
padding: $inpu-lg-padding-y $input-padding-x;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-bar {
|
||||||
|
.form-control {
|
||||||
|
width: 280px;
|
||||||
|
transition: width .2s ease-in-out;
|
||||||
|
|
||||||
|
@include media-breakpoint-down(sm) {
|
||||||
|
width: 120px;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
width: 150px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
23
resources/volt/scss/volt/forms/_form-select.scss
Normal file
23
resources/volt/scss/volt/forms/_form-select.scss
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
.form-select {
|
||||||
|
.form-select-lg{
|
||||||
|
padding: $form-select-padding-y ($form-select-padding-x + $form-select-indicator-padding) $form-select-padding-y $form-select-padding-x;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//Add File Alternative Style
|
||||||
|
|
||||||
|
.file-field input[type="file"] {
|
||||||
|
max-width: 230px;
|
||||||
|
position: absolute;
|
||||||
|
cursor: pointer;
|
||||||
|
filter: alpha(opacity=0);
|
||||||
|
opacity: 0;
|
||||||
|
padding-bottom: 30px;
|
||||||
|
}
|
||||||
|
.file-field svg {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datepicker-dropdown {
|
||||||
|
z-index: 9999;
|
||||||
|
}
|
13
resources/volt/scss/volt/forms/_input-group.scss
Normal file
13
resources/volt/scss/volt/forms/_input-group.scss
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
.input-group {
|
||||||
|
.form-control:focus {
|
||||||
|
border-color: $input-border-color;
|
||||||
|
|
||||||
|
& + .input-group-text {
|
||||||
|
border-color: $input-border-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group-text{
|
||||||
|
@include box-shadow($input-box-shadow);
|
||||||
|
}
|
105
resources/volt/scss/volt/layout/_footer.scss
Executable file
105
resources/volt/scss/volt/layout/_footer.scss
Executable file
@ -0,0 +1,105 @@
|
|||||||
|
/**
|
||||||
|
* = Footers
|
||||||
|
*/
|
||||||
|
|
||||||
|
.footer{
|
||||||
|
|
||||||
|
ul{
|
||||||
|
margin-bottom: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
|
||||||
|
li{
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
color: $gray-700;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.links-horizontal{
|
||||||
|
&:first-child a{
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child a{
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
&.links-vertical{
|
||||||
|
li{
|
||||||
|
display: block;
|
||||||
|
margin-left: -5px;
|
||||||
|
margin-right: -5px;
|
||||||
|
|
||||||
|
a{
|
||||||
|
padding: 5px;
|
||||||
|
|
||||||
|
&:hover{
|
||||||
|
color: inherit !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.icon-box{
|
||||||
|
i{
|
||||||
|
line-height: 1.7
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-buttons{
|
||||||
|
a,
|
||||||
|
.btn{
|
||||||
|
margin-top: 5px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
padding: $padding-footer-sm $padding-footer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-brand{
|
||||||
|
font-size: $font-size-lg;
|
||||||
|
font-weight: $font-weight-bold;
|
||||||
|
|
||||||
|
img.common {
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
}
|
||||||
|
&:hover,
|
||||||
|
&:focus{
|
||||||
|
color: $black;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.footer-language-link{
|
||||||
|
font-size:$font-size-sm;
|
||||||
|
i{
|
||||||
|
font-size: 0.75rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.copyright{
|
||||||
|
font-size: $font-size-sm;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pull-center{
|
||||||
|
display: inline-block;
|
||||||
|
float: none;
|
||||||
|
}
|
||||||
|
}
|
414
resources/volt/scss/volt/layout/_navbar.scss
Executable file
414
resources/volt/scss/volt/layout/_navbar.scss
Executable file
@ -0,0 +1,414 @@
|
|||||||
|
/**
|
||||||
|
* = Navigation bars
|
||||||
|
*/
|
||||||
|
|
||||||
|
.navbar-main {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 100;
|
||||||
|
|
||||||
|
.navbar-toggler-icon {
|
||||||
|
background-image: $navbar-dark-toggler-icon-bg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar .navbar-nav {
|
||||||
|
|
||||||
|
.nav-link {
|
||||||
|
@include transitions(.8s, $transition-base);
|
||||||
|
|
||||||
|
@include media-breakpoint-down(md) {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
@include display-flex();
|
||||||
|
@include justify-content(space-between);
|
||||||
|
@include align-items(center);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item {
|
||||||
|
.media:not(:last-child){
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
&:focus,
|
||||||
|
.nav-link:focus {
|
||||||
|
outline: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown {
|
||||||
|
|
||||||
|
.dropdown-menu {
|
||||||
|
top: 100%;
|
||||||
|
span{
|
||||||
|
width: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-item {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-megamenu,
|
||||||
|
.dropdown-megamenu-sm,
|
||||||
|
.dropdown-megamenu-md {
|
||||||
|
@include media-breakpoint-up(lg) {
|
||||||
|
min-width: 580px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.megamenu-link {
|
||||||
|
color: $gray;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: $font-size-sm;
|
||||||
|
}
|
||||||
|
|
||||||
|
.megamenu-item {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
|
||||||
|
.megamenu-link {
|
||||||
|
color: $primary;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-megamenu-sm {
|
||||||
|
@include media-breakpoint-up(lg) {
|
||||||
|
min-width: 320px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-megamenu-md {
|
||||||
|
@include media-breakpoint-up(lg) {
|
||||||
|
min-width: 960px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include media-breakpoint-up(lg) {
|
||||||
|
.dropdown-menu {
|
||||||
|
.dropdown-toggle .nav-link-arrow {
|
||||||
|
@include transform(rotate(-90deg));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown.show > .dropdown-toggle .nav-link-arrow {
|
||||||
|
@include transform(rotate(180deg));
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-toggle:hover .nav-link-arrow {
|
||||||
|
@include transform(rotate(0deg));
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-submenu {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.dropdown-menu {
|
||||||
|
top: 0;
|
||||||
|
left: calc(100% - 2px);
|
||||||
|
margin-left: .1rem;
|
||||||
|
margin-right: .1rem;
|
||||||
|
opacity: 0;
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
&.show {
|
||||||
|
opacity: 1;
|
||||||
|
pointer-events: all;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link-arrow {
|
||||||
|
transition: $transition-transform;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-brand {
|
||||||
|
font-size: $font-size-sm;
|
||||||
|
font-weight: $font-weight-bold;
|
||||||
|
text-transform: uppercase;
|
||||||
|
|
||||||
|
img {
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Navbar text and logo dark & light
|
||||||
|
.navbar-dark {
|
||||||
|
|
||||||
|
.navbar-brand-light {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-brand {
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
|
||||||
|
& > .nav-item:hover > .nav-link {
|
||||||
|
color: $primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-light {
|
||||||
|
|
||||||
|
&:not(.headroom--not-top) {
|
||||||
|
.btn-outline-soft {
|
||||||
|
border-color: $dark;
|
||||||
|
color: $dark;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $dark;
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-toggler-icon {
|
||||||
|
background-image: $navbar-light-toggler-icon-bg;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-brand-dark {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-brand {
|
||||||
|
color: $gray-800;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu {
|
||||||
|
top: 100%;
|
||||||
|
span{
|
||||||
|
width: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-transparent {
|
||||||
|
background-color: transparent;
|
||||||
|
border: 0;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include media-breakpoint-up(lg) {
|
||||||
|
.navbar-nav {
|
||||||
|
.nav-item {
|
||||||
|
[data-toggle="dropdown"]::after {
|
||||||
|
transition: $transition-base;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.show {
|
||||||
|
[data-toggle="dropdown"]::after {
|
||||||
|
@include transform(rotate(180deg));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.nav-link {
|
||||||
|
|
||||||
|
i {
|
||||||
|
margin-right: .3rem;
|
||||||
|
font-size: $font-size-xs;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link-icon {
|
||||||
|
padding-left: .5rem;
|
||||||
|
padding-right: .5rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
|
||||||
|
i {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu {
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
margin: 0;
|
||||||
|
border-radius: $dropdown-border-radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu-end {
|
||||||
|
&:before {
|
||||||
|
right: 20px;
|
||||||
|
left: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu-center {
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu,
|
||||||
|
.dropdown-megamenu,
|
||||||
|
.dropdown-megamenu-md {
|
||||||
|
&.show {
|
||||||
|
opacity: 1;
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.close {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-submenu .dropdown-menu {
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu {
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
transition: $transition-base;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown.show,
|
||||||
|
.dropdown-submenu.show {
|
||||||
|
& > .dropdown-menu {
|
||||||
|
display: block;
|
||||||
|
opacity: 1;
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu-inner {
|
||||||
|
position: relative;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-transparent {
|
||||||
|
.navbar-nav {
|
||||||
|
.nav-link {
|
||||||
|
&.disabled {
|
||||||
|
color: $navbar-dark-disabled-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-brand {
|
||||||
|
color: $navbar-dark-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// Collapse
|
||||||
|
.navbar-collapse-header {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-collapse {
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include media-breakpoint-down(lg) {
|
||||||
|
.navbar-nav {
|
||||||
|
.nav-link {
|
||||||
|
padding: .625rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu {
|
||||||
|
box-shadow: none;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.media svg {
|
||||||
|
width: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu-center {
|
||||||
|
right: 0;
|
||||||
|
left: auto;
|
||||||
|
transform: translate(0, 0);
|
||||||
|
@include media-breakpoint-down(lg) {
|
||||||
|
transform: translateX(-75%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-collapse {
|
||||||
|
width: calc(100% - 30px);
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 15px;
|
||||||
|
z-index: 1050;
|
||||||
|
overflow-y: auto;
|
||||||
|
// using !important to overwrite Bootstrap's inline styles
|
||||||
|
height: calc(100vh - 30px) !important;
|
||||||
|
opacity: 0;
|
||||||
|
|
||||||
|
.navbar-toggler {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
span {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 2px;
|
||||||
|
border-radius: 2px;
|
||||||
|
opacity: 1;
|
||||||
|
background: #283448;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-collapse-header {
|
||||||
|
display: block;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapse-brand img {
|
||||||
|
height: 35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapse-close {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-collapse.collapsing,
|
||||||
|
.navbar-collapse.show {
|
||||||
|
padding: 1.5rem;
|
||||||
|
border-radius: $dropdown-border-radius;
|
||||||
|
background: $white;
|
||||||
|
animation: show-navbar-collapse .2s ease forwards;
|
||||||
|
@include box-shadow(0 0 20px rgba(0, 0, 0, .1));
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-collapse.collapsing-out {
|
||||||
|
animation: hide-navbar-collapse .2s ease forwards;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-dashboard {
|
||||||
|
border-radius: $border-radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Theme color variants
|
||||||
|
// eg. navbar-theme-primary, navbar-theme-secondary
|
||||||
|
@each $color, $value in $navbar-colors {
|
||||||
|
.navbar-theme-#{$color}:not(.headroom) {
|
||||||
|
background-color: $value;
|
||||||
|
}
|
||||||
|
}
|
164
resources/volt/scss/volt/layout/_section.scss
Normal file
164
resources/volt/scss/volt/layout/_section.scss
Normal file
@ -0,0 +1,164 @@
|
|||||||
|
/**
|
||||||
|
* = Sections
|
||||||
|
*/
|
||||||
|
|
||||||
|
.section {
|
||||||
|
position: relative;
|
||||||
|
padding-top: $spacer * 3;
|
||||||
|
padding-bottom: $spacer * 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header {
|
||||||
|
position: relative;
|
||||||
|
padding-top: $spacer * 9;
|
||||||
|
padding-bottom: $spacer * 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include media-breakpoint-up(sm) {
|
||||||
|
.section {
|
||||||
|
position: relative;
|
||||||
|
padding-top: $spacer * 5;
|
||||||
|
padding-bottom: $spacer * 5;
|
||||||
|
}
|
||||||
|
.section-header {
|
||||||
|
position: relative;
|
||||||
|
padding-top: $spacer * 8;
|
||||||
|
padding-bottom: $spacer * 8;
|
||||||
|
&.section-sm{
|
||||||
|
padding-top: $spacer * 4;
|
||||||
|
padding-bottom: $spacer * 3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.section-xl {
|
||||||
|
padding-top: $spacer * 8;
|
||||||
|
padding-bottom: $spacer * 8;
|
||||||
|
}
|
||||||
|
.section-lg {
|
||||||
|
padding-top: $spacer * 6;
|
||||||
|
padding-bottom: $spacer * 6;
|
||||||
|
}
|
||||||
|
.section-sm {
|
||||||
|
padding-top: $spacer * 3;
|
||||||
|
padding-bottom: $spacer * 3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include media-breakpoint-up(lg) {
|
||||||
|
.section {
|
||||||
|
position: relative;
|
||||||
|
padding-top: $spacer * 6;
|
||||||
|
padding-bottom: $spacer * 6;
|
||||||
|
}
|
||||||
|
.section-header {
|
||||||
|
position: relative;
|
||||||
|
padding-top: $spacer * 10;
|
||||||
|
padding-bottom: $spacer * 10;
|
||||||
|
&.section-sm{
|
||||||
|
padding-top: $spacer * 4;
|
||||||
|
padding-bottom: $spacer * 3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.section-xl {
|
||||||
|
padding-top: $spacer * 10;
|
||||||
|
padding-bottom: $spacer * 10;
|
||||||
|
}
|
||||||
|
.section-lg {
|
||||||
|
padding-top: $spacer * 8;
|
||||||
|
padding-bottom: $spacer * 8;
|
||||||
|
}
|
||||||
|
.section-sm {
|
||||||
|
padding-top: $spacer * 4;
|
||||||
|
padding-bottom: $spacer * 4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Hero sections
|
||||||
|
.section-hero {
|
||||||
|
@include media-breakpoint-up(md) {
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//Section delimiter
|
||||||
|
.line-bottom{
|
||||||
|
&::after{
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
width: 80%;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -40%;
|
||||||
|
height: 1px;
|
||||||
|
background: radial-gradient(ellipse at center,$light 0,rgba(255,255,255,0) 80%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Profile cover
|
||||||
|
.section-profile-cover {
|
||||||
|
height: 580px;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center center;
|
||||||
|
@include media-breakpoint-down(md) {
|
||||||
|
height: 400px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Components section
|
||||||
|
.components-section {
|
||||||
|
>.form-control {
|
||||||
|
+.form-control {
|
||||||
|
margin-top: .5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>.nav+.nav,
|
||||||
|
>.alert+.alert,
|
||||||
|
>.navbar+.navbar,
|
||||||
|
>.progress+.progress,
|
||||||
|
>.progress+.btn,
|
||||||
|
.badge,
|
||||||
|
.btn {
|
||||||
|
margin-top: .5rem;
|
||||||
|
margin-bottom: .5rem;
|
||||||
|
}
|
||||||
|
.btn-group {
|
||||||
|
margin-top: .5rem;
|
||||||
|
margin-bottom: .5rem;
|
||||||
|
.btn {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.alert {
|
||||||
|
margin: 0;
|
||||||
|
+.alert {
|
||||||
|
margin-top: 1.25rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.badge {
|
||||||
|
margin-right: .5rem;
|
||||||
|
}
|
||||||
|
.modal-footer {
|
||||||
|
.btn {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.copy-docs {
|
||||||
|
position: absolute;
|
||||||
|
top: 5px;
|
||||||
|
right: 5px;
|
||||||
|
transition: $transition-base;
|
||||||
|
&.copied {
|
||||||
|
background: $success;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.kanban-container{
|
||||||
|
overflow-x: scroll;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
|
||||||
|
}
|
34
resources/volt/scss/volt/layout/_sidebar.scss
Normal file
34
resources/volt/scss/volt/layout/_sidebar.scss
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
/**
|
||||||
|
* = Sidebars
|
||||||
|
*/
|
||||||
|
|
||||||
|
#doc-index:not(.collapse.show), .doc-sidebar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include media-breakpoint-up(lg){
|
||||||
|
#doc-index{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.doc-sidebar {
|
||||||
|
display: block;
|
||||||
|
height: calc(100vh - 2rem);
|
||||||
|
overflow-y: scroll;
|
||||||
|
position: -webkit-sticky;
|
||||||
|
position: sticky;
|
||||||
|
top: 2rem;
|
||||||
|
|
||||||
|
.nav-link[data-toggle="collapse"] > .icon {
|
||||||
|
transform: rotateZ(-90deg);
|
||||||
|
position: relative;
|
||||||
|
right: .25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav{
|
||||||
|
.nav-item{
|
||||||
|
font-size:$font-size-sm;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
191
resources/volt/scss/volt/layout/_sidenav.scss
Normal file
191
resources/volt/scss/volt/layout/_sidenav.scss
Normal file
@ -0,0 +1,191 @@
|
|||||||
|
/*
|
||||||
|
* Sidebar
|
||||||
|
*/
|
||||||
|
.sidebar {
|
||||||
|
display: block;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 100;
|
||||||
|
max-height: 100%;
|
||||||
|
overflow-y: auto;
|
||||||
|
width: 100%;
|
||||||
|
@include transition(max-width .1s);
|
||||||
|
|
||||||
|
@include media-breakpoint-up(md) {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 260px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item {
|
||||||
|
&.active {
|
||||||
|
& > .nav-link {
|
||||||
|
color: $gray-100;
|
||||||
|
background-color: $gray-700;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.nav-link {
|
||||||
|
color: $white;
|
||||||
|
cursor: pointer;
|
||||||
|
&:hover {
|
||||||
|
color: $gray-100;
|
||||||
|
background-color: $gray-700;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
margin-bottom: .2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link + .multi-level {
|
||||||
|
margin-top: .2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link {
|
||||||
|
font-size: $font-size-base;
|
||||||
|
vertical-align: middle;
|
||||||
|
padding: 0.55rem 0.75rem;
|
||||||
|
@include border-radius($border-radius);
|
||||||
|
|
||||||
|
.sidebar-icon {
|
||||||
|
margin-right: .5rem;
|
||||||
|
color: $gray-400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-arrow{
|
||||||
|
font-size: $font-size-sm;
|
||||||
|
}
|
||||||
|
|
||||||
|
&[data-bs-toggle=collapse][aria-expanded=true] .link-arrow{
|
||||||
|
@include transform(rotate(90deg));
|
||||||
|
transition: $transition-base;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.nav-link.active {
|
||||||
|
color: $gray-100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.multi-level{
|
||||||
|
.nav-link{
|
||||||
|
padding-left: 53px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-text,
|
||||||
|
.link-arrow,
|
||||||
|
.badge,
|
||||||
|
.notification-count {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-text-contracted {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.contracted {
|
||||||
|
.sidebar-text,
|
||||||
|
.link-arrow,
|
||||||
|
.badge {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification-count {
|
||||||
|
opacity: 1;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 40px;
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
border-radius: 50%;
|
||||||
|
font-size: .7rem;
|
||||||
|
padding: .2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item {
|
||||||
|
position: relative;
|
||||||
|
&.active {
|
||||||
|
& > .nav-link {
|
||||||
|
background-color: #363c54;
|
||||||
|
width: 44px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.nav-link {
|
||||||
|
&:hover {
|
||||||
|
background-color: $primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-text-contracted {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.multi-level .nav-link {
|
||||||
|
padding-left: 17px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-icon {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@include media-breakpoint-up(md) {
|
||||||
|
& + .content {
|
||||||
|
margin-left: 95px;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
max-width: 95px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-inner {
|
||||||
|
position: relative;
|
||||||
|
overflow-y: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-heading {
|
||||||
|
font-size: .75rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-card{
|
||||||
|
border-bottom: 0.0625rem solid #2e3650;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include media-breakpoint-down(sm) {
|
||||||
|
.sidebar {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 0 $spacer 0 $spacer;
|
||||||
|
@include transition(all .3s);
|
||||||
|
|
||||||
|
@include media-breakpoint-up(lg) {
|
||||||
|
margin-left: 260px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-toggle {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
outline: none;
|
||||||
|
box-shadow: none;
|
||||||
|
background: $gray-300;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
45
resources/volt/scss/volt/mixins/_animations.scss
Executable file
45
resources/volt/scss/volt/mixins/_animations.scss
Executable file
@ -0,0 +1,45 @@
|
|||||||
|
@mixin perspective($value){
|
||||||
|
-webkit-perspective: $value;
|
||||||
|
-moz-perspective: $value;
|
||||||
|
-o-perspective: $value;
|
||||||
|
-ms-perspective: $value;
|
||||||
|
perspective: $value;
|
||||||
|
}
|
||||||
|
@mixin transitions($time, $type){
|
||||||
|
-webkit-transition: all $time $type;
|
||||||
|
-moz-transition: all $time $type;
|
||||||
|
-o-transition: all $time $type;
|
||||||
|
-ms-transition: all $time $type;
|
||||||
|
transition: all $time $type;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin transitions-property($property, $time, $type){
|
||||||
|
-webkit-transition: $property $time $type;
|
||||||
|
-moz-transition: $property $time $type;
|
||||||
|
-o-transition: $property $time $type;
|
||||||
|
-ms-transition: $property $time $type;
|
||||||
|
transition: $property $time $type;
|
||||||
|
}
|
||||||
|
@mixin transform-style($type){
|
||||||
|
-webkit-transform-style: $type;
|
||||||
|
-moz-transform-style: $type;
|
||||||
|
-o-transform-style: $type;
|
||||||
|
-ms-transform-style: $type;
|
||||||
|
transform-style: $type;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin backface-visibility($type){
|
||||||
|
-webkit-backface-visibility: $type;
|
||||||
|
-moz-backface-visibility: $type;
|
||||||
|
-o-backface-visibility: $type;
|
||||||
|
-ms-backface-visibility: $type;
|
||||||
|
backface-visibility: $type;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin rotateY-180() {
|
||||||
|
-webkit-transform: rotateY( 180deg );
|
||||||
|
-moz-transform: rotateY( 180deg );
|
||||||
|
-o-transform: rotateY( 180deg );
|
||||||
|
-ms-transform: rotateY(180deg);
|
||||||
|
transform: rotateY( 180deg );
|
||||||
|
}
|
25
resources/volt/scss/volt/mixins/_background-variant.scss
Executable file
25
resources/volt/scss/volt/mixins/_background-variant.scss
Executable file
@ -0,0 +1,25 @@
|
|||||||
|
// Contextual backgrounds
|
||||||
|
@mixin bg-variant($parent, $color) {
|
||||||
|
#{$parent} {
|
||||||
|
background-color: $color !important;
|
||||||
|
}
|
||||||
|
a#{$parent},
|
||||||
|
button#{$parent} {
|
||||||
|
@include hover-focus {
|
||||||
|
background-color: darken($color, 10%) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin bg-gradient-variant($parent, $color) {
|
||||||
|
#{$parent} {
|
||||||
|
background: linear-gradient(87deg, $color 0, saturate($color, 10%) 100%) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin background-image($background-repeat,$background-size) {
|
||||||
|
background-repeat: $background-repeat;
|
||||||
|
background-position: top center;
|
||||||
|
background-size: $background-size;
|
||||||
|
}
|
||||||
|
|
17
resources/volt/scss/volt/mixins/_icon.scss
Executable file
17
resources/volt/scss/volt/mixins/_icon.scss
Executable file
@ -0,0 +1,17 @@
|
|||||||
|
@mixin icon-shape-variant($color) {
|
||||||
|
color: $color;
|
||||||
|
background-color: rgba( $color, .3 );
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin icon-parallax-background($background-position,$background-size,$background-attachment,$background-repeat) {
|
||||||
|
background-position: $background-position;
|
||||||
|
background-size: $background-size;
|
||||||
|
background-attachment: $background-attachment;
|
||||||
|
background-repeat: $background-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin icon-image-background($background-position,$background-size,$background-repeat) {
|
||||||
|
background-position: $background-position;
|
||||||
|
background-size: $background-size;
|
||||||
|
background-repeat: $background-repeat;
|
||||||
|
}
|
23
resources/volt/scss/volt/mixins/_modals.scss
Executable file
23
resources/volt/scss/volt/mixins/_modals.scss
Executable file
@ -0,0 +1,23 @@
|
|||||||
|
@mixin modal-variant($background) {
|
||||||
|
.modal-title {
|
||||||
|
color: color-yiq($background);
|
||||||
|
}
|
||||||
|
.modal-header,
|
||||||
|
.modal-footer {
|
||||||
|
border-color: rgba($background, .075);
|
||||||
|
}
|
||||||
|
.modal-content {
|
||||||
|
background-color: $background;
|
||||||
|
color: color-yiq($background);
|
||||||
|
|
||||||
|
.heading {
|
||||||
|
color: color-yiq($background);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.close {
|
||||||
|
&>span:not(.sr-only) {
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
36
resources/volt/scss/volt/mixins/_popover.scss
Executable file
36
resources/volt/scss/volt/mixins/_popover.scss
Executable file
@ -0,0 +1,36 @@
|
|||||||
|
@mixin popover-variant($background) {
|
||||||
|
|
||||||
|
background-color: $background;
|
||||||
|
|
||||||
|
.popover-header {
|
||||||
|
background-color: $background;
|
||||||
|
color: color-yiq($background);
|
||||||
|
}
|
||||||
|
|
||||||
|
.popover-body {
|
||||||
|
color: color-yiq($background);
|
||||||
|
}
|
||||||
|
.popover-header{
|
||||||
|
border-color: rgba($background, .2);
|
||||||
|
}
|
||||||
|
&.bs-popover-top {
|
||||||
|
.arrow::after {
|
||||||
|
border-top-color: $background;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.bs-popover-end {
|
||||||
|
.arrow::after {
|
||||||
|
border-right-color: $background;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.bs-popover-bottom {
|
||||||
|
.arrow::after {
|
||||||
|
border-bottom-color: $background;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.bs-popover-start {
|
||||||
|
.arrow::after {
|
||||||
|
border-left-color: $background;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
19
resources/volt/scss/volt/mixins/_transform.scss
Executable file
19
resources/volt/scss/volt/mixins/_transform.scss
Executable file
@ -0,0 +1,19 @@
|
|||||||
|
|
||||||
|
@mixin transform($transforms) {
|
||||||
|
-moz-transform: $transforms;
|
||||||
|
-o-transform: $transforms;
|
||||||
|
-ms-transform: $transforms;
|
||||||
|
-webkit-transform: $transforms;
|
||||||
|
transform: $transforms;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// translate
|
||||||
|
@mixin translate ($x, $y) {
|
||||||
|
@include transform(translate($x, $y));
|
||||||
|
}
|
||||||
|
|
||||||
|
// rotate
|
||||||
|
@mixin rotate ($deg) {
|
||||||
|
@include transform(rotate(#{$deg}deg));
|
||||||
|
}
|
123
resources/volt/scss/volt/mixins/_utilities.scss
Normal file
123
resources/volt/scss/volt/mixins/_utilities.scss
Normal file
@ -0,0 +1,123 @@
|
|||||||
|
@mixin filter($filter) {
|
||||||
|
-webkit-filter: #{$filter};
|
||||||
|
-moz-filter: #{$filter};
|
||||||
|
-ms-filter: #{$filter};
|
||||||
|
-o-filter: #{$filter};
|
||||||
|
filter: #{$filter};
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin backface-visibility($value) {
|
||||||
|
-webkit-backface-visibility: $value;
|
||||||
|
-moz-backface-visibility: $value;
|
||||||
|
-o-backface-visibility: $value;
|
||||||
|
backface-visibility: $value;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin transform-style($value) {
|
||||||
|
-webkit-transform-style: $value;
|
||||||
|
-moz-transform-style: $value;
|
||||||
|
-o-transform-style: $value;
|
||||||
|
transform-style: $value;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin perspective($value) {
|
||||||
|
-webkit-perspective: $value;
|
||||||
|
-moz-perspective: $value;
|
||||||
|
-o-perspective: $value;
|
||||||
|
perspective: $value;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin display-flex() {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -moz-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin flex($values) {
|
||||||
|
-webkit-box-flex: $values;
|
||||||
|
-moz-box-flex: $values;
|
||||||
|
-webkit-flex: $values;
|
||||||
|
-ms-flex: $values;
|
||||||
|
flex: $values;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin flex-direction($direction) {
|
||||||
|
-webkit-flex-direction: $direction;
|
||||||
|
-moz-flex-direction: $direction;
|
||||||
|
-ms-flex-direction: $direction;
|
||||||
|
flex-direction: $direction;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin flex-wrap($wrap) {
|
||||||
|
-webkit-flex-wrap: $wrap;
|
||||||
|
-moz-flex-wrap: $wrap;
|
||||||
|
-ms-flex-wrap: $wrap;
|
||||||
|
flex-wrap: $wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin flex-flow($flow) {
|
||||||
|
-webkit-flex-flow: $flow;
|
||||||
|
-moz-flex-flow: $flow;
|
||||||
|
-ms-flex-flow: $flow;
|
||||||
|
flex-flow: $flow;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin order($val) {
|
||||||
|
-webkit-box-ordinal-group: $val;
|
||||||
|
-moz-box-ordinal-group: $val;
|
||||||
|
-ms-flex-order: $val;
|
||||||
|
-webkit-order: $val;
|
||||||
|
order: $val;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin flex-grow($grow) {
|
||||||
|
-webkit-flex-grow: $grow;
|
||||||
|
-moz-flex-grow: $grow;
|
||||||
|
-ms-flex-grow: $grow;
|
||||||
|
flex-grow: $grow;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin flex-shrink($shrink) {
|
||||||
|
-webkit-flex-shrink: $shrink;
|
||||||
|
-moz-flex-shrink: $shrink;
|
||||||
|
-ms-flex-shrink: $shrink;
|
||||||
|
flex-shrink: $shrink;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin flex-basis($width) {
|
||||||
|
-webkit-flex-basis: $width;
|
||||||
|
-moz-flex-basis: $width;
|
||||||
|
-ms-flex-basis: $width;
|
||||||
|
flex-basis: $width;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin justify-content($justify) {
|
||||||
|
-webkit-justify-content: $justify;
|
||||||
|
-moz-justify-content: $justify;
|
||||||
|
-ms-justify-content: $justify;
|
||||||
|
justify-content: $justify;
|
||||||
|
-ms-flex-pack: $justify;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin align-content($align) {
|
||||||
|
-webkit-align-content: $align;
|
||||||
|
-moz-align-content: $align;
|
||||||
|
-ms-align-content: $align;
|
||||||
|
align-content: $align;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin align-items($align) {
|
||||||
|
-webkit-align-items: $align;
|
||||||
|
-moz-align-items: $align;
|
||||||
|
-ms-align-items: $align;
|
||||||
|
align-items: $align;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin align-self($align) {
|
||||||
|
-webkit-align-self: $align;
|
||||||
|
-moz-align-self: $align;
|
||||||
|
-ms-align-self: $align;
|
||||||
|
align-self: $align;
|
||||||
|
}
|
@ -4,7 +4,10 @@ import laravel from 'laravel-vite-plugin';
|
|||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [
|
plugins: [
|
||||||
laravel({
|
laravel({
|
||||||
input: ['resources/css/app.css', 'resources/js/app.js'],
|
input: [
|
||||||
|
'resources/volt/scss/app.scss',
|
||||||
|
'resources/volt/js/app.js'
|
||||||
|
],
|
||||||
refresh: true,
|
refresh: true,
|
||||||
}),
|
}),
|
||||||
],
|
],
|
||||||
|
Loading…
Reference in New Issue
Block a user