Sha256: 0915c0709092f66f89cc9d5f2ef119618a2880b3b1caf8c94c6b254d67b53c3d
Contents?: true
Size: 1.69 KB
Versions: 15
Compression:
Stored size: 1.69 KB
Contents
//table component
$table-breakpoint: 980px;
.rwd-table {
margin: 1em 0;
min-width: 300px; // adjust to your needs
font-size: 16px;
width: 100%;
padding: 10px;
tr {
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
th {
display: none; // for accessibility, use a visually hidden method here instead! Thanks, reddit!
}
td {
display: block;
&:first-child {
padding-top: .5em;
}
&:last-child {
padding-bottom: .5em;
}
&:before {
content: attr(data-th)": ";
font-weight: bold;
// optional stuff to make it look nicer
width: 6.5em; // magic number :( adjust according to your own content
display: inline-block;
// end options
@media (min-width: $table-breakpoint) {
display: none;
}
}
}
th, td {
text-align: left;
@media (min-width: $table-breakpoint) {
display: table-cell;
padding: .25em .5em;
&:first-child {
padding-left: 0;
}
&:last-child {
padding-right: 0;
}
}
}
}
.rwd-table {
background: rgba(233, 233, 233, 0.77);;
table-layout: auto;
color: #295158;
overflow: hidden;
tr > td:first-child {
cursor: pointer;
}
tr.item.selected{
background-color: $medium_blue;
color: white;
}
th, td {
margin: .5em 1em;
@media (min-width: $table-breakpoint) {
padding: 10px!important;
}
}
thead tr:first-child{
background: #2399C7;
@include font-attr(18px, whitesmoke, bolder);
}
thead tr{
th{
min-width: 100px;
vertical-align: center;
}
th:first-child{
min-width: 40px;
}
}
}
Version data entries
15 entries across 15 versions & 1 rubygems