File: /var/www/html/wpprm/wp-content/themes/ronneby/assets/less.lib/visual-composer/button-module.less
/*
Created on : 14.03.2015, 15:12:52
Author : DFD
Styles for : Button shortcode
*/
span.ubtn {
font-family: @default-button-font-family;
font-size: @default-button-font-size;
font-weight: @default-button-font-weight;
font-style: @default-button-font-style;
letter-spacing: @default-button-letter-spacing;
text-transform: @default-button-text-transform;
}
.ubtn-sep-icon.ubtn-sep-icon-at-left .ubtn-icon,
.ubtn-sep-icon-left-rev:hover .ubtn-icon {
left: 15px;
}
.ubtn-sep-icon.ubtn-sep-icon-at-right .ubtn-icon,
.ubtn-sep-icon-right:hover .ubtn-icon {
right: 15px;
}
a.ubtn-link {
&.ubtn-block {
.ubtn {
display: block !important;
}
}
.ubtn {
display: inline-block !important;
}
}
.dfd-button-module-wrap {
.dfd-button-module {
.dfd-button-link {
.rel();
.inline-block();
.dfd-button-inner-cover {
.rel();
.block();
overflow: hidden;
z-index: 1;
.transition(all .3s ease);
&:before {
content: "";
.block();
width: 100%;
height: 100%;
.abs();
top: 0;
left: 0;
background: @button-background-color;
border: @default-button-border-width @default-button-border-style @button-border-color;
z-index: 1;
.rounded(@default-button-border-radius);
}
&:after {
content: "";
width: 100%;
height: 100%;
}
&:after,
.dfd-button-text-hover {
.block();
.abs();
top: 0;
left: 0;
right: 0;
background: @button-hover-background;
border: @default-button-border-width @default-button-border-style @button-hover-border-color;
.rounded(@default-button-border-radius);
z-index: 2;
.transition(all .3s ease);
}
.dfd-button-text-hover,
.dfd-button-text-main {
font-family: @default-button-font-family;
font-size: @default-button-font-size;
font-weight: @default-button-font-weight;
font-style: @default-button-font-style;
letter-spacing: @default-button-letter-spacing;
text-transform: @default-button-text-transform;
line-height: @default-button-line-height;
padding-left: @default-button-padding-left;
padding-right: @default-button-padding-right;
color: @default-button-color;
.transition(all .3s ease);
}
.dfd-button-text-main {
.rel();
.block();
z-index: 3;
}
i {
.transition(inherit);
&.typcn:before {
.block();
height: 100%;
}
}
}
.dfd-button-tooltip {
.absolute(5);
.block();
white-space: nowrap;
padding: 5px 10px;
.rounded(2px);
.opacity(0);
visibility: hidden;
.transition(~"opacity .3s ease, visibility .3s ease");
&.dfd-button-tooltip-left {
top: 50%;
right: 100%;
margin-right: 20px;
.transform(translateY(-50%));
}
&.dfd-button-tooltip-right {
top: 50%;
left: 100%;
margin-left: 20px;
.transform(translateY(-50%));
}
&.dfd-button-tooltip-top {
bottom: 100%;
left: 50%;
margin-bottom: 20px;
.transform(translateX(-50%));
}
&.dfd-button-tooltip-bottom {
top: 100%;
left: 50%;
margin-top: 20px;
.transform(translateX(-50%));
}
&.dfd-button-tooltip-top-left {
bottom: 100%;
right: 100%;
margin-bottom: 20px;
margin-right: 20px;
}
&.dfd-button-tooltip-top-right {
bottom: 100%;
left: 100%;
margin-bottom: 20px;
margin-left: 20px;
}
&.dfd-button-tooltip-bottom-left {
top: 100%;
right: 100%;
margin-top: 20px;
margin-right: 20px;
}
&.dfd-button-tooltip-bottom-right {
top: 100%;
left: 100%;
margin-top: 20px;
margin-left: 20px;
}
}
&:hover {
.dfd-button-tooltip {
.opacity(1);
visibility: visible;
}
}
}
&.dfd-button-full-width {
.dfd-button-link {
.block();
}
}
&.style_1 {
.dfd-button-link {
.dfd-button-inner-cover {
&:after {
.opacity(0);
}
}
&:hover {
.dfd-button-inner-cover {
&:after {
.opacity(1);
}
}
}
}
}
&.style_2 {
&.dfd-top-to-bottom {
.dfd-button-link {
.dfd-button-inner-cover {
&:after {
.transform(translateY(-100%));
}
}
&:hover {
.dfd-button-inner-cover {
&:after {
.transform(translateY(0));
}
}
}
}
}
&.dfd-bottom-to-top {
.dfd-button-link {
.dfd-button-inner-cover {
&:after {
.transform(translateY(100%));
}
}
&:hover {
.dfd-button-inner-cover {
&:after {
.transform(translateY(0));
}
}
}
}
}
&.dfd-left-to-right {
.dfd-button-link {
.dfd-button-inner-cover {
&:after {
.transform(translateX(-100%));
}
}
&:hover {
.dfd-button-inner-cover {
&:after {
.transform(translateX(0));
}
}
}
}
}
&.dfd-right-to-left {
.dfd-button-link {
.dfd-button-inner-cover {
&:after {
.transform(translateX(100%));
}
}
&:hover {
.dfd-button-inner-cover {
&:after {
.transform(translateX(0));
}
}
}
}
}
}
&.style_3,
&.style_4 {
.dfd-button-link {
.dfd-button-inner-cover {
&:before {
.transition(border-color .7s ease);
}
}
}
&.partial {
.dfd-button-link {
.dfd-button-inner-cover {
&:before {
.transition(border-color .3s ease);
}
}
}
}
}
&.style_3 {
&.dfd-horizontal {
.dfd-button-link {
.dfd-button-inner-cover {
&:after {
.transform(scaleX(0));
}
}
&:hover {
.dfd-button-inner-cover {
&:after {
.transform(scaleX(1));
}
}
}
}
&.partial {
.dfd-button-link {
&:hover {
.dfd-button-inner-cover {
&:after {
.transform(scaleX(.9));
}
}
}
}
}
&.faden {
.dfd-button-link {
.dfd-button-inner-cover {
&:after {
opacity: 0;
}
}
&:hover {
.dfd-button-inner-cover {
&:after {
opacity: 1;
}
}
}
}
}
}
&.dfd-vertical {
.dfd-button-link {
.dfd-button-inner-cover {
&:after {
.transform(scaleY(0));
}
}
&:hover {
.dfd-button-inner-cover {
&:after {
.transform(scaleY(1));
}
}
}
}
}
&.dfd-diagonal {
.dfd-button-link {
.dfd-button-inner-cover {
&:after {
border-width: 0 !important;
width: 0;
left: 50%;
.transform(skewX(-45deg));
.transition(~"width .7s ease, left .7s ease, opacity .3s ease .4s");
}
}
&:hover {
.dfd-button-inner-cover {
&:after {
left: -50%;
width: 200%;
}
}
}
}
&.top-left-to-bottom-right {
.dfd-button-link {
.dfd-button-inner-cover {
&:after {
.transform(skewX(45deg));
}
}
}
}
&.partial {
.dfd-button-link {
.dfd-button-inner-cover {
&:after {
.transition(~"width .3s ease, left .3s ease, opacity .3s ease .15s");
}
}
&:hover {
.dfd-button-inner-cover {
&:after {
left: 0%;
width: 100%;
}
}
}
}
}
&.faden {
.dfd-button-link {
.dfd-button-inner-cover {
&:after {
opacity: 0;
}
}
&:hover {
.dfd-button-inner-cover {
&:after {
opacity: 1;
.transition(~"width .7s ease, left .7s ease, opacity .3s ease 0s");
}
}
}
}
}
&.faden {
&.partial {
.dfd-button-link {
&:hover {
.dfd-button-inner-cover {
&:after {
.transition(~"width .3s ease, left .3s ease, opacity .3s ease 0s");
}
}
}
}
}
}
}
}
&.style_4 {
&.dfd-horizontal {
.dfd-button-link {
.dfd-button-inner-cover {
&:after {
.transform(scaleX(1));
}
}
&:hover {
.dfd-button-inner-cover {
&:after {
.transform(scaleX(0));
}
}
}
}
&.partial {
.dfd-button-link {
.dfd-button-inner-cover {
&:after {
.transform(scaleX(.9));
}
}
&:hover {
.dfd-button-inner-cover {
&:after {
.transform(scaleX(0));
}
}
}
}
}
&.faden {
.dfd-button-link {
.dfd-button-inner-cover {
&:after {
opacity: 1;
}
}
&:hover {
.dfd-button-inner-cover {
&:after {
opacity: 0;
}
}
}
}
}
}
&.dfd-vertical {
.dfd-button-link {
.dfd-button-inner-cover {
&:after {
.transform(scaleY(1));
}
}
&:hover {
.dfd-button-inner-cover {
&:after {
.transform(scaleY(0));
}
}
}
}
}
&.dfd-diagonal {
.dfd-button-link {
.dfd-button-inner-cover {
&:after {
border-width: 0 !important;
width: 200%;
left: -50%;
.transform(skewX(-45deg));
.transition(~"width .7s ease, left .7s ease, opacity .3s ease 0s");
}
}
&:hover {
.dfd-button-inner-cover {
&:after {
left: 50% !important;
width: 0 !important;
}
}
}
}
&.top-left-to-bottom-right {
.dfd-button-link {
.dfd-button-inner-cover {
&:after {
.transform(skewX(45deg));
}
}
}
}
&.partial {
.dfd-button-link {
.dfd-button-inner-cover {
&:after {
left: 0%;
width: 100%;
.transition(~"width .3s ease, left .3s ease, opacity .3s ease .15s");
}
}
&:hover {
.dfd-button-inner-cover {
&:after {
.transition(~"width .3s ease, left .3s ease, opacity .3s ease 0s");
}
}
}
}
}
&.faden {
.dfd-button-link {
.dfd-button-inner-cover {
&:after {
opacity: 1;
}
}
&:hover {
.dfd-button-inner-cover {
&:after {
opacity: 0;
.transition(~"width .7s ease, left .7s ease, opacity .3s ease .4s");
}
}
}
}
}
&.faden {
&.partial {
.dfd-button-link {
.dfd-button-inner-cover {
&:after {
.transition(~"width .3s ease, left .3s ease, opacity .3s ease 0s");
}
}
&:hover {
.dfd-button-inner-cover {
&:after {
.transition(~"width .3s ease, left .3s ease, opacity .3s ease .15s");
}
}
}
}
}
}
}
}
&.style_5 {
.dfd-button-link {
.dfd-button-inner-cover {
overflow: visible;
&:after {
.opacity(0);
.transform(scale(1.2));
}
}
&:hover {
.dfd-button-inner-cover {
&:after {
.opacity(1);
.transform(scale(1));
}
}
}
}
}
&.style_6 {
.dfd-button-link {
.dfd-button-inner-cover {
.rel();
overflow: visible;
.transform(rotateX(0));
.transform-style(preserve-3d);
.transition-transform(.3s ease);
.transform-origin(50% 0%);
&:before,
&:after {
.hide();
}
.dfd-button-text-main {
border-width: 0;
.backface-visibility(hidden);
.transform(rotateX(0));
.transform-origin(100% 50%);
}
.dfd-button-text-hover {
top: 100%;
border-width: 0;
.backface-visibility(hidden);
.transform(rotateX(-90deg) perspective(300px));
.transform-origin(50% 0%);
}
}
&:hover {
.dfd-button-inner-cover {
.transform(rotateX(90deg));
}
}
}
&.dfd-button-icon-hover-show {
.dfd-button-link {
.dfd-button-inner-cover {
.dfd-button-text-main {
i {
visibility: hidden;
}
}
}
}
}
&.dfd-button-icon-hover-hide {
.dfd-button-link {
.dfd-button-inner-cover {
.dfd-button-text-hover {
i {
visibility: hidden;
}
}
}
}
}
}
&.dfd-button-icon-left {
&.dfd-button-icon-hover-show {
.dfd-button-link {
.dfd-button-inner-cover {
white-space: nowrap;
.dfd-button-text-main,
.dfd-button-text-hover {
i {
.abs();
left: 20px;
top: 50%;
.transform(translateY(-50%));
.opacity(0);
.transition(~"left .3s ease, opacity .3s ease");
}
}
}
&:hover {
.dfd-button-inner-cover {
.dfd-button-text-main,
.dfd-button-text-hover {
i {
.opacity(1);
}
}
}
}
}
}
&.dfd-button-icon-hover-hide {
.dfd-button-link {
.dfd-button-inner-cover {
white-space: nowrap;
.dfd-button-text-main,
.dfd-button-text-hover {
i {
.abs();
left: 20px;
top: 50%;
.transform(translateY(-50%));
.opacity(1);
.transition(~"left .3s ease, opacity .3s ease");
}
}
}
&:hover {
.dfd-button-inner-cover {
.dfd-button-text-main,
.dfd-button-text-hover {
i {
.opacity(0);
}
}
}
}
}
}
&.dfd-button-icon-hover-simple,
&.dfd-button-icon-hover-animate {
.dfd-button-link {
.dfd-button-inner-cover {
white-space: nowrap;
.dfd-button-text-main,
.dfd-button-text-hover {
i {
.abs();
left: 20px;
top: 50%;
.transform(translateY(-50%));
}
}
}
}
}
}
&.dfd-button-icon-right {
&.dfd-button-icon-hover-show {
.dfd-button-link {
.dfd-button-inner-cover {
white-space: nowrap;
.dfd-button-text-main,
.dfd-button-text-hover {
i {
.abs();
right: 20px;
top: 50%;
.transform(translateY(-50%));
.opacity(0);
.transition(~"right .3s ease, opacity .3s ease");
}
}
}
&:hover {
.dfd-button-inner-cover {
.dfd-button-text-main,
.dfd-button-text-hover {
i {
.opacity(1);
}
}
}
}
}
}
&.dfd-button-icon-hover-hide {
.dfd-button-link {
.dfd-button-inner-cover {
white-space: nowrap;
.dfd-button-text-main,
.dfd-button-text-hover {
i {
.abs();
right: 20px;
top: 50%;
.transform(translateY(-50%));
.opacity(1);
.transition(~"margin .3s ease, opacity .3s ease");
}
}
}
&:hover {
.dfd-button-inner-cover {
.dfd-button-text-main,
.dfd-button-text-hover {
i {
right: 0;
.opacity(0);
}
}
}
}
}
}
&.dfd-button-icon-hover-simple,
&.dfd-button-icon-hover-animate {
.dfd-button-link {
.dfd-button-inner-cover {
white-space: nowrap;
.dfd-button-text-main,
.dfd-button-text-hover {
i {
.abs();
right: 20px;
top: 50%;
.transform(translateY(-50%));
}
}
}
}
}
}
&.dfd-button-icon-top {
&.dfd-button-icon-hover-show {
.dfd-button-link {
.dfd-button-inner-cover {
.dfd-button-text-main,
.dfd-button-text-hover {
i {
.block();
text-align: center;
line-height: 1.5;
.opacity(0);
.transition(~"margin .3s ease, opacity .3s ease");
}
}
}
&:hover {
.dfd-button-inner-cover {
.dfd-button-text-main,
.dfd-button-text-hover {
i {
.opacity(1);
}
}
}
}
}
}
&.dfd-button-icon-hover-hide {
.dfd-button-link {
.dfd-button-inner-cover {
.dfd-button-text-main,
.dfd-button-text-hover {
i {
.block();
text-align: center;
line-height: 1.5;
.opacity(1);
.transition(~"margin .3s ease, opacity .3s ease");
}
}
}
&:hover {
.dfd-button-inner-cover {
.dfd-button-text-main,
.dfd-button-text-hover {
i {
.opacity(0);
}
}
}
}
}
}
&.dfd-button-icon-hover-simple,
&.dfd-button-icon-hover-animate {
.dfd-button-link {
.dfd-button-inner-cover {
.dfd-button-text-main,
.dfd-button-text-hover {
i {
.block();
text-align: center;
line-height: 1.5;
}
}
}
}
}
}
&.dfd-button-icon-bottom {
&.dfd-button-icon-hover-show {
.dfd-button-link {
.dfd-button-inner-cover {
.dfd-button-text-main,
.dfd-button-text-hover {
i {
.block();
text-align: center;
line-height: 1.5;
.opacity(0);
.transition(~"margin .3s ease, opacity .3s ease");
}
}
}
&:hover {
.dfd-button-inner-cover {
.dfd-button-text-main,
.dfd-button-text-hover {
i {
.opacity(1);
}
}
}
}
}
}
&.dfd-button-icon-hover-hide {
.dfd-button-link {
.dfd-button-inner-cover {
.dfd-button-text-main,
.dfd-button-text-hover {
i {
.block();
text-align: center;
line-height: 1.5;
.opacity(1);
.transition(~"margin .3s ease, opacity .3s ease");
}
}
}
&:hover {
.dfd-button-inner-cover {
.dfd-button-text-main,
.dfd-button-text-hover {
i {
.opacity(0);
}
}
}
}
}
}
&.dfd-button-icon-hover-simple,
&.dfd-button-icon-hover-animate {
.dfd-button-link {
.dfd-button-inner-cover {
.dfd-button-text-main,
.dfd-button-text-hover {
i {
.block();
text-align: center;
line-height: 1.5;
}
}
}
}
}
}
}
}