Added form styling
This commit is contained in:
82
src/style/_form.scss
Normal file
82
src/style/_form.scss
Normal file
@@ -0,0 +1,82 @@
|
||||
.form {
|
||||
display: flex;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
|
||||
label {
|
||||
display: block;
|
||||
font-size: .7em;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.grow-1, .grow-2 {
|
||||
margin-bottom: 0px;
|
||||
flex-basis: 50%;
|
||||
padding: 5px;
|
||||
|
||||
&.single-line label {
|
||||
display: inline;
|
||||
font-size: inherit;
|
||||
opacity: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.grow-1 {
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
.grow-2 {
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $breakpoint-xs) {
|
||||
.grow-1, .grow-2 {
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
input[type=text], input[type=email], select, textarea {
|
||||
width: 100%;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
padding: 4px;
|
||||
border-left: 5px solid $primary-color;
|
||||
}
|
||||
|
||||
input[type=submit] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input[type=text]:focus, input[type=email]:focus, select:focus, textarea:focus {
|
||||
border-color: $primary-color;
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
display:none;
|
||||
}
|
||||
|
||||
input[type="checkbox"] + label::before {
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
border-radius: 3px;
|
||||
border: 2px solid $primary-color;
|
||||
background-color: #fff;
|
||||
display: block;
|
||||
content: "";
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked+label::before {
|
||||
box-shadow: inset 0px 0px 0px 3px #fff;
|
||||
background-color: $primary-color;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@@ -6,6 +6,7 @@
|
||||
@import "_style.scss";
|
||||
@import "_footer.scss";
|
||||
@import "_cards.scss";
|
||||
@import "_form.scss";
|
||||
|
||||
@font-face {
|
||||
font-family: "SFMoviePoster";
|
||||
@@ -91,11 +92,25 @@ p {
|
||||
padding-bottom: 300px;
|
||||
}
|
||||
|
||||
hr {
|
||||
color: $primary-color;
|
||||
text-align: left;
|
||||
margin-left:0;
|
||||
width: 300px;
|
||||
max-width: 100%;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.center-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
a.btn {
|
||||
input.btn, a.btn {
|
||||
color: #000 !important;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
@@ -183,9 +198,9 @@ body.hero {
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 15vw;
|
||||
font-size: 14vw;
|
||||
font-weight: normal;
|
||||
line-height: 15vw;
|
||||
line-height: 11vw;
|
||||
|
||||
img {
|
||||
width: 18vw;
|
||||
|
||||
Reference in New Issue
Block a user