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.
Files changed (29) hide show
  1. data/lib/generators/groundworkcss/install/templates/groundwork-and-overrides.scss +1 -1
  2. data/lib/generators/groundworkcss/install/templates/groundwork-and-overrides.scss~ +3 -1
  3. data/lib/groundworkcss/rails/version.rb +1 -1
  4. data/lib/groundworkcss/rails/version.rb~ +4 -6
  5. data/vendor/assets/javascripts/{groundwork.js → groundwork-hook.js} +0 -0
  6. data/vendor/assets/javascripts/groundworkcss/coffee/groundwork.coffee +1 -1
  7. data/vendor/assets/javascripts/groundworkcss/coffee/plugins/jquery.modals.coffee +162 -0
  8. data/vendor/assets/javascripts/groundworkcss/coffee/plugins/jquery.popover.coffee +198 -0
  9. data/vendor/assets/javascripts/groundworkcss/coffee/plugins/jquery.responsiveTables.coffee +56 -0
  10. data/vendor/assets/javascripts/groundworkcss/coffee/plugins/jquery.responsiveText.coffee +32 -0
  11. data/vendor/assets/javascripts/groundworkcss/coffee/plugins/jquery.tooltip.coffee +121 -0
  12. data/vendor/assets/javascripts/groundworkcss/groundwork.js +16 -14
  13. data/vendor/assets/javascripts/groundworkcss/plugins/jquery.modals.js +15 -13
  14. data/vendor/assets/stylesheets/groundworkcss-scss/_buttons.scss +7 -7
  15. data/vendor/assets/stylesheets/groundworkcss-scss/_forms.scss +4 -1
  16. data/vendor/assets/stylesheets/groundworkcss-scss/_mixins.scss +5 -5
  17. data/vendor/assets/stylesheets/groundworkcss-scss/_mobile-reset.scss +1 -1
  18. data/vendor/assets/stylesheets/groundworkcss-scss/_modals.scss +7 -6
  19. data/vendor/assets/stylesheets/groundworkcss-scss/_navigation.scss +51 -18
  20. data/vendor/assets/stylesheets/groundworkcss-scss/_responsive.scss +9 -9
  21. data/vendor/assets/stylesheets/groundworkcss-scss/_social-icons.scss +54 -54
  22. data/vendor/assets/stylesheets/groundworkcss-scss/_tables.scss +5 -0
  23. data/vendor/assets/stylesheets/groundworkcss-scss/_tabs.scss +41 -2
  24. data/vendor/assets/stylesheets/groundworkcss-scss/_typography.scss +31 -56
  25. data/vendor/assets/stylesheets/groundworkcss-scss/_webfonts.scss +1 -1
  26. data/vendor/assets/stylesheets/groundworkcss-scss/groundwork-ie.scss +61 -0
  27. data/vendor/assets/stylesheets/groundworkcss-scss/groundwork.scss +1 -1
  28. data/vendor/assets/stylesheets/groundworkcss-scss/no-svg.scss +344 -57
  29. metadata +20 -15
@@ -0,0 +1,32 @@
1
+ ###
2
+ *
3
+ * jQuery ResponsiveText by Gary Hepting - https://github.com/ghepting/responsiveText
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.responsiveText = (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
+
19
+ @each ->
20
+ elem = $(this)
21
+ elem.attr('data-compression',settings.compressor)
22
+ elem.attr('data-min',settings.minSize)
23
+ elem.attr('data-max',settings.maxSize)
24
+ elem.css "font-size", Math.floor(Math.max(Math.min(elem.width() / (settings.compressor), parseFloat(settings.maxSize)), parseFloat(settings.minSize)))
25
+ elems.push elem
26
+
27
+ $(window).on "resize", ->
28
+ $(elems).each ->
29
+ elem = $(this)
30
+ elem.css "font-size", Math.floor(Math.max(Math.min(elem.width() / (elem.attr('data-compression')), parseFloat(elem.attr('data-max'))), parseFloat(elem.attr('data-min'))))
31
+
32
+ ) jQuery
@@ -0,0 +1,121 @@
1
+ ###
2
+ *
3
+ * jQuery Tooltips by Gary Hepting - https://github.com/ghepting/jquery-tooltips
4
+ *
5
+ * Open source under the BSD License.
6
+ *
7
+ * Copyright © 2013 Gary Hepting. All rights reserved.
8
+ *
9
+ ###
10
+
11
+ (($) ->
12
+ $.fn.tooltip = (options) ->
13
+ defaults =
14
+ topOffset: 0
15
+ delay: 100 # delay before showing (ms)
16
+ speed: 100 # animation speed (ms)
17
+
18
+ options = $.extend(defaults, options)
19
+
20
+ tooltip = $('#tooltip') # tooltip element
21
+ delayShow = '' # delayed open
22
+ trigger = '' # store trigger
23
+
24
+ getElementPosition = (el) -> # get element position
25
+ offset = el.offset()
26
+ win = $(window)
27
+ top: top = offset.top - win.scrollTop()
28
+ left: left = offset.left - win.scrollLeft()
29
+ bottom: bottom = win.height() - top - el.outerHeight()
30
+ right: right = win.width() - left - el.outerWidth()
31
+
32
+ setPosition = (trigger) ->
33
+ # get trigger element coordinates
34
+ coords = getElementPosition(trigger)
35
+ # tooltip dimensions
36
+ if tooltip.outerWidth() > ($(window).width() - 20)
37
+ tooltip.css('width',$(window).width() - 20)
38
+ attrs = {}
39
+ # adjust max width of tooltip
40
+ tooltip.css('max-width',
41
+ Math.min(
42
+ ($(window).width()-parseInt($('body').css('padding-left'))-parseInt($('body').css('padding-right'))),
43
+ parseInt(tooltip.css('max-width'))
44
+ )
45
+ )
46
+ width = tooltip.outerWidth()
47
+ height = tooltip.outerHeight()
48
+ # horizontal positioning
49
+ if coords.left <= coords.right # default position
50
+ tooltip.addClass('left')
51
+ attrs.left = coords.left
52
+ else # pin from right side
53
+ tooltip.addClass('right')
54
+ attrs.right = coords.right
55
+ # veritcal positioning
56
+ if (coords.top-options.topOffset) > (height+20) # top positioned tooltip
57
+ tooltip.addClass('top')
58
+ attrs.top = (trigger.offset().top - height) - 20
59
+ else # bottom positioned tooltip
60
+ tooltip.addClass('bottom')
61
+ attrs.top = trigger.offset().top + trigger.outerHeight() - 4
62
+ tooltip.css attrs
63
+
64
+ closetooltip = ->
65
+ tooltip.stop().remove() # remove tooltip
66
+ $('[role=tooltip]').removeClass('on')
67
+
68
+ showtooltip = (trigger) ->
69
+ closetooltip() # close tooltip
70
+ clearTimeout(delayShow) # cancel previous timeout
71
+ delayShow = setTimeout ->
72
+ if $('#tooltip').length != 1
73
+ # destroy any lingering tooltips
74
+ $('#tooltip').remove()
75
+ # create tooltip DOM element
76
+ tooltip = $("<div id=\"tooltip\"></div>")
77
+ # add tooltip element to DOM
78
+ tooltip.appendTo("body")
79
+ # set tooltip text
80
+ tooltip.css("opacity", 0).text(trigger.attr('data-title'))
81
+ # initialize tooltip
82
+ setPosition(trigger)
83
+ trigger.addClass('on')
84
+ tooltip.animate
85
+ top: "+=10"
86
+ opacity: 1
87
+ , options.speed
88
+ , options.delay
89
+
90
+ @each ->
91
+ $this = $(this)
92
+ $this.attr('role','tooltip').attr('data-title',$this.attr('title'))
93
+ $this.removeAttr "title" # remove title attribute (disable browser tooltips)
94
+
95
+
96
+ # focus behavior
97
+ $('body').on(
98
+ 'focus', '[role=tooltip]', ->
99
+ showtooltip($(this))
100
+ ).on(
101
+ 'blur', '[role=tooltip]', ->
102
+ clearTimeout(delayShow)
103
+ closetooltip()
104
+ ).on(
105
+ 'mouseenter', '[role=tooltip]:not(input,select,textarea)', ->
106
+ showtooltip($(this))
107
+ ).on(
108
+ 'mouseleave', '[role=tooltip]:not(input,select,textarea)', ->
109
+ clearTimeout(delayShow)
110
+ closetooltip()
111
+ )
112
+
113
+ $(window).on
114
+ scroll: ->
115
+ trigger = $('[role=tooltip].on')
116
+ if trigger.length
117
+ setPosition(trigger)
118
+ $('#tooltip').css
119
+ top: "+=10"
120
+
121
+ ) jQuery
@@ -2,7 +2,7 @@
2
2
 
3
3
  /*
4
4
  *
5
- * Groundwork JS by Gary Hepting - https://github.com/groundworkcss/groundwork
5
+ * GroundworkCSS JS by Gary Hepting - https://github.com/groundworkcss/groundwork
6
6
  *
7
7
  * Open source under the BSD License.
8
8
  *
@@ -824,19 +824,21 @@
824
824
  })();
825
825
  return $(window).resize(function() {
826
826
  return $('div.modal.active').each(function() {
827
- $(this).removeClass('active').css({
828
- top: '50%',
829
- left: '50%',
830
- 'margin-top': ($(this).outerHeight() / -2) + 'px',
831
- 'margin-left': ($(this).outerWidth() / -2) + 'px'
832
- }).addClass('active');
833
- if (!$(this).hasClass('iframe')) {
834
- $(this).css({
835
- height: 'auto'
836
- });
837
- return $(this).css({
838
- height: $(this).outerHeight()
839
- });
827
+ if (!$(this).hasClass('fullscreen')) {
828
+ $(this).removeClass('active').css({
829
+ top: '50%',
830
+ left: '50%',
831
+ 'margin-top': ($(this).outerHeight() / -2) + 'px',
832
+ 'margin-left': ($(this).outerWidth() / -2) + 'px'
833
+ }).addClass('active');
834
+ if (!$(this).hasClass('iframe')) {
835
+ $(this).css({
836
+ height: 'auto'
837
+ });
838
+ return $(this).css({
839
+ height: $(this).outerHeight()
840
+ });
841
+ }
840
842
  }
841
843
  });
842
844
  });
@@ -162,19 +162,21 @@
162
162
  })();
163
163
  return $(window).resize(function() {
164
164
  return $('div.modal.active').each(function() {
165
- $(this).removeClass('active').css({
166
- top: '50%',
167
- left: '50%',
168
- 'margin-top': ($(this).outerHeight() / -2) + 'px',
169
- 'margin-left': ($(this).outerWidth() / -2) + 'px'
170
- }).addClass('active');
171
- if (!$(this).hasClass('iframe')) {
172
- $(this).css({
173
- height: 'auto'
174
- });
175
- return $(this).css({
176
- height: $(this).outerHeight()
177
- });
165
+ if (!$(this).hasClass('fullscreen')) {
166
+ $(this).removeClass('active').css({
167
+ top: '50%',
168
+ left: '50%',
169
+ 'margin-top': ($(this).outerHeight() / -2) + 'px',
170
+ 'margin-left': ($(this).outerWidth() / -2) + 'px'
171
+ }).addClass('active');
172
+ if (!$(this).hasClass('iframe')) {
173
+ $(this).css({
174
+ height: 'auto'
175
+ });
176
+ return $(this).css({
177
+ height: $(this).outerHeight()
178
+ });
179
+ }
178
180
  }
179
181
  });
180
182
  });
@@ -1,11 +1,11 @@
1
1
  // ===================================
2
- // Groundwork Buttons
2
+ // GroundworkCSS Buttons
3
3
  // ===================================
4
4
 
5
5
 
6
6
 
7
7
 
8
- button, .button, a.button, a.button:link, a.button:visited, input[type=submit], input[type=button], input[type=reset] {
8
+ button, .button, a.button, a.button:visited, input[type=submit], input[type=button], input[type=reset] {
9
9
  display:inline-block;
10
10
  word-wrap:break-word;
11
11
  padding:0.25em 1em;
@@ -103,7 +103,7 @@ button, .button, a.button, a.button:link, a.button:visited, input[type=submit],
103
103
  @include rounded(0 0 $radius $radius);
104
104
  li {
105
105
  display:block;
106
- a, a:link, a:visited {
106
+ a, a:visited {
107
107
  display:block;
108
108
  padding:0.5em 1em;
109
109
  border:none;
@@ -116,10 +116,10 @@ button, .button, a.button, a.button:link, a.button:visited, input[type=submit],
116
116
  &:last-child {
117
117
  @include rounded(0 0 $radius $radius);
118
118
  }
119
- }
120
- hr {
121
- margin:0;
122
- border-color:#ececec;
119
+ hr {
120
+ margin:0;
121
+ border-color:#ececec;
122
+ }
123
123
  }
124
124
  }
125
125
  }
@@ -1,5 +1,5 @@
1
1
  // ===================================
2
- // Groundwork Forms
2
+ // GroundworkCSS Forms
3
3
  // ===================================
4
4
 
5
5
 
@@ -140,6 +140,9 @@ ul.radio-list {
140
140
  position:relative;
141
141
  z-index:1;
142
142
  width:100%;
143
+ overflow:hidden;
144
+ white-space:nowrap;
145
+ text-overflow:ellipsis;
143
146
  margin:0;
144
147
  padding:0.4em;
145
148
  font-family:monospace;
@@ -68,7 +68,7 @@
68
68
  // vertical gradient
69
69
  @mixin gradient($startColor:$white, $endColor:$gray-2) {
70
70
  background:$startColor; // fallback
71
- filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}',GradientType=0 ); // IE 6-8
71
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}',GradientType=0 ); // IE 6-8
72
72
  background:-ms-linear-gradient(top, $startColor 0%, $endColor 100%); // IE 10+
73
73
  background:-o-linear-gradient(top, $startColor 0%, $endColor 100%); // Opera
74
74
  background:-moz-linear-gradient(top, $startColor 0%, $endColor 100%); // Firefox
@@ -94,7 +94,7 @@
94
94
  }
95
95
  // filter drop shadow
96
96
  @mixin filter-shadow($color:rgba(0,0,0,0.2), $blur:0, $x:0, $y:0) { // color, blur, x, y
97
- -ms-filter: drop-shadow($x $y $blur $color); // IE10+
97
+ -ms-filter: drop-shadow($x $y $blur $color); // IE9+
98
98
  -o-filter: drop-shadow($x $y $blur $color); // Opera
99
99
  -moz-filter: drop-shadow($x $y $blur $color); // Firefox
100
100
  -webkit-filter: drop-shadow($x $y $blur $color); // Webkit (Safari, Chrome, other)
@@ -104,8 +104,8 @@
104
104
  // inner box shadow
105
105
  @mixin inner-shadow($color, $blur:0, $x:0, $y:0) { // color, blur, x, y
106
106
  -ms-box-shadow:inset $x $y $blur $color; // IE10+
107
- // -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=#{$blur}, Direction=135, Color='#{$color}')"; // IE8
108
- // filter: progid:DXImageTransform.Microsoft.Shadow(Strength=#{$blur}, Direction=135, Color='#{$color}'); // IE7-
107
+ -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=#{$blur}, Direction=135, Color='#{ie-hex-str($color)}')"; // IE8
108
+ filter: progid:DXImageTransform.Microsoft.Shadow(Strength=#{$blur}, Direction=135, Color='#{ie-hex-str($color)}'); // IE7-
109
109
  -o-box-shadow:inset $x $y $blur $color; // Opera
110
110
  -moz-box-shadow:inset $x $y $blur $color; // Firefox
111
111
  -webkit-box-shadow:inset $x $y $blur $color; // Webkit (Safari, Chrome, other)
@@ -194,4 +194,4 @@
194
194
  font-family:#{$fallbackFonts};
195
195
  }
196
196
  }
197
- }
197
+ }
@@ -1,5 +1,5 @@
1
1
  // ===================================
2
- // Groundwork Components
2
+ // GroundworkCSS Components
3
3
  // ===================================
4
4
 
5
5
 
@@ -46,7 +46,7 @@
46
46
  z-index:98;
47
47
  width:100%;
48
48
  height:100%;
49
- @include inner-shadow(#000, 200px, 0, 0);
49
+ @include inner-shadow(#000000, 200px, 0, 0);
50
50
  @include gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.9));
51
51
  }
52
52
 
@@ -77,7 +77,6 @@ div.modal {
77
77
  height:100%;
78
78
  background:#fff;
79
79
  padding:25px;
80
- @include rounded($radius);
81
80
  }
82
81
  .close, .fullscreen {
83
82
  position:absolute;
@@ -87,14 +86,16 @@ div.modal {
87
86
  right:10px;
88
87
  padding:5px;
89
88
  cursor:pointer;
90
- color:#888;
91
- background:#fff;
92
- @include rounded($radius);
89
+ color:#ddd;
90
+ background:#222;
91
+ background:rgba(0,0,0,0.8);
92
+ @include rounded(0 0 0 $radius);
93
93
  &:hover, &:focus {
94
- color:black;
94
+ color:#fff;
95
95
  }
96
96
  }
97
97
  .fullscreen {
98
+ @include rounded(0 0 $radius 0);
98
99
  right:auto;
99
100
  left:10px;
100
101
  }
@@ -14,7 +14,7 @@ nav {
14
14
  li {
15
15
  display:block;
16
16
  position:relative;
17
- a, a:link, a:visited {
17
+ a, a:visited {
18
18
  display:block;
19
19
  width:100%;
20
20
  word-wrap:break-word;
@@ -72,12 +72,12 @@ nav {
72
72
  }
73
73
  }
74
74
  &:first-child {
75
- a, a:link, a:visited {
75
+ a, a:visited {
76
76
  @include rounded($radius $radius 0 0);
77
77
  }
78
78
  }
79
79
  &:last-child {
80
- a, a:link, a:visited {
80
+ a, a:visited {
81
81
  @include rounded(0 0 $radius $radius);
82
82
  }
83
83
  }
@@ -90,7 +90,7 @@ nav {
90
90
  width:auto;
91
91
  z-index:99;
92
92
  li {
93
- a, a:link, a:visited {
93
+ a, a:visited {
94
94
  @include rounded(0 !important);
95
95
  background:lighten($button-color, 5%);
96
96
  &:hover, &:active {
@@ -98,12 +98,12 @@ nav {
98
98
  }
99
99
  }
100
100
  &:first-child {
101
- a, a:link, a:visited {
101
+ a, a:visited {
102
102
  @include rounded(0 $radius 0 0 !important);
103
103
  }
104
104
  }
105
105
  &:last-child {
106
- a, a:link, a:visited {
106
+ a, a:visited {
107
107
  @include rounded(0 0 $radius $radius !important);
108
108
  }
109
109
  }
@@ -112,16 +112,16 @@ nav {
112
112
  // horizontal grid navigation
113
113
  &.row {
114
114
  li {
115
- a, a:link, a:visited {
115
+ a, a:visited {
116
116
  @include rounded(0);
117
117
  }
118
118
  &:first-child {
119
- a, a:link, a:visited {
119
+ a, a:visited {
120
120
  @include rounded($radius 0 0 $radius);
121
121
  }
122
122
  }
123
123
  &:last-child {
124
- a, a:link, a:visited {
124
+ a, a:visited {
125
125
  @include rounded(0 $radius $radius 0);
126
126
  }
127
127
  }
@@ -134,11 +134,11 @@ nav {
134
134
  min-width:100%;
135
135
  z-index:99;
136
136
  li {
137
- a, a:link, a:visited {
137
+ a, a:visited {
138
138
  @include rounded(0 !important);
139
139
  }
140
140
  &:last-child {
141
- a, a:link, a:visited {
141
+ a, a:visited {
142
142
  @include rounded(0 0 $radius $radius !important);
143
143
  }
144
144
  }
@@ -146,6 +146,11 @@ nav {
146
146
  }
147
147
  }
148
148
  }
149
+ &:after {
150
+ content:'';
151
+ display:block;
152
+ clear:both;
153
+ }
149
154
  // horizontal inline navigation
150
155
  &.inline {
151
156
  width:auto;
@@ -157,16 +162,16 @@ nav {
157
162
  display:inline-block;
158
163
  white-space-collapse:discard;
159
164
  float:none;
160
- a, a:link, a:visited {
165
+ a, a:visited {
161
166
 
162
167
  }
163
168
  &:first-child {
164
- a, a:link, a:visited {
169
+ a, a:visited {
165
170
  @include rounded($radius 0 0 $radius);
166
171
  }
167
172
  }
168
173
  &:last-child {
169
- a, a:link, a:visited {
174
+ a, a:visited {
170
175
  @include rounded(0 $radius $radius 0);
171
176
  }
172
177
  }
@@ -179,11 +184,11 @@ nav {
179
184
  z-index:99;
180
185
  li {
181
186
  display:block;
182
- a, a:link, a:visited {
187
+ a, a:visited {
183
188
  @include rounded(0 !important);
184
189
  }
185
190
  &:last-child {
186
- a, a:link, a:visited {
191
+ a, a:visited {
187
192
  @include rounded(0 0 $radius $radius !important);
188
193
  }
189
194
  }
@@ -256,12 +261,12 @@ nav {
256
261
  }
257
262
  }
258
263
  &:first-child {
259
- a, a:link, a:visited {
264
+ a, a:visited {
260
265
  @include rounded($radius);
261
266
  }
262
267
  }
263
268
  &:last-child {
264
- a, a:link, a:visited {
269
+ a, a:visited {
265
270
  @include rounded($radius);
266
271
  }
267
272
  }
@@ -282,3 +287,31 @@ nav {
282
287
  }
283
288
  }
284
289
  }
290
+ ul.breadcrumbs {
291
+ list-style:none;
292
+ margin:0;
293
+ padding:0;
294
+ font-size:0.8em;
295
+ li {
296
+ display:inline-block;
297
+ padding:0.2em 0;
298
+ a, a:visited {
299
+ border:none;
300
+ color:gray;
301
+ &:before {
302
+ content:'>';
303
+ display:inline-block;
304
+ margin:0 0.5em;
305
+ color:gray !important;
306
+ }
307
+ &:hover, &:focus {
308
+ color:$link-color;
309
+ }
310
+ }
311
+ &:first-child a {
312
+ &:before {
313
+ display:none;
314
+ }
315
+ }
316
+ }
317
+ }