over 8 years ago
I am using uikit for a web app that I am creating for my team. I really like the Stage demo's search field and want to mimic it. I extracted the CSS from the demo:
.uk-search:before {
content: "\f002";
position: absolute;
top: 0;
left: 0;
width: 30px;
line-height: 40px;
text-align: center;
font-family: FontAwesome;
font-size: 14px;
color: #444;
}
.uk-search-field {
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
border-radius: 0;
font: inherit;
color: #777;
-webkit-appearance: none;
width: 30px;
height: 40px;
padding: 0 0 0 30px;
border: 1px solid rgba(0, 0, 0, 0);
background: rgba(0, 0, 0, 0);
-webkit-transition: all linear 0.2s;
transition: all linear 0.2s;
vertical-align: middle;
position: relative;
padding: 0;
cursor: pointer;
z-index: 1;
}
.uk-search-field:focus{
outline:0;
width:140px;
padding: 0 30px;
cursor: text;
}
That's it. Now the search field's textbox can be hidden when it is not focused and slide out when it is focused.
