incubator-bloodhound-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Matevz Bradac <mate...@gmail.com>
Subject #222: Implement Bootstrap styling for date picker
Date Thu, 22 Nov 2012 16:56:03 GMT
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 {

Mime
View raw message