From 6bb04f6b1167f65b3145ba918819c4205e41c6fb Mon Sep 17 00:00:00 2001 From: jlukic Date: Wed, 20 May 2015 18:48:53 -0400 Subject: [PATCH] Fix focus styles not applying to selected checkbox --- src/definitions/modules/checkbox.less | 46 +++++++++++++++------------ 1 file changed, 25 insertions(+), 21 deletions(-) diff --git a/src/definitions/modules/checkbox.less b/src/definitions/modules/checkbox.less index 90a090a6c..bcda8c5b1 100755 --- a/src/definitions/modules/checkbox.less +++ b/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