mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2026-01-01 07:11:23 +00:00
updated tabs , sidebar , splas screen
This commit is contained in:
Sakshi Gupta
@@ -1772,9 +1772,9 @@ input::-webkit-calendar-picker-indicator {
|
||||
|
||||
.paddingspan4 {
|
||||
padding-top: 20px;
|
||||
padding-left: 20px;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
padding-left: 25px;
|
||||
padding-right: 25px;
|
||||
}
|
||||
|
||||
.closebtnn {
|
||||
@@ -1914,7 +1914,8 @@ input::-webkit-calendar-picker-indicator::after {
|
||||
}
|
||||
|
||||
.nav-tabs-margin {
|
||||
background-color: #f2f2f2;
|
||||
background-color: var(--colorNeutralBackground1);
|
||||
color: var(--colorNeutralForeground1);
|
||||
|
||||
.nav-tabs {
|
||||
display: flex;
|
||||
@@ -1922,11 +1923,19 @@ input::-webkit-calendar-picker-indicator::after {
|
||||
align-items: flex-end;
|
||||
height: 100%;
|
||||
margin-bottom: -0.5px;
|
||||
// border-bottom: 1px solid var(--colorNeutralStroke1);
|
||||
|
||||
li {
|
||||
// Override the bootstrap defaults here to align with our layout constants.
|
||||
margin-bottom: 0px;
|
||||
height: 32px;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--colorNeutralBackground1Hover);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--colorNeutralBackground1Pressed);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1940,8 +1949,20 @@ input::-webkit-calendar-picker-indicator::after {
|
||||
.nav.nav-tabs.qslevel > li > a:hover {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background-color: transparent !important;
|
||||
background-color: var(--colorNeutralBackground1Selected) !important;
|
||||
border-color: transparent;
|
||||
color: var(--colorNeutralForeground1);
|
||||
}
|
||||
|
||||
.nav-tabs > li > .tabNavContentContainer > .tab_Content:hover {
|
||||
background-color: var(--colorNeutralBackground1Hover);
|
||||
// border-bottom: 2px solid var(--colorNeutralStroke1);
|
||||
}
|
||||
|
||||
.nav-tabs > li.active > .tabNavContentContainer > .tab_Content,
|
||||
.nav-tabs > li.active > .tabNavContentContainer > .tab_Content:hover {
|
||||
background-color: var(--colorNeutralBackground1Selected);
|
||||
// border-bottom: 2px solid var(--colorCompoundBrandBackground);
|
||||
}
|
||||
|
||||
.numbersize {
|
||||
@@ -2375,7 +2396,9 @@ a:link {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0; // This prevents it to grow past the parent's width if its content is too wide
|
||||
min-width: 0;
|
||||
background-color: var(--colorNeutralBackground1);
|
||||
color: var(--colorNeutralForeground1);
|
||||
}
|
||||
|
||||
.tabs {
|
||||
@@ -2631,9 +2654,10 @@ a:link {
|
||||
}
|
||||
|
||||
.tabPanesContainer {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
overflow-y: scroll;
|
||||
background-color: var(--colorNeutralBackground1);
|
||||
color: var(--colorNeutralForeground1);
|
||||
}
|
||||
|
||||
.tabs-container {
|
||||
@@ -2655,11 +2679,11 @@ a:link {
|
||||
.nav-tabs > li.active > .tabNavContentContainer,
|
||||
.nav-tabs > li.active > .tabNavContentContainer:focus,
|
||||
.nav-tabs > li.active > .tabNavContentContainer:hover {
|
||||
color: #555;
|
||||
color: var(--colorNeutralForeground1);
|
||||
cursor: default;
|
||||
background-color: @BaseLight;
|
||||
border-color: @BaseMedium;
|
||||
border-bottom-color: @BaseLight;
|
||||
background-color: var(--colorNeutralBackground1Selected);
|
||||
border-color: var(--colorNeutralStroke1);
|
||||
// border-bottom-color: var(--colorCompoundBrandBackground);
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
height: @ActiveTabHeight;
|
||||
@@ -2668,7 +2692,7 @@ a:link {
|
||||
|
||||
.nav-tabs > li.active > .tabNavContentContainer > .tab_Content > .contentWrapper > .tabNavText {
|
||||
font-weight: bolder;
|
||||
border-bottom: 2px solid rgba(0, 120, 212, 1);
|
||||
border-bottom: 2px solid var(--colorCompoundBrandBackground);
|
||||
}
|
||||
|
||||
.nav-tabs > li.active:focus > .tabNavContentContainer {
|
||||
@@ -2681,7 +2705,7 @@ a:link {
|
||||
justify-content: space-between;
|
||||
border-radius: 2px 2px 0 0;
|
||||
padding: @DefaultSpace 0px @SmallSpace 0px;
|
||||
color: @BaseHigh;
|
||||
color: var(--colorNeutralForeground1);
|
||||
width: @TabsWidth;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
@@ -2689,75 +2713,29 @@ a:link {
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
background-color: @BaseMediumLow;
|
||||
border-color: @BaseMediumLow;
|
||||
background-color: var(--colorNeutralBackground1Hover);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: @BaseMediumLow;
|
||||
background-color: var(--colorNeutralBackground1Pressed);
|
||||
}
|
||||
|
||||
.tab_Content {
|
||||
.flex-display();
|
||||
width: @TabsWidth;
|
||||
border-right: @ButtonBorderWidth solid @BaseMedium;
|
||||
border-right: @ButtonBorderWidth solid var(--colorNeutralStroke1);
|
||||
white-space: nowrap;
|
||||
color: var(--colorNeutralForeground1);
|
||||
|
||||
.contentWrapper {
|
||||
.flex-display();
|
||||
width: @ContentWrapper;
|
||||
|
||||
.statusIconContainer {
|
||||
width: @StatusIconContainerSize;
|
||||
height: @StatusIconContainerSize;
|
||||
margin-left: @SmallSpace;
|
||||
display: inline-flex;
|
||||
|
||||
.errorIconContainer {
|
||||
width: @ErrorIconContainer;
|
||||
height: @ErrorIconContainer;
|
||||
margin-top: 1px;
|
||||
|
||||
.errorIcon {
|
||||
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;
|
||||
margin: 0px 0px @SmallSpace @SmallSpace;
|
||||
}
|
||||
}
|
||||
|
||||
.tabNavText {
|
||||
margin-left: @SmallSpace;
|
||||
margin-right: 2px;
|
||||
color: @BaseDark;
|
||||
color: var(--colorNeutralForeground1);
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
@@ -2768,21 +2746,36 @@ a:link {
|
||||
.tabIconSection {
|
||||
width: 29px;
|
||||
position: relative;
|
||||
padding-top: 2px;
|
||||
|
||||
.cancelButton {
|
||||
padding: 0px @SmallSpace 0px @SmallSpace;
|
||||
color: var(--colorNeutralForeground1);
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
.hover();
|
||||
background-color: var(--colorNeutralBackground1Hover);
|
||||
color: var(--colorNeutralForeground1);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
.focus();
|
||||
background-color: var(--colorNeutralBackground1Pressed);
|
||||
color: var(--colorNeutralForeground1);
|
||||
}
|
||||
|
||||
&:active {
|
||||
.active();
|
||||
background-color: var(--colorNeutralBackground1Pressed);
|
||||
color: var(--colorNeutralForeground1);
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "×";
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -3136,3 +3129,12 @@ a:link {
|
||||
.sidebarContainer {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.close-Icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -37,12 +37,40 @@ a:focus {
|
||||
}
|
||||
|
||||
.tabsManagerContainer {
|
||||
background-color: #ffffff;
|
||||
background-color: var(--colorNeutralBackground1);
|
||||
color: var(--colorNeutralForeground1);
|
||||
}
|
||||
|
||||
.nav-tabs-margin {
|
||||
padding-top: 5px;
|
||||
background-color: #ffffff;
|
||||
background-color: var(--colorNeutralBackground1);
|
||||
color: var(--colorNeutralForeground1);
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
border-bottom: 1px solid var(--colorNeutralStroke1);
|
||||
color: var(--colorNeutralForeground1);
|
||||
}
|
||||
|
||||
.nav-tabs > li > .tabNavContentContainer > .tab_Content:hover {
|
||||
border-bottom: 2px solid var(--colorNeutralStroke1);
|
||||
background-color: var(--colorNeutralBackground1Hover);
|
||||
}
|
||||
|
||||
.nav-tabs > li.active > .tabNavContentContainer > .tab_Content,
|
||||
.nav-tabs > li.active > .tabNavContentContainer > .tab_Content:hover {
|
||||
border-bottom: 2px solid var(--colorCompoundBrandBackground);
|
||||
background-color: var(--colorNeutralBackground1Selected);
|
||||
}
|
||||
|
||||
.nav-tabs > li.active > .tabNavContentContainer > .tab_Content > .contentWrapper > .tabNavText {
|
||||
border-bottom: 0px none transparent;
|
||||
color: var(--colorNeutralForeground1);
|
||||
}
|
||||
|
||||
.tabPanesContainer {
|
||||
background-color: var(--colorNeutralBackground1);
|
||||
color: var(--colorNeutralForeground1);
|
||||
}
|
||||
|
||||
.commandBarContainer {
|
||||
@@ -67,24 +95,12 @@ a:focus {
|
||||
}
|
||||
}
|
||||
|
||||
.nav-tabs > li > .tabNavContentContainer > .tab_Content:hover {
|
||||
border-bottom: 2px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.nav-tabs > li.active > .tabNavContentContainer > .tab_Content,
|
||||
.nav-tabs > li.active > .tabNavContentContainer > .tab_Content:hover {
|
||||
border-bottom: 2px solid @FabricAccentMedium;
|
||||
}
|
||||
|
||||
.nav-tabs > li.active > .tabNavContentContainer > .tab_Content > .contentWrapper > .tabNavText {
|
||||
border-bottom: 0px none transparent;
|
||||
}
|
||||
|
||||
.tabNavContentContainer {
|
||||
padding: @SmallSpace 0px @SmallSpace 0px;
|
||||
color: var(--colorNeutralForeground1);
|
||||
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
background-color: var(--colorNeutralBackground1Hover);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
@@ -93,6 +109,7 @@ a:focus {
|
||||
margin: 0px @SmallSpace 0px @SmallSpace;
|
||||
width: calc(@TabsWidth - (@SmallSpace * 2));
|
||||
padding-bottom: @SmallSpace;
|
||||
color: var(--colorNeutralForeground1);
|
||||
|
||||
.contentWrapper {
|
||||
.statusIconContainer {
|
||||
@@ -103,17 +120,18 @@ a:focus {
|
||||
.tabIconSection {
|
||||
.cancelButton {
|
||||
padding: 0px 0px 0px @SmallSpace;
|
||||
color: var(--colorNeutralForeground1);
|
||||
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
background-color: var(--colorNeutralBackground1Hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: transparent;
|
||||
background-color: var(--colorNeutralBackground1Pressed);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: transparent;
|
||||
background-color: var(--colorNeutralBackground1Pressed);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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