mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 11:17:19 +08:00
96 lines
1.7 KiB
SCSS
96 lines
1.7 KiB
SCSS
@import "../../ionic.globals";
|
|
|
|
// Menu
|
|
// --------------------------------------------------
|
|
|
|
$menu-width: 304px !default;
|
|
$menu-small-width: $menu-width - 40px !default;
|
|
|
|
|
|
ion-menu {
|
|
position: absolute;
|
|
top: 0;
|
|
right: auto;
|
|
bottom: 0;
|
|
left: 0;
|
|
|
|
width: $menu-width;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
transform: translate3d(-9999px, 0px, 0px);
|
|
}
|
|
|
|
ion-menu[side=right] {
|
|
right: 0;
|
|
left: auto;
|
|
}
|
|
|
|
ion-menu backdrop {
|
|
z-index: -1;
|
|
display: none;
|
|
}
|
|
|
|
.menu-content {
|
|
transform: translate3d(0px, 0px, 0px);
|
|
}
|
|
|
|
.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) {
|
|
|
|
ion-menu {
|
|
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].show-menu {
|
|
transform: translate3d(0px, 0px, 0px);
|
|
}
|
|
|
|
|
|
// 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;
|
|
left: -8px; // make up for the box-shadow hanging over on the left
|
|
|
|
backdrop {
|
|
display: block;
|
|
transform: translate3d(-9999px, 0px, 0px);
|
|
opacity: 0.01;
|
|
left: -3000px;
|
|
width: 6000px;
|
|
|
|
&.show-backdrop {
|
|
transform: translate3d(0px, 0px, 0px);
|
|
}
|
|
}
|
|
}
|
|
|
|
ion-menu[type=overlay][side=right] {
|
|
left: 8px;
|
|
}
|
|
|
|
ion-menu[type=push][side=right] {
|
|
left: 0px;
|
|
}
|