mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
110 lines
2.5 KiB
SCSS
110 lines
2.5 KiB
SCSS
@import "./header";
|
|
@import "./header.ios.vars";
|
|
|
|
// iOS Header
|
|
// --------------------------------------------------
|
|
|
|
.header-ios ion-toolbar:last-of-type {
|
|
--border-width: 0 0 #{$hairlines-width};
|
|
}
|
|
|
|
@supports (backdrop-filter: blur(0)) {
|
|
.header-background {
|
|
@include position(0, 0, 0, 0);
|
|
|
|
position: absolute;
|
|
|
|
backdrop-filter: $header-ios-translucent-filter;
|
|
}
|
|
.header-translucent-ios ion-toolbar {
|
|
--opacity: .8;
|
|
}
|
|
|
|
/**
|
|
* Disable the saturation otherwise it distorts the content
|
|
* background color when large header is not collapsed
|
|
*/
|
|
.header-collapse-condense-inactive .header-background {
|
|
backdrop-filter: blur($header-ios-blur);
|
|
}
|
|
}
|
|
|
|
.header-ios.ion-no-border ion-toolbar:last-of-type {
|
|
--border-width: 0;
|
|
}
|
|
|
|
// iOS Header - Collapse Fade
|
|
// --------------------------------------------------
|
|
.header-collapse-fade ion-toolbar {
|
|
--opacity-scale: inherit;
|
|
}
|
|
|
|
// iOS Header - Collapse Condense
|
|
// --------------------------------------------------
|
|
.header-collapse-condense {
|
|
z-index: 9;
|
|
}
|
|
|
|
.header-collapse-condense ion-toolbar {
|
|
position: sticky;
|
|
top: 0;
|
|
}
|
|
|
|
.header-collapse-condense ion-toolbar:first-of-type {
|
|
padding-top: 7px;
|
|
|
|
z-index: 1;
|
|
}
|
|
|
|
/**
|
|
* Large title toolbar should just use the content background
|
|
* since it needs to blend in with the header above it.
|
|
*/
|
|
.header-collapse-condense ion-toolbar {
|
|
--background: var(--ion-background-color, #fff);
|
|
|
|
z-index: 0;
|
|
}
|
|
|
|
.header-collapse-condense ion-toolbar:last-of-type {
|
|
--border-width: 0px;
|
|
}
|
|
|
|
.header-collapse-condense ion-toolbar ion-searchbar {
|
|
height: 48px;
|
|
|
|
padding-top: 0px;
|
|
padding-bottom: 13px;
|
|
}
|
|
|
|
|
|
.header-collapse-main {
|
|
--opacity-scale: 1;
|
|
}
|
|
|
|
.header-collapse-main ion-toolbar {
|
|
--opacity-scale: inherit;
|
|
}
|
|
|
|
.header-collapse-main ion-toolbar.in-toolbar ion-title,
|
|
.header-collapse-main ion-toolbar.in-toolbar ion-buttons {
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
|
|
.header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-title,
|
|
.header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-buttons.buttons-collapse {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/**
|
|
* There is a bug in Safari where changing
|
|
* the opacity of an element in a scrollable container
|
|
* while rubber-banding causes the scroll position
|
|
* to jump to the top
|
|
*/
|
|
.header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-title,
|
|
.header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-buttons.buttons-collapse {
|
|
visibility: hidden;
|
|
}
|