quill/assets/base.styl

// Styles shared between snow and bubble

controlHeight = 24px
inputPaddingWidth = 5px
inputPaddingHeight = 3px

colorItemMargin = 2px
colorItemSize = 16px
colorItemsPerRow = 7


.ql-{themeName}.ql-toolbar, .ql-{themeName} .ql-toolbar
  &:after
    clear: both
    content: ''
    display: table

  button
    background: none
    border: none
    cursor: pointer
    display: inline-block
    float: left
    height: controlHeight
    padding: inputPaddingHeight inputPaddingWidth
    width: controlHeight + (inputPaddingWidth - inputPaddingHeight)*2

    svg
      float: left
      height: 100%

    &:active:hover
      outline: none

  input.ql-image[type=file]
    display: none

  button:hover, button:focus, button.ql-active,
  .ql-picker-label:hover, .ql-picker-label.ql-active,
  .ql-picker-item:hover, .ql-picker-item.ql-selected
    color: activeColor
    .ql-fill, .ql-stroke.ql-fill
      fill: activeColor
    .ql-stroke, .ql-stroke-miter
      stroke: activeColor

// Fix for iOS not losing hover on touch
@media (pointer: coarse)
  .ql-{themeName}.ql-toolbar, .ql-{themeName} .ql-toolbar
    button:hover:not(.ql-active)
      color: inactiveColor
      .ql-fill, .ql-stroke.ql-fill
        fill: inactiveColor
      .ql-stroke, .ql-stroke-miter
        stroke: inactiveColor

.ql-{themeName}
  box-sizing: border-box
  *
    box-sizing: border-box

  .ql-hidden
    display: none
  .ql-out-bottom, .ql-out-top
    visibility: hidden

  .ql-tooltip
    position: absolute
    transform: translateY(10px)
    a
      cursor: pointer
      text-decoration: none
  .ql-tooltip.ql-flip
    transform: translateY(-10px)

  .ql-formats
    &:after
      clear: both
      content: ''
      display: table
    display: inline-block
    vertical-align: middle

  .ql-stroke
    fill: none
    stroke: inactiveColor
    stroke-linecap: round
    stroke-linejoin: round
    stroke-width: 2
  .ql-stroke-miter
    fill: none
    stroke: inactiveColor
    stroke-miterlimit: 10
    stroke-width: 2

  .ql-fill, .ql-stroke.ql-fill
    fill: inactiveColor

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

  .ql-direction
    svg:last-child
      display: none
  .ql-direction.ql-active
    svg:last-child
      display: inline
    svg:first-child
      display: none

  .ql-editor
    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
    a
      text-decoration: underline
    blockquote
      border-left: 4px solid #ccc
      margin-bottom: 5px
      margin-top: 5px
      padding-left: 16px
    code, pre
      background-color: #f0f0f0
      border-radius: 3px
    pre
      white-space: pre-wrap
      margin-bottom: 5px
      margin-top: 5px
      padding: 5px 10px
    code
      font-size: 85%
      padding: 2px 4px
    pre.ql-syntax
      background-color: #23241f
      color: #f8f8f2;
      overflow: visible
    img
      max-width: 100%

  .ql-picker
    color: inactiveColor
    display: inline-block
    float: left
    font-size: 14px
    font-weight: 500
    height: controlHeight
    position: relative
    vertical-align: middle
  .ql-picker-label
    cursor: pointer
    display: inline-block
    height: 100%
    padding-left: 8px
    padding-right: 2px
    position: relative
    width: 100%
    &::before
      display: inline-block
      line-height: 22px
  .ql-picker-options
    background-color: backgroundColor
    display: none
    min-width: 100%
    padding: 4px 8px
    position: absolute
    white-space: nowrap
    .ql-picker-item
      cursor: pointer
      display: block
      padding-bottom: 5px
      padding-top: 5px
  .ql-picker.ql-expanded
    .ql-picker-label
      color: borderColor
      z-index: 2
      .ql-fill
        fill: borderColor
      .ql-stroke
        stroke: borderColor
    .ql-picker-options
      display: block
      margin-top: -1px
      top: 100%
      z-index: 1

  .ql-color-picker, .ql-icon-picker
    width: controlHeight + 4
    .ql-picker-label
      padding: 2px 4px
      svg
        right: 4px
  .ql-icon-picker
    .ql-picker-options
      padding: 4px 0px
    .ql-picker-item
      height: controlHeight
      width: controlHeight
      padding: 2px 4px
  .ql-color-picker
    .ql-picker-options
      padding: inputPaddingHeight inputPaddingWidth
      width: (colorItemSize + 2*colorItemMargin) * colorItemsPerRow + 2*inputPaddingWidth + 2  // +2 for the border
    .ql-picker-item
      border: 1px solid transparent
      float: left
      height: colorItemSize
      margin: colorItemMargin
      padding: 0px
      width: colorItemSize

  .ql-picker:not(.ql-color-picker):not(.ql-icon-picker)
    svg
      position: absolute
      margin-top: -9px
      right: 0
      top: 50%
      width: 18px

  .ql-picker.ql-header, .ql-picker.ql-font, .ql-picker.ql-size
    .ql-picker-label[data-label]:not([data-label='']),
    .ql-picker-item[data-label]:not([data-label=''])
      &::before
        content: attr(data-label)

  .ql-picker.ql-header
    width: 98px
    .ql-picker-label::before,
    .ql-picker-item::before
      content: 'Normal'
    for num in (1..6)
      .ql-picker-label[data-value=\"{num}\"]::before,
      .ql-picker-item[data-value=\"{num}\"]::before
        content: 'Heading ' + num
    .ql-picker-item[data-value="1"]::before
      font-size: 2em
    .ql-picker-item[data-value="2"]::before
      font-size: 1.5em
    .ql-picker-item[data-value="3"]::before
      font-size: 1.17em
    .ql-picker-item[data-value="4"]::before
      font-size: 1em
    .ql-picker-item[data-value="5"]::before
      font-size: 0.83em
    .ql-picker-item[data-value="6"]::before
      font-size: 0.67em

  .ql-picker.ql-font
    width: 108px
    .ql-picker-label::before,
    .ql-picker-item::before
      content: 'Sans Serif'
    .ql-picker-label[data-value=serif]::before,
    .ql-picker-item[data-value=serif]::before
      content: 'Serif'
    .ql-picker-label[data-value=monospace]::before,
    .ql-picker-item[data-value=monospace]::before
      content: 'Monospace'
    .ql-picker-item[data-value=serif]::before
      font-family: Georgia, Times New Roman, serif;
    .ql-picker-item[data-value=monospace]::before
      font-family: Monaco, Courier New, monospace;

  .ql-picker.ql-size
    width: 98px
    .ql-picker-label::before,
    .ql-picker-item::before
      content: 'Normal'
    .ql-picker-label[data-value=small]::before,
    .ql-picker-item[data-value=small]::before
      content: 'Small'
    .ql-picker-label[data-value=large]::before,
    .ql-picker-item[data-value=large]::before
      content: 'Large'
    .ql-picker-label[data-value=huge]::before,
    .ql-picker-item[data-value=huge]::before
      content: 'Huge'
    .ql-picker-item[data-value=small]::before
      font-size: 10px
    .ql-picker-item[data-value=large]::before
      font-size: 18px
    .ql-picker-item[data-value=huge]::before
      font-size: 32px

  .ql-color-picker.ql-background
    .ql-picker-item
      background-color: #fff;
  .ql-color-picker.ql-color
    .ql-picker-item
      background-color: #000;