Commit cb19cdd2 by Chris Rodriguez

AC-405 calculator image to icon

parent ce7d4f03
......@@ -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'
......
......@@ -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;
}
......
......@@ -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>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment