MDrivenDesignerStylingVariables
No edit summary
No edit summary
Tag: 2017 source edit
Line 5: Line 5:
!Short description
!Short description
|-
|-
| --base-bg-color
| #--base-bg-color
|color
|color
|The main background  
|The main background  
|-
|-
| --btn-default-clr
| #--btn-default-clr
|color
|color
|Button color if having no  other style
|Button color if having no  other style
|-
|-
| --cancel-action-bg-color
| #--cancel-action-bg-color
|color
|color
|The Cancel-changes button
|The Cancel-changes button
|-
|-
| --cancel-action-bg-color-dark
| #--cancel-action-bg-color-dark
|color
|color
|The Cancel-changes button hover
|The Cancel-changes button hover
|-
|-
| --danger-color
| #--danger-color
|color
|color
|
|
|-
|-
| --danger-color-dark
| #--danger-color-dark
|color
|color
|
|
|-
|-
| --error-clr
| #--error-clr
|color
|color
|
|
|-
|-
| --fileupload-label-clr
| #--fileupload-label-clr
|color
|color
|
|
|-
|-
| --info-clr
| #--info-clr
|color
|color
|
|
|-
|-
| --navbar-bg-color
| #--navbar-bg-color
|color
|color
|
|
|-
|-
| --navbar-brand-color
| #--navbar-brand-color
|color
|color
|
|
|-
|-
| --navbar-link-color
| #--navbar-link-color
|color
|color
|
|
|-
|-
| --primary-color
| #--primary-color
|color
|color
|The signature color used on table row select, Save-button, Menu-Button
|The signature color used on table row select, Save-button, Menu-Button
|-
|-
| --primary-color-dark
| #--primary-color-dark
|color
|color
|The signature color when hover
|The signature color when hover
|-
|-
| --redo-action-bg-color
| #--redo-action-bg-color
|color
|color
|
|
|-
|-
| --redo-action-bg-color-dark
| #--redo-action-bg-color-dark
|color
|color
|
|
|-
|-
| --redo-action-text-color
| #--redo-action-text-color
|color
|color
|
|
|-
|-
| --save-action-bg-color
| #--save-action-bg-color
|color
|color
|
|
|-
|-
| --save-action-bg-color-dark
| #--save-action-bg-color-dark
|color
|color
|
|
|-
|-
| --save-action-text-color
| #--save-action-text-color
|color
|color
|
|
|-
|-
| --select-border-clr
| #--select-border-clr
|color
|color
|
|
|-
|-
| --sidebar-bg-color
| #--sidebar-bg-color
|color
|color
|
|
|-
|-
| --sidebar-border-clr
| #--sidebar-border-clr
|color
|color
|
|
|-
|-
| --sidebar-divider-clr
| #--sidebar-divider-clr
|color
|color
|
|
|-
|-
| --success-color
| #--success-color
|color
|color
|
|
|-
|-
| --success-color-dark
| #--success-color-dark
|color
|color
|
|
|-
|-
| --table-bg-clr
| #--table-bg-clr
|color
|color
|
|
|-
|-
| --table-border-clr
| #--table-border-clr
|color
|color
|
|
|-
|-
| --textfield-border-clr
| #--textfield-border-clr
|color
|color
|
|
|-
|-
| --textfield-disabled-bg-clr
| #--textfield-disabled-bg-clr
|color
|color
|
|
|-
|-
| --textfield-icon-clr
| #--textfield-icon-clr
|color
|color
|
|
|-
|-
| --textfield-label-clr
| #--textfield-label-clr
|color
|color
|
|
|-
|-
| --text-on-danger
| #--text-on-danger
|color
|color
|
|
|-
|-
| --text-on-default-btn
| #--text-on-default-btn
|color
|color
|
|
|-
|-
| --text-on-error
| #--text-on-error
|color
|color
|
|
|-
|-
| --text-on-info
| #--text-on-info
|color
|color
|
|
|-
|-
| --text-on-primary
| #--text-on-primary
|color
|color
|
|
|-
|-
| --text-on-success
| #--text-on-success
|color
|color
|
|
|-
|-
| --text-on-warning
| #--text-on-warning
|color
|color
|
|
|-
|-
| --toolbar-bg-color
| #--toolbar-bg-color
|color
|color
|
|
|-
|-
| --toolbar-item-color
| #--toolbar-item-color
|color
|color
|
|
|-
|-
| --tooltip-bg-clr
| #--tooltip-bg-clr
|color
|color
|
|
|-
|-
| --tooltip-text-clr
| #--tooltip-text-clr
|color
|color
|
|
|-
|-
| --undo-action-bg-color
| #--undo-action-bg-color
|color
|color
|
|
|-
|-
| --undo-action-bg-color-dark
| #--undo-action-bg-color-dark
|color
|color
|
|
|-
|-
| --undo-action-text-color
| #--undo-action-text-color
|color
|color
|
|
|-
|-
| --warning-color
| #--warning-color
|color
|color
|
|
|-
|-
| --warning-color-dark
| #--warning-color-dark
|color
|color
|
|
|-
|-
| --data-table-header-text-color
| #--data-table-header-text-color
|color
|color
|
|
|-
|-
| --data-table-header-bg-color
| #--data-table-header-bg-color
|color
|color
|
|
|-
|-
| --textfield-border-radius
| #--textfield-border-radius
|px
|px
|
|
|-
|-
| --select-border-radius
| #--select-border-radius
|px
|px
|
|
|-
|-
| --table-border-radius
| #--table-border-radius
|px
|px
|
|
|-
|-
| --table-border-width
| #--table-border-width
|px
|px
|
|
|-
|-
| --extra-small
| #--extra-small
|px
|px
|
|
|-
|-
| --small
| #--small
|px
|px
|
|
|-
|-
| --medium
| #--medium
|px
|px
|
|
|-
|-
| --large
| #--large
|px
|px
|
|
|-
|-
| --extra-large
| #--extra-large
|px
|px
|
|
|-
|-
| --navbar-height
| #--navbar-height
|px
|px
|
|
|-
|-
| --savebar-height
| #--savebar-height
|px
|px
|
|
|-
|-
| --btn-border-radius
| #--btn-border-radius
|px
|px
|
|
|-
|-
| --tooltip-border-radius
| #--tooltip-border-radius
|px
|px
|
|
|-
|-
| --sidebar-width
| #--sidebar-width
|px
|px
|
|
|-
|-
| --base-border-radius
| #--base-border-radius
|px
|px
|
|
|-
|-
| --resizer-width
| #--resizer-width
|px
|px
|
|
|-
|-
| --input-border-radius
| #--input-border-radius
|px
|px
|
|
|-
|-
| --base-font-size
| #--base-font-size
|px
|px
|
|
|-
|-
| --base-checkbox-size
| #--base-checkbox-size
|px
|px
|
|
|-
|-
| --data-table-header-height-blazor
| #--data-table-header-height-blazor
|px
|px
|
|
|-
|-
| --data-table-row-height-blazor
| #--data-table-row-height-blazor
|px
|px
|
|
|-
|-
| --data-table-header-height-blazor-smalllscreen
| #--data-table-header-height-blazor-smalllscreen
|px
|px
|
|
|-
|-
| --data-table-row-height-blazor-smalllscreen
| #--data-table-row-height-blazor-smalllscreen
|px
|px
|
|
|-
|-
| --sidebar-item-height
| #--sidebar-item-height
|px
|px
|
|
|-
|-
| --sidebar-divider-alpha
| #--sidebar-divider-alpha
|double
|double
|
|
|-
|-
| --app-font-family
| #--app-font-family
|font
|font
|
|
|-
|-
| --base-font-family
| #--base-font-family
|font
|font
|
|
|-
|-
|   --app-icon-font
|   #--app-icon-font
|font
|font
|
|

Revision as of 08:02, 26 April 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

#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
#--danger-color-dark color
#--error-clr color
#--fileupload-label-clr color
#--info-clr color
#--navbar-bg-color color
#--navbar-brand-color color
#--navbar-link-color color
#--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
#--sidebar-bg-color color
#--sidebar-border-clr color
#--sidebar-divider-clr color
#--success-color color
#--success-color-dark color
#--table-bg-clr color
#--table-border-clr color
#--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
#--text-on-info color
#--text-on-primary color
#--text-on-success color
#--text-on-warning color
#--toolbar-bg-color color
#--toolbar-item-color 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
#--warning-color-dark color
#--data-table-header-text-color color
#--data-table-header-bg-color color
#--textfield-border-radius px
#--select-border-radius px
#--table-border-radius px
#--table-border-width px
#--extra-small px
#--small px
#--medium px
#--large px
#--extra-large px
#--navbar-height px
#--savebar-height px
#--btn-border-radius px
#--tooltip-border-radius px
#--sidebar-width px
#--base-border-radius px
#--resizer-width px
#--input-border-radius px
#--base-font-size px
#--base-checkbox-size px
#--data-table-header-height-blazor px
#--data-table-row-height-blazor px
#--data-table-header-height-blazor-smalllscreen px
#--data-table-row-height-blazor-smalllscreen px
#--sidebar-item-height px
#--sidebar-divider-alpha double
#--app-font-family font
#--base-font-family font
  #--app-icon-font font
MDriven Chat

How would you like to chat today?

Setting up your conversation…

This may take a few moments