121 lines
1.8 KiB
SCSS
121 lines
1.8 KiB
SCSS
@use '../styles/variables' as v;
|
|
|
|
$padding: 12px;
|
|
|
|
.table {
|
|
width: 100%;
|
|
|
|
> tbody,
|
|
> thead {
|
|
> tr {
|
|
> th,
|
|
> td {
|
|
vertical-align: top;
|
|
border-top: 1px solid v.$color-light-grey;
|
|
padding: $padding;
|
|
}
|
|
|
|
> th {
|
|
text-align: left;
|
|
font-weight: bold;
|
|
}
|
|
|
|
> td {
|
|
background: white;
|
|
}
|
|
|
|
&:hover {
|
|
> td,
|
|
> th {
|
|
background: #eee;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.th {
|
|
a {
|
|
text-decoration: none;
|
|
color: v.$body-font-color;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
> div.arrows {
|
|
order: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-left: 6px;
|
|
|
|
&:before,
|
|
&:after {
|
|
content: '';
|
|
display: block;
|
|
width: 12px;
|
|
height: 5px;
|
|
background: #ddd;
|
|
}
|
|
|
|
&:before {
|
|
clip-path: polygon(0 100%, 50% 0, 100% 100%);
|
|
}
|
|
|
|
&:after {
|
|
clip-path: polygon(0 0, 50% 100%, 100% 0);
|
|
margin-top: 2px;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
color: v.$color-blue;
|
|
|
|
&:not(.current):not(.desc),
|
|
&.current.desc {
|
|
> div.arrows:before {
|
|
background: v.$color-blue;
|
|
}
|
|
}
|
|
|
|
&:not(.current).desc,
|
|
&.current:not(.desc) {
|
|
> div.arrows:after {
|
|
background: v.$color-blue;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.current:not(:hover) {
|
|
&:not(.desc) {
|
|
> div.arrows:before {
|
|
background: v.$body-font-color;
|
|
}
|
|
}
|
|
|
|
&.desc {
|
|
> div.arrows:after {
|
|
background: v.$body-font-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.minimize {
|
|
width: 0;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
td.buttons {
|
|
width: 0;
|
|
padding: 0 $padding;
|
|
vertical-align: middle;
|
|
|
|
> div {
|
|
display: flex;
|
|
|
|
> *:not(:last-child) {
|
|
margin-right: 2px;
|
|
}
|
|
}
|
|
}
|