kiso_themes 1.0.2

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

@@ -0,0 +1,150 @@
+// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
+.alert{
+  border: 0;
+  border-radius: 0;
+  color: $dark-color;
+  padding-top: .9rem;
+  padding-bottom: .9rem;
+  position: relative;
+  background: darken($main-bg, 5%);
+
+  h4 {
+    margin: 0;
+  }
+
+  p {
+    margin-bottom: 0;
+  }
+
+  &.alert-success{
+    color: $white-color;
+    background-color: $success-color-alert;
+
+    .btn-success {
+      background-color: lighten($success-color-alert, 15%);
+    }
+
+    &.alert-outline {
+      background: transparent;
+      color: $success-color-alert;
+      border: 1px solid $success-color-alert;
+    }
+  }
+
+  &.alert-danger{
+    color: $white-color;
+    background-color: $danger-color-alert;
+
+    .btn-danger {
+      background-color: lighten($danger-color-alert, 15%);
+    }
+
+    &.alert-outline {
+      background: transparent;
+      color: $danger-color-alert;
+      border: 1px solid $danger-color-alert;
+    }
+  }
+
+  &.alert-warning{
+    color: $white-color;
+    background-color: $warning-color-alert;
+
+    .btn-warning {
+      background-color: lighten($warning-color-alert, 15%);
+    }
+
+    &.alert-outline {
+      background: transparent;
+      color: $warning-color-alert;
+      border: 1px solid $warning-color-alert;
+    }
+  }
+
+  &.alert-info{
+    color: $white-color;
+    background-color: $info-color-alert;
+
+    .btn-info {
+      background-color: lighten($info-color-alert, 15%);
+    }
+
+    &.alert-outline {
+      background: transparent;
+      color: $info-color-alert;
+      border: 1px solid $info-color-alert;
+    }
+  }
+
+  &.alert-primary{
+    color: $white-color;
+    background-color: $primary-color-alert;
+
+    &.alert-outline {
+      background: transparent;
+      color: $primary-color-alert;
+      border: 1px solid $primary-color-alert;
+    }
+  }
+
+  &.alert-dark {
+    color: $white-color;
+    background-color: $dark-color;
+
+    &.alert-outline {
+      background: transparent;
+      color: $dark-color;
+      border: 1px solid $dark-color;
+    }
+  }
+
+  &.alert-light {
+    box-shadow: 0 0px 14px 3px rgba(74, 131, 216, 0.11);
+    background: white;
+
+    &.alert-outline {
+      background: transparent;
+      color: $dark-color;
+      border: 1px solid $dark-color;
+    }
+
+    .close {
+      color: $dark-color;
+    }
+  }
+
+  &.alert-rounded {
+    border-radius: $border-radius-small;
+  }
+
+  &.alert-actionable {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .alert-body {
+      display: flex;
+      align-items: center;
+
+      i {
+        font-size: 5rem;
+        padding-right: 2rem;
+      }
+    }
+  }
+
+  strong{
+    text-transform: uppercase;
+  }
+
+  i.fa {
+    font-size: 20px;
+  }
+
+  .close{
+    color: $white-color;
+    opacity: .9;
+    text-shadow: none;
+    outline: 0;
+  }
+}

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

@@ -0,0 +1,108 @@
+.bg-default {
+  background-color: $default-color !important;
+}
+
+.bg-primary {
+  background-color: $primary-color !important;
+  background-image: none !important;
+}
+
+.bg-info {
+  background-color: $info-color !important;
+  background-image: none !important;
+}
+
+.bg-success {
+  background-color: $success-color !important;
+  background-image: none !important;
+}
+
+.bg-danger {
+  background-color: $danger-color !important;
+  background-image: none !important;
+}
+
+.bg-warning {
+  background-color: $warning-color !important;
+  background-image: none !important;
+}
+
+.bg-white {
+  background-color: $white-color !important;
+  background-image: none !important;
+}
+
+.bg-dark {
+  background-color: $dark-color !important;
+  background-image: none !important;
+}
+
+.bg-light {
+  background-color: map-get($theme-colors, $light) !important;
+  background-image: none !important;
+}
+
+.bg-gradient-1 {
+  background-image: $gradient-1 !important;
+}
+
+.bg-gradient-2 {
+  background-image: $gradient-3 !important;
+}
+
+.bg-gradient-3 {
+  background-image: $gradient-4 !important;
+}
+
+.bg-gradient-4 {
+  background-image: $gradient-5 !important;
+}
+
+.bg-neutral {
+  background-image: $gray-300 !important;
+}
+
+@each $gray-color-name in map-keys($grays) {
+  .bg-gray-#{$gray-color-name} {
+    background-color: map-get($grays, $gray-color-name) !important;
+    color: color-yiq(map-get($grays, $gray-color-name));
+  }
+}
+
+@each $theme-color-name in map-keys($theme-colors) {
+  .bg-#{$theme-color-name}-light {
+    background-color: tint(map-get($theme-colors, $theme-color-name), 15%) !important;
+    color: color-yiq(tint(map-get($theme-colors, $theme-color-name), 15%));
+  }
+
+  .bg-#{$theme-color-name}-lighter {
+    background-color: tint(map-get($theme-colors, $theme-color-name), 20%) !important;
+    color: color-yiq(tint(map-get($theme-colors, $theme-color-name), 20%));
+  }
+
+  .bg-#{$theme-color-name}-lightest {
+    background-color: tint(map-get($theme-colors, $theme-color-name), 30%) !important;
+    color: color-yiq(tint(map-get($theme-colors, $theme-color-name), 30%));
+  }
+
+  .bg-#{$theme-color-name}-dark {
+    background-color: shade(map-get($theme-colors, $theme-color-name), 15%) !important;
+    color: color-yiq(tint(map-get($theme-colors, $theme-color-name), 15%));
+  }
+
+  .bg-#{$theme-color-name}-darker {
+    background-color: shade(map-get($theme-colors, $theme-color-name), 20%) !important;
+    color: color-yiq(tint(map-get($theme-colors, $theme-color-name), 20%));
+  }
+
+  .bg-#{$theme-color-name}-darkest {
+    background-color: shade(map-get($theme-colors, $theme-color-name), 30%) !important;
+    color: color-yiq(tint(map-get($theme-colors, $theme-color-name), 30%));
+  }
+}
+
+.bg-circle {
+  display: inline-block;
+  border-radius: 50%;
+  padding: 1rem;
+}

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

@@ -0,0 +1,45 @@
+.badge {
+  text-transform: uppercase;
+  padding: .25rem .5rem;
+}
+
+.badge-icon {
+  padding: 0.4em 0.55em;
+  i {
+    font-size: 0.8em;
+  }
+}
+
+.badge-default {
+  @include badge-variant($default-color);
+}
+
+.badge-primary {
+  @include badge-variant($primary-color);
+}
+
+.badge-info {
+  @include badge-variant($info-color);
+}
+
+.badge-success {
+  @include badge-variant($success-color);
+}
+
+.badge-warning {
+  @include badge-variant($warning-color);
+}
+
+.badge-danger {
+  @include badge-variant($danger-color);
+}
+
+.badge-neutral {
+  @include badge-variant($white-color);
+}
+
+@each $gray-color-name in map-keys($grays) {
+  .badge-gray-#{$gray-color-name} {
+    @include badge-variant(map-get($grays, $gray-color-name));
+  }
+}

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

@@ -0,0 +1,17 @@
+.blog-1 {
+  .blog-post {
+
+  }
+
+  &.blog-archive {
+    ol {
+      li {
+        margin-bottom: 2rem;
+      }
+    }
+    .article-meta {
+      display: flex;
+      align-items: center;
+    }
+  }
+}

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

@@ -0,0 +1,34 @@
+.border {
+  border: 1px solid $gray-500 !important;
+}
+
+.no-border {
+  border: none !important;
+}
+
+.no-border-radius {
+  border-radius: 0 !important;
+}
+
+@each $color, $value in $grays {
+
+  .border-gray-#{$color} {
+    border-color: $value !important;
+  }
+}
+
+.border-bottom {
+  border-bottom: 1px solid $gray-500;
+}
+
+.border-left {
+  border-left: 1px solid $gray-500;
+}
+
+.border-top {
+  border-top: 1px solid $gray-500;
+}
+
+.border-right {
+  border-right: 1px solid $gray-500;
+}

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

@@ -0,0 +1,82 @@
+.breadcrumb-1 {
+  display: flex;
+  padding: 0.75rem 1rem;
+  margin-bottom: 1rem;
+  list-style: none;
+  position: relative;
+  margin: 0;
+  padding-left: 2rem;
+  background: transparent;
+
+  li {
+    display: flex;
+  }
+}
+
+.breadcrumb-2 {
+  display: flex;
+  padding: 0.75rem 1rem;
+  margin-bottom: 1rem;
+  list-style: none;
+  position: relative;
+  margin: 0;
+  padding-left: 2rem;
+  background: transparent;
+
+  li {
+    display: flex;
+  }
+
+  .breadcrumb-item + .breadcrumb-item::before {
+    display: inline-block;
+    padding-right: 0.5rem;
+    padding-left: 0.5rem;
+    color: #868e96;
+    content: "→";
+  }
+}
+
+.breadcrumb-3 {
+  display: flex;
+  padding: 0.75rem 1rem;
+  margin-bottom: 1rem;
+  list-style: none;
+  position: relative;
+  margin: 0;
+  padding-left: 2rem;
+  background: transparent;
+
+  li {
+    display: flex;
+  }
+
+  .breadcrumb-item + .breadcrumb-item::before {
+    display: inline-block;
+    padding-right: 0.5rem;
+    padding-left: 0.5rem;
+    color: #868e96;
+    content: "›";
+  }
+}
+
+.breadcrumb-4 {
+  display: flex;
+  margin-bottom: 1rem;
+  list-style: none;
+  position: relative;
+  margin: 0;
+  padding-left: 0;
+  background: transparent;
+
+  li {
+    display: flex;
+  }
+
+  .breadcrumb-item + .breadcrumb-item::before {
+    display: inline-block;
+    padding-right: 0.5rem;
+    padding-left: 0.5rem;
+    color: #868e96;
+    content: "›";
+  }
+}

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

@@ -0,0 +1,202 @@
+.btn,
+.navbar .navbar-nav > a.btn {
+
+  @include btn-styles($button-default-bg, $button-default-state-bg);
+  margin: 0;
+  border: none;
+  border-width: $border-thick;
+  border-radius: $border-radius-small;
+  cursor: pointer;
+  padding: $padding-btn-vertical $padding-btn-horizontal;
+  line-height: $line-height;
+  white-space: normal;
+  font-size: $font-size-small;
+  font-weight: $font-weight-normal;
+
+  &:hover,
+  &:focus {
+    @include opacity(1);
+    outline: 0 !important;
+  }
+
+  &:active,
+  &.active,
+  .open > &.dropdown-toggle {
+    @include box-shadow(none);
+    outline: 0 !important;
+  }
+
+  &.btn-transparent {
+    background-color: transparent;
+
+    &.dropdown-toggle {
+
+      &:hover {
+        background-color: transparent;
+      }
+    }
+
+    &:hover {
+      box-shadow: none;
+    }
+  }
+
+  &.btn-icon {
+    padding: 0;
+    width: $btn-icon-size-regular;
+    min-width: $btn-icon-size-regular;
+    height: $btn-icon-size-regular;
+    overflow: hidden;
+    line-height: 1;
+    font-size: $btn-icon-font-size-regular;
+
+    &.btn-simple {
+      padding: 0;
+    }
+
+    &.btn-sm {
+      width: $btn-icon-size-small;
+      min-width: $btn-icon-size-small;
+      height: $btn-icon-size-small;
+
+      i {
+        font-size: $btn-icon-font-size-small;
+      }
+    }
+
+    &.btn-lg {
+      width: $btn-icon-size-lg;
+      min-width: $btn-icon-size-lg;
+      height: $btn-icon-size-lg;
+
+      i.now-ui-icons,
+      i.fa {
+        font-size: $btn-icon-font-size-lg;
+      }
+    }
+
+    &:not(.btn-footer) i.now-ui-icons,
+    &:not(.btn-footer) i.fa {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-12px, -12px);
+      width: 25px;
+      line-height: 1.5626rem;
+    }
+  }
+
+  &:not(.btn-icon) .now-ui-icons {
+    position: relative;
+    top: 1px;
+  }
+}
+
+.navbar .navbar-nav > a.btn {
+  padding: inherit;
+}
+
+// Apply the mixin to the buttons
+// .btn-default { @include btn-styles($default-color, $default-states-color); }
+
+.btn-primary {
+  @include btn-styles($primary-color, $primary-states-color);
+}
+
+.btn-success {
+  @include btn-styles($success-color, $success-states-color);
+}
+
+.btn-info {
+  @include btn-styles($info-color, $info-states-color);
+}
+
+.btn-warning {
+  @include btn-styles($warning-color, $warning-states-color);
+}
+
+.btn-danger {
+  @include btn-styles($danger-color, $danger-states-color);
+}
+
+.btn-neutral {
+  @include btn-styles($white-color, $white-color);
+}
+
+.btn {
+
+  &:disabled,
+  &[disabled],
+  &.disabled {
+    @include opacity(0.5);
+  }
+}
+
+.btn-circle {
+  border-width: $border-thin;
+  border-radius: $btn-round-radius !important;
+  padding: $padding-btn-vertical $padding-round-horizontal;
+
+  &.btn-simple {
+    padding: $padding-btn-vertical - 1 $padding-round-horizontal - 1;
+  }
+}
+
+.btn-simple {
+  border: $border;
+  border-color: $default-color;
+  background-color: $transparent-bg;
+  padding: $padding-btn-vertical - 1 $padding-round-horizontal - 1;
+}
+
+.btn-simple,
+.btn-link {
+
+  &.disabled,
+  &:disabled,
+  &[disabled],
+  fieldset[disabled] & {
+
+    &,
+    &:hover,
+    &:focus,
+    &.focus,
+    &:active,
+    &.active {
+      background-color: $transparent-bg;
+    }
+  }
+}
+
+.btn-lg {
+  @include btn-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $border-radius-large);
+}
+
+.btn-sm {
+  @include btn-size($padding-small-vertical, $padding-small-horizontal, $font-size-mini, $border-radius-small);
+}
+
+.btn-link {
+  border: $none;
+  background-color: $transparent-bg;
+  padding: $padding-base-vertical $padding-base-horizontal;
+}
+
+.btn-wd {
+  min-width: 140px;
+}
+
+.btn-group.select {
+  width: 100%;
+}
+
+.btn-group.select .btn {
+  text-align: left;
+}
+
+.btn-group.select .caret {
+  position: absolute;
+  top: 50%;
+  right: 8px;
+  margin-top: -1px;
+}