Login
    Contents x
    _config.scss
    • 16 Apr 2024
    • 2 Minutes to read
    • Contributors
    • Print
    • Dark
      Light
    Contents

    _config.scss

    • Updated on 16 Apr 2024
    • 2 Minutes to read
    • Contributors
    • Print
    • Dark
      Light
    Article summary

    We will now focus on the _config.scss file where most changes have taken place. There are a number of new variables that need explanation.

    Note! When upgrading to Comflow version 2.22, any customizations made in previous _config.scss must be moved over to the new _config.scss and you also need to regenerate your comflow.css file in order to keep those customizations.

    New Variables

    NameDescription
    $portlet‑base‑colorconvenience color for setting background color on several parts in the portal
    $portlet‑border‑colorportlet border right, bottom and left colors
    $action‑background‑colorbackground color set on top menu options, portlet toolbar actions, segment headers, right click list actions, selected tab items and buttons
    $action‑text‑colortext color set on segment headers, deselected tab items and buttons
    $action‑hover‑background‑colorhover background color set on side menu headers, top and mega menu options, portlet toolbar actions, segment headers, right click list actions, tab items and buttons
    $action‑hover‑text‑colorhover text color set on top menu options, portlet toolbar actions, segment headers, tab items, buttons and user info drop down options
    $portlet‑action‑text‑colortext color set on portal header actions/icons, portlet header actions/icons, portlet toolbar actions/icons and selected tab items
    $menu‑action‑text‑colortext color set on top and mega menu portal header menu options and sub menu options
    $portal‑header‑background‑colorportal header background color, replaces $top‑navigator‑background‑color
    $portal‑header‑heightportal header height
    $portal‑header‑item‑padding‑rightpadding for portal navigator top and mega menu options
    $portal‑header‑item‑padding‑leftpadding for portal navigator top and mega menu options
    $portal‑header‑icons‑sizeportal header icons size
    $portal‑header‑icons‑color_portal header icons color
    $portal‑header‑icons‑hover‑colorportal header icons hover color
    $portal‑header‑icons‑padding‑rightadjust padding if necessary
    $portal‑header‑icons‑padding‑leftadjust padding if necessary
    $portal‑header‑badge‑font‑sizequick start badge font size
    $portal‑header‑vertical‑separator‑heightadjust height if necessary, replaces $top‑navigator‑horizontal‑separator‑height
    $portal‑header‑vertical‑separator‑background‑coloradjust color if necessary, replaces $top‑navigator‑horizontal‑separator‑background‑color
    $portal‑top‑right‑logo‑colorportal top right logo color if logo is of type svg
    $side‑navigator‑menu‑header‑background‑colorheader background color , replaces $side‑navigator‑activities‑header‑background‑color and $side‑navigator‑header‑background‑color
    $side‑navigator‑menu‑header‑text‑colorheader text color
    $side‑navigator‑menu‑header‑background‑hover‑colorbackground hover color for side menu navigator headers
    $side‑navigator‑menu‑header‑text‑hover‑colortext hover color for side menu navigator headers
    $side‑navigator‑header‑font‑sizenavigator header font size
    $side‑navigator‑tree‑items‑font‑sizetree items font size
    $side‑navigator‑border‑colorborder color
    $top‑navigator‑font‑weighttop navigator font weight
    $top‑navigator‑hover‑background‑colortop and mega menu options hover background color, replaces $top‑navigator‑hover‑color
    $top‑navigator‑subitem‑hover‑background‑colortop and mega menu sub item hover background color, replaces $top‑navigator‑subitem‑hover‑color
    $top‑navigator‑mega‑menu‑main‑background‑colormega menu middle part background color
    $top‑navigator‑mega‑menu‑left‑background‑colormega menu left part background color
    $top‑navigator‑mega‑menu‑right‑background‑colormega menu right part background color
    $user‑info‑avatar‑container‑background‑coloruser info dropdown top part background color
    $user‑info‑avatar‑font‑sizeuser info dropdown top part font size
    $user‑info‑avatar‑text‑coloruser info dropdown top part text color
    $user‑info‑default‑avatar‑background‑coloravatar background color
    $user‑info‑default‑avatar‑font‑sizeavatar font size
    $user‑info‑default‑avatar‑padding‑topavatar padding top
    $user‑info‑default‑avatar‑padding‑rightavatar padding right
    $user‑info‑default‑avatar‑padding‑bottomavatar padding bottom
    $user‑info‑default‑avatar‑padding‑leftavatar padding left
    $user‑info‑default‑avatar‑margin‑topavatar margin top
    $user‑info‑default‑avatar‑margin‑rightavatar margin right
    $user‑info‑item‑font‑sizeuser info dropdown item font size
    $user‑info‑item‑text‑coloruser info dropdown item text color
    $user‑info‑item‑hover‑text‑coloruser info dropdown item hover text color
    $user‑info‑item‑background‑coloruser info dropdown item background color
    $user‑info‑item‑hover‑background‑coloruser info dropdown item hover background color
    $user‑info‑last‑login‑font‑sizeuser info dropdown last login text font size
    $user‑info‑last‑login‑text‑coloruser info dropdown last login text color
    $user‑info‑last‑login‑background‑coloruser info dropdown last login background color
    $portlet‑header‑title‑bar‑icon‑sizeportlet header maximize, minimize, close and restore icon size
    $field‑input‑border‑radiusInput field border radius
    $segment‑header‑hover‑background‑colorsegment header hover background color
    $segment‑header‑hover‑text‑colorsegment header hover text color
    $browse‑right‑click‑background‑colorright click menu background color
    $browse‑right‑click‑text‑colorright click menu text color
    $browse‑right‑click‑hover‑background‑colorright click menu hover background color
    $browse‑right‑click‑hover‑text‑colorright click menu hover text color
    $tab‑item‑hover‑background‑colortab item hover background color
    $tab‑item‑selected‑border‑bottom‑colorselected tab item border bottom color
    $tab‑item‑selected‑border‑bottom‑widthselected tab item border bottom width
    $prompt‑title‑text‑colorprompt title text color
    $button‑hover‑background‑colorportlet button hover background color
    $button‑hover‑text‑colorportlet button hover text color
    $button‑font‑sizeportlet button font size
    $paging‑button‑colorpaging button color
    $paging‑button‑font‑sizepaging button font size
    $desktop‑functions‑image‑background‑colordesktop functions image background color

    Removed Variables

    NameDescription
    $side‑navigator‑activities‑header‑background‑color
    $side‑navigator‑header‑background‑color
    $side‑navigator‑user‑info‑background‑color
    $side‑navigator‑user‑info‑text‑color
    $side‑navigator‑toggle‑color
    $side‑navigator‑user‑info‑background‑color
    $side‑navigator‑user‑info‑text‑color
    $side‑navigator‑icon‑hover‑color
    $top‑navigator‑background‑colorreplaced by $portal‑header‑background‑color
    $top‑navigator‑hover‑colorreplaced by $top‑navigator‑hover‑background‑color
    $top‑navigator‑horizontal‑separator‑heightreplaced by $portal‑header‑vertical‑separator‑height
    $top‑navigator‑horizontal‑separator‑background‑colorreplaced by $portal‑header‑vertical‑separator‑background‑color
    $top‑navigator‑subitem‑hover‑colorreplaced by $top‑navigator‑subitem‑hover‑background‑color
    $top‑navigator‑height
    $top‑navigator‑width
    $toolbar‑icon‑in‑view‑colorreplaced by $portlet‑header‑title‑bar‑icon‑color
    $toolbar‑icon‑in‑view‑hover‑colorreplaced by $portlet‑header‑title‑bar‑icon‑hover‑color
    $toolbar‑icon‑menu‑background‑color
    $toolbar‑icon‑menu‑item‑background‑color
    $toolbar‑icon‑menu‑item‑hover‑background‑color
    $toolbar‑icon‑menu‑item‑text‑color
    $toolbar‑icon‑menu‑item‑hover‑text‑color
    $button‑hover‑colorreplaced by $button‑hover‑background‑color
    Was this article helpful?
    What's Next
    Change password!
    Changing your password will log you out immediately. Use the new password to log back in.
    Change profile
    Success!
    First name must have atleast 2 characters. Numbers and special characters are not allowed.
    Last name must have atleast 1 characters. Numbers and special characters are not allowed.
    Enter a valid email
    Enter a valid password
    Your profile has been successfully updated.
    Logout