chrome/browser/resources/chromeos/login/md_header_bar.html

<link rel="import" href="chrome://resources/polymer/v1_0/iron-iconset-svg/iron-iconset-svg.html">

<iron-iconset-svg name="header-bar-10" size="10">
  <svg>
    <defs>
      <g id="show-apps" fill-rule="evenodd">
        <path d="M1,3 L3,3 L3,1 L1,1 L1,3 Z M4,9 L6,9 L6,7 L4,7 L4,9 Z M1,9 L3,9 L3,7 L1,7 L1,9 Z M1,6 L3,6 L3,4 L1,4 L1,6 Z M4,6 L6,6 L6,4 L4,4 L4,6 Z M7,1 L7,3 L9,3 L9,1 L7,1 Z M4,3 L6,3 L6,1 L4,1 L4,3 Z M7,6 L9,6 L9,4 L7,4 L7,6 Z M7,9 L9,9 L9,7 L7,7 L7,9 Z">
        </path>
      </g>
    </defs>
  </svg>
</iron-iconset-svg>

<iron-iconset-svg name="header-bar-20" size="20">
  <svg>
    <defs>
      <g id="shutdown" fill-rule="evenodd">
        <path d="M10.834 2.5H9.167v8.334h1.667V2.5zm4.025 1.808l-1.185 1.184C14.99 6.55 15.834 8.175 15.834 10c0 3.225-2.61 5.834-5.834 5.834-3.225 0-5.833-2.61-5.833-5.834 0-1.825.842-3.45 2.15-4.516L5.14 4.31C3.526 5.683 2.5 7.716 2.5 9.998c0 4.141 3.358 7.5 7.5 7.5 4.141 0 7.5-3.358 7.5-7.5 0-2.284-1.025-4.316-2.642-5.69z">
        </path>
      </g>
      <g id="show-apps" fill-rule="evenodd">
        <path d="M3,7 L7,7 L7,3 L3,3 L3,7 Z M8,17 L12,17 L12,13 L8,13 L8,17 Z M3,17 L7,17 L7,13 L3,13 L3,17 Z M3,12 L7,12 L7,8 L3,8 L3,12 Z M8,12 L12,12 L12,8 L8,8 L8,12 Z M13,3 L13,7 L17,7 L17,3 L13,3 Z M8,7 L12,7 L12,3 L8,3 L8,7 Z M13,12 L17,12 L17,8 L13,8 L13,12 Z M13,17 L17,17 L17,13 L13,13 L13,17 Z">
        </path>
      </g>
      <g id="browse-as-guest" fill-rule="evenodd">
        <path d="M10 2c-4.416 0-8 3.584-8 8s3.584 8 8 8 8-3.584 8-8-3.584-8-8-8zm0 2.4c1.328 0 2.4 1.072 2.4 2.4 0 1.328-1.072 2.4-2.4 2.4-1.328 0-2.4-1.072-2.4-2.4 0-1.328 1.072-2.4 2.4-2.4zm-5 8.79c.025-1.74 3.334-2.69 5-2.69 1.66 0 4.975.952 5 2.69-1.075 1.693-2.916 2.81-5 2.81-2.083 0-3.925-1.117-5-2.81z">
        </path>
      </g>
      <g id="add-person" fill-rule="evenodd">
        <path d="M7.6 9.8c-.552 0-1 .448-1 1s.448 1 1 1 1-.448 1-1-.448-1-1-1zm4.8 0c-.552 0-1 .448-1 1s.448 1 1 1 1-.448 1-1-.448-1-1-1zM10 2c-4.416 0-8 3.584-8 8s3.584 8 8 8 8-3.584 8-8-3.584-8-8-8zm0 14.4c-3.528 0-6.4-2.872-6.4-6.4 0-.232.016-.464.04-.688 1.888-.84 3.384-2.384 4.168-4.296C9.256 7.064 11.64 8.4 14.336 8.4c.624 0 1.224-.072 1.8-.208.168.568.264 1.176.264 1.808 0 3.528-2.872 6.4-6.4 6.4z">
        </path>
      </g>
      <g id="more-settings" fill-rule="evenodd">
        <path d="M10 6c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zm0 6c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zm0 6c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z">
        </path>
      </g>
      <g id="sign-out" fill-rule="evenodd">
         <path d="M9.5 15l5-5-5-5L8 6.5 10.5 9H2v2h8.5L8 13.5 9.5 15zM4 2c-.987 0-2 1.022-2 2v3.067h2V4h12v12H4v-3H2v3c0 .978 1.013 2 2 2h12c.978 0 2-1.022 2-2V4c0-1-1.022-2-2-2H4z">
         </path>
      </g>
      <g id="cancel" fill-rule="evenodd">
        <path d="M9.72 5.89c-2.2 0-4.194.88-5.73 2.31L1 5v8h7.474L5.468 9.782c1.154-1.03 2.624-1.67 4.252-1.67 2.94 0 5.44 2.052 6.312 4.888L18 12.307C16.846 8.582 13.582 5.89 9.72 5.89z">
        </path>
      </g>
    </defs>
  </svg>
</iron-iconset-svg>

<iron-iconset-svg name="header-bar-40" size="40">
  <svg>
    <defs>
      <g id="shutdown" fill-rule="evenodd">
        <path d="M21.667 5h-3.334v16.667h3.334V5zm8.05 3.617l-2.367 2.366C29.983 13.1 31.667 16.35 31.667 20c0 6.45-5.217 11.667-11.667 11.667S8.333 26.45 8.333 20c0-3.65 1.684-6.9 4.3-9.033l-2.35-2.35C7.05 11.367 5 15.433 5 20c0 8.283 6.717 15 15 15 8.283 0 15-6.717 15-15 0-4.567-2.05-8.633-5.283-11.383z">
        </path>
      </g>
      <g id="browse-as-guest" fill-rule="evenodd">
        <path d="M20 4C11.168 4 4 11.168 4 20s7.168 16 16 16 16-7.168 16-16S28.832 4 20 4zm0 4.8c2.656 0 4.8 2.144 4.8 4.8 0 2.656-2.144 4.8-4.8 4.8-2.656 0-4.8-2.144-4.8-4.8 0-2.656 2.144-4.8 4.8-4.8zM10 26.378C10.05 22.903 16.667 21 20 21c3.317 0 9.95 1.903 10 5.378C27.85 29.765 24.167 32 20 32s-7.85-2.235-10-5.622z">
        </path>
      </g>
      <g id="add-person" fill-rule="evenodd">
        <path d="M15.2 19.6c-1.104 0-2 .896-2 2s.896 2 2 2 2-.896 2-2-.896-2-2-2zm9.6 0c-1.104 0-2 .896-2 2s.896 2 2 2 2-.896 2-2-.896-2-2-2zM20 4C11.168 4 4 11.168 4 20s7.168 16 16 16 16-7.168 16-16S28.832 4 20 4zm0 28.8c-7.056 0-12.8-5.744-12.8-12.8 0-.464.032-.928.08-1.376 3.776-1.68 6.768-4.768 8.336-8.592 2.896 4.096 7.664 6.768 13.056 6.768 1.248 0 2.448-.144 3.6-.416.336 1.136.528 2.352.528 3.616 0 7.056-5.744 12.8-12.8 12.8z">
        </path>
      </g>
      <g id="more-settings" fill-rule="evenodd">
        <path d="M20 14c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm0 9c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm0 9c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3z">
        </path>
      </g>
      <g id="sign-out" fill-rule="evenodd">
        <path d="M19.48 29L28 20.5 19.48 12 17 14.5l4.5 4.5H5v3h16.5L17 26.5l2.48 2.5zM8.334 5C6.483 5 5 6.5 5 8.333V15h3V8.006h24v24.02H8V26H5v5.667C5 33.5 6.483 35 8.333 35h23.334C33.5 35 35 33.5 35 31.667V8.333C35 6.5 33.5 5 31.667 5H8.333z">
        </path>
      </g>
      <g id="cancel" fill-rule="evenodd">
        <path d="M20.44 12.667c-4.4 0-8.388 1.65-11.46 4.333L3 11v15h14.95l-6.014-6.033c2.31-1.934 5.25-3.134 8.504-3.134 5.88 0 10.88 3.85 12.624 9.167L37 24.7c-2.31-6.983-8.836-12.033-16.56-12.033z">
        </path>
      </g>
    </defs>
  </svg>
</iron-iconset-svg>

<link rel="stylesheet" href="oobe_flex_layout.css">
<div id="login-header-bar" hidden
    class="login-header-bar-hidden layout horizontal">
  <div id="shutdown-header-bar-item" class="header-bar-item">
    <button id="shutdown-button" class="custom-appearance layout vertical">
      <div class="flex layout horizontal center">
        <hd-iron-icon
            icon1x="header-bar-20:shutdown" icon2x="header-bar-40:shutdown">
        </hd-iron-icon>
        <div i18n-content="shutDown"></div>
      </div>
    </button>
  </div>
  <div id="restart-header-bar-item" class="header-bar-item">
    <button id="restart-button" class="custom-appearance layout vertical">
      <div class="flex layout horizontal center">
        <hd-iron-icon
            icon1x="header-bar-20:shutdown" icon2x="header-bar-40:shutdown">
        </hd-iron-icon>
        <div i18n-content="shutDown"></div>
      </div>
    </button>
  </div>
  <div id="apps-header-bar-item" class="header-bar-item" hidden>
    <button id="show-apps-button" class="custom-appearance layout vertical">
      <div class="flex layout horizontal center">
        <hd-iron-icon
            icon1x="header-bar-10:show-apps" icon2x="header-bar-20:show-apps">
        </hd-iron-icon>
        <div i18n-content="showApps"></div>
      </div>
    </button>
  </div>
  <div id="guest-user-header-bar-item" class="header-bar-item" hidden>
    <button id="guest-user-button" class="custom-appearance layout vertical">
      <div class="flex layout horizontal center">
        <hd-iron-icon
            icon1x="header-bar-20:browse-as-guest" icon2x="header-bar-40:browse-as-guest">
        </hd-iron-icon>
        <div i18n-content="browseAsGuest"></div>
      </div>
    </button>
  </div>
  <div id="add-user-header-bar-item" class="header-bar-item" hidden>
    <button id="add-user-button" class="custom-appearance layout vertical">
      <div class="flex layout horizontal center">
        <hd-iron-icon
            icon1x="header-bar-20:add-person" icon2x="header-bar-40:add-person">
        </hd-iron-icon>
        <div i18n-content="addUser"></div>
      </div>
    </button>
  </div>
  <div id="more-settings-header-bar-item" class="header-bar-item">
    <button id="more-settings-button" class="custom-appearance layout vertical"
        i18n-values="aria-label:moreOptions">
      <hd-iron-icon
          icon1x="header-bar-20:more-settings" icon2x="header-bar-40:more-settings">
      </hd-iron-icon>
    </button>
  </div>
  <div id="sign-out-user-item" class="header-bar-item" hidden>
    <button id="sign-out-user-button" class="custom-appearance layout vertical">
      <div class="flex layout horizontal center">
        <hd-iron-icon
            icon1x="header-bar-20:sign-out" icon2x="header-bar-40:sign-out">
        </hd-iron-icon>
        <div i18n-content="signOutUser"></div>
      </div>
    </button>
  </div>
  <div id="cancel-multiple-sign-in-item" class="header-bar-item" hidden>
    <button id="cancel-multiple-sign-in-button"
        class="custom-appearance layout vertical">
      <div class="flex layout horizontal center">
        <hd-iron-icon
            icon1x="header-bar-20:cancel" icon2x="header-bar-40:cancel">
        </hd-iron-icon>
        <div i18n-content="cancel"></div>
      </div>
    </button>
  </div>
</div>