diff --git a/src/styles/main.scss b/src/styles/main.scss index afe8e6e..c46743b 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -236,24 +236,29 @@ h4 { } #search-icon { + -webkit-text-stroke: 1px $color-grey-light4; + color: $color-grey-light4; pointer-events: none; } #close-search-icon, #search-icon { position: absolute; - right: 0.4em; + right: 0.7em; top: 50%; transform: translateY(-50%); margin: auto; display: block; + font-size: 1.3em; } #search-input { -webkit-appearance: textfield; border-radius: 10em; padding: 0.4em 0.8em; - border: 1px solid $color-grey; + border: 1px solid $color-grey-light4; + height: 2.8rem; + width: 22rem; & ~ #close-search-icon { opacity: 0; diff --git a/src/styles/variables.scss b/src/styles/variables.scss index f88f4ef..17a486d 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -3,6 +3,7 @@ $color-white: #fff; $color-black: #36383b; $color-grey: #898f95; $color-grey-mid: #abaaba; +$color-grey-light4: #b4b9c0; $color-grey-light3: hsla(59, 13%, 86%, 0.2); $color-grey-light2: #d8d8d8; $color-grey-light: #f0f3f6;