beyond-rails 1.0.2 → 1.0.6

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/_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,16 +1,13 @@
-$default-border: #e6e6e6;
-
 .btn {
   outline: 0;
-  background-color: #fff;
+  background-color: $default-btn-bg;
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  border: 1px solid $default-border;
+  border: 1px solid $btn-border;
   padding: 6px 12px 7px;
   border-radius: 3px;
   font-size: 14px;
-  font-weight: 700;
   transition: all .3s;
 
   &:focus,
@@ -25,7 +22,7 @@ $default-border: #e6e6e6;
   &:active {
     transform: translateY(0);
     box-shadow: none;
-    border: 1px solid darken($default-border, 20%);
+    border: 1px solid darken($btn-border, 20%);
   }
   &.disabled,
   &:disabled {
@@ -100,14 +97,19 @@ $default-border: #e6e6e6;
 .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, $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 $default-border;
+      border: 1px solid $btn-border;
       box-shadow: none;
     }
     @else {
@@ -120,42 +122,55 @@ $default-border: #e6e6e6;
           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($bg-ex, 20%);
+      border: 1px solid darken(map-get($btn, bg-ex), 20%);
     }
     &.disabled,
     &:disabled {
-      background-color: $bg-disabled;
+      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);
+    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,50 +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);
   }
@@ -148,7 +145,7 @@
 .dropdown-menu-title {
   padding: 7px 14px;
   font-weight: 500;
-  background-color: #f7fafc;
+  background-color: $dropdown-menu-title-bg;
 }
 .dropdown-menu-content {
   padding: 14px;

data/src/sass/components/_form.scss

@@ -140,7 +140,7 @@ label {
     color: #a9aebf;
   }
   padding: 5px 7px 6px;
-  background-color: #fff;
+  background-color: $control-bg;
   background-clip: padding-box;
   border-radius: 4px;
   box-shadow: 0 0 0 1px rgba(60, 66, 87, .16),
@@ -206,18 +206,18 @@ label {
 .form-control-sm,
 .form-control-plaintext {
   &.is-valid {
-    box-shadow: 0 0 0 1px $txt-color-success;
+    box-shadow: 0 0 0 1px $txt-success;
   }
   &.is-invalid {
-    box-shadow: 0 0 0 1px $txt-color-danger;
+    box-shadow: 0 0 0 1px $txt-danger;
   }
   &:disabled {
     cursor: not-allowed;
   }
   &:disabled,
   &[readonly] {
-    color: #111;
-    background-color: #e9ecef;
+    color: $control-disabled-color;
+    background: $control-disabled-bg;
   }
 }
 .form-control-plaintext {
@@ -239,17 +239,17 @@ label {
 }
 
 .valid-feedback {
-  color: $txt-color-success;
+  color: $txt-success;
   &:before {
-    color: $txt-color-success;
+    color: $txt-success;
     @extend .icon-check:before;
   }
 }
 
 .invalid-feedback {
-  color: $txt-color-danger;
+  color: $txt-danger;
   &:before {
-    color: $txt-color-danger;
+    color: $txt-danger;
     @extend .icon-exclamation-triangle:before;
   }
 }
@@ -269,10 +269,12 @@ label {
   padding-left: 0;
   margin-right: .75rem;
 
-  .checkbox,
-  .radio {
+  .checkbox {
     transform: translateY(0);
   }
+  .radio {
+    transform: translateY(1px);
+  }
   .checkbox + span,
   .radio + span {
     position: relative;
@@ -287,18 +289,15 @@ label {
   cursor: pointer;
   margin-right: 25px;
   vertical-align: middle;
-  color: #3c4257;
+  color: $txt;
   font-size: 14px;
   .checkbox + span,
   .radio + span {
     position: relative;
     margin-left: 4px;
   }
-  .checkbox .icon-checkbox {
-    transform: translateY(-1px);
-  }
   &.disabled {
-    color: #6c757d;
+    color: $form-check-disabled-color;
     cursor: not-allowed;
     .checkbox {
       @extend %checkbox-disabled;
@@ -308,10 +307,10 @@ label {
     }
   }
   span.is-valid {
-    color: $txt-color-success;
+    color: $txt-success;
   }
   span.is-invalid {
-    color: $txt-color-danger;
+    color: $txt-danger;
   }
 }
 

data/src/sass/components/_input.scss

@@ -3,7 +3,7 @@
   @media (max-width: $screen-sm) {
     width: initial;
   }
-  color: #3c4257;
+  color: $control-color;
   border-radius: 4px;
   border: 0;
   appearance: none;
@@ -12,7 +12,7 @@
   font-size: 14px;
   padding: 6px 7px 7px;
   outline: 0;
-  background-color: #fff;
+  background-color: $control-bg;
   &:focus {
     @include focus-outline;
   }
@@ -27,13 +27,13 @@
 
 .search-input {
   display: inline-block;
-  background-color: #fff;
+  background: $control-bg;
   border-radius: 4px;
   box-shadow: 0 0 0 1px rgba(60, 66, 87, .16),
     0 1px 1px 0 rgba(0, 0, 0, .12);
 
   i:before {
-    color: #8892b3;
+    color: $txt-light;
     margin-left: 10px;
     font-size: 12px;
   }

data/src/sass/components/_modal.scss

@@ -1,4 +1,5 @@
 .modal {
+  background: rgba(82, 95, 127, .25);
   transition: .3s opacity;
   opacity: .1;
   display: none;
@@ -10,14 +11,12 @@
   margin: auto;
   overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
-  background-color: rgba(82, 95, 127, .25);
   .modal-dialog {
+    background: $modal-bg;
+    box-shadow: $modal-shadow;
     transition: .2s transform;
     transform: scale(.1);
     border-radius: 4px;
-    box-shadow: 0 7px 14px 0 rgba(60, 66, 87, .12),
-      0 3px 6px 0 rgba(0, 0, 0, .12);
-    background-color: #fff;
     margin: 20px auto 0;
     max-width: 600px;
     &.modal-sm {
@@ -47,7 +46,7 @@
   .modal-header {
     position: relative;
     font-size: 20px;
-    color: #1a1f36;
+    color: $modal-header-color;
     .modal-title {
       padding: 20px;
     }
@@ -67,7 +66,7 @@
   }
   .modal-body {
     font-size: 14px;
-    color: #1a1f36;
+    color: $modal-color;
     padding: 20px;
   }
   .modal-footer {