Dashboard

.pi-style__body

This tag relates to the background of the entire dashboard. The Edit Chart screen and the Dashboard Configuration screens will however remain unchanged.

.pi-style__body textarea, .pi-style__body textarea.pi-input.with-bg

Text input areas on the themes screen.

.pi-style__body textarea[disabled], .pi-style__body textarea.pi-input.with-bg[disabled]

The text area of the whole system (when disabled)

.pi-style__body input, .pi-style__body .pi-input, .pi-style__body .pi-input, .pi-style_body. inline-placeholder-input, .pi-style__body .filter-input__container

Character input fields in the dashboard for example search boxes. Dropdown lists and multi picker lists are not affected by this change.

.pi-style__body .pi-input-label

Date input fields for example. the label for the From & To sections.

.pi-style__body input[disabled], .pi-style__body .pi-input[disabled], .pi-style__body inline-placeholder-input[disabled], .pi-style__body .filter-input__container[disabled]

Applies to inputs of the whole system (when disabled)

a

All buttons and links in the dashboard

a:hover

The hover over effect of a button / link / category name when you hover over it with your mouse.

a:visited

Applies to links that have previously been clicked.

.pi-style__page-top-nav

The top banner across the whole dashboard

.pi-style__page-top-nav a

The Category list button bit and other tool buttons across the top of the dashboard.

.pi-style__page-top-nav a:hover

When you hover one of the buttons at the top of the dashboard.

.pi-style_page-top-nav.pi-style_nav-menu a

Applies to items on the top navigation bar or items on the top right drop-down menu

.pi-style_page-top-nav .pi-style_nav-menu a:hover

Applies to items on the top navigation bar or items on the top right drop-down menu when hovered over with the mouse

.pi-style__page-top-nav__logo

The logo that appears at the top left-hand side of the dashboard screen.

.pi-style__page-content

The background of the chart / table section of the dashboard.

.pi-style__panel

Applies to panels in the dashboard such as the chart information screen and the user detail form.

.pi-style__panel > .panel-heading

Applies to the header of a panel.

.pi-style__panel > .panel-footer

Applies to the footer of a panel.

.pi-style__drawer

The category panel.

And the category objects panel

.pi-style__drawer .pi-style__category-objects_panel-content

Used to add gaps to the whole Category Object panel.

.pi-style_drawer .category-object-area-inputs

The text colour on the container (excluding buttons) that holds category objects on the dashboard screen.

.pi-style__category-objects-top-panel .section-panel__subhead

The background colour of the Category Object label.

.pi-style__category-objects-top-panel .category-object-button-panel

The background colour of the Category Object button panel.

.pi-style__category-objects-top-panel .section-panel__body

The background colour of the Category Object field.

.pi-style__drawer a

The background colour of the category label

and category object labels

.pi-style__drawer a:hover

The hover over effect on category list

.pi-style__drawer .pi-input

The input/search box on the category list

.pi-style__drawer .pi-input[disabled]

When an input area is disabled (e.g. when a category filter selection is refreshing)

.pi-style_category-objects-top-panel

Applies to the container (including buttons) that holds category objects on a dashboard screen when the category objects have been set to display on the top of the page.

.pi-style_category-objects-top-panel .category-object-area-inputs

Applies to the text colour of the container (excluding buttons) that holds category objects on a dashboard screen when the category objects have been set to display on the top of the page.

.pi-style_category-objects-top-panel a

The buttons or links that are displayed inside the category objects panel when it’s displayed at the top of the page.

.pi-style_category-objects-top-panel a:hover

The buttons or links that are displayed inside the category objects panel when it’s displayed at the top of the page when hovered over with the mouse.

.pi-style_category-objects-top-panel .pi-input

The input field of category objects when the category objects panel is displayed at the top of the page.

.pi-style_category-objects-top-panel .pi-input[disabled]

The input field (when disabled) of category objects when the category objects panel is displayed at the top of the page.

.pi-style__category-objects-slider.category-object-slider .pi_style__slider-generic-definition

This will alter the style of the slider when the category object panel is open.

.pi-style__progress-indicator

The progress indicator when categories are loading