Agent Guidance Core User Guide

Please email support@creovai.com for omissions or errors.
×
Menu
Search
 
   
   
   
 

Example Stylesheet Structures

 
There are two general approaches that can be taken to configuring Stylesheets: defining a core style per-Control type, or defining common stylings across common elements. These two approaches can be combined, but below they will be demonstrated in their pure and unmixed capacities.
 
Regardless of approach, it's recommended to make use of SCSS variables to ensure a consistent style and easy updates.
 

Control Stylings

This approach is more focused on styling individual Controls explicitly. Many Controls contain multiple sub-elements which can be individually styled; in some cases, the definitions below include multiple ways to style the same sub-element and only one approach is needed. For example, within the styling of a List Box, if using the select styling there is no need to also specify the .dropdown and .listbox stylings.
// Core elements
// Background definition - it is possible to style the background without needing any additional selector
 
#page-logo {
    // Logo definition
}
 
//Control definitions
.control-accordion-start {
    // Accordion - Start
    .element-label {
        // Label
    }
    .fal {
        // Label
    }
}
 
.control-back-button {
    .btn {
        // Back Button
    }
}
 
.control-button {
    .btn {
        // Button
    }
}
 
.control-button-tabs {
    .btn {
        // Button - Tabs
    }
    .btn:hover {
        // Button - Tabs with the mouse hovering over them
    }
}
 
.control-check-box {
    // Check Box
    span {
        // Left label
    }
    input {
        // Checkboxes
    }
    label {
        // Checkbox labels
    }
}
 
.control-clear-data {
    .btn {
        // Clear Data
    }
}
 
.control-conditional-button {
    .btn {
        // Conditional Button
    }
}
 
.control-date {
    // Date
    label {
        // Label
    }
    input {
        // Date input
    }
}
 
.control-dialog {
    .btn {
        // Dialog
    }
}
 
.control-email {
    // Email
    // The Email Control has minimal support currently, only allowing easy styling of its outer cell and button
    .btn {
        // Button
    }
}
 
.control-external-data-source {
    .btn {
        // External Data Source
    }
}
 
.control-floating-control-start tbody {
    // Floating Control - Start
    // The styling of Floats is somewhat different, as this approach is to style the created panel rather than the Control
    // Be aware that styling in this section may override elements of the styling of contained Fields
    tr, td {
        // Panel
    }
}
 
.control-gotopage {
    // GoToPage
    // You can style all GoToPage inputs, only dropdown-type inputs, or only panel-type inputs - select the desired item below
    .btn {
        // Button
    }
    select {
        // Any list inputs
        option {
            // List items
        }
    }
    .dropdown {
        // Only dropdown-type list inputs
        option {
            // List items
        }
    }
    .listbox {
        // Only panel-type list inputs
        option {
            // List items
        }
    }
}
 
.control-iframe {
    // IFrame
}
 
.control-image {
    img {
        // Image
    }
}
 
.control-javascript-button {
    .btn {
        // JavaScript - Button
    }
}
 
.control-list-box {
    // List Box
    // You can style all List Box inputs, only dropdown-type inputs, or only panel-type inputs - select the desired item below
    label {
        // Left label
    }
    select {
        // Any list inputs
        option {
            // List items
        }
    }
    .dropdown {
        // Only dropdown-type inputs
        option {
            // List items
        }
    }
    .listbox {
        // Only panel-type inputs
        option {
            // List items
        }
    }
}
 
.control-mail-merge {
    .btn {
        // Mail Merge
    }
}
 
.control-outcome-button {
    .btn {
        // Outcome - Button
    }
}
 
.control-outcome-list {
    // Outcome - List
    // You can style all Outcome - List inputs, only dropdown-type inputs, or only panel-type inputs - select the desired item below
    .btn {
        // Button
    }
    select {
        // Any list inputs
        option {
            // List items
        }
    }
    .dropdown {
        // Only dropdown-type list inputs
        option {
            // List items
        }
    }
    .listbox {
        // Only panel-type list inputs
        option {
            // List items
        }
    }
}
 
.control-progress-bar {
    // Progress Bar
    .progress {
        // Frame
    }
    .progress-bar {
        // Fill
    }
    .progress-bar-label {
        // Label
    }
}
 
.control-radio-button {
    // Radio Button
    span {
        // Left label
    }
    input {
        // Radio buttons
    }
    label {
        // Radio button labels
    }
}
 
.control-side-panel-control-start {
    // Sidepanel Control - Start
    // The styling of Sidepanels is somewhat different, as this approach is to style the created panel
    // Be aware that styling in this section may override elements of the styling of contained Fields
    tr, td {
        // Panel
    }
}
 
.control-sms {
    // SMS
    // The SMS Control has minimal support currently, only allowing easy styling of its outer cell and button
    .btn {
        // Button
    }
}
 
.control-space {
    // Space
}
 
.control-table {
    // Table
    // The Table Control has no support currently, and is included for future reference only
}
 
.control-textarea {
    // Textarea
    label {
        // Left label
    }
    textarea {
        // Text input
    }
}
 
.control-text-box {
    // Text Box
    label {
        // Left label
    }
    input {
        // Text input
    }
}
 
.control-text-label {
    // Text Label
}
 
.control-toast-popup {
    .btn {
        // Toast Popup
    }
}
 
.control-toast-remove {
    .btn {
        // Toast Remove
    }
}
 
.control-web-frameset-close {
    .btn {
        // Web Frameset - Close
    }
}
 
.control-web-frameset-open {
    .btn {
        // Web Frameset - Open
    }
}
 
 

Element Stylings

This approach has various different levels of specificity that can be used, so it is unlikely that the entire definition will be used. For example, if using the select styling there is no need to also specify the .dropdown and .listbox stylings.
// Core elements
// Background definition - it is possible to style the background without needing any additional selector
 
#page-logo {
    // Logo definition
}
 
 
// Button-type elements
.btn {
    // All button elements
 
    &:hover {
        // Button elements with the mouse hovering over them
    }
}
 
 
// Label-type elements
.textlabel {
    // All label elements
}
 
.textlabel:not(input + .textlabel) {
    // All label elements, excluding the right-cell labels for Radio Button and Check Box Controls
}
 
input + .textlabel {
    // Right-cell label elements only
}
 
 
// Input-type elements
// The first definition specifies all types of inputs for all types of Controls
input:not(div + input), textarea, select {
    // Input elements for Date, GoToPage, List Box, Outcome - List, Text Box, and Textarea Controls
    option {
        // Contained list item elements
    }
}
 
// The following definitions specify certain types of inputs for specific Controls
input:not(div + input) {
    // Input elements for Date and Text Box Controls
}
 
textarea {
    // Input elements for Textarea Controls
}
 
select {
    // All list input elements for GoToPage, List Box, and Outcome - List Controls
    option {
        // Contained list item elements
    }
}
 
.dropdown {
    // Dropdown-type list input elements for GoToPage, List Box, and Outcome - List Controls
    option {
        // Contained list item elements
    }
}
 
.listbox {
    // Panel-type list input elements for GoToPage, List Box, and Outcome - List Controls
    option {
        // Contained list item elements
    }
}