title.html 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  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="plaintext title-console title-console__title">''</code></pre>
  8. <pre><code class="plaintext title-console title-console__body">'&lt;p>&amp;nbsp;&lt;/p>'</code></pre>
  9. <pre><code class="plaintext title-console title-console__data">''</code></pre>
  10. <style>
  11. .ck.ck-editor__editable_inline {
  12. border-color: hsl(0, 0%, 77%);
  13. }
  14. /* Let's move pilcrow icon inside the editor space. */
  15. .ck.ck-block-toolbar-button {
  16. transform: translateX( 40px );
  17. }
  18. #snippet-title {
  19. min-height: 300px;
  20. max-width: 450px;
  21. padding: 50px;
  22. margin: 50px auto 0;
  23. box-shadow: 5px 5px 1px 0px hsla( 0, 0%, 0%, 0.1);
  24. }
  25. #snippet-title h1 {
  26. padding-top: 0;
  27. }
  28. #title-console {
  29. max-height: 300px;
  30. overflow: auto;
  31. white-space: normal;
  32. background: #2b2c26;
  33. margin-top: 20px;
  34. transition: background-color 500ms;
  35. }
  36. #title-console.updated {
  37. background: green;
  38. }
  39. .title-console__title,
  40. .title-console__body {
  41. margin-bottom: 10px;
  42. }
  43. .title-console__title::before,
  44. .title-console__body::before,
  45. .title-console__data::before {
  46. display: inline-block;
  47. margin-right: 5px;
  48. opacity: 0.5;
  49. }
  50. .title-console__title::before {
  51. content: 'Title:'
  52. }
  53. .title-console__body::before {
  54. content: 'Body:'
  55. }
  56. .title-console__data::before {
  57. content: 'Data:';
  58. }
  59. </style>