713 lines
13 KiB
SCSS
713 lines
13 KiB
SCSS
//
|
|
// Slider styles //
|
|
//
|
|
.owl-carousel {
|
|
&[data-owl-nav="true"] {
|
|
&:not(.owl-nav-left, .owl-nav-right, .owl-nav-overlay, .owl-nav-overlay-left, .owl-nav-overlay-right, .owl-nav-overlap, .owl-nav-overlap-left, .owl-nav-overlap-right) {
|
|
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: $color-black-06;
|
|
@include transition(ease-out 0.16s);
|
|
i {
|
|
font-size: 16px;
|
|
line-height: 36px;
|
|
}
|
|
&:hover, &:focus {
|
|
background: $bg-grey;
|
|
color: $color-black;
|
|
}
|
|
}
|
|
}
|
|
@include breakpoint-less(md) {
|
|
height: 32px;
|
|
button {
|
|
&.owl-next, &.owl-prev {
|
|
width: 32px;
|
|
height: 32px;
|
|
i {
|
|
font-size: 13px;
|
|
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 $color-black;
|
|
}
|
|
&:after {
|
|
top: 50%;
|
|
left: 50%;
|
|
@include transform(translate(-50%,-50%));
|
|
opacity: 0.4;
|
|
background: $color-black;
|
|
width: 4px;
|
|
height: 4px;
|
|
}
|
|
&: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"], .owl-dots-overlay, .owl-dots-overlay-left, .owl-dots-overlay-right, .owl-dots-overlap, .owl-dots-overlap-left, .owl-dots-overlap-right) {
|
|
.owl-nav {
|
|
margin-top: -20px;
|
|
@include breakpoint-less(md) {
|
|
margin-top: -18px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
div[class^='bg-dark'], div[class*=' bg-dark'], div[class^='bg-black'], div[class*=' bg-black'] {
|
|
.owl-carousel {
|
|
.owl-nav {
|
|
button {
|
|
&.owl-next, &.owl-prev {
|
|
color: $color-white-07;
|
|
&:hover, &:focus {
|
|
background: $color-white-015;
|
|
color: $color-white;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.owl-dots {
|
|
.owl-dot {
|
|
&:before { border-color: $color-white; }
|
|
&:after { background: $color-white; }
|
|
&:hover, &:focus, &.active {
|
|
&:after {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.bg-grey, .bg-grey-lighter, .bg-grey-lightest {
|
|
.owl-carousel {
|
|
.owl-nav {
|
|
button {
|
|
&.owl-next, &.owl-prev {
|
|
&:hover, &:focus {
|
|
background: $color-black-005;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//
|
|
// 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-overlay-left,
|
|
&.owl-nav-overlay-right {
|
|
.owl-nav {
|
|
z-index: 1;
|
|
padding-bottom: 0;
|
|
button {
|
|
&.owl-next, &.owl-prev {
|
|
opacity: 1;
|
|
background: $color-black-03;
|
|
width: 50px;
|
|
height: 50px;
|
|
border: 0;
|
|
border-radius: 50%;
|
|
color: $color-white-08;
|
|
text-align: center;
|
|
i {
|
|
line-height: 50px;
|
|
}
|
|
&:hover, &:focus {
|
|
opacity: 1;
|
|
background: $color-black-04;
|
|
color: $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"], .owl-dots-overlay, .owl-dots-overlay-left, .owl-dots-overlay-right, .owl-dots-overlap, .owl-dots-overlap-left, .owl-dots-overlap-right) {
|
|
.owl-nav {
|
|
margin-top: -20px;
|
|
}
|
|
}
|
|
}
|
|
&.owl-nav-overlay-left,
|
|
&.owl-nav-overlay-right {
|
|
.owl-nav {
|
|
height: auto;
|
|
button {
|
|
&.owl-next, &.owl-prev {
|
|
position: static;
|
|
top: auto;
|
|
right: auto;
|
|
bottom: auto;
|
|
left: auto;
|
|
display: block;
|
|
margin: 4px 0;
|
|
}
|
|
}
|
|
}
|
|
&:not([data-owl-dots="false"], .owl-dots-overlay, .owl-dots-overlay-left, .owl-dots-overlay-right, .owl-dots-overlap, .owl-dots-overlap-left, .owl-dots-overlap-right) {
|
|
.owl-nav {
|
|
height: 50px;
|
|
}
|
|
}
|
|
}
|
|
&.owl-nav-overlay-left {
|
|
.owl-nav {
|
|
right: auto;
|
|
left: 20px;
|
|
}
|
|
}
|
|
&.owl-nav-overlay-right {
|
|
.owl-nav {
|
|
right: 20px;
|
|
left: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
//
|
|
// 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-overlay-left,
|
|
&.owl-dots-overlay-right {
|
|
.owl-dots {
|
|
position: absolute;
|
|
bottom: 20px;
|
|
background: $color-black-03;
|
|
border-radius: 20px;
|
|
margin: 0;
|
|
padding: 5px;
|
|
@include breakpoint-less(md) {
|
|
bottom: 16px;
|
|
}
|
|
.owl-dot {
|
|
&:before { border-color: $color-white; }
|
|
&:after { background: $color-white; }
|
|
&: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-overlay-left {
|
|
.owl-dots {
|
|
right: auto;
|
|
left: 20px;
|
|
@include breakpoint-less(md) {
|
|
left: 16px;
|
|
}
|
|
}
|
|
&[data-owl-nav="true"], &.owl-nav-left {
|
|
&:not(.owl-nav-right, .owl-nav-overlay, .owl-nav-overlay-left, .owl-nav-overlay-right, .owl-nav-overlap, .owl-nav-overlap-left, .owl-nav-overlap-right) {
|
|
.owl-dots {
|
|
left: 76px;
|
|
@include breakpoint-less(md) {
|
|
left: 64px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.owl-nav-overlap {
|
|
.owl-dots {
|
|
left: 45px;
|
|
@include breakpoint-less(md) {
|
|
left: 36px;
|
|
}
|
|
}
|
|
}
|
|
@include breakpoint-above(lg) {
|
|
&.owl-nav-overlap-left {
|
|
.owl-dots {
|
|
left: 45px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.owl-dots-overlay-right {
|
|
.owl-dots {
|
|
right: 20px;
|
|
left: auto;
|
|
@include breakpoint-less(md) {
|
|
right: 16px;
|
|
}
|
|
}
|
|
&[data-owl-nav="true"] {
|
|
&:not(.owl-nav-left, .owl-nav-overlay, .owl-nav-overlay-left, .owl-nav-overlay-right, .owl-nav-overlap, .owl-nav-overlap-left, .owl-nav-overlap-right) {
|
|
.owl-dots {
|
|
right: 76px;
|
|
@include breakpoint-less(md) {
|
|
right: 64px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.owl-nav-overlap, &.owl-nav-overlap-right {
|
|
.owl-dots {
|
|
right: 45px;
|
|
}
|
|
}
|
|
@include breakpoint-above(lg) {
|
|
&.owl-nav-overlap-left {
|
|
.owl-dots {
|
|
right: 20px;
|
|
}
|
|
}
|
|
}
|
|
@include breakpoint-less(md) {
|
|
&.owl-nav-overlap, &.owl-nav-overlap-left, &.owl-nav-overlap-right {
|
|
.owl-dots {
|
|
right: 36px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//
|
|
// Owl Dots Overlap //
|
|
//
|
|
.owl-carousel {
|
|
&.owl-dots-overlap,
|
|
&.owl-dots-overlap-left,
|
|
&.owl-dots-overlap-right {
|
|
.owl-dots {
|
|
position: absolute;
|
|
bottom: 0;
|
|
background: $color-black;
|
|
border-radius: 20px;
|
|
margin: 0;
|
|
padding: 5px;
|
|
.owl-dot {
|
|
&:before { border-color: $color-white; }
|
|
&:after { background: $color-white; }
|
|
&: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, .owl-nav-overlay, .owl-nav-overlay-left, .owl-nav-overlay-right, .owl-nav-overlap, .owl-nav-overlap-left, .owl-nav-overlap-right) {
|
|
.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, .owl-nav-overlay, .owl-nav-overlay-left, .owl-nav-overlay-right, .owl-nav-overlap, .owl-nav-overlap-left, .owl-nav-overlap-right) {
|
|
.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: 0.9;
|
|
background: $color-black;
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 50%;
|
|
color: $color-white;
|
|
&.owl-prev {
|
|
right: auto;
|
|
left: 0;
|
|
@include transform(translateX(-50%));
|
|
}
|
|
&.owl-next {
|
|
right: 0;
|
|
left: auto;
|
|
@include transform(translateX(50%));
|
|
}
|
|
&:hover {
|
|
opacity: 1;
|
|
color: $color-white;
|
|
}
|
|
}
|
|
@include breakpoint-above(lg) {
|
|
button {
|
|
&:hover {
|
|
&.owl-prev { @include transform(translateX(-50%) scale(0.94)); }
|
|
&.owl-next { @include transform(translateX(50%) scale(0.94)); }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&:not([data-owl-dots="false"], .owl-dots-overlay, .owl-dots-overlay-left, .owl-dots-overlay-right, .owl-dots-overlap, .owl-dots-overlap-left, .owl-dots-overlap-right) {
|
|
.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: 0.9;
|
|
background: $color-black;
|
|
width: 50px;
|
|
height: 50px;
|
|
margin: 4px 0;
|
|
border-radius: 50%;
|
|
color: $color-white;
|
|
&:hover {
|
|
opacity: 1;
|
|
color: $color-white;
|
|
}
|
|
}
|
|
@include breakpoint-above(lg) {
|
|
button {
|
|
&:hover {
|
|
@include transform(scale(0.94));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&:not([data-owl-dots="false"], .owl-dots-overlay, .owl-dots-overlay-left, .owl-dots-overlay-right, .owl-dots-overlap, .owl-dots-overlap-left, .owl-dots-overlap-right) {
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} |