coreui-rails 0.2.4

data/app/assets/stylesheets/coreui/_mixins.scss

@@ -0,0 +1,116 @@
+@mixin button-social-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
+  padding: $padding-y $padding-x;
+  font-size: $font-size;
+  line-height: $line-height;
+  border: 0;
+  @include border-radius($border-radius);
+
+  &::before {
+    width: ($padding-y * 2) + ($font-size * $line-height);
+    height: ($padding-y * 2) + ($font-size * $line-height);
+    padding: $padding-y 0;
+    font-size: $font-size;
+    line-height: $line-height;
+    @include border-radius($border-radius);
+  }
+
+  span {
+    margin-left: ($padding-y * 2) + ($font-size * $line-height);
+  }
+
+  &.icon {
+    width: ($padding-y * 2) + ($font-size * $line-height);
+    height: ($padding-y * 2) + ($font-size * $line-height);
+  }
+}
+
+@mixin avatar($width, $status-width) {
+  position: relative;
+  display: inline-block;
+  width: $width;
+
+  .img-avatar {
+    width: $width;
+    height: $width;
+  }
+
+  .avatar-status {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    display: block;
+    width: $status-width;
+    height: $status-width;
+    border: 1px solid #fff;
+    border-radius: 50em;
+  }
+}
+
+@mixin borders($borders) {
+  @each $border in $borders {
+    $direction: nth($border, 1);
+    @if $direction == "all" {
+      $size: map-get(map-get($borders, $direction), size);
+      $style: map-get(map-get($borders, $direction), style);
+      $color: map-get(map-get($borders, $direction), color);
+      border: $size $style $color;
+    } @else if $direction == "top" {
+      $size: map-get(map-get($borders, $direction), size);
+      $style: map-get(map-get($borders, $direction), style);
+      $color: map-get(map-get($borders, $direction), color);
+      border-top: $size $style $color;
+    } @else if $direction == "right" {
+      $size: map-get(map-get($borders, $direction), size);
+      $style: map-get(map-get($borders, $direction), style);
+      $color: map-get(map-get($borders, $direction), color);
+      border-right: $size $style $color;
+    } @else if $direction == "bottom" {
+      $size: map-get(map-get($borders, $direction), size);
+      $style: map-get(map-get($borders, $direction), style);
+      $color: map-get(map-get($borders, $direction), color);
+      border-bottom: $size $style $color;
+    } @else if $direction == "left" {
+      $size: map-get(map-get($borders, $direction), size);
+      $style: map-get(map-get($borders, $direction), style);
+      $color: map-get(map-get($borders, $direction), color);
+      border-left: $size $style $color;
+    }
+  }
+}
+
+@mixin sidebar-width($borders, $width) {
+  $sidebar-width: $width;
+
+  @each $border in $borders {
+    $direction: nth($border, 1);
+    @if $direction == "all" {
+      $size: map-get(map-get($borders, $direction), size);
+      $sidebar-width: ($sidebar-width - (2 * $size));
+    } @else if $direction == "right" {
+      $size: map-get(map-get($borders, $direction), size);
+      $sidebar-width: $sidebar-width - $size;
+    } @else if $direction == "left" {
+      $size: map-get(map-get($borders, $direction), size);
+      $sidebar-width: $sidebar-width - $size;
+    }
+    width: $sidebar-width;
+  }
+}
+
+// @mixin bg-variant($parent, $color) {
+//   #{$parent} {
+//     @include border-radius($card-border-radius-inner $card-border-radius-inner $card-border-radius-inner $card-border-radius-inner);
+//     color: #fff;
+//     background-color: $color;
+//   }
+//   a#{$parent} {
+//     @include hover-focus {
+//       background-color: darken($color, 10%);
+//     }
+//   }
+// }
+
+@mixin card-accent-variant($color) {
+  border-top-color: $color;
+  border-top-width: 2px;
+}

data/app/assets/stylesheets/coreui/_modal.scss

@@ -0,0 +1,13 @@
+@each $color, $value in $theme-colors {
+  .modal-#{$color} {
+
+    .modal-content {
+      border-color: $value;
+    }
+
+    .modal-header {
+      color: #fff;
+      background-color: $value;
+    }
+  }
+}

data/app/assets/stylesheets/coreui/_nav.scss

@@ -0,0 +1,35 @@
+.nav-tabs {
+  .nav-link {
+    color: $gray-600;
+    &:hover {
+      cursor: pointer;
+    }
+    &.active {
+      color: $gray-800;
+      background: #fff;
+      border-color: $border-color;
+      border-bottom-color: #fff;
+      &:focus {
+        background: #fff;
+        border-color: $border-color;
+        border-bottom-color: #fff;
+      }
+    }
+  }
+}
+
+.tab-content {
+  margin-top: -1px;
+  background: #fff;
+  border: 1px solid $border-color;
+  .tab-pane {
+    padding: $spacer;
+  }
+}
+
+.card-block {
+  .tab-content {
+    margin-top: 0;
+    border: 0;
+  }
+}

data/app/assets/stylesheets/coreui/_navbar.scss

@@ -0,0 +1,135 @@
+.app-header.navbar {
+  position: relative;
+  flex-direction: row;
+  height: $navbar-height;
+  padding: 0;
+  margin: 0;
+  background-color: $navbar-bg;
+  @include borders($navbar-border);
+
+  .navbar-brand {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: $navbar-brand-width;
+    height: $navbar-height;
+    padding: 0;
+    margin-right: 0;
+    background-color: $navbar-brand-bg;
+    @include borders($navbar-brand-border);
+
+    img.navbar-brand-minimized {
+      display: none;
+    }
+  }
+
+  .navbar-toggler {
+    min-width: 50px;
+    padding: $navbar-toggler-padding-y 0;
+
+    &:hover .navbar-toggler-icon {
+      background-image: $navbar-toggler-icon-hover;
+    }
+  }
+
+  .navbar-toggler-icon {
+    height: 23px;
+    background-image: $navbar-toggler-icon;
+  }
+
+  .navbar-nav {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .nav-item {
+    position: relative;
+    min-width: 50px;
+    margin: 0 !important;
+    text-align: center;
+
+    button {
+      margin: 0 auto;
+    }
+
+    .nav-link {
+      padding-top: 0;
+      padding-bottom: 0;
+      background: 0;
+      border: 0;
+
+      .badge {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        margin-top: -16px;
+        margin-left: 0;
+      }
+
+      > .img-avatar {
+        height: $navbar-height - 20px;
+        margin: 0 10px;
+      }
+    }
+  }
+
+  .dropdown-menu {
+    padding-bottom: 0;
+    line-height: $line-height-base;
+  }
+
+  .dropdown-item {
+    min-width: 180px;
+  }
+}
+
+.navbar-brand {
+  color: $navbar-active-color;
+
+  @include hover-focus {
+    color: $navbar-active-color;
+  }
+}
+
+.navbar-nav {
+  .nav-link {
+    color: $navbar-color;
+
+    @include hover-focus {
+      color: $navbar-hover-color;
+    }
+  }
+
+  .open > .nav-link,
+  .active > .nav-link,
+  .nav-link.open,
+  .nav-link.active {
+    @include plain-hover-focus {
+      color: $navbar-active-color;
+    }
+  }
+}
+
+.navbar-divider {
+  background-color: rgba(0, 0, 0, .075);
+}
+
+@include media-breakpoint-up(lg) {
+  .brand-minimized {
+    .app-header.navbar {
+      .navbar-brand {
+        width: $navbar-brand-minimized-width;
+        background-color: $navbar-brand-minimized-bg;
+        @include borders($navbar-brand-minimized-border);
+
+        img {
+          display: none;
+
+          &.navbar-brand-minimized {
+            display: block;
+          }
+        }
+      }
+    }
+  }
+}

data/app/assets/stylesheets/coreui/_others.scss

@@ -0,0 +1,4 @@
+// stylelint-disable selector-no-qualifying-type
+hr.transparent {
+  border-top: 1px solid transparent;
+}

data/app/assets/stylesheets/coreui/_progress-group.scss

@@ -0,0 +1,40 @@
+.progress-group {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: $spacer;
+  flex-wrap: wrap;
+}
+
+.progress-group-prepend {
+  flex: 0 0 100px;
+  align-self: center;
+}
+
+.progress-group-icon {
+  margin: 0 $spacer 0 ($spacer * .25);
+  font-size: $font-size-lg;
+}
+
+.progress-group-text {
+  font-size: $font-size-sm;
+  color: $gray-600;
+}
+
+.progress-group-header {
+  display: flex;
+  margin-bottom: ($spacer * .25);
+  flex-basis: 100%;
+}
+
+.progress-group-bars {
+  flex-grow: 1;
+  align-self: center;
+
+  .progress:not(:last-child) {
+    margin-bottom: 2px;
+  }
+}
+
+.progress-group-header + .progress-group-bars {
+  flex-basis: 100%;
+}

data/app/assets/stylesheets/coreui/_progress.scss

@@ -0,0 +1,15 @@
+.progress-xs {
+  height: 4px;
+}
+
+.progress-sm {
+  height: 8px;
+}
+
+// White progress bar
+.progress-white {
+  background-color: rgba(255, 255, 255, .2);
+  .progress-bar {
+    background-color: #fff;
+  }
+}

data/app/assets/stylesheets/coreui/_rtl.scss

@@ -0,0 +1,281 @@
+//
+// RTL Support
+//
+// scss-lint:disable NestingDepth, SelectorDepth
+*[dir="rtl"] {
+  direction: rtl;
+  unicode-bidi: embed;
+
+  ul {
+    -webkit-padding-start: 0;
+  }
+
+  table tr th {
+    text-align: right;
+  }
+
+  // Breadcrumb
+
+  .breadcrumb-item {
+    float: right;
+  }
+
+  .breadcrumb-menu {
+    right: auto;
+    left: $breadcrumb-padding-x;
+  }
+
+  // Dropdown
+  .dropdown-item {
+    text-align: right;
+
+    i {
+      margin-right: -10px;
+      margin-left: 10px;
+    }
+
+    .badge {
+      right: auto;
+      left: 10px;
+    }
+  }
+
+  //
+  // Sidebar
+  //
+  .sidebar-hidden {
+    .sidebar {
+      margin-right: - $sidebar-width;
+    }
+  }
+
+  .sidebar-fixed {
+    .main, .app-footer {
+      margin-right: $sidebar-width;
+    }
+
+    &.sidebar-hidden {
+      .main, .app-footer {
+        margin-right: 0;
+      }
+    }
+  }
+
+  .sidebar-minimized {
+    .sidebar {
+      flex: 0 0 $sidebar-minimized-width;
+    }
+
+    &.sidebar-hidden {
+      .sidebar {
+        margin-right: - $sidebar-minimized-width;
+        margin-left: 0;
+      }
+    }
+
+    &.sidebar-fixed {
+      .main, .app-footer {
+        margin-right: $sidebar-minimized-width;
+      }
+
+      &.sidebar-hidden {
+        .main, .app-footer {
+          margin-left: 0;
+        }
+      }
+    }
+  }
+
+  //
+  // Aside Menu
+  //
+  .aside-menu-hidden {
+    .aside-menu {
+      margin-right: 0;
+      margin-left: - $aside-menu-width;
+    }
+  }
+
+  .aside-menu-fixed {
+    .aside-menu {
+      right: auto;
+      left: 0;
+    }
+
+    .main, .app-footer {
+      //margin-right: 0;
+      margin-left: $aside-menu-width;
+    }
+
+    &.aside-menu-hidden {
+      .main, .app-footer {
+        margin-left: 0;
+      }
+    }
+  }
+
+  .aside-menu-off-canvas {
+    .aside-menu {
+      position: fixed;
+      right: 0;
+      z-index: $zindex-sticky - 1;
+      height: 100%;
+
+      .tab-content {
+        height: calc(100vh - #{$aside-menu-nav-padding-y * 2 + $font-size-base} - #{$navbar-height});
+      }
+    }
+  }
+
+  // Sidebar Menu
+  .sidebar {
+    .sidebar-nav {
+      .nav {
+        .nav-item {
+          .nav-link {
+            direction: rtl;
+            i {
+              margin: 0 0 0 ($sidebar-nav-link-padding-x / 2);
+            }
+            .badge {
+              float: left;
+              margin-top: 2px;
+              // margin-left: 10px;
+            }
+            &.nav-dropdown-toggle {
+              &::before {
+                position: absolute;
+                right: auto !important;
+                left: $sidebar-nav-link-padding-x;
+                transform: rotate(180deg);
+              }
+            }
+          }
+          &.nav-dropdown {
+            &.open {
+              > .nav-link.nav-dropdown-toggle::before {
+                transform: rotate(270deg);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .sidebar-minimized .sidebar {
+    .nav-link {
+      padding-right: 0;
+      i {
+        float: right;
+        padding: 0;
+        margin: 0;
+      }
+      .badge {
+        right: auto;
+        left: 15px;
+      }
+    }
+    .nav > .nav-dropdown {
+
+      &:hover {
+        > .nav-dropdown-items {
+          right: $sidebar-minimized-width;
+          left: 0;
+        }
+      }
+    }
+  }
+
+  // Horizontal bars
+  .horizontal-bars {
+
+    li {
+
+      .bars {
+        padding-right: 100px;
+        padding-left: 0;
+
+        .progress:first-child {
+          margin-bottom: 2px;
+        }
+      }
+    }
+
+    &.type-2 {
+
+      li {
+
+        i {
+          margin-right: 5px;
+          margin-left: $spacer;
+        }
+
+        .value {
+          float: left;
+          font-weight: 600;
+        }
+
+        .bars {
+          padding: 0;
+        }
+      }
+    }
+  }
+
+  // Icon list
+  .icons-list {
+
+    li {
+      position: relative;
+      height: 40px;
+      vertical-align: middle;
+
+      i {
+        float: right;
+      }
+
+      .desc {
+        margin-right: 50px;
+        margin-left: 0;
+      }
+
+      .value {
+        right: auto;
+        left: 45px;
+        text-align: left;
+
+        strong {
+          display: block;
+          margin-top: -3px;
+        }
+      }
+
+      .actions {
+        right: auto;
+        left: 10px;
+      }
+    }
+  }
+
+  // Callouts
+  .callout {
+    border: 0 solid $border-color;
+    border-right-width: .25rem;
+
+    @each $color, $value in $theme-colors {
+      &.callout-#{$color} {
+        border-right-color: $value;
+      }
+    }
+
+    .chart-wrapper {
+      left: 0;
+      float: left;
+    }
+  }
+
+  .callout-default {
+    border-right-color: $text-muted;
+  }
+}