Skip to content
Permalink
Browse files

Floated savings, rounded edges

  • Loading branch information
Valadian
Valadian committed Jan 19, 2016
1 parent 9bd9386 commit 4cd14103703d4dc9b8b3a139b2e3582c8ed30d30
Showing with 65 additions and 11 deletions.
  1. +41 −1 Content/site.css
  2. +14 −2 Scripts/site.js
  3. +10 −8 index.html
@@ -11,6 +11,14 @@
body {
padding-top: 107px;
}
.floating {
position: fixed;
top: 107px;
}

.savings-spaceholder{
height: 70px;
}
}
@media (max-width: 992px){
.title img{
@@ -20,6 +28,14 @@
body {
padding-top: 80px;
}
.floating {
position: fixed;
top: 80px;
}
.savings-spaceholder{
height: 70px;
bac
}
}
@media (max-width: 768px){
.title img{
@@ -31,6 +47,14 @@
body {
padding-top: 55px;
}
.floating {
position: fixed;
top: 55px;
}

.savings-spaceholder{
height: 150px;
}
}

.slider-selection {
@@ -99,7 +123,23 @@ div.rounded {
.savings{
padding-bottom: 20px;
}
.savings-placeholder, .savings-container{
z-index:9999;
}
.savings>div{
font-size: 250%;
font-size: 150%;
text-align: center;
}

.savings-top{
border-radius: 20px 20px 0px 0px;
-moz-border-radius: 20px 20px 0px 0px;
-webkit-border-radius: 20px 20px 0px 0px;
border: 0px solid #000000;
}
.savings-bottom{
border-radius: 0px 0px 20px 20px;
-moz-border-radius: 0px 0px 20px 20px;
-webkit-border-radius: 0px 0px 20px 20px;
border: 0px solid #000000;
}
@@ -31,6 +31,18 @@ $(function(){
digits: true,
min: 0
});

$(window).scroll(function(){
if($(window).scrollTop() > $('.savings-spaceholder').offset().top - $('.navbar').height() - 5){
$('.savings-container').addClass("floating");
$('.savings-container').css(
{ 'width':$('.savings-spaceholder').width()+30})
} else {
$('.savings-container').removeClass("floating");
$('.savings-container').css(
{ 'width':''})
}
})

$('#deductiblePercentage').slider({
formatter: function(value) {
@@ -279,9 +291,9 @@ $(function(){
},self);
self.employerSavingsText = ko.pureComputed(function(){
if(self.employerSavings()>0){
return "Your Employer Saves: "
return "Employer Saves: "
}
return "Your Employer Loses: "
return "Employer Loses: "
},self);

self.employeeSavingsClass = ko.pureComputed(function(){
@@ -74,14 +74,16 @@
</div>
</div>
<br>
<div class="row">
<div class="col-md-6 savings">
<div data-bind="text: employeeSavingsText(), css: { 'bg-success': employeeSavings()>=0, 'bg-danger': employeeSavings()<0 }"></div>
<div data-bind="text: employeeSavingsFormatted(), css: { 'bg-success': employeeSavings()>=0, 'bg-danger': employeeSavings()<0 }"></div>
</div>
<div class="col-md-6 savings">
<div data-bind="text: employerSavingsText(), css: { 'bg-success': employerSavings()>=0, 'bg-danger': employerSavings()<0 }"></div>
<div data-bind="text: employerSavingsFormatted(), css: { 'bg-success': employerSavings()>=0, 'bg-danger': employerSavings()<0 }"></div>
<div class="row savings-spaceholder">
<div class="row savings-container">
<div class="col-sm-6 savings ">
<div class="savings-top" data-bind="text: employeeSavingsText(), css: { 'bg-success': employeeSavings()>=0, 'bg-danger': employeeSavings()<0 }"></div>
<div class="savings-bottom" data-bind="text: employeeSavingsFormatted(), css: { 'bg-success': employeeSavings()>=0, 'bg-danger': employeeSavings()<0 }"></div>
</div>
<div class="col-sm-6 savings">
<div class="savings-top" data-bind="text: employerSavingsText(), css: { 'bg-success': employerSavings()>=0, 'bg-danger': employerSavings()<0 }"></div>
<div class="savings-bottom" data-bind="text: employerSavingsFormatted(), css: { 'bg-success': employerSavings()>=0, 'bg-danger': employerSavings()<0 }"></div>
</div>
</div>
</div>
<div class="row">

0 comments on commit 4cd1410

Please sign in to comment.
You can’t perform that action at this time.