vexip-ui/css/layout.css

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

.vxp-layout-vars{--vxp-layout-view-height:100vh;--vxp-layout-aside-z-index:calc(var(--vxp-z-index-popper) + 101);--vxp-layout-aside-width:240px;--vxp-layout-aside-bg-color:var(--vxp-bg-color-base);--vxp-layout-aside-b-color:var(--vxp-border-color-light-2);--vxp-layout-aside-border:var(--vxp-border-shape) var(--vxp-layout-aside-b-color);--vxp-layout-header-z-index:calc(var(--vxp-z-index-popper) + 100);--vxp-layout-header-height:55px;--vxp-layout-header-bg-color:var(--vxp-bg-color-base);--vxp-layout-header-b-color:var(--vxp-border-color-light-2);--vxp-layout-header-border:var(--vxp-border-shape) var(--vxp-layout-header-b-color);--vxp-layout-main-bg-color:transparent;--vxp-layout-footer-bg-color:var(--vxp-fill-color-background)}.vxp-layout{font-family:var(--vxp-font-family-base);font-size:var(--vxp-font-size-base);font-variant-numeric:tabular-nums;line-height:var(--vxp-line-height-base);color:var(--vxp-content-color-base);width:100%;height:100%}.vxp-layout,.vxp-layout *,.vxp-layout ::after,.vxp-layout ::before{box-sizing:border-box}.vxp-layout--inherit{font-family:inherit;font-size:inherit;font-variant-numeric:inherit;line-height:inherit}.vxp-layout--inherit{color:inherit}.vxp-layout__wrapper{position:relative;display:flex;min-height:var(--vxp-layout-view-height)}.vxp-layout__wrapper--fixed{height:var(--vxp-layout-view-height)}.vxp-layout--header-main .vxp-layout__wrapper,.vxp-layout--no-aside .vxp-layout__wrapper{flex-direction:column}.vxp-layout__sidebar{position:absolute;inset-inline-start:0;top:0;bottom:0;z-index:var(--vxp-layout-aside-z-index);display:flex;pointer-events:none}.vxp-layout__aside{font-family:var(--vxp-font-family-base);font-size:var(--vxp-font-size-base);font-variant-numeric:tabular-nums;line-height:var(--vxp-line-height-base);color:var(--vxp-content-color-base);position:sticky;top:0;bottom:0;left:0;display:flex;flex-direction:column;width:var(--vxp-layout-aside-width);max-height:var(--vxp-layout-view-height);pointer-events:all;background-color:var(--vxp-layout-aside-bg-color);border-inline-end:var(--vxp-layout-aside-border);transition:width var(--vxp-transition-base),var(--vxp-transition-background),var(--vxp-transition-border),var(--vxp-transition-transform);transform:translateX(-100%);will-change:width,transform}.vxp-layout__aside,.vxp-layout__aside *,.vxp-layout__aside ::after,.vxp-layout__aside ::before{box-sizing:border-box}.vxp-layout__aside--inherit{font-family:inherit;font-size:inherit;font-variant-numeric:inherit;line-height:inherit}.vxp-layout__aside--inherit{color:inherit}html.rtl .vxp-layout__aside,html[dir=rtl] .vxp-layout__aside{transform:translateX(100%)}.vxp-layout__aside--fixed{z-index:1;transform:translateX(0)}html.rtl .vxp-layout__aside--fixed,html[dir=rtl] .vxp-layout__aside--fixed{transform:translateX(0)}.vxp-layout__aside--expanded{transform:translateX(0)}html.rtl .vxp-layout__aside--expanded,html[dir=rtl] .vxp-layout__aside--expanded{transform:translateX(0)}.vxp-layout__aside--reduced{width:64px}.vxp-layout__aside--no-sign.vxp-layout__aside--fixed{top:var(--vxp-layout-header-height);max-height:calc(var(--vxp-layout-view-height) - var(--vxp-layout-header-height))}.vxp-layout__aside-top{display:flex;flex-shrink:0;width:100%}.vxp-layout__aside-main{display:flex;flex:1 0 0%;width:100%}.vxp-layout__aside-bottom{display:flex;flex-shrink:0;width:100%}.vxp-layout__aside .vxp-menu{margin-top:10px;border-inline-end:0}.vxp-layout--locked .vxp-layout__aside{transition-duration:0s}.vxp-layout__section{position:relative;width:100%;min-height:calc(var(--vxp-layout-view-height) - var(--vxp-layout-header-height));transition:padding-inline-start var(--vxp-transition-base)}.vxp-layout__section--away{padding-inline-start:var(--vxp-layout-aside-width)}.vxp-layout__section--away.vxp-layout__section--reduced{padding-inline-start:64px}.vxp-layout--header-main .vxp-layout__section{height:auto}.vxp-layout--no-aside .vxp-layout__section{min-height:var(--vxp-layout-view-height);padding-inline-start:0}.vxp-layout--locked .vxp-layout__section{transition-duration:0s}.vxp-layout__header{font-family:var(--vxp-font-family-base);font-size:var(--vxp-font-size-base);font-variant-numeric:tabular-nums;line-height:var(--vxp-line-height-base);color:var(--vxp-content-color-base);position:sticky;inset-inline-start:0;top:0;z-index:var(--vxp-layout-header-z-index);display:flex;align-items:center;width:100%;height:var(--vxp-layout-header-height);padding:0 16px;background-color:var(--vxp-layout-header-bg-color);border-bottom:var(--vxp-layout-header-border);transition:height var(--vxp-transition-base),var(--vxp-transition-background),var(--vxp-transition-border),var(--vxp-transition-transform)}.vxp-layout__header,.vxp-layout__header *,.vxp-layout__header ::after,.vxp-layout__header ::before{box-sizing:border-box}.vxp-layout__header--inherit{font-family:inherit;font-size:inherit;font-variant-numeric:inherit;line-height:inherit}.vxp-layout__header--inherit{color:inherit}.vxp-layout__header--affixed{transform:translateY(-100%)}.vxp-layout__header--away{position:relative}.vxp-layout__header-left{display:flex;flex-shrink:0;align-items:center;height:100%}.vxp-layout__header-main{display:flex;flex:1 0 0%;align-items:center;min-width:0;height:100%}.vxp-layout__header-right{display:flex;flex-shrink:0;align-items:center;height:100%}.vxp-layout__header .vxp-menu{width:100%;height:100%}.vxp-layout__header .vxp-menu>.vxp-menu__item{height:var(--vxp-layout-header-height)}.vxp-layout__scrollbar{top:var(--vxp-layout-header-height)}.vxp-layout--no-header .vxp-layout__scrollbar{top:0}.vxp-layout__main{position:relative;display:flex;flex-direction:column;width:100%;background-color:var(--vxp-layout-main-bg-color)}.vxp-layout__main--fixed{height:calc(100% - var(--vxp-layout-header-height));overflow:hidden}.vxp-layout--header-main .vxp-layout__main--fixed,.vxp-layout--no-header .vxp-layout__main--fixed{height:100%}.vxp-layout__footer{font-family:var(--vxp-font-family-base);font-size:var(--vxp-font-size-base);font-variant-numeric:tabular-nums;line-height:var(--vxp-line-height-base);color:var(--vxp-content-color-base);display:flex;flex-direction:column;align-items:center;width:100%;background-color:var(--vxp-layout-footer-bg-color)}.vxp-layout__footer,.vxp-layout__footer *,.vxp-layout__footer ::after,.vxp-layout__footer ::before{box-sizing:border-box}.vxp-layout__footer--inherit{font-family:inherit;font-size:inherit;font-variant-numeric:inherit;line-height:inherit}.vxp-layout__footer--inherit{color:inherit}.vxp-layout__sign{display:flex;align-items:center;height:var(--vxp-layout-header-height);cursor:pointer;transition:height var(--vxp-transition-base)}.vxp-layout__sign-name{width:calc(100% - 64px);overflow:hidden;font-size:var(--vxp-font-size-primary);font-weight:700;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:100%;transition:width var(--vxp-transition-base),var(--vxp-transition-opacity)}.vxp-layout__header .vxp-layout__sign{padding-inline-end:16px;margin-inline-start:-16px}.vxp-layout__header .vxp-layout__sign--logo-only{padding-inline-end:0}.vxp-layout--header-main .vxp-layout__sign{min-width:var(--vxp-layout-aside-width)}.vxp-layout--no-aside .vxp-layout__sign{min-width:0}.vxp-layout__aside--reduced .vxp-layout__sign-name{width:0;opacity:0}.vxp-layout__logo{width:64px;height:100%;max-height:32px;text-align:center}.vxp-layout__logo img{height:100%}.vxp-layout__reduce-handler{display:flex;align-items:center;justify-content:center;width:100%;height:48px;cursor:pointer;border-top:var(--vxp-layout-aside-border)}.vxp-layout__expand-handler{position:absolute;inset-inline-start:100%;bottom:47px;display:flex;align-items:center;justify-content:center;width:20px;height:30px;color:var(--vxp-content-color-third);cursor:pointer;background-color:var(--vxp-layout-aside-bg-color);border:var(--vxp-layout-aside-border);border-radius:0 var(--vxp-radius-base) var(--vxp-radius-base) 0}.vxp-layout__aside--fixed .vxp-layout__expand-handler{display:none}.vxp-layout__aside--expanded .vxp-layout__expand-handler .vxp-icon{transform:rotate(180deg)}.vxp-layout__user .vxp-dropdown__trigger{padding-inline-end:4px;margin-inline-end:-4px;cursor:pointer}.vxp-layout__user-profile{position:relative;display:flex;flex-direction:column;min-height:32px;padding:5px 16px;margin-bottom:10px;white-space:nowrap;list-style:none;background-color:transparent}.vxp-layout__user-profile::after{position:absolute;inset-inline-start:0;bottom:-5.5px;display:block;width:100%;height:0;content:"";border-bottom:var(--vxp-dropdown-divider)}.vxp-layout__user-email{margin-top:2px;color:var(--vxp-content-color-secondary)}.vxp-layout__user-action{display:flex;align-items:center;line-height:1}.vxp-layout__config{position:relative;display:flex;flex-direction:column;padding:5px 16px;margin-bottom:10px;white-space:nowrap;list-style:none;background-color:transparent}.vxp-layout__config::after{position:absolute;inset-inline-start:0;bottom:-5.5px;display:block;width:100%;height:0;content:"";border-bottom:var(--vxp-dropdown-divider)}.vxp-layout__config-label{margin-bottom:8px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxp-layout__config-unit{display:flex;flex-wrap:wrap;max-width:220px;margin-bottom:10px}.vxp-layout__config-unit:last-child{margin-bottom:0}.vxp-layout__brief-block{position:relative;width:44px;height:32px;margin-inline-end:16px;overflow:hidden;cursor:pointer;background-color:var(--vxp-fill-color-humble);border-radius:var(--vxp-radius-small);box-shadow:var(--vxp-shadow-base)}.vxp-layout__brief-block:last-child{margin-inline-end:0}.vxp-layout__brief-block::before{position:absolute;inset-block-start:0;top:0;bottom:0;width:30%;content:"";background-color:var(--vxp-content-color-reverse)}.vxp-layout__brief-block::after{position:absolute;inset-inline:0;top:0;height:25%;content:"";background-color:var(--vxp-content-color-base)}.vxp-layout__brief-block--aside::before{z-index:1;background-color:var(--vxp-content-color-base)}.vxp-layout__brief-block--aside::after{background-color:var(--vxp-content-color-reverse)}.vxp-layout__brief-block .vxp-icon{position:absolute;inset-inline-end:3px;bottom:3px;color:var(--vxp-color-primary-base)}.vxp-layout__theme-mode{border:var(--vxp-border-base)}.vxp-layout__theme-mode--dark{--vxp-switch-bg-color-open:var(--vxp-fill-color-background);--vxp-switch-signal-bg-color:var(--vxp-color-black);--vxp-switch-icon-color:var(--vxp-content-color-secondary)}.vxp-layout__major-color{display:flex;align-items:center;justify-content:center;width:30px;height:20px;margin-inline-end:8px;margin-bottom:6px;color:var(--vxp-color-white);cursor:pointer;border-radius:var(--vxp-radius-small)}.vxp-layout__major-color:last-child{margin-inline-end:0}.vxp-layout__copyright{width:100%;padding:16px 0 22px;color:var(--vxp-content-color-secondary);text-align:center}.vxp-layout__links{width:100%;padding:24px 56px 0}.vxp-layout__links-row{display:flex;justify-content:space-between;padding:0 8px;border-bottom:var(--vxp-border-light-2)}.vxp-layout__links--vertical .vxp-layout__links-row{flex-direction:column;align-items:center}.vxp-layout__link{display:flex;flex-wrap:wrap;align-items:center;margin-bottom:4px}.vxp-layout__link .vxp-linker,.vxp-layout__link-name,.vxp-layout__link-subname{display:inline-flex}.vxp-layout__link-group{display:inline-flex;flex:1 0 0;flex-direction:column;padding-inline-end:24px;padding-bottom:32px}.vxp-layout__link-group--vertical{align-items:center;padding-inline-end:0}.vxp-layout__link-name--group{display:flex;align-items:center;margin-bottom:16px;font-size:var(--vxp-font-size-primary)}.vxp-layout__link-subname{margin-inline-start:6px;color:var(--vxp-content-color-disabled)}