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

Sign up to get free protection for your applications and to get access to all the features.
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