element-reconversion-demo.html 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. <style>
  2. .ck-content .info-box {
  3. background: hsl(0, 0%, 45%);
  4. border: 1px solid hsl(0, 0%, 80%);
  5. padding: 1em;
  6. border-radius: 8px;
  7. }
  8. .ck-content .info-box-title {
  9. margin-bottom: 0.5em;
  10. font-size: 1.4em;
  11. color: inherit;
  12. border-bottom-color: inherit;
  13. border-bottom-style: solid;
  14. border-bottom-width: 1px;
  15. }
  16. .ck-content .info-box-warning {
  17. background: hsl(48, 100%, 87%);
  18. border: 1px solid hsl(47, 100%, 62%);
  19. }
  20. .ck-content .info-box-warning .info-box-title {
  21. color: hsl(47, 100%, 32%)
  22. }
  23. .ck-content .info-box-info {
  24. background: hsl(205, 100%, 95%);
  25. border: 1px solid hsl(205, 91%, 82%);
  26. }
  27. .ck-content .info-box-info .info-box-title {
  28. color: hsl(204, 79%, 41%)
  29. }
  30. .ck-content .info-box-content {
  31. padding: 8px 10px;
  32. background: hsl(0, 0%, 100%);
  33. border-radius: 6px;
  34. margin-top: 0.5em;
  35. }
  36. .ck-content .info-box-content p:only-child,
  37. .ck-content .info-box-content p:last-child {
  38. margin-bottom: 0;
  39. }
  40. .ck-content .info-box-url {
  41. margin: 0.5em 0;
  42. font-style: italic;
  43. font-size: 0.8em;
  44. color: hsl(0, 0%, 20%);
  45. }
  46. .ck-content .info-box-actions {
  47. margin: 0.5em 0;
  48. }
  49. .ck-content .info-box-actions button {
  50. font-size: 0.8em;
  51. border: 1px solid hsl(0, 0%, 80%);
  52. padding: 2px 4px;
  53. margin-right: 0.5em;
  54. }
  55. </style>
  56. <div id="editor-element-reconversion">
  57. <p>Info box with two content fields:</p>
  58. <div class="info-box info-box-info">
  59. <div class="info-box-title">Hey! Did you know?</div>
  60. <div class="info-box-content">
  61. <p>Editable content of the <strong>info box</strong>.</p>
  62. </div>
  63. <div class="info-box-content">
  64. <p>Another content box.</p>
  65. </div>
  66. </div>
  67. <p>Warning box with URL attribute:</p>
  68. <div class="info-box info-box-warning">
  69. <div class="info-box-title">Watch out for <strong>this</strong>!</div>
  70. <div class="info-box-content">
  71. <p>Editable content of the <strong>info box</strong>.</p>
  72. </div>
  73. allowContentOf: '$root',<div class="info-box-url">http://cksource.com</div>
  74. </div>
  75. </div>