dh-c/dist/tabs/tabs.css

The front-end development engineers jimberton gulp react component

/* extend --begin */
.container .dh-tab-nav-container, .dh-tab .dh-tab-bar .dh-tab-nav-container, .dh-tab-diamond .dh-tab-bar .dh-tab-nav-container {
  overflow: hidden;
  white-space: nowrap;
  position: relative; }

/*mixin --bdgin */
.dh-tab {
  overflow: hidden; }
  .dh-tab .dh-tab-bar {
    border-bottom: 1px solid #d8dbe4;
    outline: 0; }
    .dh-tab .dh-tab-bar .dh-tab-nav {
      position: relative;
      display: inline-block;
      padding: 8px 0;
      transform-origin: 0 0; }
      .dh-tab .dh-tab-bar .dh-tab-nav .dh-tab-ink-bar {
        position: absolute;
        bottom: 0;
        height: 2px;
        background-color: #3ab86e;
        z-index: 1;
        transition: all cubic-bezier(0.23, 1, 0.32, 1) 0.3s;
        transform-origin: 0 0; }
    .dh-tab .dh-tab-bar .dh-tab-tab {
      transition: background-color .3s ease-out,color .3s ease-out;
      display: inline-block;
      padding: 0 12px;
      vertical-align: top;
      cursor: pointer;
      color: #999999;
      font-size: 12px; }
    .dh-tab .dh-tab-bar .dh-tab-tab-active {
      color: #666666; }

.dh-tab-diamond .dh-tab-bar {
  border-bottom: 1px solid #d8dbe4;
  outline: 0; }
  .dh-tab-diamond .dh-tab-bar .dh-tab-nav {
    position: relative;
    display: inline-block;
    padding: 8px 0;
    transform-origin: 0 0; }
    .dh-tab-diamond .dh-tab-bar .dh-tab-nav .dh-tab-ink-bar {
      position: absolute;
      bottom: 0;
      height: 2px;
      background-color: transparent;
      z-index: 1;
      transition: all cubic-bezier(0.23, 1, 0.32, 1) 0.3s;
      transform-origin: 0 0; }
  .dh-tab-diamond .dh-tab-bar .dh-tab-tab {
    height: 28px;
    line-height: 26px;
    border-radius: 14px;
    padding: 0 12px;
    border: 1px solid #e6e6e6; }
    .dh-tab-diamond .dh-tab-bar .dh-tab-tab:not(:nth-child(2)) {
      margin-left: 8px; }
  .dh-tab-diamond .dh-tab-bar .dh-tab-tab-active {
    background-color: #3ab86e;
    color: #fff; }

.dh-tab-content-animated {
  display: flex;
  will-change: transform; }
  .dh-tab-content-animated .dh-tab-tabpane {
    transition: opacity .3s ease-out;
    opacity: 1;
    width: 100%;
    display: block;
    flex-shrink: 0; }