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:

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

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

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

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

Here are 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 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.

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