button shenanigans, download selector almost done

This commit is contained in:
af-n
2022-07-20 20:22:57 -04:00
parent 68ef930163
commit 3105d5844c
8 changed files with 79 additions and 61 deletions

View File

@@ -13,7 +13,7 @@
};
</script>
<div class="download-selection">
<div class="download-channel">
{#each items as item}
<DownloadChannel active={item === activeTab}
on:click={handleTabChange(item)}>
@@ -23,12 +23,12 @@
</div>
<style>
.download-selection {
.download-channel {
background-color: var(--grey-one);
border-radius: 200px;
display: flex;
padding: 8px 8px;
padding: 0.5rem 0.5rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap:1rem;
}
</style>

View File

@@ -9,19 +9,24 @@
<DownloadSelector></DownloadSelector>
<DownloadSelector></DownloadSelector>
<DownloadSelector></DownloadSelector>
<DownloadSelector></DownloadSelector>
</div>
<style>
.download-selector-main {
margin-top: 2rem;
padding: 12px 12px;
border-radius: 25px;
background-color: var(--grey-one);
width: 100;
gap:15px;
align-items: center;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
margin-top: 2rem;
padding: 0.75rem 0.75rem;
border-radius: 25px;
width: 100%;
gap:0.9rem;
display:grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-auto-flow: column;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
overflow-x: scroll;
}
</style>