search bar shadow on focus

2019-12-12 10:42:46 +01:00 · 2019-12-12 10:42:46 +01:00 · 1ae3f52a16
parent 88a7f93f8e
commit 1ae3f52a16
1 changed files with 10 additions and 0 deletions
--- 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);
  }