Button
.pi-style__btn-primary
Applies to main action buttons (with a ‘main’ colour) such as the ‘Apply’ button on the category objects panel.
.pi-style__btn-primary[disabled]
Applies to main action buttons (with a ‘main’ colour) - when disabled.
.pi-style__btn-primary:hover, .pi-style__btn-primary:focus
Applies when a user hovers over a main action button.
.pi-style__btn-primary[disabled]:hover, .pi-style__btn-primary[disabled]:focus
Applies when a user hovers over a disabled main action button.
.pi-style__btn-default
Applies to buttons such as the pin button on the category and category objects panels.
.pi-style__btn-default[disabled]
Applies when a button such as the pin button is disabled.
.pi-style__btn-default:hover, .pi-style__btn-default:focus
Applies when a user hovers over a button such as the pin button in the category and category objects panels.
.pi-style__btn-default[disabled]:hover, .pi-style__btn-default[disabled]:focus
Applies when a user hovers over a disabled button such as the pin button.
.pi-style__btn-danger
The “Delete Selected” buttons that are in the config area
.pi-style__btn-danger[disabled]
Applies when a button such as ‘Delete Selected’ is disabled.
.pi-style__btn-danger:hover, .pi-style__btn-danger:focus
The hover over effect on the “Delete Selected” button in the config area.
.pi-style__btn-danger[disabled]:hover, .pi-style__btn-danger[disabled]:focus
The hover over effect on the “Delete Selected” button (when disabled) in the config area.
.pi-style__btn-warning
The ‘Move Selected’ button in the config screens
.pi-style__btn-warning[disabled]
Applies when a button such as ‘Move Selected’ is disabled.
.pi-style__btn-warning:hover, .pi-style__btn-warning:focus
The hover over effect on the ‘Move selected’ button in the config screens.
.pi-style__btn-warning[disabled]:hover, .pi-style__btn-warning[disabled]:focus
The hover over effect on the ‘Move selected’ button (when disabled) in the config screens.
Multi-select modal buttons:
The below CSS classes apply to the buttons in a multi-select value modal that is used to display available filter values:
.pi-style__btn-multi-select-modal-cancel
Default styling for the ‘Cancel’ button
.pi-style__btn-multi-select-modal-cancel[disabled]
Styling for the ‘Cancel’ button when it is disabled
.pi-style__btn-multi-select-modal-cancel:hover, .pi-style__btn-multi-select-modal-cancel:focus
Styling for the ‘Cancel’ button when it is hovered over or focused
.pi-style__btn-multi-select-modal-cancel:active
Styling for the ‘Cancel’ button when it is actively being clicked or pressed
.pi-style__btn-multi-select-modal-cancel[disabled]:hover, .pi-style__btn-multi-select-modal-cancel[disabled]:focus
The hover over effect on the ‘Cancel’ button when disabled
.pi-style__btn-multi-select-modal-apply
Default styling for the ‘Apply’ button
.pi-style__btn-multi-select-modal-apply[disabled]
Styling for the ‘Apply’ button when it is disabled
.pi-style__btn-multi-select-modal-apply:hover, .pi-style__btn-multi-select-modal-apply:focus
Styling for the ‘Apply’ button when it is hovered over or focused
.pi-style__btn-multi-select-modal-apply:active
Styling for the ‘Apply’ button when it is actively being clicked or pressed
.pi-style__btn-multi-select-modal-apply[disabled]:hover, .pi-style__btn-multi-select-modal-apply[disabled]:focus
The hover over effect on the ‘Apply’ button when disabled
.pi-style__btn-multi-select-modal-selection
Default styling for the selection buttons ('Clear', ‘All’, ‘None')
.pi-style__btn-multi-select-modal-selection[disabled]
Styling for the for the selection buttons ('Clear', ‘All’, ‘None') when it is disabled
.pi-style__btn-multi-select-modal-selection:hover, .pi-style__btn-multi-select-modal-selection:focus
Styling for the selection buttons ('Clear', ‘All’, ‘None') when it is hovered over or focused
.pi-style__btn-multi-select-modal-selection:active
Styling for the selection buttons ('Clear', ‘All’, ‘None') when it is actively being clicked or pressed
.pi-style__btn-add
Styling applied globally to an ‘add’ button across various dashboard components.
.pi-style__btn-add[disabled]
Styling applied to a disabled state of an ‘add’ button used across various dashboard components.
.pi-style__btn-add:hover, .pi-style__btn-add:focus
Styling applied when the user hovers over an ‘add’ button across various dashboard components.
.pi-style__btn-add:active
Styling applied to an ‘add’ button when the button is active/selected across various dashboard componenets.
.pi-style__btn-close
Styling applied globally to a ‘close’ button across various dashboard components.
.pi-style__btn-close[disabled]
Styling applied to a disabled state of a ‘close’ button used across various dashboard components.
.pi-style__btn-close:hover, .pi-style__btn-close:focus
Styling applied when the user hovers over a ‘close’ button across various dashboard components.
.pi-style__btn-close:active
Styling applied to a ‘close’ button when the button is active/selected across various dashboard components.
.pi-style__btn-remove
Styling applied globally to a ‘remove’ button across various dashboard components.
.pi-style__btn-remove[disabled]
Styling applied to a disabled state of a ‘close’ button used across various dashboard components.
.pi-style__btn-remove:hover, .pi-style__btn-remove:focus
Styling applied when the user hovers over a ‘remove’ button across various dashboard components.
.pi-style__btn-remove:active
Styling applied to a ‘remove’ button when the button is active/selected across various dashboard components.
.pi-style__btn-sort
Styling applied globally to a ‘sort’ button across various dashboard components.
.pi-style__btn-sort[disabled]
Styling applied to a disabled state of a ‘sort’ button used across various dashboard components.
.pi-style__btn-sort:hover, .pi-style__btn-sort:focus
Styling applied when the user hovers over a ‘sort’ button across various dashboard components.
.pi-style__btn-sort:active
Styling applied to a ‘sort’ button when the button is active/selected across various dashboard components.