atomatic/app/style/layout.styl

An easy to use build and development tool for Atomic Design Systems, that works with rollup.js, Browserify, webpack and many more...

.layout
  height 100%
  display flex
  align-items stretch
  font-family Roboto
  color $colorText
  background-color $colorBackgroundDefault

  &__off-canvas
    flex-grow 0
    flex-shrink 0
    flex-basis 240px
    display flex
    flex-direction column
    margin-left 0
    position relative
    box-shadow $shadowDropDefault
    z-index 2
    transition all $timingNormal ease-in-out

    &&--hidden
      margin-left (@flex-basis*-1)
      box-shadow 0 0 0 0 transparent
      z-index 1

  &__canvas
    flex-grow 0
    flex-shrink 0
    flex-basis 100%
    background-color $hexPorcelain
    position relative
    z-index 0

    @media $mediaMinTabletMid
      flex-grow 2
      flex-shrink 2