T Capital

Forms 

<div class="p-5">
    <form>
        <input type="text" placeholder="First Name*">
        <input type="text" placeholder="First Name*">
        <textarea id="your-enquiry" rows="4" placeholder="Your enquiry*"></textarea>
        <div class="d-md-flex align-items-center">
            <input class="btn btn-primary mb-4 mb-md-0" type="submit" value="Submit">
            <p class="validation medium ms-md-4">alidation errors occurred. Please confirm the fields and submit again.</p>
        </div>
    </form>
</div>
 
<div class="p-5">
    <form>
        <input type="text" placeholder="First Name*">
        <input type="text" placeholder="First Name*">
        <textarea id="your-enquiry" rows="4" placeholder="Your enquiry*"></textarea>
        <div class="d-md-flex align-items-center">
            <input class="btn btn-primary mb-4 mb-md-0" type="submit" value="Submit">
            <p class="validation medium ms-md-4">alidation errors occurred. Please confirm the fields and submit again.</p>
        </div>
    </form>
</div>
 
/* No context defined. */
  • Content: 
    //  forms

form{
    input{
        &[type=text]{
            background-color: $bggrey;
            outline: none;
            border: 1px solid $bggrey;
            padding: 0.5rem 1rem;
            color: $white;
            width: 100%;
            display: block;
            margin: 0 0 2rem 0;
            border-radius: 0;
            transition: all 0.4s;
            &:focus{
                border: 1px solid $bordergrey;
                box-shadow: 0 0 50px 0 rgba(255, 255, 255, 0.25);
            }
        }
        &::placeholder{
            color: $white;
        }
    }
    textarea{
        width: 100%;
        display: block;
        border-radius: 0;
        outline: none;
        border: 1px solid $bggrey;
        background-color: $bggrey;
        padding: 0.5rem 1rem;
        color: $white;
        margin: 0 0 2rem 0;
        &:focus{
            border: 1px solid $bordergrey;
            box-shadow: 0 0 50px 0 rgba(255, 255, 255, 0.25);
        }
        &::placeholder{
            color: $white;
        }
    }
    .validation{
        padding: 0;
        margin: 0;
        color: $pink;
        border: 1px solid $pink;
        padding: 0.4rem 1rem;
        background: rgba(226, 0, 116, 0.20);
    }
}
  • URL: /components/raw/forms/forms.scss
  • Filesystem Path: src/components/01-global/forms/forms.scss
  • Size: 1.2 KB

No notes defined.