@shopify/polaris/build/esnext/components/Checkbox/Checkbox.css

Shopify’s admin product component library

/* stylelint-disable unit-disallowed-list */
/* stylelint-disable length-zero-no-unit */
/* Breakpoints - Aliases */
/* Breakpoints - Media conditions */
.Polaris-Checkbox_1d6zr { position: relative; margin: var(--p-choice-margin); }

.Polaris-Checkbox__Input_30ock { position: absolute !important; top: 0; width: 0.0625rem !important; height: 0.0625rem !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important; border: 0 !important; white-space: nowrap !important; }

.Polaris-Checkbox__Input_30ock.Polaris-Checkbox--keyFocused_1aqee + .Polaris-Checkbox__Backdrop_1x2i2::after { box-shadow: 0 0 0 0.125rem var(--p-focused); outline: var(--p-border-width-1) solid transparent; }

.Polaris-Checkbox__Input_30ock:active:not(:disabled) + .Polaris-Checkbox__Backdrop_1x2i2, .Polaris-Checkbox__Input_30ock:checked + .Polaris-Checkbox__Backdrop_1x2i2, .Polaris-Checkbox__Input_30ock.Polaris-Checkbox__Input--indeterminate_wtlpx + .Polaris-Checkbox__Backdrop_1x2i2 { border-color: var(--p-interactive); }

.Polaris-Checkbox__Input_30ock:active:not(:disabled) + .Polaris-Checkbox__Backdrop_1x2i2::before, .Polaris-Checkbox__Input_30ock:checked + .Polaris-Checkbox__Backdrop_1x2i2::before, .Polaris-Checkbox__Input_30ock.Polaris-Checkbox__Input--indeterminate_wtlpx + .Polaris-Checkbox__Backdrop_1x2i2::before { opacity: 1; transform: scale(1); }

@media (-ms-high-contrast: active) { .Polaris-Checkbox__Input_30ock:active:not(:disabled) + .Polaris-Checkbox__Backdrop_1x2i2::before, .Polaris-Checkbox__Input_30ock:checked + .Polaris-Checkbox__Backdrop_1x2i2::before, .Polaris-Checkbox__Input_30ock.Polaris-Checkbox__Input--indeterminate_wtlpx + .Polaris-Checkbox__Backdrop_1x2i2::before { border: var(--p-border-width-2) solid windowText; } }

.Polaris-Checkbox__Input_30ock:active:not(:disabled) ~ .Polaris-Checkbox__Icon_yj27d, .Polaris-Checkbox__Input_30ock:checked ~ .Polaris-Checkbox__Icon_yj27d, .Polaris-Checkbox__Input_30ock.Polaris-Checkbox__Input--indeterminate_wtlpx ~ .Polaris-Checkbox__Icon_yj27d { transition: opacity var(--p-duration-150) var(--p-ease), transform var(--p-duration-150) var(--p-ease); transform: translate(-50%, -50%) scale(1); opacity: 1; }

.Polaris-Checkbox__Input_30ock:disabled + .Polaris-Checkbox__Backdrop_1x2i2 { border-color: var(--p-border-disabled); }

.Polaris-Checkbox__Input_30ock:disabled + .Polaris-Checkbox__Backdrop_1x2i2::before { background-color: var(--p-action-secondary-disabled); }

.Polaris-Checkbox__Input_30ock:disabled + .Polaris-Checkbox__Backdrop_1x2i2:hover { cursor: default; }

.Polaris-Checkbox__Input_30ock:disabled:checked + .Polaris-Checkbox__Backdrop_1x2i2 { background: var(--p-border-disabled); }

.Polaris-Checkbox__Input_30ock:disabled:checked + .Polaris-Checkbox__Backdrop_1x2i2::before { background: var(--p-border-disabled); }

.Polaris-Checkbox__Backdrop_1x2i2 { position: relative; border: var(--p-control-border-width) solid var(--p-border-subdued); background-color: var(--p-surface); border-radius: var(--p-border-radius-1); position: relative; display: block; width: 100%; height: 100%; position: relative; }

.Polaris-Checkbox__Backdrop_1x2i2::before { content: ''; position: absolute; top: calc(var(--p-control-border-width)*-1); right: calc(var(--p-control-border-width)*-1); bottom: calc(var(--p-control-border-width)*-1); left: calc(var(--p-control-border-width)*-1); border-radius: var(--p-border-radius-1); background-color: var(--p-interactive); opacity: 0; transform: scale(0.25); transition: opacity var(--p-duration-100) var(--p-ease), transform var(--p-duration-100) var(--p-ease); }

.Polaris-Checkbox__Backdrop_1x2i2.Polaris-Checkbox--hover_37sww, .Polaris-Checkbox__Backdrop_1x2i2:hover { cursor: pointer; border-color: var(--p-border-hovered); }

.Polaris-Checkbox__Backdrop_1x2i2::after { content: ''; position: absolute; z-index: 1; top: calc(var(--p-control-border-width)*-1 + -0.0625rem); right: calc(var(--p-control-border-width)*-1 + -0.0625rem); bottom: calc(var(--p-control-border-width)*-1 + -0.0625rem); left: calc(var(--p-control-border-width)*-1 + -0.0625rem); display: block; pointer-events: none; box-shadow: 0 0 0 calc(var(--p-control-border-width)*-1 + -0.0625rem) var(--p-focused); transition: box-shadow var(--p-duration-100) var(--p-ease); border-radius: calc(var(--p-border-radius-1) + 0.0625rem); }

.Polaris-Checkbox__Icon_yj27d { position: absolute; top: 50%; left: 50%; transform-origin: 50% 50%; pointer-events: none; transform: translate(-50%, -50%) scale(0.25); opacity: 0; transition: opacity var(--p-duration-100) var(--p-ease), transform var(--p-duration-100) var(--p-ease); }

.Polaris-Checkbox__Icon_yj27d svg { fill: var(--p-icon-on-interactive); }

@media (-ms-high-contrast: active) { .Polaris-Checkbox__Icon_yj27d { fill: windowText; } }

.Polaris-Checkbox--error_37uk1 .Polaris-Checkbox__Icon_yj27d svg { fill: var(--p-icon-on-critical); }

.Polaris-Checkbox--error_37uk1 .Polaris-Checkbox__Backdrop_1x2i2 { border-color: var(--p-border-critical); background-color: var(--p-surface-critical); }

.Polaris-Checkbox--error_37uk1 .Polaris-Checkbox__Backdrop_1x2i2.Polaris-Checkbox--hover_37sww, .Polaris-Checkbox--error_37uk1 .Polaris-Checkbox__Backdrop_1x2i2:hover { border-color: var(--p-border-critical); }

.Polaris-Checkbox--error_37uk1 .Polaris-Checkbox__Backdrop_1x2i2::before { background-color: var(--p-border-critical); }

.Polaris-Checkbox--error_37uk1 .Polaris-Checkbox__Input_30ock:checked + .Polaris-Checkbox__Backdrop_1x2i2::before, .Polaris-Checkbox--error_37uk1 .Polaris-Checkbox__Input_30ock:active + .Polaris-Checkbox__Backdrop_1x2i2::before, .Polaris-Checkbox--error_37uk1 .Polaris-Checkbox__Input_30ock.Polaris-Checkbox__Input--indeterminate_wtlpx + .Polaris-Checkbox__Backdrop_1x2i2::before { background-color: var(--p-border-critical); }