|
|
|
|
.slideout-layout {
|
|
|
|
|
height: 100%;
|
|
|
|
|
width: 100%;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.slideout-layout .layout-header {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 100%;
|
|
|
|
|
top: 0;
|
|
|
|
|
height: 40px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.slideout-layout .layout-content {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 40px;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.slideout-layout .layout-content > div[data-options] {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.slideout-layout .view-content {
|
|
|
|
|
position: absolute;
|
|
|
|
|
height: 100%;
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.slideout-layout .layout-frame {
|
|
|
|
|
position: absolute;
|
|
|
|
|
height: 100%;
|
|
|
|
|
width: 100%;
|
|
|
|
|
z-index: 200;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.slideout-layout .layout-frame,
|
|
|
|
|
.slideout-layout .layout-frame .layout-header,
|
|
|
|
|
.slideout-layout .layout-frame .layout-header .dx-toolbar {
|
|
|
|
|
border-radius: 4px 4px 0 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* navigation */
|
|
|
|
|
.slideout-layout .navigation-list {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
z-index: 100;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.slideout-layout .nav-partial-view {
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.slideout-layout .navigation-list .dx-list .dx-list-item .dx-navigation-item {
|
|
|
|
|
line-height: 24px;
|
|
|
|
|
height: 24px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.slideout-layout .navigation-list .dx-list .dx-list-item .dx-icon {
|
|
|
|
|
float: left;
|
|
|
|
|
margin-right: 15px;
|
|
|
|
|
-moz-background-size: 100%;
|
|
|
|
|
-o-background-size: 100%;
|
|
|
|
|
-webkit-background-size: 100%;
|
|
|
|
|
background-size: 100%;
|
|
|
|
|
width: 24px;
|
|
|
|
|
height: 24px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* iOS */
|
|
|
|
|
.slideout-layout .view-footer {
|
|
|
|
|
position: static;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* iOS 6 */
|
|
|
|
|
.dx-theme-ios.dx-version-major-5 .slideout-layout .navigation-list .dx-list,
|
|
|
|
|
.dx-theme-ios.dx-version-major-6 .slideout-layout .navigation-list .dx-list {
|
|
|
|
|
background: none;
|
|
|
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
|
|
|
|
min-height: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dx-theme-ios.dx-version-major-5 .slideout-layout .navigation-list .dx-list .dx-list-item,
|
|
|
|
|
.dx-theme-ios.dx-version-major-6 .slideout-layout .navigation-list .dx-list .dx-list-item {
|
|
|
|
|
border-top: 1px solid rgba(255, 255, 255, 0.2);
|
|
|
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.35);
|
|
|
|
|
color: #E8EEF4;
|
|
|
|
|
text-shadow: 0 1px rgba(48, 48, 48, .6);
|
|
|
|
|
font-size: 14pt;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dx-theme-ios.dx-version-major-5 .slideout-layout .navigation-list .dx-list .dx-list-item.dx-state-disabled,
|
|
|
|
|
.dx-theme-ios.dx-version-major-6 .slideout-layout .navigation-list .dx-list .dx-list-item.dx-state-disabled {
|
|
|
|
|
opacity:0.6;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dx-theme-ios.dx-version-major-5 .slideout-layout .view-toolbar-bottom.dx-toolbar,
|
|
|
|
|
.dx-theme-ios.dx-version-major-6 .slideout-layout .view-toolbar-bottom.dx-toolbar {
|
|
|
|
|
background: transparent;
|
|
|
|
|
border: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dx-theme-ios.dx-version-major-5 .slideout-layout .view-toolbar-bottom,
|
|
|
|
|
.dx-theme-ios.dx-version-major-6 .slideout-layout .view-toolbar-bottom {
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dx-theme-ios.dx-version-major-5 .slideout-layout .view-toolbar-bottom.dx-toolbar .dx-toolbar-left,
|
|
|
|
|
.dx-theme-ios.dx-version-major-6 .slideout-layout .view-toolbar-bottom.dx-toolbar .dx-toolbar-left {
|
|
|
|
|
right: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dx-theme-ios.dx-version-major-5 .slideout-layout .view-toolbar-bottom.dx-toolbar .dx-toolbar-left .dx-button,
|
|
|
|
|
.dx-theme-ios.dx-version-major-6 .slideout-layout .view-toolbar-bottom.dx-toolbar .dx-toolbar-left .dx-button {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 10px;
|
|
|
|
|
right: 10px;
|
|
|
|
|
}
|
|
|
|
|
.dx-theme-ios.dx-version-major-5 .slideout-layout .layout-header,
|
|
|
|
|
.dx-theme-ios.dx-version-major-6 .slideout-layout .layout-header {
|
|
|
|
|
height: 43px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dx-theme-ios.dx-version-major-5 .slideout-layout .layout-content,
|
|
|
|
|
.dx-theme-ios.dx-version-major-6 .slideout-layout .layout-content {
|
|
|
|
|
top: 43px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dx-theme-ios.dx-version-major-5 .slideout-layout .view-footer .dx-toolbar,
|
|
|
|
|
.dx-theme-ios.dx-version-major-6 .slideout-layout .view-footer .dx-toolbar {
|
|
|
|
|
height: 57px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dx-theme-ios.dx-version-major-5 .slideout-layout .view-footer .dx-toolbar-center,
|
|
|
|
|
.dx-theme-ios.dx-version-major-6 .slideout-layout .view-footer .dx-toolbar-center {
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dx-theme-ios.dx-version-major-5 .slideout-layout .view-footer .dx-button,
|
|
|
|
|
.dx-theme-ios.dx-version-major-6 .slideout-layout .view-footer .dx-button {
|
|
|
|
|
width: 97%;
|
|
|
|
|
overflow: visible;
|
|
|
|
|
height: 40px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dx-theme-ios.dx-version-major-5 .slideout-layout .view-footer .dx-button .dx-button-content,
|
|
|
|
|
.dx-theme-ios.dx-version-major-6 .slideout-layout .view-footer .dx-button .dx-button-content {
|
|
|
|
|
height: 44px;
|
|
|
|
|
border-radius: 6px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dx-theme-ios.dx-version-major-5 .slideout-layout .view-footer .dx-button .dx-button-content .dx-button-text,
|
|
|
|
|
.dx-theme-ios.dx-version-major-6 .slideout-layout .view-footer .dx-button .dx-button-content .dx-button-text {
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
line-height: 38px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* iOS7 */
|
|
|
|
|
.dx-theme-ios.dx-version-major-7 .slideout-layout .navigation-list .dx-list {
|
|
|
|
|
background: none;
|
|
|
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
|
|
|
|
min-height: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dx-theme-ios.dx-version-major-7 .slideout-layout .navigation-list .dx-list .dx-list-item {
|
|
|
|
|
color: #000;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dx-theme-ios.dx-version-major-7 .slideout-layout .navigation-list .dx-list .dx-list-item:after {
|
|
|
|
|
left: 49px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dx-theme-ios.dx-version-major-7 .slideout-layout .navigation-list .dx-list .dx-list-item:before {
|
|
|
|
|
content: ' ';
|
|
|
|
|
display: block;
|
|
|
|
|
width: 8px;
|
|
|
|
|
height: 8px;
|
|
|
|
|
border-top: 2px solid #cbcbcb;
|
|
|
|
|
border-right: 2px solid #cbcbcb;
|
|
|
|
|
-moz-transform: rotate(45deg);
|
|
|
|
|
-ms-transform: rotate(45deg);
|
|
|
|
|
-o-transform: rotate(45deg);
|
|
|
|
|
-webkit-transform: rotate(45deg);
|
|
|
|
|
transform: rotate(45deg);
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 20px;
|
|
|
|
|
top: 50%;
|
|
|
|
|
margin-top: -6px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dx-theme-ios.dx-version-major-7 .slideout-layout .navigation-list .dx-list .dx-list-item .dx-icon {
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dx-theme-ios.dx-version-major-7 .slideout-layout .navigation-list .dx-list .dx-list-item.dx-state-active {
|
|
|
|
|
background: rgba(1,122,255,.2);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dx-theme-ios.dx-version-major-7 .slideout-layout .navigation-list .dx-list .dx-list-item.dx-state-disabled {
|
|
|
|
|
opacity:0.6;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dx-theme-ios.dx-version-major-7 .slideout-layout .view-toolbar-bottom.dx-toolbar {
|
|
|
|
|
background: transparent;
|
|
|
|
|
border: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dx-theme-ios.dx-version-major-7 .slideout-layout .view-toolbar-bottom {
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dx-theme-ios.dx-version-major-7 .slideout-layout .view-toolbar-bottom.dx-toolbar .dx-toolbar-left {
|
|
|
|
|
right: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dx-theme-ios.dx-version-major-7 .slideout-layout .view-toolbar-bottom.dx-toolbar .dx-toolbar-left .dx-button {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 10px;
|
|
|
|
|
right: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dx-theme-ios.dx-version-major-7 .slideout-layout .layout-header.dx-toolbar {
|
|
|
|
|
background: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dx-theme-ios.dx-version-major-7 .slideout-layout .layout-header {
|
|
|
|
|
height: 43px;
|
|
|
|
|
}
|
|
|
|
|
.dx-theme-ios.dx-version-major-7 .slideout-layout .layout-content {
|
|
|
|
|
top: 44px;
|
|
|
|
|
background-color: #EFEFF4;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dx-theme-ios.dx-version-major-7 .slideout-layout .view-footer .dx-toolbar {
|
|
|
|
|
height: 57px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dx-theme-ios.dx-version-major-7 .slideout-layout .view-footer .dx-toolbar-center {
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dx-theme-ios.dx-version-major-7 .slideout-layout .view-footer .dx-button {
|
|
|
|
|
width: 97%;
|
|
|
|
|
overflow: visible;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dx-theme-ios.dx-version-major-7 .slideout-layout .view-footer .dx-button .dx-button-content{
|
|
|
|
|
height: 44px;
|
|
|
|
|
border-radius: 6px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dx-theme-ios.dx-version-major-7 .slideout-layout .view-footer .dx-button .dx-button-content .dx-button-text {
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
line-height: 38px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Android */
|
|
|
|
|
.dx-theme-android .slideout-layout .layout-content.has-toolbar-bottom {
|
|
|
|
|
bottom: 43px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dx-theme-android .slideout-layout .dx-toolbar.layout-toolbar-bottom {
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dx-theme-android .slideout-layout .layout-content {
|
|
|
|
|
top: 42px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dx-theme-android .slideout-layout .layout-header .dx-toolbar {
|
|
|
|
|
height: 40px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Windows phone 8 */
|
|
|
|
|
.dx-theme-win8.dx-color-scheme-white .slideout-layout .layout-content {
|
|
|
|
|
background: #fff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dx-theme-win8.dx-color-scheme-black .slideout-layout .layout-content {
|
|
|
|
|
background: #000;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dx-theme-win8 .slideout-layout .layout-header {
|
|
|
|
|
height: 60px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dx-theme-win8 .slideout-layout .layout-content {
|
|
|
|
|
top: 60px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dx-theme-win8 .slideout-layout .layout-content.has-toolbar-bottom {
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
bottom: 40px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dx-theme-win8 .slideout-layout .dx-toolbar.layout-toolbar-bottom {
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dx-theme-win8.dx-device-phone.dx-color-scheme-white .slideout-layout .dx-toolbar {
|
|
|
|
|
background: #fff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dx-theme-win8.dx-device-phone.dx-color-scheme-black .slideout-layout .dx-toolbar {
|
|
|
|
|
background: #000;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dx-theme-win8 .slideout-layout .layout-header .dx-toolbar {
|
|
|
|
|
height: 60px;
|
|
|
|
|
opacity: 1;
|
|
|
|
|
}
|
|
|
|
|
.dx-theme-win8.dx-color-scheme-white .slideout-layout .layout-header .dx-toolbar {
|
|
|
|
|
background: #fff;
|
|
|
|
|
}
|
|
|
|
|
.dx-theme-win8.dx-color-scheme-black .slideout-layout .layout-header .dx-toolbar {
|
|
|
|
|
background: #000;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dx-theme-tizen .slideout-layout .layout-frame,
|
|
|
|
|
.dx-theme-tizen .slideout-layout .layout-frame .layout-header,
|
|
|
|
|
.dx-theme-tizen .slideout-layout .layout-frame .layout-header .dx-toolbar {
|
|
|
|
|
border-radius: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* generic theme */
|
|
|
|
|
.dx-theme-generic .slideout-layout .layout-header {
|
|
|
|
|
height: 46px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dx-theme-generic .slideout-layout .layout-content {
|
|
|
|
|
top: 47px;
|
|
|
|
|
}
|