8
0

title.html 1.3 KB

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