khaihihi
This commit is contained in:
KhaiNguyen
@@ -0,0 +1,44 @@
|
||||
.vc_shortcodes_container {
|
||||
margin: 4px 0 0 0;
|
||||
|
||||
background-position: 10px 35px;
|
||||
background-repeat: no-repeat;
|
||||
background-color: #fff;
|
||||
|
||||
.wpb_column_container {
|
||||
margin: 0 10px;
|
||||
}
|
||||
> .controls_column {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
line-height: 1px;
|
||||
padding: 2px;
|
||||
height: @vc_backend_column_controls_height;
|
||||
}
|
||||
> .wpb_element_wrapper {
|
||||
position: relative;
|
||||
> .wpb_element_title {
|
||||
position: absolute;
|
||||
top: 11px;
|
||||
left: 10px;
|
||||
margin: 0;
|
||||
}
|
||||
> .vc_container_for_children {
|
||||
margin: 0 10px 0 52px;
|
||||
outline: 1px dotted @vc_border_color;
|
||||
min-height: 55px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wpb_vc_item {
|
||||
&.wpb_content_element {
|
||||
> .wpb_element_wrapper {
|
||||
background-image: url(../vc/item_icon.png);
|
||||
background-position: 8px 7px;
|
||||
min-height: 13px;
|
||||
height: 13px;
|
||||
padding-left: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,171 @@
|
||||
/**
|
||||
* Row styles
|
||||
*/
|
||||
|
||||
.vc_row {
|
||||
.vc_make-frontend-column-gap(1);
|
||||
.vc_make-frontend-column-gap(2);
|
||||
.vc_make-frontend-column-gap(3);
|
||||
.vc_make-frontend-column-gap(4);
|
||||
.vc_make-frontend-column-gap(5);
|
||||
.vc_make-frontend-column-gap(10);
|
||||
.vc_make-frontend-column-gap(15);
|
||||
.vc_make-frontend-column-gap(20);
|
||||
.vc_make-frontend-column-gap(25);
|
||||
.vc_make-frontend-column-gap(30);
|
||||
.vc_make-frontend-column-gap(35);
|
||||
}
|
||||
|
||||
.vc_vc_column,
|
||||
.vc_vc_column_inner {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
// row gaps
|
||||
.vc_make-frontend-column-gap(@spacing) {
|
||||
&.vc_column-gap-@{spacing} {
|
||||
> .vc_vc_column,
|
||||
> .vc_vc_column_inner {
|
||||
> .vc_column_container {
|
||||
padding-left: unit(@spacing/2, px);
|
||||
padding-right: unit(@spacing/2, px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
|
||||
.vc_row {
|
||||
&.vc_row-flex {
|
||||
> .vc_vc_column,
|
||||
> .vc_vc_column_inner {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
|
||||
> .vc_column_container {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
> .vc_column-inner {
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex-grow: 1;
|
||||
-ms-flex-positive: 1;
|
||||
flex-grow: 1;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// equal height
|
||||
&.vc_row-o-equal-height {
|
||||
> .vc_column_container {
|
||||
-webkit-box-align: stretch;
|
||||
-webkit-align-items: stretch;
|
||||
-ms-flex-align: stretch;
|
||||
align-items: stretch;
|
||||
}
|
||||
}
|
||||
|
||||
// content alignment
|
||||
&.vc_row-o-content-top {
|
||||
> .vc_vc_column,
|
||||
> .vc_vc_column_inner {
|
||||
> .vc_column_container {
|
||||
> .vc_column-inner {
|
||||
-webkit-box-pack: start;
|
||||
-webkit-justify-content: flex-start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:not(.vc_row-o-equal-height) {
|
||||
> .vc_vc_column,
|
||||
> .vc_vc_column_inner {
|
||||
> .vc_column_container {
|
||||
-webkit-box-align: start;
|
||||
-webkit-align-items: flex-start;
|
||||
-ms-flex-align: start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
&.vc_row-o-content-bottom {
|
||||
> .vc_vc_column,
|
||||
> .vc_vc_column_inner {
|
||||
> .vc_column_container {
|
||||
> .vc_column-inner {
|
||||
-webkit-box-pack: end;
|
||||
-webkit-justify-content: flex-end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:not(.vc_row-o-equal-height) {
|
||||
> .vc_vc_column,
|
||||
> .vc_vc_column_inner {
|
||||
> .vc_column_container {
|
||||
-webkit-box-align: end;
|
||||
-webkit-align-items: flex-end;
|
||||
-ms-flex-align: end;
|
||||
align-items: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.vc_row-o-content-middle {
|
||||
> .vc_vc_column,
|
||||
> .vc_vc_column_inner {
|
||||
> .vc_column_container {
|
||||
> .vc_column-inner {
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:not(.vc_row-o-equal-height) {
|
||||
> .vc_vc_column,
|
||||
> .vc_vc_column_inner {
|
||||
> .vc_column_container {
|
||||
-webkit-box-align: center;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// fix for empty col
|
||||
.vc_empty-element > .vc_column-inner {
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
// row fills
|
||||
.vc_row-has-fill > .vc_row > .vc_vc_column > .vc_column_container > .vc_column-inner,
|
||||
.vc_row-has-fill > .vc_vc_column_inner > .vc_column_container > .vc_column-inner,
|
||||
.vc_row-has-fill + .vc_vc_row > .vc_row > .vc_vc_column > .vc_column_container > .vc_column-inner,
|
||||
.vc_row-has-fill + .vc_vc_row_inner > .vc_row > .vc_vc_column_inner > .vc_column_container > .vc_column-inner {
|
||||
padding-top: @vc_element_margin_bottom;
|
||||
}
|
||||
@@ -0,0 +1,363 @@
|
||||
/* Colors for TTA
|
||||
* ========================== */
|
||||
|
||||
// Blue Color
|
||||
// ------------------------
|
||||
.vc_tta-make-colors-set(~'vc_tta-color-blue';
|
||||
@color: @vc_tta-color-blue;
|
||||
@background: @vc_tta-color-blue-bg;
|
||||
@background-border: @vc_tta-color-blue-bg-border;
|
||||
@border: @vc_tta-color-blue-border;
|
||||
@text: @vc_tta-color-blue-text;
|
||||
@contrast: @vc_tta-color-blue-contrast;
|
||||
@content: @vc_tta-color-blue-content;
|
||||
);
|
||||
|
||||
// Turquoise Color
|
||||
// ------------------------
|
||||
.vc_tta-make-colors-set(~'vc_tta-color-turquoise';
|
||||
@color: @vc_tta-color-turquoise;
|
||||
@background: @vc_tta-color-turquoise-bg;
|
||||
@background-border: @vc_tta-color-turquoise-bg-border;
|
||||
@border: @vc_tta-color-turquoise-border;
|
||||
@text: @vc_tta-color-turquoise-text;
|
||||
@contrast: @vc_tta-color-turquoise-contrast;
|
||||
@content: @vc_tta-color-turquoise-content;
|
||||
);
|
||||
|
||||
// Pink Color
|
||||
// ------------------------
|
||||
.vc_tta-make-colors-set(~'vc_tta-color-pink';
|
||||
@color: @vc_tta-color-pink;
|
||||
@background: @vc_tta-color-pink-bg;
|
||||
@background-border: @vc_tta-color-pink-bg-border;
|
||||
@border: @vc_tta-color-pink-border;
|
||||
@text: @vc_tta-color-pink-text;
|
||||
@contrast: @vc_tta-color-pink-contrast;
|
||||
@content: @vc_tta-color-pink-content;
|
||||
);
|
||||
|
||||
// Violet Color
|
||||
// ------------------------
|
||||
.vc_tta-make-colors-set(~'vc_tta-color-violet';
|
||||
@color: @vc_tta-color-violet;
|
||||
@background: @vc_tta-color-violet-bg;
|
||||
@background-border: @vc_tta-color-violet-bg-border;
|
||||
@border: @vc_tta-color-violet-border;
|
||||
@text: @vc_tta-color-violet-text;
|
||||
@contrast: @vc_tta-color-violet-contrast;
|
||||
@content: @vc_tta-color-violet-content;
|
||||
);
|
||||
|
||||
// Peacoc Color
|
||||
// ------------------------
|
||||
.vc_tta-make-colors-set(~'vc_tta-color-peacoc';
|
||||
@color: @vc_tta-color-peacoc;
|
||||
@background: @vc_tta-color-peacoc-bg;
|
||||
@background-border: @vc_tta-color-peacoc-bg-border;
|
||||
@border: @vc_tta-color-peacoc-border;
|
||||
@text: @vc_tta-color-peacoc-text;
|
||||
@contrast: @vc_tta-color-peacoc-contrast;
|
||||
@content: @vc_tta-color-peacoc-content;
|
||||
);
|
||||
// chino
|
||||
.vc_tta-make-colors-set(~'vc_tta-color-chino';
|
||||
@color: @vc_tta-color-chino;
|
||||
@background: @vc_tta-color-chino-bg;
|
||||
@background-border: @vc_tta-color-chino-bg-border;
|
||||
@border: @vc_tta-color-chino-border;
|
||||
@text: @vc_tta-color-chino-text;
|
||||
@contrast: @vc_tta-color-chino-contrast;
|
||||
@content: @vc_tta-color-chino-content;
|
||||
);
|
||||
|
||||
// Mulled Wine Color
|
||||
// ------------------------
|
||||
.vc_tta-make-colors-set(~'vc_tta-color-mulled-wine';
|
||||
@color: @vc_tta-color-mulled-wine;
|
||||
@background: @vc_tta-color-mulled-wine-bg;
|
||||
@background-border: @vc_tta-color-mulled-wine-bg-border;
|
||||
@border: @vc_tta-color-mulled-wine-border;
|
||||
@text: @vc_tta-color-mulled-wine-text;
|
||||
@contrast: @vc_tta-color-mulled-wine-contrast;
|
||||
@content: @vc_tta-color-mulled-wine-content;
|
||||
);
|
||||
|
||||
// Vista Blue Color
|
||||
// ------------------------
|
||||
.vc_tta-make-colors-set(~'vc_tta-color-vista-blue';
|
||||
@color: @vc_tta-color-vista-blue;
|
||||
@background: @vc_tta-color-vista-blue-bg;
|
||||
@background-border: @vc_tta-color-vista-blue-bg-border;
|
||||
@border: @vc_tta-color-vista-blue-border;
|
||||
@text: @vc_tta-color-vista-blue-text;
|
||||
@contrast: @vc_tta-color-vista-blue-contrast;
|
||||
@content: @vc_tta-color-vista-blue-content;
|
||||
);
|
||||
|
||||
// Orange Color
|
||||
// ------------------------
|
||||
.vc_tta-make-colors-set(~'vc_tta-color-orange';
|
||||
@color: @vc_tta-color-orange;
|
||||
@background: @vc_tta-color-orange-bg;
|
||||
@background-border: @vc_tta-color-orange-bg-border;
|
||||
@border: @vc_tta-color-orange-border;
|
||||
@text: @vc_tta-color-orange-text;
|
||||
@contrast: @vc_tta-color-orange-contrast;
|
||||
@content: @vc_tta-color-orange-content;
|
||||
);
|
||||
|
||||
// Sky Color
|
||||
// ------------------------
|
||||
.vc_tta-make-colors-set(~'vc_tta-color-sky';
|
||||
@color: @vc_tta-color-sky;
|
||||
@background: @vc_tta-color-sky-bg;
|
||||
@background-border: @vc_tta-color-sky-bg-border;
|
||||
@border: @vc_tta-color-sky-border;
|
||||
@text: @vc_tta-color-sky-text;
|
||||
@contrast: @vc_tta-color-sky-contrast;
|
||||
@content: @vc_tta-color-sky-content;
|
||||
);
|
||||
|
||||
// Green Color
|
||||
// ------------------------
|
||||
.vc_tta-make-colors-set(~'vc_tta-color-green';
|
||||
@color: @vc_tta-color-green;
|
||||
@background: @vc_tta-color-green-bg;
|
||||
@background-border: @vc_tta-color-green-bg-border;
|
||||
@border: @vc_tta-color-green-border;
|
||||
@text: @vc_tta-color-green-text;
|
||||
@contrast: @vc_tta-color-green-contrast;
|
||||
@content: @vc_tta-color-green-content;
|
||||
);
|
||||
|
||||
// Juicy Pink Color
|
||||
// ------------------------
|
||||
.vc_tta-make-colors-set(~'vc_tta-color-juicy-pink';
|
||||
@color: @vc_tta-color-juicy-pink;
|
||||
@background: @vc_tta-color-juicy-pink-bg;
|
||||
@background-border: @vc_tta-color-juicy-pink-bg-border;
|
||||
@border: @vc_tta-color-juicy-pink-border;
|
||||
@text: @vc_tta-color-juicy-pink-text;
|
||||
@contrast: @vc_tta-color-juicy-pink-contrast;
|
||||
@content: @vc_tta-color-juicy-pink-content;
|
||||
);
|
||||
|
||||
// Sandy Brown Color
|
||||
// ------------------------
|
||||
.vc_tta-make-colors-set(~'vc_tta-color-sandy-brown';
|
||||
@color: @vc_tta-color-sandy-brown;
|
||||
@background: @vc_tta-color-sandy-brown-bg;
|
||||
@background-border: @vc_tta-color-sandy-brown-bg-border;
|
||||
@border: @vc_tta-color-sandy-brown-border;
|
||||
@text: @vc_tta-color-sandy-brown-text;
|
||||
@contrast: @vc_tta-color-sandy-brown-contrast;
|
||||
@content: @vc_tta-color-sandy-brown-content;
|
||||
);
|
||||
|
||||
// Purple Color
|
||||
// ------------------------
|
||||
.vc_tta-make-colors-set(~'vc_tta-color-purple';
|
||||
@color: @vc_tta-color-purple;
|
||||
@background: @vc_tta-color-purple-bg;
|
||||
@background-border: @vc_tta-color-purple-bg-border;
|
||||
@border: @vc_tta-color-purple-border;
|
||||
@text: @vc_tta-color-purple-text;
|
||||
@contrast: @vc_tta-color-purple-contrast;
|
||||
@content: @vc_tta-color-purple-content;
|
||||
);
|
||||
|
||||
// Black Color
|
||||
// ------------------------
|
||||
.vc_tta-make-colors-set(~'vc_tta-color-black';
|
||||
@color: @vc_tta-color-black;
|
||||
@background: @vc_tta-color-black-bg;
|
||||
@background-border: @vc_tta-color-black-bg-border;
|
||||
@border: @vc_tta-color-black-border;
|
||||
@text: @vc_tta-color-black-text;
|
||||
@contrast: @vc_tta-color-black-contrast;
|
||||
@content: @vc_tta-color-black-content;
|
||||
);
|
||||
|
||||
// Grey Color
|
||||
// ------------------------
|
||||
.vc_tta-color-grey {
|
||||
// Classic Style
|
||||
// ------------------------
|
||||
&.vc_tta-style-classic {
|
||||
.vc_tta-make-panel-color(
|
||||
@border: @vc_tta-common-border-color;
|
||||
@border-active: @vc_tta-common-border-color;
|
||||
@background: @vc_tta-common-background-color;
|
||||
@background-active: @vc_tta-common-background-color;
|
||||
@text: @vc_tta-color-grey-contrast;
|
||||
@text-active: @vc_tta-color-grey-text;
|
||||
);
|
||||
.vc_tta-make-tabs-color(
|
||||
@border: @vc_tta-color-grey-border;
|
||||
@border-active: @vc_tta-color-grey-bg-border;
|
||||
@background: @vc_tta-color-grey;
|
||||
@background-active: @vc_tta-color-grey-bg;
|
||||
@text: @vc_tta-color-grey-contrast;
|
||||
@text-active: @vc_tta-color-grey-text;
|
||||
);
|
||||
}
|
||||
|
||||
// Modern Style
|
||||
// ------------------------
|
||||
&.vc_tta-style-modern {
|
||||
.vc_tta-make-panel-color(
|
||||
@border: @vc_tta-common-border-color;
|
||||
@border-active: @vc_tta-common-border-color;
|
||||
@background: @vc_tta-common-background-color;
|
||||
@background-active: @vc_tta-common-background-color;
|
||||
@text: @vc_tta-color-grey-contrast;
|
||||
@text-active: @vc_tta-color-grey-text;
|
||||
);
|
||||
.vc_tta-make-tabs-color(
|
||||
@border: @vc_tta-color-grey-border;
|
||||
@border-active: @vc_tta-color-grey-bg-border;
|
||||
@background: @vc_tta-color-grey;
|
||||
@background-active: @vc_tta-color-grey-bg;
|
||||
@text: @vc_tta-color-grey-contrast;
|
||||
@text-active: @vc_tta-color-grey-text;
|
||||
);
|
||||
}
|
||||
|
||||
// Outline Style
|
||||
// ------------------------
|
||||
&.vc_tta-style-outline {
|
||||
.vc_tta-make-panel-color(
|
||||
@text: @vc_tta-color-grey;
|
||||
@text-hover: @vc_tta-color-grey-contrast;
|
||||
@text-active: @vc_tta-color-grey;
|
||||
@border: @vc_tta-color-grey-border;
|
||||
@border-active: @vc_tta-color-grey;
|
||||
@background: transparent;
|
||||
@background-active: transparent;
|
||||
@background-hover: @vc_tta-color-grey;
|
||||
);
|
||||
.vc_tta-make-tabs-color(
|
||||
@text: @vc_tta-color-grey;
|
||||
@text-hover: @vc_tta-color-grey-contrast;
|
||||
@text-active: @vc_tta-color-grey;
|
||||
@border: @vc_tta-color-grey-border;
|
||||
@border-active: @vc_tta-color-grey;
|
||||
@background: transparent;
|
||||
@background-active: transparent;
|
||||
@background-hover: @vc_tta-color-grey;
|
||||
);
|
||||
}
|
||||
|
||||
// Flat Style
|
||||
// ------------------------
|
||||
&.vc_tta-style-flat {
|
||||
.vc_tta-make-panel-color(
|
||||
@background: @vc_tta-common-background-color;
|
||||
@background-active: @vc_tta-common-background-color;
|
||||
@text: @vc_tta-color-grey-contrast;
|
||||
@text-active: @vc_tta-color-grey-contrast;
|
||||
@content-color: @vc_tta-color-grey-contrast;
|
||||
);
|
||||
.vc_tta-make-tabs-color(
|
||||
@background: darken(@vc_tta-color-grey, 3%);
|
||||
@background-active: @vc_tta-color-grey;
|
||||
@background-hover: darken(@vc_tta-color-grey, 6%);
|
||||
@text: @vc_tta-color-grey-contrast;
|
||||
@text-active: @vc_tta-color-grey-contrast;
|
||||
@content-color: @vc_tta-color-grey-contrast;
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// White Color
|
||||
// ------------------------
|
||||
.vc_tta-color-white {
|
||||
// Classic Style
|
||||
// ------------------------
|
||||
&.vc_tta-style-classic {
|
||||
.vc_tta-make-panel-color(
|
||||
@border: @vc_tta-color-white-border;
|
||||
@border-active: @vc_tta-color-white-border;
|
||||
@background: @vc_tta-color-white;
|
||||
@background-active: @vc_tta-color-white;
|
||||
@text: @vc_tta-color-white-contrast;
|
||||
@text-active: @vc_tta-color-white-text;
|
||||
);
|
||||
.vc_tta-make-tabs-color(
|
||||
@border: @vc_tta-color-white-border;
|
||||
@border-active: @vc_tta-color-white-bg-border;
|
||||
@background: @vc_tta-color-white;
|
||||
@background-active: @vc_tta-color-white-bg;
|
||||
@text: @vc_tta-color-white-contrast;
|
||||
@text-active: @vc_tta-color-white-text;
|
||||
);
|
||||
}
|
||||
|
||||
// Modern Style
|
||||
// ------------------------
|
||||
&.vc_tta-style-modern {
|
||||
.vc_tta-make-panel-color(
|
||||
@border: @vc_tta-color-white-border;
|
||||
@border-active: @vc_tta-color-white-border;
|
||||
@background: @vc_tta-color-white;
|
||||
@background-active: @vc_tta-color-white;
|
||||
@text: @vc_tta-color-white-contrast;
|
||||
@text-active: @vc_tta-color-white-text;
|
||||
);
|
||||
.vc_tta-make-tabs-color(
|
||||
@border: @vc_tta-color-white-border;
|
||||
@border-active: @vc_tta-color-white-bg-border;
|
||||
@background: @vc_tta-color-white;
|
||||
@background-active: @vc_tta-color-white-bg;
|
||||
@text: @vc_tta-color-white-contrast;
|
||||
@text-active: @vc_tta-color-white-text;
|
||||
);
|
||||
}
|
||||
|
||||
// Outline Style
|
||||
// ------------------------
|
||||
&.vc_tta-style-outline {
|
||||
.vc_tta-make-panel-color(
|
||||
@text: @vc_tta-color-white;
|
||||
@text-hover: @vc_tta-color-white-contrast;
|
||||
@text-active: @vc_tta-color-white;
|
||||
@border: @vc_tta-color-white-border;
|
||||
@border-active: @vc_tta-color-white;
|
||||
@background: transparent;
|
||||
@background-active: transparent;
|
||||
@background-hover: @vc_tta-color-white;
|
||||
);
|
||||
.vc_tta-make-tabs-color(
|
||||
@text: @vc_tta-color-white;
|
||||
@text-hover: @vc_tta-color-white-contrast;
|
||||
@text-active: @vc_tta-color-white;
|
||||
@border: @vc_tta-color-white-border;
|
||||
@border-active: @vc_tta-color-white;
|
||||
@background: transparent;
|
||||
@background-active: transparent;
|
||||
@background-hover: @vc_tta-color-white;
|
||||
);
|
||||
}
|
||||
|
||||
// Flat Style
|
||||
// ------------------------
|
||||
&.vc_tta-style-flat {
|
||||
.vc_tta-make-panel-color(
|
||||
@background: darken(@vc_tta-color-white, 2%);
|
||||
@background-active: @vc_tta-color-white;
|
||||
@background-hover: darken(@vc_tta-color-white, 5%);
|
||||
@text: @vc_tta-color-white-contrast;
|
||||
@text-active: @vc_tta-color-white-contrast;
|
||||
@content-color: @vc_tta-color-white-contrast;
|
||||
);
|
||||
.vc_tta-make-tabs-color(
|
||||
@background: darken(@vc_tta-color-white, 2%);
|
||||
@background-active: @vc_tta-color-white;
|
||||
@background-hover: darken(@vc_tta-color-white, 5%);
|
||||
@text: @vc_tta-color-white-contrast;
|
||||
@text-active: @vc_tta-color-white-contrast;
|
||||
@content-color: @vc_tta-color-white-contrast;
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,749 @@
|
||||
/**
|
||||
* Tabs, Tours, Accordions
|
||||
*/
|
||||
.vc_tta-container {
|
||||
margin-bottom: @vc_margin_bottom_gold;
|
||||
}
|
||||
|
||||
/* General Styles for TTA
|
||||
* ========================== */
|
||||
.vc_tta.vc_general {
|
||||
font-size: @vc_tta-font-size;
|
||||
|
||||
// Basic Accordions styles
|
||||
// ------------------------
|
||||
.vc_tta-panels-container,
|
||||
.vc_tta-panels {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
.vc_tta-panel {
|
||||
display: block;
|
||||
}
|
||||
.vc_tta-panel-heading {
|
||||
border: solid transparent;
|
||||
box-sizing: border-box;
|
||||
-webkit-transition: background .2s ease-in-out;
|
||||
transition: background .2s ease-in-out;
|
||||
}
|
||||
.vc_tta-panel-title {
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
> a {
|
||||
background: transparent;
|
||||
display: block;
|
||||
padding: @vc_tta-panels-padding-vertical @vc_tta-panels-padding-horizontal;
|
||||
box-sizing: border-box;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
position: relative;
|
||||
-webkit-transition: color .2s ease-in-out;
|
||||
transition: color .2s ease-in-out;
|
||||
border: none;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
&:focus,
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.vc_tta-panel-body {
|
||||
border: solid transparent;
|
||||
box-sizing: content-box;
|
||||
padding: @vc_tta-panes-padding-vertical @vc_tta-panes-padding-horizontal;
|
||||
display: none;
|
||||
overflow: hidden;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
-webkit-transition: padding .2s ease-in-out;
|
||||
transition: padding .2s ease-in-out;
|
||||
// Fix #93887286 elements margins
|
||||
> :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
// Active Panel
|
||||
.vc_tta-panel.vc_active {
|
||||
display: block;
|
||||
.vc_tta-panel-body {
|
||||
display: block;
|
||||
}
|
||||
.vc_tta-panel-title {
|
||||
> a {
|
||||
&:hover {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vc_tta-panel.vc_animating {
|
||||
.vc_tta-panel-body {
|
||||
display: block;
|
||||
min-height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.vc_tta-o-all-clickable .vc_tta-panel {
|
||||
.vc_tta-panel-title {
|
||||
> a {
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Basic Tabs styles
|
||||
// ------------------------
|
||||
.vc_tta-tabs-container {
|
||||
display: block;
|
||||
position: relative;
|
||||
z-index: @vc_tta-tabs-z-index;
|
||||
}
|
||||
.vc_tta-tabs-list {
|
||||
list-style-type: none;
|
||||
display: block;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.vc_tta-tab {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
> a {
|
||||
padding: @vc_tta-tabs-padding-vertical @vc_tta-tabs-padding-horizontal;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
border: solid transparent;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
-webkit-transition: background .2s ease-in-out, color .2s ease-in-out, border .2s ease-in-out;
|
||||
transition: background .2s ease-in-out, color .2s ease-in-out, border .2s ease-in-out;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
&.vc_active {
|
||||
> a {
|
||||
cursor: default;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
-webkit-transition: background .2s ease-in-out, color .2s ease-in-out;
|
||||
transition: background .2s ease-in-out, color .2s ease-in-out;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
&:hover {
|
||||
cursor: default;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
&::before,
|
||||
&::after {
|
||||
display: none;
|
||||
content: '';
|
||||
position: absolute;
|
||||
border-width: inherit;
|
||||
border-color: inherit;
|
||||
border-style: inherit;
|
||||
width: 100vw;
|
||||
height: 200vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Icons for TTA headings
|
||||
// ------------------------
|
||||
.vc_tta-icon {
|
||||
font-size: @vc_tta-icon-font-size;
|
||||
line-height: 0;
|
||||
display: inline;
|
||||
&::before {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
.vc_tta-title-text:not(:empty) {
|
||||
&:not(:first-child),
|
||||
~ * {
|
||||
margin-left: @vc_tta-icon-spacing;
|
||||
}
|
||||
}
|
||||
.vc_tta-title-text:empty {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Icons Adaptations
|
||||
* ====================== */
|
||||
.vc_tta-icon {
|
||||
&.fa,
|
||||
&.vc_li {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
/* Accordions
|
||||
* ========================== */
|
||||
.vc_tta {
|
||||
&.vc_tta-accordion {
|
||||
.vc_tta-tabs-container {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Tabs
|
||||
* ========================== */
|
||||
.vc_tta {
|
||||
&.vc_tta-tabs {
|
||||
// Hide Tabs before breakpoint
|
||||
.vc_tta-tabs-container {
|
||||
display: none;
|
||||
}
|
||||
//.vc_non_responsive must be exactly same as @media below
|
||||
.vc_non_responsive &,
|
||||
.vc_tta-o-non-responsive & {
|
||||
.vc_tta-tabs-container {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Hide Panel heading after breakpoint
|
||||
.vc_tta-panel-heading {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media (min-width: @vc_tta-breakpoint) {
|
||||
.vc_tta-tabs-container {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Hide Panel heading after breakpoint
|
||||
.vc_tta-panel-heading {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Shapes for TTA
|
||||
* ========================== */
|
||||
.vc_tta {
|
||||
// Square Shape
|
||||
// ------------------------
|
||||
&.vc_tta-shape-square {
|
||||
.vc_tta-make-shape(0px);
|
||||
}
|
||||
// Rounded Shape
|
||||
// ------------------------
|
||||
&.vc_tta-shape-rounded {
|
||||
.vc_tta-make-shape(@vc_tta-border-radius-rounded);
|
||||
}
|
||||
// Round Shape
|
||||
// ------------------------
|
||||
&.vc_tta-shape-round {
|
||||
.vc_tta-make-shape(@vc_tta-border-radius-round);
|
||||
}
|
||||
}
|
||||
|
||||
/* Adaptation for Shapes
|
||||
* ========================== */
|
||||
// Rounded Shape
|
||||
// -----------------------
|
||||
.vc_tta-shape-rounded {
|
||||
// active panel for accordion
|
||||
&:not(.vc_tta-o-no-fill) {
|
||||
.vc_tta-panel.vc_active {
|
||||
.vc_tta-panel-heading {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.vc_tta-panel-body {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Fix For Tabs Content Alignment
|
||||
&.vc_tta-tabs {
|
||||
//.vc_non_responsive must be exactly same as @media below
|
||||
.vc_non_responsive &,
|
||||
.vc_tta-o-non-responsive & {
|
||||
.vc_tta-panel-body {
|
||||
&::before,
|
||||
&::after {
|
||||
box-sizing: border-box;
|
||||
content: '';
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: @vc_tta-border-radius-rounded;
|
||||
height: @vc_tta-border-radius-rounded;
|
||||
border-radius: @vc_tta-border-radius-rounded;
|
||||
border-style: inherit;
|
||||
border-width: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (min-width: @vc_tta-breakpoint) {
|
||||
.vc_tta-panel-body {
|
||||
&::before,
|
||||
&::after {
|
||||
box-sizing: border-box;
|
||||
content: '';
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: @vc_tta-border-radius-rounded;
|
||||
height: @vc_tta-border-radius-rounded;
|
||||
border-radius: @vc_tta-border-radius-rounded;
|
||||
border-style: inherit;
|
||||
border-width: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Fix For Shape Group
|
||||
&.vc_tta-o-shape-group {
|
||||
// For Panels
|
||||
// with filled content
|
||||
&:not(.vc_tta-o-no-fill) {
|
||||
.vc_tta-panel:not(:first-child):not(:last-child) {
|
||||
.vc_tta-panel-heading {
|
||||
border-radius: 0;
|
||||
}
|
||||
.vc_tta-panel-body {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
.vc_tta-panel:first-child {
|
||||
&:not(:last-child) {
|
||||
.vc_tta-panel-heading,
|
||||
.vc_tta-panel-body {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.vc_tta-panel:last-child {
|
||||
&:not(:first-child) {
|
||||
.vc_tta-panel-heading,
|
||||
.vc_tta-panel-body {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// with transparent content
|
||||
&.vc_tta-o-no-fill {
|
||||
// for panels
|
||||
.vc_tta-panel:not(:first-child):not(:last-child) {
|
||||
&:not(.vc_active) {
|
||||
.vc_tta-panel-heading,
|
||||
.vc_tta-panel-body {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
&.vc_active {
|
||||
.vc_tta-panel-heading {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.vc_tta-panel:first-child {
|
||||
&:not(:last-child):not(.vc_active) {
|
||||
.vc_tta-panel-heading,
|
||||
.vc_tta-panel-body {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.vc_tta-panel:last-child {
|
||||
&:not(:first-child) {
|
||||
.vc_tta-panel-heading,
|
||||
.vc_tta-panel-body {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Round Shape
|
||||
// -----------------------
|
||||
.vc_tta-shape-round {
|
||||
// active panel
|
||||
&:not(.vc_tta-o-no-fill) {
|
||||
.vc_tta-panel.vc_active {
|
||||
.vc_tta-panel-heading {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.vc_tta-panel-body {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Fix For Tabs Content Alignment
|
||||
&.vc_tta-tabs {
|
||||
//.vc_non_responsive must be exactly same as @media below
|
||||
.vc_non_responsive &,
|
||||
.vc_tta-o-non-responsive & {
|
||||
.vc_tta-panel-body {
|
||||
&::before,
|
||||
&::after {
|
||||
box-sizing: border-box;
|
||||
content: '';
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: @vc_tta-border-radius-round;
|
||||
height: @vc_tta-border-radius-round;
|
||||
border-radius: @vc_tta-border-radius-round;
|
||||
border-style: inherit;
|
||||
border-width: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (min-width: @vc_tta-breakpoint) {
|
||||
.vc_tta-panel-body {
|
||||
&::before,
|
||||
&::after {
|
||||
box-sizing: border-box;
|
||||
content: '';
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: @vc_tta-border-radius-round;
|
||||
height: @vc_tta-border-radius-round;
|
||||
border-radius: @vc_tta-border-radius-round;
|
||||
border-style: inherit;
|
||||
border-width: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Fix For Shape Group
|
||||
&.vc_tta-o-shape-group {
|
||||
// For Panels
|
||||
// with filled content
|
||||
&:not(.vc_tta-o-no-fill) {
|
||||
.vc_tta-panel:not(:first-child):not(:last-child) {
|
||||
.vc_tta-panel-heading {
|
||||
border-radius: 0;
|
||||
}
|
||||
.vc_tta-panel-body {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
.vc_tta-panel:first-child {
|
||||
&:not(:last-child) {
|
||||
.vc_tta-panel-heading,
|
||||
.vc_tta-panel-body {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.vc_tta-panel:last-child {
|
||||
&:not(:first-child) {
|
||||
.vc_tta-panel-heading,
|
||||
.vc_tta-panel-body {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// with transparent content
|
||||
&.vc_tta-o-no-fill {
|
||||
// for panels
|
||||
.vc_tta-panel:not(:first-child):not(:last-child) {
|
||||
&:not(.vc_active) {
|
||||
.vc_tta-panel-heading,
|
||||
.vc_tta-panel-body {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
&.vc_active {
|
||||
.vc_tta-panel-heading {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.vc_tta-panel:first-child {
|
||||
&:not(:last-child):not(.vc_active) {
|
||||
.vc_tta-panel-heading,
|
||||
.vc_tta-panel-body {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.vc_tta-panel:last-child {
|
||||
&:not(:first-child) {
|
||||
.vc_tta-panel-heading,
|
||||
.vc_tta-panel-body {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Styles for TTA
|
||||
* ========================== */
|
||||
.vc_tta {
|
||||
// Classic Style
|
||||
// ------------------------
|
||||
&.vc_tta-style-classic {
|
||||
// for accordion
|
||||
.vc_tta-panel-body,
|
||||
.vc_tta-panel-heading {
|
||||
border-width: @vc_tta-border-size;
|
||||
}
|
||||
.vc_tta-panel {
|
||||
&:not(:first-child),
|
||||
&.vc_active + .vc_tta-panel {
|
||||
.vc_tta-panel-heading {
|
||||
margin-top: -@vc_tta-border-size;
|
||||
}
|
||||
}
|
||||
&:not(:last-child),
|
||||
&.vc_active {
|
||||
.vc_tta-panel-heading {
|
||||
margin-bottom: -@vc_tta-border-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
// for tabs
|
||||
.vc_tta-tabs-list {
|
||||
padding-left: @vc_tta-border-size;
|
||||
padding-top: @vc_tta-border-size;
|
||||
}
|
||||
.vc_tta-tab {
|
||||
margin-left: -@vc_tta-border-size;
|
||||
margin-top: -@vc_tta-border-size;
|
||||
> a {
|
||||
border-width: @vc_tta-border-size;
|
||||
}
|
||||
}
|
||||
// fix for tabs colors
|
||||
&.vc_tta-tabs {
|
||||
//.vc_non_responsive must be exactly same as @media below
|
||||
.vc_non_responsive &,
|
||||
.vc_tta-o-non-responsive & {
|
||||
.vc_tta-panels {
|
||||
border: @vc_tta-border-size solid transparent;
|
||||
}
|
||||
|
||||
.vc_tta-panel {
|
||||
margin: -@vc_tta-border-size;
|
||||
}
|
||||
}
|
||||
@media (min-width: @vc_tta-breakpoint) {
|
||||
.vc_tta-panels {
|
||||
border: @vc_tta-border-size solid transparent;
|
||||
}
|
||||
|
||||
.vc_tta-panel {
|
||||
margin: -@vc_tta-border-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Modern Style
|
||||
// ------------------------
|
||||
&.vc_tta-style-modern {
|
||||
// for accordions
|
||||
.vc_tta-panel-body,
|
||||
.vc_tta-panel-heading {
|
||||
border-width: @vc_tta-border-size;
|
||||
#gradient > .vertical(@start-color: rgba(255, 255, 255, .2); @end-color: rgba(255, 255, 255, .01));
|
||||
}
|
||||
.vc_tta-panel {
|
||||
&:not(:first-child),
|
||||
&.vc_active + .vc_tta-panel {
|
||||
.vc_tta-panel-heading {
|
||||
margin-top: -@vc_tta-border-size;
|
||||
}
|
||||
}
|
||||
&:not(:last-child),
|
||||
&.vc_active {
|
||||
.vc_tta-panel-heading {
|
||||
margin-bottom: -@vc_tta-border-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
// for tabs
|
||||
.vc_tta-tabs-list {
|
||||
padding-left: @vc_tta-border-size;
|
||||
padding-top: @vc_tta-border-size;
|
||||
}
|
||||
.vc_tta-tab {
|
||||
margin-left: -@vc_tta-border-size;
|
||||
margin-top: -@vc_tta-border-size;
|
||||
> a {
|
||||
border-width: @vc_tta-border-size;
|
||||
#gradient > .vertical(@start-color: rgba(255, 255, 255, .2); @end-color: rgba(255, 255, 255, .01));
|
||||
}
|
||||
&.vc_active {
|
||||
> a {
|
||||
background-clip: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
// fix for tabs colors
|
||||
&.vc_tta-tabs {
|
||||
//.vc_non_responsive must be exactly same as @media below
|
||||
.vc_non_responsive &,
|
||||
.vc_tta-o-non-responsive & {
|
||||
.vc_tta-panels {
|
||||
border: @vc_tta-border-size solid transparent;
|
||||
}
|
||||
|
||||
.vc_tta-panel {
|
||||
margin: -@vc_tta-border-size;
|
||||
}
|
||||
}
|
||||
@media (min-width: @vc_tta-breakpoint) {
|
||||
.vc_tta-panels {
|
||||
border: @vc_tta-border-size solid transparent;
|
||||
}
|
||||
|
||||
.vc_tta-panel {
|
||||
margin: -@vc_tta-border-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Outline Style
|
||||
// ------------------------
|
||||
&.vc_tta-style-outline {
|
||||
// for accordions
|
||||
.vc_tta-panel-body,
|
||||
.vc_tta-panel-heading {
|
||||
border-width: @vc_tta-border-size-outline;
|
||||
}
|
||||
.vc_tta-panel {
|
||||
&:not(:first-child),
|
||||
&.vc_active + .vc_tta-panel {
|
||||
.vc_tta-panel-heading {
|
||||
margin-top: -@vc_tta-border-size-outline;
|
||||
}
|
||||
}
|
||||
&:not(:last-child),
|
||||
&.vc_active {
|
||||
.vc_tta-panel-heading {
|
||||
margin-bottom: -@vc_tta-border-size-outline;
|
||||
}
|
||||
}
|
||||
}
|
||||
// for tabs
|
||||
.vc_tta-tabs-list {
|
||||
padding-left: @vc_tta-border-size-outline;
|
||||
padding-top: @vc_tta-border-size-outline;
|
||||
}
|
||||
.vc_tta-tab {
|
||||
margin-left: -@vc_tta-border-size-outline;
|
||||
margin-top: -@vc_tta-border-size-outline;
|
||||
> a {
|
||||
border-width: @vc_tta-border-size-outline;
|
||||
}
|
||||
}
|
||||
// Fix for shapes
|
||||
.vc_tta-panel-body {
|
||||
&,
|
||||
.vc_non_responsive &,
|
||||
.vc_tta-o-non-responsive & {
|
||||
&::before,
|
||||
&::after {
|
||||
display: block;
|
||||
top: -@vc_tta-border-size-outline;
|
||||
right: -@vc_tta-border-size-outline;
|
||||
bottom: -@vc_tta-border-size-outline;
|
||||
left: -@vc_tta-border-size-outline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// fix for tabs colors
|
||||
&.vc_tta-tabs {
|
||||
//.vc_non_responsive must be exactly same as @media below
|
||||
.vc_non_responsive &,
|
||||
.vc_tta-o-non-responsive & {
|
||||
.vc_tta-panels {
|
||||
border: @vc_tta-border-size-outline solid transparent;
|
||||
}
|
||||
|
||||
.vc_tta-panel {
|
||||
margin: -@vc_tta-border-size-outline;
|
||||
}
|
||||
}
|
||||
@media (min-width: @vc_tta-breakpoint) {
|
||||
.vc_tta-panels {
|
||||
border: @vc_tta-border-size-outline solid transparent;
|
||||
}
|
||||
|
||||
.vc_tta-panel {
|
||||
margin: -@vc_tta-border-size-outline;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.vc_tta-pageable {
|
||||
.vc_tta-o-non-responsive & {
|
||||
.vc_tta-panel {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@media (min-width: @vc_tta-breakpoint) {
|
||||
.vc_tta-panel {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Flat Style
|
||||
// ------------------------
|
||||
&.vc_tta-style-flat {
|
||||
.vc_tta-panel-body,
|
||||
.vc_tta-panel-heading {
|
||||
border-width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// don't show panel headings on pageable
|
||||
// vc_tta-panel-title is container, that has empty a element
|
||||
.vc_tta-pageable {
|
||||
.vc_tta-panel-title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,124 @@
|
||||
@import (reference) "../vc_tta.less";
|
||||
@import "vc_tta-icon-controls.less";
|
||||
|
||||
@vc_frontend_editor_tta_container_top_margin: 31px;
|
||||
// Extending aliases for frontend editor
|
||||
.vc_general.vc_tta .vc_tta-controls-icon[data-vc-tta-controls-icon="plus"]::before:extend(.vc_tta .vc_tta-controls-icon.vc_tta-controls-icon-plus::before) {
|
||||
}
|
||||
|
||||
.vc_general.vc_tta .vc_tta-controls-icon[data-vc-tta-controls-icon="plus"]::after:extend(.vc_tta .vc_tta-controls-icon.vc_tta-controls-icon-plus::after) {
|
||||
}
|
||||
|
||||
.vc_general.vc_tta .vc_tta-controls-icon[data-vc-tta-controls-icon="chevron"]::before:extend(.vc_tta .vc_tta-controls-icon.vc_tta-controls-icon-chevron::before) {
|
||||
}
|
||||
|
||||
.vc_general.vc_tta .vc_tta-controls-icon[data-vc-tta-controls-icon="triangle"]::before:extend(.vc_tta .vc_tta-controls-icon.vc_tta-controls-icon-triangle::before) {
|
||||
}
|
||||
|
||||
.vc_general.vc_tta .vc_active .vc_tta-controls-icon[data-vc-tta-controls-icon="plus"]::after:extend(.vc_tta .vc_active .vc_tta-controls-icon.vc_tta-controls-icon-plus::after) {
|
||||
}
|
||||
|
||||
.vc_general.vc_tta .vc_active .vc_tta-controls-icon[data-vc-tta-controls-icon="chevron"]::before:extend(.vc_tta .vc_active .vc_tta-controls-icon.vc_tta-controls-icon-chevron::before) {
|
||||
}
|
||||
|
||||
.vc_general.vc_tta .vc_active .vc_tta-controls-icon[data-vc-tta-controls-icon="triangle"]::before:extend(.vc_tta .vc_active .vc_tta-controls-icon.vc_tta-controls-icon-triangle::before) {
|
||||
}
|
||||
|
||||
// Extending aliases for controls icon position:
|
||||
|
||||
.vc_general.vc_tta.vc_tta-accordion [data-vc-tta-controls-icon-position="left"].vc_tta-panel-title > a:extend(.vc_tta.vc_tta-accordion .vc_tta-controls-icon-position-left.vc_tta-panel-title > a) {
|
||||
}
|
||||
|
||||
.vc_general.vc_tta.vc_tta-accordion [data-vc-tta-controls-icon-position="left"] .vc_tta-controls-icon:extend(.vc_tta.vc_tta-accordion .vc_tta-controls-icon-position-left .vc_tta-controls-icon) {
|
||||
}
|
||||
|
||||
.vc_general.vc_tta.vc_tta-accordion [data-vc-tta-controls-icon-position="right"].vc_tta-panel-title > a:extend(.vc_tta.vc_tta-accordion .vc_tta-controls-icon-position-right.vc_tta-panel-title > a) {
|
||||
}
|
||||
|
||||
.vc_general.vc_tta.vc_tta-accordion [data-vc-tta-controls-icon-position="right"] .vc_tta-controls-icon:extend(.vc_tta.vc_tta-accordion .vc_tta-controls-icon-position-right .vc_tta-controls-icon) {
|
||||
}
|
||||
|
||||
.vc_element-container > .vc_element:last-child .vc_tta-container {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.vc_general.vc_tta-tabs .vc_element.vc_vc_tta_section {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.vc_general .vc_element.vc_empty .vc_tta-panel-body.vc_empty-element {
|
||||
min-height: 0;
|
||||
position: static;
|
||||
}
|
||||
|
||||
// TTA Placeholder
|
||||
.vc_general .vc_placeholder-tta, .vc_placeholder-tta-tab {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: transparent url('../vc/pattern.gif');
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.vc_general .vc_placeholder-tta-tab {
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
// TTA empty element
|
||||
// =============================
|
||||
.vc_general .vc_element.vc_empty .vc_tta-panel-body {
|
||||
min-height: 100px !important;
|
||||
.vc_empty-element {
|
||||
position: absolute;
|
||||
top: @vc_tta-panes-padding-vertical;
|
||||
bottom: @vc_tta-panes-padding-vertical;
|
||||
left: @vc_tta-panes-padding-horizontal;
|
||||
right: @vc_tta-panes-padding-horizontal;
|
||||
}
|
||||
}
|
||||
|
||||
.vc_general.vc_tta-accordion .vc_element.vc_empty .vc_tta-panel-body {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@media (max-width: @vc_tta-breakpoint-max) {
|
||||
.vc_general.vc_tta-tabs .vc_element.vc_vc_tta_section,
|
||||
.vc_general.vc_tta-tour .vc_element.vc_vc_tta_section {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.vc_element.vc_empty .vc_tta-panel-body {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: @vc_tta-breakpoint-max) {
|
||||
.compose-mode .vc_tta-tabs .vc_move-vc_tta_section.vc_child-element-move .vc_btn-content {
|
||||
cursor: default !important;
|
||||
background-image: none !important;
|
||||
padding-left: 12px !important;
|
||||
|
||||
.vc-composer-icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ==================
|
||||
|
||||
// TTA container space
|
||||
.vc_vc_tta_accordion, .vc_vc_tta_tour {
|
||||
margin-top: @vc_frontend_editor_tta_container_top_margin;
|
||||
}
|
||||
|
||||
// Sorting fixes for Tabs list
|
||||
|
||||
.vc_tta-tabs-list.ui-sortable {
|
||||
.vc_tta-tab.ui-sortable-helper {
|
||||
a {
|
||||
&:before, &:after {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,166 @@
|
||||
/* Control Icons For Accordions
|
||||
* ============================= */
|
||||
.vc_tta {
|
||||
.vc_tta-controls-icon {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
height: @vc_tta-control-icon-size;
|
||||
width: @vc_tta-control-icon-size;
|
||||
position: relative;
|
||||
font-size: inherit;
|
||||
margin: 0;
|
||||
&:before,
|
||||
&:after {
|
||||
-webkit-transition: all .2s ease-in-out;
|
||||
transition: all .2s ease-in-out;
|
||||
}
|
||||
}
|
||||
.vc_tta-title-text:not(:empty) {
|
||||
~ .vc_tta-controls-icon {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Control Icons
|
||||
* ============================= */
|
||||
.vc_tta {
|
||||
.vc_tta-controls-icon {
|
||||
// Plus Control Icon
|
||||
&.vc_tta-controls-icon-plus {
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
-webkit-transform: translateY(-50%);
|
||||
-ms-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
border-style: solid;
|
||||
border-width: @vc_tta-control-icon-width 0 0 0;
|
||||
}
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
-webkit-transform: translateX(-50%);
|
||||
-ms-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
border-style: solid;
|
||||
border-width: 0 0 0 @vc_tta-control-icon-width;
|
||||
}
|
||||
}
|
||||
// Chevron Control Icon
|
||||
&.vc_tta-controls-icon-chevron {
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
left: @vc_tta-control-icon-width;
|
||||
right: @vc_tta-control-icon-width;
|
||||
top: @vc_tta-control-icon-width;
|
||||
bottom: @vc_tta-control-icon-width;
|
||||
border-style: solid;
|
||||
border-width: 0 @vc_tta-control-icon-width @vc_tta-control-icon-width 0;
|
||||
-webkit-transform: rotate(45deg) translate(-25%, -25%);
|
||||
-ms-transform: rotate(45deg) translate(-25%, -25%);
|
||||
transform: rotate(45deg) translate(-25%, -25%);
|
||||
}
|
||||
}
|
||||
// Triangle Control Icon
|
||||
&.vc_tta-controls-icon-triangle {
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
border-style: solid;
|
||||
border-width: floor(@vc_tta-control-icon-size / 2);
|
||||
border-bottom-color: transparent !important;
|
||||
border-right-color: transparent !important;
|
||||
border-left-color: transparent !important;
|
||||
-webkit-transform: translateY(25%);
|
||||
-ms-transform: translateY(25%);
|
||||
transform: translateY(25%);
|
||||
}
|
||||
}
|
||||
}
|
||||
// active icon
|
||||
.vc_active {
|
||||
.vc_tta-controls-icon {
|
||||
// Plus Control Icon
|
||||
&.vc_tta-controls-icon-plus {
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
// Chevron Control Icon
|
||||
&.vc_tta-controls-icon-chevron {
|
||||
&::before {
|
||||
-webkit-transform: rotate(225deg) translate(-25%, -25%);
|
||||
-ms-transform: rotate(225deg) translate(-25%, -25%);
|
||||
transform: rotate(225deg) translate(-25%, -25%);
|
||||
}
|
||||
}
|
||||
// Triangle Control Icon
|
||||
&.vc_tta-controls-icon-triangle {
|
||||
&::before {
|
||||
-webkit-transform: rotate(180deg) translateY(25%);
|
||||
-ms-transform: rotate(180deg) translateY(25%);
|
||||
transform: rotate(180deg) translateY(25%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Control Icons Positions
|
||||
* ============================= */
|
||||
.vc_tta {
|
||||
&.vc_tta-accordion {
|
||||
// Icon From Left
|
||||
.vc_tta-controls-icon-position-left {
|
||||
&.vc_tta-panel-title {
|
||||
> a {
|
||||
padding-left: @vc_tta-panels-padding-horizontal + @vc_tta-icon-spacing + @vc_tta-control-icon-size;
|
||||
}
|
||||
}
|
||||
.vc_tta-controls-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
-webkit-transform: translateY(-50%);
|
||||
-ms-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
left: @vc_tta-panels-padding-horizontal;
|
||||
}
|
||||
}
|
||||
// Icon From Right
|
||||
.vc_tta-controls-icon-position-right {
|
||||
&.vc_tta-panel-title {
|
||||
> a {
|
||||
padding-right: @vc_tta-panels-padding-horizontal * 1.5 + @vc_tta-control-icon-size;
|
||||
}
|
||||
}
|
||||
.vc_tta-controls-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
-webkit-transform: translateY(-50%);
|
||||
-ms-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
right: @vc_tta-panels-padding-horizontal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,454 @@
|
||||
//
|
||||
// Mixins
|
||||
// =====================
|
||||
|
||||
// Make Colors Set
|
||||
// ==========================
|
||||
.vc_tta-make-colors-set(@selector; @color; @background; @background-border; @border; @text; @contrast; @content) {
|
||||
.@{selector} {
|
||||
// Classic Style
|
||||
// ------------------------
|
||||
&.vc_tta-style-classic {
|
||||
.vc_tta-make-panel-color(
|
||||
@border: @border;
|
||||
@border-active: @background-border;
|
||||
@background: @color;
|
||||
@background-active: @background;
|
||||
@text: @contrast;
|
||||
@text-active: @text;
|
||||
);
|
||||
.vc_tta-make-tabs-color(
|
||||
@border: @border;
|
||||
@border-active: @background-border;
|
||||
@background: @color;
|
||||
@background-active: @background;
|
||||
@text: @contrast;
|
||||
@text-active: @text;
|
||||
);
|
||||
}
|
||||
|
||||
// Modern Style
|
||||
// ------------------------
|
||||
&.vc_tta-style-modern {
|
||||
.vc_tta-make-panel-color(
|
||||
@border: @border;
|
||||
@border-active: @background-border;
|
||||
@background: @color;
|
||||
@background-active: @background;
|
||||
@text: @contrast;
|
||||
@text-active: @text;
|
||||
);
|
||||
.vc_tta-make-tabs-color(
|
||||
@border: @border;
|
||||
@border-active: @background-border;
|
||||
@background: @color;
|
||||
@background-active: @background;
|
||||
@text: @contrast;
|
||||
@text-active: @text;
|
||||
);
|
||||
}
|
||||
|
||||
// Outline Style
|
||||
// ------------------------
|
||||
&.vc_tta-style-outline {
|
||||
.vc_tta-make-panel-color(
|
||||
@text: @color;
|
||||
@text-hover: @contrast;
|
||||
@text-active: @color;
|
||||
@border: @color;
|
||||
@border-active: @color;
|
||||
@background: transparent;
|
||||
@background-active: transparent;
|
||||
@background-hover: @color;
|
||||
);
|
||||
.vc_tta-make-tabs-color(
|
||||
@text: @color;
|
||||
@text-hover: @contrast;
|
||||
@text-active: @color;
|
||||
@border: @color;
|
||||
@border-active: @color;
|
||||
@background: transparent;
|
||||
@background-active: transparent;
|
||||
@background-hover: @color;
|
||||
);
|
||||
}
|
||||
|
||||
// Flat Style
|
||||
// ------------------------
|
||||
&.vc_tta-style-flat {
|
||||
.vc_tta-make-panel-color(
|
||||
@background: darken(@color, 3%);
|
||||
@background-active: @color;
|
||||
@background-hover: darken(@color, 6%);
|
||||
@text: @contrast;
|
||||
@text-active: @contrast;
|
||||
@content-color: @contrast;
|
||||
);
|
||||
.vc_tta-make-tabs-color(
|
||||
@background: darken(@color, 3%);
|
||||
@background-active: @color;
|
||||
@background-hover: darken(@color, 6%);
|
||||
@text: @contrast;
|
||||
@text-active: @contrast;
|
||||
@content-color: @contrast;
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Make Panels Color
|
||||
// ==========================
|
||||
.vc_tta-make-panel-color( @border:false; @border-active:false; @border-hover: false;
|
||||
@background: false; @background-active: false; @background-hover: false;
|
||||
@text: false; @text-active: false; @text-hover: false;
|
||||
@content-color: false; ) {
|
||||
// Colors For Panels
|
||||
// -------------------------
|
||||
.vc_tta-panel {
|
||||
// Colors For Panel Title
|
||||
// -------------------------
|
||||
.vc_tta-panel-heading {
|
||||
& when not (@border = false) {
|
||||
border-color: @border;
|
||||
}
|
||||
& when not (@background = false) {
|
||||
background-color: @background;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
& when not (@border-hover = false) {
|
||||
border-color: @border-hover;
|
||||
}
|
||||
& when (@background-hover = false) and not (@background = false) {
|
||||
background-color: darken(@background, 3%);
|
||||
}
|
||||
& when not (@background-hover = false) {
|
||||
background-color: @background-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
.vc_tta-panel-title {
|
||||
> a {
|
||||
& when not (@text = false) {
|
||||
color: @text;
|
||||
}
|
||||
&:hover {
|
||||
& when not (@text-hover = false) {
|
||||
color: @text-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Active Panel
|
||||
&.vc_active {
|
||||
.vc_tta-panel-heading {
|
||||
& when not (@border-active = false) {
|
||||
border-color: @border-active;
|
||||
}
|
||||
& when not (@background-active = false) {
|
||||
background-color: @background-active;
|
||||
}
|
||||
}
|
||||
.vc_tta-panel-title {
|
||||
> a {
|
||||
& when not (@text-active = false) {
|
||||
color: @text-active;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Colors For Panel Body
|
||||
// -------------------------
|
||||
.vc_tta-panel-body {
|
||||
& when not (@border-active = false) {
|
||||
&,
|
||||
&::before,
|
||||
&::after {
|
||||
border-color: @border-active;
|
||||
}
|
||||
}
|
||||
& when not (@background-active = false) {
|
||||
background-color: @background-active;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Color For Content
|
||||
// ------------------------
|
||||
&:not(.vc_tta-o-no-fill) .vc_tta-panel-body {
|
||||
& when not (@content-color = false) {
|
||||
color: @content-color;
|
||||
}
|
||||
}
|
||||
// Color For Control Icon
|
||||
// ------------------------
|
||||
.vc_tta-controls-icon {
|
||||
&::before,
|
||||
&::after {
|
||||
& when not (@text = false) {
|
||||
border-color: @text;
|
||||
}
|
||||
}
|
||||
}
|
||||
.vc_tta-panel-heading {
|
||||
&:hover,
|
||||
&:focus {
|
||||
.vc_tta-controls-icon {
|
||||
&::before,
|
||||
&::after {
|
||||
& when not (@text-hover = false) {
|
||||
border-color: @text-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.vc_active .vc_tta-panel-heading {
|
||||
.vc_tta-controls-icon {
|
||||
&::before,
|
||||
&::after {
|
||||
border-color: @text-active;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Make Tabs Color
|
||||
// ==========================
|
||||
.vc_tta-make-tabs-color( @border:false; @border-active:false; @border-hover: false;
|
||||
@background: false; @background-active: false; @background-hover: false;
|
||||
@text: false; @text-active: false; @text-hover: false;
|
||||
@content-color: false; ) {
|
||||
// Colors For Tabs
|
||||
// -------------------------
|
||||
.vc_tta-tab {
|
||||
> a {
|
||||
& when not (@border = false) {
|
||||
border-color: @border;
|
||||
}
|
||||
& when not (@background = false) {
|
||||
background-color: @background;
|
||||
}
|
||||
& when not (@text = false) {
|
||||
color: @text;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
& when not (@border-hover = false) {
|
||||
border-color: @border-hover;
|
||||
}
|
||||
& when (@background-hover = false) and not (@background = false) {
|
||||
background-color: darken(@background, 6%);
|
||||
}
|
||||
& when not (@background-hover = false) {
|
||||
background-color: @background-hover;
|
||||
}
|
||||
& when not (@text-hover = false) {
|
||||
color: @text-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Active Tab
|
||||
&.vc_active {
|
||||
> a {
|
||||
& when not (@border-active = false) {
|
||||
border-color: @border-active;
|
||||
}
|
||||
& when not (@background-active = false) {
|
||||
background-color: @background-active;
|
||||
}
|
||||
& when not (@text-active = false) {
|
||||
color: @text-active;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Colors For Panels When Tabs Active
|
||||
// -------------------------
|
||||
&.vc_tta-tabs {
|
||||
//.vc_non_responsive must be exactly same as @media below
|
||||
.vc_non_responsive &,
|
||||
.vc_tta-o-non-responsive & {
|
||||
.vc_tta-panels {
|
||||
& when not (@border-active = false) {
|
||||
&,
|
||||
&::before,
|
||||
&::after {
|
||||
border-color: @border-active;
|
||||
}
|
||||
}
|
||||
& when not (@background-active = false) {
|
||||
background-color: @background-active;
|
||||
}
|
||||
// Colors For Panel Body
|
||||
// -------------------------
|
||||
.vc_tta-panel-body {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (min-width: @vc_tta-breakpoint) {
|
||||
.vc_tta-panels {
|
||||
& when not (@border-active = false) {
|
||||
&,
|
||||
&::before,
|
||||
&::after {
|
||||
border-color: @border-active;
|
||||
}
|
||||
}
|
||||
& when not (@background-active = false) {
|
||||
background-color: @background-active;
|
||||
}
|
||||
// Colors For Panel Body
|
||||
// -------------------------
|
||||
.vc_tta-panel-body {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Make shape
|
||||
// ===============================
|
||||
.vc_tta-make-shape(@border-radius) {
|
||||
// for panels
|
||||
.vc_tta-panel-body {
|
||||
min-height: @border-radius * 2;
|
||||
}
|
||||
.vc_tta-panel-body,
|
||||
.vc_tta-panel-heading {
|
||||
border-radius: @border-radius;
|
||||
}
|
||||
// for tabs
|
||||
.vc_tta-tabs-container {
|
||||
margin: @border-radius;
|
||||
}
|
||||
.vc_tta-tab {
|
||||
> a {
|
||||
border-radius: @border-radius;
|
||||
}
|
||||
}
|
||||
// Panels When Tabs Active
|
||||
&.vc_tta-tabs {
|
||||
//.vc_non_responsive must be exactly same as @media below
|
||||
.vc_non_responsive &,
|
||||
.vc_tta-o-non-responsive & {
|
||||
.vc_tta-panels {
|
||||
border-radius: @border-radius;
|
||||
}
|
||||
}
|
||||
@media (min-width: @vc_tta-breakpoint) {
|
||||
.vc_tta-panels {
|
||||
border-radius: @border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.vc_tta-o-no-fill {
|
||||
.vc_tta-panel-body {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
// Fix For Panels With No Fill And Shape Group Option
|
||||
&.vc_tta-o-shape-group.vc_tta-o-no-fill {
|
||||
.vc_tta-panel.vc_active {
|
||||
+ .vc_tta-panel:not(:first-child):not(:last-child),
|
||||
+ .vc_tta-panel:last-child:not(:first-child) {
|
||||
.vc_tta-panel-heading {
|
||||
border-top-left-radius: @border-radius;
|
||||
border-top-right-radius: @border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Make TTA Spacings
|
||||
// ==========================
|
||||
.vc_tta-make-spacing(@spacing) {
|
||||
&.vc_tta-spacing-@{spacing} {
|
||||
// Spacing Between Panel Heading And Panel Body
|
||||
// --------------------------------------------------
|
||||
.vc_tta-panel {
|
||||
&:not(:first-child),
|
||||
&.vc_active + .vc_tta-panel {
|
||||
.vc_tta-panel-heading {
|
||||
margin-top: unit(@spacing, px);
|
||||
}
|
||||
}
|
||||
&:not(:last-child),
|
||||
&.vc_active {
|
||||
.vc_tta-panel-heading {
|
||||
margin-bottom: unit(@spacing, px);
|
||||
}
|
||||
}
|
||||
}
|
||||
// Spacing Between Tabs
|
||||
// --------------------------------------------------
|
||||
.vc_tta-tabs-list {
|
||||
padding: 0;
|
||||
margin-top: -(unit(ceil(@spacing / 2), px));
|
||||
margin-bottom: -(unit(floor(@spacing / 2), px));
|
||||
margin-left: -(unit(ceil(@spacing / 2), px));
|
||||
margin-right: -(unit(floor(@spacing / 2), px));
|
||||
}
|
||||
.vc_tta-tab {
|
||||
margin-top: unit(ceil(@spacing / 2), px);
|
||||
margin-bottom: unit(floor(@spacing / 2), px);
|
||||
margin-left: unit(ceil(@spacing / 2), px);
|
||||
margin-right: unit(floor(@spacing / 2), px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Make TTA Gaps
|
||||
// ==========================
|
||||
.vc_tta-make-gap(@spacing) {
|
||||
&.vc_tta-gap-@{spacing} {
|
||||
// Spacing Between Panel Heading And Panel Body
|
||||
// --------------------------------------------------
|
||||
.vc_tta-panel {
|
||||
&:not(:first-child),
|
||||
&.vc_active + .vc_tta-panel {
|
||||
.vc_tta-panel-heading {
|
||||
margin-top: unit(@spacing, px);
|
||||
}
|
||||
}
|
||||
&:not(:last-child):not(.vc_active) {
|
||||
.vc_tta-panel-heading {
|
||||
margin-bottom: unit(@spacing, px);
|
||||
}
|
||||
}
|
||||
}
|
||||
// Spacing Between Tabs List And Panels
|
||||
// --------------------------------------------------
|
||||
// top position
|
||||
&.vc_tta-tabs-position-top {
|
||||
.vc_tta-tabs-container {
|
||||
margin-bottom: unit(@spacing, px);
|
||||
}
|
||||
}
|
||||
// bottom position
|
||||
&.vc_tta-tabs-position-bottom {
|
||||
.vc_tta-tabs-container {
|
||||
margin-top: unit(@spacing, px);
|
||||
}
|
||||
}
|
||||
// left position
|
||||
&.vc_tta-tabs-position-left {
|
||||
.vc_tta-tabs-container {
|
||||
margin-right: unit(@spacing, px);
|
||||
}
|
||||
}
|
||||
// right position
|
||||
&.vc_tta-tabs-position-right {
|
||||
.vc_tta-tabs-container {
|
||||
margin-left: unit(@spacing, px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,947 @@
|
||||
/* Don't Fill Content With Colors
|
||||
* =================================== */
|
||||
.vc_tta {
|
||||
&.vc_tta-o-no-fill {
|
||||
.vc_tta-panels {
|
||||
.vc_tta-panel-body {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
// fix for tabs colors
|
||||
&.vc_tta-tabs {
|
||||
.vc_tta-panels {
|
||||
//.vc_non_responsive must be exactly same as @media below
|
||||
.vc_non_responsive &,
|
||||
.vc_tta-o-non-responsive & {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
@media (min-width: @vc_tta-breakpoint) {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.vc_tta-tabs .vc_tta-tabs-container {
|
||||
margin: 0;
|
||||
}
|
||||
&.vc_tta-tabs-position-top,
|
||||
&.vc_tta-tabs-position-bottom {
|
||||
.vc_tta-panel-body {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
&.vc_tta-tabs-position-left,
|
||||
&.vc_tta-tabs-position-right {
|
||||
.vc_tta-panel-body {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* TTA Spacings
|
||||
* =================================== */
|
||||
.vc_tta {
|
||||
.vc_tta-make-spacing(1);
|
||||
.vc_tta-make-spacing(2);
|
||||
.vc_tta-make-spacing(3);
|
||||
.vc_tta-make-spacing(4);
|
||||
.vc_tta-make-spacing(5);
|
||||
.vc_tta-make-spacing(10);
|
||||
.vc_tta-make-spacing(15);
|
||||
.vc_tta-make-spacing(20);
|
||||
.vc_tta-make-spacing(25);
|
||||
.vc_tta-make-spacing(30);
|
||||
.vc_tta-make-spacing(35);
|
||||
}
|
||||
|
||||
/* TTA Gaps
|
||||
* =================================== */
|
||||
.vc_tta {
|
||||
.vc_tta-make-gap(1);
|
||||
.vc_tta-make-gap(2);
|
||||
.vc_tta-make-gap(3);
|
||||
.vc_tta-make-gap(4);
|
||||
.vc_tta-make-gap(5);
|
||||
.vc_tta-make-gap(10);
|
||||
.vc_tta-make-gap(15);
|
||||
.vc_tta-make-gap(20);
|
||||
.vc_tta-make-gap(25);
|
||||
.vc_tta-make-gap(30);
|
||||
.vc_tta-make-gap(35);
|
||||
}
|
||||
|
||||
/* Positions For Tabs
|
||||
* ========================== */
|
||||
.vc_tta-tabs {
|
||||
// Tabs On Top
|
||||
// ------------------------
|
||||
&.vc_tta-tabs-position-top {
|
||||
// For Tabs
|
||||
.vc_tta-tabs-container {
|
||||
overflow: hidden;
|
||||
}
|
||||
.vc_tta-tabs-list {
|
||||
overflow: hidden;
|
||||
}
|
||||
// For Panels
|
||||
.vc_tta-panel-body {
|
||||
&,
|
||||
.vc_non_responsive &,
|
||||
.vc_tta-o-non-responsive & {
|
||||
&::before {
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-right-width: 0;
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
&::after {
|
||||
left: auto;
|
||||
bottom: auto;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-left-width: 0;
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Fix For Shape Group
|
||||
&.vc_tta-o-shape-group {
|
||||
.vc_tta-tab:not(:first-child):not(:last-child) {
|
||||
> a {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
.vc_tta-tab:first-child {
|
||||
&:not(:last-child) {
|
||||
> a {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.vc_tta-tab:last-child {
|
||||
&:not(:first-child) {
|
||||
> a {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Tabs On Bottom
|
||||
// ------------------------
|
||||
&.vc_tta-tabs-position-bottom {
|
||||
// For Tabs
|
||||
.vc_tta-tabs-container {
|
||||
overflow: hidden;
|
||||
}
|
||||
.vc_tta-tabs-list {
|
||||
overflow: hidden;
|
||||
}
|
||||
// For Panels
|
||||
.vc_tta-panel-body {
|
||||
&,
|
||||
.vc_non_responsive &,
|
||||
.vc_tta-o-non-responsive & {
|
||||
&::before {
|
||||
right: auto;
|
||||
top: auto;
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-right-width: 0;
|
||||
border-top-width: 0;
|
||||
}
|
||||
&::after {
|
||||
left: auto;
|
||||
top: auto;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-left-width: 0;
|
||||
border-top-width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Fix For Shape Group
|
||||
&.vc_tta-o-shape-group {
|
||||
.vc_tta-tab:not(:first-child):not(:last-child) {
|
||||
> a {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
.vc_tta-tab:first-child {
|
||||
&:not(:last-child) {
|
||||
> a {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.vc_tta-tab:last-child {
|
||||
&:not(:first-child) {
|
||||
> a {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Tabs On Left Side
|
||||
// ------------------------
|
||||
&.vc_tta-tabs-position-left {
|
||||
// For Tabs
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
.vc_tta-tabs-container {
|
||||
overflow: hidden;
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 0 auto;
|
||||
-ms-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
margin-top: 0;
|
||||
margin-left: 0;
|
||||
//.vc_non_responsive must be exactly same as @media below
|
||||
.vc_non_responsive &,
|
||||
.vc_tta-o-non-responsive & {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
@media (min-width: @vc_tta-breakpoint) {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
.vc_tta-tabs-list {
|
||||
overflow: hidden;
|
||||
.vc_non_responsive &,
|
||||
.vc_tta-o-non-responsive & {
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex-grow: 1;
|
||||
-ms-flex-positive: 1;
|
||||
flex-grow: 1;
|
||||
}
|
||||
@media (min-width: @vc_tta-breakpoint) {
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex-grow: 1;
|
||||
-ms-flex-positive: 1;
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
.vc_tta-tab {
|
||||
display: block;
|
||||
}
|
||||
// For Panels
|
||||
.vc_tta-panels-container {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
min-width: 0; // FF bug fix for flexbox width
|
||||
}
|
||||
.vc_tta-panels {
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex-grow: 1;
|
||||
-ms-flex-positive: 1;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.vc_tta-panel-body {
|
||||
&,
|
||||
.vc_non_responsive &,
|
||||
.vc_tta-o-non-responsive & {
|
||||
&::before {
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-right-width: 0;
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
&::after {
|
||||
right: auto;
|
||||
top: auto;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-right-width: 0;
|
||||
border-top-width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Fix For Shape Group
|
||||
&.vc_tta-o-shape-group {
|
||||
.vc_tta-tab:not(:first-child):not(:last-child) {
|
||||
> a {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
.vc_tta-tab:first-child {
|
||||
&:not(:last-child) {
|
||||
> a {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.vc_tta-tab:last-child {
|
||||
&:not(:first-child) {
|
||||
> a {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Tabs On Right Side
|
||||
// ------------------------
|
||||
&.vc_tta-tabs-position-right {
|
||||
// For Tabs
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
.vc_tta-tabs-container {
|
||||
overflow: hidden;
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 0 auto;
|
||||
-ms-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
margin-top: 0;
|
||||
margin-right: 0;
|
||||
//.vc_non_responsive must be exactly same as @media below
|
||||
.vc_non_responsive &,
|
||||
.vc_tta-o-non-responsive & {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
@media (min-width: @vc_tta-breakpoint) {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
.vc_tta-tabs-list {
|
||||
overflow: hidden;
|
||||
.vc_non_responsive &,
|
||||
.vc_tta-o-non-responsive & {
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex-grow: 1;
|
||||
-ms-flex-positive: 1;
|
||||
flex-grow: 1;
|
||||
}
|
||||
@media (min-width: @vc_tta-breakpoint) {
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex-grow: 1;
|
||||
-ms-flex-positive: 1;
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
.vc_tta-tab {
|
||||
display: block;
|
||||
}
|
||||
// For Panels
|
||||
.vc_tta-panels-container {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
min-width: 0; // FF bug fix for flexbox width
|
||||
}
|
||||
.vc_tta-panels {
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex-grow: 1;
|
||||
-ms-flex-positive: 1;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.vc_tta-panel-body {
|
||||
&,
|
||||
.vc_non_responsive &,
|
||||
.vc_tta-o-non-responsive & {
|
||||
&::before {
|
||||
left: auto;
|
||||
bottom: auto;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-left-width: 0;
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
&::after {
|
||||
left: auto;
|
||||
top: auto;
|
||||
border-top-right-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-left-width: 0;
|
||||
border-top-width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Fix For Shape Group
|
||||
&.vc_tta-o-shape-group {
|
||||
.vc_tta-tab:not(:first-child):not(:last-child) {
|
||||
> a {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
.vc_tta-tab:first-child {
|
||||
&:not(:last-child) {
|
||||
> a {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.vc_tta-tab:last-child {
|
||||
&:not(:first-child) {
|
||||
> a {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Positions Fixes For Tabs
|
||||
* ========================== */
|
||||
.vc_tta-tabs {
|
||||
// Tabs With Gaps
|
||||
// ------------------------
|
||||
&[class*="vc_tta-gap"],
|
||||
&.vc_tta-o-no-fill {
|
||||
.vc_tta-panel-body {
|
||||
&,
|
||||
.vc_non_responsive &,
|
||||
.vc_tta-o-non-responsive & {
|
||||
&::before,
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
// fix for tabs positioning
|
||||
.vc_tta-tabs-container,
|
||||
.vc_tta-tabs-list {
|
||||
overflow: initial;
|
||||
}
|
||||
}
|
||||
|
||||
// Tabs Without Gaps
|
||||
// ------------------------
|
||||
&:not([class*="vc_tta-gap"]):not(.vc_tta-o-no-fill) {
|
||||
// Position Top
|
||||
// ---------------------
|
||||
&.vc_tta-tabs-position-top {
|
||||
.vc_tta-tab {
|
||||
> a {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
&.vc_active {
|
||||
> a {
|
||||
border-bottom-color: transparent;
|
||||
&::before {
|
||||
display: block;
|
||||
height: auto;
|
||||
top: 100%;
|
||||
right: 100%;
|
||||
border-bottom: 0;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
&::after {
|
||||
display: block;
|
||||
height: auto;
|
||||
top: 100%;
|
||||
left: 100%;
|
||||
border-bottom: 0;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.vc_tta-tabs-container {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
// margin-bottom for TTA Styles
|
||||
&.vc_tta-style-classic,
|
||||
&.vc_tta-style-modern {
|
||||
.vc_tta-tabs-container {
|
||||
margin-bottom: -@vc_tta-border-size;
|
||||
}
|
||||
}
|
||||
&.vc_tta-style-outline {
|
||||
.vc_tta-tabs-container {
|
||||
margin-bottom: -@vc_tta-border-size-outline;
|
||||
}
|
||||
|
||||
&:not(.vc_tta-pageable) {
|
||||
.vc_tta-panels {
|
||||
border-top-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Position Bottom
|
||||
// ---------------------
|
||||
&.vc_tta-tabs-position-bottom {
|
||||
.vc_tta-tab {
|
||||
> a {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
&.vc_active {
|
||||
> a {
|
||||
border-top-color: transparent;
|
||||
&::before {
|
||||
display: block;
|
||||
height: auto;
|
||||
bottom: 100%;
|
||||
right: 100%;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
&::after {
|
||||
display: block;
|
||||
height: auto;
|
||||
bottom: 100%;
|
||||
left: 100%;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.vc_tta-tabs-container {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
// margin-bottom for TTA Styles
|
||||
&.vc_tta-style-classic,
|
||||
&.vc_tta-style-modern {
|
||||
.vc_tta-tabs-container {
|
||||
margin-top: -@vc_tta-border-size;
|
||||
}
|
||||
}
|
||||
&.vc_tta-style-outline {
|
||||
.vc_tta-tabs-container {
|
||||
margin-top: -@vc_tta-border-size-outline;
|
||||
}
|
||||
|
||||
&:not(.vc_tta-pageable) {
|
||||
.vc_tta-panels {
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Position Left
|
||||
// ---------------------
|
||||
&.vc_tta-tabs-position-left {
|
||||
.vc_tta-tab {
|
||||
> a {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
&.vc_active {
|
||||
> a {
|
||||
border-right-color: transparent;
|
||||
&::before {
|
||||
display: block;
|
||||
width: auto;
|
||||
left: 100%;
|
||||
bottom: 100%;
|
||||
border-bottom: 0;
|
||||
border-top: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
&::after {
|
||||
display: block;
|
||||
width: auto;
|
||||
left: 100%;
|
||||
top: 100%;
|
||||
border-bottom: 0;
|
||||
border-top: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.vc_tta-tabs-container {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
// margin-bottom for TTA Styles
|
||||
&.vc_tta-style-classic,
|
||||
&.vc_tta-style-modern {
|
||||
.vc_tta-tabs-container {
|
||||
margin-right: -@vc_tta-border-size;
|
||||
}
|
||||
}
|
||||
&.vc_tta-style-outline {
|
||||
.vc_tta-tabs-container {
|
||||
margin-right: -@vc_tta-border-size-outline;
|
||||
}
|
||||
.vc_tta-panels {
|
||||
border-left-color: transparent;
|
||||
}
|
||||
}
|
||||
// Fixes For Shapes
|
||||
// Rounded
|
||||
&.vc_tta-shape-rounded,
|
||||
&.vc_tta-shape-round {
|
||||
.vc_tta-panels {
|
||||
margin-top: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
.vc_tta-panel-body {
|
||||
&,
|
||||
.vc_non_responsive &,
|
||||
.vc_tta-o-non-responsive & {
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
// Position Right
|
||||
// ---------------------
|
||||
&.vc_tta-tabs-position-right {
|
||||
.vc_tta-tab {
|
||||
> a {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
&.vc_active {
|
||||
> a {
|
||||
border-left-color: transparent;
|
||||
&::before {
|
||||
display: block;
|
||||
width: auto;
|
||||
right: 100%;
|
||||
bottom: 100%;
|
||||
border-bottom: 0;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
&::after {
|
||||
display: block;
|
||||
width: auto;
|
||||
right: 100%;
|
||||
top: 100%;
|
||||
border-bottom: 0;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.vc_tta-tabs-container {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
// margin-bottom for TTA Styles
|
||||
&.vc_tta-style-classic,
|
||||
&.vc_tta-style-modern {
|
||||
.vc_tta-tabs-container {
|
||||
margin-left: -@vc_tta-border-size;
|
||||
}
|
||||
}
|
||||
&.vc_tta-style-outline {
|
||||
.vc_tta-tabs-container {
|
||||
margin-left: -@vc_tta-border-size-outline;
|
||||
}
|
||||
.vc_tta-panels {
|
||||
border-right-color: transparent;
|
||||
}
|
||||
}
|
||||
// Fixes For Shapes
|
||||
// Rounded
|
||||
&.vc_tta-shape-rounded,
|
||||
&.vc_tta-shape-round {
|
||||
.vc_tta-panels {
|
||||
margin-top: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
.vc_tta-panel-body {
|
||||
&,
|
||||
.vc_non_responsive &,
|
||||
.vc_tta-o-non-responsive & {
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Sizes For Tabs
|
||||
* ========================== */
|
||||
.vc_tta-tabs {
|
||||
// Tabs On Left and Right Side (Tours Sizes)
|
||||
// ------------------------
|
||||
&.vc_tta-tabs-position-left,
|
||||
&.vc_tta-tabs-position-right {
|
||||
// Tabs Size XS
|
||||
&.vc_tta-controls-size-xs {
|
||||
.vc_tta-tabs-container {
|
||||
-webkit-flex-basis: @vc_tta-controls-size-xs;
|
||||
-ms-flex-preferred-size: @vc_tta-controls-size-xs;
|
||||
flex-basis: @vc_tta-controls-size-xs;
|
||||
}
|
||||
}
|
||||
// Tabs Size SM
|
||||
&.vc_tta-controls-size-sm {
|
||||
.vc_tta-tabs-container {
|
||||
flex-basis: @vc_tta-controls-size-sm;
|
||||
}
|
||||
}
|
||||
// Tabs Size MD
|
||||
&.vc_tta-controls-size-md {
|
||||
.vc_tta-tabs-container {
|
||||
flex-basis: @vc_tta-controls-size-md;
|
||||
}
|
||||
}
|
||||
// Tabs Size LG
|
||||
&.vc_tta-controls-size-lg {
|
||||
.vc_tta-tabs-container {
|
||||
flex-basis: @vc_tta-controls-size-lg;
|
||||
}
|
||||
}
|
||||
// Tabs Size XL
|
||||
&.vc_tta-controls-size-xl {
|
||||
.vc_tta-tabs-container {
|
||||
flex-basis: @vc_tta-controls-size-xl;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Controls Alignments
|
||||
* =================================== */
|
||||
.vc_tta {
|
||||
// Tabs Align Left
|
||||
// ------------------------
|
||||
&.vc_tta-controls-align-left {
|
||||
.vc_tta-tabs-container,
|
||||
.vc_tta-panel-heading {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
// Tabs Align right
|
||||
// ------------------------
|
||||
&.vc_tta-controls-align-right {
|
||||
.vc_tta-tabs-container,
|
||||
.vc_tta-panel-heading {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
// Tabs Align center
|
||||
// ------------------------
|
||||
&.vc_tta-controls-align-center {
|
||||
.vc_tta-tabs-container,
|
||||
.vc_tta-panel-heading {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Controls Alignments Fixes
|
||||
* ========================== */
|
||||
// Tabs Align Left
|
||||
// ------------------------
|
||||
.vc_tta-controls-align-left {
|
||||
&.vc_tta-tabs {
|
||||
// Tabs Position From Top
|
||||
&.vc_tta-tabs-position-top {
|
||||
.vc_tta-tabs-container {
|
||||
margin-left: 0;
|
||||
}
|
||||
.vc_tta-panel-body {
|
||||
&,
|
||||
.vc_non_responsive &,
|
||||
.vc_tta-o-non-responsive & {
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Tabs Without Gaps
|
||||
&:not([class*="vc_tta-gap"]):not(.vc_tta-o-no-fill) {
|
||||
.vc_tta-panels {
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Tabs Position From Bottom
|
||||
&.vc_tta-tabs-position-bottom {
|
||||
.vc_tta-tabs-container {
|
||||
margin-left: 0;
|
||||
}
|
||||
.vc_tta-panel-body {
|
||||
&,
|
||||
.vc_non_responsive &,
|
||||
.vc_tta-o-non-responsive & {
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Tabs Without Gaps
|
||||
&:not([class*="vc_tta-gap"]):not(.vc_tta-o-no-fill) {
|
||||
.vc_tta-panels {
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Tabs Align right
|
||||
// ------------------------
|
||||
.vc_tta-controls-align-right {
|
||||
&.vc_tta-tabs {
|
||||
// Tabs Position From Top
|
||||
&.vc_tta-tabs-position-top {
|
||||
.vc_tta-tabs-container {
|
||||
margin-right: 0;
|
||||
}
|
||||
.vc_tta-panel-body {
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
// Tabs Without Gaps
|
||||
&:not([class*="vc_tta-gap"]):not(.vc_tta-o-no-fill) {
|
||||
.vc_tta-panels {
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Tabs Position From Bottom
|
||||
&.vc_tta-tabs-position-bottom {
|
||||
.vc_tta-tabs-container {
|
||||
margin-right: 0;
|
||||
}
|
||||
.vc_tta-panel-body {
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
// Tabs Without Gaps
|
||||
&:not([class*="vc_tta-gap"]):not(.vc_tta-o-no-fill) {
|
||||
.vc_tta-panels {
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Tabs Align center
|
||||
// ------------------------
|
||||
.vc_tta-controls-align-center {
|
||||
|
||||
}
|
||||
|
||||
// Pagination
|
||||
// ------------------------
|
||||
.vc_tta-tabs {
|
||||
&.vc_tta-has-pagination {
|
||||
&:not(.vc_tta-tabs-position-bottom) {
|
||||
padding-bottom: @vc_tta-pagination-gap * 2;
|
||||
}
|
||||
.vc_pagination {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-top: @vc_tta-pagination-gap;
|
||||
margin-bottom: @vc_tta-pagination-gap;
|
||||
-webkit-transform: translateY(-50%);
|
||||
-ms-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
&.vc_tta-tabs-position-bottom {
|
||||
padding-top: @vc_tta-pagination-gap * 2;
|
||||
.vc_pagination {
|
||||
top: auto;
|
||||
bottom: 100%;
|
||||
-webkit-transform: translateY(50%);
|
||||
-ms-transform: translateY(50%);
|
||||
transform: translateY(50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
// Hide paging when TTA collapses to accordion (except pageable)
|
||||
// ==========================
|
||||
@media (max-width: @vc_tta-breakpoint) {
|
||||
.vc_tta-container {
|
||||
.vc_tta:not([class*="vc_tta-pageable"]) {
|
||||
.vc_pagination {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,170 @@
|
||||
// Variables
|
||||
// ----------------------------------------------------------
|
||||
@vc_tta-font-size: 1em;
|
||||
@vc_tta-icon-font-size: 1.15em;
|
||||
@vc_tta-icon-spacing: @vc_tta-tabs-padding-vertical;
|
||||
@vc_tta-border-size: 1px;
|
||||
@vc_tta-border-size-outline: 2px;
|
||||
@vc_tta-tabs-padding-vertical: 14px;
|
||||
@vc_tta-tabs-padding-horizontal: 20px;
|
||||
@vc_tta-panels-padding-vertical: @vc_tta-tabs-padding-vertical;
|
||||
@vc_tta-panels-padding-horizontal: @vc_tta-tabs-padding-horizontal;
|
||||
@vc_tta-panes-padding-vertical: @vc_tta-tabs-padding-vertical;
|
||||
@vc_tta-panes-padding-horizontal: @vc_tta-tabs-padding-horizontal;
|
||||
@vc_tta-breakpoint: @grid-float-breakpoint;
|
||||
@vc_tta-breakpoint-max: (@vc_tta-breakpoint - 1);
|
||||
@vc_tta-border-radius-round: 2em;
|
||||
@vc_tta-border-radius-rounded: 5px;
|
||||
@vc_tta-pagination-gap: 30px;
|
||||
// Tabs sizes
|
||||
@vc_tta-controls-size-xs: 10%;
|
||||
@vc_tta-controls-size-sm: 20%;
|
||||
@vc_tta-controls-size-md: 30%;
|
||||
@vc_tta-controls-size-lg: 40%;
|
||||
@vc_tta-controls-size-xl: 50%;
|
||||
// z-index
|
||||
@vc_tta-tabs-z-index: 3;
|
||||
//
|
||||
@vc_tta-control-icon-width: 2px;
|
||||
@vc_tta-control-icon-size: 12px;
|
||||
|
||||
@vc_tta-common-background-color: #f8f8f8;
|
||||
@vc_tta-common-border-color: darken(@vc_tta-common-background-color, 3%);
|
||||
|
||||
//====== COLORS
|
||||
// blue
|
||||
@vc_tta-color-blue: @blue;
|
||||
@vc_tta-color-blue-bg: @vc_tta-common-background-color;
|
||||
@vc_tta-color-blue-bg-border: @vc_tta-common-border-color;
|
||||
@vc_tta-color-blue-border: darken(@vc_tta-color-blue, 3%);
|
||||
@vc_tta-color-blue-text: #666;
|
||||
@vc_tta-color-blue-contrast: #fff;
|
||||
@vc_tta-color-blue-content: #c9d2f0;
|
||||
// turquoise
|
||||
@vc_tta-color-turquoise: @turquoise;
|
||||
@vc_tta-color-turquoise-bg: @vc_tta-common-background-color;
|
||||
@vc_tta-color-turquoise-bg-border: @vc_tta-common-border-color;
|
||||
@vc_tta-color-turquoise-border: darken(@vc_tta-color-turquoise, 3%);
|
||||
@vc_tta-color-turquoise-text: #666;
|
||||
@vc_tta-color-turquoise-contrast: #fff;
|
||||
@vc_tta-color-turquoise-content: #d3f5f1;
|
||||
// pink
|
||||
@vc_tta-color-pink: @pink;
|
||||
@vc_tta-color-pink-bg: @vc_tta-common-background-color;
|
||||
@vc_tta-color-pink-bg-border: @vc_tta-common-border-color;
|
||||
@vc_tta-color-pink-border: darken(@vc_tta-color-pink, 3%);
|
||||
@vc_tta-color-pink-text: #666;
|
||||
@vc_tta-color-pink-contrast: #fff;
|
||||
@vc_tta-color-pink-content: #fcdbd7;
|
||||
// violet
|
||||
@vc_tta-color-violet: @violet;
|
||||
@vc_tta-color-violet-bg: @vc_tta-common-background-color;
|
||||
@vc_tta-color-violet-bg-border: @vc_tta-common-border-color;
|
||||
@vc_tta-color-violet-border: darken(@vc_tta-color-violet, 3%);
|
||||
@vc_tta-color-violet-text: #666;
|
||||
@vc_tta-color-violet-contrast: #fff;
|
||||
@vc_tta-color-violet-content: #e1d5f5;
|
||||
// peacoc
|
||||
@vc_tta-color-peacoc: @peacoc;
|
||||
@vc_tta-color-peacoc-bg: @vc_tta-common-background-color;
|
||||
@vc_tta-color-peacoc-bg-border: @vc_tta-common-border-color;
|
||||
@vc_tta-color-peacoc-border: darken(@vc_tta-color-peacoc, 3%);
|
||||
@vc_tta-color-peacoc-text: #666;
|
||||
@vc_tta-color-peacoc-contrast: #fff;
|
||||
@vc_tta-color-peacoc-content: #d0edf5;
|
||||
// chino
|
||||
@vc_tta-color-chino: @chino;
|
||||
@vc_tta-color-chino-bg: @vc_tta-common-background-color;
|
||||
@vc_tta-color-chino-bg-border: @vc_tta-common-border-color;
|
||||
@vc_tta-color-chino-border: darken(@vc_tta-color-chino, 3%);
|
||||
@vc_tta-color-chino-text: #666;
|
||||
@vc_tta-color-chino-contrast: #fff;
|
||||
@vc_tta-color-chino-content: #f7f3eb;
|
||||
// mulled_wine
|
||||
@vc_tta-color-mulled-wine: @mulled_wine;
|
||||
@vc_tta-color-mulled-wine-bg: @vc_tta-common-background-color;
|
||||
@vc_tta-color-mulled-wine-bg-border: @vc_tta-common-border-color;
|
||||
@vc_tta-color-mulled-wine-border: darken(@vc_tta-color-mulled-wine, 3%);
|
||||
@vc_tta-color-mulled-wine-text: #666;
|
||||
@vc_tta-color-mulled-wine-contrast: #fff;
|
||||
@vc_tta-color-mulled-wine-content: #e2ddeb;
|
||||
// vista_blue
|
||||
@vc_tta-color-vista-blue: @vista_blue;
|
||||
@vc_tta-color-vista-blue-bg: @vc_tta-common-background-color;
|
||||
@vc_tta-color-vista-blue-bg-border: @vc_tta-common-border-color;
|
||||
@vc_tta-color-vista-blue-border: darken(@vc_tta-color-vista-blue, 3%);
|
||||
@vc_tta-color-vista-blue-text: #666;
|
||||
@vc_tta-color-vista-blue-contrast: #fff;
|
||||
@vc_tta-color-vista-blue-content: #e1f5e9;
|
||||
// orange
|
||||
@vc_tta-color-orange: @orange;
|
||||
@vc_tta-color-orange-bg: @vc_tta-common-background-color;
|
||||
@vc_tta-color-orange-bg-border: @vc_tta-common-border-color;
|
||||
@vc_tta-color-orange-border: darken(@vc_tta-color-orange, 3%);
|
||||
@vc_tta-color-orange-text: #666;
|
||||
@vc_tta-color-orange-contrast: #fff;
|
||||
@vc_tta-color-orange-content: #faf0e1;
|
||||
// sky
|
||||
@vc_tta-color-sky: @sky;
|
||||
@vc_tta-color-sky-bg: @vc_tta-common-background-color;
|
||||
@vc_tta-color-sky-bg-border: @vc_tta-common-border-color;
|
||||
@vc_tta-color-sky-border: darken(@vc_tta-color-sky, 3%);
|
||||
@vc_tta-color-sky-text: #666;
|
||||
@vc_tta-color-sky-contrast: #fff;
|
||||
@vc_tta-color-sky-content: #dce9f5;
|
||||
// green
|
||||
@vc_tta-color-green: @green;
|
||||
@vc_tta-color-green-bg: @vc_tta-common-background-color;
|
||||
@vc_tta-color-green-bg-border: @vc_tta-common-border-color;
|
||||
@vc_tta-color-green-border: darken(@vc_tta-color-green, 3%);
|
||||
@vc_tta-color-green-text: #666;
|
||||
@vc_tta-color-green-contrast: #fff;
|
||||
@vc_tta-color-green-content: #e5f2da;
|
||||
// juicy_pink
|
||||
@vc_tta-color-juicy-pink: @juicy_pink;
|
||||
@vc_tta-color-juicy-pink-bg: @vc_tta-common-background-color;
|
||||
@vc_tta-color-juicy-pink-bg-border: @vc_tta-common-border-color;
|
||||
@vc_tta-color-juicy-pink-border: darken(@vc_tta-color-juicy-pink, 3%);
|
||||
@vc_tta-color-juicy-pink-text: #666;
|
||||
@vc_tta-color-juicy-pink-contrast: #fff;
|
||||
@vc_tta-color-juicy-pink-content: #fce2e1;
|
||||
// sandy_brown
|
||||
@vc_tta-color-sandy-brown: @sandy_brown;
|
||||
@vc_tta-color-sandy-brown-bg: @vc_tta-common-background-color;
|
||||
@vc_tta-color-sandy-brown-bg-border: @vc_tta-common-border-color;
|
||||
@vc_tta-color-sandy-brown-border: darken(@vc_tta-color-sandy-brown, 3%);
|
||||
@vc_tta-color-sandy-brown-text: #666;
|
||||
@vc_tta-color-sandy-brown-contrast: #fff;
|
||||
@vc_tta-color-sandy-brown-content: #f7e1d7;
|
||||
// purple
|
||||
@vc_tta-color-purple: @purple;
|
||||
@vc_tta-color-purple-bg: @vc_tta-common-background-color;
|
||||
@vc_tta-color-purple-bg-border: @vc_tta-common-border-color;
|
||||
@vc_tta-color-purple-border: darken(@vc_tta-color-purple, 3%);
|
||||
@vc_tta-color-purple-text: #666;
|
||||
@vc_tta-color-purple-contrast: #fff;
|
||||
@vc_tta-color-purple-content: #f4dff5;
|
||||
// black
|
||||
@vc_tta-color-black: @black;
|
||||
@vc_tta-color-black-bg: @vc_tta-common-background-color;
|
||||
@vc_tta-color-black-bg-border: @vc_tta-common-border-color;
|
||||
@vc_tta-color-black-border: darken(@vc_tta-color-black, 3%);
|
||||
@vc_tta-color-black-text: #666;
|
||||
@vc_tta-color-black-contrast: #fff;
|
||||
@vc_tta-color-black-content: #d9d9d9;
|
||||
// grey
|
||||
@vc_tta-color-grey: @grey;
|
||||
@vc_tta-color-grey-bg: @vc_tta-common-background-color;
|
||||
@vc_tta-color-grey-bg-border: @vc_tta-common-border-color;
|
||||
@vc_tta-color-grey-border: darken(@vc_tta-color-grey, 3%);
|
||||
@vc_tta-color-grey-text: #666;
|
||||
@vc_tta-color-grey-contrast: #666;
|
||||
@vc_tta-color-grey-content: #9d9d9e;
|
||||
// white
|
||||
@vc_tta-color-white: @white;
|
||||
@vc_tta-color-white-bg: @vc_tta-common-background-color;
|
||||
@vc_tta-color-white-bg-border: @vc_tta-common-border-color;
|
||||
@vc_tta-color-white-border: darken(@vc_tta-color-white, 3%);
|
||||
@vc_tta-color-white-text: #666;
|
||||
@vc_tta-color-white-contrast: #666;
|
||||
@vc_tta-color-white-content: #9d9d9e;
|
||||
@@ -0,0 +1,51 @@
|
||||
// ALERT STYLES
|
||||
// ------------
|
||||
|
||||
// Base alert styles
|
||||
.wpb_alert {
|
||||
padding: 1em 35px 1em 14px;
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
|
||||
background-color: @warningBackground;
|
||||
border: 1px solid @warningBorder;
|
||||
.border-radius(2px);
|
||||
color: @warningText;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
// Alternate styles
|
||||
// ----------------
|
||||
.wpb_alert-success {
|
||||
background-color: @successBackground;
|
||||
border-color: @successBorder;
|
||||
color: @successText;
|
||||
}
|
||||
|
||||
.wpb_alert-danger,
|
||||
.wpb_alert-error {
|
||||
background-color: @errorBackground;
|
||||
border-color: @errorBorder;
|
||||
color: @errorText;
|
||||
}
|
||||
|
||||
.wpb_alert-info {
|
||||
background-color: @infoBackground;
|
||||
border-color: @infoBorder;
|
||||
color: @infoText;
|
||||
}
|
||||
|
||||
.wpb_alert .messagebox_text {
|
||||
padding-left: 28px;
|
||||
background: url(../vc/alert.png) no-repeat left center;
|
||||
}
|
||||
|
||||
.wpb_alert-info .messagebox_text {
|
||||
background: url(../vc/info.png) no-repeat left center;
|
||||
}
|
||||
|
||||
.wpb_alert-success .messagebox_text {
|
||||
background: url(../vc/tick.png) no-repeat left center;
|
||||
}
|
||||
|
||||
.wpb_alert-error .messagebox_text {
|
||||
background: url(../vc/exclamation.png) no-repeat left center;
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
&.vc_grid-filter-bordered, &.vc_grid-filter-bordered-rounded, &.vc_grid-filter-bordered-rounded-less {
|
||||
> .vc_grid-filter-item {
|
||||
margin: 0;
|
||||
border: 1px solid rgba(235, 235, 235, 0.8);
|
||||
border-collapse: collapse;
|
||||
&:nth-child(n+2) {
|
||||
margin-left: -1px;
|
||||
margin-top: -1px;
|
||||
}
|
||||
&:hover, &.vc_active {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
border-color: transparent;
|
||||
> a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.vc_grid-filter-bordered-rounded {
|
||||
> .vc_grid-filter-item {
|
||||
&:first-child {
|
||||
border-top-left-radius: 30px;
|
||||
border-bottom-left-radius: 30px;
|
||||
}
|
||||
&:last-child {
|
||||
border-top-right-radius: 30px;
|
||||
border-bottom-right-radius: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.vc_grid-filter-bordered-rounded-less {
|
||||
> .vc_grid-filter-item {
|
||||
&:first-child {
|
||||
border-top-left-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
}
|
||||
&:last-child {
|
||||
border-top-right-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
&.vc_grid-filter-default {
|
||||
> .vc_grid-filter-item {
|
||||
margin: 0 5px 5px 0;
|
||||
border-radius: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
&.vc_grid-filter-comma, &.vc_grid-filter- {
|
||||
.vc_grid-filter-item {
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
&.vc_grid-filter-default-less-rounded {
|
||||
> .vc_grid-filter-item {
|
||||
margin: 0 5px 5px 0;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
.vc_grid_filter_dropdown_color_variants(@selector, @text_color) {
|
||||
&.vc_grid-filter-color-@{selector} {
|
||||
.vc_arrow-icon-navicon {
|
||||
color: @text_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vc_grid-styled-select {
|
||||
.vc_arrow-icon-navicon {
|
||||
display: none;
|
||||
}
|
||||
select {
|
||||
outline: none;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: @screen-sm-min) {
|
||||
.vc_grid_filter_dropdown_color_variants(~'blue', @blue);
|
||||
.vc_grid_filter_dropdown_color_variants(~'turquoise', @turquoise);
|
||||
.vc_grid_filter_dropdown_color_variants(~'pink', @pink);
|
||||
.vc_grid_filter_dropdown_color_variants(~'violet', @violet);
|
||||
.vc_grid_filter_dropdown_color_variants(~'peacoc', @peacoc);
|
||||
.vc_grid_filter_dropdown_color_variants(~'chino', @chino);
|
||||
.vc_grid_filter_dropdown_color_variants(~'mulled_wine', @mulled_wine);
|
||||
.vc_grid_filter_dropdown_color_variants(~'vista_blue', @vista_blue);
|
||||
.vc_grid_filter_dropdown_color_variants(~'black', @black);
|
||||
.vc_grid_filter_dropdown_color_variants(~'grey', @grey);
|
||||
.vc_grid_filter_dropdown_color_variants(~'orange', @orange);
|
||||
.vc_grid_filter_dropdown_color_variants(~'sky', @sky);
|
||||
.vc_grid_filter_dropdown_color_variants(~'green', @green);
|
||||
.vc_grid_filter_dropdown_color_variants(~'juicy_pink', @juicy_pink);
|
||||
.vc_grid_filter_dropdown_color_variants(~'sandy_brown', @sandy_brown);
|
||||
.vc_grid_filter_dropdown_color_variants(~'purple', @purple);
|
||||
.vc_grid_filter_dropdown_color_variants(~'white', @white);
|
||||
|
||||
.vc_grid-styled-select {
|
||||
border: 1px solid #ccc;
|
||||
display: inline-block;
|
||||
height: 30px;
|
||||
overflow: hidden;
|
||||
padding-right: 5px;
|
||||
text-align: left;
|
||||
width: auto;
|
||||
vertical-align: middle;
|
||||
.vc_arrow-icon-navicon {
|
||||
font-size: 17px;
|
||||
display: inline;
|
||||
vertical-align: middle;
|
||||
}
|
||||
select {
|
||||
background: none repeat scroll 0 0 transparent;
|
||||
border: 0 none;
|
||||
border-radius: 0;
|
||||
height: 30px;
|
||||
line-height: 1;
|
||||
margin-right: -50px;
|
||||
padding: 5px;
|
||||
position: relative;
|
||||
font-size: 12px;
|
||||
z-index: 0;
|
||||
cursor: pointer;
|
||||
max-width: inherit !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
.vc_grid_filter_filled_color_variants(@selector, @active_background_color, @inactive_background_color, @active_text_color, @inactive_text_color) {
|
||||
&.vc_grid-filter-color-@{selector} {
|
||||
> .vc_grid-filter-item {
|
||||
background-color: @inactive_background_color;
|
||||
> span {
|
||||
color: @inactive_text_color;
|
||||
}
|
||||
&:hover, &.vc_active {
|
||||
background-color: @active_background_color;
|
||||
> span {
|
||||
color: @active_text_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.vc_grid-filter-filled, &.vc_grid-filter-filled-rounded {
|
||||
|
||||
.vc_grid_filter_filled_color_variants(~'blue', @blue, lighten(@blue, 10%), @white, @white);
|
||||
.vc_grid_filter_filled_color_variants(~'turquoise', @turquoise, darken(@turquoise, 10%), @white, @white);
|
||||
.vc_grid_filter_filled_color_variants(~'pink', @pink, lighten(@pink, 10%), @white, @white);
|
||||
.vc_grid_filter_filled_color_variants(~'violet', @violet, lighten(@violet, 10%), @white, @white);
|
||||
.vc_grid_filter_filled_color_variants(~'peacoc', @peacoc, lighten(@peacoc, 10%), @white, @white);
|
||||
.vc_grid_filter_filled_color_variants(~'chino', @chino, lighten(@chino, 10%), @white, @white);
|
||||
.vc_grid_filter_filled_color_variants(~'mulled_wine', @mulled_wine, lighten(@mulled_wine, 10%), @white, @white);
|
||||
.vc_grid_filter_filled_color_variants(~'vista_blue', @vista_blue, lighten(@vista_blue, 10%), @white, @white);
|
||||
.vc_grid_filter_filled_color_variants(~'black', @black, lighten(@black, 10%), @white, @white);
|
||||
.vc_grid_filter_filled_color_variants(~'grey', @grey, darken(@grey, 10%), #666666, #666666);
|
||||
.vc_grid_filter_filled_color_variants(~'orange', @orange, lighten(@orange, 10%), @white, @white);
|
||||
.vc_grid_filter_filled_color_variants(~'sky', @sky, lighten(@sky, 10%), @white, @white);
|
||||
.vc_grid_filter_filled_color_variants(~'green', @green, lighten(@green, 10%), @white, @white);
|
||||
.vc_grid_filter_filled_color_variants(~'juicy_pink', @juicy_pink, lighten(@juicy_pink, 10%), @white, @white);
|
||||
.vc_grid_filter_filled_color_variants(~'sandy_brown', @sandy_brown, lighten(@sandy_brown, 10%), @white, @white);
|
||||
.vc_grid_filter_filled_color_variants(~'purple', @purple, lighten(@purple, 10%), @white, @white);
|
||||
.vc_grid_filter_filled_color_variants(~'white', @white, darken(@white, 10%), #666666, #666666);
|
||||
|
||||
> .vc_grid-filter-item {
|
||||
margin: 0;
|
||||
border: 1px solid transparent;
|
||||
border-collapse: collapse;
|
||||
padding: 3px 7px;
|
||||
|
||||
> span {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
&:nth-child(n+2) {
|
||||
border-left: none;
|
||||
margin-left: 1px;
|
||||
border-top: none;
|
||||
margin-top: 1px;
|
||||
}
|
||||
&:first-child {
|
||||
border-top-left-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
border-top: 0;
|
||||
}
|
||||
&:last-child {
|
||||
border-top-right-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&.vc_grid-filter-filled-rounded {
|
||||
> .vc_grid-filter-item {
|
||||
&:first-child {
|
||||
border-top-left-radius: 30px;
|
||||
border-bottom-left-radius: 30px;
|
||||
border-top: 0;
|
||||
}
|
||||
&:last-child {
|
||||
border-top-right-radius: 30px;
|
||||
border-bottom-right-radius: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.vc_grid-filter-filled-rounded-all {
|
||||
> .vc_grid-filter-item {
|
||||
border-radius: 3px !important;
|
||||
}
|
||||
}
|
||||
&.vc_grid-filter-filled-round-all {
|
||||
> .vc_grid-filter-item {
|
||||
border-radius: 30px !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
// Use bootstrap mixin for transition
|
||||
.transition-all() {
|
||||
.transition('all 0.3s ease-in-out');
|
||||
}
|
||||
|
||||
// Condition select if @color is a color
|
||||
// This mixin will do nothing if @color is not a color (like false or etc)
|
||||
.if_color (@color, @property, @value) when (iscolor(@color)) {
|
||||
@{property}: @value !important;
|
||||
}
|
||||
|
||||
//Content
|
||||
.vc_grid {
|
||||
&.vc_row {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.vc-row[data-vc-full-width] {
|
||||
.vc_grid.vc_row {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@import "vc_grid_gap.less";
|
||||
@import "../../params/vc_grid_item/vc_grid_item.less";
|
||||
@import "vc_grid_style.less";
|
||||
@import "vc_grid_loading.less";
|
||||
// Import all other extensions
|
||||
@import "vc_grid_filter.less";
|
||||
@import "vc_grid_carousel.less";
|
||||
|
||||
@@ -0,0 +1,101 @@
|
||||
@nav_arrow_size: 25px;
|
||||
|
||||
// Color field
|
||||
.vc_grid_nav_color_variants(@selector, @txt_color) {
|
||||
&.vc_grid-owl-nav-color-@{selector} {
|
||||
color: @txt_color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.vc_grid-gutter-nav(@gutter, @margin) {
|
||||
&.vc_grid-gutter-@{gutter} {
|
||||
.vc_grid-owl-nav {
|
||||
.vc_grid-owl-prev,
|
||||
.vc_grid-owl-next {
|
||||
margin-top: -@margin;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.vc_grid-owl-theme {
|
||||
&:hover {
|
||||
.vc_grid-owl-nav {
|
||||
.opacity(1.0);
|
||||
}
|
||||
}
|
||||
.vc_grid-owl-nav {
|
||||
cursor: pointer;
|
||||
.opacity(0);
|
||||
.transition(opacity 0.3s ease-in 0s);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
|
||||
.disabled {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.vc_grid-owl-prev,
|
||||
.vc_grid-owl-next {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -@nav_arrow_size /2;
|
||||
|
||||
.opacity(0.5);
|
||||
font-size: @nav_arrow_size;
|
||||
line-height: @nav_arrow_size;
|
||||
height: @nav_arrow_size;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
.transition(opacity 0.3s ease-in 0s);
|
||||
|
||||
&:hover {
|
||||
.opacity(1.0);
|
||||
}
|
||||
}
|
||||
|
||||
.vc_grid-owl-prev {
|
||||
left: 5px;
|
||||
&.vc_grid-nav-prev-outside {
|
||||
left: -30px;
|
||||
}
|
||||
}
|
||||
|
||||
.vc_grid-owl-next {
|
||||
right: 5px;
|
||||
&.vc_grid-nav-next-outside {
|
||||
right: -30px;
|
||||
}
|
||||
}
|
||||
|
||||
.vc_grid_nav_color_variants(~'blue', @blue);
|
||||
.vc_grid_nav_color_variants(~'turquoise', @turquoise);
|
||||
.vc_grid_nav_color_variants(~'pink', @pink);
|
||||
.vc_grid_nav_color_variants(~'violet', @violet);
|
||||
.vc_grid_nav_color_variants(~'peacoc', @peacoc);
|
||||
.vc_grid_nav_color_variants(~'chino', @chino);
|
||||
.vc_grid_nav_color_variants(~'mulled_wine', @mulled_wine);
|
||||
.vc_grid_nav_color_variants(~'vista_blue', @vista_blue);
|
||||
.vc_grid_nav_color_variants(~'black', @black);
|
||||
.vc_grid_nav_color_variants(~'grey', @grey);
|
||||
.vc_grid_nav_color_variants(~'orange', @orange);
|
||||
.vc_grid_nav_color_variants(~'sky', @sky);
|
||||
.vc_grid_nav_color_variants(~'green', @green);
|
||||
.vc_grid_nav_color_variants(~'juicy_pink', @juicy_pink);
|
||||
.vc_grid_nav_color_variants(~'sandy_brown', @sandy_brown);
|
||||
.vc_grid_nav_color_variants(~'purple', @purple);
|
||||
.vc_grid_nav_color_variants(~'white', @white);
|
||||
}
|
||||
|
||||
.vc_grid-gutter-nav(1px, @nav_arrow_size/2 + 1px/2);
|
||||
.vc_grid-gutter-nav(2px, @nav_arrow_size/2 + 2px/2);
|
||||
.vc_grid-gutter-nav(3px, @nav_arrow_size/2 + 3px/2);
|
||||
.vc_grid-gutter-nav(4px, @nav_arrow_size/2 + 4px/2);
|
||||
.vc_grid-gutter-nav(5px, @nav_arrow_size/2 + 5px/2);
|
||||
.vc_grid-gutter-nav(10px, @nav_arrow_size/2 + 10px/2);
|
||||
.vc_grid-gutter-nav(15px, @nav_arrow_size/2 + 15px/2);
|
||||
.vc_grid-gutter-nav(20px, @nav_arrow_size/2 + 20px/2);
|
||||
.vc_grid-gutter-nav(25px, @nav_arrow_size/2 + 25px /2);
|
||||
.vc_grid-gutter-nav(30px, @nav_arrow_size/2 + 30px /2);
|
||||
.vc_grid-gutter-nav(35px, @nav_arrow_size/2 + 35px /2);
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
.owl-carousel {
|
||||
.owl-item {
|
||||
.vc_grid-item {
|
||||
-webkit-transform: translate3D(0, 0, 0);
|
||||
-ms-transform: translate3D(0, 0, 0);
|
||||
transform: translate3D(0, 0, 0);
|
||||
}
|
||||
}
|
||||
/* .owl-animated-out - only for current item */
|
||||
/* This is very important class. Use z-index if you want move Out item above In item */
|
||||
.owl-animated-out {
|
||||
z-index: 0;
|
||||
}
|
||||
/* .owl-animated-in - only for upcoming item
|
||||
/* This is very important class. Use z-index if you want move In item above Out item */
|
||||
.owl-animated-in {
|
||||
z-index: 1;
|
||||
}
|
||||
/* .fadeOut is style taken from Animation.css and this is how it looks in owl.carousel.css: */
|
||||
}
|
||||
|
||||
@@ -0,0 +1,134 @@
|
||||
.vc_grid_filter_color_variants(@selector, @background_color, @text_color) {
|
||||
&.vc_grid-filter-color-@{selector} {
|
||||
> .vc_grid-filter-item {
|
||||
&:hover, &.vc_active {
|
||||
background-color: @background_color;
|
||||
> span {
|
||||
color: @text_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Filter
|
||||
.vc_grid-filter {
|
||||
margin-left: 0;
|
||||
margin-bottom: 20px;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
&.vc_grid-filter-center {
|
||||
text-align: center;
|
||||
}
|
||||
&.vc_grid-filter-right {
|
||||
text-align: right;
|
||||
}
|
||||
&.vc_grid-filter-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.vc_grid_filter_color_variants(~'blue', @blue, @white);
|
||||
.vc_grid_filter_color_variants(~'turquoise', @turquoise, @white);
|
||||
.vc_grid_filter_color_variants(~'pink', @pink, @white);
|
||||
.vc_grid_filter_color_variants(~'violet', @violet, @white);
|
||||
.vc_grid_filter_color_variants(~'peacoc', @peacoc, @white);
|
||||
.vc_grid_filter_color_variants(~'chino', @chino, @white);
|
||||
.vc_grid_filter_color_variants(~'mulled_wine', @mulled_wine, @white);
|
||||
.vc_grid_filter_color_variants(~'vista_blue', @vista_blue, @white);
|
||||
.vc_grid_filter_color_variants(~'black', @black, @white);
|
||||
.vc_grid_filter_color_variants(~'grey', @grey, #666666);
|
||||
.vc_grid_filter_color_variants(~'orange', @orange, @white);
|
||||
.vc_grid_filter_color_variants(~'sky', @sky, @white);
|
||||
.vc_grid_filter_color_variants(~'green', @green, @white);
|
||||
.vc_grid_filter_color_variants(~'juicy_pink', @juicy_pink, @white);
|
||||
.vc_grid_filter_color_variants(~'sandy_brown', @sandy_brown, @white);
|
||||
.vc_grid_filter_color_variants(~'purple', @purple, @white);
|
||||
.vc_grid_filter_color_variants(~'white', @white, #666666);
|
||||
|
||||
// global filter styles
|
||||
> .vc_grid-filter-item {
|
||||
&:first-child {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
background: transparent;
|
||||
padding: 4px 10px;
|
||||
.transition(background-color 0.1s linear);
|
||||
> span {
|
||||
.transition(color 0.1s linear);
|
||||
outline: none;
|
||||
padding: 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
&:hover, &.vc_active {
|
||||
> span {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@import "filter_styles/filter_default.less";
|
||||
@import "filter_styles/filter_default_less_rounded.less";
|
||||
@import "filter_styles/filter_bordered.less";
|
||||
@import "filter_styles/filter_filled.less";
|
||||
|
||||
&.vc_grid-filter-size-xs {
|
||||
.vc_grid-filter-item {
|
||||
font-size: 12px;
|
||||
padding: 1px 5px;
|
||||
}
|
||||
}
|
||||
&.vc_grid-filter-size-sm {
|
||||
.vc_grid-filter-item {
|
||||
font-size: 13px;
|
||||
padding: 2px 7px;
|
||||
}
|
||||
}
|
||||
&.vc_grid-filter-size-md {
|
||||
.vc_grid-filter-item {
|
||||
font-size: 100%;
|
||||
padding: 2px 10px;
|
||||
}
|
||||
}
|
||||
&.vc_grid-filter-size-lg {
|
||||
.vc_grid-filter-item {
|
||||
font-size: 18px;
|
||||
padding: 4px 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Never be shown if not vc_responsive
|
||||
.vc_grid-filter-select {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.vc_grid-filter-select, .vc_grid-filter-dropdown {
|
||||
font-size: 12px;
|
||||
margin-bottom: 20px;
|
||||
&.vc_grid-filter-center {
|
||||
text-align: center;
|
||||
}
|
||||
&.vc_grid-filter-right {
|
||||
text-align: right;
|
||||
}
|
||||
&.vc_grid-filter-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@import "filter_styles/filter_dropdown.less";
|
||||
}
|
||||
|
||||
// If responsive enabled we will show select on xs displays
|
||||
@media (max-width: @screen-sm-min) {
|
||||
.vc_responsive {
|
||||
.vc_grid-filter-select {
|
||||
display: block;
|
||||
}
|
||||
.vc_grid-filter {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
.vc_grid-gutter(@gutter) {
|
||||
.vc_grid.vc_row.vc_grid-gutter-@{gutter} {
|
||||
margin-bottom: -@gutter;
|
||||
.vc_pageable-slide-wrapper {
|
||||
// TODO: test this
|
||||
margin-right: -@gutter;
|
||||
}
|
||||
.vc_grid-item {
|
||||
padding-right: @gutter;
|
||||
padding-bottom: @gutter;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vc_grid-gutter(1px);
|
||||
.vc_grid-gutter(2px);
|
||||
.vc_grid-gutter(3px);
|
||||
.vc_grid-gutter(4px);
|
||||
.vc_grid-gutter(5px);
|
||||
.vc_grid-gutter(10px);
|
||||
.vc_grid-gutter(15px);
|
||||
.vc_grid-gutter(20px);
|
||||
.vc_grid-gutter(25px);
|
||||
.vc_grid-gutter(30px);
|
||||
.vc_grid-gutter(35px);
|
||||
@@ -0,0 +1,56 @@
|
||||
.vc_grid-loading {
|
||||
&:before,
|
||||
&:after,
|
||||
& {
|
||||
border-radius: 50%;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
-webkit-animation-fill-mode: both;
|
||||
animation-fill-mode: both;
|
||||
-webkit-animation: load7 1.8s infinite ease-in-out;
|
||||
animation: load7 1.8s infinite ease-in-out;
|
||||
}
|
||||
& {
|
||||
margin: 2em auto;
|
||||
font-size: 10px;
|
||||
position: relative;
|
||||
text-indent: -9999em;
|
||||
-webkit-animation-delay: 0.16s;
|
||||
animation-delay: 0.16s;
|
||||
height: 20px;
|
||||
}
|
||||
&:before {
|
||||
left: -20px;
|
||||
}
|
||||
&:after {
|
||||
left: 20px;
|
||||
-webkit-animation-delay: 0.32s;
|
||||
animation-delay: 0.32s;
|
||||
}
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
@-webkit-keyframes load7 {
|
||||
0%,
|
||||
80%,
|
||||
100% {
|
||||
box-shadow: 0 2.5em 0 -1.3em rgba(235, 235, 235, 0.75);
|
||||
}
|
||||
40% {
|
||||
box-shadow: 0 2.5em 0 0 rgba(235, 235, 235, 0.75);
|
||||
}
|
||||
}
|
||||
@keyframes load7 {
|
||||
0%,
|
||||
80%,
|
||||
100% {
|
||||
box-shadow: 0 2.5em 0 -1.3em rgba(235, 235, 235, 0.75);
|
||||
}
|
||||
40% {
|
||||
box-shadow: 0 2.5em 0 0 rgba(235, 235, 235, 0.75);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,168 @@
|
||||
.vc_dot() {
|
||||
span {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin: 5px 7px;
|
||||
display: block;
|
||||
-webkit-backface-visibility: visible;
|
||||
.transition(opacity 200ms ease);
|
||||
}
|
||||
}
|
||||
|
||||
// Color field
|
||||
.vc_grid_paging_color_variants(@selector, @background_color, @border_color) {
|
||||
&.vc_grid-owl-dots-color-@{selector} {
|
||||
.vc_grid-owl-dot {
|
||||
span {
|
||||
.if_color(@background_color, background-color, @background_color);
|
||||
.if_color(@border_color, border-color, @border_color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Color field
|
||||
.vc_grid_paging_active_hover_color_variants(@selector, @background_color, @border_color, @active_background, @active_border_color) {
|
||||
&.vc_grid-owl-dots-color-@{selector} {
|
||||
.vc_grid-owl-dot {
|
||||
span {
|
||||
.if_color(@background_color, background-color, @background_color);
|
||||
.if_color(@border_color, border-color, @border_color);
|
||||
}
|
||||
&:hover, &.active {
|
||||
span {
|
||||
.if_color(@active_background, background-color, @active_background);
|
||||
.if_color(@active_border_color, border-color, @active_border_color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.vc_grid-owl-theme {
|
||||
|
||||
.vc_grid-owl-dots {
|
||||
display: none;
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
|
||||
.vc_grid-owl-dot {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
.vc_dot();
|
||||
}
|
||||
|
||||
&.vc_grid-square_dots {
|
||||
display: block;
|
||||
|
||||
.vc_grid-owl-dot {
|
||||
span {
|
||||
border: 3px solid;
|
||||
.transition(background-color 200ms ease);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.vc_grid-radio_dots {
|
||||
display: block;
|
||||
|
||||
.vc_grid-owl-dot {
|
||||
span {
|
||||
border: 3px solid;
|
||||
-webkit-border-radius: 10px;
|
||||
-moz-border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
.transition(background-color 200ms ease);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.vc_grid-point_dots {
|
||||
display: block;
|
||||
|
||||
.vc_grid-owl-dot {
|
||||
span {
|
||||
-webkit-border-radius: 30px;
|
||||
-moz-border-radius: 30px;
|
||||
border-radius: 30px;
|
||||
.opacity(0.6);
|
||||
}
|
||||
}
|
||||
.vc_grid-owl-dot.active span, .vc_grid-owl-dot:hover span {
|
||||
.opacity(1.0);
|
||||
}
|
||||
}
|
||||
|
||||
&.vc_grid-fill_square_dots {
|
||||
display: block;
|
||||
|
||||
.vc_grid-owl-dot {
|
||||
.vc_dot();
|
||||
span {
|
||||
.opacity(0.6);
|
||||
}
|
||||
}
|
||||
.vc_grid-owl-dot.active span, .vc_grid-owl-dot:hover span {
|
||||
.opacity(1.0);
|
||||
}
|
||||
}
|
||||
|
||||
&.vc_grid-round_fill_square_dots {
|
||||
display: block;
|
||||
|
||||
.vc_grid-owl-dot {
|
||||
.vc_dot();
|
||||
span {
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
.opacity(0.6);
|
||||
}
|
||||
}
|
||||
.vc_grid-owl-dot.active span, .vc_grid-owl-dot:hover span {
|
||||
.opacity(1.0);
|
||||
}
|
||||
}
|
||||
|
||||
&.vc_grid-square_dots, &.vc_grid-radio_dots {
|
||||
.vc_grid_paging_active_hover_color_variants(~'blue', false, @blue, @blue, @blue);
|
||||
.vc_grid_paging_active_hover_color_variants(~'turquoise', false, @turquoise, @turquoise, @turquoise);
|
||||
.vc_grid_paging_active_hover_color_variants(~'pink', false, @pink, @pink, @pink);
|
||||
.vc_grid_paging_active_hover_color_variants(~'violet', false, @violet, @violet, @violet);
|
||||
.vc_grid_paging_active_hover_color_variants(~'peacoc', false, @peacoc, @peacoc, @peacoc);
|
||||
.vc_grid_paging_active_hover_color_variants(~'chino', false, @chino, @chino, @chino);
|
||||
.vc_grid_paging_active_hover_color_variants(~'mulled_wine', false, @mulled_wine, @mulled_wine, @mulled_wine);
|
||||
.vc_grid_paging_active_hover_color_variants(~'vista_blue', false, @vista_blue, @vista_blue, @vista_blue);
|
||||
.vc_grid_paging_active_hover_color_variants(~'black', false, @black, @black, @black);
|
||||
.vc_grid_paging_active_hover_color_variants(~'grey', false, @grey, @grey, @grey);
|
||||
.vc_grid_paging_active_hover_color_variants(~'orange', false, @orange, @orange, @orange);
|
||||
.vc_grid_paging_active_hover_color_variants(~'sky', false, @sky, @sky, @sky);
|
||||
.vc_grid_paging_active_hover_color_variants(~'green', false, @green, @green, @green);
|
||||
.vc_grid_paging_active_hover_color_variants(~'juicy_pink', false, @juicy_pink, @juicy_pink, @juicy_pink);
|
||||
.vc_grid_paging_active_hover_color_variants(~'sandy_brown', false, @sandy_brown, @sandy_brown, @sandy_brown);
|
||||
.vc_grid_paging_active_hover_color_variants(~'purple', false, @purple, @purple, @purple);
|
||||
.vc_grid_paging_active_hover_color_variants(~'white', false, @white, @white, @white);
|
||||
}
|
||||
|
||||
&.vc_grid-point_dots, &.vc_grid-fill_square_dots,
|
||||
&.vc_grid-round_fill_square_dots {
|
||||
.vc_grid_paging_color_variants(~'blue', @blue, false);
|
||||
.vc_grid_paging_color_variants(~'turquoise', @turquoise, false);
|
||||
.vc_grid_paging_color_variants(~'pink', @pink, false);
|
||||
.vc_grid_paging_color_variants(~'violet', @violet, false);
|
||||
.vc_grid_paging_color_variants(~'peacoc', @peacoc, false);
|
||||
.vc_grid_paging_color_variants(~'chino', @chino, false);
|
||||
.vc_grid_paging_color_variants(~'mulled_wine', @mulled_wine, false);
|
||||
.vc_grid_paging_color_variants(~'vista_blue', @vista_blue, false);
|
||||
.vc_grid_paging_color_variants(~'black', @black, false);
|
||||
.vc_grid_paging_color_variants(~'grey', @grey, false);
|
||||
.vc_grid_paging_color_variants(~'orange', @orange, false);
|
||||
.vc_grid_paging_color_variants(~'sky', @sky, false);
|
||||
.vc_grid_paging_color_variants(~'green', @green, false);
|
||||
.vc_grid_paging_color_variants(~'juicy_pink', @juicy_pink, false);
|
||||
.vc_grid_paging_color_variants(~'sandy_brown', @sandy_brown, false);
|
||||
.vc_grid_paging_color_variants(~'purple', @purple, false);
|
||||
.vc_grid_paging_color_variants(~'white', @white, false);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,245 @@
|
||||
.vc_grid_pagination_number_color_variants(@selector, @background_color, @text_color) {
|
||||
&.vc_grid-pagination-color-@{selector} {
|
||||
> li {
|
||||
.if_color(@background_color, border-color, @background_color);
|
||||
> a,
|
||||
> span {
|
||||
.if_color(@background_color, background-color, @background_color);
|
||||
.if_color(@background_color, border-color, @background_color);
|
||||
.if_color(@text_color, color, @text_color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vc_grid-pagination {
|
||||
.vc_grid-pagination-list {
|
||||
outline: none;
|
||||
display: block;
|
||||
padding-left: 0;
|
||||
text-align: center;
|
||||
margin: @line-height-computed 0 0 !important;
|
||||
border-radius: @border-radius-base;
|
||||
|
||||
> li {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
border: 0px solid transparent;
|
||||
> a,
|
||||
> span {
|
||||
color: @pagination-active-color;
|
||||
background-color: @pagination-active-bg;
|
||||
border: 1px solid @pagination-active-bg;
|
||||
.transition(opacity 0.3s ease-in 0s);
|
||||
position: relative;
|
||||
float: left; // Collapse white-space
|
||||
padding: 3px 10px;
|
||||
line-height: @line-height-base;
|
||||
text-decoration: none;
|
||||
.opacity(0.5);
|
||||
margin-left: -1px;
|
||||
font-size: 10px;
|
||||
}
|
||||
&:first-child {
|
||||
> a,
|
||||
> span {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
&:hover,
|
||||
&:focus {
|
||||
a, span {
|
||||
.opacity(1.0);
|
||||
}
|
||||
}
|
||||
}
|
||||
> .vc_grid-prev {
|
||||
> a {
|
||||
&:after {
|
||||
font-family: 'vc_grid_v1';
|
||||
display: inline-block;
|
||||
content: "\e61b";
|
||||
}
|
||||
}
|
||||
}
|
||||
> .vc_grid-next {
|
||||
> a {
|
||||
&:after {
|
||||
font-family: 'vc_grid_v1';
|
||||
display: inline-block;
|
||||
content: "\e61a";
|
||||
}
|
||||
}
|
||||
}
|
||||
> .vc_grid-first {
|
||||
> a {
|
||||
&:after {
|
||||
font-family: 'vc_grid_v1';
|
||||
display: inline-block;
|
||||
content: "\e618";
|
||||
}
|
||||
}
|
||||
}
|
||||
> .vc_grid-last {
|
||||
> a {
|
||||
&:after {
|
||||
font-family: 'vc_grid_v1';
|
||||
display: inline-block;
|
||||
content: "\e619";
|
||||
}
|
||||
}
|
||||
}
|
||||
> .vc_grid-active > a,
|
||||
> .vc_grid-active > span {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
z-index: 2;
|
||||
.opacity(1.0);
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
> .vc_grid-disabled {
|
||||
> span,
|
||||
> span:hover,
|
||||
> span:focus,
|
||||
> a,
|
||||
> a:hover,
|
||||
> a:focus {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.vc_grid_pagination_number_color_variants(~'blue', @blue, @white);
|
||||
.vc_grid_pagination_number_color_variants(~'turquoise', @turquoise, @white);
|
||||
.vc_grid_pagination_number_color_variants(~'pink', @pink, @white);
|
||||
.vc_grid_pagination_number_color_variants(~'violet', @violet, @white);
|
||||
.vc_grid_pagination_number_color_variants(~'peacoc', @peacoc, @white);
|
||||
.vc_grid_pagination_number_color_variants(~'chino', @chino, @white);
|
||||
.vc_grid_pagination_number_color_variants(~'mulled_wine', @mulled_wine, @white);
|
||||
.vc_grid_pagination_number_color_variants(~'vista_blue', @vista_blue, @white);
|
||||
.vc_grid_pagination_number_color_variants(~'black', @black, @white);
|
||||
.vc_grid_pagination_number_color_variants(~'grey', @grey, @white);
|
||||
.vc_grid_pagination_number_color_variants(~'orange', @orange, @white);
|
||||
.vc_grid_pagination_number_color_variants(~'sky', @sky, @white);
|
||||
.vc_grid_pagination_number_color_variants(~'green', @green, @white);
|
||||
.vc_grid_pagination_number_color_variants(~'juicy_pink', @juicy_pink, @white);
|
||||
.vc_grid_pagination_number_color_variants(~'sandy_brown', @sandy_brown, @white);
|
||||
.vc_grid_pagination_number_color_variants(~'purple', @purple, @white);
|
||||
.vc_grid_pagination_number_color_variants(~'white', @white, @black);
|
||||
|
||||
&.vc_grid-pagination_default, &.vc_grid-pagination_default_dark, &.vc_grid-pagination_default_light {
|
||||
> li {
|
||||
> a, > span {
|
||||
.box-sizing(border-box);
|
||||
min-width: 28px;
|
||||
min-height: 22px;
|
||||
|
||||
}
|
||||
&:first-child {
|
||||
> a,
|
||||
> span {
|
||||
.border-left-radius(@border-radius-base);
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
> a,
|
||||
> span {
|
||||
.border-right-radius(@border-radius-base);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.vc_grid-pagination_square, &.vc_grid-pagination_square_dark, &.vc_grid-pagination_square_light {
|
||||
> li {
|
||||
> a,
|
||||
> span {
|
||||
margin-left: 5px;
|
||||
.box-sizing(border-box);
|
||||
min-height: 22px;
|
||||
min-width: 22px;
|
||||
padding: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.vc_grid-pagination_rounded, &.vc_grid-pagination_rounded_dark, &.vc_grid-pagination_rounded_light, &.vc_grid-pagination_rounded_square, &.vc_grid-pagination_rounded_square_dark, &.vc_grid-pagination_rounded_square_light {
|
||||
> li {
|
||||
> a,
|
||||
> span {
|
||||
margin-left: 5px;
|
||||
border-radius: 30px;
|
||||
.box-sizing(border-box);
|
||||
min-height: 22px;
|
||||
min-width: 22px;
|
||||
padding: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.vc_grid-pagination_rounded_square, &.vc_grid-pagination_rounded_square_dark, &.vc_grid-pagination_rounded_square_light {
|
||||
> li {
|
||||
> a,
|
||||
> span {
|
||||
.border-radius(5px);
|
||||
.box-sizing(border-box);
|
||||
min-height: 22px;
|
||||
min-width: 22px;
|
||||
padding: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.vc_grid-pagination_square_dark, &.vc_grid-pagination_default_dark, &.vc_grid-pagination_rounded_dark, &.vc_grid-pagination_rounded_square_dark {
|
||||
> li {
|
||||
> a,
|
||||
> span {
|
||||
background-color: transparent !important;
|
||||
color: #000 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.vc_grid-pagination_square_light, &.vc_grid-pagination_default_light, &.vc_grid-pagination_rounded_light, &.vc_grid-pagination_rounded_square_light {
|
||||
> li {
|
||||
> a,
|
||||
> span {
|
||||
background-color: transparent !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.vc_grid-pagination_stripes_dark, &.vc_grid-pagination_stripes_light {
|
||||
> li {
|
||||
border-left-width: 1px !important;
|
||||
> a {
|
||||
border-width: 0;
|
||||
background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
|
||||
|
||||
}
|
||||
}
|
||||
li.vc_grid-disabled + li,
|
||||
> li:first-child {
|
||||
border-width: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.vc_grid-pagination_stripes_dark {
|
||||
> li {
|
||||
> a {
|
||||
color: #000 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.vc_grid-pagination_stripes_light {
|
||||
> li {
|
||||
> a {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
.vc_grid {
|
||||
// Load more button style
|
||||
.vc_pageable-load-more-btn {
|
||||
text-align: center;
|
||||
margin-top: 25px;
|
||||
> .vc_btn {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Display style: pagination
|
||||
@import "vc_grid_pagination_dots.less";
|
||||
@import "vc_grid_arrows.less";
|
||||
}
|
||||
|
||||
// This is outside vc_grid
|
||||
@import "vc_grid_pagination_numbers.less";
|
||||
@@ -0,0 +1,194 @@
|
||||
/* Buttons
|
||||
---------------------------------------------------------- */
|
||||
// Core
|
||||
.wpb_button {
|
||||
display: inline-block;
|
||||
padding: 4px 10px 4px;
|
||||
margin-bottom: 0; // For input.btn
|
||||
margin-top: 0;
|
||||
font-size: @baseFontSize;
|
||||
line-height: @baseLineHeight;
|
||||
color: @grayDark;
|
||||
text-align: center;
|
||||
text-shadow: 0 1px 1px rgba(255, 255, 255, .75);
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
.buttonBackground(@vc_btnBackground, @vc_btnBackgroundHighlight);
|
||||
border: 1px solid @vc_btnBorder;
|
||||
border-bottom-color: darken(@vc_btnBorder, 10%);
|
||||
.border-radius(2px);
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.vc_vc_button2 {
|
||||
.vc_btn {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.vc_vc_button {
|
||||
.vc_btn {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
// Hover state
|
||||
.wpb_button:hover {
|
||||
color: @grayDark;
|
||||
text-decoration: none;
|
||||
background-color: darken(@white, 10%);
|
||||
|
||||
// transition is only when going to hover, otherwise the background
|
||||
// behind the gradient (there for IE<=9 fallback) gets mismatched
|
||||
.transition(background-color .1s linear);
|
||||
}
|
||||
|
||||
// Focus state for keyboard and accessibility
|
||||
.wpb_button:focus {
|
||||
.tab-focus();
|
||||
}
|
||||
|
||||
// Active state
|
||||
.wpb_button.active,
|
||||
.wpb_button:active {
|
||||
background-color: darken(@white, 10%);
|
||||
background-image: none;
|
||||
outline: 0;
|
||||
.box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
|
||||
}
|
||||
|
||||
// Button Sizes
|
||||
// --------------------------------------------------
|
||||
button,
|
||||
span {
|
||||
// Large
|
||||
&.wpb_btn-large {
|
||||
padding: 9px 14px;
|
||||
font-size: @baseFontSize + 2px;
|
||||
line-height: normal;
|
||||
.border-radius(2px);
|
||||
}
|
||||
&.wpb_btn-large [class^="icon-"] {
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
// Small
|
||||
&.wpb_btn-small {
|
||||
padding: 5px 9px;
|
||||
font-size: @baseFontSize - 2px;
|
||||
line-height: @baseLineHeight - 2px;
|
||||
}
|
||||
&.wpb_btn-small [class^="icon-"] {
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
// Mini
|
||||
&.wpb_btn-mini {
|
||||
padding: 2px 6px;
|
||||
font-size: @baseFontSize - 2px;
|
||||
line-height: @baseLineHeight - 4px;
|
||||
}
|
||||
}
|
||||
|
||||
// Alternate buttons
|
||||
// --------------------------------------------------
|
||||
|
||||
// Set text color
|
||||
// -------------------------
|
||||
.wpb_btn-primary,
|
||||
.wpb_btn-primary:hover,
|
||||
.wpb_btn-warning,
|
||||
.wpb_btn-warning:hover,
|
||||
.wpb_btn-danger,
|
||||
.wpb_btn-danger:hover,
|
||||
.wpb_btn-success,
|
||||
.wpb_btn-success:hover,
|
||||
.wpb_btn-info,
|
||||
.wpb_btn-info:hover,
|
||||
.wpb_btn-inverse,
|
||||
.wpb_btn-inverse:hover {
|
||||
color: @white;
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
|
||||
}
|
||||
|
||||
// Provide *some* extra contrast for those who can get it
|
||||
.wpb_btn-primary.active,
|
||||
.wpb_btn-warning.active,
|
||||
.wpb_btn-danger.active,
|
||||
.wpb_btn-success.active,
|
||||
.wpb_btn-info.active,
|
||||
.wpb_btn-inverse.active {
|
||||
color: rgba(255, 255, 255, .75);
|
||||
}
|
||||
|
||||
// Set the backgrounds
|
||||
// -------------------------
|
||||
.wpb_button {
|
||||
// reset here as of 2.0.3 due to Recess property order
|
||||
border-color: #ccc;
|
||||
border-color: rgba(0, 0, 0, .1) rgba(0, 0, 0, .1) rgba(0, 0, 0, .1);
|
||||
}
|
||||
|
||||
.wpb_btn-primary {
|
||||
.buttonBackground(@vc_btnPrimaryBackground, @vc_btnPrimaryBackgroundHighlight);
|
||||
}
|
||||
|
||||
// Warning appears are orange
|
||||
.wpb_btn-warning {
|
||||
.buttonBackground(@vc_btnWarningBackground, @vc_btnWarningBackgroundHighlight);
|
||||
}
|
||||
|
||||
// Danger and error appear as red
|
||||
.wpb_btn-danger {
|
||||
.buttonBackground(@vc_btnDangerBackground, @vc_btnDangerBackgroundHighlight);
|
||||
}
|
||||
|
||||
// Success appears as green
|
||||
.wpb_btn-success {
|
||||
.buttonBackground(@vc_btnSuccessBackground, @vc_btnSuccessBackgroundHighlight);
|
||||
}
|
||||
|
||||
// Info appears as a neutral blue
|
||||
.wpb_btn-info {
|
||||
.buttonBackground(@vc_btnInfoBackground, @vc_btnInfoBackgroundHighlight);
|
||||
}
|
||||
|
||||
// Inverse appears as dark gray
|
||||
.wpb_btn-inverse {
|
||||
.buttonBackground(@vc_btnInverseBackground, @vc_btnInverseBackgroundHighlight);
|
||||
}
|
||||
|
||||
// Cross-browser Jank
|
||||
// --------------------------------------------------
|
||||
button.wpb_button,
|
||||
input[type="submit"].wpb_button {
|
||||
|
||||
// Firefox 3.6 only I believe
|
||||
&::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Button
|
||||
---------------------------------------------------------- */
|
||||
a.wpb_button_a {
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.wpb_button {
|
||||
&:hover {
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
|
||||
@import "../lib/wpb_icon.less";
|
||||
@@ -0,0 +1,709 @@
|
||||
/* Button 3
|
||||
---------------------------------------------------------- */
|
||||
|
||||
//========== Variables
|
||||
@vc_btn3-border-radius-round: 2em;
|
||||
@vc_btn3-border-radius-rounded: 5px;
|
||||
@vc_btn3-border-base: 1px;
|
||||
@vc_btn3-border-outline: 2px;
|
||||
@vc_btn3-shadow-width-xs-3d: 3px;
|
||||
@vc_btn3-shadow-width-sm-3d: 4px;
|
||||
@vc_btn3-shadow-width-md-3d: 5px;
|
||||
@vc_btn3-shadow-width-lg-3d: 5px;
|
||||
@vc_btn3-shadow-width-hover: 2px;
|
||||
|
||||
@vc_btn3-color-initial: @vc_btn3-color-blue;
|
||||
|
||||
// Button xs
|
||||
@vc_btn3-xs-padding-horizontal: 12px;
|
||||
@vc_btn3-xs-padding-vertical: 8px;
|
||||
@vc_btn3-xs-font-size: 11px;
|
||||
@vc_btn3-xs-icon-size: 14px;
|
||||
// Button sm
|
||||
@vc_btn3-sm-padding-horizontal: 16px;
|
||||
@vc_btn3-sm-padding-vertical: 11px;
|
||||
@vc_btn3-sm-font-size: 12px;
|
||||
@vc_btn3-sm-icon-size: 14px;
|
||||
// Button md (default)
|
||||
@vc_btn3-md-padding-horizontal: 20px;
|
||||
@vc_btn3-md-padding-vertical: 14px;
|
||||
@vc_btn3-md-font-size: 14px;
|
||||
@vc_btn3-md-icon-size: 16px;
|
||||
// Button lg
|
||||
@vc_btn3-lg-padding-horizontal: 25px;
|
||||
@vc_btn3-lg-padding-vertical: 18px;
|
||||
@vc_btn3-lg-font-size: 16px;
|
||||
@vc_btn3-lg-icon-size: 20px;
|
||||
|
||||
//====== COLORS
|
||||
|
||||
// color set
|
||||
// ---------------------------
|
||||
// blue
|
||||
@vc_btn3-color-blue: @blue;
|
||||
@vc_btn3-color-blue-gradient: lighten(@vc_btn3-color-blue, 7%);
|
||||
@vc_btn3-color-blue-gradient-end: lighten(@vc_btn3-color-blue, 2%);
|
||||
@vc_btn3-color-blue-text: @vc_btn3-color-blue;
|
||||
@vc_btn3-color-blue-contrast: #fff;
|
||||
// turquoise
|
||||
@vc_btn3-color-turquoise: @turquoise;
|
||||
@vc_btn3-color-turquoise-gradient: lighten(@vc_btn3-color-turquoise, 4%);
|
||||
@vc_btn3-color-turquoise-gradient-end: lighten(@vc_btn3-color-turquoise, 1%);
|
||||
@vc_btn3-color-turquoise-text: @vc_btn3-color-turquoise;
|
||||
@vc_btn3-color-turquoise-contrast: #fff;
|
||||
// pink
|
||||
@vc_btn3-color-pink: @pink;
|
||||
@vc_btn3-color-pink-gradient: lighten(@vc_btn3-color-pink, 4%);
|
||||
@vc_btn3-color-pink-gradient-end: lighten(@vc_btn3-color-pink, 1%);
|
||||
@vc_btn3-color-pink-text: @vc_btn3-color-pink;
|
||||
@vc_btn3-color-pink-contrast: #fff;
|
||||
// violet
|
||||
@vc_btn3-color-violet: @violet;
|
||||
@vc_btn3-color-violet-gradient: lighten(@vc_btn3-color-violet, 7%);
|
||||
@vc_btn3-color-violet-gradient-end: lighten(@vc_btn3-color-violet, 2%);
|
||||
@vc_btn3-color-violet-text: @vc_btn3-color-violet;
|
||||
@vc_btn3-color-violet-contrast: #fff;
|
||||
// peacoc
|
||||
@vc_btn3-color-peacoc: @peacoc;
|
||||
@vc_btn3-color-peacoc-gradient: lighten(@vc_btn3-color-peacoc, 9%);
|
||||
@vc_btn3-color-peacoc-gradient-end: lighten(@vc_btn3-color-peacoc, 2%);
|
||||
@vc_btn3-color-peacoc-text: @vc_btn3-color-peacoc;
|
||||
@vc_btn3-color-peacoc-contrast: #fff;
|
||||
// chino
|
||||
@vc_btn3-color-chino: @chino;
|
||||
@vc_btn3-color-chino-gradient: lighten(@vc_btn3-color-chino, 7%);
|
||||
@vc_btn3-color-chino-gradient-end: lighten(@vc_btn3-color-chino, 3%);
|
||||
@vc_btn3-color-chino-text: @vc_btn3-color-chino;
|
||||
@vc_btn3-color-chino-contrast: #fff;
|
||||
// mulled_wine
|
||||
@vc_btn3-color-mulled-wine: @mulled_wine;
|
||||
@vc_btn3-color-mulled-wine-gradient: lighten(@vc_btn3-color-mulled-wine, 8%);
|
||||
@vc_btn3-color-mulled-wine-gradient-end: lighten(@vc_btn3-color-mulled-wine, 3%);
|
||||
@vc_btn3-color-mulled-wine-text: @vc_btn3-color-mulled-wine;
|
||||
@vc_btn3-color-mulled-wine-contrast: #fff;
|
||||
// vista_blue
|
||||
@vc_btn3-color-vista-blue: @vista_blue;
|
||||
@vc_btn3-color-vista-blue-gradient: lighten(@vc_btn3-color-vista-blue, 7%);
|
||||
@vc_btn3-color-vista-blue-gradient-end: lighten(@vc_btn3-color-vista-blue, 3%);
|
||||
@vc_btn3-color-vista-blue-text: @vc_btn3-color-vista-blue;
|
||||
@vc_btn3-color-vista-blue-contrast: #fff;
|
||||
// orange
|
||||
@vc_btn3-color-orange: @orange;
|
||||
@vc_btn3-color-orange-gradient: lighten(@vc_btn3-color-orange, 6%);
|
||||
@vc_btn3-color-orange-gradient-end: lighten(@vc_btn3-color-orange, 1%);
|
||||
@vc_btn3-color-orange-text: @vc_btn3-color-orange;
|
||||
@vc_btn3-color-orange-contrast: #fff;
|
||||
// sky
|
||||
@vc_btn3-color-sky: @sky;
|
||||
@vc_btn3-color-sky-gradient: lighten(@vc_btn3-color-sky, 7%);
|
||||
@vc_btn3-color-sky-gradient-end: lighten(@vc_btn3-color-sky, 3%);
|
||||
@vc_btn3-color-sky-text: @vc_btn3-color-sky;
|
||||
@vc_btn3-color-sky-contrast: #fff;
|
||||
// green
|
||||
@vc_btn3-color-green: @green;
|
||||
@vc_btn3-color-green-gradient: lighten(@vc_btn3-color-green, 7%);
|
||||
@vc_btn3-color-green-gradient-end: lighten(@vc_btn3-color-green, 3%);
|
||||
@vc_btn3-color-green-text: @vc_btn3-color-green;
|
||||
@vc_btn3-color-green-contrast: #fff;
|
||||
// juicy_pink
|
||||
@vc_btn3-color-juicy-pink: @juicy_pink;
|
||||
@vc_btn3-color-juicy-pink-gradient: lighten(@vc_btn3-color-juicy-pink, 5%);
|
||||
@vc_btn3-color-juicy-pink-gradient-end: lighten(@vc_btn3-color-juicy-pink, 2%);
|
||||
@vc_btn3-color-juicy-pink-text: @vc_btn3-color-juicy-pink;
|
||||
@vc_btn3-color-juicy-pink-contrast: #fff;
|
||||
// sandy_brown
|
||||
@vc_btn3-color-sandy-brown: @sandy_brown;
|
||||
@vc_btn3-color-sandy-brown-gradient: lighten(@vc_btn3-color-sandy-brown, 6%);
|
||||
@vc_btn3-color-sandy-brown-gradient-end: lighten(@vc_btn3-color-sandy-brown, 3%);
|
||||
@vc_btn3-color-sandy-brown-text: @vc_btn3-color-sandy-brown;
|
||||
@vc_btn3-color-sandy-brown-contrast: #fff;
|
||||
// purple
|
||||
@vc_btn3-color-purple: @purple;
|
||||
@vc_btn3-color-purple-gradient: lighten(@vc_btn3-color-purple, 6%);
|
||||
@vc_btn3-color-purple-gradient-end: lighten(@vc_btn3-color-purple, 1%);
|
||||
@vc_btn3-color-purple-text: @vc_btn3-color-purple;
|
||||
@vc_btn3-color-purple-contrast: #fff;
|
||||
// black
|
||||
@vc_btn3-color-black: @black;
|
||||
@vc_btn3-color-black-gradient: lighten(@vc_btn3-color-black, 8%);
|
||||
@vc_btn3-color-black-gradient-end: lighten(@vc_btn3-color-black, 1%);
|
||||
@vc_btn3-color-black-text: @vc_btn3-color-black-contrast;
|
||||
@vc_btn3-color-black-contrast: #fff;
|
||||
// grey
|
||||
@vc_btn3-color-grey: @grey;
|
||||
@vc_btn3-color-grey-gradient: lighten(@vc_btn3-color-grey, 3%);
|
||||
@vc_btn3-color-grey-gradient-end: lighten(@vc_btn3-color-grey, 1%);
|
||||
@vc_btn3-color-grey-text: #666;
|
||||
@vc_btn3-color-grey-contrast: @vc_btn3-color-grey-text;
|
||||
// white
|
||||
@vc_btn3-color-white: @white;
|
||||
@vc_btn3-color-white-gradient: darken(@vc_btn3-color-white, 1%);
|
||||
@vc_btn3-color-white-gradient-end: darken(@vc_btn3-color-white, 2%);
|
||||
@vc_btn3-color-white-text: #666;
|
||||
@vc_btn3-color-white-contrast: @vc_btn3-color-white-text;
|
||||
|
||||
// Custom colors
|
||||
// default
|
||||
@vc_btn3-color-default: @vc_btnBackground;
|
||||
@vc_btn3-color-default-gradient: @vc_btnBackground;
|
||||
@vc_btn3-color-default-gradient-end: @vc_btnBackgroundHighlight;
|
||||
@vc_btn3-color-default-text: @vc_btn3-color-default;
|
||||
@vc_btn3-color-default-contrast: @grayDark;
|
||||
// primary
|
||||
@vc_btn3-color-primary: @vc_btnPrimaryBackground;
|
||||
@vc_btn3-color-primary-gradient: lighten(@vc_btn3-color-primary, 7%);
|
||||
@vc_btn3-color-primary-gradient-end: lighten(@vc_btn3-color-primary, 2%);
|
||||
@vc_btn3-color-primary-text: @vc_btn3-color-primary;
|
||||
@vc_btn3-color-primary-contrast: @white;
|
||||
// info
|
||||
@vc_btn3-color-info: @vc_btnInfoBackground;
|
||||
@vc_btn3-color-info-gradient: lighten(@vc_btn3-color-info, 7%);
|
||||
@vc_btn3-color-info-gradient-end: lighten(@vc_btn3-color-info, 2%);
|
||||
@vc_btn3-color-info-text: @vc_btn3-color-info;
|
||||
@vc_btn3-color-info-contrast: @white;
|
||||
// Success
|
||||
@vc_btn3-color-success: @vc_btnSuccessBackground;
|
||||
@vc_btn3-color-success-gradient: lighten(@vc_btn3-color-success, 7%);
|
||||
@vc_btn3-color-success-gradient-end: lighten(@vc_btn3-color-success, 2%);
|
||||
@vc_btn3-color-success-text: @vc_btn3-color-success;
|
||||
@vc_btn3-color-success-contrast: #fff;
|
||||
// Warning
|
||||
@vc_btn3-color-warning: @vc_btnWarningBackground;
|
||||
@vc_btn3-color-warning-gradient: lighten(@vc_btn3-color-warning, 7%);
|
||||
@vc_btn3-color-warning-gradient-end: lighten(@vc_btn3-color-warning, 2%);
|
||||
@vc_btn3-color-warning-text: @vc_btn3-color-warning;
|
||||
@vc_btn3-color-warning-contrast: @white;
|
||||
// Danger
|
||||
@vc_btn3-color-danger: @vc_btnDangerBackground;
|
||||
@vc_btn3-color-danger-gradient: lighten(@vc_btn3-color-danger, 7%);
|
||||
@vc_btn3-color-danger-gradient-end: lighten(@vc_btn3-color-danger, 2%);
|
||||
@vc_btn3-color-danger-text: @vc_btn3-color-danger;
|
||||
@vc_btn3-color-danger-contrast: @white;
|
||||
// Inverse
|
||||
@vc_btn3-color-inverse: @vc_btnInverseBackground;
|
||||
@vc_btn3-color-inverse-gradient: lighten(@vc_btn3-color-inverse, 7%);
|
||||
@vc_btn3-color-inverse-gradient-end: lighten(@vc_btn3-color-inverse, 2%);
|
||||
@vc_btn3-color-inverse-text: @vc_btn3-color-inverse;
|
||||
@vc_btn3-color-inverse-contrast: @white;
|
||||
|
||||
//========== VC Settings
|
||||
.vc_btn3-container {
|
||||
display: block;
|
||||
margin-bottom: @vc_margin_bottom_gold;
|
||||
max-width: 100%;
|
||||
&.vc_btn3-inline {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
//========== Core
|
||||
|
||||
.vc_general.vc_btn3 {
|
||||
display: inline-block;
|
||||
margin-bottom: 0; // For input.btn
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
|
||||
background-color: transparent;
|
||||
color: @vc_btn3-color-initial;
|
||||
border: @vc_btn3-border-base solid transparent;
|
||||
box-sizing: border-box;
|
||||
word-wrap: break-word;
|
||||
.user-select(none);
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
top: 0;
|
||||
-webkit-transition: all .2s ease-in-out;
|
||||
transition: all .2s ease-in-out;
|
||||
line-height: normal;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
|
||||
.make-btn3-size(@vc_btn3-md-font-size, @vc_btn3-md-padding-vertical, @vc_btn3-md-padding-horizontal);
|
||||
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
border: @vc_btn3-border-base solid transparent;
|
||||
text-decoration: none;
|
||||
color: darken(@vc_btn3-color-initial, 3%);
|
||||
}
|
||||
|
||||
// icon
|
||||
.vc_btn3-icon {
|
||||
vertical-align: top;
|
||||
height: @vc_btn3-md-font-size;
|
||||
line-height: 1;
|
||||
font-size: @vc_btn3-md-icon-size;
|
||||
}
|
||||
.vc_btn3-icon-inner {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
-webkit-transform: translate(0, -50%);
|
||||
-ms-transform: translate(0, -50%);
|
||||
transform: translate(0, -50%);
|
||||
}
|
||||
|
||||
// placeholder for icon without text
|
||||
.vc_btn3-placeholder {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// icon positions
|
||||
.vc_btn3 {
|
||||
&.vc_btn3-icon-left,
|
||||
&.vc_btn3-icon-right {
|
||||
position: relative;
|
||||
.vc_btn3-icon {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
.translate(0; -50%);
|
||||
}
|
||||
}
|
||||
|
||||
&.vc_btn3-icon-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&.vc_btn3-icon-right {
|
||||
text-align: right;
|
||||
&:not(.vc_btn3-block) {
|
||||
.vc_btn3-icon-inner {
|
||||
-webkit-transform: translate(-75%, -50%);
|
||||
-ms-transform: translate(-75%, -50%);
|
||||
transform: translate(-75%, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.vc_btn3-o-empty {
|
||||
.vc_btn3-icon {
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
-ms-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
&:not(.vc_btn3-block) {
|
||||
.vc_btn3-icon-inner {
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
-ms-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//========== Styles
|
||||
.vc_btn3 {
|
||||
// Classic
|
||||
&.vc_btn3-style-classic {
|
||||
border-color: rgba(0, 0, 0, .1) rgba(0, 0, 0, .1) rgba(0, 0, 0, .1);
|
||||
}
|
||||
// Modern
|
||||
&.vc_btn3-style-modern {
|
||||
#gradient > .vertical(@start-color: rgba(255, 255, 255, .2); @end-color: rgba(255, 255, 255, .01));
|
||||
}
|
||||
// Flat (default)
|
||||
&.vc_btn3-style-flat {
|
||||
|
||||
}
|
||||
// Outline
|
||||
&.vc_btn3-style-outline-custom,
|
||||
&.vc_btn3-style-outline {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-width: @vc_btn3-border-outline;
|
||||
}
|
||||
}
|
||||
// 3d
|
||||
&.vc_btn3-style-3d {
|
||||
|
||||
}
|
||||
// Custom
|
||||
&.vc_btn3-style-custom {
|
||||
#gradient > .vertical-three-colors(@start-color: rgba(0, 0, 0, 0); @mid-color: rgba(0, 0, 0, 0.1); @color-stop: 50%; @end-color: rgba(0, 0, 0, 0.1));
|
||||
background-repeat: repeat-x;
|
||||
background-size: 200%;
|
||||
background-position: 0 -100%;
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-position: 0 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// block button
|
||||
.vc_btn3 {
|
||||
&.vc_btn3-block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
//========== Shapes
|
||||
.vc_btn3 {
|
||||
// Square Shape
|
||||
&.vc_btn3-shape-square {
|
||||
border-radius: 0;
|
||||
}
|
||||
// Rounded Shape
|
||||
&.vc_btn3-shape-rounded {
|
||||
border-radius: @vc_btn3-border-radius-rounded;
|
||||
}
|
||||
// Round Shape
|
||||
&.vc_btn3-shape-round {
|
||||
border-radius: @vc_btn3-border-radius-round;
|
||||
}
|
||||
}
|
||||
|
||||
// button sizes
|
||||
.vc_btn3 {
|
||||
//========== Sizes
|
||||
// XS size
|
||||
&.vc_btn3-size-xs {
|
||||
.make-btn3-size(@vc_btn3-xs-font-size, @vc_btn3-xs-padding-vertical, @vc_btn3-xs-padding-horizontal);
|
||||
.make-btn3-icon-size(@vc_btn3-xs-padding-horizontal, @vc_btn3-xs-icon-size, @vc_btn3-xs-font-size);
|
||||
}
|
||||
// SM size
|
||||
&.vc_btn3-size-sm {
|
||||
.make-btn3-size(@vc_btn3-sm-font-size, @vc_btn3-sm-padding-vertical, @vc_btn3-sm-padding-horizontal);
|
||||
.make-btn3-icon-size(@vc_btn3-sm-padding-horizontal, @vc_btn3-sm-icon-size, @vc_btn3-sm-font-size);
|
||||
}
|
||||
// MD size
|
||||
&.vc_btn3-size-md {
|
||||
.make-btn3-size(@vc_btn3-md-font-size, @vc_btn3-md-padding-vertical, @vc_btn3-md-padding-horizontal);
|
||||
.make-btn3-icon-size(@vc_btn3-md-padding-horizontal, @vc_btn3-md-icon-size, @vc_btn3-md-font-size);
|
||||
}
|
||||
// LG size
|
||||
&.vc_btn3-size-lg {
|
||||
.make-btn3-size(@vc_btn3-lg-font-size, @vc_btn3-lg-padding-vertical, @vc_btn3-lg-padding-horizontal);
|
||||
.make-btn3-icon-size(@vc_btn3-lg-padding-horizontal, @vc_btn3-lg-icon-size, @vc_btn3-lg-font-size);
|
||||
}
|
||||
}
|
||||
|
||||
// colors
|
||||
.vc_btn3 {
|
||||
//========== Colors
|
||||
// Generating color sets
|
||||
//-----------------------------------
|
||||
|
||||
// blue
|
||||
.vc-btn3-make-colors-set(~'vc_btn3-color-blue'; @vc_btn3-color-blue-text; @vc_btn3-color-blue; @vc_btn3-color-blue-gradient-end; @vc_btn3-color-blue-gradient; @vc_btn3-color-blue-contrast);
|
||||
// turquoise
|
||||
.vc-btn3-make-colors-set(~'vc_btn3-color-turquoise'; @vc_btn3-color-turquoise-text; @vc_btn3-color-turquoise; @vc_btn3-color-turquoise-gradient-end; @vc_btn3-color-turquoise-gradient; @vc_btn3-color-turquoise-contrast);
|
||||
// pink
|
||||
.vc-btn3-make-colors-set(~'vc_btn3-color-pink'; @vc_btn3-color-pink-text; @vc_btn3-color-pink; @vc_btn3-color-pink-gradient-end; @vc_btn3-color-pink-gradient; @vc_btn3-color-pink-contrast);
|
||||
// violet
|
||||
.vc-btn3-make-colors-set(~'vc_btn3-color-violet'; @vc_btn3-color-violet-text; @vc_btn3-color-violet; @vc_btn3-color-violet-gradient-end; @vc_btn3-color-violet-gradient; @vc_btn3-color-violet-contrast);
|
||||
// peacoc
|
||||
.vc-btn3-make-colors-set(~'vc_btn3-color-peacoc'; @vc_btn3-color-peacoc-text; @vc_btn3-color-peacoc; @vc_btn3-color-peacoc-gradient-end; @vc_btn3-color-peacoc-gradient; @vc_btn3-color-peacoc-contrast);
|
||||
// chino
|
||||
.vc-btn3-make-colors-set(~'vc_btn3-color-chino'; @vc_btn3-color-chino-text; @vc_btn3-color-chino; @vc_btn3-color-chino-gradient-end; @vc_btn3-color-chino-gradient; @vc_btn3-color-chino-contrast);
|
||||
// mulled_wine
|
||||
.vc-btn3-make-colors-set(~'vc_btn3-color-mulled-wine'; @vc_btn3-color-mulled-wine-text; @vc_btn3-color-mulled-wine; @vc_btn3-color-mulled-wine-gradient-end; @vc_btn3-color-mulled-wine-gradient; @vc_btn3-color-mulled-wine-contrast);
|
||||
// vista_blue
|
||||
.vc-btn3-make-colors-set(~'vc_btn3-color-vista-blue'; @vc_btn3-color-vista-blue-text; @vc_btn3-color-vista-blue; @vc_btn3-color-vista-blue-gradient-end; @vc_btn3-color-vista-blue-gradient; @vc_btn3-color-vista-blue-contrast);
|
||||
// orange
|
||||
.vc-btn3-make-colors-set(~'vc_btn3-color-orange'; @vc_btn3-color-orange-text; @vc_btn3-color-orange; @vc_btn3-color-orange-gradient-end; @vc_btn3-color-orange-gradient; @vc_btn3-color-orange-contrast);
|
||||
// sky
|
||||
.vc-btn3-make-colors-set(~'vc_btn3-color-sky'; @vc_btn3-color-sky-text; @vc_btn3-color-sky; @vc_btn3-color-sky-gradient-end; @vc_btn3-color-sky-gradient; @vc_btn3-color-sky-contrast);
|
||||
// green
|
||||
.vc-btn3-make-colors-set(~'vc_btn3-color-green'; @vc_btn3-color-green-text; @vc_btn3-color-green; @vc_btn3-color-green-gradient-end; @vc_btn3-color-green-gradient; @vc_btn3-color-green-contrast);
|
||||
// juicy_pink
|
||||
.vc-btn3-make-colors-set(~'vc_btn3-color-juicy-pink'; @vc_btn3-color-juicy-pink-text; @vc_btn3-color-juicy-pink; @vc_btn3-color-juicy-pink-gradient-end; @vc_btn3-color-juicy-pink-gradient; @vc_btn3-color-juicy-pink-contrast);
|
||||
// sandy_brown
|
||||
.vc-btn3-make-colors-set(~'vc_btn3-color-sandy-brown'; @vc_btn3-color-sandy-brown-text; @vc_btn3-color-sandy-brown; @vc_btn3-color-sandy-brown-gradient-end; @vc_btn3-color-sandy-brown-gradient; @vc_btn3-color-sandy-brown-contrast);
|
||||
// purple
|
||||
.vc-btn3-make-colors-set(~'vc_btn3-color-purple'; @vc_btn3-color-purple-text; @vc_btn3-color-purple; @vc_btn3-color-purple-gradient-end; @vc_btn3-color-purple-gradient; @vc_btn3-color-purple-contrast);
|
||||
// black
|
||||
.vc-btn3-make-colors-set(~'vc_btn3-color-black'; @vc_btn3-color-black-text; @vc_btn3-color-black; @vc_btn3-color-black-gradient-end; @vc_btn3-color-black-gradient; @vc_btn3-color-black-contrast);
|
||||
// grey
|
||||
.vc-btn3-make-colors-set(~'vc_btn3-color-grey'; @vc_btn3-color-grey-text; @vc_btn3-color-grey; @vc_btn3-color-grey-gradient-end; @vc_btn3-color-grey-gradient; @vc_btn3-color-grey-contrast);
|
||||
// white
|
||||
.vc-btn3-make-colors-set(~'vc_btn3-color-white'; @vc_btn3-color-white-text; @vc_btn3-color-white; @vc_btn3-color-white-gradient-end; @vc_btn3-color-white-gradient; @vc_btn3-color-white-contrast);
|
||||
// custom colors
|
||||
// custom default
|
||||
.vc-btn3-make-colors-set(~'vc_btn3-color-default'; @vc_btn3-color-default-text; @vc_btn3-color-default; @vc_btn3-color-default-gradient-end; @vc_btn3-color-default-gradient; @vc_btn3-color-default-contrast);
|
||||
// custom primary
|
||||
.vc-btn3-make-colors-set(~'vc_btn3-color-primary'; @vc_btn3-color-primary-text; @vc_btn3-color-primary; @vc_btn3-color-primary-gradient-end; @vc_btn3-color-primary-gradient; @vc_btn3-color-primary-contrast);
|
||||
// custom info
|
||||
.vc-btn3-make-colors-set(~'vc_btn3-color-info'; @vc_btn3-color-info-text; @vc_btn3-color-info; @vc_btn3-color-info-gradient-end; @vc_btn3-color-info-gradient; @vc_btn3-color-info-contrast);
|
||||
// custom success
|
||||
.vc-btn3-make-colors-set(~'vc_btn3-color-success'; @vc_btn3-color-success-text; @vc_btn3-color-success; @vc_btn3-color-success-gradient-end; @vc_btn3-color-success-gradient; @vc_btn3-color-success-contrast);
|
||||
// custom warning
|
||||
.vc-btn3-make-colors-set(~'vc_btn3-color-warning'; @vc_btn3-color-warning-text; @vc_btn3-color-warning; @vc_btn3-color-warning-gradient-end; @vc_btn3-color-warning-gradient; @vc_btn3-color-warning-contrast);
|
||||
// custom danger
|
||||
.vc-btn3-make-colors-set(~'vc_btn3-color-danger'; @vc_btn3-color-danger-text; @vc_btn3-color-danger; @vc_btn3-color-danger-gradient-end; @vc_btn3-color-danger-gradient; @vc_btn3-color-danger-contrast);
|
||||
// custom inverse
|
||||
.vc-btn3-make-colors-set(~'vc_btn3-color-inverse'; @vc_btn3-color-inverse-text; @vc_btn3-color-inverse; @vc_btn3-color-inverse-gradient-end; @vc_btn3-color-inverse-gradient; @vc_btn3-color-inverse-contrast);
|
||||
|
||||
// Color Fixes
|
||||
//-----------------------------------
|
||||
// black
|
||||
&.vc_btn3-color-black {
|
||||
&.vc_btn3-style-outline {
|
||||
color: @vc_btn3-color-black;
|
||||
}
|
||||
}
|
||||
|
||||
// grey
|
||||
&.vc_btn3-color-grey {
|
||||
&.vc_btn3-style-outline {
|
||||
color: @vc_btn3-color-grey;
|
||||
}
|
||||
}
|
||||
|
||||
// white
|
||||
&.vc_btn3-color-white {
|
||||
&.vc_btn3-style-outline {
|
||||
color: @vc_btn3-color-white;
|
||||
}
|
||||
&.vc_btn3-style-modern {
|
||||
#gradient > .vertical(@start-color: rgba(0, 0, 0, .01); @end-color: rgba(0, 0, 0, .02));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//========== Positions
|
||||
.vc_btn3-container {
|
||||
&.vc_btn3-center {
|
||||
text-align: center;
|
||||
}
|
||||
&.vc_btn3-left {
|
||||
text-align: left;
|
||||
}
|
||||
&.vc_btn3-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
// Fix for block button
|
||||
&.vc_btn3-center {
|
||||
.vc_btn3-block {
|
||||
&.vc_btn3-icon-left,
|
||||
&.vc_btn3-icon-right {
|
||||
.vc_btn3-icon {
|
||||
display: inline-block;
|
||||
position: static;
|
||||
}
|
||||
.vc_btn3-icon {
|
||||
-webkit-transform: translate(0, 0);
|
||||
-ms-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
min-width: 1em;
|
||||
}
|
||||
}
|
||||
&.vc_btn3-icon-left:not(.vc_btn3-o-empty) {
|
||||
.vc_btn3-icon {
|
||||
margin-right: .5em;
|
||||
}
|
||||
}
|
||||
&.vc_btn3-icon-right:not(.vc_btn3-o-empty) {
|
||||
.vc_btn3-icon {
|
||||
margin-left: .5em;
|
||||
}
|
||||
}
|
||||
// XS size
|
||||
&.vc_btn3-size-xs {
|
||||
.make-btn3-size(@vc_btn3-xs-font-size, @vc_btn3-xs-padding-vertical, @vc_btn3-xs-padding-horizontal);
|
||||
}
|
||||
// SM size
|
||||
&.vc_btn3-size-sm {
|
||||
.make-btn3-size(@vc_btn3-sm-font-size, @vc_btn3-sm-padding-vertical, @vc_btn3-sm-padding-horizontal);
|
||||
}
|
||||
// MD size
|
||||
&.vc_btn3-size-md {
|
||||
.make-btn3-size(@vc_btn3-md-font-size, @vc_btn3-md-padding-vertical, @vc_btn3-md-padding-horizontal);
|
||||
}
|
||||
// LG size
|
||||
&.vc_btn3-size-lg {
|
||||
.make-btn3-size(@vc_btn3-lg-font-size, @vc_btn3-lg-padding-vertical, @vc_btn3-lg-padding-horizontal);
|
||||
}
|
||||
}
|
||||
}
|
||||
.vc_btn3-block {
|
||||
&.vc_btn3-icon-left,
|
||||
&.vc_btn3-icon-right {
|
||||
text-align: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//========== Mixins
|
||||
// Button sizes
|
||||
.make-btn3-size(@font-size:false; @padding-vertical:false; @padding-horizontal:false;) {
|
||||
& when not (@font-size = false) {
|
||||
font-size: @font-size;
|
||||
}
|
||||
& when not (@padding-vertical = false) {
|
||||
padding-top: @padding-vertical;
|
||||
padding-bottom: @padding-vertical;
|
||||
}
|
||||
& when not (@padding-horizontal = false) {
|
||||
padding-left: @padding-horizontal;
|
||||
padding-right: @padding-horizontal;
|
||||
}
|
||||
&.vc_btn3-style-outline-custom,
|
||||
&.vc_btn3-style-outline {
|
||||
& when not (@padding-vertical = false) {
|
||||
padding-top: @padding-vertical - @vc_btn3-border-outline + @vc_btn3-border-base;
|
||||
padding-bottom: @padding-vertical - @vc_btn3-border-outline + @vc_btn3-border-base;
|
||||
}
|
||||
& when not (@padding-horizontal = false) {
|
||||
padding-left: @padding-horizontal - @vc_btn3-border-outline + @vc_btn3-border-base;
|
||||
padding-right: @padding-horizontal - @vc_btn3-border-outline + @vc_btn3-border-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Icon sizes
|
||||
.make-btn3-icon-size(@padding-horizontal, @icon-size, @line-height) {
|
||||
// indents and padding
|
||||
.vc_btn3-icon {
|
||||
font-size: @icon-size;
|
||||
height: @line-height;
|
||||
line-height: @line-height;
|
||||
}
|
||||
// left icon
|
||||
&.vc_btn3-icon-left:not(.vc_btn3-o-empty) {
|
||||
padding-left: ceil(@padding-horizontal * 2 + @icon-size / 2);
|
||||
.vc_btn3-icon {
|
||||
left: @padding-horizontal;
|
||||
}
|
||||
}
|
||||
// right icon
|
||||
&.vc_btn3-icon-right:not(.vc_btn3-o-empty) {
|
||||
padding-right: ceil(@padding-horizontal * 2 + @icon-size / 2);
|
||||
.vc_btn3-icon {
|
||||
right: @padding-horizontal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Creating Colors
|
||||
.vc-make-btn3-color(@text; @background: false; @border: false; @color-hover: false; @background-hover: false; @border-hover: false; ) {
|
||||
color: @text;
|
||||
& when not (@border = false) {
|
||||
border-color: @border;
|
||||
}
|
||||
& when not (@background = false) {
|
||||
background-color: @background;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
& when (@color-hover = false) {
|
||||
color: darken(@text, 3%);
|
||||
}
|
||||
& when not (@color-hover = false) {
|
||||
color: @color-hover;
|
||||
}
|
||||
& when not (@border = false) and (@border-hover = false) {
|
||||
border-color: darken(@border, 6%);
|
||||
}
|
||||
& when not (@border-hover = false) {
|
||||
border-color: @border-hover;
|
||||
}
|
||||
& when not (@background = false) and (@background-hover = false) {
|
||||
background-color: darken(@background, 6%);
|
||||
}
|
||||
& when not (@background-hover = false) {
|
||||
background-color: @background-hover;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.active {
|
||||
& when (@color-hover = false) {
|
||||
color: darken(@text, 5%);
|
||||
}
|
||||
& when not (@color-hover = false) {
|
||||
color: @color-hover;
|
||||
}
|
||||
& when not (@border = false) and (@border-hover = false) {
|
||||
border-color: darken(@border, 8%);
|
||||
}
|
||||
& when not (@border-hover = false) {
|
||||
border-color: @border-hover;
|
||||
}
|
||||
& when not (@background = false) and (@background-hover = false) {
|
||||
background-color: darken(@background, 8%);
|
||||
}
|
||||
& when not (@background-hover = false) {
|
||||
background-color: @background-hover;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// make colors set
|
||||
.vc-btn3-make-colors-set(@selector; @text; @background; @gradient-end; @gradient; @contrast-color) {
|
||||
&.@{selector} {
|
||||
// Flat (default)
|
||||
&,
|
||||
&.vc_btn3-style-flat {
|
||||
.vc-make-btn3-color(@text: @contrast-color; @background: @background);
|
||||
}
|
||||
// Outline
|
||||
&.vc_btn3-style-outline {
|
||||
.vc-make-btn3-color(@text; @border: @background; @background: transparent; @color-hover: @contrast-color; @background-hover: @background; @border-hover: @background);
|
||||
}
|
||||
// 3d
|
||||
&.vc_btn3-style-3d {
|
||||
.vc-make-btn3-color(@text: @contrast-color; @background: @background; @background-hover: @background);
|
||||
|
||||
box-shadow: 0 @vc_btn3-shadow-width-md-3d 0 darken(@background, 11%);
|
||||
&:hover,
|
||||
&:focus {
|
||||
top: @vc_btn3-shadow-width-md-3d - @vc_btn3-shadow-width-hover;
|
||||
box-shadow: 0 @vc_btn3-shadow-width-hover 0 darken(@background, 11%);
|
||||
}
|
||||
// XS size
|
||||
&.vc_btn3-size-xs {
|
||||
box-shadow: 0 @vc_btn3-shadow-width-xs-3d 0 darken(@background, 11%);
|
||||
&:hover,
|
||||
&:focus {
|
||||
top: @vc_btn3-shadow-width-xs-3d - @vc_btn3-shadow-width-hover;
|
||||
box-shadow: 0 @vc_btn3-shadow-width-hover 0 darken(@background, 11%);
|
||||
}
|
||||
}
|
||||
// SM size
|
||||
&.vc_btn3-size-sm {
|
||||
box-shadow: 0 @vc_btn3-shadow-width-sm-3d 0 darken(@background, 11%);
|
||||
&:hover,
|
||||
&:focus {
|
||||
top: @vc_btn3-shadow-width-sm-3d - @vc_btn3-shadow-width-hover;
|
||||
box-shadow: 0 @vc_btn3-shadow-width-hover 0 darken(@background, 11%);
|
||||
}
|
||||
}
|
||||
// LG size
|
||||
&.vc_btn3-size-lg {
|
||||
box-shadow: 0 @vc_btn3-shadow-width-lg-3d 0 darken(@background, 11%);
|
||||
&:hover,
|
||||
&:focus {
|
||||
top: @vc_btn3-shadow-width-lg-3d - @vc_btn3-shadow-width-hover;
|
||||
box-shadow: 0 @vc_btn3-shadow-width-hover 0 darken(@background, 11%);
|
||||
}
|
||||
}
|
||||
}
|
||||
// Modern
|
||||
&.vc_btn3-style-modern {
|
||||
.vc-make-btn3-color(@text: @contrast-color; @background: @background; @border: @background);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
// Param Window
|
||||
.vc_btn3-colored-dropdown {
|
||||
.vc_edit_color_option_variants(~'default'; @vc_btn3-color-default; @vc_btn3-color-default-contrast);
|
||||
.vc_edit_color_option_variants(~'primary'; @vc_btn3-color-primary; @vc_btn3-color-primary-contrast);
|
||||
.vc_edit_color_option_variants(~'info'; @vc_btn3-color-info; @vc_btn3-color-info-contrast);
|
||||
.vc_edit_color_option_variants(~'success'; @vc_btn3-color-success; @vc_btn3-color-success-contrast);
|
||||
.vc_edit_color_option_variants(~'warning'; @vc_btn3-color-warning; @vc_btn3-color-warning-contrast);
|
||||
.vc_edit_color_option_variants(~'danger'; @vc_btn3-color-danger; @vc_btn3-color-danger-contrast);
|
||||
.vc_edit_color_option_variants(~'inverse'; @vc_btn3-color-inverse; @vc_btn3-color-inverse-contrast);
|
||||
}
|
||||
@@ -0,0 +1,135 @@
|
||||
/* Call to action
|
||||
---------------------------------------------------------- */
|
||||
.vc_call_to_action {
|
||||
background-color: @vc_call_to_action_2_bg;
|
||||
border: 2px solid @vc_call_to_action_2_bg;
|
||||
padding: 2em;
|
||||
border-radius: 5px;
|
||||
*:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
&.vc_cta_ {
|
||||
&rounded {
|
||||
//default style
|
||||
}
|
||||
&square {
|
||||
border-radius: 0;
|
||||
}
|
||||
&square_outlined {
|
||||
border-radius: 0;
|
||||
background: none !important;
|
||||
}
|
||||
&round {
|
||||
border-radius: 50px;
|
||||
}
|
||||
&outlined {
|
||||
background: none !important;
|
||||
}
|
||||
}
|
||||
hgroup {
|
||||
h2, h4 {
|
||||
margin: 0;
|
||||
clear: none;
|
||||
}
|
||||
+ p {
|
||||
margin-top: 1em;
|
||||
}
|
||||
}
|
||||
&.vc_cta_btn_pos {
|
||||
&_right {
|
||||
.vc_cta_btn {
|
||||
float: right;
|
||||
margin-left: 2em;
|
||||
}
|
||||
}
|
||||
&_left {
|
||||
.vc_cta_btn {
|
||||
float: left;
|
||||
margin-right: 2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wpb_call_to_action {
|
||||
position: relative;
|
||||
background-color: @vc_call_to_action_bg;
|
||||
padding: 20px;
|
||||
padding: @vc_element_margin_bottom;
|
||||
border: 1px solid @vc_call_to_action_border;
|
||||
|
||||
.box-sizing(border-box);
|
||||
|
||||
.wpb_button {
|
||||
margin: 0;
|
||||
.box-sizing(border-box);
|
||||
}
|
||||
}
|
||||
|
||||
.cta_align_left .wpb_button {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.cta_align_right .wpb_button {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.cta_align_left .wpb_button,
|
||||
.cta_align_right .wpb_button {
|
||||
max-width: @vc_cta_button_w;
|
||||
}
|
||||
|
||||
.cta_align_left .wpb_call_text,
|
||||
.cta_align_right .wpb_call_text {
|
||||
width: 70%;
|
||||
float: left;
|
||||
clear: none;
|
||||
}
|
||||
|
||||
.cta_align_left .wpb_call_text {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.wpb_call_to_action .wpb_call_text,
|
||||
#content .wpb_call_to_action .wpb_call_text {
|
||||
margin: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.cta_align_bottom {
|
||||
text-align: center;
|
||||
|
||||
.wpb_button {
|
||||
position: static;
|
||||
margin-top: @vc_margin_bottom_gold;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.cta_no_button {
|
||||
.wpb_call_text {
|
||||
width: auto;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Call to action responsive rules
|
||||
---------------------------------------------------------- */
|
||||
@media (max-width: 600px) {
|
||||
.vc_responsive {
|
||||
.cta_align_left .wpb_button,
|
||||
.cta_align_right .wpb_button {
|
||||
max-width: 70%;
|
||||
width: 70%;
|
||||
float: none;
|
||||
display: block;
|
||||
margin: 3% auto;
|
||||
}
|
||||
.cta_align_left .wpb_call_text,
|
||||
.cta_align_right .wpb_call_text {
|
||||
width: auto;
|
||||
max-width: none;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,600 @@
|
||||
/* Call to action 3
|
||||
---------------------------------------------------------- */
|
||||
// @dependency vc_icon_element.less
|
||||
|
||||
@vc_cta3-font-size-base: 1em;
|
||||
@vc_cta3-gold-size-base: 14px;
|
||||
@vc_cta3-elements-margin: 1em;
|
||||
@vc_cta3-padding-vertical: @vc_cta3-gold-size-base * 2;
|
||||
@vc_cta3-padding-horizontal: @vc_cta3-gold-size-base * 2;
|
||||
@vc_cta3-shadow-width-3d: 5px;
|
||||
@vc_cta3-border-radius-rounded: 5px;
|
||||
@vc_cta3-border-radius-round: 4em;
|
||||
@vc_cta3-actions-max-width: 30%;
|
||||
@vc_cta3-icons-max-width: none;
|
||||
|
||||
@vc_tta3-outline-border-width: 3px;
|
||||
|
||||
//====== COLORS
|
||||
// Classic
|
||||
@vc_cta3-color-classic: @vc_call_to_action_border;
|
||||
@vc_cta3-color-classic-bg: @vc_call_to_action_bg;
|
||||
@vc_cta3-color-classic-border: @vc_cta3-color-classic;
|
||||
@vc_cta3-color-classic-text: #9d9d9e;
|
||||
@vc_cta3-color-classic-headings: #666;
|
||||
// Custom
|
||||
@vc_cta3-color-custom-bg: @vc_cta3-color-classic-bg;
|
||||
@vc_cta3-color-custom-border: @vc_cta3-color-classic-border;
|
||||
// ---------------------------
|
||||
|
||||
// blue
|
||||
@vc_cta3-color-blue: @blue;
|
||||
@vc_cta3-color-blue-bg: lighten(@vc_cta3-color-blue, 38%);
|
||||
@vc_cta3-color-blue-border: darken(@vc_cta3-color-blue-bg, 10%);
|
||||
@vc_cta3-color-blue-text: #c9d2f0;
|
||||
@vc_cta3-color-blue-headings: #fff;
|
||||
// turquoise
|
||||
@vc_cta3-color-turquoise: @turquoise;
|
||||
@vc_cta3-color-turquoise-bg: lighten(desaturate(@vc_cta3-color-turquoise, 20%), 55%);
|
||||
@vc_cta3-color-turquoise-border: darken(desaturate(@vc_cta3-color-turquoise-bg, 25%), 10%);
|
||||
@vc_cta3-color-turquoise-text: #d3f5f1;
|
||||
@vc_cta3-color-turquoise-headings: #fff;
|
||||
// pink
|
||||
@vc_cta3-color-pink: @pink;
|
||||
@vc_cta3-color-pink-bg: lighten(@vc_cta3-color-pink, 28%);
|
||||
@vc_cta3-color-pink-border: darken(@vc_cta3-color-pink-bg, 5%);
|
||||
@vc_cta3-color-pink-text: #fcdbd7;
|
||||
@vc_cta3-color-pink-headings: #fff;
|
||||
// violet
|
||||
@vc_cta3-color-violet: @violet;
|
||||
@vc_cta3-color-violet-bg: lighten(@vc_cta3-color-violet, 35%);
|
||||
@vc_cta3-color-violet-border: darken(@vc_cta3-color-violet-bg, 10%);
|
||||
@vc_cta3-color-violet-text: #e1d5f5;
|
||||
@vc_cta3-color-violet-headings: #fff;
|
||||
// peacoc
|
||||
@vc_cta3-color-peacoc: @peacoc;
|
||||
@vc_cta3-color-peacoc-bg: lighten(@vc_cta3-color-peacoc, 40%);
|
||||
@vc_cta3-color-peacoc-border: darken(@vc_cta3-color-peacoc-bg, 10%);
|
||||
@vc_cta3-color-peacoc-text: #d0edf5;
|
||||
@vc_cta3-color-peacoc-headings: #fff;
|
||||
// chino
|
||||
@vc_cta3-color-chino: @chino;
|
||||
@vc_cta3-color-chino-bg: lighten(@vc_cta3-color-chino, 22%);
|
||||
@vc_cta3-color-chino-border: darken(@vc_cta3-color-chino-bg, 10%);
|
||||
@vc_cta3-color-chino-text: #f7f3eb;
|
||||
@vc_cta3-color-chino-headings: #fff;
|
||||
// mulled_wine
|
||||
@vc_cta3-color-mulled-wine: @mulled_wine;
|
||||
@vc_cta3-color-mulled-wine-bg: lighten(@vc_cta3-color-mulled-wine, 60%);
|
||||
@vc_cta3-color-mulled-wine-border: darken(@vc_cta3-color-mulled-wine-bg, 10%);
|
||||
@vc_cta3-color-mulled-wine-text: #e2ddeb;
|
||||
@vc_cta3-color-mulled-wine-headings: #fff;
|
||||
// vista_blue
|
||||
@vc_cta3-color-vista-blue: @vista_blue;
|
||||
@vc_cta3-color-vista-blue-bg: lighten(@vc_cta3-color-vista-blue, 28%);
|
||||
@vc_cta3-color-vista-blue-border: darken(@vc_cta3-color-vista-blue-bg, 10%);
|
||||
@vc_cta3-color-vista-blue-text: #e1f5e9;
|
||||
@vc_cta3-color-vista-blue-headings: #fff;
|
||||
// orange
|
||||
@vc_cta3-color-orange: @orange;
|
||||
@vc_cta3-color-orange-bg: lighten(@vc_cta3-color-orange, 27%);
|
||||
@vc_cta3-color-orange-border: darken(@vc_cta3-color-orange-bg, 10%);
|
||||
@vc_cta3-color-orange-text: #faf0e1;
|
||||
@vc_cta3-color-orange-headings: #fff;
|
||||
// sky
|
||||
@vc_cta3-color-sky: @sky;
|
||||
@vc_cta3-color-sky-bg: lighten(@vc_cta3-color-sky, 33%);
|
||||
@vc_cta3-color-sky-border: darken(@vc_cta3-color-sky-bg, 10%);
|
||||
@vc_cta3-color-sky-text: #dce9f5;
|
||||
@vc_cta3-color-sky-headings: #fff;
|
||||
// green
|
||||
@vc_cta3-color-green: @green;
|
||||
@vc_cta3-color-green-bg: lighten(@vc_cta3-color-green, 47%);
|
||||
@vc_cta3-color-green-border: darken(@vc_cta3-color-green-bg, 15%);
|
||||
@vc_cta3-color-green-text: #e5f2da;
|
||||
@vc_cta3-color-green-headings: #fff;
|
||||
// juicy_pink
|
||||
@vc_cta3-color-juicy-pink: @juicy_pink;
|
||||
@vc_cta3-color-juicy-pink-bg: lighten(@vc_cta3-color-juicy-pink, 35%);
|
||||
@vc_cta3-color-juicy-pink-border: darken(@vc_cta3-color-juicy-pink-bg, 10%);
|
||||
@vc_cta3-color-juicy-pink-text: #fce2e1;
|
||||
@vc_cta3-color-juicy-pink-headings: #fff;
|
||||
// sandy_brown
|
||||
@vc_cta3-color-sandy-brown: @sandy_brown;
|
||||
@vc_cta3-color-sandy-brown-bg: lighten(@vc_cta3-color-sandy-brown, 27%);
|
||||
@vc_cta3-color-sandy-brown-border: darken(@vc_cta3-color-sandy-brown-bg, 10%);
|
||||
@vc_cta3-color-sandy-brown-text: #f7e1d7;
|
||||
@vc_cta3-color-sandy-brown-headings: #fff;
|
||||
// purple
|
||||
@vc_cta3-color-purple: @purple;
|
||||
@vc_cta3-color-purple-bg: lighten(@vc_cta3-color-purple, 33%);
|
||||
@vc_cta3-color-purple-border: darken(@vc_cta3-color-purple-bg, 10%);
|
||||
@vc_cta3-color-purple-text: #f4dff5;
|
||||
@vc_cta3-color-purple-headings: #fff;
|
||||
// black
|
||||
@vc_cta3-color-black: @black;
|
||||
@vc_cta3-color-black-bg: lighten(@vc_cta3-color-black, 7%);
|
||||
@vc_cta3-color-black-border: @vc_cta3-color-black;
|
||||
@vc_cta3-color-black-text: #d9d9d9;
|
||||
@vc_cta3-color-black-headings: #fff;
|
||||
// grey
|
||||
@vc_cta3-color-grey: @grey;
|
||||
@vc_cta3-color-grey-bg: @vc_cta3-color-grey;
|
||||
@vc_cta3-color-grey-border: darken(@vc_cta3-color-grey-bg, 10%);
|
||||
@vc_cta3-color-grey-text: #9d9d9e;
|
||||
@vc_cta3-color-grey-headings: #666;
|
||||
// white
|
||||
@vc_cta3-color-white: @white;
|
||||
@vc_cta3-color-white-bg: @vc_cta3-color-white;
|
||||
@vc_cta3-color-white-border: darken(@vc_cta3-color-white-bg, 10%);
|
||||
@vc_cta3-color-white-text: #9d9d9e;
|
||||
@vc_cta3-color-white-headings: #666;
|
||||
|
||||
.vc_cta3-container {
|
||||
margin-bottom: @vc_element_margin_bottom;
|
||||
&::before,
|
||||
&::after {
|
||||
display: table;
|
||||
content: ' ';
|
||||
}
|
||||
// Creating sizes
|
||||
//------------------
|
||||
&.vc_cta3-size-xs {
|
||||
width: 50%;
|
||||
}
|
||||
&.vc_cta3-size-sm {
|
||||
width: 60%;
|
||||
}
|
||||
&.vc_cta3-size-md {
|
||||
width: 70%;
|
||||
}
|
||||
&.vc_cta3-size-lg {
|
||||
width: 80%;
|
||||
}
|
||||
&.vc_cta3-size-xl {
|
||||
width: 90%;
|
||||
}
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.vc_general.vc_cta3 {
|
||||
border: 1px solid transparent;
|
||||
font-size: @vc_cta3-font-size-base;
|
||||
padding: @vc_cta3-padding-vertical @vc_cta3-padding-horizontal;
|
||||
word-wrap: break-word;
|
||||
|
||||
.vc_cta3-content {
|
||||
vertical-align: top;
|
||||
}
|
||||
.vc_cta3-content,
|
||||
.vc_cta3-icons {
|
||||
> *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.vc_cta3-actions {
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
@media (min-width: @grid-float-breakpoint) {
|
||||
.vc_btn3-container {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.vc_cta3-icons {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
h2, h4 {
|
||||
margin-top: 0;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
// Creating Layouts
|
||||
//------------------
|
||||
&.vc_cta3-align-left {
|
||||
.vc_cta3-content {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
&.vc_cta3-align-right {
|
||||
.vc_cta3-content {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
&.vc_cta3-align-center {
|
||||
.vc_cta3-content {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
&.vc_cta3-align-justify {
|
||||
.vc_cta3-content {
|
||||
text-align: justify;
|
||||
}
|
||||
}
|
||||
|
||||
// Changing icons positions
|
||||
// ----------------------------
|
||||
// on top
|
||||
&.vc_cta3-icons-top {
|
||||
.vc_cta3_content-container {
|
||||
padding-top: @vc_cta3-elements-margin;
|
||||
}
|
||||
.vc_cta3-icons {
|
||||
text-align: center;
|
||||
.vc_icon_element {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
// on bottom
|
||||
&.vc_cta3-icons-bottom {
|
||||
.vc_cta3_content-container {
|
||||
padding-bottom: @vc_cta3-elements-margin;
|
||||
}
|
||||
.vc_cta3-icons {
|
||||
text-align: center;
|
||||
.vc_icon_element {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// on left side
|
||||
&.vc_cta3-icons-left {
|
||||
.vc_cta3-icons {
|
||||
display: table-cell;
|
||||
}
|
||||
.vc_cta3_content-container {
|
||||
display: table-cell;
|
||||
padding-left: @vc_cta3-elements-margin;
|
||||
}
|
||||
}
|
||||
|
||||
// on right side
|
||||
&.vc_cta3-icons-right {
|
||||
.vc_cta3-icons {
|
||||
display: table-cell;
|
||||
}
|
||||
.vc_cta3_content-container {
|
||||
display: table-cell;
|
||||
padding-right: @vc_cta3-elements-margin;
|
||||
}
|
||||
}
|
||||
|
||||
// Icons on border
|
||||
&.vc_cta3-icons-on-border {
|
||||
position: relative;
|
||||
.vc_cta3-icons {
|
||||
position: absolute;
|
||||
}
|
||||
&.vc_cta3-icons-right {
|
||||
.vc_cta3-icons {
|
||||
right: 0;
|
||||
top: 50%;
|
||||
-webkit-transform: translate(50%, -50%);
|
||||
-ms-transform: translate(50%, -50%);
|
||||
transform: translate(50%, -50%);
|
||||
}
|
||||
.vc_cta3-make-icon-on-border-margins(~'right');
|
||||
}
|
||||
&.vc_cta3-icons-left {
|
||||
.vc_cta3-icons {
|
||||
left: 0;
|
||||
top: 50%;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
-ms-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.vc_cta3-make-icon-on-border-margins(~'left');
|
||||
}
|
||||
&.vc_cta3-icons-top {
|
||||
.vc_cta3-icons {
|
||||
left: 50%;
|
||||
top: 0;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
-ms-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.vc_cta3-make-icon-on-border-margins(~'top');
|
||||
}
|
||||
&.vc_cta3-icons-bottom {
|
||||
.vc_cta3-icons {
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
-webkit-transform: translate(-50%, 50%);
|
||||
-ms-transform: translate(-50%, 50%);
|
||||
transform: translate(-50%, 50%);
|
||||
}
|
||||
.vc_cta3-make-icon-on-border-margins(~'bottom');
|
||||
}
|
||||
}
|
||||
|
||||
// Changing actions positions
|
||||
// ----------------------------
|
||||
// on top
|
||||
&.vc_cta3-actions-top {
|
||||
.vc_cta3-content {
|
||||
margin-top: @vc_cta3-elements-margin;
|
||||
}
|
||||
}
|
||||
// on bottom
|
||||
&.vc_cta3-actions-bottom {
|
||||
.vc_cta3-content {
|
||||
margin-bottom: @vc_cta3-elements-margin;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: @grid-float-breakpoint) {
|
||||
// on left side
|
||||
&.vc_cta3-actions-left {
|
||||
.vc_cta3-actions {
|
||||
display: table-cell;
|
||||
max-width: 30%;
|
||||
}
|
||||
.vc_cta3-content {
|
||||
padding-left: @vc_cta3-padding-horizontal;
|
||||
display: table-cell;
|
||||
}
|
||||
}
|
||||
|
||||
// on right side
|
||||
&.vc_cta3-actions-right {
|
||||
.vc_cta3-actions {
|
||||
display: table-cell;
|
||||
max-width: 30%;
|
||||
}
|
||||
.vc_cta3-content {
|
||||
padding-right: @vc_cta3-padding-horizontal;
|
||||
display: table-cell;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Creating Styles
|
||||
//------------------
|
||||
// Classic (Old style)
|
||||
&.vc_cta3-style-classic {
|
||||
border-color: @vc_cta3-color-classic-border;
|
||||
background-color: @vc_cta3-color-classic-bg;
|
||||
&:not(.vc_cta3-color-classic) .vc_cta3-content-header {
|
||||
h2, h4 {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Flat
|
||||
&.vc_cta3-style-flat {
|
||||
.vc_cta3-content-header {
|
||||
h2, h4 {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Outline (transparent background)
|
||||
&.vc_cta3-style-outline {
|
||||
border-width: @vc_tta3-outline-border-width;
|
||||
&:not(.vc_cta3-color-classic) .vc_cta3-content-header {
|
||||
h2, h4 {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 3d
|
||||
&.vc_cta3-style-3d {
|
||||
.vc_cta3-content-header {
|
||||
h2, h4 {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Custom
|
||||
&.vc_cta3-style-custom {
|
||||
border-color: @vc_cta3-color-custom-border;
|
||||
background-color: @vc_cta3-color-custom-bg;
|
||||
}
|
||||
|
||||
// Creating Shapes
|
||||
//------------------
|
||||
// Square
|
||||
&.vc_cta3-shape-square {
|
||||
border-radius: 0;
|
||||
}
|
||||
// Rounded
|
||||
&.vc_cta3-shape-rounded {
|
||||
border-radius: @vc_cta3-border-radius-rounded;
|
||||
}
|
||||
// Round
|
||||
&.vc_cta3-shape-round {
|
||||
border-radius: @vc_cta3-border-radius-round;
|
||||
}
|
||||
|
||||
// Generating color sets
|
||||
//------------------
|
||||
// blue
|
||||
.vc_cta3-make-colors-set(~'vc_cta3-color-blue'; @vc_cta3-color-blue; @vc_cta3-color-blue-text; @vc_cta3-color-blue-border; @vc_cta3-color-blue-bg; @vc_cta3-color-blue-headings);
|
||||
// turquoise
|
||||
.vc_cta3-make-colors-set(~'vc_cta3-color-turquoise'; @vc_cta3-color-turquoise; @vc_cta3-color-turquoise-text; @vc_cta3-color-turquoise-border; @vc_cta3-color-turquoise-bg; @vc_cta3-color-turquoise-headings);
|
||||
// pink
|
||||
.vc_cta3-make-colors-set(~'vc_cta3-color-pink'; @vc_cta3-color-pink; @vc_cta3-color-pink-text; @vc_cta3-color-pink-border; @vc_cta3-color-pink-bg; @vc_cta3-color-pink-headings);
|
||||
// violet
|
||||
.vc_cta3-make-colors-set(~'vc_cta3-color-violet'; @vc_cta3-color-violet; @vc_cta3-color-violet-text; @vc_cta3-color-violet-border; @vc_cta3-color-violet-bg; @vc_cta3-color-violet-headings);
|
||||
// peacoc
|
||||
.vc_cta3-make-colors-set(~'vc_cta3-color-peacoc'; @vc_cta3-color-peacoc; @vc_cta3-color-peacoc-text; @vc_cta3-color-peacoc-border; @vc_cta3-color-peacoc-bg; @vc_cta3-color-peacoc-headings);
|
||||
// chino
|
||||
.vc_cta3-make-colors-set(~'vc_cta3-color-chino'; @vc_cta3-color-chino; @vc_cta3-color-chino-text; @vc_cta3-color-chino-border; @vc_cta3-color-chino-bg; @vc_cta3-color-chino-headings);
|
||||
// mulled_wine
|
||||
.vc_cta3-make-colors-set(~'vc_cta3-color-mulled-wine'; @vc_cta3-color-mulled-wine; @vc_cta3-color-mulled-wine-text; @vc_cta3-color-mulled-wine-border; @vc_cta3-color-mulled-wine-bg; @vc_cta3-color-mulled-wine-headings);
|
||||
// vista_blue
|
||||
.vc_cta3-make-colors-set(~'vc_cta3-color-vista-blue'; @vc_cta3-color-vista-blue; @vc_cta3-color-vista-blue-text; @vc_cta3-color-vista-blue-border; @vc_cta3-color-vista-blue-bg; @vc_cta3-color-vista-blue-headings);
|
||||
// orange
|
||||
.vc_cta3-make-colors-set(~'vc_cta3-color-orange'; @vc_cta3-color-orange; @vc_cta3-color-orange-text; @vc_cta3-color-orange-border; @vc_cta3-color-orange-bg; @vc_cta3-color-orange-headings);
|
||||
// sky
|
||||
.vc_cta3-make-colors-set(~'vc_cta3-color-sky'; @vc_cta3-color-sky; @vc_cta3-color-sky-text; @vc_cta3-color-sky-border; @vc_cta3-color-sky-bg; @vc_cta3-color-sky-headings);
|
||||
// green
|
||||
.vc_cta3-make-colors-set(~'vc_cta3-color-green'; @vc_cta3-color-green; @vc_cta3-color-green-text; @vc_cta3-color-green-border; @vc_cta3-color-green-bg; @vc_cta3-color-green-headings);
|
||||
// juicy_pink
|
||||
.vc_cta3-make-colors-set(~'vc_cta3-color-juicy-pink'; @vc_cta3-color-juicy-pink; @vc_cta3-color-juicy-pink-text; @vc_cta3-color-juicy-pink-border; @vc_cta3-color-juicy-pink-bg; @vc_cta3-color-juicy-pink-headings);
|
||||
// sandy_brown
|
||||
.vc_cta3-make-colors-set(~'vc_cta3-color-sandy-brown'; @vc_cta3-color-sandy-brown; @vc_cta3-color-sandy-brown-text; @vc_cta3-color-sandy-brown-border; @vc_cta3-color-sandy-brown-bg; @vc_cta3-color-sandy-brown-headings);
|
||||
// purple
|
||||
.vc_cta3-make-colors-set(~'vc_cta3-color-purple'; @vc_cta3-color-purple; @vc_cta3-color-purple-text; @vc_cta3-color-purple-border; @vc_cta3-color-purple-bg; @vc_cta3-color-purple-headings);
|
||||
// black
|
||||
.vc_cta3-make-colors-set(~'vc_cta3-color-black'; @vc_cta3-color-black; @vc_cta3-color-black-text; @vc_cta3-color-black-border; @vc_cta3-color-black-bg; @vc_cta3-color-black-headings);
|
||||
// grey
|
||||
.vc_cta3-make-colors-set(~'vc_cta3-color-grey'; @vc_cta3-color-grey; @vc_cta3-color-grey-text; @vc_cta3-color-grey-border; @vc_cta3-color-grey-bg; @vc_cta3-color-grey-headings);
|
||||
// white
|
||||
.vc_cta3-make-colors-set(~'vc_cta3-color-white'; @vc_cta3-color-white; @vc_cta3-color-white-text; @vc_cta3-color-white-border; @vc_cta3-color-white-bg; @vc_cta3-color-white-headings);
|
||||
|
||||
// Generating custom color sets
|
||||
//------------------
|
||||
// classic
|
||||
&.vc_cta3-color-classic {
|
||||
// Classic (Old style)
|
||||
&.vc_cta3-style-classic {
|
||||
.vc_make-cta3-color(@text: false; @headings-text: false);
|
||||
}
|
||||
// Flat
|
||||
&.vc_cta3-style-flat {
|
||||
.vc_make-cta3-color(@text: @vc_cta3-color-classic-text; @headings-text: @vc_cta3-color-classic-headings; @border: transparent; @background: @vc_cta3-color-classic);
|
||||
}
|
||||
// 3d
|
||||
&.vc_cta3-style-3d {
|
||||
box-shadow: 0 @vc_cta3-shadow-width-3d 0 darken(@vc_cta3-color-classic, 11%);
|
||||
.vc_make-cta3-color(@text: @vc_cta3-color-classic-text; @headings-text: @vc_cta3-color-classic-headings; @border: transparent; @background: @vc_cta3-color-classic);
|
||||
}
|
||||
// Outline (transparent background)
|
||||
&.vc_cta3-style-outline {
|
||||
.vc_make-cta3-color(@text: false; @headings-text: @vc_cta3-color-classic; @border: @vc_cta3-color-classic; @background: transparent);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Fix for icon element
|
||||
// ======================
|
||||
.vc_cta3 {
|
||||
&.vc_cta3-icon-size-xs {
|
||||
.vc_icon_element .vc_icon_element-inner {
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
}
|
||||
}
|
||||
&.vc_cta3-icon-size-sm {
|
||||
.vc_icon_element .vc_icon_element-inner {
|
||||
height: 2em;
|
||||
width: 2em;
|
||||
}
|
||||
}
|
||||
&.vc_cta3-icon-size-md {
|
||||
.vc_icon_element .vc_icon_element-inner {
|
||||
height: 3em;
|
||||
width: 3em;
|
||||
}
|
||||
}
|
||||
&.vc_cta3-icon-size-lg {
|
||||
.vc_icon_element .vc_icon_element-inner {
|
||||
height: 4em;
|
||||
width: 4em;
|
||||
}
|
||||
}
|
||||
&.vc_cta3-icon-size-xl {
|
||||
.vc_icon_element .vc_icon_element-inner {
|
||||
height: 5em;
|
||||
width: 5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//====== MIXINS
|
||||
// Creating Colors
|
||||
.vc_make-cta3-color(@text: false; @headings-text: false; @border: false; @background: false) {
|
||||
& when not (@text = false) {
|
||||
color: @text;
|
||||
}
|
||||
& when not (@headings-text = false) {
|
||||
.vc_cta3-content-header {
|
||||
color: @headings-text;
|
||||
}
|
||||
}
|
||||
& when not (@border = false) {
|
||||
border-color: @border;
|
||||
}
|
||||
& when not (@background = false) {
|
||||
background-color: @background;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// make colors set
|
||||
.vc_cta3-make-colors-set(@selector; @color; @text; @border; @background; @headings-color) {
|
||||
&.@{selector} {
|
||||
// Classic (Old style)
|
||||
&.vc_cta3-style-classic {
|
||||
.vc_make-cta3-color(@text: false; @headings-text: @color);
|
||||
}
|
||||
// Flat
|
||||
&.vc_cta3-style-flat {
|
||||
.vc_make-cta3-color(@text: @text; @headings-text: @headings-color; @border: transparent; @background: @color);
|
||||
}
|
||||
// 3d
|
||||
&.vc_cta3-style-3d {
|
||||
box-shadow: 0 @vc_cta3-shadow-width-3d 0 darken(@color, 11%);
|
||||
.vc_make-cta3-color(@text: @text; @headings-text: @headings-color; @border: transparent; @background: @color);
|
||||
}
|
||||
// Outline (transparent background)
|
||||
&.vc_cta3-style-outline {
|
||||
.vc_make-cta3-color(@text: false; @headings-text: @color; @border: @color; @background: transparent);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// make icon margins
|
||||
.vc_cta3-make-icon-on-border-margins(@direction;) {
|
||||
&.vc_cta3-icon-size-xs {
|
||||
margin-@{direction}: floor(@icon-element-font-size-base * unit(@icon-element-box-size-xs) / 2);
|
||||
.vc_cta3_content-container {
|
||||
padding-@{direction}: 0;
|
||||
}
|
||||
&.vc_cta3-icons-in-box .vc_cta3_content-container {
|
||||
padding-@{direction}: @vc_cta3-gold-size-base * 0.5;
|
||||
}
|
||||
}
|
||||
&.vc_cta3-icon-size-sm {
|
||||
margin-@{direction}: floor(@icon-element-font-size-base * unit(@icon-element-box-size-sm) / 2);
|
||||
.vc_cta3_content-container {
|
||||
padding-@{direction}: @vc_cta3-gold-size-base * 0.5;
|
||||
}
|
||||
&.vc_cta3-icons-in-box .vc_cta3_content-container {
|
||||
padding-@{direction}: @vc_cta3-gold-size-base;
|
||||
}
|
||||
}
|
||||
&.vc_cta3-icon-size-md {
|
||||
margin-@{direction}: floor(@icon-element-font-size-base * unit(@icon-element-box-size-md) / 2);
|
||||
.vc_cta3_content-container {
|
||||
padding-@{direction}: @vc_cta3-gold-size-base;
|
||||
}
|
||||
&.vc_cta3-icons-in-box .vc_cta3_content-container {
|
||||
padding-@{direction}: @vc_cta3-gold-size-base * 1.5;
|
||||
}
|
||||
}
|
||||
&.vc_cta3-icon-size-lg {
|
||||
margin-@{direction}: floor(@icon-element-font-size-base * unit(@icon-element-box-size-lg) / 2);
|
||||
.vc_cta3_content-container {
|
||||
padding-@{direction}: @vc_cta3-gold-size-base * 1.5;
|
||||
}
|
||||
&.vc_cta3-icons-in-box .vc_cta3_content-container {
|
||||
padding-@{direction}: @vc_cta3-gold-size-base * 2;
|
||||
}
|
||||
}
|
||||
&.vc_cta3-icon-size-xl {
|
||||
margin-@{direction}: floor(@icon-element-font-size-base * unit(@icon-element-box-size-xl) / 2);
|
||||
.vc_cta3_content-container {
|
||||
padding-@{direction}: @vc_cta3-gold-size-base * 2;
|
||||
}
|
||||
&.vc_cta3-icons-in-box .vc_cta3_content-container {
|
||||
padding-@{direction}: @vc_cta3-gold-size-base * 2.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
.vc_images_carousel {
|
||||
.vc_carousel-control {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.vc_carousel {
|
||||
.vc_carousel-control {
|
||||
text-shadow: none;
|
||||
border: none;
|
||||
.wpb_transition();
|
||||
&:active, &:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.vc_carousel-indicators li {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
margin: 0;
|
||||
border-color: @vc_carousel_arrows_bg;
|
||||
.wpb_transition();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
@vc_round-chart-legend-width: 40%;
|
||||
@vc_round-chart-width: 100% - @vc_round-chart-legend-width;
|
||||
@vc_line-chart-legend-width: 25%;
|
||||
@vc_line-chart-width: 100% - @vc_line-chart-legend-width;
|
||||
@vc_chart-legend-font-size: 14px;
|
||||
@vc_chart-legend-color-size: 1.3em;
|
||||
@vc_chart-legend-gap: 1em;
|
||||
@vc_chart-legend-item-gap: 0.3em;
|
||||
|
||||
.vc_chart {
|
||||
.vc_chart-legend {
|
||||
font-size: @vc_chart-legend-font-size;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
line-height: @vc_chart-legend-color-size;
|
||||
list-style: none;
|
||||
margin: 0 0 @vc_chart-legend-item-gap 0;
|
||||
min-height: @vc_chart-legend-color-size;
|
||||
}
|
||||
|
||||
span {
|
||||
border-radius: 0.3em;
|
||||
display: inline-block;
|
||||
height: @vc_chart-legend-color-size;
|
||||
left: 0;
|
||||
margin-right: 0.5em;
|
||||
vertical-align: middle;
|
||||
width: @vc_chart-legend-color-size;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: @vc_grid-float-breakpoint) {
|
||||
.vc_chart-legend {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: @vc_round-chart-legend-width;
|
||||
|
||||
li {
|
||||
margin-left: @vc_chart-legend-gap;
|
||||
}
|
||||
}
|
||||
|
||||
// Wrapper around canvas element if chart has legend.
|
||||
// Legend itself is outside of this element (on the right)
|
||||
.vc_chart-with-legend {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: @vc_round-chart-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vc_line-chart {
|
||||
.vc_chart-with-legend {
|
||||
width: @vc_line-chart-width;
|
||||
}
|
||||
|
||||
.vc_chart-legend {
|
||||
width: @vc_line-chart-legend-width;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
// Param Window
|
||||
.vc_cta3-colored-dropdown {
|
||||
.vc_edit_color_option_variants(~'classic'; @vc_cta3-color-classic; @vc_cta3-color-classic-headings);
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
// CUSTOM HEADING STYLES
|
||||
// ------------
|
||||
|
||||
.vc_custom_heading {
|
||||
a,
|
||||
a:hover,
|
||||
a:focus,
|
||||
a:visited {
|
||||
border: none;
|
||||
text-decoration: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
a {
|
||||
-webkit-transition: all .2s ease-in-out;
|
||||
transition: all .2s ease-in-out;
|
||||
opacity: 1;
|
||||
&:hover {
|
||||
opacity: .85;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
@stop_standalone_compiling: @vc_grey;
|
||||
/* Flickr stream
|
||||
---------------------------------------------------------- */
|
||||
.flickr_badge_image {
|
||||
margin: 0 10px 10px 0px;
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
float: left;
|
||||
background: none;
|
||||
padding: 0;
|
||||
|
||||
a {
|
||||
border: none;
|
||||
}
|
||||
|
||||
img {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.wpb_flickr_widget {
|
||||
p.flickr_stream_wrap {
|
||||
clear: both;
|
||||
margin-bottom: 0;
|
||||
font-size: @vc_smaller_font;
|
||||
a {
|
||||
background-image: url(../images/flickr.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: left center;
|
||||
padding-left: 25px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
/* Google maps
|
||||
---------------------------------------------------------- */
|
||||
.wpb_gmaps_widget {
|
||||
.wpb_wrapper {
|
||||
background-color: @vc_google_maps_bg;
|
||||
padding: 5px;
|
||||
}
|
||||
.wpb_map_wraper {
|
||||
iframe {
|
||||
margin-bottom: 0;
|
||||
padding: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
&.vc_map_responsive {
|
||||
.wpb_map_wraper {
|
||||
position: relative;
|
||||
padding-bottom: 56.25%; /* 16:9 */
|
||||
height: 0;
|
||||
iframe {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,173 @@
|
||||
.vc-hoverbox-wrapper,
|
||||
.vc-hoverbox-wrapper * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.vc-hoverbox-wrapper {
|
||||
&.vc-hoverbox-shape--rounded {
|
||||
.vc-hoverbox-front,
|
||||
.vc-hoverbox-back {
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
&.vc-hoverbox-shape--round {
|
||||
.vc-hoverbox-front,
|
||||
.vc-hoverbox-back {
|
||||
border-radius: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
&.vc-hoverbox-align--center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.vc-hoverbox-align--left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&.vc-hoverbox-align--right {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.vc-hoverbox-wrapper {
|
||||
.vc-hoverbox {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
&.vc-hoverbox-width--100 {
|
||||
.vc-hoverbox {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
&.vc-hoverbox-width--90 {
|
||||
.vc-hoverbox {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
&.vc-hoverbox-width--80 {
|
||||
.vc-hoverbox {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
&.vc-hoverbox-width--70 {
|
||||
.vc-hoverbox {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
&.vc-hoverbox-width--60 {
|
||||
.vc-hoverbox {
|
||||
width: 60%;
|
||||
}
|
||||
}
|
||||
&.vc-hoverbox-width--50 {
|
||||
.vc-hoverbox {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
&.vc-hoverbox-width--40 {
|
||||
.vc-hoverbox {
|
||||
width: 40%;
|
||||
}
|
||||
}
|
||||
&.vc-hoverbox-width--30 {
|
||||
.vc-hoverbox {
|
||||
width: 30%;
|
||||
}
|
||||
}
|
||||
&.vc-hoverbox-width--20 {
|
||||
.vc-hoverbox {
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
&.vc-hoverbox-width--10 {
|
||||
.vc-hoverbox {
|
||||
width: 10%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vc-hoverbox-inner {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
min-height: 250px;
|
||||
:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.vc-hoverbox-block {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
transition: transform .5s ease-in-out;
|
||||
transform-style: preserve-3d;
|
||||
background-size: cover; // 100% 100%;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.vc-hoverbox-block-inner {
|
||||
flex-shrink: 0;
|
||||
padding: 20px;
|
||||
> * {
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.vc-hoverbox-front {
|
||||
transform: rotateY(0deg);
|
||||
//background: @background-front;
|
||||
z-index: 1; // fixed backface visibility for animations
|
||||
}
|
||||
|
||||
.vc-hoverbox-back {
|
||||
transform: rotateY(180deg);
|
||||
//background: @background-back;
|
||||
}
|
||||
|
||||
.vc-hoverbox {
|
||||
&:hover {
|
||||
.vc-hoverbox-front {
|
||||
transform: rotateY(-180deg);
|
||||
}
|
||||
|
||||
.vc-hoverbox-back {
|
||||
transform: rotateY(0deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// reverse
|
||||
.vc-hoverbox-wrapper {
|
||||
&.vc-hoverbox-direction--reverse {
|
||||
.vc-hoverbox-front {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.vc-hoverbox-back {
|
||||
transform: rotateY(0deg);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.vc-hoverbox {
|
||||
&:hover {
|
||||
.vc-hoverbox-front {
|
||||
transform: rotateY(0deg);
|
||||
}
|
||||
|
||||
.vc-hoverbox-back {
|
||||
transform: rotateY(-180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,210 @@
|
||||
@icon-element-bottom-margin: @vc_element_margin_bottom;
|
||||
@icon-element-rounded-radius: 5px;
|
||||
@icon-element-font-size-base: 14px;
|
||||
|
||||
@icon-element-icon-size-xs: 1.20em;
|
||||
// 17px
|
||||
@icon-element-icon-size-sm: 1.6em;
|
||||
// 22px
|
||||
@icon-element-icon-size-md: 2.15em;
|
||||
// 30px default
|
||||
@icon-element-icon-size-lg: 2.85em;
|
||||
// 40px
|
||||
@icon-element-icon-size-xl: 5em;
|
||||
// 70px
|
||||
|
||||
@icon-element-box-size-xs: 2.5em;
|
||||
// 35px
|
||||
@icon-element-box-size-sm: 3.15em;
|
||||
// 45px
|
||||
@icon-element-box-size-md: 4em;
|
||||
// 56px default
|
||||
@icon-element-box-size-lg: 5em;
|
||||
// 70px
|
||||
@icon-element-box-size-xl: 7.15em;
|
||||
// 100px
|
||||
|
||||
.vc_icon_element {
|
||||
line-height: 0;
|
||||
font-size: @icon-element-font-size-base;
|
||||
margin-bottom: @icon-element-bottom-margin;
|
||||
&.vc_icon_element-outer {
|
||||
box-sizing: border-box;
|
||||
text-align: center; // default align
|
||||
//align styles
|
||||
&.vc_icon_element-align-left {
|
||||
text-align: left;
|
||||
}
|
||||
&.vc_icon_element-align-center {
|
||||
text-align: center;
|
||||
}
|
||||
&.vc_icon_element-align-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.vc_icon_element-inner {
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
border: 2px solid transparent;
|
||||
width: @icon-element-box-size-md; // default size md
|
||||
height: @icon-element-box-size-md; //default size md
|
||||
box-sizing: content-box; // helps for font-awesome centring on small sizes
|
||||
position: relative;
|
||||
.vc_icon_element-icon {
|
||||
font-size: @icon-element-icon-size-md; // default size md
|
||||
// font awesome logic for all icons
|
||||
font-style: normal;
|
||||
line-height: 1 !important;
|
||||
font-size-adjust: none;
|
||||
font-stretch: normal;
|
||||
-webkit-font-feature-settings: normal;
|
||||
font-feature-settings: normal;
|
||||
-webkit-font-language-override: normal;
|
||||
font-language-override: normal;
|
||||
-webkit-font-kerning: auto;
|
||||
font-kerning: auto;
|
||||
font-synthesis: weight style;
|
||||
font-variant: normal;
|
||||
text-rendering: auto;
|
||||
|
||||
display: inline-block;
|
||||
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
||||
.translate(-50%, -50%);
|
||||
|
||||
&:before {
|
||||
font-style: normal;
|
||||
display: inline-block;
|
||||
text-decoration: inherit;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
font-size: 1em;
|
||||
text-align: center;
|
||||
text-rendering: optimizelegibility;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.vc_icon_element-link, .vc_gitem-link {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
box-sizing: content-box;
|
||||
border: none;
|
||||
}
|
||||
|
||||
// size styles
|
||||
.size-(@selector, @size, @font_size) {
|
||||
&.vc_icon_element-size-@{selector} {
|
||||
// fix if no background style selected
|
||||
&.vc_icon_element-have-style-inner {
|
||||
width: @size !important;
|
||||
height: @size !important;
|
||||
}
|
||||
max-width: 100% !important;
|
||||
line-height: @font_size !important;
|
||||
.vc_icon_element-icon {
|
||||
font-size: @font_size !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.size-(~"xs", @icon-element-box-size-xs, @icon-element-icon-size-xs);
|
||||
.size-(~"sm", @icon-element-box-size-sm, @icon-element-icon-size-sm);
|
||||
.size-(~"md", @icon-element-box-size-md, @icon-element-icon-size-md);
|
||||
.size-(~"lg", @icon-element-box-size-lg, @icon-element-icon-size-lg);
|
||||
.size-(~"xl", @icon-element-box-size-xl, @icon-element-icon-size-xl);
|
||||
|
||||
// display styles
|
||||
&.vc_icon_element-style-boxed {
|
||||
}
|
||||
|
||||
&.vc_icon_element-style-boxed-outline {
|
||||
}
|
||||
|
||||
&.vc_icon_element-style-rounded {
|
||||
border-radius: 50%;
|
||||
.vc_icon_element-link, .vc_gitem-link {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
&.vc_icon_element-style-rounded-outline {
|
||||
border-radius: 50%;
|
||||
.vc_icon_element-link, .vc_gitem-link {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
&.vc_icon_element-style-rounded-less {
|
||||
border-radius: @icon-element-rounded-radius;
|
||||
.vc_icon_element-link, .vc_gitem-link {
|
||||
border-radius: @icon-element-rounded-radius;
|
||||
}
|
||||
}
|
||||
&.vc_icon_element-style-rounded-less-outline {
|
||||
border-radius: @icon-element-rounded-radius;
|
||||
.vc_icon_element-link, .vc_gitem-link {
|
||||
border-radius: @icon-element-rounded-radius;
|
||||
}
|
||||
}
|
||||
|
||||
.vc_icon_element_colors_variants(@selector, @text_color) {
|
||||
&.vc_icon_element-color-@{selector} {
|
||||
.vc_icon_element-icon {
|
||||
color: @text_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.vc_icon_element_colors_variants(~'blue', @blue);
|
||||
.vc_icon_element_colors_variants(~'turquoise', @turquoise);
|
||||
.vc_icon_element_colors_variants(~'pink', @pink);
|
||||
.vc_icon_element_colors_variants(~'violet', @violet);
|
||||
.vc_icon_element_colors_variants(~'peacoc', @peacoc);
|
||||
.vc_icon_element_colors_variants(~'chino', @chino);
|
||||
.vc_icon_element_colors_variants(~'mulled_wine', @mulled_wine);
|
||||
.vc_icon_element_colors_variants(~'vista_blue', @vista_blue);
|
||||
.vc_icon_element_colors_variants(~'black', @black);
|
||||
.vc_icon_element_colors_variants(~'grey', @grey);
|
||||
.vc_icon_element_colors_variants(~'orange', @orange);
|
||||
.vc_icon_element_colors_variants(~'sky', @sky);
|
||||
.vc_icon_element_colors_variants(~'green', @green);
|
||||
.vc_icon_element_colors_variants(~'juicy_pink', @juicy_pink);
|
||||
.vc_icon_element_colors_variants(~'sandy_brown', @sandy_brown);
|
||||
.vc_icon_element_colors_variants(~'purple', @purple);
|
||||
.vc_icon_element_colors_variants(~'white', @white);
|
||||
|
||||
// colors for styles
|
||||
// Background Shape Colors
|
||||
.vc_icon_element_shape_color_variants(@selector, @color) {
|
||||
&.vc_icon_element-background-color-@{selector} {
|
||||
&.vc_icon_element-outline {
|
||||
border-color: @color;
|
||||
}
|
||||
&.vc_icon_element-background {
|
||||
background-color: @color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.vc_icon_element_shape_color_variants(~'blue', @blue);
|
||||
.vc_icon_element_shape_color_variants(~'turquoise', @turquoise);
|
||||
.vc_icon_element_shape_color_variants(~'pink', @pink);
|
||||
.vc_icon_element_shape_color_variants(~'violet', @violet);
|
||||
.vc_icon_element_shape_color_variants(~'peacoc', @peacoc);
|
||||
.vc_icon_element_shape_color_variants(~'chino', @chino);
|
||||
.vc_icon_element_shape_color_variants(~'mulled_wine', @mulled_wine);
|
||||
.vc_icon_element_shape_color_variants(~'vista_blue', @vista_blue);
|
||||
.vc_icon_element_shape_color_variants(~'black', @black);
|
||||
.vc_icon_element_shape_color_variants(~'grey', @grey);
|
||||
.vc_icon_element_shape_color_variants(~'orange', @orange);
|
||||
.vc_icon_element_shape_color_variants(~'sky', @sky);
|
||||
.vc_icon_element_shape_color_variants(~'green', @green);
|
||||
.vc_icon_element_shape_color_variants(~'juicy_pink', @juicy_pink);
|
||||
.vc_icon_element_shape_color_variants(~'sandy_brown', @sandy_brown);
|
||||
.vc_icon_element_shape_color_variants(~'purple', @purple);
|
||||
.vc_icon_element_shape_color_variants(~'white', @white);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
/* Image grid
|
||||
---------------------------------------------------------- */
|
||||
.wpb_image_grid {
|
||||
.wpb_image_grid_ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
> li {
|
||||
.no_bullet_fix();
|
||||
}
|
||||
.isotope-item {
|
||||
list-style: none;
|
||||
margin: 0 1px 1px 0;
|
||||
max-width: 100%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Gallery
|
||||
---------------------------------------------------------- */
|
||||
.wpb_gallery {
|
||||
// adjustments for nivo slider default theme
|
||||
.theme-default {
|
||||
.nivoSlider {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.nivo-controlNav {
|
||||
padding: 10px 0 3px 0;
|
||||
}
|
||||
}
|
||||
// flexslider adjustments
|
||||
.wpb_flexslider {
|
||||
.flex-control-nav {
|
||||
bottom: auto;
|
||||
top: 100%;
|
||||
margin-top: 15px;
|
||||
}
|
||||
.flex-caption {
|
||||
cursor: default;
|
||||
}
|
||||
.flex-direction-nav {
|
||||
a {
|
||||
border: none;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
&:hover {
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
&:before {
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.flex-control-paging {
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// remove ul & li margins
|
||||
#content .wpb_gallery_slides ul.slides,
|
||||
.content .wpb_gallery_slides ul.slides,
|
||||
.wpb_gallery_slides ul.slides,
|
||||
#content .wpb_gallery_slides ul.flex-direction-nav,
|
||||
.content .wpb_gallery_slides ul.flex-direction-nav,
|
||||
.wpb_gallery_slides ul.flex-direction-nav,
|
||||
body .wpb_gallery_slides ul li,
|
||||
.wpb_content_element .wpb_gallery_slides ul li {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
background-image: none;
|
||||
margin: 0;
|
||||
}
|
||||
@@ -0,0 +1,216 @@
|
||||
//====== STYLES
|
||||
|
||||
/* ================================
|
||||
* Message box
|
||||
* ================================ */
|
||||
.vc_message_box {
|
||||
border: 1px solid transparent;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
margin: 0 0 @vc_margin_bottom_gold 0;
|
||||
padding: @message-box-vertical-padding @message-box-horizontal-padding @message-box-vertical-padding @message-box-icon-indent;
|
||||
position: relative;
|
||||
font-size: @message-box-font-size-base;
|
||||
.box-sizing(border-box);
|
||||
> p {
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vc_message_box-icon {
|
||||
bottom: 0;
|
||||
font-size: 1em;
|
||||
font-style: normal;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: @message-box-icon-indent;
|
||||
> * {
|
||||
font-size: @message-box-icon-size;
|
||||
line-height: 1;
|
||||
font-style: normal;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
.translate(-50%; -50%);
|
||||
}
|
||||
// FontAwesome default icon size fix
|
||||
> .fa {
|
||||
font-size: @message-box-icon-size;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Generating color sets
|
||||
//------------------
|
||||
|
||||
// blue
|
||||
.vc-message-make-colors-set(~'vc_color-blue'; @color-blue-text; @color-blue; @color-blue-border; @color-blue-bg; @color-blue-contrast);
|
||||
// turquoise
|
||||
.vc-message-make-colors-set(~'vc_color-turquoise'; @color-turquoise-text; @color-turquoise; @color-turquoise-border; @color-turquoise-bg; @color-turquoise-contrast);
|
||||
// pink
|
||||
.vc-message-make-colors-set(~'vc_color-pink'; @color-pink-text; @color-pink; @color-pink-border; @color-pink-bg; @color-pink-contrast);
|
||||
// violet
|
||||
.vc-message-make-colors-set(~'vc_color-violet'; @color-violet-text; @color-violet; @color-violet-border; @color-violet-bg; @color-violet-contrast);
|
||||
// peacoc
|
||||
.vc-message-make-colors-set(~'vc_color-peacoc'; @color-peacoc-text; @color-peacoc; @color-peacoc-border; @color-peacoc-bg; @color-peacoc-contrast);
|
||||
// chino
|
||||
.vc-message-make-colors-set(~'vc_color-chino'; @color-chino-text; @color-chino; @color-chino-border; @color-chino-bg; @color-chino-contrast);
|
||||
// mulled_wine
|
||||
.vc-message-make-colors-set(~'vc_color-mulled_wine'; @color-mulled-wine-text; @color-mulled-wine; @color-mulled-wine-border; @color-mulled-wine-bg; @color-mulled-wine-contrast);
|
||||
// vista_blue
|
||||
.vc-message-make-colors-set(~'vc_color-vista_blue'; @color-vista-blue-text; @color-vista-blue; @color-vista-blue-border; @color-vista-blue-bg; @color-vista-blue-contrast);
|
||||
// orange
|
||||
.vc-message-make-colors-set(~'vc_color-orange'; @color-orange-text; @color-orange; @color-orange-border; @color-orange-bg; @color-orange-contrast);
|
||||
// sky
|
||||
.vc-message-make-colors-set(~'vc_color-sky'; @color-sky-text; @color-sky; @color-sky-border; @color-sky-bg; @color-sky-contrast);
|
||||
// green
|
||||
.vc-message-make-colors-set(~'vc_color-green'; @color-green-text; @color-green; @color-green-border; @color-green-bg; @color-green-contrast);
|
||||
// juicy_pink
|
||||
.vc-message-make-colors-set(~'vc_color-juicy_pink'; @color-juicy-pink-text; @color-juicy-pink; @color-juicy-pink-border; @color-juicy-pink-bg; @color-juicy-pink-contrast);
|
||||
// sandy_brown
|
||||
.vc-message-make-colors-set(~'vc_color-sandy_brown'; @color-sandy-brown-text; @color-sandy-brown; @color-sandy-brown-border; @color-sandy-brown-bg; @color-sandy-brown-contrast);
|
||||
// purple
|
||||
.vc-message-make-colors-set(~'vc_color-purple'; @color-purple-text; @color-purple; @color-purple-border; @color-purple-bg; @color-purple-contrast);
|
||||
// black
|
||||
.vc-message-make-colors-set(~'vc_color-black'; @color-black-text; @color-black; @color-black-border; @color-black-bg; @color-black-contrast);
|
||||
// grey
|
||||
.vc-message-make-colors-set(~'vc_color-grey'; @color-grey-text; @color-grey; @color-grey-border; @color-grey-bg; @color-grey-contrast);
|
||||
// white
|
||||
.vc-message-make-colors-set(~'vc_color-white'; @color-white-text; @color-white; @color-white-border; @color-white-bg; @color-white-contrast);
|
||||
|
||||
// Generating message types
|
||||
//------------------
|
||||
// info
|
||||
.vc-message-make-colors-set(~'vc_color-info'; @alert-info-text; @alert-info; @alert-info-border; @alert-info-bg; @alert-info-contrast);
|
||||
// success
|
||||
.vc-message-make-colors-set(~'vc_color-success'; @alert-success-text; @alert-success; @alert-success-border; @alert-success-bg; @alert-success-contrast);
|
||||
// warning
|
||||
.vc-message-make-colors-set(~'vc_color-warning'; @alert-warning-text; @alert-warning; @alert-warning-border; @alert-warning-bg; @alert-warning-contrast);
|
||||
// danger
|
||||
.vc-message-make-colors-set(~'vc_color-danger'; @alert-danger-text; @alert-danger; @alert-danger-border; @alert-danger-bg; @alert-danger-contrast);
|
||||
|
||||
// Generating classic message types
|
||||
//------------------
|
||||
// info-classic
|
||||
.vc-message-make-colors-set(~'vc_color-alert-info'; @alert-info-classic-text; @alert-info-classic; @alert-info-classic-border; @alert-info-classic-bg; @alert-info-classic-contrast);
|
||||
|
||||
// success-classic
|
||||
.vc-message-make-colors-set(~'vc_color-alert-success'; @alert-success-classic-text; @alert-success-classic; @alert-success-classic-border; @alert-success-classic-bg; @alert-success-classic-contrast);
|
||||
|
||||
// warning-classic
|
||||
.vc-message-make-colors-set(~'vc_color-alert-warning'; @alert-warning-classic-text; @alert-warning-classic; @alert-warning-classic-border; @alert-warning-classic-bg; @alert-warning-classic-contrast);
|
||||
|
||||
// danger-classic
|
||||
.vc-message-make-colors-set(~'vc_color-alert-danger'; @alert-danger-classic-text; @alert-danger-classic; @alert-danger-classic-border; @alert-danger-classic-bg; @alert-danger-classic-contrast);
|
||||
|
||||
// Color Fixes
|
||||
//------------------
|
||||
// black
|
||||
.vc_color-black {
|
||||
// Standard, Classic (Old style), 3d
|
||||
&.vc_message_box {
|
||||
.vc_message_box-icon {
|
||||
color: @color-black-text;
|
||||
}
|
||||
}
|
||||
// Outline (transparent background), Solid icon
|
||||
&.vc_message_box-outline {
|
||||
&,
|
||||
.vc_message_box-icon {
|
||||
color: @color-black;
|
||||
}
|
||||
}
|
||||
// Solid icon
|
||||
&.vc_message_box-solid-icon {
|
||||
color: @color-black;
|
||||
}
|
||||
}
|
||||
|
||||
// grey
|
||||
.vc_color-grey {
|
||||
// Standard, Classic (Old style), 3d
|
||||
&.vc_message_box {
|
||||
.vc_message_box-icon {
|
||||
color: @color-grey-text;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// white
|
||||
.vc_color-white {
|
||||
// Standard, Classic (Old style), 3d
|
||||
&.vc_message_box {
|
||||
.vc_message_box-icon {
|
||||
color: @color-white-text;
|
||||
}
|
||||
}
|
||||
// Outline (transparent background), Solid icon
|
||||
&.vc_message_box-outline {
|
||||
&,
|
||||
.vc_message_box-icon {
|
||||
color: @color-white;
|
||||
}
|
||||
}
|
||||
// Solid icon
|
||||
&.vc_message_box-solid-icon {
|
||||
color: @color-white;
|
||||
}
|
||||
}
|
||||
|
||||
// Creating Designs
|
||||
//------------------
|
||||
// Standard
|
||||
.vc_message_box-standard {
|
||||
|
||||
}
|
||||
|
||||
// Solid
|
||||
.vc_message_box-solid {
|
||||
|
||||
}
|
||||
|
||||
// Outline (transparent background)
|
||||
.vc_message_box-outline {
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
// Classic (Old style)
|
||||
.vc_message_box-classic {
|
||||
|
||||
}
|
||||
|
||||
// Solid icon
|
||||
.vc_message_box-solid-icon {
|
||||
&:extend(.vc_message_box-outline);
|
||||
.vc_message_box-icon {
|
||||
width: @message-box-icon-indent-reduced;
|
||||
}
|
||||
}
|
||||
|
||||
// 3d
|
||||
.vc_message_box-3d {
|
||||
|
||||
}
|
||||
|
||||
// Creating Shapes
|
||||
//------------------
|
||||
// Square
|
||||
.vc_message_box-square {
|
||||
|
||||
}
|
||||
|
||||
// Rounded
|
||||
.vc_message_box-rounded {
|
||||
border-radius: @message-box-border-radius-rounded;
|
||||
}
|
||||
|
||||
// Round
|
||||
.vc_message_box-round {
|
||||
border-radius: @message-box-border-radius-round;
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
@import "vc_message_box_variables.less";
|
||||
@import "vc_message_box_mixins.less";
|
||||
@import "vc_message_box_2.less";
|
||||
@@ -0,0 +1,45 @@
|
||||
//====== MIXINS
|
||||
|
||||
// Creating Colors
|
||||
.vc-make-message-color(@text; @icon: @text; @border: false; @background: false) {
|
||||
color: @text;
|
||||
& when not (@border = false) {
|
||||
border-color: @border;
|
||||
}
|
||||
& when not (@background = false) {
|
||||
background-color: @background;
|
||||
}
|
||||
.vc_message_box-icon {
|
||||
color: @icon;
|
||||
}
|
||||
}
|
||||
|
||||
// make colors set
|
||||
.vc-message-make-colors-set(@selector; @text; @icon; @border; @background; @contrast-color) {
|
||||
&.@{selector} {
|
||||
// Standard, Classic (Old style), 3d
|
||||
&.vc_message_box {
|
||||
.vc-make-message-color(@text; @icon; @border: @border; @background: @background);
|
||||
}
|
||||
// Solid
|
||||
&.vc_message_box-solid {
|
||||
.vc-make-message-color(@contrast-color; @border: transparent; @background: @icon);
|
||||
}
|
||||
// Outline (transparent background), Solid icon
|
||||
&.vc_message_box-outline,
|
||||
&.vc_message_box-solid-icon {
|
||||
.vc-make-message-color(@text; @icon; @border: @icon; @background: transparent);
|
||||
}
|
||||
// Solid icon
|
||||
&.vc_message_box-solid-icon {
|
||||
.vc_message_box-icon {
|
||||
color: @contrast-color;
|
||||
background-color: @icon;
|
||||
}
|
||||
}
|
||||
// 3d
|
||||
&.vc_message_box-3d {
|
||||
box-shadow: 0 @message-box-shadow-width-3d 0 darken(@border, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,170 @@
|
||||
//====== VARIABLES
|
||||
@message-box-border-radius-rounded: 5px;
|
||||
@message-box-border-radius-round: 4em;
|
||||
@message-box-shadow-width-3d: 5px;
|
||||
@message-box-font-size-base: 1em;
|
||||
@message-box-icon-size: 1.7em;
|
||||
@message-box-horizontal-padding: 1em;
|
||||
@message-box-vertical-padding: 1em;
|
||||
@message-box-icon-indent: 4em;
|
||||
@message-box-icon-indent-reduced: 3.25em;
|
||||
|
||||
//====== COLORS
|
||||
// alert types
|
||||
//-----------------------------
|
||||
// alert-info
|
||||
@alert-info: #56b0ee;
|
||||
@alert-info-bg: #dff2fe;
|
||||
@alert-info-border: #cfebfe;
|
||||
@alert-info-text: #5e7f96;
|
||||
@alert-info-contrast: #fff;
|
||||
// alert-success
|
||||
@alert-success: #1bbc9b;
|
||||
@alert-success-bg: #e6fdf8;
|
||||
@alert-success-border: #cfebfe;
|
||||
@alert-success-text: #5e7f96;
|
||||
@alert-success-contrast: #fff;
|
||||
// alert-warning
|
||||
@alert-warning: #fcb53f;
|
||||
@alert-warning-bg: #fff4e2;
|
||||
@alert-warning-border: #ffeccc;
|
||||
@alert-warning-text: #9d8967;
|
||||
@alert-warning-contrast: #fff;
|
||||
// alert-danger
|
||||
@alert-danger: #ff7877;
|
||||
@alert-danger-bg: #fdeaea;
|
||||
@alert-danger-border: #fedede;
|
||||
@alert-danger-text: #a85959;
|
||||
@alert-danger-contrast: #fff;
|
||||
|
||||
// classic alerts
|
||||
// ---------------------------
|
||||
// alert-info-classic
|
||||
@alert-info-classic: #67CCE0;
|
||||
@alert-info-classic-bg: @state-info-bg;
|
||||
@alert-info-classic-border: @state-info-border;
|
||||
@alert-info-classic-text: @state-info-text;
|
||||
@alert-info-classic-contrast: #fff;
|
||||
// alert-success-classic
|
||||
@alert-success-classic: #9AD36A;
|
||||
@alert-success-classic-bg: @state-success-bg;
|
||||
@alert-success-classic-border: @state-success-border;
|
||||
@alert-success-classic-text: @state-success-text;
|
||||
@alert-success-classic-contrast: #fff;
|
||||
// alert-warning-classic
|
||||
@alert-warning-classic: #F9CF79;
|
||||
@alert-warning-classic-bg: @state-warning-bg;
|
||||
@alert-warning-classic-border: @state-warning-border;
|
||||
@alert-warning-classic-text: @state-warning-text;
|
||||
@alert-warning-classic-contrast: #fff;
|
||||
// alert-danger-classic
|
||||
@alert-danger-classic: #EF8495;
|
||||
@alert-danger-classic-bg: @state-danger-bg;
|
||||
@alert-danger-classic-border: @state-danger-border;
|
||||
@alert-danger-classic-text: @state-danger-text;
|
||||
@alert-danger-classic-contrast: #fff;
|
||||
|
||||
// color set
|
||||
// ---------------------------
|
||||
// blue
|
||||
@color-blue: @blue;
|
||||
@color-blue-bg: lighten(@color-blue, 38%);
|
||||
@color-blue-border: darken(@color-blue-bg, 10%);
|
||||
@color-blue-text: darken(desaturate(@color-blue, 15%), 20%);
|
||||
@color-blue-contrast: #fff;
|
||||
// turquoise
|
||||
@color-turquoise: @turquoise;
|
||||
@color-turquoise-bg: lighten(desaturate(@color-turquoise, 20%), 55%);
|
||||
@color-turquoise-border: darken(desaturate(@color-turquoise-bg, 25%), 10%);
|
||||
@color-turquoise-text: darken(desaturate(@color-turquoise, 15%), 20%);
|
||||
@color-turquoise-contrast: #fff;
|
||||
// pink
|
||||
@color-pink: @pink;
|
||||
@color-pink-bg: lighten(@color-pink, 28%);
|
||||
@color-pink-border: darken(@color-pink-bg, 5%);
|
||||
@color-pink-text: darken(desaturate(@color-pink, 25%), 20%);
|
||||
@color-pink-contrast: #fff;
|
||||
// violet
|
||||
@color-violet: @violet;
|
||||
@color-violet-bg: lighten(@color-violet, 35%);
|
||||
@color-violet-border: darken(@color-violet-bg, 10%);
|
||||
@color-violet-text: darken(desaturate(@color-violet, 15%), 20%);
|
||||
@color-violet-contrast: #fff;
|
||||
// peacoc
|
||||
@color-peacoc: @peacoc;
|
||||
@color-peacoc-bg: lighten(@color-peacoc, 40%);
|
||||
@color-peacoc-border: darken(@color-peacoc-bg, 10%);
|
||||
@color-peacoc-text: darken(desaturate(@color-peacoc, 15%), 20%);
|
||||
@color-peacoc-contrast: #fff;
|
||||
// chino
|
||||
@color-chino: @chino;
|
||||
@color-chino-bg: lighten(@color-chino, 22%);
|
||||
@color-chino-border: darken(@color-chino-bg, 10%);
|
||||
@color-chino-text: darken(@color-chino, 27%);
|
||||
@color-chino-contrast: #fff;
|
||||
// mulled_wine
|
||||
@color-mulled-wine: @mulled_wine;
|
||||
@color-mulled-wine-bg: lighten(@color-mulled-wine, 60%);
|
||||
@color-mulled-wine-border: darken(@color-mulled-wine-bg, 10%);
|
||||
@color-mulled-wine-text: darken(@color-mulled-wine, 20%);
|
||||
@color-mulled-wine-contrast: #fff;
|
||||
// vista_blue
|
||||
@color-vista-blue: @vista_blue;
|
||||
@color-vista-blue-bg: lighten(@color-vista-blue, 28%);
|
||||
@color-vista-blue-border: darken(@color-vista-blue-bg, 10%);
|
||||
@color-vista-blue-text: darken(desaturate(@color-vista-blue, 15%), 25%);
|
||||
@color-vista-blue-contrast: #fff;
|
||||
// orange
|
||||
@color-orange: @orange;
|
||||
@color-orange-bg: lighten(@color-orange, 27%);
|
||||
@color-orange-border: darken(@color-orange-bg, 10%);
|
||||
@color-orange-text: darken(desaturate(@color-orange, 15%), 25%);
|
||||
@color-orange-contrast: #fff;
|
||||
// sky
|
||||
@color-sky: @sky;
|
||||
@color-sky-bg: lighten(@color-sky, 33%);
|
||||
@color-sky-border: darken(@color-sky-bg, 10%);
|
||||
@color-sky-text: darken(desaturate(@color-sky, 15%), 25%);
|
||||
@color-sky-contrast: #fff;
|
||||
// green
|
||||
@color-green: @green;
|
||||
@color-green-bg: lighten(@color-green, 47%);
|
||||
@color-green-border: darken(@color-green-bg, 15%);
|
||||
@color-green-text: darken(desaturate(@color-green, 15%), 20%);
|
||||
@color-green-contrast: #fff;
|
||||
// juicy_pink
|
||||
@color-juicy-pink: @juicy_pink;
|
||||
@color-juicy-pink-bg: lighten(@color-juicy-pink, 35%);
|
||||
@color-juicy-pink-border: darken(@color-juicy-pink-bg, 10%);
|
||||
@color-juicy-pink-text: darken(desaturate(@color-juicy-pink, 20%), 25%);
|
||||
@color-juicy-pink-contrast: #fff;
|
||||
// sandy_brown
|
||||
@color-sandy-brown: @sandy_brown;
|
||||
@color-sandy-brown-bg: lighten(@color-sandy-brown, 27%);
|
||||
@color-sandy-brown-border: darken(@color-sandy-brown-bg, 10%);
|
||||
@color-sandy-brown-text: darken(desaturate(@color-sandy-brown, 15%), 25%);
|
||||
@color-sandy-brown-contrast: #fff;
|
||||
// purple
|
||||
@color-purple: @purple;
|
||||
@color-purple-bg: lighten(@color-purple, 33%);
|
||||
@color-purple-border: darken(@color-purple-bg, 10%);
|
||||
@color-purple-text: darken(desaturate(@color-purple, 15%), 15%);
|
||||
@color-purple-contrast: #fff;
|
||||
// black
|
||||
@color-black: @black;
|
||||
@color-black-bg: lighten(@color-black, 7%);
|
||||
@color-black-border: @color-black;
|
||||
@color-black-text: @color-black-contrast;
|
||||
@color-black-contrast: #fff;
|
||||
// grey
|
||||
@color-grey: @grey;
|
||||
@color-grey-bg: @color-grey;
|
||||
@color-grey-border: darken(@color-grey-bg, 10%);
|
||||
@color-grey-text: darken(@color-grey, 40%);
|
||||
@color-grey-contrast: @color-grey-text;
|
||||
// white
|
||||
@color-white: @white;
|
||||
@color-white-bg: @color-white;
|
||||
@color-white-border: darken(@color-white-bg, 10%);
|
||||
@color-white-text: @color-white-contrast;
|
||||
@color-white-contrast: darken(@color-white, 30%);
|
||||
@@ -0,0 +1,287 @@
|
||||
//====== VARIABLES
|
||||
@vc-pagination-item-height: 10px;
|
||||
@vc-pagination-item-width: @vc-pagination-item-height;
|
||||
@vc-pagination-item-margin-horizontal: 7px;
|
||||
@vc-pagination-item-margin-vertical: 5px;
|
||||
@vc-pagination-item-round: 50%;
|
||||
@vc-pagination-item-rounded: 3px;
|
||||
@vc-pagination-item-border-width: 3px;
|
||||
|
||||
//====== COLORS
|
||||
// blue
|
||||
@vc_pagination-color-blue: @blue;
|
||||
// turquoise
|
||||
@vc_pagination-color-turquoise: @turquoise;
|
||||
// pink
|
||||
@vc_pagination-color-pink: @pink;
|
||||
// violet
|
||||
@vc_pagination-color-violet: @violet;
|
||||
// peacoc
|
||||
@vc_pagination-color-peacoc: @peacoc;
|
||||
// chino
|
||||
@vc_pagination-color-chino: @chino;
|
||||
// mulled_wine
|
||||
@vc_pagination-color-mulled-wine: @mulled_wine;
|
||||
// vista_blue
|
||||
@vc_pagination-color-vista-blue: @vista_blue;
|
||||
// orange
|
||||
@vc_pagination-color-orange: @orange;
|
||||
// sky
|
||||
@vc_pagination-color-sky: @sky;
|
||||
// green
|
||||
@vc_pagination-color-green: @green;
|
||||
// juicy_pink
|
||||
@vc_pagination-color-juicy-pink: @juicy_pink;
|
||||
// sandy_brown
|
||||
@vc_pagination-color-sandy-brown: @sandy_brown;
|
||||
// purple
|
||||
@vc_pagination-color-purple: @purple;
|
||||
// black
|
||||
@vc_pagination-color-black: @black;
|
||||
// grey
|
||||
@vc_pagination-color-grey: @grey;
|
||||
// white
|
||||
@vc_pagination-color-white: @white;
|
||||
|
||||
// core
|
||||
.vc_general.vc_pagination {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
|
||||
.vc_pagination-item {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.vc_pagination-trigger {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
height: @vc-pagination-item-height;
|
||||
width: @vc-pagination-item-width;
|
||||
margin: @vc-pagination-item-margin-vertical @vc-pagination-item-margin-horizontal;
|
||||
background: transparent;
|
||||
-webkit-transition: all .2s ease-in-out;
|
||||
transition: all .2s ease-in-out;
|
||||
border: none;
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.vc_active .vc_pagination-trigger {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
// styles
|
||||
.vc_pagination {
|
||||
&.vc_pagination-style-outline {
|
||||
.vc_pagination-trigger {
|
||||
border: @vc-pagination-item-border-width solid transparent;
|
||||
}
|
||||
}
|
||||
&.vc_pagination-style-flat {
|
||||
.vc_pagination-trigger {
|
||||
opacity: .6;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.vc_active {
|
||||
.vc_pagination-trigger {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// shapes
|
||||
.vc_pagination {
|
||||
&.vc_pagination-shape-round {
|
||||
.vc_pagination-trigger {
|
||||
border-radius: @vc-pagination-item-round;
|
||||
}
|
||||
}
|
||||
&.vc_pagination-shape-rounded {
|
||||
.vc_pagination-trigger {
|
||||
border-radius: @vc-pagination-item-rounded;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// colors
|
||||
// Blue Color
|
||||
// ------------------------
|
||||
.vc_pagination-make-colors-set(~'vc_pagination-color-blue';
|
||||
@background: @vc_pagination-color-blue;
|
||||
@border: @vc_pagination-color-blue;
|
||||
);
|
||||
|
||||
// Turquoise Color
|
||||
// ------------------------
|
||||
.vc_pagination-make-colors-set(~'vc_pagination-color-turquoise';
|
||||
@background: @vc_pagination-color-turquoise;
|
||||
@border: @vc_pagination-color-turquoise;
|
||||
);
|
||||
|
||||
// Pink Color
|
||||
// ------------------------
|
||||
.vc_pagination-make-colors-set(~'vc_pagination-color-pink';
|
||||
@background: @vc_pagination-color-pink;
|
||||
@border: @vc_pagination-color-pink;
|
||||
);
|
||||
|
||||
// Violet Color
|
||||
// ------------------------
|
||||
.vc_pagination-make-colors-set(~'vc_pagination-color-violet';
|
||||
@background: @vc_pagination-color-violet;
|
||||
@border: @vc_pagination-color-violet;
|
||||
);
|
||||
|
||||
// Peacoc Color
|
||||
// ------------------------
|
||||
.vc_pagination-make-colors-set(~'vc_pagination-color-peacoc';
|
||||
@background: @vc_pagination-color-peacoc;
|
||||
@border: @vc_pagination-color-peacoc;
|
||||
);
|
||||
// chino
|
||||
.vc_pagination-make-colors-set(~'vc_pagination-color-chino';
|
||||
@background: @vc_pagination-color-chino;
|
||||
@border: @vc_pagination-color-chino;
|
||||
);
|
||||
|
||||
// Mulled Wine Color
|
||||
// ------------------------
|
||||
.vc_pagination-make-colors-set(~'vc_pagination-color-mulled-wine';
|
||||
@background: @vc_pagination-color-mulled-wine;
|
||||
@border: @vc_pagination-color-mulled-wine;
|
||||
);
|
||||
|
||||
// Vista Blue Color
|
||||
// ------------------------
|
||||
.vc_pagination-make-colors-set(~'vc_pagination-color-vista-blue';
|
||||
@background: @vc_pagination-color-vista-blue;
|
||||
@border: @vc_pagination-color-vista-blue;
|
||||
);
|
||||
|
||||
// Orange Color
|
||||
// ------------------------
|
||||
.vc_pagination-make-colors-set(~'vc_pagination-color-orange';
|
||||
@background: @vc_pagination-color-orange;
|
||||
@border: @vc_pagination-color-orange;
|
||||
);
|
||||
|
||||
// Sky Color
|
||||
// ------------------------
|
||||
.vc_pagination-make-colors-set(~'vc_pagination-color-sky';
|
||||
@background: @vc_pagination-color-sky;
|
||||
@border: @vc_pagination-color-sky;
|
||||
);
|
||||
|
||||
// Green Color
|
||||
// ------------------------
|
||||
.vc_pagination-make-colors-set(~'vc_pagination-color-green';
|
||||
@background: @vc_pagination-color-green;
|
||||
@border: @vc_pagination-color-green;
|
||||
);
|
||||
|
||||
// Juicy Pink Color
|
||||
// ------------------------
|
||||
.vc_pagination-make-colors-set(~'vc_pagination-color-juicy-pink';
|
||||
@background: @vc_pagination-color-juicy-pink;
|
||||
@border: @vc_pagination-color-juicy-pink;
|
||||
);
|
||||
|
||||
// Sandy Brown Color
|
||||
// ------------------------
|
||||
.vc_pagination-make-colors-set(~'vc_pagination-color-sandy-brown';
|
||||
@background: @vc_pagination-color-sandy-brown;
|
||||
@border: @vc_pagination-color-sandy-brown;
|
||||
);
|
||||
|
||||
// Purple Color
|
||||
// ------------------------
|
||||
.vc_pagination-make-colors-set(~'vc_pagination-color-purple';
|
||||
@background: @vc_pagination-color-purple;
|
||||
@border: @vc_pagination-color-purple;
|
||||
);
|
||||
|
||||
// Black Color
|
||||
// ------------------------
|
||||
.vc_pagination-make-colors-set(~'vc_pagination-color-black';
|
||||
@background: @vc_pagination-color-black;
|
||||
@border: @vc_pagination-color-black;
|
||||
);
|
||||
|
||||
// Grey Color
|
||||
// ------------------------
|
||||
.vc_pagination-make-colors-set(~'vc_pagination-color-grey';
|
||||
@background: @vc_pagination-color-grey;
|
||||
@border: @vc_pagination-color-grey;
|
||||
);
|
||||
|
||||
// White Color
|
||||
// ------------------------
|
||||
.vc_pagination-make-colors-set(~'vc_pagination-color-white';
|
||||
@background: @vc_pagination-color-white;
|
||||
@border: @vc_pagination-color-white;
|
||||
);
|
||||
|
||||
//
|
||||
// Mixins
|
||||
// =====================
|
||||
|
||||
// Make Colors Set
|
||||
// ==========================
|
||||
.vc_pagination-make-colors-set(@selector; @background; @border;) {
|
||||
.@{selector} {
|
||||
|
||||
// Outline Style
|
||||
// ------------------------
|
||||
&.vc_pagination-style-outline {
|
||||
.vc_pagination-make-color(
|
||||
@border: @border;
|
||||
@background-hover: @background;
|
||||
@background-active: @background;
|
||||
);
|
||||
}
|
||||
|
||||
// Flat Style
|
||||
// ------------------------
|
||||
&.vc_pagination-style-flat {
|
||||
.vc_pagination-make-color(
|
||||
@background: @background;
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Make Panels Color
|
||||
// ==========================
|
||||
.vc_pagination-make-color( @border:false; @background: false; @background-hover: false; @background-active: false; ) {
|
||||
.vc_pagination-trigger {
|
||||
& when not (@border = false) {
|
||||
border-color: @border;
|
||||
}
|
||||
& when not (@background = false) {
|
||||
background-color: @background;
|
||||
}
|
||||
& when not (@background-hover = false) {
|
||||
&:hover {
|
||||
background-color: @background-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
& when not (@background-active = false) {
|
||||
.vc_active .vc_pagination-trigger {
|
||||
background-color: @background-active;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,45 @@
|
||||
/*** Pie chart **/
|
||||
.vc_pie_chart {
|
||||
z-index: 0;
|
||||
text-align: center;
|
||||
.opacity(0);
|
||||
|
||||
&.vc_ready {
|
||||
.opacity(1);
|
||||
}
|
||||
|
||||
.vc_pie_wrapper {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
canvas {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.vc_pie_chart_value {
|
||||
font-size: 200%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.vc_pie_chart_back {
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border: 6px solid @vc_btnBackground;
|
||||
border-radius: 999px;
|
||||
border-radius: 50%;
|
||||
.opacity(0.3);
|
||||
.box-sizing(border-box);
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
/* Posts slider
|
||||
---------------------------------------------------------- */
|
||||
.wpb_posts_slider {
|
||||
.flex-caption,
|
||||
.nivo-caption {
|
||||
background-color: @vc_post_slider_caption_bg;
|
||||
.opacity(1);
|
||||
color: inherit;
|
||||
padding: 10px 15px;
|
||||
position: static;
|
||||
}
|
||||
|
||||
.wpb_gallery_slides > ul > li {
|
||||
.no_bullet_fix();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,146 @@
|
||||
@stop_standalone_compiling: @vc_grey;
|
||||
/* Progress bar
|
||||
---------------------------------------------------------- */
|
||||
.vc_progress_bar {
|
||||
.vc_single_bar {
|
||||
background: @vc_progress_bar_bg;
|
||||
position: relative;
|
||||
margin-bottom: @vc_margin_bottom_third;
|
||||
.box-shadow(0 1px 2px rgba(0, 0, 0, 0.1) inset);
|
||||
.border-radius(3px);
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.vc_label {
|
||||
display: block;
|
||||
padding: 0.5em 1em;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.vc_bar {
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
background-color: #e0e0e0;
|
||||
width: 0%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
.border-radius(3px);
|
||||
.wpb_transition(width, 1s, linear);
|
||||
|
||||
&.striped {
|
||||
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
|
||||
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
||||
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
||||
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
||||
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
||||
-webkit-background-size: 40px 40px;
|
||||
-moz-background-size: 40px 40px;
|
||||
-o-background-size: 40px 40px;
|
||||
background-size: 40px 40px;
|
||||
}
|
||||
&.animated {
|
||||
-webkit-animation: progress-bar-stripes 2s linear infinite;
|
||||
-moz-animation: progress-bar-stripes 2s linear infinite;
|
||||
-ms-animation: progress-bar-stripes 2s linear infinite;
|
||||
-o-animation: progress-bar-stripes 2s linear infinite;
|
||||
animation: progress-bar-stripes 2s linear infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.make-bar-colors(@name, @background-color, @text-color:#ffffff, @text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25)) {
|
||||
&.vc_progress-bar-color-@{name} {
|
||||
.vc_single_bar .vc_bar {
|
||||
background-color: @background-color;
|
||||
}
|
||||
.vc_single_bar .vc_label {
|
||||
color: @text-color;
|
||||
text-shadow: @text-shadow;
|
||||
}
|
||||
}
|
||||
// allow custom for all
|
||||
.vc_general.vc_single_bar.vc_progress-bar-color-@{name} .vc_bar {
|
||||
background-color: @background-color;
|
||||
}
|
||||
.vc_general.vc_single_bar.vc_progress-bar-color-@{name} .vc_label {
|
||||
color: @text-color;
|
||||
text-shadow: @text-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
// Old-Classic colors
|
||||
.make-bar-colors(~'bar_blue', #0074CC);
|
||||
.make-bar-colors(~'bar_turquoise', #49afcd);
|
||||
.make-bar-colors(~'bar_green', #5bb75b);
|
||||
.make-bar-colors(~'bar_orange', #faa732);
|
||||
.make-bar-colors(~'bar_red', #da4f49);
|
||||
.make-bar-colors(~'bar_black', #414141);
|
||||
// New-Style colors
|
||||
.make-bar-colors(~'blue', @blue);
|
||||
.make-bar-colors(~'turquoise', @turquoise);
|
||||
.make-bar-colors(~'pink', @pink);
|
||||
.make-bar-colors(~'violet', @violet);
|
||||
.make-bar-colors(~'peacoc', @peacoc);
|
||||
.make-bar-colors(~'chino', @chino);
|
||||
.make-bar-colors(~'mulled-wine', @mulled_wine);
|
||||
.make-bar-colors(~'vista_blue', @vista_blue);
|
||||
.make-bar-colors(~'vista-blue', @vista_blue);
|
||||
.make-bar-colors(~'black', @black);
|
||||
.make-bar-colors(~'grey', @grey, #666666);
|
||||
.make-bar-colors(~'orange', @orange);
|
||||
.make-bar-colors(~'sky', @sky);
|
||||
.make-bar-colors(~'green', @green);
|
||||
.make-bar-colors(~'juicy-pink', @juicy_pink);
|
||||
.make-bar-colors(~'sandy-brown', @sandy_brown);
|
||||
.make-bar-colors(~'purple', @purple);
|
||||
.make-bar-colors(~'white', @white, #666666);
|
||||
|
||||
}
|
||||
|
||||
@-webkit-keyframes progress-bar-stripes {
|
||||
from {
|
||||
background-position: 40px 0;
|
||||
}
|
||||
to {
|
||||
background-position: 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes progress-bar-stripes {
|
||||
from {
|
||||
background-position: 40px 0;
|
||||
}
|
||||
to {
|
||||
background-position: 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
@-ms-keyframes progress-bar-stripes {
|
||||
from {
|
||||
background-position: 40px 0;
|
||||
}
|
||||
to {
|
||||
background-position: 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
@-o-keyframes progress-bar-stripes {
|
||||
from {
|
||||
background-position: 0 0;
|
||||
}
|
||||
to {
|
||||
background-position: 40px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes progress-bar-stripes {
|
||||
from {
|
||||
background-position: 40px 0;
|
||||
}
|
||||
to {
|
||||
background-position: 0 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
@stop_standalone_compiling: @vc_grey;
|
||||
/* Responsive stuff
|
||||
---------------------------------------------------------- */
|
||||
/* Make all grid-sized elements block level again */
|
||||
@media (max-width: @vc_responsive_max_w) {
|
||||
.vc_responsive {
|
||||
div.vc_row-fluid div[class*="vc_col-"] {
|
||||
float: none;
|
||||
display: block;
|
||||
width: auto;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,252 @@
|
||||
/**
|
||||
* Row styles
|
||||
*/
|
||||
|
||||
.vc_row {
|
||||
&.vc_row-no-padding {
|
||||
.vc_column-inner {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
&[data-vc-full-width] {
|
||||
.transition(opacity 0.5s ease);
|
||||
overflow: hidden; /** Fix overflow **/
|
||||
&.vc_hidden {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vc_row-no-padding {
|
||||
.vc_inner {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.vc_row {
|
||||
&.vc_row-o-full-height {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
// enable flex
|
||||
&.vc_row-flex {
|
||||
box-sizing: border-box;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
|
||||
> .vc_column_container {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
> .vc_column-inner {
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex-grow: 1;
|
||||
-ms-flex-positive: 1;
|
||||
flex-grow: 1;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
z-index: 1;
|
||||
@media (-ms-high-contrast: active), (-ms-high-contrast: none) {
|
||||
/* IE10+ specific styles */
|
||||
& > * {
|
||||
min-height: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// columns alignment
|
||||
&.vc_row-o-columns-stretch {
|
||||
-webkit-align-content: stretch;
|
||||
-ms-flex-line-pack: stretch;
|
||||
align-content: stretch;
|
||||
}
|
||||
&.vc_row-o-columns-top {
|
||||
-webkit-align-content: flex-start;
|
||||
-ms-flex-line-pack: start;
|
||||
align-content: flex-start;
|
||||
}
|
||||
&.vc_row-o-columns-bottom {
|
||||
-webkit-align-content: flex-end;
|
||||
-ms-flex-line-pack: end;
|
||||
align-content: flex-end;
|
||||
}
|
||||
&.vc_row-o-columns-middle {
|
||||
-webkit-align-content: center;
|
||||
-ms-flex-line-pack: center;
|
||||
align-content: center;
|
||||
}
|
||||
&.vc_row-o-columns-top,
|
||||
&.vc_row-o-columns-bottom,
|
||||
&.vc_row-o-columns-middle {
|
||||
&::after {
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
// equal height
|
||||
&.vc_row-o-equal-height {
|
||||
> .vc_column_container {
|
||||
-webkit-box-align: stretch;
|
||||
-webkit-align-items: stretch;
|
||||
-ms-flex-align: stretch;
|
||||
align-items: stretch;
|
||||
}
|
||||
}
|
||||
|
||||
// content alignment
|
||||
&.vc_row-o-content-top {
|
||||
> .vc_column_container {
|
||||
> .vc_column-inner {
|
||||
-webkit-box-pack: start;
|
||||
-webkit-justify-content: flex-start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
&:not(.vc_row-o-equal-height) {
|
||||
> .vc_column_container {
|
||||
-webkit-box-align: start;
|
||||
-webkit-align-items: flex-start;
|
||||
-ms-flex-align: start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.vc_row-o-content-bottom {
|
||||
> .vc_column_container {
|
||||
> .vc_column-inner {
|
||||
-webkit-box-pack: end;
|
||||
-webkit-justify-content: flex-end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
&:not(.vc_row-o-equal-height) {
|
||||
> .vc_column_container {
|
||||
-webkit-box-align: end;
|
||||
-webkit-align-items: flex-end;
|
||||
-ms-flex-align: end;
|
||||
align-items: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.vc_row-o-content-middle {
|
||||
> .vc_column_container {
|
||||
> .vc_column-inner {
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
&:not(.vc_row-o-equal-height) {
|
||||
> .vc_column_container {
|
||||
-webkit-box-align: center;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Clearfix for column
|
||||
.vc_column-inner {
|
||||
&::before,
|
||||
&::after {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
&::after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
.vc_ie-flexbox-fixer {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
> .vc_row {
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex: 1 1 auto;
|
||||
-ms-flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.vc_row {
|
||||
.vc_make-column-gap(1);
|
||||
.vc_make-column-gap(2);
|
||||
.vc_make-column-gap(3);
|
||||
.vc_make-column-gap(4);
|
||||
.vc_make-column-gap(5);
|
||||
.vc_make-column-gap(10);
|
||||
.vc_make-column-gap(15);
|
||||
.vc_make-column-gap(20);
|
||||
.vc_make-column-gap(25);
|
||||
.vc_make-column-gap(30);
|
||||
.vc_make-column-gap(35);
|
||||
}
|
||||
|
||||
.vc_column_container {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
> .vc_column-inner {
|
||||
box-sizing: border-box;
|
||||
padding-left: @grid-gutter-width/2;
|
||||
padding-right: @grid-gutter-width/2;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// row gaps
|
||||
.vc_make-column-gap(@spacing) {
|
||||
&.vc_column-gap-@{spacing} {
|
||||
margin-left: -(@grid-gutter-width + @spacing)/2;
|
||||
margin-right: -(@grid-gutter-width + @spacing)/2;
|
||||
> .vc_column_container {
|
||||
padding: unit(@spacing/2, px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// row fills
|
||||
.vc_row-has-fill > .vc_column_container > .vc_column-inner,
|
||||
.vc_row-has-fill + .vc_row > .vc_column_container > .vc_column-inner,
|
||||
.vc_row-has-fill + .vc_row-full-width + .vc_row > .vc_column_container > .vc_column-inner,
|
||||
.vc_col-has-fill > .vc_column-inner {
|
||||
padding-top: @vc_element_margin_bottom;
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
.vc_section {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
margin-left: -15px;
|
||||
margin-right: -15px;
|
||||
|
||||
&[data-vc-full-width] {
|
||||
.transition(opacity 0.5s ease);
|
||||
overflow: hidden; /** Fix overflow **/
|
||||
&.vc_hidden {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
> .vc_row {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
&[data-vc-stretch-content] {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.vc_section {
|
||||
&.vc_row-o-full-height {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
// enable flex
|
||||
&.vc_section-flex {
|
||||
box-sizing: border-box;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-flow: column nowrap;
|
||||
flex-flow: column nowrap;
|
||||
|
||||
.vc_vc_row {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// content alignment
|
||||
&.vc_section-o-content-top {
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
&.vc_section-o-content-bottom {
|
||||
-webkit-box-pack: end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
&.vc_section-o-content-middle {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
&.vc_section-o-content-top,
|
||||
&.vc_section-o-content-bottom,
|
||||
&.vc_section-o-content-middle {
|
||||
&::after {
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// section fills
|
||||
.vc_section {
|
||||
&.vc_section-has-fill,
|
||||
&.vc_section-has-fill + .vc_section,
|
||||
&.vc_section-has-fill + .vc_row-full-width + .vc_section {
|
||||
padding-top: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,317 @@
|
||||
@vc_separator-title-padding: 0.8em;
|
||||
@vc_separator-shadow-size: 10px;
|
||||
|
||||
.vc_separator {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-flex-wrap: nowrap;
|
||||
-ms-flex-wrap: nowrap;
|
||||
flex-wrap: nowrap;
|
||||
-webkit-box-align: center;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
h4 {
|
||||
line-height: 1em;
|
||||
font-size: 100%;
|
||||
margin: 0;
|
||||
word-wrap: break-word;
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 1 auto;
|
||||
-ms-flex: 0 1 auto;
|
||||
flex: 0 1 auto;
|
||||
.normal {
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
.vc_sep_holder {
|
||||
height: 1px;
|
||||
position: relative;
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex: 1 1 auto;
|
||||
-ms-flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
min-width: 10%;
|
||||
.vc_sep_line {
|
||||
height: 1px;
|
||||
border-top: 1px solid @vc_separator_border;
|
||||
display: block;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
&.vc_separator_align_center {
|
||||
h4 {
|
||||
padding: 0 @vc_separator-title-padding;
|
||||
}
|
||||
}
|
||||
&.vc_separator_align_left {
|
||||
h4 {
|
||||
padding: 0 @vc_separator-title-padding 0 0;
|
||||
}
|
||||
.vc_sep_holder.vc_sep_holder_l {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&.vc_separator_align_right {
|
||||
h4 {
|
||||
padding: 0 0 0 @vc_separator-title-padding;
|
||||
margin: 0 !important;
|
||||
}
|
||||
.vc_sep_holder.vc_sep_holder_r {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&.vc_sep_ {
|
||||
&double {
|
||||
height: 3px;
|
||||
.vc_sep_line {
|
||||
border-bottom: 1px solid @vc_separator_border;
|
||||
border-top: 1px solid @vc_separator_border;
|
||||
height: 3px;
|
||||
}
|
||||
}
|
||||
&dashed {
|
||||
.vc_sep_line {
|
||||
border-top-style: dashed;
|
||||
}
|
||||
}
|
||||
&dotted {
|
||||
.vc_sep_line {
|
||||
border-top-style: dotted;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// shadow style
|
||||
&.vc_sep_shadow {
|
||||
.vc_sep_line {
|
||||
border: none;
|
||||
position: relative;
|
||||
height: @vc_separator-shadow-size * 2;
|
||||
top: 0;
|
||||
overflow: hidden;
|
||||
&::after {
|
||||
content:'';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -@vc_separator-shadow-size * 2;
|
||||
right: 0;
|
||||
height: @vc_separator-shadow-size;
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
.vc_sep_holder_l .vc_sep_line::after {
|
||||
right: -100%;
|
||||
box-shadow: @vc_separator-shadow-size @vc_separator-shadow-size @vc_separator-shadow-size 1px;
|
||||
}
|
||||
.vc_sep_holder_r .vc_sep_line::after {
|
||||
left: -100%;
|
||||
box-shadow: -@vc_separator-shadow-size @vc_separator-shadow-size @vc_separator-shadow-size 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&.vc_separator_no_text:not(.vc_sep_shadow) {
|
||||
.vc_sep_holder_l {
|
||||
width: 100%;
|
||||
}
|
||||
.vc_sep_holder_r {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
// icon behaviour
|
||||
.vc_icon_element {
|
||||
margin-bottom: 0;
|
||||
&:not(.vc_icon_element-have-style){
|
||||
+ h4 {
|
||||
padding-left: 0;
|
||||
}
|
||||
.vc_icon_element-size-xl {
|
||||
margin-left: @vc_separator-title-padding;
|
||||
margin-right: @vc_separator-title-padding;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.vc_separator-has-text {
|
||||
&.vc_separator_align_center,
|
||||
&.vc_separator_align_right {
|
||||
.vc_icon_element {
|
||||
&.vc_icon_element-have-style {
|
||||
margin-left: @vc_separator-title-padding;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.vc_separator_align_left {
|
||||
.vc_icon_element {
|
||||
&.vc_icon_element-have-style {
|
||||
+ h4 {
|
||||
padding-left: @vc_separator-title-padding;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//Border widths
|
||||
.vc_separator_widths(1);
|
||||
.vc_separator_widths(2);
|
||||
.vc_separator_widths(3);
|
||||
.vc_separator_widths(4);
|
||||
.vc_separator_widths(5);
|
||||
.vc_separator_widths(6);
|
||||
.vc_separator_widths(7);
|
||||
.vc_separator_widths(8);
|
||||
.vc_separator_widths(9);
|
||||
.vc_separator_widths(10);
|
||||
|
||||
.vc_separator_widths(@width) {
|
||||
&.vc_sep_border_width_@{width} {
|
||||
.vc_sep_holder .vc_sep_line {
|
||||
border-top-width: unit(@width, px);
|
||||
}
|
||||
&.vc_sep_double .vc_sep_holder .vc_sep_line {
|
||||
border-bottom-width: unit(@width, px);
|
||||
top: unit(ceil(-@width/2), px);
|
||||
}
|
||||
&.vc_sep_shadow {
|
||||
.vc_sep_line {
|
||||
top: -(unit(floor(@width/2), px));
|
||||
}
|
||||
.vc_sep_holder_l .vc_sep_line::after {
|
||||
box-shadow: @vc_separator-shadow-size @vc_separator-shadow-size @vc_separator-shadow-size unit(@width, px);
|
||||
}
|
||||
.vc_sep_holder_r .vc_sep_line::after {
|
||||
box-shadow: -@vc_separator-shadow-size @vc_separator-shadow-size @vc_separator-shadow-size unit(@width, px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//Color variations
|
||||
.vc_separator_variants(_blue, @blue);
|
||||
.vc_separator_variants(_turquoise, @turquoise);
|
||||
.vc_separator_variants(_pink, @pink);
|
||||
.vc_separator_variants(_violet, @violet);
|
||||
.vc_separator_variants(_peacoc, @peacoc);
|
||||
.vc_separator_variants(_chino, @chino);
|
||||
.vc_separator_variants(_mulled_wine, @mulled_wine);
|
||||
.vc_separator_variants(_vista_blue, @vista_blue);
|
||||
.vc_separator_variants(_black, @black);
|
||||
.vc_separator_variants(_grey, @grey);
|
||||
.vc_separator_variants(_orange, @orange);
|
||||
.vc_separator_variants(_sky, @sky);
|
||||
.vc_separator_variants(_green, @green);
|
||||
.vc_separator_variants(_juicy_pink, @juicy_pink);
|
||||
.vc_separator_variants(_sandy_brown, @sandy_brown);
|
||||
.vc_separator_variants(_purple, @purple);
|
||||
.vc_separator_variants(_white, @white);
|
||||
}
|
||||
|
||||
.vc_separator_variants(@selector, @color) {
|
||||
&.vc_sep_color {
|
||||
&@{selector} {
|
||||
.vc_sep_line {
|
||||
border-color: @color;
|
||||
}
|
||||
&.vc_sep_shadow {
|
||||
.vc_sep_holder {
|
||||
color: @color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wpb_separator,
|
||||
.vc_text_separator {
|
||||
border-bottom: 1px solid @vc_separator_border;
|
||||
}
|
||||
|
||||
.vc_sep_width {
|
||||
&_10 {
|
||||
width: 10%;
|
||||
}
|
||||
&_20 {
|
||||
width: 20%;
|
||||
}
|
||||
&_30 {
|
||||
width: 30%;
|
||||
}
|
||||
&_40 {
|
||||
width: 40%;
|
||||
}
|
||||
&_50 {
|
||||
width: 50%;
|
||||
}
|
||||
&_60 {
|
||||
width: 60%;
|
||||
}
|
||||
&_70 {
|
||||
width: 70%;
|
||||
}
|
||||
&_80 {
|
||||
width: 80%;
|
||||
}
|
||||
&_90 {
|
||||
width: 90%;
|
||||
}
|
||||
&_100 {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.vc_sep_pos {
|
||||
&_align_center {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
&_align_left {
|
||||
margin-left: 0;
|
||||
margin-right: auto;
|
||||
}
|
||||
&_align_right {
|
||||
margin-left: auto;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Separator
|
||||
---------------------------------------------------------- */
|
||||
.wpb_separator {
|
||||
clear: both;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
/* Text Separator
|
||||
---------------------------------------------------------- */
|
||||
.vc_text_separator {
|
||||
clear: both;
|
||||
height: 1px;
|
||||
div {
|
||||
display: inline-block;
|
||||
background-color: @bodyBackground;
|
||||
padding: 1px 1em;
|
||||
position: relative;
|
||||
top: -9px;
|
||||
}
|
||||
}
|
||||
|
||||
.separator_align_center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.separator_align_left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.separator_align_right {
|
||||
text-align: right;
|
||||
}
|
||||
@@ -0,0 +1,174 @@
|
||||
.vc_box_border_variants(@selector, @color) {
|
||||
.vc_box_outline.vc_box_border@{selector},
|
||||
.vc_box_outline_circle.vc_box_border@{selector} {
|
||||
border-color: @color;
|
||||
}
|
||||
.vc_box_border.vc_box_border@{selector},
|
||||
.vc_box_border_circle.vc_box_border@{selector} {
|
||||
background-color: @color;
|
||||
}
|
||||
}
|
||||
|
||||
.wpb_single_image {
|
||||
a {
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
img {
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
vertical-align: top;
|
||||
&.vc_img-placeholder {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.vc_single_image-wrapper {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
max-width: 100%;
|
||||
&.vc_box_ {
|
||||
&rounded, &rounded img {
|
||||
border-radius: 4px;
|
||||
.box-shadow(none);
|
||||
}
|
||||
&outline,
|
||||
&outline_circle {
|
||||
border-radius: 0;
|
||||
.box-shadow(none);
|
||||
padding: 6px;
|
||||
border: 1px solid @grey;
|
||||
img {
|
||||
border-radius: 0;
|
||||
.box-shadow(none);
|
||||
border: 1px solid @grey;
|
||||
}
|
||||
}
|
||||
&border,
|
||||
&border_circle {
|
||||
border-radius: 0;
|
||||
.box-shadow(none);
|
||||
padding: 6px;
|
||||
border: none;
|
||||
img {
|
||||
border-radius: 0;
|
||||
.box-shadow(none);
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
&shadow,
|
||||
&shadow_border,
|
||||
&shadow_border_circle,
|
||||
&shadow_circle {
|
||||
border-radius: 0;
|
||||
.box-shadow(0 0px 5px rgba(0, 0, 0, 0.1));
|
||||
img {
|
||||
border-radius: 0;
|
||||
.box-shadow(0 0px 5px rgba(0, 0, 0, 0.1));
|
||||
}
|
||||
}
|
||||
&shadow_border,
|
||||
&shadow_border_circle {
|
||||
padding: 6px;
|
||||
}
|
||||
&shadow_3d {
|
||||
border-radius: 0;
|
||||
.box-shadow(none);
|
||||
margin-bottom: 15px;
|
||||
img {
|
||||
border-radius: 0;
|
||||
.box-shadow(none);
|
||||
}
|
||||
}
|
||||
&circle,
|
||||
&outline_circle,
|
||||
&border_circle,
|
||||
&shadow_circle,
|
||||
&shadow_border_circle {
|
||||
border-radius: 50%;
|
||||
.box-shadow(none);
|
||||
overflow: hidden;
|
||||
img {
|
||||
border-radius: 50%;
|
||||
.box-shadow(none);
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
&shadow_circle, &shadow_border_circle {
|
||||
.box-shadow(0 0px 5px rgba(0, 0, 0, 0.1));
|
||||
img {
|
||||
.box-shadow(0 0px 5px rgba(0, 0, 0, 0.1));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.vc_align_center {
|
||||
text-align: center;
|
||||
}
|
||||
&.vc_align_right {
|
||||
text-align: right;
|
||||
}
|
||||
&.vc_align_left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.vc_box_shadow_3d {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
&:after,
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
.box-shadow(0 15px 10px rgba(0, 0, 0, 0.6));
|
||||
left: 5px;
|
||||
right: 50%;
|
||||
bottom: 8px;
|
||||
height: 30%;
|
||||
z-index: -1;
|
||||
border-radius: inherit;
|
||||
.transform-origin(0 0);
|
||||
-webkit-transform: skewY(-6deg);
|
||||
-ms-transform: skewY(-6deg);
|
||||
transform: skewY(-6deg);
|
||||
}
|
||||
&:after {
|
||||
left: 50%;
|
||||
right: 5px;
|
||||
-webkit-transform: skewY(6deg);
|
||||
-ms-transform: skewY(6deg);
|
||||
transform: skewY(6deg);
|
||||
.transform-origin(100% 0);
|
||||
}
|
||||
}
|
||||
|
||||
.vc_figure {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.vc_figure-caption {
|
||||
margin-top: .2em;
|
||||
font-size: .8em;
|
||||
}
|
||||
|
||||
.vc_box_border_variants(_blue, @blue);
|
||||
.vc_box_border_variants(_turquoise, @turquoise);
|
||||
.vc_box_border_variants(_pink, @pink);
|
||||
.vc_box_border_variants(_violet, @violet);
|
||||
.vc_box_border_variants(_peacoc, @peacoc);
|
||||
.vc_box_border_variants(_chino, @chino);
|
||||
.vc_box_border_variants(_mulled_wine, @mulled_wine);
|
||||
.vc_box_border_variants(_vista_blue, @vista_blue);
|
||||
.vc_box_border_variants(_black, @black);
|
||||
.vc_box_border_variants(_grey, @grey);
|
||||
.vc_box_border_variants(_orange, @orange);
|
||||
.vc_box_border_variants(_sky, @sky);
|
||||
.vc_box_border_variants(_green, @green);
|
||||
.vc_box_border_variants(_juicy_pink, @juicy_pink);
|
||||
.vc_box_border_variants(_sandy_brown, @sandy_brown);
|
||||
.vc_box_border_variants(_purple, @purple);
|
||||
.vc_box_border_variants(_white, @white);
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
@stop_standalone_compiling: @vc_grey;
|
||||
/* Facebook
|
||||
---------------------------------------------------------- */
|
||||
.fb_type_standard {
|
||||
height: 25px;
|
||||
|
||||
iframe {
|
||||
height: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.fb_type_button_count {
|
||||
height: 20px;
|
||||
|
||||
iframe {
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.fb_type_box_count {
|
||||
height: 62px;
|
||||
|
||||
iframe {
|
||||
height: 62px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Google plus
|
||||
---------------------------------------------------------- */
|
||||
.wpb_googleplus_type_standard {
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.wpb_googleplus_type_small {
|
||||
height: 19px;
|
||||
}
|
||||
|
||||
.wpb_googleplus_type_medium {
|
||||
height: 21px;
|
||||
}
|
||||
|
||||
.wpb_googleplus_type_tall {
|
||||
height: 21px;
|
||||
}
|
||||
|
||||
.wpb_googleplus_type_tall.vc_googleplus-annotation-bubble {
|
||||
height: 62px;
|
||||
}
|
||||
|
||||
/* Pinterest
|
||||
---------------------------------------------------------- */
|
||||
.wpb_pinterest {
|
||||
a {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.wpb_pinterest_type_horizontal {
|
||||
height: 21px;
|
||||
}
|
||||
|
||||
.wpb_pinterest_type_vertical {
|
||||
box-sizing: content-box;
|
||||
padding-top: 29px;
|
||||
height: 21px;
|
||||
}
|
||||
|
||||
.wpb_pinterest_type_none {
|
||||
height: 21px;
|
||||
}
|
||||
|
||||
/* Pinterest
|
||||
---------------------------------------------------------- */
|
||||
iframe.twitter-share-button {
|
||||
margin: 0;
|
||||
}
|
||||
@@ -0,0 +1,200 @@
|
||||
// Make sure links dont have outline
|
||||
.wpb_content_element .wpb_tabs_nav li,
|
||||
.wpb_accordion_section .wpb_accordion_header,
|
||||
.wpb_tour_next_prev_nav {
|
||||
a:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
/** Tabs/Tour Common **/
|
||||
.wpb_content_element {
|
||||
.wpb_tour_tabs_wrapper,
|
||||
.wpb_tabs_nav {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.wpb_tabs_nav {
|
||||
margin: 0;
|
||||
padding-left: 0 !important;
|
||||
text-indent: inherit !important;
|
||||
#content & {
|
||||
//#content for twenty ten theme
|
||||
margin: 0;
|
||||
}
|
||||
li {
|
||||
background-color: @vc_tab_bg;
|
||||
white-space: nowrap;
|
||||
padding: 0;
|
||||
.no_bullet_fix();
|
||||
|
||||
&.ui-tabs-active,
|
||||
&:hover {
|
||||
background-color: @vc_tab_bg_active;
|
||||
}
|
||||
&.ui-tabs-active a {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wpb_tour_tabs_wrapper {
|
||||
.wpb_ui-tabs-hide {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** Tabs/Tour/Accordion Common **/
|
||||
.wpb_content_element {
|
||||
.wpb_tour_tabs_wrapper .wpb_tabs_nav a,
|
||||
.wpb_accordion_header a {
|
||||
border-bottom: none;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
padding: 0.5em 1em;
|
||||
}
|
||||
.wpb_accordion_wrapper .wpb_accordion_header,
|
||||
&.wpb_tabs .wpb_tour_tabs_wrapper .wpb_tab {
|
||||
background-color: @vc_tab_bg_active;
|
||||
}
|
||||
|
||||
.wpb_tour_tabs_wrapper .wpb_tab,
|
||||
.wpb_accordion_wrapper .wpb_accordion_content {
|
||||
padding: 1em;
|
||||
|
||||
> .wpb_content_element:last-child,
|
||||
.wpb_row:last-child > div > div.wpb_wrapper .wpb_content_element:last-child {
|
||||
margin-bottom: 0; // remove bottom margin for last content element in the last row
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** Tabs **/
|
||||
.wpb_tabs {
|
||||
.wpb_tabs_nav {
|
||||
li {
|
||||
float: left;
|
||||
margin: 0 1px 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** Tour **/
|
||||
.wpb_tour {
|
||||
.wpb_tabs_nav {
|
||||
float: left;
|
||||
width: @tour_nav_width;
|
||||
li {
|
||||
margin: 0 0 1px 0;
|
||||
clear: left;
|
||||
width: 100%;
|
||||
}
|
||||
a {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.wpb_tour_tabs_wrapper .wpb_tab {
|
||||
.box-sizing(border-box);
|
||||
border: none;
|
||||
float: left;
|
||||
width: @tour_slides_width;
|
||||
padding: 0 0 0 @vc_margin_bottom_gold;
|
||||
}
|
||||
}
|
||||
|
||||
.wpb_tour_next_prev_nav {
|
||||
margin-left: @tour_nav_width;
|
||||
padding-left: @vc_margin_bottom_gold;
|
||||
font-size: @vc_smaller_font;
|
||||
|
||||
a {
|
||||
border-bottom: 1px dotted;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
width: 48%;
|
||||
display: inline-block;
|
||||
padding-top: 1em; //10px;
|
||||
float: left;
|
||||
|
||||
&.wpb_next_slide {
|
||||
text-align: right;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** Accordion **/
|
||||
.wpb_accordion {
|
||||
.wpb_accordion_wrapper {
|
||||
.wpb_accordion_header {
|
||||
margin: 0 0 1px 0;
|
||||
padding-top: 0;
|
||||
position: relative;
|
||||
|
||||
text-transform: none;
|
||||
font-weight: inherit;
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
line-height: inherit;
|
||||
letter-spacing: inherit;
|
||||
|
||||
a {
|
||||
padding-left: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-state-default,
|
||||
.ui-state-active {
|
||||
.ui-icon {
|
||||
display: block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-image: url(../images/toggle_open.png);
|
||||
background-repeat: no-repeat;
|
||||
position: absolute;
|
||||
right: 0.7em;
|
||||
top: 0.7em;
|
||||
}
|
||||
}
|
||||
.ui-state-active .ui-icon {
|
||||
background-image: url(../images/toggle_close.png);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* tabs_tour_accordion responsive rules */
|
||||
@media (max-width: @vc_responsive_max_w) {
|
||||
.vc_responsive {
|
||||
.wpb_tour .wpb_tour_tabs_wrapper .wpb_tabs_nav,
|
||||
.wpb_tour .wpb_tab,
|
||||
.wpb_tour_next_prev_nav {
|
||||
width: 100%;
|
||||
float: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
.wpb_tour_next_prev_nav {
|
||||
width: auto;
|
||||
padding: 0 1em;
|
||||
}
|
||||
|
||||
#content .wpb_tour .wpb_tour_tabs_wrapper .wpb_tabs_nav {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
//Tabs + Tour
|
||||
.wpb_tour {
|
||||
.wpb_tab {
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,132 @@
|
||||
/* Teaser Grid
|
||||
---------------------------------------------------------- */
|
||||
.wpb_column .wpb_wrapper .wpb_teaser_grid {
|
||||
float: none;
|
||||
}
|
||||
|
||||
// Teaser grid adjustments
|
||||
body ul.wpb_thumbnails-fluid li {
|
||||
background-image: none; /* some themes add bg image as a bullet */
|
||||
padding: 0;
|
||||
margin-left: 0;
|
||||
//
|
||||
.no_bullet_fix();
|
||||
|
||||
.entry-content *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.wpb_row .wpb_grid ul.wpb_thumbnails-fluid,
|
||||
.wpb_row .wpb_filtered_grid ul.wpb_thumbnails-fluid {
|
||||
padding: 0;
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
/* Teaser grid
|
||||
---------------------------------------------------------- */
|
||||
.wpb_teaser_grid .entry-content {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.grid_layout-thumbnail .post-thumb {
|
||||
margin-bottom: 0;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Carousel layout
|
||||
---------------------------------------------------------- */
|
||||
.wpb_carousel {
|
||||
.wpb_wrapper {
|
||||
position: relative;
|
||||
}
|
||||
.prev,
|
||||
.next {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
background-color: @vc_carousel_arrows_bg;
|
||||
padding: 0px 6px 0px 6px;
|
||||
font-size: 12px;
|
||||
z-index: 10;
|
||||
text-decoration: none;
|
||||
|
||||
.wpb_transition();
|
||||
|
||||
&:hover {
|
||||
background-color: @vc_carousel_arrows_bg_hover;
|
||||
}
|
||||
&:focus {
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
.prev {
|
||||
right: 30px;
|
||||
}
|
||||
.next {
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
.wpb_thumbnails-fluid {
|
||||
width: 100%;
|
||||
|
||||
> [class*="vc_span"] {
|
||||
height: auto !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*** Categories filter ***/
|
||||
.wpb_teaser_grid .categories_filter,
|
||||
.wpb_categories_filter {
|
||||
list-style: none;
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0 0 10px 0;
|
||||
|
||||
li {
|
||||
display: block;
|
||||
float: left;
|
||||
margin: 0 10px 10px 0;
|
||||
//
|
||||
.no_bullet_fix();
|
||||
|
||||
a {
|
||||
border: none;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
}
|
||||
|
||||
&.active a {
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive stuff
|
||||
@media (max-width: @vc_responsive_max_w) {
|
||||
//767
|
||||
.vc_responsive {
|
||||
.wpb_row {
|
||||
ul.wpb_thumbnails-fluid {
|
||||
margin-left: 0;
|
||||
width: auto;
|
||||
}
|
||||
.wpb_teaser_grid ul.wpb_thumbnails-fluid [class*="vc_col-"] {
|
||||
width: 100%;
|
||||
float: none;
|
||||
display: block;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,537 @@
|
||||
// Toggle 2
|
||||
// =============================================
|
||||
|
||||
// Variables;
|
||||
// --------------------
|
||||
@toggle-border-width: 2px;
|
||||
|
||||
@toggle-icon-size-sm: 16px;
|
||||
@toggle-icon-size-md: 22px;
|
||||
@toggle-icon-size-lg: 28px;
|
||||
|
||||
@toggle-font-size-base: 1em;
|
||||
@toggle-content-top-margin: 1em;
|
||||
|
||||
// Base Styles;
|
||||
// --------------------
|
||||
.vc_toggle {
|
||||
display: block;
|
||||
margin: 0 0 @vc_margin_bottom_gold 0;
|
||||
padding: 0;
|
||||
font-size: @toggle-font-size-base;
|
||||
&:last-of-type {
|
||||
margin-bottom: @vc_element_margin_bottom;
|
||||
}
|
||||
}
|
||||
|
||||
.vc_toggle_title {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
.user-select(none);
|
||||
font-weight: normal;
|
||||
> h4 {
|
||||
display: inline;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.vc_toggle_icon {
|
||||
display: none;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.vc_toggle_content {
|
||||
display: none;
|
||||
margin-bottom: @vc_margin_bottom_gold;
|
||||
margin-top: @toggle-content-top-margin;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// States
|
||||
// ------------------
|
||||
.vc_toggle {
|
||||
&.vc_toggle_active {
|
||||
> .vc_toggle_content {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Themes
|
||||
// --------------------
|
||||
|
||||
// Simple
|
||||
.vc_toggle_simple {
|
||||
.vc-make-toggle-shape();
|
||||
.vc-make-toggle-shape-color(@color: @black; @hover-color: @black-hover);
|
||||
.vc_toggle_icon {
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
// Round
|
||||
.vc_toggle_round {
|
||||
.vc-make-toggle-shape(@border-width: @toggle-border-width, @border-radius: 50%);
|
||||
}
|
||||
|
||||
// Rounded
|
||||
.vc_toggle_rounded {
|
||||
.vc-make-toggle-shape(@border-width: @toggle-border-width, @border-radius: 20%);
|
||||
}
|
||||
|
||||
// Square
|
||||
.vc_toggle_square {
|
||||
.vc-make-toggle-shape(@border-width: @toggle-border-width);
|
||||
}
|
||||
|
||||
// Text Only
|
||||
.vc_toggle_text_only {
|
||||
.vc_toggle_icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Arrow
|
||||
.vc_toggle_arrow {
|
||||
.vc_toggle_icon {
|
||||
display: inline-block;
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
border-style: solid;
|
||||
display: block;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
.box-sizing(border-box);
|
||||
.wpb_transform(rotate(45deg));
|
||||
}
|
||||
|
||||
&::before {
|
||||
border-left: none;
|
||||
border-top: none;
|
||||
}
|
||||
&::after {
|
||||
border-right: none;
|
||||
border-bottom: none;
|
||||
.vc-toggle-hidden();
|
||||
}
|
||||
}
|
||||
&.vc_toggle_active {
|
||||
.vc_toggle_icon {
|
||||
&::before {
|
||||
.vc-toggle-hidden();
|
||||
}
|
||||
&::after {
|
||||
.vc-toggle-visible();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// add arrow style color
|
||||
.vc_toggle {
|
||||
.vc-make-toggle-arrow-style-size(@toggle-icon-size-md);
|
||||
.vc-make-toggle-arrow-style-color(@black; @black-hover);
|
||||
}
|
||||
|
||||
// Default
|
||||
.vc_toggle_default {
|
||||
// back compatibility related to toggle FAQ
|
||||
@border: 1px solid #acacac;
|
||||
@background: #bababa;
|
||||
.vc_toggle_icon {
|
||||
background: @background;
|
||||
border: @border;
|
||||
.box-sizing(border-box);
|
||||
.translate(0, -50%);
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
.box-sizing(border-box);
|
||||
.translate(-50%, -50%);
|
||||
background: #bababa;
|
||||
}
|
||||
&::before {
|
||||
border: @border;
|
||||
}
|
||||
}
|
||||
&.vc_toggle_active {
|
||||
.vc_toggle_icon {
|
||||
&::before,
|
||||
&::after {
|
||||
.vc-toggle-hidden();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vc_toggle {
|
||||
.vc-make-toggle-default-style-size(@toggle-icon-size-md);
|
||||
}
|
||||
|
||||
// Colors
|
||||
// --------------------
|
||||
// Blue color
|
||||
.vc-make-toggle-colors-set(~'blue', @blue, @white, @blue-hover);
|
||||
// Turquoise color
|
||||
.vc-make-toggle-colors-set(~'turquoise', @turquoise, @white, @turquoise-hover);
|
||||
// Pink color
|
||||
.vc-make-toggle-colors-set(~'pink', @pink, @white, @pink-hover);
|
||||
// Violet color
|
||||
.vc-make-toggle-colors-set(~'violet', @violet, @white, @violet-hover);
|
||||
// Peacoc color
|
||||
.vc-make-toggle-colors-set(~'peacoc', @peacoc, @white, @peacoc-hover);
|
||||
// Chino color
|
||||
.vc-make-toggle-colors-set(~'chino', @chino, @white, @chino-hover);
|
||||
// Mulled Wine color
|
||||
.vc-make-toggle-colors-set(~'mulled_wine', @mulled_wine, @white, @mulled_wine-hover);
|
||||
// Vista Blue color
|
||||
.vc-make-toggle-colors-set(~'vista_blue', @vista_blue, @white, @vista_blue-hover);
|
||||
// Black color
|
||||
.vc-make-toggle-colors-set(~'black', @black, @white, @black-hover);
|
||||
// Grey color
|
||||
.vc-make-toggle-colors-set(~'grey', @grey, @white, @grey-hover);
|
||||
// Orange color
|
||||
.vc-make-toggle-colors-set(~'orange', @orange, @white, @orange-hover);
|
||||
// Sky color
|
||||
.vc-make-toggle-colors-set(~'sky', @sky, @white, @sky-hover);
|
||||
// Green color
|
||||
.vc-make-toggle-colors-set(~'green', @green, @white, @green-hover);
|
||||
// Juicy Pink color
|
||||
.vc-make-toggle-colors-set(~'juicy_pink', @juicy_pink, @white, @juicy_pink-hover);
|
||||
// Sandy Brown color
|
||||
.vc-make-toggle-colors-set(~'sandy_brown', @sandy_brown, @white, @sandy_brown-hover);
|
||||
// Purple color
|
||||
.vc-make-toggle-colors-set(~'purple', @purple, @white, @purple-hover);
|
||||
// White color
|
||||
.vc-make-toggle-colors-set(~'white', @white, @black, @white-hover);
|
||||
|
||||
// Sizes
|
||||
// ---------------
|
||||
// Smail size
|
||||
.vc-make-toggle-sizes-set(~'sm', @toggle-icon-size-sm);
|
||||
// Normal size
|
||||
.vc-make-toggle-sizes-set(~'md', @toggle-icon-size-md);
|
||||
// Large size
|
||||
.vc-make-toggle-sizes-set(~'lg', @toggle-icon-size-lg);
|
||||
|
||||
// Indents
|
||||
// ---------------
|
||||
.vc-make-toggle-indents(@toggle-icon-size-md);
|
||||
|
||||
// Make shape
|
||||
// ===================================
|
||||
.vc-make-toggle-shape(@border-width: 0; @border-radius: 0) {
|
||||
// Icon
|
||||
.vc_toggle_icon {
|
||||
border: @border-width solid transparent;
|
||||
border-radius: @border-radius;
|
||||
display: inline-block;
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
.box-sizing(border-box);
|
||||
.translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
&.vc_toggle_active {
|
||||
.vc_toggle_icon {
|
||||
&::after {
|
||||
.vc-toggle-hidden();
|
||||
}
|
||||
}
|
||||
}
|
||||
// make default size and color
|
||||
.vc-make-toggle-shape-size(@toggle-icon-size-md);
|
||||
.vc-make-toggle-shape-color(@white; @white; @black; @black-hover);
|
||||
}
|
||||
|
||||
// Make colors set
|
||||
// -------------------------------------
|
||||
.vc-make-toggle-colors-set(@selector; @background; @color; @hover-color) {
|
||||
.vc_toggle_color_@{selector} {
|
||||
.vc-make-toggle-simple-style-color(@background; @hover-color);
|
||||
.vc-make-toggle-shape-color(@color, @color, @background, @hover-color);
|
||||
.vc-make-toggle-default-style-color(@background; @hover-color);
|
||||
.vc-make-toggle-arrow-style-color(@background; @hover-color);
|
||||
}
|
||||
}
|
||||
|
||||
// Make sizes set
|
||||
// -------------------------------------
|
||||
.vc-make-toggle-sizes-set(@selector; @size) {
|
||||
.vc_toggle_size_@{selector} {
|
||||
.vc-make-toggle-shape-size(@size);
|
||||
.vc-make-toggle-default-style-size(@size);
|
||||
.vc-make-toggle-arrow-style-size(@size);
|
||||
.vc-make-toggle-indents(@size);
|
||||
}
|
||||
}
|
||||
|
||||
// Make indents
|
||||
// -------------------------------------
|
||||
.vc-make-toggle-indents(@indent) {
|
||||
&.vc_toggle_simple,
|
||||
&.vc_toggle_round,
|
||||
&.vc_toggle_rounded,
|
||||
&.vc_toggle_square,
|
||||
&.vc_toggle_default {
|
||||
.vc_toggle_title,
|
||||
.vc_toggle_content {
|
||||
padding-left: @indent * 1.5;
|
||||
.vc_toggle_icon {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
.translate(0, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.vc_toggle_default {
|
||||
.vc_toggle_title,
|
||||
.vc_toggle_content {
|
||||
padding-left: @indent * 1.1;
|
||||
}
|
||||
}
|
||||
&.vc_toggle_arrow {
|
||||
.vc_toggle_icon {
|
||||
margin-left: @indent / 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Make color
|
||||
// -------------------------------------
|
||||
.vc-make-toggle-shape-color(@color: @black; @hover-color: false; @background: transparent; @hover-background: transparent;) {
|
||||
// normal
|
||||
.vc_toggle_icon {
|
||||
background-color: @background;
|
||||
border-color: transparent;
|
||||
&::before,
|
||||
&::after {
|
||||
background-color: @color;
|
||||
}
|
||||
}
|
||||
// inverted color
|
||||
&.vc_toggle_color_inverted {
|
||||
.vc_toggle_icon {
|
||||
background-color: transparent;
|
||||
border-color: @background;
|
||||
&::before,
|
||||
&::after {
|
||||
background-color: @background;
|
||||
}
|
||||
}
|
||||
}
|
||||
// hover
|
||||
& when not (@hover-color = false) {
|
||||
// hover normal
|
||||
.vc_toggle_title {
|
||||
&:hover {
|
||||
.vc_toggle_icon {
|
||||
background-color: @hover-background;
|
||||
&::before,
|
||||
&::after {
|
||||
background-color: @hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// hover inverted
|
||||
&.vc_toggle_color_inverted {
|
||||
.vc_toggle_title {
|
||||
&:hover {
|
||||
.vc_toggle_icon {
|
||||
background-color: transparent;
|
||||
border-color: @hover-background;
|
||||
&::before,
|
||||
&::after {
|
||||
background-color: @hover-background;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Make Default style color
|
||||
// -------------------------------------
|
||||
.vc-make-toggle-default-style-color(@background: @grey; @hover-color: false) {
|
||||
&.vc_toggle_default {
|
||||
.vc_toggle_icon {
|
||||
background: @background;
|
||||
border-color: darken(@background, 10%);
|
||||
&::before {
|
||||
border-color: darken(@background, 10%);
|
||||
background: @background;
|
||||
}
|
||||
&::after {
|
||||
background: @background;
|
||||
}
|
||||
}
|
||||
// hover
|
||||
& when not (@hover-color = false) {
|
||||
.vc_toggle_title {
|
||||
&:hover {
|
||||
.vc_toggle_icon {
|
||||
background: @hover-color;
|
||||
border-color: darken(@hover-color, 10%);
|
||||
&::before {
|
||||
border-color: darken(@hover-color, 10%);
|
||||
background: @hover-color;
|
||||
}
|
||||
&::after {
|
||||
background: @hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Make Arrow style color
|
||||
// -------------------------------------
|
||||
.vc-make-toggle-arrow-style-color(@background: @black, @hover-color: false) {
|
||||
&.vc_toggle_arrow {
|
||||
.vc_toggle_icon {
|
||||
background: transparent;
|
||||
&::before,
|
||||
&::after {
|
||||
border-color: @background;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
// hover
|
||||
& when not (@hover-color = false) {
|
||||
.vc_toggle_title {
|
||||
&:hover {
|
||||
.vc_toggle_icon {
|
||||
background: transparent;
|
||||
&::before,
|
||||
&::after {
|
||||
border-color: @hover-color;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Make simple style color
|
||||
// -------------------------------------
|
||||
.vc-make-toggle-simple-style-color(@plus-color; @plus-hover) {
|
||||
&.vc_toggle_simple {
|
||||
.vc-make-toggle-shape-color(@color: @plus-color; @hover-color: @plus-hover);
|
||||
}
|
||||
}
|
||||
|
||||
// Make sizes
|
||||
// ===================================
|
||||
.vc-make-toggle-shape-size(@icon-size; @plus-size: floor(@icon-size * 0.5)) {
|
||||
@mod: mod(@plus-size, 2);
|
||||
.vc_toggle_icon {
|
||||
height: @icon-size;
|
||||
width: @icon-size;
|
||||
&::before {
|
||||
height: 2px;
|
||||
width: @plus-size - @mod;
|
||||
}
|
||||
&::after {
|
||||
height: @plus-size - @mod;
|
||||
width: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Default style sizes
|
||||
.vc-make-toggle-default-style-size(@icon-size; @plus-size: floor(@icon-size * 0.5)) {
|
||||
@plus-computed-size: max(@plus-size - mod(@plus-size, 2), 8px);
|
||||
@plus-width-max: 4px;
|
||||
@plus-width-min: 2px;
|
||||
&.vc_toggle_default {
|
||||
.vc_toggle_icon {
|
||||
display: inline-block;
|
||||
width: @plus-computed-size;
|
||||
margin-left: @plus-computed-size / 2;
|
||||
& when (@plus-size >= 10) {
|
||||
height: @plus-width-max;
|
||||
}
|
||||
& when (@plus-size < 10) {
|
||||
height: @plus-width-min;
|
||||
}
|
||||
&::before {
|
||||
height: @plus-computed-size;
|
||||
& when (@plus-size >= 10) {
|
||||
width: @plus-width-max;
|
||||
}
|
||||
& when (@plus-size < 10) {
|
||||
width: @plus-width-min;
|
||||
}
|
||||
}
|
||||
&::after {
|
||||
width: @plus-computed-size - 2px;
|
||||
& when (@plus-size >= 10) {
|
||||
height: @plus-width-max - 2px;
|
||||
}
|
||||
& when (@plus-size < 10) {
|
||||
height: @plus-width-min - 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Arrow style sizes
|
||||
.vc-make-toggle-arrow-style-size(@icon-size; @plus-size: floor(@icon-size * 0.5)) {
|
||||
@mod: mod(@plus-size, 2);
|
||||
&.vc_toggle_arrow {
|
||||
.vc_toggle_icon {
|
||||
height: @icon-size;
|
||||
width: @icon-size;
|
||||
&::before,
|
||||
&::after {
|
||||
border-width: 2px;
|
||||
height: @plus-size - @mod;
|
||||
margin-left: -(@plus-size - @mod) / 2;
|
||||
width: @plus-size - @mod;
|
||||
}
|
||||
&::before {
|
||||
margin-top: -(@plus-size - @mod);
|
||||
}
|
||||
&::after {
|
||||
margin-top: -(@plus-size - @mod) / 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Mixins
|
||||
// ==================================
|
||||
|
||||
// Hide element
|
||||
.vc-toggle-hidden() {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
// Show element
|
||||
.vc-toggle-visible() {
|
||||
visibility: visible;
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
/* WPBakery Page Builder Tabs Tours Accordions 2 (TTA) @since 4.5
|
||||
* .vc_tta-style-* and .vc_tta-color are mandatory to theming
|
||||
* ---------------------------------------------------------- */
|
||||
@import "tta/vc_tta-variables.less";
|
||||
@import "tta/vc_tta-core.less";
|
||||
@import "tta/vc_tta-colors.less";
|
||||
@import "tta/vc_tta-options.less";
|
||||
@import "tta/vc_tta-icon-controls.less";
|
||||
@import "tta/vc_tta-pagination.less";
|
||||
@import "tta/vc_tta-mixins.less";
|
||||
@@ -0,0 +1,78 @@
|
||||
/* Video widget
|
||||
---------------------------------------------------------- */
|
||||
.wpb_video_widget {
|
||||
&.vc_video-el-width {
|
||||
.width( @size ) {
|
||||
&-@{size} .wpb_wrapper {
|
||||
@percent_size: ~"@{size}%"; // string concatenation with number + %
|
||||
width: @percent_size;
|
||||
}
|
||||
}
|
||||
.generate_width(@start: 10, @max: 100, @step: 10) when ( @start <= @max) {
|
||||
.width(@start);
|
||||
.generate_width((@start+@step), @max, @step); // next iteration, will automatically break if @start+@step <= @max
|
||||
}
|
||||
.generate_width();
|
||||
}
|
||||
.wpb_video_wrapper {
|
||||
padding-top: (9 / 16) * 100%;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
> div {
|
||||
padding-top: 0 !important;
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
&.vc_video-aspect-ratio {
|
||||
&-169 {
|
||||
.wpb_video_wrapper {
|
||||
padding-top: (9 / 16) * 100%;
|
||||
}
|
||||
}
|
||||
&-43 {
|
||||
.wpb_video_wrapper {
|
||||
padding-top: (3 / 4) * 100%;
|
||||
}
|
||||
}
|
||||
&-235 {
|
||||
.wpb_video_wrapper {
|
||||
padding-top: (1 / 2.35) * 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.vc_video-align {
|
||||
&-left {
|
||||
.wpb_wrapper {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
&-center {
|
||||
.wpb_wrapper {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
&-right {
|
||||
.wpb_wrapper {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
.wpb_wrapper {
|
||||
position: relative;
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
.box-sizing(border-box);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wpb_video_wrapper .fluid-width-video-wrapper {
|
||||
padding-top: 0 !important;
|
||||
position: static;
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
@stop_standalone_compiling: @vc_grey;
|
||||
/* Widgetised column element
|
||||
---------------------------------------------------------- */
|
||||
.wpb_widgetised_column .wpb_wrapper > ul {
|
||||
margin: 0;
|
||||
|
||||
> li {
|
||||
margin-left: 0;
|
||||
|
||||
.no_bullet_fix();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
.vc-zigzag-wrapper {
|
||||
text-align: center;
|
||||
&.vc-zigzag-align-left {
|
||||
text-align: left;
|
||||
}
|
||||
&.vc-zigzag-align-right {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.vc-zigzag-inner {
|
||||
display: inline-block;
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
// single image can have different styles, including round, rounded and zoomed images inherits ome of those those styles
|
||||
.wpb_single_image {
|
||||
.wpb_wrapper {
|
||||
.vc_single_image-wrapper {
|
||||
.zoomImg {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wpb_single_image {
|
||||
[class*='_circle'] {
|
||||
.vc-zoom-wrapper {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
[class*='_rounded'] {
|
||||
.vc-zoom-wrapper {
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user