File: /var/www/html/wpprm/wp-content/themes/ronneby/assets/less.lib/visual-composer/dfd_info_banner.less
/*
Created on : 24.12.2015
Author : Crumina
Styles for : Info Banner module
*/
.dfd-info-banner {
text-align: center;
position: relative;
&.text-center {
.image-cover img {
margin: 0 auto;
}
}
&.text-right {
.image-cover img {
margin-left: auto;
}
}
.wrap-delimiter {
font-size: 0;
}
.ovh {
overflow: hidden;
}
.image-wrap {
position: relative;
display: inline-block;
.image-cover {
.rel();
}
img {
display: block;
width: 100%;
}
}
.image-custom-link, .full-box-link, .overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
}
.image-custom-link, .full-box-link {
background: transparent;
}
.overlay {
.opacity(0);
.transition(~"opacity .3s ease");
}
&:hover {
.overlay {
.opacity(1);
}
}
.delimiter {
display: inline-block;
margin-top: 5px;
border-bottom: 1px solid fade(#000, 10%);
max-width: 80%;
width: 100%;
}
.info-box-title {
padding-top: 15px;
}
.content-wrap {
overflow: hidden;
}
.dfd-module-readmore {
margin-top: 15px;
}
&.style-02, &.style-03 {
.overlay {
visibility: visible;
.opacity(1);
}
}
&.style-02 {
.title-wrap {
position: absolute;
bottom: 0;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 14px;
width: 100%;
background: -webkit-linear-gradient(bottom, fade(@forth-site-dark-color, 40%), transparent);
background: -moz-linear-gradient(bottom, fade(@forth-site-dark-color, 40%), transparent);
background: -ms-linear-gradient(bottom, fade(@forth-site-dark-color, 40%), transparent);
background: -o-linear-gradient(bottom, fade(@forth-site-dark-color, 40%), transparent);
background: linear-gradient(bottom, fade(@forth-site-dark-color, 40%), transparent);
}
.info-box-title {
color: @main-site-dark-color;
}
.info-box-subtitle {
color: fade(@main-site-dark-color, 50%);
}
}
&.style-03 {
.overlay {
}
.info-box-title {
position: relative;
margin-top: -1em;
padding-top: 0;
}
}
&.style-04, &.style-12 {
.image-cover {
margin-top: 10px;
}
}
&.style-05, &.style-06 {
.image-cover {
overflow: hidden;
width: 50%;
}
.info-box-title {
padding-top: 0;
}
}
&.style-05 {
.image-cover {
float: left;
margin-right: 25px;
}
.content-wrap {
text-align: left;
}
}
&.style-06 {
.image-cover {
float: right;
margin-left: 25px;
}
.content-wrap {
text-align: right;
}
}
&.style-07, &.style-11, &.style-13 {
.content-wrap {
top: 50%;
.transform(translateY(-50%));
}
}
&.style-07, &.style-11, &.style-13 {
.content-wrap {
position: absolute;
left: 20px;
right: 20px;
display: block;
}
}
&.style-08, &.style-09, &.style-10, &.style-11, &.style-12, &.style-13 {
.content-wrap {
min-height: 80px;
> div {
opacity: 0;
.transform(translateY(110%));
.transition-transform(.3s ease);
.transition(~"opacity .3s ease, transform .3s ease");
}
}
&:hover {
.content-wrap {
> div {
.opacity(1);
.transform(translateY(0));
}
}
}
}
/*&.style-02, &.style-08, &.style-09 {
.overlay {
background: linear-gradient(to bottom, transparent, fade(@forth-site-dark-color, 80%));
}
}*/
&.style-08, &.style-09, &.style-10 {
.title-wrap {
.abs();
left: 0;
right: 0;
.block();
padding: 20px;
}
}
&.style-07 {
.info-box-title {
color: @main-site-dark-color;
}
.info-box-subtitle {
color: fade(@main-site-dark-color, 50%);
}
.overlay {
background: fade(#000, 30%);
opacity: 1;
}
&.title-top {
.content-wrap {
top: 20px;
.transform(translateY(0));
}
}
&.title-bottom {
.content-wrap {
top: auto;
bottom: 20px;
.transform(translateY(0));
}
}
}
&.style-08 {
.title-wrap {
top: 100%;
background: transparent;
.transition-transform(.3s ease);
&:before {
content: "";
.block();
width: 100%;
height: 100%;
.abs();
top: 0;
left: 0;
background: -webkit-linear-gradient(bottom, fade(@forth-site-dark-color, 40%), transparent);
background: -moz-linear-gradient(bottom, fade(@forth-site-dark-color, 40%), transparent);
background: -ms-linear-gradient(bottom, fade(@forth-site-dark-color, 40%), transparent);
background: -o-linear-gradient(bottom, fade(@forth-site-dark-color, 40%), transparent);
background: linear-gradient(bottom, fade(@forth-site-dark-color, 40%), transparent);
.opacity(0);
.transition(opacity .0s ease .0s);
}
}
.info-box-title,
.info-box-subtitle {
.rel();
z-index: 2;
.transition(~"color .3s ease");
}
&:hover {
.title-wrap {
margin-top: 0;
.transform(translateY(-100%));
&:before {
.opacity(1);
.transition(opacity .25s ease .25s);
}
}
.delimiter {
margin: 10px 0 0;
border-bottom: 1px solid fade(@main-site-dark-color, 20%);
}
.feature-title {
color: @main-site-dark-color;
}
.subtitle {
color: fade(@main-site-dark-color, 50%);
}
}
}
&.style-08, &.delimiter-hidden {
.description {
margin-top: 20px;
}
}
&.style-09 {
.overlay {
opacity: 1;
}
.title-wrap {
bottom: 0;
background: -webkit-linear-gradient(bottom, fade(@forth-site-dark-color, 40%), transparent);
background: -moz-linear-gradient(bottom, fade(@forth-site-dark-color, 40%), transparent);
background: -ms-linear-gradient(bottom, fade(@forth-site-dark-color, 40%), transparent);
background: -o-linear-gradient(bottom, fade(@forth-site-dark-color, 40%), transparent);
background: linear-gradient(bottom, fade(@forth-site-dark-color, 40%), transparent);
}
.info-box-title {
color: @main-site-dark-color;
}
.info-box-subtitle {
color: fade(@main-site-dark-color, 50%);
}
}
&.style-10, &.style-11, &.style-13 {
.overlay {
background: fade(@forth-site-dark-color, 75%);
}
}
&.style-10 {
.title-wrap {
bottom: 0;
.transition(~"transform .3s ease, bottom .3s ease");
&:before {
content: "";
.block();
width: 100%;
height: 100%;
.abs();
top: 0;
left: 0;
background: -webkit-linear-gradient(bottom, fade(@forth-site-dark-color, 40%), transparent);
background: -moz-linear-gradient(bottom, fade(@forth-site-dark-color, 40%), transparent);
background: -ms-linear-gradient(bottom, fade(@forth-site-dark-color, 40%), transparent);
background: -o-linear-gradient(bottom, fade(@forth-site-dark-color, 40%), transparent);
background: linear-gradient(bottom, fade(@forth-site-dark-color, 40%), transparent);
.opacity(1);
.transition(opacity .25s ease .25s);
}
}
.info-box-title,
.info-box-subtitle {
.rel();
z-index: 2;
}
.info-box-title {
color: @main-site-dark-color;
}
.subtitle{
color: fade(@main-site-dark-color, 50%);
}
.overlay {
background: fade(@forth-site-dark-color, 40%);
}
&:hover {
.title-wrap {
bottom: 50%;
.transform(translateY(50%));
&:before {
.opacity(0);
.transition(opacity 0s ease);
}
}
}
}
&.style-11,
&.style-13 {
.description {
color: @main-site-dark-color;
}
.dfd-module-readmore {
a.read-more-01 {
color: @main-site-dark-color;
}
a.read-more-02 {
span {
border-bottom-color: @main-site-dark-color;
}
}
a.read-more-04 {
span {
background: @main-site-dark-color;
}
}
a.read-more-05 {
color: @main-site-dark-color;
span, i {
color: inherit;
}
}
a.read-more-06 {
i {text-shadow: -30px 0 0 @third-site-light-color, 0 0 0 @main-site-dark-color;}
&:hover {
i {text-shadow: 0 0 0 @third-site-light-color, 30px 0 0 @main-site-dark-color;}
}
}
a.read-more-07 {
background: fade(@main-site-dark-color, 10%);
i {
color: @main-site-dark-color;
}
}
}
}
&.style-11 {
.info-box-title {
color: @main-site-dark-color;
}
.info-box-subtitle {
color: fade(@main-site-dark-color, 50%);
}
.delimiter {
border-bottom-color: fade(@main-site-dark-color, 20%);
}
}
&.style-13 {
.image-wrap {
margin-top: 10px;
}
}
&:hover .module-shadow-hover{
box-shadow: 0 4px 30px fade((#000), 25%);
}
&.panr {
.image-cover {
overflow: hidden;
img {
.block();
}
}
}
&.dfd-image-blur {
.image-cover {
overflow: hidden;
img {
.block();
.blur(0px);
.transition(all .3s ease);
}
}
&:hover {
.image-cover {
img {
.blur(5px);
}
}
}
}
&.dfd-image-scale {
.image-cover {
overflow: hidden;
img {
.block();
.scale(1);
.transition-transform(.3s ease);
}
}
&:hover {
.image-cover {
img {
.scale(1.1);
}
}
}
}
&.dfd-image-scale-rotate {
.image-cover {
overflow: hidden;
img {
.block();
.transform(scale(1) rotate(0deg));
.transition-transform(.3s ease);
}
}
&:hover {
.image-cover {
img {
.transform(scale(1.1) rotate(3deg));
}
}
}
}
}