Skip to content

Instantly share code, notes, and snippets.

@pederan
Created June 17, 2014 10:28
Show Gist options
  • Save pederan/0a17c9edf17e01c2b789 to your computer and use it in GitHub Desktop.
Save pederan/0a17c9edf17e01c2b789 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<div class="table-selection">
<a href="javascript://" class="btn selected" title="100 gram" data-table-reference="hundred-grams">100 gram</a><a href="javascript://" class="btn" title="Per porsjon" data-table-reference="pr-portion">Per porsjon</a><a href="javascript://" class="btn" title="Referanseinntak" data-table-reference="reference-consume">Referanseinntak</a>
</div>
// ----
// Sass (v3.3.8)
// Compass (v1.0.0.alpha.19)
// ----
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body { background-color: #ececec };
.table-selection {
width:500px;
}
.btn {
display: inline-block;
font-size: 0.875em;
font-weight: 400;
line-height: 1;
width: 32%;
padding: 0.71429em;
margin-left: 2%;
color: #000000;
border: #0073a1 1px solid;
text-align: center;
text-decoration: none;
border-color: #000000;
background-color: #ffffff;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
&.selected {
border-bottom-color: transparent;
background-color: transparent;
}
&:first-child {
margin-left: 0;
}
}
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
background-color: #ececec;
}
.table-selection {
width: 500px;
}
.btn {
display: inline-block;
font-size: 0.875em;
font-weight: 400;
line-height: 1;
width: 32%;
padding: 0.71429em;
margin-left: 2%;
color: #000000;
border: #0073a1 1px solid;
text-align: center;
text-decoration: none;
border-color: #000000;
background-color: #ffffff;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.btn.selected {
border-bottom-color: transparent;
background-color: transparent;
}
.btn:first-child {
margin-left: 0;
}
<div class="table-selection">
<a href="javascript://" class="btn selected" title="100 gram" data-table-reference="hundred-grams">100 gram</a><a href="javascript://" class="btn" title="Per porsjon" data-table-reference="pr-portion">Per porsjon</a><a href="javascript://" class="btn" title="Referanseinntak" data-table-reference="reference-consume">Referanseinntak</a>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment