UNPKG

@gravityforms/components

Version:

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

1 lines 4.04 kB
{"version":3,"sources":["heading.css"],"names":[],"mappings":"AAEC;EACC,cAAoC;EACpC,uIAAgD;EAChD,SAAS;EACT,UAAU;CASX;;EAPC;GACC,mBAAgD;GAChD,yBAAyD;GACzD,kBAAkB;GAClB,sBAA0C;GAC1C,oBAA2C;EAC5C;;CAQC;IACC,UAAU;GACX;;CAIF;EACC,kBAAkB;CAsDnB;;CApDC;GACC,eAAe;EAChB;;CAEA;GACC,qBAAqB;GACrB,YAAY;GACZ,cAAc;GACd,sBAAsB;EA2CvB;;CAzCC;IACC,cAAqC;IACrC,kBAAkB;GACnB;;CAEA;IAEC,2BAA2B;GAC5B;;CAEA;IACC,4BAA4B;GAC7B;;CAEA;IACC,4BAA4B;GAC7B;;CAEA;IACC,4BAA4B;GAC7B;;CAEA;IACC,2BAA2B;GAC5B;;CAEA;IACC,4BAA4B;GAC7B;;CAEA;IACC,yBAAyB;GAC1B;;CAEA;IACC,2BAA2B;GAC5B;;CAEA;IACC,2BAA2B;GAC5B;;CAIF;EACC,cAAc;EACd,4BAAgD;EAChD,UAAU;EACV,6BAA6B;EAC7B,sBAAsB;CAiBvB;;CAbE;IACC,cAAoC;GACrC;;CAGD;GACC,UAAU;EACX;;CAEA;GACC,cAAqC;GACrC,kBAAkB;EACnB;;CAGD;EACC,uBAAuB;EACvB,kBAAkB;CAWnB;;CATC;GACC,kBAAkB;EACnB;;CAEA;GACC,6BAA6B;GAC7B,WAAW;GACX,sCAAsC;EACvC;;CAGD;EACC,qBAAqB;CAQtB;;CANC;GACC,cAAqC;GACrC,0BAA0B;GAC1B,cAAc;GACd,oBAAoB;EACrB;;CAGD;EACC,YAAY;EACZ,aAAa;CACd","file":"heading.css","sourcesContent":[".gform-admin {\n\n\t.gform-heading {\n\t\tcolor: var(--gform-admin-color-port);\n\t\tfont-family: var(--gform-admin-font-family-base);\n\t\tmargin: 0;\n\t\tpadding: 0;\n\n\t\t&.gform-heading--boxed {\n\t\t\tbackground: var(--gform-admin-color-titan-white);\n\t\t\tborder: 1px solid var(--gform-admin-color-porcelain-gray);\n\t\t\tborder-radius: 3px;\n\t\t\tpadding-block: var(--gform-admin-spacer-3);\n\t\t\tpadding-inline: var(--gform-admin-spacer-4);\n\t\t}\n\t}\n\n\t.gform-heading:not(:focus-within),\n\t.gform-heading__wrapper:not(:focus-within) {\n\n\t\t&:hover {\n\n\t\t\t.gform-heading__copy-button {\n\t\t\t\topacity: 1;\n\t\t\t}\n\t\t}\n\t}\n\n\t.gform-heading__wrapper {\n\t\tposition: relative;\n\n\t\t.gform-heading {\n\t\t\tdisplay: inline;\n\t\t}\n\n\t\t.gform-heading__copy-button {\n\t\t\tdisplay: inline-block;\n\t\t\theight: auto;\n\t\t\tline-height: 1;\n\t\t\tvertical-align: middle;\n\n\t\t\t.gform-button__icon {\n\t\t\t\tcolor: var(--gform-admin-color-comet);\n\t\t\t\tfont-size: inherit;\n\t\t\t}\n\n\t\t\t&.gform-typography--size-text-md,\n\t\t\t&.gform-typography--size-text-lg {\n\t\t\t\tmargin-block-start: -0.1rem;\n\t\t\t}\n\n\t\t\t&.gform-typography--size-text-xl {\n\t\t\t\tmargin-block-start: -0.15rem;\n\t\t\t}\n\n\t\t\t&.gform-typography--size-display-xs {\n\t\t\t\tmargin-block-start: -0.25rem;\n\t\t\t}\n\n\t\t\t&.gform-typography--size-display-sm {\n\t\t\t\tmargin-block-start: -0.35rem;\n\t\t\t}\n\n\t\t\t&.gform-typography--size-display-md {\n\t\t\t\tmargin-block-start: -0.5rem;\n\t\t\t}\n\n\t\t\t&.gform-typography--size-display-lg {\n\t\t\t\tmargin-block-start: -0.75rem;\n\t\t\t}\n\n\t\t\t&.gform-typography--size-display-xl {\n\t\t\t\tmargin-block-start: -1rem;\n\t\t\t}\n\n\t\t\t&.gform-typography--size-display-2xl {\n\t\t\t\tmargin-block-start: -1.2rem;\n\t\t\t}\n\n\t\t\t&.gform-typography--size-display-3xl {\n\t\t\t\tmargin-block-start: -1.5rem;\n\t\t\t}\n\t\t}\n\t}\n\n\t.gform-heading__copy-button {\n\t\tline-height: 1;\n\t\tmargin-inline-start: var(--gform-admin-spacer-1);\n\t\topacity: 0;\n\t\ttransition: opacity 0.2s ease;\n\t\tvertical-align: middle;\n\n\t\t&:hover {\n\n\t\t\t.gform-button__icon {\n\t\t\t\tcolor: var(--gform-admin-color-port);\n\t\t\t}\n\t\t}\n\n\t\t&:focus {\n\t\t\topacity: 1;\n\t\t}\n\n\t\t.gform-button__icon {\n\t\t\tcolor: var(--gform-admin-color-comet);\n\t\t\tfont-size: inherit;\n\t\t}\n\t}\n\n\t.gform-heading[contenteditable]:not(.gform-heading--boxed) {\n\t\tbackground: transparent;\n\t\tborder-radius: 3px;\n\n\t\t&:not(.gform-heading__has-copy) {\n\t\t\tposition: relative;\n\t\t}\n\n\t\t&::after {\n\t\t\tbackground-color: transparent;\n\t\t\tcontent: \"\";\n\t\t\ttransition: background-color 0.3s ease;\n\t\t}\n\t}\n\n\t.gform-heading[contenteditable=\"true\"]:empty {\n\t\tdisplay: inline-block;\n\n\t\t&::before {\n\t\t\tcolor: var(--gform-admin-color-comet);\n\t\t\tcontent: attr(placeholder);\n\t\t\tdisplay: block;\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n\n\t.gform-heading[contenteditable]:focus {\n\t\tborder: none;\n\t\toutline: none;\n\t}\n}\n"]}