76 lines
2.1 KiB
JavaScript
76 lines
2.1 KiB
JavaScript
import Scrollbar from "../scrollbar";
|
|
import styled, { css } from "styled-components";
|
|
import NoUserSelect from "../utils/commonStyles";
|
|
import Base from "../themes/base";
|
|
|
|
const StyledScrollbar = styled(Scrollbar)`
|
|
width: ${(props) => props.theme.tabsContainer.scrollbar.width} !important;
|
|
height: ${(props) => props.theme.tabsContainer.scrollbar.height} !important;
|
|
`;
|
|
|
|
StyledScrollbar.defaultProps = { theme: Base };
|
|
|
|
const NavItem = styled.div`
|
|
position: relative;
|
|
white-space: nowrap;
|
|
display: flex;
|
|
`;
|
|
NavItem.defaultProps = { theme: Base };
|
|
|
|
const Label = styled.div`
|
|
height: ${(props) => props.theme.tabsContainer.label.height};
|
|
border-radius: ${(props) => props.theme.tabsContainer.label.borderRadius};
|
|
min-width: ${(props) => props.theme.tabsContainer.label.minWidth};
|
|
width: ${(props) => props.theme.tabsContainer.label.width};
|
|
|
|
.title_style {
|
|
text-align: center;
|
|
margin: ${(props) => props.theme.tabsContainer.label.title.margin};
|
|
overflow: ${(props) => props.theme.tabsContainer.label.title.overflow};
|
|
|
|
${NoUserSelect}
|
|
}
|
|
|
|
${(props) =>
|
|
props.isDisabled &&
|
|
css`
|
|
pointer-events: none;
|
|
`}
|
|
|
|
${(props) =>
|
|
props.selected
|
|
? css`
|
|
cursor: default;
|
|
background-color: ${(props) =>
|
|
props.theme.tabsContainer.label.backgroundColor};
|
|
.title_style {
|
|
color: ${(props) => props.theme.tabsContainer.label.title.color};
|
|
}
|
|
`
|
|
: css`
|
|
&:hover {
|
|
cursor: pointer;
|
|
background-color: ${(props) =>
|
|
props.theme.tabsContainer.label.hoverBackgroundColor};
|
|
.title_style {
|
|
color: ${(props) =>
|
|
props.theme.tabsContainer.label.title.hoverColor};
|
|
}
|
|
}
|
|
`}
|
|
|
|
${(props) =>
|
|
props.isDisabled &&
|
|
props.selected &&
|
|
css`
|
|
background-color: ${(props) =>
|
|
props.theme.tabsContainer.label.disableBackgroundColor};
|
|
.title_style {
|
|
color: ${(props) => props.theme.tabsContainer.label.title.disableColor};
|
|
}
|
|
`}
|
|
`;
|
|
|
|
Label.defaultProps = { theme: Base };
|
|
export { NavItem, Label, StyledScrollbar };
|