@cw-devops/bk-magic-vue/lib/ui/select.min.css.map

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

{"version":3,"sources":["select.css","mixins/ellipsis.css","mixins/scroller.css"],"names":[],"mappings":"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","file":"select.min.css","sourcesContent":["@import \"./variable.css\";\n@import \"./mixins/ellipsis\";\n@import \"./mixins/scroller\";\n\n$selectedBackground: #f4f6fa;\n$hoverBackground: #eaf3ff;\n$disabledBackground: #fff;\n$singleSelectedBackground: #eaf3ff;\n$disabledColor: #c4c6cc;\n\n:root {\n    --font-size: 12px;\n    --icon-size: $iconSmallestSize;\n    --extension-size: $iconSmallerSize;\n\n    .medium-font {\n        --font-size: 12px;\n        --icon-size: $iconSmallerSize;\n        --extension-size: $iconSmallSize;\n    }\n\n    .large-font {\n        --font-size: 12px;\n        --icon-size: $iconSmallSize;\n        --extension-size: $iconNormalSize;\n    }\n\n    .bk-select-large,\n    .bk-select-popover-large {\n        --font-size: 12px;\n    }\n    .bk-select-small,\n    .bk-select-popover-small {\n        --font-size: 12px;\n    }\n}\n\n.bk-select {\n    position: relative;\n    border: 1px solid $bgc;\n    border-radius: 2px;\n    line-height: 30px;\n    color: $newBlackColor2;\n    cursor: pointer;\n    background-color: $disabledBackground;\n    font-size: var(--font-size);\n    &:focus {\n        border-color: #3a84ff;\n    }\n    &.only-bottom-border {\n        border-color: transparent transparent $newGreyColor transparent;\n        &.is-focus {\n            border-color: transparent transparent $newMainColor transparent;\n            box-shadow: none;\n        }\n        &.is-disabled {\n            border-color: transparent transparent #dcdee5 transparent;\n        }\n        &.is-readonly,\n        &.is-loading {\n            border-color: transparent transparent $newGreyColor1 transparent;\n        }\n    }\n    &.is-default-trigger.is-unselected:before {\n        position: absolute;\n        height: 100%;\n        content: attr(data-placeholder);\n        left: 10px;\n        top: 0;\n        color: $fnMinorColor;\n        pointer-events: none;\n    }\n    &.is-default-trigger.is-unselected {\n        &.is-disabled:before,\n        &.is-readonly:before {\n            color: $formBorderColor;\n        }\n    }\n    &.has-prefix-icon {\n        &.is-default-trigger.is-unselected:before {\n            left: 24px;\n        }\n        .bk-select-name {\n            padding-left: 24px;\n        }\n    }\n    &.is-focus {\n        border-color: $newMainColor;\n        box-shadow:0px 0px 4px rgba(58, 132, 255, 0.4);\n        .bk-select-angle {\n            transform: rotate(-180deg);\n            top: 5px;\n        }\n    }\n    &.is-disabled {\n        background-color: rgba(203, 213, 224, 0.2);\n        cursor: not-allowed;\n        border-color: $bgc;\n        .bk-select-name {\n            color: $weak-font-color;\n        }\n        .bk-select-angle {\n            color: #c4c6cc;\n        }\n    }\n    &.is-readonly,\n    &.is-loading {\n        background-color: #fafafa;\n        cursor: default;\n        border: 1px solid $newGreyColor1;\n    }\n    &:hover {\n        .bk-select-clear {\n            display: block;\n\n            & + .bk-select-angle {\n                display: none;\n            }\n        }\n    }\n    .bk-select-loading {\n        position: absolute;\n        right: 9px;\n        top: 8px;\n        width: 18px;\n        height: 18px;\n    }\n    .bk-select-angle {\n        position: absolute;\n        right: 2px;\n        top: 4px;\n        color:  $bgc;\n        font-size: $iconNormalSize;\n        transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1);\n        pointer-events: none;\n    }\n    .bk-select-clear {\n        display: none;\n        position: absolute;\n        right: 6px;\n        top: 8px;\n        text-align: center;\n        font-size: $iconSmallestSize;\n        z-index: 100;\n        color: $bgc;\n    }\n    .bk-select-prefix-icon {\n        position: absolute;\n        left: 6px;\n        top: calc((100% - 14px) / 2);\n        font-size: var(--icon-size);\n    }\n    .bk-select-name {\n        font-size: $font-size;\n        color: $font-color;\n        width: 100%;\n        height: 30px;\n        padding: 0 36px 0 10px;\n        @mixin ellipsis 100%, block;\n        border: none;\n        appearance: none;\n        &,&:hover,&:active{\n           outline: none;\n        }\n    }\n    .bk-tooltip.bk-select-dropdown {\n        display: block;\n        & > .bk-tooltip-ref {\n            display: block;\n        }\n    }\n}\n.bk-select-dropdown-content {\n    border: 0;\n    border-radius: 2px;\n    line-height: 30px;\n    background: #fff;\n    color: $fnMainColor;\n    overflow: hidden;\n}\n.bk-select-search-wrapper {\n    margin: 15px 10px;\n    border: 1px solid $bgc;\n    border-radius: 2px;\n    position: relative;\n    padding: 0 5px;\n    .left-icon {\n        position: absolute;\n        font-size: 16px;\n        color: $newBlackColor3;\n        top: 50%;\n        transform: translateY(-50%);\n        left: 10px;\n    }\n}\n.bk-select-search-input {\n    width: 100%;\n    height: 30px;\n    padding: 0 10px 0 30px;\n    border: none;\n    font-size: var(--font-size);\n    outline: 0;\n    cursor: text;\n    &::-webkit-input-placeholder {\n        font-size: $font-size;\n        color: $bgc;\n    }\n    &:focus-within {\n        border-color: $normal-color;\n      }\n\n      & > i {\n        color: $bgc;\n      }\n}\n.bk-options {\n    padding: 0;\n    margin: 0;\n    overflow-y: auto;\n    list-style: none;\n    @mixin scroller;\n\n    &.bk-options-single {\n        .bk-option {\n            &.is-selected {\n                background-color: rgba(58, 132, 255, 0.05);\n            }\n            &:hover,\n            &.is-highlight {\n                background-color: $hoverBackground;\n            }\n        }\n    }\n    .bk-option-group {\n        .bk-option-group-name {\n            margin: 0 16px;\n            font-size: var(--font-size);\n            border-bottom: 1px solid $newGreyColor1;\n            color: $newBlackColor3;\n            position: relative;\n\n            &.is-collapse {\n                cursor: pointer;\n                margin: 0 15px;\n            }\n\n            .bk-option-group-prefix {\n                width: 10px;\n                display: inline-block;\n                text-align: center;\n                line-height: 30px;\n\n                &.readonly {\n                    cursor: not-allowed;\n                }\n            }\n\n            .btn-check-all {\n                position: absolute;\n                disabled: inline-block;\n                right: 14px;\n                top: 2px;\n                .bk-form-checkbox {\n                    margin-right: 0!important;\n                }\n            }\n        }\n    }\n    .bk-group-options {\n        margin: 0;\n        padding: 0;\n        list-style: none;\n        .bk-option {\n            padding: 0 12px;\n        }\n    }\n    .bk-option {\n        color: $font-color;\n        position: relative;\n        cursor: pointer;\n        &.is-selected {\n            color: $normal-color;\n            background-color: rgba(58, 132, 255, 0.05);\n            &:hover {\n                color: $normal-color;\n            }\n        }\n        &:hover,\n        &.is-highlight {\n            color: $font-color;\n            background-color: rgba(58, 132, 255, 0.1);\n        }\n        &.is-disabled {\n            color: $bgc;\n            cursor: not-allowed;\n            background-color: $white;\n            &:hover {\n                background-color: $white;\n            }\n        }\n        &.is-selected.is-disabled {\n            background-color: $white;\n            color: $disabledColor;\n            .bk-option-icon {\n                color: $disabledColor;\n            }\n            &:hover {\n                background-color: $white;\n            }\n        }\n        &:first-child {\n            margin-top: 6px;\n        }\n        &:last-child {\n            margin-bottom: 6px;\n        }\n        &.bk-virtual-option {\n            margin: 0;\n        }\n    }\n    .bk-virtual-select .bk-min-nav-slide {\n        width: 6px;\n        border-radius: 3px;\n        background-color: #dcdee5;\n    }\n    .bk-option-content {\n        position: relative;\n        padding: 0 16px;\n        .bk-option-content-default {\n            font-size: 0;\n        }\n        .bk-option-icon {\n            position: absolute;\n            right: 12px;\n            top: 4px;\n            color: $newMainColor;\n            font-size: $iconLargerSize;\n            font-weight: normal;\n            ~ .bk-option-name {\n                padding-right: 20px;\n            }\n        }\n        .bk-option-name {\n            vertical-align: middle;\n            font-size: var(--font-size);\n            @mixin ellipsis 100%, inline-block;\n        }\n        .bk-option-checkbox .bk-checkbox-text {\n            font-size: 12px;\n        }\n        &.allSelected {\n            color: #3a84ff;\n        }\n    }\n}\n\n.bk-select-empty {\n    padding: 0 10px;\n    text-align: center;\n    font-size: var(--font-size);\n}\n\n.bk-select-extension {\n    font-size: var(--font-size);\n    padding: 0 16px;\n    border-radius: 0px 0px 1px 1px;\n    border-top: 1px solid $newGreyColor1;\n    background: $newGreyColor3;\n    i {\n        font-size: var(--extension-size);\n    }\n    &:hover {\n        background-color: #f0f1f5;\n    }\n}\n\n.tippy-tooltip.bk-select-dropdown-theme[data-size=small] {\n    padding: 0;\n    box-shadow: 0 3px 9px 0 rgba(0,0,0,.1);\n    .tippy-arrow {\n        display: none;\n    }\n}\n\n/* size */\n.bk-select-large {\n    line-height: 32px;\n    .bk-select-angle {\n        top: 6px;\n    }\n    .bk-select-clear {\n        top: 11px;\n    }\n    .bk-select-name {\n        height: 32px;\n    }\n}\n\n.bk-select-small {\n    line-height: 28px;\n    .bk-select-angle {\n        top: 2px;\n    }\n    .bk-select-clear {\n        top: 8px;\n    }\n    .bk-select-name {\n        height: 28px;\n    }\n}\n\n.bk-select-popover-large {\n    .bk-options {\n        .bk-option-content {\n            .bk-option-name {\n                font-size: var(--font-size);\n            }\n        }\n    }\n}\n\n.bk-select-tag-container {\n    height: auto;\n    min-height: 30px;\n    padding: 0 30px 0 10px;\n    overflow: hidden;\n    &.is-fixed-height {\n        height: 30px;\n    }\n    &.is-focus {\n        height: auto !important;\n        overflow: auto;\n    }\n    &.is-large-size {\n        min-height: 34px;\n        &.is-fixed-height {\n            height: 34px;\n        }\n        .bk-select-tag {\n            height: 24px;\n        }\n        .bk-select-overflow-tag {\n            min-height: 24px;\n            line-height: 24px;\n        }\n    }\n    &.is-small-size {\n        min-height: 24px;\n        &.is-fixed-height {\n            height: 24px;\n        }\n        .bk-select-tag {\n            height: 20px;\n        }\n        .bk-select-overflow-tag {\n            min-height: 20px;\n            line-height: 20px;\n        }\n    }\n    &.is-available {\n        .bk-select-tag:hover {\n            color: $normal-color;\n            background-color: rgba(58, 132, 255, 0.1);\n        }\n        .icon-close:hover {\n            color: #63656E;\n        }\n    }\n    &.has-prefix-icon {\n        padding-left: 24px;\n    }\n    .bk-select-tag {\n        display: inline-flex;\n        color: $normal-color;\n        height: 22px;\n        line-height: 22px;\n        margin: 0 6px 0 0;\n        padding: 0 2px 0 5px;\n        align-items: center;\n        background: rgba(58, 132, 255, 0.05);\n        border-radius: 2px;\n        font-size: var(--font-size);\n        .icon-close {\n            margin-left: 5px;\n            flex: 18px 0 0;\n            font-size: 18px;\n            color: #979BA5;\n        }\n        &.width-limit-tag {\n            @mixin ellipsis 140px, inline-flex;\n            span {\n                @mixin ellipsis 130px, inline-block;\n                height: 100%;\n            }\n        }\n    }\n    .bk-select-overflow-tag {\n        display: inline-flex;\n        padding: 0 5px;\n        margin: 0 6px 0 0;\n        min-width: 22px;\n        line-height: 22px;\n        font-size: var(--font-size);\n        text-align: center;\n        border-radius: 2px;\n        color: $normal-color;\n        background: rgba(58, 132, 255, 0.05);\n        & ~ .bk-select-tag {\n            visibility: hidden;\n            pointer-events: none;\n        }\n    }\n}\n\n.bk-select-bottom-loading {\n    position: relative;\n    text-align: center;\n    bottom: 0;\n    height: 32px;\n    line-height: 25px;\n    width: 100%;\n    z-index: 777;\n}\n\n.bk-select-tag-input{\n    height: 22px;\n    max-width: 190px;\n    padding: 0;\n    margin: 4px 5px 4px 0;\n    overflow: hidden;\n    border: none;\n    outline: none;\n}","/**\n * @file ellipsis mixin\n *\n * usage:\n *      @mixin ellipsis 100px;\n */\n\n@define-mixin ellipsis $maxWidth, $display: inline-block {\n    display: $display;\n    max-width: $maxWidth;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n","/**\n * @file scroller mixin\n *\n * usage:\n *      @mixin scroller;\n *      @mixin scroller red;\n *      @mixin scroller green, 2px;\n */\n\n@define-mixin scroller $backgroundColor: #dcdee5, $width: 6px {\n    &::-webkit-scrollbar {\n        width: 6px;\n        height: 6px;\n    }\n    &::-webkit-scrollbar-thumb {\n        min-height: 24px;\n        border-radius: 3px;\n        background-color: $backgroundColor;\n    }\n}\n"]}