%h1
  Providers
%p
  (An example table + detail view scenario)
%main
  %table
    %thead
      %tr
        %th
          Provider Name
        %th
          E-mail
        %th
    %tfoot
      %tr
        %th{:colspan => "3"}
          Year: 2014
    %tbody
      %tr
        %td{:data => {:title => "Provider Name"}}
          Iacob Geaorgescu
        %td{:data => {:title => "E-mail"}}
          e-mail@test-email.com
        %td{:class => "select"}
          %a{:href => "#",:class => "button"}
            Select
      %tr
        %td{:data => {:title => "Provider Name"}}
          Julius Neumann
        %td{:data => {:title => "E-mail"}}
          e-mail@test-email.com
        %td{:class => "select"}
          %a{:href => "#",:class => "button"}
            Select
      %tr
        %td{:data => {:title => "Provider Name"}}
          Christoph Koller
        %td{:data => {:title => "E-mail"}}
          e-mail@test-email.com
        %td{:class => "select"}
          %a{:href => "#",:class => "button"}
            Select
      %tr
        %td{:data => {:title => "Provider Name"}}
          Bram Lemmens
        %td{:data => {:title => "E-mail"}}
          e-mail@test-email.com
        %td{:class => "select"}
          %a{:href => "#",:class => "button"}
            Select
  %div.detail
    %div.detail-container
      %dl
        %dt
          Provider Name
        %dd
          John Doe
        %dt
          E-mail
        %dd
          email@example.com
        %dt
          City
        %dd
          Detroit
        %dt
          Phone-Number
        %dd
          555-555-5555
        %dt
          Last Update
        %dd
          Jun 20 2014
        %dt
          Notes
        %dd
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
    %div.detail-nav
      %button.close
        Close

@import "compass/css3";

$base: #5BB9B8;
$subtle: #54a1a0;
$rain: #2C3845;
$poppy: #BD2A4E;
$mobile-small: 460px;
$mobile: 720px;
* {
  box-sizing: border-box;
}
html,body {
  &.open {
    height: 100%;
    overflow: hidden;
  }
}
html {
  padding: 40px;
  font-size: 62.5%;
}

body {
  padding: 20px;
  background-color: $base;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  color: #fff;
  font-size: 1.6rem;
  font-family: 'Lato', sans-serif;
}
p {
  text-align: center;
  margin: 20px 0 60px;
}
main {
  background-color: $rain;
}
h1 {
  text-align: center;
  font-weight: 300;
}
table {
  display: block;
}
tr,td,tbody, tfoot {
  display: block;
}
thead {
  display: none;
}
tr {
  padding-bottom: 10px;
}
td {
  padding: 10px 10px 0;
  text-align: center;
  &:before {
    content: attr(data-title);
    color: lighten($rain,35%);
    text-transform: uppercase;
    font-size: 1.4rem;
    padding-right: 10px;
    display: block;
  }
}
table {
  width: 100%;
}

th {
  text-align: left;
  font-weight: 700;
}
thead {
  th {
    background-color: darken($rain,6%);
    color: #fff;
    border: 1px solid darken($rain,6%);
  }
}
tfoot {
  th {
    display: block;
    padding: 10px;
    text-align: center;
    color: lighten($rain,55%);
  }
}

.button {
  line-height: 1;
  display: inline-block;
  font-size: 1.2rem;
  text-decoration: none;
  border-radius: 5px;
  color: #fff;
  padding: 8px;
  background-color: darken($subtle,5%);
}
.select {
  &:before {
    display: none;
  }
  padding-bottom: 20px;
  border-bottom: 1px solid darken($rain,2%);
}
.detail {
  background-color: $poppy;
  width: 100%;
  height: 100%;
  padding: 40px 0;
  position: fixed;
  top: 0;
  left: 0;
  overflow: auto;
  @include translateX(-100%);
  @include single-transition(transform, .3s, ease-out);
  &.open {
    @include translateX(0);
  }
}
.detail-container {
  margin: 0 auto;
  padding: 40px;
  max-width: 500px;
}

dl {
  margin: 0;
  padding: 0;
}
dt {
  font-size: 2.2rem;
  font-weight: 300;
}
dd {
  margin: 0 0 40px 0;
  font-size: 1.8rem;
  padding-bottom: 5px;
  border-bottom: 1px solid darken($poppy,4%);
  box-shadow: 0 1px 0 lighten($poppy,2%);
}
.close {
  background: none;
  padding: 18px;
  color: #fff;
  font-weight: 300;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 4px;
  line-height: 1;
  font-size: 1.8rem;
  position: fixed;
  right: 40px;
  top: 20px;
  @include single-transition(border,.3s,linear);
  &:hover, &:focus {
    background-color: darken($poppy,5%);
    border: 1px solid darken($poppy,5%);
  }
}
@media (min-width: $mobile-small) {
  td {
    text-align: left;
    &:before {
      display: inline-block;
      text-align: right;
      width: 140px;
    }
  }
  .select {
    padding-left: 160px;
  }
}
@media (min-width: $mobile) {
  table {
    display: table;
  }
  tr {
    display: table-row;
  }
  td,th {
    display: table-cell;
  }
  tbody {
    display: table-row-group;
  }
  thead {
    display: table-header-group;
  }
  tfoot {
    display: table-footer-group;
  }
  td {
      border: 1px solid darken($rain,2%);
    &:before {
      display: none;
    }
  }
  td,th {
    padding: 10px;
  }
  tr:nth-child(2n+2) {
    td {
      background-color: darken($rain,4%);
    }
  }
  tfoot th {
    display: table-cell;
  }
  .select {
    padding: 10px;
  }
}

$('.button, .close').on('click', function(e) {
  e.preventDefault();
  $('.detail, html, body').toggleClass('open');
});