vuestic-ui/dist/esm-node/VaCheckbox.css

Vue 3 UI Framework

:root,
:host {
  --va-checkbox-display: inline-block;
  --va-checkbox-input-padding: 0;
  --va-checkbox-input-cursor: pointer;
  --va-checkbox-disabled-cursor: default;
  --va-checkbox-readonly-cursor: initial;
  --va-checkbox-label-display: inline-block;
  --va-checkbox-label-cursor: pointer;
  --va-checkbox-font-size: 15px;
  --va-checkbox-line-height: 20px;
  --va-checkbox-background: transparent;
  /* Square */
  --va-checkbox-square-width: 1.25rem;
  --va-checkbox-square-min-width: 1.25rem;
  --va-checkbox-square-height: 1.25rem;
  --va-checkbox-square-border: solid var(--va-form-element-border-width) var(--va-background-border);
  --va-checkbox-square-border-radius: calc(var(--va-form-element-border-radius) / 2);
  /* Padding */
  --va-checkbox-horizontal-gap: 0.5em;
  --va-checkbox-vertical-gap: 0.3em;
  --va-checkbox-vertical-padding: var(--va-checkbox-vertical-gap) 0 var(--va-checkbox-vertical-gap) var(--va-checkbox-horizontal-gap);
  --va-checkbox-horizontal-padding: 0 var(--va-checkbox-horizontal-gap);
  --va-checkbox-right-padding: 0 var(--va-checkbox-horizontal-gap) 0 0;
  --va-checkbox-left-padding: 0 0 0 var(--va-checkbox-horizontal-gap);
}
.va-checkbox {
  display: var(--va-display-val);
  max-width: -moz-fit-content;
  max-width: fit-content;
  font-family: var(--va-font-family);
}
.va-checkbox__input-container {
  align-items: center;
  display: flex;
  padding: var(--va-checkbox-input-padding);
  cursor: var(--va-checkbox-input-cursor);
  font-size: var(--va-checkbox-font-size);
  line-height: var(--va-checkbox-line-height);
}
.va-checkbox--disabled .va-checkbox__input-container {
  cursor: default;
  opacity: 0.4;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: var(--va-checkbox-disabled-cursor);
}
.va-checkbox--readonly .va-checkbox__input-container {
  cursor: var(--va-checkbox-readonly-cursor);
}
.va-checkbox--left-label .va-checkbox__input-container {
  flex-direction: row-reverse;
}
.va-checkbox .va-checkbox__square {
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--va-checkbox-square-width);
  min-width: var(--va-checkbox-square-min-width);
  height: var(--va-checkbox-square-height);
  position: relative;
  background: var(--va-checkbox-background, --va-checkbox-square-background-color);
  border: var(--va-checkbox-square-border, var(--va-control-border));
  border-radius: var(--va-checkbox-square-border-radius);
}
.va-checkbox--on-keyboard-focus.va-checkbox .va-checkbox__square {
  transition: all, 0.6s, ease-in;
  outline: 2px solid var(--va-focus);
}
.va-checkbox__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  white-space: nowrap;
  -webkit-clip-path: inset(100%);
          clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}
.va-checkbox__label {
  display: var(--va-checkbox-label-display);
  position: relative;
  cursor: var(--va-checkbox-label-cursor);
}
.va-checkbox__icon {
  pointer-events: none;
  position: absolute;
}
.va-checkbox--selected .va-checkbox__icon {
  color: var(--va-checkbox-selected-icon-color);
}
.va-checkbox--indeterminate .va-checkbox__icon {
  color: var(--va-checkbox-indeterminate-icon-color);
}