UNPKG

@equinor/eds-core-react

Version:

The React implementation of the Equinor Design System

30 lines (27 loc) 1.21 kB
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 };