New: Project Aphrodite

frontend/src/Components/Page/Header/MovieSearchInput.css

@@ -0,0 +1,96 @@
+.wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.input {
+  margin-left: 8px;
+  width: 200px;
+  border: none;
+  border-bottom: solid 1px $white;
+  border-radius: 0;
+  background-color: transparent;
+  box-shadow: none;
+  color: $white;
+  transition: border 0.3s ease-out;
+
+  &::placeholder {
+    color: $white;
+    transition: color 0.3s ease-out;
+  }
+
+  &:focus {
+    outline: 0;
+    border-bottom-color: transparent;
+
+    &::placeholder {
+      color: transparent;
+    }
+  }
+}
+
+.container {
+  position: relative;
+  flex-grow: 1;
+}
+
+.movieContainer {
+  @add-mixin scrollbar;
+  @add-mixin scrollbarTrack;
+  @add-mixin scrollbarThumb;
+}
+
+.containerOpen {
+  .movieContainer {
+    position: absolute;
+    top: 42px;
+    z-index: 1;
+    overflow-y: auto;
+    min-width: 100%;
+    max-height: 230px;
+    border: 1px solid $themeDarkColor;
+    border-radius: 4px;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    background-color: $themeDarkColor;
+    box-shadow: inset 0 1px 1px $inputBoxShadowColor;
+    color: $menuItemColor;
+  }
+}
+
+.list {
+  margin: 5px 0;
+  padding-left: 0;
+  list-style-type: none;
+}
+
+.listItem {
+  padding: 0 16px;
+  white-space: nowrap;
+}
+
+.highlighted {
+  background-color: $themeLightColor;
+}
+
+.sectionTitle {
+  padding: 5px 8px;
+  color: $disabledColor;
+}
+
+.addNewSeriesSuggestion {
+  padding: 0 3px;
+  cursor: pointer;
+}
+
+@media only screen and (max-width: $breakpointSmall) {
+  .input {
+    min-width: 150px;
+    max-width: 200px;
+  }
+
+  .container {
+    min-width: 0;
+    max-width: 200px;
+  }
+}