word-count-update.html 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. <style>
  2. .demo-update {
  3. border: 1px solid var(--ck-color-base-border);
  4. border-radius: var(--ck-border-radius);
  5. box-shadow: 2px 2px 0px hsla( 0, 0%, 0%, 0.1 );
  6. margin: 1.5em 0;
  7. padding: 1em;
  8. }
  9. .demo-update h3 {
  10. font-size: 18px;
  11. font-weight: bold;
  12. margin: 0 0 .5em;
  13. padding: 0;
  14. }
  15. .demo-update .ck.ck-editor__editable_inline {
  16. border: 1px solid hsla( 0, 0%, 0%, 0.15 );
  17. transition: background .5s ease-out;
  18. min-height: 6em;
  19. margin-bottom: 1em;
  20. }
  21. .demo-update__controls {
  22. display: flex;
  23. flex-direction: row;
  24. align-items: center;
  25. }
  26. .demo-update__chart {
  27. margin-right: 1em;
  28. }
  29. .demo-update__chart__circle {
  30. transform: rotate(-90deg);
  31. transform-origin: center;
  32. }
  33. .demo-update__chart__characters {
  34. font-size: 13px;
  35. font-weight: bold;
  36. }
  37. .demo-update__words {
  38. flex-grow: 1;
  39. opacity: .5;
  40. }
  41. .demo-update__limit-close .demo-update__chart__circle {
  42. stroke: hsl( 30, 100%, 52% );
  43. }
  44. .demo-update__limit-exceeded .ck.ck-editor__editable_inline {
  45. background: hsl( 0, 100%, 97% );
  46. }
  47. .demo-update__limit-exceeded .demo-update__chart__circle {
  48. stroke: hsl( 0, 100%, 52% );
  49. }
  50. .demo-update__limit-exceeded .demo-update__chart__characters {
  51. fill: hsl( 0, 100%, 52% );
  52. }
  53. </style>
  54. <div class="demo-update">
  55. <h3>Post editor with word count</h3>
  56. <div id="demo-update__editor">
  57. <p>Tourists frequently admit that <a href="https://en.wikipedia.org/wiki/Taj_Mahal">Taj Mahal</a> “simply cannot be described with words”.</p>
  58. </div>
  59. <div class="demo-update__controls">
  60. <span class="demo-update__words"></span>
  61. <svg class="demo-update__chart" viewbox="0 0 40 40" width="40" height="40" xmlns="http://www.w3.org/2000/svg">
  62. <circle stroke="hsl(0, 0%, 93%)" stroke-width="3" fill="none" cx="20" cy="20" r="17" />
  63. <circle class="demo-update__chart__circle" stroke="hsl(202, 92%, 59%)" stroke-width="3" stroke-dasharray="134,534" stroke-linecap="round" fill="none" cx="20" cy="20" r="17" />
  64. <text class="demo-update__chart__characters" x="50%" y="50%" dominant-baseline="central" text-anchor="middle"></text>
  65. </svg>
  66. <button type="button" class="demo-update__send">Send post</button>
  67. </div>
  68. </div>