Arsharth/hydrogen-web
1
0
Fork 0
forked from mystiq/hydrogen-web
Code Issues Pull requests Projects Releases Packages Wiki Activity

increase click area of clear filter button, add search icon

Browse source
This commit is contained in:
Bruno Windels 2020-10-08 10:13:05 +02:00
parent c2eebb9af2
commit fd4b3d238f
2 changed files with 17 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/ui/web/css/themes/element/icons/search.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.1333 6.06667C10.1333 8.31262 8.31262 10.1333 6.06667 10.1333C3.82071 10.1333 2 8.31262 2 6.06667C2 3.82071 3.82071 2 6.06667 2C8.31262 2 10.1333 3.82071 10.1333 6.06667ZM10.9992 9.59936C11.7131 8.60443 12.1333 7.38463 12.1333 6.06667C12.1333 2.71614 9.41719 0 6.06667 0C2.71614 0 0 2.71614 0 6.06667C0 9.41719 2.71614 12.1333 6.06667 12.1333C7.38457 12.1333 8.60431 11.7131 9.59922 10.9993C9.62742 11.0369 9.65861 11.0729 9.6928 11.1071L12.2928 13.7071C12.6833 14.0977 13.3165 14.0977 13.707 13.7071C14.0975 13.3166 14.0975 12.6834 13.707 12.2929L11.107 9.69292C11.0728 9.65874 11.0368 9.62756 10.9992 9.59936Z" fill="#8D99A5"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 785 B

23
src/ui/web/css/themes/element/theme.css
View file

@ -136,22 +136,26 @@ button.utility.grid.on {
} }
.FilterField { .FilterField {
background-image: url('icons/search.svg');
background-repeat: no-repeat;
background-position: 8px center;
background-color: #e1e3e6; background-color: #e1e3e6;
/* to prevent jumps when adding a border on focus */
border: 1px solid transparent;
border-radius: 16px; border-radius: 16px;
height: 32px; height: 32px;
align-items: center; align-items: center;
padding: 0 8px; padding-left: 30px; /* 8 + 14 (icon) + 8*/
box-sizing: border-box; box-sizing: border-box;
} }
.FilterField :not(:first-child) {
margin-left: 8px;
}
.FilterField:focus-within { .FilterField:focus-within {
border: 1px #e1e3e6 solid; border: 1px #e1e3e6 solid;
background-color: white; background-color: white;
} }
.FilterField:focus-within button {
border-color: white;
}
/*.FilterField:not(:focus-within) button { /*.FilterField:not(:focus-within) button {
display: none; display: none;
@ -169,14 +173,15 @@ button.utility.grid.on {
} }
.FilterField button { .FilterField button {
width: 16px; width: 30px; /* 32 - 1 (top) - 1 (bottom) */
height: 16px; height: 30px; /* 32 - 1 (top) - 1 (bottom) */
background-position: center; background-position: center;
background-color: #e1e3e6; background-color: #e1e3e6;
background-repeat: no-repeat; background-repeat: no-repeat;
background-image: url('icons/clear.svg'); background-image: url('icons/clear.svg');
border: none; border: 7px solid transparent; /* 8 - 1 */
border-radius: 100%; border-radius: 100%;
box-sizing: border-box;
} }
.PreSessionScreen { .PreSessionScreen {
@ -210,7 +215,7 @@ button.utility.grid.on {
margin-right: 8px; margin-right: 8px;
} }
.LeftPanel .utilities :not(:first-child) { .LeftPanel .utilities > :not(:first-child) {
margin-left: 8px; margin-left: 8px;
} }