// Font Family
$karla: 'Poppins', sans-serif;
$gilroy: 'Poppins', sans-serif;
// Colors
$text-color: #616161;
$text-color-2: #81a3bb;
$text-color-3: #69a1bb;
$border-color: #e3eeff;
$border-color-2: #ededed;
$white: #fff;
$black: #232323;
$grey: #f7f7fd;
$primary-color: #0c59db;
$secondary-color: #002249;
$secondary-soft: #4f79a9;
$soft-blue: #f5faff;
$bs1: rgba(36, 37, 38, 0.08) 4px 4px 15px 0px;
$bs2: rgba(36, 37, 38, 0.15) 4px 4px 30px 0px;
// A map of breakpoints.
$breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px,
);
// Respond above.
@mixin respond-above($breakpoint) {
// If the breakpoint exists in the map.
@if map-has-key($breakpoints, $breakpoint) {
// Get the breakpoint value.
$breakpoint-value: map-get($breakpoints, $breakpoint);
// Write the media query.
@media (min-width: $breakpoint-value) {
@content;
}
// If the breakpoint doesn't exist in the map.
} @else {
// Log a warning.
@warn 'Invalid breakpoint: #{$breakpoint}.';
}
}
// Respond Below
@mixin respond-below($breakpoint) {
// If the breakpoint exists in the map.
@if map-has-key($breakpoints, $breakpoint) {
// Get the breakpoint value.
$breakpoint-value: map-get($breakpoints, $breakpoint);
// Write the media query.
@media (max-width: ($breakpoint-value - 1)) {
@content;
}
// If the breakpoint doesn't exist in the map.
} @else {
// Log a warning.
@warn 'Invalid breakpoint: #{$breakpoint}.';
}
}
// Respond Between
@mixin respond-between($lower, $upper) {
// If both the lower and upper breakpoints exist in the map.
@if map-has-key($breakpoints, $lower) and map-has-key($breakpoints, $upper)
{
// Get the lower and upper breakpoints.
$lower-breakpoint: map-get($breakpoints, $lower);
$upper-breakpoint: map-get($breakpoints, $upper);
// Write the media query.
@media (min-width: $lower-breakpoint) and (max-width: ($upper-breakpoint - 1)) {
@content;
}
// If one or both of the breakpoints don't exist.
} @else {
// If lower breakpoint is invalid.
@if (map-has-key($breakpoints, $lower) ==false) {
// Log a warning.
@warn 'Your lower breakpoint was invalid: #{$lower}.';
}
// If upper breakpoint is invalid.
@if (map-has-key($breakpoints, $upper) ==false) {
// Log a warning.
@warn 'Your upper breakpoint was invalid: #{$upper}.';
}
}
}
// mixin
@mixin transition($time) {
-webkit-transition: all $time ease-out 0s;
-moz-transition: all $time ease-out 0s;
-ms-transition: all $time ease-out 0s;
-o-transition: all $time ease-out 0s;
transition: all $time ease-out 0s;
}
@mixin box-sizing($value) {
-webkit-box-sizing: $value;
-moz-box-sizing: $value;
box-sizing: $value;
}
@mixin animation($value) {
-webkit-animation: $value;
-moz-animation: $value;
-o-animation: $value;
animation: $value;
}
@mixin gradint($value : 90deg) {
background-image: -webkit-linear-gradient(to right, #1fa2ff, #c779d0, #4bc0c8);
background-image: -moz-linear-gradient(to right, #1fa2ff, #c779d0, #4bc0c8);
background-image: -o-linear-gradient(to right, #1fa2ff, #c779d0, #4bc0c8);
background-image: linear-gradient(to right, #1fa2ff, #c779d0, #4bc0c8);
}
@mixin gradinttext($value : 90deg) {
background-image: -webkit-linear-gradient(to right, #1fa2ff, #c779d0, #4bc0c8);
background-image: -moz-linear-gradient(to right, #1fa2ff, #c779d0, #4bc0c8);
background-image: -o-linear-gradient(to right, #1fa2ff, #c779d0, #4bc0c8);
background-image: linear-gradient(to right, #1fa2ff, #c779d0, #4bc0c8);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}