/* ------- */ /* Default */ /* ------- */ /* All toolbar */ .toolbar { top: 0; box-sizing: border-box; padding-top: 0; } .bottom-bar { bottom: 0; box-sizing: border-box; padding-bottom: 0; } /* All page__background with a ordinal toolbar */ .toolbar+.page__background { top: var(--toolbar-height); } /* All page__content without toolbars */ .page__content { top: 0; padding-top: 0; bottom: 0; } /* All page__content with a toolbar */ .toolbar+.page__background+.page__content { top: var(--toolbar-height); padding-top: 0; } /* All page__content with a bottom-bar */ .page-with-bottom-toolbar > .page__content { bottom: 44px; } /* -------- */ /* Material */ /* -------- */ /* All page__background with a material toolbar */ .toolbar.toolbar--material+.page__background { top: var(--toolbar-material-height); } /* All page__content with a material toolbar */ .toolbar.toolbar--material+.page__background+.page__content { top: var(--toolbar-material-height); padding-top: 0; } /* -------- */ /* Others */ /* -------- */ /* All page__background with a transparent toolbar */ .toolbar.toolbar--transparent+.page__background { top: 0; } /* All page__content with a transparent cover-content toolbar and its direct descendant page_content */ .toolbar.toolbar--transparent.toolbar--cover-content+.page__background+.page__content, .toolbar.toolbar--transparent.toolbar--cover-content+.page__background+.page__content .page_content { top: 0; padding-top: var(--toolbar-height); } /* All page__content with a material transparent cover-content toolbar and its direct descendant page_content */ .toolbar.toolbar--material.toolbar--transparent.toolbar--cover-content+.page__background+.page__content, .toolbar.toolbar--material.toolbar--transparent.toolbar--cover-content+.page__background+.page__content .page_content { top: 0; padding-top: var(--toolbar-material-height); } /* -------- */ /* Tabbar */ /* -------- */ /* All top tabbar */ .tabbar--top { padding-top: 0; } /* All bottom tabbar */ .tabbar:not(.tabbar--top) { padding-bottom: 0; }