incubator-bloodhound-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Joachim Dreimann <joachim.dreim...@wandisco.com>
Subject Re: #222: Implement Bootstrap styling for date picker
Date Thu, 22 Nov 2012 17:20:02 GMT
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 <matevzb@gmail.com> 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> *

Mime
  • Unnamed multipart/alternative (inline, None, 0 bytes)
View raw message