Added buttongroup component
This commit is contained in:
29
components/ButtonGroup.tsx
Normal file
29
components/ButtonGroup.tsx
Normal file
@@ -0,0 +1,29 @@
|
||||
import { styled } from "../stitches.config";
|
||||
import { StyledButton } from "./Button";
|
||||
|
||||
const ButtonGroup = styled("div", {
|
||||
display: "flex",
|
||||
marginLeft: "1px",
|
||||
[`& ${StyledButton}`]: {
|
||||
marginLeft: "-1px",
|
||||
px: "$4",
|
||||
zIndex: 2,
|
||||
position: "relative",
|
||||
"&:hover, &:focus": {
|
||||
zIndex: 200,
|
||||
},
|
||||
},
|
||||
[`& ${StyledButton}:not(:only-of-type):not(:first-child):not(:last-child)`]: {
|
||||
borderRadius: 0,
|
||||
},
|
||||
[`& ${StyledButton}:first-child:not(:only-of-type)`]: {
|
||||
borderBottomRightRadius: 0,
|
||||
borderTopRightRadius: 0,
|
||||
},
|
||||
[`& ${StyledButton}:last-child:not(:only-of-type)`]: {
|
||||
borderBottomLeftRadius: 0,
|
||||
borderTopLeftRadius: 0,
|
||||
},
|
||||
});
|
||||
|
||||
export default ButtonGroup;
|
||||
Reference in New Issue
Block a user