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

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

@@ -152,49 +152,66 @@ const hasClassLong = (text: unknown): boolean => {
tr {
display: block;
}
}
.table thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
.table tbody tr {
border-bottom: 1px solid var(--table-color-border);
td {
border: none;
tbody tr {
border-bottom: 1px solid var(--table-color-border);
position: relative;
padding: 8px 12px 8px 40%;
white-space: normal;
text-align: left;
&:before {
position: absolute;
display: flex;
align-items: center;
padding-left: 12px;
top: 0;
bottom: 0;
left: 0;
width: 35%;
white-space: nowrap;
text-align: left;
font-weight: 600;
content: attr(data-title);
&: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 {
&:first-child {
border-radius: 0;
}
&:last-child {
border-bottom: 1px solid var(--table-color-border);
border-radius: 0 0 8px 8px;
}
}
}
}
&:hover {
td {
border-bottom-color: transparent;
}
}
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;
text-align: left;
&:nth-child(even) td {
background-color: var(--table-color-even);
&:before {
position: absolute;
display: flex;
align-items: center;
padding-left: 12px;
top: 0;
bottom: 0;
left: 0;
width: 35%;
white-space: nowrap;
text-align: left;
font-weight: 600;
content: attr(data-title);
}
}
&:nth-child(even) td {
background-color: var(--table-color-even);
}
}
}
}