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

Vue 3 UI Framework

:root,
:host {
  --va-radio-display: inline-flex;
  --va-radio-cursor: pointer;
  --va-radio-position: relative;
  --va-radio-gap: 0.5rem;
  --va-radio-transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
  --va-radio-disabled-cursor: default;
  --va-radio-border-color: var(--va-background-border);
  --va-radio-background: transparent;
  /* Icon */
  --va-radio-icon-transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
  --va-radio-icon-width: 1.4rem;
  --va-radio-icon-height: 1.4rem;
  --va-radio-icon-border-radius: 100%;
  --va-radio-icon-border: var(--va-background-border) solid var(--va-form-element-border-width);
  /* Dot */
  --va-radio-dot-transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
  --va-radio-dot-top: 50%;
  --va-radio-dot-left: 50%;
  --va-radio-dot-right: 50%;
  --va-radio-dot-bottom: 50%;
  --va-radio-dot-border-radius: 100%;
  --va-radio-dot-background-color: inherit;
  --va-radio-dot-opacity: 0;
  /* Background */
  --va-radio-background-transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
  --va-radio-background-top: -0.35rem;
  --va-radio-background-left: -0.35rem;
  --va-radio-background-right: -0.35rem;
  --va-radio-background-bottom: -0.35rem;
  --va-radio-background-background-color: var(--va-background-element);
  --va-radio-background-border-radius: 100%;
  --va-radio-background-z-index: 0;
  --va-radio-background-opacity: 0;
  /* Text */
  --va-radio-text-display: inline-flex;
  --va-radio-text-margin-left: 0.5rem;
  --va-radio-text-margin-right: 0;
}
.va-radio {
  display: flex;
  width: -moz-max-content;
  width: max-content;
  flex-direction: var(--va-flex-direction);
  gap: var(--va-radio-gap);
}
.va-radio__square {
  display: inline-flex;
  align-items: center;
  width: 100%;
  cursor: var(--va-radio-cursor);
  position: var(--va-radio-position);
  margin-top: var(--va-radio-margin-top);
  margin-right: var(--va-radio-margin-right);
  transition: var(--va-radio-transition, var(--va-swing-transition));
  font-family: var(--va-font-family);
  color: var(--va-label-style-color);
}
.va-radio + .va-radio {
  margin-top: 0.5rem;
}
.va-radio .va-radio:last-child {
  margin: 0;
}
.va-radio--disabled {
  cursor: var(--va-radio-disabled-cursor);
}
.va-radio--readonly {
  cursor: default;
  pointer-events: none;
}
.va-radio--readonly .va-radio--left-label,
.va-radio--readonly .va-radio__text {
  cursor: initial;
  pointer-events: none;
}
.va-radio--left-label {
  flex-direction: row-reverse;
  display: inline-flex;
  align-items: center;
}
.va-radio--left-label.va-radio__square {
  justify-content: space-between;
}
.va-radio__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-radio__icon {
  transition: var(--va-radio-icon-transition);
  display: flex;
  align-items: center;
  width: var(--va-radio-icon-width);
  height: var(--va-radio-icon-height);
  border-color: var(--va-icon-computed-styles-border-color);
  border-radius: var(--va-radio-icon-border-radius);
  background: var(--va-radio-background);
  position: relative;
  border: var(--va-radio-icon-border);
  box-sizing: border-box;
  margin: 4px;
}
.va-radio__input:disabled + .va-radio__icon {
  cursor: default;
  opacity: 0.4;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.va-radio__input:focus-visible + .va-radio__icon {
  outline: 2px solid var(--va-focus) !important;
  border-radius: "inherit";
}
.va-radio__icon__dot {
  transition: var(--va-radio-dot-transition, var(--va-swing-transition));
  position: absolute;
  top: var(--va-radio-dot-top);
  left: var(--va-radio-dot-left);
  right: var(--va-radio-dot-right);
  bottom: var(--va-radio-dot-bottom);
  border-radius: var(--va-radio-dot-border-radius);
  opacity: var(--va-radio-dot-opacity);
  border-color: var(--va-icon-dot-computed-styles-border-color);
  background-color: var(--va-icon-dot-computed-styles-background-color);
}
.va-radio__input:checked + .va-radio__icon .va-radio__icon__dot {
  opacity: 1;
  top: 0.25rem;
  left: 0.25rem;
  right: 0.25rem;
  bottom: 0.25rem;
}
.va-radio__icon__background {
  transition: var(--va-radio-background-transition, var(--va-swing-transition));
  position: absolute;
  top: var(--va-radio-background-top);
  left: var(--va-radio-background-left);
  right: var(--va-radio-background-right);
  bottom: var(--va-radio-background-bottom);
  border-radius: var(--va-radio-background-border-radius);
  z-index: var(--va-radio-background-z-index);
  opacity: var(--va-radio-background-opacity);
  background-color: var(--va-icon-background-computed-styles-background-color);
}
.va-radio__square:hover .va-radio__icon__background {
  opacity: 0.2;
}
.va-radio--disabled .va-radio__square:hover .va-radio__icon__background {
  opacity: 0;
}
.va-radio__text {
  display: var(--va-radio-text-display);
  margin-left: var(--va-radio-text-margin-left);
  margin-right: var(--va-radio-text-margin-right);
  white-space: nowrap;
}
.va-radio--disabled .va-radio__text {
  cursor: default;
  opacity: 0.4;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.va-radio--left-label .va-radio__text {
  margin-right: var(--va-radio-text-margin-left);
  margin-left: var(--va-radio-text-margin-right);
}