| 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 |