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

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

{"version":3,"sources":["input.css","mixins/ellipsis.css"],"names":[],"mappings":"AAGA,MACI,gBASJ,CAPI,mBACI,gBACJ,CAEA,kBACI,gBACJ,CAGJ,iBACI,iBAAkB,CAClB,oBAAqB,CACrB,UAAW,CACX,aAAc,CACd,aAiJJ,CA/II,+BACI,iBAAkB,CAClB,UAAW,CACX,SAAU,CACV,cAAe,CACf,QAAS,CACT,SAAU,CACV,aAAsB,CACtB,2BAA0B,CAA1B,mBAIJ,CAHI,uCACI,aACJ,CAKA,qDACI,8BAAsC,CACtC,+BAIJ,CAHI,gFACI,uBACJ,CAFA,uEACI,uBACJ,CAFA,2EACI,uBACJ,CAFA,4EACI,uBACJ,CAFA,kEACI,uBACJ,CAKJ,sDACI,wBAAgC,CAChC,kBACJ,CAGJ,uCACI,mBAAa,CAAb,mBAAa,CAAb,YAAa,CACb,wBAQJ,CANI,+NAII,yBACJ,CAEJ,sCACI,mBAAa,CAAb,mBAAa,CAAb,YAOJ,CANI,2NAII,yBACJ,CAGA,mTAII,eACJ,CAEJ,4BACI,qBAAsB,CACtB,iBAAkB,CAClB,wBAA+B,CAC/B,iBAAkB,CAClB,WAmCJ,CAjCI,wCCjFJ,oBAAiB,CACjB,eAAoB,CACpB,eAAgB,CAChB,sBAAuB,CACvB,kBAAmB,CD+EX,aAAsB,CACtB,cAAe,CACf,cAA2B,CAA3B,0BAA2B,CAC3B,qBAAsB,CACtB,gBAkBJ,CAjBI,yDACI,SAAU,CACV,gBAAiB,CACjB,kBAaJ,CAZI,oEC5FZ,oBAAiB,CACjB,eAAoB,CACpB,eAAgB,CAChB,sBAAuB,CACvB,kBAAmB,CD0FH,WAAY,CACZ,eAAgB,CAChB,WAAY,CACZ,kBAMJ,CALI,6EACI,iBAAkB,CAClB,UAAW,CACX,OACJ,CAIZ,0CACI,iBAAkB,CAClB,yBACJ,CACA,yCACI,gBAAiB,CACjB,yBACJ,CAEJ,+BACI,mBAAa,CAAb,mBAAa,CAAb,YAAa,CACb,wBAAmB,CAAnB,qBAAmB,CAAnB,kBAAmB,CACnB,iBAAkB,CAClB,cAA2B,CAC3B,OAAQ,CACR,kCAA2B,CAA3B,0BAA2B,CAC3B,aAWJ,CAVI,2CACI,cAAe,CACf,cAIJ,CAHI,iDACI,aACJ,CAEJ,yCACI,SACJ,CAGA,mMAII,iBACJ,CAGA,uMAII,kBACJ,CAEA,kDACI,iBAIJ,CAHI,wDACI,kBACJ,CAKZ,mEAII,6BAAsB,CACtB,WAAY,CACZ,kBAAmB,CACnB,aAAsB,CACtB,qBAAsB,CACtB,iBAAkB,CAClB,UAAW,CACX,cAA2B,CAA3B,0BAA2B,CAC3B,qBAAsB,CACtB,wBAA+B,CAC/B,cAAe,CACf,eAAgB,CAChB,qBAAsB,CACtB,YAAa,CACb,WAAW,CACX,oCAA6B,CAA7B,4BAkCJ,CAjCI,+IACI,4CASJ,CARI,uKACI,sDAA0E,CAC1E,uBAAgB,CAAhB,eACJ,CACA,8WAEI,sDACJ,CAEJ,2FACI,8BAAsC,CACtC,+BAIJ,CAHI,uMACI,uBACJ,CAFA,mKACI,uBACJ,CAFA,mLACI,uBACJ,CAFA,uLACI,uBACJ,CAFA,+IACI,uBACJ,CAEJ,+KACI,aACJ,CAFA,2IACI,aACJ,CAFA,2JACI,aACJ,CAFA,+JACI,aACJ,CAFA,uHACI,aACJ,CAEA,2GACI,kCAA2C,CAC3C,cAAe,CACf,8BACJ,CACA,2GAEI,kCAA2C,CAC3C,kBAAmB,CACnB,8BACJ,CAGJ,mHAOI,UACJ,CAEA,iBACI,iBAqCJ,CApCI,uBACI,kBAOJ,CALQ,8HACI,uBAAgB,CAAhB,eACJ,CAHJ,oCAII,yBACJ,CAEJ,sCACI,iBAAkB,CAClB,SAAU,CACV,OAAQ,CACR,UAAW,CACX,UAAW,CACX,iBAAkB,CAElB,oBAAuB,CACvB,2BAAsB,CAAtB,4BAAsB,CAAtB,yBAAsB,CAAtB,qBAAsB,CACtB,eAgBJ,CAdI,gGALA,mBAAa,CAAb,mBAAa,CAAb,YAAa,CACb,uBAAuB,CAAvB,sBAiBA,CAbA,0DACI,kBAAU,CAAV,aAAU,CAAV,SAAU,CACV,UAAW,CACX,cAAe,CACf,aAAc,CACd,cAAyB,CAEzB,wBAAmB,CAAnB,qBAAmB,CAAnB,kBAAmB,CACnB,oBAKJ,CAJI,gEACI,kBAAkC,CAClC,cACJ,CAKZ,qBACI,wBAA+B,CAC/B,iBAQJ,CAPI,uCACI,WAAY,CACZ,WAIJ,CAHI,0DACI,kBACJ,CAIR,kBACI,eAAgB,CAChB,gBAAiB,CACjB,gBAAiB,CACjB,eACJ,CAII,mCACI,WAeJ,CAdI,+CACI,cAAe,CACf,gBAWJ,CAVI,gEACI,iBAQJ,CAPI,2EACI,WAAY,CACZ,gBAIJ,CAHI,oFACI,OACJ,CAMZ,iEACI,cACJ,CAIJ,mCACI,WAeJ,CAdI,+CACI,cAAe,CACf,gBAWJ,CAVI,gEACI,iBAQJ,CAPI,2EACI,WAAY,CACZ,gBAIJ,CAHI,oFACI,QACJ,CAMZ,iEACI,cACJ,CAGR,gBACI,WAAY,CACZ,cAAe,CACf,gBACJ,CACA,gBACI,WAAY,CACZ,cAAe,CACf,gBACJ,CAGI,mKAGI,wBAAsC,CAAtC,oCACJ","file":"input.min.css","sourcesContent":["@import './variable.css';\r\n@import './mixins/ellipsis.css';\r\n\r\n:root {\r\n    --font-size: 12px;\r\n\r\n    .medium-font {\r\n        --font-size: 14px;\r\n    }\r\n\r\n    .large-font {\r\n        --font-size: 16px;\r\n    }\r\n}\r\n\r\n.bk-form-control {\r\n    position: relative;\r\n    display: inline-block;\r\n    width: 100%;\r\n    display: block;\r\n    color: $newBlackColor2;\r\n\r\n    .bk-limit-box {\r\n        position: absolute;\r\n        bottom: 2px;\r\n        right: 7px;\r\n        font-size: 12px;\r\n        margin: 0;\r\n        padding: 0;\r\n        color: $newBlackColor3;\r\n        transform: scale(0.8, 0.8);\r\n        .strong {\r\n            color: $newBlackColor2;\r\n        }\r\n    }\r\n\r\n     &.control-active {\r\n        /*textarea是在wrapper层实现边框*/\r\n        .bk-textarea-wrapper {\r\n            border-color: $newMainColor !important;\r\n            background-color: #fff !important;\r\n            &::placeholder {\r\n                color: $newGreyColor !important;\r\n            }\r\n        }\r\n    }\r\n\r\n    &.control-disable {\r\n        .bk-textarea-wrapper {\r\n            background-color: $newGreyColor3;\r\n            cursor: not-allowed;\r\n        }\r\n    }\r\n\r\n    &.control-prepend-group {\r\n        display: flex;\r\n        background-color: #f2f4f8;\r\n\r\n        .bk-form-input,\r\n        .bk-form-password,\r\n        .bk-form-select,\r\n        .bk-form-textarea {\r\n            border-radius: 0 2px 2px 0;\r\n        }\r\n    }\r\n    &.control-append-group {\r\n        display: flex;\r\n        .bk-form-input,\r\n        .bk-form-password,\r\n        .bk-form-select,\r\n        .bk-form-textarea {\r\n            border-radius: 2px 0 0 2px;\r\n        }\r\n    }\r\n    &.control-prepend-group.control-append-group {\r\n        .bk-form-input,\r\n        .bk-form-password,\r\n        .bk-form-select,\r\n        .bk-form-textarea {\r\n            border-radius: 0;\r\n        }\r\n    }\r\n    .group-box {\r\n        vertical-align: middle;\r\n        position: relative;\r\n        border: 1px solid $newGreyColor;\r\n        border-radius: 2px;\r\n        height: 32px;\r\n\r\n        .group-text {\r\n            @mixin ellipsis 200px;\r\n            color: $newBlackColor2;\r\n            padding: 0 15px;\r\n            font-size: var(--font-size);\r\n            vertical-align: middle;\r\n            line-height: 28px;\r\n            &.bk-dropdown-menu {\r\n                padding: 0;\r\n                overflow: visible;\r\n                white-space: normal;\r\n                .bk-button {\r\n                    @mixin ellipsis 200px;\r\n                    border: none;\r\n                    border-radius: 0;\r\n                    height: 30px;\r\n                    padding-right: 30px;\r\n                    .bk-icon {\r\n                        position: absolute;\r\n                        right: 10px;\r\n                        top: 7px;\r\n                    }\r\n                }\r\n            }\r\n        }\r\n        &.group-prepend {\r\n            border-right: none;\r\n            border-radius: 2px 0 0 2px;\r\n        }\r\n        &.group-append {\r\n            border-left: none;\r\n            border-radius: 0 2px 2px 0;\r\n        }\r\n    }\r\n    .control-icon {\r\n        display: flex;\r\n        align-items: center;\r\n        position: absolute;\r\n        font-size: $iconSmallerSize;\r\n        top: 50%;\r\n        transform: translateY(-50%);\r\n        color: $newGreyColor;\r\n        .clear-icon {\r\n            cursor: pointer;\r\n            font-size: $iconSmallestSize;\r\n            &:hover {\r\n                color: $newBlackColor3;\r\n            }\r\n        }\r\n        &.left-icon {\r\n            left: 10px;\r\n        }\r\n    }\r\n    &.with-left-icon {\r\n        .bk-form-input,\r\n        .bk-form-password,\r\n        .bk-form-select,\r\n        .bk-form-textarea {\r\n            padding-left: 30px;\r\n        }\r\n    }\r\n    &.with-right-icon {\r\n        .bk-form-input,\r\n        .bk-form-password,\r\n        .bk-form-select,\r\n        .bk-form-textarea {\r\n            padding-right: 30px;\r\n        }\r\n\r\n        .bk-input-number {\r\n            position: relative;\r\n            input {\r\n                padding-right: 12px;\r\n            }\r\n        }\r\n    }\r\n}\r\n\r\n.bk-form-input,\r\n.bk-form-password,\r\n.bk-form-select,\r\n.bk-form-textarea {\r\n    box-sizing: border-box;\r\n    height: 32px;\r\n    line-height: normal;\r\n    color: $newBlackColor2;\r\n    background-color: #fff;\r\n    border-radius: 2px;\r\n    width: 100%;\r\n    font-size: var(--font-size);\r\n    box-sizing: border-box;\r\n    border: 1px solid $newGreyColor;\r\n    padding: 0 10px;\r\n    text-align: left;\r\n    vertical-align: middle;\r\n    outline: none;\r\n    resize:none;\r\n    transition: border linear .2s;\r\n    &.only-bottom-border {\r\n        border-color: transparent transparent $newGreyColor transparent;\r\n        &:focus {\r\n            border-color: transparent transparent $newMainColor transparent !important;\r\n            box-shadow: none;\r\n        }\r\n        &[disabled],\r\n        &[readonly] {\r\n            border-color: transparent transparent $newGreyColor1 transparent !important;\r\n        }\r\n    }\r\n    &:focus {\r\n        border-color: $newMainColor !important;\r\n        background-color: #fff !important;\r\n        &::placeholder {\r\n            color: $newGreyColor !important;\r\n        }\r\n    }\r\n    &::placeholder {\r\n        color: $newGreyColor;\r\n    }\r\n\r\n    &[readonly] {\r\n        background-color: $newGreyColor3 !important;\r\n        cursor: default;\r\n        border-color: $newGreyColor1 !important;\r\n    }\r\n    &[disabled] {\r\n        /* color: $formBorderColor; */\r\n        background-color: $newGreyColor3 !important;\r\n        cursor: not-allowed;\r\n        border-color: $newGreyColor1 !important;\r\n    }\r\n}\r\n\r\n.bk-input-text,\r\n.bk-input-textarea,\r\n.bk-input-password,\r\n.bk-input-number,\r\n.bk-input-email,\r\n.bk-input-url,\r\n.bk-input-date {\r\n    width: 100%;\r\n}\r\n\r\n.bk-input-number {\r\n    position: relative;\r\n    input {\r\n        padding-right: 12px;\r\n        &[type=\"number\"] {\r\n            &::-webkit-outer-spin-button,&::-webkit-inner-spin-button {\r\n                appearance: none;\r\n            }\r\n            -moz-appearance: textfield;\r\n        }\r\n    }\r\n    .input-number-option {\r\n        position: absolute;\r\n        right: 2px;\r\n        top: 1px;\r\n        bottom: 1px;\r\n        width: 26px;\r\n        text-align: center;\r\n        display: flex;\r\n        justify-content: center;\r\n        flex-direction: column;\r\n        background: #fff;\r\n\r\n        .number-option-item {\r\n            flex: auto;\r\n            width: 100%;\r\n            max-height: 45%;\r\n            color: #979ba5;\r\n            font-size: $iconSmallSize;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            &:hover {\r\n                background: rgba(244, 246, 250, 1);\r\n                cursor: pointer;\r\n            }\r\n        }\r\n    }\r\n}\r\n\r\n.bk-textarea-wrapper {\r\n    border: 1px solid $newGreyColor;\r\n    border-radius: 2px;\r\n    .bk-form-textarea {\r\n        border: none;\r\n        height: auto;\r\n        &.textarea-maxlength {\r\n            margin-bottom: 16px;\r\n        }\r\n    }\r\n}\r\n\r\n.bk-form-textarea {\r\n    min-height: 70px;\r\n    line-height: 20px;\r\n    padding: 5px 10px;\r\n    line-height: 1.5;\r\n}\r\n\r\n/* size */\r\n.bk-input-wrapper-small {\r\n    .group-box {\r\n        height: 26px;\r\n        .group-text {\r\n            font-size: 12px;\r\n            line-height: 24px;\r\n            &.bk-dropdown-menu {\r\n                line-height: unset;\r\n                .bk-button {\r\n                    height: 24px;\r\n                    line-height: 24px;\r\n                    .bk-icon {\r\n                        top: 4px;\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    }\r\n    .input-number-option {\r\n        .number-option-item {\r\n            font-size: $iconSmallestSize;\r\n        }\r\n    }\r\n}\r\n.bk-input-wrapper-large {\r\n    .group-box {\r\n        height: 38px;\r\n        .group-text {\r\n            font-size: 14px;\r\n            line-height: 36px;\r\n            &.bk-dropdown-menu {\r\n                line-height: unset;\r\n                .bk-button {\r\n                    height: 36px;\r\n                    line-height: 36px;\r\n                    .bk-icon {\r\n                        top: 10px;\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    }\r\n    .input-number-option {\r\n        .number-option-item {\r\n            font-size: $iconNormalSize;\r\n        }\r\n    }\r\n}\r\n.bk-input-small {\r\n    height: 26px;\r\n    font-size: 12px;\r\n    line-height: 26px;\r\n}\r\n.bk-input-large {\r\n    height: 38px;\r\n    font-size: 14px;\r\n    line-height: 38px;\r\n}\r\n.large-font,\r\n.medium-font {\r\n    .bk-input-large,\r\n    .bk-input-small,\r\n    .group-text {\r\n        font-size: var(--font-size) !important;\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"]}