marionette-modal 1.0.0.8

Sign up to get free protection for your applications and to get access to all the features.
Files changed (51) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +36 -0
  3. data/Gemfile +4 -0
  4. data/Gruntfile.coffee +111 -0
  5. data/LICENSE +22 -0
  6. data/README.md +42 -0
  7. data/Rakefile +1 -0
  8. data/dist/backbone.marionette.modals-min.js +1 -0
  9. data/dist/backbone.marionette.modals.js +104 -0
  10. data/dist/backbone.modal-min.js +1 -0
  11. data/dist/backbone.modal.js +382 -0
  12. data/dist/marionette.modal-bundled-min.js +1 -0
  13. data/dist/marionette.modal-bundled.js +858 -0
  14. data/dist/marionette.modal-min.js +1 -0
  15. data/dist/marionette.modal.css +24 -0
  16. data/dist/marionette.modal.js +370 -0
  17. data/dist/marionette.modal.theme.css +324 -0
  18. data/examples/1_single_view.html +71 -0
  19. data/examples/2_tab_based.html +104 -0
  20. data/examples/3_stacked_modal_with_marionette.html +105 -0
  21. data/examples/4_wizard.html +132 -0
  22. data/examples/css/style.css +45 -0
  23. data/examples/img/tab-icons.png +0 -0
  24. data/examples/style.css +35 -0
  25. data/examples/vendor/backbone.js +1591 -0
  26. data/examples/vendor/backbone.marionette.modals.js +104 -0
  27. data/examples/vendor/backbone.modal.css +24 -0
  28. data/examples/vendor/backbone.modal.js +382 -0
  29. data/examples/vendor/backbone.modal.theme.css +324 -0
  30. data/examples/vendor/jquery-1.9.1.js +9597 -0
  31. data/examples/vendor/marionette.js +2466 -0
  32. data/examples/vendor/marionette.modal.css +24 -0
  33. data/examples/vendor/marionette.modal.js +370 -0
  34. data/examples/vendor/marionette.modal.theme.css +324 -0
  35. data/examples/vendor/underscore.js +1314 -0
  36. data/lib/marionette-modal/version.rb +3 -0
  37. data/lib/marionette-modal.rb +22 -0
  38. data/marionette-modal.gemspec +23 -0
  39. data/package.json +19 -0
  40. data/src/backbone.marionette.modals.coffee +67 -0
  41. data/src/backbone.modal.coffee +253 -0
  42. data/src/marionette.modal.coffee +248 -0
  43. data/src/marionette.modal.sass +26 -0
  44. data/src/marionette.modal.theme.sass +486 -0
  45. data/src/style.sass +48 -0
  46. data/test/spec/backbone.marionette.modals.spec.js +120 -0
  47. data/test/spec/backbone.modal.spec.js +224 -0
  48. data/test/spec.html +41 -0
  49. data/test/src/backbone.marionette.modals.spec.coffee +56 -0
  50. data/test/src/backbone.modal.spec.coffee +139 -0
  51. metadata +128 -0
@@ -0,0 +1,24 @@
1
+ /* Modal positioning */
2
+ .bbm-wrapper {
3
+ box-sizing: border-box;
4
+ position: absolute;
5
+ left: 0;
6
+ top: 0;
7
+ width: 100%;
8
+ height: 100%;
9
+ z-index: 100;
10
+ padding: 50px 10px;
11
+ overflow-x: auto;
12
+ overflow-y: scroll; }
13
+ .bbm-wrapper * {
14
+ box-sizing: border-box; }
15
+
16
+ .bbm-modal {
17
+ border-radius: 3px;
18
+ margin: auto;
19
+ width: auto;
20
+ max-width: 550px; }
21
+
22
+ .bbm-views {
23
+ width: 100%;
24
+ box-sizing: border-box; }
@@ -0,0 +1,370 @@
1
+ (function() {
2
+ var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
3
+ __hasProp = {}.hasOwnProperty,
4
+ __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
5
+
6
+ if (typeof Marionette === "undefined" || Marionette === null) {
7
+ throw new Error("Marionette is not defined. Please include the latest version from https://github.com/marionettejs/backbone.marionette");
8
+ }
9
+
10
+ Marionette.Modal = (function(_super) {
11
+ __extends(Modal, _super);
12
+
13
+ Modal.prototype.prefix = 'bbm';
14
+
15
+ function Modal() {
16
+ this.triggerCancel = __bind(this.triggerCancel, this);
17
+ this.triggerSubmit = __bind(this.triggerSubmit, this);
18
+ this.triggerView = __bind(this.triggerView, this);
19
+ this.clickOutside = __bind(this.clickOutside, this);
20
+ this.checkKey = __bind(this.checkKey, this);
21
+ this.args = Array.prototype.slice.apply(arguments);
22
+ Marionette.View.prototype.constructor.apply(this, this.args);
23
+ this.setUIElements();
24
+ this.delegateModalEvents();
25
+ }
26
+
27
+ Modal.prototype.render = function(options) {
28
+ var data, _ref,
29
+ _this = this;
30
+ if (options == null) {
31
+ options = {};
32
+ }
33
+ data = this.serializeData();
34
+ this.$el.addClass("" + this.prefix + "-wrapper");
35
+ this.modalEl = Marionette.$('<div />').addClass("" + this.prefix + "-modal");
36
+ if (this.template) {
37
+ this.modalEl.html(this.template(data));
38
+ }
39
+ this.$el.html(this.modalEl);
40
+ Marionette.$('body').on('keyup', this.checkKey);
41
+ Marionette.$('body').on('click', this.clickOutside);
42
+ if (this.viewContainer) {
43
+ this.viewContainerEl = this.modalEl.find(this.viewContainer);
44
+ this.viewContainerEl.addClass("" + this.prefix + "-modal__views");
45
+ } else {
46
+ this.viewContainerEl = this.modalEl;
47
+ }
48
+ this.$el.show();
49
+ if (((_ref = this.views) != null ? _ref.length : void 0) > 0) {
50
+ this.openAt(0);
51
+ }
52
+ if (typeof this.onRender === "function") {
53
+ this.onRender();
54
+ }
55
+ this.modalEl.css({
56
+ opacity: 0
57
+ });
58
+ this.$el.fadeIn({
59
+ duration: 100,
60
+ complete: function() {
61
+ return _this.modalEl.css({
62
+ opacity: 1
63
+ }).addClass("" + _this.prefix + "-modal--open");
64
+ }
65
+ });
66
+ return this;
67
+ };
68
+
69
+ Modal.prototype.setUIElements = function() {
70
+ var _ref;
71
+ this.template = Marionette.getOption(this, 'template');
72
+ this.views = Marionette.getOption(this, 'views');
73
+ if ((_ref = this.views) != null) {
74
+ _ref.length = _.size(this.views);
75
+ }
76
+ this.viewContainer = Marionette.getOption(this, 'viewContainer');
77
+ this.$el.hide();
78
+ if (_.isUndefined(this.template) && _.isUndefined(this.views)) {
79
+ throw new Error('No template or views defined for Backbone.Modal');
80
+ }
81
+ if (this.template && this.views && _.isUndefined(this.viewContainer)) {
82
+ throw new Error('No viewContainer defined for Backbone.Modal');
83
+ }
84
+ };
85
+
86
+ Modal.prototype.serializeData = function() {
87
+ var data;
88
+ data = {};
89
+ if (this.model) {
90
+ data = _.extend(data, this.model.toJSON());
91
+ }
92
+ if (this.collection) {
93
+ data = _.extend(data, {
94
+ items: this.collection.toJSON()
95
+ });
96
+ }
97
+ return data;
98
+ };
99
+
100
+ Modal.prototype.delegateModalEvents = function() {
101
+ var cancelEl, key, match, selector, submitEl, trigger, _results;
102
+ this.active = true;
103
+ cancelEl = Marionette.getOption(this, 'cancelEl');
104
+ submitEl = Marionette.getOption(this, 'submitEl');
105
+ if (submitEl) {
106
+ this.$el.on('click', submitEl, this.triggerSubmit);
107
+ }
108
+ if (cancelEl) {
109
+ this.$el.on('click', cancelEl, this.triggerCancel);
110
+ }
111
+ _results = [];
112
+ for (key in this.views) {
113
+ if (key !== 'length') {
114
+ match = key.match(/^(\S+)\s*(.*)$/);
115
+ trigger = match[1];
116
+ selector = match[2];
117
+ _results.push(this.$el.on(trigger, selector, this.views[key], this.triggerView));
118
+ } else {
119
+ _results.push(void 0);
120
+ }
121
+ }
122
+ return _results;
123
+ };
124
+
125
+ Modal.prototype.undelegateModalEvents = function() {
126
+ var cancelEl, key, match, selector, submitEl, trigger, _results;
127
+ this.active = false;
128
+ cancelEl = this.getOption('cancelEl');
129
+ submitEl = this.getOption('submitEl');
130
+ if (submitEl) {
131
+ this.$el.off('click', submitEl, this.triggerSubmit);
132
+ }
133
+ if (cancelEl) {
134
+ this.$el.off('click', cancelEl, this.triggerCancel);
135
+ }
136
+ _results = [];
137
+ for (key in this.views) {
138
+ if (key !== 'length') {
139
+ match = key.match(/^(\S+)\s*(.*)$/);
140
+ trigger = match[1];
141
+ selector = match[2];
142
+ _results.push(this.$el.off(trigger, selector, this.views[key], this.triggerView));
143
+ } else {
144
+ _results.push(void 0);
145
+ }
146
+ }
147
+ return _results;
148
+ };
149
+
150
+ Modal.prototype.checkKey = function(e) {
151
+ if (this.active) {
152
+ switch (e.keyCode) {
153
+ case 27:
154
+ return this.triggerCancel();
155
+ case 13:
156
+ return this.triggerSubmit();
157
+ }
158
+ }
159
+ };
160
+
161
+ Modal.prototype.clickOutside = function(e) {
162
+ if (Marionette.$(e.target).hasClass("" + this.prefix + "-wrapper") && this.active) {
163
+ return this.triggerCancel(null, true);
164
+ }
165
+ };
166
+
167
+ Modal.prototype.buildView = function(viewType) {
168
+ var view;
169
+ if (!viewType) {
170
+ return;
171
+ }
172
+ if (_.isFunction(viewType)) {
173
+ view = new viewType(this.args[0]);
174
+ if (view instanceof Backbone.View) {
175
+ return {
176
+ el: view.render().$el,
177
+ view: view
178
+ };
179
+ } else {
180
+ return {
181
+ el: viewType(this.args[0])
182
+ };
183
+ }
184
+ }
185
+ return {
186
+ view: viewType,
187
+ el: viewType.$el
188
+ };
189
+ };
190
+
191
+ Modal.prototype.triggerView = function(e) {
192
+ var index, instance, key, options;
193
+ if (e != null) {
194
+ if (typeof e.preventDefault === "function") {
195
+ e.preventDefault();
196
+ }
197
+ }
198
+ options = e.data;
199
+ instance = this.buildView(options.view);
200
+ if (this.currentView) {
201
+ this.previousView = this.currentView;
202
+ }
203
+ this.currentView = instance.view || instance.el;
204
+ index = 0;
205
+ for (key in this.views) {
206
+ if (options.view === this.views[key].view) {
207
+ this.currentIndex = index;
208
+ }
209
+ index++;
210
+ }
211
+ if (options.onActive) {
212
+ if (_.isFunction(options.onActive)) {
213
+ options.onActive(this);
214
+ } else if (_.isString(options.onActive)) {
215
+ this[options.onActive].call(this, options);
216
+ }
217
+ }
218
+ if (this.shouldAnimate) {
219
+ return this.animateToView(instance.el);
220
+ } else {
221
+ this.shouldAnimate = true;
222
+ return this.$(this.viewContainerEl).html(instance.el);
223
+ }
224
+ };
225
+
226
+ Modal.prototype.animateToView = function(view) {
227
+ var container, newHeight, previousHeight, style, tester, _ref,
228
+ _this = this;
229
+ style = {
230
+ position: 'relative',
231
+ top: -9999,
232
+ left: -9999
233
+ };
234
+ tester = Marionette.$('<tester/>').css(style);
235
+ tester.html(this.$el.clone().css(style));
236
+ if (Marionette.$('tester').length !== 0) {
237
+ Marionette.$('tester').replaceWith(tester);
238
+ } else {
239
+ Marionette.$('body').append(tester);
240
+ }
241
+ if (this.viewContainer) {
242
+ container = tester.find(this.viewContainer);
243
+ } else {
244
+ container = tester.find("." + this.prefix + "-modal");
245
+ }
246
+ container.removeAttr('style');
247
+ previousHeight = container.outerHeight();
248
+ container.html(view);
249
+ newHeight = container.outerHeight();
250
+ if (previousHeight === newHeight) {
251
+ this.$(this.viewContainerEl).html(view);
252
+ return (_ref = this.previousView) != null ? typeof _ref.close === "function" ? _ref.close() : void 0 : void 0;
253
+ } else {
254
+ this.$(this.viewContainerEl).css({
255
+ opacity: 0
256
+ });
257
+ return this.$(this.viewContainerEl).animate({
258
+ height: newHeight
259
+ }, 100, function() {
260
+ var _ref1;
261
+ _this.$(_this.viewContainerEl).css({
262
+ opacity: 1
263
+ }).removeAttr('style');
264
+ _this.$(_this.viewContainerEl).html(view);
265
+ return (_ref1 = _this.previousView) != null ? typeof _ref1.close === "function" ? _ref1.close() : void 0 : void 0;
266
+ });
267
+ }
268
+ };
269
+
270
+ Modal.prototype.triggerSubmit = function(e) {
271
+ if (!e) {
272
+ return;
273
+ }
274
+ if (e != null) {
275
+ e.preventDefault();
276
+ }
277
+ if (this.beforeSubmit) {
278
+ if (this.beforeSubmit() === false) {
279
+ return;
280
+ }
281
+ }
282
+ if (typeof this.submit === "function") {
283
+ this.submit();
284
+ }
285
+ if (this.regionEnabled) {
286
+ return this.trigger('modal:close');
287
+ } else {
288
+ return this.close();
289
+ }
290
+ };
291
+
292
+ Modal.prototype.triggerCancel = function(e) {
293
+ if (e != null) {
294
+ e.preventDefault();
295
+ }
296
+ if (this.beforeCancel) {
297
+ if (this.beforeCancel() === false) {
298
+ return;
299
+ }
300
+ }
301
+ if (typeof this.cancel === "function") {
302
+ this.cancel();
303
+ }
304
+ if (this.regionEnabled) {
305
+ return this.triggerMethod('modal:close');
306
+ } else {
307
+ return this.close();
308
+ }
309
+ };
310
+
311
+ Modal.prototype.close = function() {
312
+ var _this = this;
313
+ Marionette.$('body').off('keyup', this.checkKey);
314
+ Marionette.$('body').off('click', this.clickOutside);
315
+ if (typeof this.onClose === "function") {
316
+ this.onClose();
317
+ }
318
+ this.shouldAnimate = false;
319
+ this.modalEl.addClass("" + this.prefix + "-modal--close");
320
+ this.$el.fadeOut({
321
+ duration: 200
322
+ });
323
+ return _.delay(function() {
324
+ var _ref;
325
+ if ((_ref = _this.currentView) != null) {
326
+ if (typeof _ref.remove === "function") {
327
+ _ref.remove();
328
+ }
329
+ }
330
+ return _this.remove();
331
+ }, 200);
332
+ };
333
+
334
+ Modal.prototype.openAt = function(index) {
335
+ var i, key, view;
336
+ i = 0;
337
+ for (key in this.views) {
338
+ if (key !== 'length') {
339
+ if (i === index) {
340
+ view = this.views[key];
341
+ }
342
+ i++;
343
+ }
344
+ }
345
+ if (view) {
346
+ this.currentIndex = index;
347
+ this.triggerView({
348
+ data: view
349
+ });
350
+ }
351
+ return this;
352
+ };
353
+
354
+ Modal.prototype.next = function() {
355
+ if (this.currentIndex + 1 < this.views.length) {
356
+ return this.openAt(this.currentIndex + 1);
357
+ }
358
+ };
359
+
360
+ Modal.prototype.previous = function() {
361
+ if (this.currentIndex - 1 < this.views.length - 1) {
362
+ return this.openAt(this.currentIndex - 1);
363
+ }
364
+ };
365
+
366
+ return Modal;
367
+
368
+ })(Marionette.View);
369
+
370
+ }).call(this);
@@ -0,0 +1,324 @@
1
+ .bbm-wrapper {
2
+ background: rgba(0, 0, 0, 0.75);
3
+ -webkit-transition: background-color 0.3s; }
4
+
5
+ .bbm-modal {
6
+ background: white;
7
+ box-shadow: 0 0px 6px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.9); }
8
+
9
+ /* BLOCKS */
10
+ .bbm-modal__topbar,
11
+ .bbm-modal__bottombar {
12
+ padding: 0 30px; }
13
+
14
+ .bbm-modal__topbar {
15
+ border-bottom: 1px solid rgba(0, 0, 0, 0.1);
16
+ margin-bottom: 30px; }
17
+ .bbm-modal__topbar > ul {
18
+ list-style: none;
19
+ text-align: center;
20
+ padding: 0;
21
+ margin: 0; }
22
+
23
+ .bbm-modal__tab {
24
+ display: inline-block;
25
+ padding: 15px 10px; }
26
+ .bbm-modal__tab a {
27
+ font-size: 16px;
28
+ font-weight: bold;
29
+ color: #999999; }
30
+ .bbm-modal__tab a:hover, .bbm-modal__tab a.active {
31
+ color: #222222; }
32
+
33
+ .bbm-modal__title {
34
+ padding: 20px 0 19px;
35
+ margin: 0;
36
+ font-weight: normal;
37
+ font-size: 22px;
38
+ line-height: 1em;
39
+ color: #312d3a; }
40
+
41
+ .bbm-modal__section {
42
+ padding: 0 30px;
43
+ margin-top: 0px;
44
+ font-size: 16px;
45
+ line-height: 26px;
46
+ color: #575656; }
47
+ .bbm-modal__section p {
48
+ font-size: 16px;
49
+ line-height: 26px;
50
+ color: #575656; }
51
+ .bbm-modal__section p:last-child {
52
+ padding: 0;
53
+ margin-bottom: 0; }
54
+ .bbm-modal__section a {
55
+ color: #ff643c; }
56
+ .bbm-modal__section h3 {
57
+ margin: 0;
58
+ font-size: 20px;
59
+ line-height: 1em; }
60
+
61
+ .bbm-modal__bottombar {
62
+ border-top: 1px solid rgba(0, 0, 0, 0.1);
63
+ padding: 18px;
64
+ text-align: right;
65
+ margin-top: 30px; }
66
+
67
+ /* MODULES */
68
+ .bbm-group {
69
+ content: "";
70
+ display: table;
71
+ clear: both; }
72
+
73
+ .bbm-button {
74
+ display: inline-block;
75
+ color: rgba(49, 45, 58, 0.8);
76
+ text-decoration: none;
77
+ font-size: 14px;
78
+ font-weight: 500;
79
+ position: relative;
80
+ line-height: 1em;
81
+ padding: 10px 14px;
82
+ border-radius: 3px;
83
+ background: #fcfcfc;
84
+ background-image: -o-linear-gradient(rgba(70, 30, 170, 0) 0%, rgba(65, 61, 75, 0.15) 100%);
85
+ background-image: -moz-linear-gradient(rgba(70, 30, 170, 0) 0%, rgba(65, 61, 75, 0.15) 100%);
86
+ background-image: -webkit-linear-gradient(rgba(70, 30, 170, 0) 0%, rgba(65, 61, 75, 0.15) 100%);
87
+ background-image: -ms-linear-gradient(rgba(70, 30, 170, 0) 0%, rgba(65, 61, 75, 0.15) 100%);
88
+ background-image: linear-gradient(rgba(70, 30, 170, 0) 0%, rgba(65, 61, 75, 0.15) 100%);
89
+ -moz-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1), inset 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
90
+ -webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1), inset 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
91
+ box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1), inset 0px 0px 0px 1px rgba(0, 0, 0, 0.2); }
92
+ .bbm-button.inactive {
93
+ opacity: 0.5;
94
+ pointer-events: none; }
95
+ .bbm-button:active {
96
+ background-image: -o-linear-gradient(rgba(70, 30, 170, 0) 0%, rgba(65, 61, 75, 0.25) 100%);
97
+ background-image: -moz-linear-gradient(rgba(70, 30, 170, 0) 0%, rgba(65, 61, 75, 0.25) 100%);
98
+ background-image: -webkit-linear-gradient(rgba(70, 30, 170, 0) 0%, rgba(65, 61, 75, 0.25) 100%);
99
+ background-image: -ms-linear-gradient(rgba(70, 30, 170, 0) 0%, rgba(65, 61, 75, 0.25) 100%);
100
+ background-image: linear-gradient(rgba(70, 30, 170, 0) 0%, rgba(65, 61, 75, 0.25) 100%);
101
+ -moz-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), inset 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
102
+ -webkit-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), inset 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
103
+ box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), inset 0px 0px 0px 1px rgba(0, 0, 0, 0.2); }
104
+
105
+ /* ANIMATIONS */
106
+ /* Open modal */
107
+ @-webkit-keyframes bbm-open {
108
+ 0% {
109
+ -webkit-transform: matrix(0.99126, 0, 0, 0.99126, 0, 43.8813);
110
+ opacity: 0.1259; }
111
+
112
+ 4% {
113
+ -webkit-transform: matrix(0.99295, 0, 0, 0.99295, 0, 45.06809);
114
+ opacity: 0.29544; }
115
+
116
+ 8% {
117
+ -webkit-transform: matrix(0.99467, 0, 0, 0.99467, 0, 46.26922);
118
+ opacity: 0.46703; }
119
+
120
+ 12% {
121
+ -webkit-transform: matrix(0.99619, 0, 0, 0.99619, 0, 47.33355);
122
+ opacity: 0.61908; }
123
+
124
+ 16% {
125
+ -webkit-transform: matrix(0.99743, 0, 0, 0.99743, 0, 48.19991);
126
+ opacity: 0.74284; }
127
+
128
+ 20% {
129
+ -webkit-transform: matrix(0.99837, 0, 0, 0.99837, 0, 48.86067);
130
+ opacity: 0.83724; }
131
+
132
+ 24% {
133
+ -webkit-transform: matrix(0.99905, 0, 0, 0.99905, 0, 49.33658);
134
+ opacity: 0.90523; }
135
+
136
+ 28% {
137
+ -webkit-transform: matrix(0.99952, 0, 0, 0.99952, 0, 49.66049);
138
+ opacity: 0.9515; }
139
+
140
+ 32% {
141
+ -webkit-transform: matrix(0.99981, 0, 0, 0.99981, 0, 49.8675);
142
+ opacity: 0.98107; }
143
+
144
+ 36% {
145
+ -webkit-transform: matrix(0.99999, 0, 0, 0.99999, 0, 49.98966);
146
+ opacity: 0.99852; }
147
+
148
+ 40% {
149
+ -webkit-transform: matrix(1.00008, 0, 0, 1.00008, 0, 50.05361);
150
+ opacity: 1.00766; }
151
+
152
+ 44% {
153
+ -webkit-transform: matrix(1.00011, 0, 0, 1.00011, 0, 50.08);
154
+ opacity: 1.01143; }
155
+
156
+ 48% {
157
+ -webkit-transform: matrix(1.00012, 0, 0, 1.00012, 0, 50.08394);
158
+ opacity: 1.01199; }
159
+
160
+ 52% {
161
+ -webkit-transform: matrix(1.00011, 0, 0, 1.00011, 0, 50.07589);
162
+ opacity: 1.01084; }
163
+
164
+ 56% {
165
+ -webkit-transform: matrix(1.00009, 0, 0, 1.00009, 0, 50.06265);
166
+ opacity: 1.00895; }
167
+
168
+ 60% {
169
+ -webkit-transform: matrix(1.00007, 0, 0, 1.00007, 0, 50.04833);
170
+ opacity: 1.0069; }
171
+
172
+ 64% {
173
+ -webkit-transform: matrix(1.00005, 0, 0, 1.00005, 0, 50.03518);
174
+ opacity: 1.00503; }
175
+
176
+ 68% {
177
+ -webkit-transform: matrix(1.00004, 0, 0, 1.00004, 0, 50.02421);
178
+ opacity: 1.00346; }
179
+
180
+ 72% {
181
+ -webkit-transform: matrix(1.00002, 0, 0, 1.00002, 0, 50.01567);
182
+ opacity: 1.00224; }
183
+
184
+ 76% {
185
+ -webkit-transform: matrix(1.00001, 0, 0, 1.00001, 0, 50.00941);
186
+ opacity: 1.00134; }
187
+
188
+ 80% {
189
+ -webkit-transform: matrix(1.00001, 0, 0, 1.00001, 0, 50.00506);
190
+ opacity: 1.00072; }
191
+
192
+ 84% {
193
+ -webkit-transform: matrix(1, 0, 0, 1, 0, 50.00223);
194
+ opacity: 1.00032; }
195
+
196
+ 88% {
197
+ -webkit-transform: matrix(1, 0, 0, 1, 0, 50.0005);
198
+ opacity: 1.00007; }
199
+
200
+ 92% {
201
+ -webkit-transform: matrix(1, 0, 0, 1, 0, 49.99956);
202
+ opacity: 0.99994; }
203
+
204
+ 96% {
205
+ -webkit-transform: matrix(1, 0, 0, 1, 0, 49.99913);
206
+ opacity: 0.99988; }
207
+
208
+ 100% {
209
+ -webkit-transform: matrix(1, 0, 0, 1, 0, 50);
210
+ opacity: 1; } }
211
+
212
+ .bbm-modal--open {
213
+ -webkit-animation-duration: 0.3s;
214
+ -webkit-animation-name: bbm-open;
215
+ -webkit-animation-timing-function: linear;
216
+ -webkit-animation-fill-mode: both;
217
+ -webkit-transform-origin: 50% 50%;
218
+ -webkit-backface-visibility: hidden; }
219
+
220
+ /* Open a stacked modal */
221
+ @-webkit-keyframes bbm-stacked {
222
+ 0% {
223
+ -webkit-transform: matrix(0.99874, 0, 0, 0.99874, 0, 49.1187);
224
+ opacity: 0.93705; }
225
+
226
+ 4% {
227
+ -webkit-transform: matrix(0.99705, 0, 0, 0.99705, 0, 47.93192);
228
+ opacity: 0.85228; }
229
+
230
+ 8% {
231
+ -webkit-transform: matrix(0.99533, 0, 0, 0.99533, 0, 46.73078);
232
+ opacity: 0.76648; }
233
+
234
+ 12% {
235
+ -webkit-transform: matrix(0.99381, 0, 0, 0.99381, 0, 45.66645);
236
+ opacity: 0.69046; }
237
+
238
+ 16% {
239
+ -webkit-transform: matrix(0.99257, 0, 0, 0.99257, 0, 44.80009);
240
+ opacity: 0.62858; }
241
+
242
+ 20% {
243
+ -webkit-transform: matrix(0.99163, 0, 0, 0.99163, 0, 44.13933);
244
+ opacity: 0.58138; }
245
+
246
+ 24% {
247
+ -webkit-transform: matrix(0.99095, 0, 0, 0.99095, 0, 43.66342);
248
+ opacity: 0.54739; }
249
+
250
+ 28% {
251
+ -webkit-transform: matrix(0.99049, 0, 0, 0.99049, 0, 43.33951);
252
+ opacity: 0.52425; }
253
+
254
+ 32% {
255
+ -webkit-transform: matrix(0.99019, 0, 0, 0.99019, 0, 43.1325);
256
+ opacity: 0.50946; }
257
+
258
+ 36% {
259
+ -webkit-transform: matrix(0.99002, 0, 0, 0.99002, 0, 43.01034);
260
+ opacity: 0.50074; }
261
+
262
+ 40% {
263
+ -webkit-transform: matrix(0.98992, 0, 0, 0.98992, 0, 42.94639);
264
+ opacity: 0.49617; }
265
+
266
+ 44% {
267
+ -webkit-transform: matrix(0.98989, 0, 0, 0.98989, 0, 42.92001);
268
+ opacity: 0.49429; }
269
+
270
+ 48% {
271
+ -webkit-transform: matrix(0.98988, 0, 0, 0.98988, 0, 42.91606);
272
+ opacity: 0.494; }
273
+
274
+ 52% {
275
+ -webkit-transform: matrix(0.98989, 0, 0, 0.98989, 0, 42.92411);
276
+ opacity: 0.49458; }
277
+
278
+ 56% {
279
+ -webkit-transform: matrix(0.98991, 0, 0, 0.98991, 0, 42.93736);
280
+ opacity: 0.49553; }
281
+
282
+ 60% {
283
+ -webkit-transform: matrix(0.98993, 0, 0, 0.98993, 0, 42.95167);
284
+ opacity: 0.49655; }
285
+
286
+ 64% {
287
+ -webkit-transform: matrix(0.98995, 0, 0, 0.98995, 0, 42.96482);
288
+ opacity: 0.49749; }
289
+
290
+ 68% {
291
+ -webkit-transform: matrix(0.98997, 0, 0, 0.98997, 0, 42.97579);
292
+ opacity: 0.49827; }
293
+
294
+ 72% {
295
+ -webkit-transform: matrix(0.98998, 0, 0, 0.98998, 0, 42.98433);
296
+ opacity: 0.49888; }
297
+
298
+ 76% {
299
+ -webkit-transform: matrix(0.98999, 0, 0, 0.98999, 0, 42.99059);
300
+ opacity: 0.49933; }
301
+
302
+ 80% {
303
+ -webkit-transform: matrix(0.98999, 0, 0, 0.98999, 0, 42.99494);
304
+ opacity: 0.49964; }
305
+
306
+ 84% {
307
+ -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 42.99777);
308
+ opacity: 0.49984; }
309
+
310
+ 88% {
311
+ -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 42.9995);
312
+ opacity: 0.49996; }
313
+
314
+ 92% {
315
+ -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 43.00044);
316
+ opacity: 0.50003; }
317
+
318
+ 96% {
319
+ -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 43.00088);
320
+ opacity: 0.50006; }
321
+
322
+ 100% {
323
+ -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 43);
324
+ opacity: 0.5; } }