first commit

resources/scss/base/plugins/charts/chart-apex.scss

@@ -0,0 +1,218 @@
+@import '../../bootstrap-extended/include'; // Bootstrap includes
+@import '../../components/include'; // Components includes
+
+.apexcharts-canvas {
+  line[stroke='transparent'] {
+    display: none;
+  }
+  .apexcharts-tooltip {
+    background: $white;
+    border-color: $border-color;
+    .apexcharts-tooltip-title {
+      background: $white !important;
+      border-color: $border-color !important;
+      font-weight: 600;
+    }
+    &.apexcharts-theme-dark {
+      .apexcharts-tooltip-text-label,
+      .apexcharts-tooltip-text-value {
+        color: $white;
+      }
+    }
+  }
+  .apexcharts-xaxistooltip,
+  .apexcharts-yaxistooltip {
+    background: $body-bg;
+    border-color: $border-color;
+    // &:after,
+    // &:before {
+    //   border-left-color: $body-bg;
+    // }
+  }
+  .apexcharts-xaxistooltip-bottom {
+    &:before {
+      border-bottom-color: $border-color;
+    }
+    &::after {
+      border-bottom-color: $body-bg;
+    }
+  }
+  .apexcharts-xaxistooltip-top {
+    &:before {
+      border-top-color: $border-color;
+    }
+    &::after {
+      border-top-color: $body-bg;
+    }
+  }
+  .apexcharts-yaxistooltip-left {
+    &:before {
+      border-left-color: $border-color;
+    }
+    &:after {
+      border-left-color: $body-bg;
+    }
+  }
+  .apexcharts-yaxistooltip-right {
+    &:before {
+      border-right-color: $border-color;
+    }
+    &:after {
+      border-right-color: $body-bg;
+    }
+  }
+  .apexcharts-text,
+  .apexcharts-tooltip-text,
+  .apexcharts-datalabel-label,
+  .apexcharts-datalabel {
+    font-family: $font-family-base !important;
+    fill: $body-color;
+    font-weight: 400;
+    filter: none;
+  }
+
+  .apexcharts-pie-label {
+    fill: white;
+    filter: none;
+  }
+
+  .apexcharts-pie {
+    .apexcharts-pie-series .apexcharts-pie-area {
+      stroke-width: 0;
+    }
+    .apexcharts-datalabel-label,
+    .apexcharts-datalabel-value {
+      font-size: 1.5rem;
+    }
+  }
+
+  .apexcharts-marker {
+    box-shadow: none;
+  }
+  .apexcharts-legend-series {
+    & + .apexcharts-legend-series {
+      margin-top: 0.625rem;
+    }
+    .apexcharts-legend-text {
+      margin-left: 0.5rem;
+      color: $body-color !important;
+      font-size: 1rem !important;
+    }
+  }
+  .apexcharts-xcrosshairs,
+  .apexcharts-ycrosshairs,
+  .apexcharts-gridline {
+    stroke: $border-color;
+  }
+}
+.apexcharts-legend.position-bottom {
+  bottom: 3rem;
+}
+
+.dark-layout {
+  .apexcharts-canvas {
+    .apexcharts-xaxis-tick,
+    line {
+      stroke: $theme-dark-border-color;
+    }
+    .apexcharts-heatmap {
+      .apexcharts-heatmap-rect {
+        stroke: $theme-dark-border-color;
+      }
+    }
+    .apexcharts-radialbar {
+      .apexcharts-radialbar-track .apexcharts-radialbar-area {
+        stroke: $theme-dark-body-bg;
+      }
+    }
+    .apexcharts-radar-series {
+      polygon {
+        fill: $theme-dark-body-bg;
+        stroke: $theme-dark-border-color;
+      }
+    }
+    .apexcharts-datalabels-group {
+      .apexcharts-datalabel-value {
+        fill: $white;
+      }
+    }
+    .apexcharts-tooltip {
+      background: $theme-dark-card-bg;
+      border-color: $theme-dark-border-color;
+      .apexcharts-tooltip-title {
+        background: $theme-dark-card-bg !important;
+        border-color: $theme-dark-border-color !important;
+        color: $white;
+      }
+      .apexcharts-tooltip-text-label,
+      .apexcharts-tooltip-text-value {
+        color: $white;
+      }
+    }
+    .apexcharts-xaxistooltip-bottom {
+      &:before {
+        border-bottom-color: $theme-dark-border-color;
+      }
+      &::after {
+        border-bottom-color: $theme-dark-body-bg;
+      }
+    }
+    .apexcharts-xaxistooltip-top {
+      &:before {
+        border-top-color: $theme-dark-border-color;
+      }
+      &::after {
+        border-top-color: $theme-dark-body-bg;
+      }
+    }
+    .apexcharts-yaxistooltip-left {
+      &:before {
+        border-left-color: $theme-dark-border-color;
+      }
+      &:after {
+        border-left-color: $theme-dark-body-bg;
+      }
+    }
+    .apexcharts-yaxistooltip-right {
+      &:before {
+        border-right-color: $theme-dark-border-color;
+      }
+      &:after {
+        border-right-color: $theme-dark-body-bg;
+      }
+    }
+    .apexcharts-xaxistooltip,
+    .apexcharts-yaxistooltip {
+      background: $theme-dark-body-bg;
+      border-color: $theme-dark-border-color;
+      .apexcharts-xaxistooltip-text,
+      .apexcharts-yaxistooltip-text {
+        color: $white;
+      }
+    }
+    .apexcharts-xaxistooltip {
+      .apexcharts-xaxistooltip-text {
+        color: $white;
+      }
+    }
+    .apexcharts-yaxis-label,
+    .apexcharts-xaxis-label,
+    .apexcharts-tooltip-text,
+    .apexcharts-datalabel-label {
+      fill: $theme-dark-body-color;
+    }
+    .apexcharts-marker {
+      stroke: $theme-dark-border-color;
+    }
+    .apexcharts-legend-series {
+      .apexcharts-legend-text {
+        color: $theme-dark-body-color !important;
+      }
+    }
+    .apexcharts-xcrosshairs,
+    .apexcharts-ycrosshairs,
+    .apexcharts-gridline {
+      stroke: $theme-dark-border-color;
+    }
+  }
+}

resources/scss/base/plugins/extensions/ext-component-context-menu.scss

@@ -0,0 +1,101 @@
+@import '../../bootstrap-extended/include'; // Bootstrap includes
+@import '../../components/include'; // Components includes
+
+/********* CONTEXT MENU *********/
+
+.context-menu-list {
+  margin: 0;
+  padding: $dropdown-padding-y 0;
+  border-radius: $dropdown-border-radius;
+  border: $dropdown-border-width solid $dropdown-border-color;
+  box-shadow: $dropdown-box-shadow;
+  min-width: $dropdown-min-width;
+
+  .context-menu-item {
+    padding: $dropdown-item-padding-y $dropdown-item-padding-x;
+    color: $dropdown-color;
+
+    &.context-menu-submenu:after {
+      border-color: transparent transparent transparent $dropdown-color;
+    }
+
+    &.context-menu-hover,
+    &:hover,
+    &:focus {
+      background-color: $dropdown-link-hover-bg !important;
+      color: $primary;
+
+      &.context-menu-submenu:after {
+        border-color: transparent transparent transparent $primary !important;
+      }
+    }
+
+    &:focus {
+      outline: 0;
+    }
+  }
+}
+
+// Dark Layout
+.dark-layout {
+  .context-menu-list {
+    background-color: $theme-dark-body-bg;
+    border-color: $theme-dark-border-color;
+
+    .context-menu-item {
+      background-color: $theme-dark-body-bg;
+
+      span {
+        color: $theme-dark-body-color;
+      }
+
+      &.context-menu-hover {
+        > span {
+          color: $primary;
+        }
+      }
+
+      &.context-menu-submenu:after {
+        border-color: transparent transparent transparent $theme-dark-body-color;
+      }
+    }
+  }
+}
+
+// RTL
+[data-textdirection='rtl'] {
+  .context-menu-list {
+    z-index: 1031 !important;
+
+    .context-menu-item {
+      &.context-menu-submenu:after {
+        transform: rotate(180deg);
+        top: 1.2rem;
+        right: 1rem;
+        left: auto;
+        border-color: transparent $dropdown-color transparent transparent;
+      }
+
+      &.context-menu-hover {
+        &.context-menu-submenu:after {
+          border-color: transparent $primary transparent transparent !important;
+        }
+      }
+
+      > .context-menu-list {
+        left: 100%;
+        margin-left: 0;
+      }
+    }
+  }
+
+  .dark-layout {
+    .context-menu-list {
+      .context-menu-item {
+        &.context-menu-submenu:after {
+          border-color: transparent $theme-dark-body-color transparent transparent;
+        }
+      }
+    }
+  }
+}

resources/scss/base/plugins/extensions/ext-component-drag-drop.scss

@@ -0,0 +1,55 @@
+@import '../../bootstrap-extended/include'; // Bootstrap includes
+@import '../../components/include'; // Components includes
+
+// draggable cursor - grab
+.draggable {
+  cursor: grab;
+  .gu-unselectable & {
+    cursor: grabbing;
+  }
+}
+
+// For Multi List
+#multiple-list-group-a,
+#multiple-list-group-b {
+  min-height: 5.714rem;
+}
+
+// For Handle
+#dd-with-handle {
+  .list-group {
+    min-height: 5.714rem;
+    .handle {
+      padding: 0 5px;
+      margin-right: 5px;
+      background-color: rgba($black, 0.1);
+      cursor: move;
+      font-size: 1.2rem;
+    }
+  }
+}
+.gu-mirror {
+  .card {
+    margin: 0 1rem;
+  }
+  .handle {
+    padding: 0 5px;
+    margin-right: 5px;
+    background-color: rgba($black, 0.1);
+    cursor: move;
+    font-size: 1.2rem;
+  }
+}
+
+// Dak Layout
+.dark-layout {
+  // Drag & drop moving element
+  .gu-mirror {
+    color: $theme-dark-body-color;
+    &:not(.badge):not([class*='col-']) {
+      background-color: $theme-dark-card-bg;
+      border-color: $theme-dark-border-color;
+      box-shadow: $theme-dark-box-shadow;
+    }
+  }
+}

resources/scss/base/plugins/extensions/ext-component-media-player.scss

@@ -0,0 +1,21 @@
+// ================================================================================================
+//  File Name: ext-component-media-player.scss
+//  Description: Media Player SCSS.
+//  ----------------------------------------------------------------------------------------------
+//  Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
+//  Author: PIXINVENT
+//  Author URL: http://www.themeforest.net/user/pixinvent
+// ================================================================================================
+
+// to remove outline on focus
+.audio-player {
+  &:focus {
+    outline: 0;
+  }
+}
+.plyr__controls {
+  justify-content: flex-start;
+}
+.plyr__progress {
+  flex-grow: 1;
+}

resources/scss/base/plugins/extensions/ext-component-ratings.scss

@@ -0,0 +1,57 @@
+@import '../../bootstrap-extended/include'; // Bootstrap includes
+@import '../../components/include'; // Components includes
+
+.jq-ry-container:not(.multi-color-ratings) {
+  .jq-ry-normal-group {
+    i,
+    svg {
+      fill: $gray-100;
+    }
+  }
+  .jq-ry-rated-group {
+    i,
+    svg {
+      fill: $warning;
+    }
+  }
+}
+
+// Dark Layout
+.dark-layout {
+  .jq-ry-container:not(.multi-color-ratings) {
+    .jq-ry-normal-group {
+      i,
+      svg {
+        fill: $theme-dark-text-muted-color;
+      }
+    }
+  }
+}
+
+// RTL
+[data-textdirection='rtl'] {
+  .jq-ry-container:not(.multi-color-ratings) {
+    .jq-ry-normal-group {
+      i,
+      svg {
+        fill: $warning;
+      }
+    }
+    .jq-ry-rated-group {
+      i,
+      svg {
+        fill: $gray-100;
+      }
+    }
+  }
+  .dark-layout {
+    .jq-ry-container:not(.multi-color-ratings) {
+      .jq-ry-rated-group {
+        i,
+        svg {
+          fill: $theme-dark-text-muted-color;
+        }
+      }
+    }
+  }
+}

resources/scss/base/plugins/extensions/ext-component-sliders.scss

@@ -0,0 +1,145 @@
+@import '../../bootstrap-extended/include'; // Bootstrap includes
+@import '../../components/include'; // Components includes
+
+$slider_width: 6px;
+$handle-size: 1rem;
+
+.noUi-target {
+  background-color: rgba($primary, 0.12);
+  border-width: 0;
+  box-shadow: none;
+  border-radius: 1rem;
+  &.noUi-connect {
+    box-shadow: none;
+  }
+}
+
+// horizontal slider and it's sizes
+.noUi-horizontal {
+  height: $slider_width;
+  .noUi-handle {
+    width: $handle-size;
+    height: $handle-size;
+    cursor: pointer;
+    right: -($handle-size - ($handle-size/2));
+    top: -4px;
+  }
+  .noUi-tooltip {
+    bottom: 135% !important;
+  }
+}
+// pips, marker and value
+.noUi-pips {
+  color: $text-muted;
+}
+.noUi-marker {
+  background: $border-color;
+}
+.noUi-value {
+  font-size: 0.857rem;
+}
+.noUi-marker-horizontal.noUi-marker,
+.noUi-marker-horizontal.noUi-marker-large {
+  height: 8px;
+}
+
+// slider handle styles
+.noUi-handle {
+  box-shadow: none;
+  border: none;
+
+  &:after,
+  &:before {
+    display: none;
+  }
+  border-radius: 50%;
+  background: $white;
+  border: 2px solid $primary;
+}
+
+// default selected slide area style
+.noUi-connect {
+  background: $primary;
+  box-shadow: none;
+}
+
+// Tooltip style
+.noUi-tooltip {
+  transform: translate(-10%, -50%);
+  font-size: 0.857rem;
+  border: none;
+  color: $body-color;
+  background-color: $body-bg;
+  padding: 0.1718rem 0.35rem;
+  font-weight: $font-weight-bold;
+}
+
+// noUi Vertical customization
+.noUi-vertical {
+  display: inline-block;
+  width: $slider_width;
+
+  .noUi-origin {
+    right: auto;
+  }
+
+  .noUi-handle {
+    width: 1rem;
+    height: 1rem;
+    top: -0.375rem;
+    left: -0.3rem;
+  }
+  .noUi-tooltip {
+    right: 135% !important;
+  }
+}
+
+// for example value of noUI Hover
+.hover_val {
+  font: 400 12px Arial;
+  color: $body-color;
+  display: block;
+  margin: 15px 0;
+}
+
+// to remove outline on focus
+.noUi-handle:focus {
+  outline: 0;
+}
+
+// IE SPECIFIC FOR SLIDER WITH INPUT
+_:-ms-lang(x),
+.slider-select {
+  flex: 0 0 10%;
+  max-width: 10%;
+}
+
+// Dark Layout
+// -------------
+.dark-layout {
+  .noUi-handle {
+    background-color: $theme-dark-card-bg;
+  }
+  .noUi-tooltip {
+    background-color: $theme-dark-body-bg;
+    color: $theme-dark-body-color;
+  }
+  .noUi-pips,
+  .noUi-value {
+    color: $theme-dark-body-color;
+  }
+  .noUi-marker {
+    background: $theme-dark-border-color;
+  }
+}
+
+// RTL
+// -------------
+[data-textdirection='rtl'] {
+  .noUi-txt-dir-rtl.noUi-horizontal .noUi-origin {
+    right: auto;
+  }
+  .noUi-txt-dir-rtl.noUi-horizontal .noUi-handle {
+    left: -3px;
+  }
+}

resources/scss/base/plugins/extensions/ext-component-sweet-alerts.scss

@@ -0,0 +1,132 @@
+@import '../../bootstrap-extended/include'; // Bootstrap includes
+@import '../../components/include'; // Components includes
+
+.swal2-container {
+  .swal2-popup {
+    border-radius: $card-border-radius;
+    padding-bottom: 1.5rem;
+
+    // close button
+    .swal2-close:focus {
+      outline: none;
+      box-shadow: none;
+    }
+
+    // content
+    .swal2-content {
+      color: $body-color;
+    }
+
+    // header styling
+    .swal2-title {
+      font-size: $h3-font-size;
+      font-weight: $headings-font-family;
+      color: $headings-color;
+    }
+
+    // remove box-shadow on focus of buttons
+    button.swal2-confirm:focus {
+      box-shadow: none;
+    }
+
+    // input
+    input.swal2-input {
+      height: $input-height;
+      font-size: $font-size-base;
+      padding: $input-padding-y $input-padding-x;
+      color: $body-color;
+      border-color: $input-border-color;
+      border-radius: $border-radius;
+      line-height: $line-height-base;
+      &:focus {
+        border-color: $primary !important;
+        box-shadow: $input-focus-box-shadow;
+      }
+    }
+
+    // steps
+    .swal2-progress-steps {
+      .swal2-progress-step {
+        background-color: $primary;
+        &.swal2-active-progress-step {
+          ~ .swal2-progress-step-line,
+          ~ .swal2-progress-step {
+            background-color: tint-color($primary, 15%);
+          }
+        }
+      }
+      .swal2-progress-step-line {
+        background-color: $primary;
+      }
+    }
+
+    // pre code
+    pre {
+      min-height: 1.35rem;
+      margin-top: 0.5rem;
+    }
+
+    // footer
+    .swal2-footer {
+      border-color: $border-color;
+      color: $body-color;
+    }
+  }
+}
+
+// Dark Layout
+.dark-layout {
+  .swal2-container {
+    .swal2-popup .swal2-title {
+      color: $theme-dark-headings-color;
+    }
+
+    .swal2-modal {
+      background-color: $theme-dark-card-bg;
+
+      .swal2-header {
+        .swal2-title {
+          color: $theme-dark-headings-color;
+        }
+
+        .swal2-icon-text {
+          color: inherit;
+        }
+
+        .swal2-success-circular-line-left,
+        .swal2-success-circular-line-right,
+        .swal2-success-fix,
+        .swal2-animate-success-icon {
+          background-color: $theme-dark-card-bg !important;
+        }
+      }
+
+      input.swal2-input {
+        border-color: $theme-dark-border-color;
+        color: $theme-dark-body-color;
+      }
+      .swal2-content,
+      .swal2-html-container {
+        color: $theme-dark-body-color;
+      }
+
+      pre,
+      code {
+        color: $theme-dark-body-color;
+      }
+      .swal2-input {
+        background-color: $theme-dark-card-bg;
+      }
+
+      // footer
+      .swal2-footer {
+        border-color: $theme-dark-border-color;
+        color: $theme-dark-body-color;
+      }
+    }
+    .swal2-validation-message {
+      background-color: $theme-dark-body-bg;
+      color: $theme-dark-body-color;
+    }
+  }
+}

resources/scss/base/plugins/extensions/ext-component-swiper.scss

@@ -0,0 +1,367 @@
+/*=========================================================================================
+    File Name: ext-component-swiper.scss
+    Description: swiper plugin scss.
+    ----------------------------------------------------------------------------------------
+    Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
+    Author: PIXINVENT
+    Author URL: http://www.themeforest.net/user/pixinvent
+==========================================================================================*/
+
+@import '../../bootstrap-extended/include'; // Bootstrap includes
+@import '../../components/include'; // Components includes
+
+/* Swiper css */
+/* ---------- */
+/* swiper slide shadow */
+.swiper-container {
+  .swiper-shadow {
+    box-shadow: 2px 8px 10px 0 rgba(25, 42, 70, 0.13) !important;
+  }
+}
+
+// swiper pagination
+.swiper-pagination {
+  // bullet pagination
+  .swiper-pagination-bullet {
+    &:focus {
+      outline: none;
+    }
+    &.swiper-pagination-bullet-active {
+      background-color: $primary;
+    }
+  }
+
+  // progress bar pagination
+  &.swiper-pagination-progressbar {
+    .swiper-pagination-progressbar-fill {
+      background-color: $primary;
+    }
+  }
+}
+
+// centered slides option-1
+.swiper-centered-slides {
+  &.swiper-container {
+    .swiper-slide {
+      text-align: center;
+      font-weight: $headings-font-weight;
+      background-color: $white;
+      height: auto;
+      width: auto !important;
+      padding: 2rem 5.5rem;
+      cursor: pointer;
+
+      &.swiper-slide-active {
+        border: 2px solid $primary;
+
+        i,
+        svg {
+          color: $primary;
+        }
+      }
+    }
+  }
+  .swiper-button-next {
+    &:after {
+      background-image: url(str-replace(str-replace($chevron-right, 'currentColor', $white), '#', '%23'));
+    }
+  }
+  .swiper-button-prev {
+    &:after {
+      background-image: url(str-replace(str-replace($chevron-left, 'currentColor', $white), '#', '%23'));
+    }
+  }
+
+  .swiper-button-next,
+  .swiper-button-prev {
+    height: 40px !important;
+    width: 40px !important;
+
+    &:after {
+      border-radius: 50%;
+      background-color: $primary;
+      box-shadow: 0 2px 4px 0 rgba($black, 0.5) !important;
+      background-size: 24px !important;
+      height: 40px !important;
+      width: 40px !important;
+    }
+  }
+
+  // For RTL
+  &.swiper-container-rtl {
+    .swiper-button-next {
+      &:after {
+        background-image: url(str-replace(str-replace($chevron-left, 'currentColor', $white), '#', '%23'));
+      }
+    }
+    .swiper-button-prev {
+      &:after {
+        background-image: url(str-replace(str-replace($chevron-right, 'currentColor', $white), '#', '%23'));
+      }
+    }
+  }
+}
+
+// centered slides option-2
+.swiper-centered-slides-2 {
+  &.swiper-container {
+    .swiper-slide {
+      font-weight: $headings-font-weight;
+      background-color: $swiper-bg;
+      height: auto;
+      width: auto !important;
+      cursor: pointer;
+
+      &.swiper-slide-active {
+        color: $white;
+        background-color: $primary !important;
+        box-shadow: 0 3px 6px 0 rgba($primary, 0.5) !important;
+      }
+    }
+  }
+}
+
+/* cube effect */
+.swiper-cube-effect {
+  &.swiper-container {
+    width: 300px;
+    left: 50%;
+    margin-left: -150px;
+    margin-top: -12px;
+  }
+}
+
+/* swiper coverflow slide width */
+.swiper-coverflow {
+  &.swiper-container {
+    .swiper-slide {
+      width: 300px;
+    }
+  }
+}
+
+.gallery-thumbs {
+  padding: 10px 0;
+  background: $black;
+
+  .swiper-slide {
+    opacity: 0.4;
+  }
+
+  .swiper-slide-thumb-active {
+    opacity: 1;
+  }
+}
+
+// parallax
+.swiper-parallax {
+  .swiper-slide {
+    padding: 2.67rem 4rem;
+
+    .title {
+      font-size: $h5-font-size;
+      padding: 0.5rem 0;
+    }
+
+    .text {
+      font-size: $font-size-sm;
+    }
+  }
+
+  .parallax-bg {
+    position: absolute;
+    width: 130%;
+  }
+}
+
+.swiper-virtual {
+  &.swiper-container {
+    height: 300px;
+
+    .swiper-slide {
+      /* virtual slides  */
+      font-size: $h3-font-size;
+      background-color: $kbd-bg;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+}
+
+//navigation button custom icons
+.swiper-button-prev,
+.swiper-button-next,
+.swiper-container-rtl .swiper-button-prev,
+.swiper-container-rtl .swiper-button-next {
+  background-image: none;
+  color: $white;
+  width: 38px;
+  font-size: $h1-font-size;
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.swiper-button-prev {
+  &:after {
+    background-image: url(str-replace(str-replace($chevron-left, 'currentColor', $primary), '#', '%23'));
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 44px;
+    color: $body-color;
+    width: 44px;
+    height: 44px;
+    content: '';
+    padding-right: 1px;
+  }
+}
+
+.swiper-button-next {
+  &:after {
+    background-image: url(str-replace(str-replace($chevron-right, 'currentColor', $primary), '#', '%23'));
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 44px;
+    color: $body-color;
+    width: 44px;
+    height: 44px;
+    content: '';
+    padding-right: 2px;
+  }
+}
+
+.swiper-container-rtl {
+  .swiper-button-prev {
+    &:after {
+      background-image: url(str-replace(str-replace($chevron-right, 'currentColor', $primary), '#', '%23'));
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: 44px;
+      color: $body-color;
+      width: 44px;
+      height: 44px;
+      content: '';
+    }
+  }
+
+  .swiper-button-next {
+    &:after {
+      background-image: url(str-replace(str-replace($chevron-left, 'currentColor', $primary), '#', '%23'));
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: 44px;
+      color: $body-color;
+      width: 44px;
+      height: 44px;
+      content: '';
+    }
+  }
+}
+
+// Media query for medium screen
+@media only screen and (max-width: 768px) {
+  //navigation button custom boxicons
+  .swiper-button-prev {
+    font-size: $h4-font-size;
+    top: 55%;
+    &:after {
+      height: 28px;
+      width: 28px;
+      background-size: 24px;
+    }
+  }
+
+  .swiper-button-next {
+    font-size: $h4-font-size;
+    top: 55%;
+    &:after {
+      background-size: 24px;
+    }
+  }
+  .swiper-centered-slides {
+    .swiper-button-next,
+    .swiper-button-prev {
+      &:after {
+        height: 28px;
+        width: 28px;
+        background-size: 18px;
+      }
+    }
+  }
+  // parallax
+  .swiper-parallax {
+    .swiper-slide {
+      padding: 1rem 1.2rem;
+    }
+
+    img {
+      height: 100% !important;
+    }
+  }
+}
+
+// Media query for small screen
+@media only screen and (max-width: 576px) {
+  // centered slides option-1
+  .swiper-centered-slides {
+    &.swiper-container {
+      .swiper-slide {
+        padding: 1.6rem 2.5rem;
+
+        i,
+        svg {
+          height: $h5-font-size !important;
+          width: $h5-font-size !important;
+          font-size: $h5-font-size !important;
+        }
+      }
+    }
+  }
+
+  // cube effect
+  .swiper-cube-effect {
+    &.swiper-container {
+      width: 150px;
+      left: 70%;
+    }
+  }
+
+  // parallax
+  .swiper-parallax {
+    .swiper-slide {
+      padding: 1rem 1.3rem;
+    }
+  }
+
+  // virtual slides
+  .swiper-virtual {
+    &.swiper-container {
+      .swiper-slide {
+        font-size: $font-size-base;
+      }
+    }
+  }
+}
+
+// Dark Layout
+.dark-layout {
+  .swiper-container {
+    &:not(.swiper-parallax) {
+      .swiper-slide {
+        background-color: $theme-dark-body-bg;
+      }
+    }
+    &.swiper-centered-slides {
+      .swiper-slide {
+        background-color: $theme-dark-card-bg;
+      }
+    }
+    &.swiper-parallax {
+      .swiper-slide * {
+        color: $body-color;
+      }
+    }
+  }
+}

resources/scss/base/plugins/extensions/ext-component-toastr.scss

@@ -0,0 +1,242 @@
+@import '../../bootstrap-extended/include'; // Bootstrap includes
+@import '../../components/include'; // Components includes
+
+// Toast container opacity
+#toast-container > div {
+  opacity: 1;
+  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
+  filter: alpha(opacity=100);
+  max-width: none;
+  border-radius: $toast-border-radius;
+}
+
+// Toast container hover shadow
+#toast-container > div,
+#toast-container > div:hover {
+  box-shadow: $toast-box-shadow;
+}
+
+#toast-container > .toast {
+  background-image: none !important;
+}
+// Toast colors
+.toast {
+  background-color: $white;
+  color: $body-color !important;
+  .toast-close-button {
+    color: $body-color;
+    font-size: 1.75rem;
+    font-weight: $font-weight-normal;
+    top: 0;
+    right: 0;
+    text-shadow: none;
+
+    &:focus {
+      outline: none;
+    }
+  }
+  .toast-title {
+    font-size: $font-size-base;
+    font-weight: $font-weight-bolder;
+    line-height: 1.75;
+  }
+  .toast-progress {
+    opacity: 1;
+  }
+  &:before {
+    content: '';
+    height: 24px;
+    width: 24px;
+    border-radius: 50%;
+    color: $white;
+    position: absolute;
+    left: 1.25rem;
+    background-size: $font-size-base;
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+}
+
+// we are using only few colors in toast so not adding in palette.scss
+// plugin class name 'error' is also differ then ours so not useful to add in palette
+.toast-success {
+  .toast-title {
+    color: $success;
+  }
+  .toast-progress {
+    background-color: $success;
+  }
+  &:before {
+    background-color: $success;
+    background-image: url(str-replace(str-replace($check, 'currentColor', $white), '#', '%23'));
+  }
+}
+.toast-error {
+  .toast-title {
+    color: $danger;
+  }
+  .toast-progress {
+    background-color: $danger;
+  }
+  &:before {
+    background-color: $danger;
+    background-image: url(str-replace(str-replace($remove, 'currentColor', $white), '#', '%23'));
+  }
+}
+.toast-info {
+  .toast-title {
+    color: $info;
+  }
+  .toast-progress {
+    background-color: $info;
+  }
+  &:before {
+    background-color: $info;
+    background-image: url(str-replace(str-replace($infoIcon, 'currentColor', $white), '#', '%23'));
+  }
+}
+.toast-warning {
+  .toast-title {
+    color: $warning;
+  }
+  .toast-progress {
+    background-color: $warning;
+  }
+  &:before {
+    background-color: $warning;
+    background-image: url(str-replace(str-replace($warningIcon, 'currentColor', $white), '#', '%23'));
+  }
+}
+
+// position alignments
+.toast-top-left {
+  top: 1.3rem;
+  left: $content-padding;
+}
+.toast-top-right {
+  top: 1.3rem;
+  right: $content-padding;
+}
+.toast-top-center,
+.toast-top-full-width {
+  top: 1.3rem;
+  width: 100% !important;
+}
+.toast-bottom-left {
+  bottom: 1.3rem;
+  left: $content-padding;
+}
+.toast-bottom-right {
+  bottom: 1.3rem;
+  right: $content-padding;
+}
+.toast-bottom-center,
+.toast-bottom-full-width {
+  bottom: 1.3rem;
+  width: 100% !important;
+}
+
+// Media query
+
+@media (max-width: 480px) and (min-width: 241px) {
+  #toast-container > .toast {
+    &:after {
+      top: 0.95rem;
+    }
+    .toast-close-button {
+      top: 0;
+      right: -1px;
+    }
+  }
+  #toast-container > div {
+    width: 20rem;
+  }
+  .toast-top-left {
+    left: 1rem;
+    //   left: 0;
+  }
+  #toast-container {
+    &.toast-top-center,
+    &.toast-bottom-center {
+      right: 1rem;
+      > div {
+        width: 20rem !important;
+      }
+    }
+  }
+  .toast-top-full-width,
+  .toast-bottom-full-width {
+    right: 0;
+    left: 0;
+    width: 93%;
+    > div {
+      width: 100%;
+    }
+  }
+  .toast-bottom-left {
+    left: 1rem;
+    bottom: 0.75rem;
+  }
+  .toast-bottom-right {
+    right: 2.25rem;
+    bottom: 0.75rem;
+  }
+  .toast-bottom-center,
+  .toast-bottom-full-width {
+    bottom: 0.75rem;
+  }
+  [data-textdirection='rtl'] {
+    #toast-container > div {
+      padding-right: 8px;
+    }
+  }
+}
+
+// Toastr Dark Layout
+.dark-layout {
+  #toast-container > div,
+  #toast-container > div:hover {
+    box-shadow: $theme-dark-box-shadow;
+  }
+  #toast-container {
+    .toast {
+      background-color: $theme-dark-card-bg;
+      color: $theme-dark-body-color !important;
+      .toast-close-button {
+        color: $theme-dark-body-color;
+      }
+    }
+  }
+}
+
+[data-textdirection='rtl'] {
+  .toast .toast-close-button {
+    @include media-breakpoint-down(sm) {
+      top: 0.55rem !important;
+      right: 0.5rem !important;
+    }
+  }
+  .toast-top-left {
+    left: 1rem;
+    right: auto;
+  }
+  .toast-top-right {
+    right: 3rem;
+    left: auto;
+  }
+  .toast-bottom-left {
+    left: 1em;
+    right: auto;
+  }
+  .toast-bottom-right {
+    right: 3rem;
+    left: auto;
+  }
+  .toast-top-full-width,
+  .toast-bottom-full-width {
+    &#toast-container > div {
+      left: 0;
+      right: 0;
+    }
+  }
+}

resources/scss/base/plugins/extensions/ext-component-tour.scss

@@ -0,0 +1,80 @@
+@import '../../bootstrap-extended/include'; // Bootstrap includes
+@import '../../components/include'; // Components includes
+
+.shepherd-element {
+  border-radius: $border-radius;
+  width: 350px;
+  &[data-popper-placement='bottom'] {
+    margin-top: 1rem !important;
+    .shepherd-arrow:before {
+      background-color: $primary !important;
+    }
+  }
+  &[data-popper-placement='top'] {
+    margin-bottom: 1rem !important;
+  }
+  &[data-popper-placement='left'] {
+    margin-right: 1rem !important;
+  }
+  &[data-popper-placement='right'] {
+    margin-left: 1rem !important;
+  }
+
+  .shepherd-content {
+    border-radius: $border-radius;
+    // header
+    .shepherd-header {
+      background-color: $primary;
+      padding: 0.38rem 1.2rem;
+      border-radius: $border-radius $border-radius 0 0;
+      .shepherd-title {
+        color: $white;
+        font-weight: 500;
+        font-size: 1.1rem;
+      }
+      .shepherd-cancel-icon {
+        color: $white;
+        font-size: 1.7rem;
+
+        &:focus {
+          outline: none;
+        }
+      }
+    }
+
+    // body or text
+    .shepherd-text {
+      color: $body-color;
+      padding: 0.8rem 1.2rem;
+    }
+
+    // footer
+    .shepherd-footer {
+      padding: 0 1.2rem 1rem;
+      justify-content: space-between;
+      .shepherd-button {
+        padding: 0.5rem 1.3rem;
+      }
+    }
+  }
+  @include media-breakpoint-down(sm) {
+    width: 300px;
+  }
+}
+
+// Dark layout
+.dark-layout {
+  .shepherd-element {
+    background-color: $theme-dark-card-bg;
+    &:not([data-popper-placement='bottom']) {
+      .shepherd-arrow:before {
+        background-color: $theme-dark-card-bg;
+      }
+    }
+    .shepherd-content {
+      .shepherd-text {
+        color: $theme-dark-body-color;
+      }
+    }
+  }
+}

resources/scss/base/plugins/forms/form-file-uploader.scss

@@ -0,0 +1,109 @@
+@import '../../bootstrap-extended/include'; // Bootstrap includes
+@import '../../components/include'; // Components includes
+
+.dropzone {
+  min-height: 350px;
+  border: 2px dashed $primary;
+  background: $body-bg;
+  position: relative;
+  // dropzone message customization
+  .dz-message {
+    font-size: 2rem;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    color: #10cac7;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+  }
+
+  // dropzone message icon
+  .dz-message:before {
+    content: '';
+    background-image: url(str-replace(str-replace($download, 'currentColor', $primary), '#', '%23'));
+    font-size: 80px;
+    position: absolute;
+    top: 14rem;
+    width: 80px;
+    height: 80px;
+    display: inline-block;
+    line-height: 1;
+    z-index: 2;
+    color: $primary;
+    text-indent: 0px;
+    font-weight: normal;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  // for preview of files
+  .dz-preview {
+    background: transparent !important;
+
+    .dz-error-mark,
+    .dz-success-mark {
+      z-index: 10;
+    }
+
+    .dz-image {
+      border-radius: $border-radius;
+    }
+    &.dz-image-preview{
+      background: transparent !important;
+    }
+
+    .dz-error-message {
+      background: $danger;
+      &:after {
+        border-bottom: 6px solid $danger;
+      }
+    }
+  }
+
+  // for dropzone preview and remove icon
+  .dz-preview .dz-remove {
+    font-size: 1.1rem;
+    color: $danger;
+    line-height: 2rem;
+
+    &:before {
+      content: '';
+      background-image: url(str-replace(str-replace($remove, 'currentColor', $danger), '#', '%23'));
+      display: inline-block;
+      line-height: 1;
+      z-index: 2;
+      text-indent: 0px;
+      font-weight: normal;
+      -webkit-font-smoothing: antialiased;
+    }
+
+    &:hover {
+      text-decoration: none;
+      color: darken($danger, 10%);
+    }
+  }
+}
+
+// For Small Screen drop Logo
+@media (max-width: 576px) {
+  .dropzone {
+    .dz-message {
+      font-size: 1.5rem;
+      &:before {
+        top: 15rem;
+        width: 50px;
+        height: 50px;
+      }
+    }
+  }
+}
+
+// dark layout
+.dark-layout {
+  .dropzone {
+    background-color: lighten($theme-dark-card-bg, 3%);
+  }
+}

resources/scss/base/plugins/forms/form-number-input.scss

@@ -0,0 +1,158 @@
+@import '../../bootstrap-extended/include'; // Bootstrap includes
+@import '../../components/include'; // Components includes
+
+// Number Inputs (Touch spin)
+$bootstrap-touchspin-width: 8.4rem;
+$bootstrap-touchspin-width-lg: 9.375rem;
+$bootstrap-touchspin-width-sm: 6.25rem;
+
+$bootstrap-touchspin-btn-width: 20px;
+$bootstrap-touchspin-btn-height: 20px;
+$bootstrap-touchspin-btn-width-lg: 24px;
+$bootstrap-touchspin-btn-height-lg: 24px;
+$bootstrap-touchspin-btn-width-sm: 16px;
+$bootstrap-touchspin-btn-height-sm: 16px;
+
+/* Bootstrap Touchspin */
+
+.bootstrap-touchspin {
+  &.input-group {
+    width: $bootstrap-touchspin-width;
+    align-items: center;
+    .form-control {
+      padding: 5px;
+      height: auto;
+      border: 0;
+      background-color: $body-bg;
+      border-radius: $border-radius !important;
+      text-align: center;
+      font-weight: 500;
+      &:focus {
+        z-index: 1;
+        box-shadow: none;
+      }
+    }
+    > .input-group-btn:first-child {
+      left: 12px !important;
+      position: inherit;
+    }
+    > .input-group-btn:last-child {
+      right: 12px !important;
+      position: inherit;
+    }
+  }
+
+  .bootstrap-touchspin-injected {
+    margin: 0 !important;
+    .bootstrap-touchspin-down,
+    .bootstrap-touchspin-up {
+      padding: 0;
+      min-width: $bootstrap-touchspin-btn-width;
+      min-height: $bootstrap-touchspin-btn-width;
+      border-radius: $border-radius !important;
+      i,
+      svg {
+        height: 0.8rem;
+        width: 0.8rem;
+        font-size: 0.8rem;
+        position: relative;
+        top: -1px;
+      }
+    }
+  }
+
+  // Disabled Touchspin
+  &.disabled-touchspin {
+    .bootstrap-touchspin-down,
+    .bootstrap-touchspin-up {
+      background-color: rgba($black, 0.5) !important;
+      cursor: default;
+      opacity: 0.5;
+    }
+  }
+
+  // Touchspin Large
+  &.input-group-lg {
+    width: $bootstrap-touchspin-width-lg;
+    .touchspin {
+      &.form-control {
+        height: auto !important;
+      }
+    }
+    .bootstrap-touchspin-down,
+    .bootstrap-touchspin-up {
+      min-width: $bootstrap-touchspin-btn-width-lg;
+      min-height: $bootstrap-touchspin-btn-width-lg;
+      i,
+      svg {
+        height: 1rem;
+        width: 1rem;
+        font-size: 1rem;
+        top: 0;
+      }
+    }
+  }
+
+  // Touchspin Small
+  &.input-group-sm {
+    width: $bootstrap-touchspin-width-sm;
+    .touchspin {
+      &.form-control {
+        height: auto !important;
+      }
+    }
+    .bootstrap-touchspin-injected {
+      .bootstrap-touchspin-down,
+      .bootstrap-touchspin-up {
+        min-width: $bootstrap-touchspin-btn-width-sm;
+        min-height: $bootstrap-touchspin-btn-width-sm;
+        i,
+        svg {
+          height: 0.6rem;
+          width: 0.6rem;
+          font-size: 0.6rem;
+          top: -3px;
+        }
+      }
+    }
+  }
+}
+
+/* Number Type Input Box Scss for Touchspin - Remove arrow for firefox */
+.bootstrap-touchspin {
+  &.input-group {
+    input[type='number'] {
+      -moz-appearance: textfield;
+    }
+  }
+}
+
+// Dark layout style
+.dark-layout {
+  // number inputs[touchspin]
+  .bootstrap-touchspin {
+    &.input-group {
+      .form-control {
+        background-color: $theme-dark-body-bg;
+      }
+    }
+
+    &.disabled-touchspin {
+      .bootstrap-touchspin-injected {
+        .bootstrap-touchspin-down,
+        .bootstrap-touchspin-up,
+        .disabled-max-min {
+          background-color: $gray-600 !important;
+          opacity: 1;
+        }
+      }
+    }
+
+    .bootstrap-touchspin-injected {
+      .disabled-max-min {
+        background-color: $gray-600 !important;
+        opacity: 1;
+      }
+    }
+  }
+}

resources/scss/base/plugins/forms/form-quill-editor.scss

@@ -0,0 +1,213 @@
+@import '../../bootstrap-extended/include'; // Bootstrap includes
+@import '../../components/include'; // Components includes
+
+/* Set dropdown font-families */
+.ql-toolbar .ql-font span[data-label='Sailec Light']::before {
+  font-family: 'Sailec Light';
+}
+.ql-toolbar .ql-font span[data-label='Sofia Pro']::before {
+  font-family: 'Sofia';
+}
+.ql-toolbar .ql-font span[data-label='Slabo 27px']::before {
+  font-family: 'Slabo 27px';
+}
+.ql-toolbar .ql-font span[data-label='Roboto Slab']::before {
+  font-family: 'Roboto Slab';
+}
+.ql-toolbar .ql-font span[data-label='Inconsolata']::before {
+  font-family: 'Inconsolata';
+}
+.ql-toolbar .ql-font span[data-label='Ubuntu Mono']::before {
+  font-family: 'Ubuntu Mono';
+}
+
+/* Set content font-families */
+.ql-font-sofia {
+  font-family: 'Sofia';
+}
+.ql-font-slabo {
+  font-family: 'Slabo 27px';
+}
+.ql-font-roboto {
+  font-family: 'Roboto Slab';
+}
+.ql-font-inconsolata {
+  font-family: 'Inconsolata';
+}
+.ql-font-ubuntu {
+  font-family: 'Ubuntu Mono';
+}
+
+// Quill Editor
+.ql-toolbar {
+  border-color: $input-border-color !important;
+  .ql-formats {
+    &:focus,
+    *:focus {
+      outline: 0;
+    }
+    // button and label hover
+    .ql-picker-label,
+    button {
+      &:hover,
+      &:focus {
+        color: $primary !important;
+        .ql-stroke {
+          stroke: $primary !important;
+        }
+        .ql-fill {
+          fill: $primary !important;
+        }
+      }
+      &.ql-active {
+        color: $primary !important;
+      }
+    }
+    .ql-picker-item.ql-selected {
+      color: $primary !important;
+    }
+    // quill dropdown item hover
+    .ql-picker-options {
+      .ql-picker-item:hover {
+        color: $primary !important;
+      }
+      .ql-active {
+        color: $primary !important;
+      }
+    }
+  }
+}
+.ql-bubble {
+  .ql-picker {
+    color: $white !important;
+  }
+  // stroke options color
+  .ql-stroke {
+    stroke: $white !important;
+  }
+  // fill options color
+  .ql-fill {
+    fill: $white !important;
+  }
+}
+.ql-container {
+  border-color: $input-border-color !important;
+  font-family: $font-family-monospace;
+}
+.ql-editor {
+  a {
+    color: $primary;
+  }
+}
+// default picker options
+.ql-picker {
+  color: $headings-color !important;
+}
+// stroke options color
+.ql-stroke {
+  stroke: $headings-color !important;
+}
+.ql-active {
+  .ql-stroke {
+    stroke: $primary !important;
+  }
+  .ql-fill {
+    fill: $primary !important;
+  }
+}
+// fill options color
+.ql-fill {
+  fill: $headings-color !important;
+}
+// Border rounded for editor
+.ql-toolbar,
+.ql-container {
+  border-top-right-radius: $border-radius;
+  border-top-left-radius: $border-radius;
+}
+.ql-toolbar {
+  + .ql-container,
+  .ql-container + & {
+    // ? If container/toolbar is below container/toolbar add bottom radius
+    border-bottom-right-radius: $border-radius;
+    border-bottom-left-radius: $border-radius;
+    // ? If container/toolbar is above container/toolbar remove top radius
+    border-top-right-radius: unset;
+    border-top-left-radius: unset;
+  }
+}
+
+// Dark Layout
+.dark-layout {
+  // Quill Editor
+  .quill-toolbar,
+  .ql-toolbar {
+    background-color: $theme-dark-input-bg;
+    border-color: $theme-dark-border-color !important;
+
+    // toolbar color
+    .ql-picker {
+      color: $white !important;
+    }
+
+    .ql-stroke {
+      stroke: $white !important;
+    }
+
+    .ql-fill {
+      fill: $white !important;
+    }
+
+    // toolbar options colors
+    .ql-picker-options,
+    .ql-picker-label {
+      background-color: $theme-dark-input-bg;
+      .ql-active {
+        color: $primary !important;
+      }
+    }
+  }
+  .ql-active {
+    .ql-stroke {
+      stroke: $primary !important;
+    }
+    .ql-fill {
+      fill: $primary !important;
+    }
+  }
+  .ql-bubble {
+    .ql-toolbar {
+      background: $theme-dark-border-color;
+      border-radius: 2rem;
+    }
+  }
+
+  .ql-container {
+    border-color: $theme-dark-border-color !important;
+    background-color: $theme-dark-input-bg;
+  }
+
+  // syntax color
+  .ql-editor {
+    .ql-syntax {
+      background-color: $theme-dark-body-bg;
+    }
+
+    &.ql-blank {
+      &:before {
+        color: $theme-dark-body-color;
+      }
+    }
+  }
+}
+
+// RTL
+[data-textdirection='rtl'] {
+  .ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) {
+    i,
+    svg {
+      left: auto !important;
+      right: 0;
+    }
+  }
+}

resources/scss/base/plugins/forms/form-validation.scss

@@ -0,0 +1,33 @@
+@import '../../bootstrap-extended/include'; // Bootstrap includes
+@import '../../components/include'; // Components includes
+
+form {
+  span.error {
+    width: 100%;
+    font-size: 0.857rem;
+  }
+  .error:not(input) {
+    color: $danger;
+  }
+  input.error,
+  input.error:focus {
+    border-color: $danger !important;
+  }
+  textarea.error {
+    border-color: $danger !important;
+  }
+  .select2.error {
+    + .select2-container--classic .select2-selection--single,
+    + .select2-container--default .select2-selection--single,
+    + .select2-container--classic .select2-selection--multiple,
+    + .select2-container--default .select2-selection--multiple {
+      border-color: $danger !important;
+    }
+  }
+}
+.was-validated .form-select:invalid:not([multiple]):not([size]),
+.was-validated .form-select:invalid:not([multiple])[size='1'],
+.form-select.is-invalid:not([multiple]):not([size]),
+.form-select.is-invalid:not([multiple])[size='1'] {
+  background-position: right 1rem center, center right 2.5rem;
+}

resources/scss/base/plugins/forms/form-wizard.scss

@@ -0,0 +1,296 @@
+@import '../../bootstrap-extended/include'; // Bootstrap includes
+@import '../../components/include'; // Components includes
+
+$header-padding-y: 1.5rem;
+$header-padding-x: 1.5rem;
+$content-padding-x: 1.5rem;
+$content-padding-y: 1.5rem;
+$trigger-padding-vertical: 1rem;
+$step-box-height: 38px;
+$step-box-width: 38px;
+
+.bs-stepper {
+  background-color: $white;
+  box-shadow: $box-shadow;
+  border-radius: 0.5rem;
+
+  .bs-stepper-header {
+    padding: $header-padding-y $header-padding-x;
+    flex-wrap: wrap;
+    border-bottom: 1px solid rgba($black, 0.08);
+    margin: 0;
+    .line {
+      flex: 0;
+      min-width: auto;
+      min-height: auto;
+      background-color: transparent;
+      margin: 0;
+      padding: 0 1.75rem;
+      color: $body-color;
+      font-size: 1.5rem;
+    }
+    .step {
+      margin-bottom: .25rem;
+      margin-top: .25rem;
+      .step-trigger {
+        flex-wrap: nowrap;
+        padding: 0;
+        font-weight: normal;
+        .bs-stepper-box {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: $step-box-width;
+          height: $step-box-height;
+          padding: 0.5em 0;
+          font-weight: 500;
+          color: $gray-100;
+          background-color: rgba($gray-100, 0.12);
+          border-radius: 0.35rem;
+        }
+
+        .bs-stepper-label {
+          text-align: left;
+          margin: 0;
+          margin-top: 0.5rem;
+          margin-left: 1rem;
+
+          .bs-stepper-title {
+            display: inherit;
+            color: $body-color;
+            font-weight: 600;
+            line-height: 1rem;
+            margin-bottom: 0rem;
+          }
+
+          .bs-stepper-subtitle {
+            font-weight: 400;
+            font-size: 0.85rem;
+            color: $text-muted;
+          }
+        }
+
+        &:hover {
+          background-color: transparent;
+        }
+      }
+
+      &.active {
+        .step-trigger {
+          .bs-stepper-box {
+            background-color: $primary;
+            color: $white;
+            box-shadow: 0 3px 6px 0 rgba($primary, 0.4);
+          }
+          .bs-stepper-label {
+            .bs-stepper-title {
+              color: $primary;
+            }
+          }
+        }
+      }
+
+      &.crossed {
+        .step-trigger {
+          .bs-stepper-box {
+            background-color: rgba($color: $primary, $alpha: 0.12);
+            color: $primary !important;
+          }
+          .bs-stepper-label {
+            .bs-stepper-title {
+              color: $text-muted;
+            }
+          }
+        }
+        & + .line {
+          color: $primary;
+        }
+      }
+
+      // &:first-child {
+      //   .step-trigger {
+      //     padding-left: 0;
+      //   }
+      // }
+      // &:last-child {
+      //   .step-trigger {
+      //     padding-right: 0;
+      //   }
+      // }
+    }
+  }
+  .bs-stepper-content {
+    padding: $content-padding-y $content-padding-x;
+    .content {
+      margin-left: 0;
+
+      .content-header {
+        margin-bottom: 1rem;
+      }
+    }
+  }
+
+  &.vertical {
+    .bs-stepper-header {
+      border-right: 1px solid $border-color;
+      border-bottom: none;
+      .step {
+        .step-trigger {
+          padding: $trigger-padding-vertical 0;
+        }
+      }
+      .line {
+        display: none;
+      }
+    }
+    .bs-stepper-content {
+      width: 100%;
+      padding-top: 2.5rem;
+      .content {
+        &:not(.active) {
+          display: none;
+        }
+      }
+    }
+
+    &.wizard-icons {
+      .step {
+        text-align: center;
+      }
+    }
+  }
+
+  &.wizard-modern {
+    background-color: transparent;
+    box-shadow: none;
+    .bs-stepper-header {
+      border: none;
+    }
+    .bs-stepper-content {
+      background-color: $white;
+      border-radius: 0.5rem;
+      box-shadow: $box-shadow;
+    }
+  }
+}
+
+.horizontal-wizard,
+.vertical-wizard,
+.modern-horizontal-wizard,
+.modern-vertical-wizard {
+  margin-bottom: 2.2rem;
+}
+
+// Dark Layout
+.dark-layout {
+  .bs-stepper {
+    background-color: $theme-dark-card-bg;
+    box-shadow: $theme-dark-box-shadow;
+
+    .bs-stepper-header {
+      border-bottom: 1px solid rgba($theme-dark-border-color, 0.08);
+      .line {
+        color: $theme-dark-body-color;
+      }
+      .step {
+        .step-trigger {
+          .bs-stepper-box {
+            color: $gray-100;
+          }
+
+          .bs-stepper-label {
+            .bs-stepper-title {
+              color: $theme-dark-body-color;
+            }
+
+            .bs-stepper-subtitle {
+              color: $theme-dark-text-muted-color;
+            }
+          }
+        }
+
+        &.active {
+          .step-trigger {
+            .bs-stepper-box {
+              background-color: $primary;
+              color: $white;
+              box-shadow: 0 3px 6px 0 rgba($primary, 0.4);
+            }
+            .bs-stepper-label {
+              .bs-stepper-title {
+                color: $primary;
+              }
+            }
+          }
+        }
+
+        &.crossed {
+          .step-trigger {
+            .bs-stepper-label,
+            .bs-stepper-title {
+              color: $theme-dark-text-muted-color;
+            }
+          }
+        }
+      }
+    }
+
+    &.vertical {
+      .bs-stepper-header {
+        border-right-color: $theme-dark-border-color;
+      }
+    }
+
+    &.wizard-modern {
+      background-color: transparent;
+      box-shadow: none;
+      .bs-stepper-header {
+        border: none;
+      }
+      .bs-stepper-content {
+        background-color: $theme-dark-card-bg;
+        box-shadow: $theme-dark-box-shadow;
+      }
+    }
+  }
+}
+
+// RTl
+html[data-textdirection='rtl'] {
+  .btn-prev,
+  .btn-next {
+    display: flex;
+    i,
+    svg {
+      transform: rotate(-180deg);
+    }
+  }
+}
+
+// Media Queries
+@media (max-width: 992px) {
+  .bs-stepper {
+    .bs-stepper-header {
+      flex-direction: column;
+      align-items: flex-start;
+      .step {
+        .step-trigger {
+          padding: 0.5rem 0 !important;
+          flex-direction: row;
+        }
+      }
+      .line {
+        display: none;
+      }
+    }
+    &.vertical {
+      flex-direction: column;
+      .bs-stepper-header {
+        align-items: flex-start;
+      }
+      .bs-stepper-content {
+        padding-top: 1.5rem;
+      }
+    }
+  }
+}

resources/scss/base/plugins/forms/pickers/form-flat-pickr.scss

@@ -0,0 +1,194 @@
+@import '../../../bootstrap-extended/include'; // Bootstrap includes
+@import '../../../components/include'; // Components includes
+
+.flatpickr-calendar {
+  .flatpickr-day {
+    color: $body-color;
+    &.today {
+      border-color: $primary;
+      &:hover {
+        background: transparent;
+        color: $body-color;
+      }
+    }
+
+    &.selected,
+    &.selected:hover {
+      background: $primary;
+      color: $white;
+      border-color: $primary;
+    }
+
+    &.inRange,
+    &.inRange:hover {
+      background: lighten($color: $primary, $amount: 30%);
+      border-color: lighten($color: $primary, $amount: 30%);
+      box-shadow: -5px 0 0 lighten($color: $primary, $amount: 30%), 5px 0 0 lighten($color: $primary, $amount: 30%);
+    }
+    &.startRange,
+    &.endRange,
+    &.startRange:hover,
+    &.endRange:hover {
+      background: $primary;
+      color: $white;
+      border-color: $primary;
+    }
+
+    &.selected.startRange + .endRange:not(:nth-child(7n + 1)),
+    &.startRange.startRange + .endRange:not(:nth-child(7n + 1)),
+    &.endRange.startRange + .endRange:not(:nth-child(7n + 1)) {
+      box-shadow: -10px 0 0 $primary;
+    }
+
+    &.flatpickr-disabled,
+    &.prevMonthDay,
+    &.nextMonthDay {
+      color: $gray-300;
+    }
+
+    &:hover {
+      background: $gray-50;
+    }
+  }
+  &:after,
+  &:before {
+    display: none;
+  }
+
+  .flatpickr-months {
+    .flatpickr-prev-month,
+    .flatpickr-next-month {
+      top: -5px;
+      &:hover i,
+      &:hover svg {
+        fill: $primary;
+      }
+    }
+  }
+  .flatpickr-current-month span.cur-month {
+    font-weight: 300;
+  }
+}
+.flatpickr-time {
+  height: $input-height;
+}
+
+// Time picker hover & focus bg color
+.flatpickr-time input:hover,
+.flatpickr-time .flatpickr-am-pm:hover,
+.flatpickr-time input:focus,
+.flatpickr-time .flatpickr-am-pm:focus {
+  background: $white;
+}
+
+//Dark layout
+.dark-layout {
+  .flatpickr-calendar {
+    background: $theme-dark-body-bg;
+    border-color: $theme-dark-body-bg;
+    box-shadow: none;
+    .flatpickr-months {
+      i,
+      svg {
+        fill: $theme-dark-body-color;
+      }
+    }
+    .flatpickr-month {
+      color: $theme-dark-body-color;
+    }
+    .flatpickr-weekwrapper .flatpickr-weeks {
+      box-shadow: 1px 0 0 $theme-dark-border-color;
+    }
+    .flatpickr-weekday {
+      color: $theme-dark-body-color;
+    }
+
+    .flatpickr-day {
+      &,
+      &.today:hover {
+        color: $theme-dark-body-color;
+      }
+      &.selected {
+        color: $white;
+      }
+
+      &.prevMonthDay,
+      &.nextMonthDay,
+      &.flatpickr-disabled {
+        color: $gray-700 !important;
+      }
+      &.inRange,
+      &.inRange:hover {
+        background: $theme-dark-card-bg;
+        border-color: $theme-dark-card-bg;
+        box-shadow: -5px 0 0 $theme-dark-card-bg, 5px 0 0 $theme-dark-card-bg;
+      }
+      &:hover:not(.selected):not(.today):not(.startRange):not(.endRange) {
+        color: $theme-dark-body-color;
+        border-color: $theme-dark-card-bg;
+      }
+    }
+
+    .flatpickr-days .flatpickr-day {
+      &:hover:not(.selected):not(.today):not(.startRange):not(.endRange) {
+        background: $theme-dark-card-bg;
+      }
+    }
+
+    .flatpickr-time {
+      border-color: $theme-dark-body-bg !important;
+
+      .numInput,
+      .flatpickr-am-pm {
+        color: $theme-dark-body-color;
+        &:hover {
+          background: $theme-dark-body-bg;
+        }
+      }
+
+      .arrowUp:after {
+        border-bottom-color: $theme-dark-body-color;
+      }
+      .arrowDown:after {
+        border-top-color: $theme-dark-body-color;
+      }
+    }
+  }
+  // Time picker hover & focus bg color
+  .flatpickr-time input:hover,
+  .flatpickr-time .flatpickr-am-pm:hover,
+  .flatpickr-time input:focus,
+  .flatpickr-time .flatpickr-am-pm:focus {
+    background: $theme-dark-body-bg;
+  }
+}
+
+// ? Added bg color for flatpickr input only as it has default readonly attribute
+.flatpickr-input[readonly],
+.flatpickr-input ~ .form-control[readonly],
+.flatpickr-human-friendly[readonly] {
+  background-color: inherit;
+  opacity: 1 !important;
+}
+
+.flatpickr-weekdays {
+  margin-top: 8px;
+}
+
+.flatpickr-current-month {
+  .flatpickr-monthDropdown-months {
+    -webkit-appearance: none;
+  }
+
+  .flatpickr-monthDropdown-months,
+  .numInputWrapper {
+    font-size: 1.1rem;
+    border-radius: 4px;
+    padding: 2px;
+    transition: all 0.15s ease-out;
+
+    span {
+      display: none;
+    }
+  }
+}

resources/scss/base/plugins/forms/pickers/form-pickadate.scss

@@ -0,0 +1,171 @@
+@import '../../../bootstrap-extended/include'; // Bootstrap includes
+@import '../../../components/include'; // Components includes
+
+// remove picker outline
+.picker__holder {
+  outline: none;
+}
+// Updated picker  color as per theme color
+.picker__day--today:before,
+.picker__button--today:before {
+  border-top: 6px solid $primary;
+}
+.picker__button--clear:before {
+  border-top: 2px solid $danger;
+}
+.picker__day--highlighted,
+.picker__day--highlighted:hover,
+.picker--focused .picker__day--highlighted,
+.picker__list-item--selected,
+.picker__list-item--selected:hover,
+.picker--focused .picker__list-item--selected {
+  background-color: $primary;
+}
+// Updated picker svg icons
+.picker__nav--prev:before,
+.picker__nav--next:before,
+.picker__button--close:before {
+  content: '';
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 18px;
+  color: $body-color;
+  width: 8px;
+  height: 18px;
+}
+.picker__nav--prev:before {
+  background-image: url(str-replace(str-replace($chevron-left, 'currentColor', $body-color), '#', '%23'));
+}
+.picker__nav--next:before {
+  background-image: url(str-replace(str-replace($chevron-right, 'currentColor', $body-color), '#', '%23'));
+}
+.picker__button--close:before {
+  background-image: url(str-replace(str-replace($remove, 'currentColor', $danger), '#', '%23'));
+  height: 10px !important;
+}
+
+// Dark layout style
+.dark-layout {
+  // date picker
+  .picker__holder {
+    background-color: $theme-dark-body-bg;
+    border-color: $theme-dark-border-color;
+
+    .picker__header {
+      .picker__month,
+      .picker__year {
+        color: $theme-dark-body-color;
+      }
+
+      .picker__select--year,
+      .picker__select--month {
+        color: $theme-dark-body-color;
+        background-color: $theme-dark-body-bg;
+        border-color: $theme-dark-border-color;
+      }
+
+      .picker__nav--next,
+      .picker__nav--prev {
+        &:hover {
+          background-color: $theme-dark-card-bg;
+        }
+      }
+    }
+    .picker__frame {
+      border-color: $theme-dark-border-color;
+    }
+
+    .picker__table {
+      thead {
+        tr {
+          .picker__weekday {
+            color: $theme-dark-body-color;
+          }
+        }
+      }
+
+      tbody {
+        tr {
+          td {
+            .picker__day {
+              color: $theme-dark-body-color;
+              &.picker__day--selected {
+                color: $white;
+                // color: $theme-dark-body-color;
+              }
+              &.picker__day--outfocus {
+                opacity: 0.65;
+              }
+              &.picker__day--today{
+                color: $white;
+              }
+
+              &:not(.picker__day--today):not(.picker__day--highlighted):hover {
+                background-color: $theme-dark-border-color;
+                color: $white;
+              }
+
+              &.picker__day--disabled {
+                color: $theme-dark-body-color;
+                opacity: 0.5;
+                background: $theme-dark-card-bg;
+              }
+            }
+
+            .picker__day--today:not(.picker__day--highlighted) {
+              background-color: $theme-dark-card-bg;
+            }
+          }
+        }
+      }
+    }
+
+    .picker__footer {
+      .picker__button--today,
+      .picker__button--clear,
+      .picker__button--close {
+        background-color: $theme-dark-body-bg;
+        color: $theme-dark-body-color;
+        &:hover {
+          background-color: $theme-dark-border-color;
+        }
+      }
+    }
+  }
+
+  // time picker
+  .picker--time {
+    .picker__holder {
+      .picker__list {
+        background-color: $theme-dark-body-bg;
+
+        .picker__list-item {
+          &:not(.picker__list-item--selected):hover {
+            background-color: $theme-dark-card-bg;
+          }
+
+          &.picker__list-item--disabled {
+            background-color: $theme-dark-card-bg;
+            color: $secondary;
+            opacity: 0.5;
+          }
+        }
+
+        .picker__button--clear {
+          background-color: $theme-dark-body-bg;
+          color: $theme-dark-body-color;
+        }
+      }
+    }
+  }
+}
+
+//RTL Style
+[dir='rtl'] {
+  .picker__nav--prev:before {
+    background-image: url(str-replace(str-replace($chevron-right, 'currentColor', $body-color), '#', '%23'));
+  }
+  .picker__nav--next:before {
+    background-image: url(str-replace(str-replace($chevron-left, 'currentColor', $body-color), '#', '%23'));
+  }
+}

resources/scss/base/plugins/forms/select2/_select2.scss

@@ -0,0 +1,322 @@
+// select-2 Theme
+$font-size-xs: 0.75rem;
+.select2-container {
+  width: 100% !important;
+  margin: 0;
+  display: inline-block;
+  position: relative;
+  vertical-align: middle;
+  box-sizing: border-box;
+}
+.select2-container--classic,
+.select2-container--default {
+  &:focus {
+    outline: none;
+  }
+
+  .select2-selection__choice {
+    font-size: 0.9rem;
+    margin-top: 6px !important;
+  }
+  // single select
+  .select2-selection--single {
+    min-height: 2.714rem;
+    padding: 5px;
+    border: 1px solid $input-border-color;
+    // Border color on focus
+    &:focus {
+      outline: 0;
+      border-color: $primary !important;
+      box-shadow: $input-focus-box-shadow !important;
+    }
+
+    // Select with icons scss
+    .select2-selection__rendered {
+      i,
+      svg {
+        font-size: 1.15rem;
+        height: 1.15rem;
+        width: 1.15rem;
+        margin-right: 0.5rem;
+      }
+    }
+    // dropdown arrow height
+    .select2-selection__arrow {
+      b {
+        background-image: url(str-replace(str-replace($chevron-down, 'currentColor', $input-border-color), '#', '%23'));
+        background-size: 18px 14px, 18px 14px;
+        background-repeat: no-repeat;
+        height: 1rem;
+        padding-right: 1.5rem;
+        margin-left: 0;
+        margin-top: 0;
+        left: -8px;
+        border-style: none;
+      }
+    }
+  }
+  // when select container open - scss
+  &.select2-container--open {
+    box-shadow: $dropdown-box-shadow;
+    .select2-selection--single {
+      border-color: $primary !important;
+      outline: 0;
+    }
+  }
+
+  // select container - focus
+  &.select2-container--focus {
+    outline: 0;
+    .select2-selection--multiple {
+      border-color: $primary !important;
+      outline: 0;
+    }
+  }
+
+  // Select2 Search Dropdown
+  .select2-dropdown {
+    border-color: $input-border-color;
+    z-index: 1060;
+  }
+  .select2-search--dropdown {
+    padding: 0.5rem;
+    .select2-search__field {
+      outline: none !important;
+      border-radius: $input-border-radius;
+      border-color: $input-border-color;
+      padding: $input-padding-y $input-padding-x;
+    }
+  }
+
+  // multiple select scss
+  .select2-selection--multiple {
+    min-height: 38px !important;
+    border: 1px solid $input-border-color;
+    &:focus {
+      outline: 0;
+      border-color: $primary !important;
+      box-shadow: $input-focus-box-shadow !important;
+    }
+    // selected items bg color for multiple selection
+    .select2-selection__choice {
+      background-color: $primary !important;
+      border-color: $primary !important;
+      color: $white;
+      padding: 2px 5px;
+    }
+    // font -size for selected options
+    .select2-selection__rendered {
+      padding: 0 6px;
+      li {
+        // font-size: 0.9rem;
+        .select2-search__field {
+          margin-top: 7px;
+        }
+      }
+    }
+    .select2-selection__choice__remove {
+      // color: $white !important;
+      float: right;
+      margin-left: 0.7rem;
+      margin-right: 0.5rem;
+      font-size: 0px;
+      display: inline-block;
+      position: relative;
+      line-height: 1rem;
+      &:before {
+        content: '';
+        background-image: url(str-replace(str-replace($remove, 'currentColor', $white), '#', '%23'));
+        background-size: 0.85rem;
+        height: 0.85rem;
+        width: 0.85rem;
+        position: absolute;
+        top: 22%;
+        left: -4px;
+      }
+    }
+    // select dropdown menu with icons
+    i,
+    svg {
+      position: relative;
+      top: 1px;
+      margin-right: 0.5rem;
+      height: 1.15rem;
+      width: 1.15rem;
+      font-size: 1.15rem;
+      padding-left: 1px;
+    }
+  }
+
+  // Select2 group alignment
+  .select2-results__group {
+    padding: 6px 9px;
+    font-weight: 600;
+  }
+
+  .select2-results__option {
+    padding: 0.428rem 1rem;
+    &[role='group'] {
+      padding: 0;
+    }
+    &[aria-selected='true'] {
+      background-color: $primary !important;
+      color: $white !important;
+    }
+    i,
+    svg {
+      height: 1.15rem;
+      width: 1.15rem;
+      font-size: 1.15rem;
+      margin-right: 0.5rem;
+    }
+  }
+
+  .select2-results__option--highlighted {
+    background-color: rgba($primary, 0.12) !important;
+    color: $primary !important;
+  }
+
+  //Loading Remote Data Image Size
+  .select2-result-repository__avatar {
+    img {
+      width: 50px;
+    }
+  }
+
+  // Optional sizing
+  // ------------------------------
+
+  // Large Single select
+  .select-lg {
+    min-height: $input-height !important;
+    font-size: ($font-size-lg - 0.8);
+    margin-bottom: 0 !important;
+    padding: 0.3rem 0.7rem;
+    &.select2-selection--single {
+      .select2-selection__rendered {
+        padding-top: $input-btn-padding-y-lg - 0.9;
+        // padding-left: 0;
+      }
+
+      .select2-selection__arrow {
+        top: $input-btn-padding-y-lg - 0.8 !important;
+      }
+    }
+
+    // large Multiple select
+    &.select2-selection--multiple {
+      padding: 0 0.2rem;
+      .select2-selection__rendered {
+        padding-top: 0 !important;
+        li {
+          font-size: ($font-size-lg - 0.8);
+          .select2-search__field {
+            margin-top: 10px;
+          }
+        }
+        .select2-selection__choice {
+          padding: 5px;
+
+          .select2-selection__choice__remove:before {
+            top: 46%;
+          }
+        }
+      }
+    }
+  }
+  // Small Single select
+  .select-sm {
+    min-height: $input-height-sm !important;
+    padding: 0 0.2rem;
+    font-size: $font-size-xs;
+    margin-bottom: 0 !important;
+    line-height: $line-height-base;
+    // Single
+    &.select2-selection--single {
+      .select2-selection__arrow {
+        top: -0.3rem !important;
+      }
+    }
+
+    // Small Multiple select
+    &.select2-selection--multiple {
+      line-height: $line-height-base - 0.2;
+      .select2-selection__rendered {
+        padding: 3px;
+        li {
+          font-size: $font-size-xs;
+          margin-top: 2px;
+          .select2-search__field {
+            margin-top: 4px;
+          }
+        }
+      }
+      .select2-selection__choice {
+        padding: 0 0.2rem;
+        margin-top: 4px !important;
+        .select2-selection__choice__remove:before {
+          top: 5%;
+        }
+      }
+
+      .select2-search--inline .select2-search__field {
+        margin-top: 0;
+      }
+    }
+  }
+}
+
+//  Dark Layout
+.dark-layout {
+  .select2-container {
+    .select2-selection,
+    .select2-search__field,
+    .select2-selection__placeholder {
+      background: $theme-dark-input-bg;
+      border-color: $theme-dark-border-color;
+      color: $theme-dark-body-color;
+    }
+
+    .select2-selection__rendered {
+      color: $theme-dark-body-color;
+    }
+
+    .select2-dropdown {
+      background-color: $theme-dark-card-bg;
+      border-color: $theme-dark-border-color;
+    }
+
+    .select2-selection--multiple {
+      .select2-selection__choice {
+        background: rgba($primary, 0.12) !important;
+        color: $primary !important;
+        border: none;
+        .select2-selection__choice__remove {
+          color: $primary !important;
+        }
+      }
+      .select2-selection__choice__remove:before {
+        background-image: url(str-replace(str-replace($remove, 'currentColor', $primary), '#', '%23'));
+      }
+    }
+
+    .select2-results__option[aria-disabled='true'] {
+      color: $theme-dark-text-muted-color;
+    }
+
+    .select2-selection__arrow {
+      b {
+        background-image: url(str-replace(
+          str-replace($chevron-down, 'currentColor', $theme-dark-body-color),
+          '#',
+          '%23'
+        ));
+      }
+    }
+  }
+  .select2-container--disabled {
+    .select2-selection {
+      opacity: 0.5;
+    }
+  }
+}

resources/scss/base/plugins/maps/map-leaflet.scss

@@ -0,0 +1,38 @@
+// ================================================================================================
+//     File Name: leaflet.scss
+//     Description: Leaflet map custom scss
+//     ----------------------------------------------------------------------------------------------
+//     Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
+//     Author: PIXINVENT
+//     Author URL: http://www.themeforest.net/user/pixinvent
+// ================================================================================================
+
+.leaflet-map {
+  height: 400px;
+  z-index: 1;
+}
+
+html[data-textdirection='rtl'] {
+  .leaflet-map {
+    .leaflet-control-container {
+      .leaflet-left {
+        left: 0;
+        right: unset;
+        .leaflet-control-zoom,
+        .leaflet-control-layers {
+          margin-right: 0;
+          margin-left: 10px;
+        }
+      }
+      .leaflet-right {
+        right: 0;
+        left: unset;
+        .leaflet-control-zoom,
+        .leaflet-control-layers {
+          margin-right: 10px;
+          margin-left: 0px;
+        }
+      }
+    }
+  }
+}

resources/scss/base/plugins/tables/_datatables.scss

@@ -0,0 +1,186 @@
+// ================================================================================================
+//     File Name: datatables.scss
+//     Description: Datatables pages custom scss
+//     ----------------------------------------------------------------------------------------------
+//     Item Name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
+//     Author: PIXINVENT
+//     Author URL: http://www.themeforest.net/user/pixinvent
+// ================================================================================================
+table.dataTable {
+  // table width & collapse border
+  width: 100% !important;
+  border-collapse: collapse !important;
+  &.table-responsive:not(.datatables-ajax) {
+    display: block; // For responsive data-table of BS5
+  }
+  td,
+  th {
+    padding: $table-cell-padding-y 1.5rem;
+    vertical-align: middle;
+  }
+  thead {
+    // Sorting Icons Change
+    .sorting,
+    .sorting_asc,
+    .sorting_desc {
+      padding-right: inherit;
+      &:before {
+        background-image: url(str-replace(str-replace($chevron-up, 'currentColor', $table-head-color), '#', '%23'));
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: 12px;
+        color: $body-color;
+        width: 14px;
+        height: 14px;
+        content: '';
+        right: 0.3rem;
+        top: 0.5rem;
+      }
+      &:after {
+        background-image: url(str-replace(str-replace($chevron-down, 'currentColor', $table-head-color), '#', '%23'));
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: 12px;
+        color: $body-color;
+        width: 14px;
+        height: 14px;
+        content: '';
+        right: 0.3rem;
+        top: 1.3rem;
+      }
+    }
+  }
+}
+
+// Export button dropdown UI
+div.dataTables_wrapper .dt-button-collection {
+  background-color: $dropdown-bg;
+  > div[role='menu'] {
+    text-align: left;
+    box-shadow: 0px 5px 16px -8px;
+    min-width: 8rem;
+  }
+  [class*='buttons-']:focus {
+    outline: 0;
+  }
+}
+
+// Custom responsive style for BS5
+// Responsive table area '+' icon position
+table.dataTable.dtr-column > tbody > tr > td.control:before,
+table.dataTable.dtr-column > tbody > tr > th.control:before {
+  line-height: 0.8em;
+}
+
+// To scroll within datatable area
+@media screen and (max-width: 1399.98px) {
+  table.dataTable.table-responsive {
+    display: block;
+  }
+}
+
+// Modal table style
+.modal.dtr-bs-modal {
+  .modal-body {
+    padding: 0;
+  }
+  .table {
+    tr:last-child > td {
+      border-bottom: 0;
+    }
+  }
+}
+
+// data table search, labels and
+div.dataTables_wrapper {
+  // data table search, labels
+  div.dataTables_filter,
+  div.dataTables_length {
+    label {
+      margin-top: 1rem;
+      margin-bottom: 0.5rem;
+    }
+    // for datatable length select
+    select {
+      background-position: calc(100% - 3px) 11px, calc(100% - 20px) 13px, 100% 0;
+      // padding: 0 0.8rem;
+      width: 5rem;
+      margin: 0 0.5rem;
+    }
+  }
+  div.dataTables_filter input {
+    margin-left: 0.75rem;
+  }
+
+  // pagination
+  div.dataTables_paginate {
+    ul.pagination {
+      margin-top: 1rem;
+      margin-bottom: 1.5rem;
+    }
+  }
+
+  // info text color
+  .dataTables_info {
+    padding-top: 1.25rem !important;
+    color: $text-muted;
+  }
+}
+
+// row grouping
+tr.group {
+  // row grouping color
+  background-color: $table-row-group-bg;
+}
+
+@media only screen and (max-width: 992px) {
+  table.dataTable {
+    &.table-responsive.datatables-ajax {
+      display: block; // For responsive data-table of BS5
+    }
+  }
+}
+// pagination in center
+@media only screen and (max-width: 768px) {
+  div.dataTables_wrapper {
+    div.dataTables_paginate {
+      ul.pagination {
+        justify-content: center;
+      }
+    }
+  }
+
+  div.dataTables_wrapper div.dataTables_info {
+    white-space: inherit;
+  }
+  // small screen button spacing in bottom
+  div.dt-buttons {
+    justify-content: center;
+    margin-top: 1rem;
+    button {
+      margin-bottom: 0.5rem;
+    }
+  }
+}
+@include media-breakpoint-down(sm) {
+  .dtr-bs-modal {
+    .modal-body {
+      padding-left: 0;
+      padding-right: 0;
+      overflow-x: scroll;
+    }
+    .table.dtr-details {
+      margin: 0 auto 1rem;
+      td {
+        padding-left: 0;
+        padding-right: 0;
+      }
+      tr td:first-child {
+        padding-left: 0.75rem;
+      }
+    }
+  }
+  div.dataTables_wrapper {
+    overflow: scroll;
+  }
+}

resources/scss/base/plugins/ui/_breakpoints.scss

@@ -0,0 +1,64 @@
+// config
+$debug: false;
+
+// declare breakpoints
+$usn-x-small: 0px;
+$usn-small: 544px;
+$usn-medium: 768px;
+$usn-large: 992px;
+$usn-x-large: 1200px;
+
+// create sass list to pass media query data
+// if a breakpoint name changes, remember to
+// update it in the list below as well
+$mq-sync: xs $usn-x-small, sm $usn-small, md $usn-medium, lg $usn-large, xl $usn-x-large;
+
+// build each media query for js ingestion
+@each $mq in $mq-sync {
+  @media screen and (min-width: nth($mq, 2)) {
+    head {
+      font-family: '#{nth($mq, 1)} #{nth($mq, 2)}';
+    }
+    body:after {
+      content: '#{nth($mq, 1)} - min-width: #{nth($mq, 2)}';
+    }
+  }
+}
+
+head {
+  // set clear on head to show Unison is set up correctly
+  clear: both;
+  // store hash of all breakpoints
+  title {
+    font-family: '#{$mq-sync}';
+  }
+}
+
+// debug styles to see breakpoint info
+body:after {
+  display: none;
+}
+
+@if $debug == true {
+  body:after {
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    background-color: #000;
+    background-color: rgba($black, 0.8);
+    text-align: center;
+    color: #fff;
+    padding: 10px;
+    z-index: 1000;
+    font-size: 12px;
+    font-family: sans-serif;
+  }
+}
+
+// hide elements for conditional loading
+// only used for responsive comments plugin
+*[data-usn-if] {
+  display: none;
+}

resources/scss/base/plugins/ui/coming-soon.scss

@@ -0,0 +1,64 @@
+// config
+$debug: false;
+
+// declare breakpoints
+$usn-x-small: 0px;
+$usn-small: 544px;
+$usn-medium: 768px;
+$usn-large: 992px;
+$usn-x-large: 1200px;
+
+// create sass list to pass media query data
+// if a breakpoint name changes, remember to
+// update it in the list below as well
+$mq-sync: xs $usn-x-small, sm $usn-small, md $usn-medium, lg $usn-large, xl $usn-x-large;
+
+// build each media query for js ingestion
+@each $mq in $mq-sync {
+  @media screen and (min-width: nth($mq, 2)) {
+    head {
+      font-family: '#{nth($mq, 1)} #{nth($mq, 2)}';
+    }
+    body:after {
+      content: '#{nth($mq, 1)} - min-width: #{nth($mq, 2)}';
+    }
+  }
+}
+
+head {
+  // set clear on head to show Unison is set up correctly
+  clear: both;
+  // store hash of all breakpoints
+  title {
+    font-family: '#{$mq-sync}';
+  }
+}
+
+// debug styles to see breakpoint info
+body:after {
+  display: none;
+}
+
+@if $debug == true {
+  body:after {
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    background-color: #000;
+    background-color: rgba($black, 0.8);
+    text-align: center;
+    color: #fff;
+    padding: 10px;
+    z-index: 1000;
+    font-size: 12px;
+    font-family: sans-serif;
+  }
+}
+
+// hide elements for conditional loading
+// only used for responsive comments plugin
+*[data-usn-if] {
+  display: none;
+}