@react-beauty/ui-sidebar/dist/index.css

ui-sidebar

.react-beauty-el-menu-item-lead-element{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.react-beauty-el-menu-item-trail-element{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:end;justify-content:end;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.react-beauty-el-menu-item-label{font-size:var(--components-menu-item-font-size-label);line-height:var(--components-menu-item-line-height-label);font-weight:var(--components-menu-item-font-weight)}.react-beauty-el-menu-item-description{font-size:var(--components-menu-item-font-size-description);line-height:var(--components-menu-item-line-height-description);font-weight:var(--components-menu-item-font-weight);color:var(--components-menu-item-colors-description-color);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.react-beauty-el-menu-item-link-button{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:var(--components-menu-item-gap);-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:start;justify-content:start;width:100%;padding-left:var(--components-menu-item-padding-l);padding-right:var(--components-menu-item-padding-r);padding-top:var(--components-menu-item-padding-t);padding-bottom:var(--components-menu-item-padding-b);border-radius:var(--components-menu-item-border-radius);color:var(--components-menu-item-colors-default-color);-webkit-transition:-webkit-transform .2s ease-in-out;transition:transform .2s ease-in-out;outline:none;border:none;text-align:left}.react-beauty-el-menu-item-link-button:hover{cursor:pointer;background-color:var(--colors-main-hales)}.react-beauty-el-menu-item-link-button:focus-visible{outline:solid;outline-width:4px;outline-color:var(--components-menu-item-colors-focus-outline)}.react-beauty-el-menu-item-link-button:active{-webkit-transform:scale(.975);-moz-transform:scale(.975);-ms-transform:scale(.975);transform:scale(.975)}.react-beauty-el-menu-item-link-button[data-disabled=true]{cursor:not-allowed;opacity:32%}.react-beauty-el-menu-item-link-anchor{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:var(--components-menu-item-gap);-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:start;justify-content:start;width:100%;padding-left:var(--components-menu-item-padding-l);padding-right:var(--components-menu-item-padding-r);padding-top:var(--components-menu-item-padding-t);padding-bottom:var(--components-menu-item-padding-b);border-radius:var(--components-menu-item-border-radius);color:var(--components-menu-item-colors-default-color);-webkit-transition:-webkit-transform .2s ease-in-out;transition:transform .2s ease-in-out}.react-beauty-el-menu-item-link-anchor:hover{cursor:pointer;background-color:var(--colors-main-hales)}.react-beauty-el-menu-item-link-anchor:focus-visible{outline:solid;outline-width:4px;outline-color:var(--components-menu-item-colors-focus-outline)}.react-beauty-el-menu-item-link-anchor:active{-webkit-transform:scale(.975);-moz-transform:scale(.975);-ms-transform:scale(.975);transform:scale(.975)}.react-beauty-el-menu-item-link-anchor[data-disabled=true]{cursor:not-allowed;opacity:32%}.react-beauty-el-menu-item-container{max-width:var(--components-menu-item-max-width);list-style:none}.react-beauty-el-menu-label-container{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%}.react-beauty-el-menu-label-container>a{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:var(--components-menu-item-gap);-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:start;justify-content:start;width:100%;padding-left:var(--components-menu-item-padding-l);padding-right:var(--components-menu-item-padding-r);padding-top:var(--components-menu-item-padding-t);padding-bottom:var(--components-menu-item-padding-b);border-radius:var(--components-menu-item-border-radius);color:var(--components-menu-item-colors-default-color);-webkit-transition:-webkit-transform .2s ease-in-out;transition:transform .2s ease-in-out}.react-beauty-el-menu-label-container>a:hover{cursor:pointer;background-color:var(--colors-main-hales)}.react-beauty-el-menu-label-container>a:focus-visible{outline:solid;outline-width:4px;outline-color:var(--components-menu-item-colors-focus-outline)}.react-beauty-el-menu-label-container>a:active{-webkit-transform:scale(.975);-moz-transform:scale(.975);-ms-transform:scale(.975);transform:scale(.975)}.react-beauty-el-menu-label-container>a[data-disabled=true]{cursor:not-allowed;opacity:32%}.react-beauty-el-sidebar-container{z-index:var(--components-sidebar-z-index);position:relative;height:100vh;background-color:var(--components-sidebar-background);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;border-right:1px solid var(--components-sidebar-border-color);box-shadow:var(--components-sidebar-shadow);-webkit-transition:width var(--components-sidebar-transition-duration) 10ms;transition:width var(--components-sidebar-transition-duration) 10ms;min-width:var(--components-sidebar-width-collapsed)}.react-beauty-el-sidebar-container[data-expanded=true]{min-width:var(--components-sidebar-width-expanded)}.react-beauty-el-sidebar-header{height:var(--components-sidebar-header-height);padding:var(--components-sidebar-header-padding);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;border-bottom:1px solid var(--components-sidebar-border-color)}.react-beauty-el-sidebar-header[data-expanded=false]{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:start;justify-content:start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.react-beauty-el-sidebar-body{-webkit-flex:1;-ms-flex:1;flex:1;padding:var(--components-sidebar-body-padding);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:var(--components-sidebar-body-gap);overflow-y:auto;overflow-x:hidden}.react-beauty-el-sidebar-footer{padding:var(--components-sidebar-footer-padding);border-top:1px solid var(--components-sidebar-border-color);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between}.react-beauty-el-sidebar-toggle-button{position:absolute;top:12.5px;right:-10px;background:var(--components-sidebar-toggle-button-background);outline:solid;outline-color:var(--components-sidebar-toggle-button-outline-color);outline-width:1px;border:none;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;color:var(--components-sidebar-toggle-button-color);padding:2px;border-radius:999px}.react-beauty-el-sidebar-toggle-button:hover{background-color:var(--components-sidebar-toggle-button-background-hover);color:var(--components-sidebar-toggle-button-color-hover)}.react-beauty-el-sidebar-toggle-button:focus-visible{outline:solid;outline-width:4px;outline-color:var(--components-sidebar-toggle-button-focus-ring)}.react-beauty-el-sidebar-divider{min-height:1px;background-color:var(--components-sidebar-divider-color);margin:8px 0}.react-beauty-el-sidebar-section{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:var(--components-sidebar-section-gap);margin-bottom:var(--components-sidebar-section-margin-bottom)}.react-beauty-el-sidebar-items-list{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:var(--components-sidebar-item-list-gap);list-style:none;padding:0;margin:0}.react-beauty-el-sidebar-section-title{font-size:var(--components-sidebar-section-title-font-size);line-height:var(--components-sidebar-section-title-line-height);font-weight:var(--components-sidebar-section-title-font-weight);color:var(--components-sidebar-section-title-color);margin:0 0 4px;overflow-y:hidden}[data-expanded=false] .react-beauty-el-sidebar-section-title{display:none}.react-beauty-el-sidebar-item-container{width:100%;background-color:var(--components-sidebar-item-background);color:var(--components-sidebar-item-color);border-radius:var(--components-sidebar-item-border-radius);-webkit-transition:background-color var(--components-sidebar-transition-duration) var(--components-sidebar-transition-timing),color var(--components-sidebar-transition-duration) var(--components-sidebar-transition-timing);transition:background-color var(--components-sidebar-transition-duration) var(--components-sidebar-transition-timing),color var(--components-sidebar-transition-duration) var(--components-sidebar-transition-timing)}.react-beauty-el-sidebar-item-container[data-active=true]{background-color:var(--components-sidebar-item-background-active);color:var(--components-sidebar-item-color-active)}.react-beauty-el-sidebar-item-container[data-expanded=false]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:start;justify-content:start;gap:0px;padding:8px}.react-beauty-el-sidebar-item-container [data-visible=false]{opacity:0;width:0;height:0;overflow:hidden}.react-beauty-el-sidebar-item-container [data-visible=true]{opacity:1;width:auto;-webkit-transition:opacity var(--components-sidebar-transition-duration) var(--components-sidebar-transition-timing);transition:opacity var(--components-sidebar-transition-duration) var(--components-sidebar-transition-timing)}.react-beauty-el-tooltip-container{position:relative;display:inline-block}.react-beauty-el-tooltip-content{position:absolute;z-index:var(--components-tooltip-z-index, 1000);background-color:var(--colors-main-gohan);color:var(--colors-main-bulma);border-radius:var(--components-tooltip-border-radius, 8px);padding:var(--space-3);font-size:var(--font-size-xs);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-xs);max-width:var(--components-tooltip-max-width, 280px);box-shadow:var(--components-tooltip-shadow, 1px 1px 2px rgba(0, 0, 0, .2));text-align:center;white-space:nowrap;opacity:1}.react-beauty-el-tooltip-content[data-placement=top-left]{bottom:150%;left:20%;-webkit-transform:translateX(-75%);-moz-transform:translateX(-75%);-ms-transform:translateX(-75%);transform:translate(-75%)}.react-beauty-el-tooltip-content[data-placement=top-left]:before{content:"";position:absolute;top:100%;right:20%;margin-left:calc(var(--components-tooltip-pointer-size, 6px) * -1);border-width:var(--components-tooltip-pointer-size, 6px);border-style:solid;border-color:var(--colors-main-gohan) transparent transparent transparent}.react-beauty-el-tooltip-content[data-placement=top-center]{bottom:150%;left:50%;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translate(-50%)}.react-beauty-el-tooltip-content[data-placement=top-center]:before{content:"";position:absolute;top:100%;left:50%;margin-left:calc(var(--components-tooltip-pointer-size, 6px) * -1);border-width:var(--components-tooltip-pointer-size, 6px);border-style:solid;border-color:var(--colors-main-gohan) transparent transparent transparent}.react-beauty-el-tooltip-content[data-placement=top-right]{bottom:150%;right:20%;-webkit-transform:translateX(75%);-moz-transform:translateX(75%);-ms-transform:translateX(75%);transform:translate(75%)}.react-beauty-el-tooltip-content[data-placement=top-right]:before{content:"";position:absolute;top:100%;left:20%;margin-left:calc(var(--components-tooltip-pointer-size, 6px) * -1);border-width:var(--components-tooltip-pointer-size, 6px);border-style:solid;border-color:var(--colors-main-gohan) transparent transparent transparent}.react-beauty-el-tooltip-content[data-placement=right-top]{left:115%;top:-50%;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.react-beauty-el-tooltip-content[data-placement=right-top]:before{content:"";position:absolute;top:75%;right:100%;margin-top:calc(var(--components-tooltip-pointer-size, 6px) * -1);border-width:var(--components-tooltip-pointer-size, 6px);border-style:solid;border-color:transparent var(--colors-main-gohan) transparent transparent}.react-beauty-el-tooltip-content[data-placement=right-center]{left:115%;top:50%;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.react-beauty-el-tooltip-content[data-placement=right-center]:before{content:"";position:absolute;top:50%;right:100%;margin-top:calc(var(--components-tooltip-pointer-size, 6px) * -1);border-width:var(--components-tooltip-pointer-size, 6px);border-style:solid;border-color:transparent var(--colors-main-gohan) transparent transparent}.react-beauty-el-tooltip-content[data-placement=right-bottom]{left:115%;top:150%;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.react-beauty-el-tooltip-content[data-placement=right-bottom]:before{content:"";position:absolute;top:25%;right:100%;margin-top:calc(var(--components-tooltip-pointer-size, 6px) * -1);border-width:var(--components-tooltip-pointer-size, 6px);border-style:solid;border-color:transparent var(--colors-main-gohan) transparent transparent}.react-beauty-el-tooltip-content[data-placement=left-top]{right:115%;top:-50%;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.react-beauty-el-tooltip-content[data-placement=left-top]:before{content:"";position:absolute;top:75%;left:100%;margin-top:calc(var(--components-tooltip-pointer-size, 6px) * -1);border-width:var(--components-tooltip-pointer-size, 6px);border-style:solid;border-color:transparent transparent transparent var(--colors-main-gohan)}.react-beauty-el-tooltip-content[data-placement=left-center]{right:115%;top:50%;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.react-beauty-el-tooltip-content[data-placement=left-center]:before{content:"";position:absolute;top:50%;left:100%;margin-top:calc(var(--components-tooltip-pointer-size, 6px) * -1);border-width:var(--components-tooltip-pointer-size, 6px);border-style:solid;border-color:transparent transparent transparent var(--colors-main-gohan)}.react-beauty-el-tooltip-content[data-placement=left-bottom]{right:115%;top:150%;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.react-beauty-el-tooltip-content[data-placement=left-bottom]:before{content:"";position:absolute;top:25%;left:100%;margin-top:calc(var(--components-tooltip-pointer-size, 6px) * -1);border-width:var(--components-tooltip-pointer-size, 6px);border-style:solid;border-color:transparent transparent transparent var(--colors-main-gohan)}.react-beauty-el-tooltip-content[data-placement=bottom-left]{top:150%;left:20%;-webkit-transform:translateX(-75%);-moz-transform:translateX(-75%);-ms-transform:translateX(-75%);transform:translate(-75%)}.react-beauty-el-tooltip-content[data-placement=bottom-left]:before{content:"";position:absolute;bottom:100%;right:20%;margin-left:calc(var(--components-tooltip-pointer-size, 6px) * -1);border-width:var(--components-tooltip-pointer-size, 6px);border-style:solid;border-color:transparent transparent var(--colors-main-gohan) transparent}.react-beauty-el-tooltip-content[data-placement=bottom-center]{top:150%;left:50%;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translate(-50%)}.react-beauty-el-tooltip-content[data-placement=bottom-center]:before{content:"";position:absolute;bottom:100%;left:50%;margin-left:calc(var(--components-tooltip-pointer-size, 6px) * -1);border-width:var(--components-tooltip-pointer-size, 6px);border-style:solid;border-color:transparent transparent var(--colors-main-gohan) transparent}.react-beauty-el-tooltip-content[data-placement=bottom-right]{top:150%;right:20%;-webkit-transform:translateX(75%);-moz-transform:translateX(75%);-ms-transform:translateX(75%);transform:translate(75%)}.react-beauty-el-tooltip-content[data-placement=bottom-right]:before{content:"";position:absolute;bottom:100%;left:20%;margin-left:calc(var(--components-tooltip-pointer-size, 6px) * -1);border-width:var(--components-tooltip-pointer-size, 6px);border-style:solid;border-color:transparent transparent var(--colors-main-gohan) transparent}.react-beauty-el-tooltip-content[data-pointer=false]:before{display:none}.react-beauty-el-tooltip-content[data-shadow=false]{box-shadow:none}.react-beauty-el-tooltip-trigger{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%}.react-beauty-el-icon[data-size="2xs"]{width:var(--components-icon-size-placeholder-2xs);height:var(--components-icon-size-placeholder-2xs)}.react-beauty-el-icon[data-size=xs]{width:var(--components-icon-size-placeholder-xs);height:var(--components-icon-size-placeholder-xs)}.react-beauty-el-icon[data-size=md]{width:var(--components-icon-size-placeholder-md);height:var(--components-icon-size-placeholder-md)}.react-beauty-el-icon[data-size=lg]{width:var(--components-icon-size-placeholder-lg);height:var(--components-icon-size-placeholder-lg)}