Icons: Use span instead of pseudo element

Fixes gh-7664
jquery-archive · Nov 18, 2014 · 7ba0950 · 7ba0950
1 parent d6a7ccb
commit 7ba0950
Show file tree

Hide file tree

Showing 120 changed files with 1,098 additions and 1,108 deletions.
diff --git a/css/structure/jquery.mobile.core.css b/css/structure/jquery.mobile.core.css
@@ -300,51 +300,51 @@ div.ui-mobile-viewport {
 	padding-left: .3125em;
 	padding-right: .3125em;
 }
-.ui-button-icon-left:after,
-.ui-button-icon-right:after,
-.ui-button-icon-top:after,
-.ui-button-icon-bottom:after,
-.ui-button-icon-notext:after {
-	content: "";
+.ui-icon {
 	position: absolute;
-	display: block;
+	display: inline-block;
 	width: 22px;
 	height: 22px;
+	background-position: center;
+	background-repeat: no-repeat;
+	text-indent: 100%;
+	white-space: nowrap;
+	overflow: hidden;
 }
-.ui-button-icon-notext:after,
-.ui-button-icon-left:after,
-.ui-button-icon-right:after {
+.ui-icon-notext .ui-icon,
+.ui-button-icon-left .ui-icon,
+.ui-button-icon-right .ui-icon {
 	top: 50%;
 	margin-top: -11px;
 }
-.ui-button-icon-left:after {
+.ui-button-icon-left .ui-icon {
 	left: .5625em;
 }
-.ui-button-icon-right:after {
+.ui-button-icon-right .ui-icon {
 	right: .5625em;
 }
-.ui-mini.ui-button-icon-left:after,
-.ui-mini .ui-button-icon-left:after,
-.ui-header .ui-button-icon-left:after,
-.ui-footer .ui-button-icon-left:after {
+.ui-mini.ui-button-icon-left .ui-icon,
+.ui-mini .ui-button-icon-left .ui-icon,
+.ui-header .ui-button-icon-left .ui-icon,
+.ui-footer .ui-button-icon-left .ui-icon {
 	left: .37em;
 }
-.ui-mini.ui-button-icon-right:after,
-.ui-mini .ui-button-icon-right:after,
-.ui-header .ui-button-icon-right:after,
-.ui-footer .ui-button-icon-right:after {
+.ui-mini.ui-button-icon-right .ui-icon,
+.ui-mini .ui-button-icon-right .ui-icon,
+.ui-header .ui-button-icon-right .ui-icon,
+.ui-footer .ui-button-icon-right .ui-icon {
 	right: .37em;
 }
-.ui-button-icon-notext:after,
-.ui-button-icon-top:after,
-.ui-button-icon-bottom:after {
+.ui-button-icon-notext .ui-icon,
+.ui-button-icon-top .ui-icon,
+.ui-button-icon-bottom .ui-icon {
 	left: 50%;
 	margin-left: -11px;
 }
-.ui-button-icon-top:after {
+.ui-button-icon-top .ui-icon {
 	top: .5625em;
 }
-.ui-button-icon-bottom:after {
+.ui-button-icon-bottom .ui-icon {
 	top: auto;
 	bottom: .5625em;
 }

diff --git a/css/structure/jquery.mobile.forms.checkboxradio.css b/css/structure/jquery.mobile.forms.checkboxradio.css
@@ -20,9 +20,8 @@
 .ui-radio .ui-button-icon-bottom {
 	text-align: center;
 }
-.ui-controlgroup-horizontal .ui-checkbox .ui-button:after,
-.ui-controlgroup-horizontal .ui-radio .ui-button:after {
-	content: none;
+.ui-controlgroup-horizontal .ui-checkbox .ui-button .ui-icon,
+.ui-controlgroup-horizontal .ui-radio .ui-button .ui-icon {
 	display: none;
 }
 /* Native input positioning */

diff --git a/css/structure/jquery.mobile.forms.textinput.css b/css/structure/jquery.mobile.forms.textinput.css
@@ -70,12 +70,11 @@ textarea.ui-mini {
 .ui-input-search input {
 	padding-left: 1.75em;
 }
-.ui-input-search:after {
+.ui-input-search .ui-icon {
 	position: absolute;
 	left: .3125em;
 	top: 50%;
 	margin-top: -7px;
-	content: "";
 	background-position: center center;
 	background-repeat: no-repeat;
 	width: 14px;

diff --git a/css/themes/default/jquery.mobile.icons.css b/css/themes/default/jquery.mobile.icons.css