Added and configured css, js in Vite.
This commit is contained in:
parent
fbb56d8191
commit
719d4c7f10
GPG Key ID:
7DE8F80C5CEC2C0D
@ -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({
|
||||
plugins: [
|
||||
laravel({
|
||||
input: ['resources/css/app.css', 'resources/js/app.js'],
|
||||
input: [
|
||||
'resources/volt/scss/app.scss',
|
||||
'resources/volt/js/app.js'
|
||||
],
|
||||
refresh: true,
|
||||
}),
|
||||
],
|
||||
|
||||
Loading…
Reference in New Issue
Block a user