Skip to content

Admin CSS Styles

All Bootstrap 4 CSS styles and classes are accessible within the LUYA admin interface. In addition to these, LUYA offers generic CSS classes for buttons, complete with predefined icons and colors.

Buttons

The btn class from Bootstrap 4 is enhanced with predefined colors corresponding to specific functions, such as save, delete, and cancel. These classes are accessible throughout the admin interface:

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>

To incorporate predefined icons, simply append the btn-icon class to any of the above buttons, and the corresponding icon will be displayed.

html
<button type="button" class="btn btn-save btn-icon">Save</button>

Note that <input type="button" class="btn btn-icon btn-save" value="Button label" /> is not effective because input fields do not support the pseudo CSS class :after. Thus, it is recommended to use the button HTML element or an alternative instead of input.

To show a button with a generic predefined icon, use btn-icon without specifying a particular class:

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

For a btn-icon button without a background, add btn-link:

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

Here are 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 with predefined icon and colors.

Icons

The table below illustrates which icons correspond to specific functions. A complete set of icons is available at 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 iconcheckcheck
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