Sass
Sass Files are found under pages/src/sass
sass
modules
themes
mixin.scss
color.scss
modules.scss
pages.scss
responsive.scss
var.scss
The separation of modules help you to remove what's not necessary and build your own custom pages CSS. You can specify which module you need and do not need in modules.scss file.
NAME | DESCRIPTION |
layout.scss | The core layout styles for pages |
headers.scss | Top Navigation bar |
respnsive.scss | The responsive handlers |
cards.scss | Bootstrap cards over-written classes |
chat.scss | Contains classes for the right hand sidebar chat |
typography.scss | Contains all typo related styles included bg-color |
button.scss | Bootstrap button over-written classes and pages dropdown |
alerts.scss | Bootstrap alert messages over-written classes |
breadcrumb.scss | Bootstrap breadcrumb classes |
notifications.scss | Pages notifications, bootstrap badges, popovers |
checkbox.scss | Pages checkboxes |
radio.scss | Pages radio element |
horizontal_layout.scss | Pages horizontal layout classes for executive and casual layout |
horizontal_menu.scss | Horizontal dropdown menu |
icons.scss | Pages icons |
list.scss | iOS style listview in chat and email |
progress_indicators.scss | Pages progress bars, bootstrap native progress |
modals.scss | Bootstrap Modal Classes |
tabs_accordian.scss | Bootstrap tabs and accordains |
sliders.scss | Class for sliders |
treeview.scss | Class for treeview |
nestables.scss | Class for nestables |
form_elements.scss | All form related class including layouts & validations |
tables.scss | Classes for bootstrap tables and datatables |
tables.scss | Classes for bootstrap tables and datatables |
vector_map.scss | Classes for mapplic plugin |
charts.scss | All chart related classes |
print.scss | Print media query for invoice |
overlay-search.scss | Pages quick search classes |
quick-view.scss | Pages right hand-side quick drawer |
lockscreen.scss | Class for lockscreen |
page-loader.scss | PaceJS classes for page loading bar |
calendar.scss | Pages Calendar plugin |
social.scss | Pages Social |
email.scss | Pages email |
login.scss | Login page |
misc.scss | All other utilities and helper classes |
gallery.scss | Image gallery |
z-index.scss | To maintain heierachchy and order for layers |
Variables help to generate themes, you can custom build your very own theme. The variables will be included inside a specific theme e.g: scss/themes/default/var.scss by changing the few 5 main color variables you can create your color palette
By simply changing the following variables the entire color palette mention here will change Color Palette
Main Base color
$color-contrast-lower
$color-contrast-higher
Primary Colors
$color-success
$color-complete
$color-primary
$color-warning
$color-danger
$color-info
Mixins
We have made a wide variety of mixins that can be used in scss,
mixins can be found under pages/src/scss/mixin.scss
