STEMMechanics/Website
1
0
Fork 0
Code Issues 4 Pull Requests 1 Actions Packages Projects Releases 3 Wiki Activity

fix styling on smaller screens

Browse Source
This commit is contained in:
James Collins
2023-04-28 08:57:17 +10:00
parent 6a3c3a3566
commit 0c668c9c62
1 changed files with 52 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
resources/js/components/SMTable.vue
View File

@@ -152,20 +152,42 @@ const hasClassLong = (text: unknown): boolean => {
tr {
display: block;
}
}
.table thead tr {
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
.table tbody tr {
tbody tr {
border-bottom: 1px solid var(--table-color-border);
&:first-child {
td:first-child {
border-top: 1px solid var(--table-color-border);
border-radius: 8px 8px 0 0;
}
}
&:last-child {
border-bottom: 0;
td {
border: none;
&:first-child {
border-radius: 0;
}
&:last-child {
border-bottom: 1px solid var(--table-color-border);
border-radius: 0 0 8px 8px;
}
}
}
td {
border-bottom: 0;
border-left: 1px solid var(--table-color-border);
border-right: 1px solid var(--table-color-border);
position: relative;
padding: 8px 12px 8px 40%;
white-space: normal;
@@ -187,15 +209,10 @@ const hasClassLong = (text: unknown): boolean => {
}
}
&:hover {
td {
border-bottom-color: transparent;
}
}
&:nth-child(even) td {
background-color: var(--table-color-even);
}
}
}
}
</style>