atomatic/app/style/main-container.styl

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

.main-container
  color $colorText
  font-family Roboto
  background transparent!important

  &&--patterns
  &&--components
    height 100vh
    flex 0 0 100%
    overflow-y auto

  &__head
    truncate()
    height 80px
    line-height @height
    padding 0 $paddingLarge
    background-color $colorBackgroundDefault
    color $colorText
    font-size 24px
    text-transform uppercase
    font-weight 300
    transition padding $timingFast

    @media $mediaMinTabletStart
      font-size 32px
      padding-left $paddingXLarge
      padding-right @padding-left

  &__body
    color inherit
    padding $paddingNormal ($paddingLarge - $paddingNormal)
    transition padding $timingFast

    @media $mediaMinTabletStart
      padding $paddingXLarge ($paddingXLarge - $paddingNormal)