css/bootstrap/bootstrap-formhelpers.css

0001 /*!
0002  * Bootstrap Form Helpers
0003  *
0004  * Copyright 2012 Vincent Lamanna, Inc
0005  * Licensed under the Apache License v2.0
0006  * http://www.apache.org/licenses/LICENSE-2.0
0007  *
0008  * Designed and built by @vincent lamanna.
0009  */
0010
0011 .bfh-selectbox {
0012   height: 30px;
0013   position: relative;
0014   display: inline-block;
0015 }
0016
0017 .bfh-selectbox-toggle {
0018   *margin-bottom: -3px;
0019 }
0020
0021 .bfh-selectbox-toggle:active,
0022 .open .bfh-selectbox-toggle {
0023   outline: 0;
0024 }
0025
0026 .bfh-selectbox .caret {
0027   margin-top: 8px;
0028   margin-left: 2px;
0029   height: 8px;
0030 }
0031
0032 .bfh-selectbox > .bfh-selectbox-toggle > .caret {
0033   float: right;
0034 }
0035
0036 .bfh-selectbox-options {
0037   position: absolute;
0038   top: 100%;
0039   left: 0;
0040   z-index: 1000;
0041   display: none;
0042   float: left;
0043   min-width: 160px;
0044   padding: 5px 0;
0045   margin: 2px 0 0;
0046   background-color: #ffffff;
0047   border: 1px solid #ccc;
0048   border: 1px solid rgba(0, 0, 0, 0.2);
0049   *border-right-width: 2px;
0050   *border-bottom-width: 2px;
0051   -webkit-border-radius: 6px;
0052      -moz-border-radius: 6px;
0053           border-radius: 6px;
0054   -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
0055      -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
0056           box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
0057   -webkit-background-clip: padding-box;
0058      -moz-background-clip: padding;
0059           background-clip: padding-box;
0060 }
0061
0062 .bfh-selectbox-options ul {
0063   list-style: none;
0064 }
0065
0066 .bfh-selectbox-options ul::-webkit-scrollbar {
0067   width: 15px;
0068 }
0069
0070 .bfh-selectbox-options ul::-webkit-scrollbar-thumb {
0071   background-color: #0088cc;
0072   background-color: #0081c2;
0073   background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
0074   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
0075   background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
0076   background-image: -o-linear-gradient(top, #0088cc, #0077b3);
0077   background-image: linear-gradient(to bottom, #0088cc, #0077b3);
0078   -webkit-border-radius: 6px;
0079      -moz-border-radius: 6px;
0080           border-radius: 6px;
0081 }
0082
0083 .bfh-selectbox-options ul::-webkit-scrollbar-button {
0084   width: 0;
0085   height: 0;
0086 }
0087
0088 .bfh-selectbox-options.pull-right {
0089   right: 0;
0090   left: auto;
0091 }
0092
0093 .bfh-selectbox-options a {
0094   display: block;
0095   padding: 3px 20px;
0096   clear: both;
0097   font-weight: normal;
0098   line-height: 20px;
0099   height: 20px;
0100   color: #333333;
0101   white-space: nowrap;
0102   text-decoration: none;
0103   -webkit-border-radius: 6px;
0104      -moz-border-radius: 6px;
0105           border-radius: 6px;
0106 }
0107
0108 .bfh-googlefonts .bfh-selectbox-options a {
0109   height: 30px;
0110   text-indent: -9999px;
0111   background-image: url(../img/bootstrap-formhelpers-googlefonts.png);
0112 }
0113
0114 .bfh-selectbox-options li > a:focus {
0115   color: #ffffff;
0116   text-decoration: none;
0117   background-color: #0088cc;
0118   background-color: #0081c2;
0119   background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
0120   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
0121   background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
0122   background-image: -o-linear-gradient(top, #0088cc, #0077b3);
0123   background-image: linear-gradient(to bottom, #0088cc, #0077b3);
0124   background-repeat: repeat-x;
0125   filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
0126 }
0127
0128 .bfh-googlefonts .bfh-selectbox-options li > a:focus {
0129   background-image: url(../img/bootstrap-formhelpers-googlefonts.png);
0130   background-repeat: no-repeat;
0131   filter: none;
0132   background-color: transparent;
0133   filter: none;
0134   outline: none;
0135 }
0136
0137 .bfh-selectbox-options .active > a,
0138 .bfh-selectbox-options .active > a:hover {
0139   color: #ffffff;
0140   text-decoration: none;
0141   background-color: #0088cc;
0142   background-color: #0081c2;
0143   background-image: linear-gradient(to bottom, #0088cc, #0077b3);
0144   background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
0145   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
0146   background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
0147   background-image: -o-linear-gradient(top, #0088cc, #0077b3);
0148   background-repeat: repeat-x;
0149   outline: 0;
0150   filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
0151 }
0152
0153 .bfh-googlefonts .bfh-selectbox-options .active > a,
0154 .bfh-googlefonts .bfh-selectbox-options .active > a:hover {
0155   background-image: url(../img/bootstrap-formhelpers-googlefonts.png);
0156   background-repeat: no-repeat;
0157   filter: none;
0158   background-color: transparent;
0159   filter: none;
0160 }
0161
0162 .bfh-selectbox-options .disabled > a,
0163 .bfh-selectbox-options .disabled > a:hover {
0164   color: #999999;
0165 }
0166
0167 .open {
0168   *z-index: 1000;
0169 }
0170
0171 .open > .bfh-selectbox-options {
0172   display: block;
0173 }
0174
0175 .pull-right > .bfh-selectbox-options {
0176   right: 0;
0177   left: auto;
0178 }
0179
0180 .bfh-selectbox > .bfh-selectbox-toggle {
0181   color: #000;
0182   padding: 4px;
0183   display: inline-block;
0184   text-decoration: none;
0185   background-color: white;
0186   border: 1px solid #CCC;
0187   border: 1px solid rgba(0, 0, 0, 0.2);
0188   -webkit-border-radius: 6px;
0189   -moz-border-radius: 6px;
0190   border-radius: 6px;
0191 }
0192
0193 .bfh-selectbox-options ul {
0194   max-height: 200px;
0195   overflow-x: hidden;
0196   overflow-y: auto;
0197   margin: 5px 0 0 0;
0198   width: 240px;
0199 }
0200
0201 .bfh-selectbox-filter {
0202   margin: 0 10px;
0203 }
0204
0205 .bfh-selectbox > .bfh-selectbox-toggle > .bfh-selectbox-option {
0206   display: inline-block;
0207   float: left;
0208   height: 20px;
0209   overflow: hidden;
0210 }
0211
0212 span.bfh-countries {
0213   line-height: 18px;
0214 }
0215
0216 .bfh-datepicker-calendar > table.calendar {
0217   width: 376px;
0218   background: #fff;
0219 }
0220
0221 .bfh-datepicker-calendar > table.calendar .months-header > th {
0222   text-align: center;
0223   font-size: 12px;
0224 }
0225
0226 .bfh-datepicker-calendar > table.calendar .months-header > th.month > span {
0227   width: 100px;
0228   display: inline-block;
0229 }
0230
0231 .bfh-datepicker-calendar > table.calendar .months-header > th.year > span {
0232   width: 50px;
0233   display: inline-block;
0234 }
0235
0236 .bfh-datepicker-calendar > table.calendar .days-header > th {
0237   text-align: center;
0238   font-size: 11px;
0239   line-height: 12px;
0240 }
0241
0242 .bfh-datepicker-calendar > table.calendar > tbody > tr > td {
0243   text-align: center;
0244   font-size: 11px;
0245   line-height: 12px;
0246 }
0247
0248 .bfh-datepicker-calendar > table.calendar > tbody > tr > td.today {
0249         background-color: #999;
0250         color: #fff;
0251         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
0252 }
0253
0254 .bfh-datepicker-calendar > table.calendar > tbody > tr > td.off {
0255         color: #aaa;
0256 }
0257
0258 .bfh-datepicker {
0259   position: relative;
0260 }
0261
0262 .bfh-datepicker-toggle {
0263   *margin-bottom: -3px;
0264 }
0265
0266 .bfh-datepicker-calendar {
0267   position: absolute;
0268   top: 100%;
0269   left: 0;
0270   z-index: 1000;
0271   display: none;
0272   float: left;
0273   min-width: 160px;
0274 }
0275
0276 .bfh-datepicker-calendar.pull-right {
0277   right: 0;
0278   left: auto;
0279 }
0280
0281 .open > .bfh-datepicker-calendar {
0282   display: block;
0283 }
0284
0285 .bfh-datepicker-calendar > table > tbody > tr > td:not(.off):hover {
0286   cursor: pointer;
0287   color: #ffffff;
0288   text-decoration: none;
0289   background-color: #0088cc;
0290   background-color: #0081c2;
0291   background-image: linear-gradient(to bottom, #0088cc, #0077b3);
0292   background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
0293   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
0294   background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
0295   background-image: -o-linear-gradient(top, #0088cc, #0077b3);
0296   background-repeat: repeat-x;
0297   outline: 0;
0298   filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
0299 }
0300
0301 .bfh-timepicker-popover > table {
0302   width: 180px;
0303   margin: 0;
0304 }
0305
0306 .bfh-timepicker-popover > table > tbody > tr > td {
0307   text-align: center;
0308   border: 0;
0309 }
0310
0311 .bfh-timepicker-popover > table > tbody > tr > td.separator {
0312   line-height: 65px;
0313   font-weight: bold;
0314   font-size: 20px;
0315 }
0316
0317 .bfh-timepicker-popover > table > tbody > tr > td > input {
0318   margin: 0;
0319   text-align: center;
0320 }
0321
0322 .bfh-timepicker {
0323   position: relative;
0324 }
0325
0326 .bfh-timepicker-toggle {
0327   *margin-bottom: -3px;
0328 }
0329
0330 .bfh-timepicker-popover {
0331   position: absolute;
0332   top: 100%;
0333   left: 0;
0334   z-index: 1000;
0335   display: none;
0336   float: left;
0337   min-width: 160px;
0338   background-color: #ffffff;
0339   border: 1px solid #ccc;
0340   border: 1px solid rgba(0, 0, 0, 0.2);
0341   *border-right-width: 2px;
0342   *border-bottom-width: 2px;
0343   -webkit-border-radius: 6px;
0344      -moz-border-radius: 6px;
0345           border-radius: 6px;
0346 }
0347
0348 .bfh-timepicker-popover.pull-right {
0349   right: 0;
0350   left: auto;
0351 }
0352
0353 .open > .bfh-timepicker-popover {
0354   display: block;
0355 }
0356
0357 .form-horizontal .controls a.bfh-selectbox-toggle {
0358   width: 210px;
0359   vertical-align: middle;
0360 }
0361
0362 .form-horizontal .control-group.error a {
0363   color: #b94a48;
0364   border-color: #b94a48;
0365 }
0366
0367 .form-horizontal .control-group.success a {
0368     color: #468847;
0369     border-color: #468847;
0370 }
0371
0372 .form-horizontal .control-group.info a {
0373     color: #3a87ad;
0374     border-color: #3a87ad;
0375 }
0376
0377 .form-horizontal .control-group.warning a {
0378     color: #c09853;
0379     border-color: #c09853;
0380 }