From 4ed81b48a7f4c0280d9c57fcafe082a402c26383 Mon Sep 17 00:00:00 2001 From: "minseok.park" <minseok.park@bankwareglobal.com> Date: Mon, 1 Jul 2024 18:23:23 +0900 Subject: [PATCH] remove -- fontawesome cdn & add search svg --- src/css/header.css | 13 ++++++++----- src/img/ico-search-active.svg | 1 + src/img/ico-search.svg | 1 + src/partials/head.hbs | 1 - src/partials/header-content.hbs | 2 +- 5 files changed, 11 insertions(+), 7 deletions(-) create mode 100644 src/img/ico-search-active.svg create mode 100644 src/img/ico-search.svg diff --git a/src/css/header.css b/src/css/header.css index 38b8ee5..475c4ba 100644 --- a/src/css/header.css +++ b/src/css/header.css @@ -100,10 +100,13 @@ body { } #search-field > i { + background: url(../img/ico-search.svg) no-repeat center; position: absolute; - top: 15px; + top: 14px; right: 20px; - color: #dbdbdb; + display: inline-block; + width: 16px; + height: 16px; } #search-input { @@ -111,12 +114,12 @@ body { color: #333; font-family: inherit; font-size: 0.95rem; - width: 150px; + width: 120px; height: 45px; border: 1px solid #dbdbdb; border-radius: 28px; line-height: 1.5; - padding: 0 1rem !important; + padding: 0 2.15rem 0 1rem !important; } #search-input:disabled { @@ -136,7 +139,7 @@ body { } #search-input:focus + i { - color: var(--color-bwg-main); + background: url(../img/ico-search-active.svg) no-repeat center; } .navbar-burger { diff --git a/src/img/ico-search-active.svg b/src/img/ico-search-active.svg new file mode 100644 index 0000000..1298d1f --- /dev/null +++ b/src/img/ico-search-active.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#0072ce" d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg> \ No newline at end of file diff --git a/src/img/ico-search.svg b/src/img/ico-search.svg new file mode 100644 index 0000000..0814c73 --- /dev/null +++ b/src/img/ico-search.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#dbdbdb" d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg> \ No newline at end of file diff --git a/src/partials/head.hbs b/src/partials/head.hbs index 59553ad..7dd18b2 100644 --- a/src/partials/head.hbs +++ b/src/partials/head.hbs @@ -1,4 +1,3 @@ -<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css"/> {{> head-prelude}} {{> head-title}} {{> head-info}} diff --git a/src/partials/header-content.hbs b/src/partials/header-content.hbs index 6029a1e..86d254d 100644 --- a/src/partials/header-content.hbs +++ b/src/partials/header-content.hbs @@ -13,7 +13,7 @@ <div id="search-field" class="field"> {{!-- <input id="search-input" type="text" placeholder="Search the docs"{{#if page.home}} autofocus{{/if}}> --}} <input id="search-input" type="text"> - <i class="fas fa-search"></i> + <i/> </div> </div> {{/if}} -- 2.18.1