xtreme-ui
Version:
Collection of reusable components that can be used in web projects
2 lines (1 loc) • 2.23 kB
CSS
.xtrSider{--paddingLeft: 0px;--paddingRight: 0px;--borderRadius: 36px;--siderWidthMini: 60px;width:100%;height:100%;background:var(--colorBackgroundSecondary);padding:0 var(--paddingRight) 0 var(--paddingLeft);overflow:hidden;transition:all var(--animDurDefault) ease}.xtrSider .leftSiderContainer{position:fixed;left:0;width:auto;height:100%;z-index:0;transition:transform var(--animDurDefault) var(--cubicBezierPrimary)}.xtrSider .rightSiderContainer{position:fixed;right:0;width:auto;height:100%;z-index:1;transition:transform var(--animDurDefault) var(--cubicBezierPrimary)}.xtrSider .content{position:relative;width:100%;height:100%;background:var(--colorBackgroundPrimary);box-shadow:0 0 50px 2px #0000003d;border-radius:0;z-index:2;transition:all var(--animDurDefault) var(--cubicBezierPrimary)}.xtrSider.miniLeftSider{--paddingLeft: var(--siderWidthMini)}.xtrSider.miniLeftSider .content{border-top-left-radius:var(--borderRadius);border-bottom-left-radius:var(--borderRadius)}.xtrSider.miniRightSider{--paddingRight: var(--siderWidthMini)}.xtrSider.miniRightSider .content{border-top-right-radius:var(--borderRadius);border-bottom-right-radius:var(--borderRadius)}.xtrSider.leftOpen{--transform: translateX(calc(32px + var(--leftSiderWidth) - var(--paddingLeft)))}.xtrSider.leftOpen .rightSiderContainer{transform:var(--transform);pointer-events:none}.xtrSider.leftOpen .content{border-radius:36px;transform:var(--transform);transform-origin:left center;scale:.95}.xtrSider.rightOpen{--transform: translateX(calc((32px + var(--rightSiderWidth) - var(--paddingRight)) * -1))}.xtrSider.rightOpen .leftSiderContainer{transform:var(--transform);pointer-events:none}.xtrSider.rightOpen .content{border-radius:36px;transform:var(--transform);transform-origin:right center;scale:.95}@media(max-width:512px){.xtrSider.miniLeftSider{--paddingLeft: 0px }.xtrSider:not(.leftOpen) .content{border-top-left-radius:0;border-bottom-left-radius:0}.xtrSider.rightOpen{--transform: translateX(calc((32px + 100vh - var(--paddingRight)) * -1))}.xtrSider.miniRightSider{--paddingRight: 0px }.xtrSider:not(.rightOpen) .content{border-top-right-radius:0;border-bottom-right-radius:0}}