SASS
Layout
Each demo has own base style(the layout and components)
[metronic]/theme/default/[demo]/src/assets/sass/style.scss
that will be compiled
into the demo's base css bundle style.bundle.css
.
Mixins
When you customize or code in Metronic's SASS environment you can use Metronic's globally available base
mixins. All available mixins can be found here:
[metronic]/theme/default/[demo]/src/assets/sass/global/_mixins.scss
SASS Functions
You can use Metronic's globally available SASS functions in your custom codes. All available functions can be
found here:
[metronic]/theme/default/[demo]/src/assets/sass/global/_functions.scss
Metronic uses nested map list to structure the config options with special custom function
kt-get()
to access the nested config structure.
You can access to an option by using
kt-get()
function as shown below:
transition: kt-get($kt-aside-config, base, minimize, transition);
Layout Config
Each demo has own SASS config
[metronic]/theme/default/[demo]/src/assets/sass/global/layout/_config.scss
that will be globally used to
compile the above main style SASS file style.scss
.
Variable |
Description |
$kt-page-bg-color |
Page background color.
Config |
$kt-page-bg-color: #f2f3f8;
|
|
$kt-page-padding |
Page padding based on the responsive screens.
Config |
$kt-page-padding: (
desktop: 25px,
mobile: 15px
);
|
|
$kt-page-margin |
Page margin based on the responsive screens.
Config |
$kt-page-margin: (
desktop: 30px,
mobile: 0
);
|
|
$kt-page-body-bg-color |
Page body background color.
Config |
$kt-page-body-bg-color: #efeff5;
|
|
$kt-page-content-bg-color |
Page content background color.
Config |
$kt-page-content-bg-color: #f9f9fc;
|
|
$kt-page-container-width |
Fixed page width.
Config |
$kt-page-container-width: 1380px;
|
|
$kt-page-fluid-container-padding |
Fluid page padding.
Config |
$kt-page-fluid-container-padding: 80px;
|
|
$kt-aside-default-width |
Aside menu width for default state.
Config |
$kt-aside-default-width: 260px;
|
|
$kt-aside-minimize-width |
Aside menu width for minimize state.
Config |
$kt-aside-minimize-width: 78px;
|
|
$kt-aside-offcanvas-width |
Aside menu width of offcanvas.
Config |
$kt-aside-offcanvas-width: 255px;
|
|
$kt-layout-skins |
Layout skin colors.
Config |
$kt-layout-skins: (
brand: #4d65dc,
navy: #242939,
light: #ffffff
);
|
|
Global SASS Config
Each demo's style.scss
includes the entire framework stylesheets and compiles with its own
global settings
[metronic]/theme/default/[demo]/src/assets/sass/_config.scss
//
// Global Config
//
// Init global functions and mixins
@import "global/init";
// Layout Breakpoints(bootstrap responsive breakpoints)
// Define the minimum and maximum dimensions at which your layout will change, adapting to different screen sizes, for use in media queries.
$kt-media-breakpoints: (
// Extra small screen / phone
xs: 0,
// Small screen / phone
sm: 576px,
// Medium screen / tablet
md: 768px,
// Large screen / desktop
lg: 1024px, //1024px,
// Extra large screen / wide desktop
xl: 1399px
) !default;
// Global rounded border mode
$kt-rounded: true !default;
// Border Radius
$kt-border-radius: 4px !default;
// Core icon codes(lineawesome icons: https://icons8.com/line-awesome)
$kt-action-icons: (
close: '\f191',
down: '\f110',
up: '\f113',
left: '\f111',
right: '\f112',
plus: '\f2c2',
minus: '\f28e'
) !default;
// Core bold icon codes(lineawesome icons: https://keenthemes.com/metronic/preview/default/components/icons/flaticon.html)
$kt-action-bold-icons: (
down: '\f1a3',
up: '\f1a5',
left: '\f1a4',
right: '\f19d',
close: '\f1b2'
) !default;
// Elevate shadow
$kt-elevate-shadow: 0px 0px 13px 0px rgba(82,63,105,0.05) !default;
$kt-elevate-shadow-2: 0px 0px 13px 0px rgba(82,63,105,0.1) !default;
// Dropdown shadow
$kt-dropdown-shadow: 0px 0px 50px 0px rgba(82,63,105, 0.15) !default;
// Custom scrollbar color
$kt-scroll-color: darken(#ebedf2, 6%) !default;
// Transition
$kt-transition: all 0.3s !default;
// Modal Z-index
$kt-modal-zindex: 1050 !default;
// dropdown Z-index
$kt-dropdown-zindex: 95 !default;
// State Color
$kt-state-colors: (
// Metronic states
brand: (
base: #5d78ff,
inverse: #ffffff
),
light: (
base: #ffffff,
inverse: #282a3c
),
dark: (
base: #282a3c,
inverse: #ffffff
),
// Bootstrap states
primary: (
base: #5867dd,
inverse: #ffffff
),
success: (
base: #0abb87, //1dc9b7,
inverse: #ffffff
),
info: (
base: #5578eb,
inverse: #ffffff
),
warning: (
base: #ffb822,
inverse: #111111
),
danger: (
base: #fd397a,
inverse: #ffffff
)
) !default;
// Base colors
$kt-base-colors: (
label: (
1: #a2a5b9,
2: #74788d,
3: #595d6e,
4: #48465b
),
shape: (
1: #f0f3ff,
2: #e8ecfa,
3: #93a2dd,
4: #646c9a
),
grey: (
1: #f7f8fa, //#f4f5f8
2: #ebedf2,
3: darken(#ebedf2, 3%),
4: darken(#ebedf2, 6%)
)
) !default;
// Social network colors(see: https://brandcolors.net/)
$kt-social-colors: (
facebook: (
base: #3b5998,
inverse: #ffffff
),
google: (
base: #dc4e41,
inverse: #ffffff
),
twitter: (
base: #4AB3F4,
inverse: #ffffff
),
instagram: (
base: #517fa4,
inverse: #ffffff
),
youtube: (
base: #b31217,
inverse: #ffffff
),
linkedin: (
base: #0077b5,
inverse: #ffffff
),
skype: (
base: #00aff0,
inverse: #ffffff
)
) !default;
// Root Font Settings
$kt-font-families: (
regular: 'Poppins',
heading: 'Poppins'
) !default;
// Root Font Settings
$kt-font-size: (
size: (
desktop: 13px,
tablet: 12px,
mobile: 12px
),
weight: 300
) !default;
// General Link Settings
$kt-font-color: (
text: #646c9a,
link: (
default: kt-state-color(brand),
hover: darken(kt-state-color(brand), 6%)
)
) !default;
// Portlet settings
$kt-portlet: (
min-height: (
default: (
desktop: 60px,
mobile: 50px
),
sm: (
desktop: 50px,
mobile: 40px
),
lg: (
desktop: 80px,
mobile: 60px
),
xl: (
desktop: 100px,
mobile: 80px
)
),
space: (
desktop: 25px,
mobile: 15px
),
bottom-space: (
desktop: 20px,
mobile: 20px
),
border-color: kt-base-color(grey, 2),
bg-color: #ffffff,
shadow: 0px 0px 30px 0px rgba(82,63,105,0.05)
) !default;
// Page padding
$kt-page-padding: (
desktop: 25px,
mobile: 15px
) !default;
// Page container width
$kt-page-container-width: 1380px !default;
// Custom Scroll(Perfect Scrollbar) size
$kt-custom-scroll-size: 4px !default;
Variable |
Description |
$kt-media-breakpoints |
Layout Breakpoints(bootstrap responsive breakpoints). Define the minimum and maximum dimensions at
which your layout will change, adapting to different screen
sizes, for use in media queries
Config |
$kt-media-breakpoints: (
// Extra small screen / phone
xs: 0,
// Small screen / phone
sm: 576px,
// Medium screen / tablet
md: 768px,
// Large screen / desktop
lg: 1024px, //1024px,
// Extra large screen / wide desktop
xl: 1399px
) !default;
|
|
$kt-rounded |
Set global rounded border mode enable/disable.
Config |
$kt-rounded: true !default;
|
|
$kt-border-radius |
Set global border radius size.
Config |
$kt-border-radius: 4px !default;
|
|
$kt-action-icons |
Core icon codes(lineawesome icons: https://icons8.com/line-awesome)
Config |
$kt-action-icons: (
close: '\f191',
down: '\f110',
up: '\f113',
left: '\f111',
right: '\f112',
plus: '\f2c2',
minus: '\f28e'
) !default;
|
|
$kt-elevate-shadow |
Elevate shadow CSS values
Config |
$kt-elevate-shadow: 0px 0px 13px 0px rgba(82,63,105,0.05);
$kt-elevate-shadow-2: 0px 0px 13px 0px rgba(82,63,105,0.1);
|
|
$kt-dropdown-shadow |
Dropdown shadow CSS values
Config |
$kt-dropdown-shadow: 0px 0px 50px 0px rgba(82,63,105, 0.15);
|
|
$kt-scroll-color |
Custom scrollbar color
Config |
$kt-scroll-color: darken(#ebedf2, 6%);
|
|
$kt-transition |
Set global transition.
Config |
$kt-transition: all 0.3s !default;
|
|
$kt-modal-zindex |
Set global modal z-index.
Config |
$kt-modal-zindex: 1050 !default;
|
|
$kt-dropdown-zindex |
Set global dropdown z-index.
Config |
$kt-dropdown-zindex: 95 !default;
|
|
$kt-brand-color |
Set global brand color.
Config |
$kt-brand-color: #536be2 !default;
|
|
$kt-brand-inverse-color |
Set global brand inverse color.
Config |
$kt-brand-inverse-color: #ffffff !default;
|
|
$kt-state-colors |
State colors of Metronic and Bootstrap.
Config |
$kt-state-colors: (
// Metronic states
brand: (
base: #505ae2,
inverse: #ffffff
),
light: (
base: #ffffff,
inverse: #282a3c
),
dark: (
base: lighten(#4c467a, 12%),
inverse: #ffffff
),
// Bootstrap states
primary: (
base: #5867dd,
inverse: #ffffff
),
success: (
base: #1dc9b7,
inverse: #ffffff
),
info: (
base: #5578eb,
inverse: #ffffff
),
warning: (
base: #ffb822,
inverse: #111111
),
danger: (
base: #fd397a,
inverse: #ffffff
)
)!default;
|
|
$kt-base-colors |
Base colors.
Config |
$kt-base-colors: (
label: (
1: #c5cbe3,
2: #a1a8c3,
3: #646c9a,
4: #3d4465
),
shape: (
1: #f0f3ff,
2: #e8ecfa,
3: #93a2dd,
4: #646c9a
),
grey: (
1: #f7f8fa, //#f4f5f8
2: #ebedf2,
3: darken(#ebedf2, 3%),
4: darken(#ebedf2, 6%)
)
) !default;
|
|
$kt-font-families |
Root font family list.
Config |
$kt-font-families: (
regular: 'Poppins',
heading: 'Poppins'
) !default;
|
|
$kt-font-size |
Root font settings.
Config |
$kt-font-size: (
size: (
desktop: 13px,
tablet: 12px,
mobile: 12px
),
weight: 300
) !default;
|
|
$kt-font-color |
General link font settings.
Config |
$kt-font-color: (
text: #646c9a,
link: (
default: kt-state-color(brand),
hover: darken(kt-state-color(brand), 6%)
)
) !default;
|
|
$kt-portlet |
Base portlet component settings.
Config |
$kt-portlet: (
min-height: (
default: (
desktop: 60px,
mobile: 50px
),
lg: (
desktop: 80px,
mobile: 60px
),
xl: (
desktop: 100px,
mobile: 80px
)
),
space: (
desktop: 25px,
mobile: 15px
),
bottom-space: (
desktop: 20px,
mobile: 10px
),
border-color: kt-base-color(grey, 2),
bg-color: #ffffff,
shadow: 0px 0px 30px 0px rgba(82,63,105,0.05)
);
|
|