UNPKG

@gravityforms/components

Version:

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

1 lines 5.74 kB
{"version":3,"sources":["sortable-list.css"],"names":[],"mappings":"AAEC;EACC,qBAA6C;EAC7C,kBAAkB;EAClB,iBAAiB;EACjB,eAAe;EACf,eAAe;EACf,YAAY;CACb;;CAEA;EACC,oBAAoB;CACrB;;CAEA;EACC,mBAAmB;CACpB;;CAEA;EACC,kBAAkB;EAClB,eAAe;CAChB;;CAEA;EACC,iBAAiB;CAClB;;CAEA;EACC,4BAA4B;EAC5B,aAAa;CACd;;CAEA;EACC,mBAAmB;EACnB,sBAAgD;EAChD,yBAAgD;EAChD,kBAAkB;EAClB,YAAY;EACZ,aAAa;EACb,eAAe;EACf,8BAA8B;EAC9B,kBAAkB;CACnB;;CAEA;EACC,gBAAgB;CACjB;;CAEA;EACC,gBAAgB;CACjB;;CAEA;EACC,aAAa;CACd;;CAEA;EACC,gBAAgB;CACjB;;CAEA;EAEC,sDAAsD;EACtD,aAAa;CACd;;CAEA;EACC,UAAU;CACX;;CAEA;EACC,0CAA0C;EAC1C,gCAAgC;CACjC;;CAEA;EACC,YAAY;EACZ,SAAS;EACT,UAAU;CACX;;CAEA;EACC,kBAAkB;CACnB;;CAEA;EACC,mBAAmB;EACnB,aAAa;EACb,uBAAuB;EACvB,WAAW;CACZ;;CAEA;EACC,cAAc;EACd,eAAe;EACf,aAAa;EACb,gBAAgB;EAChB,WAAW;CACZ;;CAEA;EACC,+BAAsD;EACtD,kBAAkB;EAClB,mBAAmB;CACpB;;CAEA;EACC,YAAY;EACZ,UAAU;EACV,kBAAkB;CACnB;;CAEA;EACC,gBAA0C;EAC1C,yBAAgD;EAChD,aAAa;EACb,OAAO;EACP,SAAS;EACT,YAAY;EACZ,kBAAkB;EAClB,MAAM;EACN,4BAA4B;EAC5B,YAAY;CACb;;CAEA;EAGC,cAAc;CACf;;CAEA;EACC,cAAc;CACf;;AAGD,qBAAqB;;AACrB;CACC,mBAAmB;CACnB,aAAa;CACb,YAAY;CACZ,8BAA8B;AAC/B;;AAEA;CACC,aAAa;AACd;;AAEA;CAIC,aAAa;AACd;;AAGA;CACC,cAAoC;CACpC,YAAY;CACZ,UAAU;AACX;;AAEA;CACC,iBAAiB;AAClB;;AAEA;CACC,mBAA+C;CAC/C,yBAAgD;CAChD,kBAAkB;AACnB;;AAEA;CACC,kBAAkB;CAClB,QAAQ;AACT;;AAEA;CACC,iBAAiB;AAClB","file":"sortable-list.css","sourcesContent":[".gform-admin {\n\n\t.gform-sortable-list {\n\t\tborder-color: var(--gform-admin-color-santas);\n\t\tborder-radius: 3px;\n\t\tborder-width: 1px;\n\t\tflex-wrap: wrap;\n\t\tmax-width: 100%;\n\t\twidth: 750px;\n\t}\n\n\t.gform-sortable-list--dashed {\n\t\tborder-style: dashed;\n\t}\n\n\t.gform-sortable-list--solid {\n\t\tborder-style: solid;\n\t}\n\n\t.gform-sortable-list--none {\n\t\tborder-style: none;\n\t\tborder-width: 0;\n\t}\n\n\t.gform-sortable-list > .gform-sortable-list {\n\t\tmargin-left: 10px;\n\t}\n\n\t.gform-sortable-list__populated {\n\t\tmax-width: calc(100% - 44px);\n\t\tpadding: 22px;\n\t}\n\n\t.gform-sortable-list-item {\n\t\talign-items: center;\n\t\tbackground-color: var(--gform-admin-color-white);\n\t\tborder: 1px solid var(--gform-admin-color-snuff);\n\t\tborder-radius: 3px;\n\t\tcursor: move;\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t\tjustify-content: space-between;\n\t\tpadding: 10px 20px;\n\t}\n\n\t.gform-sortable-list-item + button {\n\t\tmargin-top: 22px;\n\t}\n\n\t.gform-sortable-list-item + .gform-sortable-list-item {\n\t\tmargin-top: 22px;\n\t}\n\n\t.gform-sortable-list-item + .gform-sortable-list-item.no-top-margin {\n\t\tmargin-top: 0;\n\t}\n\n\t.gform-sortable-list-item + .gform-sortable-list {\n\t\tmargin-top: 22px;\n\t}\n\n\t.gform-sortable-list-item:focus-visible,\n\t.gform-sortable-list-item:focus {\n\t\tborder: 1px solid var(--gsmtp-admin-color-blue-ribbon);\n\t\toutline: none;\n\t}\n\n\t.gform-sortable-list-item.is-dragging {\n\t\topacity: 0;\n\t}\n\n\t.gform-sortable-list-item.is-keyboard-nav {\n\t\tbox-shadow: 2px 5px 5px rgba(0, 0, 0, 0.3);\n\t\ttransform: translate(-2px, -2px);\n\t}\n\n\t.gform-sortable-list-item__control {\n\t\theight: 22px;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\t.gform-sortable-list-item__control--first {\n\t\tmargin-left: -10px;\n\t}\n\n\t.gform-sortable-list-empty-wrapper {\n\t\talign-items: center;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\twidth: 100%;\n\t}\n\n\t.gform-sortable-list-empty-add-button {\n\t\tdisplay: block;\n\t\tfont-size: 14px;\n\t\theight: 175px;\n\t\tmax-height: 100%;\n\t\twidth: 100%;\n\t}\n\n\t.gform-sortable-list-item__controls {\n\t\tborder-right: 1px solid var(--gform-admin-color-snuff);\n\t\tmargin-right: 14px;\n\t\tpadding-right: 14px;\n\t}\n\n\t.gform-sortable-list-item.floating-nav {\n\t\tborder: none;\n\t\tpadding: 0;\n\t\tposition: relative;\n\t}\n\n\t.gform-sortable-list-item.floating-nav > .gform-sortable-list-item__controls {\n\t\tbackground: var(--gform-admin-color-white);\n\t\tborder: 1px solid var(--gform-admin-color-snuff);\n\t\tdisplay: none;\n\t\tleft: 0;\n\t\tmargin: 0;\n\t\tpadding: 5px;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\ttransform: translateY(-100%);\n\t\tz-index: 999;\n\t}\n\n\t.gform-sortable-list-item.floating-nav:hover .gform-sortable-list-item__controls,\n\t.gform-sortable-list-item.floating-nav:focus .gform-sortable-list-item__controls,\n\t.gform-sortable-list-item.floating-nav:focus-within .gform-sortable-list-item__controls {\n\t\tdisplay: block;\n\t}\n\n\t.gform-sortable-list-item.floating-nav .gform-sortable-list-item__control--first {\n\t\tmargin-left: 0;\n\t}\n}\n\n/* TEMP: Field Item */\n.gform-sortable-list-item--field {\n\talign-items: center;\n\tdisplay: flex;\n\tflex-grow: 1;\n\tjustify-content: space-between;\n}\n\n.gform-sortable-list-item--field__controls {\n\tdisplay: none;\n}\n\n.gform-sortable-list-item:hover .gform-sortable-list-item--field__controls,\n.gform-sortable-list-item:active .gform-sortable-list-item--field__controls,\n.gform-sortable-list-item:focus .gform-sortable-list-item--field__controls,\n.gform-sortable-list-item:focus-within .gform-sortable-list-item--field__controls {\n\tdisplay: flex;\n}\n\n\n.gform-sortable-list-item--field__controls button.gform-button {\n\tcolor: var(--gform-admin-color-port);\n\theight: 24px;\n\tpadding: 0;\n}\n\n.gform-sortable-list-item--field__controls button.gform-button + button.gform-button {\n\tmargin-left: 14px;\n}\n\n.gform-tag.gform-sortable-list-item--field__label {\n\tbackground: var(--gform-admin-color-light-blue);\n\tborder: 1px solid var(--gform-admin-color-snuff);\n\tborder-radius: 3px;\n}\n\n.gform-sortable-list-item--field__info .gform-icon {\n\tposition: relative;\n\ttop: 2px;\n}\n\n.gform-sortable-list-item--field__info .gform-icon + .gform-tag {\n\tmargin-left: 14px;\n}\n"]}