/*————————————
Background Gradient Colors
————————————*/ /* Simple Linear Gradients ————————————*/ /* Gray Light v1 */ .g-bg-gray-light-gradient-v1 {
&--after::after { background: linear-gradient(to bottom, rgba($g-color-gray-light-v5,.5), rgba($g-color-gray-light-v5,1)); }
}
/* White v1 */ .g-bg-white-gradient-v1 {
&--after::after { background: linear-gradient(to bottom, rgba($g-color-white,.5), rgba($g-color-white,.9)); }
}
/* Linear Gradients ————————————*/ /* Gray Gradient */ .g-bg-gray-lineargradient {
@include gradient-directional($start-color: #fff, $end-color: #dbdbdb, $deg: 180deg);
}
/* Blue Pink Gradient */ .g-bg-bluepink-lineargradient {
@include gradient-directional($start-color: hsla(205, 62%, 44%, 1), $end-color: #f62d51, $deg: 50deg);
}
/* Blue Gradient */ .g-bg-blue-lineargradient {
@include gradient-directional($start-color: #73bec7, $end-color: #4e66b0, $deg: 0deg);
} .g-bg-blue-lineargradient-v2 {
@include gradient-directional($start-color: #429edc, $end-color: #00629e, $deg: 225deg);
} .g-bg-blue-lineargradient-v3 {
@include gradient-directional($start-color: #3266a2, $end-color: #98cfbf, $deg: 225deg);
} .g-bg-blue-lineargradient-v4 {
@include gradient-directional($start-color: #5b85df, $end-color: #3ec2e3, $deg: 225deg);
} .g-bg-blue-lineargradient-v5 {
@include gradient-directional($start-color: #0050c2, $end-color: #5180fa, $deg: 225deg);
}
/* Orange Gradient */ .g-bg-orange-lineargradient {
@include gradient-directional($start-color: #be1715, $end-color: #ed6d0f, $deg: 225deg);
} .g-bg-orange-lineargradient-v2 {
@include gradient-directional($start-color: #f5cd21, $end-color: #c22821, $deg: 225deg);
}
/* Yellow Gradient */ .g-bg-yellow-lineargradient {
@include gradient-directional($start-color: #f59b00, $end-color: #f5d400, $deg: 225deg);
}
/* Dark Purple Gradient */ .g-bg-darkpurple-lineargradient {
@include gradient-directional($start-color: #0b011d, $end-color: #330c3c, $deg: 225deg);
}
/* Blue Gray Gradient */ .g-bg-bluegray-lineargradient {
@include gradient-directional($start-color: #1d253c, $end-color: #3e4757, $deg: 225deg);
}
/* Pink Gradient */ .g-bg-pink-lineargradient {
@include gradient-directional($start-color: #b6003b, $end-color: #ed1261, $deg: 225deg);
}
/* Pink-v2 Gradient */ .g-bg-pink-lineargradient-v2 {
@include gradient-x-three-colors($x-derection: right, $y-direction: top, $start-color: #fc7279, $start-color-stop: 10%, $mid-color: #ff7b9c, $mid-color-stop: 65%, $end-color: #ffc019, $end-color-stop: 125%);
}
/* Red Gradient */ .g-bg-red-lineargradient {
@include gradient-directional($start-color: #d70417, $end-color: #9f041b, $deg: 225deg);
}
/* Black Gradient */ .g-bg-black-gradient-opacity-v1, .g-bg-black-gradient-opacity-v1–after::after {
@include gradient-y-bottom($start-color: rgba(#000, 0), $end-color: rgba(#000, .9));
}
/* Green Gradient */ .g-bg-green-gradient-opacity-v1, .g-bg-green-gradient-opacity-v1–after::after {
@include gradient-y-bottom($start-color: rgba(#3398dc, .5), $end-color: rgba(#72c02c, .8));
}
/* Purple Gradient */ .g-bg-purple-gradient-opacity-v1, .g-bg-purple-gradient-opacity-v1–after::after {
@include gradient-y-bottom($start-color: rgba(#72c02c, .5), $end-color: rgba(#9a69cb, .8));
}
/* Pink Light Gradient */ .g-bg-pink-gradient-opacity-v1, .g-bg-pink-gradient-opacity-v1–after::after {
@include gradient-y-bottom($start-color: rgba(#72c02c, .5), $end-color: rgba(#e81c62, .8));
}
/* Cyan Gradient */ .g-bg-cyan-gradient-opacity-v1, .g-bg-cyan-gradient-opacity-v1–after::after {
@include gradient-y-bottom($start-color: rgba(#009, .5), $end-color: rgba(#00bed6, .6));
}
/* Purple Gradient */ .g-bg-purple-gradient-opacity-v1, .g-bg-purple-gradient-opacity-v1–after::after {
@include gradient-directional($start-color: rgba(#B7EBF6, 1), $end-color: rgba(#E461D2, .7), $deg: 150deg);
}
/* Primary Gradient */ .g-bg-primary-gradient-opacity-v1, .g-bg-primary-gradient-opacity-v1–after::after {
@include gradient-directional($start-color: rgba(#72c02c, 1), $end-color: rgba(#3398dc, .7), $deg: 150deg);
}
/* Gray Gradient */ .g-bg-gray-gradient-opacity-v1, .g-bg-gray-gradient-opacity-v1–after::after {
@include gradient-y-top($start-color: rgba($g-color-gray-light-v5, 1), $end-color: rgba(#fff, 1));
}
/* White Gradient */ .g-bg-white-gradient-opacity-v1, .g-bg-white-gradient-opacity-v1–after::after {
@include gradient-y-top($start-color: rgba(#000, .7), $end-color: rgba(#000, 0));
}
/* White Gradient */ .g-bg-white-gradient-opacity-v2, .g-bg-white-gradient-opacity-v2–after::after {
@include gradient-y-top($start-color: rgba(#000, 1), $end-color: rgba(#000, .1));
}
/* White Gradient */ .g-bg-white-gradient-opacity-v3, .g-bg-white-gradient-opacity-v3–after::after {
@include gradient-x-left($start-color: rgba(#fff, 1), $end-color: rgba(#fff, .3), $start-percent: 30%);
}
/* White Gradient */ .g-bg-white-gradient-opacity-v4, .g-bg-white-gradient-opacity-v4–after::after {
@include gradient-x-right($start-color: rgba(#fff, 1), $end-color: rgba(#fff, .3), $start-percent: 30%);
}
/* Bluegray Gradient */ .g-bg-bluegray-gradient-opacity-v1, .g-bg-bluegray-gradient-opacity-v1–after::after {
@include gradient-y-top($start-color: rgba($g-color-bluegray, .2), $end-color: rgba(#000, 0));
}
/* Bluegray Gradient */ .g-bg-bluegray-gradient-opacity-v2, .g-bg-bluegray-gradient-opacity-v2–after::after {
@include gradient-y-top($start-color: rgba($g-color-bluegray, .3), $end-color: rgba(#000, 0));
}
/* Bluegray Gradient */ .g-bg-bluegray-gradient-opacity-v3, .g-bg-bluegray-gradient-opacity-v3–after::after {
@include gradient-directional($start-color: rgba(#6b7de0, .85), $end-color: rgba(#2A2734, 1), $deg: 150deg);
}
/* Radial Gradients (Ellipse) ————————————*/ /* Lightblue Gradient */ .g-bg-lightblue-radialgradient-ellipse {
@include gradient-radial-ellipse($inner-color: #fff 22%, $outer-color: #d6e2ee);
}
/* Gray Gradient */ .g-bg-gray-radialgradient-ellipse {
@include gradient-radial-ellipse($inner-color: #dbdbdb 22%, $outer-color: #bbb);
}
/* Gray Gradient */ .g-bg-graylight-radialgradient-ellipse {
@include gradient-radial-ellipse($inner-color: #fff 25%, $outer-color: #eee);
}
/* Radial Gradients (Circle) ————————————*/ /* Lightblue Gradient */ .g-bg-lightblue-radialgradient-circle {
@include gradient-radial-circle($inner-color: #fff, $outer-color: #d6e2ee, $pos-x: 75%, $pos-y: 95%);
}
/* Blue Gradient */ .g-bg-blue-radialgradient-circle {
@include gradient-radial-circle($inner-color: #2294d7, $outer-color: #275296, $gradient-size: farthest-side);
}
/* Dark Gray Gradient */ .g-bg-darkgray-radialgradient-circle {
@include gradient-radial-circle($inner-color: #596070, $outer-color: #31353e, $pos-x: 110%, $pos-y: 0, $gradient-size: farthest-side);
}
// // Complementary Gradients //
.g-bg-blue-radialgradient-circle-endless {
background-image: repeating-radial-gradient(circle at 50% 50%, #b9ecfe, #b9ecfe 10px, #82ddff 10px, #82ddff 20px);
}
.g-bg-gray-verticalstripes-endless {
background: repeating-linear-gradient(to bottom, #fff, #fff 5px, #eee 5px, #eee 10px);
}