Reorganized navbar

Updated search field, new user menu
This commit is contained in:
Michael Shamoon
2020-12-30 23:39:07 -08:00
parent 020696fb17
commit d42c13a9c6
2 changed files with 70 additions and 33 deletions

View File

@@ -72,17 +72,42 @@
padding-top: .75rem;
padding-bottom: .75rem;
font-size: 1rem;
background-color: rgba(0, 0, 0, .25);
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
}
.navbar .navbar-toggler {
top: .25rem;
right: 1rem;
}
.navbar .search-form-container {
max-width: 550px;
position: relative;
.navbar .form-control {
padding: .75rem 1rem;
border-width: 0;
border-radius: 0;
svg {
position: absolute;
left: 1.8em;
color: rgba(255, 255, 255, 0.6);
}
&:focus-within {
svg {
display: none;
}
}
.form-control {
color: rgba(255, 255, 255, 0.5);
background-color: rgba(0, 0, 0, 0.2);
padding-left: 1.8rem;
border-color: rgba(255, 255, 255, 0.5);
transition: flex 0.3s ease;
max-width: 600px;
min-width: 300px; // 1/2 max
&::placeholder {
color: rgba(255, 255, 255, 0.5);
}
&:focus {
background-color: #fff;
color: initial;
flex-grow: 1;
padding-left: 0.5rem;
}
}
}