@gravityforms/components
Version:
UI components for use in Gravity Forms development. Both React and vanilla js flavors.
1 lines • 7.4 kB
Source Map (JSON)
{"version":3,"sources":["droplist.css"],"names":[],"mappings":"AAEC;EACC,sBAAsB;EACtB,uIAAgD;EAChD,kBAAkB;CAKnB;;EAHC;GACC,sBAAsB;EACvB;;CAGD;EACC,gBAA0C;EAC1C,wBAAwB;EACxB,wNAA+C;EAC/C,aAAa;EACb,kCAAuD;EACvD,uBAAuB;EACvB,UAAU;EACV,gBAAgB;EAChB,kBAAkB;EAClB,2BAA2B;EAC3B,8BAAkD;EAClD,UAAU;CACX;;CAEA;EACC,cAAc;CACf;;CAEA;EACC,cAAc;EACd,UAAU;CACX;;CAEA;EACC,cAAc;EACd,UAAU;CACX;;CAEA;EACC,qBAAqB;EACrB,oCAAyD;EACzD,4BAA4B;CAC7B;;CAEA;EACC,qBAAqB;CACtB;;CAEA;EACC,mBAAmB;CACpB;;CAEA;EACC,qBAA0C;CAC3C;;CAEA;EACC,qBAAqB;EACrB,SAAS;EACT,UAAU;CACX;;CAEA;EACC,yBAA6C;EAC7C,sBAA0C;EAC1C,sBAA2C;CAK5C;;CAHC;GACC,mBAAmB;EACpB;;CAGD;EACC,kBAAkB;CACnB;;CAEA;EACC,kBAAkB;CAUnB;;CARC;GACC,yCAAsE;GACtE,WAAW;GACX,iBAAiB;GACjB,mCAAuD;GACvD,qBAAqB;GACrB,kBAAkB;EACnB;;CAGD;EACC,gBAA0C;EAC1C,wBAAwB;EACxB,wNAA+C;EAC/C,aAAa;EACb,oBAAoB;EACpB,uCAA4D;EAC5D,UAAU;EACV,kBAAkB;EAClB,8BAAkD;CACnD;;CAEA;EACC,qCAA0D;EAC1D,wBAAwB;CACzB;;CAEA;EACC,cAAc;CACf;;CAEA;EACC,cAAc;EACd,UAAU;CACX;;CAEA;EACC,cAAc;EACd,UAAU;CACX;;CAEA;EACC,uBAAuB;EACvB,gBAA0C;EAC1C,4BAAsD;EACtD,wBAAwB;EACxB,eAAe;EACf,aAAa;EACb,iBAAiB;EACjB,aAAa;EACb,sBAA0C;EAC1C,sBAA2C;EAC3C,iBAAiB;EACjB,qBAAqB;EACrB,0BAA+C;CAChD;;CAIC;GACC,mBAA+C;GAC/C,qBAAiD;EAClD;;CAEA;GACC,mBAAgD;GAChD,qBAAkD;GAClD,+EAAqD;EACtD;;CAEA;GACC,mBAA+C;GAC/C,qBAA4C;GAC5C,gBAAgB;EACjB;;CAEA;GAEC,cAAqC;EACtC;;CAKA;GACC,mBAAmD;GACnD,qBAAqD;EACtD;;CAEA;GACC,mBAAmD;GACnD,qBAA0C;GAC1C,iEAA2D;EAC5D;;CAEA;GACC,mBAAmD;GACnD,qBAAmD;GACnD,gBAAgB;EACjB;;CAEA;GAGC,cAAmC;EACpC;;CAGD;EACC,gBAA0C;EAC1C,4BAAsD;EACtD,eAAe;EACf,YAAY;CACb;;CAEA;EACC,UAAU;EACV,2BAA2B;EAC3B,mBAAmB;CACpB;;CAEA;EACC,UAAU;EACV,kBAAkB;CACnB;;CAEA;EACC,2BAA2B;CAC5B;;CAEA;EACC,6BAA6B;CAC9B","file":"droplist.css","sourcesContent":[".gform-admin {\n\n\t.gform-droplist {\n\t\tbox-sizing: border-box;\n\t\tfont-family: var(--gform-admin-font-family-base);\n\t\tposition: relative;\n\n\t\t* {\n\t\t\tbox-sizing: border-box;\n\t\t}\n\t}\n\n\t.gform-droplist__list-wrapper {\n\t\tbackground: var(--gform-admin-color-white);\n\t\tborder-radius: 0.1875rem;\n\t\tbox-shadow: var(--gform-admin-box-shadow-popup);\n\t\tdisplay: none;\n\t\tinset-block-end: calc(var(--gform-admin-spacer-2) * -1);\n\t\tinset-block-start: auto;\n\t\topacity: 0;\n\t\tpadding-block: 0;\n\t\tposition: absolute;\n\t\ttransform: translateY(100%);\n\t\ttransition: var(--gform-admin-transition-dropdown);\n\t\tz-index: 2;\n\t}\n\n\t.gform-droplist--reveal .gform-droplist__list-wrapper {\n\t\tdisplay: block;\n\t}\n\n\t.gform-droplist--hide .gform-droplist__list-wrapper {\n\t\tdisplay: block;\n\t\topacity: 0;\n\t}\n\n\t.gform-droplist--open .gform-droplist__list-wrapper {\n\t\tdisplay: block;\n\t\topacity: 1;\n\t}\n\n\t.gform-droplist--position-top .gform-droplist__list-wrapper {\n\t\tinset-block-end: auto;\n\t\tinset-block-start: calc(var(--gform-admin-spacer-2) * -1);\n\t\ttransform: translateY(-100%);\n\t}\n\n\t.gform-droplist--align-left .gform-droplist__list-wrapper {\n\t\tinset-inline-start: 0;\n\t}\n\n\t.gform-droplist--align-right .gform-droplist__list-wrapper {\n\t\tinset-inline-end: 0;\n\t}\n\n\t.gform-droplist__list-container {\n\t\tpadding-block: var(--gform-admin-spacer-2);\n\t}\n\n\t.gform-droplist__list {\n\t\tlist-style-type: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\t.gform-droplist__item {\n\t\tmargin-block-end: var(--gform-admin-spacer-1);\n\t\tpadding-block: var(--gform-admin-spacer-1);\n\t\tpadding-inline: var(--gform-admin-spacer-2);\n\n\t\t&:last-child {\n\t\t\tmargin-block-end: 0;\n\t\t}\n\t}\n\n\t.gform-droplist__item--group {\n\t\tposition: relative;\n\t}\n\n\t.gform-droplist__item--has-divider {\n\t\tposition: relative;\n\n\t\t&::after {\n\t\t\tborder-block-end: 0.0625rem solid var(--gform-admin-color-white-lilac);\n\t\t\tcontent: \"\";\n\t\t\tinline-size: 100%;\n\t\t\tinset-block-end: calc(var(--gform-admin-spacer-1) * -1);\n\t\t\tinset-inline-start: 0;\n\t\t\tposition: absolute;\n\t\t}\n\t}\n\n\t.gform-droplist__item--group > .gform-droplist__list-container {\n\t\tbackground: var(--gform-admin-color-white);\n\t\tborder-radius: 0.1875rem;\n\t\tbox-shadow: var(--gform-admin-box-shadow-popup);\n\t\tdisplay: none;\n\t\tinset-block-start: 0;\n\t\tinset-inline-start: calc(100% + var(--gform-admin-spacer-2));\n\t\topacity: 0;\n\t\tposition: absolute;\n\t\ttransition: var(--gform-admin-transition-dropdown);\n\t}\n\n\t.gform-droplist--align-right .gform-droplist__item--group > .gform-droplist__list-container {\n\t\tinset-inline-end: calc(100% + var(--gform-admin-spacer-2));\n\t\tinset-inline-start: auto;\n\t}\n\n\t.gform-droplist__item--reveal > .gform-droplist__list-container {\n\t\tdisplay: block;\n\t}\n\n\t.gform-droplist__item--hide > .gform-droplist__list-container {\n\t\tdisplay: block;\n\t\topacity: 0;\n\t}\n\n\t.gform-droplist__item--open > .gform-droplist__list-container {\n\t\tdisplay: block;\n\t\topacity: 1;\n\t}\n\n\t.gform-droplist__item-trigger {\n\t\talign-items: flex-start;\n\t\tbackground: var(--gform-admin-color-white);\n\t\tborder: 0.0625rem solid var(--gform-admin-color-white);\n\t\tborder-radius: 0.1875rem;\n\t\tcursor: pointer;\n\t\tdisplay: flex;\n\t\tinline-size: 100%;\n\t\toutline: none;\n\t\tpadding-block: var(--gform-admin-spacer-1);\n\t\tpadding-inline: var(--gform-admin-spacer-2);\n\t\ttext-align: start;\n\t\ttext-decoration: none;\n\t\ttransition: var(--gform-admin-transition-hover);\n\t}\n\n\t.gform-droplist__item-trigger--info {\n\n\t\t&:hover {\n\t\t\tbackground: var(--gform-admin-color-light-blue);\n\t\t\tborder-color: var(--gform-admin-color-light-blue);\n\t\t}\n\n\t\t&:focus {\n\t\t\tbackground: var(--gform-admin-color-titan-white);\n\t\t\tborder-color: var(--gform-admin-color-blue-ribbon);\n\t\t\tbox-shadow: var(--gform-admin-box-shadow-input-focus);\n\t\t}\n\n\t\t&:active {\n\t\t\tbackground: var(--gform-admin-color-light-blue);\n\t\t\tborder-color: var(--gform-admin-color-snuff);\n\t\t\tbox-shadow: none;\n\t\t}\n\n\t\t.gform-droplist__item-trigger-icon::before,\n\t\t.gform-droplist__item-trigger-group-icon::before {\n\t\t\tcolor: var(--gform-admin-color-comet);\n\t\t}\n\t}\n\n\t.gform-droplist__item-trigger--error {\n\n\t\t&:hover {\n\t\t\tbackground: var(--gform-admin-color-background-red);\n\t\t\tborder-color: var(--gform-admin-color-background-red);\n\t\t}\n\n\t\t&:focus {\n\t\t\tbackground: var(--gform-admin-color-background-red);\n\t\t\tborder-color: var(--gform-admin-color-red);\n\t\t\tbox-shadow: var(--gform-admin-box-shadow-input-error-focus);\n\t\t}\n\n\t\t&:active {\n\t\t\tbackground: var(--gform-admin-color-background-red);\n\t\t\tborder-color: var(--gform-admin-color-spanish-pink);\n\t\t\tbox-shadow: none;\n\t\t}\n\n\t\t&,\n\t\t.gform-droplist__item-trigger-icon::before,\n\t\t.gform-droplist__item-trigger-group-icon::before {\n\t\t\tcolor: var(--gform-admin-color-red);\n\t\t}\n\t}\n\n\t.gform-droplist__item-trigger--disabled:disabled {\n\t\tbackground: var(--gform-admin-color-white);\n\t\tborder: 0.0625rem solid var(--gform-admin-color-white);\n\t\tcursor: default;\n\t\topacity: 0.5;\n\t}\n\n\t.gform-droplist__item-trigger-text {\n\t\tflex: auto;\n\t\tpadding-inline-end: 1.75rem;\n\t\twhite-space: nowrap;\n\t}\n\n\t.gform-droplist__item-trigger-icon {\n\t\tflex: none;\n\t\tfont-size: 1.25rem;\n\t}\n\n\t.gform-droplist__item-trigger-icon--before {\n\t\tmargin-inline-end: 0.375rem;\n\t}\n\n\t.gform-droplist__item-trigger-icon--after {\n\t\tmargin-inline-start: 0.375rem;\n\t}\n}\n"]}