angular-float-box 0.1.2 → 0.1.3
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +2 -2
- data/lib/angular-float-box/version.rb +1 -1
- data/vendor/assets/javascripts/angular-float-box.js +143 -103
- data/vendor/assets/javascripts/angular-float-box.min.js +1 -1
- data/vendor/assets/stylesheets/angular-float-box.css.scss +156 -67
- data/vendor/assets/stylesheets/angular-float-box.min.css +1 -1
- metadata +2 -3
- data/.sass-cache/57b3601a17f3b68a34229d713831e0d6fc4b15a6/angular-float-box.css.scssc +0 -0
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 1b0f200a8dfb1d00e4c6ece4751b4da7e8d73cfe
|
4
|
+
data.tar.gz: ad5ddd59c7f9fab1e3ea41e77a655f6d9af3fedc
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: e7edd3ecbfb7a01ad3efac00d6d20ead532067ce2c9fc01dd5a3a8279b94c4058e4573f82d4f7a6be26a8d652363bdd8f6430fa6de1662214eb99d1d2a26d4fe
|
7
|
+
data.tar.gz: 03896ccdcb18c2157232af081abbc35d46009f6bf2e0fe39188b9089fb79b8d4fc1f55b0fe109d195c999fef72035342d3858d79c095754a7a40ba65da90b9fe
|
data/README.md
CHANGED
@@ -1,8 +1,8 @@
|
|
1
1
|
# Angular Float Box
|
2
2
|
|
3
|
-
|
3
|
+
[Demo](http://planoadmin-staging.planomatic.com/#/demos/float_box)
|
4
4
|
|
5
|
-
|
5
|
+
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
|
6
6
|
|
7
7
|
## Installation
|
8
8
|
|
@@ -6,79 +6,17 @@
|
|
6
6
|
*/
|
7
7
|
|
8
8
|
(function (window, angular, undefined) {
|
9
|
-
/*jshint globalstrict:true*/
|
10
|
-
/*global angular:false*/
|
11
9
|
'use strict';
|
12
|
-
|
13
10
|
angular.module('angular-float-box', [])
|
14
|
-
|
15
|
-
|
16
|
-
function($timeout) {
|
17
|
-
|
18
|
-
var direction = 'right'
|
11
|
+
.service('floatBox', ['scroll', 'draggable',
|
12
|
+
function(scroll, draggable) {
|
19
13
|
|
20
14
|
// Call floatBox.initializes in the controller to create listeners for scrolling and dragging float-box
|
21
|
-
this.initialize = function($scope
|
22
|
-
|
23
|
-
|
24
|
-
direction = slide_direction;
|
15
|
+
this.initialize = function($scope) {
|
16
|
+
scroll.initialize();
|
17
|
+
draggable.initialize($scope);
|
25
18
|
}
|
26
19
|
|
27
|
-
// Initializes float-box's scroll listener.
|
28
|
-
function initialize_scroll($scope) {
|
29
|
-
// How many pixels needed for scroll to shrink.
|
30
|
-
var shrink_treshold = 10;
|
31
|
-
// Variable needed to check direction of scroll.
|
32
|
-
var last_scroll_top = 0;
|
33
|
-
// Boolean to mark if a shrink is still in process or not.
|
34
|
-
var animation_complete = true;
|
35
|
-
// Setup float-box scroll listener.
|
36
|
-
$('#float-box-container').scroll(function(event){
|
37
|
-
var scroll_top = $(this).scrollTop();
|
38
|
-
var is_down_scroll = (scroll_top > last_scroll_top)
|
39
|
-
// Check direction of scroll.
|
40
|
-
if (scroll_top > last_scroll_top){
|
41
|
-
// Down scroll
|
42
|
-
if (this.scrollTop > shrink_treshold) {
|
43
|
-
// Within threshold for shrinking.
|
44
|
-
if (animation_complete && !$('.float-box-head').hasClass("smaller")) {
|
45
|
-
$('.float-box-head').addClass("smaller");
|
46
|
-
$('.float-box-space').addClass("smaller");
|
47
|
-
animation_complete = false
|
48
|
-
setTimeout(function(){ animation_complete = true }, 500);
|
49
|
-
}
|
50
|
-
}
|
51
|
-
} else {
|
52
|
-
// Up scroll
|
53
|
-
if (this.scrollTop <= shrink_treshold) {
|
54
|
-
// Outside of threshold for shrinking.
|
55
|
-
if (animation_complete) {
|
56
|
-
$('.float-box-head').removeClass("smaller");
|
57
|
-
$('.float-box-space').removeClass("smaller");
|
58
|
-
animation_complete = false
|
59
|
-
setTimeout(function(){ animation_complete = true; }, 500);
|
60
|
-
}
|
61
|
-
}
|
62
|
-
}
|
63
|
-
last_scroll_top = scroll_top;
|
64
|
-
});
|
65
|
-
};
|
66
|
-
|
67
|
-
// Initializes float-box's positionable listener.
|
68
|
-
function initialize_draggable($scope) {
|
69
|
-
$scope.draggable_on = function() {
|
70
|
-
$('#float-box').draggable('enable');
|
71
|
-
$scope.draggable_disabled = false;
|
72
|
-
}
|
73
|
-
$scope.draggable_off = function() {
|
74
|
-
$('#float-box').draggable('disable');
|
75
|
-
$('#float-box').css('top', '').css('left', '').css('right', '').css('bottom', '');
|
76
|
-
$scope.draggable_disabled = true;
|
77
|
-
}
|
78
|
-
$scope.draggable_disabled = true;
|
79
|
-
$('#float-box').draggable().draggable('disable');
|
80
|
-
};
|
81
|
-
|
82
20
|
// Show float-box
|
83
21
|
this.show = function() {
|
84
22
|
$( "#float-box" ).show()
|
@@ -87,43 +25,40 @@
|
|
87
25
|
this.hide = function() {
|
88
26
|
$( "#float-box" ).hide()
|
89
27
|
}
|
90
|
-
// Show float-box via
|
91
|
-
this.
|
92
|
-
$( "#float-box" ).show( "
|
28
|
+
// Show float-box via fade.
|
29
|
+
this.fade_in = function() {
|
30
|
+
$( "#float-box" ).show( "fade")
|
93
31
|
}
|
94
|
-
// Show float-box via
|
95
|
-
function
|
96
|
-
|
97
|
-
$( "#float-box" ).show( "drop", {direction: direction})
|
32
|
+
// Show float-box via fade.
|
33
|
+
function fade_in() {
|
34
|
+
$( "#float-box" ).show( "fade")
|
98
35
|
}
|
99
|
-
this.
|
100
|
-
// Hide float-box via
|
101
|
-
this.
|
36
|
+
this.fade_in = fade_in;
|
37
|
+
// Hide float-box via fade.
|
38
|
+
this.fade_out = function() {
|
102
39
|
if ($(window).width() < 768) {
|
103
|
-
$( "#float-box" ).hide( "
|
40
|
+
$( "#float-box" ).hide( "fade")
|
104
41
|
};
|
105
42
|
}
|
106
43
|
|
107
44
|
// Display float-box-create tab.
|
108
45
|
this.create = function() {
|
109
46
|
// Show float-box-create-tab if not already shown.
|
110
|
-
$('
|
47
|
+
$('float-box-create-tab a').tab('show');
|
111
48
|
// Reset defaults and show if needed.
|
112
49
|
new_float_box_instance($('float-box-create'));
|
113
50
|
}
|
114
|
-
|
115
51
|
// Display float-box-read tab.
|
116
52
|
this.read = function() {
|
117
53
|
// Show float-box-read-tab if not already shown.
|
118
|
-
$('
|
54
|
+
$('float-box-read-tab a').tab('show');
|
119
55
|
// Reset defaults and show if needed.
|
120
56
|
new_float_box_instance($('float-box-read'));
|
121
57
|
}
|
122
|
-
|
123
58
|
// Display float-box-update tab.
|
124
59
|
this.update = function() {
|
125
60
|
// Show float-box-update-tab if not already shown.
|
126
|
-
$('
|
61
|
+
$('float-box-update-tab a').tab('show')
|
127
62
|
// Reset defaults and show if needed.
|
128
63
|
new_float_box_instance($('float-box-update'))
|
129
64
|
}
|
@@ -131,46 +66,141 @@
|
|
131
66
|
// function refresh_float_box($action_tab) {
|
132
67
|
function new_float_box_instance($action_tab) {
|
133
68
|
// Show float-box if needed.
|
134
|
-
|
69
|
+
fade_in()
|
135
70
|
// Show default tab.
|
136
71
|
$action_tab.find('.float-box-default-tab').tab('show')
|
137
72
|
// Focus on default input.
|
138
73
|
$action_tab.find('.float-box-default-input').focus()
|
139
74
|
}
|
140
75
|
}])
|
141
|
-
|
142
|
-
|
76
|
+
.service('draggable', [function() {
|
77
|
+
this.initialize = function($scope) {
|
78
|
+
$scope.draggable_on = function() {
|
79
|
+
$('#float-box').draggable('enable');
|
80
|
+
$scope.draggable_disabled = false;
|
81
|
+
}
|
82
|
+
$scope.draggable_off = function() {
|
83
|
+
$('#float-box').draggable('disable');
|
84
|
+
$('#float-box').css('top', '').css('left', '').css('right', '').css('bottom', '');
|
85
|
+
$scope.draggable_disabled = true;
|
86
|
+
}
|
87
|
+
$scope.draggable_disabled = true;
|
88
|
+
$('#float-box').draggable().draggable('disable');
|
89
|
+
}
|
90
|
+
}])
|
91
|
+
.service('scroll', ['$timeout', 'title',
|
92
|
+
function($timeout, title) {
|
93
|
+
this.initialize = function() {
|
94
|
+
// How many pixels needed for scroll to shrink.
|
95
|
+
var shrink_treshold = 10;
|
96
|
+
// Variable needed to check direction of scroll.
|
97
|
+
var last_scroll_top = 0;
|
98
|
+
// Boolean to mark if a shrink is still in process or not.
|
99
|
+
var animation_complete = true;
|
100
|
+
// Setup float-box scroll listener.
|
101
|
+
$('.float-box-container').scroll(function(event){
|
102
|
+
// Distance from top of float-box-container
|
103
|
+
var scroll_top = $(this).scrollTop();
|
104
|
+
// Check direction of scroll.
|
105
|
+
if (scroll_top > last_scroll_top){
|
106
|
+
// Down scroll
|
107
|
+
if (this.scrollTop > shrink_treshold) {
|
108
|
+
// Within threshold for shrinking.
|
109
|
+
if (animation_complete && !$('.float-box-container').hasClass("smaller")) {
|
110
|
+
$('.float-box-container').addClass("smaller");
|
111
|
+
animation_complete = false
|
112
|
+
$timeout(function(){ animation_complete = true }, 500);
|
113
|
+
}
|
114
|
+
}
|
115
|
+
} else {
|
116
|
+
// Up scroll
|
117
|
+
if (this.scrollTop <= shrink_treshold) {
|
118
|
+
// Outside of threshold for shrinking.
|
119
|
+
if (animation_complete) {
|
120
|
+
$('.float-box-container').removeClass("smaller");
|
121
|
+
// Adjust title when smaller class is removed.
|
122
|
+
title.adjust($('float-box-title:visible'))
|
123
|
+
animation_complete = false
|
124
|
+
$timeout(function(){ animation_complete = true; }, 500);
|
125
|
+
}
|
126
|
+
}
|
127
|
+
}
|
128
|
+
last_scroll_top = scroll_top;
|
129
|
+
});
|
130
|
+
};
|
131
|
+
}])
|
132
|
+
.service('title', [function() {
|
133
|
+
var max_font_size = 40;
|
134
|
+
this.max_font_size = max_font_size;
|
135
|
+
// Adjust font-size of title based on size of text.
|
136
|
+
this.adjust = function($title) {
|
137
|
+
var $text = $title.find('.float-box-title-text');
|
138
|
+
// Add notransition so no transition animation will get in the way of evaluating the proper font-size of title
|
139
|
+
$text.addClass('notransition')
|
140
|
+
// Initialize font-size of $text.
|
141
|
+
var font_size = max_font_size;
|
142
|
+
// Update font-size of $text.
|
143
|
+
$text.css('font-size', font_size+'px');
|
144
|
+
// Lower font-size until $text is thinner than $title or font-size is 20.
|
145
|
+
while (($title.width() < $text.width()) && font_size != 20) {
|
146
|
+
// Lower font-size by 5.
|
147
|
+
font_size -= 5;
|
148
|
+
// Update font-size of $text.
|
149
|
+
$text.css('font-size', font_size+'px');
|
150
|
+
}
|
151
|
+
// Turn on css transitions now that font-size is updated.
|
152
|
+
$text.removeClass('notransition')
|
153
|
+
}
|
154
|
+
}])
|
155
|
+
// Float Box Title.
|
156
|
+
.directive('floatBoxTitle', ['title', function (title ) {
|
143
157
|
"use strict";
|
144
158
|
return {
|
145
159
|
restrict: 'E',
|
146
160
|
template: '<div class="float-box-title-text">{{text}}</div>',
|
147
|
-
scope: {
|
161
|
+
scope: {
|
162
|
+
text: '='
|
163
|
+
},
|
164
|
+
link: function($scope, $title, iAttrs) {
|
165
|
+
// Watch for float-box-title element appearing.
|
166
|
+
$scope.$watch(function() { return angular.element($title).is(':visible') }, function() {
|
167
|
+
title.adjust($title) // Adjust font-size of title.
|
168
|
+
});
|
169
|
+
// Watch for changes in float-box-title text.
|
170
|
+
$scope.$watch('text', function(a,b,c) {
|
171
|
+
title.adjust($title) // Adjust font-size of title.
|
172
|
+
})
|
173
|
+
}
|
174
|
+
}
|
175
|
+
}])
|
176
|
+
// Float Box Limit.
|
177
|
+
.directive('floatBoxLimit', [function () {
|
178
|
+
"use strict";
|
179
|
+
return {
|
180
|
+
restrict: 'E',
|
181
|
+
template: '{{display}}',
|
182
|
+
scope: {
|
183
|
+
text: '=',
|
184
|
+
limit: '='
|
185
|
+
},
|
148
186
|
link: function($scope, $title, iAttrs) {
|
149
187
|
$scope.$watch('text', function(a,b,c) {
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
// Lower font-size until $text is thinner than $title or font-size is 20.
|
157
|
-
while (($title.width() < $text.width()) && font_size != 20) {
|
158
|
-
// Lower font-size by 5 and update font-size of $text.
|
159
|
-
font_size -= 5
|
160
|
-
$text.css('font-size', font_size+'px');
|
188
|
+
// Duplicate the text that will be limited as the variable display.
|
189
|
+
$scope.display = angular.copy($scope.text)
|
190
|
+
// Check if the limited text is longer than the limit.
|
191
|
+
if ($scope.text && $scope.text.length >= $scope.limit) {
|
192
|
+
// If the limited text is longer than the limit, truncate the display.
|
193
|
+
$scope.display = $scope.display.substring(0,$scope.limit - 1) + '..'
|
161
194
|
}
|
162
|
-
// Turn on css transitions now that font-size is updated.
|
163
|
-
$text.removeClass('notransition')
|
164
195
|
})
|
165
196
|
}
|
166
197
|
}
|
167
198
|
}])
|
168
|
-
|
169
|
-
.directive('floatBoxSearchBar', [
|
199
|
+
// Float Box Search Bar.
|
200
|
+
.directive('floatBoxSearchBar', [function () {
|
170
201
|
"use strict";
|
171
202
|
return {
|
172
203
|
restrict: 'E',
|
173
|
-
template: '<div class="float-box-title-text">{{text}}</div>',
|
174
204
|
template:
|
175
205
|
'<span class="input-group-btn">' +
|
176
206
|
'<button class="btn btn-info btn-sm" type="submit">' +
|
@@ -180,6 +210,16 @@
|
|
180
210
|
'<input type="text" class="form-control input-sm" placeholder="{{placeholder}}" ng-model="model" autofocus>',
|
181
211
|
scope: {model: '=', placeholder: '='}
|
182
212
|
}
|
213
|
+
}])
|
214
|
+
// Float Box Tabs
|
215
|
+
.directive('floatBoxCreateTab', [function () {
|
216
|
+
return { template: '<a data-toggle="tab" data-target="float-box-create"></a>' };
|
217
|
+
}])
|
218
|
+
.directive('floatBoxReadTab', [function () {
|
219
|
+
return { template: '<a data-toggle="tab" data-target="float-box-read"></a>' };
|
220
|
+
}])
|
221
|
+
.directive('floatBoxUpdateTab', [function () {
|
222
|
+
return { template: '<a data-toggle="tab" data-target="float-box-update"></a>' };
|
183
223
|
}]);
|
184
224
|
|
185
225
|
})(window, window.angular);
|
@@ -1 +1 @@
|
|
1
|
-
!function(t,o
|
1
|
+
!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);
|
@@ -28,10 +28,8 @@
|
|
28
28
|
|
29
29
|
// == float-box ================================================
|
30
30
|
#float-box {
|
31
|
-
|
32
31
|
overflow-y: scroll;
|
33
32
|
overflow-x: hidden;
|
34
|
-
|
35
33
|
// Basic style
|
36
34
|
z-index: 10;
|
37
35
|
margin-top: 30px;
|
@@ -49,12 +47,17 @@
|
|
49
47
|
}
|
50
48
|
// Mobile Sizes - Once in mobile, float-box should fit the whole screen.
|
51
49
|
@media (max-width:767px) {
|
52
|
-
|
53
|
-
margin-top: -20px;
|
50
|
+
margin-top: 0;
|
54
51
|
width: 100% !important; // Once in mobile, float-box should fit the whole screen.
|
55
|
-
display: none; // Start hidden, if there is a focused record the controller will show the float-box.
|
56
52
|
top: 0; // Position mobile-float-box to top of screen. Height is set in the float-box-container.
|
57
53
|
right: 0; // Position mobile-float-box to right of screen to overwrite the float-box 30px margin.
|
54
|
+
border-radius: 0; // Remove border radius so background isn't showing on mobile.
|
55
|
+
}
|
56
|
+
}
|
57
|
+
#float-box.float-box-init-hidden-mobile {
|
58
|
+
// Mobile Sizes - Once in mobile, float-box should fit the whole screen.
|
59
|
+
@media (max-width:767px) {
|
60
|
+
display: none; // Start hidden, if there is a focused record the controller will show the float-box.
|
58
61
|
}
|
59
62
|
}
|
60
63
|
|
@@ -76,6 +79,9 @@
|
|
76
79
|
cursor: pointer;
|
77
80
|
cursor: -webkit-grab;
|
78
81
|
cursor: -moz-grab;
|
82
|
+
@media (max-width:767px) {
|
83
|
+
display: none; // Hide positioner if on mobile.
|
84
|
+
}
|
79
85
|
}
|
80
86
|
// Positioner.active | Styling
|
81
87
|
#float-box #float-box-positioner:active {
|
@@ -101,39 +107,37 @@
|
|
101
107
|
}
|
102
108
|
|
103
109
|
// ==== float-box-positioner ==============================
|
104
|
-
|
110
|
+
.float-box-container {
|
105
111
|
overflow-y: scroll;
|
106
112
|
overflow-x: hidden;
|
107
113
|
}
|
108
114
|
|
109
115
|
// ==== float-box-head ==============================
|
110
|
-
|
116
|
+
.float-box-container .float-box-head {
|
111
117
|
@include float-box-fixed;
|
112
118
|
left: 0;
|
113
119
|
width: 100%;
|
114
|
-
padding-top: 10px;
|
115
120
|
// On Mobile, the top position needs to be 0 to show the
|
116
121
|
@media (max-width:767px) { top: 0; }
|
117
122
|
}
|
118
123
|
|
119
124
|
// ====== float-box-links ======
|
120
|
-
|
125
|
+
.float-box-container .float-box-head .float-box-links {
|
121
126
|
width: 100%;
|
122
|
-
padding:
|
127
|
+
padding: 6px 15px;
|
123
128
|
font-size: 20px;
|
124
|
-
|
129
|
+
height: 40px;
|
130
|
+
|
125
131
|
a { text-decoration: none; }
|
126
132
|
}
|
127
|
-
// float-box-
|
128
|
-
|
133
|
+
// ====== float-box-links ======
|
134
|
+
.float-box-container .float-box-head .float-box-links .float-box-grey-link {
|
129
135
|
color: grey;
|
130
136
|
cursor: default;
|
131
137
|
}
|
132
|
-
|
133
|
-
#float-box .float-box-head .float-box-links .float-box-grey-link:hover {
|
134
|
-
}
|
138
|
+
|
135
139
|
// ====== float-box-image ======
|
136
|
-
|
140
|
+
.float-box-container .float-box-head .float-box-image {
|
137
141
|
text-align: center;
|
138
142
|
img{
|
139
143
|
@include transition(.5s);
|
@@ -142,35 +146,113 @@
|
|
142
146
|
}
|
143
147
|
}
|
144
148
|
// condensed
|
145
|
-
|
149
|
+
.float-box-container.smaller .float-box-head .float-box-image {
|
146
150
|
img{
|
147
151
|
width: 30px;
|
148
152
|
height: 30px;
|
149
153
|
}
|
150
154
|
}
|
155
|
+
// ====== float-box-image ======
|
156
|
+
.float-box-container .float-box-head .float-box-images {
|
157
|
+
text-align: left;
|
158
|
+
img{
|
159
|
+
@include transition(.5s);
|
160
|
+
height: 55px;
|
161
|
+
}
|
162
|
+
}
|
163
|
+
// condensed
|
164
|
+
.float-box-container.smaller .float-box-head .float-box-images {
|
165
|
+
img{
|
166
|
+
height: 45px;
|
167
|
+
}
|
168
|
+
}
|
151
169
|
|
152
|
-
// ====== float-box-
|
153
|
-
|
170
|
+
// ====== float-box-image ======
|
171
|
+
.float-box-container .float-box-head .float-box-image-and-title {
|
172
|
+
@include transition(.5s);
|
173
|
+
height: 75px;
|
174
|
+
display: block;
|
175
|
+
font-size: 25px;
|
176
|
+
text-align: left;
|
177
|
+
line-height: 55px;
|
178
|
+
padding: 10px 15px;
|
179
|
+
font-size: 35px;
|
180
|
+
img{
|
181
|
+
@include transition(.5s);
|
182
|
+
height: 55px;
|
183
|
+
}
|
184
|
+
}
|
185
|
+
// condensed
|
186
|
+
.float-box-container.smaller .float-box-head .float-box-image-and-title {
|
187
|
+
height: 60px;
|
188
|
+
font-size: 20px;
|
189
|
+
line-height: 40px;
|
190
|
+
img{
|
191
|
+
height: 40px;
|
192
|
+
}
|
193
|
+
}
|
194
|
+
.float-box-container .float-box-image-and-title-space{
|
195
|
+
@include transition(.5s);
|
196
|
+
height: 75px;
|
197
|
+
}
|
198
|
+
.float-box-container.smaller .float-box-image-and-title-space{
|
199
|
+
height: 60px;
|
200
|
+
}
|
201
|
+
.float-box-container .float-box-image-space{
|
202
|
+
@include transition(.5s);
|
203
|
+
height: 80px; // The height is set to one line of 40px font-size, so the float-box-title doesn't change height.
|
204
|
+
}
|
205
|
+
.float-box-container.smaller .float-box-image-space{
|
206
|
+
height: 30px;
|
207
|
+
}
|
208
|
+
.float-box-container .float-box-title-space{
|
154
209
|
@include transition(.5s);
|
155
210
|
height: 57px; // The height is set to one line of 40px font-size, so the float-box-title doesn't change height.
|
211
|
+
}
|
212
|
+
.float-box-container.smaller .float-box-title-space{
|
213
|
+
height: 28px;
|
214
|
+
}
|
215
|
+
.float-box-container .float-box-actions-space{
|
216
|
+
@include transition(.5s);
|
217
|
+
height: 65px; // The height is set to one line of 40px font-size, so the float-box-title doesn't change height.
|
218
|
+
}
|
219
|
+
.float-box-container.smaller .float-box-actions-space{
|
220
|
+
// height: 58px;
|
221
|
+
height: 50px;
|
222
|
+
}
|
223
|
+
.float-box-container .float-box-links-space{
|
224
|
+
@include transition(.5s);
|
225
|
+
height: 40px;
|
226
|
+
// height: 39px;
|
227
|
+
}
|
228
|
+
.float-box-container .float-box-tabs-space{
|
229
|
+
@include transition(.5s);
|
230
|
+
height: 39px;
|
231
|
+
}
|
232
|
+
|
233
|
+
// ====== float-box-title ======
|
234
|
+
.float-box-container .float-box-head float-box-title {
|
235
|
+
// We don't have transitions here because when smaller class is removed because we need to evaluate the size of the full font title.
|
156
236
|
display: block;
|
157
237
|
text-align: center;
|
238
|
+
height: 57px;
|
158
239
|
}
|
159
|
-
|
160
|
-
|
161
|
-
display: inline;
|
240
|
+
.float-box-container .float-box-head float-box-title .float-box-title-text {
|
241
|
+
// We don't have transitions here because when smaller class is removed because we need to evaluate the size of the full font title.
|
162
242
|
white-space: nowrap;
|
243
|
+
display: inline-block;
|
163
244
|
}
|
164
245
|
// condensed
|
165
|
-
|
246
|
+
.float-box-container.smaller .float-box-head float-box-title {
|
166
247
|
@include transition(.5s);
|
167
248
|
height: 28px; // Adjust height of float-box-title when in small.
|
168
249
|
}
|
169
|
-
|
170
|
-
|
250
|
+
.float-box-container.smaller .float-box-head float-box-title .float-box-title-text {
|
251
|
+
@include transition(.5s);
|
252
|
+
font-size: 20px !important; // THis is important or
|
171
253
|
}
|
172
254
|
// Transitions need to be turned off when adjusting font-size
|
173
|
-
|
255
|
+
.float-box-container .float-box-head float-box-title .notransition {
|
174
256
|
-webkit-transition: none !important;
|
175
257
|
-moz-transition: none !important;
|
176
258
|
-o-transition: none !important;
|
@@ -178,11 +260,17 @@
|
|
178
260
|
}
|
179
261
|
|
180
262
|
// ====== float-box-actions ======
|
181
|
-
|
263
|
+
.float-box-container .float-box-head .float-box-actions {
|
182
264
|
@include float-box-row;
|
265
|
+
font-size: 12px;
|
266
|
+
padding: 4px 10px;
|
267
|
+
}
|
268
|
+
.float-box-container.smaller .float-box-head .float-box-actions{
|
269
|
+
font-size: 10px;
|
270
|
+
padding: 3px 10px;
|
183
271
|
}
|
184
272
|
|
185
|
-
|
273
|
+
.float-box-container .float-box-head .float-box-actions .btn{
|
186
274
|
@include transition(.5s);
|
187
275
|
width: 40px;
|
188
276
|
height: 40px;
|
@@ -192,23 +280,19 @@
|
|
192
280
|
border-radius: 25px;
|
193
281
|
}
|
194
282
|
|
195
|
-
|
283
|
+
.float-box-container .float-box-head .float-box-actions p{
|
196
284
|
@include transition(.5s);
|
197
285
|
}
|
198
286
|
// condensed
|
199
|
-
|
287
|
+
.float-box-container.smaller .float-box-head .float-box-actions .btn{
|
200
288
|
width: 30px;
|
201
289
|
height: 30px;
|
202
290
|
padding: 4px 8px;
|
203
291
|
font-size: 12px;
|
204
292
|
}
|
205
|
-
#float-box .float-box-head.smaller .float-box-actions p{
|
206
|
-
font-size: 10px;
|
207
|
-
}
|
208
293
|
|
209
|
-
|
294
|
+
.float-box-container .float-box-head .float-box-actions .float-box-actions-container {
|
210
295
|
margin: 0;
|
211
|
-
padding: 0;
|
212
296
|
list-style: none;
|
213
297
|
display: flex;
|
214
298
|
display: -moz-box;
|
@@ -219,102 +303,107 @@
|
|
219
303
|
justify-content: space-around;
|
220
304
|
justify-content: center;
|
221
305
|
}
|
222
|
-
|
306
|
+
.float-box-container .float-box-head .float-box-actions .float-box-actions-container .float-box-action{
|
223
307
|
text-align: center;
|
224
|
-
padding:
|
308
|
+
padding: 0 10px
|
225
309
|
}
|
226
|
-
|
310
|
+
.float-box-container .float-box-head .float-box-actions .float-box-actions-container .float-box-action a{
|
227
311
|
text-decoration: none;
|
228
312
|
}
|
229
313
|
|
230
314
|
// ====== float-box-tabs ======
|
231
|
-
|
315
|
+
.float-box-container .float-box-tabs {
|
316
|
+
@include float-box-row;
|
232
317
|
font-size: 12px;
|
233
318
|
padding: 0 15px;
|
319
|
+
|
320
|
+
a {
|
321
|
+
padding: 10px 10px;
|
322
|
+
}
|
234
323
|
}
|
235
|
-
|
324
|
+
|
236
325
|
// ====== Space for float-box-head ======
|
237
|
-
|
326
|
+
.float-box-container .float-box-head-space {
|
238
327
|
@include transition(.5s);
|
239
328
|
}
|
240
329
|
// Float box head space. This is needed because the head is fixed and there are elements under the head.
|
241
|
-
|
330
|
+
.float-box-container float-box-read .float-box-head-space{
|
242
331
|
@include transition(.5s);
|
243
|
-
// height: 275px;
|
244
332
|
height: 290px;
|
245
333
|
@media (min-width:767px) { height: 293px; } // Non Mobile Sizes - Once in mobile, float-box should fit the whole screen.
|
246
334
|
}
|
247
335
|
// condensed
|
248
|
-
|
249
|
-
// height: 180px;
|
336
|
+
.float-box-container.smaller float-box-read .float-box-head-space{
|
250
337
|
height: 195px;
|
251
338
|
@media (min-width:767px) { height: 198px; } // Non Mobile Sizes - Once in mobile, float-box should fit the whole screen.
|
252
339
|
}
|
253
340
|
// Float box head space. This is needed because the head is fixed and there are elements under the head.
|
254
|
-
|
341
|
+
.float-box-container float-box-create .float-box-head-space{
|
255
342
|
@include transition(.5s);
|
256
343
|
height: 170px;
|
257
344
|
}
|
258
345
|
// condensed
|
259
|
-
|
346
|
+
.float-box-container.smaller float-box-create .float-box-head-space{
|
260
347
|
height: 130px;
|
261
348
|
}
|
262
349
|
// Float box head space. This is needed because the head is fixed and there are elements under the head.
|
263
|
-
|
350
|
+
.float-box-container float-box-update .float-box-head-space{
|
264
351
|
@include transition(.5s);
|
265
352
|
height: 170px;
|
266
353
|
}
|
267
354
|
// condensed
|
268
|
-
|
355
|
+
.float-box-container.smaller float-box-update .float-box-head-space{
|
269
356
|
height: 130px;
|
270
357
|
}
|
271
358
|
|
272
359
|
// ==== float-box-body ==============================
|
273
360
|
// ====== float-box-index-tab ======
|
274
|
-
|
361
|
+
.float-box-index-tab .float-box-index-tab-head{
|
275
362
|
@include float-box-fixed;
|
276
363
|
width: 100%;
|
277
|
-
padding:
|
364
|
+
padding: 10px 15px;
|
278
365
|
pointer-events: none; // This allows a user to scroll the body of the float-box even though this element is fixed.
|
279
366
|
float-box-search-bar {
|
280
|
-
// margin-top-20 margin-right-10
|
281
367
|
float: left;
|
282
|
-
margin-top: 20px;
|
283
368
|
margin-right: 10px;
|
284
369
|
width: 220px;
|
285
370
|
pointer-events: auto; // Since we removed the pointer-events from parent, we need this to allow the scroll to be clicked on.
|
286
371
|
// Mobile Sizes - Once in mobile, float-box should fit the whole screen.
|
287
372
|
@media (max-width:767px) {
|
288
|
-
width:
|
373
|
+
width: 160px
|
289
374
|
}
|
290
375
|
}
|
291
376
|
.float-box-new-btn {
|
292
377
|
float: right;
|
293
|
-
margin-top: 20px;
|
378
|
+
// margin-top: 20px;
|
294
379
|
pointer-events: auto; // Since we removed the pointer-events from parent, we need this to allow the scroll to be clicked on.
|
295
380
|
}
|
296
381
|
}
|
297
382
|
// Head of an index tab in the float box.
|
298
|
-
|
383
|
+
.float-box-container .float-box-body .float-box-index-tab .float-box-index-table-head {
|
299
384
|
@include float-box-fixed;
|
300
385
|
width: 100%;
|
301
386
|
padding: 0 15px;
|
302
387
|
pointer-events: none; // This allows a user to scroll the body of the float-box even though this element is fixed.
|
303
|
-
|
304
|
-
color: black;
|
305
|
-
text-decoration: none;
|
388
|
+
.float-box-clickable {
|
306
389
|
pointer-events: auto; // Since we removed the pointer-events from parent, we need this to allow the scroll to be clicked on.
|
307
390
|
}
|
308
391
|
}
|
309
392
|
// Table of an index tab in the float box.
|
310
|
-
|
393
|
+
.float-box-container .float-box-body .float-box-index-tab .float-box-index-table {
|
311
394
|
padding: 0 15px;
|
312
395
|
}
|
313
396
|
// Head of an index tab in the float box.
|
314
|
-
|
315
|
-
img {
|
397
|
+
.float-box-index-tab .float-box-index-row {
|
398
|
+
.float-box-img {
|
399
|
+
float: left;
|
316
400
|
width: 40px;
|
317
401
|
height: 40px;
|
402
|
+
margin-right: 10px;
|
403
|
+
}
|
404
|
+
.img-small{
|
405
|
+
width: 30px;
|
406
|
+
height: 30px;
|
318
407
|
}
|
319
408
|
h4 {
|
320
409
|
margin-bottom: 0;
|
@@ -324,7 +413,7 @@ f
|
|
324
413
|
}
|
325
414
|
}
|
326
415
|
// ====== float-box-info-tab ======
|
327
|
-
|
416
|
+
.float-box-container .float-box-body .float-box-info-tab .float-box-info-row {
|
328
417
|
border-bottom: 1px solid lightgrey;
|
329
418
|
padding: 5px 15px;
|
330
419
|
font-size: 18px;
|
@@ -335,18 +424,18 @@ f
|
|
335
424
|
|
336
425
|
// ====== Space for float-box-body ======
|
337
426
|
// Index Tab Head | Space
|
338
|
-
|
427
|
+
.float-box-index-tab-head-space{
|
339
428
|
@include transition(.5s);
|
340
429
|
height: 50px;
|
341
430
|
}
|
342
431
|
// Space needed for head of an index tab in the float box.
|
343
|
-
|
432
|
+
.float-box-container .float-box-index-table-head-space{
|
344
433
|
@include transition(.5s);
|
345
434
|
height: 32px;
|
346
435
|
}
|
347
436
|
|
348
437
|
// This will potentially be used as the float box head if we need it any thinner.
|
349
|
-
|
438
|
+
.float-box-container .float-box-small-head{
|
350
439
|
img{
|
351
440
|
width: 50px;
|
352
441
|
height: 50px;
|
@@ -1,2 +1,2 @@
|
|
1
|
-
#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}
|
1
|
+
#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}
|
2
2
|
/*# sourceMappingURL=angular-float-box.min.css.map */
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: angular-float-box
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.1.
|
4
|
+
version: 0.1.3
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Alexander Mcritchie
|
8
8
|
autorequire:
|
9
9
|
bindir: exe
|
10
10
|
cert_chain: []
|
11
|
-
date: 2017-
|
11
|
+
date: 2017-07-25 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: bundler
|
@@ -63,7 +63,6 @@ extra_rdoc_files: []
|
|
63
63
|
files:
|
64
64
|
- ".gitignore"
|
65
65
|
- ".rspec"
|
66
|
-
- ".sass-cache/57b3601a17f3b68a34229d713831e0d6fc4b15a6/angular-float-box.css.scssc"
|
67
66
|
- ".travis.yml"
|
68
67
|
- Gemfile
|
69
68
|
- LICENSE.txt
|