bootstrap-bookingsync-sass 1.0.4 → 1.0.5
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +6 -0
- data/README.md +13 -0
- data/addon/components/bsy-input.js +20 -2
- data/addon/templates/components/bsy-input.hbs +7 -1
- data/addon/templates/components/bsy-select.hbs +1 -0
- data/assets/stylesheets/bookingsync/_chosen.scss +4 -1
- data/assets/stylesheets/bookingsync/_form.scss +25 -0
- data/docs/content/forms/forms.md +50 -0
- data/lib/bootstrap/bookingsync/version.rb +1 -1
- data/package.json +1 -1
- data/tests/dummy/app/templates/index.hbs +21 -0
- metadata +2 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: c3c36199fe844d41017503e61a845a389e88edc6
|
4
|
+
data.tar.gz: 0b1fb0732e3abb2295c994633ba07c0d843de27b
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: d17763bd2435c3643cf32b452a2a96e4c1321eaba606dfc5250f0df0f57644a0972937a1c82603efa7fb3e70a4e963153511bbfaf1fb5cf06409aaf614ac9555
|
7
|
+
data.tar.gz: 9a169ae6555d6fef6bb91bf6621913c63eac03a7a66f6616f055f37aa4a6e99d2e1a897437bb99e237b8d4dfa7f152679ca49675e6502ee5d0ea79cd0cd581c4
|
data/CHANGELOG.md
CHANGED
data/README.md
CHANGED
@@ -228,6 +228,19 @@ Make sure the file has `.scss` extension (or `.sass` for Sass syntax). If you ha
|
|
228
228
|
|
229
229
|
### Running
|
230
230
|
|
231
|
+
#### Prerequisites
|
232
|
+
You will need the following things properly installed on your computer.
|
233
|
+
|
234
|
+
* [Node.js](http://nodejs.org/) (latest stable version, v7.7.1 at 2017-08-16)
|
235
|
+
* [Bower](http://bower.io/)
|
236
|
+
* [Ember CLI](http://www.ember-cli.com/)
|
237
|
+
* [yarn](https://yarnpkg.com/en/)
|
238
|
+
|
239
|
+
#### Installation
|
240
|
+
* `yarn`
|
241
|
+
* `bower install`
|
242
|
+
|
243
|
+
#### Starting
|
231
244
|
* `ember server`
|
232
245
|
* Visit your app at http://localhost:4200 or from your Rails application if tight together.
|
233
246
|
|
@@ -1,12 +1,30 @@
|
|
1
1
|
import Ember from 'ember';
|
2
2
|
import layout from '../templates/components/bsy-input';
|
3
3
|
|
4
|
-
const
|
4
|
+
const { Component, computed } = Ember;
|
5
|
+
|
6
|
+
const BsyInputComponent = Component.extend({
|
5
7
|
layout,
|
6
8
|
tagName: "div",
|
7
9
|
classNames: "form-group",
|
8
10
|
type: "text",
|
9
|
-
classNameBindings: ["value:filled"]
|
11
|
+
classNameBindings: ["value:filled", "icon:has-icon"],
|
12
|
+
size: null, // sm, lg
|
13
|
+
|
14
|
+
inputClassNames: computed('size', function () {
|
15
|
+
const size = this.get('size');
|
16
|
+
if (size) {
|
17
|
+
return `form-control input-${size}`;
|
18
|
+
}
|
19
|
+
return "form-control";
|
20
|
+
}),
|
21
|
+
|
22
|
+
iconSize: computed('size', function () {
|
23
|
+
const size = this.get('size');
|
24
|
+
if (size) {
|
25
|
+
return `icon--${size}`;
|
26
|
+
}
|
27
|
+
})
|
10
28
|
});
|
11
29
|
|
12
30
|
BsyInputComponent.reopenClass({
|
@@ -1,8 +1,14 @@
|
|
1
1
|
<label for="{{id}}">{{label}}</label>
|
2
|
+
{{#if icon}}
|
3
|
+
<i class="icon-{{icon}} {{iconSize}}"></i>
|
4
|
+
{{/if}}
|
2
5
|
{{one-way-input
|
3
6
|
value=value
|
4
7
|
update=update
|
5
|
-
class=
|
8
|
+
class=inputClassNames
|
6
9
|
type=type
|
7
10
|
id=inputId
|
11
|
+
readonly=readonly
|
12
|
+
placeholder=placeholder
|
13
|
+
disabled=disabled
|
8
14
|
}}
|
@@ -10,7 +10,6 @@
|
|
10
10
|
border-radius: $input-border-radius;
|
11
11
|
@include box-shadow(none);
|
12
12
|
padding: 0 $grid-gutter-width 0 0;
|
13
|
-
height: $input-height-base;
|
14
13
|
|
15
14
|
&.chosen-default span {
|
16
15
|
visibility: hidden;
|
@@ -72,6 +71,10 @@
|
|
72
71
|
margin-top: -3px;
|
73
72
|
}
|
74
73
|
|
74
|
+
.chosen-container-single .chosen-single {
|
75
|
+
height: $input-height-base;
|
76
|
+
}
|
77
|
+
|
75
78
|
.chosen-container-multi .chosen-choices {
|
76
79
|
li.search-choice {
|
77
80
|
background: none;
|
@@ -64,6 +64,31 @@
|
|
64
64
|
transition-timing-function: cubic-bezier(.4,0,.2,1);
|
65
65
|
}
|
66
66
|
|
67
|
+
&.has-icon {
|
68
|
+
i {
|
69
|
+
position: absolute;
|
70
|
+
bottom: 12px;
|
71
|
+
color: $gray-light;
|
72
|
+
|
73
|
+
&.icon--sm {
|
74
|
+
bottom: 14px;
|
75
|
+
}
|
76
|
+
|
77
|
+
&.icon--lg {
|
78
|
+
bottom: 18px;
|
79
|
+
font-size: 20px;
|
80
|
+
}
|
81
|
+
}
|
82
|
+
|
83
|
+
input {
|
84
|
+
padding-left: 20px;
|
85
|
+
|
86
|
+
&.input-lg {
|
87
|
+
padding-left: 30px;
|
88
|
+
}
|
89
|
+
}
|
90
|
+
}
|
91
|
+
|
67
92
|
&.filled label {
|
68
93
|
color: $label-color-filled;
|
69
94
|
font-size: $label-font-size-filled;
|
data/docs/content/forms/forms.md
CHANGED
@@ -1210,6 +1210,56 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a blandit quam
|
|
1210
1210
|
</form>
|
1211
1211
|
~~~
|
1212
1212
|
|
1213
|
+
<div class="example">
|
1214
|
+
<div class="sheet-header">
|
1215
|
+
<h3 id="input-group-with-icon">Input group with icon</h3>
|
1216
|
+
</div>
|
1217
|
+
|
1218
|
+
<p>Add icon to input field adding class <code>.has-icon</code> to the <code>.form-group</code>.
|
1219
|
+
Create bigger or smaller icons using classes like <code>.icon--lg</code>. Use these classes
|
1220
|
+
in conjunction with <code>.input-lg</code> for the input field for example to match its height.</p>
|
1221
|
+
|
1222
|
+
<div class="bs-example bs-sheet" data-example-id="input-group-with-icon">
|
1223
|
+
<form>
|
1224
|
+
<div class="form-group has-icon">
|
1225
|
+
<label for="inputGroupLarge">Large input group</label>
|
1226
|
+
<i class="icon-notifications icon--lg"></i>
|
1227
|
+
<input class="form-control input-lg" type="text" id="inputGroupLarge">
|
1228
|
+
</div>
|
1229
|
+
<div class="form-group has-icon">
|
1230
|
+
<label for="inputGroupDefault">Default input group</label>
|
1231
|
+
<i class="icon-notifications"></i>
|
1232
|
+
<input class="form-control" type="text" id="inputGroupDefault">
|
1233
|
+
</div>
|
1234
|
+
<div class="form-group has-icon">
|
1235
|
+
<label for="inputGroupSmall">Small input group</label>
|
1236
|
+
<i class="icon-notifications icon--sm"></i>
|
1237
|
+
<input class="form-control input-sm" type="text" id="inputGroupSmall">
|
1238
|
+
</div>
|
1239
|
+
</form>
|
1240
|
+
</div>
|
1241
|
+
</div>
|
1242
|
+
|
1243
|
+
~~~ html
|
1244
|
+
<form>
|
1245
|
+
<div class="form-group has-icon">
|
1246
|
+
<label for="inputGroupLarge">Large input group</label>
|
1247
|
+
<i class="icon-notifications icon--lg"></i>
|
1248
|
+
<input class="form-control input-lg" type="text" id="inputGroupLarge">
|
1249
|
+
</div>
|
1250
|
+
<div class="form-group has-icon">
|
1251
|
+
<label for="inputGroupDefault">Default input group</label>
|
1252
|
+
<i class="icon-notifications"></i>
|
1253
|
+
<input class="form-control" type="text" id="inputGroupDefault">
|
1254
|
+
</div>
|
1255
|
+
<div class="form-group has-icon">
|
1256
|
+
<label for="inputGroupSmall">Small input group</label>
|
1257
|
+
<i class="icon-notifications icon--sm"></i>
|
1258
|
+
<input class="form-control input-sm" type="text" id="inputGroupSmall">
|
1259
|
+
</div>
|
1260
|
+
</form>
|
1261
|
+
~~~
|
1262
|
+
|
1213
1263
|
<div class="example">
|
1214
1264
|
<div class="sheet-header">
|
1215
1265
|
<h3 id="height-sizing">Height sizing</h3>
|
data/package.json
CHANGED
@@ -28,6 +28,27 @@
|
|
28
28
|
</div>
|
29
29
|
</div>
|
30
30
|
|
31
|
+
{{bsy-input
|
32
|
+
currentFirstName
|
33
|
+
label="Large first name with icon"
|
34
|
+
update=(action (mut currentFirstName))
|
35
|
+
inputId="firstNameLarge"
|
36
|
+
icon="owner"
|
37
|
+
size="lg"}}
|
38
|
+
{{bsy-input
|
39
|
+
currentFirstName
|
40
|
+
label="Default first name with icon"
|
41
|
+
update=(action (mut currentFirstName))
|
42
|
+
inputId="firstNameDefault"
|
43
|
+
icon="owner"}}
|
44
|
+
{{bsy-input
|
45
|
+
currentFirstName
|
46
|
+
label="Small first name with icon"
|
47
|
+
update=(action (mut currentFirstName))
|
48
|
+
inputId="firstNameSmall"
|
49
|
+
icon="owner"
|
50
|
+
size="sm"}}
|
51
|
+
|
31
52
|
{{#bsy-input-addon}}
|
32
53
|
{{#bsy-input-addon.addon}}${{/bsy-input-addon.addon}}
|
33
54
|
{{bsy-input-addon.input currentAmount
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: bootstrap-bookingsync-sass
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 1.0.
|
4
|
+
version: 1.0.5
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Sebastien Grosjean
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2017-
|
11
|
+
date: 2017-10-01 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: bootstrap-sass
|