diff --git a/dist/css/ionic.css b/dist/css/ionic.css index 0dff314fd5..9ec0a586a5 100644 --- a/dist/css/ionic.css +++ b/dist/css/ionic.css @@ -49,7 +49,7 @@ .white { color: white; } -/* +/*! Ionicons, v1.3.3 Created by Ben Sperry for the Ionic Framework, http://ionicons.com/ https://twitter.com/helloimben https://twitter.com/ionicframework @@ -2091,7 +2091,7 @@ sub { fieldset { margin: 0 2px; padding: 0.35em 0.625em 0.75em; - border: 1px solid silver; } + border: 1px solid #c0c0c0; } /** * 1. Correct `color` not being inherited in IE 8/9. @@ -2341,10 +2341,23 @@ body, .ionic-body { position: absolute; left: 50%; margin-left: -5px; - bottom: 15px; } + bottom: 25px; } .scroll-refreshing { -webkit-transition: height 0.1s ease-in-out; } + .scroll-refreshing .ionic-refresher { + -webkit-animation: refresher-pulsate 1.5s linear; + -webkit-animation-iteration-count: infinite; } + +@-webkit-keyframes refresher-pulsate { + 0% { + -webkit-transform: scale(2, 2); } + + 50% { + -webkit-transform: scale(1.5, 1.5); } + + 100% { + -webkit-transform: scale(2, 2); } } .overflow-scroll { overflow: auto; @@ -2499,13 +2512,13 @@ address { font-style: normal; line-height: 1.42857; } -a.subdued‎ { +a.subduedΓÇÄ { padding-right: 10px; color: #555555; text-decoration: none; } - a.subdued‎:hover { + a.subduedΓÇÄ:hover { text-decoration: none; } - a.subdued‎:last-child { + a.subduedΓÇÄ:last-child { padding-right: 0; } /** @@ -3990,7 +4003,7 @@ input[type="file"] { line-height: 34px; } select { - border: 1px solid #cccccc; + border: 1px solid #ccc; background-color: white; } select[multiple], @@ -4049,7 +4062,7 @@ input[type="checkbox"][readonly] { border-radius: 50%; background: white; content: ' '; - transition: background-color 0.1s ease-in-out; } + transition: background-color .1s ease-in-out; } /* the checkmark within the box */ .checkbox input:after { @@ -4064,7 +4077,7 @@ input[type="checkbox"][readonly] { border-right: 0; content: ' '; opacity: 0; - transition: opacity 0.05s ease-in-out; + transition: opacity .05s ease-in-out; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } @@ -4493,7 +4506,7 @@ input[type="range"] { .button-icon:active, .button-icon.active { background: none; box-shadow: none; - text-shadow: 0px 0px 10px white; } + text-shadow: 0px 0px 10px #fff; } .padding > .button.block:first-child { margin-top: 0; } diff --git a/dist/css/themes/ionic-ios7.css b/dist/css/themes/ionic-ios7.css index e027d9919a..e119d59757 100644 --- a/dist/css/themes/ionic-ios7.css +++ b/dist/css/themes/ionic-ios7.css @@ -1,4 +1,3 @@ -@charset "UTF-8"; /** * Mixins * -------------------------------------------------- @@ -124,7 +123,7 @@ right: 20px; transition: 0.2s ease; transition-property: left, right; - transition-delay: 0s, 0.05s; } + transition-delay: 0s, .05s; } .toggle :checked + .track { /* When the toggle is "on" */ @@ -139,4 +138,4 @@ right: 0; left: 20px; -webkit-transform: none; - transition-delay: 0.05s, 0s; } + transition-delay: .05s, 0s; } diff --git a/dist/js/ionic-angular.js b/dist/js/ionic-angular.js index 0c30d7a4aa..61a93d3aaf 100644 --- a/dist/js/ionic-angular.js +++ b/dist/js/ionic-angular.js @@ -552,11 +552,21 @@ angular.module('ionic.ui.content', []) template: '
', scope: true, link: function($scope, $element, $attr, scrollCtrl) { - $scope.$on('onRefresh', function() { + var icon = $element[0].querySelector('.ionic-refresher'); + + // Scale up the refreshing icon + var onRefreshOpening = ionic.throttle(function(e, amt) { + icon.style[ionic.CSS.TRANSFORM] = 'scale(' + Math.min((1 + amt), 2) + ')'; + }, 100); + + $scope.$on('onRefreshing', function(e) { + icon.style[ionic.CSS.TRANSFORM] = 'scale(2)'; }); - $scope.$on('onRefreshOpening', function(amt) { - console.log('On refresh opening', amt); + + $scope.$on('onRefresh', function(e) { + icon.style[ionic.CSS.TRANSFORM] = 'scale(1)'; }); + $scope.$on('onRefreshOpening', onRefreshOpening); } } }) @@ -685,11 +695,11 @@ angular.module('ionic.ui.list', ['ngAnimate']) hasPullToRefresh: ($scope.hasPullToRefresh !== 'false'), onRefresh: function() { $scope.onRefresh(); - $scope.$broadcast('onRefresh'); + $scope.$parent.$broadcast('onRefresh'); }, onRefreshOpening: function(amt) { $scope.onRefreshOpening({amount: amt}); - $scope.$broadcast('onRefreshOpening', amt); + $scope.$parent.$broadcast('onRefreshOpening', amt); } }); diff --git a/dist/js/ionic.js b/dist/js/ionic.js index fb9933e15e..3eb612815c 100644 --- a/dist/js/ionic.js +++ b/dist/js/ionic.js @@ -8,6 +8,8 @@ http://ionicframework.com/ By @maxlynch, @helloimben, @adamdbradley <3 Licensed under the MIT license. Please see LICENSE for more information. + +Make awesome shit. */ ; diff --git a/js/ext/angular/src/directive/ionicContent.js b/js/ext/angular/src/directive/ionicContent.js index 0d988b4cd0..97d9796083 100644 --- a/js/ext/angular/src/directive/ionicContent.js +++ b/js/ext/angular/src/directive/ionicContent.js @@ -80,11 +80,21 @@ angular.module('ionic.ui.content', []) template: '
', scope: true, link: function($scope, $element, $attr, scrollCtrl) { - $scope.$on('onRefresh', function() { + var icon = $element[0].querySelector('.ionic-refresher'); + + // Scale up the refreshing icon + var onRefreshOpening = ionic.throttle(function(e, amt) { + icon.style[ionic.CSS.TRANSFORM] = 'scale(' + Math.min((1 + amt), 2) + ')'; + }, 100); + + $scope.$on('onRefreshing', function(e) { + icon.style[ionic.CSS.TRANSFORM] = 'scale(2)'; }); - $scope.$on('onRefreshOpening', function(amt) { - console.log('On refresh opening', amt); + + $scope.$on('onRefresh', function(e) { + icon.style[ionic.CSS.TRANSFORM] = 'scale(1)'; }); + $scope.$on('onRefreshOpening', onRefreshOpening); } } }) diff --git a/js/ext/angular/src/directive/ionicList.js b/js/ext/angular/src/directive/ionicList.js index 57eed15e3e..64e84b8080 100644 --- a/js/ext/angular/src/directive/ionicList.js +++ b/js/ext/angular/src/directive/ionicList.js @@ -110,11 +110,11 @@ angular.module('ionic.ui.list', ['ngAnimate']) hasPullToRefresh: ($scope.hasPullToRefresh !== 'false'), onRefresh: function() { $scope.onRefresh(); - $scope.$broadcast('onRefresh'); + $scope.$parent.$broadcast('onRefresh'); }, onRefreshOpening: function(amt) { $scope.onRefreshOpening({amount: amt}); - $scope.$broadcast('onRefreshOpening', amt); + $scope.$parent.$broadcast('onRefreshOpening', amt); } }); diff --git a/scss/_scaffolding.scss b/scss/_scaffolding.scss index 2b52c14702..b00a6cf23d 100644 --- a/scss/_scaffolding.scss +++ b/scss/_scaffolding.scss @@ -137,10 +137,21 @@ body, .ionic-body { position: absolute; left: 50%; margin-left: -5px; - bottom: 15px; + bottom: 25px; } .scroll-refreshing { -webkit-transition: height 0.1s ease-in-out; + + .ionic-refresher { + -webkit-animation: refresher-pulsate 1.5s linear; + -webkit-animation-iteration-count: infinite; + } +} + +@-webkit-keyframes refresher-pulsate { + 0% {-webkit-transform: scale(2, 2); } + 50% {-webkit-transform: scale(1.5, 1.5); } + 100% {-webkit-transform: scale(2, 2); } } .overflow-scroll {