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 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__progress-indicator
The progress indicator when categories are loading
.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-list-panel
Applies to a category list panel excluding the search box and the buttons.
.pi-style__category-list-panel .pi-style__category-list__find-active-category-btn
Applies to a button that finds an active category in the category list panel.
.pi-style__category-list-panel .pi-style__category-list__find-active-category-btn:hover, .pi-style__category-list-panel .pi-style__category-list__find-active-category-btn:focus
Applies when a user hovers over a find active category button.
.pi-style__category-list-panel .pi-style__category-list__find-active-category-btn:active
Applies when a button that finds an active category becomes active.
.pi-style__category-list-panel .pi-style__category-list__pin-btn
Applies to a pin button that pins the category list panel to the left.
.pi-style__category-list-panel .pi-style__category-list__pin-btn:hover, .pi-style__category-list-panel .pi-style__category-list__pin-btn:focus
Applies when a user hovers over a pin button in category list panel.
.pi-style__category-list-panel .pi-style__category-list__pin-btn:active
Applies when a pin button to pin the category list panel becomes active.