first commit
This commit is contained in:
		
							
								
								
									
										51
									
								
								resources/assets/vendor/libs/bs-stepper/_mixins.scss
									
									
									
									
										vendored
									
									
										Normal file
									
								
							
							
						
						
									
										51
									
								
								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
									
								
								resources/assets/vendor/libs/bs-stepper/bs-stepper.js
									
									
									
									
										vendored
									
									
										Normal file
									
								
							
							
						
						
									
										37
									
								
								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
									
								
								resources/assets/vendor/libs/bs-stepper/bs-stepper.scss
									
									
									
									
										vendored
									
									
										Normal file
									
								
							
							
						
						
									
										549
									
								
								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