Rocker Switch
This UI-template adds a 3D-looking rocker switch demo and source : https://codepen.io/marcusconnor/pen/QJNvMa
[{"id":"c412591f.e22b28","type":"ui_template","z":"2efb9720.d1e188","group":"","name":"Rocker Switch","order":1,"width":4,"height":3,"format":"<table style=\"width: 100%; text-align: center;\">\n <tr>\n <td>\n <span style=\"vertical-align: middle;font-weight: bold;\">Label</span>\n </td>\n </tr>\n <tr>\n <td> \n <label class=\"rocker rocker-mid\">\n <input type=\"checkbox\" ng-model=\"msg.payload\" ng-change=\"send(msg)\" checked>\n <md-tooltip md-direction=\"top\">Enable or disable something important!</md-tooltip>\n <span class=\"switch-left\">On</span>\n <span class=\"switch-right\">Off</span>\n </label>\n </td>\n </tr>\n</table>\n\n<style>\n html {\n box-sizing: border-box;\n font-family: 'Arial', sans-serif;\n font-size: 100%;\n}\n*, *:before, *:after {\n box-sizing: inherit;\n margin:0;\n padding:0;\n}\n\n/* Switch starts here */\n.rocker {\n display: inline-block;\n position: relative;\n /*\n SIZE OF SWITCH\n ==============\n All sizes are in em - therefore\n changing the font-size here\n will change the size of the switch.\n See .rocker-small below as example.\n */\n font-size: 0.38em;\n font-weight: bold;\n text-align: center;\n text-transform: uppercase;\n color: #888;\n width: 7em;\n height: 4em;\n overflow: hidden;\n border-bottom: 0.5em solid #eee;\n}\n\n.rocker-small {\n font-size: 0.38em; /* Sizes the switch */\n margin: 0em;\n}\n\n.rocker-mid {\n font-size: 1.1em; /* Sizes the switch */\n margin: 0em;\n}\n\n.rocker::before {\n content: \"\";\n position: absolute;\n top: 0.5em;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: #999;\n border: 0.5em solid #eee;\n border-bottom: 0;\n}\n\n.rocker input {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.switch-left,\n.switch-right {\n cursor: pointer;\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 2.5em;\n width: 3em;\n transition: 0.2s;\n}\n\n.switch-left {\n height: 2.4em;\n width: 2.75em;\n left: 0.85em;\n bottom: 0.4em;\n background-color: #ddd;\n transform: rotate(15deg) skewX(15deg);\n}\n\n.switch-right {\n right: 0.5em;\n bottom: 0;\n background-color: #bd5757;\n color: #fff;\n}\n\n.switch-left::before,\n.switch-right::before {\n content: \"\";\n position: absolute;\n width: 0.4em;\n height: 2.45em;\n bottom: -0.45em;\n background-color: #ccc;\n transform: skewY(-65deg);\n}\n\n.switch-left::before {\n left: -0.4em;\n}\n\n.switch-right::before {\n right: -0.375em;\n background-color: transparent;\n transform: skewY(65deg);\n}\n\ninput:checked + .switch-left {\n background-color: #0084d0;\n color: #fff;\n bottom: 0px;\n left: 0.5em;\n height: 2.5em;\n width: 3em;\n transform: rotate(0deg) skewX(0deg);\n}\n\ninput:checked + .switch-left::before {\n background-color: transparent;\n width: 3.0833em;\n}\n\ninput:checked + .switch-left + .switch-right {\n background-color: #ddd;\n color: #888;\n bottom: 0.4em;\n right: 0.8em;\n height: 2.4em;\n width: 2.75em;\n transform: rotate(-15deg) skewX(-15deg);\n}\n\ninput:checked + .switch-left + .switch-right::before {\n background-color: #ccc;\n}\n\n/* Keyboard Users */\ninput:focus + .switch-left {\n color: #333;\n}\n\ninput:checked:focus + .switch-left {\n color: #fff;\n}\n\ninput:focus + .switch-left + .switch-right {\n color: #fff;\n}\n\ninput:checked:focus + .switch-left + .switch-right {\n color: #333;\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":561,"y":942,"wires":[]}]
