bk-magic-vue/lib/ui/cascade.css

基于蓝鲸 Magicbox 和 Vue 的前端组件库

.bk-cascade{
    position:relative;
    border:1px solid #c4c6cc;
    border-radius:2px;
    line-height:30px;
    font-size:12px;
    color:#63656e;
    cursor:pointer
}

.bk-cascade.is-default-trigger.is-unselected:before{
        position:absolute;
        height:100%;
        content:attr(data-placeholder);
        left:11px;
        top:0;
        color:#c3cdd7;
        pointer-events:none;
    }

.bk-cascade.is-focus{
        border-color:#3a84ff;
        -webkit-box-shadow:0px 0px 4px rgba(58, 132, 255, 0.4);
                box-shadow:0px 0px 4px rgba(58, 132, 255, 0.4);
    }

.bk-cascade.is-focus .bk-cascade-angle{
            -webkit-transform:rotate(-180deg);
                    transform:rotate(-180deg);
        }

.bk-cascade:focus{
        border-color:#3a84ff;
        -webkit-box-shadow:0px 0px 4px rgba(58, 132, 255, 0.4);
                box-shadow:0px 0px 4px rgba(58, 132, 255, 0.4);
    }

.bk-cascade.is-disabled{
        background-color:#fafafa;
        color:#c4c6cc;
        cursor:not-allowed;
    }

.bk-cascade.is-custom-trigger{
        border:none;
        -webkit-box-shadow:none;
                box-shadow:none;
    }

.bk-cascade.is-readonly,
    .bk-cascade.is-loading{
        background-color:#fafafa;
        cursor:default;
    }

.bk-cascade:hover .bk-cascade-clear{
            display:block;
        }

.bk-cascade .bk-cascade-loading{
        position:absolute;
        right:9px;
        top:8px;
        width:18px;
        height:18px;
    }

.bk-cascade .bk-cascade-angle{
        position:absolute;
        right:2px;
        top:4px;
        color:#979ba5;
        font-size:22px;
        -webkit-transition:-webkit-transform .3s cubic-bezier(0.4, 0, 0.2, 1);
        transition:-webkit-transform .3s cubic-bezier(0.4, 0, 0.2, 1);
        transition:transform .3s cubic-bezier(0.4, 0, 0.2, 1);
        transition:transform .3s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform .3s cubic-bezier(0.4, 0, 0.2, 1);
        pointer-events:none;
    }

.bk-cascade .bk-cascade-clear{
        display:none;
        position:absolute;
        right:6px;
        top:8px;
        width:14px;
        height:14px;
        line-height:14px;
        background-color:#c4c6cc;
        border-radius:50%;
        text-align:center;
        font-size:14px;
        color:#fff;
        z-index:100
    }

.bk-cascade .bk-cascade-clear:before{
            display:block;
            -webkit-transform:scale(.7);
                    transform:scale(.7);
        }

.bk-cascade .bk-cascade-clear:hover{
            background-color:#979ba5;
        }

.bk-cascade .bk-cascade-name{
        height:30px;
        padding:0 36px 0 11px;
        display:block;
        max-width:100%;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

.bk-cascade .bk-tooltip.bk-cascade-dropdown{
        display:block
    }

.bk-cascade .bk-tooltip.bk-cascade-dropdown > .bk-tooltip-ref{
            display:block;
        }

.bk-cascade-dropdown-content{
    border:1px solid #dcdee5;
    border-radius:2px;
    line-height:32px;
    background:#fff;
    color:#63656e;
    overflow:hidden;
}

.bk-cascade-search-input{
    width:100%;
    height:32px;
    border:none;
    font-size:12px;
    outline:0;
    cursor:text
}

.bk-cascade-search-input::-webkit-input-placeholder{
      color:#c3cdd7;
    }

.bk-cascade-options{
    padding:0;
    list-style:none;
    overflow-y:auto
}

.bk-cascade-options::-webkit-scrollbar{
        width:6px;
        height:6px;
    }

.bk-cascade-options::-webkit-scrollbar-thumb{
        min-height:24px;
        border-radius:3px;
        background-color:#dcdee5;
    }

.bk-cascade-options.bk-options-single .bk-option:hover,
            .bk-cascade-options.bk-options-single .bk-option.is-highlight{
                background-color:#eaf3ff;
            }

.bk-cascade-options.bk-options-single .bk-option.is-selected{
                background-color:#f4f6fa;
            }

.bk-cascade-options .bk-option-group .bk-option-group-name{
            margin:0 16px;
            border-bottom:1px solid #dcdee5;
            color:#979ba5;
        }

.bk-cascade-options .bk-group-options{
        margin:0;
        padding:0;
        list-style:none;
    }

.bk-cascade-options .bk-group-options .bk-option{
            padding:0 12px;
        }

.bk-cascade-options .bk-option{
        position:relative;
        cursor:pointer
    }

.bk-cascade-options .bk-option:hover,
        .bk-cascade-options .bk-option.is-highlight{
            color:#3a84ff;
            background-color:#eaf3ff;
        }

.bk-cascade-options .bk-option.is-disabled{
            color:#c4c6cc;
            cursor:not-allowed;
            background-color:#fff;
        }

.bk-cascade-options .bk-option.is-selected{
            color:#3a84ff;
            background-color:#f4f6fa;
        }

.bk-cascade-options .bk-option.is-selected.is-disabled{
            background-color:#fff;
            color:#c4c6cc;
        }

.bk-cascade-options .bk-option.is-selected.is-disabled .bk-option-icon{
                color:#c4c6cc;
            }

.bk-cascade-options .bk-option-content{
        position:relative;
        padding:0 16px;
    }

.bk-cascade-options .bk-option-content .bk-option-content-default{
            font-size:0;
        }

.bk-cascade-options .bk-option-content .bk-option-name{
            display:inline-block;
            max-width:100%;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
            vertical-align:middle;
            font-size:12px;
        }

.bk-cascade-options .bk-option-content .bk-option-icon{
            position:absolute;
            right:12px;
            top:12px;
            color:#3a84ff;
            font-size:12px;
            font-weight:bold;
        }

.bk-cascade-empty{
    padding:0 10px;
    font-size:12px;
}

.bk-cascade-extension{
    font-size:12px;
    padding:0 16px;
    border-radius:0px 0px 1px 1px;
    border-top:1px solid #dcdee5;
    background:#fafbfd;
}

.bk-cascade-extension i{
        font-size:12px;
    }

.bk-cascade-extension:hover{
        background-color:#f0f1f5;
    }

.tippy-tooltip.bk-cascade-dropdown-theme[data-size=small]{
    padding:0;
    -webkit-box-shadow:0 3px 9px 0 rgba(0,0,0,.1);
            box-shadow:0 3px 9px 0 rgba(0,0,0,.1);
}

.tippy-tooltip.bk-cascade-dropdown-theme[data-size=small] .tippy-arrow{
        display:none;
    }

.bk-cacade-search{
	border:none;
}

.bk-cascade-panel{
  height:100%;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
}

.bk-cascade-panel .bk-cascade-panel-ul{
		float:left;
		height:100%;
		padding:0;
		margin:0;
		list-style:none;
		overflow-y:auto;
	}

.bk-cascade-panel .bk-cascade-panel-ul::-webkit-scrollbar{
        width:6px;
        height:6px;
    }

.bk-cascade-panel .bk-cascade-panel-ul::-webkit-scrollbar-thumb{
        min-height:24px;
        border-radius:3px;
        background-color:#dcdee5;
    }

.bk-cascade-panel .bk-cascade-border{
		border-right:1px solid #DCDEE5;
	}

.bk-cascade-panel .bk-option{
		position:relative;
	}

.bk-cascade-panel .bk-option .bk-cascade-right{
			position:absolute;
			top:6px;
			right:5px;
            font-size:20px;
            color:#979BA5;
		}

.bk-cascade-panel .bk-option:first-of-type{
            margin-top:4px;
        }

.bk-cascade-panel .bk-option:last-of-type{
            margin-bottom:4px;
        }

.bk-cascade-panel .is-multiple{
		background-color:#fff!important;
	}

.bk-option-none{
    display:block;
    font-size:12px;
    line-height:32px;
    text-align:center;
    color:#63656E;
}

.bk-cascade-search{
	height:calc(100% - 36px);
}

.bk-option-content{
	position:relative;
}

.bk-option-content .bk-cascade-check{
		position:absolute;
		top:0;
		left:16px;
	}

.bk-option-content .bk-margin-left{
		margin-left:26px;
	}

.bk-cascade-tag-list{
    padding:5px 36px 0px 10px;
    min-height:30px
}

.bk-cascade-tag-list::after{
        display:block;
        clear:both;
        content:"";
        font-size:0;
        height:0;
        visibility:hidden;
    }

.bk-cascade-tag-list .bk-cascade-tag-item{
        display:inline-block;
        cursor:pointer;
        position:relative;
        margin:0 6px 5px 0;
        border-radius:2px;
        float:left;
        height:22px;
        line-height:22px;
        overflow:hidden;
        background-color:#F0F1F5
    }

.bk-cascade-tag-list .bk-cascade-tag-item:hover{
            background-color:#dcdee5;
        }

.bk-cascade-tag-list .bk-cascade-tag-item:hover .remove-key{
                color:#63656e;
            }

.bk-cascade-tag-list .bk-cascade-item-name{
        display:inline-block;
        color:#63656e;
        font-size:12px;
        border:none;
        vertical-align:middle;
        -webkit-box-sizing:border-box;
                box-sizing:border-box;
        overflow:hidden;
        border-radius:2px;
        padding:0 5px;
        min-height:21px;
        line-height:19px;
        word-break:break-all;
        max-width:150px;
        overflow:hidden;
        display:inline-block;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

.bk-cascade-tag-list .remove-key{
        position:absolute;
        width:18px;
        height:16px;
        top:3px;
        right:4px;
        display:inline-block;
        text-align:center;
    }

.bk-cascade-tag-list .remove-key .icon-close{
            color:#979ba5;
            position:absolute;
            top:0;
            left:0;
            display:inline-block;
            text-align:center;
            cursor:pointer;
            font-size:18px;
        }

.bk-button-icon-loading{
    position:relative;
    top:2px;
    color:#3A84FF;
}

.bk-button-icon-loading .loading{
        width:14px;
        height:14px;
        border:2px solid;
        border-right-color:#ffffff;
        border-radius:50%;
        -webkit-animation:button-icon-loading 1s linear infinite;
                animation:button-icon-loading 1s linear infinite;
        margin:-7px auto 0;
        display:inline-block;
    }