<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Oswald|Montserrat|Droid+Sans:400,700|Audiowide" />
<div class="container">
<div class="calculator">
<div class="half-column columns calculator-panel">
<h2>An Absolutetly Exciting Widget</h2>
<form action="">
<div class="form-group">
<label class="magic-label" for="">Product Variation Type: </label>
<select name="" id="">
<option value="">Choose a variation</option>
<option value="">Some option available</option>
<option value="">Another option available</option>
</select>
</div>
<div class="form-group">
<label class="magic-label" for="">Size: </label>
<select name="" id="">
<option value="">Choose a size</option>
<option value="">Some option available</option>
<option value="">Another option available</option>
</select>
</div>
<div class="form-group quantity">
<input type="text" class="special-input" />
<label for="" class="expanding-label">Quantity</label>
</div>
<div class="special-buy-bar">
<input type="submit" value="buy now" class="submit-button"/>
<div class="livePrice">$ 45.00</div>
</div>
</form>
</div>
<div class="half-column columns last poster--style">
<img src="http://bootstrapbay.com/blog/wp-content/uploads/2014/05/unslpash-desert-road_uvsq5s.png" />
<aside class="floater">
<h4>The Kit Includes: </h4>
<ul>
<li>An exciting deep detail about the product I am currently selling.</li>
<li>(Top webbing strap is 2-inches wide for weight bearing)</li>
<li>Hooks for attachment spaced evenly</li>
<li>Four 3ft Adjustable straps on each side</li>
<li>Mounting Brackets</li>
<li>All Necessary hardware included</li>
</ul>
<div class="wesc">WESC</div>
</aside>
</div>
</div>
</div>
@import "compass";
$btngreen: #00c853;
$btnblue: #4285F4;
$btngreenborder: #007c33;
$btnblueborder: #0d5bdd;
$red: #E2361F;
//names are going to have to change due to foundation
//still need ot style the inputs
body{ font-family: 'Droid Sans'; }
h1,h2,h3,h4,h5,h6{
font-family: 'Oswald';
}
.container{
max-width :1170px; margin: 0 auto;
}
.calculator{
background: #ddd;
overflow:auto;
width: 100%;
margin-top: 1em;
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
.poster--style{
position: relative;
padding-bottom:50px;
img{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.wesc{
width: 42px;
height: 42px;
position: absolute;
bottom: 0;
right: 25px;
font-family: 'Montserrat';
font-style: italic;
color: $btnblue;
}
.floater{
h4{
margin:0;
margin-bottom: 5px;
color: $btnblueborder;
font-size: 1.4em;
background: rgba(245,245,245, .7);
padding-left: 1em;
padding-top:.3em;
padding-bottom:.3em;
}
ul{
padding: 0 1em 1em 1.2em;
margin:0;
li{
margin-left: 1em;
line-height: 1.6em;
font-size: 1em;
color: #555;
list-style-type: square;
}
}
position: absolute;
bottom: 0;
left:0;
right:0;
width: 100%;
background: rgba(255,255,255,0.8);
border-top: 2px solid $btnblue;
}
}
.columns{
float:left;
position:relative;
min-height: 305px;
h2{
margin: 0;
padding: .4em .4em .4em 1em;
background: $red;
color:white;
font-size: 2em;
}
form{
select{
width: 100%;
border: none;
}
}
}
.calculator-panel{
background: #f8f8f8;
padding-bottom:50px;
}
.half-column{
width: 50%;
height: 100%;
overflow:hidden;
top: 0;
left:0;
}
.form-group label.magic-label{
display:none;
}
.form-group, input{
font-family:'Droid Sans', sans-serif;
font-size: 20pt;
line-height:2.6em;
height:2.6em;
margin:0;
padding:0;
}
.form-group{
&.quantity{
margin-top: -10px;
@include transition(all 200ms ease-in);
&.form-group-float{
margin-top: 0;
}
}
}
.input:focus+label{
color: $btnblue;
}
.form-group .input[value]+label{
color: $red;
}
.form-group{
position:relative;
width: 90%;
float: left;
margin-left: 1em;
}
.form-group input{
font-size: .9em;
border:none;
padding-top:.4em;
padding-bottom:0;
outline:none;
position:absolute;
top: 0;
left: 0;
display:block;
background:transparent;
z-index:2;
border-bottom: 1px solid $btnblue;
text-indent:.1em;
width: 100%;
margin-top:0;
&:focus{
box-shadow: none;
}
}
.form-group label{
display:block;
position:absolute;
top:12px;
left:.1em;
font-size:.9em;
z-index:1;
@include transform-origin(0,0.0em);
@include transition(transform 160ms, color 200ms);
@include transform(scale(1,1) rotateY(0));
color:#999;
}
.form-group-float label{
@include transform(scale(0.58,0.58) rotateY(0));
color: $btnblue;
top: -9px
}
.form-group-float input{
line-height:3.4em;
padding-bottom:0;
}
select{
height: inherit;
background: #fff;
color: #999;
padding: 0;
margin: 0;
height: 1.8em;
font-size: .9em;
margin-top: .55em;
margin-left: -5px;
}
}
.special-buy-bar{
background: lighten($btngreenborder, 10%);
width: 100%;
overflow:hidden;
position:absolute;
bottom:0;
left: 0;
input{
font-family: 'Oswald';
font-size: 1.3em;
float:left;
background: $btngreen;
display:block;
width: 80%;
text-align:left;
color:white;
padding: .6em 0 0 0;
text-transform: uppercase;
border:none;
transition: all .4s ease-in;
&:hover{
background: $btngreenborder;
}
}
.submit-button{
padding: 0em 0;
text-align: center;
}
.livePrice{
height: 100%;
float:right;
color:white;
font-family: 'Open Sans';
font-weight: 400;
font-size: 1.5em;
padding: .4em 1em;
text-align: center;
position:absolute;
right: 0;
border-left: 2px solid lighten($btngreenborder,20%);
background: lighten($btngreenborder, 18%);
}
}
View Compiled
(function() {
var input = document.querySelector('.special-input');
var parentNode = input.parentElement;
input.onfocus = function() {
parentNode.setAttribute('class', 'form-group-float form-group quantity');
};
input.onblur = function() {
if (input.value == "") {
parentNode.setAttribute('class', 'form-group quantity');
}
};
//check the value of the input and report back
//if it is empty then make the label big again
//if it is full stay small
//parent.removeClass('form-group-float');
})();
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.