Skip to content
Snippets Groups Projects
Unverified Commit afbb63ba authored by Ray Schamp's avatar Ray Schamp Committed by GitHub
Browse files

Merge pull request #1841 from rschamp/bugfix/search-height

Make the library filter input full height
parents c6bab0a0 170eb434
No related branches found
No related tags found
No related merge requests found
......@@ -7,17 +7,22 @@
align-items: center;
flex-grow: 1;
padding: .625rem .5rem;
background: $ui-white;
border-radius: 10rem;
user-select: none;
height: $library-filter-bar-height;
position: relative;
}
.filter-icon {
position: absolute;
top: 0;
left: 0;
height: 1rem;
width: 1rem;
margin: 0 .5rem;
margin: 0.75rem 0.75rem 0.75rem 1rem;
}
.filter:focus-within {
......@@ -29,6 +34,9 @@
*/
.x-icon-wrapper {
opacity: 0;
position: absolute;
top: 0;
right: 0;
display: flex;
justify-content: center;
......@@ -37,7 +45,7 @@
overflow: hidden; /* Mask the icon animation */
height: 1.25rem;
width: 1.25rem;
margin: 0 0.25rem 0 0.5rem; /* @todo: move to parent to make component*/
margin: 0.625rem;
border-radius: 50%;
pointer-events: none;
......@@ -79,7 +87,7 @@
.filter-input {
flex-grow: 1;
line-height: 1.25rem;
height: $library-filter-bar-height;
background-color: transparent;
-webkit-appearance: none;
outline: none;
......@@ -88,7 +96,7 @@
font-size: 0.75rem;
letter-spacing: 0.15px;
cursor: text;
margin-left: .5rem;
padding: .625rem 2rem .625rem 3rem;
}
.filter-input::placeholder {
......
......@@ -37,13 +37,13 @@
}
.filter-input {
width: 6rem;
width: 11.5rem;
transition: .2s;
}
.filter-input:focus,
.filter-input:not([value=""]) {
width: 13.25rem;
width: 18.75rem;
}
.divider {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment