tweak-tools/dist/components/Select/StyledSelect.js

Tweak your React projects until awesomeness

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PresentationalSelect = exports.NativeSelect = exports.SelectContainer = void 0;
const styles_1 = require("../../styles");
exports.SelectContainer = (0, styles_1.styled)('div', {
    $flexCenter: '',
    position: 'relative',
    '> svg': {
        pointerEvents: 'none',
        position: 'absolute',
        right: '$md',
    },
});
exports.NativeSelect = (0, styles_1.styled)('select', {
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    opacity: 0,
});
exports.PresentationalSelect = (0, styles_1.styled)('div', {
    display: 'flex',
    alignItems: 'center',
    width: '100%',
    height: '$rowHeight',
    backgroundColor: '$elevation3',
    borderRadius: '$sm',
    padding: '0 $sm',
    cursor: 'pointer',
    [`${exports.NativeSelect}:focus + &`]: {
        $focusStyle: '',
    },
    [`${exports.NativeSelect}:hover + &`]: {
        $hoverStyle: '',
    },
});