UNPKG

@gravityforms/components

Version:

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

1 lines 4.58 kB
{"version":3,"sources":["swatch.css"],"names":[],"mappings":"AAEC;EACC,mBAAmB;EACnB,aAAa;EACb,iBAAiB;EACjB,WAAgC;EAChC,kBAAkB;CACnB;;CAEA;EACC,aAAa;EACb,iBAAiB;EACjB,WAAgC;EAChC,SAAS;EACT,UAAU;CACX;;CAEA;EAEC,kBAAkB;EAClB,eAAe;EACf,gBAAgB;CACjB;;CAIC;GACC,0OAAyK;EAK1K;;CAHC;IACC,aAAa;GACd;;CAGD;GACC,gDAAgD;GAChD,0BAAiD;EAKlD;;CAHC;IACC,UAAU;GACX;;CAMA;IACC,cAAc;GACf;;CAIF;EAEC,sBAAgD;EAChD,kBAAkB;EAClB,oIAAoI;EACpI,eAAe;EACf,cAAc;EACd,YAAY;EACZ,kBAAkB;EAClB,wEAAyD;EACzD,WAAW;CACZ;;CAEA;EACC,gBAA0C;EAC1C,gBAAgB;EAChB,kBAAkB;EAClB,WAAW;EACX,iBAAiB;EACjB,oBAAoB;EACpB,qBAAqB;EACrB,UAAU;EACV,kBAAkB;EAClB,6BAA6B;CAC9B;;CAEA;EACC,WAAqC;EACrC,mBAAmB;EACnB,sBAAsB;EACtB,uBAAuB;EACvB,kBAAkB;EAClB,gCAAgC;CACjC;;CAEA;EACC,mBAAwC;EACxC,sBAAgD;EAChD,mBAAmB;EACnB,aAAa;EACb,eAAe;EACf,UAAU;EACV,UAAU;EACV,QAAQ;EACR,MAAM;EACN,+BAA+B;CAChC;;CAEA;EACC,gBAAgB;EAChB,iBAAiB;EACjB,UAAU;CAcX;;CAZC;GACC,qBAAgD;EACjD;;CAEA;GACC,0BAAiD;EAMlD;;CAJC;IACC,kBAA4C;IAC5C,gBAAgB;GACjB;;CAIF;EACC,gBAA0C;EAC1C,yBAAgD;EAChD,gBAAgB;EAChB,2BAAmD;EACnD,oBAAoB;EACpB,wEAAyD;CAC1D;;CAEA;EACC,cAAoC;EACpC,kBAAkB;EAClB,sBAAsB;EACtB,uBAAuB;EACvB,kBAAkB;EAClB,gCAAgC;CACjC","file":"swatch.css","sourcesContent":[".gform-admin {\n\n\t.gform-swatch {\n\t\talign-items: center;\n\t\tdisplay: flex;\n\t\tflex-wrap: nowrap;\n\t\tgap: var(--gform-admin-spacer-2);\n\t\tposition: relative;\n\t}\n\n\t.gform-swatch__options {\n\t\tdisplay: flex;\n\t\tflex-wrap: nowrap;\n\t\tgap: var(--gform-admin-spacer-2);\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\t.gform-swatch__option,\n\t.gform-swatch__new {\n\t\tborder-radius: 50%;\n\t\tcursor: pointer;\n\t\tlist-style: none;\n\t}\n\n\t.gform-swatch__option {\n\n\t\t&:hover .gform-swatch__option-preview {\n\t\t\tbox-shadow: 0 0 0 rgba(0, 0, 0, 0.05), 0 4px 6px rgba(0, 0, 0, 0.05), 0 10px 32px rgba(0, 0, 0, 0.10), 0 1px 1px rgba(0, 0, 0, 0.11), var(--gform-admin-box-shadow-super);\n\n\t\t\t&::after {\n\t\t\t\topacity: 0.15;\n\t\t\t}\n\t\t}\n\n\t\t&:focus .gform-swatch__option-preview {\n\t\t\tbox-shadow: var(--gform-admin-box-shadow-swatch);\n\t\t\toutline: 2px solid var(--gform-admin-color-focus);\n\n\t\t\t&::after {\n\t\t\t\topacity: 0;\n\t\t\t}\n\t\t}\n\n\t\t&:hover,\n\t\t&:focus {\n\n\t\t\t.gform-swatch__option-icon--delete {\n\t\t\t\tdisplay: block;\n\t\t\t}\n\t\t}\n\t}\n\n\t.gform-swatch__option-preview,\n\t.gform-swatch__new-preview {\n\t\tborder: 2px solid var(--gform-admin-color-white);\n\t\tborder-radius: 50%;\n\t\tbox-shadow: 0 0 0 rgba(0, 0, 0, 0.05), 0 4px 6px rgba(0, 0, 0, 0.05), 0 10px 32px rgba(0, 0, 0, 0.10), 0 1px 1px rgba(0, 0, 0, 0.11);\n\t\tcursor: pointer;\n\t\tdisplay: block;\n\t\theight: 30px;\n\t\tposition: relative;\n\t\ttransition: var(--gform-admin-transition-cl-button-focus);\n\t\twidth: 30px;\n\t}\n\n\t.gform-swatch__option-preview::after {\n\t\tbackground: var(--gform-admin-color-white);\n\t\tblock-size: 100%;\n\t\tborder-radius: 50%;\n\t\tcontent: '';\n\t\tinline-size: 100%;\n\t\tinset-block-start: 0;\n\t\tinset-inline-start: 0;\n\t\topacity: 0;\n\t\tposition: absolute;\n\t\ttransition: opacity 0.2s ease;\n\t}\n\n\t.gform-swatch__option-icon {\n\t\tcolor: var(--gform-admin-color-white);\n\t\tfont-size: 1.625rem;\n\t\tinset-block-start: 50%;\n\t\tinset-inline-start: 50%;\n\t\tposition: absolute;\n\t\ttransform: translate(-50%, -50%);\n\t}\n\n\t.gform-swatch__option-icon--delete {\n\t\tbackground: var(--gform-admin-color-red);\n\t\tborder: 1px solid var(--gform-admin-color-white);\n\t\tborder-radius: 100%;\n\t\tdisplay: none;\n\t\tfont-size: 1rem;\n\t\tleft: auto;\n\t\tpadding: 0;\n\t\tright: 0;\n\t\ttop: 0;\n\t\ttransform: translate(50%, -50%);\n\t}\n\n\t.gform-swatch__new {\n\t\tblock-size: auto;\n\t\tinline-size: auto;\n\t\tpadding: 0;\n\n\t\t&:hover .gform-swatch__new-preview {\n\t\t\tborder-color: var(--gform-admin-color-alabaster);\n\t\t}\n\n\t\t&:focus {\n\t\t\toutline: 2px solid var(--gform-admin-color-focus);\n\n\t\t\t.gform-swatch__new-preview {\n\t\t\t\tborder-color: var(--gform-admin-color-white);\n\t\t\t\ttransition: none;\n\t\t\t}\n\t\t}\n\t}\n\n\t.gform-swatch__new-preview {\n\t\tbackground: var(--gform-admin-color-white);\n\t\tborder: 2px solid var(--gform-admin-color-snuff);\n\t\tbox-shadow: none;\n\t\toutline: 1px dashed var(--gform-admin-color-santas);\n\t\toutline-offset: -3px;\n\t\ttransition: var(--gform-admin-transition-cl-button-focus);\n\t}\n\n\t.gform-swatch__new-icon {\n\t\tcolor: var(--gform-admin-color-port);\n\t\tfont-size: 1.25rem;\n\t\tinset-block-start: 50%;\n\t\tinset-inline-start: 50%;\n\t\tposition: absolute;\n\t\ttransform: translate(-50%, -50%);\n\t}\n}\n"]}