#2610 partial work on checkbox focus variables

Semantic-Org · Jul 16, 2015 · 082a350 · 082a350
1 parent 260e15d
commit 082a350
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 56 deletions.
diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md
@@ -3,6 +3,11 @@
 
 ### 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
 - **Popup** - Fixed issues where rounding could cause elements that are against edge of page from not appearing. Add new `jitter` setting for allowing popups to escape page boundaries by a small margin #2526
@@ -21,6 +26,7 @@
 - **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
 
 ### Version 2.0.3 - July 8, 2015
 

diff --git a/src/definitions/modules/checkbox.js b/src/definitions/modules/checkbox.js
@@ -177,6 +177,7 @@ $.fn.checkbox = function(parameters) {
               return;
             }
             module.toggle();
+            $input.focus();
             event.preventDefault();
           },
           keydown: function(event) {
@@ -193,7 +194,7 @@ $.fn.checkbox = function(parameters) {
               $input.blur();
               event.preventDefault();
             }
-            if(!event.ctrlKey && (key == keyCode.enter || key == keyCode.space)) {
+            if(!event.ctrlKey && (key == keyCode.enter)) {
               module.verbose('Enter key pressed, toggling checkbox');
               module.toggle();
               event.preventDefault();

diff --git a/src/definitions/modules/checkbox.less b/src/definitions/modules/checkbox.less
@@ -39,6 +39,8 @@
   line-height: @checkboxLineHeight;
   min-width: @checkboxSize;
 }
+
+/* HTML Checkbox */
 .ui.checkbox input[type="checkbox"],
 .ui.checkbox input[type="radio"] {
   cursor: pointer;
@@ -153,30 +155,24 @@
 .ui.checkbox label:active::after {
   color: @checkboxPressedColor;
 }
-.ui.checkbox input[type="checkbox"]:active ~ label,
-.ui.checkbox input[type="radio"]:active ~ label {
+.ui.checkbox input:active ~ label {
   color: @labelPressedColor;
 }
 
 /*--------------
      Focus
 ---------------*/
 
-.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:focus ~ .box:before,
+.ui.checkbox input:focus ~ label:before {
   background: @checkboxFocusedBackground;
   border-color: @checkboxFocusedBorderColor;
 }
-.ui.checkbox input[type="checkbox"]:focus ~ .box:after,
-.ui.checkbox input[type="checkbox"]:focus ~ label:after,
-.ui.checkbox input[type="radio"]:focus ~ .box:after,
-.ui.checkbox input[type="radio"]:focus ~ label:after {
+.ui.checkbox input:focus ~ .box:after,
+.ui.checkbox input:focus ~ label:after {
   color: @checkboxFocusedColor;
 }
-.ui.checkbox input[type="checkbox"]:focus ~ label,
-.ui.checkbox input[type="radio"]:focus ~ label {
+.ui.checkbox input:focus ~ label {
   color: @labelFocusedColor;
 }
 
@@ -199,13 +195,13 @@
   Indeterminate
 ---------------*/
 
-.ui.checkbox input[type="checkbox"]:indeterminate ~ .box:before,
-.ui.checkbox input[type="checkbox"]:indeterminate ~ label:before {
+.ui.checkbox input:indeterminate ~ .box:before,
+.ui.checkbox input:indeterminate ~ label:before {
   background: @checkboxIndeterminateBackground;
   border-color: @checkboxIndeterminateBorderColor;
 }
-.ui.checkbox input[type="checkbox"]:indeterminate ~ .box:after,
-.ui.checkbox input[type="checkbox"]:indeterminate ~ label:after {
+.ui.checkbox input:indeterminate ~ .box:after,
+.ui.checkbox input:indeterminate ~ label:after {
   opacity: @checkboxIndeterminateCheckOpacity;
   color: @checkboxIndeterminateCheckColor;
 }
@@ -214,12 +210,12 @@
   Active Focus
 ---------------*/
 
-.ui.checkbox input[type="checkbox"]:indeterminate:focus ~ .box:before,
-.ui.checkbox input[type="checkbox"]:indeterminate:focus ~ label:before,
-.ui.checkbox input[type="checkbox"]:checked:focus ~ .box:before,
-.ui.checkbox input[type="checkbox"]:checked:focus ~ label:before  {
-  background: @checkboxFocusedBackground;
-  border-color: @checkboxFocusedBorderColor;
+.ui.checkbox input:indeterminate:focus ~ .box:before,
+.ui.checkbox input:indeterminate:focus ~ label:before,
+.ui.checkbox input:checked:focus ~ .box:before,
+.ui.checkbox input:checked:focus ~ label:before  {
+  background: @checkboxActiveFocusBackground;
+  border-color: @checkboxActiveFocusBorderColor;
 }
 
 
@@ -252,21 +248,17 @@
 
 /* Initialized checkbox moves input below element
  to prevent manually triggering */
-.ui.checkbox input[type="checkbox"].hidden,
-.ui.checkbox input[type="radio"].hidden {
+.ui.checkbox input.hidden {
   z-index: -1;
 }
 
 /* Selectable Label */
-.ui.checkbox input[type="checkbox"].hidden + label,
-.ui.checkbox input[type="radio"].hidden + label {
+.ui.checkbox input.hidden + label {
   cursor: pointer;
   user-select: none;
 }
 
 
-
-
 /*******************************
              Types
 *******************************/
@@ -321,12 +313,12 @@
 }
 
 /* Active */
-.ui.radio.checkbox input[type="radio"]:checked ~ .box:before,
-.ui.radio.checkbox input[type="radio"]:checked ~ label:before {
+.ui.radio.checkbox input:checked ~ .box:before,
+.ui.radio.checkbox input:checked ~ label:before {
   background-color: @radioActiveBackground;
 }
-.ui.radio.checkbox input[type="radio"]:checked ~ .box:after,
-.ui.radio.checkbox input[type="radio"]:checked ~ label:after {
+.ui.radio.checkbox input:checked ~ .box:after,
+.ui.radio.checkbox input:checked ~ label:after {
   background-color: @radioActiveBulletColor;
 }
 
@@ -339,8 +331,7 @@
 }
 
 /* Input */
-.ui.slider.checkbox input[type="checkbox"],
-.ui.slider.checkbox input[type="radio"] {
+.ui.slider.checkbox input {
   width: @sliderWidth;
   height: @sliderHeight;
 }
@@ -398,10 +389,10 @@
 }
 
 /* Focus */
-.ui.slider.checkbox input[type="checkbox"]:focus ~ .box:before,
-.ui.slider.checkbox input[type="checkbox"]:focus ~ label:before,
-.ui.slider.checkbox input[type="radio"]:focus ~ .box:before,
-.ui.slider.checkbox input[type="radio"]:focus ~ label:before {
+.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;
 }
@@ -419,17 +410,27 @@
 /* Active */
 .ui.slider.checkbox :checked ~ .box,
 .ui.slider.checkbox :checked ~ label {
-  color: @sliderOnLabelColor;
+  color: @sliderOnLabelColor !important;
 }
 .ui.slider.checkbox :checked ~ .box:before,
 .ui.slider.checkbox :checked ~ label:before {
-  background-color: @sliderOnLineColor;
+  background-color: @sliderOnLineColor !important;
 }
 .ui.slider.checkbox :checked ~ .box:after,
 .ui.slider.checkbox :checked ~ label:after {
   left: @sliderTravelDistance;
 }
 
+/* Active Focus */
+.ui.slider.checkbox :focus:checked ~ .box,
+.ui.slider.checkbox :focus:checked ~ label {
+  color: @sliderOnFocusLabelColor !important;
+}
+.ui.slider.checkbox :focus:checked ~ .box:before,
+.ui.slider.checkbox :focus:checked ~ label:before {
+  background-color: @sliderOnFocusLineColor !important;
+}
+
 
 /*--------------
      Toggle
@@ -440,8 +441,7 @@
 }
 
 /* Input */
-.ui.toggle.checkbox input[type="checkbox"],
-.ui.toggle.checkbox input[type="radio"] {
+.ui.toggle.checkbox input {
   width: @toggleWidth;
   height: @toggleHeight;
 }
@@ -495,18 +495,14 @@
   transition: @toggleHandleTransition;
 }
 
-.ui.toggle.checkbox input[type="checkbox"] ~ .box:after,
-.ui.toggle.checkbox input[type="checkbox"] ~ label:after,
-.ui.toggle.checkbox input[type="radio"] ~ .box:after,
-.ui.toggle.checkbox input[type="radio"] ~ label:after {
+.ui.toggle.checkbox input ~ .box:after,
+.ui.toggle.checkbox input ~ label:after {
   left: @toggleOffOffset;
 }
 
 /* Focus */
-.ui.toggle.checkbox input[type="checkbox"]:focus ~ .box:before,
-.ui.toggle.checkbox input[type="checkbox"]:focus ~ label:before,
-.ui.toggle.checkbox input[type="radio"]:focus ~ .box:before,
-.ui.toggle.checkbox input[type="radio"]:focus ~ label:before {
+.ui.toggle.checkbox input:focus ~ .box:before,
+.ui.toggle.checkbox input:focus ~ label:before {
   background-color: @toggleFocusColor;
   border: none;
 }
@@ -532,6 +528,17 @@
   left: @toggleOnOffset;
 }
 
+
+/* Active Focus */
+.ui.toggle.checkbox input:focus:checked ~ .box,
+.ui.toggle.checkbox input:focus:checked ~ label {
+  color: @toggleOnFocusLabelColor;
+}
+.ui.toggle.checkbox input:focus:checked ~ .box:before,
+.ui.toggle.checkbox input:focus:checked ~ label:before {
+  background-color: @toggleOnFocusLaneColor;
+}
+
 /*******************************
             Variations
 *******************************/

diff --git a/src/themes/colored/modules/checkbox.variables b/src/themes/colored/modules/checkbox.variables
@@ -1,6 +1,8 @@
 /* Checkbox */
 @checkboxActiveBackground: @primaryColor;
 @checkboxActiveBorderColor: @primaryColor;
+@checkboxActiveFocusBackground: @primaryColorFocus;
+
 @checkboxActiveCheckColor: @white;
 @checkboxTransition: none;
 

diff --git a/src/themes/default/modules/checkbox.variables b/src/themes/default/modules/checkbox.variables
@@ -54,11 +54,16 @@
 @labelFocusedColor: @selectedTextColor;
 
 /* Active */
+@labelActiveColor: @selectedTextColor;
 @checkboxActiveBackground: @white;
 @checkboxActiveBorderColor: @selectedBorderColor;
-@checkboxActiveCheckOpacity: 1;
 @checkboxActiveCheckColor: @selectedTextColor;
-@labelActiveColor: @selectedTextColor;
+@checkboxActiveCheckOpacity: 1;
+
+/* Active Focus */
+@checkboxActiveFocusBackground: @checkboxFocusedBackground;
+@checkboxActiveFocusBorderColor: @checkboxFocusedBorderColor;
+@checkboxActiveFocusCheckColor: @selectedTextColor;
 
 /* Indeterminate */
 @checkboxIndeterminateBackground: @checkboxActiveBackground;
@@ -84,13 +89,16 @@
 
 @bulletTop: 1px;
 @bulletLeft: 0px;
-@bulletScale: (7 / 15); /* 8px as unitless value from radio size */
+@bulletScale: (7 / 15); /* 7px as unitless value from radio size */
 @bulletColor: @textColor;
 @bulletRadius: @circularRadius;
 
 @radioActiveBackground: @white;
 @radioActiveBulletColor: @checkboxActiveCheckColor;
 
+@radioActiveFocusBackground: @white;
+@radioActiveFocusBulletColor: @checkboxActiveFocusCheckColor;
+
 /* Slider & Toggle Handle */
 @handleBackground: @white @subtleGradient;
 @handleBoxShadow:
@@ -120,13 +128,19 @@
 @sliderLabelDistance: @sliderLineWidth + 1rem;
 @sliderOffLabelColor: @unselectedTextColor;
 
-@sliderOnLineColor: @lightBlack;
-@sliderOnLabelColor: @selectedTextColor;
 @sliderLabelLineHeight: 1rem;
 
+/* Slider States */
 @sliderHoverLaneBackground: @veryStrongTransparentBlack;
 @sliderHoverLabelColor: @hoveredTextColor;
 
+@sliderOnLineColor: @lightBlack;
+@sliderOnLabelColor: @selectedTextColor;
+
+@sliderOnFocusLineColor: @lightBlackFocus;
+@sliderOnFocusLabelColor: @sliderOnLabelColor;
+
+
 
 /* Toggle */
 @toggleLaneWidth: 3.5rem;
@@ -158,9 +172,13 @@
 @toggleHoverColor: @toggleFocusColor;
 
 @toggleOffLabelColor: @checkboxColor;
+
 @toggleOnLabelColor: @selectedTextColor;
 @toggleOnLaneColor: @primaryColor;
 
+@toggleOnFocusLaneColor: @primaryColorFocus;
+@toggleOnFocusLabelColor: @toggleOnLabelColor;
+
 
 
 /*-------------------