@gravityforms/components
Version:
UI components for use in Gravity Forms development. Both React and vanilla js flavors.
1 lines • 17.2 kB
Source Map (JSON)
{"version":3,"sources":["flyout.css"],"names":[],"mappings":"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","file":"flyout.css","sourcesContent":[".gform-admin {\n\n\t/* Flyout: WordPress UI Handling */\n\n\t.admin-bar & {\n\n\t\t.gform-flyout__mask--position-fixed.gform-flyout--offset-wpadmin-bar {\n\t\t\tblock-size: calc(100vh - var(--gform-admin-wp-admin-bar-offset) - var(--gform-admin-flyout-top-offset));\n\t\t\tinset-block-start: calc(var(--gform-admin-wp-admin-bar-offset) + var(--gform-admin-flyout-top-offset));\n\t\t}\n\t}\n\n\t.wp-admin & {\n\n\t\t.gform-flyout__mask--position-fixed.gform-flyout--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/* Flyout: Mask */\n\n\t.gform-flyout__mask {\n\t\talign-items: center;\n\t\tbackdrop-filter: blur(0);\n\t\tblock-size: calc(100% - var(--gform-admin-flyout-top-offset));\n\t\tdisplay: none;\n\t\tinline-size: 100%;\n\t\tinset-block-start: var(--gform-admin-flyout-top-offset);\n\t\tjustify-content: center;\n\t\topacity: 0;\n\t\ttransition: opacity 200ms ease-in-out;\n\n\t\t&.gform-flyout--anim-in-ready {\n\t\t\tdisplay: flex;\n\t\t}\n\n\t\t&.gform-flyout--anim-in-active {\n\t\t\topacity: 1;\n\t\t}\n\n\t\t&.gform-flyout__mask--position-fixed {\n\t\t\tposition: fixed;\n\t\t}\n\n\t\t&.gform-flyout__mask--position-absolute {\n\t\t\tposition: absolute;\n\t\t}\n\n\t\t&.gform-flyout__mask--theme-light {\n\t\t\tbackground-color: rgba(255, 255, 255, 0.65);\n\t\t}\n\n\t\t&.gform-flyout__mask--theme-dark {\n\t\t\tbackground-color: rgba(36, 39, 72, 0.75);\n\t\t}\n\n\t\t&.gform-flyout__mask--blur {\n\t\t\tbackdrop-filter: blur(8px);\n\t\t}\n\t\n\t\t&.gform-flyout--pinned {\n\t\t\tpointer-events: none;\n\t\n\t\t\t.gform-flyout {\n\t\t\t\tpointer-events: auto;\n\t\t\t}\n\t\t}\n\n\t\t&:not(.gform-flyout--offset-wpadmin-menu) {\n\t\t\tinset-inline-start: 0;\n\t\t}\n\t}\n\n\t/* Flyout */\n\n\t.gform-flyout {\n\t\tbackground-color: var(--gform-admin-color-white);\n\t\tblock-size: 100%;\n\t\tbox-shadow: var(--gform-admin-box-shadow-popup);\n\t\tbox-sizing: border-box;\n\t\tdisplay: none;\n\t\tflex-direction: column;\n\t\tinset-block-end: 0;\n\t\tinset-block-start: 0;\n\t\tinset-inline-start: 0;\n\t\topacity: 0;\n\t\tposition: absolute;\n\t\ttransition: opacity 200ms ease-in-out, width 200ms ease-in-out;\n\n\t\t&:hover {\n\n\t\t\t.gform-flyout__expand {\n\t\t\t\topacity: 1;\n\t\t\t}\n\t\t}\n\n\t\tp {\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t}\n\n\t\t* {\n\t\t\tbox-sizing: border-box;\n\t\t}\n\n\t\t&.gform-flyout--anim-in-ready {\n\t\t\tdisplay: flex;\n\t\t}\n\n\t\t&.gform-flyout--anim-in-active {\n\t\t\topacity: 1;\n\t\t}\n\n\t\t&.gform-flyout--fixed {\n\t\t\tposition: fixed;\n\t\t}\n\n\t\t&.gform-flyout--absolute {\n\t\t\tposition: absolute;\n\t\t}\n\n\t\t&.gform-flyout--hide-expander {\n\n\t\t\t.gform-flyout__expand {\n\t\t\t\topacity: 0;\n\t\t\t}\n\t\t}\n\n\t\t&.gform-flyout--right {\n\t\t\tinset-inline-end: 0;\n\t\t\tinset-inline-start: auto;\n\n\t\t\t.gform-flyout__expand-rail {\n\t\t\t\tinset-inline-start: -35px;\n\t\t\t}\n\n\t\t\t.gform-flyout__expand {\n\t\t\t\tinset-inline-start: -35px;\n\t\t\t}\n\n\t\t\t.gform-flyout__expand-icon {\n\t\t\t\ttransform: rotate(90deg);\n\t\t\t}\n\n\t\t\t.gform-flyout__pinned-drag-handle-wrapper {\n\t\t\t\tinset-inline-start: 0;\n\t\t\t}\n\t\t}\n\n\t\t&.gform-flyout--left {\n\n\t\t\t.gform-flyout__expand-rail {\n\t\t\t\tinset-inline-end: -35px;\n\t\t\t}\n\n\t\t\t.gform-flyout__expand {\n\t\t\t\tinset-inline-end: -35px;\n\t\t\t}\n\n\t\t\t.gform-flyout__expand-icon {\n\t\t\t\ttransform: rotate(-90deg);\n\t\t\t}\n\n\t\t\t.gform-flyout__pinned-drag-handle-wrapper {\n\t\t\t\tinset-inline-end: 0;\n\t\t\t}\n\t\t}\n\n\t\t&.gform-flyout--dragging {\n\t\t\ttransition: none;\n\t\t}\n\n\t\t&.gform-flyout--expanded {\n\n\t\t\t&.gform-flyout--right {\n\n\t\t\t\t.gform-flyout__expand-icon {\n\t\t\t\t\ttransform: rotate(-90deg);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&.gform-flyout--left {\n\n\t\t\t\t.gform-flyout__expand-icon {\n\t\t\t\t\ttransform: rotate(90deg);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&.gform-flyout--scroll-simplebar {\n\n\t\t\t.gform-flyout__simplebar {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex: 1;\n\t\t\t\tmax-block-size: 100%;\n\t\t\t\toverflow-y: auto;\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 flyout'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 > .simplebar-content-wrapper {\n\n\t\t\t\t\t& > .simplebar-content {\n\t\t\t\t\t\tmin-block-size: 100%;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.gform-flyout__body {\n\t\t\t\tblock-size: auto;\n\t\t\t}\n\t\t}\n\n\t\t&.gform-flyout--scroll-native {\n\n\t\t\t&.gform-flyout--header-footer-fixed {\n\n\t\t\t\t.gform-flyout__body {\n\t\t\t\t\toverflow-y: auto;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:where(:not(.gform-flyout--header-footer-fixed)) {\n\t\t\t\toverflow-y: auto;\n\n\t\t\t\t.gform-flyout__body {\n\t\t\t\t\tblock-size: auto;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t/* CASE: specific to HTML component */\n\t\t&:not([class*=\"gform-flyout--scroll-\"]) {\n\n\t\t\t.gform-flyout__body {\n\t\t\t\toverflow-y: auto;\n\t\t\t}\n\t\t}\n\n\t\t&.gform-flyout--header-fixed {\n\n\t\t\t.gform-flyout__head {\n\t\t\t\talign-items: center;\n\t\t\t\tbackground-color: var(--gform-admin-color-white);\n\t\t\t\tinset-block-start: 0;\n\t\t\t\tpadding: var(--gform-admin-spacer-4);\n\t\t\t\tposition: sticky;\n\t\t\t\tz-index: 5;\n\t\t\t}\n\n\t\t\t.gform-flyout__close.gform-button--size-xs,\n\t\t\t.gform-flyout__expander.gform-button--size-xs {\n\t\t\t\tinset-block-start: 0;\n\t\t\t}\n\n\t\t\t.gform-flyout__body {\n\n\t\t\t\t@media (--gform-admin-viewport-md-down) {\n\t\t\t\t\tpadding: var(--gform-admin-spacer-4);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&.gform-flyout--footer-fixed {\n\n\t\t\t.gform-flyout__footer {\n\t\t\t\talign-items: center;\n\t\t\t\tbackground-color: var(--gform-admin-color-white);\n\t\t\t\tinset-block-end: 0;\n\t\t\t\tpadding: var(--gform-admin-spacer-4);\n\t\t\t\tposition: sticky;\n\t\t\t\tz-index: 5;\n\n\t\t\t\t&::before {\n\t\t\t\t\tbackground-color: var(--gform-admin-color-white-lilac);\n\t\t\t\t\tblock-size: 0.0625rem;\n\t\t\t\t\tcontent: \"\";\n\t\t\t\t\tinline-size: 100%;\n\t\t\t\t\tinset-block-start: 0;\n\t\t\t\t\tinset-inline-start: 0;\n\t\t\t\t\tposition: absolute;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&.gform-flyout--divider {\n\n\t\t\t.gform-flyout__head {\n\n\t\t\t\t&::after {\n\t\t\t\t\tbackground-color: var(--gform-admin-color-white-lilac);\n\t\t\t\t\tblock-size: 0.0625rem;\n\t\t\t\t\tcontent: \"\";\n\t\t\t\t\tinline-size: 100%;\n\t\t\t\t\tinset-block-end: 0;\n\t\t\t\t\tinset-inline-start: 0;\n\t\t\t\t\tposition: absolute;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t.gform-flyout__head {\n\t\t\talign-items: flex-start;\n\t\t\tdisplay: flex;\n\t\t\tflex: none;\n\t\t\tgap: 1rem;\n\t\t\tjustify-content: space-between;\n\t\t\tmin-block-size: 62px;\n\t\t\tpadding-block: var(--gform-admin-spacer-8);\n\t\t\tpadding-inline: var(--gform-admin-spacer-10);\n\t\t\tposition: relative;\n\t\t}\n\n\t\t.gform-flyout__head-left {\n\t\t\talign-self: center;\n\t\t\tflex: 1 1 auto;\n\t\t}\n\n\t\t.gform-flyout__head-right {\n\t\t\talign-items: center;\n\t\t\tdisplay: flex;\n\t\t\tgap: 0.5rem;\n\t\t}\n\n\t\t.gform-flyout__close.gform-button--size-xs,\n\t\t.gform-flyout__expander.gform-button--size-xs {\n\t\t\talign-items: center;\n\t\t\tblock-size: 1.625rem;\n\t\t\tborder: 1px solid var(--gform-admin-color-snuff);\n\t\t\tdisplay: flex;\n\t\t\tfont-size: 1.25rem;\n\t\t\tinline-size: 1.625rem;\n\t\t\ttransition: var(--gform-admin-transition-cl-button-focus);\n\t\t\tz-index: 5;\n\n\t\t\t&:hover,\n\t\t\t&:focus {\n\t\t\t\tborder-color: var(--gform-admin-color-snuff);\n\t\t\t}\n\n\t\t\t.gform-button__icon {\n\t\t\t\tfont-size: 1.875rem;\n\t\t\t}\n\n\t\t\t&.gform-button--simplified {\n\t\t\t\tblock-size: 1.875rem;\n\t\t\t\tborder: 1px solid transparent;\n\t\t\t\tinline-size: 1.875rem;\n\t\t\t\ttransition: var(--gform-admin-transition-button);\n\n\t\t\t\t&:hover {\n\t\t\t\t\tborder-color: var(--gform-admin-color-white);\n\t\t\t\t}\n\n\t\t\t\t&:focus {\n\t\t\t\t\tborder-color: var(--gform-admin-color-blue-ribbon);\n\t\t\t\t}\n\n\t\t\t\t.gform-button__icon {\n\t\t\t\t\tfont-size: 1.125rem;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t.gform-flyout__expand-rail {\n\t\t\tblock-size: 56px;\n\t\t\tinline-size: 35px;\n\t\t\tinset-block-start: 50%;\n\t\t\tmargin-block-start: -28px;\n\t\t\tposition: absolute;\n\t\t}\n\n\t\t.gform-flyout__expand {\n\t\t\talign-items: center;\n\t\t\tbackground: var(--gform-admin-color-white);\n\t\t\tblock-size: 56px;\n\t\t\tborder: 1px solid var(--gform-admin-color-white-lilac);\n\t\t\tborder-radius: 19px;\n\t\t\tbox-shadow: var(--gform-admin-box-shadow-popup);\n\t\t\tcolor: var(--gform-admin-color-port);\n\t\t\tcursor: pointer;\n\t\t\tdisplay: flex;\n\t\t\tinline-size: 19px;\n\t\t\tinset-block-start: 50%;\n\t\t\tjustify-content: center;\n\t\t\tmargin-block-start: -28px;\n\t\t\topacity: 0;\n\t\t\tposition: absolute;\n\t\t\ttransition: opacity 0.15s ease, transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease;\n\n\t\t\t&:focus {\n\t\t\t\tborder-color: var(--gform-admin-color-snuff);\n\t\t\t\topacity: 1;\n\t\t\t\toutline: none;\n\n\t\t\t\t.gform-flyout__expand-icon {\n\t\t\t\t\tcolor: var(--gform-admin-color-gravity-blue);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:hover {\n\n\t\t\t\t.gform-flyout__expand-icon {\n\t\t\t\t\tcolor: var(--gform-admin-color-gravity-blue);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t.gform-flyout__expand-icon {\n\t\t\talign-items: center;\n\t\t\tblock-size: 15px;\n\t\t\tcolor: var(--gform-admin-color-port);\n\t\t\tdisplay: flex;\n\t\t\tfont-size: 1rem;\n\t\t\tinline-size: 100%;\n\t\t\tjustify-content: center;\n\t\t\tposition: relative;\n\t\t\ttransition: color 300ms ease;\n\t\t}\n\t}\n\n\t/* Flyout: Title */\n\n\t.gform-flyout__title {\n\t\tcolor: var(--gform-admin-color-port);\n\t\tfont-family: var(--gform-admin-font-family-base);\n\t\tfont-size: var(--gform-admin-font-size-base-old);\n\t\tfont-weight: var(--gform-common-font-weight-medium);\n\t\tline-height: 18px;\n\t\tmargin-block: 0 12px;\n\t\tmargin-inline: 0;\n\t}\n\n\t.gform-flyout--no-description {\n\n\t\t.gform-flyout__title {\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\n\t/* Flyout: Description */\n\n\t.gform-flyout__desc {\n\t\tcolor: var(--gform-admin-color-port);\n\t\tfont-family: var(--gform-admin-font-family-base);\n\t\tfont-size: var(--gform-admin-font-size-base-old);\n\t}\n\n\t/* Flyout: Body */\n\n\t.gform-flyout__body {\n\t\tblock-size: 100%;\n\t\tcolor: var(--gform-admin-color-port);\n\t\tfont-family: var(--gform-admin-font-family-base);\n\t\tfont-size: var(--gform-admin-font-size-base-old);\n\t\tpadding-block: var(--gform-admin-spacer-8);\n\t\tpadding-inline: var(--gform-admin-spacer-10);\n\n\t\t&:focus-within {\n\n\t\t\t.gform-flyout__expand {\n\t\t\t\topacity: 1;\n\t\t\t}\n\t\t}\n\n\t\t.gform-flyout__simplebar {\n\n\t\t\t& > .simplebar-wrapper {\n\t\t\t\tblock-size: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t/* Flyout: Footer */\n\n\t.gform-flyout__footer {\n\t\talign-items: flex-start;\n\t\tdisplay: flex;\n\t\tflex: none;\n\t\tgap: 1rem;\n\t\tjustify-content: space-between;\n\t\tmin-block-size: 62px;\n\t\tpadding-block: var(--gform-admin-spacer-8);\n\t\tpadding-inline: var(--gform-admin-spacer-10);\n\t\tposition: relative;\n\t}\n\n\t.gform-flyout__footer-left,\n\t.gform-flyout__footer-right {\n\t\talign-items: center;\n\t\tdisplay: flex;\n\t\tgap: 0.5rem;\n\t}\n\n\t.gform-flyout__footer-right {\n\t\tmargin-inline-start: auto;\n\t}\n\n\t/* Flyout: Pinned Drag Handle */\n\n\t.gform-flyout__pinned-drag-handle-wrapper {\n\t\tbackground-color: var(--gform-admin-color-snuff);\n\t\tblock-size: 100%;\n\t\tinline-size: 3px;\n\t\tinset-block-end: 0;\n\t\tinset-block-start: 0;\n\t\tpointer-events: auto;\n\t\tposition: absolute;\n\t\ttransition: 200ms ease-in-out;\n\n\t\t&:hover {\n\t\t\tbackground-color: var(--gform-admin-color-santas);\n\t\t}\n\n\t\t&:has(:focus-visible),\n\t\t&:has([data-dragging=\"true\"]),\n\t\t&:has([data-dragging=\"true\"]):hover {\n\t\t\tbackground-color: var(--gform-admin-color-blue-ribbon);\n\t\t}\n\t}\n\n\t.gform-flyout__pinned-drag-handle {\n\t\tbackground-color: transparent;\n\t\tblock-size: 100%;\n\t\tcursor: col-resize;\n\t\tinset: 0 -3px;\n\t\topacity: 0;\n\t\tposition: absolute;\n\t\ttransition: 200ms ease-in-out;\n\t\t\n\t\t&:hover {\n\t\t\tbackground-color: var(--gform-admin-color-santas);\n\t\t\topacity: 0.26;\n\t\t}\n\n\t\t&:focus-visible,\n\t\t&[data-dragging=\"true\"],\n\t\t&[data-dragging=\"true\"]:hover {\n\t\t\tbackground-color: var(--gform-admin-color-blue-ribbon);\n\t\t\topacity: 0.26;\n\t\t}\n\t}\n}\n\nhtml[dir=\"rtl\"] .gform-admin {\n\n\t.gform-flyout {\n\n\t\t&.gform-flyout--right {\n\n\t\t\t.gform-flyout__expand-icon {\n\t\t\t\ttransform: rotate(-90deg);\n\t\t\t}\n\t\t}\n\n\t\t&.gform-flyout--left {\n\n\t\t\t.gform-flyout__expand-icon {\n\t\t\t\ttransform: rotate(90deg);\n\t\t\t}\n\t\t}\n\n\t\t&.gform-flyout--expanded {\n\n\t\t\t&.gform-flyout--right {\n\n\t\t\t\t.gform-flyout__expand-icon {\n\t\t\t\t\ttransform: rotate(90deg);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&.gform-flyout--left {\n\n\t\t\t\t.gform-flyout__expand-icon {\n\t\t\t\t\ttransform: rotate(-90deg);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n"]}