@pi0/framework7/src/components/tabs/tabs.less

Full featured mobile HTML framework for building iOS & Android apps

/* === Tabs === */
.tabs {
  .tab {
    display: none;
  }
  .tab-active {
    display: block;
  }
}
.tabs-animated-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  height: 100%;
  > .tabs {
    display: flex;
    height: 100%;
    transition-duration: 300ms;
    will-change: transform;
    > .tab {
      width: 100%;
      display: block;
      flex-shrink: 0;
    }
  }
  &.not-animated > .tabs {
    transition-duration: 300ms;
  }
}
.tabs-swipeable-wrap {
  height: 100%;
  > .tabs {
    height: 100%;
  }
  > .tabs > .tab {
    display: block;
  }
}
.page > .tabs {
  height: 100%;
}

& when (@include-ios-theme) {
  @import url('./tabs-ios.less');
}
& when (@include-md-theme) {
  @import url('./tabs-md.less');
}