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 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 work in all modern browsers with pure CSS. Additional support
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,5 +1,5 @@
1
1
  module Responsive
2
2
  module Sass
3
- VERSION = "0.0.1"
3
+ VERSION = "0.0.2"
4
4
  end
5
5
  end
@@ -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: 29
4
+ hash: 27
5
5
  prerelease:
6
6
  segments:
7
7
  - 0
8
8
  - 0
9
- - 1
10
- version: 0.0.1
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-27 00:00:00 Z
18
+ date: 2011-08-29 00:00:00 Z
19
19
  dependencies:
20
20
  - !ruby/object:Gem::Dependency
21
21
  type: :development