Added in css for contact form

This commit is contained in:
Rohit Pai 2022-01-01 00:37:10 +00:00
parent 3b2eb605e2
commit b24a3dd82d

View File

@ -59,3 +59,51 @@ div#sayHello #contactForm{
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
#contactForm .flName {
display: flex;
flex-direction: row;
gap: 1em;
}
#contactForm .formControl {
width: 100%;
}
#contactForm input[type="submit"] {
margin-top: 1em;
align-self: flex-start;
}
#contactForm .formControl input:not([type="submit"]), #contactForm .formControl textarea {
width: 100%;
border: 4px solid var(--primaryDefault);
background: none;
outline: none;
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
border-radius: 0.5em;
padding: 0 0.5em;
}
#contactForm .formControl textarea {
padding: 0.5em;
}
#contactForm .formControl input:not([type="submit"]).invalid:invalid, #contactForm .formControl textarea.invalid:invalid {
border: 4px solid var(--errorDefault);
}
#contactForm .formControl input:not([type="submit"]).invalid:invalid:focus, #contactForm .formControl textarea.invalid:invalid:focus {
border: 4px solid var(--errorHover);
box-shadow: 0 4px 2px 0 var(--mutedBlack);
}
#contactForm .formControl input:not([type="submit"]):focus, #contactForm .formControl textarea:focus {
border: 4px solid var(--primaryHover);
}
#contactForm .formControl input:not([type="submit"]) {
height: 3em;
}