AutoMate/src/css/style.styl

@import './foundation.styl'

/** Appearance */
//@import url('https://fonts.googleapis.com/css?family=Mukta+Vaani')
//@import url('https://fonts.googleapis.com/css?family=Proza+Libre')
//@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro')
//@import url('https://fonts.googleapis.com/css?family=Alegreya+Sans')
@import url('https://fonts.googleapis.com/css?family=Roboto')

.clearfix
  overflow auto
  zoom 1
*
  //font-family 'Mukta Vaani', sans-serif
  //font-family 'Alegreya Sans', sans-serif; 
  font-family 'Roboto', sans-serif
  font-size 24
  box-sizing border-box
h1, h2, h3, h4, th
  font-family 'Roboto', sans-serif
  //font-family 'Proza Libre', sans-serif
code
  font-family 'Source Code Pro', monospace
p, input
  //font-family: 'Alegreya Sans', sans-serif;
  font-family 'Roboto', sans-serif

/** Main layout (Flexbox-Design) */
.app-wrapper
  display flex
  min-height 100vh
  flex-direction column
  align-content center
  
  .app-header
    background black
    color white
    flex 0 0 60px
    
    .app-nav
      ul
        padding 0
        display flex
        list-style none
        li
          flex 1 1 100px
    
  .app-main
    flex 1 1 400px
    display flex
    
    .app-content
      flex 4 1 560px
      
    .content-flex
      display flex
      
      .content-aside-left
        flex 1 0 200px
      .content-main
        flex 4 1 400px
      .content-aside-right
        flex 1 0 200px
      
    .app-aside-left
      flex 1 0 200px
      order -1    
      display flex
      flex-direction column 
      div, ul
        flex 1 1  
      
    .app-aside-right
      flex 1 0 200px
      order 999
      flex-direction column
    
  .app-footer
    background black
    color white
    flex 0 0 40px
    
/** Scrollable lists */
.scrollable
  max-height 100%
  overflow-y scroll
  
/** Forms */
form
  *
    padding 0.2em 0.6em
    margin 0.2em 0.3em
  button
    background #F0D1D1
    border 1px solid #CC8A8A
    border-bottom 3px solid #CC8A8A
  input, textbox, select
    border 1px solid #CC8A8A

/** Tables */
table, tbody, thead
  border-collapse collapse
  tr, th, td
    border-collapse collapse
    border 1px solid #DCDEF2