bootstrap-bookingsync-sass 1.0.0.beta10 → 1.0.0.beta11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: da708c567eaf2008e54437569c7f690c33c64653
4
- data.tar.gz: 1ff15d25c6c600182b85727a842ae5954a28d037
3
+ metadata.gz: 4d69df517162de543ef4ff501a041c7a5c4962cb
4
+ data.tar.gz: 12e8bb010b7aae7ea8c491522645dd81731de051
5
5
  SHA512:
6
- metadata.gz: 887ee0a5d74c3e749b219ab9a8cd8c3d730b2018a0c6b1458e9f38cddfde664fbbb868e2669a410df02e5f5350901855170d32837512c4858ce1ec871bb1c624
7
- data.tar.gz: 82fd1c9c965bd153d2dbebc99f39f90bc48fe85e97b33084b7419a7643cc1ea05d0daa9b38f9216e51ec556ad5e0de7dcef2c63c2cc7043b7f4e201f9aa84b4c
6
+ metadata.gz: ebb3a175e8e1d53bfafb3a8739a46d50e82c5fb58cc52a2bcc9a4b8ad5fb27e8942302a15806b3c26442b051cbf47863fce93a47557f96288404cc2f5ecc7c94
7
+ data.tar.gz: 8f2f01778284028eec0ece16daa6b9bd6f64a30b1f4da1f58674dac08976400f07d43aebf36d7331e8999e18ed01eb62405a2048893cdde4c252c95fff0fb2ec
data/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  ### master
2
2
 
3
+ ### 1.0.0.beta11 - 2016-09-03
4
+
5
+ * improvements
6
+ * add support for `.alert-container` and `.alert-container-top` used for flash messages.
7
+
8
+ * bug fixes
9
+ * fix `.alert` colors and style
10
+
3
11
  ### 1.0.0.beta10 - 2016-08-23
4
12
 
5
13
  * breaking changes
@@ -73,6 +73,7 @@
73
73
  @import "bookingsync/modals";
74
74
  @import "bookingsync/annotated-sections";
75
75
  @import "bookingsync/icons";
76
+ @import "bookingsync/alerts";
76
77
 
77
78
  @import "bookingsync/chosen";
78
79
  @import "bookingsync/ember-power-select";
@@ -0,0 +1,20 @@
1
+ .alert-container-top {
2
+ position: absolute;
3
+ top: 0;
4
+ left: 0;
5
+ text-align: center;
6
+ width: 100%;
7
+ z-index: 2000;
8
+
9
+ .alert {
10
+ display: inline-block;
11
+ margin-bottom: 0;
12
+ padding: 5px (13 + $alert-padding) 5px $alert-padding;
13
+ border-top: 0;
14
+ border-radius: 0 0 $alert-border-radius $alert-border-radius;
15
+ }
16
+
17
+ .alert-dismissible .close {
18
+ right: -15px;
19
+ }
20
+ }
@@ -33,3 +33,21 @@
33
33
  margin-top: - ($navbar-height + 1); // for the navbar-fixed-top border
34
34
  padding-top: $navbar-height + 1 + $sheet-padding; // for the navbar-fixed-top border
35
35
  }
36
+
37
+ .sheet > .alert:first-child {
38
+ margin: (-1 * $sheet-padding);
39
+ margin-bottom: $sheet-padding;
40
+ border-radius: $sheet-border-radius $sheet-border-radius 0 0;
41
+ border-top: 0;
42
+ border-left: 0;
43
+ border-right: 0;
44
+ }
45
+
46
+ .sheet > .alert:last-child {
47
+ margin: (-1 * $sheet-padding);
48
+ margin-top: $sheet-padding;
49
+ border-radius: 0 0 $sheet-border-radius $sheet-border-radius;
50
+ border-bottom: 0;
51
+ border-left: 0;
52
+ border-right: 0;
53
+ }
@@ -370,3 +370,15 @@ $breadcrumb-active-color: $headings-color !default;
370
370
  $breadcrumb-icon-color: $gray-light !default;
371
371
  $breadcrumb-link-color: $gray-light !default;
372
372
  $breadcrumb-link-hover-color: $breadcrumb-link-color !default;
373
+
374
+
375
+ //== Alerts
376
+ //
377
+ $alert-success-bg: lighten($brand-success, 45%) !default;
378
+ $alert-success-border: lighten($brand-success, 45%) !default;
379
+ $alert-info-bg: lighten($brand-info, 50%) !default;
380
+ $alert-info-border: lighten($brand-info, 50%) !default;
381
+ $alert-warning-bg: lighten($brand-warning, 35%) !default;
382
+ $alert-warning-border: lighten($brand-warning, 35%) !default;
383
+ $alert-danger-bg: lighten($brand-danger, 35%) !default;
384
+ $alert-danger-border: lighten($brand-danger, 35%) !default;
data/docs/Gemfile.lock CHANGED
@@ -1,7 +1,7 @@
1
1
  PATH
2
2
  remote: ../
3
3
  specs:
4
- bootstrap-bookingsync-sass (1.0.0.beta10)
4
+ bootstrap-bookingsync-sass (1.0.0.beta11)
5
5
  bootstrap-sass (>= 3.3.5)
6
6
 
7
7
  GEM
@@ -9,9 +9,9 @@ GEM
9
9
  specs:
10
10
  adsf (1.2.0)
11
11
  rack (>= 1.0.0)
12
- autoprefixer-rails (6.4.0.2)
12
+ autoprefixer-rails (6.4.0.3)
13
13
  execjs
14
- bootstrap-sass (3.3.6)
14
+ bootstrap-sass (3.3.7)
15
15
  autoprefixer-rails (>= 5.2.1)
16
16
  sass (>= 3.3.4)
17
17
  coderay (1.1.1)
@@ -8,6 +8,9 @@
8
8
  <li><%= link_to("Nested list group with icons", "#nested-list-group-with-icons",
9
9
  class: "list-group-item") %></li>
10
10
  <li><%= link_to("Dropdown", "#dropdown", class: "list-group-item") %></li>
11
+ <li><%= link_to("Alerts", "#alerts", class: "list-group-item") %></li>
12
+ <li><%= link_to("Dismissible alerts", "#dismissible-alerts", class: "list-group-item") %></li>
13
+ <li><%= link_to("Links in alerts", "#links-in-alerts", class: "list-group-item") %></li>
11
14
  <li><%= link_to("Sheet", "#sheet", class: "list-group-item") %></li>
12
15
  <li><%= link_to("Sheet with header", "#sheet-with-header", class: "list-group-item") %></li>
13
16
  <li><%= link_to("Sheet with tabs", "#sheet-with-tabs", class: "list-group-item") %></li>
@@ -15,8 +18,10 @@
15
18
  class: "list-group-item") %></li>
16
19
  <li><%= link_to("Sheet with auto-stackable tabs", "#sheet-with-auto-stackable-tabs",
17
20
  class: "list-group-item") %></li>
21
+ <li><%= link_to("Sheet with alerts", "#sheet-with-alerts", class: "list-group-item") %></li>
18
22
  <li><%= link_to("Chosen select", "#chosen-select", class: "list-group-item") %></li>
19
- <li><%= link_to("Chosen multiple select", "#chosen-multiple-select", class: "list-group-item") %></li>
23
+ <li><%= link_to("Chosen multiple select", "#chosen-multiple-select",
24
+ class: "list-group-item") %></li>
20
25
  <li><%= link_to("Switch", "#switch", class: "list-group-item") %></li>
21
26
  <li><%= link_to("Disabled switch", "#disabled-switch", class: "list-group-item") %></li>
22
27
  <li><%= link_to("Modal", "#modal", class: "list-group-item") %></li>
@@ -0,0 +1,105 @@
1
+ <div class="example">
2
+ <div class="sheet-header">
3
+ <h3 id="alerts">Alerts</h3>
4
+ </div>
5
+ <p>Wrap any text and an optional dismiss button in <code>.alert</code> and one of the four contextual classes (e.g., <code>.alert-success</code>) for basic alert messages.</p>
6
+ <div class="bs-example bs-sheet" data-example-id="alerts">
7
+ <div class="alert alert-success" role="alert">
8
+ <strong>Well done!</strong> You successfully read this important alert message.
9
+ </div>
10
+ <div class="alert alert-info" role="alert">
11
+ <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
12
+ </div>
13
+ <div class="alert alert-warning" role="alert">
14
+ <strong>Warning!</strong> Better check yourself, you're not looking too good.
15
+ </div>
16
+ <div class="alert alert-danger" role="alert">
17
+ <strong>Oh snap!</strong> Change a few things up and try submitting again.
18
+ </div>
19
+ </div>
20
+ </div>
21
+ ~~~ html
22
+ <div class="alert alert-success" role="alert">
23
+ <strong>Well done!</strong> You successfully read this important alert message.
24
+ </div>
25
+ <div class="alert alert-info" role="alert">
26
+ <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
27
+ </div>
28
+ <div class="alert alert-warning" role="alert">
29
+ <strong>Warning!</strong> Better check yourself, you're not looking too good.
30
+ </div>
31
+ <div class="alert alert-danger" role="alert">
32
+ <strong>Oh snap!</strong> Change a few things up and try submitting again.
33
+ </div>
34
+ ~~~
35
+
36
+ <div class="example">
37
+ <div class="sheet-header">
38
+ <h3 id="dismissible-alerts">Dismissible alerts</h3>
39
+ </div>
40
+ <p>Build on any alert by adding an optional <code>.alert-dismissible</code> and close button.</p>
41
+
42
+ <div class="bs-callout bs-callout-warning">
43
+ <h4>Ensure proper behavior across all devices</h4>
44
+ <p>
45
+ Be sure to use the <code>&lt;button&gt;</code> element with the <code>data-dismiss="alert"</code> data attribute.
46
+ </p>
47
+ </div>
48
+
49
+ <div class="bs-example bs-sheet" data-example-id="dismissible-alerts">
50
+ <div class="alert alert-warning alert-dismissible" role="alert">
51
+ <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
52
+ <strong>Warning!</strong> Better check yourself, you're not looking too good.
53
+ </div>
54
+ </div>
55
+ </div>
56
+ ~~~ html
57
+ <div class="alert alert-warning alert-dismissible" role="alert">
58
+ <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
59
+ <strong>Warning!</strong> Better check yourself, you're not looking too good.
60
+ </div>
61
+ ~~~
62
+
63
+ <div class="example">
64
+ <div class="sheet-header">
65
+ <h3 id="links-in-alerts">Links in alerts</h3>
66
+ </div>
67
+ <p>Use the <code>.alert-link</code> utility class to quickly provide matching colored links within any alert.
68
+ </p>
69
+
70
+ <div class="bs-callout bs-callout-warning">
71
+ <h4>Ensure proper behavior across all devices</h4>
72
+ <p>
73
+ Be sure to use the <code>&lt;button&gt;</code> element with the <code>data-dismiss="alert"</code> data attribute.
74
+ </p>
75
+ </div>
76
+
77
+ <div class="bs-example bs-sheet" data-example-id="dismissible-alerts">
78
+ <div class="alert alert-success" role="alert">
79
+ <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message.</a>
80
+ </div>
81
+ <div class="alert alert-info" role="alert">
82
+ <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
83
+ </div>
84
+ <div class="alert alert-warning" role="alert">
85
+ <strong>Warning!</strong> Better check yourself, you're <a href="#" class="alert-link">not looking too good</a>.
86
+ </div>
87
+ <div class="alert alert-danger" role="alert">
88
+ <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
89
+ </div>
90
+ </div>
91
+ </div>
92
+ ~~~ html
93
+ <div class="alert alert-success" role="alert">
94
+ <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message.</a>
95
+ </div>
96
+ <div class="alert alert-info" role="alert">
97
+ <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
98
+ </div>
99
+ <div class="alert alert-warning" role="alert">
100
+ <strong>Warning!</strong> Better check yourself, you're <a href="#" class="alert-link">not looking too good</a>.
101
+ </div>
102
+ <div class="alert alert-danger" role="alert">
103
+ <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
104
+ </div>
105
+ ~~~
@@ -236,3 +236,39 @@
236
236
  </div>
237
237
  </div>
238
238
  ~~~
239
+
240
+ <div class="example">
241
+ <div class="sheet-header">
242
+ <h3 id="sheet-with-alerts">Sheet with alerts</h3>
243
+ </div>
244
+ <div class="bs-example bs-sheet" data-example-id="sheet-with-alerts">
245
+ <div class="sheet">
246
+ <div class="alert alert-success" role="alert">
247
+ <strong>Well done!</strong> You successfully read this important alert message.
248
+ </div>
249
+ <p>Text...</p>
250
+ <div class="alert alert-success" role="alert">
251
+ <strong>Well done!</strong> You successfully read this important alert message.
252
+ </div>
253
+ <p>Text...</p>
254
+ <div class="alert alert-success" role="alert">
255
+ <strong>Well done!</strong> You successfully read this important alert message.
256
+ </div>
257
+ </div>
258
+ </div>
259
+ </div>
260
+ ~~~ html
261
+ <div class="sheet">
262
+ <div class="alert alert-success" role="alert">
263
+ <strong>Well done!</strong> You successfully read this important alert message.
264
+ </div>
265
+ <p>Text...</p>
266
+ <div class="alert alert-success" role="alert">
267
+ <strong>Well done!</strong> You successfully read this important alert message.
268
+ </div>
269
+ <p>Text...</p>
270
+ <div class="alert alert-success" role="alert">
271
+ <strong>Well done!</strong> You successfully read this important alert message.
272
+ </div>
273
+ </div>
274
+ ~~~
@@ -5,6 +5,7 @@ section_name: "Components"
5
5
  <%= items['/components/menu.*'].compiled_content %>
6
6
  <%= items['/components/list-group.*'].compiled_content %>
7
7
  <%= items['/components/dropdown.*'].compiled_content %>
8
+ <%= items['/components/alerts.*'].compiled_content %>
8
9
  <%= items['/components/sheet.*'].compiled_content %>
9
10
  <%= items['/components/chosen.*'].compiled_content %>
10
11
  <%= items['/components/switch.*'].compiled_content %>
@@ -9,6 +9,8 @@
9
9
  class: "list-group-item") %></li>
10
10
  <li><%= link_to("Nested section", "#nested-section",
11
11
  class: "list-group-item") %></li>
12
+ <li><%= link_to("Section with flash", "#section-with-flash",
13
+ class: "list-group-item") %></li>
12
14
  <li><%= link_to("Two columns", "#two-columns",
13
15
  class: "list-group-item") %></li>
14
16
  <li><%= link_to("Tabulated content", "#tabulated-content",
@@ -292,6 +292,57 @@
292
292
  </section>
293
293
  ~~~
294
294
 
295
+ <div class="example example-responsive">
296
+ <div class="sheet-header">
297
+ <h3 id="section-with-flash">Section with flash</h3>
298
+ </div>
299
+
300
+ <div class="bs-example bs-sheet bs-example-composition-body bs-example-iframe-container-desktop"
301
+ data-example-id="section-with-flash">
302
+ <iframe class="bs-example-iframe" src="/embed/section_with_flash/index.html"
303
+ frameborder="0"></iframe>
304
+ </div>
305
+ </div>
306
+ ~~~ html
307
+ <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
308
+ <div class="container-fluid">
309
+ <div class="navbar-header">
310
+ <button type="button" class="navbar-toggle navbar-toggle-context"
311
+ data-toggle="collapse" data-target=".navbar-top-collapse">
312
+ <span class="sr-only">Toggle Navigation</span>
313
+ <span class="icon-bar"></span>
314
+ <span class="icon-bar"></span>
315
+ <span class="icon-bar"></span>
316
+ </button>
317
+ <div class="navbar-brand-container">
318
+ <span class="navbar-brand">
319
+ <h1 class="text-overflow"><i class="icon-rental"></i> Rentals</h1>
320
+ </span>
321
+ </div>
322
+ </div>
323
+ <div class="collapse navbar-collapse navbar-top-collapse">
324
+ <div class="navbar-right">
325
+ <button class="btn btn-secondary navbar-btn" type="button">Button</button>
326
+ <button class="btn btn-primary navbar-btn" type="button">Call to action</button>
327
+ </div>
328
+ </div>
329
+ </div>
330
+ </nav>
331
+ <section class="main-content">
332
+ <div class="alert-container alert-container-top">
333
+ <div class="alert alert-warning alert-dismissible" role="alert">
334
+ <button type="button" class="close" data-dismiss="alert" aria-label="Close">
335
+ <span aria-hidden="true">&times;</span>
336
+ </button>
337
+ <strong>Warning!</strong> Better check yourself, you're not looking too good.
338
+ </div>
339
+ </div>
340
+ <div class="sheet">
341
+ <p>Body</p>
342
+ </div>
343
+ </section>
344
+ ~~~
345
+
295
346
  <div class="example example-responsive">
296
347
  <div class="sheet-header">
297
348
  <h3 id="two-columns">Two columns</h3>
@@ -0,0 +1,38 @@
1
+
2
+ <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
3
+ <div class="container-fluid">
4
+ <div class="navbar-header">
5
+ <button type="button" class="navbar-toggle navbar-toggle-context"
6
+ data-toggle="collapse" data-target=".navbar-top-collapse">
7
+ <span class="sr-only">Toggle Navigation</span>
8
+ <span class="icon-bar"></span>
9
+ <span class="icon-bar"></span>
10
+ <span class="icon-bar"></span>
11
+ </button>
12
+ <div class="navbar-brand-container">
13
+ <span class="navbar-brand">
14
+ <h1 class="text-overflow"><i class="icon-rental"></i> Rentals</h1>
15
+ </span>
16
+ </div>
17
+ </div>
18
+ <div class="collapse navbar-collapse navbar-top-collapse">
19
+ <div class="navbar-right">
20
+ <button class="btn btn-secondary navbar-btn" type="button">Button</button>
21
+ <button class="btn btn-primary navbar-btn" type="button">Call to action</button>
22
+ </div>
23
+ </div>
24
+ </div>
25
+ </nav>
26
+ <section class="main-content">
27
+ <div class="alert-container alert-container-top">
28
+ <div class="alert alert-warning alert-dismissible" role="alert">
29
+ <button type="button" class="close" data-dismiss="alert" aria-label="Close">
30
+ <span aria-hidden="true">&times;</span>
31
+ </button>
32
+ <strong>Warning!</strong> Better check yourself, you're not looking too good.
33
+ </div>
34
+ </div>
35
+ <div class="sheet">
36
+ <p>Body</p>
37
+ </div>
38
+ </section>
@@ -1,5 +1,5 @@
1
1
  module Bootstrap
2
2
  module BookingSync
3
- VERSION = '1.0.0.beta10'
3
+ VERSION = '1.0.0.beta11'
4
4
  end
5
5
  end
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.0.beta10
4
+ version: 1.0.0.beta11
5
5
  platform: ruby
6
6
  authors:
7
7
  - Sebastien Grosjean
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2016-08-23 00:00:00.000000000 Z
11
+ date: 2016-09-02 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: bootstrap-sass
@@ -66,6 +66,7 @@ files:
66
66
  - assets/javascripts/bootstrap-bookingsync-sprockets.js
67
67
  - assets/stylesheets/_bootstrap-bookingsync-sprockets.scss
68
68
  - assets/stylesheets/_bootstrap-bookingsync.scss
69
+ - assets/stylesheets/bookingsync/_alerts.scss
69
70
  - assets/stylesheets/bookingsync/_annotated-sections.scss
70
71
  - assets/stylesheets/bookingsync/_buttons.scss
71
72
  - assets/stylesheets/bookingsync/_chosen.scss
@@ -134,6 +135,7 @@ files:
134
135
  - docs/content/buttons/buttons.md
135
136
  - docs/content/components.html
136
137
  - docs/content/components/_navbar.html
138
+ - docs/content/components/alerts.md
137
139
  - docs/content/components/chosen.md
138
140
  - docs/content/components/dropdown.md
139
141
  - docs/content/components/list-group.md
@@ -157,6 +159,7 @@ files:
157
159
  - docs/content/embed/menu_for_apps.html
158
160
  - docs/content/embed/nested_section.html
159
161
  - docs/content/embed/section.html
162
+ - docs/content/embed/section_with_flash.html
160
163
  - docs/content/embed/tabulated_content.html
161
164
  - docs/content/embed/two_columns.html
162
165
  - docs/content/forms.html