mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2025-12-31 23:02:29 +00:00
updated tabs , sidebar , splas screen
This commit is contained in:
Sakshi Gupta
444
less/tree.less
444
less/tree.less
@@ -1,270 +1,270 @@
|
||||
@import "./Common/Constants";
|
||||
// @import "./Common/Constants";
|
||||
|
||||
.resourceTree {
|
||||
height: 100%;
|
||||
flex: 0 0 auto;
|
||||
.main {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
// .resourceTree {
|
||||
// height: 100%;
|
||||
// flex: 0 0 auto;
|
||||
// .main {
|
||||
// height: 100%;
|
||||
// }
|
||||
// }
|
||||
|
||||
.resourceTreeScroll {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding-right: 10px;
|
||||
}
|
||||
// .resourceTreeScroll {
|
||||
// height: 100%;
|
||||
// display: flex;
|
||||
// overflow-y: auto;
|
||||
// overflow-x: hidden;
|
||||
// padding-right: 10px;
|
||||
// }
|
||||
|
||||
.userSelectNone {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
// .userSelectNone {
|
||||
// -webkit-user-select: none;
|
||||
// -moz-user-select: none;
|
||||
// -ms-user-select: none;
|
||||
// }
|
||||
|
||||
.treeHovermargin {
|
||||
margin-left: 16px;
|
||||
}
|
||||
// .treeHovermargin {
|
||||
// margin-left: 16px;
|
||||
// }
|
||||
|
||||
.highlight {
|
||||
padding: @SmallSpace 2px;
|
||||
outline: 0;
|
||||
// .highlight {
|
||||
// padding: @SmallSpace 2px;
|
||||
// outline: 0;
|
||||
|
||||
&:hover {
|
||||
.hover();
|
||||
}
|
||||
// &:hover {
|
||||
// .hover();
|
||||
// }
|
||||
|
||||
&:active {
|
||||
.active();
|
||||
}
|
||||
// &:active {
|
||||
// .active();
|
||||
// }
|
||||
|
||||
&:focus {
|
||||
.focus();
|
||||
}
|
||||
}
|
||||
// &:focus {
|
||||
// .focus();
|
||||
// }
|
||||
// }
|
||||
|
||||
.contextmenushowing {
|
||||
background-color: #eee;
|
||||
}
|
||||
// .contextmenushowing {
|
||||
// background-color: #eee;
|
||||
// }
|
||||
|
||||
.collectionstree {
|
||||
width: 100%;
|
||||
margin-top: @DefaultSpace;
|
||||
// .collectionstree {
|
||||
// width: 100%;
|
||||
// margin-top: @DefaultSpace;
|
||||
|
||||
.databaseList {
|
||||
list-style-type: none;
|
||||
padding-left: 0px;
|
||||
// .databaseList {
|
||||
// list-style-type: none;
|
||||
// padding-left: 0px;
|
||||
|
||||
.collectionList {
|
||||
padding-left: (2 * @MediumSpace);
|
||||
}
|
||||
// .collectionList {
|
||||
// padding-left: (2 * @MediumSpace);
|
||||
// }
|
||||
|
||||
.collectionChildList {
|
||||
padding-left: @LargeSpace;
|
||||
}
|
||||
// .collectionChildList {
|
||||
// padding-left: @LargeSpace;
|
||||
// }
|
||||
|
||||
.databaseDocuments {
|
||||
padding-left: (5 * @MediumSpace);
|
||||
}
|
||||
}
|
||||
}
|
||||
// .databaseDocuments {
|
||||
// padding-left: (5 * @MediumSpace);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
.pointerCursor {
|
||||
cursor: pointer;
|
||||
}
|
||||
// .pointerCursor {
|
||||
// cursor: pointer;
|
||||
// }
|
||||
|
||||
.menuEllipsis {
|
||||
padding-right: 6px;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
position: relative;
|
||||
top: -5px;
|
||||
left: 0px;
|
||||
float: right;
|
||||
display: none;
|
||||
padding-left: 6px !important;
|
||||
line-height: @TreeLineHeight;
|
||||
}
|
||||
// .menuEllipsis {
|
||||
// padding-right: 6px;
|
||||
// font-weight: bold;
|
||||
// font-size: 18px;
|
||||
// position: relative;
|
||||
// top: -5px;
|
||||
// left: 0px;
|
||||
// float: right;
|
||||
// display: none;
|
||||
// padding-left: 6px !important;
|
||||
// line-height: @TreeLineHeight;
|
||||
// }
|
||||
|
||||
.databaseMenu {
|
||||
.flex-display();
|
||||
}
|
||||
// .databaseMenu {
|
||||
// .flex-display();
|
||||
// }
|
||||
|
||||
.databaseMenu:hover .menuEllipsis,
|
||||
.databaseMenu:focus .menuEllipsis {
|
||||
display: block;
|
||||
}
|
||||
// .databaseMenu:hover .menuEllipsis,
|
||||
// .databaseMenu:focus .menuEllipsis {
|
||||
// display: block;
|
||||
// }
|
||||
|
||||
.databaseCollChildTextOverflow {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
}
|
||||
// .databaseCollChildTextOverflow {
|
||||
// text-overflow: ellipsis;
|
||||
// white-space: nowrap;
|
||||
// overflow: hidden;
|
||||
// flex: 1;
|
||||
// }
|
||||
|
||||
.collectionMenu {
|
||||
.flex-display();
|
||||
}
|
||||
// .collectionMenu {
|
||||
// .flex-display();
|
||||
// }
|
||||
|
||||
.collectionMenu:hover .menuEllipsis,
|
||||
.collectionMenu:focus .menuEllipsis {
|
||||
display: block;
|
||||
}
|
||||
// .collectionMenu:hover .menuEllipsis,
|
||||
// .collectionMenu:focus .menuEllipsis {
|
||||
// display: block;
|
||||
// }
|
||||
|
||||
.documentsMenu:hover .menuEllipsis,
|
||||
.documentsMenu:focus .menuEllipsis {
|
||||
display: block;
|
||||
}
|
||||
// .documentsMenu:hover .menuEllipsis,
|
||||
// .documentsMenu:focus .menuEllipsis {
|
||||
// display: block;
|
||||
// }
|
||||
|
||||
.treeChildMenu {
|
||||
display: flex;
|
||||
}
|
||||
// .treeChildMenu {
|
||||
// display: flex;
|
||||
// }
|
||||
|
||||
.storedProcedureMenu:hover .menuEllipsis,
|
||||
.storedProcedureMenu:focus .menuEllipsis {
|
||||
display: block;
|
||||
}
|
||||
// .storedProcedureMenu:hover .menuEllipsis,
|
||||
// .storedProcedureMenu:focus .menuEllipsis {
|
||||
// display: block;
|
||||
// }
|
||||
|
||||
.childMenu {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
padding-left: (6 * @MediumSpace);
|
||||
width: 100%;
|
||||
}
|
||||
// .childMenu {
|
||||
// overflow: hidden;
|
||||
// text-overflow: ellipsis;
|
||||
// white-space: nowrap;
|
||||
// padding-left: (6 * @MediumSpace);
|
||||
// width: 100%;
|
||||
// }
|
||||
|
||||
.storedChildMenu:hover .menuEllipsis,
|
||||
.storedChildMenu:focus .menuEllipsis {
|
||||
display: block;
|
||||
}
|
||||
// .storedChildMenu:hover .menuEllipsis,
|
||||
// .storedChildMenu:focus .menuEllipsis {
|
||||
// display: block;
|
||||
// }
|
||||
|
||||
.contextmenu6 {
|
||||
top: -29px;
|
||||
}
|
||||
// .contextmenu6 {
|
||||
// top: -29px;
|
||||
// }
|
||||
|
||||
.userDefinedMenu:hover .contextmenu6 {
|
||||
display: block;
|
||||
}
|
||||
// .userDefinedMenu:hover .contextmenu6 {
|
||||
// display: block;
|
||||
// }
|
||||
|
||||
.userDefinedchildMenu:hover .menuEllipsis,
|
||||
.userDefinedchildMenu:focus .menuEllipsis {
|
||||
display: block;
|
||||
}
|
||||
// .userDefinedchildMenu:hover .menuEllipsis,
|
||||
// .userDefinedchildMenu:focus .menuEllipsis {
|
||||
// display: block;
|
||||
// }
|
||||
|
||||
.triggersMenu:hover .menuEllipsis,
|
||||
.triggersMenu:focus .menuEllipsis {
|
||||
display: block;
|
||||
}
|
||||
// .triggersMenu:hover .menuEllipsis,
|
||||
// .triggersMenu:focus .menuEllipsis {
|
||||
// display: block;
|
||||
// }
|
||||
|
||||
.triggersChildMenu:hover .menuEllipsis,
|
||||
.triggersChildMenu:focus .menuEllipsis {
|
||||
display: block;
|
||||
}
|
||||
// .triggersChildMenu:hover .menuEllipsis,
|
||||
// .triggersChildMenu:focus .menuEllipsis {
|
||||
// display: block;
|
||||
// }
|
||||
|
||||
.databaseId {
|
||||
font-size: 14px;
|
||||
}
|
||||
// .databaseId {
|
||||
// font-size: 14px;
|
||||
// }
|
||||
|
||||
.storedUdfTriggerMenu {
|
||||
padding-left: 0px;
|
||||
}
|
||||
// .storedUdfTriggerMenu {
|
||||
// padding-left: 0px;
|
||||
// }
|
||||
|
||||
.collectionstree img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
vertical-align: text-top;
|
||||
}
|
||||
// .collectionstree img {
|
||||
// width: 16px;
|
||||
// height: 16px;
|
||||
// vertical-align: text-top;
|
||||
// }
|
||||
|
||||
img.collectionsTreeCollapseExpand {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
vertical-align: middle;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
// img.collectionsTreeCollapseExpand {
|
||||
// width: 10px;
|
||||
// height: 10px;
|
||||
// vertical-align: middle;
|
||||
// margin-bottom: 5px;
|
||||
// }
|
||||
|
||||
.collapsed::before {
|
||||
content: "\23F5";
|
||||
margin-left: 0px;
|
||||
font-size: 15px;
|
||||
}
|
||||
// .collapsed::before {
|
||||
// content: "\23F5";
|
||||
// margin-left: 0px;
|
||||
// font-size: 15px;
|
||||
// }
|
||||
|
||||
.expanded::before {
|
||||
content: "\23F7";
|
||||
margin-left: 0px;
|
||||
font-size: 15px;
|
||||
}
|
||||
// .expanded::before {
|
||||
// content: "\23F7";
|
||||
// margin-left: 0px;
|
||||
// font-size: 15px;
|
||||
// }
|
||||
|
||||
.collectionMenuChildren {
|
||||
padding-left: 42px;
|
||||
}
|
||||
// .collectionMenuChildren {
|
||||
// padding-left: 42px;
|
||||
// }
|
||||
|
||||
.main-nav {
|
||||
width: 100vh;
|
||||
height: 40px;
|
||||
background: white;
|
||||
transform-origin: left top;
|
||||
-webkit-transform-origin: left top;
|
||||
-ms-transform-origin: left top;
|
||||
transform: rotate(-90deg) translateX(-100%);
|
||||
-webkit-transform: rotate(-90deg) translateX(-100%);
|
||||
-ms-transform: rotate(-90deg) translateX(-100%);
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
// .main-nav {
|
||||
// width: 100vh;
|
||||
// height: 40px;
|
||||
// background: white;
|
||||
// transform-origin: left top;
|
||||
// -webkit-transform-origin: left top;
|
||||
// -ms-transform-origin: left top;
|
||||
// transform: rotate(-90deg) translateX(-100%);
|
||||
// -webkit-transform: rotate(-90deg) translateX(-100%);
|
||||
// -ms-transform: rotate(-90deg) translateX(-100%);
|
||||
// border-bottom: 1px solid #ccc;
|
||||
// }
|
||||
|
||||
.main-nav-img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: -32px 0 0 0;
|
||||
transform: rotate(-90deg) translateX(-100%);
|
||||
-webkit-transform: rotate(-90deg) translateX(-100%);
|
||||
-ms-transform: rotate(-90deg) translateX(-100%);
|
||||
}
|
||||
// .main-nav-img {
|
||||
// width: 16px;
|
||||
// height: 16px;
|
||||
// margin: -32px 0 0 0;
|
||||
// transform: rotate(-90deg) translateX(-100%);
|
||||
// -webkit-transform: rotate(-90deg) translateX(-100%);
|
||||
// -ms-transform: rotate(-90deg) translateX(-100%);
|
||||
// }
|
||||
|
||||
.main-nav-img.main-nav-sub-img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 0px 0px 0 0;
|
||||
transform: rotate(180deg) translateX(0%);
|
||||
-webkit-transform: rotate(180deg) translateX(0%);
|
||||
-ms-transform: rotate(180deg) translateX(0%);
|
||||
position: absolute;
|
||||
right: -8px;
|
||||
top: 16px;
|
||||
}
|
||||
// .main-nav-img.main-nav-sub-img {
|
||||
// width: 16px;
|
||||
// height: 16px;
|
||||
// margin: 0px 0px 0 0;
|
||||
// transform: rotate(180deg) translateX(0%);
|
||||
// -webkit-transform: rotate(180deg) translateX(0%);
|
||||
// -ms-transform: rotate(180deg) translateX(0%);
|
||||
// position: absolute;
|
||||
// right: -8px;
|
||||
// top: 16px;
|
||||
// }
|
||||
|
||||
ul.nav {
|
||||
margin: 0 auto;
|
||||
margin-top: 0px;
|
||||
margin-left: 0px;
|
||||
}
|
||||
// ul.nav {
|
||||
// margin: 0 auto;
|
||||
// margin-top: 0px;
|
||||
// margin-left: 0px;
|
||||
// }
|
||||
|
||||
.mini ul.nav li {
|
||||
float: right;
|
||||
line-height: 25px;
|
||||
height: auto;
|
||||
margin-top: 3px;
|
||||
}
|
||||
// .mini ul.nav li {
|
||||
// float: right;
|
||||
// line-height: 25px;
|
||||
// height: auto;
|
||||
// margin-top: 3px;
|
||||
// }
|
||||
|
||||
.spancolchildstyle {
|
||||
padding: 4px;
|
||||
}
|
||||
// .spancolchildstyle {
|
||||
// padding: 4px;
|
||||
// }
|
||||
|
||||
.contextmenubutton {
|
||||
float: right;
|
||||
display: none;
|
||||
}
|
||||
// .contextmenubutton {
|
||||
// float: right;
|
||||
// display: none;
|
||||
// }
|
||||
|
||||
.highlight:hover > .contextmenubutton {
|
||||
display: unset;
|
||||
}
|
||||
// .highlight:hover > .contextmenubutton {
|
||||
// display: unset;
|
||||
// }
|
||||
|
||||
.highlight:hover > .contextmenubutton::after {
|
||||
content: "\2026";
|
||||
font-size: 12px;
|
||||
}
|
||||
// .highlight:hover > .contextmenubutton::after {
|
||||
// content: "\2026";
|
||||
// font-size: 12px;
|
||||
// }
|
||||
|
||||
.showEllipsis {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
// .showEllipsis {
|
||||
// text-overflow: ellipsis;
|
||||
// white-space: nowrap;
|
||||
// overflow: hidden;
|
||||
// }
|
||||
|
||||
Reference in New Issue
Block a user