beyond-rails 0.0.295 → 1.0.4

data/src/sass/components/_alert.scss

@@ -14,28 +14,22 @@
     font-weight: 900;
     margin-bottom: 0.5rem;
   }
-
   p {
     line-height: 1.5em;
   }
-
-  @for $i from 1 through length($alert-states) {
-    $state: nth($alert-states, $i);
-    $bg: nth($alert-bgs, $i);
-    $color: nth($alert-colors, $i);
-    $color-link:  nth($alert-color-links, $i);
-    $color-hr: nth($alert-color-hrs, $i);
-    &.alert-#{$state} {
-      background-color: $bg;
-      color: $color;
+  @each $alert in $alerts {
+    &.alert-#{map-get($alert, state)} {
+      border: 1px solid map-get($alert, border);
+      background: map-get($alert, bg);
+      color: map-get($alert, txt);
       .alert-link {
-        color: $color-link;
+        color: map-get($alert, link-txt);
         &:hover {
-          border-bottom: 1px solid $color-link;
+          border-bottom: 1px solid map-get($alert, link-txt);
         }
       }
       hr {
-        border-top-color: $color-hr;
+        border-top-color: map-get($alert, hr-txt);
       }
     }
   }

data/src/sass/components/_autocomplete.scss

@@ -1,5 +1,4 @@
 .autocomplete-menu {
-  background-color: #fff;
   position: absolute;
   box-shadow: 0 0 0 1px rgba(136, 152, 170, .1),
     0 15px 35px 0 rgba(49, 49, 93, .1),
@@ -7,23 +6,23 @@
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
   .item {
-    background-color: #fff;
+    background: $autocomplete-item-bg;
     cursor: default;
     padding: 12px 15px;
     font-size: 12px;
     &:hover {
-      background-color: #f7fafc;
+      background-color: $autocomplete-item-bg-ex;
     }
     .page-prefix {
+      color: $page-prefix-txt;
       display: inline-block;
-      color: #6772e5;
       margin-right: 7px;
       vertical-align: top;
     }
     .page-title {
+      color: $page-title-txt;
       max-width: 300px;
       display: inline-block;
-      color: #697396;
     }
   }
 }

data/src/sass/components/_avatar.scss

@@ -19,10 +19,9 @@
   line-height: 38px;
   font-size: 16px;
 }
-@each $classname, $bg in $bg-avatars {
-  .avatar.#{$classname} {
-    background-color: $bg;
-    border: 1px solid $bg;
-    color: #fff;
-  }
+.avatar-letter {
+  background-color: #eee;
+  border: 1px solid #ddd;
+  color: #333;
+  font-weight: 900;
 }

data/src/sass/components/_badge.scss

@@ -1,12 +1,10 @@
 .badge {
   font-family: 'Roboto', sans-serif;
-  font-weight: 900;
   font-size: 12px;
   border-radius: 2px;
-  background-color: #eaeaea;
-  padding: 1px 4px;
+  background-color: $badge-bg;
+  padding: 2px 4px;
   white-space: nowrap;
-  transform: translateY(-8%);
 }
 
 .badge.badge-pill {

data/src/sass/components/_breadcrumb.scss

@@ -4,14 +4,15 @@
   padding: .75rem 1rem;
   margin-bottom: 1rem;
   list-style: none;
+  color: $breadcrumb-color-ex;
   li + li::before {
     display: inline-block;
     padding-right: .7rem;
     padding-left: .7rem;
-    color: $text-color-strong;
+    color: $breadcrumb-color;
     content: '/';
   }
   li:last-child {
-    color: $text-color-strong;
+    color: $breadcrumb-color;
   }
 }

data/src/sass/components/_btn-group.scss

@@ -14,6 +14,6 @@
     border-bottom-left-radius: 0;
   }
   .btn .badge {
-    margin-left: 10px;
+    margin-left: 8px;
   }
 }

data/src/sass/components/_btn.scss

@@ -1,21 +1,34 @@
 .btn {
   outline: 0;
-  background-color: #fff;
+  background-color: $default-btn-bg;
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  border: 0;
+  border: 1px solid $btn-border;
   padding: 6px 12px 7px;
   border-radius: 3px;
   font-size: 14px;
-  font-weight: 700;
   transition: all .3s;
-  box-shadow: 0 4px 6px 0 rgba(50, 50, 93, .11),
-    0 1px 3px 0 rgba(0, 0, 0, .08);
+
   &:focus,
   &:hover:focus {
     @include focus-outline;
   }
+  &.hover,
+  &:hover {
+    transform: translateY(-1px);
+  }
+  &.active,
+  &:active {
+    transform: translateY(0);
+    box-shadow: none;
+    border: 1px solid darken($btn-border, 20%);
+  }
+  &.disabled,
+  &:disabled {
+    transform: translateY(0);
+    cursor: not-allowed;
+  }
   &.btn-sm {
     &, .icon:before {
       font-size: 12px;
@@ -50,22 +63,6 @@
       }
     }
   }
-  &.hover,
-  &:hover {
-    transform: translateY(-1px);
-    box-shadow: 0 7px 12px 0 rgba(50, 50, 93, .11),
-      0 3px 6px 0 rgba(0, 0, 0, .08);
-  }
-  &.active,
-  &:active {
-    transform: translateY(0);
-    box-shadow: none;
-  }
-  &.disabled,
-  &:disabled {
-    transform: translateY(0);
-    cursor: not-allowed;
-  }
   .icon {
     margin-right: .4em;
   }
@@ -97,82 +94,83 @@
   @include ripple(48px, 0, 0);
 }
 
-.btn.btn-outline,
-a.btn.btn-outline {
-  color: $text-color;
-}
-
-.btn.btn-outline {
-  background-color: #fff;
-  font-size: 13px;
-  font-weight: 400;
-  padding: 4px 7px;
-  border: 1px solid #ccc;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.08);
-  &.hover,
-  &:hover {
-    transform: translateY(-1px);
-    box-shadow: 0 1px 2px 0 rgba(50, 50, 93, .11),
-      0 3px 6px 0 rgba(0, 0, 0, .08);
-  }
-  &:focus {
-    @include focus-outline;
-  }
-  &.active {
-    background-color: #f3f3f7;
-  }
-}
-
-.btn-outline .ring-loader div {
-  border-color: $text-color-light transparent transparent transparent;
-}
-
 .btn .badge {
   margin-left: .5rem;
   font-weight: 400;
+  background: $btn-badge-bg;
+  box-shadow: $btn-badge-shadow;
 }
 
-@each $classname, $bg, $color, $bg-ex, $bg-disabled, $outlined-color, $badge-bg, $badge-color in $btns {
+@each $btn in $btns {
+
+  $classname: map-get($btn, classname);
+
   .btn.#{$classname} {
-    background-color: $bg;
-    color: $color;
+    background-color: map-get($btn, bg);
+    color: map-get($btn, txt);
+    @if $classname == 'btn-secondary' {
+      border: 1px solid $btn-border;
+      box-shadow: none;
+    }
+    @else {
+      border: 0;
+      box-shadow: 0 4px 6px 0 rgba(50, 50, 93, .05),
+        0 1px 3px 0 rgba(0, 0, 0, .08);
+      &.hover,
+      &:hover {
+        box-shadow: 0 7px 12px 0 rgba(50, 50, 93, .05),
+          0 3px 6px 0 rgba(0, 0, 0, .08);
+      }
+    }
+    &:focus,
+    &:hover:focus {
+      @include focus-outline;
+    }
     &.hover,
     &:hover,
     &.active,
     &:active {
-      background-color: $bg-ex;
+      background-color: map-get($btn, bg-ex);
+    }
+    &.active,
+    &:active {
+      border: 1px solid darken(map-get($btn, bg-ex), 20%);
     }
     &.disabled,
     &:disabled {
-      background-color: $bg-disabled;
-    }
-    &.outlined {
-      border: 1px solid $outlined-color;
+      background-color: map-get($btn, bg-disabled);
     }
     .badge {
-      background-color: $badge-bg;
-      color: $badge-color;
+      background-color: map-get($btn, badge-bg);
+      color: map-get($btn, badge-txt);
     }
   }
 }
 
 .btn.btn-link {
   background-color: transparent;
-  color: nth($btn-link, 3);
+  border: 1px solid $btn-link-border;
+  color: nth($btn-link, 1);
   cursor: pointer;
   box-shadow: none;
   &.hover,
   &:hover,
   &.active,
   &:active {
-    color: nth($btn-link, 4);
+    color: nth($btn-link, 2);
+  }
+  &:focus,
+  &:hover:focus {
+    @include focus-outline;
+  }
+  &.active,
+  &:active {
+    box-shadow: inset 0 0 0 1px $btn-link-border;
   }
   &.disabled,
   &:disabled {
-    color: nth($btn-link, 5);
-  }
-  &.outlined {
-    border: 1px solid #ccc;
+    color: nth($btn-link, 3);
+    border: 1px solid nth($btn-link, 3);
   }
 }
 

data/src/sass/components/_card.scss

@@ -4,7 +4,10 @@
   flex-direction: column;
   min-width: 0;
   word-wrap: break-word;
-  background-color: #fff;
+
+  background: $card-bg;
+  color: $card-color;
+
   background-clip: border-box;
   border: 1px solid rgba(0, 0, 0, .125);
   border-radius: .25rem;
@@ -42,23 +45,26 @@
   display: block;
   padding: .75rem 1.25rem;
   margin-bottom: -1px;
-  background-color: #fff;
-  border: 1px solid rgba(0, 0, 0, .125);
+  background-color: $list-group-bg;
+  border: 1px solid $card-border;
 }
 .card-header:first-child {
   border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0;
   padding: .75rem 1.25rem;
   margin-bottom: 0;
   background-color: rgba(0, 0, 0, .03);
-  border-bottom: 1px solid rgba(0, 0, 0, .125);
+  border-bottom: 1px solid $card-border;
 }
 .card-header+.list-group .list-group-item:first-child {
   border-top: 0;
 }
+.list-group .list-group-item:last-child {
+  border-bottom: 0;
+}
 .card-footer {
   padding: .75rem 1.25rem;
   background-color: rgba(0, 0, 0, .03);
-  border-top: 1px solid rgba(0, 0, 0, .125);
+  border-top: 1px solid $card-border;
 }
 .card > .list-group:first-child .list-group-item:first-child {
   border-top-left-radius: .25rem;
@@ -98,7 +104,7 @@
 .blockquote-footer {
   display: block;
   font-size: 80%;
-  color: #6c757d;
+  color: $blockquote-footer-color;
 }
 .card-header-tabs {
   margin-right: -.625rem;

data/src/sass/components/_chart.scss

@@ -5,12 +5,12 @@
 .chart-menu {
   display: none;
   position: absolute;
-  background-color: #fff;
-  padding: 10px 13px;
-  box-shadow: 4px 4px 15px 1px rgba(68,  68, 72, .12);
-  color: #3c4257;
   z-index: 1;
-  border: 1px solid #e8e8e8;
+  padding: 10px 13px;
+  background: $chart-menu-bg;
+  color: $chart-menu-txt;
+  box-shadow: $chart-menu-shadow;
+  border: $chart-menu-border;
 }
 
 .chart-box {

data/src/sass/components/_checkbox.scss

@@ -23,7 +23,7 @@
   cursor: pointer;
   margin-right: 25px;
   vertical-align: middle;
-  color: #3c4257;
+  color: $txt;
   font-size: 14px;
   .checkbox + span {
     position: relative;
@@ -38,16 +38,16 @@ label.checkbox {
   margin-bottom: initial;
 }
 .checkbox {
-  transform: translateY(3px);
-  &.focus {
-    @include focus-outline;
-  }
   $size: 14px;
-  @include size($size);
+  transform: translateY(4px);
   cursor: pointer;
   position: relative;
   display: inline-block;
+  @include size($size);
 
+  &.focus {
+    @include focus-outline;
+  }
   input[type="checkbox"] {
     @include size($size);
     cursor: pointer;
@@ -57,7 +57,7 @@ label.checkbox {
     display: block;
     bottom: 0;
     &:checked ~ .icon-checkbox {
-      background-color: #6772e5;
+      background-color: $checkbox-bg-ex;
       box-shadow: none;
       &:before {
         animation: .3s check1;
@@ -74,7 +74,7 @@ label.checkbox {
     }
   }
   .icon-checkbox {
-    background-color: #fff;
+    background-color: $checkbox-bg;
     transform: translateY(-2px);
     transition: .3s background-color;
     box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12),

data/src/sass/components/_date-menu.scss

@@ -1,10 +1,10 @@
 .date-menu {
+  background: $date-menu-bg;
   display: none;
   position: absolute;
   box-shadow: 0 0 0 1px rgba(136, 152, 170, .1),
     0 15px 35px 0 rgba(49, 49, 93, .1),
     0 5px 15px 0 rgba(0, 0, 0, .08);
-  background-color: #fff;
   white-space: nowrap;
   &.static {
     position: static;
@@ -19,18 +19,18 @@
     }
   }
   .date-menu-caption {
+    color: $date-menu-caption-color;
     font-size: 15px;
-    color: #3c4257;
     text-align: center;
     height: 50px;
     line-height: 50px;
   }
   .date-menu-week-header {
     li {
+      color: $date-menu-week-header-color;
       display: inline-block;
       padding: 7px 10px;
       font-size: 11px;
-      color: #8792a2;
     }
   }
   .date-menu-btn-prev,
@@ -64,28 +64,28 @@
     td {
       text-align: center;
       &.cell {
-        background-color: #f7fafc;
+        background: $date-menu-cell-bg;
+        border-color: $date-menu-cell-border;
         cursor: pointer;
         border-width: 1px;
         border-style: solid;
-        border-color: #e3e8ee;
       }
       &.cell.js-disabled {
         opacity: .4;
         cursor: not-allowed;
       }
       &.cell.today {
-        background-color: #fffef4;
+        background: $date-menu-cell-today-bg;
       }
       &.cell.selected {
-        background-color: #6c8eef;
+        background: $date-menu-cell-selected-bg;
+        border-color: $date-menu-cell-selected-border;
         color: #fff;
-        border-color: #6c8eef;
       }
       &.cell.selected-ex {
-        background-color: #5469d4;
+        background: $date-menu-cell-selected-ex-bg;
+        border-color: $date-menu-cell-selected-ex-border;
         color: #fff;
-        border-color: #5469d4;
       }
     }
   }

data/src/sass/components/_date-time-ranger.scss

@@ -1,13 +1,19 @@
 .date-time-ranger {
-  border-radius: 4px;
-  background-color: #fff;
-  display: inline-block;
+  &,
+  .date-input,
+  .time-input {
+    background: $control-bg;
+  }
   box-shadow: 0 0 0 1px rgba(42, 47, 69, .1),
     0 2px 5px 0 rgba(42, 47, 69, .1),
     0 1px 1px 0 rgba(0, 0, 0, .07),
     0 1px 2px 0 rgba(0, 0, 0, .08),
     0 0 0 0 transparent;
+
+  border-radius: 4px;
+  display: inline-block;
   padding: 4px;
+
   .icon-arrow-right {
     padding-left: 0;
     padding-right: 0;

data/src/sass/components/_dropdown.scss

@@ -1,7 +1,6 @@
 .btn.btn-dropdown {
   [class^="icon-"] {
     font-size: 11px;
-    color: #4f566b;
     margin-left: .7em;
     display: inline-block;
   }
@@ -24,49 +23,48 @@
 }
 .dropdown-menu {
   display: none;
+  background-color: $dropdown-menu-bg;
+  box-shadow: $dropdown-menu-shadow;
   transition: .2s all;
+  border-radius: 5px;
+  position: absolute;
+  z-index: 1;
+  padding: 8px 0;
 
   .dropdown-menu-scrollable {
     max-height: 186px;
     overflow-y: scroll;
     -webkit-overflow-scrolling: touch;
   }
-
-  z-index: 1;
-  padding: 8px 0;
   &.no-padding {
     padding: 0;
   }
-  position: absolute;
-  background-color: #fff;
-  box-shadow: 0 0 0 1px rgba(136, 152, 170, .1),
-    0 15px 35px 0 rgba(49, 49, 93, .1),
-    0 5px 15px 0 rgba(0, 0, 0, .08);
   .dropdown-divider {
-    border-bottom: 1px solid #d8d8d8;
+    border-bottom: 1px solid $dropdown-divider-border;
     margin: 10px 0;
   }
   .dropdown-item {
     min-width: 160px;
     padding: 7px 20px;
     font-size: 14px;
-    color: #5469d4;
+    color: $dropdown-menu-color;
     display: block;
     text-decoration: none;
     &:hover {
-      background-color: #f7fafc;
+      background-color: $dropdown-menu-bg-ex;
     }
   }
   &.no-arrow:after {
     display: none;
   }
   &:after {
+    z-index: -1;
     content: ' ';
     display: block;
     border: 0;
     border-top-left-radius: 4px;
     @include size(12px);
-    background-color: #fff;
+    background-color: $dropdown-menu-bg;
     position: absolute;
     transform: rotate(45deg);
   }
@@ -147,9 +145,19 @@
 .dropdown-menu-title {
   padding: 7px 14px;
   font-weight: 500;
-  background-color: #f7fafc;
+  background-color: $dropdown-menu-title-bg;
 }
 .dropdown-menu-content {
   padding: 14px;
   font-size: .9rem;
 }
+
+.dropdown-menu .dropdown-submenu .dropdown-item {
+  padding: .4rem 1.2rem .4rem 1.2rem;
+}
+.dropdown-heading {
+  font-size: 14px;
+  padding: 0 15px;
+  font-weight: 900;
+  color: #40468a;
+}