Skip to content

E
edx-platform
Commit 9d6bf9a8 by Kyle Fiedler Committed by Matthew Mongeau
Options

Added some fixes for the calculator

parent 8d747e44
Showing with 16 additions and 174 deletions
lms/static/sass/application.scss
......@@ -16,7 +16,6 @@
@import 'shared/course_filter';
@import 'shared/modal';
@import 'shared/activation_messages';
@import 'layout/calculator';
@import 'multicourse/home';
@import 'multicourse/dashboard';
......
lms/static/sass/course.scss
......@@ -20,6 +20,7 @@
@import 'course/courseware/courseware';
@import 'course/courseware/sidebar';
@import 'course/courseware/amplifier';
@import 'course/layout/calculator';
// course-specific courseware (all styles in these files should be gated by a
......
lms/static/sass/course/layout/_calculator.scss
li.calc-main {
div.calc-main {
bottom: -126px;
left: 0;
position: fixed;
......@@ -9,10 +9,6 @@ li.calc-main {
&.open {
bottom: -36px;
div#calculator_wrapper form div.input-wrapper div.help-wrapper dl {
display: block;
}
}
a.calc {
......@@ -27,7 +23,7 @@ li.calc-main {
margin-right: 10px;
padding: 8px 12px;
position: relative;
top: -36px;
top: -45px;
width: 16px;
&:hover {
......@@ -36,6 +32,7 @@ li.calc-main {
&.closed {
background-image: url("../images/close-calc-icon.png");
top: -36px;
}
}
......@@ -61,6 +58,7 @@ li.calc-main {
float: left;
font-size: 30px;
font-weight: bold;
height: 35px;
margin: 0 (flex-gutter() / 2);
padding: 0;
text-shadow: none;
......@@ -73,7 +71,7 @@ li.calc-main {
}
input#calculator_output {
background: #222;
background: #111;
border: 0;
@include box-shadow(none);
@include box-sizing(border-box);
......@@ -111,14 +109,14 @@ li.calc-main {
div.help-wrapper {
position: absolute;
right: 8px;
top: 15px;
right: 0;
top: 0;
a {
background: url("../images/info-icon.png") center center no-repeat;
height: 17px;
height: 35px;
@include hide-text;
width: 17px;
width: 35px;
}
dl {
......@@ -127,28 +125,30 @@ li.calc-main {
@include box-shadow(0 0 3px #999);
color: #333;
display: none;
line-height: lh();
opacity: 0;
padding: 10px;
position: absolute;
right: -40px;
top: -110px;
top: -122px;
@include transition();
width: 500px;
width: 600px;
&.shown {
display: block;
opacity: 1;
top: -115px;
}
dt {
clear: both;
float: left;
font-weight: bold;
padding-right: lh(.5);
padding-right: 12px;
}
dd {
float: left;
margin-left: 0;
}
}
}
......
lms/static/sass/layout/_calculator.scss deleted 100644 → 0
div.calc-main {
bottom: -126px;
left: 0;
position: fixed;
@include transition(bottom);
-webkit-appearance: none;
width: 100%;
z-index: 99;
&.open {
bottom: -36px;
div#calculator_wrapper form div.input-wrapper div.help-wrapper dl {
display: block;
}
}
a.calc {
background: url("../images/calc-icon.png") rgba(#111, .9) no-repeat center;
border-bottom: 0;
@include border-radius(3px 3px 0 0);
color: #fff;
float: right;
height: 20px;
@include hide-text;
@include inline-block;
margin-right: 10px;
padding: 8px 12px;
position: relative;
top: -36px;
width: 16px;
&:hover {
opacity: .8;
}
&.closed {
background-image: url("../images/close-calc-icon.png");
}
}
div#calculator_wrapper {
background: rgba(#111, .9);
clear: both;
max-height: 90px;
position: relative;
top: -36px;
form {
@extend .clearfix;
@include box-sizing(border-box);
padding: lh();
input#calculator_button {
background: #111;
border: 1px solid #000;
@include border-radius(0);
@include box-shadow(none);
@include box-sizing(border-box);
color: #fff;
float: left;
font-size: 30px;
font-weight: bold;
margin: 0 (flex-gutter() / 2);
padding: 0;
text-shadow: none;
-webkit-appearance: none;
width: flex-grid(.5) + flex-gutter();
&:hover {
color: #333;
}
}
input#calculator_output {
background: #222;
border: 0;
@include box-shadow(none);
@include box-sizing(border-box);
color: #fff;
float: left;
font-size: 16px;
font-weight: bold;
margin: 1px 0 0;
padding: 10px;
-webkit-appearance: none;
width: flex-grid(4);
}
div.input-wrapper {
@extend .clearfix;
float: left;
margin: 0;
position: relative;
width: flex-grid(7.5);
input#calculator_input {
border: none;
@include box-shadow(none);
@include box-sizing(border-box);
font-size: 16px;
padding: 10px;
-webkit-appearance: none;
width: 100%;
&:focus {
outline: none;
border: none;
}
}
div.help-wrapper {
position: absolute;
right: 8px;
top: 15px;
a {
background: url("../images/info-icon.png") center center no-repeat;
height: 17px;
@include hide-text;
width: 17px;
}
dl {
background: #fff;
@include border-radius(3px);
@include box-shadow(0 0 3px #999);
color: #333;
display: none;
opacity: 0;
padding: 10px;
position: absolute;
right: -40px;
top: -110px;
@include transition();
width: 500px;
&.shown {
opacity: 1;
top: -115px;
}
dt {
clear: both;
float: left;
font-weight: bold;
padding-right: lh(.5);
}
dd {
float: left;
}
}
}
}
}
}
}
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