wix-style-react/dist/src/Checkbox/Checkbox.st.css

wix-style-react

@st-import [
  --wds-space-200,

  --wds-shadow-focus-standard,
  --wds-shadow-focus-destructive,

  --wds-color-border-standard-secondary,
  --wds-color-border-standard-secondary-hover,
  --wds-color-border-standard-secondary-active,
  --wds-color-border-standard-secondary-disabled,
  --wds-color-border-destructive-secondary-active,

  --wds-checkbox-border-radius,
  --wds-checkbox-border,
  --wds-checkbox-border-hover,
  --wds-checkbox-border-active,
  --wds-checkbox-border-active-hover,
  --wds-checkbox-border-disabled,
  --wds-checkbox-border-active-disabled,
  --wds-checkbox-fill,
  --wds-checkbox-fill-hover,
  --wds-checkbox-fill-disabled,
  --wds-checkbox-fill-active,
  --wds-checkbox-fill-active-hover,
  --wds-checkbox-fill-active-disabled,
  --wds-checkbox-icon,
  --wds-checkbox-icon-disabled,

  --wds-select-area-border-radius,
  --wds-select-area-padding-horizontal,
  --wds-select-area-padding-vertical,
  --wds-select-area-fill,
  --wds-select-area-fill-hover,
  --wds-select-area-fill-active,
  --wds-select-area-fill-disabled,
] from '@wix/design-system-tokens/all.st.css';

:import {
  -st-from: '../Foundation/stylable/colors.st.css';
  -st-named: D10-05, D10-30, D60, D80, F00, R10, R30, THEME-COLOR-10,
    B00, B10, B20, B30, THEME-COLOR-40, THEME-COLOR-50, THEME-COLOR-60;
}

:import {
  -st-from: '../common/Focusable/Focusable.st.css';
  -st-default: Focusable;
}

.root {
  -st-extends: Focusable;
  -st-states: vAlign(enum(center, top)),
    selectionArea(enum(none, always, hover)), disabled,
    selection(enum(unchecked, checked, indeterminate)), checkboxhover, error,
    selectionAreaSkin(enum(filled, outlined)),
    newColorsBranding,
    ellipsis;
  display: inline-flex;
  outline: none;

  /* Sets minimal height for the container in case there's no label */
  min-height: 24px;
}

.root:ellipsis {
  min-width: 0;
}

:global([dir='rtl']) .root {
  direction: rtl;
}

/* Label */
.root .label {
  cursor: default;
  max-width: 100%;
  width: 100%;
  display: flex;
}

.root .label .labelInner {
  display: flex;
  gap: var(--wds-space-200, 12px);
  width: 100%;
}

.children {
  cursor: pointer;
  width: 100%;
}

:global([dir='rtl']) .children {
  padding-left: 0;
  padding-right: 12px;
}

.checkbox {
  position: relative;
  width: 16px;
  min-width: 16px;
  height: 16px;
  min-height: 16px;
  border-radius: var(--wds-checkbox-border-radius, 4px);
  box-sizing: border-box;
  cursor: pointer;
  border: 1px solid var(--wds-checkbox-border, value(B20));
  background-color: var(--wds-checkbox-fill, value(D80));
}

.root:newColorsBranding .checkbox {
  border-color: var(--wds-checkbox-border, value(B10));
}

.root:focus-visible .checkbox {
  outline: none;
  border-color: var(--wds-checkbox-border, value(THEME-COLOR-10));
  box-shadow: var(--wds-shadow-focus-standard, 0 0 0 3px value(F00));
}

.inner {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  color: var(--wds-checkbox-icon, value(D80));
  opacity: 0;
}

.inner > svg {
  width: 8px;
  height: 8px;
}

/* Vertical Align */
.root:vAlign(center) .label,
.root:vAlign(center) .label .labelInner {
  align-items: center;
}

.root:vAlign(top) .outer {
  margin-top: 4px;
  display: flex;
}

/* Selection Area */
.root:selectionArea(always),
.root:selectionArea(hover) {
  cursor: pointer;
  border-radius: var(--wds-select-area-border-radius, 8px);
}

.root:selectionArea(always) .label,
.root:selectionArea(hover) .label {
  border-radius: var(--wds-select-area-border-radius, 8px);
}

.root:selectionArea(always) .label .labelInner,
.root:selectionArea(hover) .label .labelInner {
  padding: var(--wds-select-area-padding-vertical, 12px) var(--wds-select-area-padding-horizontal, 16px);
}

.root:selectionArea(always):selectionAreaSkin(filled) {
  background-color: var(--wds-select-area-fill, value(THEME-COLOR-60));
}

.root:not(:disabled):selectionArea(always):selectionAreaSkin(filled):hover,
.root:not(:disabled):selectionArea(hover):selectionAreaSkin(filled):hover {
  background-color: var(--wds-select-area-fill-hover, value(THEME-COLOR-50));
}

.root:selectionArea(always) .outer,
.root:selectionArea(hover) .outer {
  padding: 4px 0;
}

.root:not(:disabled):selectionArea(always),
.root:not(:disabled):selectionArea(hover),
.root:not(:disabled):selectionArea(always) .label,
.root:not(:disabled):selectionArea(hover) .label,
.root:not(:disabled):selectionArea(always) .outer,
.root:not(:disabled):selectionArea(hover) .outer {
  cursor: pointer;
}

.root:selectionArea(always):selectionAreaSkin(outlined) .label {
  outline: 1px solid var(--wds-color-border-standard-secondary, value(THEME-COLOR-40));
  outline-offset: -1px;
}

.root:not(:disabled):selectionArea(always):selectionAreaSkin(outlined):hover .label,
.root:not(:disabled):selectionArea(hover):selectionAreaSkin(outlined):hover .label {
  outline: 1px solid var(--wds-color-border-standard-secondary-hover, value(B20));
  outline-offset: -1px;
}

.root:selectionArea(hover):selectionAreaSkin(filled):selection(checked),
.root:selectionArea(hover):selectionAreaSkin(filled):selection(indeterminate),
.root:selectionArea(always):selectionAreaSkin(filled):selection(checked),
.root:selectionArea(always):selectionAreaSkin(filled):selection(indeterminate) {
  background-color: value(THEME-COLOR-40);
}

.root:selectionArea(hover):selectionAreaSkin(outlined):selection(checked) .label,
.root:selectionArea(hover):selectionAreaSkin(outlined):selection(indeterminate) .label,
.root:selectionArea(always):selectionAreaSkin(outlined):selection(checked) .label,
.root:selectionArea(always):selectionAreaSkin(outlined):selection(indeterminate) .label {
  outline: 2px solid var(--wds-color-border-standard-secondary-active, value(THEME-COLOR-10));
  outline-offset: -2px;
  padding: 0;
}

.root:not(:disabled):selectionArea(hover):selectionAreaSkin(outlined):selection(checked):hover .label,
.root:not(:disabled):selectionArea(hover):selectionAreaSkin(outlined):selection(indeterminate):hover .label,
.root:not(:disabled):selectionArea(always):selectionAreaSkin(outlined):selection(checked):hover .label,
.root:not(:disabled):selectionArea(always):selectionAreaSkin(outlined):selection(indeterminate):hover .label {
  outline: 2px solid var(--wds-color-border-standard-secondary-hover, value(B20));
  outline-offset: -2px;
  padding: 0;
}

.root:selectionArea(always):vAlign(top) .outer {
  margin-top: 0;
}

:global([dir='rtl']) .root:selectionArea(always) .children,
:global([dir='rtl']) .root:selectionArea(hover) .children {
  padding-left: 0;
  padding-right: 12px;
}

.root:selection(checked) .checkbox,
.root:selection(indeterminate) .checkbox {
  border: 1px solid var(--wds-checkbox-border-active, value(THEME-COLOR-10));
  background-color: var(--wds-checkbox-fill-active, value(THEME-COLOR-10));
}

.root:selection(checked) .checkbox .inner,
.root:selection(indeterminate) .checkbox .inner {
  opacity: 1;
}

.root:focus-visible:selectionArea(always):selectionAreaSkin(outlined),
.root:focus-visible:selectionArea(hover):selectionAreaSkin(outlined) {
  box-shadow: var(--wds-shadow-focus-standard, 0 0 0 3px value(F00));
}

/* Disabled */
.root:disabled,
.root:disabled .label {
  cursor: not-allowed;
}

.root:disabled .children {
  pointer-events: none;
}

.root:disabled .checkbox {
  pointer-events: none;
  border-color: var(--wds-checkbox-border-disabled, value(D10-30));
  background-color: var(--wds-checkbox-fill-disabled, value(D10-05));
}

.root:disabled:selection(checked) .checkbox,
.root:disabled:selection(indeterminate) .checkbox {
  border-color: var(--wds-checkbox-border-active-disabled, value(D10-30));
  background-color: var(--wds-checkbox-fill-active-disabled, value(D10-05));
}

.root:disabled .checkbox .inner {
  color: var(--wds-checkbox-icon-disabled, value(D10-30));
}

.root:disabled:selectionArea(always),
.root:disabled:selectionArea(hover) {
  background-color: var(--wds-select-area-fill-disabled, transparent);
}

.root:disabled:selectionArea(always):selection(unchecked) .checkbox,
.root:disabled:selectionArea(hover):selection(unchecked) .checkbox {
  background-color: var(--wds-checkbox-fill-disabled, transparent);
}

.root:disabled:selectionArea(always):selection(checked) .checkbox,
.root:disabled:selectionArea(always):selection(indeterminate) .checkbox,
.root:disabled:selectionArea(hover):selection(checked) .checkbox,
.root:disabled:selectionArea(hover):selection(indeterminate) .checkbox {
  background-color: var(--wds-checkbox-fill-active-disabled, transparent);
}

.root:disabled:selectionArea(always):selection(checked),
.root:disabled:selectionArea(always):selection(indeterminate),
.root:disabled:selectionArea(hover):selection(checked),
.root:disabled:selectionArea(hover):selection(indeterminate) {
  background-color: var(--wds-select-area-fill-disabled, transparent);
}

.root:disabled:selectionArea(always):selectionAreaSkin(outlined) .label,
.root:disabled:selectionArea(always):selectionAreaSkin(outlined):selection(checked) .label {
  outline: 1px solid var(--wds-color-border-standard-secondary-disabled, value(D60));
  outline-offset: -1px;
}

.root:disabled:selectionArea(hover):selectionAreaSkin(outlined):selection(checked) {
  box-shadow: none;
}

/* Error */
.root:error .checkbox {
  border-color: var(--wds-color-border-destructive-secondary-active, value(R10));
}

.root:error:focus-visible .checkbox {
  outline: none;
  border-color: var(--wds-color-border-destructive-secondary-active, value(R10));
  box-shadow: var(--wds-shadow-focus-destructive, 0 0 0 3px value(R30));
}

/* Hover */
.root:selection(unchecked):not(:disabled):hover .checkbox {
  background-color: var(--wds-checkbox-fill-hover, value(THEME-COLOR-50));
}

.root:checkboxhover .checkbox {
  background-color: var(--wds-checkbox-fill-hover, value(THEME-COLOR-50));
}

.root:selection(checked):not(:disabled):hover .checkbox,
.root:selection(indeterminate):not(:disabled):hover .checkbox {
  border: 1px solid var(--wds-checkbox-border-active-hover, value(B20));
  background-color: var(--wds-checkbox-fill-active-hover, value(B20));
}

.root:newColorsBranding:selection(checked):not(:disabled):hover .checkbox,
.root:newColorsBranding:selection(indeterminate):not(:disabled):hover .checkbox {
  border: 1px solid var(--wds-checkbox-border-active-hover, value(B00));
  background-color: var(--wds-checkbox-fill-active-hover, value(B00));
}

/* st-namespace-reference="../../../src/Checkbox/Checkbox.st.css" */