sass-mediaqueries-rails 1.2.3.1 → 1.3
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +6 -14
- data/README.md +232 -11
- data/app/assets/stylesheets/_media-queries.scss +100 -112
- data/lib/sass-mediaqueries-rails/version.rb +1 -1
- metadata +7 -7
checksums.yaml
CHANGED
|
@@ -1,15 +1,7 @@
|
|
|
1
1
|
---
|
|
2
|
-
|
|
3
|
-
metadata.gz:
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
metadata.gz: !binary |-
|
|
9
|
-
NDFhMzdjOWUwMDU3Y2UyYWFmZjgxZGIxZjA4ZGIxNTUwOWVkMDNlMzExODI2
|
|
10
|
-
Mjk1NDZmMjM5NzY4MjI4NDdhYTYxNzE0N2YxNTE3MWJlN2ZiNGIwOTQyODM0
|
|
11
|
-
NzVkNWEzNDVlNGZkMzU1MTViMjY0MTEzZTQ0ODQ2YTU3YzIzZWM=
|
|
12
|
-
data.tar.gz: !binary |-
|
|
13
|
-
NDg4MmQ3ZDg3ZjNmYmFlZGUyZDUwYzI1NmI3MzRhMDZlZmU5YTFlMjI2Mjk1
|
|
14
|
-
ZmU4MGRiYzliZTAwZDhkZTM0ZjYzOTZlYzYwNTRhNDE3OGY1ZjMyMmI5NGQ4
|
|
15
|
-
NDc1ZWUwNDkxMDRjNGY1OWQyNzM3OTI5ODNmNjQyMTllZDhlMzY=
|
|
2
|
+
SHA1:
|
|
3
|
+
metadata.gz: e4b06c951e5fc3aef3f72b51107af5dc9d911593
|
|
4
|
+
data.tar.gz: 04e3b2865f13b782ea4d13e0c4bf6f4fde259cab
|
|
5
|
+
SHA512:
|
|
6
|
+
metadata.gz: aa6147d5e43b1b17a58378285fb704f4e2af58a61801de9ba9120f839cea1bca7b176c6f2b7fc56bca1ed01621a1c528833f919bc70328dfe74bd34abc833463
|
|
7
|
+
data.tar.gz: f60171cf363baa09ae0eee10632e1f4ce30b8b7630a795d838461900158c500005ffd3a332be8289e377777e34c966d3d67ba95bc0a724678f64fbc952afa02b
|
data/README.md
CHANGED
|
@@ -1,8 +1,24 @@
|
|
|
1
|
-
|
|
1
|
+
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
---
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
The `sass-mediaqueries-rails` gem integrates mixins with the Rails asset pipeline.
|
|
6
|
+
|
|
7
|
+
If you don't want to use is as a gem, you can use single `scss` file: <http://github.com/paranoida/sass-mediaqueries/>
|
|
8
|
+
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
### View it online: <http://paranoida.github.com/sass-mediaqueries>
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
Do you like Responsive Web Design? Everyone does!
|
|
15
|
+
Here you can find a collection of useful **media queries mixins** (including iOS devices like iPhones and iPads) for **Sass 3.2.0+**.
|
|
16
|
+
|
|
17
|
+
### Who did it?
|
|
18
|
+
|
|
19
|
+
Just me - [Rafal Bromirski](http://paranoida.com) - if you want you can follow me on [twitter](https://twitter.com/paranoida) or check my works on [dribbble](http://dribbble.com/paranoida).
|
|
20
|
+
|
|
21
|
+
## How to install
|
|
6
22
|
|
|
7
23
|
Add this line to your application's Gemfile:
|
|
8
24
|
|
|
@@ -16,14 +32,219 @@ Or install it yourself as:
|
|
|
16
32
|
|
|
17
33
|
$ gem install sass-mediaqueries-rails
|
|
18
34
|
|
|
19
|
-
|
|
35
|
+
Inside your sass/scss file (ie. `application.scss`) add:
|
|
36
|
+
|
|
37
|
+
```
|
|
38
|
+
@import "media-queries";
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
##What you can find inside?
|
|
43
|
+
|
|
44
|
+
```
|
|
45
|
+
Requirements:
|
|
46
|
+
Sass 3.2.0+
|
|
47
|
+
|
|
48
|
+
Version:
|
|
49
|
+
1.2.3 // developed on 10/03/2013
|
|
50
|
+
|
|
51
|
+
Mixins:
|
|
52
|
+
@ min-screen(width) // shortcut for @media screen and (min-width ...)
|
|
53
|
+
@ max-screen(width) // shortcut for @media screen and (max-width ...)
|
|
54
|
+
@ screen(min-width, max-width) // shortcut for @media screen and (min-width ...) and (max-width ...)
|
|
55
|
+
---
|
|
56
|
+
@ min-screen-height(height) // shortcut for @media screen and (min-height ...)
|
|
57
|
+
@ max-screen-height(height) // shortcut for @media screen and (max-height ...)
|
|
58
|
+
@ screen-height(min-height, max-height) // shortcut for @media screen and (min-height ...) and (max-height ...)
|
|
59
|
+
---
|
|
60
|
+
@ iphone3 // only iPhone (2, 3G, 3GS) landscape & portrait
|
|
61
|
+
@ iphone3-landscape // only iPhone (2, 3G, 3GS) only landscape
|
|
62
|
+
@ iphone3-portrait // only iPhone (2, 3G, 3GS) only portrait
|
|
63
|
+
---
|
|
64
|
+
@ iphone4 // only iPhone (4, 4S) landscape & portrait
|
|
65
|
+
@ iphone4-landscape // only iPhone (4, 4S) only landscape
|
|
66
|
+
@ iphone4-portrait // only iPhone (4, 4S) only portrait
|
|
67
|
+
---
|
|
68
|
+
@ iphone5 // only iPhone (5) landscape & portrait
|
|
69
|
+
@ iphone5-landscape // only iPhone (5) only landscape
|
|
70
|
+
@ iphone5-portrait // only iPhone (5) only portrait
|
|
71
|
+
---
|
|
72
|
+
@ ipad // all iPads (1, 2, 3, 4, Mini) landscape & portrait
|
|
73
|
+
@ ipad-landscape // all iPads (1, 2, 3, 4, Mini) only landscape
|
|
74
|
+
@ ipad-portrait // all iPads (1, 2, 3, 4, Mini) only portrait
|
|
75
|
+
---
|
|
76
|
+
@ ipad-retina // only iPad (3, 4) landscape & portrait
|
|
77
|
+
@ ipad-retina-landscape // only iPad (3, 4) only landscape
|
|
78
|
+
@ ipad-retina-portrait // only iPad (3, 4) only portrait
|
|
79
|
+
---
|
|
80
|
+
@ hdpi(ratio) // devices with hidpi displays (default ratio: 1.3)
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
##How does it work?
|
|
84
|
+
|
|
85
|
+
**Important**: Whenever you use screen mixins (min-screen, max-screen, screen, etc) you must use units!
|
|
86
|
+
|
|
87
|
+
## Example 1
|
|
88
|
+
### min-screen(min-width) - [demo](http://paranoida.github.com/sass-mediaqueries/demo)
|
|
89
|
+
It's a shortcut for **@media screen and (min-width ... ) { ... }**. Works great with [mobile first](http://www.lukew.com/ff/entry.asp?933) philosophy
|
|
90
|
+
|
|
91
|
+
```
|
|
92
|
+
@include min-screen(320px) { ... }
|
|
93
|
+
@include min-screen(480px) { ... }
|
|
94
|
+
@include min-screen(768px) { ... }
|
|
95
|
+
@include min-screen(1024px) { ... }
|
|
96
|
+
```
|
|
97
|
+
It will be compiled to:
|
|
98
|
+
|
|
99
|
+
```
|
|
100
|
+
@media screen and ( min-width: 320px) )
|
|
101
|
+
{
|
|
102
|
+
...
|
|
103
|
+
}
|
|
104
|
+
@media screen and ( min-width: 480px )
|
|
105
|
+
{
|
|
106
|
+
...
|
|
107
|
+
}
|
|
108
|
+
@media screen and ( min-width: 768px )
|
|
109
|
+
{
|
|
110
|
+
...
|
|
111
|
+
}
|
|
112
|
+
@media screen and ( min-width: 1024px )
|
|
113
|
+
{
|
|
114
|
+
...
|
|
115
|
+
}
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
## Example 2
|
|
119
|
+
### max-screen(max-width) - [demo](http://paranoida.github.com/sass-mediaqueries/demo)
|
|
120
|
+
|
|
121
|
+
It's a shortcut for **@media screen and (max-width ... ) { ... }**.
|
|
122
|
+
|
|
123
|
+
**How to use it properly?** You should start from the widest screen resolution and proceed to the narrowest one (styles are inherited from previous conditions).
|
|
124
|
+
|
|
125
|
+
```
|
|
126
|
+
@include max-screen(1024px) { ... }
|
|
127
|
+
@include max-screen(768px) { ... }
|
|
128
|
+
@include max-screen(640px) { ... }
|
|
129
|
+
```
|
|
130
|
+
It will be compiled to:
|
|
131
|
+
|
|
132
|
+
```
|
|
133
|
+
@media screen and ( max-width: 1024px )
|
|
134
|
+
{
|
|
135
|
+
...
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
@media screen and ( max-width: 768px )
|
|
139
|
+
{
|
|
140
|
+
...
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
@media screen and ( max-width: 640px )
|
|
144
|
+
{
|
|
145
|
+
...
|
|
146
|
+
}
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
## Example 3
|
|
150
|
+
### screen(min-width, max-width) - [demo](http://paranoida.github.com/sass-mediaqueries/demo)
|
|
151
|
+
|
|
152
|
+
You can add style rules for ranges. It could be really helpful if you want to target **group of devices** or just **one** with particular screen resolution.
|
|
153
|
+
|
|
154
|
+
```
|
|
155
|
+
@include screen(768px, 1280px) { ... }
|
|
156
|
+
@include screen(320px, 640px) { ... }
|
|
157
|
+
```
|
|
158
|
+
It will be compiled to:
|
|
159
|
+
|
|
160
|
+
```
|
|
161
|
+
@media screen and ( min-width: 768px ) and ( max-width: 1280px )
|
|
162
|
+
{
|
|
163
|
+
...
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
@media screen and ( min-width: 320px ) and ( max-width: 640px )
|
|
167
|
+
{
|
|
168
|
+
...
|
|
169
|
+
}
|
|
170
|
+
```
|
|
171
|
+
|
|
172
|
+
## Example 4
|
|
173
|
+
### iOS devices - [demo](http://paranoida.github.com/sass-mediaqueries/demo)
|
|
174
|
+
|
|
175
|
+
You can easily manage styles for particular iOS devices:
|
|
176
|
+
|
|
177
|
+
```
|
|
178
|
+
@include ipad { ... } // all iPads
|
|
179
|
+
@include ipad-retina { ... } // only iPad with retina
|
|
180
|
+
|
|
181
|
+
@include iphone5 { ... } // only iPhone 5
|
|
182
|
+
@include iphone4 { ... } // only iPhone 4/4S
|
|
183
|
+
@include iphone3 { ... } // only iPhone 2/3G/3GS
|
|
184
|
+
```
|
|
185
|
+
|
|
186
|
+
## Example 5
|
|
187
|
+
### device orientation - landscape and portrait - [demo](http://paranoida.github.com/sass-mediaqueries/demo)
|
|
188
|
+
|
|
189
|
+
Want to add extra stuff only in landscape / portrait mode? Piece of cake:
|
|
190
|
+
|
|
191
|
+
```
|
|
192
|
+
@include ipad-retina { ... } // common part only for iPad (3, 4) - landscape & portrait
|
|
193
|
+
@include ipad-retina-landscape { ... }
|
|
194
|
+
@include ipad-retina-portrait { ... }
|
|
195
|
+
|
|
196
|
+
@include iphone5 { ... } // common part only for iPhone 5 - landscape & portrait
|
|
197
|
+
@include iphone5-landscape { ... }
|
|
198
|
+
@include iphone5-portrait { ... }
|
|
199
|
+
|
|
200
|
+
@include iphone4 { ... } // common part only for iPhone 4/4S - landscape & portrait
|
|
201
|
+
@include iphone4-landscape { ... }
|
|
202
|
+
@include iphone4-portrait { ... }
|
|
203
|
+
```
|
|
204
|
+
|
|
205
|
+
another one:
|
|
206
|
+
|
|
207
|
+
```
|
|
208
|
+
@include ipad-landscape { ... } // all iPads - landscape
|
|
209
|
+
@include ipad-retina-landscape { ... } // only iPad (3, 4) - landscape
|
|
210
|
+
|
|
211
|
+
@include iphone3-landscape { ... } // only iPhone 2/3G/3GS - landscape
|
|
212
|
+
@include iphone4-landscape { ... } // only iPhone 4/4S - landscape
|
|
213
|
+
@include iphone5-landscape { ... } // only iPhone 5 - landscape
|
|
214
|
+
```
|
|
215
|
+
|
|
216
|
+
## Example 6
|
|
217
|
+
### hdpi(ratio) - [demo](http://paranoida.github.com/sass-mediaqueries/demo)
|
|
218
|
+
|
|
219
|
+
```
|
|
220
|
+
.example
|
|
221
|
+
{
|
|
222
|
+
...
|
|
223
|
+
|
|
224
|
+
@include hdpi { ... } // only devices with hidpi displays (including retina)
|
|
225
|
+
}
|
|
226
|
+
```
|
|
227
|
+
|
|
228
|
+
or to narrow down:
|
|
229
|
+
|
|
230
|
+
|
|
231
|
+
```
|
|
232
|
+
.example
|
|
233
|
+
{
|
|
234
|
+
...
|
|
235
|
+
|
|
236
|
+
@include hdpi(2) { ... } // only devices with retina
|
|
237
|
+
}
|
|
238
|
+
```
|
|
239
|
+
---
|
|
240
|
+
### License:
|
|
241
|
+
|
|
242
|
+
The MIT license
|
|
243
|
+
|
|
244
|
+
Copyright © 2013 [Rafal Bromirski](http://paranoida.com)
|
|
20
245
|
|
|
21
|
-
|
|
246
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
|
22
247
|
|
|
23
|
-
|
|
248
|
+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
24
249
|
|
|
25
|
-
|
|
26
|
-
2. Create your feature branch (`git checkout -b my-new-feature`)
|
|
27
|
-
3. Commit your changes (`git commit -am 'Add some feature'`)
|
|
28
|
-
4. Push to the branch (`git push origin my-new-feature`)
|
|
29
|
-
5. Create new Pull Request
|
|
250
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
// Sass 3.2.0+
|
|
14
14
|
//
|
|
15
15
|
// Version:
|
|
16
|
-
// 1.
|
|
16
|
+
// 1.3 // developed on 14/11/2013
|
|
17
17
|
//
|
|
18
18
|
// Mixins:
|
|
19
19
|
// @ min-screen(width) // shortcut for @media screen and (min-width ...)
|
|
@@ -25,24 +25,24 @@
|
|
|
25
25
|
// @ screen-height(min-height, max-height) // shortcut for @media screen and (min-height ...) and (max-height ...)
|
|
26
26
|
// ---
|
|
27
27
|
// @ iphone3 // only iPhone (2, 3G, 3GS) landscape & portrait
|
|
28
|
-
// @ iphone3
|
|
29
|
-
// @ iphone3
|
|
28
|
+
// @ iphone3(landscape) // only iPhone (2, 3G, 3GS) only landscape
|
|
29
|
+
// @ iphone3(portrait) // only iPhone (2, 3G, 3GS) only portrait
|
|
30
30
|
// ---
|
|
31
31
|
// @ iphone4 // only iPhone (4, 4S) landscape & portrait
|
|
32
|
-
// @ iphone4
|
|
33
|
-
// @ iphone4
|
|
32
|
+
// @ iphone4(landscape) // only iPhone (4, 4S) only landscape
|
|
33
|
+
// @ iphone4(portrait) // only iPhone (4, 4S) only portrait
|
|
34
34
|
// ---
|
|
35
35
|
// @ iphone5 // only iPhone (5) landscape & portrait
|
|
36
|
-
// @ iphone5
|
|
37
|
-
// @ iphone5
|
|
36
|
+
// @ iphone5(landscape) // only iPhone (5) only landscape
|
|
37
|
+
// @ iphone5(portrait) // only iPhone (5) only portrait
|
|
38
38
|
// ---
|
|
39
39
|
// @ ipad // all iPads (1, 2, 3, 4, Mini) landscape & portrait
|
|
40
|
-
// @ ipad
|
|
41
|
-
// @ ipad
|
|
40
|
+
// @ ipad(landscape) // all iPads (1, 2, 3, 4, Mini) only landscape
|
|
41
|
+
// @ ipad(portrait) // all iPads (1, 2, 3, 4, Mini) only portrait
|
|
42
42
|
// ---
|
|
43
43
|
// @ ipad-retina // only iPad (3, 4) landscape & portrait
|
|
44
|
-
// @ ipad-retina
|
|
45
|
-
// @ ipad-retina
|
|
44
|
+
// @ ipad-retina(landscape) // only iPad (3, 4) only landscape
|
|
45
|
+
// @ ipad-retina(portrait) // only iPad (3, 4) only portrait
|
|
46
46
|
// ---
|
|
47
47
|
// @ hdpi(ratio) // devices with hidpi displays (default ratio: 1.3)
|
|
48
48
|
//
|
|
@@ -52,9 +52,9 @@
|
|
|
52
52
|
// --- screen ----------------------------------------------------------------------------------------------------------
|
|
53
53
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
54
54
|
|
|
55
|
-
@mixin screen($
|
|
55
|
+
@mixin screen($resMin, $resMax)
|
|
56
56
|
{
|
|
57
|
-
@media screen and (
|
|
57
|
+
@media screen and (min-width: $resMin) and (max-width: $resMax)
|
|
58
58
|
{
|
|
59
59
|
@content;
|
|
60
60
|
}
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
|
|
63
63
|
@mixin max-screen($res)
|
|
64
64
|
{
|
|
65
|
-
@media screen and (
|
|
65
|
+
@media screen and (max-width: $res)
|
|
66
66
|
{
|
|
67
67
|
@content;
|
|
68
68
|
}
|
|
@@ -70,15 +70,15 @@
|
|
|
70
70
|
|
|
71
71
|
@mixin min-screen($res)
|
|
72
72
|
{
|
|
73
|
-
@media screen and (
|
|
73
|
+
@media screen and (min-width: $res)
|
|
74
74
|
{
|
|
75
75
|
@content;
|
|
76
76
|
}
|
|
77
77
|
}
|
|
78
78
|
|
|
79
|
-
@mixin screen-height($
|
|
79
|
+
@mixin screen-height($resMin, $resMax)
|
|
80
80
|
{
|
|
81
|
-
@media screen and (
|
|
81
|
+
@media screen and (min-height: $resMin) and (max-height: $resMax)
|
|
82
82
|
{
|
|
83
83
|
@content;
|
|
84
84
|
}
|
|
@@ -86,7 +86,7 @@
|
|
|
86
86
|
|
|
87
87
|
@mixin max-screen-height($res)
|
|
88
88
|
{
|
|
89
|
-
@media screen and (
|
|
89
|
+
@media screen and (max-height: $res)
|
|
90
90
|
{
|
|
91
91
|
@content;
|
|
92
92
|
}
|
|
@@ -94,7 +94,7 @@
|
|
|
94
94
|
|
|
95
95
|
@mixin min-screen-height($res)
|
|
96
96
|
{
|
|
97
|
-
@media screen and (
|
|
97
|
+
@media screen and (min-height: $res)
|
|
98
98
|
{
|
|
99
99
|
@content;
|
|
100
100
|
}
|
|
@@ -123,30 +123,27 @@
|
|
|
123
123
|
// --- iphone ----------------------------------------------------------------------------------------------------------
|
|
124
124
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
125
125
|
|
|
126
|
-
@mixin iphone3
|
|
126
|
+
@mixin iphone3($orientation: all)
|
|
127
127
|
{
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
@content;
|
|
132
|
-
}
|
|
133
|
-
}
|
|
128
|
+
$deviceMinWidth: 320px;
|
|
129
|
+
$deviceMaxWidth: 480px;
|
|
130
|
+
$devicePixelRatio: 1;
|
|
134
131
|
|
|
135
|
-
@
|
|
136
|
-
{
|
|
137
|
-
@media only screen and (min-device-width: 320px) and (max-device-width: 480px)
|
|
138
|
-
and (-webkit-device-pixel-ratio: 1) and (orientation:portrait)
|
|
132
|
+
@if $orientation == all
|
|
139
133
|
{
|
|
140
|
-
@
|
|
134
|
+
@media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth)
|
|
135
|
+
and (-webkit-device-pixel-ratio: $devicePixelRatio)
|
|
136
|
+
{
|
|
137
|
+
@content;
|
|
138
|
+
}
|
|
141
139
|
}
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
@mixin iphone3-landscape
|
|
145
|
-
{
|
|
146
|
-
@media only screen and (min-device-width: 320px) and (max-device-width: 480px)
|
|
147
|
-
and (-webkit-device-pixel-ratio: 1) and (orientation:landscape)
|
|
140
|
+
@else
|
|
148
141
|
{
|
|
149
|
-
@
|
|
142
|
+
@media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth)
|
|
143
|
+
and (-webkit-device-pixel-ratio: $devicePixelRatio) and (orientation:#{$orientation})
|
|
144
|
+
{
|
|
145
|
+
@content;
|
|
146
|
+
}
|
|
150
147
|
}
|
|
151
148
|
}
|
|
152
149
|
|
|
@@ -154,30 +151,28 @@
|
|
|
154
151
|
// --- iphone-retina ---------------------------------------------------------------------------------------------------
|
|
155
152
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
156
153
|
|
|
157
|
-
@mixin iphone4
|
|
154
|
+
@mixin iphone4($orientation: all)
|
|
158
155
|
{
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
}
|
|
164
|
-
}
|
|
156
|
+
$deviceMinWidth: 320px;
|
|
157
|
+
$deviceMaxWidth: 480px;
|
|
158
|
+
$devicePixelRatio: 2;
|
|
159
|
+
$deviceAspectRatio: '2/3';
|
|
165
160
|
|
|
166
|
-
@
|
|
167
|
-
{
|
|
168
|
-
@media only screen and (min-device-width: 320px) and (max-device-width: 480px)
|
|
169
|
-
and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2/3) and (orientation:portrait)
|
|
161
|
+
@if $orientation == all
|
|
170
162
|
{
|
|
171
|
-
@
|
|
163
|
+
@media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth)
|
|
164
|
+
and (-webkit-device-pixel-ratio: $devicePixelRatio) and (device-aspect-ratio: $deviceAspectRatio)
|
|
165
|
+
{
|
|
166
|
+
@content;
|
|
167
|
+
}
|
|
172
168
|
}
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
@mixin iphone4-landscape
|
|
176
|
-
{
|
|
177
|
-
@media only screen and (min-device-width: 320px) and (max-device-width: 480px)
|
|
178
|
-
and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2/3) and (orientation:landscape)
|
|
169
|
+
@else
|
|
179
170
|
{
|
|
180
|
-
@
|
|
171
|
+
@media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth)
|
|
172
|
+
and (-webkit-device-pixel-ratio: $devicePixelRatio) and (device-aspect-ratio: 2/3) and (orientation:#{$orientation})
|
|
173
|
+
{
|
|
174
|
+
@content;
|
|
175
|
+
}
|
|
181
176
|
}
|
|
182
177
|
}
|
|
183
178
|
|
|
@@ -185,31 +180,28 @@
|
|
|
185
180
|
// --- iphone-5 --------------------------------------------------------------------------------------------------------
|
|
186
181
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
187
182
|
|
|
188
|
-
@mixin iphone5
|
|
189
|
-
{
|
|
190
|
-
@media only screen and (min-device-width: 320px) and (max-device-width: 568px)
|
|
191
|
-
and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71)
|
|
192
|
-
{
|
|
193
|
-
@content;
|
|
194
|
-
}
|
|
195
|
-
}
|
|
196
|
-
|
|
197
|
-
@mixin iphone5-portrait
|
|
183
|
+
@mixin iphone5($orientation: all)
|
|
198
184
|
{
|
|
199
|
-
|
|
200
|
-
|
|
185
|
+
$deviceMinWidth: 320px;
|
|
186
|
+
$deviceMaxWidth: 568px;
|
|
187
|
+
$devicePixelRatio: 2;
|
|
188
|
+
$deviceAspectRatio: '40/71';
|
|
201
189
|
|
|
190
|
+
@if $orientation == all
|
|
202
191
|
{
|
|
203
|
-
@
|
|
192
|
+
@media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth)
|
|
193
|
+
and (-webkit-device-pixel-ratio: $devicePixelRatio) and (device-aspect-ratio: $deviceAspectRatio)
|
|
194
|
+
{
|
|
195
|
+
@content;
|
|
196
|
+
}
|
|
204
197
|
}
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
@mixin iphone5-landscape
|
|
208
|
-
{
|
|
209
|
-
@media only screen and (min-device-width: 320px) and (max-device-width: 568px)
|
|
210
|
-
and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71) and (orientation:landscape)
|
|
198
|
+
@else
|
|
211
199
|
{
|
|
212
|
-
@
|
|
200
|
+
@media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth)
|
|
201
|
+
and (-webkit-device-pixel-ratio: $devicePixelRatio) and (device-aspect-ratio: $deviceAspectRatio) and (orientation:#{$orientation})
|
|
202
|
+
{
|
|
203
|
+
@content;
|
|
204
|
+
}
|
|
213
205
|
}
|
|
214
206
|
}
|
|
215
207
|
|
|
@@ -217,27 +209,25 @@
|
|
|
217
209
|
// --- ipads (all) -----------------------------------------------------------------------------------------------------
|
|
218
210
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
219
211
|
|
|
220
|
-
@mixin ipad
|
|
212
|
+
@mixin ipad($orientation: all)
|
|
221
213
|
{
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
@content;
|
|
225
|
-
}
|
|
226
|
-
}
|
|
214
|
+
$deviceMinWidth: 768px;
|
|
215
|
+
$deviceMaxWidth: 1024px;
|
|
227
216
|
|
|
228
|
-
@
|
|
229
|
-
{
|
|
230
|
-
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait)
|
|
217
|
+
@if $orientation == all
|
|
231
218
|
{
|
|
232
|
-
@
|
|
219
|
+
@media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth)
|
|
220
|
+
{
|
|
221
|
+
@content;
|
|
222
|
+
}
|
|
233
223
|
}
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
@mixin ipad-landscape
|
|
237
|
-
{
|
|
238
|
-
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape)
|
|
224
|
+
@else
|
|
239
225
|
{
|
|
240
|
-
@
|
|
226
|
+
@media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth)
|
|
227
|
+
and (orientation:#{$orientation})
|
|
228
|
+
{
|
|
229
|
+
@content;
|
|
230
|
+
}
|
|
241
231
|
}
|
|
242
232
|
}
|
|
243
233
|
|
|
@@ -245,29 +235,27 @@
|
|
|
245
235
|
// --- ipad-retina -----------------------------------------------------------------------------------------------------
|
|
246
236
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
247
237
|
|
|
248
|
-
@mixin ipad-retina
|
|
238
|
+
@mixin ipad-retina($orientation: all)
|
|
249
239
|
{
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
@content;
|
|
254
|
-
}
|
|
255
|
-
}
|
|
240
|
+
$deviceMinWidth: 768px;
|
|
241
|
+
$deviceMaxWidth: 1024px;
|
|
242
|
+
$devicePixelRatio: 2;
|
|
256
243
|
|
|
257
|
-
@
|
|
258
|
-
{
|
|
259
|
-
@media screen and (min-device-width: 768px) and (max-device-width: 1024px)
|
|
260
|
-
and (-webkit-device-pixel-ratio: 2) and (orientation:portrait)
|
|
244
|
+
@if $orientation == all
|
|
261
245
|
{
|
|
262
|
-
@
|
|
246
|
+
@media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth)
|
|
247
|
+
and (-webkit-device-pixel-ratio: $devicePixelRatio)
|
|
248
|
+
{
|
|
249
|
+
@content;
|
|
250
|
+
}
|
|
263
251
|
}
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
@mixin ipad-retina-landscape
|
|
267
|
-
{
|
|
268
|
-
@media screen and (min-device-width: 768px) and (max-device-width: 1024px)
|
|
269
|
-
and (-webkit-device-pixel-ratio: 2) and (orientation:landscape)
|
|
252
|
+
@else
|
|
270
253
|
{
|
|
271
|
-
@
|
|
254
|
+
@media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth)
|
|
255
|
+
and (-webkit-device-pixel-ratio: $devicePixelRatio) and (orientation:#{$orientation})
|
|
256
|
+
{
|
|
257
|
+
@content;
|
|
258
|
+
}
|
|
272
259
|
}
|
|
273
260
|
}
|
|
261
|
+
|
metadata
CHANGED
|
@@ -1,27 +1,27 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: sass-mediaqueries-rails
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 1.
|
|
4
|
+
version: '1.3'
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Rafal Bromirski
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2013-
|
|
11
|
+
date: 2013-11-24 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: sass
|
|
15
15
|
requirement: !ruby/object:Gem::Requirement
|
|
16
16
|
requirements:
|
|
17
|
-
- -
|
|
17
|
+
- - '>='
|
|
18
18
|
- !ruby/object:Gem::Version
|
|
19
19
|
version: 3.2.0
|
|
20
20
|
type: :runtime
|
|
21
21
|
prerelease: false
|
|
22
22
|
version_requirements: !ruby/object:Gem::Requirement
|
|
23
23
|
requirements:
|
|
24
|
-
- -
|
|
24
|
+
- - '>='
|
|
25
25
|
- !ruby/object:Gem::Version
|
|
26
26
|
version: 3.2.0
|
|
27
27
|
description: It is a collection of useful media queries mixins for Sass. Great extension
|
|
@@ -47,17 +47,17 @@ require_paths:
|
|
|
47
47
|
- lib
|
|
48
48
|
required_ruby_version: !ruby/object:Gem::Requirement
|
|
49
49
|
requirements:
|
|
50
|
-
- -
|
|
50
|
+
- - '>='
|
|
51
51
|
- !ruby/object:Gem::Version
|
|
52
52
|
version: '0'
|
|
53
53
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
|
54
54
|
requirements:
|
|
55
|
-
- -
|
|
55
|
+
- - '>='
|
|
56
56
|
- !ruby/object:Gem::Version
|
|
57
57
|
version: '0'
|
|
58
58
|
requirements: []
|
|
59
59
|
rubyforge_project:
|
|
60
|
-
rubygems_version: 2.0.
|
|
60
|
+
rubygems_version: 2.0.6
|
|
61
61
|
signing_key:
|
|
62
62
|
specification_version: 4
|
|
63
63
|
summary: It is a collection of useful media queries mixins for Sass. Great extension
|