diff options
add form horizontal code
3 files changed, 164 insertions, 45 deletions
| -rw-r--r-- | demo/index.html | 165 | ||||
| -rw-r--r-- | dist/spectre.css | 21 | ||||
| -rw-r--r-- | src/forms.less | 23 |
diff --git a/demo/index.html b/demo/index.html index 26f1fd7..2bebac6 100644 --- a/demo/index.html +++ b/demo/index.html @@ -213,53 +213,128 @@ </section> <section class="forms"> <header class="text-center"><h4>forms</h4></header> - <form class="col-6"> - <div class="form-group"> - <label class="form-label" for="input-example-1">Name</label> - <input class="form-input" type="text" id="input-example-1" placeholder="Name"> - </div> - <div class="form-group"> - <label class="form-label" for="input-example-2">Email</label> - <input class="form-input" type="email" id="input-example-2" placeholder="Email"> - </div> - <div class="form-group"> - <select class="form-select"> - <option>Choose an option</option> - <option>Slack</option> - <option>Skype</option> - <option>Hipchat</option> - </select> - </div> - <div class="form-group"> - <label class="form-switch"> - <input type="checkbox"> - Send me emails with news and tips - </label> - </div> - <div class="form-group"> - <label class="form-label" for="input-example-3">Message</label> - <textarea class="form-input" id="input-example-3" placeholder="Textarea" rows="3"></textarea> - </div> - <div class="form-group"> - <label class="form-label">Gender</label> - <label class="form-radio"> - <input type="radio" name="gender"> Male - </label> - <label class="form-radio"> - <input type="radio" name="gender" checked> Female - </label> - </div> - <div class="form-group"> - <label class="form-checkbox"> - <input type="checkbox"> - Remember me - </label> + <div class="columns"> + <div class="column col-6"> + <form> + <div class="form-group"> + <label class="form-label" for="input-example-1">Name</label> + <input class="form-input" type="text" id="input-example-1" placeholder="Name"> + </div> + <div class="form-group"> + <label class="form-label" for="input-example-2">Email</label> + <input class="form-input" type="email" id="input-example-2" placeholder="Email"> + </div> + <div class="form-group"> + <select class="form-select"> + <option>Choose an option</option> + <option>Slack</option> + <option>Skype</option> + <option>Hipchat</option> + </select> + </div> + <div class="form-group"> + <label class="form-switch"> + <input type="checkbox"> + Send me emails with news and tips + </label> + </div> + <div class="form-group"> + <label class="form-label" for="input-example-3">Message</label> + <textarea class="form-input" id="input-example-3" placeholder="Textarea" rows="3"></textarea> + </div> + <div class="form-group"> + <label class="form-label">Gender</label> + <label class="form-radio"> + <input type="radio" name="gender"> Male + </label> + <label class="form-radio"> + <input type="radio" name="gender" checked> Female + </label> + </div> + <div class="form-group"> + <label class="form-checkbox"> + <input type="checkbox"> + Remember me + </label> + </div> + <div class="form-group"> + <button class="btn btn-primary">Submit</button> + <button class="btn btn-link">Cancel</button> + </div> + </form> </div> - <div class="form-group"> - <button class="btn btn-primary">Submit</button> - <button class="btn btn-link">Cancel</button> + </div> + <div class="columns"> + <div class="column col-6"> + <form class="form-horizontal"> + <div class="form-group columns"> + <label class="form-label col-3" for="input-example-4">Name</label> + <div class="col-9"> + <input class="form-input" type="text" id="input-example-4" placeholder="Name"> + </div> + </div> + <div class="form-group columns"> + <label class="form-label col-3" for="input-example-5">Email</label> + <div class="col-9"> + <input class="form-input" type="email" id="input-example-5" placeholder="Email"> + </div> + </div> + <div class="form-group columns"> + <div class="col-3"></div> + <div class="col-9"> + <select class="form-select"> + <option>Choose an option</option> + <option>Slack</option> + <option>Skype</option> + <option>Hipchat</option> + </select> + </div> + </div> + <div class="form-group columns"> + <div class="col-3"></div> + <div class="col-9"> + <label class="form-checkbox"> + <input type="checkbox"> + Remember me + </label> + </div> + </div> + <div class="form-group columns"> + <label class="form-label col-3" for="input-example-6">Message</label> + <div class="col-9"> + <textarea class="form-input" id="input-example-6" placeholder="Textarea" rows="3"></textarea> + </div> + </div> + <div class="form-group columns"> + <label class="form-label col-3">Gender</label> + <div class="col-9"> + <label class="form-radio"> + <input type="radio" name="gender"> Male + </label> + <label class="form-radio"> + <input type="radio" name="gender" checked> Female + </label> + </div> + </div> + <div class="form-group columns"> + <div class="col-3"></div> + <div class="col-9"> + <label class="form-switch"> + <input type="checkbox"> + Send me emails with news and tips + </label> + </div> + </div> + <div class="form-group columns"> + <div class="col-3"></div> + <div class="col-9"> + <button class="btn btn-primary">Submit</button> + <button class="btn btn-link">Cancel</button> + </div> + </div> + </form> </div> - </form> + </div> </section> <section class="labels"> <header class="text-center"><h4>labels</h4></header> diff --git a/dist/spectre.css b/dist/spectre.css index 30825d0..3d2944d 100644 --- a/dist/spectre.css +++ b/dist/spectre.css @@ -832,6 +832,27 @@ button.btn-clear::after { .form-group:not(:last-child) { margin-bottom: 1rem; } +.form-horizontal .col-12, +.form-horizontal .col-11, +.form-horizontal .col-10, +.form-horizontal .col-9, +.form-horizontal .col-8, +.form-horizontal .col-7, +.form-horizontal .col-6, +.form-horizontal .col-5, +.form-horizontal .col-4, +.form-horizontal .col-3, +.form-horizontal .col-2, +.form-horizontal .col-1 { + float: left; +} +.form-horizontal .form-label { + padding: .8rem .4rem; +} +.form-horizontal .form-checkbox, +.form-horizontal .form-radio { + margin: .5rem 0; +} .form-input { position: relative; display: block; diff --git a/src/forms.less b/src/forms.less index 110b747..8d4cbc4 100644 --- a/src/forms.less +++ b/src/forms.less @@ -2,6 +2,29 @@ .form-group:not(:last-child) { margin-bottom: 1rem; } +.form-horizontal { + .col-12, + .col-11, + .col-10, + .col-9, + .col-8, + .col-7, + .col-6, + .col-5, + .col-4, + .col-3, + .col-2, + .col-1 { + float: left; + } + .form-label { + padding: .8rem .4rem; + } + .form-checkbox, + .form-radio { + margin: .5rem 0; + } +} // Form element: Input boxes .form-input { position: relative; |