Skip to content
On this page

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:

html
<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.

html
<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 the button HTML element or something else instead of input.

If you would like to display a button with a generic predefined icon use btn-icon without a defined class:

html
<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:

html
<button type="button" class="btn btn-icon btn-link"><i class="material-icons">check</i>Link</button>

Below some example combinations:

html
<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.

DescriptionIconName
Upload iconfile_uploadfile_upload
Download iconfile_downloadfile_download
Edit iconeditedit
Add iconadd_boxadd_box
Add icon for buttonaddadd
Delete icondeletedelete
Save / Confirm iconcheck.pngcheck
Abort / Clear iconclearclear
Config iconsettingssettings
Settings iconmore_vertmore_vert
Visible iconvisibilityvisibility
Invisible iconvisibility_offvisibility_off
Online iconcloud_queuecloud_queue
Offline iconcloud_offcloud_off
Sort iconkeyboard_arrow_down keyboard_arrow_upkeyboard_arrow_down / keyboard_arrow_up
Folder iconfolderfolder
Create folder iconcreate_new_foldercreate_new_folder

Forms

The syntax we use to build the forms in LUYA admin UI is as follows:

html
<div class="form-group form-side-by-side">
    <div class="form-side form-side-label">
        <label>Label</label>
    </div>
    <div class="form-side">
        <input type="text" class="form-control" />
    </div>
</div>