Togglebutton theming

Dropdown menu theming remaining

static/lib/autocomplete.css

@@ -13,6 +13,7 @@
   border: 1px solid #2C2C2C;
   color: #FFF;
   font-family: "Open Sans";
+  transition: background 250ms;
 }
 
 .autocomplete ul{
@@ -50,3 +51,7 @@
   background: #666;
   color: #fff;
 }
+.autocomplete input:focus {
+    background: #FFF;
+    color: #000;
+}

static/partials/elements/sidebarLogs.html

@@ -3,7 +3,7 @@
     <h3 class="sidebar__title">
         Files
         <span class="tiny pull-right">
-            <form action="">
+            <form action="" class="checkbox">
                 <input type="checkbox" id="selectAll" ng-model="selectAll">
                 <label for="selectAll">Select all</label>
             </form>
@@ -13,8 +13,8 @@
     <ul class="content">
 
         <li ng-repeat="file in currentFiles" class="sidebar__item">
-            <form action="">
+            <form action="" class="checkbox">
-                <input type="checkbox" id="check{{$id}}" ng-model="file.selected">
+                <input type="checkbox" class="checkbox" id="check{{$id}}" ng-model="file.selected">
                 <label for="check{{$id}}">{{file.name}}</label>
             </form>
         </li>

static/style.css

@@ -54,6 +54,7 @@ body {
     font-size: 9px;
     position: relative;
     top: -3px;
+    width: 95px;
 }
 
 .input {
@@ -111,7 +112,7 @@ body {
     .header__menu-button {
         position: absolute;
         left: 10px;
-        top: 10px;
+        top: 12px;
         height: 30px;
         width: 40px;
 
@@ -122,7 +123,7 @@ body {
     .header__title {
         position: absolute;
         top: 5px;
-        left: 70px;
+        left: 55px;
         height: 30px;
         width: 500px;
         font-size: 11px;
@@ -360,6 +361,7 @@ body {
     position: fixed;
     z-index: 5;
     top: 49px;
+    overflow: hidden;
 }
     .actions {
         margin: 0;
@@ -403,7 +405,9 @@ body {
 
                 background: #222;
                 outline: none;
-                background: #222;  font-size: 11px;  padding: 8px;  color: #FFF;  border: 1px solid #2C2C2C;
+                background: #222;  font-size: 11px;
+                padding: 8px 4px;  color: #FFF;  border: 1px solid #2C2C2C;
+                transition: background 250ms;
 }
         .action--reload {
             color: #888;
@@ -540,10 +544,11 @@ body {
         right: 22px;
         width: auto;
 
-        border-color: #333;
         border-radius: 4px;
         margin-top: 5px;
         overflow: hidden;
+        margin-bottom: 5px;
+        border: none;
 }
 
 
@@ -575,6 +580,7 @@ label {
     position: relative;
     top: -3px;
     font-size: 9px;
+    letter-spacing: 0;
 }
 
 form.ng-pristine.ng-valid {
@@ -625,3 +631,130 @@ button.toggle-button.active {
 .log:last-child .log__item {
     padding-bottom: 15px;
 }
+
+.action--search input:focus {
+    color: #000;
+    background: #FFF;
+}
+
+/*
+.toggle {
+  width: 62px;
+  height: 19px;
+  background: #333;
+  position: relative;
+  border-radius: 50px;
+}
+.toggle:after {
+  content: 'OFF';
+  color: #111;
+  position: absolute;
+  right: 7px;
+  z-index: 0;
+  font: 9px "Open Sans", sans-serif;
+  font-weight: bold;
+  top: 3px;
+}
+.toggle:before {
+  content: 'ON';
+  color: #14654C;
+  position: absolute;
+  left: 9px;
+  z-index: 2;
+  font: 9px "Open Sans", sans-serif;
+  font-weight: bold;
+  top: 3px;
+}
+.toggle .top {
+    background:#21ce99;
+    position: absolute;
+    left:0;
+    right:0;
+    width:100%;
+    height:100%;
+    border-radius: 50px;
+    z-index: 1;
+    opacity: 0;
+    top: 0;
+  -webkit-transition: all 0.15s ease;
+          transition: all 0.15s ease;
+}
+.toggle label {
+  display: block;
+  width: 32px;
+  height: 17px;
+  cursor: pointer;
+  position: absolute;
+  top: 1px;
+  left: 1px;
+  z-index: 2;
+  background: #fff;
+  border-radius: 50px;
+  -webkit-transition: all 0.4s ease;
+          transition: all 0.4s ease;
+}
+.toggle input[type=checkbox] {
+  visibility: hidden;
+}
+.toggle input[type=checkbox]:checked ~ label {
+  left: 29px;
+}
+
+.toggle input[type=checkbox]:checked ~ .top {
+    opacity:1;
+}
+
+*/
+
+/* .checkbox */
+.checkbox {
+  width: auto;
+  position: relative;
+}
+.checkbox label {
+  width: 100%;
+  height: 13px;
+  cursor: pointer;
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-radius: 3px;
+  text-indent: 22px;
+}
+.checkbox label:after {
+  content: '';
+  width: 9px;
+  height: 5px;
+  position: absolute;
+  top: 0px;
+  left: 2px;
+  border: 3px solid #21ce99;
+  border-top: none;
+  border-right: none;
+  background: transparent;
+  opacity: 0;
+  -webkit-transform: rotate(-45deg);
+      -ms-transform: rotate(-45deg);
+          transform: rotate(-45deg);
+}
+
+.checkbox label:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-radius: 2px;
+  background: #111;
+  border: 1px solid #333;
+  height: 10px;
+  width: 10px;
+}
+.checkbox label:hover::after {
+  opacity: 0.3;
+}
+.checkbox input[type=checkbox] {
+  visibility: hidden;
+}
+.checkbox input[type=checkbox]:checked + label:after {
+  opacity: 1;
+}