lbry-desktop/src/renderer/scss/component/_table.scss

122 lines
2 KiB
SCSS
Raw Normal View History

2018-05-07 07:13:30 +02:00
table.table,
.markdown-preview table {
2016-08-08 06:47:48 +02:00
word-wrap: break-word;
max-width: 100%;
2018-03-26 23:32:43 +02:00
text-align: left;
tr {
td:first-of-type,
th:first-of-type {
padding-left: $spacing-vertical * 2/3;
}
2018-03-26 23:32:43 +02:00
td:last-of-type,
th:last-of-type {
padding-right: $spacing-vertical * 2/3;
}
2018-03-26 23:32:43 +02:00
th,
td {
font-size: 13px;
}
2016-08-08 06:47:48 +02:00
}
2018-03-26 23:32:43 +02:00
2016-08-08 06:47:48 +02:00
th {
2018-03-26 23:32:43 +02:00
font-family: 'metropolis-semibold';
2018-05-30 20:12:54 +02:00
border: 0;
2018-09-07 07:24:54 +02:00
padding: $spacing-vertical * 2/3 $spacing-vertical * 1/3;
2016-08-08 06:47:48 +02:00
}
2018-03-26 23:32:43 +02:00
2016-08-08 06:47:48 +02:00
td {
2018-03-26 23:32:43 +02:00
font-family: 'metropolis-medium';
color: $lbry-gray-5;
2018-09-07 07:45:05 +02:00
padding: $spacing-vertical * 1/6 $spacing-vertical * 1/3;
2018-03-26 23:32:43 +02:00
.btn:not(.btn--link) {
display: inline;
margin-left: $spacing-vertical * 1/3;
2017-08-18 05:31:44 +02:00
}
2016-08-08 06:47:48 +02:00
}
2018-03-26 23:32:43 +02:00
.table__item-label {
font-size: 12px;
2016-08-08 06:47:48 +02:00
}
2018-03-26 23:32:43 +02:00
.table__item--actionable span + .btn {
padding-left: $spacing-vertical * 1/3;
2016-08-08 06:47:48 +02:00
}
2018-03-26 23:32:43 +02:00
2018-09-07 07:24:54 +02:00
thead {
color: $lbry-black;
border-bottom: 1px solid $lbry-gray-1;
2018-09-07 07:24:54 +02:00
}
2016-08-08 06:47:48 +02:00
tbody {
tr {
border-bottom: 1px solid $lbry-gray-1; // "--table-item-border" does not exist
2018-04-17 04:21:19 +02:00
padding: 8px 0;
2018-08-30 07:11:05 +02:00
&:nth-child(even) {
background-color: $lbry-gray-1;
2016-08-08 06:47:48 +02:00
}
2018-08-30 07:11:05 +02:00
&:nth-child(odd) {
background-color: transparent;
2016-08-08 06:47:48 +02:00
}
2016-08-08 06:47:48 +02:00
&.thead {
background: none;
}
2016-08-08 06:47:48 +02:00
td {
border: 0 none;
}
}
}
}
table {
&.table--help {
td:nth-of-type(1) {
color: $lbry-black;
font-family: 'metropolis-semibold';
min-width: 130px;
}
td:nth-of-type(2) {
// Tourniquets text over 20vw
max-width: 20vw;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: $lbry-gray-5;
}
}
2018-03-26 23:32:43 +02:00
&.table--stretch {
width: 100%;
}
&.table--transactions {
td:nth-of-type(1) {
width: 25%;
}
td:nth-of-type(2) {
width: 20%;
}
td:nth-of-type(3) {
width: 22.5%;
}
td:nth-of-type(4) {
width: 17.5%;
}
td:nth-of-type(5) {
width: 15%;
}
}
2017-10-03 19:27:52 +02:00
}