angular-float-box 0.1.2 → 0.1.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 6cdd595b7b7184980c677ef98f60995a48398c74
-  data.tar.gz: 29d0cb42e1e568860d7c7311af6634747ba051b6
+  metadata.gz: 1b0f200a8dfb1d00e4c6ece4751b4da7e8d73cfe
+  data.tar.gz: ad5ddd59c7f9fab1e3ea41e77a655f6d9af3fedc
 SHA512:
-  metadata.gz: 3441a046905176306da58f9e175e601121c19b1f6905d15f75002da3ff4e7479fd3abb4d590abe403550524493186eb453a98b65437d40be3e0dd73f0d2efb87
-  data.tar.gz: 0ca5193ecb7ae3cebc9be7b6973ce33ffa50539b6d7212e8b4ee9944d5af786acacfcf15a8a9102fc32e120f08047051da384214903e31e6aa59036415908bd7
+  metadata.gz: e7edd3ecbfb7a01ad3efac00d6d20ead532067ce2c9fc01dd5a3a8279b94c4058e4573f82d4f7a6be26a8d652363bdd8f6430fa6de1662214eb99d1d2a26d4fe
+  data.tar.gz: 03896ccdcb18c2157232af081abbc35d46009f6bf2e0fe39188b9089fb79b8d4fc1f55b0fe109d195c999fef72035342d3858d79c095754a7a40ba65da90b9fe

data/README.md

@@ -1,8 +1,8 @@
 # Angular Float Box
 
-Welcome to your new gem! In this directory, you'll find the files you need to be able to package up your Ruby library into a gem. Put your Ruby code in the file `lib/angular-float-box`. To experiment with that code, run `bin/console` for an interactive prompt.
+[Demo](http://planoadmin-staging.planomatic.com/#/demos/float_box)
 
-TODO: Delete this and the text above, and describe your gem
+Angular Float Box is an framework for building a mobile friendly interface for creating, reading and updating records.  To use this gem properly you will need AngularJS and Bootstrap 3
 
 ## Installation
 

data/lib/angular-float-box/version.rb

@@ -1,3 +1,3 @@
 module AngularFloatBox
-  VERSION = "0.1.2"
+  VERSION = "0.1.3"
 end

data/vendor/assets/javascripts/angular-float-box.js

@@ -6,79 +6,17 @@
 */
 
 (function (window, angular, undefined) {
-  /*jshint globalstrict:true*/
-  /*global angular:false*/
   'use strict';
-
   angular.module('angular-float-box', [])
-
-  .service('floatBox', ['$timeout',
-  function($timeout) {
-
-    var direction = 'right'
+  .service('floatBox', ['scroll', 'draggable',
+  function(scroll, draggable) {
 
     // Call floatBox.initializes in the controller to create listeners for scrolling and dragging float-box
-    this.initialize = function($scope, slide_direction) {
-      initialize_scroll($scope)
-      initialize_draggable($scope)
-      direction = slide_direction;
+    this.initialize = function($scope) {
+      scroll.initialize();
+      draggable.initialize($scope);
     }
 
-    // Initializes float-box's scroll listener.
-    function initialize_scroll($scope) {
-      // How many pixels needed for scroll to shrink.
-      var shrink_treshold = 10;
-      // Variable needed to check direction of scroll.
-      var last_scroll_top = 0;
-      // Boolean to mark if a shrink is still in process or not.
-      var animation_complete = true;
-      // Setup float-box scroll listener.
-      $('#float-box-container').scroll(function(event){
-        var scroll_top = $(this).scrollTop();
-        var is_down_scroll = (scroll_top > last_scroll_top)
-        // Check direction of scroll.
-        if (scroll_top > last_scroll_top){
-          // Down scroll
-          if (this.scrollTop > shrink_treshold) {
-            // Within threshold for shrinking.
-            if (animation_complete && !$('.float-box-head').hasClass("smaller")) {
-              $('.float-box-head').addClass("smaller");
-              $('.float-box-space').addClass("smaller");
-              animation_complete = false
-              setTimeout(function(){ animation_complete = true }, 500);
-            }
-          }
-        } else {
-          // Up scroll
-          if (this.scrollTop <= shrink_treshold) {
-            // Outside of threshold for shrinking.
-            if (animation_complete) {
-              $('.float-box-head').removeClass("smaller");
-              $('.float-box-space').removeClass("smaller");
-              animation_complete = false
-              setTimeout(function(){ animation_complete = true; }, 500);
-            }
-          }
-        }
-        last_scroll_top = scroll_top;
-      });
-    };
-
-    // Initializes float-box's positionable listener.
-    function initialize_draggable($scope) {
-      $scope.draggable_on = function() {
-        $('#float-box').draggable('enable');
-        $scope.draggable_disabled = false;
-      }
-      $scope.draggable_off = function() {
-        $('#float-box').draggable('disable');
-        $('#float-box').css('top', '').css('left', '').css('right', '').css('bottom', '');
-        $scope.draggable_disabled = true;
-      }
-      $scope.draggable_disabled = true;
-      $('#float-box').draggable().draggable('disable');
-    };
-
     // Show float-box
     this.show = function() {
       $( "#float-box" ).show()
@@ -87,43 +25,40 @@
     this.hide = function() {
       $( "#float-box" ).hide()
     }
-    // Show float-box via slide in from the direction specified.
-    this.slide_in = function(direction) {
-      $( "#float-box" ).show( "drop", {direction: direction})
+    // Show float-box via fade.
+    this.fade_in = function() {
+      $( "#float-box" ).show( "fade")
     }
-    // Show float-box via slide in from the direction specified.
-    function slide_in(slide_direction) {
-      direction = slide_direction || direction
-      $( "#float-box" ).show( "drop", {direction: direction})
+    // Show float-box via fade.
+    function fade_in() {
+      $( "#float-box" ).show( "fade")
     }
-    this.slide_in = slide_in;
-    // Hide float-box via slide in from the direction specified.
-    this.slide_out = function(direction) {
+    this.fade_in = fade_in;
+    // Hide float-box via fade.
+    this.fade_out = function() {
       if ($(window).width() < 768) {
-        $( "#float-box" ).hide( "drop", {direction: direction})
+        $( "#float-box" ).hide( "fade")
       };
     }
 
     // Display float-box-create tab.
     this.create = function() {
       // Show float-box-create-tab if not already shown.
-      $('#float-box-create-tab').tab('show');
+      $('float-box-create-tab a').tab('show');
       // Reset defaults and show if needed.
       new_float_box_instance($('float-box-create'));
     }
-
     // Display float-box-read tab.
     this.read = function() {
       // Show float-box-read-tab if not already shown.
-      $('#float-box-read-tab').tab('show');
+      $('float-box-read-tab a').tab('show');
       // Reset defaults and show if needed.
       new_float_box_instance($('float-box-read'));
     }
-
     // Display float-box-update tab.
     this.update = function() {
       // Show float-box-update-tab if not already shown.
-      $('#float-box-update-tab').tab('show')
+      $('float-box-update-tab a').tab('show')
       // Reset defaults and show if needed.
       new_float_box_instance($('float-box-update'))
     }
@@ -131,46 +66,141 @@
     // function refresh_float_box($action_tab) {
     function new_float_box_instance($action_tab) {
       // Show float-box if needed.
-      slide_in(direction)
+      fade_in()
       // Show default tab.
       $action_tab.find('.float-box-default-tab').tab('show')
       // Focus on default input.
       $action_tab.find('.float-box-default-input').focus()
     }
   }])
-
-  .directive('floatBoxTitle', ['$window', function ( $window ) {
+  .service('draggable', [function() {
+    this.initialize = function($scope) {
+      $scope.draggable_on = function() {
+        $('#float-box').draggable('enable');
+        $scope.draggable_disabled = false;
+      }
+      $scope.draggable_off = function() {
+        $('#float-box').draggable('disable');
+        $('#float-box').css('top', '').css('left', '').css('right', '').css('bottom', '');
+        $scope.draggable_disabled = true;
+      }
+      $scope.draggable_disabled = true;
+      $('#float-box').draggable().draggable('disable');
+    }
+  }])
+  .service('scroll', ['$timeout', 'title',
+  function($timeout, title) {
+    this.initialize = function() {
+      // How many pixels needed for scroll to shrink.
+      var shrink_treshold = 10;
+      // Variable needed to check direction of scroll.
+      var last_scroll_top = 0;
+      // Boolean to mark if a shrink is still in process or not.
+      var animation_complete = true;
+      // Setup float-box scroll listener.
+      $('.float-box-container').scroll(function(event){
+        // Distance from top of float-box-container
+        var scroll_top = $(this).scrollTop();
+        // Check direction of scroll.
+        if (scroll_top > last_scroll_top){
+          // Down scroll
+          if (this.scrollTop > shrink_treshold) {
+            // Within threshold for shrinking.
+            if (animation_complete && !$('.float-box-container').hasClass("smaller")) {
+              $('.float-box-container').addClass("smaller");
+              animation_complete = false
+              $timeout(function(){ animation_complete = true }, 500);
+            }
+          }
+        } else {
+          // Up scroll
+          if (this.scrollTop <= shrink_treshold) {
+            // Outside of threshold for shrinking.
+            if (animation_complete) {
+              $('.float-box-container').removeClass("smaller");
+              // Adjust title when smaller class is removed.
+              title.adjust($('float-box-title:visible'))
+              animation_complete = false
+              $timeout(function(){ animation_complete = true; }, 500);
+            }
+          }
+        }
+        last_scroll_top = scroll_top;
+      });
+    };
+  }])
+  .service('title', [function() {
+    var max_font_size = 40;
+    this.max_font_size = max_font_size;
+    // Adjust font-size of title based on size of text.
+    this.adjust = function($title) {
+      var $text = $title.find('.float-box-title-text');
+      // Add notransition so no transition animation will get in the way of evaluating the proper font-size of title
+      $text.addClass('notransition')
+      // Initialize font-size of $text.
+      var font_size = max_font_size;
+      // Update font-size of $text.
+      $text.css('font-size', font_size+'px');
+      // Lower font-size until $text is thinner than $title or font-size is 20.
+      while (($title.width() < $text.width()) && font_size != 20) {
+        // Lower font-size by 5.
+        font_size -= 5;
+        // Update font-size of $text.
+        $text.css('font-size', font_size+'px');
+      }
+      // Turn on css transitions now that font-size is updated.
+      $text.removeClass('notransition')
+    }
+  }])
+  // Float Box Title.
+  .directive('floatBoxTitle', ['title', function (title ) {
     "use strict";
     return {
       restrict: 'E',
       template: '<div class="float-box-title-text">{{text}}</div>',
-      scope: {text: '='},
+      scope: {
+        text: '='
+      },
+      link: function($scope, $title, iAttrs) {
+        // Watch for float-box-title element appearing.
+        $scope.$watch(function() { return angular.element($title).is(':visible') }, function() {
+          title.adjust($title) // Adjust font-size of title.
+        });
+        // Watch for changes in float-box-title text.
+        $scope.$watch('text', function(a,b,c) {
+          title.adjust($title) // Adjust font-size of title.
+        })
+      }
+    }
+  }])
+  // Float Box Limit.
+  .directive('floatBoxLimit', [function () {
+    "use strict";
+    return {
+      restrict: 'E',
+      template: '{{display}}',
+      scope: {
+        text: '=',
+        limit: '='
+      },
       link: function($scope, $title, iAttrs) {
         $scope.$watch('text', function(a,b,c) {
-          var $text = $title.find('.float-box-title-text');
-          // Turn off css transitions so while loop doesn't get stuck.
-          $text.addClass('notransition')
-          // Initialize font-size of title.
-          var font_size = 40
-          $text.css('font-size', font_size+'px');
-          // Lower font-size until $text is thinner than $title or font-size is 20.
-          while (($title.width() < $text.width()) && font_size != 20) {
-            // Lower font-size by 5 and update font-size of $text.
-            font_size -= 5
-            $text.css('font-size', font_size+'px');
+          // Duplicate the text that will be limited as the variable display.
+          $scope.display = angular.copy($scope.text)
+          // Check if the limited text is longer than the limit.
+          if ($scope.text && $scope.text.length >= $scope.limit) {
+            // If the limited text is longer than the limit, truncate the display.
+            $scope.display = $scope.display.substring(0,$scope.limit - 1) + '..'
           }
-          // Turn on css transitions now that font-size is updated.
-          $text.removeClass('notransition')
         })
       }
     }
   }])
-
-  .directive('floatBoxSearchBar', ['$window', function ( $window ) {
+  // Float Box Search Bar.
+  .directive('floatBoxSearchBar', [function () {
     "use strict";
     return {
       restrict: 'E',
-      template: '<div class="float-box-title-text">{{text}}</div>',
       template:
       '<span class="input-group-btn">' +
       '<button class="btn btn-info btn-sm" type="submit">' +
@@ -180,6 +210,16 @@
       '<input type="text" class="form-control input-sm" placeholder="{{placeholder}}" ng-model="model" autofocus>',
       scope: {model: '=', placeholder: '='}
     }
+  }])
+  // Float Box Tabs
+  .directive('floatBoxCreateTab', [function () {
+    return { template: '<a data-toggle="tab" data-target="float-box-create"></a>' };
+  }])
+  .directive('floatBoxReadTab', [function () {
+    return { template: '<a data-toggle="tab" data-target="float-box-read"></a>' };
+  }])
+  .directive('floatBoxUpdateTab', [function () {
+    return { template: '<a data-toggle="tab" data-target="float-box-update"></a>' };
   }]);
 
 })(window, window.angular);

data/vendor/assets/javascripts/angular-float-box.min.js

@@ -1 +1 @@
-!function(t,o,a){"use strict";o.module("angular-float-box",[]).service("floatBox",["$timeout",function(o){function a(t){var o=0,a=!0;$("#float-box-container").scroll(function(t){var e=$(this).scrollTop();e>o?this.scrollTop>10&&a&&!$(".float-box-head").hasClass("smaller")&&($(".float-box-head").addClass("smaller"),$(".float-box-space").addClass("smaller"),a=!1,setTimeout(function(){a=!0},500)):this.scrollTop<=10&&a&&($(".float-box-head").removeClass("smaller"),$(".float-box-space").removeClass("smaller"),a=!1,setTimeout(function(){a=!0},500)),o=e})}function e(t){t.draggable_on=function(){$("#float-box").draggable("enable"),t.draggable_disabled=!1},t.draggable_off=function(){$("#float-box").draggable("disable"),$("#float-box").css("top","").css("left","").css("right","").css("bottom",""),t.draggable_disabled=!0},t.draggable_disabled=!0,$("#float-box").draggable().draggable("disable")}function i(t){s=t||s,$("#float-box").show("drop",{direction:s})}function l(t){i(s),t.find(".float-box-default-tab").tab("show"),t.find(".float-box-default-input").focus()}var s="right";this.initialize=function(t,o){a(t),e(t),s=o},this.show=function(){$("#float-box").show()},this.hide=function(){$("#float-box").hide()},this.slide_in=function(t){$("#float-box").show("drop",{direction:t})},this.slide_in=i,this.slide_out=function(o){$(t).width()<768&&$("#float-box").hide("drop",{direction:o})},this.create=function(){$("#float-box-create-tab").tab("show"),l($("float-box-create"))},this.read=function(){$("#float-box-read-tab").tab("show"),l($("float-box-read"))},this.update=function(){$("#float-box-update-tab").tab("show"),l($("float-box-update"))}}]).directive("floatBoxTitle",["$window",function(t){return{restrict:"E",template:'<div class="float-box-title-text">{{text}}</div>',scope:{text:"="},link:function(t,o,a){t.$watch("text",function(t,a,e){var i=o.find(".float-box-title-text");i.addClass("notransition");var l=40;for(i.css("font-size",l+"px");o.width()<i.width()&&20!=l;)l-=5,i.css("font-size",l+"px");i.removeClass("notransition")})}}}]).directive("floatBoxSearchBar",["$window",function(t){return{restrict:"E",template:'<div class="float-box-title-text">{{text}}</div>',template:'<span class="input-group-btn"><button class="btn btn-info btn-sm" type="submit"><i type="text" class="fa fa-search"></i></button></span><input type="text" class="form-control input-sm" placeholder="{{placeholder}}" ng-model="model" autofocus>',scope:{model:"=",placeholder:"="}}}])}(window,window.angular);
+!function(t,a,o){"use strict";a.module("angular-float-box",[]).service("floatBox",["scroll","draggable",function(a,o){function e(){$("#float-box").show("fade")}function i(t){e(),t.find(".float-box-default-tab").tab("show"),t.find(".float-box-default-input").focus()}this.initialize=function(t){a.initialize(),o.initialize(t)},this.show=function(){$("#float-box").show()},this.hide=function(){$("#float-box").hide()},this.fade_in=function(){$("#float-box").show("fade")},this.fade_in=e,this.fade_out=function(){$(t).width()<768&&$("#float-box").hide("fade")},this.create=function(){$("float-box-create-tab a").tab("show"),i($("float-box-create"))},this.read=function(){$("float-box-read-tab a").tab("show"),i($("float-box-read"))},this.update=function(){$("float-box-update-tab a").tab("show"),i($("float-box-update"))}}]).service("draggable",[function(){this.initialize=function(t){t.draggable_on=function(){$("#float-box").draggable("enable"),t.draggable_disabled=!1},t.draggable_off=function(){$("#float-box").draggable("disable"),$("#float-box").css("top","").css("left","").css("right","").css("bottom",""),t.draggable_disabled=!0},t.draggable_disabled=!0,$("#float-box").draggable().draggable("disable")}}]).service("scroll",["$timeout","title",function(t,a){this.initialize=function(){var o=0,e=!0;$(".float-box-container").scroll(function(i){var l=$(this).scrollTop();l>o?this.scrollTop>10&&e&&!$(".float-box-container").hasClass("smaller")&&($(".float-box-container").addClass("smaller"),e=!1,t(function(){e=!0},500)):this.scrollTop<=10&&e&&($(".float-box-container").removeClass("smaller"),a.adjust($("float-box-title:visible")),e=!1,t(function(){e=!0},500)),o=l})}}]).service("title",[function(){this.max_font_size=40,this.adjust=function(t){var a=t.find(".float-box-title-text");a.addClass("notransition");var o=40;for(a.css("font-size",o+"px");t.width()<a.width()&&20!=o;)o-=5,a.css("font-size",o+"px");a.removeClass("notransition")}}]).directive("floatBoxTitle",["title",function(t){return{restrict:"E",template:'<div class="float-box-title-text">{{text}}</div>',scope:{text:"="},link:function(o,e,i){o.$watch(function(){return a.element(e).is(":visible")},function(){t.adjust(e)}),o.$watch("text",function(a,o,i){t.adjust(e)})}}}]).directive("floatBoxLimit",[function(){return{restrict:"E",template:"{{display}}",scope:{text:"=",limit:"="},link:function(t,o,e){t.$watch("text",function(o,e,i){t.display=a.copy(t.text),t.text&&t.text.length>=t.limit&&(t.display=t.display.substring(0,t.limit-1)+"..")})}}}]).directive("floatBoxSearchBar",[function(){return{restrict:"E",template:'<span class="input-group-btn"><button class="btn btn-info btn-sm" type="submit"><i type="text" class="fa fa-search"></i></button></span><input type="text" class="form-control input-sm" placeholder="{{placeholder}}" ng-model="model" autofocus>',scope:{model:"=",placeholder:"="}}}]).directive("floatBoxCreateTab",[function(){return{template:'<a data-toggle="tab" data-target="float-box-create"></a>'}}]).directive("floatBoxReadTab",[function(){return{template:'<a data-toggle="tab" data-target="float-box-read"></a>'}}]).directive("floatBoxUpdateTab",[function(){return{template:'<a data-toggle="tab" data-target="float-box-update"></a>'}}])}(window,window.angular);

data/vendor/assets/stylesheets/angular-float-box.css.scss

@@ -28,10 +28,8 @@
 
 // == float-box ================================================
 #float-box {
-
   overflow-y: scroll;
   overflow-x: hidden;
-
   // Basic style
   z-index: 10;
   margin-top: 30px;
@@ -49,12 +47,17 @@
   }
   // Mobile Sizes - Once in mobile, float-box should fit the whole screen.
   @media (max-width:767px) {
-    // margin-top: -5px;
-    margin-top: -20px;
+    margin-top: 0;
     width: 100% !important; // Once in mobile, float-box should fit the whole screen.
-    display: none; // Start hidden, if there is a focused record the controller will show the float-box.
     top: 0; // Position mobile-float-box to top of screen.  Height is set in the float-box-container.
     right: 0; // Position mobile-float-box to right of screen to overwrite the float-box 30px margin.
+    border-radius: 0; // Remove border radius so background isn't showing on mobile.
+  }
+}
+#float-box.float-box-init-hidden-mobile {
+  // Mobile Sizes - Once in mobile, float-box should fit the whole screen.
+  @media (max-width:767px) {
+    display: none; // Start hidden, if there is a focused record the controller will show the float-box.
   }
 }
 
@@ -76,6 +79,9 @@
   cursor: pointer;
   cursor: -webkit-grab;
   cursor: -moz-grab;
+  @media (max-width:767px) {
+    display: none; // Hide positioner if on mobile.
+  }
 }
 // Positioner.active | Styling
 #float-box #float-box-positioner:active {
@@ -101,39 +107,37 @@
 }
 
 // ==== float-box-positioner  ==============================
-#float-box #float-box-container {
+.float-box-container {
   overflow-y: scroll;
   overflow-x: hidden;
 }
 
 // ==== float-box-head  ==============================
-#float-box .float-box-head {
+.float-box-container .float-box-head {
   @include float-box-fixed;
   left: 0;
   width: 100%;
-  padding-top: 10px;
   // On Mobile, the top position needs to be 0 to show the
   @media (max-width:767px) { top: 0; }
 }
 
 // ====== float-box-links  ======
-#float-box .float-box-head .float-box-links {
+.float-box-container .float-box-head .float-box-links {
   width: 100%;
-  padding: 0 10px;
+  padding: 6px 15px;
   font-size: 20px;
-  display: inline-block;
+  height: 40px;
+
   a { text-decoration: none; }
 }
-// float-box-grey-link
-#float-box .float-box-head .float-box-links .float-box-grey-link {
+// ====== float-box-links  ======
+.float-box-container .float-box-head .float-box-links .float-box-grey-link {
   color: grey;
   cursor: default;
 }
-// float-box-grey-link:hover
-#float-box .float-box-head .float-box-links .float-box-grey-link:hover {
-}
+
 // ====== float-box-image  ======
-#float-box .float-box-head .float-box-image {
+.float-box-container .float-box-head .float-box-image {
   text-align: center;
   img{
     @include transition(.5s);
@@ -142,35 +146,113 @@
   }
 }
 // condensed
-#float-box .float-box-head.smaller .float-box-image {
+.float-box-container.smaller .float-box-head .float-box-image {
   img{
     width: 30px;
     height: 30px;
   }
 }
+// ====== float-box-image  ======
+.float-box-container .float-box-head .float-box-images {
+  text-align: left;
+  img{
+    @include transition(.5s);
+    height: 55px;
+  }
+}
+// condensed
+.float-box-container.smaller .float-box-head .float-box-images {
+  img{
+    height: 45px;
+  }
+}
 
-// ====== float-box-title  ======
-#float-box .float-box-head float-box-title {
+// ====== float-box-image  ======
+.float-box-container .float-box-head .float-box-image-and-title {
+  @include transition(.5s);
+  height: 75px;
+  display: block;
+  font-size: 25px;
+  text-align: left;
+  line-height: 55px;
+  padding: 10px 15px;
+  font-size: 35px;
+  img{
+    @include transition(.5s);
+    height: 55px;
+  }
+}
+// condensed
+.float-box-container.smaller .float-box-head .float-box-image-and-title {
+  height: 60px;
+  font-size: 20px;
+  line-height: 40px;
+  img{
+    height: 40px;
+  }
+}
+.float-box-container .float-box-image-and-title-space{
+  @include transition(.5s);
+  height: 75px;
+}
+.float-box-container.smaller .float-box-image-and-title-space{
+  height: 60px;
+}
+.float-box-container .float-box-image-space{
+  @include transition(.5s);
+  height: 80px; // The height is set to one line of 40px font-size, so the float-box-title doesn't change height.
+}
+.float-box-container.smaller .float-box-image-space{
+  height: 30px;
+}
+.float-box-container .float-box-title-space{
   @include transition(.5s);
   height: 57px; // The height is set to one line of 40px font-size, so the float-box-title doesn't change height.
+}
+.float-box-container.smaller .float-box-title-space{
+  height: 28px;
+}
+.float-box-container .float-box-actions-space{
+  @include transition(.5s);
+  height: 65px; // The height is set to one line of 40px font-size, so the float-box-title doesn't change height.
+}
+.float-box-container.smaller .float-box-actions-space{
+  // height: 58px;
+  height: 50px;
+}
+.float-box-container .float-box-links-space{
+  @include transition(.5s);
+  height: 40px;
+  // height: 39px;
+}
+.float-box-container .float-box-tabs-space{
+  @include transition(.5s);
+  height: 39px;
+}
+
+// ====== float-box-title  ======
+.float-box-container .float-box-head float-box-title {
+  // We don't have transitions here because when smaller class is removed because we need to evaluate the size of the full font title.
   display: block;
   text-align: center;
+  height: 57px;
 }
-#float-box .float-box-head float-box-title .float-box-title-text {
-  @include transition(.5s);
-  display: inline;
+.float-box-container .float-box-head float-box-title .float-box-title-text {
+  // We don't have transitions here because when smaller class is removed because we need to evaluate the size of the full font title.
   white-space: nowrap;
+  display: inline-block;
 }
 // condensed
-#float-box .float-box-head.smaller float-box-title {
+.float-box-container.smaller .float-box-head float-box-title {
   @include transition(.5s);
   height: 28px; // Adjust height of float-box-title when in small.
 }
-#float-box .float-box-head.smaller float-box-title .float-box-title-text {
-  font-size: 20px !important;
+.float-box-container.smaller .float-box-head float-box-title .float-box-title-text {
+  @include transition(.5s);
+  font-size: 20px !important; // THis is important or
 }
 // Transitions need to be turned off when adjusting font-size
-#float-box .float-box-head float-box-title .notransition {
+.float-box-container .float-box-head float-box-title .notransition {
   -webkit-transition: none !important;
   -moz-transition: none !important;
   -o-transition: none !important;
@@ -178,11 +260,17 @@
 }
 
 // ====== float-box-actions  ======
-#float-box .float-box-head .float-box-actions {
+.float-box-container .float-box-head .float-box-actions {
   @include float-box-row;
+  font-size: 12px;
+  padding: 4px 10px;
+}
+.float-box-container.smaller .float-box-head .float-box-actions{
+  font-size: 10px;
+  padding: 3px 10px;
 }
 
-#float-box .float-box-head .float-box-actions .btn{
+.float-box-container .float-box-head .float-box-actions .btn{
   @include transition(.5s);
   width: 40px;
   height: 40px;
@@ -192,23 +280,19 @@
   border-radius: 25px;
 }
 
-#float-box .float-box-head .float-box-actions p{
+.float-box-container .float-box-head .float-box-actions p{
   @include transition(.5s);
 }
 // condensed
-#float-box .float-box-head.smaller .float-box-actions .btn{
+.float-box-container.smaller .float-box-head .float-box-actions .btn{
   width: 30px;
   height: 30px;
   padding: 4px 8px;
   font-size: 12px;
 }
-#float-box .float-box-head.smaller .float-box-actions p{
-  font-size: 10px;
-}
 
-#float-box .float-box-head .float-box-actions .float-box-actions-container {
+.float-box-container .float-box-head .float-box-actions .float-box-actions-container {
   margin: 0;
-  padding: 0;
   list-style: none;
   display: flex;
   display: -moz-box;
@@ -219,102 +303,107 @@
   justify-content: space-around;
   justify-content: center;
 }
-#float-box .float-box-head .float-box-actions .float-box-actions-container .float-box-action{
+.float-box-container .float-box-head .float-box-actions .float-box-actions-container .float-box-action{
   text-align: center;
-  padding: 2px 10px
+  padding: 0 10px
 }
-#float-box .float-box-head .float-box-actions .float-box-actions-container .float-box-action a{
+.float-box-container .float-box-head .float-box-actions .float-box-actions-container .float-box-action a{
   text-decoration: none;
 }
 
 // ====== float-box-tabs  ======
-#float-box .float-box-head .float-box-tabs {
+.float-box-container .float-box-tabs {
+  @include float-box-row;
   font-size: 12px;
   padding: 0 15px;
+
+  a {
+    padding: 10px 10px;
+  }
 }
-f
+
 // ====== Space for float-box-head  ======
-#float-box .float-box-head-space {
+.float-box-container .float-box-head-space {
   @include transition(.5s);
 }
 // Float box head space.  This is needed because the head is fixed and there are elements under the head.
-#float-box float-box-read .float-box-head-space{
+.float-box-container float-box-read .float-box-head-space{
   @include transition(.5s);
-  // height: 275px;
   height: 290px;
   @media (min-width:767px) { height: 293px; } // Non Mobile Sizes - Once in mobile, float-box should fit the whole screen.
 }
 // condensed
-#float-box float-box-read .float-box-head-space.smaller{
-  // height: 180px;
+.float-box-container.smaller float-box-read .float-box-head-space{
   height: 195px;
   @media (min-width:767px) { height: 198px; } // Non Mobile Sizes - Once in mobile, float-box should fit the whole screen.
 }
 // Float box head space.  This is needed because the head is fixed and there are elements under the head.
-#float-box float-box-create .float-box-head-space{
+.float-box-container float-box-create .float-box-head-space{
   @include transition(.5s);
   height: 170px;
 }
 // condensed
-#float-box float-box-create .float-box-head-space.smaller{
+.float-box-container.smaller float-box-create .float-box-head-space{
   height: 130px;
 }
 // Float box head space.  This is needed because the head is fixed and there are elements under the head.
-#float-box float-box-update .float-box-head-space{
+.float-box-container float-box-update .float-box-head-space{
   @include transition(.5s);
   height: 170px;
 }
 // condensed
-#float-box float-box-update .float-box-head-space.smaller{
+.float-box-container.smaller float-box-update .float-box-head-space{
   height: 130px;
 }
 
 // ==== float-box-body  ==============================
 // ====== float-box-index-tab  ======
-#float-box .float-box-body .float-box-index-tab .float-box-index-tab-head{
+.float-box-index-tab .float-box-index-tab-head{
   @include float-box-fixed;
   width: 100%;
-  padding: 0 15px;
+  padding: 10px 15px;
   pointer-events: none; // This allows a user to scroll the body of the float-box even though this element is fixed.
   float-box-search-bar {
-    // margin-top-20 margin-right-10
     float: left;
-    margin-top: 20px;
     margin-right: 10px;
     width: 220px;
     pointer-events: auto; // Since we removed the pointer-events from parent, we need this to allow the scroll to be clicked on.
     // Mobile Sizes - Once in mobile, float-box should fit the whole screen.
     @media (max-width:767px) {
-      width: 180px
+      width: 160px
     }
   }
   .float-box-new-btn {
     float: right;
-    margin-top: 20px;
+    // margin-top: 20px;
     pointer-events: auto; // Since we removed the pointer-events from parent, we need this to allow the scroll to be clicked on.
   }
 }
 // Head of an index tab in the float box.
-#float-box .float-box-body .float-box-index-tab .float-box-index-table-head {
+.float-box-container .float-box-body .float-box-index-tab .float-box-index-table-head {
   @include float-box-fixed;
   width: 100%;
   padding: 0 15px;
   pointer-events: none; // This allows a user to scroll the body of the float-box even though this element is fixed.
-  a {
-    color: black;
-    text-decoration: none;
+  .float-box-clickable {
     pointer-events: auto; // Since we removed the pointer-events from parent, we need this to allow the scroll to be clicked on.
   }
 }
 // Table of an index tab in the float box.
-#float-box .float-box-body .float-box-index-tab .float-box-index-table {
+.float-box-container .float-box-body .float-box-index-tab .float-box-index-table {
   padding: 0 15px;
 }
 // Head of an index tab in the float box.
-#float-box .float-box-body .float-box-index-tab .float-box-index-row {
-  img {
+.float-box-index-tab .float-box-index-row {
+  .float-box-img {
+    float: left;
     width: 40px;
     height: 40px;
+    margin-right: 10px;
+  }
+  .img-small{
+    width: 30px;
+    height: 30px;
   }
   h4 {
     margin-bottom: 0;
@@ -324,7 +413,7 @@ f
   }
 }
 // ====== float-box-info-tab  ======
-#float-box .float-box-body .float-box-info-tab .float-box-info-row {
+.float-box-container .float-box-body .float-box-info-tab .float-box-info-row {
   border-bottom: 1px solid lightgrey;
   padding: 5px 15px;
   font-size: 18px;
@@ -335,18 +424,18 @@ f
 
 // ====== Space for float-box-body  ======
 // Index Tab Head | Space
-#float-box .float-box-index-tab-head-space{
+.float-box-index-tab-head-space{
   @include transition(.5s);
   height: 50px;
 }
 // Space needed for head of an index tab in the float box.
-#float-box .float-box-index-table-head-space{
+.float-box-container .float-box-index-table-head-space{
   @include transition(.5s);
   height: 32px;
 }
 
 // This will potentially be used as the float box head if we need it any thinner.
-#float-box .float-box-small-head{
+.float-box-container .float-box-small-head{
   img{
     width: 50px;
     height: 50px;

data/vendor/assets/stylesheets/angular-float-box.min.css

@@ -1,2 +1,2 @@
-#float-box{overflow-y:scroll;overflow-x:hidden;z-index:10;margin-top:30px;position:relative;background-color:white;border-radius:6px;border:1px solid rgba(0,0,0,0.2);box-shadow:0 5px 10px rgba(0,0,0,0.2);-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2)}@media (max-width: 1200px){#float-box{position:fixed;right:30px}}@media (max-width: 767px){#float-box{margin-top:-20px;width:100% !important;display:none;top:0;right:0}}#float-box #float-box-tabs{display:none}#float-box #float-box-positioner{border-bottom:1px solid rgba(0,0,0,0.2);padding:4px 10px;padding:2px 10px;padding:0 6px;padding:1px 8px;background-color:#eeeeee;text-align:right;height:22px;cursor:pointer;cursor:-webkit-grab;cursor:-moz-grab}#float-box #float-box-positioner:active{cursor:-webkit-grabbing;cursor:-moz-grabbing}#float-box #float-box-positioner .float-box-positioner-btn{border:1px solid rgba(0,0,0,0.2);width:18px;height:18px;font-size:11px;line-height:0.1;padding:3px 1px 0 0;margin-bottom:5px;border-radius:30px;text-align:center}.fa-location:before{content:"\f124"}#float-box #float-box-container{overflow-y:scroll;overflow-x:hidden}#float-box .float-box-head{z-index:20;position:absolute;background-color:white;left:0;width:100%;padding-top:10px}@media (max-width: 767px){#float-box .float-box-head{position:fixed}}@media (max-width: 767px){#float-box .float-box-head{top:0}}#float-box .float-box-head .float-box-links{width:100%;padding:0 10px;font-size:20px;display:inline-block}#float-box .float-box-head .float-box-links a{text-decoration:none}#float-box .float-box-head .float-box-links .float-box-grey-link{color:grey;cursor:default}#float-box .float-box-head .float-box-image{text-align:center}#float-box .float-box-head .float-box-image img{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease;width:80px;height:80px}#float-box .float-box-head.smaller .float-box-image img{width:30px;height:30px}#float-box .float-box-head float-box-title{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease;height:57px;display:block;text-align:center}#float-box .float-box-head float-box-title .float-box-title-text{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease;display:inline;white-space:nowrap}#float-box .float-box-head.smaller float-box-title{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease;height:28px}#float-box .float-box-head.smaller float-box-title .float-box-title-text{font-size:20px !important}#float-box .float-box-head float-box-title .notransition{-webkit-transition:none !important;-moz-transition:none !important;-o-transition:none !important;transition:none !important}#float-box .float-box-head .float-box-actions{float:left;width:100%}#float-box .float-box-head .float-box-actions .btn{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease;width:40px;height:40px;padding:7px 9px;font-size:20px;line-height:1.33;border-radius:25px}#float-box .float-box-head .float-box-actions p{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}#float-box .float-box-head.smaller .float-box-actions .btn{width:30px;height:30px;padding:4px 8px;font-size:12px}#float-box .float-box-head.smaller .float-box-actions p{font-size:10px}#float-box .float-box-head .float-box-actions .float-box-actions-container{margin:0;padding:0;list-style:none;display:flex;display:-moz-box;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;-webkit-flex-flow:row wrap;justify-content:space-around;justify-content:center}#float-box .float-box-head .float-box-actions .float-box-actions-container .float-box-action{text-align:center;padding:2px 10px}#float-box .float-box-head .float-box-actions .float-box-actions-container .float-box-action a{text-decoration:none}#float-box .float-box-head .float-box-tabs{font-size:12px;padding:0 15px}f #float-box .float-box-head-space{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}#float-box float-box-read .float-box-head-space{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease;height:290px}@media (min-width: 767px){#float-box float-box-read .float-box-head-space{height:293px}}#float-box float-box-read .float-box-head-space.smaller{height:195px}@media (min-width: 767px){#float-box float-box-read .float-box-head-space.smaller{height:198px}}#float-box float-box-create .float-box-head-space{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease;height:170px}#float-box float-box-create .float-box-head-space.smaller{height:130px}#float-box float-box-update .float-box-head-space{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease;height:170px}#float-box float-box-update .float-box-head-space.smaller{height:130px}#float-box .float-box-body .float-box-index-tab .float-box-index-tab-head{z-index:20;position:absolute;background-color:white;width:100%;padding:0 15px;pointer-events:none}@media (max-width: 767px){#float-box .float-box-body .float-box-index-tab .float-box-index-tab-head{position:fixed}}#float-box .float-box-body .float-box-index-tab .float-box-index-tab-head float-box-search-bar{float:left;margin-top:20px;margin-right:10px;width:220px;pointer-events:auto}@media (max-width: 767px){#float-box .float-box-body .float-box-index-tab .float-box-index-tab-head float-box-search-bar{width:180px}}#float-box .float-box-body .float-box-index-tab .float-box-index-tab-head .float-box-new-btn{float:right;margin-top:20px;pointer-events:auto}#float-box .float-box-body .float-box-index-tab .float-box-index-table-head{z-index:20;position:absolute;background-color:white;width:100%;padding:0 15px;pointer-events:none}@media (max-width: 767px){#float-box .float-box-body .float-box-index-tab .float-box-index-table-head{position:fixed}}#float-box .float-box-body .float-box-index-tab .float-box-index-table-head a{color:black;text-decoration:none;pointer-events:auto}#float-box .float-box-body .float-box-index-tab .float-box-index-table{padding:0 15px}#float-box .float-box-body .float-box-index-tab .float-box-index-row img{width:40px;height:40px}#float-box .float-box-body .float-box-index-tab .float-box-index-row h4{margin-bottom:0}#float-box .float-box-body .float-box-index-tab .float-box-index-row h6{margin-top:0}#float-box .float-box-body .float-box-info-tab .float-box-info-row{border-bottom:1px solid lightgrey;padding:5px 15px;font-size:18px}#float-box .float-box-body .float-box-info-tab .float-box-info-row h3{margin-bottom:0}#float-box .float-box-index-tab-head-space{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease;height:50px}#float-box .float-box-index-table-head-space{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease;height:32px}#float-box .float-box-small-head img{width:50px;height:50px}#float-box .float-box-small-head .btn{width:30px;height:30px;padding:4px 8px;font-size:12px;line-height:1.33;border-radius:25px}#float-box .float-box-small-head p{font-size:10px}
+#float-box{overflow-y:scroll;overflow-x:hidden;z-index:10;margin-top:30px;position:relative;background-color:white;border-radius:6px;border:1px solid rgba(0,0,0,0.2);box-shadow:0 5px 10px rgba(0,0,0,0.2);-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2)}@media (max-width: 1200px){#float-box{position:fixed;right:30px}}@media (max-width: 767px){#float-box{margin-top:0;width:100% !important;top:0;right:0;border-radius:0}}@media (max-width: 767px){#float-box.float-box-init-hidden-mobile{display:none}}#float-box #float-box-tabs{display:none}#float-box #float-box-positioner{border-bottom:1px solid rgba(0,0,0,0.2);padding:4px 10px;padding:2px 10px;padding:0 6px;padding:1px 8px;background-color:#eeeeee;text-align:right;height:22px;cursor:pointer;cursor:-webkit-grab;cursor:-moz-grab}@media (max-width: 767px){#float-box #float-box-positioner{display:none}}#float-box #float-box-positioner:active{cursor:-webkit-grabbing;cursor:-moz-grabbing}#float-box #float-box-positioner .float-box-positioner-btn{border:1px solid rgba(0,0,0,0.2);width:18px;height:18px;font-size:11px;line-height:0.1;padding:3px 1px 0 0;margin-bottom:5px;border-radius:30px;text-align:center}.fa-location:before{content:"\f124"}.float-box-container{overflow-y:scroll;overflow-x:hidden}.float-box-container .float-box-head{z-index:20;position:absolute;background-color:white;left:0;width:100%}@media (max-width: 767px){.float-box-container .float-box-head{position:fixed}}@media (max-width: 767px){.float-box-container .float-box-head{top:0}}.float-box-container .float-box-head .float-box-links{width:100%;padding:6px 15px;font-size:20px;height:40px}.float-box-container .float-box-head .float-box-links a{text-decoration:none}.float-box-container .float-box-head .float-box-links .float-box-grey-link{color:grey;cursor:default}.float-box-container .float-box-head .float-box-image{text-align:center}.float-box-container .float-box-head .float-box-image img{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease;width:80px;height:80px}.float-box-container.smaller .float-box-head .float-box-image img{width:30px;height:30px}.float-box-container .float-box-head .float-box-images{text-align:left}.float-box-container .float-box-head .float-box-images img{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease;height:55px}.float-box-container.smaller .float-box-head .float-box-images img{height:45px}.float-box-container .float-box-head .float-box-image-and-title{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease;height:75px;display:block;font-size:25px;text-align:left;line-height:55px;padding:10px 15px;font-size:35px}.float-box-container .float-box-head .float-box-image-and-title img{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease;height:55px}.float-box-container.smaller .float-box-head .float-box-image-and-title{height:60px;font-size:20px;line-height:40px}.float-box-container.smaller .float-box-head .float-box-image-and-title img{height:40px}.float-box-container .float-box-image-and-title-space{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease;height:75px}.float-box-container.smaller .float-box-image-and-title-space{height:60px}.float-box-container .float-box-image-space{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease;height:80px}.float-box-container.smaller .float-box-image-space{height:30px}.float-box-container .float-box-title-space{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease;height:57px}.float-box-container.smaller .float-box-title-space{height:28px}.float-box-container .float-box-actions-space{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease;height:65px}.float-box-container.smaller .float-box-actions-space{height:50px}.float-box-container .float-box-links-space{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease;height:40px}.float-box-container .float-box-tabs-space{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease;height:39px}.float-box-container .float-box-head float-box-title{display:block;text-align:center;height:57px}.float-box-container .float-box-head float-box-title .float-box-title-text{white-space:nowrap;display:inline-block}.float-box-container.smaller .float-box-head float-box-title{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease;height:28px}.float-box-container.smaller .float-box-head float-box-title .float-box-title-text{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease;font-size:20px !important}.float-box-container .float-box-head float-box-title .notransition{-webkit-transition:none !important;-moz-transition:none !important;-o-transition:none !important;transition:none !important}.float-box-container .float-box-head .float-box-actions{float:left;width:100%;font-size:12px;padding:4px 10px}.float-box-container.smaller .float-box-head .float-box-actions{font-size:10px;padding:3px 10px}.float-box-container .float-box-head .float-box-actions .btn{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease;width:40px;height:40px;padding:7px 9px;font-size:20px;line-height:1.33;border-radius:25px}.float-box-container .float-box-head .float-box-actions p{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}.float-box-container.smaller .float-box-head .float-box-actions .btn{width:30px;height:30px;padding:4px 8px;font-size:12px}.float-box-container .float-box-head .float-box-actions .float-box-actions-container{margin:0;list-style:none;display:flex;display:-moz-box;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;-webkit-flex-flow:row wrap;justify-content:space-around;justify-content:center}.float-box-container .float-box-head .float-box-actions .float-box-actions-container .float-box-action{text-align:center;padding:0 10px}.float-box-container .float-box-head .float-box-actions .float-box-actions-container .float-box-action a{text-decoration:none}.float-box-container .float-box-tabs{float:left;width:100%;font-size:12px;padding:0 15px}.float-box-container .float-box-tabs a{padding:10px 10px}.float-box-container .float-box-head-space{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}.float-box-container float-box-read .float-box-head-space{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease;height:290px}@media (min-width: 767px){.float-box-container float-box-read .float-box-head-space{height:293px}}.float-box-container.smaller float-box-read .float-box-head-space{height:195px}@media (min-width: 767px){.float-box-container.smaller float-box-read .float-box-head-space{height:198px}}.float-box-container float-box-create .float-box-head-space{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease;height:170px}.float-box-container.smaller float-box-create .float-box-head-space{height:130px}.float-box-container float-box-update .float-box-head-space{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease;height:170px}.float-box-container.smaller float-box-update .float-box-head-space{height:130px}.float-box-index-tab .float-box-index-tab-head{z-index:20;position:absolute;background-color:white;width:100%;padding:10px 15px;pointer-events:none}@media (max-width: 767px){.float-box-index-tab .float-box-index-tab-head{position:fixed}}.float-box-index-tab .float-box-index-tab-head float-box-search-bar{float:left;margin-right:10px;width:220px;pointer-events:auto}@media (max-width: 767px){.float-box-index-tab .float-box-index-tab-head float-box-search-bar{width:160px}}.float-box-index-tab .float-box-index-tab-head .float-box-new-btn{float:right;pointer-events:auto}.float-box-container .float-box-body .float-box-index-tab .float-box-index-table-head{z-index:20;position:absolute;background-color:white;width:100%;padding:0 15px;pointer-events:none}@media (max-width: 767px){.float-box-container .float-box-body .float-box-index-tab .float-box-index-table-head{position:fixed}}.float-box-container .float-box-body .float-box-index-tab .float-box-index-table-head .float-box-clickable{pointer-events:auto}.float-box-container .float-box-body .float-box-index-tab .float-box-index-table{padding:0 15px}.float-box-index-tab .float-box-index-row .float-box-img{float:left;width:40px;height:40px;margin-right:10px}.float-box-index-tab .float-box-index-row .img-small{width:30px;height:30px}.float-box-index-tab .float-box-index-row h4{margin-bottom:0}.float-box-index-tab .float-box-index-row h6{margin-top:0}.float-box-container .float-box-body .float-box-info-tab .float-box-info-row{border-bottom:1px solid lightgrey;padding:5px 15px;font-size:18px}.float-box-container .float-box-body .float-box-info-tab .float-box-info-row h3{margin-bottom:0}.float-box-index-tab-head-space{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease;height:50px}.float-box-container .float-box-index-table-head-space{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease;height:32px}.float-box-container .float-box-small-head img{width:50px;height:50px}.float-box-container .float-box-small-head .btn{width:30px;height:30px;padding:4px 8px;font-size:12px;line-height:1.33;border-radius:25px}.float-box-container .float-box-small-head p{font-size:10px}
 /*# sourceMappingURL=angular-float-box.min.css.map */

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: angular-float-box
 version: !ruby/object:Gem::Version
-  version: 0.1.2
+  version: 0.1.3
 platform: ruby
 authors:
 - Alexander Mcritchie
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2017-06-19 00:00:00.000000000 Z
+date: 2017-07-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -63,7 +63,6 @@ extra_rdoc_files: []
 files:
 - ".gitignore"
 - ".rspec"
-- ".sass-cache/57b3601a17f3b68a34229d713831e0d6fc4b15a6/angular-float-box.css.scssc"
 - ".travis.yml"
 - Gemfile
 - LICENSE.txt