Style
- 03 Nov 2020
- 1 Minute to read
- Contributors
- Print
- DarkLight
Style
- Updated on 03 Nov 2020
- 1 Minute to read
- Contributors
- Print
- DarkLight
Article summary
Did you find this summary helpful?
Thank you for your feedback!
Desktop functions use colors set in _config.scss. For more information, see Comflow Styling.
Tile refers to the whole desktop function.
Used Variables
| Name | Description |
|---|---|
| $action‑hover‑background‑color | Background color on whole tile |
| $theme‑dark‑color (opacity 0.9) | Color on text in tile |
Custom Style
It is also possible to add custom style to desktop functions. Override or add properties to classes in the Custom.css.
| Class Name | Description |
|---|---|
| tile-container | Main container div element |
| tile-image-container | Image or icon container div element |
| tile-text-container | Text container div element. Contains a h1 element |
| tile-image-default | Default image displayed when Display is set to Text |
/* Set background color to 'Dark Sea Green' for all desktop functions */
.tile-container {
background-color: darkseagreen;
}
/* Set icon color to 'Pink' */
.tile-image-container {
color: pink;
}
/* Set text color to 'White' */
.tile-text-container h1{
color: white;
}
Custom Style to Specific Tasks
Each tile container has a data attribute with the task id. This enables applying style to desktop functions for specific tasks.
/* Set background color to 'Dark Slate Gray' for desktop function 'My Worklist' (with task id 'AsynchWorkflow/MyWorkListsV4') */
.tile-container[data-task-id="AsynchWorkflow/MyWorkListsV4"] {
background-color: darkslategreen;
}
Was this article helpful?