vuestic-ui/dist/web-components/src/components/va-radio/VaRadio.js

Vue 3 UI Framework

import { _ as _sfc_main } from "./VaRadio.vue_vue_type_script_setup_true_lang.js";
import { _ as _export_sfc } from "../../../plugin-vue_export-helper.js";
const _style_0 = ':root,\n:host {\n  --va-radio-display: inline-flex;\n  --va-radio-cursor: pointer;\n  --va-radio-position: relative;\n  --va-radio-gap: 0.5rem;\n  --va-radio-transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);\n  --va-radio-disabled-cursor: default;\n  --va-radio-border-color: var(--va-background-border);\n  --va-radio-background: transparent;\n  /* Icon */\n  --va-radio-icon-transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);\n  --va-radio-icon-width: 1.4rem;\n  --va-radio-icon-height: 1.4rem;\n  --va-radio-icon-border-radius: 100%;\n  --va-radio-icon-border: var(--va-background-border) solid var(--va-form-element-border-width);\n  /* Dot */\n  --va-radio-dot-transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);\n  --va-radio-dot-top: 50%;\n  --va-radio-dot-left: 50%;\n  --va-radio-dot-right: 50%;\n  --va-radio-dot-bottom: 50%;\n  --va-radio-dot-border-radius: 100%;\n  --va-radio-dot-background-color: inherit;\n  --va-radio-dot-opacity: 0;\n  /* Background */\n  --va-radio-background-transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);\n  --va-radio-background-top: -0.35rem;\n  --va-radio-background-left: -0.35rem;\n  --va-radio-background-right: -0.35rem;\n  --va-radio-background-bottom: -0.35rem;\n  --va-radio-background-background-color: var(--va-background-element);\n  --va-radio-background-border-radius: 100%;\n  --va-radio-background-z-index: 0;\n  --va-radio-background-opacity: 0;\n  /* Text */\n  --va-radio-text-display: inline-flex;\n  --va-radio-text-margin-left: 0.5rem;\n  --va-radio-text-margin-right: 0;\n}\n.va-radio {\n  display: flex;\n  width: -moz-max-content;\n  width: max-content;\n  flex-direction: var(--51a951e8);\n  gap: var(--va-radio-gap);\n}\n.va-radio__square {\n  display: inline-flex;\n  align-items: center;\n  width: 100%;\n  cursor: var(--va-radio-cursor);\n  position: var(--va-radio-position);\n  margin-top: var(--va-radio-margin-top);\n  margin-right: var(--va-radio-margin-right);\n  transition: var(--va-radio-transition, var(--va-swing-transition));\n  font-family: var(--va-font-family);\n  color: var(--c36087e8);\n}\n.va-radio + .va-radio {\n  margin-top: 0.5rem;\n}\n.va-radio .va-radio:last-child {\n  margin: 0;\n}\n.va-radio--disabled {\n  cursor: var(--va-radio-disabled-cursor);\n}\n.va-radio--readonly {\n  cursor: default;\n  pointer-events: none;\n}\n.va-radio--readonly .va-radio--left-label,\n.va-radio--readonly .va-radio__text {\n  cursor: initial;\n  pointer-events: none;\n}\n.va-radio--left-label {\n  flex-direction: row-reverse;\n  display: inline-flex;\n  align-items: center;\n}\n.va-radio--left-label.va-radio__square {\n  justify-content: space-between;\n}\n.va-radio__input {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  border: 0;\n  padding: 0;\n  white-space: nowrap;\n  -webkit-clip-path: inset(100%);\n          clip-path: inset(100%);\n  clip: rect(0 0 0 0);\n  overflow: hidden;\n}\n.va-radio__icon {\n  transition: var(--va-radio-icon-transition);\n  display: flex;\n  align-items: center;\n  width: var(--va-radio-icon-width);\n  height: var(--va-radio-icon-height);\n  border-color: var(--0a80be0b);\n  border-radius: var(--va-radio-icon-border-radius);\n  background: var(--va-radio-background);\n  position: relative;\n  border: var(--va-radio-icon-border);\n  box-sizing: border-box;\n  margin: 4px;\n}\n.va-radio__input:disabled + .va-radio__icon {\n  cursor: default;\n  opacity: 0.4;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n}\n.va-radio__input:focus-visible + .va-radio__icon {\n  outline: 2px solid var(--va-focus) !important;\n  border-radius: "inherit";\n}\n.va-radio__icon__dot {\n  transition: var(--va-radio-dot-transition, var(--va-swing-transition));\n  position: absolute;\n  top: var(--va-radio-dot-top);\n  left: var(--va-radio-dot-left);\n  right: var(--va-radio-dot-right);\n  bottom: var(--va-radio-dot-bottom);\n  border-radius: var(--va-radio-dot-border-radius);\n  opacity: var(--va-radio-dot-opacity);\n  border-color: var(--d0106fa4);\n  background-color: var(--14e194ec);\n}\n.va-radio__input:checked + .va-radio__icon .va-radio__icon__dot {\n  opacity: 1;\n  top: 0.25rem;\n  left: 0.25rem;\n  right: 0.25rem;\n  bottom: 0.25rem;\n}\n.va-radio__icon__background {\n  transition: var(--va-radio-background-transition, var(--va-swing-transition));\n  position: absolute;\n  top: var(--va-radio-background-top);\n  left: var(--va-radio-background-left);\n  right: var(--va-radio-background-right);\n  bottom: var(--va-radio-background-bottom);\n  border-radius: var(--va-radio-background-border-radius);\n  z-index: var(--va-radio-background-z-index);\n  opacity: var(--va-radio-background-opacity);\n  background-color: var(--36c6f557);\n}\n.va-radio__square:hover .va-radio__icon__background {\n  opacity: 0.2;\n}\n.va-radio--disabled .va-radio__square:hover .va-radio__icon__background {\n  opacity: 0;\n}\n.va-radio__text {\n  display: var(--va-radio-text-display);\n  margin-left: var(--va-radio-text-margin-left);\n  margin-right: var(--va-radio-text-margin-right);\n  white-space: nowrap;\n}\n.va-radio--disabled .va-radio__text {\n  cursor: default;\n  opacity: 0.4;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n}\n.va-radio--left-label .va-radio__text {\n  margin-right: var(--va-radio-text-margin-left);\n  margin-left: var(--va-radio-text-margin-right);\n}';
const _VaRadio = /* @__PURE__ */ _export_sfc(_sfc_main, [["styles", [_style_0]]]);
export {
  _VaRadio as _
};
//# sourceMappingURL=VaRadio.js.map