diff --git a/src/definitions/modules/checkbox.js b/src/definitions/modules/checkbox.js index 00ce0e44e..3ec33da0d 100644 --- a/src/definitions/modules/checkbox.js +++ b/src/definitions/modules/checkbox.js @@ -140,6 +140,13 @@ $.fn.checkbox = function(parameters) { }, event: { + click: function(event) { + if( $(event.target).is(selector.input) ) { + module.verbose('Using default check action on initialized checkbox'); + return; + } + module.toggle(); + }, keydown: function(event) { var key = event.which, @@ -200,7 +207,7 @@ $.fn.checkbox = function(parameters) { can: { change: function() { - return !( $module.hasClass(className.disabled) || $module.hasClass(className.readOnly) || $input.prop('disabled') ); + return !( $module.hasClass(className.disabled) || $module.hasClass(className.readOnly) || $input.prop('disabled') || $input.prop('readonly') ); }, uncheck: function() { return (typeof settings.uncheckable === 'boolean') @@ -337,7 +344,7 @@ $.fn.checkbox = function(parameters) { events: function() { module.verbose('Attaching checkbox events'); $module - .on('click' + eventNamespace, module.toggle) + .on('click' + eventNamespace, module.event.click) .on('keydown' + eventNamespace, selector.input, module.event.keydown) ; } @@ -358,12 +365,16 @@ $.fn.checkbox = function(parameters) { check: function() { module.debug('Enabling checkbox', $input); + module.set.input.determinate(); module.set.input.checked(); + module.set.determinate(); module.set.checked(); }, uncheck: function() { module.debug('Disabling checkbox'); + module.set.input.determinate(); + module.set.determinate(); module.set.input.unchecked(); module.set.unchecked(); }, diff --git a/src/definitions/modules/checkbox.less b/src/definitions/modules/checkbox.less index 3e1b2eb9c..9e2e1677a 100755 --- a/src/definitions/modules/checkbox.less +++ b/src/definitions/modules/checkbox.less @@ -46,6 +46,8 @@ position: absolute; top: 0px; left: 0px; + width: @checkboxSize; + height: @checkboxSize; opacity: 0 !important; outline: none; z-index: -1; @@ -59,11 +61,14 @@ .ui.checkbox .box, .ui.checkbox label { + position: relative; display: block; cursor: pointer; padding-left: @labelDistance; outline: none; } + +.ui.checkbox .box, .ui.checkbox label { font-size: @fontSize; } @@ -72,9 +77,10 @@ .ui.checkbox label:before { position: absolute; - line-height: 1; - width: @checkboxSize; - height: @checkboxSize; + line-height: @checkboxCheckLineHeight; + + width: 17px; + height: 17px; top: 0em; left: 0em; content: ''; @@ -93,12 +99,14 @@ .ui.checkbox .box:after, .ui.checkbox label:after { position: absolute; + font-size: @checkboxCheckFontSize; top: @checkboxCheckTop; left: @checkboxCheckLeft; - line-height: @checkboxSize; - width: @checkboxSize; - height: @checkboxSize; + line-height: @checkboxCheckLineHeight; + width: @checkboxCheckSize; + height: @checkboxCheckSize; text-align: center; + vertical-align: middle; opacity: 0; color: @checkboxColor; @@ -312,6 +320,14 @@ min-height: @sliderHeight; } +/* Input */ +.ui.slider.checkbox input[type="checkbox"], +.ui.slider.checkbox input[type="radio"] { + width: @sliderWidth; + height: @sliderHeight; +} + +/* Label */ .ui.slider.checkbox .box, .ui.slider.checkbox label { padding-left: @sliderLabelDistance; @@ -404,6 +420,14 @@ min-height: @toggleHeight; } +/* Input */ +.ui.toggle.checkbox input[type="checkbox"], +.ui.toggle.checkbox input[type="radio"] { + width: @toggleWidth; + height: @toggleHeight; +} + +/* Label */ .ui.toggle.checkbox .box, .ui.toggle.checkbox label { min-height: @toggleHandleSize;