iot-ui/NavBar/NavBar.less

基于快应用的IoT组件库

.root-box {
    width: 100%;
    height: @NavBarHeight;
    padding-left: @NavBarPaddingLeft;
    padding-right: @NavBarPaddingRight;
    background-color: @NavBarBackgroundColor;
}

.title {
    justify-content: center;
    width: 100%;
    /* background-color: red; */
}

.title text {
    font-size: @NavBarTitleFontSize;
    color: @NavBarFontColor;
    font-weight: bold;
}

.buttons {
    width: 100%;
    justify-content: flex-end;
}

.more {
    width: @NavBarMoreSize;
    justify-content: center;
    align-items: center;
}

.more-item {
    justify-content: center;
    width: @NavBarMoreSize;
    height: @NavBarMoreSize;
}

.more-item-head {
    padding: @NavBarMorePadding;
}

.more-item-active {
    border-radius: @NavBarMoreSize;
    animation-name: clickButton;
    animation-duration: 160ms;
    animation-iteration-count: 1;
    opacity: 0;
    background-color: @NavBarActiveColor;
}

.icon-dot-box {
    flex: 1;
    justify-content: center;
    height: 100%;
    align-items: center;
}

.icon-dot {
    width: @NavBarMoreDotSize;
    height: @NavBarMoreDotSize;
    border-radius: @NavBarMoreDotSize;
    background-color: @NavBarFontColor;
}

.close {
    width: @NavBarCloseSize;
    justify-content: center;
}

.close-item {
    width: @NavBarCloseSize;
    height: @NavBarCloseSize;
}

.close stack {
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.icon-close-line-1 {
    width: @NavBarCloseWidth;
    height: @NavBarCloseHeight;
    transform: rotate(45deg);
    background-color: @NavBarFontColor;
}

.icon-close-line-2 {
    width: @NavBarCloseWidth;
    height: @NavBarCloseHeight;
    transform: rotate(-45deg);
    background-color: @NavBarFontColor;
}

@keyframes clickButton {
    0% {
        opacity: 0.2;
        transform: scale(0.9);
    }
    50% {
        transform: scale(1);
        opacity: 0.3;
    }
    100% {
        transform: scale(0.9);
        opacity: 0.2;
    }
}