Background
Background Border v1.0.9
Utilities for sets background border to an element with flexible control over the border spacing, size, angle and length.
Class
class | css |
---|---|
bg-border {length} {size} {space} {angle} | background-image: repeating-linear-gradient(var(--bg-border-angle-left), currentColor, currentColor var(--bg-border-length), transparent var(--bg-border-length), transparent var(--bg-border-space), currentColor var(--bg-border-space)), repeating-linear-gradient(var(--bg-border-angle-top), currentColor, currentColor var(--bg-border-length), transparent var(--bg-border-length), transparent var(--bg-border-space), currentColor var(--bg-border-space)), repeating-linear-gradient(var(--bg-border-angle-right), currentColor, currentColor var(--bg-border-length), transparent var(--bg-border-length), transparent var(--bg-border-space), currentColor var(--bg-border-space)), repeating-linear-gradient(var(--bg-border-angle-bottom), currentColor, currentColor var(--bg-border-length), transparent var(--bg-border-length), transparent var(--bg-border-space), currentColor var(--bg-border-space)); background-size: var(--bg-border-width) 100%, 100% var(--bg-border-width), var(--bg-border-width) 100%, 100% var(--bg-border-width); background-position: 0 0, 0 0, 100% 0, 0 100%; background-repeat: no-repeat |
class | css |
---|---|
length-10 | --bg-border-length: 10 |
length-20 | --bg-border-length: 20 |
length-30 | --bg-border-length: 30 |
length-40 | --bg-border-length: 40 |
length-50 | --bg-border-length: 50 |
length-60 | --bg-border-length: 60 |
length-70 | --bg-border-length: 70 |
length-80 | --bg-border-length: 80 |
class | css |
---|---|
size-6 | --bg-border-size: 6px |
size-9 | --bg-border-size: 9px |
size-12 | --bg-border-size: 12px |
size-14 | --bg-border-size: 14px |
size-18 | --bg-border-size: 18px |
size-24 | --bg-border-size: 24px |
size-32 | --bg-border-size: 32px |
class | css |
---|---|
space-10 | --bg-border-space: 10px |
space-20 | --bg-border-space: 20px |
space-30 | --bg-border-space: 30px |
space-40 | --bg-border-space: 40px |
space-50 | --bg-border-space: 50px |
space-60 | --bg-border-space: 60px |
space-70 | --bg-border-space: 70px |
space-80 | --bg-border-space: 80px |
class | css |
---|---|
angle-45 | --bg-border-angle: 45deg |
-angle-45 | --bg-border-angle: -45deg |
angle-60 | --bg-border-angle: 60deg |
-angle-60 | --bg-border-angle: -60deg |
Usage
Set basic background border to an element.
<!-- Example -->
<y class="bg-border length-20 size-9 space-30 angle-45 ... h-32 w-56">
...
</y>
Set background border with color by using text-{color}
utility (See Text Color).
<!-- Example -->
<y class="bg-border length-20 size-9 space-30 angle-45 text-amber-400 ... h-32 w-56">
...
</y>
Set background border solid.
<!-- Example -->
<y class="bg-border length-10 size-6 space-10 angle-45 ... h-32 w-56">
...
</y>
Set background border solid and thicker.
<!-- Example -->
<y class="bg-border length-10 size-32 space-10 angle-45 ... h-32 w-56">
...
</y>
Customize More
// @file: `src/_plugins.scss`
@include plugin(
(
utility: 'length',
//variant: 'responsive',
property: '--bg-border-length',
modifier: (
'90': '90',
'100': '100'
//...
)
),
(
utility: 'size',
//variant: 'responsive',
property: '--bg-border-size',
modifier: (
'64': '64px',
'72': '72px'
//...
)
),
(
utility: 'space',
//variant: 'responsive',
property: '--bg-border-space',
modifier: (
'90': '90px',
'100': '100px'
//...
)
),
(
utility: 'angle',
//variant: 'responsive',
property: '--bg-border-angle',
modifier: (
'90': '80deg',
'80': '90deg'
//...
)
)
)
Variant
Variant | Enabled | Responsive |
---|---|---|
Default | Yes | |
Dark Theme | ||
hover | ||
group-hover | ||
focus | ||
focus-within | ||
active | ||
visited | ||
checked | ||
disabled |