OLD | NEW |
1 <link rel="import" href="chrome://resources/cr_elements/shared_style_css.html"> | 1 <link rel="import" href="chrome://resources/cr_elements/shared_style_css.html"> |
2 <link rel="import" href="/settings_vars_css.html"> | 2 <link rel="import" href="/settings_vars_css.html"> |
3 | 3 |
4 <!-- Common styles for Material Design settings. --> | 4 <!-- Common styles for Material Design settings. --> |
5 <dom-module id="settings-shared"> | 5 <dom-module id="settings-shared"> |
6 <template> | 6 <template> |
7 <style include="cr-shared-style"> | 7 <style include="cr-shared-style"> |
8 h2 { | 8 h2 { |
9 align-items: center; | 9 align-items: center; |
10 display: flex; | 10 display: flex; |
(...skipping 85 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
96 paper-button.tertiary-button { | 96 paper-button.tertiary-button { |
97 --paper-button-flat-keyboard-focus: { | 97 --paper-button-flat-keyboard-focus: { |
98 background-color: rgba(51, 103, 214, .12); /* --google-blue-700 */ | 98 background-color: rgba(51, 103, 214, .12); /* --google-blue-700 */ |
99 }; | 99 }; |
100 } | 100 } |
101 | 101 |
102 [is='action-link']:hover { | 102 [is='action-link']:hover { |
103 text-decoration: none; | 103 text-decoration: none; |
104 } | 104 } |
105 | 105 |
106 /* | 106 /* There are three main button styles, .primary-button, .secondary-button, |
107 * There are three main button styles, .primary-button, .secondary-button, | |
108 * and .tertiary-button. The primary is the action button (e.g. "edit", | 107 * and .tertiary-button. The primary is the action button (e.g. "edit", |
109 * "delete") while the secondary is often a "Cancel" button. A tertiary | 108 * "delete") while the secondary is often a "Cancel" button. A tertiary |
110 * button may be used to get more information or similar, that we expect | 109 * button may be used to get more information or similar, that we expect |
111 * most users will not need. | 110 * most users will not need. */ |
112 */ | |
113 paper-button.primary-button { | 111 paper-button.primary-button { |
114 --paper-button: { | 112 --paper-button: { |
115 font-weight: 500; | 113 font-weight: 500; |
116 text-align: start; | 114 text-align: start; |
117 }; | 115 }; |
118 } | 116 } |
119 | 117 |
120 /* See notes in .primary-button. */ | 118 /* See notes in .primary-button. */ |
121 paper-button.secondary-button { | 119 paper-button.secondary-button { |
122 --paper-button: { | 120 --paper-button: { |
(...skipping 48 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
171 .text-elide { | 169 .text-elide { |
172 overflow: hidden; | 170 overflow: hidden; |
173 text-overflow: ellipsis; | 171 text-overflow: ellipsis; |
174 white-space: nowrap; | 172 white-space: nowrap; |
175 } | 173 } |
176 | 174 |
177 .button-strip { | 175 .button-strip { |
178 text-align: end; | 176 text-align: end; |
179 } | 177 } |
180 | 178 |
181 /* | 179 /* A list-frame is an outer container for list-items. It is intended to be |
182 * A list-frame is an outer container for list-items. It is intended to be | |
183 * outside of a settings-box. A list-frame is likely to follow a | 180 * outside of a settings-box. A list-frame is likely to follow a |
184 * settings box. | 181 * settings box. */ |
185 */ | |
186 .list-frame { | 182 .list-frame { |
187 -webkit-padding-end: 20px; | 183 -webkit-padding-end: 20px; |
188 -webkit-padding-start: 56px; | 184 -webkit-padding-start: 56px; |
189 align-items: center; | 185 align-items: center; |
190 display: block; | 186 display: block; |
191 padding-bottom: 0; | 187 padding-bottom: 0; |
192 padding-top: 0; | 188 padding-top: 0; |
193 } | 189 } |
194 | 190 |
195 .list-frame .secondary, | 191 .list-frame .secondary, |
196 .list-item .secondary { | 192 .list-item .secondary { |
197 @apply(--settings-secondary); | 193 @apply(--settings-secondary); |
198 } | 194 } |
199 | 195 |
200 /* | 196 /* A list-item is intended to be contained within a list-frame. The list |
201 * A list-item is intended to be contained within a list-frame. The list | 197 * frame will setup the initial start margin. */ |
202 * frame will setup the initial start margin. | |
203 */ | |
204 .list-item { | 198 .list-item { |
205 align-items: center; | 199 align-items: center; |
206 display: flex; | 200 display: flex; |
207 min-height: var(--settings-row-min-height); | 201 min-height: var(--settings-row-min-height); |
208 padding: 0; | 202 padding: 0; |
209 } | 203 } |
210 | 204 |
211 /* A thin separator line under a list item. */ | 205 /* A thin separator line under a list item. */ |
212 .list-item.underbar { | 206 .list-item.underbar { |
213 border-bottom: var(--settings-separator-line); | 207 border-bottom: var(--settings-separator-line); |
(...skipping 26 matching lines...) Expand all Loading... |
240 padding: 0; | 234 padding: 0; |
241 } | 235 } |
242 | 236 |
243 /* This button has no ink ripple. */ | 237 /* This button has no ink ripple. */ |
244 .list-item.list-button { | 238 .list-item.list-button { |
245 align-items: center; | 239 align-items: center; |
246 color: var(--google-blue-500); | 240 color: var(--google-blue-500); |
247 font-weight: 500; | 241 font-weight: 500; |
248 } | 242 } |
249 | 243 |
250 /* | 244 /* A settings-box is a horizontal row of text or controls within a |
251 * A settings-box is a horizontal row of text or controls within a | 245 * setting section (page or subpage). */ |
252 * setting section (page or subpage). | |
253 */ | |
254 .settings-box { | 246 .settings-box { |
255 align-items: center; | 247 align-items: center; |
256 border-top: var(--settings-separator-line); | 248 border-top: var(--settings-separator-line); |
257 display: flex; | 249 display: flex; |
258 min-height: var(--settings-row-min-height); | 250 min-height: var(--settings-row-min-height); |
259 padding: 0 20px; | 251 padding: 0 20px; |
260 } | 252 } |
261 | 253 |
262 /* | 254 /* We use an explicit tag to remove the top border, rather than a |
263 * We use an explicit tag to remove the top border, rather than a | |
264 * :first-of-type modifier. This is a conscious choice, please consult | 255 * :first-of-type modifier. This is a conscious choice, please consult |
265 * with dbeam@ or dschuyler@ prior to changing it. | 256 * with dbeam@ or dschuyler@ prior to changing it. */ |
266 */ | |
267 .settings-box.first, | 257 .settings-box.first, |
268 .settings-box.continuation { | 258 .settings-box.continuation { |
269 border-top: none; | 259 border-top: none; |
270 } | 260 } |
271 | 261 |
272 .settings-box.block { | 262 .settings-box.block { |
273 display: block; | 263 display: block; |
274 } | 264 } |
275 | 265 |
276 /* | 266 /* A row with two lines of text. Often the lower line will be .secondary. |
277 * A row with two lines of text. Often the lower line will be .secondary. | |
278 */ | 267 */ |
279 .settings-box.two-line { | 268 .settings-box.two-line { |
280 min-height: 56px; | 269 min-height: 56px; |
281 } | 270 } |
282 | 271 |
283 /* | 272 /* |
284 * A settings box with a single start-aligned column, generally but not | 273 * A settings box with a single start-aligned column, generally but not |
285 * necessarily used in combination with two-line. | 274 * necessarily used in combination with two-line. |
286 */ | 275 */ |
287 .settings-box.single-column { | 276 .settings-box.single-column { |
(...skipping 21 matching lines...) Expand all Loading... |
309 } | 298 } |
310 | 299 |
311 /* The secondary-action wraps a clickable sub-area of a .settings-box. | 300 /* The secondary-action wraps a clickable sub-area of a .settings-box. |
312 * An example is the |sign out| button on the People settings. | 301 * An example is the |sign out| button on the People settings. |
313 * Here is an example with and without a secondary action box: | 302 * Here is an example with and without a secondary action box: |
314 * | 303 * |
315 * +-------------------------------------------------------+ | 304 * +-------------------------------------------------------+ |
316 * | Main action area .settings-box | .secondary-action | | 305 * | Main action area .settings-box | .secondary-action | |
317 * +-------------------------------------------------------+ | 306 * +-------------------------------------------------------+ |
318 * | Another setting-box without a secondary-action | | 307 * | Another setting-box without a secondary-action | |
319 * +-------------------------------------------------------+ | 308 * +-------------------------------------------------------+ */ |
320 */ | |
321 .settings-box .secondary-action { | 309 .settings-box .secondary-action { |
322 -webkit-border-start: var(--settings-separator-line); | 310 -webkit-border-start: var(--settings-separator-line); |
323 -webkit-padding-start: 20px; | 311 -webkit-padding-start: 20px; |
324 } | 312 } |
325 | 313 |
326 .settings-box paper-item iron-icon { | 314 .settings-box paper-item iron-icon { |
327 /* Same padding as paper-icon-button. */ | 315 /* Same padding as paper-icon-button. */ |
328 padding: 8px; | 316 padding: 8px; |
329 } | 317 } |
330 | 318 |
(...skipping 18 matching lines...) Expand all Loading... |
349 | 337 |
350 .favicon-image { | 338 .favicon-image { |
351 background-repeat: no-repeat; | 339 background-repeat: no-repeat; |
352 background-size: contain; | 340 background-size: contain; |
353 height: 16px; | 341 height: 16px; |
354 width: 16px; | 342 width: 16px; |
355 } | 343 } |
356 </style> | 344 </style> |
357 </template> | 345 </template> |
358 </dom-module> | 346 </dom-module> |
OLD | NEW |