@mixin sencha-layout { html, body { width: 100%; height: 100%; } .x-translatable { position: absolute !important; top: 100% !important; left: 100% !important; z-index: 1; } .x-translatable-container { position: relative; } .x-translatable-wrapper { width: 100%; height: 100%; position: absolute; overflow: hidden; } .x-translatable-stretcher { width: 300%; height: 300%; position: absolute; visibility: hidden; z-index: -1; } .x-translatable-nested-stretcher { width: 100%; height: 100%; left: 100%; top: 100%; position: absolute; visibility: hidden; z-index: -1; } .x-layout-fit, .x-layout-card { position: relative; overflow: hidden; } .x-layout-fit-item, .x-layout-card-item, .x-layout-card-container { position: absolute !important; width: 100%; height: 100%; left: 0; top: 0; } .x-layout-card-item { position: absolute !important; top: 0; right: 0; bottom: 0; left: 0; } .x-layout-hbox, .x-layout-vbox { display: -webkit-box; > * { -webkit-box-flex: 0; } } .x-layout-hbox { -webkit-box-orient: horizontal; } .x-layout-vbox { -webkit-box-orient: vertical; } .x-layout-hbox > .x-layout-box-item { width: 0 !important; } .x-layout-vbox > .x-layout-box-item { height: 0 !important; } .x-table-inner { display: table !important; width: 100%; height: 100%; } .x-table-inner.x-table-fixed { table-layout: fixed !important; } .x-table-row { display: table-row !important; } .x-table-row > * { display: table-cell !important; vertical-align: middle; } .x-container, .x-body { display: -webkit-box; } .x-body { overflow: hidden; -webkit-box-flex: 1; min-width: 100%; min-height: 100%; } .x-body > .x-inner, .x-container > .x-inner { -webkit-box-flex: 1; min-width: 100%; min-height: 100%; position: relative; } .x-docking-horizontal { display: -webkit-box; -webkit-box-flex: 1; -webkit-box-orient: horizontal; min-width: 100%; min-height: 100%; } .x-docking-vertical { display: -webkit-box; -webkit-box-flex: 1; -webkit-box-orient: vertical; min-width: 100%; min-height: 100%; } .x-centered { position: absolute !important; width: 100%; height: 100%; display: -webkit-box; -webkit-box-align: center; -webkit-box-pack: center; } .x-floating { position: absolute !important; } .x-centered > * { position: relative !important; -webkit-box-flex: 0 !important; } .x-size-change-detector { visibility: hidden; position: absolute; left: 0; top: 0; z-index: -1; width: 100%; height: 100%; overflow: hidden; } .x-size-change-detector > * { visibility: hidden; } .x-size-change-detector-shrink > * { width: 200%; height: 200%; } .x-size-change-detector-expand > * { width: 100000px; height: 100000px; } .x-scroll-view { position: relative; display: block; } .x-scroll-container { position: absolute; overflow: hidden; width: 100%; height: 100%; } .x-scroll-scroller { position: absolute; min-width: 100%; min-height: 100%; } .x-ios .x-scroll-scroller { -webkit-transform: translate3d(0, 0, 0); } .x-scroll-stretcher { position: absolute; visibility: hidden; } .x-scroll-bar-grid-wrapper { position: absolute; width: 100%; height: 100%; } .x-scroll-bar-grid { display: table; width: 100%; height: 100%; > * { display: table-row; } > * > * { display: table-cell; } > :first-child > :first-child { width: 100%; height: 100%; } > :first-child > :nth-child(2) { padding: 3px 3px 0 0; } > :nth-child(2) > :first-child { padding: 0 0 3px 3px; } } .x-scroll-bar { position: relative; overflow: hidden; } .x-scroll-bar-stretcher { position: absolute; visibility: hidden; width: 100%; height: 100%; } .x-scroll-bar-x { width: 100%; > .x-scroll-bar-stretcher { width: 300%; } &.active { height: 6px; } } .x-scroll-bar-y { height: 100%; > .x-scroll-bar-stretcher { height: 300%; } &.active { width: 6px; } } .x-scroll-indicator { background: #333; position: absolute; z-index: 2; opacity: 0.5; } .x-scroll-indicator.default { @include border-top-radius(3px); @include border-bottom-radius(3px); } .x-list-light, .x-dataview-light { .x-scroll-indicator { background: #fff; opacity: 1; } } .x-scroll-indicator-x { height: 100%; } .x-scroll-indicator-y { width: 100%; } .x-scroll-indicator.csstransform { background: none; /*-webkit-transition: opacity 0.2s ease-out;*/ > * { position: absolute; background-color: #333; } > :nth-child(2) { -webkit-transform-origin: 0% 0%; background: none; content: url(data:image/bmp;base64,Qk08AAAAAAAAADYAAAAoAAAAAQAAAAEAAAABABAAAAAAAAYAAAASCwAAEgsAAAAAAAAAAAAAxhgAAAAA); } &.x-scroll-indicator-light { > * { background-color: #eee; } > :nth-child(2) { content: url(data:image/bmp;base64,Qk08AAAAAAAAADYAAAAoAAAAAQAAAAEAAAABABAAAAAAAAYAAAASCwAAEgsAAAAAAAAAAAAAvXcAAAAA); } } &.x-scroll-indicator-y { > * { width: 100%; } > :first-child { height: 3px; @include border-top-radius(3px); } > :nth-child(2) { height: 1px; } > :last-child { height: 3px; @include border-bottom-radius(3px); } } &.x-scroll-indicator-x { > * { height: 100%; } > :first-child { width: 3px; @include border-left-radius(3px); } > :nth-child(2) { width: 1px; } > :last-child { width: 3px; @include border-right-radius(3px); } } } }