amazeui/less/ui.tabs.less

Sleek, intuitive, and powerful front-end framework for faster and easier web development.

// Name:            Tabs
//
// Description:     Define style for Tabs Plugin
//
// Component:       `.am-tabs`
//
// Sub-objects:     `.am-tabs-nav`
//                  `.am-tabs-bd`
//                  `.am-tab-panel`
//
// States:          `.am-active`
//
// Uses:            Nav
//                  Animation
//
// =============================================================================


/* ==========================================================================
   Component: Tabs Plugin
 ============================================================================ */

.@{ns}tabs {
  .hook-tabs;
}

.@{ns}tabs-bd {
  position: relative;
  overflow: hidden;
  border: 1px solid #ddd;
  border-top: none;
  z-index: 100;
  transition: height .3s;
  .clearfix();
  .hook-tabs-bd;

  .@{ns}tab-panel {
    position: absolute;
    top: 0;
    z-index: 99;
    float: left;
    width: 100%;
    padding: 10px 10px 15px;
    visibility: hidden;
    transition: transform 0.3s;
    transform: translateX(-100%);
    .hook-tab-panel;

    * {
      -webkit-user-drag: none;
    }

    &.@{ns}active {
      position: relative;
      z-index: 100;
      visibility: visible;
      transform: translateX(0);

      & ~ .@{ns}tab-panel {
        transform: translateX(100%);
      }
    }
  }

  // nested Tabs
  .@{ns}tabs-bd {
    border: none;
  }
}

// #699
// @since 2.5
.@{ns}tabs-bd-ofv {
  overflow: visible;

  > .@{ns}tab-panel {
    display: none;

    &.@{ns}active {
      display: block;
    }
  }
}

// fade animation in React version
.@{ns}tabs-fade {
  .@{ns}tab-panel {
    opacity: 0;
    transition: opacity .25s linear;

    &.@{ns}in {
      opacity: 1;
    }
  }
}

// HOOKS
// =============================================================================

.hook-tabs() {}
.hook-tabs-bd() {}
.hook-tab-panel() {}