@workday/canvas-kit-css/checkbox.css

The parent module that contains all Workday Canvas Kit CSS components

.cnvs-checkbox-ripple {
  box-sizing: border-box;
  border-radius: var(--cnvs-sys-shape-round);
  box-shadow: none;
  height: calc(var(--cnvs-sys-space-x4) + 0.125rem);
  width: calc(var(--cnvs-sys-space-x4) + 0.125rem);
  transition: box-shadow 150ms ease-out;
  position: absolute;
  pointer-events: none;
}


.cnvs-checkbox-container {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  min-height: var(--cnvs-sys-space-x6);
  position: relative;
}

.cnvs-checkbox-container>div {
  display: flex;
  height: calc(var(--cnvs-sys-space-x4) + 0.125rem);
  min-width: calc(var(--cnvs-sys-space-x4) + 0.125rem);
  margin-top: 0.1875rem;
  align-self: flex-start;
}

.cnvs-checkbox-container>label {
  padding-inline-start: var(--cnvs-sys-space-x3);
}


.cnvs-checkbox-background {
  box-sizing: border-box;
  align-items: center;
  background-color: var(--cnvs-sys-color-bg-default);
  border-radius: var(--cnvs-sys-shape-half);
  display: flex;
  height: calc(var(--cnvs-sys-space-x4) + 0.125rem);
  justify-content: center;
  padding: var(--cnvs-sys-space-zero) calc(var(--cnvs-sys-space-x1) / 2);
  pointer-events: none;
  position: absolute;
  transition: border 200ms ease,background 200ms;
  width: calc(var(--cnvs-sys-space-x4) + 0.125rem);
  border: 0.0625rem solid var(--cnvs-sys-color-border-input-default);
}


.cnvs-checkbox-background.error-error {
  --cnvs-checkbox-background-error-ring-color-inner: var(--cnvs-brand-error-base);
  --cnvs-checkbox-background-error-ring-color-outer: transparent;
}


.cnvs-checkbox-background.error-alert {
  --cnvs-checkbox-background-error-ring-color-inner: var(--cnvs-brand-alert-base);
  --cnvs-checkbox-background-error-ring-color-outer: var(--cnvs-brand-alert-darkest);
}


.cnvs-checkbox-check {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  max-width: 100%;
  pointer-events: none;
  transition: transform 200ms ease,opacity 200ms ease;
  opacity: var(--cnvs-sys-opacity-zero);
  transform: scale(0.5);
}

.cnvs-checkbox-check span {
  margin-inline-start: calc(0.375rem * -1);
  transition: margin 200ms ease;
}


.cnvs-checkbox-check.checked {
  --cnvs-system-icon-color: var(--cnvs-brand-primary-accent);
  opacity: var(--cnvs-sys-opacity-full);
  transform: scale(1);
}


.cnvs-checkbox-check.indeterminate {
  opacity: var(--cnvs-sys-opacity-full);
  transform: scale(1);
}


.cnvs-checkbox-check.variant-inverse {
  --cnvs-system-icon-color: var(--cnvs-brand-primary-base);
}

.cnvs-checkbox-check.variant-inverse>div {
  background-color: var(--cnvs-brand-primary-base);
}


.cnvs-indeterminate-box {
  box-sizing: border-box;
  width: 0.625rem;
  height: calc(var(--cnvs-sys-space-x1) / 2);
  background-color: var(--cnvs-brand-primary-accent);
}


.cnvs-checkbox-input {
  box-sizing: border-box;
  border-radius: var(--cnvs-sys-shape-half);
  width: var(--cnvs-sys-space-x6);
  height: var(--cnvs-sys-space-x6);
  margin: var(--cnvs-sys-space-zero);
  margin-top: calc(0.1875rem * -1);
  margin-inline-start: calc(0.1875rem * -1);
  position: absolute;
  opacity: var(--cnvs-sys-opacity-zero);
}

.cnvs-checkbox-input:not(:disabled) {
  cursor: pointer;
}

.cnvs-checkbox-input:where(:hover,.hover)~span:first-of-type {
  box-shadow: 0 0 0 0.4375rem var(--cnvs-sys-color-bg-alt-soft);
}

.cnvs-checkbox-input:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active)~div:first-of-type {
  border-color: var(--cnvs-sys-color-border-input-strong);
}

.cnvs-checkbox-input:where(:checked, :indeterminate)~div:first-of-type {
  border-color: var(--cnvs-brand-primary-base);
  background-color: var(--cnvs-brand-primary-base);
}

.cnvs-checkbox-input:disabled~div:first-of-type {
  border-color: var(--cnvs-sys-color-border-input-disabled);
  background-color: var(--cnvs-sys-color-bg-alt-softer);
  opacity: var(--cnvs-sys-opacity-full);
}

.cnvs-checkbox-input:disabled:where(:checked, :indeterminate)~div:first-of-type {
  border-color: var(--cnvs-brand-primary-light);
  background-color: var(--cnvs-brand-primary-light);
}

.cnvs-checkbox-input:where(:focus-visible, :active, .focus, .active) {
  outline: none;
}

.cnvs-checkbox-input:where(:focus-visible, .focus)~div:first-of-type {
  border-color: var(--cnvs-brand-primary-base);
  border-width: 0.125rem;
  box-shadow: 0 0 0 0px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)),0 0 0 0px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));
}

.cnvs-checkbox-input:checked:focus-visible~div:first-of-type, .cnvs-checkbox-input:indeterminate:focus-visible~div:first-of-type, .cnvs-checkbox-input:checked.focus~div:first-of-type, .cnvs-checkbox-input:indeterminate.focus~div:first-of-type {
  box-shadow: 0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)),0 0 0 4px var(--cnvs-brand-common-focus-outline);
  border-color: var(--cnvs-brand-primary-base);
  border-width: 0.125rem;
}

.cnvs-checkbox-input:checked:focus-visible~div:first-of-type span, .cnvs-checkbox-input:indeterminate:focus-visible~div:first-of-type span, .cnvs-checkbox-input:checked.focus~div:first-of-type span, .cnvs-checkbox-input:indeterminate.focus~div:first-of-type span {
  margin-inline-start: calc(0.4375rem * -1);
}


.cnvs-checkbox-input.variant-inverse~span:first-of-type {
  opacity: var(--cnvs-sys-opacity-disabled);
}

.cnvs-checkbox-input.variant-inverse~div:first-of-type {
  border-color: var(--cnvs-sys-color-border-input-inverse);
}

.cnvs-checkbox-input.variant-inverse:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active)~div:first-of-type {
  border-color: var(--cnvs-sys-color-border-input-inverse);
}

.cnvs-checkbox-input.variant-inverse:where(:checked, :indeterminate)~div:first-of-type {
  border-color: var(--cnvs-sys-color-border-input-inverse);
  background-color: var(--cnvs-sys-color-bg-default);
}

.cnvs-checkbox-input.variant-inverse:disabled~div:first-of-type {
  background-color: var(--cnvs-sys-color-bg-alt-default);
  opacity: var(--cnvs-sys-opacity-disabled);
}

.cnvs-checkbox-input.variant-inverse:disabled:where(:checked, :indeterminate)~div:first-of-type {
  border-color: var(--cnvs-sys-color-border-input-inverse);
  background-color: var(--cnvs-sys-color-bg-default);
}

.cnvs-checkbox-input.variant-inverse:where(:focus-visible, .focus)~div:first-of-type {
  border-color: var(--cnvs-sys-color-border-contrast-default);
  box-shadow: 0 0 0 0px var(--cnvs-sys-color-border-contrast-default),0 0 0 2px var(--cnvs-sys-color-border-inverse);
}

.cnvs-checkbox-input.variant-inverse:checked:focus-visible~div:first-of-type, .cnvs-checkbox-input.variant-inverse:checked.focus~div:first-of-type, .cnvs-checkbox-input.variant-inverse:indeterminate:focus-visible~div:first-of-type, .cnvs-checkbox-input.variant-inverse:indeterminate.focus~div:first-of-type {
  box-shadow: 0 0 0 2px var(--cnvs-sys-color-border-contrast-default),0 0 0 4px var(--cnvs-sys-color-border-inverse);
  border-color: var(--cnvs-sys-color-border-inverse);
}


.cnvs-checkbox-input.disabled:where(:hover, .hover)~span:first-of-type {
  box-shadow: none;
}


.cnvs-checkbox-input.error:not(:where(:focus-visible, .focus))~div:first-of-type {
  border-color: var(--cnvs-checkbox-background-error-ring-color-inner);
  box-shadow: 0 0 0 0.0625rem var(--cnvs-checkbox-background-error-ring-color-inner),0 0 0 0.125rem var(--cnvs-checkbox-background-error-ring-color-outer);
}

.cnvs-checkbox-input.error:where(:checked, :indeterminate)~div:first-of-type {
  border-color: transparent;
  box-shadow: 0 0 0 0.125rem var(--cnvs-sys-color-border-inverse),0 0 0 0.25rem var(--cnvs-checkbox-background-error-ring-color-inner),0 0 0 0.3125rem var(--cnvs-checkbox-background-error-ring-color-outer);
}

.cnvs-checkbox-input.error:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active)~div:first-of-type {
  border-color: var(--cnvs-checkbox-background-error-ring-color-inner);
}


.cnvs-checkbox-input.variant-inverse.error:not(:where(:focus-visible, .focus))~div:first-of-type {
  border: 0.0625rem solid var(--cnvs-sys-color-border-input-inverse);
}

.cnvs-checkbox-input.variant-inverse.error:not(where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active)~div:first-of-type {
  border-color: var(--cnvs-sys-color-border-input-inverse);
}

.cnvs-checkbox-input.variant-inverse.error:where(:checked, :indeterminate)~div:first-of-type {
  border-color: var(--cnvs-sys-color-border-input-inverse);
}