Finishes #2610 and #2607 issues with checkbox focus styles

Semantic-Org · Jul 17, 2015 · 36bab3e · 36bab3e
1 parent 95542ce
commit 36bab3e
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 38 deletions.
diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md
@@ -3,15 +3,13 @@
 
 ### Version 2.0.4 - July X, 2015
 
-**Docs**
-
-- Fixed theme previews appearing incorrectly in all UI in docs. Regex parsing `.variable` files would ignore first variable after a comment.
-- Added individual examples of all form validation rules
-
 **[Reported Bugs](https://github.com/Semantic-Org/Semantic-UI/issues?q=is%3Aissue+milestone%3A2.0.4+is%3Aclosed)**
 - **Build Tools** - Fixed issue where sub tasks were undefined when importing SUI's `build` and `watch` tasks into custom gulpfile #2648
 - **Button** - Fixed `fluid buttons` not working correctly with `<button>` due to button tags not supporting `flex` rules. #2617
 - **Button** - Fixed colored vertical basic buttons appearing 2px offset #2655
+- **Checkbox** - Checkbox now focus after click, allowing for tab navigation from current position #2610
+- **Checkbox** - Fixed checkbox not using javascript having incorrect colors on focus #2607
+- **Checkbox** - Updated `colored` theme to add new focus color variables.
 - **Form** - Added `doesntContain` and `doesntContainExactly` #2638
 - **Form** - Fixed issue with `minLength[1]` validation not behaving same as `minLength > 2` #2636.
 - **Form** - Fixes errors when a field identifier is named `identifier` #2629
@@ -28,11 +26,18 @@
 - **Visibility** - `refreshOnResize` now correctly includes a default value #2615
 
 **Additional Bugs**
+- **Checkbox** - Fixed `space` shortcut causing checkbox to trigger twice
 - **Popup** - `wide` and `very wide` popup will now limit themselves to normal popup widths on mobile so that they still appear on screen.
 - **Sticky** - Fixed `sticky` content jumping from `fixed` to `bount bottom` when scroll position has surpassed bottom of container during page refresh.
 - **Sticky** - Sticky no longer uses `bottomPadding` to determine bottom edge of container.
 - **Steps** - Updated `basic` steps theme to appear correctly
 
+**Docs**
+- Fixed theme previews appearing incorrectly in all UI in docs. Regex parsing `.variable` files would ignore first variable after a comment.
+- Added individual examples of all form validation rules
+- Partial rewriite of sidebar documentation
+- Updated example in theme guide to include checkbox focus colors
+
 ### Version 2.0.3 - July 8, 2015
 
 **Docs Updates**

diff --git a/src/definitions/modules/checkbox.less b/src/definitions/modules/checkbox.less
@@ -217,8 +217,10 @@
   background: @checkboxActiveFocusBackground;
   border-color: @checkboxActiveFocusBorderColor;
 }
-.ui.checkbox input:checked ~ .box:after,
-.ui.checkbox input:checked ~ label:after {
+.ui.checkbox input:indeterminate:focus ~ .box:after,
+.ui.checkbox input:indeterminate:focus ~ label:after,
+.ui.checkbox input:checked:focus ~ .box:after,
+.ui.checkbox input:checked:focus ~ label:after {
   color: @checkboxActiveFocusCheckColor;
 }
 
@@ -321,8 +323,8 @@
 .ui.radio.checkbox input:focus ~ label:before {
   background-color: @radioFocusBackground;
 }
-.ui.radio.checkbox input:checked ~ .box:after,
-.ui.radio.checkbox input:checked ~ label:after {
+.ui.radio.checkbox input:focus ~ .box:after,
+.ui.radio.checkbox input:focus ~ label:after {
   background-color: @radioFocusBulletColor;
 }
 
@@ -339,11 +341,11 @@
 /* Active Focus */
 .ui.radio.checkbox input:focus:checked ~ .box:before,
 .ui.radio.checkbox input:focus:checked ~ label:before {
-  background-color: @radioActiveBackground;
+  background-color: @radioActiveFocusBackground;
 }
 .ui.radio.checkbox input:focus:checked ~ .box:after,
 .ui.radio.checkbox input:focus:checked ~ label:after {
-  background-color: @radioActiveBulletColor;
+  background-color: @radioActiveFocusBulletColor;
 }
 
 /*--------------
@@ -414,8 +416,6 @@
 
 /* Focus */
 .ui.slider.checkbox input:focus ~ .box:before,
-.ui.slider.checkbox input:focus ~ label:before,
-.ui.slider.checkbox input:focus ~ .box:before,
 .ui.slider.checkbox input:focus ~ label:before {
   background-color: @toggleFocusColor;
   border: none;
@@ -432,26 +432,26 @@
 }
 
 /* Active */
-.ui.slider.checkbox :checked ~ .box,
-.ui.slider.checkbox :checked ~ label {
+.ui.slider.checkbox input:checked ~ .box,
+.ui.slider.checkbox input:checked ~ label {
   color: @sliderOnLabelColor !important;
 }
-.ui.slider.checkbox :checked ~ .box:before,
-.ui.slider.checkbox :checked ~ label:before {
+.ui.slider.checkbox input:checked ~ .box:before,
+.ui.slider.checkbox input:checked ~ label:before {
   background-color: @sliderOnLineColor !important;
 }
-.ui.slider.checkbox :checked ~ .box:after,
-.ui.slider.checkbox :checked ~ label:after {
+.ui.slider.checkbox input:checked ~ .box:after,
+.ui.slider.checkbox input:checked ~ label:after {
   left: @sliderTravelDistance;
 }
 
 /* Active Focus */
-.ui.slider.checkbox :focus:checked ~ .box,
-.ui.slider.checkbox :focus:checked ~ label {
+.ui.slider.checkbox input:focus:checked ~ .box,
+.ui.slider.checkbox input:focus:checked ~ label {
   color: @sliderOnFocusLabelColor !important;
 }
-.ui.slider.checkbox :focus:checked ~ .box:before,
-.ui.slider.checkbox :focus:checked ~ label:before {
+.ui.slider.checkbox input:focus:checked ~ .box:before,
+.ui.slider.checkbox input:focus:checked ~ label:before {
   background-color: @sliderOnFocusLineColor !important;
 }
 

diff --git a/src/themes/colored/modules/checkbox.variables b/src/themes/colored/modules/checkbox.variables
@@ -1,17 +1,27 @@
 /* Checkbox */
 @checkboxActiveBackground: @primaryColor;
 @checkboxActiveBorderColor: @primaryColor;
+@checkboxActiveCheckColor: @white;
+
 @checkboxActiveFocusBackground: @primaryColorFocus;
+@checkboxActiveFocusBorderColor: @primaryColorFocus;
+@checkboxActiveFocusCheckColor: @white;
 
-@checkboxActiveCheckColor: @white;
 @checkboxTransition: none;
 
-/* Slider */
-@sliderOnLineColor: @primaryColor;
-
 /* Radio */
+@radioActiveBackground: @white;
+@radioActiveBorderColor: @primaryColor;
 @radioActiveBulletColor: @primaryColor;
 
+@radioActiveFocusBackground: @white;
+@radioActiveFocusBorderColor: @primaryColorFocus;
+@radioActiveFocusBulletColor: @primaryColorFocus;
+
+/* Slider */
+@sliderOnLineColor: @primaryColor;
+@sliderOnFocusLineColor: @primaryColorFocus;
+
 /* Handle */
 @handleBackground: @white @subtleGradient;
 @handleBoxShadow:

diff --git a/src/themes/default/globals/site.variables b/src/themes/default/globals/site.variables
@@ -456,15 +456,16 @@
 
 @circularRadius                : 500rem;
 
-@borderColor                   : rgba(34, 36, 38, 0.15);
-@strongBorderColor             : rgba(34, 36, 38, 0.22);
-@internalBorderColor           : rgba(34, 36, 38, 0.1);
-@selectedBorderColor           : rgba(34, 36, 38, 0.35);
-@disabledBorderColor           : rgba(34, 36, 38, 0.5);
-
-@solidInternalBorderColor      : #FAFAFA;
-@solidBorderColor              : #D4D4D5;
-@solidSelectedBorderColor      : #BCBDBD;
+@borderColor               : rgba(34, 36, 38, 0.15);
+@strongBorderColor         : rgba(34, 36, 38, 0.22);
+@internalBorderColor       : rgba(34, 36, 38, 0.1);
+@selectedBorderColor       : rgba(34, 36, 38, 0.35);
+@strongSelectedBorderColor : rgba(34, 36, 38, 0.5);
+@disabledBorderColor       : rgba(34, 36, 38, 0.5);
+
+@solidInternalBorderColor  : #FAFAFA;
+@solidBorderColor          : #D4D4D5;
+@solidSelectedBorderColor  : #BCBDBD;
 
 @whiteBorderColor              : rgba(255, 255, 255, 0.1);
 @selectedWhiteBorderColor      : rgba(255, 255, 255, 0.8);

diff --git a/src/themes/default/modules/checkbox.variables b/src/themes/default/modules/checkbox.variables
@@ -61,8 +61,8 @@
 @checkboxActiveCheckOpacity: 1;
 
 /* Active Focus */
-@checkboxActiveFocusBackground: @checkboxFocusBackground;
-@checkboxActiveFocusBorderColor: @checkboxFocusBorderColor;
+@checkboxActiveFocusBackground: @offWhite;
+@checkboxActiveFocusBorderColor: @strongSelectedBorderColor;
 @checkboxActiveFocusCheckColor: @selectedTextColor;
 
 /* Indeterminate */