UNPKG

@gravityforms/components

Version:

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

1 lines 8.83 kB
{"version":3,"sources":["toggle.css"],"names":[],"mappings":"AAEC;EACC,uBAAuB;EACvB,oBAAoB;EACpB,WAAW;CAYZ;;EAVC;GAIC,sBAAsB;EACvB;;EAEA;GACC,YAAY;EACb;;CAGD;EAEC,YAAY;CACb;;CAEA;EACC,aAAa;EACb,8BAA8B;CAC/B;;CAEA;EACC,2BAA2B;CAC5B;;CAEA;EACC,eAAe;CAChB;;CAEA;EACC,wBAAgB;KAAhB,qBAAgB;UAAhB,gBAAgB;EAChB,gBAAgB;EAChB,SAAS;EACT,gBAAgB;EAChB,eAAe;EACf,cAAc;EACd,UAAU;EACV,SAAS;EACT,aAAa;EACb,kBAAkB;EAClB,WAAW;CAqDZ;;CAnDC;GACC,mBAA0C;GAC1C,WAAW;GACX,cAAc;GACd,SAAS;GACT,8BAA8B;GAC9B,mBAAmB;GACnB,0BAA+C;EAChD;;CAEA;GACC,sBAAgD;GAChD,kBAAkB;GAClB,gHAAgD;GAChD,WAAW;GACX,kBAAkB;GAClB,0BAA+C;EAChD;;CAIC;IACC,urBAAurB,EAAE,2BAA2B;IACptB,2BAA2B;IAC3B,4BAA4B;IAC5B,oBAAoB;GACrB;;CAEA;IACC,2aAA2a,EAAE,2BAA2B;IACxc,2BAA2B;IAC3B,4BAA4B;IAC5B,oBAAoB;GACrB;;CAKA;IACC,sBAA6C;IAC7C,mBAAmB;GACpB;;CAEA;IACC,sBAAoD;GACrD;;CAGD;GACC,mBAAiD;EAClD;;CAOC;IACC,mBAA2C;GAC5C;;CAIC;KACC,sBAA8C;IAC/C;;CAEA;KACC,sBAAgD;IACjD;;CAIC;MACC,sBAA4C;KAC7C;;CAEA;MACC,cAAoC;KACrC;;CAMD;KACC,mBAA6C;IAC9C;;CAIC;MACC,2aAA2a,EAAE,2BAA2B;KACzc;;CAKA;MACC,mBAAyC;KAC1C;;CAIF;IACC,UAAU;GAmBX;;CAjBC;KACC,mBAAgD;IACjD;;CAIC;MACC,UAAU;KACX;;CAIC;OACC,mBAAgD;MACjD;;CASJ;GACC,eAAe;EAkBhB;;CAhBC;IACC,uBAAuB;IACvB,eAAe;IACf,gBAAgB;GACjB;;CAEA;IACC,gBAAgB;IAChB,6BAA6B;IAC7B,cAAc;IACd,eAAe;GAChB;;CAEA;IACC,gCAAgC;GACjC;;CAMD;GACC,cAAc;EAkBf;;CAhBC;IACC,sBAAsB;IACtB,cAAc;IACd,WAAW;GACZ;;CAEA;IACC,gBAAgB;IAChB,6BAA6B;IAC7B,cAAc;IACd,eAAe;GAChB;;CAEA;IACC,6BAA6B;GAC9B;;CAMD;GACC,eAAe;EAkBhB;;CAhBC;IACC,uBAAuB;IACvB,eAAe;IACf,gBAAgB;GACjB;;CAEA;IACC,eAAe;IACf,2BAA2B;IAC3B,YAAY;IACZ,cAAc;GACf;;CAEA;IACC,gCAAgC;GACjC;;CAIF;EACC,eAAe;CAChB;;AAOC;GACC,iCAAiC;EAClC;;AAKA;GACC,8BAA8B;EAC/B;;AAKA;GACC,iCAAiC;EAClC","file":"toggle.css","sourcesContent":[".gform-admin {\n\n\t.gform-toggle {\n\t\talign-items: flex-start;\n\t\tdisplay: inline-flex;\n\t\tgap: 0.5rem;\n\n\t\t&,\n\t\t*,\n\t\t*::before,\n\t\t*::after {\n\t\t\tbox-sizing: border-box;\n\t\t}\n\n\t\t&.gform-toggle--disabled {\n\t\t\topacity: 0.5;\n\t\t}\n\t}\n\n\t.gform-toggle--size-m,\n\t.gform-toggle--size-l {\n\t\tgap: 0.75rem;\n\t}\n\n\t.gform-toggle--width-full {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t}\n\n\t.gform-toggle--label-left {\n\t\tflex-direction: row-reverse;\n\t}\n\n\t.gform-toggle--width-full.gform-toggle--label-right {\n\t\ttext-align: end;\n\t}\n\n\tinput[type=\"checkbox\"].gform-toggle__toggle {\n\t\tappearance: none;\n\t\tbackground: none;\n\t\tborder: 0;\n\t\tbox-shadow: none;\n\t\tcursor: pointer;\n\t\tdisplay: block;\n\t\tflex: none;\n\t\tmargin: 0;\n\t\toutline: none;\n\t\tposition: relative;\n\t\twidth: auto;\n\n\t\t&::before {\n\t\t\tbackground: var(--gform-admin-color-snuff);\n\t\t\tcontent: \"\";\n\t\t\tdisplay: block;\n\t\t\tmargin: 0;\n\t\t\toutline: 2px solid transparent;\n\t\t\toutline-offset: 2px;\n\t\t\ttransition: var(--gform-admin-transition-hover);\n\t\t}\n\n\t\t&::after {\n\t\t\tbackground-color: var(--gform-admin-color-white);\n\t\t\tborder-radius: 50%;\n\t\t\tbox-shadow: var(--gform-admin-box-shadow-toggle);\n\t\t\tcontent: \"\";\n\t\t\tposition: absolute;\n\t\t\ttransition: var(--gform-admin-transition-hover);\n\t\t}\n\n\t\t&.gform-toggle__toggle--has-icons {\n\n\t\t\t&::after {\n\t\t\t\tbackground-image: url('data:image/svg+xml,<svg viewBox=\"0 0 5 5\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M0.264466 0.514405C0.0656531 0.713217 0.0656538 1.03556 0.264466 1.23437L1.70439 2.6743L0.264466 4.11422C0.0656534 4.31304 0.0656532 4.63538 0.264466 4.83419C0.463278 5.033 0.785617 5.033 0.98443 4.83419L2.42436 3.39426L3.86428 4.83418C4.06309 5.033 4.38543 5.033 4.58425 4.83418C4.78306 4.63537 4.78306 4.31303 4.58424 4.11422L3.14432 2.6743L4.58425 1.23437C4.78306 1.03556 4.78306 0.713222 4.58425 0.51441C4.38543 0.315597 4.06309 0.315597 3.86428 0.51441L2.42436 1.95433L0.984429 0.514405C0.785617 0.315592 0.463278 0.315592 0.264466 0.514405Z\" fill=\"%239092B0\"/></svg>'); /* stylelint-disable-line */\n\t\t\t\tbackground-position: center;\n\t\t\t\tbackground-repeat: no-repeat;\n\t\t\t\tbackground-size: 35%;\n\t\t\t}\n\n\t\t\t&:checked::after {\n\t\t\t\tbackground-image: url('data:image/svg+xml,<svg viewBox=\"0 0 7 7\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.33655 4.5513L5.99787 0.889985C6.22509 0.66277 6.59347 0.66277 6.82069 0.889985C7.0479 1.1172 7.0479 1.48559 6.82069 1.7128L2.33655 6.19693L0.179688 4.04007C-0.0475262 3.81286 -0.0475262 3.44447 0.179688 3.21726C0.406902 2.99004 0.775289 2.99004 1.0025 3.21726L2.33655 4.5513Z\" fill=\"%233e7da6\"/></svg>'); /* stylelint-disable-line */\n\t\t\t\tbackground-position: center;\n\t\t\t\tbackground-repeat: no-repeat;\n\t\t\t\tbackground-size: 45%;\n\t\t\t}\n\t\t}\n\n\t\t&:focus-visible {\n\n\t\t\t&::before {\n\t\t\t\toutline-color: var(--gform-admin-color-snuff);\n\t\t\t\toutline-offset: 2px;\n\t\t\t}\n\n\t\t\t&:checked::before {\n\t\t\t\toutline-color: var(--gform-admin-color-gravity-blue);\n\t\t\t}\n\t\t}\n\n\t\t&:checked::before {\n\t\t\tbackground: var(--gform-admin-color-gravity-blue);\n\t\t}\n\t}\n\n\t.gform-toggle--theme-cosmos {\n\n\t\tinput[type=\"checkbox\"].gform-toggle__toggle {\n\n\t\t\t&::before {\n\t\t\t\tbackground: var(--gform-admin-color-santas);\n\t\t\t}\n\n\t\t\t&:focus-visible {\n\n\t\t\t\t&::before {\n\t\t\t\t\toutline-color: var(--gform-admin-color-santas);\n\t\t\t\t}\n\n\t\t\t\t&:checked::before {\n\t\t\t\t\toutline-color: var(--gform-admin-color-chathams);\n\t\t\t\t}\n\n\t\t\t\t&:hover:checked {\n\n\t\t\t\t\t&::before {\n\t\t\t\t\t\toutline-color: var(--gform-admin-color-port);\n\t\t\t\t\t}\n\n\t\t\t\t\t& ~ .gform-toggle__icon {\n\t\t\t\t\t\tcolor: var(--gform-admin-color-port);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:checked {\n\n\t\t\t\t&::before {\n\t\t\t\t\tbackground: var(--gform-admin-color-chathams);\n\t\t\t\t}\n\n\t\t\t\t&.gform-toggle__toggle--has-icons {\n\n\t\t\t\t\t&::after {\n\t\t\t\t\t\tbackground-image: url('data:image/svg+xml,<svg viewBox=\"0 0 7 7\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.33655 4.5513L5.99787 0.889985C6.22509 0.66277 6.59347 0.66277 6.82069 0.889985C7.0479 1.1172 7.0479 1.48559 6.82069 1.7128L2.33655 6.19693L0.179688 4.04007C-0.0475262 3.81286 -0.0475262 3.44447 0.179688 3.21726C0.406902 2.99004 0.775289 2.99004 1.0025 3.21726L2.33655 4.5513Z\" fill=\"%230f3d6c\"/></svg>'); /* stylelint-disable-line */\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t&:hover {\n\n\t\t\t\t\t&::before {\n\t\t\t\t\t\tbackground: var(--gform-admin-color-port);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:disabled {\n\t\t\t\topacity: 1;\n\n\t\t\t\t&::before {\n\t\t\t\t\tbackground: var(--gform-admin-color-white-lilac);\n\t\t\t\t}\n\n\t\t\t\t&:checked {\n\n\t\t\t\t\t&::before {\n\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:hover {\n\n\t\t\t\t\t\t&::before {\n\t\t\t\t\t\t\tbackground: var(--gform-admin-color-white-lilac);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t.gform-toggle--size-s {\n\n\t\tinput[type=\"checkbox\"].gform-toggle__toggle {\n\t\t\theight: 1.25rem;\n\n\t\t\t&::before {\n\t\t\t\tborder-radius: 0.625rem;\n\t\t\t\theight: 1.25rem;\n\t\t\t\twidth: 2.5625rem;\n\t\t\t}\n\n\t\t\t&::after {\n\t\t\t\theight: 0.875rem;\n\t\t\t\tinset-inline-start: 0.1875rem;\n\t\t\t\ttop: 0.1875rem;\n\t\t\t\twidth: 0.875rem;\n\t\t\t}\n\n\t\t\t&:checked::after {\n\t\t\t\ttransform: translateX(1.3125rem);\n\t\t\t}\n\t\t}\n\t}\n\n\t.gform-toggle--size-m {\n\n\t\tinput[type=\"checkbox\"].gform-toggle__toggle {\n\t\t\theight: 1.5rem;\n\n\t\t\t&::before {\n\t\t\t\tborder-radius: 0.75rem;\n\t\t\t\theight: 1.5rem;\n\t\t\t\twidth: 3rem;\n\t\t\t}\n\n\t\t\t&::after {\n\t\t\t\theight: 1.125rem;\n\t\t\t\tinset-inline-start: 0.1875rem;\n\t\t\t\ttop: 0.1875rem;\n\t\t\t\twidth: 1.125rem;\n\t\t\t}\n\n\t\t\t&:checked::after {\n\t\t\t\ttransform: translateX(1.5rem);\n\t\t\t}\n\t\t}\n\t}\n\n\t.gform-toggle--size-l {\n\n\t\tinput[type=\"checkbox\"].gform-toggle__toggle {\n\t\t\theight: 1.75rem;\n\n\t\t\t&::before {\n\t\t\t\tborder-radius: 0.875rem;\n\t\t\t\theight: 1.75rem;\n\t\t\t\twidth: 3.4375rem;\n\t\t\t}\n\n\t\t\t&::after {\n\t\t\t\theight: 1.25rem;\n\t\t\t\tinset-inline-start: 0.25rem;\n\t\t\t\ttop: 0.25rem;\n\t\t\t\twidth: 1.25rem;\n\t\t\t}\n\n\t\t\t&:checked::after {\n\t\t\t\ttransform: translateX(1.6875rem);\n\t\t\t}\n\t\t}\n\t}\n\n\t.gform-toggle__label {\n\t\tcursor: pointer;\n\t}\n}\n\nhtml[dir=\"rtl\"] .gform-admin {\n\n\t.gform-toggle--size-s input[type=\"checkbox\"].gform-toggle__toggle {\n\n\t\t&:checked::after {\n\t\t\ttransform: translateX(-1.3125rem);\n\t\t}\n\t}\n\n\t.gform-toggle--size-m input[type=\"checkbox\"].gform-toggle__toggle {\n\n\t\t&:checked::after {\n\t\t\ttransform: translateX(-1.5rem);\n\t\t}\n\t}\n\n\t.gform-toggle--size-l input[type=\"checkbox\"].gform-toggle__toggle {\n\n\t\t&:checked::after {\n\t\t\ttransform: translateX(-1.6875rem);\n\t\t}\n\t}\n}\n"]}