Bricks Checkbox Switcher

checkbox-switcher.json

{"id":331,"name":"checkbox-switcher","title":"Checkbox Switcher","date":"2024-02-27 22:25:10","date_formatted":"February 27, 2024","author":{"name":"wpeasy","avatar":"https:\/\/secure.gravatar.com\/avatar\/9911a97df3fb8c171d76f74f51feb01b?s=60&d=mm&r=g","url":"http:\/\/base-wordpress.local"},"permalink":"https:\/\/base-wordpress.local\/template\/checkbox-switcher\/","thumbnail":false,"bundles":[],"tags":[],"type":"section","content":[{"id":"vycagh","name":"section","parent":0,"children":["emodvu"],"settings":[],"label":"Checkbox Based"},{"id":"emodvu","name":"container","parent":"vycagh","children":["dhlctq","jippoh","mfwwqu"],"settings":{"_cssCustom":"\n.bricks-is-frontend #brxe-emodvu:has(.toggle-switch__checkbox:checked) .state-0-content{\n\tdisplay: none;\n}\n\n\n.bricks-is-frontend #brxe-emodvu:not(:has(.toggle-switch__checkbox:checked)) .state-1-content{\n\tdisplay: none;\n}"},"label":"Free Pro switcher (CSS)"},{"id":"dhlctq","name":"block","parent":"emodvu","children":["igpdel","erdeuh","prerjb"],"settings":{"_alignItems":"center"},"label":"Header Wrapper"},{"id":"igpdel","name":"heading","parent":"dhlctq","children":[],"settings":{"text":"I am a heading"}},{"id":"erdeuh","name":"text-basic","parent":"dhlctq","children":[],"settings":{"text":"Here goes your text ... Select any part of your text to access the formatting toolbar.","tag":"p"}},{"id":"prerjb","name":"div","parent":"dhlctq","children":["gygxhf"],"settings":{"_cssGlobalClasses":["bdqcdr"]},"label":"Toggle Switch (CSS)"},{"id":"gygxhf","name":"div","parent":"prerjb","children":["ugxlni","zoupxg"],"settings":{"_cssGlobalClasses":["sabnds"],"tag":"custom","customTag":"fieldset"},"label":"Fieldset"},{"id":"zoupxg","name":"div","parent":"gygxhf","children":["bkpylw","ktugcd","zwxuhp"],"settings":{"_cssGlobalClasses":["cbanjs"],"tag":"custom","customTag":"label","_attributes":[{"id":"dfjjxu","name":"aria-label","value":"Switch uncheck for Free, check for Pro options"}]},"label":"Label"},{"id":"bkpylw","name":"div","parent":"zoupxg","children":[],"settings":{"_cssGlobalClasses":["ekhvog"],"tag":"custom","customTag":"input","_attributes":[{"id":"lxgxpe","name":"type","value":"checkbox"},{"id":"uknctj","name":"tabindex","value":"0"}]},"label":"Checkbox"},{"id":"ktugcd","name":"text-basic","parent":"zoupxg","children":[],"settings":{"text":"Free","tag":"span","_cssGlobalClasses":["uccdle"]},"label":"Label 0"},{"id":"zwxuhp","name":"text-basic","parent":"zoupxg","children":[],"settings":{"text":"Pro","tag":"span","_cssGlobalClasses":["gdufft"]},"label":"Label 1"},{"id":"ugxlni","name":"text-basic","parent":"gygxhf","children":[],"settings":{"text":"Toggle Switch","tag":"custom","_cssGlobalClasses":["gbksiv"],"customTag":"legend"},"label":"Legend"},{"id":"jippoh","name":"block","parent":"emodvu","children":["aihdrs"],"settings":{"_cssGlobalClasses":["yvwhxj"],"_background":{"color":{"id":"bbcolors_secondary","name":"secondary","raw":"var(--secondary)"}}},"label":"State 0 Content"},{"id":"mfwwqu","name":"block","parent":"emodvu","children":["xaybks"],"settings":{"_cssGlobalClasses":["bwcywn"]},"label":"State 1 Content"},{"id":"aihdrs","name":"text-basic","parent":"jippoh","children":[],"settings":{"text":"Free content","tag":"p"}},{"id":"xaybks","name":"text-basic","parent":"mfwwqu","children":[],"settings":{"text":"Pro Content","tag":"p"}},{"id":"zmxmax","name":"section","parent":0,"children":["rmmith"],"settings":[],"label":"Checkbox Based"},{"id":"rmmith","name":"container","parent":"zmxmax","children":["qgzwfd","bpmhmr","gepdbf"],"settings":{"_cssCustom":"\n.bricks-is-frontend #brxe-rmmith:has(.toggle-switch__checkbox:checked) .state-0-content{\n\tdisplay: none;\n}\n\n\n.bricks-is-frontend #brxe-rmmith:not(:has(.toggle-switch__checkbox:checked)) .state-1-content{\n\tdisplay: none;\n}"},"label":"Free Pro switcher (CSS)"},{"id":"qgzwfd","name":"block","parent":"rmmith","children":["idzier","liqzce","ejsytg"],"settings":{"_alignItems":"center"},"label":"Header Wrapper"},{"id":"bpmhmr","name":"block","parent":"rmmith","children":["ypyfww"],"settings":{"_cssGlobalClasses":["yvwhxj"],"_background":{"color":{"id":"bbcolors_secondary","name":"secondary","raw":"var(--secondary)"}}},"label":"State 0 Content"},{"id":"gepdbf","name":"block","parent":"rmmith","children":["rxaxcr"],"settings":{"_cssGlobalClasses":["bwcywn"]},"label":"State 1 Content"},{"id":"idzier","name":"heading","parent":"qgzwfd","children":[],"settings":{"text":"I am a heading"}},{"id":"liqzce","name":"text-basic","parent":"qgzwfd","children":[],"settings":{"text":"Here goes your text ... Select any part of your text to access the formatting toolbar.","tag":"p"}},{"id":"ejsytg","name":"div","parent":"qgzwfd","children":["xvlyyk"],"settings":{"_cssGlobalClasses":["bdqcdr"]},"label":"Toggle Switch (CSS)"},{"id":"ypyfww","name":"text-basic","parent":"bpmhmr","children":[],"settings":{"text":"Free content","tag":"p"}},{"id":"rxaxcr","name":"text-basic","parent":"gepdbf","children":[],"settings":{"text":"Pro Content","tag":"p"}},{"id":"xvlyyk","name":"div","parent":"ejsytg","children":["azhemu","hovumh"],"settings":{"_cssGlobalClasses":["sabnds"],"tag":"custom","customTag":"fieldset"},"label":"Fieldset"},{"id":"azhemu","name":"text-basic","parent":"xvlyyk","children":[],"settings":{"text":"Toggle Switch","tag":"custom","_cssGlobalClasses":["gbksiv"],"customTag":"legend"},"label":"Legend"},{"id":"hovumh","name":"div","parent":"xvlyyk","children":["zmotbp","pwdgdb","zktbum"],"settings":{"_cssGlobalClasses":["cbanjs"],"tag":"custom","customTag":"label","_attributes":[{"id":"dfjjxu","name":"aria-label","value":"Switch uncheck for Free, check for Pro options"}]},"label":"Label"},{"id":"zmotbp","name":"div","parent":"hovumh","children":[],"settings":{"_cssGlobalClasses":["ekhvog"],"tag":"custom","customTag":"input","_attributes":[{"id":"lxgxpe","name":"type","value":"checkbox"},{"id":"uknctj","name":"tabindex","value":"0"}]},"label":"Checkbox"},{"id":"pwdgdb","name":"text-basic","parent":"hovumh","children":[],"settings":{"text":"Monthly","tag":"span","_cssGlobalClasses":["uccdle"]},"label":"Label 0"},{"id":"zktbum","name":"text-basic","parent":"hovumh","children":[],"settings":{"text":"Anual","tag":"span","_cssGlobalClasses":["gdufft"]},"label":"Label 1"}],"templateType":"section","global_classes":[{"id":"bdqcdr","name":"toggle-switch","settings":{"_cssCustom":"\n.toggle-switch{\n  --transition: all 0.3s ease-out;\n\t--fieldset-padding: 0;\n  \n  --fieldset-border-color: var(--action-light-trans-20);\n  \n  --inner-padding: 2px; \n  --switch-padding: 0.5em 1em;\n  \n  --unchecked-track-bg:  var(--secondary-light-trans-20);\n  --checked-track-bg:  var(--action-light-trans-20);\n  --track-bg: var(--unchecked-track-bg);\n  \n\t--unchecked-label-0-color: var(--secondary-light);\n  --checked-label-0-color: var(--secondary-light-trans-40);\n  --label-0-color: var(--unchecked-label-0-color);\n  \n  --unchecked-label-1-color: var(--action-light-trans-40);\n  --checked-label-1-color: var(--action-light);\n  --label-1-color: var(--unchecked-label-1-color);\n  \n  --unchecked-switch-bg: #77770044; \n  --checked-switch-bg:#ff000055; \n  --switch-bg: var(--unchecked-switch-bg);\n\n  \n  --inset-inline-start: var(--inner-padding);\n  --inset-inline-end: calc( 50% + var(--inner-padding));\n  --line-height: 1;\n  --font-weight: bold;\n}\n\n.toggle-switch__fieldset{\n  transition: var(--transition);\n  padding: var(--fieldset-padding);\n\tborder: 1px solid var(--fieldset-border-color);\n  border-radius: 300px;\n  position: relative;\n  background: var( --track-bg);\n}\n\n.toggle-switch__fieldset::before{\n  transition: var(--transition);\n  content: \"\";\n  position: absolute;\n  background: var(--switch-bg);\n  inset-block: var(--inner-padding);\n  inset-inline-start: var(--inset-inline-start);\n  inset-inline-end: var(--inset-inline-end);\n  border-radius: 300px;\n  \n}\n\n\n.toggle-switch__legend, .toggle-switch__checkbox{\n\tposition: absolute;\n  left: -999999px;\n  width: 0;\n  height: 0;\n}\n\n.toggle-switch__label{\n\tmargin: 0;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  position: relative;\n  line-height: var(--line-height);\n  font-weight: var(--font-weight);\n  display: flex;\n  place-content: center;\n}\n\n.toggle-switch__label-0, .toggle-switch__label-1{\n  transition: var(--transition);\n  display: flex;\n\tpadding: var(--switch-padding);\n  cursor: pointer;\n}\n\n.toggle-switch__label-0{\n  color: var(--label-0-color); \n}\n\n.toggle-switch__label-1{\n\tcolor: var(--label-1-color);\n}\n\n.toggle-switch:has(:checked){\n  --inset-inline-start: calc(50% + var(--inner-padding));\n  --inset-inline-end: var(--inner-padding);\n  --track-bg: var( --checked-track-bg);\n  \n  --switch-bg: var(--checked-switch-bg);\n  --label-0-color: var(--checked-label-0-color);\n  --label-1-color: var(--checked-label-1-color);\n}\n\n.toggle-switch__fieldset:focus-within {\n\tbox-shadow: 0 0 var(--focus-width) var(--focus-color);\n}"}},{"id":"sabnds","name":"toggle-switch__fieldset","settings":[]},{"id":"gbksiv","name":"toggle-switch__legend","settings":[]},{"id":"cbanjs","name":"toggle-switch__label","settings":[]},{"id":"ekhvog","name":"toggle-switch__checkbox","settings":[]},{"id":"uccdle","name":"toggle-switch__label-0","settings":[]},{"id":"gdufft","name":"toggle-switch__label-1","settings":[]},{"id":"yvwhxj","name":"state-0-content","settings":{"_alignItems":"center"}},{"id":"bwcywn","name":"state-1-content","settings":{"_alignItems":"center","_background":{"color":{"id":"bbcolors_action","name":"action","raw":"var(--action)"}}}}]}