on master help sign in
search icon size and spacing, searchbar close size
17b7224Gavin Atkinson
sass/_main.scss+13−12
@@ -273,22 +273,22 @@ nav.previous, nav.next {
273 border: 0;
273 border: 0;
274 font-family: "Inter", sans-serif;
274 font-family: "Inter", sans-serif;
275 position: relative;
275 position: relative;
276− width: 80%;
276+ // width: 80%;
277− min-width: 110px;
277+ // min-width: 110px;
278 text-align: left;
278 text-align: left;
279 background: transparent;
279 background: transparent;
280 span#search-icon {
280 span#search-icon {
281− display: inline-block;
281+ display: inline-block;
282− transform: rotate(-45deg);
282+ transform: translate(-7px, 2px) rotate(-45deg);
283 }
283 }
284 span.search-slash {
284 span.search-slash {
285− font-size: 0.75em;
285+ font-size: 0.75em;
286− position: absolute;
286+ position: absolute;
287− right: 0px;
287+ right: 0px;
288− top: 6px;
288+ top: 6px;
289− padding: 6px;
289+ padding: 6px;
290− border: 1px solid #b1b2b3;
290+ border: 1px solid #b1b2b3;
291− border-radius: 3px;
291+ border-radius: 3px;
292 }
292 }
293}
293}
294.has-active-search-window {
294.has-active-search-window {
@@ -346,7 +346,7 @@ input[type="search"] {
346 }
346 }
347
347
348 .header__search-icon {
348 .header__search-icon {
349− transform: rotate(-45deg);
349+ transform: translateY(-1px) rotate(-45deg) scale(1.5);
350 vertical-align: bottom;
350 vertical-align: bottom;
351 }
351 }
352
352
@@ -386,6 +386,7 @@ input[type="search"] {
386 cursor: pointer;
386 cursor: pointer;
387 font-family: "Inter UI", sans-serif;
387 font-family: "Inter UI", sans-serif;
388 user-select: none;
388 user-select: none;
389+ transform: scale(1.5);
389 }
390 }
390 // tooltipping
391 // tooltipping
391.tippy-tooltip {
392.tippy-tooltip {
templates/partials/navigation-search.html+2−2
@@ -1,4 +1,4 @@
1−<button id="js-search-window-toggle" class="mt2 dn db-m db-l db-xl bw-0 mb3" type="button" style="outline:none">
1+<button id="js-search-window-toggle" class="pointer mt2 dn db-m db-l db-xl bw-0 mb3" type="button" style="outline:none">
2 <span id="search-icon" class="f3 gray3">⚲</span>
2 <span id="search-icon" class="f3 gray3">⚲</span>
3− <span class="ml3 gray3">Search</span>
3+ <span class="gray3">Search</span>
4</button>
4</button>