move the designer component to workbench layer (#17620)

This commit is contained in:
Alan Ren
2021-11-08 10:26:27 -08:00
committed by GitHub
parent f91a228066
commit c00c5e044b
8 changed files with 24 additions and 25 deletions

View File

@@ -0,0 +1,104 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
.designer-component, .designer-component .container {
width: 100%;
height: 100%;
}
.designer-component .content-container {
display: flex;
flex-direction: column;
border-right-width: 1px;
border-right-style: solid;
width: 100%;
height: 100%;
overflow: hidden;
}
.designer-component .top-content-container {
flex: 0 0 auto;
}
.designer-component .editor-container {
border-top-width: 1px;
border-top-style: solid;
width: 100%;
height: 100%;
}
.designer-component .tabbed-panel-container {
flex: 1 1 auto;
overflow: hidden;
}
.designer-component .properties-container {
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
}
.designer-component .properties-container .title-container {
padding: 5px;
flex: 0 0 auto;
font-weight: bold;
}
.designer-component .properties-container .properties-content {
flex: 1 1 auto;
overflow-y: auto;
}
.designer-component .component-label {
vertical-align: middle;
}
.designer-component .components-grid {
display: grid;
/* grid-template-columns: column 1 is for label, column 2 is for component.*/
grid-template-columns: max-content auto;
grid-template-rows: max-content;
grid-gap: 5px;
padding: 5px;
align-content: start;
box-sizing: border-box;
}
.designer-component .components-grid .full-row {
grid-area: span 1 / span 2;
}
.designer-component .monaco-table .slick-cell.editable {
padding: 0px;
border-width: 0px;
}
.designer-component .add-row-button-container {
display: flex;
flex-flow: row-reverse;
}
.designer-component .add-row-button-container .codicon.add-row-button {
width: fit-content;
background-repeat: no-repeat;
background-size: 13px;
padding-left: 17px;
background-position: 2px center;
}
.designer-component .top-content-container .components-grid {
padding-bottom: 10px;
}
.designer-component .content-container .tabbedPanel {
border-width: 0px;
}
.designer-component .components-grid .full-row.group-header {
font-weight: bold;
line-height: 25px;
}