Style

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;
}