MDrivenDesignerStylingVariables
No edit summary |
No edit summary |
||
| (14 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 5: | Line 7: | ||
!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 | ||
| | |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 | ||
|color | |color | ||
| | | | ||
|- | |- | ||
| --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 | ||
|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 | ||
| | |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 | ||
|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 | ||
| | |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 | ||
|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 | ||
| | |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 | ||
|color | |color | ||
| | | | ||
|- | |- | ||
| --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 | ||
|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 | ||
| | |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 | ||
|px | |px | ||
| | | | ||
|- | |- | ||
| -- | | #--select-border-radius | ||
|px | |px | ||
| | | | ||
|- | |- | ||
| -- | | #--table-border-radius | ||
|px | |px | ||
| | |The radius of the border of tables | ||
|- | |- | ||
| -- | | #--table-border-width | ||
|px | |px | ||
| | |The width of the border of tables | ||
|- | |- | ||
| -- | | #--extra-small | ||
|px | |px | ||
| | |Size of extra-small image | ||
|- | |- | ||
| -- | | #--small | ||
|px | |px | ||
| | |Size of small image | ||
|- | |- | ||
| -- | | #--medium | ||
|px | |px | ||
| | |Size of medium image | ||
|- | |- | ||
| -- | | #--large | ||
|px | |px | ||
| | |Size of image | ||
|- | |- | ||
| -- | | #--extra-large | ||
|px | |px | ||
| | |Size of image | ||
|- | |- | ||
| -- | | #--navbar-height | ||
|px | |px | ||
| | |The height of the main menu | ||
|- | |- | ||
| -- | | #--savebar-height | ||
|px | |px | ||
| | | | ||
|- | |- | ||
| -- | | #--btn-border-radius | ||
|px | |px | ||
| | |The radius of buttons | ||
|- | |- | ||
| -- | | #--tooltip-border-radius | ||
|px | |px | ||
| | | | ||
|- | |- | ||
| -- | | #--sidebar-width | ||
|px | |px | ||
| | |The width of the left side menu | ||
|- | |- | ||
| -- | | #--base-border-radius | ||
|px | |px | ||
| | |The radius of inputs | ||
|- | |- | ||
| -- | | #--resizer-width | ||
|px | |px | ||
| | |The size of the resizer between grid header columns | ||
|- | |- | ||
| -- | | #--input-border-radius | ||
|px | |px | ||
| | | | ||
|- | |- | ||
| -- | | #--base-font-size | ||
|px | |px | ||
| | |The size of the base font of the application | ||
|- | |- | ||
| -- | | #--base-checkbox-size | ||
|px | |px | ||
| | | | ||
|- | |- | ||
| --data-table- | |#--data-table-row-height | ||
|px | |px | ||
| | |The height of a row in the data table | ||
|- | |- | ||
| --data-table- | |#--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 | ||
|double | |double | ||
| | | | ||
|- | |- | ||
| --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 | ||
|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 |