khaihihi
This commit is contained in:
KhaiNguyen
@@ -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;
|
||||
Reference in New Issue
Block a user