Fixed #84 - side menu shadow

This commit is contained in:
Max Lynch
2013-11-06 20:49:15 -06:00
parent d9478a4bae
commit 0fc1731b1d
6 changed files with 28 additions and 14 deletions

31
dist/css/ionic.css vendored
View File

@ -2013,7 +2013,7 @@ sub {
fieldset { fieldset {
margin: 0 2px; margin: 0 2px;
padding: 0.35em 0.625em 0.75em; 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. * 1. Correct `color` not being inherited in IE 8/9.
@ -2359,13 +2359,13 @@ address {
font-style: normal; font-style: normal;
line-height: 1.42857; } line-height: 1.42857; }
a.subdued { a.subduedΓÇÄ {
padding-right: 10px; padding-right: 10px;
color: #555555; color: #555555;
text-decoration: none; } text-decoration: none; }
a.subdued:hover { a.subduedΓÇÄ:hover {
text-decoration: none; } text-decoration: none; }
a.subdued:last-child { a.subduedΓÇÄ:last-child {
padding-right: 0; } padding-right: 0; }
.action-sheet { .action-sheet {
@ -2858,6 +2858,9 @@ a.subdued {
background-color: #fff; background-color: #fff;
-webkit-overflow-scrolling: touch; } -webkit-overflow-scrolling: touch; }
.menu-content {
box-shadow: -1px 0px 3px rgba(0, 0, 0, 0.2), 1px 0px 3px rgba(0, 0, 0, 0.2); }
.menu-left { .menu-left {
left: 0; } left: 0; }
@ -3662,7 +3665,7 @@ input[type="file"] {
line-height: 34px; } line-height: 34px; }
select { select {
border: 1px solid #cccccc; border: 1px solid #ccc;
background-color: white; } background-color: white; }
select[multiple], select[multiple],
@ -3717,7 +3720,7 @@ input[type="checkbox"][readonly] {
border-radius: 50%; border-radius: 50%;
background: white; background: white;
content: ' '; content: ' ';
transition: background-color 0.1s ease-in-out; } transition: background-color .1s ease-in-out; }
/* the checkmark within the box */ /* the checkmark within the box */
.checkbox input:after { .checkbox input:after {
@ -3732,7 +3735,7 @@ input[type="checkbox"][readonly] {
border-right: 0; border-right: 0;
content: ' '; content: ' ';
opacity: 0; opacity: 0;
transition: opacity 0.05s ease-in-out; transition: opacity .05s ease-in-out;
-webkit-transform: rotate(-45deg); -webkit-transform: rotate(-45deg);
transform: rotate(-45deg); } transform: rotate(-45deg); }
@ -4148,7 +4151,7 @@ input[type="range"] {
.button-icon:active, .button-icon.active { .button-icon:active, .button-icon.active {
background: none; background: none;
box-shadow: none; box-shadow: none;
text-shadow: 0px 0px 10px white; } text-shadow: 0px 0px 10px #fff; }
.padding > .button.block:first-child { .padding > .button.block:first-child {
margin-top: 0; } margin-top: 0; }
@ -4762,9 +4765,9 @@ a.button {
line-height: 1; line-height: 1;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-animation: spin 0.75s linear infinite; -webkit-animation: spin .75s linear infinite;
-moz-animation: spin 0.75s linear infinite; -moz-animation: spin .75s linear infinite;
animation: spin 0.75s linear infinite; } animation: spin .75s linear infinite; }
.ion-loading:before { .ion-loading:before {
content: "\e144"; } content: "\e144"; }
@ -4777,9 +4780,9 @@ a.button {
line-height: 1; line-height: 1;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-animation: spin 0.75s linear infinite; -webkit-animation: spin .75s linear infinite;
-moz-animation: spin 0.75s linear infinite; -moz-animation: spin .75s linear infinite;
animation: spin 0.75s linear infinite; } animation: spin .75s linear infinite; }
.ion-refreshing:before { .ion-refreshing:before {
content: "\e144"; } content: "\e144"; }

View File

@ -1028,6 +1028,8 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture'])
compile: function(element, attr, transclude) { compile: function(element, attr, transclude) {
return function($scope, $element, $attr, sideMenuCtrl) { return function($scope, $element, $attr, sideMenuCtrl) {
$element.addClass('menu-content');
Gesture.on('drag', function(e) { Gesture.on('drag', function(e) {
sideMenuCtrl._handleDrag(e); sideMenuCtrl._handleDrag(e);
}, $element[0]); }, $element[0]);

View File

@ -63,6 +63,8 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture'])
compile: function(element, attr, transclude) { compile: function(element, attr, transclude) {
return function($scope, $element, $attr, sideMenuCtrl) { return function($scope, $element, $attr, sideMenuCtrl) {
$element.addClass('menu-content');
Gesture.on('drag', function(e) { Gesture.on('drag', function(e) {
sideMenuCtrl._handleDrag(e); sideMenuCtrl._handleDrag(e);
}, $element[0]); }, $element[0]);

View File

@ -19,6 +19,10 @@
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
.menu-content {
box-shadow: $menu-side-shadow;
}
.menu-left { left: 0; } .menu-left { left: 0; }
.menu-right { right: 0; } .menu-right { right: 0; }

View File

@ -93,6 +93,7 @@ body, .ionic-body {
bottom: 84px; bottom: 84px;
} }
// A full screen section with a solid background
.pane { .pane {
position: fixed; position: fixed;
top: 0; top: 0;

View File

@ -436,6 +436,8 @@ $menu-inset-border-color: #bbb;
$menu-width: 270px; $menu-width: 270px;
$menu-animation-speed: 200ms; $menu-animation-speed: 200ms;
$menu-side-shadow: -1px 0px 3px rgba(0, 0, 0, 0.2), 1px 0px 3px rgba(0,0,0,0.2);
$split-pane-menu-width: 320px; $split-pane-menu-width: 320px;
$split-pane-menu-border-color: #eee; $split-pane-menu-border-color: #eee;