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

Side by Side Diff: ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.html

Issue 2020963002: MD History: Add responsive layout which hides the sidebar in thin windows (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Address nits Created 4 years, 5 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
OLDNEW
1 <link rel="import" href="chrome://resources/html/polymer.html"> 1 <link rel="import" href="chrome://resources/html/polymer.html">
2 <link rel="import" href="chrome://resources/polymer/v1_0/iron-media-query/iron-m edia-query.html"> 2 <link rel="import" href="chrome://resources/polymer/v1_0/iron-media-query/iron-m edia-query.html">
3 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper -icon-button.html">
3 <link rel="import" href="chrome://resources/cr_elements/cr_toolbar/cr_toolbar_se arch_field.html"> 4 <link rel="import" href="chrome://resources/cr_elements/cr_toolbar/cr_toolbar_se arch_field.html">
4 5
5 <dom-module id="cr-toolbar"> 6 <dom-module id="cr-toolbar">
6 <template> 7 <template>
7 <style> 8 <style>
8 :host { 9 :host {
9 color: #fff; 10 color: #fff;
10 display: flex; 11 display: flex;
11 height: 56px; 12 height: 56px;
12 } 13 }
13 14
14 h1 { 15 h1 {
15 @apply(--layout-flex); 16 @apply(--layout-flex);
16 font-size: 123%; 17 font-size: 123%;
17 font-weight: 400; 18 font-weight: 400;
18 } 19 }
19 20
20 #leftContent { 21 #leftContent {
21 -webkit-padding-start: 24px;
22 align-items: center; 22 align-items: center;
23 display: flex; 23 display: flex;
24 width: var(--side-bar-width, 0); 24 }
25
26 #leftContent paper-icon-button {
27 -webkit-margin-end: 6px;
28 -webkit-margin-start: 18px;
29 height: 32px;
30 margin-bottom: 6px;
31 margin-top: 6px;
32 min-width: 32px;
33 padding: 6px;
34 width: 32px;
25 } 35 }
26 36
27 #centeredContent { 37 #centeredContent {
28 -webkit-padding-end: 12px; 38 -webkit-padding-end: 12px;
29 display: flex; 39 display: flex;
30 flex: 1 1 0; 40 flex: 1 1 0;
31 justify-content: center; 41 justify-content: center;
32 } 42 }
33 43
34 :host([narrow_]) #centeredContent { 44 :host([narrow_]) #centeredContent {
35 justify-content: flex-end; 45 justify-content: flex-end;
36 } 46 }
37 47
38 :host([narrow_][showing-search_]) #leftContent { 48 :host([narrow_][showing-search_]) #leftContent {
39 display: none; 49 display: none;
40 } 50 }
41 </style> 51 </style>
42 <div id="leftContent"> 52 <div id="leftContent">
43 <content select="paper-icon-button"></content> 53 <paper-icon-button icon="cr:menu" on-tap="onMenuTap_">
54 </paper-icon-button>
44 <h1>[[pageName]]</h1> 55 <h1>[[pageName]]</h1>
45 </div> 56 </div>
46 57
47 <div id="centeredContent"> 58 <div id="centeredContent">
48 <cr-toolbar-search-field id="search" narrow="[[narrow_]]" 59 <cr-toolbar-search-field id="search" narrow="[[narrow_]]"
49 label="[[searchPrompt]]" clear-label="[[clearLabel]]" 60 label="[[searchPrompt]]" clear-label="[[clearLabel]]"
50 spinner-active="[[spinnerActive]]" 61 spinner-active="[[spinnerActive]]"
51 showing-search="{{showingSearch_}}"> 62 showing-search="{{showingSearch_}}">
52 </cr-toolbar-search-field> 63 </cr-toolbar-search-field>
53 <iron-media-query query="(max-width: 900px)" query-matches="{{narrow_}}"> 64 <iron-media-query query="(max-width: 900px)" query-matches="{{narrow_}}">
54 </iron-media-query> 65 </iron-media-query>
55 </div> 66 </div>
56 </template> 67 </template>
57 <script src="cr_toolbar.js"></script> 68 <script src="cr_toolbar.js"></script>
58 </dom-module> 69 </dom-module>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698