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.
@@ -1,16 +1,34 @@
1
1
  //////////////////////////////
2
2
  // Private Breakpoint Variables
3
3
  //////////////////////////////
4
- $TXkgdmFyaWFibGUhIEdvIGF3YXkh: () !default;
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 $TXkgdmFyaWFibGUhIEdvIGF3YXkh {
12
+ @each $context in $private-breakpoint-context-holder {
12
13
  @if $feature == nth($context, 1) {
13
- @return nth($context, 2);
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 U2V0IHlvdXIgb3duIGRhbW4gY29udGV4dHMh($feature, $value) {
41
+ @function private-breakpoint-set-context($feature, $value) {
24
42
  @if $value == 'monochrome' {
25
43
  $feature: 'monochrome';
26
44
  }
27
45
 
28
- $append: $feature;
29
- $append: join($append, $value, space);
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
- $TXkgdmFyaWFibGUhIEdvIGF3YXkh: append($TXkgdmFyaWFibGUhIEdvIGF3YXkh, $append, comma);
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 TXkgcmVzZXQhIEdvIGF3YXkh {
40
- $TXkgdmFyaWFibGUhIEdvIGF3YXkh: ();
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, $base-font-size: false) {
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
- @if $feature == 'color' or $feature == 'color-index' or $feature == 'aspect-ratio' or $feature == 'device-height' or $feature == 'device-width' or $feature == 'height' or $feature == 'monochrome' or $feature == 'resolution' or $feature == 'width' or $feature == 'device-pixel-ratio' {
50
- @return true;
51
- }
52
- @else {
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
- @if $feature == 'orientation' or $feature == 'scan' or $feature == 'color' {
62
- @return true;
63
- }
64
- @else {
65
- @return false;
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
- // Experimental Media Queries
94
+ // Returns whether the feature is a media type
71
95
  //////////////////////////////
72
- @function breakpoint-experimental($property, $prefix) {
73
- @if $property == 'min-device-pixel-ratio' {
74
- @if $prefix == 'webkit' {
75
- @return '-#{$prefix}-#{$property}';
76
- }
77
- @else if $prefix == 'moz' {
78
- @return 'min--#{$prefix}-device-pixel-ratio';
79
- }
80
- @else {
81
- @warn '#{$property} is not fully supported in -#{prefix}';
82
- @return 'ERROR';
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
- @else if $property == 'max-device-pixel-ratio' {
86
- @if $prefix == 'webkit' {
87
- @return '-#{$prefix}-#{$property}';
88
- }
89
- @else if $prefix == 'moz' {
90
- @return 'max--#{$prefix}-device-pixel-ratio';
91
- }
92
- @else {
93
- @warn '#{$property} is not fully supported in -#{prefix}';
94
- @return 'ERROR';
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
- @else {
98
- @return '-#{$prefix}-#{$property}';
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
+ }