stevenhaskell/What_Are_You_Lifting_App
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Updates to Weight Inputs

Browse Source 
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:
Steven Haskell
2018-10-09 13:06:38 -04:00
parent bd088e31d7
commit 32210e00b7
3 changed files with 45 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
css/appstyling-v2.css
View File

@@ -165,13 +165,53 @@ input.input-weightsneeded{
.b-calulatorinputs__inputcontainer{ .b-calulatorinputs__inputcontainer{
text-align: center; text-align: center;
} }
.b-calulatorinputs__infoentry label{ .b-calulatorinputs__infoentry label{
text-align: left; 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 { .b-container {

4
css/main.css
View File

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

4
whatareyouliftingapp-V5.html
View File

@@ -80,8 +80,8 @@
<div class="b-calulatorinputs__inputcontainer"> <div class="b-calulatorinputs__inputcontainer">
<div class="b-calulatorinputs__input"> <div class="b-calulatorinputs__input">
<label for="Weight">WEIGHT</label> <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="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> </div>
<a href="#options"><h2 class="b-infoentry__heading">Options</h2></a> <a href="#options"><h2 class="b-infoentry__heading">Options</h2></a>
</div> </div>