Comments (7)
Cool π
from photon.
Here's my suggestion:
http://jsfiddle.net/developit/aqu10kd9/
Markup
<label class="toolbar-input">
<span class="icon icon-search"></span>
<input type="search" class="form-control" placeholder="Search...">
</label>
CSS
/* Here's my suggestion for the CSS */
.toolbar-input {
position: relative;
overflow: visible;
margin: 0;
padding: 0;
.icon {
position: absolute;
left: 10px;
top: 4px;
z-index: 1;
opacity: 0.5; /* ~matches placeholder */
}
.form-control {
padding: 3px 4px 1px 24px;
border-radius: 12px;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.4),
0 0 0 7px rgba(109,179,253,0);
&:focus {
/* something like this was already in place: */
box-shadow: inset 0 1px 2px rgba(0,0,0,0.4),
0 0 0 1px rgba(109,179,253,0.8);
transition: box-shadow 250ms ease-out;
}
}
}
from photon.
Rad!
from photon.
π
from photon.
@developit Mind sending a pull request?
from photon.
@sbruchmann: I did, #33.
from photon.
Sorry, @developit, Iβve overlooked that reference. Thanks for the work! Now we have to wait for @connors to merge it (at least, the folks who donβt know their way around git π)
from photon.
Related Issues (20)
- photon.js is identified as virus by Avira AV
- Is this project deprecated? HOT 11
- Cocoa licensing and copyright HOT 3
- Update: PhotonKit Components HOT 6
- It won't run HOT 2
- Ignore
- kq_init error on demo start HOT 2
- Project dead? HOT 5
- How to compile and install under Linux
- NEW RELEASE 1.0 HOT 7
- It's wrong HOT 2
- Can I Use Webviews with photon HOT 2
- How do I turn off the tone of the download completed?
- Is there a way to disable row highlight on table row click?
- Any update HOT 2
- Update docs download links HOT 2
- install fails HOT 3
- no fount module app HOT 2
- Error on template app HOT 3
- Documentation not sufficient HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from photon.