Dialtone
GitHub Repo
Codepen Template

Divide Width

Utilities for controlling the divider width between an element's child items.

Classes

ClassOutput
d-divide-y > * + * --divide-y-reverse: 0;
border-top: calc( 1 px * (1 - var(--divide-y-reverse)) ) solid currentColor !important;
border-bottom: calc( 1 px * var(--divide-y-reverse) ) solid currentColor !important;
d-divide-y0 > * + * --divide-y-reverse: 0;
border-top: calc( 0 px * (1 - var(--divide-y-reverse)) ) solid currentColor !important;
border-bottom: calc( 0 px * var(--divide-y-reverse) ) solid currentColor !important;
d-divide-y2 > * + * --divide-y-reverse: 0;
border-top: calc( 2 px * (1 - var(--divide-y-reverse)) ) solid currentColor !important;
border-bottom: calc( 2 px * var(--divide-y-reverse) ) solid currentColor !important;
d-divide-y4 > * + * --divide-y-reverse: 0;
border-top: calc( 4 px * (1 - var(--divide-y-reverse)) ) solid currentColor !important;
border-bottom: calc( 4 px * var(--divide-y-reverse) ) solid currentColor !important;
d-divide-x > * + * --divide-x-reverse: 0;
border-right: calc( 1 px * (1 - var(--divide-x-reverse)) ) solid currentColor !important;
border-left: calc( 1 px * var(--divide-x-reverse) ) solid currentColor !important;
d-divide-x0 > * + * --divide-x-reverse: 0;
border-right: calc( 0 px * (1 - var(--divide-x-reverse)) ) solid currentColor !important;
border-left: calc( 0 px * var(--divide-x-reverse) ) solid currentColor !important;
d-divide-x2 > * + * --divide-x-reverse: 0;
border-right: calc( 2 px * (1 - var(--divide-x-reverse)) ) solid currentColor !important;
border-left: calc( 2 px * var(--divide-x-reverse) ) solid currentColor !important;
d-divide-x4 > * + * --divide-x-reverse: 0;
border-right: calc( 4 px * (1 - var(--divide-x-reverse)) ) solid currentColor !important;
border-left: calc( 4 px * var(--divide-x-reverse) ) solid currentColor !important;

Default Width

Use d-divide-{y|x} to create a 1px divider between an element's child items.

<div class="d-divide-y d-divide-purple-400">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
<div class="d-divide-x d-divide-purple-400">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Changing the divider width

Use d-divide-{y|x}{n} to change the divider width between an element's child items.

<div class="d-divide-x0 ...">...</div>
<div class="d-divide-x2 ...">...</div>
<div class="d-divide-x4 ...">...</div>

Reversing the divider direction

If an element's flex-direction is reversed, apply d-divide-{y|x}-reverse to reverse the divider placement between an element's child items.

<div class="d-fd-column-reverse d-divide-y d-divide-y-reverse">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
Last Updated: