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 |