/home/arranoyd/telegastro/wp-content/themes/dt-the7/css/dynamic-less/shortcodes/dt-carousel.less
/* #Shortcode carousel
================================================== */
.custom-mixin-color (@customColor) when (iscolor(@customColor)) {
color: @customColor;
background: none;
}
.custom-mixin-bg (@customColor) when (iscolor(@customColor)) {
background: @customColor;
}
.custom-mixin-border (@customColor) when (iscolor(@customColor)) {
border-color: @customColor;
}
.custom-mixin-shadow ( @string: "", @customColor) when (iscolor(@customColor)) {
-webkit-box-shadow: @string @customColor;
box-shadow: @string @customColor;
}
.bullets-position-horizontal(@position) when (@position = left) {
left: @bullet-h-position;
}
.bullets-position-horizontal(@position) when (@position = center) {
left: 50%;
transform: translateX(calc(-50% ~'+' @bullet-h-position));
@media all and (-ms-high-contrast: none) {
transform: translateX(-50%);
margin-left: @bullet-h-position;
}
}
.bullets-position-horizontal(@position) when (@position = right) {
right: @bullet-h-position;
}
.bullets-position-vertical(@position) when (@position = top) {
top: @bullet-v-position;
}
.bullets-position-vertical(@position) when (@position = center) {
top: 50%;
transform: translateY(calc(-50% ~'+' @bullet-v-position));
@media all and (-ms-high-contrast: none) {
transform: translateY(-50%);
margin-top: @bullet-h-position;
}
}
.bullets-position-vertical(@position) when (@position = bottom) {
top: calc(100% ~'+' @bullet-v-position);
}
.bullets-centered(@position-v, @position-h) when (@position-v = center)and (@position-h = center) {
transform: translate3d(calc(-50% ~'+' @bullet-h-position), calc(-50% ~'+' @bullet-v-position), 0);
}
.nav-v-position(@position, @offset) when (@position = top) {
top: @offset;
}
.nav-v-position(@position, @offset) when (@position = center) {
top: 50%;
transform: translateY(calc(-50% ~'+' @offset));
@media all and (-ms-high-contrast: none) {
transform: translateY(-50%);
margin-top: @offset;
}
}
.nav-v-position(@position, @offset) when (@position = bottom) {
top: calc(100% ~'+' @offset);
}
.nav-centered(@position-v, @position-h, @offset-v, @offset-h) when (@position-v = center)and (@position-h = center) {
transform: translate3d(calc(-50% ~'+' @offset-h), calc(-50% ~'+' @offset-v), 0);
}
.nav-h-position(@position,@offset) when (@position = left) {
left: @offset;
}
.nav-h-position(@position,@offset) when (@position = center) {
left: 50%;
transform: translateX(calc(-50% ~'+' @offset));
@media all and (-ms-high-contrast: none) {
transform: translateX(-50%);
margin-left: @offset;
}
}
.nav-h-position(@position,@offset) when (@position = right) {
right: @offset;
}
/*Arrows*/
.owl-nav {
.@{unique-shortcode-class-name} & {
& a {
width: @arrow-width;
height: @arrow-height;
//border-style: solid;
border-radius: @arrow-border-radius;
&:not(:hover):before {
.dt-arrow-border-on&{
border-width: @arrow-border-width;
}
}
&:hover:after {
.dt-arrow-hover-border-on& {
border-width: @arrow-border-width;
}
}
&:not(:hover):before {
.dt-arrow-border-on& {
.custom-mixin-border (@arrow-border-color);
}
}
.arrows-bg-on& {
&:before {
.custom-mixin-bg (@arrow-bg);
}
}
.arrows-hover-bg-on& {
&:after {
.custom-mixin-bg (@arrow-bg-hover);
}
}
&:hover:after {
.dt-arrow-hover-border-on& {
.custom-mixin-border (@arrow-border-color-hover);
}
}
&.owl-prev {
.nav-v-position(@arrow-left-v-position, @l-arrow-v-position);
.nav-h-position(@arrow-left-h-position,@l-arrow-h-position);
.nav-centered(@arrow-left-v-position, @arrow-left-h-position, @l-arrow-v-position, @l-arrow-h-position);
& i {
padding: @l-icon-padding-top @l-icon-padding-right @l-icon-padding-bottom @l-icon-padding-left;
}
}
&.owl-next {
.nav-v-position(@arrow-right-v-position, @r-arrow-v-position);
.nav-h-position(@arrow-right-h-position,@r-arrow-h-position);
.nav-centered(@arrow-right-v-position, @arrow-right-h-position, @r-arrow-v-position, @r-arrow-h-position);
& i {
padding: @r-icon-padding-top @r-icon-padding-right @r-icon-padding-bottom @r-icon-padding-left;
}
}
}
& i {
font-size: @icon-size;
}
& a:not(:hover) i,
& a:not(:hover) i:before {
.custom-mixin-color (@icon-color);
}
& a:hover i,
& a:hover i:before {
.custom-mixin-color (@icon-color-hover);
}
}
}
//Bullets
.owl-dots {
.@{unique-shortcode-class-name} & {
.bullets-position-vertical(@bullets-v-position);
.bullets-position-horizontal(@bullets-h-position);
.bullets-centered(@bullets-v-position, @bullets-h-position)
}
}
.owl-dot {
.@{unique-shortcode-class-name} & {
width: @bullet-size;
height: @bullet-size;
margin: 0 @bullet-gap/2;
.bullets-scale-up& {
&:not(.active):not(:hover) span {
.custom-mixin-bg (@bullet-color);
}
&:not(.active):hover span,
&.active span {
.custom-mixin-bg (@bullet-color-hover);
}
}
.bullets-stroke& {
&:not(.active):not(:hover) span {
.custom-mixin-bg (@bullet-color);
}
&:not(.active):hover span {
.custom-mixin-bg (@bullet-color-hover);
}
&.active span {
.custom-mixin-shadow (0 0 0 2px, @bullet-color-hover);
}
}
.bullets-fill-in& {
&:not(.active):not(:hover) span {
.custom-mixin-shadow (inset 0 0 0 2px, @bullet-color);
}
&:not(.active):hover span {
.custom-mixin-shadow (inset 0 0 0 2px, @bullet-color-hover);
}
&.active span {
.custom-mixin-shadow (inset 0 0 0 20px, @bullet-color-hover);
}
}
.bullets-small-dot-stroke& {
&:not(.active):not(:hover) span {
.custom-mixin-bg (@bullet-color);
}
&:not(.active):hover span,
&.active span {
.custom-mixin-bg (@bullet-color-hover);
}
&.active {
.custom-mixin-shadow (0 0 0 2px, @bullet-color-hover);
}
}
.bullets-ubax& {
& span {
.custom-mixin-bg (@bullet-color);
}
&.active span {
//border-color: @bullet-color-hover;
.custom-mixin-border(@bullet-color-hover);
}
&:not(.active):hover span {
.custom-mixin-bg (@bullet-color-hover);
}
}
.bullets-etefu& {
& span {
.custom-mixin-bg (@bullet-color);
}
&:not(.active):hover span {
.custom-mixin-bg (@bullet-color-hover);
}
& span:before {
.custom-mixin-bg (@bullet-color-hover);
.accent-gradient & {
.custom-mixin-bg (@bullet-color-hover);
}
}
}
}
}
@media screen and (max-width:@hide-arrows-switch){
.owl-nav {
.@{unique-shortcode-class-name}.hide-arrows & {
& a {
display: none;
}
}
}
}
@media screen and (max-width:@reposition-arrows-switch){
.owl-nav {
.@{unique-shortcode-class-name}.reposition-arrows & {
& .owl-prev {
.nav-v-position(@arrow-left-v-position, @l-arrow-v-position);
.nav-h-position(@arrow-left-h-position,@arrow-left-h-position-mobile);
.nav-centered(@arrow-left-v-position, @arrow-left-h-position, @l-arrow-v-position, @arrow-left-h-position-mobile);
}
& .owl-next {
.nav-v-position(@arrow-right-v-position, @r-arrow-v-position);
.nav-h-position(@arrow-right-h-position, @arrow-right-h-position-mobile);
.nav-centered(@arrow-right-v-position, @arrow-right-h-position, @r-arrow-v-position, @arrow-right-h-position-mobile);
}
}
}
}