packages/kirki-framework/control-react-colorful/dist/control.css.map
{"mappings":"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","sources":["src/control.scss","%3Cinput%20css%20k6h0r7%3E"],"sourcesContent":["// React colorful control.\n.customize-control-kirki-react-colorful {\n .kirki-control-form {\n position: relative;\n box-sizing: border-box;\n }\n\n .kirki-control-form * {\n box-sizing: border-box;\n }\n\n .kirki-control-cols {\n display: flex;\n align-items: flex-start;\n }\n\n .kirki-control-left-col {\n padding-right: 30px;\n width: 90%;\n width: calc(100% - 35px);\n }\n\n .kirki-control-right-col {\n display: flex;\n justify-content: flex-end;\n width: 35px;\n }\n\n .use-hue-mode {\n .react-colorful {\n height: auto;\n }\n\n .react-colorful__saturation {\n display: none;\n }\n\n .react-colorful__last-control {\n border-radius: 4px;\n }\n\n input.kirki-color-input {\n padding-left: 8px;\n padding-left: 8px;\n }\n }\n\n .kirki-trigger-circle-wrapper {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 3px;\n width: 33px;\n height: 33px;\n border-radius: 50%;\n border: 1px solid #ccc;\n }\n\n .kirki-trigger-circle {\n position: relative;\n padding: 0;\n display: block;\n width: 25px;\n height: 25px;\n background-size: 10px;\n border: none;\n border-radius: 50%;\n cursor: pointer;\n\n .kirki-color-preview {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n }\n }\n\n .colorPickerContainer {\n position: absolute;\n top: 35px;\n right: 0;\n margin-top: 5px;\n width: 100%;\n padding: 15px;\n background-color: #fff;\n border-radius: 6px;\n box-shadow: rgba(0, 0, 0, 0.09) 0 12px 15px 0;\n z-index: 9999;\n\n opacity: 0;\n visibility: hidden;\n transition: all 0.2s;\n transition-property: opacity, visibility; // Yes, only opacity and visibility please.\n\n &.is-open {\n opacity: 1;\n visibility: visible;\n transition: all 0.2s ease 10ms; // When we open the picker popup, the top offset is changed, so we need to wait a bit.\n transition-property: opacity, visibility; // Yes, only opacity and visibility please.\n }\n }\n\n .react-colorful {\n width: 100%;\n border-radius: 4px;\n }\n\n .react-colorful__saturation {\n border-radius: 4px 4px 0 0;\n }\n\n .react-colorful__last-control {\n border-radius: 0 0 4px 4px;\n }\n\n .react-colorful__pointer {\n width: 20px;\n height: 20px;\n }\n\n .kirki-color-input-wrapper {\n margin-top: 15px;\n }\n\n .kirki-color-input-control {\n position: relative;\n display: flex;\n align-items: center;\n width: 100%;\n }\n\n input.kirki-color-input {\n display: block;\n position: relative;\n padding-left: 32px;\n padding-right: 8px;\n width: 100%;\n height: 30px;\n line-height: 30px;\n color: #333;\n border: 1px solid #ccc;\n border-radius: 4px;\n z-index: 1;\n }\n\n .kirki-color-input:focus,\n .kirki-color-input:active {\n box-shadow: 0 0 0 1px #2271b1;\n outline: none;\n border-color: #2271b1;\n }\n\n .kirki-color-preview-wrapper {\n position: absolute;\n left: 6px;\n width: 22px;\n height: 22px;\n background-repeat: repeat;\n background-size: 8px;\n border-radius: 50%;\n border: 1px solid #ddd;\n border: 2px solid #fff;\n -webkit-box-shadow: 0px 0px 0px 1px #ddd;\n box-shadow: 0px 0px 0px 1px #ddd;\n z-index: 2;\n }\n\n .kirki-color-preview,\n .kirki-control-reset {\n position: absolute;\n padding: 0;\n background-color: transparent;\n cursor: pointer;\n }\n\n .kirki-color-preview {\n display: block;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n border-width: 0;\n }\n\n .kirki-control-reset {\n display: flex;\n align-items: center;\n justify-content: center;\n top: 8px;\n right: 35px;\n width: 17px;\n height: 17px;\n border-radius: 50%;\n border-width: 0;\n z-index: 3;\n }\n\n .kirki-control-reset:hover i {\n color: #f00;\n transform: rotate(-45deg);\n }\n\n .kirki-control-reset i {\n font-size: 12px;\n width: auto;\n height: auto;\n transform: rotate(45deg);\n transition: transform 0.2s;\n }\n\n .kirki-color-swatches {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 12px;\n }\n\n .kirki-color-swatch {\n position: relative;\n display: block;\n padding: 0;\n width: 25px;\n height: 25px;\n border-radius: 50%;\n border: 2px solid #fff;\n cursor: pointer;\n transform: scale(1, 1);\n transition: transform 0.2s;\n -webkit-box-shadow: 0px 0px 0px 1px #ddd;\n box-shadow: 0px 0px 0px 1px #ddd;\n }\n\n .kirki-color-swatch:active,\n .kirki-color-swatch:focus {\n outline: none;\n }\n\n .kirki-color-swatch:hover {\n transform: scale(1.1, 1.1);\n }\n\n .kirki-label-tooltip {\n position: absolute;\n bottom: 45px;\n left: -8px;\n padding: 7px 10px 3px; // The 4px of bottom side is handled by label / description's margin-bottom.\n width: auto; // just for fallback for max-content.\n width: max-content;\n max-width: 100px;\n color: #fff;\n background-color: rgba(0, 0, 0, 0.7);\n border-radius: 4px;\n opacity: 0;\n visibility: hidden;\n transition: all 0.2s;\n\n &::before {\n content: \"\";\n position: absolute;\n bottom: -8px;\n left: 19px;\n border-width: 8px 7px 0 7px;\n border-style: solid;\n border-color: rgba(0, 0, 0, 0.7) transparent transparent transparent;\n }\n\n .customize-control-title {\n line-height: 1.2;\n }\n }\n\n .kirki-trigger-circle-wrapper {\n &:hover ~ .kirki-label-tooltip {\n opacity: 1;\n visibility: visible;\n }\n }\n\n &[data-kirki-parent-control-type=\"kirki-multicolor\"] {\n margin-right: 8px;\n margin-bottom: 20px;\n padding-right: 0;\n width: 35px;\n\n .kirki-control-reset {\n top: -16px;\n right: 8px;\n }\n }\n\n &[data-kirki-parent-control-type=\"kirki-typography\"] {\n .colorPickerContainer {\n top: 55px;\n }\n\n .kirki-control-reset {\n top: 30px;\n right: auto;\n left: 35px;\n }\n }\n}\n",".customize-control-kirki-react-colorful .kirki-control-form {\n position: relative;\n box-sizing: border-box;\n}\n.customize-control-kirki-react-colorful .kirki-control-form * {\n box-sizing: border-box;\n}\n.customize-control-kirki-react-colorful .kirki-control-cols {\n display: flex;\n align-items: flex-start;\n}\n.customize-control-kirki-react-colorful .kirki-control-left-col {\n padding-right: 30px;\n width: 90%;\n width: calc(100% - 35px);\n}\n.customize-control-kirki-react-colorful .kirki-control-right-col {\n display: flex;\n justify-content: flex-end;\n width: 35px;\n}\n.customize-control-kirki-react-colorful .use-hue-mode .react-colorful {\n height: auto;\n}\n.customize-control-kirki-react-colorful .use-hue-mode .react-colorful__saturation {\n display: none;\n}\n.customize-control-kirki-react-colorful .use-hue-mode .react-colorful__last-control {\n border-radius: 4px;\n}\n.customize-control-kirki-react-colorful .use-hue-mode input.kirki-color-input {\n padding-left: 8px;\n padding-left: 8px;\n}\n.customize-control-kirki-react-colorful .kirki-trigger-circle-wrapper {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 3px;\n width: 33px;\n height: 33px;\n border-radius: 50%;\n border: 1px solid #ccc;\n}\n.customize-control-kirki-react-colorful .kirki-trigger-circle {\n position: relative;\n padding: 0;\n display: block;\n width: 25px;\n height: 25px;\n background-size: 10px;\n border: none;\n border-radius: 50%;\n cursor: pointer;\n}\n.customize-control-kirki-react-colorful .kirki-trigger-circle .kirki-color-preview {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n.customize-control-kirki-react-colorful .colorPickerContainer {\n position: absolute;\n top: 35px;\n right: 0;\n margin-top: 5px;\n width: 100%;\n padding: 15px;\n background-color: #fff;\n border-radius: 6px;\n box-shadow: rgba(0, 0, 0, 0.09) 0 12px 15px 0;\n z-index: 9999;\n opacity: 0;\n visibility: hidden;\n transition: all 0.2s;\n transition-property: opacity, visibility;\n}\n.customize-control-kirki-react-colorful .colorPickerContainer.is-open {\n opacity: 1;\n visibility: visible;\n transition: all 0.2s ease 10ms;\n transition-property: opacity, visibility;\n}\n.customize-control-kirki-react-colorful .react-colorful {\n width: 100%;\n border-radius: 4px;\n}\n.customize-control-kirki-react-colorful .react-colorful__saturation {\n border-radius: 4px 4px 0 0;\n}\n.customize-control-kirki-react-colorful .react-colorful__last-control {\n border-radius: 0 0 4px 4px;\n}\n.customize-control-kirki-react-colorful .react-colorful__pointer {\n width: 20px;\n height: 20px;\n}\n.customize-control-kirki-react-colorful .kirki-color-input-wrapper {\n margin-top: 15px;\n}\n.customize-control-kirki-react-colorful .kirki-color-input-control {\n position: relative;\n display: flex;\n align-items: center;\n width: 100%;\n}\n.customize-control-kirki-react-colorful input.kirki-color-input {\n display: block;\n position: relative;\n padding-left: 32px;\n padding-right: 8px;\n width: 100%;\n height: 30px;\n line-height: 30px;\n color: #333;\n border: 1px solid #ccc;\n border-radius: 4px;\n z-index: 1;\n}\n.customize-control-kirki-react-colorful .kirki-color-input:focus,\n.customize-control-kirki-react-colorful .kirki-color-input:active {\n box-shadow: 0 0 0 1px #2271b1;\n outline: none;\n border-color: #2271b1;\n}\n.customize-control-kirki-react-colorful .kirki-color-preview-wrapper {\n position: absolute;\n left: 6px;\n width: 22px;\n height: 22px;\n background-repeat: repeat;\n background-size: 8px;\n border-radius: 50%;\n border: 1px solid #ddd;\n border: 2px solid #fff;\n -webkit-box-shadow: 0px 0px 0px 1px #ddd;\n box-shadow: 0px 0px 0px 1px #ddd;\n z-index: 2;\n}\n.customize-control-kirki-react-colorful .kirki-color-preview,\n.customize-control-kirki-react-colorful .kirki-control-reset {\n position: absolute;\n padding: 0;\n background-color: transparent;\n cursor: pointer;\n}\n.customize-control-kirki-react-colorful .kirki-color-preview {\n display: block;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n border-width: 0;\n}\n.customize-control-kirki-react-colorful .kirki-control-reset {\n display: flex;\n align-items: center;\n justify-content: center;\n top: 8px;\n right: 35px;\n width: 17px;\n height: 17px;\n border-radius: 50%;\n border-width: 0;\n z-index: 3;\n}\n.customize-control-kirki-react-colorful .kirki-control-reset:hover i {\n color: #f00;\n transform: rotate(-45deg);\n}\n.customize-control-kirki-react-colorful .kirki-control-reset i {\n font-size: 12px;\n width: auto;\n height: auto;\n transform: rotate(45deg);\n transition: transform 0.2s;\n}\n.customize-control-kirki-react-colorful .kirki-color-swatches {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 12px;\n}\n.customize-control-kirki-react-colorful .kirki-color-swatch {\n position: relative;\n display: block;\n padding: 0;\n width: 25px;\n height: 25px;\n border-radius: 50%;\n border: 2px solid #fff;\n cursor: pointer;\n transform: scale(1, 1);\n transition: transform 0.2s;\n -webkit-box-shadow: 0px 0px 0px 1px #ddd;\n box-shadow: 0px 0px 0px 1px #ddd;\n}\n.customize-control-kirki-react-colorful .kirki-color-swatch:active,\n.customize-control-kirki-react-colorful .kirki-color-swatch:focus {\n outline: none;\n}\n.customize-control-kirki-react-colorful .kirki-color-swatch:hover {\n transform: scale(1.1, 1.1);\n}\n.customize-control-kirki-react-colorful .kirki-label-tooltip {\n position: absolute;\n bottom: 45px;\n left: -8px;\n padding: 7px 10px 3px;\n width: auto;\n width: max-content;\n max-width: 100px;\n color: #fff;\n background-color: rgba(0, 0, 0, 0.7);\n border-radius: 4px;\n opacity: 0;\n visibility: hidden;\n transition: all 0.2s;\n}\n.customize-control-kirki-react-colorful .kirki-label-tooltip::before {\n content: \"\";\n position: absolute;\n bottom: -8px;\n left: 19px;\n border-width: 8px 7px 0 7px;\n border-style: solid;\n border-color: rgba(0, 0, 0, 0.7) transparent transparent transparent;\n}\n.customize-control-kirki-react-colorful .kirki-label-tooltip .customize-control-title {\n line-height: 1.2;\n}\n.customize-control-kirki-react-colorful .kirki-trigger-circle-wrapper:hover ~ .kirki-label-tooltip {\n opacity: 1;\n visibility: visible;\n}\n.customize-control-kirki-react-colorful[data-kirki-parent-control-type=kirki-multicolor] {\n margin-right: 8px;\n margin-bottom: 20px;\n padding-right: 0;\n width: 35px;\n}\n.customize-control-kirki-react-colorful[data-kirki-parent-control-type=kirki-multicolor] .kirki-control-reset {\n top: -16px;\n right: 8px;\n}\n.customize-control-kirki-react-colorful[data-kirki-parent-control-type=kirki-typography] .colorPickerContainer {\n top: 55px;\n}\n.customize-control-kirki-react-colorful[data-kirki-parent-control-type=kirki-typography] .kirki-control-reset {\n top: 30px;\n right: auto;\n left: 35px;\n}\n/*# sourceMappingURL=control.css.map */\n"],"names":[],"version":3,"file":"control.css.map"}