about to make some big changes - things are working nicely

1 files changed, 95 insertions, 0 deletions

diff --git a/src/client/views/search/NaviconButton.scss b/src/client/views/search/NaviconButton.scss
new file mode 100644
index 000000000..529f11a57
--- /dev/null
+++ b/src/client/views/search/NaviconButton.scss
@@ -0,0 +1,95 @@
+@import "../globalCssVariables";
+
+
+@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
+
+// $background: #3d566e;
+$color: #ecf0f1;
+
+$height-icon: 20px;
+$width-line: 30px;
+$height-line: 4px;
+
+$transition-time: 0.4s;
+$rotation: 45deg;
+$translateY: ($height-icon / 2);
+$translateX: 0;
+
+// body {
+//   background: $background;
+//   color: $color;
+//   font-family: 'Montserrat', sans-serif;
+//   -webkit-font-smoothing: antialiased;
+//   text-align:center;
+// }
+
+#hamburger-icon {
+  width:$width-line;
+  height:$height-icon;
+  position:relative;
+  display:block;
+//   margin: ($height-icon * 2) auto $height-icon auto;
+  
+  .line {
+    display:block;
+    background:$color;
+    width:$width-line;
+    height:$height-line;
+    position:absolute;
+    left:0;
+    border-radius:($height-line / 2);
+    transition: all $transition-time;
+    -webkit-transition: all $transition-time;
+    -moz-transition: all $transition-time;
+    
+    &.line-1 {
+      top:0;
+    }
+    &.line-2 {
+      top:50%;
+    }
+    &.line-3 {
+      top:100%;
+    }
+  }
+  &:hover, &:focus {
+     .line-1 {
+        transform: translateY($height-line / 2 * -1);
+        -webkit-transform: translateY($height-line / 2 * -1);
+        -moz-transform: translateY($height-line / 2 * -1);
+     }
+    .line-3 {
+        transform: translateY($height-line / 2);
+        -webkit-transform: translateY($height-line / 2);
+        -moz-transform: translateY($height-line / 2);
+    }  
+  }
+  &.active {
+    .line-1 {
+      transform: translateY($translateY) translateX($translateX) rotate($rotation);
+      -webkit-transform: translateY($translateY) translateX($translateX) rotate($rotation);
+      -moz-transform: translateY($translateY) translateX($translateX) rotate($rotation);
+    }
+    .line-2 {
+      opacity:0;
+    }
+    .line-3 {
+      transform: translateY($translateY * -1) translateX($translateX) rotate($rotation * -1);
+      -webkit-transform: translateY($translateY * -1) translateX($translateX) rotate($rotation * -1);
+      -moz-transform: translateY($translateY * -1) translateX($translateX) rotate($rotation * -1);
+    }
+  }
+}
+
+// h1 {
+//   text-transform:uppercase;
+// }
+// a {
+//   text-decoration:none;
+//   color:#95a5a6;
+//   margin: 0.5em 1.5em;
+//   display:inline-block;
+//   &:hover, &:focus {
+//     color:$color;
+//   }
+// }
\ No newline at end of file