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

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

Issue 1981423002: [MD settings] change button padding and placement (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: changed sign in button 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
OLDNEW
1 <!-- Common styles for Material Design settings. --> 1 <!-- Common styles for Material Design settings. -->
2 <dom-module id="settings-shared"> 2 <dom-module id="settings-shared">
3 <template> 3 <template>
4 <style> 4 <style>
5 :root { 5 :root {
6 --checkbox-margin-start: 2px; 6 --checkbox-margin-start: 2px;
7 --checkbox-size: 16px; 7 --checkbox-size: 16px;
8 --checkbox-spacing: 18px; 8 --checkbox-spacing: 18px;
9 --iron-icon-fill-color: var(--paper-grey-600); 9 --iron-icon-fill-color: var(--paper-grey-600);
10 --iron-icon-height: 20px; 10 --iron-icon-height: 20px;
(...skipping 72 matching lines...) Expand 10 before | Expand all | Expand 10 after
83 /* TODO(dbeam): check with bettes@ on this one, but I'm pretty sure we 83 /* TODO(dbeam): check with bettes@ on this one, but I'm pretty sure we
84 * shouldn't be showing much :hover stuff on Polymer pages. */ 84 * shouldn't be showing much :hover stuff on Polymer pages. */
85 text-decoration: none; 85 text-decoration: none;
86 } 86 }
87 87
88 paper-button.primary-button { 88 paper-button.primary-button {
89 --paper-button: { 89 --paper-button: {
90 font-weight: 500; 90 font-weight: 500;
91 text-align: start; 91 text-align: start;
92 }; 92 };
93 margin: 0 -0.57em; /* Offsets default paper-button padding. */
94 } 93 }
95 94
96 paper-button.secondary-button { 95 paper-button.secondary-button {
97 --paper-button: { 96 --paper-button: {
98 color: var(--paper-grey-600); 97 color: var(--paper-grey-600);
99 text-decoration: none; 98 text-decoration: none;
100 font-weight: 500; 99 font-weight: 500;
101 }; 100 };
102 } 101 }
103 102
104 paper-button.tertiary-button { 103 paper-button.tertiary-button {
105 --paper-button: { 104 --paper-button: {
106 font-weight: 400; 105 font-weight: 400;
107 text-decoration: none; 106 text-decoration: none;
108 }; 107 };
109 } 108 }
110 109
110 .settings-box paper-button.primary-button,
111 .settings-box paper-button.secondary-button,
112 .settings-box paper-button.secondary-button {
113 margin-left: -12px;
114 margin-right: -12px;
115 padding-left: 12px;
116 padding-right: 12px;
117 }
118
111 paper-checkbox { 119 paper-checkbox {
112 --paper-checkbox-checked-color: var(--google-blue-500); 120 --paper-checkbox-checked-color: var(--google-blue-500);
113 --paper-checkbox-label-spacing: var(--checkbox-spacing); 121 --paper-checkbox-label-spacing: var(--checkbox-spacing);
114 --paper-checkbox-size: var(--checkbox-size); 122 --paper-checkbox-size: var(--checkbox-size);
115 --paper-checkbox-unchecked-color: var(--paper-grey-600); 123 --paper-checkbox-unchecked-color: var(--paper-grey-600);
116 -webkit-margin-start: var(--checkbox-margin-start); 124 -webkit-margin-start: var(--checkbox-margin-start);
117 } 125 }
118 126
119 paper-radio-button { 127 paper-radio-button {
120 @apply(--layout-center); 128 @apply(--layout-center);
121 --paper-radio-button-checked-color: var(--google-blue-500); 129 --paper-radio-button-checked-color: var(--google-blue-500);
122 --paper-radio-button-label-spacing: 18px; 130 --paper-radio-button-label-spacing: 18px;
123 --paper-radio-button-unchecked-color: var(--paper-grey-600); 131 --paper-radio-button-unchecked-color: var(--paper-grey-600);
124 -webkit-margin-start: 2px; 132 -webkit-margin-start: 2px;
125 display: flex; 133 display: flex;
126 min-height: 40px; 134 min-height: 40px;
127 } 135 }
128 136
129 paper-radio-group { 137 paper-radio-group {
130 width: 100%; 138 width: 100%;
131 } 139 }
132 140
133 .text-elide { 141 .text-elide {
134 overflow: hidden; 142 overflow: hidden;
135 text-overflow: ellipsis; 143 text-overflow: ellipsis;
136 white-space: nowrap; 144 white-space: nowrap;
137 } 145 }
138 146
139 .button-row {
140 display: flex;
141 margin-top: 25px;
142 }
143
144 .button-strip { 147 .button-strip {
145 text-align: end; 148 text-align: end;
146 } 149 }
147 150
148 .action-button { 151 .action-button {
149 background: var(--google-blue-500); 152 background: var(--google-blue-500);
150 color: white; 153 color: white;
151 } 154 }
152 155
153 .action-button[disabled] { 156 .action-button[disabled] {
(...skipping 138 matching lines...) Expand 10 before | Expand all | Expand 10 after
292 295
293 .favicon-image { 296 .favicon-image {
294 background-repeat: no-repeat; 297 background-repeat: no-repeat;
295 background-size: contain; 298 background-size: contain;
296 height: 16px; 299 height: 16px;
297 width: 16px; 300 width: 16px;
298 } 301 }
299 </style> 302 </style>
300 </template> 303 </template>
301 </dom-module> 304 </dom-module>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698