+
{renderItems(leftItems)}
+
{renderItems(rightItems)}
+
+ );
}
export default memo(StatusBar);
diff --git a/src/workbench/statusBar/style.scss b/src/workbench/statusBar/style.scss
index d32772e67..a2774a0d3 100644
--- a/src/workbench/statusBar/style.scss
+++ b/src/workbench/statusBar/style.scss
@@ -1,10 +1,59 @@
@import 'mo/style/common';
#{$statusBar} {
+ align-items: center;
bottom: 0;
+ display: flex;
height: 22px;
+ justify-content: center;
position: absolute;
text-align: center;
width: 100%;
z-index: 1;
+
+ &__left-items,
+ &__right-items {
+ display: flex;
+ height: 100%;
+ }
+
+ &__left-items {
+ flex-grow: 1;
+
+ > :first-child {
+ margin-left: 7px;
+ }
+ }
+
+ &__right-items {
+ direction: rtl;
+
+ > :last-child {
+ margin-right: 7px;
+ }
+ }
+
+ &__item {
+ height: 100%;
+
+ a {
+ align-items: center;
+ cursor: pointer;
+ display: flex;
+ height: 100%;
+ outline-width: 0;
+ overflow: hidden;
+ padding: 0 5px;
+ text-overflow: ellipsis;
+ white-space: pre;
+ }
+
+ &:hover {
+ background-color: rgba(255, 255, 255, 0.12);
+ }
+
+ .codicon {
+ font-size: 14px;
+ }
+ }
}