sass/susy/language/susy/_rows.scss in susy-2.0.0.alpha.6 vs sass/susy/language/susy/_rows.scss in susy-2.0.0.beta.1
- old
+ new
@@ -1,103 +1,66 @@
// Row Start & End
// ===============
-// Row
-// ---
-// Apply to any layout element that should force a new layout row.
-// - [$flow] : ltr | rtl
-@mixin row(
- $flow: susy-get(flow)
-) {
- @include susy-clearfix;
+
+// Break
+// -----
+// Apply to any element that should force a line break.
+@mixin break {
clear: both;
}
-// Unrow
-// -----
-// Cancel the row() effect, e.g. when using media queries.
-// - [$flow]: ltr | rtl
-@mixin unrow {
+
+// NoBreak
+// -------
+// Cancel the break() effect, e.g. when using media queries.
+@mixin nobreak {
clear: none;
- &:after {
- content: none;
- display: inline;
- clear: none;
- }
}
+
// Full
// ----
// - [$span]: <span settings>
@mixin full(
- $span: $susy
+ $context: $susy
) {
- $span: parse-span($span);
-
- @include row(susy-get(flow, $span));
- @if is-split($span) and not susy-get(is-container, $span) {
- @include gutters($span);
- }
- float: none;
- width: auto;
+ @include span(full of parse-grid($context) break);
}
+
// First
// -----
// - [$grid]: <settings>
@mixin first(
$grid: $susy
) {
$grid: parse-grid($grid);
$flow: susy-get(flow, $grid);
- $split: if(susy-get(gutter-position, $grid) == split, true, false);
- @if not $split {
+ @if not is-split($grid) {
@include float-first($flow);
}
}
@mixin alpha(
$grid: $susy
) {
@include first($grid);
}
-// Nth-First
-// ---------
-// - [$value] : first | last | only | <math>
-// - [$type] : child | last-child | of-type | last-of-type
-@mixin nth-first(
- $value: first,
- $type: child,
- $grid: $susy
-) {
- &:#{format-nth($value,$type)} { @include first($grid); }
-}
-// Nth-Alpha
-// ---------
-// - [$value] : first | last | only | <math>
-// - [$type] : child | last-child | of-type | last-of-type
-@mixin nth-alpha(
- $value: first,
- $type: child,
- $grid: $susy
-) {
- @include nth-first($value, $type, $grid);
-}
-
// Last
-// -----
+// ----
// - [$grid]: <settings>
@mixin last(
$grid: $susy
) {
$grid: parse-grid($grid);
$output: (
flow: susy-get(flow, $grid),
- margin: if(susy-get(gutter-position, $grid) == split, gutters($grid), 0),
+ margin: if(is-split($grid), gutters($grid), 0),
);
@include float-last($output...);
}
@@ -105,30 +68,60 @@
$grid: $susy
) {
@include last($grid);
}
-// Nth-Last
+
+// Get Edge
// --------
-// - [$value] : first | last | only | <math>
-// - [$type] : child | last-child | of-type | last-of-type
-// - [$grid] : <settings>
-@mixin nth-last(
- $value: last,
- $type: child,
- $grid: $susy
+// Calculate edge value based on location, if possible
+@function get-edge(
+ $span
) {
- &:#{format-nth($value,$type)} { @include last($grid); }
+ $span : parse-span($span);
+ $edge : susy-get(edge, $span);
+
+ @if not $edge {
+ $count: column-count(susy-get(columns, $span));
+ $location: susy-get(location, $span);
+ $n: susy-get(span, $span);
+
+ @if $n == $count {
+ $edge: full;
+ } @else if $location {
+ @if $location == 1 {
+ $edge: if($n == $count, full, first);
+ } @else if $location + $n - 1 == $count {
+ $edge: last;
+ }
+ }
+ }
+
+ @if $edge == alpha or $edge == omega {
+ $edge: if($edge == alpha, first, last);
+ }
+
+ @return $edge;
}
-// Nth-Omega
-// ---------
-// - [$value] : first | last | only | <math>
-// - [$type] : child | last-child | of-type | last-of-type
-// - [$grid] : <settings>
-@mixin nth-omega(
- $value: last,
- $type: child,
- $grid: $susy
+
+// Get Location
+// ------------
+// Calculate location value based on edge, if possible
+@function get-location(
+ $span
) {
- @include nth-last($value, $type, $grid);
+ $span : parse-span($span);
+ $location : susy-get(location, $span);
+ $edge : get-edge($span);
+ $n : susy-get(span, $span);
+
+ @if $edge and not $location and type-of($n) == number and unitless($n) {
+ @if $edge == first {
+ $location: 1;
+ } @else if $edge == last {
+ $location: column-count(susy-get(columns, $span)) - $n + 1;
+ }
+ }
+
+ @return $location
}