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

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

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