Widgets specific variables

This section lists the theme variables that are specific to widgets.

About widgets

A widget can refer to anything, but in GBC, widgets typically refer to:

Genero form items, such as buttons and comboboxes
GBC layout elements, such as the chromebar and application launcher
Application host elements, such as session sidebar, main container widget, and log player

Tip:

You can see examples of widgets using the demos application. Enter the URL http://localhost:6394/ua/r/gwc-demo and navigate to User Interface > UI Basics > Widgets.

Note:

gbc-*Widget-* variables apply only to GBC widgets. For example, gbc-ButtonWidget-* variables only apply to Button widgets as defined on a Genero form, while mt-button-* variables apply to all buttons in the application. For variables that apply to non-GBC as well as GBC components, see Material variables.

Widget CSS class naming pattern

GBC widget CSS classes comply with a structured naming convention based on BEM notation.

BEM, which stands for block, element, modifier, is a methodology for naming and organizing CSS classes in a way that makes it clearer what widget each CSS class represents and how it relates to other classes.

The block represents the highest level of the widget and inside the block, there are various other elements and modifiers, which also have class names defined by the BEM notation. GBC widgets follow these naming patterns to construct CSS class names:

Class BEM naming convention Example

Block

The notation for classes that represent blocks (widgets) follow these patterns:

Table 2. Block
Block	Pattern
`gbc_*Widget`	The block is prefixed by `gbc` followed by an underscore (`_`) and then the widget name.

The gbc_ListDropDownWidget class.

Element

The notation for classes that represent elements and sub-parts of the block follow these patterns:

Table 3. Elements
Block element or sub-part	Pattern
`gbc_*Widget__part`	The element class begins after the `gbc_` prefix with the block name, followed by two underscores (`__`), and then the element name.
`gbc_*Widget__subPart`	If the element class is a subpart of the block, it begins after the `gbc_` prefix with the block name, followed by two underscores (`__`), and then a combination of the element name with the subpart name in camel case (`camelCase`).

gbc_ListDropDownWidget__item is an element of ListDropDownWidget
gbc_ListDropDownWidget__itemText is a sub part of the item element within ListDropDownWidget.

Modifier

Modifiers change the appearance or behavior of the block or element. The notation for classes that represent modifiers of blocks and elements follow these patterns:

Table 4. Modifiers
Modifier of block or element	Pattern
`gbc_*Widget.gbc_modifier`	If the modifier class modifies the block, it begins after the `gbc_` prefix with the block name, followed by a dot (`.`) and then the name of the modifier class.
`gbc_*Widget__part.gbc_modifer`	If the modifier class modifies an element of the block, it begins after the `gbc_` prefix with the block name, followed by two underscores (`__`) and then the element name, followed by a dot (`.`) and then the name of the modifier class.

gbc_CheckBoxWidget.gbc_Focus: gbc_CheckBoxWidget has a different variation when it has the focus that is implemented by the gbc_Focus class.
gbc_CheckBoxWidget__box.gbc_checked: the checkbox icon of the widget has a different variation when selected that is implemented by the gbc_checked class.