172 lines
3.5 KiB
SCSS
172 lines
3.5 KiB
SCSS
div.calc-main {
|
|
bottom: -126px;
|
|
left: 0;
|
|
position: fixed;
|
|
@include transition(bottom 0.75s linear 0s);
|
|
-webkit-appearance: none;
|
|
width: 100%;
|
|
z-index: 99;
|
|
|
|
&.open {
|
|
bottom: -36px;
|
|
}
|
|
|
|
a.calc {
|
|
background: url("../images/calc-icon.png") rgba(#111, .9) no-repeat center;
|
|
border-bottom: 0;
|
|
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: -45px;
|
|
width: 16px;
|
|
|
|
&:hover, &:focus {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
&.closed {
|
|
background-image: url("../images/close-calc-icon.png");
|
|
top: -36px;
|
|
}
|
|
}
|
|
|
|
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;
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
@include box-sizing(border-box);
|
|
color: #fff;
|
|
float: left;
|
|
font-size: 30px;
|
|
font-weight: bold;
|
|
height: 35px;
|
|
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: #111;
|
|
border: 0;
|
|
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;
|
|
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: 0;
|
|
top: 0;
|
|
|
|
a {
|
|
background: url("../images/info-icon.png") center center no-repeat;
|
|
height: 35px;
|
|
@include hide-text;
|
|
width: 35px;
|
|
display: block;
|
|
}
|
|
|
|
.help {
|
|
background: #fff;
|
|
border-radius: 3px;
|
|
box-shadow: 0 0 3px #999;
|
|
color: #333;
|
|
padding: 10px;
|
|
position: absolute;
|
|
right: -40px;
|
|
bottom: 57px;
|
|
@include transition(none);
|
|
width: 600px;
|
|
overflow: hidden;
|
|
pointer-events: none;
|
|
display: none;
|
|
|
|
&.shown {
|
|
display: block;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.bold {
|
|
font-weight: bold;
|
|
}
|
|
|
|
p, p+p {
|
|
margin: 0;
|
|
}
|
|
|
|
table {
|
|
margin: 10px 0;
|
|
|
|
td, th {
|
|
padding: 2px 5px;
|
|
}
|
|
}
|
|
|
|
.calc-postfixes {
|
|
margin: 10px auto;
|
|
|
|
td, th {
|
|
padding: 2px 15px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|