element-reconversion-demo.html 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  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. </style>
  41. <div id="editor-element-reconversion">
  42. <p>Info:</p>
  43. <div class="info-box info-box-info">
  44. <div class="info-box-title">Hey! Did you know?</div>
  45. <div class="info-box-content">
  46. <p>Editable content of the <strong>info box</strong>.</p>
  47. </div>
  48. <div class="info-box-content">
  49. <p>Another content box.</p>
  50. </div>
  51. </div>
  52. <p>Warning:</p>
  53. <div class="info-box info-box-warning">
  54. <div class="info-box-title">Watch out for <strong>this</strong>!</div>
  55. <div class="info-box-content">
  56. <p>Editable content of the <strong>info box</strong>.</p>
  57. </div>
  58. </div>
  59. </div>