core.styl

// Styles necessary for Quill

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

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-clipboard
  left: -100000px
  position: absolute
  top: 50%

.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
  text-align: left
  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)
  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-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-direction-rtl
    direction: rtl
    text-align: inherit

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

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