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)
);
|
|
