lu2/theme/pure/css/common/ui/Tab.css

Simple and flexible UI component library based on native HTML and JavaScript

/**
 *
 * @Tab.css
 * @author xinxuzhang
 * @create 15-06-12
 */
/* tabs */
.ui-tab-tabs {
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #d0d0d5;
    position: relative;
}

.ui-tab-tab {
    float: left;
    margin-right: 50px;
    font-size: 16px;
    text-align: center;
    color: #4c5161;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
}

.ui-tab-tab a {
    display: block;
    color: #4c5161;
}

.ui-tab-tab:hover,
.ui-tab-tab:hover a {
    color: #2a80eb;
}

.ui-tab-tabs .active,
.ui-tab-tabs .active a,
.ui-tab-tabs .active:hover {
    line-height: 36px;
    padding-top: 2px;
    margin-bottom: -1px;
    border-bottom: 3px solid;
    color: #2a80eb;
    cursor: default;
}

.ui-tab-line {
    display: none;
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 0;
    border-bottom: 3px solid #2a80eb;
    transition: .35s;
}

.ui-tab-tabs > .ui-tab-line ~ .ui-tab-tab {
    line-height: 40px;
    padding-top: 0;
    margin-bottom: 0;
    border-bottom: 0;
}

/* contents */
.ui-tab-contents {
    margin-top: 30px;
}

/* 有role属性表示JS已经介入了初始化，锚点hash显示功能去除 */
.ui-tab-content[role]:not(.active),
.ui-tab-content:not([role]):not(:target) {
    display: none;
}

.ui-tab-contents:target-within .ui-tab-content:not(:target) {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .ui-tab-line {
        transition: none;
    }
}