148 } |
143 } |
149 |
144 |
150 .wp-core-ui .button.focus, |
145 .wp-core-ui .button.focus, |
151 .wp-core-ui .button:focus, |
146 .wp-core-ui .button:focus, |
152 .wp-core-ui .button-secondary:focus { |
147 .wp-core-ui .button-secondary:focus { |
153 -webkit-box-shadow: |
148 border-color: #5b9dd9; |
154 0 0 0 1px #5b9dd9, |
149 box-shadow: 0 0 3px rgba( 0, 115, 170, .8 ); |
155 0 0 2px 1px rgba(30, 140, 190, .8); |
|
156 box-shadow: |
|
157 0 0 0 1px #5b9dd9, |
|
158 0 0 2px 1px rgba(30, 140, 190, .8); |
|
159 } |
150 } |
160 |
151 |
161 .wp-core-ui .button.active, |
152 .wp-core-ui .button.active, |
162 .wp-core-ui .button.active:hover, |
153 .wp-core-ui .button.active:hover, |
163 .wp-core-ui .button:active, |
154 .wp-core-ui .button:active, |
164 .wp-core-ui .button-secondary:active { |
155 .wp-core-ui .button-secondary:active { |
165 background: #eee; |
156 background: #eee; |
166 border-color: #999; |
157 border-color: #999; |
167 color: #32373c; |
158 box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ); |
168 -webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ); |
159 -webkit-transform: translateY(1px); |
169 box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ); |
160 transform: translateY(1px); |
170 } |
161 } |
171 |
162 |
172 .wp-core-ui .button.active:focus { |
163 .wp-core-ui .button.active:focus { |
173 -webkit-box-shadow: |
164 border-color: #5b9dd9; |
174 inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ), |
|
175 0 0 0 1px #5b9dd9, |
|
176 0 0 2px 1px rgba(30, 140, 190, .8); |
|
177 box-shadow: |
165 box-shadow: |
178 inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ), |
166 inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ), |
179 0 0 0 1px #5b9dd9, |
167 0 0 3px rgba( 0, 115, 170, .8 ); |
180 0 0 2px 1px rgba(30, 140, 190, .8); |
|
181 } |
168 } |
182 |
169 |
183 .wp-core-ui .button[disabled], |
170 .wp-core-ui .button[disabled], |
184 .wp-core-ui .button:disabled, |
171 .wp-core-ui .button:disabled, |
185 .wp-core-ui .button.disabled, |
172 .wp-core-ui .button.disabled, |
188 .wp-core-ui .button-secondary.disabled, |
175 .wp-core-ui .button-secondary.disabled, |
189 .wp-core-ui .button-disabled { |
176 .wp-core-ui .button-disabled { |
190 color: #a0a5aa !important; |
177 color: #a0a5aa !important; |
191 border-color: #ddd !important; |
178 border-color: #ddd !important; |
192 background: #f7f7f7 !important; |
179 background: #f7f7f7 !important; |
193 -webkit-box-shadow: none !important; |
|
194 box-shadow: none !important; |
180 box-shadow: none !important; |
195 text-shadow: 0 1px 0 #fff !important; |
181 text-shadow: 0 1px 0 #fff !important; |
196 cursor: default; |
182 cursor: default; |
|
183 -webkit-transform: none !important; |
|
184 transform: none !important; |
|
185 } |
|
186 |
|
187 /* Buttons that look like links, for a cross of good semantics with the visual */ |
|
188 .wp-core-ui .button-link { |
|
189 margin: 0; |
|
190 padding: 0; |
|
191 box-shadow: none; |
|
192 border: 0; |
|
193 border-radius: 0; |
|
194 background: none; |
|
195 outline: none; |
|
196 cursor: pointer; |
|
197 text-align: right; |
|
198 /* Mimics the default link style in common.css */ |
|
199 color: #0073aa; |
|
200 text-decoration: underline; |
|
201 transition-property: border, background, color; |
|
202 transition-duration: .05s; |
|
203 transition-timing-function: ease-in-out; |
|
204 } |
|
205 |
|
206 .wp-core-ui .button-link:hover, |
|
207 .wp-core-ui .button-link:active { |
|
208 color: #00a0d2; |
|
209 } |
|
210 |
|
211 .wp-core-ui .button-link:focus { |
|
212 color: #124964; |
|
213 box-shadow: |
|
214 0 0 0 1px #5b9dd9, |
|
215 0 0 2px 1px rgba(30, 140, 190, .8); |
|
216 } |
|
217 |
|
218 .wp-core-ui .button-link-delete { |
|
219 color: #a00; |
|
220 } |
|
221 |
|
222 .wp-core-ui .button-link-delete:hover, |
|
223 .wp-core-ui .button-link-delete:focus { |
|
224 color: #dc3232; |
|
225 } |
|
226 |
|
227 .ie8 .wp-core-ui .button-link:focus { |
|
228 outline: #5b9dd9 solid 1px; |
197 } |
229 } |
198 |
230 |
199 /* ---------------------------------------------------------------------------- |
231 /* ---------------------------------------------------------------------------- |
200 3.0 - Primary Button Style |
232 3.0 - Primary Button Style |
201 ---------------------------------------------------------------------------- */ |
233 ---------------------------------------------------------------------------- */ |
202 |
234 |
203 .wp-core-ui .button-primary { |
235 .wp-core-ui .button-primary { |
204 background: #00a0d2; |
236 background: #0085ba; |
205 border-color: #0073aa; |
237 border-color: #0073aa #006799 #006799; |
206 -webkit-box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.5), 0 1px 0 rgba( 0, 0, 0, 0.15 ); |
238 box-shadow: 0 1px 0 #006799; |
207 box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.5 ), 0 1px 0 rgba( 0, 0, 0, 0.15 ); |
239 color: #fff; |
208 color: #fff; |
|
209 text-decoration: none; |
240 text-decoration: none; |
|
241 text-shadow: 0 -1px 1px #006799, |
|
242 -1px 0 1px #006799, |
|
243 0 1px 1px #006799, |
|
244 1px 0 1px #006799; |
210 } |
245 } |
211 |
246 |
212 .wp-core-ui .button-primary.hover, |
247 .wp-core-ui .button-primary.hover, |
213 .wp-core-ui .button-primary:hover, |
248 .wp-core-ui .button-primary:hover, |
214 .wp-core-ui .button-primary.focus, |
249 .wp-core-ui .button-primary.focus, |
215 .wp-core-ui .button-primary:focus { |
250 .wp-core-ui .button-primary:focus { |
216 background: #0091cd; |
251 background: #008ec2; |
217 border-color: #0073aa; |
252 border-color: #006799; |
218 -webkit-box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.6 ); |
|
219 box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.6 ); |
|
220 color: #fff; |
253 color: #fff; |
221 } |
254 } |
222 |
255 |
223 .wp-core-ui .button-primary.focus, |
256 .wp-core-ui .button-primary.focus, |
224 .wp-core-ui .button-primary:focus { |
257 .wp-core-ui .button-primary:focus { |
225 border-color: #0e3950; |
258 box-shadow: 0 1px 0 #0073aa, |
226 -webkit-box-shadow: |
259 0 0 2px 1px #33b3db; |
227 inset 0 1px 0 rgba( 120, 200, 230, 0.6 ), |
|
228 0 0 0 1px #5b9dd9, |
|
229 0 0 2px 1px rgba(30, 140, 190, .8); |
|
230 box-shadow: |
|
231 inset 0 1px 0 rgba( 120, 200, 230, 0.6 ), |
|
232 0 0 0 1px #5b9dd9, |
|
233 0 0 2px 1px rgba(30, 140, 190, .8); |
|
234 } |
260 } |
235 |
261 |
236 .wp-core-ui .button-primary.active, |
262 .wp-core-ui .button-primary.active, |
237 .wp-core-ui .button-primary.active:hover, |
263 .wp-core-ui .button-primary.active:hover, |
238 .wp-core-ui .button-primary.active:focus, |
264 .wp-core-ui .button-primary.active:focus, |
239 .wp-core-ui .button-primary:active { |
265 .wp-core-ui .button-primary:active { |
240 background: #0073aa; |
266 background: #0073aa; |
241 border-color: #005082; |
267 border-color: #006799; |
242 color: rgba( 255, 255, 255, 0.95 ); |
268 box-shadow: inset 0 2px 0 #006799; |
243 -webkit-box-shadow: inset 0 1px 0 rgba( 0, 0, 0, 0.1 ); |
269 vertical-align: top; |
244 box-shadow: inset 0 1px 0 rgba( 0, 0, 0, 0.1 ); |
|
245 vertical-align: top; |
|
246 } |
270 } |
247 |
271 |
248 .wp-core-ui .button-primary[disabled], |
272 .wp-core-ui .button-primary[disabled], |
249 .wp-core-ui .button-primary:disabled, |
273 .wp-core-ui .button-primary:disabled, |
250 .wp-core-ui .button-primary-disabled, |
274 .wp-core-ui .button-primary-disabled, |
251 .wp-core-ui .button-primary.disabled { |
275 .wp-core-ui .button-primary.disabled { |
252 color: #94cde7 !important; |
276 color: #66c6e4 !important; |
253 background: #298cba !important; |
277 background: #008ec2 !important; |
254 border-color: #1b607f !important; |
278 border-color: #007cb2 !important; |
255 -webkit-box-shadow: none !important; |
|
256 box-shadow: none !important; |
279 box-shadow: none !important; |
257 text-shadow: 0 -1px 0 rgba( 0, 0, 0, 0.1 ) !important; |
280 text-shadow: 0 -1px 0 rgba( 0, 0, 0, 0.1 ) !important; |
258 cursor: default; |
281 cursor: default; |
|
282 } |
|
283 |
|
284 .wp-core-ui .button.button-primary.button-hero { |
|
285 box-shadow: 0 2px 0 #006799; |
|
286 } |
|
287 |
|
288 .wp-core-ui .button.button-primary.button-hero.active, |
|
289 .wp-core-ui .button.button-primary.button-hero.active:hover, |
|
290 .wp-core-ui .button.button-primary.button-hero.active:focus, |
|
291 .wp-core-ui .button.button-primary.button-hero:active { |
|
292 box-shadow: inset 0 3px 0 #006799; |
259 } |
293 } |
260 |
294 |
261 /* ---------------------------------------------------------------------------- |
295 /* ---------------------------------------------------------------------------- |
262 4.0 - Button Groups |
296 4.0 - Button Groups |
263 ---------------------------------------------------------------------------- */ |
297 ---------------------------------------------------------------------------- */ |