title.html 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. <div id="snippet-title">
  2. <h1></h1>
  3. <p></p>
  4. </div>
  5. <h3>Console</h3>
  6. <p>You can check the content of the title and body elements below.</p>
  7. <pre><code class="title-console title-console__title">''</code></pre>
  8. <pre><code class="title-console title-console__body">'&lt;p>&amp;nbsp;&lt;/p>'</code></pre>
  9. <pre><code class="title-console title-console__data">''</code></pre>
  10. <style>
  11. .ck.ck-editor__editable_inline {
  12. border-color: hsl(0, 0%, 77%);
  13. }
  14. #snippet-title {
  15. min-height: 300px;
  16. max-width: 450px;
  17. padding: 50px;
  18. margin: 50px auto 0;
  19. box-shadow: 5px 5px 1px 0px hsla( 0, 0%, 0%, 0.1);
  20. }
  21. #snippet-title h1 {
  22. padding-top: 0;
  23. }
  24. #title-console {
  25. max-height: 300px;
  26. overflow: auto;
  27. white-space: normal;
  28. background: #2b2c26;
  29. margin-top: 20px;
  30. transition: background-color 500ms;
  31. }
  32. #title-console.updated {
  33. background: green;
  34. }
  35. .title-console__title,
  36. .title-console__body {
  37. margin-bottom: 10px;
  38. }
  39. .title-console__title::before,
  40. .title-console__body::before,
  41. .title-console__data::before {
  42. display: inline-block;
  43. margin-right: 5px;
  44. opacity: 0.5;
  45. }
  46. .title-console__title::before {
  47. content: 'Title:'
  48. }
  49. .title-console__body::before {
  50. content: 'Body:'
  51. }
  52. .title-console__data::before {
  53. content: 'Data:';
  54. }
  55. </style>