element-reconversion-demo.html 1.6 KB

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