evan/deemixer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Changed searchbar type from text to search

Browse Source 
This adds a cancel button at the end of the searchbar
This commit is contained in:
RemixDev 2020-06-17 11:06:15 +02:00
parent ea1938d429
commit 3586654423
3 changed files with 14 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/css/style.css
View File

File diff suppressed because one or more lines are too long

2
public/index.html
View File

@ -75,7 +75,7 @@
<div class="search__icon"> <div class="search__icon">
<i class="material-icons">search</i> <i class="material-icons">search</i>
</div> </div>
<input id="searchbar" autocomplete="off" type="text" name="searchbar" value="" <input id="searchbar" autocomplete="off" type="search" name="searchbar" value=""
placeholder="Search something or paste a link..." autofocus> placeholder="Search something or paste a link..." autofocus>
</header> </header>
<section id="content"> <section id="content">

12
src/styles/scss/globals/_globals.scss
View File

@ -1,6 +1,7 @@
input[type='text'], input[type='text'],
input[type='password'], input[type='password'],
input[type='number'] { input[type='number'],
input[type='search'] {
width: calc(100% - 16px); width: calc(100% - 16px);
border: 0px solid black; border: 0px solid black;
line-height: 36px; line-height: 36px;
@ -11,6 +12,15 @@ input[type='number'] {
margin-bottom: 8px; margin-bottom: 8px;
} }
input[type=search]::-webkit-search-cancel-button {
-webkit-appearance: none;
width: 28px;
height: 28px;
background-color: var(--foreground);
-webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='28' viewBox='0 0 24 24' width='28'%3E%%3Cpath fill='%23ffffff' d='M22 3H7c-.69 0-1.23.35-1.59.88L0 12l5.41 8.11c.36.53.9.89 1.59.89h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-3 12.59L17.59 17 14 13.41 10.41 17 9 15.59 12.59 12 9 8.41 10.41 7 14 10.59 17.59 7 19 8.41 15.41 12 19 15.59z'/%3E3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='28' viewBox='0 0 24 24' width='28'%3E%%3Cpath fill='%23ffffff' d='M22 3H7c-.69 0-1.23.35-1.59.88L0 12l5.41 8.11c.36.53.9.89 1.59.89h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-3 12.59L17.59 17 14 13.41 10.41 17 9 15.59 12.59 12 9 8.41 10.41 7 14 10.59 17.59 7 19 8.41 15.41 12 19 15.59z'/%3E3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
}
input[type='checkbox'] { input[type='checkbox'] {
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;