mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 12:29:55 +08:00
109 lines
1.6 KiB
SCSS
109 lines
1.6 KiB
SCSS
@import "../../globals.core";
|
|
|
|
// Toolbar
|
|
// --------------------------------------------------
|
|
|
|
|
|
.toolbar {
|
|
position: relative;
|
|
z-index: $z-index-toolbar;
|
|
|
|
display: flex;
|
|
overflow: hidden;
|
|
|
|
flex: 0;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
order: $flex-order-toolbar-top;
|
|
|
|
width: 100%;
|
|
}
|
|
|
|
.toolbar-background {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: $z-index-toolbar-background;
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
border: 0;
|
|
transform: translateZ(0);
|
|
|
|
pointer-events: none;
|
|
}
|
|
|
|
.toolbar[position=bottom] {
|
|
order: $flex-order-toolbar-bottom;
|
|
}
|
|
|
|
ion-title {
|
|
display: flex;
|
|
|
|
flex: 1;
|
|
align-items: center;
|
|
|
|
transform: translateZ(0);
|
|
}
|
|
|
|
.toolbar-title {
|
|
display: block;
|
|
overflow: hidden;
|
|
|
|
width: 100%;
|
|
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
ion-buttons {
|
|
display: block;
|
|
|
|
margin: 0 .2rem;
|
|
|
|
transform: translateZ(0);
|
|
|
|
pointer-events: none;
|
|
}
|
|
|
|
ion-buttons button,
|
|
ion-buttons a,
|
|
ion-buttons input,
|
|
ion-buttons textarea,
|
|
ion-buttons div {
|
|
pointer-events: auto;
|
|
}
|
|
|
|
// Transparent Toolbar
|
|
// --------------------------------------------------
|
|
|
|
.toolbar[transparent] .toolbar-background {
|
|
border-color: transparent;
|
|
background: transparent;
|
|
}
|
|
|
|
|
|
// TODO this is a temp hack to fix segment overlapping ion-nav-item
|
|
ion-buttons,
|
|
.bar-button-menutoggle {
|
|
z-index: 99;
|
|
|
|
transform: translateZ(0);
|
|
}
|
|
|
|
// Navbar
|
|
// --------------------------------------------------
|
|
|
|
ion-navbar.toolbar {
|
|
display: flex;
|
|
|
|
opacity: 0;
|
|
transform: translateZ(0);
|
|
|
|
&.show-navbar {
|
|
opacity: 1;
|
|
}
|
|
}
|