bk-vue-cec/lib/ui/select.min.css.map

一个为运维业务场景而生，好看易用的Vue2原创组件库，由T-inside Design进行托管社区化运作

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