posting challenge v1

src/styles/menu.scss

@@ -0,0 +1,109 @@
+.menu {
+  background-color: rgba(255, 255, 255, 0.8);
+  height: 100%;
+  left: -20em;
+  min-width: 200px;
+  padding: 0 1em;
+  position: fixed;
+  transition: all .6s cubic-bezier(.9,0,.33,1) .2s;
+  width: 20em;
+  z-index: 1;
+
+  // styles for the hamburger
+  .tab {
+    position: absolute;
+    width: 50px;
+    height: 50px;
+    right: -50px;
+    cursor: pointer;
+    padding: 7px 9px;
+    border-left: 0;
+    border-radius: 10px 10px 10px 10px;
+    transition: right .6s cubic-bezier(.9,0,.33,1) .2s;
+
+    i {
+      position: absolute;
+      top: 7px;
+      left: 9px;
+      transition: opacity .6s cubic-bezier(.9,0,.33,1) .2s;
+      font-size: 36px;
+    }
+
+    .open {
+      color: rgba(255, 255, 255, 0.4);
+      opacity: 1;
+    }
+
+    .close {
+      color: rgba(0, 0, 0, 0.4);
+      opacity: 0;
+    }
+  }
+
+  input {
+    background-color: rgba(0,0,0,0);
+    border-bottom-color: rgba($mojo, .6);
+    border-width: 0 0 2px 0;
+    font-size: 1.25em;
+    font-style: italic;
+    width: 250px;
+
+    text-transform: capitalize;
+
+    transition: border-bottom-color .6s ease;
+
+    &.mojo {border-bottom-color: rgba($mojo, .6);}
+    &.governor-bay {border-bottom-color: rgba($governor-bay, .6);}
+    &.bluewood {border-bottom-color: rgba($bluewood, .6);}
+    &.fire-bush {border-bottom-color: rgba($fire-bush, .6);}
+    &.burnt-sienna {border-bottom-color: rgba($burnt-sienna, .6);}
+    &.wine-berry {border-bottom-color: rgba($wine-berry, .6);}
+    &.tom-thumb {border-bottom-color: rgba($tom-thumb, .6);}
+    &.thunder {border-bottom-color: rgba($thunder, .6);}
+    &.vista {border-bottom-color: rgba($vista, .6);}
+  }
+
+  // styles for the theme selector
+  .theme{
+    border-radius: 15px;
+    overflow: hidden;
+    width: 75%;
+    margin: auto;
+    padding: 0;
+
+    .color {
+      width: 33%;
+      margin: 1px;
+      height: 60px;
+      position: relative;
+      float: left;
+      cursor: move;
+
+      &:after {content: "\00a0";}
+
+      &.mojo {background: $mojo;}
+      &.governor-bay {background: $governor-bay;}
+      &.bluewood {background: $bluewood;}
+      &.fire-bush {background: $fire-bush;}
+      &.burnt-sienna {background: $burnt-sienna;}
+      &.wine-berry {background: $wine-berry;}
+      &.tom-thumb {background: $tom-thumb;}
+      &.thunder {background: $thunder;}
+      &.vista {background: $vista;}
+    }
+  }
+
+  // styles when menu is open
+  &.open {
+    left: 0;
+    box-shadow: 0 0 20px 10px rgba(27, 255, 34, 0.3);
+
+    .tab {
+      top: 25px;
+      right: 0px;
+
+      .open {opacity: 0;}
+      .close {opacity: 1;}
+    }
+  }
+}