Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(27)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: tracing/tracing/ui/base/overlay.html

Issue 3002533002: Switch tracing to new flexbox. (Closed)
Patch Set: Created 3 years, 4 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « tracing/tracing/ui/base/list_and_associated_view.css ('k') | tracing/tracing/ui/extras/about_tracing/common.css » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <!-- 2 <!--
3 Copyright (c) 2014 The Chromium Authors. All rights reserved. 3 Copyright (c) 2014 The Chromium Authors. All rights reserved.
4 Use of this source code is governed by a BSD-style license that can be 4 Use of this source code is governed by a BSD-style license that can be
5 found in the LICENSE file. 5 found in the LICENSE file.
6 --> 6 -->
7 7
8 <link rel="import" href="/tracing/base/event.html"> 8 <link rel="import" href="/tracing/base/event.html">
9 <link rel="import" href="/tracing/base/utils.html"> 9 <link rel="import" href="/tracing/base/utils.html">
10 <link rel="import" href="/tracing/ui/base/ui.html"> 10 <link rel="import" href="/tracing/ui/base/ui.html">
11 <link rel="import" href="/tracing/ui/base/utils.html"> 11 <link rel="import" href="/tracing/ui/base/utils.html">
12 12
13 <template id="overlay-template"> 13 <template id="overlay-template">
14 <style> 14 <style>
15 overlay-mask { 15 overlay-mask {
16 left: 0; 16 left: 0;
17 padding: 8px; 17 padding: 8px;
18 position: absolute; 18 position: absolute;
19 top: 0; 19 top: 0;
20 z-index: 1000; 20 z-index: 1000;
21 font-family: sans-serif; 21 font-family: sans-serif;
22 -webkit-justify-content: center; 22 -webkit-justify-content: center;
23 background: rgba(0, 0, 0, 0.8); 23 background: rgba(0, 0, 0, 0.8);
24 display: -webkit-flex; 24 display: flex;
25 height: 100%; 25 height: 100%;
26 left: 0; 26 left: 0;
27 position: fixed; 27 position: fixed;
28 top: 0; 28 top: 0;
29 width: 100%; 29 width: 100%;
30 } 30 }
31 overlay-mask:focus { 31 overlay-mask:focus {
32 outline: none; 32 outline: none;
33 } 33 }
34 overlay-vertical-centering-container { 34 overlay-vertical-centering-container {
35 -webkit-justify-content: center; 35 -webkit-justify-content: center;
36 -webkit-flex-direction: column; 36 flex-direction: column;
37 display: -webkit-flex; 37 display: flex;
38 } 38 }
39 overlay-frame { 39 overlay-frame {
40 z-index: 1100; 40 z-index: 1100;
41 background: rgb(255, 255, 255); 41 background: rgb(255, 255, 255);
42 border: 1px solid #ccc; 42 border: 1px solid #ccc;
43 margin: 75px; 43 margin: 75px;
44 display: -webkit-flex; 44 display: flex;
45 -webkit-flex-direction: column; 45 flex-direction: column;
46 min-height: 0; 46 min-height: 0;
47 } 47 }
48 title-bar { 48 title-bar {
49 -webkit-align-items: center; 49 -webkit-align-items: center;
50 -webkit-flex-direction: row; 50 flex-direction: row;
51 border-bottom: 1px solid #ccc; 51 border-bottom: 1px solid #ccc;
52 background-color: #ddd; 52 background-color: #ddd;
53 display: -webkit-flex; 53 display: flex;
54 padding: 5px; 54 padding: 5px;
55 -webkit-flex: 0 0 auto; 55 flex: 0 0 auto;
56 } 56 }
57 title { 57 title {
58 display: inline; 58 display: inline;
59 font-weight: bold; 59 font-weight: bold;
60 -webkit-box-flex: 1; 60 flex: 1 1 auto;
61 -webkit-flex: 1 1 auto;
62 } 61 }
63 close-button { 62 close-button {
64 -webkit-align-self: flex-end; 63 -webkit-align-self: flex-end;
65 border: 1px solid #eee; 64 border: 1px solid #eee;
66 background-color: #999; 65 background-color: #999;
67 font-size: 10pt; 66 font-size: 10pt;
68 font-weight: bold; 67 font-weight: bold;
69 padding: 2px; 68 padding: 2px;
70 text-align: center; 69 text-align: center;
71 width: 16px; 70 width: 16px;
72 } 71 }
73 close-button:hover { 72 close-button:hover {
74 background-color: #ddd; 73 background-color: #ddd;
75 border-color: black; 74 border-color: black;
76 cursor: pointer; 75 cursor: pointer;
77 } 76 }
78 overlay-content { 77 overlay-content {
79 display: -webkit-flex; 78 display: flex;
80 -webkit-flex: 1 1 auto; 79 flex: 1 1 auto;
81 -webkit-flex-direction: column; 80 flex-direction: column;
82 overflow-y: auto; 81 overflow-y: auto;
83 padding: 10px; 82 padding: 10px;
84 min-width: 300px; 83 min-width: 300px;
85 min-height: 0; 84 min-height: 0;
86 } 85 }
87 button-bar { 86 button-bar {
88 -webkit-align-items: baseline; 87 -webkit-align-items: baseline;
89 border-top: 1px solid #ccc; 88 border-top: 1px solid #ccc;
90 display: -webkit-flex; 89 display: flex;
91 -webkit-flex: 0 0 auto; 90 flex: 0 0 auto;
92 -webkit-flex-direction: row-reverse; 91 flex-direction: row-reverse;
93 padding: 4px; 92 padding: 4px;
94 } 93 }
95 </style> 94 </style>
96 95
97 <overlay-mask> 96 <overlay-mask>
98 <overlay-vertical-centering-container> 97 <overlay-vertical-centering-container>
99 <overlay-frame> 98 <overlay-frame>
100 <title-bar> 99 <title-bar>
101 <title></title> 100 <title></title>
102 <close-button>&#x2715</close-button> 101 <close-button>&#x2715</close-button>
(...skipping 240 matching lines...) Expand 10 before | Expand all | Expand 10 after
343 Polymer.dom(o.buttons).appendChild(b); 342 Polymer.dom(o.buttons).appendChild(b);
344 o.visible = true; 343 o.visible = true;
345 return o; 344 return o;
346 }; 345 };
347 346
348 return { 347 return {
349 Overlay, 348 Overlay,
350 }; 349 };
351 }); 350 });
352 </script> 351 </script>
OLDNEW
« no previous file with comments | « tracing/tracing/ui/base/list_and_associated_view.css ('k') | tracing/tracing/ui/extras/about_tracing/common.css » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698