_bulma-dashboard.sass

$dashboard-panel-width: 25rem !default
$dashboard-panel-padding: 2rem 1.5rem !default
$dashboard-panel-height: 100% !default
$dashboard-panel-header-bottom-margin: 2rem !default
$dashboard-panel-footer-top-margin: 2rem !default
$dashboard-panel-width-left: $dashboard-panel-width !default
$dashboard-panel-width-right: $dashboard-panel-width !default

=flex
  display: flex

=row
  +flex
  flex-direction: row

=column
  +flex
  flex-direction: column

=fill
  flex: 1

=panel($width)
  flex: 0 0 $width

=x-centered
  +flex
  justify-content: center

.is-scrollable
  overflow-y: auto

.dashboard
  +row

  &.is-full-height
    height: 100vh

  &-panel
    +column
    padding: $dashboard-panel-padding
    flex: 0 0 $dashboard-panel-width
    height: $dashboard-panel-height

    &.left
      +panel($dashboard-panel-width-left)

    &.right
      +panel($dashboard-panel-width-right)

    &.has-thick-padding
      padding: 3rem 2rem

    &.is-one-quarter
      +panel(25%)
    &.is-half
      +panel(50%)
    &.is-one-third
      +panel(percentage(1 / 3))
    &.is-small
      +panel(15rem)
    &.is-medium
      +panel(20rem)
    &.is-large
      +panel(30rem)

    &-header, &-content, &-footer
      &.is-centered
        +x-centered

    &-header
      margin-bottom: $dashboard-panel-header-bottom-margin

    &-main
      +fill

    &-footer
      margin-top: $dashboard-panel-footer-top-margin

  &-main
    +flex
    +fill
    +column
    min-height: 100vh
  
    .navbar
      &.is-fixed-top
        position: -webkit-sticky
        position: sticky
        top: 0

    .footer
      +fill