Skip to content

Commit dc6ed3f

Browse files
arschmitzarschmitz
committed
Checkboxradio: simplify css
1 parent 3496087 commit dc6ed3f

File tree

5 files changed

+27
-39
lines changed

5 files changed

+27
-39
lines changed

‎tests/unit/checkboxradio/checkboxradio_common.js

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,11 @@ TestHelpers.commonWidgetTests( "checkboxradio", {
55
label: null,
66
icon: true,
77
classes: {
8-
"ui-checkboxradio": null,
9-
"ui-checkboxradio-checkbox": null,
10-
"ui-checkboxradio-radio": null,
11-
"ui-checkboxradio-checkbox-label": "ui-corner-all",
12-
"ui-checkboxradio-radio-label": "ui-corner-all",
8+
"ui-checkboxradio": "",
9+
"ui-checkboxradio-label": "ui-corner-all",
10+
"ui-checkboxradio-radio-label": "",
1311
"ui-checkboxradio-icon": "ui-corner-all",
14-
"ui-checkboxradio-radio-checked": null,
15-
"ui-checkboxradio-checkbox-checked": null
12+
"ui-checkboxradio-checked": ""
1613
},
1714

1815
// Callbacks

‎tests/unit/checkboxradio/checkboxradio_core.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ test("Checkbox", function() {
1515
input.checkboxradio();
1616
strictEqual( input.attr( "class" ), "ui-helper-hidden-accessible ui-checkboxradio" );
1717
strictEqual( label.attr( "class" ), "ui-icon-beginning ui-button ui-widget" +
18-
" ui-checkboxradio-checkbox-label ui-corner-all" );
18+
" ui-checkboxradio-label ui-corner-all" );
1919
});
2020

2121
test("Radios", function() {

‎tests/unit/checkboxradio/checkboxradio_methods.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ module( "Checkboxradio: methods" );
2121
strictEqual( widget.find( ".ui-icon" ).length, 1, "Icon is recreated on refresh" );
2222
checkbox.prop( "checked", true );
2323
checkbox.checkboxradio( "refresh" );
24-
strictEqual( widget.hasClass( "ui-checkbox-checked" ), true,
24+
strictEqual( widget.hasClass( "ui-checkboxradio-checked" ), true,
2525
"State updated based on checked property" );
2626
});
2727

@@ -82,7 +82,7 @@ module( "Checkboxradio: methods" );
8282
strictEqual( widget.find( ".ui-icon" ).length, 1, "Icon is recreated on refresh" );
8383
radio.prop( "checked", true );
8484
radio.checkboxradio( "refresh" );
85-
strictEqual( widget.hasClass( "ui-radio-checked" ), true,
85+
strictEqual( widget.hasClass( "ui-checkboxradio-checked" ), true,
8686
"State updated based on checked property" );
8787
});
8888

‎themes/base/checkboxradio.css

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,11 @@
99
* http://api.jqueryui.com/checkboxradio/#theming
1010
*/
1111

12-
.ui-checkboxradio-checkbox {
13-
display: none;
14-
}
15-
.ui-checkboxradio-checkbox-label .ui-icon-background {
12+
.ui-checkboxradio-label .ui-icon-background {
1613
border-radius: .12em;
1714
border: none;
1815
}
19-
.ui-checkboxradio-radio-label .ui-icon.ui-icon-background {
16+
.ui-checkboxradio-radio-label .ui-icon-background {
2017
width: 16px;
2118
height: 16px;
2219
border-radius: 1em;
@@ -26,8 +23,8 @@
2623
background-color: rgba( 0, 0, 0, .3 );
2724
opacity: .3;
2825
}
29-
.ui-checkboxradio-radio-label.ui-radio-checked .ui-icon,
30-
.ui-checkboxradio-radio-label.ui-radio-checked:hover .ui-icon {
26+
.ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon,
27+
.ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon {
3128
background-image: none;
3229
background-color: #fff;
3330
width: 8px;

‎ui/checkboxradio.js

Lines changed: 16 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -59,14 +59,11 @@ $.widget( "ui.checkboxradio", {
5959
label: null,
6060
icon: true,
6161
classes: {
62-
"ui-checkboxradio": null,
63-
"ui-checkboxradio-checkbox": null,
64-
"ui-checkboxradio-radio": null,
65-
"ui-checkboxradio-checkbox-label": "ui-corner-all",
66-
"ui-checkboxradio-radio-label": "ui-corner-all",
62+
"ui-checkboxradio": "",
63+
"ui-checkboxradio-label": "ui-corner-all",
64+
"ui-checkboxradio-radio-label": "",
6765
"ui-checkboxradio-icon": "ui-corner-all",
68-
"ui-checkboxradio-radio-checked": null,
69-
"ui-checkboxradio-checkbox-checked": null
66+
"ui-checkboxradio-checked": ""
7067
}
7168
},
7269

@@ -177,10 +174,14 @@ $.widget( "ui.checkboxradio", {
177174
this.element.addClass( "ui-helper-hidden-accessible " +
178175
this._classes( "ui-checkboxradio" ) );
179176

180-
this.label.addClass( baseClasses + " " + this._classes( "ui-checkboxradio-" + this.type + "-label" ) );
177+
this.label.addClass( baseClasses + " " + this._classes( "ui-checkboxradio-label" ) );
178+
179+
if ( this.type === "radio" ) {
180+
this.label.addClass( "ui-checkboxradio-radio-label" );
181+
}
181182

182183
if ( checked ) {
183-
this.label.addClass( this._classes( "ui-checkboxradio-" + this.type + "-checked" ) +
184+
this.label.addClass( this._classes( "ui-checkboxradio-checked" ) +
184185
" ui-state-active" );
185186
}
186187
if ( this.options.label && this.options.label !== this.originalLabel ) {
@@ -196,7 +197,7 @@ $.widget( "ui.checkboxradio", {
196197

197198
_toggleClasses: function() {
198199
var checked = this.element.is( ":checked" );
199-
this.label.toggleClass( this._classes( "ui-checkboxradio-" + this.type + "-checked" ) +
200+
this.label.toggleClass( this._classes( "ui-checkboxradio-checked" ) +
200201
" ui-state-active", checked );
201202
if ( this.options.icon && this.type === "checkbox" ) {
202203
this.icon
@@ -209,12 +210,12 @@ $.widget( "ui.checkboxradio", {
209210
.map(function() {
210211
return $( this ).checkboxradio( "widget" )[ 0 ];
211212
})
212-
.removeClass( "ui-state-active " + this._classes( "ui-checkboxradio-radio-checked" ) );
213+
.removeClass( "ui-state-active " + this._classes( "ui-checkboxradio-checked" ) );
213214
}
214215
},
215216

216217
_destroy: function() {
217-
this.label.removeClass( this._classes( "ui-checkboxradio-radio-label ui-checkboxradio-checkbox-label" ) + " " +
218+
this.label.removeClass( this._classes( "ui-checkboxradio-radio-label ui-checkboxradio-label" ) + " " +
218219
baseClasses + " " + typeClasses );
219220
if ( this.icon ) {
220221
this.icon.remove();
@@ -228,17 +229,10 @@ $.widget( "ui.checkboxradio", {
228229
checkedType = parts[ 2 ] === this.type || parts[ 2 ] === undefined,
229230
checkedClass = parts[ 3 ] === "checked" || this.element.is( ":checked" );
230231
switch ( classKey ) {
231-
case "ui-checkboxradio-radio":
232-
case "ui-checkboxradio-checkbox":
233-
if ( !checkedType ) {
234-
return $();
235-
}
236-
break;
237232
case "ui-checkboxradio":
238233
case "ui-checkboxradio-radio-label":
239-
case "ui-checkboxradio-checkbox-label":
240-
case "ui-checkboxradio-radio-checked":
241-
case "ui-checkboxradio-checkbox-checked":
234+
case "ui-checkboxradio-label":
235+
case "ui-checkboxradio-checked":
242236
if ( checkedType && checkedClass ) {
243237
return this.label;
244238
}
@@ -296,7 +290,7 @@ $.widget( "ui.checkboxradio", {
296290
var checked = this.element.is( ":checked" ),
297291
isDisabled = this.element.is( ":disabled" );
298292
this._updateIcon( checked );
299-
this.label.toggleClass( "ui-state-active " + this._classes( "ui-" + this.type + "-checked" ), checked );
293+
this.label.toggleClass( "ui-state-active " + this._classes( "ui-checkboxradio-checked" ), checked );
300294
if ( this.options.label !== null ) {
301295
this.label.contents().not( this.element.add( this.icon ) ).remove();
302296
this.label.append( this.options.label );

0 commit comments

Comments
 (0)