@mixin absolute-position($top: 0, $right: 0, $bottom: 0, $left: 0){ position: absolute; top: $top; right: $right; bottom: $bottom; left: $left; } @mixin absolute-fit { width: auto; height: auto; //overflow: hidden; @include absolute-position; } @mixin box(){ display: -webkit-box; } @mixin box-align($align: stretch){ -webkit-box-align: $align; } @mixin box-orient($orient: horizontal){ -webkit-box-orient: $orient; } @mixin box-orient-important($orient: horizontal){ -webkit-box-orient: $orient !important; } @mixin box-pack($pack: start){ -webkit-box-pack: $pack; } @mixin box-flex($flex: 1){ -webkit-box-flex: $flex; } @mixin sencha-layout { html, body { width: 100%; height: 100%; } @-webkit-keyframes x-paint-monitor-helper { from { zoom: 1 } to { zoom: 1 } } .x-paint-monitored { position: relative; } .x-paint-monitor { width: 0 !important; height: 0 !important; visibility: hidden; &.cssanimation { -webkit-animation-duration: 0.0001ms; -webkit-animation-name: x-paint-monitor-helper; } &.overflowchange { overflow: hidden; &::after { content: ""; display: block; width: 1px !important; height: 1px !important; } } } .x-size-monitored { position:relative; } .x-size-monitors { position:absolute; left: 0; top: 0; width: 100%; height: 100%; visibility: hidden; z-index: -9999; overflow: hidden; > * { width: 100%; height: 100%; overflow: hidden; } &.scroll > * { &.shrink::after { content: ""; display: block; width: 200%; height: 200%; min-width: 1px; min-height: 1px; } &.expand::after { content: ""; display: block; width: 100000px; height: 100000px; } } &.overflowchanged > * { &.shrink { > * { width: 100%; height: 100%; } } &.expand { > * { width: 200%; height: 200%; } } } } //.x-container, .x-component, .x-body, .x-inner { // position: relative; // overflow: hidden; //} .x-body { position: relative; z-index: 0; } .x-inner, .x-body { width: 100%; height: 100%; } .x-dock, .x-dock-body { height: 100%; } .x-sized { position: relative; } .x-stretched.x-container { @include box; @include box-orient(vertical); > .x-inner, > .x-body, > .x-body > .x-inner { @include box(); @include box-flex(1); @include box-orient(vertical); } } .x-innerhtml { width: 100%; } .x-layout-card { position: relative; overflow: hidden; } .x-layout-card-item-container { @include absolute-fit; } .x-layout-card-item { @include absolute-position; } .x-layout-newcard-item, .x-layout-newcard-item > * { @include absolute-position; } .x-layout-newcard-item:not(.active) { display: none; } .x-layout-fit.x-stretched > .x-layout-fit-item { @include box(); @include box-flex(1); } .x-layout-fit { position: relative; } .x-layout-fit-item { &.x-sized { @include absolute-position; } &.x-unsized { width: 100%; height: 100%; } } .x-center, .x-centered { @include absolute-position; @include box; @include box-align(center); @include box-pack(center); > * { position: relative; } > .x-floating { position: relative !important; } } .x-floating { position: absolute; } .x-dock { @include box(); &.x-sized, &.x-sized > .x-dock-body > *, &.x-sized > .x-dock-body > .x-body > .x-inner { @include absolute-fit(); } .x-dock-body { @include box(); @include box-flex(1); } &.x-sized > .x-dock-body { position: relative; } &.x-unsized, &.x-stretched { > .x-dock-body { @include box-orient(vertical); > * { @include box-flex(1); } } } &.x-dock-vertical { @include box-orient(vertical); } &.x-dock-horizontal { @include box-orient(horizontal); > .x-dock-item { @include box(); &.x-sized { > .x-inner, > .x-body { @include absolute-fit(); } } &.x-unsized { @include box-orient(vertical); > * { @include box-flex(1); } } } } } //.x-dock { // display: table; // width: 100%; // height: 100%; // &.x-dock-vertical { // > * { // display: table-row; // } // > .x-dock-item { // height: 1px; // } // &.x-sized > .x-dock-body { // > .x-body, > .x-inner, > .x-body > .x-inner { // width: 100%; // height: 100%; // } // } // } // &.x-dock-horizontal { // > * { // display: table-cell; // vertical-align: top; // height: 100%; // position: relative; // } // > .x-dock-item { // width: 1px; // } // > .x-dock-item > *, > .x-dock-body > * { // height: 100%; // } // &.x-sized > .x-dock-body { // > .x-body, > .x-inner, > .x-body > .x-inner { // width: 100%; // height: 100%; // } // } // } //} .x-layout-box { @include box; &.x-horizontal { @include box-orient-important(horizontal); > .x-layout-box-item.x-flexed { width: 0 !important; } } &.x-vertical { @include box-orient(vertical); > .x-layout-box-item.x-flexed { height: 0 !important; } } > .x-layout-box-item { display: -webkit-box !important; } &.x-align-start { @include box-align(start); } &.x-align-center { @include box-align(center); } &.x-align-end { @include box-align(end); } &.x-align-stretch { @include box-align(stretch); } &.x-pack-start { @include box-pack(start); } &.x-pack-center { @include box-pack(center); } &.x-pack-end { @include box-pack(end); } &.x-pack-justify { @include box-pack(justify); } } .x-layout-box-item.x-sized { > .x-inner, > .x-body, > .x-dock-outer { @include absolute-fit; } } .x-layout-float { overflow: hidden; > .x-layout-float-item { float: left; } &.x-direction-right { > .x-layout-float-item { float: right; } } } .x-table-inner { display: table !important; width: 100% !important; height: 100% !important; &.x-fixed-layout { table-layout: fixed !important; } } .x-table-row { display: table-row !important; } .x-table-cell { display: table-cell !important; vertical-align: middle; } .x-translatable { position: absolute; top: 100% !important; left: 100% !important; overflow: visible !important; z-index: 1; &::before { content: ""; display: block; position: absolute; top: 100%; left: 100%; width: 100%; height: 100%; visibility: hidden; } } .x-translatable-container { overflow: hidden; @include absolute-fit(); &::before { content: ""; display: block; width: 300%; height: 300%; visibility: hidden; } } .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; overflow: hidden; } .x-scroll-container { position: absolute; width: 100%; height: 100%; } .x-scroll-scroller { position: absolute; min-width: 100%; min-height: 100%; width: auto !important; height: auto !important; } .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: 3; opacity: 0.5; } .x-android-4 .x-scroll-indicator { opacity: 1; } .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; > * { 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); } } } }