diff options
Diffstat (limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu.scss')
| -rw-r--r-- | src/client/views/nodes/DataVizBox/DocCreatorMenu.scss | 214 |
1 files changed, 133 insertions, 81 deletions
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss index 0fc85ba5d..d18f75545 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss @@ -68,6 +68,13 @@ height: 0; width: 50px; } + + &.preview-toggle { + margin: 0px; + border-top-left-radius: 0px; + border-bottom-left-radius: 0px; + border-left: 0px; + } } .docCreatorMenu-top-buttons-container { @@ -168,16 +175,44 @@ height: 25px; } +.docCreatorMenu-general-options-container { + display: flex; + justify-content: center; + align-items: center; + margin: 0px; + padding: 0px; + gap: 5px; +} + +.docCreatorMenu-save-layout-button { + display: flex; + justify-content: center; + align-items: center; + width: 40px; + height: 40px; + background-color: rgb(99, 148, 238); + border: 2px solid rgb(80, 107, 152); + border-radius: 5px; + margin-bottom: 20px; + font-size: 25px; + + &:hover{ + background-color: rgb(59, 128, 255); + border: 2px solid rgb(53, 80, 127); + } +} + .docCreatorMenu-create-docs-button { - width: 80px; + width: 40px; height: 40px; background-color: rgb(176, 229, 149); - border-radius: 5px; border: 2px solid rgb(126, 219, 80); + border-radius: 5px; padding: 0px; - font-size: 16px; - color: black; + font-size: 25px; + color: white; flex: 0 0 auto; + margin-bottom: 20px; //remove later !!! &:hover { background-color: rgb(129, 223, 83); @@ -185,6 +220,13 @@ } } +.docCreatorMenu-option-divider { + border-top: 1px solid rgb(180, 180, 180); + width: 225px; + margin-top: 10px; + margin-bottom: 10px; +} + //------------------------------------------------------------------------------------------------------------------------------------------ //DocCreatorMenu templates preview CSS //-------------------------------------------------------------------------------------------------------------------------------------------- @@ -202,29 +244,32 @@ height: calc(100% - 30px); border: 1px solid rgb(180, 180, 180); border-radius: 5px; +} - .docCreatorMenu-preview-window { - display: flex; - justify-content: center; - align-items: center; - width: 125px; - height: 125px; - margin-top: 10px; - margin-left: 10px; - border: 1px solid rgb(163, 163, 163); - border-radius: 5px; - box-shadow: 5px 5px rgb(29, 29, 31); +.docCreatorMenu-preview-window { + display: flex; + justify-content: center; + align-items: center; + width: 125px; + height: 125px; + margin-top: 10px; + margin-left: 10px; + border: 1px solid rgb(163, 163, 163); + border-radius: 5px; + box-shadow: 5px 5px rgb(29, 29, 31); - &:hover{ - background-color: rgb(72, 72, 73); - } + &:hover{ + background-color: rgb(72, 72, 73); + } - .docCreatorMenu-preview-image{ - width: 105px; - height: 105px; - border-radius: 5px; - } + .docCreatorMenu-preview-image{ + width: 105px; + height: 105px; + border-radius: 5px; + } + &.empty { + font-size: 35px; } } @@ -254,6 +299,8 @@ background: whitesmoke; background-color: rgb(34, 34, 37); border-radius: 5px; + border-top-right-radius: 0px; + border-bottom-right-radius: 0px; border: 1px solid rgb(180, 180, 180); padding: 0px; font-size: 12px; @@ -412,75 +459,80 @@ } } +} - .docCreatorMenu-layout-preview-window-wrapper { - display: flex; - justify-content: center; - align-items: center; - width: 85%; - height: auto; - position: relative; - padding: 0px; +.docCreatorMenu-layout-preview-window-wrapper { + display: flex; + justify-content: center; + align-items: center; + width: 85%; + height: auto; + position: relative; + padding: 0px; - &:hover .docCreatorMenu-zoom-button-container { - display: block; - } + &:hover .docCreatorMenu-zoom-button-container { + display: block; + } - .docCreatorMenu-layout-preview-window { - padding: 5px; - flex: 0 0 auto; - overflow: scroll; - display: grid; - width: auto; - height: auto; - max-width: 240; - max-height: 240; - border: 1px solid rgb(180, 180, 180); - border-radius: 5px; - background-color: rgb(34, 34, 37); - -ms-overflow-style: none; - scrollbar-width: none; - - .docCreatorMenu-layout-preview-item { - display: flex; - justify-content: center; - align-items: center; - border-radius: 3px; - border: solid 1px lightblue; - - &:hover { - border: solid 2px rgb(68, 153, 233); - z-index: 2; - } - } + .docCreatorMenu-layout-preview-window { + padding: 5px; + flex: 0 0 auto; + overflow: scroll; + display: grid; + width: auto; + height: auto; + max-width: 240; + max-height: 240; + border: 1px solid rgb(180, 180, 180); + border-radius: 5px; + background-color: rgb(34, 34, 37); + -ms-overflow-style: none; + scrollbar-width: none; + + &.small { + max-width: 100; + max-height: 100; } - .docCreatorMenu-zoom-button-container { - position: absolute; - top: 0px; + .docCreatorMenu-layout-preview-item { display: flex; justify-content: center; align-items: center; - display: none; - z-index: 999; - } - - .docCreatorMenu-zoom-button{ - width: 15px; - height: 15px; - background: whitesmoke; - background-color: rgb(34, 34, 37); border-radius: 3px; - border: 1px solid rgb(180, 180, 180); - padding: 0px; - font-size: 10px; - z-index: 6; - margin-left: 0px; - margin-top: 0px; - margin-right: 0px; //225px - margin-bottom: 0px; + border: solid 1px lightblue; + + &:hover { + border: solid 2px rgb(68, 153, 233); + z-index: 2; + } } } + + .docCreatorMenu-zoom-button-container { + position: absolute; + top: 0px; + display: flex; + justify-content: center; + align-items: center; + display: none; + z-index: 999; + } + + .docCreatorMenu-zoom-button{ + width: 15px; + height: 15px; + background: whitesmoke; + background-color: rgb(34, 34, 37); + border-radius: 3px; + border: 1px solid rgb(180, 180, 180); + padding: 0px; + font-size: 10px; + z-index: 6; + margin-left: 0px; + margin-top: 0px; + margin-right: 0px; //225px + margin-bottom: 0px; + } } |