mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-21 13:01:01 +08:00
91df5f97ee
Breaking Change: ## Refresher: - `<ion-refresher>` now takes a child `<ion-refresher-content>` component. - Custom refresh content components can now be replaced for Ionic's default refresher content. - Properties `pullingIcon`, `pullingText` and `refreshingText` have been moved to the `<ion-refresher-content>` component. - `spinner` property has been renamed to `refreshingSpinner` and now goes on the `<ion-refresher-content>` component. - `refreshingIcon` property is no longer an input, but instead `refreshingSpinner` should be used. Was: ``` <ion-refresher (refresh)="doRefresh($event)" pullingIcon="arrow-dropdown"> </ion-refresher> ``` Now: ``` <ion-refresher (refresh)="doRefresh($event)"> <ion-refresher-content pullingIcon="arrow-dropdown"></ion-refresher-content> </ion-refresher> ```
200 lines
3.3 KiB
SCSS
200 lines
3.3 KiB
SCSS
@import "../../globals.core";
|
|
|
|
// Z-Index
|
|
// --------------------------------------------------
|
|
// Grouped by elements which would be siblings
|
|
|
|
$z-index-menu-overlay: 80;
|
|
$z-index-menu-backdrop: 79;
|
|
$z-index-overlay: 1000;
|
|
$z-index-click-block: 9999;
|
|
|
|
$z-index-scroll-content: 1;
|
|
$z-index-refresher: 0;
|
|
|
|
$z-index-navbar-section: 10;
|
|
|
|
$z-index-toolbar: 10;
|
|
$z-index-toolbar-background: -1;
|
|
|
|
$z-index-toolbar-border: 20;
|
|
$z-index-list-border: 50;
|
|
|
|
$z-index-backdrop: 1;
|
|
$z-index-overlay-wrapper: 10;
|
|
|
|
$z-index-item-options: 1;
|
|
|
|
|
|
// Flex Order
|
|
// --------------------------------------------------
|
|
|
|
$flex-order-toolbar-top: -10;
|
|
$flex-order-toolbar-bottom: 10;
|
|
|
|
$flex-order-tabbar-navbar: -30;
|
|
$flex-order-tabbar-top: -20;
|
|
$flex-order-tabbar-bottom: 20;
|
|
|
|
|
|
|
|
// App Structure
|
|
// --------------------------------------------------
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
-webkit-tap-highlight-color: transparent;
|
|
-webkit-touch-callout: none;
|
|
}
|
|
|
|
html {
|
|
width: 100%;
|
|
height: 100%;
|
|
-ms-text-size-adjust: 100%; // 1
|
|
-webkit-text-size-adjust: 100%; // 1
|
|
}
|
|
|
|
body {
|
|
position: fixed;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
height: 100%;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
word-wrap: break-word;
|
|
|
|
touch-action: manipulation;
|
|
-webkit-user-drag: none;
|
|
-ms-content-zooming: none;
|
|
|
|
-webkit-font-smoothing: antialiased;
|
|
font-smoothing: antialiased;
|
|
text-rendering: optimizeLegibility;
|
|
|
|
-webkit-text-size-adjust: none;
|
|
-moz-text-size-adjust: none;
|
|
text-size-adjust: none;
|
|
|
|
@include user-select-none();
|
|
}
|
|
|
|
ion-app,
|
|
ion-nav,
|
|
ion-tabs {
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
ion-navbar-section {
|
|
display: block;
|
|
width: 100%;
|
|
min-height: 50px;
|
|
}
|
|
|
|
ion-content-section {
|
|
display: block;
|
|
flex: 1;
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
ion-page {
|
|
display: none;
|
|
flex-direction: column;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
&.show-page {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
ion-content {
|
|
position: relative;
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
flex: 1;
|
|
}
|
|
|
|
scroll-content {
|
|
position: absolute;
|
|
z-index: $z-index-scroll-content;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
display: block;
|
|
overflow-y: scroll;
|
|
overflow-x: hidden;
|
|
-webkit-overflow-scrolling: touch;
|
|
will-change: scroll-position;
|
|
}
|
|
|
|
ion-tabbar {
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
min-height: 50px;
|
|
}
|
|
|
|
ion-tab-section {
|
|
display: block;
|
|
position: relative;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
ion-page.tab-subpage {
|
|
position: fixed;
|
|
z-index: 10;
|
|
}
|
|
|
|
ion-navbar {
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
min-height: 50px;
|
|
z-index: $z-index-navbar-section;
|
|
}
|
|
|
|
ion-navbar-section ion-navbar.toolbar {
|
|
position: absolute;
|
|
}
|
|
|
|
ion-toolbar {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
ion-toolbar[position=bottom] {
|
|
bottom: 0;
|
|
z-index: $z-index-toolbar;
|
|
}
|
|
|
|
.sticky {
|
|
position: -webkit-sticky;
|
|
position: sticky;
|
|
top: 0;
|
|
}
|