Chromium Code Reviews| 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 :host-context([dir=rtl]) button[is='paper-icon-button-light'] { | 8 :host-context([dir=rtl]) button[is='paper-icon-button-light'] { |
| 9 transform: scaleX(-1); /* Flip on the X axis (aka mirror). */ | 9 transform: scaleX(-1); /* Flip on the X axis (aka mirror). */ |
| 10 } | 10 } |
| (...skipping 21 matching lines...) Expand all Loading... | |
| 32 | 32 |
| 33 iron-icon[icon='cr:check'], | 33 iron-icon[icon='cr:check'], |
| 34 iron-icon[icon='settings:done'] { | 34 iron-icon[icon='settings:done'] { |
| 35 --iron-icon-fill-color: var(--google-green-500); | 35 --iron-icon-fill-color: var(--google-green-500); |
| 36 } | 36 } |
| 37 | 37 |
| 38 paper-button { | 38 paper-button { |
| 39 flex-shrink: 0; | 39 flex-shrink: 0; |
| 40 height: 36px; | 40 height: 36px; |
| 41 margin: 0; | 41 margin: 0; |
| 42 } | 42 } |
|
stevenjb
2017/05/16 16:27:29
Can we merge this with the other paper-button CSS?
dschuyler
2017/05/16 19:07:56
Done.
| |
| 43 | 43 |
| 44 paper-button[toggles][active] { | 44 paper-button[toggles][active] { |
| 45 background-color: var(--paper-grey-300); | 45 background-color: var(--paper-grey-300); |
| 46 } | 46 } |
|
stevenjb
2017/05/16 16:27:29
And maybe move this down also (or move the rest up
dschuyler
2017/05/16 19:07:56
Done.
| |
| 47 | 47 |
| 48 paper-toggle-button { | 48 paper-toggle-button { |
| 49 @apply(--settings-actionable); | 49 @apply(--settings-actionable); |
| 50 height: var(--settings-row-min-height); | 50 height: var(--settings-row-min-height); |
| 51 width: 36px; | 51 width: 36px; |
| 52 } | 52 } |
| 53 | 53 |
| 54 span ~ a { | 54 span ~ a { |
| 55 -webkit-margin-start: 4px; | 55 -webkit-margin-start: 4px; |
| 56 } | 56 } |
| 57 | 57 |
| 58 .primary-button { | 58 .primary-button { |
| 59 color: var(--google-blue-500); | 59 color: var(--google-blue-500); |
| 60 } | 60 } |
|
stevenjb
2017/05/16 16:27:29
Ditto
dschuyler
2017/05/16 19:07:56
Done.
| |
| 61 | 61 |
| 62 a[href] { | 62 a[href] { |
| 63 color: var(--google-blue-700); | 63 color: var(--google-blue-700); |
| 64 } | 64 } |
| 65 | 65 |
| 66 .primary-button { | 66 .primary-button { |
| 67 --paper-button-flat-keyboard-focus: { | 67 --paper-button-flat-keyboard-focus: { |
| 68 background: rgba(51, 103, 214, .12); /* --google-blue-700 */ | 68 background: rgba(51, 103, 214, .12); /* --google-blue-700 */ |
| 69 }; | 69 }; |
| 70 } | 70 } |
|
stevenjb
2017/05/16 16:27:29
Ditto
dschuyler
2017/05/16 19:07:56
Done.
| |
| 71 | 71 |
| 72 a[href] { | 72 a[href] { |
| 73 text-decoration: none; | 73 text-decoration: none; |
| 74 } | 74 } |
| 75 | 75 |
| 76 /* For elements that are simple out-links but don't look like anchors. */ | 76 /* For elements that are simple out-links but don't look like anchors. */ |
| 77 .inherit-color { | 77 .inherit-color { |
| 78 color: inherit !important; | 78 color: inherit !important; |
| 79 } | 79 } |
| 80 | 80 |
| 81 /* There are three main button styles, .primary-button, .secondary-button, | 81 /* See notes in .primary-button. */ |
| 82 * and .tertiary-button. The primary is the action button (e.g. "edit", | 82 paper-button { |
| 83 * "delete") while the secondary is often a "Cancel" button. A tertiary | 83 --paper-button: { |
| 84 * button may be used to get more information or similar, that we expect | 84 -webkit-padding-end: var(--settings-button-edge-spacing); |
| 85 * most users will not need. */ | 85 -webkit-padding-start: var(--settings-button-edge-spacing); |
| 86 color: var(--paper-grey-600); | |
| 87 font-weight: 500; | |
| 88 min-width: 1em; /* A tighter fit than 5.14em for short buttons. */ | |
| 89 text-decoration: none; | |
| 90 }; | |
| 91 --paper-button-flat-keyboard-focus: { | |
| 92 background: rgba(0, 0, 0, .12); | |
| 93 }; | |
| 94 } | |
| 95 | |
| 96 /* There are two settings button styles, .primary-button and normal | |
| 97 * buttons. The primary is the action button (e.g. "edit", "delete") | |
| 98 * while the normal (secondary-button) is often a "Cancel" button. */ | |
| 86 .primary-button { | 99 .primary-button { |
| 87 --paper-button: { | 100 --paper-button: { |
| 88 -webkit-padding-end: var(--settings-button-edge-spacing); | 101 -webkit-padding-end: var(--settings-button-edge-spacing); |
| 89 -webkit-padding-start: var(--settings-button-edge-spacing); | 102 -webkit-padding-start: var(--settings-button-edge-spacing); |
|
stevenjb
2017/05/16 16:27:29
Same as for paper-button (and therefor not needed)
dschuyler
2017/05/16 19:07:56
This is in a mixin variable. So it must be a compl
stevenjb
2017/05/16 19:22:11
Ah, right. Might be worth defining a var for these
| |
| 90 font-weight: 500; | 103 font-weight: 500; |
|
stevenjb
2017/05/16 16:27:29
ditto?
dschuyler
2017/05/16 19:07:56
intractable.
| |
| 91 text-align: start; | 104 text-align: start; |
| 92 }; | 105 }; |
| 93 } | 106 } |
| 94 | 107 |
| 95 .primary-toggle { | 108 .primary-toggle { |
| 96 color: var(--paper-grey-600); | 109 color: var(--paper-grey-600); |
| 97 font-weight: 500; | 110 font-weight: 500; |
| 98 } | 111 } |
| 99 | 112 |
| 100 .primary-toggle[checked] { | 113 .primary-toggle[checked] { |
| 101 color: var(--google-blue-500); | 114 color: var(--google-blue-500); |
| 102 } | 115 } |
| 103 | 116 |
| 104 /* See notes in .primary-button. */ | 117 .settings-box paper-button { |
| 105 .secondary-button { | |
| 106 --paper-button: { | |
| 107 -webkit-padding-end: var(--settings-button-edge-spacing); | |
| 108 -webkit-padding-start: var(--settings-button-edge-spacing); | |
| 109 color: var(--paper-grey-600); | |
| 110 font-weight: 500; | |
| 111 min-width: 1em; /* A tighter fit than 5.14em for short buttons. */ | |
| 112 text-decoration: none; | |
| 113 }; | |
| 114 --paper-button-flat-keyboard-focus: { | |
| 115 background: rgba(0, 0, 0, .12); | |
| 116 }; | |
| 117 } | |
| 118 | |
| 119 .settings-box .primary-button, | |
| 120 .settings-box .secondary-button { | |
| 121 -webkit-margin-end: calc(var(--settings-button-edge-spacing) * -1); | 118 -webkit-margin-end: calc(var(--settings-button-edge-spacing) * -1); |
| 122 -webkit-margin-start: calc(var(--settings-button-edge-spacing) * -1); | 119 -webkit-margin-start: calc(var(--settings-button-edge-spacing) * -1); |
| 123 } | 120 } |
| 124 | 121 |
| 125 paper-checkbox { | 122 paper-checkbox { |
| 126 --paper-checkbox-checked-color: var(--google-blue-500); | 123 --paper-checkbox-checked-color: var(--google-blue-500); |
| 127 --paper-checkbox-label-spacing: var(--settings-control-spacing); | 124 --paper-checkbox-label-spacing: var(--settings-control-spacing); |
| 128 --paper-checkbox-size: var(--checkbox-size); | 125 --paper-checkbox-size: var(--checkbox-size); |
| 129 --paper-checkbox-unchecked-color: var(--paper-grey-600); | 126 --paper-checkbox-unchecked-color: var(--paper-grey-600); |
| 130 -webkit-margin-start: var(--checkbox-margin-start); | 127 -webkit-margin-start: var(--checkbox-margin-start); |
| (...skipping 277 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 408 transform: rotate(-135deg); | 405 transform: rotate(-135deg); |
| 409 } | 406 } |
| 410 | 407 |
| 411 .column-header { | 408 .column-header { |
| 412 color: var(--paper-grey-600); | 409 color: var(--paper-grey-600); |
| 413 font-weight: 500; | 410 font-weight: 500; |
| 414 } | 411 } |
| 415 </style> | 412 </style> |
| 416 </template> | 413 </template> |
| 417 </dom-module> | 414 </dom-module> |
| OLD | NEW |