Added some fixes for the calculator
This commit is contained in:
committed by
Matthew Mongeau
parent
8d747e4423
commit
9d6bf9a8fd
@@ -16,7 +16,6 @@
|
||||
@import 'shared/course_filter';
|
||||
@import 'shared/modal';
|
||||
@import 'shared/activation_messages';
|
||||
@import 'layout/calculator';
|
||||
|
||||
@import 'multicourse/home';
|
||||
@import 'multicourse/dashboard';
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,158 +0,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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user