feat: Add a breadcrumb
This commit is contained in:
kbe
80
assets/css/scss/basic/_background.scss
Normal file
80
assets/css/scss/basic/_background.scss
Normal file
@@ -0,0 +1,80 @@
|
|||||||
|
//
|
||||||
|
// Background Styles //
|
||||||
|
//
|
||||||
|
.bg-image {
|
||||||
|
position: relative;
|
||||||
|
background-position: center center;
|
||||||
|
background-attachment: scroll;
|
||||||
|
@include background-size(cover);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
.bg-fade-white-top {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
&:before {
|
||||||
|
z-index: -1;
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-image: linear-gradient(to top, white, get-color("white", 0.2));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bg-fade-white-bottom {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
&:before {
|
||||||
|
z-index: -1;
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-image: linear-gradient(to bottom, white, get-color("white", 0.2));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bg-fade-black-top {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
&:before {
|
||||||
|
z-index: -1;
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-image: linear-gradient(to top, black, rgba(0,0,0,0.2));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bg-fade-black-bottom {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
&:before {
|
||||||
|
z-index: -1;
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-image: linear-gradient(to bottom, black, rgba(0,0,0,0.2));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-video {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: -1;
|
||||||
|
video {
|
||||||
|
object-fit: cover;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
655
assets/css/scss/basic/_base.scss
Normal file
655
assets/css/scss/basic/_base.scss
Normal file
@@ -0,0 +1,655 @@
|
|||||||
|
//
|
||||||
|
// Base Styles //
|
||||||
|
//
|
||||||
|
html, body {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Container, Row //
|
||||||
|
//
|
||||||
|
.container, .container-fluid {
|
||||||
|
position: relative;
|
||||||
|
padding: 0 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Positioning //
|
||||||
|
//
|
||||||
|
.position-middle {
|
||||||
|
position: relative;
|
||||||
|
top: 50%;
|
||||||
|
@include transform(translateY(-50%));
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
.position-top, .position-bottom {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.position-top {
|
||||||
|
top: 30px;
|
||||||
|
}
|
||||||
|
.position-bottom {
|
||||||
|
bottom: 30px;
|
||||||
|
}
|
||||||
|
.container, .container-fluid {
|
||||||
|
.position-top, .position-bottom {
|
||||||
|
padding: 0 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Mark //
|
||||||
|
//
|
||||||
|
mark {
|
||||||
|
background: $bg-gray;
|
||||||
|
color: get-color("dark");
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// iframe //
|
||||||
|
//
|
||||||
|
iframe {
|
||||||
|
width: 100%;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Pre(Preformatted text) //
|
||||||
|
//
|
||||||
|
pre {
|
||||||
|
border: 1px solid get-color("dark", 0.1);
|
||||||
|
border-radius: 0.375em;
|
||||||
|
padding: 6px 20px;
|
||||||
|
color: $color-primary;
|
||||||
|
}
|
||||||
|
.bg-black,
|
||||||
|
[class*='bg-dark'],
|
||||||
|
[class*='bg-gradient-'],
|
||||||
|
[class*='bg-color-'] {
|
||||||
|
pre {
|
||||||
|
border-color: get-color("white", 0.2);
|
||||||
|
color: get-color("white", 0.6);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Blockquote Styles //
|
||||||
|
//
|
||||||
|
.blockquote {
|
||||||
|
background: transparent;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
border-left: 4px solid get-color("dark", 0.1);
|
||||||
|
padding: 16px 30px;
|
||||||
|
@include breakpoint-less(sm) {
|
||||||
|
padding: 16px 20px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 30px;
|
||||||
|
&.font-small {
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 26px;
|
||||||
|
}
|
||||||
|
&.font-large {
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 36px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.blockquote-footer {
|
||||||
|
margin-top: 10px;
|
||||||
|
color: get-color("dark");
|
||||||
|
&:before {
|
||||||
|
padding-right: 5px;
|
||||||
|
}
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.style-2 {
|
||||||
|
position: relative;
|
||||||
|
border: 0;
|
||||||
|
padding: 20px 20px 20px 40px;
|
||||||
|
@include breakpoint-less(sm) {
|
||||||
|
padding: 16px 16px 16px 36px;
|
||||||
|
}
|
||||||
|
&:before {
|
||||||
|
content: '\f10d';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
color: get-color("dark", 0.1);
|
||||||
|
font-family: "Font Awesome 6 Free";
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 900;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bg-black,
|
||||||
|
[class*='bg-dark'],
|
||||||
|
[class*='bg-gradient-'],
|
||||||
|
[class*='bg-color-'] {
|
||||||
|
.blockquote {
|
||||||
|
background: get-color("white", 0.1);
|
||||||
|
border-color: get-color("white", 0.2);
|
||||||
|
.blockquote-footer {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
&.style-2 {
|
||||||
|
background: transparent;
|
||||||
|
border-color: get-color("white", 0.2);
|
||||||
|
}
|
||||||
|
&.style-3 {
|
||||||
|
background: transparent;
|
||||||
|
&:before {
|
||||||
|
color: get-color("white", 0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Breadcrumb Styles //
|
||||||
|
//
|
||||||
|
.breadcrumb {
|
||||||
|
display: inline-block;
|
||||||
|
background: transparent;
|
||||||
|
margin: 0 0 -10px;
|
||||||
|
padding: 0;
|
||||||
|
.breadcrumb-item {
|
||||||
|
display: inline-block;
|
||||||
|
font: 400 13px $font-family-primary;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
&:before {
|
||||||
|
color: get-color("dark", 0.2);
|
||||||
|
}
|
||||||
|
&.active {
|
||||||
|
color: $color-primary-lighter;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
@include transition(linear 0.1s);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bg-black,
|
||||||
|
[class*='bg-dark'],
|
||||||
|
[class*='bg-gradient-'],
|
||||||
|
[class*='bg-color-'] {
|
||||||
|
.breadcrumb {
|
||||||
|
.breadcrumb-item {
|
||||||
|
&:before {
|
||||||
|
color: get-color("white", 0.3);
|
||||||
|
}
|
||||||
|
&.active {
|
||||||
|
color: get-color("white", 0.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Card //
|
||||||
|
//
|
||||||
|
.card {
|
||||||
|
border: 1px solid get-color("dark", 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Dropdown Styles //
|
||||||
|
//
|
||||||
|
.dropdown, .btn-group {
|
||||||
|
.dropdown-menu {
|
||||||
|
border: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
@include box-shadow(0 6px 36px -4px rgba(22,24,26,0.14));
|
||||||
|
padding: 15px 20px;
|
||||||
|
.dropdown-item {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
padding: 0;
|
||||||
|
color: get-color("dark");
|
||||||
|
font: 300 15px $font-family-primary;
|
||||||
|
letter-spacing: 0;
|
||||||
|
text-transform: none;
|
||||||
|
@include transition(linear 0.1s);
|
||||||
|
&:last-child {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
&:hover, &:focus, &:active {
|
||||||
|
background: transparent;
|
||||||
|
color: $color-primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Modal Styles //
|
||||||
|
//
|
||||||
|
.modal {
|
||||||
|
&.fade {
|
||||||
|
.modal-dialog {
|
||||||
|
@include transition(ease-out 0.2s);
|
||||||
|
@include transform(translate(0) scale(0.98));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.show {
|
||||||
|
.modal-dialog {
|
||||||
|
@include transform(translate(0) scale(1.0));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.modal-content {
|
||||||
|
@include box-shadow(0 6px 36px -4px rgba(22,24,26,0.3));
|
||||||
|
border: 0;
|
||||||
|
.modal-header { border-bottom: 1px solid get-color("dark", 0.1); }
|
||||||
|
.modal-footer { border-top: 1px solid get-color("dark", 0.1); }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Nav Styles //
|
||||||
|
//
|
||||||
|
.nav {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
.nav-item {
|
||||||
|
margin: 0 30px 0 0;
|
||||||
|
&:last-child {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
.nav-link {
|
||||||
|
padding: 0;
|
||||||
|
color: $color-primary;
|
||||||
|
@include transition(linear 0.1s);
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
margin: 0;
|
||||||
|
color: $color-primary;
|
||||||
|
@include transition(linear 0.1s);
|
||||||
|
}
|
||||||
|
&.active, &:hover {
|
||||||
|
color: get-color("dark");
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
color: get-color("dark");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.disabled {
|
||||||
|
color: $color-primary-lighter;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.nav-tabs {
|
||||||
|
border-bottom: 1px solid $border-gray;
|
||||||
|
.nav-item {
|
||||||
|
margin: 0 0 -1px;
|
||||||
|
.nav-link {
|
||||||
|
background: transparent;
|
||||||
|
padding: 10px 20px;
|
||||||
|
color: $color-primary;
|
||||||
|
&:hover {
|
||||||
|
border-color: $border-gray;
|
||||||
|
}
|
||||||
|
&.active {
|
||||||
|
border-color: $border-gray $border-gray white;
|
||||||
|
color: get-color("dark");
|
||||||
|
}
|
||||||
|
&.disabled {
|
||||||
|
&:hover {
|
||||||
|
border-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.nav-pills {
|
||||||
|
.nav-item {
|
||||||
|
margin: 0;
|
||||||
|
.nav-link {
|
||||||
|
padding: 10px 20px;
|
||||||
|
}
|
||||||
|
.nav-link.active,
|
||||||
|
.show .nav-link {
|
||||||
|
background: get-color("dark");
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.tabs {
|
||||||
|
display: inline-block;
|
||||||
|
border: 1px solid $border-gray;
|
||||||
|
border-radius: 0.375em;
|
||||||
|
.nav-item {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0;
|
||||||
|
.nav-link {
|
||||||
|
padding: 10px 20px;
|
||||||
|
border-right: 1px solid $border-gray;
|
||||||
|
}
|
||||||
|
&:last-child {
|
||||||
|
.nav-link {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.nav-custom {
|
||||||
|
.nav-item {
|
||||||
|
.nav-link {
|
||||||
|
position: relative;
|
||||||
|
overflow: visible;
|
||||||
|
&:after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
bottom: -1px;
|
||||||
|
left: 0;
|
||||||
|
background: get-color("dark");
|
||||||
|
height: 1px;
|
||||||
|
@include animation(button-line-out 0.24s cubic-bezier(0.165, 0.84, 0.44, 1) both);
|
||||||
|
}
|
||||||
|
&.active {
|
||||||
|
&:after {
|
||||||
|
width: 100%;
|
||||||
|
@include animation(button-line-in 0.24s cubic-bezier(0.165, 0.84, 0.44, 1) both);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bg-black,
|
||||||
|
[class*='bg-dark'],
|
||||||
|
[class*='bg-gradient-'],
|
||||||
|
[class*='bg-color-'] {
|
||||||
|
.nav {
|
||||||
|
.nav-item {
|
||||||
|
.nav-link {
|
||||||
|
color: get-color("white", 0.8);
|
||||||
|
&.active, &:hover {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.nav-tabs {
|
||||||
|
border-color: get-color("white", 0.2);
|
||||||
|
.nav-item {
|
||||||
|
.nav-link {
|
||||||
|
color: get-color("white", 0.8);
|
||||||
|
&.active, &:hover {
|
||||||
|
border-color: get-color("white", 0.2) get-color("white", 0.2) transparent;
|
||||||
|
}
|
||||||
|
&.active {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.nav-pills {
|
||||||
|
.nav-item {
|
||||||
|
.nav-link.active,
|
||||||
|
.show .nav-link {
|
||||||
|
background: white;
|
||||||
|
color: get-color("dark");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.tabs {
|
||||||
|
border: 1px solid get-color("white", 0.2);
|
||||||
|
.nav-item {
|
||||||
|
.nav-link {
|
||||||
|
border-right: 1px solid get-color("white", 0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.nav-custom {
|
||||||
|
.nav-item {
|
||||||
|
.nav-link {
|
||||||
|
&:after { background: white; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Pagination Styles //
|
||||||
|
//
|
||||||
|
.pagination {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
.page-item {
|
||||||
|
margin: 0 6px 0 0;
|
||||||
|
text-align: center;
|
||||||
|
&:last-child {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
.page-link {
|
||||||
|
background: transparent;
|
||||||
|
min-width: 31px;
|
||||||
|
height: 31px;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 0;
|
||||||
|
color: $color-primary;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 31px;
|
||||||
|
@include transition(ease-out 0.12s);
|
||||||
|
&:hover {
|
||||||
|
background: $button-gray;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.active {
|
||||||
|
.page-link {
|
||||||
|
background: $button-gray;
|
||||||
|
color: get-color("dark");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.pagination-sm {
|
||||||
|
.page-item {
|
||||||
|
.page-link {
|
||||||
|
min-width: 27px;
|
||||||
|
height: 27px;
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 0;
|
||||||
|
line-height: 27px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.pagination-lg {
|
||||||
|
.page-item {
|
||||||
|
.page-link {
|
||||||
|
min-width: 35px;
|
||||||
|
height: 35px;
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 0;
|
||||||
|
line-height: 35px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//
|
||||||
|
// Pagination - Hover style 2 //
|
||||||
|
//
|
||||||
|
&.hover-style-2 {
|
||||||
|
.page-item {
|
||||||
|
.page-link {
|
||||||
|
&:hover {
|
||||||
|
background: $border-gray;
|
||||||
|
border-color: $border-gray;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.active {
|
||||||
|
.page-link {
|
||||||
|
background: get-color("dark");
|
||||||
|
border-color: get-color("dark");
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bg-black,
|
||||||
|
[class*='bg-dark'],
|
||||||
|
[class*='bg-gradient-'],
|
||||||
|
[class*='bg-color-'] {
|
||||||
|
.pagination {
|
||||||
|
.page-item {
|
||||||
|
.page-link {
|
||||||
|
color: get-color("white", 0.7);
|
||||||
|
&:hover {
|
||||||
|
background: get-color("white", 0.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.active {
|
||||||
|
.page-link {
|
||||||
|
background: get-color("white", 0.1);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.hover-style-2 {
|
||||||
|
.page-item {
|
||||||
|
.page-link {
|
||||||
|
&:hover {
|
||||||
|
background: white;
|
||||||
|
border-color: white;
|
||||||
|
color: get-color("dark", 0.9);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.active {
|
||||||
|
.page-link {
|
||||||
|
background: white;
|
||||||
|
border-color: white;
|
||||||
|
color: get-color("dark", 0.9);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Popover Styles //
|
||||||
|
//
|
||||||
|
.popover {
|
||||||
|
border: 0;
|
||||||
|
@include box-shadow(0 0 12px 0 rgba(0,0,0,0.08));
|
||||||
|
.arrow {
|
||||||
|
&:before { border: 0; }
|
||||||
|
}
|
||||||
|
.popover-header {
|
||||||
|
background: transparent;
|
||||||
|
padding: 15px 20px;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 32px;
|
||||||
|
}
|
||||||
|
.popover-body {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Table Styles //
|
||||||
|
//
|
||||||
|
.table {
|
||||||
|
td, th { border-top: 1px solid $border-gray; }
|
||||||
|
thead {
|
||||||
|
th { border-bottom: 2px solid $border-gray; }
|
||||||
|
}
|
||||||
|
|
||||||
|
&.table-dark {
|
||||||
|
background: $bg-dark-lighter;
|
||||||
|
thead {
|
||||||
|
th { border-bottom: 2px solid get-color("white", 0.1); }
|
||||||
|
}
|
||||||
|
td, th { border-top: 1px solid get-color("white", 0.1); }
|
||||||
|
}
|
||||||
|
&.table-bordered {
|
||||||
|
td, th { border: 1px solid $border-gray; }
|
||||||
|
&.table-dark {
|
||||||
|
td, th { border: 1px solid get-color("white", 0.1); }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.thead-dark {
|
||||||
|
th { background: $bg-dark-lighter; border-color: get-color("white", 0.1); }
|
||||||
|
}
|
||||||
|
.thead-light {
|
||||||
|
th { background: $button-gray-lighter; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-active {
|
||||||
|
td, th { background: $button-gray-darker; }
|
||||||
|
}
|
||||||
|
.table-secondary {
|
||||||
|
td, th { background: $button-gray; }
|
||||||
|
}
|
||||||
|
.table-light {
|
||||||
|
td, th { background: $bg-gray-lighter; }
|
||||||
|
}
|
||||||
|
.table-dark {
|
||||||
|
td, th { background: $button-gray; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Scroll To Top button //
|
||||||
|
//
|
||||||
|
.scrolltotop {
|
||||||
|
position: fixed;
|
||||||
|
right: 20px;
|
||||||
|
bottom: 20px;
|
||||||
|
@include transform(translateY(20px));
|
||||||
|
z-index: 992;
|
||||||
|
visibility: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
@include transition(ease-out 0.12s);
|
||||||
|
&.scrolltotop-show {
|
||||||
|
@include transform(translateY(0));
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Cursor //
|
||||||
|
//
|
||||||
|
@include breakpoint-above(lg) {
|
||||||
|
#cursor {
|
||||||
|
z-index: 999;
|
||||||
|
position: absolute;
|
||||||
|
@include transform(translate(-50%, -50%));
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
border: 1px solid white;
|
||||||
|
border-radius: 50%;
|
||||||
|
mix-blend-mode: difference;
|
||||||
|
pointer-events: none;
|
||||||
|
@include transition(linear 0.06s);
|
||||||
|
&.scale-cursor {
|
||||||
|
@include transform(translate(-50%, -50%) scale(2.4));
|
||||||
|
opacity: 0.12;
|
||||||
|
}
|
||||||
|
&.cursor-style-2 {
|
||||||
|
opacity: 0.2;
|
||||||
|
background: white;
|
||||||
|
border: 0;
|
||||||
|
&.scale-cursor {
|
||||||
|
opacity: 0.08;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
215
assets/css/scss/basic/_form.scss
Normal file
215
assets/css/scss/basic/_form.scss
Normal file
@@ -0,0 +1,215 @@
|
|||||||
|
//
|
||||||
|
// Form Styles //
|
||||||
|
//
|
||||||
|
input:not(.form-check-input),
|
||||||
|
textarea {
|
||||||
|
background: transparent;
|
||||||
|
width: 100%;
|
||||||
|
border: 1px solid get-color("dark", 0.1);
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
padding: 15px 20px;
|
||||||
|
box-shadow: none;
|
||||||
|
font: 400 15px $font-family-primary;
|
||||||
|
line-height: 1.4;
|
||||||
|
@include transition(ease-out 0.16s);
|
||||||
|
&:focus, &:active {
|
||||||
|
outline: 0;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
textarea {
|
||||||
|
height: 140px;
|
||||||
|
}
|
||||||
|
input:not(.form-check-input), textarea, .form-control {
|
||||||
|
color: $color-primary;
|
||||||
|
&::-webkit-input-placeholder { color: $color-primary-lighter; }
|
||||||
|
&::-moz-placeholder { color: $color-primary-lighter; }
|
||||||
|
&:-ms-placeholder { color: $color-primary-lighter; }
|
||||||
|
&::-ms-placeholder { color: $color-primary-lighter; }
|
||||||
|
&::placeholder { color: $color-primary-lighter; }
|
||||||
|
&:focus {
|
||||||
|
border-color: get-color("dark", 0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.form-control {
|
||||||
|
background: transparent;
|
||||||
|
height: auto;
|
||||||
|
border: 1px solid get-color("dark", 0.1);
|
||||||
|
border-radius: 0;
|
||||||
|
padding: 15px 20px;
|
||||||
|
font: 400 15px $font-family-primary;
|
||||||
|
line-height: 1.4;
|
||||||
|
&:focus {
|
||||||
|
background: transparent;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
&:read-only {
|
||||||
|
background: $button-gray;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
&.form-control-sm {
|
||||||
|
padding: 10px 15px;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
&.form-control-lg {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.form-control-plaintext {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
.form-check-input:disabled ~ .form-check-label {
|
||||||
|
color: $color-primary-lighter;
|
||||||
|
}
|
||||||
|
.required {
|
||||||
|
&:after {
|
||||||
|
content: '*';
|
||||||
|
padding-left: 3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Select //
|
||||||
|
//
|
||||||
|
select {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
.custom-select {
|
||||||
|
background-color: transparent;
|
||||||
|
width: auto;
|
||||||
|
min-width: 160px;
|
||||||
|
height: auto;
|
||||||
|
border-radius: 0;
|
||||||
|
padding: 15px 20px;
|
||||||
|
border-color: get-color("dark", 0.1);
|
||||||
|
color: $color-primary;
|
||||||
|
font: 400 15px $font-family-primary;
|
||||||
|
line-height: 1.4;
|
||||||
|
@include transition(ease-out 0.16s);
|
||||||
|
&:focus {
|
||||||
|
border-color: get-color("dark", 0.2);
|
||||||
|
outline: 0;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
&.custom-select-sm {
|
||||||
|
height: auto;
|
||||||
|
padding: 10px 15px;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
&.custom-select-lg {
|
||||||
|
height: auto;
|
||||||
|
padding: 15px 20px;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
&.select-fullwidth {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//
|
||||||
|
// Form Styles 2,3,4 //
|
||||||
|
//
|
||||||
|
.form-style-3,
|
||||||
|
.form-style-4 {
|
||||||
|
input, textarea, .custom-select, .form-control {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding: 0 0 10px;
|
||||||
|
border-top-width: 0;
|
||||||
|
border-right-width: 0;
|
||||||
|
border-bottom-width: 1px;
|
||||||
|
border-left-width: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.form-style-2,
|
||||||
|
.form-style-4 {
|
||||||
|
input, textarea, .custom-select, .form-control {
|
||||||
|
&:focus {
|
||||||
|
border-color: get-color("dark", 0.9);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Form Style 5 //
|
||||||
|
//
|
||||||
|
.form-style-5 {
|
||||||
|
input, textarea, .custom-select, .form-control {
|
||||||
|
background: $bg-gray;
|
||||||
|
border: 0;
|
||||||
|
&:focus {
|
||||||
|
background: $button-gray-lighter;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
[class*='bg-gray'] {
|
||||||
|
.form-style-5 {
|
||||||
|
input, textarea, .custom-select, .form-control {
|
||||||
|
background: white;
|
||||||
|
&:focus {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Forms on Dark background //
|
||||||
|
//
|
||||||
|
.bg-black,
|
||||||
|
[class*='bg-dark'],
|
||||||
|
[class*='bg-gradient-'],
|
||||||
|
[class*='bg-color-'] {
|
||||||
|
input, textarea, .form-control {
|
||||||
|
background: transparent;
|
||||||
|
border-color: get-color("white", 0.2);
|
||||||
|
color: get-color("white", 0.7);
|
||||||
|
&::-webkit-input-placeholder { color: get-color("white", 0.5); }
|
||||||
|
&::-moz-placeholder { color: get-color("white", 0.5); }
|
||||||
|
&:-ms-placeholder { color: get-color("white", 0.5); }
|
||||||
|
&::-ms-placeholder { color: get-color("white", 0.5); }
|
||||||
|
&::placeholder { color: get-color("white", 0.5); }
|
||||||
|
&:focus {
|
||||||
|
border-color: get-color("white", 0.3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.custom-select {
|
||||||
|
background: transparent;
|
||||||
|
border-color: get-color("white", 0.2);
|
||||||
|
color: get-color("white", 0.7);
|
||||||
|
&:focus {
|
||||||
|
border-color: get-color("white", 0.3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.form-style-2,
|
||||||
|
.form-style-4 {
|
||||||
|
input, textarea, .custom-select, .form-control {
|
||||||
|
&:focus {
|
||||||
|
border-color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.form-style-5 {
|
||||||
|
input, textarea, .custom-select, .form-control {
|
||||||
|
background: get-color("white", 0.1);
|
||||||
|
border: 0;
|
||||||
|
&:focus {
|
||||||
|
background: get-color("white", 0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Contact Form Styles //
|
||||||
|
//
|
||||||
|
.submit-result {
|
||||||
|
span {
|
||||||
|
display: none;
|
||||||
|
@include transition(ease-out 0.2s);
|
||||||
|
&.show-result {
|
||||||
|
margin-top: 30px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
&#success { color: $color-green; }
|
||||||
|
&#error { color: $color-red; }
|
||||||
|
}
|
||||||
|
}
|
||||||
125
assets/css/scss/basic/_image.scss
Normal file
125
assets/css/scss/basic/_image.scss
Normal file
@@ -0,0 +1,125 @@
|
|||||||
|
//
|
||||||
|
// Image Styles //
|
||||||
|
//
|
||||||
|
img {
|
||||||
|
width: auto;
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
//
|
||||||
|
// Avatar mask //
|
||||||
|
//
|
||||||
|
&[class*='img-mask-avatar'] {
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
&.img-mask-avatar-xs {
|
||||||
|
min-width: 60px;
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
&.img-mask-avatar-sm {
|
||||||
|
min-width: 80px;
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
}
|
||||||
|
&.img-mask-avatar-md {
|
||||||
|
min-width: 100px;
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
&.img-mask-avatar-lg {
|
||||||
|
min-width: 120px;
|
||||||
|
width: 120px;
|
||||||
|
height: 120px;
|
||||||
|
}
|
||||||
|
&.img-mask-avatar-xl {
|
||||||
|
min-width: 140px;
|
||||||
|
width: 140px;
|
||||||
|
height: 140px;
|
||||||
|
}
|
||||||
|
&.img-mask-avatar-2xl {
|
||||||
|
min-width: 160px;
|
||||||
|
width: 160px;
|
||||||
|
height: 160px;
|
||||||
|
}
|
||||||
|
&.img-mask-avatar-3xl {
|
||||||
|
min-width: 180px;
|
||||||
|
width: 180px;
|
||||||
|
height: 180px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Blob Shape Mask //
|
||||||
|
//
|
||||||
|
[class*='img-mask-blob'] {
|
||||||
|
display: inline-block;
|
||||||
|
-webkit-mask-repeat: no-repeat;
|
||||||
|
mask-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
.img-mask-blob-1 {
|
||||||
|
-webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNODguNSw2My41UTg3LDc3LDc2LDg2LjVRNjUsOTYsNTEsOTIuNVEzNyw4OSwyNyw4MS41UTE3LDc0LDEyLDYyUTcsNTAsMTEuNSwzOFExNiwyNiwyNS41LDE0LjVRMzUsMyw0OSw2LjVRNjMsMTAsNzUuNSwxNlE4OCwyMiw4OSwzNlE5MCw1MCw4OC41LDYzLjVaIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMCIgZmlsbD0iIzAwMDAwMCIvPjwvc3ZnPg==);
|
||||||
|
mask-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNODguNSw2My41UTg3LDc3LDc2LDg2LjVRNjUsOTYsNTEsOTIuNVEzNyw4OSwyNyw4MS41UTE3LDc0LDEyLDYyUTcsNTAsMTEuNSwzOFExNiwyNiwyNS41LDE0LjVRMzUsMyw0OSw2LjVRNjMsMTAsNzUuNSwxNlE4OCwyMiw4OSwzNlE5MCw1MCw4OC41LDYzLjVaIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMCIgZmlsbD0iIzAwMDAwMCIvPjwvc3ZnPg==);
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-mask-blob-2 {
|
||||||
|
-webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOTEsNjZRODgsODIsNzMsODkuNVE1OCw5Nyw0My41LDkxLjVRMjksODYsMTgsNzZRNyw2Niw3LDUwUTcsMzQsMTgsMjMuNVEyOSwxMyw0My41LDlRNTgsNSw3MC41LDEzLjVRODMsMjIsODguNSwzNlE5NCw1MCw5MSw2NloiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIwIiBmaWxsPSIjMDAwMDAwIi8+PC9zdmc+);
|
||||||
|
mask-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOTEsNjZRODgsODIsNzMsODkuNVE1OCw5Nyw0My41LDkxLjVRMjksODYsMTgsNzZRNyw2Niw3LDUwUTcsMzQsMTgsMjMuNVEyOSwxMyw0My41LDlRNTgsNSw3MC41LDEzLjVRODMsMjIsODguNSwzNlE5NCw1MCw5MSw2NloiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIwIiBmaWxsPSIjMDAwMDAwIi8+PC9zdmc+);
|
||||||
|
}
|
||||||
|
.img-mask-blob-3 {
|
||||||
|
-webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOTEsNjRRODgsNzgsNzUuNSw4NC41UTYzLDkxLDUwLDkxLjVRMzcsOTIsMjYsODMuNVExNSw3NSwxMS41LDYyLjVROCw1MCw5LDM1LjVRMTAsMjEsMjMuNSwxNlEzNywxMSw1MSw3UTY1LDMsNzcsMTIuNVE4OSwyMiw5MS41LDM2UTk0LDUwLDkxLDY0WiIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjAiIGZpbGw9IiMwMDAwMDAiLz48L3N2Zz4=);
|
||||||
|
mask-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOTEsNjRRODgsNzgsNzUuNSw4NC41UTYzLDkxLDUwLDkxLjVRMzcsOTIsMjYsODMuNVExNSw3NSwxMS41LDYyLjVROCw1MCw5LDM1LjVRMTAsMjEsMjMuNSwxNlEzNywxMSw1MSw3UTY1LDMsNzcsMTIuNVE4OSwyMiw5MS41LDM2UTk0LDUwLDkxLDY0WiIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjAiIGZpbGw9IiMwMDAwMDAiLz48L3N2Zz4=);
|
||||||
|
}
|
||||||
|
.img-mask-blob-4 {
|
||||||
|
-webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNODkuNSw2M1E4MSw3Niw2OS41LDg2UTU4LDk2LDQ0LDkwLjVRMzAsODUsMTYuNSw3NlEzLDY3LDUuNSw1MVE4LDM1LDE3LDIyUTI2LDksNDEuNSw4LjVRNTcsOCw3MSwxNC41UTg1LDIxLDkxLjUsMzUuNVE5OCw1MCw4OS41LDYzWiIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjAiIGZpbGw9IiMwMDAwMDAiLz48L3N2Zz4=);
|
||||||
|
mask-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNODkuNSw2M1E4MSw3Niw2OS41LDg2UTU4LDk2LDQ0LDkwLjVRMzAsODUsMTYuNSw3NlEzLDY3LDUuNSw1MVE4LDM1LDE3LDIyUTI2LDksNDEuNSw4LjVRNTcsOCw3MSwxNC41UTg1LDIxLDkxLjUsMzUuNVE5OCw1MCw4OS41LDYzWiIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjAiIGZpbGw9IiMwMDAwMDAiLz48L3N2Zz4=);
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Image Link box //
|
||||||
|
//
|
||||||
|
.img-link-box {
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
@include transform(translate3d(0,0,0));
|
||||||
|
a {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
@include transition(transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1));
|
||||||
|
}
|
||||||
|
&:hover, &:focus {
|
||||||
|
img {
|
||||||
|
@include transform(scale(1.04));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Avatars Group //
|
||||||
|
//
|
||||||
|
.avatar-group {
|
||||||
|
display: block;
|
||||||
|
padding: 0;
|
||||||
|
li {
|
||||||
|
list-style-type: none;
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: -12px;
|
||||||
|
padding: 0;
|
||||||
|
&:first-child {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
border-radius: 50%;
|
||||||
|
@include box-shadow(0 3px 16px 0 rgba(0,0,0,0.13));
|
||||||
|
border: 3px solid white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.aspect-ratio-2x1 {
|
||||||
|
width: 100%;
|
||||||
|
aspect-ratio: 1/0.5;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
263
assets/css/scss/basic/_list.scss
Normal file
263
assets/css/scss/basic/_list.scss
Normal file
@@ -0,0 +1,263 @@
|
|||||||
|
//
|
||||||
|
// List styles //
|
||||||
|
//
|
||||||
|
ul {
|
||||||
|
margin: 0 0 -7px;
|
||||||
|
li {
|
||||||
|
margin: 0 0 7px;
|
||||||
|
ul, ol {
|
||||||
|
margin-top: 7px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&[class*='list-'] {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
&.list-unstyled,
|
||||||
|
&.list-dash {
|
||||||
|
li {
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.animate-links {
|
||||||
|
li {
|
||||||
|
a {
|
||||||
|
&:hover {
|
||||||
|
padding-left: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.list-dash {
|
||||||
|
li {
|
||||||
|
&:before {
|
||||||
|
content: '-';
|
||||||
|
padding-right: 7px;
|
||||||
|
}
|
||||||
|
ul, ol {
|
||||||
|
padding-left: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//
|
||||||
|
// Horizontal List //
|
||||||
|
//
|
||||||
|
&[class*='list-inline'] {
|
||||||
|
li {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.list-inline {
|
||||||
|
margin-right: -7px;
|
||||||
|
margin-left: -7px;
|
||||||
|
li {
|
||||||
|
padding: 0 7px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.list-inline-sm {
|
||||||
|
margin-right: -3px;
|
||||||
|
margin-left: -3px;
|
||||||
|
li {
|
||||||
|
padding: 0 3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.list-inline-lg {
|
||||||
|
margin-right: -14px;
|
||||||
|
margin-left: -14px;
|
||||||
|
li {
|
||||||
|
padding: 0 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.list-inline-dash {
|
||||||
|
li { &:after { content: '-'; } }
|
||||||
|
}
|
||||||
|
&.list-inline-slash {
|
||||||
|
li { &:after { content: '/'; } }
|
||||||
|
}
|
||||||
|
&.list-inline-dash,
|
||||||
|
&.list-inline-slash {
|
||||||
|
li {
|
||||||
|
&:after {
|
||||||
|
padding: 0 3px 0 6px;
|
||||||
|
}
|
||||||
|
&:last-child {
|
||||||
|
&:after {
|
||||||
|
content: '';
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ol {
|
||||||
|
margin: 0 0 -7px;
|
||||||
|
li {
|
||||||
|
margin: 0 0 7px;
|
||||||
|
}
|
||||||
|
li {
|
||||||
|
ul, ol {
|
||||||
|
margin-top: 7px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.list-ordered {
|
||||||
|
list-style: none;
|
||||||
|
counter-reset: custom-counter;
|
||||||
|
padding-left: 0;
|
||||||
|
li {
|
||||||
|
position: relative;
|
||||||
|
padding-left: 34px;
|
||||||
|
counter-increment: custom-counter;
|
||||||
|
&::before {
|
||||||
|
content: counter(custom-counter);
|
||||||
|
}
|
||||||
|
ol {
|
||||||
|
list-style: none;
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.style-2,
|
||||||
|
&.style-3,
|
||||||
|
&.style-4,
|
||||||
|
&.style-5 {
|
||||||
|
li {
|
||||||
|
&::before {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
border-radius: 50%;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 24px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.style-2 {
|
||||||
|
li {
|
||||||
|
&::before {
|
||||||
|
background: get-color("dark", 0.1);
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.style-3 {
|
||||||
|
li {
|
||||||
|
&::before {
|
||||||
|
background: get-color("dark", 0.9);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.style-4 {
|
||||||
|
li {
|
||||||
|
&::before {
|
||||||
|
border: 1px solid get-color("dark", 0.2);
|
||||||
|
color: get-color("dark", 0.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.style-5 {
|
||||||
|
li {
|
||||||
|
&::before {
|
||||||
|
border: 1px solid get-color("dark", 0.9);
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bg-black,
|
||||||
|
[class*='bg-dark'],
|
||||||
|
[class*='bg-gradient-'],
|
||||||
|
[class*='bg-color-'] {
|
||||||
|
ol {
|
||||||
|
&.list-ordered {
|
||||||
|
&.style-2 {
|
||||||
|
li {
|
||||||
|
&::before {
|
||||||
|
background: get-color("white", 0.2);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.style-3 {
|
||||||
|
li {
|
||||||
|
&::before {
|
||||||
|
background: white;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.style-4 {
|
||||||
|
li {
|
||||||
|
&::before {
|
||||||
|
border-color: get-color("white", 0.3);
|
||||||
|
color: get-color("white", 0.6);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.style-5 {
|
||||||
|
li {
|
||||||
|
&::before {
|
||||||
|
border-color: white;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@include breakpoint-less(md) {
|
||||||
|
ol {
|
||||||
|
margin: 0 0 -5px;
|
||||||
|
li {
|
||||||
|
margin: 0 0 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
margin: 0 0 -5px;
|
||||||
|
li {
|
||||||
|
margin: 0 0 5px;
|
||||||
|
ul, ol {
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.list-dash {
|
||||||
|
li {
|
||||||
|
&:before {
|
||||||
|
content: '-';
|
||||||
|
padding-right: 6px;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
&:hover {
|
||||||
|
padding-left: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ul, ol {
|
||||||
|
padding-left: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.list-inline-lg {
|
||||||
|
margin-right: -12px;
|
||||||
|
margin-left: -12px;
|
||||||
|
li {
|
||||||
|
padding: 0 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.list-inline {
|
||||||
|
margin-right: -6px;
|
||||||
|
margin-left: -6px;
|
||||||
|
li {
|
||||||
|
padding: 0 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.list-inline-sm {
|
||||||
|
margin-right: -2px;
|
||||||
|
margin-left: -2px;
|
||||||
|
li {
|
||||||
|
padding: 0 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
112
assets/css/scss/basic/_typography.scss
Normal file
112
assets/css/scss/basic/_typography.scss
Normal file
@@ -0,0 +1,112 @@
|
|||||||
|
//
|
||||||
|
// Typography Styles //
|
||||||
|
//
|
||||||
|
body {
|
||||||
|
color: $color-primary;
|
||||||
|
font-family: $font-family-primary;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: 0;
|
||||||
|
@include breakpoint-less(md) {
|
||||||
|
font-size: 0.938rem;
|
||||||
|
}
|
||||||
|
&.theme-font-nunito {
|
||||||
|
font-family: $font-family-nunito;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
h1,h2,h3,h4,h5,h6 {
|
||||||
|
letter-spacing: -0.3px;
|
||||||
|
line-height: 1.4;
|
||||||
|
color: get-color("dark");
|
||||||
|
font-family: $font-family-poppins;
|
||||||
|
font-weight: $font-weight-semi-bold;
|
||||||
|
margin-top: 1rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
.theme-font-nunito {
|
||||||
|
h1,h2,h3,h4,h5,h6 {
|
||||||
|
font-family: $font-family-nunito;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
line-height: 1.74; /* 26px */
|
||||||
|
color: #000;
|
||||||
|
@include breakpoint-less(md) {
|
||||||
|
line-height: 1.6; /* 24px */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.uppercase {
|
||||||
|
letter-spacing: 0.8px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.font-small {
|
||||||
|
font-size: 0.9em;
|
||||||
|
line-height: 1.7;
|
||||||
|
@include breakpoint-less(md) {
|
||||||
|
font-size: 0.9em;
|
||||||
|
line-height: 1.7;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.font-large {
|
||||||
|
font-size: 1.063em;
|
||||||
|
line-height: 1.6;
|
||||||
|
@include breakpoint-less(md) {
|
||||||
|
font-size: 1.063em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Letter Spacing //
|
||||||
|
//
|
||||||
|
.letter-spacing-1 { letter-spacing: 1px; }
|
||||||
|
.letter-spacing-2 { letter-spacing: 2px; }
|
||||||
|
.letter-spacing-3 { letter-spacing: 3px; }
|
||||||
|
.letter-spacing-4 { letter-spacing: 4px; }
|
||||||
|
|
||||||
|
//
|
||||||
|
// Line Heights //
|
||||||
|
//
|
||||||
|
.line-height-100 { line-height: 100%; }
|
||||||
|
.line-height-110 { line-height: 110%; }
|
||||||
|
.line-height-120 { line-height: 120%; }
|
||||||
|
.line-height-130 { line-height: 130%; }
|
||||||
|
.line-height-140 { line-height: 140%; }
|
||||||
|
.line-height-150 { line-height: 150%; }
|
||||||
|
.line-height-160 { line-height: 160%; }
|
||||||
|
|
||||||
|
//
|
||||||
|
// Font Icon Styles //
|
||||||
|
//
|
||||||
|
i {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Icon sizes //
|
||||||
|
//
|
||||||
|
.icon-5xl {
|
||||||
|
i { font-size: 2.8em; }
|
||||||
|
}
|
||||||
|
.icon-4xl {
|
||||||
|
i { font-size: 2.4em; }
|
||||||
|
}
|
||||||
|
.icon-3xl {
|
||||||
|
i { font-size: 2.13em; }
|
||||||
|
}
|
||||||
|
.icon-2xl {
|
||||||
|
i { font-size: 1.86em; }
|
||||||
|
}
|
||||||
|
.icon-xl {
|
||||||
|
i { font-size: 1.6em; }
|
||||||
|
}
|
||||||
|
.icon-lg {
|
||||||
|
i { font-size: 1.33em; }
|
||||||
|
}
|
||||||
|
.icon-sm {
|
||||||
|
i { font-size: 0.9em; }
|
||||||
|
}
|
||||||
|
|
||||||
107
assets/css/scss/components/_blog.scss
Normal file
107
assets/css/scss/components/_blog.scss
Normal file
@@ -0,0 +1,107 @@
|
|||||||
|
//
|
||||||
|
// Blog Styles //
|
||||||
|
//
|
||||||
|
.blog-card-wrapper {
|
||||||
|
position: relative;
|
||||||
|
background-position: center center;
|
||||||
|
background-attachment: scroll;
|
||||||
|
@include background-size(cover);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
width: 100%;
|
||||||
|
* {
|
||||||
|
@include transition(ease-out 0.12s);
|
||||||
|
}
|
||||||
|
.blog-card {
|
||||||
|
background: white;
|
||||||
|
border: 1px solid get-color("dark", 0.1);
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
color: get-color("white", 0.7);
|
||||||
|
h1,h2,h3,h4,h5,h6 { color: white; }
|
||||||
|
a {
|
||||||
|
&:not([class^='button']) {
|
||||||
|
color: get-color("white", 0.8);
|
||||||
|
&:hover, &:focus { color: white; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.blog-card {
|
||||||
|
background: get-color("dark", 0.6);
|
||||||
|
}
|
||||||
|
.button-text-1,
|
||||||
|
.button-text-2,
|
||||||
|
.button-text-3 {
|
||||||
|
color: get-color("white", 0.8);
|
||||||
|
&:hover {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.button-text-1 {
|
||||||
|
&:before { background: get-color("white", 0.3); }
|
||||||
|
&:after { background: white; }
|
||||||
|
}
|
||||||
|
.button-text-2 {
|
||||||
|
&:before { background: get-color("white", 0.4); }
|
||||||
|
&:after { background: white; }
|
||||||
|
}
|
||||||
|
.button-text-3 {
|
||||||
|
&:before { background: get-color("white", 0.8); }
|
||||||
|
&:hover {
|
||||||
|
&:before { background: white; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@include breakpoint-above(lg) {
|
||||||
|
.blog-card {
|
||||||
|
padding: 36px 36px 36px 140px;
|
||||||
|
.blog-card-date {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 36px;
|
||||||
|
@include transform(translateY(-50%));
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@include breakpoint-less(md) {
|
||||||
|
.blog-card {
|
||||||
|
padding: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Comment box //
|
||||||
|
//
|
||||||
|
.comment-box {
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
padding-left: 80px;
|
||||||
|
.comment-user-avatar {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
background: $bg-gray;
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
border-radius: 50%;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 60px;
|
||||||
|
img {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.comment-content {
|
||||||
|
position: relative;
|
||||||
|
.comment-time {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
text-align: right;
|
||||||
|
color: $color-primary-lighter;
|
||||||
|
font-style: italic;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
161
assets/css/scss/components/_breadcrumb.scss
Normal file
161
assets/css/scss/components/_breadcrumb.scss
Normal file
@@ -0,0 +1,161 @@
|
|||||||
|
// Breadcrumb Component
|
||||||
|
.breadcrumb-wrapper {
|
||||||
|
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
||||||
|
border-bottom: 1px solid #dee2e6;
|
||||||
|
padding: 1rem 0;
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
padding: 0.75rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumb {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
line-height: 1.4;
|
||||||
|
|
||||||
|
@media (max-width: 576px) {
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumb-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
&:not(:last-child) {
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
display: inline-block;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-left: 4px solid #6c757d;
|
||||||
|
border-top: 3px solid transparent;
|
||||||
|
border-bottom: 3px solid transparent;
|
||||||
|
margin-left: 0.75rem;
|
||||||
|
opacity: 0.7;
|
||||||
|
|
||||||
|
@media (max-width: 576px) {
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
border-left-width: 3px;
|
||||||
|
border-top-width: 2px;
|
||||||
|
border-bottom-width: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #495057;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: all 0.2s ease-in-out;
|
||||||
|
padding: 0.25rem 0.5rem;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #007bff;
|
||||||
|
background-color: rgba(0, 123, 255, 0.1);
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
outline: 2px solid #007bff;
|
||||||
|
outline-offset: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
i.fas {
|
||||||
|
margin-right: 0.375rem;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
|
||||||
|
@media (max-width: 576px) {
|
||||||
|
margin-right: 0.25rem;
|
||||||
|
font-size: 0.6875rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
color: #6c757d;
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 0.25rem 0.5rem;
|
||||||
|
max-width: 200px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
max-width: 150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 576px) {
|
||||||
|
max-width: 120px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Responsive truncation for long breadcrumbs
|
||||||
|
@media (max-width: 576px) {
|
||||||
|
.breadcrumb-item {
|
||||||
|
&:not(:last-child):not(:nth-last-child(2)) {
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
& + .breadcrumb-item::before {
|
||||||
|
content: "...";
|
||||||
|
margin: 0 0.5rem;
|
||||||
|
color: #6c757d;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Dark mode support
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
background: linear-gradient(135deg, #343a40 0%, #495057 100%);
|
||||||
|
border-bottom-color: #6c757d;
|
||||||
|
|
||||||
|
.breadcrumb {
|
||||||
|
.breadcrumb-item {
|
||||||
|
&:not(:last-child)::after {
|
||||||
|
border-left-color: #adb5bd;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #dee2e6;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #66b2ff;
|
||||||
|
background-color: rgba(102, 178, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
outline-color: #66b2ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
color: #adb5bd;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Accessibility improvements
|
||||||
|
.sr-only {
|
||||||
|
position: absolute;
|
||||||
|
width: 1px;
|
||||||
|
height: 1px;
|
||||||
|
padding: 0;
|
||||||
|
margin: -1px;
|
||||||
|
overflow: hidden;
|
||||||
|
clip: rect(0, 0, 0, 0);
|
||||||
|
white-space: nowrap;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
17
assets/css/scss/components/_cookie-consent.scss
Normal file
17
assets/css/scss/components/_cookie-consent.scss
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
//
|
||||||
|
// Cookie Consent //
|
||||||
|
//
|
||||||
|
#cookie-consent {
|
||||||
|
position: fixed;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 997;
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
|
@include transition(ease-out 0.2s);
|
||||||
|
&.consent-hidden {
|
||||||
|
visibility: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
171
assets/css/scss/components/_fullscreen-menu.scss
Normal file
171
assets/css/scss/components/_fullscreen-menu.scss
Normal file
@@ -0,0 +1,171 @@
|
|||||||
|
//
|
||||||
|
// Fullscreen Menu Styles //
|
||||||
|
//
|
||||||
|
.fm-toggle {
|
||||||
|
margin-left: auto;
|
||||||
|
cursor: pointer;
|
||||||
|
@include transition(ease-out 0.2s);
|
||||||
|
.lines {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
background: black;
|
||||||
|
width: 25px;
|
||||||
|
height: 2px;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
vertical-align: middle;
|
||||||
|
@include transition(linear 0.12s);
|
||||||
|
&:before, &:after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
background: black;
|
||||||
|
width: 25px;
|
||||||
|
height: 2px;
|
||||||
|
display: inline-block;
|
||||||
|
@include transition(linear 0.12s);
|
||||||
|
}
|
||||||
|
&:before { top: -7px;}
|
||||||
|
&:after { bottom: -7px;}
|
||||||
|
}
|
||||||
|
@include breakpoint-above(lg) {
|
||||||
|
.lines {
|
||||||
|
&:before { @include transform(scaleX(0.8)); @include transform-origin(100% 50%); }
|
||||||
|
&:after { @include transform(scaleX(0.6)); @include transform-origin(100% 50%); }
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
.lines {
|
||||||
|
&:before { @include transform(scaleX(1)); }
|
||||||
|
&:after { @include transform(scaleX(1)); }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.header {
|
||||||
|
&[class*='header-color'], &.transparent-light {
|
||||||
|
&:not(.transparent-dark) {
|
||||||
|
.fm-toggle {
|
||||||
|
.lines, .lines:before, .lines:after { background: white; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Fullscreen Menu //
|
||||||
|
//
|
||||||
|
.fullscreen-menu {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 996;
|
||||||
|
visibility: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
@include transition(ease-out 0.2s);
|
||||||
|
.fm-wrapper {
|
||||||
|
@include transform(scale(0.98));
|
||||||
|
height: 100%;
|
||||||
|
@include transition(ease-out 0.2s);
|
||||||
|
.position-top,
|
||||||
|
.position-middle,
|
||||||
|
.position-bottom {
|
||||||
|
padding: 0 30px;
|
||||||
|
}
|
||||||
|
@include breakpoint-above(md) {
|
||||||
|
.position-top,
|
||||||
|
.position-middle,
|
||||||
|
.position-bottom {
|
||||||
|
padding: 0 50px;
|
||||||
|
}
|
||||||
|
.position-top { top: 50px; }
|
||||||
|
.position-bottom { bottom: 50px; }
|
||||||
|
}
|
||||||
|
.fm-close {
|
||||||
|
position: absolute;
|
||||||
|
top: 50px;
|
||||||
|
right: 50px;
|
||||||
|
cursor: pointer;
|
||||||
|
span {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
opacity: 0.8;
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
border-radius: 50%;
|
||||||
|
@include transition(ease-out 0.18s);
|
||||||
|
&:before, &:after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: 14px;
|
||||||
|
height: 2px;
|
||||||
|
border-radius: 2px;
|
||||||
|
@include transition(ease-out 0.18s);
|
||||||
|
}
|
||||||
|
&:before { @include transform(translate(-50%, -50%) rotate(45deg)) }
|
||||||
|
&:after { @include transform(translate(-50%, -50%) rotate(-45deg)) }
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
span {
|
||||||
|
opacity: 1;
|
||||||
|
&:before { @include transform(translate(-50%, -50%) rotate(180deg)) }
|
||||||
|
&:after { @include transform(translate(-50%, -50%) rotate(180deg)) }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@include breakpoint-less(md) {
|
||||||
|
.fm-close {
|
||||||
|
top: 30px;
|
||||||
|
right: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@include breakpoint-less(sm) {
|
||||||
|
.fm-close {
|
||||||
|
top: 20px;
|
||||||
|
right: 20px;
|
||||||
|
span {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.fm-show {
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
|
.fm-wrapper {
|
||||||
|
@include transform(scale(1));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bg-black,
|
||||||
|
[class*='bg-dark'],
|
||||||
|
[class*='bg-gradient-'],
|
||||||
|
[class*='bg-color-'] {
|
||||||
|
&.fullscreen-menu {
|
||||||
|
.fm-wrapper {
|
||||||
|
.fm-close {
|
||||||
|
span {
|
||||||
|
background: get-color("white", 0.1);
|
||||||
|
&:before, &:after { background: white; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
[class*='bg-gray'],
|
||||||
|
[class*='bg-white'] {
|
||||||
|
&.fullscreen-menu {
|
||||||
|
.fm-wrapper {
|
||||||
|
.fm-close {
|
||||||
|
span {
|
||||||
|
background: get-color("dark", 0.1);
|
||||||
|
&:before, &:after { background: black; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
81
assets/css/scss/components/_gallery.scss
Normal file
81
assets/css/scss/components/_gallery.scss
Normal file
@@ -0,0 +1,81 @@
|
|||||||
|
//
|
||||||
|
// Gallery Styles //
|
||||||
|
//
|
||||||
|
.gallery-wrapper {
|
||||||
|
.gallery-box {
|
||||||
|
.gallery-img {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
a {
|
||||||
|
display: block;
|
||||||
|
&:before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 1;
|
||||||
|
opacity: 0;
|
||||||
|
background: get-color("white", 0.1);
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
@include transition(ease-out 0.12s);
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
@include transform(scale(1));
|
||||||
|
width: 100%;
|
||||||
|
@include transition(transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1));
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
&:before {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
@include transform(scale(1.04));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.gallery-title {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
@include transform(translate(-50%,-50%));
|
||||||
|
z-index: 2;
|
||||||
|
background: white;
|
||||||
|
padding: 10px 20px;
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//
|
||||||
|
// Gallery Image Hover Styles //
|
||||||
|
//
|
||||||
|
&.hover-style-2 {
|
||||||
|
.gallery-box {
|
||||||
|
.gallery-img {
|
||||||
|
a {
|
||||||
|
&:before { background: get-color("dark", 0.1); }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//
|
||||||
|
// Gallery Image border-radius //
|
||||||
|
//
|
||||||
|
&[class*='border-radius'] {
|
||||||
|
.gallery-box {
|
||||||
|
.gallery-img {
|
||||||
|
@include transform(translate3d(0,0,0));
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.border-radius {
|
||||||
|
.gallery-box .gallery-img { border-radius: 0.4em; }
|
||||||
|
}
|
||||||
|
&.border-radius-1 {
|
||||||
|
.gallery-box .gallery-img { border-radius: 1.0em; }
|
||||||
|
}
|
||||||
|
}
|
||||||
974
assets/css/scss/components/_header.scss
Normal file
974
assets/css/scss/components/_header.scss
Normal file
@@ -0,0 +1,974 @@
|
|||||||
|
//
|
||||||
|
// Header Menu //
|
||||||
|
//
|
||||||
|
.header {
|
||||||
|
top: 0;
|
||||||
|
z-index: 993;
|
||||||
|
overflow: visible;
|
||||||
|
background: white;
|
||||||
|
width: 100%;
|
||||||
|
height: 80px;
|
||||||
|
@include transition(ease-in-out 0.2s);
|
||||||
|
&.hide {
|
||||||
|
@include transform(translateY(-100%));
|
||||||
|
}
|
||||||
|
.container, .container-fluid {
|
||||||
|
@include display-flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.header-logo {
|
||||||
|
display: inline-block;
|
||||||
|
.logo-light {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
* {
|
||||||
|
@include transition(linear 0.1s);
|
||||||
|
}
|
||||||
|
h1,h2,h3,h4,h5,h6 {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
width: auto;
|
||||||
|
height: 54px;
|
||||||
|
max-height: 54px;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
color: get-color("dark");
|
||||||
|
&:hover { color: get-color("dark"); }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.header-toggle {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
margin-left: auto;
|
||||||
|
cursor: pointer;
|
||||||
|
span {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 0;
|
||||||
|
@include transform(translateY(-50%));
|
||||||
|
background: get-color("dark");
|
||||||
|
width: 100%;
|
||||||
|
height: 2px;
|
||||||
|
border-radius: 2px;
|
||||||
|
@include transition(linear 0.1s);
|
||||||
|
&:before, &:after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
background: get-color("dark");
|
||||||
|
width: 100%;
|
||||||
|
height: 2px;
|
||||||
|
border-radius: 2px;
|
||||||
|
@include transition(linear 0.1s);
|
||||||
|
}
|
||||||
|
&:before { top: -7px; }
|
||||||
|
&:after { bottom: -7px; }
|
||||||
|
}
|
||||||
|
&.toggle-close {
|
||||||
|
span {
|
||||||
|
background: transparent;
|
||||||
|
&:before { top: 0; bottom: 0; @include transform(rotate(-45deg)); }
|
||||||
|
&:after { top: 0; bottom: 0; @include transform(rotate(45deg)); }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.header-menu {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 0.938rem;
|
||||||
|
z-index: 995;
|
||||||
|
.nav {
|
||||||
|
display: block;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style-type: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
ul {
|
||||||
|
list-style-type: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.nav-item {
|
||||||
|
text-align: left;
|
||||||
|
.nav-link {
|
||||||
|
padding: 0;
|
||||||
|
font-family: $font-family-poppins;
|
||||||
|
letter-spacing: -0.2px;
|
||||||
|
color: get-color("dark");
|
||||||
|
&:hover, &.active {
|
||||||
|
color: get-color("dark");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.nav-dropdown-toggle {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
&:after {
|
||||||
|
content: '\f107';
|
||||||
|
font-family: "Font Awesome 6 Free";
|
||||||
|
font-weight: 900;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.nav-dropdown {
|
||||||
|
background: white;
|
||||||
|
h1,h2,h3,h4,h5,h6 { color: get-color("dark"); }
|
||||||
|
a {
|
||||||
|
&:not([class^='button'], [class^="link-social"]) {
|
||||||
|
color: $color-primary;
|
||||||
|
&:hover, &:focus { color: get-color("dark"); }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.nav-dropdown-item {
|
||||||
|
.nav-subdropdown-toggle {
|
||||||
|
position: absolute;
|
||||||
|
&:after {
|
||||||
|
content: '\f105';
|
||||||
|
font-family: "Font Awesome 6 Free";
|
||||||
|
font-weight: 900;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.font-2 {
|
||||||
|
.nav {
|
||||||
|
.nav-item {
|
||||||
|
.nav-link {
|
||||||
|
font-size: 0.9em;
|
||||||
|
font-weight: 500;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.header-menu-extra {
|
||||||
|
a {
|
||||||
|
&:not([class^='button'], [class^="link-social"]) {
|
||||||
|
color: get-color("dark");
|
||||||
|
&:hover, &:focus { color: get-color("dark"); }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//
|
||||||
|
// Header Boxed //
|
||||||
|
//
|
||||||
|
&.header-boxed {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
//
|
||||||
|
// Positions //
|
||||||
|
//
|
||||||
|
&.sticky-autohide, &.sticky {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
@include box-shadow(0 0 36px 0 rgba(22,25,28,0.17));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.theme-font-nunito {
|
||||||
|
.header {
|
||||||
|
.header-menu {
|
||||||
|
.nav {
|
||||||
|
.nav-item {
|
||||||
|
.nav-link {
|
||||||
|
font-family: $font-family-nunito;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Header Backgrounds //
|
||||||
|
//
|
||||||
|
.header {
|
||||||
|
//
|
||||||
|
// Header Dark //
|
||||||
|
//
|
||||||
|
&[class*='header-color'] {
|
||||||
|
&:not(.transparent-dark) {
|
||||||
|
.header-logo {
|
||||||
|
.logo-dark {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.logo-light {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
h1,h2,h3,h4,h5,h6 { color: white; }
|
||||||
|
a {
|
||||||
|
color: white;
|
||||||
|
&:hover { color: white; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@include breakpoint-above(lg) {
|
||||||
|
.header-menu {
|
||||||
|
.nav {
|
||||||
|
.nav-item {
|
||||||
|
.nav-link, .nav-dropdown-toggle {
|
||||||
|
color: white;
|
||||||
|
&:hover, &:focus, &.active { color: white; }
|
||||||
|
}
|
||||||
|
.nav-link {
|
||||||
|
&:before {
|
||||||
|
background: get-color("white", 0.15);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.header-menu-extra {
|
||||||
|
a {
|
||||||
|
&:not([class^='button'], [class^="link-social"]) {
|
||||||
|
color: white;
|
||||||
|
&:hover, &:focus { color: white; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.header-toggle {
|
||||||
|
span {
|
||||||
|
background: white;
|
||||||
|
&:before, &:after { background: white; }
|
||||||
|
}
|
||||||
|
&.toggle-close {
|
||||||
|
span {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.header-color-dark { background: $bg-dark; }
|
||||||
|
&.header-color-black { background: black; }
|
||||||
|
|
||||||
|
//
|
||||||
|
// Transparent Dark, Light //
|
||||||
|
//
|
||||||
|
&.transparent-dark, &.transparent-light {
|
||||||
|
&:not(.sticky-autohide, .sticky) {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
background: transparent;
|
||||||
|
@include box-shadow(none);
|
||||||
|
}
|
||||||
|
&[class*='header-color'], &.transparent-light {
|
||||||
|
&.border-top, &.border-bottom {
|
||||||
|
border-color: get-color("white", 0.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.transparent-light {
|
||||||
|
.header-logo {
|
||||||
|
.logo-dark {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.logo-light {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
h1,h2,h3,h4,h5,h6 { color: white; }
|
||||||
|
a {
|
||||||
|
color: white;
|
||||||
|
&:hover { color: white; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.header-toggle {
|
||||||
|
span {
|
||||||
|
background: white;
|
||||||
|
&:before, &:after { background: white; }
|
||||||
|
}
|
||||||
|
&.toggle-close {
|
||||||
|
span {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@include breakpoint-above(lg) {
|
||||||
|
.header-menu {
|
||||||
|
.nav {
|
||||||
|
.nav-item {
|
||||||
|
.nav-link, .nav-dropdown-toggle {
|
||||||
|
color: white;
|
||||||
|
&:hover, &:focus, &.active { color: white; }
|
||||||
|
}
|
||||||
|
.nav-link {
|
||||||
|
&:before {
|
||||||
|
background: get-color("white", 0.15);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.header-menu-extra {
|
||||||
|
a {
|
||||||
|
&:not([class^='button'], [class^="link-social"]) {
|
||||||
|
color: white;
|
||||||
|
&:hover, &:focus { color: white; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Header Boxed //
|
||||||
|
//
|
||||||
|
&.header-boxed {
|
||||||
|
background: transparent;
|
||||||
|
.container, .container-fluid {
|
||||||
|
background: get-color("white", 0.9);
|
||||||
|
border-bottom-right-radius: 1.5em;
|
||||||
|
border-bottom-left-radius: 1.5em;
|
||||||
|
@include box-shadow(0 0 36px 0 rgba(22,25,28,0.1));
|
||||||
|
}
|
||||||
|
.container-fluid {
|
||||||
|
width: auto;
|
||||||
|
margin: 0 30px;
|
||||||
|
}
|
||||||
|
&.sticky-autohide, &.sticky {
|
||||||
|
@include box-shadow(none);
|
||||||
|
}
|
||||||
|
&[class*='header-color'] {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
&.header-color-dark {
|
||||||
|
.container {
|
||||||
|
background: get-color("dark", 0.8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.header-color-black {
|
||||||
|
.container {
|
||||||
|
background: rgba(0, 0, 0, 0.8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include breakpoint-above(lg) {
|
||||||
|
.header {
|
||||||
|
//
|
||||||
|
// Sizes //
|
||||||
|
//
|
||||||
|
.header-logo, .header-menu-extra {
|
||||||
|
z-index: 996;
|
||||||
|
}
|
||||||
|
.header-menu {
|
||||||
|
height: 80px;
|
||||||
|
}
|
||||||
|
&.header-lg {
|
||||||
|
.header-logo {
|
||||||
|
img {
|
||||||
|
height: 64px;
|
||||||
|
max-height: 64px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.header-menu {
|
||||||
|
height: 90px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.header-xl {
|
||||||
|
.header-logo {
|
||||||
|
img {
|
||||||
|
height: 74px;
|
||||||
|
max-height: 74px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.header-menu {
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Alignments //
|
||||||
|
//
|
||||||
|
&:not(.left, .center) {
|
||||||
|
.header-menu {
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.left {
|
||||||
|
.header-logo {
|
||||||
|
margin-right: 30px;
|
||||||
|
}
|
||||||
|
.header-menu {
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.center {
|
||||||
|
.header-logo {
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
.header-menu {
|
||||||
|
.nav {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.header-menu {
|
||||||
|
.nav {
|
||||||
|
.nav-item {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0 0 0 20px;
|
||||||
|
&.mega-menu-item {
|
||||||
|
position: static;
|
||||||
|
.nav-link {
|
||||||
|
&:after {
|
||||||
|
content: '\f107';
|
||||||
|
padding-left: 5px;
|
||||||
|
font-family: "Font Awesome 6 Free";
|
||||||
|
font-weight: 900;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
&.d-toggle {
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.nav-dropdown-toggle {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:first-child {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
.nav-link {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 80px;
|
||||||
|
&:before {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
bottom: 22px;
|
||||||
|
left: 0;
|
||||||
|
content: '';
|
||||||
|
background: $bg-gray;
|
||||||
|
height: 0;
|
||||||
|
@include transition(all 0.14s cubic-bezier(0.165, 0.84, 0.44, 1));
|
||||||
|
}
|
||||||
|
&.d-toggle {
|
||||||
|
padding-right: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.nav-dropdown-toggle {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
right: 0;
|
||||||
|
@include transform(translateY(-50%));
|
||||||
|
margin-top: -2px;
|
||||||
|
color: get-color("dark");
|
||||||
|
&:hover {
|
||||||
|
color: get-color("dark");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.nav-dropdown {
|
||||||
|
position: absolute;
|
||||||
|
top: 84px;
|
||||||
|
left: 0;
|
||||||
|
@include transform(translateY(10px));
|
||||||
|
z-index: 995;
|
||||||
|
visibility: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
background: white;
|
||||||
|
width: 240px;
|
||||||
|
@include box-shadow(0 10px 40px -4px rgba(22,25,28,0.17));
|
||||||
|
border-radius: 0.4em;
|
||||||
|
padding: 15px 0;
|
||||||
|
@include transition(ease-out 0.14s);
|
||||||
|
&:before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: -4px;
|
||||||
|
width: 100%;
|
||||||
|
height: 4px;
|
||||||
|
}
|
||||||
|
.nav-dropdown-item {
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0 15px;
|
||||||
|
.nav-dropdown-link {
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
border-radius: 0.4em;
|
||||||
|
padding: 7px 15px;
|
||||||
|
@include transition(linear 0.06s);
|
||||||
|
&:hover {
|
||||||
|
background: $bg-gray;
|
||||||
|
padding: 7px 15px 7px 17px;
|
||||||
|
}
|
||||||
|
&.sd-toggle {
|
||||||
|
&:after {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
right: 15px;
|
||||||
|
@include transform(translateY(-50%));
|
||||||
|
content: '\f105';
|
||||||
|
font-family: "Font Awesome 6 Free";
|
||||||
|
font-weight: 900;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.nav-subdropdown-toggle {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.nav-subdropdown {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 228px;
|
||||||
|
visibility: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
background: white;
|
||||||
|
width: 240px;
|
||||||
|
@include box-shadow(0 10px 40px -4px rgba(22,25,28,0.17));
|
||||||
|
border-radius: 0.4em;
|
||||||
|
padding: 15px;
|
||||||
|
@include transition(linear 0.06s);
|
||||||
|
.nav-subdropdown-item {
|
||||||
|
display: block;
|
||||||
|
margin: 0;
|
||||||
|
.nav-subdropdown-link {
|
||||||
|
display: block;
|
||||||
|
border-radius: 0.4em;
|
||||||
|
padding: 7px 15px;
|
||||||
|
@include transition(linear 0.06s);
|
||||||
|
&:hover {
|
||||||
|
background: $bg-gray;
|
||||||
|
padding: 7px 15px 7px 17px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.nav-subdropdown-lg {
|
||||||
|
width: 476px;
|
||||||
|
[class*='col'] {
|
||||||
|
&:first-child {
|
||||||
|
border-right: 1px solid $border-gray;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
.nav-subdropdown {
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.mega-menu-content {
|
||||||
|
position: absolute;
|
||||||
|
top: 84px;
|
||||||
|
right: 2em;
|
||||||
|
left: 2em;
|
||||||
|
@include transform(translateY(10px));
|
||||||
|
z-index: 995;
|
||||||
|
visibility: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
background: white;
|
||||||
|
width: auto;
|
||||||
|
@include box-shadow(0 10px 40px -4px rgba(22,25,28,0.17));
|
||||||
|
border-radius: 0.4em;
|
||||||
|
padding: 1em;
|
||||||
|
@include transition(ease-out 0.14s);
|
||||||
|
&:before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: -4px;
|
||||||
|
width: 100%;
|
||||||
|
height: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.mega-menu-item {
|
||||||
|
&:hover {
|
||||||
|
.mega-menu-content {
|
||||||
|
@include transform(translateY(0));
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
.nav-link {
|
||||||
|
&:before {
|
||||||
|
height: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.nav-dropdown {
|
||||||
|
@include transform(translateY(0));
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&[class*='dropdown-color'] {
|
||||||
|
.nav {
|
||||||
|
.nav-item {
|
||||||
|
.nav-dropdown {
|
||||||
|
h1,h2,h3,h4,h5,h6 { color: white; }
|
||||||
|
a {
|
||||||
|
&:not([class^='button'], [class^="link-social"]) {
|
||||||
|
color: get-color("white", 0.8);
|
||||||
|
&:hover, &:focus { color: white; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.nav-dropdown-item {
|
||||||
|
.nav-dropdown-link {
|
||||||
|
&:hover {
|
||||||
|
background: get-color("white", 0.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.nav-subdropdown {
|
||||||
|
.nav-subdropdown-item {
|
||||||
|
.nav-subdropdown-link {
|
||||||
|
&:hover {
|
||||||
|
background: get-color("white", 0.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.nav-subdropdown-lg {
|
||||||
|
[class*='col'] {
|
||||||
|
border-color: get-color("white", 0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.dropdown-color-dark {
|
||||||
|
.nav {
|
||||||
|
.nav-item {
|
||||||
|
.nav-dropdown {
|
||||||
|
background: get-color("dark");
|
||||||
|
.nav-dropdown-item {
|
||||||
|
.nav-subdropdown {
|
||||||
|
background: get-color("dark");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.transparent-dark {
|
||||||
|
.header-menu {
|
||||||
|
.nav {
|
||||||
|
.nav-item {
|
||||||
|
.nav-link {
|
||||||
|
&:before {
|
||||||
|
background: get-color("dark", 0.05);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.header-menu-extra {
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: 30px;
|
||||||
|
}
|
||||||
|
.header-toggle {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Header Boxed //
|
||||||
|
//
|
||||||
|
&.header-boxed {
|
||||||
|
.container,
|
||||||
|
.container-fluid {
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:not(.center, .left) {
|
||||||
|
.header-menu {
|
||||||
|
.nav {
|
||||||
|
.nav-item {
|
||||||
|
&:last-child,
|
||||||
|
&:nth-last-child(2) {
|
||||||
|
.nav-dropdown {
|
||||||
|
right: 0;
|
||||||
|
left: auto;
|
||||||
|
.nav-dropdown-item {
|
||||||
|
.nav-subdropdown {
|
||||||
|
right: 228px;
|
||||||
|
left: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.container-fluid {
|
||||||
|
.header-menu {
|
||||||
|
.nav {
|
||||||
|
.nav-item {
|
||||||
|
.nav-dropdown {
|
||||||
|
right: 0;
|
||||||
|
left: auto;
|
||||||
|
.nav-dropdown-item {
|
||||||
|
.nav-subdropdown {
|
||||||
|
right: 228px;
|
||||||
|
left: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@include breakpoint-less(md) {
|
||||||
|
.header {
|
||||||
|
height: 70px;
|
||||||
|
.header-menu {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: -100%;
|
||||||
|
overflow-y: auto;
|
||||||
|
background: white;
|
||||||
|
width: 300px;
|
||||||
|
height: 100%;
|
||||||
|
@include box-shadow(0 0 36px 0 rgba(22,25,28,0.17));
|
||||||
|
padding: 20px 30px;
|
||||||
|
@include transition(all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1));
|
||||||
|
&.show {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
.nav {
|
||||||
|
width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
.nav-item {
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
margin: 0;
|
||||||
|
border-bottom: 1px solid $border-gray;
|
||||||
|
padding: 12px 0;
|
||||||
|
&:last-child {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
.nav-link {
|
||||||
|
display: inline-block;
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
color: $color-primary;
|
||||||
|
&:hover, &:focus, &.active { color: get-color("dark"); }
|
||||||
|
}
|
||||||
|
&.mega-menu-item {
|
||||||
|
.nav-link {
|
||||||
|
width: 100%;
|
||||||
|
&:after {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.mega-menu-content {
|
||||||
|
padding-top: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.nav-dropdown-toggle {
|
||||||
|
position: absolute;
|
||||||
|
top: 13px;
|
||||||
|
right: 0;
|
||||||
|
width: 21px;
|
||||||
|
height: 21px;
|
||||||
|
text-align: right;
|
||||||
|
&.active {
|
||||||
|
color: get-color("dark");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.nav-dropdown {
|
||||||
|
display: none;
|
||||||
|
background: white;
|
||||||
|
padding: 8px 0 0 20px;
|
||||||
|
&.show {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.nav-dropdown-item {
|
||||||
|
position: relative;
|
||||||
|
margin: 0 0 8px;
|
||||||
|
&:last-child {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.nav-dropdown-link {
|
||||||
|
&.active {
|
||||||
|
color: get-color("dark");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.nav-subdropdown-toggle {
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 21px;
|
||||||
|
height: 21px;
|
||||||
|
text-align: right;
|
||||||
|
&:after {
|
||||||
|
content: '\f107';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.nav-subdropdown {
|
||||||
|
display: none;
|
||||||
|
padding: 8px 0 0 20px;
|
||||||
|
&.show {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
li {
|
||||||
|
margin: 0 0 8px;
|
||||||
|
&:last-child {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.mega-menu-content {
|
||||||
|
display: none;
|
||||||
|
&.show {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.header-menu-extra {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
right: 80px;
|
||||||
|
left: auto;
|
||||||
|
@include transform(translateY(-50%));
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Header Boxed //
|
||||||
|
//
|
||||||
|
&.header-boxed {
|
||||||
|
.container,
|
||||||
|
.container-fluid {
|
||||||
|
background: get-color("white", 0.95);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Mobile Menu - Dark //
|
||||||
|
//
|
||||||
|
&[class*='mobile-menu-color'] {
|
||||||
|
.nav {
|
||||||
|
.nav-item {
|
||||||
|
border-color: get-color("white", 0.2);
|
||||||
|
.nav-link,
|
||||||
|
.nav-dropdown-toggle {
|
||||||
|
color: get-color("white", 0.8);
|
||||||
|
&:hover, &:focus, &.active {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.nav-dropdown {
|
||||||
|
background: transparent;
|
||||||
|
a {
|
||||||
|
&:not([class^='button'], [class^="link-social"]) {
|
||||||
|
color: get-color("white", 0.8);
|
||||||
|
&:hover, &:focus { color: white; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.mobile-menu-color-dark {
|
||||||
|
.header-menu { background: $bg-dark; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@include breakpoint-less(xs) {
|
||||||
|
.header {
|
||||||
|
&.header-boxed {
|
||||||
|
.container,
|
||||||
|
.container-fluid {
|
||||||
|
width: auto;
|
||||||
|
margin-right: 8px;
|
||||||
|
margin-left: 8px;
|
||||||
|
padding: 0 26px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Header Sizes //
|
||||||
|
//
|
||||||
|
@include breakpoint-above(lg) {
|
||||||
|
.header-lg {
|
||||||
|
height: 90px;
|
||||||
|
.container-fluid {
|
||||||
|
padding: 0 40px;
|
||||||
|
}
|
||||||
|
.header-menu {
|
||||||
|
.nav {
|
||||||
|
.nav-item {
|
||||||
|
.nav-link {
|
||||||
|
line-height: 90px;
|
||||||
|
&:before {
|
||||||
|
bottom: 27px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.nav-dropdown, .mega-menu-content {
|
||||||
|
top: 94px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.header-xl {
|
||||||
|
height: 100px;
|
||||||
|
.container-fluid {
|
||||||
|
padding: 0 50px;
|
||||||
|
}
|
||||||
|
.header-menu {
|
||||||
|
.nav {
|
||||||
|
.nav-item {
|
||||||
|
.nav-link {
|
||||||
|
line-height: 100px;
|
||||||
|
&:before {
|
||||||
|
bottom: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.nav-dropdown, .mega-menu-content {
|
||||||
|
top: 104px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Placeholders for Sticky Header //
|
||||||
|
//
|
||||||
|
.header-placeholder { height: 80px; }
|
||||||
|
.header-placeholder-lg { height: 90px; }
|
||||||
|
.header-placeholder-xl { height: 100px; }
|
||||||
|
@include breakpoint-less(md) {
|
||||||
|
.header-placeholder, .header-placeholder-lg, .header-placeholder-xl { height: 70px; }
|
||||||
|
}
|
||||||
97
assets/css/scss/components/_masonry.scss
Normal file
97
assets/css/scss/components/_masonry.scss
Normal file
@@ -0,0 +1,97 @@
|
|||||||
|
//
|
||||||
|
// Masonry Styles //
|
||||||
|
//
|
||||||
|
.masonry {
|
||||||
|
margin: 0 -1em -2em;
|
||||||
|
.masonry-item {
|
||||||
|
margin-bottom: 2em;
|
||||||
|
padding: 0 1em;
|
||||||
|
}
|
||||||
|
//
|
||||||
|
// Masonry - Columns //
|
||||||
|
//
|
||||||
|
&.column-1 {
|
||||||
|
.masonry-item { width: 100%; }
|
||||||
|
}
|
||||||
|
&.column-2 {
|
||||||
|
@include breakpoint-above(md) {
|
||||||
|
.masonry-item { width: 50%; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.column-3 {
|
||||||
|
@include breakpoint-above(md) {
|
||||||
|
.masonry-item { width: 50%; }
|
||||||
|
}
|
||||||
|
@include breakpoint-above(lg) {
|
||||||
|
.masonry-item { width: 33.33%; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.column-4 {
|
||||||
|
@include breakpoint-above(sm) {
|
||||||
|
.masonry-item { width: 50%; }
|
||||||
|
}
|
||||||
|
@include breakpoint-above(md) {
|
||||||
|
.masonry-item { width: 33.33%; }
|
||||||
|
}
|
||||||
|
@include breakpoint-above(lg) {
|
||||||
|
.masonry-item { width: 25%; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.column-5 {
|
||||||
|
@extend .column-4;
|
||||||
|
@include breakpoint-above(xl) {
|
||||||
|
.masonry-item { width: 20%; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.column-6 {
|
||||||
|
@extend .column-4;
|
||||||
|
@include breakpoint-above(xl) {
|
||||||
|
.masonry-item { width: 16.66%; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//
|
||||||
|
// Masonry - Item Spacings //
|
||||||
|
//
|
||||||
|
&.spacing-0 {
|
||||||
|
margin: 0;
|
||||||
|
.masonry-item {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.spacing-1 {
|
||||||
|
margin: 0 -0.5em -1em;
|
||||||
|
.masonry-item {
|
||||||
|
margin-bottom: 1em;
|
||||||
|
padding: 0 0.5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.spacing-2 {
|
||||||
|
margin: 0 -1em -2em;
|
||||||
|
.masonry-item {
|
||||||
|
margin-bottom: 2em;
|
||||||
|
padding: 0 1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.spacing-3 {
|
||||||
|
margin: 0 -1.5em -3em;
|
||||||
|
.masonry-item {
|
||||||
|
margin-bottom: 3em;
|
||||||
|
padding: 0 1.5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.spacing-4 {
|
||||||
|
margin: 0 -2em -4em;
|
||||||
|
.masonry-item {
|
||||||
|
margin-bottom: 4em;
|
||||||
|
padding: 0 2em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.spacing-5 {
|
||||||
|
margin: 0 -2.5em -5em;
|
||||||
|
.masonry-item {
|
||||||
|
margin-bottom: 5em;
|
||||||
|
padding: 0 2.5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
555
assets/css/scss/components/_portfolio.scss
Normal file
555
assets/css/scss/components/_portfolio.scss
Normal file
@@ -0,0 +1,555 @@
|
|||||||
|
//
|
||||||
|
// Portfolio Styles //
|
||||||
|
//
|
||||||
|
.portfolio-masonry {
|
||||||
|
.portfolio-item {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.portfolio-item {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
//
|
||||||
|
// Portfolio Columns //
|
||||||
|
//
|
||||||
|
&.column-1 {
|
||||||
|
.portfolio-item { width: 100%; }
|
||||||
|
}
|
||||||
|
&.column-2 {
|
||||||
|
@include breakpoint-above(md) {
|
||||||
|
.portfolio-item { width: 50%; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.column-3 {
|
||||||
|
@include breakpoint-above(md) {
|
||||||
|
.portfolio-item { width: 50%; }
|
||||||
|
}
|
||||||
|
@include breakpoint-above(lg) {
|
||||||
|
.portfolio-item { width: 33.33%; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.column-4 {
|
||||||
|
@include breakpoint-above(sm) {
|
||||||
|
.portfolio-item { width: 50%; }
|
||||||
|
}
|
||||||
|
@include breakpoint-above(md) {
|
||||||
|
.portfolio-item { width: 33.33%; }
|
||||||
|
}
|
||||||
|
@include breakpoint-above(lg) {
|
||||||
|
.portfolio-item { width: 25%; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.column-5 {
|
||||||
|
@extend .column-4;
|
||||||
|
@include breakpoint-above(xl) {
|
||||||
|
.portfolio-item { width: 20%; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.column-6 {
|
||||||
|
@extend .column-4;
|
||||||
|
@include breakpoint-above(xl) {
|
||||||
|
.portfolio-item { width: 16.66%; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//
|
||||||
|
// Portfolio box spacings //
|
||||||
|
//
|
||||||
|
&.spacing-0 {
|
||||||
|
.portfolio-item { padding: 0; }
|
||||||
|
}
|
||||||
|
&.spacing-1 {
|
||||||
|
.portfolio-item { padding: 0.5em; }
|
||||||
|
}
|
||||||
|
&.spacing-2 {
|
||||||
|
.portfolio-item { padding: 1em; }
|
||||||
|
}
|
||||||
|
&.spacing-3 {
|
||||||
|
.portfolio-item { padding: 1.5em; }
|
||||||
|
}
|
||||||
|
&.spacing-4 {
|
||||||
|
.portfolio-item { padding: 2em; }
|
||||||
|
}
|
||||||
|
&.spacing-5 {
|
||||||
|
.portfolio-item { padding: 2.5em; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.portfolio-masonry,
|
||||||
|
.portfolio-grid {
|
||||||
|
//
|
||||||
|
// Portfolio box border-radius //
|
||||||
|
//
|
||||||
|
&[class*='border-radius'] {
|
||||||
|
.portfolio-item {
|
||||||
|
.portfolio-box {
|
||||||
|
@include transform(translate3d(0,0,0));
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.border-radius {
|
||||||
|
.portfolio-item .portfolio-box { border-radius: 0.4em; }
|
||||||
|
}
|
||||||
|
&.border-radius-1 {
|
||||||
|
.portfolio-item .portfolio-box { border-radius: 1.0em; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.text-center {
|
||||||
|
.portfolio-item { text-align: center; }
|
||||||
|
}
|
||||||
|
.text-end {
|
||||||
|
.portfolio-item { text-align: right; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
.portfolio-masonry {
|
||||||
|
&.spacing-0 { margin: 0; }
|
||||||
|
&.spacing-1 { margin: -0.5em; }
|
||||||
|
&.spacing-2 { margin: -1em; }
|
||||||
|
&.spacing-3 { margin: -1.5em; }
|
||||||
|
&.spacing-4 { margin: -2em; }
|
||||||
|
&.spacing-5 { margin: -2.5em; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Portfolio Filter Styles //
|
||||||
|
//
|
||||||
|
.filter {
|
||||||
|
ul {
|
||||||
|
margin: 0 -5px;
|
||||||
|
padding: 0;
|
||||||
|
li {
|
||||||
|
display: inline-block;
|
||||||
|
background: $button-gray-lighter;
|
||||||
|
border-radius: 30px;
|
||||||
|
margin: 0 5px;
|
||||||
|
padding: 7px 15px;
|
||||||
|
font: 500 0.9em $font-family-poppins;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
cursor: pointer;
|
||||||
|
@include transition(linear 0.1s);
|
||||||
|
&:hover {
|
||||||
|
background: $button-gray;
|
||||||
|
}
|
||||||
|
&.active, &.mixitup-control-active {
|
||||||
|
background: $bg-dark;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//
|
||||||
|
// Filter Font Styles //
|
||||||
|
//
|
||||||
|
&.filter-font-2 {
|
||||||
|
ul {
|
||||||
|
li {
|
||||||
|
font-size: 15px;
|
||||||
|
letter-spacing: -0.2px;
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//
|
||||||
|
// Filter Styles //
|
||||||
|
//
|
||||||
|
&.filter-style-2 {
|
||||||
|
ul {
|
||||||
|
margin: 0 -2px;
|
||||||
|
li {
|
||||||
|
background: transparent;
|
||||||
|
margin: 0 2px;
|
||||||
|
color: $color-primary;
|
||||||
|
&:hover, &.active, &.mixitup-control-active {
|
||||||
|
color: get-color("dark");
|
||||||
|
}
|
||||||
|
&.active, &.mixitup-control-active {
|
||||||
|
background: $button-gray-lighter;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.filter-style-3 {
|
||||||
|
ul {
|
||||||
|
margin: 0 -14px -8px;
|
||||||
|
li {
|
||||||
|
position: relative;
|
||||||
|
background: transparent;
|
||||||
|
margin: 0 14px 8px;
|
||||||
|
padding: 0;
|
||||||
|
color: $color-primary;
|
||||||
|
&:after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
bottom: -1px;
|
||||||
|
left: 0;
|
||||||
|
background: get-color("dark");
|
||||||
|
height: 1px;
|
||||||
|
@include animation(button-line-out 0.24s cubic-bezier(0.165, 0.84, 0.44, 1) both);
|
||||||
|
}
|
||||||
|
&:hover, &.active, &.mixitup-control-active {
|
||||||
|
color: get-color("dark");
|
||||||
|
}
|
||||||
|
&.active, &.mixitup-control-active {
|
||||||
|
&:after {
|
||||||
|
width: 100%;
|
||||||
|
@include animation(button-line-in 0.24s cubic-bezier(0.165, 0.84, 0.44, 1) both);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.filter-style-4 {
|
||||||
|
ul {
|
||||||
|
margin: 0 -14px -7px;
|
||||||
|
li {
|
||||||
|
background: transparent;
|
||||||
|
margin: 0 14px 7px;
|
||||||
|
padding: 0;
|
||||||
|
color: $color-primary-lighter;
|
||||||
|
&:hover, &.active, &.mixitup-control-active {
|
||||||
|
background: transparent;
|
||||||
|
color: get-color("dark");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.theme-font-unito {
|
||||||
|
.filter {
|
||||||
|
ul {
|
||||||
|
li {
|
||||||
|
font: 600 0.9em $font-family-nunito;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.filter-font-2 {
|
||||||
|
ul {
|
||||||
|
li {
|
||||||
|
font-size: 1em;
|
||||||
|
letter-spacing: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bg-black,
|
||||||
|
[class*='bg-dark'],
|
||||||
|
[class*='bg-gradient-'],
|
||||||
|
[class*='bg-color-'] {
|
||||||
|
.filter {
|
||||||
|
ul {
|
||||||
|
li {
|
||||||
|
background: transparent;
|
||||||
|
color: get-color("white", 0.7);
|
||||||
|
&:hover {
|
||||||
|
background: transparent;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
&.active, &.mixitup-control-active {
|
||||||
|
background: white;
|
||||||
|
color: get-color("dark");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.filter-style-2 {
|
||||||
|
ul {
|
||||||
|
li {
|
||||||
|
color: get-color("white", 0.7);
|
||||||
|
&:hover, &.active, &.mixitup-control-active {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
&.active, &.mixitup-control-active {
|
||||||
|
background: white;
|
||||||
|
color: get-color("dark");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.filter-style-3 {
|
||||||
|
ul {
|
||||||
|
li {
|
||||||
|
color: get-color("white", 0.7);
|
||||||
|
&:after {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
&:hover, &.active, &.mixitup-control-active {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
&.active, &.mixitup-control-active {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.filter-style-4 {
|
||||||
|
ul {
|
||||||
|
li {
|
||||||
|
background: transparent;
|
||||||
|
color: get-color("white", 0.7);
|
||||||
|
&:hover, &.active, &.mixitup-control-active {
|
||||||
|
background: transparent;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Hover Styles //
|
||||||
|
//
|
||||||
|
.portfolio-item {
|
||||||
|
.portfolio-box {
|
||||||
|
position: relative;
|
||||||
|
.portfolio-img {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
img {
|
||||||
|
@include transform(scale(1));
|
||||||
|
width: 100%;
|
||||||
|
@include transition(transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 2;
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
.portfolio-img {
|
||||||
|
img {
|
||||||
|
@include transform(scale(1.04));
|
||||||
|
@include filter(blur(1.5px));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.portfolio-grid, .portfolio-masonry {
|
||||||
|
&:not(.hover-style-2, .hover-style-3) {
|
||||||
|
.portfolio-item {
|
||||||
|
.portfolio-box {
|
||||||
|
.portfolio-title {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
opacity: 0;
|
||||||
|
background-image: linear-gradient(to top, get-color("dark", 0.4), transparent);
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
@include transition(ease-out 0.12s);
|
||||||
|
div {
|
||||||
|
position: absolute;
|
||||||
|
left: 30px;
|
||||||
|
bottom: 30px;
|
||||||
|
* {
|
||||||
|
opacity: 0;
|
||||||
|
@include transform(translateY(5px));
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
color: white;
|
||||||
|
@include transition(ease-out 0.12s);
|
||||||
|
&:first-child { @include transition-delay(0.05s); }
|
||||||
|
&:last-child { @include transition-delay(0.10s); margin-bottom: 0; }
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
.portfolio-title {
|
||||||
|
opacity: 1;
|
||||||
|
* {
|
||||||
|
opacity: 1;
|
||||||
|
@include transform(translateY(0));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Hover Style 2 //
|
||||||
|
//
|
||||||
|
.hover-style-2 {
|
||||||
|
.portfolio-item {
|
||||||
|
.portfolio-box {
|
||||||
|
.portfolio-title {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
opacity: 1;
|
||||||
|
background: get-color("dark", 0.1);
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
@include transition(ease-out 0.12s);
|
||||||
|
&:before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
opacity: 0;
|
||||||
|
background-image: linear-gradient(to top, get-color("dark", 0.3), transparent);
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
@include transition(ease-out 0.12s);
|
||||||
|
}
|
||||||
|
div {
|
||||||
|
position: absolute;
|
||||||
|
top: 30px;
|
||||||
|
left: 30px;
|
||||||
|
span {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
* {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
color: white;
|
||||||
|
@include transition(ease-out 0.12s);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
i {
|
||||||
|
position: absolute;
|
||||||
|
right: 30px;
|
||||||
|
bottom: 30px;
|
||||||
|
@include transform(translateY(5px));
|
||||||
|
opacity: 0;
|
||||||
|
font-size: 1.2em;
|
||||||
|
color: white;
|
||||||
|
@include transition(ease-out 0.12s);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
.portfolio-title {
|
||||||
|
&:before {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
i {
|
||||||
|
@include transform(translateY(0));
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Hover style 3 //
|
||||||
|
//
|
||||||
|
.hover-style-3 {
|
||||||
|
.portfolio-item {
|
||||||
|
.portfolio-box {
|
||||||
|
.portfolio-title {
|
||||||
|
position: absolute;
|
||||||
|
right: 1.5rem;
|
||||||
|
bottom: 1.5rem;
|
||||||
|
left: 1.5rem;
|
||||||
|
.portfolio-title-item {
|
||||||
|
display: table;
|
||||||
|
@include transform(translateY(4px));
|
||||||
|
visibility: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
background: white;
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
padding: 0.6rem 1rem;
|
||||||
|
@include transition(ease-out 0.12s);
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
&:nth-child(1) { @include transition-delay(0.05s); }
|
||||||
|
&:nth-child(2) { @include transition-delay(0.10s); }
|
||||||
|
&:nth-child(3) { @include transition-delay(0.15s); }
|
||||||
|
* {
|
||||||
|
margin-bottom: 0;
|
||||||
|
color: get-color("dark");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@include breakpoint-less(md) {
|
||||||
|
.portfolio-title {
|
||||||
|
right: 1.25rem;
|
||||||
|
bottom: 1.25rem;
|
||||||
|
left: 1.25rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
.portfolio-title {
|
||||||
|
.portfolio-title-item {
|
||||||
|
@include transform(translateY(0));
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Hero Portfolio //
|
||||||
|
//
|
||||||
|
.hero-portfolio-slider {
|
||||||
|
.hero-portfolio-box {
|
||||||
|
position: relative;
|
||||||
|
a {
|
||||||
|
display: block;
|
||||||
|
&:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.hero-portfolio-img {
|
||||||
|
overflow: hidden;
|
||||||
|
@include transform(translate3d(0,0,0));
|
||||||
|
img {
|
||||||
|
@include transition(transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.hero-portfolio-caption {
|
||||||
|
visibility: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: -50px;
|
||||||
|
@include transform(translateY(-50%));
|
||||||
|
background: get-color("dark", 0.9);
|
||||||
|
max-width: 70%;
|
||||||
|
padding: 1.5rem 2rem;
|
||||||
|
@include transition(ease-out 0.16s);
|
||||||
|
* {
|
||||||
|
color: white;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
@include breakpoint-less(sm) {
|
||||||
|
left: 50%;
|
||||||
|
@include transform(translate(-50%, -50%));
|
||||||
|
padding: 1rem 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
.hero-portfolio-img {
|
||||||
|
img {
|
||||||
|
@include transform(scale(1.04));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.swiper-wrapper {
|
||||||
|
.swiper-slide {
|
||||||
|
&.swiper-slide-active {
|
||||||
|
.hero-portfolio-caption {
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
531
assets/css/scss/components/_preloader.scss
Normal file
531
assets/css/scss/components/_preloader.scss
Normal file
@@ -0,0 +1,531 @@
|
|||||||
|
//
|
||||||
|
// Preloader Styles //
|
||||||
|
//
|
||||||
|
body {
|
||||||
|
&:after {
|
||||||
|
content: '';
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 998;
|
||||||
|
background: white;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
&.loaded {
|
||||||
|
&:after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.preloader {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 999;
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
|
background: white;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
text-align: center;
|
||||||
|
div {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
@include transform(translate(-50%,-50%));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.loaded {
|
||||||
|
.preloader {
|
||||||
|
visibility: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
@include transition(ease-out 0.3s);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Preloader 1 //
|
||||||
|
//
|
||||||
|
.preloader-1 {
|
||||||
|
div {
|
||||||
|
position: relative;
|
||||||
|
width: 70px;
|
||||||
|
height: 70px;
|
||||||
|
.loader-circular {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
transform-origin: center center;
|
||||||
|
width: 70px;
|
||||||
|
height: 70px;
|
||||||
|
margin: auto;
|
||||||
|
animation: loader-one-rotate 2s linear infinite;
|
||||||
|
}
|
||||||
|
.loader-path {
|
||||||
|
fill: none;
|
||||||
|
stroke: get-color("dark");
|
||||||
|
stroke-width: 2.5;
|
||||||
|
stroke-dasharray: 1, 200;
|
||||||
|
stroke-dashoffset: 0;
|
||||||
|
stroke-linecap: round;
|
||||||
|
stroke-miterlimit: 10;
|
||||||
|
animation: loader-one-dash 1.5s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//
|
||||||
|
// Preloader 1 - Color Options //
|
||||||
|
//
|
||||||
|
.preloader-dark {
|
||||||
|
.preloader-1 {
|
||||||
|
background: black;
|
||||||
|
div {
|
||||||
|
.loader-path {
|
||||||
|
stroke: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.preloader-blue {
|
||||||
|
.preloader-1 {
|
||||||
|
div {
|
||||||
|
.loader-path {
|
||||||
|
stroke: get-color("blue");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.preloader-purple {
|
||||||
|
.preloader-1 {
|
||||||
|
div {
|
||||||
|
.loader-path {
|
||||||
|
stroke: get-color("purple");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.preloader-pink-edge {
|
||||||
|
.preloader-1 {
|
||||||
|
div {
|
||||||
|
.loader-path {
|
||||||
|
stroke: get-color("pink-edge");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.preloader-golden-yellow {
|
||||||
|
.preloader-1 {
|
||||||
|
div {
|
||||||
|
.loader-path {
|
||||||
|
stroke: get-color("golden-yellow");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.preloader-very-peri {
|
||||||
|
.preloader-1 {
|
||||||
|
div {
|
||||||
|
.loader-path {
|
||||||
|
stroke: get-color("very-peri");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.preloader-turquoise {
|
||||||
|
.preloader-1 {
|
||||||
|
div {
|
||||||
|
.loader-path {
|
||||||
|
stroke: get-color("turquoise");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.preloader-spring-red {
|
||||||
|
.preloader-1 {
|
||||||
|
div {
|
||||||
|
.loader-path {
|
||||||
|
stroke: get-color("spring-red");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.preloader-tan {
|
||||||
|
.preloader-1 {
|
||||||
|
div {
|
||||||
|
.loader-path {
|
||||||
|
stroke: get-color("tan");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.preloader-aqua {
|
||||||
|
.preloader-1 {
|
||||||
|
div {
|
||||||
|
.loader-path {
|
||||||
|
stroke: get-color("aqua");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes loader-one-rotate {
|
||||||
|
100% { transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
@keyframes loader-one-dash {
|
||||||
|
0% {
|
||||||
|
stroke-dasharray: 1, 200;
|
||||||
|
stroke-dashoffset: 0;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
stroke-dasharray: 89, 200;
|
||||||
|
stroke-dashoffset: -35px;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
stroke-dasharray: 89, 200;
|
||||||
|
stroke-dashoffset: -124px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Preloader 2 //
|
||||||
|
//
|
||||||
|
.preloader-2 {
|
||||||
|
div {
|
||||||
|
span {
|
||||||
|
display: inline-block;
|
||||||
|
opacity: 0.2;
|
||||||
|
background: black;
|
||||||
|
background: linear-gradient(to right, black 10%, transparent 40%);
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
border-radius: 50%;
|
||||||
|
@include animation(loader-two 0.6s infinite linear);
|
||||||
|
&:before, &:after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
&:before {
|
||||||
|
background: black;
|
||||||
|
width: 50%;
|
||||||
|
height: 50%;
|
||||||
|
border-radius: 100% 0 0 0;
|
||||||
|
}
|
||||||
|
&:after {
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: white;
|
||||||
|
width: 90%;
|
||||||
|
height: 90%;
|
||||||
|
margin: auto;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes loader-two {
|
||||||
|
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
|
||||||
|
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
@-webkit-keyframes loader-two {
|
||||||
|
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
|
||||||
|
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
//
|
||||||
|
// Preloader 2 - Color Options //
|
||||||
|
//
|
||||||
|
.preloader-dark {
|
||||||
|
.preloader-2 {
|
||||||
|
background: black;
|
||||||
|
div {
|
||||||
|
span {
|
||||||
|
background: white;
|
||||||
|
background: linear-gradient(to right, white 10%, transparent 40%);
|
||||||
|
&:before {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
&:after {
|
||||||
|
background: black;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.preloader-blue {
|
||||||
|
.preloader-2 {
|
||||||
|
div {
|
||||||
|
span {
|
||||||
|
background: get-color("blue");
|
||||||
|
background: linear-gradient(to right, get-color("blue") 10%, transparent 40%);
|
||||||
|
&:before {
|
||||||
|
background: get-color("blue");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.preloader-purple {
|
||||||
|
.preloader-2 {
|
||||||
|
div {
|
||||||
|
span {
|
||||||
|
background: get-color("purple");
|
||||||
|
background: linear-gradient(to right, get-color("purple") 10%, transparent 40%);
|
||||||
|
&:before {
|
||||||
|
background: get-color("purple");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.preloader-pink-edge {
|
||||||
|
.preloader-2 {
|
||||||
|
div {
|
||||||
|
span {
|
||||||
|
background: get-color("pink-edge");
|
||||||
|
background: linear-gradient(to right, get-color("pink-edge") 10%, transparent 40%);
|
||||||
|
&:before {
|
||||||
|
background: get-color("pink-edge");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.preloader-golden-yellow {
|
||||||
|
.preloader-2 {
|
||||||
|
div {
|
||||||
|
span {
|
||||||
|
background: get-color("golden-yellow");
|
||||||
|
background: linear-gradient(to right, get-color("golden-yellow") 10%, transparent 40%);
|
||||||
|
&:before {
|
||||||
|
background: get-color("golden-yellow");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.preloader-very-peri {
|
||||||
|
.preloader-2 {
|
||||||
|
div {
|
||||||
|
span {
|
||||||
|
background: get-color("very-peri");
|
||||||
|
background: linear-gradient(to right, get-color("very-peri") 10%, transparent 40%);
|
||||||
|
&:before {
|
||||||
|
background: get-color("very-peri");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.preloader-turquoise {
|
||||||
|
.preloader-2 {
|
||||||
|
div {
|
||||||
|
span {
|
||||||
|
background: get-color("turquoise");
|
||||||
|
background: linear-gradient(to right, get-color("turquoise") 10%, transparent 40%);
|
||||||
|
&:before {
|
||||||
|
background: get-color("turquoise");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.preloader-spring-red {
|
||||||
|
.preloader-2 {
|
||||||
|
div {
|
||||||
|
span {
|
||||||
|
background: get-color("spring-red");
|
||||||
|
background: linear-gradient(to right, get-color("spring-red") 10%, transparent 40%);
|
||||||
|
&:before {
|
||||||
|
background: get-color("spring-red");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.preloader-tan {
|
||||||
|
.preloader-2 {
|
||||||
|
div {
|
||||||
|
span {
|
||||||
|
background: get-color("tan");
|
||||||
|
background: linear-gradient(to right, get-color("tan") 10%, transparent 40%);
|
||||||
|
&:before {
|
||||||
|
background: get-color("tan");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.preloader-aqua {
|
||||||
|
.preloader-2 {
|
||||||
|
div {
|
||||||
|
span {
|
||||||
|
background: get-color("aqua");
|
||||||
|
background: linear-gradient(to right, get-color("aqua") 10%, transparent 40%);
|
||||||
|
&:before {
|
||||||
|
background: get-color("aqua");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Preloader 3 //
|
||||||
|
//
|
||||||
|
.preloader-3 {
|
||||||
|
div {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
span {
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
&:before, &:after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
background: get-color("dark", 0.1);
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
&:before { @include animation(loader-three-bounceIn 1.2s infinite ease-in-out); }
|
||||||
|
&:after { @include animation(loader-three-bounceOut 1.2s infinite ease-in-out); }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-webkit-keyframes loader-three-bounceIn {
|
||||||
|
0%, 100% { -webkit-transform: scale(0); }
|
||||||
|
50% { -webkit-transform: scale(1.0); }
|
||||||
|
}
|
||||||
|
@keyframes loader-three-bounceIn {
|
||||||
|
0%, 100% { -webkit-transform: scale(0); transform: scale(0); }
|
||||||
|
50% { -webkit-transform: scale(1.0); transform: scale(1.0); }
|
||||||
|
}
|
||||||
|
@-webkit-keyframes loader-three-bounceOut {
|
||||||
|
0%, 100% { -webkit-transform: scale(1.0); }
|
||||||
|
50% { -webkit-transform: scale(0); }
|
||||||
|
}
|
||||||
|
@keyframes loader-three-bounceOut {
|
||||||
|
0%, 100% { -webkit-transform: scale(1.0); transform: scale(1.0); }
|
||||||
|
50% { -webkit-transform: scale(0); transform: scale(0); }
|
||||||
|
}
|
||||||
|
//
|
||||||
|
// Preloader 3 - Color Options //
|
||||||
|
//
|
||||||
|
.preloader-dark {
|
||||||
|
.preloader-3 {
|
||||||
|
background: black;
|
||||||
|
div {
|
||||||
|
span {
|
||||||
|
&:before, &:after {
|
||||||
|
background: get-color("white", 0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.preloader-blue {
|
||||||
|
.preloader-3 {
|
||||||
|
div {
|
||||||
|
span {
|
||||||
|
&:before, &:after {
|
||||||
|
background: get-color("blue", 0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.preloader-purple {
|
||||||
|
.preloader-3 {
|
||||||
|
div {
|
||||||
|
span {
|
||||||
|
&:before, &:after {
|
||||||
|
background: get-color("purple", 0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.preloader-pink-edge {
|
||||||
|
.preloader-3 {
|
||||||
|
div {
|
||||||
|
span {
|
||||||
|
&:before, &:after {
|
||||||
|
background: get-color("pink-edge", 0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.preloader-golden-yellow {
|
||||||
|
.preloader-3 {
|
||||||
|
div {
|
||||||
|
span {
|
||||||
|
&:before, &:after {
|
||||||
|
background: get-color("golden-yellow", 0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.preloader-very-peri {
|
||||||
|
.preloader-3 {
|
||||||
|
div {
|
||||||
|
span {
|
||||||
|
&:before, &:after {
|
||||||
|
background: get-color("very-peri", 0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.preloader-turquoise {
|
||||||
|
.preloader-3 {
|
||||||
|
div {
|
||||||
|
span {
|
||||||
|
&:before, &:after {
|
||||||
|
background: get-color("turquoise", 0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.preloader-spring-red {
|
||||||
|
.preloader-3 {
|
||||||
|
div {
|
||||||
|
span {
|
||||||
|
&:before, &:after {
|
||||||
|
background: get-color("spring-red", 0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.preloader-tan {
|
||||||
|
.preloader-3 {
|
||||||
|
div {
|
||||||
|
span {
|
||||||
|
&:before, &:after {
|
||||||
|
background: get-color("tan", 0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.preloader-aqua {
|
||||||
|
.preloader-3 {
|
||||||
|
div {
|
||||||
|
span {
|
||||||
|
&:before, &:after {
|
||||||
|
background: get-color("aqua", 0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
127
assets/css/scss/components/_section.scss
Normal file
127
assets/css/scss/components/_section.scss
Normal file
@@ -0,0 +1,127 @@
|
|||||||
|
//
|
||||||
|
// Sections Styles //
|
||||||
|
//
|
||||||
|
.section-xs {
|
||||||
|
padding: 50px 0;
|
||||||
|
&.bg-image {
|
||||||
|
.container, .container-fluid { padding: 50px 30px; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.section-sm {
|
||||||
|
padding: 70px 0;
|
||||||
|
&.bg-image {
|
||||||
|
.container, .container-fluid { padding: 70px 30px; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.section, .section-md {
|
||||||
|
padding: 100px 0;
|
||||||
|
&.bg-image {
|
||||||
|
.container, .container-fluid { padding: 100px 30px; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.section-lg {
|
||||||
|
padding: 140px 0;
|
||||||
|
&.bg-image {
|
||||||
|
.container, .container-fluid { padding: 140px 30px; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.section-xl {
|
||||||
|
padding: 180px 0;
|
||||||
|
&.bg-image {
|
||||||
|
.container, .container-fluid { padding: 180px 30px; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.section-2xl {
|
||||||
|
padding: 220px 0;
|
||||||
|
&.bg-image {
|
||||||
|
.container, .container-fluid { padding: 220px 30px; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@include breakpoint-less(sm) {
|
||||||
|
.section-xs {
|
||||||
|
padding: 30px 0;
|
||||||
|
&.bg-image {
|
||||||
|
.container, .container-fluid { padding: 30px 30px; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.section-sm {
|
||||||
|
padding: 50px 0;
|
||||||
|
&.bg-image {
|
||||||
|
.container, .container-fluid { padding: 50px 30px; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.section, .section-md {
|
||||||
|
padding: 80px 0;
|
||||||
|
&.bg-image {
|
||||||
|
.container, .container-fluid { padding: 80px 30px; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.section-lg {
|
||||||
|
padding: 110px 0;
|
||||||
|
&.bg-image {
|
||||||
|
.container, .container-fluid { padding: 110px 30px; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.section-xl {
|
||||||
|
padding: 140px 0;
|
||||||
|
&.bg-image {
|
||||||
|
.container, .container-fluid { padding: 140px 30px; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.section-2xl {
|
||||||
|
padding: 170px 0;
|
||||||
|
&.bg-image {
|
||||||
|
.container, .container-fluid { padding: 170px 30px; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@include breakpoint-less(xs) {
|
||||||
|
.section, .section-md {
|
||||||
|
padding: 70px 0;
|
||||||
|
&.bg-image {
|
||||||
|
.container, .container-fluid { padding: 70px 30px; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.section-lg {
|
||||||
|
padding: 90px 0;
|
||||||
|
&.bg-image {
|
||||||
|
.container, .container-fluid { padding: 90px 30px; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.section-xl {
|
||||||
|
padding: 120px 0;
|
||||||
|
&.bg-image {
|
||||||
|
.container, .container-fluid { padding: 120px 30px; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.section-2xl {
|
||||||
|
padding: 150px 0;
|
||||||
|
&.bg-image {
|
||||||
|
.container, .container-fluid { padding: 150px 30px; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.section-xs,
|
||||||
|
.section-sm,
|
||||||
|
.section, .section-md,
|
||||||
|
.section-lg,
|
||||||
|
.section-xl,
|
||||||
|
.section-2xl {
|
||||||
|
&.bg-image {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-fullscreen {
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
.bg-black,
|
||||||
|
[class*='bg-white'],
|
||||||
|
[class*='bg-gray'],
|
||||||
|
[class*='bg-dark'],
|
||||||
|
[class*='bg-gradient'],
|
||||||
|
[class*='bg-color'],
|
||||||
|
.container, .container-fluid {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
27
assets/css/scss/components/_table.scss
Normal file
27
assets/css/scss/components/_table.scss
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
/* Styles for tables */
|
||||||
|
figure.wp-block-table table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 1.25rem;
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
|
||||||
|
thead {
|
||||||
|
background-color: #f8f9fa;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
th, td {
|
||||||
|
border: 1px solid #dee2e6;
|
||||||
|
padding: 0.5rem;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
background-color: #f1f3f5;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
tbody tr:nth-child(odd) {
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
}
|
||||||
|
}
|
||||||
228
assets/css/scss/elements/_accordion.scss
Normal file
228
assets/css/scss/elements/_accordion.scss
Normal file
@@ -0,0 +1,228 @@
|
|||||||
|
//
|
||||||
|
// Accordion styles //
|
||||||
|
//
|
||||||
|
.accordion {
|
||||||
|
list-style-type: none;
|
||||||
|
padding: 0;
|
||||||
|
li {
|
||||||
|
border: 0;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
padding: 0;
|
||||||
|
@include transition(linear 0.1s);
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
.accordion-title {
|
||||||
|
position: relative;
|
||||||
|
border: 1px solid get-color("dark", 0.1);
|
||||||
|
padding: 14px 24px;
|
||||||
|
cursor: pointer;
|
||||||
|
@include transition(linear 0.1s);
|
||||||
|
&:before, &:after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
@include transform(translateY(-50%));
|
||||||
|
background: black;
|
||||||
|
}
|
||||||
|
&:before {
|
||||||
|
right: 24px;
|
||||||
|
width: 11px;
|
||||||
|
height: 1px;
|
||||||
|
}
|
||||||
|
&:after {
|
||||||
|
right: 29px;
|
||||||
|
width: 1px;
|
||||||
|
height: 11px;
|
||||||
|
@include transition(linear 0.1s);
|
||||||
|
}
|
||||||
|
h1,h2,h3,h4,h5,h6 {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
* {
|
||||||
|
@include transition(linear 0.1s);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.accordion-content {
|
||||||
|
overflow: hidden;
|
||||||
|
max-height: 0;
|
||||||
|
padding: 0 25px;
|
||||||
|
@include transition(ease-out 0.2s);
|
||||||
|
&:before {
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
&:after {
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 12px;
|
||||||
|
}
|
||||||
|
ul, ol {
|
||||||
|
li {
|
||||||
|
border: 0;
|
||||||
|
padding: 0;
|
||||||
|
&:last-child {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
list-style-type: disc;
|
||||||
|
ul { list-style-type: circle; }
|
||||||
|
}
|
||||||
|
ol {
|
||||||
|
&.list-ordered {
|
||||||
|
li {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
padding-left: 34px;
|
||||||
|
&:last-child {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.nav {
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.active {
|
||||||
|
.accordion-title {
|
||||||
|
border-color: get-color("dark", 0.9);
|
||||||
|
&:after {
|
||||||
|
@include transform(translateY(-50%) rotate(-90deg));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//
|
||||||
|
// Accordion - Style 2 //
|
||||||
|
//
|
||||||
|
&.style-2 {
|
||||||
|
li {
|
||||||
|
margin-bottom: 14px;
|
||||||
|
padding: 0;
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
.accordion-title {
|
||||||
|
border: 0;
|
||||||
|
border-bottom: 1px solid get-color("dark", 0.2);
|
||||||
|
padding: 0 0 10px;
|
||||||
|
@include transition(linear 0.1s);
|
||||||
|
&:before, &:after {
|
||||||
|
margin-top: -6px;
|
||||||
|
}
|
||||||
|
&:before { right: 0; }
|
||||||
|
&:after { right: 5px; }
|
||||||
|
}
|
||||||
|
.accordion-content {
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
&.active {
|
||||||
|
.accordion-title {
|
||||||
|
border-bottom-color: get-color("dark", 0.9);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//
|
||||||
|
// Accordion - Style 3 //
|
||||||
|
//
|
||||||
|
&.style-3 {
|
||||||
|
li {
|
||||||
|
.accordion-title {
|
||||||
|
background: $bg-gray-lighter;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
.accordion-content {
|
||||||
|
padding: 0 24px;
|
||||||
|
}
|
||||||
|
&.active {
|
||||||
|
.accordion-title {
|
||||||
|
background: $bg-dark;
|
||||||
|
color: get-color("white", 0.8);
|
||||||
|
&:before, &:after {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
h1,h2,h3,h4,h5,h6 {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//
|
||||||
|
// Border Radius //
|
||||||
|
//
|
||||||
|
&.border-radius {
|
||||||
|
&:not(.style-2) {
|
||||||
|
li {
|
||||||
|
.accordion-title {
|
||||||
|
border-radius: 0.375em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.rounded {
|
||||||
|
&:not(.style-2) {
|
||||||
|
li {
|
||||||
|
.accordion-title {
|
||||||
|
border-radius: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
[class*='bg-gray'] {
|
||||||
|
.accordion {
|
||||||
|
&.style-3 {
|
||||||
|
li {
|
||||||
|
.accordion-title {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bg-black,
|
||||||
|
[class*='bg-dark'],
|
||||||
|
[class*='bg-gradient-'],
|
||||||
|
[class*='bg-color-'] {
|
||||||
|
.accordion {
|
||||||
|
li {
|
||||||
|
.accordion-title {
|
||||||
|
border-color: get-color("white", 0.2);
|
||||||
|
&:before, &:after {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.active {
|
||||||
|
.accordion-title {
|
||||||
|
border-color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.style-3 {
|
||||||
|
li {
|
||||||
|
.accordion-title {
|
||||||
|
background: get-color("white", 0.1);
|
||||||
|
}
|
||||||
|
&.active {
|
||||||
|
.accordion-title {
|
||||||
|
background: white;
|
||||||
|
color: $color-primary;
|
||||||
|
&:before, &:after {
|
||||||
|
background: black;
|
||||||
|
}
|
||||||
|
h1,h2,h3,h4,h5,h6 {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
147
assets/css/scss/elements/_box.scss
Normal file
147
assets/css/scss/elements/_box.scss
Normal file
@@ -0,0 +1,147 @@
|
|||||||
|
//
|
||||||
|
// Box Styles //
|
||||||
|
//
|
||||||
|
.box-shadow {
|
||||||
|
@include box-shadow(0 10px 36px 0 rgba(22,24,26,0.1));
|
||||||
|
@include transition(ease-out 0.16s);
|
||||||
|
&:hover {
|
||||||
|
@include box-shadow(0 10px 40px 0 rgba(22,24,26,0.15));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.hover-shadow {
|
||||||
|
@include transition(ease-out 0.16s);
|
||||||
|
&:hover {
|
||||||
|
@include box-shadow(0 10px 36px 0 rgba(22,24,26,0.1));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.hover-float {
|
||||||
|
@include transition(ease-out 0.16s);
|
||||||
|
&:hover {
|
||||||
|
@include transform(translateY(-4px));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.hover-scale {
|
||||||
|
@include transition(ease-out 0.16s);
|
||||||
|
&:hover {
|
||||||
|
@include transform(scale(1.015));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.hover-shrink {
|
||||||
|
@include transition(ease-out 0.16s);
|
||||||
|
&:hover {
|
||||||
|
@include transform(scale(0.985));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.box-backdrop {
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 0.5em;
|
||||||
|
border: 2px solid get-color("dark");
|
||||||
|
@include box-shadow(4px 4px 0 0 get-color("dark"));
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Square box //
|
||||||
|
//
|
||||||
|
[class*="square-box"],
|
||||||
|
[class*="circle-box"] {
|
||||||
|
display: inline-block;
|
||||||
|
text-align: center;
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.square-box-xs {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
line-height: 40px;
|
||||||
|
* {
|
||||||
|
line-height: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.square-box-sm {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
line-height: 50px;
|
||||||
|
* {
|
||||||
|
line-height: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.square-box, .square-box-md {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
line-height: 60px;
|
||||||
|
* {
|
||||||
|
line-height: 60px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.square-box-lg {
|
||||||
|
width: 70px;
|
||||||
|
height: 70px;
|
||||||
|
line-height: 70px;
|
||||||
|
* {
|
||||||
|
line-height: 70px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.square-box-xl {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
line-height: 80px;
|
||||||
|
* {
|
||||||
|
line-height: 80px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Circle Box //
|
||||||
|
//
|
||||||
|
[class*="circle-box"] {
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
.circle-box-xs {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
line-height: 40px;
|
||||||
|
* {
|
||||||
|
line-height: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.circle-box-sm {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
line-height: 50px;
|
||||||
|
* {
|
||||||
|
line-height: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.circle-box, .circle-box-md {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
line-height: 60px;
|
||||||
|
* {
|
||||||
|
line-height: 60px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.circle-box-lg {
|
||||||
|
width: 70px;
|
||||||
|
height: 70px;
|
||||||
|
line-height: 70px;
|
||||||
|
* {
|
||||||
|
line-height: 70px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.circle-box-xl {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
line-height: 80px;
|
||||||
|
* {
|
||||||
|
line-height: 80px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Box border radius //
|
||||||
|
//
|
||||||
|
.border-radius { border-radius: 0.5em; overflow: hidden; }
|
||||||
|
.border-radius-1 { border-radius: 1em; overflow: hidden; }
|
||||||
|
.border-radius-2 { border-radius: 2em; overflow: hidden; }
|
||||||
1258
assets/css/scss/elements/_button.scss
Normal file
1258
assets/css/scss/elements/_button.scss
Normal file
File diff suppressed because it is too large
Load Diff
135
assets/css/scss/elements/_clients.scss
Normal file
135
assets/css/scss/elements/_clients.scss
Normal file
@@ -0,0 +1,135 @@
|
|||||||
|
//
|
||||||
|
// Clients Styles //
|
||||||
|
//
|
||||||
|
.client-box {
|
||||||
|
text-align: center;
|
||||||
|
a {
|
||||||
|
img {
|
||||||
|
opacity: 0.4;
|
||||||
|
@include transition(ease-out 0.16s);
|
||||||
|
}
|
||||||
|
&:hover, &:focus {
|
||||||
|
img {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.owl-carousel {
|
||||||
|
.client-box {
|
||||||
|
img { display: inline-block; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//
|
||||||
|
// Clients Grid //
|
||||||
|
//
|
||||||
|
.clients-grid {
|
||||||
|
list-style-type: none;
|
||||||
|
overflow: hidden;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
text-align: center;
|
||||||
|
li {
|
||||||
|
position: relative;
|
||||||
|
float: left;
|
||||||
|
width: 16.6%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 30px;
|
||||||
|
&:before, &:after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
&:before {
|
||||||
|
top: 0;
|
||||||
|
left: -1px;
|
||||||
|
height: 100%;
|
||||||
|
border-left: 1px dashed get-color("dark", 0.1);
|
||||||
|
}
|
||||||
|
&:after {
|
||||||
|
left: 0;
|
||||||
|
bottom: -1px;
|
||||||
|
width: 100%;
|
||||||
|
border-bottom: 1px dashed get-color("dark", 0.1);
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
img {
|
||||||
|
opacity: 0.4;
|
||||||
|
@include transition(ease-out 0.16s);
|
||||||
|
}
|
||||||
|
&:hover, &:focus {
|
||||||
|
img {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@include breakpoint-less(md) {
|
||||||
|
li { width: 25%; }
|
||||||
|
}
|
||||||
|
@include breakpoint-less(sm) {
|
||||||
|
li { width: 33.3%; }
|
||||||
|
}
|
||||||
|
@include breakpoint-less(xs) {
|
||||||
|
li { width: 50%; }
|
||||||
|
}
|
||||||
|
&.column-5 {
|
||||||
|
li { width: 20%; }
|
||||||
|
@include breakpoint-less(md) {
|
||||||
|
li { width: 25%; }
|
||||||
|
}
|
||||||
|
@include breakpoint-less(sm) {
|
||||||
|
li { width: 33.3%; }
|
||||||
|
}
|
||||||
|
@include breakpoint-less(xs) {
|
||||||
|
li { width: 50%; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.column-4 {
|
||||||
|
li { width: 25%; }
|
||||||
|
@include breakpoint-less(sm) {
|
||||||
|
li { width: 33.3%; }
|
||||||
|
}
|
||||||
|
@include breakpoint-less(xs) {
|
||||||
|
li { width: 50%; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.column-3 {
|
||||||
|
li { width: 33.3%; }
|
||||||
|
@include breakpoint-less(sm) {
|
||||||
|
li { width: 50%; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.column-2 {
|
||||||
|
li { width: 50%; }
|
||||||
|
}
|
||||||
|
//
|
||||||
|
// Border Style - Solid //
|
||||||
|
//
|
||||||
|
&.border-style-solid {
|
||||||
|
border: 0;
|
||||||
|
li {
|
||||||
|
&:before { border-left-style: solid; }
|
||||||
|
&:after { border-bottom-style: solid; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//
|
||||||
|
// Border Style - Dotted //
|
||||||
|
//
|
||||||
|
&.border-style-dotted {
|
||||||
|
border: 0;
|
||||||
|
li {
|
||||||
|
&:before { border-left-style: dotted; }
|
||||||
|
&:after { border-bottom-style: dotted; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bg-black,
|
||||||
|
[class*='bg-dark'],
|
||||||
|
[class*='bg-gradient-'],
|
||||||
|
[class*='bg-color-'] {
|
||||||
|
.clients-grid {
|
||||||
|
li {
|
||||||
|
&:before, &:after { border-color: get-color("white", 0.2); }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
102
assets/css/scss/elements/_feature-box.scss
Normal file
102
assets/css/scss/elements/_feature-box.scss
Normal file
@@ -0,0 +1,102 @@
|
|||||||
|
//
|
||||||
|
// Feature box //
|
||||||
|
//
|
||||||
|
.feature-box {
|
||||||
|
@include display-flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
min-height: 50px;
|
||||||
|
padding-left: 74px;
|
||||||
|
@include breakpoint-less(md) {
|
||||||
|
padding-left: 66px;
|
||||||
|
}
|
||||||
|
.feature-box-icon {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
border-radius: 50%;
|
||||||
|
text-align: center;
|
||||||
|
@include transition(ease-out 0.16s);
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
line-height: 50px;
|
||||||
|
vertical-align: middle;
|
||||||
|
@include transition(ease-out 0.16s);
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
//
|
||||||
|
// Positions //
|
||||||
|
//
|
||||||
|
&.middle {
|
||||||
|
top: 50%;
|
||||||
|
@include transform(translateY(-50%));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
h1,h2,h3,h4,h5,h6 {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
//
|
||||||
|
// Sizes //
|
||||||
|
//
|
||||||
|
&.feature-box-xl {
|
||||||
|
min-height: 70px;
|
||||||
|
padding-left: 94px;
|
||||||
|
@include breakpoint-less(md) {
|
||||||
|
padding-left: 86px;
|
||||||
|
}
|
||||||
|
.feature-box-icon {
|
||||||
|
width: 70px;
|
||||||
|
height: 70px;
|
||||||
|
* {
|
||||||
|
line-height: 70px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.feature-box-lg {
|
||||||
|
min-height: 60px;
|
||||||
|
padding-left: 84px;
|
||||||
|
@include breakpoint-less(md) {
|
||||||
|
padding-left: 80px;
|
||||||
|
}
|
||||||
|
.feature-box-icon {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
* {
|
||||||
|
line-height: 60px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.feature-box-sm {
|
||||||
|
min-height: 40px;
|
||||||
|
padding-left: 64px;
|
||||||
|
@include breakpoint-less(md) {
|
||||||
|
padding-left: 56px;
|
||||||
|
}
|
||||||
|
.feature-box-icon {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
* {
|
||||||
|
line-height: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.feature-box-xs {
|
||||||
|
min-height: 32px;
|
||||||
|
padding-left: 54px;
|
||||||
|
@include breakpoint-less(md) {
|
||||||
|
padding-left: 48px;
|
||||||
|
}
|
||||||
|
.feature-box-icon {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
* {
|
||||||
|
line-height: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
482
assets/css/scss/elements/_hoverbox.scss
Normal file
482
assets/css/scss/elements/_hoverbox.scss
Normal file
@@ -0,0 +1,482 @@
|
|||||||
|
//
|
||||||
|
// Hover box Styles //
|
||||||
|
//
|
||||||
|
[class^="hoverbox"] {
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
@include transform(translate3d(0,0,0));
|
||||||
|
display: inline-block;
|
||||||
|
img {
|
||||||
|
@include transition(transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Hover box - Style 1 //
|
||||||
|
//
|
||||||
|
.hoverbox-1 {
|
||||||
|
&:before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 1;
|
||||||
|
visibility: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
background: get-color("dark", 0.5);
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
@include transition(ease-out 0.12s);
|
||||||
|
}
|
||||||
|
&:hover, &:focus {
|
||||||
|
&:before {
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
@include transform(scale(1.04));
|
||||||
|
}
|
||||||
|
.hover-content {
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.hover-content {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 2;
|
||||||
|
visibility: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
color: get-color("white", 0.7);
|
||||||
|
@include transition(ease-out 0.12s);
|
||||||
|
h1,h2,h3,h4,h5,h6 {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
&.center {
|
||||||
|
top: 50%;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
@include transform(translateY(-50%));
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 5px;
|
||||||
|
padding: 0 30px;
|
||||||
|
&:hover, &:focus {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.bottom {
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
@include transform(translateY(5px));
|
||||||
|
width: 100%;
|
||||||
|
padding: 30px;
|
||||||
|
&:hover, &:focus {
|
||||||
|
@include transform(translateY(0));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Hover box - Style 2 //
|
||||||
|
//
|
||||||
|
.hoverbox-2 {
|
||||||
|
&:before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 16px;
|
||||||
|
right: 16px;
|
||||||
|
bottom: 16px;
|
||||||
|
left: 16px;
|
||||||
|
@include transform(scale(0.99));
|
||||||
|
z-index: 1;
|
||||||
|
visibility: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
background: get-color("white", 0.9);
|
||||||
|
backdrop-filter: blur(5px);
|
||||||
|
@include transition(ease-out 0.12s);
|
||||||
|
}
|
||||||
|
.hover-content {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
right: 16px;
|
||||||
|
left: 16px;
|
||||||
|
@include transform(translateY(-50%));
|
||||||
|
z-index: 2;
|
||||||
|
visibility: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
margin-top: 4px;
|
||||||
|
padding: 0 30px;
|
||||||
|
@include transition(ease-out 0.12s);
|
||||||
|
@include breakpoint-less(md) {
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:hover, &:focus {
|
||||||
|
&:before {
|
||||||
|
@include transform(scale(1));
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
@include transform(scale(1.04));
|
||||||
|
}
|
||||||
|
.hover-content {
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hoverbox-2,
|
||||||
|
.hoverbox-3 {
|
||||||
|
.hover-content {
|
||||||
|
color: $color-primary;
|
||||||
|
h1,h2,h3,h4,h5,h6 { color: get-color("dark"); }
|
||||||
|
a {
|
||||||
|
&:not([class^='button']) {
|
||||||
|
color: get-color("dark", 0.9);
|
||||||
|
&:hover, &:focus { color: get-color("dark"); }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Hover box - Style 3 //
|
||||||
|
//
|
||||||
|
.hoverbox-3 {
|
||||||
|
.hover-content {
|
||||||
|
position: absolute;
|
||||||
|
right: 16px;
|
||||||
|
bottom: 16px;
|
||||||
|
left: 16px;
|
||||||
|
@include transform(translateY(4px));
|
||||||
|
z-index: 1;
|
||||||
|
visibility: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
background: get-color("white", 0.9);
|
||||||
|
backdrop-filter: blur(5px);
|
||||||
|
padding: 30px;
|
||||||
|
@include transition(ease-out 0.12s);
|
||||||
|
@include breakpoint-less(md) {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:hover, &:focus {
|
||||||
|
img {
|
||||||
|
@include transform(scale(1.04));
|
||||||
|
}
|
||||||
|
.hover-content {
|
||||||
|
@include transform(translateY(0));
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Hover box - Style 4 //
|
||||||
|
//
|
||||||
|
.hoverbox-4 {
|
||||||
|
&:after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
background: get-color("dark", 0.4);
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
@include transition(ease-out 0.12s);
|
||||||
|
}
|
||||||
|
.content,
|
||||||
|
.hover-content {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
color: get-color("white", 0.7);
|
||||||
|
@include transition(ease-out 0.12s);
|
||||||
|
h1,h2,h3,h4,h5,h6 {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.hover-content {
|
||||||
|
visibility: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
&:hover, &:focus {
|
||||||
|
&:after {
|
||||||
|
background: get-color("dark", 0.5);
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
@include transform(scale(1.04));
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
visibility: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
.hover-content {
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.hoverbox-4 {
|
||||||
|
&.center {
|
||||||
|
.content,
|
||||||
|
.hover-content {
|
||||||
|
top: 50%;
|
||||||
|
left: 0;
|
||||||
|
@include transform(translateY(-50%));
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 30px;
|
||||||
|
}
|
||||||
|
.hover-content {
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
&:hover, &:focus {
|
||||||
|
.content {
|
||||||
|
margin-top: -5px;
|
||||||
|
}
|
||||||
|
.hover-content {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.bottom {
|
||||||
|
.content,
|
||||||
|
.hover-content {
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
padding: 30px;
|
||||||
|
}
|
||||||
|
.hover-content {
|
||||||
|
@include transform(translateY(5px));
|
||||||
|
}
|
||||||
|
&:hover, &:focus {
|
||||||
|
.content {
|
||||||
|
@include transform(translateY(-5px));
|
||||||
|
}
|
||||||
|
.hover-content {
|
||||||
|
@include transform(translateY(0));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Hover box - Style 5 //
|
||||||
|
//
|
||||||
|
.hoverbox-5 {
|
||||||
|
&:after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
background: get-color("dark", 0.4);
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
@include transition(ease-out 0.12s);
|
||||||
|
}
|
||||||
|
.content,
|
||||||
|
.hover-content {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
padding: 30px;
|
||||||
|
color: get-color("white", 0.7);
|
||||||
|
h1,h2,h3,h4,h5,h6 {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
.hover-content {
|
||||||
|
bottom: 0;
|
||||||
|
@include transform(translateY(5px));
|
||||||
|
visibility: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
@include transition(ease-out 0.12s);
|
||||||
|
}
|
||||||
|
&:hover, &:focus {
|
||||||
|
&:after {
|
||||||
|
background: get-color("dark", 0.5);
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
@include transform(scale(1.04));
|
||||||
|
}
|
||||||
|
.hover-content {
|
||||||
|
@include transform(translateY(0));
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Hover box - Style 6 //
|
||||||
|
//
|
||||||
|
.hoverbox-6 {
|
||||||
|
a {
|
||||||
|
display: block;
|
||||||
|
&:before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 1;
|
||||||
|
opacity: 0;
|
||||||
|
background: get-color("white", 0.1);
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
@include transition(ease-out 0.12s);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 2;
|
||||||
|
display: inline-block;
|
||||||
|
background: get-color("white", 0.9);
|
||||||
|
backdrop-filter: blur(5px);
|
||||||
|
padding: 10px 16px;
|
||||||
|
color: get-color("dark", 0.9);
|
||||||
|
h1,h2,h3,h4,h5,h6 {
|
||||||
|
margin: 0;
|
||||||
|
color: get-color("dark", 0.9);
|
||||||
|
}
|
||||||
|
&.top {
|
||||||
|
top: 16px;
|
||||||
|
left: 16px;
|
||||||
|
}
|
||||||
|
&.center {
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
@include transform(translate(-50%, -50%));
|
||||||
|
}
|
||||||
|
&.bottom {
|
||||||
|
bottom: 16px;
|
||||||
|
left: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:hover, &:focus {
|
||||||
|
a {
|
||||||
|
&:before {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
@include transform(scale(1.04));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hoverbox-7 {
|
||||||
|
&:before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 1;
|
||||||
|
visibility: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
background-image: linear-gradient(0deg, get-color("dark", 0.5) 0%, get-color("dark", 0.1) 100%);
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
@include transition(ease-out 0.12s);
|
||||||
|
}
|
||||||
|
.hover-content {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 2;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
color: get-color("white", 0.7);
|
||||||
|
h1,h2,h3,h4,h5,h6 {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.top {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
-webkit-transform: translateY(5px);
|
||||||
|
transform: translateY(5px);
|
||||||
|
opacity: 0;
|
||||||
|
padding: 30px;
|
||||||
|
@include transition(ease-out 0.12s);
|
||||||
|
}
|
||||||
|
.bottom {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
-webkit-transform: translateY(5px);
|
||||||
|
transform: translateY(5px);
|
||||||
|
opacity: 0;
|
||||||
|
padding: 30px;
|
||||||
|
@include transition(ease-out 0.12s);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:hover, &:focus {
|
||||||
|
&:before {
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
@include transform(scale(1.04));
|
||||||
|
}
|
||||||
|
.hover-content {
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
|
.top, .bottom {
|
||||||
|
-webkit-transform: translateY(0);
|
||||||
|
transform: translateY(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.top { @include transition-delay(0.05s); }
|
||||||
|
.bottom { @include transition-delay(0.10s); }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hoverbox-1,
|
||||||
|
.hoverbox-2,
|
||||||
|
.hoverbox-4,
|
||||||
|
.hoverbox-5,
|
||||||
|
.hoverbox-7 {
|
||||||
|
a {
|
||||||
|
&:not([class^='button']) {
|
||||||
|
color: get-color("white", 0.7);
|
||||||
|
&:hover, &:focus { color: white; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
&.button-text-1,
|
||||||
|
&.button-text-2,
|
||||||
|
&.button-text-3 {
|
||||||
|
color: get-color("white", 0.8);
|
||||||
|
&:hover {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.button-text-1 {
|
||||||
|
&:before { background: get-color("white", 0.3); }
|
||||||
|
&:after { background: white; }
|
||||||
|
}
|
||||||
|
&.button-text-2 {
|
||||||
|
&:before { background: get-color("white", 0.4); }
|
||||||
|
&:after { background: white; }
|
||||||
|
}
|
||||||
|
&.button-text-3 {
|
||||||
|
&:before { background: get-color("white", 0.8); }
|
||||||
|
&:hover {
|
||||||
|
&:before { background: white; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
180
assets/css/scss/elements/_lightbox.scss
Normal file
180
assets/css/scss/elements/_lightbox.scss
Normal file
@@ -0,0 +1,180 @@
|
|||||||
|
//
|
||||||
|
// Lightbox Styles //
|
||||||
|
//
|
||||||
|
.lightbox-image-box,
|
||||||
|
.lightbox-media-box {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
display: block;
|
||||||
|
&[class*='border-radius'] {
|
||||||
|
@include transform(translate3d(0,0,0));
|
||||||
|
}
|
||||||
|
&:after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
opacity: 0;
|
||||||
|
background: get-color("dark", 0.1);
|
||||||
|
@include transition(ease-out 0.12s);
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
@include transform(scale(1));
|
||||||
|
@include transition(transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1));
|
||||||
|
}
|
||||||
|
i {
|
||||||
|
z-index: 1;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
@include transform(translate(-50%, -50%));
|
||||||
|
background: get-color("dark", 0.6);
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
border-radius: 50%;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 60px;
|
||||||
|
color: get-color("white", 0.9);
|
||||||
|
@include transition(ease-out 0.16s);
|
||||||
|
}
|
||||||
|
&.icon-xl, &.icon-2xl {
|
||||||
|
i {
|
||||||
|
width: 70px;
|
||||||
|
height: 70px;
|
||||||
|
line-height: 70px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.icon-3xl, &.icon-4xl, &.icon-5xl {
|
||||||
|
i {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
line-height: 80px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
&:after {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
@include transform(scale(1.04));
|
||||||
|
}
|
||||||
|
i {
|
||||||
|
@include transform(translate(-50%, -50%) scale(0.94));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mfp-bg {
|
||||||
|
background: black;
|
||||||
|
}
|
||||||
|
.mfp-container,
|
||||||
|
.mfp-bg {
|
||||||
|
opacity: 0;
|
||||||
|
-webkit-backface-visibility: hidden;
|
||||||
|
backface-visibility: hidden;
|
||||||
|
@include transition(ease-out 0.16s);
|
||||||
|
}
|
||||||
|
.mfp-container {
|
||||||
|
@include transform(scale(0.98));
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
.mfp-ready {
|
||||||
|
.mfp-container {
|
||||||
|
@include transform(scale(1));
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
&.mfp-bg {
|
||||||
|
opacity: 0.97;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.mfp-removing {
|
||||||
|
.mfp-container,
|
||||||
|
&.mfp-bg {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
.mfp-container {
|
||||||
|
@include transform(scale(0.98));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
&.mfp-close {
|
||||||
|
display: block;
|
||||||
|
top: -5px;
|
||||||
|
opacity: 1;
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
line-height: auto;
|
||||||
|
font-size: 24px;
|
||||||
|
@include transition(linear 0.1s);
|
||||||
|
&:hover {
|
||||||
|
top: -5px;
|
||||||
|
opacity: 1;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.mfp-iframe-holder {
|
||||||
|
.mfp-close {
|
||||||
|
top: -45px;
|
||||||
|
&:hover { top: -45px; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.mfp-close-btn-in {
|
||||||
|
.mfp-close {
|
||||||
|
color: rgba(255, 255, 255, 0.7);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mfp-arrow {
|
||||||
|
@include transition(linear 0.1s);
|
||||||
|
}
|
||||||
|
.mfp-arrow-left {
|
||||||
|
&:before { border-right: 0; }
|
||||||
|
}
|
||||||
|
.mfp-arrow-right {
|
||||||
|
&:before { border-left: 0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@include breakpoint-less(xs) {
|
||||||
|
button.mfp-arrow {
|
||||||
|
background: get-color("dark", 0.5);
|
||||||
|
width: 70px;
|
||||||
|
height: 70px;
|
||||||
|
margin-top: -35px;
|
||||||
|
&:active {
|
||||||
|
margin-top: -35px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
button.mfp-arrow-left {
|
||||||
|
margin-left: 20px;
|
||||||
|
&:before, &:after {
|
||||||
|
margin-top: 15px;
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
button.mfp-arrow-right {
|
||||||
|
margin-right: 20px;
|
||||||
|
&:before, &:after {
|
||||||
|
margin-top: 15px;
|
||||||
|
margin-left: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mfp-bottom-bar {
|
||||||
|
margin-top: -30px;
|
||||||
|
.mfp-title {
|
||||||
|
color: get-color("white", 0.7);
|
||||||
|
}
|
||||||
|
.mfp-counter {
|
||||||
|
color: get-color("white", 0.6);
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mfp-iframe-scaler iframe, .mfp-figure::after {
|
||||||
|
@include box-shadow(0 0 14px 0 rgba(0,0,0,0.3));
|
||||||
|
}
|
||||||
16
assets/css/scss/elements/_map.scss
Normal file
16
assets/css/scss/elements/_map.scss
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
//
|
||||||
|
// Google Map Styles //
|
||||||
|
//
|
||||||
|
.gmap { width: 100%; }
|
||||||
|
.gmap-xs { height: 300px; }
|
||||||
|
.gmap-sm { height: 350px; }
|
||||||
|
.gmap-md { height: 400px; }
|
||||||
|
.gmap-lg { height: 470px; }
|
||||||
|
.gmap-xl { height: 550px; }
|
||||||
|
@include breakpoint-less(md) {
|
||||||
|
.gmap-xs { height: 250px; }
|
||||||
|
.gmap-sm { height: 300px; }
|
||||||
|
.gmap-md { height: 350px; }
|
||||||
|
.gmap-lg { height: 400px; }
|
||||||
|
.gmap-xl { height: 450px; }
|
||||||
|
}
|
||||||
34
assets/css/scss/elements/_page-scroll-progress.scss
Normal file
34
assets/css/scss/elements/_page-scroll-progress.scss
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
//
|
||||||
|
// Page Scroll Progress //
|
||||||
|
//
|
||||||
|
.page-progress-container {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 999;
|
||||||
|
width: 100%;
|
||||||
|
height: 4px;
|
||||||
|
}
|
||||||
|
.page-progress-bar {
|
||||||
|
height: 4px;
|
||||||
|
width: 0%;
|
||||||
|
background-image: $gradient-1;
|
||||||
|
&.page-progress-gradient-2 {
|
||||||
|
background-image: $gradient-2;
|
||||||
|
}
|
||||||
|
&.page-progress-gradient-3 {
|
||||||
|
background-image: $gradient-3;
|
||||||
|
}
|
||||||
|
&.page-progress-gradient-4 {
|
||||||
|
background-image: $gradient-4;
|
||||||
|
}
|
||||||
|
&.page-progress-gradient-5 {
|
||||||
|
background-image: $gradient-5;
|
||||||
|
}
|
||||||
|
&.page-progress-gradient-6 {
|
||||||
|
background-image: $gradient-6;
|
||||||
|
}
|
||||||
|
&.page-progress-gradient-7 {
|
||||||
|
background-image: $gradient-7;
|
||||||
|
}
|
||||||
|
}
|
||||||
22
assets/css/scss/elements/_pie-chart.scss
Normal file
22
assets/css/scss/elements/_pie-chart.scss
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
//
|
||||||
|
// Pie Chart styles //
|
||||||
|
//
|
||||||
|
.pie-chart {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.pie-chart-content {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 0;
|
||||||
|
@include transform(translateY(-50%));
|
||||||
|
width: 100%;
|
||||||
|
margin-top: -3px;
|
||||||
|
padding: 0 20px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.pie-chart-content .percent {
|
||||||
|
&::after {
|
||||||
|
content: '%';
|
||||||
|
}
|
||||||
|
}
|
||||||
109
assets/css/scss/elements/_progress-bar.scss
Normal file
109
assets/css/scss/elements/_progress-bar.scss
Normal file
@@ -0,0 +1,109 @@
|
|||||||
|
//
|
||||||
|
// Animated Progress bar Styles //
|
||||||
|
//
|
||||||
|
.progress-box {
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.animated-progress {
|
||||||
|
position: relative;
|
||||||
|
background: get-color("dark", 0.1);
|
||||||
|
height: 5px;
|
||||||
|
margin-top: 2px;
|
||||||
|
border-radius: 3px;
|
||||||
|
div {
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
background: get-color("dark");
|
||||||
|
width: 50%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 3px;
|
||||||
|
color: get-color("dark");
|
||||||
|
@include transition(width 0.7s cubic-bezier(0.165, 0.84, 0.44, 1));
|
||||||
|
@include transition-delay(0.1s);
|
||||||
|
&::after {
|
||||||
|
content: attr(data-progress) '%';
|
||||||
|
position: absolute;
|
||||||
|
top: -24px;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.progress-blue {
|
||||||
|
.animated-progress {
|
||||||
|
div {
|
||||||
|
background: $bg-color-blue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.progress-purple {
|
||||||
|
.animated-progress {
|
||||||
|
div {
|
||||||
|
background: $bg-color-purple;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.progress-pink-edge {
|
||||||
|
.animated-progress {
|
||||||
|
div {
|
||||||
|
background: $bg-color-pink-edge;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.progress-golden-yellow {
|
||||||
|
.animated-progress {
|
||||||
|
div {
|
||||||
|
background: $bg-color-golden-yellow;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.progress-very-peri {
|
||||||
|
.animated-progress {
|
||||||
|
div {
|
||||||
|
background: $bg-color-very-peri;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.progress-turquoise {
|
||||||
|
.animated-progress {
|
||||||
|
div {
|
||||||
|
background: $bg-color-turquoise;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.progress-spring-red {
|
||||||
|
.animated-progress {
|
||||||
|
div {
|
||||||
|
background: $bg-color-spring-red;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.progress-tan {
|
||||||
|
.animated-progress {
|
||||||
|
div {
|
||||||
|
background: $bg-color-tan;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.progress-aqua {
|
||||||
|
.animated-progress {
|
||||||
|
div {
|
||||||
|
background: $bg-color-aqua;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bg-black,
|
||||||
|
[class*='bg-dark'],
|
||||||
|
[class*='bg-gradient-'],
|
||||||
|
[class*='bg-color-'] {
|
||||||
|
.progress-box {
|
||||||
|
.animated-progress {
|
||||||
|
background: get-color("white", 0.3);
|
||||||
|
div {
|
||||||
|
background: white;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
98
assets/css/scss/elements/_section-divider.scss
Normal file
98
assets/css/scss/elements/_section-divider.scss
Normal file
@@ -0,0 +1,98 @@
|
|||||||
|
//
|
||||||
|
// Section Dividers //
|
||||||
|
//
|
||||||
|
[class*='section-divider-'] {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
&:before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.section-divider-waves-top {
|
||||||
|
&:before {
|
||||||
|
top: -1px;
|
||||||
|
left: 0;
|
||||||
|
@include transform(rotate(180deg));
|
||||||
|
background-image: url(../../assets/svg/waves.svg);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
width: 100%;
|
||||||
|
height: 70px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.section-divider-waves-bottom {
|
||||||
|
&:before {
|
||||||
|
bottom: -1px;
|
||||||
|
left: 0;
|
||||||
|
background-image: url(../../assets/svg/waves.svg);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
width: 100%;
|
||||||
|
height: 70px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.section-divider-wavesOpacity-top {
|
||||||
|
&:before {
|
||||||
|
top: -1px;
|
||||||
|
left: -5%;
|
||||||
|
background-image: url(../../assets/svg/wavesOpacity.svg);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
width: 110%;
|
||||||
|
height: 70px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.section-divider-wavesOpacity-bottom {
|
||||||
|
&:before {
|
||||||
|
bottom: -1px;
|
||||||
|
left: -5%;
|
||||||
|
@include transform(rotate(180deg));
|
||||||
|
background-image: url(../../assets/svg/wavesOpacity.svg);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
width: 110%;
|
||||||
|
height: 70px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.section-divider-curve-top {
|
||||||
|
&:before {
|
||||||
|
top: 0;
|
||||||
|
left: -5%;
|
||||||
|
@include transform(rotate(180deg));
|
||||||
|
background-image: url(../../assets/svg/curve.svg);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
width: 110%;
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.section-divider-curve-bottom {
|
||||||
|
&:before {
|
||||||
|
bottom: 0;
|
||||||
|
left: -5%;
|
||||||
|
background-image: url(../../assets/svg/curve.svg);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
width: 110%;
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@include breakpoint-less(md) {
|
||||||
|
.section-divider-waves-top,
|
||||||
|
.section-divider-waves-bottom {
|
||||||
|
&:before {
|
||||||
|
left: -20%;
|
||||||
|
width: 140%;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.section-divider-wavesOpacity-top,
|
||||||
|
.section-divider-wavesOpacity-bottom {
|
||||||
|
&:before {
|
||||||
|
left: -25%;
|
||||||
|
width: 150%;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.section-divider-curve-top,
|
||||||
|
.section-divider-curve-bottom {
|
||||||
|
&:before {
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
715
assets/css/scss/elements/_slider.scss
Normal file
715
assets/css/scss/elements/_slider.scss
Normal file
@@ -0,0 +1,715 @@
|
|||||||
|
//
|
||||||
|
// Slider styles //
|
||||||
|
//
|
||||||
|
.owl-carousel {
|
||||||
|
&[data-owl-nav="true"] {
|
||||||
|
&:not([class*='owl-nav-']) {
|
||||||
|
padding: 0 56px;
|
||||||
|
@include breakpoint-less(md) {
|
||||||
|
padding: 0 48px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.owl-item {
|
||||||
|
img { width: auto; }
|
||||||
|
}
|
||||||
|
.owl-nav {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
@include transform(translateY(-50%));
|
||||||
|
z-index: -1;
|
||||||
|
height: 36px;
|
||||||
|
button {
|
||||||
|
&.owl-prev { left: 0; }
|
||||||
|
&.owl-next { right: 0; }
|
||||||
|
&.owl-next, &.owl-prev {
|
||||||
|
position: absolute;
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
border-radius: 50%;
|
||||||
|
color: get-color("dark", 0.6);
|
||||||
|
@include transition(ease-out 0.16s);
|
||||||
|
i {
|
||||||
|
font-size: 1.3em;
|
||||||
|
line-height: 36px;
|
||||||
|
}
|
||||||
|
&:hover, &:focus {
|
||||||
|
background: $bg-gray;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@include breakpoint-less(md) {
|
||||||
|
height: 32px;
|
||||||
|
button {
|
||||||
|
&.owl-next, &.owl-prev {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
i {
|
||||||
|
font-size: 1em;
|
||||||
|
line-height: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.owl-nav-left, &.owl-nav-right {
|
||||||
|
.owl-nav {
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.owl-dots {
|
||||||
|
margin-top: 20px;
|
||||||
|
margin-right: -2px;
|
||||||
|
margin-left: -2px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 0;
|
||||||
|
@include breakpoint-less(md) {
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
.owl-dot {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
margin: 0 2px;
|
||||||
|
vertical-align: middle;
|
||||||
|
&:before, &:after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 50%;
|
||||||
|
@include transition(ease-out 0.16s);
|
||||||
|
}
|
||||||
|
&:before {
|
||||||
|
top: 2px;
|
||||||
|
right: 2px;
|
||||||
|
bottom: 2px;
|
||||||
|
left: 2px;
|
||||||
|
opacity: 0;
|
||||||
|
background: transparent;
|
||||||
|
border: 1px solid black;
|
||||||
|
}
|
||||||
|
&:after {
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
@include transform(translate(-50%,-50%));
|
||||||
|
opacity: 0.3;
|
||||||
|
background: black;
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
}
|
||||||
|
&:hover, &:focus, &.active {
|
||||||
|
&:after {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.active {
|
||||||
|
&:before, &:after {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
&:before {
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:not([data-owl-dots="false"], [class*='owl-dots-over']) {
|
||||||
|
.owl-nav {
|
||||||
|
margin-top: -20px;
|
||||||
|
@include breakpoint-less(md) {
|
||||||
|
margin-top: -18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bg-black,
|
||||||
|
[class*='bg-dark'],
|
||||||
|
[class*='bg-gradient-'],
|
||||||
|
[class*='bg-color-'] {
|
||||||
|
.owl-carousel {
|
||||||
|
&:not([class*='owl-dots-over'], [class*='owl-nav-over']) {
|
||||||
|
.owl-nav {
|
||||||
|
button {
|
||||||
|
&.owl-next, &.owl-prev {
|
||||||
|
color: get-color("white", 0.7);
|
||||||
|
&:hover, &:focus {
|
||||||
|
background: get-color("white", 0.15);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.owl-dots {
|
||||||
|
.owl-dot {
|
||||||
|
&:before { border-color: white; }
|
||||||
|
&:after { background: white; opacity: 0.5; }
|
||||||
|
&:hover, &:focus, &.active {
|
||||||
|
&:after {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
[class*='bg-gray'],
|
||||||
|
[class*='bg-light'] {
|
||||||
|
.owl-carousel {
|
||||||
|
.owl-nav {
|
||||||
|
button {
|
||||||
|
&.owl-next, &.owl-prev {
|
||||||
|
&:hover, &:focus {
|
||||||
|
background: get-color("dark", 0.05);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Owl Nav - Left, Right //
|
||||||
|
//
|
||||||
|
.owl-carousel {
|
||||||
|
&.owl-nav-left,
|
||||||
|
&.owl-nav-right {
|
||||||
|
.owl-nav {
|
||||||
|
height: auto;
|
||||||
|
button {
|
||||||
|
position: static;
|
||||||
|
display: block;
|
||||||
|
margin: 8px 0;
|
||||||
|
&.owl-prev, &.owl-next {
|
||||||
|
right: auto;
|
||||||
|
left: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.owl-nav-left {
|
||||||
|
padding: 0 0 0 56px;
|
||||||
|
@include breakpoint-less(md) {
|
||||||
|
padding: 0 0 0 48px;
|
||||||
|
}
|
||||||
|
.owl-nav {
|
||||||
|
right: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.owl-nav-right {
|
||||||
|
padding: 0 56px 0 0;
|
||||||
|
@include breakpoint-less(md) {
|
||||||
|
padding: 0 48px 0 0;
|
||||||
|
}
|
||||||
|
.owl-nav {
|
||||||
|
left: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Owl Nav Overlay //
|
||||||
|
//
|
||||||
|
.owl-carousel {
|
||||||
|
&.owl-nav-overlay {
|
||||||
|
.owl-nav {
|
||||||
|
z-index: 1;
|
||||||
|
padding-bottom: 0;
|
||||||
|
button {
|
||||||
|
&.owl-next, &.owl-prev {
|
||||||
|
opacity: 1;
|
||||||
|
background: get-color("dark", 0.3);
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 50%;
|
||||||
|
color: get-color("white", 0.8);
|
||||||
|
text-align: center;
|
||||||
|
i {
|
||||||
|
line-height: 50px;
|
||||||
|
}
|
||||||
|
&:hover, &:focus {
|
||||||
|
opacity: 1;
|
||||||
|
background: get-color("dark", 0.4);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@include breakpoint-above(lg) {
|
||||||
|
.owl-nav {
|
||||||
|
opacity: 0;
|
||||||
|
@include transition(ease-out 0.16s);
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
.owl-nav { opacity: 1; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@include breakpoint-less(md) {
|
||||||
|
.owl-nav {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.owl-nav-overlay {
|
||||||
|
.owl-nav {
|
||||||
|
height: 50px;
|
||||||
|
button {
|
||||||
|
&.owl-prev { left: 20px; }
|
||||||
|
&.owl-next { right: 20px; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:not([data-owl-dots="false"], [class*='owl-dots-over']) {
|
||||||
|
.owl-nav {
|
||||||
|
margin-top: -20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Owl Dots - Left, Right //
|
||||||
|
//
|
||||||
|
.owl-carousel {
|
||||||
|
&.owl-dots-left {
|
||||||
|
.owl-dots { text-align: left; }
|
||||||
|
}
|
||||||
|
&.owl-dots-right {
|
||||||
|
.owl-dots { text-align: right; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Owl Dots Overlay //
|
||||||
|
//
|
||||||
|
.owl-carousel {
|
||||||
|
&.owl-dots-overlay {
|
||||||
|
.owl-dots {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 20px;
|
||||||
|
background: get-color("dark", 0.3);
|
||||||
|
border-radius: 20px;
|
||||||
|
margin: 0;
|
||||||
|
padding: 5px;
|
||||||
|
@include breakpoint-less(md) {
|
||||||
|
bottom: 16px;
|
||||||
|
}
|
||||||
|
.owl-dot {
|
||||||
|
&:before { border-color: white; }
|
||||||
|
&:after { background: white; opacity: 0.5; }
|
||||||
|
&:hover, &:focus, &.active {
|
||||||
|
&:after {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.owl-dots-overlay {
|
||||||
|
.owl-dots {
|
||||||
|
right: auto;
|
||||||
|
left: 50%;
|
||||||
|
@include transform(translateX(-50%));
|
||||||
|
}
|
||||||
|
&.owl-nav-overlap-right {
|
||||||
|
.owl-dots {
|
||||||
|
margin-left: -12.5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.owl-nav-left {
|
||||||
|
.owl-dots {
|
||||||
|
margin-left: 28px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.owl-nav-right {
|
||||||
|
.owl-dots {
|
||||||
|
margin-left: -28px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@include breakpoint-above(lg) {
|
||||||
|
&.owl-nav-overlap-left {
|
||||||
|
.owl-dots {
|
||||||
|
margin-left: 12.5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@include breakpoint-less(md) {
|
||||||
|
&.owl-nav-overlap-left, &.owl-nav-overlap-right {
|
||||||
|
.owl-dots {
|
||||||
|
margin-left: -10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Owl Dots Overlap //
|
||||||
|
//
|
||||||
|
.owl-carousel {
|
||||||
|
&.owl-dots-overlap,
|
||||||
|
&.owl-dots-overlap-left,
|
||||||
|
&.owl-dots-overlap-right {
|
||||||
|
.owl-dots {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
background: white;
|
||||||
|
border-radius: 20px;
|
||||||
|
@include box-shadow(0 6px 30px 0 rgba(22,24,26,0.13));
|
||||||
|
margin: 0;
|
||||||
|
padding: 5px;
|
||||||
|
&:hover, &:focus {
|
||||||
|
@include box-shadow(0 6px 36px 0 rgba(22,24,26,0.19));
|
||||||
|
}
|
||||||
|
.owl-dot {
|
||||||
|
&:before { border-color: get-color("dark"); }
|
||||||
|
&:after { background: get-color("dark"); opacity: 0.3; }
|
||||||
|
&:hover, &:focus, &.active {
|
||||||
|
&:after {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.owl-dots-overlap {
|
||||||
|
.owl-dots {
|
||||||
|
right: auto;
|
||||||
|
left: 50%;
|
||||||
|
@include transform(translateY(50%) translateX(-50%));
|
||||||
|
}
|
||||||
|
&.owl-nav-left {
|
||||||
|
.owl-dots {
|
||||||
|
margin-left: 28px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.owl-nav-right {
|
||||||
|
.owl-dots {
|
||||||
|
margin-left: -28px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.owl-nav-overlap-right {
|
||||||
|
.owl-dots {
|
||||||
|
margin-left: -12.5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@include breakpoint-above(lg) {
|
||||||
|
&.owl-nav-overlap-left {
|
||||||
|
.owl-dots {
|
||||||
|
margin-left: 12.5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.owl-dots-overlap-left,
|
||||||
|
&.owl-dots-overlap-right {
|
||||||
|
.owl-dots {
|
||||||
|
@include transform(translateY(50%));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.owl-dots-overlap-left {
|
||||||
|
.owl-dots {
|
||||||
|
right: auto;
|
||||||
|
left: 20px;
|
||||||
|
@include breakpoint-less(md) {
|
||||||
|
left: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&[data-owl-nav="true"], &.owl-nav-left {
|
||||||
|
&:not(.owl-nav-right, [class*='owl-nav-over']) {
|
||||||
|
.owl-dots {
|
||||||
|
left: 76px;
|
||||||
|
@include breakpoint-less(md) {
|
||||||
|
left: 64px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.owl-nav-overlap {
|
||||||
|
.owl-dots {
|
||||||
|
left: 45px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@include breakpoint-above(lg) {
|
||||||
|
&.owl-nav-overlap-left {
|
||||||
|
.owl-dots {
|
||||||
|
left: 45px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.owl-dots-overlap-right {
|
||||||
|
.owl-dots {
|
||||||
|
right: 20px;
|
||||||
|
left: auto;
|
||||||
|
@include breakpoint-less(md) {
|
||||||
|
right: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&[data-owl-nav="true"], &.owl-nav-right {
|
||||||
|
&:not(.owl-nav-left, [class*='owl-nav-over']) {
|
||||||
|
.owl-dots {
|
||||||
|
right: 76px;
|
||||||
|
@include breakpoint-less(md) {
|
||||||
|
right: 64px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.owl-nav-overlap, &.owl-nav-overlap-right {
|
||||||
|
.owl-dots {
|
||||||
|
right: 45px;
|
||||||
|
@include breakpoint-less(md) {
|
||||||
|
right: 36px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Owl Nav Overlap //
|
||||||
|
//
|
||||||
|
.owl-carousel {
|
||||||
|
&.owl-nav-overlap {
|
||||||
|
padding: 0 25px;
|
||||||
|
.owl-nav {
|
||||||
|
right: 25px;
|
||||||
|
left: 25px;
|
||||||
|
z-index: 1;
|
||||||
|
height: 50px;
|
||||||
|
button {
|
||||||
|
opacity: 1;
|
||||||
|
background: white;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
border-radius: 50%;
|
||||||
|
@include box-shadow(0 10px 36px 0 rgba(22,24,26,0.13));
|
||||||
|
color: get-color("dark");
|
||||||
|
&.owl-prev {
|
||||||
|
right: auto;
|
||||||
|
left: 0;
|
||||||
|
@include transform(translateX(-50%));
|
||||||
|
}
|
||||||
|
&.owl-next {
|
||||||
|
right: 0;
|
||||||
|
left: auto;
|
||||||
|
@include transform(translateX(50%));
|
||||||
|
}
|
||||||
|
&:hover, &:focus {
|
||||||
|
opacity: 1;
|
||||||
|
background: white;
|
||||||
|
color: get-color("dark");
|
||||||
|
@include box-shadow(0 10px 40px 0 rgba(22,24,26,0.19));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:not([data-owl-dots="false"], [class*='owl-dots-over']) {
|
||||||
|
.owl-nav {
|
||||||
|
margin-top: -20px;
|
||||||
|
@include breakpoint-less(md) {
|
||||||
|
margin-top: -18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@include breakpoint-less(md) {
|
||||||
|
padding: 0 20px;
|
||||||
|
.owl-nav {
|
||||||
|
right: 20px;
|
||||||
|
left: 20px;
|
||||||
|
height: 40px;
|
||||||
|
button.owl-prev,
|
||||||
|
button.owl-next {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.owl-nav-overlap-left {
|
||||||
|
@include breakpoint-above(lg) {
|
||||||
|
padding: 0 0 0 25px;
|
||||||
|
.owl-nav {
|
||||||
|
left: 25px;
|
||||||
|
right: auto;
|
||||||
|
@include transform(translateY(-50%) translateX(-50%));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.owl-nav-overlap-right {
|
||||||
|
padding: 0 25px 0 0;
|
||||||
|
.owl-nav {
|
||||||
|
left: auto;
|
||||||
|
right: 25px;
|
||||||
|
@include transform(translateY(-50%) translateX(50%));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.owl-nav-overlap-left,
|
||||||
|
&.owl-nav-overlap-right {
|
||||||
|
.owl-nav {
|
||||||
|
z-index: 1;
|
||||||
|
width: 50px;
|
||||||
|
height: auto;
|
||||||
|
padding-bottom: 0;
|
||||||
|
button.owl-prev,
|
||||||
|
button.owl-next {
|
||||||
|
position: static;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
opacity: 1;
|
||||||
|
background: white;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
margin: 4px 0;
|
||||||
|
border-radius: 50%;
|
||||||
|
@include box-shadow(0 10px 36px 0 rgba(22,24,26,0.13));
|
||||||
|
color: get-color("dark");
|
||||||
|
&:hover, &:focus {
|
||||||
|
opacity: 1;
|
||||||
|
background: white;
|
||||||
|
@include box-shadow(0 10px 40px 0 rgba(22,24,26,0.19));
|
||||||
|
color: get-color("dark");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:not([data-owl-dots="false"], [class*='owl-dots-over']) {
|
||||||
|
.owl-nav {
|
||||||
|
margin-top: -20px;
|
||||||
|
@include breakpoint-less(md) {
|
||||||
|
margin-top: -18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@include breakpoint-less(md) {
|
||||||
|
padding: 0 20px 0 0;
|
||||||
|
.owl-nav {
|
||||||
|
left: auto;
|
||||||
|
right: 20px;
|
||||||
|
@include transform(translateY(-50%) translateX(50%));
|
||||||
|
width: 40px;
|
||||||
|
button.owl-prev,
|
||||||
|
button.owl-next {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Swiper //
|
||||||
|
//
|
||||||
|
.hero-portfolio-slider {
|
||||||
|
@include breakpoint-less(md) {
|
||||||
|
padding: 0 30px;
|
||||||
|
}
|
||||||
|
.swiper-wrapper {
|
||||||
|
.swiper-slide {
|
||||||
|
@include transform(scale(0.9));
|
||||||
|
opacity: 0.9;
|
||||||
|
@include transition(ease-in 0.16s);
|
||||||
|
&.swiper-slide-active {
|
||||||
|
@include transform(scale(1));
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.swiper-pagination {
|
||||||
|
.swiper-pagination-bullet {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
opacity: 1;
|
||||||
|
background: transparent;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
margin: 0 2px;
|
||||||
|
vertical-align: middle;
|
||||||
|
&:before, &:after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 50%;
|
||||||
|
@include transition(ease-out 0.16s);
|
||||||
|
}
|
||||||
|
&:before {
|
||||||
|
top: 2px;
|
||||||
|
right: 2px;
|
||||||
|
bottom: 2px;
|
||||||
|
left: 2px;
|
||||||
|
opacity: 0;
|
||||||
|
background: transparent;
|
||||||
|
border: 1px solid black;
|
||||||
|
}
|
||||||
|
&:after {
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
@include transform(translate(-50%,-50%));
|
||||||
|
opacity: 0.3;
|
||||||
|
background: black;
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
}
|
||||||
|
&:hover, &:focus, &.swiper-pagination-bullet-active {
|
||||||
|
&:after {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.swiper-pagination-bullet-active {
|
||||||
|
&:before, &:after {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
&:before {
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.swiper-pagination-horizontal {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 20px;
|
||||||
|
left: 50%;
|
||||||
|
@include transform(translateX(-50%));
|
||||||
|
background: get-color("dark", 0.3);
|
||||||
|
width: auto;
|
||||||
|
border-radius: 20px;
|
||||||
|
margin: 0;
|
||||||
|
padding: 5px;
|
||||||
|
@include breakpoint-less(md) {
|
||||||
|
bottom: 16px;
|
||||||
|
}
|
||||||
|
.swiper-pagination-bullet {
|
||||||
|
&:before { border-color: white; }
|
||||||
|
&:after { background: white; opacity: 0.5; }
|
||||||
|
&:hover, &:focus, &.swiper-pagination-bullet-active {
|
||||||
|
&:after {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Sliding Text //
|
||||||
|
//
|
||||||
|
.sliding-text,
|
||||||
|
.sliding-text-reverse {
|
||||||
|
.swiper-slide {
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.sliding-boxes .swiper-wrapper,
|
||||||
|
.sliding-text .swiper-wrapper,
|
||||||
|
.sliding-text-reverse .swiper-wrapper {
|
||||||
|
transition-timing-function: linear;
|
||||||
|
}
|
||||||
129
assets/css/scss/elements/_team.scss
Normal file
129
assets/css/scss/elements/_team.scss
Normal file
@@ -0,0 +1,129 @@
|
|||||||
|
//
|
||||||
|
// Team Styles //
|
||||||
|
//
|
||||||
|
.team-wrapper {
|
||||||
|
.team-box {
|
||||||
|
text-align: center;
|
||||||
|
.team-img {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
img {
|
||||||
|
@include transform(scale(1));
|
||||||
|
width: 100%;
|
||||||
|
@include transition(transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1));
|
||||||
|
}
|
||||||
|
div {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
opacity: 0;
|
||||||
|
background: get-color("dark", 0.4);
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
text-align: center;
|
||||||
|
@include transition(ease-out 0.12s);
|
||||||
|
ul {
|
||||||
|
list-style-type: none;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
@include transform(translateY(-50%) scale(0.96));
|
||||||
|
margin: 0 -7px;
|
||||||
|
padding: 0 30px;
|
||||||
|
@include transition(ease-out 0.12s);
|
||||||
|
li {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0 7px;
|
||||||
|
a {
|
||||||
|
&:not([class^='button'], [class^="link-social"]) {
|
||||||
|
color: white;
|
||||||
|
&:hover {
|
||||||
|
color: get-color("white", 0.7);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
img {
|
||||||
|
@include transform(scale(1.04));
|
||||||
|
@include filter(blur(1.5px));
|
||||||
|
}
|
||||||
|
div {
|
||||||
|
opacity: 1;
|
||||||
|
ul {
|
||||||
|
@include transform(translateY(-50%) scale(1));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
color: $color-primary-lighter;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.team-box-hover-2 {
|
||||||
|
.team-box {
|
||||||
|
.team-img {
|
||||||
|
div {
|
||||||
|
top: auto;
|
||||||
|
bottom: 16px;
|
||||||
|
right: 16px;
|
||||||
|
left: 16px;
|
||||||
|
@include transform(translateY(5px));
|
||||||
|
background: white;
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
padding: 15px 20px;
|
||||||
|
ul {
|
||||||
|
position: static;
|
||||||
|
top: auto;
|
||||||
|
@include transform(translateY(0) scale(1));
|
||||||
|
padding: 0;
|
||||||
|
li {
|
||||||
|
a {
|
||||||
|
&:not([class^='button'], [class^="link-social"]) {
|
||||||
|
color: $color-primary;
|
||||||
|
&:hover, &:focus { color: get-color("dark"); }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
img {
|
||||||
|
@include filter(blur(0));
|
||||||
|
}
|
||||||
|
div {
|
||||||
|
@include transform(translateY(0));
|
||||||
|
ul {
|
||||||
|
@include transform(translateY(0) scale(1));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&[class*='border-radius'] {
|
||||||
|
.team-box {
|
||||||
|
.team-img {
|
||||||
|
@include transform(translate3d(0,0,0));
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.border-radius {
|
||||||
|
.team-box .team-img { border-radius: 0.4em; }
|
||||||
|
}
|
||||||
|
&.border-radius-1 {
|
||||||
|
.team-box .team-img { border-radius: 1.0em; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.text-start {
|
||||||
|
.team-box { text-align: left; }
|
||||||
|
}
|
||||||
|
.text-end {
|
||||||
|
.team-box { text-align: right; }
|
||||||
|
}
|
||||||
125
assets/css/scss/elements/_testimonial.scss
Normal file
125
assets/css/scss/elements/_testimonial.scss
Normal file
@@ -0,0 +1,125 @@
|
|||||||
|
//
|
||||||
|
// Testimonial Styles //
|
||||||
|
//
|
||||||
|
.testimonial-box {
|
||||||
|
max-width: 730px;
|
||||||
|
margin: 0 auto;
|
||||||
|
text-align: center;
|
||||||
|
img {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//
|
||||||
|
// Testimonial Grid //
|
||||||
|
//
|
||||||
|
.testimonial-grid {
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
&.column-2 {
|
||||||
|
@include breakpoint-above(lg) {
|
||||||
|
.testimonial-grid-box {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.column-1 {
|
||||||
|
.testimonial-grid-box {
|
||||||
|
width: 100%;
|
||||||
|
padding: 30px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.testimonial-grid-box {
|
||||||
|
position: relative;
|
||||||
|
float: left;
|
||||||
|
width: 33.3%;
|
||||||
|
padding: 30px;
|
||||||
|
&:before, &:after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
&:before {
|
||||||
|
top: 0;
|
||||||
|
left: -1px;
|
||||||
|
height: 100%;
|
||||||
|
border-left: 1px dashed get-color("dark", 0.1);
|
||||||
|
}
|
||||||
|
&:after {
|
||||||
|
left: 0;
|
||||||
|
bottom: -1px;
|
||||||
|
width: 100%;
|
||||||
|
border-bottom: 1px dashed get-color("dark", 0.1);
|
||||||
|
}
|
||||||
|
.testimonial-img {
|
||||||
|
float: left;
|
||||||
|
margin-right: 20px;
|
||||||
|
img {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.testimonial-content {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@include breakpoint-less(md) {
|
||||||
|
.testimonial-grid-box {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@include breakpoint-less(sm) {
|
||||||
|
.testimonial-grid-box {
|
||||||
|
width: 100%;
|
||||||
|
padding: 30px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//
|
||||||
|
// Border Style - Solid //
|
||||||
|
//
|
||||||
|
&.border-style-solid {
|
||||||
|
border: 0;
|
||||||
|
.testimonial-grid-box {
|
||||||
|
&:before { border-left-style: solid; }
|
||||||
|
&:after { border-bottom-style: solid; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//
|
||||||
|
// Border Style - Dotted //
|
||||||
|
//
|
||||||
|
&.border-style-dotted {
|
||||||
|
border: 0;
|
||||||
|
.testimonial-grid-box {
|
||||||
|
&:before { border-left-style: dotted; }
|
||||||
|
&:after { border-bottom-style: dotted; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//
|
||||||
|
// Borderless //
|
||||||
|
//
|
||||||
|
&.border-0 {
|
||||||
|
margin: -15px;
|
||||||
|
.testimonial-grid-box {
|
||||||
|
padding: 15px;
|
||||||
|
&:before, &:after { border: 0; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@include breakpoint-less(sm) {
|
||||||
|
&.border-0 {
|
||||||
|
margin: -15px 0;
|
||||||
|
.testimonial-grid-box { padding: 15px 0; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bg-black,
|
||||||
|
[class*='bg-dark'],
|
||||||
|
[class*='bg-gradient-'],
|
||||||
|
[class*='bg-color-'] {
|
||||||
|
.testimonial-grid-box {
|
||||||
|
&:before, &:after { border-color: get-color("white", 0.2); }
|
||||||
|
}
|
||||||
|
}
|
||||||
215
assets/css/scss/elements/_text-link.scss
Normal file
215
assets/css/scss/elements/_text-link.scss
Normal file
@@ -0,0 +1,215 @@
|
|||||||
|
//
|
||||||
|
// Text Link Styles //
|
||||||
|
//
|
||||||
|
*[class*='text-link-'] {
|
||||||
|
color: get-color("dark", 0.9);
|
||||||
|
&:hover, &:focus {
|
||||||
|
color: get-color("dark");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.text-link-1 {
|
||||||
|
&:hover { text-decoration: underline; }
|
||||||
|
}
|
||||||
|
.text-link-2 {
|
||||||
|
position: relative;
|
||||||
|
&:before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: -2px;
|
||||||
|
background: get-color("dark", 0.9);
|
||||||
|
width: 0;
|
||||||
|
height: 1px;
|
||||||
|
@include transition(all 0.24s cubic-bezier(0.165, 0.84, 0.44, 1));
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
&:before {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.text-link-2 {
|
||||||
|
&:before { left: 0; }
|
||||||
|
}
|
||||||
|
.text-link-3 {
|
||||||
|
position: relative;
|
||||||
|
&:before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: -2px;
|
||||||
|
left: 0;
|
||||||
|
@include transform(translateY(3px));
|
||||||
|
opacity: 0;
|
||||||
|
background: get-color("dark", 0.9);
|
||||||
|
width: 100%;
|
||||||
|
height: 1px;
|
||||||
|
@include transition(linear 0.1s);
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
&:before {
|
||||||
|
@include transform(translateY(0));
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.text-link-4 {
|
||||||
|
position: relative;
|
||||||
|
&:before, &:after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: -2px;
|
||||||
|
height: 1px;
|
||||||
|
@include transition(all 0.24s cubic-bezier(0.165, 0.84, 0.44, 1));
|
||||||
|
}
|
||||||
|
&:before {
|
||||||
|
left: 0;
|
||||||
|
background: get-color("dark", 0.2);
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
&:after {
|
||||||
|
background: get-color("dark", 0.9);
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
&:after {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.text-link-4 {
|
||||||
|
&:after { left: 0; }
|
||||||
|
}
|
||||||
|
.text-link-5 {
|
||||||
|
position: relative;
|
||||||
|
&:before, &:after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: -2px;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 1px;
|
||||||
|
@include transition(linear 0.1s);
|
||||||
|
}
|
||||||
|
&:before {
|
||||||
|
background: get-color("dark", 0.2);
|
||||||
|
}
|
||||||
|
&:after {
|
||||||
|
opacity: 0;
|
||||||
|
@include transform(translateY(3px));
|
||||||
|
background: get-color("dark", 0.9);
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
&:before {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
&:after {
|
||||||
|
@include transform(translateY(0));
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.text-link-6 {
|
||||||
|
position: relative;
|
||||||
|
&:before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: 4px;
|
||||||
|
left: 0;
|
||||||
|
background: get-color("dark", 0.2);
|
||||||
|
width: 0;
|
||||||
|
height: 6px;
|
||||||
|
@include transition(all 0.24s cubic-bezier(0.165, 0.84, 0.44, 1));
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
&:before {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-black,
|
||||||
|
[class*='bg-dark'],
|
||||||
|
[class*='bg-gradient-'],
|
||||||
|
[class*='bg-color-'] {
|
||||||
|
*[class*='text-link-'] {
|
||||||
|
color: get-color("white", 0.8);
|
||||||
|
&:hover, &:focus {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.text-link-2, .text-link-3 {
|
||||||
|
&:before { background: white; }
|
||||||
|
}
|
||||||
|
.text-link-4, .text-link-5 {
|
||||||
|
&:before { background: get-color("white", 0.3); }
|
||||||
|
&:after { background: white; }
|
||||||
|
}
|
||||||
|
.text-link-6 {
|
||||||
|
&:before { background: get-color("white", 0.3); }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*='link-social-'] {
|
||||||
|
&:hover {
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.link-social-facebook {
|
||||||
|
color: $color-facebook;
|
||||||
|
&:hover {
|
||||||
|
color: $color-facebook;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.link-social-twitter {
|
||||||
|
color: $color-twitter;
|
||||||
|
&:hover {
|
||||||
|
color: $color-twitter;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.link-social-instagram {
|
||||||
|
color: $color-instagram;
|
||||||
|
&:hover {
|
||||||
|
color: $color-instagram;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.link-social-linkedin {
|
||||||
|
color: $color-linkedin;
|
||||||
|
&:hover {
|
||||||
|
color: $color-linkedin;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.link-social-youtube {
|
||||||
|
color: $color-youtube;
|
||||||
|
&:hover {
|
||||||
|
color: $color-youtube;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.link-social-pinterest {
|
||||||
|
color: $color-pinterest;
|
||||||
|
&:hover {
|
||||||
|
color: $color-pinterest;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.link-social-skype {
|
||||||
|
color: $color-skype;
|
||||||
|
&:hover {
|
||||||
|
color: $color-skype;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.link-social-dribbble {
|
||||||
|
color: $color-dribbble;
|
||||||
|
&:hover {
|
||||||
|
color: $color-dribbble;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.link-social-snapchat {
|
||||||
|
color: $color-snapchat;
|
||||||
|
&:hover {
|
||||||
|
color: $color-snapchat;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.link-social-whatsapp {
|
||||||
|
color: $color-whatsapp;
|
||||||
|
&:hover {
|
||||||
|
color: $color-whatsapp;
|
||||||
|
}
|
||||||
|
}
|
||||||
246
assets/css/scss/elements/_timeline.scss
Normal file
246
assets/css/scss/elements/_timeline.scss
Normal file
@@ -0,0 +1,246 @@
|
|||||||
|
//
|
||||||
|
// Timeline Styles //
|
||||||
|
//
|
||||||
|
.timeline-wrapper {
|
||||||
|
position: relative;
|
||||||
|
&:before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
background: $border-gray;
|
||||||
|
width: 1px;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.timeline {
|
||||||
|
.timeline-date {
|
||||||
|
position: relative;
|
||||||
|
&:before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 31px;
|
||||||
|
background: $border-gray;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
&:after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 37px;
|
||||||
|
background: get-color("dark");
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@include breakpoint-above(lg) {
|
||||||
|
.timeline-wrapper {
|
||||||
|
position: relative;
|
||||||
|
&:before {
|
||||||
|
left: 50%;
|
||||||
|
@include transform(translateX(-50%));
|
||||||
|
}
|
||||||
|
.timeline {
|
||||||
|
position: relative;
|
||||||
|
.timeline-date, .timeline-content {
|
||||||
|
width: 50%;
|
||||||
|
padding: 30px;
|
||||||
|
}
|
||||||
|
.timeline-date {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
text-align: right;
|
||||||
|
&:before {
|
||||||
|
right: -10px;
|
||||||
|
}
|
||||||
|
&:after {
|
||||||
|
right: -4px;
|
||||||
|
}
|
||||||
|
h1,h2,h3,h4,h5,h6 {
|
||||||
|
position: relative;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.timeline-content {
|
||||||
|
margin-left: 50%;
|
||||||
|
}
|
||||||
|
&:nth-child(even) {
|
||||||
|
.timeline-date {
|
||||||
|
left: 50%;
|
||||||
|
text-align: left;
|
||||||
|
&:before {
|
||||||
|
right: auto;
|
||||||
|
left: -10px;
|
||||||
|
}
|
||||||
|
&:after {
|
||||||
|
right: auto;
|
||||||
|
left: -4px;
|
||||||
|
}
|
||||||
|
h1,h2,h3,h4,h5,h6 {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.timeline-content {
|
||||||
|
margin-left: 0;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//
|
||||||
|
// Timeline left //
|
||||||
|
//
|
||||||
|
&.timeline-left {
|
||||||
|
&:before {
|
||||||
|
left: 200px;
|
||||||
|
@include transform(translateX(0));
|
||||||
|
}
|
||||||
|
.timeline {
|
||||||
|
.timeline-date {
|
||||||
|
width: 200px;
|
||||||
|
padding: 30px 30px 0 0;
|
||||||
|
}
|
||||||
|
.timeline-content {
|
||||||
|
width: auto;
|
||||||
|
margin: 0 0 0 200px;
|
||||||
|
padding: 30px 0 0 30px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
&:nth-child(even) {
|
||||||
|
.timeline-date {
|
||||||
|
left: auto;
|
||||||
|
text-align: right;
|
||||||
|
&:before {
|
||||||
|
right: -10px;
|
||||||
|
left: auto;
|
||||||
|
}
|
||||||
|
&:after {
|
||||||
|
right: -4px;
|
||||||
|
left: auto;
|
||||||
|
}
|
||||||
|
h1,h2,h3,h4,h5,h6 {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:last-child {
|
||||||
|
.timeline-date, .timeline-content {
|
||||||
|
padding-bottom: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//
|
||||||
|
// Timeline Right //
|
||||||
|
//
|
||||||
|
&.timeline-right {
|
||||||
|
&:before {
|
||||||
|
right: 200px;
|
||||||
|
left: auto;
|
||||||
|
@include transform(translateX(0));
|
||||||
|
}
|
||||||
|
.timeline {
|
||||||
|
.timeline-date {
|
||||||
|
right: 0;
|
||||||
|
left: auto;
|
||||||
|
width: 200px;
|
||||||
|
padding: 30px 0 0 30px;
|
||||||
|
text-align: left;
|
||||||
|
&:before {
|
||||||
|
right: auto;
|
||||||
|
left: -10px;
|
||||||
|
}
|
||||||
|
&:after {
|
||||||
|
right: auto;
|
||||||
|
left: -4px;
|
||||||
|
}
|
||||||
|
h1,h2,h3,h4,h5,h6 {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.timeline-content {
|
||||||
|
width: auto;
|
||||||
|
margin: 0 200px 0 0;
|
||||||
|
padding: 30px 30px 0 0;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
&:nth-child(even) {
|
||||||
|
.timeline-date {
|
||||||
|
left: auto;
|
||||||
|
text-align: left;
|
||||||
|
&:before {
|
||||||
|
left: -10px;
|
||||||
|
}
|
||||||
|
&:after {
|
||||||
|
left: -4px;
|
||||||
|
}
|
||||||
|
h1,h2,h3,h4,h5,h6 {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:last-child {
|
||||||
|
.timeline-date, .timeline-content {
|
||||||
|
padding-bottom: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} // end Timeline Right //
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@include breakpoint-less(md) {
|
||||||
|
.timeline-wrapper {
|
||||||
|
padding-left: 30px;
|
||||||
|
&:before {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
.timeline {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
&:first-child {
|
||||||
|
padding-top: 30px;
|
||||||
|
}
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
padding-bottom: 30px;
|
||||||
|
}
|
||||||
|
.timeline-date {
|
||||||
|
&:before {
|
||||||
|
top: 1px;
|
||||||
|
left: -40px;
|
||||||
|
}
|
||||||
|
&:after {
|
||||||
|
top: 7px;
|
||||||
|
left: -34px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@include breakpoint-less(xs) {
|
||||||
|
.timeline-wrapper {
|
||||||
|
padding-left: 20px;
|
||||||
|
.timeline {
|
||||||
|
.timeline-date {
|
||||||
|
&:before { left: -30px; }
|
||||||
|
&:after { left: -24px; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-black,
|
||||||
|
[class*='bg-dark'],
|
||||||
|
[class*='bg-gradient-'],
|
||||||
|
[class*='bg-color-'] {
|
||||||
|
.timeline-wrapper {
|
||||||
|
&:before { background: get-color("white", 0.2); }
|
||||||
|
.timeline {
|
||||||
|
.timeline-date {
|
||||||
|
&:before { background: get-color("white", 0.2); }
|
||||||
|
&:after { background: white; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
3
assets/css/scss/helpers/_custom.scss
Normal file
3
assets/css/scss/helpers/_custom.scss
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
//
|
||||||
|
// Your Custom Styles //
|
||||||
|
//
|
||||||
97
assets/css/scss/helpers/_mixins.scss
Normal file
97
assets/css/scss/helpers/_mixins.scss
Normal file
@@ -0,0 +1,97 @@
|
|||||||
|
//
|
||||||
|
// Mixins //
|
||||||
|
//
|
||||||
|
@mixin display-flex {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin background-size($background-size) {
|
||||||
|
-webkit-background-size: $background-size;
|
||||||
|
-moz-background-size: $background-size;
|
||||||
|
background-size: $background-size;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin box-shadow($box-shadow) {
|
||||||
|
-webkit-box-shadow: $box-shadow;
|
||||||
|
box-shadow: $box-shadow;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin text-shadow($text-shadow) {
|
||||||
|
-webkit-text-shadow: $text-shadow;
|
||||||
|
text-shadow: $text-shadow;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin filter($filter) {
|
||||||
|
-webkit-filter: $filter;
|
||||||
|
filter: $filter;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin transition($transition) {
|
||||||
|
-webkit-transition: $transition;
|
||||||
|
transition: $transition;
|
||||||
|
}
|
||||||
|
@mixin transition-delay($transition-delay) {
|
||||||
|
-webkit-transition-delay: $transition-delay;
|
||||||
|
transition-delay: $transition-delay;
|
||||||
|
}
|
||||||
|
@mixin transition-duration($transition-duration) {
|
||||||
|
-webkit-transition-duration: $transition-duration;
|
||||||
|
transition-duration: $transition-duration;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin transform($transform) {
|
||||||
|
-webkit-transform: $transform;
|
||||||
|
transform: $transform;
|
||||||
|
}
|
||||||
|
@mixin transform-origin($transform-origin) {
|
||||||
|
-webkit-transform-origin: $transform-origin;
|
||||||
|
transform-origin: $transform-origin;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin animation($animation) {
|
||||||
|
-webkit-animation: $animation;
|
||||||
|
animation: $animation;
|
||||||
|
}
|
||||||
|
@mixin animation-delay($animation-delay) {
|
||||||
|
-webkit-animation-delay: $animation-delay;
|
||||||
|
animation-delay: $animation-delay;
|
||||||
|
}
|
||||||
|
@mixin animation-fill-mode($animation-fill-mode) {
|
||||||
|
-webkit-animation-fill-mode: $animation-fill-mode;
|
||||||
|
animation-fill-mode: $animation-fill-mode;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin breakpoint-above($class) {
|
||||||
|
@if $class == xs {
|
||||||
|
@media (min-width: 0) { @content; }
|
||||||
|
}
|
||||||
|
@else if $class == sm {
|
||||||
|
@media (min-width: 576px) { @content; }
|
||||||
|
}
|
||||||
|
@else if $class == md {
|
||||||
|
@media (min-width: 768px) { @content; }
|
||||||
|
}
|
||||||
|
@else if $class == lg {
|
||||||
|
@media (min-width: 992px) { @content; }
|
||||||
|
}
|
||||||
|
@else if $class == xl {
|
||||||
|
@media (min-width: 1200px) { @content; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@mixin breakpoint-less($class) {
|
||||||
|
@if $class == xs {
|
||||||
|
@media (max-width: 575.98px) { @content; }
|
||||||
|
}
|
||||||
|
@else if $class == sm {
|
||||||
|
@media (max-width: 767.98px) { @content; }
|
||||||
|
}
|
||||||
|
@else if $class == md {
|
||||||
|
@media (max-width: 991.98px) { @content; }
|
||||||
|
}
|
||||||
|
@else if $class == lg {
|
||||||
|
@media (max-width: 1199.98px) { @content; }
|
||||||
|
}
|
||||||
|
}
|
||||||
464
assets/css/scss/helpers/_utilities.scss
Normal file
464
assets/css/scss/helpers/_utilities.scss
Normal file
@@ -0,0 +1,464 @@
|
|||||||
|
:root {
|
||||||
|
--bs-dark-rgb: 24, 28, 32;
|
||||||
|
--bs-border-color: get-color("dark", 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Background colors //
|
||||||
|
//
|
||||||
|
@each $name, $rgb in $colors {
|
||||||
|
@for $i from 1 through 9 {
|
||||||
|
.bg-#{$name}-0#{$i} {
|
||||||
|
background: rgba(nth($rgb, 1), nth($rgb, 2), nth($rgb, 3), $i * 0.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@each $name, $rgb in $colors {
|
||||||
|
@for $i from 1 through 9 {
|
||||||
|
.bg-color-#{$name}-0#{$i} {
|
||||||
|
background: rgba(nth($rgb, 1), nth($rgb, 2), nth($rgb, 3), $i * 0.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-dark-lighter { background: $bg-dark-lighter; }
|
||||||
|
.bg-dark-lightest { background: $bg-dark-lightest; }
|
||||||
|
.bg-dark { background: get-color("dark"); }
|
||||||
|
.bg-gray { background: $bg-gray; }
|
||||||
|
.bg-gray-lighter { background: $bg-gray-lighter; }
|
||||||
|
.bg-gray-lightest { background: $bg-gray-lightest; }
|
||||||
|
|
||||||
|
//
|
||||||
|
// Light Backgrounds //
|
||||||
|
//
|
||||||
|
.bg-light-blue { background: $bg-light-blue; }
|
||||||
|
.bg-light-purple { background: $bg-light-purple; }
|
||||||
|
.bg-light-pink-edge { background: $bg-light-pink-edge; }
|
||||||
|
.bg-light-golden-yellow { background: $bg-light-golden-yellow; }
|
||||||
|
.bg-light-very-peri { background: $bg-light-very-peri; }
|
||||||
|
.bg-light-turquoise { background: $bg-light-turquoise; }
|
||||||
|
.bg-light-spring-red { background: $bg-light-spring-red; }
|
||||||
|
.bg-light-tan { background: $bg-light-tan; }
|
||||||
|
.bg-light-aqua { background: $bg-light-aqua; }
|
||||||
|
|
||||||
|
//
|
||||||
|
// Color Backgrounds //
|
||||||
|
//
|
||||||
|
.bg-color-blue { background: get-color("blue"); }
|
||||||
|
.bg-color-purple { background: get-color("purple"); }
|
||||||
|
.bg-color-golden-yellow { background: get-color("golden-yellow"); }
|
||||||
|
.bg-color-pink-edge { background: get-color("pink-edge"); }
|
||||||
|
.bg-color-very-peri { background: get-color("very-peri"); }
|
||||||
|
.bg-color-turquoise { background: get-color("turquoise"); }
|
||||||
|
.bg-color-spring-red { background: get-color("spring-red"); }
|
||||||
|
.bg-color-tan { background: get-color("tan"); }
|
||||||
|
.bg-color-aqua { background: get-color("aqua"); }
|
||||||
|
|
||||||
|
//
|
||||||
|
// Gradient Backgrounds //
|
||||||
|
//
|
||||||
|
.bg-gradient-1 { background-image: $gradient-1; }
|
||||||
|
.bg-gradient-2 { background-image: $gradient-2; }
|
||||||
|
.bg-gradient-3 { background-image: $gradient-3; }
|
||||||
|
.bg-gradient-4 { background-image: $gradient-4; }
|
||||||
|
.bg-gradient-5 { background-image: $gradient-5; }
|
||||||
|
.bg-gradient-6 { background-image: $gradient-6; }
|
||||||
|
.bg-gradient-7 { background-image: $gradient-7; }
|
||||||
|
|
||||||
|
.bg-white-content {
|
||||||
|
color: $color-primary;
|
||||||
|
h1,h2,h3,h4,h5,h6 { color: get-color("dark"); }
|
||||||
|
a {
|
||||||
|
&:not([class^='button']) {
|
||||||
|
color: get-color("dark", 0.9);
|
||||||
|
&:hover, &:focus { color: get-color("dark"); }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bg-dark-content {
|
||||||
|
color: get-color("white", 0.7);
|
||||||
|
h1,h2,h3,h4,h5,h6 { color: white; }
|
||||||
|
a {
|
||||||
|
&:not([class^='button']) {
|
||||||
|
color: get-color("white", 0.9);
|
||||||
|
&:hover, &:focus { color: white; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
[class*='bg-white'] {
|
||||||
|
@extend .bg-white-content;
|
||||||
|
}
|
||||||
|
.bg-black,
|
||||||
|
[class*='bg-dark'],
|
||||||
|
[class*='bg-gradient-'],
|
||||||
|
[class*='bg-color-'] {
|
||||||
|
@extend .bg-dark-content;
|
||||||
|
[class*='bg-white'] {
|
||||||
|
@extend .bg-white-content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Font Families //
|
||||||
|
//
|
||||||
|
.font-family-primary { font-family: $font-family-primary }
|
||||||
|
.font-family-playfair { font-family: $font-family-playfair }
|
||||||
|
.font-family-poppins { font-family: $font-family-poppins }
|
||||||
|
.font-family-nunito { font-family: $font-family-nunito }
|
||||||
|
.font-family-outfit { font-family: $font-family-outfit }
|
||||||
|
|
||||||
|
//
|
||||||
|
// Font Weights //
|
||||||
|
//
|
||||||
|
.fw-thin { font-weight: $font-weight-thin; }
|
||||||
|
.fw-medium { font-weight: $font-weight-medium; }
|
||||||
|
.fw-semi-bold { font-weight: $font-weight-semi-bold; }
|
||||||
|
.fw-black { font-weight: $font-weight-black; }
|
||||||
|
|
||||||
|
//
|
||||||
|
// Text Colors //
|
||||||
|
//
|
||||||
|
@for $i from 1 through 9 {
|
||||||
|
*.text-white-0#{$i} {
|
||||||
|
color: rgba(nth($color-white, 1), nth($color-white, 2), nth($color-white, 3), $i * 0.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@for $i from 1 through 9 {
|
||||||
|
*.text-dark-0#{$i} {
|
||||||
|
color: rgba(nth($color-dark, 1), nth($color-dark, 2), nth($color-dark, 3), $i * 0.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
*.text-dark { color: get-color("dark"); }
|
||||||
|
*.text-red { color: $color-red-lighter; }
|
||||||
|
*.text-green { color: $color-green-lighter; }
|
||||||
|
*.text-blue { color: get-color("blue"); }
|
||||||
|
*.text-purple { color: get-color("purple"); }
|
||||||
|
*.text-golden-yellow { color: get-color("golden-yellow"); }
|
||||||
|
*.text-pink-edge { color: get-color("pink-edge"); }
|
||||||
|
*.text-very-peri { color: get-color("very-peri"); }
|
||||||
|
*.text-turquoise { color: get-color("turquoise"); }
|
||||||
|
*.text-spring-red { color: get-color("spring-red"); }
|
||||||
|
*.text-tan { color: get-color("tan"); }
|
||||||
|
*.text-aqua { color: get-color("aqua"); }
|
||||||
|
|
||||||
|
[class*='text-gradient'] {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.text-gradient-1 {
|
||||||
|
background-image: $gradient-1;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
.text-gradient-2 {
|
||||||
|
background-image: $gradient-2;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
.text-gradient-3 {
|
||||||
|
background-image: $gradient-3;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
.text-gradient-4 {
|
||||||
|
background-image: $gradient-4;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
.text-gradient-5 {
|
||||||
|
background-image: $gradient-5;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
.text-gradient-6 {
|
||||||
|
background-image: $gradient-6;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
.text-gradient-7 {
|
||||||
|
background-image: $gradient-7;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Text Highlight //
|
||||||
|
//
|
||||||
|
[class*='text-highlight'] {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
&:before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: -2px;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 4px;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.text-highlight {
|
||||||
|
&:before { background: get-color("dark", 0.2); }
|
||||||
|
}
|
||||||
|
.text-highlight-gradient {
|
||||||
|
&:before { background-image: $gradient-1; }
|
||||||
|
}
|
||||||
|
.text-highlight-gradient-2 {
|
||||||
|
&:before { background-image: $gradient-2; }
|
||||||
|
}
|
||||||
|
.text-highlight-gradient-3 {
|
||||||
|
&:before { background-image: $gradient-3; }
|
||||||
|
}
|
||||||
|
.text-highlight-gradient-4 {
|
||||||
|
&:before { background-image: $gradient-4; }
|
||||||
|
}
|
||||||
|
.text-highlight-gradient-5 {
|
||||||
|
&:before { background-image: $gradient-5; }
|
||||||
|
}
|
||||||
|
.text-highlight-gradient-6 {
|
||||||
|
&:before { background-image: $gradient-6; }
|
||||||
|
}
|
||||||
|
.text-highlight-gradient-7 {
|
||||||
|
&:before { background-image: $gradient-7; }
|
||||||
|
}
|
||||||
|
h1,h2 {
|
||||||
|
&[class*='text-highlight'] {
|
||||||
|
&:before {
|
||||||
|
bottom: -2px;
|
||||||
|
height: 6px;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
&[class*='text-highlight'] {
|
||||||
|
&:before {
|
||||||
|
bottom: -2px;
|
||||||
|
height: 5px;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
&.display-1 {
|
||||||
|
&[class*='text-highlight'] {
|
||||||
|
&:before {
|
||||||
|
bottom: -8px;
|
||||||
|
height: 10px;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.display-2 {
|
||||||
|
&[class*='text-highlight'] {
|
||||||
|
&:before {
|
||||||
|
bottom: -6px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.display-3 {
|
||||||
|
&[class*='text-highlight'] {
|
||||||
|
&:before {
|
||||||
|
bottom: -6px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.display-4 {
|
||||||
|
&[class*='text-highlight'] {
|
||||||
|
&:before {
|
||||||
|
bottom: -6px;
|
||||||
|
height: 7px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bg-black,
|
||||||
|
[class*='bg-dark'],
|
||||||
|
[class*='bg-gradient-'],
|
||||||
|
[class*='bg-color-'] {
|
||||||
|
.text-highlight {
|
||||||
|
&:before {
|
||||||
|
background: get-color("white", 0.3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Stroke Text //
|
||||||
|
//
|
||||||
|
.stroke-text {
|
||||||
|
color: get-color("dark");
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
-webkit-text-stroke-width: 1.0px;
|
||||||
|
-webkit-text-stroke-color: get-color("dark");
|
||||||
|
@include breakpoint-above(md) {
|
||||||
|
-webkit-text-stroke-width: 1.2px;
|
||||||
|
}
|
||||||
|
@include breakpoint-above(lg) {
|
||||||
|
-webkit-text-stroke-width: 1.4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bg-black,
|
||||||
|
[class*='bg-dark'],
|
||||||
|
[class*='bg-gradient-'],
|
||||||
|
[class*='bg-color-'] {
|
||||||
|
.stroke-text {
|
||||||
|
color: white;
|
||||||
|
-webkit-text-stroke-color: white;
|
||||||
|
}
|
||||||
|
.bg-white,
|
||||||
|
[class*='bg-white'] {
|
||||||
|
.stroke-text {
|
||||||
|
color: get-color("dark");
|
||||||
|
-webkit-text-stroke-color: get-color("dark");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Fancy Text //
|
||||||
|
//
|
||||||
|
.fancy-text {
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
-webkit-text-stroke-width: 1.0px;
|
||||||
|
-webkit-text-stroke-color: get-color("dark");
|
||||||
|
@include text-shadow(3px 3px 0 rgb(219, 221, 223));
|
||||||
|
@include breakpoint-above(md) { -webkit-text-stroke-width: 1.2px; }
|
||||||
|
@include breakpoint-above(lg) { -webkit-text-stroke-width: 1.4px; }
|
||||||
|
&.display-1, &.display-2, &.display-3 {
|
||||||
|
@include text-shadow(4px 4px 0 rgb(219, 221, 223));
|
||||||
|
}
|
||||||
|
@include breakpoint-above(md) {
|
||||||
|
&.display-1, &.display-2, &.display-3 {
|
||||||
|
@include text-shadow(5px 5px 0 rgb(219, 221, 223));
|
||||||
|
}
|
||||||
|
&.display-4 {
|
||||||
|
@include text-shadow(4px 4px 0 rgb(219, 221, 223));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bg-black,
|
||||||
|
[class*='bg-dark'],
|
||||||
|
[class*='bg-gradient-'],
|
||||||
|
[class*='bg-color-'] {
|
||||||
|
.fancy-text {
|
||||||
|
color: white;
|
||||||
|
-webkit-text-stroke-color: white;
|
||||||
|
@include text-shadow(3px 3px 0 rgb(46, 48, 50));
|
||||||
|
&.display-1, &.display-2, &.display-3 {
|
||||||
|
@include text-shadow(4px 4px 0 rgb(46, 48, 50));
|
||||||
|
}
|
||||||
|
@include breakpoint-above(md) {
|
||||||
|
&.display-1, &.display-2, &.display-3 {
|
||||||
|
@include text-shadow(5px 5px 0 rgb(46, 48, 50));
|
||||||
|
}
|
||||||
|
&.display-4 {
|
||||||
|
@include text-shadow(4px 4px 0 rgb(46, 48, 50));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
[class*='bg-white'] {
|
||||||
|
.fancy-text {
|
||||||
|
color: get-color("dark");
|
||||||
|
-webkit-text-stroke-color: get-color("dark");
|
||||||
|
@include text-shadow(3px 3px 0 rgb(219, 221, 223));
|
||||||
|
&.display-1, &.display-2, &.display-3 {
|
||||||
|
@include text-shadow(4px 4px 0 rgb(219, 221, 223));
|
||||||
|
}
|
||||||
|
@include breakpoint-above(md) {
|
||||||
|
&.display-1, &.display-2, &.display-3 {
|
||||||
|
@include text-shadow(5px 5px 0 rgb(219, 221, 223));
|
||||||
|
}
|
||||||
|
&.display-4 {
|
||||||
|
@include text-shadow(4px 4px 0 rgb(219, 221, 223));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Borders //
|
||||||
|
//
|
||||||
|
.border-top,
|
||||||
|
.border-right,
|
||||||
|
.border-bottom,
|
||||||
|
.border-left {
|
||||||
|
border-width: 0;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: get-color("dark", 0.1);
|
||||||
|
}
|
||||||
|
.border-top { border-top-width: 1px; }
|
||||||
|
.border-right { border-right-width: 1px; }
|
||||||
|
.border-bottom { border-bottom-width: 1px; }
|
||||||
|
.border-left { border-left-width: 1px; }
|
||||||
|
|
||||||
|
.bg-black,
|
||||||
|
[class*='bg-dark'],
|
||||||
|
[class*='bg-gradient-'],
|
||||||
|
[class*='bg-color-'] {
|
||||||
|
.border, .border-top, .border-right, .border-bottom, .border-left {
|
||||||
|
border-color: get-color("white", 0.2) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Border Styles //
|
||||||
|
//
|
||||||
|
.border-style-dotted { border-style: dotted; }
|
||||||
|
.border-style-dashed { border-style: dashed; }
|
||||||
|
|
||||||
|
//
|
||||||
|
// Negative Margin //
|
||||||
|
//
|
||||||
|
.n-margin-1 {
|
||||||
|
margin-top: -1rem;
|
||||||
|
}
|
||||||
|
.n-margin-2 {
|
||||||
|
margin-top: -2rem;
|
||||||
|
}
|
||||||
|
.n-margin-3 {
|
||||||
|
margin-top: -3rem;
|
||||||
|
}
|
||||||
|
.n-margin-4 {
|
||||||
|
margin-top: -4rem;
|
||||||
|
}
|
||||||
|
.n-margin-5 {
|
||||||
|
margin-top: -5rem;
|
||||||
|
}
|
||||||
|
.n-margin-6 {
|
||||||
|
margin-top: -6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Backdrop Filter //
|
||||||
|
//
|
||||||
|
.backdrop-filter-blur {
|
||||||
|
backdrop-filter: blur(5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Opacity //
|
||||||
|
//
|
||||||
|
.opacity-10 {
|
||||||
|
opacity: 0.1;
|
||||||
|
}
|
||||||
|
.opacity-15 {
|
||||||
|
opacity: 0.15;
|
||||||
|
}
|
||||||
|
.opacity-20 {
|
||||||
|
opacity: 0.2;
|
||||||
|
}
|
||||||
126
assets/css/scss/helpers/_variables.scss
Normal file
126
assets/css/scss/helpers/_variables.scss
Normal file
@@ -0,0 +1,126 @@
|
|||||||
|
//
|
||||||
|
// 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);
|
||||||
98
assets/css/scss/theme.scss
Normal file
98
assets/css/scss/theme.scss
Normal file
@@ -0,0 +1,98 @@
|
|||||||
|
//
|
||||||
|
// Import Helpers //
|
||||||
|
//
|
||||||
|
@import "helpers/variables";
|
||||||
|
@import "helpers/mixins";
|
||||||
|
|
||||||
|
//
|
||||||
|
// Import Google Fonts //
|
||||||
|
//
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600;700;800;900&family=Open+Sans:wght@300;400;500;600;700&family=Playfair+Display:wght@400;700&family=Poppins:wght@100;200;300;400;500;600;700;800;900&family=Outfit:wght@200;300;400;500;600;700;800&display=swap');
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Import Basic styles //
|
||||||
|
//
|
||||||
|
@import "basic/base";
|
||||||
|
@import "basic/background";
|
||||||
|
@import "basic/form";
|
||||||
|
@import "basic/image";
|
||||||
|
@import "basic/list";
|
||||||
|
@import "basic/typography";
|
||||||
|
|
||||||
|
//
|
||||||
|
// Import Elements //
|
||||||
|
//
|
||||||
|
@import "elements/accordion";
|
||||||
|
@import "elements/box";
|
||||||
|
@import "elements/button";
|
||||||
|
@import "elements/clients";
|
||||||
|
@import "elements/feature-box";
|
||||||
|
@import "elements/hoverbox";
|
||||||
|
@import "elements/lightbox";
|
||||||
|
@import "elements/map";
|
||||||
|
@import "elements/page-scroll-progress";
|
||||||
|
@import "elements/pie-chart";
|
||||||
|
@import "elements/progress-bar";
|
||||||
|
@import "elements/section-divider";
|
||||||
|
@import "elements/slider";
|
||||||
|
@import "elements/team";
|
||||||
|
@import "elements/testimonial";
|
||||||
|
@import "elements/text-link";
|
||||||
|
@import "elements/timeline";
|
||||||
|
|
||||||
|
//
|
||||||
|
// Import Components //
|
||||||
|
//
|
||||||
|
@import "components/blog";
|
||||||
|
@import "components/cookie-consent";
|
||||||
|
@import "components/fullscreen-menu";
|
||||||
|
@import "components/gallery";
|
||||||
|
@import "components/header";
|
||||||
|
@import "components/breadcrumb";
|
||||||
|
@import "components/masonry";
|
||||||
|
@import "components/portfolio";
|
||||||
|
@import "components/table";
|
||||||
|
@import "components/preloader";
|
||||||
|
@import "components/section";
|
||||||
|
|
||||||
|
//
|
||||||
|
// Import Utilities //
|
||||||
|
//
|
||||||
|
@import "helpers/utilities";
|
||||||
|
|
||||||
|
//
|
||||||
|
// Import Custom Styles //
|
||||||
|
//
|
||||||
|
@import "helpers/custom";
|
||||||
|
|
||||||
|
ul.wp-block-list {
|
||||||
|
margin-top: 1rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
figure.wp-block-image {
|
||||||
|
margin-top: 2rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Figcaption Styles //
|
||||||
|
//
|
||||||
|
figcaption, .wp-element-caption {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: #aeaeae;
|
||||||
|
margin-top: 0.5em;
|
||||||
|
text-align: center;
|
||||||
|
// display: flex;
|
||||||
|
// align-items: center;
|
||||||
|
// justify-content: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
figure.wp-block-image {
|
||||||
|
img {
|
||||||
|
margin: auto;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
10808
assets/css/theme.css
Normal file
10808
assets/css/theme.css
Normal file
File diff suppressed because it is too large
Load Diff
@@ -18,14 +18,17 @@
|
|||||||
<link href="/assets/css/theme.css" rel="stylesheet">
|
<link href="/assets/css/theme.css" rel="stylesheet">
|
||||||
<link href="/assets/css/theme-colors/theme-color-blue.css" rel="stylesheet">
|
<link href="/assets/css/theme-colors/theme-color-blue.css" rel="stylesheet">
|
||||||
<!-- Fonts/Icons -->
|
<!-- Fonts/Icons -->
|
||||||
<!-- <link href="/assets/plugins/bootstrap-icons/bootstrap-icons.css" rel="stylesheet"> -->
|
<link href="/assets/plugins/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
|
||||||
<!-- <link href="/assets/plugins/font-awesome/css/all.css" rel="stylesheet"> -->
|
<link href="/assets/plugins/font-awesome/css/all.css" rel="stylesheet">
|
||||||
</head>
|
</head>
|
||||||
<body data-preloader="1">
|
<body data-preloader="1">
|
||||||
|
|
||||||
<!-- Header -->
|
<!-- Header -->
|
||||||
{{ partial "header.html" . }}
|
{{ partial "header.html" . }}
|
||||||
|
|
||||||
|
<!-- Breadcrumb -->
|
||||||
|
{{ partial "breadcrumb.html" . }}
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
{{ block "main" . }}{{ end }}
|
{{ block "main" . }}{{ end }}
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
71
layouts/partials/breadcrumb.html
Normal file
71
layouts/partials/breadcrumb.html
Normal file
@@ -0,0 +1,71 @@
|
|||||||
|
<!-- Breadcrumb Navigation with SEO optimization -->
|
||||||
|
<div class="breadcrumb-wrapper">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12">
|
||||||
|
<nav aria-label="breadcrumb">
|
||||||
|
<ol class="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
|
||||||
|
|
||||||
|
<!-- Home/Accueil with SEO -->
|
||||||
|
<li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
|
||||||
|
<a href="{{ "/" | relLangURL }}" itemprop="item" title="{{ i18n "home" | default "Accueil" }}">
|
||||||
|
<i class="fas fa-home" aria-hidden="true"></i>
|
||||||
|
<span itemprop="name">{{ i18n "home" | default "Accueil" }}</span>
|
||||||
|
</a>
|
||||||
|
<meta itemprop="position" content="1" />
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<!-- Category with SEO and linking -->
|
||||||
|
{{ if or .Params.categories .Section }}
|
||||||
|
{{ $category := "" }}
|
||||||
|
{{ $categorySlug := "" }}
|
||||||
|
{{ $categoryUrl := "" }}
|
||||||
|
|
||||||
|
{{ if .Params.categories }}
|
||||||
|
{{ $category = index .Params.categories 0 }}
|
||||||
|
{{ $categorySlug = urlize $category }}
|
||||||
|
{{ $categoryUrl = printf "/categories/%s" $categorySlug }}
|
||||||
|
{{ else if .Section }}
|
||||||
|
{{ $category = humanize .Section }}
|
||||||
|
{{ $categorySlug = .Section }}
|
||||||
|
{{ $categoryUrl = printf "/%s" .Section }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
{{ if $category }}
|
||||||
|
<li class="breadcrumb-item active" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" aria-current="page">
|
||||||
|
<a href="{{ $categoryUrl | relLangURL }}" itemprop="item" title="{{ $category }}">
|
||||||
|
<span itemprop="name">{{ $category }}</span>
|
||||||
|
</a>
|
||||||
|
<meta itemprop="position" content="2" />
|
||||||
|
</li>
|
||||||
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
</ol>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- JSON-LD Structured Data for SEO -->
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@type": "BreadcrumbList",
|
||||||
|
"itemListElement": [
|
||||||
|
{
|
||||||
|
"@type": "ListItem",
|
||||||
|
"position": 1,
|
||||||
|
"name": "{{ i18n "home" | default "Accueil" }}",
|
||||||
|
"item": "{{ "/" | absLangURL }}"
|
||||||
|
}{{ if or .Params.categories .Section }},
|
||||||
|
{
|
||||||
|
"@type": "ListItem",
|
||||||
|
"position": 2,
|
||||||
|
"name": "{{ if .Params.categories }}{{ index .Params.categories 0 }}{{ else }}{{ humanize .Section }}{{ end }}",
|
||||||
|
"item": "{{ if .Params.categories }}{{ printf "%s/categories/%s" (absLangURL "") (urlize (index .Params.categories 0)) }}{{ else }}{{ printf "%s/%s" (absLangURL "") .Section }}{{ end }}"
|
||||||
|
}{{ end }}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
</script>
|
||||||
46
layouts/partials/header.html
Normal file
46
layouts/partials/header.html
Normal file
@@ -0,0 +1,46 @@
|
|||||||
|
<!-- Header -->
|
||||||
|
<div class="header center header-color-dark">
|
||||||
|
<div class="container">
|
||||||
|
<!-- Logo -->
|
||||||
|
<div class="header-logo">
|
||||||
|
<h3 class="uppercase letter-spacing-1"><a href="/">{{ .Site.Title }}</a></h3>
|
||||||
|
</div>
|
||||||
|
<!-- Menu -->
|
||||||
|
<div class="header-menu">
|
||||||
|
<ul class="nav">
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="/">Accueil</a>
|
||||||
|
</li>
|
||||||
|
{{ if .Site.Data.wordpress }}
|
||||||
|
{{ $count := 0 }}
|
||||||
|
{{ range $index, $element := .Site.Data.wordpress.categories }}
|
||||||
|
{{ if or (eq $element.name "Featured") (eq $element.name "Non classé") }}
|
||||||
|
{{ continue }}
|
||||||
|
{{ else if lt $count 5 }}
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="/categories/{{ $element.slug }}">{{ $element.name }}</a>
|
||||||
|
</li>
|
||||||
|
{{ $count = add $count 1 }}
|
||||||
|
{{ else }}
|
||||||
|
{{ break }}
|
||||||
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<!-- Menu Extra -->
|
||||||
|
{{/* <div class="header-menu-extra">
|
||||||
|
<ul class="list-inline-sm">
|
||||||
|
<li><a href="#"><i class="bi bi-facebook"></i></a></li>
|
||||||
|
<li><a href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||||
|
<li><a href="#"><i class="bi bi-linkedin"></i></a></li>
|
||||||
|
</ul>
|
||||||
|
</div> */}}
|
||||||
|
<!-- Menu Toggle -->
|
||||||
|
<button class="header-toggle">
|
||||||
|
<span></span>
|
||||||
|
</button>
|
||||||
|
</div><!-- end container -->
|
||||||
|
</div>
|
||||||
|
<!-- end Header -->
|
||||||
|
|
||||||
412
static/assets/css/theme-colors/theme-color-aqua.css
Normal file
412
static/assets/css/theme-colors/theme-color-aqua.css
Normal file
@@ -0,0 +1,412 @@
|
|||||||
|
/*------------------------------------------------
|
||||||
|
*
|
||||||
|
* Theme Color - Aqua
|
||||||
|
*
|
||||||
|
-------------------------------------------------*/
|
||||||
|
.theme-color-aqua a:not([class^='button']):not([class^="link-social"]):not(.header-logo a):hover {
|
||||||
|
color: #03D4D8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua [class*='bg-gradient'] a:not([class^='button']):not([class^="link-social"]):not(.header-logo a):hover,
|
||||||
|
.theme-color-aqua [class*='bg-color'] a:not([class^='button']):not([class^="link-social"]):not(.header-logo a):hover {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.theme-color-aqua .header .header-menu:not([class*='dropdown-color']) .nav .nav-item .nav-dropdown a:not([class^='button']):not([class^="link-social"]):hover, .theme-color-aqua .header .header-menu:not([class*='dropdown-color']) .nav .nav-item .nav-dropdown a:not([class^='button']):not([class^="link-social"]):focus {
|
||||||
|
color: #03D4D8;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.theme-color-aqua .bg-color-theme {
|
||||||
|
background: #03D4D8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua .bg-color-theme-09 {
|
||||||
|
background: rgba(3, 212, 216, 0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua .bg-color-theme-08 {
|
||||||
|
background: rgba(3, 212, 216, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua .bg-color-theme-07 {
|
||||||
|
background: rgba(3, 212, 216, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua .bg-color-theme-06 {
|
||||||
|
background: rgba(3, 212, 216, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua .bg-color-theme-05 {
|
||||||
|
background: rgba(3, 212, 216, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua .bg-color-theme-04 {
|
||||||
|
background: rgba(3, 212, 216, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua .bg-color-theme-03 {
|
||||||
|
background: rgba(3, 212, 216, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua .bg-color-theme-02 {
|
||||||
|
background: rgba(3, 212, 216, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua .bg-color-theme-01 {
|
||||||
|
background: rgba(3, 212, 216, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua .bg-light-theme {
|
||||||
|
background: #CEF6F7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua .button-theme {
|
||||||
|
background: #03D4D8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua .button-outline-theme {
|
||||||
|
border-color: #03D4D8;
|
||||||
|
color: #03D4D8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua .button-outline-theme:hover, .theme-color-aqua .button-outline-theme:focus {
|
||||||
|
background: #03D4D8;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua .button-circle-theme {
|
||||||
|
background: #03D4D8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua .button-circle-outline-theme {
|
||||||
|
border-color: #03D4D8;
|
||||||
|
color: #03D4D8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua .button-circle-outline-theme:hover, .theme-color-aqua .button-circle-outline-theme:focus {
|
||||||
|
background: #03D4D8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua .button-backdrop-color-theme {
|
||||||
|
background: #03D4D8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua .button-text-theme.button-text-1, .theme-color-aqua .button-text-theme.button-text-2, .theme-color-aqua .button-text-theme.button-text-3 {
|
||||||
|
color: #03D4D8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua .button-text-theme.button-text-1:hover, .theme-color-aqua .button-text-theme.button-text-2:hover, .theme-color-aqua .button-text-theme.button-text-3:hover {
|
||||||
|
color: #03D4D8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua .button-text-theme.button-text-1:before {
|
||||||
|
background: rgba(3, 212, 216, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua .button-text-theme.button-text-1:after {
|
||||||
|
background: #03D4D8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua .button-text-theme.button-text-2:before {
|
||||||
|
background: rgba(3, 212, 216, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua .button-text-theme.button-text-2:after {
|
||||||
|
background: #03D4D8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua .button-text-theme.button-text-3:before {
|
||||||
|
background: #03D4D8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua .button-text-theme.button-text-3:hover:before {
|
||||||
|
background: #03D4D8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua .bg-black .button-text-theme.button-text-1, .theme-color-aqua .bg-black .button-text-theme.button-text-2, .theme-color-aqua .bg-black .button-text-theme.button-text-3,
|
||||||
|
.theme-color-aqua [class*='bg-dark'] .button-text-theme.button-text-1,
|
||||||
|
.theme-color-aqua [class*='bg-dark'] .button-text-theme.button-text-2,
|
||||||
|
.theme-color-aqua [class*='bg-dark'] .button-text-theme.button-text-3 {
|
||||||
|
color: #03D4D8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua .bg-black .button-text-theme.button-text-1:hover, .theme-color-aqua .bg-black .button-text-theme.button-text-2:hover, .theme-color-aqua .bg-black .button-text-theme.button-text-3:hover,
|
||||||
|
.theme-color-aqua [class*='bg-dark'] .button-text-theme.button-text-1:hover,
|
||||||
|
.theme-color-aqua [class*='bg-dark'] .button-text-theme.button-text-2:hover,
|
||||||
|
.theme-color-aqua [class*='bg-dark'] .button-text-theme.button-text-3:hover {
|
||||||
|
color: #03D4D8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua .bg-black .button-text-theme.button-text-1:before,
|
||||||
|
.theme-color-aqua [class*='bg-dark'] .button-text-theme.button-text-1:before {
|
||||||
|
background: rgba(3, 212, 216, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua .bg-black .button-text-theme.button-text-1:after,
|
||||||
|
.theme-color-aqua [class*='bg-dark'] .button-text-theme.button-text-1:after {
|
||||||
|
background: #03D4D8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua .bg-black .button-text-theme.button-text-2:before,
|
||||||
|
.theme-color-aqua [class*='bg-dark'] .button-text-theme.button-text-2:before {
|
||||||
|
background: rgba(3, 212, 216, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua .bg-black .button-text-theme.button-text-2:after,
|
||||||
|
.theme-color-aqua [class*='bg-dark'] .button-text-theme.button-text-2:after {
|
||||||
|
background: #03D4D8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua .bg-black .button-text-theme.button-text-3:before,
|
||||||
|
.theme-color-aqua [class*='bg-dark'] .button-text-theme.button-text-3:before {
|
||||||
|
background: #03D4D8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua .bg-black .button-text-theme.button-text-3:hover:before,
|
||||||
|
.theme-color-aqua [class*='bg-dark'] .button-text-theme.button-text-3:hover:before {
|
||||||
|
background: #03D4D8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua .text-color-theme {
|
||||||
|
color: #03D4D8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua .progress-box.progress-theme .animated-progress div {
|
||||||
|
background: #03D4D8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua [class*='bg-gradient'] .progress-box.progress-theme .animated-progress div,
|
||||||
|
.theme-color-aqua [class*='bg-color'] .progress-box.progress-theme .animated-progress div {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua.preloader-theme .preloader-1 div .loader-path {
|
||||||
|
stroke: #03D4D8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua.preloader-theme .preloader-2 div span {
|
||||||
|
background: #03D4D8;
|
||||||
|
background: linear-gradient(to right, #03D4D8 10%, transparent 40%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua.preloader-theme .preloader-2 div span:before {
|
||||||
|
background: #03D4D8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua.preloader-theme .preloader-3 div span:before, .theme-color-aqua.preloader-theme .preloader-3 div span:after {
|
||||||
|
background: rgba(3, 212, 216, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua .accordion li .accordion-title {
|
||||||
|
border-color: rgba(3, 212, 216, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua .accordion li .accordion-title:before, .theme-color-aqua .accordion li .accordion-title:after {
|
||||||
|
background: #03D4D8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua .accordion li .accordion-title h1, .theme-color-aqua .accordion li .accordion-title h2, .theme-color-aqua .accordion li .accordion-title h3, .theme-color-aqua .accordion li .accordion-title h4, .theme-color-aqua .accordion li .accordion-title h5, .theme-color-aqua .accordion li .accordion-title h6 {
|
||||||
|
color: #03D4D8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua .accordion li.active .accordion-title {
|
||||||
|
border-color: #03D4D8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua .accordion.style-3 li .accordion-title {
|
||||||
|
background: #CEF6F7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua .accordion.style-3 li.active .accordion-title {
|
||||||
|
background: #03D4D8;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua .accordion.style-3 li.active .accordion-title:before, .theme-color-aqua .accordion.style-3 li.active .accordion-title:after {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua .accordion.style-3 li.active .accordion-title h1, .theme-color-aqua .accordion.style-3 li.active .accordion-title h2, .theme-color-aqua .accordion.style-3 li.active .accordion-title h3, .theme-color-aqua .accordion.style-3 li.active .accordion-title h4, .theme-color-aqua .accordion.style-3 li.active .accordion-title h5, .theme-color-aqua .accordion.style-3 li.active .accordion-title h6 {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua .bg-black .accordion li .accordion-title,
|
||||||
|
.theme-color-aqua [class*='bg-dark'] .accordion li .accordion-title {
|
||||||
|
border-color: rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua .bg-black .accordion li .accordion-title:before, .theme-color-aqua .bg-black .accordion li .accordion-title:after,
|
||||||
|
.theme-color-aqua [class*='bg-dark'] .accordion li .accordion-title:before,
|
||||||
|
.theme-color-aqua [class*='bg-dark'] .accordion li .accordion-title:after {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua .bg-black .accordion li.active .accordion-title,
|
||||||
|
.theme-color-aqua [class*='bg-dark'] .accordion li.active .accordion-title {
|
||||||
|
border-color: #03D4D8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua .bg-black .accordion.style-3 li .accordion-title,
|
||||||
|
.theme-color-aqua [class*='bg-dark'] .accordion.style-3 li .accordion-title {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua .bg-black .accordion.style-3 li.active .accordion-title,
|
||||||
|
.theme-color-aqua [class*='bg-dark'] .accordion.style-3 li.active .accordion-title {
|
||||||
|
background: #03D4D8;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua .bg-black .accordion.style-3 li.active .accordion-title:before, .theme-color-aqua .bg-black .accordion.style-3 li.active .accordion-title:after,
|
||||||
|
.theme-color-aqua [class*='bg-dark'] .accordion.style-3 li.active .accordion-title:before,
|
||||||
|
.theme-color-aqua [class*='bg-dark'] .accordion.style-3 li.active .accordion-title:after {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua .bg-black .accordion.style-3 li.active .accordion-title h1, .theme-color-aqua .bg-black .accordion.style-3 li.active .accordion-title h2, .theme-color-aqua .bg-black .accordion.style-3 li.active .accordion-title h3, .theme-color-aqua .bg-black .accordion.style-3 li.active .accordion-title h4, .theme-color-aqua .bg-black .accordion.style-3 li.active .accordion-title h5, .theme-color-aqua .bg-black .accordion.style-3 li.active .accordion-title h6,
|
||||||
|
.theme-color-aqua [class*='bg-dark'] .accordion.style-3 li.active .accordion-title h1,
|
||||||
|
.theme-color-aqua [class*='bg-dark'] .accordion.style-3 li.active .accordion-title h2,
|
||||||
|
.theme-color-aqua [class*='bg-dark'] .accordion.style-3 li.active .accordion-title h3,
|
||||||
|
.theme-color-aqua [class*='bg-dark'] .accordion.style-3 li.active .accordion-title h4,
|
||||||
|
.theme-color-aqua [class*='bg-dark'] .accordion.style-3 li.active .accordion-title h5,
|
||||||
|
.theme-color-aqua [class*='bg-dark'] .accordion.style-3 li.active .accordion-title h6 {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua [class*='bg-gradient'] .accordion li .accordion-title,
|
||||||
|
.theme-color-aqua [class*='bg-color'] .accordion li .accordion-title {
|
||||||
|
border-color: rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua [class*='bg-gradient'] .accordion li .accordion-title h1, .theme-color-aqua [class*='bg-gradient'] .accordion li .accordion-title h2, .theme-color-aqua [class*='bg-gradient'] .accordion li .accordion-title h3, .theme-color-aqua [class*='bg-gradient'] .accordion li .accordion-title h4, .theme-color-aqua [class*='bg-gradient'] .accordion li .accordion-title h5, .theme-color-aqua [class*='bg-gradient'] .accordion li .accordion-title h6,
|
||||||
|
.theme-color-aqua [class*='bg-color'] .accordion li .accordion-title h1,
|
||||||
|
.theme-color-aqua [class*='bg-color'] .accordion li .accordion-title h2,
|
||||||
|
.theme-color-aqua [class*='bg-color'] .accordion li .accordion-title h3,
|
||||||
|
.theme-color-aqua [class*='bg-color'] .accordion li .accordion-title h4,
|
||||||
|
.theme-color-aqua [class*='bg-color'] .accordion li .accordion-title h5,
|
||||||
|
.theme-color-aqua [class*='bg-color'] .accordion li .accordion-title h6 {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua [class*='bg-gradient'] .accordion li .accordion-title:before, .theme-color-aqua [class*='bg-gradient'] .accordion li .accordion-title:after,
|
||||||
|
.theme-color-aqua [class*='bg-color'] .accordion li .accordion-title:before,
|
||||||
|
.theme-color-aqua [class*='bg-color'] .accordion li .accordion-title:after {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua [class*='bg-gradient'] .accordion li.active .accordion-title,
|
||||||
|
.theme-color-aqua [class*='bg-color'] .accordion li.active .accordion-title {
|
||||||
|
border-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua [class*='bg-gradient'] .accordion.style-3 li .accordion-title,
|
||||||
|
.theme-color-aqua [class*='bg-color'] .accordion.style-3 li .accordion-title {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua [class*='bg-gradient'] .accordion.style-3 li .accordion-title h1, .theme-color-aqua [class*='bg-gradient'] .accordion.style-3 li .accordion-title h2, .theme-color-aqua [class*='bg-gradient'] .accordion.style-3 li .accordion-title h3, .theme-color-aqua [class*='bg-gradient'] .accordion.style-3 li .accordion-title h4, .theme-color-aqua [class*='bg-gradient'] .accordion.style-3 li .accordion-title h5, .theme-color-aqua [class*='bg-gradient'] .accordion.style-3 li .accordion-title h6,
|
||||||
|
.theme-color-aqua [class*='bg-color'] .accordion.style-3 li .accordion-title h1,
|
||||||
|
.theme-color-aqua [class*='bg-color'] .accordion.style-3 li .accordion-title h2,
|
||||||
|
.theme-color-aqua [class*='bg-color'] .accordion.style-3 li .accordion-title h3,
|
||||||
|
.theme-color-aqua [class*='bg-color'] .accordion.style-3 li .accordion-title h4,
|
||||||
|
.theme-color-aqua [class*='bg-color'] .accordion.style-3 li .accordion-title h5,
|
||||||
|
.theme-color-aqua [class*='bg-color'] .accordion.style-3 li .accordion-title h6 {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title,
|
||||||
|
.theme-color-aqua [class*='bg-color'] .accordion.style-3 li.active .accordion-title {
|
||||||
|
background: white;
|
||||||
|
color: #7C7C7C;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title:before, .theme-color-aqua [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title:after,
|
||||||
|
.theme-color-aqua [class*='bg-color'] .accordion.style-3 li.active .accordion-title:before,
|
||||||
|
.theme-color-aqua [class*='bg-color'] .accordion.style-3 li.active .accordion-title:after {
|
||||||
|
background: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title h1, .theme-color-aqua [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title h2, .theme-color-aqua [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title h3, .theme-color-aqua [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title h4, .theme-color-aqua [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title h5, .theme-color-aqua [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title h6,
|
||||||
|
.theme-color-aqua [class*='bg-color'] .accordion.style-3 li.active .accordion-title h1,
|
||||||
|
.theme-color-aqua [class*='bg-color'] .accordion.style-3 li.active .accordion-title h2,
|
||||||
|
.theme-color-aqua [class*='bg-color'] .accordion.style-3 li.active .accordion-title h3,
|
||||||
|
.theme-color-aqua [class*='bg-color'] .accordion.style-3 li.active .accordion-title h4,
|
||||||
|
.theme-color-aqua [class*='bg-color'] .accordion.style-3 li.active .accordion-title h5,
|
||||||
|
.theme-color-aqua [class*='bg-color'] .accordion.style-3 li.active .accordion-title h6 {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua .text-link-2:before,
|
||||||
|
.theme-color-aqua .text-link-3:before,
|
||||||
|
.theme-color-aqua .text-link-4:before {
|
||||||
|
background: #03D4D8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua .text-link-5:after,
|
||||||
|
.theme-color-aqua .text-link-6:after,
|
||||||
|
.theme-color-aqua .text-link-7:after {
|
||||||
|
background: #03D4D8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua .text-link-8:before {
|
||||||
|
background: rgba(3, 212, 216, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua .bg-black .text-link-2:before,
|
||||||
|
.theme-color-aqua .bg-black .text-link-3:before,
|
||||||
|
.theme-color-aqua .bg-black .text-link-4:before,
|
||||||
|
.theme-color-aqua [class*='bg-dark'] .text-link-2:before,
|
||||||
|
.theme-color-aqua [class*='bg-dark'] .text-link-3:before,
|
||||||
|
.theme-color-aqua [class*='bg-dark'] .text-link-4:before {
|
||||||
|
background: #03D4D8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua .bg-black .text-link-5:after,
|
||||||
|
.theme-color-aqua .bg-black .text-link-6:after,
|
||||||
|
.theme-color-aqua .bg-black .text-link-7:after,
|
||||||
|
.theme-color-aqua [class*='bg-dark'] .text-link-5:after,
|
||||||
|
.theme-color-aqua [class*='bg-dark'] .text-link-6:after,
|
||||||
|
.theme-color-aqua [class*='bg-dark'] .text-link-7:after {
|
||||||
|
background: #03D4D8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua .bg-black .text-link-8:before,
|
||||||
|
.theme-color-aqua [class*='bg-dark'] .text-link-8:before {
|
||||||
|
background: rgba(3, 212, 216, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua [class*='bg-gradient'] .text-link-2:before, .theme-color-aqua [class*='bg-gradient'] .text-link-3:before, .theme-color-aqua [class*='bg-gradient'] .text-link-4:before,
|
||||||
|
.theme-color-aqua [class*='bg-color'] .text-link-2:before,
|
||||||
|
.theme-color-aqua [class*='bg-color'] .text-link-3:before,
|
||||||
|
.theme-color-aqua [class*='bg-color'] .text-link-4:before {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua [class*='bg-gradient'] .text-link-5:before, .theme-color-aqua [class*='bg-gradient'] .text-link-6:before, .theme-color-aqua [class*='bg-gradient'] .text-link-7:before,
|
||||||
|
.theme-color-aqua [class*='bg-color'] .text-link-5:before,
|
||||||
|
.theme-color-aqua [class*='bg-color'] .text-link-6:before,
|
||||||
|
.theme-color-aqua [class*='bg-color'] .text-link-7:before {
|
||||||
|
background: rgba(255, 255, 255, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua [class*='bg-gradient'] .text-link-5:after, .theme-color-aqua [class*='bg-gradient'] .text-link-6:after, .theme-color-aqua [class*='bg-gradient'] .text-link-7:after,
|
||||||
|
.theme-color-aqua [class*='bg-color'] .text-link-5:after,
|
||||||
|
.theme-color-aqua [class*='bg-color'] .text-link-6:after,
|
||||||
|
.theme-color-aqua [class*='bg-color'] .text-link-7:after {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua [class*='bg-gradient'] .text-link-8:before,
|
||||||
|
.theme-color-aqua [class*='bg-color'] .text-link-8:before {
|
||||||
|
background: rgba(255, 255, 255, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-aqua .form-style-2 input:focus, .theme-color-aqua .form-style-2 textarea:focus, .theme-color-aqua .form-style-2 .custom-select:focus, .theme-color-aqua .form-style-2 .form-control:focus,
|
||||||
|
.theme-color-aqua .form-style-4 input:focus,
|
||||||
|
.theme-color-aqua .form-style-4 textarea:focus,
|
||||||
|
.theme-color-aqua .form-style-4 .custom-select:focus,
|
||||||
|
.theme-color-aqua .form-style-4 .form-control:focus {
|
||||||
|
border-color: #03D4D8;
|
||||||
|
}
|
||||||
412
static/assets/css/theme-colors/theme-color-blue.css
Normal file
412
static/assets/css/theme-colors/theme-color-blue.css
Normal file
@@ -0,0 +1,412 @@
|
|||||||
|
/*------------------------------------------------
|
||||||
|
*
|
||||||
|
* Theme Color - Blue
|
||||||
|
*
|
||||||
|
-------------------------------------------------*/
|
||||||
|
.theme-color-blue a:not([class^='button']):not([class^="link-social"]):not(.header-logo a):hover {
|
||||||
|
color: #0093E9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue [class*='bg-gradient'] a:not([class^='button']):not([class^="link-social"]):not(.header-logo a):hover,
|
||||||
|
.theme-color-blue [class*='bg-color'] a:not([class^='button']):not([class^="link-social"]):not(.header-logo a):hover {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.theme-color-blue .header .header-menu:not([class*='dropdown-color']) .nav .nav-item .nav-dropdown a:not([class^='button']):not([class^="link-social"]):hover, .theme-color-blue .header .header-menu:not([class*='dropdown-color']) .nav .nav-item .nav-dropdown a:not([class^='button']):not([class^="link-social"]):focus {
|
||||||
|
color: #0093E9;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.theme-color-blue .bg-color-theme {
|
||||||
|
background: #0093E9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue .bg-color-theme-09 {
|
||||||
|
background: rgba(0, 147, 233, 0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue .bg-color-theme-08 {
|
||||||
|
background: rgba(0, 147, 233, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue .bg-color-theme-07 {
|
||||||
|
background: rgba(0, 147, 233, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue .bg-color-theme-06 {
|
||||||
|
background: rgba(0, 147, 233, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue .bg-color-theme-05 {
|
||||||
|
background: rgba(0, 147, 233, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue .bg-color-theme-04 {
|
||||||
|
background: rgba(0, 147, 233, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue .bg-color-theme-03 {
|
||||||
|
background: rgba(0, 147, 233, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue .bg-color-theme-02 {
|
||||||
|
background: rgba(0, 147, 233, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue .bg-color-theme-01 {
|
||||||
|
background: rgba(0, 147, 233, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue .bg-light-theme {
|
||||||
|
background: #e2f2fb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue .button-theme {
|
||||||
|
background: #0093E9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue .button-outline-theme {
|
||||||
|
border-color: #0093E9;
|
||||||
|
color: #0093E9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue .button-outline-theme:hover, .theme-color-blue .button-outline-theme:focus {
|
||||||
|
background: #0093E9;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue .button-circle-theme {
|
||||||
|
background: #0093E9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue .button-circle-outline-theme {
|
||||||
|
border-color: #0093E9;
|
||||||
|
color: #0093E9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue .button-circle-outline-theme:hover, .theme-color-blue .button-circle-outline-theme:focus {
|
||||||
|
background: #0093E9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue .button-backdrop-color-theme {
|
||||||
|
background: #0093E9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue .button-text-theme.button-text-1, .theme-color-blue .button-text-theme.button-text-2, .theme-color-blue .button-text-theme.button-text-3 {
|
||||||
|
color: #0093E9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue .button-text-theme.button-text-1:hover, .theme-color-blue .button-text-theme.button-text-2:hover, .theme-color-blue .button-text-theme.button-text-3:hover {
|
||||||
|
color: #0093E9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue .button-text-theme.button-text-1:before {
|
||||||
|
background: rgba(0, 147, 233, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue .button-text-theme.button-text-1:after {
|
||||||
|
background: #0093E9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue .button-text-theme.button-text-2:before {
|
||||||
|
background: rgba(0, 147, 233, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue .button-text-theme.button-text-2:after {
|
||||||
|
background: #0093E9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue .button-text-theme.button-text-3:before {
|
||||||
|
background: #0093E9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue .button-text-theme.button-text-3:hover:before {
|
||||||
|
background: #0093E9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue .bg-black .button-text-theme.button-text-1, .theme-color-blue .bg-black .button-text-theme.button-text-2, .theme-color-blue .bg-black .button-text-theme.button-text-3,
|
||||||
|
.theme-color-blue [class*='bg-dark'] .button-text-theme.button-text-1,
|
||||||
|
.theme-color-blue [class*='bg-dark'] .button-text-theme.button-text-2,
|
||||||
|
.theme-color-blue [class*='bg-dark'] .button-text-theme.button-text-3 {
|
||||||
|
color: #0093E9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue .bg-black .button-text-theme.button-text-1:hover, .theme-color-blue .bg-black .button-text-theme.button-text-2:hover, .theme-color-blue .bg-black .button-text-theme.button-text-3:hover,
|
||||||
|
.theme-color-blue [class*='bg-dark'] .button-text-theme.button-text-1:hover,
|
||||||
|
.theme-color-blue [class*='bg-dark'] .button-text-theme.button-text-2:hover,
|
||||||
|
.theme-color-blue [class*='bg-dark'] .button-text-theme.button-text-3:hover {
|
||||||
|
color: #0093E9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue .bg-black .button-text-theme.button-text-1:before,
|
||||||
|
.theme-color-blue [class*='bg-dark'] .button-text-theme.button-text-1:before {
|
||||||
|
background: rgba(0, 147, 233, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue .bg-black .button-text-theme.button-text-1:after,
|
||||||
|
.theme-color-blue [class*='bg-dark'] .button-text-theme.button-text-1:after {
|
||||||
|
background: #0093E9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue .bg-black .button-text-theme.button-text-2:before,
|
||||||
|
.theme-color-blue [class*='bg-dark'] .button-text-theme.button-text-2:before {
|
||||||
|
background: rgba(0, 147, 233, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue .bg-black .button-text-theme.button-text-2:after,
|
||||||
|
.theme-color-blue [class*='bg-dark'] .button-text-theme.button-text-2:after {
|
||||||
|
background: #0093E9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue .bg-black .button-text-theme.button-text-3:before,
|
||||||
|
.theme-color-blue [class*='bg-dark'] .button-text-theme.button-text-3:before {
|
||||||
|
background: #0093E9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue .bg-black .button-text-theme.button-text-3:hover:before,
|
||||||
|
.theme-color-blue [class*='bg-dark'] .button-text-theme.button-text-3:hover:before {
|
||||||
|
background: #0093E9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue .text-color-theme {
|
||||||
|
color: #0093E9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue .progress-box.progress-theme .animated-progress div {
|
||||||
|
background: #0093E9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue [class*='bg-gradient'] .progress-box.progress-theme .animated-progress div,
|
||||||
|
.theme-color-blue [class*='bg-color'] .progress-box.progress-theme .animated-progress div {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue.preloader-theme .preloader-1 div .loader-path {
|
||||||
|
stroke: #0093E9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue.preloader-theme .preloader-2 div span {
|
||||||
|
background: #0093E9;
|
||||||
|
background: linear-gradient(to right, #0093E9 10%, transparent 40%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue.preloader-theme .preloader-2 div span:before {
|
||||||
|
background: #0093E9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue.preloader-theme .preloader-3 div span:before, .theme-color-blue.preloader-theme .preloader-3 div span:after {
|
||||||
|
background: rgba(0, 147, 233, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue .accordion li .accordion-title {
|
||||||
|
border-color: rgba(0, 147, 233, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue .accordion li .accordion-title:before, .theme-color-blue .accordion li .accordion-title:after {
|
||||||
|
background: #0093E9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue .accordion li .accordion-title h1, .theme-color-blue .accordion li .accordion-title h2, .theme-color-blue .accordion li .accordion-title h3, .theme-color-blue .accordion li .accordion-title h4, .theme-color-blue .accordion li .accordion-title h5, .theme-color-blue .accordion li .accordion-title h6 {
|
||||||
|
color: #0093E9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue .accordion li.active .accordion-title {
|
||||||
|
border-color: #0093E9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue .accordion.style-3 li .accordion-title {
|
||||||
|
background: #e2f2fb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue .accordion.style-3 li.active .accordion-title {
|
||||||
|
background: #0093E9;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue .accordion.style-3 li.active .accordion-title:before, .theme-color-blue .accordion.style-3 li.active .accordion-title:after {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue .accordion.style-3 li.active .accordion-title h1, .theme-color-blue .accordion.style-3 li.active .accordion-title h2, .theme-color-blue .accordion.style-3 li.active .accordion-title h3, .theme-color-blue .accordion.style-3 li.active .accordion-title h4, .theme-color-blue .accordion.style-3 li.active .accordion-title h5, .theme-color-blue .accordion.style-3 li.active .accordion-title h6 {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue .bg-black .accordion li .accordion-title,
|
||||||
|
.theme-color-blue [class*='bg-dark'] .accordion li .accordion-title {
|
||||||
|
border-color: rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue .bg-black .accordion li .accordion-title:before, .theme-color-blue .bg-black .accordion li .accordion-title:after,
|
||||||
|
.theme-color-blue [class*='bg-dark'] .accordion li .accordion-title:before,
|
||||||
|
.theme-color-blue [class*='bg-dark'] .accordion li .accordion-title:after {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue .bg-black .accordion li.active .accordion-title,
|
||||||
|
.theme-color-blue [class*='bg-dark'] .accordion li.active .accordion-title {
|
||||||
|
border-color: #0093E9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue .bg-black .accordion.style-3 li .accordion-title,
|
||||||
|
.theme-color-blue [class*='bg-dark'] .accordion.style-3 li .accordion-title {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue .bg-black .accordion.style-3 li.active .accordion-title,
|
||||||
|
.theme-color-blue [class*='bg-dark'] .accordion.style-3 li.active .accordion-title {
|
||||||
|
background: #0093E9;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue .bg-black .accordion.style-3 li.active .accordion-title:before, .theme-color-blue .bg-black .accordion.style-3 li.active .accordion-title:after,
|
||||||
|
.theme-color-blue [class*='bg-dark'] .accordion.style-3 li.active .accordion-title:before,
|
||||||
|
.theme-color-blue [class*='bg-dark'] .accordion.style-3 li.active .accordion-title:after {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue .bg-black .accordion.style-3 li.active .accordion-title h1, .theme-color-blue .bg-black .accordion.style-3 li.active .accordion-title h2, .theme-color-blue .bg-black .accordion.style-3 li.active .accordion-title h3, .theme-color-blue .bg-black .accordion.style-3 li.active .accordion-title h4, .theme-color-blue .bg-black .accordion.style-3 li.active .accordion-title h5, .theme-color-blue .bg-black .accordion.style-3 li.active .accordion-title h6,
|
||||||
|
.theme-color-blue [class*='bg-dark'] .accordion.style-3 li.active .accordion-title h1,
|
||||||
|
.theme-color-blue [class*='bg-dark'] .accordion.style-3 li.active .accordion-title h2,
|
||||||
|
.theme-color-blue [class*='bg-dark'] .accordion.style-3 li.active .accordion-title h3,
|
||||||
|
.theme-color-blue [class*='bg-dark'] .accordion.style-3 li.active .accordion-title h4,
|
||||||
|
.theme-color-blue [class*='bg-dark'] .accordion.style-3 li.active .accordion-title h5,
|
||||||
|
.theme-color-blue [class*='bg-dark'] .accordion.style-3 li.active .accordion-title h6 {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue [class*='bg-gradient'] .accordion li .accordion-title,
|
||||||
|
.theme-color-blue [class*='bg-color'] .accordion li .accordion-title {
|
||||||
|
border-color: rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue [class*='bg-gradient'] .accordion li .accordion-title h1, .theme-color-blue [class*='bg-gradient'] .accordion li .accordion-title h2, .theme-color-blue [class*='bg-gradient'] .accordion li .accordion-title h3, .theme-color-blue [class*='bg-gradient'] .accordion li .accordion-title h4, .theme-color-blue [class*='bg-gradient'] .accordion li .accordion-title h5, .theme-color-blue [class*='bg-gradient'] .accordion li .accordion-title h6,
|
||||||
|
.theme-color-blue [class*='bg-color'] .accordion li .accordion-title h1,
|
||||||
|
.theme-color-blue [class*='bg-color'] .accordion li .accordion-title h2,
|
||||||
|
.theme-color-blue [class*='bg-color'] .accordion li .accordion-title h3,
|
||||||
|
.theme-color-blue [class*='bg-color'] .accordion li .accordion-title h4,
|
||||||
|
.theme-color-blue [class*='bg-color'] .accordion li .accordion-title h5,
|
||||||
|
.theme-color-blue [class*='bg-color'] .accordion li .accordion-title h6 {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue [class*='bg-gradient'] .accordion li .accordion-title:before, .theme-color-blue [class*='bg-gradient'] .accordion li .accordion-title:after,
|
||||||
|
.theme-color-blue [class*='bg-color'] .accordion li .accordion-title:before,
|
||||||
|
.theme-color-blue [class*='bg-color'] .accordion li .accordion-title:after {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue [class*='bg-gradient'] .accordion li.active .accordion-title,
|
||||||
|
.theme-color-blue [class*='bg-color'] .accordion li.active .accordion-title {
|
||||||
|
border-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue [class*='bg-gradient'] .accordion.style-3 li .accordion-title,
|
||||||
|
.theme-color-blue [class*='bg-color'] .accordion.style-3 li .accordion-title {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue [class*='bg-gradient'] .accordion.style-3 li .accordion-title h1, .theme-color-blue [class*='bg-gradient'] .accordion.style-3 li .accordion-title h2, .theme-color-blue [class*='bg-gradient'] .accordion.style-3 li .accordion-title h3, .theme-color-blue [class*='bg-gradient'] .accordion.style-3 li .accordion-title h4, .theme-color-blue [class*='bg-gradient'] .accordion.style-3 li .accordion-title h5, .theme-color-blue [class*='bg-gradient'] .accordion.style-3 li .accordion-title h6,
|
||||||
|
.theme-color-blue [class*='bg-color'] .accordion.style-3 li .accordion-title h1,
|
||||||
|
.theme-color-blue [class*='bg-color'] .accordion.style-3 li .accordion-title h2,
|
||||||
|
.theme-color-blue [class*='bg-color'] .accordion.style-3 li .accordion-title h3,
|
||||||
|
.theme-color-blue [class*='bg-color'] .accordion.style-3 li .accordion-title h4,
|
||||||
|
.theme-color-blue [class*='bg-color'] .accordion.style-3 li .accordion-title h5,
|
||||||
|
.theme-color-blue [class*='bg-color'] .accordion.style-3 li .accordion-title h6 {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title,
|
||||||
|
.theme-color-blue [class*='bg-color'] .accordion.style-3 li.active .accordion-title {
|
||||||
|
background: white;
|
||||||
|
color: #7C7C7C;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title:before, .theme-color-blue [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title:after,
|
||||||
|
.theme-color-blue [class*='bg-color'] .accordion.style-3 li.active .accordion-title:before,
|
||||||
|
.theme-color-blue [class*='bg-color'] .accordion.style-3 li.active .accordion-title:after {
|
||||||
|
background: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title h1, .theme-color-blue [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title h2, .theme-color-blue [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title h3, .theme-color-blue [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title h4, .theme-color-blue [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title h5, .theme-color-blue [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title h6,
|
||||||
|
.theme-color-blue [class*='bg-color'] .accordion.style-3 li.active .accordion-title h1,
|
||||||
|
.theme-color-blue [class*='bg-color'] .accordion.style-3 li.active .accordion-title h2,
|
||||||
|
.theme-color-blue [class*='bg-color'] .accordion.style-3 li.active .accordion-title h3,
|
||||||
|
.theme-color-blue [class*='bg-color'] .accordion.style-3 li.active .accordion-title h4,
|
||||||
|
.theme-color-blue [class*='bg-color'] .accordion.style-3 li.active .accordion-title h5,
|
||||||
|
.theme-color-blue [class*='bg-color'] .accordion.style-3 li.active .accordion-title h6 {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue .text-link-2:before,
|
||||||
|
.theme-color-blue .text-link-3:before,
|
||||||
|
.theme-color-blue .text-link-4:before {
|
||||||
|
background: #0093E9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue .text-link-5:after,
|
||||||
|
.theme-color-blue .text-link-6:after,
|
||||||
|
.theme-color-blue .text-link-7:after {
|
||||||
|
background: #0093E9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue .text-link-8:before {
|
||||||
|
background: rgba(0, 147, 233, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue .bg-black .text-link-2:before,
|
||||||
|
.theme-color-blue .bg-black .text-link-3:before,
|
||||||
|
.theme-color-blue .bg-black .text-link-4:before,
|
||||||
|
.theme-color-blue [class*='bg-dark'] .text-link-2:before,
|
||||||
|
.theme-color-blue [class*='bg-dark'] .text-link-3:before,
|
||||||
|
.theme-color-blue [class*='bg-dark'] .text-link-4:before {
|
||||||
|
background: #0093E9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue .bg-black .text-link-5:after,
|
||||||
|
.theme-color-blue .bg-black .text-link-6:after,
|
||||||
|
.theme-color-blue .bg-black .text-link-7:after,
|
||||||
|
.theme-color-blue [class*='bg-dark'] .text-link-5:after,
|
||||||
|
.theme-color-blue [class*='bg-dark'] .text-link-6:after,
|
||||||
|
.theme-color-blue [class*='bg-dark'] .text-link-7:after {
|
||||||
|
background: #0093E9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue .bg-black .text-link-8:before,
|
||||||
|
.theme-color-blue [class*='bg-dark'] .text-link-8:before {
|
||||||
|
background: rgba(0, 147, 233, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue [class*='bg-gradient'] .text-link-2:before, .theme-color-blue [class*='bg-gradient'] .text-link-3:before, .theme-color-blue [class*='bg-gradient'] .text-link-4:before,
|
||||||
|
.theme-color-blue [class*='bg-color'] .text-link-2:before,
|
||||||
|
.theme-color-blue [class*='bg-color'] .text-link-3:before,
|
||||||
|
.theme-color-blue [class*='bg-color'] .text-link-4:before {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue [class*='bg-gradient'] .text-link-5:before, .theme-color-blue [class*='bg-gradient'] .text-link-6:before, .theme-color-blue [class*='bg-gradient'] .text-link-7:before,
|
||||||
|
.theme-color-blue [class*='bg-color'] .text-link-5:before,
|
||||||
|
.theme-color-blue [class*='bg-color'] .text-link-6:before,
|
||||||
|
.theme-color-blue [class*='bg-color'] .text-link-7:before {
|
||||||
|
background: rgba(255, 255, 255, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue [class*='bg-gradient'] .text-link-5:after, .theme-color-blue [class*='bg-gradient'] .text-link-6:after, .theme-color-blue [class*='bg-gradient'] .text-link-7:after,
|
||||||
|
.theme-color-blue [class*='bg-color'] .text-link-5:after,
|
||||||
|
.theme-color-blue [class*='bg-color'] .text-link-6:after,
|
||||||
|
.theme-color-blue [class*='bg-color'] .text-link-7:after {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue [class*='bg-gradient'] .text-link-8:before,
|
||||||
|
.theme-color-blue [class*='bg-color'] .text-link-8:before {
|
||||||
|
background: rgba(255, 255, 255, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-blue .form-style-2 input:focus, .theme-color-blue .form-style-2 textarea:focus, .theme-color-blue .form-style-2 .custom-select:focus, .theme-color-blue .form-style-2 .form-control:focus,
|
||||||
|
.theme-color-blue .form-style-4 input:focus,
|
||||||
|
.theme-color-blue .form-style-4 textarea:focus,
|
||||||
|
.theme-color-blue .form-style-4 .custom-select:focus,
|
||||||
|
.theme-color-blue .form-style-4 .form-control:focus {
|
||||||
|
border-color: #0093E9;
|
||||||
|
}
|
||||||
412
static/assets/css/theme-colors/theme-color-golden-yellow.css
Normal file
412
static/assets/css/theme-colors/theme-color-golden-yellow.css
Normal file
@@ -0,0 +1,412 @@
|
|||||||
|
/*------------------------------------------------
|
||||||
|
*
|
||||||
|
* Theme Color - Golden Yellow
|
||||||
|
*
|
||||||
|
-------------------------------------------------*/
|
||||||
|
.theme-color-golden-yellow a:not([class^='button']):not([class^="link-social"]):not(.header-logo a):hover {
|
||||||
|
color: #FFB657;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow [class*='bg-gradient'] a:not([class^='button']):not([class^="link-social"]):not(.header-logo a):hover,
|
||||||
|
.theme-color-golden-yellow [class*='bg-color'] a:not([class^='button']):not([class^="link-social"]):not(.header-logo a):hover {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.theme-color-golden-yellow .header .header-menu:not([class*='dropdown-color']) .nav .nav-item .nav-dropdown a:not([class^='button']):not([class^="link-social"]):hover, .theme-color-golden-yellow .header .header-menu:not([class*='dropdown-color']) .nav .nav-item .nav-dropdown a:not([class^='button']):not([class^="link-social"]):focus {
|
||||||
|
color: #FFB657;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.theme-color-golden-yellow .bg-color-theme {
|
||||||
|
background: #FFB657;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow .bg-color-theme-09 {
|
||||||
|
background: rgba(255, 182, 87, 0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow .bg-color-theme-08 {
|
||||||
|
background: rgba(255, 182, 87, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow .bg-color-theme-07 {
|
||||||
|
background: rgba(255, 182, 87, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow .bg-color-theme-06 {
|
||||||
|
background: rgba(255, 182, 87, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow .bg-color-theme-05 {
|
||||||
|
background: rgba(255, 182, 87, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow .bg-color-theme-04 {
|
||||||
|
background: rgba(255, 182, 87, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow .bg-color-theme-03 {
|
||||||
|
background: rgba(255, 182, 87, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow .bg-color-theme-02 {
|
||||||
|
background: rgba(255, 182, 87, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow .bg-color-theme-01 {
|
||||||
|
background: rgba(255, 182, 87, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow .bg-light-theme {
|
||||||
|
background: #FFEFDB;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow .button-theme {
|
||||||
|
background: #FFB657;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow .button-outline-theme {
|
||||||
|
border-color: #FFB657;
|
||||||
|
color: #FFB657;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow .button-outline-theme:hover, .theme-color-golden-yellow .button-outline-theme:focus {
|
||||||
|
background: #FFB657;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow .button-circle-theme {
|
||||||
|
background: #FFB657;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow .button-circle-outline-theme {
|
||||||
|
border-color: #FFB657;
|
||||||
|
color: #FFB657;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow .button-circle-outline-theme:hover, .theme-color-golden-yellow .button-circle-outline-theme:focus {
|
||||||
|
background: #FFB657;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow .button-backdrop-color-theme {
|
||||||
|
background: #FFB657;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow .button-text-theme.button-text-1, .theme-color-golden-yellow .button-text-theme.button-text-2, .theme-color-golden-yellow .button-text-theme.button-text-3 {
|
||||||
|
color: #FFB657;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow .button-text-theme.button-text-1:hover, .theme-color-golden-yellow .button-text-theme.button-text-2:hover, .theme-color-golden-yellow .button-text-theme.button-text-3:hover {
|
||||||
|
color: #FFB657;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow .button-text-theme.button-text-1:before {
|
||||||
|
background: rgba(255, 182, 87, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow .button-text-theme.button-text-1:after {
|
||||||
|
background: #FFB657;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow .button-text-theme.button-text-2:before {
|
||||||
|
background: rgba(255, 182, 87, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow .button-text-theme.button-text-2:after {
|
||||||
|
background: #FFB657;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow .button-text-theme.button-text-3:before {
|
||||||
|
background: #FFB657;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow .button-text-theme.button-text-3:hover:before {
|
||||||
|
background: #FFB657;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow .bg-black .button-text-theme.button-text-1, .theme-color-golden-yellow .bg-black .button-text-theme.button-text-2, .theme-color-golden-yellow .bg-black .button-text-theme.button-text-3,
|
||||||
|
.theme-color-golden-yellow [class*='bg-dark'] .button-text-theme.button-text-1,
|
||||||
|
.theme-color-golden-yellow [class*='bg-dark'] .button-text-theme.button-text-2,
|
||||||
|
.theme-color-golden-yellow [class*='bg-dark'] .button-text-theme.button-text-3 {
|
||||||
|
color: #FFB657;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow .bg-black .button-text-theme.button-text-1:hover, .theme-color-golden-yellow .bg-black .button-text-theme.button-text-2:hover, .theme-color-golden-yellow .bg-black .button-text-theme.button-text-3:hover,
|
||||||
|
.theme-color-golden-yellow [class*='bg-dark'] .button-text-theme.button-text-1:hover,
|
||||||
|
.theme-color-golden-yellow [class*='bg-dark'] .button-text-theme.button-text-2:hover,
|
||||||
|
.theme-color-golden-yellow [class*='bg-dark'] .button-text-theme.button-text-3:hover {
|
||||||
|
color: #FFB657;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow .bg-black .button-text-theme.button-text-1:before,
|
||||||
|
.theme-color-golden-yellow [class*='bg-dark'] .button-text-theme.button-text-1:before {
|
||||||
|
background: rgba(255, 182, 87, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow .bg-black .button-text-theme.button-text-1:after,
|
||||||
|
.theme-color-golden-yellow [class*='bg-dark'] .button-text-theme.button-text-1:after {
|
||||||
|
background: #FFB657;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow .bg-black .button-text-theme.button-text-2:before,
|
||||||
|
.theme-color-golden-yellow [class*='bg-dark'] .button-text-theme.button-text-2:before {
|
||||||
|
background: rgba(255, 182, 87, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow .bg-black .button-text-theme.button-text-2:after,
|
||||||
|
.theme-color-golden-yellow [class*='bg-dark'] .button-text-theme.button-text-2:after {
|
||||||
|
background: #FFB657;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow .bg-black .button-text-theme.button-text-3:before,
|
||||||
|
.theme-color-golden-yellow [class*='bg-dark'] .button-text-theme.button-text-3:before {
|
||||||
|
background: #FFB657;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow .bg-black .button-text-theme.button-text-3:hover:before,
|
||||||
|
.theme-color-golden-yellow [class*='bg-dark'] .button-text-theme.button-text-3:hover:before {
|
||||||
|
background: #FFB657;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow .text-color-theme {
|
||||||
|
color: #FFB657;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow .progress-box.progress-theme .animated-progress div {
|
||||||
|
background: #FFB657;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow [class*='bg-gradient'] .progress-box.progress-theme .animated-progress div,
|
||||||
|
.theme-color-golden-yellow [class*='bg-color'] .progress-box.progress-theme .animated-progress div {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow.preloader-theme .preloader-1 div .loader-path {
|
||||||
|
stroke: #FFB657;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow.preloader-theme .preloader-2 div span {
|
||||||
|
background: #FFB657;
|
||||||
|
background: linear-gradient(to right, #FFB657 10%, transparent 40%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow.preloader-theme .preloader-2 div span:before {
|
||||||
|
background: #FFB657;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow.preloader-theme .preloader-3 div span:before, .theme-color-golden-yellow.preloader-theme .preloader-3 div span:after {
|
||||||
|
background: rgba(255, 182, 87, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow .accordion li .accordion-title {
|
||||||
|
border-color: rgba(255, 182, 87, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow .accordion li .accordion-title:before, .theme-color-golden-yellow .accordion li .accordion-title:after {
|
||||||
|
background: #FFB657;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow .accordion li .accordion-title h1, .theme-color-golden-yellow .accordion li .accordion-title h2, .theme-color-golden-yellow .accordion li .accordion-title h3, .theme-color-golden-yellow .accordion li .accordion-title h4, .theme-color-golden-yellow .accordion li .accordion-title h5, .theme-color-golden-yellow .accordion li .accordion-title h6 {
|
||||||
|
color: #FFB657;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow .accordion li.active .accordion-title {
|
||||||
|
border-color: #FFB657;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow .accordion.style-3 li .accordion-title {
|
||||||
|
background: #FFEFDB;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow .accordion.style-3 li.active .accordion-title {
|
||||||
|
background: #FFB657;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow .accordion.style-3 li.active .accordion-title:before, .theme-color-golden-yellow .accordion.style-3 li.active .accordion-title:after {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow .accordion.style-3 li.active .accordion-title h1, .theme-color-golden-yellow .accordion.style-3 li.active .accordion-title h2, .theme-color-golden-yellow .accordion.style-3 li.active .accordion-title h3, .theme-color-golden-yellow .accordion.style-3 li.active .accordion-title h4, .theme-color-golden-yellow .accordion.style-3 li.active .accordion-title h5, .theme-color-golden-yellow .accordion.style-3 li.active .accordion-title h6 {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow .bg-black .accordion li .accordion-title,
|
||||||
|
.theme-color-golden-yellow [class*='bg-dark'] .accordion li .accordion-title {
|
||||||
|
border-color: rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow .bg-black .accordion li .accordion-title:before, .theme-color-golden-yellow .bg-black .accordion li .accordion-title:after,
|
||||||
|
.theme-color-golden-yellow [class*='bg-dark'] .accordion li .accordion-title:before,
|
||||||
|
.theme-color-golden-yellow [class*='bg-dark'] .accordion li .accordion-title:after {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow .bg-black .accordion li.active .accordion-title,
|
||||||
|
.theme-color-golden-yellow [class*='bg-dark'] .accordion li.active .accordion-title {
|
||||||
|
border-color: #FFB657;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow .bg-black .accordion.style-3 li .accordion-title,
|
||||||
|
.theme-color-golden-yellow [class*='bg-dark'] .accordion.style-3 li .accordion-title {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow .bg-black .accordion.style-3 li.active .accordion-title,
|
||||||
|
.theme-color-golden-yellow [class*='bg-dark'] .accordion.style-3 li.active .accordion-title {
|
||||||
|
background: #FFB657;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow .bg-black .accordion.style-3 li.active .accordion-title:before, .theme-color-golden-yellow .bg-black .accordion.style-3 li.active .accordion-title:after,
|
||||||
|
.theme-color-golden-yellow [class*='bg-dark'] .accordion.style-3 li.active .accordion-title:before,
|
||||||
|
.theme-color-golden-yellow [class*='bg-dark'] .accordion.style-3 li.active .accordion-title:after {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow .bg-black .accordion.style-3 li.active .accordion-title h1, .theme-color-golden-yellow .bg-black .accordion.style-3 li.active .accordion-title h2, .theme-color-golden-yellow .bg-black .accordion.style-3 li.active .accordion-title h3, .theme-color-golden-yellow .bg-black .accordion.style-3 li.active .accordion-title h4, .theme-color-golden-yellow .bg-black .accordion.style-3 li.active .accordion-title h5, .theme-color-golden-yellow .bg-black .accordion.style-3 li.active .accordion-title h6,
|
||||||
|
.theme-color-golden-yellow [class*='bg-dark'] .accordion.style-3 li.active .accordion-title h1,
|
||||||
|
.theme-color-golden-yellow [class*='bg-dark'] .accordion.style-3 li.active .accordion-title h2,
|
||||||
|
.theme-color-golden-yellow [class*='bg-dark'] .accordion.style-3 li.active .accordion-title h3,
|
||||||
|
.theme-color-golden-yellow [class*='bg-dark'] .accordion.style-3 li.active .accordion-title h4,
|
||||||
|
.theme-color-golden-yellow [class*='bg-dark'] .accordion.style-3 li.active .accordion-title h5,
|
||||||
|
.theme-color-golden-yellow [class*='bg-dark'] .accordion.style-3 li.active .accordion-title h6 {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow [class*='bg-gradient'] .accordion li .accordion-title,
|
||||||
|
.theme-color-golden-yellow [class*='bg-color'] .accordion li .accordion-title {
|
||||||
|
border-color: rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow [class*='bg-gradient'] .accordion li .accordion-title h1, .theme-color-golden-yellow [class*='bg-gradient'] .accordion li .accordion-title h2, .theme-color-golden-yellow [class*='bg-gradient'] .accordion li .accordion-title h3, .theme-color-golden-yellow [class*='bg-gradient'] .accordion li .accordion-title h4, .theme-color-golden-yellow [class*='bg-gradient'] .accordion li .accordion-title h5, .theme-color-golden-yellow [class*='bg-gradient'] .accordion li .accordion-title h6,
|
||||||
|
.theme-color-golden-yellow [class*='bg-color'] .accordion li .accordion-title h1,
|
||||||
|
.theme-color-golden-yellow [class*='bg-color'] .accordion li .accordion-title h2,
|
||||||
|
.theme-color-golden-yellow [class*='bg-color'] .accordion li .accordion-title h3,
|
||||||
|
.theme-color-golden-yellow [class*='bg-color'] .accordion li .accordion-title h4,
|
||||||
|
.theme-color-golden-yellow [class*='bg-color'] .accordion li .accordion-title h5,
|
||||||
|
.theme-color-golden-yellow [class*='bg-color'] .accordion li .accordion-title h6 {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow [class*='bg-gradient'] .accordion li .accordion-title:before, .theme-color-golden-yellow [class*='bg-gradient'] .accordion li .accordion-title:after,
|
||||||
|
.theme-color-golden-yellow [class*='bg-color'] .accordion li .accordion-title:before,
|
||||||
|
.theme-color-golden-yellow [class*='bg-color'] .accordion li .accordion-title:after {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow [class*='bg-gradient'] .accordion li.active .accordion-title,
|
||||||
|
.theme-color-golden-yellow [class*='bg-color'] .accordion li.active .accordion-title {
|
||||||
|
border-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow [class*='bg-gradient'] .accordion.style-3 li .accordion-title,
|
||||||
|
.theme-color-golden-yellow [class*='bg-color'] .accordion.style-3 li .accordion-title {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow [class*='bg-gradient'] .accordion.style-3 li .accordion-title h1, .theme-color-golden-yellow [class*='bg-gradient'] .accordion.style-3 li .accordion-title h2, .theme-color-golden-yellow [class*='bg-gradient'] .accordion.style-3 li .accordion-title h3, .theme-color-golden-yellow [class*='bg-gradient'] .accordion.style-3 li .accordion-title h4, .theme-color-golden-yellow [class*='bg-gradient'] .accordion.style-3 li .accordion-title h5, .theme-color-golden-yellow [class*='bg-gradient'] .accordion.style-3 li .accordion-title h6,
|
||||||
|
.theme-color-golden-yellow [class*='bg-color'] .accordion.style-3 li .accordion-title h1,
|
||||||
|
.theme-color-golden-yellow [class*='bg-color'] .accordion.style-3 li .accordion-title h2,
|
||||||
|
.theme-color-golden-yellow [class*='bg-color'] .accordion.style-3 li .accordion-title h3,
|
||||||
|
.theme-color-golden-yellow [class*='bg-color'] .accordion.style-3 li .accordion-title h4,
|
||||||
|
.theme-color-golden-yellow [class*='bg-color'] .accordion.style-3 li .accordion-title h5,
|
||||||
|
.theme-color-golden-yellow [class*='bg-color'] .accordion.style-3 li .accordion-title h6 {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title,
|
||||||
|
.theme-color-golden-yellow [class*='bg-color'] .accordion.style-3 li.active .accordion-title {
|
||||||
|
background: white;
|
||||||
|
color: #7C7C7C;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title:before, .theme-color-golden-yellow [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title:after,
|
||||||
|
.theme-color-golden-yellow [class*='bg-color'] .accordion.style-3 li.active .accordion-title:before,
|
||||||
|
.theme-color-golden-yellow [class*='bg-color'] .accordion.style-3 li.active .accordion-title:after {
|
||||||
|
background: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title h1, .theme-color-golden-yellow [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title h2, .theme-color-golden-yellow [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title h3, .theme-color-golden-yellow [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title h4, .theme-color-golden-yellow [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title h5, .theme-color-golden-yellow [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title h6,
|
||||||
|
.theme-color-golden-yellow [class*='bg-color'] .accordion.style-3 li.active .accordion-title h1,
|
||||||
|
.theme-color-golden-yellow [class*='bg-color'] .accordion.style-3 li.active .accordion-title h2,
|
||||||
|
.theme-color-golden-yellow [class*='bg-color'] .accordion.style-3 li.active .accordion-title h3,
|
||||||
|
.theme-color-golden-yellow [class*='bg-color'] .accordion.style-3 li.active .accordion-title h4,
|
||||||
|
.theme-color-golden-yellow [class*='bg-color'] .accordion.style-3 li.active .accordion-title h5,
|
||||||
|
.theme-color-golden-yellow [class*='bg-color'] .accordion.style-3 li.active .accordion-title h6 {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow .text-link-2:before,
|
||||||
|
.theme-color-golden-yellow .text-link-3:before,
|
||||||
|
.theme-color-golden-yellow .text-link-4:before {
|
||||||
|
background: #FFB657;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow .text-link-5:after,
|
||||||
|
.theme-color-golden-yellow .text-link-6:after,
|
||||||
|
.theme-color-golden-yellow .text-link-7:after {
|
||||||
|
background: #FFB657;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow .text-link-8:before {
|
||||||
|
background: rgba(255, 182, 87, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow .bg-black .text-link-2:before,
|
||||||
|
.theme-color-golden-yellow .bg-black .text-link-3:before,
|
||||||
|
.theme-color-golden-yellow .bg-black .text-link-4:before,
|
||||||
|
.theme-color-golden-yellow [class*='bg-dark'] .text-link-2:before,
|
||||||
|
.theme-color-golden-yellow [class*='bg-dark'] .text-link-3:before,
|
||||||
|
.theme-color-golden-yellow [class*='bg-dark'] .text-link-4:before {
|
||||||
|
background: #FFB657;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow .bg-black .text-link-5:after,
|
||||||
|
.theme-color-golden-yellow .bg-black .text-link-6:after,
|
||||||
|
.theme-color-golden-yellow .bg-black .text-link-7:after,
|
||||||
|
.theme-color-golden-yellow [class*='bg-dark'] .text-link-5:after,
|
||||||
|
.theme-color-golden-yellow [class*='bg-dark'] .text-link-6:after,
|
||||||
|
.theme-color-golden-yellow [class*='bg-dark'] .text-link-7:after {
|
||||||
|
background: #FFB657;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow .bg-black .text-link-8:before,
|
||||||
|
.theme-color-golden-yellow [class*='bg-dark'] .text-link-8:before {
|
||||||
|
background: rgba(255, 182, 87, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow [class*='bg-gradient'] .text-link-2:before, .theme-color-golden-yellow [class*='bg-gradient'] .text-link-3:before, .theme-color-golden-yellow [class*='bg-gradient'] .text-link-4:before,
|
||||||
|
.theme-color-golden-yellow [class*='bg-color'] .text-link-2:before,
|
||||||
|
.theme-color-golden-yellow [class*='bg-color'] .text-link-3:before,
|
||||||
|
.theme-color-golden-yellow [class*='bg-color'] .text-link-4:before {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow [class*='bg-gradient'] .text-link-5:before, .theme-color-golden-yellow [class*='bg-gradient'] .text-link-6:before, .theme-color-golden-yellow [class*='bg-gradient'] .text-link-7:before,
|
||||||
|
.theme-color-golden-yellow [class*='bg-color'] .text-link-5:before,
|
||||||
|
.theme-color-golden-yellow [class*='bg-color'] .text-link-6:before,
|
||||||
|
.theme-color-golden-yellow [class*='bg-color'] .text-link-7:before {
|
||||||
|
background: rgba(255, 255, 255, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow [class*='bg-gradient'] .text-link-5:after, .theme-color-golden-yellow [class*='bg-gradient'] .text-link-6:after, .theme-color-golden-yellow [class*='bg-gradient'] .text-link-7:after,
|
||||||
|
.theme-color-golden-yellow [class*='bg-color'] .text-link-5:after,
|
||||||
|
.theme-color-golden-yellow [class*='bg-color'] .text-link-6:after,
|
||||||
|
.theme-color-golden-yellow [class*='bg-color'] .text-link-7:after {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow [class*='bg-gradient'] .text-link-8:before,
|
||||||
|
.theme-color-golden-yellow [class*='bg-color'] .text-link-8:before {
|
||||||
|
background: rgba(255, 255, 255, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-golden-yellow .form-style-2 input:focus, .theme-color-golden-yellow .form-style-2 textarea:focus, .theme-color-golden-yellow .form-style-2 .custom-select:focus, .theme-color-golden-yellow .form-style-2 .form-control:focus,
|
||||||
|
.theme-color-golden-yellow .form-style-4 input:focus,
|
||||||
|
.theme-color-golden-yellow .form-style-4 textarea:focus,
|
||||||
|
.theme-color-golden-yellow .form-style-4 .custom-select:focus,
|
||||||
|
.theme-color-golden-yellow .form-style-4 .form-control:focus {
|
||||||
|
border-color: #FFB657;
|
||||||
|
}
|
||||||
412
static/assets/css/theme-colors/theme-color-pink-edge.css
Normal file
412
static/assets/css/theme-colors/theme-color-pink-edge.css
Normal file
@@ -0,0 +1,412 @@
|
|||||||
|
/*------------------------------------------------
|
||||||
|
*
|
||||||
|
* Theme Color - Pink Edge
|
||||||
|
*
|
||||||
|
-------------------------------------------------*/
|
||||||
|
.theme-color-pink-edge a:not([class^='button']):not([class^="link-social"]):not(.header-logo a):hover {
|
||||||
|
color: #FE9AB6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge [class*='bg-gradient'] a:not([class^='button']):not([class^="link-social"]):not(.header-logo a):hover,
|
||||||
|
.theme-color-pink-edge [class*='bg-color'] a:not([class^='button']):not([class^="link-social"]):not(.header-logo a):hover {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.theme-color-pink-edge .header .header-menu:not([class*='dropdown-color']) .nav .nav-item .nav-dropdown a:not([class^='button']):not([class^="link-social"]):hover, .theme-color-pink-edge .header .header-menu:not([class*='dropdown-color']) .nav .nav-item .nav-dropdown a:not([class^='button']):not([class^="link-social"]):focus {
|
||||||
|
color: #FE9AB6;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.theme-color-pink-edge .bg-color-theme {
|
||||||
|
background: #FE9AB6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge .bg-color-theme-09 {
|
||||||
|
background: rgba(254, 154, 182, 0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge .bg-color-theme-08 {
|
||||||
|
background: rgba(254, 154, 182, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge .bg-color-theme-07 {
|
||||||
|
background: rgba(254, 154, 182, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge .bg-color-theme-06 {
|
||||||
|
background: rgba(254, 154, 182, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge .bg-color-theme-05 {
|
||||||
|
background: rgba(254, 154, 182, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge .bg-color-theme-04 {
|
||||||
|
background: rgba(254, 154, 182, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge .bg-color-theme-03 {
|
||||||
|
background: rgba(254, 154, 182, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge .bg-color-theme-02 {
|
||||||
|
background: rgba(254, 154, 182, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge .bg-color-theme-01 {
|
||||||
|
background: rgba(254, 154, 182, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge .bg-light-theme {
|
||||||
|
background: #FEE6ED;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge .button-theme {
|
||||||
|
background: #FE9AB6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge .button-outline-theme {
|
||||||
|
border-color: #FE9AB6;
|
||||||
|
color: #FE9AB6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge .button-outline-theme:hover, .theme-color-pink-edge .button-outline-theme:focus {
|
||||||
|
background: #FE9AB6;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge .button-circle-theme {
|
||||||
|
background: #FE9AB6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge .button-circle-outline-theme {
|
||||||
|
border-color: #FE9AB6;
|
||||||
|
color: #FE9AB6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge .button-circle-outline-theme:hover, .theme-color-pink-edge .button-circle-outline-theme:focus {
|
||||||
|
background: #FE9AB6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge .button-backdrop-color-theme {
|
||||||
|
background: #FE9AB6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge .button-text-theme.button-text-1, .theme-color-pink-edge .button-text-theme.button-text-2, .theme-color-pink-edge .button-text-theme.button-text-3 {
|
||||||
|
color: #FE9AB6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge .button-text-theme.button-text-1:hover, .theme-color-pink-edge .button-text-theme.button-text-2:hover, .theme-color-pink-edge .button-text-theme.button-text-3:hover {
|
||||||
|
color: #FE9AB6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge .button-text-theme.button-text-1:before {
|
||||||
|
background: rgba(254, 154, 182, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge .button-text-theme.button-text-1:after {
|
||||||
|
background: #FE9AB6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge .button-text-theme.button-text-2:before {
|
||||||
|
background: rgba(254, 154, 182, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge .button-text-theme.button-text-2:after {
|
||||||
|
background: #FE9AB6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge .button-text-theme.button-text-3:before {
|
||||||
|
background: #FE9AB6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge .button-text-theme.button-text-3:hover:before {
|
||||||
|
background: #FE9AB6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge .bg-black .button-text-theme.button-text-1, .theme-color-pink-edge .bg-black .button-text-theme.button-text-2, .theme-color-pink-edge .bg-black .button-text-theme.button-text-3,
|
||||||
|
.theme-color-pink-edge [class*='bg-dark'] .button-text-theme.button-text-1,
|
||||||
|
.theme-color-pink-edge [class*='bg-dark'] .button-text-theme.button-text-2,
|
||||||
|
.theme-color-pink-edge [class*='bg-dark'] .button-text-theme.button-text-3 {
|
||||||
|
color: #FE9AB6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge .bg-black .button-text-theme.button-text-1:hover, .theme-color-pink-edge .bg-black .button-text-theme.button-text-2:hover, .theme-color-pink-edge .bg-black .button-text-theme.button-text-3:hover,
|
||||||
|
.theme-color-pink-edge [class*='bg-dark'] .button-text-theme.button-text-1:hover,
|
||||||
|
.theme-color-pink-edge [class*='bg-dark'] .button-text-theme.button-text-2:hover,
|
||||||
|
.theme-color-pink-edge [class*='bg-dark'] .button-text-theme.button-text-3:hover {
|
||||||
|
color: #FE9AB6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge .bg-black .button-text-theme.button-text-1:before,
|
||||||
|
.theme-color-pink-edge [class*='bg-dark'] .button-text-theme.button-text-1:before {
|
||||||
|
background: rgba(254, 154, 182, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge .bg-black .button-text-theme.button-text-1:after,
|
||||||
|
.theme-color-pink-edge [class*='bg-dark'] .button-text-theme.button-text-1:after {
|
||||||
|
background: #FE9AB6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge .bg-black .button-text-theme.button-text-2:before,
|
||||||
|
.theme-color-pink-edge [class*='bg-dark'] .button-text-theme.button-text-2:before {
|
||||||
|
background: rgba(254, 154, 182, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge .bg-black .button-text-theme.button-text-2:after,
|
||||||
|
.theme-color-pink-edge [class*='bg-dark'] .button-text-theme.button-text-2:after {
|
||||||
|
background: #FE9AB6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge .bg-black .button-text-theme.button-text-3:before,
|
||||||
|
.theme-color-pink-edge [class*='bg-dark'] .button-text-theme.button-text-3:before {
|
||||||
|
background: #FE9AB6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge .bg-black .button-text-theme.button-text-3:hover:before,
|
||||||
|
.theme-color-pink-edge [class*='bg-dark'] .button-text-theme.button-text-3:hover:before {
|
||||||
|
background: #FE9AB6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge .text-color-theme {
|
||||||
|
color: #FE9AB6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge .progress-box.progress-theme .animated-progress div {
|
||||||
|
background: #FE9AB6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge [class*='bg-gradient'] .progress-box.progress-theme .animated-progress div,
|
||||||
|
.theme-color-pink-edge [class*='bg-color'] .progress-box.progress-theme .animated-progress div {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge.preloader-theme .preloader-1 div .loader-path {
|
||||||
|
stroke: #FE9AB6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge.preloader-theme .preloader-2 div span {
|
||||||
|
background: #FE9AB6;
|
||||||
|
background: linear-gradient(to right, #FE9AB6 10%, transparent 40%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge.preloader-theme .preloader-2 div span:before {
|
||||||
|
background: #FE9AB6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge.preloader-theme .preloader-3 div span:before, .theme-color-pink-edge.preloader-theme .preloader-3 div span:after {
|
||||||
|
background: rgba(254, 154, 182, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge .accordion li .accordion-title {
|
||||||
|
border-color: rgba(254, 154, 182, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge .accordion li .accordion-title:before, .theme-color-pink-edge .accordion li .accordion-title:after {
|
||||||
|
background: #FE9AB6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge .accordion li .accordion-title h1, .theme-color-pink-edge .accordion li .accordion-title h2, .theme-color-pink-edge .accordion li .accordion-title h3, .theme-color-pink-edge .accordion li .accordion-title h4, .theme-color-pink-edge .accordion li .accordion-title h5, .theme-color-pink-edge .accordion li .accordion-title h6 {
|
||||||
|
color: #FE9AB6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge .accordion li.active .accordion-title {
|
||||||
|
border-color: #FE9AB6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge .accordion.style-3 li .accordion-title {
|
||||||
|
background: #FEE6ED;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge .accordion.style-3 li.active .accordion-title {
|
||||||
|
background: #FE9AB6;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge .accordion.style-3 li.active .accordion-title:before, .theme-color-pink-edge .accordion.style-3 li.active .accordion-title:after {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge .accordion.style-3 li.active .accordion-title h1, .theme-color-pink-edge .accordion.style-3 li.active .accordion-title h2, .theme-color-pink-edge .accordion.style-3 li.active .accordion-title h3, .theme-color-pink-edge .accordion.style-3 li.active .accordion-title h4, .theme-color-pink-edge .accordion.style-3 li.active .accordion-title h5, .theme-color-pink-edge .accordion.style-3 li.active .accordion-title h6 {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge .bg-black .accordion li .accordion-title,
|
||||||
|
.theme-color-pink-edge [class*='bg-dark'] .accordion li .accordion-title {
|
||||||
|
border-color: rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge .bg-black .accordion li .accordion-title:before, .theme-color-pink-edge .bg-black .accordion li .accordion-title:after,
|
||||||
|
.theme-color-pink-edge [class*='bg-dark'] .accordion li .accordion-title:before,
|
||||||
|
.theme-color-pink-edge [class*='bg-dark'] .accordion li .accordion-title:after {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge .bg-black .accordion li.active .accordion-title,
|
||||||
|
.theme-color-pink-edge [class*='bg-dark'] .accordion li.active .accordion-title {
|
||||||
|
border-color: #FE9AB6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge .bg-black .accordion.style-3 li .accordion-title,
|
||||||
|
.theme-color-pink-edge [class*='bg-dark'] .accordion.style-3 li .accordion-title {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge .bg-black .accordion.style-3 li.active .accordion-title,
|
||||||
|
.theme-color-pink-edge [class*='bg-dark'] .accordion.style-3 li.active .accordion-title {
|
||||||
|
background: #FE9AB6;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge .bg-black .accordion.style-3 li.active .accordion-title:before, .theme-color-pink-edge .bg-black .accordion.style-3 li.active .accordion-title:after,
|
||||||
|
.theme-color-pink-edge [class*='bg-dark'] .accordion.style-3 li.active .accordion-title:before,
|
||||||
|
.theme-color-pink-edge [class*='bg-dark'] .accordion.style-3 li.active .accordion-title:after {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge .bg-black .accordion.style-3 li.active .accordion-title h1, .theme-color-pink-edge .bg-black .accordion.style-3 li.active .accordion-title h2, .theme-color-pink-edge .bg-black .accordion.style-3 li.active .accordion-title h3, .theme-color-pink-edge .bg-black .accordion.style-3 li.active .accordion-title h4, .theme-color-pink-edge .bg-black .accordion.style-3 li.active .accordion-title h5, .theme-color-pink-edge .bg-black .accordion.style-3 li.active .accordion-title h6,
|
||||||
|
.theme-color-pink-edge [class*='bg-dark'] .accordion.style-3 li.active .accordion-title h1,
|
||||||
|
.theme-color-pink-edge [class*='bg-dark'] .accordion.style-3 li.active .accordion-title h2,
|
||||||
|
.theme-color-pink-edge [class*='bg-dark'] .accordion.style-3 li.active .accordion-title h3,
|
||||||
|
.theme-color-pink-edge [class*='bg-dark'] .accordion.style-3 li.active .accordion-title h4,
|
||||||
|
.theme-color-pink-edge [class*='bg-dark'] .accordion.style-3 li.active .accordion-title h5,
|
||||||
|
.theme-color-pink-edge [class*='bg-dark'] .accordion.style-3 li.active .accordion-title h6 {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge [class*='bg-gradient'] .accordion li .accordion-title,
|
||||||
|
.theme-color-pink-edge [class*='bg-color'] .accordion li .accordion-title {
|
||||||
|
border-color: rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge [class*='bg-gradient'] .accordion li .accordion-title h1, .theme-color-pink-edge [class*='bg-gradient'] .accordion li .accordion-title h2, .theme-color-pink-edge [class*='bg-gradient'] .accordion li .accordion-title h3, .theme-color-pink-edge [class*='bg-gradient'] .accordion li .accordion-title h4, .theme-color-pink-edge [class*='bg-gradient'] .accordion li .accordion-title h5, .theme-color-pink-edge [class*='bg-gradient'] .accordion li .accordion-title h6,
|
||||||
|
.theme-color-pink-edge [class*='bg-color'] .accordion li .accordion-title h1,
|
||||||
|
.theme-color-pink-edge [class*='bg-color'] .accordion li .accordion-title h2,
|
||||||
|
.theme-color-pink-edge [class*='bg-color'] .accordion li .accordion-title h3,
|
||||||
|
.theme-color-pink-edge [class*='bg-color'] .accordion li .accordion-title h4,
|
||||||
|
.theme-color-pink-edge [class*='bg-color'] .accordion li .accordion-title h5,
|
||||||
|
.theme-color-pink-edge [class*='bg-color'] .accordion li .accordion-title h6 {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge [class*='bg-gradient'] .accordion li .accordion-title:before, .theme-color-pink-edge [class*='bg-gradient'] .accordion li .accordion-title:after,
|
||||||
|
.theme-color-pink-edge [class*='bg-color'] .accordion li .accordion-title:before,
|
||||||
|
.theme-color-pink-edge [class*='bg-color'] .accordion li .accordion-title:after {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge [class*='bg-gradient'] .accordion li.active .accordion-title,
|
||||||
|
.theme-color-pink-edge [class*='bg-color'] .accordion li.active .accordion-title {
|
||||||
|
border-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge [class*='bg-gradient'] .accordion.style-3 li .accordion-title,
|
||||||
|
.theme-color-pink-edge [class*='bg-color'] .accordion.style-3 li .accordion-title {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge [class*='bg-gradient'] .accordion.style-3 li .accordion-title h1, .theme-color-pink-edge [class*='bg-gradient'] .accordion.style-3 li .accordion-title h2, .theme-color-pink-edge [class*='bg-gradient'] .accordion.style-3 li .accordion-title h3, .theme-color-pink-edge [class*='bg-gradient'] .accordion.style-3 li .accordion-title h4, .theme-color-pink-edge [class*='bg-gradient'] .accordion.style-3 li .accordion-title h5, .theme-color-pink-edge [class*='bg-gradient'] .accordion.style-3 li .accordion-title h6,
|
||||||
|
.theme-color-pink-edge [class*='bg-color'] .accordion.style-3 li .accordion-title h1,
|
||||||
|
.theme-color-pink-edge [class*='bg-color'] .accordion.style-3 li .accordion-title h2,
|
||||||
|
.theme-color-pink-edge [class*='bg-color'] .accordion.style-3 li .accordion-title h3,
|
||||||
|
.theme-color-pink-edge [class*='bg-color'] .accordion.style-3 li .accordion-title h4,
|
||||||
|
.theme-color-pink-edge [class*='bg-color'] .accordion.style-3 li .accordion-title h5,
|
||||||
|
.theme-color-pink-edge [class*='bg-color'] .accordion.style-3 li .accordion-title h6 {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title,
|
||||||
|
.theme-color-pink-edge [class*='bg-color'] .accordion.style-3 li.active .accordion-title {
|
||||||
|
background: white;
|
||||||
|
color: #7C7C7C;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title:before, .theme-color-pink-edge [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title:after,
|
||||||
|
.theme-color-pink-edge [class*='bg-color'] .accordion.style-3 li.active .accordion-title:before,
|
||||||
|
.theme-color-pink-edge [class*='bg-color'] .accordion.style-3 li.active .accordion-title:after {
|
||||||
|
background: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title h1, .theme-color-pink-edge [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title h2, .theme-color-pink-edge [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title h3, .theme-color-pink-edge [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title h4, .theme-color-pink-edge [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title h5, .theme-color-pink-edge [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title h6,
|
||||||
|
.theme-color-pink-edge [class*='bg-color'] .accordion.style-3 li.active .accordion-title h1,
|
||||||
|
.theme-color-pink-edge [class*='bg-color'] .accordion.style-3 li.active .accordion-title h2,
|
||||||
|
.theme-color-pink-edge [class*='bg-color'] .accordion.style-3 li.active .accordion-title h3,
|
||||||
|
.theme-color-pink-edge [class*='bg-color'] .accordion.style-3 li.active .accordion-title h4,
|
||||||
|
.theme-color-pink-edge [class*='bg-color'] .accordion.style-3 li.active .accordion-title h5,
|
||||||
|
.theme-color-pink-edge [class*='bg-color'] .accordion.style-3 li.active .accordion-title h6 {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge .text-link-2:before,
|
||||||
|
.theme-color-pink-edge .text-link-3:before,
|
||||||
|
.theme-color-pink-edge .text-link-4:before {
|
||||||
|
background: #FE9AB6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge .text-link-5:after,
|
||||||
|
.theme-color-pink-edge .text-link-6:after,
|
||||||
|
.theme-color-pink-edge .text-link-7:after {
|
||||||
|
background: #FE9AB6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge .text-link-8:before {
|
||||||
|
background: rgba(254, 154, 182, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge .bg-black .text-link-2:before,
|
||||||
|
.theme-color-pink-edge .bg-black .text-link-3:before,
|
||||||
|
.theme-color-pink-edge .bg-black .text-link-4:before,
|
||||||
|
.theme-color-pink-edge [class*='bg-dark'] .text-link-2:before,
|
||||||
|
.theme-color-pink-edge [class*='bg-dark'] .text-link-3:before,
|
||||||
|
.theme-color-pink-edge [class*='bg-dark'] .text-link-4:before {
|
||||||
|
background: #FE9AB6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge .bg-black .text-link-5:after,
|
||||||
|
.theme-color-pink-edge .bg-black .text-link-6:after,
|
||||||
|
.theme-color-pink-edge .bg-black .text-link-7:after,
|
||||||
|
.theme-color-pink-edge [class*='bg-dark'] .text-link-5:after,
|
||||||
|
.theme-color-pink-edge [class*='bg-dark'] .text-link-6:after,
|
||||||
|
.theme-color-pink-edge [class*='bg-dark'] .text-link-7:after {
|
||||||
|
background: #FE9AB6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge .bg-black .text-link-8:before,
|
||||||
|
.theme-color-pink-edge [class*='bg-dark'] .text-link-8:before {
|
||||||
|
background: rgba(254, 154, 182, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge [class*='bg-gradient'] .text-link-2:before, .theme-color-pink-edge [class*='bg-gradient'] .text-link-3:before, .theme-color-pink-edge [class*='bg-gradient'] .text-link-4:before,
|
||||||
|
.theme-color-pink-edge [class*='bg-color'] .text-link-2:before,
|
||||||
|
.theme-color-pink-edge [class*='bg-color'] .text-link-3:before,
|
||||||
|
.theme-color-pink-edge [class*='bg-color'] .text-link-4:before {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge [class*='bg-gradient'] .text-link-5:before, .theme-color-pink-edge [class*='bg-gradient'] .text-link-6:before, .theme-color-pink-edge [class*='bg-gradient'] .text-link-7:before,
|
||||||
|
.theme-color-pink-edge [class*='bg-color'] .text-link-5:before,
|
||||||
|
.theme-color-pink-edge [class*='bg-color'] .text-link-6:before,
|
||||||
|
.theme-color-pink-edge [class*='bg-color'] .text-link-7:before {
|
||||||
|
background: rgba(255, 255, 255, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge [class*='bg-gradient'] .text-link-5:after, .theme-color-pink-edge [class*='bg-gradient'] .text-link-6:after, .theme-color-pink-edge [class*='bg-gradient'] .text-link-7:after,
|
||||||
|
.theme-color-pink-edge [class*='bg-color'] .text-link-5:after,
|
||||||
|
.theme-color-pink-edge [class*='bg-color'] .text-link-6:after,
|
||||||
|
.theme-color-pink-edge [class*='bg-color'] .text-link-7:after {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge [class*='bg-gradient'] .text-link-8:before,
|
||||||
|
.theme-color-pink-edge [class*='bg-color'] .text-link-8:before {
|
||||||
|
background: rgba(255, 255, 255, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-pink-edge .form-style-2 input:focus, .theme-color-pink-edge .form-style-2 textarea:focus, .theme-color-pink-edge .form-style-2 .custom-select:focus, .theme-color-pink-edge .form-style-2 .form-control:focus,
|
||||||
|
.theme-color-pink-edge .form-style-4 input:focus,
|
||||||
|
.theme-color-pink-edge .form-style-4 textarea:focus,
|
||||||
|
.theme-color-pink-edge .form-style-4 .custom-select:focus,
|
||||||
|
.theme-color-pink-edge .form-style-4 .form-control:focus {
|
||||||
|
border-color: #FE9AB6;
|
||||||
|
}
|
||||||
412
static/assets/css/theme-colors/theme-color-purple.css
Normal file
412
static/assets/css/theme-colors/theme-color-purple.css
Normal file
@@ -0,0 +1,412 @@
|
|||||||
|
/*------------------------------------------------
|
||||||
|
*
|
||||||
|
* Theme Color - Purple
|
||||||
|
*
|
||||||
|
-------------------------------------------------*/
|
||||||
|
.theme-color-purple a:not([class^='button']):not([class^="link-social"]):not(.header-logo a):hover {
|
||||||
|
color: #B721FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple [class*='bg-gradient'] a:not([class^='button']):not([class^="link-social"]):not(.header-logo a):hover,
|
||||||
|
.theme-color-purple [class*='bg-color'] a:not([class^='button']):not([class^="link-social"]):not(.header-logo a):hover {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.theme-color-purple .header .header-menu:not([class*='dropdown-color']) .nav .nav-item .nav-dropdown a:not([class^='button']):not([class^="link-social"]):hover, .theme-color-purple .header .header-menu:not([class*='dropdown-color']) .nav .nav-item .nav-dropdown a:not([class^='button']):not([class^="link-social"]):focus {
|
||||||
|
color: #B721FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.theme-color-purple .bg-color-theme {
|
||||||
|
background: #B721FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple .bg-color-theme-09 {
|
||||||
|
background: rgba(183, 33, 255, 0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple .bg-color-theme-08 {
|
||||||
|
background: rgba(183, 33, 255, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple .bg-color-theme-07 {
|
||||||
|
background: rgba(183, 33, 255, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple .bg-color-theme-06 {
|
||||||
|
background: rgba(183, 33, 255, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple .bg-color-theme-05 {
|
||||||
|
background: rgba(183, 33, 255, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple .bg-color-theme-04 {
|
||||||
|
background: rgba(183, 33, 255, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple .bg-color-theme-03 {
|
||||||
|
background: rgba(183, 33, 255, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple .bg-color-theme-02 {
|
||||||
|
background: rgba(183, 33, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple .bg-color-theme-01 {
|
||||||
|
background: rgba(183, 33, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple .bg-light-theme {
|
||||||
|
background: #F5E4FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple .button-theme {
|
||||||
|
background: #B721FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple .button-outline-theme {
|
||||||
|
border-color: #B721FF;
|
||||||
|
color: #B721FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple .button-outline-theme:hover, .theme-color-purple .button-outline-theme:focus {
|
||||||
|
background: #B721FF;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple .button-circle-theme {
|
||||||
|
background: #B721FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple .button-circle-outline-theme {
|
||||||
|
border-color: #B721FF;
|
||||||
|
color: #B721FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple .button-circle-outline-theme:hover, .theme-color-purple .button-circle-outline-theme:focus {
|
||||||
|
background: #B721FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple .button-backdrop-color-theme {
|
||||||
|
background: #B721FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple .button-text-theme.button-text-1, .theme-color-purple .button-text-theme.button-text-2, .theme-color-purple .button-text-theme.button-text-3 {
|
||||||
|
color: #B721FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple .button-text-theme.button-text-1:hover, .theme-color-purple .button-text-theme.button-text-2:hover, .theme-color-purple .button-text-theme.button-text-3:hover {
|
||||||
|
color: #B721FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple .button-text-theme.button-text-1:before {
|
||||||
|
background: rgba(183, 33, 255, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple .button-text-theme.button-text-1:after {
|
||||||
|
background: #B721FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple .button-text-theme.button-text-2:before {
|
||||||
|
background: rgba(183, 33, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple .button-text-theme.button-text-2:after {
|
||||||
|
background: #B721FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple .button-text-theme.button-text-3:before {
|
||||||
|
background: #B721FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple .button-text-theme.button-text-3:hover:before {
|
||||||
|
background: #B721FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple .bg-black .button-text-theme.button-text-1, .theme-color-purple .bg-black .button-text-theme.button-text-2, .theme-color-purple .bg-black .button-text-theme.button-text-3,
|
||||||
|
.theme-color-purple [class*='bg-dark'] .button-text-theme.button-text-1,
|
||||||
|
.theme-color-purple [class*='bg-dark'] .button-text-theme.button-text-2,
|
||||||
|
.theme-color-purple [class*='bg-dark'] .button-text-theme.button-text-3 {
|
||||||
|
color: #B721FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple .bg-black .button-text-theme.button-text-1:hover, .theme-color-purple .bg-black .button-text-theme.button-text-2:hover, .theme-color-purple .bg-black .button-text-theme.button-text-3:hover,
|
||||||
|
.theme-color-purple [class*='bg-dark'] .button-text-theme.button-text-1:hover,
|
||||||
|
.theme-color-purple [class*='bg-dark'] .button-text-theme.button-text-2:hover,
|
||||||
|
.theme-color-purple [class*='bg-dark'] .button-text-theme.button-text-3:hover {
|
||||||
|
color: #B721FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple .bg-black .button-text-theme.button-text-1:before,
|
||||||
|
.theme-color-purple [class*='bg-dark'] .button-text-theme.button-text-1:before {
|
||||||
|
background: rgba(183, 33, 255, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple .bg-black .button-text-theme.button-text-1:after,
|
||||||
|
.theme-color-purple [class*='bg-dark'] .button-text-theme.button-text-1:after {
|
||||||
|
background: #B721FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple .bg-black .button-text-theme.button-text-2:before,
|
||||||
|
.theme-color-purple [class*='bg-dark'] .button-text-theme.button-text-2:before {
|
||||||
|
background: rgba(183, 33, 255, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple .bg-black .button-text-theme.button-text-2:after,
|
||||||
|
.theme-color-purple [class*='bg-dark'] .button-text-theme.button-text-2:after {
|
||||||
|
background: #B721FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple .bg-black .button-text-theme.button-text-3:before,
|
||||||
|
.theme-color-purple [class*='bg-dark'] .button-text-theme.button-text-3:before {
|
||||||
|
background: #B721FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple .bg-black .button-text-theme.button-text-3:hover:before,
|
||||||
|
.theme-color-purple [class*='bg-dark'] .button-text-theme.button-text-3:hover:before {
|
||||||
|
background: #B721FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple .text-color-theme {
|
||||||
|
color: #B721FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple .progress-box.progress-theme .animated-progress div {
|
||||||
|
background: #B721FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple [class*='bg-gradient'] .progress-box.progress-theme .animated-progress div,
|
||||||
|
.theme-color-purple [class*='bg-color'] .progress-box.progress-theme .animated-progress div {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple.preloader-theme .preloader-1 div .loader-path {
|
||||||
|
stroke: #B721FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple.preloader-theme .preloader-2 div span {
|
||||||
|
background: #B721FF;
|
||||||
|
background: linear-gradient(to right, #B721FF 10%, transparent 40%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple.preloader-theme .preloader-2 div span:before {
|
||||||
|
background: #B721FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple.preloader-theme .preloader-3 div span:before, .theme-color-purple.preloader-theme .preloader-3 div span:after {
|
||||||
|
background: rgba(183, 33, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple .accordion li .accordion-title {
|
||||||
|
border-color: rgba(183, 33, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple .accordion li .accordion-title:before, .theme-color-purple .accordion li .accordion-title:after {
|
||||||
|
background: #B721FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple .accordion li .accordion-title h1, .theme-color-purple .accordion li .accordion-title h2, .theme-color-purple .accordion li .accordion-title h3, .theme-color-purple .accordion li .accordion-title h4, .theme-color-purple .accordion li .accordion-title h5, .theme-color-purple .accordion li .accordion-title h6 {
|
||||||
|
color: #B721FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple .accordion li.active .accordion-title {
|
||||||
|
border-color: #B721FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple .accordion.style-3 li .accordion-title {
|
||||||
|
background: #F5E4FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple .accordion.style-3 li.active .accordion-title {
|
||||||
|
background: #B721FF;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple .accordion.style-3 li.active .accordion-title:before, .theme-color-purple .accordion.style-3 li.active .accordion-title:after {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple .accordion.style-3 li.active .accordion-title h1, .theme-color-purple .accordion.style-3 li.active .accordion-title h2, .theme-color-purple .accordion.style-3 li.active .accordion-title h3, .theme-color-purple .accordion.style-3 li.active .accordion-title h4, .theme-color-purple .accordion.style-3 li.active .accordion-title h5, .theme-color-purple .accordion.style-3 li.active .accordion-title h6 {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple .bg-black .accordion li .accordion-title,
|
||||||
|
.theme-color-purple [class*='bg-dark'] .accordion li .accordion-title {
|
||||||
|
border-color: rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple .bg-black .accordion li .accordion-title:before, .theme-color-purple .bg-black .accordion li .accordion-title:after,
|
||||||
|
.theme-color-purple [class*='bg-dark'] .accordion li .accordion-title:before,
|
||||||
|
.theme-color-purple [class*='bg-dark'] .accordion li .accordion-title:after {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple .bg-black .accordion li.active .accordion-title,
|
||||||
|
.theme-color-purple [class*='bg-dark'] .accordion li.active .accordion-title {
|
||||||
|
border-color: #B721FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple .bg-black .accordion.style-3 li .accordion-title,
|
||||||
|
.theme-color-purple [class*='bg-dark'] .accordion.style-3 li .accordion-title {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple .bg-black .accordion.style-3 li.active .accordion-title,
|
||||||
|
.theme-color-purple [class*='bg-dark'] .accordion.style-3 li.active .accordion-title {
|
||||||
|
background: #B721FF;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple .bg-black .accordion.style-3 li.active .accordion-title:before, .theme-color-purple .bg-black .accordion.style-3 li.active .accordion-title:after,
|
||||||
|
.theme-color-purple [class*='bg-dark'] .accordion.style-3 li.active .accordion-title:before,
|
||||||
|
.theme-color-purple [class*='bg-dark'] .accordion.style-3 li.active .accordion-title:after {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple .bg-black .accordion.style-3 li.active .accordion-title h1, .theme-color-purple .bg-black .accordion.style-3 li.active .accordion-title h2, .theme-color-purple .bg-black .accordion.style-3 li.active .accordion-title h3, .theme-color-purple .bg-black .accordion.style-3 li.active .accordion-title h4, .theme-color-purple .bg-black .accordion.style-3 li.active .accordion-title h5, .theme-color-purple .bg-black .accordion.style-3 li.active .accordion-title h6,
|
||||||
|
.theme-color-purple [class*='bg-dark'] .accordion.style-3 li.active .accordion-title h1,
|
||||||
|
.theme-color-purple [class*='bg-dark'] .accordion.style-3 li.active .accordion-title h2,
|
||||||
|
.theme-color-purple [class*='bg-dark'] .accordion.style-3 li.active .accordion-title h3,
|
||||||
|
.theme-color-purple [class*='bg-dark'] .accordion.style-3 li.active .accordion-title h4,
|
||||||
|
.theme-color-purple [class*='bg-dark'] .accordion.style-3 li.active .accordion-title h5,
|
||||||
|
.theme-color-purple [class*='bg-dark'] .accordion.style-3 li.active .accordion-title h6 {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple [class*='bg-gradient'] .accordion li .accordion-title,
|
||||||
|
.theme-color-purple [class*='bg-color'] .accordion li .accordion-title {
|
||||||
|
border-color: rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple [class*='bg-gradient'] .accordion li .accordion-title h1, .theme-color-purple [class*='bg-gradient'] .accordion li .accordion-title h2, .theme-color-purple [class*='bg-gradient'] .accordion li .accordion-title h3, .theme-color-purple [class*='bg-gradient'] .accordion li .accordion-title h4, .theme-color-purple [class*='bg-gradient'] .accordion li .accordion-title h5, .theme-color-purple [class*='bg-gradient'] .accordion li .accordion-title h6,
|
||||||
|
.theme-color-purple [class*='bg-color'] .accordion li .accordion-title h1,
|
||||||
|
.theme-color-purple [class*='bg-color'] .accordion li .accordion-title h2,
|
||||||
|
.theme-color-purple [class*='bg-color'] .accordion li .accordion-title h3,
|
||||||
|
.theme-color-purple [class*='bg-color'] .accordion li .accordion-title h4,
|
||||||
|
.theme-color-purple [class*='bg-color'] .accordion li .accordion-title h5,
|
||||||
|
.theme-color-purple [class*='bg-color'] .accordion li .accordion-title h6 {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple [class*='bg-gradient'] .accordion li .accordion-title:before, .theme-color-purple [class*='bg-gradient'] .accordion li .accordion-title:after,
|
||||||
|
.theme-color-purple [class*='bg-color'] .accordion li .accordion-title:before,
|
||||||
|
.theme-color-purple [class*='bg-color'] .accordion li .accordion-title:after {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple [class*='bg-gradient'] .accordion li.active .accordion-title,
|
||||||
|
.theme-color-purple [class*='bg-color'] .accordion li.active .accordion-title {
|
||||||
|
border-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple [class*='bg-gradient'] .accordion.style-3 li .accordion-title,
|
||||||
|
.theme-color-purple [class*='bg-color'] .accordion.style-3 li .accordion-title {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple [class*='bg-gradient'] .accordion.style-3 li .accordion-title h1, .theme-color-purple [class*='bg-gradient'] .accordion.style-3 li .accordion-title h2, .theme-color-purple [class*='bg-gradient'] .accordion.style-3 li .accordion-title h3, .theme-color-purple [class*='bg-gradient'] .accordion.style-3 li .accordion-title h4, .theme-color-purple [class*='bg-gradient'] .accordion.style-3 li .accordion-title h5, .theme-color-purple [class*='bg-gradient'] .accordion.style-3 li .accordion-title h6,
|
||||||
|
.theme-color-purple [class*='bg-color'] .accordion.style-3 li .accordion-title h1,
|
||||||
|
.theme-color-purple [class*='bg-color'] .accordion.style-3 li .accordion-title h2,
|
||||||
|
.theme-color-purple [class*='bg-color'] .accordion.style-3 li .accordion-title h3,
|
||||||
|
.theme-color-purple [class*='bg-color'] .accordion.style-3 li .accordion-title h4,
|
||||||
|
.theme-color-purple [class*='bg-color'] .accordion.style-3 li .accordion-title h5,
|
||||||
|
.theme-color-purple [class*='bg-color'] .accordion.style-3 li .accordion-title h6 {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title,
|
||||||
|
.theme-color-purple [class*='bg-color'] .accordion.style-3 li.active .accordion-title {
|
||||||
|
background: white;
|
||||||
|
color: #7C7C7C;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title:before, .theme-color-purple [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title:after,
|
||||||
|
.theme-color-purple [class*='bg-color'] .accordion.style-3 li.active .accordion-title:before,
|
||||||
|
.theme-color-purple [class*='bg-color'] .accordion.style-3 li.active .accordion-title:after {
|
||||||
|
background: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title h1, .theme-color-purple [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title h2, .theme-color-purple [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title h3, .theme-color-purple [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title h4, .theme-color-purple [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title h5, .theme-color-purple [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title h6,
|
||||||
|
.theme-color-purple [class*='bg-color'] .accordion.style-3 li.active .accordion-title h1,
|
||||||
|
.theme-color-purple [class*='bg-color'] .accordion.style-3 li.active .accordion-title h2,
|
||||||
|
.theme-color-purple [class*='bg-color'] .accordion.style-3 li.active .accordion-title h3,
|
||||||
|
.theme-color-purple [class*='bg-color'] .accordion.style-3 li.active .accordion-title h4,
|
||||||
|
.theme-color-purple [class*='bg-color'] .accordion.style-3 li.active .accordion-title h5,
|
||||||
|
.theme-color-purple [class*='bg-color'] .accordion.style-3 li.active .accordion-title h6 {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple .text-link-2:before,
|
||||||
|
.theme-color-purple .text-link-3:before,
|
||||||
|
.theme-color-purple .text-link-4:before {
|
||||||
|
background: #B721FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple .text-link-5:after,
|
||||||
|
.theme-color-purple .text-link-6:after,
|
||||||
|
.theme-color-purple .text-link-7:after {
|
||||||
|
background: #B721FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple .text-link-8:before {
|
||||||
|
background: rgba(183, 33, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple .bg-black .text-link-2:before,
|
||||||
|
.theme-color-purple .bg-black .text-link-3:before,
|
||||||
|
.theme-color-purple .bg-black .text-link-4:before,
|
||||||
|
.theme-color-purple [class*='bg-dark'] .text-link-2:before,
|
||||||
|
.theme-color-purple [class*='bg-dark'] .text-link-3:before,
|
||||||
|
.theme-color-purple [class*='bg-dark'] .text-link-4:before {
|
||||||
|
background: #B721FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple .bg-black .text-link-5:after,
|
||||||
|
.theme-color-purple .bg-black .text-link-6:after,
|
||||||
|
.theme-color-purple .bg-black .text-link-7:after,
|
||||||
|
.theme-color-purple [class*='bg-dark'] .text-link-5:after,
|
||||||
|
.theme-color-purple [class*='bg-dark'] .text-link-6:after,
|
||||||
|
.theme-color-purple [class*='bg-dark'] .text-link-7:after {
|
||||||
|
background: #B721FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple .bg-black .text-link-8:before,
|
||||||
|
.theme-color-purple [class*='bg-dark'] .text-link-8:before {
|
||||||
|
background: rgba(183, 33, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple [class*='bg-gradient'] .text-link-2:before, .theme-color-purple [class*='bg-gradient'] .text-link-3:before, .theme-color-purple [class*='bg-gradient'] .text-link-4:before,
|
||||||
|
.theme-color-purple [class*='bg-color'] .text-link-2:before,
|
||||||
|
.theme-color-purple [class*='bg-color'] .text-link-3:before,
|
||||||
|
.theme-color-purple [class*='bg-color'] .text-link-4:before {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple [class*='bg-gradient'] .text-link-5:before, .theme-color-purple [class*='bg-gradient'] .text-link-6:before, .theme-color-purple [class*='bg-gradient'] .text-link-7:before,
|
||||||
|
.theme-color-purple [class*='bg-color'] .text-link-5:before,
|
||||||
|
.theme-color-purple [class*='bg-color'] .text-link-6:before,
|
||||||
|
.theme-color-purple [class*='bg-color'] .text-link-7:before {
|
||||||
|
background: rgba(255, 255, 255, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple [class*='bg-gradient'] .text-link-5:after, .theme-color-purple [class*='bg-gradient'] .text-link-6:after, .theme-color-purple [class*='bg-gradient'] .text-link-7:after,
|
||||||
|
.theme-color-purple [class*='bg-color'] .text-link-5:after,
|
||||||
|
.theme-color-purple [class*='bg-color'] .text-link-6:after,
|
||||||
|
.theme-color-purple [class*='bg-color'] .text-link-7:after {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple [class*='bg-gradient'] .text-link-8:before,
|
||||||
|
.theme-color-purple [class*='bg-color'] .text-link-8:before {
|
||||||
|
background: rgba(255, 255, 255, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-purple .form-style-2 input:focus, .theme-color-purple .form-style-2 textarea:focus, .theme-color-purple .form-style-2 .custom-select:focus, .theme-color-purple .form-style-2 .form-control:focus,
|
||||||
|
.theme-color-purple .form-style-4 input:focus,
|
||||||
|
.theme-color-purple .form-style-4 textarea:focus,
|
||||||
|
.theme-color-purple .form-style-4 .custom-select:focus,
|
||||||
|
.theme-color-purple .form-style-4 .form-control:focus {
|
||||||
|
border-color: #B721FF;
|
||||||
|
}
|
||||||
412
static/assets/css/theme-colors/theme-color-spring-red.css
Normal file
412
static/assets/css/theme-colors/theme-color-spring-red.css
Normal file
@@ -0,0 +1,412 @@
|
|||||||
|
/*------------------------------------------------
|
||||||
|
*
|
||||||
|
* Theme Color - Spring Red
|
||||||
|
*
|
||||||
|
-------------------------------------------------*/
|
||||||
|
.theme-color-spring-red a:not([class^='button']):not([class^="link-social"]):not(.header-logo a):hover {
|
||||||
|
color: #BE1F35;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red [class*='bg-gradient'] a:not([class^='button']):not([class^="link-social"]):not(.header-logo a):hover,
|
||||||
|
.theme-color-spring-red [class*='bg-color'] a:not([class^='button']):not([class^="link-social"]):not(.header-logo a):hover {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.theme-color-spring-red .header .header-menu:not([class*='dropdown-color']) .nav .nav-item .nav-dropdown a:not([class^='button']):not([class^="link-social"]):hover, .theme-color-spring-red .header .header-menu:not([class*='dropdown-color']) .nav .nav-item .nav-dropdown a:not([class^='button']):not([class^="link-social"]):focus {
|
||||||
|
color: #BE1F35;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.theme-color-spring-red .bg-color-theme {
|
||||||
|
background: #BE1F35;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red .bg-color-theme-09 {
|
||||||
|
background: rgba(190, 31, 53, 0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red .bg-color-theme-08 {
|
||||||
|
background: rgba(190, 31, 53, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red .bg-color-theme-07 {
|
||||||
|
background: rgba(190, 31, 53, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red .bg-color-theme-06 {
|
||||||
|
background: rgba(190, 31, 53, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red .bg-color-theme-05 {
|
||||||
|
background: rgba(190, 31, 53, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red .bg-color-theme-04 {
|
||||||
|
background: rgba(190, 31, 53, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red .bg-color-theme-03 {
|
||||||
|
background: rgba(190, 31, 53, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red .bg-color-theme-02 {
|
||||||
|
background: rgba(190, 31, 53, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red .bg-color-theme-01 {
|
||||||
|
background: rgba(190, 31, 53, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red .bg-light-theme {
|
||||||
|
background: #F7E5E7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red .button-theme {
|
||||||
|
background: #BE1F35;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red .button-outline-theme {
|
||||||
|
border-color: #BE1F35;
|
||||||
|
color: #BE1F35;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red .button-outline-theme:hover, .theme-color-spring-red .button-outline-theme:focus {
|
||||||
|
background: #BE1F35;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red .button-circle-theme {
|
||||||
|
background: #BE1F35;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red .button-circle-outline-theme {
|
||||||
|
border-color: #BE1F35;
|
||||||
|
color: #BE1F35;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red .button-circle-outline-theme:hover, .theme-color-spring-red .button-circle-outline-theme:focus {
|
||||||
|
background: #BE1F35;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red .button-backdrop-color-theme {
|
||||||
|
background: #BE1F35;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red .button-text-theme.button-text-1, .theme-color-spring-red .button-text-theme.button-text-2, .theme-color-spring-red .button-text-theme.button-text-3 {
|
||||||
|
color: #BE1F35;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red .button-text-theme.button-text-1:hover, .theme-color-spring-red .button-text-theme.button-text-2:hover, .theme-color-spring-red .button-text-theme.button-text-3:hover {
|
||||||
|
color: #BE1F35;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red .button-text-theme.button-text-1:before {
|
||||||
|
background: rgba(190, 31, 53, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red .button-text-theme.button-text-1:after {
|
||||||
|
background: #BE1F35;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red .button-text-theme.button-text-2:before {
|
||||||
|
background: rgba(190, 31, 53, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red .button-text-theme.button-text-2:after {
|
||||||
|
background: #BE1F35;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red .button-text-theme.button-text-3:before {
|
||||||
|
background: #BE1F35;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red .button-text-theme.button-text-3:hover:before {
|
||||||
|
background: #BE1F35;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red .bg-black .button-text-theme.button-text-1, .theme-color-spring-red .bg-black .button-text-theme.button-text-2, .theme-color-spring-red .bg-black .button-text-theme.button-text-3,
|
||||||
|
.theme-color-spring-red [class*='bg-dark'] .button-text-theme.button-text-1,
|
||||||
|
.theme-color-spring-red [class*='bg-dark'] .button-text-theme.button-text-2,
|
||||||
|
.theme-color-spring-red [class*='bg-dark'] .button-text-theme.button-text-3 {
|
||||||
|
color: #BE1F35;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red .bg-black .button-text-theme.button-text-1:hover, .theme-color-spring-red .bg-black .button-text-theme.button-text-2:hover, .theme-color-spring-red .bg-black .button-text-theme.button-text-3:hover,
|
||||||
|
.theme-color-spring-red [class*='bg-dark'] .button-text-theme.button-text-1:hover,
|
||||||
|
.theme-color-spring-red [class*='bg-dark'] .button-text-theme.button-text-2:hover,
|
||||||
|
.theme-color-spring-red [class*='bg-dark'] .button-text-theme.button-text-3:hover {
|
||||||
|
color: #BE1F35;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red .bg-black .button-text-theme.button-text-1:before,
|
||||||
|
.theme-color-spring-red [class*='bg-dark'] .button-text-theme.button-text-1:before {
|
||||||
|
background: rgba(190, 31, 53, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red .bg-black .button-text-theme.button-text-1:after,
|
||||||
|
.theme-color-spring-red [class*='bg-dark'] .button-text-theme.button-text-1:after {
|
||||||
|
background: #BE1F35;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red .bg-black .button-text-theme.button-text-2:before,
|
||||||
|
.theme-color-spring-red [class*='bg-dark'] .button-text-theme.button-text-2:before {
|
||||||
|
background: rgba(190, 31, 53, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red .bg-black .button-text-theme.button-text-2:after,
|
||||||
|
.theme-color-spring-red [class*='bg-dark'] .button-text-theme.button-text-2:after {
|
||||||
|
background: #BE1F35;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red .bg-black .button-text-theme.button-text-3:before,
|
||||||
|
.theme-color-spring-red [class*='bg-dark'] .button-text-theme.button-text-3:before {
|
||||||
|
background: #BE1F35;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red .bg-black .button-text-theme.button-text-3:hover:before,
|
||||||
|
.theme-color-spring-red [class*='bg-dark'] .button-text-theme.button-text-3:hover:before {
|
||||||
|
background: #BE1F35;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red .text-color-theme {
|
||||||
|
color: #BE1F35;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red .progress-box.progress-theme .animated-progress div {
|
||||||
|
background: #BE1F35;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red [class*='bg-gradient'] .progress-box.progress-theme .animated-progress div,
|
||||||
|
.theme-color-spring-red [class*='bg-color'] .progress-box.progress-theme .animated-progress div {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red.preloader-theme .preloader-1 div .loader-path {
|
||||||
|
stroke: #BE1F35;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red.preloader-theme .preloader-2 div span {
|
||||||
|
background: #BE1F35;
|
||||||
|
background: linear-gradient(to right, #BE1F35 10%, transparent 40%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red.preloader-theme .preloader-2 div span:before {
|
||||||
|
background: #BE1F35;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red.preloader-theme .preloader-3 div span:before, .theme-color-spring-red.preloader-theme .preloader-3 div span:after {
|
||||||
|
background: rgba(190, 31, 53, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red .accordion li .accordion-title {
|
||||||
|
border-color: rgba(190, 31, 53, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red .accordion li .accordion-title:before, .theme-color-spring-red .accordion li .accordion-title:after {
|
||||||
|
background: #BE1F35;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red .accordion li .accordion-title h1, .theme-color-spring-red .accordion li .accordion-title h2, .theme-color-spring-red .accordion li .accordion-title h3, .theme-color-spring-red .accordion li .accordion-title h4, .theme-color-spring-red .accordion li .accordion-title h5, .theme-color-spring-red .accordion li .accordion-title h6 {
|
||||||
|
color: #BE1F35;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red .accordion li.active .accordion-title {
|
||||||
|
border-color: #BE1F35;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red .accordion.style-3 li .accordion-title {
|
||||||
|
background: #F7E5E7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red .accordion.style-3 li.active .accordion-title {
|
||||||
|
background: #BE1F35;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red .accordion.style-3 li.active .accordion-title:before, .theme-color-spring-red .accordion.style-3 li.active .accordion-title:after {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red .accordion.style-3 li.active .accordion-title h1, .theme-color-spring-red .accordion.style-3 li.active .accordion-title h2, .theme-color-spring-red .accordion.style-3 li.active .accordion-title h3, .theme-color-spring-red .accordion.style-3 li.active .accordion-title h4, .theme-color-spring-red .accordion.style-3 li.active .accordion-title h5, .theme-color-spring-red .accordion.style-3 li.active .accordion-title h6 {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red .bg-black .accordion li .accordion-title,
|
||||||
|
.theme-color-spring-red [class*='bg-dark'] .accordion li .accordion-title {
|
||||||
|
border-color: rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red .bg-black .accordion li .accordion-title:before, .theme-color-spring-red .bg-black .accordion li .accordion-title:after,
|
||||||
|
.theme-color-spring-red [class*='bg-dark'] .accordion li .accordion-title:before,
|
||||||
|
.theme-color-spring-red [class*='bg-dark'] .accordion li .accordion-title:after {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red .bg-black .accordion li.active .accordion-title,
|
||||||
|
.theme-color-spring-red [class*='bg-dark'] .accordion li.active .accordion-title {
|
||||||
|
border-color: #BE1F35;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red .bg-black .accordion.style-3 li .accordion-title,
|
||||||
|
.theme-color-spring-red [class*='bg-dark'] .accordion.style-3 li .accordion-title {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red .bg-black .accordion.style-3 li.active .accordion-title,
|
||||||
|
.theme-color-spring-red [class*='bg-dark'] .accordion.style-3 li.active .accordion-title {
|
||||||
|
background: #BE1F35;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red .bg-black .accordion.style-3 li.active .accordion-title:before, .theme-color-spring-red .bg-black .accordion.style-3 li.active .accordion-title:after,
|
||||||
|
.theme-color-spring-red [class*='bg-dark'] .accordion.style-3 li.active .accordion-title:before,
|
||||||
|
.theme-color-spring-red [class*='bg-dark'] .accordion.style-3 li.active .accordion-title:after {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red .bg-black .accordion.style-3 li.active .accordion-title h1, .theme-color-spring-red .bg-black .accordion.style-3 li.active .accordion-title h2, .theme-color-spring-red .bg-black .accordion.style-3 li.active .accordion-title h3, .theme-color-spring-red .bg-black .accordion.style-3 li.active .accordion-title h4, .theme-color-spring-red .bg-black .accordion.style-3 li.active .accordion-title h5, .theme-color-spring-red .bg-black .accordion.style-3 li.active .accordion-title h6,
|
||||||
|
.theme-color-spring-red [class*='bg-dark'] .accordion.style-3 li.active .accordion-title h1,
|
||||||
|
.theme-color-spring-red [class*='bg-dark'] .accordion.style-3 li.active .accordion-title h2,
|
||||||
|
.theme-color-spring-red [class*='bg-dark'] .accordion.style-3 li.active .accordion-title h3,
|
||||||
|
.theme-color-spring-red [class*='bg-dark'] .accordion.style-3 li.active .accordion-title h4,
|
||||||
|
.theme-color-spring-red [class*='bg-dark'] .accordion.style-3 li.active .accordion-title h5,
|
||||||
|
.theme-color-spring-red [class*='bg-dark'] .accordion.style-3 li.active .accordion-title h6 {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red [class*='bg-gradient'] .accordion li .accordion-title,
|
||||||
|
.theme-color-spring-red [class*='bg-color'] .accordion li .accordion-title {
|
||||||
|
border-color: rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red [class*='bg-gradient'] .accordion li .accordion-title h1, .theme-color-spring-red [class*='bg-gradient'] .accordion li .accordion-title h2, .theme-color-spring-red [class*='bg-gradient'] .accordion li .accordion-title h3, .theme-color-spring-red [class*='bg-gradient'] .accordion li .accordion-title h4, .theme-color-spring-red [class*='bg-gradient'] .accordion li .accordion-title h5, .theme-color-spring-red [class*='bg-gradient'] .accordion li .accordion-title h6,
|
||||||
|
.theme-color-spring-red [class*='bg-color'] .accordion li .accordion-title h1,
|
||||||
|
.theme-color-spring-red [class*='bg-color'] .accordion li .accordion-title h2,
|
||||||
|
.theme-color-spring-red [class*='bg-color'] .accordion li .accordion-title h3,
|
||||||
|
.theme-color-spring-red [class*='bg-color'] .accordion li .accordion-title h4,
|
||||||
|
.theme-color-spring-red [class*='bg-color'] .accordion li .accordion-title h5,
|
||||||
|
.theme-color-spring-red [class*='bg-color'] .accordion li .accordion-title h6 {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red [class*='bg-gradient'] .accordion li .accordion-title:before, .theme-color-spring-red [class*='bg-gradient'] .accordion li .accordion-title:after,
|
||||||
|
.theme-color-spring-red [class*='bg-color'] .accordion li .accordion-title:before,
|
||||||
|
.theme-color-spring-red [class*='bg-color'] .accordion li .accordion-title:after {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red [class*='bg-gradient'] .accordion li.active .accordion-title,
|
||||||
|
.theme-color-spring-red [class*='bg-color'] .accordion li.active .accordion-title {
|
||||||
|
border-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red [class*='bg-gradient'] .accordion.style-3 li .accordion-title,
|
||||||
|
.theme-color-spring-red [class*='bg-color'] .accordion.style-3 li .accordion-title {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red [class*='bg-gradient'] .accordion.style-3 li .accordion-title h1, .theme-color-spring-red [class*='bg-gradient'] .accordion.style-3 li .accordion-title h2, .theme-color-spring-red [class*='bg-gradient'] .accordion.style-3 li .accordion-title h3, .theme-color-spring-red [class*='bg-gradient'] .accordion.style-3 li .accordion-title h4, .theme-color-spring-red [class*='bg-gradient'] .accordion.style-3 li .accordion-title h5, .theme-color-spring-red [class*='bg-gradient'] .accordion.style-3 li .accordion-title h6,
|
||||||
|
.theme-color-spring-red [class*='bg-color'] .accordion.style-3 li .accordion-title h1,
|
||||||
|
.theme-color-spring-red [class*='bg-color'] .accordion.style-3 li .accordion-title h2,
|
||||||
|
.theme-color-spring-red [class*='bg-color'] .accordion.style-3 li .accordion-title h3,
|
||||||
|
.theme-color-spring-red [class*='bg-color'] .accordion.style-3 li .accordion-title h4,
|
||||||
|
.theme-color-spring-red [class*='bg-color'] .accordion.style-3 li .accordion-title h5,
|
||||||
|
.theme-color-spring-red [class*='bg-color'] .accordion.style-3 li .accordion-title h6 {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title,
|
||||||
|
.theme-color-spring-red [class*='bg-color'] .accordion.style-3 li.active .accordion-title {
|
||||||
|
background: white;
|
||||||
|
color: #7C7C7C;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title:before, .theme-color-spring-red [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title:after,
|
||||||
|
.theme-color-spring-red [class*='bg-color'] .accordion.style-3 li.active .accordion-title:before,
|
||||||
|
.theme-color-spring-red [class*='bg-color'] .accordion.style-3 li.active .accordion-title:after {
|
||||||
|
background: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title h1, .theme-color-spring-red [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title h2, .theme-color-spring-red [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title h3, .theme-color-spring-red [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title h4, .theme-color-spring-red [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title h5, .theme-color-spring-red [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title h6,
|
||||||
|
.theme-color-spring-red [class*='bg-color'] .accordion.style-3 li.active .accordion-title h1,
|
||||||
|
.theme-color-spring-red [class*='bg-color'] .accordion.style-3 li.active .accordion-title h2,
|
||||||
|
.theme-color-spring-red [class*='bg-color'] .accordion.style-3 li.active .accordion-title h3,
|
||||||
|
.theme-color-spring-red [class*='bg-color'] .accordion.style-3 li.active .accordion-title h4,
|
||||||
|
.theme-color-spring-red [class*='bg-color'] .accordion.style-3 li.active .accordion-title h5,
|
||||||
|
.theme-color-spring-red [class*='bg-color'] .accordion.style-3 li.active .accordion-title h6 {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red .text-link-2:before,
|
||||||
|
.theme-color-spring-red .text-link-3:before,
|
||||||
|
.theme-color-spring-red .text-link-4:before {
|
||||||
|
background: #BE1F35;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red .text-link-5:after,
|
||||||
|
.theme-color-spring-red .text-link-6:after,
|
||||||
|
.theme-color-spring-red .text-link-7:after {
|
||||||
|
background: #BE1F35;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red .text-link-8:before {
|
||||||
|
background: rgba(190, 31, 53, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red .bg-black .text-link-2:before,
|
||||||
|
.theme-color-spring-red .bg-black .text-link-3:before,
|
||||||
|
.theme-color-spring-red .bg-black .text-link-4:before,
|
||||||
|
.theme-color-spring-red [class*='bg-dark'] .text-link-2:before,
|
||||||
|
.theme-color-spring-red [class*='bg-dark'] .text-link-3:before,
|
||||||
|
.theme-color-spring-red [class*='bg-dark'] .text-link-4:before {
|
||||||
|
background: #BE1F35;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red .bg-black .text-link-5:after,
|
||||||
|
.theme-color-spring-red .bg-black .text-link-6:after,
|
||||||
|
.theme-color-spring-red .bg-black .text-link-7:after,
|
||||||
|
.theme-color-spring-red [class*='bg-dark'] .text-link-5:after,
|
||||||
|
.theme-color-spring-red [class*='bg-dark'] .text-link-6:after,
|
||||||
|
.theme-color-spring-red [class*='bg-dark'] .text-link-7:after {
|
||||||
|
background: #BE1F35;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red .bg-black .text-link-8:before,
|
||||||
|
.theme-color-spring-red [class*='bg-dark'] .text-link-8:before {
|
||||||
|
background: rgba(190, 31, 53, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red [class*='bg-gradient'] .text-link-2:before, .theme-color-spring-red [class*='bg-gradient'] .text-link-3:before, .theme-color-spring-red [class*='bg-gradient'] .text-link-4:before,
|
||||||
|
.theme-color-spring-red [class*='bg-color'] .text-link-2:before,
|
||||||
|
.theme-color-spring-red [class*='bg-color'] .text-link-3:before,
|
||||||
|
.theme-color-spring-red [class*='bg-color'] .text-link-4:before {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red [class*='bg-gradient'] .text-link-5:before, .theme-color-spring-red [class*='bg-gradient'] .text-link-6:before, .theme-color-spring-red [class*='bg-gradient'] .text-link-7:before,
|
||||||
|
.theme-color-spring-red [class*='bg-color'] .text-link-5:before,
|
||||||
|
.theme-color-spring-red [class*='bg-color'] .text-link-6:before,
|
||||||
|
.theme-color-spring-red [class*='bg-color'] .text-link-7:before {
|
||||||
|
background: rgba(255, 255, 255, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red [class*='bg-gradient'] .text-link-5:after, .theme-color-spring-red [class*='bg-gradient'] .text-link-6:after, .theme-color-spring-red [class*='bg-gradient'] .text-link-7:after,
|
||||||
|
.theme-color-spring-red [class*='bg-color'] .text-link-5:after,
|
||||||
|
.theme-color-spring-red [class*='bg-color'] .text-link-6:after,
|
||||||
|
.theme-color-spring-red [class*='bg-color'] .text-link-7:after {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red [class*='bg-gradient'] .text-link-8:before,
|
||||||
|
.theme-color-spring-red [class*='bg-color'] .text-link-8:before {
|
||||||
|
background: rgba(255, 255, 255, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-spring-red .form-style-2 input:focus, .theme-color-spring-red .form-style-2 textarea:focus, .theme-color-spring-red .form-style-2 .custom-select:focus, .theme-color-spring-red .form-style-2 .form-control:focus,
|
||||||
|
.theme-color-spring-red .form-style-4 input:focus,
|
||||||
|
.theme-color-spring-red .form-style-4 textarea:focus,
|
||||||
|
.theme-color-spring-red .form-style-4 .custom-select:focus,
|
||||||
|
.theme-color-spring-red .form-style-4 .form-control:focus {
|
||||||
|
border-color: #BE1F35;
|
||||||
|
}
|
||||||
412
static/assets/css/theme-colors/theme-color-tan.css
Normal file
412
static/assets/css/theme-colors/theme-color-tan.css
Normal file
@@ -0,0 +1,412 @@
|
|||||||
|
/*------------------------------------------------
|
||||||
|
*
|
||||||
|
* Theme Color - Tan
|
||||||
|
*
|
||||||
|
-------------------------------------------------*/
|
||||||
|
.theme-color-tan a:not([class^='button']):not([class^="link-social"]):not(.header-logo a):hover {
|
||||||
|
color: #d2b48c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan [class*='bg-gradient'] a:not([class^='button']):not([class^="link-social"]):not(.header-logo a):hover,
|
||||||
|
.theme-color-tan [class*='bg-color'] a:not([class^='button']):not([class^="link-social"]):not(.header-logo a):hover {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.theme-color-tan .header .header-menu:not([class*='dropdown-color']) .nav .nav-item .nav-dropdown a:not([class^='button']):not([class^="link-social"]):hover, .theme-color-tan .header .header-menu:not([class*='dropdown-color']) .nav .nav-item .nav-dropdown a:not([class^='button']):not([class^="link-social"]):focus {
|
||||||
|
color: #d2b48c;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.theme-color-tan .bg-color-theme {
|
||||||
|
background: #d2b48c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan .bg-color-theme-09 {
|
||||||
|
background: rgba(210, 180, 140, 0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan .bg-color-theme-08 {
|
||||||
|
background: rgba(210, 180, 140, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan .bg-color-theme-07 {
|
||||||
|
background: rgba(210, 180, 140, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan .bg-color-theme-06 {
|
||||||
|
background: rgba(210, 180, 140, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan .bg-color-theme-05 {
|
||||||
|
background: rgba(210, 180, 140, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan .bg-color-theme-04 {
|
||||||
|
background: rgba(210, 180, 140, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan .bg-color-theme-03 {
|
||||||
|
background: rgba(210, 180, 140, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan .bg-color-theme-02 {
|
||||||
|
background: rgba(210, 180, 140, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan .bg-color-theme-01 {
|
||||||
|
background: rgba(210, 180, 140, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan .bg-light-theme {
|
||||||
|
background: #f6f0e8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan .button-theme {
|
||||||
|
background: #d2b48c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan .button-outline-theme {
|
||||||
|
border-color: #d2b48c;
|
||||||
|
color: #d2b48c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan .button-outline-theme:hover, .theme-color-tan .button-outline-theme:focus {
|
||||||
|
background: #d2b48c;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan .button-circle-theme {
|
||||||
|
background: #d2b48c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan .button-circle-outline-theme {
|
||||||
|
border-color: #d2b48c;
|
||||||
|
color: #d2b48c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan .button-circle-outline-theme:hover, .theme-color-tan .button-circle-outline-theme:focus {
|
||||||
|
background: #d2b48c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan .button-backdrop-color-theme {
|
||||||
|
background: #d2b48c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan .button-text-theme.button-text-1, .theme-color-tan .button-text-theme.button-text-2, .theme-color-tan .button-text-theme.button-text-3 {
|
||||||
|
color: #d2b48c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan .button-text-theme.button-text-1:hover, .theme-color-tan .button-text-theme.button-text-2:hover, .theme-color-tan .button-text-theme.button-text-3:hover {
|
||||||
|
color: #d2b48c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan .button-text-theme.button-text-1:before {
|
||||||
|
background: rgba(210, 180, 140, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan .button-text-theme.button-text-1:after {
|
||||||
|
background: #d2b48c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan .button-text-theme.button-text-2:before {
|
||||||
|
background: rgba(210, 180, 140, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan .button-text-theme.button-text-2:after {
|
||||||
|
background: #d2b48c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan .button-text-theme.button-text-3:before {
|
||||||
|
background: #d2b48c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan .button-text-theme.button-text-3:hover:before {
|
||||||
|
background: #d2b48c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan .bg-black .button-text-theme.button-text-1, .theme-color-tan .bg-black .button-text-theme.button-text-2, .theme-color-tan .bg-black .button-text-theme.button-text-3,
|
||||||
|
.theme-color-tan [class*='bg-dark'] .button-text-theme.button-text-1,
|
||||||
|
.theme-color-tan [class*='bg-dark'] .button-text-theme.button-text-2,
|
||||||
|
.theme-color-tan [class*='bg-dark'] .button-text-theme.button-text-3 {
|
||||||
|
color: #d2b48c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan .bg-black .button-text-theme.button-text-1:hover, .theme-color-tan .bg-black .button-text-theme.button-text-2:hover, .theme-color-tan .bg-black .button-text-theme.button-text-3:hover,
|
||||||
|
.theme-color-tan [class*='bg-dark'] .button-text-theme.button-text-1:hover,
|
||||||
|
.theme-color-tan [class*='bg-dark'] .button-text-theme.button-text-2:hover,
|
||||||
|
.theme-color-tan [class*='bg-dark'] .button-text-theme.button-text-3:hover {
|
||||||
|
color: #d2b48c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan .bg-black .button-text-theme.button-text-1:before,
|
||||||
|
.theme-color-tan [class*='bg-dark'] .button-text-theme.button-text-1:before {
|
||||||
|
background: rgba(210, 180, 140, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan .bg-black .button-text-theme.button-text-1:after,
|
||||||
|
.theme-color-tan [class*='bg-dark'] .button-text-theme.button-text-1:after {
|
||||||
|
background: #d2b48c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan .bg-black .button-text-theme.button-text-2:before,
|
||||||
|
.theme-color-tan [class*='bg-dark'] .button-text-theme.button-text-2:before {
|
||||||
|
background: rgba(210, 180, 140, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan .bg-black .button-text-theme.button-text-2:after,
|
||||||
|
.theme-color-tan [class*='bg-dark'] .button-text-theme.button-text-2:after {
|
||||||
|
background: #d2b48c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan .bg-black .button-text-theme.button-text-3:before,
|
||||||
|
.theme-color-tan [class*='bg-dark'] .button-text-theme.button-text-3:before {
|
||||||
|
background: #d2b48c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan .bg-black .button-text-theme.button-text-3:hover:before,
|
||||||
|
.theme-color-tan [class*='bg-dark'] .button-text-theme.button-text-3:hover:before {
|
||||||
|
background: #d2b48c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan .text-color-theme {
|
||||||
|
color: #d2b48c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan .progress-box.progress-theme .animated-progress div {
|
||||||
|
background: #d2b48c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan [class*='bg-gradient'] .progress-box.progress-theme .animated-progress div,
|
||||||
|
.theme-color-tan [class*='bg-color'] .progress-box.progress-theme .animated-progress div {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan.preloader-theme .preloader-1 div .loader-path {
|
||||||
|
stroke: #d2b48c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan.preloader-theme .preloader-2 div span {
|
||||||
|
background: #d2b48c;
|
||||||
|
background: linear-gradient(to right, #d2b48c 10%, transparent 40%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan.preloader-theme .preloader-2 div span:before {
|
||||||
|
background: #d2b48c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan.preloader-theme .preloader-3 div span:before, .theme-color-tan.preloader-theme .preloader-3 div span:after {
|
||||||
|
background: rgba(210, 180, 140, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan .accordion li .accordion-title {
|
||||||
|
border-color: rgba(210, 180, 140, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan .accordion li .accordion-title:before, .theme-color-tan .accordion li .accordion-title:after {
|
||||||
|
background: #d2b48c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan .accordion li .accordion-title h1, .theme-color-tan .accordion li .accordion-title h2, .theme-color-tan .accordion li .accordion-title h3, .theme-color-tan .accordion li .accordion-title h4, .theme-color-tan .accordion li .accordion-title h5, .theme-color-tan .accordion li .accordion-title h6 {
|
||||||
|
color: #d2b48c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan .accordion li.active .accordion-title {
|
||||||
|
border-color: #d2b48c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan .accordion.style-3 li .accordion-title {
|
||||||
|
background: #f6f0e8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan .accordion.style-3 li.active .accordion-title {
|
||||||
|
background: #d2b48c;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan .accordion.style-3 li.active .accordion-title:before, .theme-color-tan .accordion.style-3 li.active .accordion-title:after {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan .accordion.style-3 li.active .accordion-title h1, .theme-color-tan .accordion.style-3 li.active .accordion-title h2, .theme-color-tan .accordion.style-3 li.active .accordion-title h3, .theme-color-tan .accordion.style-3 li.active .accordion-title h4, .theme-color-tan .accordion.style-3 li.active .accordion-title h5, .theme-color-tan .accordion.style-3 li.active .accordion-title h6 {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan .bg-black .accordion li .accordion-title,
|
||||||
|
.theme-color-tan [class*='bg-dark'] .accordion li .accordion-title {
|
||||||
|
border-color: rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan .bg-black .accordion li .accordion-title:before, .theme-color-tan .bg-black .accordion li .accordion-title:after,
|
||||||
|
.theme-color-tan [class*='bg-dark'] .accordion li .accordion-title:before,
|
||||||
|
.theme-color-tan [class*='bg-dark'] .accordion li .accordion-title:after {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan .bg-black .accordion li.active .accordion-title,
|
||||||
|
.theme-color-tan [class*='bg-dark'] .accordion li.active .accordion-title {
|
||||||
|
border-color: #d2b48c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan .bg-black .accordion.style-3 li .accordion-title,
|
||||||
|
.theme-color-tan [class*='bg-dark'] .accordion.style-3 li .accordion-title {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan .bg-black .accordion.style-3 li.active .accordion-title,
|
||||||
|
.theme-color-tan [class*='bg-dark'] .accordion.style-3 li.active .accordion-title {
|
||||||
|
background: #d2b48c;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan .bg-black .accordion.style-3 li.active .accordion-title:before, .theme-color-tan .bg-black .accordion.style-3 li.active .accordion-title:after,
|
||||||
|
.theme-color-tan [class*='bg-dark'] .accordion.style-3 li.active .accordion-title:before,
|
||||||
|
.theme-color-tan [class*='bg-dark'] .accordion.style-3 li.active .accordion-title:after {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan .bg-black .accordion.style-3 li.active .accordion-title h1, .theme-color-tan .bg-black .accordion.style-3 li.active .accordion-title h2, .theme-color-tan .bg-black .accordion.style-3 li.active .accordion-title h3, .theme-color-tan .bg-black .accordion.style-3 li.active .accordion-title h4, .theme-color-tan .bg-black .accordion.style-3 li.active .accordion-title h5, .theme-color-tan .bg-black .accordion.style-3 li.active .accordion-title h6,
|
||||||
|
.theme-color-tan [class*='bg-dark'] .accordion.style-3 li.active .accordion-title h1,
|
||||||
|
.theme-color-tan [class*='bg-dark'] .accordion.style-3 li.active .accordion-title h2,
|
||||||
|
.theme-color-tan [class*='bg-dark'] .accordion.style-3 li.active .accordion-title h3,
|
||||||
|
.theme-color-tan [class*='bg-dark'] .accordion.style-3 li.active .accordion-title h4,
|
||||||
|
.theme-color-tan [class*='bg-dark'] .accordion.style-3 li.active .accordion-title h5,
|
||||||
|
.theme-color-tan [class*='bg-dark'] .accordion.style-3 li.active .accordion-title h6 {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan [class*='bg-gradient'] .accordion li .accordion-title,
|
||||||
|
.theme-color-tan [class*='bg-color'] .accordion li .accordion-title {
|
||||||
|
border-color: rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan [class*='bg-gradient'] .accordion li .accordion-title h1, .theme-color-tan [class*='bg-gradient'] .accordion li .accordion-title h2, .theme-color-tan [class*='bg-gradient'] .accordion li .accordion-title h3, .theme-color-tan [class*='bg-gradient'] .accordion li .accordion-title h4, .theme-color-tan [class*='bg-gradient'] .accordion li .accordion-title h5, .theme-color-tan [class*='bg-gradient'] .accordion li .accordion-title h6,
|
||||||
|
.theme-color-tan [class*='bg-color'] .accordion li .accordion-title h1,
|
||||||
|
.theme-color-tan [class*='bg-color'] .accordion li .accordion-title h2,
|
||||||
|
.theme-color-tan [class*='bg-color'] .accordion li .accordion-title h3,
|
||||||
|
.theme-color-tan [class*='bg-color'] .accordion li .accordion-title h4,
|
||||||
|
.theme-color-tan [class*='bg-color'] .accordion li .accordion-title h5,
|
||||||
|
.theme-color-tan [class*='bg-color'] .accordion li .accordion-title h6 {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan [class*='bg-gradient'] .accordion li .accordion-title:before, .theme-color-tan [class*='bg-gradient'] .accordion li .accordion-title:after,
|
||||||
|
.theme-color-tan [class*='bg-color'] .accordion li .accordion-title:before,
|
||||||
|
.theme-color-tan [class*='bg-color'] .accordion li .accordion-title:after {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan [class*='bg-gradient'] .accordion li.active .accordion-title,
|
||||||
|
.theme-color-tan [class*='bg-color'] .accordion li.active .accordion-title {
|
||||||
|
border-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan [class*='bg-gradient'] .accordion.style-3 li .accordion-title,
|
||||||
|
.theme-color-tan [class*='bg-color'] .accordion.style-3 li .accordion-title {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan [class*='bg-gradient'] .accordion.style-3 li .accordion-title h1, .theme-color-tan [class*='bg-gradient'] .accordion.style-3 li .accordion-title h2, .theme-color-tan [class*='bg-gradient'] .accordion.style-3 li .accordion-title h3, .theme-color-tan [class*='bg-gradient'] .accordion.style-3 li .accordion-title h4, .theme-color-tan [class*='bg-gradient'] .accordion.style-3 li .accordion-title h5, .theme-color-tan [class*='bg-gradient'] .accordion.style-3 li .accordion-title h6,
|
||||||
|
.theme-color-tan [class*='bg-color'] .accordion.style-3 li .accordion-title h1,
|
||||||
|
.theme-color-tan [class*='bg-color'] .accordion.style-3 li .accordion-title h2,
|
||||||
|
.theme-color-tan [class*='bg-color'] .accordion.style-3 li .accordion-title h3,
|
||||||
|
.theme-color-tan [class*='bg-color'] .accordion.style-3 li .accordion-title h4,
|
||||||
|
.theme-color-tan [class*='bg-color'] .accordion.style-3 li .accordion-title h5,
|
||||||
|
.theme-color-tan [class*='bg-color'] .accordion.style-3 li .accordion-title h6 {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title,
|
||||||
|
.theme-color-tan [class*='bg-color'] .accordion.style-3 li.active .accordion-title {
|
||||||
|
background: white;
|
||||||
|
color: #7C7C7C;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title:before, .theme-color-tan [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title:after,
|
||||||
|
.theme-color-tan [class*='bg-color'] .accordion.style-3 li.active .accordion-title:before,
|
||||||
|
.theme-color-tan [class*='bg-color'] .accordion.style-3 li.active .accordion-title:after {
|
||||||
|
background: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title h1, .theme-color-tan [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title h2, .theme-color-tan [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title h3, .theme-color-tan [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title h4, .theme-color-tan [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title h5, .theme-color-tan [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title h6,
|
||||||
|
.theme-color-tan [class*='bg-color'] .accordion.style-3 li.active .accordion-title h1,
|
||||||
|
.theme-color-tan [class*='bg-color'] .accordion.style-3 li.active .accordion-title h2,
|
||||||
|
.theme-color-tan [class*='bg-color'] .accordion.style-3 li.active .accordion-title h3,
|
||||||
|
.theme-color-tan [class*='bg-color'] .accordion.style-3 li.active .accordion-title h4,
|
||||||
|
.theme-color-tan [class*='bg-color'] .accordion.style-3 li.active .accordion-title h5,
|
||||||
|
.theme-color-tan [class*='bg-color'] .accordion.style-3 li.active .accordion-title h6 {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan .text-link-2:before,
|
||||||
|
.theme-color-tan .text-link-3:before,
|
||||||
|
.theme-color-tan .text-link-4:before {
|
||||||
|
background: #d2b48c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan .text-link-5:after,
|
||||||
|
.theme-color-tan .text-link-6:after,
|
||||||
|
.theme-color-tan .text-link-7:after {
|
||||||
|
background: #d2b48c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan .text-link-8:before {
|
||||||
|
background: rgba(210, 180, 140, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan .bg-black .text-link-2:before,
|
||||||
|
.theme-color-tan .bg-black .text-link-3:before,
|
||||||
|
.theme-color-tan .bg-black .text-link-4:before,
|
||||||
|
.theme-color-tan [class*='bg-dark'] .text-link-2:before,
|
||||||
|
.theme-color-tan [class*='bg-dark'] .text-link-3:before,
|
||||||
|
.theme-color-tan [class*='bg-dark'] .text-link-4:before {
|
||||||
|
background: #d2b48c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan .bg-black .text-link-5:after,
|
||||||
|
.theme-color-tan .bg-black .text-link-6:after,
|
||||||
|
.theme-color-tan .bg-black .text-link-7:after,
|
||||||
|
.theme-color-tan [class*='bg-dark'] .text-link-5:after,
|
||||||
|
.theme-color-tan [class*='bg-dark'] .text-link-6:after,
|
||||||
|
.theme-color-tan [class*='bg-dark'] .text-link-7:after {
|
||||||
|
background: #d2b48c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan .bg-black .text-link-8:before,
|
||||||
|
.theme-color-tan [class*='bg-dark'] .text-link-8:before {
|
||||||
|
background: rgba(210, 180, 140, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan [class*='bg-gradient'] .text-link-2:before, .theme-color-tan [class*='bg-gradient'] .text-link-3:before, .theme-color-tan [class*='bg-gradient'] .text-link-4:before,
|
||||||
|
.theme-color-tan [class*='bg-color'] .text-link-2:before,
|
||||||
|
.theme-color-tan [class*='bg-color'] .text-link-3:before,
|
||||||
|
.theme-color-tan [class*='bg-color'] .text-link-4:before {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan [class*='bg-gradient'] .text-link-5:before, .theme-color-tan [class*='bg-gradient'] .text-link-6:before, .theme-color-tan [class*='bg-gradient'] .text-link-7:before,
|
||||||
|
.theme-color-tan [class*='bg-color'] .text-link-5:before,
|
||||||
|
.theme-color-tan [class*='bg-color'] .text-link-6:before,
|
||||||
|
.theme-color-tan [class*='bg-color'] .text-link-7:before {
|
||||||
|
background: rgba(255, 255, 255, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan [class*='bg-gradient'] .text-link-5:after, .theme-color-tan [class*='bg-gradient'] .text-link-6:after, .theme-color-tan [class*='bg-gradient'] .text-link-7:after,
|
||||||
|
.theme-color-tan [class*='bg-color'] .text-link-5:after,
|
||||||
|
.theme-color-tan [class*='bg-color'] .text-link-6:after,
|
||||||
|
.theme-color-tan [class*='bg-color'] .text-link-7:after {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan [class*='bg-gradient'] .text-link-8:before,
|
||||||
|
.theme-color-tan [class*='bg-color'] .text-link-8:before {
|
||||||
|
background: rgba(255, 255, 255, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-tan .form-style-2 input:focus, .theme-color-tan .form-style-2 textarea:focus, .theme-color-tan .form-style-2 .custom-select:focus, .theme-color-tan .form-style-2 .form-control:focus,
|
||||||
|
.theme-color-tan .form-style-4 input:focus,
|
||||||
|
.theme-color-tan .form-style-4 textarea:focus,
|
||||||
|
.theme-color-tan .form-style-4 .custom-select:focus,
|
||||||
|
.theme-color-tan .form-style-4 .form-control:focus {
|
||||||
|
border-color: #d2b48c;
|
||||||
|
}
|
||||||
412
static/assets/css/theme-colors/theme-color-turquoise.css
Normal file
412
static/assets/css/theme-colors/theme-color-turquoise.css
Normal file
@@ -0,0 +1,412 @@
|
|||||||
|
/*------------------------------------------------
|
||||||
|
*
|
||||||
|
* Theme Color - turquoise
|
||||||
|
*
|
||||||
|
-------------------------------------------------*/
|
||||||
|
.theme-color-turquoise a:not([class^='button']):not([class^="link-social"]):not(.header-logo a):hover {
|
||||||
|
color: #4cbfa6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise [class*='bg-gradient'] a:not([class^='button']):not([class^="link-social"]):not(.header-logo a):hover,
|
||||||
|
.theme-color-turquoise [class*='bg-color'] a:not([class^='button']):not([class^="link-social"]):not(.header-logo a):hover {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.theme-color-turquoise .header .header-menu:not([class*='dropdown-color']) .nav .nav-item .nav-dropdown a:not([class^='button']):not([class^="link-social"]):hover, .theme-color-turquoise .header .header-menu:not([class*='dropdown-color']) .nav .nav-item .nav-dropdown a:not([class^='button']):not([class^="link-social"]):focus {
|
||||||
|
color: #4cbfa6;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.theme-color-turquoise .bg-color-theme {
|
||||||
|
background: #4cbfa6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise .bg-color-theme-09 {
|
||||||
|
background: rgba(76, 191, 166, 0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise .bg-color-theme-08 {
|
||||||
|
background: rgba(76, 191, 166, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise .bg-color-theme-07 {
|
||||||
|
background: rgba(76, 191, 166, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise .bg-color-theme-06 {
|
||||||
|
background: rgba(76, 191, 166, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise .bg-color-theme-05 {
|
||||||
|
background: rgba(76, 191, 166, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise .bg-color-theme-04 {
|
||||||
|
background: rgba(76, 191, 166, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise .bg-color-theme-03 {
|
||||||
|
background: rgba(76, 191, 166, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise .bg-color-theme-02 {
|
||||||
|
background: rgba(76, 191, 166, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise .bg-color-theme-01 {
|
||||||
|
background: rgba(76, 191, 166, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise .bg-light-theme {
|
||||||
|
background: #E2F4F0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise .button-theme {
|
||||||
|
background: #4cbfa6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise .button-outline-theme {
|
||||||
|
border-color: #4cbfa6;
|
||||||
|
color: #4cbfa6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise .button-outline-theme:hover, .theme-color-turquoise .button-outline-theme:focus {
|
||||||
|
background: #4cbfa6;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise .button-circle-theme {
|
||||||
|
background: #4cbfa6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise .button-circle-outline-theme {
|
||||||
|
border-color: #4cbfa6;
|
||||||
|
color: #4cbfa6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise .button-circle-outline-theme:hover, .theme-color-turquoise .button-circle-outline-theme:focus {
|
||||||
|
background: #4cbfa6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise .button-backdrop-color-theme {
|
||||||
|
background: #4cbfa6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise .button-text-theme.button-text-1, .theme-color-turquoise .button-text-theme.button-text-2, .theme-color-turquoise .button-text-theme.button-text-3 {
|
||||||
|
color: #4cbfa6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise .button-text-theme.button-text-1:hover, .theme-color-turquoise .button-text-theme.button-text-2:hover, .theme-color-turquoise .button-text-theme.button-text-3:hover {
|
||||||
|
color: #4cbfa6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise .button-text-theme.button-text-1:before {
|
||||||
|
background: rgba(76, 191, 166, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise .button-text-theme.button-text-1:after {
|
||||||
|
background: #4cbfa6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise .button-text-theme.button-text-2:before {
|
||||||
|
background: rgba(76, 191, 166, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise .button-text-theme.button-text-2:after {
|
||||||
|
background: #4cbfa6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise .button-text-theme.button-text-3:before {
|
||||||
|
background: #4cbfa6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise .button-text-theme.button-text-3:hover:before {
|
||||||
|
background: #4cbfa6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise .bg-black .button-text-theme.button-text-1, .theme-color-turquoise .bg-black .button-text-theme.button-text-2, .theme-color-turquoise .bg-black .button-text-theme.button-text-3,
|
||||||
|
.theme-color-turquoise [class*='bg-dark'] .button-text-theme.button-text-1,
|
||||||
|
.theme-color-turquoise [class*='bg-dark'] .button-text-theme.button-text-2,
|
||||||
|
.theme-color-turquoise [class*='bg-dark'] .button-text-theme.button-text-3 {
|
||||||
|
color: #4cbfa6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise .bg-black .button-text-theme.button-text-1:hover, .theme-color-turquoise .bg-black .button-text-theme.button-text-2:hover, .theme-color-turquoise .bg-black .button-text-theme.button-text-3:hover,
|
||||||
|
.theme-color-turquoise [class*='bg-dark'] .button-text-theme.button-text-1:hover,
|
||||||
|
.theme-color-turquoise [class*='bg-dark'] .button-text-theme.button-text-2:hover,
|
||||||
|
.theme-color-turquoise [class*='bg-dark'] .button-text-theme.button-text-3:hover {
|
||||||
|
color: #4cbfa6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise .bg-black .button-text-theme.button-text-1:before,
|
||||||
|
.theme-color-turquoise [class*='bg-dark'] .button-text-theme.button-text-1:before {
|
||||||
|
background: rgba(76, 191, 166, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise .bg-black .button-text-theme.button-text-1:after,
|
||||||
|
.theme-color-turquoise [class*='bg-dark'] .button-text-theme.button-text-1:after {
|
||||||
|
background: #4cbfa6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise .bg-black .button-text-theme.button-text-2:before,
|
||||||
|
.theme-color-turquoise [class*='bg-dark'] .button-text-theme.button-text-2:before {
|
||||||
|
background: rgba(76, 191, 166, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise .bg-black .button-text-theme.button-text-2:after,
|
||||||
|
.theme-color-turquoise [class*='bg-dark'] .button-text-theme.button-text-2:after {
|
||||||
|
background: #4cbfa6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise .bg-black .button-text-theme.button-text-3:before,
|
||||||
|
.theme-color-turquoise [class*='bg-dark'] .button-text-theme.button-text-3:before {
|
||||||
|
background: #4cbfa6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise .bg-black .button-text-theme.button-text-3:hover:before,
|
||||||
|
.theme-color-turquoise [class*='bg-dark'] .button-text-theme.button-text-3:hover:before {
|
||||||
|
background: #4cbfa6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise .text-color-theme {
|
||||||
|
color: #4cbfa6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise .progress-box.progress-theme .animated-progress div {
|
||||||
|
background: #4cbfa6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise [class*='bg-gradient'] .progress-box.progress-theme .animated-progress div,
|
||||||
|
.theme-color-turquoise [class*='bg-color'] .progress-box.progress-theme .animated-progress div {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise.preloader-theme .preloader-1 div .loader-path {
|
||||||
|
stroke: #4cbfa6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise.preloader-theme .preloader-2 div span {
|
||||||
|
background: #4cbfa6;
|
||||||
|
background: linear-gradient(to right, #4cbfa6 10%, transparent 40%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise.preloader-theme .preloader-2 div span:before {
|
||||||
|
background: #4cbfa6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise.preloader-theme .preloader-3 div span:before, .theme-color-turquoise.preloader-theme .preloader-3 div span:after {
|
||||||
|
background: rgba(76, 191, 166, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise .accordion li .accordion-title {
|
||||||
|
border-color: rgba(76, 191, 166, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise .accordion li .accordion-title:before, .theme-color-turquoise .accordion li .accordion-title:after {
|
||||||
|
background: #4cbfa6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise .accordion li .accordion-title h1, .theme-color-turquoise .accordion li .accordion-title h2, .theme-color-turquoise .accordion li .accordion-title h3, .theme-color-turquoise .accordion li .accordion-title h4, .theme-color-turquoise .accordion li .accordion-title h5, .theme-color-turquoise .accordion li .accordion-title h6 {
|
||||||
|
color: #4cbfa6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise .accordion li.active .accordion-title {
|
||||||
|
border-color: #4cbfa6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise .accordion.style-3 li .accordion-title {
|
||||||
|
background: #E2F4F0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise .accordion.style-3 li.active .accordion-title {
|
||||||
|
background: #4cbfa6;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise .accordion.style-3 li.active .accordion-title:before, .theme-color-turquoise .accordion.style-3 li.active .accordion-title:after {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise .accordion.style-3 li.active .accordion-title h1, .theme-color-turquoise .accordion.style-3 li.active .accordion-title h2, .theme-color-turquoise .accordion.style-3 li.active .accordion-title h3, .theme-color-turquoise .accordion.style-3 li.active .accordion-title h4, .theme-color-turquoise .accordion.style-3 li.active .accordion-title h5, .theme-color-turquoise .accordion.style-3 li.active .accordion-title h6 {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise .bg-black .accordion li .accordion-title,
|
||||||
|
.theme-color-turquoise [class*='bg-dark'] .accordion li .accordion-title {
|
||||||
|
border-color: rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise .bg-black .accordion li .accordion-title:before, .theme-color-turquoise .bg-black .accordion li .accordion-title:after,
|
||||||
|
.theme-color-turquoise [class*='bg-dark'] .accordion li .accordion-title:before,
|
||||||
|
.theme-color-turquoise [class*='bg-dark'] .accordion li .accordion-title:after {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise .bg-black .accordion li.active .accordion-title,
|
||||||
|
.theme-color-turquoise [class*='bg-dark'] .accordion li.active .accordion-title {
|
||||||
|
border-color: #4cbfa6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise .bg-black .accordion.style-3 li .accordion-title,
|
||||||
|
.theme-color-turquoise [class*='bg-dark'] .accordion.style-3 li .accordion-title {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise .bg-black .accordion.style-3 li.active .accordion-title,
|
||||||
|
.theme-color-turquoise [class*='bg-dark'] .accordion.style-3 li.active .accordion-title {
|
||||||
|
background: #4cbfa6;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise .bg-black .accordion.style-3 li.active .accordion-title:before, .theme-color-turquoise .bg-black .accordion.style-3 li.active .accordion-title:after,
|
||||||
|
.theme-color-turquoise [class*='bg-dark'] .accordion.style-3 li.active .accordion-title:before,
|
||||||
|
.theme-color-turquoise [class*='bg-dark'] .accordion.style-3 li.active .accordion-title:after {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise .bg-black .accordion.style-3 li.active .accordion-title h1, .theme-color-turquoise .bg-black .accordion.style-3 li.active .accordion-title h2, .theme-color-turquoise .bg-black .accordion.style-3 li.active .accordion-title h3, .theme-color-turquoise .bg-black .accordion.style-3 li.active .accordion-title h4, .theme-color-turquoise .bg-black .accordion.style-3 li.active .accordion-title h5, .theme-color-turquoise .bg-black .accordion.style-3 li.active .accordion-title h6,
|
||||||
|
.theme-color-turquoise [class*='bg-dark'] .accordion.style-3 li.active .accordion-title h1,
|
||||||
|
.theme-color-turquoise [class*='bg-dark'] .accordion.style-3 li.active .accordion-title h2,
|
||||||
|
.theme-color-turquoise [class*='bg-dark'] .accordion.style-3 li.active .accordion-title h3,
|
||||||
|
.theme-color-turquoise [class*='bg-dark'] .accordion.style-3 li.active .accordion-title h4,
|
||||||
|
.theme-color-turquoise [class*='bg-dark'] .accordion.style-3 li.active .accordion-title h5,
|
||||||
|
.theme-color-turquoise [class*='bg-dark'] .accordion.style-3 li.active .accordion-title h6 {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise [class*='bg-gradient'] .accordion li .accordion-title,
|
||||||
|
.theme-color-turquoise [class*='bg-color'] .accordion li .accordion-title {
|
||||||
|
border-color: rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise [class*='bg-gradient'] .accordion li .accordion-title h1, .theme-color-turquoise [class*='bg-gradient'] .accordion li .accordion-title h2, .theme-color-turquoise [class*='bg-gradient'] .accordion li .accordion-title h3, .theme-color-turquoise [class*='bg-gradient'] .accordion li .accordion-title h4, .theme-color-turquoise [class*='bg-gradient'] .accordion li .accordion-title h5, .theme-color-turquoise [class*='bg-gradient'] .accordion li .accordion-title h6,
|
||||||
|
.theme-color-turquoise [class*='bg-color'] .accordion li .accordion-title h1,
|
||||||
|
.theme-color-turquoise [class*='bg-color'] .accordion li .accordion-title h2,
|
||||||
|
.theme-color-turquoise [class*='bg-color'] .accordion li .accordion-title h3,
|
||||||
|
.theme-color-turquoise [class*='bg-color'] .accordion li .accordion-title h4,
|
||||||
|
.theme-color-turquoise [class*='bg-color'] .accordion li .accordion-title h5,
|
||||||
|
.theme-color-turquoise [class*='bg-color'] .accordion li .accordion-title h6 {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise [class*='bg-gradient'] .accordion li .accordion-title:before, .theme-color-turquoise [class*='bg-gradient'] .accordion li .accordion-title:after,
|
||||||
|
.theme-color-turquoise [class*='bg-color'] .accordion li .accordion-title:before,
|
||||||
|
.theme-color-turquoise [class*='bg-color'] .accordion li .accordion-title:after {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise [class*='bg-gradient'] .accordion li.active .accordion-title,
|
||||||
|
.theme-color-turquoise [class*='bg-color'] .accordion li.active .accordion-title {
|
||||||
|
border-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise [class*='bg-gradient'] .accordion.style-3 li .accordion-title,
|
||||||
|
.theme-color-turquoise [class*='bg-color'] .accordion.style-3 li .accordion-title {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise [class*='bg-gradient'] .accordion.style-3 li .accordion-title h1, .theme-color-turquoise [class*='bg-gradient'] .accordion.style-3 li .accordion-title h2, .theme-color-turquoise [class*='bg-gradient'] .accordion.style-3 li .accordion-title h3, .theme-color-turquoise [class*='bg-gradient'] .accordion.style-3 li .accordion-title h4, .theme-color-turquoise [class*='bg-gradient'] .accordion.style-3 li .accordion-title h5, .theme-color-turquoise [class*='bg-gradient'] .accordion.style-3 li .accordion-title h6,
|
||||||
|
.theme-color-turquoise [class*='bg-color'] .accordion.style-3 li .accordion-title h1,
|
||||||
|
.theme-color-turquoise [class*='bg-color'] .accordion.style-3 li .accordion-title h2,
|
||||||
|
.theme-color-turquoise [class*='bg-color'] .accordion.style-3 li .accordion-title h3,
|
||||||
|
.theme-color-turquoise [class*='bg-color'] .accordion.style-3 li .accordion-title h4,
|
||||||
|
.theme-color-turquoise [class*='bg-color'] .accordion.style-3 li .accordion-title h5,
|
||||||
|
.theme-color-turquoise [class*='bg-color'] .accordion.style-3 li .accordion-title h6 {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title,
|
||||||
|
.theme-color-turquoise [class*='bg-color'] .accordion.style-3 li.active .accordion-title {
|
||||||
|
background: white;
|
||||||
|
color: #7C7C7C;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title:before, .theme-color-turquoise [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title:after,
|
||||||
|
.theme-color-turquoise [class*='bg-color'] .accordion.style-3 li.active .accordion-title:before,
|
||||||
|
.theme-color-turquoise [class*='bg-color'] .accordion.style-3 li.active .accordion-title:after {
|
||||||
|
background: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title h1, .theme-color-turquoise [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title h2, .theme-color-turquoise [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title h3, .theme-color-turquoise [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title h4, .theme-color-turquoise [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title h5, .theme-color-turquoise [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title h6,
|
||||||
|
.theme-color-turquoise [class*='bg-color'] .accordion.style-3 li.active .accordion-title h1,
|
||||||
|
.theme-color-turquoise [class*='bg-color'] .accordion.style-3 li.active .accordion-title h2,
|
||||||
|
.theme-color-turquoise [class*='bg-color'] .accordion.style-3 li.active .accordion-title h3,
|
||||||
|
.theme-color-turquoise [class*='bg-color'] .accordion.style-3 li.active .accordion-title h4,
|
||||||
|
.theme-color-turquoise [class*='bg-color'] .accordion.style-3 li.active .accordion-title h5,
|
||||||
|
.theme-color-turquoise [class*='bg-color'] .accordion.style-3 li.active .accordion-title h6 {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise .text-link-2:before,
|
||||||
|
.theme-color-turquoise .text-link-3:before,
|
||||||
|
.theme-color-turquoise .text-link-4:before {
|
||||||
|
background: #4cbfa6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise .text-link-5:after,
|
||||||
|
.theme-color-turquoise .text-link-6:after,
|
||||||
|
.theme-color-turquoise .text-link-7:after {
|
||||||
|
background: #4cbfa6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise .text-link-8:before {
|
||||||
|
background: rgba(76, 191, 166, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise .bg-black .text-link-2:before,
|
||||||
|
.theme-color-turquoise .bg-black .text-link-3:before,
|
||||||
|
.theme-color-turquoise .bg-black .text-link-4:before,
|
||||||
|
.theme-color-turquoise [class*='bg-dark'] .text-link-2:before,
|
||||||
|
.theme-color-turquoise [class*='bg-dark'] .text-link-3:before,
|
||||||
|
.theme-color-turquoise [class*='bg-dark'] .text-link-4:before {
|
||||||
|
background: #4cbfa6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise .bg-black .text-link-5:after,
|
||||||
|
.theme-color-turquoise .bg-black .text-link-6:after,
|
||||||
|
.theme-color-turquoise .bg-black .text-link-7:after,
|
||||||
|
.theme-color-turquoise [class*='bg-dark'] .text-link-5:after,
|
||||||
|
.theme-color-turquoise [class*='bg-dark'] .text-link-6:after,
|
||||||
|
.theme-color-turquoise [class*='bg-dark'] .text-link-7:after {
|
||||||
|
background: #4cbfa6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise .bg-black .text-link-8:before,
|
||||||
|
.theme-color-turquoise [class*='bg-dark'] .text-link-8:before {
|
||||||
|
background: rgba(76, 191, 166, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise [class*='bg-gradient'] .text-link-2:before, .theme-color-turquoise [class*='bg-gradient'] .text-link-3:before, .theme-color-turquoise [class*='bg-gradient'] .text-link-4:before,
|
||||||
|
.theme-color-turquoise [class*='bg-color'] .text-link-2:before,
|
||||||
|
.theme-color-turquoise [class*='bg-color'] .text-link-3:before,
|
||||||
|
.theme-color-turquoise [class*='bg-color'] .text-link-4:before {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise [class*='bg-gradient'] .text-link-5:before, .theme-color-turquoise [class*='bg-gradient'] .text-link-6:before, .theme-color-turquoise [class*='bg-gradient'] .text-link-7:before,
|
||||||
|
.theme-color-turquoise [class*='bg-color'] .text-link-5:before,
|
||||||
|
.theme-color-turquoise [class*='bg-color'] .text-link-6:before,
|
||||||
|
.theme-color-turquoise [class*='bg-color'] .text-link-7:before {
|
||||||
|
background: rgba(255, 255, 255, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise [class*='bg-gradient'] .text-link-5:after, .theme-color-turquoise [class*='bg-gradient'] .text-link-6:after, .theme-color-turquoise [class*='bg-gradient'] .text-link-7:after,
|
||||||
|
.theme-color-turquoise [class*='bg-color'] .text-link-5:after,
|
||||||
|
.theme-color-turquoise [class*='bg-color'] .text-link-6:after,
|
||||||
|
.theme-color-turquoise [class*='bg-color'] .text-link-7:after {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise [class*='bg-gradient'] .text-link-8:before,
|
||||||
|
.theme-color-turquoise [class*='bg-color'] .text-link-8:before {
|
||||||
|
background: rgba(255, 255, 255, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-turquoise .form-style-2 input:focus, .theme-color-turquoise .form-style-2 textarea:focus, .theme-color-turquoise .form-style-2 .custom-select:focus, .theme-color-turquoise .form-style-2 .form-control:focus,
|
||||||
|
.theme-color-turquoise .form-style-4 input:focus,
|
||||||
|
.theme-color-turquoise .form-style-4 textarea:focus,
|
||||||
|
.theme-color-turquoise .form-style-4 .custom-select:focus,
|
||||||
|
.theme-color-turquoise .form-style-4 .form-control:focus {
|
||||||
|
border-color: #4cbfa6;
|
||||||
|
}
|
||||||
412
static/assets/css/theme-colors/theme-color-very-peri.css
Normal file
412
static/assets/css/theme-colors/theme-color-very-peri.css
Normal file
@@ -0,0 +1,412 @@
|
|||||||
|
/*------------------------------------------------
|
||||||
|
*
|
||||||
|
* Theme Color - Very Peri
|
||||||
|
*
|
||||||
|
-------------------------------------------------*/
|
||||||
|
.theme-color-very-peri a:not([class^='button']):not([class^="link-social"]):not(.header-logo a):hover {
|
||||||
|
color: #6667AB;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri [class*='bg-gradient'] a:not([class^='button']):not([class^="link-social"]):not(.header-logo a):hover,
|
||||||
|
.theme-color-very-peri [class*='bg-color'] a:not([class^='button']):not([class^="link-social"]):not(.header-logo a):hover {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.theme-color-very-peri .header .header-menu:not([class*='dropdown-color']) .nav .nav-item .nav-dropdown a:not([class^='button']):not([class^="link-social"]):hover, .theme-color-very-peri .header .header-menu:not([class*='dropdown-color']) .nav .nav-item .nav-dropdown a:not([class^='button']):not([class^="link-social"]):focus {
|
||||||
|
color: #6667AB;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.theme-color-very-peri .bg-color-theme {
|
||||||
|
background: #6667AB;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri .bg-color-theme-09 {
|
||||||
|
background: rgba(102, 103, 171, 0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri .bg-color-theme-08 {
|
||||||
|
background: rgba(102, 103, 171, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri .bg-color-theme-07 {
|
||||||
|
background: rgba(102, 103, 171, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri .bg-color-theme-06 {
|
||||||
|
background: rgba(102, 103, 171, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri .bg-color-theme-05 {
|
||||||
|
background: rgba(102, 103, 171, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri .bg-color-theme-04 {
|
||||||
|
background: rgba(102, 103, 171, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri .bg-color-theme-03 {
|
||||||
|
background: rgba(102, 103, 171, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri .bg-color-theme-02 {
|
||||||
|
background: rgba(102, 103, 171, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri .bg-color-theme-01 {
|
||||||
|
background: rgba(102, 103, 171, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri .bg-light-theme {
|
||||||
|
background: #EDEDF5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri .button-theme {
|
||||||
|
background: #6667AB;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri .button-outline-theme {
|
||||||
|
border-color: #6667AB;
|
||||||
|
color: #6667AB;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri .button-outline-theme:hover, .theme-color-very-peri .button-outline-theme:focus {
|
||||||
|
background: #6667AB;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri .button-circle-theme {
|
||||||
|
background: #6667AB;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri .button-circle-outline-theme {
|
||||||
|
border-color: #6667AB;
|
||||||
|
color: #6667AB;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri .button-circle-outline-theme:hover, .theme-color-very-peri .button-circle-outline-theme:focus {
|
||||||
|
background: #6667AB;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri .button-backdrop-color-theme {
|
||||||
|
background: #6667AB;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri .button-text-theme.button-text-1, .theme-color-very-peri .button-text-theme.button-text-2, .theme-color-very-peri .button-text-theme.button-text-3 {
|
||||||
|
color: #6667AB;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri .button-text-theme.button-text-1:hover, .theme-color-very-peri .button-text-theme.button-text-2:hover, .theme-color-very-peri .button-text-theme.button-text-3:hover {
|
||||||
|
color: #6667AB;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri .button-text-theme.button-text-1:before {
|
||||||
|
background: rgba(102, 103, 171, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri .button-text-theme.button-text-1:after {
|
||||||
|
background: #6667AB;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri .button-text-theme.button-text-2:before {
|
||||||
|
background: rgba(102, 103, 171, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri .button-text-theme.button-text-2:after {
|
||||||
|
background: #6667AB;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri .button-text-theme.button-text-3:before {
|
||||||
|
background: #6667AB;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri .button-text-theme.button-text-3:hover:before {
|
||||||
|
background: #6667AB;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri .bg-black .button-text-theme.button-text-1, .theme-color-very-peri .bg-black .button-text-theme.button-text-2, .theme-color-very-peri .bg-black .button-text-theme.button-text-3,
|
||||||
|
.theme-color-very-peri [class*='bg-dark'] .button-text-theme.button-text-1,
|
||||||
|
.theme-color-very-peri [class*='bg-dark'] .button-text-theme.button-text-2,
|
||||||
|
.theme-color-very-peri [class*='bg-dark'] .button-text-theme.button-text-3 {
|
||||||
|
color: #6667AB;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri .bg-black .button-text-theme.button-text-1:hover, .theme-color-very-peri .bg-black .button-text-theme.button-text-2:hover, .theme-color-very-peri .bg-black .button-text-theme.button-text-3:hover,
|
||||||
|
.theme-color-very-peri [class*='bg-dark'] .button-text-theme.button-text-1:hover,
|
||||||
|
.theme-color-very-peri [class*='bg-dark'] .button-text-theme.button-text-2:hover,
|
||||||
|
.theme-color-very-peri [class*='bg-dark'] .button-text-theme.button-text-3:hover {
|
||||||
|
color: #6667AB;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri .bg-black .button-text-theme.button-text-1:before,
|
||||||
|
.theme-color-very-peri [class*='bg-dark'] .button-text-theme.button-text-1:before {
|
||||||
|
background: rgba(102, 103, 171, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri .bg-black .button-text-theme.button-text-1:after,
|
||||||
|
.theme-color-very-peri [class*='bg-dark'] .button-text-theme.button-text-1:after {
|
||||||
|
background: #6667AB;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri .bg-black .button-text-theme.button-text-2:before,
|
||||||
|
.theme-color-very-peri [class*='bg-dark'] .button-text-theme.button-text-2:before {
|
||||||
|
background: rgba(102, 103, 171, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri .bg-black .button-text-theme.button-text-2:after,
|
||||||
|
.theme-color-very-peri [class*='bg-dark'] .button-text-theme.button-text-2:after {
|
||||||
|
background: #6667AB;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri .bg-black .button-text-theme.button-text-3:before,
|
||||||
|
.theme-color-very-peri [class*='bg-dark'] .button-text-theme.button-text-3:before {
|
||||||
|
background: #6667AB;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri .bg-black .button-text-theme.button-text-3:hover:before,
|
||||||
|
.theme-color-very-peri [class*='bg-dark'] .button-text-theme.button-text-3:hover:before {
|
||||||
|
background: #6667AB;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri .text-color-theme {
|
||||||
|
color: #6667AB;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri .progress-box.progress-theme .animated-progress div {
|
||||||
|
background: #6667AB;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri [class*='bg-gradient'] .progress-box.progress-theme .animated-progress div,
|
||||||
|
.theme-color-very-peri [class*='bg-color'] .progress-box.progress-theme .animated-progress div {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri.preloader-theme .preloader-1 div .loader-path {
|
||||||
|
stroke: #6667AB;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri.preloader-theme .preloader-2 div span {
|
||||||
|
background: #6667AB;
|
||||||
|
background: linear-gradient(to right, #6667AB 10%, transparent 40%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri.preloader-theme .preloader-2 div span:before {
|
||||||
|
background: #6667AB;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri.preloader-theme .preloader-3 div span:before, .theme-color-very-peri.preloader-theme .preloader-3 div span:after {
|
||||||
|
background: rgba(102, 103, 171, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri .accordion li .accordion-title {
|
||||||
|
border-color: rgba(102, 103, 171, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri .accordion li .accordion-title:before, .theme-color-very-peri .accordion li .accordion-title:after {
|
||||||
|
background: #6667AB;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri .accordion li .accordion-title h1, .theme-color-very-peri .accordion li .accordion-title h2, .theme-color-very-peri .accordion li .accordion-title h3, .theme-color-very-peri .accordion li .accordion-title h4, .theme-color-very-peri .accordion li .accordion-title h5, .theme-color-very-peri .accordion li .accordion-title h6 {
|
||||||
|
color: #6667AB;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri .accordion li.active .accordion-title {
|
||||||
|
border-color: #6667AB;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri .accordion.style-3 li .accordion-title {
|
||||||
|
background: #EDEDF5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri .accordion.style-3 li.active .accordion-title {
|
||||||
|
background: #6667AB;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri .accordion.style-3 li.active .accordion-title:before, .theme-color-very-peri .accordion.style-3 li.active .accordion-title:after {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri .accordion.style-3 li.active .accordion-title h1, .theme-color-very-peri .accordion.style-3 li.active .accordion-title h2, .theme-color-very-peri .accordion.style-3 li.active .accordion-title h3, .theme-color-very-peri .accordion.style-3 li.active .accordion-title h4, .theme-color-very-peri .accordion.style-3 li.active .accordion-title h5, .theme-color-very-peri .accordion.style-3 li.active .accordion-title h6 {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri .bg-black .accordion li .accordion-title,
|
||||||
|
.theme-color-very-peri [class*='bg-dark'] .accordion li .accordion-title {
|
||||||
|
border-color: rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri .bg-black .accordion li .accordion-title:before, .theme-color-very-peri .bg-black .accordion li .accordion-title:after,
|
||||||
|
.theme-color-very-peri [class*='bg-dark'] .accordion li .accordion-title:before,
|
||||||
|
.theme-color-very-peri [class*='bg-dark'] .accordion li .accordion-title:after {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri .bg-black .accordion li.active .accordion-title,
|
||||||
|
.theme-color-very-peri [class*='bg-dark'] .accordion li.active .accordion-title {
|
||||||
|
border-color: #6667AB;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri .bg-black .accordion.style-3 li .accordion-title,
|
||||||
|
.theme-color-very-peri [class*='bg-dark'] .accordion.style-3 li .accordion-title {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri .bg-black .accordion.style-3 li.active .accordion-title,
|
||||||
|
.theme-color-very-peri [class*='bg-dark'] .accordion.style-3 li.active .accordion-title {
|
||||||
|
background: #6667AB;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri .bg-black .accordion.style-3 li.active .accordion-title:before, .theme-color-very-peri .bg-black .accordion.style-3 li.active .accordion-title:after,
|
||||||
|
.theme-color-very-peri [class*='bg-dark'] .accordion.style-3 li.active .accordion-title:before,
|
||||||
|
.theme-color-very-peri [class*='bg-dark'] .accordion.style-3 li.active .accordion-title:after {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri .bg-black .accordion.style-3 li.active .accordion-title h1, .theme-color-very-peri .bg-black .accordion.style-3 li.active .accordion-title h2, .theme-color-very-peri .bg-black .accordion.style-3 li.active .accordion-title h3, .theme-color-very-peri .bg-black .accordion.style-3 li.active .accordion-title h4, .theme-color-very-peri .bg-black .accordion.style-3 li.active .accordion-title h5, .theme-color-very-peri .bg-black .accordion.style-3 li.active .accordion-title h6,
|
||||||
|
.theme-color-very-peri [class*='bg-dark'] .accordion.style-3 li.active .accordion-title h1,
|
||||||
|
.theme-color-very-peri [class*='bg-dark'] .accordion.style-3 li.active .accordion-title h2,
|
||||||
|
.theme-color-very-peri [class*='bg-dark'] .accordion.style-3 li.active .accordion-title h3,
|
||||||
|
.theme-color-very-peri [class*='bg-dark'] .accordion.style-3 li.active .accordion-title h4,
|
||||||
|
.theme-color-very-peri [class*='bg-dark'] .accordion.style-3 li.active .accordion-title h5,
|
||||||
|
.theme-color-very-peri [class*='bg-dark'] .accordion.style-3 li.active .accordion-title h6 {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri [class*='bg-gradient'] .accordion li .accordion-title,
|
||||||
|
.theme-color-very-peri [class*='bg-color'] .accordion li .accordion-title {
|
||||||
|
border-color: rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri [class*='bg-gradient'] .accordion li .accordion-title h1, .theme-color-very-peri [class*='bg-gradient'] .accordion li .accordion-title h2, .theme-color-very-peri [class*='bg-gradient'] .accordion li .accordion-title h3, .theme-color-very-peri [class*='bg-gradient'] .accordion li .accordion-title h4, .theme-color-very-peri [class*='bg-gradient'] .accordion li .accordion-title h5, .theme-color-very-peri [class*='bg-gradient'] .accordion li .accordion-title h6,
|
||||||
|
.theme-color-very-peri [class*='bg-color'] .accordion li .accordion-title h1,
|
||||||
|
.theme-color-very-peri [class*='bg-color'] .accordion li .accordion-title h2,
|
||||||
|
.theme-color-very-peri [class*='bg-color'] .accordion li .accordion-title h3,
|
||||||
|
.theme-color-very-peri [class*='bg-color'] .accordion li .accordion-title h4,
|
||||||
|
.theme-color-very-peri [class*='bg-color'] .accordion li .accordion-title h5,
|
||||||
|
.theme-color-very-peri [class*='bg-color'] .accordion li .accordion-title h6 {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri [class*='bg-gradient'] .accordion li .accordion-title:before, .theme-color-very-peri [class*='bg-gradient'] .accordion li .accordion-title:after,
|
||||||
|
.theme-color-very-peri [class*='bg-color'] .accordion li .accordion-title:before,
|
||||||
|
.theme-color-very-peri [class*='bg-color'] .accordion li .accordion-title:after {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri [class*='bg-gradient'] .accordion li.active .accordion-title,
|
||||||
|
.theme-color-very-peri [class*='bg-color'] .accordion li.active .accordion-title {
|
||||||
|
border-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri [class*='bg-gradient'] .accordion.style-3 li .accordion-title,
|
||||||
|
.theme-color-very-peri [class*='bg-color'] .accordion.style-3 li .accordion-title {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri [class*='bg-gradient'] .accordion.style-3 li .accordion-title h1, .theme-color-very-peri [class*='bg-gradient'] .accordion.style-3 li .accordion-title h2, .theme-color-very-peri [class*='bg-gradient'] .accordion.style-3 li .accordion-title h3, .theme-color-very-peri [class*='bg-gradient'] .accordion.style-3 li .accordion-title h4, .theme-color-very-peri [class*='bg-gradient'] .accordion.style-3 li .accordion-title h5, .theme-color-very-peri [class*='bg-gradient'] .accordion.style-3 li .accordion-title h6,
|
||||||
|
.theme-color-very-peri [class*='bg-color'] .accordion.style-3 li .accordion-title h1,
|
||||||
|
.theme-color-very-peri [class*='bg-color'] .accordion.style-3 li .accordion-title h2,
|
||||||
|
.theme-color-very-peri [class*='bg-color'] .accordion.style-3 li .accordion-title h3,
|
||||||
|
.theme-color-very-peri [class*='bg-color'] .accordion.style-3 li .accordion-title h4,
|
||||||
|
.theme-color-very-peri [class*='bg-color'] .accordion.style-3 li .accordion-title h5,
|
||||||
|
.theme-color-very-peri [class*='bg-color'] .accordion.style-3 li .accordion-title h6 {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title,
|
||||||
|
.theme-color-very-peri [class*='bg-color'] .accordion.style-3 li.active .accordion-title {
|
||||||
|
background: white;
|
||||||
|
color: #7C7C7C;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title:before, .theme-color-very-peri [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title:after,
|
||||||
|
.theme-color-very-peri [class*='bg-color'] .accordion.style-3 li.active .accordion-title:before,
|
||||||
|
.theme-color-very-peri [class*='bg-color'] .accordion.style-3 li.active .accordion-title:after {
|
||||||
|
background: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title h1, .theme-color-very-peri [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title h2, .theme-color-very-peri [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title h3, .theme-color-very-peri [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title h4, .theme-color-very-peri [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title h5, .theme-color-very-peri [class*='bg-gradient'] .accordion.style-3 li.active .accordion-title h6,
|
||||||
|
.theme-color-very-peri [class*='bg-color'] .accordion.style-3 li.active .accordion-title h1,
|
||||||
|
.theme-color-very-peri [class*='bg-color'] .accordion.style-3 li.active .accordion-title h2,
|
||||||
|
.theme-color-very-peri [class*='bg-color'] .accordion.style-3 li.active .accordion-title h3,
|
||||||
|
.theme-color-very-peri [class*='bg-color'] .accordion.style-3 li.active .accordion-title h4,
|
||||||
|
.theme-color-very-peri [class*='bg-color'] .accordion.style-3 li.active .accordion-title h5,
|
||||||
|
.theme-color-very-peri [class*='bg-color'] .accordion.style-3 li.active .accordion-title h6 {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri .text-link-2:before,
|
||||||
|
.theme-color-very-peri .text-link-3:before,
|
||||||
|
.theme-color-very-peri .text-link-4:before {
|
||||||
|
background: #6667AB;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri .text-link-5:after,
|
||||||
|
.theme-color-very-peri .text-link-6:after,
|
||||||
|
.theme-color-very-peri .text-link-7:after {
|
||||||
|
background: #6667AB;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri .text-link-8:before {
|
||||||
|
background: rgba(102, 103, 171, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri .bg-black .text-link-2:before,
|
||||||
|
.theme-color-very-peri .bg-black .text-link-3:before,
|
||||||
|
.theme-color-very-peri .bg-black .text-link-4:before,
|
||||||
|
.theme-color-very-peri [class*='bg-dark'] .text-link-2:before,
|
||||||
|
.theme-color-very-peri [class*='bg-dark'] .text-link-3:before,
|
||||||
|
.theme-color-very-peri [class*='bg-dark'] .text-link-4:before {
|
||||||
|
background: #6667AB;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri .bg-black .text-link-5:after,
|
||||||
|
.theme-color-very-peri .bg-black .text-link-6:after,
|
||||||
|
.theme-color-very-peri .bg-black .text-link-7:after,
|
||||||
|
.theme-color-very-peri [class*='bg-dark'] .text-link-5:after,
|
||||||
|
.theme-color-very-peri [class*='bg-dark'] .text-link-6:after,
|
||||||
|
.theme-color-very-peri [class*='bg-dark'] .text-link-7:after {
|
||||||
|
background: #6667AB;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri .bg-black .text-link-8:before,
|
||||||
|
.theme-color-very-peri [class*='bg-dark'] .text-link-8:before {
|
||||||
|
background: rgba(102, 103, 171, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri [class*='bg-gradient'] .text-link-2:before, .theme-color-very-peri [class*='bg-gradient'] .text-link-3:before, .theme-color-very-peri [class*='bg-gradient'] .text-link-4:before,
|
||||||
|
.theme-color-very-peri [class*='bg-color'] .text-link-2:before,
|
||||||
|
.theme-color-very-peri [class*='bg-color'] .text-link-3:before,
|
||||||
|
.theme-color-very-peri [class*='bg-color'] .text-link-4:before {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri [class*='bg-gradient'] .text-link-5:before, .theme-color-very-peri [class*='bg-gradient'] .text-link-6:before, .theme-color-very-peri [class*='bg-gradient'] .text-link-7:before,
|
||||||
|
.theme-color-very-peri [class*='bg-color'] .text-link-5:before,
|
||||||
|
.theme-color-very-peri [class*='bg-color'] .text-link-6:before,
|
||||||
|
.theme-color-very-peri [class*='bg-color'] .text-link-7:before {
|
||||||
|
background: rgba(255, 255, 255, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri [class*='bg-gradient'] .text-link-5:after, .theme-color-very-peri [class*='bg-gradient'] .text-link-6:after, .theme-color-very-peri [class*='bg-gradient'] .text-link-7:after,
|
||||||
|
.theme-color-very-peri [class*='bg-color'] .text-link-5:after,
|
||||||
|
.theme-color-very-peri [class*='bg-color'] .text-link-6:after,
|
||||||
|
.theme-color-very-peri [class*='bg-color'] .text-link-7:after {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri [class*='bg-gradient'] .text-link-8:before,
|
||||||
|
.theme-color-very-peri [class*='bg-color'] .text-link-8:before {
|
||||||
|
background: rgba(255, 255, 255, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-color-very-peri .form-style-2 input:focus, .theme-color-very-peri .form-style-2 textarea:focus, .theme-color-very-peri .form-style-2 .custom-select:focus, .theme-color-very-peri .form-style-2 .form-control:focus,
|
||||||
|
.theme-color-very-peri .form-style-4 input:focus,
|
||||||
|
.theme-color-very-peri .form-style-4 textarea:focus,
|
||||||
|
.theme-color-very-peri .form-style-4 .custom-select:focus,
|
||||||
|
.theme-color-very-peri .form-style-4 .form-control:focus {
|
||||||
|
border-color: #6667AB;
|
||||||
|
}
|
||||||
@@ -7066,6 +7066,149 @@ button.mfp-close:hover {
|
|||||||
height: 70px;
|
height: 70px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.breadcrumb-wrapper {
|
||||||
|
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
||||||
|
border-bottom: 1px solid #dee2e6;
|
||||||
|
padding: 1rem 0;
|
||||||
|
}
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.breadcrumb-wrapper {
|
||||||
|
padding: 0.75rem 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.breadcrumb-wrapper .breadcrumb {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
@media (max-width: 576px) {
|
||||||
|
.breadcrumb-wrapper .breadcrumb {
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.breadcrumb-wrapper .breadcrumb .breadcrumb-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.breadcrumb-wrapper .breadcrumb .breadcrumb-item:not(:last-child) {
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
}
|
||||||
|
.breadcrumb-wrapper .breadcrumb .breadcrumb-item:not(:last-child)::after {
|
||||||
|
content: "";
|
||||||
|
display: inline-block;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-left: 4px solid #6c757d;
|
||||||
|
border-top: 3px solid transparent;
|
||||||
|
border-bottom: 3px solid transparent;
|
||||||
|
margin-left: 0.75rem;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
@media (max-width: 576px) {
|
||||||
|
.breadcrumb-wrapper .breadcrumb .breadcrumb-item:not(:last-child)::after {
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
border-left-width: 3px;
|
||||||
|
border-top-width: 2px;
|
||||||
|
border-bottom-width: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.breadcrumb-wrapper .breadcrumb .breadcrumb-item a {
|
||||||
|
color: #495057;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: all 0.2s ease-in-out;
|
||||||
|
padding: 0.25rem 0.5rem;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
}
|
||||||
|
.breadcrumb-wrapper .breadcrumb .breadcrumb-item a:hover {
|
||||||
|
color: #007bff;
|
||||||
|
background-color: rgba(0, 123, 255, 0.1);
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
.breadcrumb-wrapper .breadcrumb .breadcrumb-item a:focus {
|
||||||
|
outline: 2px solid #007bff;
|
||||||
|
outline-offset: 1px;
|
||||||
|
}
|
||||||
|
.breadcrumb-wrapper .breadcrumb .breadcrumb-item a i.fas {
|
||||||
|
margin-right: 0.375rem;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
}
|
||||||
|
@media (max-width: 576px) {
|
||||||
|
.breadcrumb-wrapper .breadcrumb .breadcrumb-item a i.fas {
|
||||||
|
margin-right: 0.25rem;
|
||||||
|
font-size: 0.6875rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.breadcrumb-wrapper .breadcrumb .breadcrumb-item.active {
|
||||||
|
color: #6c757d;
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 0.25rem 0.5rem;
|
||||||
|
max-width: 200px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.breadcrumb-wrapper .breadcrumb .breadcrumb-item.active {
|
||||||
|
max-width: 150px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 576px) {
|
||||||
|
.breadcrumb-wrapper .breadcrumb .breadcrumb-item.active {
|
||||||
|
max-width: 120px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 576px) {
|
||||||
|
.breadcrumb-wrapper .breadcrumb .breadcrumb-item:not(:last-child):not(:nth-last-child(2)) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.breadcrumb-wrapper .breadcrumb .breadcrumb-item:not(:last-child):not(:nth-last-child(2)) + .breadcrumb-item::before {
|
||||||
|
content: "...";
|
||||||
|
margin: 0 0.5rem;
|
||||||
|
color: #6c757d;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
.breadcrumb-wrapper {
|
||||||
|
background: linear-gradient(135deg, #343a40 0%, #495057 100%);
|
||||||
|
border-bottom-color: #6c757d;
|
||||||
|
}
|
||||||
|
.breadcrumb-wrapper .breadcrumb .breadcrumb-item:not(:last-child)::after {
|
||||||
|
border-left-color: #adb5bd;
|
||||||
|
}
|
||||||
|
.breadcrumb-wrapper .breadcrumb .breadcrumb-item a {
|
||||||
|
color: #dee2e6;
|
||||||
|
}
|
||||||
|
.breadcrumb-wrapper .breadcrumb .breadcrumb-item a:hover {
|
||||||
|
color: #66b2ff;
|
||||||
|
background-color: rgba(102, 178, 255, 0.1);
|
||||||
|
}
|
||||||
|
.breadcrumb-wrapper .breadcrumb .breadcrumb-item a:focus {
|
||||||
|
outline-color: #66b2ff;
|
||||||
|
}
|
||||||
|
.breadcrumb-wrapper .breadcrumb .breadcrumb-item.active {
|
||||||
|
color: #adb5bd;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sr-only {
|
||||||
|
position: absolute;
|
||||||
|
width: 1px;
|
||||||
|
height: 1px;
|
||||||
|
padding: 0;
|
||||||
|
margin: -1px;
|
||||||
|
overflow: hidden;
|
||||||
|
clip: rect(0, 0, 0, 0);
|
||||||
|
white-space: nowrap;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.masonry {
|
.masonry {
|
||||||
margin: 0 -1em -2em;
|
margin: 0 -1em -2em;
|
||||||
}
|
}
|
||||||
@@ -7708,6 +7851,30 @@ button.mfp-close:hover {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Styles for tables */
|
||||||
|
figure.wp-block-table table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 1.25rem;
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
}
|
||||||
|
figure.wp-block-table table thead {
|
||||||
|
background-color: #f8f9fa;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
figure.wp-block-table table th, figure.wp-block-table table td {
|
||||||
|
border: 1px solid #dee2e6;
|
||||||
|
padding: 0.5rem;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
figure.wp-block-table table th {
|
||||||
|
background-color: #f1f3f5;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
figure.wp-block-table table tbody tr:nth-child(odd) {
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
}
|
||||||
|
|
||||||
body:after {
|
body:after {
|
||||||
content: "";
|
content: "";
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|||||||
1
static/assets/css/theme.css.map
Normal file
1
static/assets/css/theme.css.map
Normal file
File diff suppressed because one or more lines are too long
39
test-table.html
Normal file
39
test-table.html
Normal file
@@ -0,0 +1,39 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Table Test</title>
|
||||||
|
<link rel="stylesheet" href="assets/css/scss/theme.scss">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<figure class="wp-block-table">
|
||||||
|
<table class="has-fixed-layout">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>TECHNOLOGIE</th>
|
||||||
|
<th>DÉBIT MAXIMUM THÉORIQUE (Mégabit/s)</th>
|
||||||
|
<th>REMARQUE(S)</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td><strong>FTTH (Fibre jusqu’à l’abonné)</strong></td>
|
||||||
|
<td>Jusqu’à 10 000 Mégabit/s</td>
|
||||||
|
<td>Débit symétrique, très haute performance.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><strong>FTTLa (Fibre jusqu’au dernier amplificateur)</strong></td>
|
||||||
|
<td>Jusqu’à 1000 Mégabit/s</td>
|
||||||
|
<td>Débit variable selon la distance au point de raccordement.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><strong>Boucle Locale Radio</strong></td>
|
||||||
|
<td>Jusqu’à 100 Mégabit/s</td>
|
||||||
|
<td>Dépend de la qualité du signal et de l’environnement.</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</figure>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user