mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-07 15:07:13 +08:00
Fixed #84 - side menu shadow
This commit is contained in:
31
dist/css/ionic.css
vendored
31
dist/css/ionic.css
vendored
@ -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"; }
|
||||||
|
|
||||||
|
|||||||
2
dist/js/ionic-angular.js
vendored
2
dist/js/ionic-angular.js
vendored
@ -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]);
|
||||||
|
|||||||
@ -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]);
|
||||||
|
|||||||
@ -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; }
|
||||||
|
|
||||||
|
|||||||
@ -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;
|
||||||
|
|||||||
@ -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;
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user