diff options
Diffstat (limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu.scss')
| -rw-r--r-- | src/client/views/nodes/DataVizBox/DocCreatorMenu.scss | 269 |
1 files changed, 179 insertions, 90 deletions
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss index 857d76d4f..955698b19 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss @@ -292,6 +292,19 @@ position: relative; width: 100%; height: 100%; + + .right-buttons-panel { + display: flex; + flex-direction: column; + justify-content: flex-start; + height: 100%; + width: 40px; + position: absolute; + right: 0px; + top: 0px; + padding: 5px; + gap: 2px; + } } .docCreatorMenu-preview-window { @@ -435,12 +448,6 @@ &.float-right { float: right; } - - &.top-right { - position: absolute; - top: 3px; - right: 3px; - } } .docCreatorMenu-section-title { @@ -754,7 +761,7 @@ display: flex; flex-direction: column; justify-content: flex-start; - overflow-y: scroll; + overflow-y: hidden; //align-items: flex-start; margin: 5px; margin-top: 0px; @@ -765,111 +772,193 @@ -ms-overflow-style: none; scrollbar-width: none; + .panels-container { + height: 100%; + width: 100%; + flex-direction: column; + justify-content: flex-start; + overflow-y: scroll; + } + .topbar { height: 30px; width: 100%; - } + background-color: rgb(50, 50, 50); + } + +// .field-panel { +// position: relative; +// display: flex; +// // align-items: flex-start; +// flex-direction: column; +// gap: 5px; +// padding: 5px; +// height: 100px; +// //width: 100%; +// border: 1px solid rgb(180, 180, 180); +// margin: 5px; +// margin-top: 0px; +// border-radius: 3px; +// flex: 0 0 auto; + +// .properties-wrapper { +// display: flex; +// flex-direction: row; +// align-items: flex-start; +// gap: 5px; + +// .field-property-container { +// background-color: rgb(40, 40, 40); +// border: 1px solid rgb(100, 100, 100); +// border-radius: 3px; +// width: 30%; +// height: 25px; +// padding-left: 3px; +// align-items: center; +// color: whitesmoke; +// } + +// .field-type-selection-container { +// display: flex; +// flex-direction: row; +// align-items: center; +// background-color: rgb(40, 40, 40); +// border: 1px solid rgb(100, 100, 100); +// border-radius: 3px; +// width: 31%; +// height: 25px; +// padding-left: 3px; +// color: whitesmoke; + +// .placeholder { +// color: gray; +// } + +// &:hover .placeholder { +// display: none; +// } + +// .bubbles { +// display: none; +// } + +// .text { +// margin-top: 5px; +// margin-bottom: 5px; +// } + +// &:hover .bubbles { +// display: flex; +// flex-direction: row; +// align-items: flex-start; +// } + +// &:hover .type-display { +// display: none; +// } + +// .bubble { +// margin: 5px; +// } + +// &:hover .bubble { +// margin-top: 7px; +// } +// } +// } + +// .field-description-container { +// background-color: rgb(40, 40, 40); +// border: 1px solid rgb(100, 100, 100); +// border-radius: 3px; +// width: 100%; +// height: 100%; +// resize: none; + +// ::-webkit-scrollbar-track { +// background: none; +// } +// } + +// .top-right { +// position: absolute; +// top: 0px; +// right: 0px; +// } +// } +// } .field-panel { - position: relative; display: flex; - // align-items: flex-start; flex-direction: column; - gap: 5px; - padding: 5px; - height: 100px; - //width: 100%; + align-items: center; + justify-content: flex-start; + height: 285px; + width: calc(100% - 10px); border: 1px solid rgb(180, 180, 180); margin: 5px; margin-top: 0px; border-radius: 3px; flex: 0 0 auto; + gap: 25px; + background-color: rgb(60, 60, 60); - .properties-wrapper { + .top-bar { display: flex; flex-direction: row; - align-items: flex-start; - gap: 5px; - - .field-property-container { - background-color: rgb(40, 40, 40); - border: 1px solid rgb(100, 100, 100); - border-radius: 3px; - width: 30%; - height: 25px; - padding-left: 3px; - align-items: center; - color: whitesmoke; - } - - .field-type-selection-container { - display: flex; - flex-direction: row; - align-items: center; - background-color: rgb(40, 40, 40); - border: 1px solid rgb(100, 100, 100); - border-radius: 3px; - width: 31%; - height: 25px; - padding-left: 3px; - color: whitesmoke; - - .placeholder { - color: gray; - } - - &:hover .placeholder { - display: none; - } - - .bubbles { - display: none; - } - - .text { - margin-top: 5px; - margin-bottom: 5px; - } - - &:hover .bubbles { - display: flex; - flex-direction: row; - align-items: flex-start; - } - - &:hover .type-display { - display: none; - } + align-items: center; + justify-content: center; + border-bottom: 1px solid rgb(180, 180, 180); + border-top-right-radius: 5px; + border-top-left-radius: 5px; + width: 100%; + height: 20px; + background-color: rgb(50, 50, 50); + } + + .opts-bar { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + width: 100%; - .bubble { - margin: 5px; - } + .opt-box { + border: 1px solid rgb(180, 180, 180); + border-radius: 5px; + width: 40%; + height: 50px; + margin-right: 4%; + margin-left: 4%; + box-shadow: 5px 5px rgb(29, 29, 31); + } - &:hover .bubble { - margin-top: 7px; - } + .content { + height: calc(100% - 20px); + width: 100%; + background-color: rgb(50, 50, 50); + border-bottom-right-radius: 5px; + border-bottom-left-radius: 5px; } } - .field-description-container { - background-color: rgb(40, 40, 40); - border: 1px solid rgb(100, 100, 100); - border-radius: 3px; - width: 100%; - height: 100%; - resize: none; - - ::-webkit-scrollbar-track { - background: none; - } + .sizes-box { + width: 88%; + height: 60px; + border: 1px solid rgb(180, 180, 180); + border-radius: 5px; + background-color: rgb(50, 50, 50); + box-shadow: 5px 5px rgb(29, 29, 31); } - .top-right { - position: absolute; - top: 0px; - right: 0px; + .desc-box { + width: 88%; + height: 50px; + border: 1px solid rgb(180, 180, 180); + border-radius: 5px; + background-color: rgb(50, 50, 50); + box-shadow: 5px 5px rgb(29, 29, 31); } } -} - +} |