File: /home/ondernemer/public_html/wp-content/themes/dt-the7/css/static-less/shortcodes/dt-carousel.less
/* #Shortcode carousel
================================================== */
.owl-carousel {
box-sizing: border-box;
}
.post {
.owl-carousel & {
.flex-display(@display: flex);
.flex-flow( column wrap);
}
}
.owl-carousel article.post {
width: 100%;
}
.owl-nav div:not(:hover):before {
.dt-arrow-border-on & {
border-style: solid;
border-width: 0;
}
}
.owl-nav div:hover:after {
.dt-arrow-border-on &,
.dt-arrow-hover-border-on & {
border-style: solid;
border-width: 0;
}
}
.owl-nav div {
position: absolute;
z-index: 10;
.flex-display(@display: inline-flex);
.justify-content(@justify: center);
.align-items(@align: center);
text-decoration: none;
&:before,
&:after {
//.dt-owl-carousel-call & {
position: absolute;
// background: none;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
opacity: 0;
box-sizing: border-box;
border-radius: inherit;
-webkit-backface-visibility: hidden;
transition: opacity 0.150s linear;
.disable-arrows-hover-bg & {
transition: none;
}
}
&:not(:hover):before {
opacity: 1;
}
&:hover:before,
&:not(:hover):after {
transition-delay: 0.100s;
}
&:hover:after {
opacity: 1;
}
&:after,
&:hover:before {
opacity: 0;
}
& i {
position: relative;
z-index: 1;
transition: color 0.150s;
transition-delay: 0.100s;
}
}
.owl-carousel .owl-dots {
position: absolute;
& .owl-dot {
position: relative;
display: inline-block;
vertical-align: middle;
& span {
:not(.bullets-etefu)& {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
outline: none;
border-radius: 50%;
}
}
}
}
/* Scale up */
.bullets-scale-up .owl-dot span {
transition: transform 0.3s ease, background 0.3s ease;
}
.bullets-scale-up .owl-dot.active span {
transform: scale(1.5);
}
/* Stroke */
.bullets-stroke .owl-dot:not(.active) span {
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0) !important;
}
.bullets-stroke .owl-dot span {
transition: box-shadow 0.3s ease, background-color 0.3s ease;
}
.bullets-stroke .owl-dot.active span {
background-color: transparent;
box-shadow: 0 0 0 2px white;
}
/* Fill in */
.bullets-fill-in .owl-dot span {
background-color: transparent;
transition: box-shadow 0.3s ease;
}
/* Small dot with stroke */
.bullets-small-dot-stroke .owl-dot {
border-radius: 50%;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0);
transition: box-shadow 0.3s ease;
}
.bullets-small-dot-stroke .owl-dot span {
cursor: pointer;
position: absolute;
transition: background-color 0.3s ease, transform 0.3s ease;
}
.bullets-small-dot-stroke .owl-dot.active span {
transform: scale(0.4);
}
/*** Ubax ***/
.bullets-ubax .owl-dot span {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: calc(100% - 4px);
height: calc(100% - 4px);
border: 2px solid transparent;
border-radius: 0 !important;
box-sizing: border-box;
}
.bullets-ubax .owl-dot.active span {
z-index: 10;
background: transparent !important;
transition: background-color 0.3s, border-color 0.3s;
}
.bullets-ubax .owl-dot:not(.active):hover span {
transition: background-color 0.3s;
}
/*** Etefu ***/
.bullets-etefu .elementor-owl-carousel-call .owl-dot {
height: 5px !important;
}
.bullets-etefu .owl-dot span {
position: relative;
display: block;
overflow: hidden;
width: 100%;
height: 5px;
transition: background 0.3s;
}
.bullets-etefu .owl-dot span:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: translate3d(-100%,0,0);
transition: transform 0.5s;
transition-timing-function: cubic-bezier(0.2,1,0.3,1);
}
.bullets-etefu .owl-dot.active span:before {
transform: translate3d(0,0,0);
}