@gravityforms/components
Version:
UI components for use in Gravity Forms development. Both React and vanilla js flavors.
1 lines • 6.49 kB
Source Map (JSON)
{"version":3,"sources":["checkbox.css"],"names":[],"mappings":"AAEC;EACC,cAAc;EACd,sBAAsB;EAEtB,qBAAqB;EACrB,WAAW;EACX,YAAY;EACZ,gBAAgB;EAChB,UAAU;EACV,kBAAkB;EAClB,UAAU;CA6DX;;EA3DC;GACC,aAAa;EACd;;EAEA;GACC,YAAY;EACb;;EAIC,0CAA0C;;EAIzC,oBAAoB;;EAEpB;KACC,iCAA2D;KAC3D,oBAAoB;KACpB,yBAAyD;KACzD,kBAAkB;KAClB,WAAW;KACX,qBAAqB;KACrB,qBAAqB;KACrB,2BAA2B;KAC3B,8DAAgD;KAChD,sBAAsB;IACvB;;EAEA;KACC,uBAAuB;IACxB;;EAFA;KACC,uBAAuB;IACxB;;EAWA;KACC,yBAAwD;KACxD,6BAA+C;IAChD;;EAQA;KACC,2cAA2c,EAAE,2BAA2B;KACxe,qBAAmD;IACpD;;CAKH,iBAAiB;;CAIhB;GAIC,sBAAsB;EACvB;;CAKA;GACC,uBAAuB;GACvB,aAAa;EAOd;;CALC;IACC,+BAAuD;IACvD,iDAA+C;IAC/C,UAAU;GACX;;CAGD;GACC,yBAAqD;EACtD;;CAEA;GACC,yBAAqD;GACrD,qBAAkD;GAClD,4DAAqD;EACtD;;CAEA;GACC,2WAA2W,EAAE,2BAA2B;EACzY;;CAEA;GACC,+UAA+U,EAAE,2BAA2B;EAC7W;;CAIC;IACC,cAAqC;GAQtC;;CANC;KACC,yBAAqD;KACrD,qBAAkD;KAClD,gBAAgB;KAChB,UAAU;IACX;;CAGD;IACC,+TAA+T,EAAE,2BAA2B;GAC7V;;CAEA;IACC,cAAqC;GACtC;;CAKA;IACC,oBAAoB;IACpB,qBAAqB;IACrB,yBAA8C;GAC/C;;CAEA;IACC,yBAAyB,EAAE,2BAA2B;GACvD;;CAEA;IACC,6BAA6B;GAC9B;;CAKA;IACC,oBAAoB;IACpB,qBAAqB;IACrB,8BAA8B;IAC9B,0BAA8C;GAC/C;;CAEA;IACC,6BAA6B;GAC9B","file":"checkbox.css","sourcesContent":[".gform-admin {\n\n\t.gform-input--checkbox {\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 {\n\t\t\toutline: none;\n\t\t}\n\n\t\t&:disabled + label::before {\n\t\t\topacity: 0.6;\n\t\t}\n\n\t\t&:not(.field-choice-type) {\n\n\t\t\t/* container for styled checkbox + label */\n\n\t\t\t+ label {\n\n\t\t\t\t/* styled checkbox */\n\n\t\t\t\t&::before {\n\t\t\t\t\tbackground: center no-repeat var(--gform-admin-color-white);\n\t\t\t\t\tblock-size: 1.375rem;\n\t\t\t\t\tborder: 1px solid var(--gform-admin-color-amethyst-smoke);\n\t\t\t\t\tborder-radius: 3px;\n\t\t\t\t\tcontent: \"\";\n\t\t\t\t\tdisplay: inline-block;\n\t\t\t\t\tinline-size: 1.375rem;\n\t\t\t\t\tmargin-inline-end: 0.375rem;\n\t\t\t\t\ttransition: var(--gform-admin-transition-inputs);\n\t\t\t\t\tvertical-align: middle;\n\t\t\t\t}\n\n\t\t\t\t&::selection {\n\t\t\t\t\tbackground: transparent;\n\t\t\t\t}\n\n\t\t\t}\n\t\t}\n\n\n\t\t&:hover,\n\t\t&:focus {\n\n\t\t\t+ label {\n\n\t\t\t\t&::before {\n\t\t\t\t\tborder: 1px solid var(--gform-admin-color-primary-light);\n\t\t\t\t\tbox-shadow: var(--gform-admin-box-shadow-focus);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&:checked:not(.field-choice-type--checkbox) {\n\n\t\t\t+ label {\n\n\t\t\t\t&::before {\n\t\t\t\t\tbackground-image: url(\"data:image/svg+xml,%3Csvg width='12' height='10' viewBox='0 0 12 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6.58579L10.2929 0.292893C10.6834 -0.0976311 11.3166 -0.0976311 11.7071 0.292893C12.0976 0.683418 12.0976 1.31658 11.7071 1.70711L4 9.41421L0.292893 5.70711C-0.0976311 5.31658 -0.0976311 4.68342 0.292893 4.29289C0.683418 3.90237 1.31658 3.90237 1.70711 4.29289L4 6.58579Z' fill='%233E7DA6'/%3E%3C/svg%3E\"); /* stylelint-disable-line */\n\t\t\t\t\tborder-color: var(--gform-admin-color-gravity-blue);\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--checkbox {\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--checkbox {\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\tbox-shadow: var(--gform-admin-box-shadow-micro);\n\t\t\t\tflex: none;\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}\n\n\t\t&:focus + .gform-label::before {\n\t\t\tbackground-color: var(--gform-admin-color-light-blue);\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,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQuMTMzIDYuOTQ3IDUuODc0LTUuODc0YS45MzMuOTMzIDAgMCAxIDEuMzIgMS4zMmwtNi44NCA2Ljg0YS41LjUgMCAwIDEtLjcwNyAwTC42NzMgNi4xMjZhLjkzMy45MzMgMCAxIDEgMS4zMi0xLjMybDIuMTQgMi4xNFoiIGZpbGw9IiMwRjNENkMiLz48L3N2Zz4=\"); /* stylelint-disable-line */\n\t\t}\n\n\t\t&:indeterminate + .gform-label::before {\n\t\t\tbackground-image: url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDEwIDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xLjUgMUg4LjUiIHN0cm9rZT0iIzBGM0Q2QyIgc3Ryb2tlLXdpZHRoPSIxLjY2NjY2IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==\"); /* 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,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEyLjMzMyAxIDUgOC4zMzMgMS42NjcgNSIgc3Ryb2tlPSIjRUNFREY4IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==\"); /* 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\tblock-size: 1.125rem;\n\t\t\t\tinline-size: 1.125rem;\n\t\t\t\tmargin-inline-end: var(--gform-admin-spacer-2);\n\t\t\t}\n\n\t\t\t&:checked + .gform-label::before {\n\t\t\t\tbackground-size: 10px 8px; /* stylelint-disable-line */\n\t\t\t}\n\n\t\t\t~ .gform-input-help-text {\n\t\t\t\tmargin-inline-start: 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\tblock-size: 1.375rem;\n\t\t\t\tinline-size: 1.375rem;\n\t\t\t\tmargin-block-start: -0.0625rem;\n\t\t\t\tmargin-inline-end: var(--gform-admin-spacer-3);\n\t\t\t}\n\n\t\t\t~ .gform-input-help-text {\n\t\t\t\tmargin-inline-start: 2.125rem;\n\t\t\t}\n\t\t}\n\t}\n}\n"]}