Skip to content

Customize your components style

Css class name Description
.donut__arc Sets arcs style
.donut__tooltip Sets the tooltip style

MapglComponent

Css class name Description
.boxdraw Sets the bbox style
.map__layers-list--container Sets the style of layers switcher container
.map__layers-radio-button Sets the style of the radio-button
.map__layers-radio-group Sets the style of the radio-group
.map__layers-stylegroup-name Sets the style of Style group name
Css class name Description

HistogramComponent

Css class name Description
.brush .selection Sets the brush selection style
.histogram__axis Sets the axes style
.histogram__brush--handles Sets the brush handles style
.histogram__brush-tooltip Sets all the brush tooltips styles
.histogram__brush-tooltip__horizontal--left, Sets the horizontal left brush tooltip style
.histogram__brush-tooltip__horizontal--right, Sets the horizontal right brush tooltip style
.histogram__brush-tooltip__vertical--left, Sets the vertical left brush tooltip style
.histogram__brush-tooltip__vertical--right Sets the vertical right brush tooltip style
.histogram__chart--bar__currentselection Sets the currently selected bars style
.histogram__chart--bar Sets the unselected selected bars style
.histogram__chart--bar__fullyselected Sets the fixed selected bars style
.histogram__chart--bar__partlyselected Sets the partly selected bars style
.histogram__chart--current-selected--area Sets the style of the area's selected parts
.histogram__chart--fixed-selected--area Sets the style of the area's selected parts
.histogram__chart--unselected--area Sets the style of the area's unselected parts
.histogram__description Sets the description part that includes title and start/end values
.histogram__description__endvalue--background Sets endvalue background style
.histogram__description__endvalue Sets endvalue part style{
.histogram__description__startvalue--background, Sets startvalue background style
.histogram__description__startvalue Sets startvalue part style
.histogram__description__title Sets title's style
.histogram__remove Sets the remove tooltip's style
.histogram__swimlane-height--tick Sets the horizontal tick on each bar bar in the case of fixedHeight swimlanes
.histogram__swimlane--vertical-tooltip-line Sets the vertical line that's shown when hovering bars in swimlane
.histogram__ticks Sets the ticks style
.histogram__tooltip Sets the tooltip style
.swimlane-label-container-hovered Sets the hovered label container style of the swimlane
.swimlane-label-container-neutral Sets all labels containers style of the swimlane when none of them are selected
.swimlane-label-container-selected Sets the selected labels containers style of the swimlane
.swimlane-label-container-unselected Sets the unselected labels containers style of the swimlane
.swimlane-label-neutral Sets all labels style of the swimlane when none of them are selected
.swimlane-label-selected Sets the selected labels style of the swimlane
.swimlane-label-unselected Sets the unselected labels style of the swimlane
.tick text Sets the labels style

ResultGridTileComponent

Css class name Description
.resultgrid--container-highlight-false Sets the grid container style.
.resultgrid__icon_check Sets the checkbox icon style.
.resultgrid__img Sets the image style.
.resultgrid__title-highlight-false Sets the grid title style.

ResultFilterComponent

Css class name Description
.resultlist__header--filters Sets filters container style.

ResultListComponent

Css class name Description
.resultgrid--checkbox__count Sets the number of selected items style
.resultlist__body--detailed-item Sets the last row border style. (list mode)
.resultlist__body--item Sets a row border style. (list mode)
.resultlist__filter, Sets the filters container border style.
.resultlist__grid-detail Sets the detail grid border style.
.resultlist__header--columns Sets columns names style.
.resultlist__header--columns__geosort--icon--active Sets the activated geosort icon style.
.resultlist__header--columns__geosort--icon, Sets the deactivated geosort icon style.
.resultlist__header--columns__sort--icon Sets the sort column icon style.
.resultlist__header, Sets the header border style.
.resultlist__lastline Sets the last row border style. (list mode)
.resultlist__moredata Sets the moredata-loading-div style
.resultlist__tools--actions Sets the actions button container style.
.resultlist__tools, Sets the border style of the tools list container (select-all, select-in-between, grid-list-mode, ...).
.resultlist__tools--mode Sets the choose-mode-toggle-button container style.
.resultlist__tools--select-between Sets the select-in-between container style.
.resultlist__tools--select Sets the selection tools style.

ResultItemComponent

Css class name Description
.resultitem__cell--label Sets labels style.
.resultitem__cell__toggle--icon Sets the toggle icon style.
.resultitem__icon_check Sets the checkbox icon style.

ResultDetailedItemComponent

Css class name Description
.resultdetaileditem__actions Sets actions chips style. Moreover, if you want to style a specific action chip, you can use '{{action.id}}-action' css class.
.resultdetaileditem Sets all texts style.
.resultdetaileditem-key Sets key style. (key: value part)
.resultdetaileditem-value Sets value style (key: value part)

ResultDetailedGridComponent

Css class name Description
.resultgrid__info-button Sets both show-details and show-image buttons style.

PowerbarsComponent

Css class name Description
.powerbar__powerbar--progression--neutral-state, Style of all powerbars when none of them is selected.
.powerbar__powerbar--progression--selected-bar, Style of selected powerbars.
.powerbar__powerbar--progression--unselected-bar, Style of unselected powerbars.
.powerbar__powerbar--term Style of terms.
.powerbars__powerbar--neutral-state, Sets all powerbars containers when none of them is selected. A powerbar container's width is 100% of the component's container.
.powerbars__powerbar--progression--selected-no-mounted-bar Style of selected-no-mounted powerbars.
.powerbars__powerbar--selected-bar, Sets selected powerbars containers. A powerbar container's width is 100% of the component's container.
.powerbars__powerbar--selected-no-mounted-bar Sets selected powerbars but not return in aggregation containers. A powerbar container's width is 100% of the component's container.
.powerbars__powerbar--unselected-bar, Sets unselected powerbars containers. A powerbar container's width is 100% of the component's container.