Customize your components style
| Css class name | Description |
|---|---|
.arlas-metric-description |
Style of metric description (below value). |
.arlas-metric-title |
Style of metric title (above value). |
.arlas-metric-value |
Style of the metric value |
| Css class name | Description |
|---|---|
| Css class name | Description |
|---|---|
| Css class name | Description |
|---|---|
| Css class name | Description |
|---|---|
| Css class name | Description |
|---|---|
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 { |
.map__visu-list--container |
Sets the style of layers switcher container { |
PowerbarsComponent
| Css class name | Description |
|---|---|
.powerbar__powerbar--count |
Style of counts. |
.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 |
Style of all powerbars rightband when none of them is selected. { |
.powerbars__powerbar--progression-default-colour |
Style of all powerbars progression bar when no color is specified. { |
.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. |
PowerbarsComponent
| Css class name | Description |
|---|---|
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__bottom_loading |
Sets the bottom-loading-div style |
.resultlist__filter, |
Sets the filters container border style. |
.resultlist__grid-detail |
Sets the detail grid border style. |
.resultlist__header, |
Sets the header border style. |
.resultlist__header--columns |
Sets columns names style. |
.resultlist__header--columns__sort--icon |
Sets the sort column icon style. |
.resultlist__lastline |
Sets the last row border style. (list mode) |
.resultlist__loading |
Sets the loading-div style |
.resultlist__tools, |
Sets the border style of the tools list container (select-all, select-in-between, grid-list-mode, ...). |
.resultlist__tools--menu |
Sets the menu button container style. |
.resultlist__tools--mode |
Sets the choose-mode-toggle-button container style. |
.resultlist__tools--select |
Sets the selection tools style. |
.resultlist__top_loading |
Sets the top-loading-div style |
ResultDetailedItemComponent
| Css class name | Description |
|---|---|
.result-attachment |
Sets the style of the attachment in li tag |
.result-attachment-link |
Sets the style of the attachment link in a tag |
.result-attachments-title |
Sets the style of attachments section's title |
.resultdetaileditem |
Sets all texts style. |
.resultdetaileditem-key |
Sets key style. (key: value part) |
.resultdetaileditem-value |
Sets value style (key: value part) |
.resultdetaileditem__actions |
Sets actions chips style. Moreover, if you want to style a specific action chip, you can use '{{action.id}}-action' css class. |
ResultFilterComponent
| Css class name | Description |
|---|---|
.resultlist__header--filters |
Sets filters container 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. |
| Css class name | Description |
|---|---|
| Css class name | Description |
|---|---|
| Css class name | Description |
|---|---|
| Css class name | Description |
|---|---|
HistogramComponent
| Css class name | Description |
|---|---|
.brush .selection |
Sets the brush selection style |
.headband_currentselection |
Sets the currently selected headbands style (a headband is a band over the bar) |
.headband_currentselection_max |
Sets the currently selected headbands style (a headband is a band over the bar) |
.headband_currentselection_min |
Sets the currently selected headbands style (a headband is a band over the bar) |
.headband_fullyselected |
Sets the fully selected headbands style (a headband is a band over the bar) |
.headband_notselected |
Sets the not selected headbands style (a headband is a band over the bar) |
.headband_partlyselected |
Sets the partly selected headbands style (a headband is a band over the bar) |
.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 |
Sets the unselected selected bars style |
.histogram__chart--bar__currentselection |
Sets the currently 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--current-selected--curve |
Sets the style of the curve's selected parts |
.histogram__chart--fixed-selected--area |
Sets the style of the area's selected parts |
.histogram__chart--fixed-selected--curve |
Sets the style of the curve's selected parts |
.histogram__chart--unselected--area |
Sets the style of the area's unselected parts |
.histogram__chart--unselected--curve |
Sets the style of the curve's unselected parts |
.histogram__description |
Sets the description part that includes title and start/end values |
.histogram__description__endvalue |
Sets endvalue part style{ |
.histogram__description__endvalue--background |
Sets endvalue background style |
.histogram__description__startvalue |
Sets startvalue part style |
.histogram__description__startvalue--background, |
Sets startvalue background style |
.histogram__description__title |
Sets title's style |
.histogram__remove |
Sets the remove tooltip's style |
.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 |
.slider-brush .selection |
Sets the brush selection 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 |
| Css class name | Description |
|---|---|
| Css class name | Description |
|---|---|
.donut__arc |
Sets arcs style |
.donut__tooltip |
Sets the tooltip style |