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 `