UNPKG

@gravityforms/components

Version:

UI components for use in Gravity Forms development. Both React and vanilla js flavors.

1 lines 3.54 kB
{"version":3,"sources":["color-picker.css"],"names":[],"mappings":"AAEC;EACC,YAAY;EACZ,WAAW;CACZ;;CAEA;EACC,mBAAmB;EACnB,kBAAkB;EAClB,cAAc;EACd,aAAa;CACd;;CAEA;EACC,mBAAmB;EACnB,YAAY;EACZ,mBAAmB;EACnB,gBAAgB;CACjB;;CAEA;EACC,sBAAgD;EAChD,uBAAuB;EACvB,YAAY;EACZ,qCAAqC;EACrC,WAAW;CACZ;;CAEA;EACC,gBAA0C;EAC1C,oCAAoC;EACpC,wLAA8C;EAC9C,sBAAsB;EACtB,aAAa;EACb,kBAAkB;EAClB,YAAY;CACb;;CAEA;EACC,gBAA0C;EAC1C,YAAY;EACZ,YAAY;EACZ,SAAS;EACT,kBAAkB;EAClB,WAAW;CACZ;;CAEA;EACC,8CAA8C;CAC/C;;CAEA;EACC,0CAA0C;EAC1C,wCAAwC;EACxC,SAAS;EACT,8CAA8C;EAC9C,wBAAwB;CACzB;;CAEA;EACC,gCAAgC;CACjC;;CAEA;EACC,0CAA0C;EAC1C,wCAAwC;EACxC,MAAM;EACN,+CAA+C;EAC/C,wBAAwB;CACzB;;CAEA;EACC,aAAa;EACb,mBAAmB;EACnB,WAAW;EACX,eAAe;CAChB;;CAEA;EACC,sBAAsB;EACtB,eAAe;EACf,YAAY;CACb;;CAIC;GACC,WAAW;EACZ;;CAGD;EACC,gBAA0C;EAC1C,yBAAoD;EACpD,kBAAkB;EAClB,oBAAoB;EACpB,cAAc;EACd,aAAa;EACb,wBAAwB;;CAOzB;;CALC;;GAEC,yBAAiB;;GAAjB,+EAAiB;;GAAjB,cAAiB;EAClB;;CAID;EACC,aAAa;EACb,mBAAmB;EACnB,yBAAyB;EACzB,oBAAoB;CACrB","file":"color-picker.css","sourcesContent":[".gform-admin {\n\n\t.react-colorful {\n\t\theight: auto;\n\t\twidth: 100%;\n\t}\n\n\t.react-colorful__saturation {\n\t\tborder-bottom: none;\n\t\tborder-radius: 3px;\n\t\tflex-shrink: 0;\n\t\theight: 234px;\n\t}\n\n\t.react-colorful__hue {\n\t\tborder-radius: 24px;\n\t\theight: 12px;\n\t\tmargin-bottom: 1rem;\n\t\tmargin-top: 1rem;\n\t}\n\n\t.react-colorful__pointer {\n\t\tborder: 8px solid var(--gform-admin-color-white);\n\t\tbox-sizing: content-box;\n\t\theight: 16px;\n\t\toutline: 1px solid rgba(0, 0, 0, 0.1);\n\t\twidth: 16px;\n\t}\n\n\t.gform-input--picker {\n\t\tbackground: var(--gform-admin-color-white);\n\t\tborder: 1px solid rgba(0, 0, 0, 0.1);\n\t\tbox-shadow: var(--gform-admin-box-shadow-mega);\n\t\tbox-sizing: border-box;\n\t\tpadding: 1rem;\n\t\tposition: absolute;\n\t\twidth: 352px;\n\t}\n\n\t.gform-input--picker::after {\n\t\tbackground: var(--gform-admin-color-white);\n\t\tcontent: \" \";\n\t\theight: 20px;\n\t\tleft: 50%;\n\t\tposition: absolute;\n\t\twidth: 20px;\n\t}\n\n\t.gform-input--picker--pos-above {\n\t\ttransform: translate(-50%, calc(-100% - 10px));\n\t}\n\n\t.gform-input--picker--pos-above::after {\n\t\tborder-right: 1px solid rgba(0, 0, 0, 0.1);\n\t\tborder-top: 1px solid rgba(0, 0, 0, 0.1);\n\t\tbottom: 0;\n\t\ttransform: translate(-50%, 50%) rotate(135deg);\n\t\ttransform-origin: center;\n\t}\n\n\t.gform-input--picker--pos-below {\n\t\ttransform: translate(-50%, 10px);\n\t}\n\n\t.gform-input--picker--pos-below::after {\n\t\tborder-right: 1px solid rgba(0, 0, 0, 0.1);\n\t\tborder-top: 1px solid rgba(0, 0, 0, 0.1);\n\t\ttop: 0;\n\t\ttransform: translate(-50%, -50%) rotate(-45deg);\n\t\ttransform-origin: center;\n\t}\n\n\t.gform-input__picker-inputs {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tgap: 0.5rem;\n\t\tmax-width: 100%;\n\t}\n\n\t.gform-input--picker-input input {\n\t\tbox-sizing: border-box;\n\t\tmax-width: 100%;\n\t\twidth: 121px;\n\t}\n\n\t.gform-input--picker-input--rgb {\n\n\t\tinput {\n\t\t\twidth: 58px;\n\t\t}\n\t}\n\n\t.gform-settings-panel__content .gform-input--picker-input input {\n\t\tbackground: var(--gform-admin-color-white);\n\t\tborder: 1px solid var(--gform-admin-color-blue-haze);\n\t\tborder-radius: 3px;\n\t\tfont-size: 0.8125rem;\n\t\tline-height: 2;\n\t\toutline: none;\n\t\tpadding: 0.25rem 0.75rem;\n\n\t\t&:focus {\n\n\t\t\t@mixin inputFocus;\n\t\t}\n\n\t}\n\n\t.gform-input__picker-controls {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tjustify-content: flex-end;\n\t\tmargin-top: 0.625rem;\n\t}\n}\n"]}