From 719d4c7f106e12befee411cae1fc8d7f740f9186 Mon Sep 17 00:00:00 2001 From: Leonid Nikitin Date: Thu, 29 Jun 2023 22:20:38 +0600 Subject: [PATCH] Added and configured css, js in Vite. --- resources/css/app.css | 0 resources/js/app.js | 1 - resources/volt/LICENSE.md | 7 + .../volt/images/illustrations/signin.svg | 2332 +++++++++++++++++ resources/volt/js/app.js | 5 + resources/{ => volt}/js/bootstrap.js | 0 resources/volt/js/volt.js | 362 +++ resources/volt/scss/_variables.scss | 1 + resources/volt/scss/app.scss | 89 + resources/volt/scss/volt/_components.scss | 30 + resources/volt/scss/volt/_forms.scss | 4 + resources/volt/scss/volt/_functions.scss | 23 + resources/volt/scss/volt/_layout.scss | 5 + resources/volt/scss/volt/_mixins.scss | 7 + resources/volt/scss/volt/_utilities.scss | 95 + resources/volt/scss/volt/_variables.scss | 1660 ++++++++++++ resources/volt/scss/volt/_vendor.scss | 6 + .../scss/volt/components/_accordions.scss | 52 + .../volt/scss/volt/components/_alerts.scss | 10 + .../scss/volt/components/_animations.scss | 234 ++ .../volt/scss/volt/components/_avatars.scss | 102 + .../volt/scss/volt/components/_badge.scss | 98 + .../volt/scss/volt/components/_body.scss | 31 + .../scss/volt/components/_breadcrumb.scss | 56 + .../volt/scss/volt/components/_buttons.scss | 86 + .../volt/scss/volt/components/_card.scss | 149 ++ .../volt/scss/volt/components/_carousel.scss | 52 + .../volt/scss/volt/components/_charts.scss | 52 + .../volt/scss/volt/components/_close.scss | 33 + .../scss/volt/components/_custom-forms.scss | 103 + .../scss/volt/components/_datepicker.scss | 13 + .../volt/scss/volt/components/_dropdown.scss | 68 + .../volt/scss/volt/components/_icons.scss | 202 ++ .../volt/scss/volt/components/_images.scss | 67 + .../scss/volt/components/_list-group.scss | 96 + .../volt/scss/volt/components/_modal.scss | 36 + resources/volt/scss/volt/components/_nav.scss | 256 ++ .../scss/volt/components/_pagination.scss | 16 + .../volt/scss/volt/components/_popover.scss | 19 + .../volt/scss/volt/components/_progress.scss | 116 + .../volt/scss/volt/components/_scrollbar.scss | 228 ++ .../volt/scss/volt/components/_shapes.scss | 18 + .../volt/scss/volt/components/_steps.scss | 61 + .../volt/scss/volt/components/_tables.scss | 394 +++ .../volt/scss/volt/components/_timelines.scss | 22 + .../volt/scss/volt/components/_tooltip.scss | 43 + .../volt/scss/volt/components/_type.scss | 170 ++ .../volt/scss/volt/forms/_form-check.scss | 15 + .../volt/scss/volt/forms/_form-control.scss | 25 + .../volt/scss/volt/forms/_form-select.scss | 23 + .../volt/scss/volt/forms/_input-group.scss | 13 + resources/volt/scss/volt/layout/_footer.scss | 105 + resources/volt/scss/volt/layout/_navbar.scss | 414 +++ resources/volt/scss/volt/layout/_section.scss | 164 ++ resources/volt/scss/volt/layout/_sidebar.scss | 34 + resources/volt/scss/volt/layout/_sidenav.scss | 191 ++ .../volt/scss/volt/mixins/_animations.scss | 45 + .../scss/volt/mixins/_background-variant.scss | 25 + resources/volt/scss/volt/mixins/_icon.scss | 17 + resources/volt/scss/volt/mixins/_modals.scss | 23 + resources/volt/scss/volt/mixins/_popover.scss | 36 + .../volt/scss/volt/mixins/_transform.scss | 19 + .../volt/scss/volt/mixins/_utilities.scss | 123 + vite.config.js | 5 +- 64 files changed, 8785 insertions(+), 2 deletions(-) delete mode 100644 resources/css/app.css delete mode 100644 resources/js/app.js create mode 100644 resources/volt/LICENSE.md create mode 100644 resources/volt/images/illustrations/signin.svg create mode 100644 resources/volt/js/app.js rename resources/{ => volt}/js/bootstrap.js (100%) create mode 100644 resources/volt/js/volt.js create mode 100644 resources/volt/scss/_variables.scss create mode 100644 resources/volt/scss/app.scss create mode 100644 resources/volt/scss/volt/_components.scss create mode 100644 resources/volt/scss/volt/_forms.scss create mode 100755 resources/volt/scss/volt/_functions.scss create mode 100644 resources/volt/scss/volt/_layout.scss create mode 100755 resources/volt/scss/volt/_mixins.scss create mode 100755 resources/volt/scss/volt/_utilities.scss create mode 100644 resources/volt/scss/volt/_variables.scss create mode 100644 resources/volt/scss/volt/_vendor.scss create mode 100755 resources/volt/scss/volt/components/_accordions.scss create mode 100644 resources/volt/scss/volt/components/_alerts.scss create mode 100644 resources/volt/scss/volt/components/_animations.scss create mode 100755 resources/volt/scss/volt/components/_avatars.scss create mode 100755 resources/volt/scss/volt/components/_badge.scss create mode 100644 resources/volt/scss/volt/components/_body.scss create mode 100755 resources/volt/scss/volt/components/_breadcrumb.scss create mode 100755 resources/volt/scss/volt/components/_buttons.scss create mode 100755 resources/volt/scss/volt/components/_card.scss create mode 100755 resources/volt/scss/volt/components/_carousel.scss create mode 100644 resources/volt/scss/volt/components/_charts.scss create mode 100755 resources/volt/scss/volt/components/_close.scss create mode 100755 resources/volt/scss/volt/components/_custom-forms.scss create mode 100755 resources/volt/scss/volt/components/_datepicker.scss create mode 100755 resources/volt/scss/volt/components/_dropdown.scss create mode 100755 resources/volt/scss/volt/components/_icons.scss create mode 100644 resources/volt/scss/volt/components/_images.scss create mode 100755 resources/volt/scss/volt/components/_list-group.scss create mode 100755 resources/volt/scss/volt/components/_modal.scss create mode 100755 resources/volt/scss/volt/components/_nav.scss create mode 100755 resources/volt/scss/volt/components/_pagination.scss create mode 100755 resources/volt/scss/volt/components/_popover.scss create mode 100755 resources/volt/scss/volt/components/_progress.scss create mode 100644 resources/volt/scss/volt/components/_scrollbar.scss create mode 100755 resources/volt/scss/volt/components/_shapes.scss create mode 100755 resources/volt/scss/volt/components/_steps.scss create mode 100644 resources/volt/scss/volt/components/_tables.scss create mode 100755 resources/volt/scss/volt/components/_timelines.scss create mode 100755 resources/volt/scss/volt/components/_tooltip.scss create mode 100755 resources/volt/scss/volt/components/_type.scss create mode 100644 resources/volt/scss/volt/forms/_form-check.scss create mode 100644 resources/volt/scss/volt/forms/_form-control.scss create mode 100644 resources/volt/scss/volt/forms/_form-select.scss create mode 100644 resources/volt/scss/volt/forms/_input-group.scss create mode 100755 resources/volt/scss/volt/layout/_footer.scss create mode 100755 resources/volt/scss/volt/layout/_navbar.scss create mode 100644 resources/volt/scss/volt/layout/_section.scss create mode 100644 resources/volt/scss/volt/layout/_sidebar.scss create mode 100644 resources/volt/scss/volt/layout/_sidenav.scss create mode 100755 resources/volt/scss/volt/mixins/_animations.scss create mode 100755 resources/volt/scss/volt/mixins/_background-variant.scss create mode 100755 resources/volt/scss/volt/mixins/_icon.scss create mode 100755 resources/volt/scss/volt/mixins/_modals.scss create mode 100755 resources/volt/scss/volt/mixins/_popover.scss create mode 100755 resources/volt/scss/volt/mixins/_transform.scss create mode 100644 resources/volt/scss/volt/mixins/_utilities.scss diff --git a/resources/css/app.css b/resources/css/app.css deleted file mode 100644 index e69de29..0000000 diff --git a/resources/js/app.js b/resources/js/app.js deleted file mode 100644 index e59d6a0..0000000 --- a/resources/js/app.js +++ /dev/null @@ -1 +0,0 @@ -import './bootstrap'; diff --git a/resources/volt/LICENSE.md b/resources/volt/LICENSE.md new file mode 100644 index 0000000..b852f2b --- /dev/null +++ b/resources/volt/LICENSE.md @@ -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. \ No newline at end of file diff --git a/resources/volt/images/illustrations/signin.svg b/resources/volt/images/illustrations/signin.svg new file mode 100644 index 0000000..dfd96a8 --- /dev/null +++ b/resources/volt/images/illustrations/signin.svg @@ -0,0 +1,2332 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/resources/volt/js/app.js b/resources/volt/js/app.js new file mode 100644 index 0000000..daaea29 --- /dev/null +++ b/resources/volt/js/app.js @@ -0,0 +1,5 @@ +import.meta.glob([ + '../images/**', +]); +import './bootstrap'; +import './volt.js'; diff --git a/resources/js/bootstrap.js b/resources/volt/js/bootstrap.js similarity index 100% rename from resources/js/bootstrap.js rename to resources/volt/js/bootstrap.js diff --git a/resources/volt/js/volt.js b/resources/volt/js/volt.js new file mode 100644 index 0000000..c0bcd18 --- /dev/null +++ b/resources/volt/js/volt.js @@ -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(); + } + }); + } + +}); diff --git a/resources/volt/scss/_variables.scss b/resources/volt/scss/_variables.scss new file mode 100644 index 0000000..c094802 --- /dev/null +++ b/resources/volt/scss/_variables.scss @@ -0,0 +1 @@ +// $primary: blue; diff --git a/resources/volt/scss/app.scss b/resources/volt/scss/app.scss new file mode 100644 index 0000000..fca7402 --- /dev/null +++ b/resources/volt/scss/app.scss @@ -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! diff --git a/resources/volt/scss/volt/_components.scss b/resources/volt/scss/volt/_components.scss new file mode 100644 index 0000000..d317837 --- /dev/null +++ b/resources/volt/scss/volt/_components.scss @@ -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"; diff --git a/resources/volt/scss/volt/_forms.scss b/resources/volt/scss/volt/_forms.scss new file mode 100644 index 0000000..cecae7b --- /dev/null +++ b/resources/volt/scss/volt/_forms.scss @@ -0,0 +1,4 @@ +@import "forms/form-control"; +@import "forms/form-check"; +@import "forms/input-group"; +@import "forms/form-select"; \ No newline at end of file diff --git a/resources/volt/scss/volt/_functions.scss b/resources/volt/scss/volt/_functions.scss new file mode 100755 index 0000000..99ef591 --- /dev/null +++ b/resources/volt/scss/volt/_functions.scss @@ -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); +} \ No newline at end of file diff --git a/resources/volt/scss/volt/_layout.scss b/resources/volt/scss/volt/_layout.scss new file mode 100644 index 0000000..f687e04 --- /dev/null +++ b/resources/volt/scss/volt/_layout.scss @@ -0,0 +1,5 @@ +@import "layout/navbar"; +@import "layout/section"; +@import "layout/footer"; +@import "layout/sidebar"; +@import "layout/sidenav"; diff --git a/resources/volt/scss/volt/_mixins.scss b/resources/volt/scss/volt/_mixins.scss new file mode 100755 index 0000000..45a7df7 --- /dev/null +++ b/resources/volt/scss/volt/_mixins.scss @@ -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"; diff --git a/resources/volt/scss/volt/_utilities.scss b/resources/volt/scss/volt/_utilities.scss new file mode 100755 index 0000000..f3c2c14 --- /dev/null +++ b/resources/volt/scss/volt/_utilities.scss @@ -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, + ), + ), + ) +); diff --git a/resources/volt/scss/volt/_variables.scss b/resources/volt/scss/volt/_variables.scss new file mode 100644 index 0000000..5c7abc0 --- /dev/null +++ b/resources/volt/scss/volt/_variables.scss @@ -0,0 +1,1660 @@ +// Variables +// +// Variables should follow the `$component-state-property-size` formula for +// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs. + +// Color system + +// Shades of grey +$white : #ffffff !default; +$gray-50: #F9FAFB !default; +$gray-100: #F2F4F6 !default; +$gray-200: #E5E7EB !default; +$gray-300: #D1D5DB !default; +$gray-400: #9CA3AF !default; +$gray-500: #6B7280 !default; +$gray-600: #4B5563 !default; +$gray-700: #374151 !default; +$gray-800: #1F2937 !default; +$gray-900: #111827 !default; +$dark : $gray-800 !default; +$black : $gray-900 !default; + +// fusv-disable +$grays: ("100": $gray-100, + "200": $gray-200, + "300": $gray-300, + "400": $gray-400, + "500": $gray-500, + "600": $gray-600, + "700": $gray-700, + "800": $gray-800, + "900": $gray-900) !default; +// fusv-enable + +// Generic colors +$blue : #2361ce !default; +$indigo : #4F46E5 !default; +$purple : #7C3AED !default; +$pink : #EF4683 !default; +$red : #E11D48 !default; +$orange : #FBA918 !default; +$brown : #b9a084 !default; +$yellow : #f3c78e !default; +$yellow-100 : #ffeed6 !default; +$yellow-200 : #f5dbb8 !default; +$green : #10B981 !default; +$teal : #1E90FF !default; +$cyan : #63b1bd !default; +$soft-indigo: #f5e8ff !default; +$soft-green : #2CA58D !default; + +// scss-docs-start colors-map +$colors: ("blue": $blue, + "indigo": $indigo, + "purple": $purple, + "pink": $pink, + "red": $red, + "orange": $orange, + "yellow": $yellow, + "green": $green, + "teal": $teal, + "cyan": $cyan, + "white": $white, + "gray": $gray-600, + "gray-dark": $gray-800) !default; +// scss-docs-end colors-map + +// Color scheme +$primary : #1F2937 !default; +$secondary: #f0bc74 !default; +$tertiary : #31316A !default; + +// Series names and colors. This can be extended or customized as desired. Just add more series and colors. +$ct-series-names: (a, b, c, d, e, f, g) !default !default; +$ct-series-colors: (#262B40, + #F8BD7A, + #2CA58D, + #31316A, + #C96480, + #ffffff, + #F8BD7A, + +) !default; + + +$success: $green !default; +$info : $blue !default; +$warning: $yellow !default; +$danger : $red !default; +$gray : $gray-900 !default; +$light : $gray-400 !default; +$lighten: $gray-300 !default; +$soft : $gray-200 !default; +$dark : $dark !default; + +// Brands colors +$facebook : #3b5999 !default; +$twitter : #1da1f2 !default; +$google : #DB4337 !default; +$instagram: #e4405f !default; +$pinterest: #bd081c !default; +$youtube : #cd201f !default; +$slack : #3aaf85 !default; +$dribbble : #ea4c89 !default; +$github : #222222 !default; +$dropbox : #1E90FF !default; +$twitch : #4B367C !default; +$paypal : #ecb32c !default; +$behance : #0057ff !default; +$reddit : #E84422 !default; + +// Brand colors +$brand-colors: ("facebook": $facebook, + "twitter": $twitter, + "google": $google, + "instagram": $instagram, + "pinterest": $pinterest, + "youtube": $youtube, + "slack": $slack, + "dribbble": $dribbble, + "dropbox": $dropbox, + "twitch": $twitch, + "paypal": $paypal, + "behance": $behance, + "reddit" : $reddit, + "github": $github) !default; + +// Theme colors +$theme-colors: ( + "primary": $primary, + "secondary": $secondary, + "tertiary": $tertiary, + "success": $success, + "info": $info, + "warning": $warning, + "danger": $danger, + "white": $white, + "indigo": $indigo, + "purple": $purple, + "yellow-100": $yellow-100, + "yellow-200": $yellow-200, + "gray-50": $gray-50, + "gray-100": $gray-100, + "gray-200": $gray-200, + "gray-300": $gray-300, + "gray-400": $gray-400, + "gray-500": $gray-500, + "gray-600": $gray-600, + "gray-700": $gray-700, + "gray-800": $gray-800, + "gray-900": $gray-900 + ) !default; + + // Navbar colors + $navbar-colors: ("primary": $primary, +) !default; + +// Set a specific jump point for requesting color jumps +$theme-color-interval: 8% !default; + +// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7. +// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast +$min-contrast-ratio: 3 !default; + +// Customize the light and dark text colors for use in our color contrast function. +$color-contrast-dark : $dark !default; +$color-contrast-light: $white !default; + +// fusv-disable +$blue-100: tint-color($blue, 8) !default; +$blue-200: tint-color($blue, 6) !default; +$blue-300: tint-color($blue, 4) !default; +$blue-400: tint-color($blue, 2) !default; +$blue-500: $blue !default; +$blue-600: shade-color($blue, 2) !default; +$blue-700: shade-color($blue, 4) !default; +$blue-800: shade-color($blue, 6) !default; +$blue-900: shade-color($blue, 8) !default; + +$indigo-100: tint-color($indigo, 8) !default; +$indigo-200: tint-color($indigo, 6) !default; +$indigo-300: tint-color($indigo, 4) !default; +$indigo-400: tint-color($indigo, 2) !default; +$indigo-500: $indigo !default; +$indigo-600: shade-color($indigo, 2) !default; +$indigo-700: shade-color($indigo, 4) !default; +$indigo-800: shade-color($indigo, 6) !default; +$indigo-900: shade-color($indigo, 8) !default; + +$purple-100: tint-color($purple, 8) !default; +$purple-200: tint-color($purple, 6) !default; +$purple-300: tint-color($purple, 4) !default; +$purple-400: tint-color($purple, 2) !default; +$purple-500: $purple !default; +$purple-600: shade-color($purple, 2) !default; +$purple-700: shade-color($purple, 4) !default; +$purple-800: shade-color($purple, 6) !default; +$purple-900: shade-color($purple, 8) !default; + +$pink-100: tint-color($pink, 8) !default; +$pink-200: tint-color($pink, 6) !default; +$pink-300: tint-color($pink, 4) !default; +$pink-400: tint-color($pink, 2) !default; +$pink-500: $pink !default; +$pink-600: shade-color($pink, 2) !default; +$pink-700: shade-color($pink, 4) !default; +$pink-800: shade-color($pink, 6) !default; +$pink-900: shade-color($pink, 8) !default; + +$red-100: tint-color($red, 8) !default; +$red-200: tint-color($red, 6) !default; +$red-300: tint-color($red, 4) !default; +$red-400: tint-color($red, 2) !default; +$red-500: $red !default; +$red-600: shade-color($red, 2) !default; +$red-700: shade-color($red, 4) !default; +$red-800: shade-color($red, 6) !default; +$red-900: shade-color($red, 8) !default; + +$orange-100: tint-color($orange, 8) !default; +$orange-200: tint-color($orange, 6) !default; +$orange-300: tint-color($orange, 4) !default; +$orange-400: tint-color($orange, 2) !default; +$orange-500: $orange !default; +$orange-600: shade-color($orange, 2) !default; +$orange-700: shade-color($orange, 4) !default; +$orange-800: shade-color($orange, 6) !default; +$orange-900: shade-color($orange, 8) !default; + +$yellow-100: tint-color($yellow, 8) !default; +$yellow-200: tint-color($yellow, 6) !default; +$yellow-300: tint-color($yellow, 4) !default; +$yellow-400: tint-color($yellow, 2) !default; +$yellow-500: $yellow !default; +$yellow-600: shade-color($yellow, 2) !default; +$yellow-700: shade-color($yellow, 4) !default; +$yellow-800: shade-color($yellow, 6) !default; +$yellow-900: shade-color($yellow, 8) !default; + +$green-100: tint-color($green, 8) !default; +$green-200: tint-color($green, 6) !default; +$green-300: tint-color($green, 4) !default; +$green-400: tint-color($green, 2) !default; +$green-500: $green !default; +$green-600: shade-color($green, 2) !default; +$green-700: shade-color($green, 4) !default; +$green-800: shade-color($green, 6) !default; +$green-900: shade-color($green, 8) !default; + +$teal-100: tint-color($teal, 8) !default; +$teal-200: tint-color($teal, 6) !default; +$teal-300: tint-color($teal, 4) !default; +$teal-400: tint-color($teal, 2) !default; +$teal-500: $teal !default; +$teal-600: shade-color($teal, 2) !default; +$teal-700: shade-color($teal, 4) !default; +$teal-800: shade-color($teal, 6) !default; +$teal-900: shade-color($teal, 8) !default; + +$cyan-100: tint-color($cyan, 8) !default; +$cyan-200: tint-color($cyan, 6) !default; +$cyan-300: tint-color($cyan, 4) !default; +$cyan-400: tint-color($cyan, 2) !default; +$cyan-500: $cyan !default; +$cyan-600: shade-color($cyan, 2) !default; +$cyan-700: shade-color($cyan, 4) !default; +$cyan-800: shade-color($cyan, 6) !default; +$cyan-900: shade-color($cyan, 8) !default; +// fusv-enable + +// Characters which are escaped by the escape-svg function +$escaped-characters: (("<", "%3c"), + (">", "%3e"), + ("#", "%23"), + ("(", "%28"), + (")", "%29"), +) !default; + +// Options +// +// Quickly modify global styling by enabling or disabling optional features. + +$enable-caret : true !default; +$enable-rounded : true !default; +$enable-shadows : true !default; +$enable-gradients : false !default; +$enable-transitions : true !default; +$enable-reduced-motion : true !default; +$enable-grid-classes : true !default; +$enable-button-pointers : true !default; +$enable-rfs : true !default; +$enable-validation-icons : true !default; +$enable-negative-margins : true !default; +$enable-deprecation-messages: true !default; +$enable-important-utilities : true !default; + +// Gradient +// +// The gradient which is added to components if `$enable-gradients` is `true` +// This gradient is also added to elements with `.bg-gradient` +$gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0)) !default; + +// Spacing +// +// Control the default styling of most Bootstrap elements by modifying these +// variables. Mostly focused on spacing. +// You can add more entries to the $spacers map, should you need more variation. + +$spacer: 1rem !default; +$spacers: (0: 0, + 1: $spacer * 0.25, + 2: $spacer * 0.5, + 3: $spacer, + 4: $spacer * 1.5, + 5: $spacer * 3, + 6: ($spacer * 5), + 7: ($spacer * 8), + 8: ($spacer * 10), + 9: ($spacer * 11), + 10: ($spacer * 14), + 11: ($spacer * 16), + 12: ($spacer * 20), + 'sm': ($spacer * 1), + 'md': ($spacer * 2), + 'lg': ($spacer * 4), + 'xl': ($spacer * 8)) !default; + +$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default; + +// Body +// +// Settings for the `` element. + +$body-bg : $gray-100 !default; +$body-color : $gray-700 !default; +$body-text-align: null !default; + + +// Links +// +// Style anchor elements. + +$link-color : $primary !default; +$link-decoration : none !default; +$link-hover-color : darken($link-color, 50%) !default; +$link-hover-decoration : none !default; +// Darken percentage for links with `.text-*` class (e.g. `.text-success`) +$emphasized-link-hover-darken-percentage: 10% !default; + +$stretched-link-pseudo-element: after !default; +$stretched-link-z-index : 1 !default; + +// Paragraphs +// +// Style p element. + +$paragraph-margin-bottom: 1rem !default; + + +// Grid breakpoints +// +// Define the minimum dimensions at which your layout will change, +// adapting to different screen sizes, for use in media queries. + +// scss-docs-start grid-breakpoints +$grid-breakpoints: (xs: 0, + sm: 576px, + md: 768px, + lg: 992px, + xl: 1200px, + xxl: 1400px) !default; +// scss-docs-end grid-breakpoints + +// Grid containers +// +// Define the maximum width of `.container` for different screen sizes. + +// scss-docs-start container-max-widths +$container-max-widths: (sm: 540px, + md: 720px, + lg: 960px, + xl: 1140px) !default; +// scss-docs-end container-max-widths + +// Grid columns +// +// Set the number of columns and specify the width of the gutters. + +$grid-columns : 12 !default; +$grid-gutter-width: 1.5rem !default; +$grid-row-columns : 6 !default; + +$gutters: $spacers !default; + +// Container padding + +$container-padding-x: 1rem !default; + + +// Components +// +// Define common padding and border radius sizes and more. + +$border-width : .0625rem !default; +$border-width-md : 0.125rem !default; +$border-width-lg : 0.25rem !default; +$border-width-xl : 0.375rem !default; +$border-color-white: $white !default; +$border-color : $gray-200 !default; + + +$border-radius : .5rem !default; +$border-radius-sm : .35rem !default; +$border-radius-lg : 1rem !default; +$border-radius-xl : 3rem !default; +$border-radius-pill: 50rem !default; +$circle-radius : 50% !default; + +$component-active-color : $white !default; +$component-active-bg : $primary !default; +$component-active-border-color: $primary !default; + +$component-hover-color : $gray-300 !default; +$component-hover-bg : $gray-300 !default; +$component-hover-border-color: $gray-300 !default; + +$rounded-pill: 50rem !default; + +$box-shadow : 0 1px 3px 0 rgba(0, 0, 0, 0.1),0 1px 2px 0 rgba(0, 0, 0, 0.06) !default; +$box-shadow-sm : 0 2px 5px rgba(140, 152, 164, .2) !default; +$box-shadow-lg : 0 1rem 3rem rgba($black, .175) !default; +$box-shadow-inset: inset 0 1px 2px rgba($black, .0125) !default; + +$component-active-color: $white !default; +$component-active-bg : $primary !default; + +$caret-width : .3em !default; +$caret-vertical-align: $caret-width * .85 !default; +$caret-spacing : $caret-width * .85 !default; + +$transition-base : all .2s ease !default; +$transition-transform: transform .2s ease !default; +$transition-fade : opacity .15s linear !default; +$transition-collapse : height .35s ease !default; +$transition-tabs : all 0.2s !default; + +// scss-docs-start embed-responsive-aspect-ratios +$embed-responsive-aspect-ratios: ("21by9": (x: 21, + y: 9), + "16by9": (x: 16, + y: 9), + "4by3": (x: 4, + y: 3), + "1by1": (x: 1, + y: 1)) !default; +// scss-docs-end embed-responsive-aspect-ratios + +// Typography +// +// Font, line-height, and color for body text, headings, and more. + +// font awesome +$fontawesome-webfonts-path: '../vendor/font-awesome/webfonts' !default; +$font-awesome-5 : 'Font Awesome 5 Free' !default; + +// stylelint-disable value-keyword-case +$font-family-sans-serif: 'Inter', sans-serif !default; +// stylelint-enable value-keyword-case +$font-family-base: var(--bs-font-sans-serif) !default; +$font-family-code: var(--bs-font-monospace) !default; + +// $font-size-root effects the value of `rem`, which is used for as well font sizes, paddings and margins +// $font-size-base effects the font size of the body text +$font-size-root: null !default; +$font-size-base: 1rem !default; // Assumes the browser default, typically `16px` +$font-size-xs : ($font-size-base * .75) !default; +$font-size-sm : ($font-size-base * .875) !default; +$font-size-md : ($font-size-base * 1) !default; +$font-size-lg : ($font-size-base * 1.25) !default; +$font-size-xl : ($font-size-base * 1.5) !default; +$font-size-xxl : ($font-size-base * 2) !default; + +$font-weight-lighter: lighter !default; +$font-weight-light: 300 !default; +$font-weight-normal: 400 !default; +$font-weight-bold: 500 !default; +$font-weight-bolder: 600 !default; +$font-weight-extrabold: 700 !default; +$font-weight-black: 800 !default; + +$font-weight-base: $font-weight-normal !default; + +$line-height-base: 1.5 !default; +$line-height-sm : 1.25 !default; +$line-height-lg : 2 !default; + +$h1-font-size: $font-size-base * 2.5 !default; +$h2-font-size: $font-size-base * 2 !default; +$h3-font-size: $font-size-base * 1.75 !default; +$h4-font-size: $font-size-base * 1.5 !default; +$h5-font-size: $font-size-base * 1.25 !default; +$h6-font-size: $font-size-base !default; + +$headings-margin-bottom: $spacer * 0.5 !default; +$headings-font-family : null !default; +$headings-font-style : null !default; +$headings-font-weight : $font-weight-bold !default; +$headings-line-height : 1.3 !default; +$headings-color : $dark !default; + +// Display headings +$display1-size: 5rem !default; +$display2-size: 3.5rem !default; +$display3-size: 2.5rem !default; +$display4-size: 1.875rem !default; + +// scss-docs-start display-headings +$display-font-sizes: (1: 5rem, + 2: 3.5rem, + 3: 2.5rem, + 4: 1.875rem, + 5: 1.2rem, + 6: 1rem) !default; + +$display-font-weight: $font-weight-bold !default; +$display-line-height: $headings-line-height !default; +// scss-docs-end display-headings + +$paragraph-font-size : 1rem !default; +$paragraph-font-weight: 300 !default; +$paragraph-line-height: 1.6 !default; + +$lead-font-size : $font-size-base * 1.25 !default; +$lead-font-weight: 300 !default; + +$small-font-size: .875em !default; + +$sub-sup-font-size: .75em !default; + +$text-muted: #58677d !default; + +$initialism-font-size: $small-font-size !default; + +$blockquote-margin-y : $spacer !default; +$blockquote-font-size : $font-size-base * 1.25 !default; +$blockquote-footer-color : $gray-600 !default; +$blockquote-footer-font-size: $small-font-size !default; + +$hr-margin-y: $spacer !default; +$hr-color : inherit !default; +$hr-height : $border-width !default; +$hr-opacity : .25 !default; + +$legend-margin-bottom: .5rem !default; +$legend-font-size : 1.5rem !default; +$legend-font-weight : null !default; + +$mark-padding: .2em !default; + +$dt-font-weight: $font-weight-bold !default; + +$nested-kbd-font-weight: $font-weight-bold !default; + +$list-inline-padding: .5rem !default; + +$mark-bg: #fcf8e3 !default; + + +// Tables +// +// Customizes the `.table` component with basic values, each used across all table variations. + +// scss-docs-start table-variables +$table-cell-padding-y : .75rem !default; +$table-cell-padding-x : .5rem !default; +$table-cell-padding-y-sm: .25rem !default; +$table-cell-padding-x-sm: .25rem !default; + +$table-cell-vertical-align: top !default; + +$table-color: $body-color !default; +$table-bg : transparent !default; + +$table-striped-color : $table-color !default; +$table-striped-bg-factor: .05 !default; +$table-striped-bg : rgba($black, $table-striped-bg-factor) !default; + +$table-active-color : $table-color !default; +$table-active-bg-factor: .1 !default; +$table-active-bg : rgba($black, $table-active-bg-factor) !default; + +$table-hover-color : $table-color !default; +$table-hover-bg-factor: .075 !default; +$table-hover-bg : rgba($black, $table-hover-bg-factor) !default; + +$table-border-factor: .1 !default; +$table-border-width : $border-width !default; +$table-border-color : $border-color !default; + +$table-striped-order: odd !default; + +$table-group-seperator-color: $light !default; + +$table-caption-color: $text-muted !default; + +$table-bg-scale: -80% !default; + +$table-head-spacer-y : .75rem !default; +$table-head-spacer-x : 1rem !default; +$table-head-font-size : .75rem !default; +$table-head-text-transform: uppercase !default; +$table-body-font-size : $font-size-sm !default; + +$table-variants: ("primary": shift-color($primary, $table-bg-scale), + "secondary": shift-color($secondary, $table-bg-scale), + "success": shift-color($success, $table-bg-scale), + "info": shift-color($info, $table-bg-scale), + "warning": shift-color($warning, $table-bg-scale), + "danger": shift-color($danger, $table-bg-scale), + "light": $light, + "dark": $dark, +) !default; + +// Accordion +$accordion-padding-y : 1rem !default; +$accordion-padding-x : 1.25rem !default; +$accordion-color : $body-color !default; +$accordion-bg : transparent !default; +$accordion-border-width : $border-width !default; +$accordion-border-color : $gray-400 !default; +$accordion-border-radius: $border-radius !default; + +$accordion-body-padding-y: $accordion-padding-y !default; +$accordion-body-padding-x: $accordion-padding-x !default; + +$accordion-button-padding-y : $accordion-padding-y !default; +$accordion-button-padding-x : $accordion-padding-x !default; +$accordion-button-color : $accordion-color !default; +$accordion-button-bg : $accordion-bg !default; +$accordion-button-active-bg : $light !default; +$accordion-button-active-color: shade-color($primary, 10%) !default; + + +$accordion-icon-width : 1.25rem !default !default; +$accordion-icon-color : $accordion-color !default !default; +$accordion-icon-active-color: $accordion-button-active-color !default !default; +$accordion-icon-transition : transform .2s ease-in-out !default !default; +$accordion-icon-transform : rotate(180deg) !default !default; + +$accordion-button-icon : url("data:image/svg+xml,") !default !default; +$accordion-button-active-icon: url("data:image/svg+xml,") !default !default; + +// Buttons + Forms +// +// Shared variables that are reassigned to `$input-` and `$btn-` specific variables. + +$input-btn-padding-y : .5rem !default; +$input-btn-padding-x : 1rem !default; +$input-btn-font-family: null !default; +$input-btn-font-size : $font-size-sm !default; +$input-btn-line-height: $line-height-base !default; + +$input-btn-focus-width : .18rem !default; +$input-btn-focus-color-opacity: .25 !default; +$input-btn-focus-color : rgba($component-active-bg, $input-btn-focus-color-opacity) !default; +$input-btn-focus-box-shadow : 0 0 0 $input-btn-focus-width $input-btn-focus-color !default; + +$input-btn-padding-y-sm: .375rem !default; +$input-btn-padding-x-sm: .625rem !default; +$input-btn-font-size-sm: $font-size-sm !default; + +$input-btn-padding-y-lg: .5rem !default; +$input-btn-padding-x-lg: 1rem !default; +$input-btn-font-size-lg: $font-size-lg !default; + +$input-btn-border-width: $border-width !default; + +$shadow-input : $box-shadow !default; +$shadow-input-focus: .1rem .1rem 0 rgba($gray-200, .5) !default; + + +// Buttons +// +// For each of Bootstrap's buttons, define text, background, and border color. + +$btn-padding-y : $input-btn-padding-y !default; +$btn-padding-x : $input-btn-padding-x !default; +$btn-font-family: $input-btn-font-family !default; +$btn-font-size : $input-btn-font-size !default; +$btn-line-height: $input-btn-line-height !default; +$btn-white-space: null !default; // Set to `nowrap` to prevent text wrapping + +$btn-padding-y-sm: $input-btn-padding-y-sm !default; +$btn-padding-x-sm: $input-btn-padding-x-sm !default; +$btn-font-size-sm: $input-btn-font-size-sm !default; + +$btn-padding-y-lg: $input-btn-padding-y-lg !default; +$btn-padding-x-lg: $input-btn-padding-x-lg !default; +$btn-font-size-lg: $input-btn-font-size-lg !default; + +$btn-border-width: $input-btn-border-width !default; + +$btn-font-weight: $font-weight-bold !default; +$btn-box-shadow : inset 0 1px 0 rgba($white, .15), +0 1px 1px rgba($black, .075) !default; +$btn-focus-width : $input-btn-focus-width !default; +$btn-focus-box-shadow : $input-btn-focus-box-shadow !default; +$btn-disabled-opacity : .65 !default; +$btn-active-box-shadow: inset 0 3px 5px rgba($black, .125) !default; + +$btn-link-color : $link-color !default; +$btn-link-hover-color : $link-hover-color !default; +$btn-link-disabled-color: $gray-600 !default; + +$btn-block-spacing-y: .5rem !default; + +// Allows for customizing button radius independently from global border radius +$btn-border-radius : $border-radius !default; +$btn-border-radius-sm: $border-radius !default; +$btn-border-radius-lg: $border-radius !default; + +$btn-transition: color .15s ease-in-out, +background-color .15s ease-in-out, +border-color .15s ease-in-out, +box-shadow .15s ease-in-out !default; + + +$btn-close-width: 1em !default; +$btn-close-height: $btn-close-width !default; +$btn-close-padding-x: .25em !default; +$btn-close-padding-y: $btn-close-padding-x !default; +$btn-close-color: $black !default; +$btn-close-bg: url("data:image/svg+xml,") !default; +$btn-close-color-white: $white !default; +$btn-close-bg-white: url("data:image/svg+xml,") !default; +$btn-close-focus-shadow: $input-btn-focus-box-shadow !default; +$btn-close-opacity: .5 !default; +$btn-close-hover-opacity: .75 !default; +$btn-close-focus-opacity: 1 !default; +$btn-close-disabled-opacity: .25 !default; +$btn-close-white-filter: invert(1) grayscale(100%) brightness(200%) !default; + +// Forms + +$form-text-margin-top : .25rem !default; +$form-text-font-size : $small-font-size !default; +$form-text-font-style : null !default; +$form-text-font-weight: null !default; +$form-text-color : $text-muted !default; + +$form-label-margin-bottom: .5rem !default; +$form-label-font-size : null !default; +$form-label-font-style : null !default; +$form-label-font-weight : null !default; +$form-label-color : null !default; + +$input-padding-y : $input-btn-padding-y !default; +$input-padding-x : $input-btn-padding-x !default; +$inpu-lg-padding-y: 1rem !default; +$input-font-family: $input-btn-font-family !default; +$input-font-size : $input-btn-font-size !default; +$input-font-weight: $font-weight-base !default; +$input-line-height: $input-btn-line-height !default; + +$input-padding-y-sm: $input-btn-padding-y-sm !default; +$input-padding-x-sm: $input-btn-padding-x-sm !default; +$input-font-size-sm: $input-btn-font-size-sm !default; + +$input-padding-y-lg: $input-btn-padding-y-lg !default; +$input-padding-x-lg: $input-btn-padding-x-lg !default; +$input-font-size-lg: $input-btn-font-size-lg !default; + +$input-bg : $white !default; +$input-disabled-bg : $gray-200 !default; +$input-disabled-border-color: null !default; + +$input-color : $gray-500 !default; +$input-border-color: $gray-300 !default; +$input-border-width: $input-btn-border-width !default; +$input-box-shadow : 0 1px 2px 0 rgba(0, 0, 0, 0.07) !default; + +$input-border-radius : $border-radius !default; +$input-border-radius-sm: $border-radius !default; +$input-border-radius-lg: $border-radius !default; + +$input-focus-bg : $input-bg !default; +$input-focus-border-color: lighten($component-active-bg, 25%) !default; +$input-focus-color : $input-color !default; +$input-focus-width : $input-btn-focus-width !default; +$input-focus-box-shadow : $input-btn-focus-box-shadow !default; + +$input-placeholder-color: $gray-600 !default; +$input-plaintext-color : $body-color !default; + +$input-height-border: $input-border-width * 2 !default; + +$input-height-inner : add($input-line-height * 1em, $input-padding-y * 2) !default; +$input-height-inner-half : add($input-line-height * .5em, $input-padding-y) !default; +$input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y * 0.5) !default; + +$input-height : add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default; +$input-height-sm: add($input-line-height * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default; +$input-height-lg: add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default; +$input-height-xl: calc(#{$input-line-height * 1.5em} + #{$input-btn-padding-y-lg * 2} + #{$input-height-border}) !default; + +$input-transition: border-color .15s ease-in-out, +box-shadow .15s ease-in-out !default; + +// Custom forms + +$custom-control-gutter : 1.75rem !default; +$custom-control-spacer-x : 1rem !default; +$custom-control-line-height : 1 !default; +$custom-control-indicator-size: 1.25rem !default; + +$custom-control-bg : $gray-400 !default; +$custom-control-indicator-bg: $white !default; +$custom-control-border-width: $border-width !default; +$custom-control-border-color: $input-border-color !default; +$custom-control-box-shadow : none !default; + + + +$custom-control-indicator-hover-color : $component-hover-color !default; +$custom-control-indicator-hover-bg : $primary !default; +$custom-control-indicator-hover-border-color: $component-hover-border-color !default; + +$custom-control-indicator-active-color : $component-active-color !default; +$custom-control-indicator-active-border-color: $component-active-border-color !default; + + +$custom-control-indicator-checked-color : $component-active-color !default; +$custom-control-indicator-checked-bg : $primary !default; +$custom-control-indicator-checked-border-color: $primary !default; +$custom-control-indicator-checked-disabled-bg : rgba($primary, .7) !default; +$custom-control-indicator-border-width : 1px !default; + +$custom-control-indicator-disabled-bg: $gray-200 !default; +$custom-control-label-disabled-color : $gray-800 !default; + +$custom-checkbox-bg : $gray-400 !default; +$custom-checkbox-checked-bg : $primary !default; +$custom-checkbox-disabled-checked-bg : rgba($primary, .7) !default; +$custom-checkbox-indicator-border-radius: $border-radius-xl !default; +$custom-checkbox-indicator-border-width : $border-width-md !default; +$custom-checkbox-indicator-icon-checked : $font-awesome-5 !default; +$square-checkbox-indicator-border-radius: 3px !default; + +$custom-toggle-slider-bg : $gray-400 !default; +$custom-toggle-slider-indicator-bg: $white !default; +$custom-toggle-checked-bg : $primary !default; +$custom-toggle-disabled-bg : $gray-200 !default; +$custom-toggle-disabled-checked-bg: rgba($primary, .7) !default; +$custom-toggle-border-radius : .8rem !default; + +$custom-switch-indicator-size: calc(#{$custom-control-indicator-size} - #{$custom-control-indicator-border-width * 4}) !default; + +$custom-checkbox-disabled-checked-color: $gray-800 !default; + + +$form-check-input-width : 1.125em !default; +$form-check-min-height : $font-size-base * $line-height-base !default; +$form-check-padding-left : $form-check-input-width+.5em !default; +$form-check-margin-bottom: .125rem !default; +$form-check-label-color : null !default; +$form-check-label-cursor : null !default; +$form-check-transition : background-color .2s ease-in-out, +background-position .2s ease-in-out, +border-color .2s ease-in-out, +box-shadow .2s ease-in-out !default; + +$form-check-input-active-filter: brightness(90%) !default; + +$form-check-input-bg : $body-bg !default; +$form-check-input-border : 1px solid $input-border-color !default; +$form-check-input-border-radius : .25em !default; +$form-check-radio-border-radius : 50% !default; +$form-check-input-focus-border : $input-focus-border-color !default; +$form-check-input-focus-box-shadow: $input-btn-focus-box-shadow !default; + +$form-check-input-checked-color : $component-active-color !default; +$form-check-input-checked-bg-color : $component-active-bg !default; +$form-check-input-checked-border-color: $form-check-input-checked-bg-color !default; +$form-check-input-checked-bg-image : url("data:image/svg+xml,") !default; +$form-check-radio-checked-bg-image : url("data:image/svg+xml,") !default; + +$form-check-input-indeterminate-color : $component-active-color !default; +$form-check-input-indeterminate-bg-color : $component-active-bg !default; +$form-check-input-indeterminate-border-color: $form-check-input-indeterminate-bg-color !default; +$form-check-input-indeterminate-bg-image : url("data:image/svg+xml,") !default; + +$form-switch-color : $gray-600 !default; +$form-switch-width : 2.25em !default; +$form-switch-padding-left : $form-switch-width+.5em !default; +$form-switch-bg-image : url("data:image/svg+xml,") !default; +$form-switch-border-radius: $form-switch-width !default; + +$form-switch-focus-color : $input-focus-border-color !default; +$form-switch-focus-bg-image: url("data:image/svg+xml,") !default; + +$form-switch-checked-color : $component-active-color !default; +$form-switch-checked-bg-image : url("data:image/svg+xml,") !default; +$form-switch-checked-bg-position: right center !default; + +$form-check-inline-margin-right: 1rem !default; + +$input-group-addon-color : $input-color !default; +$input-group-addon-border-color: $input-border-color !default; + +// Input groups + +// scss-docs-start input-group-variables +$input-group-addon-padding-y: .5rem !default; +$input-group-addon-padding-x: .625rem !default; +$input-group-addon-font-weight: $input-font-weight !default; +$input-group-addon-color: $gray-400 !default; +$input-group-addon-bg: $white !default; +$input-group-addon-border-color: $input-border-color !default; +// scss-docs-end input-group-variables + +$form-select-padding-y : $input-padding-y !default; +$form-select-padding-x : $input-padding-x !default; +$form-select-font-family : $input-font-family !default; +$form-select-font-size : $input-font-size !default; +$form-select-height : $input-height !default; +$form-select-indicator-padding : 1rem !default; // Extra padding to account for the presence of the background-image based indicator +$form-select-font-weight : $input-font-weight !default; +$form-select-line-height : $input-line-height !default; +$form-select-color : $input-color !default; +$form-select-disabled-color : $gray-600 !default; +$form-select-bg : $input-bg !default; +$form-select-disabled-bg : $gray-200 !default; +$form-select-disabled-border-color: $input-disabled-border-color !default; +$form-select-bg-position : right $form-select-padding-x center !default; +$form-select-bg-size : 16px 12px !default; // In pixels because image dimensions +$form-select-indicator-color : $gray-800 !default; +$form-select-indicator : url("data:image/svg+xml,") !default; + +$form-select-feedback-icon-padding-right: add(1em * .75, (2 * $form-select-padding-y * .75) + $form-select-padding-x + $form-select-indicator-padding) !default; +$form-select-feedback-icon-position : center right ($form-select-padding-x + $form-select-indicator-padding) !default; +$form-select-feedback-icon-size : $input-height-inner-half $input-height-inner-half !default; + +$form-select-border-width : $input-border-width !default; +$form-select-border-color : $input-border-color !default; +$form-select-border-radius: $border-radius !default; +$form-select-box-shadow : $box-shadow-inset !default; + +$form-select-focus-border-color: $input-focus-border-color !default; +$form-select-focus-width : $input-focus-width !default; +$form-select-focus-box-shadow : 0 0 0 $form-select-focus-width $input-btn-focus-color !default; + +$form-select-padding-y-sm: $input-padding-y-sm !default; +$form-select-padding-x-sm: $input-padding-x-sm !default; +$form-select-font-size-sm: $input-font-size-sm !default; +$form-select-height-sm : $input-height-sm !default; + +$form-select-padding-y-lg: $input-padding-y-lg !default; +$form-select-padding-x-lg: $input-padding-x-lg !default; +$form-select-font-size-lg: $input-font-size-lg !default; +$form-select-height-lg : $input-height-lg !default; + +$form-range-track-width : 100% !default; +$form-range-track-height : .5rem !default; +$form-range-track-cursor : pointer !default; +$form-range-track-bg : $gray-300 !default; +$form-range-track-border-radius: 1rem !default; +$form-range-track-box-shadow : $box-shadow-inset !default; + +$form-range-thumb-width : 1rem !default; +$form-range-thumb-height : $form-range-thumb-width !default; +$form-range-thumb-bg : $component-active-bg !default; +$form-range-thumb-border : 0 !default; +$form-range-thumb-border-radius: 1rem !default; +$form-range-thumb-box-shadow : 0 .1rem .25rem rgba($black, .1) !default; +$form-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, +$input-focus-box-shadow !default; +$form-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For focus box shadow issue in Edge +$form-range-thumb-active-bg : lighten($component-active-bg, 35%) !default; +$form-range-thumb-disabled-bg : $gray-500 !default; +$form-range-thumb-transition : background-color .15s ease-in-out, +border-color .15s ease-in-out, +box-shadow .15s ease-in-out !default; + +$form-file-height : $input-height !default; +$form-file-focus-border-color : $input-focus-border-color !default; +$form-file-focus-box-shadow : $input-focus-box-shadow !default; +$form-file-disabled-bg : $input-disabled-bg !default; +$form-file-disabled-border-color: $input-disabled-border-color !default; + +$form-file-padding-y : $input-padding-y !default; +$form-file-padding-x : $input-padding-x !default; +$form-file-line-height : $input-line-height !default; +$form-file-font-family : $input-font-family !default; +$form-file-font-weight : $input-font-weight !default; +$form-file-color : $input-color !default; +$form-file-bg : $input-bg !default; +$form-file-border-width : $input-border-width !default; +$form-file-border-color : $input-border-color !default; +$form-file-border-radius: $input-border-radius !default; +$form-file-box-shadow : $input-box-shadow !default; +$form-file-button-color : $form-file-color !default; +$form-file-button-bg : $input-group-addon-bg !default; + +$form-file-padding-y-sm: $input-padding-y-sm !default; +$form-file-padding-x-sm: $input-padding-x-sm !default; +$form-file-font-size-sm: $input-font-size-sm !default; +$form-file-height-sm : $input-height-sm !default; + +$form-file-padding-y-lg: $input-padding-y-lg !default; +$form-file-padding-x-lg: $input-padding-x-lg !default; +$form-file-font-size-lg: $input-font-size-lg !default; +$form-file-height-lg : $input-height-lg !default; + +$input-muted-bg : $gray-100 !default; +$input-placeholder-color : $gray-800 !default; +$input-focus-placeholder-color: $gray-800 !default; + +// Form validation + +$form-feedback-margin-top : $form-text-margin-top !default; +$form-feedback-font-size : $form-text-font-size !default; +$form-feedback-font-style : $form-text-font-style !default; +$form-feedback-valid-color : $success !default; +$form-feedback-invalid-color: $danger !default; + +$form-feedback-icon-valid-color : $form-feedback-valid-color !default; +$form-feedback-icon-valid : url("data:image/svg+xml,") !default; +$form-feedback-icon-invalid-color: $form-feedback-invalid-color !default; +$form-feedback-icon-invalid : url("data:image/svg+xml,") !default; + +// scss-docs-start form-validation-states +$form-validation-states: ("valid": ("color": $form-feedback-valid-color, + "icon": $form-feedback-icon-valid), + "invalid": ("color": $form-feedback-invalid-color, + "icon": $form-feedback-icon-invalid)) !default; +// scss-docs-end form-validation-states + +// Z-index master list +// +// Warning: Avoid customizing these values. They're used for a bird's eye view +// of components dependent on the z-axis and are designed to all work together. + +// scss-docs-start zindex-stack +$zindex-dropdown : 1000 !default; +$zindex-sticky : 1020 !default; +$zindex-fixed : 1030 !default; +$zindex-modal-backdrop: 1040 !default; +$zindex-modal : 1050 !default; +$zindex-popover : 1060 !default; +$zindex-tooltip : 1070 !default; +// scss-docs-end zindex-stack + +// No UI Slider + +$noui-target-bg : $gray-400 !default; +$noui-target-thickness : 5px !default; +$noui-target-border-radius : 5px !default; +$noui-target-border-color : 0 !default; +$noui-target-box-shadow : inset $box-shadow-sm !default; +$noui-box-shadow : $box-shadow-sm !default; +$noui-slider-connect-bg : $primary !default; +$noui-slider-connect-disabled-bg: $gray-200 !default; +$noui-handle-active-shadow : 0 0 0 0.2rem rgba(69, 77, 103, 0.5) !default; +$noui-handle-width : 15px !default; +$noui-handle-bg : $primary !default; +$noui-handle-border : 0 !default; +$noui-handle-border-radius : $border-radius !default; +$noui-origin-border-radius : $circle-radius !default; + + +// Navs + +$nav-link-padding-y : .5rem !default; +$nav-link-padding-x : 1rem !default; +$nav-link-color : $gray-800 !default; +$nav-link-hover-color : $dark !default; +$nav-link-active-color: $gray-800 !default; +$nav-link-shadow : none !default; +$nav-link-transition : color .15s ease-in-out, +background-color .15s ease-in-out, +border-color .15s ease-in-out !default; +$nav-link-disabled-color: $gray-600 !default; + +$nav-tabs-border-color : $light !default; +$nav-tabs-border-width : $border-width !default; +$nav-tabs-border-radius : $border-radius !default; +$nav-tabs-link-hover-border-color : $gray-200 $gray-200 $nav-tabs-border-color !default; +$nav-tabs-link-active-color : $gray-700 !default; +$nav-tabs-link-active-bg : $light !default; +$nav-tabs-link-active-border-color: $light !default; + +$nav-pills-padding-y: .75rem !default; +$nav-pills-padding-x: .85rem !default; + +$nav-pills-space-x : 1rem !default; +$nav-pills-border-circle: 50% !default; + +$nav-pills-bg : $white !default; +$nav-pills-border-width : 1px !default; +$nav-pills-border-color : $light !default; +$nav-pills-border-radius: $border-radius !default; + +$nav-pills-link-hover-color : $primary !default; +$nav-pills-link-active-color : $primary !default; +$nav-pills-active-border-color: $gray-300 !default; +$nav-pills-link-active-bg : #f8f8f8 !default; + +// Owl navs + +$owl-nav-color : $gray-600 !default; +$owl-nav-color-hover : $gray-900 !default; +$owl-nav-font-size : $font-size-xxl !default; +$owl-nav-rounded : 3px !default; +$owl-nav-margin : 5px !default; +$owl-nav-padding : 4px 7px !default; +$owl-nav-background : $gray-400 !default; +$owl-nav-background-hover: $gray-800 !default; +$owl-nav-disabled-opacity: 0.5 !default; + +// Owl dots + +$owl-dot-width : 10px !default; +$owl-dot-height : 10px !default; +$owl-dot-rounded : $circle-radius !default; +$owl-dot-margin : 5px 5px !default; +$owl-dot-border-width : 2px !default; +$owl-dot-background : $gray-400 !default; +$owl-dot-background-active: $gray-800 !default; + + +// Navbar + +$navbar-padding-y: 1rem !default; +$navbar-padding-x: null !default; + +$navbar-nav-link-padding-x: .8rem !default; + +$navbar-brand-font-size : $font-size-lg !default; +// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link +$nav-link-height : $font-size-base * $line-height-base+$nav-link-padding-y * 4 !default; +$navbar-brand-height : $navbar-brand-font-size * $line-height-base !default; +$navbar-brand-padding-y : 0 !default; +$navbar-brand-margin-right: 1rem !default; + +$navbar-toggler-padding-y : .4rem !default; +$navbar-toggler-padding-x : .6rem !default; +$navbar-toggler-font-size : $font-size-lg !default; +$navbar-toggler-border-radius: $btn-border-radius !default; +$navbar-toggler-focus-width : $btn-focus-width !default; +$navbar-toggler-transition : box-shadow .15s ease-in-out !default; + +$navbar-dark-color : rgba($white, 0.9) !default; +$navbar-dark-hover-color : rgba($white, 1) !default; +$navbar-dark-active-color : $white !default; +$navbar-dark-disabled-color : rgba($white, .9) !default; +$navbar-dark-toggler-icon-bg : url("data:image/svg+xml,") !default; +$navbar-dark-toggler-border-color: rgba($white, .1) !default; + +$navbar-light-color : rgba($black, .9) !default; +$navbar-light-hover-color : rgba($black, 1) !default; +$navbar-light-active-color : rgba($black, 1) !default; +$navbar-light-disabled-color : rgba($black, .9) !default; +$navbar-light-toggler-icon-bg : url("data:image/svg+xml,") !default; +$navbar-light-toggler-border-color: rgba($black, .1) !default; + +$navbar-light-brand-color : $navbar-light-active-color !default; +$navbar-light-brand-hover-color: $navbar-light-active-color !default; +$navbar-dark-brand-color : $navbar-dark-active-color !default; +$navbar-dark-brand-hover-color : $navbar-dark-active-color !default; + + +// Dropdowns +// +// Dropdown menu container and contents. + +$dropdown-min-width : 12rem !default; +$dropdown-padding-y : .5rem !default; +$dropdown-spacer : .125rem !default; +$dropdown-font-size : .875rem !default; +$dropdown-item-font-weight: $font-weight-normal !default; +$dropdown-item-hover-color: $gray-900 !default; + +$dropdown-color : $body-color !default; +$dropdown-bg : $white !default; +$dropdown-border-color : $border-color !default; +$dropdown-border-radius : $border-radius-sm !default; +$dropdown-border-width : $border-width !default; +$dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width) !default; +$dropdown-divider-bg : $gray-200 !default; +$dropdown-divider-margin-y : $spacer * 0.5 !default; +$dropdown-box-shadow : 0 10px 15px -3px rgba(0, 0, 0, 0.1),0 4px 6px -2px rgba(0, 0, 0, 0.05) !default; + +$dropdown-link-color : $gray-900 !default; +$dropdown-link-hover-color: darken($gray-900, 5%) !default; +$dropdown-link-hover-bg : $gray-100 !default; + +$dropdown-link-active-color: $gray-900 !default; +$dropdown-link-active-bg : $gray-200 !default; + +$dropdown-link-disabled-color: $gray-600 !default; + +$dropdown-item-padding-y: $spacer * 0.25 !default; +$dropdown-item-padding-x: $spacer !default; + +$dropdown-header-color : $gray-900 !default; +$dropdown-header-font-weight: $font-weight-bold !default; +$dropdown-header-padding : $dropdown-padding-y $dropdown-item-padding-x !default; + + +// Pagination + +$pagination-padding-y : .375rem !default; +$pagination-padding-x : .75rem !default; +$pagination-padding-y-sm: .25rem !default; +$pagination-padding-x-sm: .5rem !default; +$pagination-padding-y-lg: .75rem !default; +$pagination-padding-x-lg: 1.5rem !default; + +$pagination-color : $link-color !default; +$pagination-bg : $white !default; +$pagination-border-width : $border-width !default; +$pagination-border-radius: $border-radius !default; +$pagination-margin-left : -$pagination-border-width !default; +$pagination-border-color : $light !default; + +$pagination-focus-box-shadow: $input-btn-focus-box-shadow !default; +$pagination-focus-outline : 0 !default; + +$pagination-hover-color : $link-hover-color !default; +$pagination-hover-bg : $gray-200 !default; +$pagination-hover-border-color: $gray-300 !default; + +$pagination-active-color : $component-active-color !default; +$pagination-active-bg : $component-active-bg !default; +$pagination-active-border-color: $pagination-active-bg !default; + +$pagination-disabled-color : $gray-600 !default; +$pagination-disabled-bg : $white !default; +$pagination-disabled-border-color: $gray-300 !default; + + +// Cards + +$card-spacer-y : 1.25rem !default; +$card-spacer-x : 1.5rem !default; +$card-social-padding : .25rem .375rem !default; +$card-title-spacer-y : .875rem !default; +$card-border-width : $border-width !default; +$card-border-radius : $border-radius !default; +$card-border-color : rgba($black, .125) !default; +$card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default; +$card-cap-padding-y : 1.25rem !default; +$card-cap-padding-x : $card-spacer-x !default; +$card-cap-bg : rgba($black, .03) !default; +$card-cap-color : null !default; +$card-height : null !default; +$card-color : null !default; +$card-bg : $white !default; + +$card-img-overlay-padding: $spacer !default; + +$card-group-margin : $grid-gutter-width * 0.5 !default; +$transition-bezier-card: cubic-bezier(0.34, 1.45, 0.7, 1) !default; + +//Timelines +$timeline-font-size : $font-size-xxl !default; +$timeline-font-color : $body-color !default; +$timeline-border-color : $light !default; +$timeline-border-color-dark: $gray-500 !default; +$timeline-background-color : $white !default; +$timeline-line-height : 3 !default; +$timeline-border-width : $border-width !default; +$timeline-circle-radius : 50% !default; +$timeline-spacer-y : 1.25rem !default; +$timeline-spacer-x : 2.75rem !default; + +// Icons & Shapes sizes + +$icon-size-xxs: 1rem !default; +$icon-size-xs: 1.25rem !default; +$icon-size-sm: 1.5rem !default; +$icon-size: 2rem !default; +$icon-size-lg: 3.5rem !default; +$icon-size-xl: 4.5rem !default; +$icon-size-xxl: 6rem !default; + +$icon-shape-xxs: 1.5rem !default; +$icon-shape-xs: 2.5rem !default; +$icon-shape-sm: 3.275rem !default; +$icon-shape: 4rem !default; +$icon-shape-lg: 5rem !default; +$icon-shape-xl: 6rem !default; +$icon-shape-xxl: 7.5rem !default; + + +// Steps +$step-number-size : 12rem !default; +$step-shape-size : 7rem !default; +$step-border-width: $border-width-md !default; +$step-icon-size : $icon-size-xl !default; + +// Tooltips + +$tooltip-font-size : $font-size-sm !default; +$tooltip-max-width : 200px !default; +$tooltip-color : $white !default; +$tooltip-bg : $dark !default; +$tooltip-border-radius: $border-radius !default; +$tooltip-opacity : .99 !default; +$tooltip-padding-y : .5rem !default; +$tooltip-padding-x : .55rem !default; +$tooltip-margin : 2rem !default; + +$tooltip-arrow-width : .8rem !default; +$tooltip-arrow-height: .4rem !default; +$tooltip-arrow-color : $tooltip-bg !default; + +// Form tooltips must come after regular tooltips +$form-feedback-tooltip-padding-y : $tooltip-padding-y !default; +$form-feedback-tooltip-padding-x : $tooltip-padding-x !default; +$form-feedback-tooltip-font-size : $tooltip-font-size !default; +$form-feedback-tooltip-line-height : null !default; +$form-feedback-tooltip-opacity : $tooltip-opacity !default; +$form-feedback-tooltip-border-radius: $tooltip-border-radius !default; + + +// Popovers + +$popover-font-size : $font-size-sm !default; +$popover-bg : $dark !default; +$popover-max-width : 276px !default; +$popover-border-width : $border-width !default; +$popover-border-color : rgba($black, .2) !default; +$popover-border-radius : $border-radius-lg !default; +$popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width) !default; +$popover-box-shadow : $box-shadow !default; + +$popover-header-bg : darken($popover-bg, 3%) !default; +$popover-header-color : $headings-color !default; +$popover-header-padding-y: .5rem !default; +$popover-header-padding-x: $spacer !default; + +$popover-body-color : $white !default; +$popover-body-padding-y: $spacer !default; +$popover-body-padding-x: $spacer !default; + +$popover-arrow-width : 1rem !default; +$popover-arrow-height: .5rem !default; +$popover-arrow-color : $popover-bg !default; + +$popover-arrow-outer-color: fade-in($popover-border-color, .05) !default; + + +// Toasts + +$toast-max-width : 350px !default; +$toast-padding-x : .75rem !default; +$toast-padding-y : .25rem !default; +$toast-font-size : .875rem !default; +$toast-color : null !default; +$toast-background-color: rgba($white, .85) !default; +$toast-border-width : 1px !default; +$toast-border-color : rgba(0, 0, 0, .1) !default; +$toast-border-radius : $border-radius !default; +$toast-box-shadow : $box-shadow !default; + +$toast-header-color : $gray-600 !default; +$toast-header-background-color: rgba($white, .85) !default; +$toast-header-border-color : rgba(0, 0, 0, .05) !default; + + +// Badges + +$badge-font-size : .75em !default; +$badge-font-weight : $font-weight-bolder !default; +$badge-padding-y : .2rem !default; +$badge-padding-x : .4rem !default; +$badge-color : $white !default; +$badge-border-radius: $border-radius !default; + +$badge-pill-padding-x : .875em !default; +$badge-pill-border-radius: 10rem !default; + +$badge-circle-size: 2rem !default; + + +// Modals + +// Padding applied to the modal body +$modal-inner-padding: $spacer !default; + +// Margin between elements in footer, must be lower than or equal to 2 * $modal-inner-padding +$modal-footer-margin-between: .5rem !default; + +$modal-dialog-margin : .5rem !default; +$modal-dialog-margin-y-sm-up: 1.75rem !default; + +$modal-title-line-height: $line-height-base !default; + +$modal-content-color : null !default; +$modal-content-bg : $white !default; +$modal-content-border-color : rgba($black, .2) !default; +$modal-content-border-width : $border-width !default; +$modal-content-border-radius : $border-radius !default; +$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default; +$modal-content-box-shadow-xs : $box-shadow-sm !default; +$modal-content-box-shadow-sm-up : $box-shadow !default; + +$modal-backdrop-bg : $black !default; +$modal-backdrop-opacity : .5 !default; +$modal-header-border-color: $border-color !default; +$modal-footer-border-color: $modal-header-border-color !default; +$modal-header-border-width: $modal-content-border-width !default; +$modal-footer-border-width: $modal-header-border-width !default; +$modal-header-padding-y : $modal-inner-padding !default; +$modal-header-padding-x : $modal-inner-padding !default; +$modal-header-padding : $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility + +$modal-sm: 300px !default; +$modal-md: 500px !default; +$modal-lg: 800px !default; +$modal-xl: 1140px !default; + +$modal-fade-transform : translate(0, -50px) !default; +$modal-show-transform : none !default; +$modal-transition : transform .3s ease-out !default; +$modal-scale-transform: scale(1.02) !default; + + +// Alerts +// +// Define alert colors, border radius, and padding. + +$alert-padding-y : $spacer !default; +$alert-padding-x : $spacer !default; +$alert-margin-bottom : 1rem !default; +$alert-border-radius : $border-radius !default; +$alert-link-font-weight: $font-weight-bold !default; +$alert-border-width : $border-width !default; +$alert-icon-font-size : 2rem !default; +$alert-link-color : $white !default; + +$alert-bg-level : -10 !default !default; +$alert-border-level: -9 !default !default; +$alert-color-level : 10 !default !default; + + +// Progress bars + +$progress-height : 1rem !default; +$progress-font-size : $font-size-base * .75 !default; +$progress-bg : $gray-200 !default; +$progress-border-radius : $border-radius !default; +$progress-box-shadow : $box-shadow-inset !default; +$progress-bar-color : $white !default; +$progress-bar-bg : $dark !default; +$progress-bar-animation-timing: 1s linear infinite !default; +$progress-bar-transition : width .6s ease !default; + +$progress-xl-size: .8rem !default; +$progress-lg-size: .6rem !default; +$progress-sm-size: .2rem !default; + + +// List group + +$list-group-color : null !default; +$list-group-bg : $white !default; +$list-group-border-color : rgba($black, .125) !default; +$list-group-border-width : $border-width !default; +$list-group-border-radius: $border-radius !default; + +$list-group-sm-item-padding-y: .625rem !default; +$list-group-sm-item-padding-x: .875rem !default; + +$list-group-item-padding-y : $spacer * 0.5 !default; +$list-group-item-padding-x : $spacer !default; +$list-group-item-bg-level : -9 !default; +$list-group-item-color-level : 6 !default; +$list-group-item-border-radius: $border-radius !default; + +$list-group-hover-bg : $gray-100 !default; +$list-group-active-color : $component-active-color !default; +$list-group-active-bg : $component-active-bg !default; +$list-group-active-border-color: $list-group-active-bg !default; + +$list-group-disabled-color: $gray-600 !default; +$list-group-disabled-bg : $list-group-bg !default; + +$list-group-action-color : $gray-700 !default; +$list-group-action-hover-color: $list-group-action-color !default; + +$list-group-action-active-color: $body-color !default; +$list-group-action-active-bg : $gray-200 !default; + +// Image thumbnails + +$thumbnail-padding : .25rem !default; +$thumbnail-bg : $body-bg !default; +$thumbnail-border-width : $border-width !default; +$thumbnail-border-color : $gray-300 !default; +$thumbnail-border-radius: $border-radius !default; +$thumbnail-box-shadow : $box-shadow-sm !default; + + +// Figures + +$figure-caption-font-size: $small-font-size !default; +$figure-caption-color : $gray-600 !default; + + +// Breadcrumbs + +$breadcrumb-font-size : null !default; +$breadcrumb-padding-y : $spacer * 0.5 !default; +$breadcrumb-padding-x : $spacer !default; +$breadcrumb-item-padding-x: .5rem !default; +$breadcrumb-margin-bottom : 1rem !default; +$breadcrumb-bg : $gray-200 !default; +$breadcrumb-divider-color : $gray-600 !default; +$breadcrumb-active-color : $gray-600 !default; +$breadcrumb-divider : quote("/") !default; +$breadcrumb-border-radius : $border-radius !default; + +$breadcrumb-active-color : $white !default; +$breadcrumb-divider-color : $gray-700 !default; +$breadcrumb-item-color : $gray-700 !default; +$breadcrumb-font-weight : $font-weight-normal !default; +$breadcrumb-active-font-weight : $font-weight-normal !default; +$breadcrumb-item-light-color : $white !default; +$breadcrumb-divider-light-color: $white !default; + +// Carousel + +$carousel-control-color : $white !default; +$carousel-control-width : 15% !default; +$carousel-control-opacity : .5 !default; +$carousel-control-hover-opacity: .9 !default; +$carousel-control-transition : opacity .15s ease !default; + +$carousel-indicator-width : 30px !default; +$carousel-indicator-height : 3px !default; +$carousel-indicator-hit-area-height: 10px !default; +$carousel-indicator-spacer : 3px !default; +$carousel-indicator-opacity : .5 !default; +$carousel-indicator-active-bg : $white !default; +$carousel-indicator-active-opacity : 1 !default; +$carousel-indicator-transition : opacity .6s ease !default; + +$carousel-caption-width : 70% !default; +$carousel-caption-color : $white !default; +$carousel-caption-padding-y: 1.25rem !default; +$carousel-caption-spacer : 1.25rem !default; + +$carousel-control-icon-width: 20px !default; + +$carousel-control-prev-icon-bg: url("data:image/svg+xml,") !default; +$carousel-control-next-icon-bg: url("data:image/svg+xml,") !default; + +$carousel-transition-duration: .6s !default; +$carousel-transition : transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`) + + +// Spinners + +$spinner-width : 2rem !default; +$spinner-height : $spinner-width !default; +$spinner-border-width : .25em !default; +$spinner-animation-speed: .75s !default; + +$spinner-width-sm : 1.2rem !default; +$spinner-height-sm : $spinner-width-sm !default; +$spinner-border-width-sm: .2em !default; + +// Datepicker + +$datepicker-border-radius : $border-radius-sm !default; +$datepicker-dropdown-padding: 20px 22px !default; + +$datepicker-cell-transition : $transition-base !default; +$datepicker-cell-hover-background: lighten($gray-400, 55%) !default; +$datepicker-cell-border-radius : 50% !default; +$datepicker-cell-width : 36px !default; +$datepicker-cell-height : 36px !default; + +$datepicker-disabled-cell-color : $gray-300 !default; +$datepicker-disabled-old-new-color: $gray-500 !default; + +$datepicker-header-cell-border-radius: $border-radius-sm !default; + +$datepicker-active-color : $white !default; +$datepicker-active-background: $secondary !default; +$datepicker-active-box-shadow: none !default; + +$datepicker-range-background : $secondary !default; +$datepicker-range-cell-focused-background: darken($datepicker-range-background, 5%) !default; +$datepicker-range-color : $white !default; +$datepicker-range-highlighted-bg : $gray-200 !default; + +$datepicker-dropdown-border: lighten($gray-400, 40%) !default; +$datepicker-dropdown-bg : $white !default; +$datepicker-highlighted-bg : $datepicker-active-background !default; + + +// Close + +$close-bg : transparent !default; +$close-hover-bg : transparent !default; +$close-color : rgba(0, 0, 0, .6) !default; +$close-hover-color: rgba(0, 0, 0, .9) !default; +$close-font-size : $font-size-base * 1.5 !default; +$close-font-weight: $font-weight-bold !default; +$close-color : $black !default; +$close-text-shadow: 0 1px 0 $white !default; + + + +// Code + +$code-font-size: $small-font-size !default; +$code-color : $pink !default; + +$kbd-padding-y: .2rem !default; +$kbd-padding-x: .4rem !default; +$kbd-font-size: $code-font-size !default; +$kbd-color : $white !default; +$kbd-bg : $gray-900 !default; + +$pre-color: null !default; + +// Avatars +$avatar-sm-y: 1.5rem !default; +$avatar-sm-x: 1.5rem !default; + +$avatar-y: 2rem !default; +$avatar-x: 2rem !default; + +$avatar-md-y: 3rem !default; +$avatar-md-x: 3rem !default; + +$avatar-lg-y: 4.5rem !default; +$avatar-lg-x: 4.5rem !default; + +$avatar-xl-y: 8rem !default; +$avatar-xl-x: 8rem !default; + +// Footer + +$footer-link-font-size : .85rem !default; +$footer-bg : theme-color("secondary") !default; +$footer-color : $gray-600 !default; +$footer-link-color : $gray-600 !default; +$footer-link-hover-color : $gray-700 !default; +$footer-heading-color : $gray-600 !default; +$footer-heading-font-size: $font-size-sm !default; +$padding-footer-sm : .125rem !default; +$padding-footer : .375rem !default; +$padding-footer-md : .625rem !default; +$padding-footer-general : .9375rem !default; +$padding-footer-big : 1.5rem !default; diff --git a/resources/volt/scss/volt/_vendor.scss b/resources/volt/scss/volt/_vendor.scss new file mode 100644 index 0000000..9d4f390 --- /dev/null +++ b/resources/volt/scss/volt/_vendor.scss @@ -0,0 +1,6 @@ +// Vendor +@import "vendor/headroom"; +@import "vendor/nouislider"; +@import "vendor/prism"; +@import "vendor/chartist/chartist"; +@import "vendor/datepicker"; diff --git a/resources/volt/scss/volt/components/_accordions.scss b/resources/volt/scss/volt/components/_accordions.scss new file mode 100755 index 0000000..5ea18f2 --- /dev/null +++ b/resources/volt/scss/volt/components/_accordions.scss @@ -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; + } +} + + + + diff --git a/resources/volt/scss/volt/components/_alerts.scss b/resources/volt/scss/volt/components/_alerts.scss new file mode 100644 index 0000000..6fd954d --- /dev/null +++ b/resources/volt/scss/volt/components/_alerts.scss @@ -0,0 +1,10 @@ +.alert-heading{ + font-weight: $font-weight-bold; +} + +.alert-icon{ + margin-bottom: .5rem; + span{ + font-size: $alert-icon-font-size; + } +} \ No newline at end of file diff --git a/resources/volt/scss/volt/components/_animations.scss b/resources/volt/scss/volt/components/_animations.scss new file mode 100644 index 0000000..cfed042 --- /dev/null +++ b/resources/volt/scss/volt/components/_animations.scss @@ -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; +} \ No newline at end of file diff --git a/resources/volt/scss/volt/components/_avatars.scss b/resources/volt/scss/volt/components/_avatars.scss new file mode 100755 index 0000000..ff412b6 --- /dev/null +++ b/resources/volt/scss/volt/components/_avatars.scss @@ -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; + } +} diff --git a/resources/volt/scss/volt/components/_badge.scss b/resources/volt/scss/volt/components/_badge.scss new file mode 100755 index 0000000..db64b82 --- /dev/null +++ b/resources/volt/scss/volt/components/_badge.scss @@ -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; +} diff --git a/resources/volt/scss/volt/components/_body.scss b/resources/volt/scss/volt/components/_body.scss new file mode 100644 index 0000000..002688a --- /dev/null +++ b/resources/volt/scss/volt/components/_body.scss @@ -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; +} \ No newline at end of file diff --git a/resources/volt/scss/volt/components/_breadcrumb.scss b/resources/volt/scss/volt/components/_breadcrumb.scss new file mode 100755 index 0000000..38e72d6 --- /dev/null +++ b/resources/volt/scss/volt/components/_breadcrumb.scss @@ -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; + } + } +} diff --git a/resources/volt/scss/volt/components/_buttons.scss b/resources/volt/scss/volt/components/_buttons.scss new file mode 100755 index 0000000..e45d369 --- /dev/null +++ b/resources/volt/scss/volt/components/_buttons.scss @@ -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; + } + } + } +} diff --git a/resources/volt/scss/volt/components/_card.scss b/resources/volt/scss/volt/components/_card.scss new file mode 100755 index 0000000..2e56166 --- /dev/null +++ b/resources/volt/scss/volt/components/_card.scss @@ -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; + } +} \ No newline at end of file diff --git a/resources/volt/scss/volt/components/_carousel.scss b/resources/volt/scss/volt/components/_carousel.scss new file mode 100755 index 0000000..3da686b --- /dev/null +++ b/resources/volt/scss/volt/components/_carousel.scss @@ -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; + } +} \ No newline at end of file diff --git a/resources/volt/scss/volt/components/_charts.scss b/resources/volt/scss/volt/components/_charts.scss new file mode 100644 index 0000000..d95f812 --- /dev/null +++ b/resources/volt/scss/volt/components/_charts.scss @@ -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; + } +} diff --git a/resources/volt/scss/volt/components/_close.scss b/resources/volt/scss/volt/components/_close.scss new file mode 100755 index 0000000..8b56b91 --- /dev/null +++ b/resources/volt/scss/volt/components/_close.scss @@ -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; + } + } +} diff --git a/resources/volt/scss/volt/components/_custom-forms.scss b/resources/volt/scss/volt/components/_custom-forms.scss new file mode 100755 index 0000000..d2be88d --- /dev/null +++ b/resources/volt/scss/volt/components/_custom-forms.scss @@ -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; + } + } +} + diff --git a/resources/volt/scss/volt/components/_datepicker.scss b/resources/volt/scss/volt/components/_datepicker.scss new file mode 100755 index 0000000..02e2450 --- /dev/null +++ b/resources/volt/scss/volt/components/_datepicker.scss @@ -0,0 +1,13 @@ +/** + * = Datepickers + */ + + .datepicker { + + .datepicker-cell.selected, + .datepicker-cell.selected:hover { + background: $primary; + } + + } + \ No newline at end of file diff --git a/resources/volt/scss/volt/components/_dropdown.scss b/resources/volt/scss/volt/components/_dropdown.scss new file mode 100755 index 0000000..6b87370 --- /dev/null +++ b/resources/volt/scss/volt/components/_dropdown.scss @@ -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; + } +} + + diff --git a/resources/volt/scss/volt/components/_icons.scss b/resources/volt/scss/volt/components/_icons.scss new file mode 100755 index 0000000..30d8ea9 --- /dev/null +++ b/resources/volt/scss/volt/components/_icons.scss @@ -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); + } +} diff --git a/resources/volt/scss/volt/components/_images.scss b/resources/volt/scss/volt/components/_images.scss new file mode 100644 index 0000000..a4cb8f7 --- /dev/null +++ b/resources/volt/scss/volt/components/_images.scss @@ -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; +} + diff --git a/resources/volt/scss/volt/components/_list-group.scss b/resources/volt/scss/volt/components/_list-group.scss new file mode 100755 index 0000000..160e468 --- /dev/null +++ b/resources/volt/scss/volt/components/_list-group.scss @@ -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; + } +} diff --git a/resources/volt/scss/volt/components/_modal.scss b/resources/volt/scss/volt/components/_modal.scss new file mode 100755 index 0000000..5fe4bc7 --- /dev/null +++ b/resources/volt/scss/volt/components/_modal.scss @@ -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); + } +} + diff --git a/resources/volt/scss/volt/components/_nav.scss b/resources/volt/scss/volt/components/_nav.scss new file mode 100755 index 0000000..ab1907c --- /dev/null +++ b/resources/volt/scss/volt/components/_nav.scss @@ -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; + } +} \ No newline at end of file diff --git a/resources/volt/scss/volt/components/_pagination.scss b/resources/volt/scss/volt/components/_pagination.scss new file mode 100755 index 0000000..106973b --- /dev/null +++ b/resources/volt/scss/volt/components/_pagination.scss @@ -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); + } +} + diff --git a/resources/volt/scss/volt/components/_popover.scss b/resources/volt/scss/volt/components/_popover.scss new file mode 100755 index 0000000..520acd8 --- /dev/null +++ b/resources/volt/scss/volt/components/_popover.scss @@ -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); + } +} \ No newline at end of file diff --git a/resources/volt/scss/volt/components/_progress.scss b/resources/volt/scss/volt/components/_progress.scss new file mode 100755 index 0000000..c974813 --- /dev/null +++ b/resources/volt/scss/volt/components/_progress.scss @@ -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; + } + } + } +} diff --git a/resources/volt/scss/volt/components/_scrollbar.scss b/resources/volt/scss/volt/components/_scrollbar.scss new file mode 100644 index 0000000..e757b73 --- /dev/null +++ b/resources/volt/scss/volt/components/_scrollbar.scss @@ -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%); + } + \ No newline at end of file diff --git a/resources/volt/scss/volt/components/_shapes.scss b/resources/volt/scss/volt/components/_shapes.scss new file mode 100755 index 0000000..160267f --- /dev/null +++ b/resources/volt/scss/volt/components/_shapes.scss @@ -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; +} diff --git a/resources/volt/scss/volt/components/_steps.scss b/resources/volt/scss/volt/components/_steps.scss new file mode 100755 index 0000000..33b71cd --- /dev/null +++ b/resources/volt/scss/volt/components/_steps.scss @@ -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; + } +} diff --git a/resources/volt/scss/volt/components/_tables.scss b/resources/volt/scss/volt/components/_tables.scss new file mode 100644 index 0000000..2aded49 --- /dev/null +++ b/resources/volt/scss/volt/components/_tables.scss @@ -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,"), "#", "%23"); + margin-left: .25rem; + } + } + } + + .thead-light { + [data-sort] { + &::after { + content: str-replace(url("data:image/svg+xml;utf8,"), "#", "%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) s in some browsers, due to the limited stylability of `