forms.less 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. /*
  2. * Component: Form
  3. * ---------------
  4. */
  5. .form-control {
  6. .border-radius(@input-radius);
  7. box-shadow: none;
  8. border-color: @gray;
  9. &:focus {
  10. border-color: @light-blue;
  11. box-shadow: none;
  12. }
  13. &::-moz-placeholder,
  14. &:-ms-input-placeholder,
  15. &::-webkit-input-placeholder {
  16. color: #bbb;
  17. opacity: 1;
  18. }
  19. -webkit-appearance: none;
  20. -moz-appearance: none;
  21. appearance: none;
  22. .btn {
  23. .border-radius(@input-radius);
  24. }
  25. }
  26. select.form-control {
  27. padding-right: 25px;
  28. -webkit-appearance: none;
  29. -webkit-border-radius: 0px;
  30. background-position: right 50%;
  31. background-repeat: no-repeat;
  32. background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=);
  33. }
  34. .form-group {
  35. &.has-success {
  36. label {
  37. color: @green;
  38. }
  39. .form-control,
  40. .input-group-addon {
  41. border-color: @green;
  42. box-shadow: none;
  43. }
  44. .help-block {
  45. color: @green;
  46. }
  47. }
  48. &.has-warning {
  49. label {
  50. color: @yellow;
  51. }
  52. .form-control,
  53. .input-group-addon {
  54. border-color: @yellow;
  55. box-shadow: none;
  56. }
  57. .help-block {
  58. color: @yellow;
  59. }
  60. }
  61. &.has-error {
  62. label {
  63. color: @red;
  64. }
  65. .form-control,
  66. .input-group-addon {
  67. border-color: @red;
  68. box-shadow: none;
  69. }
  70. .help-block {
  71. color: @red;
  72. }
  73. }
  74. }
  75. /* Input group */
  76. .input-group {
  77. .input-group-addon {
  78. .border-radius(@input-radius);
  79. border-color: @gray;
  80. background-color: #fff;
  81. }
  82. }
  83. /* button groups */
  84. .btn-group-vertical {
  85. .btn {
  86. &.btn-flat:first-of-type, &.btn-flat:last-of-type {
  87. .border-radius(0);
  88. }
  89. }
  90. }
  91. .icheck > label {
  92. padding-left: 0;
  93. }
  94. /* support Font Awesome icons in form-control */
  95. .form-control-feedback.fa {
  96. line-height: @input-height-base;
  97. }
  98. .input-lg + .form-control-feedback.fa,
  99. .input-group-lg + .form-control-feedback.fa,
  100. .form-group-lg .form-control + .form-control-feedback.fa {
  101. line-height: @input-height-large;
  102. }
  103. .input-sm + .form-control-feedback.fa,
  104. .input-group-sm + .form-control-feedback.fa,
  105. .form-group-sm .form-control + .form-control-feedback.fa {
  106. line-height: @input-height-small;
  107. }