core.styl

LIST_STYLE = decimal lower-alpha lower-roman
MAX_INDENT = 8

controlHeight = 24px
inputPadding = 5px
iconPadding = 3px inputPadding


resets(arr)
  unquote('list-' + join(' list-', arr))

.ql-container
  box-sizing: border-box
  font-family: Helvetica, Arial, sans-serif
  font-size: 13px
  height: 100%
  margin: 0px
  position: relative

.ql-hidden
  display: none

.ql-clipboard
  left: -100000px
  position: absolute
  top: 50%

.ql-tooltip
  position: absolute
  a
    cursor: pointer
    text-decoration: none

.ql-toolbar
  button
    background: none
    border: none
    cursor: pointer
    display: inline-block
    float: left
    height: controlHeight
    outline: none
    padding: iconPadding
    width: controlHeight

    svg
      height: 100%

  .ql-stroke
    fill: none
    stroke-linecap: round
    stroke-linejoin: round
    stroke-width: 2
  .ql-stroke-mitter
    fill: none
    stroke-mitterlimit: 10
    stroke-width: 2

  .ql-empty
    fill: none
  .ql-even
    fill-rule: evenodd
  .ql-thin, .ql-stroke.ql-thin
    stroke-width: 1
  .ql-transparent
    opacity: 0.4

.ql-editor
  box-sizing: border-box
  cursor: text
  line-height: 1.42
  height: 100%
  outline: none
  overflow-y: auto
  padding: 12px 15px
  tab-size: 4
  white-space: pre-wrap

  p, ol, ul, pre, blockquote, h1, h2, h3, h4, h5, h6
    margin: 0
    padding: 0
    counter-reset: resets(1..MAX_INDENT)
  h1
    font-size: 2em
  h2
    font-size: 1.5em
  h3
    font-size: 1.17em
  h4
    font-size: 1em
  h5
    font-size: 0.83em
  h6
    font-size: 0.67em
  pre
    white-space: pre-wrap
  a
    text-decoration: underline
  blockquote
    border-left: 4px solid #ccc
    font-style: italic
    margin-bottom: 5px
    margin-top: 5px
    padding-left: 16px
  code, pre:not(.hljs)    // TODO core should not be aware of hljs
    background-color: #f0f0f0
  code, pre
    border-radius: 3px
  code
    font-size: 85%
    padding-bottom: 2px
    padding-top: 2px
    &:before, &:after
      content: "\00a0"
      letter-spacing: -2px
  *:not(pre) + pre, pre:first-of-type
    margin-top: 5px
    padding-top: 5px
  pre
    margin-bottom: 5px
    padding: 0px 10px 5px
  pre + pre
    margin-top: -10px
  img
    max-width: 100%
  ol
    padding-left: 20px
  ul
    padding-left: 8px
    list-style: disc inside
  ol
    list-style-type: none
    position: relative
    li
      counter-reset: resets(1..MAX_INDENT)
      counter-increment: unquote('list-' + num)
      &:before
        content: unquote('counter(list-' + num + ', ' + LIST_STYLE[0] + ')') '. '
        margin-right: -16px
        position: absolute
        right: 100%
        text-align: right
    for num in (1..MAX_INDENT)
      li.ql-indent-{num}
        counter-increment: unquote('list-' + num)
        &:before
          content: unquote('counter(list-' + num + ', ' + LIST_STYLE[num%3] + ')') '. '
          margin-right: (-40*num - 16)px
      if (num < MAX_INDENT)
        li.ql-indent-{num}
          counter-reset: resets((num+1)..MAX_INDENT)
  for num in (1..MAX_INDENT)
    .ql-indent-{num}
      padding-left: (40 * num)px

  video
    display: block
  video.ql-align-center
    margin: 0 auto
  video.ql-align-right
    margin: 0 0 0 auto

  .ql-align-center
    text-align: center
  .ql-align-justify
    text-align: justify
  .ql-align-right
    text-align: right

  .ql-bg-black
    background-color: rgb(0,0,0);
  .ql-bg-red
    background-color: rgb(230,0,0);
  .ql-bg-orange
    background-color: rgb(255,153,0);
  .ql-bg-yellow
    background-color: rgb(255,255,0);
  .ql-bg-green
    background-color: rgb(0,138,0);
  .ql-bg-blue
    background-color: rgb(0,102,204);
  .ql-bg-purple
    background-color: rgb(153,51,255);

  .ql-color-white
    color: rgb(255,255,255);
  .ql-color-red
    color: rgb(230,0,0);
  .ql-color-orange
    color: rgb(255,153,0);
  .ql-color-yellow
    color: rgb(255,255,0);
  .ql-color-green
    color: rgb(0,138,0);
  .ql-color-blue
    color: rgb(0,102,204);
  .ql-color-purple
    color: rgb(153,51,255);

  .ql-font-serif
    font-family: Georgia, Times New Roman, serif;
  .ql-font-monospace
    font-family: Monaco, Courier New, monospace;

  .ql-size-small
    font-size: 10px;
  .ql-size-large
    font-size: 18px;
  .ql-size-huge
    font-size: 32px;

.ql-editor.ql-empty::before
  color: rgba(0,0,0,0.6);
  content: attr(data-placeholder);
  position: absolute;