Custom Styles

There are different ways of changing the form look and feel:

• Overriding CSS classes
• Overriding SCSS variables
• Using shadowDOM

Overriding CSS classes

The rendered forms exist inside the DOM of your application, so the rules in your CSS files will affect the form itself. In order to ease the customization, the generated DOM elements include a lot of classes so you can target exactly the elements you want with a single class name.

The classes follow this pattern: flw__COMPONENT--MODIFIER__SUBELEMENT

For example:

<div class="flw__text flw__component">
  <label class="flw__label flw__text__label flw__component__label">
    Text component with validations
  </label>
  <input class="flw__text__input flw__component__input" type="text" pattern="" value="jav">
  <div class="flw__description flw__text__description flw__component__description">
    minLength: 3 / maxLength: 6
  </div>
</div>

You can change the text component label color with:

.flw__text__label {
  color: green;
}

Or every component label with:

.flw__component__label {
  color: green;
}

The modifiers flow from the top-most element to the children.

Form example:

<div class="flw__text flw__component flw__text--invalid-minLength flw__text--invalid flw__component--invalid-minLength flw__component--invalid">
  <label class="flw__label flw__text__label flw__component__label flw__text--invalid-minLength__label flw__text--invalid__label flw__component--invalid-minLength__label flw__component--invalid__label">
    Text component with validations
  </label>
  <input class="flw__text__input flw__component__input flw__text--invalid-minLength__input flw__text--invalid__input flw__component--invalid-minLength__input flw__component--invalid__input"
    type="text" pattern="" value="ja">
  <div class="flw__description flw__text__description flw__component__description flw__text--invalid-minLength__description flw__text--invalid__description flw__component--invalid-minLength__description flw__component--invalid__description">
    minLength: 3 / maxLength: 6
  </div>
</div>

If you want to change the background color of the description of invalid text components you can use:

.flw__text--invalid__description {
  background-color: red;
}

Import CSS

In order to override CSS, add all your custom rules after importing Flowable Forms bundled styles:

import "@flowable/forms/flwforms.min.css";
// Your overriding rules here

Overriding SCSS variables

Instead of using the generated CSS, you can import the form engine SCSS files and override some of the variables. For example, you could change the colors with:

// background
$uikit-global-background: #000;
$flw-form-background-color: $uikit-global-background;

// text color
$uikit-global-emphasis-color: #ccc;
$uikit-global-color: #999;

// links, buttons, checkbox, radio, ...
$uikit-global-link-color: #e1780f;
$uikit-global-link-hover-color: #f09132;

// disabled
$uikit-form-disabled-background: #111111;
$uikit-form-disabled-color: #666666;

Or you could make the form more compact with:

$uikit-form-height: 32px;
$uikit-button-line-height: 32px;
$flw-component-margin: 3px 6px;
$flw-global-font-size: 13px !default;
$flw-global-small-font-size: 11px !default;

Import SCSS

In order to override SCSS, add all your custom vars before importing Flowable Forms styles:

// Your overriding vars
@import "node_modules/@flowable/forms/scss/index"

Using shadowDOM

Using shadowDOM you can encapsulate the engine in a "private" sub-tree in the DOM. This is useful for the form engine styles to avoid being affected/overridden because of the global ones in the host application and just change it in a more controlled way.

It is used through a Form property with the following structure:

Name	Type	Description
enabled	boolean	Enable or disable using shadowDOM. It can be disabled just not using shadowDOM prop.
css	string	Optional. Path of the main flwforms.min.css core stylesheet file.
additionalCss	string[]	Optional. Array of other stylesheet files to include and override the encapsulation.

e.g.

shadowDOM: {
  enabled: true,
  css: "css/my-flw.css",
  additionalCss: ["css/extra1.css", "css/extra2.css"]
}

NOTE: Please check your browser support for shadowDOM. In browsers that don't support shadowDOM the form will be encapsullated in an iFrame as fallback.