From 082a35065f963889cf15a3127f4fa9131882a663 Mon Sep 17 00:00:00 2001 From: jlukic Date: Thu, 16 Jul 2015 16:09:27 -0400 Subject: [PATCH] #2610 partial work on checkbox focus variables --- RELEASE-NOTES.md | 6 + src/definitions/modules/checkbox.js | 3 +- src/definitions/modules/checkbox.less | 107 ++++++++++-------- src/themes/colored/modules/checkbox.variables | 2 + src/themes/default/modules/checkbox.variables | 28 ++++- 5 files changed, 90 insertions(+), 56 deletions(-) diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md index 6e4d5c57ed..85524715cc 100644 --- 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 index b7e7c197c1..385dc1cf9c 100644 --- 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 index 42b1e47ced..f3f98dedfc 100755 --- 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,8 +155,7 @@ .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; } @@ -162,21 +163,16 @@ 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 index f61f37b788..c59d61b856 100644 --- 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 index f3fc58c36a..fdc6cdcde3 100644 --- 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; + /*-------------------