UNPKG

@activecollab/components

Version:

ActiveCollab Components

24 lines 1.8 kB
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