UNPKG

@gravityforms/components

Version:

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

1 lines 9.28 kB
{"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 {\n\n\t\t\t&.gform-flyout--fixed {\n\t\t\t\ttop: 46px;\n\n\t\t\t\t@media (--gform-admin-viewport-wpadmin) {\n\t\t\t\t\ttop: 32px;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t.gform-flyout {\n\t\tbackground: var(--gform-admin-color-white);\n\t\tbottom: 0;\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\theight: 100%;\n\t\tleft: 0;\n\t\topacity: 0;\n\t\tpadding-top: 2.125rem;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\ttransition: opacity 150ms ease-in-out, width 150ms 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&.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\tleft: auto;\n\t\t\tright: 0;\n\n\t\t\t.gform-flyout__expand-rail {\n\t\t\t\tleft: -35px;\n\t\t\t}\n\n\t\t\t.gform-flyout__expand {\n\t\t\t\tleft: -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\tright: -35px;\n\t\t\t}\n\n\t\t\t.gform-flyout__expand {\n\t\t\t\tright: -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__close.gform-button--size-xs {\n\t\t\talign-items: center;\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\theight: 1.625rem;\n\t\t\tposition: absolute;\n\t\t\tright: 25px;\n\t\t\ttransition: var(--gform-admin-transition-cl-button-focus);\n\t\t\twidth: 1.625rem;\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\ttop: 0;\n\t\t\t}\n\n\t\t\t&.gform-button--simplified {\n\t\t\t\tborder: 1px solid transparent;\n\t\t\t\theight: 1.875rem;\n\t\t\t\ttransition: var(--gform-admin-transition-button);\n\t\t\t\twidth: 1.875rem;\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\ttop: auto;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t.gform-flyout__expand-rail {\n\t\t\theight: 56px;\n\t\t\tmargin-top: -28px;\n\t\t\tposition: absolute;\n\t\t\ttop: 50%;\n\t\t\twidth: 35px;\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\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\theight: 56px;\n\t\t\tjustify-content: center;\n\t\t\tmargin-top: -28px;\n\t\t\topacity: 0;\n\t\t\tposition: absolute;\n\t\t\ttop: 50%;\n\t\t\ttransition: opacity 0.15s ease, transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease;\n\t\t\twidth: 19px;\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\tcolor: var(--gform-admin-color-port);\n\t\t\tdisplay: flex;\n\t\t\tfont-size: 1rem;\n\t\t\theight: 15px;\n\t\t\tjustify-content: center;\n\t\t\tposition: relative;\n\t\t\ttransition: color 300ms ease;\n\t\t\twidth: 100%;\n\t\t}\n\t}\n\n\t.gform-flyout__head {\n\t\tpadding: 0 2.875rem 1.25rem;\n\t\tposition: relative;\n\n\t\t&::after {\n\t\t\tbackground: var(--gform-admin-color-white-lilac);\n\t\t\tbottom: 0;\n\t\t\tcontent: \"\";\n\t\t\theight: 0.0625rem;\n\t\t\tleft: 0;\n\t\t\tposition: absolute;\n\t\t\twidth: 100%;\n\t\t}\n\t}\n\n\t.gform-flyout--no-divider {\n\n\t\t.gform-flyout__head::after {\n\t\t\tdisplay: none;\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: 0 0 12px;\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-right: 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\n\t\tpadding: 1.25rem 2.875rem 2.125rem;\n\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\theight: 100%;\n\t\t}\n\t}\n}\n\nhtml[dir=\"rtl\"] .gform-admin {\n\n\t.gform-flyout {\n\t\tleft: auto;\n\t\tright: 0;\n\n\t\t&.gform-flyout--right {\n\t\t\tleft: 0;\n\t\t\tright: auto;\n\n\t\t\t.gform-flyout__expand-rail {\n\t\t\t\tleft: auto;\n\t\t\t\tright: -35px;\n\t\t\t}\n\n\t\t\t.gform-flyout__expand {\n\t\t\t\tleft: auto;\n\t\t\t\tright: -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__close.gform-button--size-xs {\n\t\t\tleft: 25px;\n\t\t\tright: auto;\n\t\t}\n\n\t\t&.gform-flyout--left {\n\n\t\t\t.gform-flyout__expand-rail {\n\t\t\t\tleft: -35px;\n\t\t\t\tright: auto;\n\t\t\t}\n\n\t\t\t.gform-flyout__expand {\n\t\t\t\tleft: -35px;\n\t\t\t\tright: auto;\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\t}\n}\n"]}