kiso_themes 1.0.2

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

@@ -0,0 +1,431 @@
+$sans-serif-family: "Work Sans", "Helvetica Neue", Arial, sans-serif;
+
+// Border thicknesses
+$none: 0 !default;
+$border-thin: 1px !default;
+$border-thick: 2px !default;
+
+// Whites
+$white-color: #fdfcfc !default;
+$white-bg: #fff !default;
+
+// Blacks
+$black-bg: rgba(30, 30, 30, 0.97) !default;
+$light-black: #444 !default;
+$black-color: #2c2c2c !default;
+$black-hr: #444 !default;
+$dark-color: $black-color;
+
+$text-color: $black-color !default;
+
+// Backgrounds
+$main-bg: #eef5fb !default;
+$dark-background: #555 !default;
+$pale-blue-bg: #dae4f1 !default;
+
+// Opacities
+$opacity-1: rgba(255, 255, 255, 0.1) !default;
+$opacity-2: rgba(255, 255, 255, 0.2) !default;
+$opacity-3: rgba(255, 255, 255, 0.3) !default;
+$opacity-4: rgba(255, 255, 255, 0.4) !default;
+$opacity-5: rgba(255, 255, 255, 0.5) !default;
+$opacity-6: rgba(255, 255, 255, 0.6) !default;
+$opacity-7: rgba(255, 255, 255, 0.7) !default;
+$opacity-8: rgba(255, 255, 255, 0.8) !default;
+$opacity-gray-1: rgba(200, 208, 218, 0.1) !default;
+$opacity-gray-2: rgba(200, 208, 218, 0.2) !default;
+$opacity-gray-3: rgba(200, 208, 218, 0.3) !default;
+$opacity-gray-4: rgba(200, 208, 218, 0.4) !default;
+$opacity-gray-5: rgba(200, 208, 218, 0.5) !default;
+$opacity-gray-6: rgba(200, 208, 218, 0.6) !default;
+$opacity-gray-7: rgba(200, 208, 218, 0.7) !default;
+$opacity-gray-8: rgba(200, 208, 218, 0.8) !default;
+
+// Datepicker
+$datepicker-color-days: rgba(255, 255, 255, 0.8) !default;
+$datepicker-color-old-new-days: rgba(255, 255, 255, 0.4) !default;
+
+// Transparent BG
+$transparent-bg: transparent !default;
+
+// State colors
+$default-color: #9cc0e8 !default;
+$default-states-color: lighten($default-color, 6%) !default;
+$default-color-opacity: rgba(182, 182, 182, 0.6) !default;
+
+$primary-color: #4173a7 !default;
+$primary-states-color: lighten($primary-color, 6%) !default;
+$primary-color-opacity: rgba(249, 99, 50, 0.3) !default;
+$primary-color-alert: rgba(249, 99, 50, 0.8) !default;
+
+$success-color: #73c16b !default;
+$success-states-color: lighten($success-color, 6%) !default;
+$success-color-opacity: rgba(48, 167, 42, 0.3) !default;
+$success-color-alert: rgb(107, 195, 103) !default;
+
+$info-color: #5cc6d2 !default;
+$info-states-color: lighten($info-color, 6%) !default;
+$info-color-opacity: rgba(36, 144, 220, 0.3) !default;
+$info-color-alert: rgba(143, 188, 220, 0.8) !default;
+
+$warning-color: #e08e45 !default;
+$warning-states-color: lighten($warning-color, 6%) !default;
+$warning-color-opacity: rgba(255, 143, 26, 0.3) !default;
+$warning-color-alert: rgb(228, 169, 62) !default;
+
+$danger-color: #c55e5e !default;
+$danger-states-color: lighten($danger-color, 6%) !default;
+$danger-color-opacity: rgba(202, 37, 37, 0.3) !default;
+$danger-color-alert: rgb(216, 96, 96) !default;
+
+// Brand colors
+$brand-primary: $primary-color !default;
+$brand-primary-light: tint($brand-primary, 10%);
+$brand-primary-lighter: tint($brand-primary, 25%);
+$brand-primary-lightest: tint($brand-primary, 38%);
+$brand-primary-dark: shade($brand-primary, 10%);
+$brand-primary-darker: shade($brand-primary, 25%);
+$brand-primary-darkest: shade($brand-primary, 38%);
+
+$brand-info: $info-color !default;
+$brand-success: $success-color !default;
+$brand-warning: $warning-color !default;
+$brand-danger: $danger-color !default;
+$link-disabled-color: #666 !default;
+
+// Grays
+$gray-100: mix($brand-primary, $white-color, 2%);
+$gray-200: mix($brand-primary, $white-color, 4%);
+$gray-300: mix($brand-primary, $white-color, 8%);
+$gray-400: mix(desaturate($brand-primary, 20%), $white-color, 16%);
+$gray-500: mix(desaturate($brand-primary, 20%), $white-color, 24%);
+$gray-600: mix(desaturate($brand-primary, 20%), $white-color, 32%);
+$gray-700: mix(desaturate($brand-primary, 20%), $white-color, 40%);
+$gray-800: mix(desaturate($brand-primary, 20%), $white-color, 48%);
+$gray-900: mix(desaturate($brand-primary, 20%), $white-color, 56%);
+
+$grays: (
+  100: $gray-100,
+  200: $gray-200,
+  300: $gray-300,
+  400: $gray-400,
+  500: $gray-500,
+  600: $gray-600,
+  700: $gray-700,
+  800: $gray-800,
+  900: $gray-900
+);
+
+$light-gray: $gray-200;
+$medium-gray: $gray-400;
+$dark-gray: $gray-900;
+
+// Colors
+$blue: #007bff !default;
+$indigo: #6610f2 !default;
+$purple: #6f42c1 !default;
+$pink: #e83e8c !default;
+$red: #dc3545 !default;
+$orange: #fd7e14 !default;
+$yellow: #ffc107 !default;
+$green: #28a745 !default;
+$teal: #20c997 !default;
+$cyan: #17a2b8 !default;
+
+$colors: (
+  default: $default-color,
+  blue: $blue,
+  indigo: $indigo,
+  purple: $purple,
+  pink: $pink,
+  red: $red,
+  orange: $orange,
+  yellow: $yellow,
+  green: $green,
+  teal: $teal,
+  cyan: $cyan,
+  white: $white,
+  gray: $gray-600,
+  gray-dark: $gray-800
+);
+
+// Lighter colors
+$light-blue: rgba($primary-color, 0.2);
+$light-azure: rgba($info-color, 0.2);
+$light-green: rgba($success-color, 0.2);
+$light-orange: rgba($warning-color, 0.2);
+$light-red: rgba($danger-color, 0.2);
+
+// Update the theme color map
+$theme-colors: (
+  default: $default-color,
+  primary: $primary-color,
+  secondary: $default-color,
+  success: $success-color,
+  info: $info-color,
+  warning: $warning-color,
+  danger: $danger-color,
+  light: $gray-400,
+  dark: $dark-color
+);
+
+// Padding
+$padding-input-vertical: 11px !default;
+$padding-input-horizontal: 19px !default;
+$padding-btn-vertical: 0.7rem !default;
+$padding-btn-horizontal: 1rem !default;
+$padding-base-vertical: 0.7rem !default;
+$padding-base-horizontal: 0.7rem !default;
+$padding-nav-link-vertical: 0.2rem !default;
+$padding-nav-link-horizontal: 0.7rem !default;
+$padding-round-horizontal: 23px !default;
+$padding-simple-vertical: 10px !default;
+$padding-simple-horizontal: 17px !default;
+$padding-large-vertical: 15px !default;
+$padding-large-horizontal: 48px !default;
+$padding-small-vertical: 5px !default;
+$padding-small-horizontal: 15px !default;
+
+// $padding-xs-vertical:           1px !default;
+// $padding-xs-horizontal:         5px !default;
+
+$padding-label-vertical: 2px !default;
+$padding-label-horizontal: 12px !default;
+$margin-large-vertical: 30px !default;
+$margin-base-vertical: 15px !default;
+$margin-base-horizontal: 15px !default;
+$margin-bottom: 10px !default;
+$border: 1px solid !default;
+$border-radius-extra-small: 0.125rem !default;
+$border-radius-small: 0.1875rem !default;
+$border-radius-base: 1rem !default;
+$border-radius-large: 0.25rem !default;
+$border-radius-extreme: 0.875rem !default;
+$border-radius-large-top: $border-radius-large $border-radius-large 0 0 !default;
+$border-radius-large-bottom: 0 0 $border-radius-large $border-radius-large !default;
+$btn-round-radius: 30px !default;
+$height-base: 55px !default;
+$btn-icon-size: 3.5rem !default;
+$btn-icon-size-regular: 2.375rem !default;
+$btn-icon-font-size-regular: 0.9375rem !default;
+$btn-icon-font-size-small: 0.6875rem !default;
+$btn-icon-size-small: 1.875rem !default;
+$btn-icon-font-size-lg: 1.325rem !default;
+$btn-icon-size-lg: 3.6rem !default;
+$btn-icon-top-padding: 0.3rem !default;
+
+// Fonts
+$font-size-h1: 3.5em !default;
+$font-size-h2: 2.5em !default;
+$font-size-h3: 2em !default;
+$font-size-h4: 1.714em !default;
+$font-size-h5: 1.37em !default;
+$font-size-h6: 1em !default;
+
+$font-paragraph: 1em !default;
+$font-size-navbar: 1em !default;
+$font-size-mini: 0.7142em !default;
+$font-size-small: 0.8571em !default;
+$font-size-base: 14px !default;
+$font-size-large: 1em !default;
+$font-size-large-navbar: 20px !default;
+$font-size-blockquote: 1.1em !default; // ~ 15px
+
+$font-weight-light: 300 !default;
+$font-weight-normal: 400 !default;
+$font-weight-semi: 600 !default;
+$font-weight-bold: 700 !default;
+
+// Line Heights
+$line-height-general: 1.5 !default;
+$line-height-nav-link: 1 !default;
+$btn-icon-line-height: 2.4em !default;
+$line-height: 1.35em !default;
+$line-height-lg: 54px !default;
+$border-radius-top: 10px 10px 0 0 !default;
+$border-radius-bottom: 0 0 10px 10px !default;
+$dropdown-shadow: 1px 2px 3px rgba(0, 0, 0, 0.125);
+$box-shadow-raised: 0 10px 25px 0 rgba(0, 0, 0, 0.3);
+$general-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.25);
+$light-shadow: 0 6px 24px 0 rgba(0, 0, 0, 0.25);
+$dropdown-coordinates: 29px -50px !default;
+$select-coordinates: 50% -40px !default;
+
+// Tranasitions and Timing
+$general-transition-time: 300ms !default;
+$slow-transition-time: 370ms !default;
+$fast-transition-time: 150ms !default;
+$transition-linear: linear !default;
+$transition-bezier: cubic-bezier(0.34, 1.61, 0.7, 1);
+$transition-ease: ease 0s;
+
+$navbar-margin-a: 15px 0;
+$padding-social-a: 10px 5px;
+$navbar-margin-a-btn: 15px 0;
+$navbar-margin-a-btn-round: 16px 0;
+$navbar-padding-a-icons: 6px 15px;
+$navbar-margin-a-icons: 6px 3px;
+$navbar-padding-base: 0.5rem;
+
+$navbar-margin-brand-icons: 12px auto;
+$navbar-margin-btn: 15px 3px;
+$height-icon-sm: 32px;
+$width-icon-sm: 32px;
+$padding-icon-sm: 4px;
+$border-radius-icon-sm: 7px;
+$height-icon-message: 40px;
+$width-icon-message: 40px;
+$height-icon-message-sm: 20px;
+$width-icon-message-sm: 20px;
+$white-navbar: rgba(#fff, 0.96);
+$primary-navbar: rgba(#34acdc, 0.98);
+$info-navbar: rgba(#5bcaff, 0.98);
+$success-navbar: rgba(#4cd964, 0.98);
+$warning-navbar: rgba(#ff9500, 0.98);
+$danger-navbar: rgba(#ff4c40, 0.98);
+$topbar-x: topbar-x !default;
+$topbar-back: topbar-back !default;
+$bottombar-x: bottombar-x !default;
+$bottombar-back: bottombar-back !default;
+
+// Social icons color
+$social-twitter: #55acee !default;
+$social-twitter-state-color: darken(#55acee, 5%) !default;
+$social-facebook: #3b5998 !default;
+$social-facebook-state-color: darken(#3b5998, 5%) !default;
+$social-google: #dd4b39 !default;
+$social-google-state-color: darken(#dd4b39, 5%) !default;
+$social-linkedin: #0077b5 !default;
+$social-linkedin-state-color: darken(#0077b5, 5%) !default;
+$zindex-navbar-fixed: 1030;
+
+// Side Nav
+$side-nav-transition: 250ms cubic-bezier(0.47, 0, 0.745, 0.715);
+$side-nav-width: 255px;
+$side-nav-menu-background-color: #2e4261;
+$side-nav-header-bg-color: #2e4261;
+$side-nav-header-bg-link-color: lighten($brand-primary, 25%);
+$side-nav-header-link-hover-color: white;
+$side-nav-header-color: white;
+$side-nav-header-padding: 1rem;
+$side-nav-menu-item-vertical-padding: 0.8rem;
+$side-nav-menu-item-horizontal-padding: 0.8rem;
+$side-nav-menu-item-active-border-width: 2px;
+$side-nav-menu-right-border-color: transparent;
+$side-nav-text-color: darken(#0077b5, 5%);
+$side-nav-menu-item-background-color: #395379;
+$side-nav-menu-item-icon-color: #4d80b8;
+$side-nav-menu-item-color: lighten($brand-primary, 25%);
+$side-nav-menu-item-active-color: $white-color;
+$side-nav-menu-item-hover-color: $white-color;
+$side-nav-sub-menu-item-vertical-padding: 0.3rem;
+$side-nav-sub-menu-item-horizontal-padding: 0.8rem;
+$side-nav-menu-footer-background-color: #2e4261;
+
+// Tooltips
+$tooltip-bg: lighten($brand-primary, 25%);
+
+// Timelines
+$left-timeline-item-background-color: #fff;
+$left-timeline-item-padding: 1rem;
+
+// Gradients
+$gradient-1: linear-gradient(180deg, #5a94ff 25%, #d87278 100%);
+$gradient-2: linear-gradient(180deg, #a4d0de 25%, #e3313a 100%);
+$gradient-3: linear-gradient(180deg, #a1bdcc 25%, #f4f8c1 100%);
+$gradient-4: linear-gradient(180deg, #fac043 25%, #e13b36 100%);
+$gradient-5: linear-gradient(180deg, #2ae374 25%, #f7f9bc 100%);
+$gradient-floor-fade: linear-gradient(
+    to bottom,
+    transparent 20%,
+    rgba(0, 0, 0, 0.1) 40%,
+    rgba(0, 0, 0, 0.6) 90%
+  )
+  no-repeat scroll 0 0;
+$gradient-roof-fade: linear-gradient(
+    to bottom,
+    rgba(0, 0, 0, 0.6) 90%,
+    rgba(0, 0, 0, 0.6) 40%,
+    transparent 100%
+  )
+  no-repeat scroll 0 0;
+$gradient-white-to-alpha: linear-gradient(top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
+
+// Card Acivity Feed
+$card-activity-feed-label-bg: $gray-400;
+$card-activity-feed-timeline-thread-bg: $gray-400;
+$card-activity-feed-item-icon-color: $gray-100;
+$card-activity-feed-item-icon-bg: $gray-800;
+
+// Card Chat
+$card-chat-bg: $gray-400;
+
+$switch-width: 90px;
+$switch-height: 40px;
+$gray-light: $gray-700;
+
+$navbar-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);
+
+$card-header-bg: transparent !default;
+$card-header-border-color: $medium-gray !default;
+
+$metric-card-detail-bg: $opacity-7;
+$metric-card-detail-color: $text-color;
+$metric-card-detail-border-radius: 4px;
+
+$navbar-brand-color: $white-color;
+
+$navbar-background: $brand-primary;
+
+$button-default-bg: $white-color;
+$button-default-state-bg: $gray-400;
+$button-default-color: $brand-primary;
+
+$dropdown-bg: white;
+$dropdown-item-color: black;
+
+$form-input-focus-background: transparent;
+$form-input-placeholder: lighten($primary-color, 10%);
+$form-input-color: $brand-primary;
+$form-input-has-danger-focus-bg: transparent;
+$form-input-bg: transparent;
+$form-input-disabled-bg: $light-gray;
+
+$checkbox-check: $brand-primary;
+
+$input-group-focus-bg: transparent;
+
+$landing-nav-bg: transparent;
+$landing-nav-color: $dark-color;
+$landing-nav-brand-color: $dark-color;
+
+$pagination-color: $black-color;
+$pagination-bg: $default-color;
+$pagination-hover-color: $black-color;
+$pagination-hover-bg: $opacity-gray-3;
+
+$pagination-disabled-bg: #e0e7ef;
+$pagination-disabled-color: #4e5763;
+
+$progress-bar-bg: $gray-400;
+$progress-bar-color: $brand-primary;
+
+$card-sheet-bg: $white-color;
+$listgroup-item-border-color: 1px solid rgba(228, 228, 228, 0.23) !default;
+$listgroup-item-disabled-color: rgba($gray-400, 0.5);
+$listgroup-item-disabled-bg: rgba($gray-300, 0.2);
+
+$scaffold-page-header-bg: $white-color;
+$scaffold-page-header-color: $text-color;
+
+$nav-stacked-active-link-bg: $white-color;
+$nav-stacked-link-border-color: $gray-400;
+$nav-stacked-link-hover-bg: $gray-400;
+$nav-stacked-chevron-bg: $white-color;
+
+$plan-selector-active-bg: $gray-200;
+
+$style-scrollbar: true !default;
+$scrollbar-width: 0.15em !default;
+$scrollbar-foreground: $brand-primary !default;
+$scrollbar-background: mix($brand-primary, white, 50%) !default;

data/lib/sass/kiso_themes/_core/cards/_card_activity_feed.scss

@@ -0,0 +1,84 @@
+.card-activity-feed {
+  ol {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    position: relative;
+
+    &:before {
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: 1px;
+      background: $card-activity-feed-timeline-thread-bg;
+      left: calc(2rem - 2px);
+      margin: 0;
+      border-radius: 2px;
+    }
+
+    .card-activity-feed-label {
+      display: inline-block;
+      position: relative;
+      margin-bottom: 1rem;
+      padding: $padding-base-vertical / 2 $padding-base-horizontal / 2;
+      background: $card-activity-feed-label-bg;
+      border-radius: $border-radius-small;
+      min-width: 100px;
+      text-align: center;
+
+      &.card-activity-feed-label-end {
+        display: block;
+        content: '';
+        width: 10px;
+        left: 25px;
+        top: 0;
+        min-width: inherit;
+      }
+    }
+
+    .card-activity-feed-item {
+      position: relative;
+      margin-bottom: 2rem;
+
+      .card-activity-feed-item-icon {
+        width: 30px;
+        height: 30px;
+        font-size: 15px;
+        position: absolute;
+        background: $card-activity-feed-item-icon-bg;
+        color: $card-activity-feed-item-icon-color;
+        border-radius: 50%;
+        left: 1rem;
+        top: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        i {
+          padding: 8px;
+          line-height: 30px;
+        }
+      }
+
+      .card-activity-feed-item-body {
+        margin: 1rem 0 1rem 4rem;
+
+        h6 {
+          align-items: center;
+        }
+      }
+    }
+
+    .card-activity-feed-item-body {
+      box-shadow: 0 1px 2px rgba(0, 0, 0, .1), 0 -1px 2px rgba(0,0,0,.1);
+      background-color: #fdfcfc;
+      padding: .8rem;
+    }
+
+    .card-activity-feed-item-footer {
+
+      padding-top: 1rem;
+    }
+  }
+}

data/lib/sass/kiso_themes/_core/cards/_card_chat.scss

@@ -0,0 +1,93 @@
+
+.card-chat {
+
+  .card-body {
+    overflow-y: scroll;
+
+    ol {
+      padding: 0;
+      margin: 0;
+      list-style: none;
+
+      li {
+        margin-bottom: 1.6rem;
+
+        &:last-of-type {
+          margin-bottom: 0;
+        }
+
+        &:nth-child(2n) {
+          .media-body {
+            order: 1;
+            text-align: right;
+
+            &:before {
+              right: 42px;
+              left: auto;
+              border-color: rgba(238, 238, 242, 0) !important;
+              border-left-color: $card-chat-bg !important;
+              border-top-color: $card-chat-bg !important;
+            }
+          }
+
+          .chat-user-avatar {
+            order: 2;
+            @extend .ml-3;
+
+            img {
+              margin-right: 0 !important;
+            }
+          }
+
+          .chat-username {
+            margin-left: auto;
+            margin-right: 0;
+          }
+        }
+
+        .chat-username {
+          margin-right: auto;
+        }
+
+        .chat-user-avatar img {
+          @extend .rounded-circle;
+          @extend .mr-3;
+        }
+
+        .media {
+          position: relative;
+        }
+
+        .media-body {
+          background-color: $card-chat-bg;
+          padding: 1rem;
+          border-radius: $border-radius-small;
+
+          &:before {
+            left: 42px;
+            top: 16px;
+            border: solid transparent;
+            content: " ";
+            height: 0;
+            width: 0;
+            position: absolute;
+            pointer-events: none;
+            border-top-color: $card-chat-bg;
+            border-width: 8px;
+            border-right-color: $card-chat-bg;
+          }
+        }
+      }
+
+
+    }
+  }
+
+  .card-footer {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    background: white;
+    display: flex;
+  }
+}

data/lib/sass/kiso_themes/_core/cards/_card_images.scss

@@ -0,0 +1,114 @@
+.card-image {
+  overflow: visible;
+
+  .floor-fade {
+    position: absolute;
+    top: 45%;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    background: $gradient-floor-fade;
+  }
+
+  .roof-fade {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    background: $gradient-roof-fade;
+  }
+
+  .card-header {
+    position: relative;
+
+    border-bottom: 0;
+
+    padding: 0;
+
+    .card-title {
+      position: absolute;
+      bottom: 0.8rem;
+      left: 1rem;
+
+      margin: 0;
+
+      line-height: 1.2;
+
+      color: white;
+    }
+
+    .card-label {
+      font-size: 0.6875rem;
+    }
+
+    .card-label-top {
+      position: absolute;
+      top: 1rem;
+      left: 1rem;
+    }
+  }
+
+  &.cover-image {
+
+    .card-title {
+      position: relative;
+      bottom: inherit;
+      left: inherit;
+
+      padding: 1rem;
+    }
+
+    .card-body {
+      position: relative;
+
+      padding: 1rem;
+    }
+
+    .card-label {
+      position: relative;
+      top: inherit;
+      bottom: inherit;
+      left: inherit;
+
+      margin-left: 1rem;
+    }
+
+    .cover-content:before {
+
+      display: block;
+      position: absolute;
+
+      background: rgba(0, 0, 0, 0.2);
+
+      width: 100%;
+      height: 100%;
+
+      content: '';
+    }
+  }
+
+  &.card-image-avatar {
+
+    .card-header {
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      justify-content: center;
+
+      padding: 2rem;
+
+      h4 {
+        position: relative;
+        bottom: inherit;
+        left: inherit;
+      }
+    }
+  }
+
+  .image-offset {
+    margin-top: -70px;
+  }
+}