77 lines
2.1 KiB
JavaScript
77 lines
2.1 KiB
JavaScript
import styled from "styled-components";
|
|
import { tablet, desktop } from "../utils/device";
|
|
import Base from "../themes/base";
|
|
|
|
const StyledGroupButtonsMenu = styled.div`
|
|
box-sizing: border-box;
|
|
position: sticky;
|
|
top: ${(props) => props.theme.groupButtonsMenu.top};
|
|
background: ${(props) => props.theme.groupButtonsMenu.background};
|
|
box-shadow: ${(props) => props.theme.groupButtonsMenu.boxShadow};
|
|
height: ${(props) => props.theme.groupButtonsMenu.height};
|
|
list-style: none;
|
|
padding: ${(props) => props.theme.groupButtonsMenu.padding};
|
|
width: ${(props) => props.theme.groupButtonsMenu.width};
|
|
white-space: nowrap;
|
|
|
|
display: ${(props) => (props.visible ? "block" : "none")};
|
|
z-index: ${(props) => props.theme.groupButtonsMenu.zIndex};
|
|
|
|
@media ${desktop} {
|
|
margin-top: ${(props) => props.theme.groupButtonsMenu.marginTop};
|
|
}
|
|
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
`;
|
|
StyledGroupButtonsMenu.defaultProps = { theme: Base };
|
|
|
|
const CloseButton = styled.div`
|
|
position: absolute;
|
|
right: ${(props) => props.theme.groupButtonsMenu.closeButton.right};
|
|
top: ${(props) => props.theme.groupButtonsMenu.closeButton.top};
|
|
width: ${(props) => props.theme.groupButtonsMenu.closeButton.width};
|
|
height: ${(props) => props.theme.groupButtonsMenu.closeButton.height};
|
|
padding: ${(props) => props.theme.groupButtonsMenu.closeButton.padding};
|
|
|
|
@media ${tablet} {
|
|
right: 3px;
|
|
}
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
|
|
&:before,
|
|
&:after {
|
|
background-color: ${(props) =>
|
|
props.theme.groupButtonsMenu.closeButton.hoverBackgroundColor};
|
|
}
|
|
}
|
|
|
|
&:before,
|
|
&:after {
|
|
position: absolute;
|
|
left: 15px;
|
|
content: " ";
|
|
height: 20px;
|
|
width: 1px;
|
|
background-color: ${(props) =>
|
|
props.theme.groupButtonsMenu.closeButton.backgroundColor};
|
|
}
|
|
|
|
&:before {
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
&:after {
|
|
transform: rotate(-45deg);
|
|
}
|
|
`;
|
|
CloseButton.defaultProps = { theme: Base };
|
|
|
|
const GroupMenuWrapper = styled.div`
|
|
display: inline-block;
|
|
`;
|
|
|
|
export { StyledGroupButtonsMenu, CloseButton, GroupMenuWrapper };
|