div.side_panel { position: absolute; /*top: 2em;*/ left: -3em; height: 100%; max-width: 40em; z-index: 100; background-color: #00FF00; } div.side_panel.expanded { width: calc(20% + 3em); } div.side_panel.collapsed { width: 3em; } div.side_panel .menu_bar { position: absolute; background-color: #ececec; width: 3em; height: 100%; } div.hor_panel { position: absolute; /*top: 2em;*/ bottom: -2em; /*height: calc(100% - 3em);*/ width: 100%; max-height: 40em; z-index: 100; background-color: #00FF00; } div.hor_panel.expanded { height: calc(20% + 2em); } div.hor_panel.collapsed { height: 2em; } div.hor_panel .menu_bar { position: absolute; background-color: #ececec; width: 100%; height: 2em; } div.side_panel .menu_bar button { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 48px; height: 48px; background-color: transparent; margin-bottom: 8px; border: 2px solid transparent; outline: none; cursor: pointer; } div.hor_panel .menu_bar button { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; float: left; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; /*width: 48px;*/ height: 100%; background-color: transparent; margin: 0px; border: 0px solid transparent; outline: none; cursor: pointer; } div.side_panel .menu_bar button:hover, div.hor_panel .menu_bar button:hover { background-color: #cecece; } div.side_panel .content, div.hor_panel .content { position: absolute; background-color: #e5e5e5; width: calc(100% - 3em); height: 100%; left: 3em; overflow: auto; } div.side_panel.collapsed .content, div.hor_panel.collapsed .content { visibility: hidden; } div.window .window-caption { background-color: #e5e5e5; } div.active .window-caption { background-color: #3c6478; } /* .e-scrollable-menu is dropdown menu defined in TopBarModel.tsx * Style of dropdown is defined here, because dropdown is allways created in document * It was not possible to style this elements from local _styles.scss file */ .e-scrollable-menu.e-menu-wrapper ul.e-ul { background-color: #003787; } .e-scrollable-menu.e-menu-wrapper .e-ul .e-menu-item .e-menu-url { color: white; } .e-scrollable-menu.e-menu-wrapper .e-ul .e-menu-item.e-focused { background-color: #404040; }