50 lines
1.0 KiB
CSS
50 lines
1.0 KiB
CSS
.item-page {
|
|
display: flex;
|
|
min-height: 100vh;
|
|
width: 100vw;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
|
|
&__nav,
|
|
&__content {
|
|
box-sizing: border-box;
|
|
padding-top: 130px;
|
|
height: 100vh;
|
|
position: relative;
|
|
}
|
|
|
|
&__header {
|
|
min-height: 40px;
|
|
margin: 0 0 25px;
|
|
}
|
|
|
|
&__nav {
|
|
flex: 0 0 calc((100vw - 1200px) / 2 + 400px);
|
|
&__inner {
|
|
box-sizing: border-box;
|
|
float: right;
|
|
width: 410px;
|
|
padding: 0 40px 0 10px;
|
|
transition: opacity 150ms ease-out, transform 300ms ease-out;
|
|
/*&.is-uninitialized {
|
|
transform: translateY(-20px);
|
|
opacity: 0;
|
|
}*/
|
|
}
|
|
}
|
|
|
|
&__content {
|
|
transform: translate3d(0, 0, 0);
|
|
transition: transform 450ms cubic-bezier(0.24, 1.12, 0.71, 0.98);
|
|
flex: 0 0 calc((100vw - 1200px) / 2 + 800px);
|
|
background: var(--color-white);
|
|
&__inner {
|
|
box-sizing: border-box;
|
|
width: 810px;
|
|
padding: 0 10px 0 100px;
|
|
transition: opacity 150ms ease-out, transform 300ms ease-out;
|
|
}
|
|
}
|
|
}
|