@geoffcox/sterling-svelte-themes/css/sterling/Checkbox.base.css

A modern theme for the sterling-svelte component library.

.sterling-checkbox {
  align-content: center;
  align-items: center;
  box-sizing: border-box;
  display: inline-flex;
  font: inherit;
  margin: 0;
  outline: none;
  padding: 0;
}

/* 
The container 
- allows the input to be hidden
- avoids input participating in layout
- prevents collisions with surrounding slots
*/
.sterling-checkbox .container {
  font: inherit;
  position: relative;
  display: grid;
  align-items: center;
  margin-right: 0.25em;
}

/*
The input is hidden since the built-in browser checkbox cannot be customized
*/
.sterling-checkbox input {
  appearance: none;
  font: inherit;
  margin: 0;
  padding: 0;
  position: absolute;
  opacity: 0;
  height: 20px;
  width: 20px;
}

/*
The indicator handles both the box and the checkmark.
The box cannot be on the container since the adjacent sibling selector is needed
and there is not a parent CSS selector.
*/
.sterling-checkbox .indicator {
  background-color: var(--stsv-input__background-color);
  border-color: var(--stsv-input__border-color);
  border-style: solid;
  border-width: var(--stsv-input__border-width);
  box-sizing: border-box;
  display: inline-block;
  height: 20px;
  position: relative;
  transition:
    background-color 250ms,
    color 250ms,
    border-color 250ms;
  width: 20px;
  pointer-events: none;
}

.sterling-checkbox:not(.disabled) input:checked + .indicator {
  background-color: var(--stsv-input__background-color);
  border-color: var(--stsv-input__border-color);
}

.sterling-checkbox:not(.disabled):hover .indicator {
  background-color: var(--stsv-input__background-color--hover);
  border-color: var(--stsv-input__border-color--hover);
}

.sterling-checkbox input:focus-visible + .indicator {
  outline-color: var(--stsv-common__outline-color);
  outline-offset: 0;
  outline-style: solid;
  outline-width: var(--stsv-common__outline-width);
}

/*
The checkmark is a rotated L centered in the box.
*/
.sterling-checkbox .indicator::after {
  border-style: solid;
  border-width: 0 3px 3px 0;
  box-sizing: border-box;
  content: '';
  height: 14px;
  left: 50%;
  position: absolute;
  top: 45%;
  transform: translate(-50%, -50%) rotate(45deg);
  transform-origin: center;
  transition:
  border-color 250ms,
  opacity 150ms;
  width: 7px;
  opacity: 0;
}

.sterling-checkbox input:checked + .indicator::after {
  opacity: 1;
}

.sterling-checkbox:not(.disabled) .indicator::after {
  border-color: var(--stsv-input__color);
}

.sterling-checkbox:not(.disabled):hover input:checked + .indicator::after {
  border-color: var(--stsv-input__color--hover);
}

.sterling-checkbox label {
  color: var(--stsv-common__color);
  transition: color 250ms;
  font: inherit;
}

.sterling-checkbox.disabled,
.sterling-checkbox.disabled input,
.sterling-checkbox.disabled label {
  cursor: not-allowed;
}

.sterling-checkbox.disabled .indicator {
  background-color: var(--stsv-input__background-color--disabled);
  border-color: var(--stsv-input__border-color--disabled);
}

.sterling-checkbox.disabled .indicator::after {
  border-color: var(--stsv-input__color--disabled);
}

.sterling-checkbox.disabled label {
  color: var(--stsv-common__color--disabled);
}

@media (prefers-reduced-motion) {
  .sterling-checkbox .indicator,
  .sterling-checkbox .indicator::after,
  .sterling-checkbox .container::after,
  .sterling-checkbox label {
    transition: none;
  }
}