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

Side by Side Diff: chrome/browser/resources/md_history/history_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-flex-layout/iron-f lex-layout.html"> 2 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-f lex-layout.html">
3 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/hardware-ico ns.html"> 3 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/hardware-ico ns.html">
4 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-butt on.html"> 4 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-butt on.html">
5 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper -icon-button.html"> 5 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper -icon-button.html">
6 <link rel="import" href="chrome://resources/polymer/v1_0/paper-tabs/paper-tab.ht ml"> 6 <link rel="import" href="chrome://resources/polymer/v1_0/paper-tabs/paper-tab.ht ml">
7 <link rel="import" href="chrome://resources/polymer/v1_0/paper-tabs/paper-tabs.h tml"> 7 <link rel="import" href="chrome://resources/polymer/v1_0/paper-tabs/paper-tabs.h tml">
8 <link rel="import" href="chrome://resources/cr_elements/icons.html"> 8 <link rel="import" href="chrome://resources/cr_elements/icons.html">
9 <link rel="import" href="chrome://resources/cr_elements/cr_toolbar/cr_toolbar.ht ml"> 9 <link rel="import" href="chrome://resources/cr_elements/cr_toolbar/cr_toolbar.ht ml">
10 <link rel="import" href="chrome://history/icons.html"> 10 <link rel="import" href="chrome://history/icons.html">
(...skipping 25 matching lines...) Expand all
36 #toolbar-container { 36 #toolbar-container {
37 height: var(--toolbar-height); 37 height: var(--toolbar-height);
38 } 38 }
39 39
40 #overlay-buttons { 40 #overlay-buttons {
41 margin: 0 auto; 41 margin: 0 auto;
42 max-width: var(--card-max-width); 42 max-width: var(--card-max-width);
43 padding: 0 var(--card-padding-side); 43 padding: 0 var(--card-padding-side);
44 } 44 }
45 45
46 #overlay-wrapper {
47 -webkit-margin-start: var(--side-bar-width);
48 }
49
50 #number-selected { 46 #number-selected {
51 @apply(--layout-flex); 47 @apply(--layout-flex);
52 } 48 }
53 49
54 #cancel-icon-button { 50 #cancel-icon-button {
55 -webkit-margin-end: 24px; 51 -webkit-margin-end: 24px;
56 -webkit-margin-start: 2px; 52 -webkit-margin-start: 2px;
57 height: 36px; 53 height: 36px;
58 min-width: 36px; 54 min-width: 36px;
59 width: 36px; 55 width: 36px;
(...skipping 13 matching lines...) Expand all
73 69
74 paper-tabs { 70 paper-tabs {
75 --paper-tabs-selection-bar-color: var(--google-blue-500); 71 --paper-tabs-selection-bar-color: var(--google-blue-500);
76 height: calc(var(--toolbar-grouped-height) - var(--toolbar-height)); 72 height: calc(var(--toolbar-grouped-height) - var(--toolbar-height));
77 min-width: 300px; 73 min-width: 300px;
78 } 74 }
79 75
80 #grouped-buttons-container { 76 #grouped-buttons-container {
81 @apply(--layout-center); 77 @apply(--layout-center);
82 @apply(--layout-horizontal); 78 @apply(--layout-horizontal);
83 -webkit-margin-start: var(--side-bar-width);
84 } 79 }
85 80
86 #grouped-range-buttons { 81 #grouped-range-buttons {
87 -webkit-margin-start: 32px; 82 -webkit-margin-start: 32px;
88 } 83 }
89 84
90 #grouped-nav-container { 85 #grouped-nav-container {
91 @apply(--layout-center); 86 @apply(--layout-center);
92 @apply(--layout-end-justified); 87 @apply(--layout-end-justified);
93 @apply(--layout-flex); 88 @apply(--layout-flex);
(...skipping 60 matching lines...) Expand 10 before | Expand all | Expand 10 after
154 class="rtl-reversible"></paper-icon-button> 149 class="rtl-reversible"></paper-icon-button>
155 <paper-icon-button icon="cr:chevron-right" 150 <paper-icon-button icon="cr:chevron-right"
156 alt="$i18n{rangeNext}" title="$i18n{rangeNext}" 151 alt="$i18n{rangeNext}" title="$i18n{rangeNext}"
157 class="rtl-reversible"></paper-icon-button> 152 class="rtl-reversible"></paper-icon-button>
158 </div> 153 </div>
159 </div> 154 </div>
160 </template> 155 </template>
161 </template> 156 </template>
162 <script src="chrome://history/history_toolbar.js"></script> 157 <script src="chrome://history/history_toolbar.js"></script>
163 </dom-module> 158 </dom-module>
OLDNEW
« no previous file with comments | « chrome/browser/resources/md_history/compiled_resources2.gyp ('k') | chrome/browser/resources/md_history/shared_style.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698