2021-02-19 23:33:19 +08:00
|
|
|
.l_body
|
|
|
|
|
display: flex
|
|
|
|
|
margin: auto
|
2021-03-05 21:37:28 +08:00
|
|
|
padding: 0 var(--gap-l)
|
2021-02-19 23:33:19 +08:00
|
|
|
justify-content: center
|
|
|
|
|
|
|
|
|
|
.l_body .l_left
|
|
|
|
|
z-index: 8
|
2021-03-05 21:37:28 +08:00
|
|
|
width: var(--width-left)
|
2021-02-19 23:33:19 +08:00
|
|
|
flex-shrink: 0
|
|
|
|
|
position: sticky
|
|
|
|
|
position: -webkit-sticky
|
|
|
|
|
top: 0
|
|
|
|
|
|
|
|
|
|
.l_body .l_main
|
|
|
|
|
flex-shrink: 1
|
|
|
|
|
flex-grow: 1
|
|
|
|
|
width: 320px
|
2021-03-05 21:37:28 +08:00
|
|
|
max-width: var(--width-main)
|
2021-02-19 23:33:19 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
// iPad 竖屏
|
|
|
|
|
@media screen and (max-width: $device-tablet)
|
|
|
|
|
.mobile-only
|
2021-08-19 23:37:44 +08:00
|
|
|
display: block !important
|
2021-02-19 23:33:19 +08:00
|
|
|
.l_body
|
|
|
|
|
padding: 0
|
|
|
|
|
.l_left
|
|
|
|
|
position: fixed
|
2021-03-05 21:37:28 +08:00
|
|
|
transform: translateX(-320px)
|
2021-02-19 23:33:19 +08:00
|
|
|
margin: 0
|
|
|
|
|
left: 0
|
|
|
|
|
background: var(--site-bg)
|
|
|
|
|
box-shadow: $boxshadow-card-float
|
2021-08-19 23:13:05 +08:00
|
|
|
z-index: 10
|
2021-02-19 23:33:19 +08:00
|
|
|
.l_main
|
|
|
|
|
max-width: 100%
|
|
|
|
|
.l_body.mobile
|
|
|
|
|
.l_left
|
2021-04-02 20:24:16 +08:00
|
|
|
transition: transform .3s ease-out
|
2021-02-19 23:33:19 +08:00
|
|
|
.l_body.mobile.sidebar
|
|
|
|
|
.l_left
|
|
|
|
|
transform: translateX(0px)
|
