Accords-Library-Archive
/
gallery.accords-library.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

client/style: make checkboxes focusable

This commit is contained in:
rr- 2016-04-07 17:27:48 +02:00
parent 8be93f6c70
commit 10be5f422d
1 changed files with 40 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
client/css/forms.css
View File

@ -53,11 +53,16 @@ form:not(.tabular) ul li label {
padding: 0.5em 0; padding: 0.5em 0;
} }
/*
* Radio buttons and checkboxes
*/
input[type=radio], input[type=checkbox] { input[type=radio], input[type=checkbox] {
float: left; float: left;
display: none; position: absolute;
opacity: 0;
} }
.radio, .checkbox { .radio, .checkbox {
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
@ -82,25 +87,6 @@ input[type=radio], input[type=checkbox] {
border: 2px solid var(--input-enabled-border-color); border: 2px solid var(--input-enabled-border-color);
content: ''; content: '';
} }
input[type=radio]:checked + .radio:before,
input[type=checkbox]:checked + .checkbox:before {
border-color: var(--main-color);
}
input[type=radio]:checked + .radio:after,
input[type=checkbox]:checked + .checkbox:after {
opacity: 1;
}
input[type=radio]:disabled + .radio:before,
input[type=checkbox]:disabled + .checkbox:before,
input[type=radio]:disabled + .radio:after,
input[type=checkbox]:disabled + .checkbox:after {
border-color: var(--input-disabled-text-color);
}
input[type=radio]:disabled + .radio,
input[type=checkbox]:disabled + .checkbox {
border-color: var(--input-disabled-font-color);
}
.radio:after { .radio:after {
transition: opacity 0.1s linear; transition: opacity 0.1s linear;
position: absolute; position: absolute;
@ -130,6 +116,34 @@ input[type=checkbox]:disabled + .checkbox {
transform: rotate(45deg); transform: rotate(45deg);
} }
input[type=radio]:checked + .radio:before,
input[type=checkbox]:checked + .checkbox:before {
border-color: var(--main-color);
}
input[type=radio]:checked + .radio:after,
input[type=checkbox]:checked + .checkbox:after {
opacity: 1;
}
input[type=radio]:disabled + .radio:before,
input[type=checkbox]:disabled + .checkbox:before,
input[type=radio]:disabled + .radio:after,
input[type=checkbox]:disabled + .checkbox:after {
border-color: var(--input-disabled-text-color);
}
input[type=radio]:disabled + .radio,
input[type=checkbox]:disabled + .checkbox {
border-color: var(--input-disabled-font-color);
}
input[type=radio]:focus + .radio:before,
input[type=checkbox]:focus + .checkbox:before {
border-color: var(--main-color);
}
/*
* Regular inputs
*/
textarea, textarea,
input[type=text], input[type=text],
input[type=email], input[type=email],
@ -174,6 +188,11 @@ form.show-validation fieldset.input input:valid {
background: var(--input-good-background-color); background: var(--input-good-background-color);
} }
/*
* Buttons
*/
button, button,
input[type=button], input[type=button],
input[type=submit] { input[type=submit] {
@ -185,7 +204,6 @@ input[type=submit] {
background: var(--button-enabled-background-color); background: var(--button-enabled-background-color);
color: var(--button-enabled-text-color); color: var(--button-enabled-text-color);
} }
button:disabled, button:disabled,
input[type=button]:disabled, input[type=button]:disabled,
input[type=submit]:disabled { input[type=submit]:disabled {