jetpack-rails 0.7.1 → 0.8.0

Sign up to get free protection for your applications and to get access to all the features.
@@ -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
+ }