groundworkcss-rails 0.1 → 0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/lib/generators/groundworkcss/install/templates/groundwork-and-overrides.scss +1 -1
- data/lib/generators/groundworkcss/install/templates/groundwork-and-overrides.scss~ +3 -1
- data/lib/groundworkcss/rails/version.rb +1 -1
- data/lib/groundworkcss/rails/version.rb~ +4 -6
- data/vendor/assets/javascripts/{groundwork.js → groundwork-hook.js} +0 -0
- data/vendor/assets/javascripts/groundworkcss/coffee/groundwork.coffee +1 -1
- data/vendor/assets/javascripts/groundworkcss/coffee/plugins/jquery.modals.coffee +162 -0
- data/vendor/assets/javascripts/groundworkcss/coffee/plugins/jquery.popover.coffee +198 -0
- data/vendor/assets/javascripts/groundworkcss/coffee/plugins/jquery.responsiveTables.coffee +56 -0
- data/vendor/assets/javascripts/groundworkcss/coffee/plugins/jquery.responsiveText.coffee +32 -0
- data/vendor/assets/javascripts/groundworkcss/coffee/plugins/jquery.tooltip.coffee +121 -0
- data/vendor/assets/javascripts/groundworkcss/groundwork.js +16 -14
- data/vendor/assets/javascripts/groundworkcss/plugins/jquery.modals.js +15 -13
- data/vendor/assets/stylesheets/groundworkcss-scss/_buttons.scss +7 -7
- data/vendor/assets/stylesheets/groundworkcss-scss/_forms.scss +4 -1
- data/vendor/assets/stylesheets/groundworkcss-scss/_mixins.scss +5 -5
- data/vendor/assets/stylesheets/groundworkcss-scss/_mobile-reset.scss +1 -1
- data/vendor/assets/stylesheets/groundworkcss-scss/_modals.scss +7 -6
- data/vendor/assets/stylesheets/groundworkcss-scss/_navigation.scss +51 -18
- data/vendor/assets/stylesheets/groundworkcss-scss/_responsive.scss +9 -9
- data/vendor/assets/stylesheets/groundworkcss-scss/_social-icons.scss +54 -54
- data/vendor/assets/stylesheets/groundworkcss-scss/_tables.scss +5 -0
- data/vendor/assets/stylesheets/groundworkcss-scss/_tabs.scss +41 -2
- data/vendor/assets/stylesheets/groundworkcss-scss/_typography.scss +31 -56
- data/vendor/assets/stylesheets/groundworkcss-scss/_webfonts.scss +1 -1
- data/vendor/assets/stylesheets/groundworkcss-scss/groundwork-ie.scss +61 -0
- data/vendor/assets/stylesheets/groundworkcss-scss/groundwork.scss +1 -1
- data/vendor/assets/stylesheets/groundworkcss-scss/no-svg.scss +344 -57
- metadata +20 -15
File without changes
|
@@ -0,0 +1,162 @@
|
|
1
|
+
###
|
2
|
+
*
|
3
|
+
* jQuery Modals by Gary Hepting
|
4
|
+
* https://github.com/ghepting/modal
|
5
|
+
*
|
6
|
+
* Based on Avgrund by Hakim El Hattab <3
|
7
|
+
*
|
8
|
+
###
|
9
|
+
|
10
|
+
(($) ->
|
11
|
+
|
12
|
+
# setup iframe modal
|
13
|
+
if $('div#iframeModal').length < 1
|
14
|
+
$('body').append('<div class="iframe modal" id="iframeModal"><iframe marginheight="0" marginwidth="0" frameborder="0"></iframe></div>')
|
15
|
+
$('div#iframeModal').prepend('<i class="close icon-remove"></i>').prepend('<i class="fullscreen icon-resize-full"></i>')
|
16
|
+
$('a.modal').each ->
|
17
|
+
$(this).attr('data-url',$(this).attr('href'))
|
18
|
+
$(this).attr('href','#iframeModal')
|
19
|
+
# bind external modal links to iframe modal
|
20
|
+
$('a.modal').on "click", (e) ->
|
21
|
+
$('div#iframeModal iframe').replaceWith('<iframe marginheight="0" marginwidth="0" frameborder="0" width="100%" height="100%" src="'+$(this).attr('data-url')+'"></iframe>')
|
22
|
+
e.preventDefault()
|
23
|
+
false
|
24
|
+
|
25
|
+
elems = []
|
26
|
+
$.fn.modal = ->
|
27
|
+
|
28
|
+
@each ->
|
29
|
+
$(this).not('#iframeModal').wrapInner('<div class="modal-content"></div>')
|
30
|
+
$(this).prepend('<i class="close icon-remove"></i>').prepend('<i class="fullscreen icon-resize-full"></i>').appendTo('body')
|
31
|
+
# bind each modal link to a modal
|
32
|
+
$('[href=#'+$(this).attr('id')+']').on "click", (e) ->
|
33
|
+
modals.open($(this).attr('href'))
|
34
|
+
e.preventDefault()
|
35
|
+
return false
|
36
|
+
|
37
|
+
# close button
|
38
|
+
$('div.modal .close').on "click", ->
|
39
|
+
modals.close()
|
40
|
+
# fullscreen button
|
41
|
+
$('div.modal .fullscreen').on "click", ->
|
42
|
+
modals.fullscreen($(this).parent('div.modal'))
|
43
|
+
|
44
|
+
modals = (->
|
45
|
+
|
46
|
+
# ready state
|
47
|
+
$('html').addClass('modal-ready')
|
48
|
+
|
49
|
+
# create overlay
|
50
|
+
if $("#overlay").length < 1
|
51
|
+
$('body').append('<div id="overlay"></div>')
|
52
|
+
|
53
|
+
# bind overlay to close
|
54
|
+
$('#overlay, div.modal .close').bind "click", (e) ->
|
55
|
+
close()
|
56
|
+
|
57
|
+
open = (elem) ->
|
58
|
+
# bind esc key
|
59
|
+
$(window).bind "keydown", (e) ->
|
60
|
+
keyCode = (if (e.which) then e.which else e.keyCode)
|
61
|
+
if keyCode is 27
|
62
|
+
close()
|
63
|
+
$(elem).addClass("active")
|
64
|
+
unless $(elem).hasClass('iframe')
|
65
|
+
$(elem).css
|
66
|
+
width: 'auto',
|
67
|
+
height: 'auto'
|
68
|
+
$(elem).css
|
69
|
+
height: $(elem).outerHeight(),
|
70
|
+
$(elem).css
|
71
|
+
top: '50%',
|
72
|
+
left: '50%',
|
73
|
+
'margin-top': ($(elem).outerHeight() / -2) + 'px',
|
74
|
+
'margin-left': ($(elem).outerWidth() / -2) + 'px'
|
75
|
+
setTimeout ->
|
76
|
+
$('html').addClass("modal-active")
|
77
|
+
, 0
|
78
|
+
setTimeout ->
|
79
|
+
$('html').removeClass('modal-ready')
|
80
|
+
, 400
|
81
|
+
return
|
82
|
+
|
83
|
+
close = ->
|
84
|
+
modal = $('div.modal.active')
|
85
|
+
$(window).unbind "keydown"
|
86
|
+
$('html').removeClass("modal-active").addClass('modal-ready')
|
87
|
+
if modal.hasClass('iframe')
|
88
|
+
$('div#iframeModal iframe').replaceWith('<iframe marginheight="0" marginwidth="0" frameborder="0"></iframe>')
|
89
|
+
modal.css
|
90
|
+
width: '80%',
|
91
|
+
height: '80%'
|
92
|
+
else
|
93
|
+
modal.css
|
94
|
+
width: 'auto',
|
95
|
+
height: 'auto'
|
96
|
+
modal.css
|
97
|
+
top: '10%',
|
98
|
+
left: '10%',
|
99
|
+
'max-width': '80%',
|
100
|
+
'max-height': '80%',
|
101
|
+
'margin-top': 0,
|
102
|
+
'margin-left': 0
|
103
|
+
modal.removeClass("active").removeClass("fullscreen")
|
104
|
+
$('i.fullscreen', modal).removeClass('icon-resize-small').addClass('icon-resize-full')
|
105
|
+
return
|
106
|
+
|
107
|
+
fullscreen = (elem) ->
|
108
|
+
if $('div.modal.active').hasClass('fullscreen')
|
109
|
+
$('div.modal i.fullscreen').removeClass('icon-resize-small').addClass('icon-resize-full')
|
110
|
+
if $('div.modal.active').hasClass('iframe')
|
111
|
+
$('div.modal.active').css
|
112
|
+
width: '80%',
|
113
|
+
height: '80%'
|
114
|
+
else
|
115
|
+
$('div.modal.active').css
|
116
|
+
width: 'auto',
|
117
|
+
height: 'auto'
|
118
|
+
$('div.modal.active').css
|
119
|
+
height: $('div.modal.active').outerHeight()
|
120
|
+
$('div.modal.active').removeClass('fullscreen').css
|
121
|
+
'max-width': '80%',
|
122
|
+
'max-height': '80%'
|
123
|
+
$('div.modal.active').delay(100).css
|
124
|
+
top: '50%',
|
125
|
+
left: '50%',
|
126
|
+
'margin-top': ($('div.modal.active').outerHeight() / -2) + 'px',
|
127
|
+
'margin-left': ($('div.modal.active').outerWidth() / -2) + 'px'
|
128
|
+
else
|
129
|
+
$('div.modal i.fullscreen').addClass('icon-resize-small').removeClass('icon-resize-full')
|
130
|
+
$('div.modal.active').addClass('fullscreen').css
|
131
|
+
top: 0,
|
132
|
+
left: 0,
|
133
|
+
'margin-top': 0,
|
134
|
+
'margin-left': 0,
|
135
|
+
width: '100%',
|
136
|
+
height: '100%',
|
137
|
+
'max-width': '100%',
|
138
|
+
'max-height': '100%'
|
139
|
+
return
|
140
|
+
|
141
|
+
open: open
|
142
|
+
close: close
|
143
|
+
fullscreen: fullscreen
|
144
|
+
)()
|
145
|
+
|
146
|
+
$(window).resize ->
|
147
|
+
$('div.modal.active').each ->
|
148
|
+
unless $(this).hasClass('fullscreen')
|
149
|
+
$(this).removeClass('active').css(
|
150
|
+
top: '50%',
|
151
|
+
left: '50%',
|
152
|
+
'margin-top': ($(this).outerHeight() / -2) + 'px',
|
153
|
+
'margin-left': ($(this).outerWidth() / -2) + 'px'
|
154
|
+
).addClass('active')
|
155
|
+
unless $(this).hasClass('iframe')
|
156
|
+
$(this).css
|
157
|
+
height: 'auto'
|
158
|
+
$(this).css
|
159
|
+
height: $(this).outerHeight()
|
160
|
+
|
161
|
+
|
162
|
+
) jQuery
|
@@ -0,0 +1,198 @@
|
|
1
|
+
###
|
2
|
+
*
|
3
|
+
* jQuery Popovers by Gary Hepting - https://github.com/ghepting/jquery-popovers
|
4
|
+
*
|
5
|
+
* Open source under the BSD License.
|
6
|
+
*
|
7
|
+
* Copyright © 2013 Gary Hepting. All rights reserved.
|
8
|
+
*
|
9
|
+
###
|
10
|
+
|
11
|
+
(($) ->
|
12
|
+
$.fn.popover = (options) ->
|
13
|
+
defaults =
|
14
|
+
hover: false # show popovers on hover
|
15
|
+
click: true # show popovers on click
|
16
|
+
resize: true # resize popovers on window resize/orientation change
|
17
|
+
scroll: true # reposition popovers on scroll
|
18
|
+
topOffset: 0 # top offset (accomodate for fixed navigation, etc.)
|
19
|
+
delay: 500 # delay before hiding (ms)
|
20
|
+
speed: 100 # animation speed (ms)
|
21
|
+
|
22
|
+
options = $.extend(defaults, options)
|
23
|
+
|
24
|
+
popover = $('#popover') # popover element
|
25
|
+
delayHide = '' # delay
|
26
|
+
delayAdjust = '' # delay
|
27
|
+
trigger = '' # trigger element
|
28
|
+
|
29
|
+
# get element position relative to the viewport
|
30
|
+
getElementPosition = (el) ->
|
31
|
+
offset = el.offset()
|
32
|
+
win = $(window)
|
33
|
+
top: top = offset.top - win.scrollTop()
|
34
|
+
left: left = offset.left - win.scrollLeft()
|
35
|
+
bottom: bottom = win.height() - top - el.outerHeight()
|
36
|
+
right: right = win.width() - left - el.outerWidth()
|
37
|
+
|
38
|
+
resetPopover = (resize) ->
|
39
|
+
popover.css
|
40
|
+
top: 'auto'
|
41
|
+
right: 'auto'
|
42
|
+
bottom: 'auto'
|
43
|
+
left: 'auto'
|
44
|
+
if resize
|
45
|
+
popover.css
|
46
|
+
width: 'auto'
|
47
|
+
popover.removeClass('top')
|
48
|
+
popover.removeClass('right')
|
49
|
+
popover.removeClass('bottom')
|
50
|
+
popover.removeClass('left')
|
51
|
+
|
52
|
+
setPosition = (trigger, skipAnimation, resize) ->
|
53
|
+
if trigger
|
54
|
+
if resize
|
55
|
+
resetPopover(true)
|
56
|
+
else
|
57
|
+
resetPopover()
|
58
|
+
# get trigger element coordinates
|
59
|
+
coords = getElementPosition(trigger)
|
60
|
+
# popover dimensions
|
61
|
+
if popover.outerWidth() > ($(window).width() - 20)
|
62
|
+
popover.css('width',$(window).width() - 20)
|
63
|
+
# adjust max width of popover
|
64
|
+
popover.css('max-width',
|
65
|
+
Math.min(
|
66
|
+
($(window).width()-parseInt($('body').css('padding-left'))-parseInt($('body').css('padding-right'))),
|
67
|
+
parseInt(popover.css('max-width'))
|
68
|
+
)
|
69
|
+
)
|
70
|
+
width = popover.outerWidth()
|
71
|
+
height = popover.outerHeight()
|
72
|
+
# horizontal positioning
|
73
|
+
attrs = {}
|
74
|
+
if coords.left <= coords.right # default position
|
75
|
+
popover.addClass('left')
|
76
|
+
attrs.left = coords.left
|
77
|
+
else # pin from right side
|
78
|
+
popover.addClass('right')
|
79
|
+
attrs.right = coords.right
|
80
|
+
# veritcal positioning
|
81
|
+
if (coords.top-options.topOffset) > (height+20) # top positioned popover
|
82
|
+
popover.addClass('top')
|
83
|
+
attrs.top = trigger.offset().top - height - 20
|
84
|
+
else # bottom positioned popover
|
85
|
+
popover.addClass('bottom')
|
86
|
+
attrs.top = trigger.offset().top + 15
|
87
|
+
popover.css attrs
|
88
|
+
# compensate for adjustment normally made by animation in init_popover()
|
89
|
+
if skipAnimation
|
90
|
+
popover.css
|
91
|
+
top: '+=10'
|
92
|
+
|
93
|
+
closePopover = ->
|
94
|
+
$('.popover-trigger').removeClass('popover-trigger')
|
95
|
+
popover.removeClass('sticky').remove()
|
96
|
+
|
97
|
+
showPopover = (e) ->
|
98
|
+
trigger = $(e.target) # trigger element
|
99
|
+
if !trigger.hasClass('popover-trigger')
|
100
|
+
closePopover() # close popover
|
101
|
+
trigger.addClass('popover-trigger')
|
102
|
+
# set popover content
|
103
|
+
tip = $('#'+trigger.attr('data-content')).html()
|
104
|
+
popover = $("<div id=\"popover\"></div>") # create popover DOM element
|
105
|
+
return false if not tip or tip is ""
|
106
|
+
# remove title to avoid overlapping default tooltips
|
107
|
+
trigger.removeAttr "title"
|
108
|
+
# add popover element to DOM
|
109
|
+
popover.css("opacity", 0).html(tip).appendTo "body"
|
110
|
+
# initialize popover
|
111
|
+
setPosition(trigger)
|
112
|
+
popover.animate
|
113
|
+
top: "+=10"
|
114
|
+
opacity: 1
|
115
|
+
, options.speed
|
116
|
+
|
117
|
+
# popover click
|
118
|
+
popover.bind "click", (e) ->
|
119
|
+
if(e.target.tagName != 'a')
|
120
|
+
popover.addClass('sticky')
|
121
|
+
e.stopPropagation()
|
122
|
+
e.preventDefault()
|
123
|
+
false
|
124
|
+
|
125
|
+
# close button click
|
126
|
+
popover.find('.close').bind "click", (e) ->
|
127
|
+
$('.popover-trigger').removeClass('popover-trigger')
|
128
|
+
popover.removeClass('sticky').remove()
|
129
|
+
e.stopPropagation()
|
130
|
+
e.preventDefault()
|
131
|
+
false
|
132
|
+
|
133
|
+
# hover into the popover
|
134
|
+
popover.bind
|
135
|
+
mouseenter: ->
|
136
|
+
# cancel closing popover
|
137
|
+
clearTimeout(delayHide)
|
138
|
+
mouseleave: ->
|
139
|
+
if(!popover.hasClass('sticky'))
|
140
|
+
# close popover on a delay if it's not sticky
|
141
|
+
delayHide = setTimeout (->
|
142
|
+
$('.popover-trigger').removeClass('popover-trigger')
|
143
|
+
popover.removeClass('sticky').remove()
|
144
|
+
), 500
|
145
|
+
|
146
|
+
|
147
|
+
@each ->
|
148
|
+
$this = $(this)
|
149
|
+
|
150
|
+
if options.hover
|
151
|
+
# hover on trigger element
|
152
|
+
$this.bind
|
153
|
+
mouseenter: (e) ->
|
154
|
+
trigger = $(e.target)
|
155
|
+
clearTimeout(delayHide) # cancel delayed close
|
156
|
+
if(!$this.hasClass('popover-trigger') && !popover.hasClass('sticky'))
|
157
|
+
showPopover(e) # show popover
|
158
|
+
mouseleave: ->
|
159
|
+
if(!popover.hasClass('sticky'))
|
160
|
+
# delay closing popover
|
161
|
+
delayHide = setTimeout ->
|
162
|
+
closePopover() #close popover
|
163
|
+
, options.delay
|
164
|
+
|
165
|
+
if options.click
|
166
|
+
# click trigger element
|
167
|
+
$this.bind "click", (e) ->
|
168
|
+
trigger = $(e.target)
|
169
|
+
if(!trigger.hasClass('popover-trigger'))
|
170
|
+
closePopover() #close popover
|
171
|
+
showPopover(e) # show popover
|
172
|
+
popover.addClass('sticky') # make popover sticky
|
173
|
+
e.preventDefault()
|
174
|
+
e.stopPropagation()
|
175
|
+
false
|
176
|
+
|
177
|
+
if options.resize
|
178
|
+
# handle viewport resize
|
179
|
+
$(window).resize ->
|
180
|
+
clearTimeout(delayAdjust) # cancel delayed adjustment
|
181
|
+
# attempt to wait until user finishes resizing the window
|
182
|
+
delayAdjust = setTimeout ->
|
183
|
+
setPosition(trigger, true, true)
|
184
|
+
, 100
|
185
|
+
|
186
|
+
if options.scroll
|
187
|
+
# handle window scroll
|
188
|
+
$(window).scroll ->
|
189
|
+
setPosition(trigger, true)
|
190
|
+
|
191
|
+
# close popover on body click
|
192
|
+
$('html, body').bind "click", (e) ->
|
193
|
+
$('.popover-trigger').removeClass('popover-trigger')
|
194
|
+
popover.removeClass('sticky').remove()
|
195
|
+
|
196
|
+
|
197
|
+
|
198
|
+
) jQuery
|
@@ -0,0 +1,56 @@
|
|
1
|
+
###
|
2
|
+
*
|
3
|
+
* jQuery ResponsiveTables by Gary Hepting - https://github.com/ghepting/responsiveTables
|
4
|
+
*
|
5
|
+
* Open source under the BSD License.
|
6
|
+
*
|
7
|
+
* Copyright © 2013 Gary Hepting. All rights reserved.
|
8
|
+
*
|
9
|
+
###
|
10
|
+
|
11
|
+
(($) ->
|
12
|
+
elems = []
|
13
|
+
$.fn.responsiveTable = (options) ->
|
14
|
+
settings =
|
15
|
+
compressor: options.compressor or 10
|
16
|
+
minSize: options.minSize or Number.NEGATIVE_INFINITY
|
17
|
+
maxSize: options.maxSize or Number.POSITIVE_INFINITY
|
18
|
+
padding: 2
|
19
|
+
height: "auto" # '100%' will fit tables (and containers) to viewport height as well
|
20
|
+
adjust_parents: true # if height specified, force parent elements to be height 100%
|
21
|
+
|
22
|
+
@each ->
|
23
|
+
elem = $(this)
|
24
|
+
elem.attr('data-compression',settings.compressor)
|
25
|
+
elem.attr('data-min',settings.minSize)
|
26
|
+
elem.attr('data-max',settings.maxSize)
|
27
|
+
elem.attr('data-padding',settings.padding)
|
28
|
+
# count columns
|
29
|
+
columns = $("tr", elem).first().children("th, td").length
|
30
|
+
# count rows
|
31
|
+
rows = $("tr", elem).length
|
32
|
+
unless settings.height is "auto"
|
33
|
+
# set height of table
|
34
|
+
$this.css "height", settings.height
|
35
|
+
# set height of each parent of table
|
36
|
+
if settings.adjust_parents
|
37
|
+
$this.parents().each ->
|
38
|
+
$(this).css "height", "100%"
|
39
|
+
# set column widths
|
40
|
+
$("tr th, tr td", elem).css "width", Math.floor(100 / columns) + "%"
|
41
|
+
# set row heights
|
42
|
+
$("tr th, tr td", elem).css "height", Math.floor(100 / rows) + "%"
|
43
|
+
# set cell font sizes
|
44
|
+
fontSize = Math.floor(Math.max(Math.min((elem.width() / (settings.compressor)), parseFloat(settings.maxSize)), parseFloat(settings.minSize)))
|
45
|
+
$("tr th, tr td", elem).css "font-size", fontSize + "px"
|
46
|
+
#
|
47
|
+
elems.push elem
|
48
|
+
|
49
|
+
$(window).on "resize", ->
|
50
|
+
$(elems).each ->
|
51
|
+
elem = $(this)
|
52
|
+
# set cell font sizes
|
53
|
+
fontSize = Math.floor(Math.max(Math.min((elem.width() / (elem.attr('data-compression'))), parseFloat(elem.attr('data-max'))), parseFloat(elem.attr('data-min'))))
|
54
|
+
$("tr th, tr td", elem).css "font-size", fontSize + "px"
|
55
|
+
|
56
|
+
) jQuery
|