mozaik/src/styl/components/pie.styl

Mozaik dashboard composition tool

.pie
  position relative
  width  100%
  height 100%

  &_chart
    position relative
    float left
    width  60%
    height 100%

    &_wrapper
      width  100%
      height 100%

  &_outline
    fill         $pie-chart-outline-fill
    stroke       $pie-chart-outline-stroke
    stroke-width $pie-chart-outline-stroke-width

  &_svg_legend
    rect, path
      fill   $pie-svg-legend-bg-color
      stroke none

    text
      font-size 1.6vmin
      fill $pie-svg-legend-txt-color

  &_legends
    float left
    width  40%
    height 100%
    padding 2vmin
    display -webkit-flex
    display flex
    -webkit-flex-direction column
    flex-direction         column
    -webkit-justify-content center
    justify-content         center

    &_item
      position relative
      display block
      white-space pre
      margin-bottom 0.6vmin
      width 100%

      &_count
        position absolute
        right 0

      &_color
        display inline-block
        width  1.4vmin
        height 1.4vmin
        border-radius 0.7vmin
        margin-right 0.8vmin

  &_overlay
    position absolute
    top  0
    left 0
    width  100%
    height 100%
    display -webkit-flex
    display flex
    -webkit-align-items center
    align-items         center
    -webkit-justify-content center
    justify-content         center

  &_count
    line-height 1em
    text-align center
    &_value
      font-size 6vmin
    &_unit
      font-size 3vmin
    &_label
      display block
      margin-top 1vmin

  &_gauge
    &_needle
      &_base
        fill $pie-gauge-needle-color

      &_arrow
        fill $pie-gauge-needle-color