Borders
Dissect v1.0.8
Utilities for sets bottom border on each child elements of its parent.
Class
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))) |
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)) |
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.
<!-- Example -->
<y class="flex dissect-x-4">
<y>1</y>
<y>2</y>
<y>3</y>
</y>
Set borders in between the elements vertically.
<!-- Example -->
<y class="dissect-y-4">
<y>1</y>
<y>2</y>
<y>3</y>
</y>
Variant
Variant | Enabled | Responsive |
---|---|---|
Default | Yes | |
Dark Theme | ||
hover | ||
group-hover | ||
focus | ||
focus-within | ||
active | ||
visited | ||
checked | ||
disabled |