Robuust Vue Components

Appearance

Dialogs ​

Dialogs variables are shared variables between the Drawer and Modal components.

Available Variables ​

Global ​

css
:root {
  --rvc-dialog-backdrop-bg-color: --alpha(var(--color-slate-900) / 50%);
  --rvc-dialog-padding-x: calc(var(--spacing) * 4);
  --rvc-dialog-padding-y: calc(var(--spacing) * 4);
}
css
:root {
  --rvc-dialog-header-bg-color: var(--color-white);
}

Close Button ​

css
:root {
  --rvc-dialog-close-size: calc(var(--spacing) * 6);
  --rvc-dialog-close-color: var(--color-slate-700);
  --rvc-dialog-close-color-hover: var(--color-slate-900);
}

Title ​

css
:root {
  --rvc-dialog-title-color: var(--color-slate-900);
  --rvc-dialog-title-font-size: var(--text-xl);
  --rvc-dialog-title-font-weight: var(--font-weight-bold);
  --rvc-dialog-title-font-family: var(--font-sans);
}

Content ​

css
:root {
  --rvc-dialog-content-bg-color: var(--color-white);
}
css
:root {
  --rvc-dialog-footer-bg-color: var(--color-slate-50);
  --rvc-dialog-footer-gap: calc(var(--spacing) * 2);
}

Transition ​

css
:root {
  --rvc-dialog-transition-timing-function: ease-in-out;
  --rvc-dialog-transition-duration: 500ms;
}