blob: b32f871bc87eaea74ac99f8a4429c1f3e2029c4c [file] [log] [blame]
/**
* @license
* Copyright (C) 2020 The Android Open Source Project
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import {html} from '@polymer/polymer/lib/utils/html-tag.js';
export const htmlTemplate = html`
<style include="shared-styles">
:host {
color: var(--primary-text-color);
display: block;
max-height: 90vh;
overflow: auto;
}
.container {
display: flex;
flex-direction: column;
max-height: 90vh;
padding: var(--spacing-xl);
}
header {
flex-shrink: 0;
padding-bottom: var(--spacing-xl);
}
main {
display: flex;
flex-shrink: 1;
width: 100%;
flex: 1;
/* IMPORTANT: required for firefox */
min-height: 0px;
}
main .overflow-container {
flex: 1;
overflow: auto;
}
footer {
display: flex;
flex-shrink: 0;
justify-content: flex-end;
padding-top: var(--spacing-xl);
}
gr-button {
margin-left: var(--spacing-l);
}
.hidden {
display: none;
}
</style>
<div class="container" on-keydown="_handleKeydown">
<header class="font-h3"><slot name="header"></slot></header>
<main>
<div class="overflow-container">
<slot name="main"></slot>
</div>
</main>
<footer>
<slot name="footer"></slot>
<gr-button
id="cancel"
class$="[[_computeCancelClass(cancelLabel)]]"
link=""
on-click="_handleCancelTap"
>
[[cancelLabel]]
</gr-button>
<gr-button
id="confirm"
link=""
primary=""
on-click="_handleConfirm"
disabled="[[disabled]]"
title$="[[confirmTooltip]]"
>
[[confirmLabel]]
</gr-button>
</footer>
</div>
`;