extending-content-custom-element-converter.html 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  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. font-weight: bold;
  12. color: inherit;
  13. }
  14. .ck-content .info-box-warning {
  15. background: hsl(48, 100%, 87%);
  16. border: 1px solid hsl(47, 100%, 62%);
  17. }
  18. .ck-content .info-box-warning .info-box-title {
  19. color: hsl(47, 100%, 32%)
  20. }
  21. .ck-content .info-box-info {
  22. background: hsl(205, 100%, 95%);
  23. border: 1px solid hsl(205, 91%, 82%);
  24. }
  25. .ck-content .info-box-info .info-box-title {
  26. color: hsl(204, 79%, 41%)
  27. }
  28. .ck-content .info-box-content {
  29. padding: 8px 10px;
  30. background: hsl(0, 0%, 100%);
  31. border-radius: 6px;
  32. }
  33. .ck-content .info-box-content p:only-child,
  34. .ck-content .info-box-content p:last-child {
  35. margin-bottom: 0;
  36. }
  37. </style>
  38. <div id="editor-custom-element-converter">
  39. <p>Info:</p>
  40. <div class="info-box info-box-info">
  41. <div class="info-box-title">Info</div>
  42. <div class="info-box-content">
  43. <p>Editable content of the <strong>info box</strong>.</p>
  44. </div>
  45. </div>
  46. <p>Warning:</p>
  47. <div class="info-box info-box-warning">
  48. <div class="info-box-title">Warning</div>
  49. <div class="info-box-content">
  50. <p>Editable content of the <strong>info box</strong>.</p>
  51. </div>
  52. </div>
  53. </div>