MDrivenDesignerStylingVariables
No edit summary
Tag: 2017 source edit
No edit summary
 
(13 intermediate revisions by the same user not shown)
Line 1: Line 1:
These values are read by MDrivenDesigner in order to get meta info on CSS styling variables
These values are read by MDrivenDesigner in order to get meta info on CSS styling variables
NOTE TO EDITORS: This is referenced from within MDrivenDesigner - dont move or change format since that would BREAK THINGS
{| class="wikitable"
{| class="wikitable"
!#VariableName
!#VariableName
Line 23: Line 25:
| #--danger-color
| #--danger-color
|color
|color
|
|color on buttons with style danger
|-
|-
| #--danger-color-dark
| #--danger-color-dark
|color
|color
|
|color on buttons with style danger when hover
|-
|-
| #--error-clr
| #--error-clr
|color
|color
|
|Broken constraint of type error background
|-
|-
| #--fileupload-label-clr
| #--fileupload-label-clr
Line 39: Line 41:
| #--info-clr
| #--info-clr
|color
|color
|
|Broken constraint of type info background
|-
|-
| #--navbar-bg-color
| #--navbar-bg-color
|color
|color
|
|The background of the top level menu bar
|-
|-
| #--navbar-brand-color
| #--navbar-brand-color
|color
|color
|
|The font color of the app name
|-
|-
| #--navbar-link-color
| #--navbar-link-color
|color
|color
|
|The color of global menu item text
|-
|-
| #--primary-color
| #--primary-color
Line 87: Line 89:
| #--select-border-clr
| #--select-border-clr
|color
|color
|
|The color of the border of the select controls
|-
|-
| #--sidebar-bg-color
| #--sidebar-bg-color
|color
|color
|
|The background of the left side  menu
|-
|-
| #--sidebar-border-clr
| #--sidebar-border-clr
Line 111: Line 113:
| #--table-bg-clr
| #--table-bg-clr
|color
|color
|
|The color of table background
|-
|-
| #--table-border-clr
| #--table-border-clr
|color
|color
|
|The color of the border of table
|-
|-
| #--textfield-border-clr
| #--textfield-border-clr
Line 143: Line 145:
| #--text-on-error
| #--text-on-error
|color
|color
|
|Broken constraint of type error foreground
|-
|-
| #--text-on-info
| #--text-on-info
|color
|color
|
|Broken constraint of type info foreground
|-
|-
| #--text-on-primary
| #--text-on-primary
|color
|color
|
|Text used on buttons
|-
|-
| #--text-on-success
| #--text-on-success
Line 159: Line 161:
| #--text-on-warning
| #--text-on-warning
|color
|color
|
|Broken constraint of type warning foreground
|-
|-
| #--toolbar-bg-color
| #--toolbar-bg-color
|color
|color
|
|Toolbar background color
|-
|-
| #--toolbar-item-color
| #--toolbar-item-color
|color
|color
|
|Toolbar action text color
|-
|-
| #--tooltip-bg-clr
| #--tooltip-bg-clr
Line 191: Line 193:
| #--warning-color
| #--warning-color
|color
|color
|
|color on buttons with style warning
|-
|-
| #--warning-color-dark
| #--warning-color-dark
|color
|color
|
|color on buttons with style warning when hover
|-
|-
| #--data-table-header-text-color
| #--data-table-header-text-color
|color
|color
|
|The text color of table header
|-
|-
| #--data-table-header-bg-color
| #--data-table-header-bg-color
|color
|color
|
|The background of table headers
|-
|-
| #--textfield-border-radius
| #--textfield-border-radius
Line 215: Line 217:
| #--table-border-radius
| #--table-border-radius
|px
|px
|
|The radius of the border of tables
|-
|-
| #--table-border-width
| #--table-border-width
|px
|px
|
|The width of the border of tables
|-
|-
| #--extra-small
| #--extra-small
|px
|px
|
|Size of extra-small image
|-
|-
| #--small
| #--small
|px
|px
|
|Size of small image
|-
|-
| #--medium
| #--medium
|px
|px
|
|Size of medium image
|-
|-
| #--large
| #--large
|px
|px
|
|Size of image
|-
|-
| #--extra-large
| #--extra-large
|px
|px
|
|Size of image
|-
|-
| #--navbar-height
| #--navbar-height
|px
|px
|
|The height of the main menu
|-
|-
| #--savebar-height
| #--savebar-height
Line 251: Line 253:
| #--btn-border-radius
| #--btn-border-radius
|px
|px
|
|The radius of buttons
|-
|-
| #--tooltip-border-radius
| #--tooltip-border-radius
Line 259: Line 261:
| #--sidebar-width
| #--sidebar-width
|px
|px
|
|The width of the left side menu
|-
|-
| #--base-border-radius
| #--base-border-radius
|px
|px
|
|The radius of inputs
|-
|-
| #--resizer-width
| #--resizer-width
|px
|px
|
|The size of the resizer between grid header columns
|-
|-
| #--input-border-radius
| #--input-border-radius
Line 275: Line 277:
| #--base-font-size
| #--base-font-size
|px
|px
|
|The size of the base font of the application
|-
|-
| #--base-checkbox-size
| #--base-checkbox-size
Line 281: Line 283:
|
|
|-
|-
| #--data-table-header-height-blazor
|#--data-table-row-height
|px
|
|-
| #--data-table-row-height-blazor
|px
|
|-
| #--data-table-header-height-blazor-smalllscreen
|px
|px
|
|The height of a row in the data table
|-
|-
| #--data-table-row-height-blazor-smalllscreen
|#--data-table-header-height
|px
|px
|
|The height of the header row in the data table
|-
|-
| #--sidebar-item-height
| #--sidebar-item-height
|px
|px
|
|The height of actions in the left side menu
|-
|-
| #--sidebar-divider-alpha
| #--sidebar-divider-alpha
Line 307: Line 301:
| #--app-font-family
| #--app-font-family
|font
|font
|
|Font used for constraints
|-
|-
| #--base-font-family
| #--base-font-family
|font
|font
|
|Main font of the UI
|-
|-
|   #--app-icon-font
|#--app-icon-font
|font
|font
|
|Font used for MaterialDesign Icons
|-
|#--label-font-size
|px
|Font size of labels
|-
|-
|
|

Latest revision as of 11:49, 26 May 2025

This page was created by Hans.karlsen@mdriven.net on 2025-04-26. Last edited by Hans.karlsen@mdriven.net on 2025-05-26.

These values are read by MDrivenDesigner in order to get meta info on CSS styling variables

NOTE TO EDITORS: This is referenced from within MDrivenDesigner - dont move or change format since that would BREAK THINGS

#VariableName TypeOfValue(Color,px,double,font) Short description
#--base-bg-color color The main background
#--btn-default-clr color Button color if having no other style
#--cancel-action-bg-color color The Cancel-changes button
#--cancel-action-bg-color-dark color The Cancel-changes button hover
#--danger-color color color on buttons with style danger
#--danger-color-dark color color on buttons with style danger when hover
#--error-clr color Broken constraint of type error background
#--fileupload-label-clr color
#--info-clr color Broken constraint of type info background
#--navbar-bg-color color The background of the top level menu bar
#--navbar-brand-color color The font color of the app name
#--navbar-link-color color The color of global menu item text
#--primary-color color The signature color used on table row select, Save-button, Menu-Button
#--primary-color-dark color The signature color when hover
#--redo-action-bg-color color
#--redo-action-bg-color-dark color
#--redo-action-text-color color
#--save-action-bg-color color
#--save-action-bg-color-dark color
#--save-action-text-color color
#--select-border-clr color The color of the border of the select controls
#--sidebar-bg-color color The background of the left side menu
#--sidebar-border-clr color
#--sidebar-divider-clr color
#--success-color color
#--success-color-dark color
#--table-bg-clr color The color of table background
#--table-border-clr color The color of the border of table
#--textfield-border-clr color
#--textfield-disabled-bg-clr color
#--textfield-icon-clr color
#--textfield-label-clr color
#--text-on-danger color
#--text-on-default-btn color
#--text-on-error color Broken constraint of type error foreground
#--text-on-info color Broken constraint of type info foreground
#--text-on-primary color Text used on buttons
#--text-on-success color
#--text-on-warning color Broken constraint of type warning foreground
#--toolbar-bg-color color Toolbar background color
#--toolbar-item-color color Toolbar action text color
#--tooltip-bg-clr color
#--tooltip-text-clr color
#--undo-action-bg-color color
#--undo-action-bg-color-dark color
#--undo-action-text-color color
#--warning-color color color on buttons with style warning
#--warning-color-dark color color on buttons with style warning when hover
#--data-table-header-text-color color The text color of table header
#--data-table-header-bg-color color The background of table headers
#--textfield-border-radius px
#--select-border-radius px
#--table-border-radius px The radius of the border of tables
#--table-border-width px The width of the border of tables
#--extra-small px Size of extra-small image
#--small px Size of small image
#--medium px Size of medium image
#--large px Size of image
#--extra-large px Size of image
#--navbar-height px The height of the main menu
#--savebar-height px
#--btn-border-radius px The radius of buttons
#--tooltip-border-radius px
#--sidebar-width px The width of the left side menu
#--base-border-radius px The radius of inputs
#--resizer-width px The size of the resizer between grid header columns
#--input-border-radius px
#--base-font-size px The size of the base font of the application
#--base-checkbox-size px
#--data-table-row-height px The height of a row in the data table
#--data-table-header-height px The height of the header row in the data table
#--sidebar-item-height px The height of actions in the left side menu
#--sidebar-divider-alpha double
#--app-font-family font Font used for constraints
#--base-font-family font Main font of the UI
#--app-icon-font font Font used for MaterialDesign Icons
#--label-font-size px Font size of labels
MDriven Chat

How would you like to chat today?

Setting up your conversation…

This may take a few moments