OLD | NEW |
1 /* Copyright 2016 The Chromium Authors. All rights reserved. | 1 /* Copyright 2016 The Chromium Authors. All rights reserved. |
2 * Use of this source code is governed by a BSD-style license that can be | 2 * Use of this source code is governed by a BSD-style license that can be |
3 * found in the LICENSE file. */ | 3 * found in the LICENSE file. */ |
4 | 4 |
5 /** | 5 /** |
6 * @fileoverview | 6 * @fileoverview |
7 * Common styles for Material Design settings. | 7 * Common styles for Material Design settings. |
8 */ | 8 */ |
9 | 9 |
10 <dom-module id="settings-shared"> | 10 <dom-module id="settings-shared"> |
(...skipping 11 matching lines...) Expand all Loading... |
22 color: #969696; | 22 color: #969696; |
23 } | 23 } |
24 | 24 |
25 iron-icon[icon=done] { | 25 iron-icon[icon=done] { |
26 color: rgb(0, 128, 0); | 26 color: rgb(0, 128, 0); |
27 } | 27 } |
28 | 28 |
29 paper-button { | 29 paper-button { |
30 margin: 0; | 30 margin: 0; |
31 min-width: auto; | 31 min-width: auto; |
32 padding: 0; | |
33 } | 32 } |
34 | 33 |
35 paper-button[toggles][active] { | 34 paper-button[toggles][active] { |
36 background-color: LightGray; | 35 background-color: LightGray; |
37 } | 36 } |
38 | 37 |
39 span ~ a { | 38 span ~ a { |
40 -webkit-margin-start: 4px; | 39 -webkit-margin-start: 4px; |
41 } | 40 } |
42 | 41 |
43 paper-button.primary-button { | 42 paper-button.primary-button { |
44 --paper-button: { | 43 --paper-button: { |
45 color: rgb(66, 133, 244); | 44 color: rgb(66, 133, 244); |
| 45 font-weight: 500; |
46 text-align: start; | 46 text-align: start; |
47 text-transform: none; | |
48 font-weight: 500; | |
49 }; | 47 }; |
| 48 margin: 0 -0.57em; /* Offsets default paper-button padding. */ |
50 } | 49 } |
51 | 50 |
52 paper-button.secondary-button { | 51 paper-button.secondary-button { |
53 --paper-button: { | 52 --paper-button: { |
54 color: #5a5a5a; | 53 color: #5a5a5a; |
55 text-decoration: none; | 54 text-decoration: none; |
56 font-weight: 500; | 55 font-weight: 500; |
57 }; | 56 }; |
58 } | 57 } |
59 | 58 |
60 paper-button.tertiary-button { | 59 paper-button.tertiary-button { |
61 --paper-button: { | 60 --paper-button: { |
62 color: rgb(51, 103, 214); | 61 color: rgb(51, 103, 214); |
| 62 font-weight: 400; |
63 text-decoration: none; | 63 text-decoration: none; |
64 font-weight: 400; | |
65 }; | 64 }; |
66 } | 65 } |
67 | 66 |
68 paper-radio-button { | 67 paper-radio-button { |
69 --paper-radio-button-checked-color: var(--google-blue-500); | 68 --paper-radio-button-checked-color: var(--google-blue-500); |
70 --paper-radio-button-label-spacing: 18px; | 69 --paper-radio-button-label-spacing: 18px; |
71 --paper-radio-button-unchecked-color: #969696; | 70 --paper-radio-button-unchecked-color: #969696; |
72 -webkit-margin-start: 2px; | 71 -webkit-margin-start: 2px; |
73 } | 72 } |
74 | 73 |
75 .text-elide { | 74 .text-elide { |
76 overflow: hidden; | 75 overflow: hidden; |
77 text-overflow: ellipsis; | 76 text-overflow: ellipsis; |
78 white-space: nowrap; | 77 white-space: nowrap; |
79 } | 78 } |
80 | 79 |
81 .button-row { | 80 .button-row { |
82 display: flex; | 81 display: flex; |
83 margin-top: 25px; | 82 margin-top: 25px; |
84 } | 83 } |
85 | 84 |
86 .button-strip { | 85 .button-strip { |
87 text-align: end; | 86 text-align: end; |
88 } | 87 } |
89 | 88 |
90 .list-frame { | 89 .list-frame { |
91 @apply(--layout-center); | 90 @apply(--layout-center); |
92 display: block; | |
93 -webkit-padding-end: 20px; | 91 -webkit-padding-end: 20px; |
94 -webkit-padding-start: 48px; | 92 -webkit-padding-start: 48px; |
| 93 display: block; |
95 padding-bottom: 0; | 94 padding-bottom: 0; |
96 padding-top: 0; | 95 padding-top: 0; |
97 } | 96 } |
98 | 97 |
99 .list-frame select { | 98 .list-frame select { |
100 -webkit-margin-start: 4px; | 99 -webkit-margin-start: 4px; |
101 } | 100 } |
102 | 101 |
103 .list-frame .secondary { | 102 .list-frame .secondary { |
104 color: #969696; | 103 color: #969696; |
(...skipping 35 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
140 | 139 |
141 .list-item > paper-icon-item { | 140 .list-item > paper-icon-item { |
142 padding: 0; | 141 padding: 0; |
143 } | 142 } |
144 | 143 |
145 /* This button has no ink ripple. */ | 144 /* This button has no ink ripple. */ |
146 .list-item.list-button { | 145 .list-item.list-button { |
147 @apply(--layout-center); | 146 @apply(--layout-center); |
148 color: rgb(66, 133, 244); | 147 color: rgb(66, 133, 244); |
149 font-weight: 500; | 148 font-weight: 500; |
150 padding: 0; | |
151 text-decoration: none; | |
152 text-transform: none; | |
153 } | |
154 | |
155 .link-button { | |
156 color: rgb(61, 130, 243); | |
157 padding: 6px 0; | |
158 text-transform: none; | |
159 } | 149 } |
160 | 150 |
161 .settings-card { | 151 .settings-card { |
162 padding: 8px 0; | 152 padding: 8px 0; |
163 } | 153 } |
164 | 154 |
165 .settings-box { | 155 .settings-box { |
166 @apply(--layout-center); | 156 @apply(--layout-center); |
167 border-top: 1px solid var(--paper-grey-300); | 157 border-top: 1px solid var(--paper-grey-300); |
168 display: flex; | 158 display: flex; |
(...skipping 58 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
227 .vertical-list > div:first-of-type { | 217 .vertical-list > div:first-of-type { |
228 border-top: none; | 218 border-top: none; |
229 } | 219 } |
230 | 220 |
231 .vertical-list > div { | 221 .vertical-list > div { |
232 border-top: 1px solid var(--paper-grey-300); | 222 border-top: 1px solid var(--paper-grey-300); |
233 } | 223 } |
234 </style> | 224 </style> |
235 </template> | 225 </template> |
236 </dom-module> | 226 </dom-module> |
OLD | NEW |