Widget scss file

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;
  }
}

// […] 
@import "MyEditWidget";