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
Reference in New Issue
Block a user