diff --git a/src/definitions/modules/checkbox.js b/src/definitions/modules/checkbox.js index 3ec33da0d..107233a7e 100644 --- a/src/definitions/modules/checkbox.js +++ b/src/definitions/modules/checkbox.js @@ -56,14 +56,16 @@ $.fn.checkbox = function(parameters) { initialize: function() { module.verbose('Initializing checkbox', settings); + module.fix.input(); + module.create.label(); module.bind.events(); module.set.input.tabbable(); - module.setup(); module.observeChanges(); module.instantiate(); + module.setup(); }, instantiate: function() { @@ -82,6 +84,16 @@ $.fn.checkbox = function(parameters) { ; }, + fix: { + input: function() { + if( $module.is(selector.input) ) { + module.debug('Fixing incorrect reference to module in invocation'); + $module = $module.closest(selector.checkbox); + module.refresh(); + } + } + }, + setup: function() { if( module.is.checked() ) { module.debug('Setting initial value to checked'); @@ -355,26 +367,34 @@ $.fn.checkbox = function(parameters) { module.debug('Removing events'); $module .off(eventNamespace) - .removeData(moduleNamespace) - ; - $label - .off(eventNamespace) ; } }, check: function() { - module.debug('Enabling checkbox', $input); - module.set.input.determinate(); + module.debug('Checking checkbox', $input); + if(module.is.indeterminate()) { + module.set.input.determinate(); + module.set.determinate(); + } + if(module.is.checked()) { + module.debug('Module is already checked'); + return; + } module.set.input.checked(); - module.set.determinate(); module.set.checked(); }, uncheck: function() { - module.debug('Disabling checkbox'); - module.set.input.determinate(); - module.set.determinate(); + module.debug('Unchecking checkbox'); + if(module.is.indeterminate()) { + module.set.input.determinate(); + module.set.determinate(); + } + if(module.is.unchecked()) { + module.debug('Module is already unchecked'); + return; + } module.set.input.unchecked(); module.set.unchecked(); }, @@ -418,11 +438,12 @@ $.fn.checkbox = function(parameters) { } return; } - module.verbose('Determining new checkbox state'); - if( module.is.indeterminate() || module.is.unchecked() ) { + if( module.is.unchecked() ) { + module.debug('Currently unchecked'); module.check(); } else if( module.is.checked() && module.can.uncheck() ) { + module.debug('Currently checked'); module.uncheck(); } }, @@ -614,7 +635,7 @@ $.fn.checkbox.settings = { // delegated event context uncheckable : 'auto', - fireOnInit : true, + fireOnInit : false, onChange : function(){}, @@ -636,7 +657,7 @@ $.fn.checkbox.settings = { }, error : { - method : 'The method you called is not defined' + method : 'The method you called is not defined' }, selector : { diff --git a/src/definitions/modules/checkbox.less b/src/definitions/modules/checkbox.less index 13e0f6380..e3e171296 100755 --- a/src/definitions/modules/checkbox.less +++ b/src/definitions/modules/checkbox.less @@ -76,11 +76,11 @@ .ui.checkbox .box:before, .ui.checkbox label:before { position: absolute; + top: 0px; + left: 0px; width: @checkboxSize; height: @checkboxSize; - top: @checkboxTop; - left: @checkboxLeft; content: ''; background: @checkboxBackground; @@ -100,7 +100,6 @@ font-size: @checkboxCheckFontSize; top: @checkboxCheckTop; left: @checkboxCheckLeft; - line-height: @checkboxCheckLineHeight; width: @checkboxCheckSize; height: @checkboxCheckSize; text-align: center; @@ -192,20 +191,30 @@ Active ---------------*/ -.ui.checkbox input:indeterminate ~ .box:before, -.ui.checkbox input:indeterminate ~ label:before, .ui.checkbox input:checked ~ .box:before, .ui.checkbox input:checked ~ label:before { background: @checkboxActiveBackground; border-color: @checkboxActiveBorderColor; } - -.ui.checkbox input:indeterminate ~ .box:after, -.ui.checkbox input:indeterminate ~ label:after, .ui.checkbox input:checked ~ .box:after, .ui.checkbox input:checked ~ label:after { - opacity: 1; - color: @checkboxActiveColor; + opacity: @checkboxActiveCheckOpacity; + color: @checkboxActiveCheckColor; +} + +/*-------------- + Indeterminate +---------------*/ + +.ui.checkbox input:indeterminate ~ .box:before, +.ui.checkbox input:indeterminate ~ label:before { + background: @checkboxIndeterminateBackground; + border-color: @checkboxIndeterminateBorderColor; +} +.ui.checkbox input:indeterminate ~ .box:after, +.ui.checkbox input:indeterminate ~ label:after { + opacity: @checkboxIndeterminateCheckOpacity; + color: @checkboxIndeterminateCheckColor; } /*-------------- @@ -276,7 +285,7 @@ left: @radioLeft; } -/* Circle */ +/* Bullet */ .ui.radio.checkbox .box:after, .ui.radio.checkbox label:after { border: none; @@ -284,14 +293,13 @@ width: @radioSize; height: @radioSize; line-height: @radioSize; - top: @radioTop; - left: @radioLeft; - font-size: @radioCircleSize; } /* Radio Checkbox */ .ui.radio.checkbox .box:after, .ui.radio.checkbox label:after { + top: @bulletTop; + left: @bulletLeft; width: @radioSize; height: @radioSize; border-radius: @bulletRadius; @@ -338,6 +346,7 @@ display: block; position: absolute; content: ''; + transform: none; border: none !important; left: 0em; z-index: 1; @@ -442,6 +451,7 @@ position: absolute; content: ''; z-index: 1; + transform: none; border: none; top: @toggleLaneVerticalOffset; diff --git a/src/themes/colored/modules/checkbox.variables b/src/themes/colored/modules/checkbox.variables index 650c5e6cc..b6fce10ed 100644 --- a/src/themes/colored/modules/checkbox.variables +++ b/src/themes/colored/modules/checkbox.variables @@ -1,7 +1,7 @@ /* Checkbox */ @checkboxActiveBackground: @primaryColor; -@checkboxActiveColor: @white; @checkboxActiveBorderColor: @primaryColor; +@checkboxActiveCheckColor: @white; @checkboxTransition: none; /* Slider */ @@ -9,7 +9,6 @@ /* Radio */ @radioActiveBackground: @primaryColor; -@checkboxActiveBulletColor: @primaryColor; /* Handle */ @handleBackground: @white @subtleGradient; diff --git a/src/themes/default/modules/checkbox.variables b/src/themes/default/modules/checkbox.variables index 42dba94bd..de576b497 100644 --- a/src/themes/default/modules/checkbox.variables +++ b/src/themes/default/modules/checkbox.variables @@ -10,23 +10,20 @@ @labelDistance: 1.85714em; /* 26px @ 14/em */ /* Checkbox */ -@checkboxTop: 0px; -@checkboxLeft: 0px; @checkboxBackground: @white; @checkboxBorder: 1px solid @solidBorderColor; -@checkboxBorderRadius: @defaultBorderRadius; +@checkboxBorderRadius: @3px; @checkboxTransition: - background-color @defaultDuration @defaultEasing, border @defaultDuration @defaultEasing, opacity @defaultDuration @defaultEasing, + transform @defaultDuration @defaultEasing, box-shadow @defaultDuration @defaultEasing ; /* Checkmark */ @checkboxCheckFontSize: 14px; -@checkboxCheckTop: @checkboxTop; -@checkboxCheckLeft: @checkboxLeft; -@checkboxCheckLineHeight: @checkboxLineHeight; +@checkboxCheckTop: 0px; +@checkboxCheckLeft: 0px; @checkboxCheckSize: @checkboxSize; /* Label */ @@ -38,25 +35,35 @@ States --------------------*/ +/* Hover */ @checkboxHoverBackground: @checkboxBackground; @checkboxHoverBorderColor: @selectedBorderColor; @labelHoverColor: @hoveredTextColor; +/* Pressed */ @checkboxPressedBackground: @offWhite; @checkboxPressedBorderColor: @selectedBorderColor; @checkboxPressedColor: @selectedTextColor; @labelPressedColor: @selectedTextColor; +/* Focused */ @checkboxFocusedBackground: @offWhite; @checkboxFocusedBorderColor: @selectedBorderColor; @checkboxFocusedColor: @selectedTextColor; @labelFocusedColor: @selectedTextColor; -@checkboxActiveBackground: #FFFFFF; +/* Active */ +@checkboxActiveBackground: @white; @checkboxActiveBorderColor: @selectedBorderColor; -@checkboxActiveColor: @selectedTextColor; +@checkboxActiveCheckOpacity: 1; +@checkboxActiveCheckColor: @selectedTextColor; @labelActiveColor: @selectedTextColor; +/* Indeterminate */ +@checkboxIndeterminateBackground: @checkboxActiveBackground; +@checkboxIndeterminateBorderColor: @checkboxActiveBorderColor; +@checkboxIndeterminateCheckOpacity: 0.8; +@checkboxIndeterminateCheckColor: @checkboxActiveCheckColor; /* Disabled */ @disabledCheckboxOpacity: 0.5; @@ -69,18 +76,19 @@ /* Radio */ /* Uses px to avoid rounding issues with circles */ -@radioSize: 14px; -@radioCircleSize: 9px; +@radioSize: 15px; @radioTop: 1px; @radioLeft: 0px; @radioLabelDistance: @labelDistance; -@bulletScale: (6 / 14); /* 6px as unitless value from radio size */ +@bulletTop: 1px; +@bulletLeft: 0px; +@bulletScale: (7 / 15); /* 8px as unitless value from radio size */ @bulletColor: @textColor; @bulletRadius: @circularRadius; @radioActiveBackground: @white; -@radioActiveBulletColor: @checkboxActiveColor; +@radioActiveBulletColor: @checkboxActiveCheckColor; /* Slider & Toggle Handle */ @handleBackground: @white @subtleGradient;