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 thebutton
HTML element or an alternative instead ofinput
.
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 |