diff --git a/aleksis/core/static/style.scss b/aleksis/core/static/style.scss index 1e4433c0f317612636b7e4ef6893f1b5a4ac32c0..d36fd43423b85d8e29a5e7630ee165311aa2f0c8 100644 --- a/aleksis/core/static/style.scss +++ b/aleksis/core/static/style.scss @@ -129,6 +129,51 @@ li.active > a > .sidenav-badge { color: $primary-color !important; } +.sidenav li.search { + position: relative; + z-index: 2; +} + +.sidenav li.search:hover { + background-color: #fff; +} + +.sidenav li.search .search-wrapper { + color: #777; + margin-top: -1px; + border-top: 1px solid rgba(0, 0, 0, 0.14); + border-bottom: 1px solid rgba(0, 0, 0, 0.14); + + -webkit-transition: margin .25s ease; + transition: margin .25s ease; +} + +.sidenav li.search .search-wrapper input#search { + color: #777; + display: block; + font-size: 16px; + font-weight: 300; + width: 100%; + height: 62px; + margin: 0; + -webkit-box-sizing: border-box; + box-sizing: border-box; + padding: 0 45px 0 30px; + border: 0; +} + +.sidenav li.search .search-wrapper input#search:focus { + outline: none; + -webkit-box-shadow: none; + box-shadow: none; +} + +.sidenav li.search .search-wrapper i.material-icons { + position: absolute; + top: 21px; + right: 10px; + cursor: pointer; +} // Sidenav trigger diff --git a/aleksis/core/templates/core/base.html b/aleksis/core/templates/core/base.html index b75eb9ec30f7ac9a29be5bd11a72921ca2d08ad8..ef8d9c77f90b549c1d8b0ec732caaa81c4900c09 100644 --- a/aleksis/core/templates/core/base.html +++ b/aleksis/core/templates/core/base.html @@ -69,6 +69,12 @@ </object> </a> </li> + <li class="search"> + <div class="search-wrapper"> + <input id="search" placeholder="{% trans "Search" %}"> + <i class="material-icons">search</i> + </div> + </li> <li class="no-padding"> {% include "core/sidenav.html" %} </li>