The Genero Browser Client (GBC) widget scss file contains the widget styles.

Overview

The scss files contain the colors, fonts, and variables that define styles. When the scss file is processed, it takes the variables you define for colors, for example theme-primary-emphasis-background-color, and outputs normal CSS with your variable values placed in the CSS.

Extending a basic widget style

You can extend a widget style by creating a .scss file, then importing that file in the customization.scss file.

For example, if you have registered a widget in gbc-project-dir/customization/customization-project-dir/js/MyEditWidget.js, like:

cls.WidgetFactory.registerBuilder('Edit', cls.MyEditWidget);

You can create a file gbc-project-dir/customization/customization-project-dir/sass/MyEditWidget.scss containing:

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

NOTE :Don't forget to: *

• Import this file in gbc-project-dir/customization/customization-project-dir/sass/customization.scss, like:

// […]
@import "MyEditWidget";

Generated selectors

A widget with a style in the form has a dedicated selector. For example, in the form source (shown here using the .per file syntax), you have:

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

You get a generated selector in the HTML structure, in the format gbc_style_stylename:

class= "… gbc_style_mystyle1 gbc_style_mystyle2 …"

These selectors may be used to do advanced styling using CSS. The advantage of using these over Genero presentation styles (.4st files) is that it provides a much more powerful framework for implementing changes. The disadvantage, however, is a lack of portability across the various Genero front-ends.