Sano Genetics Design Task

Style this table according to our brand guidelines!

by mahassan

HTML

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <table class="tabular">
    <tr>
      <th>Study Name</th>
      <th>Run by</th>
      <th>Status</th>
      <th>Enrolled</th>
      <th></th>
    </tr>
    <tr v-for='study in studies'>
      <td>{{ study.title }}</td>
      <td>{{ study.researcher }}</td>
      <td>{{ study.status }}</td>
      <td>{{ study.enrolled }}</td>
      <td v-if="study.enrolled"><button>Leave Study</button></td>
      <td v-else><button>Join Study</button></td>
    </tr>
    <tr></tr>
  </table>
  <div>
  </div>
</div>

SCSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);

body {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  line-height: 1.42em;
  color:#A7A1AE;
  background-color:#1F2739;
  font-size:1em; 
}

.tabular{
  text-align: left;
	overflow: hidden;
	width: 80%;
	margin: 0 auto;
  display: table;
  padding: 0 0 8em 0;
  th h1 {
	  font-weight: bold;
	  font-size: 1em;
    text-align: left;
    color: #185875;
  }
  td{
    font-weight: normal;
	  font-size: 1em;
  -webkit-box-shadow: 0 2px 2px -2px #0E1119;
	   -moz-box-shadow: 0 2px 2px -2px #0E1119;
	        box-shadow: 0 2px 2px -2px #0E1119;
   &:first-child{
      color: #FB667A;
   }
  }
  
td, th {
	  padding-bottom: 2%;
	  padding-top: 2%;
    padding-left:2%; 
    padding-right:2%;
}
tr{
  &:nth-child(odd) {
	  background-color: #323C50;
}
  &:nth-child(even){
     background-color: #2C3446;
  }
  &:hover{
      background-color: #FFF842;
  color: #403E10;
  
  box-shadow: #7F7C21 -1px 1px, #7F7C21 -2px 2px, #7F7C21 -3px 3px, #7F7C21 -4px 4px, #7F7C21 -5px 5px, #7F7C21 -6px 6px;
  transform: translate3d(6px, -6px, 0);
  
  transition-delay: 0s;
    transition-duration: 0.4s;
    transition-property: all;
  transition-timing-function: line;
  }
}
}
button{
  border: 0;
  border-radius: 5px;
  &:hover{
     cursor: pointer;
  }
}

Vue

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    studies: [{
        'title': 'DNA and Human Traits',
        'researcher': 'Sano Genetics',
        'status': 'Completed',
        'enrolled': true
      },
      {
        'title': 'Marmite',
        'researcher': 'Sano Genetics',
        'status': 'In Progress',
        'enrolled': true
      },
      {
        'title': 'Muscular Dystrophy',
        'researcher': 'Muscular Dystrophy UK',
        'status': 'In Progress',
        'enrolled': true
      },
      {
        'title': 'The Genetics of Autism',
        'researcher': 'Autism Research Center',
        'status': 'Not Started',
        'enrolled': false
      }
    ]
  }
})