breakpoint 1.3 → 2.0.0
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.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
@@ -1,16 +1,34 @@
|
|
1
1
|
//////////////////////////////
|
2
2
|
// Private Breakpoint Variables
|
3
3
|
//////////////////////////////
|
4
|
-
$
|
4
|
+
$private-breakpoint-context-holder: ();
|
5
|
+
$private-breakpoint-context-placeholder: 0;
|
5
6
|
|
6
7
|
//////////////////////////////
|
7
8
|
// Breakpoint Get Context
|
8
9
|
// $feature: Input feature to get it's current MQ context. Returns false if no context
|
9
10
|
//////////////////////////////
|
10
11
|
@function breakpoint-get-context($feature) {
|
11
|
-
@each $context in $
|
12
|
+
@each $context in $private-breakpoint-context-holder {
|
12
13
|
@if $feature == nth($context, 1) {
|
13
|
-
|
14
|
+
// strip feature name
|
15
|
+
$values: ();
|
16
|
+
@for $i from 2 through length($context) {
|
17
|
+
$values: append($values, nth($context, $i), comma);
|
18
|
+
}
|
19
|
+
|
20
|
+
$length: length($values) + 1;
|
21
|
+
@for $i from $length through $private-breakpoint-context-placeholder {
|
22
|
+
// Apply the Default Media type if feature is media
|
23
|
+
@if $feature == 'media' {
|
24
|
+
$values: append($values, $breakpoint-default-media, comma);
|
25
|
+
}
|
26
|
+
@else {
|
27
|
+
$values: append($values, false, comma);
|
28
|
+
}
|
29
|
+
}
|
30
|
+
|
31
|
+
@return $values;
|
14
32
|
}
|
15
33
|
}
|
16
34
|
|
@@ -20,15 +38,74 @@ $TXkgdmFyaWFibGUhIEdvIGF3YXkh: () !default;
|
|
20
38
|
//////////////////////////////
|
21
39
|
// Private function to set context
|
22
40
|
//////////////////////////////
|
23
|
-
@function
|
41
|
+
@function private-breakpoint-set-context($feature, $value) {
|
24
42
|
@if $value == 'monochrome' {
|
25
43
|
$feature: 'monochrome';
|
26
44
|
}
|
27
45
|
|
28
|
-
$
|
29
|
-
|
46
|
+
$placeholder-plus-one: ($private-breakpoint-context-placeholder + 1);
|
47
|
+
|
48
|
+
$holder: ();
|
49
|
+
|
50
|
+
@if $private-breakpoint-context-placeholder == 1 {
|
51
|
+
$holder: ($feature $value);
|
52
|
+
$private-breakpoint-context-holder: append($private-breakpoint-context-holder, $holder, comma);
|
53
|
+
@return true;
|
30
54
|
|
31
|
-
|
55
|
+
} @else {
|
56
|
+
$feature-used: false;
|
57
|
+
@each $context in $private-breakpoint-context-holder {
|
58
|
+
@if nth($context, 1) == $feature {
|
59
|
+
$feature-used: $context;
|
60
|
+
}
|
61
|
+
}
|
62
|
+
|
63
|
+
@if $feature-used != false {
|
64
|
+
$holder: $feature;
|
65
|
+
@for $i from 2 through $placeholder-plus-one {
|
66
|
+
@if $i <= length($feature-used) {
|
67
|
+
$holder: append($holder, nth($feature-used, $i), space);
|
68
|
+
} @elseif $i < $placeholder-plus-one {
|
69
|
+
$holder: append($holder, false, space);
|
70
|
+
} @else {
|
71
|
+
$holder: append($holder, $value, space);
|
72
|
+
}
|
73
|
+
}
|
74
|
+
}
|
75
|
+
@elseif $feature-used == false {
|
76
|
+
$holder: $feature;
|
77
|
+
@for $i from 2 through $placeholder-plus-one {
|
78
|
+
@if $i < $placeholder-plus-one {
|
79
|
+
// Apply the Default Media type if feature is media
|
80
|
+
@if $feature == 'media' {
|
81
|
+
$holder: append($holder, $breakpoint-default-media, space);
|
82
|
+
}
|
83
|
+
@else {
|
84
|
+
$holder: append($holder, false, space);
|
85
|
+
}
|
86
|
+
|
87
|
+
} @else {
|
88
|
+
$holder: append($holder, $value, space);
|
89
|
+
}
|
90
|
+
}
|
91
|
+
}
|
92
|
+
|
93
|
+
// Rebuild context
|
94
|
+
$rebuild: ();
|
95
|
+
@if $feature-used != false {
|
96
|
+
@each $context in $private-breakpoint-context-holder {
|
97
|
+
@if nth($context, 1) == nth($holder, 1) {
|
98
|
+
$rebuild: append($rebuild, $holder, comma);
|
99
|
+
} @else {
|
100
|
+
$rebuild: append($rebuild, $context, comma);
|
101
|
+
}
|
102
|
+
}
|
103
|
+
|
104
|
+
} @else {
|
105
|
+
$rebuild: append($private-breakpoint-context-holder, $holder, comma);
|
106
|
+
}
|
107
|
+
$private-breakpoint-context-holder: $rebuild;
|
108
|
+
}
|
32
109
|
|
33
110
|
@return true;
|
34
111
|
}
|
@@ -36,6 +113,7 @@ $TXkgdmFyaWFibGUhIEdvIGF3YXkh: () !default;
|
|
36
113
|
//////////////////////////////
|
37
114
|
// Private function to reset context
|
38
115
|
//////////////////////////////
|
39
|
-
@mixin
|
40
|
-
$
|
116
|
+
@mixin private-breakpoint-reset-contexts {
|
117
|
+
$private-breakpoint-context-holder: ();
|
118
|
+
$private-breakpoint-context-placeholder: 0;
|
41
119
|
}
|
@@ -1,18 +1,18 @@
|
|
1
1
|
//////////////////////////////
|
2
2
|
// Converts the input value to Base EMs
|
3
3
|
//////////////////////////////
|
4
|
-
@function breakpoint-to-base-em($value
|
4
|
+
@function breakpoint-to-base-em($value) {
|
5
5
|
$value-unit: unit($value);
|
6
6
|
|
7
7
|
// Will convert relative EMs into root EMs.
|
8
|
-
@if $base-font-size and type-of($base-font-size) == 'number' and $value-unit == 'em' {
|
9
|
-
$base-unit: unit($base-font-size);
|
8
|
+
@if $breakpoint-base-font-size and type-of($breakpoint-base-font-size) == 'number' and $value-unit == 'em' {
|
9
|
+
$base-unit: unit($breakpoint-base-font-size);
|
10
10
|
|
11
11
|
@if $base-unit == 'px' or $base-unit == '%' or $base-unit == 'em' or $base-unit == 'pt' {
|
12
|
-
@return base-conversion($value) / base-conversion($base-font-size) * 1em;
|
12
|
+
@return base-conversion($value) / base-conversion($breakpoint-base-font-size) * 1em;
|
13
13
|
}
|
14
14
|
@else {
|
15
|
-
@warn '#{$base-font-size} is not set in valid units for font size!';
|
15
|
+
@warn '#{$breakpoint-base-font-size} is not set in valid units for font size!';
|
16
16
|
@return false;
|
17
17
|
}
|
18
18
|
}
|
@@ -45,56 +45,107 @@
|
|
45
45
|
//////////////////////////////
|
46
46
|
// Returns whether the feature can have a min/max pair
|
47
47
|
//////////////////////////////
|
48
|
+
$breakpoint-min-max-features: 'color',
|
49
|
+
'color-index',
|
50
|
+
'aspect-ratio',
|
51
|
+
'device-aspect-ratio',
|
52
|
+
'device-height',
|
53
|
+
'device-width',
|
54
|
+
'height',
|
55
|
+
'monochrome',
|
56
|
+
'resolution',
|
57
|
+
'width';
|
58
|
+
|
48
59
|
@function breakpoint-min-max($feature) {
|
49
|
-
@
|
50
|
-
@
|
51
|
-
|
52
|
-
|
53
|
-
@return false;
|
60
|
+
@each $item in $breakpoint-min-max-features {
|
61
|
+
@if $feature == $item {
|
62
|
+
@return true;
|
63
|
+
}
|
54
64
|
}
|
65
|
+
@return false;
|
55
66
|
}
|
56
67
|
|
57
68
|
//////////////////////////////
|
58
69
|
// Returns whether the feature can have a string value
|
59
70
|
//////////////////////////////
|
71
|
+
$breakpoint-string-features: 'orientation',
|
72
|
+
'scan',
|
73
|
+
'color',
|
74
|
+
'aspect-ratio',
|
75
|
+
'device-aspect-ratio',
|
76
|
+
'pointer',
|
77
|
+
'luminosity';
|
78
|
+
|
60
79
|
@function breakpoint-string-value($feature) {
|
61
|
-
@
|
62
|
-
@
|
63
|
-
|
64
|
-
|
65
|
-
|
80
|
+
@each $item in $breakpoint-string-features {
|
81
|
+
@if breakpoint-min-max($item) {
|
82
|
+
@if $feature == 'min-#{$item}' or $feature == 'max-#{$item}' {
|
83
|
+
@return true;
|
84
|
+
}
|
85
|
+
}
|
86
|
+
@else if $feature == $item {
|
87
|
+
@return true;
|
88
|
+
}
|
66
89
|
}
|
90
|
+
@return false;
|
67
91
|
}
|
68
92
|
|
69
93
|
//////////////////////////////
|
70
|
-
//
|
94
|
+
// Returns whether the feature is a media type
|
71
95
|
//////////////////////////////
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
96
|
+
$breakpoint-media-types: 'all',
|
97
|
+
'braille',
|
98
|
+
'embossed',
|
99
|
+
'handheld',
|
100
|
+
'print',
|
101
|
+
'projection',
|
102
|
+
'screen',
|
103
|
+
'speech',
|
104
|
+
'tty',
|
105
|
+
'tv';
|
106
|
+
|
107
|
+
@function breakpoint-is-media($feature) {
|
108
|
+
@each $media in $breakpoint-media-types {
|
109
|
+
@if ($feature == $media) or ($feature == 'not #{$media}') or ($feature == 'only #{$media}') {
|
110
|
+
@return true;
|
83
111
|
}
|
84
112
|
}
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
113
|
+
|
114
|
+
@return false;
|
115
|
+
}
|
116
|
+
|
117
|
+
//////////////////////////////
|
118
|
+
// Returns whether the feature can stand alone
|
119
|
+
//////////////////////////////
|
120
|
+
$breakpoint-single-string-features: 'color',
|
121
|
+
'color-index',
|
122
|
+
'grid',
|
123
|
+
'monochrome';
|
124
|
+
|
125
|
+
@function breakpoint-single-string($feature) {
|
126
|
+
@each $item in $breakpoint-single-string-features {
|
127
|
+
@if $feature == $item {
|
128
|
+
@return true;
|
95
129
|
}
|
96
130
|
}
|
97
|
-
@
|
98
|
-
|
131
|
+
@return false;
|
132
|
+
}
|
133
|
+
|
134
|
+
//////////////////////////////
|
135
|
+
// Returns whether the feature
|
136
|
+
//////////////////////////////
|
137
|
+
@function breakpoint-is-resolution($feature) {
|
138
|
+
$resolutions: 'device-pixel-ratio', 'dpr';
|
139
|
+
|
140
|
+
@if $breakpoint-resolutions {
|
141
|
+
$resolutions: append($resolutions, 'resolution');
|
99
142
|
}
|
143
|
+
|
144
|
+
@each $reso in $resolutions {
|
145
|
+
@if index($feature, $reso) or index($feature, 'min-#{$reso}') or index($feature, 'max-#{$reso}') {
|
146
|
+
@return true;
|
147
|
+
}
|
148
|
+
}
|
149
|
+
|
150
|
+
@return false;
|
100
151
|
}
|
@@ -0,0 +1,15 @@
|
|
1
|
+
@function breakpoint-no-query($query) {
|
2
|
+
@if type-of($query) == 'list' {
|
3
|
+
$keyword: nth($query, 1);
|
4
|
+
|
5
|
+
@if type-of($keyword) == 'string' and ($keyword == 'no-query' or $keyword == 'no query' or $keyword == 'fallback') {
|
6
|
+
@return nth($query, 2);
|
7
|
+
}
|
8
|
+
@else {
|
9
|
+
@return false;
|
10
|
+
}
|
11
|
+
}
|
12
|
+
@else {
|
13
|
+
@return false;
|
14
|
+
}
|
15
|
+
}
|
@@ -0,0 +1,104 @@
|
|
1
|
+
//////////////////////////////
|
2
|
+
// Import Parser Pieces
|
3
|
+
//////////////////////////////
|
4
|
+
@import "parsers/query";
|
5
|
+
@import "parsers/single";
|
6
|
+
@import "parsers/double";
|
7
|
+
@import "parsers/triple";
|
8
|
+
@import "parsers/resolution";
|
9
|
+
|
10
|
+
//////////////////////////////
|
11
|
+
// General Breakpoint Parser
|
12
|
+
//////////////////////////////
|
13
|
+
@function breakpoint-parse($query) {
|
14
|
+
$private-breakpoint-context-placeholder: $private-breakpoint-context-placeholder + 1;
|
15
|
+
|
16
|
+
// Set up Media Type
|
17
|
+
$query-print: '';
|
18
|
+
|
19
|
+
$force-all: (($breakpoint-force-media-all == true) and ($breakpoint-default-media == 'all'));
|
20
|
+
$empty-media: true;
|
21
|
+
@if ($force-all == true) or ($breakpoint-default-media != 'all') {
|
22
|
+
// Force the print of the default media type if (force all is true and default media type is all) or (default media type is not all)
|
23
|
+
$query-print: $breakpoint-default-media;
|
24
|
+
$empty-media: false;
|
25
|
+
}
|
26
|
+
|
27
|
+
|
28
|
+
$query-resolution: false;
|
29
|
+
|
30
|
+
$query-holder: breakpoint-parse-query($query);
|
31
|
+
|
32
|
+
|
33
|
+
|
34
|
+
// Loop over each parsed out query and write it to $query-print
|
35
|
+
$first: true;
|
36
|
+
|
37
|
+
@each $feature in $query-holder {
|
38
|
+
$length: length($feature);
|
39
|
+
|
40
|
+
// Parse a single feature
|
41
|
+
@if ($length == 1) {
|
42
|
+
// Feature is currenty a list, grab the actual value
|
43
|
+
$feature: nth($feature, 1);
|
44
|
+
|
45
|
+
// Media Type must by convention be the first item, so it's safe to flat override $query-print, which right now should only be the default media type
|
46
|
+
@if (breakpoint-is-media($feature)) {
|
47
|
+
@if ($force-all == true) or ($feature != 'all') {
|
48
|
+
// Force the print of the default media type if (force all is true and default media type is all) or (default media type is not all)
|
49
|
+
$query-print: $feature;
|
50
|
+
$empty-media: false;
|
51
|
+
|
52
|
+
// Set Context
|
53
|
+
$context-setter: private-breakpoint-set-context(media, $query-print);
|
54
|
+
}
|
55
|
+
}
|
56
|
+
@else {
|
57
|
+
$parsed: breakpoint-parse-single($feature, $empty-media, $first);
|
58
|
+
$query-print: '#{$query-print} #{$parsed}';
|
59
|
+
$first: false;
|
60
|
+
}
|
61
|
+
}
|
62
|
+
// Parse a double feature
|
63
|
+
@else if ($length == 2) {
|
64
|
+
@if (breakpoint-is-resolution($feature) != false) {
|
65
|
+
$query-resolution: $feature;
|
66
|
+
}
|
67
|
+
@else {
|
68
|
+
$parsed: null;
|
69
|
+
// If it's a string/number pair,
|
70
|
+
// we check to see if one is a single-string value,
|
71
|
+
// then we parse it as a normal double
|
72
|
+
$alpha: nth($feature, 1);
|
73
|
+
$beta: nth($feature, 2);
|
74
|
+
@if breakpoint-single-string($alpha) or breakpoint-single-string($beta) {
|
75
|
+
$parsed: breakpoint-parse-single($alpha, $empty-media, $first);
|
76
|
+
$query-print: '#{$query-print} #{$parsed}';
|
77
|
+
$first: false;
|
78
|
+
$parsed: breakpoint-parse-single($beta, $empty-media, $first);
|
79
|
+
$query-print: '#{$query-print} #{$parsed}';
|
80
|
+
}
|
81
|
+
@else {
|
82
|
+
$parsed: breakpoint-parse-double($feature, $empty-media, $first);
|
83
|
+
$query-print: '#{$query-print} #{$parsed}';
|
84
|
+
$first: false;
|
85
|
+
}
|
86
|
+
}
|
87
|
+
}
|
88
|
+
// Parse a triple feature
|
89
|
+
@else if ($length == 3) {
|
90
|
+
$parsed: breakpoint-parse-triple($feature, $empty-media, $first);
|
91
|
+
$query-print: '#{$query-print} #{$parsed}';
|
92
|
+
$first: false;
|
93
|
+
}
|
94
|
+
|
95
|
+
}
|
96
|
+
|
97
|
+
@if ($query-resolution != false) {
|
98
|
+
$query-print: breakpoint-build-resolution($query-print, $query-resolution, $empty-media, $first);
|
99
|
+
}
|
100
|
+
|
101
|
+
// @return 'all';
|
102
|
+
|
103
|
+
@return $query-print;
|
104
|
+
}
|
@@ -0,0 +1,55 @@
|
|
1
|
+
////////////////////////
|
2
|
+
// Default the Breakpoints variable
|
3
|
+
////////////////////////
|
4
|
+
$breakpoints: () !default;
|
5
|
+
|
6
|
+
////////////////////////
|
7
|
+
// Respond-to API Mixin
|
8
|
+
////////////////////////
|
9
|
+
|
10
|
+
@mixin respond-to($context) {
|
11
|
+
@if type-of($breakpoints) != 'list' {
|
12
|
+
// Just in case someone writes gibberish to the $breakpoints variable.
|
13
|
+
@warn "Your breakpoints aren't a list! See https://github.com/snugug/respond-to#api if you'd like a reminder on how to use Respond-to";
|
14
|
+
}
|
15
|
+
@if length($breakpoints) != 0 {
|
16
|
+
// If there's only one breakpoint, SASS will think it's a space separated list :P
|
17
|
+
@if length($breakpoints) == 2 and type-of(nth($breakpoints, 1)) != 'list' {
|
18
|
+
$breakpoints: append((), (nth($breakpoints, 1), nth($breakpoints, 2)));
|
19
|
+
}
|
20
|
+
@each $bkpt in $breakpoints {
|
21
|
+
@if $context == nth($bkpt, 1) {
|
22
|
+
$length: length($bkpt);
|
23
|
+
$mq: false !default;
|
24
|
+
|
25
|
+
@for $i from 2 through $length {
|
26
|
+
// If it's the first item, override $mq
|
27
|
+
@if $i == 2 {
|
28
|
+
$mq: nth($bkpt, $i);
|
29
|
+
}
|
30
|
+
// Else, join $mq
|
31
|
+
@else {
|
32
|
+
$mq: join($mq, nth($bkpt, $i));
|
33
|
+
}
|
34
|
+
}
|
35
|
+
|
36
|
+
@include breakpoint($mq) {
|
37
|
+
@content;
|
38
|
+
}
|
39
|
+
}
|
40
|
+
}
|
41
|
+
}
|
42
|
+
@else {
|
43
|
+
@warn "You haven't created any breakpoints yet! Make some already! See https://github.com/snugug/respond-to#api if you'd like a reminder on how to use Respond-to";
|
44
|
+
@content;
|
45
|
+
}
|
46
|
+
}
|
47
|
+
|
48
|
+
//////////////////////////////
|
49
|
+
// Add Breakpoint to Breakpoints
|
50
|
+
//////////////////////////////
|
51
|
+
@function add-breakpoint($name, $bkpt) {
|
52
|
+
$bkpt: $name $bkpt;
|
53
|
+
$output: append($breakpoints, $bkpt, 'comma');
|
54
|
+
@return $output;
|
55
|
+
}
|