sigbit_admin_rails 0.0.4.2 → 0.0.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: b556abf2edbfb7c7834f11e9ad574b611b8cb998
-  data.tar.gz: 711e7dd5bb3df7f21cec29de64656ba9e520d86f
+  metadata.gz: d974c8e24196babeb7c5172f26a26277e9ea7ef2
+  data.tar.gz: d1471801c9df9dfecc5f74f8ba1a92748561e83a
 SHA512:
-  metadata.gz: b9eb12310b2bbabd0d3b88cb0b409b007eb5ea19ea883a52930d0bfd63bfb8850e30b99a91543882dc20edac0436114f314d2894b3aa30d7c355a4743ad37ef7
-  data.tar.gz: 07393ef1b47659fb6e9e48f3c82c2b094d2392485c46ce29fb3760f696277f2adb1426c60153928ed0b41f85918030aa4a08670c60545b1a660701cb9bd8237e
+  metadata.gz: 619206c4e03e1ba36b2dc0eea2c9bc114080a0cc6b9530afe2fca2a0a7ff24332b3abe77fb42144fde24d957c3928bed4d6d94fbce5ec98e18cc6ac9fb67ec98
+  data.tar.gz: 13c69a5f16febffb84f4d4b7e96e0f06319d8320e539242482d785367bbae77e9712ca3a285f3afac91535e83be41d35ec1e72a0630caf3c8e72d6e807335b78

data/assets/javascripts/sigbit-admin.js

@@ -1,13 +1,10 @@
 'use strict';
 
-//= require jquery.sortable.min
-//= require jquery.nestable
-
-; (function ($, window, document, undefined) {
+$(document).ready(function() {
   $('.inputfile').each(function () {
     var $input = $(this),
-    $label = $input.next('label'),
-    labelVal = $label.html();
+      $label = $input.next('label'),
+      labelVal = $label.html();
 
     $input.on('change', function (e) {
       var fileName = '';
@@ -31,11 +28,6 @@
 
 
 
-
-})(jQuery, window, document);
-
-
-$(function() {
   // Sidebar toggle
   $("#sidebar-toggle").click(function (e) {
     e.preventDefault();
@@ -43,14 +35,10 @@ $(function() {
   });
 
   // Enable Tooltips
-  $(function () {
-    $('[data-toggle="tooltip"]').tooltip()
-  })
+  $('[data-toggle="tooltip"]').tooltip()
 
   // Enable Popovers
-  $(function () {
-    $('[data-toggle="popover"]').popover()
-  })
+  $('[data-toggle="popover"]').popover()
 
   // Bootstrap button dropdown inside responsive table not visible because of scroll
   // http://stackoverflow.com/questions/26018756/bootstrap-button-drop-down-inside-responsive-table-not-visible-because-of-scroll
@@ -58,4 +46,3 @@ $(function() {
     .on('hide.bs.dropdown', '.table-responsive', function () { $(this).css("overflow", "auto"); });
 
 });
-

data/assets/stylesheets/components/_forms.scss

@@ -0,0 +1,10 @@
+.radio input[type="radio"],
+.radio-inline input[type="radio"],
+.checkbox input[type="checkbox"],
+.checkbox-inline input[type="checkbox"] {
+    margin-right: .5rem;
+}
+
+label {
+  margin-bottom: .3rem;
+}

data/assets/stylesheets/components/_header-navbar.scss

@@ -3,17 +3,13 @@
   padding: $header-navbar-padding;
   background: $header-navbar-bg;
   border-bottom: 1px solid $header-navbar-border-color;
-  -webkit-transform-style: preserve-3d;
-  -moz-transform-style: preserve-3d;
-  transform-style: preserve-3d;
   font-size: 0.9em;
+  color: $header-navbar-color;
+  @include transform-style(preserve-3d);
 
   // sidebar toggle
   #sidebar-toggle {
-    position: absolute;
-    top: 0;
-    bottom: -1px;
-    left: 0;
+    @include position(absolute, 0 null -1px 0);
     padding: 0 $spacer;
     border-radius: 0;
     outline: 0 !important;
@@ -21,9 +17,7 @@
 
   .navbar-brand {
     display: none;
-    position: absolute;
-    top: 50%;
-    left: 50%;
+    @include position(absolute, 50% null null 50%);
     @include transform(translate(-50%, -50%));
     width: $header-navbar-logotype-width;
     height: $header-navbar-logotype-height;
@@ -36,9 +30,7 @@
   }
 
 .btn-group {
-  position: absolute;
-  top: 0;
-  right: $spacer;
+  @include position(absolute, 0 $spacer null null);
   height: 100%;
 
   .btn {

data/assets/stylesheets/components/_sidebar.scss

@@ -63,6 +63,7 @@ body {
         display: block;
         text-decoration: none;
         color: $sidebar-nav-link-color;
+        @include transition(all .2s ease);
 
         &:hover {
             text-decoration: none;
@@ -79,13 +80,11 @@ body {
         }
 
         .fa-chevron-right {
-          position: absolute;
-          right: $spacer;
-          top: 50%;
+          @include position(absolute, 50% $spacer null null);
           @include transform(translateY(-50%) rotate(0deg));
+          display: inline-block;
           width: 10px;
           height: 10px;
-          display: inline-block;
           margin: 0;
           font-size: 0.8em;
           @include transition(all .2s ease);
@@ -100,6 +99,7 @@ body {
     }
     a.active {
       color: $sidebar-nav-link-color-active;
+      background: $sidebar-nav-link-bg-active;
     }
 
     ul.submenu {

data/assets/stylesheets/components/_toggle-button.scss

@@ -0,0 +1,122 @@
+
+$toggle-height:      2rem;
+$toggle-height-sm:   1.5rem;
+$toggle-height-lg:   2.5rem;
+
+.toggle { /* wrapper label */
+  position: relative;
+  display: block;
+  width: $toggle-height*2;
+  height: $toggle-height;
+  margin: 0;
+
+  input { display:none; }
+
+  .toggle-slider { /* The slider */
+    @include position(absolute, 0 0 0 0);
+    cursor: pointer;
+    background-color: $gray-lighter;
+    @include border-radius($toggle-height);
+    @include box-shadow(inset 0 1px 3px rgba(0,0,0,.12));
+
+    &:before {
+      @include position(absolute, null null 0.25rem 0.25rem);
+      content: "";
+      height: $toggle-height - 0.5rem;
+      width: $toggle-height - 0.5rem;
+      @include border-radius(50%);
+      background-color: white;
+    }
+  }
+
+
+  .toggle-text {
+    position: absolute;
+    display: inline-block;
+    line-height: $toggle-height;
+    font-size: 0.8em;
+    font-weight: $btn-font-weight;
+
+    &.on {
+      left: 11px;
+      color: white;
+      visibility: hidden;
+      opacity: 0;
+    }
+    &.off {
+      right: 11px;
+      color: $gray-light;
+      opacity: 1;
+    }
+  }
+
+
+  input:checked + .toggle-slider { /* Checked state */
+
+    &:before { @include transform(translateX($toggle-height)); }
+    .toggle-text.on  { visibility: visible; opacity: 1; }
+    .toggle-text.off { visibility: hidden; opacity: 0; }
+  }
+
+  input:focus + .toggle-slider { /* Focused state */
+    box-shadow: 0 0 1px $brand-success;
+  }
+
+
+  .toggle-slider,
+  .toggle-slider:before,
+  .toggle-text {
+    @include transition(all .2s ease-in-out);
+  }
+
+}
+
+.toggle-sm {
+  width: $toggle-height-sm*2;
+  height: $toggle-height-sm;
+
+  .toggle-slider { /* The slider */
+    @include border-radius($toggle-height-sm);
+
+    &:before {
+      height: $toggle-height-sm - 0.5rem;
+      width: $toggle-height-sm - 0.5rem;
+    }
+  }
+  .toggle-text { line-height: $toggle-height-sm; }
+  input:checked + .toggle-slider:before { @include transform(translateX($toggle-height-sm)); }
+
+}
+
+.toggle-lg {
+  width: $toggle-height-lg*2;
+  height: $toggle-height-lg;
+
+  .toggle-slider { /* The slider */
+    @include border-radius($toggle-height-lg);
+
+    &:before {
+      height: $toggle-height-lg - 0.5rem;
+      width: $toggle-height-lg - 0.5rem;
+    }
+  }
+  .toggle-text { line-height: $toggle-height-lg; }
+  input:checked + .toggle-slider:before { @include transform(translateX($toggle-height-lg)); }
+
+}
+
+.toggle-primary input:checked + .toggle-slider { /* Checked state */
+    background-color: $brand-primary;
+}
+.toggle-success input:checked + .toggle-slider { /* Checked state */
+    background-color: $brand-success;
+}
+.toggle-info input:checked + .toggle-slider { /* Checked state */
+    background-color: $brand-info;
+}
+.toggle-warning input:checked + .toggle-slider { /* Checked state */
+    background-color: $brand-warning;
+}
+.toggle-danger input:checked + .toggle-slider { /* Checked state */
+    background-color: $brand-danger;
+}

data/assets/stylesheets/components/btn-circle.scss

@@ -1,21 +1,17 @@
 .btn-circle {
     @include border-radius(50%); // Perfect circle
-    width: $btn-padding-x*3;
-    height: $btn-padding-x*3;
+    @include size($btn-padding-x*3);
 
     &.btn-sm {
-      width: $btn-padding-x*2.25;
-      height: $btn-padding-x*2.25;
+      @include size($btn-padding-x*2.25);
       font-size: $font-size-sm;
     }
     &.btn-lg {
-      width: $btn-padding-x*5;
-      height: $btn-padding-x*5;
+      @include size($btn-padding-x*5);
       font-size: $font-size-lg;
     }
     &.btn-xl {
-      width: $btn-padding-x*6.5;
-      height: $btn-padding-x*6.5;
+      @include size($btn-padding-x*6.5);
       font-size: $font-size-lg;
     }
 }

data/assets/stylesheets/components/card.scss

@@ -3,15 +3,12 @@
   margin-bottom: $spacer;
 
   .card-actions {
-    position: absolute;
-    top: $spacer/1.25;
-    right: $spacer/1.25;
+    @include position(absolute, $spacer/1.25 $spacer/1.25 null null);
     font-size: 0.9em;
   }
 
   .card-header .card-actions {
-    position: absolute;
-    top: 50%;
+    @include position(absolute, 50% null null null);
     @include transform(translateY(-50%));
   }
 

data/assets/stylesheets/components/file-input.scss

@@ -1,6 +1,5 @@
 .js .inputfile {
-    width: 0.1px;
-    height: 0.1px;
+    @include size(0.1px);
     opacity: 0;
     overflow: hidden;
     position: absolute;
@@ -11,10 +10,12 @@
 .inputfile + label {
     white-space: nowrap;
     cursor: pointer;
-    display: inline-block;
-    overflow: hidden;
-    margin: 0 0 -5px 0;
-    @include border-radius($border-radius);
+    display: block;
+    margin: 0;
+}
+
+.inputfile + label * {
+  pointer-events: none !important;
 }
 
 

data/assets/stylesheets/components/nestable.scss

@@ -38,12 +38,10 @@
   width: 32px;
   margin: 0 $spacer/10 0 $spacer*1.5;
   padding: $spacer/2 0 $spacer/2 $spacer/2;
-  text-indent: -9999px;
-  white-space: nowrap;
-  overflow: hidden;
   border: 0;
   z-index: 99;
   background: transparent;
+  @include hide-text;
 }
 .nestable-item > button:before {
   display: block;
@@ -93,9 +91,7 @@
 // Drag handle (main styling is done in sortable.scss)
 
 .nestable-item .fa.drag-handle {
-  position: absolute;
-  top: $spacer/1.3333;
-  left: $spacer/1.3333;
+  @include position(absolute, $spacer/1.3333 null null $spacer/1.3333);
 }
 
 

data/assets/stylesheets/components/page-header.scss

@@ -1,10 +1,7 @@
 
 .page-header {
-  // background: rgba(red,0.1);
   padding-bottom: $spacer;
-  -webkit-transform-style: preserve-3d;
-  -moz-transform-style: preserve-3d;
-  transform-style: preserve-3d;
+  @include transform-style(preserve-3d);
 
   // Override bootstrap breadcrumb CSS
   .breadcrumb {
@@ -22,9 +19,13 @@
   }
 
   .page-header-actions {
-    position: absolute;
-    right: $spacer/1.5;
-    top: 50%;
-    @include transform(translateY(-50%));
+    margin-top: $spacer;
+
+    @include media-breakpoint-up(lg) {
+      @include position(absolute, 50% $spacer/1.5 null null);
+      @include transform(translateY(-50%));
+      margin-top: 0;
+    }
   }
+
 }

data/assets/stylesheets/components/small-action-btns.scss

@@ -35,7 +35,5 @@ table .small-action-btn-group {
 }
 
 .nestable .small-action-btn-group {
-  position: absolute;
-  top: $spacer/2;
-  right: $spacer/2;
+  @include position(absolute, $spacer/2 $spacer/2 null null);
 }

data/assets/stylesheets/sigbit-admin.scss

@@ -1,6 +1,7 @@
 @import 'bourbon';
 @import 'variables';
 @import "bootstrap";
+
 @import 'mixins/nestable';
 
 @import 'components/header-navbar';
@@ -13,3 +14,5 @@
 @import 'components/file-input';
 @import 'components/nestable';
 @import 'components/sortable';
+@import 'components/toggle-button';
+@import 'components/forms';

data/assets/stylesheets/style.scss

@@ -14,3 +14,5 @@
 @import 'components/file-input';
 @import 'components/nestable';
 @import 'components/sortable';
+@import 'components/toggle-button';
+@import 'components/forms';

data/assets/stylesheets/variables.scss

@@ -699,6 +699,7 @@ $sidebar-nav-link-color:            rgba(white,0.6) !default;
 $sidebar-nav-link-color-hover:      white !default;
 $sidebar-nav-link-bg-hover:         lighten($sidebar-bg,5%) !default;
 $sidebar-nav-link-color-active:     white !default;
+$sidebar-nav-link-bg-active:        transparent !default;
 
 $sidebar-nav-submenu-bg:            darken($sidebar-bg,6%) !default;
 $sidebar-nav-submenu-link-bg-hover: darken($sidebar-bg,3%) !default;
@@ -709,7 +710,8 @@ $sidebar-nav-submenu-link-bg-hover: darken($sidebar-bg,3%) !default;
 $header-navbar-height:          60px !default;
 $header-navbar-padding:         $spacer/2 $spacer $spacer/2 0 !default;
 $header-navbar-bg:              white !default;
-$header-navbar-border-color:    darken($gray-lighter,10%) !default; // border-color ist för bottom-border
+$header-navbar-color:           $gray-dark !default;
+$header-navbar-border-color:    darken($gray-lighter,10%) !default;
 
 
 // Action toolbar

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: sigbit_admin_rails
 version: !ruby/object:Gem::Version
-  version: 0.0.4.2
+  version: 0.0.5
 platform: ruby
 authors:
 - Ante Wall
@@ -50,8 +50,10 @@ files:
 - assets/javascripts/jquery.nestable.js
 - assets/javascripts/jquery.sortable.min.js
 - assets/javascripts/sigbit-admin.js
+- assets/stylesheets/components/_forms.scss
 - assets/stylesheets/components/_header-navbar.scss
 - assets/stylesheets/components/_sidebar.scss
+- assets/stylesheets/components/_toggle-button.scss
 - assets/stylesheets/components/action-toolbar.scss
 - assets/stylesheets/components/btn-circle.scss
 - assets/stylesheets/components/card.scss
@@ -88,7 +90,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.4.6
+rubygems_version: 2.5.1
 signing_key: 
 specification_version: 4
 summary: Significant Bit Admin template for Rails applications