@kubit-ui-web/react-components
Version:
Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience
60 lines • 2.48 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CheckboxHelpContentTextStyled = exports.CheckboxHelpContentStyled = exports.CheckboxIsErrorStyled = exports.CheckboxHelperContentStyled = exports.CheckedIcon = exports.CheckboxFrameStyled = exports.CheckboxStyled = exports.CheckboxIconLabelWrapperStyled = exports.CheckboxContainerStyled = void 0;
const styled_components_1 = __importDefault(require("styled-components"));
const getStyles_1 = require("../../utils/getStyles/getStyles");
exports.CheckboxContainerStyled = styled_components_1.default.div `
width: fit-content;
${props => (0, getStyles_1.getStyles)(props.styles?.container)}
`;
exports.CheckboxIconLabelWrapperStyled = styled_components_1.default.div `
display: flex;
flex-direction: row;
align-items: flex-start;
${props => (0, getStyles_1.getStyles)(props.styles?.iconLabelWrapper)}
`;
exports.CheckboxStyled = styled_components_1.default.input `
appearance: none;
cursor: pointer;
display: grid;
place-content: center;
&:disabled {
cursor: default;
}
${props => (0, getStyles_1.getStyles)(props.styles?.checkbox)}
`;
exports.CheckboxFrameStyled = styled_components_1.default.div `
position: relative;
height: fit-content;
width: fit-content;
${props => (0, getStyles_1.getStyles)(props.styles?.frameContainer)}
`;
exports.CheckedIcon = styled_components_1.default.span `
display: ${({ $isChecked }) => ($isChecked ? 'inline-flex' : 'none')};
pointer-events: none;
align-items: center;
justify-content: center;
position: absolute;
height: ${({ styles }) => styles?.checkedIcon?.height};
width: ${({ styles }) => styles?.checkedIcon?.width};
background-color: transparent;
top: 0;
left: 0;
`;
exports.CheckboxHelperContentStyled = styled_components_1.default.div `
${props => (0, getStyles_1.getStyles)(props.styles?.extraContentWrapper)}
`;
exports.CheckboxIsErrorStyled = styled_components_1.default.div `
${props => (0, getStyles_1.getStyles)(props.styles?.errorWrapper)}
small {
flex: 1;
}
`;
exports.CheckboxHelpContentStyled = styled_components_1.default.div ``;
exports.CheckboxHelpContentTextStyled = styled_components_1.default.div `
${props => (0, getStyles_1.getStyles)(props.styles?.helpContentTextWrapper)}
`;
//# sourceMappingURL=checkbox.styled.js.map