blob: 0525f73d2f793a0072a0ba9f4d297adfad9887ee [file] [log] [blame]
<link rel="import" href="../polymer/polymer.html">
<dom-module id="chops-header">
<template>
<style>
:host {
color: var(--chops-header-text-color);
box-sizing: border-box;
background: hsl(221, 67%, 92%);
font-size: 14px;
width: 100%;
height: 50px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
z-index: 100;
}
a {
color: var(--chops-header-text-color);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
#headerTitle {
font-size: 18px;
display: flex;
align-items: center;
@apply --chops-header-title-theme;
}
#headerTitle img {
height: 32px;
width: 32px;
font-size: 10px;
overflow: hidden;
margin: 0;
}
#headerTitle small {
font-size: 14px;
}
#headerTitleText {
display: flex;
align-items: baseline;
}
#headerTitleTextMain {
padding: 0 8px;
}
.header-section {
padding: 0.5em 16px;
display: flex;
align-items: center;
}
@media (max-width: 840px) {
.header-section {
font-size: 0.8em;
min-width: 10%;
text-align: left;
}
}
</style>
<div class="header-section">
<slot name="before-header"></slot>
<div id="headerTitle">
<template is="dom-if" if="[[logoSrc]]">
<a href="/">
<img src$="[[logoSrc]]" alt$="[[appTitle]] Logo" title$="[[appTitle]] Logo" />
</a>
</template>
<span id="headerTitleText">
<a id="headerTitleTextMain" href="/">
[[appTitle]]
</a>
<small>
<slot name="subheader"></slot>
</small>
</span>
</div>
</div>
<div class="header-section">
<slot></slot>
</div>
</template>
<script>
'use strict';
/**
* `chops-header` is a shared header element for ChOps frontends to use.
*
* This element contains two slots for clients to add content. The default
* slot holds content in the header section to the right of the title. And
* the 'subheader' slot holds content which appears next to the title.
*
*
* @customElement
* @polymer
* @demo /demo/chops-header_demo.html
*/
class ChopsHeader extends Polymer.Element {
static get is() {
return 'chops-header';
}
static get properties() {
return {
/* String for the title of the application. */
appTitle: {
type: String,
value: 'Chops App',
},
/* The home URL for the application. Defaults to '/'. */
homeUrl: {
type: String,
value: '/',
},
/* URL for the image location of the application's logo. No logo is
* shown if this is not specified. */
logoSrc: String,
// TODO(zhangtiff): Also make the :host element extend the "header"
// tag once browsers implement extending native elements with web
// components.
role: {
type: String,
reflectToAttribute: true,
},
};
}
}
customElements.define(ChopsHeader.is, ChopsHeader);
</script>
</dom-module>