Commit b757225c by Chris Rodriguez

Fixing remaining contrast issue

parent 7e1de6ef
// LMS -- modules -- calculator // LMS -- modules -- calculator
// ==================== // ====================
div.calc-main { .calc-main {
@extend %ui-print-excluded; @extend %ui-print-excluded;
bottom: -126px; bottom: -126px;
...@@ -29,7 +29,7 @@ div.calc-main { ...@@ -29,7 +29,7 @@ div.calc-main {
width: ($baseline*0.75); width: ($baseline*0.75);
&:hover, &:focus { &:hover, &:focus {
background-color: $gray-d1; background: url("../images/calc-icon.png") $gray-d1 no-repeat center;
} }
&.closed { &.closed {
...@@ -44,7 +44,7 @@ div.calc-main { ...@@ -44,7 +44,7 @@ div.calc-main {
} }
} }
div#calculator_wrapper { #calculator_wrapper {
clear: both; clear: both;
position: relative; position: relative;
top: -36px; top: -36px;
...@@ -72,7 +72,7 @@ div.calc-main { ...@@ -72,7 +72,7 @@ div.calc-main {
color: $white; color: $white;
} }
button#calculator_button { #calculator_button {
background: #111; background: #111;
border: 1px solid $black; border: 1px solid $black;
border-radius: 0; border-radius: 0;
...@@ -99,7 +99,7 @@ div.calc-main { ...@@ -99,7 +99,7 @@ div.calc-main {
} }
} }
input#calculator_output { #calculator_output {
background: #111; background: #111;
border: 0; border: 0;
box-shadow: none; box-shadow: none;
...@@ -114,14 +114,19 @@ div.calc-main { ...@@ -114,14 +114,19 @@ div.calc-main {
width: flex-grid(4); width: flex-grid(4);
} }
div.input-wrapper { .input-wrapper {
@extend .clearfix; @extend .clearfix;
float: left; float: left;
margin: 0; margin: 0;
position: relative; position: relative;
width: flex-grid(7.5); width: flex-grid(7.5);
input#calculator_input { .label-calc-input {
background: $black;
color: $white;
}
#calculator_input {
border: none; border: none;
box-shadow: none; box-shadow: none;
@include box-sizing(border-box); @include box-sizing(border-box);
...@@ -129,13 +134,15 @@ div.calc-main { ...@@ -129,13 +134,15 @@ div.calc-main {
padding: 10px; padding: 10px;
-webkit-appearance: none; -webkit-appearance: none;
width: 100%; width: 100%;
background: $black;
color: $white;
&:focus { &:focus {
border: none; border: none;
} }
} }
div.help-wrapper { .help-wrapper {
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
......
...@@ -11,7 +11,7 @@ from django.core.urlresolvers import reverse ...@@ -11,7 +11,7 @@ from django.core.urlresolvers import reverse
<div id="calculator_wrapper"> <div id="calculator_wrapper">
<form id="calculator"> <form id="calculator">
<div class="input-wrapper"> <div class="input-wrapper">
<label for="calculator_input" class="sr">${_('Calculator Input')}</label> <label for="calculator_input" class="label-calc-input sr">${_('Calculator Input')}</label>
<input type="text" id="calculator_input" title="${_('Calculator Input Field')}" /> <input type="text" id="calculator_input" title="${_('Calculator Input Field')}" />
<div class="help-wrapper"> <div class="help-wrapper">
...@@ -135,7 +135,7 @@ from django.core.urlresolvers import reverse ...@@ -135,7 +135,7 @@ from django.core.urlresolvers import reverse
</div> </div>
</div> </div>
<button id="calculator_button">=<span class="calc-button-label sr">${_('Calculate')}</span></button> <input type="submit" id="calculator_button" value="=" aria-label="${_('Calculate')}">
<label for="calculator_output" class="calc-output-label sr">${_('Calculator Output')}</label> <label for="calculator_output" class="calc-output-label sr">${_('Calculator Output')}</label>
<input type="text" id="calculator_output" readonly /> <input type="text" id="calculator_output" readonly />
</form> </form>
......
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