144 |
147 |
145 .wp-core-ui .button.focus, |
148 .wp-core-ui .button.focus, |
146 .wp-core-ui .button:focus, |
149 .wp-core-ui .button:focus, |
147 .wp-core-ui .button-secondary:focus { |
150 .wp-core-ui .button-secondary:focus { |
148 border-color: #5b9dd9; |
151 border-color: #5b9dd9; |
149 box-shadow: 0 0 3px rgba( 0, 115, 170, .8 ); |
152 box-shadow: 0 0 3px rgba(0, 115, 170, 0.8); |
150 } |
153 } |
151 |
154 |
152 .wp-core-ui .button.active, |
155 .wp-core-ui .button.active, |
153 .wp-core-ui .button.active:hover, |
156 .wp-core-ui .button.active:hover, |
154 .wp-core-ui .button:active, |
157 .wp-core-ui .button:active, |
155 .wp-core-ui .button-secondary:active { |
158 .wp-core-ui .button-secondary:active { |
156 background: #eee; |
159 background: #eee; |
157 border-color: #999; |
160 border-color: #999; |
158 box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ); |
161 box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5); |
159 -webkit-transform: translateY(1px); |
|
160 transform: translateY(1px); |
162 transform: translateY(1px); |
161 } |
163 } |
162 |
164 |
163 .wp-core-ui .button.active:focus { |
165 .wp-core-ui .button.active:focus { |
164 border-color: #5b9dd9; |
166 border-color: #5b9dd9; |
165 box-shadow: |
167 box-shadow: |
166 inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ), |
168 inset 0 2px 5px -3px rgba(0, 0, 0, 0.5), |
167 0 0 3px rgba( 0, 115, 170, .8 ); |
169 0 0 3px rgba(0, 115, 170, 0.8); |
168 } |
170 } |
169 |
171 |
170 .wp-core-ui .button[disabled], |
172 .wp-core-ui .button[disabled], |
171 .wp-core-ui .button:disabled, |
173 .wp-core-ui .button:disabled, |
172 .wp-core-ui .button.disabled, |
174 .wp-core-ui .button.disabled, |
178 border-color: #ddd !important; |
180 border-color: #ddd !important; |
179 background: #f7f7f7 !important; |
181 background: #f7f7f7 !important; |
180 box-shadow: none !important; |
182 box-shadow: none !important; |
181 text-shadow: 0 1px 0 #fff !important; |
183 text-shadow: 0 1px 0 #fff !important; |
182 cursor: default; |
184 cursor: default; |
183 -webkit-transform: none !important; |
|
184 transform: none !important; |
185 transform: none !important; |
185 } |
186 } |
186 |
187 |
187 /* Buttons that look like links, for a cross of good semantics with the visual */ |
188 /* Buttons that look like links, for a cross of good semantics with the visual */ |
188 .wp-core-ui .button-link { |
189 .wp-core-ui .button-link { |
210 |
210 |
211 .wp-core-ui .button-link:focus { |
211 .wp-core-ui .button-link:focus { |
212 color: #124964; |
212 color: #124964; |
213 box-shadow: |
213 box-shadow: |
214 0 0 0 1px #5b9dd9, |
214 0 0 0 1px #5b9dd9, |
215 0 0 2px 1px rgba(30, 140, 190, .8); |
215 0 0 2px 1px rgba(30, 140, 190, 0.8); |
|
216 /* Only visible in Windows High Contrast mode */ |
|
217 outline: 1px solid transparent; |
216 } |
218 } |
217 |
219 |
218 .wp-core-ui .button-link-delete { |
220 .wp-core-ui .button-link-delete { |
219 color: #a00; |
221 color: #a00; |
220 } |
222 } |
221 |
223 |
222 .wp-core-ui .button-link-delete:hover, |
224 .wp-core-ui .button-link-delete:hover, |
223 .wp-core-ui .button-link-delete:focus { |
225 .wp-core-ui .button-link-delete:focus { |
224 color: #dc3232; |
226 color: #dc3232; |
|
227 background: transparent; |
|
228 } |
|
229 |
|
230 .wp-core-ui .button-link-delete:disabled { |
|
231 /* overrides the default buttons disabled background */ |
|
232 background: transparent !important; |
225 } |
233 } |
226 |
234 |
227 .ie8 .wp-core-ui .button-link:focus { |
235 .ie8 .wp-core-ui .button-link:focus { |
228 outline: #5b9dd9 solid 1px; |
236 outline: #5b9dd9 solid 1px; |
229 } |
237 } |
264 .wp-core-ui .button-primary.active:focus, |
272 .wp-core-ui .button-primary.active:focus, |
265 .wp-core-ui .button-primary:active { |
273 .wp-core-ui .button-primary:active { |
266 background: #0073aa; |
274 background: #0073aa; |
267 border-color: #006799; |
275 border-color: #006799; |
268 box-shadow: inset 0 2px 0 #006799; |
276 box-shadow: inset 0 2px 0 #006799; |
269 vertical-align: top; |
|
270 } |
277 } |
271 |
278 |
272 .wp-core-ui .button-primary[disabled], |
279 .wp-core-ui .button-primary[disabled], |
273 .wp-core-ui .button-primary:disabled, |
280 .wp-core-ui .button-primary:disabled, |
274 .wp-core-ui .button-primary-disabled, |
281 .wp-core-ui .button-primary-disabled, |
275 .wp-core-ui .button-primary.disabled { |
282 .wp-core-ui .button-primary.disabled { |
276 color: #66c6e4 !important; |
283 color: #66c6e4 !important; |
277 background: #008ec2 !important; |
284 background: #008ec2 !important; |
278 border-color: #007cb2 !important; |
285 border-color: #007cb2 !important; |
279 box-shadow: none !important; |
286 box-shadow: none !important; |
280 text-shadow: 0 -1px 0 rgba( 0, 0, 0, 0.1 ) !important; |
287 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1) !important; |
281 cursor: default; |
288 cursor: default; |
282 } |
289 } |
283 |
290 |
284 .wp-core-ui .button.button-primary.button-hero { |
291 .wp-core-ui .button.button-primary.button-hero { |
285 box-shadow: 0 2px 0 #006799; |
292 box-shadow: 0 2px 0 #006799; |
|
293 } |
|
294 |
|
295 .wp-core-ui .button.button-primary.button-hero:focus { |
|
296 box-shadow: |
|
297 0 2px 0 #006799, |
|
298 0 1px 0 #0073aa, |
|
299 0 0 2px 1px #33b3db; |
286 } |
300 } |
287 |
301 |
288 .wp-core-ui .button.button-primary.button-hero.active, |
302 .wp-core-ui .button.button-primary.button-hero.active, |
289 .wp-core-ui .button.button-primary.button-hero.active:hover, |
303 .wp-core-ui .button.button-primary.button-hero.active:hover, |
290 .wp-core-ui .button.button-primary.button-hero.active:focus, |
304 .wp-core-ui .button.button-primary.button-hero.active:focus, |
291 .wp-core-ui .button.button-primary.button-hero:active { |
305 .wp-core-ui .button.button-primary.button-hero:active { |
292 box-shadow: inset 0 3px 0 #006799; |
306 box-shadow: inset 0 3px 0 #006799; |
293 } |
307 } |
294 |
308 |
295 /* ---------------------------------------------------------------------------- |
309 /* ---------------------------------------------------------------------------- |
296 4.0 - Button Groups |
310 4.0 - Button Groups |
297 ---------------------------------------------------------------------------- */ |
311 ---------------------------------------------------------------------------- */ |
334 |
348 |
335 /* ---------------------------------------------------------------------------- |
349 /* ---------------------------------------------------------------------------- |
336 5.0 - Responsive Button Styles |
350 5.0 - Responsive Button Styles |
337 ---------------------------------------------------------------------------- */ |
351 ---------------------------------------------------------------------------- */ |
338 |
352 |
339 @media screen and ( max-width: 782px ) { |
353 @media screen and (max-width: 782px) { |
340 |
354 |
341 .wp-core-ui .button, |
355 .wp-core-ui .button, |
342 .wp-core-ui .button.button-large, |
356 .wp-core-ui .button.button-large, |
343 .wp-core-ui .button.button-small, |
357 .wp-core-ui .button.button-small, |
344 input#publish, |
358 input#publish, |