diff options
Diffstat (limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu.scss')
| -rw-r--r-- | src/client/views/nodes/DataVizBox/DocCreatorMenu.scss | 166 |
1 files changed, 110 insertions, 56 deletions
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss index 4944f3071..243954873 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss @@ -46,6 +46,11 @@ margin-bottom: 0px; } +//------------------------------------------------------------------------------------------------------------------------------------------ +//DocCreatorMenu templates preview CSS +//-------------------------------------------------------------------------------------------------------------------------------------------- + + .docCreatorMenu-preview-container { display: grid; grid-template-columns: repeat(2, 1fr); @@ -83,7 +88,66 @@ } } -.docCreatorMenu-options-container { +//------------------------------------------------------------------------------------------------------------------------------------------ +//DocCreatorMenu options CSS +//-------------------------------------------------------------------------------------------------------------------------------------------- + +.docCreatorMenu-option-container{ + display: flex; + width: 180px; + height: 30px; + flex-direction: row; + justify-content: center; + align-items: center; + margin-top: 10px; + + &.layout{ + z-index: 5; + } +} + +.docCreatorMenu-option-title{ + display: flex; + width: 140px; + height: 30px; + background: whitesmoke; + background-color: rgb(34, 34, 37); + border-radius: 5px; + border: 1px solid whitesmoke; + padding: 0px; + font-size: 12px; + align-items: center; + justify-content: center; + text-transform: uppercase; + cursor: pointer; + + &.repeat { + border-top-right-radius: 0px; + border-bottom-right-radius: 0px; + width: 60px; + border-right: 0px; + } +} + +.docCreatorMenu-input { + display: flex; + height: 30px; + background-color: rgb(34, 34, 37); + border-radius: 5px; + border: 1px solid whitesmoke; + align-items: center; + justify-content: center; + + &.repeat { + margin: 0px; + border-top-left-radius: 0px; + border-bottom-left-radius: 0px; + border-left: 0px; + width: 40px; + } +} + +.docCreatorMenu-menu-container { display: flex; flex-direction: column; justify-content: flex-start; @@ -95,73 +159,63 @@ border: 1px solid whitesmoke; border-radius: 5px; - .docCreatorMenu-dropdown-hoverable { - width: 140px; - height: 25px; - margin-bottom: 17px; - z-index: 5; - - &:hover .docCreatorMenu-dropdown-content { - display: block; - } + .docCreatorMenu-option-container{ + width: 180px; + height: 30px; - &:hover .docCreatorMenu-dropdown-title { - border-bottom-left-radius: 0px; - border-bottom-right-radius: 0px; - } - - .docCreatorMenu-dropdown-title{ - display: flex; + .docCreatorMenu-dropdown-hoverable { width: 140px; - height: 25px; - background: whitesmoke; - background-color: rgb(34, 34, 37); - border-radius: 5px; - border: 1px solid whitesmoke; - padding: 0px; - font-size: 12px; - margin-top: 10px; - align-items: center; - justify-content: center; - text-transform: uppercase; - cursor: pointer; - } + height: 30px; - .docCreatorMenu-dropdown-content { - display: none; - min-width: 100px; - height: 75px; - overflow-y: scroll; - -ms-overflow-style: none; - scrollbar-width: none; - border-bottom: solid 1px whitesmoke; + &:hover .docCreatorMenu-dropdown-content { + display: block; + } - .docCreatorMenu-dropdown-option{ - display: flex; - background-color: rgb(42, 42, 46); - border-left: 1px solid whitesmoke; - border-right: 1px solid whitesmoke; - border-bottom: 1px solid whitesmoke; - width: 140px; - height: 25px; - justify-content: center; - justify-items: center; - padding-top: 3px; - - &:hover { - background-color: rgb(68, 68, 74); - cursor: pointer; - } + &:hover .docCreatorMenu-option-title { + border-bottom-left-radius: 0px; + border-bottom-right-radius: 0px; } - } + + .docCreatorMenu-dropdown-content { + display: none; + min-width: 100px; + height: 75px; + overflow-y: scroll; + -ms-overflow-style: none; + scrollbar-width: none; + border-bottom: solid 1px whitesmoke; + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; + + .docCreatorMenu-dropdown-option{ + display: flex; + background-color: rgb(42, 42, 46); + border-left: 1px solid whitesmoke; + border-right: 1px solid whitesmoke; + border-bottom: 1px solid whitesmoke; + width: 140px; + height: 25px; + justify-content: center; + justify-items: center; + padding-top: 3px; + + &:hover { + background-color: rgb(68, 68, 74); + cursor: pointer; + } + } + } + } + } .docCreatorMenu-layout-preview-window { + aspect-ratio: 1 / 1; width: 85%; - height: 100px; border: 1px solid whitesmoke; border-radius: 5px; background-color: rgb(34, 34, 37); + margin-top: 10px; } } |