create searchfield

This commit is contained in:
Felix Niklas 2015-06-09 19:51:43 +02:00
parent 1d43d27f6b
commit 78af957ba3
3 changed files with 37 additions and 32 deletions

View file

@ -115,8 +115,9 @@
</div> </div>
</div> </div>
<div class="userSearch vertical center"> <div class="searchfield">
<input class="js-search form-control flex" name="search" placeholder="Search for users" type="search"> <svg class="icon icon-magnifier"><use xlink:href="#icon-magnifier" /></svg>
<input class="js-search form-control" name="search" placeholder="Search for users" type="search">
</div> </div>
<div class="userSearch horizontal"> <div class="userSearch horizontal">

View file

@ -125,13 +125,6 @@ button,
select { select {
text-transform: none; text-transform: none;
} }
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
}
button[disabled], button[disabled],
html input[disabled] { html input[disabled] {
cursor: default; cursor: default;
@ -155,16 +148,7 @@ input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { input[type="number"]::-webkit-outer-spin-button {
height: auto; height: auto;
} }
input[type="search"] {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
fieldset { fieldset {
padding: .35em .625em .75em; padding: .35em .625em .75em;
margin: 0 2px; margin: 0 2px;

View file

@ -254,15 +254,12 @@ span[data-tooltip]:hover:before {
transition: transform 300ms 1.5s cubic-bezier(0.34,1.6,0.71,1), opacity 300ms 1.5s; transition: transform 300ms 1.5s cubic-bezier(0.34,1.6,0.71,1), opacity 300ms 1.5s;
} }
.textarea::-webkit-input-placeholder, .textarea::placeholder,
.form-control::-webkit-input-placeholder, .form-control::placeholder,
.token-input::-webkit-input-placeholder { color: hsl(0,0%,80%); } .token-input::placeholder {
.textarea::-moz-placeholder, color: hsl(0,0%,80%);
.form-control::-moz-placeholder, opacity: 1;
.token-input::-moz-placeholder { opacity: 1; color: hsl(0,0%,80%); } }
.textarea:-ms-input-placeholder,
.form-control:-ms-input-placeholder,
.token-input:-ms-input-placeholder { color: hsl(0,0%,80%); }
.btn, .btn,
.btn:hover, .btn:hover,
@ -899,6 +896,33 @@ textarea,
font-size: 13px; font-size: 13px;
} }
.searchfield {
position: relative;
margin-bottom: 20px;
.icon {
left: 9px;
top: 6px;
width: 17px;
height: 17px;
position: absolute;
fill: hsl(60,1%,61%);
}
input[type=search] {
appearance: textfield;
line-height: 30px;
height: 30px;
border-radius: 19px;
padding: 0 17px 0 34px;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
}
.content { .content {
overflow: auto; overflow: auto;
position: relative; position: relative;
@ -4454,10 +4478,6 @@ footer {
vertical-align: bottom; vertical-align: bottom;
} }
.userSearch {
margin-bottom: 20px;
}
.userSearch-label { .userSearch-label {
margin: 10px 10px 0 0; margin: 10px 10px 0 0;
} }