Skip to content
This repository was archived by the owner on Oct 8, 2021. It is now read-only.

Commit 3cc45ef

Browse files
jaspermdegrootjaspermdegroot
committed
Theme: Made active and focus state themeable. Fixes #3750 
1 parent 5bf7600 commit 3cc45ef

File tree

1 file changed

+101
-49
lines changed

1 file changed

+101
-49
lines changed

‎css/themes/default/jquery.mobile.theme.css‎

Lines changed: 101 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,20 @@
1+
/* Globals */
2+
3+
/* Focus state
4+
-----------------------------------------------------------------------------------------------------------*/
5+
6+
.ui-btn:focus, .ui-link-inherit:focus {
7+
outline: 0;
8+
}
9+
.ui-btn.ui-focus {
10+
z-index: 1;
11+
}
12+
.ui-mobile-nosupport-boxshadow * {
13+
-moz-box-shadow: none !important;
14+
-webkit-box-shadow: none !important;
15+
box-shadow: none !important;
16+
}
17+
118
/* Swatches */
219

320
/* A
@@ -119,6 +136,47 @@
119136
text-decoration: none;
120137
}
121138

139+
.ui-btn-up-a.ui-btn-active,
140+
.ui-btn-hover-a.ui-btn-active,
141+
.ui-btn-down-a.ui-btn-active {
142+
border: 1px solid #2373a5 /*{a-bactive-border}*/;
143+
background: #5393c5 /*{a-bactive-background-color}*/;
144+
font-weight: bold;
145+
color: #fff /*{a-bactive-color}*/;
146+
cursor: pointer;
147+
text-shadow: 0 /*{a-bactive-shadow-x}*/ 1px /*{a-bactive-shadow-y}*/ 0 /*{a-bactive-shadow-radius}*/ #3373a5 /*{a-bactive-shadow-color}*/;
148+
text-decoration: none;
149+
font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
150+
}
151+
.ui-btn-up-a.ui-btn-active:visited,
152+
.ui-btn-hover-a.ui-btn-active:visited,
153+
.ui-btn-down-a.ui-btn-active:visited,
154+
.ui-btn-up-a.ui-btn-active:hover,
155+
.ui-btn-hover-a.ui-btn-active:hover,
156+
.ui-btn-down-a.ui-btn-active:hover,
157+
.ui-btn-up-a.ui-btn-active a.ui-link-inherit,
158+
.ui-btn-hover-a.ui-btn-active a.ui-link-inherit,
159+
.ui-btn-down-a.ui-btn-active a.ui-link-inherit {
160+
color: #fff /*{a-bactive-color}*/;
161+
}
162+
163+
.ui-btn-up-a.ui-focus,
164+
.ui-btn-hover-a.ui-focus,
165+
.ui-btn-down-a.ui-focus,
166+
.ui-btn-up-a:focus,
167+
.ui-btn-hover-a:focus,
168+
.ui-btn-down-a:focus {
169+
-moz-box-shadow: inset 0 0 3px #387bbe /*{a-bactive-background-color}*/, 0 0 9px #387bbe /*{a-bactive-background-color}*/;
170+
-webkit-box-shadow: inset 0 0 3px #387bbe /*{a-bactive-background-color}*/, 0 0 9px #387bbe /*{a-bactive-background-color}*/;
171+
box-shadow: inset 0 0 3px #387bbe /*{a-bactive-background-color}*/, 0 0 9px #387bbe /*{a-bactive-background-color}*/;
172+
}
173+
.ui-body-a.ui-input-text.ui-focus,
174+
.ui-body-a.ui-input-search.ui-focus {
175+
-moz-box-shadow: 0 0 12px #387bbe /*{a-bactive-background-color}*/;
176+
-webkit-box-shadow: 0 0 12px #387bbe /*{a-bactive-background-color}*/;
177+
box-shadow: 0 0 12px #387bbe /*{a-bactive-background-color}*/;
178+
}
179+
122180
/* B
123181
-----------------------------------------------------------------------------------------------------------*/
124182

@@ -239,6 +297,48 @@
239297
text-decoration: none;
240298
}
241299

300+
.ui-btn-up-b.ui-btn-active,
301+
.ui-btn-hover-b.ui-btn-active,
302+
.ui-btn-down-b.ui-btn-active {
303+
border: 1px solid #2373a5 /*{b-bactive-border}*/;
304+
background: #5393c5 /*{b-bactive-background-color}*/;
305+
font-weight: bold;
306+
color: #fff /*{b-bactive-color}*/;
307+
cursor: pointer;
308+
text-shadow: 0 /*{b-bactive-shadow-x}*/ 1px /*{b-bactive-shadow-y}*/ 0 /*{b-bactive-shadow-radius}*/ #3373a5 /*{b-bactive-shadow-color}*/;
309+
text-decoration: none;
310+
font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
311+
}
312+
.ui-btn-up-b.ui-btn-active:visited,
313+
.ui-btn-hover-b.ui-btn-active:visited,
314+
.ui-btn-down-b.ui-btn-active:visited,
315+
.ui-btn-up-b.ui-btn-active:hover,
316+
.ui-btn-hover-b.ui-btn-active:hover,
317+
.ui-btn-down-b.ui-btn-active:hover,
318+
.ui-btn-up-b.ui-btn-active a.ui-link-inherit,
319+
.ui-btn-hover-b.ui-btn-active a.ui-link-inherit,
320+
.ui-btn-down-b.ui-btn-active a.ui-link-inherit {
321+
color: #fff /*{b-bactive-color}*/;
322+
}
323+
324+
.ui-btn-up-b.ui-focus,
325+
.ui-btn-hover-b.ui-focus,
326+
.ui-btn-down-b.ui-focus,
327+
.ui-btn-up-b:focus,
328+
.ui-btn-hover-b:focus,
329+
.ui-btn-down-b:focus {
330+
-moz-box-shadow: inset 0 0 3px #387bbe /*{b-bactive-background-color}*/, 0 0 9px #387bbe /*{b-bactive-background-color}*/;
331+
-webkit-box-shadow: inset 0 0 3px #387bbe /*{b-bactive-background-color}*/, 0 0 9px #387bbe /*{b-bactive-background-color}*/;
332+
box-shadow: inset 0 0 3px #387bbe /*{b-bactive-background-color}*/, 0 0 9px #387bbe /*{b-bactive-background-color}*/;
333+
}
334+
.ui-body-b.ui-input-text.ui-focus,
335+
.ui-body-b.ui-input-search.ui-focus {
336+
-moz-box-shadow: 0 0 12px #387bbe /*{b-bactive-background-color}*/;
337+
-webkit-box-shadow: 0 0 12px #387bbe /*{b-bactive-background-color}*/;
338+
box-shadow: 0 0 12px #387bbe /*{b-bactive-background-color}*/;
339+
}
340+
341+
242342
/* Structure */
243343

244344
/* links within "buttons"
@@ -248,25 +348,6 @@ a.ui-link-inherit {
248348
text-decoration: none !important;
249349
}
250350

251-
252-
/* Active class used as the "on" state across all themes
253-
-----------------------------------------------------------------------------------------------------------*/
254-
.ui-btn-active {
255-
border: 1px solid #2373a5 /*{global-active-border}*/;
256-
background: #5393c5 /*{global-active-background-color}*/;
257-
font-weight: bold;
258-
color: #fff /*{global-active-color}*/;
259-
cursor: pointer;
260-
text-shadow: 0 /*{global-active-shadow-x}*/ 1px /*{global-active-shadow-y}*/ 0 /*{global-active-shadow-radius}*/ #3373a5 /*{global-active-shadow-color}*/;
261-
text-decoration: none;
262-
font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
263-
}
264-
.ui-btn-active:visited,
265-
.ui-btn-active:hover,
266-
.ui-btn-active a.ui-link-inherit {
267-
color: #fff /*{global-active-color}*/;
268-
}
269-
270351
/* corner rounding classes
271352
-----------------------------------------------------------------------------------------------------------*/
272353

@@ -588,38 +669,9 @@ a.ui-link-inherit {
588669
box-shadow: 0 1px 0 rgba(255,255,255,.4) /*{global-icon-shadow}*/;
589670
}
590671

591-
/* Focus state - set here for specificity (note: these classes are added by JavaScript)
672+
/* Outline focus style when no bo-shadow
592673
-----------------------------------------------------------------------------------------------------------*/
593674

594-
.ui-btn:focus, .ui-link-inherit:focus {
595-
outline: 0;
596-
}
597-
.ui-btn.ui-focus {
598-
z-index: 1;
599-
}
600-
.ui-focus,
601-
.ui-btn:focus {
602-
-moz-box-shadow: inset 0 0 3px #387bbe /*{global-active-background-color}*/, 0 0 9px #387bbe /*{global-active-background-color}*/;
603-
-webkit-box-shadow: inset 0 0 3px #387bbe /*{global-active-background-color}*/, 0 0 9px #387bbe /*{global-active-background-color}*/;
604-
box-shadow: inset 0 0 3px #387bbe /*{global-active-background-color}*/, 0 0 9px #387bbe /*{global-active-background-color}*/;
605-
}
606-
.ui-input-text.ui-focus,
607-
.ui-input-search.ui-focus {
608-
-moz-box-shadow: 0 0 12px #387bbe /*{global-active-background-color}*/;
609-
-webkit-box-shadow: 0 0 12px #387bbe /*{global-active-background-color}*/;
610-
box-shadow: 0 0 12px #387bbe /*{global-active-background-color}*/;
611-
}
612-
613-
/* unset box shadow in browsers that don't do it right
614-
-----------------------------------------------------------------------------------------------------------*/
615-
616-
.ui-mobile-nosupport-boxshadow * {
617-
-moz-box-shadow: none !important;
618-
-webkit-box-shadow: none !important;
619-
box-shadow: none !important;
620-
}
621-
622-
/* ...and bring back focus */
623675
.ui-mobile-nosupport-boxshadow .ui-focus,
624676
.ui-mobile-nosupport-boxshadow .ui-btn:focus,
625677
.ui-mobile-nosupport-boxshadow .ui-link-inherit:focus {

0 commit comments

Comments
 (0)