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

Shopify’s product component library

.Polaris-Checkbox_1d6zr{ position:relative; margin:var(--p-choice-margin, 0); }

.Polaris-Checkbox__Input_30ock{ position:absolute !important; top:0; clip:rect(1px, 1px, 1px, 1px) !important; overflow:hidden !important; height:1px !important; width:1px !important; padding:0 !important; border:0 !important; }

.Polaris-Checkbox_1d6zr:not(.Polaris-Checkbox--newDesignLanguage_1rik8) .Polaris-Checkbox__Input_30ock:focus + .Polaris-Checkbox__Backdrop_1x2i2, .Polaris-Checkbox_1d6zr:not(.Polaris-Checkbox--newDesignLanguage_1rik8) .Polaris-Checkbox__Input_30ock:active + .Polaris-Checkbox__Backdrop_1x2i2, .Polaris-Checkbox_1d6zr:not(.Polaris-Checkbox--newDesignLanguage_1rik8) .Polaris-Checkbox__Input_30ock:checked + .Polaris-Checkbox__Backdrop_1x2i2, .Polaris-Checkbox_1d6zr:not(.Polaris-Checkbox--newDesignLanguage_1rik8) .Polaris-Checkbox__Input_30ock.Polaris-Checkbox__Input--indeterminate_wtlpx + .Polaris-Checkbox__Backdrop_1x2i2{ background:#5c6ac4; }

.Polaris-Checkbox_1d6zr:not(.Polaris-Checkbox--newDesignLanguage_1rik8) .Polaris-Checkbox__Input_30ock:focus + .Polaris-Checkbox__Backdrop_1x2i2::after, .Polaris-Checkbox_1d6zr:not(.Polaris-Checkbox--newDesignLanguage_1rik8) .Polaris-Checkbox__Input_30ock:active + .Polaris-Checkbox__Backdrop_1x2i2::after, .Polaris-Checkbox_1d6zr:not(.Polaris-Checkbox--newDesignLanguage_1rik8) .Polaris-Checkbox__Input_30ock:checked + .Polaris-Checkbox__Backdrop_1x2i2::after, .Polaris-Checkbox_1d6zr:not(.Polaris-Checkbox--newDesignLanguage_1rik8) .Polaris-Checkbox__Input_30ock.Polaris-Checkbox__Input--indeterminate_wtlpx + .Polaris-Checkbox__Backdrop_1x2i2::after{ background:white; }

.Polaris-Checkbox_1d6zr:not(.Polaris-Checkbox--newDesignLanguage_1rik8) .Polaris-Checkbox__Input_30ock:checked ~ .Polaris-Checkbox__Icon_yj27d, .Polaris-Checkbox_1d6zr:not(.Polaris-Checkbox--newDesignLanguage_1rik8) .Polaris-Checkbox__Input_30ock.Polaris-Checkbox__Input--indeterminate_wtlpx ~ .Polaris-Checkbox__Icon_yj27d{ transform:translate(-50%, -50%) scale(1); }

.Polaris-Checkbox_1d6zr:not(.Polaris-Checkbox--newDesignLanguage_1rik8) .Polaris-Checkbox__Input_30ock:focus + .Polaris-Checkbox__Backdrop_1x2i2, .Polaris-Checkbox_1d6zr:not(.Polaris-Checkbox--newDesignLanguage_1rik8) .Polaris-Checkbox__Input_30ock:active + .Polaris-Checkbox__Backdrop_1x2i2{ background:#5c6ac4; box-shadow:0 0 0 1px #5c6ac4, 0 0 0 0 transparent; border-color:transparent; }

.Polaris-Checkbox_1d6zr:not(.Polaris-Checkbox--newDesignLanguage_1rik8) .Polaris-Checkbox__Input_30ock:focus + .Polaris-Checkbox__Backdrop_1x2i2::after, .Polaris-Checkbox_1d6zr:not(.Polaris-Checkbox--newDesignLanguage_1rik8) .Polaris-Checkbox__Input_30ock:active + .Polaris-Checkbox__Backdrop_1x2i2::after{ background:white; }

@media (-ms-high-contrast: active){ .Polaris-Checkbox_1d6zr:not(.Polaris-Checkbox--newDesignLanguage_1rik8) .Polaris-Checkbox__Input_30ock:focus + .Polaris-Checkbox__Backdrop_1x2i2::after, .Polaris-Checkbox_1d6zr:not(.Polaris-Checkbox--newDesignLanguage_1rik8) .Polaris-Checkbox__Input_30ock:active + .Polaris-Checkbox__Backdrop_1x2i2::after{ border:1px dashed buttonText; } }

.Polaris-Checkbox_1d6zr:not(.Polaris-Checkbox--newDesignLanguage_1rik8) .Polaris-Checkbox__Input_30ock:disabled + .Polaris-Checkbox__Backdrop_1x2i2{ background:#dfe3e8; box-shadow:none; }

.Polaris-Checkbox_1d6zr:not(.Polaris-Checkbox--newDesignLanguage_1rik8) .Polaris-Checkbox__Input_30ock:disabled + .Polaris-Checkbox__Backdrop_1x2i2::after{ background:#f9fafb; }

@media (-ms-high-contrast: active){ .Polaris-Checkbox_1d6zr:not(.Polaris-Checkbox--newDesignLanguage_1rik8) .Polaris-Checkbox__Input_30ock:disabled + .Polaris-Checkbox__Backdrop_1x2i2{ color:grayText; } }

.Polaris-Checkbox_1d6zr:not(.Polaris-Checkbox--newDesignLanguage_1rik8) .Polaris-Checkbox__Input_30ock:disabled ~ .Polaris-Checkbox__Icon_yj27d svg{ fill:#919eab; }

.Polaris-Checkbox_1d6zr:not(.Polaris-Checkbox--newDesignLanguage_1rik8) .Polaris-Checkbox__Backdrop_1x2i2{ position:absolute; top:0; bottom:0; left:0; right:0; pointer-events:none; background-color:#c4cdd5; border:0.1rem solid transparent; box-shadow:0 0 0 1px transparent, 0 1px 0 0 rgba(22, 29, 37, 0.05); border-radius:3px; transition-property:box-shadow, background-color; transition-duration:200ms; transition-timing-function:cubic-bezier(0.64, 0, 0.35, 1); }

.Polaris-Checkbox_1d6zr:not(.Polaris-Checkbox--newDesignLanguage_1rik8) .Polaris-Checkbox__Backdrop_1x2i2::after{ content:''; position:absolute; top:0; bottom:0; left:0; right:0; display:block; background:linear-gradient(to bottom, white, #f9fafb); border-radius:2px; }

@media (-ms-high-contrast: active){ .Polaris-Checkbox_1d6zr:not(.Polaris-Checkbox--newDesignLanguage_1rik8) .Polaris-Checkbox__Backdrop_1x2i2{ background:transparent; border:2px solid buttonText; transition:none; color:rgba(223, 227, 232, 0.3); }
  .Polaris-Checkbox_1d6zr:not(.Polaris-Checkbox--newDesignLanguage_1rik8) .Polaris-Checkbox__Backdrop_1x2i2::after{ top:-4px; right:-4px; bottom:-4px; left:-4px; background:none; border-radius:4px; } }

.Polaris-Checkbox_1d6zr:not(.Polaris-Checkbox--newDesignLanguage_1rik8) .Polaris-Checkbox__Icon_yj27d{ transition:transform 100ms cubic-bezier(0.36, 0, 1, 1); transform:translate(-50%, -50%) scale(0); }

.Polaris-Checkbox_1d6zr.Polaris-Checkbox--newDesignLanguage_1rik8 .Polaris-Checkbox__Input_30ock.Polaris-Checkbox--keyFocused_1aqee + .Polaris-Checkbox__Backdrop_1x2i2::after{ box-shadow:0 0 0 0.2rem var(--p-focused); }

@media (-ms-high-contrast: active){ .Polaris-Checkbox_1d6zr.Polaris-Checkbox--newDesignLanguage_1rik8 .Polaris-Checkbox__Input_30ock.Polaris-Checkbox--keyFocused_1aqee + .Polaris-Checkbox__Backdrop_1x2i2::after{ outline:1px solid windowText; } }

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

.Polaris-Checkbox_1d6zr.Polaris-Checkbox--newDesignLanguage_1rik8 .Polaris-Checkbox__Input_30ock:active:not(:disabled) + .Polaris-Checkbox__Backdrop_1x2i2::before, .Polaris-Checkbox_1d6zr.Polaris-Checkbox--newDesignLanguage_1rik8 .Polaris-Checkbox__Input_30ock:checked + .Polaris-Checkbox__Backdrop_1x2i2::before, .Polaris-Checkbox_1d6zr.Polaris-Checkbox--newDesignLanguage_1rik8 .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_1d6zr.Polaris-Checkbox--newDesignLanguage_1rik8 .Polaris-Checkbox__Input_30ock:active:not(:disabled) + .Polaris-Checkbox__Backdrop_1x2i2::before, .Polaris-Checkbox_1d6zr.Polaris-Checkbox--newDesignLanguage_1rik8 .Polaris-Checkbox__Input_30ock:checked + .Polaris-Checkbox__Backdrop_1x2i2::before, .Polaris-Checkbox_1d6zr.Polaris-Checkbox--newDesignLanguage_1rik8 .Polaris-Checkbox__Input_30ock.Polaris-Checkbox__Input--indeterminate_wtlpx + .Polaris-Checkbox__Backdrop_1x2i2::before{ border:2px solid windowText; } }

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

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

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

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

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

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

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

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

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

.Polaris-Checkbox_1d6zr.Polaris-Checkbox--newDesignLanguage_1rik8 .Polaris-Checkbox__Backdrop_1x2i2::after{ content:var(--p-non-null-content, none); position:absolute; z-index:1; top:calc(-1*(var(--p-control-border-width) + 0.1rem)); right:calc(-1*(var(--p-control-border-width) + 0.1rem)); bottom:calc(-1*(var(--p-control-border-width) + 0.1rem)); left:calc(-1*(var(--p-control-border-width) + 0.1rem)); display:block; pointer-events:none; box-shadow:0 0 0 calc(-1*(var(--p-control-border-width) + 0.1rem)) var(--p-focused); transition:box-shadow 100ms var(--p-ease); border-radius:calc(var(--p-border-radius-base) + 0.1rem); }

.Polaris-Checkbox_1d6zr.Polaris-Checkbox--newDesignLanguage_1rik8 .Polaris-Checkbox__Icon_yj27d{ transform:translate(-50%, -50%) scale(0.25); opacity:0; transition:opacity var(--p-duration-1-0-0) var(--p-ease), transform var(--p-duration-1-0-0) var(--p-ease); }

.Polaris-Checkbox__Icon_yj27d{ position:absolute; top:50%; left:50%; transform-origin:50% 50%; pointer-events:none; }

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

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

.Polaris-Checkbox--error_37uk1:not(.Polaris-Checkbox--newDesignLanguage_1rik8) .Polaris-Checkbox__Input_30ock:checked + .Polaris-Checkbox__Backdrop_1x2i2, .Polaris-Checkbox--error_37uk1:not(.Polaris-Checkbox--newDesignLanguage_1rik8) .Polaris-Checkbox__Input_30ock.Polaris-Checkbox__Input--indeterminate_wtlpx + .Polaris-Checkbox__Backdrop_1x2i2, .Polaris-Checkbox--error_37uk1:not(.Polaris-Checkbox--newDesignLanguage_1rik8) .Polaris-Checkbox__Backdrop_1x2i2{ background:#bf0711; box-shadow:0 0 0 1px transparent; }

.Polaris-Checkbox--error_37uk1:not(.Polaris-Checkbox--newDesignLanguage_1rik8) .Polaris-Checkbox__Input_30ock:checked + .Polaris-Checkbox__Backdrop_1x2i2::after, .Polaris-Checkbox--error_37uk1:not(.Polaris-Checkbox--newDesignLanguage_1rik8) .Polaris-Checkbox__Input_30ock.Polaris-Checkbox__Input--indeterminate_wtlpx + .Polaris-Checkbox__Backdrop_1x2i2::after, .Polaris-Checkbox--error_37uk1:not(.Polaris-Checkbox--newDesignLanguage_1rik8) .Polaris-Checkbox__Backdrop_1x2i2::after{ background:#fbeae5; }

.Polaris-Checkbox--error_37uk1:not(.Polaris-Checkbox--newDesignLanguage_1rik8) .Polaris-Checkbox__Input_30ock:focus + .Polaris-Checkbox__Backdrop_1x2i2, .Polaris-Checkbox--error_37uk1:not(.Polaris-Checkbox--newDesignLanguage_1rik8) .Polaris-Checkbox__Input_30ock:active + .Polaris-Checkbox__Backdrop_1x2i2{ background:#5c6ac4; box-shadow:0 0 0 1px #5c6ac4; }

.Polaris-Checkbox--error_37uk1:not(.Polaris-Checkbox--newDesignLanguage_1rik8) .Polaris-Checkbox__Input_30ock:focus + .Polaris-Checkbox__Backdrop_1x2i2::after, .Polaris-Checkbox--error_37uk1:not(.Polaris-Checkbox--newDesignLanguage_1rik8) .Polaris-Checkbox__Input_30ock:active + .Polaris-Checkbox__Backdrop_1x2i2::after{ background:#fbeae5; }

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

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

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

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

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