151 lines
4.4 KiB
SCSS
151 lines
4.4 KiB
SCSS
/*-------------------------
|
|
Variables
|
|
-------------------------*/
|
|
:root {
|
|
//Themes colors
|
|
--color-primary: #1ab69d;
|
|
--color-secondary: #ee4a62;
|
|
--color-textSecondary: #ff5b5c;
|
|
--color-tertiary: #f8b81f;
|
|
--color-dark: #111212;
|
|
--color-heading: #181818;
|
|
--dark-color-heading: #ffffff;
|
|
--color-border: #e5e5e5;
|
|
--dark-color-border: #282f3a;
|
|
--color-body: #808080;
|
|
--gradient-primary: linear-gradient(-90deg, #31b978 0%, #1ab69d 100%);
|
|
--bg-color: #EAF0F2;
|
|
--dark-bg-color: #020b17;
|
|
--cta-color-bg:#F0F4F5;
|
|
--color-bg-body:#ffffff;
|
|
--dark-color-bg-body:#111822;
|
|
--bg-color-2: #1c242f;
|
|
// Typo Color
|
|
--color-white: #ffffff;
|
|
--color-black: #000000;
|
|
--footer-text: #181818;
|
|
--dark-footer-text: #808080;
|
|
--edu-btn-color: #ffffff;
|
|
--color-title: #bababa;
|
|
|
|
// Lighten Color
|
|
|
|
--color-lighten01: #f0f4f5;
|
|
--color-lighten02: #edf5f8;
|
|
--color-lighten03: #f5f1eb;
|
|
--color-lighten04: #f7f5f2;
|
|
|
|
// Extra Color
|
|
--color-extra01: #0ecd73;
|
|
--color-extra02: #8e56ff;
|
|
--color-extra03: #f92596;
|
|
--color-extra04: #5866eb;
|
|
--color-extra05: #f8941f;
|
|
--color-extra06: #39c0fa;
|
|
--color-extra07: #da04f8;
|
|
--color-extra08: #4664e4;
|
|
--color-extra09: #525151;
|
|
--color-extra10: #404040;
|
|
--color-extra11: #22272e;
|
|
|
|
// Notify Colors
|
|
--color-success: #3EB75E;
|
|
--color-danger: #FF0003;
|
|
--color-warning: #FF8F3C;
|
|
--color-info: #1BA2DB;
|
|
--color-placeholder: #808080;
|
|
|
|
//Social icon colors
|
|
--color-facebook: #1877f2;
|
|
--color-twitter: #1da1f2;
|
|
--color-youtube: #cd201f;
|
|
--color-linkedin: #0a66c2;
|
|
--color-pinterest: #E60022;
|
|
--color-instagram: #C231A1;
|
|
--color-vimeo: #00ADEF;
|
|
--color-twitch: #6441A3;
|
|
--color-discord: #7289da;
|
|
|
|
//Border-radius
|
|
--border-width: 2px;
|
|
--radius-small: 4px;
|
|
--radius: 10px;
|
|
--radius-big: 16px;
|
|
|
|
|
|
//Font weight
|
|
--p-light: 300;
|
|
--p-regular: 400;
|
|
--p-medium: 500;
|
|
--p-semi-bold: 600;
|
|
--p-bold: 700;
|
|
--p-extra-bold: 800;
|
|
|
|
|
|
//Shadows
|
|
--shadow-darker: 0px 10px 50px 0px rgba(26,46,85,0.1);
|
|
--shadow-darker2: 0px 20px 50px 0px rgba(26,46,85,0.1);
|
|
--shadow-dark: 0px 10px 30px 0px rgba(20,36,66,0.15);
|
|
--shadow-darkest: 0px 10px 30px 0px rgba(0,0,0,0.05);
|
|
--shadow-darker3:0px 4px 50px 0px rgba(0, 0, 0, 0.1);
|
|
--shadow-darker4: 0px 20px 70px 0px rgba(15, 107, 92, 0.2);
|
|
|
|
//transition easing
|
|
--transition: 0.3s;
|
|
--transition-2: 0.5s;
|
|
--transition-transform: transform .65s cubic-bezier(.23,1,.32,1);
|
|
|
|
//Font Family
|
|
--font-primary: 'Poppins', sans-serif;
|
|
--font-secondary: 'Spartan', sans-serif;
|
|
--font-icomoon: 'icomoon';
|
|
|
|
//Fonts Size
|
|
--font-size-b1: 15px;
|
|
--font-size-b2: 13px;
|
|
|
|
//Line Height
|
|
--line-height-b1: 1.73; //26px
|
|
--line-height-b2: 1.85; //24px
|
|
|
|
// Heading Font
|
|
--h1: 50px; //60px 700 1.2
|
|
--h2: 36px; //50px 700 1.39
|
|
--h3: 28px; // 40px 700 1.43
|
|
--h4: 20px; //28px 600 1.4
|
|
--h5: 18px; //26px 600 1.45
|
|
--h6: 16px; //26px 600 1.62
|
|
|
|
|
|
--h1-lineHeight: 1.2;
|
|
--h2-lineHeight: 1.39;
|
|
--h3-lineHeight: 1.43;
|
|
--h4-lineHeight: 1.4;
|
|
--h5-lineHeight: 1.45;
|
|
--h6-lineHeight: 1.62;
|
|
|
|
}
|
|
|
|
// Layouts Variation
|
|
$custom-lg-device-seven: 'only screen and (min-width: 1200px)';
|
|
$custom-lg-device-three: 'only screen and (min-width: 1750px)';
|
|
$custom-lg-device-four: 'only screen and (min-width: 1800px)';
|
|
$custom-lg-device-five: 'only screen and (min-width: 1900px)';
|
|
|
|
$custom-lg-device-two: 'only screen and (min-width: 1401px) and (max-width: 1750px)';
|
|
$custom-lg-device-six: 'only screen and (min-width: 1401px) and (max-width: 1650px)';
|
|
$custom-lg-device-eight: 'only screen and (min-width: 1200px) and (max-width: 1450px)';
|
|
|
|
$laptop-device: 'only screen and (min-width: 1200px) and (max-width: 1599px)';
|
|
$custom-laptop-device: 'only screen and (min-width: 1200px) and (max-width: 1400px)';
|
|
|
|
$extra-device: 'only screen and (min-width: 1600px) and (max-width: 1919px)';
|
|
$lg-layout: 'only screen and (min-width: 992px) and (max-width: 1199px)';
|
|
$md-layout:'only screen and (min-width: 768px) and (max-width: 991px)';
|
|
|
|
$lg-layout-1:'only screen and (max-width: 1650px)';
|
|
$smlg-device: 'only screen and (max-width: 1199px)';
|
|
$md-layout-1:'only screen and (max-width: 991px)';
|
|
$sm-layout:'only screen and (max-width: 767px)';
|
|
$large-mobile: 'only screen and (max-width: 575px)';
|
|
$small-mobile: 'only screen and (max-width: 479px)'; |