1
    2
    3
    4
    5
    6
    7
    8
    9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69


ash / webui / common / resources / page_toolbar.html [blame]

<style include="cr-shared-style">
  :host {
    align-items: center;
    background: var(--navigation-view-panel-bg-color);
    display: flex;
    height: var(--navigation-view-panel-toolbar-height, 56px);
    width: 100%;
  }

  :host-context(body.jelly-enabled) #title {
    font: var(--cros-title-1-font);
  }

  :host([is-narrow]) #leftContent {
    padding-inline-start: 14px;
  }

  :host([is-narrow]) #title {
    margin-inline-start: 8px;
  }

  :host(:not([is-narrow])) #leftContent {
    padding-inline-start: 20px;
  }

  :host([has-search][is-narrow]) #container {
    grid-template-columns: 0 1fr;
  }

  :host([has-search][is-narrow]) #mainContent {
    margin-inline-start: 48px;
  }

  #leftContent {
    align-items: center;
    display: flex;
  }

  #title {
    color: var(--cros-text-color-secondary);
    font-family: Roboto;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.25px;
  }

  #container {
    display: grid;
    grid-template-columns: var(--columns-nav);
    margin-top:12px;
    width: 100%;
  }
</style>
<div id="container">
  <div id="leftContent">
    <template is="dom-if" if="[[isNarrow]]">
      <cr-icon-button id="menuButton" class="no-overlap"
          iron-icon="cr20:menu" on-click="onMenuTap_"
          aria-label="[[title]]"
          title="[[title]]">
      </cr-icon-button>
    </template>
    <h1 id="title" part="title"
        hidden="[[shouldHideTitle_(isNarrow, hasSearch)]]">
      [[title]]
    </h1>
  </div>
  <div id="mainContent"><slot name="toolbar-main"></slot></div>
</div>