22

✏️ Editing: 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%);
      }
    }
  }
}

MR SKB