composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-04-24 19:18:44 +02:00
Code Issues Packages Projects Releases Wiki Activity

N°3560 Add placeholder and a button to load remote tabs in scroll mode

Browse Source
This commit is contained in:
Stephen Abello
2021-02-19 11:45:06 +01:00
parent be38bca83d
commit e650297ded
7 changed files with 325 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
css/backoffice/layout/tab-container/_tab-container.scss
View File

@@ -38,6 +38,14 @@ $ibo-tab-container--tab-container--label--spacing: 20px !default;
$ibo-tab-container--tab-container--label--margin-bottom: 20px !default;
$ibo-tab-container--tab-container--label--span--margin-left: 40px !default;
$ibo-tab--temporary-remote-content-max-height: 300px !default;
$ibo-tab--temporary-remote-content--button--color: $ibo-color-grey-800 !default;
$ibo-tab--temporary-remote-content--button--hover--opacity: 0.5 !default;
$ibo-tab--temporary-remote-content--button--hover--background-color: $ibo-color-grey-900 !default;
$ibo-tab--temporary-remote-content--button--hover--color: $ibo-color-grey-200 !default;
/* Rules */
.ibo-tab-container--tabs-list {
position: relative;
@@ -116,7 +124,12 @@ $ibo-tab-container--tab-container--label--span--margin-left: 40px !default;
padding: $ibo-tab-container--tab-container--padding-y $ibo-tab-container--tab-container--padding-x;
}
.ibo-is-scrollable .ibo-tab-container--tab-container--label{
display: block;
}
.ibo-tab-container--tab-container--label{
display: none;
margin-bottom: $ibo-tab-container--tab-container--label--margin-bottom;
overflow-x: hidden;
> span{
@@ -144,4 +157,41 @@ $ibo-tab-container--tab-container--label--span--margin-left: 40px !default;
left: 100%;
margin-left: $ibo-tab-container--tab-container--label--spacing;
}
}
.ibo-tab--temporary-remote-content{
position: relative;
}
.ibo-tab--temporary-remote-content--placeholder{
height: auto;
position: relative;
max-height: $ibo-tab--temporary-remote-content-max-height;
>svg{
max-height: $ibo-tab--temporary-remote-content-max-height;
}
}
.ibo-tab--temporary-remote-content--button{
position: absolute;
top: 0;
display: flex;
justify-content: center;
align-content: center;
flex-direction: column;
text-align: center;
height: 100%;
width: 100%;
cursor: pointer;
@extend %ibo-font-ral-med-300;
background-color: transparent;
color: $ibo-tab--temporary-remote-content--button--color;
&:hover{
opacity: $ibo-tab--temporary-remote-content--button--hover--opacity;
background-color: $ibo-tab--temporary-remote-content--button--hover--background-color;
color: $ibo-tab--temporary-remote-content--button--hover--color;
}
}