Comflow Documentation

Comflow Documentation

  • Comflow 2.22

›Comflow Styling

Presentation

  • Release Notes
  • Migration Notes
  • Master Sitedef

Chart Implementations

  • Comflow Chart Implementations
  • Comflow Custom Chart Setup

Comflow IPP

  • Comflow IPP Basics
  • Using ppd files
  • Windows Printer Server Setup

Comflow Styling

  • Comflow Styling Basics
  • _config.scss
  • _custom-class.scss
  • Portal Header

Copy to Clipboard

  • Copy to Clipboard Basics
  • External Resources

Datepicker Exceptions

  • Datepicker Exceptions

Desktop Functions

  • Desktop Functions Basics
  • Modes
  • Style

My Functions

  • My Functions Basics

My Settings

  • My Settings Basics

Open API

  • OpenAPI Basics

Portal Menu Options

  • Portal Menu Options Basics
  • Mega Menu
  • Side Menu
  • Top Menu

Quick Search

  • Quick Search Basics

Quick Start

  • Quick Start Basics

Removed Classes/Methods

  • AbstractEnvironment
  • AbstractSegmentChangeObject
  • ApplicationObject
  • CadModel
  • ChangeObject
  • Changes in Rendering Classes
  • ClientInfo
  • Component
  • CoreSessionManager
  • DataInstance
  • Database
  • DriverHelper
  • DynamicModels
  • Environment
  • ErrorUtils
  • FieldChangeObject
  • Field
  • FlexIdImplementation
  • FlexId
  • Introduction
  • Logical Unit of Work
  • PromptRequest
  • RendererInfo
  • RendererModelUtils
  • RendererModel
  • RepositoryUtil
  • Root
  • SegmentChangeObjectImpl
  • SegmentChangeObject
  • SessionMessage
  • SimpleModel
  • Site
  • StringUtil
  • SystemWorkspace

Repository Constant

  • Repository Constant Basics

Sitedef

  • Site definition Settings

Sound Events

  • Sound Events Basics
  • Sound Events in Errors
  • Sound Events in Rules
  • Test Case in Verify

User Avatar

  • User Avatar Basics
  • Changes in Classes and Tables
  • References

User Info

  • User Info Basics

_config.scss

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
← Comflow Styling Basics_custom-class.scss →
Comflow Documentation
Docs
Corzia Info
Community
User ShowcaseCorzia WebsiteTwitter
More
Update Sitetech@corzia.com
Copyright © 2019 Corzia AB