feat: Add a breadcrumb
This commit is contained in:
kbe
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; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user