blob: 51de376db9774b4b4495f92b3ae540d448c8a772 [file] [log] [blame]
Copybara854996b2021-09-07 19:36:02 +00001// Copyright 2019 The Chromium Authors. All rights reserved.
2// Use of this source code is governed by a BSD-style license that can be
3// found in the LICENSE file.
4
5import {LitElement, html, css} from 'lit-element';
6
7
8/**
9 * `<mr-warning>`
10 *
11 * A container for showing warnings.
12 *
13 */
14export class MrWarning extends LitElement {
15 /** @override */
16 static get styles() {
17 return css`
18 :host {
19 display: flex;
20 align-items: center;
21 flex-direction: row;
22 justify-content: flex-start;
23 box-sizing: border-box;
24 width: 100%;
25 margin: 0.5em 0;
26 padding: 0.25em 8px;
27 border: 1px solid #FF6F00;
28 border-radius: 4px;
29 background: #FFF8E1;
30 }
31 :host([hidden]) {
32 display: none;
33 }
34 i.material-icons {
35 color: #FF6F00;
36 margin-right: 4px;
37 }
38 `;
39 }
40
41 /** @override */
42 render() {
43 return html`
44 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
45 <i class="material-icons">warning</i>
46 <slot></slot>
47 `;
48 }
49}
50
51customElements.define('mr-warning', MrWarning);