Alessandro De Blasis 53a61349e1
ui: Fix code editor resizing and restyle (#11474)
Fixes an issue where the code editor would not resizing to the full extent of the browser window plus CodeEditor restyling/refactoring

- :label named block
- :tools named block
- :content named block
- code and CSS cleanup
- CodeEditor.mdx

Signed-off-by: Alessandro De Blasis <alex@deblasis.net>

Co-authored-by: John Cowen <johncowen@users.noreply.github.com>
2021-11-12 15:28:06 +00:00

69 lines
1.1 KiB
SCSS

%code-editor {
display: block;
border: 10px;
overflow: hidden;
position: relative;
clear: both;
}
%code-editor::after {
position: absolute;
bottom: 0px;
width: 100%;
height: 25px;
background-color: var(--black);
content: '';
display: block;
}
%code-editor > pre {
display: none;
}
%code-editor {
.toolbar-container,
.toolbar-container .toolbar {
align-items: center;
justify-content: space-between;
display: flex;
}
.toolbar-container {
position: relative;
margin-top: 4px;
height: 44px;
.toolbar {
flex: 1;
white-space: nowrap;
.title {
padding: 0 8px;
}
.toolbar-separator {
height: 32px;
margin: 0 4px;
width: 0;
}
.tools {
display: flex;
flex-direction: row;
margin: 0 10px;
align-items: center;
.copy-button {
margin-left: 10px;
}
}
}
.ember-basic-dropdown-trigger {
margin: 0 8px;
width: 120px;
height: 32px;
display: flex;
align-items: center;
flex-direction: row;
}
}
}