unique-interface/theme/components/navigation.less

无UI组件库

/*
 * Styles for basic components
 *
 * Include:
 *   ui-pagination
 *   ui-menu
 *   ui-submenu
 *   ui-menu-item
 *   ui-tabs
 *   ui-tab
 *   ui-breadcrumb
 *   ui-breadcrumb-item
 *
 * Nice to meet you
 *
 */

/* pagination */
.ui-pagination {
    display: flex;
    padding: @block-inner-vertical @block-inner-horizontal - @pagination-unit-outer-horizontal;
    line-height: @pagination-unit-height;
}
.ui-pagination-total, .ui-pagination-jumper {
    margin: 0 @pagination-unit-outer-horizontal;
}
.ui-pagination-num {
    padding: 0 @pagination-unit-inner-horizontal;
    color: @pagination-color-primary;
    cursor: pointer;
    &:hover {
        text-decoration: underline;
    }
}
.ui-pagination-gap {
    flex: 1 0 0%;
}
.ui-pagination-summary {
    margin: 0 @pagination-unit-outer-horizontal;
}
.ui-pagination-input {
    width: @pagination-input-width;
    border: @pagination-unit-border;
    padding: 0 @pagination-unit-outer-horizontal;
    line-height: @pagination-unit-height - 2 * @pagination-unit-border-width;
    border-radius: @border-radius-base;
    text-align: center;
    background-color: transparent;
    outline: none;
    color: @pagination-input-color;
}
.ui-pagination-btn {
    display: inline-block;
    cursor: pointer;
    border: @pagination-unit-border;
    border-radius: @border-radius-base;
    padding: 0 @pagination-unit-outer-horizontal;
    line-height: @pagination-unit-height - 2 * @pagination-unit-border-width;
    color: @pagination-color-primary;
    background-color: transparent;
    vertical-align: baseline;
}
.ui-pagination-text {
}

/* menu */
.ui-menu {
    user-select: none;
    overflow: hidden;
}
.ui-menu-item, .ui-submenu-title {
    display: block;
    height: @menu-item-height;
    line-height: @menu-item-height;
    border-left: @menu-item-border-width solid transparent;
    padding: 0 @menu-item-inner-horizontal;
    color: @color-text-primary;
    cursor: pointer;
    position: relative;

    &:hover {
        color: @color-primary;
    }
}
.ui-menu-item {
    &.is-active {
        background-color: @color-bg-primary-1;
        border-color: @color-primary;
        color: @color-primary;
    }
}
.ui-submenu-title {
    font-size: @font-size-base + 2px;
    color: @color-text-primary;
}
.ui-menu-icon {
    display: inline-block;
    width: 1em;
    text-align: center;
    margin-right: @menu-item-unit-gap;
}
.ui-menu-title {
    display: inline-block;
}
.ui-submenu-angle {
    position: absolute;
    top: 0;
    right: @menu-item-inner-horizontal;
    transition: transform .4s;
}
.ui-submenu-angle.is-open {
    transform: rotateZ(180deg);
}
.ui-submenu .ui-menu-item {
    color: @color-text-regular;

    &:hover, &.active {
        color: @color-primary;
    }
}

/* tabs */
.ui-tabs {
    user-select: none;
    overflow: hidden;
    display: flex;
    border-bottom: 1px solid @color-border-regular;
}
.ui-tab {
    flex: 0 0 auto;
    padding: @tab-inner-top 0 @tab-inner-bottom;
    margin: 0 @tab-outer-right 0 @tab-outer-left;
    border-bottom: @tab-border-width solid transparent;
    color: @color-text-regular;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;

    &:hover {
        color: @color-text-primary;
    }
    &.active {
        color: @color-text-primary;
        border-bottom-color: @color-primary;
    }
}

/* breadcrumb */
.ui-breadcrumb {
    line-height: @breadcrumb-height;
    color: @color-text-secondary;
}
.ui-breadcrumb-separator {
    margin: 0 .5em;

    .ui-breadcrumb-item:first-child & {
        display: none;
    }
}
.ui-breadcrumb-item {
    .is-awake {
        color: @color-text-primary;
        cursor: pointer;
        &:hover {
            color: @color-primary;
        }
    }
}