form--checkbox-radio.pcss.css

/**
 * @file
 * Checkbox and radio input elements.
 */

@import "../base/variables.pcss.css";

/**
 * Form item modifiers.
 */
.form-type--boolean {
  margin-left: var(--input--label-spacing); /* LTR */
  line-height: var(--space-l);
}
[dir="rtl"] .form-type--boolean {
  margin-right: var(--input--label-spacing);
  margin-left: 0;
}

/**
 * Radio and checkbox items that are the child of a form item.
 */
.form-type--boolean .form-boolean {
  position: relative;
  top: calc(var(--space-l) / 2);
  float: left; /* LTR */
  margin-left: calc(var(--input--label-spacing) * -1); /* LTR */
  transform: translateY(-50%);
}
[dir="rtl"] .form-type--boolean .form-boolean {
  float: right;
  margin-right: calc(var(--input--label-spacing) * -1);
  margin-left: 0;
}

.form-type--boolean.form-item--no-label {
  margin-left: 0;
}
[dir="rtl"] .form-type--boolean.form-item--no-label {
  margin-right: 0;
}
.form-type--boolean.form-item--no-label .form-boolean,
[dir="rtl"] .form-type--boolean.form-item--no-label .form-boolean {
  position: static;
  float: none;
  margin-right: 0;
  margin-left: 0;
  transform: none;
}

/**
 * When form items are nested in radios or checkboxes group, reduce the default
 * space between them.
 */
.form-boolean-group .form-type--boolean {
  margin-top: 0.4em;
  margin-bottom: 0.4em;
}

/**
 * Input appearance.
 */
.form-boolean {
  display: inline-block;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  vertical-align: text-bottom;
  border: 1px solid var(--input-border-color);
  border-radius: 2px;
  background: var(--input-bg-color) no-repeat 50% 50%;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='10' viewBox='0 0 12 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.18182 6.96572L1.97655 4.64855L1.79545 4.45826L1.61436 4.64855L0.818904 5.48437L0.654878 5.65672L0.818904 5.82907L4.00072 9.17235L4.18182 9.36263L4.36291 9.17235L11.1811 2.00817L11.3451 1.83582L11.1811 1.66347L10.3856 .827651L10.2045 .637365L10.0234 .82765L4.18182 6.96572Z' fill='white' /%3E%3C/svg%3E");
  background-size: 100% 100%;
  box-shadow: 0 0 0 4px transparent;
  appearance: none;
}
.form-boolean--type-radio {
  width: 19px;
  height: 19px;
  border-radius: 19px;
}
.form-boolean:active,
.form-boolean:hover {
  border-color: var(--input-fg-color);
  box-shadow: inset 0 0 0 1px var(--input-fg-color);
}
.form-boolean:focus:active,
.form-boolean:focus:hover {
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input-fg-color);
}
.form-boolean--type-checkbox:checked {
  border-color: var(--input--focus-border-color);
  background-color: var(--input--focus-border-color);
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.7949219,7.095703 6.1816406,9.601563 12.205078,3.2753906 13.689453,4.8359375 6.1816406,12.724609 2.3105469,8.65625 Z' fill='white'/%3E%3C/svg%3E");
}
.form-boolean--type-checkbox:checked:active,
.form-boolean--type-checkbox:checked:hover {
  border-color: var(--input-fg-color);
  background-color: var(--input-fg-color);
}
.form-boolean--type-radio:checked {
  border-color: var(--input--focus-border-color);
  background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23004adc'/%3E%3C/svg%3E");
  box-shadow: inset 0 0 0 1px var(--input--focus-border-color);
}
.form-boolean--type-radio:checked:focus {
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input--focus-border-color);
}
.form-boolean--type-radio:checked:active,
.form-boolean--type-radio:checked:hover {
  border-color: var(--input-fg-color);
  background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23222330'/%3E%3C/svg%3E");
  box-shadow: inset 0 0 0 1px var(--input-fg-color);
}
.form-boolean--type-radio:checked:focus:active,
.form-boolean--type-radio:checked:focus:hover {
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input-fg-color);
}

/**
 * Error states.
 */
.form-boolean.error {
  border-color: var(--input--error-border-color);
  background-color: var(--input-bg-color);
  box-shadow: inset 0 0 0 1px var(--input--error-border-color);
}
.form-boolean.error:active,
.form-boolean.error:hover {
  box-shadow: inset 0 0 0 1px var(--input--error-border-color);
}
.form-boolean.error:focus,
.form-boolean.error:focus:active,
.form-boolean.error:focus:hover {
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input--error-border-color);
}
.form-boolean.error:checked:active,
.form-boolean.error:checked:hover {
  border-color: var(--input--error-border-color);
  background-color: var(--input-bg-color);
}
.form-boolean--type-checkbox.error:checked,
.form-boolean--type-checkbox.error:checked:active,
.form-boolean--type-checkbox.error:checked:hover {
  background-color: var(--input--error-border-color);
}
.form-boolean--type-radio.error:checked,
.form-boolean--type-radio.error:checked:active,
.form-boolean--type-radio.error:checked:hover {
  background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23d72222'/%3E%3C/svg%3E");
}
.form-boolean--type-radio.error:checked:focus {
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input--error-border-color);
}

/**
 * Disabled states.
 */
.form-boolean[disabled],
.form-boolean[disabled]:hover,
.form-boolean[disabled].error,
.form-boolean[disabled].error:hover,
.form-boolean--type-radio[disabled]:focus:active,
.form-boolean--type-radio[disabled]:active:hover,
.form-boolean--type-radio[disabled].error:active:hover {
  border-color: var(--input--disabled-border-color);
  background-color: var(--input--disabled-bg-color);
  background-image: none;
  box-shadow: none;
}
.form-boolean--type-checkbox[disabled]:checked {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.7949219,7.095703 6.1816406,9.601563 12.205078,3.2753906 13.689453,4.8359375 6.1816406,12.724609 2.3105469,8.65625 Z' fill='%2382828c'/%3E%3C/svg%3E");
}
.form-boolean--type-radio[disabled]:checked,
.form-boolean--type-radio[disabled].error:checked {
  background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%2382828c'/%3E%3C/svg%3E");
}