vui-design/src/style/components/tabs.less

A high quality UI Toolkit based on Vue.js

@vui-tabs: ~"@{vui}-tabs";

.@{vui-tabs} {
  display:block;
  box-sizing:border-box;

  &-header {
    display:flex;
    justify-content:flex-start;
    align-items:center;
    box-shadow:0 -@tabs-header-border-bottom-width 0 0 @tabs-header-border-bottom-color inset;
    margin-bottom:@tabs-header-margin-bottom;

    &-content {
      flex:1 1 auto;
      display:flex;
      justify-content:flex-start;
      align-items:center;
      width:0;
      overflow:hidden;
    }

    &-extra {

    }
  }

  &-body {
    &-content {

    }
  }

  &-btn {
    flex:0 0 auto;
    cursor:pointer;
    display:flex;
    justify-content:center;
    align-items:center;
    box-sizing:border-box;
    color:@tabs-tab-font-color;
    opacity:0.85;
    transition:all @transition-duration @transition-timing-function;

    .@{vui}-icon {
      display:block;
    }

    &:hover {
      color:@tabs-tab-hover-font-color;
    }

    &:active {
      color:@tabs-tab-active-font-color;
    }
  }

  &-scroller {
    flex:0 1 auto;
    position:relative;
    display:flex;
    justify-content:flex-start;
    align-items:stretch;
    box-sizing:border-box;
    overflow:hidden;

    &-content {
      display:flex;
      justify-content:flex-start;
      align-items:center;
      box-sizing:border-box;
      transform:translateX(0);
      transition:transform @transition-duration @transition-timing-function;
    }

    &-scrollable {
      &:before,
      &:after {
        content:"";
        position:absolute;
        top:0;
        bottom:0;
        z-index:1;
        display:block;
        box-sizing:border-box;
        width:6px;
        height:100%;
        pointer-events:none;
      }
      &:before {
        left:0;
        background:linear-gradient(to right, rgba(0, 0, 0, 0.06) -40%, rgba(0, 0, 0, 0) 100%);
      }
      &:after {
        right:0;
        background:linear-gradient(to left, rgba(0, 0, 0, 0.06) -40%, rgba(0, 0, 0, 0) 100%);
      }
    }
    &-scrollable&-ping-left {
      &:before {
        display:none;
      }
    }
    &-scrollable&-ping-right {
      &:after {
        display:none;
      }
    }
  }

  &-tab {
    cursor:pointer;
    display:flex;
    justify-content:center;
    align-items:center;
    box-sizing:border-box;
    overflow:hidden;
    color:@tabs-tab-font-color;
    line-height:@tabs-tab-line-height;
    white-space:nowrap;
    transition:all @transition-duration @transition-timing-function;

    &-icon {
      .@{vui}-icon {
        display:block;
      }
    }

    &-title {

    }

    &-btn-close {
      cursor:pointer;
      display:flex;
      justify-content:center;
      align-items:center;
      box-sizing:border-box;
      color:@tabs-tab-btn-close-font-color;
      opacity:0.85;
      transition:all @transition-duration @transition-timing-function;

      .@{vui}-icon {
        display:block;
      }

      &:hover {
        color:@tabs-tab-btn-close-hover-font-color;
      }
    }

    &:hover {
      color:@tabs-tab-hover-font-color;
    }

    &:active {
      color:@tabs-tab-active-font-color;
    }

    &-active {
      color:@tabs-tab-active-font-color;
    }

    &-disabled {
      pointer-events:none;
      cursor:not-allowed;
      color:@tabs-tab-disabled-font-color;
    }
  }

  &-panel {
    display:block;
    box-sizing:border-box;
    height:0;
    color:@tabs-panel-font-color;
    font-size:@tabs-panel-font-size;
    line-height:@tabs-panel-line-height;
    overflow:hidden;

    &-active {
      height:auto;
      overflow:unset;
    }
  }

  // type
  &-line > &-header &-tab {
    border-bottom:@tabs-header-border-bottom-width + 1px solid transparent;

    &-active {
      border-bottom-color:@tabs-tab-active-font-color;
    }
  }

  &-card > &-header &-btn {
    border:@tabs-tab-border-width solid @tabs-tab-border-color;
    border-top-left-radius:@tabs-tab-border-radius;
    border-top-right-radius:@tabs-tab-border-radius;
    background-color:@tabs-tab-background-color;
  }
  &-card > &-header &-tab {
    border:@tabs-tab-border-width solid @tabs-tab-border-color;
    border-top-left-radius:@tabs-tab-border-radius;
    border-top-right-radius:@tabs-tab-border-radius;
    background-color:@tabs-tab-background-color;

    &-active {
      border-bottom-color:transparent;
      background-color:@tabs-tab-active-background-color;
    }
  }

  // size
  &-small > &-header &-header-extra {
    margin-left:@margin-sm;
  }
  &-small > &-header &-btn {
    height:@tabs-tab-height-sm;
    font-size:@tabs-tab-font-size-sm - 2px;
  }
  &-small > &-header &-tab {
    height:@tabs-tab-height-sm;
    font-size:@tabs-tab-font-size-sm;

    &-icon {
      margin-right:@tabs-tab-icon-margin-right-sm;
      font-size:@tabs-tab-font-size-sm - 2px;
    }

    &-btn-close {
      margin-left:@tabs-tab-btn-close-margin-left-sm;
      font-size:@tabs-tab-font-size-sm - 4px;
    }
  }

  &-line&-small > &-header &-btn {  }
  &-line&-small > &-header &-btn-prev { margin-right:@margin-sm; }
  &-line&-small > &-header &-btn-next { margin-left:@margin-sm; }
  &-line&-small > &-header &-btn-add { margin-left:@margin-sm; }
  &-line&-small > &-header &-tab { padding:0 0; }
  &-line&-small > &-header &-tab + &-tab { margin-left:@margin-sm; }

  &-card&-small > &-header &-btn { width:@tabs-tab-height-sm; }
  &-card&-small > &-header &-btn-prev { margin-right:2px; }
  &-card&-small > &-header &-btn-next { margin-left:2px; }
  &-card&-small > &-header &-btn-add { margin-left:2px; }
  &-card&-small > &-header &-tab { padding:0 @tabs-tab-padding-horizontal-sm; }
  &-card&-small > &-header &-tab + &-tab { margin-left:2px; }

  &-medium > &-header &-header-extra {
    margin-left:@margin-md;
  }
  &-medium > &-header &-btn {
    height:@tabs-tab-height-md;
    font-size:@tabs-tab-font-size-md - 2px;
  }
  &-medium > &-header &-tab {
    height:@tabs-tab-height-md;
    font-size:@tabs-tab-font-size-md;

    &-icon {
      margin-right:@tabs-tab-icon-margin-right-md;
      font-size:@tabs-tab-font-size-md - 2px;
    }

    &-btn-close {
      margin-left:@tabs-tab-btn-close-margin-left-md;
      font-size:@tabs-tab-font-size-md - 4px;
    }
  }

  &-line&-medium > &-header &-btn {  }
  &-line&-medium > &-header &-btn-prev { margin-right:@margin-md; }
  &-line&-medium > &-header &-btn-next { margin-left:@margin-md; }
  &-line&-medium > &-header &-btn-add { margin-left:@margin-md; }
  &-line&-medium > &-header &-tab { padding:0 0; }
  &-line&-medium > &-header &-tab + &-tab { margin-left:@margin-md; }

  &-card&-medium > &-header &-btn { width:@tabs-tab-height-md; }
  &-card&-medium > &-header &-btn-prev { margin-right:4px; }
  &-card&-medium > &-header &-btn-next { margin-left:4px; }
  &-card&-medium > &-header &-btn-add { margin-left:4px; }
  &-card&-medium > &-header &-tab { padding:0 @tabs-tab-padding-horizontal-md; }
  &-card&-medium > &-header &-tab + &-tab { margin-left:4px; }

  &-large > &-header &-header-extra {
    margin-left:@margin-lg;
  }
  &-large > &-header &-btn {
    height:@tabs-tab-height-lg;
    font-size:@tabs-tab-font-size-lg - 2px;
  }
  &-large > &-header &-tab {
    height:@tabs-tab-height-lg;
    font-size:@tabs-tab-font-size-lg;

    &-icon {
      margin-right:@tabs-tab-icon-margin-right-lg;
      font-size:@tabs-tab-font-size-lg - 2px;
    }

    &-btn-close {
      margin-left:@tabs-tab-btn-close-margin-left-lg;
      font-size:@tabs-tab-font-size-lg - 4px;
    }
  }

  &-line&-large > &-header &-btn {  }
  &-line&-large > &-header &-btn-prev { margin-right:@margin-lg; }
  &-line&-large > &-header &-btn-next { margin-left:@margin-lg; }
  &-line&-large > &-header &-btn-add { margin-left:@margin-lg; }
  &-line&-large > &-header &-tab { padding:0 0; }
  &-line&-large > &-header &-tab + &-tab { margin-left:@margin-lg; }

  &-card&-large > &-header &-btn { width:@tabs-tab-height-lg; }
  &-card&-large > &-header &-btn-prev { margin-right:6px; }
  &-card&-large > &-header &-btn-next { margin-left:6px; }
  &-card&-large > &-header &-btn-add { margin-left:6px; }
  &-card&-large > &-header &-tab { padding:0 @tabs-tab-padding-horizontal-lg; }
  &-card&-large > &-header &-tab + &-tab { margin-left:6px; }
}