126 lines
3.2 KiB
SCSS
126 lines
3.2 KiB
SCSS
//
|
|
// Font //
|
|
//
|
|
$font-family-primary: 'Open Sans', sans-serif;
|
|
$font-family-playfair: 'Playfair Display', serif;
|
|
$font-family-poppins: 'Poppins', sans-serif;
|
|
$font-family-nunito: 'Nunito', sans-serif;
|
|
$font-family-outfit: 'Outfit', sans-serif;
|
|
$font-weight-black: 900;
|
|
$font-weight-extra-bold: 800;
|
|
$font-weight-bold: 700;
|
|
$font-weight-semi-bold: 600;
|
|
$font-weight-medium: 500;
|
|
$font-weight-regular: 400;
|
|
$font-weight-light: 300;
|
|
$font-weight-extra-light: 200;
|
|
$font-weight-thin: 100;
|
|
|
|
//
|
|
// Colors //
|
|
//
|
|
$colors: (
|
|
"white": (255, 255, 255),
|
|
"dark": (18, 21, 24),
|
|
"blue": (0, 147, 233),
|
|
"purple": (183, 33, 255),
|
|
"golden-yellow": (255, 182, 87),
|
|
"pink-edge": (254, 154, 182),
|
|
"very-peri": (102, 103, 171),
|
|
"turquoise": (76, 191, 166),
|
|
"spring-red": (190, 31, 53),
|
|
"tan": (210, 180, 140),
|
|
"aqua": (3, 212, 216)
|
|
);
|
|
@function get-color($color-name, $opacity: null) {
|
|
@if not map-has-key($colors, $color-name) {
|
|
@warn "Color `#{$color-name}` not found in $colors map.";
|
|
@return null;
|
|
}
|
|
|
|
$color: map-get($colors, $color-name);
|
|
|
|
@if $opacity == null {
|
|
@return rgb(nth($color, 1), nth($color, 2), nth($color, 3));
|
|
} @else {
|
|
@return rgba(nth($color, 1), nth($color, 2), nth($color, 3), $opacity);
|
|
}
|
|
}
|
|
$color-white: map-get($colors, "white");
|
|
$color-dark: map-get($colors, "dark");
|
|
$color-dark-lighter: rgb(25, 28, 31);
|
|
$color-primary: #7C7C7C;
|
|
$color-primary-lighter: #AAAAAA;
|
|
$color-green: #24963e;
|
|
$color-green-lighter: #28a745;
|
|
$color-red: #c62f3e;
|
|
$color-red-lighter: #dc3545;
|
|
|
|
//
|
|
// Social Colors //
|
|
//
|
|
$color-facebook: #1877F2;
|
|
$color-twitter: #1DA1F2;
|
|
$color-instagram: #E4405F;
|
|
$color-linkedin: #0A66C2;
|
|
$color-youtube: #CD201F;
|
|
$color-pinterest: #BD081C;
|
|
$color-skype: #00AFF0;
|
|
$color-dribbble: #EA4C89;
|
|
$color-snapchat: #FFFC00;
|
|
$color-whatsapp: #25D366;
|
|
|
|
//
|
|
// Gradient Colors //
|
|
//
|
|
$gradient-1: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
|
|
$gradient-2: linear-gradient(45deg, #A9C9FF 0%, #FFBBEC 100%);
|
|
$gradient-3: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
|
|
$gradient-4: linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%);
|
|
$gradient-5: linear-gradient(45deg, #FBDA61 0%, #FF5ACD 100%);
|
|
$gradient-6: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
|
|
$gradient-7: linear-gradient(90deg, #007990 0%, #6CE5C0 100%);
|
|
|
|
//
|
|
// Background colors //
|
|
//
|
|
$bg-dark: rgb(24, 28, 32);
|
|
$bg-dark-lighter: rgb(32, 36, 40);
|
|
$bg-dark-lightest: rgb(40, 44, 48);
|
|
$bg-gray: rgb(238, 242, 246);
|
|
$bg-gray-lighter: rgb(241, 245, 249);
|
|
$bg-gray-lightest: rgb(244, 248, 252);
|
|
|
|
$bg-light-blue: #e2f2fb;
|
|
$bg-light-purple: #F5E4FF;
|
|
$bg-light-pink-edge: #FEE6ED;
|
|
$bg-light-golden-yellow: #FFEFDB;
|
|
$bg-light-very-peri: #EDEDF5;
|
|
$bg-light-turquoise: #E2F4F0;
|
|
$bg-light-spring-red: #F7E5E7;
|
|
$bg-light-tan: #f6f0e8;
|
|
$bg-light-aqua: #CEF6F7;
|
|
|
|
$bg-color-blue: #0093E9;
|
|
$bg-color-purple: #B721FF;
|
|
$bg-color-pink-edge: #FE9AB6;
|
|
$bg-color-golden-yellow: #FFB657;
|
|
$bg-color-very-peri: #6667AB;
|
|
$bg-color-turquoise: #4cbfa6;
|
|
$bg-color-spring-red: #BE1F35;
|
|
$bg-color-tan: #d2b48c;
|
|
$bg-color-aqua: #03D4D8;
|
|
|
|
//
|
|
// Border colors //
|
|
//
|
|
$border-gray: rgb(226, 230, 234);
|
|
|
|
//
|
|
// Button colors //
|
|
//
|
|
$button-dark: rgb(24, 28, 32);
|
|
$button-dark-lighter: rgb(32, 36, 40);
|
|
$button-gray: rgb(228, 232, 236);
|
|
$button-gray-lighter: rgb(238, 242, 246);
|
|
$button-gray-darker: rgb(220, 224, 228); |