Skip to content

Commit 1957f5a

Browse files
committed
fix(css): don't display key shortcuts on mobile
1 parent dde883e commit 1957f5a

2 files changed

Lines changed: 60 additions & 59 deletions

File tree

src/styles/modal.css

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -553,15 +553,6 @@ svg.DocSearch-Hit-Select-Icon {
553553
display: none;
554554
}
555555

556-
.DocSearch-SearchButton-KeySeparator,
557-
.DocSearch-SearchButton-Key {
558-
display: none;
559-
}
560-
561-
.DocSearch-SearchButton-Placeholder {
562-
display: none;
563-
}
564-
565556
.DocSearch-Dropdown {
566557
height: 100%;
567558
}

src/styles/search-button.css

Lines changed: 60 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,66 @@
11
/* Search Button */
22

33
.DocSearch-SearchButton {
4-
align-items: center;
5-
background: var(--docsearch-searchbox-background);
6-
border: 0;
7-
border-radius: 40px;
8-
color: var(--docsearch-text-color);
9-
color: var(--docsearch-muted-color);
10-
cursor: pointer;
11-
display: flex;
12-
font-weight: 500;
13-
height: 36px;
14-
margin: 0 0 0 16px;
15-
padding: 0 8px;
16-
user-select: none;
17-
}
18-
19-
.DocSearch-SearchButton:hover,
20-
.DocSearch-SearchButton:active,
21-
.DocSearch-SearchButton:focus {
22-
background: var(--docsearch-searchbox-focus-background);
23-
box-shadow: var(--docsearch-searchbox-shadow);
24-
color: var(--docsearch-text-color);
25-
outline: none;
26-
}
27-
28-
.DocSearch-Search-Icon {
29-
stroke-width: 1.6;
30-
}
31-
32-
.DocSearch-SearchButton .DocSearch-Search-Icon {
33-
color: var(--docsearch-text-color);
4+
align-items: center;
5+
background: var(--docsearch-searchbox-background);
6+
border: 0;
7+
border-radius: 40px;
8+
color: var(--docsearch-text-color);
9+
color: var(--docsearch-muted-color);
10+
cursor: pointer;
11+
display: flex;
12+
font-weight: 500;
13+
height: 36px;
14+
margin: 0 0 0 16px;
15+
padding: 0 8px;
16+
user-select: none;
17+
}
18+
19+
.DocSearch-SearchButton:hover,
20+
.DocSearch-SearchButton:active,
21+
.DocSearch-SearchButton:focus {
22+
background: var(--docsearch-searchbox-focus-background);
23+
box-shadow: var(--docsearch-searchbox-shadow);
24+
color: var(--docsearch-text-color);
25+
outline: none;
26+
}
27+
28+
.DocSearch-Search-Icon {
29+
stroke-width: 1.6;
30+
}
31+
32+
.DocSearch-SearchButton .DocSearch-Search-Icon {
33+
color: var(--docsearch-text-color);
34+
}
35+
36+
.DocSearch-SearchButton-Placeholder {
37+
font-size: 1rem;
38+
padding: 0 12px 0 6px;
39+
}
40+
41+
.DocSearch-SearchButton-Key {
42+
align-items: center;
43+
background: var(--docsearch-key-gradient);
44+
border-radius: 3px;
45+
box-shadow: var(--docsearch-key-shadow);
46+
color: var(--docsearch-muted-color);
47+
display: flex;
48+
height: 18px;
49+
justify-content: center;
50+
margin-right: 0.4em;
51+
padding-bottom: 2px;
52+
position: relative;
53+
top: -1px;
54+
width: 20px;
55+
}
56+
57+
@media (max-width: 750px) {
58+
.DocSearch-SearchButton-KeySeparator,
59+
.DocSearch-SearchButton-Key {
60+
display: none;
3461
}
35-
62+
3663
.DocSearch-SearchButton-Placeholder {
37-
font-size: 1rem;
38-
padding: 0 12px 0 6px;
39-
}
40-
41-
.DocSearch-SearchButton-Key {
42-
align-items: center;
43-
background: var(--docsearch-key-gradient);
44-
border-radius: 3px;
45-
box-shadow: var(--docsearch-key-shadow);
46-
color: var(--docsearch-muted-color);
47-
display: flex;
48-
height: 18px;
49-
justify-content: center;
50-
margin-right: 0.4em;
51-
padding-bottom: 2px;
52-
position: relative;
53-
top: -1px;
54-
width: 20px;
64+
display: none;
5565
}
56-
66+
}

0 commit comments

Comments
 (0)