@dnanpm/styleguide
Version:
DNA Styleguide repository provides the set of components and theme object used in various DNA projects.
70 lines (65 loc) • 2.08 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var styledComponents = require('styled-components');
var theme = require('../../../themes/theme.js');
var navigation = require('../../../themes/themeComponents/navigation.js');
const TooltipWrapper = styledComponents.styled.button `
position: relative;
border: none;
margin: 0;
padding: 0;
overflow: visible;
background: transparent;
color: ${p => (p.$isHighlighted ? theme.default.color.text.pink : 'inherit')};
font: inherit;
line-height: normal;
-webkit-font-smoothing: inherit;
-moz-osx-font-smoothing: inherit;
-webkit-appearance: none;
cursor: pointer;
width: ${p => (p.$isLoggedIn ? '6.25rem' : '100%')};
border-left: ${p => (p.$isLoggedIn ? `2px solid ${theme.default.color.line.L03}` : 'none')};
&:active,
&:focus {
> svg,
> span {
color: ${theme.default.color.text.pink};
}
}
&:focus-visible {
outline: 0;
border-radius: ${theme.default.radius.s};
box-shadow:
0px 0px 0px 2px ${theme.default.color.focus.light},
0px 0px 0px 4px ${theme.default.color.focus.dark};
> svg,
> span {
color: ${theme.default.color.text.black};
}
}
> svg {
align-content: center;
display: flex;
margin: 0 auto;
@media (min-width: ${p => p.$collapseSize + 1}px) {
height: 1.625em;
width: 1.625em;
}
}
> span {
display: none;
@media (min-width: ${p => p.$collapseSize + 1}px) {
font-size: ${theme.default.fontSize.xs};
font-weight: ${theme.default.fontWeight.medium};
width: 100%;
display: block;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
max-width: ${navigation.IconContainerWidth};
margin: auto;
}
}
`;
exports.TooltipWrapper = TooltipWrapper;
exports.default = TooltipWrapper;