mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 19:57:22 +08:00
98 lines
1.5 KiB
SCSS
98 lines
1.5 KiB
SCSS
@import "../../globals.core";
|
|
|
|
// Toolbar
|
|
// --------------------------------------------------
|
|
|
|
$toolbar-order: (
|
|
backButton: 10,
|
|
menu-toggle-left: 20,
|
|
content: 30,
|
|
left: 40,
|
|
right: 50,
|
|
menu-toggle-right: 60,
|
|
);
|
|
|
|
|
|
.toolbar {
|
|
position: relative;
|
|
z-index: $z-index-toolbar;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
order: $flex-order-toolbar-top;
|
|
flex: 0;
|
|
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.toolbar-background {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: $z-index-toolbar-background;
|
|
|
|
border: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.toolbar-content {
|
|
display: block;
|
|
flex: 1;
|
|
order: map-get($toolbar-order, content);
|
|
}
|
|
|
|
.toolbar[position=bottom] {
|
|
order: $flex-order-toolbar-bottom;
|
|
}
|
|
|
|
ion-title {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.toolbar-title {
|
|
display: block;
|
|
width: 100%;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
|
|
ion-nav-items {
|
|
display: block;
|
|
margin: 0 0.2rem;
|
|
pointer-events: none;
|
|
order: map-get($toolbar-order, left);
|
|
}
|
|
|
|
ion-nav-items[secondary] {
|
|
order: map-get($toolbar-order, right);
|
|
}
|
|
|
|
ion-nav-items button,
|
|
ion-nav-items a,
|
|
ion-nav-items input,
|
|
ion-nav-items textarea,
|
|
ion-nav-items div {
|
|
pointer-events: auto;
|
|
}
|
|
|
|
// TODO this is a temp hack to fix segment overlapping ion-nav-item
|
|
ion-nav-items,
|
|
[menu-toggle] {
|
|
z-index: 99;
|
|
}
|
|
|
|
// Navbar
|
|
// --------------------------------------------------
|
|
|
|
ion-navbar.toolbar {
|
|
display: flex;
|
|
}
|