| 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 17 matching lines...) Expand all Loading... |
| 28 | 28 |
| 29 iron-icon { | 29 iron-icon { |
| 30 flex-shrink: 0; /* Prevent distortion of icons in cramped UI. */ | 30 flex-shrink: 0; /* Prevent distortion of icons in cramped UI. */ |
| 31 } | 31 } |
| 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 /* See notes in .primary-button. |
| 39 * TODO(dschuyler): Remove unnecessary .secondary-button references. */ |
| 38 paper-button { | 40 paper-button { |
| 41 --paper-button: { |
| 42 -webkit-padding-end: var(--settings-button-edge-spacing); |
| 43 -webkit-padding-start: var(--settings-button-edge-spacing); |
| 44 color: var(--paper-grey-600); |
| 45 font-weight: 500; |
| 46 min-width: 1em; /* A tighter fit than 5.14em for short buttons. */ |
| 47 text-decoration: none; |
| 48 }; |
| 49 --paper-button-flat-keyboard-focus: { |
| 50 background: rgba(0, 0, 0, .12); |
| 51 }; |
| 39 flex-shrink: 0; | 52 flex-shrink: 0; |
| 40 height: 36px; | 53 height: 36px; |
| 41 margin: 0; | 54 margin: 0; |
| 42 } | 55 } |
| 43 | 56 |
| 44 paper-button[toggles][active] { | 57 paper-button[toggles][active] { |
| 45 background-color: var(--paper-grey-300); | 58 background-color: var(--paper-grey-300); |
| 46 } | 59 } |
| 47 | 60 |
| 61 .settings-box paper-button { |
| 62 -webkit-margin-end: calc(var(--settings-button-edge-spacing) * -1); |
| 63 -webkit-margin-start: calc(var(--settings-button-edge-spacing) * -1); |
| 64 } |
| 65 |
| 66 /* There are two settings button styles, .primary-button and normal |
| 67 * buttons. The primary is the action button (e.g. "edit", "delete") |
| 68 * while the normal (secondary-button) is often a "Cancel" button. */ |
| 69 .primary-button { |
| 70 --paper-button: { |
| 71 -webkit-padding-end: var(--settings-button-edge-spacing); |
| 72 -webkit-padding-start: var(--settings-button-edge-spacing); |
| 73 font-weight: 500; |
| 74 text-align: start; |
| 75 }; |
| 76 --paper-button-flat-keyboard-focus: { |
| 77 background: rgba(51, 103, 214, .12); /* --google-blue-700 */ |
| 78 }; |
| 79 color: var(--google-blue-500); |
| 80 } |
| 81 |
| 48 paper-toggle-button { | 82 paper-toggle-button { |
| 49 @apply(--settings-actionable); | 83 @apply(--settings-actionable); |
| 50 height: var(--settings-row-min-height); | 84 height: var(--settings-row-min-height); |
| 51 width: 36px; | 85 width: 36px; |
| 52 } | 86 } |
| 53 | 87 |
| 54 span ~ a { | 88 span ~ a { |
| 55 -webkit-margin-start: 4px; | 89 -webkit-margin-start: 4px; |
| 56 } | 90 } |
| 57 | 91 |
| 58 .primary-button { | |
| 59 color: var(--google-blue-500); | |
| 60 } | |
| 61 | |
| 62 a[href] { | 92 a[href] { |
| 63 color: var(--google-blue-700); | 93 color: var(--google-blue-700); |
| 64 } | 94 } |
| 65 | 95 |
| 66 .primary-button { | |
| 67 --paper-button-flat-keyboard-focus: { | |
| 68 background: rgba(51, 103, 214, .12); /* --google-blue-700 */ | |
| 69 }; | |
| 70 } | |
| 71 | |
| 72 a[href] { | 96 a[href] { |
| 73 text-decoration: none; | 97 text-decoration: none; |
| 74 } | 98 } |
| 75 | 99 |
| 76 /* For elements that are simple out-links but don't look like anchors. */ | 100 /* For elements that are simple out-links but don't look like anchors. */ |
| 77 .inherit-color { | 101 .inherit-color { |
| 78 color: inherit !important; | 102 color: inherit !important; |
| 79 } | 103 } |
| 80 | 104 |
| 81 /* There are three main button styles, .primary-button, .secondary-button, | |
| 82 * and .tertiary-button. The primary is the action button (e.g. "edit", | |
| 83 * "delete") while the secondary is often a "Cancel" button. A tertiary | |
| 84 * button may be used to get more information or similar, that we expect | |
| 85 * most users will not need. */ | |
| 86 .primary-button { | |
| 87 --paper-button: { | |
| 88 -webkit-padding-end: var(--settings-button-edge-spacing); | |
| 89 -webkit-padding-start: var(--settings-button-edge-spacing); | |
| 90 font-weight: 500; | |
| 91 text-align: start; | |
| 92 }; | |
| 93 } | |
| 94 | |
| 95 .primary-toggle { | 105 .primary-toggle { |
| 96 color: var(--paper-grey-600); | 106 color: var(--paper-grey-600); |
| 97 font-weight: 500; | 107 font-weight: 500; |
| 98 } | 108 } |
| 99 | 109 |
| 100 .primary-toggle[checked] { | 110 .primary-toggle[checked] { |
| 101 color: var(--google-blue-500); | 111 color: var(--google-blue-500); |
| 102 } | 112 } |
| 103 | 113 |
| 104 /* See notes in .primary-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); | |
| 122 -webkit-margin-start: calc(var(--settings-button-edge-spacing) * -1); | |
| 123 } | |
| 124 | |
| 125 paper-checkbox { | 114 paper-checkbox { |
| 126 --paper-checkbox-checked-color: var(--google-blue-500); | 115 --paper-checkbox-checked-color: var(--google-blue-500); |
| 127 --paper-checkbox-label-spacing: var(--settings-control-label-spacing); | 116 --paper-checkbox-label-spacing: var(--settings-control-label-spacing); |
| 128 --paper-checkbox-size: var(--checkbox-size); | 117 --paper-checkbox-size: var(--checkbox-size); |
| 129 --paper-checkbox-unchecked-color: var(--paper-grey-600); | 118 --paper-checkbox-unchecked-color: var(--paper-grey-600); |
| 130 -webkit-margin-start: var(--checkbox-margin-start); | 119 -webkit-margin-start: var(--checkbox-margin-start); |
| 131 } | 120 } |
| 132 | 121 |
| 133 paper-input { | 122 paper-input { |
| 134 /* Fix issue with focus animation making labels wiggle. */ | 123 /* Fix issue with focus animation making labels wiggle. */ |
| (...skipping 267 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 402 transform: rotate(-135deg); | 391 transform: rotate(-135deg); |
| 403 } | 392 } |
| 404 | 393 |
| 405 .column-header { | 394 .column-header { |
| 406 color: var(--paper-grey-600); | 395 color: var(--paper-grey-600); |
| 407 font-weight: 500; | 396 font-weight: 500; |
| 408 } | 397 } |
| 409 </style> | 398 </style> |
| 410 </template> | 399 </template> |
| 411 </dom-module> | 400 </dom-module> |
| OLD | NEW |