feat(sideMenu): Degrade .menu-content box-shadow w/ platform grade fo…

…r animation performance
ionic-team · Feb 21, 2014 · d2a0780 · d2a0780
1 parent b69b40c
commit d2a0780
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 1 deletion.
diff --git a/js/ext/angular/test/sideMenu2.html b/js/ext/angular/test/sideMenu2.html
@@ -8,7 +8,7 @@
     <link rel="stylesheet" href="../../../../dist/css/ionic.css">
     <script src="../../../../dist/js/ionic.bundle.js"></script>
   </head>
-  <body>
+  <body class="grade-a">
 
     <div ng-controller="MainCtrl">
       <ion-nav-view></ion-nav-view>
@@ -54,6 +54,11 @@
           <div class="button" ng-click="sideMenuController.toggleLeft()" style="position: absolute; left: 100px; top: 200px;">
             Left Menu
           </div>
+          <select ng-model="data.grade" ng-change="gradeChange(data.grade)">
+            <option>grade-a</option>
+            <option>grade-b</option>
+            <option>grade-c</option>
+          </select>
           <p ng-repeat="p in range">{{$index}}....</p>
           <p>(On desktop click and drag from left to right)</p>
         </ion-content>
@@ -165,6 +170,14 @@
       .controller('MainCtrl', function($scope) {
         console.log('MainCtrl');
 
+        $scope.data = {
+          grade: 'grade-a'
+        };
+
+        $scope.gradeChange = function(grade) {
+          document.body.className = grade;
+        };
+
         $scope.range = [];
         for (var i=0; i<150; i++) $scope.range.push(i);
 

diff --git a/scss/_menu.scss b/scss/_menu.scss
@@ -24,6 +24,15 @@
   box-shadow: $menu-side-shadow;
 }
 
+.grade-b .menu-content,
+.grade-c .menu-content {
+  right: -1px;
+  left: -1px;
+  border-right: 1px solid #ccc;
+  border-left: 1px solid #ccc;
+  box-shadow: none;
+}
+
 .menu-left { 
   left: 0; 
 }