Hey,
When you focus an input element on http://twitter.github.com/bootstrap/ . Then you will see the outline of that input field to nicely fade-in and when you deselect it fades out again. I really like this small detail, its much nicer on the eye then the instant outline color change normally done by browsers.
I propose we do this in the Seven theme too, we can probably go for the "Seven blue" outline color.
| Comment | File | Size | Author |
|---|---|---|---|
| #14 | beatify.focus_.fadein.patch | 1.01 KB | Bojhan |
| #10 | outline.jpg | 18.84 KB | Bojhan |
| #6 | fade-effect3.patch | 1.2 KB | aspilicious |
| #3 | fade-effect2.patch | 985 bytes | aspilicious |
| #1 | fade-effect.patch | 1.18 KB | aspilicious |
Comments
Comment #1
aspilicious commentedTry this patch.
(this patch needs some minor adjustments but this is for testing)
Comment #2
Bojhan commentedAwesome, looks like we might want to play some more with the color - for example going with #0074BD, that we use for links?
Comment #3
aspilicious commentedSecond try, different colour
Comment #4
aspilicious commentedAdding tag again
Comment #5
Bojhan commentedAccessibility friends, can we do this? We are adding a outline: none;, but also creating a more beautiful outline.
Comment #6
aspilicious commentedAnother try but accessibility safe :)
Comment #7
Everett Zufelt commentedAs long as there is still a perceivable outline, and it doesn't take too long to appear I don't see this being a problem. How long is the fade-in?
Comment #8
aspilicious commented0.2 sec :)
Comment #9
mgifford0.2s seems to be the fade in time. There are sites like this warning about outline:none http://outlinenone.com - but largely because they've been misapplied as you state.
I'll try to install this patch when I get chance. I think it will look sharp!
Comment #10
Bojhan commentedFor reviewability http://screencast.com/t/hl6LFIHrhKF and
Comment #11
yoroy commentedThanks for the quick screencast.
Overall I think this is a nice touch and worth doing.
The blue does seem a bit heavy overall. Additionally, by expanding the box around the form element by a few pixels, the spacing with the label above becomes a bit tight. Same for the 'Machine name' label to the right in this case.
Does the border get doubled from 1 to 2px? If so, I would first look at keeping that at 1px.
The other option is to reuse the current blue tint for focussed form elements in Seven: #aaccee
Comment #12
Bojhan commentedThat does look better, it looks like its only the shadow thats a bit strong now.
Comment #13
yoroy commentedOk, needs work then
Comment #14
Bojhan commentedTried to incorperate yoroy's suggestions, it looks a lot cleaner now. Still really diggin it :) I thought this was already in core.
http://screencast.com/t/pLfBhpe6
Comment #15
yoroy commentedYep, really nice.
Comment #16
dbazuin commentedThe transistions is a little bit to fast. A transmission time of 0.25 is just enough for the effect we needed here.
Comment #17
Bojhan commentedI discussed with dbazuin and tried different approaches from 0.15, 0.25, 0.30, 0.35 to 0.45 and they didn't feel quite right to me. I suggest committing, this and returning to it - if after long time actual use we feel it needs additional tweaking.
Comment #18
catchDo we still need with -webkit and -moz prefixes? It's my impression that recent releases removed the need for these at least in some cases, but I'm not able to find a definitive reference for what does and doesn't need a prefix now (if someone has one that'd be great).
Comment #19
catchaspilicious confirmed in irc that Safari 5 and firefox 3.6 both need it, so committed/pushed to 8.x.
Comment #20
yched commentedNifty :-)
It does make the existing focus mark (orange, square, no fade effect) on the rest of the elements (checkboxes, radio, submit buttons, links...) look a bit off when tabbing through a form.
Comment #21
Bojhan commentedOh, hmmpf - we should probably change that.
Comment #23
Bojhan commentedComment #24
lewisnymanI can't seem to recreate this, could we a screenshot?
Comment #25
Bojhan commentedWe removed this at some point, in all our refactoring. Lets revisit it later - as we evaluate how we can animate our UI more.