responder 0.0.2 → 0.0.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (7) hide show
  1. data/README.md +1 -1
  2. data/lib/responder/version.rb +1 -1
  3. data/scss/responder/functions.scss +6 -6
  4. data/test/css/style.css +100 -100
  5. data/test/index.html +7 -7
  6. data/test/scss/style.scss +11 -126
  7. metadata +4 -4
data/README.md CHANGED
@@ -57,7 +57,7 @@ Yep, that was it. Your mixin is ready to use.
57
57
  This is how you use respond-to in your SASS stylesheet:
58
58
 
59
59
  selector {
60
- @include respond-to(breakpointName-extend) {
60
+ @include respond-to(breakpointName-extension) {
61
61
  // rules…
62
62
  }
63
63
  }
data/lib/responder/version.rb CHANGED
@@ -1,3 +1,3 @@
1
1
  module Responder
2
- VERSION = "0.0.2"
2
+ VERSION = "0.0.3"
3
3
  end
data/scss/responder/functions.scss CHANGED
@@ -33,7 +33,7 @@
33
33
  @function getBreakpointValues($breakpoints) {
34
34
  $values: ();
35
35
  @for $i from 1 through length($breakpoints) {
36
- @if type-of(nth(nth($breakpoints,$i),2)) == number {
36
+ @if unit(nth(nth($breakpoints,$i),2)) == px {
37
37
  $values: join($values, nth(nth($breakpoints,$i),2));
38
38
  } @else {
39
39
  @warn '[ERROR] "' + nth(nth($breakpoints,$i),2) + '" is not a valid breakipoint value';
@@ -102,11 +102,11 @@
102
102
 
103
103
  @function getBreakpointInfo($breakpoint) {
104
104
 
105
- // capture the extend (only, and-up or and-below)
106
- $extend: regex($breakpoint, '((and-)?[a-z]+)$');
105
+ // capture the extension (only, and-up or and-below)
106
+ $extension: regex($breakpoint, '((and-)?[a-z]+)$');
107
107
 
108
108
  // capture the breakpoint name
109
- $root: regex($breakpoint, '(.*?)-'+ $extend + '$');
109
+ $root: regex($breakpoint, '(.*?)-'+ $extension + '$');
110
110
 
111
111
  // Check if it's a normal breakpoint
112
112
  @for $i from 1 through length($breakpoint-names) {
@@ -114,7 +114,7 @@
114
114
  @if $root == nth($breakpoint-names, $i) {
115
115
  $group: false;
116
116
  $groupid: false;
117
- $br: join($root, $extend, space);
117
+ $br: join($root, $extension, space);
118
118
  $br: join($br, $group, space);
119
119
  $br: join($br, $groupid, space);
120
120
  @return $br;
@@ -126,7 +126,7 @@
126
126
  @if $root == nth(nth($breakpoint-groups, $i),1) {
127
127
  $group: true;
128
128
  $groupid: $i;
129
- $br: join($root, $extend, space);
129
+ $br: join($root, $extension, space);
130
130
  $br: join($br, $group, space);
131
131
  $br: join($br, $groupid, space);
132
132
  @return $br;
data/test/css/style.css CHANGED
@@ -2,7 +2,7 @@
2
2
  body {
3
3
  font: 16px/21px "Helvetica Neue", Arial, sans-serif;
4
4
  }
5
- @media print and (min-width: 20em) and (max-width: 37.4375em) {
5
+ @media screen and (min-width: 20em) and (max-width: 37.4375em) {
6
6
  /* line 17, ../scss/style.scss */
7
7
  body {
8
8
  font-size: 95%;
@@ -34,158 +34,158 @@ tr > td:first-child {
34
34
  .mq-mixins-test tbody .response-example .isResponding {
35
35
  display: none;
36
36
  }
37
- @media print and (min-width: 20em) and (max-width: 37.4375em) {
38
- /* line 60, ../scss/style.scss */
39
- .mq-mixins-test tbody .respond-to-mobile {
37
+ @media screen and (min-width: 20em) and (max-width: 37.4375em) {
38
+ /* line 63, ../scss/style.scss */
39
+ .mq-mixins-test tbody .respond-to-mobile-only {
40
40
  background: #a7e040;
41
41
  color: white;
42
42
  }
43
43
  /* line 41, ../scss/style.scss */
44
- .mq-mixins-test tbody .respond-to-mobile .isResponding {
44
+ .mq-mixins-test tbody .respond-to-mobile-only .isResponding {
45
45
  display: inline;
46
46
  }
47
47
  /* line 42, ../scss/style.scss */
48
- .mq-mixins-test tbody .respond-to-mobile .isInactive {
48
+ .mq-mixins-test tbody .respond-to-mobile-only .isInactive {
49
49
  display: none;
50
50
  }
51
51
  }
52
- @media print and (min-width: 20em) and (max-width: 29.9375em) {
53
- /* line 65, ../scss/style.scss */
54
- .mq-mixins-test tbody .respond-to-mobile-portrait {
52
+ @media screen and (min-width: 20em) {
53
+ /* line 63, ../scss/style.scss */
54
+ .mq-mixins-test tbody .respond-to-mobile-and-up {
55
55
  background: #a7e040;
56
56
  color: white;
57
57
  }
58
58
  /* line 41, ../scss/style.scss */
59
- .mq-mixins-test tbody .respond-to-mobile-portrait .isResponding {
59
+ .mq-mixins-test tbody .respond-to-mobile-and-up .isResponding {
60
60
  display: inline;
61
61
  }
62
62
  /* line 42, ../scss/style.scss */
63
- .mq-mixins-test tbody .respond-to-mobile-portrait .isInactive {
63
+ .mq-mixins-test tbody .respond-to-mobile-and-up .isInactive {
64
64
  display: none;
65
65
  }
66
66
  }
67
- @media print and (min-width: 30em) and (max-width: 37.4375em) {
68
- /* line 70, ../scss/style.scss */
69
- .mq-mixins-test tbody .respond-to-mobile-landscape {
67
+ @media screen and (max-width: 37.4375em) {
68
+ /* line 63, ../scss/style.scss */
69
+ .mq-mixins-test tbody .respond-to-mobile-and-below {
70
70
  background: #a7e040;
71
71
  color: white;
72
72
  }
73
73
  /* line 41, ../scss/style.scss */
74
- .mq-mixins-test tbody .respond-to-mobile-landscape .isResponding {
74
+ .mq-mixins-test tbody .respond-to-mobile-and-below .isResponding {
75
75
  display: inline;
76
76
  }
77
77
  /* line 42, ../scss/style.scss */
78
- .mq-mixins-test tbody .respond-to-mobile-landscape .isInactive {
78
+ .mq-mixins-test tbody .respond-to-mobile-and-below .isInactive {
79
79
  display: none;
80
80
  }
81
81
  }
82
- @media print and (min-width: 37.5em) and (max-width: 61.9375em) {
83
- /* line 76, ../scss/style.scss */
84
- .mq-mixins-test tbody .respond-to-tablet {
82
+ @media screen and (min-width: 20em) and (max-width: 29.9375em) {
83
+ /* line 63, ../scss/style.scss */
84
+ .mq-mixins-test tbody .respond-to-mobile-portrait-only {
85
85
  background: #a7e040;
86
86
  color: white;
87
87
  }
88
88
  /* line 41, ../scss/style.scss */
89
- .mq-mixins-test tbody .respond-to-tablet .isResponding {
89
+ .mq-mixins-test tbody .respond-to-mobile-portrait-only .isResponding {
90
90
  display: inline;
91
91
  }
92
92
  /* line 42, ../scss/style.scss */
93
- .mq-mixins-test tbody .respond-to-tablet .isInactive {
93
+ .mq-mixins-test tbody .respond-to-mobile-portrait-only .isInactive {
94
94
  display: none;
95
95
  }
96
96
  }
97
- @media print and (min-width: 37.5em) and (max-width: 47.9375em) {
98
- /* line 82, ../scss/style.scss */
99
- .mq-mixins-test tbody .respond-to-tablet-portrait {
97
+ @media screen and (min-width: 20em) {
98
+ /* line 63, ../scss/style.scss */
99
+ .mq-mixins-test tbody .respond-to-mobile-portrait-and-up {
100
100
  background: #a7e040;
101
101
  color: white;
102
102
  }
103
103
  /* line 41, ../scss/style.scss */
104
- .mq-mixins-test tbody .respond-to-tablet-portrait .isResponding {
104
+ .mq-mixins-test tbody .respond-to-mobile-portrait-and-up .isResponding {
105
105
  display: inline;
106
106
  }
107
107
  /* line 42, ../scss/style.scss */
108
- .mq-mixins-test tbody .respond-to-tablet-portrait .isInactive {
108
+ .mq-mixins-test tbody .respond-to-mobile-portrait-and-up .isInactive {
109
109
  display: none;
110
110
  }
111
111
  }
112
- @media print and (min-width: 48em) and (max-width: 61.9375em) {
113
- /* line 88, ../scss/style.scss */
114
- .mq-mixins-test tbody .respond-to-tablet-landscape {
112
+ @media screen and (max-width: 29.9375em) {
113
+ /* line 63, ../scss/style.scss */
114
+ .mq-mixins-test tbody .respond-to-mobile-portrait-and-below {
115
115
  background: #a7e040;
116
116
  color: white;
117
117
  }
118
118
  /* line 41, ../scss/style.scss */
119
- .mq-mixins-test tbody .respond-to-tablet-landscape .isResponding {
119
+ .mq-mixins-test tbody .respond-to-mobile-portrait-and-below .isResponding {
120
120
  display: inline;
121
121
  }
122
122
  /* line 42, ../scss/style.scss */
123
- .mq-mixins-test tbody .respond-to-tablet-landscape .isInactive {
123
+ .mq-mixins-test tbody .respond-to-mobile-portrait-and-below .isInactive {
124
124
  display: none;
125
125
  }
126
126
  }
127
- @media print and (min-width: 62em) {
128
- /* line 94, ../scss/style.scss */
129
- .mq-mixins-test tbody .respond-to-desktop {
127
+ @media screen and (min-width: 30em) and (max-width: 37.4375em) {
128
+ /* line 63, ../scss/style.scss */
129
+ .mq-mixins-test tbody .respond-to-mobile-landscape-only {
130
130
  background: #a7e040;
131
131
  color: white;
132
132
  }
133
133
  /* line 41, ../scss/style.scss */
134
- .mq-mixins-test tbody .respond-to-desktop .isResponding {
134
+ .mq-mixins-test tbody .respond-to-mobile-landscape-only .isResponding {
135
135
  display: inline;
136
136
  }
137
137
  /* line 42, ../scss/style.scss */
138
- .mq-mixins-test tbody .respond-to-desktop .isInactive {
138
+ .mq-mixins-test tbody .respond-to-mobile-landscape-only .isInactive {
139
139
  display: none;
140
140
  }
141
141
  }
142
- @media print and (min-width: 20em) {
143
- /* line 103, ../scss/style.scss */
144
- .mq-mixins-test tbody .respond-to-mobile-and-up {
142
+ @media screen and (min-width: 30em) {
143
+ /* line 63, ../scss/style.scss */
144
+ .mq-mixins-test tbody .respond-to-mobile-landscape-and-up {
145
145
  background: #a7e040;
146
146
  color: white;
147
147
  }
148
148
  /* line 41, ../scss/style.scss */
149
- .mq-mixins-test tbody .respond-to-mobile-and-up .isResponding {
149
+ .mq-mixins-test tbody .respond-to-mobile-landscape-and-up .isResponding {
150
150
  display: inline;
151
151
  }
152
152
  /* line 42, ../scss/style.scss */
153
- .mq-mixins-test tbody .respond-to-mobile-and-up .isInactive {
153
+ .mq-mixins-test tbody .respond-to-mobile-landscape-and-up .isInactive {
154
154
  display: none;
155
155
  }
156
156
  }
157
- @media print and (min-width: 20em) {
158
- /* line 108, ../scss/style.scss */
159
- .mq-mixins-test tbody .respond-to-mobile-portrait-and-up {
157
+ @media screen and (max-width: 37.4375em) {
158
+ /* line 63, ../scss/style.scss */
159
+ .mq-mixins-test tbody .respond-to-mobile-landscape-and-below {
160
160
  background: #a7e040;
161
161
  color: white;
162
162
  }
163
163
  /* line 41, ../scss/style.scss */
164
- .mq-mixins-test tbody .respond-to-mobile-portrait-and-up .isResponding {
164
+ .mq-mixins-test tbody .respond-to-mobile-landscape-and-below .isResponding {
165
165
  display: inline;
166
166
  }
167
167
  /* line 42, ../scss/style.scss */
168
- .mq-mixins-test tbody .respond-to-mobile-portrait-and-up .isInactive {
168
+ .mq-mixins-test tbody .respond-to-mobile-landscape-and-below .isInactive {
169
169
  display: none;
170
170
  }
171
171
  }
172
- @media print and (min-width: 30em) {
173
- /* line 113, ../scss/style.scss */
174
- .mq-mixins-test tbody .respond-to-mobile-landscape-and-up {
172
+ @media screen and (min-width: 37.5em) and (max-width: 61.9375em) {
173
+ /* line 63, ../scss/style.scss */
174
+ .mq-mixins-test tbody .respond-to-tablet-only {
175
175
  background: #a7e040;
176
176
  color: white;
177
177
  }
178
178
  /* line 41, ../scss/style.scss */
179
- .mq-mixins-test tbody .respond-to-mobile-landscape-and-up .isResponding {
179
+ .mq-mixins-test tbody .respond-to-tablet-only .isResponding {
180
180
  display: inline;
181
181
  }
182
182
  /* line 42, ../scss/style.scss */
183
- .mq-mixins-test tbody .respond-to-mobile-landscape-and-up .isInactive {
183
+ .mq-mixins-test tbody .respond-to-tablet-only .isInactive {
184
184
  display: none;
185
185
  }
186
186
  }
187
- @media print and (min-width: 37.5em) {
188
- /* line 119, ../scss/style.scss */
187
+ @media screen and (min-width: 37.5em) {
188
+ /* line 63, ../scss/style.scss */
189
189
  .mq-mixins-test tbody .respond-to-tablet-and-up {
190
190
  background: #a7e040;
191
191
  color: white;
@@ -199,143 +199,143 @@ tr > td:first-child {
199
199
  display: none;
200
200
  }
201
201
  }
202
- @media print and (min-width: 37.5em) {
203
- /* line 125, ../scss/style.scss */
204
- .mq-mixins-test tbody .respond-to-tablet-portrait-and-up {
202
+ @media screen and (max-width: 61.9375em) {
203
+ /* line 63, ../scss/style.scss */
204
+ .mq-mixins-test tbody .respond-to-tablet-and-below {
205
205
  background: #a7e040;
206
206
  color: white;
207
207
  }
208
208
  /* line 41, ../scss/style.scss */
209
- .mq-mixins-test tbody .respond-to-tablet-portrait-and-up .isResponding {
209
+ .mq-mixins-test tbody .respond-to-tablet-and-below .isResponding {
210
210
  display: inline;
211
211
  }
212
212
  /* line 42, ../scss/style.scss */
213
- .mq-mixins-test tbody .respond-to-tablet-portrait-and-up .isInactive {
213
+ .mq-mixins-test tbody .respond-to-tablet-and-below .isInactive {
214
214
  display: none;
215
215
  }
216
216
  }
217
- @media print and (min-width: 48em) {
218
- /* line 131, ../scss/style.scss */
219
- .mq-mixins-test tbody .respond-to-tablet-landscape-and-up {
217
+ @media screen and (min-width: 37.5em) and (max-width: 47.9375em) {
218
+ /* line 63, ../scss/style.scss */
219
+ .mq-mixins-test tbody .respond-to-tablet-portrait-only {
220
220
  background: #a7e040;
221
221
  color: white;
222
222
  }
223
223
  /* line 41, ../scss/style.scss */
224
- .mq-mixins-test tbody .respond-to-tablet-landscape-and-up .isResponding {
224
+ .mq-mixins-test tbody .respond-to-tablet-portrait-only .isResponding {
225
225
  display: inline;
226
226
  }
227
227
  /* line 42, ../scss/style.scss */
228
- .mq-mixins-test tbody .respond-to-tablet-landscape-and-up .isInactive {
228
+ .mq-mixins-test tbody .respond-to-tablet-portrait-only .isInactive {
229
229
  display: none;
230
230
  }
231
231
  }
232
- @media print and (min-width: 62em) {
233
- /* line 137, ../scss/style.scss */
234
- .mq-mixins-test tbody .respond-to-desktop-and-up {
232
+ @media screen and (min-width: 37.5em) {
233
+ /* line 63, ../scss/style.scss */
234
+ .mq-mixins-test tbody .respond-to-tablet-portrait-and-up {
235
235
  background: #a7e040;
236
236
  color: white;
237
237
  }
238
238
  /* line 41, ../scss/style.scss */
239
- .mq-mixins-test tbody .respond-to-desktop-and-up .isResponding {
239
+ .mq-mixins-test tbody .respond-to-tablet-portrait-and-up .isResponding {
240
240
  display: inline;
241
241
  }
242
242
  /* line 42, ../scss/style.scss */
243
- .mq-mixins-test tbody .respond-to-desktop-and-up .isInactive {
243
+ .mq-mixins-test tbody .respond-to-tablet-portrait-and-up .isInactive {
244
244
  display: none;
245
245
  }
246
246
  }
247
- @media print and (max-width: 37.4375em) {
248
- /* line 146, ../scss/style.scss */
249
- .mq-mixins-test tbody .respond-to-mobile-and-below {
247
+ @media screen and (max-width: 47.9375em) {
248
+ /* line 63, ../scss/style.scss */
249
+ .mq-mixins-test tbody .respond-to-tablet-portrait-and-below {
250
250
  background: #a7e040;
251
251
  color: white;
252
252
  }
253
253
  /* line 41, ../scss/style.scss */
254
- .mq-mixins-test tbody .respond-to-mobile-and-below .isResponding {
254
+ .mq-mixins-test tbody .respond-to-tablet-portrait-and-below .isResponding {
255
255
  display: inline;
256
256
  }
257
257
  /* line 42, ../scss/style.scss */
258
- .mq-mixins-test tbody .respond-to-mobile-and-below .isInactive {
258
+ .mq-mixins-test tbody .respond-to-tablet-portrait-and-below .isInactive {
259
259
  display: none;
260
260
  }
261
261
  }
262
- @media print and (max-width: 29.9375em) {
263
- /* line 151, ../scss/style.scss */
264
- .mq-mixins-test tbody .respond-to-mobile-portrait-and-below {
262
+ @media screen and (min-width: 48em) and (max-width: 61.9375em) {
263
+ /* line 63, ../scss/style.scss */
264
+ .mq-mixins-test tbody .respond-to-tablet-landscape-only {
265
265
  background: #a7e040;
266
266
  color: white;
267
267
  }
268
268
  /* line 41, ../scss/style.scss */
269
- .mq-mixins-test tbody .respond-to-mobile-portrait-and-below .isResponding {
269
+ .mq-mixins-test tbody .respond-to-tablet-landscape-only .isResponding {
270
270
  display: inline;
271
271
  }
272
272
  /* line 42, ../scss/style.scss */
273
- .mq-mixins-test tbody .respond-to-mobile-portrait-and-below .isInactive {
273
+ .mq-mixins-test tbody .respond-to-tablet-landscape-only .isInactive {
274
274
  display: none;
275
275
  }
276
276
  }
277
- @media print and (max-width: 37.4375em) {
278
- /* line 156, ../scss/style.scss */
279
- .mq-mixins-test tbody .respond-to-mobile-landscape-and-below {
277
+ @media screen and (min-width: 48em) {
278
+ /* line 63, ../scss/style.scss */
279
+ .mq-mixins-test tbody .respond-to-tablet-landscape-and-up {
280
280
  background: #a7e040;
281
281
  color: white;
282
282
  }
283
283
  /* line 41, ../scss/style.scss */
284
- .mq-mixins-test tbody .respond-to-mobile-landscape-and-below .isResponding {
284
+ .mq-mixins-test tbody .respond-to-tablet-landscape-and-up .isResponding {
285
285
  display: inline;
286
286
  }
287
287
  /* line 42, ../scss/style.scss */
288
- .mq-mixins-test tbody .respond-to-mobile-landscape-and-below .isInactive {
288
+ .mq-mixins-test tbody .respond-to-tablet-landscape-and-up .isInactive {
289
289
  display: none;
290
290
  }
291
291
  }
292
- @media print and (max-width: 61.9375em) {
293
- /* line 162, ../scss/style.scss */
294
- .mq-mixins-test tbody .respond-to-tablet-and-below {
292
+ @media screen and (max-width: 61.9375em) {
293
+ /* line 63, ../scss/style.scss */
294
+ .mq-mixins-test tbody .respond-to-tablet-landscape-and-below {
295
295
  background: #a7e040;
296
296
  color: white;
297
297
  }
298
298
  /* line 41, ../scss/style.scss */
299
- .mq-mixins-test tbody .respond-to-tablet-and-below .isResponding {
299
+ .mq-mixins-test tbody .respond-to-tablet-landscape-and-below .isResponding {
300
300
  display: inline;
301
301
  }
302
302
  /* line 42, ../scss/style.scss */
303
- .mq-mixins-test tbody .respond-to-tablet-and-below .isInactive {
303
+ .mq-mixins-test tbody .respond-to-tablet-landscape-and-below .isInactive {
304
304
  display: none;
305
305
  }
306
306
  }
307
- @media print and (max-width: 47.9375em) {
308
- /* line 168, ../scss/style.scss */
309
- .mq-mixins-test tbody .respond-to-tablet-portrait-and-below {
307
+ @media screen and (min-width: 62em) {
308
+ /* line 63, ../scss/style.scss */
309
+ .mq-mixins-test tbody .respond-to-desktop-only {
310
310
  background: #a7e040;
311
311
  color: white;
312
312
  }
313
313
  /* line 41, ../scss/style.scss */
314
- .mq-mixins-test tbody .respond-to-tablet-portrait-and-below .isResponding {
314
+ .mq-mixins-test tbody .respond-to-desktop-only .isResponding {
315
315
  display: inline;
316
316
  }
317
317
  /* line 42, ../scss/style.scss */
318
- .mq-mixins-test tbody .respond-to-tablet-portrait-and-below .isInactive {
318
+ .mq-mixins-test tbody .respond-to-desktop-only .isInactive {
319
319
  display: none;
320
320
  }
321
321
  }
322
- @media print and (max-width: 61.9375em) {
323
- /* line 174, ../scss/style.scss */
324
- .mq-mixins-test tbody .respond-to-tablet-landscape-and-below {
322
+ @media screen and (min-width: 62em) {
323
+ /* line 63, ../scss/style.scss */
324
+ .mq-mixins-test tbody .respond-to-desktop-and-up {
325
325
  background: #a7e040;
326
326
  color: white;
327
327
  }
328
328
  /* line 41, ../scss/style.scss */
329
- .mq-mixins-test tbody .respond-to-tablet-landscape-and-below .isResponding {
329
+ .mq-mixins-test tbody .respond-to-desktop-and-up .isResponding {
330
330
  display: inline;
331
331
  }
332
332
  /* line 42, ../scss/style.scss */
333
- .mq-mixins-test tbody .respond-to-tablet-landscape-and-below .isInactive {
333
+ .mq-mixins-test tbody .respond-to-desktop-and-up .isInactive {
334
334
  display: none;
335
335
  }
336
336
  }
337
- @media print and (max-width: 61.9375em) {
338
- /* line 180, ../scss/style.scss */
337
+ @media screen and (max-width: 61.9375em) {
338
+ /* line 63, ../scss/style.scss */
339
339
  .mq-mixins-test tbody .respond-to-desktop-and-below {
340
340
  background: #a7e040;
341
341
  color: white;
data/test/index.html CHANGED
@@ -36,31 +36,31 @@
36
36
  <tbody>
37
37
  <tr>
38
38
  <td><code class="language-css">respond-to(mobile-only)</code></td>
39
- <td class="response-example respond-to-mobile"><span class="isInactive">inactive</span> <span class="isResponding">responding</span></td>
39
+ <td class="response-example respond-to-mobile-only"><span class="isInactive">inactive</span> <span class="isResponding">responding</span></td>
40
40
  </tr>
41
41
  <tr>
42
42
  <td><code class="language-css">respond-to(mobile-portrait-only)</code></td>
43
- <td class="response-example respond-to-mobile-portrait"><span class="isInactive">inactive</span> <span class="isResponding">responding</span></td>
43
+ <td class="response-example respond-to-mobile-portrait-only"><span class="isInactive">inactive</span> <span class="isResponding">responding</span></td>
44
44
  </tr>
45
45
  <tr>
46
46
  <td><code class="language-css">respond-to(mobile-landscape-only)</code></td>
47
- <td class="response-example respond-to-mobile-landscape"><span class="isInactive">inactive</span> <span class="isResponding">responding</span></td>
47
+ <td class="response-example respond-to-mobile-landscape-only"><span class="isInactive">inactive</span> <span class="isResponding">responding</span></td>
48
48
  </tr>
49
49
  <tr>
50
50
  <td><code class="language-css">respond-to(tablet-only)</code></td>
51
- <td class="response-example respond-to-tablet"><span class="isInactive">inactive</span> <span class="isResponding">responding</span></td>
51
+ <td class="response-example respond-to-tablet-only"><span class="isInactive">inactive</span> <span class="isResponding">responding</span></td>
52
52
  </tr>
53
53
  <tr>
54
54
  <td><code class="language-css">respond-to(tablet-portrait-only)</code></td>
55
- <td class="response-example respond-to-tablet-portrait"><span class="isInactive">inactive</span> <span class="isResponding">responding</span></td>
55
+ <td class="response-example respond-to-tablet-portrait-only"><span class="isInactive">inactive</span> <span class="isResponding">responding</span></td>
56
56
  </tr>
57
57
  <tr>
58
58
  <td><code class="language-css">respond-to(tablet-landscape-only)</code></td>
59
- <td class="response-example respond-to-tablet-landscape"><span class="isInactive">inactive</span> <span class="isResponding">responding</span></td>
59
+ <td class="response-example respond-to-tablet-landscape-only"><span class="isInactive">inactive</span> <span class="isResponding">responding</span></td>
60
60
  </tr>
61
61
  <tr>
62
62
  <td><code class="language-css">respond-to(desktop-only)</code></td>
63
- <td class="response-example respond-to-desktop"><span class="isInactive">inactive</span> <span class="isResponding">responding</span></td>
63
+ <td class="response-example respond-to-desktop-only"><span class="isInactive">inactive</span> <span class="isResponding">responding</span></td>
64
64
  </tr>
65
65
  </tbody>
66
66
  </table>
data/test/scss/style.scss CHANGED
@@ -54,132 +54,17 @@ tr > td:first-child { width: 80%; }
54
54
  .isResponding { display: none; }
55
55
  }
56
56
 
57
- // Only
58
- // =============================================================================
59
-
60
- .respond-to-mobile {
61
- @include respond-to(mobile-only) {
62
- @include is-responding;
63
- }
64
- }
65
- .respond-to-mobile-portrait {
66
- @include respond-to(mobile-portrait-only) {
67
- @include is-responding;
68
- }
69
- }
70
- .respond-to-mobile-landscape {
71
- @include respond-to(mobile-landscape-only) {
72
- @include is-responding;
73
- }
74
- }
75
-
76
- .respond-to-tablet {
77
- @include respond-to(tablet-only) {
78
- @include is-responding;
79
- }
80
- }
81
-
82
- .respond-to-tablet-portrait {
83
- @include respond-to(tablet-portrait-only) {
84
- @include is-responding;
85
- }
86
- }
87
-
88
- .respond-to-tablet-landscape {
89
- @include respond-to(tablet-landscape-only) {
90
- @include is-responding;
91
- }
92
- }
93
-
94
- .respond-to-desktop {
95
- @include respond-to(desktop-only) {
96
- @include is-responding;
97
- }
98
- }
99
-
100
- // And Up
101
- // =============================================================================
102
-
103
- .respond-to-mobile-and-up {
104
- @include respond-to(mobile-and-up) {
105
- @include is-responding;
106
- }
107
- }
108
- .respond-to-mobile-portrait-and-up {
109
- @include respond-to(mobile-portrait-and-up) {
110
- @include is-responding;
111
- }
112
- }
113
- .respond-to-mobile-landscape-and-up {
114
- @include respond-to(mobile-landscape-and-up) {
115
- @include is-responding;
116
- }
117
- }
118
-
119
- .respond-to-tablet-and-up {
120
- @include respond-to(tablet-and-up) {
121
- @include is-responding;
122
- }
123
- }
124
-
125
- .respond-to-tablet-portrait-and-up {
126
- @include respond-to(tablet-portrait-and-up) {
127
- @include is-responding;
128
- }
129
- }
130
-
131
- .respond-to-tablet-landscape-and-up {
132
- @include respond-to(tablet-landscape-and-up) {
133
- @include is-responding;
134
- }
135
- }
136
-
137
- .respond-to-desktop-and-up {
138
- @include respond-to(desktop-and-up) {
139
- @include is-responding;
140
- }
141
- }
142
-
143
- // And Below
144
- // =============================================================================
145
-
146
- .respond-to-mobile-and-below {
147
- @include respond-to(mobile-and-below) {
148
- @include is-responding;
149
- }
150
- }
151
- .respond-to-mobile-portrait-and-below {
152
- @include respond-to(mobile-portrait-and-below) {
153
- @include is-responding;
154
- }
155
- }
156
- .respond-to-mobile-landscape-and-below {
157
- @include respond-to(mobile-landscape-and-below) {
158
- @include is-responding;
159
- }
160
- }
161
-
162
- .respond-to-tablet-and-below {
163
- @include respond-to(tablet-and-below) {
164
- @include is-responding;
165
- }
166
- }
167
-
168
- .respond-to-tablet-portrait-and-below {
169
- @include respond-to(tablet-portrait-and-below) {
170
- @include is-responding;
171
- }
172
- }
173
-
174
- .respond-to-tablet-landscape-and-below {
175
- @include respond-to(tablet-landscape-and-below) {
176
- @include is-responding;
177
- }
178
- }
179
-
180
- .respond-to-desktop-and-below {
181
- @include respond-to(desktop-and-below) {
182
- @include is-responding;
57
+ // List of classes (which are the same as the breakpoints)
58
+ $classes: mobile, mobile-portrait, mobile-landscape, tablet, tablet-portrait, tablet-landscape, desktop;
59
+ $extends: -only, -and-up, -and-below;
60
+
61
+ @each $class in $classes {
62
+ @each $extend in $extends {
63
+ .respond-to-#{$class + $extend} {
64
+ @include respond-to(#{$class + $extend} ) {
65
+ @include is-responding;
66
+ }
67
+ }
183
68
  }
184
69
  }
185
70
  }
metadata CHANGED
@@ -1,13 +1,13 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: responder
3
3
  version: !ruby/object:Gem::Version
4
- hash: 27
4
+ hash: 25
5
5
  prerelease:
6
6
  segments:
7
7
  - 0
8
8
  - 0
9
- - 2
10
- version: 0.0.2
9
+ - 3
10
+ version: 0.0.3
11
11
  platform: ruby
12
12
  authors:
13
13
  - Daniel Guillan
@@ -15,7 +15,7 @@ autorequire:
15
15
  bindir: bin
16
16
  cert_chain: []
17
17
 
18
- date: 2012-10-16 00:00:00 Z
18
+ date: 2012-10-22 00:00:00 Z
19
19
  dependencies:
20
20
  - !ruby/object:Gem::Dependency
21
21
  name: sass