Looks good to me. We can safely drop the hh:mm:ss indicators in my opinion. For the background-image gradients, we could easily just add the other browser prefixes to make them work everywhere.
If there are no objections I'll do that and commit the change tomorrow. - Joe On 22 November 2012 16:56, Matevz Bradac <[email protected]> wrote: > Hi, > > Below is a patch for #222 which fixes the styling of jQuery's > datepicker, the result can be seen at http://imgur.com/Gb9jL. > I wasn't sure what to do with the Time/Hour/Minute/Second though (I > suppose it could be removed, as it's not of particular use), > so I just left them there for now. For the "background-image" I copied > the existing overrides, although the gradients only work > in Firefox for now. I guess this should be resolved in general under a > new ticket. > > -- > matevz > > > > Index: bloodhound_theme/bhtheme/htdocs/bloodhound.css > =================================================================== > --- bloodhound_theme/bhtheme/htdocs/bloodhound.css (revision 1412560) > +++ bloodhound_theme/bhtheme/htdocs/bloodhound.css (working copy) > @@ -473,10 +473,6 @@ > padding: 7px 14px; > } > > -/* @end */ > - > -/* @group Bootstrap extensions */ > - > #alert-log { > left: 500px; > position: fixed; > @@ -486,6 +482,145 @@ > > /* @end */ > > +/* @group jQuery UI extensions (fix for Bootstrap) */ > +.ui-datepicker { > + background-color: #FBFBFB; > + background-image: -moz-linear-gradient(center top , #FFFFFF, #F5F5F5); > + background-repeat: repeat-x; > + border: 1px solid #DDDDDD; > + border-radius: 3px 3px 3px 3px; > + box-shadow: 0 1px 0 #FFFFFF inset; > + list-style: none outside none; > + margin: 0 0 18px; > + padding: 7px 14px; > +} > + > +.ui-datepicker a.ui-datepicker-prev, > +.ui-datepicker a.ui-datepicker-next { > + background-color: #FBFBFB; > + background-image: -moz-linear-gradient(center top , #FFFFFF, #F5F5F5); > + background-repeat: repeat-x; > + border: 1px solid #DDDDDD; > + border-radius: 3px 3px 3px 3px; > + box-shadow: 0 1px 0 #FFFFFF inset; > + padding: 2px 10px; > + margin: 2px 0 10px 0; > + cursor: pointer; > + text-decoration: none; > +} > + > +.ui-datepicker a.ui-datepicker-prev:before { > + content: "\ab\a0"; > +} > + > +.ui-datepicker a.ui-datepicker-next:after { > + content: "\a0\bb"; > +} > + > +.ui-datepicker a.ui-datepicker-prev { > + float: left; > +} > + > +.ui-datepicker a.ui-datepicker-next { > + float: right; > +} > + > +.ui-datepicker-title { > + clear: both; > +} > + > +.ui-datepicker-calendar td { > + background-color: #FBFBFB; > + background-image: -moz-linear-gradient(center top , #FFFFFF, #F5F5F5); > + background-repeat: repeat-x; > + border: 1px solid #DDDDDD; > + border-radius: 3px 3px 3px 3px; > + box-shadow: 0 1px 0 #FFFFFF inset; > + text-align: center; > +} > + > +.ui-datepicker-calendar td a { > + display: block; > + padding: 2px 4px; > + text-decoration: none; > +} > + > +.ui-datepicker-calendar td a.ui-state-hover, > +.ui-datepicker-calendar td a.ui-state-active { > + color: #FBFBFB; > + background-color: #08c; > +} > + > +/* stuff below was copied from bootstrap's default button rules */ > +.ui-datepicker button { > + display: inline-block; > + *display: inline; > + padding: 4px 12px; > + margin-bottom: 0; > + *margin-left: .3em; > + font-size: 14px; > + line-height: 20px; > + *line-height: 20px; > + color: #333333; > + text-align: center; > + text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); > + vertical-align: middle; > + cursor: pointer; > + background-color: #f5f5f5; > + *background-color: #e6e6e6; > + background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6); > + background-image: -webkit-gradient(linear, 0 0, 0 100%, > from(#ffffff), to(#e6e6e6)); > + background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6); > + background-image: -o-linear-gradient(top, #ffffff, #e6e6e6); > + background-image: linear-gradient(to bottom, #ffffff, #e6e6e6); > + background-repeat: repeat-x; > + border: 1px solid #bbbbbb; > + *border: 0; > + border-color: #e6e6e6 #e6e6e6 #bfbfbf; > + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); > + border-bottom-color: #a2a2a2; > + -webkit-border-radius: 4px; > + -moz-border-radius: 4px; > + border-radius: 4px; > + filter: > progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', > endColorstr='#ffe6e6e6', GradientType=0); > + filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); > + *zoom: 1; > + -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px > 2px rgba(0, 0, 0, 0.05); > + -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px > 2px rgba(0, 0, 0, 0.05); > + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px > 2px rgba(0, 0, 0, 0.05); > + border-color: #c5c5c5; > + border-color: rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.15) rgba(0, 0, 0, > 0.25); > + > + margin-right: .3em; > +} > + > +.ui-datepicker button:hover, > +.ui-datepicker button:active { > + color: #333333; > + background-color: #e6e6e6; > + *background-color: #d9d9d9; > +} > + > +.ui-datepicker button:active { > + background-color: #cccccc; > +} > + > +.ui-datepicker button:hover { > + color: #333333; > + text-decoration: none; > + background-color: #e6e6e6; > + *background-color: #d9d9d9; > + /* Buttons in IE7 don't get borders, so darken on hover */ > + > + background-position: 0 -15px; > + -webkit-transition: background-position 0.1s linear; > + -moz-transition: background-position 0.1s linear; > + -o-transition: background-position 0.1s linear; > + transition: background-position 0.1s linear; > +} > + > +/* @end */ > + > /* @group Sticky Status */ > > [class*="span"].stickyStatus { > -- Joe Dreimann UX Designer | WANdisco <http://www.wandisco.com/> * * *Transform your software development department. Register for a free SVN HealthCheck <http://go.wandisco.com/HealthCheck-Sig.html> *
