You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
46 lines
1.6 KiB
46 lines
1.6 KiB
3 years ago
|
"use strict";
|
||
|
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
||
|
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
||
|
|
};
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
exports.StyledNavigationElement = exports.getHoverColor = exports.getSelectedColor = exports.getBg = void 0;
|
||
|
|
const styled_components_1 = __importDefault(require("styled-components"));
|
||
|
|
const box_1 = __importDefault(require("../../atoms/box"));
|
||
|
|
const typography_1 = require("../../atoms/typography");
|
||
|
|
const utils_1 = require("../../utils");
|
||
|
|
exports.getBg = (props) => (props.isOpen ? utils_1.themeGet('colors', 'grey20')(props) : 'transparent');
|
||
|
|
exports.getSelectedColor = (props) => utils_1.themeGet('colors', props.isSelected ? 'primary100' : 'grey80')(props);
|
||
|
|
exports.getHoverColor = (props) => utils_1.themeGet('colors', props.isOpen ? 'grey80' : 'primary100')(props);
|
||
|
|
exports.StyledNavigationElement = styled_components_1.default(box_1.default) `
|
||
|
|
background-color: ${exports.getBg};
|
||
|
|
padding: ${utils_1.themeGet('space', 'md', '-1px')} ${utils_1.themeGet('space', 'lg')};
|
||
|
|
text-decoration: none;
|
||
|
|
color: ${exports.getSelectedColor};
|
||
|
|
cursor: pointer;
|
||
|
|
&:hover {
|
||
|
|
color: ${exports.getHoverColor};
|
||
|
|
}
|
||
|
|
& > * {
|
||
|
|
align-self: center;
|
||
|
|
}
|
||
|
|
& > .icon-box {
|
||
|
|
flex-shrink: 0;
|
||
|
|
padding-right: ${utils_1.themeGet('space', 'lg')};
|
||
|
|
& svg {
|
||
|
|
fill: ${exports.getSelectedColor};
|
||
|
|
}
|
||
|
|
}
|
||
|
|
& > ${typography_1.Title} {
|
||
|
|
flex-grow: 1;
|
||
|
|
min-width: 0;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
}
|
||
|
|
& > .arrow-box {
|
||
|
|
flex-shrink: 0;
|
||
|
|
& svg {
|
||
|
|
fill: ${utils_1.themeGet('colors', 'grey40')};
|
||
|
|
}
|
||
|
|
}
|
||
|
|
`;
|