@gravityforms/components
Version:
UI components for use in Gravity Forms development. Both React and vanilla js flavors.
1 lines • 8.57 kB
Source Map (JSON)
{"version":3,"sources":["radio.css"],"names":[],"mappings":"AAEC;EACC,cAAc;EACd,sBAAsB;EAEtB,qBAAqB;EACrB,WAAW;EACX,YAAY;EACZ,gBAAgB;EAChB,UAAU;EACV,kBAAkB;EAClB,UAAU;CA0CX;;EAxCC;GACC,sBAAgD;GAChD,yBAAyD;GACzD,kBAAkB;GAClB,WAAW;GACX,qBAAqB;GACrB,eAAe;GACf,sBAAsB;GACtB,cAAc;GACd,8DAAgD;GAChD,sBAAsB;GACtB,cAAc;EACf;;EAKC;IACC,6OAA6O,EAAE,2BAA2B;IAC1Q,2BAA2B;IAC3B,4BAA4B;IAC5B,qBAAoD;IACpD,6BAA+C;IAC/C,qBAAqB;GACtB;;EAOC;KACC,sBAAgD;KAChD,6OAA6O,EAAE,2BAA2B;KAC1Q,2BAA2B;KAC3B,4BAA4B;KAC5B,qBAAqD;IACtD;;CAKH,iBAAiB;;CAIhB;GAIC,sBAAsB;EACvB;;CAKA;GACC,uBAAuB;GACvB,aAAa;EASd;;CAPC;IACC,+BAAuD;IACvD,kBAAkB;IAClB,iDAA+C;IAC/C,UAAU;IACV,oBAAyC;GAC1C;;CAGD;GACC,yBAAqD;GACrD,sBAAsB;EACvB;;CAEA;GACC,yBAAqD;GACrD,sBAAsB;GACtB,qBAAkD;GAClD,4DAAqD;EACtD;;CAEA;GACC,uNAAuN,EAAE,2BAA2B;EACrP;;CAIC;IACC,cAAqC;GAQtC;;CANC;KACC,yBAAqD;KACrD,qBAAkD;KAClD,gBAAgB;KAChB,UAAU;IACX;;CAGD;IACC,uNAAuN,EAAE,2BAA2B;GACrP;;CAEA;IACC,cAAqC;GACtC;;CAKA;IACC,YAAY;IACZ,oBAAyC;IACzC,WAAW;GACZ;;CAEA;IACC,oBAAoB;GACrB;;CAEA;IACC,qBAAqB;GACtB;;CAKA;IACC,eAAe;IACf,qBAAyC;IACzC,sBAAsB;IACtB,cAAc;GACf;;CAEA;IACC,qBAAqB;GACtB;;CAIF,gCAAgC;;CAEhC;EACC,mBAAmB;EACnB,aAAa;EACb,aAAa;EACb,uBAAuB;EACvB,kBAAkB;EAClB,YAAY;CAsEb;;CApEC;GACC,yBAAgD;GAChD,kBAAkB;GAClB,iDAA+C;GAC/C,kBAAkB;GAClB,cAAc;GACd,YAAY;GACZ,OAAO;GACP,gBAAgB;GAChB,kBAAkB;GAClB,MAAM;GACN,sEAAsE;GACtE,WAAW;EASZ;;CAPC;IACC,wNAA+C;GAChD;;CAEA;IACC,aAAa;GACd;;CAWG;OACC,gBAAgB;MACjB;;CAIF;KACC,qBAA+C;KAC/C,wNAAwN;IA0BzN;;CAxBC;MACC,mBAA6C;MAC7C,SAAS;MACT,gBAAgB;MAChB,cAAc;MACd,YAAY;MACZ,SAAS;MACT,kBAAkB;MAClB,YAAY;MACZ,UAAU;MACV,wBAAwB;MACxB,WAAW;KACZ;;CAEA;MACC,WAAqC;MACrC,gBAA6C;MAC7C,cAAc;MACd,iCAAkD;MAClD,mBAAmB;MACnB,kBAAkB;MAClB,UAAU;MACV,QAAQ;KACT;;AAaF;IACC,qBAAqB;IACrB,eAAe;GAChB","file":"radio.css","sourcesContent":[".gform-admin {\n\n\t.gform-input--radio {\n\t\tborder: 0 none;\n\t\tclip: rect(0, 0, 0, 0);\n\t\t-webkit-clip-path: inset(50%);\n\t\tclip-path: inset(50%);\n\t\theight: 1px;\n\t\tmargin: -1px;\n\t\toverflow: hidden;\n\t\tpadding: 0;\n\t\tposition: absolute;\n\t\twidth: 1px;\n\n\t\t+ label::before {\n\t\t\tbackground-color: var(--gform-admin-color-white);\n\t\t\tborder: 1px solid var(--gform-admin-color-amethyst-smoke);\n\t\t\tborder-radius: 50%;\n\t\t\tcontent: \"\";\n\t\t\tdisplay: inline-block;\n\t\t\theight: 1.25rem;\n\t\t\tmargin-right: 0.625rem;\n\t\t\ttop: 1.5625rem;\n\t\t\ttransition: var(--gform-admin-transition-inputs);\n\t\t\tvertical-align: middle;\n\t\t\twidth: 1.25rem;\n\t\t}\n\n\t\t&:hover + label,\n\t\t&:focus + label {\n\n\t\t\t&::before {\n\t\t\t\tbackground-image: url(\"data:image/svg+xml,%3Csvg width='8' height='8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 8a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z' fill='%23ECEDF8'/%3E%3C/svg%3E\"); /* stylelint-disable-line */\n\t\t\t\tbackground-position: center;\n\t\t\t\tbackground-repeat: no-repeat;\n\t\t\t\tborder-color: var(--gform-admin-color-primary-light);\n\t\t\t\tbox-shadow: var(--gform-admin-box-shadow-focus);\n\t\t\t\tdisplay: inline-block;\n\t\t\t}\n\t\t}\n\n\t\t&:checked {\n\n\t\t\t+ label {\n\n\t\t\t\t&::before {\n\t\t\t\t\tbackground-color: var(--gform-admin-color-white);\n\t\t\t\t\tbackground-image: url(\"data:image/svg+xml,%3Csvg width='8' height='8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 8a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z' fill='%233E7DA6'/%3E%3C/svg%3E\"); /* stylelint-disable-line */\n\t\t\t\t\tbackground-position: center;\n\t\t\t\t\tbackground-repeat: no-repeat;\n\t\t\t\t\tborder-color: var(--gform-admin-color-amethyst-smoke);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t/* Cosmos Theme */\n\n\t.gform-input-wrapper--theme-cosmos.gform-input-wrapper--radio {\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\t}\n\n\t.gform-input-wrapper--theme-cosmos .gform-input--radio {\n\n\t\t+ .gform-label {\n\t\t\talign-items: flex-start;\n\t\t\tdisplay: flex;\n\n\t\t\t&::before {\n\t\t\t\tborder: 0.0625rem solid var(--gform-admin-color-santas);\n\t\t\t\tborder-radius: 50%;\n\t\t\t\tbox-shadow: var(--gform-admin-box-shadow-micro);\n\t\t\t\tflex: none;\n\t\t\t\tmargin-right: var(--gform-admin-spacer-2);\n\t\t\t}\n\t\t}\n\n\t\t&:hover + .gform-label::before {\n\t\t\tbackground-color: var(--gform-admin-color-light-blue);\n\t\t\tbackground-image: none;\n\t\t}\n\n\t\t&:focus + .gform-label::before {\n\t\t\tbackground-color: var(--gform-admin-color-light-blue);\n\t\t\tbackground-image: none;\n\t\t\tborder-color: var(--gform-admin-color-blue-ribbon);\n\t\t\tbox-shadow: var(--gform-admin-box-shadow-focus-state);\n\t\t}\n\n\t\t&:checked + .gform-label::before {\n\t\t\tbackground-image: url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOCIgaGVpZ2h0PSI4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxjaXJjbGUgY3g9IjQiIGN5PSI0IiByPSI0IiBmaWxsPSIjMEYzRDZDIi8+PC9zdmc+\"); /* stylelint-disable-line */\n\t\t}\n\n\t\t&:disabled {\n\n\t\t\t+ .gform-label {\n\t\t\t\tcolor: var(--gform-admin-color-snuff);\n\n\t\t\t\t&::before {\n\t\t\t\t\tbackground-color: var(--gform-admin-color-light-blue);\n\t\t\t\t\tborder-color: var(--gform-admin-color-white-lilac);\n\t\t\t\t\tbox-shadow: none;\n\t\t\t\t\topacity: 1;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:checked + .gform-label::before {\n\t\t\t\tbackground-image: url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOCIgaGVpZ2h0PSI4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxjaXJjbGUgY3g9IjQiIGN5PSI0IiByPSI0IiBmaWxsPSIjRUFFQ0YwIi8+PC9zdmc+\"); /* stylelint-disable-line */\n\t\t\t}\n\n\t\t\t~ .gform-input-help-text {\n\t\t\t\tcolor: var(--gform-admin-color-snuff);\n\t\t\t}\n\t\t}\n\n\t\t&.gform-input--size-sm {\n\n\t\t\t+ .gform-label::before {\n\t\t\t\theight: 1rem;\n\t\t\t\tmargin-right: var(--gform-admin-spacer-2);\n\t\t\t\twidth: 1rem;\n\t\t\t}\n\n\t\t\t&:checked + .gform-label::before {\n\t\t\t\tbackground-size: 6px;\n\t\t\t}\n\n\t\t\t~ .gform-input-help-text {\n\t\t\t\tmargin-left: 1.625rem;\n\t\t\t}\n\t\t}\n\n\t\t&.gform-input--size-md {\n\n\t\t\t+ .gform-label::before {\n\t\t\t\theight: 1.25rem;\n\t\t\t\tmargin-right: var(--gform-admin-spacer-3);\n\t\t\t\tmargin-top: -0.0625rem;\n\t\t\t\twidth: 1.25rem;\n\t\t\t}\n\n\t\t\t~ .gform-input-help-text {\n\t\t\t\tmargin-left: 2.125rem;\n\t\t\t}\n\t\t}\n\t}\n\n\t/* todo: in progress with adam */\n\n\t.gform-input-wrapper.gform-input-wrapper--type-image {\n\t\talign-items: center;\n\t\tdisplay: flex;\n\t\theight: 145px;\n\t\tjustify-content: center;\n\t\tposition: relative;\n\t\twidth: 150px;\n\n\t\t.gform-label {\n\t\t\tborder: 1px solid var(--gform-admin-color-snuff);\n\t\t\tborder-radius: 3px;\n\t\t\tbox-shadow: var(--gform-admin-box-shadow-micro);\n\t\t\tcolor: transparent;\n\t\t\tdisplay: block;\n\t\t\theight: 100%;\n\t\t\tleft: 0;\n\t\t\toverflow: hidden;\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t\ttransition: box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out;\n\t\t\twidth: 100%;\n\n\t\t\t&:hover {\n\t\t\t\tbox-shadow: var(--gform-admin-box-shadow-popup);\n\t\t\t}\n\n\t\t\t&::before {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t}\n\n\t\t.gform-input--radio {\n\n\t\t\t&:checked {\n\n\t\t\t\t&:focus {\n\n\t\t\t\t\t+ label {\n\n\t\t\t\t\t\t&::before {\n\t\t\t\t\t\t\tbox-shadow: none;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t+ label {\n\t\t\t\t\tborder-color: var(--gform-admin-color-chathams);\n\t\t\t\t\tbox-shadow: 0 0 1px rgba(18, 25, 97, 0.24), 0 24px 24px rgba(18, 25, 97, 0.03), 0 2px 2px rgba(18, 25, 97, 0.03), 0 4px 4px rgba(18, 25, 97, 0.03), 0 8px 8px rgba(18, 25, 97, 0.03), 0 16px 16px rgba(18, 25, 97, 0.03);\n\n\t\t\t\t\t&::before {\n\t\t\t\t\t\tbackground: var(--gform-admin-color-chathams);\n\t\t\t\t\t\tborder: 0;\n\t\t\t\t\t\tborder-radius: 0;\n\t\t\t\t\t\tdisplay: block;\n\t\t\t\t\t\theight: 50px;\n\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t\tposition: absolute;\n\t\t\t\t\t\tright: -25px;\n\t\t\t\t\t\ttop: -25px;\n\t\t\t\t\t\ttransform: rotate(45deg);\n\t\t\t\t\t\twidth: 50px;\n\t\t\t\t\t}\n\n\t\t\t\t\t&::after {\n\t\t\t\t\t\tcolor: var(--gform-admin-color-white);\n\t\t\t\t\t\tcontent: var(--gform-common-icon--check-mark);\n\t\t\t\t\t\tdisplay: block;\n\t\t\t\t\t\tfont-family: var(--gform-common-font-family-icons);\n\t\t\t\t\t\tfont-size: 0.875rem;\n\t\t\t\t\t\tposition: absolute;\n\t\t\t\t\t\tright: 2px;\n\t\t\t\t\t\ttop: 1px;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n\nhtml[dir=\"rtl\"] .gform-admin {\n\n\t.gform-input--radio {\n\n\t\t+ label {\n\n\t\t\t&::before {\n\t\t\t\tmargin-left: 0.625rem;\n\t\t\t\tmargin-right: 0;\n\t\t\t}\n\t\t}\n\t}\n}\n"]}