singularitygs 1.1.2 → 1.2.0.rc.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -7
- data/lib/singularitygs.rb +2 -2
- data/stylesheets/_singularitygs.scss +13 -26
- data/stylesheets/singularitygs/_api.scss +89 -29
- data/stylesheets/singularitygs/_helpers.scss +6 -2
- data/stylesheets/singularitygs/api/_float.scss +87 -147
- data/stylesheets/singularitygs/api/_isolation.scss +81 -133
- data/stylesheets/singularitygs/grids/_add.scss +34 -16
- data/stylesheets/singularitygs/grids/_find.scss +6 -8
- data/stylesheets/singularitygs/gutter-styles/_add.scss +39 -16
- data/stylesheets/singularitygs/gutter-styles/_find.scss +10 -5
- data/stylesheets/singularitygs/gutter-styles/_helpers.scss +6 -10
- data/stylesheets/singularitygs/gutters/_add.scss +37 -14
- data/stylesheets/singularitygs/gutters/_find.scss +9 -5
- data/stylesheets/singularitygs/helpers/_background-grid.scss +155 -181
- data/stylesheets/singularitygs/helpers/_box-sizing.scss +17 -32
- data/stylesheets/singularitygs/helpers/_clearfix.scss +10 -95
- data/stylesheets/singularitygs/helpers/_columns.scss +4 -3
- data/stylesheets/singularitygs/helpers/_directions.scss +6 -0
- data/stylesheets/singularitygs/helpers/_find.scss +112 -64
- data/stylesheets/singularitygs/helpers/_layout.scss +39 -10
- data/stylesheets/singularitygs/helpers/_sass-lists.scss +1 -1
- data/stylesheets/singularitygs/helpers/_settings.scss +98 -0
- data/stylesheets/singularitygs/helpers/_sort.scss +56 -0
- data/stylesheets/singularitygs/helpers/_span-shared.scss +20 -2
- data/stylesheets/singularitygs/language/_parse-add.scss +52 -8
- data/stylesheets/singularitygs/language/_parse-list.scss +3 -3
- data/stylesheets/singularitygs/math/_columns.scss +5 -4
- data/stylesheets/singularitygs/math/_context.scss +1 -1
- data/stylesheets/singularitygs/math/_gutters.scss +2 -1
- metadata +63 -54
@@ -1,89 +1,137 @@
|
|
1
|
+
//////////////////////////////
|
2
|
+
// Find Object Keys
|
3
|
+
//
|
4
|
+
// Returns
|
5
|
+
//////////////////////////////
|
6
|
+
@function find-object-keys($haystack) {
|
7
|
+
$Keys: map-keys($haystack);
|
8
|
+
$List: ();
|
9
|
+
@each $Key in $Keys {
|
10
|
+
@if $Key != -1px {
|
11
|
+
@if unit($Key) == 'em' {
|
12
|
+
$Key: $Key / 1em * 16px;
|
13
|
+
}
|
14
|
+
$List: append($List, $Key);
|
15
|
+
}
|
16
|
+
}
|
17
|
+
@return quicksort($List);
|
18
|
+
}
|
19
|
+
|
1
20
|
//////////////////////////////
|
2
21
|
// Find Object
|
3
22
|
//
|
4
23
|
// Finds relevant object
|
5
24
|
// Must be using Breakpoint to work properly
|
6
25
|
//////////////////////////////
|
7
|
-
@function find-object($haystack, $user-object:
|
8
|
-
|
9
|
-
|
10
|
-
@if $user-object != false {
|
26
|
+
@function find-object($haystack, $user-object: null) {
|
27
|
+
// If a user object has been passed in, bypass the whole function and just return that object.
|
28
|
+
@if $user-object != null and $user-object != false {
|
11
29
|
@return $user-object;
|
12
30
|
}
|
13
|
-
@else if $length > 1 {
|
14
|
-
//////////////////////////////
|
15
|
-
// @TODO! REplace with Native Sass Fucntion when vailable!
|
16
|
-
// https://github.com/nex3/sass/pull/689
|
17
|
-
//////////////////////////////
|
18
|
-
@if (is-breakpoint-list($haystack) != false) {
|
19
|
-
$query-min: breakpoint-get-context('min-width');
|
20
|
-
$query-max: breakpoint-get-context('max-width');
|
21
31
|
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
$reverse-haystack: ();
|
26
|
-
@for $i from 2 through $length {
|
27
|
-
$reverse-haystack: append($reverse-haystack, nth($haystack, $i), comma);
|
28
|
-
}
|
29
|
-
$reverse-haystack: reverse($reverse-haystack);
|
30
|
-
$rg-length: $length - 1;
|
32
|
+
$Deprecate-Warning: singularity-deprecation-warning();
|
33
|
+
$Length: length($haystack);
|
34
|
+
$Mobile-First: sgs-get('mobile first');
|
31
35
|
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
+
// Haystack must be map
|
37
|
+
@if type-of($haystack) != 'map' {
|
38
|
+
@warn "DEPRECATION: In order to remove global variable naming conflicts, Singularity's settings have been moved into the single `$singularity` variable. Please refer to our documentation (https://github.com/Team-Sass/Singularity/wiki) on how to update your settings. In the next version of Singularity, this warning will be removed. #{nth($haystack, 1)} has been returned.";
|
39
|
+
@return nth($haystack, 1);
|
40
|
+
}
|
36
41
|
|
37
|
-
|
38
|
-
|
42
|
+
// Grab Breakpoint Context
|
43
|
+
@if not function-exists(breakpoint-get-context) {
|
44
|
+
@warn "Responsive contexts require Breakpoint (https://github.com/Team-Sass/breakpoint). Please ensure that Breakpoint is imported and available for Singularity to use. First item used.";
|
45
|
+
@return map-get($haystack, -1px);
|
46
|
+
}
|
47
|
+
// Get Breakpoint Contexts
|
48
|
+
$Query-Min: breakpoint-get-context('min-width');
|
49
|
+
$Query-Max: breakpoint-get-context('max-width');
|
50
|
+
|
51
|
+
@if length($Query-Min) == 1 {
|
52
|
+
$Query-Min: nth($Query-Min, 1);
|
53
|
+
}
|
54
|
+
@else if length($Query-Min) > 1 {
|
55
|
+
@warn "Responsive contexts are not available for `or` queries as which query to use is ambiguous. Please only use single context queries. Default context is used.";
|
56
|
+
@return map-get($haystack, -1px);
|
57
|
+
}
|
58
|
+
|
59
|
+
|
60
|
+
@if $Length > 1 {
|
61
|
+
@if length($Query-Max) == 1 {
|
62
|
+
$Query-Max: nth($Query-Max, 1);
|
63
|
+
}
|
64
|
+
@else if length($Query-Max) > 1 {
|
65
|
+
@warn "Responsive contexts are not available for `or` queries as which query to use is ambiguous. Please only use single context queries. Default context is used.";
|
66
|
+
@return map-get($haystack, -1px);
|
67
|
+
}
|
68
|
+
|
69
|
+
// If there is no min or max context, return first item
|
70
|
+
@if $Query-Min == false and $Query-Max == false {
|
71
|
+
$RETURN: map-get($haystack, -1px);
|
72
|
+
@return $RETURN;
|
73
|
+
}
|
74
|
+
|
75
|
+
// Convert to PX
|
76
|
+
@if $Query-Min != false and unit($Query-Min) == 'em' {
|
77
|
+
$Query-Min: $Query-Min / 1em * 16px;
|
78
|
+
}
|
79
|
+
@if $Query-Max != false and unit($Query-Max) == 'em' {
|
80
|
+
$Query-Max: $Query-Max / 1em * 16px;
|
81
|
+
}
|
82
|
+
|
83
|
+
$Find-Haystack: find-object-keys($haystack);
|
84
|
+
$Reverse-Haystack: reverse($Find-Haystack);
|
85
|
+
|
86
|
+
$Smallest: nth($Find-Haystack, 1);
|
87
|
+
$Largest: nth($Reverse-Haystack, 1);
|
88
|
+
$Context: $Query-Min;
|
89
|
+
|
90
|
+
@if not $Mobile-First {
|
91
|
+
$Context: $Query-Max;
|
92
|
+
}
|
93
|
+
|
94
|
+
// Loop over each item in Context to find if any of the items pass.
|
95
|
+
@each $Query-Context in $Context {
|
96
|
+
@if $Query-Context != false {
|
97
|
+
// If it's smallest than the smallest MQ, use the 1st grid
|
98
|
+
@if $Query-Context < $Smallest {
|
99
|
+
$RETURN: map-get($haystack, -1px);
|
100
|
+
@return $RETURN;
|
39
101
|
}
|
102
|
+
// If it's larger than or equal to the largest MQ, use the last grid
|
103
|
+
@else if $Query-Context >= $Largest {
|
104
|
+
$RETURN: map-get($haystack, $Largest);
|
105
|
+
@return $RETURN;
|
106
|
+
}
|
107
|
+
// If it's in between the smallest and largest, go run a check.
|
108
|
+
@else {
|
109
|
+
// Loop through each MQ.
|
110
|
+
@for $j from 1 through length($Reverse-Haystack) {
|
111
|
+
$Query: nth($Reverse-Haystack, $j);
|
40
112
|
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
}
|
48
|
-
// If it's larger than or equal to the largest MQ, use the last grid
|
49
|
-
@else if $query-context >= $largest {
|
50
|
-
@return nth(nth($reverse-haystack, 1), 1);
|
113
|
+
// If the MQ is greather than or equal to the the MQ in question, use it! (mobile first)
|
114
|
+
@if ($Mobile-First) {
|
115
|
+
@if $Query-Context >= $Query {
|
116
|
+
$RETURN: map-get($haystack, nth($Reverse-Haystack, $j));
|
117
|
+
@return $RETURN;
|
118
|
+
}
|
51
119
|
}
|
52
|
-
|
120
|
+
// If the MQ is less than or equal to the the MQ in question, use it! (not mobile first)
|
53
121
|
@else {
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
// If the MQ is greather than or equal to the the MQ in question, use it! (mobile first)
|
59
|
-
@if ($mobile-first) {
|
60
|
-
@if $query-context >= $query {
|
61
|
-
@return nth(nth($reverse-haystack, $j), 1);
|
62
|
-
}
|
63
|
-
}
|
64
|
-
// If the MQ is less than or equal to the the MQ in question, use it! (not mobile first)
|
65
|
-
@else {
|
66
|
-
@if $query-context <= $query {
|
67
|
-
@return nth(nth($reverse-haystack, $j), 1);
|
68
|
-
}
|
69
|
-
}
|
122
|
+
@if $Query-Context <= $Query {
|
123
|
+
$RETURN: map-get($haystack, nth($Reverse-Haystack, $j));
|
124
|
+
@return $RETURN;
|
70
125
|
}
|
71
126
|
}
|
72
127
|
}
|
73
128
|
}
|
74
|
-
@return nth($haystack, 1);
|
75
|
-
}
|
76
|
-
// All else fails, return the first grid
|
77
|
-
@else {
|
78
|
-
@return nth($haystack, 1);
|
79
129
|
}
|
80
130
|
}
|
81
|
-
@else {
|
82
|
-
@return $haystack;
|
83
|
-
}
|
84
131
|
}
|
85
|
-
// All else fails, return the first
|
132
|
+
// All else fails, return the first item
|
86
133
|
@else {
|
87
|
-
|
134
|
+
$RETURN: map-get($haystack, -1px);
|
135
|
+
@return $RETURN;
|
88
136
|
}
|
89
137
|
}
|
@@ -1,28 +1,57 @@
|
|
1
1
|
//////////////////////////////
|
2
2
|
// Wrapper mixin for overriding the global contexts as a block
|
3
3
|
//////////////////////////////
|
4
|
-
@mixin layout($grid: false, $gutter: false, $output-style: false) {
|
4
|
+
@mixin layout($grid: false, $gutter: false, $output-style: false, $gutter-style: false) {
|
5
5
|
// Private holder for current global context
|
6
|
-
$layout-private-grid-holder:
|
7
|
-
$layout-private-gutter-holder:
|
8
|
-
$layout-private-output-holder:
|
6
|
+
$layout-private-grid-holder: sgs-get('grids');
|
7
|
+
$layout-private-gutter-holder: sgs-get('gutters');
|
8
|
+
$layout-private-output-holder: sgs-get('output');
|
9
|
+
$layout-private-gutter-style-holder: sgs-get('gutter styles');
|
9
10
|
|
10
11
|
// Overides current global contexts, but only if needed
|
11
12
|
@if $grid != false {
|
12
|
-
|
13
|
+
@include sgs-reset('grids');
|
14
|
+
@if type-of($grid) != 'map' {
|
15
|
+
@include sgs-change('grids', (-1px: $grid));
|
16
|
+
}
|
17
|
+
@else {
|
18
|
+
@include sgs-change('grids', $grid);
|
19
|
+
}
|
13
20
|
}
|
14
21
|
@if $gutter != false {
|
15
|
-
|
22
|
+
@include sgs-reset('gutters');
|
23
|
+
@if type-of($gutter) != 'map' {
|
24
|
+
@include sgs-change('gutters', (-1px: $gutter));
|
25
|
+
}
|
26
|
+
@else {
|
27
|
+
@include sgs-change('gutters', $gutter);
|
28
|
+
}
|
16
29
|
}
|
17
30
|
@if $output-style != false {
|
18
|
-
|
31
|
+
@include sgs-reset('output');
|
32
|
+
@include sgs-change('output', $output-style);
|
33
|
+
}
|
34
|
+
@if $gutter-style != false {
|
35
|
+
@include sgs-reset('gutter styles');
|
36
|
+
@if type-of($gutter-style) != 'map' {
|
37
|
+
@include sgs-change('gutter styles', (-1px: $gutter-style));
|
38
|
+
}
|
39
|
+
@else {
|
40
|
+
@include sgs-change('gutter styles', $gutter-style);
|
41
|
+
}
|
19
42
|
}
|
20
43
|
|
21
44
|
// All the things!
|
22
45
|
@content;
|
23
46
|
|
47
|
+
// REset ALL the settings
|
48
|
+
@include sgs-reset('grids');
|
49
|
+
@include sgs-reset('gutters');
|
50
|
+
@include sgs-reset('output');
|
51
|
+
@include sgs-reset('gutter styles');
|
24
52
|
// Resets global contexts
|
25
|
-
|
26
|
-
|
27
|
-
|
53
|
+
@include sgs-change('grids', $layout-private-grid-holder);
|
54
|
+
@include sgs-change('gutters', $layout-private-gutter-holder);
|
55
|
+
@include sgs-change('output', $layout-private-output-holder);
|
56
|
+
@include sgs-change('gutter styles', $layout-private-gutter-style-holder);
|
28
57
|
}
|
@@ -0,0 +1,98 @@
|
|
1
|
+
//////////////////////////////
|
2
|
+
// Deprecation Warnings for new Setting System
|
3
|
+
//////////////////////////////
|
4
|
+
@function singularity-deprecation-warning() {
|
5
|
+
$Singularity-Global-Vars: 'grids', 'gutters', 'gutter-styles', 'mobile-first', 'output', 'direction', 'include-border-box', 'include-clearfix';
|
6
|
+
|
7
|
+
@each $var in $Singularity-Global-Vars {
|
8
|
+
@if global-variable-exists($var) {
|
9
|
+
$Singularity-Warning-Output: "DEPRECATION: In order to remove global variable naming conflicts, Singularity's settings have been moved into the single `$singularity` variable.";
|
10
|
+
|
11
|
+
@if $var == 'grids' or $var == 'gutters' or $var == 'gutter-styles' {
|
12
|
+
$Singularity-Singleton-Var: str_slice($var, 1, -2);
|
13
|
+
$Singularity-Warning-Output: $Singularity-Warning-Output + " Please replace all `$#{$var}` definitions, and all `add-#{$Singularity-Singleton-Var}()` calls to `@include add-#{$Singularity-Singleton-Var}()`";
|
14
|
+
}
|
15
|
+
@else {
|
16
|
+
// String Replace
|
17
|
+
$Singularity-Replace-Index: -1;
|
18
|
+
$Singularity-Replace-Holder: '';
|
19
|
+
$Singularity-Replace-Spaced: $var;
|
20
|
+
@while $Singularity-Replace-Index != 0 {
|
21
|
+
$Singularity-Replace-Index: str-index($Singularity-Replace-Spaced, '-');
|
22
|
+
@if $Singularity-Replace-Index != 0 {
|
23
|
+
$Singularity-Replace-Holder: str-slice($Singularity-Replace-Spaced, 1, $Singularity-Replace-Index - 1) + ' ';
|
24
|
+
$Singularity-Replace-Spaced: str-slice($Singularity-Replace-Spaced, $Singularity-Replace-Index + 1);
|
25
|
+
$Singularity-Replace-Spaced: $Singularity-Replace-Holder + $Singularity-Replace-Spaced;
|
26
|
+
$Singularity-Replace-Index: str-index($Singularity-Replace-Spaced, '-');
|
27
|
+
}
|
28
|
+
}
|
29
|
+
$Singularity-Warning-Output: $Singularity-Warning-Output + " Please replace all `$#{$var}` definitions with `@include sgs-change('#{$Singularity-Replace-Spaced}', $value)`";
|
30
|
+
}
|
31
|
+
|
32
|
+
$Singularity-Warning-Output: $Singularity-Warning-Output + " In the next version of Singularity, this warning will be removed";
|
33
|
+
|
34
|
+
@warn $Singularity-Warning-Output;
|
35
|
+
}
|
36
|
+
}
|
37
|
+
|
38
|
+
@return false;
|
39
|
+
}
|
40
|
+
|
41
|
+
$DEPRECATE:singularity-deprecation-warning();
|
42
|
+
|
43
|
+
//////////////////////////////
|
44
|
+
// Has Setting
|
45
|
+
//////////////////////////////
|
46
|
+
@function sgs-has($setting) {
|
47
|
+
@if map-has-key($singularity, $setting) {
|
48
|
+
@return true;
|
49
|
+
}
|
50
|
+
@else {
|
51
|
+
@return false;
|
52
|
+
}
|
53
|
+
}
|
54
|
+
|
55
|
+
//////////////////////////////
|
56
|
+
// Get Settings
|
57
|
+
//////////////////////////////
|
58
|
+
@function sgs-get($setting) {
|
59
|
+
@if sgs-has($setting) {
|
60
|
+
@return map-get($singularity, $setting);
|
61
|
+
}
|
62
|
+
@else {
|
63
|
+
@return map-get($Singularity-Settings, $setting);
|
64
|
+
}
|
65
|
+
}
|
66
|
+
|
67
|
+
//////////////////////////////
|
68
|
+
// Set Settings
|
69
|
+
//////////////////////////////
|
70
|
+
@function sgs-set($setting, $value) {
|
71
|
+
@if str-index($setting, '-') > 0 {
|
72
|
+
@warn "Singularity settings should contain spaces, not dashes. Please replace dashes with spaces. Settings will not work as expected until changed.";
|
73
|
+
}
|
74
|
+
$singularity: map-merge($singularity, ($setting: $value)) !global;
|
75
|
+
@return true;
|
76
|
+
}
|
77
|
+
|
78
|
+
@mixin sgs-change($setting, $value) {
|
79
|
+
$sgs-change: sgs-set($setting, $value);
|
80
|
+
}
|
81
|
+
|
82
|
+
//////////////////////////////
|
83
|
+
// Remove Setting
|
84
|
+
//////////////////////////////
|
85
|
+
@function sgs-reset($setting) {
|
86
|
+
$Return: ();
|
87
|
+
|
88
|
+
@each $Key, $Value in $singularity {
|
89
|
+
$Return: if($setting == $Key, $Return, map-merge($Return, ($Key: $Value)));
|
90
|
+
}
|
91
|
+
|
92
|
+
$singularity: $Return !global;
|
93
|
+
@return true;
|
94
|
+
}
|
95
|
+
|
96
|
+
@mixin sgs-reset($setting) {
|
97
|
+
$sgs-reset: sgs-reset($setting);
|
98
|
+
}
|
@@ -0,0 +1,56 @@
|
|
1
|
+
//////////////////////////////
|
2
|
+
// Quicksort
|
3
|
+
// http://rosettacode.org/wiki/Sorting_algorithms/Quicksort
|
4
|
+
//////////////////////////////
|
5
|
+
@function quicksort($list) {
|
6
|
+
|
7
|
+
$QS-Less: ();
|
8
|
+
$QS-Equal: ();
|
9
|
+
$QS-Large: ();
|
10
|
+
|
11
|
+
$QS-Length: length($list);
|
12
|
+
|
13
|
+
$QS-Seed: round($QS-Length / 2);
|
14
|
+
|
15
|
+
@if $QS-Length > 1 {
|
16
|
+
$QS-Seed: nth($list, $QS-Seed);
|
17
|
+
@each $Item in $list {
|
18
|
+
@if $Item < $QS-Seed {
|
19
|
+
$QS-Less: append($QS-Less, $Item);
|
20
|
+
}
|
21
|
+
@else if $Item == $QS-Seed {
|
22
|
+
$QS-Equal: append($QS-Equal, $Item);
|
23
|
+
}
|
24
|
+
@else {
|
25
|
+
$QS-Large: append($QS-Large, $Item);
|
26
|
+
}
|
27
|
+
}
|
28
|
+
$QS-Less: quicksort($QS-Less);
|
29
|
+
$QS-Large: quicksort($QS-Large);
|
30
|
+
|
31
|
+
$QS-Return: join($QS-Less, $QS-Equal);
|
32
|
+
$QS-Return: join($QS-Return, $QS-Large);
|
33
|
+
|
34
|
+
@return $QS-Return;
|
35
|
+
}
|
36
|
+
|
37
|
+
@return $list;
|
38
|
+
}
|
39
|
+
|
40
|
+
//////////////////////////////
|
41
|
+
// Sort Map function
|
42
|
+
//////////////////////////////
|
43
|
+
@function sort-map($map, $reverse: false) {
|
44
|
+
$Sort-Map-Keys: quicksort(map-keys($map));
|
45
|
+
$Sort-Map-Map: ();
|
46
|
+
|
47
|
+
@if $reverse {
|
48
|
+
$Sort-Map-Keys: reverse($Sort-Map-Keys);
|
49
|
+
}
|
50
|
+
|
51
|
+
@each $key in $Sort-Map-Keys {
|
52
|
+
$Sort-Map-Map: map-merge($Sort-Map-Map, ($key: map-get($map, $key)));
|
53
|
+
}
|
54
|
+
|
55
|
+
@return $Sort-Map-Map;
|
56
|
+
}
|
@@ -1,9 +1,27 @@
|
|
1
1
|
@mixin span-shared {
|
2
|
+
$include-border-box: sgs-get('include border box');
|
3
|
+
$include-clearfix: sgs-get('include clearfix');
|
4
|
+
|
2
5
|
@if $include-border-box {
|
3
|
-
@
|
6
|
+
@if mixin-exists(box-sizing) {
|
7
|
+
@include box-sizing(border-box);
|
8
|
+
}
|
9
|
+
@else {
|
10
|
+
-moz-box-sizing: border-box;
|
11
|
+
box-sizing: border-box;
|
12
|
+
}
|
4
13
|
}
|
5
14
|
|
6
15
|
@if $include-clearfix {
|
7
|
-
@
|
16
|
+
@if mixin-exists(clearfix) {
|
17
|
+
@include clearfix;
|
18
|
+
}
|
19
|
+
@else {
|
20
|
+
&:after {
|
21
|
+
content: "";
|
22
|
+
display: table;
|
23
|
+
clear: both;
|
24
|
+
}
|
25
|
+
}
|
8
26
|
}
|
9
27
|
}
|
@@ -1,19 +1,63 @@
|
|
1
|
+
//////////////////////////////
|
2
|
+
// Parse add string
|
3
|
+
//
|
4
|
+
// Retrieve add and media query values from a definition
|
5
|
+
// parse-add($definition)
|
6
|
+
// $definition : <list>
|
7
|
+
// - A list like: .25 at 300px
|
8
|
+
//
|
9
|
+
//////////////////////////////
|
1
10
|
@function parse-add($definition) {
|
2
|
-
$
|
3
|
-
$mq:
|
4
|
-
$mq-find: false;
|
11
|
+
$parse-find: ();
|
12
|
+
$parse-mq: null;
|
13
|
+
$parse-mq-find: false;
|
14
|
+
$Mobile-First: sgs-get('mobile first');
|
5
15
|
|
6
16
|
@each $item in $definition {
|
7
|
-
@if $item != 'at' and $mq-find != true {
|
8
|
-
$
|
17
|
+
@if $item != 'at' and $parse-mq-find != true {
|
18
|
+
$parse-find: append($parse-find, $item, 'space');
|
9
19
|
}
|
10
20
|
@else if $item == 'at' {
|
11
|
-
$mq-find: true;
|
21
|
+
$parse-mq-find: true;
|
12
22
|
}
|
13
23
|
@else {
|
14
|
-
$mq: $item;
|
24
|
+
$parse-mq: $item;
|
15
25
|
}
|
16
26
|
}
|
17
27
|
|
18
|
-
@
|
28
|
+
@if $parse-mq {
|
29
|
+
@if not function-exists(breakpoint) {
|
30
|
+
@warn "Responsive contexts require Breakpoint (https://github.com/Team-Sass/breakpoint). Please ensure that Breakpoint is imported and available for Singularity to use. Context set to -1px.";
|
31
|
+
$parse-mq: -1px;
|
32
|
+
}
|
33
|
+
@else {
|
34
|
+
$breakpoint-parse: breakpoint($parse-mq);
|
35
|
+
$breakpoint-parse: map-get($breakpoint-parse, 'context holder');
|
36
|
+
$breakpoint-mq: null;
|
37
|
+
@if $Mobile-First {
|
38
|
+
$breakpoint-mq: map-get($breakpoint-parse, 'min-width');
|
39
|
+
}
|
40
|
+
@else {
|
41
|
+
$breakpoint-mq: map-get($breakpoint-parse, 'max-width');
|
42
|
+
}
|
43
|
+
|
44
|
+
@if length($breakpoint-mq) > 1 {
|
45
|
+
@warn "Responsive contexts are not available for `or` queries as which query to use is ambiguous. Please only use single context queries. Context set to -1px.";
|
46
|
+
$parse-mq: 1px;
|
47
|
+
}
|
48
|
+
@else if length($breakpoint-mq) < 1 {
|
49
|
+
@warn "No " + if($Mobile-First, 'min-width', 'max-width') + ' context found. Please use a media query with the correct context. Context set to -1px.';
|
50
|
+
$parse-mq: -1px;
|
51
|
+
}
|
52
|
+
@else {
|
53
|
+
$parse-mq: nth($breakpoint-mq, 1);
|
54
|
+
}
|
55
|
+
}
|
56
|
+
}
|
57
|
+
|
58
|
+
@if $parse-mq and unit($parse-mq) == 'em' {
|
59
|
+
$parse-mq: $parse-mq / 1em * 16px;
|
60
|
+
}
|
61
|
+
|
62
|
+
@return ($parse-find $parse-mq);
|
19
63
|
}
|
@@ -4,9 +4,10 @@
|
|
4
4
|
// Retrieve values from the natural language string.
|
5
5
|
// parse-string($var, $list)
|
6
6
|
// $var : <string>
|
7
|
-
// - at/span/of or any other keywords.
|
7
|
+
// - 'at'/'span'/'of' or any other keywords.
|
8
8
|
// - 'span' queries the unprefixed span declaration.
|
9
9
|
// - 'at' can also query first, last, alpha, and omega.
|
10
|
+
// - 'grid' will return the same as 'of'
|
10
11
|
// $list : <list>
|
11
12
|
// - A list like this: last 2 of (1 1 2) push 1
|
12
13
|
//
|
@@ -19,7 +20,6 @@
|
|
19
20
|
|
20
21
|
// Loop through list.
|
21
22
|
@each $item in $list {
|
22
|
-
|
23
23
|
// if 'span' - return the first numeric.
|
24
24
|
// if keyword was found - return the following item.
|
25
25
|
@if (type-of($item) == number and $var == span and $found != 'grid') or $found == true {
|
@@ -29,7 +29,7 @@
|
|
29
29
|
}
|
30
30
|
|
31
31
|
// Special handling for Grids
|
32
|
-
@else if $item == $var and $var == 'of' {
|
32
|
+
@else if ($item == $var or $item == 'grid' or $item == 'of') and ($var == 'of' or $var == 'grid') {
|
33
33
|
$found: 'grid';
|
34
34
|
}
|
35
35
|
|
@@ -1,11 +1,12 @@
|
|
1
1
|
//////////////////////////////
|
2
2
|
// Find width, in percentages, of the column span
|
3
3
|
//////////////////////////////
|
4
|
-
@function column-span($span, $location, $grid:
|
4
|
+
@function column-span($span, $location, $grid: null, $gutter: null, $gutter-style: null) {
|
5
5
|
|
6
6
|
// Find the grid and gutters
|
7
7
|
$grid: find-grid($grid);
|
8
8
|
$gutter: find-gutter($gutter);
|
9
|
+
$gutter-style: find-gutter-style($gutter-style);
|
9
10
|
|
10
11
|
@if fixed-gutter($grid, $gutter, $gutter-style) {
|
11
12
|
$gutter: 0;
|
@@ -15,7 +16,7 @@
|
|
15
16
|
// @debug $gutter;
|
16
17
|
|
17
18
|
// Combine the grid and gutters
|
18
|
-
$grid-and-gutters: column-sum($grid, $gutter);
|
19
|
+
$grid-and-gutters: column-sum($grid, $gutter, $gutter-style);
|
19
20
|
|
20
21
|
// @debug $grid-and-gutters;
|
21
22
|
|
@@ -52,8 +53,8 @@
|
|
52
53
|
//////////////////////////////
|
53
54
|
// Find the total sum of the grid
|
54
55
|
//////////////////////////////
|
55
|
-
@function column-sum($grid, $gutter) {
|
56
|
-
$split: if(index(
|
56
|
+
@function column-sum($grid, $gutter, $gutter-style) {
|
57
|
+
$split: if(index($gutter-style, 'split'), true, false);
|
57
58
|
|
58
59
|
@if type-of($grid) == 'number' or length($grid) == 1 {
|
59
60
|
@if $split {
|
@@ -3,13 +3,14 @@
|
|
3
3
|
// Find the columns and gutters
|
4
4
|
$grid: find-grid($grid);
|
5
5
|
$gutter: find-gutter($gutter);
|
6
|
+
$gutter-style: find-gutter-style($gutter-style);
|
6
7
|
|
7
8
|
@if fixed-gutter($grid, $gutter, $gutter-style) {
|
8
9
|
@return nth($gutter, 1);
|
9
10
|
}
|
10
11
|
|
11
12
|
// Combine the columns and gutters
|
12
|
-
$grid-and-gutters: column-sum($grid, $gutter);
|
13
|
+
$grid-and-gutters: column-sum($grid, $gutter, $gutter-style);
|
13
14
|
|
14
15
|
@return (nth($gutter, 1) / $grid-and-gutters) * 100%
|
15
16
|
}
|