diff --git a/components/header/header.vue b/components/header/header.vue
index 313c41c..505bdb8 100644
--- a/components/header/header.vue
+++ b/components/header/header.vue
@@ -11,6 +11,7 @@
+
-
pageContext.urlParsed.pathname.split('/')[1]);
const currentPath = `${pageContext.urlParsed.pathnameOriginal}${pageContext.urlParsed.searchOriginal || ''}`;
@@ -186,28 +194,43 @@ async function logout() {
.header-section {
height: 100%;
display: flex;
- align-items: stretch;
+ align-items: center;
}
.search {
+ height: 2rem;
display: flex;
align-items: center;
- flex-direction: row-reverse; /* allow icon to be selected */
+ border: solid 1px var(--shadow-weak-20);
+ border-radius: 1rem;
+ background: var(--background);
.input {
- padding: .5rem 1rem;
- border-radius: 1rem;
- background: var(--background);
+ padding: .5rem 0 .5rem 1rem;
+ border: none;
margin: 0;
+ background: none;
+ }
+
+ .search-button {
+ padding: 0;
+ border: none;
+ background: none;
}
.icon {
- margin-right: .75rem;
+ height: 100%;
+ padding: 0 .75rem 0 .5rem;
fill: var(--shadow-weak-10);
}
- .input:focus + .icon {
- fill: var(--primary);
+ &.focused {
+ border: solid 1px var(--primary-light-10);
+
+ .icon {
+ fill: var(--primary);
+ cursor: pointer;
+ }
}
}
@@ -215,7 +238,7 @@ async function logout() {
height: 100%;
display: flex;
align-items: center;
- padding: 0 1rem;
+ padding: 0 1rem 0 1.5rem;
font-size: 0;
cursor: pointer;