blob: d2aed40c891166f39a6a891dd757abc9fa42a487 [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';
export const htmlTemplate = html`
<style include="shared-styles">
/**
* ALERT: DO NOT ADD TRANSITION PROPERTIES WITHOUT PROPERLY UNDERSTANDING
* HOW THEY ARE USED IN THE CODE.
*/
:host([toast]) {
background-color: var(--tooltip-background-color);
bottom: 1.25rem;
border-radius: var(--border-radius);
box-shadow: var(--elevation-level-2);
color: var(--view-background-color);
left: 1.25rem;
position: fixed;
transform: translateY(5rem);
transition: transform var(--gr-alert-transition-duration, 80ms) ease-out;
z-index: 1000;
}
:host([shown]) {
transform: translateY(0);
}
/**
* NOTE: To avoid style being overwritten by outside of the shadow DOM
* (as outside styles always win), .content-wrapper is introduced as a
* wrapper around main content to have better encapsulation, styles that
* may be affected by outside should be defined on it.
* In this case, \`padding:0px\` is defined in main.css for all elements
* with the universal selector: *.
*/
.content-wrapper {
padding: var(--spacing-l) var(--spacing-xl);
}
.text {
color: var(--tooltip-text-color);
display: inline-block;
max-height: 10rem;
max-width: 80vw;
vertical-align: bottom;
word-break: break-all;
}
.action {
color: var(--link-color);
font-weight: var(--font-weight-bold);
margin-left: var(--spacing-l);
text-decoration: none;
--gr-button: {
padding: 0;
}
}
</style>
<div class="content-wrapper">
<span class="text">[[text]]</span>
<gr-button
link=""
class="action"
hidden$="[[_hideActionButton]]"
on-click="_handleActionTap"
>[[actionText]]</gr-button
>
</div>
`;