Widget scss file

The Genero Browser Client (GBC) widget scss file contains the widget styles. 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 widget style

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

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

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:

// […] 
@import "MyEditWidget";