fixes to support 'Remove symbols from the output bar'

cboard-org · Dec 15, 2021 · 9c89e45 · 9c89e45
1 parent 79c3373
commit 9c89e45
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/src/components/Board/Output/SymbolOutput/SymbolOutput.css b/src/components/Board/Output/SymbolOutput/SymbolOutput.css
@@ -21,7 +21,7 @@
 .LiveSymbolOutput__value {
   display: flex;
   height: 100%;
-  width: 130px;
+  width: 140px;
   padding: 3px 5px;
   align-self: flex-end;
   position: relative;
@@ -33,10 +33,16 @@
 
 .SymbolOutput__value__IconButton {
   position: absolute;
-  top: -10px;
+  --close-button-top: -10px;
+  top: var(--close-button-top);
   right: -10px;
 }
 
+.LiveSymbolOutput__value > .SymbolOutput__value__IconButton {
+  --close-button-top-live-difference: -5px;
+  top: calc(var(--close-button-top) - var(--close-button-top-live-difference));
+}
+
 .SymbolOutput__right__btns {
   display: flex;
   flex-direction: column;

diff --git a/src/components/Board/Symbol/Symbol.css b/src/components/Board/Symbol/Symbol.css
@@ -7,6 +7,11 @@
   overflow: hidden;
   background: none;
 }
+
+.LiveSymbolOutput__value > .Symbol {
+  padding: 0.2em 0.5em 0.2em 0.5em;
+}
+
 .Symbol textarea {
   align-self: flex-start;
   font-weight: 700;