113 2.0 - Default Button Style |
113 2.0 - Default Button Style |
114 ---------------------------------------------------------------------------- */ |
114 ---------------------------------------------------------------------------- */ |
115 |
115 |
116 .wp-core-ui .button, |
116 .wp-core-ui .button, |
117 .wp-core-ui .button-secondary { |
117 .wp-core-ui .button-secondary { |
118 color: #0071a1; |
118 color: #2271b1; |
119 border-color: #0071a1; |
119 border-color: #2271b1; |
120 background: #f3f5f6; |
120 background: #f6f7f7; |
121 vertical-align: top; |
121 vertical-align: top; |
122 } |
122 } |
123 |
123 |
124 .wp-core-ui p .button { |
124 .wp-core-ui p .button { |
125 vertical-align: baseline; |
125 vertical-align: baseline; |
126 } |
126 } |
127 |
127 |
128 .wp-core-ui .button.hover, |
128 .wp-core-ui .button.hover, |
129 .wp-core-ui .button:hover, |
129 .wp-core-ui .button:hover, |
130 .wp-core-ui .button-secondary:hover{ |
130 .wp-core-ui .button-secondary:hover{ |
131 background: #f1f1f1; |
131 background: #f0f0f1; |
132 border-color: #016087; |
132 border-color: #0a4b78; |
133 color: #016087; |
133 color: #0a4b78; |
134 } |
134 } |
135 |
135 |
136 .wp-core-ui .button.focus, |
136 .wp-core-ui .button.focus, |
137 .wp-core-ui .button:focus, |
137 .wp-core-ui .button:focus, |
138 .wp-core-ui .button-secondary:focus { |
138 .wp-core-ui .button-secondary:focus { |
139 background: #f3f5f6; |
139 background: #f6f7f7; |
140 border-color: #007cba; |
140 border-color: #3582c4; |
141 color: #016087; |
141 color: #0a4b78; |
142 box-shadow: 0 0 0 1px #007cba; |
142 box-shadow: 0 0 0 1px #3582c4; |
143 /* Only visible in Windows High Contrast mode */ |
143 /* Only visible in Windows High Contrast mode */ |
144 outline: 2px solid transparent; |
144 outline: 2px solid transparent; |
145 /* Reset inherited offset from Gutenberg */ |
145 /* Reset inherited offset from Gutenberg */ |
146 outline-offset: 0; |
146 outline-offset: 0; |
147 } |
147 } |
148 |
148 |
149 /* :active state */ |
149 /* :active state */ |
150 .wp-core-ui .button:active, |
150 .wp-core-ui .button:active, |
151 .wp-core-ui .button-secondary:active { |
151 .wp-core-ui .button-secondary:active { |
152 background: #f3f5f6; |
152 background: #f6f7f7; |
153 border-color: #7e8993; |
153 border-color: #8c8f94; |
154 box-shadow: none; |
154 box-shadow: none; |
155 } |
155 } |
156 |
156 |
157 /* pressed state e.g. a selected setting */ |
157 /* pressed state e.g. a selected setting */ |
158 .wp-core-ui .button.active, |
158 .wp-core-ui .button.active, |
159 .wp-core-ui .button.active:hover { |
159 .wp-core-ui .button.active:hover { |
160 background-color: #e2e4e7; |
160 background-color: #dcdcde; |
161 color: #00669b; |
161 color: #135e96; |
162 border-color: #016087; |
162 border-color: #0a4b78; |
163 box-shadow: inset 0 2px 5px -3px #016087; |
163 box-shadow: inset 0 2px 5px -3px #0a4b78; |
164 } |
164 } |
165 |
165 |
166 .wp-core-ui .button.active:focus { |
166 .wp-core-ui .button.active:focus { |
167 border-color: #007cba; |
167 border-color: #3582c4; |
168 box-shadow: |
168 box-shadow: |
169 inset 0 2px 5px -3px #016087, |
169 inset 0 2px 5px -3px #0a4b78, |
170 0 0 0 1px #007cba; |
170 0 0 0 1px #3582c4; |
171 } |
171 } |
172 |
172 |
173 .wp-core-ui .button[disabled], |
173 .wp-core-ui .button[disabled], |
174 .wp-core-ui .button:disabled, |
174 .wp-core-ui .button:disabled, |
175 .wp-core-ui .button.disabled, |
175 .wp-core-ui .button.disabled, |
176 .wp-core-ui .button-secondary[disabled], |
176 .wp-core-ui .button-secondary[disabled], |
177 .wp-core-ui .button-secondary:disabled, |
177 .wp-core-ui .button-secondary:disabled, |
178 .wp-core-ui .button-secondary.disabled, |
178 .wp-core-ui .button-secondary.disabled, |
179 .wp-core-ui .button-disabled { |
179 .wp-core-ui .button-disabled { |
180 color: #a0a5aa !important; |
180 color: #a7aaad !important; |
181 border-color: #ddd !important; |
181 border-color: #dcdcde !important; |
182 background: #f7f7f7 !important; |
182 background: #f6f7f7 !important; |
183 box-shadow: none !important; |
183 box-shadow: none !important; |
184 cursor: default; |
184 cursor: default; |
185 transform: none !important; |
185 transform: none !important; |
186 } |
186 } |
187 |
187 |
194 border-radius: 0; |
194 border-radius: 0; |
195 background: none; |
195 background: none; |
196 cursor: pointer; |
196 cursor: pointer; |
197 text-align: left; |
197 text-align: left; |
198 /* Mimics the default link style in common.css */ |
198 /* Mimics the default link style in common.css */ |
199 color: #0073aa; |
199 color: #2271b1; |
200 text-decoration: underline; |
200 text-decoration: underline; |
201 transition-property: border, background, color; |
201 transition-property: border, background, color; |
202 transition-duration: .05s; |
202 transition-duration: .05s; |
203 transition-timing-function: ease-in-out; |
203 transition-timing-function: ease-in-out; |
204 } |
204 } |
205 |
205 |
206 .wp-core-ui .button-link:hover, |
206 .wp-core-ui .button-link:hover, |
207 .wp-core-ui .button-link:active { |
207 .wp-core-ui .button-link:active { |
208 color: #006799; |
208 color: #135e96; |
209 } |
209 } |
210 |
210 |
211 .wp-core-ui .button-link:focus { |
211 .wp-core-ui .button-link:focus { |
212 color: #124964; |
212 color: #043959; |
213 box-shadow: |
213 box-shadow: |
214 0 0 0 1px #5b9dd9, |
214 0 0 0 1px #4f94d4, |
215 0 0 2px 1px rgba(30, 140, 190, 0.8); |
215 0 0 2px 1px rgba(79, 148, 212, 0.8); |
216 /* Only visible in Windows High Contrast mode */ |
216 /* Only visible in Windows High Contrast mode */ |
217 outline: 1px solid transparent; |
217 outline: 1px solid transparent; |
218 } |
218 } |
219 |
219 |
220 .wp-core-ui .button-link-delete { |
220 .wp-core-ui .button-link-delete { |
221 color: #a00; |
221 color: #d63638; |
222 } |
222 } |
223 |
223 |
224 .wp-core-ui .button-link-delete:hover, |
224 .wp-core-ui .button-link-delete:hover, |
225 .wp-core-ui .button-link-delete:focus { |
225 .wp-core-ui .button-link-delete:focus { |
226 color: #dc3232; |
226 color: #d63638; |
227 background: transparent; |
227 background: transparent; |
228 } |
228 } |
229 |
229 |
230 .wp-core-ui .button-link-delete:disabled { |
230 .wp-core-ui .button-link-delete:disabled { |
231 /* overrides the default buttons disabled background */ |
231 /* overrides the default buttons disabled background */ |
236 /* ---------------------------------------------------------------------------- |
236 /* ---------------------------------------------------------------------------- |
237 3.0 - Primary Button Style |
237 3.0 - Primary Button Style |
238 ---------------------------------------------------------------------------- */ |
238 ---------------------------------------------------------------------------- */ |
239 |
239 |
240 .wp-core-ui .button-primary { |
240 .wp-core-ui .button-primary { |
241 background: #007cba; |
241 background: #2271b1; |
242 border-color: #007cba; |
242 border-color: #2271b1; |
243 color: #fff; |
243 color: #fff; |
244 text-decoration: none; |
244 text-decoration: none; |
245 text-shadow: none; |
245 text-shadow: none; |
246 } |
246 } |
247 |
247 |
248 .wp-core-ui .button-primary.hover, |
248 .wp-core-ui .button-primary.hover, |
249 .wp-core-ui .button-primary:hover, |
249 .wp-core-ui .button-primary:hover, |
250 .wp-core-ui .button-primary.focus, |
250 .wp-core-ui .button-primary.focus, |
251 .wp-core-ui .button-primary:focus { |
251 .wp-core-ui .button-primary:focus { |
252 background: #0071a1; |
252 background: #135e96; |
253 border-color: #0071a1; |
253 border-color: #135e96; |
254 color: #fff; |
254 color: #fff; |
255 } |
255 } |
256 |
256 |
257 .wp-core-ui .button-primary.focus, |
257 .wp-core-ui .button-primary.focus, |
258 .wp-core-ui .button-primary:focus { |
258 .wp-core-ui .button-primary:focus { |
259 box-shadow: |
259 box-shadow: |
260 0 0 0 1px #fff, |
260 0 0 0 1px #fff, |
261 0 0 0 3px #007cba; |
261 0 0 0 3px #2271b1; |
262 } |
262 } |
263 |
263 |
264 .wp-core-ui .button-primary.active, |
264 .wp-core-ui .button-primary.active, |
265 .wp-core-ui .button-primary.active:hover, |
265 .wp-core-ui .button-primary.active:hover, |
266 .wp-core-ui .button-primary.active:focus, |
266 .wp-core-ui .button-primary.active:focus, |
267 .wp-core-ui .button-primary:active { |
267 .wp-core-ui .button-primary:active { |
268 background: #00669b; |
268 background: #135e96; |
269 border-color: #00669b; |
269 border-color: #135e96; |
270 box-shadow: none; |
270 box-shadow: none; |
271 color: #fff; |
271 color: #fff; |
272 } |
272 } |
273 |
273 |
274 .wp-core-ui .button-primary[disabled], |
274 .wp-core-ui .button-primary[disabled], |
275 .wp-core-ui .button-primary:disabled, |
275 .wp-core-ui .button-primary:disabled, |
276 .wp-core-ui .button-primary-disabled, |
276 .wp-core-ui .button-primary-disabled, |
277 .wp-core-ui .button-primary.disabled { |
277 .wp-core-ui .button-primary.disabled { |
278 color: #a0a5aa !important; |
278 color: #a7aaad !important; |
279 background: #f7f7f7 !important; |
279 background: #f6f7f7 !important; |
280 border-color: #ddd !important; |
280 border-color: #dcdcde !important; |
281 box-shadow: none !important; |
281 box-shadow: none !important; |
282 text-shadow: none !important; |
282 text-shadow: none !important; |
283 cursor: default; |
283 cursor: default; |
284 } |
284 } |
285 |
285 |
318 z-index: 1; |
318 z-index: 1; |
319 } |
319 } |
320 |
320 |
321 /* pressed state e.g. a selected setting */ |
321 /* pressed state e.g. a selected setting */ |
322 .wp-core-ui .button-group > .button.active { |
322 .wp-core-ui .button-group > .button.active { |
323 background-color: #e2e4e7; |
323 background-color: #dcdcde; |
324 color: #00669b; |
324 color: #135e96; |
325 border-color: #016087; |
325 border-color: #0a4b78; |
326 box-shadow: inset 0 2px 5px -3px #016087; |
326 box-shadow: inset 0 2px 5px -3px #0a4b78; |
327 } |
327 } |
328 |
328 |
329 .wp-core-ui .button-group > .button.active:focus { |
329 .wp-core-ui .button-group > .button.active:focus { |
330 border-color: #007cba; |
330 border-color: #3582c4; |
331 box-shadow: |
331 box-shadow: |
332 inset 0 2px 5px -3px #016087, |
332 inset 0 2px 5px -3px #0a4b78, |
333 0 0 0 1px #007cba; |
333 0 0 0 1px #3582c4; |
334 } |
334 } |
335 |
335 |
336 /* ---------------------------------------------------------------------------- |
336 /* ---------------------------------------------------------------------------- |
337 5.0 - Responsive Button Styles |
337 5.0 - Responsive Button Styles |
338 ---------------------------------------------------------------------------- */ |
338 ---------------------------------------------------------------------------- */ |