expressionui 0.1.0 → 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/expressionui.gemspec +1 -1
- data/lib/expressionui/version.rb +1 -1
- data/vendor/assets/javascripts/expressionui.popover.js +147 -57
- data/vendor/assets/stylesheets/expressionui/_boilerplate.sass +1 -1
- data/vendor/assets/stylesheets/expressionui/_class_helpers.sass +14 -1
- data/vendor/assets/stylesheets/expressionui/_forms.sass +10 -16
- data/vendor/assets/stylesheets/expressionui/_helpers.sass +2 -1
- data/vendor/assets/stylesheets/expressionui/_popover.sass +30 -7
- metadata +3 -3
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 0253dc7e252d078b79916366739f95f7c73f31ee
|
|
4
|
+
data.tar.gz: 7d9acb348341770234533ca9bbb862fbad12825c
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 19192f4dec6656051934d3b0dd0927e4752ddd4a3d8356c8f04a0b30b192e1bb96074f2dbb7461fef8853f3f064bf8293d5fd3ee07f6cacfab30fbd4f2356d29
|
|
7
|
+
data.tar.gz: 0ef93d2008bca8424e7500fde8c073c21765e5794644c721bc64a7a3137afb91dee955a8ebf843d17345f22bf04519aba951ed56cf11b5110b810731b5dcb36e
|
data/expressionui.gemspec
CHANGED
|
@@ -10,7 +10,7 @@ Gem::Specification.new do |gem|
|
|
|
10
10
|
gem.email = ["jason@jasoncypret.com"]
|
|
11
11
|
gem.description = %q{A set of small JavaScript and SASS plugins that are designed to be reusable and enhance your UI. Ready to play with the Rails Asset Pipeline for faster and easier web development.}
|
|
12
12
|
gem.summary = %q{Some awesome SASS and JS shiz for your rails project}
|
|
13
|
-
gem.homepage = "http://
|
|
13
|
+
gem.homepage = "http://expressionui.com/"
|
|
14
14
|
gem.license = "MIT"
|
|
15
15
|
|
|
16
16
|
|
data/lib/expressionui/version.rb
CHANGED
|
@@ -6,67 +6,157 @@
|
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
(function ($) {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
(left >= 1 && left - $(window).scrollLeft() <= winLeftMax) ? pos += 'left' : pos += 'right';
|
|
32
|
-
}
|
|
9
|
+
var methods = {
|
|
10
|
+
defaults: {
|
|
11
|
+
content: $('.popover'),
|
|
12
|
+
padding: 5,
|
|
13
|
+
flush: false,
|
|
14
|
+
fixed: false,
|
|
15
|
+
close_on_scroll: false,
|
|
16
|
+
scroll_target: $(document),
|
|
17
|
+
scroll_threshold: 5,
|
|
18
|
+
close_on_click: "anywhere",
|
|
19
|
+
reposition_on_resize: false,
|
|
20
|
+
tooltip: false,
|
|
21
|
+
arrow_height: 12,
|
|
22
|
+
arrow_offset: 35,
|
|
23
|
+
arrow_position: null,
|
|
24
|
+
position_top: '',
|
|
25
|
+
position_left: '',
|
|
26
|
+
afterOpen: $.noop,
|
|
27
|
+
afterClose: $.noop
|
|
28
|
+
},
|
|
29
|
+
init: function (options) {
|
|
30
|
+
options = $.extend({}, methods.defaults, options);
|
|
33
31
|
|
|
32
|
+
var outter_height, outter_width;
|
|
33
|
+
outter_height = ($(this).outerHeight() === 0) ? $(this).attr('height') : $(this).outerHeight() ;
|
|
34
|
+
outter_width = ($(this).outerWidth() === 0) ? $(this).attr('width') : $(this).outerWidth() ;
|
|
35
|
+
|
|
36
|
+
options.position_left = $(this).offset().left + (outter_width / 2);
|
|
37
|
+
options.position_top = $(this).offset().top + (outter_height / 2);
|
|
34
38
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
left += $(this).width() - (tooltipWidth + (options.aOffset *2));
|
|
51
|
-
break;
|
|
52
|
-
case "bottomright":
|
|
53
|
-
top += -$(this).height() / 2 - tooltipHeight - options.padding;
|
|
54
|
-
left += $(this).width() - (tooltipWidth + (options.aOffset * 2));
|
|
55
|
-
break;
|
|
56
|
-
}
|
|
39
|
+
if(!options.arrow_position) options.arrow_position = $(this).popover('_positionArrow', options);
|
|
40
|
+
|
|
41
|
+
options.content.addClass('popover_container ' + options.arrow_position).css({visibility: 'hidden', display: 'block', zIndex: '9999'});
|
|
42
|
+
if(options.flush) options.content.addClass('flush');
|
|
43
|
+
if(options.tooltip) options.content.addClass('tooltip');
|
|
44
|
+
if (options.fixed) options.content.css({'position': 'fixed' });
|
|
45
|
+
|
|
46
|
+
var tooltipHeight = options.content.outerHeight(),
|
|
47
|
+
tooltipWidth = options.content.outerWidth();
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
if (options.fixed) {
|
|
51
|
+
options.position_top += -$(options.scroll_target).scrollTop();
|
|
52
|
+
options.position_left += -$(options.scroll_target).scrollLeft();
|
|
53
|
+
}
|
|
57
54
|
|
|
58
|
-
|
|
55
|
+
switch (options.arrow_position) {
|
|
56
|
+
case "topleft":
|
|
57
|
+
if (options.flush) {
|
|
58
|
+
options.position_top = outter_height;
|
|
59
|
+
options.position_left += -(outter_width/2)
|
|
60
|
+
} else {
|
|
61
|
+
options.position_top += (outter_height/2) + options.arrow_height + options.padding;
|
|
62
|
+
options.position_left += -(options.arrow_offset);
|
|
63
|
+
}
|
|
64
|
+
break;
|
|
65
|
+
case "bottomleft":
|
|
66
|
+
options.position_top += -tooltipHeight -(outter_height/2) - options.arrow_height - options.padding;
|
|
67
|
+
options.position_left += -(options.arrow_offset);
|
|
68
|
+
break;
|
|
69
|
+
case "topright":
|
|
70
|
+
options.position_top += (outter_height/2) + options.arrow_height + options.padding;
|
|
71
|
+
options.position_left += -(tooltipWidth) + (options.arrow_offset)
|
|
72
|
+
break;
|
|
59
73
|
|
|
60
|
-
|
|
74
|
+
case "bottomright":
|
|
75
|
+
options.position_top += -tooltipHeight -(outter_height/2) - options.arrow_height - options.padding;
|
|
76
|
+
options.position_left += -(tooltipWidth) + (options.arrow_offset)
|
|
77
|
+
break;
|
|
78
|
+
}
|
|
61
79
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
num++;
|
|
65
|
-
if (num > 1) {
|
|
66
|
-
$(options.content).removeClass('popover_container topleft bottomleft topright bottomright').hide();
|
|
67
|
-
options.afterClose.apply(this, [options.content])
|
|
68
|
-
$(document).unbind('click.popover');
|
|
80
|
+
if (options.tooltip) {
|
|
81
|
+
options.position_left = $(this).offset().left + (outter_width / 2) -(tooltipWidth/2);
|
|
69
82
|
}
|
|
70
|
-
|
|
83
|
+
|
|
84
|
+
// TODO: add an active_popover class to $(this)
|
|
85
|
+
options.content.css({ 'left': options.position_left + 'px', 'top': options.position_top + 'px', 'display': 'none', 'visibility': 'visible' }).show();
|
|
86
|
+
options.afterOpen.apply(this, [options.content])
|
|
87
|
+
|
|
88
|
+
$(this).popover('_setupEvents', options);
|
|
89
|
+
},
|
|
90
|
+
close: function (options) {
|
|
91
|
+
options = $.extend({}, methods.defaults, options);
|
|
92
|
+
$(options.content).removeClass('popover_container topleft bottomleft topright bottomright tooltip flush').attr('style', '').hide();
|
|
93
|
+
$(this).popover('_destroyEvents', options);
|
|
94
|
+
options.afterClose.apply(this, [options.content]);
|
|
95
|
+
},
|
|
96
|
+
_destroyEvents: function (options) {
|
|
97
|
+
$(document).unbind('click.popover');
|
|
98
|
+
$(document).unbind('scroll.popover');
|
|
99
|
+
$(document).unbind('resize.popover');
|
|
100
|
+
},
|
|
101
|
+
_setupEvents: function (options) {
|
|
102
|
+
var _this = $(this),
|
|
103
|
+
click = 0;
|
|
104
|
+
|
|
105
|
+
if (options.reposition_on_resize) {
|
|
106
|
+
$(window).bind("resize.popover", function () {
|
|
107
|
+
// TODO:
|
|
108
|
+
//$(this).popover('_positionArrow', options);
|
|
109
|
+
//$(this).popover('_positionPopover', options);
|
|
110
|
+
});
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
$(document).bind('click.popover', function(e) {
|
|
114
|
+
click++;
|
|
115
|
+
if (click > 1) {
|
|
116
|
+
$(this).popover('close', options);
|
|
117
|
+
}
|
|
118
|
+
});
|
|
119
|
+
|
|
120
|
+
if (options.close_on_scroll) {
|
|
121
|
+
$(options.scroll_target).bind('scroll.popover', function() {
|
|
122
|
+
$(document).trigger('content.scroll')
|
|
123
|
+
if ( $(options.scroll_target).scrollTop() >= options.scroll_threshold ){
|
|
124
|
+
$(this).popover('close', options);
|
|
125
|
+
}
|
|
126
|
+
});
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
switch (options.close_on_click) {
|
|
130
|
+
case "anywhere":
|
|
131
|
+
// no block
|
|
132
|
+
break;
|
|
133
|
+
case "outside":
|
|
134
|
+
$(options.content).on('click.popover', function(e) {
|
|
135
|
+
e.stopPropagation();
|
|
136
|
+
});
|
|
137
|
+
break;
|
|
138
|
+
}
|
|
139
|
+
},
|
|
140
|
+
_positionArrow: function (options) {
|
|
141
|
+
var winTopMax = $(window).height() / 2,
|
|
142
|
+
winLeftMax = $(window).width() / 2,
|
|
143
|
+
pos = '';
|
|
144
|
+
|
|
145
|
+
(options.position_top >= 1 && options.position_top - $(options.scroll_target).scrollTop() <= winTopMax) ? pos = 'top' : pos = 'bottom';
|
|
146
|
+
(options.position_left >= 1 && options.position_left - $(options.scroll_target).scrollLeft() <= winLeftMax) ? pos += 'left' : pos += 'right';
|
|
147
|
+
|
|
148
|
+
return pos;
|
|
149
|
+
},
|
|
150
|
+
_positionPopover: function (options) {
|
|
151
|
+
}
|
|
152
|
+
};
|
|
153
|
+
$.fn.popover = function (method) {
|
|
154
|
+
if (methods[method]) {
|
|
155
|
+
return methods[ method ].apply(this, Array.prototype.slice.call(arguments, 1));
|
|
156
|
+
} else if (typeof method === 'object' || !method) {
|
|
157
|
+
return methods.init.apply(this, arguments);
|
|
158
|
+
} else {
|
|
159
|
+
$.error('Method ' + method + ' does not exist on expressionui.popover');
|
|
160
|
+
}
|
|
71
161
|
}
|
|
72
|
-
})(jQuery);
|
|
162
|
+
})(jQuery);
|
|
@@ -12,13 +12,13 @@ article, aside, details, figcaption, figure, footer, header, hgroup, nav, sectio
|
|
|
12
12
|
|
|
13
13
|
html
|
|
14
14
|
font-size: 100%
|
|
15
|
-
overflow-y: scroll
|
|
16
15
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0)
|
|
17
16
|
-webkit-text-size-adjust: 100%
|
|
18
17
|
-ms-text-size-adjust: 100%
|
|
19
18
|
|
|
20
19
|
body
|
|
21
20
|
margin: 0
|
|
21
|
+
overflow-y: scroll
|
|
22
22
|
font-size: $font_size
|
|
23
23
|
line-height: 1.231
|
|
24
24
|
+font_stack
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
.btn
|
|
2
|
-
+btn(
|
|
2
|
+
+btn(shade(white, 5%))
|
|
3
3
|
&.highlight
|
|
4
4
|
+btn($highlight)
|
|
5
5
|
&.accent
|
|
@@ -33,6 +33,19 @@
|
|
|
33
33
|
&.icon
|
|
34
34
|
font-size: 250%
|
|
35
35
|
|
|
36
|
+
.menu
|
|
37
|
+
padding: 0 !important
|
|
38
|
+
ul
|
|
39
|
+
padding: 0 !important
|
|
40
|
+
.btn
|
|
41
|
+
+border-radius(0)
|
|
42
|
+
li, a, .btn
|
|
43
|
+
+inline_block
|
|
44
|
+
li:first-child
|
|
45
|
+
+border-left-radius(3px)
|
|
46
|
+
li:last-child
|
|
47
|
+
+border-right-radius(3px)
|
|
48
|
+
|
|
36
49
|
.text_tip
|
|
37
50
|
color: $tip
|
|
38
51
|
.text_error
|
|
@@ -157,7 +157,6 @@ input
|
|
|
157
157
|
height: ($field_height)/1.5
|
|
158
158
|
text-align: left
|
|
159
159
|
padding-left: $pad*3.5
|
|
160
|
-
|
|
161
160
|
&:after
|
|
162
161
|
+border-radius(300px)
|
|
163
162
|
content: " "
|
|
@@ -166,16 +165,12 @@ input
|
|
|
166
165
|
width: ($field_height)/1.5
|
|
167
166
|
height: ($field_height)/1.5
|
|
168
167
|
position: relative
|
|
169
|
-
|
|
170
168
|
&:checked
|
|
171
|
-
|
|
172
|
-
|
|
173
169
|
background: $success
|
|
174
170
|
border: 2px solid $success
|
|
175
171
|
padding-left: (($field_height*2)-($field_height)/1.5)-(4px)
|
|
176
172
|
padding-right: 0
|
|
177
173
|
+box-shadow(none)
|
|
178
|
-
|
|
179
174
|
&:before
|
|
180
175
|
+text_color($success, false)
|
|
181
176
|
left: auto
|
|
@@ -183,8 +178,6 @@ input
|
|
|
183
178
|
text-align: right
|
|
184
179
|
padding-left: 0
|
|
185
180
|
padding-right: $pad*1.5
|
|
186
|
-
|
|
187
|
-
|
|
188
181
|
&:after
|
|
189
182
|
margin: 0
|
|
190
183
|
top: auto
|
|
@@ -233,7 +226,7 @@ input
|
|
|
233
226
|
|
|
234
227
|
// Form Styling
|
|
235
228
|
// -------------------------
|
|
236
|
-
.form
|
|
229
|
+
.form, form
|
|
237
230
|
.field
|
|
238
231
|
display: block
|
|
239
232
|
padding: 0
|
|
@@ -262,14 +255,15 @@ input
|
|
|
262
255
|
font-weight: 100
|
|
263
256
|
&:checked ~ span
|
|
264
257
|
color: $accent
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
258
|
+
|
|
259
|
+
&.toggle
|
|
260
|
+
margin: $pad/2 $pad 0 0
|
|
261
|
+
// Toggle Right
|
|
262
|
+
// -------------------------
|
|
263
|
+
&.right
|
|
264
|
+
margin: $pad/2 0 0 $pad
|
|
265
|
+
|
|
266
|
+
|
|
273
267
|
|
|
274
268
|
input[type=radio]
|
|
275
269
|
margin: ($pad)-2px $pad 0 0
|
|
@@ -271,12 +271,13 @@
|
|
|
271
271
|
font-family: $icon_font
|
|
272
272
|
font-weight: normal !important
|
|
273
273
|
-webkit-font-smoothing: antialiased
|
|
274
|
+
text-transform: none !important
|
|
274
275
|
|
|
275
276
|
=icon_inline
|
|
276
277
|
+icon_font
|
|
277
278
|
position: relative
|
|
278
279
|
content: attr(data-icon)
|
|
279
|
-
text-transform: none
|
|
280
|
+
text-transform: none !important
|
|
280
281
|
vertical-align: baseline
|
|
281
282
|
line-height: 0
|
|
282
283
|
font-size: 1.4em
|
|
@@ -1,7 +1,13 @@
|
|
|
1
1
|
.popover_container
|
|
2
2
|
position: absolute
|
|
3
|
-
+box-shadow(rgba(black, 0.
|
|
4
|
-
|
|
3
|
+
+box-shadow(rgba(black, 0.1) 0 1px 20px)
|
|
4
|
+
border: 1px solid rgba(black, 0.1)
|
|
5
|
+
background: white
|
|
6
|
+
+border-radius(3px)
|
|
7
|
+
&.flush
|
|
8
|
+
+border-top-radius(0)
|
|
9
|
+
&:before
|
|
10
|
+
content: none
|
|
5
11
|
&:before
|
|
6
12
|
content: '4'
|
|
7
13
|
+icon_font
|
|
@@ -9,10 +15,10 @@
|
|
|
9
15
|
line-height: 32px
|
|
10
16
|
position: absolute
|
|
11
17
|
display: block
|
|
12
|
-
color:
|
|
18
|
+
color: white
|
|
13
19
|
+rotate(90deg)
|
|
14
20
|
z-index: 1
|
|
15
|
-
+text-shadow(rgba(black, 0.
|
|
21
|
+
+text-shadow(rgba(black, 0.1) 1px 0 0)
|
|
16
22
|
&.topleft:before
|
|
17
23
|
top: -20px
|
|
18
24
|
left: 27px
|
|
@@ -22,9 +28,26 @@
|
|
|
22
28
|
left: 27px
|
|
23
29
|
&.topright:before
|
|
24
30
|
top: -20px
|
|
25
|
-
right:
|
|
31
|
+
right: 27px
|
|
26
32
|
+rotate(270deg)
|
|
27
33
|
&.bottomright:before
|
|
28
34
|
bottom: -20px
|
|
29
|
-
right:
|
|
30
|
-
|
|
35
|
+
right: 27px
|
|
36
|
+
&.topleft.tooltip, &.topright.tooltip
|
|
37
|
+
background: tint(black, 10%)
|
|
38
|
+
padding: $pad $pad*1.5
|
|
39
|
+
color: white
|
|
40
|
+
&:before
|
|
41
|
+
right: auto
|
|
42
|
+
left: 50%
|
|
43
|
+
margin-left: -8px
|
|
44
|
+
color: tint(black, 10%)
|
|
45
|
+
&.bottomleft.tooltip, &.bottomright.tooltip
|
|
46
|
+
background: tint(black, 10%)
|
|
47
|
+
padding: $pad $pad*1.5
|
|
48
|
+
color: white
|
|
49
|
+
&:before
|
|
50
|
+
color: tint(black, 10%)
|
|
51
|
+
right: auto
|
|
52
|
+
left: 50%
|
|
53
|
+
margin-left: -8px
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: expressionui
|
|
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
|
- Jason Cypret
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2013-06-
|
|
11
|
+
date: 2013-06-19 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: bundler
|
|
@@ -133,7 +133,7 @@ files:
|
|
|
133
133
|
- vendor/assets/stylesheets/expressionui/loading/_progress.sass
|
|
134
134
|
- vendor/assets/stylesheets/expressionui/loading/_spinner.sass
|
|
135
135
|
- vendor/assets/stylesheets/expressionui/loading/_three_dots.sass
|
|
136
|
-
homepage: http://
|
|
136
|
+
homepage: http://expressionui.com/
|
|
137
137
|
licenses:
|
|
138
138
|
- MIT
|
|
139
139
|
metadata: {}
|