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

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

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