Admin CSS Styles
All Bootstrap 4 CSS styles and classes are available in the LUYA admin UI. On top of this LUYA provides generic CSS classes for buttons with predefined icons and colors.
Buttons
The Bootstrap 4 btn class is extended by some predefined colors which are assigned to specific function (e.g. save, delete, abort). The following classes are available in the whole admin UI:
<button type="button" class="btn btn-save">Save</button>
<button type="button" class="btn btn-delete">Delete</button>
<button type="button" class="btn btn-cancel">Cancel</button>
<button type="button" class="btn btn-edit">Edit</button>
<button type="button" class="btn btn-add">Add</button>
<button type="button" class="btn btn-help">Help</button>
<button type="button" class="btn btn-download">Download</button>
<button type="button" class="btn btn-upload">Upload</button>
<button type="button" class="btn btn-config">Configuration</button>You can combine the btn class with predefined icons, e.g. the use icons can be achieved by simply adding the CSS class btn-icon to the above listed button and the related icon will appear.
<button type="button" class="btn btn-save btn-icon">Save</button>Please keep in mind that
<input type="button" class="btn btn-icon btn-save" value="Button label" />does not work because input fields do not support the pseudo CSS class :after. So use thebuttonHTML element or something else instead ofinput.
If you would like to display a button with a generic predefined icon use btn-icon without a defined class:
<button type="button" class="btn btn-icon"><i class="material-icons">check</i>OK</button>If you want a button btn-icon without a background simply add btn-link:
<button type="button" class="btn btn-icon btn-link"><i class="material-icons">check</i>Link</button>Below some example combinations:
<button type="button" class="btn btn-icon btn-save">Save button with icon and text</button>
<button type="button" class="btn btn-cancel">Cancel button without icon</button>
<button type="button" class="btn btn-icon btn-delete"></button> // Delete button without label but predefined icon and colors.Icons
Below, the table shows you which icon stands for what. The full set of usable icons is available under https://material.io/icons.
| Description | Icon | Name |
|---|---|---|
| Upload icon | file_upload | file_upload |
| Download icon | file_download | file_download |
| Edit icon | edit | edit |
| Add icon | add_box | add_box |
| Add icon for button | add | add |
| Delete icon | delete | delete |
| Save / Confirm icon | check.png | check |
| Abort / Clear icon | clear | clear |
| Config icon | settings | settings |
| Settings icon | more_vert | more_vert |
| Visible icon | visibility | visibility |
| Invisible icon | visibility_off | visibility_off |
| Online icon | cloud_queue | cloud_queue |
| Offline icon | cloud_off | cloud_off |
| Sort icon | keyboard_arrow_down keyboard_arrow_up | keyboard_arrow_down / keyboard_arrow_up |
| Folder icon | folder | folder |
| Create folder icon | create_new_folder | create_new_folder |