UNPKG

@gravityforms/components

Version:

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

1 lines 11 kB
{"version":3,"sources":["avatar.css"],"names":[],"mappings":"AAEC;EACC,kBAAkB;EAClB,sBAAsB;CAgIvB;;EA9HC;GACC,sBAAsB;EACvB;;EAEA;GACC,sBAAgD;GAChD,uBAAuB;EACxB;;EAEA,gBAAgB;;EAEhB;GACC,SAAS;GACT,kBAAkB;GAClB,eAAe;GACf,gBAAgB;GAChB,UAAU;EAUX;;EARC;IACC,kBAAkB;IAClB,gBAAgB;GAKjB;;EAHC;KACC,kBAAkB;IACnB;;EAIF;GACC,kBAAkB;EACnB;;EAEA;GACC,gBAAgB;GAChB,kBAAkB;GAClB,iBAAiB;GACjB,gBAAgB;GAChB,kBAAkB;EAYnB;;EAVC;IACC,gBAAgB;IAChB,kBAAkB;IAClB,iBAAiB;IACjB,sBAAsB;IACtB,uBAAuB;IACvB,oBAAiB;OAAjB,iBAAiB;IACjB,kBAAkB;IAClB,gCAAgC;GACjC;;EAGD;GAEC,UAAU;EACX;;EAEA;GAEC,mBAAqD;GACrD,SAAS;GACT,aAAa;GACb,iBAAiB;GACjB,oBAAoB;GACpB,qBAAqB;GACrB,UAAU;GACV,kBAAkB;GAClB,wBAAwB;EACzB;;EAKC;IAEC,UAAU;GACX;;EAGD;GAGC,aAAa;EACd;;EAEA,aAAa;;EAEb;GACC,gBAAgB;GAChB,kBAAkB;GAClB,iBAAiB;GACjB,UAAU;GACV,kBAAkB;GAClB,wBAAwB;GACxB,UAAU;EAuBX;;EArBC;IAEC,UAAU;GACX;;EAEA;IACC,mBAAqD;IACrD,gBAAgB;IAChB,SAAS;IACT,kBAAkB;IAClB,iBAAiB;GAUlB;;EARC;KACC,iBAAiB;IAClB;;EAEA;KACC,gBAAgB;KAChB,UAAU;IACX;;EAMD;IAGC,UAAU;GACX;;CAIF,UAAU;;CAEV;EACC,gBAAgB;EAChB,cAAc;EACd,iBAAiB;CAsBlB;;CApBC;GACC,kBAAkB;EACnB;;CAEA;GACC,kBAAkB;EACnB;;CAEA;GAIC,gBAAgB;GAChB,iBAAiB;EAClB;;CAEA;GACC,eAAe;GACf,gBAAgB;EACjB;;CAGD;EACC,gBAAgB;EAChB,cAAc;EACd,iBAAiB;CAsBlB;;CApBC;GACC,iBAAiB;EAClB;;CAEA;GACC,kBAAkB;EACnB;;CAEA;GAIC,gBAAgB;GAChB,iBAAiB;EAClB;;CAEA;GACC,gBAAgB;GAChB,iBAAiB;EAClB;;CAGD;EACC,gBAAgB;EAChB,cAAc;EACd,iBAAiB;CAsBlB;;CApBC;GACC,eAAe;EAChB;;CAEA;GACC,iBAAiB;EAClB;;CAEA;GAIC,gBAAgB;GAChB,iBAAiB;EAClB;;CAEA;GACC,gBAAgB;GAChB,iBAAiB;EAClB;;CAGD;EACC,gBAAgB;EAChB,cAAc;EACd,iBAAiB;CAsBlB;;CApBC;GACC,kBAAkB;EACnB;;CAEA;GACC,eAAe;EAChB;;CAEA;GAIC,gBAAgB;GAChB,iBAAiB;EAClB;;CAEA;GACC,gBAAgB;GAChB,iBAAiB;EAClB;;CAGD;EACC,gBAAgB;EAChB,cAAc;EACd,iBAAiB;CAsBlB;;CApBC;GACC,iBAAiB;EAClB;;CAEA;GACC,iBAAiB;EAClB;;CAEA;GAIC,gBAAgB;GAChB,iBAAiB;EAClB;;CAEA;GACC,gBAAgB;GAChB,iBAAiB;EAClB;;CAGD;EACC,gBAAgB;EAChB,cAAc;EACd,iBAAiB;CAsBlB;;CApBC;GACC,kBAAkB;EACnB;;CAEA;GACC,kBAAkB;EACnB;;CAEA;GAIC,gBAAgB;GAChB,iBAAiB;EAClB;;CAEA;GACC,gBAAgB;GAChB,iBAAiB;EAClB;;CAGD;EACC,gBAAgB;EAChB,cAAc;EACd,iBAAiB;CAsBlB;;CApBC;GACC,kBAAkB;EACnB;;CAEA;GACC,iBAAiB;EAClB;;CAEA;GAIC,gBAAgB;GAChB,iBAAiB;EAClB;;CAEA;GACC,gBAAgB;GAChB,iBAAiB;EAClB;;CAGD,gBAAgB;;CAEhB;EACC,yBAA2D;EAC3D,4BAA4B;EAC5B,sBAAsB;EACtB,gBAAgB;EAChB,kBAAkB;EAClB,aAAa;EACb,iBAAiB;EACjB,kBAAkB;CAanB;;CAXC;GACC,gBAAgB;GAChB,sBAAgD;GAChD,kBAAkB;GAClB,sBAAsB;GACtB,WAAW;GACX,iBAAiB;GACjB,aAAa;GACb,oBAAoB;GACpB,kBAAkB;EACnB;;CAGD;EAEC,mBAAmB;EACnB,mBAAqD;EACrD,kBAAkB;EAClB,cAAqC;EACrC,aAAa;EACb,uBAAuB;EACvB,kBAAkB;CACnB;;CAEA;EACC,uIAAgD;EAChD,gBAAoD;EACpD,yBAAyB;EACzB,yBAAiB;KAAjB,sBAAiB;UAAjB,iBAAiB;CAClB;;CAEA;EACC,mBAAmB;EACnB,gBAA0C;EAC1C,sBAAgD;EAChD,kBAAkB;EAClB,uBAAmB;EAAnB,mBAAmB;EACnB,aAAa;EACb,qBAAqB;EACrB,sBAAsB;EACtB,uBAAuB;EACvB,gBAAgB;EAChB,kBAAkB;EAClB,UAAU;CAMX;;CAJC;GACC,gBAAgB;GAChB,iBAAiB;EAClB","file":"avatar.css","sourcesContent":[".gform-admin {\n\n\t.gform-avatar {\n\t\tborder-radius: 50%;\n\t\tbox-sizing: border-box;\n\n\t\t* {\n\t\t\tbox-sizing: border-box;\n\t\t}\n\n\t\t&.gform-avatar--has-border {\n\t\t\tborder: 4px solid var(--gform-admin-color-white);\n\t\t\tbox-sizing: content-box;\n\t\t}\n\n\t\t/* File Upload */\n\n\t\t.gform-file-upload__wrapper {\n\t\t\tborder: 0;\n\t\t\tborder-radius: 50%;\n\t\t\tcursor: pointer;\n\t\t\tmin-height: auto;\n\t\t\tz-index: 1;\n\n\t\t\t.file-drop {\n\t\t\t\tborder-radius: 50%;\n\t\t\t\tmin-height: auto;\n\n\t\t\t\t> .file-drop-target {\n\t\t\t\t\tborder-radius: 50%;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t.gform-file-upload {\n\t\t\tborder-radius: 50%;\n\t\t}\n\n\t\t.gform-file-upload__preview {\n\t\t\tblock-size: 100%;\n\t\t\tborder-radius: 50%;\n\t\t\tinline-size: 100%;\n\t\t\toverflow: hidden;\n\t\t\tposition: relative;\n\n\t\t\timg {\n\t\t\t\tblock-size: 100%;\n\t\t\t\tborder-radius: 50%;\n\t\t\t\tinline-size: 100%;\n\t\t\t\tinset-block-start: 50%;\n\t\t\t\tinset-inline-start: 50%;\n\t\t\t\tobject-fit: cover;\n\t\t\t\tposition: absolute;\n\t\t\t\ttransform: translate(-50%, -50%);\n\t\t\t}\n\t\t}\n\n\t\t.gform-file-upload__wrapper--has-preview,\n\t\t.gform-file-upload__preview {\n\t\t\tpadding: 0;\n\t\t}\n\n\t\t.gform-file-upload__icon,\n\t\t.gform-file-upload__wrapper--has-preview .gform-file-upload__icon {\n\t\t\tbackground: var(--gform-admin-color-anti-flash-white);\n\t\t\tborder: 0;\n\t\t\tdisplay: flex;\n\t\t\tfont-size: 1.5rem;\n\t\t\tinset-block-start: 0;\n\t\t\tinset-inline-start: 0;\n\t\t\topacity: 0;\n\t\t\tposition: absolute;\n\t\t\ttransition: opacity 0.2s;\n\t\t}\n\n\t\t&:hover,\n\t\t&:focus-within {\n\n\t\t\t.gform-file-upload__icon,\n\t\t\t.gform-file-upload__wrapper--has-preview .gform-file-upload__icon {\n\t\t\t\topacity: 1;\n\t\t\t}\n\t\t}\n\n\t\t.gform-file-upload__filetypes,\n\t\t.gform-file-upload__message,\n\t\t.gform-file-upload__buttons-wrapper {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\t/* Droplist */\n\n\t\t.gform-avatar__droplist {\n\t\t\tblock-size: 100%;\n\t\t\tborder-radius: 50%;\n\t\t\tinline-size: 100%;\n\t\t\topacity: 0;\n\t\t\tposition: absolute;\n\t\t\ttransition: opacity 0.2s;\n\t\t\tz-index: 1;\n\n\t\t\t&:hover,\n\t\t\t&:focus-within {\n\t\t\t\topacity: 1;\n\t\t\t}\n\n\t\t\t.gform-droplist__trigger {\n\t\t\t\tbackground: var(--gform-admin-color-anti-flash-white);\n\t\t\t\tblock-size: 100%;\n\t\t\t\tborder: 0;\n\t\t\t\tborder-radius: 50%;\n\t\t\t\tinline-size: 100%;\n\n\t\t\t\t.gform-button__icon {\n\t\t\t\t\tfont-size: 1.5rem;\n\t\t\t\t}\n\n\t\t\t\t&:focus {\n\t\t\t\t\tbox-shadow: none;\n\t\t\t\t\toutline: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&.gform-avatar--no-image-icon-hidden.gform-avatar--initials-hidden:not(.gform-avatar--has-image) {\n\n\t\t\t.gform-file-upload__icon,\n\t\t\t.gform-file-upload__wrapper--has-preview .gform-file-upload__icon,\n\t\t\t.gform-avatar__droplist {\n\t\t\t\topacity: 1;\n\t\t\t}\n\t\t}\n\t}\n\n\t/* Sizes */\n\n\t.gform-avatar--size-2xs {\n\t\tblock-size: 20px;\n\t\tflex: 0 0 20px;\n\t\tinline-size: 20px;\n\n\t\t.gform-avatar__no-image-icon {\n\t\t\tfont-size: 0.75rem;\n\t\t}\n\n\t\t.gform-avatar__initials {\n\t\t\tfont-size: 0.61rem;\n\t\t}\n\n\t\t.gform-file-upload__wrapper,\n\t\t.gform-file-upload__icon,\n\t\t.gform-avatar__no-image-icon,\n\t\t.gform-avatar__initials {\n\t\t\tblock-size: 20px;\n\t\t\tinline-size: 20px;\n\t\t}\n\n\t\t.gform-avatar__logo {\n\t\t\tblock-size: 8px;\n\t\t\tinline-size: 8px;\n\t\t}\n\t}\n\n\t.gform-avatar--size-xs {\n\t\tblock-size: 24px;\n\t\tflex: 0 0 24px;\n\t\tinline-size: 24px;\n\n\t\t.gform-avatar__no-image-icon {\n\t\t\tfont-size: 0.9rem;\n\t\t}\n\n\t\t.gform-avatar__initials {\n\t\t\tfont-size: 0.73rem;\n\t\t}\n\n\t\t.gform-file-upload__wrapper,\n\t\t.gform-file-upload__icon,\n\t\t.gform-avatar__no-image-icon,\n\t\t.gform-avatar__initials {\n\t\t\tblock-size: 24px;\n\t\t\tinline-size: 24px;\n\t\t}\n\n\t\t.gform-avatar__logo {\n\t\t\tblock-size: 10px;\n\t\t\tinline-size: 10px;\n\t\t}\n\t}\n\n\t.gform-avatar--size-sm {\n\t\tblock-size: 32px;\n\t\tflex: 0 0 32px;\n\t\tinline-size: 32px;\n\n\t\t.gform-avatar__no-image-icon {\n\t\t\tfont-size: 1rem;\n\t\t}\n\n\t\t.gform-avatar__initials {\n\t\t\tfont-size: 0.9rem;\n\t\t}\n\n\t\t.gform-file-upload__wrapper,\n\t\t.gform-file-upload__icon,\n\t\t.gform-avatar__no-image-icon,\n\t\t.gform-avatar__initials {\n\t\t\tblock-size: 32px;\n\t\t\tinline-size: 32px;\n\t\t}\n\n\t\t.gform-avatar__logo {\n\t\t\tblock-size: 12px;\n\t\t\tinline-size: 12px;\n\t\t}\n\t}\n\n\t.gform-avatar--size-md {\n\t\tblock-size: 40px;\n\t\tflex: 0 0 40px;\n\t\tinline-size: 40px;\n\n\t\t.gform-avatar__no-image-icon {\n\t\t\tfont-size: 1.25rem;\n\t\t}\n\n\t\t.gform-avatar__initials {\n\t\t\tfont-size: 1rem;\n\t\t}\n\n\t\t.gform-file-upload__wrapper,\n\t\t.gform-file-upload__icon,\n\t\t.gform-avatar__no-image-icon,\n\t\t.gform-avatar__initials {\n\t\t\tblock-size: 40px;\n\t\t\tinline-size: 40px;\n\t\t}\n\n\t\t.gform-avatar__logo {\n\t\t\tblock-size: 14px;\n\t\t\tinline-size: 14px;\n\t\t}\n\t}\n\n\t.gform-avatar--size-lg {\n\t\tblock-size: 48px;\n\t\tflex: 0 0 48px;\n\t\tinline-size: 48px;\n\n\t\t.gform-avatar__no-image-icon {\n\t\t\tfont-size: 1.5rem;\n\t\t}\n\n\t\t.gform-avatar__initials {\n\t\t\tfont-size: 1.1rem;\n\t\t}\n\n\t\t.gform-file-upload__wrapper,\n\t\t.gform-file-upload__icon,\n\t\t.gform-avatar__no-image-icon,\n\t\t.gform-avatar__initials {\n\t\t\tblock-size: 48px;\n\t\t\tinline-size: 48px;\n\t\t}\n\n\t\t.gform-avatar__logo {\n\t\t\tblock-size: 16px;\n\t\t\tinline-size: 16px;\n\t\t}\n\t}\n\n\t.gform-avatar--size-xl {\n\t\tblock-size: 56px;\n\t\tflex: 0 0 56px;\n\t\tinline-size: 56px;\n\n\t\t.gform-avatar__no-image-icon {\n\t\t\tfont-size: 1.65rem;\n\t\t}\n\n\t\t.gform-avatar__initials {\n\t\t\tfont-size: 1.25rem;\n\t\t}\n\n\t\t.gform-file-upload__wrapper,\n\t\t.gform-file-upload__icon,\n\t\t.gform-avatar__no-image-icon,\n\t\t.gform-avatar__initials {\n\t\t\tblock-size: 56px;\n\t\t\tinline-size: 56px;\n\t\t}\n\n\t\t.gform-avatar__logo {\n\t\t\tblock-size: 18px;\n\t\t\tinline-size: 18px;\n\t\t}\n\t}\n\n\t.gform-avatar--size-2xl {\n\t\tblock-size: 64px;\n\t\tflex: 0 0 64px;\n\t\tinline-size: 64px;\n\n\t\t.gform-avatar__no-image-icon {\n\t\t\tfont-size: 1.75rem;\n\t\t}\n\n\t\t.gform-avatar__initials {\n\t\t\tfont-size: 1.5rem;\n\t\t}\n\n\t\t.gform-file-upload__wrapper,\n\t\t.gform-file-upload__icon,\n\t\t.gform-avatar__no-image-icon,\n\t\t.gform-avatar__initials {\n\t\t\tblock-size: 64px;\n\t\t\tinline-size: 64px;\n\t\t}\n\n\t\t.gform-avatar__logo {\n\t\t\tblock-size: 20px;\n\t\t\tinline-size: 20px;\n\t\t}\n\t}\n\n\t/* Rest Avatar */\n\n\t.gform-avatar__inner {\n\t\tbackground-color: var(--gform-admin-color-anti-flash-white);\n\t\tbackground-position: 50% 50%;\n\t\tbackground-size: cover;\n\t\tblock-size: 100%;\n\t\tborder-radius: 50%;\n\t\tdisplay: flex;\n\t\tinline-size: 100%;\n\t\tposition: relative;\n\n\t\t&::after {\n\t\t\tblock-size: 100%;\n\t\t\tborder: 1px solid var(--gform-admin-color-black);\n\t\t\tborder-radius: 50%;\n\t\t\tbox-sizing: border-box;\n\t\t\tcontent: \"\";\n\t\t\tinline-size: 100%;\n\t\t\topacity: 0.08;\n\t\t\tpointer-events: none;\n\t\t\tposition: absolute;\n\t\t}\n\t}\n\n\t.gform-avatar__no-image-icon,\n\t.gform-avatar__initials {\n\t\talign-items: center;\n\t\tbackground: var(--gform-admin-color-anti-flash-white);\n\t\tborder-radius: 50%;\n\t\tcolor: var(--gform-admin-color-comet);\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\tposition: absolute;\n\t}\n\n\t.gform-avatar__initials {\n\t\tfont-family: var(--gform-admin-font-family-base);\n\t\tfont-weight: var(--gform-admin-font-weight-semibold);\n\t\ttext-transform: uppercase;\n\t\tuser-select: none;\n\t}\n\n\t.gform-avatar__logo {\n\t\talign-items: center;\n\t\tbackground: var(--gform-admin-color-white);\n\t\tborder: 2px solid var(--gform-admin-color-white);\n\t\tborder-radius: 50%;\n\t\tbox-sizing: initial;\n\t\tdisplay: flex;\n\t\tinset-block-end: -4px;\n\t\tinset-inline-end: -4px;\n\t\tjustify-content: center;\n\t\toverflow: hidden;\n\t\tposition: absolute;\n\t\tz-index: 2;\n\n\t\tsvg {\n\t\t\tblock-size: 100%;\n\t\t\tinline-size: 100%;\n\t\t}\n\t}\n}\n"]}