javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(sideMenu): Degrade .menu-content box-shadow w/ platform grade for animation performance

Browse Source
This commit is contained in:
Adam Bradley
2014-02-20 20:44:25 -06:00
parent b69b40c826
commit d2a0780bba
2 changed files with 23 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
js/ext/angular/test/sideMenu2.html
View File

@@ -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);

9
scss/_menu.scss
View File

@@ -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;
}