File: /var/www/html/wpprm/wp-content/themes/ronneby/assets/less.lib/visual-composer/pricing-table.less
/*
Created on : 11.02.2015, 14:15:38
Author : DFD
Styles for : Pricing table module
*/
.full_width_content .row .row .columns,
.full_width_content .row .columns {
&:first-child {
.ult_pricing_table_wrap.ult_design_1 {
border-left: 1px solid @border-color;
}
}
.ult_pricing_table_wrap.ult_design_1 {
border-left-width: 0;
}
}
.dfd-pricing-cover {
padding: 40px 0;
}
.ult_pricing_table_wrap {
/*Common Styles*/
text-align: center;
border: 1px solid @border-color;
.ult_pricing_table {
overflow: hidden;
.top-part,
.bottom-part {
background: @background-grey;
}
.top-part {
.rel();
margin-bottom: 2px;
.transition(background .3s ease-in-out);
.inscription-hot {
.block();
.abs();
text-transform: uppercase;
font-weight: 400;
font-size: 11px;
color: @main-site-dark-color;
opacity: 0;
}
.ult_pricing_heading {
padding-top: 30px;
h5 {
margin-bottom: 0;
}
}
.ult_price_body_block {
.rel();
padding-top: 50px;
.ult_price_body {
padding-bottom: 40px;
.ult_price {
color: @title-color;
font-family: @box-name-font-family;
line-height: 1.3;
.price-value {
.rel();
top: -20px;
font-size: 30px;
line-height: 1;
}
.ult_price_figure {
font-size: 60px;
line-height: inherit;
padding-left: 10px;
}
.ult_price_term {
.rel();
font-size: 30px;
padding-left: 15px;
}
}
}
}
&:before {
content: "";
.abs();
height: 2px;
background: @border-color;
bottom: -2px;
left: -13px;
right: -13px;
.opacity(0);
.transition(opacity .3s ease-in-out);
}
}
.bottom-part {
.transition(background .3s ease-in-out);
.ult_price_features {
text-align: initial;
padding-top: 40px;
}
.ult_price_link {
padding-top: 70px;
padding-bottom: 30px;
.button {
padding: 0 30px;
color: @title-color;
background: @border-color;
border-color: @border-color;
}
}
}
}
/*Style 1*/
&.ult_design_1 {
padding: 10px;
.ult_pricing_table {
.top-part {
padding: 0 30px;
.inscription-hot {
top: 0;
right: 0;
width: 50px;
height: 50px;
line-height: 50px;
background: @title-color;
}
.ult_pricing_heading {
padding-top: 35px;
.box-name {
text-transform: uppercase;
}
}
.ult_price_body_block {
padding-top: 25px;
.ult_price_body {
padding-bottom: 55px;
.ult_price {
.ult_price_term {
.rel();
padding-left: 0;
&:before {
content: "/";
.rel();
font-size: 110%;
font-weight: 100;
}
}
}
.price-description {
padding-top: 20px;
}
}
}
&:before {
.hide();
}
}
.bottom-part {
padding: 0 30px;
.ult_price_features {
padding-top: 65px;
line-height: 50px;
font-weight: 400;
color: @title-color;
p {
text-align: center;
line-height: inherit;
font-weight: inherit;
color: inherit;
margin: 0;
border-bottom: 1px dotted darken(@border-color, 10%);
&:last-child {
border-width: 0;
}
}
}
.ult_price_link {
padding-top: 55px;
color: @title-color;
.ult_price_action_button {
.inline-block();
color: inherit;
height: 45px;
line-height: 45px;
font-family: @box-name-font-family;
font-size: 11px;
text-transform: uppercase;
font-weight: 600;
border: 1px solid darken(@border-color, 10%);
padding: 0 50px;
.transition(~"border-color .3s ease-in-out, background .3s ease-in-out");
&:hover {
border-color: @main-site-light-color;
}
}
}
}
}
&.ult_hot {
.ult_pricing_table {
overflow: visible;
.top-part {
background: @main-site-light-color;
.ult_pricing_heading {
.box-name {
color: @main-site-dark-color;
}
.subtitle {
color: fade(@main-site-dark-color, 50%);
}
}
.ult_price_body_block {
.ult_price_body {
.ult_price {
.price-value,
.ult_price_figure,
.ult_price_term {
color: @main-site-dark-color;
}
}
.price-description {
color: fade(@main-site-dark-color, 50%);
}
}
}
}
.bottom-part {
background: transparent;
.ult_price_features {
p {
border-color: @border-color;
}
}
.ult_price_link {
.ult_price_action_button {
color: @main-site-dark-color;
border-color: @main-site-light-color;
background: @main-site-light-color;
&:hover {
border-color: darken(@main-site-light-color, 10%);
background: darken(@main-site-light-color, 10%);
}
}
}
}
}
}
}
/*Style 2*/
&.ult_design_2 {
padding: 13px 10px;
z-index: -1;
.ult_pricing_table {
.top-part {
padding: 0 40px;
.inscription-hot {
top: -40px;
right: -40px;
width: 75px;
height: 75px;
line-height: 125px;
background: @second-site-light-color;
font-weight: 400;
letter-spacing: -.4px;
font-size: 11px;
color: @main-site-dark-color;
.rotate(45deg);
}
.ult_price_body_block {
.ult_price_body {
.ult_price {
font-weight: @box-name-font-weight;
.ult_price_term {
&:before {
content: "";
.abs();
width: 3px;
height: 90%;
background: @title-color;
top: 5%;
left: 8px;
-o-transform: skew(-25deg);
-moz-transform: skew(-25deg);
-webkit-transform: skew(-25deg);
transform: skew(-25deg);
}
}
}
}
}
}
.bottom-part {
padding: 0 40px;
}
}
/*-- Make this pricing box as featured --*/
&.ult_featured {
.rel();
overflow: hidden;
border: 2px solid @second-site-light-color;
margin: -40px -21px -40px -21px;
padding: 40px 21px 40px 21px;
z-index: 1;
.ult_pricing_table {
overflow: visible;
.top-part {
.rel();
background: transparent;
padding: 13px 50px 0 50px;
margin-bottom: 0;
&:before {
content: "";
.abs();
height: 2px;
right: -21px;
bottom: 0;
left: -21px;
background: @border-color;
.opacity(1);
.transition(background .3s ease-in-out);
}
.ult_pricing_heading {
padding-top: 10px;
}
.inscription-hot {
top: -80px;
right: -61px;
}
}
.bottom-part {
background: transparent;
padding: 0 50px 13px 50px;
.ult_price_link {
.button {
color: @main-site-dark-color;
background: @second-site-light-color;
border-color: @second-site-light-color;
}
}
}
}
}
&:hover {
.ult_pricing_table {
.top-part,
.bottom-part {
background: transparent;
}
.top-part {
&:before {
.opacity(1);
}
}
.bottom-part {
.ult_price_link {
.button {
&:hover {
color: @main-site-dark-color;
background: @second-site-light-color;
border-color: @second-site-light-color;
}
}
}
}
}
&.ult_featured {
.ult_pricing_table {
.top-part {
&:before {
background: @second-site-light-color;
}
}
.bottom-part {
.ult_price_link {
.button {
&:hover {
background: darken(@second-site-light-color, 5%);
border-color: darken(@second-site-light-color, 5%);
}
}
}
}
}
}
}
}
&.ult_hot {
.ult_pricing_table {
.top-part {
.inscription-hot {
opacity: 1;
}
}
}
}
}