SCSS

Structure

Vixon has managed the scss file in the ( vixon_v*/src/assets/scss ) folder. We have used gulp-sass for scss compilation. You can add your custom scss in the custom.scss file instead of doing changes in the app.scss or other scss files as it will create conflicts in future updates.

Variables Structure

We have defined all the variables in the src/assets/scss/ folder.

_variables.scss
All bootstrap variables are defined in this file.

Layout Structure

We have added all layouts files in the src/assets/scss/structure folder.

_footer.scss
Footer-related scss define in this file.
_horizontal.scss
Horizontal layout scss managed in this file.
_layouts.scss
Manage Boxed layout scss in this file.
_page-head.scss
Manage page heading scss in this file.
_topbar.scss
Topbar scss in this file.
_two-column.scss
Two Column scss in this file.
_vertical.scss
Vertical layout scss in this file.

Other SCSS file Structure

We have created all the scss files in the src/assets/scss folder.

apps
All apps related scss files are created in this folder.
components
All components related scss files are created in this folder.
pages
All the pages related to scss are written in this folder and page wise scss created i.e. _authentication.scss, _chat.scss, _dashboard.scss etc
plugins
All the plugins ( Apex chart, ckeditor, full calendar etc ) are created in the plugins folder.
icons.scss
All icons scss are imported in this file.

Quick customization of layout using scss.

You can make changes in the src/assets/scss/theme/_*.scss file.

Variables Description
$primary:       $blue;
$secondary:     $indigo;
$success:       $green;
$info:          $teal;
$warning:       $yellow;
$danger:        $red;
$light:         $gray-200;
$dark:          $gray-900;
You can manage those colors to update the color theme.
--#{$prefix}font-sans-serif:                         "Poppins" ,sans-serif;;
--#{$prefix}font-monospace:                          "Poppins" ,sans-serif;
You can set the default font in these variables.
--#{$prefix}vertical-menu-width:                             250px;
--#{$prefix}vertical-menu-width-md:                          180px;
--#{$prefix}vertical-menu-width-sm:                          70px;

--#{$prefix}twocolumn-menu-width:                            220px
--#{$prefix}twocolumn-menu-iconview-width:                   70px
Set the sidebar menu with these variables.
© Vixon.
Design & Develop by Themesbrand