Merge pull request #12371 from edx/clrux/ac-405

AC-405 calculator image to icon

lms/static/coffee/src/calculator.coffee

@@ -51,6 +51,7 @@ class @Calculator
     $calcWrapper = $('#calculator_wrapper')
     text = gettext('Open Calculator')
     isExpanded = false
+    icon = 'fa-calculator'
 
     $('div.calc-main').toggleClass 'open'
     if $calc.hasClass('closed')
@@ -59,6 +60,7 @@ class @Calculator
         .attr 'tabindex', -1
     else
       text = gettext('Close Calculator')
+      icon = 'fa-close'
       isExpanded = true
 
       $calcWrapper
@@ -74,6 +76,12 @@ class @Calculator
         'title': text
         'aria-expanded': isExpanded
       .find('.utility-control-label').text text
+      
+    $calc
+      .find('.icon')
+      .removeClass('fa-calculator')
+      .removeClass('fa-close')
+      .addClass(icon)
 
     $calc.toggleClass 'closed'
 

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

@@ -17,23 +17,20 @@
 
   .calc {
     @include transition(background-color $tmg-f2 ease-in-out 0s);
-    background: url("#{$static-path}/images/calc-icon.png") $black-t1 no-repeat center;
-    border-bottom: 0;
-    color: $white;
-    float: right;
-    height: $baseline;
-    margin-right: ($baseline*0.75);
-    padding: $baseline;
+    @include float(right);
+    @include right($baseline*.75);
     position: relative;
     top: -42px;
-    width: ($baseline*0.75);
+    border-bottom: 0;
+    padding: ($baseline/1.5);
+    background: $black-t1;
+    color: $white;
 
     &:hover, &:focus {
-      background: url("#{$static-path}/images/calc-icon.png") $gray-d1 no-repeat center;
+      background: $gray-d1;
     }
 
     &.closed {
-      background-image: url("#{$static-path}/images/close-calc-icon.png");
       background-color: $black;
       top: -36px;
     }

lms/templates/calculator/toggle_calculator.html

@@ -5,6 +5,7 @@ from django.core.urlresolvers import reverse
 
 <div class="calc-main">
   <button title="${_('Open Calculator')}" aria-controls="calculator_wrapper" aria-expanded="false" class="calc utility-control-button">
+    <span class="icon fa fa-calculator" aria-hidden="true"></span>
     <span class="utility-control-label sr">${_("Open Calculator")}</span>
   </button>