start using .badge and a few other gotchas

dist/android-theme.css

@@ -210,7 +210,7 @@ textarea,
   opacity: .6;
 }
 
-[class*="badge"].badge-inverted {
+.badge.badge-inverted {
   color: white;
 }
 

dist/ios-theme.css

@@ -216,7 +216,7 @@ textarea,
   opacity: .6;
 }
 
-[class*="badge"].badge-inverted {
+.badge.badge-inverted {
   color: #929292;
 }
 

dist/ratchet.css

@@ -327,7 +327,7 @@ strong {
   white-space: nowrap;
 }
 
-> a:not([class*="button"]) {
+> a:not(".btn") {
   display: block;
   width: 100%;
   height: 100%;
@@ -378,7 +378,7 @@ strong {
   -webkit-box-shadow: none;
   box-shadow: none;
 }
-.popover .bar-nav .title + [class*="button"]:last-child {
+.popover .bar-nav .title + .btn:last-child {
   right: 15px;
 }
 
@@ -405,14 +405,14 @@ strong {
 .table-view .table-view-cell:last-child {
   border-bottom: 0;
 }
-.table-view .table-view-cell > a:not(.btn) {
+.table-view .table-view-cell > a:not(".btn") {
   position: relative;
   display: block;
   padding: inherit;
   margin: -11px -60px -12px -15px;
   color: inherit;
 }
-.table-view .table-view-cell > a:not(.btn):active {
+.table-view .table-view-cell > a:not(".btn"):active {
   background-color: #eee;
 }
 .table-view .table-view-cell p {
@@ -439,7 +439,7 @@ strong {
 }
 .table-view .chevron,
 .table-view .btn,
-.table-view [class*="badge"],
+.table-view .badge,
 .table-view .toggle {
   position: absolute;
   top: 50%;
@@ -448,10 +448,10 @@ strong {
 .table-view .chevron {
   margin-top: -10px;
 }
-.table-view [class*="badge"] {
+.table-view .badge {
   margin-top: -9px;
 }
-.table-view .chevron + [class*="badge"] {
+.table-view .chevron + .badge {
   right: 30px;
 }
 .table-view .btn {
@@ -466,11 +466,11 @@ strong {
   padding-left: 59px;
   background-position-x: 59px;
 }
-.table-view-indented .table-view-cell > a:not(.btn) {
+.table-view-indented .table-view-cell > a:not(".btn") {
   margin-left: -59px;
 }
 .table-view-indented .table-view-cell > .pull-left,
-.table-view-indented .table-view-cell > a:not(.btn) .pull-left {
+.table-view-indented .table-view-cell > a:not(".btn") .pull-left {
   position: absolute;
   left: 15px;
   z-index: 1;
@@ -770,7 +770,7 @@ input[type="button"] {
   transform: rotate(-45deg);
 }
 
-[class*="badge"] {
+.badge {
   display: inline-block;
   padding: 2px 9px;
   font-size: 13px;
@@ -779,7 +779,7 @@ input[type="button"] {
   background-color: rgba(0, 0, 0, 0.15);
   border-radius: 100px;
 }
-[class*="badge"].badge-inverted {
+.badge.badge-inverted {
   padding: 0;
   background-color: transparent;
 }
@@ -808,7 +808,7 @@ input[type="button"] {
   color: #d9534f;
 }
 
-.btn [class*="badge"] {
+.btn .badge {
   font-size: 12px;
   padding-top: 2px;
   padding-bottom: 2px;
@@ -827,7 +827,7 @@ input[type="button"] {
   color: #fff;
 }
 
-.btn-block [class*="badge"] {
+.btn-block .badge {
   position: absolute;
   right: 0;
   margin-right: 10px;

docs-assets/css/docs.css

@@ -404,7 +404,7 @@ body {
 #badgesInDevice {
   text-align: center;
 }
-#badgesInDevice [class*="badge"] {
+#badgesInDevice .badge {
   margin-top: 10px;
 }
 
@@ -987,7 +987,7 @@ hr {
   color: #007aff;
   opacity: .6;
 }
-.platform-ios [class*="badge"].badge-inverted {
+.platform-ios .badge.badge-inverted {
   color: #929292;
 }
 .platform-ios .badge-primary {
@@ -1348,7 +1348,7 @@ hr {
   color: #33b5e5;
   opacity: .6;
 }
-.platform-android [class*="badge"].badge-inverted {
+.platform-android .badge.badge-inverted {
   color: white;
 }
 .platform-android .badge-primary {

lib/sass/badges.scss

@@ -2,7 +2,7 @@
 // Badges
 // --------------------------------------------------
 
-[class*="badge"] {
+.badge {
   display: inline-block;
   padding: 2px 9px;
   font-size: 13px;
@@ -56,7 +56,7 @@
 // --------------------------------------------------
 
 // Generic styles for all badges within default buttons
-.btn [class*="badge"] {
+.btn .badge {
   font-size: 12px;
   padding-top: 2px;
   padding-bottom: 2px;
@@ -78,7 +78,7 @@
 // Position badges within block level buttons
 // Note: These are absolutely positioned so that text of button isn't "pushed" by badge and always
 // stays at true center of button
-.btn-block [class*="badge"] {
+.btn-block .badge {
   position: absolute;
   right: 0;
   margin-right: 10px;

lib/sass/bars.scss

@@ -62,7 +62,7 @@
   white-space: nowrap;
 }
 
-> a:not([class*="button"]) {
+> a:not(".btn") {
   display: block;
   width: 100%;
   height: 100%;
@@ -131,7 +131,7 @@
   border-radius: 12px 12px 0 0;
   @include box-shadow(none);
 
-  .title + [class*="button"]:last-child {
+  .title + .btn:last-child {
     right: 15px;
   }
 }

lib/sass/docs.scss

@@ -425,7 +425,7 @@ body {
 #badgesInDevice {
   text-align: center;
 
-  [class*="badge"] {
+  .badge {
     margin-top: 10px;
   }
 }

lib/sass/table-views.scss

@@ -19,7 +19,7 @@
       border-bottom: 0;
     }
     // If it's a table view of links, make sure the child <a> takes up full table view item tap area (want to avoid selecting child buttons though)
-    > a:not(.btn) {
+    > a:not(".btn") {
       position: relative;
       display: block;
       padding: inherit;
@@ -68,7 +68,7 @@
 
   .chevron,
   .btn,
-  [class*="badge"],
+  .badge,
   .toggle {
     position: absolute;
     top: 50%;
@@ -79,12 +79,12 @@
   .chevron {
     margin-top: -10px; // Half height of chevron
   }
-  [class*="badge"] {
+  .badge {
     margin-top: -9px; // Aligned just right
   }
 
   // Push badge over if there's a sibling chevron
-  .chevron + [class*="badge"] {
+  .chevron + .badge {
     right: 30px;
   }
 
@@ -106,12 +106,12 @@
   padding-left: 59px;
   background-position-x: 59px; // Make room for your left aligned media/icons.
 
-  > a:not(.btn) {
+  > a:not(".btn") {
     margin-left: -59px;
   }
 
   > .pull-left,
-  > a:not(.btn) .pull-left {
+  > a:not(".btn") .pull-left {
     position: absolute;
     left: 15px;
     z-index: 1;

lib/sass/theme-android.scss

@@ -301,7 +301,7 @@ textarea,
 // Badges
 // --------------------------------------------------
 
-[class*="badge"] {
+.badge {
   &.badge-inverted {
     color: $default-color;
   }

lib/sass/theme-ios.scss

@@ -300,7 +300,7 @@ textarea,
 // Badges
 // --------------------------------------------------
 
-[class*="badge"] {
+.badge {
   &.badge-inverted {
     color: $default-color;
   }