Author: jdreimann Date: Fri Nov 23 18:17:48 2012 New Revision: 1413011 URL: http://svn.apache.org/viewvc?rev=1413011&view=rev Log: Provides bootstrap style for datepicker, fixes #222. Code provided by matevzb, I only added the browser prefixes for bg-image gradients where required.
Modified: incubator/bloodhound/trunk/bloodhound_theme/bhtheme/htdocs/bloodhound.css Modified: incubator/bloodhound/trunk/bloodhound_theme/bhtheme/htdocs/bloodhound.css URL: http://svn.apache.org/viewvc/incubator/bloodhound/trunk/bloodhound_theme/bhtheme/htdocs/bloodhound.css?rev=1413011&r1=1413010&r2=1413011&view=diff ============================================================================== --- incubator/bloodhound/trunk/bloodhound_theme/bhtheme/htdocs/bloodhound.css (original) +++ incubator/bloodhound/trunk/bloodhound_theme/bhtheme/htdocs/bloodhound.css Fri Nov 23 18:17:48 2012 @@ -486,6 +486,162 @@ h6 { /* @end */ +/* @group jQuery UI extensions (fix for Bootstrap) */ +.ui-datepicker { + background-color: #FBFBFB; + background-image: -webkit-linear-gradient(center top , #FFFFFF, #F5F5F5); + background-image: -moz-linear-gradient(center top , #FFFFFF, #F5F5F5); + background-image: -o-linear-gradient(center top , #FFFFFF, #F5F5F5); + background-image: -ms-linear-gradient(center top , #FFFFFF, #F5F5F5); + background-image: 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: -webkit-linear-gradient(center top , #FFFFFF, #F5F5F5); + background-image: -moz-linear-gradient(center top , #FFFFFF, #F5F5F5); + background-image: -o-linear-gradient(center top , #FFFFFF, #F5F5F5); + background-image: -ms-linear-gradient(center top , #FFFFFF, #F5F5F5); + background-image: 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: -webkit-linear-gradient(center top , #FFFFFF, #F5F5F5); + background-image: -moz-linear-gradient(center top , #FFFFFF, #F5F5F5); + background-image: -o-linear-gradient(center top , #FFFFFF, #F5F5F5); + background-image: -ms-linear-gradient(center top , #FFFFFF, #F5F5F5); + background-image: 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 {