bz-toggler

buildoz.css

@@ -1,6 +1,13 @@
 bz-select {
     display: block;
     margin: .5rem 0 .5rem 0;
+    position:relative;
+}
+bz-select[disabled] > button{
+    opacity: 0.6;
+    cursor: not-allowed;
+    pointer-events: none;
+    filter: grayscale(30%);
 }
 bz-select > button{
     width:100%;
@@ -16,7 +23,7 @@ bz-select > button::after {
     content: "\00BB";
     transform: rotate(90deg) translateX(-0.4rem);
     position: absolute;
-    right: 1.5rem;
+    right: 0.5rem;
     pointer-events: none;
     font-size: 1.5rem;
     color: #444;
@@ -45,4 +52,74 @@ bz-select option.open{
 bz-select option:hover{
     background-color: #44F;
     color: #FFF;
+}
+
+
+
+
+bz-toggler{
+    outline: none;
+    min-height: 1.5rem;
+    padding: 0.75rem !important;
+    display: inline-table;
+    max-width: fit-content;
+    transition: all 0.5s;
+}
+bz-toggler div.toggle-label-left{
+    padding-right: 0.3rem;
+    display: table-cell;
+    vertical-align: middle;
+    text-align: right;
+    font-size:.8rem;
+}
+bz-toggler div.toggle-label-right{
+    padding-left: 0.3rem;
+    display: table-cell;
+    vertical-align: middle;
+    text-align: left;
+    font-size:.8rem;
+}
+bz-toggler div.toggle-switch{
+    user-select: none;
+    height: inherit;
+    cursor: pointer;
+    display: table-cell;
+    vertical-align: middle;
+    text-align: center;
+}
+bz-toggler div.toggle-switch span.toggle-bar {
+    display: inline-block;
+    position: relative;
+    background-color: #CCC;
+}
+
+bz-toggler div.toggle-switch span.toggle-thumb {
+    display: inline-block;
+    border-radius: 50%;
+    background-color: white;
+    position: absolute;
+    z-index: 1;
+}
+
+bz-toggler div.toggle-switch span.toggle-thumb:not(.turned-on) {
+    left: 0;
+    transition: all 0.4s;
+}
+bz-toggler div.toggle-switch span.toggle-thumb.turned-on {
+    transition: all 0.4s;
+}
+bz-toggler div.toggle-switch span.toggle-bar  { 
+    width: 2rem;
+    height: 0.75rem;
+    border-radius: .75rem;   
+}
+
+bz-toggler div.toggle-switch span.toggle-thumb  { 
+    height: 1rem;
+    width: 1rem;
+    top: -0.1rem;
+}
+
+bz-toggler div.toggle-switch span.toggle-thumb.turned-on {
+    left : 1rem;
 }