SCSS
Structure
Judia React 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.
- scss
-
structure
- _footer.scss // All the Scss related to the Footer file is here.
- _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.
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. |