rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-18 10:52:19 +01:00
Code Issues Actions Packages Releases Activity

Enable input focus state customization

Browse Source 
- Add new mixin to generate and customize focus state as needed
- Adds variable to set default color
- Include clear disclaimer about customizing this—it's about users', so
don't go making everything bright red and expect them not to be
confused or alarmed.

Relevant issues: #2742, #4185, #7942, #8171, #8610, #9044
This commit is contained in:
Mark Otto 2013-08-04 23:05:54 -07:00
parent 2641fed73f
commit 73c048578d
5 changed files with 29 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
dist/css/bootstrap.css vendored
View File

@ -1469,10 +1469,10 @@ input[type="number"]::-webkit-inner-spin-button {
} }
.form-control:focus { .form-control:focus {
border-color: rgba(82, 168, 236, 0.8); border-color: #66afe9;
outline: 0; outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
} }
.form-control[disabled], .form-control[disabled],

2
dist/css/bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

7
less/forms.less
View File

@ -129,11 +129,8 @@ input[type="number"] {
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
.transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s"); .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
&:focus { // Customize the `:focus` state to imitate native WebKit styles.
border-color: rgba(82,168,236,.8); .form-control-focus();
outline: 0;
.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)");
}
// Disabled and read-only inputs // Disabled and read-only inputs
// Note: HTML5 says that inputs under a fieldset > legend:first-child won't be // Note: HTML5 says that inputs under a fieldset > legend:first-child won't be

22
less/mixins.less
View File

@ -544,3 +544,25 @@
background-color: @background-color; 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}");
}
}

1
less/variables.less
View File

@ -131,6 +131,7 @@
@input-border: #ccc; @input-border: #ccc;
@input-border-radius: @border-radius-base; @input-border-radius: @border-radius-base;
@input-border-focus: #66afe9;
@input-color-placeholder: @gray-light; @input-color-placeholder: @gray-light;