bk-vue-cec/lib/ui/color-picker.min.css.map

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

{"version":3,"sources":["color-picker.css"],"names":[],"mappings":"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","file":"color-picker.min.css","sourcesContent":["@import './variable.css';\r\n\r\n.bk-color-picker {\r\n    position: relative;\r\n    display: inline-flex;\r\n    align-content: center;\r\n    height: 32px;\r\n    border-radius: 2px;\r\n    border: 1px solid $newGreyColor;\r\n    transition: border .2s, box-shadow .2s;\r\n    color: $newBlackColor2;\r\n    cursor: pointer;\r\n    outline: none;\r\n    &.bk-color-picker-show-value {\r\n        width: 150px;\r\n    }\r\n    &.bk-color-picker-large {\r\n        height: 36px;\r\n        &.bk-color-picker-show-value {\r\n            width: 170px;\r\n            .bk-color-picker-text {\r\n                width: calc(100% - 62px);\r\n                font-size: 16px;\r\n            }\r\n        }\r\n        .bk-color-picker-color .bk-color-picker-color-square {\r\n            width: 22px;\r\n            height: 22px;\r\n            font-size: 22px;\r\n        }\r\n    }\r\n    &.bk-color-picker-small {\r\n        height: 28px;\r\n        &.bk-color-picker-show-value {\r\n            width: 132px;\r\n            .bk-color-picker-text {\r\n                width: calc(100% - 56px);\r\n                font-size: 12px;\r\n            }\r\n        }\r\n        .bk-color-picker-color .bk-color-picker-color-square {\r\n            width: 16px;\r\n            height: 16px;\r\n            font-size: 16px;\r\n        }\r\n    }\r\n    &:hover, &:focus {\r\n        border-color: $newMainColor;\r\n        transition: border .2s;\r\n    }\r\n    &.bk-color-picker-show-dropdown {\r\n        border-color: $newMainColor;\r\n        box-shadow: 0 0 0 2px rgba(45, 140, 240, .2);\r\n        transition: border .2s, box-shadow .2s;\r\n        .icon-angle-down {\r\n            transform: rotate(-180deg);\r\n            transition: transform .3s;\r\n        }\r\n    }\r\n    &.bk-color-picker-disabled {\r\n        border-color: $newGreyColor1;\r\n        background-color: $newGreyColor3;\r\n        cursor: not-allowed;\r\n        .bk-color-picker-text {\r\n            color: $newGreyColor;\r\n        }\r\n        .bk-color-picker-icon .icon-angle-down {\r\n            color: $newGreyColor;\r\n        }\r\n    }\r\n    .bk-color-picker-color {\r\n        display: flex;\r\n        align-items: center;\r\n        margin-left: 6px;\r\n        .bk-color-picker-color-square {\r\n            width: 18px;\r\n            height: 18px;\r\n            font-size: 18px;\r\n            color: $newGreyColor;\r\n            box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);\r\n        }\r\n    }\r\n    .bk-color-picker-text {\r\n        display: flex;\r\n        align-items: center;\r\n        width: calc(100% - 58px);\r\n        margin-left: 6px;\r\n        line-height: 20px;\r\n        font-size: 14px;\r\n        color: $newBlackColor2;\r\n        span {\r\n            overflow: hidden;\r\n            text-overflow: ellipsis;\r\n            white-space: nowrap;\r\n        }\r\n    }\r\n    .bk-color-picker-icon {\r\n        display: flex;\r\n        align-items: center;\r\n        width: 20px;\r\n        margin: 0 4px;\r\n        .icon-angle-down {\r\n            position: absolute;\r\n            right: 4px;\r\n            font-size: 20px;\r\n            color: $newBlackColor3;\r\n            transition: transform .3s;\r\n        }\r\n    }\r\n}\r\n/*下拉面板*/\r\n.bk-color-picker-dropdown {\r\n    width: 272px;\r\n}\r\n.bk-color-picker-saturation {\r\n    margin: 6px;\r\n    position: relative;\r\n    height: 180px;\r\n    .bk-color-picker-saturation-white {\r\n        background: linear-gradient(90deg, #fff, hsla(0, 0%, 100%, 0));\r\n    }\r\n    .bk-color-picker-saturation-black {\r\n        background: linear-gradient(0deg, #000, transparent);\r\n    }\r\n    .bk-color-picker-saturation-white, .bk-color-picker-saturation-black {\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        cursor: pointer;\r\n    }\r\n}\r\n.bk-color-picker-hue {\r\n    margin: 0 6px 6px;\r\n    position: relative;\r\n    height: 10px;\r\n    cursor: pointer;\r\n    background: linear-gradient(90deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red);\r\n    .bk-color-picker-hue-pointer {\r\n        position: absolute;\r\n        top: 0;\r\n        .bk-color-picker-hue-rectangle {\r\n            width: 4px;\r\n            height: 8px;\r\n            margin-top: 1px;\r\n            border-radius: 1px;\r\n            box-shadow: 0 0 2px rgba(0, 0, 0, .6);\r\n            background: #fff;\r\n            cursor: pointer;\r\n            transform: translateX(-2px);\r\n        }\r\n    }\r\n}\r\n.bk-color-picker-input {\r\n    margin: 0 6px 1px;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    font-size: 12px;\r\n    color: $newBlackColor2;\r\n    .bk-color-picker-input-hex .bk-color-picker-input-part .bk-color-picker-input-value {\r\n        width: 70px;\r\n    }\r\n    .bk-color-picker-input-rgba {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        width: 160px;\r\n    }\r\n    .bk-color-picker-input-part {\r\n        display: flex;\r\n        flex-flow: column;\r\n        .bk-color-picker-input-value {\r\n            width: 32px;\r\n            height: 22px;\r\n            border: 1px solid $newGreyColor;\r\n            border-radius: 2px;\r\n            padding: 0 4px;\r\n            line-height: 16px;\r\n            transition: border .2s;\r\n            outline: none;\r\n            &:focus {\r\n                border-color: $newMainColor;\r\n                transition: border .2s;\r\n            }\r\n            &.error {\r\n                border-color: $newRedColor;\r\n            }\r\n            &::-webkit-outer-spin-button,\r\n            &::-webkit-inner-spin-button {\r\n                -webkit-appearance: none;\r\n                margin: 0;\r\n            }\r\n        }\r\n        .bk-color-picker-input-text {\r\n            height: 18px;\r\n            line-height: 18px;\r\n            text-align: center;\r\n        }\r\n    }\r\n}\r\n.bk-color-picker-recommend-container {\r\n    padding: 6px;\r\n    border-top: 1px solid $newGreyColor2;\r\n    .bk-color-picker-recommend {\r\n        display: flex;\r\n        flex-wrap: wrap;\r\n        .bk-color-picker-recommend-color {\r\n            width: 20px;\r\n            height: 20px;\r\n            margin: 3px;\r\n            border-radius: 3px;\r\n            box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);\r\n            cursor: pointer;\r\n            &.bk-color-picker-recommend-selected-color {\r\n                box-shadow: 0 0 3px 2px $newMainColor;\r\n            }\r\n        }\r\n    }\r\n}\r\n.bk-color-picker-saturation, .bk-color-picker-hue, .bk-color-picker-recommend {\r\n    outline: none;\r\n    transition: box-shadow .2s;\r\n    &:focus {\r\n        box-shadow: 0 0 0 2px rgba(45, 140, 240, .5);\r\n        transition: box-shadow .2s;\r\n    }\r\n}\r\n/*饱和度和预设值共用样式*/\r\n.bk-color-picker-pointer {\r\n    position: absolute;\r\n    left: 50%;\r\n    top: 50%;\r\n    width: 4px;\r\n    height: 4px;\r\n    cursor: pointer;\r\n    .bk-color-picker-circle {\r\n        position: absolute;\r\n        left: 0;\r\n        top: 0;\r\n        width: 4px;\r\n        height: 4px;\r\n        box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0, 0, 0, 0.3), 0 0 1px 2px rgba(0, 0, 0, 0.4);\r\n        border-radius: 50%;\r\n        transform: translate(-2px, -2px);\r\n        cursor: pointer;\r\n    }\r\n}\r\n.bk-color-picker-empty {\r\n    position: relative;\r\n    &::after {\r\n        position: absolute;\r\n        left: calc(50% - 1px);\r\n        top: 1px;\r\n        content: '';\r\n        width: 2px;\r\n        height: calc(100% - 2px);\r\n        border-radius: 1px;\r\n        background: #ea3536;\r\n        transform: rotate(45deg);\r\n    }\r\n}\r\n"]}