SebinNyshkim/viktor-reference
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: move table styles to main.scss

Browse source
This commit is contained in:
Sebin Nyshkim 2022-09-28 01:51:50 +02:00
parent 33c4cc6c37
commit d643ce2646
2 changed files with 53 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

44
src/components/ColorTable.vue
View file

@ -35,40 +35,13 @@ defineProps<Props>();
<style lang="scss">
.color-table {
border-collapse: separate;
border-spacing: 0;
width: 100%;
max-width: var(--container-width-tables);
margin: 2rem auto;
padding: var(--color-table-spacing);
&__heading,
&__cell {
padding: 0.5rem 1rem;
}
&__heading {
font-weight: bold;
background-color: var(--color-table-heading-background);
color: var(--color-table-heading-text-color);
&:first-child {
border-radius: var(--color-table-border-radius) 0 0 0;
}
&:last-child {
border-radius: 0 var(--color-table-border-radius) 0 0;
}
&.name {
text-align: right;
}
}
&__cell {
background-color: var(--color-table-cell-background);
color: var(--color-table-cell-text-color);
&.name {
text-align: right;
}
@ -79,22 +52,7 @@ defineProps<Props>();
}
&.color {
min-width: var(--color-table-color-cell-width);
}
}
&__row:hover &__cell {
background-color: var(--color-table-row-hover);
color: var(--color-table-cell-text-color-hover);
}
&__row:last-child &__cell {
&:first-child {
border-radius: 0 0 0 var(--color-table-border-radius);
}
&:last-child {
border-radius: 0 0 var(--color-table-border-radius) 0;
min-width: 10vw;
}
}
}

52
src/scss/main.scss
View file

@ -59,3 +59,55 @@ a {
box-shadow: inset 0 calc(var(--text-line-height) * -1) 0 0 var(--color-link-text-underline);
}
}
table {
border-collapse: separate;
border-spacing: 0;
width: 100%;
max-width: var(--table-max-width);
margin: 2rem auto;
padding: var(--table-outer-spacing);
th,
td {
padding: 0.5rem 1rem;
}
th {
font-weight: bold;
background-color: var(--table-heading-background);
color: var(--table-heading-text-color);
&:first-child {
border-radius: var(--table-border-radius) 0 0 0;
}
&:last-child {
border-radius: 0 var(--table-border-radius) 0 0;
}
&.name {
text-align: right;
}
}
td {
background-color: var(--table-cell-background);
color: var(--table-cell-text-color);
}
tr:hover td {
background-color: var(--table-row-background-hover);
color: var(--table-cell-text-color-hover);
}
tr:last-child td {
&:first-child {
border-radius: 0 0 0 var(--table-border-radius);
}
&:last-child {
border-radius: 0 0 var(--table-border-radius) 0;
}
}
}