Dwinzo_dev/app/src/styles/layout/compareLayout.scss

193 lines
4.7 KiB
SCSS
Raw Normal View History

@use "../abstracts/variables" as *;
@use "../abstracts/mixins" as *;
.initial-selectLayout-wrapper {
position: fixed;
top: 100px;
left: 40px;
z-index: 10;
}
.compareLayOut-wrapper {
position: fixed;
top: 0;
right: 0;
z-index: 2;
height: 100vh;
background: var(--background-color);
backdrop-filter: blur(20px);
display: flex;
justify-content: center;
align-items: center;
animation: slideInFromRight 0.4s ease-out forwards;
user-select: none;
.selectLayout-wrapper {
position: absolute;
top: 100px;
right: 40px;
}
.chooseLayout-container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
.resizer {
width: 32px;
height: 32px;
@include flex-center;
padding: 6px;
position: absolute;
top: 50%;
left: 0;
transform: translate(-50%, -50%);
background: var(--background-color);
backdrop-filter: blur(20px);
box-shadow: $box-shadow-heavy;
border-radius: 50%;
cursor: ew-resize;
transition: transform 0.1s ease;
z-index: 10;
}
.chooseLayout-wrapper {
background: var(--background-color);
backdrop-filter: blur(20px);
padding: 20px;
border-radius: 8px;
box-shadow: $box-shadow-medium;
max-width: 80%;
text-align: center;
position: relative;
.icon {
margin-bottom: 15px;
text-align: center;
}
.value {
margin-bottom: 15px;
font-size: 16px;
font-weight: 500;
color: var(--text-primary);
}
button {
display: block;
margin: 0 auto;
padding: 8px 16px;
background: var(--background-color-button);
color: var(--icon-default-color-active);
border: none;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s ease;
&:hover {
transform: translateY(-1px);
}
}
.displayLayouts-container {
max-width: 170px;
height: auto;
background: var(--background-color);
backdrop-filter: blur(20px);
padding: 6px;
border-radius: 8px;
box-shadow: $box-shadow-medium;
position: absolute;
right: 0;
top: 100%;
transform: translate(50%, -10px);
display: flex;
flex-direction: column;
gap: 6px;
.header {
text-align: left;
padding-top: 6px;
padding-left: 6px;
}
.search-wrapper {
padding: 6px 0;
.search-container {
padding: 0;
border-radius: 6px;
}
}
.layouts-container {
.layout {
padding: 6px 0;
}
.layout-wrapper {
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
padding: 0 10px;
background: none;
width: 100%;
&:hover {
background-color: var(--highlight-text-color) !important;
border-radius: 4px;
svg {
path {
fill: var(--background-color-accent);
}
}
.layout {
color: var(--background-color-accent);
}
}
}
}
}
}
}
}
@keyframes slideInFromRight {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
body.compare-layout-open {
main {
padding-right: 10px; // Adjust as needed
transition: padding 0.3s ease;
}
}