responsive-sass 0.0.1 → 0.0.2
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.
- 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
|