123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291 |
- /**
- * Scaffolding
- * --------------------------------------------------
- */
- *,
- *:before,
- *:after {
- @include box-sizing(border-box);
- }
- html {
- overflow: hidden;
- -ms-touch-action: pan-y;
- touch-action: pan-y;
- }
- body,
- .ionic-body {
- @include touch-callout(none);
- @include font-smoothing(antialiased);
- @include text-size-adjust(none);
- @include tap-highlight-transparent();
- @include user-select(none);
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- overflow: hidden;
- margin: 0;
- padding: 0;
- color: $base-color;
- word-wrap: break-word;
- font-size: $font-size-base;
- font-family: -apple-system;
- font-family: $font-family-base;
- line-height: $line-height-computed;
- text-rendering: optimizeLegibility;
- -webkit-backface-visibility: hidden;
- -webkit-user-drag: none;
- -ms-content-zooming: none;
- }
- body.grade-b,
- body.grade-c {
- // disable optimizeLegibility for low end devices
- text-rendering: auto;
- }
- .content {
- // used for content areas not using the content directive
- position: relative;
- }
- .scroll-content {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- overflow: hidden;
- // Hide the top border if any
- margin-top: -1px;
- // Prevents any distortion of lines
- padding-top: 1px;
- margin-bottom: -1px;
- width: auto;
- height: auto;
- }
- .menu .scroll-content.scroll-content-false{
- z-index: $z-index-scroll-content-false;
- }
- .scroll-view {
- position: relative;
- display: block;
- overflow: hidden;
- &.overflow-scroll {
- position: relative;
- }
- &.scroll-x { overflow-x: scroll; overflow-y: hidden; }
- &.scroll-y { overflow-x: hidden; overflow-y: scroll; }
- &.scroll-xy { overflow-x: scroll; overflow-y: scroll; }
- // Hide the top border if any
- margin-top: -1px;
- }
- /**
- * Scroll is the scroll view component available for complex and custom
- * scroll view functionality.
- */
- .scroll {
- @include user-select(none);
- @include touch-callout(none);
- @include text-size-adjust(none);
- @include transform-origin(left, top);
- }
- /**
- * Set ms-viewport to prevent MS "page squish" and allow fluid scrolling
- * https://msdn.microsoft.com/en-us/library/ie/hh869615(v=vs.85).aspx
- */
- @-ms-viewport { width: device-width; }
- // Scroll bar styles
- .scroll-bar {
- position: absolute;
- z-index: $z-index-scroll-bar;
- }
- // hide the scroll-bar during animations
- .ng-animate .scroll-bar {
- visibility: hidden;
- }
- .scroll-bar-h {
- right: 2px;
- bottom: 3px;
- left: 2px;
- height: 3px;
- .scroll-bar-indicator {
- height: 100%;
- }
- }
- .scroll-bar-v {
- top: 2px;
- right: 3px;
- bottom: 2px;
- width: 3px;
- .scroll-bar-indicator {
- width: 100%;
- }
- }
- .scroll-bar-indicator {
- position: absolute;
- border-radius: 4px;
- background: rgba(0,0,0,0.3);
- opacity: 1;
- @include transition(opacity .3s linear);
- &.scroll-bar-fade-out {
- opacity: 0;
- }
- }
- .platform-android .scroll-bar-indicator {
- // android doesn't have rounded ends on scrollbar
- border-radius: 0;
- }
- .grade-b .scroll-bar-indicator,
- .grade-c .scroll-bar-indicator {
- // disable rgba background and border radius for low end devices
- background: #aaa;
- &.scroll-bar-fade-out {
- @include transition(none);
- }
- }
- ion-infinite-scroll {
- height: 60px;
- width: 100%;
- display: block;
- @include display-flex();
- @include flex-direction(row);
- @include justify-content(center);
- @include align-items(center);
- .icon {
- color: #666666;
- font-size: 30px;
- color: $scroll-refresh-icon-color;
- }
- &:not(.active){
- .spinner,
- .icon:before{
- display:none;
- }
- }
- }
- .overflow-scroll {
- overflow-x: hidden;
- overflow-y: scroll;
- -webkit-overflow-scrolling: touch;
- // Make sure the scrollbar doesn't take up layout space on edge
- -ms-overflow-style: -ms-autohiding-scrollbar;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- position: absolute;
- &.pane {
- overflow-x: hidden;
- overflow-y: scroll;
- }
- .scroll {
- position: static;
- height: 100%;
- -webkit-transform: translate3d(0, 0, 0); // fix iOS bug where relative children of scroller disapear while scrolling. see: http://stackoverflow.com/questions/9807620/ipad-safari-scrolling-causes-html-elements-to-disappear-and-reappear-with-a-dela
- }
- }
- // Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab.
- // Note: For these to work, content must come after both bars in the markup
- /* If you change these, change platform.scss as well */
- .has-header {
- top: $bar-height;
- }
- // Force no header
- .no-header {
- top: 0;
- }
- .has-subheader {
- top: $bar-height + $bar-subheader-height;
- }
- .has-tabs-top {
- top: $bar-height + $tabs-height;
- }
- .has-header.has-subheader.has-tabs-top {
- top: $bar-height + $bar-subheader-height + $tabs-height;
- }
- .has-footer {
- bottom: $bar-footer-height;
- }
- .has-subfooter {
- bottom: $bar-footer-height + $bar-subfooter-height;
- }
- .has-tabs,
- .bar-footer.has-tabs {
- bottom: $tabs-height;
- &.pane{
- bottom: $tabs-height;
- height:auto;
- }
- }
- .bar-subfooter.has-tabs {
- bottom: $tabs-height + $bar-footer-height;
- }
- .has-footer.has-tabs {
- bottom: $tabs-height + $bar-footer-height;
- }
- // A full screen section with a solid background
- .pane {
- @include translate3d(0,0,0);
- @include transition-duration(0);
- z-index: $z-index-pane;
- }
- .view {
- z-index: $z-index-view;
- }
- .pane,
- .view {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background-color: $base-background-color;
- overflow: hidden;
- }
- .view-container {
- position: absolute;
- display: block;
- width: 100%;
- height: 100%;
- }
|