singularitygs 1.1.2 → 1.8.0
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 +14 -6
- data/stylesheets/_singularitygs.scss +21 -30
- data/stylesheets/singularitygs/_api.scss +103 -24
- data/stylesheets/singularitygs/_css-grid.scss +141 -0
- data/stylesheets/singularitygs/_helpers.scss +6 -2
- data/stylesheets/singularitygs/api/_calc.scss +218 -0
- data/stylesheets/singularitygs/api/_float.scss +87 -147
- data/stylesheets/singularitygs/api/_isolation.scss +98 -131
- 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 +196 -219
- 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 -65
- data/stylesheets/singularitygs/helpers/_layout.scss +107 -10
- data/stylesheets/singularitygs/helpers/_sass-lists.scss +1 -1
- data/stylesheets/singularitygs/helpers/_settings.scss +60 -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 +53 -9
- data/stylesheets/singularitygs/language/_parse-list.scss +3 -3
- data/stylesheets/singularitygs/math/_columns.scss +9 -7
- data/stylesheets/singularitygs/math/_context.scss +1 -1
- data/stylesheets/singularitygs/math/_gutters.scss +2 -1
- metadata +52 -72
- data/templates/box-sizing/behaviors/box-sizing/boxsizing.htc +0 -399
- data/templates/box-sizing/behaviors/box-sizing/boxsizing.php +0 -23
- data/templates/box-sizing/manifest.rb +0 -4
- data/templates/demos/demo-float.scss +0 -159
- data/templates/demos/demo-isolation.scss +0 -132
- data/templates/demos/float.html.erb +0 -18
- data/templates/demos/isolation.html.erb +0 -18
- data/templates/demos/manifest.rb +0 -17
- data/templates/grid-toggle/grid.js +0 -16
- data/templates/grid-toggle/grid.min.js +0 -2
- data/templates/grid-toggle/manifest.rb +0 -22
- data/templates/project/grid.js +0 -16
- data/templates/project/grid.min.js +0 -2
- data/templates/project/manifest.rb +0 -23
- data/templates/project/partials/_base.scss +0 -4
- data/templates/project/style.scss +0 -15
@@ -1,89 +1,136 @@
|
|
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
|
-
// Reverse the grid so we can step through it
|
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
|
+
$Length: length($haystack);
|
33
|
+
$Mobile-First: sgs-get('mobile first');
|
31
34
|
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
35
|
+
// Haystack must be map
|
36
|
+
@if type-of($haystack) != 'map' {
|
37
|
+
@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.";
|
38
|
+
@return nth($haystack, 1);
|
39
|
+
}
|
36
40
|
|
37
|
-
|
38
|
-
|
41
|
+
@if $Length > 1 {
|
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($Query-Max) == 1 {
|
61
|
+
$Query-Max: nth($Query-Max, 1);
|
62
|
+
}
|
63
|
+
@else if length($Query-Max) > 1 {
|
64
|
+
@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.";
|
65
|
+
@return map-get($haystack, -1px);
|
66
|
+
}
|
67
|
+
|
68
|
+
// If there is no min or max context, return first item
|
69
|
+
@if $Query-Min == false and $Query-Max == false {
|
70
|
+
$RETURN: map-get($haystack, -1px);
|
71
|
+
@return $RETURN;
|
72
|
+
}
|
73
|
+
|
74
|
+
// Convert to PX
|
75
|
+
@if $Query-Min != false and unit($Query-Min) == 'em' {
|
76
|
+
$Query-Min: $Query-Min / 1em * 16px;
|
77
|
+
}
|
78
|
+
@if $Query-Max != false and unit($Query-Max) == 'em' {
|
79
|
+
$Query-Max: $Query-Max / 1em * 16px;
|
80
|
+
}
|
81
|
+
|
82
|
+
$Find-Haystack: find-object-keys($haystack);
|
83
|
+
$Reverse-Haystack: reverse($Find-Haystack);
|
84
|
+
|
85
|
+
$Smallest: nth($Find-Haystack, 1);
|
86
|
+
$Largest: nth($Reverse-Haystack, 1);
|
87
|
+
$Context: $Query-Min;
|
88
|
+
|
89
|
+
@if not $Mobile-First {
|
90
|
+
$Context: $Query-Max;
|
91
|
+
}
|
92
|
+
|
93
|
+
// Loop over each item in Context to find if any of the items pass.
|
94
|
+
@each $Query-Context in $Context {
|
95
|
+
@if $Query-Context != false {
|
96
|
+
// If it's smallest than the smallest MQ, use the 1st grid
|
97
|
+
@if $Query-Context < $Smallest {
|
98
|
+
$RETURN: map-get($haystack, -1px);
|
99
|
+
@return $RETURN;
|
39
100
|
}
|
101
|
+
// If it's larger than or equal to the largest MQ, use the last grid
|
102
|
+
@else if $Query-Context >= $Largest {
|
103
|
+
$RETURN: map-get($haystack, $Largest);
|
104
|
+
@return $RETURN;
|
105
|
+
}
|
106
|
+
// If it's in between the smallest and largest, go run a check.
|
107
|
+
@else {
|
108
|
+
// Loop through each MQ.
|
109
|
+
@for $j from 1 through length($Reverse-Haystack) {
|
110
|
+
$Query: nth($Reverse-Haystack, $j);
|
40
111
|
|
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);
|
112
|
+
// If the MQ is greather than or equal to the the MQ in question, use it! (mobile first)
|
113
|
+
@if ($Mobile-First) {
|
114
|
+
@if $Query-Context >= $Query {
|
115
|
+
$RETURN: map-get($haystack, nth($Reverse-Haystack, $j));
|
116
|
+
@return $RETURN;
|
117
|
+
}
|
51
118
|
}
|
52
|
-
|
119
|
+
// If the MQ is less than or equal to the the MQ in question, use it! (not mobile first)
|
53
120
|
@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
|
-
}
|
121
|
+
@if $Query-Context <= $Query {
|
122
|
+
$RETURN: map-get($haystack, nth($Reverse-Haystack, $j));
|
123
|
+
@return $RETURN;
|
70
124
|
}
|
71
125
|
}
|
72
126
|
}
|
73
127
|
}
|
74
|
-
@return nth($haystack, 1);
|
75
|
-
}
|
76
|
-
// All else fails, return the first grid
|
77
|
-
@else {
|
78
|
-
@return nth($haystack, 1);
|
79
128
|
}
|
80
129
|
}
|
81
|
-
@else {
|
82
|
-
@return $haystack;
|
83
|
-
}
|
84
130
|
}
|
85
|
-
// All else fails, return the first
|
131
|
+
// All else fails, return the first item
|
86
132
|
@else {
|
87
|
-
|
133
|
+
$RETURN: map-get($haystack, -1px);
|
134
|
+
@return $RETURN;
|
88
135
|
}
|
89
|
-
}
|
136
|
+
}
|
@@ -1,28 +1,125 @@
|
|
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
|
+
|
6
|
+
@if type-of($grid) == 'map' {
|
7
|
+
$layout: $grid;
|
8
|
+
@if map-has-key($layout, 'grid') {
|
9
|
+
$grid: map-get($layout, 'grid');
|
10
|
+
}
|
11
|
+
|
12
|
+
@if map-has-key($layout, 'gutter') {
|
13
|
+
$gutter: map-get($layout, 'gutter');
|
14
|
+
}
|
15
|
+
|
16
|
+
@if map-has-key($layout, 'output style') {
|
17
|
+
$output-style: map-get($layout, 'output style');
|
18
|
+
}
|
19
|
+
@if map-has-key($layout, 'output') {
|
20
|
+
$output-style: map-get($layout, 'output');
|
21
|
+
}
|
22
|
+
|
23
|
+
@if map-has-key($layout, 'gutter style') {
|
24
|
+
$gutter-style: map-get($layout, 'gutter style');
|
25
|
+
}
|
26
|
+
}
|
27
|
+
|
5
28
|
// Private holder for current global context
|
6
|
-
$layout-private-grid-holder:
|
7
|
-
$layout-private-gutter-holder:
|
8
|
-
$layout-private-output-holder:
|
29
|
+
$layout-private-grid-holder: sgs-get('grids');
|
30
|
+
$layout-private-gutter-holder: sgs-get('gutters');
|
31
|
+
$layout-private-output-holder: sgs-get('output');
|
32
|
+
$layout-private-gutter-style-holder: sgs-get('gutter styles');
|
9
33
|
|
10
34
|
// Overides current global contexts, but only if needed
|
11
35
|
@if $grid != false {
|
12
|
-
|
36
|
+
@include sgs-reset('grids');
|
37
|
+
@if type-of($grid) != 'map' {
|
38
|
+
@include sgs-change('grids', (-1px: $grid));
|
39
|
+
}
|
40
|
+
@else {
|
41
|
+
@include sgs-change('grids', $grid);
|
42
|
+
}
|
13
43
|
}
|
14
44
|
@if $gutter != false {
|
15
|
-
|
45
|
+
@include sgs-reset('gutters');
|
46
|
+
@if type-of($gutter) != 'map' {
|
47
|
+
@include sgs-change('gutters', (-1px: $gutter));
|
48
|
+
}
|
49
|
+
@else {
|
50
|
+
@include sgs-change('gutters', $gutter);
|
51
|
+
}
|
16
52
|
}
|
17
53
|
@if $output-style != false {
|
18
|
-
|
54
|
+
@include sgs-reset('output');
|
55
|
+
@include sgs-change('output', $output-style);
|
56
|
+
}
|
57
|
+
@if $gutter-style != false {
|
58
|
+
@include sgs-reset('gutter styles');
|
59
|
+
@if type-of($gutter-style) != 'map' {
|
60
|
+
@include sgs-change('gutter styles', (-1px: $gutter-style));
|
61
|
+
}
|
62
|
+
@else {
|
63
|
+
@include sgs-change('gutter styles', $gutter-style);
|
64
|
+
}
|
19
65
|
}
|
20
66
|
|
21
67
|
// All the things!
|
22
68
|
@content;
|
23
69
|
|
70
|
+
// REset ALL the settings
|
71
|
+
@include sgs-reset('grids');
|
72
|
+
@include sgs-reset('gutters');
|
73
|
+
@include sgs-reset('output');
|
74
|
+
@include sgs-reset('gutter styles');
|
24
75
|
// Resets global contexts
|
25
|
-
|
26
|
-
|
27
|
-
|
76
|
+
@include sgs-change('grids', $layout-private-grid-holder);
|
77
|
+
@include sgs-change('gutters', $layout-private-gutter-holder);
|
78
|
+
@include sgs-change('output', $layout-private-output-holder);
|
79
|
+
@include sgs-change('gutter styles', $layout-private-gutter-style-holder);
|
80
|
+
}
|
81
|
+
|
82
|
+
//////////////////////////////
|
83
|
+
// Layout At
|
84
|
+
// Wrapper mixin for a combined Breakpoint/Layout call
|
85
|
+
//////////////////////////////
|
86
|
+
@mixin layout-at($layout, $breakpoint) {
|
87
|
+
@include breakpoint($breakpoint) {
|
88
|
+
// If a single value is passed in, assume it's a grid
|
89
|
+
@if type-of($layout) != map {
|
90
|
+
@include layout($layout) {
|
91
|
+
@content;
|
92
|
+
}
|
93
|
+
}
|
94
|
+
// If it is a map, we've got key/values to work with
|
95
|
+
@else {
|
96
|
+
$grid: false;
|
97
|
+
$gutter: false;
|
98
|
+
$output-style: false;
|
99
|
+
$gutter-style: false;
|
100
|
+
|
101
|
+
@if map-has-key($layout, 'grid') {
|
102
|
+
$grid: map-get($layout, 'grid');
|
103
|
+
}
|
104
|
+
|
105
|
+
@if map-has-key($layout, 'gutter') {
|
106
|
+
$gutter: map-get($layout, 'gutter');
|
107
|
+
}
|
108
|
+
|
109
|
+
@if map-has-key($layout, 'output style') {
|
110
|
+
$output-style: map-get($layout, 'output style');
|
111
|
+
}
|
112
|
+
@if map-has-key($layout, 'output') {
|
113
|
+
$output-style: map-get($layout, 'output');
|
114
|
+
}
|
115
|
+
|
116
|
+
@if map-has-key($layout, 'gutter style') {
|
117
|
+
$gutter-style: map-get($layout, 'gutter style');
|
118
|
+
}
|
119
|
+
|
120
|
+
@include layout($grid, $gutter, $output-style, $gutter-style) {
|
121
|
+
@content;
|
122
|
+
}
|
123
|
+
}
|
124
|
+
}
|
28
125
|
}
|
@@ -0,0 +1,60 @@
|
|
1
|
+
//////////////////////////////
|
2
|
+
// Has Setting
|
3
|
+
//////////////////////////////
|
4
|
+
@function sgs-has($setting) {
|
5
|
+
@if map-has-key($singularity, $setting) {
|
6
|
+
@return true;
|
7
|
+
}
|
8
|
+
@else {
|
9
|
+
@return false;
|
10
|
+
}
|
11
|
+
}
|
12
|
+
|
13
|
+
//////////////////////////////
|
14
|
+
// Get Settings
|
15
|
+
//////////////////////////////
|
16
|
+
@function sgs-get($setting) {
|
17
|
+
@if sgs-has($setting) {
|
18
|
+
@return map-get($singularity, $setting);
|
19
|
+
}
|
20
|
+
@else {
|
21
|
+
@return map-get($Singularity-Settings, $setting);
|
22
|
+
}
|
23
|
+
}
|
24
|
+
|
25
|
+
//////////////////////////////
|
26
|
+
// Set Settings
|
27
|
+
//////////////////////////////
|
28
|
+
@function sgs-set($setting, $value) {
|
29
|
+
@if (str-index($setting, '-') or str-index($setting, '_')) and str-index($setting, ' ') == null {
|
30
|
+
@warn "Words in Singularity settings should be spaces, not dashes or underscores. Please replace dashes and underscores between words with spaces. Settings will not work as expected until changed.";
|
31
|
+
}
|
32
|
+
$singularity: map-merge($singularity, ($setting: $value)) !global;
|
33
|
+
@return true;
|
34
|
+
}
|
35
|
+
|
36
|
+
@mixin sgs-change($setting, $value) {
|
37
|
+
$sgs-change: sgs-set($setting, $value);
|
38
|
+
}
|
39
|
+
|
40
|
+
@mixin sgs-set($setting, $value) {
|
41
|
+
@include sgs-change($setting, $value);
|
42
|
+
}
|
43
|
+
|
44
|
+
//////////////////////////////
|
45
|
+
// Remove Setting
|
46
|
+
//////////////////////////////
|
47
|
+
@function sgs-reset($settings...) {
|
48
|
+
@if length($settings) == 1 {
|
49
|
+
$settings: nth($settings, 1);
|
50
|
+
}
|
51
|
+
|
52
|
+
@each $setting in $settings {
|
53
|
+
$singularity: map-remove($singularity, $setting) !global;
|
54
|
+
}
|
55
|
+
@return true;
|
56
|
+
}
|
57
|
+
|
58
|
+
@mixin sgs-reset($settings...) {
|
59
|
+
$sgs-reset: sgs-reset($settings);
|
60
|
+
}
|
@@ -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
|
-
@
|
19
|
-
|
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);
|
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,11 @@
|
|
1
1
|
//////////////////////////////
|
2
2
|
// Find width, in percentages, of the column span
|
3
3
|
//////////////////////////////
|
4
|
-
@function column-span($span, $location, $grid:
|
5
|
-
|
4
|
+
@function column-span($span, $location, $grid: null, $gutter: null, $gutter-style: null) {
|
6
5
|
// Find the grid and gutters
|
7
6
|
$grid: find-grid($grid);
|
8
7
|
$gutter: find-gutter($gutter);
|
8
|
+
$gutter-style: find-gutter-style($gutter-style);
|
9
9
|
|
10
10
|
@if fixed-gutter($grid, $gutter, $gutter-style) {
|
11
11
|
$gutter: 0;
|
@@ -15,7 +15,7 @@
|
|
15
15
|
// @debug $gutter;
|
16
16
|
|
17
17
|
// Combine the grid and gutters
|
18
|
-
$grid-and-gutters: column-sum($grid, $gutter);
|
18
|
+
$grid-and-gutters: column-sum($grid, $gutter, $gutter-style);
|
19
19
|
|
20
20
|
// @debug $grid-and-gutters;
|
21
21
|
|
@@ -35,8 +35,10 @@
|
|
35
35
|
}
|
36
36
|
@else {
|
37
37
|
$total: $location + $span - 1;
|
38
|
-
@
|
39
|
-
|
38
|
+
@if $total != 0 {
|
39
|
+
@for $i from $location through $total {
|
40
|
+
$span-and-gutters: $span-and-gutters + nth($grid, $i) + $gutter;
|
41
|
+
}
|
40
42
|
}
|
41
43
|
}
|
42
44
|
$span-and-gutters: $span-and-gutters - $gutter;
|
@@ -52,8 +54,8 @@
|
|
52
54
|
//////////////////////////////
|
53
55
|
// Find the total sum of the grid
|
54
56
|
//////////////////////////////
|
55
|
-
@function column-sum($grid, $gutter) {
|
56
|
-
$split: if(index(
|
57
|
+
@function column-sum($grid, $gutter, $gutter-style) {
|
58
|
+
$split: if(index($gutter-style, 'split'), true, false);
|
57
59
|
|
58
60
|
@if type-of($grid) == 'number' or length($grid) == 1 {
|
59
61
|
@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
|
}
|