app-layout

PolymerElements

by SlashBunny

HTML

<!--<base href="https://raw-dot-custom-elements.appspot.com/PolymerElements/app-layout/v2.0.1/app-layout/">-->
<base href="https://polygit.org/polymer+2.0.1/app-*+PolymerElements+v2.0.1/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="app-layout/demo/sample-content.html">
<link rel="import" href="app-layout/app-layout.html">
<link rel="import" href="iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="iron-icons/iron-icons.html">
<link rel="import" href="paper-icon-button/paper-icon-button.html">
<link rel="import" href="paper-progress/paper-progress.html">

<app-header reveals>
  <app-toolbar>
    <paper-icon-button icon="menu" onclick="drawer.toggle()"></paper-icon-button>
    <div main-title>My app</div>
    <paper-icon-button icon="delete"></paper-icon-button>
    <paper-icon-button icon="search"></paper-icon-button>
    <paper-icon-button icon="close"></paper-icon-button>
    <paper-progress value="10" indeterminate bottom-item></paper-progress>
  </app-toolbar>
</app-header>
<app-drawer id="drawer" swipe-open></app-drawer>
<sample-content size="10"></sample-content>

CSS

html,
body {
  margin: 0;
  font-family: 'Roboto', 'Noto', sans-serif;
  -webkit-font-smoothing: antialiased;
  background: #f1f1f1;
  max-height: 368px;
}

app-toolbar {
  background-color: #4285f4;
  color: #fff;
}

paper-icon-button {
  --paper-icon-button-ink-color: white;
}

paper-icon-button + [main-title] {
  margin-left: 24px;
}

paper-progress {
  display: block;
  width: 100%;
  --paper-progress-active-color: rgba(255, 255, 255, 0.5);
  --paper-progress-container-color: transparent;
}

app-header {
  @apply --layout-fixed-top;
  color: #fff;
  --app-header-background-rear-layer: {
    background-color: #ef6c00;
  }
  ;
}

app-drawer {
  --app-drawer-scrim-background: rgba(0, 0, 100, 0.8);
  --app-drawer-content-container: {
    background-color: #B0BEC5;
  }
}

sample-content {
  padding-top: 64px;
}