Updates to Weight Inputs

Added styling to weight inputs and button to match invision protoype. Looks like removing the skeleton css breaks the layout. Will need to fix after all styling is completed.
This commit is contained in:
2018-10-09 13:06:38 -04:00
parent bd088e31d7
commit 32210e00b7
3 changed files with 45 additions and 5 deletions

View File

@@ -165,13 +165,53 @@ input.input-weightsneeded{
.b-calulatorinputs__inputcontainer{
text-align: center;
}
.b-calulatorinputs__infoentry label{
text-align: left;
}
label {
font-family: Roboto;
font-size: 10px;
font-weight: 300;
letter-spacing: 1.5px;
line-height: 14px;
}
.input-weight {
height: 33px;
width: 196px;
border-radius: 4px;
background-color: #D8D8D8;
color: #48484A;
font-family: "Zilla Slab";
font-size: 14px;
font-style: italic;
font-weight: 500;
letter-spacing: 0.75px;
line-height: 20px;
margin-right: 5px;
}
.input-calculate {
box-sizing: border-box;
height: 38px;
width: 88px;
border: 2px solid #FF6600;
border-radius: 4px;
background-color: #CCFF00;
box-shadow: 0 3px 6px 0 rgba(0,0,0,0.23), 0 3px 6px 0 rgba(0,0,0,0.16);
color: #5A5A5C;
font-family: Roboto;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.75px;
line-height: 20px;
text-align: center;
}
}
/*
.b-container {

View File

@@ -165,7 +165,7 @@ a:hover {
/* Buttons
*/
.button,
/*.button,
button,
input[type="submit"],
input[type="reset"],
@@ -221,7 +221,7 @@ input[type="button"].button-primary:focus {
color: #FFF;
background-color: #1EAEDB;
border-color: #1EAEDB; }
*/
/* Forms
*/

View File

@@ -81,7 +81,7 @@
<div class="b-calulatorinputs__input">
<label for="Weight">WEIGHT</label>
<input type="text" class="b-infoentry__input input-element input-weight" name="Weight" placeholder="What are you lifting? (LBS)" id="Weight">
<input type="button" class="b-infoentry__button submit-element input-calculate" name="Calculate" value="Lift" onclick="startcalc()">
<input type="button" class="b-infoentry__button submit-element input-calculate" name="Calculate" value="LIFT" onclick="startcalc()">
</div>
<a href="#options"><h2 class="b-infoentry__heading">Options</h2></a>
</div>