<!-- :required -->
<section class="example-cntr required">    
    <h1>CSS <code>:required</code> pseudo-class</h1>
    <p>The <code>:required</code> pseudo-class targets inputs that have the <code>required</code> HTML attribute.</p>
    <p>Instead of relying on the traditional asterisk * on the labels to denote “required”, we can also style required fields with CSS. Basically, the best of both worlds.</p>
    <p>In the following example, this input has the <code>required</code> HTML attribute. The UX can be enhanced by applying a particular styling to provide a visual cue to the field is, well, required :)</p>
    <p>Try submitting the form without filling any field.</p>
    <form>
        <small>All fields are <span class="blue">required</span> unless marked as "optional".</small>
        <label>Name:
            <input type="text" id="name" required>
        </label>
        <label>Email <small>(optional)</small>:
            <input type="email" id="email">
        </label>
        <label>Comments:
            <textarea name="comments" id="comments" cols="30" rows="5" required></textarea>
        </label>       
        <button type="submit">Send Comments</button> 
    </form>
</section>

//:required
.required {
    form { width: 300px; }
    label {
        display: block;
        margin-bottom: 5px;
    }
    input, textarea {
        height: auto !important;
        margin: 5px 0 !important;
        padding: 5px 5px 5px 10px !important;
        border: none;
        font-size: 18px;
        cursor: text;
    }
    button {
        margin-left: 10px;
        padding: 5px 35px;
        font:bold  1em 'Source Sans Pro', Arial, Helvetica, sans-serif;    
        color: white;
        border: 3px solid rgba(black,.5);
        border-radius: 2px;
        cursor: pointer;
        background: $g;
        transition: .5s;
        &:hover {
           background: darken($g,8);;
        }
    }
    :required {
        box-shadow: inset 5px 0 0 rgba($b,.8);
    }
    .blue {
        display: inline-block;
        padding: 0 5px;
        background: darken($b,20);
    }
}





//Styling stuff not needed for demo
body { text-align: left; }
h1 {
    font-size: 22px;
    text-transform: none;
    border-bottom: #636363 1px dotted;
    code {
        display: inline-block;
        margin-bottom: 10px;
        color: $y;
        background: none;
        box-shadow: none;
    }
}
code { font-size: 1em; }
input {
    width: 30px; height: 30px;
    vertical-align: middle;
    outline: none;
}
input, label { cursor: pointer; }
input[type=text],
input[type=email] { width: 100%; }
textarea {
    width: 100%;
    height: 50px;
}
label {
    padding: 3px 8px 5px;
    border-radius: 2px;
    border: transparent 1px solid;    
    transition: .5s;
    &:hover {
        border: rgba(white,.2) 1px solid;        
    }
}
.example-cntr {
    max-width: 800px;
    margin: 0 auto 50px;
    padding: 30px;
    box-shadow: 0 1px 2px rgba(black,.3);
    background: rgba(black,.15);
}
form {
    min-width: 400px;
    padding: 20px;
    border: #444 1px solid;
    border-radius: 2px;
}