~doyle/zpan.git

.zpan-container
  max-width: 1000px
  padding: 8px
  margin: auto

fieldset.mdl-textfield
  display: block

.no-decoration
  text-decoration: none

.mdl-data-table td
  border-top: 1px solid rgba(black, 0.02)
  border-bottom: 1px solid rgba(black, 0.02)

.table-responsive
  overflow-x: auto
  min-height: 0.01%

  @media screen and (max-width: 767px)
    width: 100%
    overflow-y: hidden
    -ms-overflow-style: -ms-autohiding-scrollbar
    border: 1px solid rgba(black, 0.02)

    > table
      margin: 0
      border: none
      box-shadow: none

      > thead, > tbody, > tfoot
        > tr, > th, > td
          white-space: nowrap

        > tr
          > th:first-child, td:first-child
            border-left: none
          > th:last-child, td:last-child
            border-right: none

      > tbody, > tfoot
        > tr:last-child
          > th, > td
            border-bottom: none

$alerts: ("success": (#dff0d8, darken(adjust-hue(#dff0d8, -10), 5%), #3c763d))
$alerts: map_merge($alerts, ("info": (#31708f, darken(adjust-hue(#d9edf7, -10), 7%), #31708f)))
$alerts: map_merge($alerts, ("warning": (#fcf8e3, darken(adjust-hue(#fcf8e3, -10), 5%), #8a6d3b)))
$alerts: map_merge($alerts, ("danger": (#f2dede, darken(adjust-hue(#fcf8e3, -10), 5%), #a94442)))

.alert
  padding: 15px
  margin: 1.2rem 0 1rem 0
  border: 1px solid transparent
  border-radius: .25rem

  > p, > ul
    margin-bottom: 0

  > p + p
    margin-top: 5px

  @each $name, $values in $alerts
    &-#{$name}
      background: nth($values, 1)
      border-color: nth($values, 2)
      color: nth($values, 3)

.timetable
  ul
    columns: 4
    list-style: none