Permalink
Browse files

Theme: Made active and focus state themeable. Fixes #3750

  • Loading branch information...
jaspermdegroot committed Apr 10, 2013
1 parent 5bf7600 commit 3cc45efdbde0ce9c63f40544a779014017d48c92
Showing with 101 additions and 49 deletions.
  1. +101 −49 css/themes/default/jquery.mobile.theme.css
@@ -1,3 +1,20 @@
/* Globals */
/* Focus state
-----------------------------------------------------------------------------------------------------------*/
.ui-btn:focus, .ui-link-inherit:focus {
outline: 0;
}
.ui-btn.ui-focus {
z-index: 1;
}
.ui-mobile-nosupport-boxshadow * {
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
/* Swatches */
/* A
@@ -119,6 +136,47 @@
text-decoration: none;
}
.ui-btn-up-a.ui-btn-active,
.ui-btn-hover-a.ui-btn-active,
.ui-btn-down-a.ui-btn-active {
border: 1px solid #2373a5 /*{a-bactive-border}*/;
background: #5393c5 /*{a-bactive-background-color}*/;
font-weight: bold;
color: #fff /*{a-bactive-color}*/;
cursor: pointer;
text-shadow: 0 /*{a-bactive-shadow-x}*/ 1px /*{a-bactive-shadow-y}*/ 0 /*{a-bactive-shadow-radius}*/ #3373a5 /*{a-bactive-shadow-color}*/;
text-decoration: none;
font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
}
.ui-btn-up-a.ui-btn-active:visited,
.ui-btn-hover-a.ui-btn-active:visited,
.ui-btn-down-a.ui-btn-active:visited,
.ui-btn-up-a.ui-btn-active:hover,
.ui-btn-hover-a.ui-btn-active:hover,
.ui-btn-down-a.ui-btn-active:hover,
.ui-btn-up-a.ui-btn-active a.ui-link-inherit,
.ui-btn-hover-a.ui-btn-active a.ui-link-inherit,
.ui-btn-down-a.ui-btn-active a.ui-link-inherit {
color: #fff /*{a-bactive-color}*/;
}
.ui-btn-up-a.ui-focus,
.ui-btn-hover-a.ui-focus,
.ui-btn-down-a.ui-focus,
.ui-btn-up-a:focus,
.ui-btn-hover-a:focus,
.ui-btn-down-a:focus {
-moz-box-shadow: inset 0 0 3px #387bbe /*{a-bactive-background-color}*/, 0 0 9px #387bbe /*{a-bactive-background-color}*/;
-webkit-box-shadow: inset 0 0 3px #387bbe /*{a-bactive-background-color}*/, 0 0 9px #387bbe /*{a-bactive-background-color}*/;
box-shadow: inset 0 0 3px #387bbe /*{a-bactive-background-color}*/, 0 0 9px #387bbe /*{a-bactive-background-color}*/;
}
.ui-body-a.ui-input-text.ui-focus,
.ui-body-a.ui-input-search.ui-focus {
-moz-box-shadow: 0 0 12px #387bbe /*{a-bactive-background-color}*/;
-webkit-box-shadow: 0 0 12px #387bbe /*{a-bactive-background-color}*/;
box-shadow: 0 0 12px #387bbe /*{a-bactive-background-color}*/;
}
/* B
-----------------------------------------------------------------------------------------------------------*/
@@ -239,6 +297,48 @@
text-decoration: none;
}
.ui-btn-up-b.ui-btn-active,
.ui-btn-hover-b.ui-btn-active,
.ui-btn-down-b.ui-btn-active {
border: 1px solid #2373a5 /*{b-bactive-border}*/;
background: #5393c5 /*{b-bactive-background-color}*/;
font-weight: bold;
color: #fff /*{b-bactive-color}*/;
cursor: pointer;
text-shadow: 0 /*{b-bactive-shadow-x}*/ 1px /*{b-bactive-shadow-y}*/ 0 /*{b-bactive-shadow-radius}*/ #3373a5 /*{b-bactive-shadow-color}*/;
text-decoration: none;
font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
}
.ui-btn-up-b.ui-btn-active:visited,
.ui-btn-hover-b.ui-btn-active:visited,
.ui-btn-down-b.ui-btn-active:visited,
.ui-btn-up-b.ui-btn-active:hover,
.ui-btn-hover-b.ui-btn-active:hover,
.ui-btn-down-b.ui-btn-active:hover,
.ui-btn-up-b.ui-btn-active a.ui-link-inherit,
.ui-btn-hover-b.ui-btn-active a.ui-link-inherit,
.ui-btn-down-b.ui-btn-active a.ui-link-inherit {
color: #fff /*{b-bactive-color}*/;
}
.ui-btn-up-b.ui-focus,
.ui-btn-hover-b.ui-focus,
.ui-btn-down-b.ui-focus,
.ui-btn-up-b:focus,
.ui-btn-hover-b:focus,
.ui-btn-down-b:focus {
-moz-box-shadow: inset 0 0 3px #387bbe /*{b-bactive-background-color}*/, 0 0 9px #387bbe /*{b-bactive-background-color}*/;
-webkit-box-shadow: inset 0 0 3px #387bbe /*{b-bactive-background-color}*/, 0 0 9px #387bbe /*{b-bactive-background-color}*/;
box-shadow: inset 0 0 3px #387bbe /*{b-bactive-background-color}*/, 0 0 9px #387bbe /*{b-bactive-background-color}*/;
}
.ui-body-b.ui-input-text.ui-focus,
.ui-body-b.ui-input-search.ui-focus {
-moz-box-shadow: 0 0 12px #387bbe /*{b-bactive-background-color}*/;
-webkit-box-shadow: 0 0 12px #387bbe /*{b-bactive-background-color}*/;
box-shadow: 0 0 12px #387bbe /*{b-bactive-background-color}*/;
}
/* Structure */
/* links within "buttons"
@@ -248,25 +348,6 @@ a.ui-link-inherit {
text-decoration: none !important;
}
/* Active class used as the "on" state across all themes
-----------------------------------------------------------------------------------------------------------*/
.ui-btn-active {
border: 1px solid #2373a5 /*{global-active-border}*/;
background: #5393c5 /*{global-active-background-color}*/;
font-weight: bold;
color: #fff /*{global-active-color}*/;
cursor: pointer;
text-shadow: 0 /*{global-active-shadow-x}*/ 1px /*{global-active-shadow-y}*/ 0 /*{global-active-shadow-radius}*/ #3373a5 /*{global-active-shadow-color}*/;
text-decoration: none;
font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
}
.ui-btn-active:visited,
.ui-btn-active:hover,
.ui-btn-active a.ui-link-inherit {
color: #fff /*{global-active-color}*/;
}
/* corner rounding classes
-----------------------------------------------------------------------------------------------------------*/
@@ -588,38 +669,9 @@ a.ui-link-inherit {
box-shadow: 0 1px 0 rgba(255,255,255,.4) /*{global-icon-shadow}*/;
}
/* Focus state - set here for specificity (note: these classes are added by JavaScript)
/* Outline focus style when no bo-shadow
-----------------------------------------------------------------------------------------------------------*/
.ui-btn:focus, .ui-link-inherit:focus {
outline: 0;
}
.ui-btn.ui-focus {
z-index: 1;
}
.ui-focus,
.ui-btn:focus {
-moz-box-shadow: inset 0 0 3px #387bbe /*{global-active-background-color}*/, 0 0 9px #387bbe /*{global-active-background-color}*/;
-webkit-box-shadow: inset 0 0 3px #387bbe /*{global-active-background-color}*/, 0 0 9px #387bbe /*{global-active-background-color}*/;
box-shadow: inset 0 0 3px #387bbe /*{global-active-background-color}*/, 0 0 9px #387bbe /*{global-active-background-color}*/;
}
.ui-input-text.ui-focus,
.ui-input-search.ui-focus {
-moz-box-shadow: 0 0 12px #387bbe /*{global-active-background-color}*/;
-webkit-box-shadow: 0 0 12px #387bbe /*{global-active-background-color}*/;
box-shadow: 0 0 12px #387bbe /*{global-active-background-color}*/;
}
/* unset box shadow in browsers that don't do it right
-----------------------------------------------------------------------------------------------------------*/
.ui-mobile-nosupport-boxshadow * {
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
/* ...and bring back focus */
.ui-mobile-nosupport-boxshadow .ui-focus,
.ui-mobile-nosupport-boxshadow .ui-btn:focus,
.ui-mobile-nosupport-boxshadow .ui-link-inherit:focus {

0 comments on commit 3cc45ef

Please sign in to comment.