breakpoint 1.3 → 2.0.0
Sign up to get free protection for your applications and to get access to all the features.
- data/README.markdown +3 -3
- data/lib/breakpoint.rb +2 -2
- data/stylesheets/_breakpoint.scss +75 -345
- data/stylesheets/breakpoint/_context.scss +87 -9
- data/stylesheets/breakpoint/_helpers.scss +90 -39
- data/stylesheets/breakpoint/_no-query.scss +15 -0
- data/stylesheets/breakpoint/_parsers.scss +104 -0
- data/stylesheets/breakpoint/_respond-to.scss +55 -0
- data/stylesheets/breakpoint/parsers/_double.scss +33 -0
- data/stylesheets/breakpoint/parsers/_query.scss +75 -0
- data/stylesheets/breakpoint/parsers/_resolution.scss +31 -0
- data/stylesheets/breakpoint/parsers/_single.scss +26 -0
- data/stylesheets/breakpoint/parsers/_triple.scss +36 -0
- data/stylesheets/breakpoint/parsers/double/_default-pair.scss +21 -0
- data/stylesheets/breakpoint/parsers/double/_default.scss +22 -0
- data/stylesheets/breakpoint/parsers/double/_double-string.scss +19 -0
- data/stylesheets/breakpoint/parsers/resolution/_resolution.scss +60 -0
- data/stylesheets/breakpoint/parsers/single/_default.scss +13 -0
- data/stylesheets/breakpoint/parsers/triple/_default.scss +18 -0
- metadata +21 -6
@@ -0,0 +1,33 @@
|
|
1
|
+
//////////////////////////////
|
2
|
+
// Import Pieces
|
3
|
+
//////////////////////////////
|
4
|
+
@import "double/default-pair";
|
5
|
+
@import "double/double-string";
|
6
|
+
@import "double/default";
|
7
|
+
|
8
|
+
@function breakpoint-parse-double($feature, $empty-media, $first) {
|
9
|
+
$parsed: '';
|
10
|
+
$leader: '';
|
11
|
+
// If we're forcing
|
12
|
+
@if not ($empty-media) or not ($first) {
|
13
|
+
$leader: 'and ';
|
14
|
+
}
|
15
|
+
|
16
|
+
$first: nth($feature, 1);
|
17
|
+
$second: nth($feature, 2);
|
18
|
+
|
19
|
+
// If we've got two numbers, we know we need to use the default pair because there are no media queries that has a media feature that is a number
|
20
|
+
@if type-of($first) == 'number' and type-of($second) == 'number' {
|
21
|
+
$parsed: breakpoint-parse-default-pair($first, $second);
|
22
|
+
}
|
23
|
+
// If they are both strings, we send it through the string parser
|
24
|
+
@else if type-of($first) == 'string' and type-of($second) == 'string' {
|
25
|
+
$parsed: breakpoint-parse-double-string($first, $second);
|
26
|
+
}
|
27
|
+
// If it's a string/number pair, we parse it as a normal double
|
28
|
+
@else {
|
29
|
+
$parsed: breakpoint-parse-double-default($first, $second);
|
30
|
+
}
|
31
|
+
|
32
|
+
@return $leader + $parsed;
|
33
|
+
}
|
@@ -0,0 +1,75 @@
|
|
1
|
+
@function breakpoint-parse-query($query) {
|
2
|
+
// Parse features out of an individual query
|
3
|
+
$feature-holder: ();
|
4
|
+
$query-holder: ();
|
5
|
+
$length: length($query);
|
6
|
+
|
7
|
+
@if $length == 2 {
|
8
|
+
// If we've got a string/number, number/string, check to see if it's a valid string/number pair or two singles
|
9
|
+
@if (type-of(nth($query, 1)) == 'string' and type-of(nth($query, 2)) == 'number') or (type-of(nth($query, 1)) == 'number' and type-of(nth($query, 2)) == 'string') {
|
10
|
+
|
11
|
+
$number: '';
|
12
|
+
$value: '';
|
13
|
+
|
14
|
+
@if type-of(nth($query, 1)) == 'string' {
|
15
|
+
$number: nth($query, 2);
|
16
|
+
$value: nth($query, 1);
|
17
|
+
}
|
18
|
+
@else {
|
19
|
+
$number: nth($query, 1);
|
20
|
+
$value: nth($query, 2);
|
21
|
+
}
|
22
|
+
|
23
|
+
// If the string value can be a single value, check to see if the number passed in is a valid input for said single value. Fortunately, all current single-value options only accept unitless numbers, so this check is easy.
|
24
|
+
@if breakpoint-single-string($value) {
|
25
|
+
@if unitless($number) {
|
26
|
+
$feature-holder: append($value, $number, space);
|
27
|
+
$query-holder: append($query-holder, $feature-holder, comma);
|
28
|
+
@return $query-holder;
|
29
|
+
}
|
30
|
+
}
|
31
|
+
// If the string is a media type, split the query
|
32
|
+
@if breakpoint-is-media($value) {
|
33
|
+
$query-holder: append($query-holder, nth($query, 1));
|
34
|
+
$query-holder: append($query-holder, nth($query, 2));
|
35
|
+
@return $query-holder;
|
36
|
+
}
|
37
|
+
// If it's not a single feature, we're just going to assume it's a proper string/value pair, and roll with it.
|
38
|
+
@else {
|
39
|
+
$feature-holder: append($value, $number, space);
|
40
|
+
$query-holder: append($query-holder, $feature-holder, comma);
|
41
|
+
@return $query-holder;
|
42
|
+
}
|
43
|
+
|
44
|
+
}
|
45
|
+
// If they're both numbers, we assume it's a double and roll with that
|
46
|
+
@else if (type-of(nth($query, 1)) == 'number' and type-of(nth($query, 2)) == 'number') {
|
47
|
+
$feature-holder: append(nth($query, 1), nth($query, 2), space);
|
48
|
+
$query-holder: append($query-holder, $feature-holder, comma);
|
49
|
+
@return $query-holder;
|
50
|
+
}
|
51
|
+
// If they're both strings and neither are singles, we roll with that.
|
52
|
+
@else if (type-of(nth($query, 1)) == 'string' and type-of(nth($query, 2)) == 'string') {
|
53
|
+
@if not breakpoint-single-string(nth($query, 1)) and not breakpoint-single-string(nth($query, 2)) {
|
54
|
+
$feature-holder: append(nth($query, 1), nth($query, 2), space);
|
55
|
+
$query-holder: append($query-holder, $feature-holder, comma);
|
56
|
+
@return $query-holder;
|
57
|
+
}
|
58
|
+
}
|
59
|
+
}
|
60
|
+
@else if $length == 3 {
|
61
|
+
// If we've got three items and none is a list, we check to see
|
62
|
+
@if type-of(nth($query, 1)) != 'list' and type-of(nth($query, 2)) != 'list' and type-of(nth($query, 3)) != 'list' {
|
63
|
+
// If none of the items are single string values and none of the values are media values, we're good.
|
64
|
+
@if (not breakpoint-single-string(nth($query, 1)) and not breakpoint-single-string(nth($query, 2)) and not breakpoint-single-string(nth($query, 3))) and ((not breakpoint-is-media(nth($query, 1)) and not breakpoint-is-media(nth($query, 2)) and not breakpoint-is-media(nth($query, 3)))) {
|
65
|
+
$feature-holder: append(nth($query, 1), nth($query, 2), space);
|
66
|
+
$feature-holder: append($feature-holder, nth($query, 3), space);
|
67
|
+
$query-holder: append($query-holder, $feature-holder, comma);
|
68
|
+
@return $query-holder;
|
69
|
+
}
|
70
|
+
}
|
71
|
+
}
|
72
|
+
|
73
|
+
// If it's a single item, or if it's not a special case double or tripple, we can simply return the query.
|
74
|
+
@return $query;
|
75
|
+
}
|
@@ -0,0 +1,31 @@
|
|
1
|
+
@import "resolution/resolution";
|
2
|
+
|
3
|
+
@function breakpoint-build-resolution($query-print, $query-resolution, $empty-media, $first) {
|
4
|
+
$leader: '';
|
5
|
+
// If we're forcing
|
6
|
+
@if not ($empty-media) or not ($first) {
|
7
|
+
$leader: 'and ';
|
8
|
+
}
|
9
|
+
|
10
|
+
@if $breakpoint-resolutions and $query-resolution {
|
11
|
+
$resolutions: breakpoint-make-resolutions($query-resolution);
|
12
|
+
$length: length($resolutions);
|
13
|
+
$query-holder: '';
|
14
|
+
|
15
|
+
@for $i from 1 through $length {
|
16
|
+
$query: '#{$query-print} #{$leader}#{nth($resolutions, $i)}';
|
17
|
+
@if $i == 1 {
|
18
|
+
$query-holder: $query;
|
19
|
+
}
|
20
|
+
@else {
|
21
|
+
$query-holder: '#{$query-holder}, #{$query}';
|
22
|
+
}
|
23
|
+
}
|
24
|
+
|
25
|
+
@return $query-holder;
|
26
|
+
}
|
27
|
+
@else {
|
28
|
+
// Return with attached resolution
|
29
|
+
@return $query-print;
|
30
|
+
}
|
31
|
+
}
|
@@ -0,0 +1,26 @@
|
|
1
|
+
//////////////////////////////
|
2
|
+
// Import Pieces
|
3
|
+
//////////////////////////////
|
4
|
+
@import "single/default";
|
5
|
+
|
6
|
+
@function breakpoint-parse-single($feature, $empty-media, $first) {
|
7
|
+
$parsed: '';
|
8
|
+
$leader: '';
|
9
|
+
// If we're forcing
|
10
|
+
@if not ($empty-media) or not ($first) {
|
11
|
+
$leader: 'and ';
|
12
|
+
}
|
13
|
+
|
14
|
+
// If it's a single feature that can stand alone, we let it
|
15
|
+
@if (breakpoint-single-string($feature)) {
|
16
|
+
$parsed: $feature;
|
17
|
+
// Set Context
|
18
|
+
$context-setter: private-breakpoint-set-context($feature, $feature);
|
19
|
+
}
|
20
|
+
// If it's not a stand alone feature, we pass it off to the default handler.
|
21
|
+
@else {
|
22
|
+
$parsed: breakpoint-parse-default($feature);
|
23
|
+
}
|
24
|
+
|
25
|
+
@return $leader + '(' + $parsed + ')';
|
26
|
+
}
|
@@ -0,0 +1,36 @@
|
|
1
|
+
//////////////////////////////
|
2
|
+
// Import Pieces
|
3
|
+
//////////////////////////////
|
4
|
+
@import "triple/default";
|
5
|
+
|
6
|
+
@function breakpoint-parse-triple($feature, $empty-media, $first) {
|
7
|
+
$parsed: '';
|
8
|
+
$leader: '';
|
9
|
+
|
10
|
+
// If we're forcing
|
11
|
+
@if not ($empty-media) or not ($first) {
|
12
|
+
$leader: 'and ';
|
13
|
+
}
|
14
|
+
|
15
|
+
// separate the string features from the value numbers
|
16
|
+
$string: null;
|
17
|
+
$numbers: null;
|
18
|
+
@each $val in $feature {
|
19
|
+
@if type-of($val) == string {
|
20
|
+
$string: $val;
|
21
|
+
}
|
22
|
+
@else {
|
23
|
+
@if type-of($numbers) == 'null' {
|
24
|
+
$numbers: $val;
|
25
|
+
}
|
26
|
+
@else {
|
27
|
+
$numbers: append($numbers, $val);
|
28
|
+
}
|
29
|
+
}
|
30
|
+
}
|
31
|
+
|
32
|
+
$parsed: breakpoint-parse-triple-default($string, nth($numbers, 1), nth($numbers, 2));
|
33
|
+
|
34
|
+
@return $leader + $parsed;
|
35
|
+
|
36
|
+
}
|
@@ -0,0 +1,21 @@
|
|
1
|
+
@function breakpoint-parse-default-pair($first, $second) {
|
2
|
+
$default: $breakpoint-default-pair;
|
3
|
+
$min: '';
|
4
|
+
$max: '';
|
5
|
+
|
6
|
+
// Sort into min and max
|
7
|
+
$min: min($first, $second);
|
8
|
+
$max: max($first, $second);
|
9
|
+
|
10
|
+
// Set Context
|
11
|
+
$context-setter: private-breakpoint-set-context(min-#{$default}, $min);
|
12
|
+
$context-setter: private-breakpoint-set-context(max-#{$default}, $max);
|
13
|
+
|
14
|
+
// Make them EMs if need be
|
15
|
+
@if ($breakpoint-to-ems == true) {
|
16
|
+
$min: breakpoint-to-base-em($min);
|
17
|
+
$max: breakpoint-to-base-em($max);
|
18
|
+
}
|
19
|
+
|
20
|
+
@return '(min-#{$default}: #{$min}) and (max-#{$default}: #{$max})';
|
21
|
+
}
|
@@ -0,0 +1,22 @@
|
|
1
|
+
@function breakpoint-parse-double-default($first, $second) {
|
2
|
+
$feature: '';
|
3
|
+
$value: '';
|
4
|
+
|
5
|
+
@if type-of($first) == 'string' {
|
6
|
+
$feature: $first;
|
7
|
+
$value: $second;
|
8
|
+
}
|
9
|
+
@else {
|
10
|
+
$feature: $second;
|
11
|
+
$value: $first;
|
12
|
+
}
|
13
|
+
|
14
|
+
// Set Context
|
15
|
+
$context-setter: private-breakpoint-set-context($feature, $value);
|
16
|
+
|
17
|
+
@if ($breakpoint-to-ems == true) {
|
18
|
+
$value: breakpoint-to-base-em($value);
|
19
|
+
}
|
20
|
+
|
21
|
+
@return '(#{$feature}: #{$value})'
|
22
|
+
}
|
@@ -0,0 +1,19 @@
|
|
1
|
+
@function breakpoint-parse-double-string($first, $second) {
|
2
|
+
$feature: '';
|
3
|
+
$value: '';
|
4
|
+
|
5
|
+
// Test to see which is the feature and which is the value
|
6
|
+
@if (breakpoint-string-value($first) == true) {
|
7
|
+
$feature: $first;
|
8
|
+
$value: $second;
|
9
|
+
}
|
10
|
+
@else {
|
11
|
+
$feature: $second;
|
12
|
+
$value: $first;
|
13
|
+
}
|
14
|
+
|
15
|
+
// Set Context
|
16
|
+
$context-setter: private-breakpoint-set-context($feature, $value);
|
17
|
+
|
18
|
+
@return '(#{$feature}: #{$value})';
|
19
|
+
}
|
@@ -0,0 +1,60 @@
|
|
1
|
+
@function breakpoint-make-resolutions($resolution) {
|
2
|
+
$length: length($resolution);
|
3
|
+
|
4
|
+
$output: ();
|
5
|
+
|
6
|
+
@if $length == 2 {
|
7
|
+
$feature: '';
|
8
|
+
$value: '';
|
9
|
+
|
10
|
+
// Find which is number
|
11
|
+
@if type-of(nth($resolution, 1)) == 'number' {
|
12
|
+
$value: nth($resolution, 1);
|
13
|
+
}
|
14
|
+
@else {
|
15
|
+
$value: nth($resolution, 2);
|
16
|
+
}
|
17
|
+
|
18
|
+
// Determine min/max/standard
|
19
|
+
@if index($resolution, 'min-resolution') {
|
20
|
+
$feature: 'min-';
|
21
|
+
}
|
22
|
+
@else if index($resolution, 'max-resolution') {
|
23
|
+
$feature: 'max-';
|
24
|
+
}
|
25
|
+
|
26
|
+
$standard: '(#{$feature}resolution: #{$value})';
|
27
|
+
|
28
|
+
// If we're not dealing with dppx,
|
29
|
+
@if unit($value) != 'dppx' {
|
30
|
+
$base: 96dpi;
|
31
|
+
@if unit($value) == 'dpcm' {
|
32
|
+
$base: 243.84dpcm;
|
33
|
+
}
|
34
|
+
// Write out feature tests
|
35
|
+
$webkit: '';
|
36
|
+
$moz: '';
|
37
|
+
$webkit: '(-webkit-#{$feature}device-pixel-ratio: #{$value / $base})';
|
38
|
+
$moz: '(#{$feature}-moz-device-pixel-ratio: #{$value / $base})';
|
39
|
+
// Append to output
|
40
|
+
$output: append($output, $standard, space);
|
41
|
+
$output: append($output, $webkit, space);
|
42
|
+
$output: append($output, $moz, space);
|
43
|
+
}
|
44
|
+
@else {
|
45
|
+
$webkit: '';
|
46
|
+
$moz: '';
|
47
|
+
$webkit: '(-webkit-#{$feature}device-pixel-ratio: #{$value / 1dppx})';
|
48
|
+
$moz: '(#{$feature}-moz-device-pixel-ratio: #{$value / 1dppx})';
|
49
|
+
$fallback: '(#{$feature}resolution: #{$value / 1dppx * 96dpi})';
|
50
|
+
// Append to output
|
51
|
+
$output: append($output, $standard, space);
|
52
|
+
$output: append($output, $webkit, space);
|
53
|
+
$output: append($output, $moz, space);
|
54
|
+
$output: append($output, $fallback, space);
|
55
|
+
}
|
56
|
+
|
57
|
+
}
|
58
|
+
|
59
|
+
@return $output;
|
60
|
+
}
|
@@ -0,0 +1,13 @@
|
|
1
|
+
@function breakpoint-parse-default($feature) {
|
2
|
+
$default: $breakpoint-default-feature;
|
3
|
+
|
4
|
+
// Set Context
|
5
|
+
$context-setter: private-breakpoint-set-context($default, $feature);
|
6
|
+
|
7
|
+
@if ($breakpoint-to-ems == true) and (type-of($feature) == 'number') {
|
8
|
+
@return '#{$default}: #{breakpoint-to-base-em($feature)}';
|
9
|
+
}
|
10
|
+
@else {
|
11
|
+
@return '#{$default}: #{$feature}';
|
12
|
+
}
|
13
|
+
}
|
@@ -0,0 +1,18 @@
|
|
1
|
+
@function breakpoint-parse-triple-default($feature, $first, $second) {
|
2
|
+
|
3
|
+
// Sort into min and max
|
4
|
+
$min: min($first, $second);
|
5
|
+
$max: max($first, $second);
|
6
|
+
|
7
|
+
// Set Context
|
8
|
+
$context-setter: private-breakpoint-set-context(min-#{$feature}, $min);
|
9
|
+
$context-setter: private-breakpoint-set-context(max-#{$feature}, $max);
|
10
|
+
|
11
|
+
// Make them EMs if need be
|
12
|
+
@if ($breakpoint-to-ems == true) {
|
13
|
+
$min: breakpoint-to-base-em($min);
|
14
|
+
$max: breakpoint-to-base-em($max);
|
15
|
+
}
|
16
|
+
|
17
|
+
@return '(min-#{$feature}: #{$min}) and (max-#{$feature}: #{$max})';
|
18
|
+
}
|
metadata
CHANGED
@@ -3,9 +3,10 @@ name: breakpoint
|
|
3
3
|
version: !ruby/object:Gem::Version
|
4
4
|
prerelease: false
|
5
5
|
segments:
|
6
|
-
-
|
7
|
-
-
|
8
|
-
|
6
|
+
- 2
|
7
|
+
- 0
|
8
|
+
- 0
|
9
|
+
version: 2.0.0
|
9
10
|
platform: ruby
|
10
11
|
authors:
|
11
12
|
- Mason Wendell
|
@@ -14,7 +15,7 @@ autorequire:
|
|
14
15
|
bindir: bin
|
15
16
|
cert_chain: []
|
16
17
|
|
17
|
-
date: 2012-
|
18
|
+
date: 2012-04-05 00:00:00 -04:00
|
18
19
|
default_executable:
|
19
20
|
dependencies:
|
20
21
|
- !ruby/object:Gem::Dependency
|
@@ -62,8 +63,22 @@ files:
|
|
62
63
|
- stylesheets/_breakpoint.scss
|
63
64
|
- stylesheets/breakpoint/_context.scss
|
64
65
|
- stylesheets/breakpoint/_helpers.scss
|
66
|
+
- stylesheets/breakpoint/_no-query.scss
|
67
|
+
- stylesheets/breakpoint/_parsers.scss
|
68
|
+
- stylesheets/breakpoint/_respond-to.scss
|
69
|
+
- stylesheets/breakpoint/parsers/_double.scss
|
70
|
+
- stylesheets/breakpoint/parsers/_query.scss
|
71
|
+
- stylesheets/breakpoint/parsers/_resolution.scss
|
72
|
+
- stylesheets/breakpoint/parsers/_single.scss
|
73
|
+
- stylesheets/breakpoint/parsers/_triple.scss
|
74
|
+
- stylesheets/breakpoint/parsers/double/_default-pair.scss
|
75
|
+
- stylesheets/breakpoint/parsers/double/_default.scss
|
76
|
+
- stylesheets/breakpoint/parsers/double/_double-string.scss
|
77
|
+
- stylesheets/breakpoint/parsers/resolution/_resolution.scss
|
78
|
+
- stylesheets/breakpoint/parsers/single/_default.scss
|
79
|
+
- stylesheets/breakpoint/parsers/triple/_default.scss
|
65
80
|
has_rdoc: true
|
66
|
-
homepage: https://github.com/
|
81
|
+
homepage: https://github.com/Team-Sass/breakpoint
|
67
82
|
licenses: []
|
68
83
|
|
69
84
|
post_install_message:
|
@@ -89,7 +104,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
89
104
|
version: 1.3.6
|
90
105
|
requirements: []
|
91
106
|
|
92
|
-
rubyforge_project:
|
107
|
+
rubyforge_project: breakpoint
|
93
108
|
rubygems_version: 1.3.6
|
94
109
|
signing_key:
|
95
110
|
specification_version: 3
|