fixed-vuesax/dist/style/components/vsTabs.styl

Framework Components for Vue js

.fade-tab-enter-active, .fade-tab-leave-active {
  transition: all .3s;
}

.fade-tab-enter, .fade-tab-leave-to /* .fade-tab-leave-active below version 2.1.8 */
{
  top: 0;
  opacity: 0;
  position: absolute !important;
  transform: translate3d(-100%, 0, 0);
}

.fade-tab-leave-to /* .fade-tab-leave-active below version 2.1.8 */
{
  top: 0;
  opacity: 0;
  position: absolute !important;
  transform: translate3d(100%, 0, 0);
}

// invert

.fade-tab-invert-enter-active, .fade-tab-invert-leave-active {
  transition: all .3s;
}

.fade-tab-invert-enter, .fade-tab-invert-leave-to /* .fade-tab-invert-leave-active below version 2.1.8 */
{
  top: 0;
  opacity: 0;
  position: absolute !important;
  transform: translate3d(100%, 0, 0);
}

.fade-tab-invert-leave-to /* .fade-tab-invert-leave-active below version 2.1.8 */
{
  top: 0;
  opacity: 0;
  position: absolute !important;
  transform: translate3d(-100%, 0, 0);
}

// position

.fade-tab-vertical-enter-active, .fade-tab-vertical-leave-active {
  transition: all .3s;
}

.fade-tab-vertical-enter /* .fade-tab-vertical-leave-active below version 2.1.8 */
{
  top: 0;
  opacity: 0;
  position: absolute !important;
  transform: translate3d(0, 100%, 0);
}

.fade-tab-vertical-leave-to /* .fade-tab-vertical-leave-active below version 2.1.8 */
{
  top: 0;
  opacity: 0;
  position: absolute !important;
  transform: translate3d(0, -100%, 0);
}

.fade-tab-vertical-invert-enter-active, .fade-tab-vertical-invert-leave-active {
  transition: all .3s;
}

.fade-tab-vertical-invert-enter /* .fade-tab-vertical-invert-leave-active below version 2.1.8 */
{
  top: 0;
  opacity: 0;
  position: absolute !important;
  transform: translate3d(0, -100%, 0);
}

.fade-tab-vertical-invert-leave-to /* .fade-tab-vertical-invert-leave-active below version 2.1.8 */
{
  top: 0;
  opacity: 0;
  position: absolute !important;
  transform: translate3d(0, 100%, 0) !important;
}


.con-vs-tabs
  width 100%;
  overflow hidden
  position relative

  .con-slot-tabs
    position relative
    display: block
    overflow hidden

  .con-ul-tabs
    position relative

.vs-tabs--ul
  width 100%
  padding-left 0;
  position relative
  box-shadow: 0 0 25px 0 rgba(0, 0, 0, .04)

  &.ul-tabs-center
    justify-content center

  &.ul-tabs-right
    justify-content flex-end

  &.ul-tabs-fixed
    justify-content space-between
    flex-wrap: nowrap !important

    li
      width 100%

.line-vs-tabs
  width 100px
  height 2px
  display block
  position absolute
  transition all .2s ease
  transform: translateZ(0);
  will-change: left, right;

.vs-tabs--li
  display: block
  position relative

  button
    color inherit
    font-family inherit

  button.vs-tabs--btn
    box-sizing: border-box
    display: block
    position relative
    width 100%;
    background transparent
    margin 0
    padding 10px
    border 0
    cursor pointer
    transition all .2s ease
    z-index: 100

    &:hover:not(:disabled)
      color inherit

  button:disabled
    opacity .5
    cursor default !important
    pointer-events: none

.activeChild
  button:not(:disabled)
    color inherit

  button.vs-tabs--btn
    padding-top 8px;
    padding-bottom 12px;

.vs-tabs--btn-tag
  position absolute
  width: 20px
  height 20px
  display: flex
  align-items: center
  justify-content: center
  top -10px
  right -10px
  z-index 200
  border-radius 3px
  border: 0
  background: rgb(255, 255, 255)
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .05)
  cursor pointer

  i
    padding-right: 0 !important
    font-size: .9rem

.vs-tabs--btn-icon + span
  propWithDir(padding, left, 9px)

.vs-tabs-position-top
  .vs-tabs--ul
    display: flex
    flex-wrap: wrap

.vs-tabs-position-bottom
  display flex
  flex-direction column

  .vs-tabs--ul
    display: flex
    border-top 1px solid rgba(0, 0, 0, .05)
    border-bottom: 0 !important;

  .con-ul-tabs
    order: 2;

  .line-vs-tabs
    top: 0;

.vs-tabs-position-left
  display flex

  .line-vs-tabs
    left auto !important
    right 0;

  .con-ul-tabs
    float left
    height: 100%;
    display: block

  .vs-tabs--ul
    display block
    width: auto
    border-bottom: 0 !important;
    border-right: 1px solid rgba(0, 0, 0, .05)

  .activeChild
    button
      padding-top 10px !important;
      padding-bottom 10px !important;
      padding-left: 12px !important;
      padding-right: 8px !important;


.vs-tabs-position-right
  display flex

  .con-slot-tabs
    width: 100%;

  .con-ul-tabs
    float left
    height: 100%;
    display: block
    order: 2;

  .vs-tabs--ul
    display block
    width: auto
    border-bottom: 0 !important;
    border-left: 1px solid rgba(0, 0, 0, .05)

  .activeChild
    button
      padding-top 10px !important;
      padding-bottom 10px !important;
      padding-left: 8px !important;
      padding-right: 12px !important;

for colorx, i in $vs-colors
  .vs-tabs-{colorx}
    .con-ul-tabs
      button:not(:disabled)
        &:hover
          color: getColor(colorx, 1) !important

      .activeChild
        button
          color: getColor(colorx, 1) !important

      .line-vs-tabs
        background: linear-gradient(30deg, getColor(colorx, 1) 0%, getColor(colorx, .5) 100%) !important
        box-shadow 0 0 8px 0 getColor(colorx, .4) !important


// vs-tab

.vs-tabs--content
  position relative
  width 100%
  display block
  padding 10px