Browse Source

Fix focus styles not applying to selected checkbox

pull/2300/head
jlukic 9 years ago
parent
commit
6bb04f6b11
1 changed files with 25 additions and 21 deletions
  1. 46
      src/definitions/modules/checkbox.less

46
src/definitions/modules/checkbox.less

@ -161,6 +161,26 @@
color: @labelPressedColor;
}
/*--------------
Active
---------------*/
.ui.checkbox input[type="checkbox"]:checked ~ .box:before,
.ui.checkbox input[type="checkbox"]:checked ~ label:before,
.ui.checkbox input[type="radio"]:checked ~ .box:before,
.ui.checkbox input[type="radio"]:checked ~ label:before {
background: @checkboxActiveBackground;
border: @checkboxActiveBorder;
}
.ui.checkbox input[type="checkbox"]:checked ~ .box:after,
.ui.checkbox input[type="checkbox"]:checked ~ label:after,
.ui.checkbox input[type="radio"]:checked ~ .box:after,
.ui.checkbox input[type="radio"]:checked ~ label:after {
opacity: 1;
color: @checkboxActiveColor;
}
/*--------------
Focus
---------------*/
@ -168,7 +188,11 @@
.ui.checkbox input[type="checkbox"]:focus ~ .box:before,
.ui.checkbox input[type="checkbox"]:focus ~ label:before,
.ui.checkbox input[type="radio"]:focus ~ .box:before,
.ui.checkbox input[type="radio"]:focus ~ label:before {
.ui.checkbox input[type="radio"]:focus ~ label:before,
.ui.checkbox input[type="checkbox"]:checked:focus ~ .box:before,
.ui.checkbox input[type="checkbox"]:checked:focus ~ label:before,
.ui.checkbox input[type="radio"]:checked:focus ~ .box:before,
.ui.checkbox input[type="radio"]:checked:focus ~ label:before {
background: @checkboxFocusedBackground;
border: @checkboxFocusedBorder;
}
@ -184,26 +208,6 @@
}
/*--------------
Active
---------------*/
.ui.checkbox input[type="checkbox"]:checked ~ .box:before,
.ui.checkbox input[type="checkbox"]:checked ~ label:before,
.ui.checkbox input[type="radio"]:checked ~ .box:before,
.ui.checkbox input[type="radio"]:checked ~ label:before {
background: @checkboxActiveBackground;
border: @checkboxActiveBorder;
}
.ui.checkbox input[type="checkbox"]:checked ~ .box:after,
.ui.checkbox input[type="checkbox"]:checked ~ label:after,
.ui.checkbox input[type="radio"]:checked ~ .box:after,
.ui.checkbox input[type="radio"]:checked ~ label:after {
opacity: 1;
color: @checkboxActiveColor;
}
/*--------------
Read-Only

Loading…
Cancel
Save