responder 0.0.2 → 0.0.3

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 (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