Styling improvements to layers

This commit is contained in:
Keavon Chambers
2021-05-07 02:47:38 -07:00
parent 0ebd127333
commit 67abeadf32
+16 -2
View File
@@ -18,6 +18,7 @@
<IconButton v-if="layerId % 2 == 0" @click="hideLayer(layerId)" :size="24" title="Visible"><EyeVisible /></IconButton> <IconButton v-if="layerId % 2 == 0" @click="hideLayer(layerId)" :size="24" title="Visible"><EyeVisible /></IconButton>
<IconButton v-if="layerId % 2 == 1" @click="showLayer(layerId)" :size="24" title="Hidden"><EyeHidden /></IconButton> <IconButton v-if="layerId % 2 == 1" @click="showLayer(layerId)" :size="24" title="Hidden"><EyeHidden /></IconButton>
</div> </div>
<div class="layer">
<div class="layer-thumbnail"></div> <div class="layer-thumbnail"></div>
<div class="layer-type-icon"> <div class="layer-type-icon">
<IconContainer :size="24" title="Path"><NodeTypePath /></IconContainer> <IconContainer :size="24" title="Path"><NodeTypePath /></IconContainer>
@@ -26,6 +27,7 @@
<span>Foo bar</span> <span>Foo bar</span>
</div> </div>
</div> </div>
</div>
</LayoutCol> </LayoutCol>
</LayoutRow> </LayoutRow>
</LayoutCol> </LayoutCol>
@@ -41,15 +43,27 @@
.layer-row { .layer-row {
display: flex; display: flex;
height: 24px; height: 36px;
align-items: center; align-items: center;
margin: 0 8px;
.layer {
display: flex;
align-items: center;
background: #555;
border-radius: 4px;
width: 100%;
height: 100%;
margin-left: 4px;
padding-left: 16px;
}
& + .layer-row { & + .layer-row {
margin-top: 2px; margin-top: 2px;
} }
.layer-thumbnail { .layer-thumbnail {
width: 36px; width: 64px;
height: 100%; height: 100%;
background: white; background: white;
} }