mirror of
https://github.com/hcengineering/platform.git
synced 2024-12-22 11:01:54 +03:00
150 lines
3.5 KiB
SCSS
150 lines
3.5 KiB
SCSS
.floorGrid-room,
|
|
.floorGrid-configureRoom {
|
|
position: relative;
|
|
display: grid;
|
|
place-items: center;
|
|
|
|
&__header {
|
|
position: absolute;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: .25rem;
|
|
bottom: calc(100% + .125rem);
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
&__field {
|
|
position: relative;
|
|
aspect-ratio: 1;
|
|
border-radius: 20%;
|
|
}
|
|
&::before {
|
|
position: absolute;
|
|
content: '';
|
|
left: calc(100% / var(--huly-floor-roomWidth) / 5 * -1);
|
|
right: calc(100% / var(--huly-floor-roomWidth) / 5 * -1);
|
|
background-color: var(--theme-popup-color);
|
|
border: 1px solid var(--theme-popup-divider);
|
|
border-radius: 1rem;
|
|
}
|
|
}
|
|
|
|
.floorGrid-room {
|
|
&__header {
|
|
align-items: center;
|
|
top: calc(100% / var(--huly-floor-roomHeight) / 3 * -1.6 + 0.375rem + 1px);
|
|
|
|
& > span {
|
|
color: var(--theme-caption-color);
|
|
cursor: default;
|
|
}
|
|
}
|
|
&__field {
|
|
overflow: hidden;
|
|
width: 100%;
|
|
height: 100%;
|
|
max-width: 90%;
|
|
max-height: 90%;
|
|
transition-property: max-width, max-height;
|
|
transition-duration: .15s;
|
|
transition-timing-function: ease-in-out;
|
|
|
|
&.hovered:hover {
|
|
background-color: transparent;
|
|
|
|
& > div { opacity: .35; }
|
|
}
|
|
}
|
|
|
|
&::before {
|
|
bottom: calc(100% / var(--huly-floor-roomHeight) / 5 * -1);
|
|
|
|
&.hovered { background-color: var(--theme-popup-hover); }
|
|
}
|
|
&:not(.preview)::before { top: calc(100% / var(--huly-floor-roomHeight) / 3 * -1.6); }
|
|
&.preview::before {
|
|
top: calc(100% / var(--huly-floor-roomHeight) / 3 * -1);
|
|
bottom: calc(100% / var(--huly-floor-roomHeight) / 3 * -1);
|
|
left: calc(100% / var(--huly-floor-roomWidth) / 3 * -1);
|
|
right: calc(100% / var(--huly-floor-roomWidth) / 3 * -1);
|
|
border-radius: .375rem;
|
|
|
|
.floorGrid-room__field { border-radius: .25rem; }
|
|
}
|
|
&:not(.disabled, .myOffice) {
|
|
&:hover .floorGrid-room__field { background-color: var(--theme-button-default); }
|
|
.floorGrid-room__field:not(.person) {
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
}
|
|
}
|
|
}
|
|
&.disabled .floorGrid-room__header > span { color: var(--theme-trans-color); }
|
|
}
|
|
|
|
.floorGrid-configureRoom {
|
|
&__header {
|
|
top: calc(100% / var(--huly-floor-roomHeight) / 3 * -1.6 + .75rem - 1px);
|
|
|
|
& > .antiEditBox input { font-size: .8125rem; }
|
|
}
|
|
&__field {
|
|
width: 90%;
|
|
background-color: var(--theme-button-default);
|
|
cursor: default;
|
|
|
|
&.null { pointer-events: none; }
|
|
}
|
|
|
|
&::before {
|
|
top: calc(100% / var(--huly-floor-roomHeight) / 3 * -1.6);
|
|
bottom: calc(100% / var(--huly-floor-roomHeight) / 5 * -1);
|
|
box-shadow: var(--huly-floor-roomShadow, --theme-popup-shadow);
|
|
}
|
|
|
|
&.dragged {
|
|
position: absolute;
|
|
width: var(--huly-floor-roomWidth);
|
|
height: var(--huly-floor-roomHeight);
|
|
opacity: .85;
|
|
z-index: 1;
|
|
}
|
|
&.placed {
|
|
$room-bg-color: var(--theme-popup-color);
|
|
$room-stroke-color: var(--theme-button-default);
|
|
background-image: linear-gradient(
|
|
135deg,
|
|
$room-stroke-color 10%,
|
|
$room-bg-color 10%,
|
|
$room-bg-color 50%,
|
|
$room-stroke-color 50%,
|
|
$room-stroke-color 60%,
|
|
$room-bg-color 60%,
|
|
$room-bg-color 100%
|
|
);
|
|
background-size: 7px 7px;
|
|
|
|
.floorGrid-room__header,
|
|
.floorGrid-room__field { visibility: hidden; }
|
|
}
|
|
}
|
|
|
|
// RoomPopup
|
|
.room-popup {
|
|
.room-btns {
|
|
button.secondary,
|
|
.hulySplitButton-main {
|
|
flex-grow: 1;
|
|
}
|
|
.hulySplitButton-container {
|
|
flex-grow: 2;
|
|
}
|
|
&.no-video .hulySplitButton-container {
|
|
flex-grow: 4;
|
|
}
|
|
}
|
|
}
|