Theaninova/DeviceManager
1
0
Fork 0
mirror of https://github.com/CharaChorder/DeviceManager.git synced 2026-01-21 09:23:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

layout prototype

Browse Source
This commit is contained in:
Thea Schöbl
2023-07-06 23:38:55 +02:00
parent 3d1be38858
commit cbba6dfa09
6 changed files with 78 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/lib/components/LayoutCC1.svelte
View File

@@ -12,17 +12,46 @@
{/each}
</fieldset>
<div class="row">
<RingInput {activeLayer} />
<div class="col">
<div class="col" style="gap: 0">
<div class="row" style="gap: 156px">
<div class="row">
<RingInput {activeLayer} />
<div class="col">
<RingInput {activeLayer} />
<RingInput {activeLayer} />
</div>
<div class="col">
<RingInput {activeLayer} />
<RingInput {activeLayer} />
</div>
<RingInput {activeLayer} />
</div>
<div class="row">
<RingInput {activeLayer} />
<div class="col">
<RingInput {activeLayer} />
<RingInput {activeLayer} />
</div>
<div class="col">
<RingInput {activeLayer} />
<RingInput {activeLayer} />
</div>
<RingInput {activeLayer} />
</div>
</div>
<div class="row" style="gap: 48px; margin-top: -32px">
<RingInput {activeLayer} />
<RingInput {activeLayer} />
</div>
<div class="col">
<div class="row" style="gap: 160px">
<RingInput {activeLayer} />
<RingInput {activeLayer} />
</div>
<div class="row" style="gap: 320px; margin-top: -12px">
<RingInput {activeLayer} />
<RingInput {activeLayer} />
</div>
<RingInput {activeLayer} />
</div>
<style lang="scss">
@@ -40,6 +69,8 @@
}
button.icon {
cursor: pointer;
z-index: 1;
font-size: 24px;
@@ -80,18 +111,17 @@
.row,
.col {
display: flex;
gap: 8px;
align-items: center;
justify-content: center;
}
.row {
display: flex;
flex-direction: row;
}
.col {
display: flex;
flex-direction: column;
}
</style>