diff --git a/common/static/css/boofilsic.css b/common/static/css/boofilsic.css index f9da274a..6ca2300a 100644 --- a/common/static/css/boofilsic.css +++ b/common/static/css/boofilsic.css @@ -510,11 +510,17 @@ select::placeholder { .navbar .navbar__search-box { margin: 0 12% 0 15px; - height: 32px; + display: inline-block; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; +} + +.navbar .navbar__search-box > input[type="search"] { + margin: 0; + height: 32px; background-color: white !important; + width: 100%; } .navbar .navbar__dropdown-btn { @@ -567,6 +573,8 @@ select::placeholder { .navbar .navbar__search-box { margin: 0; width: 46vw; + } + .navbar .navbar__search-box > input[type="search"] { height: 26px; padding: 4px 6px; } diff --git a/common/static/sass/_Navbar.sass b/common/static/sass/_Navbar.sass index b68c70fe..de05139e 100644 --- a/common/static/sass/_Navbar.sass +++ b/common/static/sass/_Navbar.sass @@ -37,9 +37,13 @@ & &__search-box margin: 0 12% 0 15px - height: 32px + display: inline-block flex: 1 - background-color: white !important + & > input[type="search"] + margin: 0 + height: 32px + background-color: white !important + width: 100% & &__dropdown-btn display: none @@ -87,8 +91,9 @@ & &__search-box margin: 0 width: 46vw - height: 26px - padding: 4px 6px + & > input[type="search"] + height: 26px + padding: 4px 6px // Medium devices (tablets, 768px and up) @media (max-width: $medium-devices) pass diff --git a/common/templates/partial/_navbar.html b/common/templates/partial/_navbar.html index 6747508b..50a11fc9 100644 --- a/common/templates/partial/_navbar.html +++ b/common/templates/partial/_navbar.html @@ -9,9 +9,10 @@ - - +