mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-06 22:29:44 +08:00
Flexbox for refresher content, vertically centered!
This commit is contained in:
14
dist/css/ionic.css
vendored
14
dist/css/ionic.css
vendored
@ -2294,6 +2294,20 @@ body, .ionic-body {
|
||||
height: 100px;
|
||||
margin-top: -100px; }
|
||||
|
||||
.scroll-refresher-content {
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -moz-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
-moz-align-items: center;
|
||||
align-items: center; }
|
||||
|
||||
.scroll-refreshing {
|
||||
-webkit-transition: height 0.1s ease-in-out; }
|
||||
|
||||
|
||||
2
dist/js/ionic-angular.js
vendored
2
dist/js/ionic-angular.js
vendored
@ -530,7 +530,7 @@ angular.module('ionic.ui.content', [])
|
||||
restrict: 'E',
|
||||
replace: true,
|
||||
transclude: true,
|
||||
template: '<div class="scroll-refresher" ng-transclude></div>'
|
||||
template: '<div class="scroll-refresher"><div class="scroll-refresher-content" ng-transclude></div></div>'
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
2
js/ext/angular/src/directive/ionicContent.js
vendored
2
js/ext/angular/src/directive/ionicContent.js
vendored
@ -63,7 +63,7 @@ angular.module('ionic.ui.content', [])
|
||||
restrict: 'E',
|
||||
replace: true,
|
||||
transclude: true,
|
||||
template: '<div class="scroll-refresher" ng-transclude></div>'
|
||||
template: '<div class="scroll-refresher"><div class="scroll-refresher-content" ng-transclude></div></div>'
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
@ -41,7 +41,6 @@
|
||||
}
|
||||
#refresh-content {
|
||||
color: #999;
|
||||
padding: 60px 0px;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
}
|
||||
@ -54,9 +53,7 @@
|
||||
</header>
|
||||
<content has-header="true" ng-controller="AppCtrl" class="reveal-animation">
|
||||
<refresher>
|
||||
<div id="refresh-content">
|
||||
Refreshing
|
||||
</div>
|
||||
</refresher>
|
||||
<ul class="list">
|
||||
<li class="list-item" ng-repeat="item in items">asdf{{$index}}</li>
|
||||
|
||||
@ -114,6 +114,12 @@ body, .ionic-body {
|
||||
height: 100px;
|
||||
margin-top: -100px;
|
||||
}
|
||||
.scroll-refresher-content {
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
@include display-flex();
|
||||
@include align-items(center);
|
||||
}
|
||||
.scroll-refreshing {
|
||||
-webkit-transition: height 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user