/** * Copyright (C) 2018 Noah Loomans * * This file is part of rooster.hetmml.nl. * * rooster.hetmml.nl is free software: you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation, either version 3 of the License, or * (at your option) any later version. * * rooster.hetmml.nl is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with rooster.hetmml.nl. If not, see . * */ .search { height: 54px; position: relative; &-overflow { border-radius: 2px; background-color: white; position: absolute; width: 100%; box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08); } &--has-focus { box-shadow: 0 3px 8px 0 rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.08); } &__results--has-results { border-top: 1px #BDBDBD solid; } &__icon-wrapper { height: 54px; padding: 15px; svg { height: 24px; width: 24px; } } &__input-wrapper { display: flex; height: 54px; input { border: 0; background-color: transparent; flex-grow: 1; height: inherit; padding: 16px; padding-left: 0px; font-size: 16px; outline: none; } } &__results { transition: 0.1s ease-in-out min-height; overflow: hidden; } &__result { display: flex; cursor: pointer; &:hover, &--selected { background-color: lightgray; } &__text { padding: 15px; padding-left: 0px; font-size: 16px; transform: translate(0, 3px); &__alt { font-style: italic; color: gray; } } } }