Sass is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions. Pages support Sass and is purely built on top of Sass
Sass Files are found under pages/src/sass
sass
modules
themes
mixin.scss
color.scss
modules.scss
pages.scss
responsive.scss
var.scss
Modules
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
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
Creating your own Color Pallets
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