| 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 /* Included here so we don't have to include "iron-positioning" in every | 8 /* Included here so we don't have to include "iron-positioning" in every |
| 9 * stylesheet. See crbug.com/498405. */ | 9 * stylesheet. See crbug.com/498405. */ |
| 10 [hidden] { | 10 [hidden] { |
| (...skipping 43 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 54 @apply(--settings-actionable); | 54 @apply(--settings-actionable); |
| 55 height: var(--settings-row-min-height); | 55 height: var(--settings-row-min-height); |
| 56 width: 31px; | 56 width: 31px; |
| 57 } | 57 } |
| 58 | 58 |
| 59 span ~ a { | 59 span ~ a { |
| 60 -webkit-margin-start: 4px; | 60 -webkit-margin-start: 4px; |
| 61 } | 61 } |
| 62 | 62 |
| 63 .primary-button, | 63 .primary-button, |
| 64 .tertiary-button, | |
| 65 a[href] { | 64 a[href] { |
| 66 color: var(--google-blue-700); | 65 color: var(--google-blue-700); |
| 67 } | 66 } |
| 68 | 67 |
| 69 .primary-button, | 68 .primary-button { |
| 70 .tertiary-button { | |
| 71 --paper-button-flat-keyboard-focus: { | 69 --paper-button-flat-keyboard-focus: { |
| 72 background: rgba(51, 103, 214, .12); /* --google-blue-700 */ | 70 background: rgba(51, 103, 214, .12); /* --google-blue-700 */ |
| 73 }; | 71 }; |
| 74 } | 72 } |
| 75 | 73 |
| 76 a[href] { | 74 a[href] { |
| 77 text-decoration: none; | 75 text-decoration: none; |
| 78 } | 76 } |
| 79 | 77 |
| 80 /* There are three main button styles, .primary-button, .secondary-button, | 78 /* There are three main button styles, .primary-button and |
| 81 * and .tertiary-button. The primary is the action button (e.g. "edit", | 79 * .secondary-button. The primary is the action button (e.g. "edit", |
| 82 * "delete") while the secondary is often a "Cancel" button. A tertiary | 80 * "delete") while the secondary is often a "Cancel" button. A tertiary |
| 83 * button may be used to get more information or similar, that we expect | 81 * button may be used to get more information or similar, that we expect |
| 84 * most users will not need. */ | 82 * most users will not need. */ |
| 85 .primary-button { | 83 .primary-button { |
| 86 --paper-button: { | 84 --paper-button: { |
| 87 font-weight: 500; | 85 font-weight: 500; |
| 88 text-align: start; | 86 text-align: start; |
| 89 }; | 87 }; |
| 90 } | 88 } |
| 91 | 89 |
| (...skipping 12 matching lines...) Expand all Loading... |
| 104 color: var(--paper-grey-600); | 102 color: var(--paper-grey-600); |
| 105 font-weight: 500; | 103 font-weight: 500; |
| 106 min-width: 1em; /* A tighter fit than 5.14em for short buttons. */ | 104 min-width: 1em; /* A tighter fit than 5.14em for short buttons. */ |
| 107 text-decoration: none; | 105 text-decoration: none; |
| 108 }; | 106 }; |
| 109 --paper-button-flat-keyboard-focus: { | 107 --paper-button-flat-keyboard-focus: { |
| 110 background: rgba(0, 0, 0, .12); | 108 background: rgba(0, 0, 0, .12); |
| 111 }; | 109 }; |
| 112 } | 110 } |
| 113 | 111 |
| 114 /* See notes in .primary-button. */ | |
| 115 .tertiary-button { | |
| 116 --paper-button: { | |
| 117 font-weight: 400; | |
| 118 text-decoration: none; | |
| 119 }; | |
| 120 } | |
| 121 | |
| 122 .settings-box .primary-button, | 112 .settings-box .primary-button, |
| 123 .settings-box .secondary-button, | 113 .settings-box .secondary-button, |
| 124 .settings-box .secondary-button { | 114 .settings-box .secondary-button { |
| 125 -webkit-margin-end: -12px; | 115 -webkit-margin-end: -12px; |
| 126 -webkit-margin-start: -12px; | 116 -webkit-margin-start: -12px; |
| 127 -webkit-padding-end: 12px; | 117 -webkit-padding-end: 12px; |
| 128 -webkit-padding-start: 12px; | 118 -webkit-padding-start: 12px; |
| 129 } | 119 } |
| 130 | 120 |
| 131 paper-checkbox { | 121 paper-checkbox { |
| (...skipping 269 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 401 transform: rotate(-135deg); | 391 transform: rotate(-135deg); |
| 402 } | 392 } |
| 403 | 393 |
| 404 .column-header { | 394 .column-header { |
| 405 color: var(--paper-grey-600); | 395 color: var(--paper-grey-600); |
| 406 font-weight: 500; | 396 font-weight: 500; |
| 407 } | 397 } |
| 408 </style> | 398 </style> |
| 409 </template> | 399 </template> |
| 410 </dom-module> | 400 </dom-module> |
| OLD | NEW |