singularitygs 1.1.2 → 1.8.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (49) hide show
  1. checksums.yaml +7 -7
  2. data/lib/singularitygs.rb +14 -6
  3. data/stylesheets/_singularitygs.scss +21 -30
  4. data/stylesheets/singularitygs/_api.scss +103 -24
  5. data/stylesheets/singularitygs/_css-grid.scss +141 -0
  6. data/stylesheets/singularitygs/_helpers.scss +6 -2
  7. data/stylesheets/singularitygs/api/_calc.scss +218 -0
  8. data/stylesheets/singularitygs/api/_float.scss +87 -147
  9. data/stylesheets/singularitygs/api/_isolation.scss +98 -131
  10. data/stylesheets/singularitygs/grids/_add.scss +34 -16
  11. data/stylesheets/singularitygs/grids/_find.scss +6 -8
  12. data/stylesheets/singularitygs/gutter-styles/_add.scss +39 -16
  13. data/stylesheets/singularitygs/gutter-styles/_find.scss +10 -5
  14. data/stylesheets/singularitygs/gutter-styles/_helpers.scss +6 -10
  15. data/stylesheets/singularitygs/gutters/_add.scss +37 -14
  16. data/stylesheets/singularitygs/gutters/_find.scss +9 -5
  17. data/stylesheets/singularitygs/helpers/_background-grid.scss +196 -219
  18. data/stylesheets/singularitygs/helpers/_box-sizing.scss +17 -32
  19. data/stylesheets/singularitygs/helpers/_clearfix.scss +10 -95
  20. data/stylesheets/singularitygs/helpers/_columns.scss +4 -3
  21. data/stylesheets/singularitygs/helpers/_directions.scss +6 -0
  22. data/stylesheets/singularitygs/helpers/_find.scss +112 -65
  23. data/stylesheets/singularitygs/helpers/_layout.scss +107 -10
  24. data/stylesheets/singularitygs/helpers/_sass-lists.scss +1 -1
  25. data/stylesheets/singularitygs/helpers/_settings.scss +60 -0
  26. data/stylesheets/singularitygs/helpers/_sort.scss +56 -0
  27. data/stylesheets/singularitygs/helpers/_span-shared.scss +20 -2
  28. data/stylesheets/singularitygs/language/_parse-add.scss +53 -9
  29. data/stylesheets/singularitygs/language/_parse-list.scss +3 -3
  30. data/stylesheets/singularitygs/math/_columns.scss +9 -7
  31. data/stylesheets/singularitygs/math/_context.scss +1 -1
  32. data/stylesheets/singularitygs/math/_gutters.scss +2 -1
  33. metadata +52 -72
  34. data/templates/box-sizing/behaviors/box-sizing/boxsizing.htc +0 -399
  35. data/templates/box-sizing/behaviors/box-sizing/boxsizing.php +0 -23
  36. data/templates/box-sizing/manifest.rb +0 -4
  37. data/templates/demos/demo-float.scss +0 -159
  38. data/templates/demos/demo-isolation.scss +0 -132
  39. data/templates/demos/float.html.erb +0 -18
  40. data/templates/demos/isolation.html.erb +0 -18
  41. data/templates/demos/manifest.rb +0 -17
  42. data/templates/grid-toggle/grid.js +0 -16
  43. data/templates/grid-toggle/grid.min.js +0 -2
  44. data/templates/grid-toggle/manifest.rb +0 -22
  45. data/templates/project/grid.js +0 -16
  46. data/templates/project/grid.min.js +0 -2
  47. data/templates/project/manifest.rb +0 -23
  48. data/templates/project/partials/_base.scss +0 -4
  49. data/templates/project/style.scss +0 -15
data/stylesheets/singularitygs/helpers/_background-grid.scss CHANGED
@@ -1,269 +1,246 @@
1
1
  // -----------------------------------------------
2
- // Grid Overlay & Background
3
- //
4
- // Uses all your settings to create a grid background for a container element.
5
- // There are three ways you can display a grid:
6
- //
7
- // 1. Manually apply the background to the element -
8
- //
9
- // .container {
10
- // @include background-grid;
11
- // }
12
- //
13
- // 2. Add a switch to toggle an overlay -
14
- //
15
- // @include grid-overlay('.container');
16
- //
17
- // 3. Toggle grid with JavaScript
18
- //
19
- // @include grid-toggle;
20
- // Add [data-development-grid="show"] to item you want grid applied to
21
- // Add "grid.min.js" to your HTML
22
- //
23
- // The first will apply a grid background to your container calculated using your
24
- // grid settings, media breakpoints etc.
25
- //
26
- // The second will add a switch to your page which allows you to view a grid
27
- // overlay over your container (or <body> if none is provided) by hovering over
28
- // the switch. if you need your mouse for other things you can toggle the overlay
29
- // on permanently by inspecting <head> and checking :hover in your styles panel.
30
- //
31
- // The thid will allow you to toggle your background grid on and off by pressing the 'g' on your keyboard.
32
- //
33
- // Note: Sub-pixel rounding can lead to several pixels of variation between browsers.
34
-
35
-
36
- // -----------------------------------------------
37
- // Imports
38
- @import "compass/css3";
39
-
40
- // -----------------------------------------------
41
- // Grid Overlay
42
-
43
- // The overlay is painted over your container's ::after pseudo-element, so we must
44
- // give position to the container itself, if relative doesn't suit your layout
45
- // it can be replaced by absolute/fixed.
46
- $overlay-position: relative !default;
47
-
48
- // Set the position of the switch.
49
- $overlay-switch-position: left bottom !default;
2
+ // Grid Background
50
3
 
51
- $background-grid-color: Chocolate !default;
4
+ @mixin background-grid(
5
+ $columns: null,
6
+ $gutter: null,
7
+ $gutter-style: null,
8
+ $color: null
9
+ ) {
52
10
 
53
- // Global variable to show or hide the grid background at will.
54
- $show-grid-backgrounds: true !default;
11
+ $color: if($color != null, $color, sgs-get('background grid color'));
55
12
 
56
- @mixin grid-overlay (
57
- $selector: 'body',
58
- $columns: false,
59
- $gutter: false,
60
- $color: $background-grid-color
61
- ) {
13
+ @if sgs-get('debug') != false {
14
+ $columns: if($columns != null, $columns, sgs-get('grids'));
15
+ $gutter: if($gutter != null, $gutter, sgs-get('gutters'));
16
+ $gutter-style: if($gutter-style != null, $gutter-style, sgs-get('gutter styles'));
62
17
 
63
- $vert: nth($overlay-switch-position, 1);
64
- $horz: nth($overlay-switch-position, 2);
65
-
66
- head {
67
- display: block;
68
- position: fixed;
69
- #{$horz}: 10px;
70
- #{$vert}: 10px;
71
- z-index: 99;
72
- color: #333;
73
- text-shadow: 0 0 3px #fff;
74
- @include transition(all .4s);
75
- &::before {
76
- content: "||||";
77
- display: block;
78
- padding: 10px 14px;
79
- letter-spacing: -1;
80
- font: {
81
- family: sans-serif;
82
- size: 26px;
83
- weight: bold;
84
- }
85
- }
86
- &:hover {
87
- color: #333;
88
- text-shadow: 1px 1px #fff;
89
- ~ body #{$selector} {
90
- position: unquote($overlay-position);
91
- }
92
- ~ #{$selector}::after,
93
- ~ body #{$selector}::after {
94
- content: " ";
95
- position: absolute;
96
- top: 0;
97
- left: 0;
98
- right: 0;
99
- bottom: 0;
100
- height: 100%;
101
- width: 100%;
102
- @include background-grid($columns, $gutter, $color);
103
- }
104
- }
18
+ @include background-build($columns, $gutter, $gutter-style, $color)
105
19
  }
106
20
  }
107
21
 
108
- // -----------------------------------------------
109
- // Grid Toggle
110
-
111
- @mixin grid-toggle(
112
- $columns: false,
113
- $gutter: false,
114
- $color: $background-grid-color
115
- ) {
22
+ @function background-map($columns, $gutters, $gutter-styles) {
23
+ $Grids: ();
24
+ $Gutters: ();
25
+ $Styles: ();
116
26
 
117
- [data-development-grid="show"] {
118
- @include background-grid($columns, $gutter, $color);
27
+ @if $columns and type-of($columns) != 'map' {
28
+ $Grids: (-1px: $columns);
29
+ }
30
+ @else {
31
+ $Grids: sgs-get('grids');
119
32
  }
120
- }
121
33
 
122
- // -----------------------------------------------
123
- // Grid Background
34
+ @if $gutters and type-of($gutters) != 'map' {
35
+ $Gutters: (-1px: $gutters);
36
+ }
37
+ @else {
38
+ $Gutters: sgs-get('gutters');
39
+ }
124
40
 
125
- @mixin background-grid(
126
- $columns: false,
127
- $gutter: false,
128
- $color: $background-grid-color
129
- ) {
41
+ @if $gutter-styles and type-of($gutter-styles) != 'map' {
42
+ $Styles: (-1px: $gutter-styles);
43
+ }
44
+ @else {
45
+ $Styles: sgs-get('gutter styles');
46
+ }
130
47
 
131
- @if $show-grid-backgrounds {
132
- $background-length: length($grids);
48
+ // Build 1st Depth Map
49
+ $Holder: ();
133
50
 
134
- @if (not $columns) {
135
- $grid: find-grid($columns);
136
- @include background-build($grid, $gutter, $color);
137
- @if ($grid != $grids) {
138
- @for $i from 2 through $background-length {
139
- $mq: nth(nth($grids, $i), 2);
140
- $grid: nth(nth($grids, $i), 1);
51
+ // Grids
52
+ @each $k, $v in $Grids {
53
+ $Holder: map-merge($Holder, ($k: ('grid': $v)));
54
+ }
55
+ // Gutters
56
+ @each $k, $v in $Gutters {
57
+ $Grid: map-get($Holder, $k);
58
+
59
+ $Map: ('gutter': $v);
60
+ @if $Grid != null {
61
+ $Grid: map-get($Grid, 'grid');
62
+ @if $Grid != null {
63
+ $Map: map-merge($Map, ('grid': $Grid));
64
+ }
65
+ }
141
66
 
142
- @include breakpoint($mq) {
143
- @include background-build($grid, $gutter, $color);
144
- }
145
- }
67
+ $Holder: map-merge($Holder, ($k: $Map));
68
+ }
69
+ // Style
70
+ @each $k, $v in $Styles {
71
+ $Grid: map-get($Holder, $k);
72
+ $Gutter: map-get($Holder, $k);
73
+
74
+ $Map: ('style': $v);
75
+ @if $Grid != null {
76
+ $Grid: map-get($Grid, 'grid');
77
+ @if $Grid != null {
78
+ $Map: map-merge($Map, ('grid': $Grid));
146
79
  }
147
80
  }
148
- @else {
149
- @include background-build($columns, $gutter, $color);
81
+ @if $Gutter != null {
82
+ $Gutter: map-get($Gutter, 'gutter');
83
+ @if $Gutter != null {
84
+ $Map: map-merge($Map, ('gutter': $Gutter));
85
+ }
150
86
  }
151
87
 
152
-
88
+ $Holder: map-merge($Holder, ($k: $Map));
153
89
  }
154
- }
155
-
156
- @mixin background-build($columns, $gutter, $color) {
157
- $columns: find-grid($columns);
158
- $gutter: find-gutter($gutter);
159
90
 
160
- $gutter-style: find-gutter-style();
161
- $fixed-gutter: fixed-gutter($columns, $gutter);
162
- $split: index($gutter-style, split);
91
+ $Holder: sort-map($Holder);
92
+ $Return: ();
163
93
 
164
- $widths: ();
165
- $colors: ();
94
+ // Build full stack for each breakpoint
95
+ @for $i from 1 through length($Holder) {
96
+ $Key: nth(nth($Holder, $i), 1);
97
+ $Value: nth(nth($Holder, $i), 2);
166
98
 
167
- $length: length($columns);
168
- $symmetric: false;
169
- @if type-of($columns) == 'number' or $length == 1 {
170
- $symmetric: true;
171
- $length: nth($columns, 1);
172
- }
173
-
174
- @for $i from 1 through $length {
175
-
176
- @if ($fixed-gutter or $gutter == 0) and $i % 2 == 0 {
177
- $color: darken($color, 15%);
178
- }
179
- @else if ($fixed-gutter or $gutter == 0) and $i % 2 == 1 {
180
- $color: lighten($color, 15%);
99
+ $Previous: ();
100
+ @if $i > 1 {
101
+ $Previous: nth(nth($Return, $i - 1), 2);
181
102
  }
182
103
 
183
- $column-span: column-span($i, 1, $columns);
184
- $gutter-span: 0;
185
- @if $fixed-gutter {
186
- $gutter-span: $column-span;
187
- }
188
- @else {
189
- $gutter-span: $column-span + gutter-span($gutter, $columns);
104
+ @if not map-has-key($Value, 'grid') {
105
+ $Sort-Grid: map-get($Previous, 'grid');
106
+ $Value: map-merge($Value, ('grid': $Sort-Grid));
190
107
  }
191
108
 
192
- @if $i == 1 and $split and not $fixed-gutter {
193
- $widths: append($widths, gutter-span($gutter, $columns) / 2);
194
- $colors: append($colors, rgba($color, .25));
109
+ @if not map-has-key($Value, 'gutter') {
110
+ $Sort-Gutter: map-get($Previous, 'gutter');
111
+ $Value: map-merge($Value, ('gutter': $Sort-Gutter));
195
112
  }
196
113
 
197
- @if $i != $columns {
198
- $widths: append($widths, $column-span);
199
- $colors: append($colors, rgba($color, .5));
200
- $widths: append($widths, $gutter-span);
201
- $colors: append($colors, rgba($color, .25));
202
- }
203
- @else {
204
- $widths: append($widths, $column-span);
205
- $colors: append($colors, rgba($color, .5));
114
+ @if not map-has-key($Value, 'style') {
115
+ $Sort-Style: map-get($Previous, 'style');
116
+ $Value: map-merge($Value, ('style': $Sort-Style));
206
117
  }
207
118
 
208
- @if $i == $length and $split and not $fixed-gutter {
209
- $widths: append($widths, $column-span + gutter-span($gutter, $columns) / 2);
210
- $colors: append($colors, rgba($color, .25));
211
- }
119
+ $Return: map-merge($Return, ($Key: $Value));
212
120
  }
213
121
 
214
- @include background-gradient-generate($widths, $colors);
215
-
122
+ @return $Return;
216
123
  }
217
124
 
218
- //////////////////////////////
219
- // Get the columns
220
- //////////////////////////////
221
- @mixin background-gradient-generate($widths, $colors, $direction: left) {
222
- @if (length($widths) != length($colors)) and (length($widths) != length($colors) - 1) {
223
- @warn 'You either need an equal number of widths and colors or one less width than color, in which case it is assumed that the last width goes to 100%. Please provide the correct amount of widths and colors.';
224
- }
225
- @else {
226
- $stops: ();
125
+ @mixin background-build($columns, $gutters, $gutter-styles, $color) {
126
+ $Background-Map: background-map($columns, $gutters, $gutter-styles);
127
+ $Display: true;
128
+
129
+ $Column-Color: $color;
130
+ $Inverse-Column-Color: mix(black, $color, 15%);
131
+ $Gutter-Color: mix(white, $color, 25%);
132
+ $Direction: named-direction(sgs-get('direction'));
133
+
134
+ $encodeMap:(
135
+ '%"':'%25%22',
136
+ '<':'%3C',
137
+ ' ':'%20',
138
+ '=':'%3D',
139
+ '\"':'%22',
140
+ ':':'%3A',
141
+ '/':'%2F',
142
+ '.':'%2E',
143
+ '>':'%3E',
144
+ '#':'%23',
145
+ '-':'%2D'
146
+ );
147
+
148
+ @each $bkpt, $def in $Background-Map {
149
+ $Grid: map-get($def, 'grid');
150
+ $Gutter: map-get($def, 'gutter');
151
+ $Style: map-get($def, 'style');
152
+
153
+ $Grid-Count: column-count($Grid);
154
+
155
+ $SVG: '<svg xmlns="http://www.w3.org/2000/svg">';
156
+
157
+ $Gutter-Width: gutter-span($Gutter, $Grid, $Style);
158
+ @if unit($Gutter-Width) != '%' and unit($Gutter-Width) != '' {
159
+ $Gutter-Width: 0%;
160
+ }
227
161
 
228
- @if length($widths) == (length($colors) - 1) {
229
- $widths: append($widths, 100%);
162
+ @if $Style == 'fixed' {
163
+ $Gutter-Width: 0%;
230
164
  }
165
+ $Counter-Width: 0%;
166
+ $holder: ();
231
167
 
232
- $i: 1;
168
+ @for $i from 1 through $Grid-Count {
169
+ $Holder-Gradient: ();
170
+ $Loop-Width: column-span(1, $i, $Grid, $Gutter, $Style);
233
171
 
234
- @each $width in $widths {
235
- $width: nth($widths, $i);
236
- $color: nth($colors, $i);
172
+ @if index($Style, 'split') and $i == 1 {
173
+ $SVG: $SVG + '<rect x="#{$Counter-Width}" fill="#{$Gutter-Color}" width="#{$Gutter-Width / 2}" height="100%"/>';
174
+ $Counter-Width: ($Gutter-Width / 2);
175
+ }
237
176
 
238
- @if $i == 1 {
239
- $stops: join($stops, build-gradient-piece($width, $color), comma);
177
+ $Loop-Color: $Column-Color;
178
+ @if (index($Style, 'fixed') or $Gutter-Width == 0%) and ($i % 2 == 0 ) {
179
+ $Loop-Color: $Inverse-Column-Color;
240
180
  }
241
- @else {
242
- $position: nth($widths, $i - 1);
243
- $stops: join($stops, build-gradient-piece($width, $color, $position), comma);
181
+
182
+ @if $i != $Grid-Count {
183
+ @if unit($Counter-Width) == unit($Loop-Width) {
184
+ $SVG: $SVG + '<rect x="#{$Counter-Width}" fill="#{$Loop-Color}" width="#{$Loop-Width}" height="100%"/>';
185
+ $Counter-Width: $Counter-Width + $Loop-Width;
186
+ $SVG: $SVG + '<rect x="#{$Counter-Width}" fill="#{$Gutter-Color}" width="#{$Gutter-Width}" height="100%"/>';
187
+ $Counter-Width: $Counter-Width + $Gutter-Width;
188
+ }
189
+ @else {
190
+ $Display: false;
191
+ }
192
+
244
193
  }
194
+ @else if $i == 1 {
195
+ @if unit($Counter-Width) == unit($Loop-Width) {
196
+ $SVG: $SVG + '<rect x="#{$Counter-Width}" fill="#{$Loop-Color}" width="#{$Loop-Width}" height="100%"/>';
197
+ $SVG: $SVG + '<rect x="#{$Loop-Width}" fill="#{$Gutter-Color}" width="#{$Gutter-Width}" height="100%"/>';
198
+ $Counter-Width: $Counter-Width + $Loop-Width + $Gutter-Width;
199
+ }
200
+ @else {
201
+ $Display: false;
202
+ }
245
203
 
246
- $i: $i + 1;
204
+ }
205
+ @else if $i == $Grid-Count and index($Style, 'split') {
206
+ @if unit($Counter-Width) == unit($Loop-Width) {
207
+ $SVG: $SVG + '<rect x="#{$Counter-Width}" fill="#{$Loop-Color}" width="#{$Loop-Width}" height="100%"/>';
208
+ $Counter-Width: $Counter-Width + $Loop-Width;
209
+ $SVG: $SVG + '<rect x="#{$Counter-Width}" fill="#{$Gutter-Color}" width="#{$Gutter-Width / 2}" height="100%"/>';
210
+ }
211
+ @else {
212
+ $Display: false;
213
+ }
214
+ }
215
+ @else {
216
+ $SVG: $SVG + '<rect x="#{$Counter-Width}" fill="#{$Loop-Color}" width="#{$Loop-Width}" height="100%"/>';
217
+ }
247
218
  }
248
219
 
249
- // @debug $stops;
220
+ $SVG: $SVG + '</svg>';
250
221
 
222
+ @each $char, $code in $encodeMap {
223
+ $index: str-index($SVG, $char);
224
+ @while $index {
225
+ $index: str-index($SVG, $char);
226
+ $SVG: str-slice($SVG, 1, $index - 1) + $code + str-slice($SVG, $index + str-length($char));
227
+ $index: str-index($SVG, $char);
228
+ }
229
+ }
251
230
 
231
+ @if $Display {
252
232
 
253
- @include background-image(
254
- linear-gradient($direction, $stops)
255
- );
233
+ @if $bkpt != -1px {
234
+ @include breakpoint($bkpt) {
235
+ background-image: url('data:image/svg+xml,' + $SVG);
236
+ }
237
+ }
238
+ @else {
239
+ background-image: url('data:image/svg+xml,' + $SVG);
240
+ }
241
+ }
242
+ @else {
243
+ @warn 'Cannot generate a Background Grid for grid `#{$Grid}` with gutters `#{$Gutter}` and gutter style `#{$Style}`';
244
+ }
256
245
  }
257
246
  }
258
-
259
- @function build-gradient-piece($width, $color, $position: false) {
260
- @if ($position == 'last') {
261
- @return ($color $width);
262
- }
263
- @else if ($position != false) {
264
- @return $color $position, $color $width;
265
- }
266
- @else {
267
- @return $color, $color $width;
268
- }
269
- }
data/stylesheets/singularitygs/helpers/_box-sizing.scss CHANGED
@@ -1,41 +1,26 @@
1
- @import "compass/css3/shared";
2
-
3
- $box-sizing-extend: true !default;
4
- $toolkit-box-sizing: false !default;
5
-
6
1
  //////////////////////////////
7
- // Updated Box Sizing mixin, allowing for behavior support
2
+ // Box Sizing Mixin
8
3
  //////////////////////////////
9
- @mixin box-sizing($bs, $extend: $box-sizing-extend) {
10
- @if $extend and $bs == 'border-box' {
11
- @extend %border-box;
12
- }
13
- @else if $extend and $bs == 'content-box' {
14
- @extend %content-box;
4
+ $box-sizing-extend: false !default;
5
+
6
+ @mixin box-sizing($value, $extend: $box-sizing-extend) {
7
+ @if $extend {
8
+ @extend %singularity-#{$value};
15
9
  }
16
10
  @else {
17
- $bs: unquote($bs);
18
- @include experimental(box-sizing, $bs,
19
- -moz, -webkit, not -o, not -ms, not -khtml, official
20
- );
21
-
22
- @if $bs == 'border-box' {
23
- @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
24
- *behavior: stylesheet-url("../behaviors/box-sizing/boxsizing.php");
25
- }
26
- }
27
- @else {
28
- *behavior: none;
29
- }
11
+ -moz-box-sizing: $value;
12
+ box-sizing: $value;
30
13
  }
31
14
  }
32
15
 
33
- @if not $toolkit-box-sizing {
34
- %border-box {
35
- @include box-sizing('border-box', false);
36
- }
16
+ %singularity-content-box {
17
+ @include box-sizing(content-box, false);
18
+ }
37
19
 
38
- %content-box {
39
- @include box-sizing('content-box', false);
40
- }
20
+ %singularity-border-box {
21
+ @include box-sizing(border-box, false);
22
+ }
23
+
24
+ %singularity-padding-box {
25
+ @include box-sizing(padding-box, false);
41
26
  }
data/stylesheets/singularitygs/helpers/_clearfix.scss CHANGED
@@ -1,106 +1,21 @@
1
- $legacy-support-for-ie6: false !default;
2
- $legacy-support-for-ie7: false !default;
3
- $legacy-support-for-mozilla: false !default;
4
-
5
1
  //////////////////////////////
6
- // Massive Clearfix Mixin
7
- //
8
- // Clearfix mixin for all of your clearfixing needs. Will choose the right mixin for you.
9
- // Can choose whether to extend or to write.
2
+ // Clearfix Mixin
10
3
  //////////////////////////////
11
4
  $clearfix-extend: false !default;
12
- $clearfix-direct: false !default;
13
- $toolkit-clearfix: false !default;
14
-
15
- @mixin clearfix($extend: $clearfix-extend, $direct: $clearfix-direct) {
16
- @if (($legacy-support-for-ie6 or $legacy-support-for-ie7) and not $legacy-support-for-mozilla and $direct != 'legacy' and $direct != 'modern') or ($direct == 'micro') {
17
- @if $extend {
18
- @extend %clearfix-micro;
19
- }
20
- @else {
21
- /* for IE 6/7 */
22
- *zoom: expression(this.runtimeStyle.zoom="1", this.appendChild(document.createElement("br")).style.cssText="clear:both;font:0/0 serif");
23
- /* non-JS fallback */
24
- *zoom: 1;
25
-
26
- &:before,
27
- &:after {
28
- content: "";
29
- display: table;
30
- }
31
-
32
- &:after {
33
- clear: both;
34
- }
35
- }
36
- }
37
- @else if (($legacy-support-for-ie6 or $legacy-support-for-ie7) and $legacy-support-for-mozilla and $direct != 'micro' and $direct != 'modern') or ($direct == 'legacy') {
38
- @if $extend {
39
- @extend %clearfix-legacy;
40
- }
41
- @else {
42
- /* for IE 6/7 */
43
- *zoom: expression(this.runtimeStyle.zoom="1", this.appendChild(document.createElement("br")).style.cssText="clear:both;font:0/0 serif");
44
- /* non-JS fallback */
45
- *zoom: 1;
46
5
 
47
- &:before,
48
- &:after {
49
- content: ".";
50
- display: block;
51
- height: 0;
52
- overflow: hidden;
53
- }
54
-
55
- &:after {
56
- clear: both;
57
- }
58
- }
6
+ @mixin clearfix($extend: $clearfix-extend) {
7
+ @if $extend {
8
+ @extend %singularity-clearfix;
59
9
  }
60
10
  @else {
61
- @if $extend {
62
- @extend %clearfix
63
- }
64
- @else {
65
- &:after {
66
- content: "";
67
- display: table;
68
- clear: both;
69
- }
11
+ &:after {
12
+ content: "";
13
+ display: table;
14
+ clear: both;
70
15
  }
71
16
  }
72
17
  }
73
18
 
74
- @if not $toolkit-clearfix {
75
- //////////////////////////////
76
- // Legacy Clearfix
77
- //
78
- // For when you need full Legacy support, including old IE and old Firefox
79
- //
80
- // From http://www.css-101.org/articles/clearfix/latest-new-clearfix-so-far.php
81
- //////////////////////////////
82
- %clearfix-legacy {
83
- @include clearfix(false, 'legacy');
84
- }
85
-
86
- //////////////////////////////
87
- // Micro Clearfix
88
- //
89
- // For when you need old IE support, but not concerned with old Firefox
90
- // From http://nicolasgallagher.com/better-float-containment-in-ie/
91
- //////////////////////////////
92
- %clearfix-micro {
93
- @include clearfix(false, 'micro');
94
- }
95
-
96
- //////////////////////////////
97
- // Modern Clearfix
98
- //
99
- // Clearfix for modern browsers, especiall when using border-box
100
- //
101
- // From http://www.css-101.org/articles/clearfix/latest-new-clearfix-so-far.php
102
- //////////////////////////////
103
- %clearfix {
104
- @include clearfix(false, 'modern');
105
- }
19
+ %singularity-clearfix {
20
+ @include clearfix(false);
106
21
  }
data/stylesheets/singularitygs/helpers/_columns.scss CHANGED
@@ -1,6 +1,4 @@
1
1
  @function end-row($span, $location, $columns) {
2
- $columns: find-grid($columns);
3
-
4
2
  @if $location == 'last' or $location == 'omega' {
5
3
  @return true;
6
4
  }
@@ -15,7 +13,10 @@
15
13
  }
16
14
 
17
15
  @function start-row($location) {
18
- @if $location == 1 {
16
+ @if $location == 'first' or $location == 'alpha' {
17
+ @return true;
18
+ }
19
+ @else if $location == 1 {
19
20
  @return true;
20
21
  }
21
22
  @else {
data/stylesheets/singularitygs/helpers/_directions.scss CHANGED
@@ -14,6 +14,12 @@
14
14
  @else if $dir == 'rtl' {
15
15
  @return ltr;
16
16
  }
17
+ @else if $dir == 'top' {
18
+ @return bottom;
19
+ }
20
+ @else if $dir == 'bottom' {
21
+ @return top;
22
+ }
17
23
  @else {
18
24
  @warn "#{$dir} is not a direction! Make sure your direction is all lowercase!";
19
25
  @return false;