Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-27 22:49:56 -05:00
Code Issues Activity

Merge pull request #34 from andrejmlinarevic/input-focuses

Browse source 
Improved checkbox and select accessibility (focuses)
This commit is contained in:
Paul Davis 2014-06-01 13:57:27 +01:00
commit cda51925cd
1 changed files with 67 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

111
core/client/assets/sass/modules/forms.scss
View file

@ -2,7 +2,7 @@
// Forms
// --------------------------------------------------
.label {
.label {
display: inline-block;
position: absolute;
top: 0.5em;
@ -84,24 +84,27 @@ input, select, textarea {
margin-bottom: 5px;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
textarea:focus {
border: $brown 1px solid;
background: #fff;
outline: none;
outline-width: 0;
input[type="text"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
textarea,
select {
&:focus {
border: $brown 1px solid;
background: #fff;
outline: none;
outline-width: 0;
}
}
select {
@ -133,43 +136,63 @@ select {
Checkboxes
============================================================================= */
// Hide the default checkbox
// Hide the default checkbox using absolute positioning to retain the focusability of the checkbox
input[type="checkbox"] {
display: none;
@include position(absolute, 0 0 0 -9999px);
}
// Turn the label element into a fake checkbox
.checkbox {
@include box-sizing(border-box);
position: relative;
top: auto;
margin-top: 0.5em;
display: inline-block;
width: 18px;
height: 18px;
cursor: pointer;
border-radius: $rounded;
background: lighten($lightbrown, 5%);
border: darken($lightbrown, 5%) 1px solid;
@include transition(all 0.2s ease);
width: auto;
// Create a checkmark, hidden by default
&:after {
opacity: 0;
content: "";
position: absolute;
width: 7px;
height: 3px;
top: 5px;
left: 4px;
border: 3px solid #fff;
border-top: none;
border-right: none;
@include transform(rotate(-45deg));
display: inline-block;
width: 15px;
height: 15px;
margin-right: 5px;
background: lighten($lightbrown, 5%);
border-radius: $rounded;
border: darken($lightbrown, 5%) 1px solid;
@include transition(all 0.2s ease);
}
// The paragraph after the .checkbox
& + p {
display: inline-block;
line-height: 28px;
}
}
// If the checkbox is checked, show the the :after element
input[type=checkbox]:checked + .checkbox { background: $green; border: lighten($green, 10%); }
input[type=checkbox]:checked + .checkbox:after { opacity: 1; }
input[type=checkbox] {
&:checked + .checkbox {
&:after {
background: $green;
border-color: lighten($green, 10%);
}
}
}
input[type=checkbox] {
&:checked + .checkbox:after {
opacity: 1;
}
&:focus {
& + .checkbox {
&:after {
border: $brown 1px solid;
}
}
}
&:active {
& + .checkbox {
&:after {
background: $lightbrown;
}
}
}
}