Merge branch 'master' of https://github.com/browngraphicslab/Dash-Web

1 files changed, 69 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..c23bab461
--- /dev/null
+++ b/src/client/views/search/NaviconButton.scss
@@ -0,0 +1,69 @@
+@import "../globalCssVariables";
+
+$height-icon: 15px;
+$width-line: 30px;
+$height-line: 4px;
+
+$transition-time: 0.4s;
+$rotation: 45deg;
+$translateY: ($height-icon / 2);
+$translateX: 0;
+
+#hamburger-icon {
+    width: $width-line;
+    height: $height-icon;
+    position: relative;
+    display: block;
+    transition: all $transition-time;
+    -webkit-transition: all $transition-time;
+    -moz-transition: all $transition-time;
+
+    .line {
+        display: block;
+        background: $alt-accent;
+        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%;
+        }
+    }
+}
+
+.filter-header.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);
+    }
+}
+
+.filter-header:hover #hamburger-icon {
+    transform: scale(1.1);
+    -webkit-transform: scale(1.1);
+    -moz-transform: scale(1.1);
+}
\ No newline at end of file