dante-editor 0.0.15 → 0.1.0

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.
Files changed (45) hide show
  1. checksums.yaml +4 -4
  2. data/Gemfile.lock +1 -1
  3. data/README.md +49 -10
  4. data/app/assets/fonts/dante/dante.eot +0 -0
  5. data/app/assets/fonts/dante/dante.svg +9 -5
  6. data/app/assets/fonts/dante/dante.ttf +0 -0
  7. data/app/assets/fonts/dante/dante.woff +0 -0
  8. data/app/assets/javascripts/dante/behavior.js.coffee +2 -0
  9. data/app/assets/javascripts/dante/behaviors/image.js.coffee +56 -0
  10. data/app/assets/javascripts/dante/behaviors/list.js.coffee +150 -0
  11. data/app/assets/javascripts/dante/behaviors/save.js.coffee +40 -0
  12. data/app/assets/javascripts/dante/behaviors/suggest.js.coffee +118 -0
  13. data/app/assets/javascripts/dante/editor.js.coffee +110 -228
  14. data/app/assets/javascripts/dante/popover.js.coffee +350 -11
  15. data/app/assets/javascripts/dante/tooltip_widgets/uploader.js.coffee +2 -2
  16. data/app/assets/javascripts/dante.js +5 -0
  17. data/app/assets/stylesheets/dante/_blame.scss +209 -0
  18. data/app/assets/stylesheets/dante/_caption.scss +14 -0
  19. data/app/assets/stylesheets/dante/_icons.scss +10 -5
  20. data/app/assets/stylesheets/dante/_menu.scss +7 -7
  21. data/app/assets/stylesheets/dante/_popover.scss +122 -44
  22. data/app/assets/stylesheets/dante/_utilities.scss +5 -1
  23. data/app/assets/stylesheets/dante/_variables.scss +7 -3
  24. data/app/assets/stylesheets/dante.scss +2 -0
  25. data/config.rb +5 -4
  26. data/dist/css/dante-editor.css +246 -44
  27. data/dist/fonts/dante/dante.eot +0 -0
  28. data/dist/fonts/dante/dante.svg +9 -5
  29. data/dist/fonts/dante/dante.ttf +0 -0
  30. data/dist/fonts/dante/dante.woff +0 -0
  31. data/dist/js/dante-editor.js +1015 -283
  32. data/lib/dante-editor/version.rb +1 -1
  33. data/source/api/cristian.json.erb +8 -0
  34. data/source/api/miguel.json.erb +8 -0
  35. data/source/api/resource.json.erb +8 -0
  36. data/source/api/save.json.erb +1 -0
  37. data/source/api/suggest.json.erb +22 -0
  38. data/source/assets/images/dante-demo.png +0 -0
  39. data/source/icons/image-center.svg +12 -0
  40. data/source/icons/image-fill.svg +11 -0
  41. data/source/icons/image-left.svg +15 -0
  42. data/source/icons/image-wide.svg +12 -0
  43. data/source/index.html.erb +6 -0
  44. data/source/partials/_readme.markdown +2 -2
  45. metadata +18 -2
@@ -4,17 +4,18 @@ class Dante.Editor.PopOver extends Dante.View
4
4
  el: "body"
5
5
 
6
6
  events:
7
- "mouseover .popover": "cancelHide"
8
- "mouseout .popover": "hide"
7
+ "mouseover .popover--tooltip": "cancelHide"
8
+ "mouseout .popover--tooltip": "hide"
9
9
 
10
10
  initialize: (opts = {})->
11
11
  utils.log("initialized popover")
12
+ @pop_over_element = ".popover--tooltip"
12
13
  @editor = opts.editor
13
14
  @hideTimeout
14
15
  @settings = {timeout: 300}
15
16
 
16
17
  template: ()->
17
- "<div class='popover popover--tooltip popover--Linktooltip popover--bottom is-active'>
18
+ "<div class='dante-popover popover--tooltip popover--Linktooltip popover--bottom is-active'>
18
19
  <div class='popover-inner'>
19
20
  <a href='#' target='_blank'> Link </a>
20
21
  </div>
@@ -29,11 +30,11 @@ class Dante.Editor.PopOver extends Dante.View
29
30
  target_offset = target.offset()
30
31
  target_width = target.outerWidth()
31
32
  target_height = target.outerHeight()
32
- popover_width = $(@el).find(".popover").outerWidth()
33
+ popover_width = @findElement().outerWidth()
33
34
  top_value = target_positions.top + target_height
34
35
  left_value = target_offset.left + (target_width/2) - (popover_width/2)
35
36
 
36
- $(@el).find(".popover")
37
+ @findElement()
37
38
  .css("top", top_value)
38
39
  .css("left", left_value )
39
40
  .show()
@@ -43,9 +44,12 @@ class Dante.Editor.PopOver extends Dante.View
43
44
  displayAt: (ev)->
44
45
  @cancelHide()
45
46
  target = $(ev.currentTarget)
46
- $(@el).find(".popover-inner a").text( target.attr('href') ).attr('href', target.attr("href") )
47
+ @findElement()
48
+ .find(".popover-inner a")
49
+ .text( target.attr('href') )
50
+ .attr('href', target.attr("href") )
47
51
  @positionAt(ev)
48
- $(@el).find(".popover--tooltip").css("pointer-events", "auto")
52
+ @findElement().css("pointer-events", "auto")
49
53
  $(@el).show()
50
54
 
51
55
  cancelHide: ()->
@@ -55,7 +59,7 @@ class Dante.Editor.PopOver extends Dante.View
55
59
  hide: (ev)->
56
60
  @cancelHide()
57
61
  @hideTimeout = setTimeout ()=>
58
- $(@el).find(".popover").hide()
62
+ @findElement().hide()
59
63
  , @settings.timeout
60
64
 
61
65
  resolveTargetPosition: (target)->
@@ -64,12 +68,347 @@ class Dante.Editor.PopOver extends Dante.View
64
68
  else
65
69
  target.position()
66
70
 
71
+ handleDirection: (target)->
72
+ if target.parents(".graf--mixtapeEmbed").exists()
73
+ @findElement().removeClass("popover--bottom").addClass("popover--top")
74
+ else
75
+ @findElement().removeClass("popover--top").addClass("popover--bottom")
76
+
77
+ findElement: ()->
78
+ $(@el).find(@pop_over_element)
79
+
80
+ render: ()->
81
+ $(@template()).insertAfter(@editor.$el)
82
+
83
+ class Dante.Editor.PopOverTypeAhead extends Dante.Editor.PopOver
84
+ el: "body"
85
+
86
+ events:
87
+ "mouseover .popover--typeahead": "cancelHide"
88
+ "mouseout .popover--typeahead": "hide"
89
+
90
+ "click .typeahead-item": "handleOptionSelection"
91
+
92
+ initialize: (opts = {})->
93
+ @pop_over_element = "popover--typeahead"
94
+ utils.log("initialized popover")
95
+ @editor = opts.editor
96
+ @hideTimeout
97
+ @settings = {timeout: 300}
98
+ @typeaheadStyles()
99
+
100
+ template: ()->
101
+ "<div class='dante-popover popover--typeahead js-popover typeahead typeahead--mention popover--maxWidth360 popover--bottom is-active'>
102
+ <div class='popover-inner js-popover-inner'>
103
+ <ul></ul>
104
+ </div>
105
+ <div class='popover-arrow' style='left: 297px;'></div>
106
+ </div>"
107
+
108
+ popoverItem: (item)->
109
+ "<li class='typeahead-item'
110
+ data-action-value='#{item.text}'
111
+ data-action='typeahead-populate' data-id='#{item.id}'
112
+ data-type='#{item.type}'
113
+ data-href='#{item.href}'>
114
+
115
+ <div class='dante-avatar'>
116
+ <img src='#{item.avatar}'
117
+ class='avatar-image avatar-image--icon'
118
+ alt='#{item.text}'>
119
+
120
+ <span class='avatar-text'>#{item.text}</span>
121
+ <em class='avatar-description'>#{item.description}</em>
122
+
123
+ </div>
124
+
125
+ </li>"
126
+
127
+ typeaheadStyles: ->
128
+ @classesForCurrent = "typeahead typeahead--mention popover--maxWidth360"
129
+
130
+ handleOptionSelection: (ev)->
131
+ ev.preventDefault
132
+ console.log "Select option here!"
133
+ data = $(ev.currentTarget).data()
134
+ $(".markup--query").replaceWith(@linkTemplate(data))
135
+ @hide(0)
136
+ #@setRangeAt(new_paragraph[0])
137
+
138
+ linkTemplate: (data)->
139
+ "<a href='#'
140
+ data-type='#{data.type}'
141
+ data-href='#{data.href}'
142
+ data-id='#{data.id}'
143
+ class='markup--user markup--p-user'>
144
+ #{data.actionValue}
145
+ </a>"
146
+
147
+ #display & copy original link
148
+ positionAt: (target)->
149
+ target = $(target)
150
+ target_positions = @resolveTargetPosition(target)
151
+ target_offset = target.offset()
152
+ target_width = target.outerWidth()
153
+ target_height = target.outerHeight()
154
+ popover_width = @findElement().outerWidth()
155
+ top_value = target_positions.top + target_height
156
+ left_value = target_offset.left + (target_width/2) - (popover_width/2)
157
+
158
+ @findElement()
159
+ .css("top", top_value)
160
+ .css("left", left_value )
161
+ .show()
162
+
163
+ @handleDirection(target)
164
+
165
+ displayAt: (ev)->
166
+ @cancelHide()
167
+ #target = $(ev.currentTarget)
168
+ #$(@el).find(".popover-inner a").text( target.attr('href') ).attr('href', target.attr("href") )
169
+ @positionAt(ev)
170
+ #$(@el).find(".popover--tooltip").css("pointer-events", "auto")
171
+ #$(@el).show()
172
+
173
+ cancelHide: ()->
174
+ utils.log "Cancel Hide"
175
+ clearTimeout @hideTimeout
176
+
177
+ findElement: ->
178
+ $(@el).find(".#{@pop_over_element}")
179
+
180
+ hide: (ev, timeout = @settings.timeout)->
181
+ @cancelHide()
182
+ @hideTimeout = setTimeout ()=>
183
+ @findElement().hide()
184
+ , timeout
185
+
186
+ appendData: (data)->
187
+ @findElement().find(".popover-inner ul").html("")
188
+ _.each data, (item)=>
189
+ @findElement().find(".popover-inner ul").append(@popoverItem(item))
190
+
191
+ resolveTargetPosition: (target)->
192
+ if target.parents(".graf--mixtapeEmbed").exists()
193
+ target.parents(".graf--mixtapeEmbed").position()
194
+ else
195
+ target.position()
67
196
 
68
197
  handleDirection: (target)->
69
198
  if target.parents(".graf--mixtapeEmbed").exists()
70
- $(@el).find(".popover").removeClass("popover--bottom").addClass("popover--top")
199
+ @findElement().removeClass("popover--bottom").addClass("popover--top")
71
200
  else
72
- $(@el).find(".popover").removeClass("popover--top").addClass("popover--bottom")
201
+ @findElement().removeClass("popover--top").addClass("popover--bottom")
202
+
203
+ render: ()->
204
+ $(@template()).insertAfter(@editor.$el)
205
+
206
+ class Dante.Editor.PopOverCard extends Dante.Editor.PopOver
207
+
208
+ el: "body"
209
+
210
+ events:
211
+ "mouseover .popover--card": "cancelHide"
212
+ "mouseout .popover--card": "hide"
213
+ "mouseover .markup--user" : "displayPopOver"
214
+ "mouseout .markup--user" : "hidePopOver"
215
+ #"click .typeahead-item": "handleOptionSelection"
216
+
217
+ initialize: (opts = {})->
218
+ @pop_over_element = ".popover--card"
219
+ utils.log("initialized popover")
220
+ @editor = opts.editor
221
+ @hideTimeout
222
+ @settings = {timeout: 300}
223
+ @card_data = {}
224
+
225
+ template: ()->
226
+ "<div class='dante-popover popover--card js-popover popover--animated popover--flexible popover--top is-active'>
227
+ <div class='popover-inner js-popover-inner'>
228
+ </div>
229
+ </div>"
230
+
231
+ cardTemplate: ->
232
+ "<div class='popoverCard'>
233
+ <div class='u-clearfix'>
234
+
235
+ <div class='u-floatLeft popoverCard-meta'>
236
+ <h4 class='popoverCard-title'>
237
+ <a class='link u-baseColor--link'
238
+ href='#{@card_data.href}'
239
+ title='#{@card_data.text}'
240
+ aria-label='#{@card_data.text}'
241
+ data-user-id='#{@card_data.id}'
242
+ dir='auto'>
243
+ #{@card_data.text}
244
+ </a>
245
+ </h4>
246
+ <div class='popoverCard-description'>
247
+ #{@card_data.description}
248
+ </div>
249
+ </div>
250
+
251
+ <div class='u-floatRight popoverCard-avatar'>
252
+ <a class='link dante-avatar u-baseColor--link'
253
+ href='#{@card_data.href}'
254
+ title='#{@card_data.text}'
255
+ aria-label='#{@card_data.text}'
256
+ data-user-id='#{@card_data.id}'
257
+ dir='auto'>
258
+ <img src='#{@card_data.avatar}'
259
+ class='avatar-image avatar-image--small'
260
+ alt='#{@card_data.text}'>
261
+ </a>
262
+ </div>
263
+ </div>
264
+ #{ @footerTemplate() }
265
+ <div class='popover-arrow'></div>
266
+
267
+ </div>"
268
+
269
+ # TODO: implement footer
270
+ footerTemplate: ->
271
+ ""
272
+ ###
273
+ "<div class='popoverCard-actions u-clearfix'>
274
+ <div class='u-floatLeft popoverCard-stats'>
275
+ <span class='popoverCard-stat'>
276
+ Following
277
+ <span class='popoverCard-count js-userFollowingCount'>124</span>
278
+ </span>
279
+ <span class='popoverCard-stat'>
280
+ Followers
281
+ <span class='popoverCard-count js-userFollowersCount'>79</span>
282
+ </span>
283
+ </div>
284
+ </div>"
285
+ ###
286
+
287
+ displayPopOver: (ev)->
288
+ @.displayAt(ev)
289
+
290
+ displayAt: (ev)->
291
+ @cancelHide()
292
+
293
+ $.getJSON($(ev.currentTarget).data().href)
294
+ .success (data)=>
295
+ if @editor.suggest_resource_handler
296
+ @card_data = @editor.suggest_resource_handler(data)
297
+ else
298
+ @card_data = data
299
+
300
+ @refreshTemplate()
301
+ @positionAt(ev)
302
+
303
+ hidePopOver: (ev)->
304
+ @.hide(ev)
305
+
306
+ refreshTemplate: ->
307
+ $(".popover--card .popover-inner").html(@cardTemplate())
308
+
309
+ class Dante.Editor.ImageTooltip extends Dante.Editor.PopOver
310
+
311
+ el: "body"
312
+
313
+ events:
314
+ "click .graf" : "handleHide"
315
+ "click .dante-menu-button.align-left": "alignLeft"
316
+ "click .dante-menu-button.align-center": "alignCenter"
317
+
318
+ # #"click": ""
319
+ # #"mouseover .popover--tooltip": "cancelHide"
320
+ # #"mouseout .popover--tooltip": "hide"
321
+
322
+ initialize: (opts = {})->
323
+ utils.log("initialized popover")
324
+ @pop_over_element = ".popover--Aligntooltip"
325
+ @editor = opts.editor
326
+ @hideTimeout
327
+ @settings = {timeout: 300}
328
+
329
+ alignLeft: (ev)->
330
+ @activateLink $(ev.currentTarget)
331
+ @findSelectedImage().addClass("graf--layoutOutsetLeft")
332
+
333
+ handleHide: (ev)->
334
+ target = $(ev.currentTarget)
335
+ @hide(ev) unless target.hasClass("graf--figure") and target.hasClass("is-mediaFocused")
336
+
337
+ alignCenter: (ev)->
338
+ @activateLink $(ev.currentTarget)
339
+ @findSelectedImage().removeClass("graf--layoutOutsetLeft")
340
+ @repositionWithActiveImage()
341
+
342
+ activateLink: (element)->
343
+ @findElement().find(".dante-menu-button").removeClass("active")
344
+ element.addClass("active")
345
+ setTimeout =>
346
+ @repositionWithActiveImage()
347
+ , 20
348
+
349
+ repositionWithActiveImage: ->
350
+ @positionPopOver(@findSelectedImage())
351
+
352
+ template: ()->
353
+ "<div class='dante-popover popover--Aligntooltip popover--top'>
354
+
355
+ <div class='popover-inner'>
356
+
357
+ <ul class='dante-menu-buttons'>
358
+
359
+ <li class='dante-menu-button align-left'>
360
+ <span class='tooltip-icon icon-image-left'></span>
361
+ </li>
362
+
363
+ <li class='dante-menu-button align-wide hidden'>
364
+ <span class='tooltip-icon icon-image-wide'></span>
365
+ </li>
366
+ <li class='dante-menu-button align-fill hidden'>
367
+ <span class='tooltip-icon icon-image-fill'></span>
368
+ </li>
369
+
370
+ <li class='dante-menu-button align-center active'>
371
+ <span class='tooltip-icon icon-image-center'></span>
372
+ </li>
373
+
374
+ </ul>
375
+
376
+ </div>
377
+
378
+ <div class='popover-arrow'>
379
+ </div>
380
+ </div>"
381
+
382
+ positionPopOver: (target)->
383
+ target_offset = target.offset()
384
+ target_width = target.outerWidth()
385
+ target_height = target.outerHeight()
386
+ popover_width = @findElement().outerWidth()
387
+
388
+ # hacky hack
389
+ pad_top = if @findSelectedImage().hasClass("graf--layoutOutsetLeft") then -30 else 30
390
+
391
+ top_value = target_offset.top - target_height - pad_top # target_positions.top + target_height
392
+ left_value = target_offset.left + (target_width/2) - (popover_width/2)
393
+
394
+ @findElement()
395
+ .css("top", top_value)
396
+ .css("left", left_value )
397
+ .show()
398
+ .addClass("is-active")
399
+
400
+ # @handleDirection(target)
401
+
402
+ hide: (ev)->
403
+ @cancelHide()
404
+ @hideTimeout = setTimeout ()=>
405
+ @findElement()
406
+ .hide()
407
+ .removeClass("is-active")
408
+ , @settings.timeout
409
+
410
+ findSelectedImage: ->
411
+ $(".graf--figure").addClass("is-selected is-mediaFocused")
73
412
 
74
413
  render: ()->
75
- $(@template()).insertAfter(@editor.$el)
414
+ $(@template()).insertAfter(@editor.$el)
@@ -26,8 +26,8 @@ class Dante.View.TooltipWidget.Uploader extends Dante.View.TooltipWidget
26
26
  </figure>"
27
27
 
28
28
  #UPLOADER
29
- #replace existing img tag , and wrap it in insertTamplate
30
- #TODO: take the url and upload it
29
+ # replaces existing img tag , and wrap it in insertTamplate
30
+ # TODO: take the url and upload it
31
31
  uploadExistentImage: (image_element, opts = {})->
32
32
  utils.log ("process image here!")
33
33
  tmpl = $(@insertTemplate())
@@ -3,6 +3,11 @@
3
3
  //= require dante/utils
4
4
  //= require dante/view
5
5
  //= require dante/editor
6
+ //= require dante/behavior
7
+ //= require dante/behaviors/suggest
8
+ //= require dante/behaviors/image
9
+ //= require dante/behaviors/list
10
+ //= require dante/behaviors/save
6
11
  //= require dante/tooltip_widget
7
12
  //= require dante/tooltip_widgets/uploader
8
13
  //= require dante/tooltip_widgets/embed
@@ -0,0 +1,209 @@
1
+ a[rel=token], .markup--query {
2
+ color: #00ab6b;
3
+ text-decoration: none;
4
+ background-image: none!important;
5
+ }
6
+
7
+
8
+ .typeahead--mention {
9
+ padding-top: 10px;
10
+ }
11
+ .typeahead .popover-inner {
12
+ padding: 0;
13
+ overflow: hidden;
14
+ min-width: 100px;
15
+ }
16
+
17
+ .typeahead .typeahead-item:first-child {
18
+ padding-top: 7px;
19
+ }
20
+
21
+ .typeahead--mention .typeahead-item {
22
+ padding: 6px 15px;
23
+ font-size: 13px;
24
+ }
25
+
26
+ .typeahead-item.is-active, .typeahead-item:hover {
27
+ background: #02b875;
28
+ color: #fff;
29
+ }
30
+ .typeahead .typeahead-item {
31
+ cursor: pointer;
32
+ padding: 5px 10px;
33
+ line-height: 2;
34
+ font-size: 12px;
35
+ text-align: left;
36
+ white-space: nowrap;
37
+ text-overflow: ellipsis;
38
+ overflow: hidden;
39
+ }
40
+
41
+ .typeahead .dante-avatar {
42
+ //float: left;
43
+ margin: 0 6px 0 -2px;
44
+ }
45
+
46
+ .avatar-image--icon {
47
+ width: 32px;
48
+ height: 32px;
49
+ }
50
+ .avatar-image {
51
+ display: inline-block;
52
+ vertical-align: middle;
53
+ border-radius: 100%;
54
+ }
55
+
56
+ .typeahead-item .avatar-image {
57
+ width: 32px;
58
+ height: 32px;
59
+ }
60
+
61
+ .typeahead--mention .popover-arrow {
62
+ display: none;
63
+ }
64
+
65
+ .markup--user {
66
+ color: #00ab6b;
67
+ text-decoration: none;
68
+ }
69
+
70
+
71
+
72
+ //popover card styles
73
+
74
+ .popover--card {
75
+ .popover-arrow{
76
+ top: -14px;
77
+ }
78
+
79
+ .popover--bottom .popover-arrow:after {
80
+ transform: rotate(45deg) translate(6px,6px);
81
+ box-shadow: -1px -1px 1px -1px rgba(0,0,0,.44);
82
+ }
83
+
84
+ .popover-arrow:after {
85
+ content: '';
86
+ display: block;
87
+ width: 14px;
88
+ height: 14px;
89
+ background: #fff;
90
+ }
91
+ }
92
+
93
+ .popover--animated.is-active {
94
+ visibility: visible;
95
+ opacity: 1;
96
+ transition: visibility 0s linear 0s,opacity .2s 0s;
97
+ }
98
+
99
+ .popover.is-active {
100
+ visibility: visible;
101
+ }
102
+
103
+ .popover--animated {
104
+ visibility: hidden;
105
+ opacity: 0;
106
+ transition: visibility 0s linear .2s,opacity .2s 0s;
107
+ }
108
+
109
+ .popoverCard {
110
+ text-align: left;
111
+ }
112
+
113
+ .popoverCard-meta {
114
+ width: 192px;
115
+ }
116
+ .u-floatLeft {
117
+ float: left!important;
118
+ }
119
+
120
+ .u-floatRight {
121
+ float: right!important;
122
+ }
123
+
124
+ .popoverCard-title {
125
+ font-size: 18px;
126
+ margin-bottom: 5px;
127
+ margin-top: 0px;
128
+ }
129
+
130
+ .link {
131
+ color: inherit;
132
+ text-decoration: none;
133
+ cursor: pointer;
134
+ }
135
+
136
+ .popoverCard-description {
137
+ overflow: hidden;
138
+ color: rgba(0,0,0,.44);
139
+ }
140
+
141
+ .u-clearfix:after {
142
+ clear: both;
143
+ }
144
+ .u-clearfix:after, .u-clearfix:before {
145
+ display: table;
146
+ content: " ";
147
+ }
148
+
149
+ .dante-avatar {
150
+ display: block;
151
+ white-space: nowrap;
152
+ overflow: hidden;
153
+ text-overflow: ellipsis;
154
+ line-height: normal;
155
+ }
156
+
157
+ .avatar-image--small {
158
+ width: 60px;
159
+ height: 60px;
160
+ }
161
+ .avatar-image {
162
+ display: inline-block;
163
+ vertical-align: middle;
164
+ border-radius: 100%;
165
+ }
166
+
167
+ .popoverCard-actions {
168
+ border-top: solid 1px rgba(0,0,0,.15);
169
+ margin-top: 10px;
170
+ padding-top: 10px;
171
+ }
172
+
173
+ .popoverCard-stats {
174
+ font-size: 14px;
175
+ line-height: 36px;
176
+ }
177
+
178
+ .popoverCard-stat {
179
+ margin-right: 10px;
180
+ color: rgba(0,0,0,.44);
181
+ }
182
+
183
+ .popoverCard-count {
184
+ padding-left: 5px;
185
+ color: rgba(0,0,0,.6);
186
+ }
187
+
188
+ // popover-align
189
+
190
+
191
+
192
+
193
+ // uploader tooltip
194
+
195
+ .graf--layoutOutsetLeft {
196
+ margin-left: -160px;
197
+ }
198
+
199
+ .graf--layoutOutsetLeft {
200
+ width: 75%;
201
+ }
202
+ .graf--layoutInsetLeft, .graf--layoutOutsetLeft {
203
+ float: left;
204
+ margin-right: 30px;
205
+ padding-top: 10px;
206
+ padding-bottom: 10px;
207
+ }
208
+
209
+ // .graf--layoutOutsetLeft
@@ -39,6 +39,20 @@
39
39
  }
40
40
  }
41
41
 
42
+ figure.graf--layoutOutsetLeft {
43
+ .imageCaption,
44
+ .postField--outsetCenterImage > .imageCaption {
45
+ position: relative;
46
+ width: 100%;
47
+ text-align: center;
48
+ left: 0;
49
+ margin-top: 10px;
50
+ }
51
+ .imageCaption:before {
52
+ display: none;
53
+ }
54
+ }
55
+
42
56
  figure.is-defaultValue .imageCaption,
43
57
  .graf--sectionCaption.is-defaultValue {
44
58
  display: none;
@@ -34,7 +34,6 @@
34
34
  font-weight: bold;
35
35
  }
36
36
 
37
-
38
37
  .tooltip-icon {
39
38
  &:before {
40
39
  font-family: 'dante-tooltip';
@@ -51,7 +50,13 @@
51
50
  }
52
51
  }
53
52
 
54
- .icon-video:before { content: "\e600"; }
55
- .icon-image:before { content: "\e601"; }
56
- .icon-plus:before { content: "\e602"; }
57
- .icon-embed:before { content: "\e603"; }
53
+ .icon-image-center:before { content: "\e900"; }
54
+ .icon-image-fill:before { content: "\e901"; }
55
+ .icon-image-left:before { content: "\e902"; }
56
+ .icon-image-wide:before { content: "\e903"; }
57
+
58
+ .icon-video:before { content: "\e600"; }
59
+ .icon-image:before { content: "\e601"; }
60
+ .icon-plus:before { content: "\e602"; }
61
+ .icon-embed:before { content: "\e603"; }
62
+