Merge branch 'master' of https://github.com/driftyco/ionic

Conflicts:
	scss/_variables.scss

js/ext/angular/src/directive/ionicHeader.js

@@ -0,0 +1,34 @@
+(function(ionic) {
+'use strict';
+
+angular.module('ionic.ui.header', ['ngAnimate'])
+
+
+.directive('headerBar', function() {
+  return {
+    restrict: 'E',
+    replace: true,
+    transclude: true,
+    template: '<header class="bar bar-header" ng-transclude></header>',
+    scope: {
+      type: '@',
+      alignTitle: '@',
+    },
+    link: function($scope, $element, $attr) {
+      var hb = new ionic.views.HeaderBar({
+        el: $element[0],
+        alignTitle: $scope.alignTitle || 'center'
+      });
+
+      $element.addClass($scope.type);
+
+      $scope.headerBarView = hb;
+
+      $scope.$on('$destroy', function() {
+        //
+      });
+    }
+  };
+});
+
+})(ionic);

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.$parent.$broadcast('onRefresh');
+            $scope.$parent.$broadcast('scroll.onRefresh');
           },
           onRefreshOpening: function(amt) {
             $scope.onRefreshOpening({amount: amt});
-            $scope.$parent.$broadcast('onRefreshOpening', amt);
+            $scope.$parent.$broadcast('scroll.onRefreshOpening', amt);
           }
         });
 

js/ext/angular/src/directive/ionicNav.js

@@ -32,6 +32,7 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
   // Pop function, throttled
   this.popController = ionic.throttle(function() {
     _this.pop();
+    $scope.$broadcast('navs.pop');
   }, 300, {
     trailing: false
   });
@@ -79,6 +80,7 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
    */
   $scope.pushController = function(scope, element) {
     _this.push(scope);
+    $scope.$broadcast('navs.push', scope);
   };
 
   $scope.navController = this;
@@ -105,22 +107,46 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
     restrict: 'E',
     require: '^navs',
     replace: true,
-    scope: true,
+    scope: {
+      type: '@',
+      backButtonType: '@',
+      alignTitle: '@'
+    },
     template: '<header class="bar bar-header nav-bar" ng-class="{hidden: !navController.navBar.isVisible}">' + 
-        '<a href="#" ng-click="goBack()" class="button" ng-if="navController.controllers.length > 1">Back</a>' +
+        '<button ng-click="goBack()" class="button" ng-if="navController.controllers.length > 1" ng-class="backButtonType">Back</button>' +
         '<h1 class="title">{{navController.getTopController().title}}</h1>' + 
       '</header>',
-    link: function(scope, element, attrs, navCtrl) {
+    link: function($scope, $element, $attr, navCtrl) {
-      scope.navController = navCtrl;
+      var backButton;
 
-      scope.barType = attrs.barType || 'bar-dark';
+      $scope.navController = navCtrl;
-      element.addClass(scope.barType);
 
-      scope.$watch('navController.controllers.length', function(value) {
+      $scope.goBack = function() {
-      });
-      scope.goBack = function() {
         navCtrl.popController();
       };
+
+
+      var hb = new ionic.views.HeaderBar({
+        el: $element[0],
+        alignTitle: $scope.alignTitle || 'center'
+      });
+
+      $element.addClass($scope.type);
+
+      $scope.headerBarView = hb;
+
+      $scope.$parent.$on('navs.push', function() {
+        backButton = angular.element($element[0].querySelector('.button'));
+        backButton.addClass($scope.backButtonType);
+        hb.align();
+      });
+      $scope.$parent.$on('navs.pop', function() {
+        hb.align();
+      });
+
+      $scope.$on('$destroy', function() {
+        //
+      });
     }
   };
 })

js/ext/angular/src/ionicAngular.js

@@ -16,6 +16,7 @@ angular.module('ionic.ui', [
                             'ionic.ui.content',
                             'ionic.ui.tabs',
                             'ionic.ui.nav',
+                            'ionic.ui.header',
                             'ionic.ui.sideMenu',
                             'ionic.ui.list',
                             'ionic.ui.checkbox',

js/ext/angular/src/service/ionicActionSheet.js

@@ -1,6 +1,8 @@
-angular.module('ionic.service.actionSheet', ['ionic.service.templateLoad', 'ionic.ui.actionSheet'])
+angular.module('ionic.service.actionSheet', ['ionic.service.templateLoad', 'ionic.ui.actionSheet', 'ngAnimate'])
+
+.factory('ActionSheet', ['$rootScope', '$document', '$compile', '$animate', '$timeout', 'TemplateLoader',
+    function($rootScope, $document, $compile, $animate, $timeout, TemplateLoader) {
 
-.factory('ActionSheet', ['$rootScope', '$document', '$compile', 'TemplateLoader', function($rootScope, $document, $compile, TemplateLoader) {
   return {
     /**
      * Load an action sheet with the given template string.
@@ -10,23 +12,41 @@ angular.module('ionic.service.actionSheet', ['ionic.service.templateLoad', 'ioni
      *
      * @param {object} opts the options for this ActionSheet (see docs)
      */
-    show: function(opts, $scope) {
+    show: function(opts) {
-      var scope = $scope && $scope.$new() || $rootScope.$new(true);
+      var scope = $rootScope.$new(true);
 
       angular.extend(scope, opts);
 
-      scope.cancel = function() {
+
-        scope.sheet.hide();
+      // Compile the template
-        //scope.$destroy();
+      var element = $compile('<action-sheet buttons="buttons"></action-sheet>')(scope);
+
+      // Grab the sheet element for animation
+      var sheetEl = angular.element(element[0].querySelector('.action-sheet'));
+
+      var hideSheet = function(didCancel) {
+        $animate.leave(sheetEl, function() {
+          if(didCancel) {
             opts.cancel();
+          }
+        });
+        
+        $timeout(function() {
+          $animate.removeClass(element, 'active', function() {
+            scope.$destroy();
+          });
+        });
+      };
+
+      scope.cancel = function() {
+        hideSheet(true);
       };
 
       scope.buttonClicked = function(index) {
         // Check if the button click event returned true, which means
         // we can close the action sheet
         if((opts.buttonClicked && opts.buttonClicked(index)) === true) {
-          scope.sheet.hide();
+          hideSheet(false);
-          //scope.$destroy();
         }
       };
 
@@ -34,24 +54,21 @@ angular.module('ionic.service.actionSheet', ['ionic.service.templateLoad', 'ioni
         // Check if the destructive button click event returned true, which means
         // we can close the action sheet
         if((opts.destructiveButtonClicked && opts.destructiveButtonClicked()) === true) {
-          scope.sheet.hide();
+          hideSheet(false);
-          //scope.$destroy();
         }
       };
 
-      // Compile the template
-      var element = $compile('<action-sheet buttons="buttons"></action-sheet>')(scope);
-
-      var s = element.scope();
-
       $document[0].body.appendChild(element[0]);
 
       var sheet = new ionic.views.ActionSheet({el: element[0] });
-      s.sheet = sheet;
+      scope.sheet = sheet;
 
-      sheet.show();
+      $animate.addClass(element, 'active');
+      $animate.enter(sheetEl, element, function() {
+      });
 
       return sheet;
     }
   };
+
 }]);

js/ext/angular/test/actionSheet.html

@@ -0,0 +1,162 @@
+<html ng-app="actionTest">
+  <head>
+    <meta charset="utf-8">
+    <title>Action Sheet</title>
+
+    <!-- Sets initial viewport load and disables zooming  -->
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link rel="stylesheet" href="../../../../dist/css/ionic.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-touch.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-animate.js"></script>
+    <style>
+      .row .col > div {
+        width: 100%;
+        height: 80px;
+      }
+
+    </style>
+  </head>
+  <body ng-controller="ActionCtrl">
+    <div class="row">
+      <div class="col">
+        <div style="background-color: #eee" ng-click="show()">
+        </div>
+      </div>
+      <div class="col">
+        <div style="background-color: #eee" ng-click="show()">
+        </div>
+      </div>
+      <div class="col">
+        <div style="background-color: #eee" ng-click="show()">
+        </div>
+      </div>
+      <div class="col">
+        <div style="background-color: #eee" ng-click="show()">
+        </div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col">
+        <div style="background-color: #eee" ng-click="show()">
+        </div>
+      </div>
+      <div class="col">
+        <div style="background-color: #eee" ng-click="show()">
+        </div>
+      </div>
+      <div class="col">
+        <div style="background-color: #eee" ng-click="show()">
+        </div>
+      </div>
+      <div class="col">
+        <div style="background-color: #eee" ng-click="show()">
+        </div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col">
+        <div style="background-color: #eee" ng-click="show()">
+        </div>
+      </div>
+      <div class="col">
+        <div style="background-color: #eee" ng-click="show()">
+        </div>
+      </div>
+      <div class="col">
+        <div style="background-color: #eee" ng-click="show()">
+        </div>
+      </div>
+      <div class="col">
+        <div style="background-color: #eee" ng-click="show()">
+        </div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col">
+        <div style="background-color: #eee" ng-click="show()">
+        </div>
+      </div>
+      <div class="col">
+        <div style="background-color: #eee" ng-click="show()">
+        </div>
+      </div>
+      <div class="col">
+        <div style="background-color: #eee" ng-click="show()">
+        </div>
+      </div>
+      <div class="col">
+        <div style="background-color: #eee" ng-click="show()">
+        </div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col">
+        <div style="background-color: #eee" ng-click="show()">
+        </div>
+      </div>
+      <div class="col">
+        <div style="background-color: #eee" ng-click="show()">
+        </div>
+      </div>
+      <div class="col">
+        <div style="background-color: #eee" ng-click="show()">
+        </div>
+      </div>
+      <div class="col">
+        <div style="background-color: #eee" ng-click="show()">
+        </div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col">
+        <div style="background-color: #eee" ng-click="show()">
+        </div>
+      </div>
+      <div class="col">
+        <div style="background-color: #eee" ng-click="show()">
+        </div>
+      </div>
+      <div class="col">
+        <div style="background-color: #eee" ng-click="show()">
+        </div>
+      </div>
+      <div class="col">
+        <div style="background-color: #eee" ng-click="show()">
+        </div>
+      </div>
+    </div>
+
+    <button ng-click="show()" class="button">Show</button>
+    <script src="../../../../dist/js/ionic.js"></script>
+    <script src="../../../../dist/js/ionic-angular.js"></script>
+    <script>
+      angular.module('actionTest', ['ionic', 'ngAnimate'])
+
+      .controller('ActionCtrl', function($scope, ActionSheet) {
+        $scope.show = function() {
+          ActionSheet.show({
+            buttons: [
+              { text: 'Share' },
+              { text: 'Move' },
+            ],
+            destructiveText: 'Delete',
+            titleText: 'Modify your album',
+            cancelText: 'Cancel',
+            cancel: function() {
+              console.log('CANCELLED');
+            },
+            buttonClicked: function(index) {
+              console.log('BUTTON CLICKED', index);
+              return true;
+            },
+            destructiveButtonClicked: function() {
+              console.log('DESTRUCT');
+              return true;
+            }
+          });
+        };
+       });
+    </script>
+  </body>
+</html>

js/ext/angular/test/header.html

@@ -0,0 +1,40 @@
+<html ng-app="headerTest">
+  <head>
+    <meta charset="utf-8">
+    <title>Header</title>
+
+    <!-- Sets initial viewport load and disables zooming  -->
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link rel="stylesheet" href="../../../../dist/css/ionic.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-touch.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-animate.js"></script>
+  </head>
+  <body>
+    <header-bar type="bar-primary" align-title="left">
+      <button class="button">Tap</button>
+      <h1 class="title">A really really long title here here here here her</h1>
+    </header-bar>
+    <script src="../../../../dist/js/ionic.js"></script>
+    <script src="../../../../dist/js/ionic-angular.js"></script>
+    <script>
+      angular.module('headerTest', ['ionic']);
+      var midPoint = window.clientWidth / 2;
+      var box = document.createElement('div');
+      box.style.backgroundColor = 'red';
+      box.style.opacity = '0.6';
+      box.style.width = '2px';
+      box.style.height = '44px';
+      box.style.left = '50%';
+      box.style.position = 'fixed';
+      box.style.zIndex = 100;
+      box.style.top = '0px';
+      box.style.marginLeft = '-1px';
+      document.body.appendChild(box);
+      window.onresize = function() {
+        var s = angular.element(document.getElementsByTagName('header')[0]).isolateScope();
+        s.headerBarView.align();
+      };
+    </script>
+  </body>
+</html>

js/ext/angular/test/nav.html

@@ -32,7 +32,8 @@
   <body>
 
     <navs>
-      <nav-bar></nav-bar>
+      <nav-bar type="bar-primary" back-button-type="button-pure" align-title="right">
+      </nav-bar>
 
       <div ng-controller="AppCtrl">
         <content has-header="true">
@@ -41,7 +42,7 @@
     </navs>
 
     <script id="page.html" type="text/ng-template">
-      <div title="Home" ng-controller="CatsCtrl" class="nav-content">
+      <div title="Home home home home home home home home home" ng-controller="CatsCtrl" class="nav-content">
         <h1></h1>
         <a href="#" class="button button-success" ng-click="goNext()">Next</a>
         <list><list-item ng-repeat="item in items" on-select="goNext()">Test</list-item></list>

js/utils/dom.js

@@ -1,5 +1,28 @@
 (function(ionic) {
   ionic.DomUtil = {
+    getTextBounds: function(textNode) {
+      if(document.createRange) {
+        var range = document.createRange();
+        range.selectNodeContents(textNode);
+        if(range.getBoundingClientRect) {
+          var rect = range.getBoundingClientRect();
+
+          var sx = window.scrollX;
+          var sy = window.scrollY;
+
+          return {
+            top: rect.top + sy,
+            left: rect.left + sx,
+            right: rect.left + sx + rect.width,
+            bottom: rect.top + sy + rect.height,
+            width: rect.width,
+            height: rect.height
+          };
+        }
+      }
+      return null
+    },
+
     getChildIndex: function(element) {
       return Array.prototype.slice.call(element.parentNode.children).indexOf(element);
     },

js/views/headerBarView.js

@@ -5,22 +5,95 @@
     initialize: function(opts) {
       this.el = opts.el;
 
-      this._titleEl = this.el.querySelector('.title');
+      ionic.extend(this, {
+        alignTitle: 'center'
+      }, opts);
+
+      this.align();
     },
-    resizeTitle: function() {
-      var e, j, i,
-      title,
-      titleWidth,
-      children = this.el.children;
 
-      for(i = 0, j = children.length; i < j; i++) {
+    /**
-        e = children[i];
+     * Align the title text given the buttons in the header
-        if(/h\d/.test(e.nodeName.toLowerCase())) {
+     * so that the header text size is maximized and aligned
-          title = e;
+     * correctly as long as possible.
+     */
+    align: function() {
+      var _this = this;
+
+      window.rAF(ionic.proxy(function() {
+        var i, c, childSize, childStyle;
+        var children = this.el.children;
+        var childNodes = this.el.childNodes;
+        var styles = window.getComputedStyle(this.el, null);
+
+        // Get the padding of the header for calculations
+        var paddingLeft = parseFloat(styles['paddingLeft']);
+        var paddingRight = parseFloat(styles['paddingRight']);
+
+        // Get the full width of the header
+        var headerWidth = this.el.offsetWidth;
+
+        // Find the title element
+        var title = this.el.querySelector('.title');
+        if(!title) {
+          return;
+        }
+      
+        var leftWidth = 0;
+        var rightWidth = 0;
+        var titlePos = Array.prototype.indexOf.call(this.el.childNodes, title);
+
+        // Compute how wide the left children are
+        for(i = 0; i < titlePos; i++) {
+          childSize = null;
+          c = childNodes[i];
+          if(c.nodeType == 3) {
+            childSize = ionic.DomUtil.getTextBounds(c);
+          } else if(c.nodeType == 1) {
+            childSize = c.getBoundingClientRect();
+          }
+          if(childSize) {
+            leftWidth += childSize.width;
           }
         }
 
-      titleWidth = title.offsetWidth;
+        // Compute how wide the right children are
+        for(i = titlePos + 1; i < childNodes.length; i++) {
+          childSize = null;
+          c = childNodes[i];
+          if(c.nodeType == 3) {
+            childSize = ionic.DomUtil.getTextBounds(c);
+          } else if(c.nodeType == 1) {
+            childSize = c.getBoundingClientRect();
+          }
+          if(childSize) {
+            rightWidth += childSize.width;
+          }
+        }
+
+        var margin = Math.max(leftWidth, rightWidth) + 10;
+
+        // Size and align the header title based on the sizes of the left and
+        // right children, and the desired alignment mode
+        if(this.alignTitle == 'center') {
+          title.style.left = margin + 'px';
+          title.style.right = margin + 'px';
+
+          console.log(title.offsetWidth, title.scrollWidth);
+          if(title.offsetWidth < title.scrollWidth) {
+            title.style.textAlign = 'left';
+            title.style.right = (rightWidth + 5) + 'px';
+          } else {
+            title.style.textAlign = 'center';
+          }
+        } else if(this.alignTitle == 'left') {
+          title.style.textAlign = 'left';
+          title.style.left = (leftWidth + 15) + 'px';
+        } else if(this.alignTitle == 'right') {
+          title.style.textAlign = 'right';
+          title.style.right = (rightWidth + 15) + 'px';
+        }
+      }, this));
     }
   });
 

js/views/scrollView.js

@@ -50,7 +50,7 @@
 
         // Whether to disable overflow rubber banding when content is small
         // enough to fit in the viewport (i.e. doesn't need scrolling)
-        disableNonOverflowRubberBand: false,
+        disableNonOverflowRubberBand: true,
 
         // Called as the refresher is opened, an amount is passed
         onRefreshOpening: function() {},
@@ -508,7 +508,9 @@
         startTime: Date.now()
       };
 
-      if(this.disableNonOverflowRubberBand === true) {
+      // If the viewport is too small and we aren't using pull to refresh,
+      // don't rubber band the drag
+      if(this.disableNonOverflowRubberBand === true && !this._refresher) {
         var maxX = Math.min(0, (-totalWidth + parentWidth));
         var maxY = Math.min(0, (-totalHeight + parentHeight));
 

scss/_action-sheet.scss

@@ -4,8 +4,100 @@
  * --------------------------------------------------
  */
 
+@-webkit-keyframes fadeInHalf {
+  from { background-color: rgba(0,0,0,0); }
+  to { background-color: rgba(0,0,0,0.5); }
+}
+@keyframes fadeInHalf {
+  from { background-color: rgba(0,0,0,0); }
+  to { background-color: rgba(0,0,0,0.5); }
+}
+@-webkit-keyframes fadeOutHalf {
+  from { background-color: rgba(0,0,0,0.5); }
+  to { background-color: rgba(0,0,0,0); }
+}
+@keyframes fadeOutHalf {
+  from { background-color: rgba(0,0,0,0.5); }
+  to { background-color: rgba(0,0,0,0); }
+}
+
+.action-sheet-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0,0,0,0);
+
+  &.active {
+    -webkit-animation: fadeInHalf 0.3s;
+    animation: fadeInHalf 0.3s;
+
+    -webkit-animation-fill-mode: forwards;
+  }
+
+  &.active-remove {
+    -webkit-animation: fadeOutHalf 0.3s;
+    animation: fadeOutHalf 0.3s;
+
+    -webkit-animation-fill-mode: forwards;
+  }
+}
+
+@-webkit-keyframes actionSheetUp {
+  0% {
+    -webkit-transform: translate3d(0, 100%, 0);
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+@-webkit-keyframes actionSheetOut {
+  0% {
+    -webkit-transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: translate3d(0, 100%, 0);
+    opacity: 0;
+  }
+}
+$slide-in-up-function: cubic-bezier(.1, .7, .1, 1);
+
+.action-sheet-up {
+  opacity: 1;
+  // Start it down low
+  -webkit-transform: translate3d(0, 0%, 0);
+
+  &.ng-enter, .ng-enter {
+    // Start hidden
+    opacity: 0;
+    // Start it down low
+    -webkit-transform: translate3d(0, 100%, 0);
+
+    -webkit-animation-duration: 400ms;
+    -webkit-animation-fill-mode: both;
+    -webkit-animation-timing-function: $slide-in-up-function;
+  }
+
+  &.ng-enter-active, .ng-enter-active {
+    -webkit-animation-name: actionSheetUp;
+  }
+
+  &.ng-leave, .ng-leave {
+    -webkit-animation-duration: 400ms;
+    -webkit-animation-fill-mode: both;
+    -webkit-animation-timing-function: $slide-in-up-function;
+  }
+
+  &.ng-leave-active, .ng-leave {
+    -webkit-animation-name: actionSheetOut;
+  }
+}
+
 .action-sheet {
-  @include translate3d(0, 100%, 0);
 
   position: fixed;
   bottom: 0;
@@ -16,9 +108,10 @@
 
   .button {
     display: block;
-    padding: 10px;
+    padding: 1px;
     width: 100%;
-    border-radius: none;
+    border-radius: 0;
+
     background-color: transparent;
 
     color: $positive;
@@ -34,10 +127,23 @@
   padding: 10px;
   text-align: center;
   font-size: 12px;
+  color: lighten($base-color, 40%);
 }
 
 .action-sheet-group {
-  margin-bottom: 10px;
+  background-color: #fff;
+  margin-bottom: 5px;
   border-radius: $sheet-border-radius;
-  background-color: rgba($sheet-bg-color, $sheet-opacity);
+  .button {
+    border-radius: 0;
+    border-width: 1px 0px 0px 0px;
+
+    &.active, &:active {
+      background-color: transparent;
+      color: inherit;
+    }
+  }
+  .button:first-child:last-child {
+    border-width: 0;
+  }
 }

scss/_bar.scss

@@ -87,6 +87,7 @@
     left: 0;
     z-index: 0;
 
+
     margin: 0;
 
     min-width: 30px;
@@ -96,9 +97,15 @@
     // Go into ellipsis if too small
     text-overflow: ellipsis;
     white-space: nowrap;
+    overflow: hidden;
+
     font-size: $bar-title-font-size;
 
     line-height: $bar-height;
+
+    &.title-left {
+      text-align: left;
+    }
   }
 
   .title a {

scss/_form.scss

@@ -1,4 +1,3 @@
-
 /**
  * Forms
  * --------------------------------------------------
@@ -134,7 +133,7 @@ input[type="tel"],
 input[type="color"] {
   display: inline-block;
   height: $line-height-computed + $font-size-base;
-  color: $stable;
+  color: darken($stable, 10%);
   vertical-align: middle;
   font-size: $font-size-base;
   line-height: $line-height-computed;

scss/_variables.scss

@@ -78,7 +78,7 @@ $input-bg-disabled:               $stable;
 
 $input-color:                     $dark;
 $input-label-color:               $dark;
-$input-color-placeholder:         $stable;
+$input-color-placeholder:         darken($stable, 10%);
 
 
 // Toggle
@@ -430,7 +430,11 @@ $grid-padding-width:           10px !default;
 
 $sheet-bg-color:              rgba(255, 255, 255, 0.6) !default;
 $sheet-opacity:               0.95 !default;
-$sheet-border-radius:         3px !default;
+
+// Border radii for the action sheet button groups
+$sheet-border-radius:         3px 3px 3px 3px !default;
+$sheet-border-radius-top:         3px 3px 0px 0px !default;
+$sheet-border-radius-bottom:         0px 0px 3px 3px !default;
 
 
 // Badges