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

121 lines
1.9 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
max-width: 100%;
2018-03-26 23:32:43 +02:00
text-align: left;
2018-10-17 19:14:24 +02:00
word-wrap: break-word;
2018-03-26 23:32:43 +02:00
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-10-17 19:14:24 +02:00
border: none;
2018-10-17 21:42:05 +02:00
font-weight: 600;
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 {
color: $lbry-gray-5;
2018-10-17 21:42:05 +02:00
font-weight: 500;
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 {
2018-10-17 21:42:05 +02:00
border-bottom: 1px solid rgba($lbry-gray-1, 0.7);
2018-10-17 19:14:24 +02:00
color: $lbry-black;
2018-09-07 07:24:54 +02:00
}
2016-08-08 06:47:48 +02:00
tbody {
tr {
2018-10-17 21:42:05 +02:00
border-bottom: 1px solid rgba($lbry-gray-1, 0.3);
2018-04-17 04:21:19 +02:00
padding: 8px 0;
2018-08-30 07:11:05 +02:00
&:nth-child(even) {
2018-10-17 21:42:05 +02:00
background-color: rgba($lbry-gray-1, 0.3);
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;
2018-10-17 21:42:05 +02:00
font-weight: 600;
min-width: 130px;
}
td:nth-of-type(2) {
2018-10-17 19:14:24 +02:00
color: $lbry-gray-5;
max-width: 20vw; // Tourniquets text over 20vw
overflow: hidden;
text-overflow: ellipsis;
2018-10-17 19:14:24 +02:00
white-space: nowrap;
}
}
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
}