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
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
|
-
---
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
1
|
+
---
|
2
|
+
SHA1:
|
3
|
+
metadata.gz: 32900e9747039e5e2fca5da66fcd6d4375302ada
|
4
|
+
data.tar.gz: 532df1e717e2bf95f17e327db75eb5da2c965c84
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: 7de953ab1247699622747a12ab20a75f579fe04b70ba64621faff299f9004056c292563c65ef3fe7894000e876c71a86406ca3ba168bdf9f16977749c1f9d7cb
|
7
|
+
data.tar.gz: de8b80ad8abf4a73d1197b9dffc7f1162036492f11b988c5019b1cb15b85711cb9b2705d62bc5c2b89e1f71ddea247465cdd808d6d8a0d1daf6183a8553988df
|
data/lib/singularitygs.rb
CHANGED
@@ -1,9 +1,17 @@
|
|
1
|
-
|
2
|
-
|
1
|
+
base_directory = File.expand_path(File.join(File.dirname(__FILE__), '..'))
|
2
|
+
singularitygs_sass_path = File.join(base_directory, 'stylesheets')
|
3
3
|
|
4
|
-
|
4
|
+
if (defined? Compass)
|
5
|
+
require 'breakpoint'
|
6
|
+
Compass::Frameworks.register(
|
7
|
+
"singularitygs",
|
8
|
+
:path => base_directory
|
9
|
+
)
|
10
|
+
else
|
11
|
+
ENV["SASS_PATH"] = [ENV["SASS_PATH"], singularitygs_sass_path].compact.join(File::PATH_SEPARATOR)
|
12
|
+
end
|
5
13
|
|
6
14
|
module SingularityGS
|
7
|
-
VERSION = "1.
|
8
|
-
DATE = "
|
9
|
-
end
|
15
|
+
VERSION = "1.8.0"
|
16
|
+
DATE = "2017-04-23"
|
17
|
+
end
|
@@ -1,34 +1,25 @@
|
|
1
1
|
//////////////////////////////
|
2
|
-
//
|
3
|
-
//////////////////////////////
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
//
|
21
|
-
|
22
|
-
|
23
|
-
// Default output style.
|
24
|
-
$output: 'isolation' !default;
|
25
|
-
|
26
|
-
// Direction for your grid. Can be ltr, rtl, or both
|
27
|
-
$direction: 'ltr' !default;
|
28
|
-
|
29
|
-
// Whether or not to include border-box or clearfix with all spans
|
30
|
-
$include-border-box: false !default;
|
31
|
-
$include-clearfix: false !default;
|
2
|
+
// Default Settings
|
3
|
+
//////////////////////////////
|
4
|
+
$Singularity-Settings: (
|
5
|
+
'grids': (-1px: 12),
|
6
|
+
'gutters': (-1px: .25),
|
7
|
+
'gutter styles': (-1px: 'opposite'),
|
8
|
+
'output': 'isolation',
|
9
|
+
'direction': 'ltr',
|
10
|
+
'mobile first': true,
|
11
|
+
'include border box': false,
|
12
|
+
'include clearfix': false,
|
13
|
+
'background grid color': chocolate,
|
14
|
+
'asymmetric output': 'isolation',
|
15
|
+
'calc include min-width': true,
|
16
|
+
'debug': false
|
17
|
+
);
|
18
|
+
|
19
|
+
//////////////////////////////
|
20
|
+
// User Settings
|
21
|
+
//////////////////////////////
|
22
|
+
$singularity: () !default;
|
32
23
|
|
33
24
|
//////////////////////////////
|
34
25
|
// Import General Helpers
|
@@ -1,39 +1,118 @@
|
|
1
|
-
@
|
1
|
+
@import "api/float";
|
2
|
+
@import "api/isolation";
|
3
|
+
@import "api/calc";
|
2
4
|
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
5
|
+
//////////////////////////////
|
6
|
+
// Master Grid Span mixin
|
7
|
+
//////////////////////////////
|
8
|
+
@mixin grid-span($span, $location: 1, $grid: null, $gutter: null, $output-style: null, $gutter-style: null, $options: null) {
|
9
|
+
|
10
|
+
@if $output-style == null {
|
11
|
+
$output-style: sgs-get('output');
|
8
12
|
}
|
9
|
-
}
|
10
13
|
|
11
|
-
|
14
|
+
$Grid: find-grid($grid);
|
15
|
+
$Gutter: find-gutter($gutter);
|
16
|
+
$Style: find-gutter-style($gutter-style);
|
17
|
+
|
18
|
+
$Start-Row: start-row($location);
|
19
|
+
$End-Row: end-row($span, $location, $Grid);
|
12
20
|
|
13
|
-
|
14
|
-
|
21
|
+
$Fixed-Gutter: fixed-gutter($Grid, $Gutter, $Style);
|
22
|
+
$Split-Gutter: index($Style, 'split');
|
23
|
+
$Gutter-Property: gutter-property($Grid, $Gutter, $Style);
|
24
|
+
|
25
|
+
$Direction: sgs-get('direction');
|
26
|
+
$From: if($options and type-of($options) == 'map', if(map-get($options, 'from'), map-get($options, 'from'), $Direction), $Direction);
|
27
|
+
$From: if($From == 'ltr' or $From == 'rtl', named-direction($From), $From);
|
28
|
+
|
29
|
+
$Holder: ();
|
30
|
+
@each $k, $v in $options {
|
31
|
+
$Holder: if($k == 'from', $Holder, map-merge($Holder, ($k: $v)));
|
15
32
|
}
|
16
|
-
|
17
|
-
|
33
|
+
$options: if(length($Holder) > 0, $Holder, null);
|
34
|
+
|
35
|
+
$Span-Map: (
|
36
|
+
'span': $span,
|
37
|
+
'location': $location,
|
38
|
+
'grid': $Grid,
|
39
|
+
'gutter': $Gutter,
|
40
|
+
'style': $Style,
|
41
|
+
'start row': $Start-Row,
|
42
|
+
'end row': $End-Row,
|
43
|
+
'fixed gutter': $Fixed-Gutter,
|
44
|
+
'split gutter': $Split-Gutter,
|
45
|
+
'gutter property': $Gutter-Property,
|
46
|
+
'options': $options
|
47
|
+
);
|
48
|
+
|
49
|
+
@if sgs-get('debug') != false {
|
50
|
+
-sgs-span-settings: inspect($Span-Map);
|
18
51
|
}
|
19
|
-
}
|
20
52
|
|
21
|
-
@mixin pull($span, $location, $grid: false, $gutter: false, $output-style: $output) {
|
22
53
|
|
23
|
-
@if $output-style
|
24
|
-
|
54
|
+
@if function-exists('output-#{$output-style}') {
|
55
|
+
$Left: ();
|
56
|
+
$Right: ();
|
57
|
+
|
58
|
+
@if $Direction == 'both' or $From == 'left' or ($Direction == 'rtl' and $From == 'opposite') {
|
59
|
+
$Left: call('output-#{$output-style}', map-merge($Span-Map, ('direction': left)));
|
60
|
+
}
|
61
|
+
|
62
|
+
@if $Direction == 'both' or $From == 'right' or ($Direction == 'ltr' and $From == 'opposite') {
|
63
|
+
$Right: call('output-#{$output-style}', map-merge($Span-Map, ('direction': right)));
|
64
|
+
}
|
65
|
+
|
66
|
+
$Left-Keys: map-keys($Left);
|
67
|
+
$Right-Keys: map-keys($Right);
|
68
|
+
$Exclude: ();
|
69
|
+
|
70
|
+
@each $key in $Left-Keys {
|
71
|
+
@if index($Right-Keys, $key) {
|
72
|
+
@if map-get($Right, $key) == map-get($Left, $key) {
|
73
|
+
$Exclude: append($Exclude, $key);
|
74
|
+
}
|
75
|
+
}
|
76
|
+
}
|
77
|
+
|
78
|
+
// Always try and print the Left value
|
79
|
+
@include grid-span-build-exclude($Left, $Exclude, false);
|
80
|
+
|
81
|
+
// If Direction is Both or RTL, add the RTL attribute selector
|
82
|
+
@if $Direction == 'both' or $Direction == 'rtl' {
|
83
|
+
[dir="rtl"] & {
|
84
|
+
@include grid-span-build-exclude($Right, $Exclude, true);
|
85
|
+
}
|
86
|
+
}
|
87
|
+
@else {
|
88
|
+
@include grid-span-build-exclude($Right, $Exclude, true);
|
89
|
+
}
|
25
90
|
}
|
26
|
-
@else
|
27
|
-
@
|
91
|
+
@else {
|
92
|
+
@warn "There doesn't appear to be an output style named `#{$output-style}`. Please ensure that the function `output-#{$output-style}` and that the output style `#{$output-style}` are both available before trying to use them.";
|
28
93
|
}
|
29
94
|
}
|
30
95
|
|
31
|
-
@mixin
|
32
|
-
|
33
|
-
|
34
|
-
|
96
|
+
@mixin grid-span-build($property, $value) {
|
97
|
+
@if type-of($value) != 'map' {
|
98
|
+
#{$property}: $value;
|
99
|
+
}
|
100
|
+
@else {
|
101
|
+
@each $prefix, $val in $value {
|
102
|
+
#{$property}: $val;
|
103
|
+
}
|
35
104
|
}
|
36
105
|
}
|
37
106
|
|
38
|
-
@
|
39
|
-
@
|
107
|
+
@mixin grid-span-build-exclude($properties, $delta, $exclude: false) {
|
108
|
+
@each $property, $value in $properties {
|
109
|
+
@if $exclude {
|
110
|
+
@if not index($delta, $property) {
|
111
|
+
@include grid-span-build($property, $value);
|
112
|
+
}
|
113
|
+
}
|
114
|
+
@else {
|
115
|
+
@include grid-span-build($property, $value);
|
116
|
+
}
|
117
|
+
}
|
118
|
+
}
|
@@ -0,0 +1,141 @@
|
|
1
|
+
@import 'breakpoint';
|
2
|
+
|
3
|
+
@function _css-gridtemplate-conversion($grid) {
|
4
|
+
@if type-of($grid) == 'number' or length($grid) == 1 {
|
5
|
+
@return unquote('repeat(#{$grid}, 1fr)');
|
6
|
+
}
|
7
|
+
@else if type-of($grid) == 'list' or length($grid) > 1 {
|
8
|
+
$holder: '';
|
9
|
+
@each $column in $grid {
|
10
|
+
@if unitless($column) {
|
11
|
+
$holder: $holder + '#{$column}fr ';
|
12
|
+
}
|
13
|
+
@else {
|
14
|
+
$holder: $holder + $column + ' ';
|
15
|
+
}
|
16
|
+
}
|
17
|
+
|
18
|
+
$holder: str-slice($holder, 0, str-length($holder) - 1);
|
19
|
+
|
20
|
+
@return unquote($holder);
|
21
|
+
}
|
22
|
+
|
23
|
+
@return $grid;
|
24
|
+
}
|
25
|
+
|
26
|
+
@function _css-grid-gap-conversion($gutter) {
|
27
|
+
@if unitless(nth($gutter, 1)) {
|
28
|
+
@return unquote('#{$gutter}fr');
|
29
|
+
}
|
30
|
+
|
31
|
+
@return $gutter;
|
32
|
+
}
|
33
|
+
|
34
|
+
@mixin _css-grid-container-padding-conversation($style) {
|
35
|
+
@if length($style) == 1 {
|
36
|
+
$style: nth($style, 1);
|
37
|
+
}
|
38
|
+
|
39
|
+
@if str-index($style, 'split') != null {
|
40
|
+
$gutter: find-gutter() / 2;
|
41
|
+
$padding: _css-grid-gap-conversion($gutter);
|
42
|
+
|
43
|
+
padding: {
|
44
|
+
left: $padding;
|
45
|
+
right: $padding;
|
46
|
+
}
|
47
|
+
}
|
48
|
+
@else {
|
49
|
+
padding: {
|
50
|
+
left: 0;
|
51
|
+
right: 0;
|
52
|
+
}
|
53
|
+
}
|
54
|
+
}
|
55
|
+
|
56
|
+
@mixin grid-container() {
|
57
|
+
$grids: sgs-get('grids');
|
58
|
+
$gutters: sgs-get('gutters');
|
59
|
+
$gutter-styles: sgs-get('gutter styles');
|
60
|
+
|
61
|
+
@supports (display: grid) {
|
62
|
+
display: grid;
|
63
|
+
|
64
|
+
// Build Column Templates
|
65
|
+
@each $mq, $grid in $grids {
|
66
|
+
@if $mq == -1px {
|
67
|
+
grid-template-columns: _css-gridtemplate-conversion($grid);
|
68
|
+
}
|
69
|
+
@else {
|
70
|
+
@include mq($mq) {
|
71
|
+
grid-template-columns: _css-gridtemplate-conversion($grid);
|
72
|
+
}
|
73
|
+
}
|
74
|
+
}
|
75
|
+
|
76
|
+
// Build Gaps
|
77
|
+
@each $mq, $gutter in $gutters {
|
78
|
+
@if $mq == -1px {
|
79
|
+
grid-gap: _css-grid-gap-conversion($gutter);
|
80
|
+
}
|
81
|
+
@else {
|
82
|
+
@include mq($mq) {
|
83
|
+
grid-gap: _css-grid-gap-conversion($gutter);
|
84
|
+
}
|
85
|
+
}
|
86
|
+
}
|
87
|
+
|
88
|
+
// Build Padding
|
89
|
+
@each $mq, $style in $gutter-styles {
|
90
|
+
@if $mq == -1px {
|
91
|
+
@include _css-grid-container-padding-conversation($style);
|
92
|
+
}
|
93
|
+
@else {
|
94
|
+
@include mq($mq) {
|
95
|
+
@include _css-grid-container-padding-conversation($style);
|
96
|
+
}
|
97
|
+
}
|
98
|
+
}
|
99
|
+
}
|
100
|
+
}
|
101
|
+
|
102
|
+
@mixin css-grid-span($Span, $Location: false) {
|
103
|
+
$grid: find-grid();
|
104
|
+
|
105
|
+
@if type-of($grid) == 'number' or length($grid) == 1 {
|
106
|
+
// If we have a symmetric grid _and_ no location, Float Span makes most sense
|
107
|
+
@if $Location == false {
|
108
|
+
@include float-span($Span, $Location);
|
109
|
+
}
|
110
|
+
// If we have an symmetric grid _and_ a location, Isolation Span makes most sense
|
111
|
+
@else {
|
112
|
+
@include isolation-span($Span, $Location);
|
113
|
+
}
|
114
|
+
}
|
115
|
+
@else if type-of($grid) == 'list' or length($grid) > 1 {
|
116
|
+
$calc: false;
|
117
|
+
@each $column in $grid {
|
118
|
+
@if not unitless($column) {
|
119
|
+
$calc: true;
|
120
|
+
}
|
121
|
+
}
|
122
|
+
|
123
|
+
// If we have an asymmetric grid _and_ it includes united numbers, needs to be Calc
|
124
|
+
@if ($calc) {
|
125
|
+
@include calc-span($Span, $Location);
|
126
|
+
}
|
127
|
+
// If we have an asymmetric grid _and_ it doesn't include united numbers, Islotion's better
|
128
|
+
@else {
|
129
|
+
@include isolation-span($Span, $Location);
|
130
|
+
}
|
131
|
+
}
|
132
|
+
|
133
|
+
@supports (display: grid) {
|
134
|
+
@if $Location {
|
135
|
+
grid-columns: $Location / span $Span;
|
136
|
+
}
|
137
|
+
@else {
|
138
|
+
grid-columns: span $Span;
|
139
|
+
}
|
140
|
+
}
|
141
|
+
}
|
@@ -1,13 +1,17 @@
|
|
1
|
+
//////////////////////////////
|
2
|
+
// Setting Helpers
|
3
|
+
//////////////////////////////
|
4
|
+
@import "helpers/settings";
|
5
|
+
|
1
6
|
//////////////////////////////
|
2
7
|
// Code Helpers
|
3
8
|
//////////////////////////////
|
4
9
|
@import "helpers/find";
|
5
10
|
@import "helpers/sass-lists";
|
6
11
|
@import "helpers/columns";
|
7
|
-
@import "helpers/clearfix";
|
8
|
-
@import "helpers/box-sizing";
|
9
12
|
@import "helpers/span-shared";
|
10
13
|
@import "helpers/directions";
|
14
|
+
@import "helpers/sort";
|
11
15
|
|
12
16
|
//////////////////////////////
|
13
17
|
// UI Helpers
|
@@ -0,0 +1,218 @@
|
|
1
|
+
@function output-calc($Span-Map) {
|
2
|
+
// Set up Left/Right maps
|
3
|
+
$Return: ();
|
4
|
+
|
5
|
+
$Span: map-get($Span-Map, 'span');
|
6
|
+
$Location: map-get($Span-Map, 'location');
|
7
|
+
|
8
|
+
$Grid: map-get($Span-Map, 'grid');
|
9
|
+
$Gutter: map-get($Span-Map, 'gutter');
|
10
|
+
$Style: map-get($Span-Map, 'style');
|
11
|
+
|
12
|
+
@if unitless($Gutter) {
|
13
|
+
$ERROR-MESSAGE: "Calc output style uses fixed gutters (gutters with units). Please define fixed gutters to use calc";
|
14
|
+
@if feature-exists(at-error) {
|
15
|
+
@error $ERROR-MESSAGE;
|
16
|
+
}
|
17
|
+
@else {
|
18
|
+
@warn $ERROR-MESSAGE;
|
19
|
+
}
|
20
|
+
@return $Return;
|
21
|
+
}
|
22
|
+
|
23
|
+
@if type-of($Grid) == 'number' {
|
24
|
+
$ERROR-MESSAGE: "Calc output style is designed to be used with asymmetric grids, especially with a mix of fixed and fluid columns. Please define an asymmetric grid or use another output style.";
|
25
|
+
@if feature-exists(at-error) {
|
26
|
+
@error $ERROR-MESSAGE;
|
27
|
+
}
|
28
|
+
@else {
|
29
|
+
@warn $ERROR-MESSAGE;
|
30
|
+
}
|
31
|
+
@return $Return;
|
32
|
+
}
|
33
|
+
|
34
|
+
$Start-Row: map-get($Span-Map, 'start row');
|
35
|
+
$End-Row: map-get($Span-Map, 'end row');
|
36
|
+
|
37
|
+
$Split-Gutter: map-get($Span-Map, 'split gutter');
|
38
|
+
|
39
|
+
$Direction: map-get($Span-Map, 'direction');
|
40
|
+
$Options: map-get($Span-Map, 'options');
|
41
|
+
|
42
|
+
$Dir: $Direction;
|
43
|
+
$Opp: opposite-direction($Dir);
|
44
|
+
|
45
|
+
$Width: '';
|
46
|
+
$Margin: null;
|
47
|
+
$Min-Width: '(';
|
48
|
+
|
49
|
+
$Fixed: ();
|
50
|
+
$Fluid: ();
|
51
|
+
$Fixed-Totals: ('px': 0, 'em': 0, '%': 0);
|
52
|
+
$Gutter-Totals: if(str-index($Style, 'split'), $Gutter * length($Grid), $Gutter * (length($Grid) - 1));
|
53
|
+
$Fluid-Totals: 0;
|
54
|
+
$Fluid-Fixed-Sum: '';
|
55
|
+
$Single-Fluid: '';
|
56
|
+
|
57
|
+
@for $i from 1 through length($Grid) {
|
58
|
+
$Item: nth($Grid, $i);
|
59
|
+
@if not unitless($Item) {
|
60
|
+
$Fixed: map-merge($Fixed, ($i: $Item));
|
61
|
+
}
|
62
|
+
@else {
|
63
|
+
$Fluid: map-merge($Fluid, ($i: $Item));
|
64
|
+
}
|
65
|
+
}
|
66
|
+
|
67
|
+
@each $k, $v in $Fixed {
|
68
|
+
$Unit: unit($v);
|
69
|
+
$Running: map-get($Fixed-Totals, $Unit) + $v;
|
70
|
+
$Fixed-Totals: map-merge($Fixed-Totals, ($Unit: $Running));
|
71
|
+
}
|
72
|
+
|
73
|
+
@each $k, $v in $Fluid {
|
74
|
+
$Fluid-Totals: $Fluid-Totals + $v;
|
75
|
+
}
|
76
|
+
|
77
|
+
@each $k, $v in $Fixed-Totals {
|
78
|
+
|
79
|
+
@if $v != 0 {
|
80
|
+
$Fluid-Fixed-Sum: '#{$Fluid-Fixed-Sum}#{$v} + ';
|
81
|
+
}
|
82
|
+
}
|
83
|
+
|
84
|
+
// Width of a single fluid item, for calc()
|
85
|
+
$Single-Fluid: '((100% - (#{$Fluid-Fixed-Sum}#{$Gutter-Totals})) / (#{$Fluid-Totals}))';
|
86
|
+
|
87
|
+
// Margin Calculation
|
88
|
+
@if not $Start-Row or not $End-Row {
|
89
|
+
@if $Split-Gutter {
|
90
|
+
$Margin: '#{$Gutter / 2} + ';
|
91
|
+
}
|
92
|
+
|
93
|
+
@for $i from 1 to $Location {
|
94
|
+
@if unitless(nth($Grid, $i)) {
|
95
|
+
$Margin: '#{$Margin}(#{$Single-Fluid} * #{nth($Grid, $i)} + #{$Gutter}) + ';
|
96
|
+
}
|
97
|
+
@else {
|
98
|
+
$Margin: '#{$Margin}(#{nth($Grid, $i)} + #{$Gutter}) + ';
|
99
|
+
}
|
100
|
+
}
|
101
|
+
}
|
102
|
+
@if $Margin != null {
|
103
|
+
$Margin: str-slice($Margin, 0, -4);
|
104
|
+
}
|
105
|
+
|
106
|
+
|
107
|
+
// Width Calculation
|
108
|
+
@if $Span == 1 {
|
109
|
+
@if map-has-key($Fixed, $Location) {
|
110
|
+
$Return: map-merge($Return, ('width': map-get($Fixed, $Location)));
|
111
|
+
}
|
112
|
+
@else if map-has-key($Fluid, $Location) {
|
113
|
+
$Math: '(#{$Single-Fluid}) * #{nth($Grid, $Location)}';
|
114
|
+
$Span-Map: ('width': ('webkit': -webkit-calc(#{unquote($Math)}), 'standard': calc(#{unquote($Math)})));
|
115
|
+
$Return: map-merge($Return, $Span-Map);
|
116
|
+
}
|
117
|
+
}
|
118
|
+
@else {
|
119
|
+
$Location-End: $Location + ($Span - 1);
|
120
|
+
$Fixed-Counter: 0;
|
121
|
+
@for $i from $Location through $Location-End {
|
122
|
+
@if unitless(nth($Grid, $i)) {
|
123
|
+
$Width: '#{$Width}(#{$Single-Fluid} * #{nth($Grid, $i)}';
|
124
|
+
}
|
125
|
+
@else {
|
126
|
+
$Fixed-Counter: $Fixed-Counter + 1;
|
127
|
+
$Min-Width: '#{$Min-Width}#{nth($Grid, $i)} + #{$Gutter} + ';
|
128
|
+
$Width: '#{$Width}(#{nth($Grid, $i)}';
|
129
|
+
}
|
130
|
+
|
131
|
+
|
132
|
+
@if $i != $Location-End {
|
133
|
+
$Width: '#{$Width} + #{$Gutter}) + ';
|
134
|
+
}
|
135
|
+
@else {
|
136
|
+
$Min-Width: str-slice($Min-Width, 0, -4);
|
137
|
+
@if $Fixed-Counter == 1 {
|
138
|
+
$Min-Width: '#{$Min-Width} - #{$Gutter}';
|
139
|
+
}
|
140
|
+
$Min-Width: '#{$Min-Width})';
|
141
|
+
$Width: '#{$Width})';
|
142
|
+
}
|
143
|
+
}
|
144
|
+
|
145
|
+
// Min width handling
|
146
|
+
@if $Min-Width != ')' {
|
147
|
+
$Min-Map: ('min-width': ('webkit' : -webkit-calc(#{unquote($Min-Width)}), 'standard': calc(#{unquote($Min-Width)}) ));
|
148
|
+
|
149
|
+
@if sgs-get('calc include min-width') {
|
150
|
+
$Return: map-merge($Return, $Min-Map);
|
151
|
+
}
|
152
|
+
}
|
153
|
+
|
154
|
+
$Span-Map: ('width': ('webkit': -webkit-calc(#{unquote($Width)}), 'standard': calc(#{unquote($Width)}) ) );
|
155
|
+
$Return: map-merge($Return, $Span-Map);
|
156
|
+
}
|
157
|
+
|
158
|
+
// Build margins and Floats
|
159
|
+
@if ($End-Row) {
|
160
|
+
$Return: map-merge($Return, ('float': $Opp));
|
161
|
+
$Return: map-merge($Return, ('margin-#{$Dir}': 0));
|
162
|
+
|
163
|
+
@if $Split-Gutter {
|
164
|
+
$Return: map-merge($Return, ('margin-#{$Opp}': $Gutter / 2));
|
165
|
+
}
|
166
|
+
@else {
|
167
|
+
$Return: map-merge($Return, ('margin-#{$Opp}': 0));
|
168
|
+
}
|
169
|
+
}
|
170
|
+
@else {
|
171
|
+
$Return: map-merge($Return, ('float': $Dir));
|
172
|
+
$Return: map-merge($Return, ('margin-#{$Opp}': -100%));
|
173
|
+
|
174
|
+
@if $Start-Row {
|
175
|
+
@if $Split-Gutter {
|
176
|
+
$Return: map-merge($Return, ('margin-#{$Dir}': $Gutter / 2));
|
177
|
+
}
|
178
|
+
@else {
|
179
|
+
$Return: map-merge($Return, ('margin-#{$Dir}': 0));
|
180
|
+
}
|
181
|
+
}
|
182
|
+
@else {
|
183
|
+
$Margin-Map: ('margin-#{$Dir}': ('webkit': -webkit-calc(#{unquote($Margin)}), 'standard': calc(#{unquote($Margin)})));
|
184
|
+
$Return: map-merge($Return, $Margin-Map);
|
185
|
+
}
|
186
|
+
}
|
187
|
+
|
188
|
+
@return $Return;
|
189
|
+
}
|
190
|
+
|
191
|
+
|
192
|
+
|
193
|
+
//////////////////////////////
|
194
|
+
// Happy Syntax for Calc
|
195
|
+
//
|
196
|
+
// Makes working with Calc easier, as it moves Clear to a 1st class citizen of the mixin, and automatically builds the verbose grid-span mixin call
|
197
|
+
//////////////////////////////
|
198
|
+
@mixin calc-span($Span, $Location, $clear: false, $grid: false, $gutter: false, $gutter-style: false, $from: false) {
|
199
|
+
|
200
|
+
@if $gutter != false and unitless($gutter) {
|
201
|
+
@warn "Calc output style uses fixed gutters (gutters with units). Please define fixed gutters to use calc";
|
202
|
+
}
|
203
|
+
|
204
|
+
@if $grid != false and type-of($grid) == 'number' {
|
205
|
+
@warn "Calc output style is designed to be used with asymmetric grids, especially with a mix of fixed and fluid columns. Please define an asymmetric grid.";
|
206
|
+
}
|
207
|
+
|
208
|
+
$Options: ();
|
209
|
+
@if $clear {
|
210
|
+
$Options: map-merge($Options, ('clear': $clear));
|
211
|
+
}
|
212
|
+
@if $from {
|
213
|
+
$Options: map-merge($Options, ('from': $from));
|
214
|
+
}
|
215
|
+
|
216
|
+
$Options: if(length($Options) > 0, $Options, null);
|
217
|
+
@include grid-span($Span, $Location, $grid, $gutter, 'calc', $gutter-style, $Options);
|
218
|
+
}
|