fix: avoid the searchbox exceeded out of screen in narrow screen (#254)

vuejs · Apr 25, 2018 · 8f04081 · 8f04081
1 parent 9663bb8
commit 8f04081
Showing 1 changed file with 15 additions and 7 deletions.
diff --git a/lib/default-theme/SearchBox.vue b/lib/default-theme/SearchBox.vue
@@ -184,14 +184,22 @@ export default {
         color $accentColor
 
 @media (max-width: $MQNarrow)
-  .search-box input
-    width 0
-    border-color transparent
-    position relative
-    left 1rem
-    &:focus
+  .search-box
+    input
+      cursor pointer
+      width 0
+      border-color transparent
+      position relative
+      left 1rem
+      &:focus
+        cursor text
+        left 0
+        width 10rem
+
+@media (max-width: $MQNarrow) and (min-width: $MQMobile)
+  .search-box
+    .suggestions
       left 0
-      width 10rem
 
 @media (max-width: $MQMobile)
   .search-box