Button colors using less
- Mattias Löfstrand
- Abhishek Ranjan
Use less file for basic styling of buttons
Some basic settings for a site are located in the Site.variables.less file, see Site.variables.less for an overview.
Variables for buttons in version 5.1
Version 5.1 uses less variables for all buttons in the web viewer, excluding the admin pages. Presentation toolbar buttons are of a different style and not handled by less file.
Buttons are of three different types.
Type | Usage |
|---|---|
action-submit | Buttons where user action is expected. |
normal-submit | The normal button |
delete-submit | Button which will result in something being removed or deleted. |
The below less variables exist for buttons.
@all-button-border-radius :0px;
@all-button-font-family:"Segoe UI", Verdana, Helvetica, Sans-Serif;
@all-button-min-width:80px;
@action-submit-button-background-color: #017398;
@action-submit-button-border-color:#017398;
@action-submit-button-text-and-icon-color:black;
@action-submit-button-hover-background-color: #017398;
@action-submit-button-hover-border-color:#017398;
@action-submit-button-hover-text-and-icon-color:black;
@action-submit-button-disabled-background: #e2e6eb;
@action-submit-button-disabled-border-color:#e2e6eb;
@action-submit-button-disabled-text-and-icon-color:black;
@normal-submit-button-background-color:transparent;
@normal-submit-button-border-color:#017398;
@normal-submit-button-text-and-icon-color:black;
@normal-submit-button-hover-background-color:transparent;
@normal-submit-button-hover-border-color:#017398;
@normal-submit-button-hover-text-and-icon-color:black;
@normal-submit-button-disabled-background:#e2e6eb;
@normal-submit-button-disabled-border-color:#e2e6eb;
@normal-submit-button-disabled-text-and-icon-color:black;
@delete-submit-button-background-color:#e81717;
@delete-submit-button-border-color:#e81717;
@delete-submit-button-text-and-icon-color:black;
@delete-submit-button-hover-background-color:#e81717;
@delete-submit-button-hover-border-color:#e81717;
@delete-submit-button-hover-text-and-icon-color:black;
@delete-submit-button-disabled-background: #e2e6eb;
@delete-submit-button-disabled-border-color:#e2e6eb;
@delete-submit-button-disabled-text-and-icon-color:black;Variables for buttons in 5.0
Version 5.0 uses less variables for all buttons in the web viewer, excluding the admin pages. Presentation toolbar buttons are of a different style and not handled by less file. But button type is less structured and only one button type exist.
The below less variables exist for buttons.
@submit-button-background-color: #0099cc; /*blue sign*/
@submit-button-border-color: #fff;
@submit-button-hover-background-color: #017398;
@submit-button-disabled-background: #e2e6eb;
@submit-button-disabled-hover-background: #e2e6eb;
@delete-button-color: #0099cc;
@delete-button-hover-color: #0099cc;