onsenui/css/css-components-src/components/combination.css

HTML5 Mobile Framework & UI Components

/* ------- */
/* 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;
}