mirror of
https://github.com/scratchfoundation/scratchx.git
synced 2024-11-26 01:28:15 -05:00
87 lines
2.5 KiB
SCSS
87 lines
2.5 KiB
SCSS
@charset "UTF-8";
|
|
|
|
/// Removes the element's gutter margin, regardless of its position in the grid hierarchy or display property. It can target a specific element, or every `nth-child` occurrence. Works only with `block` layouts.
|
|
///
|
|
/// @param {List} $query [block]
|
|
/// List of arguments. Supported arguments are `nth-child` selectors (targets a specific pseudo element) and `auto` (targets `last-child`).
|
|
///
|
|
/// When passed an `nth-child` argument of type `*n` with `block` display, the omega mixin automatically adds a clear to the `*n+1` th element. Note that composite arguments such as `2n+1` do not support this feature.
|
|
///
|
|
/// **Deprecation warning**: The omega mixin will no longer take a `$direction` argument. To change the layout direction, use `row($direction)` or set `$default-layout-direction` instead.
|
|
///
|
|
/// @example scss - Usage
|
|
/// .element {
|
|
/// @include omega;
|
|
/// }
|
|
///
|
|
/// .nth-element {
|
|
/// @include omega(4n);
|
|
/// }
|
|
///
|
|
/// @example css - CSS Output
|
|
/// .element {
|
|
/// margin-right: 0;
|
|
/// }
|
|
///
|
|
/// .nth-element:nth-child(4n) {
|
|
/// margin-right: 0;
|
|
/// }
|
|
///
|
|
/// .nth-element:nth-child(4n+1) {
|
|
/// clear: left;
|
|
/// }
|
|
|
|
@mixin omega($query: block, $direction: default) {
|
|
$table: belongs-to(table, $query);
|
|
$auto: belongs-to(auto, $query);
|
|
|
|
@if $direction != default {
|
|
@include -neat-warn("The omega mixin will no longer take a $direction argument. To change the layout direction, use the direction(){...} mixin.");
|
|
} @else {
|
|
$direction: get-direction($layout-direction, $default-layout-direction);
|
|
}
|
|
|
|
@if $table {
|
|
@include -neat-warn("The omega mixin no longer removes padding in table layouts.");
|
|
}
|
|
|
|
@if length($query) == 1 {
|
|
@if $auto {
|
|
&:last-child {
|
|
margin-#{$direction}: 0;
|
|
}
|
|
}
|
|
|
|
@else if contains-display-value($query) and $table == false {
|
|
margin-#{$direction}: 0;
|
|
}
|
|
|
|
@else {
|
|
@include nth-child($query, $direction);
|
|
}
|
|
} @else if length($query) == 2 {
|
|
@if $auto {
|
|
&:last-child {
|
|
margin-#{$direction}: 0;
|
|
}
|
|
} @else {
|
|
@include nth-child(nth($query, 1), $direction);
|
|
}
|
|
} @else {
|
|
@include -neat-warn("Too many arguments passed to the omega() mixin.");
|
|
}
|
|
}
|
|
|
|
@mixin nth-child($query, $direction) {
|
|
$opposite-direction: get-opposite-direction($direction);
|
|
|
|
&:nth-child(#{$query}) {
|
|
margin-#{$direction}: 0;
|
|
}
|
|
|
|
@if type-of($query) == number and unit($query) == "n" {
|
|
&:nth-child(#{$query}+1) {
|
|
clear: $opposite-direction;
|
|
}
|
|
}
|
|
}
|