first commit

resources/sass/components/plugin-overrides/_ace.scss

@@ -0,0 +1,13 @@
+// npm package: ace-builds (Ajax.org Cloud9 Editor)
+// github link: https://github.com/ajaxorg/ace-builds
+
+.ace_editor {
+  border-radius: $input-border-radius;
+  margin: auto;
+  height: 300px;
+  width: 100%;
+  font: 14px/normal SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  .ace_content{
+    font-size: $font-size-base;
+  }
+}

resources/sass/components/plugin-overrides/_apex-charts.scss

@@ -0,0 +1,86 @@
+// npm package: apexcharts
+// github link: https://github.com/apexcharts/apexcharts.js
+
+div.apexcharts-canvas {
+  /*rtl:ignore*/
+  direction: ltr; // RTL fix
+
+  .apexcharts-menu {
+    background: $dropdown-bg !important;
+    color: $body-color;
+    border-color: $border-color;
+  }
+
+  .apexcharts-zoom-icon svg, 
+  .apexcharts-zoomin-icon svg, 
+  .apexcharts-zoomout-icon svg, 
+  .apexcharts-reset-icon svg, 
+  .apexcharts-pan-icon svg, 
+  .apexcharts-selection-icon svg, 
+  .apexcharts-menu-icon svg, 
+  .apexcharts-toolbar-custom-icon svg {
+    fill: $secondary;
+  }
+
+  .apexcharts-legend.apexcharts-align-right .apexcharts-legend-series, 
+  .apexcharts-legend.apexcharts-align-left .apexcharts-legend-series {
+    display: flex;
+    align-items: center;
+  }
+
+  .apexcharts-legend-marker {
+    margin-right: 3px;
+  }
+
+  .apexcharts-tooltip {
+    background: rgba($dropdown-bg, .8);
+    color: $body-color;
+    box-shadow: $dropdown-box-shadow;
+    border-radius: $border-radius;
+    border: 1px solid $dropdown-border-color;
+    .apexcharts-tooltip-title {
+      border-color: $border-color;
+      background-color: $dropdown-bg;
+    }
+    * {
+      font-family: $font-family-sans-serif !important;
+    }
+  }
+  .apexcharts-tooltip-series-group.apexcharts-active, 
+  .apexcharts-tooltip-series-group:last-child {
+    padding: 0 10px;
+  }
+  .apexcharts-tooltip-text-y-value, 
+  .apexcharts-tooltip-text-goals-value, 
+  .apexcharts-tooltip-text-z-value {
+    margin-left: 0;
+  }
+
+  .apexcharts-tooltip-title {
+    margin-bottom: 0;
+  }
+
+  .apexcharts-xaxistooltip,
+  .apexcharts-yaxistooltip {
+    background: $dropdown-bg;
+    color: $body-color;
+    border-color: $dropdown-border-color;
+  }
+
+  .apexcharts-xaxistooltip-bottom::before {
+    border-bottom-color: $dropdown-border-color;
+  }
+  .apexcharts-xaxistooltip-bottom::after {
+    border-bottom-color: rgba($dropdown-bg, .8);
+  }
+
+  .apexcharts-yaxistooltip-left:before,
+    .apexcharts-yaxistooltip-right:before {
+    border-left-color: $dropdown-border-color;
+  }
+  .apexcharts-yaxistooltip-left:after,
+    .apexcharts-yaxistooltip-right:after {
+    border-left-color: rgba($dropdown-bg, .8);
+  }
+
+}

resources/sass/components/plugin-overrides/_data-tables.scss

@@ -0,0 +1,47 @@
+// npm package: datatables.net-bs5
+// github link: https://github.com/DataTables/Dist-DataTables-Bootstrap5
+
+.dataTables_wrapper {
+  &.dt-bootstrap4 {
+    .dataTables_length {
+      @media(max-width: 767px) {
+        text-align: left;
+      }
+      select {
+        @extend .w-100;
+        margin-left: 10px;
+        margin-right: 10px;
+      }
+    }
+    .dataTables_filter {
+      @media(max-width: 767px) {
+        text-align: left;
+        margin-left: -19px;
+      }
+    }
+  }
+  div {
+    &.dataTables_paginate {
+      ul { 
+        &.pagination {
+          @extend .justify-content-center;
+          @extend .justify-content-md-end;
+          @extend .mt-3;
+          @extend .mt-md-0;
+        }
+      }
+    }
+  }
+}
+
+div.table-responsive>div.dataTables_wrapper>div.row>div[class^=col-]:first-child {
+  // RTL fix
+  padding-left: 0;
+  padding-right: 12px;
+}
+
+div.table-responsive>div.dataTables_wrapper>div.row>div[class^=col-]:last-child {
+  // RTL fix
+  padding-right: 0;
+  padding-left: 12px;
+}

resources/sass/components/plugin-overrides/_dropify.scss

@@ -0,0 +1,20 @@
+// npm package: dropify
+// github link: https://github.com/JeremyFagis/dropify
+
+.dropify-wrapper {
+  border: 1px solid $input-border-color;
+  border-radius: $input-border-radius;
+  .dropify-message {
+    span {
+      &.file-icon {
+        font-size: .875rem;
+        color: $text-muted;
+        &::before {
+          font-family: feather;
+          content: '\e8e3';
+          font-size: 24px;
+        }
+      }
+    }
+  }
+}

resources/sass/components/plugin-overrides/_dropzone.scss

@@ -0,0 +1,29 @@
+// npm package: dropify
+// github link: https://github.com/dropzone/dropzone
+
+.dropzone {
+  overflow: auto;
+  border: 1px solid $input-border-color;
+  border-radius: $input-border-radius;
+  @media (min-width: 1400px) {
+    min-height: 200px;
+  }
+  max-height: 200px;
+  padding: 0;
+  &.dz-clickable {
+    .dz-message {
+      margin-top: 65px;
+      * {
+        @extend .text-muted;
+      }
+    }
+  }
+  .dz-preview {
+    &.dz-image-preview,
+    &.dz-file-preview {
+      .dz-image {
+        border-radius: $input-border-radius;
+      }
+    }
+  }
+}

resources/sass/components/plugin-overrides/_easymde.scss

@@ -0,0 +1,53 @@
+// npm package: easymde
+// github link: https://github.com/Ionaru/easy-markdown-editor
+
+.EasyMDEContainer .CodeMirror {
+  background: $input-bg;
+  border: 1px solid $input-border-color;
+  color: $body-color;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.editor-toolbar {
+  border: 1px solid $input-border-color;
+  border-bottom: 0;
+  border-radius: $input-border-radius $input-border-radius 0 0;
+  &, &:hover {
+    opacity: 1;
+  }
+  button {
+    color: rgba($body-color, .7) !important;
+    &:hover {
+      background: $gray-200;
+      border: none;
+    }
+  }
+  i.separator {
+    border-left: 1px solid $input-border-color;
+    border-right: 1px solid $input-border-color;
+  }
+}
+
+.EasyMDEContainer .CodeMirror-fullscreen,
+.editor-toolbar.fullscreen,
+.editor-preview-side {
+  z-index: 999;
+}
+
+.editor-preview-side {
+  border-color: $input-border-color;
+}
+
+.editor-toolbar button.active,.editor-toolbar button:hover {
+  background: $gray-200;
+  border-color: transparent;
+}
+
+.editor-statusbar {
+  padding: 0 10px;
+  border: 1px solid $input-border-color;
+  border-top-color: transparent;
+  border-bottom-left-radius: $input-border-radius;
+  border-bottom-right-radius: $input-border-radius;
+}

resources/sass/components/plugin-overrides/_flatpickr.scss

@@ -0,0 +1,76 @@
+// npm package: flatpickr
+// github link: https://github.com/flatpickr/flatpickr
+
+.form-control.flatpickr-input {
+	background-color: $input-bg;
+}
+
+.flatpickr-day.selected, 
+.flatpickr-day.startRange, 
+.flatpickr-day.endRange, 
+.flatpickr-day.selected.inRange, 
+.flatpickr-day.startRange.inRange, 
+.flatpickr-day.endRange.inRange, 
+.flatpickr-day.selected:focus, 
+.flatpickr-day.startRange:focus, 
+.flatpickr-day.endRange:focus, 
+.flatpickr-day.selected:hover, 
+.flatpickr-day.startRange:hover, 
+.flatpickr-day.endRange:hover, 
+.flatpickr-day.selected.prevMonthDay, 
+.flatpickr-day.startRange.prevMonthDay, 
+.flatpickr-day.endRange.prevMonthDay, 
+.flatpickr-day.selected.nextMonthDay, 
+.flatpickr-day.startRange.nextMonthDay, 
+.flatpickr-day.endRange.nextMonthDay {
+	background: $primary;
+	border-color: $primary;
+}
+
+.flatpickr-months {
+	padding: 0 1rem;
+	padding-top: 0.5rem;
+}
+
+.flatpickr-innerContainer {
+  // padding: 0.5rem 1rem;
+}
+
+.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month, 
+.flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
+  
+  left: 11px;
+  right: auto !important;
+  top: 8px;
+}
+
+.flatpickr-months .flatpickr-prev-month.flatpickr-next-month, 
+.flatpickr-months .flatpickr-next-month.flatpickr-next-month {
+  
+  right: 11px;
+  left: auto !important;
+  top: 8px;
+}
+
+.flatpickr-months .flatpickr-prev-month:hover svg, 
+.flatpickr-months .flatpickr-next-month:hover svg {
+  fill: $primary;
+}
+
+.flatpickr-months .flatpickr-month {
+  height: 42px;
+}
+
+.flatpickr-current-month .flatpickr-monthDropdown-months {
+  font-size: 1rem;
+  border-radius: $input-border-radius;
+  padding: .3rem .5rem;
+}
+
+.flatpickr-weekdays {
+  padding: 0 10px;
+}
+
+.dayContainer {
+  padding: 0 10px 10px;
+}

resources/sass/components/plugin-overrides/_full-calendar.scss

@@ -0,0 +1,95 @@
+// npm package: fullcalendar
+// github link: https://github.com/fullcalendar/fullcalendar
+
+div.fc {
+  .fc-button-primary {
+    @extend .btn;
+    @extend .btn-outline-primary;
+    @extend .btn-sm;
+  }
+
+  --fc-button-active-bg-color: #{$primary};
+  --fc-button-active-border-color: #{$primary};
+
+  --fc-border-color: #{$border-color};
+
+  .fc-button .fc-icon {
+    font-size: 1.3em;
+  }
+  .fc-button-primary:focus, 
+  .fc-button-primary:not(:disabled).fc-button-active:focus, 
+  .fc-button-primary:not(:disabled):active:focus {
+    box-shadow: none;
+  }
+
+  .fc-button-primary:disabled {
+    border-color: $primary;
+  }
+
+  .fc-toolbar {
+    @media(max-width: 767px) {
+      flex-direction: column;
+      .fc-toolbar-chunk {
+        margin-bottom: 12px;
+      }
+    }
+  }
+
+  .fc-daygrid-day-number,
+  .fc-col-header-cell-cushion {
+    color: $body-color;
+  }
+
+  .fc-daygrid-event {
+    padding: 4px;
+  }
+
+  .fc-daygrid-day.fc-day-today {
+    background-color: rgba($primary, .2);
+  }
+
+  .fc-list-event:hover td {
+    background-color: rgba($primary, .2);
+  }
+
+  .fc-list-day-text,
+  .fc-list-day-side-text {
+    color: $body-color;
+  }
+}
+
+.fc-timegrid-event-harness-inset .fc-timegrid-event, 
+.fc-timegrid-event.fc-event-mirror, 
+.fc-timegrid-more-link {
+  box-shadow: none;
+}
+
+.fc-theme-standard .fc-popover {
+  background-color: $dropdown-bg;
+  border-color: $dropdown-border-color;
+  box-shadow: $dropdown-box-shadow;
+  .fc-popover-header {
+    background-color: $secondary;
+  }
+}
+
+.fc-theme-standard .fc-list-day-cushion {
+  --fc-neutral-bg-color: #{$body-bg};
+}
+
+.fc-h-event.fc-daygrid-block-event {
+  margin-bottom: 10px;
+  padding: 8px;
+  border-radius: 2px;
+  background: rgba($primary, .2);
+  border: 0;
+  border-left: 3px solid $primary;
+  color: $body-color;
+  font-weight: 500;
+}
+
+.fc-event.fc-h-event {
+  --fc-event-text-color: #{$body-color};
+  border-left-width: 3px;
+  font-weight: 700;
+}

resources/sass/components/plugin-overrides/_jquery-flot.scss

@@ -0,0 +1,28 @@
+// npm package: jquery.flot
+// github link: https://github.com/flot/flot
+
+.flot-chart-wrapper {
+  .flot-chart {
+    width: 100%;
+    position: relative;
+    max-width: none;
+    height: 400px;
+  }
+  @media(max-width: 767px) {
+    height: 200px;
+    min-height: 200px;
+    .flot-chart {
+      height: 100%;
+    }
+  }
+}
+
+.flot-text {
+  .flot-x-axis,
+  .flot-y-axis {
+    > div,
+    .flot-tick-label {
+      color: $body-color;
+    }
+  }
+}

resources/sass/components/plugin-overrides/_peity.scss

@@ -0,0 +1,8 @@
+// npm package: peity
+// github link: https://github.com/benpickles/peity
+
+.peity-custom {
+  svg {
+    margin-right: 10px;
+  }
+}

resources/sass/components/plugin-overrides/_perfect-scrollbar.scss

@@ -0,0 +1,49 @@
+// npm package: perfect-scrollbar
+// github link: https://github.com/mdbootstrap/perfect-scrollbar
+
+.ps__thumb-x {
+	background-color: darken($card-bg, 15%);
+	height: 4px;
+}
+
+.ps__rail-x.ps--clicking .ps__thumb-x, 
+.ps__rail-x:focus>.ps__thumb-x, 
+.ps__rail-x:hover>.ps__thumb-x {
+	background-color: darken($card-bg, 30%);
+	height: 6px;
+}
+
+.ps__rail-x {
+	height: 10px;
+}
+
+.ps__thumb-y {
+	background-color: darken($card-bg, 15%);
+	width: 4px;
+	// RTL fix
+	right: 2px !important;
+	left: auto !important;
+}
+
+.ps__rail-y.ps--clicking .ps__thumb-y, 
+.ps__rail-y:focus>.ps__thumb-y, 
+.ps__rail-y:hover>.ps__thumb-y {
+	background-color: darken($card-bg, 30%);
+	width: 6px;
+}
+
+.ps__rail-y {
+	width: 10px;
+	// RTL fix
+	right: 0 !important;
+	left: auto !important;
+}
+
+.ps .ps__rail-x.ps--clicking, 
+.ps .ps__rail-x:focus, 
+.ps .ps__rail-x:hover, 
+.ps .ps__rail-y.ps--clicking, 
+.ps .ps__rail-y:focus, 
+.ps .ps__rail-y:hover {
+	background-color: $light;
+}

resources/sass/components/plugin-overrides/_select2.scss

@@ -0,0 +1,68 @@
+// npm package: select2
+// github link: https://github.com/select2/select2
+
+.select2-container--default {
+  .select2-selection--single, 
+  .select2-selection--multiple {
+    border: 1px solid $input-border-color;
+    border-radius: $border-radius;
+    @at-root #{selector-append(".select2-container--focus", &)} {
+      border: 1px solid $input-focus-border-color;
+    }
+  }
+}
+
+.select2-dropdown {
+  border: 1px solid $input-focus-border-color;
+  border-radius: $border-radius;
+}
+
+.select2-container--default {
+  .select2-search--dropdown .select2-search__field {
+    @extend .form-control;
+  }
+  .select2-results__option--highlighted[aria-selected] {
+    background-color: $primary;
+  }
+}
+
+.select2-container .select2-selection--single,
+.select2-container .select2-selection--multiple {
+  height: auto;
+}
+
+.select2-container--default .select2-selection--single {
+  .select2-selection__rendered {
+    line-height: 1.5;
+    padding: $input-btn-padding-y $input-btn-padding-x;
+  }
+  .select2-selection__arrow {
+    height: 100%;
+    b {
+      left: 0;
+    }
+  }
+}
+
+.select2-container--default .select2-selection--multiple {
+  min-height: 38px;
+  .select2-selection__rendered {
+    padding: 0 6px
+  }
+  .select2-selection__choice {
+    background-color: $primary;
+    color: $white;
+    border-color: $primary;
+    padding: 1px 8px;
+    border-radius: .15rem;
+    margin-top: 5px;
+  }
+  .select2-selection__choice__remove {
+    color: $white;
+    opacity: .5;
+  }
+}
+
+.select2-container .select2-search--inline {
+  margin-top: 3px;
+}

resources/sass/components/plugin-overrides/_sweet-alert.scss

@@ -0,0 +1,51 @@
+// npm package: sweetalert2
+// github link: https://github.com/sweetalert2/sweetalert2
+
+.swal2-popup {
+  font-size: $font-size-base;
+
+  .swal2-title {
+    font-size: 25px;
+    line-height: 1;
+    font-weight: 500;
+    color: $body-color;
+    margin-bottom: 0;
+  }
+
+  .swal2-html-container {
+    font-size: $font-size-base;
+    color: $text-muted;
+    font-weight: initial;
+    margin-top: 11px;
+    text-decoration: none;
+  }
+
+  .swal2-actions {
+    button {
+      @extend .btn;
+      &.swal2-confirm {
+        @extend .btn-primary;
+      }
+      &.swal2-cancel {
+        @extend .btn-danger;
+        @extend .border-danger;
+      }
+      svg {
+        width: 16px;
+        height: 16px;
+      }
+    }
+  }
+
+  .swal2-close {
+    font-size: 22px;
+    &:focus {
+      box-shadow: none;
+    }
+  }
+
+  .swal2-timer-progress-bar {
+    background: $secondary;
+  }
+
+}

resources/sass/components/plugin-overrides/_tags-input.scss

@@ -0,0 +1,37 @@
+// npm package: jquery-tags-input
+// github link: https://github.com/xoxco/jQuery-Tags-Input
+
+div.tagsinput {
+  padding: 6px 6px 1px;
+  border-color: $input-border-color;
+  border-radius: $input-border-radius;
+  span.tag {
+    background: $primary;
+    color: $white;
+    border: 0;
+    padding: 3px 7px;
+    font-family: inherit;
+    border-radius: .15rem;
+    margin-bottom: 4px;
+    float: left;
+    // RTL fix
+    margin-right: 0;
+    margin-left: 5px;
+    a {
+      font-size: 13px;
+      font-weight: 500;
+      color: $white;
+      opacity: .5;
+    }
+  }
+  #tags_addTag {
+    float: left;
+    // RTL fix
+    margin-left: 5px;
+  }
+  input {
+    margin: 0;
+    padding: 1px;
+    border-radius: $border-radius;
+  }
+}

resources/sass/components/plugin-overrides/_tinymce.scss

@@ -0,0 +1,168 @@
+// npm package: tinymce
+// github link: https://github.com/tinymce/tinymce
+
+.tox.tox-tinymce {
+  border: 1px solid $input-border-color;
+  border-radius: $input-border-radius;
+  .tox-menubar,
+  .tox-toolbar-overlord,
+  .tox-toolbar,
+  .tox-toolbar__overflow,
+  .tox-toolbar__primary {
+    background-color: $input-bg;
+    background-image: none;
+    border-bottom: 1px solid $input-border-color;
+  }
+  .tox-toolbar-overlord {
+    border-bottom: none;
+  }
+  &:not(.tox-tinymce-inline) .tox-editor-header {
+    padding: 0;
+    box-shadow: none;
+  }
+  .tox-edit-area__iframe {
+    background-color: $input-bg;
+  }
+  &.tox:not([dir=rtl]) .tox-toolbar__group:not(:last-of-type) {
+    border-right-color: $input-border-color;
+    border-left-color: $input-border-color; // RTL
+  }
+  .tox-statusbar {
+    background-color: $input-bg;
+    border-color: $input-border-color;
+    color: $text-muted;
+  }
+  .tox-statusbar a,
+  .tox-statusbar__path-item,
+  .tox-statusbar__wordcount {
+    color: $text-muted;
+  }
+  .tox-mbtn {
+    color: $body-color;
+  }
+  .tox-tbtn {
+    color: rgba($body-color, .7);
+  }
+  .tox-tbtn:hover {
+    background: $gray-200;
+    color: $body-color;
+    svg {
+      fill: $body-color;
+    }
+  }
+  .tox-tbtn:focus:not(.tox-tbtn--disabled) {
+    color: $body-color;
+  }
+  .tox-mbtn:hover:not(:disabled):not(.tox-mbtn--active) {
+    background: $gray-200;
+    color: $body-color;
+  }
+  .tox-mbtn:focus:not(:disabled),
+  .tox-mbtn--active {
+    background: $gray-200;
+    color: $body-color;
+  }
+  .tox-tbtn svg {
+    fill: rgba($body-color, .7);
+  }
+  .tox-tbtn--disabled svg,
+  .tox-tbtn--disabled:hover svg,
+  .tox-tbtn:disabled svg,
+  .tox-tbtn:disabled:hover svg {
+    fill: $input-disabled-bg;
+  }
+  .tox-split-button:hover {
+    box-shadow: 0 0 0 1px $input-border-color inset;
+  }
+  .tox-split-button:focus {
+    background: $gray-200;
+  }
+  .tox-tbtn--enabled,
+  .tox-tbtn--enabled:hover,
+  .tox-tbtn:focus {
+    background: $gray-200;
+  }
+}
+
+
+div.tox {
+  .tox-menu {
+    background-color: $dropdown-bg;
+    border-color: $dropdown-border-color;
+  }
+  .tox-collection__item {
+    color: $dropdown-color;
+  }
+  .tox-collection--list .tox-collection__item--enabled {
+    background-color: $primary;
+    color: $white;
+  }
+  .tox-collection--list .tox-collection__group {
+    border-color: $border-color;
+  }
+  .tox-collection--toolbar .tox-collection__item--active {
+    background-color: $gray-200;
+  }
+  .tox-collection--list .tox-collection__item--active {
+    background-color: $gray-200;
+  }
+  .tox-collection--toolbar .tox-collection__item--active:not(.tox-collection__item--state-disabled) {
+    color: $body-color;
+  }
+  .tox-collection--list .tox-collection__item--active:not(.tox-collection__item--state-disabled) {
+    color: $body-color;
+  }
+
+
+  .tox-dialog-wrap__backdrop {
+    background-color: rgba(0,0,0,.75);
+  }
+  .tox-dialog,
+  .tox-dialog__header,
+  .tox-dialog__footer {
+    background-color: $input-bg;
+    border-color: $border-color;
+    color: $body-color;
+  }
+  .tox-button--secondary {
+    @extend .btn-secondary;
+  }
+  .tox-button {
+    @extend .btn;
+    &:not(.tox-button--naked):not(.tox-button--secondary) {
+      @extend .btn-primary;
+    }
+  }
+  .tox-button--secondary:hover:not(:disabled) {
+    background-color: $secondary;
+    border-color: $secondary;
+    color: $white;
+  }
+  .tox-button--naked:hover:not(:disabled) {
+    background-color: transparent;
+    border-color: transparent;
+  }
+  .tox-button--naked.tox-button--icon:hover:not(:disabled) {
+    color: lighten($body-color, 20%);
+  }
+  .tox-listboxfield .tox-listbox--select, 
+  .tox-textarea, 
+  .tox-textfield, 
+  .tox-toolbar-textfield {
+    background-color: $input-bg;
+    border-color: $input-border-color;
+    color: $body-color;
+  }
+  .tox-listboxfield .tox-listbox--select:focus, 
+  .tox-textarea:focus, 
+  .tox-textfield:focus {
+    background-color: $input-bg;
+    border-color: $input-focus-border-color;
+  }
+  .tox-dialog__table tbody tr {
+    border-color: $border-color;
+  }
+  .tox-dialog__body {
+    color: $body-color;
+  }
+}

resources/sass/components/plugin-overrides/_typeahead.scss

@@ -0,0 +1,17 @@
+// npm package: typeahead.js
+// github link: https://github.com/twitter/typeahead.js
+
+.typeahead.tt-input,
+.typeahead.tt-hint {
+  @extend .form-control;
+  background-color: $input-bg !important;
+  // RTL fix
+  direction: ltr;
+}
+.tt-menu {
+  @extend .dropdown-menu;
+  .tt-suggestion {
+    @extend .dropdown-item;
+    cursor: pointer;
+  }
+}

resources/sass/components/plugin-overrides/_wizard.scss

@@ -0,0 +1,155 @@
+// npm package: jquery-steps
+// github link: https://github.com/rstaib/jquery-steps/
+
+.tabcontrol ul, .wizard ul {
+  display: flex;
+  @media(max-width: 676px) {
+    flex-wrap: wrap;
+  }
+}
+
+.wizard>.steps>ul>li {
+  width: auto;
+  display: flex;
+  flex-grow: 1;
+}
+
+.wizard>.steps .disabled a, 
+.wizard>.steps .disabled a:active, 
+.wizard>.steps .disabled a:hover {
+  background-color: $gray-200;
+  color: $body-color;
+  border: 1px solid transparent;
+}
+
+.wizard>.steps .current a, 
+.wizard>.steps .current a:active, 
+.wizard>.steps .current a:hover {
+  background-color: $primary;
+  border: 1px solid transparent;
+}
+
+.wizard>.steps a, 
+.wizard>.steps a:active, 
+.wizard>.steps a:hover {
+  padding: $btn-padding-y $btn-padding-x;
+  border-radius: $input-border-radius;
+  width: 100%;
+}
+
+.wizard>.steps .done a, 
+.wizard>.steps .done a:active, 
+.wizard>.steps .done a:hover {
+  background-color: rgba($primary, .2);
+  color: $primary;
+  border: 1px solid $primary;
+}
+
+.wizard>.steps ul li {
+  a {
+    &, &:active, &:hover {
+      margin: 0 .5em .5em 0;
+    }
+  }
+  &:last-child {
+    a {
+      &, &:active, &:hover {
+        margin: 0 0 .5em 0;
+      }
+    }
+  }
+}
+
+.wizard>.steps .number {
+  font-size: inherit;
+}
+
+.wizard>.content {
+  background: $input-bg;
+  border: 1px solid $input-border-color;
+  min-height: 23em;
+  overflow: auto;
+  margin: .5em 0;
+}
+
+.wizard>.content>.body {
+  @media(max-width: 767px) {
+    width: 90%;
+    height: 90%;
+    padding: 5%;
+  }
+}
+
+.wizard>.actions {
+  // RTL fix
+  text-align: right; 
+}
+
+.wizard>.actions>ul>li, 
+.wizard>.steps>ul>li {
+  // RTL fix
+  float: left;
+}
+
+.wizard.vertical>.steps {
+  // RTL fix
+  float: left;
+}
+
+.wizard>.actions a, 
+.wizard>.actions a:active, 
+.wizard>.actions a:hover {
+  @extend .btn;
+  @extend .btn-primary;
+}
+
+.wizard>.actions .disabled a, 
+.wizard>.actions .disabled a:active, 
+.wizard>.actions .disabled a:hover {
+  background: $gray-200;
+  border-color: $gray-200;
+  cursor: not-allowed;
+  color: $gray-500;
+}
+
+.wizard>.actions .disabled a:focus {
+  box-shadow: none;
+  color: $gray-500;
+}
+
+.wizard>.actions>ul {
+  li {
+    margin-right: 0;
+    margin-left: .7em;
+  }
+}
+
+
+
+// vertical
+
+.wizard.vertical {
+  >.steps ul {
+    flex-direction: column;
+  }
+}
+
+.wizard.vertical>.content {
+  margin: 0 0 .5em 2%;
+  width: 68%;
+}
+
+.wizard.vertical>.steps a, 
+.wizard.vertical>.steps a:active, 
+.wizard.vertical>.steps a:hover {
+  margin: 0 0 .5em 0;
+}
+
+.wizard.vertical>.actions {
+  margin: 0;
+  width: 100%;
+}
+
+.wizard.vertical>.actions>ul>li {
+  margin: 0 0 0 .7em;
+}