mozaik/src/styl/components/widget.styl

Mozaik dashboard composition tool

.widget
  &__wrapper
    position absolute
    top  0
    left 0
    padding ($widget-spacing / 2)

  position relative
  width  100%
  height 100%
  background $widget-bg-color
  border-radius $widget-border-radius
  box-shadow $widget-shadow
  border $widget-border

  &__header
    position relative
    overflow hidden
    font $widget-header-font
    height      $widget-header-height
    line-height $widget-header-height
    border-radius $widget-header-border-radius
    padding 0 $widget-inner-spacing
    background-color $widget-header-bg-color
    color            $widget-header-txt-color
    border-bottom $widget-header-border-bottom
    box-shadow $widget-header-shadow
    white-space pre

    &__count
      display inline-block
      background-color $widget-header-count-bg-color
      color            $widget-header-count-txt-color
      line-height 1em
      border-radius $widget-header-count-border-radius
      padding $widget-header-count-padding
      vertical-align middle
      margin-left 1.2vmin
      box-shadow  $widget-header-count-shadow
      text-shadow $widget-header-count-txt-shadow
      border $widget-header-count-border

    .fa
      font-size $widget-header-icon-size
      position absolute
      top   (($widget-header-height - $widget-header-icon-size) / 2)
      right 15px
      color $widget-header-icon-color

  &__body
    position absolute
    top    $widget-header-height
    right  0
    bottom 0
    left   0
    overflow-x hidden
    overflow-y auto
    border-radius $widget-body-border-radius
    background $widget-body-bg-color
    box-shadow $widget-body-shadow

  &__list
    list-style none
    margin  0
    padding 0