d-grouped-barchart/index.styl

Derby grouped bar chart component using d3 and d3-tip.

C = '.d-grouped-barchart'

{C}
  width inherit
  height 300px
  svg
    width inherit
    height inherit

  ._axis
    path, line
      fill none
      stroke #000
      shape-rendering crispEdges

  &-fullscreen
    position fixed
    background white
    left 0
    top 0
    width 100%
    height 100%
    z-index 251


.d3-tip
  line-height 1
  font-weight bold
  font-size 12px
  padding 8px
  background rgba(0, 0, 0, 0.8)
  color white
  top 100%
  z-index 2 !important
  /* Creates a small triangle extender for the tooltip */
  &:after
    box-sizing border-box
    display inline
    font-size 10px
    width 100%
    line-height 1
    color rgba(0, 0, 0, 0.8)
    content "\25BC"
    position absolute
    text-align center
  /* Style northward tooltips differently */
  &.n:after
    margin (-1px) 0 0 0
    top 100%
    left 0

{C}-topbar
  width 100%
  margin-bottom 20px
  display flex
  justify-content space-between
  align-items center
  position relative

  &-title
    color #37579c
    font-size 1.2em

  &-userBlock
    display flex
    align-items center
    cursor pointer

    label
      text-transform uppercase
      padding-right 10px
      cursor pointer

    input
      display none

  &-menu
    display flex
    flex-basis 275px
    justify-content flex-end
    align-items center
    min-width 230px
    margin-right 6px

  &-arrow
    padding-top 4px
    height 15px
    opacity .7

  &-submenu
    background #fff
    position absolute
    top 25px
    z-index 60
    right 2px
    border-radius 2px
    border: 1px solid #d3d3d3
    box-shadow 0px 1px 5px rgba(0, 0, 0, .15)
    visibility visible
    opacity 1
    transition .2s
    padding 15px 30px

    &.-hidden
      visibility hidden
      opacity 0

    div
      cursor pointer
      margin 5px 0px