A horizontal or vertical separator
| 1 |
<p>The quick brown fox obliterates</p> |
| 2 |
<div is-="separator"></div> |
| 3 |
<p>the lazy dog</p> |
| 4 |
|
| 1 |
|
| 2 |
body { |
| 3 |
display: flex; |
| 4 |
flex-direction: column; |
| 5 |
} |
| 6 |
|
Import
@import '@webtui/css/components/separator.css';
Usage
<!-- Horizontal -->
<div is-="separator"></div>
<div is-="separator" direction-="horizontal"></div>
<div is-="separator" direction-="x"></div>
<!-- Vertical -->
<div is-="separator" direction-="vertical"></div>
<div is-="separator" direction-="y"></div>
If direction- is not specified, separators are horizontal by default.
Examples
Vertical
| 1 |
<p>The lazy brown<br/>dog licks</p> |
| 2 |
<div is-="separator" direction-="vertical"></div> |
| 3 |
<p>the yucky<br/>fox</p> |
| 4 |
|
| 1 |
|
| 2 |
body { |
| 3 |
display: flex; |
| 4 |
flex-direction: row; |
| 5 |
} |
| 6 |
|
Caps
Use the cap- attribute to control how the ends of the separator behave
Bisecting Caps
cap-="bisect" extends the edges of the separator by 0.5ch making it ideal to use alongside the box- utility
| 1 |
|
| 2 |
<div class="column"> |
| 3 |
<div box-="square" class="column"> |
| 4 |
<p>Default</p> |
| 5 |
<div is-="separator"></div> |
| 6 |
<p>Separator</p> |
| 7 |
</div> |
| 8 |
<div box-="square" class="column"> |
| 9 |
<p>Bisecting</p> |
| 10 |
<div is-="separator" cap-="bisect"></div> |
| 11 |
<p>Separator</p> |
| 12 |
</div> |
| 13 |
</div> |
| 14 |
<div class="column"> |
| 15 |
<div box-="square" class="row"> |
| 16 |
<p>Default</p> |
| 17 |
<div is-="separator" direction-="y"></div> |
| 18 |
<p>Separator</p> |
| 19 |
</div> |
| 20 |
<div box-="square" class="row"> |
| 21 |
<p>Bisecting</p> |
| 22 |
<div is-="separator" direction-="y" cap-="bisect"></div> |
| 23 |
<p>Separator</p> |
| 24 |
</div> |
| 25 |
</div> |
| 26 |
|
| 1 |
|
| 2 |
body, |
| 3 |
.row { |
| 4 |
display: flex; |
| 5 |
flex-direction: row; |
| 6 |
flex: 1; |
| 7 |
} |
| 8 |
.column { |
| 9 |
display: flex; |
| 10 |
flex-direction: column; |
| 11 |
flex: 1; |
| 12 |
} |
| 13 |
|
Edge Caps
cap-="edge" clips off the edges of the separator by 0.5ch making it ideal for corners
| 1 |
|
| 2 |
<div class="column"> |
| 3 |
<span>bisect</span> |
| 4 |
<div is-="separator" cap-="bisect" direction-="y"></div> |
| 5 |
<div is-="separator" cap-="edge"></div> |
| 6 |
<span>edge</span> |
| 7 |
</div> |
| 8 |
<div class="column"> |
| 9 |
<span>bisect</span> |
| 10 |
<div is-="separator" cap-="bisect" direction-="y"></div> |
| 11 |
<div is-="separator"></div> |
| 12 |
<span>default</span> |
| 13 |
</div> |
| 14 |
<div class="column"> |
| 15 |
<span>bisect</span> |
| 16 |
<div is-="separator" cap-="bisect" direction-="y"></div> |
| 17 |
<div is-="separator" cap-="bisect"></div> |
| 18 |
<span>bisect</span> |
| 19 |
</div> |
| 20 |
|
| 1 |
|
| 2 |
body { |
| 3 |
display: flex; |
| 4 |
flex-direction: column; |
| 5 |
gap: 1lh; |
| 6 |
} |
| 7 |
.column { |
| 8 |
display: flex; |
| 9 |
flex-direction: column; |
| 10 |
} |
| 11 |
div[direction-='y'] { |
| 12 |
height: 2lh; |
| 13 |
} |
| 14 |
|
Start and End Caps
You can specify two values for the cap- attribute to control the start and end of the separator
<div is-="separator" cap-="edge bisect"></div>
<div is-="separator" cap-="default edge"></div>
<div is-="separator" cap-="bisect default"></div>
| 1 |
|
| 2 |
<div box-="square" class="column"> |
| 3 |
<div class="column"> |
| 4 |
<span>edge bisect</span> |
| 5 |
<div is-="separator" cap-="edge bisect"></div> |
| 6 |
</div> |
| 7 |
<div class="column"> |
| 8 |
<span>default edge</span> |
| 9 |
<div is-="separator" cap-="default edge"></div> |
| 10 |
</div> |
| 11 |
<div class="column"> |
| 12 |
<span>bisect default</span> |
| 13 |
<div is-="separator" cap-="bisect default"></div> |
| 14 |
</div> |
| 15 |
</div> |
| 16 |
|
| 1 |
|
| 2 |
body { |
| 3 |
display: flex; |
| 4 |
flex-direction: column; |
| 5 |
gap: 1lh; |
| 6 |
} |
| 7 |
.column { |
| 8 |
display: flex; |
| 9 |
flex-direction: column; |
| 10 |
} |
| 11 |
div[direction-='y'] { |
| 12 |
height: 2lh; |
| 13 |
} |
| 14 |
|
Reference
Properties
Use the following custom CSS properties to style separators
--separator-width: The width of the separator line--separator-color: The color of the separator line--separator-background: The background color of the separator behind the line
| 1 |
<p>The quick green dog</p> |
| 2 |
<div is-="separator"></div> |
| 3 |
<p>eats the lazy fox</p> |
| 1 |
|
| 2 |
body { |
| 3 |
display: flex; |
| 4 |
flex-direction: column; |
| 5 |
} |
| 6 |
div[is-='separator'] { |
| 7 |
--separator-width: 1px; |
| 8 |
--separator-color: orange; |
| 9 |
--separator-background: #444; |
| 10 |
} |
| 11 |
|
Extending
To extend the Separator stylesheet, define a CSS rule on the components layer
@layer components {
input[type='checkbox'] {
/* ... */
}
}
Scope
- All elements with the
is-~="separator" selector
input[type='checkbox'] {
/* ... */
}