feat: use flexboxes instead!
This commit is contained in:
parent
c03f72cecc
commit
1066822dd5
1 changed files with 15 additions and 5 deletions
|
@ -4,13 +4,13 @@
|
|||
|
||||
<p class="subtitle">THEMES</p>
|
||||
<div class="themes">
|
||||
<p v-for="theme of themes">
|
||||
<div v-for="theme of themes" class="theme-preview-container">
|
||||
<span class="theme-preview" :title="theme.displayName" :style="{background:`linear-gradient(${theme.previewGradient})`}">
|
||||
<span class="theme-title" :style="{color:`${theme.complementaryColor}`}">
|
||||
{{ theme.displayName }}
|
||||
</span>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="subtitle">ICONS</p>
|
||||
|
@ -48,9 +48,19 @@ await fetchThemes()
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
.themes {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.theme-preview-container {
|
||||
margin: .5em;
|
||||
width: 5em;
|
||||
height: 5em;
|
||||
}
|
||||
|
||||
.theme-preview {
|
||||
min-width: 6em;
|
||||
min-height: 6em;
|
||||
width: 5em;
|
||||
height: 5em;
|
||||
border-radius: 100%;
|
||||
border: .1em solid var(--primary-color);
|
||||
|
||||
|
@ -61,6 +71,6 @@ await fetchThemes()
|
|||
|
||||
.theme-title {
|
||||
font-size: .8em;
|
||||
line-height: 6em; /* same height as the parent to centre it vertically */
|
||||
line-height: 5em; /* same height as the parent to centre it vertically */
|
||||
}
|
||||
</style>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue