{"id":33,"date":"2018-04-27T14:55:49","date_gmt":"2018-04-27T14:55:49","guid":{"rendered":"https:\/\/sites.neoninspire.com\/style-guide\/?page_id=33"},"modified":"2018-05-18T22:08:40","modified_gmt":"2018-05-18T22:08:40","slug":"toggle","status":"publish","type":"page","link":"https:\/\/sites.neoninspire.com\/style-guide\/components\/toggle\/","title":{"rendered":"Toggle"},"content":{"rendered":"<p>Components<\/p>\n<h1>\n\t\tToggle<br \/>\n\t<\/h1>\n<h4>\n\t\tToggles help users activate and deactivate parameters that affect a specific outcome in Neon.<br \/>\n\t<\/h4>\n<p>Use toggles in system settings to activate user settings, utilities, or forms and transactions to flag accounts for specific criteria.<\/p>\n<h4>\n\t\t<a href=\"#\" title=\"Base Code\" target=\"_self\"><br \/>\n\t\tBase Code<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<pre>.toggle_label_base {\nfont-family: Lato-Regular;\nfont-size: 14px;\ncolor: #54698D;\nletter-spacing: 0;\n}\n<\/pre>\n<h2>\n\t\tStates<br \/>\n\t<\/h2>\n<p>There are 3 different states for the checkbox;<\/p>\n<ul>\n<li>off<\/li>\n<li>on<\/li>\n<li>off and disabled<\/li>\n<li>on and disabled<\/li>\n<\/ul>\n<h4>\n\t\t<a href=\"#\" title=\"Off\" target=\"_self\"><br \/>\n\t\tOff<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<pre>.switch {\nbackground: #FFFFFF;\nwidth: 20px;\nheight: 20px;\n}\n.toggle {\nbackground: #A8B7C7;\nborder-radius: 12px;\n}\n<\/pre>\n<h4>\n\t\t<a href=\"#\" title=\"On\" target=\"_self\"><br \/>\n\t\tOn<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<pre>.switch {\nbackground: #FFFFFF;\nwidth: 20px;\nheight: 20px;\n}\n.toggle_on {\nbackground: #0070D2;\nborder-radius: 12px;\nwidth: 48px;\nheight: 24px;\n}\n.toggle_label_on {\nfont-family: Lato-Bold;\nfont-size: 14px;\ncolor: #54698D;\nletter-spacing: 0;\nline-height: 17px;\n}\n<\/pre>\n<h4>\n\t\t<a href=\"#\" title=\"Off and Disabled\" target=\"_self\"><br \/>\n\t\tOff and Disabled<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<p>wrong code &#8211; needs replacing<\/p>\n<pre>.switch {\nbackground: #FFFFFF;\nwidth: 20px;\nheight: 20px;\n}\n.toggle_disabled_on {\nbackground: #0070D2;\nborder-radius: 12px;\nwidth: 48px;\nheight: 24px;\n}\n.toggle_label_disabled_on {\nfont-family: Lato-Bold;\nfont-size: 14px;\ncolor: #54698D;\nletter-spacing: 0;\n}\n<\/pre>\n<h4>\n\t\t<a href=\"#\" title=\"On and Disabled\" target=\"_self\"><br \/>\n\t\tOn and Disabled<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<pre>.switch {\nbackground: #FFFFFF;\nwidth: 20px;\nheight: 20px;\n}\n.toggle_disabled_on {\nbackground: #0070D2;\nborder-radius: 12px;\nwidth: 48px;\nheight: 24px;\n}\n.toggle_label_disabled_on {\nfont-family: Lato-Bold;\nfont-size: 14px;\ncolor: #54698D;\nletter-spacing: 0;\n}\n<\/pre>\n<h2>\n\t\tOverview of CSS Classes<br \/>\n\t<\/h2>\n<h5>\n\t\tSelector<br \/>\n\t<\/h5>\n<h5>\n\t\tSummary<br \/>\n\t<\/h5>\n<h5>\n\t\tParent Selector<br \/>\n\t<\/h5>\n<p><em>coming<\/em><\/p>\n<p>coming<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Components Toggle Toggles help users activate and deactivate parameters that affect a specific outcome in Neon. Use toggles in system settings to activate user settings, utilities, or forms and transactions to flag accounts for specific criteria. Base Code .toggle_label_base { font-family: Lato-Regular; font-size: 14px; color: #54698D; letter-spacing: 0; } States There are 3 different states&hellip;<\/p>\n","protected":false},"author":32,"featured_media":0,"parent":380,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-33","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/33","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/comments?post=33"}],"version-history":[{"count":5,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/33\/revisions"}],"predecessor-version":[{"id":891,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/33\/revisions\/891"}],"up":[{"embeddable":true,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/380"}],"wp:attachment":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/media?parent=33"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}