_footer-tab.css 1.53 KB
.footer-tab {
    position: fixed;
    left: 50%;
    bottom: 0;
    margin-left: -320px;
    width: 100%;
    height: 100px;
    max-width: 640px;
    padding-top: 20px;
    box-sizing: border-box;
    background: #fff;
    border-top: 1px solid #b0b0b0;
    z-index: 3;

    .tab-item {
        float: left;
        width: 20%;
        text-align: center;
        color: #b0b0b0;

        &.current.boys {
            color: #414141;
        }

        &.current.girls {
            color: #ff88ae;
        }

        &.current.kids {
            color: #7ad9f9;
        }

        &.current.lifestyle {
            color: #4f4138;
        }
    }

    .tab-icon {
        font-size: 40px;
        line-height: 1;
    }

    .tab-name {
        margin-top: 10px;
        font-size: 12PX;
        line-height: 1;
        transform: scale(0.9);
    }
}

.boys-wrap {
    .footer-tab {
        .tab-item.current {
            color: #414141;
        }
    }
}

.girls-wrap {
    .footer-tab {
        .tab-item.current {
            color: #ff88ae;
        }
    }
}

.kids-wrap {
    .footer-tab {
        .tab-item.current {
            color: #7ad9f9;
        }
    }
}

.lifestyle-wrap {
    .footer-tab {
        .tab-item.current {
            color: #4f4138;
        }
    }
}

.width750 {
    .footer-tab {
        height: 120px;
        width: 750px;
        max-width: 750px;
        margin-left: -375px;
        padding-top: 25px;

        .tab-icon {
            font-size: 45px;
        }

        .tab-name {
            font-size: 24px;
        }
    }
}