Adding uniqueness to some elements

lms/static/sass/course/modules/_calculator.scss

@@ -68,9 +68,7 @@ div.calc-main {
       @include box-sizing(border-box);
       padding: lh();
 
-      label.sr {
-        // including the label here in case other .sr values are added
-        // we want to limit this 'white' only to the label
+      .calc-output-label {
         color: $white;
       }
 
@@ -95,9 +93,7 @@ div.calc-main {
           color: #333;
         }
 
-        span.sr {
-          // including the element here in case other .sr values are added
-          // we want to limit this 'white' only to the span
+        .calc-button-label {
           background: $black;
           color: $white;
         }
@@ -163,9 +159,7 @@ div.calc-main {
               border: none;
             }
 
-            span.sr {
-              // including the element here in case other .sr values are added
-              // we want to limit this 'white' only to the span
+            .calc-hint {
               background: $black;
               color: $white;
             }

lms/templates/calculator/toggle_calculator.html

@@ -17,7 +17,7 @@ from django.core.urlresolvers import reverse
         <div class="help-wrapper">
           <p class="sr" id="hint-instructions">${_('Use the arrow keys to navigate the tips or use the tab key to return to the calculator')}</p>
 
-          <button id="calculator_hint" aria-haspopup="true" aria-expanded="false" aria-controls="calculator_input_help" aria-describedby="hint-instructions"><span class="sr">${_("Hints")}</span></button>
+          <button id="calculator_hint" aria-haspopup="true" aria-expanded="false" aria-controls="calculator_input_help" aria-describedby="hint-instructions"><span class="calc-hint sr">${_("Hints")}</span></button>
 
           <ul id="calculator_input_help" class="help" aria-hidden="true">
             <li class="hint-item" id="hint-moreinfo">
@@ -135,8 +135,8 @@ from django.core.urlresolvers import reverse
         </div>
       </div>
 
-      <button id="calculator_button">=<span class="sr">${_('Calculate')}</span></button>
-      <label for="calculator_output" class="sr">${_('Calculator Output')}</label>
+      <button id="calculator_button">=<span class="calc-button-label sr">${_('Calculate')}</span></button>
+      <label for="calculator_output" class="calc-output-label sr">${_('Calculator Output')}</label>
       <input type="text" id="calculator_output" readonly />
     </form>
   </div>