Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| bd83d28400 |
@@ -16,6 +16,20 @@ export function BorderSVG() {
|
|||||||
</svg>
|
</svg>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function BorderBottomLineSVG() {
|
||||||
|
return (
|
||||||
|
<svg className="dashed-border-svg" aria-hidden="true">
|
||||||
|
<line
|
||||||
|
className="dashed-border-bottom-line"
|
||||||
|
x1="0"
|
||||||
|
x2="100%"
|
||||||
|
y1="100%"
|
||||||
|
y2="100%"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
and now you are ready to make your borders
|
and now you are ready to make your borders
|
||||||
@@ -32,6 +46,7 @@ and now you are ready to make your borders
|
|||||||
- dashed-border
|
- dashed-border
|
||||||
- dashed-border-svg
|
- dashed-border-svg
|
||||||
- dashed-border-rect
|
- dashed-border-rect
|
||||||
|
- dashed-border-bottom-line
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
- dashed-border-color-[color]
|
- dashed-border-color-[color]
|
||||||
|
|||||||
@@ -256,6 +256,17 @@ const dashedBorderPlugin: ReturnType<typeof plugin> = plugin(
|
|||||||
height: INNER_SIZE,
|
height: INNER_SIZE,
|
||||||
rx: ADJUSTED_RADIUS,
|
rx: ADJUSTED_RADIUS,
|
||||||
},
|
},
|
||||||
|
".dashed-border-bottom-line": {
|
||||||
|
fill: "none",
|
||||||
|
stroke: "var(--tw-dashed-border-color)",
|
||||||
|
"stroke-width": "var(--tw-dashed-border-width)",
|
||||||
|
"stroke-dasharray":
|
||||||
|
"var(--tw-dashed-border-length) var(--tw-dashed-border-gap)",
|
||||||
|
"stroke-dashoffset": "var(--tw-dashed-border-offset)",
|
||||||
|
// "stroke-linecap": "butt",
|
||||||
|
"vector-effect": "non-scaling-stroke",
|
||||||
|
transform: `translateY(${INSET})`,
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const spacingRawValues = theme("spacing") as
|
const spacingRawValues = theme("spacing") as
|
||||||
@@ -339,17 +350,27 @@ const dashedBorderPlugin: ReturnType<typeof plugin> = plugin(
|
|||||||
}
|
}
|
||||||
const ALL_TRANSITION_PROPERTIES =
|
const ALL_TRANSITION_PROPERTIES =
|
||||||
"stroke-dasharray, stroke-dashoffset, stroke-width, stroke, rx, x, y, width, height";
|
"stroke-dasharray, stroke-dashoffset, stroke-width, stroke, rx, x, y, width, height";
|
||||||
|
const ALL_LINE_TRANSITION_PROPERTIES =
|
||||||
|
"stroke-dasharray, stroke-dashoffset, stroke-width, stroke, transform";
|
||||||
addUtilities({
|
addUtilities({
|
||||||
".dashed-border.transition .dashed-border-rect": createTransitionStyles(
|
".dashed-border.transition .dashed-border-rect": createTransitionStyles(
|
||||||
ALL_TRANSITION_PROPERTIES,
|
ALL_TRANSITION_PROPERTIES,
|
||||||
),
|
),
|
||||||
|
".dashed-border.transition .dashed-border-bottom-line":
|
||||||
|
createTransitionStyles(ALL_LINE_TRANSITION_PROPERTIES),
|
||||||
".dashed-border.transition-all .dashed-border-rect":
|
".dashed-border.transition-all .dashed-border-rect":
|
||||||
createTransitionStyles(ALL_TRANSITION_PROPERTIES),
|
createTransitionStyles(ALL_TRANSITION_PROPERTIES),
|
||||||
|
".dashed-border.transition-all .dashed-border-bottom-line":
|
||||||
|
createTransitionStyles(ALL_LINE_TRANSITION_PROPERTIES),
|
||||||
".dashed-border.transition-colors .dashed-border-rect":
|
".dashed-border.transition-colors .dashed-border-rect":
|
||||||
createTransitionStyles("stroke"),
|
createTransitionStyles("stroke"),
|
||||||
|
".dashed-border.transition-colors .dashed-border-bottom-line":
|
||||||
|
createTransitionStyles("stroke"),
|
||||||
|
|
||||||
".dashed-border.transition-dashed-border .dashed-border-rect":
|
".dashed-border.transition-dashed-border .dashed-border-rect":
|
||||||
createTransitionStyles(ALL_TRANSITION_PROPERTIES),
|
createTransitionStyles(ALL_TRANSITION_PROPERTIES),
|
||||||
|
".dashed-border.transition-dashed-border .dashed-border-bottom-line":
|
||||||
|
createTransitionStyles(ALL_LINE_TRANSITION_PROPERTIES),
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user