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

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

{"version":3,"sources":["input.css","mixins/ellipsis.css"],"names":[],"mappings":"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","file":"input.min.css","sourcesContent":["@import './variable.css';\n@import './mixins/ellipsis.css';\n\n:root {\n    --font-size: 12px;\n\n    .medium-font {\n        --font-size: 12px;\n    }\n\n    .large-font {\n        --font-size: 12px;\n    }\n}\n\n.bk-form-control {\n    position: relative;\n    display: inline-block;\n    width: 100%;\n    display: block;\n    color: $newBlackColor2;\n\n    .bk-limit-box {\n        position: absolute;\n        bottom: 2px;\n        right: 7px;\n        font-size: 12px;\n        margin: 0;\n        padding: 0;\n        color: $newBlackColor3;\n        transform: scale(0.8, 0.8);\n        .strong {\n            color: $newBlackColor2;\n        }\n    }\n\n     &.control-active {\n        /*textarea是在wrapper层实现边框*/\n        .bk-textarea-wrapper {\n            border-color: $newMainColor !important;\n            background-color: #fff !important;\n            &::placeholder {\n                color: $newGreyColor !important;\n            }\n        }\n    }\n\n    &.control-disable {\n        .bk-textarea-wrapper {\n            background-color: $newGreyColor3;\n            cursor: not-allowed;\n        }\n    }\n\n    &.control-prepend-group {\n        display: flex;\n        background-color: #f2f4f8;\n\n        .bk-form-input,\n        .bk-form-password,\n        .bk-form-select,\n        .bk-form-textarea {\n            border-radius: 0 2px 2px 0;\n        }\n    }\n    &.control-append-group {\n        display: flex;\n        .bk-form-input,\n        .bk-form-password,\n        .bk-form-select,\n        .bk-form-textarea {\n            border-radius: 2px 0 0 2px;\n        }\n    }\n    &.control-prepend-group.control-append-group {\n        .bk-form-input,\n        .bk-form-password,\n        .bk-form-select,\n        .bk-form-textarea {\n            border-radius: 0;\n        }\n    }\n    .group-box {\n        vertical-align: middle;\n        position: relative;\n        border: 1px solid #cbd5e0;\n        border-radius: 2px;\n        height: 30px;\n        background-color: #fafbfd;\n\n        .group-text {\n            @mixin ellipsis 200px;\n            color: $weak-font-color;\n            padding: 0 15px;\n            font-size: var(--font-size);\n            vertical-align: middle;\n            line-height: 28px;\n            &.bk-dropdown-menu {\n                padding: 0;\n                overflow: visible;\n                white-space: normal;\n                .bk-button {\n                    @mixin ellipsis 200px;\n                    border: none;\n                    border-radius: 0;\n                    padding-right: 30px;\n                    color: $weak-font-color;\n                    background-color: #fafbfd;\n                    .bk-icon {\n                        position: absolute;\n                        right: 10px;\n                        top: 6px;\n                    }\n                }\n            }\n        }\n        &.group-prepend {\n            border-right: none;\n            border-radius: 2px 0 0 2px;\n            .bk-dropdown-trigger {\n                display: flex;\n            }\n            .bk-button {\n                height: 28px;\n            }\n        }\n        &.group-append {\n            border-left: none;\n            border-radius: 0 2px 2px 0;\n        }\n    }\n    .control-icon {\n        display: flex;\n        align-items: center;\n        position: absolute;\n        font-size: $iconSmallerSize;\n        top: 50%;\n        transform: translateY(-50%);\n        color: $newGreyColor;\n        .clear-icon {\n            cursor: pointer;\n            font-size: $iconSmallestSize;\n            &:hover {\n                color: $newBlackColor3;\n            }\n        }\n        &.left-icon {\n            left: 10px;\n        }\n    }\n    &.with-left-icon {\n        .bk-form-input,\n        .bk-form-password,\n        .bk-form-select,\n        .bk-form-textarea {\n            padding-left: 30px;\n        }\n    }\n    &.with-right-icon {\n        .bk-form-input,\n        .bk-form-password,\n        .bk-form-select,\n        .bk-form-textarea {\n            padding-right: 30px;\n        }\n\n        .bk-input-number {\n            position: relative;\n            input {\n                padding-right: 12px;\n            }\n        }\n    }\n\n    .input-right-icon {\n        cursor: pointer;\n        &:hover {\n            color: $primaryColor;\n        }\n    }\n}\n\n.bk-form-input,\n.bk-form-password,\n.bk-form-select,\n.bk-form-textarea {\n    box-sizing: border-box;\n    height: 30px;\n    line-height: normal;\n    color: $newBlackColor2;\n    background-color: #fff;\n    border-radius: 2px;\n    width: 100%;\n    font-size: var(--font-size);\n    box-sizing: border-box;\n    border: 1px solid $newGreyColor;\n    padding: 0 10px;\n    text-align: left;\n    vertical-align: middle;\n    outline: none;\n    resize:none;\n    transition: border linear .2s;\n    &.only-bottom-border {\n        border-color: transparent transparent $newGreyColor transparent;\n        &:focus {\n            border-color: transparent transparent $newMainColor transparent !important;\n            box-shadow: none;\n        }\n        &[disabled],\n        &[readonly] {\n            border-color: transparent transparent $newGreyColor1 transparent !important;\n        }\n    }\n    &.input-text-ellipsis {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n    }\n    &:focus {\n        border-color: $newMainColor !important;\n        background-color: #fff !important;\n        &::placeholder {\n            color: $newGreyColor !important;\n        }\n    }\n    &::placeholder {\n        color: $newGreyColor;\n    }\n\n    &[readonly] {\n        background-color: $newGreyColor3 !important;\n        cursor: default;\n        border-color: $newGreyColor1 !important;\n    }\n    &[disabled] {\n        /* color: $formBorderColor; */\n        background-color: $newGreyColor3 !important;\n        cursor: not-allowed;\n        border-color: $newGreyColor1 !important;\n    }\n}\n\n.bk-input-text,\n.bk-input-textarea,\n.bk-input-password,\n.bk-input-number,\n.bk-input-email,\n.bk-input-url,\n.bk-input-date {\n    width: 100%;\n}\n\n.bk-input-number {\n    position: relative;\n    input {\n        padding-right: 12px;\n        &[type=\"number\"] {\n            &::-webkit-outer-spin-button,&::-webkit-inner-spin-button {\n                appearance: none;\n            }\n            -moz-appearance: textfield;\n        }\n    }\n    .input-number-option {\n        position: absolute;\n        right: 2px;\n        top: 1px;\n        bottom: 1px;\n        width: 26px;\n        text-align: center;\n        display: flex;\n        justify-content: center;\n        flex-direction: column;\n        background: #fff;\n\n        .number-option-item {\n            flex: auto;\n            width: 100%;\n            max-height: 45%;\n            color: #979ba5;\n            font-size: $iconSmallSize;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            &:hover {\n                background: rgba(244, 246, 250, 1);\n                cursor: pointer;\n            }\n        }\n    }\n}\n\n.bk-textarea-wrapper {\n    border: 1px solid $newGreyColor;\n    border-radius: 2px;\n    .bk-form-textarea {\n        border: none;\n        height: auto;\n        &.textarea-maxlength {\n            margin-bottom: 16px;\n        }\n    }\n}\n\n.bk-form-textarea {\n    min-height: 70px;\n    line-height: 20px;\n    padding: 5px 10px;\n    line-height: 1.5;\n}\n\n/* size */\n.bk-input-wrapper-small {\n    .group-box {\n        height: 26px;\n        .group-text {\n            font-size: 12px;\n            line-height: 24px;\n            &.bk-dropdown-menu {\n                line-height: unset;\n                .bk-button {\n                    height: 24px;\n                    line-height: 24px;\n                    .bk-icon {\n                        top: 4px;\n                    }\n                }\n            }\n        }\n    }\n    .input-number-option {\n        .number-option-item {\n            font-size: $iconSmallestSize;\n        }\n    }\n}\n.bk-input-wrapper-large {\n    .group-box {\n        height: 32px;\n        .group-text {\n            font-size: 14px;\n            line-height: 32px;\n            &.bk-dropdown-menu {\n                line-height: unset;\n                .bk-button {\n                    color: $weak-font-color;\n                    background-color: #fafbfd;\n                    .bk-icon {\n                        top: 7px;\n                    }\n                }\n            }\n        }\n    }\n    .bk-input-large {\n        height: 32px;\n        font-size: 14px;\n        line-height: 32px;\n    }\n    .input-number-option {\n        .number-option-item {\n            font-size: $iconNormalSize;\n        }\n    }\n}\n.bk-input-small {\n    height: 26px;\n    font-size: 12px;\n    line-height: 26px;\n}\n.bk-input-large {\n    height: 32px;\n    font-size: 14px;\n    line-height: 32px;\n}\n.large-font,\n.medium-font {\n    .bk-input-large,\n    .bk-input-small,\n    .group-text {\n        font-size: var(--font-size) !important;\n    }\n}\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"]}