xtreme-ui
Version:
Collection of reusable components that can be used in web projects
2 lines (1 loc) • 2.88 kB
CSS
.xtrNavigation{--animDurFast: .4s;--borderRadius: 30px;width:250px;height:100%;display:flex;flex-direction:column;padding:16px 0 28px}.xtrNavigation .brand{font-size:32px;padding:24px 8px;font-variation-settings:"wdth" 75,"wght" 400;text-transform:capitalize;-webkit-user-select:none;user-select:none;color:var(--colorContentPrimary);cursor:pointer}.xtrNavigation .routeList{width:100%;display:flex;flex-direction:column;flex:1;-webkit-user-select:none;user-select:none;cursor:pointer}.xtrNavigation .routeList .route{position:relative;display:flex;align-items:center;gap:2px;text-decoration:none;color:var(--colorContentPrimary);border-top-right-radius:var(--borderRadius);border-bottom-right-radius:var(--borderRadius);transition:all var(--animDurFast) var(--cubicBezierPrimary);-webkit-tap-highlight-color:transparent;overflow:hidden}.xtrNavigation .routeList .route:before{content:"";position:absolute;width:100%;height:100%;transform:translate(-100%);background:hsl(var(--colorBrandPrimary));z-index:0;border-radius:0;transition:all var(--animDurFast) var(--cubicBezierPrimary),transform .2s ease;overflow:hidden}.xtrNavigation .routeList .route .xIcon{width:var(--siderWidthMini);height:var(--siderWidthMini);font-size:calc(var(--siderWidthMini) - 40px);transition:all var(--animDurFast) var(--cubicBezierPrimary);color:inherit}.xtrNavigation .routeList .route .label{font-size:16px;font-variation-settings:"wdth" 75,"wght" 400;text-transform:capitalize;color:inherit;z-index:1;transition:all var(--animDurFast) var(--cubicBezierPrimary)}.xtrNavigation .routeList .route:last-of-type{margin-top:auto}.xtrNavigation .routeList .route:hover:before{transform:translate(calc(4px - 100%))}.xtrNavigation .routeList .route:active .icon{scale:.9}.xtrNavigation .routeList .route:active:before{transform:translate(calc(6px - 100%))}.xtrNavigation .routeList .route.loading{--loaderColor: hsl(var(--colorBrandPrimary) / 50%);background:hsl(var(--colorBrandPrimary)/0%);pointer-events:none}.xtrNavigation .routeList .route.loading:before{content:"";position:absolute;width:150%;height:100%;background:none;background-image:repeating-linear-gradient(60deg,transparent,transparent .75rem,var(--loaderColor) .75rem,var(--loaderColor) 1.5rem);z-index:2;border-top-right-radius:var(--borderRadius);border-bottom-right-radius:var(--borderRadius);transform:translate(0);transition:all var(--animDurFast) var(--cubicBezierPrimary),transform var(--animDurFast) ease;animation:barberPole .18s linear infinite}.xtrNavigation .routeList .route.active{color:#fff}.xtrNavigation .routeList .route.active:before{border-top-right-radius:var(--borderRadius);border-bottom-right-radius:var(--borderRadius);transform:translate(0);transition:all var(--animDurFast) var(--cubicBezierPrimary),transform var(--animDurFast) ease}@keyframes barberPole{0%{transform:translate(-1.75rem)}to{transform:translate(0)}}