hy-checkbox/lib/Dropdown/dropdown.less

checkbox & radio ui components for react

/*
 * @Author: SiMeiyu 
 * @Date: 2017-07-04 10:00:22 
 */ 
@import "../../app/variables.less";
@dropdownMenu-hover-bg: #e3f2fd;
@prefix-cls: ~'@{ult-prefix}-dropdown';
.@{prefix-cls} {
    position: relative;
    display: inline-block;
    >a {
        cursor: pointer;
        color: @link-color;
        font-size: @font-size-base;
        line-height: @base-space * 3;
        vertical-align: middle;
        color: @text-body;
        &:hover {
            color: @link-hover-color;
        }
        .iconfont {
            margin-left: @base-space;
            font-size: @font-size-base;
            line-height: 1;
        }
    }
    &-Menu {
        position: absolute;
        z-index: 1002;
        min-width: 10em;
        border-radius: @border-radius;
        border: 1px solid @border;
        box-shadow: 0 0 5px fade(@black, 20%);
        background-color: @white;
        margin: 1px 0;
        font-size: 12px;
        li {
            position: relative;
            a {
                cursor: pointer;
                display: block;
                padding: @base-space @base-space * 2;
                line-height: @base-space * 2;
                color: @text-body;
                text-decoration: none;
                font-size: @font-size-base;
                &:hover {
                    background-color: @dropdownMenu-hover-bg;
                }
                .iconfont {
                    position: absolute;
                    top: 50%;
                    right: @base-space * 3 / 2;
                    margin-top: @font-size-base / -2;
                    font-size:@font-size-base;
                    color: @text-caption;
                    line-height: @font-size-base + 1px;
                }
            }
            &.disabled {
                a {
                    cursor: not-allowed;
                    color: @text-disable;
                    &:hover {
                        background: none;
                    }
                }
            }
            .sub-menu {
                display: none;
                position: absolute;
                left: 100%;
                top: 0;
                min-width: 10em;
                margin: 0 2px;
                border-radius: @border-radius;
                border: 1px solid @border;
                box-shadow: 0 0 3px fade(@black, 10%);
                background-color: @white;
            }
            &:hover {
                .sub-menu {
                    display: block;
                }
            }
        }
        &,
        &-bottomLeft {
            left: 0;
        }
        &-bottomRight {
            right: 0;
            left: auto;
        }
        &-bottomCenter {
            left: 0;
            right: 0;
            min-width: 100%;
        }
        &-topLeft {
            bottom: 100%;
        }
        &-topRight {
            bottom: 100%;
            right: 0;
            left: auto;
        }
        &-topCenter {
            bottom: 100%;
            left: 0;
            right: 0;
            min-width: 100%;
        }
    }
}