|
|
| (48 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| /* CSS placed here will be applied to all skins */ | | /* CSS placed here will be applied to all skins */ |
| /* EQCSS Required - http://elementqueries.com for info */
| |
|
| |
| /* Responsive Table Reset */
| |
| [data-table] {
| |
| font-size: 12pt;
| |
| width: 100%;
| |
| }
| |
| @element [data-table] and (max-width: 500px) {
| |
| $this,
| |
| $this caption,
| |
| $this thead,
| |
| $this tbody,
| |
| $this tfoot,
| |
| $this tr,
| |
| $this th,
| |
| $this td {
| |
| display: block;
| |
| width: 100%;
| |
| }
| |
| }
| |
| @element [data-table] and (min-width: 500px) {
| |
| $this { display: table; width: 100%; }
| |
| $this caption { display: table-caption; width: auto; }
| |
| $this thead { display: table-header-group; width: auto; }
| |
| $this tbody { display: table-row-group; width: auto; }
| |
| $this tfoot { display: table-footer-group; width: auto; }
| |
| $this tr { display: table-row; width: auto; }
| |
| $this th,
| |
| $this td { display: table-cell; width: auto; }
| |
| }
| |
|
| |
| /* Default Table Theme */
| |
| @element [data-table] {
| |
| $this {
| |
| font-family: 'Source Sans Pro', sans-serif;
| |
| margin: 1em 0;
| |
| color: #333;
| |
| border-collapse: collapse;
| |
| }
| |
| $this thead th,
| |
| $this tfoot th {
| |
| color: #777;
| |
| background: rgba(0,0,0,.1);
| |
| }
| |
| $this caption {
| |
| padding: .5em;
| |
| }
| |
| $this th,
| |
| $this td {
| |
| padding: .5em;
| |
| background: white;
| |
| border: 1px solid #aaa;
| |
| }
| |
| $this tbody tr:nth-of-type(even) {
| |
| background: rgba(0,0,0,.05);
| |
| }
| |
| }
| |
|
| |
| /* Grid Table Layout */
| |
| @element [data-table^=col-] and (max-width: 500px) {
| |
| $this thead {
| |
| display: none;
| |
| }
| |
| $this tr:after {
| |
| content: '';
| |
| display: block;
| |
| clear: both;
| |
| }
| |
| $this[data-table$=-one] td { width: 100%; }
| |
| $this[data-table$=-two] td { width: 50%; }
| |
| $this[data-table$=-three] td { width: 33.33%; }
| |
| $this[data-table$=-four] td { width: 25%; }
| |
| $this[data-table$=-five] td {width: 20%; }
| |
| $this[data-table$=-six] td { width: 16.66%; }
| |
| $this td {
| |
| float: left;
| |
| line-height: 1.4;
| |
| padding: .5em 0;
| |
| text-align: center;
| |
| position: relative;
| |
| }
| |
| $this td:nth-of-type(n+2) {
| |
| padding-bottom: 17.5pt;
| |
| }
| |
| $this td:after {
| |
| content: attr(data-heading);
| |
| display: block;
| |
| width: 100%;
| |
| position: absolute;
| |
| bottom: 5pt;
| |
| left: 0;
| |
| font-size: 10pt;
| |
| line-height: 1.2;
| |
| color: #999;
| |
| }
| |
| $this td:first-of-type:after {
| |
| display: none;
| |
| }
| |
| $this td:nth-of-type(n+2) {
| |
| border-top: none;
| |
| }
| |
| $this[data-table$=-two] td:nth-of-type(n+2):nth-of-type(odd),
| |
| $this[data-table$=-three] td:nth-of-type(n+2):nth-of-type(3n),
| |
| $this[data-table$=-three] td:nth-of-type(n+2):nth-of-type(3n+1),
| |
| $this[data-table$=-four] td:nth-of-type(n+2),
| |
| $this[data-table$=-five] td:nth-of-type(n+2),
| |
| $this[data-table$=-six] td:nth-of-type(n+2) {
| |
| border-left-color: transparent;
| |
| }
| |
| $this[data-table$=-four] td:nth-of-type(4n+2),
| |
| $this[data-table$=-five] td:nth-of-type(5n+2),
| |
| $this[data-table$=-six] td:nth-of-type(6n+2) {
| |
| border-left-color: #aaa;
| |
| }
| |
| $this td:first-of-type {
| |
| color: #777;
| |
| background: rgba(0,0,0,.1);
| |
| font-weight: 600;
| |
| width: 100%;
| |
| }
| |
| }
| |
/* CSS placed here will be applied to all skins */
