@gravityforms/components
Version:
UI components for use in Gravity Forms development. Both React and vanilla js flavors.
1 lines • 12.1 kB
Source Map (JSON)
{"version":3,"sources":["dialog.css"],"names":[],"mappings":"AAEC,kCAAkC;;CAIjC;GACC,gEAAgE;GAChE,yDAAyD;EAC1D;;CAKA;GACC,iEAAiE;EAClE;;CAGD,iBAAiB;;CAEjB;EACC,wBAAwB;EACxB,gBAAgB;EAChB,sBAAsB;EACtB,aAAa;EACb,iBAAiB;EACjB,uBAAuB;EACvB,UAAU;EACV,MAAM;EACN,qCAAqC;CAmDtC;;CAjDC;GACC,sBAAsB;EACvB;;CAEA;GACC,aAAa;GACb,UAAU;EACX;;CAEA;GACC,UAAU;EAKX;;CAHC;IACC,mBAAmB;GACpB;;CAGD;GACC,eAAe;EAChB;;CAEA;GACC,kBAAkB;EACnB;;CAEA;GACC,qCAAqC;EACtC;;CAEA;GACC,wCAAwC;EACzC;;CAEA;GACC,0BAA0B;EAC3B;;CAEA;GACC,qBAAqB;EACtB;;CAEA;GACC,uBAAuB;GACvB,yBAAyB;EAC1B;;CAEA;GACC,sBAA0C;EAC3C;;CAFA;GACC,sBAA0C;EAC3C;;CAFA;GACC,sBAA0C;EAC3C;;CAGD,4BAA4B;;CAI3B;GACC,gBAAgB;EAgDjB;;CA9CC;IACC,gBAAgB;IAChB,sBAA0C;GAoB3C;;CAlBC;;;;;KAKC;;CAGA;MACC,wBAAwB;MACxB,aAAa;KAMd;;CAJC;OACC,aAAa;OACb,iBAAiB;MAClB;;CASD;;;;;MAKC;;CAGA;OACC,4BAA4B;MAC7B;;CAKH;IACC,YAAY;GACb;;CAKA;IACC,gBAAgB;IAChB,gCAA2B;IAA3B,2BAA2B;IAC3B,UAAU;GAMX;;CAJC;KACC,oBAAoB;KACpB,uBAAuB;IACxB;;CAIF;GACC,aAAa;GACb,iBAAiB;EAMlB;;CAJC;IACC,SAAS;IACT,UAAU;GACX;;CAMD;GACC,gBAAgB;EACjB;;CAIC;IACC,oBAAoB;IACpB,gBAAgB;GACjB;;CAIF;;EAEC,qCAAqC;EACrC,gBAAgB;CACjB;;CAEA,WAAW;;CAEX;EACC,gBAA0C;EAC1C,yBAAqD;EACrD,wNAAwN;EACxN,gBAAgB;EAChB,uBAAuB;EACvB,kBAAkB;EAClB,sBAAsB;EACtB,uCAAuC;EACvC,wBAAwB;CA0LzB;;CAxLC;GACC,YAAY;GACZ,gBAAgB;GAChB,YAAY;GACZ,eAAe;GACf,UAAU;GACV,WAAW;EACZ;;CAEA;GACC,UAAU;GACV,kBAAkB;GAClB,SAAS;GACT,mBAAmB;GACnB,qDAAqD;EAOtD;;CALC;IACC,UAAU;IACV,MAAM;IACN,mBAAmB;GACpB;;CAGD;GACC,kBAAkB;GAClB,wLAA8C;EAS/C;;CAPC;IACC,cAAwC;GACzC;;CAEA;IACC,iBAAiB;GAClB;;CAGD;GACC,sBAAsB;GACtB,kBAAkB;GAClB,SAAS;EAqBV;;CAnBC;IACC,gBAAgB;IAChB,eAAe;GAKhB;;CAHC;KACC,MAAM;IACP;;CAGD;IACC,cAAc;IACd,sBAAsB;IACtB,SAAS;IACT,aAAa;GAKd;;CAHC;KACC,MAAM;IACP;;CAIF;GACC,gBAAgB;GAChB,YAAY;EAMb;;CAJC;IACC,WAAqC;IACrC,eAAe;GAChB;;CAGD;GACC,yBAAyB;EAC1B;;CAEA;GACC,cAAqC;EACtC;;CAIC;IACC,gCAAkE;IAClE,oBAAoB;GACrB;;CAEA;IACC,kBAAkB;GACnB;;CAEA;IACC,uBAAuB;GACxB;;CAGD;GACC,cAAoC;GACpC,uIAAgD;GAChD,oBAAoB;GACpB,gBAAmD;GACnD,mBAAoB;GAApB,oBAAoB;GACpB,kBAAkB;GAClB,wBAAwB;GACxB,kBAAkB;EAWnB;;CATC;IACC,wBAAwB;IACxB,0BAA0B;GAC3B;;CAEA;IACC,sBAAsB;IACtB,0BAA0B;GAC3B;;CAKA;IACC,iBAAiB;IACjB,gBAAqD;GACtD;;CAGD;GACC,cAAqC;GACrC,qBAAqB;GACrB,uIAAgD;GAChD,mBAAmB;GACnB,gBAAmD;GACnD,mBAAoB;GAApB,oBAAoB;GACpB,qBAAqB;GACrB,wBAAwB;GACxB,kBAAkB;EAKnB;;CAHC;IACC,0BAA0B;GAC3B;;CAGD;GACC,iBAAiB;GACjB,qBAAqB;GACrB,kBAAkB;GAClB,QAAQ;EACT;;CAEA;GACC,uBAAuB;GACvB,iBAAiB;GACjB,iBAAiB;EASlB;;CAPC;IACC,iBAAiB;GAClB;;CAEA;IACC,wBAAwB;GACzB;;CAGD;GAEC,cAAoC;GACpC,uIAAgD;GAChD,mBAAmB;GACnB,qBAAqB;EACtB;;CAEA;GACC,mBAAmB;GACnB,aAAa;GACb,iBAAiB;GACjB,WAAW;EACZ;;CAEA;GACC,yBAAyB;EAK1B;;CAHC;IACC,iBAAiB;GAClB;;CAIF;EACC,0BAA0B;EAC1B,iBAAiB;EACjB,cAAc;EACd,UAAU;CAMX;;CAJC;GACC,SAAS;GACT,UAAU;EACX","file":"dialog.css","sourcesContent":[".gform-admin {\n\n\t/* Dialog: WordPress UI Handling */\n\n\t.admin-bar & {\n\n\t\t.gform-dialog__mask--position-fixed.gform-dialog--offset-wpadmin-bar {\n\t\t\tblock-size: calc(100vh - var(--gform-admin-wp-admin-bar-offset));\n\t\t\tinset-block-start: var(--gform-admin-wp-admin-bar-offset);\n\t\t}\n\t}\n\n\t.wp-admin & {\n\n\t\t.gform-dialog__mask--position-fixed.gform-dialog--offset-wpadmin-menu {\n\t\t\tinline-size: calc(100% - var(--gform-admin-wp-admin-menu-offset));\n\t\t}\n\t}\n\n\t/* Dialog: Mask */\n\n\t.gform-dialog__mask {\n\t\talign-items: safe center;\n\t\tblock-size: 100%;\n\t\tbox-sizing: border-box;\n\t\tdisplay: none;\n\t\tinline-size: 100%;\n\t\tjustify-content: center;\n\t\topacity: 0;\n\t\ttop: 0;\n\t\ttransition: opacity 200ms ease-in-out;\n\n\t\t* {\n\t\t\tbox-sizing: border-box;\n\t\t}\n\n\t\t&.gform-dialog--anim-in-ready {\n\t\t\tdisplay: flex;\n\t\t\topacity: 0;\n\t\t}\n\n\t\t&.gform-dialog--anim-in-active {\n\t\t\topacity: 1;\n\n\t\t\t.gform-dialog {\n\t\t\t\ttransform: scale(1);\n\t\t\t}\n\t\t}\n\n\t\t&.gform-dialog__mask--position-fixed {\n\t\t\tposition: fixed;\n\t\t}\n\n\t\t&.gform-dialog__mask--position-absolute {\n\t\t\tposition: absolute;\n\t\t}\n\n\t\t&.gform-dialog__mask--theme-light {\n\t\t\tbackground: rgba(255, 255, 255, 0.65);\n\t\t}\n\n\t\t&.gform-dialog__mask--theme-dark {\n\t\t\tbackground-color: rgba(36, 39, 72, 0.75);\n\t\t}\n\n\t\t&.gform-dialog__mask--blur {\n\t\t\tbackdrop-filter: blur(8px);\n\t\t}\n\n\t\t&:not(.gform-dialog--offset-wpadmin-menu) {\n\t\t\tinset-inline-start: 0;\n\t\t}\n\n\t\t&.gform-dialog--alignment-top {\n\t\t\talign-items: flex-start;\n\t\t\tpadding-block: 110px 50px;\n\t\t}\n\n\t\t&:not(:has(.gform-dialog--container)) {\n\t\t\tpadding-block: var(--gform-admin-spacer-5);\n\t\t}\n\t}\n\n\t/* Dialog: Scroll Handling */\n\n\t.gform-dialog--scroll-simplebar {\n\n\t\t&.gform-dialog--scrollbar-location-mask {\n\t\t\tpadding-block: 0;\n\n\t\t\t.gform-dialog__simplebar {\n\t\t\t\tblock-size: 100%;\n\t\t\t\tpadding-block: var(--gform-admin-spacer-5);\n\n\t\t\t\t/*\n\t\t\t\tNOTE:\n\t\t\t\tThis sucks, but is necessary due to bugs with SimpleBar's classNames prop.\n\t\t\t\tWe need to target the dialog's implementation specifically as there can be\n\t\t\t\tother instances of SimpleBar used within child components.\n\t\t\t\t*/\n\t\t\t\t& > .simplebar-wrapper > .simplebar-mask > .simplebar-offset {\n\n\t\t\t\t\t& > .simplebar-content-wrapper {\n\t\t\t\t\t\talign-items: safe center;\n\t\t\t\t\t\tdisplay: flex;\n\n\t\t\t\t\t\t& > .simplebar-content {\n\t\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t\t\tinline-size: 100%;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&.gform-dialog--alignment-top {\n\n\t\t\t\t.gform-dialog__simplebar {\n\t\n\t\t\t\t\t/*\n\t\t\t\t\tNOTE:\n\t\t\t\t\tThis sucks, but is necessary due to bugs with SimpleBar's classNames prop.\n\t\t\t\t\tWe need to target the dialog's implementation specifically as there can be\n\t\t\t\t\tother instances of SimpleBar used within child components.\n\t\t\t\t\t*/\n\t\t\t\t\t& > .simplebar-wrapper > .simplebar-mask > .simplebar-offset {\n\t\n\t\t\t\t\t\t& > .simplebar-content-wrapper {\n\t\t\t\t\t\t\talign-items: safe flex-start;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.gform-dialog {\n\t\t\t\tmargin: auto;\n\t\t\t}\n\t\t}\n\n\t\t&.gform-dialog--scrollbar-location-content {\n\n\t\t\t& > .gform-dialog {\n\t\t\t\tblock-size: 100%;\n\t\t\t\tmax-block-size: fit-content;\n\t\t\t\tpadding: 0;\n\n\t\t\t\t.gform-dialog__simplebar {\n\t\t\t\t\tmax-block-size: 100%;\n\t\t\t\t\tpadding: 14px 25px 25px;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t.gform-dialog__simplebar {\n\t\t\tdisplay: flex;\n\t\t\tinline-size: 100%;\n\n\t\t\t.simplebar-content-wrapper {\n\t\t\t\tborder: 0;\n\t\t\t\toutline: 0;\n\t\t\t}\n\t\t}\n\t}\n\n\t.gform-dialog--scroll-native {\n\n\t\t&.gform-dialog--scrollbar-location-mask {\n\t\t\toverflow-y: auto;\n\t\t}\n\n\t\t&.gform-dialog--scrollbar-location-content {\n\n\t\t\t& > .gform-dialog {\n\t\t\t\tmax-block-size: 100%;\n\t\t\t\toverflow-y: auto;\n\t\t\t}\n\t\t}\n\t}\n\n\t.gform-dialog__mask:not([class*=\"gform-flyout--scroll-\"]) {\n\n\t\t/* CASE: specific to HTML component */\n\t\toverflow-y: auto;\n\t}\n\n\t/* Dialog */\n\n\t.gform-dialog {\n\t\tbackground: var(--gform-admin-color-white);\n\t\tborder: 1px solid var(--gform-admin-color-light-blue);\n\t\tbox-shadow: 0 0 1px rgba(18, 25, 97, 0.24), 0 24px 24px rgba(18, 25, 97, 0.03), 0 2px 2px rgba(18, 25, 97, 0.03), 0 4px 4px rgba(18, 25, 97, 0.03), 0 8px 8px rgba(18, 25, 97, 0.03), 0 16px 16px rgba(18, 25, 97, 0.03);\n\t\tmax-width: 600px;\n\t\tpadding: 14px 25px 25px;\n\t\tposition: relative;\n\t\ttransform: scale(0.95);\n\t\ttransition: transform 200ms ease-in-out;\n\t\twidth: calc(100% - 40px);\n\n\t\t&.gform-dialog--container {\n\t\t\tborder: none;\n\t\t\tbox-shadow: none;\n\t\t\theight: 100%;\n\t\t\tmax-width: none;\n\t\t\tpadding: 0;\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t&.gform-dialog--animated {\n\t\t\topacity: 0;\n\t\t\tposition: relative;\n\t\t\ttop: 20px;\n\t\t\ttransform: scale(1);\n\t\t\ttransition: transform 600ms, opacity 600ms, top 600ms;\n\n\t\t\t&.gform-dialog--animate-reveal {\n\t\t\t\topacity: 1;\n\t\t\t\ttop: 0;\n\t\t\t\ttransform: scale(1);\n\t\t\t}\n\t\t}\n\n\t\t&.gform-dialog__theme--cosmos {\n\t\t\tborder-radius: 3px;\n\t\t\tbox-shadow: var(--gform-admin-box-shadow-mega);\n\n\t\t\t.gform-dialog__content {\n\t\t\t\tcolor: var(--gform-admin-color-grey-500);\n\t\t\t}\n\n\t\t\t.gform-dialog__footer {\n\t\t\t\tpadding-top: 32px;\n\t\t\t}\n\t\t}\n\n\t\t.gform-dialog__close {\n\t\t\tinset-inline-end: 25px;\n\t\t\tposition: absolute;\n\t\t\ttop: 25px;\n\n\t\t\t&.gform-button--size-xs {\n\t\t\t\theight: 1.875rem;\n\t\t\t\twidth: 1.875rem;\n\n\t\t\t\t.gform-button__icon {\n\t\t\t\t\ttop: 0;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&.gform-button--size-md {\n\t\t\t\theight: 2.5rem;\n\t\t\t\tinset-inline-end: 20px;\n\t\t\t\ttop: 20px;\n\t\t\t\twidth: 2.5rem;\n\n\t\t\t\t.gform-button__icon {\n\t\t\t\t\ttop: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t.gform-dialog__close.gform-button--circular.gform-dialog__close--plain {\n\t\t\tbackground: none;\n\t\t\tborder: none;\n\n\t\t\t.gform-button__icon {\n\t\t\t\tcolor: var(--gform-admin-color-white);\n\t\t\t\tfont-size: 2rem;\n\t\t\t}\n\t\t}\n\n\t\t.gform-dialog__close.gform-button--unstyled.gform-button--size-md {\n\t\t\tjustify-content: flex-end;\n\t\t}\n\n\t\t.gform-dialog__close.gform-button--unstyled .gform-button__icon {\n\t\t\tcolor: var(--gform-admin-color-comet);\n\t\t}\n\n\t\t.gform-dialog__head {\n\n\t\t\t&.gform-dialog__head--with-divider {\n\t\t\t\tborder-bottom: 1px solid var(--gform-admin-color-secondary-border);\n\t\t\t\tpadding-bottom: 15px;\n\t\t\t}\n\n\t\t\t.gform-indicator {\n\t\t\t\tposition: absolute;\n\t\t\t}\n\n\t\t\t.gform-indicator--confirm {\n\t\t\t\tinset-block-start: 26px;\n\t\t\t}\n\t\t}\n\n\t\t.gform-dialog__title {\n\t\t\tcolor: var(--gform-admin-color-port);\n\t\t\tfont-family: var(--gform-admin-font-family-base);\n\t\t\tfont-size: 1.1875rem;\n\t\t\tfont-weight: var(--gform-common-font-weight-medium);\n\t\t\tline-height: initial;\n\t\t\tmargin: 10px 0 0 0;\n\t\t\tpadding-inline-end: 30px;\n\t\t\tposition: relative;\n\n\t\t\t&.gform-dialog__title--has-icon {\n\t\t\t\tpadding-block-start: 6px;\n\t\t\t\tpadding-inline-start: 50px;\n\t\t\t}\n\n\t\t\t&.gform-dialog__title--icon-type-confirm {\n\t\t\t\tpadding-block-start: 0;\n\t\t\t\tpadding-inline-start: 30px;\n\t\t\t}\n\t\t}\n\n\t\t&.gform-dialog--title-size-md {\n\n\t\t\t.gform-dialog__title {\n\t\t\t\tfont-size: 1.5rem;\n\t\t\t\tfont-weight: var(--gform-common-font-weight-semibold);\n\t\t\t}\n\t\t}\n\n\t\t.gform-dialog__description {\n\t\t\tcolor: var(--gform-admin-color-comet);\n\t\t\tdisplay: inline-block;\n\t\t\tfont-family: var(--gform-admin-font-family-base);\n\t\t\tfont-size: 0.875rem;\n\t\t\tfont-weight: var(--gform-common-font-weight-normal);\n\t\t\tline-height: initial;\n\t\t\tmargin: 0.75rem 0 0 0;\n\t\t\tpadding-inline-end: 30px;\n\t\t\tposition: relative;\n\n\t\t\t&.gform-dialog__title--has-icon {\n\t\t\t\tpadding-inline-start: 50px;\n\t\t\t}\n\t\t}\n\n\t\t.gform-dialog__title-icon {\n\t\t\tfont-size: 1.5rem;\n\t\t\tinset-inline-start: 0;\n\t\t\tposition: absolute;\n\t\t\ttop: 3px;\n\t\t}\n\n\t\t.gform-dialog__content {\n\t\t\tpadding-inline-start: 0;\n\t\t\tpadding-bottom: 0;\n\t\t\tpadding-top: 10px;\n\n\t\t\t&.gform-dialog__content--with-divider {\n\t\t\t\tpadding-top: 15px;\n\t\t\t}\n\n\t\t\t&.gform-dialog__content--pad-content {\n\t\t\t\tpadding-inline-end: 30px;\n\t\t\t}\n\t\t}\n\n\t\t.gform-dialog__content,\n\t\t.gform-dialog__content p {\n\t\t\tcolor: var(--gform-admin-color-port);\n\t\t\tfont-family: var(--gform-admin-font-family-base);\n\t\t\tfont-size: 0.875rem;\n\t\t\tline-height: 1.188rem;\n\t\t}\n\n\t\t.gform-dialog__footer {\n\t\t\talign-items: center;\n\t\t\tdisplay: flex;\n\t\t\tpadding-top: 20px;\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t.gform-dialog__confirm {\n\t\t\tmargin-inline-start: 12px;\n\n\t\t\t&.gform-button--icon-leading .gform-button__icon {\n\t\t\t\tfont-size: 1.5rem;\n\t\t\t}\n\t\t}\n\t}\n\n\t.gform-dialog--full-screen {\n\t\theight: calc(100vh - 40px);\n\t\tmax-width: 1280px;\n\t\toverflow: auto;\n\t\tpadding: 0;\n\n\t\t.gform-dialog__content {\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t}\n\t}\n}\n"]}