8
0

element-reconversion-demo.html 1.8 KB

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