kiso_themes 1.0.2

data/lib/sass/kiso_themes/_core/_misc.scss

@@ -0,0 +1,239 @@
+html {
+  height: 100%;
+}
+
+body {
+  min-height: 100%;
+}
+
+body {
+  background-color: $main-bg;
+  color: $text-color;
+
+  font-family: $sans-serif-family;
+  font-size: $font-size-base;
+
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+@if($style-scrollbar == true) {
+  @include scrollbars($scrollbar-width, $scrollbar-foreground, $scrollbar-background);
+}
+
+.main {
+  position: relative;
+
+  background: $main-bg;
+}
+
+/* Animations */
+
+.nav-pills .nav-link,
+.nav-item .nav-link,
+.navbar,
+.nav-tabs .nav-link {
+  @include transition(all $general-transition-time $transition-ease);
+}
+
+//transition for dropdown caret
+
+.dropdown-toggle:after,
+.bootstrap-switch-label:before {
+  @include transition(all $fast-transition-time $transition-ease);
+}
+
+.dropdown-toggle[aria-expanded='true']:after {
+  @include rotate-180();
+}
+
+.button-bar {
+
+  display: block;
+  position: relative;
+
+  border-radius: 1px;
+  background: $white-bg;
+
+  width: 22px;
+  height: 1px;
+
+  & + .button-bar {
+    margin-top: 7px;
+  }
+
+  &:nth-child(2) {
+    width: 17px;
+  }
+}
+
+.open {
+
+  @include opacity(1);
+  @include transform-translate-y(0);
+  visibility: visible;
+}
+
+.cover-image {
+  background-size: cover;
+}
+
+.help-block {
+  opacity: 0.5;
+  padding-top: 0.3rem;
+  padding-left: 1.25rem;
+  font-size: 70%;
+}
+
+.overflow-visible {
+  overflow: visible;
+}
+
+.separator {
+  margin: 20px auto;
+
+  background-color: $default-color;
+  width: 44px;
+  height: 2px;
+
+  &.separator-primary {
+    background-color: $primary-color;
+  }
+}
+
+.overflow-y-scroll {
+  overflow-y: scroll;
+}
+
+.overflow-visible {
+  overflow: visible !important;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.shadow {
+  box-shadow: $general-shadow;
+}
+
+.light-shadow {
+  box-shadow: $light-shadow;
+}
+
+.inspect-mode {
+
+  display: flex;
+  position: fixed;
+  right: 30px;
+  bottom: 20px;
+  align-items: center;
+  justify-content: center;
+  transition: all 350ms;
+  z-index: 1000;
+  border: 3px solid #f5f5f5;
+  border-radius: 30px;
+  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
+  background-color: #6d7379;
+
+  cursor: pointer;
+
+  width: 50px;
+  height: 50px;
+
+  color: #fff;
+
+  font-size: 20px;
+
+  &:hover,
+  &:focus {
+    outline: none;
+  }
+
+  &:hover {
+    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
+  }
+
+  &.on {
+    background-color: #232527;
+
+    font-size: 24px;
+  }
+}
+
+.inspect-target {
+
+  border: 4px solid red !important;
+  cursor: pointer !important;
+}
+
+.inspect-mode-bg {
+
+  display: flex;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  align-items: center;
+  justify-content: center;
+  z-index: 99999;
+
+  background-color: rgba(0, 0, 0, 0.8);
+}
+
+.inspector-modal {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+
+  border-radius: 8px;
+  background-color: #232527;
+  padding: 2rem;
+
+  width: 60%;
+  max-height: 90%;
+
+  textarea {
+    position: absolute;
+    left: -999999999999999999px;
+  }
+
+  pre {
+
+    background-color: black;
+
+    width: 100%;
+    overflow: scroll;
+  }
+
+  code {
+    outline: none;
+    width: 100%;
+    min-height: 400px;
+
+    white-space: pre;
+
+    color: white;
+
+    font-family: monospace;
+  }
+}
+
+.flex-grow-1 {
+  flex-grow: 1;
+}
+
+.flex-grow-2 {
+  flex-grow: 2;
+}
+
+.flex-basis-100 {
+  flex-basis: 100px;
+}
+
+.parallax-window {
+	min-height: 400px;
+	background: transparent;
+}

data/lib/sass/kiso_themes/_core/_mixins.scss

@@ -0,0 +1,18 @@
+// Theming
+@import "mixins/theme";
+
+// Utilities
+@import "mixins/transparency";
+@import "mixins/colors";
+
+// Components
+@import "mixins/buttons";
+@import "mixins/vendor-prefixes";
+@import "mixins/inputs";
+@import "mixins/dropdown";
+@import "mixins/badges";
+@import "mixins/navbar";
+@import "mixins/popovers";
+@import "mixins/modals";
+@import "mixins/pages";
+@import "mixins/datepicker";

data/lib/sass/kiso_themes/_core/_modals.scss

@@ -0,0 +1,190 @@
+.modal-content {
+  border: none;
+  border-radius: $border-radius-small;
+  box-shadow: 0 10px 50px 0 rgba(0, 0, 0, .5);
+
+  .modal-header {
+    padding-top: 24px;
+    padding-right: 24px;
+    padding-bottom: 0;
+    padding-left: 24px;
+
+    border-bottom: none;
+
+    & button {
+      position: absolute;
+      top: 30px;
+      right: 27px;
+
+      outline: 0;
+    }
+
+    .title {
+      margin-top: 5px;
+      margin-bottom: 0;
+    }
+  }
+
+  .modal-body {
+    padding-top: 24px;
+    padding-right: 24px;
+    padding-bottom: 16px;
+    padding-left: 24px;
+
+    line-height: 1.9;
+  }
+
+  .modal-footer {
+    justify-content: space-between;
+
+    padding-right: 24px;
+    padding-bottom: 16px;
+    padding-left: 24px;
+
+    border-top: none;
+
+    button {
+      width: auto;
+      margin: 0;
+      padding-right: 16px;
+      padding-left: 16px;
+
+      &.pull-left {
+        position: relative;
+        left: -5px;
+
+        padding-right: 5px;
+        padding-left: 5px;
+      }
+    }
+  }
+
+  .modal-body + .modal-footer {
+    padding-top: 0;
+  }
+}
+
+.modal-backdrop {
+  background: rgba(0,0,0,.3);
+}
+
+.modal {
+  &.modal-mini {
+    p {
+      text-align: center;
+    }
+
+    .modal-dialog {
+      max-width: 255px;
+      margin: 0 auto;
+    }
+
+    .modal-profile {
+      width: 70px;
+      height: 70px;
+
+      text-align: center;
+
+      border-radius: 50%;
+      background-color: $white-color;
+      box-shadow: 0 5px 50px 0 rgba(0, 0, 0, .3);
+
+      line-height: 5.9;
+
+      i {
+        color: $primary-color;
+      }
+
+      &[class*="modal-profile-"] {
+        i {
+          color: $white-color;
+        }
+      }
+
+      &.modal-profile-primary {
+        background-color: $primary-color;
+      }
+
+      &.modal-profile-danger {
+        background-color: $danger-color;
+      }
+
+      &.modal-profile-warning {
+        background-color: $warning-color;
+      }
+
+      &.modal-profile-success {
+        background-color: $success-color;
+      }
+
+      &.modal-profile-info {
+        background-color: $info-color;
+      }
+    }
+
+    .modal-footer {
+      button {
+        text-transform: uppercase;
+
+        &:first-child {
+          opacity: .5;
+        }
+      }
+    }
+  }
+
+  &.modal-default {
+    @include modal-colors($white-color, $black-color);
+  }
+
+  &.modal-primary {
+    @include modal-colors($primary-color, $white-color);
+  }
+
+  &.modal-danger {
+    @include modal-colors($danger-color, $white-color);
+  }
+
+  &.modal-warning {
+    @include modal-colors($warning-color, $white-color);
+  }
+
+  &.modal-success {
+    @include modal-colors($success-color, $white-color);
+  }
+
+  &.modal-info {
+    @include modal-colors($info-color, $white-color);
+  }
+
+  &.show.modal-mini .modal-dialog {
+    transform: translate(0,30%);
+  }
+
+  .modal-header .close {
+    color: $danger-color;
+    text-shadow: none;
+
+    &:hover,
+    &:focus {
+      opacity: 1;
+    }
+  }
+}
+
+.modal-example {
+  position: relative;
+  z-index: 1;
+  top: auto;
+  right: auto;
+  bottom: auto;
+  left: auto;
+
+  display: block;
+
+  .modal-dialog {
+    margin: 3rem auto !important;
+
+    transform: translate(0, 0%) !important;
+  }
+}

data/lib/sass/kiso_themes/_core/_navbar.scss

@@ -0,0 +1,260 @@
+.navbar {
+  min-height: 53px;
+  margin-bottom: $margin-base-vertical;
+  padding-top: $navbar-padding-base;
+  padding-bottom: $navbar-padding-base;
+
+  background-color: $navbar-background;
+
+  box-shadow: $navbar-box-shadow;
+
+  a {
+    vertical-align: middle;
+  }
+
+  &:not(.navbar-light) {
+    .navbar-nav .nav-item > a {
+      &:not(.btn):not(.dropdown-item):not(.list-group-item) {
+        color: $navbar-navlink-color;
+      }
+    }
+  }
+
+  p {
+    display: inline-block;
+
+    margin: 0;
+
+    line-height: 21px;
+  }
+
+  .navbar-nav {
+    align-items: center;
+
+    &.navbar-logo {
+      position: absolute;
+      top: -4px;
+      right: 0;
+      left: 0;
+
+      width: 49px;
+      margin: 0 auto;
+    }
+
+    [class^="ti-"],
+    [class*=" ti-"] {
+      font-size: 1rem;
+    }
+
+    .nav-link.btn {
+      padding: $padding-btn-vertical $padding-btn-horizontal;
+
+      &.btn-lg {
+        padding: $padding-large-vertical $padding-large-horizontal;
+      }
+
+      &.btn-sm {
+        padding: $padding-small-vertical $padding-small-horizontal;
+      }
+
+      @include media-breakpoint-down(md) {
+        margin-bottom: $padding-btn-vertical;
+      }
+    }
+
+    .nav-link:not(.btn) {
+      display: flex;
+      align-items: center;
+
+      padding: $padding-base-horizontal;
+
+      cursor: pointer;
+      text-transform: uppercase;
+
+      font-size: $font-size-mini;
+      line-height: $line-height-nav-link;
+
+      i.fa + p,
+      i.now-ui-icons + p {
+        margin-left: 5px;
+      }
+
+      i.fa,
+      i.now-ui-icons {
+        position: relative;
+        top: 2px;
+
+        width: 21px;
+
+        text-align: center;
+
+        font-size: 18px;
+      }
+
+      i.now-ui-icons {
+        top: 4px;
+
+        font-size: 16px;
+      }
+
+      &.profile-photo {
+        .profile-photo-small {
+          width: 27px;
+          height: 27px;
+        }
+      }
+
+      &.disabled {
+        opacity: .5;
+        color: $white-color;
+      }
+    }
+
+    .nav-item.active .nav-link:not(.btn),
+    .nav-item .nav-link:not(.btn):focus,
+    .nav-item .nav-link:not(.btn):hover,
+    .nav-item .nav-link:not(.btn):active {
+      border-radius: $border-radius-small;
+      background-color: $navbar-navlink-hover-bg;
+    }
+
+    .nav-item {
+      .btn-group {
+        .btn.active {
+          color: $navbar-light-active-color;
+
+          @include hover-focus {
+            color: $navbar-light-active-color;
+          }
+        }
+      }
+    }
+
+    .form-control {
+      border-color: $white-color;
+
+      @include form-control-placeholder($white-color);
+    }
+
+    .input-group-prepend,
+    .input-group-append {
+      color: $white-color;
+      border-color: $white-color;
+      background-color: transparent;
+    }
+
+    .input-group-focus > .input-group-prepend,
+    .input-group-focus > .input-group-append {
+      background-color: $white-color;
+    }
+  }
+
+  .logo-container {
+    overflow: hidden;
+
+    width: 27px;
+    height: 27px;
+    margin: 0 auto;
+
+    border: 1px solid transparent;
+    border-radius: 50%;
+  }
+
+  .navbar-brand {
+    padding-top: $padding-base-vertical;
+    padding-bottom: $padding-base-vertical;
+
+    color: $navbar-brand-color;
+
+    text-transform: uppercase;
+
+    font-weight: bold;
+    font-size: $font-size-large;
+    line-height: $line-height-nav-link;
+  }
+
+  .navbar-toggler {
+    cursor: pointer;
+
+    outline: 0;
+
+    &.navbar-toggler-left {
+      position: relative;
+      left: 0;
+
+      padding-left: 0;
+    }
+
+    &:hover {
+      & .navbar-toggler-bar.bar2 {
+        width: 22px;
+      }
+    }
+  }
+
+  .button-dropdown {
+    .navbar-toggler-bar:nth-child(2) {
+      width: 17px;
+    }
+  }
+
+  &.navbar-transparent {
+    padding-top: 20px;
+
+    color: $white-color;
+    background-color: $transparent-bg !important;
+    box-shadow: none;
+  }
+
+  &.bg-white:not(.navbar-transparent) {
+    a:not(.dropdown-item) {
+      color: $default-color;
+
+      &.disabled {
+        opacity: .5;
+        color: $default-color;
+      }
+    }
+
+    .button-bar {
+      background: $default-color;
+    }
+
+    .nav-item.active .nav-link:not(.btn),
+    .nav-item .nav-link:not(.btn):focus,
+    .nav-item .nav-link:not(.btn):hover,
+    .nav-item .nav-link:not(.btn):active {
+      background-color: $opacity-gray-3;
+    }
+
+    .logo-container {
+      border: 1px solid $default-color;
+    }
+  }
+}
+
+.user-nav {
+  .dropdown-toggle {
+    padding: 0;
+  }
+}
+
+.navbar-toggler {
+  border-color: $brand-primary;
+}
+
+.navbar-toggler-icon {
+  background-image: $navbar-toggle;
+}
+
+@include media-breakpoint-down(md) {
+  .navbar-toggler {
+      padding: 0 .5rem;
+      height: 2em;
+  }
+
+  .navbar-toggler-icon {
+    height: 1em;
+    width: 1em;
+  }
+}