pwnstyles_rails 0.1.22 → 0.1.23

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 (11) hide show
  1. data/Gemfile.lock +39 -39
  2. data/VERSION +1 -1
  3. data/app/assets/javascripts/pwn-fx.js.coffee +40 -50
  4. data/app/assets/stylesheets/generic/_inputs.css.scss +26 -26
  5. data/app/assets/stylesheets/generic/_text.css.scss +9 -0
  6. data/app/assets/stylesheets/modules/_header.css.scss +30 -18
  7. data/app/assets/stylesheets/pwnplus/_buttons.css.scss +36 -27
  8. data/app/assets/stylesheets/pwnplus/_form_fields.css.scss +25 -25
  9. data/app/assets/stylesheets/pwnplus/_menu_bar.css.scss +11 -9
  10. data/pwnstyles_rails.gemspec +2 -2
  11. metadata +3 -3
data/Gemfile.lock CHANGED
@@ -1,53 +1,53 @@
1
1
  GEM
2
2
  remote: http://rubygems.org/
3
3
  specs:
4
- actionmailer (3.2.3)
5
- actionpack (= 3.2.3)
4
+ actionmailer (3.2.8)
5
+ actionpack (= 3.2.8)
6
6
  mail (~> 2.4.4)
7
- actionpack (3.2.3)
8
- activemodel (= 3.2.3)
9
- activesupport (= 3.2.3)
7
+ actionpack (3.2.8)
8
+ activemodel (= 3.2.8)
9
+ activesupport (= 3.2.8)
10
10
  builder (~> 3.0.0)
11
11
  erubis (~> 2.7.0)
12
- journey (~> 1.0.1)
12
+ journey (~> 1.0.4)
13
13
  rack (~> 1.4.0)
14
14
  rack-cache (~> 1.2)
15
15
  rack-test (~> 0.6.1)
16
- sprockets (~> 2.1.2)
17
- activemodel (3.2.3)
18
- activesupport (= 3.2.3)
16
+ sprockets (~> 2.1.3)
17
+ activemodel (3.2.8)
18
+ activesupport (= 3.2.8)
19
19
  builder (~> 3.0.0)
20
- activerecord (3.2.3)
21
- activemodel (= 3.2.3)
22
- activesupport (= 3.2.3)
20
+ activerecord (3.2.8)
21
+ activemodel (= 3.2.8)
22
+ activesupport (= 3.2.8)
23
23
  arel (~> 3.0.2)
24
24
  tzinfo (~> 0.3.29)
25
- activeresource (3.2.3)
26
- activemodel (= 3.2.3)
27
- activesupport (= 3.2.3)
28
- activesupport (3.2.3)
25
+ activeresource (3.2.8)
26
+ activemodel (= 3.2.8)
27
+ activesupport (= 3.2.8)
28
+ activesupport (3.2.8)
29
29
  i18n (~> 0.6)
30
30
  multi_json (~> 1.0)
31
31
  arel (3.0.2)
32
- builder (3.0.0)
32
+ builder (3.0.1)
33
33
  erubis (2.7.0)
34
34
  git (1.2.5)
35
35
  hike (1.2.1)
36
- i18n (0.6.0)
37
- jeweler (1.8.3)
36
+ i18n (0.6.1)
37
+ jeweler (1.8.4)
38
38
  bundler (~> 1.0)
39
39
  git (>= 1.2.5)
40
40
  rake
41
41
  rdoc
42
- journey (1.0.3)
43
- json (1.7.1)
42
+ journey (1.0.4)
43
+ json (1.7.5)
44
44
  mail (2.4.4)
45
45
  i18n (>= 0.4.0)
46
46
  mime-types (~> 1.16)
47
47
  treetop (~> 1.4.8)
48
- mime-types (1.18)
49
- minitest (3.0.0)
50
- multi_json (1.3.4)
48
+ mime-types (1.19)
49
+ minitest (3.4.0)
50
+ multi_json (1.3.6)
51
51
  polyglot (0.3.3)
52
52
  rack (1.4.1)
53
53
  rack-cache (1.2)
@@ -56,39 +56,39 @@ GEM
56
56
  rack
57
57
  rack-test (0.6.1)
58
58
  rack (>= 1.0)
59
- rails (3.2.3)
60
- actionmailer (= 3.2.3)
61
- actionpack (= 3.2.3)
62
- activerecord (= 3.2.3)
63
- activeresource (= 3.2.3)
64
- activesupport (= 3.2.3)
59
+ rails (3.2.8)
60
+ actionmailer (= 3.2.8)
61
+ actionpack (= 3.2.8)
62
+ activerecord (= 3.2.8)
63
+ activeresource (= 3.2.8)
64
+ activesupport (= 3.2.8)
65
65
  bundler (~> 1.0)
66
- railties (= 3.2.3)
67
- railties (3.2.3)
68
- actionpack (= 3.2.3)
69
- activesupport (= 3.2.3)
66
+ railties (= 3.2.8)
67
+ railties (3.2.8)
68
+ actionpack (= 3.2.8)
69
+ activesupport (= 3.2.8)
70
70
  rack-ssl (~> 1.3.2)
71
71
  rake (>= 0.8.7)
72
72
  rdoc (~> 3.4)
73
- thor (~> 0.14.6)
73
+ thor (>= 0.14.6, < 2.0)
74
74
  rake (0.9.2.2)
75
75
  rcov (1.0.0)
76
76
  rdoc (3.12)
77
77
  json (~> 1.4)
78
- sass (3.1.17)
78
+ sass (3.2.1)
79
79
  sass-rails (3.2.5)
80
80
  railties (~> 3.2.0)
81
81
  sass (>= 3.1.10)
82
82
  tilt (~> 1.3)
83
- simplecov (0.6.2)
84
- multi_json (~> 1.3)
83
+ simplecov (0.6.4)
84
+ multi_json (~> 1.0)
85
85
  simplecov-html (~> 0.5.3)
86
86
  simplecov-html (0.5.3)
87
87
  sprockets (2.1.3)
88
88
  hike (~> 1.2)
89
89
  rack (~> 1.0)
90
90
  tilt (~> 1.1, != 1.3.0)
91
- thor (0.14.6)
91
+ thor (0.16.0)
92
92
  tilt (1.3.3)
93
93
  treetop (1.4.10)
94
94
  polyglot
data/VERSION CHANGED
@@ -1 +1 @@
1
- 0.1.22
1
+ 0.1.23
data/app/assets/javascripts/pwn-fx.js.coffee CHANGED
@@ -15,7 +15,7 @@ class PwnFxClass
15
15
  constructor: ->
16
16
  @effects = []
17
17
  @effectsByName = {}
18
-
18
+
19
19
  # Wires JS to elements with data-pwnfx attributes.
20
20
  #
21
21
  # @param {Element} root the element whose content is wired; use document at
@@ -34,8 +34,8 @@ class PwnFxClass
34
34
  element.setAttribute doneAttrName, attrValue
35
35
  scopeId = element.getAttribute scopeAttrName
36
36
  new effectClass element, attrValue, scopeId
37
- null
38
-
37
+ null
38
+
39
39
  # Registers a PwnFx effect.
40
40
  #
41
41
  # @param {String} attrName string following data-pwnfx- in the effect's
@@ -45,7 +45,7 @@ class PwnFxClass
45
45
  if @effectsByName[attrPrefix]
46
46
  throw new Error("PwnFx effect name {attrPrefix} already registered")
47
47
  @effects.push [attrPrefix, klass]
48
-
48
+
49
49
  # Finds a scoping container.
50
50
  #
51
51
  # @param {String} scopeId the scope ID to look for
@@ -58,7 +58,7 @@ class PwnFxClass
58
58
  while element != null && element.getAttribute('data-pwnfx-scope') != scopeId
59
59
  element = element.parentElement
60
60
  element || document
61
-
61
+
62
62
  # Performs a scoped querySelectAll.
63
63
  #
64
64
  # @param {HTMLElement} scope the DOM element serving as the search scope
@@ -68,7 +68,7 @@ class PwnFxClass
68
68
  queryScope: (scope, selector) ->
69
69
  scopeMatches = false
70
70
  if scope != document
71
- # TODO: machesSelector is in a W3C spec, but only implemented using
71
+ # TODO: machesSelector is in a W3C spec, but only implemented using
72
72
  # prefixes; the code below should be simplified once browsers
73
73
  # implement it without vendor prefixes
74
74
  if scope.matchesSelector
@@ -76,37 +76,27 @@ class PwnFxClass
76
76
  else if scope.webkitMatchesSelector
77
77
  scopeMatches = scope.webkitMatchesSelector selector
78
78
  else if scope.mozMatchesSelector
79
- scopeMatches = scope.mozMatchesSelector
80
-
79
+ scopeMatches = scope.mozMatchesSelector selector
80
+
81
81
  if scopeMatches
82
82
  matches = Array.prototype.slice.call scope.querySelectorAll(selector)
83
83
  matches.push scope
84
84
  matches
85
85
  else
86
86
  scope.querySelectorAll selector
87
-
88
- # Executes the JavaScript inside the <script> tags in a DOM subtree.
89
- #
90
- # @param {HTMLElement} element the DOM element rooting the subtree that will
91
- # be searched for <script> tags
92
- runScripts: (element) ->
93
- # HACK: <script>s are removed and re-inserted so the browser runs them
94
- for scriptElement in element.querySelectorAll('script')
95
- parent = scriptElement.parentElement
96
- nextSibling = scriptElement.nextSibling
97
- parent.removeChild scriptElement
98
- parent.insertBefore scriptElement.cloneNode(true), nextSibling
99
- null
100
-
87
+
101
88
  # Replaces an element's contents with some HTML.
102
89
  #
103
- # The JavaScript inside the HTML's <script> tags will be executed.
90
+ # The JavaScript inside the HTML's <script> tags will be executed.
104
91
  #
105
92
  # @param {HTMLElement} element the element whose contents will be replaced
106
93
  # @param {String}
107
94
  replaceHtml: (element, html) ->
108
- element.innerHTML = html
109
- @runScripts element
95
+ range = document.createRange()
96
+ range.selectNode document.body
97
+ fragment = range.createContextualFragment html
98
+ element.innerHTML = ''
99
+ element.appendChild fragment
110
100
  @wire element
111
101
 
112
102
  # The closest form element wrapping a node.
@@ -119,7 +109,7 @@ class PwnFxClass
119
109
  return element if element.nodeName == 'FORM'
120
110
  element = element.parentNode
121
111
  null
122
-
112
+
123
113
  # Do AJAX.
124
114
  #
125
115
  # @param {String} url the request URL (e.g., "http://localhost/path/to.html")
@@ -137,14 +127,14 @@ class PwnFxClass
137
127
  xhr.send new FormData(form)
138
128
  else
139
129
  xhr.send null
140
-
130
+
141
131
  # Called when an XHR request issued by PwnFx.xhr works out.
142
132
  _xhr_onload: ->
143
133
  if (@status < 200 || @status >= 300) && (@status != 304)
144
134
  throw new Error(
145
135
  "XHR result ignored due to HTTP #{@status}: #{@statusText}")
146
136
  @pwnfxOnData @responseText
147
-
137
+
148
138
  # Singleton instance.
149
139
  PwnFx = new PwnFxClass
150
140
 
@@ -163,7 +153,7 @@ class PwnFxMove
163
153
  scope = PwnFx.resolveScope scopeId, element
164
154
  method = element.getAttribute('data-pwnfx-move-method') || 'append'
165
155
  target = document.querySelector "[data-pwnfx-move-target=\"#{identifier}\"]"
166
-
156
+
167
157
  switch method
168
158
  when 'append'
169
159
  target.appendChild element
@@ -172,11 +162,11 @@ class PwnFxMove
172
162
  target.appendChild element
173
163
  else
174
164
  throw new Error("pwnfx-move-method #{method} not implemented")
175
-
165
+
176
166
 
177
167
  PwnFx.registerEffect 'move', PwnFxMove
178
-
179
-
168
+
169
+
180
170
  # Renders the contents of a template into a DOM element.
181
171
  #
182
172
  # Attributes:
@@ -186,9 +176,9 @@ PwnFx.registerEffect 'move', PwnFxMove
186
176
  # data-pwnfx-render-randomize: regexp pattern whose matches will be replaced
187
177
  # with a random string; useful for generating unique IDs
188
178
  # data-pwnfx-render-target: set on the element(s) receiving the rendered HTML;
189
- # set to the identifier in data-pwnfx-render
179
+ # set to the identifier in data-pwnfx-render
190
180
  # data-pwnfx-render-source: set to the identifier in data-pwnfx-render, on the
191
- # <script> tag containing the source HTML
181
+ # <script> tag containing the source HTML
192
182
  class PwnFxRender
193
183
  constructor: (element, identifier, scopeId) ->
194
184
  sourceSelector = "script[data-pwnfx-render-source=\"#{identifier}\"]"
@@ -200,7 +190,7 @@ class PwnFxRender
200
190
  randomizeRegExp = new RegExp(randomizedPatten, 'g')
201
191
  else
202
192
  randomizeRegExp = null
203
-
193
+
204
194
  onClick = (event) ->
205
195
  scope = PwnFx.resolveScope scopeId, element
206
196
  source = scope.querySelector sourceSelector
@@ -218,7 +208,7 @@ class PwnFxRender
218
208
  PwnFx.registerEffect 'render', PwnFxRender
219
209
 
220
210
 
221
- # Loads some content after the main page load via an AJAX request.
211
+ # Loads some content after the main page load via an AJAX request.
222
212
  #
223
213
  # The text / HTML returned by the request is placed in another element. Scripts
224
214
  # in <script> tags are executed.
@@ -245,7 +235,7 @@ class PwnFxDelayed
245
235
  scope = PwnFx.resolveScope scopeId, element
246
236
  for targetElement in PwnFx.queryScope(scope, targetSelector)
247
237
  PwnFx.replaceHtml targetElement, data
248
-
238
+
249
239
  window.setTimeout ajaxLoad, delay
250
240
 
251
241
  PwnFx.registerEffect 'delayed', PwnFxDelayed
@@ -272,31 +262,31 @@ class PwnFxRefresh
272
262
  xhrForm = PwnFx.parentForm element
273
263
  refreshDelay = parseInt(
274
264
  element.getAttribute('data-pwnfx-refresh-ms') || '200');
275
-
265
+
276
266
  onXhrData = (data) ->
277
267
  scope = PwnFx.resolveScope scopeId, element
278
268
  for targetElement in PwnFx.queryScope(scope, targetSelector)
279
269
  PwnFx.replaceHtml targetElement, data
280
-
270
+
281
271
  changeTimeout = null
282
272
  refreshOldValue = null
283
273
  ajaxRefresh = ->
284
274
  changeTimeout = null
285
275
  PwnFx.xhr xhrUrl, xhrMethod, xhrForm, onXhrData
286
-
276
+
287
277
  onChange = ->
288
278
  value = element.value
289
279
  return true if value == refreshOldValue
290
280
  refreshOldValue = value
291
-
281
+
292
282
  window.clearTimeout changeTimeout if changeTimeout != null
293
283
  changeTimeout = window.setTimeout ajaxRefresh, refreshDelay
294
284
  true
295
-
285
+
296
286
  element.addEventListener 'change', onChange, false
297
287
  element.addEventListener 'keydown', onChange, false
298
288
  element.addEventListener 'keyup', onChange, false
299
-
289
+
300
290
  PwnFx.registerEffect 'refresh', PwnFxRefresh
301
291
 
302
292
 
@@ -338,7 +328,7 @@ class PwnFxConfirm
338
328
  targetElement.classList.add hiddenClass
339
329
  true
340
330
  onChange()
341
-
331
+
342
332
  element.addEventListener 'change', onChange, false
343
333
  element.addEventListener 'keydown', onChange, false
344
334
  element.addEventListener 'keyup', onChange, false
@@ -371,7 +361,7 @@ class PwnFxHide
371
361
  positive = (trigger == 'click') || element.checked
372
362
  hideSelector = if positive then positiveSelector else negativeSelector
373
363
  showSelector = if positive then negativeSelector else positiveSelector
374
-
364
+
375
365
  scope = PwnFx.resolveScope scopeId, element
376
366
  for targetElement in PwnFx.queryScope(scope, hideSelector)
377
367
  targetElement.classList.add hiddenClass
@@ -382,7 +372,7 @@ class PwnFxHide
382
372
  false
383
373
  else
384
374
  true
385
-
375
+
386
376
  if trigger == 'click'
387
377
  element.addEventListener 'click', onChange, false
388
378
  else if trigger == 'checked'
@@ -411,21 +401,21 @@ class PwnFxShowIf
411
401
  hiddenClass = element.getAttribute('data-pwnfx-showif-class') || 'hidden'
412
402
  showValue = element.getAttribute 'data-pwnfx-showif-is'
413
403
  sourceSelector = "[data-pwnfx-showif-source=\"#{identifier}\"]"
414
-
404
+
415
405
  replacementTag = element.getAttribute 'data-pwnfx-showif-replace'
416
406
  if replacementTag
417
407
  replacement = document.createElement replacementTag
418
408
  replacement.setAttribute 'class', hiddenClass
419
409
  else
420
410
  replacement = null
421
-
411
+
422
412
  isHidden = false
423
413
  onChange = (event) ->
424
414
  value = event.target.value
425
415
  willHide = value != showValue
426
416
  return if isHidden == willHide
427
417
  isHidden = willHide
428
-
418
+
429
419
  if replacement
430
420
  if willHide
431
421
  element.parentElement.replaceChild replacement, element
@@ -453,7 +443,7 @@ PwnFx.registerEffect 'showif', PwnFxShowIf
453
443
  # Attributes:
454
444
  # data-pwnfx-remove: an identifier connecting the elements to be removed
455
445
  # data-pwnfx-remove-target: set to the same value as data-pwnfx-remove on
456
- # elements that will be removed when the element is clicked
446
+ # elements that will be removed when the element is clicked
457
447
  class PwnFxRemove
458
448
  constructor: (element, identifier, scopeId) ->
459
449
  targetSelector = "[data-pwnfx-remove-target=\"#{identifier}\"]"
data/app/assets/stylesheets/generic/_inputs.css.scss CHANGED
@@ -5,7 +5,7 @@ input[type=text], input[type=email], input[type=tel], input[type=password],
5
5
  padding: 0.1em 0.5ex;
6
6
  border: 1px solid $input-border-color;
7
7
  border-top-color: $input-border-top-color;
8
-
8
+
9
9
  -webkit-border-radius: 2px;
10
10
  -moz-border-radius: 2px;
11
11
  border-radius: 2px;
@@ -14,27 +14,27 @@ input[type=text], input[type=email], input[type=tel], input[type=password],
14
14
  font: inherit;
15
15
  line-height: inherit;
16
16
  text-decoration: none;
17
-
17
+
18
18
  background-color: $input-background-color;
19
19
 
20
20
  -webkit-transition: all .218s;
21
21
  -moz-transition: all .218s;
22
- transition: all .218s;
22
+ transition: all .218s;
23
23
 
24
24
  &:hover {
25
- border-color: $input-hover-border-color;
25
+ border-color: $input-hover-border-color;
26
26
 
27
- -moz-box-shadow: inset 0px 1px 2px $input-hover-shadow-color;
28
- -webkit-box-shadow: inset 0px 1px 2px $input-hover-shadow-color;
29
- box-shadow: inset 0px 1px 2px $input-hover-shadow-color;
27
+ -moz-box-shadow: inset 0 1px 2px $input-hover-shadow-color;
28
+ -webkit-box-shadow: inset 0 1px 2px $input-hover-shadow-color;
29
+ box-shadow: inset 0 1px 2px $input-hover-shadow-color;
30
30
  }
31
31
  &:focus {
32
32
  border-color: $input-focus-border-color;
33
33
  outline: none;
34
34
 
35
- -moz-box-shadow: inset 0px 1px 2px $input-focus-shadow-color;
36
- -webkit-box-shadow: inset 0px 1px 2px $input-focus-shadow-color;
37
- box-shadow: inset 0px 1px 2px $input-focus-shadow-color;
35
+ -moz-box-shadow: inset 0 1px 2px $input-focus-shadow-color;
36
+ -webkit-box-shadow: inset 0 1px 2px $input-focus-shadow-color;
37
+ box-shadow: inset 0 1px 2px $input-focus-shadow-color;
38
38
  }
39
39
  }
40
40
  textarea {
@@ -58,19 +58,19 @@ input[type=radio], input[type=checkbox] {
58
58
 
59
59
  &:hover {
60
60
  border-color: $input-hover-border-color;
61
-
62
- box-shadow: inset 0px 1px 2px $input-hover-shadow-color;
63
- -moz-box-shadow: inset 0px 1px 2px $input-hover-shadow-color;
64
- -webkit-box-shadow: inset 0px 1px 2px $input-hover-shadow-color;
61
+
62
+ box-shadow: inset 0 1px 2px $input-hover-shadow-color;
63
+ -moz-box-shadow: inset 0 1px 2px $input-hover-shadow-color;
64
+ -webkit-box-shadow: inset 0 1px 2px $input-hover-shadow-color;
65
65
  }
66
66
  &:focus {
67
67
  border-color: $input-focus-border-color;
68
68
  outline: none;
69
69
 
70
- -moz-box-shadow: inset 0px 1px 2px $input-focus-shadow-color;
71
- -webkit-box-shadow: inset 0px 1px 2px $input-focus-shadow-color;
72
- box-shadow: inset 0px 1px 2px $input-focus-shadow-color;
73
- }
70
+ -moz-box-shadow: inset 0 1px 2px $input-focus-shadow-color;
71
+ -webkit-box-shadow: inset 0 1px 2px $input-focus-shadow-color;
72
+ box-shadow: inset 0 1px 2px $input-focus-shadow-color;
73
+ }
74
74
  }
75
75
 
76
76
  // Drop-downs.
@@ -89,17 +89,17 @@ select {
89
89
  input[type=text], input[type=email], input[type=tel], input[type=password],
90
90
  input[type=search], input[type=number], select, textarea {
91
91
  border: 1px solid #FF0000;
92
- box-shadow: inset 0px 1px 2px #FF8888;
93
- -moz-box-shadow: inset 0px 1px 2px #FF8888;
94
- -webkit-box-shadow: inset 0px 1px 2px #FF8888;
92
+ box-shadow: inset 0 1px 2px #FF8888;
93
+ -moz-box-shadow: inset 0 1px 2px #FF8888;
94
+ -webkit-box-shadow: inset 0 1px 2px #FF8888;
95
95
  background-color: #FFEEEE;
96
96
  }
97
-
97
+
98
98
  input[type=radio], input[type=checkbox] {
99
- border: 1px solid #FF0000;
100
- box-shadow: inset 0px 1px 2px #FF8888;
101
- -moz-box-shadow: inset 0px 1px 2px #FF8888;
102
- -webkit-box-shadow: inset 0px 1px 2px #FF8888;
99
+ border: 1px solid #FF0000;
100
+ box-shadow: inset 0 1px 2px #FF8888;
101
+ -moz-box-shadow: inset 0 1px 2px #FF8888;
102
+ -webkit-box-shadow: inset 0 1px 2px #FF8888;
103
103
  background-color: #FFEEEE;
104
104
  }
105
105
  }
data/app/assets/stylesheets/generic/_text.css.scss CHANGED
@@ -7,6 +7,7 @@ html, body {
7
7
  weight: normal;
8
8
  }
9
9
  line-height: $main-line-height;
10
+ text-rendering: optimizeLegibility;
10
11
  }
11
12
 
12
13
  p {
@@ -17,6 +18,14 @@ h1, h2, h3, h4, h5, h6 {
17
18
  font-family: $heading-font;
18
19
  font-weight: bold;
19
20
  margin: 0.25em 0 0.2em 0;
21
+ text-rendering: geometricPrecision;
22
+
23
+ // This patch makes buttons in headings look less weird.
24
+ input[type=submit], input[type=button], button, a.button {
25
+ font-family: $main-font;
26
+ font-size: 1.1em;
27
+ text-rendering: optimizeLegibility;
28
+ }
20
29
  }
21
30
 
22
31
  h1 {
data/app/assets/stylesheets/modules/_header.css.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  #header {
2
2
  background-color: $header-background-color;
3
- border-bottom: 1px solid $header-border-color;
4
-
3
+ border-bottom: 1px solid $header-border-color;
4
+
5
5
  #main-menu {
6
6
  width: $page-width;
7
7
  margin: 0 auto;
@@ -19,45 +19,57 @@
19
19
  $hover-text-color: $header-menu-hover-text-color,
20
20
  $last-item-right: true
21
21
  );
22
-
22
+
23
23
  font-size: $header-menu-font-size;
24
-
25
- > li > a:after {
26
- content: "\FEFF";
27
- display: inline-block;
28
- font-size: ($header-height - 4px);
29
- line-height: $header-height;
30
- width: 0px;
24
+
25
+ > li {
26
+ > a:after {
27
+ content: "\FEFF";
28
+ display: inline-block;
29
+ font-family: $heading-font;
30
+ font-size: ($header-height - 4px);
31
+ font-variant: small-caps;
32
+ line-height: $header-height;
33
+ margin: 0;
34
+ padding: 0;
35
+ vertical-align: baseline;
36
+ width: 0;
37
+ }
38
+ &:first-child > a:after {
39
+ content: "";
40
+ content: none;
41
+ }
31
42
  }
32
43
  }
33
44
  }
34
-
45
+
35
46
  h1 {
36
47
  display: inline-block;
37
48
  margin: 0;
38
49
  padding: 0;
39
-
50
+
40
51
  font-size: ($header-height - 4px);
41
52
  line-height: $header-height;
42
53
  font-variant: small-caps;
43
54
  color: $header-title-color;
44
-
55
+
45
56
  img {
46
57
  display: inline-block;
47
58
  margin: auto 0;
48
59
  }
49
-
60
+
50
61
  span {
51
62
  line-height: $header-height;
52
63
  }
53
-
64
+
54
65
  // Padding between the image and the title.
55
66
  img + span {
56
67
  padding-left: 0.2em;
57
68
  }
58
69
  }
59
- }
60
70
 
61
- img.logo {
62
- vertical-align: -$logo-image-baseline;
71
+ img.logo {
72
+ vertical-align: -$logo-image-baseline;
73
+ }
63
74
  }
75
+
data/app/assets/stylesheets/pwnplus/_buttons.css.scss CHANGED
@@ -3,6 +3,7 @@
3
3
  $color,
4
4
  $border-color,
5
5
  $text-color,
6
+ $font-weight: inherit,
6
7
  $hover-text-color: $text-color,
7
8
  $hover-border-color: $border-color,
8
9
  $active-text-color: $text-color,
@@ -18,37 +19,40 @@
18
19
  -moz-border-radius: 2px;
19
20
  -webkit-border-radius: 2px;
20
21
  border-radius: 2px;
21
-
22
+
22
23
  color: $text-color;
23
24
  @if not $subdued {
24
25
  text-shadow: 0 1px rgba(0, 0, 0, 0.1);
25
26
  }
26
27
  font-size: 1.21em;
27
28
  line-height: 1.35em;
29
+ font-weight: $font-weight;
28
30
  text-decoration: none;
29
- text-overflow: ellipsis;
30
-
31
+ text-overflow: ellipsis;
32
+
31
33
  background-color: $color;
32
- background: -webkit-gradient(linear, 0% 40%, 0% 70%,
33
- from(darken($color, 1%)), to(lighten($color, 1%)));
34
- background: -moz-gradient(linear, 0% 40%, 0% 70%,
35
- from(darken($color, 1%)), to(lighten($color, 1%)));
36
-
34
+ background: -webkit-linear-gradient(top, lighten($color, 1%),
35
+ darken($color, 2%));
36
+ background: -moz-linear-gradient(top, lighten($color, 1%),
37
+ darken($color, 2%));
38
+ background: linear-gradient(to bottom, lighten($color, 1%) 0%,
39
+ darken($color, 2%) 100%);
40
+
37
41
  -webkit-transition: all .218s;
38
42
  -moz-transition: all .218s;
39
- transition: all .218s;
40
-
43
+ transition: all .218s;
44
+
41
45
  @if $subdued {
42
46
  img {
43
- -webkit-filter: grayscale(0.66);
47
+ -webkit-filter: grayscale(0.4);
44
48
  }
45
49
  }
46
50
  @if not $subdued {
47
51
  img {
48
- -webkit-filter: brightness(-0.2);
52
+ -webkit-filter: brightness(-0.05);
49
53
  }
50
54
  }
51
-
55
+
52
56
  &:visited {
53
57
  color: $text-color;
54
58
  }
@@ -59,11 +63,6 @@
59
63
  @if not $subdued {
60
64
  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
61
65
  }
62
-
63
- background: -webkit-gradient(linear, 0% 40%, 0% 70%,
64
- from(darken($color, 1%)), to(lighten($color, 2%)));
65
- background: -moz-gradient(linear, 0% 40%, 0% 70%,
66
- from(darken($color, 1%)), to(lighten($color, 2%)));
67
66
 
68
67
  @if $subdued {
69
68
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
@@ -71,23 +70,30 @@
71
70
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
72
71
 
73
72
  img {
74
- -webkit-filter: grayscale(0.33);
73
+ -webkit-filter: grayscale(0);
75
74
  }
76
75
  }
77
76
  @if not $subdued {
78
77
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
79
- -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
78
+ -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
80
79
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
81
80
 
82
81
  img {
83
- -webkit-filter: brightness(-0.1);
82
+ -webkit-filter: brightness(0.05);
84
83
  }
85
84
  }
86
85
  }
87
86
  &:active {
88
87
  color: $active-text-color;
89
88
  border-color: $active-border-color;
90
-
89
+
90
+ background: -webkit-linear-gradient(top, darken($color, 2%),
91
+ lighten($color, 2%));
92
+ background: -moz-linear-gradient(top, darken($color, 2%),
93
+ lighten($color, 2%));
94
+ background: linear-gradient(to bottom, darken($color, 2%) 0%,
95
+ lighten($color, 2%) 100%);
96
+
91
97
  @if $subdued {
92
98
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
93
99
  -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
@@ -99,13 +105,13 @@
99
105
  }
100
106
  @if not $subdued {
101
107
  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
102
-
108
+
103
109
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
104
- -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
110
+ -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
105
111
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
106
112
 
107
113
  img {
108
- -webkit-filter: brightness(0);
114
+ -webkit-filter: brightness(0.05);
109
115
  }
110
116
  }
111
117
  }
@@ -119,6 +125,7 @@
119
125
  $border-color: change-color($main-color, $saturation: 5%, $lightness: 86%),
120
126
  $hover-border-color: change-color($main-color, $saturation: 5%,
121
127
  $lightness: 78%),
128
+ $font-weight: 400,
122
129
  $subdued: true
123
130
  );
124
131
  }
@@ -126,9 +133,11 @@
126
133
  // Handy mixin for a colored Google Plus-like button.
127
134
  @mixin pwnplus-emphasized-button($main-color) {
128
135
  @include pwnplus-button(
129
- $color: change-color($main-color, $saturation: 100%, $lightness: 36%),
136
+ $color: change-color($main-color, $saturation: 100%, $lightness: 40%),
130
137
  $text-color: change-color($main-color, $saturation: 0%, $lightness: 100%),
131
- $border-color: change-color($main-color, $saturation: 57%, $lightness: 32%),
138
+ $font-weight: 600,
139
+ $border-color: change-color($main-color, $saturation: 57%,
140
+ $lightness: 32%),
132
141
  $hover-border-color: change-color($main-color, $saturation: 100%,
133
142
  $lightness: 22%),
134
143
  $subdued: false
data/app/assets/stylesheets/pwnplus/_form_fields.css.scss CHANGED
@@ -5,7 +5,7 @@
5
5
  $background-color: inherit,
6
6
  $hover-border-color: darken($border-color, 19%),
7
7
  $hover-shadow-color: lighten($hover-border-color, 3%),
8
- $focus-border-color: saturate(darken($border-color, 55%), 100%),
8
+ $focus-border-color: saturate(darken($border-color, 55%), 100%),
9
9
  $focus-shadow-color: desaturate(lighten($focus-border-color, 55%), 33%),
10
10
  $placeholder-text-color: change-color($border-color, $saturation: 95%,
11
11
  $lightness: 55%)
@@ -14,7 +14,7 @@
14
14
  padding: 0.1em 0.5ex;
15
15
  border: 1px solid $border-color;
16
16
  border-top-color: darken($border-color, 10%);
17
-
17
+
18
18
  -webkit-border-radius: 2px;
19
19
  -moz-border-radius: 2px;
20
20
  border-radius: 2px;
@@ -23,30 +23,30 @@
23
23
  font-size: inherit;
24
24
  line-height: inherit;
25
25
  text-decoration: none;
26
-
26
+
27
27
  background-color: $background-color;
28
28
 
29
29
  -webkit-transition: all .218s;
30
30
  -moz-transition: all .218s;
31
- transition: all .218s;
31
+ transition: all .218s;
32
32
 
33
33
  &:hover {
34
34
  border-color: $hover-border-color;
35
35
  border-top-color: darken($hover-border-color, 10%);
36
36
 
37
37
 
38
- -moz-box-shadow: inset 0px 1px 2px $hover-shadow-color;
39
- -webkit-box-shadow: inset 0px 1px 2px $hover-shadow-color;
40
- box-shadow: inset 0px 1px 2px $hover-shadow-color;
38
+ -moz-box-shadow: inset 0 1px 2px $hover-shadow-color;
39
+ -webkit-box-shadow: inset 0 1px 2px $hover-shadow-color;
40
+ box-shadow: inset 0 1px 2px $hover-shadow-color;
41
41
  }
42
42
  &:focus {
43
43
  border-color: $focus-border-color;
44
44
  border-top-color: darken($focus-border-color, 10%);
45
45
  outline: none;
46
46
 
47
- -moz-box-shadow: inset 0px 1px 2px $focus-shadow-color;
48
- -webkit-box-shadow: inset 0px 1px 2px $focus-shadow-color;
49
- box-shadow: inset 0px 1px 2px $input-focus-shadow-color;
47
+ -moz-box-shadow: inset 0 1px 2px $focus-shadow-color;
48
+ -webkit-box-shadow: inset 0 1px 2px $focus-shadow-color;
49
+ box-shadow: inset 0 1px 2px $input-focus-shadow-color;
50
50
  }
51
51
 
52
52
  &::-webkit-input-placeholder {
@@ -67,7 +67,7 @@
67
67
  $background-color: inherit,
68
68
  $hover-border-color: darken($border-color, 19%),
69
69
  $hover-shadow-color: lighten($hover-border-color, 3%),
70
- $focus-border-color: saturate(darken($border-color, 55%), 100%),
70
+ $focus-border-color: saturate(darken($border-color, 55%), 100%),
71
71
  $focus-shadow-color: desaturate(lighten($focus-border-color, 55%), 33%)
72
72
  ) {
73
73
  border: 1px solid $border-color;
@@ -75,23 +75,23 @@
75
75
 
76
76
  -webkit-transition: all .218s;
77
77
  -moz-transition: all .218s;
78
- transition: all .218s;
78
+ transition: all .218s;
79
79
 
80
80
  &:hover {
81
81
  border-color: $hover-border-color;
82
-
83
- box-shadow: inset 0px 1px 2px $hover-shadow-color;
84
- -moz-box-shadow: inset 0px 1px 2px $hover-shadow-color;
85
- -webkit-box-shadow: inset 0px 1px 2px $hover-shadow-color;
82
+
83
+ box-shadow: inset 0 1px 2px $hover-shadow-color;
84
+ -moz-box-shadow: inset 0 1px 2px $hover-shadow-color;
85
+ -webkit-box-shadow: inset 0 1px 2px $hover-shadow-color;
86
86
  }
87
87
  &:focus {
88
88
  border-color: $focus-border-color;
89
89
  outline: none;
90
90
 
91
- -moz-box-shadow: inset 0px 1px 2px $focus-shadow-color;
92
- -webkit-box-shadow: inset 0px 1px 2px $focus-shadow-color;
93
- box-shadow: inset 0px 1px 2px $focus-shadow-color;
94
- }
91
+ -moz-box-shadow: inset 0 1px 2px $focus-shadow-color;
92
+ -webkit-box-shadow: inset 0 1px 2px $focus-shadow-color;
93
+ box-shadow: inset 0 1px 2px $focus-shadow-color;
94
+ }
95
95
  }
96
96
 
97
97
  @mixin gplus-form-select(
@@ -100,7 +100,7 @@
100
100
  $background-color: inherit,
101
101
  $hover-border-color: darken($border-color, 19%),
102
102
  $hover-shadow-color: lighten($hover-border-color, 3%),
103
- $focus-border-color: saturate(darken($border-color, 55%), 100%),
103
+ $focus-border-color: saturate(darken($border-color, 55%), 100%),
104
104
  $focus-shadow-color: desaturate(lighten($focus-border-color, 55%), 33%),
105
105
  $placeholder-text-color: change-color($border-color, $saturation: 95%,
106
106
  $lightness: 55%)
@@ -111,7 +111,7 @@
111
111
  $background-color: $background-color,
112
112
  $hover-border-color: $hover-border-color,
113
113
  $hover-shadow-color: $hover-shadow-color,
114
- $focus-border-color: $focus-border-color,
114
+ $focus-border-color: $focus-border-color,
115
115
  $focus-shadow-color: $focus-shadow-color,
116
116
  $placeholder-text-color: $placeholder-text-color
117
117
  );
@@ -133,7 +133,7 @@
133
133
  border-color: $highlight-color;
134
134
  background-color: $highlight-background;
135
135
 
136
- box-shadow: inset 0px 1px 2px $highlight-shadow;
137
- -moz-box-shadow: inset 0px 1px 2px $highlight-shadow;
138
- -webkit-box-shadow: inset 0px 1px 2px $highlight-shadow;
136
+ box-shadow: inset 0 1px 2px $highlight-shadow;
137
+ -moz-box-shadow: inset 0 1px 2px $highlight-shadow;
138
+ -webkit-box-shadow: inset 0 1px 2px $highlight-shadow;
139
139
  }
data/app/assets/stylesheets/pwnplus/_menu_bar.css.scss CHANGED
@@ -12,25 +12,27 @@
12
12
  color: $text-color;
13
13
  margin: 0;
14
14
  padding: 0;
15
-
15
+
16
16
  @if $last-item-right {
17
17
  position: relative;
18
18
  }
19
19
  @include pwnplus-clearfix;
20
-
20
+
21
21
  li {
22
22
  margin: 0;
23
23
  padding: 0;
24
24
  }
25
-
25
+
26
+ vertical-align: bottom;
26
27
  > li {
27
28
  display: inline-block;
28
29
  background-color: $bar-color;
29
-
30
+ vertical-align: bottom;
31
+
30
32
  > a {
31
33
  display: inline-block;
32
34
  }
33
-
35
+
34
36
  > ol {
35
37
  list-style: none;
36
38
  display: none;
@@ -40,11 +42,11 @@
40
42
  border: 1px solid $border-color;
41
43
  position: absolute;
42
44
  z-index: $z-index;
43
-
45
+
44
46
  -webkit-box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.1);
45
47
  -moz-box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.1);
46
48
  box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.1);
47
-
49
+
48
50
  a {
49
51
  padding: 0 2.5em 0 0.5em;
50
52
  }
@@ -56,7 +58,7 @@
56
58
  }
57
59
  }
58
60
  li:hover > a {
59
- background-color: $hover-bar-color;
61
+ background-color: $hover-bar-color;
60
62
  color: $hover-text-color;
61
63
  img {
62
64
  -webkit-filter: grayscale(0);
@@ -75,7 +77,7 @@
75
77
  a:visited {
76
78
  color: inherit;
77
79
  }
78
-
80
+
79
81
  >li:first-child > a {
80
82
  padding-left: 1px;
81
83
  }
data/pwnstyles_rails.gemspec CHANGED
@@ -5,11 +5,11 @@
5
5
 
6
6
  Gem::Specification.new do |s|
7
7
  s.name = "pwnstyles_rails"
8
- s.version = "0.1.22"
8
+ s.version = "0.1.23"
9
9
 
10
10
  s.required_rubygems_version = Gem::Requirement.new(">= 0") if s.respond_to? :required_rubygems_version=
11
11
  s.authors = ["Victor Costan"]
12
- s.date = "2012-05-09"
12
+ s.date = "2012-09-07"
13
13
  s.description = "Included CSS was designed for reuse across pwnb.us apps."
14
14
  s.email = "victor@costan.us"
15
15
  s.extra_rdoc_files = [
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: pwnstyles_rails
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.1.22
4
+ version: 0.1.23
5
5
  prerelease:
6
6
  platform: ruby
7
7
  authors:
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2012-05-09 00:00:00.000000000 Z
12
+ date: 2012-09-07 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: rails
@@ -194,7 +194,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
194
194
  version: '0'
195
195
  segments:
196
196
  - 0
197
- hash: -3682663604570600785
197
+ hash: -1794675598573096078
198
198
  required_rubygems_version: !ruby/object:Gem::Requirement
199
199
  none: false
200
200
  requirements: