diff --git a/src/definitions/modules/checkbox.js b/src/definitions/modules/checkbox.js index 7a177d7e6..738bf9427 100644 --- a/src/definitions/modules/checkbox.js +++ b/src/definitions/modules/checkbox.js @@ -56,14 +56,13 @@ $.fn.checkbox = function(parameters) { initialize: function() { module.verbose('Initializing checkbox', settings); - module.fix.input(); - module.create.label(); module.bind.events(); + module.set.tabbable(); + module.hide.input(); module.observeChanges(); - module.instantiate(); module.setup(); }, @@ -85,9 +84,10 @@ $.fn.checkbox = function(parameters) { }, fix: { - input: function() { + + reference: function() { if( $module.is(selector.input) ) { - module.debug('Fixing incorrect reference to module in invocation'); + module.debug('Behavior called on adjusting invoked element'); $module = $module.closest(selector.checkbox); module.refresh(); } @@ -126,6 +126,13 @@ $.fn.checkbox = function(parameters) { $input = $module.children(selector.input); }, + hide: { + input: function() { + module.verbose('Modfying z-index'); + $input.addClass(className.hidden); + } + }, + observeChanges: function() { if('MutationObserver' in window) { observer = new MutationObserver(function(mutations) { @@ -675,6 +682,7 @@ $.fn.checkbox.settings = { checked : 'checked', indeterminate : 'indeterminate', disabled : 'disabled', + hidden : 'hidden', radio : 'radio', readOnly : 'read-only' }, diff --git a/src/definitions/modules/checkbox.less b/src/definitions/modules/checkbox.less index e3e171296..cd4e768c4 100755 --- a/src/definitions/modules/checkbox.less +++ b/src/definitions/modules/checkbox.less @@ -30,27 +30,26 @@ .ui.checkbox { position: relative; display: inline-block; + backface-visibility: hidden; + outline: none; + vertical-align: baseline; min-height: @checkboxSize; - - font-size: 1rem; + font-size: @medium; line-height: @checkboxLineHeight; min-width: @checkboxSize; - backface-visibility: hidden; - - outline: none; - vertical-align: baseline; } .ui.checkbox input[type="checkbox"], .ui.checkbox input[type="radio"] { + cursor: pointer; position: absolute; top: 0px; left: 0px; - width: @checkboxSize; - height: @checkboxSize; opacity: 0 !important; outline: none; - z-index: -1; + z-index: 3; + width: @checkboxSize; + height: @checkboxSize; } @@ -253,6 +252,18 @@ color: @disabledCheckboxLabelColor; } +/*-------------- + Hidden +---------------*/ + +/* Initialized checkbox moves input below element + to prevent manually triggering */ +.ui.checkbox input[type="checkbox"].hidden, +.ui.checkbox input[type="radio"].hidden { + z-index: -1; +} + + /******************************* Types diff --git a/src/themes/default/modules/checkbox.variables b/src/themes/default/modules/checkbox.variables index 0c7387682..f3fc58c36 100644 --- a/src/themes/default/modules/checkbox.variables +++ b/src/themes/default/modules/checkbox.variables @@ -6,6 +6,7 @@ @checkboxColor: @textColor; @checkboxLineHeight: @checkboxSize; + /* Label */ @labelDistance: 1.85714em; /* 26px @ 14/em */