fix(css): don't display key shortcuts on mobile

algolia · Jul 4, 2020 · 1957f5a · 1957f5a
1 parent dde883e
commit 1957f5a
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 59 deletions.
diff --git a/src/styles/modal.css b/src/styles/modal.css
@@ -553,15 +553,6 @@ svg.DocSearch-Hit-Select-Icon {
     display: none;
   }
 
-  .DocSearch-SearchButton-KeySeparator,
-  .DocSearch-SearchButton-Key {
-    display: none;
-  }
-
-  .DocSearch-SearchButton-Placeholder {
-    display: none;
-  }
-
   .DocSearch-Dropdown {
     height: 100%;
   }

diff --git a/src/styles/search-button.css b/src/styles/search-button.css
@@ -1,56 +1,66 @@
 /* Search Button */
 
 .DocSearch-SearchButton {
-    align-items: center;
-    background: var(--docsearch-searchbox-background);
-    border: 0;
-    border-radius: 40px;
-    color: var(--docsearch-text-color);
-    color: var(--docsearch-muted-color);
-    cursor: pointer;
-    display: flex;
-    font-weight: 500;
-    height: 36px;
-    margin: 0 0 0 16px;
-    padding: 0 8px;
-    user-select: none;
-  }
-
-  .DocSearch-SearchButton:hover,
-  .DocSearch-SearchButton:active,
-  .DocSearch-SearchButton:focus {
-    background: var(--docsearch-searchbox-focus-background);
-    box-shadow: var(--docsearch-searchbox-shadow);
-    color: var(--docsearch-text-color);
-    outline: none;
-  }
-
-  .DocSearch-Search-Icon {
-    stroke-width: 1.6;
-  }
-
-  .DocSearch-SearchButton .DocSearch-Search-Icon {
-    color: var(--docsearch-text-color);
+  align-items: center;
+  background: var(--docsearch-searchbox-background);
+  border: 0;
+  border-radius: 40px;
+  color: var(--docsearch-text-color);
+  color: var(--docsearch-muted-color);
+  cursor: pointer;
+  display: flex;
+  font-weight: 500;
+  height: 36px;
+  margin: 0 0 0 16px;
+  padding: 0 8px;
+  user-select: none;
+}
+
+.DocSearch-SearchButton:hover,
+.DocSearch-SearchButton:active,
+.DocSearch-SearchButton:focus {
+  background: var(--docsearch-searchbox-focus-background);
+  box-shadow: var(--docsearch-searchbox-shadow);
+  color: var(--docsearch-text-color);
+  outline: none;
+}
+
+.DocSearch-Search-Icon {
+  stroke-width: 1.6;
+}
+
+.DocSearch-SearchButton .DocSearch-Search-Icon {
+  color: var(--docsearch-text-color);
+}
+
+.DocSearch-SearchButton-Placeholder {
+  font-size: 1rem;
+  padding: 0 12px 0 6px;
+}
+
+.DocSearch-SearchButton-Key {
+  align-items: center;
+  background: var(--docsearch-key-gradient);
+  border-radius: 3px;
+  box-shadow: var(--docsearch-key-shadow);
+  color: var(--docsearch-muted-color);
+  display: flex;
+  height: 18px;
+  justify-content: center;
+  margin-right: 0.4em;
+  padding-bottom: 2px;
+  position: relative;
+  top: -1px;
+  width: 20px;
+}
+
+@media (max-width: 750px) {
+  .DocSearch-SearchButton-KeySeparator,
+  .DocSearch-SearchButton-Key {
+    display: none;
   }
-  
+
   .DocSearch-SearchButton-Placeholder {
-    font-size: 1rem;
-    padding: 0 12px 0 6px;
-  }
-
-  .DocSearch-SearchButton-Key {
-    align-items: center;
-    background: var(--docsearch-key-gradient);
-    border-radius: 3px;
-    box-shadow: var(--docsearch-key-shadow);
-    color: var(--docsearch-muted-color);
-    display: flex;
-    height: 18px;
-    justify-content: center;
-    margin-right: 0.4em;
-    padding-bottom: 2px;
-    position: relative;
-    top: -1px;
-    width: 20px;
+    display: none;
   }
-  
+}