Button: Update css based on pr comments

Author: arschmitz

tests/unit/checkboxradio/checkboxradio_common.js

@@ -3,7 +3,8 @@ TestHelpers.commonWidgetTests( "checkboxradio", {
 		disabled: null,
 		label: null,
 		icon: null,
-		// callbacks
+
+		// Callbacks
 		create: null
 	}
 });

tests/unit/checkboxradio/checkboxradio_core.js

@@ -52,38 +52,41 @@ test("radio groups", function() {
 	assert(":eq(1)", ":eq(0)", ":eq(0)");
 });
 
-asyncTest( "#6711 Checkbox/Radiobutton do not Show Focused State when using Keyboard Navigation", function() {
+asyncTest( "Checkbox/Radiobutton do not Show Focused State when using Keyboard Navigation", function() {
 	expect( 2 );
 	var check = $( "#check" ).checkboxradio(),
 		label = $( "label[for='check']" );
-	ok( !label.is( ".ui-state-focus" ) );
+	( !label.is( ".ui-state-focus" ) );
 	check.focus();
 	setTimeout(function() {
 		ok( label.is( ".ui-state-focus" ) );
 		start();
 	});
 });
+		ok( slider.hasClass( "ui-state-disabled" ), "disabling a slider should also disable the input " );
+
 // TODO: simulated click events don't behave like real click events in IE
 // remove this when simulate properly simulates this
 // see http://yuilibrary.com/projects/yui2/ticket/2528826 fore more info
 if ( !$.ui.ie || ( document.documentMode && document.documentMode > 8 ) ) {
 	asyncTest( "ensure checked and aria after single click on checkbox label button, see #5518", function() {
 		expect( 2 );
 
-		$("#check2").checkboxradio().change( function() {
-			var lbl = $( this ).checkboxradio("widget");
+		$( "#check2" ).checkboxradio().change( function() {
+			var label = $( this ).checkboxradio( "widget" );
 			ok( this.checked, "checked ok" );
+
 			// The following test is commented out for now because with new markup we are trying to avoid aria
 			//ok( lbl.attr("aria-pressed") === "true", "aria ok" );
-			ok( lbl.hasClass("ui-state-active"), "ui-state-active ok" );
+			ok( label.hasClass( "ui-state-active" ), "ui-state-active ok" );
 		});
 
-		// support: Opera
+		// Support: Opera
 		// Opera doesn't trigger a change event when this is done synchronously.
 		// This seems to be a side effect of another test, but until that can be
 		// tracked down, this delay will have to do.
 		setTimeout(function() {
-			$("#check2").checkboxradio("widget").simulate("click");
+			$( "#check2" ).checkboxradio( "widget" ).simulate( "click" );
 			start();
 		}, 1 );
 	});

themes/base/button.css

@@ -19,6 +19,7 @@
 	text-align: center;
 	overflow: visible; /* removes extra width in IE */
 }
+
 .ui-button,
 .ui-button:link,
 .ui-button:visited,
@@ -34,6 +35,10 @@
 	text-indent: -9999px;
 	white-space: nowrap;
 }
+.ui-button .ui-icon {
+	position: absolute;
+	display: block;
+}
 /* button elements seem to need a little more width */
 button.ui-button-icon-only {
 	width: 2.4em;

themes/base/checkboxradio.css

@@ -9,14 +9,14 @@
  * http://api.jqueryui.com/checkboxradio/#theming
  */
 
-.ui-checkbox{
-	display:none;
+.ui-checkbox {
+	display: none;
 }
-span.ui-icon-background{
+.ui-checkbox-label .ui-icon-background {
 	border-radius: .12em;
 	border: none;
 }
-.ui-radio-label .ui-icon.ui-icon-background{
+.ui-radio-label .ui-icon.ui-icon-background {
 	width: 16px;
 	height: 16px;
 	border-radius: 1em;
@@ -25,8 +25,8 @@ span.ui-icon-background{
 	background-color: rgba( 0, 0, 0, .3 );
 	opacity: .3;
 }
-label.ui-radio-label.ui-radio-checked .ui-icon,
-label.ui-radio-label.ui-radio-checked:hover .ui-icon{
+.ui-radio-label.ui-radio-checked .ui-icon,
+.ui-radio-label.ui-radio-checked:hover .ui-icon {
 	background-image: none;
 	background-color: #fff;
 	width: 8px;

ui/checkboxradio.js

@@ -93,7 +93,7 @@ $.widget( "ui.checkboxradio", {
 		this.label.addClass( baseClasses + " ui-" + this.type + "-label" );
 
 		if ( this.options.icon ) {
-			this.label.addClass( "ui-icon-begining" );
+			this.label.addClass( "ui-icon-beginning" );
 			this.icon = $( "<span>" );
 			if ( this.element.is( ":checked" ) && this.type === "checkbox" ){
 				this.icon.addClass( "ui-icon ui-icon-background ui-corner-all ui-icon-check" );
@@ -192,7 +192,7 @@ $.widget( "ui.checkboxradio", {
 	_setClasses: function() {
 		var checked = this.element.is( ":checked" );
 		if ( this.options.icon === true ){
-			this.label.addClass( "ui-icon-begining" );
+			this.label.addClass( "ui-icon-beginning" );
 			if ( this.icon === undefined ) {
 				this.icon = $( "<span>" );
 				this.label.prepend( this.icon );
@@ -203,7 +203,7 @@ $.widget( "ui.checkboxradio", {
 				this.icon.addClass( "ui-icon ui-icon-background ui-corner-all ui-icon-blank" );
 			}
 		} else if ( this.icon !== undefined ) {
-			this.label.removeClass( "ui-icon-begining" );
+			this.label.removeClass( "ui-icon-beginning" );
 			this.icon.remove();
 			delete this.icon;
 		}