//// Header// ._header { position: absolute; z-index: var(--headerZ); top: 0; left: 0; display: -ms-flexbox; display: flex; width: var(--sidebarWidth); height: var(--headerHeight); background: var(--headerBackground); border-bottom: 1px solid var(--headerBorder); border-right: 1px solid var(--headerBorder); @extend %border-box; @extend %user-select-none; @include mobile { width: var(--sidebarMediumWidth); }} ._header-left { float: left; height: 100%;} ._header-right { float: right; height: 100%;} ._header-btn { position: relative; flex: 0 0 auto; width: 2.25rem; height: 100%; color: var(--textColorLight); text-align: center; &[hidden] { display: none; } &[disabled] { opacity: .3; cursor: not-allowed; } > svg { width: 1.5rem; height: 1.5rem; @extend %svg-icon; }} //// Menu// ._menu { position: absolute; z-index: 1; top: .25rem; right: .25rem; width: 8.5rem; height: calc(2.25rem * 6 + 2.5rem + 1px); // (height of each menu element * total menu elements + menu title element total height + menu title border size) white-space: nowrap; word-wrap: normal; overflow-wrap: normal; font-size: .875rem; background: var(--contentBackground); border: 1px solid var(--headerBorder); border-radius: 3px; box-shadow: -1px 1px 1px rgba(black, .05); transition: all 0ms cubic-bezier(0.23, 1, 0.32, 1) 1ms; opacity: 0; -webkit-transform: scale(0, 0); transform: scale(0, 0); -webkit-transform-origin: 100% 0; transform-origin: 100% 0; &.active { transition-duration: 250ms; opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); } &:focus-within, ._menu-btn:focus + & { transition-duration: 250ms; opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); }} ._menu-title { margin: 0; line-height: 1.5rem; font-size: 1rem; font-weight: var(--boldFontWeight); letter-spacing: -.5px; background: var(--sidebarBackground); border-bottom: 1px solid var(--sidebarBorder); border-radius: 2px 2px 0 0;} ._menu-title-link,._menu-title-link:hover { display: block; padding: .5rem 1rem; color: var(--focusText); text-decoration: none;} ._menu-link { display: block; padding: 0 1rem; line-height: 2.25rem; color: inherit; text-decoration: none; &:hover { color: var(--focusText); text-decoration: none; background: var(--sidebarBackground); } &:last-child { border-radius: 0 0 2px 2px; }} //// Search form// ._search { -ms-flex: 1 1 auto; flex: 1 1 auto; position: relative; height: 100%; padding: .5rem 0 .5rem .5rem; @extend %border-box; > svg { position: absolute; z-index: 1; top: .875rem; left: .875rem; width: 1.25rem; height: 1.25rem; opacity: .42; @extend %svg-icon; fill: var(--absolute); }} ._search-input { position: relative; display: block; width: 100%; height: 100%; padding: 0 .75rem 1px 1.75rem; font-size: .875rem; background: var(--contentBackground); border: 1px solid; border-color: var(--searchBorder); border-radius: 3px; &:focus { outline: 0; border-color: var(--inputFocusBorder); box-shadow: 0 0 1px var(--inputFocusBorder); } &[disabled] { background: var(--sidebarBackground); cursor: not-allowed; }} ._search-clear { display: none; position: absolute; top: .5em; right: 0; width: 1.75rem; height: 2rem; opacity: .42; @extend %hide-text; &:hover { opacity: .7; } > svg { position: absolute; top: .5rem; left: .375rem; @extend %svg-icon; fill: var(--absolute); } ._search-active > & { display: block; }} ._search-tag { display: none; position: absolute; z-index: 2; top: .875rem; left: .875rem; padding: 0 .375rem; line-height: 1.25rem; max-width: 50%; font-size: .8125rem; color: var(--textColorLight); background: var(--searchTagBackground); border-radius: 2px; cursor: pointer; @extend %truncate-text;}
//
// Header
//
._header {
position: absolute;
z-index: var(--headerZ);
top: 0;
left: 0;
display: -ms-flexbox;
display: flex;
width: var(--sidebarWidth);
height: var(--headerHeight);
background: var(--headerBackground);
border-bottom: 1px solid var(--headerBorder);
border-right: 1px solid var(--headerBorder);
@extend %border-box;
@extend %user-select-none;
@include mobile { width: var(--sidebarMediumWidth); }
}
._header-left {
float: left;
height: 100%;
}
._header-right {
float: right;
height: 100%;
}
._header-btn {
position: relative;
flex: 0 0 auto;
width: 2.25rem;
height: 100%;
color: var(--textColorLight);
text-align: center;
&[hidden] { display: none; }
&[disabled] {
opacity: .3;
cursor: not-allowed;
}
> svg {
width: 1.5rem;
height: 1.5rem;
@extend %svg-icon;
}
}
//
// Menu
//
._menu {
position: absolute;
z-index: 1;
top: .25rem;
right: .25rem;
width: 8.5rem;
height: calc(2.25rem * 6 + 2.5rem + 1px); // (height of each menu element * total menu elements + menu title element total height + menu title border size)
white-space: nowrap;
word-wrap: normal;
overflow-wrap: normal;
font-size: .875rem;
background: var(--contentBackground);
border: 1px solid var(--headerBorder);
border-radius: 3px;
box-shadow: -1px 1px 1px rgba(black, .05);
transition: all 0ms cubic-bezier(0.23, 1, 0.32, 1) 1ms;
opacity: 0;
-webkit-transform: scale(0, 0);
transform: scale(0, 0);
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
&.active {
transition-duration: 250ms;
opacity: 1;
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
&:focus-within,
._menu-btn:focus + & {
transition-duration: 250ms;
opacity: 1;
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
._menu-title {
margin: 0;
line-height: 1.5rem;
font-size: 1rem;
font-weight: var(--boldFontWeight);
letter-spacing: -.5px;
background: var(--sidebarBackground);
border-bottom: 1px solid var(--sidebarBorder);
border-radius: 2px 2px 0 0;
}
._menu-title-link,
._menu-title-link:hover {
display: block;
padding: .5rem 1rem;
color: var(--focusText);
text-decoration: none;
}
._menu-link {
display: block;
padding: 0 1rem;
line-height: 2.25rem;
color: inherit;
text-decoration: none;
&:hover {
color: var(--focusText);
text-decoration: none;
background: var(--sidebarBackground);
}
&:last-child { border-radius: 0 0 2px 2px; }
}
//
// Search form
//
._search {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
position: relative;
height: 100%;
padding: .5rem 0 .5rem .5rem;
@extend %border-box;
> svg {
position: absolute;
z-index: 1;
top: .875rem;
left: .875rem;
width: 1.25rem;
height: 1.25rem;
opacity: .42;
@extend %svg-icon;
fill: var(--absolute);
}
}
._search-input {
position: relative;
display: block;
width: 100%;
height: 100%;
padding: 0 .75rem 1px 1.75rem;
font-size: .875rem;
background: var(--contentBackground);
border: 1px solid;
border-color: var(--searchBorder);
border-radius: 3px;
&:focus {
outline: 0;
border-color: var(--inputFocusBorder);
box-shadow: 0 0 1px var(--inputFocusBorder);
}
&[disabled] {
background: var(--sidebarBackground);
cursor: not-allowed;
}
}
._search-clear {
display: none;
position: absolute;
top: .5em;
right: 0;
width: 1.75rem;
height: 2rem;
opacity: .42;
@extend %hide-text;
&:hover { opacity: .7; }
> svg {
position: absolute;
top: .5rem;
left: .375rem;
@extend %svg-icon;
fill: var(--absolute);
}
._search-active > & { display: block; }
}
._search-tag {
display: none;
position: absolute;
z-index: 2;
top: .875rem;
left: .875rem;
padding: 0 .375rem;
line-height: 1.25rem;
max-width: 50%;
font-size: .8125rem;
color: var(--textColorLight);
background: var(--searchTagBackground);
border-radius: 2px;
cursor: pointer;
@extend %truncate-text;
}