mirror of
https://github.com/jgthms/bulma
synced 2026-03-19 03:44:31 -07:00
Init v1
This commit is contained in:
Jeremy Thomas
351
docs/_includes/library/form/file.html
Normal file
351
docs/_includes/library/form/file.html
Normal file
@@ -0,0 +1,351 @@
|
||||
<div class="file">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label"> Choose a file… </span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="file has-name">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label"> Choose a file… </span>
|
||||
</span>
|
||||
<span class="file-name"> Screen Shot 2017-07-29 at 15.54.25.png </span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="file has-name is-right">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label"> Choose a file… </span>
|
||||
</span>
|
||||
<span class="file-name"> Screen Shot 2017-07-29 at 15.54.25.png </span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="file has-name is-fullwidth">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label"> Choose a file… </span>
|
||||
</span>
|
||||
<span class="file-name"> Screen Shot 2017-07-29 at 15.54.25.png </span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="file is-boxed">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label"> Choose a file… </span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="file has-name is-boxed">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label"> Choose a file… </span>
|
||||
</span>
|
||||
<span class="file-name"> Screen Shot 2017-07-29 at 15.54.25.png </span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="file is-primary">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label"> Primary file… </span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="file is-info has-name">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label"> Info file… </span>
|
||||
</span>
|
||||
<span class="file-name"> Screen Shot 2017-07-29 at 15.54.25.png </span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="file is-warning is-boxed">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-cloud-upload-alt"></i>
|
||||
</span>
|
||||
<span class="file-label"> Warning file… </span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="file is-danger has-name is-boxed">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-cloud-upload-alt"></i>
|
||||
</span>
|
||||
<span class="file-label"> Danger file… </span>
|
||||
</span>
|
||||
<span class="file-name"> Screen Shot 2017-07-29 at 15.54.25.png </span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="file is-small">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label"> Small file… </span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="file is-normal">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label"> Normal file… </span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="file is-medium">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label"> Medium file… </span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="file is-large">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label"> Large file… </span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="file is-small has-name">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label"> Small file… </span>
|
||||
</span>
|
||||
<span class="file-name"> Screen Shot 2017-07-29 at 15.54.25.png </span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="file is-normal has-name">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label"> Normal file… </span>
|
||||
</span>
|
||||
<span class="file-name"> Screen Shot 2017-07-29 at 15.54.25.png </span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="file is-medium has-name">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label"> Medium file… </span>
|
||||
</span>
|
||||
<span class="file-name"> Screen Shot 2017-07-29 at 15.54.25.png </span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="file is-large has-name">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label"> Large file… </span>
|
||||
</span>
|
||||
<span class="file-name"> Screen Shot 2017-07-29 at 15.54.25.png </span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="file is-small is-boxed">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label"> Small file… </span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="file is-normal is-boxed">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label"> Normal file… </span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="file is-medium is-boxed">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label"> Medium file… </span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="file is-large is-boxed">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label"> Large file… </span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="file is-small is-boxed has-name">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label"> Small file… </span>
|
||||
</span>
|
||||
<span class="file-name"> Screen Shot 2017-07-29 at 15.54.25.png </span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="file is-normal is-boxed has-name">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label"> Normal file… </span>
|
||||
</span>
|
||||
<span class="file-name"> Screen Shot 2017-07-29 at 15.54.25.png </span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="file is-medium is-boxed has-name">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label"> Medium file… </span>
|
||||
</span>
|
||||
<span class="file-name"> Screen Shot 2017-07-29 at 15.54.25.png </span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="file is-large is-boxed has-name">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label"> Large file… </span>
|
||||
</span>
|
||||
<span class="file-name"> Screen Shot 2017-07-29 at 15.54.25.png </span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="file is-centered is-boxed is-success has-name">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label"> Centered file… </span>
|
||||
</span>
|
||||
<span class="file-name"> Screen Shot 2017-07-29 at 15.54.25.png </span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="file is-right is-info">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label"> Right file… </span>
|
||||
</span>
|
||||
<span class="file-name"> Screen Shot 2017-07-29 at 15.54.25.png </span>
|
||||
</label>
|
||||
</div>
|
||||
95
docs/_includes/library/form/general.html
Normal file
95
docs/_includes/library/form/general.html
Normal file
@@ -0,0 +1,95 @@
|
||||
<div class="field">
|
||||
<label for="text" class="label">Name</label>
|
||||
|
||||
<div class="control">
|
||||
<input id="text" class="input" type="text" placeholder="Text input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="username" class="label">Username</label>
|
||||
|
||||
<div class="control has-icons-left has-icons-right">
|
||||
<input id="username" class="input is-success" type="text" placeholder="Text input" value="bulma">
|
||||
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fas fa-user"></i>
|
||||
</span>
|
||||
|
||||
<span class="icon is-small is-right">
|
||||
<i class="fas fa-check"></i>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p class="help is-success">This username is available</p>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="email" class="label">Email</label>
|
||||
|
||||
<div class="control has-icons-left has-icons-right">
|
||||
<input id="email" class="input is-danger" type="email" placeholder="Email input" value="hello@">
|
||||
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fas fa-envelope"></i>
|
||||
</span>
|
||||
|
||||
<span class="icon is-small is-right">
|
||||
<i class="fas fa-exclamation-triangle"></i>
|
||||
</span>
|
||||
</div>
|
||||
<p class="help is-danger">This email is invalid</p>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="subject" class="label">Subject</label>
|
||||
|
||||
<div class="control">
|
||||
<div class="select">
|
||||
<select id="subject">
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="message" class="label">Message</label>
|
||||
|
||||
<div class="control">
|
||||
<textarea id="mesage" class="textarea" placeholder="Textarea"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<label for="terms" class="checkbox">
|
||||
<input id="terms" type="checkbox">
|
||||
I agree to the <a href="#">terms and conditions</a>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<label for="yes" class="radio">
|
||||
<input id="yes" type="radio" name="question">
|
||||
Yes
|
||||
</label>
|
||||
<label for="no" class="radio">
|
||||
<input id="no" type="radio" name="question">
|
||||
No
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field is-grouped">
|
||||
<div class="control">
|
||||
<button class="button is-link">Submit</button>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<button class="button is-link is-light">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user