Robuust Vue Components

Appearance

Form ​

Global variables for Form input elements like input, select, and textarea.

Available Variables ​

Input ​

css
:root {
  --rvc-base-input-color: var(--color-slate-600);
  --rvc-base-input-bg-color: var(--color-white);
  --rvc-base-input-bg-color-disabled: var(--color-slate-100);
  --rvc-base-input-disabled-opacity: 0.7;
  --rvc-base-input-padding-x: calc(var(--spacing) * 3);
  --rvc-base-input-font-size: var(--rvc-base-font-size);
  --rvc-base-input-font-weight: var(--font-weight-normal);
  --rvc-base-input-height: calc(var(--spacing) * 9);
  --rvc-base-input-placeholder-color: var(--color-slate-400);
}

Icon ​

css
:root {
  --rvc-base-input-icon-color: var(--color-slate-400);
  --rvc-base-input-icon-size: calc(var(--spacing) * 5);
}