Customization SCSS | Steex - Admin & Dashboard Template

SCSS

Structure

Steex Angular has managed with the scss file which is placed in src/assets/scss folder. You can add or update your custom scss in the custom.scss file instead of making any changes in the app.scss or other scss files because changes or updation will cause conflicts henceforth and you will face trouble.

sass
apps
components
- All the components scss files are here.
pages
- All the pages scss files are here.
plugins
- icons
  - All the icons scss files are here
- All the plugins scss files are here.
rtl
- All the RTL scss files are here.
structure
theme
_variables.scss

_variables-dark.scss

app.scss

bootstrap.scss

custom.scss

icons.scss

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.

Variables Structure

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

_variables.scss:: All bootstrap variables are defined 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.
fonts: All fonts are imported in this scss file.
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.

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.