Widget scss file

The Genero Web Client for JavaScript (GWC-JS) widget scss file contains the widget styles.

The scss files contain the colors, fonts and variables that define styles.

When the sass file is processed, it takes the variables you define for colors, for example $gbc-primary-medium-color, and outputs normal CSS with our variable values placed in the CSS.

Extending a basic widget style

This sample code comes from project_dir/customization/default/sass/MyEditWidget.scss:

.gbc_MyEditWidget {
  > .title {
    padding: 0 5px;
    font-size: 8pt;
    color: $gbc-primary-medium-color;
    text-transform: none;
  }
  > input {
    flex: 1 1 0;
    line-height: 32px;
    border-bottom: solid 2px $gbc-primary-light-color;
  }
  &.gbc_Focus > input {
    border-bottom: solid 2px $gbc-primary-medium-color;
  }
}

A widget with a style in the form has a dedicated selector.

For example, in the form source (.per) for your Genero BDL application you have:

EDIT f01 = formonly.edt, STYLE="mystyle1 mystyle2 …";

You get a generated selector in the HTML structure:

class="… gbc_style_mystyle1 gbc_style_mystyle2 …"