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 |
body { |
2 |
display: flex; |
3 |
flex-direction: column; |
4 |
} |
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 |
body { |
2 |
display: flex; |
3 |
flex-direction: row; |
4 |
} |
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 |
body, .row { |
2 |
display: flex; |
3 |
flex-direction: row; |
4 |
flex: 1; |
5 |
} |
6 |
.column { |
7 |
display: flex; |
8 |
flex-direction: column; |
9 |
flex: 1; |
10 |
} |
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 |
body { |
2 |
display: flex; |
3 |
flex-direction: column; |
4 |
gap: 1lh; |
5 |
} |
6 |
.column { |
7 |
display: flex; |
8 |
flex-direction: column; |
9 |
} |
10 |
div[direction-="y"] { |
11 |
height: 2lh; |
12 |
} |
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 |
body { |
2 |
display: flex; |
3 |
flex-direction: column; |
4 |
gap: 1lh; |
5 |
} |
6 |
.column { |
7 |
display: flex; |
8 |
flex-direction: column; |
9 |
} |
10 |
div[direction-="y"] { |
11 |
height: 2lh; |
12 |
} |
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 |
body { |
2 |
display: flex; |
3 |
flex-direction: column; |
4 |
} |
5 |
div[is-="separator"] { |
6 |
--separator-width: 1px; |
7 |
--separator-color: orange; |
8 |
--separator-background: #444; |
9 |
} |
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"] {
/* ... */
}