@gravityforms/components
Version:
UI components for use in Gravity Forms development. Both React and vanilla js flavors.
1 lines • 12.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.admin-bar & {\n\n\t\t.gform-flyout__mask--position-fixed {\n\t\t\tblock-size: calc(100vh - 46px);\n\t\t\tinset-block-start: 46px;\n\n\t\t\t@media (--gform-admin-viewport-wpadmin) {\n\t\t\t\tblock-size: calc(100vh - 32px);\n\t\t\t\tinset-block-start: 32px;\n\t\t\t}\n\t\t}\n\t}\n\n\t.wp-admin & {\n\n\t\t.gform-flyout__mask--position-fixed {\n\n\t\t\t@media (--gform-admin-viewport-wpadmin) {\n\t\t\t\tinline-size: calc(100% - 160px);\n\t\t\t}\n\t\t}\n\t}\n\n\t.wp-admin.folded &,\n\t.wp-admin.auto-fold & {\n\n\t\t.gform-flyout__mask--position-fixed {\n\n\t\t\t@media (--gform-admin-viewport-wpadmin) {\n\t\t\t\tinline-size: calc(100% - 36px);\n\t\t\t}\n\t\t}\n\t}\n\n\t.wp-admin.auto-fold:not(.folded) & {\n\n\t\t.gform-flyout__mask--position-fixed {\n\n\t\t\t@media (--gform-admin-viewport-wpadmin-961) {\n\t\t\t\tinline-size: calc(100% - 160px);\n\t\t\t}\n\t\t}\n\t}\n\n\t.gform-flyout__mask {\n\t\talign-items: center;\n\t\tblock-size: 100%;\n\t\tdisplay: none;\n\t\tinline-size: 100%;\n\t\tinset-block-start: 0;\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: 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\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\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\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--simplebar {\n\n\t\t\t[data-simplebar=\"init\"] {\n\t\t\t\tmax-block-size: 100%;\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: 2;\n\t\t\t}\n\n\t\t\t.gform-flyout__close.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--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\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\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.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.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\tpadding-inline-end: 1.125rem;\n\t}\n\n\t.gform-flyout__body {\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\toverflow-y: auto;\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.simplebar-wrapper {\n\t\t\tblock-size: 100%;\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"]}