mirror of
https://github.com/futurepress/epub.js.git
synced 2025-10-05 15:32:55 +02:00
90 lines
2.4 KiB
HTML
90 lines
2.4 KiB
HTML
<!--
|
|
Copyright 2013 The Polymer Authors. All rights reserved.
|
|
Use of this source code is governed by a BSD-style
|
|
license that can be found in the LICENSE file.
|
|
-->
|
|
<!--
|
|
/**
|
|
* @module Polymer Elements
|
|
*/
|
|
/**
|
|
* g-toolbar is a horizontal bar containing elements that can perform actions.
|
|
*
|
|
* Example:
|
|
*
|
|
* <g-toolbar>
|
|
* <g-icon-button src="menu.png" on-click="menuAction"></g-icon-button>
|
|
* <div class="flex">Title</div>
|
|
* <g-icon-button src="more.png" on-click="moreAction"></g-icon-button>
|
|
* </g-toolbar>
|
|
*
|
|
* @class g-toolbar
|
|
*/
|
|
-->
|
|
<polymer-element name="g-toolbar" attributes="responsive">
|
|
<template>
|
|
<style>
|
|
.toolbar {
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
-webkit-box-align: center;
|
|
-webkit-align-items: center;
|
|
align-items: center;
|
|
min-height: 60px;
|
|
background-color: whitesmoke;
|
|
box-shadow: inset 0px 0px 3px rgba(255, 255, 255, 1);
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.28);
|
|
}
|
|
|
|
/* toolbars can be made plain and nested toolbars are unstyled by default */
|
|
/* TODO(ffu): use :scope when it is available */
|
|
.toolbar[responsive=true] {
|
|
box-shadow: none;
|
|
border-bottom: 0;
|
|
}
|
|
|
|
/*@polyfill .toolbar > *:not(g-toolbar) */
|
|
::-webkit-distributed(:not(g-toolbar)) {
|
|
margin: 0 10px;
|
|
}
|
|
|
|
/*@polyfill .toolbar > .flex */
|
|
::-webkit-distributed(.flex) {
|
|
-webkit-box-flex: 1;
|
|
-webkit-flex: 1;
|
|
flex: 1;
|
|
}
|
|
|
|
/* TODO(ffu): ad hoc, replace with a more thoughtful set of responsive rules */
|
|
@media screen and (max-width: 800px) {
|
|
.toolbar[responsive=true] {
|
|
position: fixed;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 1;
|
|
background-color: whitesmoke;
|
|
border: 0;
|
|
border-top: 1px solid rgba(0, 0, 0, 0.28);
|
|
}
|
|
|
|
/*@polyfill .toolbar > *.hidden-narrow */
|
|
::-webkit-distributed(.hidden-narrow) {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|
|
<div class="toolbar" responsive="{{responsive}}">
|
|
<content></content>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
Polymer('g-toolbar', {
|
|
responsive: false,
|
|
ready: function() {
|
|
this.setAttribute('touch-action', 'none');
|
|
}
|
|
});
|
|
</script>
|
|
</polymer-element>
|