jetpack-rails 0.7.1 → 0.8.0

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.
@@ -1,66 +1,71 @@
1
1
  /* Navigation +
2
2
  * Based on Twitter Bootstrap
3
3
  * ---------------------------------------------------------------------------------------- */
4
-
5
- .tab_container div, .pill_container div {
6
- display: none;
7
- &.active { display: block; }
8
- }
9
4
 
10
- // Common tab and pill styles
11
- .tabs, .pills { margin: 0 0 20px; padding: 0; @include clearfix();
12
- li {
13
- display: inline;
14
- a { float: left; width: auto; }
5
+ // TODO - V0.9: redo tabs, pills.
6
+ @mixin tabs-pills {
7
+ .tab_container div, .pill_container div {
8
+ display: none;
9
+ &.active { display: block; }
15
10
  }
16
- }
17
11
 
18
- // Basic Tabs
19
- .tabs {
20
- width: 100%; border-bottom: 1px solid $light2;
21
- li {
22
- a {
23
- margin: 0 0 -1px 2px; padding: 0 15px; line-height: ($baseline * 2) - 1; @include border-radius(3px 3px 0 0);
24
- &:hover { background: $light1; border-bottom: 1px solid $light2; color: $dark2; text-decoration: none; }
25
- &.active { background: $color1; padding: 0 14px; border: 1px solid $light2; border-bottom: 0; color: $dark1; text-decoration: none; }
12
+ // Common tab and pill styles
13
+ .tabs, .pills { margin: 0 0 20px; padding: 0; @include clearfix();
14
+ li {
15
+ display: inline;
16
+ a { float: left; width: auto; }
26
17
  }
27
18
  }
28
- }
29
19
 
30
- // Basic pill nav
31
- .pills {
32
- li {
33
- a {
34
- margin: 5px 3px 5px 0; padding: 0 15px; text-shadow: 0 1px 1px $white; line-height: 30px; @include border-radius(15px);
35
- &:hover { background: $light1; color: $dark2; text-decoration: none; text-shadow: 0 1px $white; }
36
- &.active { background: $color1; color: $dark2; text-shadow: 0 1px lighten( $color1, 15% ); text-decoration: none; }
20
+ // Basic Tabs
21
+ .tabs {
22
+ width: 100%; border-bottom: 1px solid $light2;
23
+ li {
24
+ a {
25
+ margin: 0 0 -1px 2px; padding: 0 15px; line-height: ($baseline * 2) - 1; @include border-radius(3px 3px 0 0);
26
+ &:hover { background: $light1; border-bottom: 1px solid $light2; color: $dark2; text-decoration: none; }
27
+ &.active { background: $color1; padding: 0 14px; border: 1px solid $light2; border-bottom: 0; color: $dark1; text-decoration: none; }
28
+ }
37
29
  }
38
30
  }
39
- }
40
31
 
41
- // PAGINATION
42
- .pagination { height: $baseline * 2; margin: $baseline 0;
43
- // List Style Pagination
44
- ul {
45
- float: left; margin: 0; border: 1px solid $light2; @include border-radius(3px); @include box-shadow(0 1px 2px rgba(0,0,0,.05)); clear: both;
32
+ // Basic pill nav
33
+ .pills {
46
34
  li {
47
- display: inline;
48
- a { float: left; padding: 0 14px; line-height: ($baseline * 2) - 2; border-right: 1px solid; border-right-color: $light2; text-decoration: none; }
49
- a:hover, &.active a { background-color: $color1; color: $white; }
50
- &.disabled a, &.disabled a:hover { background-color: transparent; color: $light2; }
51
- &.next a { border: 0; }
35
+ a {
36
+ margin: 5px 3px 5px 0; padding: 0 15px; text-shadow: 0 1px 1px $white; line-height: 30px; @include border-radius(15px);
37
+ &:hover { background: $light1; color: $dark2; text-decoration: none; text-shadow: 0 1px $white; }
38
+ &.active { background: $color1; color: $dark2; text-shadow: 0 1px lighten( $color1, 15% ); text-decoration: none; }
39
+ }
52
40
  }
53
41
  }
54
42
  }
55
43
 
56
- // Kaminari Style Pagination
57
- nav.pagination {
58
- float: left; clear: both; height: $baseline * 2; margin: $baseline 0;
59
- border: 1px solid $light2; @include border-radius(3px); @include box-shadow(0 1px 2px rgba(0,0,0,.05));
60
- span { display: block; float: left; border-left: 1px solid $light2; line-height: ($baseline * 2); padding: 0 14px;
61
- &:hover { background-color: $light1; }
62
- &.current {background-color: $color1; color: $white; }
63
- &:first-child { border: 0; }
64
- a { text-decoration: none; color: inherit; }
44
+ // TODO - V0.9: redo pagination
45
+ @mixin pagination {
46
+ .pagination { height: $baseline * 2; margin: $baseline 0;
47
+ // List Style Pagination
48
+ ul {
49
+ float: left; margin: 0; border: 1px solid $light2; @include border-radius(3px); @include box-shadow(0 1px 2px rgba(0,0,0,.05)); clear: both;
50
+ li {
51
+ display: inline;
52
+ a { float: left; padding: 0 14px; line-height: ($baseline * 2) - 2; border-right: 1px solid; border-right-color: $light2; text-decoration: none; }
53
+ a:hover, &.active a { background-color: $color1; color: $white; }
54
+ &.disabled a, &.disabled a:hover { background-color: transparent; color: $light2; }
55
+ &.next a { border: 0; }
56
+ }
57
+ }
58
+ }
59
+
60
+ // Kaminari Style Pagination
61
+ nav.pagination {
62
+ float: left; clear: both; height: $baseline * 2; margin: $baseline 0;
63
+ border: 1px solid $light2; @include border-radius(3px); @include box-shadow(0 1px 2px rgba(0,0,0,.05));
64
+ span { display: block; float: left; border-left: 1px solid $light2; line-height: ($baseline * 2); padding: 0 14px;
65
+ &:hover { background-color: $light1; }
66
+ &.current {background-color: $color1; color: $white; }
67
+ &:first-child { border: 0; }
68
+ a { text-decoration: none; color: inherit; }
69
+ }
65
70
  }
66
- }
71
+ }
@@ -1,3 +1,4 @@
1
+ // TODO - Add full comments here
1
2
  // COLOR DEFINITIONS
2
3
  $light1: #EAEBEC;
3
4
  $light2: #9A9FA0;
@@ -23,12 +24,23 @@ $error2: #D64338;
23
24
  $white: #FFFFFF;
24
25
  $black: #000000;
25
26
 
27
+ // LINE STYLES
28
+ $light-line: 1px solid $light1;
29
+ $dark-link: 1px solid $dark1;
30
+
26
31
  // TYPOGRAPHY DEFINITIONS
27
32
  $sans: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
28
33
  $serif: "Georgia", "Times", "Times New Roman", serif;
29
34
  $mono: "Monaco", "Andale Mono", "Courier New", monospace;
30
35
 
31
36
  $base_font: $sans;
32
- $base_size: 13px;
37
+ $base_size: 15px;
33
38
  $base_weight: 400;
34
- $baseline: 18px;
39
+ $baseline: 20px;
40
+
41
+ // LAYOUT DEFAULTS
42
+ $responsive: true;
43
+ $desktop: 1000px;
44
+ $tablet: 760px;
45
+ $mobile: 280px;
46
+ $margin: 20px;
@@ -2,22 +2,17 @@
2
2
  * Resetize
3
3
  * A mashup of "Normalize" and "Formalize".
4
4
  * -----------------------------------------------------------------------------------------*/
5
-
6
5
 
6
+ /*! normalize.css v2.1.0 | MIT License | git.io/normalize */
7
7
 
8
- /* Normalize.css +
9
- * normalize.css 2011-08-31T22:02 UTC http://github.com/necolas/normalize.css
10
- *
11
- * with customizations to make it more "sassy" and more modular.
12
- * ---------------------------------------------------------------------------------------- */
13
-
14
- /* =============================================================================
15
- HTML5 display definitions
16
- ========================================================================== */
8
+ /* ==========================================================================
9
+ HTML5 display definitions
10
+ ========================================================================== */
17
11
 
18
- /*
19
- * Corrects block display not defined in IE6/7/8/9 & FF3
12
+ /**
13
+ * Correct `block` display not defined in IE 8/9.
20
14
  */
15
+
21
16
  article,
22
17
  aside,
23
18
  details,
@@ -26,260 +21,250 @@ figure,
26
21
  footer,
27
22
  header,
28
23
  hgroup,
24
+ main,
29
25
  nav,
30
- section {
31
- display: block;
26
+ section,
27
+ summary {
28
+ display: block;
32
29
  }
33
30
 
34
- /*
35
- * Corrects inline-block display not defined in IE6/7/8/9 & FF3
31
+ /**
32
+ * Correct `inline-block` display not defined in IE 8/9.
36
33
  */
34
+
37
35
  audio,
38
36
  canvas,
39
37
  video {
40
- display: inline-block;
41
- *display: inline;
42
- *zoom: 1;
38
+ display: inline-block;
43
39
  }
44
40
 
45
- /*
46
- * Prevents modern browsers from displaying 'audio' without controls
41
+ /**
42
+ * Prevent modern browsers from displaying `audio` without controls.
43
+ * Remove excess height in iOS 5 devices.
47
44
  */
45
+
48
46
  audio:not([controls]) {
49
- display: none;
47
+ display: none;
48
+ height: 0;
50
49
  }
51
50
 
52
- /*
53
- * Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4
54
- * Known issue: no IE6 support
51
+ /**
52
+ * Address styling not present in IE 8/9.
55
53
  */
56
54
 
57
55
  [hidden] {
58
- display: none;
56
+ display: none;
59
57
  }
60
58
 
59
+ /* ==========================================================================
60
+ Base
61
+ ========================================================================== */
61
62
 
62
- /* =============================================================================
63
- Base
64
- ========================================================================== */
65
-
66
- /*
67
- * 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units
68
- * http://clagnut.com/blog/348/#c790
69
- * 2. Keeps page centred in all browsers regardless of content height
70
- * 3. Prevents iOS text size adjust after orientation change, without disabling user zoom
71
- * www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
63
+ /**
64
+ * 1. Set default font family to sans-serif.
65
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
66
+ * user zoom.
72
67
  */
73
68
 
74
69
  html {
75
- font-size: 100%; /* 1 */
76
- overflow-y: scroll; /* 2 */
77
- -webkit-text-size-adjust: 100%; /* 3 */
78
- -ms-text-size-adjust: 100%; /* 3 */
70
+ font-family: sans-serif; /* 1 */
71
+ -webkit-text-size-adjust: 100%; /* 2 */
72
+ -ms-text-size-adjust: 100%; /* 2 */
79
73
  }
80
74
 
81
- /*
82
- * Addresses margins handled incorrectly in IE6/7
75
+ /**
76
+ * Remove default margin.
83
77
  */
84
78
 
85
79
  body {
86
- margin: 0;
80
+ margin: 0;
87
81
  }
88
82
 
89
- /*
90
- * Addresses font-family inconsistency between 'textarea' and other form elements.
83
+ p {
84
+ margin: 3px 0 12px;
85
+ }
86
+
87
+ /* ==========================================================================
88
+ Links
89
+ ========================================================================== */
90
+
91
+ /**
92
+ * Address `outline` inconsistency between Chrome and other browsers.
91
93
  */
92
94
 
93
- body,
94
- button,
95
- input,
96
- select,
97
- textarea {
98
- font-family: sans-serif;
95
+ a:focus {
96
+ outline: thin dotted;
99
97
  }
100
98
 
99
+ /**
100
+ * Improve readability when focused and also mouse hovered in all browsers.
101
+ */
101
102
 
102
- /* =============================================================================
103
- Links
104
- ========================================================================== */
105
-
106
- a { color: $color1; text-decoration: none;
107
- &:hover { text-decoration: underline; outline: 0; } // Improves readability when focused and also mouse hovered in all browsers
108
- &:active { color: lighten( $color1, 10% ); }
109
- &:visited { color: $color1; }
110
- &:focus { outline: thin dotted;} // Addresses outline displayed oddly in Chrome
103
+ a:active,
104
+ a:hover {
105
+ outline: 0;
111
106
  }
112
107
 
113
- /* =============================================================================
114
- Typography
115
- ========================================================================== */
108
+ /* ==========================================================================
109
+ Typography
110
+ ========================================================================== */
116
111
 
117
- /*
118
- * Addresses styling not present in IE7/8/9, S5, Chrome
112
+ /**
113
+ * Address variable `h1` font-size and margin within `section` and `article`
114
+ * contexts in Firefox 4+, Safari 5, and Chrome.
119
115
  */
120
116
 
121
- abbr[title] {
122
- border-bottom: 1px dotted;
117
+ h1 {
118
+ font-size: 2em;
119
+ margin: 0.67em 0;
123
120
  }
124
121
 
125
- /*
126
- * Set address to not be italics by default.
122
+ /**
123
+ * Address styling not present in IE 8/9, Safari 5, and Chrome.
127
124
  */
128
- address { font-style: inherit; }
129
125
 
130
- /*
131
- * Addresses style set to 'bolder' in FF3/4, S4/5, Chrome
132
- */
126
+ abbr[title] {
127
+ border-bottom: 1px dotted;
128
+ }
129
+
130
+ /**
131
+ * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
132
+ */
133
133
 
134
- b,
135
- strong {
136
- font-weight: bold;
134
+ b,
135
+ strong {
136
+ font-weight: bold;
137
137
  }
138
138
 
139
- /*
140
- * Addresses styling not present in S5, Chrome
139
+ /**
140
+ * Address styling not present in Safari 5 and Chrome.
141
141
  */
142
142
 
143
143
  dfn {
144
- font-style: italic;
144
+ font-style: italic;
145
145
  }
146
146
 
147
- /*
148
- * Addresses styling not present in IE6/7/8/9
147
+ /**
148
+ * Address differences between Firefox and other browsers.
149
+ */
150
+
151
+ hr {
152
+ -moz-box-sizing: content-box;
153
+ box-sizing: content-box;
154
+ height: 0;
155
+ }
156
+
157
+ /**
158
+ * Address styling not present in IE 8/9.
149
159
  */
150
160
 
151
161
  mark {
152
- background: #ff0;
153
- color: #000;
162
+ background: #ff0;
163
+ color: #000;
154
164
  }
155
165
 
156
- /*
157
- * Corrects font family set oddly in IE6, S4/5, Chrome
158
- * en.wikipedia.org/wiki/User:Davidgothberg/Test59
166
+ /**
167
+ * Correct font family set oddly in Safari 5 and Chrome.
159
168
  */
160
169
 
161
- pre,
162
170
  code,
163
171
  kbd,
172
+ pre,
164
173
  samp {
165
- font-family: monospace, serif;
166
- _font-family: 'courier new', monospace;
167
- font-size: 1em;
174
+ font-family: monospace, serif;
175
+ font-size: 1em;
168
176
  }
169
177
 
170
- /*
171
- * Improves readability of pre-formatted text in all browsers
178
+ /**
179
+ * Improve readability of pre-formatted text in all browsers.
172
180
  */
173
181
 
174
182
  pre {
175
- white-space: pre;
176
- white-space: pre-wrap;
177
- word-wrap: break-word;
183
+ white-space: pre-wrap;
178
184
  }
179
185
 
180
- /*
181
- * 1. Addresses CSS quotes not supported in IE6/7
182
- * 2. Addresses quote property not supported in S4
186
+ /**
187
+ * Set consistent quote types.
183
188
  */
184
189
 
185
- /* 1 */
186
-
187
190
  q {
188
- quotes: none;
191
+ quotes: "\201C" "\201D" "\2018" "\2019";
189
192
  }
190
193
 
191
- /* 2 */
192
-
193
- q:before,
194
- q:after {
195
- content: '';
196
- content: none;
197
- }
194
+ /**
195
+ * Address inconsistent and variable font size in all browsers.
196
+ */
198
197
 
199
198
  small {
200
- font-size: 75%;
199
+ font-size: 80%;
201
200
  }
202
201
 
203
- /*
204
- * Prevents sub and sup affecting line-height in all browsers
205
- * gist.github.com/413930
202
+ /**
203
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
206
204
  */
207
205
 
208
206
  sub,
209
207
  sup {
210
- font-size: 75%;
211
- line-height: 0;
212
- position: relative;
213
- vertical-align: baseline;
208
+ font-size: 75%;
209
+ line-height: 0;
210
+ position: relative;
211
+ vertical-align: baseline;
214
212
  }
215
213
 
216
214
  sup {
217
- top: -0.5em;
215
+ top: -0.5em;
218
216
  }
219
217
 
220
218
  sub {
221
- bottom: -0.25em;
219
+ bottom: -0.25em;
222
220
  }
223
221
 
222
+ /* ==========================================================================
223
+ Embedded content
224
+ ========================================================================== */
224
225
 
225
- /* =============================================================================
226
- Lists
227
- ========================================================================== */
228
-
229
- ul, ol { margin: 0; padding: 0; }
230
- dd { margin: 0; }
231
- nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; }
232
-
233
-
234
- /* =============================================================================
235
- Embedded content
236
- ========================================================================== */
237
-
238
- /*
239
- * 1. Removes border when inside 'a' element in IE6/7/8/9, F3
240
- * 2. Improves image quality when scaled in IE7
241
- * code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
226
+ /**
227
+ * Remove border when inside `a` element in IE 8/9.
242
228
  */
243
229
 
244
230
  img {
245
- border: 0; /* 1 */
246
- -ms-interpolation-mode: bicubic; /* 2 */
231
+ border: 0;
247
232
  }
248
233
 
249
- /*
250
- * Corrects overflow displayed oddly in IE9
234
+ /**
235
+ * Correct overflow displayed oddly in IE 9.
251
236
  */
252
237
 
253
238
  svg:not(:root) {
254
- overflow: hidden;
239
+ overflow: hidden;
255
240
  }
256
241
 
242
+ /* ==========================================================================
243
+ Figures
244
+ ========================================================================== */
257
245
 
258
- /* =============================================================================
259
- Figures
260
- ========================================================================== */
261
-
262
- /*
263
- * Addresses margin not present in IE6/7/8/9, S5, O11
246
+ /**
247
+ * Address margin not present in IE 8/9 and Safari 5.
264
248
  */
265
249
 
266
250
  figure {
267
- margin: 0;
251
+ margin: 0;
268
252
  }
269
253
 
270
- /* =============================================================================
271
- Tables
272
- ========================================================================== */
254
+ /* ==========================================================================
255
+ Tables
256
+ ========================================================================== */
273
257
 
274
- /*
275
- * Remove most spacing between table cells
258
+ /**
259
+ * Remove most spacing between table cells.
276
260
  */
277
261
 
278
262
  table {
279
- border-collapse: collapse;
280
- border-spacing: 0;
263
+ border-collapse: collapse;
264
+ border-spacing: 0;
281
265
  }
282
266
 
267
+
283
268
  /* Formalize.css
284
269
  * with customizations and adaptations to make it more "sassy".
285
270
  * ---------------------------------------------------------------------------------------- */
@@ -303,42 +288,14 @@ textarea {
303
288
  vertical-align: middle;
304
289
  }
305
290
 
306
- input[type="radio"],
307
291
  input[type="checkbox"] {
308
- position: relative;
309
- vertical-align: top;
310
- top: 2px;
311
- /* IE8, IE9, IE10 */
312
- top: 0\0;
313
- /* IE7 */
314
- *top: -3px;
292
+ position: relative;
293
+ bottom: 1px;
315
294
  }
316
295
 
317
- /* iPad */
318
- @media (-webkit-min-device-pixel-ratio: 1) and (max-device-width: 1024px) {
319
- input[type="radio"],
320
- input[type="checkbox"] {
321
- vertical-align: baseline;
322
- top: 2px;
323
- }
324
- }
325
-
326
- /* iPhone 3 */
327
- @media (-webkit-min-device-pixel-ratio: 1) and (max-device-width: 480px) {
328
- input[type="radio"],
329
- input[type="checkbox"] {
330
- vertical-align: baseline;
331
- top: 0;
332
- }
333
- }
334
-
335
- /* iPhone 4 */
336
- @media (-webkit-min-device-pixel-ratio: 2) and (max-device-width: 480px) {
337
- input[type="radio"],
338
- input[type="checkbox"] {
339
- vertical-align: baseline;
340
- top: 0;
341
- }
296
+ input[type="radio"] {
297
+ position: relative;
298
+ bottom: 2px;
342
299
  }
343
300
 
344
301
  button,
@@ -3,30 +3,31 @@
3
3
  * with customizations and adaptations to make it more "sassy".
4
4
  * ---------------------------------------------------------------------------------------- */
5
5
 
6
-
7
- // BASELINE STYLES
8
- table {
9
- width: 100%; margin-bottom: $baseline; padding: 0; border: 1px solid $light1;
10
- border-collapse: separate; // Done so we can round those corners!
11
- *border-collapse: collapse; /* IE7, collapse table to remove spacing */
12
- @include border-radius(4px);
13
- th, td { padding: 10px 10px 9px; line-height: $baseline; text-align: left; }
14
- th { padding-top: 9px; font-weight: bold; vertical-align: middle; border-bottom: 1px solid $light1; }
15
- td { vertical-align: top; }
16
- th + th, td + td { border-left: 1px solid $light1; }
17
- tr + tr td { border-top: 1px solid $light1; }
18
- tbody tr:first-child td:first-child { @include border-radius(4px 0 0 0); }
19
- tbody tr:first-child td:last-child { @include border-radius(0 4px 0 0); }
20
- tbody tr:last-child td:first-child { @include border-radius(0 0 0 4px); }
21
- tbody tr:last-child td:last-child { @include border-radius(0 0 4px 0); }
22
- }
6
+ // TODO: V0.9: Redo this
7
+ @mixin tables {
8
+ table {
9
+ width: 100%; margin-bottom: $baseline; padding: 0; border: 1px solid $light1;
10
+ border-collapse: separate; // Done so we can round those corners!
11
+ *border-collapse: collapse; /* IE7, collapse table to remove spacing */
12
+ @include border-radius(4px);
13
+ th, td { padding: 10px 10px 9px; line-height: $baseline; text-align: left; }
14
+ th { padding-top: 9px; font-weight: bold; vertical-align: middle; border-bottom: 1px solid $light1; }
15
+ td { vertical-align: top; }
16
+ th + th, td + td { border-left: 1px solid $light1; }
17
+ tr + tr td { border-top: 1px solid $light1; }
18
+ tbody tr:first-child td:first-child { @include border-radius(4px 0 0 0); }
19
+ tbody tr:first-child td:last-child { @include border-radius(0 4px 0 0); }
20
+ tbody tr:last-child td:first-child { @include border-radius(0 0 0 4px); }
21
+ tbody tr:last-child td:last-child { @include border-radius(0 0 4px 0); }
22
+ }
23
23
 
24
24
 
25
- // ZEBRA-STRIPING
26
- // Default zebra-stripe styles (alternating gray and transparent backgrounds)
27
- table.striped {
28
- tbody {
29
- tr:nth-child(odd) td { background-color: $light1; }
30
- tr:hover td { background-color: darken( $light1, 5% ); }
25
+ // ZEBRA-STRIPING
26
+ // Default zebra-stripe styles (alternating gray and transparent backgrounds)
27
+ table.striped {
28
+ tbody {
29
+ tr:nth-child(odd) td { background-color: $light1; }
30
+ tr:hover td { background-color: darken( $light1, 5% ); }
31
+ }
31
32
  }
32
- }
33
+ }