ad2games-ui_components 2.0.5 → 2.0.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 12058e72a4da7edc0dfed58b4c9e082c13956a02
-  data.tar.gz: 599914485d7097ba03b6c67115c0634bf88f7c2c
+  metadata.gz: 9034d29a048c3558401f2ee9b7253e1f72c7292b
+  data.tar.gz: ec7f023e4fd016d3ae99712184822f1a21c7ad2b
 SHA512:
-  metadata.gz: 2060ab7afee65e7cf8af8fdf653fc3bffcab16c6a850bfd6f19f34281bd4abc98dfd9c7936836cfe78569128a09f83ac88c79ace4ce1e0ef74fe61cf7de93da8
-  data.tar.gz: 4ef654209534582720322efe2798c0e17cd9ab968a2283906d411f43108763650d84021ed66f57562d0776c6a72386587e6eefb9f203cffa0dbafc9d0b26e790
+  metadata.gz: 050bd79188ef56087676254f87a35a08a5f47bf801da60a87b5a4d7fee1d0b63e5de3530521af0c256cdf1497eccc22f77fc789fc929ac63bac2d2ad62a948c5
+  data.tar.gz: e63298403223ecea7f9a73d12451acc84d3f0eda3383fe4d309dd174b8a16c180285337d24d298e5c6f9345263f8e4196c88fe36acaca7eced46f77274659552

data/app/assets/javascripts/ui_components.js.erb

@@ -1,6 +1,6 @@
 //= require jquery
 //= require jquery.turbolinks
-//= require jquery_ujs
+//= require jquery-ujs
 //= require underscore
 //= require moment/moment
 //= require turbolinks

data/app/assets/javascripts/ui_components/toolbar.coffee

@@ -1,5 +1,5 @@
 $ ->
   $('.toolbar .checkbox input').change ->
-    $(this).parents('.checkbox').toggleClass('active', this.checked)
+    $(this).parents('li.btn').toggleClass('active', this.checked)
 
   $('.toolbar .checkbox input').trigger('change')

data/app/assets/stylesheets/default_theme/button.scss

@@ -2,6 +2,10 @@
   background-clip: padding-box;
   transition: background-color .1s ease-out, border-color .1s, color .1s;
 
+  .glyphicon {
+    padding: 0 2px;
+  }
+
   &:active,
   &.active,
   &:focus,
@@ -23,20 +27,8 @@
   }
 }
 
-.btn {
-  @extend %btn;
-
-  .glyphicon {
-    padding: 0 2px;
-  }
-}
-
 %btn-default {
 
-  &:active,
-  &.active,
-  &:focus,
-  &.focus,
   &:hover,
   &.hover,
   .open > &.dropdown-toggle {
@@ -45,30 +37,24 @@
     color: $btn-default-hover-color;
   }
 
+  &:active,
+  &.active,
+  &:focus,
+  &.focus,
   &:active:focus,
   &:active.focus,
-  &:active:hover,
-  &:active.hover,
   &.active:focus,
   &.active.focus,
-  &.active:hover,
-  &.active.hover {
+  &:active:hover,
+  &.active:hover {
     background-color: $btn-default-hover-border;
     border-color: $btn-default-hover-border;
     color: $white;
   }
 }
 
-.btn-default {
-  @extend %btn-default;
-}
-
 %btn-primary {
 
-  &:active,
-  &.active,
-  &:focus,
-  &.focus,
   &:hover,
   &.hover,
   .open > &.dropdown-toggle {
@@ -77,24 +63,22 @@
     color: $btn-primary-hover-color;
   }
 
+  &:active,
+  &.active,
+  &:focus,
+  &.focus,
   &:active:focus,
   &:active.focus,
-  &:active:hover,
-  &:active.hover,
   &.active:focus,
   &.active.focus,
-  &.active:hover,
-  &.active.hover {
+  &:active:hover,
+  &.active:hover {
     background-color: darken($btn-primary-hover-bg, 15%);
     border-color: $btn-primary-hover-border;
     color: $btn-primary-hover-color;
   }
 }
 
-.btn-primary {
-  @extend %btn-primary;
-}
-
 %btn-disabled {
   border-color: rgba($gray, .3);
   color: $gray;
@@ -119,6 +103,47 @@
   }
 }
 
+.btn {
+  @extend %btn;
+
+  svg {
+    vertical-align: middle;
+    height: 1.2em;
+    width: 1.2em;
+  }
+
+  &.btn-default svg {
+    fill: $btn-default-color;
+  }
+
+  &.btn-default:hover svg {
+    fill: $btn-default-hover-color;
+  }
+
+  &.btn-default:active svg,
+  &.btn-default:focus svg {
+    fill: $btn-default-hover-bg;
+  }
+
+  &.btn-primary svg {
+    fill: $btn-primary-color;
+  }
+
+  &.btn-primary:hover svg,
+  &.btn-primary:active svg,
+  &.btn-primary:focus svg {
+    fill: $btn-primary-hover-color;
+  }
+}
+
+.btn-default {
+  @extend %btn-default;
+}
+
+.btn-primary {
+  @extend %btn-primary;
+}
+
 .btn[disabled],
 .btn.disabled {
   @extend %btn-disabled;

data/app/assets/stylesheets/default_theme/date_selector.scss

@@ -0,0 +1,85 @@
+// scss-lint disabled, as these 'theme' styles need to directly override the date-selector vendor styles
+// scss-lint:disable all
+.applyBtn.btn.btn-small.btn-sm.btn-success {
+  @extend .btn-primary;
+}
+
+.daterangepicker .daterangepicker_start_input label,
+.daterangepicker .daterangepicker_end_input label {
+  text-shadow: none;
+}
+
+.daterangepicker .ranges .input-mini {
+  border-radius: $border-radius-base;
+}
+
+.daterangepicker .ranges li {
+  margin-bottom: $padding-small-vertical;
+  background: transparent;
+  border: 1px solid transparent;
+  color: $brand-primary;
+  -webkit-border-radius: $border-radius-base;
+  -moz-border-radius: $border-radius-base;
+  border-radius: $border-radius-base;
+}
+
+//custom
+.daterangepicker .ranges li:hover {
+  background: transparent;
+  border: 1px solid $brand-primary;
+  color: $brand-primary;
+}
+
+// custom
+.daterangepicker .ranges li.active {
+  background: $brand-primary;
+  border: 1px solid transparent;
+}
+
+.daterangepicker .calendar-date {
+  border-radius: $border-radius-base;
+}
+
+
+.daterangepicker {
+  -webkit-border-radius: $border-radius-base;
+  -moz-border-radius: $border-radius-base;
+  border-radius: $border-radius-base;
+}
+
+.daterangepicker td, .daterangepicker th {
+  -webkit-border-radius: $border-radius-base;
+  -moz-border-radius: $border-radius-base;
+  border-radius: $border-radius-base;
+}
+
+.daterangepicker td.in-range {
+  background: lighten($brand-secondary, 33%);
+  -webkit-border-radius: 0;
+  -moz-border-radius: 0;
+  border-radius: 0;
+}
+
+.daterangepicker td.start-date {
+  -webkit-border-radius: $border-radius-base 0 0 $border-radius-base;
+  -moz-border-radius: $border-radius-base 0 0 $border-radius-base;
+  border-radius: $border-radius-base 0 0 $border-radius-base;
+}
+
+.daterangepicker td.end-date {
+  -webkit-border-radius: 0 $border-radius-base $border-radius-base 0;
+  -moz-border-radius: 0 $border-radius-base $border-radius-base 0;
+  border-radius: 0 $border-radius-base $border-radius-base 0;
+}
+
+.daterangepicker td.start-date.end-date {
+  -webkit-border-radius: $border-radius-base;
+  -moz-border-radius: $border-radius-base;
+  border-radius: $border-radius-base;
+}
+
+.daterangepicker td.today.active, .daterangepicker td.active, .daterangepicker td.active:hover {
+  background-color: $brand-secondary;
+  border-color: $brand-secondary;
+}
+// scss-lint:enable all

data/app/assets/stylesheets/default_theme/navbar.scss

@@ -6,7 +6,7 @@
   .navbar-brand {
     background: url(image-path('logo.svg')) no-repeat $padding-base center;
     font-size: 16px;
-    line-height: ($navbar-height - 10px);
+    line-height: ($navbar-height - ($padding-small-vertical * 2));
     margin: 0;
     padding: $padding-small-vertical 0 $padding-small-vertical 50px;
 

data/app/assets/stylesheets/default_theme/toolbar.scss

@@ -11,27 +11,31 @@
   padding-top: $padding-base-vertical;
   margin: 0;
 
-  label {
-    font-weight: normal;
-    font-style: italic;
-    font-size: .9em;
-    margin-left: $padding-small-horizontal;
-
-    &:first-child {
-      margin-left: 0;
-    }
+  ul,
+  .pager {
+    margin-top: 0;
+    margin-bottom: 0;
   }
 
-  .btn-group,
-  .form-group,
-  [class*='col-'] > .btn,
-  [class*='col-'] > .btn:first-child {
-    margin-top: 0;
+  // toolbar elements with margin-bottom
+  // scss-lint:disable SelectorFormat
+  .btn,
+  .chosen-single,
+  .control-label,
+  .form-control,
+  .Select,
+  input,
+  label {
     margin-bottom: $padding-base-vertical;
   }
 
-  .btn,
+  .chosen-container .chosen-drop {
+    margin-top: -($padding-base-vertical + 1px);
+  }
+
+  // toolbar elements with margin-left
   .btn-group,
+  .btn,
   .chosen-single,
   .form-control,
   .form-group {
@@ -40,50 +44,70 @@
     &:first-child {
       margin-left: 0;
     }
+
+    > & {
+      margin-left: 0;
+    }
   }
 
-  .form-group .form-group {
-    margin: 0;
+  label {
+    font-weight: normal;
+    font-style: italic;
+    font-size: .9em;
+    margin-left: $padding-small-horizontal;
+
+    &:first-child {
+      margin-left: 0;
+    }
+
+    + .form-control,
+    + .form-group,
+    + .input-group,
+    + input,
+    + select {
+      margin-left: 0;
+    }
   }
 
-  // React components
+  // React Select component
   // scss-lint:disable SelectorFormat
   .Select {
     display: inline-block;
     vertical-align: middle;
     min-width: 200px;
-  }
 
-  // toolbar checkboxes appear as toggleable buttons
-  .ui-components-checkbox-list li {
-    margin-left: $padding-small;
-    float: left;
+    .Select-control,
+    .Select-placeholder,
+    .Select-input {
+      line-height: 31px;
+      height: 31px;
+    }
   }
 
-  .checkbox {
-    @extend .btn;
-    @extend .btn-sm;
-    @extend .btn-default;
+  .input-group .input-group-btn,
+  .input-group .input-group-addon {
+    @extend %toolbar-default-btn;
 
-    // scss-lint:disable QualifyingElement
-    input[type='checkbox'] {
-      position: absolute;
-      display: none;
-    }
-
-    label {
-      font-style: normal;
-      font-size: 1em;
+    &:first-child {
+      margin-left: 0;
+      border-radius: $border-radius-base 0 0 $border-radius-base;
     }
 
-    &.active {
-      @extend .btn.active;
+    &:last-child {
+      margin-left: 0;
+      border-radius: 0 $border-radius-base $border-radius-base 0;
     }
   }
 }
 
 .toolbar-default {
-  background-color: $gray-lighter;
+  background-color: $body-bg;
+  border-bottom: 1px solid darken($body-bg, 3%);
+
+  .toolbar-primary + & {
+    border: 1px solid darken($body-bg, 3%);
+    border-top: 0;
+  }
 }
 
 .toolbar-primary {
@@ -107,55 +131,69 @@
     }
   }
 
-  .btn {
+  %toolbar-default-btn {
     border-color: transparent;
 
-    &:active,
-    &.active,
-    &:focus,
-    &.focus,
     &:hover,
     &.hover,
     .open > &.dropdown-toggle {
       background-color: darken($brand-secondary, 5%);
       color: $white;
       border-color: darken($brand-secondary, 10%);
+
+      svg {
+        fill: $white;
+      }
     }
 
+    &:active,
+    &.active,
+    &:focus,
+    &.focus,
     &:active:focus,
     &:active.focus,
-    &:active:hover,
-    &:active.hover,
     &.active:focus,
-    &.active.focus {
+    &.active.focus,
+    &:active:hover,
+    &.active:hover {
       background-color: darken($brand-secondary, 10%);
       color: $white;
-      border-color: darken($brand-secondary, 10%);
+      border-color: transparent;
+
+      svg {
+        fill: $white;
+      }
     }
   }
 
+  .btn {
+    @extend %toolbar-default-btn;
+  }
+
   .btn-default {
     color: $white;
+
+    svg {
+      fill: $white;
+    }
   }
 
   .btn[disabled],
   .btn.disabled {
     background-color: transparent;
   }
-}
 
-.nav-tabs {
-  border-bottom-color: $body-bg;
+  // btn-groups from lists (extend li.active state to child .btn)
+  .btn-group li {
 
-  li {
-    margin-bottom: 0;
+    &.active > .btn {
+      @extend %toolbar-default-btn.active;
+    }
 
-    &.active a {
-      background-color: $white;
+    &.active > .btn:focus,
+    &.active > .btn.focus,
+    &.active > .btn:hover {
+      @extend %toolbar-default-btn.active.focus;
     }
   }
 }
-
-.row > .nav-tabs {
-  padding: 0 $padding-base;
-}