kiso_themes 1.0.2

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

@@ -0,0 +1,123 @@
+.nav-stacked {
+  flex-direction: column;
+
+  > .nav-item {
+
+    &.active {
+
+      .nav-link {
+        background-color: $nav-stacked-active-link-bg;
+      }
+    }
+
+    > .nav-link {
+      box-shadow: inset 0 1px 1px $nav-stacked-link-border-color;
+
+      &:hover {
+        background-color: $nav-stacked-link-hover-bg;
+      }
+    }
+  }
+
+  &.nav-caret-left {
+
+    .nav-item.active::before {
+      display: inline-block;
+      position: relative;
+      float: left;
+      margin-top: 3px;
+      margin-left: -1rem;
+      border-top: 1rem solid transparent;
+      border-right: 1rem solid darken($nav-stacked-chevron-bg, 10%);
+      border-bottom: 1rem solid transparent;
+      width: 0;
+      height: 0;
+      vertical-align: top;
+      text-indent: -99999px;
+      content: ' ';
+    }
+
+    .nav-item.active::after {
+      display: inline-block;
+      position: relative;
+      float: left;
+      margin-top: -33px;
+      margin-left: calc(-1rem + 1px);
+      border-top: 1rem solid transparent;
+      border-right: 1rem solid $nav-stacked-chevron-bg;
+      border-bottom: 1rem solid transparent;
+      width: 0;
+      height: 0;
+      vertical-align: top;
+      text-indent: -99999px;
+      content: ' ';
+    }
+  }
+}
+
+.navbar-centered {
+  justify-content: space-between;
+
+  .navbar-left {
+    flex: 2;
+  }
+
+  .navbar-center {
+    flex: 1 1 auto;
+    justify-content: center;
+  }
+
+  .navbar-right {
+    flex: 2;
+    justify-content: flex-end;
+  }
+}
+
+.navbar-landing {
+  background: transparent;
+
+  &.navbar {
+    box-shadow: none;
+    background: $landing-nav-bg;
+    color: $landing-nav-brand-color;
+
+    &:not(.navbar-light) .navbar-nav .nav-item > a:not(.btn):not(.dropdown-item):not(.list-group-item) {
+      color: $landing-nav-color;
+    }
+  }
+
+  .nav.navbar-nav {
+    .nav-item {
+      padding: $padding-base-horizontal;
+
+      .nav-link {
+        position: relative;
+        font-size: $font-size-small;
+        font-weight: bold;
+        padding: 0 0 .2rem 0;
+
+        &:hover {
+          background-color: transparent !important;
+        }
+
+        &:not(.btn):before {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          transform: scaleX(0);
+          transition: all 0.3s ease-in-out 0s;
+          visibility: hidden;
+          background-color: currentColor;
+          width: 100%;
+          height: 2px;
+          content: '';
+        }
+
+        &:not(.btn):hover:before {
+          transform: scaleX(1);
+          visibility: visible;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,275 @@
+.page-header {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+
+  padding: $padding-base-vertical*3 1rem;
+
+  h4 {
+    margin: 0;
+  }
+
+  h4 ~ ol:not(.breadcrumb-4) {
+    @include media-breakpoint-up(sm) {
+      &:before {
+        position: absolute;
+        display: block;
+        content: '';
+        height: 2.2rem;
+        top: .4rem;
+        left: 1rem;
+        border-right: 1px solid $text-muted;
+      }
+    }
+  }
+}
+
+.plan-selector {
+
+  form {
+    margin: 2rem 0;
+    padding: 1rem 0;
+    border-top: 2px solid;
+    border-bottom: 2px solid;
+
+    .form-check {
+      padding-left: 0;
+    }
+  }
+
+  .custom-control {
+    width: 100%;
+    padding-left: 0;
+    margin-right: 0;
+
+    input[type="radio"]:checked ~ .custom-control-description {
+      border: 1px solid $brand-primary-lightest;
+      background: $plan-selector-active-bg;
+
+      .price {
+        color: $primary-color;
+      }
+    }
+
+    .custom-control-input {
+      opacity: 1;
+      z-index: inherit;
+      top: 50%;
+      right: 1.6rem;
+      transform: translateY(-50%);
+    }
+
+    .custom-control-description {
+      align-items: center;
+      padding: 1rem;
+      cursor: pointer;
+      border-radius: $border-radius-small;
+      border: 1px solid transparent;
+
+      .details {
+        flex-grow: 1;
+        flex-basis: 100%;
+      }
+
+      .price {
+        font-size: 1.7rem;
+        margin-right: 2rem;
+        color: $gray-900;
+        width: 8rem;
+      }
+
+      .plan-name {
+        font-weight: bold;
+        line-height: 1;
+      }
+
+      @include media-breakpoint-down(sm) {
+        flex-direction: column;
+        align-items: flex-start;
+
+        .price {
+          margin-top: 1rem;
+        }
+      }
+    }
+  }
+}
+
+.mouse-scroll {
+  display: block;
+  position: absolute;
+  margin: auto;
+  left: 50%;
+  bottom: 40px;
+  z-index: 9999;
+
+  span {
+    display: block;
+    width: 5px;
+    height: 5px;
+    transform: rotate(45deg);
+    border-right: 2px solid #fff;
+    border-bottom: 2px solid #fff;
+    margin: 0 0 3px 5px;
+  }
+
+  .mouse {
+    height: 32px;
+    width: 16px;
+    border-radius: 10px;
+    transform: none;
+    border: 2px solid #ffffff;
+    top: 170px;
+  }
+
+  .down-arrow-1 {
+    margin-top: 6px;
+    animation: mouse-scroll 1s infinite;
+  }
+
+  .down-arrow-2,
+  .down-arrow-3 {
+    animation: mouse-scroll 1s infinite;
+  }
+}
+
+.mouse-scroll {
+  .down-arrow-1 {
+    animation-delay: .1s;
+  }
+
+  .down-arrow-2 {
+    animation-delay: .2s;
+    animation-direction: alternate;
+  }
+
+  .down-arrow-3 {
+    animation-delay: .3s;
+    animation-direction: alternate;
+  }
+
+  .mouse-in {
+    height: 5px;
+    width: 2px;
+    display: block;
+    margin: 5px auto;
+    background: #ffffff;
+    position: relative;
+    animation: animated-mouse 1.2s ease infinite;
+  }
+}
+
+@keyframes animated-mouse {
+  0% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+}
+
+
+@keyframes mouse-scroll {
+  0% {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 0.5;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+.browser {
+  max-width: 1000px;
+  height: 300px;
+  background: #fff;
+  border-bottom: 5px solid #ddd;
+  border-radius: 5px 5px 3px 3px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  overflow: hidden;
+
+  .address-bar {
+    width: 100%;
+    height: 30px;
+    background: linear-gradient(to bottom, #ddd 0%, #c7c7c7 100%);
+    border-radius: 5px 5px 0 0;
+    border-bottom: 1px solid #c7c7c7;
+    border-top: 1px solid #e4e4e4;
+    position: absolute;
+    top:0;
+
+    &:before {
+      left: 15px;
+      box-shadow: 15px 0 0 0 #ebebeb;
+      content: '';
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      background: #ebebeb;
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      display: block;
+    }
+
+    &:after {
+      left: 45px;
+      content: '';
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: #ebebeb;
+    position: absolute;
+    top: 50%;
+    -webkit-transform: translateY(-50%);
+    -moz-transform: translateY(-50%);
+    display: block;
+    }
+  }
+}
+
+
+.content-block-9 {
+  img {
+    padding: 2rem;
+    object-fit: contain;
+    position: relative;
+
+    height: 100%;
+  }
+
+  .row > [class*='col-'] {
+    border-right: 1px solid $medium-gray;
+    border-bottom: 1px solid $medium-gray;
+
+    height: 190px;
+    justify-content: center;
+    align-items: center;
+
+
+    &:nth-child(4n) {
+      border-right: none;
+    }
+
+    &:nth-last-child(-n+4) {
+      border-bottom: none;
+    }
+  }
+}
+
+.profile-header {
+  margin-top: -$margin-base-vertical;
+  border-radius: 0;
+  background-color: $card-bg;
+}

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

@@ -0,0 +1,152 @@
+.pagination {
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+
+    li {
+      display: inline-block;
+    }
+  }
+
+  .page-item .page-link,
+  ul li a {
+    display: inline-block;
+    transition: all 0.3s;
+    margin: 0 3px;
+    border: 0;
+    border-radius: 30px !important;
+    cursor: pointer;
+    padding: 0px 11px;
+    min-width: 30px;
+    height: 30px;
+    text-align: center;
+    text-transform: uppercase;
+    line-height: 30px;
+    color: $pagination-color;
+    background-color: $pagination-bg;
+
+    &:hover,
+    &:focus {
+      border: none;
+      background-color: $pagination-hover-bg;
+      color: $pagination-hover-color;
+      text-decoration: none;
+    }
+  }
+
+  .arrow-margin-left,
+  .arrow-margin-right {
+    position: absolute;
+  }
+
+  .arrow-margin-right {
+    right: 0;
+  }
+
+  .arrow-margin-left {
+    left: 0;
+  }
+
+  .page-item.active > .page-link,
+  ul li.active a {
+    box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.2);
+    color: $light-gray;
+
+    &,
+    &:focus,
+    &:hover {
+      border-color: $default-color;
+      background-color: $default-color;
+      color: $white-color;
+      text-decoration: none;
+    }
+  }
+
+  .page-item.disabled > .page-link,
+  ul li.disabled a {
+    background-color: $pagination-disabled-bg;
+    color: $pagination-disabled-color;
+
+    cursor: not-allowed;
+  }
+
+  // Colors
+
+  &.pagination-info {
+    .page-item.active > .page-link {
+      &,
+      &:focus,
+      &:hover {
+        border-color: $brand-info;
+        background-color: $brand-info;
+      }
+    }
+  }
+
+  &.pagination-success {
+    .page-item.active > .page-link {
+      &,
+      &:focus,
+      &:hover {
+        border-color: $brand-success;
+        background-color: $brand-success;
+      }
+    }
+  }
+
+  &.pagination-primary {
+    .page-item.active > .page-link {
+      &,
+      &:focus,
+      &:hover {
+        border-color: $brand-primary;
+        background-color: $brand-primary;
+      }
+    }
+  }
+
+  &.pagination-warning {
+    .page-item.active > .page-link {
+      &,
+      &:focus,
+      &:hover {
+        border-color: $brand-warning;
+        background-color: $brand-warning;
+      }
+    }
+  }
+
+  &.pagination-danger {
+    .page-item.active > .page-link {
+      &,
+      &:focus,
+      &:hover {
+        border-color: $brand-danger;
+        background-color: $brand-danger;
+      }
+    }
+  }
+
+  &.pagination-neutral {
+    .page-item > .page-link {
+      color: $white-color;
+
+      &:focus,
+      &:hover {
+        background-color: $opacity-2;
+        color: $white-color;
+      }
+    }
+
+    .page-item.active > .page-link {
+      &,
+      &:focus,
+      &:hover {
+        border-color: $white-bg;
+        background-color: $white-bg;
+        color: $brand-primary;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,131 @@
+.nav-pills-round {
+  .nav-item {
+    .nav-link {
+      padding: 0 15.5px;
+      text-align: center;
+      height: 60px;
+      width: 60px;
+      font-weight: $font-weight-normal;
+      color: $dark-gray;
+      margin-right: 19px;
+      background-color: $opacity-gray-3;
+      border-radius: $btn-round-radius;
+
+      &:hover{
+        background-color: $opacity-gray-3;
+      }
+
+      &.active{
+        &,
+        &:focus,
+        &:hover{
+          background-color: $dark-gray;
+          color: $white-color;
+          box-shadow: 0px 5px 35px 0px rgba(0, 0, 0, 0.3);
+        }
+      }
+
+      &.disabled,
+      &:disabled,
+      &[disabled]{
+        opacity: .5;
+      }
+    }
+
+    i{
+      display: block;
+      font-size: 20px;
+      line-height: 60px;
+    }
+  }
+
+  &.nav-pills-neutral{
+    .nav-item {
+      .nav-link{
+        background-color: $opacity-2;
+        color: $white-color;
+
+        &.active{
+          &,
+          &:focus,
+          &:hover{
+            background-color: $white-color;
+            color: $primary-color;
+          }
+        }
+      }
+    }
+  }
+
+  &.nav-pills-primary{
+    .nav-item {
+      .nav-link.active{
+        &,
+        &:focus,
+        &:hover{
+          background-color: $brand-primary;
+        }
+      }
+    }
+  }
+
+  &.nav-pills-info{
+    .nav-item {
+      .nav-link.active{
+        &,
+        &:focus,
+        &:hover{
+          background-color: $brand-info;
+        }
+      }
+    }
+  }
+
+  &.nav-pills-success{
+    .nav-item {
+      .nav-link.active{
+        &,
+        &:focus,
+        &:hover{
+          background-color: $brand-success;
+        }
+      }
+    }
+  }
+
+  &.nav-pills-warning{
+    .nav-item {
+      .nav-link.active{
+        &,
+        &:focus,
+        &:hover{
+          background-color: $brand-warning;
+        }
+      }
+    }
+  }
+
+  &.nav-pills-danger{
+    .nav-item {
+      .nav-link.active{
+        &,
+        &:focus,
+        &:hover{
+          background-color: $brand-danger;
+        }
+      }
+    }
+  }
+}
+
+.tab-space{
+  padding: 20px 0 50px 0px;
+}
+
+.nav-align-center{
+  text-align: center;
+
+  .nav-pills{
+    display: inline-flex;
+  }
+}

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

@@ -0,0 +1,59 @@
+.popover {
+  border: none;
+  box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.2);
+  max-width: 240px;
+  line-height: 1.7;
+  font-size: $font-size-base;
+
+  @include popover-color($default-color, $white-color);
+
+  &.bs-popover-top .arrow:before,
+  &.bs-popover-left .arrow:before,
+  &.bs-popover-right .arrow:before,
+  &.bs-popover-bottom .arrow:before {
+    border-top-color: transparent;
+    border-right-color: transparent;
+    border-bottom-color: transparent;
+    border-left-color: transparent;
+  }
+
+  .popover-header {
+    margin: 0;
+    margin-top: 5px;
+    border: none;
+    background-color: transparent;
+    text-transform: capitalize;
+    color: $default-color-opacity;
+    font-size: $font-size-base;
+    font-weight: $font-weight-semi;
+  }
+
+  &:before {
+    display: none;
+  }
+
+  &.bs-tether-element-attached-top:after {
+    top: -9px;
+    border-bottom-color: $white-color;
+  }
+
+  &.popover-primary {
+    @include popover-color($primary-color, $white-color);
+  }
+
+  &.popover-info {
+    @include popover-color($info-color, $white-color);
+  }
+
+  &.popover-warning {
+    @include popover-color($warning-color, $white-color);
+  }
+
+  &.popover-danger {
+    @include popover-color($danger-color, $white-color);
+  }
+
+  &.popover-success {
+    @include popover-color($success-color, $white-color);
+  }
+}