rails_admin_content_builder_rails_6 1.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (70) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +8 -0
  3. data/CODE_OF_CONDUCT.md +74 -0
  4. data/Gemfile +4 -0
  5. data/LICENSE.txt +21 -0
  6. data/README.md +134 -0
  7. data/Rakefile +2 -0
  8. data/app/assets/images/cb-image-default.jpg +0 -0
  9. data/app/assets/images/cb-loading.svg +1 -0
  10. data/app/assets/images/cb-snippet-gallery.jpg +0 -0
  11. data/app/assets/images/cb-snippet-gallery.psd +0 -0
  12. data/app/assets/images/cb-snippet-image-text.jpg +0 -0
  13. data/app/assets/images/cb-snippet-image-text.psd +0 -0
  14. data/app/assets/images/cb-snippet-image.jpg +0 -0
  15. data/app/assets/images/cb-snippet-image.psd +0 -0
  16. data/app/assets/images/cb-snippet-quote-text.jpg +0 -0
  17. data/app/assets/images/cb-snippet-quote-text.psd +0 -0
  18. data/app/assets/images/cb-snippet-quote.jpg +0 -0
  19. data/app/assets/images/cb-snippet-quote.psd +0 -0
  20. data/app/assets/images/cb-snippet-relational-text.jpg +0 -0
  21. data/app/assets/images/cb-snippet-relational-text.psd +0 -0
  22. data/app/assets/images/cb-snippet-text-image.jpg +0 -0
  23. data/app/assets/images/cb-snippet-text-image.psd +0 -0
  24. data/app/assets/images/cb-snippet-text-quote.jpg +0 -0
  25. data/app/assets/images/cb-snippet-text-quote.psd +0 -0
  26. data/app/assets/images/cb-snippet-text-relational.jpg +0 -0
  27. data/app/assets/images/cb-snippet-text-relational.psd +0 -0
  28. data/app/assets/images/cb-snippet-text.jpg +0 -0
  29. data/app/assets/images/cb-snippet-text.psd +0 -0
  30. data/app/assets/images/cb-snippet-video.jpg +0 -0
  31. data/app/assets/images/cb-snippet-video.psd +0 -0
  32. data/app/assets/images/cb-video-default.jpg +0 -0
  33. data/app/assets/javascripts/rails_admin/content_builder.js.erb +374 -0
  34. data/app/assets/javascripts/rails_admin/helpers/action_sortable.js +16 -0
  35. data/app/assets/javascripts/rails_admin/helpers/add_event_to_input.js +9 -0
  36. data/app/assets/javascripts/rails_admin/helpers/autocomplete.js.erb +32 -0
  37. data/app/assets/javascripts/rails_admin/helpers/file_select_and_upload.js +31 -0
  38. data/app/assets/javascripts/rails_admin/helpers/file_select_and_upload_gallery.js +43 -0
  39. data/app/assets/javascripts/rails_admin/helpers/generate_id.js +4 -0
  40. data/app/assets/javascripts/rails_admin/helpers/get_image_of_position.js +11 -0
  41. data/app/assets/javascripts/rails_admin/helpers/medium_editor.js +44 -0
  42. data/app/assets/javascripts/rails_admin/helpers/scrool_to.js +8 -0
  43. data/app/assets/javascripts/rails_admin/helpers/youtube_parse.js.erb +11 -0
  44. data/app/assets/stylesheets/rails_admin/content_builder.scss +534 -0
  45. data/app/controllers/rails_admin_content_builder/content_builder_controller.rb +39 -0
  46. data/app/helpers/rails_admin_content_builder/content_builder_helpers.rb +38 -0
  47. data/app/models/application_record.rb +3 -0
  48. data/app/models/rails_admin_content_builder/content_builder.rb +45 -0
  49. data/app/models/rails_admin_content_builder/content_builder_category.rb +12 -0
  50. data/app/models/rails_admin_content_builder/content_builder_image.rb +11 -0
  51. data/app/views/.gitkeep +0 -0
  52. data/app/views/rails_admin/main/content_builder.html.erb +102 -0
  53. data/bin/console +14 -0
  54. data/bin/setup +8 -0
  55. data/config/initializers/assets.rb +14 -0
  56. data/config/locales/content_builder.en.yml +32 -0
  57. data/config/locales/content_builder.pt-BR.yml +32 -0
  58. data/config/routes.rb +9 -0
  59. data/lib/rails_admin_content_builder_rails_6.rb +55 -0
  60. data/lib/rails_admin_content_builder_rails_6/engine.rb +24 -0
  61. data/lib/rails_admin_content_builder_rails_6/generators/rails_admin_content_builder_generator.rb +40 -0
  62. data/lib/rails_admin_content_builder_rails_6/generators/templates/content_builder_image_uploader.rb +90 -0
  63. data/lib/rails_admin_content_builder_rails_6/generators/templates/create_content_builder_category_migration.rb +10 -0
  64. data/lib/rails_admin_content_builder_rails_6/generators/templates/create_content_builder_image_migration.rb +10 -0
  65. data/lib/rails_admin_content_builder_rails_6/generators/templates/create_content_builder_migration.rb +16 -0
  66. data/lib/rails_admin_content_builder_rails_6/generators/templates/rails_admin_content_builder.rb +37 -0
  67. data/lib/rails_admin_content_builder_rails_6/version.rb +3 -0
  68. data/rails_admin_content_builder_rails_6.gemspec +45 -0
  69. data/vendor/assets/stylesheets/rails_admin_content_builder.scss +411 -0
  70. metadata +417 -0
@@ -0,0 +1,16 @@
1
+ // sortable to relational
2
+ function activeSortable() {
3
+ $('.cb-relational__list').sortable({
4
+ revert: true,
5
+ placeholder: 'ui-sortable-placeholder',
6
+ handle: '.cb-relational__btn--move',
7
+ cursor: 'move',
8
+ });
9
+
10
+ $('.cb-gallery').sortable({
11
+ revert: true,
12
+ placeholder: 'ui-sortable-placeholder--gallery',
13
+ handle: '.cb-gallery__btn--move',
14
+ cursor: 'move',
15
+ });
16
+ }
@@ -0,0 +1,9 @@
1
+ // add event on input file
2
+ function addEventToInputFile(id) {
3
+ $('#' + id).on('change', fileSelectAndUpload);
4
+ }
5
+
6
+ // add event on input file
7
+ function addEventToInputFileGallery(id) {
8
+ $('#' + id).on('change', fileSelectAndUploadGallery);
9
+ }
@@ -0,0 +1,32 @@
1
+ function autocomplete(id) {
2
+ console.log(id)
3
+ $('#' + id + ' input:text').autocomplete({
4
+ source: "search_content",
5
+ minLength: 5,
6
+ select: function (event, ui) {
7
+ section_id = generateID();
8
+
9
+ element = '<li id="' + section_id + '" class="cb-relational__item">';
10
+ element += '<a href="/noticias/' + ui.item.content_builder_category.slug + '/' + ui.item.slug + '" class="cb-relational__link" target="blank"></a>';
11
+ element += '<h2 class="cb-relational__caption cb-editable">' + ui.item.title + '</h2>';
12
+ element += '<div class="cb-tools">';
13
+ element += '<a class="cb-tools__btn cb-tools__btn--small cb-relational__btn--move fa fa-arrows" href="#"></a>';
14
+ element += '<a class="cb-tools__btn cb-tools__btn--small cb-tools__btn--delete fa fa-trash" href="#' + section_id + '"></a>';
15
+ element += '</div>';
16
+ element += '</li>';
17
+
18
+ $("#" + id + ' ol').append(element);
19
+ activeMediumEditor();
20
+ activeSortable();
21
+
22
+ return false;
23
+ },
24
+ create: function () {
25
+ $(this).data('ui-autocomplete')._renderItem = function (ul, item) {
26
+ return $("<li>")
27
+ .append("<a>" + item.title + "</a>")
28
+ .appendTo(ul);
29
+ }
30
+ }
31
+ })
32
+ }
@@ -0,0 +1,31 @@
1
+ // upload file via ajax
2
+ function fileSelectAndUpload(evt) {
3
+ var file = evt.target.files[0];
4
+
5
+ if (file) {
6
+ var formData = new FormData();
7
+ formData.append('content_builder_image', file);
8
+
9
+ $.ajax({
10
+ url: 'create_images',
11
+ data: formData,
12
+ cache: false,
13
+ contentType: false,
14
+ processData: false,
15
+ type: 'PUT',
16
+ beforeSend: function () {
17
+ $('#' + evt.target.id).find('figure').append('<div class="cb-loading"></div>');
18
+ $('.cb-tools--center').addClass('cb-tools--disabled');
19
+ },
20
+ complete: function () {
21
+ $('.cb-loading').remove();
22
+ $('.cb-tools--center').removeClass('cb-tools--disabled');
23
+ }
24
+ }).done(function (e) {
25
+ var p = evt.target.getAttribute('data-position');
26
+ $('#' + evt.target.id).find('img').attr('src', getImageOfPosition(p, e));
27
+ }).fail(function (e) {
28
+ alert('error: ' + e);
29
+ });
30
+ }
31
+ }
@@ -0,0 +1,43 @@
1
+ // Upload Gallery
2
+ function fileSelectAndUploadGallery(evt) {
3
+ var files = evt.target.files;
4
+
5
+ for (i = 0; i < files.length; ++i) {
6
+ var formData = new FormData();
7
+ formData.append('content_builder_image', files[i]);
8
+
9
+ $.ajax({
10
+ url: 'create_images',
11
+ data: formData,
12
+ cache: false,
13
+ contentType: false,
14
+ processData: false,
15
+ type: 'PUT',
16
+ beforeSend: function () {
17
+ $('#' + evt.target.id).find('figure').append('<div class="cb-loading"></div>');
18
+ $('.cb-tools--center').addClass('cb-tools--disabled');
19
+ },
20
+ complete: function () {
21
+ $('.cb-loading').remove();
22
+ $('.cb-tools--center').removeClass('cb-tools--disabled');
23
+ }
24
+ }).done(function (e) {
25
+ var p = evt.target.getAttribute('data-position');
26
+ id = generateID();
27
+
28
+ element = '<div class="cb-gallery__item" id="' + id + '">';
29
+ element += '<div class="cb-tools cb-tools--center">';
30
+ element += '<a class="cb-tools__btn cb-gallery__btn--move fa fa-arrows" href="#"></a>';
31
+ element += '<a class="cb-tools__btn cb-tools__btn--delete fa fa-trash" href="#' + id + '"></a>';
32
+ element += '</div>';
33
+ element += '<figure class="cb-gallery__figure">';
34
+ element += '<img class="cb-gallery__image" src="' + getImageOfPosition(p, e) + '">';
35
+ element += '</figure>';
36
+ element += '</div>';
37
+
38
+ $('#' + evt.target.id + ' .cb-gallery').append(element);
39
+ }).fail(function (e) {
40
+ alert('error: ' + e);
41
+ });
42
+ }
43
+ }
@@ -0,0 +1,4 @@
1
+ // generate random id
2
+ function generateID() {
3
+ return '_' + Math.random().toString(36).substr(2, 9);
4
+ }
@@ -0,0 +1,11 @@
1
+ // get image of position
2
+ function getImageOfPosition(position, e) {
3
+ switch (position) {
4
+ case 'left':
5
+ case 'right':
6
+ return e.left_or_right.url;
7
+
8
+ case 'center':
9
+ return e.center.url;
10
+ }
11
+ }
@@ -0,0 +1,44 @@
1
+ // active medium editor plugin
2
+ function activeMediumEditor() {
3
+ var text = new MediumEditor('.cb-text', {
4
+ placeholder: {
5
+ text: '',
6
+ hideOnClick: true
7
+ },
8
+
9
+ toolbar: {
10
+ buttons: ['bold', 'italic', 'underline', 'anchor']
11
+ },
12
+
13
+ anchor: {
14
+ placeholderText: 'Ex: http://site.com'
15
+ },
16
+
17
+ anchorPreview: false,
18
+
19
+ paste: {
20
+ forcePlainText: true,
21
+ cleanPastedHTML: false,
22
+ cleanReplacements: [],
23
+ cleanAttrs: ['class', 'style', 'dir'],
24
+ cleanTags: ['meta'],
25
+ unwrapTags: []
26
+ }
27
+ });
28
+
29
+ var editable = new MediumEditor('.cb-editable', {
30
+ placeholder: false,
31
+ toolbar: false,
32
+ anchor: false,
33
+ anchorPreview: false,
34
+
35
+ paste: {
36
+ forcePlainText: true,
37
+ cleanPastedHTML: false,
38
+ cleanReplacements: [],
39
+ cleanAttrs: ['class', 'style', 'dir'],
40
+ cleanTags: ['meta'],
41
+ unwrapTags: []
42
+ }
43
+ });
44
+ }
@@ -0,0 +1,8 @@
1
+ // scroll to
2
+ function scrollTo(id) {
3
+ if (id) {
4
+ $('html, body').animate({
5
+ scrollTop: $('#' + id).offset().top
6
+ }, 400);
7
+ }
8
+ }
@@ -0,0 +1,11 @@
1
+ // parse url by youtube using expression regular
2
+ function youtubeParser(url) {
3
+ var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
4
+ var match = url.match(regExp);
5
+
6
+ if (match && match[7].length == 11) {
7
+ return b = match[7];
8
+ } else {
9
+ alert('<%= I18n.t('admin.actions.content_builder.invalid_url')%>');
10
+ }
11
+ }
@@ -0,0 +1,534 @@
1
+ @import "medium-editor/medium-editor";
2
+ @import "medium-editor/themes/bootstrap";
3
+
4
+ .cb-snippet {
5
+ position: fixed;
6
+ z-index: 400;
7
+ bottom: 54px;
8
+ left: 0;
9
+ right: 0;
10
+
11
+ width: 100%;
12
+ height: 100px;
13
+ padding: 10px 0;
14
+ background: #f8f8f8;
15
+ border-top: solid 1px rgba(0,0,0,.1);
16
+ overflow-y: scroll;
17
+ }
18
+
19
+ .cb-snippet__btn {
20
+ box-sizing: border-box;
21
+ float: left;
22
+ width: 25%;
23
+ padding: 10px;
24
+
25
+ text-align: center;
26
+ text-decoration: none;
27
+
28
+ transition: box-shadow .1s ease;
29
+
30
+ &:hover {
31
+ text-decoration: none;
32
+ box-shadow: 0 0 0 2px rgba(0,0,0,.1);
33
+ }
34
+ }
35
+
36
+ .cb-snippet__caption {
37
+ display: none;
38
+ padding: 5px;
39
+
40
+ color: rgba(0,0,0,.6);
41
+ font-size: 10px;
42
+ }
43
+
44
+ .cb-snippet__image {
45
+ width: 100%;
46
+ }
47
+
48
+ .cb-controls {
49
+ position: fixed;
50
+ z-index: 400;
51
+ bottom: 0;
52
+ right: 0;
53
+
54
+ width: 100%;
55
+
56
+ padding: 10px;
57
+
58
+ background: #f8f8f8;
59
+ border-top: solid 1px rgba(0,0,0,.1);
60
+ border-left: solid 1px rgba(0,0,0,.1);
61
+
62
+ .btn-block {
63
+ margin-top: 0;
64
+ width: auto !important;
65
+ }
66
+
67
+ .btn-right {
68
+ float: right;
69
+ }
70
+
71
+ .btn-left {
72
+ float: left;
73
+ }
74
+ }
75
+
76
+ .cb-tools {
77
+ margin-bottom: 10px;
78
+
79
+ border-radius: .4rem;
80
+ background: darken(#fff, 7%);
81
+ overflow: hidden;
82
+
83
+ text-align: right;
84
+ }
85
+
86
+ .cb-tools--center {
87
+ position: absolute;
88
+ z-index: 300;
89
+ top: 50%;
90
+ left: 50%;
91
+ transform: translateX(-50%) translateY(-50%);
92
+ }
93
+
94
+ .cb-tools--disabled {
95
+ z-index: 100;
96
+ }
97
+
98
+ .cb-tools__btn {
99
+ display: inline-block;
100
+
101
+ font-size: 12px;
102
+ text-align: center;
103
+ text-transform: uppercase;
104
+
105
+ padding: 10px;
106
+
107
+ &:hover,
108
+ &:focus {
109
+ background: rgba(0,0,0,.05);
110
+ text-decoration: none;
111
+ }
112
+ }
113
+
114
+ .cb-tools__btn--small {
115
+ font-size: 9px;
116
+ padding: 8px;
117
+ }
118
+
119
+ .cb-tools__input {
120
+
121
+ }
122
+
123
+ .cb-tools__input--upload {
124
+ display: none !important;
125
+ }
126
+
127
+
128
+ #cb-container {
129
+ box-sizing: border-box;
130
+ padding: 0 0 300px 0;
131
+ }
132
+
133
+ .cb-content {
134
+ position: relative;
135
+ max-width: 100%;
136
+ height: auto !important;
137
+
138
+ &:after {
139
+ clear: both;
140
+ content: "";
141
+ display: block;
142
+ font-size: 0;
143
+ height: 0;
144
+ visibility: hidden;
145
+ }
146
+ }
147
+
148
+ .cb-text {
149
+ line-height: 1.6;
150
+
151
+ color: rgba(0,0,0,.7);
152
+ font-family: sans-serif;
153
+ font-size: 16px;
154
+
155
+ margin-bottom: 30px;
156
+
157
+ p {
158
+ margin: 0 0 20px;
159
+
160
+ &:last-of-type {
161
+ margin: 0;
162
+ }
163
+ }
164
+ }
165
+
166
+ .cb-figure {
167
+ position: relative;
168
+ margin: 0 0 20px;
169
+
170
+ img {
171
+ width: 100%;
172
+ }
173
+ }
174
+
175
+ .cb-figure--center {
176
+ margin: 0 0 20px;
177
+ }
178
+
179
+ .cb-figure__clip {
180
+ position: relative;
181
+ }
182
+
183
+ .cb-figcaption {
184
+ margin: 6px 0 0;
185
+
186
+ color: rgba(0,0,0,.6);
187
+ font-size: 14px;
188
+
189
+ line-height: 1.4;
190
+ padding: 8px 14px;
191
+ background: rgba(0,0,0,.05);
192
+
193
+ p {
194
+ margin: 0;
195
+ }
196
+ }
197
+
198
+ .cb-video {
199
+ position: relative;
200
+ height: 0;
201
+ overflow: hidden;
202
+ padding-bottom: 56.25%;
203
+ background: image-url("cb-video-default.jpg") no-repeat center #e4e4e4;
204
+
205
+ iframe {
206
+ position: absolute;
207
+ width: 100%;
208
+ height: 100%;
209
+ vertical-align: middle;
210
+ }
211
+ }
212
+
213
+ .cb-video--center {
214
+ margin-bottom: 30px;
215
+ }
216
+
217
+ .cb-blockquote {
218
+ position: relative;
219
+ margin: 0 0 20px;
220
+
221
+ padding: 25px 0 0 25px;
222
+ border: 0;
223
+ }
224
+
225
+ .cb-blockquote__text {
226
+ margin: 0 0 8px;
227
+
228
+ line-height: 1.4;
229
+
230
+ color: rgba(0,0,0,.6);
231
+ font-family: sans-serif;
232
+ font-size: 18px;
233
+
234
+ &:before {
235
+ content: "\“";
236
+
237
+ position: absolute;
238
+ top: -8px;
239
+ left: 0;
240
+
241
+ display: block;
242
+ line-height: 1;
243
+
244
+ color: rgba(0,0,0,.2);
245
+ font-size: 70px;
246
+ }
247
+ }
248
+
249
+ .cb-blockquote__footer {
250
+ position: relative;
251
+ margin: 0;
252
+
253
+ padding-left: 24px;
254
+
255
+ color: rgba(0,0,0,.6);
256
+ font-family: sans-serif;
257
+ font-size: 14px;
258
+
259
+ &:before {
260
+ content: "\2014 \00A0";
261
+
262
+ position: absolute;
263
+ top: 0;
264
+ left: 0;
265
+
266
+ display: block;
267
+ }
268
+ }
269
+
270
+ .cb-relational {
271
+ margin: 0 0 20px;
272
+ padding-top: 5px;
273
+ }
274
+
275
+ .cb-relational__title {
276
+ margin: 0 0 15px;
277
+
278
+ padding-top: 8px;
279
+ border-top: solid 4px rgba(0,0,0,.1);
280
+
281
+ color: rgba(0,0,0,.6) !important;
282
+ font-size: 16px;
283
+ font-weight: 700;
284
+ text-transform: uppercase;
285
+ }
286
+
287
+ .cb-relational__list {
288
+ margin: 0 0 0 40px;
289
+ padding: 0;
290
+ list-style: none;
291
+ }
292
+
293
+ .cb-relational__item {
294
+ position: relative;
295
+ padding: 20px 0;
296
+ border-bottom: solid 1px rgba(0,0,0,.1);
297
+ }
298
+
299
+ .cb-relational__caption {
300
+ margin: 0;
301
+
302
+ display: block;
303
+
304
+ font-size: 16px;
305
+ font-weight: 600;
306
+ }
307
+
308
+ .cb-relational__btn {
309
+ position: absolute;
310
+ top: 14px;
311
+ right: 0;
312
+
313
+ display: block;
314
+ width: 30px;
315
+ height: 30px;
316
+ line-height: 30px;
317
+
318
+ color: rgba(0,0,0,.8);
319
+ text-align: center;
320
+ }
321
+
322
+ .cb-search {
323
+ margin-bottom: 15px;
324
+
325
+ width: 100%;
326
+ padding: 8px;
327
+ border-radius: 4px;
328
+ border: solid 1px #ccc;
329
+
330
+ outline: none;
331
+
332
+ &:focus {
333
+ border-color: #999;
334
+ }
335
+ }
336
+
337
+ .cb-loading {
338
+ position: absolute;
339
+ z-index: 200;
340
+ top: 0;
341
+ left: 0;
342
+
343
+ width: 100%;
344
+ height: 100%;
345
+ background: image-url("cb-loading.svg") no-repeat rgba(255,255,255,.95);
346
+ background-position: 98% 10px;
347
+ }
348
+
349
+ .cb-content-gallery {
350
+ @extend .cb-content;
351
+ margin-bottom: 30px;
352
+ }
353
+
354
+ .cb-gallery {
355
+ min-height: 100px;
356
+
357
+ &:after {
358
+ visibility: hidden;
359
+ display: block;
360
+ font-size: 0;
361
+ content: " ";
362
+ clear: both;
363
+ height: 0;
364
+ }
365
+ }
366
+
367
+ .cb-gallery__item,
368
+ .ui-sortable-placeholder--gallery {
369
+ position: relative;
370
+ float: left;
371
+ margin-bottom: 5px;
372
+
373
+ box-sizing: border-box;
374
+ width: 25%;
375
+ height: 150px;
376
+ padding: 0 5px;
377
+ overflow: hidden;
378
+ }
379
+
380
+ .cb-gallery__item {
381
+ background: image-url("cb-loading.svg") no-repeat;
382
+ background-position: 98% 10px;
383
+ }
384
+
385
+ .cb-gallery__image {
386
+ position: absolute;
387
+ display: block;
388
+ height: 100%;
389
+ }
390
+
391
+ [contenteditable="true"] {
392
+ outline: none;
393
+
394
+ &:hover,
395
+ &:focus {
396
+ box-shadow: 0 0 0 1px rgba(0,0,0,.2);
397
+ }
398
+ }
399
+
400
+ .ui-sortable-placeholder {
401
+ margin: 20px 0;
402
+ height: 80px;
403
+
404
+ background: rgba(0,0,0,.05);
405
+ border: dashed 2px rgba(0,0,0,.05);
406
+ }
407
+
408
+ @media screen and (min-width: 460px) {
409
+ .cb-snippet__caption {
410
+ display: block;
411
+ }
412
+ }
413
+
414
+ @media screen and (min-width: 768px) {
415
+ .cb-snippet {
416
+ top: 50px;
417
+ right: 0;
418
+ bottom: 112px;
419
+ left: auto;
420
+
421
+ width: 150px;
422
+ height: auto;
423
+ padding: 20px;
424
+ border: 0;
425
+ border-left: solid 1px rgba(0,0,0,.1);
426
+
427
+ -webkit-transform: translateX(0%);
428
+ -moz-transform: translateX(0%);
429
+ transform: translateX(0%);
430
+ }
431
+
432
+ .cb-snippet__btn {
433
+ margin-bottom: 20px;
434
+
435
+ display: block;
436
+ width: 100%;
437
+ padding: 0;
438
+ }
439
+
440
+ .cb-controls {
441
+ position: fixed;
442
+ z-index: 100;
443
+ bottom: 0;
444
+ right: 0;
445
+
446
+ width: 150px;
447
+
448
+ padding: 20px;
449
+
450
+ background: #f8f8f8;
451
+ border-top: solid 1px rgba(0,0,0,.1);
452
+ border-left: solid 1px rgba(0,0,0,.1);
453
+
454
+ .btn-block {
455
+ width: 100% !important;
456
+ }
457
+
458
+ .btn-block + .btn-block {
459
+ margin-top: 5px;
460
+ }
461
+
462
+ .btn-left,
463
+ .btn-right {
464
+ float: none;
465
+ }
466
+ }
467
+
468
+ #cb-container {
469
+ box-sizing: border-box;
470
+ padding: 30px 160px 100px 40px;
471
+ width: 80%;
472
+ margin: 0 auto;
473
+ }
474
+
475
+ .cb-tools {
476
+ position: absolute;
477
+ z-index: 300;
478
+ top: 0;
479
+ left: -40px;
480
+ }
481
+
482
+ .cb-tools__btn {
483
+ display: block;
484
+ }
485
+
486
+ .cb-tools--center {
487
+ position: absolute;
488
+ z-index: 300;
489
+ top: 50%;
490
+ left: 50%;
491
+
492
+ .cb-tools__btn {
493
+ display: inline-block;
494
+ }
495
+ }
496
+
497
+ .cb-figure--left {
498
+ float: left;
499
+ width: 50%;
500
+ margin: 0 30px 20px 0;
501
+ }
502
+
503
+ .cb-figure--right {
504
+ float: right;
505
+ width: 50%;
506
+ margin: 0 0 20px 30px;
507
+ }
508
+
509
+ .cb-blockquote--left {
510
+ float: left;
511
+ width: 50%;
512
+ margin: 0 30px 20px 0;
513
+ }
514
+
515
+ .cb-blockquote--right {
516
+ float: right;
517
+ width: 50%;
518
+ margin: 0 0 20px 30px;
519
+ }
520
+
521
+ .cb-relational--left {
522
+ float: left;
523
+ margin: 0 30px 25px 0;
524
+
525
+ width: 50%;
526
+ }
527
+
528
+ .cb-relational--right {
529
+ float: right;
530
+ margin: 0 0 25px 30px;
531
+
532
+ width: 50%;
533
+ }
534
+ }