@activecollab/components
Version:
ActiveCollab Components
24 lines • 1.8 kB
JavaScript
import styled, { css } from "styled-components";
import { BoxSizingStyle } from "../BoxSizingStyle";
export const StyledRadioInput = styled.input.withConfig({
displayName: "Styles__StyledRadioInput",
componentId: "sc-1xh9uc2-0"
})(["display:none;"]);
StyledRadioInput.displayName = "StyledRadioInput";
export const StyledRadioLabel = styled.label.withConfig({
displayName: "Styles__StyledRadioLabel",
componentId: "sc-1xh9uc2-1"
})(["", ""], {
"display": "inline-flex",
"alignItems": "center"
});
StyledRadioLabel.displayName = "StyledRadioLabel";
export const StyledRadioButton = styled.div.withConfig({
displayName: "Styles__StyledRadioButton",
componentId: "sc-1xh9uc2-2"
})(["", " ", " height:16px;width:16px;position:relative;svg{cursor:pointer;fill:transparent;}circle:first-child{transition-duration:0.2s;stroke:var(--color-theme-500);}circle:last-child{transition-duration:0.2s;transform-origin:center;transform:scale(0);fill:var(--color-secondary-500);}input:focus ~ ", "{circle:first-child{stroke:var(--color-secondary);}}input:disabled ~ ", "{pointer-events:none;opacity:0.5;}", " ", " input:checked ~ ", "{circle:first-child{stroke:var(--color-secondary);}circle:last-child{transform:scale(1);fill:var(--color-secondary);}}"], BoxSizingStyle, {
"display": "inline-flex",
"alignItems": "center"
}, StyledRadioLabel, StyledRadioLabel, props => props.$isControlled !== true && css(["input:hover ~ ", "{circle:first-child{stroke:var(--color-secondary);}circle:last-child{transform:scale(1);}}"], StyledRadioLabel), props => props.$isHovered && css(["", "{circle:first-child{stroke:var(--color-secondary);}circle:last-child{transform:scale(1);}}"], StyledRadioLabel), StyledRadioLabel);
StyledRadioButton.displayName = "StyledRadioButton";
//# sourceMappingURL=Styles.js.map