Files
What_Are_You_Lifting_App/css/appstyling-v2.css
stevenhaskell 32210e00b7 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.
2018-10-09 13:06:38 -04:00

254 lines
3.9 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/*
* What are you lifting V1
* Copyright 2018, stevenhaskell
* 12/29/2014
*/
/* Table of contents - Example
- Grid
- Base Styles
- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
*/
.b-header{
height: 25vh;
background-color: #48484A;
padding: 24px 16px;
text-align: center;
color: #FFFFFF;
position: relative;
}
.b-header__heading{
color: #CCFF00;
font-family: Roboto;
font-size: 24px;
font-weight: 400;
line-height: 48px;
letter-spacing: .025em;
}
.b-header__container {
width: 80%;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
p.subheading {
font-family: 'Zilla Slab', serif;
font-weight: 500;
font-style: italic;
font-size: 16px;
letter-spacing: .75pt;
margin-bottom: 0;
}
.b-platevisual{
height: 50vh;
background-color: #FFFFFF;
padding: 24px 16px;
text-align: center;
color: #48484A;
position: relative;
}
.b-platevisual__container{
width: 80%;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #48484A;
font-family: Roboto;
font-size: 20px;
font-weight: 500;
line-height: 28px;
letter-spacing: .015px;
}
.b-platevisual__weightfinal{
color: #48484A;
font-family: Roboto;
font-size: 20px;
font-weight: 500;
line-height: 28px;
letter-spacing: .015px;
}
.b-calulatorinputs {
height: 25vh;
width: auto;
background-color: #8C8E90;
text-align: left;
color: #FFFFFF;
position: relative;
}
.b-calulatorinputs__platerequirements{
height: auto;
text-align: center;
background-color: #8C8E90;
border-bottom: 16px solid #FF6600;
overflow:auto;
padding: 0px 10px;
}
.b-calulatorinputs__inputcontainer{
width: 100%;
color: #FCFCFC;
font-family: Roboto;
font-size: 10px;
font-weight: 500;
line-height: 14px;
letter-spacing: 1.5px;
height: auto;
overflow: auto;
text-align: center;
}
.b-calulatorinputs__input{
display: inline-block;
margin-right: 5px;
text-align: center;
}
.b-calulatorinputs__input:last-child{
margin-right: 0px;
}
input.input-weightsneeded{
width: 100%;
font-family: "Zilla Slab";
font-size: 14px;
font-style: italic;
font-weight: 500;
letter-spacing: 0.75px;
line-height: 20px;
text-align: center;
width: 41px;
height: 33px;
padding: 0px;
background-color: #D8D8D8;
color: ##48484A;
}
.b-calulatorinputs__infoentry{
background-color: #48484A;
padding: 8px 10px;
}
.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 {
}
.b-header__heading{
}
.b-header__subheading
.b-platevisual
.b-platevisual__weightfinal
.b-platevisual__barbell
.b-platevisual__weightdifference
.b-platerequirements
.b-platerequirements__subheading
.b-platerequirements__input
.b-infoentry
.b-infoentry__overline
.b-infoentry__input
.b-infoentry__button
.b-infoentry__heading
.b-options
.b-options__overline
*/