@equinor/eds-core-react
Version:
The React implementation of the Equinor Design System
30 lines (27 loc) • 1.21 kB
JavaScript
import styled, { css } from 'styled-components';
import { outlineTemplate } from '@equinor/eds-utils';
const BaseInputWrapper = styled.span.withConfig({
displayName: "Switchstyles__BaseInputWrapper",
componentId: "sc-x39lde-0"
})(({
theme: {
width,
height
}
}) => css(["width:", ";height:", ";border-radius:50%;position:relative;grid-area:input;"], width, height));
const BaseInput = styled.input.attrs(({
type = 'checkbox'
}) => ({
type
})).withConfig({
displayName: "Switchstyles__BaseInput",
componentId: "sc-x39lde-1"
})(({
disabled,
theme
}) => css(["appearance:none;width:100%;height:100%;grid-area:input;margin:0;position:relative;z-index:1;cursor:", ";&:focus{outline:none;}&[data-focus-visible-added]:focus + span{", "}&:focus-visible + span{", "}"], disabled ? 'not-allowed' : 'pointer', outlineTemplate(theme.states.focus.outline), outlineTemplate(theme.states.focus.outline)));
const GridWrapper = styled.span.withConfig({
displayName: "Switchstyles__GridWrapper",
componentId: "sc-x39lde-2"
})(["display:inline-grid;vertical-align:middle;grid:[input] 1fr / [input] 1fr;place-items:center;isolation:isolate;"]);
export { BaseInput, BaseInputWrapper, GridWrapper };