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

Side by Side Diff: chrome/browser/resources/settings/settings_dialog.html

Issue 1921823005: More <settings-dialog> tweaks to match the spec. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 4 years, 7 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 | « no previous file | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
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-icons/iron-icons.h tml"> 2 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.h tml">
3 <link rel="import" href="chrome://resources/polymer/v1_0/paper-dialog-behavior/p aper-dialog-behavior.html"> 3 <link rel="import" href="chrome://resources/polymer/v1_0/paper-dialog-behavior/p aper-dialog-behavior.html">
4 <link rel="import" href="chrome://resources/polymer/v1_0/paper-dialog-behavior/p aper-dialog-shared-styles.html"> 4 <link rel="import" href="chrome://resources/polymer/v1_0/paper-dialog-behavior/p aper-dialog-shared-styles.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 6
7 <dom-module id="settings-dialog"> 7 <dom-module id="settings-dialog">
8 <template> 8 <template>
9 <style include="paper-dialog-shared-styles"></style> 9 <style include="paper-dialog-shared-styles"></style>
10 <style> 10 <style>
11 .body-content { 11 .body-content {
12 display: flex; 12 display: flex;
13 flex-direction: column; 13 flex-direction: column;
14 font-size: 1em;
15 min-height: 120px; 14 min-height: 120px;
16 } 15 }
17 16
18 .dialog-content { 17 .dialog-content {
19 -webkit-padding-end: 0; 18 -webkit-padding-end: 0;
20 -webkit-padding-start: 0; 19 -webkit-padding-start: 0;
21 margin-bottom: 0; 20 margin-bottom: 0;
22 margin-top: 0; 21 margin-top: 0;
23 } 22 }
24 23
(...skipping 10 matching lines...) Expand all
35 } 34 }
36 35
37 paper-icon-button { 36 paper-icon-button {
38 height: 20px; 37 height: 20px;
39 margin: 16px; 38 margin: 16px;
40 padding: 0; 39 padding: 0;
41 width: 20px; 40 width: 20px;
42 } 41 }
43 42
44 :host { 43 :host {
44 border-radius: 2px;
45 max-width: 800px; 45 max-width: 800px;
46 min-width: 512px; 46 min-width: 512px;
47 overflow: auto; 47 overflow: auto;
48 } 48 }
49 49
50 :host ::content .body,
51 :host ::content .footer,
52 :host ::content paper-button {
53 font-size: 92.86%; /* (13px / 14px) * 100 */
54 }
55
50 :host ::content .body { 56 :host ::content .body {
51 flex: 1;
52 margin: 12px 0 24px 0; 57 margin: 12px 0 24px 0;
53 } 58 }
54 59
55 :host ::content .button-container { 60 :host ::content .button-container {
61 -webkit-padding-end: 16px;
62 -webkit-padding-start: 16px;
56 display: flex; 63 display: flex;
57 justify-content: flex-end; 64 justify-content: flex-end;
58 margin-bottom: 12px; 65 margin-bottom: 12px;
59 } 66 }
60 67
61 :host ::content .button-container .cancel-button { 68 :host ::content .button-container .cancel-button {
62 -webkit-margin-end: 8px; 69 -webkit-margin-end: 8px;
63 color: var(--paper-grey-600); 70 color: var(--paper-grey-600);
64 font-weight: 500; 71 font-weight: 500;
65 } 72 }
66 73
67 :host ::content .footer { 74 :host ::content .footer {
68 background-color: var(--paper-grey-200); 75 background-color: var(--paper-grey-200);
69 margin: 0; 76 margin: 0;
70 padding: 20px; 77 padding: 20px;
71 } 78 }
72 79
73 :host ::content .row { 80 :host ::content .row {
74 align-items: center; 81 align-items: center;
75 display: flex; 82 display: flex;
76 min-height: 40px; 83 min-height: 40px;
77 } 84 }
78 85
79 :host ::content .row .start { 86 :host ::content .row .start {
80 flex: 1; 87 flex: 1;
81 } 88 }
82 89
83 :host ::content .title { 90 :host ::content .title {
84 flex: 1;
85 font-size: 114.28%; /* (16px / 14px) * 100 */ 91 font-size: 114.28%; /* (16px / 14px) * 100 */
86 } 92 }
87 93
88 :host ::content .title, 94 :host ::content .body,
89 .body-content { 95 :host ::content .title {
90 -webkit-padding-end: 24px; 96 -webkit-padding-end: 24px;
91 -webkit-padding-start: 24px; 97 -webkit-padding-start: 24px;
98 flex: 1;
92 } 99 }
93 </style> 100 </style>
94 <div class="dialog-content"> 101 <div class="dialog-content">
95 <div class="top-row"> 102 <div class="top-row">
96 <content select=".title"></content> 103 <content select=".title"></content>
97 <paper-icon-button icon="clear" on-tap="cancel" id="close"> 104 <paper-icon-button icon="clear" on-tap="cancel" id="close">
98 </paper-icon-button> 105 </paper-icon-button>
99 </div> 106 </div>
100 <div class="body-content"> 107 <div class="body-content">
101 <content select=".body"></content> 108 <content select=".body"></content>
102 <content select=".button-container"></content> 109 <content select=".button-container"></content>
103 </div> 110 </div>
104 </div> 111 </div>
105 <div class="footer-container"> 112 <div class="footer-container">
106 <content select=".footer"></content> 113 <content select=".footer"></content>
107 </div> 114 </div>
108 </template> 115 </template>
109 <script src="settings_dialog.js"></script> 116 <script src="settings_dialog.js"></script>
110 </dom-module> 117 </dom-module>
OLDNEW
« no previous file with comments | « no previous file | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698