Add fill option to divider
This commit is contained in:
parent
98543f60eb
commit
a5a2c1ac77
@ -1,15 +1,15 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import { Divider } from "theme-ui";
|
import { Divider } from "theme-ui";
|
||||||
|
|
||||||
function StyledDivider({ vertical, color }) {
|
function StyledDivider({ vertical, color, fill }) {
|
||||||
return (
|
return (
|
||||||
<Divider
|
<Divider
|
||||||
my={vertical ? 0 : 2}
|
my={vertical ? 0 : 2}
|
||||||
mx={vertical ? 2 : 0}
|
mx={vertical ? 2 : 0}
|
||||||
bg={color}
|
bg={color}
|
||||||
sx={{
|
sx={{
|
||||||
height: vertical ? "24px" : "2px",
|
height: vertical ? (fill ? "100%" : "24px") : "2px",
|
||||||
width: vertical ? "2px" : "24px",
|
width: vertical ? "2px" : fill ? "100%" : "24px",
|
||||||
borderRadius: "2px",
|
borderRadius: "2px",
|
||||||
opacity: 0.5,
|
opacity: 0.5,
|
||||||
}}
|
}}
|
||||||
@ -20,6 +20,7 @@ function StyledDivider({ vertical, color }) {
|
|||||||
StyledDivider.defaultProps = {
|
StyledDivider.defaultProps = {
|
||||||
vertical: false,
|
vertical: false,
|
||||||
color: "text",
|
color: "text",
|
||||||
|
fill: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
export default StyledDivider;
|
export default StyledDivider;
|
||||||
|
Loading…
Reference in New Issue
Block a user