fiedl/your_platform

/*
 *=require 'primer/build/build'
 *=require_self
 */

//@import "bootstrap/variables"
//@import "bootstrap/mixins"
//@import "bootstrap/grid"
//@import "bootstrap/alerts"
//@import "bootstrap/panels"
//@import "bootstrap/labels"
//@import "bootstrap/dropdowns"
//@import "bootstrap/media"

body.primer-layout

  .container
    width: auto
    padding-left: 20px
    padding-right: 20px

  header.masthead
    padding-top: 1rem
    margin-bottom: 1.0rem
    text-align: center
    background-color: #4078c0
    font-family: "Helvetica Neue"

    .container
      display: flex
      align-items: baseline
      flex-wrap: wrap
      justify-content: center
      padding-left: 15px
      padding-right: 15px
      > *
        margin-bottom: 10px
        margin-left: 5px
        margin-right: 5px

    .masthead-logo
      color: #fff
      display: inline-block
      font-size: 140%
      &:hover
        text-decoration: none
      img
        height: 24px
        margin-top: 4px
        margin-bottom: -4px

    .header-search
      flex-grow: 1
      input
        border: none
        border-radius: 3px
        background: darken(#4078c0, 20%)
        color: #fff
        padding: 5px
        min-width: 220px
      input::placeholder
        color: #eee

    .header-help
      background: lighten(#4078c0, 20%)

    nav.masthead-nav
      flex-grow: 2
      a
        color: #fff
        text-decoration: none
        font-size: 110%
        margin-right: 5px
      a.active
        font-weight: 500
        border-bottom: solid 2px

    .header-avatar
      background: #ddd
      border-radius: 50px
      width: 42px
      height: 42px

      .dropdown-menu
        li.user_name, li.user_email
          font-size: 70%
          padding: 3px 20px
        li.user_email
          padding-top: 0px

  .avatar img
    border-radius: 50px

@media all and (min-width: 1160px)
  .header-help, .header-avatar
    order: 3

body.primer-layout
  #footer
    margin-top: 80px
    background: #444
    font-size: 90%
    color: #bbb
    padding: 20px
    a
      color: #ddd
    ul, #version_footer
      text-align: center
    ul
      list-style: none
    li
      display: inline
      margin: 5px
    h1, h2, h3, h4
      font-size: 100%
      font-weight: bold


// This makes the footer position.
// https://codepen.io/cbracco/pen/zekgx

html
  height: 100%
  box-sizing: border-box

*, *:before, *:after
  box-sizing: inherit

body.primer-layout
  position: relative
  padding-bottom: 16rem
  min-height: 100%
  background-color: #fafbfc

  #footer
    position: absolute
    right: 0
    left: 0
    bottom: 0

  #subheader
    padding-bottom: 0
    background-color: #fafbfc
    border-bottom: 1px solid #e1e4e8

  .box_header
    h1, h2, h3, h4
      font-size: 20px

  #breadcrumbs
    font-size: 80%
    margin-bottom: 1.5rem

  table.datatable
    border: none

    td, th
      padding: 5px 0px

    tr, tr.odd, tr.even, td, tr td.sorting_1
      background-color: none
      background: none

    tbody tr:hover
      background: #f5f5f5

  .dataTables_filter, .dataTables_info
    display: none