devextreme/dist/layouts/Desktop/DesktopLayout.css

HTML5 JavaScript Component Suite for Responsive Web Development

.desktop-layout {
    width: 100%;
    height: 100%;
}

.desktop-layout .wrapper {
    margin: 0 auto;
    max-width: 800px;
}

.desktop-layout .page {
    width: 100%;
    min-height: 100%;
    position: relative;
}

.desktop-layout header {
    height: 60px;
}

.desktop-layout header .logo {
    height: 60px;
    width: 104px;
    background: url(../../images/logo.png) no-repeat;
}

.dx-theme-generic.dx-color-scheme-dark .desktop-layout header .logo {
    background-position: -104px 0;
}

.dx-theme-generic.dx-color-scheme-light .desktop-layout header .logo {
    background-position: 0 0;
}

.desktop-layout .main-menu {
    width: 100%;
}

.desktop-layout .toolbar {
    box-sizing: border-box;
    height: 56px;
    margin-bottom: 35px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

.desktop-layout .toolbar .dx-content {
    width: 100%;
}

.desktop-layout #navBar .dx-icon {
    display: none;
}

.desktop-layout #navBar .dx-tab {
    padding: 9px 30px 11px;
}

.desktop-layout #navBar .dx-nav-item {
    height: 40px;
}

 .desktop-layout #navBar .dx-nav-item.dx-state-focused {
    box-shadow: none;
}

.desktop-layout #tabs {
    width: 100%;
    text-align: center;
}

.desktop-layout #tabs .dx-tab {
    padding: 5px 30px;
}

.desktop-layout .half-content {
    float: left;
    width: 45%;
    margin: 0;
    padding: 0;
}

.desktop-layout .half-content:first-child {
    padding: 0 10% 0 0;
}

.desktop-layout .footer-gap {
    height: 40px;
}

.desktop-layout footer {
    position: absolute;
    width: 100%;
    bottom: 20px;
}

.desktop-layout .dx-field {
    position: static;
}

.desktop-layout .dx-toolbar {
    padding: 10px 0;
    box-sizing: border-box;
    box-shadow: none;
    background-color: transparent;
}

.desktop-layout .dx-toolbar .dx-toolbar-before .dx-toolbar-item:first-child {
    margin: 0;
}

.desktop-layout .dx-toolbar .dx-toolbar-after .dx-toolbar-item {
    margin: 0 0 0 8px;
}

.desktop-layout .dx-popup-title.dx-toolbar .dx-toolbar-label {
    padding: 0 5px 0 0;
}

.desktop-layout .dx-content.dx-animating.dx-leave,
.desktop-layout .dx-content.dx-animating.dx-enter {
  position: absolute;
  top: 0;
  left: 0;
}