github.com/mithrandie/csvq@v1.18.1/docs/_sass/components/_tabs.scss (about)

     1  .tabs {
     2    &.tabs-transparent {
     3      background-color: transparent;
     4  
     5      .tab a,
     6      .tab.disabled a,
     7      .tab.disabled a:hover {
     8        color: rgba(255,255,255,0.7);
     9      }
    10  
    11      .tab a:hover,
    12      .tab a.active {
    13        color: #fff;
    14      }
    15  
    16      .indicator {
    17        background-color: #fff;
    18      }
    19    }
    20  
    21    &.tabs-fixed-width {
    22      display: flex;
    23  
    24      .tab {
    25        -webkit-box-flex: 1;
    26        -webkit-flex-grow: 1;
    27            -ms-flex-positive: 1;
    28                flex-grow: 1;
    29      }
    30    }
    31  
    32    position: relative;
    33    overflow-x: auto;
    34    overflow-y: hidden;
    35    height: 48px;
    36    width: 100%;
    37    background-color: $tabs-bg-color;
    38    margin: 0 auto;
    39    white-space: nowrap;
    40  
    41    .tab {
    42      display: inline-block;
    43      text-align: center;
    44      line-height: 48px;
    45      height: 48px;
    46      padding: 0;
    47      margin: 0;
    48      text-transform: uppercase;
    49  
    50      a {
    51        &:hover,
    52        &.active {
    53          background-color: transparent;
    54          color: $tabs-text-color;
    55        }
    56  
    57        color: rgba($tabs-text-color, .7);
    58        display: block;
    59        width: 100%;
    60        height: 100%;
    61        padding: 0 24px;
    62        font-size: 14px;
    63        text-overflow: ellipsis;
    64        overflow: hidden;
    65        transition: color .28s ease;
    66      }
    67  
    68      &.disabled a,
    69      &.disabled a:hover {
    70        color: rgba($tabs-text-color, .7);
    71        cursor: default;
    72      }
    73    }
    74    .indicator {
    75      position: absolute;
    76      bottom: 0;
    77      height: 2px;
    78      background-color: $tabs-underline-color;
    79      will-change: left, right;
    80    }
    81  }
    82  
    83  // Fixed sideNav hide on smaller
    84  @media #{$medium-and-down} {
    85    .tabs {
    86      display: flex;
    87  
    88      .tab {
    89        -webkit-box-flex: 1;
    90        -webkit-flex-grow: 1;
    91        -ms-flex-positive: 1;
    92        flex-grow: 1;
    93  
    94        a {
    95          padding: 0 12px;
    96        }
    97      }
    98    }
    99  }