mirror of
https://github.com/danbee/chess
synced 2025-03-04 08:39:06 +00:00
323 lines
10 KiB
SCSS
323 lines
10 KiB
SCSS
/// Select all children from the first to `$num`.
|
||
/// @group with-arguments
|
||
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||
/// @param {number} $num - id of the child
|
||
@mixin first($num) {
|
||
@if $num == 1 {
|
||
&:first-child {
|
||
@content;
|
||
}
|
||
} @else {
|
||
&:nth-child(-n + #{$num}) {
|
||
@content;
|
||
}
|
||
}
|
||
}
|
||
|
||
/// Select all children from the last to `$num`.
|
||
/// @group with-arguments
|
||
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||
/// @param {number} $num - id of the child
|
||
@mixin last($num) {
|
||
&:nth-last-child(-n + #{$num}) {
|
||
@content;
|
||
}
|
||
}
|
||
|
||
/// Select all children after the first to `$num`.
|
||
/// @group with-arguments
|
||
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||
/// @param {number} $num - id of the child
|
||
@mixin after-first($num) {
|
||
&:nth-child(n + #{$num + 1}) {
|
||
@content;
|
||
}
|
||
}
|
||
|
||
/// Select all children before `$num` from the last.
|
||
/// @group with-arguments
|
||
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||
/// @param {number} $num - id of the child
|
||
@mixin from-end($num) {
|
||
&:nth-last-child(#{$num}) {
|
||
@content;
|
||
}
|
||
}
|
||
|
||
/// Select all children between `$first` and `$last`.
|
||
/// @group with-arguments
|
||
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||
@mixin between($first, $last) {
|
||
&:nth-child(n + #{$first}):nth-child(-n + #{$last}) {
|
||
@content;
|
||
}
|
||
}
|
||
|
||
/// Select all even children between `$first` and `$last`.
|
||
/// @group with-arguments
|
||
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||
@mixin even-between($first, $last) {
|
||
&:nth-child(even):nth-child(n + #{$first}):nth-child(-n + #{$last}) {
|
||
@content;
|
||
}
|
||
}
|
||
|
||
/// Select all odd children between `$first` and `$last`.
|
||
/// @group with-arguments
|
||
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||
@mixin odd-between($first, $last) {
|
||
&:nth-child(odd):nth-child(n + #{$first}):nth-child(-n + #{$last}) {
|
||
@content;
|
||
}
|
||
}
|
||
|
||
/// Select all `$num` children between `$first` and `$last`.
|
||
/// @group with-arguments
|
||
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||
@mixin n-between($num, $first, $last) {
|
||
&:nth-child(#{$num}n):nth-child(n + #{$first}):nth-child(-n + #{$last}) {
|
||
@content;
|
||
}
|
||
}
|
||
|
||
|
||
/// Select all children but `$num`.
|
||
/// @group with-arguments
|
||
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||
/// @param {number} $num - id of the child
|
||
@mixin all-but($num) {
|
||
&:not(:nth-child(#{$num})) {
|
||
@content;
|
||
}
|
||
}
|
||
|
||
/// Select children each `$num`.
|
||
/// @group with-arguments
|
||
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||
/// @param {number} $num - id of the child
|
||
/// @alias every
|
||
@mixin each($num) {
|
||
&:nth-child(#{$num}n) {
|
||
@content;
|
||
}
|
||
}
|
||
|
||
/// Select children each `$num`.
|
||
/// @group with-arguments
|
||
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||
/// @param {number} $num - id of the child
|
||
@mixin every($num) {
|
||
&:nth-child(#{$num}n) {
|
||
@content;
|
||
}
|
||
}
|
||
|
||
/// Select the `$num` child from the start and the `$num` child from the last.
|
||
/// @group with-arguments
|
||
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||
/// @param {number} $num - id of the child
|
||
@mixin from-first-last($num) {
|
||
&:nth-child(#{$num}),
|
||
&:nth-last-child(#{$num}) {
|
||
@content;
|
||
}
|
||
}
|
||
|
||
|
||
/// Select the item in the middle of `$num` child. Only works with odd number
|
||
/// chain.
|
||
/// @group with-arguments
|
||
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||
/// @param {number} $num - id of the child
|
||
@mixin middle($num) {
|
||
&:nth-child(#{round($num * 0.5)}) {
|
||
@content;
|
||
}
|
||
}
|
||
|
||
|
||
/// Select all children between the `$num` first and the `$num` last.
|
||
/// @group with-arguments
|
||
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||
/// @param {number} $num - id of the child
|
||
@mixin all-but-first-last($num) {
|
||
&:nth-child(n + #{$num}):nth-last-child(n + #{$num}) {
|
||
@content;
|
||
}
|
||
}
|
||
|
||
|
||
/// This quantity-query mixin will only select the first of `$limit` items. It will not
|
||
/// work if there is not as much as item as you set in `$limit`.
|
||
/// @group Quantity queries
|
||
/// @param {number} $limit
|
||
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||
@mixin first-of($limit) {
|
||
&:nth-last-child(#{$limit}):first-child {
|
||
@content;
|
||
}
|
||
}
|
||
|
||
/// This quantity-query mixin will only select the last of `$limit` items. It will not
|
||
/// if there is not as much as item as you set in `$limit`.
|
||
/// @group Quantity queries
|
||
/// @param {number} $limit
|
||
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||
@mixin last-of($limit) {
|
||
&:nth-of-type(#{$limit}):nth-last-of-type(1) {
|
||
@content;
|
||
}
|
||
}
|
||
|
||
/// This quantity-query mixin will select every items if there is at least `$num` items. It will not
|
||
/// if there is not as much as item as you set in `$num`.
|
||
/// @group Quantity queries
|
||
/// @param {number} $limit
|
||
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||
@mixin at-least($num) {
|
||
$selector: &;
|
||
$child: nth(nth($selector, -1), -1);
|
||
|
||
&:nth-last-child(n + #{$num}),
|
||
&:nth-last-child(n + #{$num}) ~ #{$child} {
|
||
@content;
|
||
}
|
||
}
|
||
|
||
/// This quantity-query mixin will select every items if there is at most `$num` items. It will not
|
||
/// if there is not as much as item as you set in `$num`.
|
||
/// @group Quantity queries
|
||
/// @param {number} $limit
|
||
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||
@mixin at-most($num) {
|
||
$selector: &;
|
||
$child: nth(nth($selector, -1), -1);
|
||
|
||
&:nth-last-child(-n + #{$num}):first-child,
|
||
&:nth-last-child(-n + #{$num}):first-child ~ #{$child} {
|
||
@content;
|
||
}
|
||
}
|
||
|
||
/// This quantity-query mixin will select every items only if there is between `$min` and `$max` items.
|
||
/// @group Quantity queries
|
||
/// @param {number} $limit
|
||
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||
@mixin in-between($min, $max) {
|
||
$selector: &;
|
||
$child: nth(nth($selector, -1), -1);
|
||
|
||
&:nth-last-child(n + #{$min}):nth-last-child(-n + #{$max}):first-child,
|
||
&:nth-last-child(n + #{$min}):nth-last-child(-n + #{$max}):first-child ~ #{$child} {
|
||
@content;
|
||
}
|
||
}
|
||
|
||
/// Select the first exact child
|
||
/// @group no-arguments
|
||
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||
@mixin first-child() {
|
||
&:first-of-type {
|
||
@content
|
||
}
|
||
}
|
||
|
||
/// Select the last exact child
|
||
/// @group no-arguments
|
||
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||
@mixin last-child() {
|
||
&:last-of-type {
|
||
@content
|
||
}
|
||
}
|
||
|
||
/// Select all even children.
|
||
/// @group no-arguments
|
||
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||
@mixin even() {
|
||
&:nth-child(even) {
|
||
@content;
|
||
}
|
||
}
|
||
|
||
/// Select all odd children.
|
||
/// @group no-arguments
|
||
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||
@mixin odd() {
|
||
&:nth-child(odd) {
|
||
@content;
|
||
}
|
||
}
|
||
|
||
/// Select only the first and last child.
|
||
/// @group no-arguments
|
||
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||
@mixin first-last() {
|
||
&:first-child,
|
||
&:last-child {
|
||
@content;
|
||
}
|
||
}
|
||
|
||
/// Will only select the child if it’s unique.
|
||
/// @group no-arguments
|
||
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||
/// @alias only
|
||
@mixin unique() {
|
||
&:only-child {
|
||
@content;
|
||
}
|
||
}
|
||
|
||
/// Will only select the child if it’s unique.
|
||
/// @group no-arguments
|
||
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||
@mixin only() {
|
||
&:only-child {
|
||
@content;
|
||
}
|
||
}
|
||
|
||
/// Will only select children if they are not unique. Meaning if there is at
|
||
/// least 2 children, the style is applied.
|
||
/// @group no-arguments
|
||
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||
@mixin not-unique() {
|
||
&:not(:only-child) {
|
||
@content;
|
||
}
|
||
}
|
||
|
||
|
||
/// This mixin is used to automatically sort z-index in numerical order. But it
|
||
/// can also sort them in anti-numerical order, depending the parameters you use.
|
||
/// @group using functions
|
||
/// @content [Write the style you want to apply to the children, and it will be added within the @content directive]
|
||
/// @param {number} $num - Number of children
|
||
/// @param {string} $direction [forward] - Direction of the sort
|
||
/// @param {number} $index [0] - Index of the sorting
|
||
@mixin child-index($num, $direction: 'forward', $index: 0) {
|
||
@for $i from 1 through $num {
|
||
@if ($direction == 'forward') {
|
||
&:nth-child(#{$i}) {
|
||
z-index: order-index($i, $index);
|
||
@content;
|
||
}
|
||
} @else if ($direction == 'backward') {
|
||
&:nth-last-child(#{$i}) {
|
||
z-index: order-index($i, $index);
|
||
@content;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/// Used by the child-index mixin. It will returned the proper sorted numbers
|
||
/// depending on the `$index` value.
|
||
/// @access private
|
||
/// @param {number} $num - Number of children
|
||
/// @param {number} $index - Index of the sorting
|
||
@function order-index($i, $index) {
|
||
@return ($index + $i);
|
||
}
|