AlkantarClanX12
Current Path : /home/thanudqk/www/wp-content/plugins/js_composer/assets/less/shortcodes/tta/ |
Current File : /home/thanudqk/www/wp-content/plugins/js_composer/assets/less/shortcodes/tta/vc_tta-options.less |
/* 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%); } } } }