Skip to content

Commit

Permalink
update: vue-bulma#139 bulma 0.3.1
Browse files Browse the repository at this point in the history
  • Loading branch information
@luventa
luventa committed Feb 22, 2017
1 parent 8ce8761 commit dbb2157
Show file tree
Hide file tree
Showing 5 changed files with 136 additions and 118 deletions.
4 changes: 4 additions & 0 deletions client/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,10 @@ export default {
$fa-font-path: '~font-awesome/fonts/';
@import '~font-awesome/scss/font-awesome';
html {
background-color: whitesmoke;
}
.nprogress-container {
position: fixed !important;
width: 100%;
Expand Down
6 changes: 2 additions & 4 deletions client/views/components/Quill.vue
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
<template>
<div class="box">
<h3 class="title">
Your powerful, rich text editor.
<a href="http://quilljs.com">http://quilljs.com</a>
</h3>
<h1 class="title">Your powerful, rich text editor.</h1>
<h2 class="subtitle"><a href="http://quilljs.com">http://quilljs.com</a></h2>
<quill :options="{ theme: 'snow' }">
<h2>One Ring to Rule Them All</h2>
<p><a href="http://en.wikipedia.org/wiki/One_Ring">http://en.wikipedia.org/wiki/One_Ring</a></p>
Expand Down
236 changes: 126 additions & 110 deletions client/views/ui/Form.vue
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div>
<div class="tile is-ancestor">
<div class="tile is-parent is-2">
<div class="tile is-parent is-4">
<article class="tile is-child box">
<h1 class="title">Controls</h1>
<div class="block">
Expand All @@ -12,13 +12,17 @@
<label class="label">Username</label>
<p class="control has-icon has-icon-right">
<input class="input is-success" type="text" placeholder="Text input" value="bulma">
<i class="fa fa-check"></i>
<span class="icon is-small">
<i class="fa fa-check"></i>
</span>
<span class="help is-success">This username is available</span>
</p>
<label class="label">Email</label>
<p class="control has-icon has-icon-right">
<input class="input is-danger" type="text" placeholder="Email input" value="hello@">
<i class="fa fa-warning"></i>
<span class="icon is-small">
<i class="fa fa-warning"></i>
</span>
<span class="help is-danger">This email is invalid</span>
</p>
<label class="label">Subject</label>
Expand Down Expand Up @@ -58,7 +62,7 @@
</article>
</div>

<div class="tile is-parent is-2">
<div class="tile is-parent is-5 is-vertical">
<article class="tile is-child box">
<h1 class="title">Colors</h1>
<div class="block">
Expand All @@ -79,9 +83,6 @@
</p>
</div>
</article>
</div>

<div class="tile is-parent is-2">
<article class="tile is-child box">
<h1 class="title">Sizes</h1>
<div class="block">
Expand All @@ -101,7 +102,7 @@
</article>
</div>

<div class="tile is-parent is-3">
<div class="tile is-parent">
<article class="tile is-child box">
<h1 class="title">States</h1>
<div class="block">
Expand Down Expand Up @@ -144,18 +145,26 @@
</div>
</article>
</div>
</div>

<div class="tile is-ancestor">

<div class="tile is-parent is-3">
<article class="tile is-child box">
<h1 class="title">With Font Awesome icons</h1>
<h1 class="title">With Icon</h1>
<h2 class="subtitle"><a href="http://fontawesome.io/">Font Awesome Icons</a></h2>
<div class="block">
<p class="control has-icon">
<input class="input" type="email" placeholder="Email">
<i class="fa fa-envelope"></i>
<span class="icon is-small">
<i class="fa fa-envelope"></i>
</span>
</p>
<p class="control has-icon">
<input class="input" type="password" placeholder="Password">
<i class="fa fa-lock"></i>
<span class="icon is-small">
<i class="fa fa-lock"></i>
</span>
</p>
<p class="control">
<button class="button is-success">
Expand All @@ -165,82 +174,114 @@
</div>
</article>
</div>
</div>

<div class="tile is-ancestor">
<div class="tile is-parent">
<article class="tile is-child box">
<h1 class="title">Addons</h1>
<h1 class="title">Cleave.js</h1>
<h2 class="subtitle">Format your &lt;input/&gt; content when you are typing</h2>
<div class="columns">
<div class="column">
<p class="control has-addons">
<input class="input" type="text" placeholder="Find a repository">
<a class="button is-info">Search</a>
</p>
</div>
<div class="column">
<p class="control has-addons">
<span class="select">
<select>
<option>$</option>
<option>£</option>
<option>€</option>
</select>
</span>
<input class="input is-expanded" type="text" placeholder="Amount of money">
<a class="button is-success">
Transfer
</a>
</p>
</div>
<div class="column">
<p class="control has-addons has-addons-centered">
<span class="select">
<select>
<option>$</option>
<option>£</option>
<option>€</option>
</select>
</span>
<input class="input" type="text" placeholder="Amount of money">
<a class="button is-success">
Transfer
</a>
</p>
<div class="control">
<label class="label">Credit card number</label>
<cleave class="input" placeholder="Enter credit card number" :options="{ creditCard: true }"></cleave>
</div>
<div class="control">
<label class="label">Phone number</label>
<cleave class="input" type="tel" placeholder="Enter phone number" :options="{ phone: true, phoneRegionCode: 'cn' }"></cleave>
</div>
<div class="control">
<label class="label">Numeral</label>
<cleave class="input" placeholder="Enter numeral" :options="{ numeral: true, numeralThousandsGroupStyle: 'thousand' }"></cleave>
</div>
</div>
<div class="column">
<p class="control has-addons has-addons-right">
<span class="select">
<select>
<option>$</option>
<option>£</option>
<option>€</option>
</select>
</span>
<input class="input" type="text" placeholder="Amount of money">
<a class="button is-success">
Transfer
</a>
</p>
<div class="control">
<label class="label">Date</label>
<cleave class="input" placeholder="YYYY/MM/DD" :value="'20160901'" :options="{ date: true, datePattern: ['Y', 'm', 'd'] }"></cleave>
</div>
<div class="control">
<cleave class="input" placeholder="MM/YY" :options="{ date: true, datePattern: ['m', 'y'] }"></cleave>
</div>
</div>
<div class="column">
<div class="control is-grouped">
<p class="control is-expanded">
<input class="input" type="text" placeholder="Find a repository">
</p>
<p class="control">
<a class="button is-info">
Search
</a>
</p>
<div class="control">
<label class="label">Custom options</label>
<cleave class="input" placeholder="Blocks: [4, 3, 3, 4]" :options="{ blocks: [4, 3, 3, 4], uppercase: true }"></cleave>
</div>
<div class="control">
<cleave class="input" placeholder="Delimiter: '·'" :options="{ delimiter: '·', blocks: [3, 3, 3, 3], uppercase: true }"></cleave>
</div>
<div class="control">
<cleave class="input" :options="{ prefix: 'PREFIX', delimiter: '-', blocks: [6, 4, 4, 4], uppercase: true }"></cleave>
</div>
</div>
</div>
</article>
</div>

</div>

<div class="tile is-ancestor">
<div class="tile is-parent">
<article class="tile is-child box">
<h1 class="title">Addons</h1>
<div class="block">
<p class="control has-addons">
<input class="input" type="text" placeholder="Find a repository">
<a class="button is-info">Search</a>
</p>
<p class="control has-addons">
<span class="select">
<select>
<option>$</option>
<option>£</option>
<option>€</option>
</select>
</span>
<input class="input is-expanded" type="text" placeholder="Expanded">
<a class="button is-success">
Transfer
</a>
</p>
<p class="control has-addons has-addons-centered">
<span class="select">
<select>
<option>$</option>
<option>£</option>
<option>€</option>
</select>
</span>
<input class="input" type="text" placeholder="Centered">
<a class="button is-success">
Transfer
</a>
</p>
<p class="control has-addons has-addons-right">
<span class="select">
<select>
<option>$</option>
<option>£</option>
<option>€</option>
</select>
</span>
<input class="input" type="text" placeholder="Pull right">
<a class="button is-success">
Transfer
</a>
</p>
<div class="control is-grouped">
<p class="control is-expanded">
<input class="input" type="text" placeholder="Expanded and Grouped">
</p>
<p class="control">
<a class="button is-info">
Search
</a>
</p>
</div>
</div>
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<h1 class="title">Horizontal form</h1>
Expand Down Expand Up @@ -291,45 +332,6 @@
</article>
</div>
</div>

<div class="tile is-ancestor">
<div class="tile is-parent">
<article class="tile is-child box">
<h1 class="title">Cleave.js - Format your &lt;input/&gt; content when you are typing</h1>
<div class="block">
<div class="control">
<label class="label">Credit card number formatting</label>
<cleave class="input" placeholder="Enter credit card number" :options="{ creditCard: true }"></cleave>
</div>
<div class="control">
<label class="label">Phone number formatting</label>
<cleave class="input" type="tel" placeholder="Enter phone number" :options="{ phone: true, phoneRegionCode: 'cn' }"></cleave>
</div>
<div class="control">
<label class="label">Date formatting</label>
<cleave class="input" placeholder="YYYY/MM/DD" :value="'20160901'" :options="{ date: true, datePattern: ['Y', 'm', 'd'] }"></cleave>
</div>
<div class="control">
<cleave class="input" placeholder="MM/YY" :options="{ date: true, datePattern: ['m', 'y'] }"></cleave>
</div>
<div class="control">
<label class="label">Numeral formatting</label>
<cleave class="input" placeholder="Enter numeral" :options="{ numeral: true, numeralThousandsGroupStyle: 'thousand' }"></cleave>
</div>
<div class="control">
<label class="label">Custom options</label>
<cleave class="input" placeholder="Blocks: [4, 3, 3, 4]" :options="{ blocks: [4, 3, 3, 4], uppercase: true }"></cleave>
</div>
<div class="control">
<cleave class="input" placeholder="Delimiter: '·'" :options="{ delimiter: '·', blocks: [3, 3, 3, 3], uppercase: true }"></cleave>
</div>
<div class="control">
<cleave class="input" :options="{ prefix: 'PREFIX', delimiter: '-', blocks: [6, 4, 4, 4], uppercase: true }"></cleave>
</div>
</div>
</article>
</div>
</div>
</div>
</template>

Expand All @@ -344,12 +346,26 @@ export default {
}
</script>

<style scoped>
<style lang="scss" scoped>
@import '~bulma/sass/utilities/mixins';
.button {
margin: 5px 0 0;
}
.control .button {
margin: inherit;
}
.control.has-addons {
@include mobile() {
input {
width: 100%;
}
input.is-expanded {
flex-shrink: 1;
}
}
}
</style>
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
"dependencies": {
"animate.css": "3.5.2",
"animejs": "1.1.3",
"bulma": "0.2.3",
"bulma": "0.3.1",
"font-awesome": "4.7.0",
"mdi": "1.7.22",
"plotly.js": "1.21.2",
Expand Down
6 changes: 3 additions & 3 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1098,9 +1098,9 @@ builtin-status-codes@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8"

bulma@0.2.3:
version "0.2.3"
resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.2.3.tgz#086394c65e74aa8081e658bdcf6742f81107936e"
bulma@0.3.1:
version "0.3.1"
resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.3.1.tgz#0166be77e7a5f62ede01b0be3f1e77e954978bd2"

call-matcher@^1.0.1:
version "1.0.1"
Expand Down

0 comments on commit dbb2157

Please sign in to comment.