From 1ae3f52a1601c6e54bd5d8239e9f32dac4063fe3 Mon Sep 17 00:00:00 2001 From: Rigel Kent Date: Thu, 12 Dec 2019 10:42:46 +0100 Subject: search bar shadow on focus --- client/src/app/header/header.component.scss | 10 ++++++++++ 1 file changed, 10 insertions(+) (limited to 'client/src') diff --git a/client/src/app/header/header.component.scss b/client/src/app/header/header.component.scss index cea415d9b..736035b72 100644 --- a/client/src/app/header/header.component.scss +++ b/client/src/app/header/header.component.scss @@ -8,6 +8,16 @@ padding-right: 40px; // For the search icon font-size: 14px; + transition: box-shadow .3s ease; + + /* light border style */ + border: 1px solid var(--mainBackgroundColor); + box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 20px 0px; + + &:focus { + box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 20px 0px; + } + &::placeholder { color: var(--inputPlaceholderColor); } -- cgit v1.2.3