random-mirrors
/
cosmos-explorer
mirror of https://github.com/Azure/cosmos-explorer.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Tabs container now adapts its size with flex (#1867)

This commit is contained in:
Laurent Nguyen 2024-06-11 17:17:45 +02:00 committed by GitHub
parent c680481fe0
commit 1ba3a6c761
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 59 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
less/documentDB.less
View File

@ -2366,9 +2366,9 @@ a:link {
.tabsManagerContainer { .tabsManagerContainer {
height: 100%; height: 100%;
flex-grow: 1; flex-grow: 1;
overflow: hidden; display: flex;
flex-direction: column;
min-height: 300px; min-height: 300px;
overflow-y: scroll;
} }
.tabs { .tabs {
@ -2671,7 +2671,7 @@ a:link {
width: @ActiveTabWidth; width: @ActiveTabWidth;
} }
.nav-tabs > li.active > .tabNavContentContainer > .tab_Content > .contentWrapper> .tabNavText { .nav-tabs > li.active > .tabNavContentContainer > .tab_Content > .contentWrapper > .tabNavText {
font-weight: bolder; font-weight: bolder;
border-bottom: 2px solid rgba(0, 120, 212, 1); border-bottom: 2px solid rgba(0, 120, 212, 1);
} }
@ -2708,68 +2708,68 @@ a:link {
border-right: @ButtonBorderWidth solid @BaseMedium; border-right: @ButtonBorderWidth solid @BaseMedium;
white-space: nowrap; white-space: nowrap;
.contentWrapper { .contentWrapper {
.flex-display(); .flex-display();
width: @ContentWrapper; width: @ContentWrapper;
.statusIconContainer { .statusIconContainer {
width: @StatusIconContainerSize; width: @StatusIconContainerSize;
height: @StatusIconContainerSize; height: @StatusIconContainerSize;
margin-left: @SmallSpace; margin-left: @SmallSpace;
display: inline-flex; display: inline-flex;
.errorIconContainer { .errorIconContainer {
width: @ErrorIconContainer; width: @ErrorIconContainer;
height: @ErrorIconContainer; height: @ErrorIconContainer;
margin-top: 1px; margin-top: 1px;
.errorIcon { .errorIcon {
width: @ErrorIconWidth; width: @ErrorIconWidth;
height: @LoadingErrorIconSize;
background-image: url(../images/error_no_outline.svg);
background-repeat: no-repeat;
background-position: center;
background-size: 3px;
display: block;
margin: 1px 0px 0px 6px;
}
}
.errorIconContainer.actionsEnabled {
&:hover {
.hover();
}
&:focus {
.focus();
}
&:active {
.active();
}
}
.errorIconContainer[tabindex]:active {
outline: none;
}
.loadingIcon {
width: @LoadingErrorIconSize;
height: @LoadingErrorIconSize; height: @LoadingErrorIconSize;
margin: 0px 0px @SmallSpace @SmallSpace; background-image: url(../images/error_no_outline.svg);
background-repeat: no-repeat;
background-position: center;
background-size: 3px;
display: block;
margin: 1px 0px 0px 6px;
} }
} }
.tabNavText { .errorIconContainer.actionsEnabled {
margin-left: @SmallSpace; &:hover {
margin-right: 2px; .hover();
color: @BaseDark; }
text-overflow: ellipsis;
overflow: hidden; &:focus {
white-space: nowrap; .focus();
flex-grow: 1; }
&:active {
.active();
}
}
.errorIconContainer[tabindex]:active {
outline: none;
}
.loadingIcon {
width: @LoadingErrorIconSize;
height: @LoadingErrorIconSize;
margin: 0px 0px @SmallSpace @SmallSpace;
} }
} }
.tabNavText {
margin-left: @SmallSpace;
margin-right: 2px;
color: @BaseDark;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
flex-grow: 1;
}
}
.tabIconSection { .tabIconSection {
width: 29px; width: 29px;
position: relative; position: relative;