Skip to content

Style

Default styling: scss

Path: resources/sass/

All files are included in app.scss when different components are inside resources/sass/components/

Any new component can be added in currnt directories or inside a new directory if required. The new file must be included inapp.scssmentioned above

Base SCSS

Path: resources/sass/components/base/

_variables.scss Contains all scss variables and functions

Core Components

Path: resources/sass/components/core/

bootstrap_custom.scss Contains all changed style of bootstrap 4

breadcrumb.scss Contains all style of breadcrumb

custom_inputs.scss Contains all style of input type html

datatable.scss Contains all style of datatable

datetimepicker.scss Contains all style of date time picker

dropdown_language.scss Contains all style of language dropdown in top header

dropdown_notification.scss Contains all style of notification dropdown in top header

dropdown_user.scss Contains all style of user dropdown menu in top header

flash_message.scss Contains all style of flash message box developed in laraframe

footer.scss Contains all style of footer

list_filter.scss Contains all style of filter section in a 'list' page

list_pagination.scss Contains all style of pagination section in a 'list' page

list_search.scss Contains all style of search section in a 'list' page

menu-builder.scss Contains all style of visual menu builder section in admin

side_nav.scss Contains all style of left side navigation section

top_nav.scss Contains all style of top navigation section

primary.scss Contains all style of all other styles that are not categorized.

Usable CSS Classes
Class Structure Nested Parent Description
centralize-wrapper possible tag is div Yes - It is used to take a section vertically and horizontally centered
centralize-inner possible tag is div Yes centralize-wrapper -
centralize-content possible tag is div Yes centralize-inner Content will go inside it
lf-checkbox possible tag is div Yes - Custom checkbox. input type checkbox and label will be inside the div and they will be siblings themselves
inactive label No lf-checkbox inactive checkbox style. There will be no input field in this case
active label No lf-checkbox active checkbox style. There will be no input field in this case
lf-radio possible tag is div Yes - Custom checkbox. input type radio and label will be inside the div and they will be siblings themselves
inactive label No lf-radio inactive checkbox style. There will be no input field in this case
active label No lf-radio active checkbox style. There will be no input field in this case
lf-switch possible tag is div Yes - Custom checkbox. input type radio and label will be inside the div and they will be siblings themselves
lf-switch-input input type radio No lf-switch -
lf-switch-label label No lf-switch -
lf-select possible tag is div Yes - Custom select style. Select tag will be inside it
line-height-standard all tags No - Standard line height. Value of line height is 1
line-height-medium all tags No - Medium line height. Value of line height is 1.5
line-height-maximum all tags No - Maximum line height. Value of line height is 2
img-table possible tag is td No - Set table cell image widht 30px
lf-w-*px all tags No - Custom width class. Replace * number between 10 and 200, and increment value is 10
lf-h-*px all tags No - Custom height class. Replace * number between 10 and 200, and increment value is 10
border-gray-11 all tags No - Border light gray class
lf-flex-* possible tag is div No flex Custom flex ratio class. Replace * number between 1 and 10, and increment value is 1
lf-cursor-pointer possible tags are a,li,button,span No - Cursor pointer class
lf-pre-wrap possible tag is div No - Pre wrap class