Lightweight CSS Framework for Building Apps and Websites
https://crispy-css.com
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
63 lines
1.3 KiB
63 lines
1.3 KiB
/**
|
|
* component: table
|
|
*
|
|
* <table class="table table--striped">
|
|
* <thead>
|
|
* <tr>
|
|
* <th>name</th>
|
|
* <th>age</th>
|
|
* </tr>
|
|
* </thead>
|
|
* <tbody>
|
|
* <tr>
|
|
* <td>The Shawshank Redemption</td>
|
|
* <td>12</td>
|
|
* </tr>
|
|
* </tbody>
|
|
* </table>
|
|
*
|
|
* @author Björn Hase
|
|
*
|
|
*/
|
|
|
|
|
|
$crispy__table__padding: toEm(10px 8px) !default;
|
|
|
|
$crispy__table__td__border: 1px solid lighten($crispy__color-text, 40%) !default;
|
|
$crispy__table__th__border-width: 2px !default;
|
|
|
|
$crispy__table__color: $crispy__color-text !default;
|
|
$crispy__table__striped__background-color: lighten($crispy__color-text, 75%) !default;
|
|
|
|
@mixin crispy__table() {
|
|
.table {
|
|
width: 100%;
|
|
|
|
&--striped {
|
|
tr {
|
|
&:nth-child(even) {
|
|
background-color: $crispy__table__striped__background-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
&--scroll {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
td {
|
|
color: $crispy__table__color;
|
|
}
|
|
|
|
td,
|
|
th {
|
|
padding: $crispy__table__padding;
|
|
text-align: left;
|
|
border-bottom: $crispy__table__td__border;
|
|
}
|
|
|
|
th {
|
|
border-bottom-width: $crispy__table__th__border-width;
|
|
}
|
|
}
|
|
}
|