diff --git a/src/definitions/modules/checkbox.less b/src/definitions/modules/checkbox.less index f3f98dedf..b4aa42af2 100755 --- a/src/definitions/modules/checkbox.less +++ b/src/definitions/modules/checkbox.less @@ -165,15 +165,15 @@ .ui.checkbox input:focus ~ .box:before, .ui.checkbox input:focus ~ label:before { - background: @checkboxFocusedBackground; - border-color: @checkboxFocusedBorderColor; + background: @checkboxFocusBackground; + border-color: @checkboxFocusBorderColor; } .ui.checkbox input:focus ~ .box:after, .ui.checkbox input:focus ~ label:after { - color: @checkboxFocusedColor; + color: @checkboxFocusCheckColor; } .ui.checkbox input:focus ~ label { - color: @labelFocusedColor; + color: @labelFocusColor; } /*-------------- @@ -217,6 +217,10 @@ background: @checkboxActiveFocusBackground; border-color: @checkboxActiveFocusBorderColor; } +.ui.checkbox input:checked ~ .box:after, +.ui.checkbox input:checked ~ label:after { + color: @checkboxActiveFocusCheckColor; +} /*-------------- @@ -312,6 +316,16 @@ background-color: @bulletColor; } +/* Focus */ +.ui.radio.checkbox input:focus ~ .box:before, +.ui.radio.checkbox input:focus ~ label:before { + background-color: @radioFocusBackground; +} +.ui.radio.checkbox input:checked ~ .box:after, +.ui.radio.checkbox input:checked ~ label:after { + background-color: @radioFocusBulletColor; +} + /* Active */ .ui.radio.checkbox input:checked ~ .box:before, .ui.radio.checkbox input:checked ~ label:before { @@ -322,6 +336,16 @@ background-color: @radioActiveBulletColor; } +/* Active Focus */ +.ui.radio.checkbox input:focus:checked ~ .box:before, +.ui.radio.checkbox input:focus:checked ~ label:before { + background-color: @radioActiveBackground; +} +.ui.radio.checkbox input:focus:checked ~ .box:after, +.ui.radio.checkbox input:focus:checked ~ label:after { + background-color: @radioActiveBulletColor; +} + /*-------------- Slider ---------------*/ @@ -517,11 +541,11 @@ /* Active */ .ui.toggle.checkbox input:checked ~ .box, .ui.toggle.checkbox input:checked ~ label { - color: @toggleOnLabelColor; + color: @toggleOnLabelColor !important; } .ui.toggle.checkbox input:checked ~ .box:before, .ui.toggle.checkbox input:checked ~ label:before { - background-color: @toggleOnLaneColor; + background-color: @toggleOnLaneColor !important; } .ui.toggle.checkbox input:checked ~ .box:after, .ui.toggle.checkbox input:checked ~ label:after { @@ -532,11 +556,11 @@ /* Active Focus */ .ui.toggle.checkbox input:focus:checked ~ .box, .ui.toggle.checkbox input:focus:checked ~ label { - color: @toggleOnFocusLabelColor; + color: @toggleOnFocusLabelColor !important; } .ui.toggle.checkbox input:focus:checked ~ .box:before, .ui.toggle.checkbox input:focus:checked ~ label:before { - background-color: @toggleOnFocusLaneColor; + background-color: @toggleOnFocusLaneColor !important; } /******************************* diff --git a/src/themes/colored/modules/checkbox.variables b/src/themes/colored/modules/checkbox.variables index c59d61b85..aa1bda5d5 100644 --- a/src/themes/colored/modules/checkbox.variables +++ b/src/themes/colored/modules/checkbox.variables @@ -10,7 +10,7 @@ @sliderOnLineColor: @primaryColor; /* Radio */ -@radioActiveBulletColor @primaryColor; +@radioActiveBulletColor: @primaryColor; /* Handle */ @handleBackground: @white @subtleGradient; diff --git a/src/themes/default/modules/checkbox.variables b/src/themes/default/modules/checkbox.variables index fdc6cdcde..89d1f802c 100644 --- a/src/themes/default/modules/checkbox.variables +++ b/src/themes/default/modules/checkbox.variables @@ -47,11 +47,11 @@ @checkboxPressedColor: @selectedTextColor; @labelPressedColor: @selectedTextColor; -/* Focused */ -@checkboxFocusedBackground: @offWhite; -@checkboxFocusedBorderColor: @selectedBorderColor; -@checkboxFocusedColor: @selectedTextColor; -@labelFocusedColor: @selectedTextColor; +/* Focus */ +@checkboxFocusBackground: @offWhite; +@checkboxFocusBorderColor: @selectedBorderColor; +@checkboxFocusCheckColor: @selectedTextColor; +@labelFocusColor: @selectedTextColor; /* Active */ @labelActiveColor: @selectedTextColor; @@ -61,8 +61,8 @@ @checkboxActiveCheckOpacity: 1; /* Active Focus */ -@checkboxActiveFocusBackground: @checkboxFocusedBackground; -@checkboxActiveFocusBorderColor: @checkboxFocusedBorderColor; +@checkboxActiveFocusBackground: @checkboxFocusBackground; +@checkboxActiveFocusBorderColor: @checkboxFocusBorderColor; @checkboxActiveFocusCheckColor: @selectedTextColor; /* Indeterminate */ @@ -93,10 +93,13 @@ @bulletColor: @textColor; @bulletRadius: @circularRadius; -@radioActiveBackground: @white; +@radioFocusBackground: @checkboxFocusBackground; +@radioFocusBulletColor: @checkboxFocusCheckColor; + +@radioActiveBackground: @checkboxActiveBackground; @radioActiveBulletColor: @checkboxActiveCheckColor; -@radioActiveFocusBackground: @white; +@radioActiveFocusBackground: @checkboxActiveFocusBackground; @radioActiveFocusBulletColor: @checkboxActiveFocusCheckColor; /* Slider & Toggle Handle */