// Default options for table style
$table-breakpoint: 480px;
$table-background-color: #FF000F;
$table-text-color: #024457;
$table-outer-border: 1px solid #167F92;
$table-cell-border: 1px solid #D9E4E6;
// Extra options for table style (parse these arguments when including your mixin)
$table-border-radius: 10px;
$table-highlight-color: #EAF3F3;
$table-header-background-color: #0D6B39;
$table-header-text-color: #FFF;
$table-header-border: 1px solid #FFF;
// The Responstable mixin
@mixin responstable(
$breakpoint: $table-breakpoint,$background-color: $table-background-color,$text-color: $table-text-color,$outer-border: $table-outer-border,$cell-border: $table-cell-border,$border-radius: none,$highlight-color: none,$header-background-color: $table-background-color,$header-text-color: $table-text-color,$header-border: $table-cell-border){width:100%;overflow:hidden;background:$background-color;color:$text-color;border-radius:$border-radius;border:$outer-border;background-color:$highlight-color}th{display:none;background-color:$header-background-color;color:$header-text-color;padding:1em;text-align:center}&:after{content:attr(data-th)}@media (min-width: breakpoint){&:after{display:none}}td{display:block;max-width:7em;border-right:$cell-border}th,td{text-align:left;margin:.5em 1em;display:table-cell}// Include the mixin (with extra options as overrides)
@include responstable(
$border-radius: $table-border-radius,$highlight-color: $table-highlight-color,$header-background-color: $table-header-background-color,$header-text-color: $table-header-text-color,$header-border: $table-header-border);
// General styles
body{padding:0 2em;font-family:Arial,sans-serif;color:#024457;background:#f2f2f2}h1{font-family:Verdana;font-weight:400;color:#164}