Styles

If you want to use the predefined styles, you have two options:

Importing the css files
Importing the sass files

jsx/tsx

import '@ferdotnet/reactive-form-builder/lib/styles.css';
import '@ferdotnet/reactive-form-builder/lib/basicInputs.css';

styles.sass

@import '@ferdotnet/reactive-form-builder/lib/styles.sass';
@import '@ferdotnet/reactive-form-builder/lib/basicInputs.sass';

CSS variables

If you want to use those styles but you prefer to change the colors and some attributes, you will have to replace these css variables:

styles.sass

.rfb {
  --rfb-error-font-size: 13.5px;
  --rfb-error-color: #f73131;
  --rfb-font-size: 15px;
  --rfb-gap: 1rem;
}

styles.sass (if you imported basicInputs.css|sass)

.rfb {
  --rfb-color: #2E2C2C;
  --rfb-border-color: #EAEAEA;
  --rfb-focus-border-color: #7676A7;
  --rfb-background-color: #FFFFFF;
  --rfb-disabled-background-color: #F6F6F6;
  --rfb-input-font-size: 14px;
  --rfb-border-radius: 3px;
  --rfb-input-height: 2.5rem;
  --rfb-check-size: 1rem;
}