mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
116 lines
1.8 KiB
SCSS
116 lines
1.8 KiB
SCSS
@import "../../themes/ionic.globals";
|
|
|
|
// Menu
|
|
// --------------------------------------------------
|
|
|
|
$menu-width: 304px !default;
|
|
$menu-small-width: $menu-width - 40px !default;
|
|
|
|
|
|
ion-menu {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
|
|
display: none;
|
|
|
|
contain: strict;
|
|
}
|
|
|
|
ion-menu.show-menu {
|
|
display: block;
|
|
}
|
|
|
|
|
|
.menu-inner {
|
|
position: absolute;
|
|
top: 0;
|
|
right: auto;
|
|
bottom: 0;
|
|
left: 0;
|
|
|
|
display: block;
|
|
|
|
width: $menu-width;
|
|
height: 100%;
|
|
|
|
transform: translate3d(-9999px, 0, 0);
|
|
|
|
contain: strict;
|
|
}
|
|
|
|
.menu-inner > ion-header,
|
|
.menu-inner > ion-content,
|
|
.menu-inner > ion-footer {
|
|
position: absolute;
|
|
}
|
|
|
|
ion-menu[side=right] > .menu-inner {
|
|
right: 0;
|
|
left: auto;
|
|
}
|
|
|
|
ion-menu ion-backdrop {
|
|
z-index: -1;
|
|
display: none;
|
|
|
|
opacity: .01;
|
|
}
|
|
|
|
.menu-content {
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
.menu-content-open {
|
|
cursor: pointer;
|
|
|
|
touch-action: manipulation;
|
|
}
|
|
|
|
.menu-content-open ion-pane,
|
|
.menu-content-open ion-content,
|
|
.menu-content-open .toolbar {
|
|
// the containing element itself should be clickable but
|
|
// everything inside of it should not clickable when menu is open
|
|
pointer-events: none;
|
|
}
|
|
|
|
|
|
@media (max-width: 340px) {
|
|
|
|
.menu-inner {
|
|
width: $menu-small-width;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
// Menu Reveal
|
|
// --------------------------------------------------
|
|
// The content slides over to reveal the menu underneath.
|
|
// The menu itself, which is under the content, does not move.
|
|
|
|
ion-menu[type=reveal] {
|
|
z-index: 0;
|
|
}
|
|
|
|
ion-menu[type=reveal].show-menu .menu-inner {
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
|
|
// Menu Overlay
|
|
// --------------------------------------------------
|
|
// The menu slides over the content. The content
|
|
// itself, which is under the menu, does not move.
|
|
|
|
ion-menu[type=overlay] {
|
|
z-index: $z-index-menu-overlay;
|
|
}
|
|
|
|
ion-menu[type=overlay] .show-backdrop {
|
|
display: block;
|
|
}
|