coreui-rails 0.2.4

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

@@ -0,0 +1,301 @@
+@mixin switch-size($width, $height, $font-size, $handle-margin) {
+  width: $width;
+  height: $height;
+
+  .switch-label {
+    font-size: $font-size;
+  }
+
+  .switch-handle {
+    width: $height - $handle-margin * 2;
+    height: $height - $handle-margin * 2;
+  }
+
+  .switch-input:checked ~ .switch-handle {
+    left: $width - $height + $handle-margin;
+  }
+}
+
+@mixin switch($type, $width, $height, $font-size, $handle-margin) {
+  position: relative;
+  display: inline-block;
+  width: $width;
+  height: $height;
+  vertical-align: top;
+  cursor: pointer;
+  background-color: transparent;
+
+  .switch-input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0;
+  }
+
+  .switch-label {
+    position: relative;
+    display: block;
+    height: inherit;
+    @if $type == icon {
+      font-family: FontAwesome;
+    }
+    font-size: $font-size;
+    font-weight: 600;
+    text-transform: uppercase;
+    @if $type == ddd {
+      background-color: $gray-100;
+    } @else {
+      background-color: #fff;
+    }
+    border: 1px solid $border-color;
+    border-radius: 2px;
+    transition: opacity background .15s ease-out;
+  }
+  @if $type == text or $type == icon {
+    .switch-label::before,
+    .switch-label::after {
+      position: absolute;
+      top: 50%;
+      width: 50%;
+      margin-top: -.5em;
+      line-height: 1;
+      text-align: center;
+      transition: inherit;
+    }
+    .switch-label::before {
+      right: 1px;
+      color: $gray-200;
+      content: attr(data-off);
+    }
+    .switch-label::after {
+      left: 1px;
+      color: #fff;
+      content: attr(data-on);
+      opacity: 0;
+    }
+  }
+  .switch-input:checked ~ .switch-label {
+    //background: $gray-lightest;
+  }
+  .switch-input:checked ~ .switch-label::before {
+    opacity: 0;
+  }
+  .switch-input:checked ~ .switch-label::after {
+    opacity: 1;
+  }
+
+  .switch-handle {
+    position: absolute;
+    top: $handle-margin;
+    left: $handle-margin;
+    width: $height - $handle-margin * 2;
+    height: $height - $handle-margin * 2;
+    background: #fff;
+    border: 1px solid $border-color;
+    border-radius: 1px;
+    transition: left .15s ease-out;
+    @if $type == ddd {
+      border: 0;
+      box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
+    }
+  }
+
+  .switch-input:checked ~ .switch-handle {
+    left: $width - $height + $handle-margin;
+  }
+
+
+  @if $type == ddd {
+    @extend .switch-pill;
+  }
+
+  //size variations
+  @if $type == default {
+
+    &.switch-lg {
+      @include switch-size($switch-lg-width, $switch-lg-height, $switch-lg-font-size, $handle-margin);
+    }
+    &.switch-sm {
+      @include switch-size($switch-sm-width, $switch-sm-height, $switch-sm-font-size, $handle-margin);
+    }
+    &.switch-xs {
+      @include switch-size($switch-xs-width, $switch-xs-height, $switch-xs-font-size, $handle-margin);
+    }
+
+  } @else if $type == text {
+
+    &.switch-lg {
+      @include switch-size($switch-text-lg-width, $switch-text-lg-height, $switch-text-lg-font-size, $handle-margin);
+    }
+    &.switch-sm {
+      @include switch-size($switch-text-sm-width, $switch-text-sm-height, $switch-text-sm-font-size, $handle-margin);
+    }
+    &.switch-xs {
+      @include switch-size($switch-text-xs-width, $switch-text-xs-height, $switch-text-xs-font-size, $handle-margin);
+    }
+
+  } @else if $type == icon {
+
+    &.switch-lg {
+      @include switch-size($switch-icon-lg-width, $switch-icon-lg-height, $switch-icon-lg-font-size, $handle-margin);
+    }
+    &.switch-sm {
+      @include switch-size($switch-icon-sm-width, $switch-icon-sm-height, $switch-icon-sm-font-size, $handle-margin);
+    }
+    &.switch-xs {
+      @include switch-size($switch-icon-xs-width, $switch-icon-xs-height, $switch-icon-xs-font-size, $handle-margin);
+    }
+
+  } @else if $type == ddd {
+
+    &.switch-lg {
+      @include switch-size($switch-lg-width, $switch-lg-height, $switch-lg-font-size, 0);
+    }
+    &.switch-sm {
+      @include switch-size($switch-sm-width, $switch-sm-height, $switch-sm-font-size, 0);
+    }
+    &.switch-xs {
+      @include switch-size($switch-xs-width, $switch-xs-height, $switch-xs-font-size, 0);
+    }
+  }
+}
+
+@mixin switch-variant($color) {
+  > .switch-input:checked ~ .switch-label {
+    background: $color;
+    border-color: darken($color, 10%);
+  }
+
+  > .switch-input:checked ~ .switch-handle {
+    border-color: darken($color, 10%);
+  }
+}
+
+@mixin switch-outline-variant($color) {
+  > .switch-input:checked ~ .switch-label {
+    background: #fff;
+    border-color: $color;
+
+    &::after {
+      color: $color;
+    }
+  }
+
+  > .switch-input:checked ~ .switch-handle {
+    border-color: $color;
+  }
+}
+
+@mixin switch-outline-alt-variant($color) {
+  > .switch-input:checked ~ .switch-label {
+    background: #fff;
+    border-color: $color;
+
+    &::after {
+      color: $color;
+    }
+  }
+
+  > .switch-input:checked ~ .switch-handle {
+    background: $color;
+    border-color: $color;
+  }
+}
+
+$switch-lg-width: 48px;
+$switch-lg-height: 28px;
+$switch-lg-font-size: 12px;
+
+$switch-width: 40px;
+$switch-height: 24px;
+$switch-font-size: 10px;
+
+$handle-margin: 2px;
+
+$switch-sm-width: 32px;
+$switch-sm-height: 20px;
+$switch-sm-font-size: 8px;
+
+$switch-xs-width: 24px;
+$switch-xs-height: 16px;
+$switch-xs-font-size: 7px;
+
+
+$switch-text-lg-width: 56px;
+$switch-text-lg-height: 28px;
+$switch-text-lg-font-size: 12px;
+
+$switch-text-width: 48px;
+$switch-text-height: 24px;
+$switch-text-font-size: 10px;
+
+$switch-text-sm-width: 40px;
+$switch-text-sm-height: 20px;
+$switch-text-sm-font-size: 8px;
+
+$switch-text-xs-width: 32px;
+$switch-text-xs-height: 16px;
+$switch-text-xs-font-size: 7px;
+
+
+$switch-icon-lg-width: 56px;
+$switch-icon-lg-height: 28px;
+$switch-icon-lg-font-size: 12px;
+
+$switch-icon-width: 48px;
+$switch-icon-height: 24px;
+$switch-icon-font-size: 10px;
+
+$switch-icon-sm-width: 40px;
+$switch-icon-sm-height: 20px;
+$switch-icon-sm-font-size: 8px;
+
+$switch-icon-xs-width: 32px;
+$switch-icon-xs-height: 16px;
+$switch-icon-xs-font-size: 7px;
+
+.switch.switch-default {
+  @include switch("default", $switch-width, $switch-height, $switch-font-size, $handle-margin);
+}
+
+.switch.switch-text {
+  @include switch("text", $switch-text-width, $switch-text-height, $switch-text-font-size, $handle-margin);
+}
+
+.switch.switch-icon {
+  @include switch("icon", $switch-icon-width, $switch-icon-height, $switch-icon-font-size, $handle-margin);
+}
+
+.switch.switch-3d {
+  @include switch("ddd", $switch-width, $switch-height, $switch-font-size, 0);
+}
+
+//pills style
+.switch-pill {
+  .switch-label,
+  .switch-handle {
+    border-radius: 50em;
+  }
+
+  .switch-label::before {
+    right: 2px;
+  }
+  .switch-label::after {
+    left: 2px;
+  }
+}
+
+@each $color, $value in $theme-colors {
+  //normal style
+  .switch-#{$color} {
+    @include switch-variant($value);
+  }
+  //outline style
+  .switch-#{$color}-outline {
+    @include switch-outline-variant($value);
+  }
+  //outline alternative style
+  .switch-#{$color}-outline-alt {
+    @include switch-outline-alt-variant($value);
+  }
+}

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

@@ -0,0 +1,20 @@
+.table-outline {
+  border: 1px solid $table-border-color;
+
+  td {
+    vertical-align: middle;
+  }
+}
+
+.table-align-middle {
+
+  td {
+    vertical-align: middle;
+  }
+}
+
+.table-clear {
+  td {
+    border: 0;
+  }
+}

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

@@ -0,0 +1,39 @@
+// stylelint-disable
+
+.pagination-datatables, .pagination {
+  li {
+    @extend .page-item;
+
+    a {
+      @extend .page-link;
+    }
+  }
+}
+
+.label-pill {
+  border-radius: 1rem !important;
+}
+
+// temp fix for Vue & React
+
+// Open state for the dropdown
+.open, .show {
+  // Remove the outline when :focus is triggered
+  > a {
+    outline: 0;
+  }
+}
+
+// navbar dropdown fix
+.navbar .dropdown-toggle {
+  @extend .nav-link;
+
+  .img-avatar {
+    height: $navbar-height - 20px;
+    margin: 0 10px;
+  }
+}
+
+.card-block {
+  @extend .card-body;
+}

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

@@ -0,0 +1,4 @@
+@import "utilities/background";
+@import "utilities/borders";
+@import "utilities/display";
+@import "utilities/typography";

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

@@ -0,0 +1,243 @@
+// CoreUI Variables
+
+// stylelint-disable
+$enable-sidebar-nav-rounded:          false !default;
+
+$layout-transition-speed:             .25s !default;
+
+// Social Colors
+
+$facebook:       #3b5998 !default;
+$twitter:        #00aced !default;
+$linkedin:       #4875b4 !default;
+$google-plus:    #d34836 !default;
+$flickr:         #ff0084 !default;
+$tumblr:         #32506d !default;
+$xing:           #026466 !default;
+$github:         #4183c4 !default;
+$html5:          #e34f26 !default;
+$openid:         #f78c40 !default;
+$stack-overflow: #fe7a15 !default;
+$youtube:        #b00 !default;
+$css3:           #0170ba !default;
+$dribbble:       #ea4c89 !default;
+$google-plus:    #bb4b39 !default;
+$instagram:      #517fa4 !default;
+$pinterest:      #cb2027 !default;
+$vk:             #45668e !default;
+$yahoo:          #400191 !default;
+$behance:        #1769ff !default;
+$dropbox:        #007ee5 !default;
+$reddit:         #ff4500 !default;
+$spotify:        #7ab800 !default;
+$vine:           #00bf8f !default;
+$foursquare:     #1073af !default;
+$vimeo:          #aad450 !default;
+
+$brands-colors: () !default;
+$brands-colors: map-merge((
+  "facebook":       $facebook,
+  "twitter":        $twitter,
+  "linkedin":       $linkedin,
+  "google-plus":    $google-plus,
+  "flickr":         $flickr,
+  "tumblr":         $tumblr,
+  "xing":           $xing,
+  "github":         $github,
+  "html5":          $html5,
+  "openid":         $openid,
+  "stack-overflow": $stack-overflow,
+  "youtube":        $youtube,
+  "css3":           $css3,
+  "dribbble":       $dribbble,
+  "instagram":      $instagram,
+  "pinterest":      $pinterest,
+  "vk":             $vk,
+  "yahoo":          $yahoo,
+  "behance":        $behance,
+  "dropbox":        $dropbox,
+  "reddit":         $reddit,
+  "spotify":        $spotify,
+  "vine":           $vine,
+  "foursquare":     $foursquare,
+  "vimeo":          $vimeo
+), $brands-colors);
+
+// Navbar
+
+$navbar-height:                       55px !default;
+$navbar-bg:                           #fff !default;
+$navbar-border: (
+  bottom: (
+    size:                             1px,
+    style:                            solid,
+    color:                            $border-color
+  )
+)  !default;
+$navbar-brand-width:                  155px !default;
+$navbar-brand-bg:                     #fff !default;
+$navbar-brand-border: (
+  bottom: (
+    size:                             1px,
+    style:                            solid,
+    color:                            $border-color
+  )
+) !default;
+
+$navbar-brand-minimized-width:        50px !default;
+$navbar-brand-minimized-bg:           $navbar-brand-bg !default;
+$navbar-brand-minimized-border:       $navbar-brand-border !default;
+
+$navbar-color:                        $gray-600 !default;
+$navbar-hover-color:                  $gray-800 !default;
+$navbar-active-color:                 $gray-800 !default;
+$navbar-disabled-color:               $gray-300 !default;
+
+$navbar-toggler-icon:                 str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-color}' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
+$navbar-toggler-icon-hover:           str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-hover-color}' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
+
+// Sidebar
+
+$sidebar-width:                       200px !default;
+$sidebar-padding:                     0 !default;
+$sidebar-minimized-width:             50px !default;
+$sidebar-minimized-height:            $sidebar-minimized-width !default;
+$sidebar-compact-width:               150px !default;
+$sidebar-compact-height:              $sidebar-compact-width !default;
+$sidebar-color:                       #fff !default;
+$sidebar-bg:                          $gray-800 !default;
+$sidebar-borders:                     none !default;
+$mobile-sidebar-width:                220px !default;
+
+// Sidebar Header
+
+$sidebar-header-height:               auto !default;
+$sidebar-header-bg:                   rgba(0,0,0,.2) !default;
+$sidebar-header-padding-y:            .75rem !default;
+$sidebar-header-padding-x:            1rem !default;
+
+// Sidebar Form
+
+$sidebar-form-border:                 0 !default;
+$sidebar-form-bg:                     darken($sidebar-bg,10%) !default;
+$sidebar-form-color:                  #fff !default;
+$sidebar-form-placeholder-color:      rgba(255,255,255,.7) !default;
+
+// Sidebar Navigation
+
+$sidebar-nav-color:                   #fff !default;
+$sidebar-nav-title-padding-y:         .75rem !default;
+$sidebar-nav-title-padding-x:         1rem !default;
+$sidebar-nav-title-color:             $gray-200 !default;
+$sidebar-nav-link-padding-y:          .75rem !default;
+$sidebar-nav-link-padding-x:          1rem !default;
+$sidebar-nav-link-color:              #fff !default;
+$sidebar-nav-link-bg:                 transparent !default;
+$sidebar-nav-link-icon-color:         $gray-600 !default;
+$sidebar-nav-link-borders:            0 !default;
+
+$sidebar-nav-link-hover-color:        #fff !default;
+$sidebar-nav-link-hover-bg:           theme-color("primary") !default;
+$sidebar-nav-link-hover-icon-color:   #fff !default;
+$sidebar-nav-link-hover-borders:      0 !default;
+
+$sidebar-nav-link-active-color:       #fff !default;
+$sidebar-nav-link-active-bg:          lighten($sidebar-bg, 5%) !default;
+$sidebar-nav-link-active-icon-color:  theme-color("primary") !default;
+$sidebar-nav-link-active-borders:     0 !default;
+
+$sidebar-nav-dropdown-color:          #fff !default;
+$sidebar-nav-dropdown-bg:             rgba(0,0,0,.2) !default;
+$sidebar-nav-dropdown-borders:        0 !default;
+$sidebar-nav-dropdown-indicator-color:$gray-600 !default;
+$sidebar-nav-dropdown-indicator:      str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-nav-dropdown-indicator-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"), "#", "%23") !default;
+$sidebar-nav-dropdown-indicator-hover-color:$sidebar-nav-link-hover-color;
+$sidebar-nav-dropdown-indicator-hover:str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-nav-dropdown-indicator-hover-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"), "#", "%23") !default;
+
+// Sidebar Footer
+
+$sidebar-footer-height:               auto !default;
+$sidebar-footer-bg:                   rgba(0,0,0,.2) !default;
+$sidebar-footer-padding-y:            .75rem !default;
+$sidebar-footer-padding-x:            1rem !default;
+$sidebar-footer-borders:              0 !default;
+
+// Sidebar Minimizer
+
+$sidebar-minimizer-height:            50px !default;
+$sidebar-minimizer-bg:                rgba(0,0,0,.2) !default;
+$sidebar-minimizer-borders:           0 !default;
+$sidebar-minimizer-indicator-color:   $gray-600 !default;
+$sidebar-minimizer-indicator:         str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-minimizer-indicator-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"), "#", "%23") !default;
+$sidebar-minimizer-hover-bg:          rgba(0,0,0,.3) !default;
+$sidebar-minimizer-hover-indicator-color:$sidebar-nav-link-hover-color !default;
+$sidebar-minimizer-hover-indicator:   str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-minimizer-hover-indicator-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"), "#", "%23") !default;
+
+
+// Top Navigation
+
+$top-nav-bg:                          #fff !default;
+$top-nav-color:                       $body-color !default;
+$top-nav-borders: (
+  bottom: (
+    size:                             1px,
+    style:                            solid,
+    color:                            $border-color
+  )
+) !default;
+$top-nav-ul-borders: (
+  all: (
+    size:                             1px,
+    style:                            solid,
+    color:                            $border-color
+  )
+) !default;
+
+$top-nav-hover-color:                 #fff !default;
+$top-nav-hover-bg:                    theme-color("primary") !default;
+$top-nav-active-color:                #fff !default;
+$top-nav-active-bg:                   theme-color("primary") !default;
+$top-nav-height:                      $navbar-height - 15px !default;
+
+// Breadcrumb
+$breadcrumb-borders: (
+  bottom: (
+    size:                             1px,
+    style:                            solid,
+    color:                            $border-color
+  )
+) !default;
+
+// Aside
+
+$aside-menu-width:                    250px !default;
+$aside-menu-color:                    $gray-800 !default;
+$aside-menu-bg:                       #fff !default;
+$aside-menu-borders: (
+  left: (
+    size:                             1px,
+    style:                            solid,
+    color:                            $border-color
+  )
+) !default;
+
+$aside-menu-nav-padding-y:            .75rem !default;
+$aside-menu-nav-padding-x:            1rem !default;
+
+// Footer
+
+$footer-height:                       50px !default;
+$footer-bg:                           $gray-100 !default;
+$footer-color:                        $body-color !default;
+$footer-borders: (
+  top: (
+    size:                             1px,
+    style:                            solid,
+    color:                            $border-color
+  )
+) !default;
+
+// Cards
+
+$card-icon-bg:                        transparent !default;
+$card-icon-color:                     $body-color !default;