diff --git a/src/modules/checkbox.js b/src/modules/checkbox.js index 16d6f4e90..e189530f6 100755 --- a/src/modules/checkbox.js +++ b/src/modules/checkbox.js @@ -64,6 +64,9 @@ $.fn.checkbox = function(parameters) { .on('click' + eventNamespace, module.toggle) .data(moduleNamespace, module) ; + $input + .on('keydown' + eventNamespace, module.event.keydown) + ; $label .on('click' + eventNamespace, module.toggle) ; @@ -90,20 +93,41 @@ $.fn.checkbox = function(parameters) { ; }, + event: { + keydown: function(event) { + var + key = event.which, + keyCode = { + enter : 13, + escape : 27 + } + ; + if( key == keyCode.escape) { + module.verbose('Escape key pressed blurring field'); + $module + .blur() + ; + } + if(!event.ctrlKey && key == keyCode.enter) { + $.proxy(module.toggle, this)(); + } + } + }, + is: { radio: function() { return $module.hasClass(className.radio); }, - enabled: function() { + checked: function() { return $input.prop('checked') !== undefined && $input.prop('checked'); }, - disabled: function() { - return !module.is.enabled(); + unchecked: function() { + return !module.is.checked(); } }, can: { - disable: function() { + uncheck: function() { return (typeof settings.required === 'boolean') ? settings.required : !module.is.radio() @@ -111,33 +135,33 @@ $.fn.checkbox = function(parameters) { } }, - enable: function() { + check: function() { module.debug('Enabling checkbox', $input); $input .prop('checked', true) .trigger('change') ; $.proxy(settings.onChange, $input.get())(); - $.proxy(settings.onEnable, $input.get())(); + $.proxy(settings.onChecked, $input.get())(); }, - disable: function() { + uncheck: function() { module.debug('Disabling checkbox'); $input .prop('checked', false) .trigger('change') ; $.proxy(settings.onChange, $input.get())(); - $.proxy(settings.onDisable, $input.get())(); + $.proxy(settings.onUnchecked, $input.get())(); }, toggle: function(event) { module.verbose('Determining new checkbox state'); - if( module.is.disabled() ) { - module.enable(); + if( module.is.unchecked() ) { + module.check(); } - else if( module.is.enabled() && module.can.disable() ) { - module.disable(); + else if( module.is.checked() && module.can.uncheck() ) { + module.uncheck(); } }, setting: function(name, value) { @@ -329,8 +353,8 @@ $.fn.checkbox.settings = { required : 'auto', onChange : function(){}, - onEnable : function(){}, - onDisable : function(){}, + onChecked : function(){}, + onUnchecked : function(){}, error : { method : 'The method you called is not defined.' diff --git a/src/modules/checkbox.less b/src/modules/checkbox.less index 1916c6561..c6a25efca 100755 --- a/src/modules/checkbox.less +++ b/src/modules/checkbox.less @@ -9,23 +9,32 @@ * */ +/******************************* + Theme +*******************************/ + +@type : 'module'; +@element : 'checkbox'; + +@import '../semantic.config'; + + /******************************* Checkbox *******************************/ + /*-------------- - Standard + Content ---------------*/ - -/*--- Content ---*/ - .ui.checkbox { position: relative; display: inline-block; + height: @checkboxHeight; + min-width: 1em; - height: 1.25em; line-height: 1em; outline: none; @@ -40,84 +49,72 @@ } -/*--- Box ---*/ +/*-------------- + Box +---------------*/ + .ui.checkbox .box, .ui.checkbox label { cursor: pointer; - padding-left: 2em; + padding-left: @labelPadding; outline: none; } .ui.checkbox .box:before, .ui.checkbox label:before { position: absolute; - top: 0em; - left: 0em; line-height: 1; - width: 1em; - height: 1em; - left: 0em; + width: 1.25em; + height: 1.25em; + top: @boxOffset; + left: @boxOffset; content: ''; - border-radius: 4px; - background: #FFFFFF; + border-radius: 0.25em; transition: background-color 0.3s ease, + border 0.3s ease, box-shadow 0.3s ease ; - - box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2); + border: @checkboxBorder; } -/*--- Checkbox ---*/ +/*-------------- + Checkmark +---------------*/ + .ui.checkbox .box:after, .ui.checkbox label:after { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; - filter: alpha(opacity=0); - opacity: 0; - content: ''; position: absolute; - background: transparent; - border: 0.2em solid #333333; - border-top: none; - border-right: none; - transform: rotate(-45deg); -} -.ui.checkbox .box:after, -.ui.checkbox label:after { - top: 0.275em; - left: 0.2em; - width: 0.45em; - height: 0.15em; + top: 0em; + left: 0em; + + opacity: 0; + color: @checkboxColor; + transition: opacity 0.1s ease; } -/*--- Inside Label ---*/ -.ui.checkbox label { - color: rgba(0, 0, 0, 0.6); +/*-------------- + Label +---------------*/ +/* Inside */ +.ui.checkbox label, +.ui.checkbox + label { + cursor: pointer; + color: @labelColor; transition: color 0.2s ease; -} -.ui.checkbox label:hover { - color: rgba(0, 0, 0, 0.8); + user-select: none; } -.ui.checkbox input:focus + label { - color: rgba(0, 0, 0, 0.8); -} - -/*--- Outside Label ---*/ +/* Outside */ .ui.checkbox + label { - cursor: pointer; - opacity: 0.85; vertical-align: middle; } -.ui.checkbox + label:hover { - opacity: 1; -} /******************************* @@ -125,33 +122,54 @@ *******************************/ -/*--- Hover ---*/ +/*-------------- + Hover +---------------*/ + .ui.checkbox .box:hover::before, .ui.checkbox label:hover::before { - box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); + border: 1px solid @selectedBorderColor; +} +.ui.checkbox label:hover, +.ui.checkbox + label:hover { + color: @labelHoverColor; } -/*--- Down ---*/ +/*-------------- + Down +---------------*/ + .ui.checkbox .box:active::before, .ui.checkbox label:active::before { background-color: #F5F5F5; } -/*--- Focus ---*/ +/*-------------- + Focus +---------------*/ + .ui.checkbox input:focus + .box:before, .ui.checkbox input:focus + label:before { - box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); + border: 1px solid @selectedBorderColor; } +.ui.checkbox input:focus + label { + color: @labelSelectedColor; +} + + +/*-------------- + Active +---------------*/ -/*--- Active ---*/ .ui.checkbox input:checked + .box:after, .ui.checkbox input:checked + label:after { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; - filter: alpha(opacity=100); opacity: 1; } -/*--- Disabled ---*/ +/*-------------- + Disabled +---------------*/ + .ui.disabled.checkbox + .box:after, .ui.checkbox input[disabled] + .box:after, .ui.disabled.checkbox label, @@ -170,26 +188,17 @@ Radio ---------------*/ +/* Box */ .ui.radio.checkbox .box:before, .ui.radio.checkbox label:before { - min-width: 1em; - height: 1em; - border-radius: 500px; + border-radius: @circularRadius; transform: none; } + +/* Circle */ .ui.radio.checkbox .box:after, .ui.radio.checkbox label:after { border: none; - top: 0.2em; - left: 0.2em; - - width: 0.6em; - height: 0.6em; - - background-color: #555555; - - transform: none; - border-radius: 500px; } /*-------------- @@ -198,96 +207,75 @@ .ui.slider.checkbox { cursor: pointer; - min-width: 3em; -} - -/* Line */ -.ui.slider.checkbox:after { - position: absolute; - top: 0.5em; - left: 0em; - content: ''; - - width: 3em; - height: 2px; - background-color: rgba(0, 0, 0, 0.1); } -/* Button */ .ui.slider.checkbox .box, .ui.slider.checkbox label { - padding-left: 4em; + padding-left: @sliderLabelDistance; } + +/* Line */ .ui.slider.checkbox .box:before, .ui.slider.checkbox label:before { cursor: pointer; display: block; position: absolute; - top: -0.25em; + content: ''; + top: @sliderLineVerticalOffset; left: 0em; z-index: 1; + border: none !important; - width: 1.5em; - height: 1.5em; + background-color: @neutralCheckbox; + width: @sliderLineWidth; + height: @sliderLineHeight; transform: none; - box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; - - border-radius: 50rem; - - transition: left 0.3s ease 0s; + border-radius: @circularRadius; } -/* Button Activation Light */ +/* Handle */ .ui.slider.checkbox .box:after, .ui.slider.checkbox label:after { - opacity: 1; - + background: @handleBackground; position: absolute; content: ''; - top: 0.15em; - left: 0em; + opacity: 1; z-index: 2; - margin-left: 0.375em; - border: none; - width: 0.75em; - height: 0.75em; - - border-radius: 50rem; - - transform: none; + box-shadow: @handleBoxShadow; + width: @handleSize; + height: @handleSize; + top: @sliderHandleOffset; + left: 0em; + border-radius: @circularRadius; transition: background 0.3s ease 0s, left 0.3s ease 0s ; } -/* Selected Slider Toggle */ -.ui.slider.checkbox input:checked + .box:before, -.ui.slider.checkbox input:checked + label:before, -.ui.slider.checkbox input:checked + .box:after, -.ui.slider.checkbox input:checked + label:after { - left: 1.75em; +/* Focus */ +.ui.slider.checkbox input:focus + .box:before, +.ui.slider.checkbox input:focus + label:before { + background-color: @toggleFocusColor; + border: none; } -/* Off Color */ -.ui.slider.checkbox .box:after, -.ui.slider.checkbox label:after { - background-color: #D95C5C; +/* Active */ +.ui.slider.checkbox input:checked + .box:before, +.ui.slider.checkbox input:checked + label:before { + background-color: @positiveCheckbox; } - -/* On Color */ .ui.slider.checkbox input:checked + .box:after, .ui.slider.checkbox input:checked + label:after { - background-color: #89B84C; + left: @sliderTravelDistance; } - /*-------------- Toggle ---------------*/ @@ -298,7 +286,7 @@ .ui.toggle.checkbox .box, .ui.toggle.checkbox label { - padding-left: 4em; + padding-left: 3em; } /* Switch */ @@ -309,58 +297,56 @@ position: absolute; content: ''; - top: -0.25em; + + top: @toggleSwitchVerticalOffset; left: 0em; z-index: 1; + border: none; - background-color: #FFFFFF; - width: 3em; - height: 1.5em; - - transform: none; - box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; - border-radius: 50rem; + background-color: @neutralCheckbox; + width: @toggleSwitchWidth; + height: @toggleSwitchHeight; + border-radius: @circularRadius; } -/* Activation Light */ +/* Handle */ .ui.toggle.checkbox .box:after, .ui.toggle.checkbox label:after { - opacity: 1; - - background-color: transparent; - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; - - content: ''; + background: @handleBackground; position: absolute; - top: 0.15em; - left: 0.5em; + content: ''; + opacity: 1; z-index: 2; border: none; - width: 0.75em; - height: 0.75em; + box-shadow: @handleBoxShadow; + width: @handleSize; + height: @handleSize; + top: @sliderHandleOffset; + left: 0em; - background-color: #D95C5C; - border-radius: 50rem; + border-radius: @circularRadius; transition: background 0.3s ease 0s, left 0.3s ease 0s ; } -/* Active */ -.ui.toggle.checkbox:active .box:before, -.ui.toggle.checkbox:active label:before { - background-color: #F5F5F5; +/* Focus */ +.ui.toggle.checkbox input:focus + .box:before, +.ui.toggle.checkbox input:focus + label:before { + background-color: @toggleFocusColor; + border: none; } /* Active */ +.ui.toggle.checkbox input:checked + .box:before, +.ui.toggle.checkbox input:checked + label:before { + background-color: @positiveCheckbox; +} .ui.toggle.checkbox input:checked + .box:after, .ui.toggle.checkbox input:checked + label:after { - left: 1.75em; - background-color: #89B84C; + left: 1em; } @@ -377,4 +363,6 @@ } .ui.huge.checkbox { font-size: 1.5em; -} \ No newline at end of file +} + +.loadUIOverrides();