_scaffolding.scss 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291
  1. /**
  2. * Scaffolding
  3. * --------------------------------------------------
  4. */
  5. *,
  6. *:before,
  7. *:after {
  8. @include box-sizing(border-box);
  9. }
  10. html {
  11. overflow: hidden;
  12. -ms-touch-action: pan-y;
  13. touch-action: pan-y;
  14. }
  15. body,
  16. .ionic-body {
  17. @include touch-callout(none);
  18. @include font-smoothing(antialiased);
  19. @include text-size-adjust(none);
  20. @include tap-highlight-transparent();
  21. @include user-select(none);
  22. top: 0;
  23. right: 0;
  24. bottom: 0;
  25. left: 0;
  26. overflow: hidden;
  27. margin: 0;
  28. padding: 0;
  29. color: $base-color;
  30. word-wrap: break-word;
  31. font-size: $font-size-base;
  32. font-family: -apple-system;
  33. font-family: $font-family-base;
  34. line-height: $line-height-computed;
  35. text-rendering: optimizeLegibility;
  36. -webkit-backface-visibility: hidden;
  37. -webkit-user-drag: none;
  38. -ms-content-zooming: none;
  39. }
  40. body.grade-b,
  41. body.grade-c {
  42. // disable optimizeLegibility for low end devices
  43. text-rendering: auto;
  44. }
  45. .content {
  46. // used for content areas not using the content directive
  47. position: relative;
  48. }
  49. .scroll-content {
  50. position: absolute;
  51. top: 0;
  52. right: 0;
  53. bottom: 0;
  54. left: 0;
  55. overflow: hidden;
  56. // Hide the top border if any
  57. margin-top: -1px;
  58. // Prevents any distortion of lines
  59. padding-top: 1px;
  60. margin-bottom: -1px;
  61. width: auto;
  62. height: auto;
  63. }
  64. .menu .scroll-content.scroll-content-false{
  65. z-index: $z-index-scroll-content-false;
  66. }
  67. .scroll-view {
  68. position: relative;
  69. display: block;
  70. overflow: hidden;
  71. &.overflow-scroll {
  72. position: relative;
  73. }
  74. &.scroll-x { overflow-x: scroll; overflow-y: hidden; }
  75. &.scroll-y { overflow-x: hidden; overflow-y: scroll; }
  76. &.scroll-xy { overflow-x: scroll; overflow-y: scroll; }
  77. // Hide the top border if any
  78. margin-top: -1px;
  79. }
  80. /**
  81. * Scroll is the scroll view component available for complex and custom
  82. * scroll view functionality.
  83. */
  84. .scroll {
  85. @include user-select(none);
  86. @include touch-callout(none);
  87. @include text-size-adjust(none);
  88. @include transform-origin(left, top);
  89. }
  90. /**
  91. * Set ms-viewport to prevent MS "page squish" and allow fluid scrolling
  92. * https://msdn.microsoft.com/en-us/library/ie/hh869615(v=vs.85).aspx
  93. */
  94. @-ms-viewport { width: device-width; }
  95. // Scroll bar styles
  96. .scroll-bar {
  97. position: absolute;
  98. z-index: $z-index-scroll-bar;
  99. }
  100. // hide the scroll-bar during animations
  101. .ng-animate .scroll-bar {
  102. visibility: hidden;
  103. }
  104. .scroll-bar-h {
  105. right: 2px;
  106. bottom: 3px;
  107. left: 2px;
  108. height: 3px;
  109. .scroll-bar-indicator {
  110. height: 100%;
  111. }
  112. }
  113. .scroll-bar-v {
  114. top: 2px;
  115. right: 3px;
  116. bottom: 2px;
  117. width: 3px;
  118. .scroll-bar-indicator {
  119. width: 100%;
  120. }
  121. }
  122. .scroll-bar-indicator {
  123. position: absolute;
  124. border-radius: 4px;
  125. background: rgba(0,0,0,0.3);
  126. opacity: 1;
  127. @include transition(opacity .3s linear);
  128. &.scroll-bar-fade-out {
  129. opacity: 0;
  130. }
  131. }
  132. .platform-android .scroll-bar-indicator {
  133. // android doesn't have rounded ends on scrollbar
  134. border-radius: 0;
  135. }
  136. .grade-b .scroll-bar-indicator,
  137. .grade-c .scroll-bar-indicator {
  138. // disable rgba background and border radius for low end devices
  139. background: #aaa;
  140. &.scroll-bar-fade-out {
  141. @include transition(none);
  142. }
  143. }
  144. ion-infinite-scroll {
  145. height: 60px;
  146. width: 100%;
  147. display: block;
  148. @include display-flex();
  149. @include flex-direction(row);
  150. @include justify-content(center);
  151. @include align-items(center);
  152. .icon {
  153. color: #666666;
  154. font-size: 30px;
  155. color: $scroll-refresh-icon-color;
  156. }
  157. &:not(.active){
  158. .spinner,
  159. .icon:before{
  160. display:none;
  161. }
  162. }
  163. }
  164. .overflow-scroll {
  165. overflow-x: hidden;
  166. overflow-y: scroll;
  167. -webkit-overflow-scrolling: touch;
  168. // Make sure the scrollbar doesn't take up layout space on edge
  169. -ms-overflow-style: -ms-autohiding-scrollbar;
  170. top: 0;
  171. right: 0;
  172. bottom: 0;
  173. left: 0;
  174. position: absolute;
  175. &.pane {
  176. overflow-x: hidden;
  177. overflow-y: scroll;
  178. }
  179. .scroll {
  180. position: static;
  181. height: 100%;
  182. -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
  183. }
  184. }
  185. // Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab.
  186. // Note: For these to work, content must come after both bars in the markup
  187. /* If you change these, change platform.scss as well */
  188. .has-header {
  189. top: $bar-height;
  190. }
  191. // Force no header
  192. .no-header {
  193. top: 0;
  194. }
  195. .has-subheader {
  196. top: $bar-height + $bar-subheader-height;
  197. }
  198. .has-tabs-top {
  199. top: $bar-height + $tabs-height;
  200. }
  201. .has-header.has-subheader.has-tabs-top {
  202. top: $bar-height + $bar-subheader-height + $tabs-height;
  203. }
  204. .has-footer {
  205. bottom: $bar-footer-height;
  206. }
  207. .has-subfooter {
  208. bottom: $bar-footer-height + $bar-subfooter-height;
  209. }
  210. .has-tabs,
  211. .bar-footer.has-tabs {
  212. bottom: $tabs-height;
  213. &.pane{
  214. bottom: $tabs-height;
  215. height:auto;
  216. }
  217. }
  218. .bar-subfooter.has-tabs {
  219. bottom: $tabs-height + $bar-footer-height;
  220. }
  221. .has-footer.has-tabs {
  222. bottom: $tabs-height + $bar-footer-height;
  223. }
  224. // A full screen section with a solid background
  225. .pane {
  226. @include translate3d(0,0,0);
  227. @include transition-duration(0);
  228. z-index: $z-index-pane;
  229. }
  230. .view {
  231. z-index: $z-index-view;
  232. }
  233. .pane,
  234. .view {
  235. position: absolute;
  236. top: 0;
  237. right: 0;
  238. bottom: 0;
  239. left: 0;
  240. width: 100%;
  241. height: 100%;
  242. background-color: $base-background-color;
  243. overflow: hidden;
  244. }
  245. .view-container {
  246. position: absolute;
  247. display: block;
  248. width: 100%;
  249. height: 100%;
  250. }