imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

swap search field and breadcrumbs

Browse source
This commit is contained in:
Bruno Windels 2020-07-13 14:52:50 +02:00
parent 0c06975e7a
commit 02b27086da
2 changed files with 31 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

43
res/css/structures/_LeftPanel2.scss
View file

@ -64,33 +64,30 @@ $tagPanelWidth: 56px; // only applies in this file, used for calculations
// Create another flexbox column for the rows to stack within
display: flex;
flex-direction: column;
}
// This is basically just breadcrumbs. The row above that is handled by the UserMenu
.mx_LeftPanel2_headerRow {
// Create yet another flexbox, this time within the row, to ensure items stay
// aligned correctly. This is also a row-based flexbox.
display: flex;
align-items: center;
.mx_LeftPanel2_breadcrumbsContainer {
width: 100%;
overflow-y: hidden;
overflow-x: scroll;
margin-top: 20px;
padding-bottom: 2px;
flex: 0 0 auto;
// Create yet another flexbox, this time within the row, to ensure items stay
// aligned correctly. This is also a row-based flexbox.
display: flex;
align-items: center;
&.mx_IndicatorScrollbar_leftOverflow {
mask-image: linear-gradient(90deg, transparent, black 10%);
}
.mx_LeftPanel2_breadcrumbsContainer {
width: 100%;
overflow-y: hidden;
overflow-x: scroll;
margin-top: 20px;
padding-bottom: 2px;
&.mx_IndicatorScrollbar_rightOverflow {
mask-image: linear-gradient(90deg, black, black 90%, transparent);
}
&.mx_IndicatorScrollbar_leftOverflow {
mask-image: linear-gradient(90deg, transparent, black 10%);
}
&.mx_IndicatorScrollbar_rightOverflow {
mask-image: linear-gradient(90deg, black, black 90%, transparent);
}
&.mx_IndicatorScrollbar_rightOverflow.mx_IndicatorScrollbar_leftOverflow {
mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}
&.mx_IndicatorScrollbar_rightOverflow.mx_IndicatorScrollbar_leftOverflow {
mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}
}