tweak-tools
Version:
Tweak your React projects until awesomeness
92 lines (91 loc) • 2.35 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.TitleContainer = exports.StyledFilterInput = exports.FilterWrapper = exports.StyledTitleWithFilter = exports.Icon = void 0;
const styles_1 = require("../../styles");
const iconWidth = 40;
exports.Icon = (0, styles_1.styled)('i', {
$flexCenter: '',
width: iconWidth,
userSelect: 'none',
cursor: 'pointer',
'> svg': {
fill: '$highlight1',
transition: 'transform 350ms ease, fill 250ms ease',
},
'&:hover > svg': {
fill: '$highlight3',
},
variants: { active: { true: { '> svg': { fill: '$highlight2' } } } },
});
exports.StyledTitleWithFilter = (0, styles_1.styled)('div', {
display: 'flex',
alignItems: 'stretch',
justifyContent: 'space-between',
height: '$titleBarHeight',
variants: {
mode: {
drag: {
cursor: 'grab',
},
},
},
});
exports.FilterWrapper = (0, styles_1.styled)('div', {
$flex: '',
position: 'relative',
width: '100%',
overflow: 'hidden',
transition: 'height 250ms ease',
color: '$highlight3',
paddingLeft: '$md',
[`> ${exports.Icon}`]: {
height: 30,
},
variants: {
toggled: { true: { height: 30 }, false: { height: 0 } },
},
});
exports.StyledFilterInput = (0, styles_1.styled)('input', {
$reset: '',
flex: 1,
position: 'relative',
height: 30,
width: '100%',
backgroundColor: 'transparent',
fontSize: '10px',
borderRadius: '$root',
'&:focus': {},
'&::placeholder': {
color: '$highlight2',
},
});
exports.TitleContainer = (0, styles_1.styled)('div', {
touchAction: 'none',
$flexCenter: '',
flex: 1,
'> svg': {
fill: '$highlight1',
},
color: '$highlight1',
variants: {
drag: {
true: {
$draggable: '',
'> svg': {
transition: 'fill 250ms ease',
},
'&:hover': {
color: '$highlight3',
},
'&:hover > svg': {
fill: '$highlight3',
},
},
},
filterEnabled: {
false: {
paddingRight: iconWidth,
},
},
},
});