Laravel 11, Vuexy Admin 10.3, by admin@koneko.mx
This commit is contained in:
51
modules/Admin/Resources/assets/vendor/libs/bs-stepper/_mixins.scss
vendored
Normal file
51
modules/Admin/Resources/assets/vendor/libs/bs-stepper/_mixins.scss
vendored
Normal file
@ -0,0 +1,51 @@
|
||||
// Stepper Mixin
|
||||
// *******************************************************************************
|
||||
@mixin bs-stepper-theme($background) {
|
||||
$color: color-contrast($background);
|
||||
.bs-stepper {
|
||||
.step {
|
||||
&.active {
|
||||
.bs-stepper-circle {
|
||||
background-color: $background;
|
||||
color: $color;
|
||||
box-shadow: 0 0.125rem 0.375rem 0 rgba($background, 0.3);
|
||||
}
|
||||
.bs-stepper-icon svg {
|
||||
fill: $background !important;
|
||||
}
|
||||
.bs-stepper-icon i,
|
||||
.bs-stepper-label {
|
||||
color: $background !important;
|
||||
}
|
||||
}
|
||||
&.crossed {
|
||||
.step-trigger {
|
||||
.bs-stepper-circle {
|
||||
background-color: rgba-to-hex(rgba($background, 0.16), $card-bg) !important;
|
||||
color: $background !important;
|
||||
}
|
||||
.bs-stepper-icon svg {
|
||||
fill: $background !important;
|
||||
}
|
||||
.bs-stepper-icon i {
|
||||
color: $background !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.wizard-icons {
|
||||
.step.crossed {
|
||||
.bs-stepper-label {
|
||||
color: $background !important;
|
||||
}
|
||||
& + {
|
||||
.line {
|
||||
i {
|
||||
color: $background;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
37
modules/Admin/Resources/assets/vendor/libs/bs-stepper/bs-stepper.js
vendored
Normal file
37
modules/Admin/Resources/assets/vendor/libs/bs-stepper/bs-stepper.js
vendored
Normal file
@ -0,0 +1,37 @@
|
||||
import Stepper from 'bs-stepper/dist/js/bs-stepper';
|
||||
|
||||
const bsStepper = document.querySelectorAll('.bs-stepper');
|
||||
|
||||
// Adds crossed class
|
||||
bsStepper.forEach(el => {
|
||||
el.addEventListener('show.bs-stepper', function (event) {
|
||||
var index = event.detail.indexStep;
|
||||
var numberOfSteps = el.querySelectorAll('.line').length;
|
||||
var line = el.querySelectorAll('.step');
|
||||
|
||||
// The first for loop is for increasing the steps,
|
||||
// the second is for turning them off when going back
|
||||
// and the third with the if statement because the last line
|
||||
// can't seem to turn off when I press the first item. ¯\_(ツ)_/¯
|
||||
|
||||
for (let i = 0; i < index; i++) {
|
||||
line[i].classList.add('crossed');
|
||||
|
||||
for (let j = index; j < numberOfSteps; j++) {
|
||||
line[j].classList.remove('crossed');
|
||||
}
|
||||
}
|
||||
if (event.detail.to == 0) {
|
||||
for (let k = index; k < numberOfSteps; k++) {
|
||||
line[k].classList.remove('crossed');
|
||||
}
|
||||
line[0].classList.remove('crossed');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
try {
|
||||
window.Stepper = Stepper;
|
||||
} catch (e) {}
|
||||
|
||||
export { Stepper };
|
||||
549
modules/Admin/Resources/assets/vendor/libs/bs-stepper/bs-stepper.scss
vendored
Normal file
549
modules/Admin/Resources/assets/vendor/libs/bs-stepper/bs-stepper.scss
vendored
Normal file
@ -0,0 +1,549 @@
|
||||
@use '../../scss/_bootstrap-extended/include' as light;
|
||||
@use '../../scss/_bootstrap-extended/include-dark' as dark;
|
||||
@import 'bs-stepper/dist/css/bs-stepper';
|
||||
@import '../../scss/_custom-variables/libs';
|
||||
|
||||
$bs-stepper-header-padding-y: 1.5rem !default;
|
||||
$bs-stepper-header-padding-x: $bs-stepper-header-padding-y !default;
|
||||
$bs-stepper-content-padding-x: 1.5rem !default;
|
||||
$bs-stepper-content-padding-y: $bs-stepper-content-padding-x !default;
|
||||
$bs-stepper-trigger-padding: 1.25rem !default;
|
||||
$bs-stepper-trigger-padding-vertical: 0.6rem !default;
|
||||
$bs-stepper-label-max-width: 224px !default;
|
||||
$bs-stepper-svg-icon-height: 3.75rem !default;
|
||||
$bs-stepper-svg-icon-width: 3.75rem !default;
|
||||
$bs-stepper-icon-font-size: 1.6rem !default;
|
||||
$bs-stepper-vertical-separator-height: 1.55rem !default;
|
||||
$bs-stepper-vertical-header-min-width: 18rem !default;
|
||||
|
||||
// Default Styles
|
||||
.bs-stepper {
|
||||
border-radius: light.$border-radius;
|
||||
.line {
|
||||
flex: 0;
|
||||
min-width: auto;
|
||||
min-height: auto;
|
||||
background-color: transparent;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.bs-stepper-header {
|
||||
padding: $bs-stepper-header-padding-y $bs-stepper-header-padding-x;
|
||||
|
||||
.step {
|
||||
.step-trigger {
|
||||
padding: 0;
|
||||
flex-wrap: nowrap;
|
||||
gap: 0.5rem;
|
||||
font-weight: light.$font-weight-medium;
|
||||
.bs-stepper-label {
|
||||
margin: 0;
|
||||
max-width: $bs-stepper-label-max-width;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-align: start;
|
||||
display: inline-grid;
|
||||
font-weight: light.$font-weight-medium;
|
||||
font-size: light.$font-size-base;
|
||||
line-height: light.$h6-line-height;
|
||||
.bs-stepper-title {
|
||||
font-weight: light.$font-weight-medium;
|
||||
}
|
||||
.bs-stepper-subtitle {
|
||||
font-size: light.$small-font-size;
|
||||
font-weight: light.$font-weight-base;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
@include light.media-breakpoint-down(lg) {
|
||||
padding: calc($bs-stepper-trigger-padding * 0.5) 0;
|
||||
}
|
||||
}
|
||||
.bs-stepper-circle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: light.$border-radius;
|
||||
width: 2.375rem;
|
||||
height: 2.375rem;
|
||||
font-size: light.$h5-font-size;
|
||||
font-weight: light.$font-weight-medium;
|
||||
i {
|
||||
font-size: 1.375rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bs-stepper-content {
|
||||
padding: $bs-stepper-content-padding-y $bs-stepper-content-padding-x;
|
||||
}
|
||||
|
||||
&.vertical {
|
||||
.bs-stepper-header {
|
||||
min-width: $bs-stepper-vertical-header-min-width;
|
||||
.step {
|
||||
.step-trigger {
|
||||
padding: $bs-stepper-trigger-padding-vertical 0;
|
||||
}
|
||||
&:first-child {
|
||||
.step-trigger {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
.step-trigger {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.line {
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
}
|
||||
}
|
||||
.bs-stepper-content {
|
||||
width: 100%;
|
||||
.content {
|
||||
&:not(.active) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.wizard-icons {
|
||||
.step {
|
||||
text-align: center;
|
||||
padding: 0.75rem 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.wizard-icons {
|
||||
.bs-stepper-header {
|
||||
justify-content: center;
|
||||
.step-trigger {
|
||||
padding: $bs-stepper-trigger-padding;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
.bs-stepper-icon {
|
||||
svg {
|
||||
height: $bs-stepper-svg-icon-height;
|
||||
width: $bs-stepper-svg-icon-width;
|
||||
}
|
||||
i {
|
||||
font-size: $bs-stepper-icon-font-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include light.media-breakpoint-up(lg) {
|
||||
justify-content: space-around;
|
||||
gap: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Remove borders from wizard modern
|
||||
&.wizard-modern {
|
||||
.bs-stepper-header {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
.bs-stepper-content {
|
||||
border-radius: light.$border-radius;
|
||||
}
|
||||
|
||||
&.vertical {
|
||||
.bs-stepper-header {
|
||||
border-right: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.vertical):not(.wizard-icons) .bs-stepper-header {
|
||||
@include light.media-breakpoint-up(lg) {
|
||||
gap: 1.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include app-rtl(false) {
|
||||
.bs-stepper.wizard-icons .bs-stepper-header .step-trigger {
|
||||
@include light.media-breakpoint-down(lg) {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include app-ltr(false) {
|
||||
.bs-stepper.wizard-icons .bs-stepper-header .step-trigger {
|
||||
@include light.media-breakpoint-down(lg) {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Styles for Modal example Create App wizard
|
||||
#wizard-create-app {
|
||||
&.vertical {
|
||||
.bs-stepper-header {
|
||||
min-width: $bs-stepper-vertical-header-min-width - 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Light style
|
||||
@if $enable-light-style {
|
||||
.light-style {
|
||||
.bs-stepper {
|
||||
background-color: light.$card-bg;
|
||||
&:not(.wizard-modern) {
|
||||
box-shadow: light.$card-box-shadow;
|
||||
}
|
||||
.bs-stepper-header {
|
||||
border-bottom: 1px solid light.$border-color;
|
||||
|
||||
.line {
|
||||
i {
|
||||
color: light.$body-color;
|
||||
}
|
||||
}
|
||||
|
||||
.bs-stepper-title,
|
||||
.bs-stepper-label {
|
||||
color: light.$headings-color;
|
||||
}
|
||||
|
||||
.bs-stepper-label {
|
||||
.bs-stepper-subtitle {
|
||||
color: light.$body-color;
|
||||
}
|
||||
}
|
||||
|
||||
.step {
|
||||
&:not(.active) {
|
||||
.bs-stepper-circle {
|
||||
background-color: light.$gray-50;
|
||||
color: light.$headings-color;
|
||||
}
|
||||
}
|
||||
&.crossed .step-trigger {
|
||||
.bs-stepper-label .bs-stepper-subtitle,
|
||||
.bs-stepper-title {
|
||||
color: light.$text-muted;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.step-trigger:focus {
|
||||
color: light.$headings-color;
|
||||
}
|
||||
|
||||
&.vertical {
|
||||
.bs-stepper-header {
|
||||
border-bottom: none;
|
||||
@include light.media-breakpoint-down(lg) {
|
||||
border-right: none !important;
|
||||
border-left: none !important;
|
||||
border-bottom: 1px solid light.$border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.wizard-modern {
|
||||
background-color: transparent;
|
||||
.bs-stepper-content {
|
||||
background-color: light.$card-bg;
|
||||
box-shadow: light.$card-box-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
&.wizard-icons {
|
||||
.bs-stepper-header {
|
||||
.bs-stepper-icon {
|
||||
svg {
|
||||
fill: light.$headings-color;
|
||||
}
|
||||
i {
|
||||
fill: light.$headings-color;
|
||||
}
|
||||
}
|
||||
.bs-stepper-label {
|
||||
color: light.$headings-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ! FIX: Vertical border issue in rtl and ltr
|
||||
@include app-rtl(false) {
|
||||
.light-style {
|
||||
.bs-stepper {
|
||||
&.vertical {
|
||||
.bs-stepper-header {
|
||||
border-left: 1px solid light.$border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include app-ltr(false) {
|
||||
.light-style {
|
||||
.bs-stepper {
|
||||
&.vertical {
|
||||
.bs-stepper-header {
|
||||
border-right: 1px solid light.$border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Dark Style
|
||||
@if $enable-dark-style {
|
||||
.dark-style {
|
||||
.bs-stepper {
|
||||
background-color: dark.$card-bg;
|
||||
.bs-stepper-header {
|
||||
border-bottom: 1px solid dark.$border-color;
|
||||
.line {
|
||||
i {
|
||||
color: dark.$body-color;
|
||||
}
|
||||
}
|
||||
|
||||
.bs-stepper-label,
|
||||
.bs-stepper-title {
|
||||
color: dark.$headings-color;
|
||||
}
|
||||
|
||||
.bs-stepper-label {
|
||||
.bs-stepper-subtitle {
|
||||
color: dark.$body-color;
|
||||
}
|
||||
}
|
||||
|
||||
.step {
|
||||
&:not(.active) {
|
||||
.bs-stepper-circle {
|
||||
background-color: dark.$gray-50;
|
||||
color: dark.$headings-color;
|
||||
}
|
||||
}
|
||||
&.crossed .step-trigger {
|
||||
.bs-stepper-label .bs-stepper-subtitle,
|
||||
.bs-stepper-title {
|
||||
color: dark.$text-muted;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.step-trigger:focus {
|
||||
color: dark.$headings-color;
|
||||
}
|
||||
|
||||
&.vertical {
|
||||
.bs-stepper-header {
|
||||
border-bottom: none;
|
||||
@include light.media-breakpoint-down(lg) {
|
||||
border-right: none !important;
|
||||
border-left: none !important;
|
||||
border-bottom: 1px solid dark.$border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.wizard-modern {
|
||||
background-color: transparent;
|
||||
.bs-stepper-content {
|
||||
background-color: dark.$card-bg;
|
||||
box-shadow: dark.$card-box-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
&.wizard-icons {
|
||||
.bs-stepper-header {
|
||||
.bs-stepper-icon {
|
||||
i {
|
||||
color: dark.$headings-color;
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: dark.$headings-color;
|
||||
}
|
||||
}
|
||||
.bs-stepper-label {
|
||||
color: dark.$headings-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ! FIX: Vertical border issue in rtl and ltr
|
||||
@include app-rtl(false) {
|
||||
.dark-style {
|
||||
.bs-stepper {
|
||||
&.vertical {
|
||||
.bs-stepper-header {
|
||||
border-left: 1px solid dark.$border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include app-ltr(false) {
|
||||
.dark-style {
|
||||
.bs-stepper {
|
||||
&.vertical {
|
||||
.bs-stepper-header {
|
||||
border-right: 1px solid dark.$border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// RTL
|
||||
@include app-rtl(false) {
|
||||
.bs-stepper {
|
||||
.bs-stepper-content {
|
||||
.btn-next:not(.btn-submit),
|
||||
.btn-prev {
|
||||
i {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.vertical {
|
||||
&.wizard-icons {
|
||||
.bs-stepper-header {
|
||||
.line:before {
|
||||
right: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Remove borders from wizard modern
|
||||
&.wizard-modern {
|
||||
&.vertical {
|
||||
.bs-stepper-header {
|
||||
border-left: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include light.media-breakpoint-up(lg) {
|
||||
.bs-stepper-header {
|
||||
.line {
|
||||
i {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include light.media-breakpoint-down(lg) {
|
||||
.bs-stepper-header {
|
||||
.step {
|
||||
.step-trigger {
|
||||
.bs-stepper-label {
|
||||
margin-left: 0;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.wizard-icons {
|
||||
.bs-stepper-header {
|
||||
.line {
|
||||
&:before {
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Media Queries
|
||||
@include light.media-breakpoint-down(lg) {
|
||||
.bs-stepper {
|
||||
.bs-stepper-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
.step {
|
||||
.step-trigger {
|
||||
flex-direction: row;
|
||||
.bs-stepper-label {
|
||||
margin-left: 0.35rem;
|
||||
}
|
||||
}
|
||||
&:first-child {
|
||||
.step-trigger {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
.step-trigger {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.vertical {
|
||||
flex-direction: column;
|
||||
.bs-stepper-header {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
&.wizard-icons {
|
||||
.bs-stepper-header {
|
||||
.line:before {
|
||||
left: 0.75rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:not(.vertical) {
|
||||
.bs-stepper-header {
|
||||
.line {
|
||||
i {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.wizard-icons {
|
||||
.bs-stepper-header .step:not(:first-child) {
|
||||
.bs-stepper-icon {
|
||||
svg {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 520px) {
|
||||
.bs-stepper-header {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Styles for Create App Modal Wizard
|
||||
#wizard-create-app {
|
||||
&.vertical {
|
||||
.bs-stepper-header {
|
||||
min-width: $bs-stepper-vertical-header-min-width - 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user