feat: add WallProperties component for managing wall dimensions and materials

This commit is contained in:
Nalvazhuthi
2025-06-04 15:36:55 +05:30
parent 13ec906fac
commit 5787213882
10 changed files with 378 additions and 96 deletions

View File

@@ -4,11 +4,21 @@
.distance-text-wrapper,
.zone-name-wrapper,
.pointer-none {
pointer-events: none !important;
pointer-events: auto !important;
background-color: gray;
}
.zone-name-wrapper {
background: var(--background-color-accent);
color: var(--text-button-color);
outline: 1px solid var(--border-color);
border-radius: #{$border-radius-medium};
backdrop-filter: blur(12px);
}
.distance-text {
pointer-events: none !important;
div {
position: absolute;
transform: translate(-50%, -50%) scale(0.8);
@@ -22,18 +32,16 @@
border-radius: #{$border-radius-medium};
box-shadow: var(--box-shadow-light);
}
.area {
background: #008cff;
}
}
.zone-name{
background: var(--background-color);
padding: 2px 8px;
.zone-name {
padding: 2px 10px;
text-wrap: nowrap;
backdrop-filter: blur(12px);
border-radius: #{$border-radius-medium};
outline: 1px solid var(--border-color);
color: var(--text-button-color);
}
//
@@ -55,18 +63,49 @@
outline: 1px solid var(--border-color);
transform: translate(-50%, 12px);
z-index: 100;
.presets-container {
@include flex-center;
gap: 4px;
.preset {
background: var(--background-color);
padding: 2px 8px;
border-radius: #{$border-radius-large};
outline: 1px solid var(--border-color);
}
.active {
background: var(--background-color-accent);
color: var(--text-button-color);
}
}
}
.label-toogler {
position: fixed;
bottom: 5%;
right: 2%;
z-index: 10;
background: var(--background-color);
backdrop-filter: blur(10px);
outline: 1px solid var(--border-color);
border-radius: 8px;
.input-toggle-container {
display: flex;
flex-direction: column;
gap: 12px;
.check-box {
.check-box-style {
// background: var(--text-button-color) !important;
}
}
}
}