Borders
Dissect
Utilities for sets bottom border on each child elements of its parent.
Variant
Responsive Dark Mode Light Mode Reduce-Motion Selection-Hover Expand First-Last-Selection First-Letter Child-Selection Portrait Landscape Fullscreen Hover Group-Hover Focus Group-Focus Focus-Visible Focus-Within Active Visited Checked Disabled
API
class | css |
---|---|
dissect-x-0 | --dissect-x-reverse: 0; border-right-width: calc(0 * var(--dissect-x-reverse)); border-left-width: calc(0 * calc(1 - var(--dissect-x-reverse))) |
dissect-x-2 | --dissect-x-reverse: 0; border-right-width: calc(2px * var(--dissect-x-reverse)); border-left-width: calc(2px * calc(1 - var(--dissect-x-reverse))) |
dissect-x-4 | --dissect-x-reverse: 0; border-right-width: calc(4px * var(--dissect-x-reverse)); border-left-width: calc(4px * calc(1 - var(--dissect-x-reverse))) |
dissect-x-8 | --dissect-x-reverse: 0; border-right-width: calc(8px * var(--dissect-x-reverse)); border-left-width: calc(8px * calc(1 - var(--dissect-x-reverse))) |
class | css |
---|---|
dissect-y-0 | --dissect-y-reverse: 0; border-top-width: calc(0 * calc(1 - var(--dissect-y-reverse))); border-bottom-width: calc(0 * var(--dissect-y-reverse)) |
dissect-y-2 | --dissect-y-reverse: 0; border-top-width: calc(2px * calc(1 - var(--dissect-y-reverse))); border-bottom-width: calc(2px * var(--dissect-y-reverse)) |
dissect-y-4 | --dissect-y-reverse: 0; border-top-width: calc(4px * calc(1 - var(--dissect-y-reverse))); border-bottom-width: calc(4px * var(--dissect-y-reverse)) |
dissect-y-8 | --dissect-y-reverse: 0; border-top-width: calc(8px * calc(1 - var(--dissect-y-reverse))); border-bottom-width: calc(8px * var(--dissect-y-reverse)) |
dissect-x | --dissect-x-reverse: 0; border-right-width: calc(1px * var(--divide-x-reverse)); border-left-width: calc(1px * calc(1 - var(--divide-x-reverse))) |
dissect-y | --dissect-y-reverse: 0; border-top-width: calc(1px * calc(1 - var(--divide-y-reverse))); border-bottom-width: calc(1px * var(--divide-y-reverse)) |
class | css |
---|---|
dissect-x-reverse | --dissect-x-reverse: 1 |
dissect-y-reverse | --dissect-y-reverse: 1 |
Usage
Set borders in between the elements horizontally, must companion with flex utility.
<div class="flex dissect-x-4">
<div>...</div>
<div>...</div>
<div>...</div>
</div>
HTML
.dummy {
@extend
.flex,
.dissect-x-4;
}
SCSS
Set borders in between the elements vertically.
<div class="dissect-y-4">
<div>...</div>
<div>...</div>
<div>...</div>
</div>
HTML
.dummy {
@extend
.dissect-y-4;
}
SCSS