ESPTerm web interface submodule, separated to make testing and development easier
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
espterm-front-end/sass/lib/neat/grid/_omega.scss

87 lines
2.5 KiB

@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;
}
}
}