ux(): checkbox style test

public/app/plugins/panel/graph/styleEditor.html

@@ -3,15 +3,30 @@
     <h5 class="section-heading">Draw Modes</h5>
     <h5 class="section-heading">Draw Modes</h5>
     <div class="gf-form">
     <div class="gf-form">
       <label class="gf-form-label width-5">Bars</label>
       <label class="gf-form-label width-5">Bars</label>
-      <editor-checkbox text="Enable" model="ctrl.panel.bars" change="ctrl.render()"></editor-checkbox>
+			<div class="gf-form-switch-wrapper">
+				<div class="switch">
+					<input id="cmn-toggle-3" class="cmn-toggle cmn-toggle-round" type="checkbox" ng-model="ctrl.panel.bars">
+					<label for="cmn-toggle-3"></label>
+				</div>
+			</div>
     </div>
     </div>
     <div class="gf-form">
     <div class="gf-form">
       <label class="gf-form-label width-5">Lines</label>
       <label class="gf-form-label width-5">Lines</label>
-      <editor-checkbox text="Enable" model="ctrl.panel.lines" change="ctrl.render()"></editor-checkbox>
+			<div class="gf-form-switch-wrapper">
+				<div class="switch">
+					<input id="cmn-toggle-2" class="cmn-toggle cmn-toggle-round" type="checkbox" ng-model="ctrl.panel.lines">
+					<label for="cmn-toggle-2"></label>
+				</div>
+			</div>
     </div>
     </div>
     <div class="gf-form">
     <div class="gf-form">
       <label class="gf-form-label width-5">Points</label>
       <label class="gf-form-label width-5">Points</label>
-      <editor-checkbox text="Enable" model="ctrl.panel.points" change="ctrl.render()"></editor-checkbox>
+			<div class="gf-form-switch-wrapper">
+				<div class="switch">
+					<input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round" type="checkbox" ng-model="ctrl.panel.points">
+					<label for="cmn-toggle-1"></label>
+				</div>
+			</div>
     </div>
     </div>
   </div>
   </div>
   <div class="section">
   <div class="section">

public/sass/_grafana.scss

@@ -35,6 +35,7 @@
 @import "components/navs";
 @import "components/navs";
 @import "components/tabs";
 @import "components/tabs";
 @import "components/alerts";
 @import "components/alerts";
+@import "components/switch";
 @import "components/tooltip";
 @import "components/tooltip";
 @import "components/tags";
 @import "components/tags";
 @import "components/panel_graph";
 @import "components/panel_graph";

public/sass/components/_gf-form.scss

@@ -50,6 +50,12 @@ $gf-form-label-margin: 0.25rem;
   @include border-radius($label-border-radius-sm);
   @include border-radius($label-border-radius-sm);
 }
 }
 
 
+.gf-form-switch-wrapper {
+  margin-right: $gf-form-label-margin;
+  padding: $input-padding-y $input-padding-x;
+  background-color: $input-bg;
+}
+
 .gf-form-checkbox {
 .gf-form-checkbox {
   flex-shrink: 0;
   flex-shrink: 0;
   padding: $input-padding-y $input-padding-x;
   padding: $input-padding-y $input-padding-x;
@@ -139,8 +145,8 @@ $gf-form-label-margin: 0.25rem;
   }
   }
 }
 }
 
 
-.gf-form-select-wrapper + .gf-form-select-wrapper { 
-  margin-left: $gf-form-label-margin; 
+.gf-form-select-wrapper + .gf-form-select-wrapper {
+  margin-left: $gf-form-label-margin;
 }
 }
 
 
 .gf-form-btn {
 .gf-form-btn {
@@ -149,3 +155,5 @@ $gf-form-label-margin: 0.25rem;
   flex-shrink: 0;
   flex-shrink: 0;
   flex-grow: 0;
   flex-grow: 0;
 }
 }
+
+

public/sass/components/_switch.scss

+$switch-border-radius: 1rem;
+$switch-width: 3.5rem;
+$switch-height: 1.5rem;
+
+/* ============================================================
+  COMMON
+============================================================ */
+.cmn-toggle {
+  position: absolute;
+  margin-left: -9999px;
+  visibility: hidden;
+}
+.cmn-toggle + label {
+  display: block;
+  position: relative;
+  cursor: pointer;
+  outline: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+/* ============================================================
+  SWITCH 1 - ROUND
+============================================================ */
+input.cmn-toggle-round + label {
+  padding: 2px;
+  width: $switch-width;
+  height: $switch-height;
+  background-color: $dark-1;
+  border-radius: $switch-border-radius;
+}
+
+input.cmn-toggle-round + label:before, input.cmn-toggle-round + label:after {
+  display: block;
+  position: absolute;
+  top: 1px;
+  left: 1px;
+  bottom: 1px;
+  content: "";
+}
+
+input.cmn-toggle-round + label:before {
+  right: 1px;
+  background-color: $card-background;
+  border-radius: $switch-border-radius;
+  box-shadow: $card-shadow;
+  transition: background 0.4s;
+}
+
+input.cmn-toggle-round + label:after {
+  width: $switch-height;
+  background-color: $dark-5;
+  border-radius: 100%;
+  box-shadow: $card-shadow;
+  transition: margin 0.4s;
+}
+
+input.cmn-toggle-round:checked + label:before {
+  background-color: $blue;
+}
+
+input.cmn-toggle-round:checked + label:after {
+  margin-left: $switch-width - $switch-height;
+}
+
+/* ============================================================
+  SWITCH 2 - ROUND FLAT
+============================================================ */
+input.cmn-toggle-round-flat + label {
+  padding: 2px;
+  width: 120px;
+  height: 60px;
+  background-color: #dddddd;
+  -webkit-border-radius: 60px;
+  -moz-border-radius: 60px;
+  -ms-border-radius: 60px;
+  -o-border-radius: 60px;
+  border-radius: 60px;
+  -webkit-transition: background 0.4s;
+  -moz-transition: background 0.4s;
+  -o-transition: background 0.4s;
+  transition: background 0.4s;
+}
+input.cmn-toggle-round-flat + label:before, input.cmn-toggle-round-flat + label:after {
+  display: block;
+  position: absolute;
+  content: "";
+}
+input.cmn-toggle-round-flat + label:before {
+  top: 2px;
+  left: 2px;
+  bottom: 2px;
+  right: 2px;
+  background-color: #fff;
+  -webkit-border-radius: 60px;
+  -moz-border-radius: 60px;
+  -ms-border-radius: 60px;
+  -o-border-radius: 60px;
+  border-radius: 60px;
+  -webkit-transition: background 0.4s;
+  -moz-transition: background 0.4s;
+  -o-transition: background 0.4s;
+  transition: background 0.4s;
+}
+input.cmn-toggle-round-flat + label:after {
+  top: 4px;
+  left: 4px;
+  bottom: 4px;
+  width: 52px;
+  background-color: #dddddd;
+  -webkit-border-radius: 52px;
+  -moz-border-radius: 52px;
+  -ms-border-radius: 52px;
+  -o-border-radius: 52px;
+  border-radius: 52px;
+  -webkit-transition: margin 0.4s, background 0.4s;
+  -moz-transition: margin 0.4s, background 0.4s;
+  -o-transition: margin 0.4s, background 0.4s;
+  transition: margin 0.4s, background 0.4s;
+}
+input.cmn-toggle-round-flat:checked + label {
+  background-color: #8ce196;
+}
+input.cmn-toggle-round-flat:checked + label:after {
+  margin-left: 60px;
+  background-color: #8ce196;
+}
+
+/* ============================================================
+  SWITCH 3 - YES NO
+============================================================ */
+input.cmn-toggle-yes-no + label {
+  padding: 2px;
+  width: 120px;
+  height: 60px;
+}
+input.cmn-toggle-yes-no + label:before, input.cmn-toggle-yes-no + label:after {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  color: #fff;
+  font-family: "Roboto Slab", serif;
+  font-size: 20px;
+  text-align: center;
+  line-height: 60px;
+}
+input.cmn-toggle-yes-no + label:before {
+  background-color: #dddddd;
+  content: attr(data-off);
+  -webkit-transition: -webkit-transform 0.5s;
+  -moz-transition: -moz-transform 0.5s;
+  -o-transition: -o-transform 0.5s;
+  transition: transform 0.5s;
+  -webkit-backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  -ms-backface-visibility: hidden;
+  -o-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+input.cmn-toggle-yes-no + label:after {
+  background-color: #8ce196;
+  content: attr(data-on);
+  -webkit-transition: -webkit-transform 0.5s;
+  -moz-transition: -moz-transform 0.5s;
+  -o-transition: -o-transform 0.5s;
+  transition: transform 0.5s;
+  -webkit-transform: rotateY(180deg);
+  -moz-transform: rotateY(180deg);
+  -ms-transform: rotateY(180deg);
+  -o-transform: rotateY(180deg);
+  transform: rotateY(180deg);
+  -webkit-backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  -ms-backface-visibility: hidden;
+  -o-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+input.cmn-toggle-yes-no:checked + label:before {
+  -webkit-transform: rotateY(180deg);
+  -moz-transform: rotateY(180deg);
+  -ms-transform: rotateY(180deg);
+  -o-transform: rotateY(180deg);
+  transform: rotateY(180deg);
+}
+input.cmn-toggle-yes-no:checked + label:after {
+  -webkit-transform: rotateY(0);
+  -moz-transform: rotateY(0);
+  -ms-transform: rotateY(0);
+  -o-transform: rotateY(0);
+  transform: rotateY(0);
+}