diff options
Diffstat (limited to 'less')
| -rw-r--r-- | less/forms.less | 7 | ||||
| -rw-r--r-- | less/mixins.less | 22 | ||||
| -rw-r--r-- | less/variables.less | 1 |
3 files changed, 25 insertions, 5 deletions
diff --git a/less/forms.less b/less/forms.less index 127f6a67a..027131b3b 100644 --- a/less/forms.less +++ b/less/forms.less @@ -129,11 +129,8 @@ input[type="number"] { .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s"); - &:focus { - border-color: rgba(82,168,236,.8); - outline: 0; - .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)"); - } + // Customize the `:focus` state to imitate native WebKit styles. + .form-control-focus(); // Disabled and read-only inputs // Note: HTML5 says that inputs under a fieldset > legend:first-child won't be diff --git a/less/mixins.less b/less/mixins.less index 77ed5d512..7e1b50b4e 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -544,3 +544,25 @@ background-color: @background-color; } } + +// Form control focus state +// +// Generate a customized focus state and for any input with the specified color, +// which defaults to the `@input-focus-border` variable. +// +// We highly encourage you to not customize the default value, but instead use +// this to tweak colors on an as-needed basis. This aesthetic change is based on +// WebKit's default styles, but applicable to a wider range of browsers. Its +// usability and accessibility should be taken into account with any change. +// +// Example usage: change the default blue border and shadow to white for better +// contrast against a dark gray background. + +.form-control-focus(@color: @input-border-focus) { + @color-rgba: rgba(red(@color), green(@color), blue(@color), .6); + &:focus { + border-color: @color; + outline: 0; + .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}"); + } +} diff --git a/less/variables.less b/less/variables.less index a500097c9..b8c7cf6c8 100644 --- a/less/variables.less +++ b/less/variables.less @@ -131,6 +131,7 @@ @input-border: #ccc; @input-border-radius: @border-radius-base; +@input-border-focus: #66afe9; @input-color-placeholder: @gray-light; |