Archive: Namaste PHP AMQP framework v1.0 (2017-2020)

952 days continuous production uptime, 40k+ tp/s single node.
Original corpo Bitbucket history not included — clean archive commit.

html/scss/pro/_accordion.scss

@@ -0,0 +1,37 @@
+// Accordion
+.accordion {
+  .card {
+    box-shadow: none;
+    border-bottom: 1px solid $grey-lighten-2;
+    border-radius: 0;
+    &:first-of-type,
+    &:not(:first-of-type):not(:last-of-type) {
+      border-bottom: 1px solid $grey-lighten-2;
+    }
+    .card-header {
+      border-bottom: 0;
+      padding: $accordion-card-header-padding-y $accordion-card-header-padding-x;
+      background: transparent;
+      .card-title {
+        font-weight: 400;
+      }
+      a {
+        transition: $accordion-link-hover-transition;
+      }
+      a:not(.collapsed) {
+        .rotate-icon {
+          transform: $accordion-rotate-icon-transform;
+        }
+      }
+    }
+    .fa-angle-down {
+      float: right;
+    }
+    .card-body {
+      font-size: $accordion-card-body-font-size;
+      line-height: $accordion-card-body-line-height;
+      font-weight: 300;
+      color: $accordion-card-body-color;
+    }
+  }
+}

html/scss/pro/_animations.scss

@@ -0,0 +1,7 @@
+// Animations pro
+.collapsible .active {
+  .rotate-icon {
+    transform: $animations-pro-transform;
+    transition: $animations-pro-transition;
+  }
+}

html/scss/pro/_autocomplete.scss

@@ -0,0 +1,52 @@
+// MDB Autocomplete
+.mdb-autocomplete {
+  margin-bottom: $autocomplete-margin-bottom;
+}
+button {
+  &:focus {
+    outline: 0 !important;
+  }
+  &.mdb-autocomplete-clear {
+    position: absolute;
+    z-index: 2;
+    top: $autocomplete-clear-top;
+    right: 0;
+    visibility: hidden;
+    border: none;
+    background: transparent;
+    svg {
+      fill: $autocomplete-clear-color;
+    }
+  }
+}
+
+.mdb-autocomplete-wrap {
+  box-shadow: $z-depth-1;
+  position: absolute;
+  z-index: 100;
+  left: 0;
+  right: 0;
+  list-style-type: none;
+  overflow-y: auto;
+  max-height: $autocomplete-wrap-max-height;
+  padding-left: 0;
+  background: $white-base;
+  li {
+    padding: $autocomplete-wrap-li-padding-y $autocomplete-wrap-li-padding-x;
+    cursor: pointer;
+    font-size: $autocomplete-wrap-li-font-size;
+    &:hover {
+      background: $autocomplete-wrap-li-hover-bg;
+    }
+  }
+}
+
+.form-inline {
+  .md-form {
+    .form-control {
+      &.mdb-autocomplete {
+        width: $form-inline-autocomplete-width;
+      }
+    }
+  }
+}

html/scss/pro/_blog.scss

@@ -0,0 +1 @@
+// Blog

html/scss/pro/_buttons.scss

@@ -0,0 +1,104 @@
+// Buttons
+.btn {
+  &.btn-flat {
+    box-shadow: none;
+    background-color: transparent;
+    color: inherit !important;
+    &:not([disabled]):not(.disabled):active {
+      box-shadow: none;
+    }
+  }
+}
+
+// Floating button
+.btn-floating {
+  box-shadow: $z-depth-1-half;
+  @include make-btn-floating($btn-floating-width, $btn-floating-height, $btn-floating-icon-size, $btn-floating-line-height);
+  position: relative;
+  z-index: 1;
+  vertical-align: middle;
+  display: inline-block;
+  overflow: hidden;
+  transition: $btn-floating-transtion;
+  margin: $btn-floating-margin;
+  border-radius: $btn-floating-border-radius;
+  padding: 0;
+  border: none;
+  cursor: pointer;
+  i {
+    display: inline-block;
+    width: inherit;
+    text-align: center;
+    color: $white-base;
+  }
+  &:hover {
+    box-shadow: $z-depth-2;
+  }
+  &:before {
+    border-radius: 0;
+  }
+  &.btn-sm {
+    @include make-btn-floating($btn-floating-width-sm, $btn-floating-height-sm, $btn-floating-icon-size-sm, $btn-floating-line-height-sm);
+  }
+  &.btn-lg {
+    @include make-btn-floating($btn-floating-width-lg, $btn-floating-height-lg, $btn-floating-icon-size-lg, $btn-floating-line-height-lg);
+  }
+}
+
+// Fixed action button
+.fixed-action-btn {
+  position: fixed;
+  z-index: 998;
+  right: $fixed-action-btn-right;
+  bottom: $fixed-action-btn-bottom;
+  margin-bottom: 0;
+  padding-top: $fixed-action-btn-padding-top;
+  ul {
+    display: flex;
+    flex-direction: column;
+    transition: 400ms height;
+    position: absolute;
+    bottom: $fixed-action-btn-ul-bottom;
+    height: $fixed-action-btn-ul-bottom;
+    left: 0;
+    right: 0;
+    margin: 0 0 15px;
+    padding: 0;
+    text-align: center;
+    li {
+      display:flex;
+      margin-bottom: $fixed-action-btn-li-margin-bottom;
+      margin-left:auto;
+      margin-right:auto;
+      z-index: -1;
+    }
+    a {
+      &.btn-floating {
+        opacity: 0;
+        transition-duration: 0.4s;
+        transform: scale(0.4) translate(0);
+        &.shown {
+          transform: scale(1) translate(0);
+          opacity: 1;
+        }
+      }
+    }
+  }
+  &.active ul {
+    height:300px;
+  }
+}
+
+button, html [type="button"], [type="reset"], [type="submit"] {
+  appearance: none;
+}
+
+// Rounded buttons
+.btn-rounded {
+  border-radius: $btn-rounded-border-radius;
+}
+
+// Gradient buttons
+@each $name, $val in $gradients-premium {
+  @include make-gradient-button($name, $val);
+}

html/scss/pro/_cards.scss

@@ -0,0 +1,228 @@
+// Cards
+.card {
+  &.card-image {
+    background-size: cover;
+    background-position: center;
+    width: 100%;
+    [class*="rgba-"] {
+      border-radius: $md-card-border-radius;
+    }
+  }
+  // Cascading cards
+  &.card-cascade {
+    .view {
+      &.view-cascade {
+        box-shadow: $z-depth-1-half;
+        border-radius: $md-card-border-radius;
+        &.gradient-card-header {
+          @extend .white-text;
+          padding: $card-cascade-header-gradient-py $card-cascade-header-gradient-px;
+          text-align: center;
+          .card-header-title {
+            font-weight: 500;
+          }
+          .btn-floating {
+            background-color: $card-cascade-header-gradient-btn-floating-bgc;
+          }
+        }
+      }
+    }
+    &.wider {
+      box-shadow: none;
+      background-color: transparent;
+      .view {
+        &.view-cascade {
+          z-index: 2;
+        }
+      }
+      .card-body {
+        &.card-body-cascade {
+          box-shadow: $z-depth-1;
+          margin-left: $card-cascade-wider-card-body-mx;
+          margin-right: $card-cascade-wider-card-body-mx;
+          background: $card-cascade-wider-card-body-bg;
+          z-index: 1;
+          border-radius: 0 0 $md-card-border-radius $md-card-border-radius;
+        }
+      }
+      &.reverse {
+        .card-body {
+          &.card-body-cascade {
+            z-index: 3;
+            margin-top: $card-cascade-reverse-mt;
+            border-radius: $md-card-border-radius;
+            box-shadow: $z-depth-1-half;
+          }
+        }
+      }
+    }
+    &.narrower {
+      margin-top: $card-cascade-narrower-mt;
+      .view {
+        &.view-cascade {
+          margin-left: $card-cascade-narrowe-view-mx;
+          margin-right: $card-cascade-narrowe-view-mx;
+          margin-top: $card-cascade-narrower-view-mt;
+        }
+      }
+    }
+    &.panel-cascade {
+      .view {
+        text-align: center;
+        color: $panel-cascade-view-color;
+      }
+      .list-group {
+        .list-group-item {
+          margin-bottom: 0;
+          border: 0;
+          border-bottom: 1px solid $panel-cascade-list-group-item-border-bottom;
+          color: $panel-cascade-list-group-item-color;
+          &:hover {
+            background-color: $panel-cascade-list-group-item-bgc;
+          }
+        }
+      }
+    }
+  }
+  .btn-action {
+    margin-top: $card-btn-action-my;
+    margin-bottom: $card-btn-action-my;
+  }
+  .activator {
+    position: absolute;
+    right: 0;
+    font-size: $card-activator-font-size;
+  }
+  .card-reveal {
+    position: absolute;
+    width: 100%;
+    overflow-y: auto;
+    top: 100%;
+    height: 100%;
+    z-index: 1;
+    display: none;
+    .content {
+      position: relative;
+    }
+  }
+  &.ovf-hidden {
+    overflow: hidden;
+  }
+  .card-share {
+    position: relative;
+    .social-reveal {
+      position: absolute;
+      top: $card-share-social-reveal-top;
+      right: $card-share-social-reveal-right;
+      visibility: hidden;
+      width: auto;
+      transform: translateZ(0);
+      transform: translateX(0);
+      transition: $card-share-social-reveal-transition;
+    }
+    .social-reveal-active {
+      z-index: 11;
+      visibility: visible;
+      transform: translateZ(0);
+      transform: translateX(-48px);
+      transition: $card-share-social-reveal-transition;
+    }
+  }
+}
+
+// Title and close button
+.card .card-reveal .card-title,
+.card-wrapper .card-rotating .card-title {
+  cursor: pointer;
+}
+.card .card-reveal .card-title i,
+.card-wrapper .card-rotating .card-title i {
+  color: $card-reveal-title-i-color;
+  position: absolute;
+  right: $card-reveal-title-i-right;
+}
+
+// Rotating card
+.card-wrapper {
+  margin: 0;
+  min-height: $card-wrapper-min-height;
+  position: relative;
+  perspective: $card-wrapper-perspective;
+  .face {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+  /* Front side */
+  .card-up {
+    height: $card-up-img-size;
+    overflow: hidden;
+    img {
+      vertical-align: middle;
+    }
+  }
+  .avatar {
+    display: block;
+    margin-top: $card-avatar-margin-top;
+    overflow: hidden;
+    width: $card-up-size;
+  }
+  .avatar {
+    img {
+      border: 5px solid $white-base;
+      background: none repeat scroll 0 0 $white-base;
+      width: 100%;
+    }
+  }
+  /* Card with rotate on click */
+  .card-rotating {
+    position: absolute;
+    transform-style: $card-rotating-transform-style;
+    .content {
+      position: relative;
+    }
+    &.effect__click {
+      &.flipped {
+        .front {
+          transform: $card-front-effect-click-transform;
+        }
+        .back {
+          transform: $card-back-effect-click-transform;
+        }
+      }
+    }
+  }
+  .front,
+  .back {
+    box-shadow: $z-depth-1;
+    border-radius: $md-card-border-radius;
+    backface-visibility: hidden;
+    transition: $card-front-back-transition;
+  }
+  .back {
+    transform: $card-back-transform;
+  }
+}
+
+// Testimonial card
+.testimonial-card {
+  .card-up {
+    overflow: hidden;
+    height: $card-up-size;
+    border-top-left-radius: $md-card-border-radius;
+    border-top-right-radius: $md-card-border-radius;
+  }
+  .avatar {
+    border-radius: $border-radius-circle;
+    width: $card-up-size;
+    margin-top: $card-avatar-margin-top;
+    overflow: hidden;
+    border: 5px solid $white-base;
+  }
+  .avatar img {
+    width: 100%;
+  }
+  .card-body {
+    text-align: center;
+  }
+}

html/scss/pro/_carousels.scss

@@ -0,0 +1,88 @@
+// CAROUSELS PRO
+.carousel-multi-item {
+  margin-bottom: $carousel-multi-item-mb;
+  .carousel-inner .carousel-item.active,
+  .carousel-item-next,
+  .carousel-item-prev {
+    display: block;
+  }
+  .carousel-indicators li {
+    height: $carousel-multi-item-indicators-li-height;
+    width: $carousel-multi-item-indicators-li-width;
+    max-width: $carousel-multi-item-indicators-li-max-width;
+    background-color: $primary-color;
+    margin-bottom: $carousel-multi-item-indicators-li-mb;
+  }
+  .carousel-indicators .active {
+    height: $carousel-multi-item-indicators-active-height;
+    width: $carousel-multi-item-indicators-active-width;
+    max-width: $carousel-multi-item-indicators-active-max-width;
+    background-color: $primary-color;
+    border-radius: $carousel-multi-item-indicators-active-border-radius;
+  }
+  .controls-top {
+    text-align: center;
+    margin-bottom: $carousel-multi-item-controls-top-mb;
+    .btn-floating {
+      background: $primary-color;
+    }
+  }
+  .carousel-indicators {
+    margin-bottom: $carousel-multi-item-indicators-mb;
+  }
+  .card-cascade.narrower {
+    margin-top: $carousel-multi-item-card-cascade-narrower-mt;
+    margin-bottom: $carousel-multi-item-card-cascade-narrower-mb;
+  }
+  @media (min-width: 768px) {
+    .col-md-4 {
+      float: left;
+      width: 33.333333%;
+      max-width: 100%;
+    }
+  }
+}
+
+@media only screen and (max-width: $medium-screen) {
+  .carousel-multi-item {
+    .carousel-indicators li {
+      margin-bottom: $carousel-multi-item-medium-screen-mb;
+    }
+  }
+}
+
+// Carousel with thumbnails
+.carousel-thumbnails {
+  margin-bottom: $carousel-thumbnails-mb;
+  .carousel-indicators {
+    margin-bottom: $carousel-thumbnails-indicators-mb;
+    position: absolute;
+    li {
+      height: auto;
+      width: $carousel-thumbnails-indicators-li-width;
+      max-width: $carousel-thumbnails-indicators-li-max-width;
+      border: none;
+    }
+    .active {
+      @extend .white;
+      height: auto;
+      width: auto;
+      opacity: $carousel-thumbnails-indicators-active-opacity;
+    }
+    img {
+      max-width: $carousel-thumbnails-indicators-li-max-width;
+      height: auto;
+      overflow: hidden;
+      display: block;
+    }
+  }
+}
+
+@media only screen and (max-width: 540px) {
+  .carousel-thumbnails {
+    margin-bottom: $carousel-thumbnails-sm-mb;
+    .carousel-indicators {
+      margin-bottom: $carousel-thumbnails-indicators-sm-mb;
+    }
+  }
+}

html/scss/pro/_charts.scss

@@ -0,0 +1,25 @@
+// Charts Pro
+.min-chart {
+  position: relative;
+  display: inline-block;
+  width: $min-chart-width;
+  height: $min-chart-height;
+  margin-top: $min-chart-margin;
+  margin-bottom: $min-chart-margin;
+  text-align: center;
+  canvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .percent {
+    display: inline-block;
+    line-height: $min-chart-line-height;
+    z-index: 2;
+    &:after {
+      content: "%";
+      margin-left: $min-chart-percent-margin;
+      font-size: $min-chart-percent-font-size;
+    }
+  }
+}

html/scss/pro/_checkbox.scss

@@ -0,0 +1,183 @@
+/* Remove default checkbox */
+[type="checkbox"]:not(:checked),
+[type="checkbox"]:checked {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+// Material checkbox styles
+.form-check-input[type="checkbox"],
+label.btn input[type="checkbox"] {
+  // Text Label Style
+  + label {
+    position: relative;
+    padding-left: $checkbox-label-pl;
+    cursor: pointer;
+    display: inline-block;
+    height: $checkbox-label-height;
+    line-height: $checkbox-label-line-height;
+    user-select: none;
+  }
+
+  // Checkbox feature
+  + label:before,
+   &:not(.filled-in) + label:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: $checkbox-label-before-after-width;
+    height: $checkbox-label-before-after-height;
+    z-index: 0;
+    border: $checkbox-label-before-after-border-width solid $checkbox-label-before-after-border-color;
+    border-radius: $checkbox-label-before-after-border-radius;
+    margin-top: $checkbox-label-before-after-mt;
+    transition: $checkbox-label-before-after-transition;
+  }
+
+  &:not(.filled-in) + label:after {
+    border: 0;
+    transform: scale(0);
+  }
+
+  &:not(:checked):disabled + label:before {
+    border: none;
+    background-color: $input-disabled-solid-color;
+  }
+
+  &:checked {
+    + label:before {
+      top: $checkbox-checked-label-before-top;
+      left: $checkbox-checked-label-before-left;
+      width: $checkbox-checked-label-before-width;
+      height: $checkbox-checked-label-before-height;
+      border-top: $checkbox-label-before-after-border-width solid transparent;
+      border-left: $checkbox-label-before-after-border-width solid transparent;
+      border-right: $checkbox-label-before-after-border-width solid $radio-fill-color;
+      border-bottom: $checkbox-label-before-after-border-width solid $radio-fill-color;
+      transform: $checkbox-checked-label-before-transform;
+      backface-visibility: hidden;
+      transform-origin: $checkbox-checked-label-before-transform-origin;
+    }
+
+    &:disabled + label:before {
+      border-right: $checkbox-label-before-after-border-width solid $input-disabled-solid-color;
+      border-bottom: $checkbox-label-before-after-border-width solid $input-disabled-solid-color;
+    }
+  }
+
+  // Indeterminate checkbox
+  &:indeterminate {
+    + label:before {
+      top: $checkbox-indeterminate-label-before-top;
+      left: $checkbox-indeterminate-label-before-left;
+      width: $checkbox-indeterminate-label-before-width;
+      height: $checkbox-indeterminate-label-before-height;
+      border-top: none;
+      border-left: none;
+      border-right: $checkbox-label-before-after-border-width solid $radio-fill-color;
+      border-bottom: none;
+      transform: $checkbox-indeterminate-label-before-transform;
+      backface-visibility: hidden;
+      transform-origin: $checkbox-checked-label-before-transform-origin;
+    }
+
+    &:disabled + label:before {
+      border-right: $checkbox-label-before-after-border-width solid $input-disabled-color;
+      background-color: transparent;
+    }
+  }
+
+  // Filled in Style
+  &.filled-in {
+    + label:after {
+      border-radius: $checkbox-filled-in-border-radius;
+    }
+
+    + label:before,
+    + label:after {
+      content: '';
+      left: 0;
+      position: absolute;
+      /* .1s delay is for check animation */
+      transition: $checkbox-filled-in-transition-border, $checkbox-filled-in-transition-background-color, $checkbox-filled-in-transition-width, $checkbox-filled-in-transition-height, $checkbox-filled-in-transition-top, $checkbox-filled-in-transition-left;
+      z-index: 1;
+    }
+
+    // Unchecked style
+    &:not(:checked) + label:before {
+      width: 0;
+      height: 0;
+      border: $checkbox-filled-in-unchecked-label-before-border-width solid transparent;
+      left: $checkbox-filled-in-unchecked-label-before-left;
+      top: $checkbox-filled-in-unchecked-label-before-top;
+      transform: rotateZ(37deg);
+      transform-origin: $checkbox-checked-label-before-transform-origin;
+    }
+
+    &:not(:checked) + label:after {
+      height: $checkbox-filled-in-unchecked-label-after-height;
+      width: $checkbox-filled-in-unchecked-label-after-width;
+      background-color: transparent;
+      border: $checkbox-label-before-after-border-width solid $radio-empty-color;
+      top: 0;
+      z-index: 0;
+    }
+
+    // Checked style
+    &:checked {
+      + label:before {
+        top: 0;
+        left: $checkbox-filled-in-checked-label-before-left;
+        width: $checkbox-filled-in-checked-label-before-width;
+        height: $checkbox-filled-in-checked-label-before-height;
+        border-top: $checkbox-label-before-after-border-width solid transparent;
+        border-left: $checkbox-label-before-after-border-width solid transparent;
+        border-right: $checkbox-label-before-after-border-width solid $white-base;
+        border-bottom: $checkbox-label-before-after-border-width solid $white-base;
+        transform: $checkbox-filled-in-unchecked-label-before-transform;
+        transform-origin: $checkbox-checked-label-before-transform-origin;
+      }
+
+      + label:after {
+        top: 0;
+        width: $checkbox-filled-in-unchecked-label-after-height;
+        height: $checkbox-filled-in-unchecked-label-after-width;
+        border: $checkbox-label-before-after-border-width solid $secondary-color;
+        background-color: $secondary-color;
+        z-index: 0;
+      }
+    }
+
+    &.filled-in-danger {
+      &:checked + label:after {
+        background-color: $red-base;
+        border-color: $red-base;
+      }
+    }
+  }
+
+  // Disabled style
+  &:disabled {
+    &:not(:checked) {
+      + label:before {
+        background-color: $input-disabled-solid-color;
+        border-color: $input-disabled-solid-color;
+      }
+      + label:after {
+        border-color: $input-disabled-solid-color;
+        background-color: $input-disabled-solid-color;
+      }
+    }
+    &:checked {
+      + label:before {
+        background-color: transparent;
+      }
+      + label:after {
+        background-color: $input-disabled-solid-color;
+        border-color: $input-disabled-solid-color;
+      }
+    }
+  }
+}

html/scss/pro/_chips.scss

@@ -0,0 +1,75 @@
+// Chips
+.chip {
+  display: inline-block;
+  height: $chip-height;
+  font-size: $chip-font-size;
+  font-weight: $chip-font-weight;
+  color: $chip-font-color;
+  line-height: $chip-line-height;
+  padding: 0 $chip-padding-right;
+  border-radius: $chip-br;
+  background-color: $chip-background-color;
+  margin-bottom: $chip-margin-bottom;
+  margin-right: $chip-margin-right;
+  cursor: pointer;
+  transition: $pagination-page-link-transition;
+  &:hover {
+    transition: $pagination-page-link-transition;
+    background-color: $grey-lighten-2;
+  }
+  img {
+    float: left;
+    margin: 0 $chip-img-margin-right 0 $chip-img-margin-left;
+    height: $chip-img-height;
+    width: $chip-img-width;
+    border-radius: 50%;
+  }
+  .close {
+    cursor: pointer;
+    float: right;
+    font-size: $chip-close-font-size;
+    line-height: $chip-close-line-height;
+    padding-left: $chip-close-padding-left;
+    transition: all 0.1s linear;
+  }
+}
+
+.chips {
+  outline: none;
+  box-shadow: none;
+  border: none;
+  border-bottom: 1px solid $input-border-color;
+  margin-bottom: $chips-margin-bottom;
+  min-height: $chips-min-height;
+  padding-bottom: $chips-padding-bottom;
+  transition: all .3s;
+  &.focus {
+    border-bottom: 1px solid $input-md-focus-color;
+    box-shadow: 0 1px 0 0 $input-md-focus-color;
+  }
+  &:hover {
+    cursor: text;
+  }
+  .tag.selected {
+    border-bottom: 1px solid $input-md-focus-color;
+    color: $white-base;
+  }
+  .input {
+    display: inline-block;
+    background: none;
+    border: 0;
+    outline: 0;
+    padding: 0 !important;
+    width: $chips-input-width !important;
+    color: $chips-input-font-color;
+    font-size: $chips-input-font-size;
+    font-weight: $chips-input-font-weight;
+    height: $chips-input-height;
+    margin-right: $chips-input-margin-right;
+    line-height: $chips-input-line-height;
+    &:focus {
+      border: 0 !important;
+      box-shadow: none !important;
+    }
+  }
+}

html/scss/pro/_depreciated.scss

@@ -0,0 +1,239 @@
+// These settings will be only for one version
+
+// Button Collapse Without Navbar
+.side-nav .double-navbar .bc-min {
+  padding: 5px 10px;
+  .button-collapse {
+    padding-left: 0px;
+  }
+}
+
+// When icon doesn't need padding
+.no-padding {
+  .fa {
+    padding: 0;
+  }
+}
+
+// Quick look modal
+.ql-modal,
+.product-panel {
+  .modal-dialog {
+    max-width: none;
+    width: auto;
+    margin: 2rem;
+  }
+  .modal-header {
+    text-align: center;
+  }
+  .price {
+    .badge {
+      background-color: rgba(244, 67, 54, 0.7);
+      font-size: 1.4rem;
+      display: inline-block;
+      margin-left: 1rem;
+    }
+    p {
+      display: inline-block;
+      font-size: 1.3rem;
+      .price-before {
+        color: $black-base;
+        text-decoration: line-through;
+        margin-left: 0.5rem;
+      }
+      .price-after {
+        font-size: 1.7rem;
+        color: $green-base;
+      }
+    }
+  }
+  .media img {
+    max-width: 60px;
+  }
+}
+
+@media (max-width: 1200px) {
+  .ql-modal {
+    .modal-dialog {
+      margin: 0;
+    }
+    padding-left: 0;
+  }
+}
+
+// Parallax
+// .jarallax {
+//   background-size: cover;
+//   background-repeat: no-repeat;
+//   background-position: center;
+//   min-height: 700px;
+// }
+
+// E-commerce
+.pricing-card {
+  .heading {
+    h1 {
+      font-size: 4rem;
+      font-weight:400;
+    }
+  }
+  // Card overlay
+  &.card-overlay {
+    display: block;
+    color: $white-base;
+    p {
+      color: $white-base;
+    }
+    .price {
+      padding-top: 0;
+    }
+  }
+}
+.naked-card {
+  h5 {
+    margin-top: 1.2rem;
+  }
+  .price {
+    padding-top: 0rem;
+  }
+  li p {
+    color: $grey-darken-1;
+    strong {
+      color: $grey-darken-2;
+    }
+  }
+}
+
+.no-radius {
+  border-radius: 0!important;
+}
+
+// Blog section
+.section-blog-fw {
+  .view {
+    img {
+      @extend .img-fluid;
+      border-radius:2px;
+    }
+  }
+  .jumbotron {
+    text-align: center;
+  }
+  h2 {
+    @extend .h2-responsive;
+    margin-bottom: 1rem;
+    font-weight: 300;
+    a {
+      color: #424242;
+      transition :0.2s;
+      &:hover {
+        color: #616161;
+        transition :0.2s;
+      }
+    }
+  }
+  .excerpt,
+  .post-text {
+    margin-left: 10%;
+    margin-right: 10%;
+    text-align: justify;
+    @media (max-width: $medium-screen) {
+      margin-left: 5%;
+      margin-right: 5%;
+    }
+  }
+  hr {
+    display: block;
+  }
+}
+
+// Author box
+.personal-sm {
+  a {
+    .fa {
+      transition-duration: $personal-sm-transition-duration;
+      &:hover {
+        transform: $personal-sm-hover-transform;
+      }
+    }
+  }
+}
+// Comments list
+.comments-list,
+.reply-form {
+  .avatar {
+    max-width: $avatar-img-max-width;
+  }
+  .comment-date {
+    color: $blog-comment-date-text-color;
+  }
+}
+
+// .classic-tabs {
+//   white-space: nowrap;
+//   overflow-x: auto;
+//   z-index: 2;
+//   position: relative;
+//   margin-bottom: -5px;
+//   border-radius: $classic-tabs-border-radius $classic-tabs-border-radius 0 0;
+//   @media (min-width: 62rem) {
+//     overflow-x: hidden;
+//   }
+//   li {
+//     @media (min-width: 62em) {
+//       flex: inherit;
+//     }
+//     a {
+//       display: block;
+//       padding: $classic-tabs-padding-y $classic-tabs-padding-x;
+//       font-size: $classic-tabs-font-size;
+//       text-transform: uppercase;
+//       color: $classic-tabs-color;
+//       text-align: center;
+//       border-radius: 0;
+//       &.active {
+//         border-bottom: $classic-tabs-li-a-active-border-bottom;
+//         color: $white-base;
+//       }
+//     }
+//     @media (min-width: 62em) {
+//       &:first-child {
+//         margin-left: $classic-tabs-margin-left;
+//       }
+//     }
+//   }
+//   @each $name, $color in $ctbc {
+//&.#{$name} {
+//       li {
+//         a {
+//           &.active {
+//             border-color: $color;
+//           }
+//         }
+//       }
+//     }
+//   }
+// }
+
+// Checkbox
+$base-radio-checkbox-label-pl: 2.19rem !default;
+$base-radio-checkbox-label-height: 1.57rem !default;
+$base-radio-checkbox-label-line-height: $base-radio-checkbox-label-height !default;
+$base-radio-checkbox-label-font-size: 1rem !default;
+
+// hide default radio / checkbox
+%hide-radio-checkbox {
+  position: absolute;
+  left: -9999px;
+  visibility: hidden;
+}
+
+%base-radio-checkbox-label {
+  position: relative;
+  padding-left: $base-radio-checkbox-label-pl;
+  cursor: pointer;
+  display: inline-block;
+  height: $base-radio-checkbox-label-height;
+  line-height: $base-radio-checkbox-label-line-height;
+  font-size: $base-radio-checkbox-label-font-size;
+}

html/scss/pro/_dropdowns.scss

@@ -0,0 +1,58 @@
+// Dropdown pro
+// Dropdowns menu's colors
+.dropdown,
+.dropup,
+.dropleft,
+.dropright {
+  .dropdown-menu {
+    padding: $dropdown-menu-padding;
+    @each $name, $color in $dropdown-colors {
+      &.dropdown-#{$name} {
+        .dropdown-item {
+          &:hover,
+          &:active {
+            background-color: $color !important;
+          }
+        }
+      }
+    }
+    .dropdown-item {
+      padding: $dropdown-menu-padding;
+      margin-left: 0;
+      font-size: $dropdown-item-font-size;
+      &.disabled {
+        color: $dropdown-item-disabled-color;
+        &:hover,
+        &:active,
+        &:focus {
+          box-shadow: none;
+          color: $dropdown-item-disabled-color !important;
+          background-color: transparent !important;
+        }
+      }
+      &:hover,
+      &:active {
+        box-shadow: $z-depth-1-half;
+        @extend .white-text;
+        background-color: $primary-color;
+        border-radius: $border-radius-base;
+        transition: $dropdown-item-transition;
+      }
+    }
+  }
+}
+
+.navbar-nav  {
+  .dropdown-menu-right {
+    right: 0;
+    left: auto;
+  }
+}
+
+.dropdown-menu {
+  &.animated {
+    /* Speed up animations */
+    animation-duration: $dropdown-menu-animated-animation-duration;
+    animation-timing-function: $dropdown-menu-animated-animation-timing-function;
+  }
+}

html/scss/pro/_ecommerce.scss

@@ -0,0 +1,91 @@
+// Ecommerce Pro Cards
+// Collection card
+.collection-card {
+  .stripe {
+    position: absolute;
+    bottom: $collection-card-stripe-bottom;
+    width: 100%;
+    text-align: center;
+    padding: $collection-card-stripe-padding;
+    &.dark {
+      background-color: $collection-card-stripe-dark-bgc;
+      a {
+        p {
+          color: $collection-card-stripe-dark-a-p-color;
+        }
+      }
+    }
+    &.light {
+      background-color: $collection-card-stripe-light-bgc;
+      a {
+        p {
+          color: $collection-card-stripe-light-a-p-color;
+        }
+      }
+    }
+    a {
+      p {
+        padding: 0;
+        margin: 0;
+        letter-spacing: $collection-card-stripe-letter-spacing;
+      }
+    }
+  }
+}
+
+.rating {
+  color: $ecommerce-rating-color;
+  list-style-type: none;
+  padding: 0;
+  li {
+    display: inline-block;
+  }
+}
+
+// Cart modal
+.cart-modal {
+  .table,
+  th {
+    text-align: center;
+  }
+  .table {
+    .total {
+      text-transform: uppercase;
+      font-weight: 600;
+    }
+    .fa-remove {
+      color: $primary-color;
+    }
+  }
+}
+
+.card {
+  &.card-ecommerce {
+    .card-footer {
+      background-color: transparent;
+      .discount {
+        color: $ecommerce-card-footer-discount-color;
+      }
+      a {
+        color: $ecommerce-card-footer-a-color;
+        transition: $ecommerce-card-footer-a-hover-transition;
+        &:hover {
+          color: $ecommerce-card-footer-a-hover-color;
+          transition: $ecommerce-card-footer-a-hover-transition;
+        }
+        &.active {
+          color: $ecommerce-card-footer-a-active-color;
+        }
+      }
+    }
+  }
+}
+
+// Product table
+.product-table {
+  .btn {
+    &.btn-sm {
+      padding: $ecommerce-product-table-btn-sm-py $ecommerce-product-table-btn-sm-px;
+    }
+  }
+}

html/scss/pro/_file-input.scss

@@ -0,0 +1,42 @@
+// File Input
+.file-field {
+  position: relative;
+  .file-path-wrapper {
+    overflow: hidden;
+    padding-left: $file-path-wrapper-padding-left;
+    height: $file-path-wrapper-height;
+  }
+  input {
+    &.file-path {
+      width: 100%;
+      height: $file-input-path;
+    }
+  }
+  .btn {
+    float: left;
+  }
+  span {
+    cursor: pointer;
+  }
+  input[type=file] {
+
+    // Needed to override webkit button
+    &::-webkit-file-upload-button {
+      display: none;
+    }
+
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    cursor: pointer;
+    opacity: 0;
+    filter: $file-input-filter;
+  }
+}
+
+

html/scss/pro/_forms.scss

@@ -0,0 +1,10 @@
+// FORMS PRO
+.form-header {
+  box-shadow: $z-depth-1-half;
+  color: $form-header-color;
+  text-align: center;
+  margin-top: $form-header-mt;
+  margin-bottom: $form-header-mb;
+  padding: $form-header-padding;
+  border-radius: $form-header-border-radius;
+}

html/scss/pro/_input-group.scss

@@ -0,0 +1,14 @@
+// Input group
+.md-form.input-group .input-group-text [type=checkbox]+label,
+.input-group .input-group-text [type=checkbox]+label {
+  padding-left: $input-group-text-checkbox-pl;
+}
+.md-form.input-group .input-group-text .filled-in[type=checkbox]+label,
+.input-group .input-group-text .filled-in[type=checkbox]+label {
+  height: $input-group-text-checkbox-height;
+}
+.md-form.input-group .input-group-text [type=radio]+label,
+.input-group .input-group-text [type=radio]+label {
+  padding-left: $input-group-text-radio-pl;
+  height: $input-group-text-radio-height;
+}

html/scss/pro/_lightbox.scss

@@ -0,0 +1,810 @@
+/*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */
+
+/*
+  Styles for basic PhotoSwipe functionality (sliding area, open/close transitions)
+*/
+
+// PhotoSwipe uses Autoprefixer, so vendor prefixed are added automatically when needed.
+
+/* pswp = photoswipe */
+
+.pswp {
+  display: none;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  overflow: hidden;
+  touch-action: none;
+  z-index: $pswp__root-z-index;
+  /* create separate layer, to avoid paint on window.onscroll in webkit/blink */
+  outline: none;
+  @if $pswp__box-sizing-border-box==true {
+    * {
+      box-sizing: border-box;
+    }
+  }
+  img {
+    max-width: none;
+  }
+}
+
+
+/* style is added when JS option showHideOpacity is set to true */
+
+.pswp--animate_opacity {
+  /* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */
+  opacity: 0.001;
+  will-change: opacity;
+  /* for open/close transition */
+  transition: opacity $pswp__show-hide-transition-duration cubic-bezier(.4, 0, .22, 1);
+}
+
+.pswp--open {
+  display: block;
+}
+
+.pswp--zoom-allowed .pswp__img {
+  /* autoprefixer: off */
+  cursor: zoom-in;
+}
+
+.pswp--zoomed-in .pswp__img {
+  /* autoprefixer: off */
+  cursor: grab;
+}
+
+.pswp--dragging .pswp__img {
+  /* autoprefixer: off */
+  cursor: grabbing;
+}
+
+
+/*
+  Background is added as a separate element.
+  As animating opacity is much faster than animating rgba() background-color.
+*/
+
+.pswp__bg {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: $pswp__background-color;
+  opacity: 0;
+  will-change: opacity;
+}
+
+.pswp__scroll-wrap {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.pswp__container,
+.pswp__zoom-wrap {
+  touch-action: none;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+
+
+/* Prevent selection and tap highlights */
+
+.pswp__container,
+.pswp__img {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-touch-callout: none;
+  user-select: none;
+}
+
+.pswp__zoom-wrap {
+  position: absolute;
+  width: 100%;
+  transform-origin: left top;
+  /* for open/close transition */
+  transition: transform $pswp__show-hide-transition-duration cubic-bezier(.4, 0, .22, 1);
+}
+
+.pswp__bg {
+  will-change: opacity;
+  /* for open/close transition */
+  transition: opacity $pswp__show-hide-transition-duration cubic-bezier(.4, 0, .22, 1);
+}
+
+.pswp--animated-in {
+  .pswp__bg,
+  .pswp__zoom-wrap {
+    transition: none;
+  }
+}
+
+.pswp__container,
+.pswp__zoom-wrap {
+}
+
+.pswp__item {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  overflow: hidden;
+}
+
+.pswp__img {
+  position: absolute;
+  width: auto;
+  height: auto;
+  top: 0;
+  left: 0;
+}
+
+
+/*
+  stretched thumbnail or div placeholder element (see below)
+  style is added to avoid flickering in webkit/blink when layers overlap
+*/
+
+.pswp__img--placeholder {
+}
+
+
+/*
+  div element that matches size of large image
+  large image loads on top of it
+*/
+
+.pswp__img--placeholder--blank {
+  background: $pswp__placeholder-color;
+}
+
+.pswp--ie .pswp__img {
+  width: 100% !important;
+  height: auto !important;
+  left: 0;
+  top: 0;
+}
+
+
+/*
+  Error message appears when image is not loaded
+  (JS option errorMsg controls markup)
+*/
+
+.pswp__error-msg {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  width: 100%;
+  text-align: center;
+  font-size: 14px;
+  line-height: 16px;
+  margin-top: -8px;
+  color: $pswp__error-text-color;
+}
+
+.pswp__error-msg a {
+  color: $pswp__error-text-color;
+  text-decoration: underline;
+}
+
+
+/*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */
+
+
+/*
+
+  Contents:
+
+  1. Buttons
+  2. Share modal and links
+  3. Index indicator ("1 of X" counter)
+  4. Caption
+  5. Loading indicator
+  6. Additional styles (root element, top bar, idle state, hidden state, etc.)
+
+*/
+
+// PhotoSwipe uses Autoprefixer, so vendor prefixed are added automatically when needed.
+
+/*
+
+  1. Buttons
+
+ */
+
+
+/* <button> css reset */
+
+.pswp__button {
+  width: 44px;
+  height: 44px;
+  position: relative;
+  background: none;
+  cursor: pointer;
+  overflow: visible;
+  display: block;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  float: right;
+  opacity: 0.75;
+  transition: opacity 0.2s;
+  box-shadow: none;
+  &:focus,
+  &:hover {
+    opacity: 1;
+  }
+  &:active {
+    outline: none;
+    opacity: 0.9;
+  }
+  &::-moz-focus-inner {
+    padding: 0;
+    border: 0
+  }
+}
+
+
+/* pswp__ui--over-close class it added when mouse is over element that should close gallery */
+
+.pswp__ui--over-close .pswp__button--close {
+  opacity: 1;
+}
+
+.pswp__button,
+.pswp__button--arrow--left:before,
+.pswp__button--arrow--right:before {
+  background: $pswp__button-background 0 0 no-repeat;
+  background-size: 264px 88px;
+  width: 44px;
+  height: 44px;
+}
+
+@media (-webkit-min-device-pixel-ratio: 1.1),
+  (min-resolution: 105dpi),
+  (min-resolution: 1.1dppx) {
+  /* Serve SVG sprite if browser supports SVG and resolution is more than 105dpi */
+  .pswp--svg .pswp__button,
+  .pswp--svg .pswp__button--arrow--left:before,
+  .pswp--svg .pswp__button--arrow--right:before {
+    background-image: $pswp__button-background-image;
+  }
+  .pswp--svg .pswp__button--arrow--left,
+  .pswp--svg .pswp__button--arrow--right {
+    background: none;
+  }
+}
+
+.pswp__button--close {
+  background-position: 0 -44px;
+}
+
+.pswp__button--share {
+  background-position: -44px -44px;
+}
+
+.pswp__button--fs {
+  display: none;
+}
+
+.pswp--supports-fs .pswp__button--fs {
+  display: block;
+}
+
+.pswp--fs .pswp__button--fs {
+  background-position: -44px 0;
+}
+
+.pswp__button--zoom {
+  display: none;
+  background-position: -88px 0;
+}
+
+.pswp--zoom-allowed .pswp__button--zoom {
+  display: block;
+}
+
+.pswp--zoomed-in .pswp__button--zoom {
+  background-position: -132px 0;
+}
+
+
+/* no arrows on touch screens */
+
+.pswp--touch {
+  .pswp__button--arrow--left,
+  .pswp__button--arrow--right {
+    visibility: hidden;
+  }
+}
+
+
+/*
+  Arrow buttons hit area
+  (icon is added to :before pseudo-element)
+*/
+
+.pswp__button--arrow--left,
+.pswp__button--arrow--right {
+  background: none;
+  top: 50%;
+  margin-top: -50px;
+  width: 70px;
+  height: 100px;
+  position: absolute;
+}
+
+.pswp__button--arrow--left {
+  left: 0;
+}
+
+.pswp__button--arrow--right {
+  right: 0;
+}
+
+.pswp__button--arrow--left:before,
+.pswp__button--arrow--right:before {
+  content: "";
+  top: 35px;
+  background-color: rgba(0, 0, 0, 0.3);
+  height: 30px;
+  width: 32px;
+  position: absolute;
+}
+
+.pswp__button--arrow--left:before {
+  left: 6px;
+  background-position: -138px -44px;
+}
+
+.pswp__button--arrow--right:before {
+  right: 6px;
+  background-position: -94px -44px;
+}
+
+
+/*
+
+  2. Share modal/popup and links
+
+ */
+
+.pswp__counter,
+.pswp__share-modal {
+  user-select: none;
+}
+
+.pswp__share-modal {
+  display: block;
+  background: rgba(0, 0, 0, 0.5);
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  padding: 10px;
+  position: absolute;
+  z-index: $pswp__root-z-index + 100;
+  opacity: 0;
+  transition: opacity 0.25s ease-out;
+  will-change: opacity;
+}
+
+.pswp__share-modal--hidden {
+  display: none;
+}
+
+.pswp__share-tooltip {
+  z-index: $pswp__root-z-index + 120;
+  position: absolute;
+  background: #FFF;
+  top: 56px;
+  border-radius: 2px;
+  display: block;
+  width: auto;
+  right: 44px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
+  transform: translateY(6px);
+  transition: transform 0.25s;
+  will-change: transform;
+  a {
+    display: block;
+    padding: 8px 12px;
+    color: #000;
+    text-decoration: none;
+    font-size: 14px;
+    line-height: 18px;
+    &:hover {
+      text-decoration: none;
+      color: #000;
+    }
+    &:first-child {
+      /* round corners on the first/last list item */
+      border-radius: 2px 2px 0 0;
+    }
+    &:last-child {
+      border-radius: 0 0 2px 2px;
+    }
+  }
+}
+
+.pswp__share-modal--fade-in {
+  opacity: 1;
+  .pswp__share-tooltip {
+    transform: translateY(0);
+  }
+}
+
+
+/* increase size of share links on touch devices */
+
+.pswp--touch .pswp__share-tooltip a {
+  padding: 16px 12px;
+}
+
+a.pswp__share--facebook {
+  &:before {
+    content: "";
+    display: block;
+    width: 0;
+    height: 0;
+    position: absolute;
+    top: -12px;
+    right: 15px;
+    border: 6px solid rgba(0, 0, 0, 0);
+    border-bottom-color: #FFF;
+    -webkit-pointer-events: none;
+    -moz-pointer-events: none;
+    pointer-events: none;
+  }
+  &:hover {
+    background: #3E5C9A;
+    color: #FFF;
+    &:before {
+      border-bottom-color: #3E5C9A;
+    }
+  }
+}
+
+a.pswp__share--twitter {
+  &:hover {
+    background: #55ACEE;
+    color: #FFF;
+  }
+}
+
+a.pswp__share--pinterest {
+  &:hover {
+    background: #CCC;
+    color: #CE272D;
+  }
+}
+
+a.pswp__share--download {
+  &:hover {
+    background: #DDD;
+  }
+}
+
+
+/*
+
+  3. Index indicator ("1 of X" counter)
+
+ */
+
+.pswp__counter {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 44px;
+  font-size: 13px;
+  line-height: 44px;
+  color: #FFF;
+  opacity: 0.75;
+  padding: 0 10px;
+}
+
+
+/*
+
+  4. Caption
+
+ */
+
+.pswp__caption {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  min-height: 44px;
+  small {
+    font-size: 11px;
+    color: #BBB;
+  }
+}
+
+.pswp__caption__center {
+  text-align: center;
+  max-width: 500px;
+  margin: 0 auto;
+  font-size: 13px;
+  padding: 10px;
+  line-height: 20px;
+  color: #CCC;
+}
+
+.pswp__caption--empty {
+  display: none;
+}
+
+
+/* Fake caption element, used to calculate height of next/prev image */
+
+.pswp__caption--fake {
+  visibility: hidden;
+}
+
+
+/*
+
+  5. Loading indicator (preloader)
+
+  You can play with it here - http://codepen.io/dimsemenov/pen/yyBWoR
+
+ */
+
+.pswp__preloader {
+  width: 44px;
+  height: 44px;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  margin-left: -22px;
+  opacity: 0;
+  transition: opacity 0.25s ease-out;
+  will-change: opacity;
+  direction: ltr;
+}
+
+.pswp__preloader__icn {
+  width: 20px;
+  height: 20px;
+  margin: 12px;
+}
+
+.pswp__preloader--active {
+  opacity: 1;
+  .pswp__preloader__icn {
+    /* We use .gif in browsers that don't support CSS animation */
+    background: $pswp__preloader__icn-background 0 0 no-repeat;
+  }
+}
+
+.pswp--css_animation {
+  .pswp__preloader--active {
+    opacity: 1;
+    .pswp__preloader__icn {
+      animation: clockwise 500ms linear infinite;
+    }
+    .pswp__preloader__donut {
+      animation: donut-rotate 1000ms cubic-bezier(.4, 0, .22, 1) infinite;
+    }
+  }
+  .pswp__preloader__icn {
+    background: none;
+    opacity: 0.75;
+    width: 14px;
+    height: 14px;
+    position: absolute;
+    left: 15px;
+    top: 15px;
+    margin: 0;
+  }
+  .pswp__preloader__cut {
+    /*
+      The idea of animating inner circle is based on Polymer ("material") loading indicator
+       by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html
+    */
+    position: relative;
+    width: 7px;
+    height: 14px;
+    overflow: hidden;
+  }
+  .pswp__preloader__donut {
+    box-sizing: border-box;
+    width: 14px;
+    height: 14px;
+    border: 2px solid #FFF;
+    border-radius: 50%;
+    border-left-color: transparent;
+    border-bottom-color: transparent;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: none;
+    margin: 0;
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  .pswp__preloader {
+    position: relative;
+    left: auto;
+    top: auto;
+    margin: 0;
+    float: right;
+  }
+}
+
+@keyframes clockwise {
+  0% {
+    transform: rotate(0deg)
+  }
+  100% {
+    transform: rotate(360deg)
+  }
+}
+
+@keyframes donut-rotate {
+  0% {
+    transform: rotate(0)
+  }
+  50% {
+    transform: rotate(-140deg)
+  }
+  100% {
+    transform: rotate(0)
+  }
+}
+
+
+/*
+
+  6. Additional styles
+
+ */
+
+
+/* root element of UI */
+
+.pswp__ui {
+  -webkit-font-smoothing: auto;
+  visibility: visible;
+  opacity: 1;
+  z-index: $pswp__root-z-index + 50;
+}
+
+
+/* top black bar with buttons and "1 of X" indicator */
+
+.pswp__top-bar {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 44px;
+  width: 100%;
+}
+
+.pswp__caption,
+.pswp__top-bar,
+.pswp--has_mouse .pswp__button--arrow--left,
+.pswp--has_mouse .pswp__button--arrow--right {
+  will-change: opacity;
+  transition: opacity $pswp__controls-transition-duration cubic-bezier(.4, 0, .22, 1);
+}
+
+
+/* pswp--has_mouse class is added only when two subsequent mousemove events occur */
+
+.pswp--has_mouse {
+  .pswp__button--arrow--left,
+  .pswp__button--arrow--right {
+    visibility: visible;
+  }
+}
+
+.pswp__top-bar,
+.pswp__caption {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+
+/* pswp__ui--fit class is added when main image "fits" between top bar and bottom bar (caption) */
+
+.pswp__ui--fit {
+  .pswp__top-bar,
+  .pswp__caption {
+    background-color: rgba(0, 0, 0, 0.3);
+  }
+}
+
+
+/* pswp__ui--idle class is added when mouse isn't moving for several seconds (JS option timeToIdle) */
+
+.pswp__ui--idle {
+  .pswp__top-bar {
+    opacity: 0;
+  }
+  .pswp__button--arrow--left,
+  .pswp__button--arrow--right {
+    opacity: 0;
+  }
+}
+
+
+/*
+  pswp__ui--hidden class is added when controls are hidden
+  e.g. when user taps to toggle visibility of controls
+*/
+
+.pswp__ui--hidden {
+  .pswp__top-bar,
+  .pswp__caption,
+  .pswp__button--arrow--left,
+  .pswp__button--arrow--right {
+    /* Force paint & create composition layer for controls. */
+    opacity: 0.001;
+  }
+}
+
+
+/* pswp__ui--one-slide class is added when there is just one item in gallery */
+
+.pswp__ui--one-slide {
+  .pswp__button--arrow--left,
+  .pswp__button--arrow--right,
+  .pswp__counter {
+    display: none;
+  }
+}
+
+.pswp__element--disabled {
+  display: none !important;
+}
+
+@if $pswp__include-minimal-style==true {
+  .pswp--minimal--dark {
+    .pswp__top-bar {
+      background: none;
+    }
+  }
+}
+
+.mdb-lightbox {
+  figure {
+    margin: 0;
+    float: left;
+    .img-fluid {
+      display: inline
+    }
+    img {
+      cursor: zoom-in;
+      transition: $mdb-lightbox-figure-img-transition;
+      border-radius: 0;
+      &:hover {
+        opacity: $mdb-lightbox-figure-img-hover-opacity;
+      }
+    }
+    figcaption {
+      display: none;
+    }
+  }
+  &.no-margin {
+    [class*="col-"] {
+      padding: 0;
+    }
+  }
+  [class*="col-"] {
+    padding: $mdb-lightbox-no-margin-padding;
+  }
+}

html/scss/pro/_material-select.scss

@@ -0,0 +1,222 @@
+// Material selct
+%user-select-none {
+  user-select: none;
+}
+
+.select-label {
+  position: absolute;
+}
+
+.select-wrapper {
+  position: relative;
+  input {
+    &.select-dropdown {
+      position: relative;
+      cursor: pointer;
+      background-color: transparent;
+      border: none;
+      border-bottom: 1px solid $input-border-color;
+      outline: none;
+      height: $material-select-wrapper-input-dropdown-height;
+      line-height: $material-select-wrapper-input-dropdown-line-height;
+      width: 100%;
+      font-size: $material-select-wrapper-input-dropdown-font-size;
+      margin: 0 0 $material-select-wrapper-input-dropdown-margin 0;
+      padding: 0;
+      display: block;
+      &:disabled {
+        color: $material-select-wrapper-input-dropdown-disabled-color;
+        border-bottom-color: $material-select-wrapper-input-dropdown-disabled-border-bottom-color;
+        cursor: default;
+      }
+    }
+  }
+  .select-dropdown {
+    @extend %user-select-none;
+  }
+  .search-wrap {
+    padding: $material-select-wrapper-search-wrap-py 0;
+    display: block;
+    margin: 0 $material-select-wrapper-search-wrap-mx;
+    .md-form {
+      margin-top: 0;
+      input {
+        padding-bottom: $material-select-wrapper-search-wrap-input-pb;
+        margin-bottom: 0;
+      }
+    }
+  }
+  span.caret {
+    color: initial;
+    position: absolute;
+    right: 0;
+    top: $material-select-wrapper-span-caret-top;
+    font-size: $material-select-wrapper-span-caret-font-size;
+    &.disabled {
+      color: $input-disabled-color;
+    }
+  }
+  & + label {
+    position: absolute;
+    top: $material-select-wrapper-span-caret-label-top;
+    font-size: $label-font-size;
+  }
+  i {
+    color: $material-select-wrapper-input-dropdown-disabled-color;
+  }
+  ul {
+    list-style-type: none;
+    padding-left: 0;
+  }
+}
+
+select {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  display: none !important;
+  &.browser-default {
+    display: block !important;
+  }
+  &:disabled {
+    color: $material-select-wrapper-input-dropdown-disabled-color;
+  }
+}
+
+.select-dropdown {
+  [type=checkbox]:disabled:not(:checked)+label:before {
+    margin-left: 0;
+    margin-top: 0;
+  }
+  ul {
+    list-style-type: none;
+    padding: 0;
+  }
+  li {
+    img {
+      height: $dropdown-item-height - 10;
+      width: $dropdown-item-height - 10;
+      margin: $material-select-dropdown-li-img-my $material-select-dropdown-li-img-mx;
+      float: right;
+    }
+    &.disabled, &.disabled > span, &.optgroup {
+      color: $material-select-wrapper-input-dropdown-disabled-color;
+      background-color: transparent!important;
+      cursor: context-menu;
+    }
+    &.optgroup {
+      border-top: 1px solid $dropdown-hover-bg-color;
+      &.selected > span {
+        color: $material-select-dropdown-li-optgroup-selected-span;
+      }
+      & > span {
+        color: $material-select-dropdown-li-optgroup-span;
+      }
+    }
+  }
+}
+
+.multiple-select-dropdown li [type="checkbox"] + label {
+  height: $material-select-multiple-select-dropdown-height;
+}
+
+.dropdown-content {
+  box-shadow: $z-depth-1;
+  background-color: $dropdown-bg-color;
+  margin: 0;
+  display: none;
+  min-width: $material-select-dropdown-content-min-width;
+  max-height: $material-select-dropdown-content-max-height;
+  overflow-y: auto;
+  opacity: 0;
+  position: absolute;
+  z-index: 999;
+  will-change: width, height;
+  li {
+    clear: both;
+    color: $material-select-dropdown-content-li-color;
+    cursor: pointer;
+    line-height: $material-select-dropdown-content-li-line-height;
+    width: 100%;
+    text-align: left;
+    text-transform: none;
+    &:hover,
+    &.active {
+      background-color: $dropdown-hover-bg-color;
+    }
+    & > a,
+    & > span {
+      font-size: $material-select-dropdown-content-li-span-font-size;
+      color: $dropdown-color;
+      display: block;
+      padding: $material-select-dropdown-content-li-span-padding;
+    }
+    // Icon alignment override
+    & > a > i {
+      height: inherit;
+      line-height: inherit;
+    }
+  }
+}
+
+// Material select color variations
+.colorful-select {
+  .dropdown-content {
+    padding: $material-select-colorful-dropdown-content-padding;
+    li {
+      &.active span {
+        color: $material-select-colorful-dropdown-content-li-active-color !important;
+        box-shadow: $z-depth-1-half;
+        [type="checkbox"]:checked + label:before {
+          border-color: transparent $white $white transparent;
+        }
+      }
+      a:hover, span:hover {
+        box-shadow: $z-depth-2;
+        color: $material-select-colorful-dropdown-content-li-active-color !important;
+        transition: $material-select-colorful-dropdown-content-li-hover-transition;
+        border-radius: $material-select-colorful-dropdown-content-li-hover-border-radius;
+        [type="checkbox"] + label:before {
+          border-color: $white-base;
+        }
+        [type="checkbox"]:checked + label:before {
+          border-color: transparent $white $white transparent;
+        }
+      }
+      optgroup {
+      }
+      &.disabled,
+      &:disabled,
+      &.optgroup {
+        &.active span {
+          box-shadow: none;
+          color: $material-select-wrapper-input-dropdown-disabled-color !important;
+          border-bottom-color: $material-select-wrapper-input-dropdown-disabled-color;
+          cursor: default;
+        }
+        a:hover, span:hover {
+          box-shadow: none;
+          color: $material-select-wrapper-input-dropdown-disabled-color !important;
+          border-bottom-color: $material-select-wrapper-input-dropdown-disabled-color;
+          cursor: default;
+          background-color: $white !important;
+        }
+        label {
+          cursor: default;
+        }
+      }
+    }
+  }
+}
+
+@each $type, $color in $dropdown-colors {
+  .dropdown-#{$type} {
+    .dropdown-content li {
+      &.active, a, span:hover {
+        background-color: $color !important;
+      }
+    }
+    .search-wrap input:focus {
+      border-bottom: 1px solid $color;
+      box-shadow: 0 1px 0 0 $color;
+    }
+  }
+}

html/scss/pro/_msc.scss

@@ -0,0 +1,77 @@
+// Miscellenous
+// Advanced tables
+.table {
+  a {
+    margin-right: $advanced-table-a-mr !important;
+  }
+  fieldset {
+    &.form-check {
+      margin-bottom: 0;
+    }
+    label {
+      &.form-check-label {
+        height: $advanced-table-fieldset-label-height;
+      }
+    }
+  }
+}
+
+// Product table
+.product-table {
+  img {
+    max-height: $product-table-img-max-height;
+    min-width: $product-table-img-min-width;
+  }
+  td {
+    vertical-align: middle;
+  }
+}
+
+.streak {
+  display: block;
+  position: relative;
+  overflow: hidden;
+  height: 250px;
+  &.streak-md {
+    height: 400px;
+    @media (max-width: 736px) {
+      height: 300px;
+    }
+  }
+  &.streak-lg {
+    height: 650px;
+    @media (max-width: 450px) {
+      height: 900px;
+    }
+  }
+  &.streak-long {
+    height: 200px;
+    @media (max-width: 450px) {
+      height: 620px;
+    }
+  }
+  &.streak-long-2 {
+    height: 400px;
+    @media (max-width: 450px) {
+      height: 700px;
+    }
+  }
+  &.streak-photo {
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+    @media (min-width: 1366px) {
+      background-attachment: fixed;
+    }
+  }
+  &.no-flex {
+    padding-top: 3.125rem;
+    padding-bottom: 3.125rem;
+    height: auto;
+  }
+}
+
+// Gradients Premium
+@each $name, $val in $gradients-premium {
+  @include make-gradient($name, $val);
+}

html/scss/pro/_navbars.scss

@@ -0,0 +1,62 @@
+// Navbars pro
+.navbar {
+  .nav-item {
+    &.avatar {
+      padding: 0;
+      &.active {
+        background-color: transparent!important;
+      }
+      .dropdown-toggle {
+        padding: 0;
+        img {
+          height: $navbar-avatar-height;
+        }
+        &:after {
+          display: none;
+        }
+      }
+    }
+  }
+}
+
+.double-nav {
+  @media (max-width: $medium-screen) {
+    padding-top: $navbar-double-small-padding;
+    padding-bottom: $navbar-double-small-padding;
+  }
+  .container {
+    @media (max-width: 768px) {
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
+  a {
+    font-size: $navbar-double-font-size;
+    color: $white-base;
+  }
+  .breadcrumb-dn {
+    p {
+      margin: 0;
+      padding-top: 0;
+      padding-left: $navbar-breadcrumb-dn-padding;
+    }
+    @media (max-width: 993px) {
+      display: none;
+    }
+  }
+  .button-collapse {
+    position: absolute;
+    left: $navbar-button-collapse-left;
+    font-size: $navbar-button-collapse-font-size;
+    @media (min-width: $sidenav-breakpoint) {
+      display: none;
+    }
+    @media (max-width: $sidenav-breakpoint) {
+      display: block;
+      position: relative;
+      font-size: $navbar-button-collapse-fs-sm;
+      margin-right: $navbar-button-collapse-mx;
+      margin-left: $navbar-button-collapse-mx;
+    }
+  }
+}

html/scss/pro/_parallax.scss

@@ -0,0 +1,21 @@
+// Just another parallax
+.jarallax-keep-img {
+  position: relative;
+  z-index: 0;
+}
+
+.jarallax-keep-img>.jarallax-img {
+  position: relative;
+  display: block;
+  max-width: 100%;
+  height: auto;
+  z-index: -100;
+}
+
+span[data-jarallax-element] {
+  display: inline-block;
+}
+
+.jarallax {
+  min-height: 600px;
+}

html/scss/pro/_progress.scss

@@ -0,0 +1,434 @@
+// Progress
+.progress {
+  box-shadow: none;
+  position: relative;
+  display: block;
+  width: 100%;
+  height: $progress-height-mdb;
+  overflow: hidden;
+  margin-bottom: $progress-margin-bottom;
+  background-color: $grey-lighten-3;
+  .progress-bar {
+    box-shadow: none;
+    height: $progress-bar-height;
+    border-radius: 0;
+    background-color: $primary-color-dark;
+  }
+  .progress-bar-animated {
+    transition: $progress-bar-animated-transition;
+  }
+  .indeterminate {
+    background-color: $blue-lighten-3;
+    &:before {
+      content: "";
+      position: absolute;
+      background-color: inherit;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      will-change: left, right;
+      // Custom bezier
+      animation: $progress-indeterminate-before-animation;
+    }
+    &:after {
+      content: "";
+      position: absolute;
+      background-color: inherit;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      will-change: left, right;
+      // Custom bezier
+      animation: $progress-indeterminate-after-animation;
+      animation-delay: $progress-indeterminate-after-animation-delay;
+    }
+  }
+  @include keyframes(indeterminate) {
+    0% {
+      left: -35%;
+      right: 100%;
+    }
+    60% {
+      left: 100%;
+      right: -90%;
+    }
+    100% {
+      left: 100%;
+      right: -90%;
+    }
+  }
+  @include keyframes(indeterminate-short) {
+    0% {
+      left: -200%;
+      right: 100%;
+    }
+    60% {
+      left: 107%;
+      right: -8%;
+    }
+    100% {
+      left: 107%;
+      right: -8%;
+    }
+  }
+}
+
+
+/*********************
+  CIRCLE
+**********************/
+
+
+/*
+    @license
+    Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+    This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+    The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+    The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+    Code distributed by Google as part of the polymer project is also
+    subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+ */
+
+
+/**************************/
+
+
+/* STYLES FOR THE SPINNER */
+
+
+/**************************/
+
+
+/*
+ * Constants:
+ *      STROKEWIDTH = 3px
+ *      ARCSIZE     = 270 degrees (amount of circle the arc takes up)
+ *      ARCTIME     = 1333ms (time it takes to expand and contract arc)
+ *      ARCSTARTROT = 216 degrees (how much the start location of the arc
+ *                                should rotate each time, 216 gives us a
+ *                                5 pointed star shape (it's 360/5 * 3).
+ *                                For a 7 pointed star, we might do
+ *                                360/7 * 3 = 154.286)
+ *      CONTAINERWIDTH = 28px
+ *      SHRINK_TIME = 400ms
+ */
+
+.preloader-wrapper {
+  display: inline-block;
+  position: relative;
+  width: $progress-preloader-width;
+  height: $progress-preloader-height;
+  font-size: 0;
+  &.small {
+    width: $progress-preloader-small-width;
+    height: $progress-preloader-small-height;
+  }
+  &.big {
+    width: $progress-preloader-big-width;
+    height: $progress-preloader-big-height;
+  }
+  &.active {
+    /* duration: 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */
+    animation: $progress-preloader-active-animation;
+  }
+  &.crazy{
+    animation-duration: $progress-preloader-crazy-animation;
+  }
+  .spinner-layer {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    /**
+         * Patch the gap that appear between the two adjacent div.circle-clipper while the
+         * spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11).
+         */
+    .gap-patch {
+      position: absolute;
+      top: 0;
+      left: $progress-spinner-gap-left;
+      width: $progress-spinner-gap-width;
+      height: 100%;
+      overflow: hidden;
+      border-color: inherit;
+      .circle {
+        width: $progress-spinner-gap-circle-width;
+        left: $progress-spinner-gap-circle-left;
+      }
+    }
+
+    .circle-clipper {
+      display: inline-block;
+      position: relative;
+      width: $progress-spinner-circle-clipper-width;
+      height: 100%;
+      overflow: hidden;
+      border-color: inherit;
+      .circle {
+        width: $progress-spinner-circle-clipper-circle-width;
+        height: 100%;
+        border-width: $progress-spinner-circle-clipper-circle-border-width;
+        /* STROKEWIDTH */
+        border-style: solid;
+        border-color: inherit;
+        border-bottom-color: transparent !important;
+        border-radius: $progress-spinner-circle-clipper-circle-border-radius;
+        animation: none;
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+      }
+      &.left .circle {
+        left: 0;
+        border-right-color: transparent !important;
+        transform: $progress-spinner-circle-clipper-left-circle-transform;
+      }
+      &.right .circle {
+        left: $progress-spinner-circle-clipper-right-circle-left;
+        border-left-color: transparent !important;
+        transform: $progress-spinner-circle-clipper-right-circle-transform;
+      }
+    }
+
+  }
+  .spinner-blue,
+  .spinner-blue-only {
+    border-color: $primary-color;
+  }
+
+  .spinner-red,
+  .spinner-red-only {
+    border-color: #db4437;
+  }
+
+  .spinner-yellow,
+  .spinner-yellow-only {
+    border-color: #f4b400;
+  }
+
+  .spinner-green,
+  .spinner-green-only {
+    border-color: #0f9d58;
+  }
+}
+
+@include keyframes(container-rotate){
+  to{
+    transform: rotate(360deg);
+  }
+}
+
+/**
+ * IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee):
+ *
+ * iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it doesn't
+ * guarantee that the animation will start _exactly_ after that value. So we avoid using
+ * animation-delay and instead set custom keyframes for each color (as redundant as it
+ * seems).
+ *
+ * We write out each animation in full (instead of separating animation-name,
+ * animation-duration, etc.) because under the polyfill, Safari does not recognize those
+ * specific properties properly, treats them as -webkit-animation, and overrides the
+ * other animation rules. See https://github.com/Polymer/platform/issues/53.
+ */
+
+.active {
+  .spinner-layer {
+    &.spinner-blue {
+      /* durations: 4 * ARCTIME */
+      @include progress-animation-default($progress-active-spinner-main, $progress-active-spinner-blue);
+    }
+    &.spinner-red {
+      /* durations: 4 * ARCTIME */
+      @include progress-animation-default($progress-active-spinner-main, $progress-active-spinner-red);
+    }
+    &.spinner-yellow {
+      /* durations: 4 * ARCTIME */
+      @include progress-animation-default($progress-active-spinner-main, $progress-active-spinner-yellow);
+    }
+    &.spinner-green {
+      /* durations: 4 * ARCTIME */
+      @include progress-animation-default($progress-active-spinner-main, $progress-active-spinner-green);
+    }
+    &.spinner-blue-only,
+    &.spinner-red-only,
+    &.spinner-yellow-only,
+    &.spinner-green-only,
+    &.spinner-primary-color-only {
+      /* durations: 4 * ARCTIME */
+      opacity: 1;
+      @include progress-animation-default($progress-active-spinner-main);
+    }
+  }
+  .circle-clipper.left .circle {
+    /* duration: ARCTIME */
+    animation: $progress-active-circle-left-spin;
+  }
+  .circle-clipper.right .circle {
+    /* duration: ARCTIME */
+    animation: $progress-active-circle-right-spin;
+  }
+}
+
+@include keyframes(fill-unfill-rotate){
+  12.5% {
+    transform: rotate(135deg);
+  }
+  /* 0.5 * ARCSIZE */
+  25% {
+    transform: rotate(270deg);
+  }
+  /* 1   * ARCSIZE */
+  37.5% {
+    transform: rotate(405deg);
+  }
+  /* 1.5 * ARCSIZE */
+  50% {
+    transform: rotate(540deg);
+  }
+  /* 2   * ARCSIZE */
+  62.5% {
+    transform: rotate(675deg);
+  }
+  /* 2.5 * ARCSIZE */
+  75% {
+    transform: rotate(810deg);
+  }
+  /* 3   * ARCSIZE */
+  87.5% {
+    transform: rotate(945deg);
+  }
+  /* 3.5 * ARCSIZE */
+  to {
+    transform: rotate(1080deg);
+  }
+  /* 4   * ARCSIZE */
+}
+
+@include keyframes(blue-fade-in-out) {
+  from {
+    opacity: 1;
+  }
+  25% {
+    opacity: 1;
+  }
+  26% {
+    opacity: 0;
+  }
+  89% {
+    opacity: 0;
+  }
+  90% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@include keyframes(red-fade-in-out) {
+  from {
+    opacity: 0;
+  }
+  15% {
+    opacity: 0;
+  }
+  25% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 1;
+  }
+  51% {
+    opacity: 0;
+  }
+}
+
+@include keyframes (yellow-fade-in-out) {
+  from {
+    opacity: 0;
+  }
+  40% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  75% {
+    opacity: 1;
+  }
+  76% {
+    opacity: 0;
+  }
+}
+
+@include keyframes (green-fade-in-out) {
+  from {
+    opacity: 0;
+  }
+  65% {
+    opacity: 0;
+  }
+  75% {
+    opacity: 1;
+  }
+  90% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@include keyframes(left-spin) {
+  from {
+    transform: rotate(130deg);
+  }
+  50% {
+    transform: rotate(-5deg);
+  }
+  to {
+    transform: rotate(130deg);
+  }
+}
+
+@include keyframes(right-spin) {
+  from {
+    transform: rotate(-130deg);
+  }
+  50% {
+    transform: rotate(5deg);
+  }
+  to {
+    transform: rotate(-130deg);
+  }
+}
+
+#spinnerContainer.cooldown {
+  /* duration: SHRINK_TIME */
+  @include progress-animation-default($progress-spinner-container-animation-rotate, $progress-spinner-container-animation-fade);
+}
+
+@include keyframes(fade-out){
+  from{
+    opacity: 1;
+  }
+  to{
+    opacity: 0;
+  }
+}
+
+#mdb-preloader {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: $black;
+  /* change if the mask should have another color then white */
+  z-index: 9998;
+  /* makes sure it stays on top */
+  height: 100%;
+  width: 100%;
+}

html/scss/pro/_radio.scss

@@ -0,0 +1,110 @@
+// Remove default Radio Buttons
+[type="radio"]:not(:checked),
+[type="radio"]:checked {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+// Radio buttons
+.form-check-input[type="radio"],
+label.btn input[type="radio"] {
+  &:not(:checked) + label,
+  &:checked + label {
+    position: relative;
+    padding-left: $radio-label-pl;
+    cursor: pointer;
+    display: inline-block;
+    height: $radio-label-height;
+    line-height: $radio-label-line-height;
+    transition: $radio-label-transition;
+    user-select: none;
+  }
+
+  & + label:before,
+  & + label:after {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    margin: $radio-label-before-after-margin;
+    width: $radio-label-before-after-width;
+    height: $radio-label-before-after-height;
+    z-index: 0;
+    transition: $radio-label-transition;
+  }
+
+  // Unchecked styles
+  &:not(:checked) + label:before,
+  &:not(:checked) + label:after,
+  &:checked + label:before,
+  &:checked + label:after,
+  &.with-gap:checked + label:before,
+  &.with-gap:checked + label:after {
+    border-radius: $radio-label-border-radius;
+  }
+
+  &:not(:checked) + label:before,
+  &:not(:checked) + label:after {
+    border: $radio-label-border-width solid $radio-empty-color;
+  }
+
+  &:not(:checked) + label:after {
+    transform: scale(0);
+  }
+
+  // Checked styles
+  &:checked + label:before {
+    border: $radio-label-border-width solid transparent;
+  }
+
+  &:checked + label:after,
+  &.with-gap:checked + label:before,
+  &.with-gap:checked + label:after {
+    border: $radio-label-border-width solid $radio-fill-color;
+  }
+
+  &:checked + label:after,
+  &.with-gap:checked + label:after {
+    background-color: $radio-fill-color;
+  }
+
+  &:checked + label:after {
+    transform: $radio-label-checked-transform;
+  }
+
+  // Radio With gap
+  &.with-gap:checked + label:after {
+    transform: $radio-label-with-gap-checked-transform;
+  }
+
+  // Disabled Radio With gap
+  &.with-gap:disabled:checked + label:before {
+    border: $radio-label-border-width solid $input-disabled-color;
+  }
+
+  &.with-gap:disabled:checked + label:after {
+    border: none;
+    background-color: $input-disabled-color;
+  }
+
+  // Disabled style
+  &:disabled:not(:checked) + label:before,
+  &:disabled:checked + label:before {
+    background-color: transparent;
+    border-color: $input-disabled-color;
+  }
+
+  &:disabled + span {
+    color: $input-disabled-color;
+  }
+
+  &:disabled:not(:checked) + span:before {
+    border-color: $input-disabled-color;
+  }
+
+  &:disabled:checked + span:after {
+    background-color: $input-disabled-color;
+    border-color: $input-disabled-solid-color;
+  }
+}

html/scss/pro/_range.scss

@@ -0,0 +1,116 @@
+// Range input
+.range-field {
+  position: relative;
+}
+input[type=range] {
+  cursor: pointer;
+  position: relative;
+  background-color: transparent;
+  border: none;
+  outline: none;
+  width: 100%;
+  margin: $input-range-my $input-range-mx;
+  padding: 0;
+  &:focus {
+    outline: none;
+  }
+  + .thumb {
+    position: absolute;
+    border: none;
+    height: 0;
+    width: 0;
+    border-radius: $border-radius-circle;
+    background-color: $primary-color;
+    top: $input-range-thumb-top;
+    margin-left: $input-range-thumb-margin-left;
+    transform-origin: $input-range-transform-origin;
+    transform: $input-range-transform;
+    .value {
+      display: block;
+      width: $input-range-thumb-value-width;
+      text-align: center;
+      color: $primary-color;
+      font-size: 0;
+      transform: $input-range-thumb-value-transform;
+    }
+    &.active {
+      border-radius: $border-radius-circle $border-radius-circle $border-radius-circle 0;
+      .value {
+        color: $white-base;
+        margin-left: $input-range-active-value-ml;
+        margin-top: $input-range-active-value-mt;
+        font-size: $input-range-active-value-font-size;
+      }
+    }
+  }
+  // Webkit
+  appearance: none;
+  &::-webkit-slider-runnable-track {
+    height: $slider-runnable-track-height;
+    background: $slider-runnable-track-bg;
+    border: none;
+  }
+  &::-webkit-slider-thumb {
+    appearance: none;
+    border: none;
+    height: $slider-thumb-height;
+    width: $slider-thumb-width;
+    border-radius: $border-radius-circle;
+    background-color: $primary-color;
+    transform-origin: $input-range-transform-origin;
+    margin: $slider-thumb-mt 0 0 0;
+    transition: $slider-thumb-transition;
+  }
+  &:focus::-webkit-slider-runnable-track {
+    background: $slider-runnable-track-focus-bg;
+  }
+  // Firefox
+  border: 1px solid $white-base; /* fix for FF unable to apply focus style bug  */
+  &::-moz-range-track { /*required for proper track sizing in FF*/
+    height: $slider-runnable-track-height;
+    background: $slider-runnable-track-bg;
+    border: none;
+  }
+  &::-moz-range-thumb {
+    border: none;
+    height: $slider-thumb-height;
+    width: $slider-thumb-width;
+    border-radius: $border-radius-circle;
+    background: $primary-color;
+    margin-top: $slider-thumb-mt;
+  }
+  &:-moz-focusring { /*hide the outline behind the border*/
+    outline: 1px solid $white-base;
+    outline-offset: -1px;
+  }
+  &:focus::-moz-range-track {
+    background: $slider-runnable-track-bg;
+  }
+  // IE 10+
+  &::-ms-track {
+    height: $slider-runnable-track-height;
+    background: transparent; /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
+    border-color: transparent; /*leave room for the larger thumb to overflow with a transparent border */
+    border-width: $slider-border-width 0;
+    color: transparent; /*remove default tick marks*/
+  }
+  &::-ms-fill-lower {
+    background: $slider-runnable-track-bg;
+  }
+  &::-ms-fill-upper {
+    background: $slider-runnable-track-bg;
+  }
+  &::-ms-thumb {
+    border: none;
+    height: $slider-thumb-height;
+    width: $slider-thumb-width;
+    border-radius: $border-radius-circle;
+    background: $primary-color;
+  }
+  &:focus::-ms-fill-lower {
+    background: $slider-runnable-track-bg;
+  }
+  &:focus::-ms-fill-upper {
+    background: $slider-runnable-track-bg;
+  }
+}

html/scss/pro/_scrollbar.scss

@@ -0,0 +1,132 @@
+// Scroll bar
+.ps {
+  touch-action: auto;
+  overflow: hidden !important;
+  &.ps--active-x > .ps__scrollbar-x-rail,
+  &.ps--active-y > .ps__scrollbar-y-rail {
+    display: block;
+    background-color: transparent;
+  }
+  &.ps--active-y > .ps__scrollbar-y-rail {
+    top: 0 !important;
+  }
+  &.ps--in-scrolling.ps--x {
+    > .ps__scrollbar-x-rail {
+      background-color: $grey-lighten-3;
+      opacity: $scrollbar-ps-xrail-opacity;
+      > .ps__scrollbar-x {
+        background-color: $scrollbar-color-mdb;
+        @include scroll-height(0.6875rem);
+      }
+
+    }
+  }
+  > .ps__scrollbar-x-rail {
+    display: none;
+    position: absolute;
+    /* please don't change 'position' */
+    opacity: 0;
+    @include transition-main($scrollbar-transition-bg, $scrollbar-transition-opacity);
+    bottom: 0rem;
+    /* there must be 'bottom' for ps__scrollbar-x-rail */
+    @include scroll-height(0.9375rem);
+    > .ps__scrollbar-x {
+      position: absolute;
+      /* please don't change 'position' */
+      background-color:$scrollbar-color-mdb-grey;
+      border-radius: $scrollbar-ps-scrollbar-xrail-x-border-radius;
+      @include transition-main($scrollbar-transition-bg, $scrollbar-transition-height, $scrollbar-transition-width, $scrollbar-transition-border-radius);
+      bottom: $scrollbar-ps-scrollbar-xrail-x-bottom;
+      /* there must be 'bottom' for ps__scrollbar-x */
+      @include scroll-height(0.375rem);
+
+    }
+    &:hover > .ps__scrollbar-x,
+    > .ps__scrollbar-x-rail:active > .ps__scrollbar-x {
+      @include scroll-height(0.6875rem);
+    }
+  }
+  &.ps--in-scrolling.ps--y {
+    > .ps__scrollbar-y-rail {
+      background-color: $grey-lighten-3;
+      opacity: $scrollbar-ps-scrollbar-inscrolling-opacity;
+      > .ps__scrollbar-y {
+        background-color: $scrollbar-color-mdb;
+        @include scroll-width(0.6875rem);
+      }
+    }
+  }
+  > .ps__scrollbar-y-rail {
+    display: none;
+    position: absolute;
+    /* please don't change 'position' */
+    opacity: 0;
+    @include transition-main($scrollbar-transition-bg,$scrollbar-transition-opacity);
+    right: 0;
+    /* there must be 'right' for ps__scrollbar-y-rail */
+    @include scroll-width(0.9375rem);
+    z-index: 999;
+    > .ps__scrollbar-y {
+      position: absolute;
+      /* please don't change 'position' */
+      background-color: $scrollbar-color-mdb-grey;
+      border-radius: $scrollbar-ps-scrollbar-scrollbar-y-border-radius;
+      @include transition-main($scrollbar-transition-bg, $scrollbar-transition-height, $scrollbar-transition-width, $scrollbar-transition-border-radius);
+      right: $scrollbar-ps-scrollbar-yrail-y-right;
+      /* there must be 'right' for ps__scrollbar-y */
+      @include scroll-width(0.375rem);
+    }
+    &:hover > .ps__scrollbar-y,
+    > .ps__scrollbar-y-rail:active > .ps__scrollbar-y {
+      @include scroll-width(0.6875rem);
+    }
+  }
+  &:hover.ps--in-scrolling.ps--x {
+    > .ps__scrollbar-x-rail {
+      background-color: $grey-lighten-3;
+      opacity: $scrollbar-ps-hover-inscrolling-xrail-opacity;
+      > .ps__scrollbar-x {
+        background-color: $scrollbar-color-mdb;
+        @include scroll-height(0.6875rem);
+      }
+    }
+  }
+  &:hover.ps--in-scrolling.ps--y {
+    > .ps__scrollbar-y-rail {
+      background-color: $grey-lighten-3;
+      opacity: $scrollbar-ps-hover-inscrolling-xrail-opacity;
+      > .ps__scrollbar-y {
+        background-color: $scrollbar-color-mdb;
+        @include scroll-width(0.6875rem);
+      }
+    }
+  }
+  &:hover > .ps__scrollbar-x-rail,
+  &:hover > .ps__scrollbar-y-rail {
+    opacity: $scrollbar-ps-hover-scrollbar-y-rail-opacity;
+  }
+  &:hover {
+    > .ps__scrollbar-x-rail{
+      &:hover {
+        background-color: $grey-lighten-3;
+        opacity: $scrollbar-ps-hover-inscrolling-xrail-opacity;
+        > .ps__scrollbar-x {
+          background-color: $scrollbar-color-mdb;
+        }
+      }
+    }
+  }
+
+  &:hover {
+    > .ps__scrollbar-y-rail {
+      &:hover {
+        background-color: $grey-lighten-3;
+        opacity:  $scrollbar-ps-hover-inscrolling-xrail-opacity;
+        > .ps__scrollbar-y {
+          background-color: $scrollbar-color-mdb;
+        }
+      }
+    }
+  }
+
+}

html/scss/pro/_scrollspy.scss

@@ -0,0 +1,115 @@
+// Scrollspy
+.nav-pills {
+  &.default-pills {
+    .nav-item {
+      a {
+        text-align: left;
+        color: $Scrollspy-color-mdb;
+        @include scrollspy-border-radius(0);
+        &:hover{
+          background-color: transparent;
+          color: $mdb-color-base;
+          border-left: $scrollspy-navpills-naviteam-hover-border-left solid $mdb-color-base;
+          @include scrollspy-font-weight(500);
+        }
+        &.active {
+          background-color: transparent;
+          color: $mdb-color-base;
+          border-left: $scrollspy-navpills-naviteam-active-border-left solid $mdb-color-base;
+          box-shadow:none;
+          @include scrollspy-font-weight(500);
+          &:hover,
+          &:active,
+          &:focus {
+            background-color: transparent;
+            color: $mdb-color-base;
+            @include scrollspy-font-weight(500);
+          }
+        }
+      }
+    }
+  }
+}
+
+.nav-pills .nav-item+.nav-item {
+  margin-left: 0;
+}
+
+@media only screen and (max-width: 991px) {
+  .sticky,
+  .sticky-placeholder {
+    display: none;
+  }
+}
+
+#scrollspy {
+  @include scroll-width(100%);
+}
+@media only screen and (max-width: $medium-screen) {
+  .col-md-4 .sticky, .col-lg-4 .sticky, .col-xl-4 .sticky {
+    @include scroll-width(12.5rem);
+  }
+}
+
+@media only screen and (min-width: $medium-screen) {
+  .col-md-4 .sticky  .col-lg-4 .sticky, .col-xl-4 .sticky {
+    @include scroll-width(25rem);
+  }
+}
+
+
+@media only screen and (min-width: $large-screen) {
+  .col-md-4 .sticky {
+    @include scroll-width(18.75rem);
+  }
+}
+
+@media only screen and (min-width: $sidenav-breakpoint) {
+  .col-md-4 .sticky {
+    @include scroll-width(21.875rem);
+  }
+}
+
+// Dotted scrollspy
+
+.dotted-scrollspy {
+  display: block;
+  position: fixed;
+  top: $scrollspy-dotted-top;
+  right: 0;
+  transform: $scrollspy-dotted-transform;
+  background: $scrollspy-dotted-bg;
+  @include scrollspy-border-radius-4rows(.125rem, 0, 0, .125rem);
+  li {
+    display: block;
+    padding: $scrollspy-padding;
+    &:first-child {
+      padding-top: $scrollspy-padding-top;
+    }
+    &:last-child {
+      padding-bottom: $scrollspy-padding-bottom;
+    }
+    a {
+      padding: $scrollspy-padding-half;
+      span {
+        display:block;
+        background-color: rgba($white, .54);
+        @include scroll-width(.5rem);
+        @include scroll-height(.5rem);
+        @include scrollspy-border-radius(50%);
+      }
+      &.active {
+        span {
+          background: $white;
+        }
+      }
+    }
+  }
+}
+
+.scrollspy-example {
+  overflow-y: scroll;
+  position: relative;
+  @include scroll-height(12.5rem);
+  padding: $scrollspy-example-padding;
+}

html/scss/pro/_sidenav.scss

@@ -0,0 +1,347 @@
+// Sidenav background variants
+.sn-bg-1 {
+  background-image: url(https://mdbootstrap.com/img/Photos/Others/sidenav1.jpg);
+}
+
+.sn-bg-2 {
+  background-image: url(https://mdbootstrap.com/img/Photos/Others/sidenav2.jpg);
+}
+
+.sn-bg-3 {
+  background-image: url(https://mdbootstrap.com/img/Photos/Others/sidenav3.jpg);
+}
+
+.sn-bg-4 {
+  background-image: url(https://mdbootstrap.com/img/Photos/Others/sidenav4.jpg);
+}
+
+// Sidenav
+.side-nav {
+  position: fixed;
+  width: $sidenav-width;
+  left: 0;
+  top: 0;
+  margin: 0;
+  transform: translateX(-100%);
+  height: 100%;
+  padding-bottom: $sidenav-padding-bottom;
+  background-color: $sidenav-background-color;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+  z-index: 1040;
+  backface-visibility: hidden;
+  overflow: hidden;
+  will-change: transform;
+  backface-visibility: hidden;
+  list-style-type: none;
+  padding: 0;
+  @extend .white-text;
+  box-shadow: $z-depth-1;
+  >ul {
+    max-height: 100vh;
+  }
+  ul {
+    list-style-type: none;
+    list-style: none;
+    padding-left: 0;
+    li {
+      padding: 0;
+    }
+  }
+  &.right-aligned {
+    right: 0;
+    left: auto;
+    transform: translateX(100%);
+  }
+  // Light version
+  &.side-nav-light {
+    background-color: $sidenav-light-bgc;
+    .logo-wrapper {
+      border-bottom: 1px solid $sidenav-light-border-bottom-color;
+      &.sn-ad-avatar-wrapper {
+        color: $sidenav-light-color;
+      }
+    }
+    .about {
+      border-bottom: 1px solid $sidenav-light-border-bottom-color;
+      p {
+        color: $sidenav-light-color;
+      }
+    }
+    .social {
+      border-bottom: 1px solid $sidenav-light-border-bottom-color;
+      .fa {
+        color: $sidenav-light-color;
+      }
+    }
+    .search-form {
+      input[type=text] {
+        border-bottom-color: $sidenav-light-border-bottom-color;
+        color: $sidenav-light-color !important;
+        @include placeholder {
+          color: $sidenav-light-color !important;
+        }
+      }
+    }
+    .collapsible {
+      a {
+        color: $sidenav-light-color;
+      }
+    }
+    .collapsible-body {
+      a {
+        background-color: $sidenav-light-collapsible-body-a-bgc;
+      }
+    }
+    .collapsible li .collapsible-header {
+      &:hover {
+        background-color: $sidenav-light-collapsible-header-hover-bgc;
+      }
+      &.active {
+        color: $sidenav-light-collapsible-header-active-color;
+        background-color: transparent;
+      }
+    }
+  }
+  // Fixed side-nav shown
+  &.fixed {
+    left: 0;
+    transform: translateX(0);
+    position: fixed; // Right Align
+    &.right-aligned {
+      right: 0;
+      left: auto;
+    }
+  }
+  // Fixed sideNav hide on smaller
+  @media #{$hide-sidenav} {
+    &.fixed {
+      transform: translateX(-105%);
+      &.right-aligned {
+        transform: translateX(105%);
+      }
+    }
+  }
+  // Collapsible menu
+  .collapsible {
+    margin: 0;
+    padding: 0;
+    margin-top: $sidenav-collapsible-mt;
+    li {
+      a {
+        &:hover {
+          background-color: $collapsible-hover-bgc;
+        }
+      }
+    }
+    >li {
+      border-radius: $collapsible-li-border-radius;
+      a.collapsible-header {
+        &:hover {
+          background-color: $collapsible-header-hover-bgc;
+        }
+        &.active {
+          background-color: $collapsible-header-active-bgc;
+        }
+      }
+    }
+    ul {
+      padding: 0;
+      list-style-type: none;
+    }
+    a {
+      color: $white-base;
+      font-weight: 300;
+      font-size: $sidenav-collapsible-a-font-size;
+      height: $sidenav-collapsible-a-height;
+      line-height: $sidenav-collapsible-a-line-height;
+      &.active,
+      &:hover {
+        border-radius: $collapsible-li-border-radius;
+      }
+    }
+    .fa {
+      font-size: $sidenav-collapsible-a-font-size;
+      margin-right: $sidenav-fa-margin-right;
+    }
+  }
+  .collapsible-body a {
+    padding-left: $sidenav-collapsible-body-a-pl;
+    height: $sidenav-collapsible-a-height;
+    line-height: $sidenav-collapsible-a-height;
+    background-color: $sidenav-collapsible-body-a-bgc;
+  }
+  a {
+    display: block;
+    font-size: $sidenav-a-font-size;
+    height: $sidenav-a-height;
+    line-height: $sidenav-a-line-height;
+    padding-left: $sidenav-padding-left;
+  }
+  // Manu icon
+  .fa-angle-down {
+    &.rotate-icon {
+      position: absolute;
+      right: 0;
+      top: $sidenav-rotate-icon-top;
+      margin-right: $sidenav-rotate-icon-mr;
+    }
+  }
+  // Mask and image
+  .sidenav-bg {
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: $sidenav-bg-width;
+    z-index: -1;
+    background-attachment: fixed;
+    &:after {
+      width: 100%;
+      display: block;
+      content: "";
+      position: absolute;
+      height: 100%;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      z-index: -1;
+      margin-bottom: -99999px;
+      padding-bottom: 99999px;
+    }
+  }
+  // SideNav logo
+  .logo-wrapper {
+    border-bottom: 1px solid $sidenav-light-border-bottom-color;
+    height: $sidenav-logo-wrapper-height;
+    a {
+      height: $sidenav-logo-wrapper-height;
+      width: $sidenav-logo-wrapper-width;
+      padding: 0;
+    }
+    img {
+      padding-left: $sidenav-logo-wrapper-img-px;
+      padding-right: $sidenav-logo-wrapper-img-px;
+      padding-top: $sidenav-logo-wrapper-img-py;
+      padding-bottom: $sidenav-logo-wrapper-img-py;
+      height: auto;
+    }
+    @media (max-height: $medium-screen) {
+      height: $sidenav-logo-wrapper-medium-img-height;
+      a {
+        height: $sidenav-logo-wrapper-medium-img-height;
+      }
+      img {
+        padding-top: $sidenav-logo-wrapper-medium-img-py;
+        padding-bottom: $sidenav-logo-wrapper-medium-img-py;
+      }
+    }
+    &.sn-avatar-wrapper {
+      padding-left: $sidenav-sn-avatar-wrapper-px;
+      padding-right: $sidenav-sn-avatar-wrapper-px;
+      padding-top: $sidenav-sn-avatar-wrapper-py;
+      padding-bottom: $sidenav-sn-avatar-wrapper-py;
+      img {
+        box-shadow: $z-depth-1;
+        margin: 0;
+        padding: 0;
+        max-width: $sidenav-sn-avatar-wrapper-max-width;
+      }
+      @media only screen and (max-height: $medium-screen) {
+        padding-left: $sidenav-sn-avatar-wrapper-medium-px;
+        padding-right: $sidenav-sn-avatar-wrapper-medium-px;
+        img {
+          max-width: $sidenav-sn-avatar-wrapper-medium-max-width;
+        }
+      }
+    }
+    &.sn-ad-avatar-wrapper {
+      height: auto;
+      margin-bottom: 0;
+      img {
+        max-width: $sidenav-ad-avatar-wrapper-img-max-width;
+        padding: $sidenav-ad-avatar-wrapper-img-padding;
+        float: left;
+      }
+      p {
+        font-size: $sidenav-ad-avatar-wrapper-p-font-size;
+        padding-top: $sidenav-ad-avatar-wrapper-p-padding;
+        padding-bottom: $sidenav-ad-avatar-wrapper-p-padding;
+        margin: 0;
+      }
+    }
+  }
+  // About
+  .about {
+    padding: $sidenav-about-padding;
+    border-bottom: 1px solid $sidenav-logo-wrapper-border-bottom-color;
+    p {
+      margin-bottom: 0;
+      text-align: center;
+    }
+  }
+  // Social
+  .social {
+    padding-top: 0;
+    text-align: center;
+    border-bottom: 1px solid $sidenav-logo-wrapper-border-bottom-color;
+    li {
+      display: inline-block;
+      padding-top: $sidenav-social-li-padding;
+      padding-bottom: $sidenav-social-li-padding;
+      margin: 0;
+    }
+    a {
+      margin: 0;
+      padding: 0;
+    }
+    .fa {
+      font-size: $sidenav-social-fa-font-size;
+      padding-right: $sidenav-social-li-padding;
+      padding-left: $sidenav-social-li-padding;
+      color: $sidenav-social-fa-color;
+      transition: $sidenav-social-fa-transition;
+      &:hover {
+        color: $sidenav-social-fa-color-hover;
+        transition: $sidenav-social-fa-transition;
+      }
+    }
+  }
+  // Search form
+  .search-form {
+    padding: 0;
+    input[type=text] {
+      border-bottom: 1px solid $sidenav-logo-wrapper-border-bottom-color;
+      font-weight: 300;
+      padding-left: $sidenav-search-form-input-padding-left;
+      @include placeholder {
+        @extend .white-text;
+      }
+    }
+    .form-control {
+      @extend .white-text;
+      margin-bottom: 0;
+    }
+  }
+}
+
+// Touch interaction
+.drag-target {
+  height: 100%;
+  width: $drag-target-width;
+  position: fixed;
+  top: 0;
+  z-index: 998;
+}
+
+#sidenav-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 120vh;
+  background-color: $sidenav-overlay;
+  z-index: 997;
+  will-change: opacity;
+}

html/scss/pro/_skins.scss

@@ -0,0 +1,218 @@
+// Skins
+@each $skin, $data in $skins {
+  .#{$skin}-skin {
+    .gradient {
+      background: map-get($data, skin-gradient-start);
+      background: linear-gradient(135deg, map-get($data, skin-gradient-start) 0%, map-get($data, skin-gradient-end) 100%);
+    }
+    .primary-color {
+      background-color: map-get($data, skin-primary-color) !important;
+    }
+    .navbar {
+      background-color: map-get($data, skin-navbar);
+      color: map-get($data, skin-text);
+      .navbar-nav {
+        .nav-item {
+          .dropdown-menu a {
+            &:hover,
+            &:focus,
+            &:active {
+              background-color: darken( map-get($data, skin-accent), 5%);
+            }
+          }
+          @if $skin=="white" {
+            a {
+              color: map-get($data, skin-text);
+            }
+          }
+        }
+      }
+      &.double-nav {
+        a {
+          color: map-get($data, skin-text);
+        }
+      }
+    }
+    .page-footer {
+      background-color: map-get($data, skin-footer-color);
+    }
+    .side-nav {
+      background-color: map-get($data, skin-flat);
+      .logo-wrapper {
+        &>div {
+          background-color: transparent !important;
+        }
+      }
+      .sn-avatar-wrapper img {
+        border: 3px solid darken( map-get($data, skin-accent), 15%);
+      }
+      .social {
+        border-bottom: 1px solid $skins-border-color;
+        a {
+          @if $skin=="white" {
+            .fa {
+              color: map-get($data, skin-text);
+            }
+          }
+          &:hover {
+            .fa {
+              color: map-get($data, skin-accent) !important;
+              transition: $skins-side-nav-hover-transition;
+            }
+          }
+        }
+      }
+      @if $skin=="white" {
+        .search-form .md-form input {
+          color: map-get($data, skin-text) !important;
+          border-bottom: $skins-white-search-border-bottom solid $skins-border-color;
+          @include placeholder {
+            color: rgba(map-get($data, skin-text), .5) !important;
+          }
+        }
+      }
+      .collapsible li {
+        background-color: transparent;
+        @if $skin=="white" {
+          a {
+            font-weight: 400;
+          }
+        }
+        .collapsible-header {
+          color: map-get($data, skin-text);
+          transition: $skins-side-nav-hover-transition;
+          &.active {
+            @if $skin=="white" {
+              color: map-get($data, skin-sidenav-item);
+              background-color: transparent;
+            }
+            @else {
+              background-color: map-get($data, skin-sidenav-item-hover);
+            }
+          }
+          &:hover {
+            background-color: map-get($data, skin-sidenav-item-hover);
+          }
+        }
+        .collapsible-body a {
+          color: map-get($data, skin-text);
+          &:hover {
+            color: map-get($data, skin-sn-child);
+          }
+        }
+      }
+      .fa {
+        color: map-get($data, skin-text);
+      }
+      .sidenav-bg {
+        &:after,
+        &.mask-strong:after,
+        {
+          background: map-get($data, skin-mask-strong);
+        }
+        &.mask-light:after {
+          background: map-get($data, skin-mask-light);
+        }
+        &.mask-slight:after {
+          background: map-get($data, skin-mask-slight);
+        }
+      }
+    }
+    @include make-button("primary", map-get($data, skin-btn-primary));
+    @include make-button("secondary", map-get($data, skin-btn-secondary));
+    @include make-button("default", map-get($data, skin-btn-default));
+    @include make-outline-button("primary", map-get($data, skin-btn-primary));
+    @include make-outline-button("secondary", map-get($data, skin-btn-secondary));
+    @include make-outline-button("default", map-get($data, skin-btn-default));
+    .card .btn-action {
+      background: map-get($data, skin-btn-default);
+      &:hover,
+      &:focus {
+        background-color: lighten( map-get($data, skin-btn-default), 5%)!important;
+      }
+      &.active {
+        background-color: darken( map-get($data, skin-btn-default), 20%)!important;
+      }
+    }
+    // Custom inputs
+    input[type="email"]:focus:not([readonly]),
+    input[type="text"]:focus:not([readonly]),
+    input[type="password"]:focus:not([readonly]),
+    input[type="number"]:focus:not([readonly]),
+    textarea.md-textarea:focus:not([readonly]) {
+      border-color: map-get($data, skin-accent);
+      box-shadow: 0 1px 0 0 map-get($data, skin-accent);
+      &+label {
+        color: map-get($data, skin-accent);
+      }
+    }
+    input[type=checkbox]:checked {
+      &+label {
+        &:before {
+          border-right: 2px solid map-get($data, skin-accent);
+          border-bottom: 2px solid map-get($data, skin-accent);
+        }
+      }
+    }
+    input[type=checkbox].filled-in:checked {
+      &+label {
+        &:before {
+          border-right: 2px solid $white-base;
+          border-bottom: 2px solid $white-base;
+        }
+        &:after {
+          background-color: map-get($data, skin-accent);
+          border-color: map-get($data, skin-accent);
+        }
+      }
+    }
+    .md-form {
+      .prefix {
+        &.active {
+          color: map-get($data, skin-accent);
+        }
+      }
+    }
+    // Select colors
+    .dropdown-content {
+      li:not(.disabled) {
+        span {
+          color: map-get($data, skin-accent);
+        }
+      }
+    }
+    .top-nav-collapse {
+      background-color: map-get($data, skin-navbar);
+    }
+    .carousel-multi-item {
+      .controls-top>a,
+      .carousel-indicators li,
+      .carousel-indicators li.active {
+        background-color: map-get($data, skin-accent);
+      }
+    }
+    // Form-header, card-header
+    .form-header,
+    .card-header {
+      background-color: lighten( map-get($data, skin-accent), 2%);
+    }
+    .spinner-primary-color,
+    .spinner-primary-color-only {
+      border-color: map-get($data, skin-primary-color);
+    }
+    .pagination-primary-color {
+      .page-item.active .page-link,
+      .page-item.active .page-link:focus,
+      .page-item.active .page-link:hover {
+        color: $white-base;
+        background-color: map-get($data, skin-primary-color);
+      }
+      .page-link {
+        color: map-get($data, skin-primary-color);
+        &:focus {
+          box-shadow: none;
+        }
+      }
+    }
+  }
+}

html/scss/pro/_social-buttons.scss

@@ -0,0 +1,27 @@
+// Social buttons
+.counter {
+  box-shadow: $z-depth-1;
+  position: absolute;
+  z-index: 2;
+  margin-top: $btn-counter-margin-top;
+  margin-left: $btn-counter-margin-left;
+  border-radius: $btn-counter-border-radius;
+  padding: $btn-counter-padding-y $btn-counter-padding-x;
+  background-color: $btn-counter-bgc;
+  font-size: $btn-counter-font-size;
+  color: $white-base;
+  left: auto;
+  &.counter-lg {
+    margin-top: $btn-lg-counter-margin-top;
+  }
+  &.counter-md {
+    margin-top: $btn-md-counter-margin-top;
+  }
+  &.counter-sm {
+    margin-top: $btn-sm-counter-margin-top;
+  }
+}
+
+@each $medium, $color in $social-colors {
+  @include make-button($medium, $color);
+}

html/scss/pro/_steppers.scss

@@ -0,0 +1,157 @@
+// Steppers
+.stepper {
+  li {
+    a {
+      padding: $stepper-li-a-padding;
+      font-size: $stepper-li-a-font-size;
+      text-align: center;
+      .circle {
+        display: inline-block;
+        color: $stepper-li-a-circle-color;
+        border-radius: $stepper-li-a-circle-border-radius;
+        background: $stepper-li-a-circle-bg;
+        width: $stepper-li-a-circle-width;
+        height: $stepper-li-a-circle-height;
+        text-align: center;
+        line-height: $stepper-li-a-circle-line-height;
+        margin-right: $stepper-li-a-circle-mr;
+      }
+      .label {
+        display: inline-block;
+        color: $stepper-li-a-circle-bg;
+      }
+    }
+    &.active,
+    &.completed {
+      a {
+        .circle {
+          @extend .primary-color;
+        }
+        .label {
+          font-weight: 600;
+          color: $stepper-li-a-label-color;
+        }
+      }
+    }
+    &.warning {
+      a {
+        .circle {
+          @extend .danger-color;
+        }
+      }
+    }
+  }
+}
+
+// Horizontal
+.stepper-horizontal {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  li {
+    transition: $stepper-horizontal-li-transition;
+    display: flex;
+    align-items: center;
+    flex: 1;
+    position: relative;
+    a {
+      .label {
+        margin-top: $stepper-horizontal-li-a-label-mt;
+      }
+    }
+    &:not(:last-child):after {
+      content: "";
+      position: relative;
+      flex: 1;
+      margin: $stepper-horizontal-li-after-margin 0 0 0;
+      height: $stepper-horizontal-li-after-height;
+      background-color: $stepper-horizontal-li-after-bgc;
+    }
+    &:not(:first-child):before {
+      content: "";
+      position: relative;
+      flex: 1;
+      margin: $stepper-horizontal-li-after-margin 0 0 0;
+      height: $stepper-horizontal-li-after-height;
+      background-color: $stepper-horizontal-li-after-bgc;
+    }
+    &:hover {
+      background: $stepper-horizontal-li-hover-bg;
+    }
+  }
+  @media (max-width: $stepper-horizontal-breakpoint) {
+    flex-direction: column;
+    li {
+      align-items: flex-start;
+      flex-direction: column;
+      a {
+        .label {
+          flex-flow: column nowrap;
+          order: 2;
+          margin-top: $stepper-horizontal-small-li-a-label-mt;
+        }
+      }
+      &:not(:last-child):after {
+        content: "";
+        position: absolute;
+        width: $stepper-horizontal-small-li-after-width;
+        height: $stepper-horizontal-small-li-after-height;
+        left: $stepper-horizontal-small-li-after-left;
+        top: $stepper-horizontal-small-li-after-top;
+      }
+    }
+  }
+}
+
+// Vertical
+.stepper-vertical {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  li {
+    display: flex;
+    align-items: flex-start;
+    flex: 1;
+    flex-direction: column;
+    position: relative;
+    a {
+      align-self: flex-start;
+      display: flex;
+      position: relative;
+      .circle {
+        order: 1;
+      }
+      .label {
+        flex-flow: column nowrap;
+        order: 2;
+        margin-top: $stepper-vertical-li-a-label-mt;
+      }
+    }
+    &.completed {
+      a {
+        .label {
+          font-weight: 500;
+        }
+      }
+    }
+    .step-content {
+      display: block;
+      margin-top: 0;
+      margin-left: $stepper-vertical-li-step-content-ml;
+      padding: $stepper-vertical-li-step-content-padding;
+      p {
+        font-size: $stepper-vertical-li-step-content-p-font-size;
+      }
+    }
+    &:not(:last-child):after {
+      content: "";
+      position: absolute;
+      width: $stepper-vertical-li-after-width;
+      height: $stepper-vertical-li-after-height;
+      left: $stepper-vertical-li-after-left;
+      top: $stepper-vertical-li-after-top;
+      background-color: $stepper-vertical-li-after-bgc;
+    }
+  }
+}

html/scss/pro/_switch.scss

@@ -0,0 +1,51 @@
+// Switch
+.switch label {
+  cursor: pointer;
+  input[type=checkbox] {
+    opacity: 0;
+    @include switch-width-height(0, 0);
+    &:checked + .lever {
+      background-color: map-get($switch-colors, "checked-lever-bg");
+    }
+    &:checked + .lever:after {
+      background-color: map-get($switch-colors, "bg");
+      left: $switch-input-checkbox-checked-lever-after-left;
+    }
+    &:checked:not(:disabled) ~ .lever:active:after {
+      @include box-shadows($switch-lever-after-box-shadow-darker, $switch-lever-after-box-shadow-transp);
+    }
+    &:not(:disabled) ~ .lever:active:after {
+      @include box-shadows($switch-lever-after-box-shadow-darker, $switch-lever-after-box-shadow-lighter);
+    }
+    &:disabled + .lever {
+      cursor: default;
+    }
+    &:disabled + .lever:after, &:disabled:checked + .lever:after {
+      background-color: $input-disabled-solid-color;
+    }
+  }
+  .lever {
+    content: "";
+    display: inline-block;
+    position: relative;
+    background-color: map-get($switch-colors, "unchecked-lever-bg");
+    border-radius: $switch-lever-border-radius-small;
+    margin-right: $switch-lever-mr;
+    vertical-align: middle;
+    margin: $switch-lever-margin;
+    @include switch-width-height(2.5rem, 0.9375rem);
+    @include transition-main($switch-lever-after-transition-bg);
+    &:after {
+      content: "";
+      position: absolute;
+      display: inline-block;
+      background-color: map-get($switch-colors, "unchecked-bg");
+      border-radius: $switch-lever-after-border-radius-high;
+      left: $switch-lever-after-left;
+      top: $switch-lever-after-top;
+      @include box-shadows($switch-lever-after-box-shadow-darker);
+      @include switch-width-height(1.3125rem, 1.3125rem);
+      @include transition-main($switch-lever-after-transition-left, $switch-lever-after-transition-bg, $switch-lever-after-transition-box);
+    }
+  }
+}

html/scss/pro/_tabs.scss

@@ -0,0 +1,147 @@
+// Navs, Tabs and Pills
+.nav-tabs {
+  box-shadow: $z-depth-1-half;
+  border: 0;
+  padding: $tabs-padding;
+  margin-left: $tabs-margin-x;
+  margin-right: $tabs-margin-x;
+  margin-bottom: $tabs-margin-y;
+  background-color: $nav-tabs-pills-bgc;
+  z-index: 1;
+  position: relative;
+  border-radius: $nav-tabs-border-radius;
+  .nav-item + .nav-item {
+    margin-left: 0;
+  }
+  .nav-item {
+    &.disabled {
+      pointer-events: none !important;
+      .nav-link {
+        color: $nav-item-disabled-link-color;
+      }
+    }
+  }
+  .nav-link {
+    transition: $nav-link-transition;
+    border: 0;
+    color: $white-base;
+  }
+  .nav-link.active,
+  .nav-item.open .nav-link {
+    background-color: $nav-link-active-bgc;
+    color: $white-base;
+    transition: $nav-link-active-transition;
+    border-radius: $nav-tabs-border-radius;
+  }
+  .nav-item.show .nav-link {
+    background-color: $nav-tabs-pills-bgc;
+    color: $white-base;
+    transition: $nav-link-active-transition;
+    border-radius: $nav-tabs-border-radius;
+  }
+  .nav-item.show .nav-link.dropdown-toggle {
+    background-color: $nav-link-active-bgc;
+  }
+}
+.tab-content {
+  padding: $tab-content-padding;
+  padding-top: $tab-content-pt;
+  // z-index: 1;
+  &.vertical {
+    padding-top: 0;
+  }
+}
+
+.md-pills {
+  border: 0;
+  li {
+    padding: $pills-padding;
+  }
+  .show > .nav-link {
+    box-shadow: $z-depth-1;
+    color: $white-base;
+    background-color: $nav-tabs-pills-bgc;
+  }
+  .nav-link {
+    transition: $nav-link-transition;
+    border-radius: $md-pills-nav-link-border-radius;
+    color: $md-pills-nav-link-color;
+    text-align: center;
+    &:hover {
+      @extend .rgba-grey-light;
+    }
+    &.active {
+      box-shadow: $z-depth-1;
+      color: $white-base;
+      background-color: $nav-tabs-pills-bgc;
+    }
+    &.active:hover {
+      box-shadow: $z-depth-1-half;
+    }
+  }
+}
+
+@each $name, $color in $mdb-colors {
+  .pills-#{$name} {
+    .show > .nav-link {
+      background-color: $color !important;
+    }
+    .nav-link {
+      &.active {
+        background-color: $color !important;
+      }
+    }
+  }
+  .tabs-#{$name} {
+    background-color: $color !important;
+  }
+}
+
+.classic-tabs {
+  .nav {
+    white-space: nowrap;
+    overflow-x: auto;
+    position: relative;
+    border-radius: $classic-tabs-border-radius $classic-tabs-border-radius 0 0;
+    @media (min-width: 62rem) {
+      overflow-x: hidden;
+    }
+    li {
+      a {
+        display: block;
+        padding: $classic-tabs-padding-y $classic-tabs-padding-x;
+        font-size: $classic-tabs-font-size;
+        text-transform: uppercase;
+        color: $classic-tabs-color;
+        text-align: center;
+        border-radius: 0;
+        &.active {
+          border-bottom: $classic-tabs-li-a-active-border-bottom solid;
+          color: $white-base;
+        }
+      }
+      @media (min-width: 62em) {
+        &:first-child {
+          margin-left: $classic-tabs-margin-left;
+        }
+      }
+    }
+    @each $name, $color in $ctbc {
+      &.#{$name} {
+        li {
+          a {
+            &.active {
+              border-color: $color;
+            }
+          }
+        }
+      }
+    }
+  }
+  .tab-content {
+    &.card {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+  }
+}

html/scss/pro/_toasts.scss

@@ -0,0 +1,144 @@
+// Toasts
+.toast-title {
+  font-weight: 400;
+}
+.toast-message {
+  word-wrap: break-word;
+}
+.toast-message a,
+.toast-message label {
+  @extend .white-text;
+}
+.toast-message a:hover {
+  color: $toast-message-a-hover-color;
+  text-decoration: none;
+}
+.toast-close-button {
+  @extend .white-text;
+  position: relative;
+  right: $toast-close-button-right;
+  top: $toast-close-button-top;
+  float: right;
+  font-size: $toast-close-button-font-size;
+  font-weight: 400;
+  text-shadow: $toast-close-button-text-shadow $white-base;
+  opacity: $toast-close-button-opacity;
+  filter: $toast-close-button-filter;
+}
+.toast-close-button:hover,
+.toast-close-button:focus {
+  @extend .black-text;
+  text-decoration: none;
+  cursor: pointer;
+  opacity: $toast-close-button-hover-opacity;
+  filter: $toast-close-button-hover-filter;
+}
+button.toast-close-button {
+  padding: 0;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  appearance: none;
+}
+.toast-top-center {
+  top: 0;
+  right: 0;
+  width: 100%;
+}
+.toast-bottom-center {
+  bottom: 0;
+  right: 0;
+  width: 100%;
+}
+.toast-top-full-width {
+  top: 0;
+  right: 0;
+  width: 100%;
+}
+.toast-bottom-full-width {
+  bottom: 0;
+  right: 0;
+  width: 100%;
+}
+.toast-top-left {
+  top: $toast-top-bottom-left-right-size;
+  left: $toast-top-bottom-left-right-size;
+}
+.toast-top-right {
+  top: $toast-top-bottom-left-right-size;
+  right: $toast-top-bottom-left-right-size;
+}
+.toast-bottom-right {
+  right: $toast-top-bottom-left-right-size;
+  bottom: $toast-top-bottom-left-right-size;
+}
+.toast-bottom-left {
+  bottom: $toast-top-bottom-left-right-size;
+  left: $toast-top-bottom-left-right-size;
+}
+#toast-container {
+  position: fixed;
+  z-index: 999999;
+}
+#toast-container * {
+  box-sizing: border-box;
+}
+#toast-container > div {
+  box-shadow: $z-depth-1;
+  @extend .white-text;
+  position: relative;
+  overflow: hidden;
+  margin: 0 0 $toast-container-margin;
+  padding: $toast-container-py $toast-container-pr $toast-container-py $toast-container-pl;
+  width: $toast-container-width;
+  background-position: $toast-container-py center;
+  background-repeat: no-repeat;
+  opacity: $toast-container-opacity;
+  filter: $toast-container-filter;
+}
+#toast-container > :hover {
+  box-shadow: $z-depth-2;
+  transition: $toast-container-hover-transition;
+  opacity: $toast-container-hover-opacity;
+  filter: $toast-container-hover-filter;
+  cursor: pointer;
+}
+#toast-container.toast-top-center > div,
+#toast-container.toast-bottom-center > div {
+  width: $toast-container-width;
+  margin: auto;
+}
+#toast-container.toast-top-full-width > div,
+#toast-container.toast-bottom-full-width > div {
+  width: $toast-container-top-full-width;
+  margin: auto;
+}
+.toast {
+  background-color: $toast-bgc;
+}
+.toast-success {
+  background-color: $success-color;
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==") !important;
+}
+.toast-error {
+  background-color: $danger-color;
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=") !important;
+}
+.toast-info {
+  background-color: $info-color;
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=") !important;
+}
+.toast-warning {
+  background-color: $warning-color;
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=") !important;
+}
+
+.toast-progress {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  height: $toast-progress-height;
+  background-color: $black-base;
+  opacity: $toast-progress-opacity;
+  filter: $toast-progress-filter;
+}

html/scss/pro/picker/_default-date.scss

@@ -0,0 +1,337 @@
+/* ==========================================================================
+   $BASE-DATE-PICKER
+   ========================================================================== */
+
+/**
+ * The picker box.
+ */
+
+.picker__box {
+  padding: 0;
+  border-radius: $datepicker-box-padding;
+  overflow: hidden;
+  /**
+   * The header containing the month and year stuff.
+   */
+  .picker__header {
+    text-align: center;
+    position: relative;
+    margin-bottom: $datepicker-header-mb;
+    select {
+      display: inline-block !important;
+    }
+    .picker__date-display {
+      text-align: center;
+      background-color: $datepicker-date-bg;
+      @extend .white-text;
+      padding-bottom: $datepicker-date-display-pb;
+      font-weight: $datepicker-date-display-font-weight;
+      margin-bottom: $datepicker-date-display-mb;
+      .picker__weekday-display {
+        background-color: $datepicker-weekday-bg;
+        padding: $datepicker-weekday-display-padding;
+        font-weight: $datepicker-weekday-display-font-weight;
+        letter-spacing: $datepicker-weekday-display-letter-spacing;
+        font-size: $datepicker-weekday-display-font-size;
+        margin-bottom: $datepicker-weekday-display-mb;
+      }
+      .picker__month-display {
+        text-transform: uppercase;
+        font-size: $datepicker-month-display-font-size;
+      }
+      .picker__day-display {
+        font-size: $datepicker-day-display-font-size;
+        font-weight: $datepicker-day-display-font-weight;
+      }
+      .picker__year-display {
+        font-size: $datepicker-year-display-font-size;
+        color: $datepicker-year;
+      }
+    }
+    /**
+       * The month and year labels.
+       */
+    .picker__month,
+    .picker__year {
+      display: inline-block;
+      margin-left: $datepicker-year-ml;
+      margin-right: $datepicker-year-mr;
+    }
+    /**
+       * The month and year selectors.
+       */
+    .picker__select--month,
+    .picker__select--year {
+      height: $datepicker-select-month-height;
+      padding: 0;
+      margin-left: $datepicker-select-month-ml;
+      margin-right: $datepicker-select-month-mr;
+      display: inline-block;
+      &:focus {
+        border-color: $datepicker-focus;
+      }
+    }
+    .picker__select--year {
+      width: $datepicker-select-year;
+    }
+    // Modified
+    .picker__select--month.browser-default {
+      display: inline;
+      @extend .white;
+      width: $datepicker-select-month-browser-width;
+    }
+    .picker__select--year.browser-default {
+      display: inline;
+      @extend .white;
+      width: $datepicker-select-year-browser-width;
+    }
+    /**
+       * The month navigation buttons.
+       */
+       .picker__nav--prev,
+       .picker__nav--next {
+         position: absolute;
+         padding: $datepicker-nav-prev-next-py $datepicker-nav-prev-next-px;
+         width: $datepicker-nav-prev-next-width;
+         height: $datepicker-nav-prev-next-height;
+         box-sizing: content-box;
+         bottom: 0;
+         &:hover {
+           cursor: pointer;
+           color: $black-base;
+           background: $datepicker-selected-outfocus;
+         }
+         &:before {
+           content: " ";
+           border-top: $datepicker-nav-prev-next-bt solid transparent;
+           border-bottom: $datepicker-nav-prev-next-bb solid transparent;
+           border-right: $datepicker-nav-prev-next-br solid $datepicker-nav-prev-next-br-color;
+           width: 0;
+           height: 0;
+           display: block;
+           margin: 0 auto;
+         }
+       }
+       .picker__nav--prev {
+         left: $datepicker-nav-prev-left;
+         padding-right: $datepicker-nav-prev-pr;
+       }
+       .picker__nav--next {
+         right: $datepicker-nav-next-right;
+         padding-left: $datepicker-nav-next-pf;
+         &:before {
+           border-right: 0;
+           border-left: $datepicker-nav-next-border-left solid $datepicker-nav-prev-next-br-color;
+         }
+       }
+       .picker__nav--disabled,
+       .picker__nav--disabled:hover,
+       .picker__nav--disabled:before,
+       .picker__nav--disabled:before:hover {
+         cursor: default;
+         background: none;
+         border-right-color: $grey-lighten-4;
+         border-left-color: $grey-lighten-4;
+       }
+
+     }
+
+  /**
+   * The calendar table of dates
+   */
+  .picker__table {
+    text-align: center;
+    border-collapse: collapse;
+    border-spacing: 0;
+    table-layout: fixed;
+    font-size: $datepicker-table-font-size;
+    width: $datepicker-table-width;
+    margin-top: $datepicker-table-mt;
+    margin-bottom: $datepicker-table-mb;
+    th, td {
+      text-align: center;
+    }
+    td {
+      margin: 0;
+      padding: 0;
+    }
+    /**
+       * The weekday labels
+       */
+    .picker__weekday {
+      width: $datepicker-table-weekday-width;
+      font-size: $datepicker-table-weekday-font-size;
+      padding-bottom: $datepicker-table-weekday-padding-bottom;
+      color: $datepicker-color-mdb;
+      font-weight:$datepicker-table-weekday-font-weight;
+      /* Increase the spacing a tad */
+      @media (min-height: $pickerweekday-padb-breakpoint) {
+        padding-bottom: $datepicker-table-weekday-padding-bottom;
+      }
+    }
+    /**
+       * The days on the calendar
+       */
+    .picker__day--today {
+      position: relative;
+      letter-spacing: $datepicker-table-day-today-letter-spacing;
+      padding: $datepicker-table-day-today-py 0;
+      font-weight: $datepicker-table-day-today-font-weight;
+      border: $datepicker-table-day-today-border solid transparent;
+    }
+    .picker__day.picker__day--today {
+      color: $datepicker-selected;
+    }
+    .picker__day--disabled{
+      &:before {
+        border-top-color: #aaaaaa;
+      }
+    }
+    .picker__day--infocus{
+      color: $datepicker-table-day-infocus-color;
+      letter-spacing: $datepicker-table-day-infocus-letter-spacing;
+      padding: $datepicker-table-day-infocus-py 0;
+      font-weight: $datepicker-table-day-infocus-font-weight;
+      border: $datepicker-table-day-infocus-color transparent;
+      &:hover {
+        cursor: pointer;
+        color: $black;
+        font-weight: $datepicker-table-day-infocus-hover-font-weight;
+      }
+    }
+    .picker__day--outfocus {
+      display: none;
+      padding: $datepicker-table-day-outfocus-py 0;
+      @extend .white-text;
+      &:hover {
+        cursor: pointer;
+        color: $datepicker-table-day-outfocus-hover-color;
+        font-weight: $datepicker-table-day-outfocus-hover-font-weight;
+      }
+    }
+    .picker__day--highlighted:hover,
+    .picker--focused .picker__day--highlighted {
+      cursor: pointer;
+    }
+    .picker__day--selected,
+    .picker__day--selected:hover,
+    .picker--focused {
+      //  Circle background
+      border-radius: $datepicker-table-day-selected-hover-border-radius;
+      transform: $datepicker-table-day-selected-hover-transform;
+      background-color: $datepicker-selected;
+      &.picker__day--outfocus {
+        background-color: $datepicker-selected-outfocus;
+      }
+      @extend .white-text;
+      box-shadow: $z-depth-1-half;
+    }
+    .picker__day--disabled,
+    .picker__day--disabled:hover,
+    .picker--focused {
+      background: $grey-lighten-4;
+      border-color: $grey-lighten-4;
+      color: $datepicker-table-day-outfocus-hover-color;
+      cursor: default;
+    }
+    .picker__day--highlighted.picker__day--disabled,
+    .picker__day--highlighted.picker__day--disabled:hover {
+      background: $datepicker-table-day-higlighted-color;
+    }
+
+  }
+
+  /**
+   * The footer containing the "today", "clear", and "close" buttons.
+   */
+  .picker__footer {
+    text-align: right;
+    padding: $datepicker-footer-py $datepicker-footer-px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .picker__button--today,
+    .picker__button--clear,
+    .picker__button--close {
+      border: $datepicker-footer-today-clear-button-border solid $white;
+      background: $white;
+      font-size: $datepicker-footer-today-clear-button-font-size;
+      padding: $datepicker-footer-today-clear-button-padding;
+      font-weight: $datepicker-footer-today-clear-button-font-weight;
+      width: $datepicker-footer-today-clear-button-width;
+      display: inline-block;
+      vertical-align: bottom;
+      text-transform: uppercase;
+      &:hover {
+        cursor: pointer;
+        color: $black;
+        background: $datepicker-footer-today-clear-button-hover-color;
+        border-bottom-color: $datepicker-footer-today-clear-button-hover-color;
+      }
+      &:focus {
+        background: $datepicker-footer-today-clear-button-hover-color;
+        border-color: $datepicker-focus;
+        outline: none;
+      }
+      &:before {
+        position: relative;
+        display: inline-block;
+        height: 0;
+      }
+    }
+    .picker__button--today,
+    .picker__button--clear{
+      &:before {
+        content: " ";
+        margin-right: $datepicker-footer-today-clear-button-before-mr;
+      }
+    }
+    .picker__button--today{
+      &:before {
+        top: $datepicker-footer-today-button-before-top;
+        width: 0;
+        border-top: $datepicker-footer-today-button-before-bt solid $datepicker-footer-today-button-before-bt-color;
+        border-left: $datepicker-footer-today-button-before-bl solid transparent;
+      }
+    }
+    .picker__button--clear{
+      &:before {
+        top: $datepicker-footer-clear-button-before-top;
+        width: $datepicker-footer-clear-button-before-width;
+        border-top: $datepicker-footer-clear-button-before-bl solid $datepicker-footer-clear-button-before-bt-color;
+      }
+    }
+    .picker__button--close{
+      &:before {
+        content: "\D7";
+        top: $datepicker-footer-close-button-before-top;
+        vertical-align: top;
+        font-size: $datepicker-footer-close-button-before-font-size;
+        margin-right: $datepicker-footer-close-button-before-mr;
+        color: $datepicker-footer-close-button-before-color;
+      }
+    }
+    .picker__button--today[disabled],
+    .picker__button--today[disabled]:hover {
+      background: $grey-lighten-4;
+      border-color: $grey-lighten-4;
+      color: $datepicker-table-day-outfocus-hover-color;
+      cursor: default;
+    }
+    .picker__button--today[disabled]:before {
+      border-top-color: #aaaaaa;
+    }
+  }
+
+}
+
+/* ==========================================================================
+   CUSTOM MATERIALIZE STYLES
+   ========================================================================== */
+
+.picker__calendar-container {
+  padding: $datepicker-calender-padding;
+  thead {
+    border: none;
+  }
+}

html/scss/pro/picker/_default-time.scss

@@ -0,0 +1,422 @@
+/* ==========================================================================
+   $BASE-TIME-PICKER
+   ========================================================================== */
+/**
+ * The list of times.
+ */
+.picker__list {
+  list-style: none;
+  padding: $timepicker-pickerlist-padding;
+  margin: 0;
+}
+/**
+ * The times on the clock.
+ */
+.picker__list-item {
+  border-bottom: $timepicker-pickerlistitem-border-bottom solid $timepicker-pickerlistitem-border-color;
+  border-top: $timepicker-pickerlistitem-border-top solid $timepicker-pickerlistitem-border-color;
+  margin-bottom: $timepicker-pickerlistitem-mb;
+  position: relative;
+  @extend .white;
+  padding: $timepicker-pickerlistitem-padding;
+  @media (min-height: $timepicker-pickerlistitem-breakpoint) {
+    padding: $timepicker-pickerlistitem-media-padding;
+  }
+  /* Hovered time */
+  &:hover {
+    cursor: pointer;
+    @extend .black;
+    background: $timepicker-pickerlistitem-hover-bg;
+    border-color: $timepicker-pickerlistitem-hover-border-color;
+    z-index: 10;
+  }
+}
+
+/* Highlighted and hovered/focused time */
+.picker__list-item--highlighted {
+  border-color: $timepicker-pickerlistitem-highlighted-border-color;
+  z-index: 10;
+}
+.picker__list-item--highlighted:hover,
+.picker--focused .picker__list-item--highlighted {
+  cursor: pointer;
+  color: $black;
+  background: $timepicker-pickerlistitem-highlighted-hover-bg;
+}
+/* Selected and hovered/focused time */
+.picker__list-item--selected,
+.picker__list-item--selected:hover,
+.picker--focused .picker__list-item--selected {
+  background: $timepicker-pickerlistitem-selected-hover-bg;
+  @extend .white-text;
+  z-index: 10;
+}
+/* Disabled time */
+.picker__list-item--disabled,
+.picker__list-item--disabled:hover,
+.picker--focused .picker__list-item--disabled {
+  background: $grey-lighten-4;
+  border-color: $grey-lighten-4;
+  color: $timepicker-pickerlistitem-disabled-hover-color;
+  cursor: default;
+  border-color: $timepicker-pickerlistitem-disabled-hover-color;
+  z-index: auto;
+}
+/**
+ * The clear button
+ */
+.picker--time {
+  .picker__button--clear {
+    display: block;
+    width: $timepicker-pickertime-button-clear-width;
+    margin: $timepicker-pickertime-button-clear-mt auto 0;
+    padding: $timepicker-pickertime-button-clear-padding;
+    background: none;
+    border: 0;
+    font-weight: $timepicker-pickertime-button-clear-font-weight;
+    font-size: $timepicker-pickertime-button-clear-font-size;
+    text-align: center;
+    text-transform: uppercase;
+    color: $timepicker-color-mdb;
+    &:hover,
+    &:focus {
+      color: $black;
+      background: $timepicker-pickertime-button-clear-hover-bg;
+      border-color: $timepicker-pickertime-button-clear-hover-border-color;
+      cursor: pointer;
+      @extend .white-text;
+      outline: none;
+      &:before {
+        @extend .white-text;
+      }
+    }
+    &:before {
+      top: $timepicker-pickertime-button-clear-before-top;
+      color: $timepicker-color-mdb;
+      font-size: $timepicker-pickertime-button-clear-before-font-size;
+      font-weight: $timepicker-pickertime-button-clear-before-font-weight;
+    }
+  }
+}
+
+/* ==========================================================================
+   $DEFAULT-TIME-PICKER
+   ========================================================================== */
+/**
+ * The frame the bounds the time picker.
+ */
+.picker--time .picker__frame {
+  min-width: $timepicker-pickertime-frame-min-width;
+  max-width: $timepicker-pickertime-frame-max-width;
+}
+/**
+ * The picker box.
+ */
+.picker--time .picker__box {
+  font-size: $timepicker-pickerbox-font-size;
+  background: $timepicker-pickerbox-bg;
+  padding: 0;
+  @media (min-height: $timepicker-pickerbox-breakpoint) {
+    margin-bottom: $timepicker-pickerbox-breakpoint-mb;
+  }
+
+}
+
+/*!
+ * ClockPicker v0.0.7 for jQuery (http://weareoutman.github.io/clockpicker/)
+ * Copyright 2014 Wang Shenwei.
+ * Licensed under MIT (https://github.com/weareoutman/clockpicker/blob/gh-pages/LICENSE)
+ *
+ * Further modified
+ * Copyright 2015 Ching Yaw Hao.
+ *
+ * Bootstrap v3.1.1 (http://getbootstrap.com)
+ * Copyright 2011-2014 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ */
+.picker__date-display {
+  text-align: center;
+  background-color: $datepicker-date-bg;
+  @extend .white-text;
+  padding-bottom: $timepicker-pickerdate-display-pb;
+  font-weight: $timepicker-pickerdate-display-font-weight;
+  margin-bottom: $timepicker-pickerdate-display-mb;
+
+  .clockpicker-display {
+    vertical-align: middle;
+    display: inline-block;
+    margin: auto;
+    height: $timepicker-clockpicker-display-height;
+    font-size: $timepicker-clockpicker-display-font-size;
+    padding: $timepicker-clockpicker-display-padding;
+    padding-bottom: 0px;
+    color: $timepicker-clockpicker-display-color;
+    .clockpicker-display-column {
+      float: left;
+      .clockpicker-span-hours.text-primary, .clockpicker-span-minutes.text-primary, #click-am.text-primary, #click-pm.text-primary {
+        animation-name: $timepicker-clockpicker-display-animate-name;
+        @extend .white-text;
+      }
+      #click-am, #click-pm {
+        cursor: pointer;
+      }
+    }
+    .clockpicker-display-am-pm {
+      padding-left: $timepicker-clockpicker-display-am-pm-pl;
+      vertical-align: bottom;
+      height: $timepicker-clockpicker-display-am-pm-height;
+      .clockpicker-span-am-pm {
+        display: inline-block;
+        font-size: $timepicker-clockpicker-span-am-pm-font-size;
+        line-height: $timepicker-clockpicker-span-am-pm-line-height;
+        color: $timepicker-clockpicker-span-am-pm-color;
+      }
+    }
+    .clockpicker-span-hours, .clockpicker-span-minutes {
+      animation-duration: $timepicker-clockpicker-span-hours-animation-duration;
+      animation-fill-mode: both;
+      transition: $timepicker-clockpicker-span-hours-transition;
+      cursor: pointer;
+    }
+  }
+}
+.clockpicker-display {
+  text-align: center;
+  vertical-align: middle;
+  display: inline-block;
+  margin: auto;
+  height: $timepicker-clockpicker-display-height;
+  font-size: $timepicker-clockpicker-display-font-size;
+  padding: $timepicker-clockpicker-display-padding;
+  padding-bottom: 0px;
+  color: $timepicker-clockpicker-display-color;
+  .clockpicker-display-column {
+    float: left;
+    .clockpicker-span-hours.text-primary, .clockpicker-span-minutes.text-primary, #click-am.text-primary, #click-pm.text-primary {
+      animation-name: $timepicker-clockpicker-display-animate-name;
+      @extend .white-text;
+    }
+    #click-am, #click-pm {
+      cursor: pointer;
+    }
+  }
+  .clockpicker-display-am-pm {
+    padding-left: $timepicker-clockpicker-display-am-pm-pl;
+    vertical-align: bottom;
+    height: $timepicker-clockpicker-display-am-pm-height;
+    .clockpicker-span-am-pm {
+      display: inline-block;
+      font-size: $timepicker-clockpicker-span-am-pm-font-size;
+      line-height: $timepicker-clockpicker-span-am-pm-line-height;
+      color: $timepicker-clockpicker-span-am-pm-color;
+    }
+  }
+  .clockpicker-span-hours, .clockpicker-span-minutes {
+    animation-duration: $timepicker-clockpicker-span-hours-animation-duration;
+    animation-fill-mode: both;
+    cursor: pointer;
+    @include transition-main($timepicker-clockpicker-span-hours-transition);
+  }
+}
+
+@include keyframes (pulse){
+  from {
+    transform: $timepicker-keyframes-transform-pulse;
+  }
+  50% {
+    transform: $timepicker-keyframes-transform-pulse-middle;
+  }
+  to {
+    transform: $timepicker-keyframes-transform-pulse;
+  }
+}
+
+.clockpicker-moving {
+  cursor: move;
+}
+.clockpicker-plate {
+  background-color: $grey-lighten-3;
+  border-radius: $timepicker-clockpicker-plate-border-radius;
+  width: $timepicker-clockpicker-plate-width;
+  height: $timepicker-clockpicker-plate-height;
+  overflow: visible;
+  position: relative;
+  margin: auto;
+  margin-top: $timepicker-clockpicker-plate-margin-top;
+  /* Disable text selection highlighting. Thanks to Hermanya */
+  user-select: none;
+  .clockpicker-canvas,
+  .clockpicker-dial {
+    width: $timepicker-clockpicker-canvas-width;
+    height: $timepicker-clockpicker-canvas-height;
+    position: absolute;
+    left: $timepicker-clockpicker-canvas-left;
+    top: $timepicker-clockpicker-canvas-top;
+  }
+  .clockpicker-dial {
+    @include transition-main($timepicker-clockpicker-dial-transition-transform, $timepicker-clockpicker-dial-transition-opacity);
+    .clockpicker-tick {
+      border-radius: $timepicker-clockpicker-dial-tick-border-radius;
+      color: $timepicker-color-mdb;
+      line-height: $timepicker-clockpicker-dial-tick-line-height;
+      text-align: center;
+      width: $timepicker-clockpicker-dial-tick-width;
+      height: $timepicker-clockpicker-dial-tick-height;
+      position: absolute;
+      cursor: pointer;
+      transition: $timepicker-clockpicker-dial-tick-transition;
+      background-color: $timepicker-clockpicker-dial-tick-hover-bg;
+      &.active,
+      &:hover {
+        background-color: $timepicker-clockpicker-dial-tick-hover-bg-opacity;
+      }
+    }
+  }
+  .clockpicker-minutes {
+    visibility: hidden;
+  }
+  .clockpicker-dial-out {
+    opacity: 0;
+  }
+  .clockpicker-hours.clockpicker-dial-out {
+    @include transform($timepicker-clockpicker-dial-out-transform);
+  }
+  .clockpicker-minutes.clockpicker-dial-out {
+    @include transform($timepicker-clockpicker-dial-out-transform-minutes);
+  }
+}
+
+.clockpicker-canvas {
+  @include transition-main($timepicker-clockpicker-canvas-transition);
+  line {
+    stroke: $timepicker-clockpicker-canvas-stroke;
+    stroke-width: $timepicker-clockpicker-canvas-stroke-width;
+  }
+}
+.clockpicker-canvas-out {
+  opacity: $timepicker-clockpicker-canvas-out-opacity;
+}
+.clockpicker-canvas-bearing {
+  stroke: none;
+  fill: $timepicker-clockpicker-canvas-bearing-fill;
+}
+.clockpicker-canvas-fg {
+  stroke: none;
+  fill: $timepicker-clockpicker-canvas-fg-fill;
+  &.active {
+    fill: $timepicker-clockpicker-canvas-fg-active-fill;
+  }
+}
+.clockpicker-canvas-bg {
+  stroke: none;
+  fill: $timepicker-clockpicker-canvas-bg-fill;
+}
+.clockpicker-canvas-bg-trans {
+  fill: $timepicker-clockpicker-canvas-bg-trans-fill;
+}
+
+.clockpicker-am-pm-block{
+  margin-top: $timepicker-clockpicker-am-pm-block-mt;
+  width: 100%;
+  height: $timepicker-clockpicker-am-pm-block-height;
+  .clockpicker-button.am-button {
+    height: $timepicker-clockpicker-button-am-button-height;
+    width: $timepicker-clockpicker-button-am-button-width;
+    float: left;
+    border: 0;
+  }
+  .clockpicker-button.pm-button {
+    height: $timepicker-clockpicker-button-pm-button-height;
+    width: $timepicker-clockpicker-button-pm-button-width;
+    float: right;
+    border: 0;
+  }
+}
+
+.btn-floating.btn-flat {
+  color: $white-base;
+  padding: 0;
+  background: $primary-color;
+  &:hover {
+    box-shadow: none;
+  }
+  &:hover,
+  &:focus {
+    background-color: $timepicker-clockpicker-btn-floating-focus-bg !important;
+  }
+  &.active {
+    background-color: $timepicker-clockpicker-btn-floating-active-bg !important;
+    box-shadow: $z-depth-1-half;
+  }
+}
+
+.picker__footer {
+  .clockpicker-button {
+    margin: auto;
+    margin-top: $timepicker-clockpicker-footer-button-mt;
+    background-color: transparent;
+    text-transform: uppercase;
+    &:focus {
+      background-color: transparent;
+    }
+    &:active {
+      background-color: $timepicker-clockpicker-footer-button-active-bg;
+    }
+  }
+}
+
+.darktheme {
+  .picker__box {
+    background-color: $grey-darken-4;
+    .picker__date-display {
+      background-color: transparent;
+      .clockpicker-display {
+        @extend .white-text;
+        .clockpicker-span-am-pm {
+          @extend .white-text;
+        }
+
+      }
+    }
+    .picker__calendar-container{
+      .clockpicker-plate {
+        background-color: transparent;
+        .clockpicker-tick {
+          @extend .white-text;
+          background-color: $timepicker-darktheme-clockpicker-plate-bg;
+          &.active, &:hover {
+            background-color: $timepicker-darktheme-clockpicker-plate-active-bg;
+          }
+        }
+        .clockpicker-canvas line {
+          stroke: $timepicker-darktheme-clockpicker-canvas-line-stroke;
+        }
+        .clockpicker-canvas-bearing {
+          fill: $white-base;
+        }
+        .clockpicker-canvas-fg {
+          fill: $timepicker-darktheme-clockpicker-canvas-fg-fill;
+          &.active {
+            fill: $timepicker-darktheme-clockpicker-canvas-active-fg-fill;
+          }
+        }
+        .clockpicker-canvas-bg {
+          fill: $timepicker-darktheme-clockpicker-canvas-bg-fill;
+        }
+        .clockpicker-canvas-bg-trans {
+          fill: $timepicker-darktheme-clockpicker-canvas-bg-trans-fill;
+        }
+      }
+    }
+    .picker__footer{
+      button {
+        @extend .white-text;
+      }
+      .clockpicker-button:active {
+        background-color: $timepicker-darktheme-clockpicker-button-active-bg;
+      }
+    }
+
+  }
+
+}

html/scss/pro/picker/_default.scss

@@ -0,0 +1,147 @@
+/* ==========================================================================
+   $BASE-PICKER
+   ========================================================================== */
+/**
+ * Note: the root picker element should *NOT* be styled more than what's here.
+ */
+/**
+ * The picker input element.
+ */
+.picker__input {
+  cursor: default;
+}
+/**
+ * When the picker is opened, the input element is "activated".
+ */
+.picker__input.picker__input--active {
+  border-color: $pickerinput-active-border-color;
+}
+/**
+ * Note: the root picker element should *NOT* be styled more than what's here.
+ */
+.picker {
+  font-size: $picker-font-size;
+  text-align: center;
+  line-height: $picker-font-line-height;
+  color: $black;
+  position: absolute;
+  z-index: 10000;
+  user-select: none;
+  /**
+   * The holder is the only "scrollable" top-level container element. The holder should overlay the entire screen.
+   */
+  .picker__holder {
+    width: 100%;
+    overflow-y: auto;
+    overflow-scrolling: touch;
+    position: fixed;
+    @include transition-main($picker-holder-transition-bg, $picker-holder-transition-top);
+    backface-visibility: hidden;
+  }
+  /*!
+   * Default mobile-first, responsive styling for pickadate.js
+   * Demo: http://amsul.github.io/pickadate.js
+   */
+  /**
+   * Note: the root picker element should *NOT* be styled more than what's here.
+   */
+  /**
+   * Make the holder and frame fullscreen.
+   */
+  .picker__holder,
+  .picker__frame {
+    bottom: 0;
+    left: 0;
+    right: 0;
+    top: 100%;
+  }
+  /**
+   * The frame that bounds the box contents of the picker.
+   */
+  .picker__frame {
+    position: absolute;
+    margin: 0 auto;
+    min-width: $picker-frame-min-width;
+    max-width: $picker-frame-max-width;
+    //  picker width
+    width: $picker-frame-width;
+    max-height: $picker-frame-max-height;
+    filter: $picker-frame-filter;
+    opacity: 0;
+    @include transition-main($picker-frame-transition);
+    @media (min-height: $pickerframe-wrap-box-breakpoint) {
+      overflow: visible;
+      top: auto;
+      bottom: $picker-frame-media-bottom;
+      max-height: $picker-frame-media-max-height;
+    }
+    @media (min-height: $pickerframe-mb-breakpoint) {
+      margin-bottom: $picker-frame-media-mb;
+    }
+    /**
+     * The wrapper sets the stage to vertically align the box contents.
+     */
+    .picker__wrap {
+      display: table;
+      width: 100%;
+      height: 100%;
+      @media (min-height: $pickerframe-wrap-box-breakpoint) {
+        display: block;
+      }
+    }
+
+  }
+  /**
+   * The box contains all the picker contents.
+   */
+  .picker__box {
+    background: $white;
+    display: table-cell;
+    vertical-align: middle;
+    @media (min-height: $pickerframe-wrap-box-breakpoint) {
+      display: block;
+      border: $picker-box-border solid $picker-box-border-color;
+      border-top-color: $picker-box-border-top-color;
+      border-bottom-width: 0;
+      border-radius: $picker-box-border-radius;
+      box-shadow: $picker-box-box-shadow;
+    }
+  }
+}
+
+
+/**
+ * When the picker opens...
+ */
+.picker--opened {
+  .picker__holder {
+    top: 0;
+    background: transparent;
+    zoom: $picker-opened-holder-zoom;
+    background: $picker-opened-holder-bg;
+    @include transition-main($picker-opened-holder-transition);
+  }
+  .picker__frame {
+    top: 0;
+    filter: $picker-opened-frame-filter;
+    opacity: $picker-opened-frame-opacity;
+    @media (min-height: $pickerframe-pos-breakpoint) {
+      top: $picker-opened-frame-media-top;
+      bottom: auto;
+    }
+  }
+}
+
+
+/**
+ * For `large` screens, transform into an inline picker.
+ */
+
+/* ==========================================================================
+   CUSTOM MATERIALIZE STYLES
+   ========================================================================== */
+
+.datepicker.picker__input.picker__input--active,
+.timepicker.picker__input.picker__input--active {
+  border-bottom: $picker-custom-materialize-styles;
+}

html/scss/pro/sections/_blog.scss

@@ -0,0 +1,74 @@
+.section .section-heading {
+  margin-top: 2rem;
+  margin-bottom: 4rem;
+}
+
+.section-heading {
+  text-align: center;
+  h1 {
+    @extend .h1-responsive;
+    margin-top: 2rem;
+    margin-bottom: 3rem;
+  }
+  p {
+    margin-bottom: 3rem;
+    margin-right: 15%;
+    margin-left: 15%;
+  }
+}
+
+.section-description {
+  color: #757575;
+  margin-bottom: 4rem;
+  margin-left: 15%;
+  margin-right: 15%;
+  text-align: center;
+  @media (max-width: $medium-screen) {
+    margin-left: 5%;
+    margin-right: 5%;
+  }
+}
+
+.section-blog-fw {
+  .view {
+    img {
+      @extend .img-fluid;
+      border-radius:2px;
+    }
+  }
+  .jumbotron {
+    text-align: center;
+  }
+  h2 {
+    @extend .h2-responsive;
+    margin-bottom: 1rem;
+    font-weight: 300;
+    a {
+      color: #424242;
+      transition :0.2s;
+      &:hover {
+        color: #616161;
+        transition :0.2s;
+      }
+    }
+  }
+  .excerpt,
+  .post-text {
+    margin-left: 10%;
+    margin-right: 10%;
+    text-align: justify;
+    @media (max-width: $medium-screen) {
+      margin-left: 5%;
+      margin-right: 5%;
+    }
+  }
+  hr {
+    display: block;
+  }
+}
+
+.hr-width {
+  @media (min-width: 1200px) {
+    width: 83%;
+  }
+}

html/scss/pro/sections/_contacts.scss

@@ -0,0 +1,18 @@
+// Contact section
+.contact-section {
+  .form {
+    .btn-floating {
+      float: right;
+      position: relative;
+      bottom: $contact-section-form-btn-floating-bottom;
+      margin-right: 0;
+    }
+  }
+  .contact {
+    border-radius: 0 $md-card-border-radius $md-card-border-radius 0;
+    background-color: $contact-section-bgc;
+    .fa {
+      color: $contact-section-fa-color;
+    }
+  }
+}

html/scss/pro/sections/_magazine.scss

@@ -0,0 +1,9 @@
+// Magazine section
+.magazine-section {
+  .single-news {
+    border-bottom: 1px solid $magazine-single-news-border-bottom;
+    &:last-of-type {
+      border-bottom: none;
+    }
+  }
+}

html/scss/pro/sections/_pricing.scss

@@ -0,0 +1,86 @@
+// Pricing section
+.pricing-card {
+  text-align: center;
+  ul {
+    list-style-type: none;
+    padding: 0;
+  }
+  .header {
+    box-shadow: $z-depth-1-half;
+  }
+  .option {
+    padding: $pricing-card-option-padding;
+    margin-bottom: 0;
+    font-weight: 500;
+  }
+  .price {
+    position: relative;
+    padding-top: $pricing-card-price-padding-top;
+    .number {
+      font-size: $pricing-card-number-font-size;
+      padding: $pricing-card-number-padding;
+      font-weight: 300;
+      &:before {
+        content: "$";
+        position: absolute;
+        font-size: $pricing-card-number-before-font-size;
+        margin-left: $pricing-card-number-before-margin-left;
+        margin-top: $pricing-card-number-before-margin-top;
+      }
+      &:after {
+        content: "/mo";
+        position: absolute;
+        font-size: $pricing-card-number-after-font-size;
+        margin-top: $pricing-card-number-after-margin-top;
+      }
+    }
+    .version {
+      box-shadow: $z-depth-1;
+      border-radius: $md-card-border-radius $md-card-border-radius 0 0;
+      position: absolute;
+      top: 0;
+      width: 100%;
+      padding: $pricing-card-version-padding;
+      background-color: $pricing-card-version-bgc;
+    }
+  }
+  .striped {
+    padding: $pricing-card-striped-padding;
+    li {
+      border-bottom: 1px solid $pricing-card-striped-li-border-bottom-color;
+      margin-bottom: $pricing-card-striped-li-margin-bottom;
+    }
+    &.green-striped {
+      li {
+        border-color: $pricing-card-green-striped-li-border-color;
+      }
+    }
+    &.orange-striped {
+      li {
+        border-color: $pricing-card-orange-striped-li-border-color;
+      }
+    }
+    &.purple-striped {
+      li {
+        border-color: $pricing-card-purple-striped-li-border-color;
+      }
+    }
+  }
+  .card-background {
+    background-color: $pricing-card-dark-bgc;
+    border-radius: 0 0 $md-card-border-radius $md-card-border-radius;
+  }
+}
+
+// Additional pricing cards
+.card {
+  .card-circle {
+    border: 2px solid $pricing-card-circle-border-color;
+    height: $pricing-card-circle-height;
+    width: $pricing-card-circle-width;
+    border-radius: $pricing-card-circle-border-radius;
+    .fa {
+      font-size: $pricing-card-circle-icon-font-size;
+    }
+  }
+}

html/scss/pro/sections/_projects.scss

@@ -0,0 +1,18 @@
+// .card-body{
+//   h3,
+//   h5 {
+//     font-weight: 400;
+//     margin-bottom: 1rem;
+//   }
+
+//   h4 {
+//     font-weight: 500;
+//     margin-bottom: 1rem;
+//   }
+
+//   a {
+//     h5 {
+//       font-size: 1rem;
+//     }
+//   }
+// }

html/scss/pro/sections/_social.scss

@@ -0,0 +1,189 @@
+// Social section
+// Feed
+.mdb-feed {
+  .news {
+    display: flex;
+    .label {
+      display: block;
+      flex: 0 0 auto;
+      align-self: stretch;
+      width: 2.5rem;
+      img {
+        width: 100%;
+        height: auto;
+      }
+    }
+    .excerpt {
+      display: block;
+      flex: 1 1 auto;
+      align-self: stretch;
+      word-wrap: break-word;
+      margin: 0 0 1.2rem 1.2rem;
+      .brief {
+        padding-bottom: 0.5rem;
+        font-weight: 500;
+        a {
+          color: $primary-color;
+        }
+        .name {
+          display: inline-block;
+          vertical-align: baseline;
+        }
+        .date {
+          display: inline-block;
+          float: none;
+          padding-left: 0.7rem;
+          font-weight: 300;
+          font-size: 0.86rem;
+          color: $grey-base;
+        }
+      }
+      .added-images {
+        margin-bottom: 0.6rem;
+        img {
+          display: inline-block;
+          margin-right: 0.3rem;
+          width: 7rem;
+        }
+      }
+      .added-text {
+        margin-bottom: 0.6rem;
+        max-width: 450px;
+      }
+      .feed-footer {
+        .like {
+          font-weight: 300;
+          font-size: 0.86rem;
+          color: $grey-base;
+          &:hover {
+            .fa {
+              color: $red-base;
+              transition: 0.4s;
+            }
+            span {
+              color: $black-base;
+              transition: 0.4s;
+            }
+          }
+          .fa {
+            padding-right: 0.5rem;
+          }
+        }
+        span a {
+          padding-right: 0.3rem;
+          color: $primary-color;
+          cursor: default;
+        }
+        .thumbs {
+          .fa {
+            color: $grey-base;
+            transition: 0.4s;
+            &:hover {
+              color: $grey-darken-1;
+            }
+          }
+          .fa-thumbs-up {
+            padding-right: 0.3rem;
+          }
+        }
+        .comment {
+          color: $grey-base;
+        }
+      }
+    }
+  }
+}
+
+// Personal card
+.card-personal {
+  .card-body {
+    .card-title {
+      font-weight: 400;
+      &.title-one {
+        transition: 0.4s;
+        &:hover {
+          color: $primary-color;
+        }
+      }
+    }
+    .card-title {
+      margin-bottom: 0.3rem;
+    }
+    .card-meta {
+      font-weight: 300;
+      font-size: 0.86rem;
+      color: $grey-darken-1;
+      .fa {
+        padding-right: 0.5rem;
+      }
+    }
+    span {
+      transition: 0.5s;
+      &:hover {
+        color: $primary-color;
+      }
+    }
+  }
+}
+
+// News card
+.news-card {
+  .content {
+    .right-side-meta {
+      float: right;
+      font-weight: 300;
+      color: $grey-base;
+      margin-top: 0.3rem;
+    }
+    .avatar-img {
+      width: 2rem;
+      margin-right: 1rem;
+    }
+    img {
+      border-radius: 50%;
+      display: inline-block;
+      vertical-align: middle;
+      max-width: 100%;
+    }
+  }
+  .social-meta {
+    .fa {
+      padding-right: 0.6rem;
+    }
+    .fa-heart-o {
+      cursor: pointer;
+      color: rgba($black-base, .4);
+      transition: 0.53s;
+      &:hover {
+        color: $red-base;
+      }
+    }
+    span {
+      float: right;
+    }
+  }
+  .md-form {
+    margin-top: 1.3rem;
+    margin-bottom: 0.3rem;
+    .prefix {
+      font-size: 1.5rem;
+      margin-left: 0.2rem;
+      color: rgba($black-base, .4);
+      ~input,
+      .md-form .prefix~textarea {
+        width: calc(100% - 4rem);
+      }
+    }
+    .prefix.active {
+      color: rgba($black-base, .4);
+    }
+    .form-control {
+      padding-top: 0;
+      padding-bottom: 0.5rem;
+      margin-left: 3rem;
+      margin-bottom: 0;
+      height: 1.3rem;
+      border-bottom: 1px solid rgba($black-base, .1);
+    }
+  }
+}

html/scss/pro/sections/_team.scss

@@ -0,0 +1,14 @@
+// Team section
+section {
+  &.team-section {
+    .avatar {
+      img {
+        max-width: $team-section-avatar-max-width;
+        height: auto;
+        &.rounded-circle {
+          max-width: $team-section-avatar-circle-max-width;
+        }
+      }
+    }
+  }
+}

html/scss/pro/sections/_templates.scss

@@ -0,0 +1,55 @@
+// Templates
+// Fixed SideNav
+.fixed-sn {
+  .double-nav,
+  main,
+  footer {
+    padding-left: $fixed-sn-double-nav-main-footer-pl;
+  }
+  main {
+    padding-top: $fixed-sn-double-nav-main-pt;
+  }
+  @media (max-width: $sidenav-breakpoint) {
+    .double-nav,
+    main,
+    footer {
+      padding-left: 0;
+    }
+  }
+  @media (min-width: $small-screen) {
+    main,
+    .page-footer .container-fluid {
+      margin-left: $fixed-sn-double-nav-main-small-mx;
+      margin-right: $fixed-sn-double-nav-main-small-mx;
+    }
+  }
+  @media (min-width: $medium-screen) {
+    main,
+    .page-footer .container-fluid {
+      margin-left: $fixed-sn-double-nav-main-medium-mx;
+      margin-right: $fixed-sn-double-nav-main-medium-mx;
+    }
+  }
+  @media (min-width: $large-screen) {
+    main,
+    .page-footer .container-fluid {
+      margin-left: $fixed-sn-double-nav-main-large-mx;
+      margin-right: $fixed-sn-double-nav-main-large-mx;
+    }
+  }
+}
+
+// Hidden SideNav
+.hidden-sn {
+  main {
+    padding-top: $hidden-sn-main-pt;
+  }
+  .button-collapse {
+    display: block;
+    position: relative;
+    font-size: $hidden-sn-main-btn-collapse-font-size;
+    margin-right: $hidden-sn-main-btn-collapse-mr;
+    margin-left: $hidden-sn-main-btn-collapse-ml;
+    padding-left: 0;
+  }
+}

html/scss/pro/sections/_testimonials.scss

@@ -0,0 +1,41 @@
+// Testimonials section
+.testimonial-carousel {
+  .carousel-control {
+    background-image: none;
+    top: $testimonial-carousel-control-top;
+    transform: $testimonial-carousel-control-transform;
+    &:before {
+      font-size: $testimonial-carousel-control-font-size;
+      color: $testimonial-carousel-control-color;
+      transition: $testimonial-carousel-control-hover-transition;
+    }
+    &:hover {
+      &:before {
+        color: $testimonial-carousel-control-hover-color;
+        transition: $testimonial-carousel-control-hover-transition;
+      }
+    }
+    &.left {
+      left: $testimonial-carousel-control-mx;
+      &:before {
+        content: "\2039";
+      }
+    }
+    &.right {
+      right: $testimonial-carousel-control-mx;
+      &:before {
+        content: "\203a";
+      }
+    }
+  }
+  .testimonial {
+    margin-right: $testimonial-carousel-mx;
+    margin-left: $testimonial-carousel-mx;
+    .avatar {
+      img {
+        box-shadow: $z-depth-1-half;
+        max-width: $testimonial-carousel-avatar-max-width;
+      }
+    }
+  }
+}