responsive-sass 0.0.1 → 0.0.2
Sign up to get free protection for your applications and to get access to all the features.
- data/README.mkdn +8 -3
- data/lib/responsive-sass/version.rb +1 -1
- data/stylesheets/_responsive-sass.scss +21 -15
- metadata +4 -4
data/README.mkdn
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
Responsive Sass - Compass plugin
|
2
2
|
====================
|
3
3
|
|
4
|
-
Responsive Sass mixins currently supports background image resizing, killing mobile zoom and
|
4
|
+
Responsive Sass mixins currently supports background image resizing, killing mobile zoom and works in all modern desktop/mobile browsers. Additional support
|
5
5
|
for Internet Explorer and older browsers is made possible with a small amount
|
6
6
|
of JavaScript using [Respond](http://github.com/scottjehl/Respond).
|
7
7
|
|
@@ -28,11 +28,13 @@ Or create a new project:
|
|
28
28
|
Mixins:
|
29
29
|
======
|
30
30
|
|
31
|
-
Note: Setting your elements height is not required.
|
31
|
+
Note: Setting your elements height or background is not required.
|
32
|
+
|
33
|
+
- Your can set your background by passing your image url to the background variable. Example: @include high-res(960px, 400px, "/images/high-res.png");
|
32
34
|
|
33
35
|
* min-width-960
|
34
36
|
|
35
|
-
@include min-width-960($width, $height);
|
37
|
+
@include min-width-960($width, $height, );
|
36
38
|
|
37
39
|
* tablet-portrait
|
38
40
|
|
@@ -58,6 +60,9 @@ Note: Setting your elements height is not required.
|
|
58
60
|
|
59
61
|
@include kill-mobile-zoom;
|
60
62
|
|
63
|
+
* kill-tap-highlight
|
64
|
+
@include kill-tap-highlight;
|
65
|
+
|
61
66
|
License:
|
62
67
|
=======
|
63
68
|
Copyright (c) 2011 Nick Treadway
|
@@ -1,50 +1,52 @@
|
|
1
|
-
@mixin reponsive-core($width, $height: auto) {
|
2
|
-
width: $width;
|
1
|
+
@mixin reponsive-core($width, $height: auto, $background: false) {
|
3
2
|
height: $height;
|
3
|
+
width: $width;
|
4
4
|
-webkit-background-size: $width auto;
|
5
5
|
-moz-background-size: $width auto;
|
6
6
|
background-size: $width auto !important;
|
7
|
-
|
7
|
+
@if $background {
|
8
|
+
background-image: url($background) !important;
|
9
|
+
}
|
8
10
|
|
9
11
|
}
|
10
12
|
|
11
|
-
@mixin min-width-960($width, $height){
|
13
|
+
@mixin min-width-960($width, $height: auto, $background: false){
|
12
14
|
@media only screen and (min-width: 960px) {
|
13
|
-
@include reponsive-core($width, $height);
|
15
|
+
@include reponsive-core($width, $height, $background);
|
14
16
|
}
|
15
17
|
}
|
16
18
|
|
17
|
-
@mixin tablet-portrait($width, $height) {
|
19
|
+
@mixin tablet-portrait($width, $height: auto, $background: false) {
|
18
20
|
@media only screen and (min-width: 768px) and (max-width: 959px) {
|
19
|
-
@include reponsive-core($width, $height);
|
21
|
+
@include reponsive-core($width, $height, $background);
|
20
22
|
}
|
21
23
|
}
|
22
24
|
|
23
|
-
@mixin tablet-landscape($width, $height){
|
25
|
+
@mixin tablet-landscape($width, $height: auto, $background: false){
|
24
26
|
@media only screen and (min-width: 1024px) {
|
25
|
-
@include reponsive-core($width, $height);
|
27
|
+
@include reponsive-core($width, $height, $background);
|
26
28
|
}
|
27
29
|
}
|
28
30
|
|
29
|
-
@mixin mobile-landscape($width, $height) {
|
31
|
+
@mixin mobile-landscape($width, $height: auto, $background: false) {
|
30
32
|
@media only screen and (min-width: 480px) {
|
31
|
-
@include reponsive-core($width, $height);
|
33
|
+
@include reponsive-core($width, $height, $background);
|
32
34
|
}
|
33
35
|
}
|
34
36
|
|
35
|
-
@mixin mobile-portrait($width, $height) {
|
37
|
+
@mixin mobile-portrait($width, $height: auto, $background: false) {
|
36
38
|
@media only screen and (max-width: 479px) {
|
37
|
-
@include reponsive-core($width, $height);
|
39
|
+
@include reponsive-core($width, $height, $background);
|
38
40
|
}
|
39
41
|
}
|
40
42
|
|
41
|
-
@mixin high-res($width, $height){
|
43
|
+
@mixin high-res($width, $height: auto, $background: false){
|
42
44
|
/* iPhone 4 and other high pixel ratio devices ----------- */
|
43
45
|
@media
|
44
46
|
only screen and (-webkit-min-device-pixel-ratio: 2),
|
45
47
|
only screen and (-o-min-device-pixel-ratio: 3/2),
|
46
48
|
only screen and (min-device-pixel-ratio: 2) {
|
47
|
-
@include reponsive-core($width, $height);
|
49
|
+
@include reponsive-core($width, $height, $background);
|
48
50
|
}
|
49
51
|
}
|
50
52
|
|
@@ -52,3 +54,7 @@
|
|
52
54
|
-webkit-text-size-adjust: 100%;
|
53
55
|
-ms-text-size-adjust: none;
|
54
56
|
}
|
57
|
+
|
58
|
+
@mixin kill-tap-highlight {
|
59
|
+
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
60
|
+
}
|
metadata
CHANGED
@@ -1,13 +1,13 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: responsive-sass
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
hash:
|
4
|
+
hash: 27
|
5
5
|
prerelease:
|
6
6
|
segments:
|
7
7
|
- 0
|
8
8
|
- 0
|
9
|
-
-
|
10
|
-
version: 0.0.
|
9
|
+
- 2
|
10
|
+
version: 0.0.2
|
11
11
|
platform: ruby
|
12
12
|
authors:
|
13
13
|
- Nick Treadway
|
@@ -15,7 +15,7 @@ autorequire:
|
|
15
15
|
bindir: bin
|
16
16
|
cert_chain: []
|
17
17
|
|
18
|
-
date: 2011-08-
|
18
|
+
date: 2011-08-29 00:00:00 Z
|
19
19
|
dependencies:
|
20
20
|
- !ruby/object:Gem::Dependency
|
21
21
|
type: :development
|